@charset "utf-8";

/* bootstrap */
@import url("bootstrap5/bootstrap.min.css");

/* slick 注意バージョン違い */
@import url("slick/slick.css");
@import url("slick/slick-theme.css");



.mw-1600 {max-width: 1600px;}
.mw-1200 {max-width: 1200px;}
.mw-900 {max-width: 900px;}
.mw-500 {max-width: 500px;}

.h-100svh {height: 100svh;}
.h-500 {height: 500px;}

h1 {font-size: 5rem; line-height: 0.8;}
h1 span {font-size: 0.6em; display: inline-block;}
h2 {font-size: clamp(1.125rem, 0.625rem + 2.5vw, 2.5rem);} /* 18 40 320 1600 */
h3 {font-size: clamp(2.25rem, 1.705rem + 2.73vw, 3.75rem);} /* 36 60 320 1200 */
h3 span {font-size: 0.8em;}
h4 {text-align: center; font-size: clamp(2rem, 1.636rem + 1.82vw, 3rem);} /* 32 48 320 1200 */
.h4-img {margin-top: -30px;}
.f-em-08 {font-size: 0.8em;}
.f-em-05 {font-size: 0.5em;}
.f-30 {font-size: 3rem;}
.f-20 {font-size: 2rem;}
.f-20 span {font-size: 1.5em; color: red;}
.f-15 {font-size: 1.5rem;}
.f-08 {font-size: 0.8rem;}


/* パララックス */
.parallax-contents {
	clip-path: inset(0);
	width:100%;
	height:auto;
	box-sizing:border-box;
}
.parallax-contents-1::after {
	content:'';
	position:fixed;
	top:0;
	left:0;
	z-index:-10;
	width:100%;
	height:100%;
	background: url(image/image-1.png) center center no-repeat;
	background-size:cover;
}
.parallax-contents-2::after{
	content:'';
	position:fixed;
	top:0;
	left:0;
	z-index:-10;
	width:100%;
	height:100vh;
	background: url(image/image-2.png) center center no-repeat;
	background-size:cover;
}
.parallax-contents-3::after{
	content:'';
	position:fixed;
	top:0;
	left:0;
	z-index:-10;
	width:100%;
	height:100vh;
	background: url(image/image-3.png) center center no-repeat;
	background-size: cover;
}
.parallax-contents-4::after{
	content:'';
	position:fixed;
	top:0;
	left:0;
	z-index:-10;
	width:100%;
	height:100vh;
	background: url(image/image-4.png) center center no-repeat;
	background-size:cover;
}
.parallax-contents-5::after{
	content:'';
	position:fixed;
	top:0;
	left:0;
	z-index:-10;
	width:100%;
	height:100vh;
	background: url(image/image-5.png) center center no-repeat;
	background-size:cover;
}
/* /パララックス */

/* h3の上のラベル */
.label-contents-2 {
	position: relative;
	max-width: 600px;
	background-color: rgba(255, 69, 0, 0.5);
	&::before{
		position: absolute;
		content: url(image/contents-2.png);
		left: 50%;
		transform: translateX(-50%);
		top: -90px;
	}
}
.label-contents-3 {
	position: relative;
	max-width: 600px;
	background-color: rgba(255, 69, 0, 0.5);
	&::before{
		position: absolute;
		content: url(image/contents-3.png);
		left: 50%;
		transform: translateX(-50%);
		top: -90px;
	}
}
.label-contents-4 {
	position: relative;
	max-width: 600px;
	background-color: rgba(255, 69, 0, 0.5);
	&::before{
		position: absolute;
		content: url(image/contents-4.png);
		left: 50%;
		transform: translateX(-50%);
		top: -90px;
	}
}
.label-contents-5 {
	position: relative;
	max-width: 600px;
	background-color: rgba(255, 69, 0, 0.5);
	&::before{
		position: absolute;
		content: url(image/contents-5.png);
		left: 50%;
		transform: translateX(-50%);
		top: -90px;
	}
}
/* /h3の上のラベル */


