/*==============================
        header
==============================*/
@charset "utf-8";

#header{
	position: sticky;
	top:0;
	left:0;
	z-index: 99;
	.header {
		background-color:#FFFFFF;
		box-shadow:0 2px 6px rgba(0,0,0,.15);
		.header_inner {
			height:100px;
			margin:0 auto;
			display:grid;
			grid-template-columns:180px 1fr auto 100px;
			align-items:center;
			.logo {
				margin-left:30px;
			}
			p {
				font-family: "M PLUS 1p", sans-serif;
				font-size:1.8rem;
				font-weight:700;
				line-height:1;
				margin-left:1em;
				display:grid;
				grid-row-gap:.33em;
				justify-items:start;
				& > span {
					border:1px solid #000000;
					background-color: var(--color_sub);
					font-size:.8em;
					padding:.2em .33em;
					box-shadow: 2px 2px 0 0 var(--color_txt);
					border-radius: 3px 0;
					span {
						&:first-child {
							font-size:1.1em;
							font-weight:600;
							margin-right:.5em;
						}
						&:last-child {
							font-size:.9em;
							margin-left:.5em;
							font-weight:600;
						}
					}
				}
			}
			.meeting{
				display: grid;
				height:100%;
				padding:0 1em 0 2em;
				border-radius:5em 0 0 5em;
				grid-template-columns:repeat(2,auto);
				grid-column-gap:1.2em;
				align-items:center;
				background-color: var(--color_main);
				font-family: "M PLUS 1p", sans-serif;
				font-size: 1.8rem;
				* {
					color:var(--color_txt2);
				}
				dl {
					display:grid;
					grid-template-columns:repeat(2,auto);
					align-items:center;
					grid-gap:1em;
					dt{
						font-family: "M PLUS 1p", sans-serif;
						font-size: 2em;
						font-weight:500;
						line-height:1.1;
						text-align: center;
						& > span{
							font-family: "M PLUS 1p", sans-serif;
							font-size: .4em;
							display: block;
							font-weight:600;
						}
					}
					dd{
						line-height: 1;
						font-weight: 600;
						text-align: center;
						font-family: "M PLUS 1p", sans-serif;
						& > span{
							font-size: 2.4em;
							font-weight: 600;
						}
					}
				}
				ul {
					display:grid;
					grid-template-columns:repeat(2,auto);
					align-items:center;
					grid-gap:1em;
					font-size:.9em;
					li {
						font-family: "M PLUS 1p", sans-serif;
						line-height:1.3;
						font-weight:600;
					}
				}
			}
			.spbtn{
				height:100%;
				background-color: var(--color_main);
				position:relative;
				&::before,&::after {
					content:'';
					display:block;
					width:44%;
					height:4px;
					border-radius:2px;
					background-color:var(--color_txt2);
					position:absolute;
					top:25px;
					left:50%;
					transition:.5s;
					transition-timing-function:ease-in-out;
					transform-origin:center center;
					transform:translateX(-50%);
				}
				&::after {
					top:auto;
					bottom:45px;
				}
				.bar {
					display:block;
					width:44%;
					height:4px;
					border-radius:2px;
					background-color:var(--color_txt2);
					position:absolute;
					top:38px;
					left:50%;
					transition:.5s;
					transition-timing-function:ease-in-out;
					transform-origin:center center;
					transform:translateX(-50%);
				}
				.open,.close {
					font-family: "M PLUS 1p", sans-serif;
					font-size:1.3rem;
					font-weight:600;
					position:absolute;
					bottom:23px;
					left:50%;
					transform:translateX(-50%);
					transition:.5s;
					transition-timing-function:ease-in-out;
					white-space:nowrap;
					color:var(--color_txt2);
				}
				.close {
					opacity:0;
				}
			}
		}
	}
}

@media screen and (max-width:1200px){

	#header{
		.header {
			.header_inner {
				.meeting{
					dl {
						grid-template-columns:1fr;
						grid-gap:0;
						dt{
							font-size: 1.6em;
							& > span{
								font-size: .5em;
								font-weight:600;
							}
						}
						dd{
							& > span{
								font-size: 1.8em;
							}
						}
					}
				}
			}
		}
	}
}

