@charset "utf-8";
/* CSS Document */

/* ====================================================
   ブレイクポイント
   960px以下 (ノートPC・iPad横)
   767px以下 (タブレット・スマホ一括)
   480px以下 (スマホ専用)
======================================================= */


/* ----------------------------------------------------
   basic setting:
------------------------------------------------------- */

:root {
	--white: #fff;
	--black: #303030;
	--bg: #AEE3CA;
	--main_c: #00AEB2;
	--orange1: #F18D00;
	--orange2: #FFAF3D;
	--green: #007375;
	--gray_border: #EDEDED;
	--border: 1.5px solid var(--gray_border);
	--orange1_border: 3px solid var(--orange1);
	--orange2_border: 3px solid var(--orange2);
	--white_border: 3px solid var(--white);
	--outline: 55rem;
	--font-family: "IBM Plex Sans JP", sans-serif;
	--font-family_en: "Open Sans", sans-serif;
	--gap: 15px;
	--margin-bottom: 2rem;
	--pa: 4%;
	--maru: 32px;
	--maru_s: 10px;
	--shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
}

/* 767px以下 */
@media (max-width: 767px) {
	:root {
		--gap: 1.5rem;
		--margin-bottom: 2rem;
		--pa: 3%;
	}
}


html {
	position: relative;
	scroll-behavior: smooth;
	font-size: 19px;
}

/* 769px〜1919pxの間 */
@media (min-width: 769px) and (max-width: 1919px) {
  html {
    font-size: calc(16px + (19 - 16) * ((100vw - 768px) / (1920 - 768)));
    min-height: 0vw;
  }
}

/* 768px以下 */
@media (max-width: 768px) {
  html {
    font-size: 15px;
  }
}

body {
	color:  var(--black);
	position: relative;
	font-family: var(--font-family);
    font-weight: 500;
    font-style: normal;
    font-size: 1rem;
    line-height: 1.9;
	width: 100%;
	background: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url(../img/bg.png) no-repeat, #BDF2CE;
	background-size: 100%;
	background-attachment: fixed;
	
	&::before {
		content: "";
		display: block;
		background: var(--main_c);
		min-height: 60px;
		clip-path: polygon(
		  0 0,
		  100% 0,
		  100% 25%,
		  0 100%
		);
	}
}

:lang(en) {
    font-family: var(--font-family_en);
}

/*---- block_skip ----*/

#block_skip{
	position: absolute;
	left: 15px;
	top: 15px;
	
	a {
		z-index: 999;
		display:inline-block;
		height: 0;
		overflow: hidden;
		text-align: center;
		color: var(--white);
		background: #666;
		font-size: 100%;
		border-radius: var(--maru_s);
		
		&:focus {
			padding: .5rem 2rem;
			height: auto;
			line-height: 3em;
		}
	}
}

/* reset:
--------------------------------------------*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

ul,ol {list-style: none;}
em,address {font-style: normal;}

a {
	color: var(--black);
	text-decoration: none;
	transition: all 300ms 0s ease;
	
	&:focus-visible { outline: 2px var(--black) solid; }
}

input:focus-visible,
button:focus-visible { outline: 2px var(--black) solid; }

	
/* Utility
--------------------------------------------*/

/* 幅設定 ----------*/
.outline {
	max-width: var(--outline);
	margin: 0 auto;
	box-sizing: content-box;
	padding: 0 var(--pa);
}

/* マージン */
.mg_0   { margin: 0!important; }
.mg_1   { margin: 1em!important; }
.mg_2   { margin: 1em!important; }
.mg_t0  { margin-top: 0rem!important; }
.mg_t1  { margin-top: 1rem!important; }
.mg_t2  { margin-top: 2rem!important; }
.mg_t3  { margin-top: 3rem!important; }
.mg_b0  { margin-bottom: 0!important; }
.mg_b1  { margin-bottom: 1em!important; }
.mg_b2  { margin-bottom: 2em!important; }
.mg_b3  { margin-bottom: 3em!important; }
.mg_l1  { margin-left: 1em!important; }
.mg_r1  { margin-right: 1em!important; }

/* 幅 */
.w5     { width: 5%; }
.w10    { width: 10%; }
.w15    { width: 15%; }
.w20    { width: 20%; }
.w25    { width: 25%; }
.w30    { width: 30%; }
.w40    { width: 40%; }
.w50    { width: 50%; }
.w60    { width: 65%; }
.w70    { width: 70%; }
.w80    { width: 80%; }
.w90    { width: 90%; }
.w100   { width: 100%; }

