/*　謎解き202512style　　作成日：2025.11.19 */
@charset "UTF-8";

/*================================================
全体設定
================================================*/
main {
	background-color: rgba(32, 90, 71, 1.0);
	overflow: hidden;
}
.pos-absolute {
	position: absolute;
}

/*================================================
各ブロック設定
================================================*/
.MV h2 img {
	padding-top: 20px;
}

.MV_title01 {
	position: absolute;
	z-index: 2;
}

.MV_title02 {
	position: absolute;
	z-index: 1;
}

.MV_base_box img{
	top: 0;
	left: 0;
	z-index: 2;
}

.deco-wrap {
	color: rgba(255, 255, 255, 1.0);
	position: relative;
}

.sec01 {
	padding-top: 50px;
	padding-bottom: 20px;
}

.sec02-wrap {
	background: url(../img/2512-nazotoki/bg1.webp) no-repeat center/cover;
}

.sec02-deco01 {
	top: -60px;
	left: 0;
}

.sec02-deco02 {
	bottom: -60px;
	left: 0;
	transform: rotate( 180deg);
}

.sec03 {
	padding-top: 200px;
	padding-bottom: 200px;
}

.CarA-santa {
	max-width: 400px;
	width: 40%;
	bottom: 30px;
	right: 0;
	animation: santa 1s infinite alternate ease-in-out;
}

@keyframes santa {
	0% { transform: translate(0, 0);}
	100% { transform: translate(0, 10px);}
}

.sec04 {
	padding-bottom: 100px;
}

.sec04 h3 {
	margin-bottom: 30px;
}

.HTP_wrap .contents {
	max-width: 850px;
	margin: 0 auto;
	padding: 30px;
}

.HTP_wrap .contents .items {
	align-items: center;
}

.HTP_wrap .contents .items div:first-child {
	width: 120px;
	padding: 10px;
}

.HTP_wrap .contents .items div:nth-child(2), 
.HTP_wrap .contents .items div:nth-child(3) {
	width: 200px;
	padding: 20px;
}

.HTP_wrap .contents .text {
	padding: 20px;
	font-size: 1.3rem;
}

.deco-caratab {
	display: inline-block;
	margin: 0 2px;
	padding: 0 5px;
	background: #e2007e;
	color: #fff;
	border-radius: 3px;
	font-size: 1.2rem;
}

.HTP_wrap .contents .text .annotation-text {
	font-size: 0.7rem;
}

.line_kyeboard-icon {
	display: inline-block;
	width: 20px;
	margin: 0 5px;
	vertical-align: text-bottom;
}

.sec05 h3 {
	margin-bottom: 30px;
}

.prize01 {
	max-width: 860px;
	margin: 0 auto;
}

.contents03_item {
	max-width: 300px;
	width: 46%;
	top: 0;
	right: -63px;
}

.prize02 {
	max-width: 650px;
	margin: 0 auto 100px;
}

.contents04_item{
	max-width: 210px;
	width: 33%;
	top: 40px;
	left: 40px;
}

.ending_wrap {
	padding-top: 200px;
	padding-bottom: 200px;
}

.deco01 {
	max-width: 450px;
	width: 33%;
	top: 0;
	left: 0;
}

.deco02 {
	max-width: 450px;
	width: 33%;
	bottom: 50px;
	right: 0;
}

.ending {
	max-width: 650px;
	width: 47%;
	margin: 0 auto 100px;
}

/* 2512新規 */
#page-title-pc-wrap {
	overflow: hidden;
}
#page-title-pc {
	width: 100%;
	max-width: 1000px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
