@charset "utf-8";

/*====================================================================================

		basic layout

====================================================================================*/

body {
	font-family: "Zen Kaku Gothic Antique", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: var(--sp_font_size);
	font-feature-settings: "palt";
	line-height: 1.8;
	letter-spacing: 0.1rem;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body * {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
	image-rendering: -webkit-optimize-contrast;		/* for chrome */
	transition: all 0.3s;
}

a {
	border: none;
	text-decoration: none;
	transition: all .3s;
}

a:hover {
	/* filter: brightness(110%); */
	opacity: 0.8;
}

em {
	color: var(--color_03);
	font-style: normal;
	font-weight: bold;
}

b {
	font-weight: 700;
}
.pc_none {
	display: inline;
}

.sp_none {
	display: none;
}

img.sp {
	display: inline;
}


@media screen and (min-width: 769px){
	body {
		position: relative;
		font-size: var(--pc_font_size);
	}

	.sp_none {
		display: inline;
	}
	
	.pc_none {
		display: none;
	}
	
	img {
		max-width: 100%;
		width: auto;
	}
	
	img.pc {
		display: none;
	}
	
	img.sp {
		display: none;
	}
}


/*------------------ fadein layout ---------------------*/
/* .fadein {
	opacity : 0;
	transform: translateY(10px);
	transition: all 1s;
} */
.fadeUpTrigger, .fadeUpTrigger_02 {
	opacity: 0;
}

.fadeUp {
	animation-name: fadeUpAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeUp_02 {
	animation-name: fadeUpAnime_02;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeUpAnime_02 {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/*------------------ set variable ---------------------*/
:root {
	--sp_font_size: 3.78073vw;
	--sp_font_size_11: 2.6vw;
	--sp_font_size_13: 3.1vw;
	--sp_font_size_15: 3.545vw;;
	--sp_font_size_18: 4.3vw;
	--sp_font_size_20: 4.8vw;
	--sp_font_size_22: 5.4vw;
	--pc_font_size: 16px;
	--gradation_01: linear-gradient(180deg, rgba(114, 237, 241, 0.4) 31.73%, rgba(76, 95, 185, 0.4) 83.65%, rgba(221, 116, 151, 0.4) 100%), #fff;
	--gradation_02: linear-gradient(180deg, #99FFE5 0%, #84EDFF 18.75%, #4C5FB9 49.26%, #DD7474 82.39%), #fff;
	--color_01: #0049A2;
	--color_02: #0A3283;
	--color_03: #FFEB87;
	--color_04: #313131;
	--color_05: #333C51;
}





/*====================================================================================

		header layout

====================================================================================*/

header {
	position: relative;
	z-index: 1;
}

header .wrapper {
	height: 930px;
	padding: 5vw;
	background: url("../img/main_bg.jpg") center top / cover no-repeat;
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
}

header .main_title {
	margin: 3vh 0;
	text-align: center;
	/* font-size: 7.7vw; */
	font-size: 30px;
	line-height: 1.0;
}

header .main_title span {
	display: inline-block;
	transform: translateY(10px);
}

header .main_title span:nth-of-type(1) {
	/* font-size: 8.7vw; */
	font-size: 33px;
}

header .main_title span:nth-of-type(2) {
	/* font-size: 11vw; */
	font-size: 39px;
}

header .main_title img {
	margin-block-start: 40px;
	margin-inline: auto;
	display: block;
}

header p.txt_01 {
	width: fit-content;
	margin-block-start: 3vh;
	margin-inline: auto;
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	gap: 0 0.5rem;
}

header p.txt_01 span {
	display: inline-block;
	writing-mode: vertical-rl;
	text-orientation: upright;
	/* font-size: 4.4vw; */
	font-size: 18px;
	letter-spacing: 0.3rem;
}

header p.img_01 {
	display: none;
}


@media screen and (min-width: 769px){
	header {
		z-index: 6;
	}
	/* header .wrapper {
		height: 930px;
		padding: 30px 30px 0;
		background: url("../img/pc/main_bg.jpg") center top / cover no-repeat;
		--overlap: 10px;
		--wave-ratio: calc(120 / 1440); 
		--current-wave-height: calc(100vw * var(--wave-ratio));
		-webkit-mask-image: url('../img/pc/wave_01.svg'), url('../img/rect-mask.svg');
    	mask-image: url('../img/pc/wave_01.svg'), url('../img/rect-mask.svg');
		-webkit-mask-repeat: no-repeat;
    	-webkit-mask-position: bottom, top;
    	mask-position: bottom, top;
		-webkit-mask-size: 
			100% var(--current-wave-height), 
			100% calc(100% - var(--current-wave-height) + var(--overlap));
		mask-size: 
			100% var(--current-wave-height), 
			100% calc(100% - var(--current-wave-height) + var(--overlap));
		-webkit-mask-composite: source-over; 
    	mask-composite: add;
	} */

	header .wrapper {
		height: 930px;
		padding: 30px 30px 0;
		background: url("../img/pc/main_bg.jpg") center top / cover no-repeat;
		-webkit-mask-image: url('../img/pc/wave_01d.svg');
		mask-image: url('../img/pc/wave_01d.svg');
		-webkit-mask-size: 100% auto;
		mask-size: 100% auto;
		-webkit-mask-position: bottom;
		mask-position: bottom;
		-webkit-mask-repeat: repeat-x;
		mask-repeat: repeat-x;
	}

	/* header {
		height: 930px;
		padding: 30px 30px 0;
		background: url("../img/pc/main_bg.jpg") center top / cover no-repeat;
		z-index: 3;
	} */

	header .logo img {
		width: 172px;
	}

	header .main_title {
		margin: 4vh 0 20px;
		font-size: min(40px, 4vw);
	}

	header .main_title span:nth-of-type(1) {
		display: inline-block;
		font-size: min(44px, 4.4vw);
		transform: translateX(-20px);
	}

	header .main_title span:nth-of-type(2) {
		margin-inline-start: -0.2em;
		display: inline-block;
		font-size: min(54px, 5.4vw);
		transform: translateX(-30px);
	}

	header p.txt_01 {
		width: 320px;
		margin-block-start: -30px;
	}

	header p.txt_01 span {
		font-size: 27px;
		letter-spacing: 0.4rem;
	}

	header p.img_01 {
		display: block;
		position: absolute;
		margin-inline: auto;
		inset-inline: 0;
		bottom: -5%;
		z-index: 2;
	}

	header .ab_img {
		width: min(182px, calc(182 / 480 * 100%));
		position: absolute;
		left: calc(20% + 20px);
		bottom: -5%;
		z-index: 4;
	}
}

@media screen and (min-width: 1025px){
	header {
		/* height: 930px; */
	}

	header .main_title {
		margin: 77px 0 20px;
		font-size: 50px;
	}

	header .main_title span:nth-of-type(1) {
		font-size: 54px;
	}

	header .main_title span:nth-of-type(2) {
		font-size: 70px;
	}

	header .main_title br {
		display: none;
	}

	header p.txt_01 {
		margin: -30px max(60px, 6%) 0 auto;
		gap: 0 0.8rem;
	}

	header .ab_img {
		inset-inline: 0;
		margin-inline: auto; 
		left: 0;
	}
}





/*====================================================================================

		.float_banner layout

====================================================================================*/

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(50px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.float_banner {
	/* width: 100%; */
	inset-inline: 0;
	margin-inline: auto;
	position: fixed;
	bottom: 2ch;
	z-index: 100;
	text-align: center;
	opacity: 0;
	/* animation: fadeIn 1.0s ease 0.3s 1 normal forwards; */
	transform: translateY(50px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.float_banner.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.float_banner img {
	width: max(327px,90%);
	/* width: min(327px,90%); */
	margin: 0 auto;
}


@media screen and (min-width: 769px){
	.float_banner {
		width: 361px;
		inset-inline: auto;
		margin-inline: 0;
		position: fixed;
		bottom: 20px;
		right: 20px;
	}

	.float_banner img {
		width: 100%;
	}
}

@media screen and (min-width: 1025px){
	.float_banner {
		bottom: 50px;
		right: min(60px, 3%);
	}
}





/*====================================================================================

		#contents layout

====================================================================================*/

#contents {
	position: relative;
}

.wave-mask {
	--overlap: 10px;
	--current-wave-height: calc(100vw * var(--wave-ratio));
	mask-image: var(--svg-url), url('../img/rect-mask.svg');
	mask-repeat: no-repeat;
	mask-position: top, bottom;
	mask-size: 
		100% auto, 
		100% calc(100% - var(--current-wave-height) + var(--overlap));
	mask-composite: add;
	-webkit-mask-composite: source-over;
}


@media screen and (min-width: 769px){
	#contents {
		margin-top: -5%;
		background: var(--gradation_01);
		display: flex;
		justify-content: flex-start;
		align-items: stretch;
		gap: 0 10px;
		z-index: 1;
	}

	#contents {
		position: relative;
		z-index: 5;
	}

	/* #contents .ab_img {
		width: min(174px, 40%);
		position: absolute;
		left:150px;
		top: -30px;
		z-index: 4;
	} */

	#contents .wrapper {
		width: 100%;
		min-height: 100%;
		padding: 5% clamp(10px, 5%, 20px) 0;
		background: var(--gradation_01);
		background-attachment: fixed;
		display: flex;
		justify-content: space-around;
		align-items: flex-start;
		gap: 0 min(10px, 1vw);
	}

	/* #contents .wrapper {
		width: 100%;
		min-height: 100%;
		--svg-url: url('../img/pc/wave_01b.svg');
		--wave-ratio: calc(120 / 1440); 
		filter: blur(0px);
		margin-top: -10%;
		background: var(--gradation_01);
		background-attachment: fixed;
		display: flex;
		justify-content: space-around;
		align-items: flex-start;
		gap: 0 min(10px, 1vw);
	} */
}


@media screen and (min-width: 1025px){
	/* #contents .ab_img {
		inset-inline: 0;
		margin-inline: auto; 
	} */

	#contents .wrapper {
		padding: 5% 10px;
		justify-content: center;
		gap: 0 min(20px, 2vw);
	}
}


@media screen and (min-width: 1400px){
	#contents .wrapper {
		gap: 0 min(60px, 4vw);
	}
}




/*===============================================================

		#contents nav layout

===============================================================*/
/* .drawer_button */
#contents .drawer_button {
	width: 50px;
	height: 50px;
	background: #fff;
	border: none;
	border-radius: 50%;
	display: block;
	position: fixed;
	right: 5px;
	top: 5px;
	z-index: 1001;
	outline: none;
	text-align: center;
	cursor: pointer;
	letter-spacing: 0.1em;
}

#contents .drawer_button.active {
	background: #003296;
}

