@charset "utf-8";

@import url('reset.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');

:root {
	--mainColor: #004b75;
	--mainBgColor: #fbfaf6;
	--mainTxtColor: #3e3a39;
	--subTxtColor: #4c4948;
	--maxWidthPC: 1100px;
}


/* Common
---------------------------------------------------------- */
@media (min-width: 690px) {
	html{ font-size: calc(1.1rem + ((1.2vw - 14px) * 0.0853));}
}

@media (min-width: 1920px) {
	html { font-size: 15px;}
}
@media (max-width: 690px){
	html { font-size: 18px;}
}

body {
	font-family: "Shippori Mincho", serif;
	line-height: 1.8;
	letter-spacing: 0;
	color: var(--mainTxtColor);
	background-color: #e9e6eb;
}

/** animetion **/
@keyframes moveArrow {
	0% { transform: translateX(0);}
	49% { transform: translateX(120%);}
	50% { opacity: 0;}
	50% { transform: translateX(-120%);}
	51% { opacity: 1;}
	100% { transform: translateX(0);}
}

.fadeIn{
	opacity: 0;
	--slide-distance: 10px;
	transform: translateY(var(--slide-distance)); /* 初期位置をY軸方向にずらす */
	transition: opacity 0.5s cubic-bezier(.17,.67,.83,.67),transform 0.5s cubic-bezier(.17,.67,.83,.67);
}

.fadeIn.top { --slide-distance: 10px; /* 上から下へ */}

.fadeIn.bottom { --slide-distance: -10px; /* 下から上へ */}

.fadeIn.right { transform: translateX(-10px);  /* 左から右へ */}

.fadeIn.left { transform: translateX(10px);  /* 右から左へ */}

.fadeIn.active{
	opacity: 1;
	transform: translate(0, 0); /*transform: none;でもOK*/
}


/* Usually
---------------------------------------------------------- */
/* Flex */
.flexbox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

/* Inner */
.inner{
	max-width: var(--maxWidthPC);
	margin: 0 auto;
	padding: 0 20px;
}

/* a img input */
a,a img,input[type="button"],button,
*::before,*::after,
input[type="submit"],
input[type="reset"],
input[type="image"]{
	transition: 0.2s ease-out;
}

a:hover img,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="image"]:hover{
	filter:alpha(opacity=50);
	opacity: 0.5;
}

a{
	color: var(--mainTxtColor);
	text-decoration: none;
}
a:hover{
	color: var(--mainColor);
}

a[href^="tel:"] {
	color: inherit;
	text-decoration: none;
	pointer-events: none;
}

/* Img */
img{
	max-width: 100%;
	height: auto;
}
svg, object { fill: currentColor;}

/* Diplay none */
.pc{ display: block;}
.sp{ display: none;}

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


/* #loading
---------------------------------------------------------- */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 最前面に表示 */
    transition: opacity 0.5s ease;
}

#loading.fade-out {
    opacity: 0;
    pointer-events: none; /* fade-out時にクリックイベントを無効化 */
}

#loading-content {
    display: flex;
    flex-direction: column; /* 縦方向に要素を並べる */
    align-items: center; /* 水平方向中央揃え */
}

#loading-logo {
    width: 90px;
    margin-bottom: 20px;
}

#loading-image {
    width: 140px;
	max-width: 60%;
}

#loading-logo img,
#loading-image img{ width: 100%;}

/* プログレスバーのスタイル */
.progress-bar-container {
    width: 120px; /* 調整してください */
    height: 2px;
    background-color: #eee;
    margin-bottom: 25px;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background-color: #008742;
    animation: progress 2s linear forwards; /* forwards を追加 */
}

