@charset "UTF-8";
/* common.css */

header *,
footer *,
main *,
header *:before,
footer *:before,
main *:before,
header *:after,
footer *:after,
main *:after    {
	font-family: 'Noto Sans JP', sans-serif;
	font-feature-settings: "palt";
	letter-spacing: .12em;
	box-sizing: border-box;
	border-collapse: collapse;
}
:root {
	margin-top: 0 !important;
}
::selection {
	color: #000;
	background-color: rgba(255, 238, 107,9);
}


/* ===== Wrap ===== */
.wrap {
	width: 100%;
	max-width: 1700px;
	margin-left:  auto;
	margin-right: auto;
	padding: 0 60px;
	padding-left:  clamp(40px,8vw,100px);
	padding-right: clamp(40px,8vw,100px);
}
.flex_box {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
}


/* ===== color ===== */
.bg_gray { background-color:#f5f5f5; }


/* ===== Font Family ===== */
.ff_notos { font-family:'Noto Sans JP', sans-serif !important; }


/* ===== text ===== */
html,
h1,
h2,
h3,
h4,
a { color:inherit; }

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: bold;
	line-height: 1.5;
}
ul,
li,
dl,
dd,
dt,
a,
p {
	font-size: 16px;
	font-size: clamp(14px,1.4vw,16px);
	line-height:   1.7em;
	letter-spacing: .1em;
}
p       { text-align:justify;   }
span    { letter-spacing:.1em;  }
a       { text-decoration:none; }
a:hover { color:inherit; text-decoration:none; }

.fw_normal { font-weight:normal !important; }
.fw_500    { font-weight:500 !important;    }
.fw_bold   { font-weight:bold !important;   }

.align_left    { text-align:left !important;    }
.align_right   { text-align:right !important;   }
.align_center  { text-align:center !important;  }
.align_justify { text-align:justify !important; }

.text_indent { text-indent:-1em; padding-left:1em; }

.small { font-size:.75em; }

span.small { font-size:12px; }
.copyright { font-size:12px; text-align:center; }


/* ===== 表示・非表示 ===== */
.pc_blk { display:block !important; }
.sp_blk { display:none !important;  }

.pc_inline { display:inline !important; }
.sp_inline { display:none !important;   }

.flex_box.pc_blk { display:flex !important; }
.flex_box.sp_blk { display:none !important; }


/* ===== 余白 ===== */
/* min */
.marXXL_T { margin-top:clamp(100px,10.417vw,200px) !important; }
.marXL_T  { margin-top:clamp(75px,7.813vw,150px) !important; }
.marL_T   { margin-top:clamp(45px,4.688vw,90px) !important;  }
.marM_T   { margin-top:clamp(30px,3.125vw,60px) !important;  }
.marS_T   { margin-top:clamp(20px,2.083vw,40px) !important;  }

.marXXL_B { margin-bottom:clamp(100px,10.417vw,200px) !important; }
.marXL_B  { margin-bottom:clamp(75px,7.813vw,150px) !important; }
.marL_B   { margin-bottom:clamp(45px,4.688vw,90px) !important;  }
.marM_B   { margin-bottom:clamp(30px,3.125vw,60px) !important;  }
.marS_B   { margin-bottom:clamp(20px,2.083vw,40px) !important;  }

.padXXL_T { padding-top:clamp(100px,10.417vw,200px) !important; }
.padXL_T  { padding-top:clamp(75px,7.813vw,150px) !important; }
.padL_T   { padding-top:clamp(45px,4.688vw,90px) !important;  }
.padM_T   { padding-top:clamp(30px,3.125vw,60px) !important;  }
.padS_T   { padding-top:clamp(20px,2.083vw,40px) !important;  }

.padXXL_B { padding-bottom:clamp(100px,10.417vw,200px) !important; }
.padXL_B  { padding-bottom:clamp(75px,7.813vw,150px) !important; }
.padL_B   { padding-bottom:clamp(45px,4.688vw,90px) !important;  }
.padM_B   { padding-bottom:clamp(30px,3.125vw,60px) !important;  }
.padS_B   { padding-bottom:clamp(20px,2.083vw,40px) !important;  }