img.page-title-pc-back {
	width: auto;
	height: 100%;
}
section h3 {
	margin-bottom: 50px;
	text-align: center;
}
section h3 img {
	max-width: 600px;
}
section.sec01 {
	padding-top: 80px;
	padding-bottom: 50px;
}
section.sec02 {
	padding-top: 250px;
	padding-bottom: 250px;
} 
section.sec04 {
	padding-top: 100px;
	padding-bottom: 100px;
}
section.sec05 {
	padding-top: 120px;
	padding-bottom: 50px;
	border-top: 60px solid rgb(25, 40, 88);
	background-color: rgb(36, 86, 131);
}
.ending_wrap {
	background-color: rgb(36, 86, 131);
}
.summary-read {
	margin: 0 auto 30px;
	font-size: 2.2em;
	font-weight: bold;
	text-align: center;
}
.summary-contents {
	max-width: 700px;
	margin: 0 auto;
}
#prologue-1, 
#prologue-2 {
	margin-top: 60px;
	font-family: Georgia, serif;
	font-size: 17.5px;
	line-height: 1.85;
}
#prologue-3 {
	margin-top: 100px;
	font-family: Georgia, serif;
	font-size: 24px;
	line-height: 1.85;
	text-align: center;
}
.prologue-txt {
	width: 60%;
}
.prologue-ph {
	width: 38%;
}
.prologue-txt p:not(:first-child) {
	margin-top: 28px;
}
#prologue-1 img {
	max-width: 180px;
}
.nazo-strong {
	display: block;
	color: yellow;
	font-size: 24px;
	font-weight: bold;
}
.present-txt {
	padding-top: 30px;
	padding-bottom: 15px;
	font-size: 28px;
	font-weight: bold;
}
.ILB {
	font-weight: bold;
	color: yellow;
}


/* ~~~~~~~~~~~~~~~ ここから 正解発表ページ用css ~~~~~~~~~~~~~~~~
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.sec01 .comment {
	display: block;
	max-width: 820px;
	width: 90%;
	margin: 50px auto 100px;
	padding: 20px;
	font-size: 1.2rem;
	text-align: center;
	background: #e2007e;
	border: 3px solid;
	border-image: linear-gradient(180deg,rgba(248,57,168,0.3),rgba(226,0,126,0.1));
	border-image-slice: 1;
}

.sec03 .comment {
	display: block;
	max-width: 750px;
	width: 90%;
	margin: 30px auto 100px;
	padding: 20px;
	font-size: 1.2rem;
	text-align: justify;
}

.sec06 {
	padding-bottom: 100px;
}

.trueA-lead {
	margin: 150px 0 50px;
	padding: 0 20px;
	text-align: center;
	font-size: 1.5rem;
	line-height: 2;
	
}

.caraRoom-menu2 {
	position: relative;
}

/* ~~~~~~~~~~~~~~~ ここから アコーディオン用css ~~~~~~~~~~~~~~~~ */
.details {
	width: 93%;
	margin: 0 auto 50px;
	border: 3px solid rgba(142,65,192,1);
	border-radius: 3px;
}

.details-cara {
	border: 3px solid #daa520;
}

.details-summary {
	padding: 20px;
	text-align: center;
	font-size: 1.2rem;
	background: linear-gradient(90deg,rgba(142,65,192,1),rgba(141,83,146,1));
	transition: .3s;
}

.details-summary-cara {
	background: rgba(218,165,32,.3);
	font-weight: bold;
}

.details-summary:hover {
	cursor: pointer;
	opacity: .8;
	transition: .3s;
}

.trueABox {
	padding:20px;
	background: rgba(0,0,0,.4);
}

.trueABox h4 {
	margin-bottom: 50px;
	padding: 5px;
	text-align: center;
	font-size: 1.3rem;
	font-weight: bold;
	letter-spacing: 0.1rem;
	background: #daa520;
	color: #30084d;
}

.trueABox p {
	width: 90%;
	margin: 0 auto 50px;
}

.trueA01 {
	width: 80%;
	margin: 0 auto 50px;
}

.trueA0203Box {
	width: 90%;
	margin: 0 auto 50px;
	padding: 20px;
	background: rgba(255,255,255,.2);
}

.trueA0203Box div {
	padding: 20px;
}

.trueA04 {
	display: inline-block;
	width: 40%;
	vertical-align: middle;
}

.trueA05 {
	width: 90%;
	margin: 0 auto 80px;
	padding: 20px;
	background: rgba(255,255,255,.2);
}

.trueA-wrap {
	width: 90%;
	margin: 0 auto 30px;
}

.trueAtextBox {
	align-self: center;
}

.trueAtextBox p {
	width: 100%;
	padding-right: 30px;
}

.trueA06 {
	display: inline-block;
	width: 50%;
	vertical-align: middle;
}

