@charset "utf-8";
/*-----------------------------------------------
 * INTRODUCTION - COMMON
-------------------------------------------------*/
.introductionTextSlideWrap{
	width: 100%;
	position: relative;
	background-color: #FFF;
}
.introductionTextSlideWrap:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-color: var(--color-black);
	z-index: 2;
}
.introductionTextSlideWrap:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-color: var(--color-black);
	z-index: 2;
}

.introductionTextSlide{
	position: relative;
	width: 100%;
	height: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
	display: flex;
	align-items: center;
}
@media screen and (max-width:768px){
	.introductionTextSlideWrap:before,
	.introductionTextSlideWrap:after{
		height: var(--sp-size-2);
	}
	.introductionTextSlide{
		height: calc(96 / var(--vw-min) * 100vw);
	}
}


/*-----------------------------------------------
 * INTRODUCTION - ABOUT
-------------------------------------------------*/
.introductionTextSlide_img.-about{
	display: block;
	width: min(calc(671 / var(--vw-min) * 100vw), calc(671px * var(--max-percent)));
	height: 106.25%;/* 85 */
}
.introductionTextSlide_img.-about img{
	height: 100%;
}

.aboutSectionCont{
	width: 100%;
	display: flex;
}
.about_imageArea{
	flex-shrink: 0;
	width: min(calc(320 / var(--vw-min) * 100vw), calc(320px * var(--max-percent)));
}
.about_imageAreaIn{
	width: 100%;
	padding-top: 100%;
	position: relative;
}
.about_imageAreaIn:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: url(../img/introduction/about_o.svg) no-repeat center / contain;
}
.about_imageLists{
	position: absolute;
	top: 6.25%;/* 20 */
	left: 6.25%;/* 20 */
	right: 6.25%;
	bottom: 6.25%;
}
.about_imageList{
	position: absolute;
	width: 100%;
	height: 100%;
	transition: transform .6s ease, opacity .4s ease;
	transform: rotateY(-90deg);
	opacity: 0;
}
.about_imageList.--active{
	transform: rotateY(0deg);
	opacity: 1;
}
.about_imageList.--next{
	transform: rotateY(90deg);
}
.about_imageList img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}


.about_textArea{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
}
.about_catch img{
	width: 100%;
}

.about_text{
	font-size: 1.25em;/* 20 */
	line-height: 2.5;
	font-weight: 600;
}

@media screen and (max-width:768px){
	.introductionTextSlide_img.-about{
		width: calc(872 / var(--vw-min) * 100vw);
	}
	.aboutSectionCont{
		position: relative;
	}
	.about_imageArea{
		width: calc(192 / var(--vw-min) * 100vw);
	}
	.about_textArea{
		padding-top: 0;
		padding-left: calc(48 / var(--vw-min) * 100vw);
		padding-right: calc(48 / var(--vw-min) * 100vw);
		padding-bottom: 0;
	}
	.about_text{
		font-size: 1em;
		letter-spacing: 0;
	}
}



/** ABOUT 1 **/
.about_imageArea-img.-m{
	width: 100%;
	padding-top: 100%;/* 320 */
	background: url(../img/introduction/about_m.svg) no-repeat top center / cover;
}
.aboutSectionCont.-about1 .about_textArea{
	width: calc(100% - min(calc(320 / var(--vw-min) * 100vw), calc(320px * var(--max-percent))));
}
.aboutSectionCont.-about1 .about_textAreaIn{
	width: 100%;
	max-width: calc(720px * var(--max-percent));
}
.about_catch.-catch1{
	width: min(calc(725 / var(--vw-min) * 100vw), calc(725px * var(--max-percent)));
}
.aboutSectionCont.-about1 .about_text{
	width: 100%;
	padding-top: min(calc(70 / var(--vw-min) * 100vw), calc(70px * var(--max-percent)));
}

@media screen and (max-width:768px){
	.aboutSectionCont.-about1{
		padding-top: calc(176 / var(--vw-min) * 100vw);
	}
	.aboutSectionCont.-about1 .about_textArea{
		width: calc(558 / var(--vw-min) * 100vw);
	}
	.aboutSectionCont.-about1 .about_textAreaIn{
		width: 100%;
		max-width: 100%;
	}
	.about_catch.-catch1{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		padding: calc(48 / var(--vw-min) * 100vw);
	}
	.aboutSectionCont.-about1 .about_text{
		padding-top: 0;
		padding-bottom: calc(36 / var(--vw-min) * 100vw);
	}
}



/** ABOUT 2 **/
.about_imageArea-img.-n{
	width: 100%;
	padding-top: 100%;/* 320 */
	background: url(../img/introduction/about_n.svg) no-repeat top center / cover;
}
.aboutSectionCont.-about2 .about_textArea{
	width: calc(100% - min(calc(320 / var(--vw-min) * 100vw), calc(320px * var(--max-percent))));
	position: relative;
}

.aboutSectionCont.-about2 .about_textAreaIn{
	width: 100%;
	max-width: calc(720px * var(--max-percent));
}
.about_catch.-catch2{
	width: min(calc(726 / var(--vw-min) * 100vw), calc(726px * var(--max-percent)));
}
.aboutSectionCont.-about2 .about_text{
	width: 100%;
	padding-bottom: min(calc(70 / var(--vw-min) * 100vw), calc(70px * var(--max-percent)));
}