.nowrap { white-space: nowrap; }

/* 配置 ----------*/
.align_c   { text-align: center ; }
.align_l   { text-align: left ; }
.align_r   { text-align: right ; }
.valign-m  { vertical-align: middle ; }
.valign-t  { vertical-align: top ; }
.valign-b  { vertical-align: bottom ; }

/* グリッドレイアウト ----------*/
.grid {
	display: grid;
	grid-gap: var(--gap);
	justify-content: space-between;

	&.a-items_c { align-items: center; }

	/* カラム数指定 */
	&.clm2 { grid-template-columns: repeat(2, 1fr); }
	&.clm3 { grid-template-columns: repeat(3, 1fr); }
	&.clm4 { grid-template-columns: repeat(4, 1fr); }
	&.clm5 { grid-template-columns: repeat(5, 1fr); }
	&.clm6 { grid-template-columns: repeat(6, 1fr); }

	/* 比率指定 */
	&.clm1-2 { grid-template-columns: 1fr 2fr; }
	&.clm2-1 { grid-template-columns: 2fr 1fr; }
	&.clm1-3 { grid-template-columns: 1fr 3fr; }
	&.clm3-1 { grid-template-columns: 3fr 1fr; }
	&.clm1-4 { grid-template-columns: 1fr 4fr; }
	&.clm4-1 { grid-template-columns: 4fr 1fr; }
	&.clm1-5 { grid-template-columns: 1fr 5fr; }
	&.clm5-1 { grid-template-columns: 5fr 1fr; }
	&.clm6-1 { grid-template-columns: 6fr 1fr; }

	&.clm2-1-1 { grid-template-columns: 2fr 1fr 1fr; }
}

/* 文字色 ----------*/
.red { color: var(--red); }


/* ----------------------------------------------------
   header setting:
------------------------------------------------------- */
header {
	text-align: center;
	background: var(--white);
	position: fixed;
    top: 15px;
	right:15px; 
    z-index: 999;
	border-radius: 100vh;
	box-shadow: var(--shadow); 
	
	/* hamburger (PC時は非表示) */
	& .hamburger {
		display: none;
	}
	
	/* セクナビ ----------*/
	.sec_nav {
		ul {
			padding: 1.2rem 35px 1rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 1.5rem;
			
			li {
				&:last-child { margin-right: 0; }

				a {
					position: relative;
					padding-bottom: .2rem;
					display: inline-block;

					&::after {
						content: "";
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%) scaleX(0);
						width: 80%;
						height: 3px;
						background-color: var(--orange1);
						border-radius: 1.5px;
						transition: transform 0.3s ease-in-out;
						transform-origin: center;
					}

					&:hover::after {
						transform: translateX(-50%) scaleX(1);
					}
				}
			}
		}
	}
}