#contents .drawer_button.active .drawer_close {
	display: block;
}


/* .drawer_bar */
#contents .drawer_bar {
	display: block;
	width: 22px;
	height: 2px;
	margin: 6px auto;
	background: #003296;
	transition: all 0.2s;
	transform-origin: 50% 50%;
	position: relative;
}

#contents .drawer_button.active .drawer_bar {
	width: 30px;
	background: #fff;
}

#contents .drawer_button.active .drawer_bar1 {
	top: 8px;
	transform: rotate(35deg);
}

#contents .drawer_button.active .drawer_bar2 {
	opacity: 0;
}

#contents .drawer_button.active .drawer_bar3 {
	top: -8px;
	transform: rotate(-35deg);
}


/* .drawer_nav_wrapper */
#contents .drawer_nav_wrapper {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background-color: rgba(0,0,0,0.5);
	display: block;
	transition: none;
	transform: translateX(-110%);
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1000;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

#contents .drawer_nav_wrapper.open {
	transform: translate(0);
}


/* ul.drawer_nav */
#contents ul.drawer_nav {
	margin: 0;
	padding: 7vh 5vw;
	background: url("../img/grain.png") left top / 200px auto repeat, var(--gradation_01);
	background-blend-mode: multiply;
	border-radius: 0 0 10px 10px;
	display: flex;
	flex-wrap: wrap;
	opacity: 1.0;
	transition: all 0.2s;
	transform: translateX(110%);
}

#contents .drawer_nav_wrapper.open ul.drawer_nav {
	transform: translate(0);
}

#contents ul.drawer_nav li {
	width: 100%;
	margin: 0;
	padding: 0 5vw;
	line-height: 1.4;
}

#contents ul.drawer_nav li:nth-child(4) {
	margin: 0 0 4vw;
}

#contents ul.drawer_nav li.type_02 {
	margin: 3vw 0;
}

#contents ul.drawer_nav li.banner {
	margin: 5vh 0 0;
	padding: 0;
}

#contents ul.drawer_nav li a {
	width: auto;
	margin: 0;
	padding: 4vw 0 4vw 20px;
	border-radius: 0;
	border: none;
	display: block;
	position: relative;
	color: var(--color_01);
	font-size: 4.2vw;
	font-weight: 700;
}

#contents ul.drawer_nav li.type_02 a {
	padding: 3vw 4vw;
	border: solid 1px var(--color_01);
	border-radius: 40px;
	display: inline-block;
	font-size: 3.4vw;
}

#contents ul.drawer_nav li.banner a {
	padding: 0;
	text-align: center;
}

#contents ul.drawer_nav li a::after {
	content: "";
	border-style: solid;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent var(--color_01);
	position: absolute;
	left: 0;
	top: calc(50% - 10px);
}

#contents ul.drawer_nav li.type_02 a::after,
#contents ul.drawer_nav li.banner a::after {
	display:none;
}

#contents ul.drawer_nav li a:hover {
	text-decoration: none;
}

#contents ul.drawer_nav li.banner a img {
	width: min(327px, 100%);
}