.mar0_T   { margin-top: 0px !important; }
.pad0_T   { padding-top:0px !important; }
.mar0_B   { margin-bottom: 0px !important; }
.pad0_B   { padding-bottom:0px !important; }



/* ===== ページリンク ===== */
.page_link {
	margin-top:  calc(clamp(50px,8vw,80px)*-1);
	padding-top: clamp(50px,8vw,80px);
}
@media screen and (max-width:768px) {
	.page_link {
		margin-top: -70px;
		padding-top: 70px
	}
}



/* ===== 画像 ===== */
img { width:100%; height:auto; }


/* ===== Header menu ===== */
header {
	width:  100%;
	height: 10vw;
	max-height: 100px;
	min-height:  70px;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	top: 0;
	padding: 20px 40px;
	padding: clamp(15px,2vw,20px) clamp(20px,2vw,40px) clamp(15px,2vw,20px) clamp(15px,2vw,40px);
	box-shadow: 0px 5px 5px -5px rgb(0 0 0 / 2%);
	background-color: #fff;
	z-index: 1000;
    transition: transform 0.3s ease;
}

/* ----- ▼ スクロールでヘッダー表示・スクロールバックでヘッダー非表示 ----- */
header.hide-on-scroll {
    transform: translateY(-100%);
}
/* ----- ▲ スクロールでヘッダー表示・スクロールバックでヘッダー非表示 ----- */

.header_logo {
	width: 25%;
}
.header_logo > a {
	width: 100%;
	height: auto;
	display: block;
}
.header_logo > a img {
	height: 100%;
	max-height: 45px;
	object-fit: contain;
	object-position: left;
}
#g-nav {
	width: 75%;
	padding-left: 20px;
	padding-left: min(2vw,20px);
}
#g-nav-list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
}
#g-nav ul {
	display: flex;
	flex-wrap: nowrap;
}
#g-nav li:not(:first-of-type) {
	margin-left: 1em;
	margin-left: clamp(1em,1.5vw,30px);
}
.header_btn {
	margin-left: 2em;
	margin-left: clamp(1.75em,2vw,40px);
}
#g-nav li,
.header_btn {
	font-size: clamp(11.5px,1.2vw,16px);
}
#g-nav li a,
.header_btn a {
	font-size: 1em;
}
#g-nav li a {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
}
#g-nav li a:before {
	content: "";
	width:  .45em;
	height: .45em;
	min-width:  .45em;
	min-height: .45em;
	display: block;
	margin-right: .65em;
	border-radius: 50px;
	background-color: #009e96;
	opacity: 0;
	transition: opacity .3s;
}
#g-nav li a:hover:before {
	opacity: 1;
}
/* ボタン */
.header_btn a {
	line-height: 1;
	display: inline-block;
	padding: 1em;
	padding-left:  clamp(1em,1.5vw,30px);
	padding-right: clamp(1em,1.5vw,30px);
	color: #fff;
	background-color: #009e96;
	border-radius: 50px;
	transition: color .3s, background-color .3s;
}
.header_btn a:hover {
	color: #000;
	background-color: #ffee6b;
}