@media screen and (min-width:769px){
	.aboutSectionCont.-about2{
		position: relative;
	}
	.aboutSectionCont.-about2:before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 33.3334%;/* 400 */
		height: clamp(1px, calc(1 / var(--vw-min) * 100vw), calc(1px * var(--max-percent)));
		background-color: #000;
		margin: 0 auto;
	}
}

@media screen and (max-width:768px){
	.aboutSectionCont.-about2{
		padding-top: calc(48 / var(--vw-min) * 100vw);
		padding-bottom: calc(132 / var(--vw-min) * 100vw);
	}
	.aboutSectionCont.-about2 .about_textArea{
		width: calc(558 / var(--vw-min) * 100vw);
		position: unset;
	}
	.aboutSectionCont.-about2 .about_textArea:before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 87.2%;/*  654 */
		height: var(--sp-size-2);
		margin-left: auto;
		margin-right: auto;
		background-color: #000;
	}
	.aboutSectionCont.-about2 .about_textAreaIn{
		width: 100%;
		max-width: 100%;
	}
	.aboutSectionCont.-about2 .about_text{
		padding-bottom: unset;
	}
	.about_catch.-catch2{
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		padding: calc(48 / var(--vw-min) * 100vw);
	}
}




/*-----------------------------------------------
 * INTRODUCTION - prologue
-------------------------------------------------*/
#prologue.introductionCont{
	padding-top: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));;
}
.introductionTextSlide_img.-prologue{
	display: block;
	width: min(calc(616 / var(--vw-min) * 100vw), calc(616px * var(--max-percent)));
	height: 105%;/* 85 */
}
.introductionTextSlide_img.-prologue img{
	height: 100%;
}

.prologueContIn{
	width: 100%;
	padding-top: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
	padding-left: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
	padding-right: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
}
.prologueContIn__cont{
	width: 100%;
	max-width: calc(1040px * 1.6);
	max-width: 1040px;
	position: relative;
	margin: 0 auto;
}

.prologue_image{
	position: absolute;
	top: 0;
	right: 0;
	width: 57.6924%;
}
.prologue_image--img {
	width: 100%;
	border: 1px solid var(--color-black);
	border-radius: 40px;
	overflow: hidden;
}
.prologue_image--img img {
	width: 100%;
}
.prologue_catch{
	width: 14.5193%;/* 151 */
	max-width: calc(151px * var(--max-percent));
	position: absolute;
	top: 0;
	right: 0;
	margin-right: max(-3.8462%, calc(-40px * var(--max-percent)));/* -40 */
}
.prologue_catch--img {
	display: block;
	width: 100%;
	padding-top: 26.4901%;
}
.prologue_catch--img img{
	width: 100%;
}
.prologue_text{
	padding-top: 8.6539%;/* 90 */
	position: relative;
	font-size: 1.25em;/* 20 */
	font-weight: 600;
	line-height: 2.5;
}
/* .prologue_text-txtIn{
	background: #FFF;
} */
.prologue_text-txt:not(:first-child){
	padding-top: 3em;/* 60 */
}


.ctxt_accent[data-color="satsuki"]{
	background: linear-gradient(180deg, transparent 0%, transparent 66%, var(--color-chara-satsuki) 10%, var(--color-chara-satsuki) 95%, transparent 95%, transparent 100%);
}
.ctxt_accent[data-color="an"]{
	background: linear-gradient(180deg, transparent 0%, transparent 66%, var(--color-chara-an) 10%, var(--color-chara-an) 95%, transparent 95%, transparent 100%);
}
.ctxt_accent[data-color="haruno"]{
	background: linear-gradient(180deg, transparent 0%, transparent 66%, var(--color-chara-haruno) 10%, var(--color-chara-haruno) 95%, transparent 95%, transparent 100%);
}
.ctxt_accent[data-color="sakurako"]{
	background: linear-gradient(180deg, transparent 0%, transparent 66%, var(--color-chara-sakurako) 10%, var(--color-chara-sakurako) 95%, transparent 95%, transparent 100%);
}

@media screen and (min-width:769px){
	.prologue_text-txtIn{
		padding: min(calc(4 / var(--vw-min) * 100vw), calc(4px * var(--max-percent))) 0;
	}
	.p-prologue_text{
		padding: 0 min(calc(8 / var(--vw-min) * 100vw), calc(8px * var(--max-percent)));
	}
}

@media screen and (max-width:768px){
	#prologue.introductionCont{
		padding-top: calc(48 / var(--vw-min) * 100vw);
	}
	.introductionTextSlide_img.-prologue{
		width: calc(748 / var(--vw-min) * 100vw);
		height: 106.25%;
	}
	.prologueContIn{
		width: 87.2%;
		max-width: 100%;
		padding-top: calc(84 / var(--vw-min) * 100vw);/* 84 */
		padding-left: 0;
		padding-right: 0;
		margin-left: auto;
		margin-right: auto;
	}
	.prologueContIn__cont{
		max-width: 100%;
	}
	.prologueContIn__cont{
		max-width: 100%;
	}
	.prologue_catch{
		width: 27.6759%;/* 181  */
		margin-right: max(calc(-32 / var(--vw-min) * 100vw), calc(-32px * var(--max-percent)));/* -40 */
	}
	.prologue_text{
		padding-top: 0;
		font-size: 1.1667em;/* 28 */
	}
	.prologue_text-txt:not(:first-child){
		padding-top: calc(52 / var(--vw-min) * 100vw);
	}
}