@keyframes progress {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

/* 下のレイヤーのぼかし */
.blurred {
    filter: blur(5px);
    transition: filter 0.5s ease;
}

.unblurred {
    filter: blur(0px);
}


/* header
---------------------------------------------------------- */
header{
	margin: auto;
	position: absolute;
	top: -4%;
	left: 5vw;
	z-index: 100;
	width: 170px;
	height: 170px;
}
header h1{ line-height: 1;}

@media screen and (max-width: 690px){
	header{
		left: calc(50% - 50px);
		width: 100px;
		height: 100px;
	}
}


/* #movie
---------------------------------------------------------- */
#movie{
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	line-height: 0;
}

.movie_mask{
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	mask-image: url("../img/movie_mask.svg");
	mask-repeat: no-repeat;
	mask-position: bottom center;
	mask-size: cover;
	/* Chrome, Safari用 */
	-webkit-mask-image: url("../img/movie_mask.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: bottom center;
	-webkit-mask-size: cover;
	background-color: #fff;
}
.movie_mask video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mv_txt{
	position: absolute;
    top: 20%;
    right: 5vw;
	width: 8vw;
	max-width: 200px;
	min-width: 110px;
}
.mv_txt.fadeIn{ transition-duration: 1s;}

.mv_txt img{ width: 100%;}

@media screen and (max-width: 690px){
	#movie{ height: 95vh;}
	.movie_mask{
		height: 100%;
		mask-image: url("../img/movie_mask_sp.svg");
		aspect-ratio: 9 / 16;
		-webkit-mask-image: url("../img/movie_mask_sp.svg");
	}
	.mv_txt{ right: 10vw;}
}


/* main
---------------------------------------------------------- */
main{
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0;
}
section,footer{
	position: relative;
	z-index: 2;
}


/* #intro
---------------------------------------------------------- */
#intro{
	position: relative;
	padding: 10vh 20px;
	overflow-x: clip;
}

.intro_txt{
	width: 160px;
	max-width: 60%;
	height: auto;
	margin: auto;
}
.intro_txt img{ width: 100%;}

/** flower *****/
.flower {
	position: absolute;
	z-index: -1;
	transform-origin: top center;
	width: 30%;
	min-width: 320px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out;
}

#fl_r {
	right: -22vw;
	top: -10vh;
	transform: translateX(0.5vw) rotate(45deg);
	opacity: 0;
}
#fl_l {
	left: -32vw;
	bottom: 50vh;
	transform: translateX(-0.5vw) rotate(-45deg);
}

.flower.fixed{ position: fixed;}
.flower.fixed.none { opacity: 0;}

#fl_r.fadeIn_fl {
	opacity: 1;
	transform: translateX(0) rotate(45deg);
}

#fl_l.fadeIn_fl {
	opacity: 1;
	transform: translateX(0) rotate(-45deg);
}

#fl_r.fadeOut_fl {
	opacity: 0;
	transform: translateX(0.5vw) rotate(45deg);
}

#fl_l.fadeOut_fl {
	opacity: 0;
	transform: translateX(-0.5vw) rotate(-45deg);
}

.flower > div{
	position: absolute;
	transform-origin: top center;
	top: 0;
	left: 0;
}

.fl_i01{ animation: yure_r1 15s ease-in-out infinite;}
.fl_i02{ animation: yure_r2 12s ease-in-out infinite;}
.fl_i03{ animation: yure_r3 10s ease-in-out infinite;}

@keyframes yure_r1 {
	0% , 100%{
		transform: rotate(1deg);
	}
	50%{
		transform: rotate(-1deg);
	}
}
@keyframes yure_r2 {
	0% , 100%{
		transform: rotate(-2deg);
	}
	50%{
		transform: rotate(2deg);
	}
}
@keyframes yure_r3 {
	0% , 100%{
		transform: rotate(0.5deg);
	}
	50%{
		transform: rotate(-0.5deg);
	}
}

