/*
Theme Name: atelierkaminoge
Author: Abe Masaaki
Version: 1
*/
:root {
	--accent-gray: #65797e;
	--accent-gray-l: #aacad2;
	/*--link-green: rgb(109, 206, 45);*/
	--link-green: rgb(78, 211, 71);
	--link-green-smooky: rgb(135, 208, 86);
	--link-green-hover: rgb(169, 230, 77);
	--link-green-blue: rgb(135, 228, 172);
	--clr-cobalt: #1411d1;
	--clr-lavender: #d2dcfa;
	--clr-lavender_l: rgba(210, 220, 250, 0.5);
	--clr-gra1st: rgba(122, 251, 165, 0.8);
	--clr-gra1end: rgba(252, 255, 87, 0.5);
	--clr-gray-l: #dedede;
	--clr-green-smooky-dl: rgb(157, 183, 139);
	--clr-green-smooky-l: rgb(216, 228, 207);
	--clr-green-smooky-exl: rgb(242, 255, 233);
	--clr-red: rgb(169, 35, 35);
	--clr-white: #eee;
	--gradation1: linear-gradient(to right, var(--clr-gra1st), var(--clr-gra1end));
	--gradation2: linear-gradient(30deg, rgba(194, 241, 251, 0.7) 20%, rgba(252, 255, 87, 0.8) , rgba(122, 251, 165, 0.5));
	--gradation3: linear-gradient(30deg, rgba(243, 243, 243, 0.7) 20%, rgba(253, 253, 232, 0.8) , rgba(231, 245, 237, 0.8));
	--gradation4: linear-gradient(30deg, rgba(194, 241, 251, 0.7) 20%, rgba(195, 251, 122, 0.8));
	--gradation-lavender: linear-gradient(to right, rgba(122, 142, 205, 1.0), rgba(180, 199, 246, 0.7));
	--gradation-orange: linear-gradient(to right, rgb(250, 168, 4), rgba(251, 246, 102, 0.7));
	--gradation-red: radial-gradient( var(--clr-red), rgb(255, 255, 255), var(--clr-red) );
}
html, body {
	width: 100%;
	height: 100%;
}
body {
	position: relative;
	margin: 0;
	color: #343434;
	color: #757575;
	color: var(--accent-gray);
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 300;
	line-height: 1.5;
}
h1, h2, h3, h4 {
	margin: 0;
	font-weight: 200;
}
h2 {
	font-size: 1.2rem;
}
h3, h4 {
	font-weight: 300;
}
a {
	/*color: rgb(109, 206, 45);*/
	color: var(--link-green-smooky);
	text-decoration: none;
	transition: color .3s ease-out;
}
a:hover {
	color: var(--link-green-hover);
}
hr {
	border-color: rgb(70, 123, 34);
	border-color: rgb(165, 226, 72);
}
.site_header {
	position: fixed;
	left: 0;
	right: 0;
	/*display: flex;
	justify-content: space-between;
	align-items: center;*/
	width: 100%;
	height: 4rem;
	padding: 0 1rem;
	box-sizing: border-box;
	/*border-bottom: 1px solid rgb(96, 187, 36);*/
	border-bottom: 1px solid #fcfcfc;
	border-bottom: 1px solid rgba(235, 234, 234, 0.5);
	background-color: rgba(255, 255, 255, .8);
	background-color: #fff;
	z-index: 100;
}
.site_header::before {
	position: absolute;
	left: -5px;
	content: "";
	height: 3px;
	background: linear-gradient(to right, rgba(122, 251, 165, 0.5), rgba(252, 255, 87, 0.8) );
	background: linear-gradient(30deg, rgba(230, 245, 245, 0.5) 20%, rgba(252, 255, 87, 0.8) , rgba(122, 251, 165, 0.5));
	background: var(--gradation2);
	transform: rotate(-15deg);
	z-index: -100;
}
.site_header h1 {
	display: flex;
	align-items: center;
}
.site_header h1 a {
	/*color: #65797e;*/
	color: var(--accent-gray);
	font-size: 1.5rem;
	font-weight: 300;
}
.site_header h1 a > img {
	vertical-align: bottom;
}
.navi_global {
	display: flex;
	list-style-type: none;
	margin: 0;
}
.navi_global > li {
	margin: 0 1rem 0 0;
}
.navi_global a {
	position: relative;
	display: block;
	padding-left: 1.2rem;
	color: var(--link-green);
	&:hover {
		color: var(--link-green-hover);
	}
}
/*.navi_global a.item_nav_toplv::before {*/
.navi_global a.item_nav_toplv.current::before,
.navi_global a.item_nav_toplv.current_parent::before  {
	position: absolute;
	bottom: 3px;
	left: 0;
	content: "";
	display: inline-block;
	width: 1rem;
	height: 1rem;
	background-image: url('/wp-content/themes/atelierkaminoge/img/bullet_c_g-min.png'),
	linear-gradient(220deg, rgba(106, 254, 80, 0.8), rgba(217, 255, 166, 0.8));
	/*linear-gradient(349deg, #ffe300, #ff7e00, #f04100, #d100ff, #3300ff)*/
	background-repeat: no-repeat;
	background-size: contain;
	background-origin: padding-box;
	background-blend-mode: hard-light;
	mix-blend-mode: multiply;
}
.navi_global a.item_nav_topsub.current {
	position: relative;
	/*border-bottom: 2px solid rgba(106, 254, 80, 0.8);*/
}
.navi_global a.item_nav_topsub.current::after {
	position: absolute;
	left: 1rem;
	bottom: -2px;
	content: '';
	width: 80%;
	height: 2px;
	background: var(--gradation1);
}
/*
.navi_global a.current::before {
	background-image: url('/wp-content/themes/atelierkaminoge/img/bullet_c_g-min.png'),	
	linear-gradient(229deg, rgb(255, 200, 0) 80%, #00f2ff);
	/*linear-gradient(229deg, rgb(255, 200, 0) 10%, #00ffd0 10%, #00f2ff);
}*/
/*.navi_global li:last-child {
	margin: 0;
}*/
.navi_sub {
	list-style: none;
}
.site_main {
	min-height: 86vh;
	min-height: 70vh;
	padding: 4rem 0 2rem;
	box-sizing: border-box;
}
.site_contents {
	padding: 0 1rem;
}
.site_contents > section {
	background-color: rgba(255, 255, 255, .6);
}
.site_footer {
	position: relative;
	margin: 0 1rem;
}
.site_footer::before,
.area_copyright::before {
	position: absolute;
	top: -3px;
	left: 0;
	content: "";
	width: 100%;
	height: 2px;
	background: linear-gradient(135deg, rgba(244, 209, 91, .5) 40%,rgba(44, 238, 144, .5) 60%,rgba(145, 251, 83, .5) 80%, rgba(69, 255, 18, 0.5) 100%);
	background: linear-gradient(135deg, rgba(223, 253, 253, 0.5) 20%, rgba(244, 209, 91, .5) 40%,rgba(44, 238, 144, .5) 60%,rgba(145, 251, 83, .5) 80%, rgba(119, 168, 105, 0.5) 100%);
	background: var(--gradation2);
}
.area_menu_footer {
	display: flex;
	font-size: 0.9rem;
}
.sec_menu_footer {
	padding: 1rem;
}
.list_menu_footer,
.sublist_menu_footer {
	list-style: none;
}
.list_menu_footer {
	padding: 0;
}
.sublist_menu_footer {
	padding: 0.5rem 0 0 1rem;
}
.list_menu_footer li,
.sublist_menu_footer li {
	margin: 0 0 0.5rem;
}
.list_menu_footer a {
	color: var(--link-green);
}
.area_copyright {
	position: relative;
	height: 3rem;
	color: var(--accent-gray);
	line-height: 3;
	small {
		font-size: 0.9rem;
		font-style: italic;
		vertical-align: text-bottom;
	}
}