@media screen and (max-width:1024px){

	#header{
		.header {
			.header_inner {
				grid-template-columns:1fr auto 100px;
				grid-template-rows:auto 1fr;
				align-content:cneter;
				.logo {
					width:120px;
					align-self:end;
					padding-top:10px;
				}
				p {
					font-size:1.4rem;
					margin-left:30px;
					grid-area:2/1/3/2;
					padding:5px 0;
					span {
						font-size:.9em;
					}
				}
				.meeting {
					grid-area:1/2/3/3;
				}
				.spbtn{
					grid-area:1/3/3/4;
				}
			}
		}
	}
	
}

@media screen and (max-width:768px){

	#header{
		.header {
			.header_inner {
				height:50px;
				grid-template-columns:auto 1fr 50px;
				grid-template-rows:1fr;
				.logo {
					margin-left:10px;
					width:75px;
					align-self:center;
					padding-top:0;
				}
				p {
					grid-area:unset;
					font-family: "M PLUS 1p", sans-serif;
					font-size:min(3.6vw,1.4rem);
					line-height:1.2;
					height:auto;
					margin-left:1em;
					padding:0;
					grid-row-gap:.1em;
				}
				.meeting{
					display: none;
				}
				.spbtn{
					grid-area:unset;
					background-color: transparent;
					&::before,&::after {
						width:60%;
						height:3px;
						top:10px;
						background-color: var(--color_txt);
					}
					&::after {
						top:auto;
						bottom:19px;
					}
					.bar {
						width:60%;
						height:3px;
						top:19px;
						background-color: var(--color_txt);
					}
					.open,.close {
						font-size:1.0rem;
						bottom:5px;
						color: var(--color_txt);
					}
				}
			}
		}
	}

}

body {
	#header,#footer,main {
		transition:.5s;
		transition-timing-function:ease-in-out;
	}
	&.menuopen {
		overflow: hidden;
		#header {
			.header {
				.header_inner {
					.spbtn {
						&::before {
							transform:translateX(-50%) rotate(45deg);
							top:38px;
						}
						&::after {
							transform:translateX(-50%) rotate(-45deg);
							bottom:57.5px;
						}
						.bar {
							opacity:0;
							transform:translate(-50%,-50%) scaleX(0);
						}
						.open {
							opacity: 0;
						}
						.close {
							opacity: 1;
						}
					}
				}
			}
		}
		#header,#footer,main {
			transform: translateX(max(calc(-100vw + 50px),-500px));
		}
		.spmenu {
			right: 0;
			box-shadow:3px 0 6px rgba(0,0,0,.15) inset;
		}
	}
}