.trueA07 {
	width: 40%;
	padding: 20px;
	background: rgba(255,255,255,.2);
}

.trueA08 {
	width: 46%;
	padding: 20px;
	background: rgba(255,255,255,.2);
}
/* ~~~~~~~~~~~~~~~ ここまで アコーディオン用 ~~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~ ここから modal用css ~~~~~~~~~~~~~~~~ */
/* モーダルを開くボタン */
.modal-open {
	display: block;
	max-width: 200px;
	width: 100%;
	margin: 0 auto 25px;
	padding: 10px 0;
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	border: 3px solid rgba(208,37,244,1);
	box-shadow: 5px 5px 5px rgba(60,0,60,1);
	border-radius: 50px;
	transition: 0.3s;
	background: linear-gradient(90deg,rgba(142,65,192,1),rgba(141,83,146,1));
}

.modal-open:hover {
	transform: translate(3px, 3px);
	box-shadow: 2px 2px 0 rgba(60,0,60,1);
	opacity: .8;
}

/* モーダル本体の指定+モーダル外側の背景の指定 */
.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,0.5);
	padding: 5% 2%;
	overflow: auto;
	box-sizing: border-box;
	z-index: 99;
}

/* モーダル枠の指定 */
.modal-content{
	position: absolute;
	max-width: 1000px;
	width: 90%;
	top: 50%;
	left: 50%;
	background: rgba(30,0,30,0.8);
	transform: translate(-50%, -50%);
	animation: show 0.3s linear 0s;
	border-radius: 3px;
	filter: drop-shadow(0 2px 6px #6a5acd);
}

.modal-container {
	max-height: 65vh;
	overflow-y: scroll;
	margin: 2% 0 0;
}

.modal-content .textBox {
	width: 100%;
	text-align: left;
	padding: 1% 3% 3%;
	background: rgba(255,255,255,0.1);
}

.modal-content .textBox h4 {
	text-align: center;
	font-size: 1.1rem;
	letter-spacing: 1rem;
	margin-bottom: 10px;
	padding-bottom: 5px;
	border-bottom: 1px dotted rgba(255,255,255,0.8);
}

@media only screen and (max-width: 768px) {
	.modal-scroll {
		max-height: 869.828px;
		height: 55vh;
	}
}

/* モーダルを閉じるボタンの指定 */
.modal-top {
	position: absolute;
	display: inline-block;
	width: 50px;
	height: 50px;
	top: -60px;
	right: 0;
}

.modal-close{
	font-size: 50px;
	line-height: 1;
	cursor: pointer;
}

@keyframes show {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
/* ~~~~~~~~~~~~~~~ ここまで modal用css ~~~~~~~~~~~~~~~~ */

/*=================================
タブレット設定（768px〜1024px）
=================================*/
@media only screen and (max-width: 1025px) {

	.sec01 {
		padding-top: 230px;
		padding-bottom: 120px;
	}
	.HTP_wrap .contents .items div:nth-child(3) a {
		box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
	}

}


/*=================================
スマホ設定（〜768px）
=================================*/
@media only screen and (max-width: 768px) {

	.MV h2 img {
		padding-top: 0;
	}
	.deco-wrap {
		clip-path: unset;
		background-color: transparent;
	}
	section.sec01 {
		padding-top: 40px;
		padding-bottom: 40px;
		padding-left: 10px;
		padding-right: 10px;
	}
	section.sec02 {
		padding-top: 140px;
		padding-bottom: 140px;
	} 
	section.sec04 {
		padding-top: 100px;
		padding-bottom: 100px;
		padding-left: 10px;
		padding-right: 10px;
	}
	section.sec05 {
		padding-top: 100px;
		padding-bottom: 0;
		border-top: 10px solid rgb(25, 40, 88);
	}
	.sec02-deco01 {
		min-width: 640px;
		top: -32px;
	}
	.sec02-deco02 {
		min-width: 640px;
		bottom: -32px;
	}
	.sec02 p {
		margin-bottom: 20px;
	}
	.CarA-santa {
		width: 50%;
		bottom: 0;
		right: -5px;
	}
	.HTP_wrap .contents {
		padding: 30px 0;
		flex-direction: column;
	}
	.HTP_wrap .contents .items {
		width: 85%;
		margin: 0 auto;
	}
	.HTP_wrap .contents .text {
		padding: 5px 5px 10px;
		font-size: .85rem;
	}
	.deco-caratab {
		padding: 2px 4px 0;
		font-size: 110%;
	}
	.contents03_item {
		width: 45%;
		right: -10px;
	}
	.contents04_item {
		width: 38%;
		top: 10px;
		left: 10px;
	}
	.present-txt {
		padding-top: 15px;
		padding-bottom: 5px;
		font-size: 18px;
		font-weight: normal;
	}
	.prize01 {
		margin: 0 auto;
		padding-left: 10px;
		padding-right: 10px;
	}
	.prize02 {
		margin: 0 auto;
	}
	.ending_wrap {
		padding-top: 120px;
		padding-bottom: 120px;
	}
	.ending {
		width: 96%;
		margin: 0 auto;
	}
	.deco01 {
		top: 40px;
	}
	.deco02 {
		bottom: 40px;
	}

	/* 2512新規 */
	.summary-read {
		margin: 0 auto 15px;
		font-size: 1.35em;
		font-weight: normal;
	}
	.prologue-txt {
		width: 100%;
	}
	.prologue-ph {
		width: 100%;
		text-align: center;
	}
	#prologue-1, 
	#prologue-2 {
		font-size: 17px;
		line-height: 1.85;
	}
	#prologue-3 {
		font-size: 21px;
		line-height: 1.85;
		text-align: justify;
	}
	.nazo-strong {
		font-size: 20px;
		letter-spacing: 0.01em;
	}

	/* ~~~~~~~~~~~~~~~ ここから 正解発表ページ用css ~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	.sec01 .comment,
	.sec03 .comment,
	.details-summary {
		font-size: .85rem;
	}

	.sec01 .comment {
		margin: 10px auto 20px;
		padding: 5px 10px;
		text-align: justify;
	}

	.sec03 .comment {
		padding: 3px;
		margin-bottom: 70px;
	}

	.trueA-lead {
		margin: 80px 0 30px;
		text-align: left;
		font-size: 1rem;
		line-height: 1.6;
	}


	.details-summary:hover {
		opacity: 1;
	}

	.details .inner {
		margin: 10px 2px 0;
	}

	.modal-open {
		margin: 10px auto 20px;
		padding: 5px 0;
		font-size: .85rem;
		font-weight: normal;
		border: 2.5px solid rgba(208,37,244,0.5);
	}

	.modal-top {
		top: -45px;
		right: -3%;
	}

	.modal-content {
		top: 53%;
	}

	.modal-close {
		font-size: 6vh;
	}

	.modal-content .textBox {
		padding: 2% 5% 5%;
	}

	.modal-content .textBox h4 {
		font-size: .85rem;
		margin-bottom: 3px;
		padding-bottom: 2px;
	}

	.trueABox {
		padding: 10px;
	}

	.trueABox h4 {
		margin-bottom: 15px;
		font-size: .95rem;
	}

	.trueABox p {
		width: 95%;
		margin-bottom: 30px;
	}

	.trueA01 {
		width: 100%;
		margin-bottom: 30px;
		padding: 10px 0;
		background: #e3c696;
	}

	.trueA0203Box {
		width: 100%;
		flex-direction: column;
		padding: 15px;
		margin-bottom: 30px;
	}

	.trueA0203Box div {
		padding: 10px;
	}

	.trueA04 {
		width: 100%;
		padding: 10px 0;
	}

	.trueA05 {
		width: 100%;
		padding: 10px;
		margin-bottom: 50px;
	}

	.trueA-wrap {
		flex-direction: column;
		width: 100%;
	}

	.trueA-wrap:last-child {
		margin-bottom: 0;
	}

	.trueAtextBox p {
		width: 100%;
		padding-right: 0;
	}

	.trueA06 {
		width: 100%;
		padding: 10px 0;
	}

	.trueA07,
	.trueA08 {
		width: 100%;
		padding: 20px 60px;
	}

	.sec07 {
		padding-top: 30px;
	}
}