@charset "UTF-8";
/* CSS Document */
html{
	background-color:#00340c;
}
body{
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
}
#wrapperFixed{
	background: url(img/megumicp/mv_bg.png)no-repeat top center #00340c;
}
#header{
	background:none;
}
#bc{
	display:none;
}
#header nav > .menu{
	background:none;
}
h1 img{
	pointer-events:none;
}
#main h2{
	color: #da602e;
	background: #fff;
	letter-spacing:0.03em;
	border: solid 8px;
	border-radius: 60px;
	font-size: 32px;
	padding: 10px;
	max-width: 700px;
	margin-inline: auto;
	margin-bottom: 40px;
	text-align: center;
}
#main h3{
	letter-spacing:0.03em;
	border: solid 4px;
	border-radius: 60px;
	font-size: 22px;
	padding: 10px;
	max-width: 700px;
	margin-inline: auto;
	text-align: center;
}
#sec01{
	padding-bottom: 80px;
	text-align: center;
}
#main #sec01 h1{
	color:#fff;
	text-align: center;
	font-size: 50px;
	line-height: 1.5;
	margin-bottom: 20px;
}
#sec01 .img-800{
	margin-bottom: 50px;
}
#sec01 h3{
	border:none;
}
#sec01 p{
	line-height:2;
}

#main .ttlPage{
	padding:0!important;
	background:none!important;
	margin:0!important;
	height:0;
	overflow:hidden;
}
#sec02{
	
}
#sec02:after{
}
#sec02 h2{
	margin-bottom: 70px;
	text-align: center;
}
#sec02 h2 span{
	font-size:clamp(1.875rem, 8vw, 3.75rem);
}
#sec02 .img{
	max-width: 800px;
	margin-inline:auto;
}
#sec02 .txt-box{
	display:flex;
	align-items:center;
	justify-content:space-between;
	max-width: 1000px;
	margin-inline:auto;
	margin-top: -60px;
}

#sec02 h3{
	line-height: 2;
}
#sec02 .txt-box .txt{
	text-align:left;
	width: 50%;
	max-width: 550px;
	line-height: 2;
}
#sec03{
	  background-size:cover;
	  padding-top: 90px;
	  padding-bottom: 70px;
	  text-align: center;
	  color:#fff;
	  position: relative;
	  z-index: 1;
}
#sec03 h2{
	line-height: 1.6;
	margin-bottom: 50px;
}
#sec03 h3{
	border:none;
	margin-bottom:20px;
}
#sec04{
	background-image: -moz-linear-gradient( 90deg, rgba(195,155,66,0.99608) 0%, rgb(255,253,202) 13%, rgb(204,161,62) 34%, rgb(229,191,94) 54%, rgb(251,230,138) 100%);
	background-image: -webkit-linear-gradient( 90deg, rgba(195,155,66,0.99608) 0%, rgb(255,253,202) 13%, rgb(204,161,62) 34%, rgb(229,191,94) 54%, rgb(251,230,138) 100%);
	background-image: -ms-linear-gradient( 90deg, rgba(195,155,66,0.99608) 0%, rgb(255,253,202) 13%, rgb(204,161,62) 34%, rgb(229,191,94) 54%, rgb(251,230,138) 100%);
	color:#000;
	text-align:center;
	position: relative;
	z-index: 0;
	padding-top: 100px;
	padding-bottom: 80px;
}
#sec04 h2{
	margin-bottom: 30px;
}
#sec04 > h3{
	border: none;
	padding-top: 0;
}
#sec04 > h3 span{
	font-size:80%;
	display: block;
}
.deadline{
	border-top: solid 2px;
	border-bottom: solid 2px;
	font-size: 28px;
	display: table;
	margin-inline: auto;
	margin-bottom: 40px;
	font-weight: bold;
	padding-block: 10px;
}
#sec04 .img-box{
	display:flex;
	justify-content:center;
	max-width: 560px;
	margin-top: 120px;
	margin-inline: auto;
	margin-bottom: 90px;
}
#sec04 .img-box p{
	flex-basis: calc(100% - 25px);
}
#sec04 ul{
	display:flex;
	justify-content:space-between;
	list-style:none;
	max-width: 1000px;
	margin-inline: auto;
	padding: 0;
}
#sec04 ul li{
	flex-basis: calc((100% / 3) - 20px);
	background:#f28657;
	border: solid 8px #f28657;
	border-radius: 10px;
	background: #fff;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}
