@charset 'utf-8';
/* =============================================================
メインビジュアル(.mainVisual)
※画面いっぱいに広がるビジュアル写真＋ページ見出し
================================================================ */
/*全体*/
.mainVisual{
	text-align: center;
}
/*センタリングするテキスト部分*/
.mainVisual .mvText{
	position: relative;
	overflow: hidden;
}

/* タイトル部分
---------------------------------------------------------------- */
.mainVisual .mvText h1,
.mainVisual .mvText h2{
	display: inline-block;
	line-height: 1;
	white-space: nowrap;
	box-sizing: content-box;
	position: relative;
	overflow: hidden;
}
.mainVisual .mvText h1:before,
.mainVisual .mvText h2:before{
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 350;
	background-color: rgba(var(--white-rgb),.7);
	backdrop-filter: blur(20px) brightness(250%);
}
.mainVisual .mvText h1 span,
.mainVisual .mvText h2 span,
.mainVisual .mvText h1 img,
.mainVisual .mvText h2 img{
	position: relative;
	z-index: 400;
}
.mainVisual .mvText h1 img,
.mainVisual .mvText h2 img{
	display: block;
	width: auto;
	height: 100%;
}
@media screen and (min-width: 640px){
	.mainVisual .mvText h1,
	.mainVisual .mvText h2{
		font-size: 212%;/*32px相当*/
		height: 32px;
		padding: 10px 47px;
	}
}
@media screen and (max-width: 639px){
	.mainVisual .mvText h1,
	.mainVisual .mvText h2{
		font-size: 162%;/*26px相当*/
		height: 26px;
		padding: 11px 31px;
	}
}
@media screen and (max-width: 400px){
	.mainVisual .mvText h1,
	.mainVisual .mvText h2{
		font-size: 118%;/*20px相当*/
		height: 20px;
		padding: 8px 28px;
	}
}

/* リード文(/lesson/index.html)
---------------------------------------------------------------- */
.mainVisual .mvText p.lead{
	color: var(--white);
}
@media screen and (min-width: 769px){
	.mainVisual .mvText p.lead{ margin-top: 30px; }
}
@media screen and (max-width: 768px){
	.mainVisual .mvText p.lead{ margin-top: 10px; }
}

/* =============================================================
背景写真
================================================================ */

/* 1920px以上 - ブラー画像＋コース写真
---------------------------------------------------------------- */
@media screen and (min-width: 1921px){
	/*ブラー画像*/
	.mainVisual{
		position: relative;
		background-color: var(--dark-brown);
	}
	/*暗フィルタ*/
	.mainVisual:before{
		display: block;
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
		/*背景画像設定*/
		background-size: 200% auto;
		background-position: center top;
		background-repeat: no-repeat;
		background-attachment: fixed;
		/*ぼかし*/
		opacity: .3;
	}
	body.course .mainVisual:before{
		background-position: center center;
	}
	/*コース写真*/
	.mainVisual:after{
		display: block;
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 200;
		/*背景画像サイズ*/
		background-size: auto 1440px;
		background-position: center top;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}
	body.course .mainVisual:after{
		background-position: center center;
	}
	/*h1要素などを一番上に表示*/
	.mainVisual > *{
		position: relative;
		z-index: 300;
	}
}

/* 1920px未満 - コース写真のみ
---------------------------------------------------------------- */
@media screen and (max-width: 1920px){
	.mainVisual:after{
		display: block;
		content: '';
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		/*背景画像サイズ*/
		background-position: center top;
		background-repeat: no-repeat;
	}
	body.course .mainVisual:after{
		background-position: center center;
	}
}
@media screen and (min-width:769px) and (max-width: 1920px){
	.mainVisual:after{
		background-size: 1920px auto;
	}
}
@media screen and (max-width: 768px){
	.mainVisual:after{
		background-size: 768px auto;
	}
}
@media screen and (max-width: 567px){
	.mainVisual:after{
		background-size: auto 100%;
	}
}

/* 全サイズ共通
---------------------------------------------------------------- */
/*コース画像に乗算効果をかける*/
.mainVisual:after{
	background-color: rgba(var(--dark-brown-rgb),.4);
	background-blend-mode: multiply;
}
body.kids .mainVisual:after{
	background-color: rgba(var(--dark-brown-rgb),.1);
}
body.oll .mainVisual:after{
	background-color: transparent;
}

/* =============================================================
イラスト写真
================================================================ */
/*全体*/
.mainVisual figure{
	position: absolute;
	width: 100%;
	bottom: 0;
	overflow: hidden;
	background-image: url(/lesson/img/bg-triangle.svg);
	background-position: left bottom;
	background-repeat: no-repeat;
}
body.kids .mainVisual figure{
	background-image: url(/lesson/img/bg-wave.svg);
}
@media screen and (min-width: 769px){
	.mainVisual figure{
		background-size: 100% 100px;
	}
}
@media screen and (max-width: 768px){
	.mainVisual figure{
		background-size: 100% 75px;
	}
}
/*画像*/
.mainVisual figure img{
	display: block;
	max-width: 600px;
	width: auto;
	height: 100%;
	margin: 0 auto;
	object-fit: contain;
	position: relative;
}
/*こどもトップ用設定(/lesson/about/kids.html)*/
@media screen and (min-width: 769px){
	body.kids.about .mainVisual figure img{
		display: none;
	}
}
@media screen and (max-width: 768px){
	body.kids.about .mainVisual figure img{
		position: absolute;
		bottom: 0;
		left: 15px;
		max-height: 160px;
	}
}