/*
@media screen and (min-width: 769px){
	#contents .drawer_button {
		right: 15px;
		top: 15px;
	}

	#contents ul.drawer_nav {
		width: 50%;
		transform: translateX(110%);
	}

	#contents .drawer_nav_wrapper.open ul.drawer_nav {
		transform: translate(100%);
	}

	#contents ul.drawer_nav li {
		width: 100%;
		margin: 0;
		padding: 0 20px;
		line-height: 1.4;
	}	

	#contents ul.drawer_nav li:nth-child(4) {
		margin: 0 0 30px;
	}

	#contents ul.drawer_nav li.type_02 {
		margin: 10px 0;
	}

	#contents ul.drawer_nav li a {
		padding: 20px 0 20px 20px;
		font-size: 18px;
	}

	#contents ul.drawer_nav li.type_02 a {
		padding: 10px 15px;
		font-size: 15px;
	}
}
*/

@media screen and (min-width: 769px){
	#contents .drawer_button {
		display: none;
	}

	#contents .drawer_nav_wrapper {
		/* width: max(380px, calc(100% / 3)); */
		flex: 1; /* 左側と同じ重みで余白を埋める */
        min-width: 0;
        max-width: calc((100% - 480px) - 10vw);
		height: 100vh;
		/* margin-top: calc(var(--current-wave-height) - 20px); */
		/* padding: 18% 0 0; */
		padding: 0 0 0;
		box-sizing: border-box;
		background-color: transparent;
		display: flex;
        justify-content: flex-start;
		align-items: center;
		transition: none;
		transform: translate(0);
		position: sticky;
		/* top: 50vh;
		transform: translateY(var(--current-wave-height)); */
		right: auto;
		z-index: 10;
		align-self: flex-start;
		overflow-y: visible;
		-webkit-overflow-scrolling: auto;
		order: 3;
		transition: transform 0.4s ease;
	}

	/* #contents .drawer_nav_wrapper.is-active {
		transform: translateY(-50%);
	} */

	#contents ul.drawer_nav {
		width: auto;
		height: fit-content;
		margin: 0;
		/* padding: 40% 0 220px; */
		padding: 0 10px 0 0;
		background: transparent;
		display: flex;
		flex-flow: row wrap;
		opacity: 1.0;
		transition: all 0.2s;
		transform: translate(0);
	}

	#contents ul.drawer_nav li {
		width: 100%;
		margin: 0 0 30px;
		padding: 0 5px 0 0;
		line-height: 1.4;
	}

	#contents ul.drawer_nav li:nth-child(4) {
		margin: 0 0 30px;
	}

	#contents ul.drawer_nav li.type_02 {
		width: auto;
		margin: 0 0 20px 0;
	}

	#contents ul.drawer_nav li.banner {
		margin: 20px 0 0;
		padding: 0;
		display: none;
	}

	#contents ul.drawer_nav li a {
		width: auto;
		margin: 0;
		padding: 0 0 0 23px;
		border-radius: 0;
		border: none;
		display: block;
		position: relative;
		color: var(--color_01);
		font-size: min(24px, 2.2vw);
		font-weight: 700;
	}

	#contents ul.drawer_nav li.type_02 a {
		padding: 8px 12px;
		border: solid 1px var(--color_01);
		border-radius: 40px;
		display: inline-block;
		font-size: min(14px, 1.4vw);
	}

	#contents ul.drawer_nav li.banner a {
		padding: 0;
	}

	#contents ul.drawer_nav li a::after {
		content: "";
		border-style: solid;
		border-width: 10px 0 10px 13px;
		border-color: transparent transparent transparent var(--color_01);
		position: absolute;
		left: 0;
		top: calc(50% - 10px);
	}

	#contents ul.drawer_nav li.type_02 a::after,
	#contents ul.drawer_nav li.banner a::after {
		display: none;
	}

	#contents ul.drawer_nav li a:hover {
		text-decoration: none;
	}
}

@media screen and (min-width: 1025px){
	#contents .drawer_nav_wrapper {
        max-width: calc(100% / 2);
	}

	#contents ul.drawer_nav li a {
		font-size: min(24px, 1.6vw);
	}

	#contents ul.drawer_nav li.type_02 a {
		padding: 8px 14px;
		font-size: min(14px, 1.3vw);
	}
}


@media screen and (min-width: 1200px){
	#contents ul.drawer_nav {
		/* padding: 40% 20px 0; */
	}

	#contents ul.drawer_nav li {
		padding: 0 0 0 15px ;
	}

	#contents ul.drawer_nav li a {
		padding: 0 0 0 23px;
		font-size: min(24px, 1.8vw);
	}

	#contents ul.drawer_nav li.type_02 a {
		padding: 10px 16px;
		font-size: min(14px, 1.4vw);
	}
}


/*===============================================================

		#contents .main layout

===============================================================*/

#contents .main {
	position: relative;
}


@media screen and (min-width: 769px){
	#contents .main {
		/* width: min(480px, 45%); */
		width: 480px;
		/* margin: 0; */
		margin-top: -6%;
		flex-shrink: 0;
		box-shadow: 0 0 15px rgba(0,0,0,0.3);
		order: 2;
	}
}

@media screen and (min-width: 1025px){
	#contents .main {
		/* flex-shrink: 0; */
		padding-bottom: calc(140px - 6%);
		z-index: 2;
	}
}



/*===============================================================

		#contents .main .about layout

===============================================================*/

#contents .main .about {
	margin-top: -25%;
	position: relative;
	z-index: 4;
}

#contents .main .about p.img_01 {
	width: min(174px, 46.4%);
	margin-inline: auto; 
	position: absolute;
	inset-inline: 0;
	top: 1vh;
	z-index: 4;
}

#contents .main .about .inner {
    --svg-url: url('../img/wave_01.svg');
    --wave-ratio: calc(100 / 375); 

	/* padding: 45% 0 15vh; */
	padding: 200px 0 30%;
    background: url("../img/grain.png") left top / 200px auto repeat, var(--gradation_02);
	background-blend-mode: multiply;
	position: relative;
	z-index: 1;
}

#contents .main .about .inner h3 {
	margin: 0 0 2vh;
    text-align: center;
}

#contents .main .about .inner h3 + p {
	margin: 0 9vw 2vh;
	color: #fff;
	font-size: 3.9vw;
	font-weight: 700;
	line-height: 2.21;
}

#contents .main .about .inner .about__mission {
	margin: 0 0 0 9vw;
	padding: 5vw;
	background-color: #fff;
	border-radius: 5px 0 0 5px;
	color: var(--color_02);
	font-size: var(--sp_font_size_15);
	font-weight: 700;
	line-height: 1.6;
}

#contents .main .about .inner .about__mission p:last-child {
	margin: 2vh 0 0;
	text-align: center;
}

#contents .main .about .inner .about__mission p:last-child a {
	padding: 0 8px 5px 2rem;
	border-bottom: solid 1px var(--color_02);
	position: relative;
	color: var(--color_02);
	font-size: 3.4vw;
}

#contents .main .about .inner .about__mission p:last-child a::before {
	content: "";
	border-style: solid;
	border-width: 8px 7px 0 7px;
	border-color: var(--color_02) transparent transparent transparent;
	position: absolute;
	left: 7px;
	top: calc(50% - 4px);
	transition: all 0.2s;
}