#sec04 ul li .apply-ttl{
	background:#f28657;
	padding: 20px;
	height: 180px;
	display: flex;
	flex-direction: column;
	justify-content:space-between;
	font-size: 32px;
	color:#fff;
}
#sec04 ul li .apply-ttl img{
	height:80px;
	width:auto;
	display:block;
	margin: 0 auto;
}
.apply-cts{
	padding:15px;	
}
.apply-cts .img{
	text-align:center;
}
.apply-cts .img img{
	max-height:146px;
	width:auto;
	margin-inline:auto;
	display:block;
}
.apply-cts h5{
	margin-bottom:10px;
}
.apply-cts h5 img{
	height: clamp(1.688rem, 7.2vw, 3.375rem);
	width: auto;
}
.apply-cts.step1{
	margin-bottom: auto;
	padding-bottom: 0;
}
.apply-cts.step2{
	padding-top: 0;
}
.apply-cts.step2 .arrow{
	margin-bottom:10px;
}
.apply-cts .btn-img{
	margin-top:16px;
	margin-bottom: 30px;
}
#sec04 ul h3{
	margin-bottom: clamp(1.25rem, 0.625rem + 2.67vw, 1.875rem);
}
#sec04 p{
	text-align:left;
}
#sec04 .movie iframe{
	width:100%;
	height:auto;
	aspect-ratio:16 / 9;
}
#sec04 p span{
	background:#fadc60;
}
#sec05{
	background: #00340c;
	color:#fff;
	padding-block: 80px;
	padding-inline: 20px;
}
#sec05 h2{
	text-align:center;
}
#sec05 .img{
	margin-bottom:110px;
}
#sec05 ul{
	list-style:none;
	padding:0;
	display:flex;
	justify-content:space-between;
	max-width: 1040px;
	margin-inline: auto;
	margin-bottom: 70px;
}
#sec05 .tokuchoBox{
	max-width: 800px;
	margin-inline: auto;
	margin-bottom: 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#sec05 .tokuchoBox p{
	max-width:600px;
	line-height: 2;
}
#sec05 ul.point li{
	flex-basis:calc((100% / 3) - clamp(1.25rem, 5.33vw, 2.5rem));
	position:relative;
}
#sec05 ul.point li:before{
	content:"";
	background:url(img/megumicp/1.png)no-repeat top center;
	padding: 85px 55px;
	position:absolute;
	top:-60px;
	z-index: 0;
	padding: calc(clamp(7.875rem, 5.25rem + 11.2vw, 10.5rem)/2);
	aspect-ratio: 57/77;
}
#sec05 ul.point li.point2:before{
	background-image:url(img/megumicp/2.png);
}
#sec05 ul.point li.point3:before{
	background-image:url(img/megumicp/3.png);
}
#sec05 ul h3{
	text-align:center;
	margin-bottom:30px;
	position: relative;
}
#sec05 ul p{
	position:relative;
	z-index:1;
	line-height: 2;
}
#sec06{
	background: #03461e;
	color: #fff;
	padding-block: 80px;
}
#sec06 h2{
	text-align:center;
	margin-bottom: 20px;
}
#sec06 h3,#sec07 h3{
	margin-top:50px;
	margin-bottom:30px;
}
#sec05 p,#sec06 ol,#sec06 p,#sec07 p{
	max-width: 800px;
	margin-inline: auto;
}
#sec07 p a{
	color:#fff;
}
#sec06 ol{
	list-style:none;
	padding: 0;
	margin-top: 30px;
}
#sec06 ol li{
	margin-bottom: 20px;
	padding-left:70px;
	position:relative;
	line-height: 2;
}
#sec06 ol li:before{
	content:"１";
	background:#f28657;
	display:flex;
	justify-content:center;
	align-items:center;
	width:60px;
	aspect-ratio:1/1;
	border-radius:100%;
	position:absolute;
	top: -10px;
	left:0;
	font-weight:bold;
	font-size:30px;
	font-family:sans-serif;
}
#sec06 ol li:nth-child(2):before{
	content:"２";
}