@keyframes fadeIn_r {
	0%{
		opacity: 0;
		transform: translateX(1vw) rotate(45deg);
	}
	100%{
		opacity: 1;
		transform: translateX(0) rotate(45deg);
	}
}
@keyframes fadeIn_l {
	0%{
		opacity: 0;
		transform: translateX(-1vw) rotate(-45deg);
	}
	100%{
		opacity: 1;
		transform: translateX(0) rotate(-45deg);
	}
}

@media screen and (max-width: 690px){
	#intro{ padding: 20vh 20px;}
	.intro_txt{ width: 120px;}
	/** flower *****/
	.flower {
		width: 60%;
		min-width: auto;
	}
	#fl_r {
		right: -62vw;
		top: -5vh;
	}
	#fl_l {
		left: -62vw;
		bottom: 20vh;
	}
}


/* .reason
---------------------------------------------------------- */
.reason{ margin: 30vh 0 0 0;}
#sec01{ margin: 0;}

.reason_mp{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 85vh;
	min-height: 620px;
}
.reason_mp > picture img{
	position: absolute;
	left: 0;
    top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
	transform-origin: center center;
}

.reason_txt{
	position: absolute;
	width: 100%;
	max-width: none;
	line-height: 0;
}

.p_no{
	width: 120px;
	max-width: 20%;
}

.p_txt{
	width: 120px;
	max-width: 20%;
}
.p_no img,.p_txt img{ width: 100%;}

/** sec01 *****/
#sec01 .p_no{ left: 8vw; top: 0;}
#sec01 .p_txt{ right: 8vw; top: 0;}

/** sec02 *****/
#sec02 .p_no{ left: 8vw; bottom: 0;}
#sec02 .p_txt{ left: 8vw; top: 0;}

/** sec03 *****/
#sec03 .p_no{ right: 8vw; bottom: 0;}
#sec03 .p_txt{ right: 8vw; top: 0;}

/** sec04 *****/
#sec04 .p_no{ left: 8vw; top: 0;}
#sec04 .p_txt{ right: 8vw; bottom: 0;}

/** sec05 *****/
#sec05 .p_no{ right: 8vw; top: 0;}
#sec05 .p_txt{ left: 8vw; bottom: 0;}

/** sec06 *****/
#sec06 .p_no{ right: 8vw; top: 0;}
#sec06 .p_txt{ right: 8vw; bottom: 0;}

.reason_copy{
	position: relative;
	display: block;
	max-width: 900px;
	margin: 20vh auto 30vh;
	padding: 0 30px;
}

.reason_copy p{
	font-size: 1.2rem;
	line-height: 2.2;
	word-spacing: 0.5rem;
}