#contents .main .about .inner .about__mission p:last-child a:hover::before {
	top: calc(50% - 2px);
}

#contents .main .about .about__summary {
	width: 100%;
	aspect-ratio: 750 / 1147;
	margin-top: -16%;
	padding-top: 36vw;
	background: url("../img/bg01.png") left top / 100% auto no-repeat;
	position: relative;
	z-index: 2;
}

#contents .main .about .about__summary p {
	text-align: center;
	font-size: var(--sp_font_size_18);
	font-weight: 700;
	line-height: 1.5;
}

#contents .main .about .about__summary p.txt_01 {
	margin-block-end: 41vw;
}

#contents .main .about .about__summary p.txt_02 {
	margin-block-end: 14vw;
}

#contents .main .about .about__summary p.txt_03 b {
	color: #2559CD;
	font-size: var(--sp_font_size_22);
}

#contents .main .about .about__summary p.txt_03 span {
	font-size: var(--sp_font_size_15);
}


@media screen and (min-width: 769px){
	#contents .main .about {
		margin-top: 0;
		padding-top: 0;
		/* z-index: 0; */
	}

	#contents .main .about p.img_01 {
		display: none;
	}

	#contents .main .about .inner {
		mask-image: none;
		/* padding: 160px 0 100px; */
		padding: calc(6% + 5vw + 30px) 0 100px;
		background: url("../img/grain.png") left top / 200px auto repeat, var(--gradation_02);
		background-blend-mode: multiply;
	}

	#contents .main .about .inner h3 {
		margin: 0 0 20px;
	}

	#contents .main .about .inner h3 + p {
		margin: 0 40px 20px;
		font-size: 20px;
	}

	#contents .main .about .inner .about__mission {
		margin: 0 0 0 40px;
		padding: 20px;
		font-size: var(--pc_font_size);
	}

	#contents .main .about .inner .about__mission p:last-child {
		margin: 20px 0 0;
	}

	#contents .main .about .inner .about__mission p:last-child a {
		font-size: 18px;
	}

	#contents .main .about .about__summary {
		margin-top: -10%;
		padding-top: 170px;
	}

	#contents .main .about .about__summary p {
		font-size: 22px;
	}

	#contents .main .about .about__summary p.txt_01 {
		margin-block-end: 190px;
	}

	#contents .main .about .about__summary p.txt_02 {
		margin-block-end: 70px;
	}

	#contents .main .about .about__summary p.txt_03 b {
		font-size: 22px;
	}

	#contents .main .about .about__summary p.txt_03 span {
		font-size: 15px;
	}
}



/*===============================================================

		#contents .main .target layout

===============================================================*/

#contents .main .target {
	margin-block-start: -14%;
	padding-block: 36% 12vh;
	background: url("../img/bg02.png") left top / 100% auto no-repeat #EAEFF5;
}

#contents .main .target h3 {
	margin: 0 0 5vh;
	text-align: center;
}

#contents .main .target h3 img {
	width: max(311px, 80%);
}

#contents .main .target .comment {
	margin-block-end: 10%;
	padding-inline: 8vw;
	position: relative;
}

#contents .main .target .comment:nth-of-type(1) {
	margin-block-end: 18%;
}

#contents .main .target .comment::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
}

#contents .main .target .comment:nth-of-type(1)::before {
	width: min(312px, 40%);
	aspect-ratio: 312 / 347;
	background: url("../img/img02.png") left top / 100% auto no-repeat;
	right: 0;
}

#contents .main .target .comment:nth-of-type(2)::before {
	width: min(306px, 40%);
	aspect-ratio: 306 / 299;
	background: url("../img/img03.png") left top / 100% auto no-repeat;
	left: 0;
}

#contents .main .target .comment p {
	width: 85%;
	padding: 5vw 0;
	background: url("../img/bg03.png") left 80% top 80% / 110% auto no-repeat;
	border-radius: 200px;
	text-align: center;
	color: #fff;
	font-size: 4.0vw;
	font-weight: 700;
}

#contents .main .target .comment:nth-of-type(2) p {
	margin-inline-start: auto;
}

#contents .main .target .balloon {
	aspect-ratio: 750 / 1522;
	margin-block-end: 4vh;
	padding: 5vh 5vw 0;
	background: url("../img/bg04.png") left top / 100% auto no-repeat;
}

#contents .main .target ul {
	margin-inline: 5vw;
	padding-left: 5.5em;
	text-indent: -5.5em;
	color: #1A1A1A;
	font-size: var(--sp_font_size_11);
	font-weight: 500;
}

#contents .main .target ul li a {
	color: #1A1A1A;
	text-decoration: underline;
	text-decoration-style: dashed;
	text-decoration-color: #1A1A1A;
}

#contents .main .target ul li a:hover {
	text-decoration: none;
	opacity: 1;
}

@media screen and (min-width: 769px){
	#contents .main .target {
		padding-block: 36% 40%;
	}

	#contents .main .target h3 {
		margin: 0 0 50px;
	}

	#contents .main .target .comment {
		margin-block-end: 60px;
		padding-inline: 40px;
	}

	#contents .main .target .comment:nth-of-type(1) {
		margin-block-end: 90px;
	}

	#contents .main .target .comment p {
		padding: 20px 0;
		font-size: min(20px, 2.0vw);
	}

	#contents .main .target .balloon {
		aspect-ratio: 750 / 1522;
		margin-block-end: 20px;
		padding: 55px 20px 0;
		background: url("../img/bg04.png") left top / 100% auto no-repeat;
	}

	#contents .main .target ul {
		margin-inline: 20px;
		font-size: min(11px, 1.1vw);
	}
}



/*===============================================================

		#contents .main .reason layout

===============================================================*/

#contents .main .reason {
	margin-block-start: -14%;
	padding-block: 0 55%; 
	background: url("../img/bg05.png") center bottom / 100% 80% no-repeat;
}

#contents .main .reason h3 {
	position: relative;
}

#contents .main .reason h3::before {
	content: "";
	inset: 0;
	background-color: #EAEFF5;
	position: absolute;
	top: -1px;
	z-index: 0;
	clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 0% 50%);
}

#contents .main .reason h3 img {
	width: 100%;
	position: relative;
	z-index: 1;
}

#contents .main .reason dl  {
	margin-block-end: 15%;
	padding-inline: 9vw 6vw;
}

#contents .main .reason dl div {
	margin-block-end: 5vh;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0 7vw;
}

#contents .main .reason dl dt {
	flex: 0 0 40%;
	aspect-ratio: 1 / 1;
	padding: 0px;
	background: url("../img/img06.svg") center / auto no-repeat #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
	text-align: center;
	color: #1A5BAC;
	font-size: var(--sp_font_size_20);
	font-weight: 700;
	line-height: 1.5;
}

#contents .main .reason dl dt::after {
	content: "";
	position: absolute;
	inset: -10px; 
	border: 2px dashed #F6AE20;
	border-radius: 50%;
	pointer-events: none;
}

