@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

body{
	width: 100%;
	font-size: 16px;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	leading-trim: both;
	background-color: #00b6ee;
}

h1{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

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

.l-inner{
	position: relative;
	width: 1280px;
	max-width: 100%;
	margin: 0 auto;
}
.hero_img {
	margin: 0 auto;
	width: 1043px;
	max-width: 100%;
	height: 84vw;
	max-height: 870px;
	background-image: url(../img/img_mv.png);
	background-size: contain;
	background-position: top center;
	background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  .hero_img {
		width: 100%;
    height: 100vw;
		background-position: center;
    background-size: 106.3%;
  }
}
.img_logo{
	position: absolute;
	top: -5px;
	left: 10px;
	width: 162px;
	height: auto;
}
@media screen and (max-width: 767px) {
  .img_logo {
    /*left: 50%;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);*/
    width: 14.5vw;
  }
}
.img_wave {
	width: 100%;
	min-height: 580px;
	aspect-ratio: 1920 / 580;
	margin-top: -170px;
	background: url(../img/img_wave.png) center / cover no-repeat;
	position: relative;
	z-index: 1;
	pointer-events: none;
}
.img_wave_bottom {
	width: 100%;
	min-height: 428px;
	aspect-ratio: 1920 / 428;
	margin-top: -155px;
	background: url(../img/img_wave_bottom.png) center / cover no-repeat;
	pointer-events: none;
}
@media screen and (max-width: 767px) {
  .img_wave,
  .img_wave_bottom {
		margin-top: -19.8vw;
		min-height: auto;
  }
  .img_wave_bottom {
		margin-top: 0;
  }
}

main{
	margin-bottom: 60px;
	padding-top: 50px;
	overflow: hidden;
	position: relative;
	z-index: 0;
}
@media screen and (max-width: 767px) {
	main{
		margin-bottom: 7vw;
		padding-top: 5vw;
	}
}
@media screen and (min-width: 768px) {
	main::after {
		content: '';
		position: absolute;
		top: 3.3%;
    left: 50%;
		transform: translate(-50%, 0%);
		-webkit-transform: translate(-50%, 0%);
		-ms-transform: translate(-50%, 0%);
		width: 1780px;
		height: 100%;
		background-image: url(../img/main_bg.svg);
		background-repeat: no-repeat;
		background-size: 100%;
		pointer-events: none;
		z-index: -1;
	}
}

@media screen and (max-width: 767px) {
  .pc-block {
    display: none;
  }
  .sp-block {
    display: inline-block;
  }
}
.main-content{
	width: 1280px;
	max-width: 90%;
	margin: 0 auto;
	border-radius: 20px;
	position: relative;
	z-index: 9;
}
@media screen and (max-width: 767px) {
	.main-content {
		max-width: 100%;
	}
}
@media screen and (min-width: 768px) {
	.main-content {
		background-color: #ffffff;
	}
	.main-content::after {
		content: '';
		position: absolute;
		bottom: -195px;
    right: 70px;
		width: 204px;
		height: 230px;
		aspect-ratio: 1 / 1;
		background-image: url(../img/img_flower-03.svg);
		background-repeat: no-repeat;
		background-size: contain;
	}
}

.main-content > h2 {
	width: 1080px;
	max-width: 90%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 9;
}
@media screen and (max-width: 767px) {
	.main-content > h2 {
		max-width: 85%;
		top: 7.5vw;
	}
}
.main-content .theme_block {
	padding: 50px 53px 80px 20px;
}
@media screen and (max-width: 767px) {
	.main-content .theme_block {
		width: 90%;
		margin: 0 auto 8vw;
		padding: 19.5vw 0vw 3vw 0vw;
		background-color: #fff;
		border-radius: 1rem;
		overflow: visible;
	}
	.main-content .theme_block picture {
		position: relative;
		top: 0;
		left: 0;
		width: 102%;
	}
}
@media screen and (min-width: 768px) {
	.main-content .theme_block {
		position: relative;
	}
	.main-content .theme_block::after {
		content: '';
		position: absolute;
		left: -45px;
		bottom: -70px;
		width: 122px;
		height: 119px;
		aspect-ratio: 1 / 1;
		background-image: url(../img/img_flower-01.svg);
		background-repeat: no-repeat;
		background-size: contain;
	}
}
.main-content .theme_block picture {
	display: block;
}
.main-content .theme_block picture + picture{
	margin-top: 20px;
}
@media screen and (max-width: 767px) {
	.main-content .theme_block picture + picture{
		margin-top: 4vw;
	}
}

.main-content .draw_block{
	width: 980px;
	max-width: 90%;
	margin: 80px auto 0;
}
@media screen and (max-width: 767px) {
	.main-content .draw_block{
		max-width: 90%;
		padding: 3vw;
		margin: 15vw auto 12vw;
		background-color: #fff;
		border-radius: 1rem;
	}
}
.main-content .draw_box{
	position: relative;
}
@media screen and (min-width: 768px) {
	.main-content .draw_box{
		border: 7px solid #000;
	}
}
.main-content .draw_box > h2{
	width: 570px;
	max-width: 90%;
	background-color: #fff;
	padding: 5px 30px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
	.main-content .draw_box > h2{
		position: relative;
		margin: 5vw 0 1vw;
		padding: 0;
	}
}
.main-content .draw_box .draw_item {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	padding: 40px 20px 20px;
}
@media screen and (max-width: 767px) {
	.main-content .draw_box .draw_item {
		display: flex;
		flex-direction: column;
		gap: 3vw;
		padding: 0;
	}
}
.main-content .draw_block .bottom_txt{
	font-size: 14px;
	text-align: right;
	padding-top: 10px;
	padding-right: 20px;
}
@media screen and (max-width: 767px) {
	.main-content .draw_block .bottom_txt{
		font-size: 2.6vw;
		font-weight: 500;
		padding-top: 2vw;
		padding-right: 1vw;
	}
}

.main-content .howto_block{
	width: 1060px;
	max-width: 94%;
	margin: 0 auto;
	padding: 80px 0 120px;
}
@media screen and (max-width: 767px) {
	.main-content .howto_block{
		max-width: 100%;
		padding: 0;
	}
}
@media screen and (min-width: 768px) {
	.main-content .howto_block {
		position: relative;
	}
	.main-content .howto_block::after {
		content: '';
		position: absolute;
		top: 0;
		right: -160px;
		width: 185px;
		height: 191px;
		aspect-ratio: 1 / 1;
		background-image: url(../img/img_flower-02.svg);
		background-repeat: no-repeat;
		background-size: contain;
	}
}

.notes-content{
	width: 980px;
	max-width: 90%;
	margin: 130px auto 80px;
}
@media screen and (max-width: 767px) {
	.notes-content {
		margin: 5vw auto 0;
	}
}
.notes-content h3{
	display: block;
	color: #fff;
	text-align: center;
	font-size: 28px;
	font-weight: 500;
	letter-spacing: 0.25em;
	margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
	.notes-content h3{
		width: fit-content;
		color: #000;
		background-color: #fff;
		font-size: 4.2vw;
		font-weight: 600;
		margin: 0 auto 4vw;
		padding: 2vw 10vw;
	}
}
.notes_block{
	height: 320px;
	padding: 30px 50px 60px;
	text-align: left;
	line-height: 1.6;
	font-weight: 600;
	background-color: #fff;
	overflow-y: scroll;
}
@media screen and (max-width: 767px) {
	.notes_block{
		height: 100vw;
		padding: 6vw 6vw 8vw 4vw;
		font-size: min(3.2vw,16px);
		line-height: 2.0;
	}	
}
.notes_block p + p{
	margin-top: 30px;
}
@media screen and (max-width: 767px) {
	.notes_block p + p{
		margin-top: 6vw;
	}
}
.notes_block .box:last-child{
	margin-top: 60px;
}
@media screen and (max-width: 767px) {
	.notes_block .box:last-child{
		margin-top: 16vw;
	}
}

.img_text-03{
	width: 773px;
	max-width: 90%;
	margin: 0 auto;
	padding: 80px 0 60px;
}
@media screen and (max-width: 767px) {
	.img_text-03{
		padding: 18vw 0 16vw;
	}
}

.img_text-04{
	width: 773px;
	max-width: 90%;
	margin: 0 auto;
	padding: 0 0 60px;
}
@media screen and (max-width: 767px) {
	.img_text-04{
		padding: 8vw 0 16vw;
	}
}

.entry_btn{
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 320px;
	margin: 0 auto;
	padding: 20px 0;
	border-radius: 100px;
	font-size: 22px;
	font-weight: 500;
	text-align: center;
	position: relative;
	color: #000;
	background-color: #fff100;
}
@media screen and (max-width: 767px) {
	.entry_btn{
		max-width: 82%;
		padding: 5.4vw 0;
		border-radius: 100px;
		font-size: min(6vw,22px);
	}
}
.entry_btn::after{
	content: '';
	position: absolute;
	top: 50%;
	left: 90%;
	width: 22px;
	height: 22px;

	background-image: url(../img/arr_ico.svg);
	background-size: contain;
	background-repeat: no-repeat;
	transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
	.entry_btn::after{
			width: 6vw;
			height: 6vw;

	}
}
.entry_btn.gray{
	width: max-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 20px 70px;
	color: #fff;
	background-color: #aaa;
	pointer-events: none;
}
.entry_btn.gray::after{
		max-width: 82%;
		padding: 5.4vw 7.8vw;
		border-radius: 100px;
		background-image: none;
}


footer{
	position: relative;
	width: 100%;
}
footer p{
	display: block;
	width: 710px;
	max-width: 80%;
	margin: 0 auto;
	padding: 10px;
	border-radius: 100px;
	text-align: center;
	letter-spacing: 0.045rem;
	font-weight: 500;
	color: #fff;
	background-color: #8e8b8a;
	position: relative;
	z-index: 99;
}
@media screen and (max-width: 767px) {
	footer p{
		font-size: 4.4vw;
		letter-spacing: 0.185rem;
		line-height: 1.16;
		border-radius: 1.25rem;
	}
}