/* layout common ------ */
.deck2_img_text {
	display: flex;
	flex-direction: column;
	/*justify-content: space-between;*/
	margin: 0 0 2rem;
	.deck2_left {
		padding-right: 2rem;
	}
	p.deck2_right {
		width: 100%;
		margin: 0 0 1rem;
	}
}
@media (min-width: 1200px) {
	.deck2_img_text {
		flex-direction: row;
		flex-wrap: nowrap;
	}
}
/* headings ------ */
.h-1 {
	margin: 0 0 1rem;
	span {
		position: relative;
		&::after {
			position: absolute;
			bottom: 8px;
			right: -2rem;
			content: '';
			display: inline-block;
			width: 1.8rem;
			height: 6px;
			background: var(--gradation4);
			transform: rotate(-56deg) skew(-20deg);
		}
	}
}
.h_band_gray {
	margin: 0 0 1rem;
	background: var(--clr-gray-l);
}
.h_ginkgo {
	position: relative;
	padding: 0 0 0 2rem;
	&::before {
		position: absolute;
		top: 0;
		left: 0;
		content: '';
		width: 2.4rem;
		height: 2.4rem;
		/*background: url(/wp-content/themes/atelierkaminoge/img/bg_ginkgo01_252-min.png), linear-gradient(rgba(255, 249, 163, 0.6), rgba(247, 247, 237, 0.6));*/
		/*background: url(/wp-content/themes/atelierkaminoge/img/bg_ginkgo02-2_w126-min.png);*/
		background: url(/wp-content/themes/atelierkaminoge/img/bg_ginkgo02_w126-min.png);
		background: url(/wp-content/themes/atelierkaminoge/img/bg_ginkgo03-min.png);
		background: url(/wp-content/themes/atelierkaminoge/img/bg_ginkgo03_w126-min.png);
		background-position: 0 center;
		background-repeat: no-repeat;
		background-size: contain;
		background-origin: padding-box;
		background-blend-mode: hard-light;
		mix-blend-mode: multiply;
	}
}
.h_underline {
	position: relative;
	display: inline-block;
	&:before {
		position: absolute;
		bottom: 0.1rem;
		left: 0;
		content: '';
		display: inline-block;
		width: 125%;
		height: 2px;
		z-index: -10;
	}
}
@media (max-width: 767px) {
	.h_underline {
		&:before {
			width: 120%;
		}
	}
}
.h_underline_gradation {
	&:before {
		background-image: var(--gradation1);
	}
}
.h_underline_gray {
	&:before {
		background-image: linear-gradient(rgba(100, 100, 100, .3), rgba(100, 100, 100, .3) 50%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .1));
	}
}
.h_underline_lavender {
	&:before {
		background-image: var(--gradation-lavender);
	}
}
.h_underline_orange {
	&:before {
		background-image: var(--gradation-orange);
	}
}