#contents .main .reason dl dd {
	flex: 1;
	color: #fff;
	font-size: 3.8vw;
	line-height: 1.5;
}

#contents .main .reason p  {
	margin-inline: 5vw;
}


@media screen and (min-width: 769px){
	#contents .main .reason {
		margin-block-start: -30%;
		padding-block: 0 290px; 
		background: url("../img/bg05.png") center bottom / 100% 80% no-repeat;
	}

	#contents .main .reason dl  {
		margin-block-end: 70px;
		padding-inline: 40px 20px;
	}

	#contents .main .reason dl div {
		margin-block-end: 50px;
		gap: 0 min(35px, 3.5vw);
	}

	#contents .main .reason dl dt {
		font-size: 24px;
	}

	#contents .main .reason dl dd {
		font-size: 19px;
	}

	#contents .main .reason p  {
		margin-inline: 20px;
	}
}




/*===============================================================

		#contents .main .survey layout

===============================================================*/

#contents .main .survey {
	background-color: #ffffff;
	background-image: linear-gradient(90deg, #f3f7ff 1px, transparent 1px), linear-gradient(#f3f7ff 1px, transparent 1px);
	background-position: 11px 11px;
	background-size: 12px 12px;
	color: var(--color_04);
}

#contents .main .survey h3 {
	text-align: center;
}

#contents .main .survey h3 img {
	width: clamp(295px, 78.6%, 100%);
	height: auto;
	aspect-ratio: 295 / 268;
	margin-block-start: calc(clamp(295px, 78.6%, 100%) * (268 / 295) / -1.66);
}

#contents .main .survey .result {
	margin-block-end: 50px;
	padding-inline: 5vw;
	text-align: center;
	font-weight: 700;
	line-height: 1.5;
}

#contents .main .survey .result_01 {
	margin-block-start: 5px;
	padding-block: 10vw 0;
	background: url("../img/bg06.png") left top / 100% auto no-repeat;
}

#contents .main .survey .result_02 {
	background: url("../img/bg07.png") right top 45% / 25% auto no-repeat;
}

#contents .main .survey .result_03 {
	margin-block-end: 30px;
}

#contents .main .survey .result .result__box {
	padding: 4vw 0 3vw;
	background-color: #fff;
	border-radius: 10px;
}

#contents .main .survey .result .result__box p.txt_01 {
	font-size: var(--sp_font_size_15);
	letter-spacing: 0;
}

#contents .main .survey .result .result__box p .t13 {
	font-size: var(--sp_font_size_13);
}

#contents .main .survey .result .result__box p.img_01 {
	margin-block: -20px -25px;
}

#contents .main .survey .result .result__box p.emphasis {
	font-size: 6.15vw;
}

#contents .main .survey .result .result__box p.emphasis .t15 {
	font-size: var(--sp_font_size_15);
}

#contents .main .survey .result .result__box p.emphasis b {
	font-weight: 700;
}

#contents .main .survey .txt_grad {
	background: linear-gradient(to right,  #60A9D7 4%,#4c5fb9 52%,#DD7497 91%); 
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

#contents .main .survey .result .result__box p.note {
	margin-block-start: 8px;
	font-size: var(--sp_font_size_11);
	font-weight: 500;
	letter-spacing: 0;
}

#contents .main .survey .result p.img_02 {
	margin-inline: auto;
}

#contents .main .survey .result_01 p.img_02 {
	width: max(274px, 73.06%);
}

#contents .main .survey .result_02 p.img_02 {
	width: max(252px, 67.2%);
}

#contents .main .survey .result_03 p.img_02 {
	width: max(158px, 42.13%);
	margin-block-start: -2%;
}

#contents .main .survey .result_04 p.img_02 {
	width: max(276px, 73.6%);
	margin-block-start: -2%;
	margin-inline-start: 5vw;
}

#contents .main .survey .result p.thoughts {
	margin-block-start: 3vw;
	font-size: var(--sp_font_size_18);
	line-height: 1.7;
} 

#contents .main .survey .result p.thoughts .wave {
	padding: 0 2vw 5px;
	background: url("../img/wave_02.svg") left bottom / auto repeat-x;
	display: inline;
}

#contents .main .survey .result p.thoughts .t14 {
	font-size: 3.5vw;
}

#contents .main .survey .result p.last {
	margin-block-start: 40px;
	padding-block: 3vh;
	background: url("../img/bg08.svg") center top / auto 100% no-repeat;
	font-size: var(--sp_font_size_20);
	font-weight: 700;
	line-height: 1.8;
} 

/*---------- .highlight ----------*/
#contents .main .survey .highlight {
	padding: 0 0 clamp(120px, 29vw, 200px);
	background: url("../img/grain.png") left top / 190px auto repeat,
				linear-gradient(180deg, #D8FEFF 4.37%, #C1CAF7 54.83%, #F7BFD1 93.92%);
	background-blend-mode: multiply;
}

#contents .main .survey .highlight h4 {
	text-align: center;
	font-size: var(--sp_font_size_20);
	font-weight: 700;
	line-height: 1.5;
}

#contents .main .survey .highlight > h4 {
	padding: 50px 0 40px;
	background: radial-gradient(circle at 50% 50%, #FFFFFF 25%, rgba(255, 255, 255, 0) 50%);
}

#contents .main .survey .highlight > h4 .txt_gradation {
	display: inline-block;
	position: relative;
	z-index: 0;
	color: transparent;
	font-size: 7.0vw;
}

#contents .main .survey .highlight > h4 .txt_gradation::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	-webkit-text-stroke: 3px #fff;
	-webkit-text-fill-color: #fff;
}

#contents .main .survey .highlight > h4 .txt_gradation .inner {
	position: relative;
	z-index: 1;
	/* background: linear-gradient(to right,  #60A9D7 4%,#4c5fb9 52%,#DD7497 91%); 
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent; */
}

#contents .main .survey .highlight h4 .small {
	font-size: 4.0vw;
}


/*---------- .highlight ----------*/
#contents .main .survey .more {
	margin-inline: 5vw;
	padding: 0 4vw 6vw;
	background-color: #fff;
	box-shadow: 0px 0px 10px #FDA5FD;
	border-radius: 10px;
	position: relative;
}

#contents .main .survey .more h4 {
	padding-block: 60px 20px;
}

#contents .main .survey .more h4 .balloon {
	width: fit-content;
	padding: 6px 30px;
	background-color: #fff;
	border: 2px solid #FDB3A5;
	border-radius: 50px;
	position: absolute;
	left: 50%;
	top: 0%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #1A5BAC;
	font-weight: 700;
	font-size: var(--sp_font_size_18);
	line-height: 1.5;
	letter-spacing: 0.04em;
}

#contents .main .survey .more h4 .balloon::before {
	content: "";
	border-style: solid;
	border-width: 11px 7px 0 7px;
	border-color: #FDB3A5 transparent transparent transparent;
	position: absolute;
	bottom: -12px;
	left: 50%;
	transform: translateX(-50%);
}