#sec07{
	padding-block: 80px;
}
#sec07 h2{
	
}
.btn-img{
	text-align:center;
	margin-top:40px;
}

#main article.max840{
	max-width:100%!important;
	padding-inline: 0!important;
	color: #fff;
}

.quotes{
	position:relative;
	display:table;
	margin-inline:auto;
	font-size:50px;
	padding-inline: 70px;
	margin-bottom: 20px;
}
.quotes:before{
	content:"";
	position:absolute;
	padding:30px;
	background:url(img/megumicp/double01.svg)no-repeat top center;
	left: 0px;
	top:-10px;
}
.quotes:after{
	content:"";
	position:absolute;
	padding:30px;
	background:url(img/megumicp/double02.svg)no-repeat top center;
	right:0;
	bottom:-10px;
}

.point-list{
	display:flex;
	justify-content: space-between;
	padding:0;
	list-style:none;
	flex-wrap: wrap;
	max-width: 1000px;
	margin-inline: auto;
}
.point-list li{
	flex-basis: calc(50% - 20px);
	margin-bottom: 30px;
}
.point-list li .img{
	margin-bottom:10px;
}
.point-list li p{
	padding-inline:40px;
}

.img-250,.img-600,.img-800{
	margin-inline:auto;
}

/* 1400px以上は最大値で固定 */
@media (min-width: 1400px) {
  .fs-60 { font-size: 60px!important; }
  .fs-42 { font-size: 42px!important; }
  .fs-34 { font-size: 34px!important; }
  .fs-20 { font-size: 20px!important; }
  .fs-18 { font-size: 18px!important; }
  .fs-50 { font-size: 50px!important; }
  .fs-28 { font-size: 28px!important; }
  .fs-24 { font-size: 24px!important; }
  .fs-70 { font-size: 70px!important; }
  .mb-100 { font-size: 100px!important; }
  .mb-120 { font-size: 120px!important; }
  /*画像*/
  .img-250 { width: 250px; height: auto!important; }
  .img-600 { width: 600px; height: auto!important; }
  .img-800 { width: 800px; height: auto!important;}
}

/* 751px〜1399px：PC→SPのリキッド */
@media (max-width: 1399px) and (min-width: 751px) {
  .fs-34 { font-size: calc(40px + (34 - 40) * ((100vw - 750px) / (1400 - 750)))!important; }
  .fs-20 { font-size: calc(36px + (20 - 36) * ((100vw - 750px) / (1400 - 750)))!important; }
  .fs-18 { font-size: calc(32px + (18 - 32) * ((100vw - 750px) / (1400 - 750)))!important; }
  .fs-50 { font-size: calc(60px + (50 - 60) * ((100vw - 750px) / (1400 - 750)))!important; }
  .fs-28 {font-size: calc(40px + (28 - 40) * ((100vw - 750px) / (1400 - 750)))!important;}
  .fs-24 { font-size: calc(38px + (24 - 38) * ((100vw - 750px) / (1400 - 750)))!important; }
  /*画像*/
  .img-250 { width: calc(200px + (250 - 200) * ((100vw - 750px) / (1400 - 750))); height: auto!important;}
  .img-600 { width: calc(600px + (600 - 600) * ((100vw - 750px) / (1400 - 750))); height: auto!important;} /* 600固定 */
  .img-800 { width: calc(600px + (800 - 600) * ((100vw - 750px) / (1400 - 750))); height: auto!important;}
}