.spmenu {
	position:fixed;
	top:0;
	right:-100vw;
	width:calc(100vw - 50px);
	max-width: 500px;
	background-color:#FFFFFF;
	height:100vh;
	height:100dvh;
	z-index:999;
	text-align:center;
	transition:.5s;
	transition-timing-function:ease-in-out;
	overflow:auto;
	&:has(.submenu.open) {
		overflow:hidden;
	}
	.spmenu_inner {
		.meeting{
			display: grid;
			padding:.75em;
			grid-column-gap:1.2em;
			align-items:center;
			gap:.5em;
			background-color: var(--color_main);
			font-family: "M PLUS 1p", sans-serif;
			font-size: 1.8rem;
			box-shadow:0 2px 3px rgba(0,0,0,.15),
				3px 0 6px rgba(0,0,0,.15) inset;
			* {
				color:var(--color_txt2);
			}
			dl {
				display:grid;
				grid-template-columns:repeat(2,auto);
				align-items:center;
				justify-content:center;
				grid-gap:1em;
				dt{
					font-family: "M PLUS 1p", sans-serif;
					font-size: 1.5em;
					font-weight:500;
					line-height:1.1;
					text-align: center;
					& > span{
						font-family: "M PLUS 1p", sans-serif;
						font-size: .6em;
						display: block;
						font-weight:600;
					}
				}
				dd{
					line-height: 1;
					font-weight: 600;
					text-align: center;
					font-family: "M PLUS 1p", sans-serif;
					& > span{
						font-size: 2.4em;
						font-weight: 600;
					}
				}
			}
			ul {
				display:grid;
				grid-template-columns:repeat(2,auto);
				align-items:center;
				justify-content:center;
				grid-gap:1em;
				font-size:.9em;
				li {
					font-family: "M PLUS 1p", sans-serif;
					line-height:1.2;
					font-weight:600;
				}
			}
		}
		.menu1 {
			padding:15px 20px;
			box-shadow:0 2px 3px rgba(0,0,0,.15);
			h2 {
				font-size:2.2rem;
				font-weight:600;
				color:#007572;
				text-align:left;
				margin-bottom:.75em;
			}
			.item {
				display:grid;
				grid-gap:.66em;
				a {
					display:grid;
					grid-template-columns:20% 1fr;
					align-items:center;
					justify-content:start;
					grid-gap:1em;
					text-align:left;
					font-size:min(4.0vw,1.8rem);
					font-weight:600;
					line-height:1.4;
					img {
						aspect-ratio:1/1;
						object-fit:cover;
						border-radius:.5em;
						box-shadow:-5px -5px 6px rgba(0,0,0,.06),
							7px 5px 10px rgba(0,0,0,.08);
					}
					p {
						font:inherit;
					}
				}
				&.item2 {
					grid-template-columns:repeat(2,auto);
					grid-gap:10px;
					margin-bottom:1.5em;
					a {
						grid-template-columns:33% auto;
						grid-gap:.5em;
						img {
							border-radius:50%;
						}
					}
				}
				&.item3 {
					grid-template-columns:repeat(3,auto);
					grid-gap:1em;
					justify-content:center;
					align-items:center;
					a {
						grid-template-columns:auto auto;
						grid-gap:.33em;
						line-height:1.3;
						&::before {
							font-size:1.5em;
							color:#007572;
						}
					}
				}
				&.item5 {
					grid-template-columns:repeat(2,1fr);
					grid-gap:0;
					a {
						grid-template-columns:40% 1fr;
						grid-gap:.5em;
						& + a {
							transform:translateX(1em);
						}
					}
				}
				&.item4 {
					grid-gap:.33em;
					a {
						grid-template-columns:auto 1fr;
						grid-gap:.5em;
						padding-bottom:.5em;
						&::before {
							font-size:1.5em;
							color:#007572;
						}
						&:not(:last-child) {
							border-bottom:2px dotted #cccccc;
						}
					}
				}
			}
		}
		.submenu {
			position:fixed;
			z-index: 9;
			top:0;
			right:-105vw;
			width:calc(100% - 90px);
			max-width: 460px;
			background-color:#FFFFFF;
			height:100%;
			transition:.5s;
			transition-timing-function:ease-in-out;
			box-shadow: 0 -3px 6px rgba(0,0,0,.15);
			overflow:auto;
			&.open {
				right: 0;
			}
			.back {
				display:grid;
				grid-template-columns:auto 1fr;
				align-items:center;
				text-align:left;
				justify-content:start;
				height:2em;
				padding:0 1em;
				grid-gap:.5em;
				font-weight:600;
				color:#007572;
				border-bottom:2px solid #007572;
				margin-bottom:1.25em;
				position:sticky;
				top:0;
				background-color:#FFFFFF;
				&::before {
					font-size:1.2em;
					color:#007572;
				}
			}
			h2 {
				font-family: "M PLUS 1p", sans-serif;
				font-size:1.8rem;
				margin:0 1em 1em;
				text-align:left;
				font-weight:600;
				color:#007572;
			}
			.item {
				padding:0 20px 20px;
				display:grid;
				grid-gap:1.5em;
				a {
					display:grid;
					grid-template-columns:25% 1fr;
					grid-gap:0 1em;
					align-items:center;
					text-align:left;
					border-bottom:2px dotted #cccccc;
					padding-bottom:1em;
					img {
						aspect-ratio:1/1;
						object-fit:cover;
						border-radius:.5em;
						box-shadow:-5px -5px 6px rgba(0,0,0,.06),
							7px 5px 10px rgba(0,0,0,.08);
					}
					h3 {
						line-height:1.3;
					}
					p {
						grid-area:2/1/3/3;
						font-size:.9em;
						line-height:1.5;
						padding:.66em 0;
					}
					span {
						grid-area:4/1/4/3;
						font-weight:600;
						color:#007572;
						font-size:.9em;
						line-height:1.5;
						display:grid;
						grid-template-columns:1fr auto;
						grid-gap:.5em;
						align-items:center;
						justify-content:end;
						text-align:right;
					}
				}
			}
		}
	}
}



@media screen and (max-width:768px){

body {
	&.menuopen {
		#header {
			.header {
				.header_inner {
					.spbtn {
						&::before {
							top:20px;
						}
						&::after {
							bottom:27.5px;
						}
					}
				}
			}
		}
	}
}

}