#contents .main .survey .more h4 .balloon::after {
	content: "";
	border-style: solid;
	border-width: 11px 7px 0 7px;
	border-color: #fff transparent transparent transparent;
	position: absolute;
	bottom: -9px;
	left: 50%;
	transform: translateX(-50%);
}

#contents .main .survey .more h4 .emphasis {
	padding-inline: 2vw;
	background:linear-gradient(transparent 60%, #FFEB87 60%);
	display: inline-block;
	position: relative;
	font-size: 7.0vw;
}

#contents .main .survey .more h4 .t22 {
	margin-block-start: 2.5%;
	display: inline-block;
	font-size: var(--sp_font_size_22);
}

#contents .main .survey .more dl {
	margin-block: 3vh 2vh;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	text-align: center;
	font-weight: 700;
	line-height: 1.5;
}

#contents .main .survey .more dl dt {
	flex-basis: 100%;
	margin-block-end: 10px;
	padding: 1vw;
	background: linear-gradient(to right,  #60A9D7 4%,#4c5fb9 52%,#DD7497 91%); 
	border-radius: 50px;
	color: #fff;
	font-size: var(--sp_font_size_15);
}

#contents .main .survey .more dl dd {
	flex-basis: calc(100% / 2);
	font-size: 4.3vw;
}

#contents .main .survey .more dl dd p.txt_02 {
	margin-block: 1vw;
	letter-spacing: 0;
}

#contents .main .survey .more dl dd .small {
	font-size: var(--sp_font_size_15);
}

#contents .main .survey .more dl dd .small_02 {
	margin-block-end: 1vh;
	display: inline-block;
	font-size: 3.3vw;
	letter-spacing: 0.05em;
}

#contents .main .survey .more dl dd:nth-child(3) p.img_03 {
	text-align: left;
}

#contents .main .survey .more dl dd:nth-child(2) p.img_03 img {
	width: max(76px, 50.6%);
}

#contents .main .survey .more dl dd:nth-child(3) p.img_03 img {
	width: max(120px, 80%);
}

#contents .main .survey .more ul {
	margin-block-end: 20px;
	font-size: 3.8vw;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0;
}

#contents .main .survey .more ul li {
	padding-left: 20px;
	background: url("../img/icon_check.svg") left center / auto no-repeat;
}

#contents .main .survey .more p.note {
	font-size: 2.6vw;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
}


@media screen and (min-width: 769px){
	#contents .main .survey h3 img {
		width: clamp(295px, 82%, 100%);
		margin-block-start: calc(clamp(295px, 82%, 100%) * (268 / 295) / -1.66);
	}

	#contents .main .survey .result {
		margin-block-end: 60px;
		padding-inline: 30px;
	}

	#contents .main .survey .result_01 {
		padding-block: 50px 0;
	}

	#contents .main .survey .result_02 {
		background: url("../img/bg07.png") right top 45% / 25% auto no-repeat;
	}

	#contents .main .survey .result_03 {
		margin-block-end: 40px;
	}

	#contents .main .survey .result .result__box {
		padding: 30px 10px 20px;
	}

	#contents .main .survey .result .result__box p.txt_01 {
		font-size: min(18px, 1.8vw);
	}

	#contents .main .survey .result .result__box p .t13 {
		font-size: min(13px, 1.3vw);
	}

	#contents .main .survey .result .result__box p.img_01 {
		/* margin-block: -10px -15px; */
		margin-block: -20px -25px;
	}

	#contents .main .survey .result .result__box p.emphasis {
		font-size: min(30px, 3.0vw);
	}

	#contents .main .survey .result .result__box p.emphasis .t15 {
		font-size: min(18px, 1.8vw);
	}

	#contents .main .survey .txt_grad {
		background: linear-gradient(to right,  #60A9D7 4%,#4c5fb9 52%,#DD7497 91%); 
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	#contents .main .survey .result .result__box p.note {
		margin-block-start: 1vh;
		font-size: min(12px, 1.2vw);
	}

	#contents .main .survey .result p.img_02 {
		margin-inline: auto;
	}

	#contents .main .survey .result_01 p.img_02 {
		width: max(274px, 73.06%);
	}

	#contents .main .survey .result_02 p.img_02 {
		width: max(252px, 67.2%);
	}

	#contents .main .survey .result_03 p.img_02 {
		width: max(158px, 42.13%);
	}

	#contents .main .survey .result_04 p.img_02 {
		width: max(276px, 73.6%);
		margin-inline-start: 20px;
	}

	#contents .main .survey .result p.thoughts {
		margin-block-start: 10px;
		font-size: min(20px, 2.0vw);
	} 

	#contents .main .survey .result p.thoughts .wave {
		padding: 0 10px 5px;
	}

	#contents .main .survey .result p.thoughts .t14 {
		font-size: min(16px, 1.6vw);
	}

	#contents .main .survey .result p.last {
		margin-block-start: 40px;
		padding-block: 30px;
		font-size: min(22px, 2.2vw);
	} 

	/*---------- .highlight ----------*/
	#contents .main .survey .highlight {
		padding: 0 0 150px;
	}

	#contents .main .survey .highlight h4 {
		font-size: min(22px, 2.2vw);
	}

	#contents .main .survey .highlight > h4 {
		padding: 60px 0 40px;
	}

	#contents .main .survey .highlight > h4 .txt_gradation {
		font-size: min(32px, 3.2vw);
	}

	#contents .main .survey .highlight h4 .small {
		font-size: min(18px, 1.8vw);
	}


	/*---------- .highlight ----------*/
	#contents .main .survey .more {
		margin-inline: 30px;
		padding: 0 18px 40px;
	}

	#contents .main .survey .more h4 {
		padding-block: 50px 20px;
	}

	#contents .main .survey .more h4 .balloon {
		width: fit-content;
		padding: 6px 30px 8px;
		font-size: min(22px, 2.2vw);
	}

	#contents .main .survey .more h4 .emphasis {
		padding-inline: 10px 15px;
		font-size: min(32px, 3.2vw);
	}

	#contents .main .survey .more h4 .t22 {
		margin-block-start: 10px;
		display: inline-block;
		font-size: min(24px, 2.5vw);
	}

	#contents .main .survey .more dl {
		margin-block: 30px 20px;
	}

	#contents .main .survey .more dl dt {
		margin-block-end: 10px;
		padding: 5px 5px 6px;
		border-radius: 50px;
		font-size: min(16px, 1.6vw);
	}

	#contents .main .survey .more dl dd {
		font-size: min(20px, 2.0vw);
	}

	#contents .main .survey .more dl dd p.txt_02 {
		margin-block: 10px;
	}

	#contents .main .survey .more dl dd .small {
		font-size: min(14px, 1.4vw);
	}

	#contents .main .survey .more dl dd .small_02 {
		margin-block-end: 10px;
		font-size: min(14px, 1.4vw);
	}

	#contents .main .survey .more ul {
		font-size: 16px;
	}

	#contents .main .survey .more p.note {
		font-size: 12px;
	}
}



/*===============================================================

		#contents .main .newspicks layout

===============================================================*/