/* ----------------------------------------------------
   contents setting:
------------------------------------------------------- */
#contents {
	
	/* Elements ----------*/
	:is(p, table, ul, ol, dl, iframe, figure, .grid) {
		margin-bottom: var(--margin-bottom);
	}

	/* アイコン ----------*/
	img.icon {
		width: 1.6rem;
		margin-left: .5rem;
		vertical-align: middle;
		margin-bottom: 0;
		
		&.blank {
			width: 1.3rem;
			margin-bottom: .1rem
		}
	}

	/* 見出し ----------*/
	h2 {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		margin-bottom: 1.5rem;
		font-weight: 700;
		font-size: 1.7rem;
		line-height: 1.3;
		
		&::before,
		&::after {
			content: '';
			width: 6px;
			height: 40px;
			background-color: var(--main_c);
			border-radius: 6px;
		}

		&::before {
			margin-right: 30px;
			transform: rotate(-35deg)
		}
		&::after {
			margin-left: 30px;
			transform: rotate(35deg)
		}
	}

	h3 {
		text-align: center;
		padding-bottom: .7rem;
		margin-bottom: 1rem;
		font-size: 1.4rem;
		font-weight: 700;
		position: relative;
		line-height: 1.5;
		
		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 26px;
			height: 5px;
			background-color: var(--main_c);
			border-radius: 5px;
		}
		
		span {
			font-size: .9rem;
			display: block;
			font-weight: 500;
		}
	}

	h4 {
		margin-bottom: 1rem;
		font-size: 1.2rem;
		font-weight: 700;
		background: linear-gradient(transparent 60%, #D0EFE1 0%);
		display: block;
		line-height: 1.6;
		
		&.orange {
			background: linear-gradient(transparent 60%, #FCE8CC 0%);
		}
	}

	/* リスト ----------*/
	ul {
		li {
			position: relative;
			padding-left: 1.5rem;
			margin-bottom: 1rem;

			&::before {
				content: "";
				display: block;
				position: absolute;
				background-color: var(--orange1);
				left: 0;
				top: .5rem;
				width: 0.6rem;
				height: 0.6rem;
				margin-left: 0.2rem;
				border-radius: 50px;
			}
			&::marker { content: none; }
		}
		
		&.ul_small {
			li {
				margin-bottom: .5rem;
				font-size: .9rem;
				line-height: 1.5rem;

				&::before {
					position: absolute;
					background-color: var(--black);
					top: .5rem;
					width: 0.4rem;
					height: 0.4rem;
				}
			}
		}
	}

	/* DL ----------*/
	dl {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-column-gap: 2rem;
		grid-row-gap: 1rem;
		dt { font-weight: 700; }
	}	
	
	section dl {
		width: fit-content;
		margin: 0 auto;
	}	

	/* 罫線 ----------*/
	hr {
		display: block;
		border: none;
		border-top: var(--border);
		margin: 2rem 0;
	}
	

	/* Module ----------*/
	.lnk_btn {
		text-align: center;
		
		a {
			background: var(--orange2);
			padding: 1rem 60px .8rem 3rem;
			border-radius: 100vh;
			min-width: 12rem;
			display: inline-block;
			font-weight: 700;
			font-size: 1.1rem;
			border: var(--orange2_border);
			
			&:hover {
				background: var(--white);
				border: var(--orange2_border);
			}
		}
	}

	
	/* main_V ----------*/
	& .main_v {
		display: grid;
		grid-template-columns: 33% 1fr 25%;
		align-items: center;
		grid-row-gap: .5rem;
		max-width: 1200px;
		margin: 0 auto;
		box-sizing: content-box;
		padding: 3rem var(--pa) 1rem;
		
		img { width: 100%; }
		
		h1 {
			grid-column: 1 / 3 ;
			order:1;
		}
		
		& .chara2 {
			grid-column: 3 / 4 ;
			order:2;
		}
		
		& .chara1 {
			grid-column: 1 / 2 ;
			padding-right: 2rem;
			order:3;
		}
		
		dl {
			grid-column: 2 / 4 ;
			text-align: left;
			font-weight: 700;
			align-items: center;
			grid-row-gap: 1.5rem;
			grid-column-gap: 1rem;
			line-height: 1.2;
			margin-bottom: 0;
			order:4;

			dt {
				background: var(--green);
				color: var(--white);
				padding: 1rem;
				display: block;
				border-radius: var(--maru_s);
				font-size: 1.3rem;
				letter-spacing: .1rem;
			}

			dd {
				font-size: 1.4rem;
				color: var(--green);
				margin-bottom: 0;
				
				span {
					font-size: 2.2rem;
					font-family: var(--font-family_en);
				}
				br { display: none; }
			}
		}
	}
	
	/* about ----------*/
	.about {
		background: #fff;
        box-sizing: content-box;
        margin: 0px auto;
		padding: 2rem;
		border-radius: var(--maru);
		margin-bottom: 3rem;
		
		p {
			font-size: 1.1rem;
			line-height: 2;
		}
	}
	
	/* section ----------*/
	section {
		background: hsla(0, 0%, 100%, .4);
		backdrop-filter: blur(1rem);
		-webkit-backdrop-filter: blur(1rem);
		padding: 2rem var(--pa);
		border-radius: var(--maru);
		margin-bottom: 3rem;
		
		& .bg_w {
			background: hsla(0, 0%, 100%, .8);
			padding: 2.5rem 2rem .5rem;
			margin-top: 1.5rem;
			border-radius: var(--maru);
		}
	}
		
	/* video-thumb ----------*/
	& .video-thumb {
		margin-bottom: 0;
		
		iframe {
			width: 100%;
			aspect-ratio: 16 / 9;
			display: block;
			margin: 0;
		}
		figcaption {
			margin-top: .5rem;
			text-align: center;
			font-size: .9rem;
			line-height: 1.6;
		}
	}
}/* #contentsここまで */


/* ----------------------------------------------------
   footer setting:
------------------------------------------------------- */
footer {
  position: relative;
  
	& .outline {
		padding-top: 8rem;
		padding-bottom: 1rem;
		max-width: 1200px;
	}

    &::before {
		content: "";
		position: absolute;
		inset: 0;
		background: #AAE6DA;
		clip-path: polygon(
		  0 25%,
		  100% 0,
		  100% 100%,
		  0 100%
		);
		z-index: 0;
    }

    > * {
		position: relative;
		z-index: 1;
    }
	
	h2 {
		font-size: 1.3rem;
		margin-bottom: 1.5rem;
	}
	
	& .footer-content {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 2rem;
		align-items: center;
		
		dl {
			display: grid;
			grid-template-columns: auto 1fr;
			grid-gap: 1rem;
			align-items: center;
			dt { font-weight: 700; }
			dd {
				span {
					display: inline-flex;
					padding: .5rem .7rem .5rem .3rem;
					border-radius: var(--maru_s);
					background-color: var(--white);
					align-items: center;
					font-weight: 700;
					
					img {
						width: 35px;
						margin-right: 8px;
					}
					
				}
			}
			dd:last-of-type {
				br {
					display: none;
				}
			}
		}

		& .sns {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 10px;
			
			a {
				display: grid;
				grid-template-columns: auto 1fr 40px;
				padding: 1rem .5rem;
				border-radius: var(--maru_s);
				background-color: var(--white);
				align-items: center;
				line-height: 1.4;
				border: var(--white_border);
				overflow-wrap: anywhere;
				
				span {
					&.txt {
						font-size: .9rem;
						grid-column: 2 / 4;
					}
					&:not([class]) {
						font-size: .75rem;
						font-family: var(--font-family_en);
						line-height: 1.2;
					}
				}
				img {
					width: 28px;
					margin-right: 10px;
					margin-left: .5rem;
					
					&:not(.chara) {
						grid-row: 1 / 3;
					}
					&.fs {
						width: 40px;
						margin-left: .1rem;
					}
					&.ins {
						width: 37px;
						margin-left: .2rem;
					}
					&.chara {
						width: 38px;
						margin-right: 0;
						margin-left: .2rem;
						align-self: flex-end;
					}
				}
				
				&:hover {
					border: var(--orange1_border);
				}
			}
		}
	}

    & #page_top {
		position: absolute;
		top: -100px;
		right: 2rem;
		z-index: 9;

		a {
		  display: block;
		}
	  
		a:hover img {
		  animation: pyokon 0.5s ease-in-out;
		}
	  
		img {
			width: 220px;
			display: block;
		}
    }

	& #copy {
		text-align: center;
		display: block;
		background: var(--black);
		color: var(--white);
		font-size: .9rem;
		padding: .8rem var(--pa);
		margin-top: 2rem;
		font-family: var(--font-family_en);
		line-height: 1.2;
	}
}/* footer settingここまで */