/* list ------ */
/* blog index */
.list_index {
	list-style-type: none;
	margin: 0 0 1rem;
	padding: 1rem 0 1rem 1.5rem;
	li {
		position: relative;
		margin: 0 0 1.2rem;
		line-height: 1.5;
		time {
			position: relative;
			display: inline-block;
			margin: 0 0 0.5rem;
			letter-spacing: 2px;
			font-family: 'Noto Serif JP';
			font-size: 0.9rem;
			font-style: oblique;
			&::after {
				position: absolute;
				bottom: 1px;
				left: 1px;
				content: '';
				display: inline-block;
				width: 100%;
				height: 1px;
				background: var(--accent-gray);
				margin: 1px 0 0;
			}
		}
		a {
			display: block;
			padding: 0 0 0 1rem;
			color: var(--link-green);
			&:hover {
				color: var(--link-green-hover);
			}
		}
	}
	li::before,
	li::after {
		position: absolute;
		content: '';
	}
	li::before {
		top: 3px;
		left: -1.5rem;
		width: 1rem;
		height: 1rem;
		border-top: 2px solid var(--clr-lavender);
		border-radius: 50%;
		transform: rotate(-45deg);
	}
	li::after {
		top: 1.2rem;
		left: -1rem;
		width: 1px;
		height: 3rem;
		background-color: var(--clr-lavender);
	}
}
/* list with date */
.list_date-title {
	list-style-type: none;
}
.list_date-title li {
	display: flex;
	align-items: end;
	margin: 0 0 0.3rem;
	line-height: 1.5;
}
.list_date-title time {
	/*display: inline-block;*/
	min-width: 8rem;
	margin: 0 1rem 0 0;
}
/* list color circle */
.list_cc {
	list-style-type: none;
	margin: 0 0 1rem;
	padding: 0;
	li {
		position: relative;
		padding: 0 0 0 1.5rem;
		margin: 0 0 1rem;
		&::before {
			position: absolute;
			top: 0.4rem;
			left: 0;
			display: inline-block;
			content: '';
			width: 0.8rem;
			height: 0.8rem;
			border-radius: 50%;
		}
	}
}