/* 375px〜750px：SP→さらに小さくリキッド（min値は仮に設定） */
@media (max-width: 750px) and (min-width: 375px) {
  .fs-60 {/* font-size: calc(40px + (60 - 40) * ((100vw - 375px) / (750 - 375)))!important; */}
  .fs-42 { font-size: calc(28px + (42 - 28) * ((100vw - 375px) / (750 - 375)))!important; }
  .fs-34 { font-size: calc(24px + (40 - 24) * ((100vw - 375px) / (750 - 375)))!important; }
  .fs-20 { font-size: calc(16px + (36 - 16) * ((100vw - 375px) / (750 - 375)))!important; }
  .fs-18 { font-size: calc(14px + (32 - 14) * ((100vw - 375px) / (750 - 375)))!important; }
  .fs-50 { font-size: calc(30px + (60 - 30) * ((100vw - 375px) / (750 - 375)))!important; }
  .fs-28 { font-size: calc(20px + (40 - 20) * ((100vw - 375px) / (750 - 375)))!important; }
  .fs-24 { font-size: calc(18px + (38 - 18) * ((100vw - 375px) / (750 - 375)))!important; }
  .fs-70 { font-size: calc(40px + (70 - 40) * ((100vw - 375px) / (750 - 375)))!important; }
  .mb-100 { font-size: calc(60px + (100 - 60) * ((100vw - 375px) / (750 - 375)))!important; }
  .mb-120 { font-size: calc(72px + (120 - 72) * ((100vw - 375px) / (750 - 375)))!important; }
  /*画像*/
  .img-250 { width: calc(150px + (200 - 150) * ((100vw - 375px) / (750 - 375))); height: auto!important; }
  .img-600 { width: calc(400px + (600 - 400) * ((100vw - 375px) / (750 - 375))); height: auto!important; }
  .img-800 { width: calc(400px + (600 - 400) * ((100vw - 375px) / (750 - 375))); height: auto!important; }
}
@media screen and (min-width: 768px) {
  .fs-34 { font-size: 34px!important; }
  .fs-20 { font-size: 20px!important; }
  .fs-18 { font-size: 18px!important; }
  .fs-50 { font-size: 50px!important; }
  .fs-28 { font-size: 28px!important; }
  .fs-24 { font-size: 24px!important; }
	#sec02,#sec03,#sec04,#sec05,#sec06,#sec07 {
		padding-inline:20px;
	}
	#main section p,
	#main section li{
	    font-size: 18px;
	}
	#sec04 p{
		font-size:18px;
	}
	#sec06 ol li{
		font-size:18px;
		margin-bottom: 40px;
	}
	.apply-cts h5 img {
	    height: 34px;
	    width: auto;
	}
}