#contents .main .newspicks {
	padding: 40px 0 60px;
	border-radius: 0 0 10px 10px;
	background-color: #F7F7F7;
	position: relative;
}

#contents .main .newspicks::before {
	content: "";
	inset: 0;
	aspect-ratio: 750 / 280;
	background: url("../img/bg09.png") left top / 100% auto no-repeat;
	display: block;
	position: absolute;
	left: 0;
	top: -15%;
}

#contents .main .newspicks h3 {
	margin: 0 2vw 4vw 5vw;
	display: flex;
	gap: 0 2vw;
	position: relative;
	font-size: var(--sp_font_size_22);
	font-weight: 700;
	line-height: 1.5;
}

#contents .main .newspicks h3::before {
	content: "";
	flex: 0 0 max(61px, 18%);
	aspect-ratio: 122 / 122;
	background: url("../img/img13.svg") left top / 100% auto no-repeat;
	display: block;
}

#contents .main .newspicks p.txt {
	text-align: center;
	font-size: var(--sp_font_size);
	font-weight: 700;
}

#contents .main .newspicks p.img {
	width: max(115px, 30.6%);
	margin-inline: auto;
}

#contents .main .newspicks .movie {
	margin: 5vw 5vw 0;
	aspect-ratio: 16 / 9;
	background-color: #D9D9D9;
	border-radius: 15px;
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	position: relative;
	font-size: 2.4vw;
}

#contents .main .newspicks .movie::before {
	content: "";
	background: linear-gradient(180deg, #72EDF1 4.33%, #4C5FB9 54.33%, #DD7497 90.87%) border-box border-box;
	-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
    mask-composite: exclude;
	border: 5px solid transparent;
	border-radius: 10px;
	position: absolute;
	inset: 0;
}

#contents .main .newspicks .link {
	margin: 5vw 5vw 3vw;
	aspect-ratio: 16 / 9;
}

#contents .main .newspicks .link img {
	width: 100%;
}

#contents .main .newspicks p.note {
	margin: 0 5vw;
	text-align: right;
	font-size: 2.6vw;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
}


@media screen and (min-width: 769px){
	#contents .main .newspicks {
		padding: 30px 0 80px;
	}

	#contents .main .newspicks h3 {
		margin: 0 10px 20px 30px;
		gap: 0 15px;
		font-size: 25px;
	}

	#contents .main .newspicks p.txt {
		font-size: 18px;
	}

	#contents .main .newspicks p.img {
		width: min(115px, 30.6%);
	}

	#contents .main .newspicks .movie {
		margin: 30px 30px 0;
		font-size: 10px;
	}

	#contents .main .newspicks .link {
		margin: 30px 30px 10px;
	}

	#contents .main .newspicks p.note {
		margin: 0 30px;
		font-size: 14px;
	}
}



/*===============================================================

		#contents .main .check layout

===============================================================*/

#contents .main .check {
	margin-top: -3vh;
	padding: clamp(80px, 90px, 10vw) min(20px, 3vw);
	background: url("../img/grain02.png") left top / 200px auto repeat, #30439B;
	background-blend-mode: multiply;
}

#contents .main .check h3 {
	margin-block-end: 2vh;
	text-align: center;
	color: #fff;
	font-size: clamp(30px, 7.0vw, 9.0vw);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
	
}

#contents .main .check h3 .balloon {
	width: fit-content;
	margin: 0 auto min(20px, 4vw);
	padding: 6px 30px;
	background: linear-gradient(270deg, #57EBF0 4.33%, #4C5FB9 50%, #DD7497 90.87%);
	border: 1px solid #FFFFFF;
	border-radius: 80px;
	display: block;
	position: relative;
	font-size: clamp(20px, 4.8vw, 6.0vw);
}

#contents .main .check h3 .balloon::before {
	content: "";
	border-style: solid;
	border-width: 11px 7px 0 7px;
	border-color: #fff transparent transparent transparent;
	position: absolute;
	bottom: -11px;
	left: 50%;
	transform: translateX(-50%);
}

#contents .main .check h3 .balloon::after {
	content: "";
	border-style: solid;
	border-width: 11px 7px 0 7px;
	border-color: #4C5FB9 transparent transparent transparent;
	position: absolute;
	bottom: -9px;
	left: 50%;
	transform: translateX(-50%);
}

#contents .main .check p img {
	width: 100%;
}

@media screen and (min-width: 769px){
	#contents .main .check h3 {
		margin-block-end: 20px;
		font-size: min(32px, 3.2vw);
	}

	#contents .main .check h3 .balloon {
		font-size: min(22px, 2.2vw);
	}
}



/*===============================================================

		#contents .main .recommend layout

===============================================================*/

#contents .main .recommend {
	padding: 8vh 0;
	background: url("../img/img16.png") left top / 100% auto no-repeat,
				linear-gradient(to top, #fff 0%, #F4F4F4 41.08%);
}

#contents .main .recommend h3 {
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	color: var(--color_04);
	font-size: clamp(24px, 5.0vw, 40px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

#contents .main .recommend h3 img {
	width: clamp(167px, 44.53%, 60%);
	margin-block: 2vh;
}

#contents .main .recommend h3 span {
	flex-basis: fit-content;
	padding: 5px 15px;
	background: var(--color_05);
	border-radius: 40px;
	text-align: center;
	color: #fff;
	font-size: clamp(16px, 3.7vw, 6vw);
	font-weight: 500;
	line-height: 1.0;
}

#contents .main .recommend p.img_01 {
	margin-block: 70% 8vh;
	text-align: center;
}

#contents .main .recommend p.img_02 {
	margin-block-end: 3vh;
}

#contents .main .recommend dl {
	padding: 0 min(40px, 5vw);
	color: var(--color_05);
	font-weight: 500;
	letter-spacing: 0.05em;
}

#contents .main .recommend dl dt {
	margin-block-end: 3vh;
	font-size: 5vw;
	line-height: 1.8;
}

#contents .main .recommend dl dd {
	font-size: 4.0vw;
	line-height: 2.0;
}

#contents .main .recommend p.btn {
	margin-block-start: 30px;
}

#contents .main .recommend p.btn a {
	width: clamp(280px, 80%, 380px);
	margin-inline: auto;
	padding: max(25px, 5vw) max(40px, 5vw);
	background-color: var(--color_05);
	border: 1px solid var(--color_05);
	border-radius: 200px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #fff;
	font-size: clamp(16px, 3.7vw, 6vw);
	font-weight: 500;
	line-height: 1.0;
}

#contents .main .recommend p.btn a:hover {
	background-color: #fff;
	color: var(--color_05);
}

#contents .main .recommend p.btn a svg {
	fill: transparent;
	stroke: #fff;
}

#contents .main .recommend p.btn a:hover svg {
	stroke: var(--color_05);
}