.reason_copy .pu{
	text-decoration: none;
	--animation-color: #004b75;
	background-image: linear-gradient(90deg, #004b75, #004b75);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0 1px;
	transition: background-size 0.6s;
}

.reason_copy.active .pu{
	color: var(--animation-color);
	background-size: 100% 1px;
}

@media screen and (max-width: 690px){
	.reason{ margin: 0;}
	.reason_copy{ margin: 10vh auto 15vh;}
	.reason_copy p{ font-size: 0.95rem;}
}


/* #view
---------------------------------------------------------- */
.view{
	margin: 10vw 0;
	flex-direction: column;
	overflow-x: hidden;
}

.view_p{
	display: flex;
	width: 100%;
}
.view:nth-child(even) .view_p{ justify-content: flex-start;}
.view:nth-child(odd) .view_p{ justify-content: flex-end;}

.view_p_inner{ position: relative;}

.view_en{
	position: absolute;
	bottom: -20px;
	z-index: 10;
	max-width: 55%;
}
.view:nth-child(odd) .view_en{ left: -10vw;}
.view:nth-child(even) .view_en{ right: -10vw;}

.view_en.fadeIn{ transition-delay: 0.6s;}

.view_img{
	z-index: 1;
	width: 100%;
	display: flex;
	line-height: 0;
}
.view:nth-child(odd) .view_img{ justify-content: flex-end;}
.view:nth-child(even) .view_img{ justify-content: flex-start;}

.view_img img{ width: 70vw;}
.view:nth-child(odd) .view_img img{ border-radius: 30px 0 0 30px;}
.view:nth-child(even) .view_img img{ border-radius: 0 30px 30px 0;}

.view_txt{
	display: flex;
	width: 100%;
	margin: -40vh 0 0 0;
}
.view:nth-child(odd) .view_txt{ justify-content: flex-start;}
.view:nth-child(even) .view_txt{ justify-content: flex-end;}

.view_txt_inner{
	width: 70vw;
	padding: 50vh 10vh 10vh;
	background-color: #fff;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: nowrap;
}
.view:nth-child(even) .view_txt_inner{
	border-radius: 30px 0 0 30px;
}
.view:nth-child(odd) .view_txt_inner{
	border-radius: 0 30px 30px 0;
	padding-left: max(10vw,100px);
}

.view_txt h3{
	position: relative;
	margin: 0 2rem 0 0;
	padding: 0;
	font-size: 1.3rem;
	font-weight: normal;
	word-spacing: -5px;
	writing-mode: vertical-rl;
}
.view_txt h3::before{
	content: url(../img/view_h3.svg);
	width: 2rem;
	height: 2rem;
	margin: 0 0 10px 0;
}

.view_txt dl dt{
	display: inline-block;
	padding: 0 0 20px 0;
	border-bottom: 1px solid var(--subTxtColor);
	font-size: 1.3rem;
}
.view_txt dl dd{
	margin: 20px 0 0 0;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 300;
}

@media screen and (max-width: 690px){
	.view{ margin: 25vw 0;}
	.view_img img{ width: 90%;}
	.view:nth-child(even) .view_txt_inner,
	.view:nth-child(odd) .view_txt_inner{
		width: 94%;
		padding: 25vh 5vw 30px 15px;
	}
	.view:nth-child(even) .view_txt_inner{
		padding-right: 10vw;
	}
	.view_en{
		max-width: 40%;
		max-height: 30px;
		bottom: 20px;
	}
	.view:nth-child(odd) .view_en{
		left: 15px;
		bottom: 20px;
		max-width: 25%;
	}
	.view:nth-child(even) .view_en{ right: 15px;}
	.view_txt{ margin: -20vh 0 0 0;}
	.view_txt h3{ margin: 0 1rem 0 0;}
	.view_txt dl dt{ font-size: 1rem;}
	.view_txt dl dd{ font-size: 0.8rem;}
}


/* #price
---------------------------------------------------------- */
#price{ max-width: 1200px;}

.price_hanger{
	margin: 10vh 0;
	padding: 0;
	background-color: #fff;
	border-radius: 25px;
	color: var(--subTxtColor);
}

.price_h3{
	position: relative;
	width: 100%;
	height: 140px;
	border-radius: 25px;
	overflow: hidden;
}
.price_h3::before{
	content: '';
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: rgba(121, 124, 135, 0.4);
}

.price_h3 img{
	position: absolute;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.price_h3 h3{
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	width: auto;
	z-index: 2;
	margin: auto;
	padding: 0;
	color: #fff;
	font-size: 1.3rem;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.price_list{
	max-width: var(--maxWidthPC);
	margin: 0 auto;
	padding: 40px;
	align-items: stretch;
	justify-content: center;
}
.price_list li{
	width: calc((100% / 8) - 20px);
	min-width: 100px;
	margin: 10px;
	padding: 10px 10px 15px;
	border-bottom: 1px solid var(--mainTxtColor);
	list-style: none;
	text-align: center;
}
.price_list li img{ width: 90%;}
.price_list li span{
	display: block;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 0.7rem;
	line-height: 1.4;
	white-space: nowrap;
	text-align: center;
}

.price_plus{
	width: 10%;
	max-width: 50px;
	margin: 40px auto;
	line-height: 0;
}
.price_plus img{ width: 100%;}

@media screen and (max-width: 690px){
	.price_hanger{ margin: 5vh 0;}
	.price_h3{ height: 100px;}
	.price_h3 h3{ font-size: 1rem;}
	.price_list{ padding: 20px 20px 30px;}
	.price_list li{
		width: calc((100% / 4) - 10px);
		margin: 5px;
		min-width: auto;
	}
	.price_list li span{ font-size: 0.45rem;}
	.price_plus{ margin: 30px auto;}
}


/* #course
---------------------------------------------------------- */
#course{ margin: 25vh auto;}

#course h3{ text-align: center;}

.course_list{ margin: 40px 0;}
.course_list li{
	width: 48%;
	margin: 15px 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.1rem;
	font-weight: 400;
	list-style: none;
}
.course_list li a{
	position: relative;
	display: block;
	padding: 1rem;
	border-bottom: 1px solid var(--mainTxtColor);
}
.course_list li a:hover{
	border-bottom: 1px solid #a8a2a0;
	color: #a8a2a0;
}

.course_list li a span{
	position: absolute;
	right: 20px;
	top: calc(50% - 20px);
	display: inline-block;
	width: 40px;
	height: 40px;
	margin: 0 0 0 1rem;
	border: 1px solid var(--mainTxtColor);
	border-radius: 50%;
	vertical-align: baseline;
	overflow: hidden;
}
.course_list li a span::after{
	content: '';
	position: absolute;
	right: calc(50% - 10px);
	top: calc(50% - 8px);
	width: 20px;
	height: 16px;
	background: url(../img/course_arrow.svg) no-repeat center / contain;
	transition: animation 0.3s ease;
}
.course_list li a:hover span::after{
	animation: moveArrow 0.6s linear forwards;
}

@media screen and (max-width: 690px){
	#course{ margin: 15vh auto;}
	.course_list li{
		width: 100%;
		font-size: 1rem;
	}
	.course_list li:nth-child(1){ order: 1;}
	.course_list li:nth-child(2){ order: 3;}
	.course_list li:nth-child(3){ order: 2;}
	.course_list li:nth-child(4){ order: 4;}
}


/* footer
---------------------------------------------------------- */
footer{
	border-top: 1px solid var(--mainTxtColor);
}

.ft_logo{
	margin: 30px 0;
	text-align: center;
}

.ft_item{ width: 50%;}
.ft_item a{
	display: block;
	padding: 1rem 2rem;
	color: #fff;
	font-size: 1.3rem;
	text-align: center;
}
.ft_item:nth-child(1) a{ background-color: var(--mainColor);}
.ft_item:nth-child(2) a{ background-color: #aa7322;}

.ft_item a:hover{ filter: brightness(1.2);}

.ft_item a span{
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 0 0 1rem;
	background-color: #fff;
	border-radius: 50%;
	vertical-align: baseline;
	overflow: hidden;
}
.ft_item a span::after{
	content: '';
	position: absolute;
	right: calc(50% - 5px);
	top: calc(50% - 4px);
	width: 10px;
	height: 8px;
	background: no-repeat center / contain;
	transition: animation 0.3s ease;
}
.ft_item:nth-child(1) a span::after{ background-image: url(../img/ft_arrow_menu1.svg);}
.ft_item:nth-child(2) a span::after{ background-image: url(../img/ft_arrow_menu2.svg);}

.ft_item a:hover span::after{
	animation: moveArrow 0.5s linear forwards;
}

.copyright{
	padding: 30px 20px;
	font-size: 0.8rem;
	text-align: center;
}

@media screen and (max-width: 690px){
	.ft_item a{
		padding: 1rem 10px;
		font-size: 0.8rem;
	}
	.ft_item a span{ vertical-align: text-bottom;}
	.copyright{ font-size: 0.65rem;}
}