/* ===== footer contact ===== */
.pad_last {
	padding-bottom: 300px;
	padding-bottom: clamp(170px,15.625vw,300px);
}
.footer_contact {
	position: relative;
	padding-top: 90px;
	z-index: 5;
	margin-top: -150px;
	margin-top: calc(clamp(75px,7.813vw,150px)*-1);
}
.footer_contact:before {
	content: "";
	width:  100%;
	height: 100%;
	display: block;
	position: absolute;
	top:  0;
	left: 0;
	background-image:  url(../../img/common/footer_contact.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100%;
	z-index: -1;
}
.fc_cont_wrap {
	width: fit-content;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	margin-left:  auto;
	margin-right: auto;
	padding: 50px;
	border-radius: 20px;
	background-color: #fff;
}
.footer_contact h2 {
	margin-bottom: 0;
	padding-right: 50px;
	padding-right: clamp(30px,5vw,50px);
}
.footer_contact h2 img {
	margin-bottom: 0 !important;
}


/* ===== マル アニメーション ===== */
.footer_contact {
	/* add 動きのために */
	height: 60vw;
	min-height: 460px;
	padding-top: 15vw;
	overflow: hidden;
}
.fc_bg_maru  {
	content: "";
	width:  100%;
	height: 100%;
	display: block;
	position: absolute;
	bottom:  0;
	left: 0;
	background-image:  url(../../img/common/fc_bg.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
	transform-origin: center bottom;
	pointer-events: none;
	z-index: -2;
    transform-origin: center bottom;
    transform: scale(0); /* 初期状態 */
	/* 追加 */
	height: 22vw;
	min-height: 170px;
	background-size: 120% 90%;
	transform: scale(0);
	transform-origin: center bottom;
	/* 追加の追加 */
	background-size: 110% 100%;
	margin-bottom: max(110px,14vw);
}

/* アニメーション始まったら */
.fc_bg_maru.animate-scale {
    animation: toFinalScale 0.5s ease-out forwards;
	animation-delay: .5s;
}
@keyframes toFinalScale {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(var(--endScale));
    }
}



@media screen and (min-width:950px) {
	.footer_contact {
		height: 45vw;
		min-height: 500px;
		padding-top: max(110px,15vw);
	}
	.fc_bg_maru  {
		height: 15vw;
		min-height: 170px;
	}
}




/* ===== ボタン（もっと見る・詳しく見る） ===== */
.btn_more a,
.btn_back a,
.btn_contact a {
	width: 240px;
	font-size: 16px;
	font-weight: 500;
	display: inline-flex;
	position: relative;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	padding: .5em;
	border-radius: 100px;
	border: 1px solid #ccc;
	background-color: #fff;
	overflow: hidden;
}
.btn_contact a {
	width: 27vw;
	max-width: 300px;
	min-width: 270px;
	line-height: 1.3;
	padding-left: 2em;
}
.btn_more a:after,
.btn_back a:after,
.btn_contact a:before  {
	content: "";
	width:  0;
	height: 0;
}
/* ===== ボタン(more・back)のホバーアニメーション ===== */
.btn_more a:before,
.btn_back a:before {
	content: none;
}
.btn_more .btn_text,
.btn_back .btn_text,
.btn_contact .btn_text {
	position: relative;
	z-index: 2;
}
.btn_more .btn_maru,
.btn_back .btn_maru {
	width:  3em;
	height: 3em;
	min-width:  3em;
	min-height: 3em;
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.btn_more .btn_maru:before,
.btn_more a .btn_maru:after,
.btn_back .btn_maru:before,
.btn_back a .btn_maru:after,
.btn_contact a .btn_maru:before,
.btn_contact a .btn_maru:after {
	content: "";
	width:  100%;
	height: 100%;
	display: block;
	position: absolute;
	background-color: #ffee6b;
	border-radius: 100px;
	transition: transform .3s;
	z-index: 2;
}
.btn_more a .btn_maru:after,
.btn_back a .btn_maru:after,
.btn_contact a .btn_maru:after {
	width:  500px;
	height: 500px;
	transform: scale(0);
	transition: transform cubic-bezier(0.23, 1, 0.32, 1) .5s;
	border-radius: 500px;
	background-color: #ffee6b;
	z-index: 1;
}
.btn_arrow {
	width:  24px;
	height: 12px;
	min-width:  24px;
	min-height: 24px;
	position: relative;
	z-index: 3;
}
.btn_arrow .st0 {
	fill: none;
	stroke: #000;
	stroke-miterlimit: 10;
}
/* hover */
.btn_more a:hover .btn_maru:before,
.btn_back a:hover .btn_maru:before,
.btn_contact a:hover .btn_maru:before {
	background-color: #fff;
	transform: scale(1.1);
}
.btn_more a:hover .btn_maru:after,
.btn_back a:hover .btn_maru:after,
.btn_contact a:hover .btn_maru:after {
	transform: scale(1);
}


/* ===== ボタン(contact)のホバーアニメーション ===== */
.btn_contact a .btn_maru {
	content: "";
	width:  3em;
	height: 3em;
	min-width:  3em;
	min-height: 3em;
	position: relative;
	margin-left: .75em;
	display: flex;
	align-items: center;
	justify-content: center;
}
.btn_contact .btn_text {
	color: #fff;
	transition: color .3s;
}
.btn_contact a:hover .btn_text {
	color: #000;
}


/* ===== ボタン（Contact） ===== */
.btn_contact a {
	width: 100%;
	min-width: inherit;
	border: none;
	color: #fff;
	background-color: #009e96;
}
.btn_contact a:after {
	margin-left: 1em;
}


/* ===== footer ===== */
.footer_wrap {
	padding-top:    100px;
	padding-bottom: 100px;
	color: #fff;
	background-color: #313637;
}
.footer_flex {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: space-between;
}
.footer_flex > div {
	width: 50%;
}

/* --- footer 企業情報 --- */
.footer_logo {
	max-width: 300px;
	margin-bottom: 40px;
}
.footer_address,
.footer_tel {
	font-size: 14px;
}
.footer_tel {
	color: #fff;
	transition: color .3s;
}
.footer_tel:hover {
	color: #009e96;
}

.footer_address {
	margin-bottom: 1em;
}


/* --- footer メニュー --- */
.footer_nav {
	width: 50%;
	max-width: 470px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
}
.footer_nav li {
	width: calc(100%/2 - 3%);
	font-size: 16px;
}
.footer_nav a {
	width: 100%;
	font-size: 1em;
	line-height: 1;
	display: inline-block;
	padding-left: .65em;
	padding-bottom: 1em;
	color: #fff;
	border-bottom: 1px solid #726d6b;
	transition: color .3s;
}
.footer_nav a:hover {
	color: #009e96;
}
.footer_nav li:nth-of-type(n+3) {
	margin-top: 2em;
}


/* --- footer プライバシーとコピーライト --- */
.footer_bottom {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	padding-top:    20px;
	padding-bottom: 20px;
}
.footer_bottom a {
	font-size: 14px;
}
.footer_bottom a:hover {
	text-decoration: underline;
}
.footer_bottom .copyright {
	font-size: 12px;
}



/* ===== イラストcardに加えるアニメーション（ぽよんと登場） ===== */
.appear_anim {
	opacity: 0;
	transition: .6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition-property: opacity,transform;
	transform: scale(0.9) rotate(0.0001deg);
}
.appear_anim.is-active,
.appear_anim:nth-of-type(1) {
	transition-delay: calc(.15s*1);
}
.appear_anim:nth-of-type(2) {
	transition-delay: calc(.15s*2);
}
.appear_anim:nth-of-type(3) {
	transition-delay: calc(.15s*3);
}
.appear_anim:nth-of-type(4) {
	transition-delay: calc(.15s*4);
}
.appear_anim.is-active,
.is-active .appear_anim {
	opacity: 1;
	transform: scale(1) rotate(0.0001deg);
}


/* ===== Business リンクに加えるhoverアニメーション ===== */
.business_link li a {
	position: relative;
}
.business_link li a:after {
	content: "";
	width:  100%;
	height: 100%;
	position: absolute;
	top:  0;
	left: 0;
	display: block;
	pointer-events: none;
	background-color: #009e96;
	opacity: 0;
	transition: opacity .3s;
	mix-blend-mode: multiply;
	z-index: 2;
}
.business_link li a:hover:after {
	opacity: .5;
}
.business_link li a:before {
	transform: scale(1);
	transition: transform .3s;
}
.business_link li a:hover:before {
	transform: scale(1.1);
	transform-origin: center;	
}
.business_link li span {
	position: relative;
	z-index: 3;
}


/* ===== Scrollテキスト のアニメーション ===== */
.scroll_text::before {
	content: "";
	position: absolute;
	top: calc(100% - 4.3em); /* レールの開始位置 */
	width: 1.5px;
	height: 1em;
	background-color: #009e96;
	animation: scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine {
	0% {
		transform: translateY(0);
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		transform: translateY(3.5em);
		opacity: 0;
	}
}
@media screen and (max-width:768px) {
	.scroll_text {
		display: none !important;
	}
}



/* ===== 見出し アニメーション ===== */
/* トップページ・footer contact */
.head_maskanim .img_mask,
.head_maskanim .img_mask span {
	position: relative;
	clip-path: inset(0 100% 0 0);
	display: block;
}
.head_maskanim .img_mask:before {
	content: "";
	width:  100%;
	height: 100%;
	position: absolute;
	top:  0;
	left: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left top;
	opacity: 1;
	z-index: -1;
}
.is-active .head_maskanim .img_mask,
.is-active .head_maskanim .img_mask span,
.head_maskanim.is-active .img_mask,
.head_maskanim.is-active .img_mask span {
	animation: clip_img_mask cubic-bezier(.165,.84,.44,1) 1s forwards;
}
.is-active .head_maskanim .img_mask,
.head_maskanim.is-active .img_mask {
	animation-delay: .25s;
}
.is-active .head_maskanim .img_mask span,
.head_maskanim.is-active .img_mask span {
	animation-delay: .75s;
}
@keyframes clip_img_mask {
	0%   { clip-path:inset(0 100% 0 0); }
	100% { clip-path:inset(0 0 0 0);    }
}


/* ===== 下から出現する アニメーション ===== */
.text_anim {
	opacity: 0;
	transform: translateY(min(5vw,40px));
	transition: opacity 1s, transform 2s cubic-bezier(0.075,0.82,0.165,1);
	transition-delay: .25s;
}
.text_anim.is-active,
.is-active .text_anim {
	opacity: 1;
	transform: translateY(0);
}
.text_anim .img_mask span,
.text_anim small {
	clip-path: none !important;
}


/* ===== マウスストーカー ===== */
#mouse-stalker {
	pointer-events: none;
	position: fixed;
	top:  -20px;
	left: -20px;
	width:  40px;
	height: 40px;
	background: #009e96;
	border-radius: 50%;
	transform: translate(0, 0);
	transition: 0.2s;
	transition-timing-function: ease-out;
	z-index: 5000;
	mix-blend-mode: difference;
	mix-blend-mode: multiply;
	opacity: .7;
}
#mouse-stalker.is_active {
	top:  -10px;
	left: -10px;
	width:  20px;
	height: 20px;
	transition: 0.2s;
}
@media screen and (max-width:768px) {
	#mouse-stalker {
		display: none !important;
	}
}




