@media screen and (min-width: 769px){
	#contents .main .recommend {
		padding: 8vh 0;
		background: url("../img/img16.png") left top / 100% auto no-repeat,
					linear-gradient(to top, #fff 0%, #F4F4F4 20%);
	}

	#contents .main .recommend h3 {
		font-size: 30px;
	}

	#contents .main .recommend h3 span {
		font-size: 16px;
	}

	#contents .main .recommend dl {
		padding: 0 30px;
		color: var(--color_05);
		font-weight: 500;
		letter-spacing: 0.05em;
	}

	#contents .main .recommend dl dt {
		margin-block-end: 30px;
		font-size: 25px;
	}

	#contents .main .recommend dl dd {
		font-size: 19px;
	}

	#contents .main .recommend p.btn a {
		width: 70%;
		padding: 25px 40px;
		font-size: 19px;
	}
}



/*===============================================================

		#contents .main .mission layout

===============================================================*/

#contents .main .mission {
	padding-top: min(40px, 4vh);
	background-color: #fff;
	color: var(--color_05);
	font-weight: 500;
}

#contents .main .mission > p:nth-of-type(1) {
	margin-block-end: min(40px, 4vh);
	text-align: center;
}

#contents .main .mission > p:nth-of-type(1) img {
	width: clamp(134px, 35.7%, 50%);
}

#contents .main .mission h3 {
	width: 100%;
	aspect-ratio: 750 / 776;
	padding-block-start: 23%;
	background: url("../img/bg10.jpg") left top / 100% auto no-repeat;
	text-align: center;
	font-size: clamp(30px, 7.5vw, 9vw);
	font-weight: 500;
	line-height: 1.0;
}

#contents .main .mission .wrap {
	padding: 5vh 5vw;
	background-color: #F1F3F8;
}

/* #contents .main .mission ol {
	display: flex;
	flex-direction: column;
	row-gap: min(60px, 7vh);
} */

#contents .main .mission ol li {
	overflow: hidden;
}

#contents .main .mission ol li:not(:last-child) {
	margin-bottom: min(60px, 7vh);
}

#contents .main .mission dl dt {
	display: flex;
	align-items: center;
	gap: 0 min(15px, 3vw);
	margin-block-end: 3vw;
	font-size: clamp(20px, 4.7vw, 7vw);
	line-height: 1.5;
}

#contents .main .mission dl dd {
	font-size: 3.6vw;
	line-height: 1.7;
}

#contents .main .mission dl dd .accordion-content {
	display: none; /* 最初は隠す */
}

#contents .main .mission dl dd .more-btn {
	width: fit-content;
	margin: min(30px, 3vh) auto 0;
	padding: 10px 25px;
	background-color: transparent;
	border: 1px solid var(--color_05);
	border-radius: 50px;
	display: block;
	color: var(--color_05);
	font-family: "Zen Kaku Gothic Antique", sans-serif;
	font-size: 3.6vw;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s;
}

#contents .main .mission dl dd .more-btn:hover {
	background-color: #fff;
}

#contents .main .mission dl dd .more-btn svg {
	margin-inline-start: 0.8em;
	fill: var(--color_05);
	transition: all 0.1s;
}

/* 開いた時のボタンの状態（任意） */
#contents .main .mission dl dd .more-btn.is-open svg {
	transform: rotate(180deg);
}

@media screen and (min-width: 769px){
	#contents .main .mission > p:nth-of-type(1) {
		margin-block-end: 40px;
	}

	#contents .main .mission > p:nth-of-type(1) img {
		width: max(134px, 35.7%);
	}

	#contents .main .mission h3 {
		font-size: 36px;
	}

	#contents .main .mission .wrap {
		padding: 60px 30px;
	}
	/* #contents .main .mission ol {
		row-gap: 60px;
	} */

	#contents .main .mission ol li:not(:last-child) {
		margin-bottom: 60px;
	}

	#contents .main .mission dl dt {
		margin-block-end: 20px;
		font-size: 20px
	}

	#contents .main .mission dl dd {
		font-size: 16px;
	}
	
	#contents .main .mission dl dd .more-btn {
		width: fit-content;
		margin: min(30px, 3vh) auto 0;
		padding: 10px 25px;
		font-size: 16px;
	}
}





/*===============================================================

		#contents .float_img layout

===============================================================*/

#contents .float_img {
	display: none;
}

/* 
@media screen and (min-width: 769px){
	#contents .float_img {
		width: 40%;
		height: fit-content;
		margin: 0;
		padding: 15% min(20px, 1.5vw) 0;
		display: block;
		position: sticky;
		left: 0;
		top: 0;
		align-self: start;
		z-index: 1;
		order: 1;
	}

	#contents .float_img p.txt {
		text-align: center;
		color: var(--color_01);
		font-size: min(32px, 2.8vw);
		font-weight: 700;
		line-height: 1.5;
	}

	#contents .float_img p.img {
		margin-top: 20px;
	}
} */

@media screen and (min-width: 1025px){
	#contents .float_img {
		flex: 1;
        min-width: 0; 
        max-width: calc((100% - 480px) / 2);
		height: 100vh;
		/* margin-top: calc(var(--current-wave-height) - 40px); */
		/* margin: 0; */
		/* padding: 15% 0 0 min(20px, 1.5vw); */
		padding: 0 0 0 min(20px, 1.5vw);
		display: flex;
		justify-content: flex-end; 
		align-items: center;
		align-self: flex-start;
		position: sticky;
		left: 0;
		top: 0;
		/* transform: translateY(var(--current-wave-height)); */ */
		z-index: 10;
		order: 1;
		transition: transform 0.3s ease, top 0.3s ease;
	}

	/* #contents .float_img.is-active {
		transform: translateY(-50%);
	} */

	#contents .float_img .inner {
		width: 100%;
		max-width: 465px;
		height: fit-content;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	#contents .float_img p.txt {
		color: var(--color_01);
		font-size: min(32px, 2.5vw);
		font-weight: 700;
		line-height: 1.5;
	}

	#contents .float_img p.img {
		margin-top: 20px;
	}
}





/*====================================================================================

		footer layout

====================================================================================*/

footer {
	padding: 8vh 5vw 40vw;
	background-color: var(--color_02);
	text-align: center;
}

footer .logo {
	margin: 0 auto 5vh;
}

footer .logo img {
	width: max(134px, 40%);
}

footer ul {
	margin: 0 auto 3vh;
}

footer ul li {
	line-height: 2.0;
}

footer ul li a {
	font-size: 3.4vw;
	color: #fff;
}

footer p.copy {
	color: #fff;
	font-size: 3.2vw;
}


@media screen and (min-width: 769px){
	footer {
		margin: 0;
		padding: 50px 50px 200px;
	}

	footer .logo {
		margin: 0 auto 40px;
	}

	footer .logo img {
		width: min(134px, 40%);
	}

	footer ul {
		margin: 0 auto 25px;
		display: flex;
		justify-content: center;
		gap: 0 2rem;
	}

	footer ul li {
		line-height: 1.2;
	}

	footer ul li a {
		font-size: 14px;
	}

	footer p.copy {
		font-size: 13px;
	}
}

@media screen and (min-width: 1025px){
	footer {
		width: 100%;
		height: 140px;
		margin: 0;
		padding: 50px 50px 20px;
		position: absolute;
		bottom: 0;
		z-index: 99;
	}
}