/* list red */
.list_red {
	li {
		&::before {
			background-image: radial-gradient(
					circle at 50% 0,
					rgb(255 0 0 / 50%),
					rgb(255 0 0 / 0%) 70.71%
				),
				radial-gradient(
					circle at -50% 0,
					rgb(255 0 0 / 50%),
					rgb(255 0 0 / 0%) 70.71%
				);
		}
	}
}
/* list gray */
.list_gray {
	li {
		&::before {
			background-image: radial-gradient(
					circle at 50% 0,
					rgb(100 100 100 / 50%),
					rgb(0 0 0 / 0%) 70.71%
				),
				radial-gradient(
					circle at -50% 0,
					rgb(100 100 100 / 50%),
					rgb(0 0 0 / 0%) 70.71%
				);
		}
	}
}
/* list lavender */
.list_lavender {
	li {
		&::before {
			background-image: radial-gradient(
					circle at 70% 0,
					rgba(119, 150, 236, 0.414),
					rgb(0 0 0 / 0%) 70.71%
				),
				radial-gradient(
					circle at -60% 0,
					rgba(150, 164, 210, 0.5),
					rgb(0 0 0 / 0%) 70.71%
				);
		}
	}
}
/* list orange */
.list_orange {
	li {
		&::before {
			background-image: radial-gradient(
					circle at 70% 0,
					rgba(255, 139, 16, 0.414),
					rgb(0 0 0 / 0%) 70.71%
				),
				radial-gradient(
					circle at -60% 0,
					rgba(251, 197, 114, 0.5),
					rgb(0 0 0 / 0%) 70.71%
				);
		}
	}
}
/* list order */
.list_order {
	list-style-type: none;
	margin: 0 0 1rem;
	padding: 0;
	counter-reset: listnum;
	> li {
		position: relative;
		padding: 0 0 0 1.5rem;
		margin: 0 0 1rem;
		&::before {
			position: absolute;
			top: 0;
			left: 0;
			display: inline-block;
			counter-increment: listnum;
			content: counter(listnum)'.';
			width: 0.8rem;
			height: 0.8rem;
		}
	}
}
.list_order_i {
	li {
		&::before {
			font-style: italic;
		}
	}
}
/* list FAQ */
.list_faq {
	list-style-type: none;
	margin: 0 0 1rem;
	padding: 0;
	counter-reset: faqnum;
	li {
		position: relative;
		padding: 3rem 0 0 3.5rem;		/* setting for insite links */
		margin: 0;
		&::before {
			position: absolute;
			top: 3.5rem;
			left: 0;
			display: inline-block;
			counter-increment: faqnum;
			content: 'Q'counter(faqnum)'. ';
			width: 2rem;
			height: 2rem;
			color: var(--clr-red);
			font-size: 1.5rem;
			font-weight: 200;
		}
	}
}
/* list tile */
.tile_figure {
	display: flex;
	flex-wrap: wrap;
}
.tile_figure .frame {
	position: relative;
	display: block;
	width: 145px;
	height: 200px;
	margin: 0 0 2rem;
	padding: 0 1rem;
	border-left: 1px solid var(--clr-lavender);
	transition: all .2s ease-in-out;
	&:hover {
		background-color: var(--clr-lavender_l);
	}
	&::after {
		position: absolute;
		top: 0;
		right: -1px;
		display: inline-block;
		content: '';
		width: 1px;
		height: 100%;
		background: var(--clr-lavender);	
	}
}
.tile_figure a figure {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	width: auto;
	height: 100%;
}
.tile_figure figure .label_number {
	position: absolute;
	left: -0.5rem;
	bottom: 2.5rem;
	font-size: 2rem;
	font-weight: 300;
	text-shadow: 1px 0 0 #fff;
}
.tile_figure figure figcaption {
	line-height: 1.2;
}