@media screen and (max-width:768px) {
	/* ===== Wrap ===== */
	.wrap {
		width: 100%;
		margin: auto;
		padding: 0 20px;
		padding-left:  clamp(20px,5.333vw,40px);
		padding-right: clamp(20px,5.333vw,40px);
	}
	.wrap {
		max-width: 680px;
	}

	/* ===== color ===== */
	/* ===== Font Family ===== */


	/* ===== text ===== */
	ul,
	li,
	dl,
	dd,
	dt,
	a,
	p { font-size: 14px; }

	.fb_normal-SP { font-weight:normal !important; }
	.fb_500-SP    { font-weight:500 !important;    }
	.fb_bold-SP   { font-weight:bold !important;   }

	.align_left-SP    { text-align:left !important;    }
	.align_right-SP   { text-align:right !important;   }
	.align_center-SP  { text-align:center !important;  }
	.align_justify-SP { text-align:justify !important; }


	/* ===== 表示・非表示 ===== */
	.pc_blk { display:none  !important; }
	.sp_blk { display:block !important; }

	.pc_inline { display:none !important;   }
	.sp_inline { display:inline !important; }

	.flex_box.pc_blk { display:none !important; }
	.flex_box.sp_blk { display:flex !important; }

	.flex_box { flex-wrap:wrap; }


	/* ===== 余白 ===== */
	.marXXL_T { margin-top:70px !important; }
	.marXL_T  { margin-top:60px !important; }
	.marL_T   { margin-top:40px !important; }
	.marM_T   { margin-top:30px !important; }
	.marS_T   { margin-top:20px !important; }

	.marXXL_B { margin-bottom:70px !important; }
	.marXL_B  { margin-bottom:60px !important; }
	.marL_B   { margin-bottom:40px !important; }
	.marM_B   { margin-bottom:30px !important; }
	.marS_B   { margin-bottom:20px !important; }

	.padXXL_T { padding-top:70px !important; }
	.padXL_T  { padding-top:60px !important; }
	.padL_T   { padding-top:40px !important; }
	.padM_T   { padding-top:30px !important; }
	.padS_T   { padding-top:20px !important; }

	.padXXL_B { padding-bottom:70px !important; }
	.padXL_B  { padding-bottom:60px !important; }
	.padL_B   { padding-bottom:40px !important; }
	.padM_B   { padding-bottom:30px !important; }
	.padS_B   { padding-bottom:20px !important; }

	.marXXL_T-SP { margin-top:70px !important; }
	.marXL_T-SP  { margin-top:60px !important; }
	.marL_T-SP   { margin-top:40px !important; }
	.marM_T-SP   { margin-top:30px !important; }
	.marS_T-SP   { margin-top:20px !important; }

	.marXXL_B-SP { margin-bottom:70px !important; }
	.marXL_B-SP  { margin-bottom:60px !important; }
	.marL_B-SP   { margin-bottom:40px !important; }
	.marM_B-SP   { margin-bottom:30px !important; }
	.marS_B-SP   { margin-bottom:20px !important; }

	.padXXL_T-SP { padding-top:70px !important; }
	.padXL_T-SP  { padding-top:60px !important; }
	.padL_T-SP   { padding-top:40px !important; }
	.padM_T-SP   { padding-top:30px !important; }
	.padS_T-SP   { padding-top:20px !important; }

	.padXXL_B-SP { padding-bottom:70px !important; }
	.padXL_B-SP  { padding-bottom:60px !important; }
	.padL_B-SP   { padding-bottom:40px !important; }
	.padM_B-SP   { padding-bottom:30px !important; }
	.padS_B-SP   { padding-bottom:20px !important; }

	.mar0_T-SP { margin-top: 0px !important; }
	.pad0_T-SP { padding-top:0px !important; }
	.mar0_B-SP { margin-bottom: 0px !important; }
	.pad0_B-SP { padding-bottom:0px !important; }






	/* ===== Header menu ===== */
	header {
		width:  100%;
		height:  70px;
		padding: 15px 20px;
		padding-right: 80px;
	}
	.header_logo {
		width: fit-content;
	}
	.header_logo,
	.header_logo > a img {
		max-height: 35px;
	}
	/* ハンバーガーボタン */
	.openbtn1 {
		width:  50px;
		height: 50px;
		min-width:  50px;
		min-height: 50px;
		position: fixed;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		text-align: center;
		top:   10px;
		right: 10px;
		cursor: pointer;
		z-index: 9999;
		background-color: #ffee6b;
		border-radius: 50px;
	}
	/* ハンバーガーボタン ×に変化 */  
	.openbtn1 span {
		width: 16px;
		min-width: 16px;
		height: 1px;
		display: block;
		position: absolute;
		background-color: #444;
		transition: transform .4s, background-color .4s;
	}
	.openbtn1 span:first-of-type {
		transform: translateY(-6px);
	}
	.openbtn1 span:nth-of-type(3) {
		transform: translateY(6px);
	}
	.openbtn1.active span {
		background-color: #000;
	}
	.openbtn1.active span:nth-of-type(1) {
		transform: translateY(0px) rotate(-45deg);
	}
	.openbtn1.active span:nth-of-type(2) {
		opacity: 0;
	}
	.openbtn1.active span:nth-of-type(3) {
		transform: translateY(0px) rotate(45deg);
	}
	/* ハンバーガーメニューの中身 */
	.header_wrap {
		transition: background-color .6s;
	}
	body.overflowY {
		overflow-y: hidden;
	}
	body.overflowY header:after {
		content: "";
		width:  100%;
		height: 100vh;
		display: block;
		position: absolute;
		top:  0;
		left: 0;
		background-color: rgba(0,0,0,.4);
		z-index: 1100;
		pointer-events: none;
	}
	.overflowY .header_wrap {
		background-color: #fff;
	}
	#g-nav {
		width:  100%;
		height: calc(100vh - 80px);
		position: fixed;
		top:  0;
		left: 0;
		opacity: 0;
		padding: 0;
		pointer-events: none;
		background: transparent;
		transform: translateY(100%);
		transition: opacity .3s;
		transition: transform .5s, opacity .5s;
	}
	#g-nav:before {
		content: "";
		width: 100%;
		height: 13.333vw;
		display: block;
		background-image: url(../../img/common/lower_maru_white_sp.svg);
		background-size:  100%;
		background-repeat: no-repeat;
		background-position: center bottom;
		margin-bottom: -1px;
	}
	
	#g-nav.panelactive {
		pointer-events: auto;
		opacity: 1;
		z-index: 1200;
		/* overflow-y: scroll; */
		transform: translateY(60px);
	}
	#g-nav-list {
		/* max-width: 600px; */
		/* min-width: fit-content; */
		width: 100%;
		display: inline-block;
		margin-left:  auto;
		margin-right: auto;
		padding: 30px 30px;
		/* add */
		height: 100%;
		overflow-y: scroll;
		background-color: #fff;
	}
	#g-nav ul {
		width: 100%;
		display: block;
		margin-left:  auto;
		margin-right: auto;
	}
	#g-nav li,
	#g-nav .header_btn {
		font-size: 14px;
	}
	#g-nav li a {
		width: 100%;
		display: inline-block;
		text-align: center;
		padding-bottom: 20px;
		border-bottom: 1px solid #d9d9d9;
	}
	#g-nav li a:before {
		content: none;
	}


	#g-nav li:not(:first-of-type) {
		margin-left: 0;
		margin-top: 1.5em;
	}
	/* お問い合わせ ボタン */
	.header_btn {
		margin-top: 40px;
		margin-left: 0;
		margin-bottom: 60px;
	}
	.header_btn a {
		width: 100%;
		text-align: center;
		padding: 1.8em 1.5em;
	}
	/* 幅 調整 */
	#g-nav-list ul,
	#g-nav-list .header_btn {
		max-width: 250px;
		margin-left:  auto;
		margin-right: auto;
	}
	

	/* ===== footer contact ===== */
	.pad_last {
		padding-bottom: min(30vw,160px);
	}
	.footer_contact {
		margin-top: calc(min(20.667vw,140px)*-1);
		padding: 70px 20px 0;
		padding-left:  clamp(20px,5.333vw,40px);
		padding-right: clamp(20px,5.333vw,40px);
	}
	.footer_contact:before {
		background-image: url(../../img/common/footer_contact_sp.png);
	}
	.fc_cont_wrap {
		width: 100%;
		max-width: 600px;
		flex-wrap: wrap;
		flex-direction: column;
		padding: 25px;
		border-radius: 10px;
	}
	.footer_contact h2 {
		width: 100%;
		font-size: 25px;
		line-height: 1;
		margin-bottom: .75em;
		padding-right: 0;
	}
	.footer_contact h2 img {
		height: 1em;
		object-position: center;
	}

	/* ===== マル アニメーション ===== */
	.footer_contact {
		height: 80vw;
		max-height: 520px;
		min-height: 350px;
		padding-top: 18vw;
	}
	.fc_bg_maru  {
		height: 40vw;
		max-height: 240px;
		min-height: 180px;
		margin-bottom: 15vw;
		background-image: url(../../img/common/fc_bg_sp.png);
		background-size: 100% 100%;
	}





	/* ===== ボタン（もっと見る・詳しく見る） ===== */
	/* ===== ボタン（Contact） ===== */

	/* ===== footer ===== */
	.footer_wrap {
		padding-top:    30px;
		padding-bottom: 40px;
	}
	.footer_flex {
		flex-wrap: wrap;
		flex-direction: column;
	}
	.footer_flex > div {
		width: 100%;
	}
	

	/* --- footer 企業情報 --- */
	.footer_info {
		margin-bottom: 30px;
	}
	.footer_logo {
		margin-bottom: 20px;
	}
	.footer_address {
		margin-bottom: .75em;
	}

	/* --- footer メニュー --- */
	.footer_nav {
		width: 100%;
		max-width: inherit;
	}
	.footer_nav li {
		font-size: 14px;
	}
	.footer_nav a {
		padding-bottom: 1.25em;
	}
	.footer_nav li:nth-of-type(n+3) {
		margin-top: 1.5em;
	}

	/* --- footer プライバシーとコピーライト --- */
	.footer_bottom {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top:    20px;
		padding-bottom: 20px;
	}
	.footer_bottom a {
		font-size: 13px;
		margin-bottom: .25em;
	}
	.footer_bottom .copyright {
		font-size: 10px;
	}
}

/* ブレイクポイント切り替え時のヘッダーアニメーションの停止（JSの記述と重ねて使用） */
.no-anim *, 
.no-anim *::before, 
.no-anim *::after {
  transition: none !important;
}