@charset "utf-8";
/*YouTube*/
.youtube { padding: 50px 0; background: var(--colorBl); text-align: center; }
.youtube iframe { aspect-ratio: 16 / 9;}
/**/
.intro_back { background: url("../img/shape_back.jpg") no-repeat center bottom 440px; background-size: cover; background-color: rgba(255,255,255,0.4); background-blend-mode: lighten;}
.intro { padding-top: 60px; padding-bottom: 50px; }
.intro h1 { font-family: var(--mintyo); font-size: 54px; text-align: center; line-height: 150%; color: var(--colorOr); font-weight: var(--font6); margin-bottom: 40px; }
.intro .text { font-family: var(--mintyo); font-size: 22px; line-height: 180%; font-weight: var(--font6); }
.intro .photo { text-align: center; margin-top: 40px;}
.intro h2 {; font-size: 54px; text-align: center; line-height: 120%; color: var(--colorBl); font-weight: var(--font6); margin-top: 50px;font-family: var(--mintyo);}

.start_container { position: relative;}
.start_container ul {}
.start_container li { width: 100%;}
.start_container li:nth-child(odd) { background: var(--backcolorOr); box-shadow: 0 0 0 100vmax var(--backcolorOr); clip-path: inset(0 -100vmax);}
.start_container li:nth-child(even) { background: var(--backcolorBl); box-shadow: 0 0 0 100vmax var(--backcolorBl); clip-path: inset(0 -100vmax);}
.start_container dl { width: 590px; margin: 0 0 0 auto; padding: 30px 0;}
.start_container dt { font-size: 36px; font-weight: var(--font5); line-height: 140%; font-feature-settings: "palt"; margin-bottom: 10px;}
.start_container dt img { display: none;}
.start_container dd { line-height: 28px; font-family: var(--mintyo); font-weight: var(--font6); text-align: justify;}
.riyuu_img_area { position: absolute; top: 0; height: 100%; padding: 70px 0 0 0;}
.riyuu_img_area div:nth-child(1) { margin-top: 35px;}
.riyuu_img_area div:nth-child(2) { margin-top: 185px;}
.riyuu_img_area div:nth-child(3) { margin-top: 160px;}



.logi_area p { display: inline-block; max-width: 796px; text-align: justify;  font-family: 'Noto Serif JP', serif; font-weight: bold; line-height: 24px; margin-top: 5px; }




.puzzle { width: 1200px; text-align: center; margin: 40px auto 0px auto;}
.puzzle img { width: 550px; height: auto;}
@media screen and (max-width: 768px) {
	/*YouTube*/
	.youtube { padding: 30px 0;}
	.youtube iframe { width: 100%; height: auto; aspect-ratio: 16 / 9;}
	/**/
	.intro_back { background: url("../img/shape_back.jpg") no-repeat center bottom 450px; background-size: cover; }
	.intro { padding-top: 50px; padding-bottom: 40px; }
	.intro h1 {font-size: 40px; line-height: 140%; margin-bottom: 30px; }
	.intro .text { font-size: 16px; line-height: 160%; }
	.intro .photo { max-width: 580px; width: 100%; margin-top: 30px;}
	.intro .photo img { width: 100%; height: auto;}
	.intro h2 {; font-size: 40px; margin-top: 50px;}
	.intro span { display: inline-block;}
	
	
	
	.riyuu_area { width: 100%; margin: 0 auto;}
	/*始める理由*/
	.riyuu {font-size: 35px; padding: 35px 20px 30px;}
	.riyuu span { display: inline-block;}
	.start_container { position: static; }
	
	.start_container dl { width: 100%;}
	.start_container dt { font-size: 27px; padding-bottom: 10px;}
	.start_container dt img { display: block; width: 100%; height: auto; padding-bottom: 20px; }
	.start_container dt span { display: inline-block; }
	.riyuu_img_area { display: none;}
	
	
	
	
	
	
	
	
	
	
	
	
	
	.logi_area { }
	.logi_area { width: 100%; margin: 0; padding: 0 29px; }
	.logi_area h1 { font-size: 32px;  font-weight: 500; line-height: 50px;  padding: 0 0 0; }
	.logi_area h2 { font-size: 30px; line-height: 125%; font-weight: 700; padding-top: 100px; margin-top: 0; }
	.logi_area h2 span { display: inline-block; }
	.logi_area h3 { text-align: left; font-size: 22px; margin-top: 25px; line-height: 100%; padding: 40px 0 20px; }
	.logi_area p { width: 100%; }
	.left_square1 {margin-right: 15px; font-size: 16px; }
	.right_square1 {margin-left: 15px; font-size: 16px; }
	.left_square2 {margin-right: 15px; font-size: 16px; }
	.right_square2 {margin-left: 15px; font-size: 16px; }
	.tyou { transform: scale(1, 1.4); font-size: 18px;}
	.tyou2 { transform: scale(1, 2.3); font-size: 13px;}
	.tyou3 { transform: scale(1, 1.4); font-size: 19px;}



	.puzzle { width: 100%; height: auto; text-align: center; margin: 30px 0;}
	.puzzle img { width: 300px; height: auto;}

}