@charset "UTF-8";

/* --------- FMT --------- */
.info_wrap,
.footer_container {
	font-family: 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Arial", "Verdana", "sans-serif";
	font-size: 16px;
	color: #000;
	line-height: 1.5;
	font-weight: 400;
}
img {
	display: block;
	width: 100%;
}
.content_wrap {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
	width: 100%;
	background: #FFEEDD;
	position: relative;
	z-index: 0;
	overflow-x: hidden;
	*,*::before,*::after {
		box-sizing: border-box;
	}
}
.content-inner {
	width: 92%;
	max-width: 738px;
	margin-inline: auto;
}
figure {
	margin: 0 auto;
    width: 100%;
}
:root {
	--primary-color: #D86021;
	--font-paytone: "Paytone One","Noto Sans JP",sans-serif;
}
.txt-link{
	color: var(--primary-color);
	text-decoration: underline;
	font-weight: 700;
	transition: .3s;
	&:active {
		opacity: .5;
	}
}
.note-list {
	display: grid;
	gap: 5px;
}
.note-ttl {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.46;
	letter-spacing: .025em;
	padding-left: 1em;
	text-indent: -1em;
	margin-bottom: 5px;
}
.note-list + .note-ttl {
	margin-top: 5px;
}
.note-list__items {
	font-size: 12px;
	line-height: 1.58;
	letter-spacing: .025em;
	padding-left: 1em;
	text-indent: -1em;
}

/* ------ 汎用 ------ */
/* --- CTA --- */
.cta-wrapper {
	max-width: 600px;
	margin-inline: auto;
}
.cta-btn {
	display: block;
	margin-bottom: 16px;
}
/* --- acc --- */
.acc__btn {
	display: block;
	width: fit-content;
	margin: 0 auto;
	padding: 6px 40px 7px 21px;
	background: #5088CB;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	list-style: none;
	border-radius: 10vh;
	position: relative;
	cursor: pointer;
}
.acc__btn::-webkit-details-marker {
	display:none;
}
.acc__ico {
	display: block;
	width: 21px;
	height: 21px;
	position: absolute;
	top: 6px;
	right: 11px;
	background: #fff;
	border-radius: 50%;
	&::before,&::after {
		content: "";
		display: block;
		width: 12px;
		height: 2px;
		background: #5088CB;
		position: absolute;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
	}
	&::after {
		rotate: 90deg;
		transition: rotate .3s;
	}
}
.acc[open] .acc__ico::after {
	rotate: 0deg;
}
.acc__content {
	border: 1px solid #5088CB;
	border-radius: 15px;
	margin-top: 15px;
    transition: .6s ease-in-out;
	height: 0;
	overflow: hidden;
}
.acc__content__inner {
	padding: 16px 15px;
}
/* --- comingsoon & finish --- */
.comingsoon,.finish {
	position: relative;
	pointer-events: none;
	&::after {
		content: "Coming Soon";
		display: grid;
		place-content: center;
		background: rgb(255 255 255/.8);
		font-size: 8vw;
		font-weight: 700;
		text-align: center;
		line-height: 1.2;
		position: absolute;
		inset: 0;
	}
}
/* finish */
.finish-txt {
	border: 2px solid #ff0000;
	background: #fff;
	padding-block: 8px;
	color: #ff0000;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	margin-block: 16px;
}
.finish::after {
	content: "終了しました";
	border: 2px solid #ff0000;
	color: #ff0000;
	font-size: 18px;
	width: 90%;
	height: 90%;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
}

/* --- animation --- */
.js-animate[data-animate="fade-up"] {
	opacity: 0;
}
.js-animate--active[data-animate="fade-up"] {
	animation: fade-up 1.3s forwards;
}
.js-animate [data-animate="clip"] {
	display: block;
	clip-path: inset(0 100% 0 0);
	transition: .5s ease-in-out;
}
.js-animate--active [data-animate="clip"] {
	clip-path: inset(0);
}
.js-animate[data-animate="hit"] {
	opacity: 0;
	transition: opacity 0s linear;
}
.js-animate--active[data-animate="hit"] {
	opacity: 1;
	animation: hit .8s ease-in-out;
}