/* curriculumなどの画像レイアウト ------ */
.tile_figure {
	figure {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 350px;
		margin: 0 0 2rem;
		img {
			margin: 0 auto 1rem;
		}
	}
	> figure {
		padding: 0 2rem 0 0;
		> figcaption {
			padding: 3px 0 0;
			border-top: 1px solid var(--clr-lavender);
		}
	}
}
.dlg_content {
	.tile_figure {
		flex-wrap: wrap;
		justify-content: space-between;
		> figure {
			width: auto;
			padding: 0;
		}
	}
}
@media (max-width: 767px) {
	.tile_figure {
		justify-content: center;
	}
	.dlg_content {
		.tile_figure {
			justify-content: center;
			> figure {
				width: 350px;
			}
		}
	}
}
@media (max-width: 991px) {
	.tile_figure {
		> figure {
			padding: 0;
		}
	}
}
@media (min-width: 992px) {
	.dlg_content {
		.tile_figure {
			flex-wrap: wrap;
		}
	}
}

/* table ----- */
.tbl_timetable {
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0 0 1rem;
	th, td {
		padding: 3px 0.5rem;
		border-bottom: 1px solid var(--clr-lavender);
	}
}
/* dialog ----- */
.dlg_ol {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .5);
	z-index: 100;
	.btn_close {
		position: absolute;
		display: inline-block;
		width: 2rem;
		height: 2rem;
		cursor: pointer;
		z-index: 150;
		&::before,
		&::after {
			position: absolute;
			top: 50%;
			display: inline-block;
			content: '';
			width: 100%;
			height: 2px;
			background-color: #fff;
		}
		&::before {
			left: 0;
			transform: rotate(45deg);
		}
		&::after {
			right: 0;
			transform: rotate(-45deg);
		}
	}
	.ol_dlg_content {
		/*
		position: absolute;
		*/
		/*top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);*/
		/*
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		*/
		height: max-content;
		max-height: 100vh;
		overflow: auto;
		/*background-color: #fff;*/
		z-index: 110;
		.dlg_content {
			padding: 1rem;
			.flex_jc_center {
				img {
					border: 1px solid #fff;
				}
			}
		}	
	}
}
.dlg_close {
	height: 0 !important;
	overflow: hidden;
}
@media (min-width: 1400px) {
	.ol_dlg_content {
		/*
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		*/
		width: 70%;
		/*height: 70vh;*/
	}
}
@media (max-width: 1399px) {
	.ol_dlg_content {
		/*
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		*/
		width: 80%;
		/*height: 80vh;*/
	}
}
@media (min-width: 1200px) {
	.btn_close {
		top: 5rem;
		right: 5rem;
	}
}
@media (max-width: 1200px) {
	.btn_close {
		top: 2rem;
		right: 2rem;
	}
}
@media (min-width: 992px) {
	.btn_close {
		/*top: 5rem;
		right: 5rem;*/
		&::before,
		&::after {
			background-color: #fff;
		}
	}
}
@media (max-width: 991px) {
	.dlg_ol {
		.btn_close {
			/*top: 1rem;
			right: 1rem;*/
			/*
			&::before,
			&::after {
				background-color: var(--accent-gray);
			}*/
		}
		.ol_dlg_content {
			height: auto;
			overflow: auto;
		}
	}
}
@media (max-width: 767px) {
	.dlg_ol {
		.btn_close {
			top: 0.5rem;
			right: 0.5rem;
			background-color: rgba(0, 0, 0, .5);
		}
		.ol_dlg_content {
			width: 100%;
			.dlg_content {
				padding: 1.5rem;
			}
		}
	}
}
/* border ----- */
.border-center {
	position: relative;
}
.border-center::after {
	content: "";
	position: absolute;
	top: 1.2rem;
	left: 2.3rem;
	display: block;
	width: calc(100% - 2.3rem);
	height: 2px;
	padding: 0 0 0 2.3rem;
	background-color: rgb(241, 211, 147);
	background: linear-gradient(135deg, rgba(244, 209, 91, 1) 40%,rgba(44, 238, 144, 1) 60%,rgba(145, 251, 83, 1) 80%, rgba(69, 255, 18, 1) 100%);
	background: var(--gradation2);
	box-sizing: border-box;
	z-index: -10;
}
.border-center .h-txt {
	display: inline-block;
	padding: 0 1rem 0 0;
	background-color: #fff;
}