@keyframes pyokon {
  0% { transform: translateY(0); }
  30% { transform: translateY(-30px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-7px); }
  100% { transform: translateY(0); }
}


/* ----------------------------------------------------
   responsive setting:
------------------------------------------------------- */

/* 959px以下 
--------------------------------------------*/
@media (max-width: 959px) {
	:root {
		--pa: 2%;
	}
	body {
		&::before {
			min-height: 40px;
		}
	}
	
	header {
		box-shadow: none;
		
		/* hamburger ----------*/
		& .hamburger {
			display: block;
			width: 48px;
			height: 48px;
			position: absolute;
			right: 0;
			top: 0;
			cursor: pointer;
			z-index: 9999;
			margin-block-start: 0 !important;
			background: var(--white);
			border: none;
			padding: 0;
			border-radius: 50%;
			box-shadow: var(--shadow); 

			&::before,
			&::after,
			span {
				content: "";
				display: block;
				width: 22px;
				height: 3px;
				background-color: var(--black);
				opacity: .8;
				transition: all 0.3s ease-in-out; 
				position: absolute;
				left: calc(50% - 11px);
				transform-origin: center center;
				border-radius: 1.5px;
			}

			&::before { top: 14px; }
			span { top: calc(50% - 1.5px); }
			&::after { bottom: 14px; }

			&.open {
				span {
					opacity: 0;
					width: 0;
				}
				&::before {
					top: calc(50% - 1.5px);
					transform: rotate(45deg);
				}
				&::after {
					bottom: calc(50% - 1.5px);
					transform: rotate(-45deg);
				}
			}
		}
		
		/* sec_nav  ----------*/
		nav {
			position: absolute;
			top: -100%;

			/* navが開いた時 (.open) */
			&.open {
				right: 0;
				top: 0;
				padding: 5rem 3rem;
				position: fixed;
				left: 0;
				width: 100%;
				background: var(--main_c);
				transition: top 0.5s ease-in-out;
				z-index: 998;
				display: flex;
				align-items: center;
				justify-content: center;

				&.sec_nav {
					ul {
						padding: 0;
						justify-self: flex-start;
						width: 100%;
						display: grid;
						grid-gap: 15px;
						grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

						li {
							display: block;
							margin-left: 0;
							margin-right: 0;

							a {
								display: block;
								text-decoration: none;
								padding: 1rem;
								background: var(--white);
								border-radius: var(--maru_s);
								width: 100%;
								font-size: 1.1rem;
								opacity: 1;
							}
						}
					}
				}
			}
		}
	}/* headerここまで */
	
	
	#contents {
		& .main_v {
			padding: 2rem var(--pa) 1rem;
		}
    }/* #contentsここまで */
	
	footer {
		&::before {
			clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
		}
		& .outline {
			padding-top: 6rem;
		}
		
		& .footer-content {
			grid-template-columns: 1fr;

			& dl {
				& dd:last-of-type {
					br {
						display: block;
					}
				}
			}
		}
		& #page_top {
			top: -50px;
			right: .5rem;
			
			img {
				width: 180px;
			}
		}
	}/* footerここまで */
	
}/* 959pxここまで */