#footer{
	margin-top:0;
}
br.sp{
	display:none;
}
@media screen and (max-width: 767px) {
	br.sp{
		display:block;
	}
	#wrapperFixed{
		background-image: url(img/megumicp/mv_bg_sp.png);
		background-size:contain;
	}
	#main article *{
		font-size:clamp(1rem, 4.27vw, 2rem);
	}
	#main h2{
		border: solid 4px;
		max-width:calc(100% - 40px);
		font-size: clamp(1.188rem, 5.07vw, 2.375rem);
		min-height: clamp(3.75rem, 16vw, 7.5rem);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#main h3{
		max-width:calc(100% - 40px);
	}
	#main #sec01 h1{
		font-size: clamp(2rem, 8.53vw, 4rem);
	}
	#sec02 h2 {
	    margin-bottom: 40px;
	}
	#sec03 h2,#sec04 h2 {
	    margin-bottom: 20px;
	}
	#sec02 .img{
		width:100%;
	}
	#sec02 .txt-box{
		margin-top:0
	}
	#sec03 p.txt.fs-18{
		font-size:clamp(1rem, 4.27vw, 2rem)!important;
		line-height: 2.2;
	}
	#sec03,
	#sec04,
	#sec05,
	#sec06,
	#sec07{
		padding-block: clamp(2.375rem, 10.13vw, 4.75rem);
	}

	#sec04 li{
		margin-bottom:clamp(3.75rem, 16vw, 7.5rem);
	}
	#sec04 li:last-child{
		margin-bottom:0;
	}
	#sec05{
		padding-top:clamp(4.375rem, 18.67vw, 8.75rem);
	}
	#sec05 h2 img{
		height:clamp(3.063rem, 13.07vw, 6.125rem);
	}
	.apply-cts {
	    padding-inline: clamp(1.563rem, 6.67vw, 3.125rem);
	}
	#sec05 .img{
		padding-inline: clamp(2.5rem, 10.67vw, 5rem)!important;
		width: 100%;
	}	
	#sec04 ul{
		max-width:calc(100% - 40px);
		margin-inline:auto;
		display:block;
	}
	#sec05 p, #sec06 ol, #sec06 p, #sec07 p{
		max-width:calc(100% - 40px);
		margin-inline:auto;
		font-size:clamp(1rem, 4.27vw, 2rem);
	}
	#sec06 ol li{
		padding-left:clamp(3.125rem, 1.875rem + 5.33vw, 4.375rem);
	}
	#sec06 ol li:before{
		width:clamp(2.5rem, 1.25rem + 5.33vw, 3.75rem);
		font-size:clamp(1rem, 0.125rem + 3.73vw, 1.875rem);
		top:0;
	}
	.btn-img{
		max-width:calc(100% - 80px);
		margin-inline:auto;
	}
	#sec04 ul li{
		border: solid 4px #f28657;
	}
	#sec04 ul li .apply-ttl span{
		font-size: 32px;
	}
	#sec04 p{
		font-size:clamp(1.063rem, 4.53vw, 2.125rem);
	}
	.apply-cts .img img {
	    max-height: 100%;
	    width: 100%;
		max-width:350px;
	}
	.apply-cts .btn-img{
		max-width:100%;
		margin-bottom:10px;
	}
	.apply-cts .btn-img img{
		width:100%;
	}
	#sec02 h3{
		line-height:1.8;
		margin-bottom:20px;
	}
	#sec02 .txt-box .txt{
		width:100%;
		max-width: 100%;
		text-align:center;
		line-height: 2;
	}
	
	#sec06 {
		padding-bottom:clamp(1.875rem, -0.625rem + 10.67vw, 4.375rem);
	}
	#sec06 ul li{
		max-width:calc(100% - clamp(5.625rem, 24vw, 11.25rem));
		margin-inline:auto;
		margin-bottom:40px;
	}
	#sec06 ul li span{
		margin-inline:auto;
		margin-bottom:20px;
		width: clamp(10rem, 42.67vw, 20rem);
		font-size: clamp(1rem, 4.27vw, 2rem);
	}
	#sec07{
		padding-block:clamp(3.125rem, 13.33vw, 6.25rem);
	}
	#sec05 h2,#sec06 h2,#sec07 h2{
	    margin-bottom: 40px;
	    line-height: 1;
	}
	.point-list{
		display: block;	
		padding-inline:20px;
	}
	.point-list li{
		margin-bottom: 40px;
	}
	.point-list .img img{
		width:100%;
	}
	
}

@media screen and (min-width: 1400px) {
	#wrapperFixed{
		background-size:contain;
	}
	#main section{
		background-size:cover;
		background-size: contain;
	}
}
@media screen and (min-width: 2000px) {
	#wrapperFixed{
		background-position: 0 -30vw;
	}
}
.yt-thumb{
	position:relative;
}
.yt-thumb::before {
  content: "";
  position: absolute;
  top: 0;
  bottom:0;
  right:0;
  left: 0;
  margin:auto;
  width:60px;
  aspect-ratio:4/3;
  background: red;
  border-radius:10px;
  box-shadow:0 0 8px rgba(0,0,0,0.3);
}
.yt-thumb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-left: 20px solid white;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.yt-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.yt-modal-content {
  position: relative;
  width: 90%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
}

.yt-modal iframe {
  width: 100%;
  height: 100%;
}

.yt-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
}