/* button ----- */
button {
	cursor: pointer;
}
.btn_drop {
	padding: 1rem 3rem;
	border: 1px solid #fff;
	border-radius: 34% 61% 56% 40% / 62% 40% 54% 35%;
	color: var(--accent-gray);
	transition: all .3s ease-out;
	&:hover {
		opacity: 0.8;
	}
}
.btn_drop2 {
	background: var(--gradation2);
	&:hover {
		border: 1px solid var(--clr-lavender_l);
	}
}
.btn_drop3 {
	background: var(--gradation3);
	&:hover {
		border: 1px solid var(--clr-lavender_l);
	}
}

/* icon ----- */
/* https://marie-web.design/blog/text-gradation/
https://digipress.info/tech/gradient-border-with-css/ */
.icon_i {
	position: relative;
	display: inline-block;
	width: 1.8rem;
	height: 1.8rem;
	margin: 0 0.5rem 0 0;
	background: linear-gradient(135deg, rgb(67, 190, 51) 40%,rgb(44, 238, 144) 60%,rgb(145, 251, 83) 80%,rgb(55, 214, 10) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1.8rem;
	text-align: center;
	vertical-align: text-bottom;
}
.icon_i::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	border-radius: 1rem;
	border: 3px solid transparent;
	/*background: linear-gradient(135deg, rgb(86, 228, 67) 40%,rgb(44, 238, 144) 60%,rgb(195, 251, 98) 80%,rgb(155, 253, 128) 100%) border-box border-box;*/
	background: linear-gradient(30deg, rgba(194, 241, 251, 0.7) 20%, rgba(252, 255, 87, 0.8) , rgba(122, 251, 165, 0.5)) 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;	
}
/* icon letter */
.icon_letter {
	position: relative;
	display: inline-block;
}