/* 767px以下
--------------------------------------------*/
@media (max-width: 767px) {
	
	/* グリッドレイアウト ----------*/
	.grid {
		grid-template-columns: 1fr!important
	}
	
	#contents {
		& section {
			& .bg_w {
				padding: 2.5rem 1rem .5rem;
			}
		}
		.about {
			padding: 1.5rem 1rem;
		}
    }/* #contentsここまで */
	
	footer {
		&::before {
            clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
        }
	}/* footerここまで */
	
}/* 767pxここまで */


/* 480px以下 
--------------------------------------------*/
@media (max-width: 480px) {
	#contents {
		dl {
			display: grid;
			grid-template-columns: 1fr;
			grid-row-gap: 0;
			
			dd {
				margin-bottom: 1rem;
			}
		}
	}/* #contentsここまで */
	
	footer {
		& .footer-content {
			& dl {
				& dd:last-of-type {
					br {
						display: none;
					}
				}
			}
			
			& .sns {				
				a {
					& span {
						&.txt {
							font-size: .8rem;
						}
					}
					img {
						width: 22px;
						margin-right: 10px;
						margin-left: .5rem;

						&.fs {
							width: 30px;
							margin-left: .1rem;
						}
						&.ins {
							width: 28px;
							margin-left: .2rem;
						}
					}
				}
			}
		}/* footer-contentここまで */
		
		& #copy {
			font-size: .8rem;
		}
		
	}/* footerここまで */
	
}/* 480pxここまで */


/* その他ブレークポイント
--------------------------------------------*/

/* 1033px以下 */
@media (max-width: 1033px) {
	#contents {
		& .main_v {
			dl {
				dd {
					br { display: block; }
				}
			}
		}
	}
}

/* 600px以下 */
@media (max-width: 600px) {
	#contents {
		& .main_v {	
			grid-template-columns: 1fr 1fr;
			
			h1 {
				grid-column: 1 / 4;
				order:1;
			}
			& .chara2 {
				grid-column: 2 / 3;
				order:4;
			}
			& .chara1 {
				grid-column: 1 / 2;
				padding-right: 0;
				order:3;
			}
			dl {
				grid-column: 1 / 4;
				grid-template-columns: auto 1fr!important;
				order:2;
			}
        }
	}
}

/* 400px以下 */
@media (max-width: 400px) {
	footer {
		& .footer-content {
			& .sns {
				grid-template-columns: repeat(1, 1fr);
				& a {
                    & span {
                        &.txt {
                            font-size: .9rem;
                        }
						&:not([class]) {
							font-size: .8rem;
						}
                    }
                }
			}
		}
	}
}

/* 200%拡大調整 */
@media (max-width: 1200px) and (min-width: 959px) {
	header {
		/* セクナビ ----------*/
		.sec_nav {
			ul {
				padding: 1.2rem 20px 1rem;
				gap: .8rem;
				font-size: .9rem;
			}
		}
	}
}

/* その他ブレークポイント ここまで */