/* content-1 */
.orenge-top_box {max-width: 900px; background-color: rgba(255, 69, 0, 0.5);}
/* クリックしたら波紋が広がるボタン */
.button-circle {
	/*波紋の基点とするためrelativeを指定*/
	position: relative;
    /*はみ出す波紋を隠す*/
	overflow: hidden;
    /*ボタンの形状*/
	aspect-ratio: 1/1;
	width: 120px;
	overflow: hidden;
 	display:inline-block;
	font-size: 1.2rem;
	font-weight: bold;
	background: transparent;;
	color: white;
	text-shadow: 2px 2px 3px #808080;
	border: solid 2px white;
	border-radius: 100vw;
	outline: none;
	& a {
		color: white;
		text-decoration: none;
	}
}
.button-circle:hover {outline: none;}
.button-circle::after {
    content: "";
    /*絶対配置で波紋位置を決める*/
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /*波紋の形状*/
    background: radial-gradient(circle, #fff 10%, transparent 10%) no-repeat 50%;
    transform: scale(10, 10);
    /*はじめは透過0に*/
    opacity: 0;
    /*アニメーションの設定*/
    transition: transform 0.3s, opacity 1s;
}
/*クリックされたあとの形状の設定*/
.button-circle:active::after {
    transform: scale(0, 0);
    transition: 0s;
    opacity: 0.3;
}
/* /クリックしたら波紋が広がるボタン */

/* リボンバー */
.ribbon-box {
	font-size: 1.5rem;
	background-color: #f00;
	border-radius: 10px;
}

/* 32 40 320 1600 */
.p-contents-1 {
	font-size: clamp(2rem, 1.818rem + 0.91vw, 2.5rem);
	font-weight: bold;
	margin-top: -100px;
}
.p-contents-1 span {
	display: inline-block;
	font-size: 1.2em;
	color: darkolivegreen;
}

/* /扇スライダー */
.block {
	opacity: 0;
	height: 300px;
	overflow: hidden;
	transition: all 1.5s 1s;

}
.block.active {
	opacity: 1;
}
.slider img {
	width: 300px;
}
.slider li {
	margin: 0 10px;
	transition: all 0.4s;
}
.slider li.left {
	margin-top: 10px;
	transform-origin: top right;
	transform: rotate(-7deg);
}
.slider li.left2 {
	margin-top: 60px;
	margin-right: 10px;
	transform-origin: top right;
	transform: rotate(-20deg);
}
.slider li.right {
	margin-top: 10px;
	transform-origin: top left;
	transform: rotate(7deg);
}
.slider li.right2 {
	margin-top: 60px;
	margin-left: 10px;
	transform-origin: top left;
	transform: rotate(20deg);
}
/* /content-1 */


/* content-2 */
/* youtube */
.youtube{
	display: inline-block;
	position: relative;
	overflow: hidden;
	max-width: 500px;
}
.youtube::before{
	position: absolute;
	content: "Click to Play";
	color: #fff;
	text-align: center;
	font-size: 3rem;
	font-weight: bold;
	line-height: 300px; /* youtubeの高さに合わせる */
	background: rgba(0, 0, 0, 0.3);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	transition: all 0.3s;
}
.youtube:hover::before{
	background: rgba(0, 0, 0, 0.7);
	cursor: pointer;
	transition: all 0.3s;
}
/* /content-2 */


/* content-3 */
/* コメント枠 */
.comment-box {
	border: solid 1px gainsboro;
	border-radius: 10px;
}

/* 吹き出し */
.qa-box-r::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -11px;
	margin-top: -12px;
	border: 12px solid transparent;
	border-left: 14px solid white;
	z-index: 2;
}
.qa-box-r::before {
	content: "";
	position: absolute;
	top: 50%;
	right: -14px;
	margin-top: -14px;
	border: 14px solid transparent;
	border-left: 14px solid gainsboro;
	z-index: 1;
}

.qa-box-l::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -11px;
	margin-top: -12px;
	border: 12px solid transparent;
	border-right: 14px solid white;
	z-index: 2;
}
.qa-box-l::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -14px;
	margin-top: -14px;
	border: 14px solid transparent;
	border-right: 14px solid gainsboro;
	z-index: 1;
}
/* /content-3 */


/* content-4 */

/* /content-4 */


/* content-5 */
.button-blue {
	display: inline-block;
	font-size: 1.5rem;
	width: 300px;
	height: 80px;
	margin: 20px 0px;
	color: #ffffff;
	text-align: center;
	font-weight: bold;
	background-color: rgba(0, 64, 255, 0.7);
	border: solid 2px white;
	border-radius: 999px;
	-webkit-transition: .4s;
	transition: .4s;
	&:hover{
		text-decoration: none;
		color : #ffffff;
		background-color: rgba(255, 102, 0, 0.7);
	}	
}

/* bxslider枠を消す */
.bx-wrapper{
	background-color: transparent;
	margin: 0px auto 0px;
	border: none;
	box-shadow: none;
}
.bx-wrapper img{
	display: block;
	margin: 0px auto;
}
/* /bxslider枠を消す */
/* /content-5 */


/* footer */
footer {
	background: url(image/bg-footer.png) center bottom;
	padding-bottom: 100px;
}

/* 子供たち */
.fadein-child {
	opacity: 0;
	transform: translate(100px, 0px);
	transition: all 1s;
}
.fadein-child.active{
	opacity : 1;
	transform : translate(0, 0);
}
/* /子供たち */
/* /footer */


/* mail.html */
/* labelの色 */
.mail-label-bg {
	background-color: lavender;
	/* 文頭の矢印 */
	&:before {
		content: "";
		display: inline-block;
		content: url("image/icon-mail-arrow.svg");
		vertical-align: middle;
		padding-right: 5px;
	}
}
/* /mail.html */