/* breadcrumb */
.breadcrumb__list {
	list-style-type: none;
	padding: 0 0 0 10rem;
}
.breadcrumb__item {
	display: inline-block;
	margin: 0 0.5rem 0 0;
}
.breadcrumb__item::after {
	content: ">";
	margin: 0 0 0 0.5rem;
}
.breadcrumb__item:last-child:after {
	content: "";
}
@media (max-width: 767px) {
	.site_header {
		width: 100%;
		height: 3rem;
		box-sizing: border-box;
	}
	.nav_ham {
		position: absolute;
		top: 12px;
		right: 12px;
		display: block;
		width: 32px;
		height: 20px;
		cursor: pointer;
	}
	.cross {
		z-index: 100;
	}
	.nav_ham::before,
	.nav_ham::after {
		position: absolute;
		left: 0;
		display: block;
		width: 32px;
		border-top: 2px solid #888;
		content: "";
		transition: all 0.8s ease-out;
	}
	.nav_ham::before {
		top: 1px;
	}
	.nav_ham.cross::before {
		top: 9px;
		transform: rotate(405deg);
	}
	.nav_ham::after {
		bottom: 1px;
	}
	.nav_ham.cross::after {
		bottom: 9px;
		transform: rotate(-405deg);
	}
	.wrapper_site_nav {
		position: absolute;
		top: 0;
		/*right: 0;*/
		left: 0;
		/*display: grid;*/
		width: 100%;
		background: rgba(255, 255, 255, .9);
		/*transition: .3s grid-template-columns ease-out, .3s grid-template-rows ease-out;*/
		/*transition: .5s grid-template-rows ease-out, .5s height ease-out;
*/		transition: .5s height ease-out;
		z-index: 50;
	}
	.parallel + .wrapper_site_nav {
		grid-template-columns: 0fr;
		grid-template-rows: 0fr;
		height: 0vh;
		overflow: hidden;
	}
	.parallel + .wrapper_site_nav .site_nav {
	}
	.cross + .wrapper_site_nav {
		/*grid-template-columns: 1fr;
		grid-template-rows: 1fr;*/
		height: 100vh;
		height: 100%;
		/*background: rgba(255, 255, 255, .9);*/
	}
	.site_nav {
		/*display: none;*/
		/*overflow: hidden;*/
	}
	/*.cross + .wrapper_site_nav .navi_global {*/
	.wrapper_site_nav .navi_global {
		flex-direction: column;
		padding: 3rem;
	}
	.wrapper_site_nav .navi_global li {
		margin: 0 0 1rem;
		font-weight: 400;
	}
	.wrapper_site_nav .navi_global .navi_sub {
		padding: 1rem 0 0 1rem;
	}
	.area_menu_footer {
		flex-direction: column;
	}
	.list_menu_footer_drop {
		margin: 0 0 1rem;
		padding: 0 0 0 1rem;
	}
}
@media (min-width: 768px) {
	.site_header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}	
	#nav_ham {
		display: none;
	}
	.navi_global {
		position: relative;
		padding: 0.5rem 1rem;
		/*background-color: rgba(255, 245, 197, 0.3);
		border: 1px solid #f9f3d8;*/
	}
	.navi_global::after {
		position: absolute;
		bottom: -8px;
		right: 0;
		content: "";
		width: 110%;
		height: 3px;
		background: linear-gradient(to left, rgba(148, 255, 140, 0.8), rgba(217, 255, 78, 0.5), rgba(255, 204, 2, 0.5) );
		background: linear-gradient(30deg, rgba(230, 245, 245, 0.7) 20%, rgba(184, 249, 179, 0.8), rgba(217, 255, 78, 0.5), rgba(255, 204, 2, 0.5) );
		background: var(--gradation2);
	}
	.navi_global a {
		/* https://min-max-calculator.9elements.com/ */
		font-size: clamp(0.75rem, 0.659rem + 0.45vw, 1rem);
		font-size: clamp(0.813rem, 0.744rem + 0.34vw, 1rem);	/* min 13px max 16px */
	}
	/* https://coliss.com/articles/build-websites/operation/css/css-transition-from-height-0-to-auto.html */
	.has_sub {
		position: relative;
		/*overflow: hidden;*/
	}
	.wrapper_navi_sub {
		position: absolute;
		top: 1rem;
		left: 0;
		display: grid;
		grid-template-rows: 0fr;
		min-width: 10rem;
		transition: .3s grid-template-rows ease-out;
		z-index: 100;
	}
	.has_sub:hover .wrapper_navi_sub {
		grid-template-rows: 1fr;
	}
	.navi_sub {
		padding: 0.5rem 0 0;
		overflow-y: hidden;
	}
	.has_sub:hover .navi_sub {
		border-bottom: 1px solid #efefef;
	}
	.navi_sub li {
		padding: 6px;
		background: rgba(255, 255, 255, .9);
	}
	.sec_menu_footer {
		width: 30%;
	}
	.list_menu_footer_drop {
		padding: 1.5rem 0 0 0;
	}
}
@media (max-width: 991px) {
	.site_header::before {
		bottom: 1rem;
		width: 60vw;
	}
}
@media (min-width: 992px) {
	.site_header::before {
		left: -3rem;
		bottom: 0;
		width: 40vw;
	}
}
@media (max-width: 1199px) {
	.site_contents {
		padding: 2rem 1.5rem 0;
	}	
}
@media (min-width: 1200px) {
	.breadcrumb, .site_main, .site_footer {
		width: 90%;
		margin: 0 auto;
		padding: 0;
		box-sizing: border-box;
	}
	.site_header {
		width: 100%;
		padding: 0 5%;
	}
	.site_main {
		padding: 4rem 0 2rem;
	}
	.site_contents {
		padding: 3rem 0 0;
	}	
}
@media (min-width: 1400px) {
	.site_main, .site_footer {
		width: 80%;
		margin: 0 auto;
		box-sizing: border-box;
	}
	.site_header {
		width: 100%;
		padding: 0 10%;
	}
}

/* utility */
.none {
	display: none;
}
.display_block {
	display: block !important;
}
.flex_wrap {
	display: flex !important;
	flex-wrap: wrap !important;
}
.flex_jc_center {
	justify-content: center !important;
}
.mt_1rem {
	margin-top: 1rem !important;
}
.mb_1rem {
	margin-bottom: 1rem !important;
}
.mb_2rem {
	margin-bottom: 2rem !important;
}
.mb_3rem {
	margin-bottom: 3rem !important;
}
.pr_1rem {
	padding-right: 1rem !important;
}.pb_1rem {
	padding-bottom: 1rem !important;
}
.pl_1rem {
	padding-left: 1rem !important;
}
.bd_top_gray2 {
	border-top: 2px solid var(--accent-gray) !important;
}
.bg_fff {
	background-color: #fff !important;
}

.time_term {
	display: inline-block;
	width: 7rem;
	margin: 0 0.5rem 0.3rem 0;
	&+ span {
		display: inline-block;
	}
}