@keyframes hit {
	0% {
		scale: 1;
	}
	50% {
		scale: 1.3;
	}
	70% {
		scale: 1;
	}
	90% {
		scale: 1.15;
	}
	100% {
		scale: 1;
	}
}
@keyframes fade-up {
	0% {
		opacity: 0;
		translate: 0 40px
	}
	50% {
		translate: 0 -16px;
	}
	100% {
		opacity: 1;
		translate: 0;
	}
}
@keyframes rotate {
	0% {
		rotate: 0deg;
	}
	100%  {
		rotate: 300deg;
	}
}

@keyframes blinking {
	0% {
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	60% {
		opacity: 0;
	}
	73% {
		opacity: 1;
	}
	87% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/* --------- header --------- */
.ske48-header {
	display: flex;
	justify-content: space-between;
	padding: 11px 4%;
	background: #fff;
	margin-bottom: 7px;
	position: sticky;
	top: 0;
	z-index: 1000;
}
.ske48-header__logo--01 {
	width: 56px;
}
.ske48-header__logo--02 {
	width: 40px;	
}

/* --------- mv --------- */
.mv {
	width: calc(100% - 16px);
	height: auto;
	aspect-ratio:  359/399;
	position: relative;
	margin: 0 auto 18px;
	pointer-events: none;
	user-select: none;
}
.mv__grid__img,
.mv__grid__deco {
	display: block;
	opacity: 0;
	position: absolute;
}
.mv__grid__img--01 {
	width: 25.07%;
	top: 0;
	left: 0;
}
.mv__grid__img--02 {
	width: 49.03%;
	top: 0;
	left: calc(25.07% + 5px);
}
.mv__grid__img--03 {
	width: 23.12%;
	top: 0;
	right: 0;
}
.mv__grid__img--04 {
	width: 75.49%;
	bottom: 0;
	left: 0;
}
.mv__grid__img--05 {
	width: 37.05%;
	top: calc(31.58% + 5px);
	left: 0;
}
.mv__grid__img--06 {
	width: 37.05%;
	top: calc(31.58% + 5px);
	left: calc(37.05% + 5px);
}
.mv__grid__wappen {
	width: 39.55%;
	position: absolute;
	bottom: 0;
	right: -1px;
	opacity: 0;
}
.mv__grid__wappen__logo {
	width: 71.13%;
	position: absolute;
	top: 26.06%;
	left: 50%;
	translate: -50%;
}
.mv__grid__deco--01 {
	width: 16.16%;
	top: 2.01%;
	right: 15.04%;
}
.mv__grid__deco--02 {
	width: 9.75%;
	bottom: 21.05%;
	left: 3.62%;
}
.mv__grid__deco--03 {
	width: 6.96%;
	bottom: 33.58%;
	right: 30.08%;
}
/* ------ animation ------ */
.loaded {
	.mv__grid__img,
	.mv__grid__wappen {
		opacity: 1;
		animation: hit .4s;
		transition: 0s;
	}
	.mv__grid__img--02 {
		animation-delay: .2s;
		transition-delay: .2s;
	}
	.mv__grid__img--03 {
		animation-delay: .4s;
		transition-delay: .4s;
	}
	.mv__grid__img--04 {
		animation-delay: .6s;
		transition-delay: .6s;
	}
	.mv__grid__img--05 {
		animation-delay: .8s;
		transition-delay: .8s;
	}
	.mv__grid__img--06 {
		animation-delay: 1s;
		transition-delay: 1s;
	}
	.mv__grid__wappen {
		animation-delay: 2.2s;
		transition-delay: 2.2s;
	}
	.mv__grid__wappen__bg {
		animation: rotate 12s linear 2.8s infinite;
	}
	.mv__grid__deco {
		animation: blinking .8s linear 1.2s forwards;
	}
}

/* --------- sec--lead --------- */
.sec--lead {
	margin-bottom: 35px;
}
.sec--lead__date {
	margin-bottom: 24px;
} 
.sec--lead__date__ttl {
	color: #fff;	
	font-weight: 700;
	letter-spacing: .075em;
	text-align: center;
	background: #D86021;
	padding-block: 7px 6px;
	border: 1px solid #5A2A0E;
	border-radius: 16px 16px 0 0;
}
.sec--lead__date__dtl {
	background: #fff;
	border: 1px solid #5A2A0E;
	border-top: 0;
	border-radius: 0 0 16px 16px;
	padding-block: 10px 9px;
	color: #5A2A0E;
	font-size: 23px;
	font-weight: 700;
	font-family: var(--font-paytone);
	display: flex;
	justify-content: center;
	gap: 21px;
}
.sec--lead__date__dtl__col {
	letter-spacing: .025em;
	position: relative;
	&:first-child {
		position: relative;
		&::after {
			content: "";
			display: inline-block;
			width: 13px;
			height: 15px;
			background: #D86021;
			clip-path: polygon(0 0,100% 50%,0 100%);
			position: absolute;
			right: -15px;
			top: 10px;
		}
	}
}
.sec--lead__date__dtl__small-txt {
	font-size: 16px;
	font-feature-settings: "palt";
	letter-spacing: .05em;
}
.sec--lead__txt {
	color: #5A2A0E;
	font-weight: 700;
	line-height: 1.6875;
	letter-spacing: .05em;
	text-align: center;
}

/* --------- sec--toc --------- */
.sec--toc {
	background: linear-gradient(to bottom,transparent 64px,#F8B500 64px,#F8B500 calc(100% - 64px),transparent calc(100% - 64px));
	margin-bottom: 25px;
	margin-top: 127px; /* Phase2で削除 */
	position: relative;
}
.sec--toc__balloon {
	width: 240px;
	height: auto;
	aspect-ratio: 240/114;
	background: url(../img/bg_toc03_sp.png) no-repeat center top/cover;
	padding-top: 21px;
	color: #fff;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.47;
	letter-spacing: .025em;
	text-align: center;
	position: absolute;
	top: -103px;
	left: 50%;
	translate: -50%;
	filter: drop-shadow(2px 3px 0 #5a2a0e);
}
.sec--toc__bg {
	display: block;
	height: 64px;
	img {
		height: 100%;
		width: 100%;
	}
}
.sec--toc__ttl {
	width: 62.9%;
	translate: 0 -51px;
	margin: 0 auto -22px;
}
.sec--toc__bg--bottom {
	scale: 1 -1;
}
.sec--toc__list {
	display: grid;
	gap: 13px;
}
.sec--toc__list__items {
	background: #FFF7EF;
	border: 1px solid #5A2A0E;
	border-radius: 16px;
	padding: 11px;
	color: #5A2A0E;
	text-align: center;
	position: relative;
	z-index: 1;
}
.sec--toc__list__items__num {
	width: 42px;
	height: 42px;
	position: absolute;
	top: -10px;
	left: 3px;
}
.sec--toc__list__items__num__txt {
	color: #fff;
	font-size: 23px;
	font-family: var(--font-paytone);
	letter-spacing: .05em;
	text-align: center;
	position: absolute;
	top: 4px;
	left: 50%;
	translate: -50%;
}
.sec--toc__list__items__txt--small {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .05em;
}
.sec--toc__list__items__txt--large {
	font-size: 17px;
	font-weight: 900;
	line-height: 1.29;
	letter-spacing: .025em;
}

/* --------- footer --------- */
/* ------ info_wrap ------ */
.info_wrap {
	margin: 0 auto;
	padding: 8px 40px 20px;
	position: relative;
	background-color: #FFF;
}
.footer__sns-link {
	width: 92%;
	max-width: 740px;
	margin: 40px auto 0;
}
.footer__sns-link__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.footer__sns-link__ttl {
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 20px;
}
.footer__sns-link__list__btn {
	box-sizing: border-box;
	display: block;
	border: 1px solid #000;
	background-color: #fff;
	text-align: center;
	font-size: 18px;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 700;
	border-radius: 10px;
	position: relative;
	padding: 10px 40px;
	transition: all 0.3s;
	svg {
		width: 14px;
		height: auto;
		position: absolute;
		top: 50%;
		left: 16px;
		translate: 0 -50%;
		transition: .3s;
		path {
			fill: #000;
		}
	}
	&:hover {
		background: #000;
		color: #fff;
		svg path {
			fill: #fff;
		}
		&::after {
			border-top: 3px solid #fff;
			border-right: 3px solid #fff;
		}
	}
	&::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 16px;
		height: 10px;
		width: 10px;
		border-top: 3px solid #000;
		border-right: 3px solid #000;
		transform: translateY(-50%) rotate(45deg);
		transition: all 0.3s;
	}
}
.oshitabi_btn {
	display: block;
	border: 4px solid #000;
	background: #FFF;
	max-width: 740px;
	margin: 32px auto 0;
	font-size: 18px;
	font-weight: 700;
	font-family: "Zen Kaku Gothic New", sans-serif;
	text-align: center;
	border-radius: 10px;
	padding: 10px 30px 10px 5px;
	position: relative;
	transition: all .3s;
	&::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 30px;
		height: 12px;
		width: 12px;
		border-top: 3px solid #000;
		border-right: 3px solid #000;
		translate: 0 -50%;
		rotate: 45deg;
		transition: all .3s;
	}
	&:active {
		background: var(--primary-color);
		color: #FFF;
		border-color: var(--primary-color);
		&::after {
			border-color: #fff;
		}
	}
}
.credit {
	text-align: center;
	margin-top: 16px;
	font-size: 12px;
}
.footer_container {
	position: relative;
	z-index: 100;
	background-color: #FFF;
	padding-top: 1px;
}

/* ------ 推し旅関連削除 ------ */
.tw_btn,
.btm_txt:nth-of-type(2) {
	display: none;
}

/* --------- mediaquery --------- */
@media(min-width:751px){
	.sp {
		display: none;
	}
	.pc {
		display: block;
	}
	/* --------- FMT --------- */
	.txt-link:hover {
		opacity: .5;
	}

	/* --------- 汎用 --------- */
	/* ------ cta ------ */
	.qr-wrapper {
		display: grid;
		grid-template-columns: 1fr 100px;
		gap: 16px;
		background: #f5f5f5;
		padding: 16px;
		margin-bottom: 16px;
	}
	.qr-ttl {
		background: #fff;
		text-align: center;
		font-size: 18px;
		font-weight: 500;
		padding-block: 6px;
		margin-bottom: 6px;
	}
	.qr-txt {
		font-size: 15px;
		line-height: 1.5;
	}
	/* ------ comingsoon ------ */
	.comingsoon::after {
		font-size: 18px;
	}
	.finish::after {
		white-space: pre;
		content: "終了\Aしました";
	}

	/* --------- header --------- */
	.ske48-header {
		padding: 15px 26px 16px;
		margin-bottom: 24px;
	}
	.ske48-header__logo--01 {
		width: 76px;
	}
	.ske48-header__logo--02 {
		width: 49px;	
	}

	/* --------- mv --------- */
	.mv {
		max-width: 1002px;
		aspect-ratio:  1002/515;
		margin-bottom: 40px;
	}
	.mv__grid__img--01 {
		width: 16.97%;
	}
	.mv__grid__img--02 {
		width: 30.74%;
		left: calc(16.97% + 10px);
	}
	.mv__grid__img--03 {
		width: 30.74%;
		left: calc(30.74% + 16.97% + 20px);
	}
	.mv__grid__img--04 {
		width: 18.56%;
		left: auto;
		right: 0;
	}
	.mv__grid__img--05 {
		width: 46.91%;
		top: calc(46.21% + 10px);
		left: calc(32.53% + 10px);
	}
	.mv__grid__img--06 {
		width: 32.53%;
		top: calc(46.21% + 10px);
		left: 0;
	}
	.mv__grid__wappen {
		width: 19.96%;
		bottom: 6.8%;
		right: 13.07%;
		opacity: 0;
	}
	.mv__grid__wappen__logo {
		width: 64%;
		top: 27.5%;
	}
	.mv__grid__deco--01 {
		width: 9.78%;
		top: 9.71%;
		right: 13.97%;
	}
	.mv__grid__deco--02 {
		width: 5.69%;
		bottom: 30.87%;
		left: 3.99%;
	}
	.mv__grid__deco--03 {
		width: 3.59%;
		bottom: 22.14%;
		right: 52.1%;
	}

	/* --------- sec--lead --------- */
	.sec--lead {
		max-width: 640px;
		margin: 0 auto 80px;
	}
	.sec--lead__date {
		margin-bottom: 40px;
	} 
	.sec--lead__date__ttl {
		font-size: 18px;
		padding-block: 6px 5px;
	}
	.sec--lead__date__dtl {
		padding-block: 9px;
		font-size: 24px;
		gap: 38px;
	}
	.sec--lead__date__dtl__col:first-child::after {
		right: -23px;
		top: 10px;
	}

	/* --------- sec--toc --------- */
	.sec--toc {
		background: linear-gradient(to bottom,transparent 64px,#F8B500 64px,#F8B500 calc(100% - 64px),transparent calc(100% - 64px));
		margin-bottom: 25px;
		margin-top: 0;
	}
	.sec--toc__balloon {
		width: 200px;
        aspect-ratio: 200 / 124;
        background: url(../img/bg_toc03_pc.png) no-repeat center top / cover;
        padding-top: 18px;
        position: absolute;
        top: -74px;
        left: calc(50% + 169px);
        translate: 0;
		rotate: 6deg;
		filter: drop-shadow(3px 4px 0 #5a2a0e);
	}
	.sec--toc__ttl {
		max-width: 352px;
		translate: 0 -78px;
		margin: 0 auto -36px;
	}
	.sec--toc__list {
		grid-template-columns: repeat(2,1fr);
		gap: 14px 10px;
	}
	.sec--toc__list__items {
		&:nth-child(3) {
			padding-top: 21px;
		}
		&:nth-child(2) .sec--toc__list__items__txt--small {
			 translate: 9px;
		}
	}
	.sec--toc__list__items__num {
		top: -7px;
		left: 3px;
	}
	.sec--toc__list__items__txt--small {
		font-size: 16px;
		margin-bottom: 1px;
	}
	.sec--toc__list__items__txt--large {
		font-size: 18px;
		line-height: 1.22;
	}

	/* ------ footer ------ */
	.info_wrap {
		margin: 0 auto;
		padding: 8px 20px 100px;
	}
	.footer__sns-link__list__btn {
		padding: 15px;
		font-size: 20px;
		svg {
			width: 20px;
			left: 28px;
		}
		&::after {
			right: 30px;
			width: 12px;
			height: 12px;
		}
	}
	.oshitabi_btn {
		padding: 15px;
		font-size: 20px;
		&:hover {
			background: var(--primary-color);
			color: #FFF;
			border-color: var(--primary-color);
			&::after {
				border-color: #fff;
			}
		}
	}
}

@media(max-width:750px){
	.sp {
		display: block;
	}
	.pc {
		display: none;
	}
}