@charset "utf-8";
/* ------- common ------- */
.wrapper { min-width: 1400px;}

.en { font-family: 'Montserrat-Medium';}
.en_l { font-family: 'Montserrat-Light';}
.en_sb { font-family: 'Montserrat-SemiBold';}
.din { font-family: din-2014, sans-serif; font-weight: 600;}
.orange { color: #FF7800;}

.h3_center { position: relative; font-size: 36px; text-align: center; }
.h3_center:before { position: absolute; top: -45px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); content: ""; display: block; width: 1px; height: 40px; background: #FF7800;}
.h3_center .en { display: block; font-size: 20px; letter-spacing: 0; margin: 0 auto 13px;}

.btn_orange { position: relative; width: 228px; margin: 0 auto; color: #fff; text-align: center; font-size: 14px; letter-spacing: 0.07em; display: block; background: #FF7800; padding: 19px 0; border-radius: 100px;}
.btn_orange:after { content: ""; display: block; position: absolute; right: 21px; top: 22px; width: 8px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);}

/* ------- header ------- */
header { position: fixed; display: flex; justify-content: space-between; align-items: center; width: 100%; background: rgba(255,255,255,0.9); padding: 14px 15px 14px 40px; min-width: 1400px; z-index: 100;}
header h1 { color: #000;}
header h1 small { font-size: 11px; font-family: 'Noto-Sans-JP-Regular'; color: #000; padding-left: 15px;}
header .right { display: flex; justify-content: flex-end; align-items: center;}
header .right nav { }
header .right nav a { font-size: 16px; color: #F7861C; font-family: 'Montserrat-Medium'; margin-right: 25px;}
header .right .tel { font-size: 27px; font-family: din-2014, sans-serif; color: #000; font-weight: 600; letter-spacing: 0.05em; margin-right: 18px;}
header .right .tel:before { content: ""; display: inline-block; width: 18px; height: 18px; background: url(../images/common/icn_tell.svg) no-repeat center / 100%;}
header .right .tel span { display: block; font-size: 12px; font-family: 'Noto-Sans-JP-Medium'; letter-spacing: -0.001em; font-feature-settings: "palt";}
header .right .contact { display: flex; justify-content: space-between; align-items: center; width: 210px; padding: 10px 10px 10px 20px; font-size: 14px; font-family: 'Noto-Sans-JP-Bold'; color: #fff; background: linear-gradient(to bottom right, #ffcd5c 0%, #f7861c 100%); border-radius: 26px;}
header .right .contact.mail{ margin-left: 5px; }

header .right .contact:before,
header .right .contact:after { content: ""; display: inline-block;}
header .right .contact:before { width: 33px; height: 33px; background: url(../images/common/icn_line_color.svg) no-repeat center / 100%;}
/* header .right .contact:after { width: 19px; height: 19px; background: url(../images/common/arrow_01.png) no-repeat center / 100%;} */
header .right .contact.mail:before { width: 25px; height: 33px; background: url(../images/common/icn_mail.svg) no-repeat center / 100%;}

/* ------- modalArea ------- */
#modalArea { opacity: 0; visibility: hidden;}
#modalArea.open { opacity: 1; visibility: visible;}
#modalArea .modalbody { display: none;}
#modalArea nav { text-align: center; margin-bottom: 80px;}
#modalArea nav a { display: block; font-size: 24px; color: #F7861C; font-family: 'Montserrat-Medium'; margin: 0 0 40px;}

#modalArea .profile { margin: 0 auto 34px; padding-left: 5%;}
#modalArea .profile .logo { width: 204px; margin-bottom: 30px;}
#modalArea .profile .logo img { margin-bottom: 15px;}
#modalArea .profile .logo p { font-size: 12px; font-family: 'Noto-Sans-JP-Regular'; }
#modalArea .profile .adress { }
#modalArea .profile .adress p { font-size: 12px; font-family: 'Noto-Sans-JP-Regular'; line-height: 190%;}

#modalArea .sns { text-align: center; margin-bottom: 30px;}
#modalArea .sns a { }
#modalArea .sns a:nth-child(2) { margin: 0 13px;}
#modalArea .copy { font-size: 12px; text-align: center;}



/* ------- cta ------- */
#cta { position: relative; padding: 50px 0 75px; background: url(../images/common/cta_bg.jpg?v=1) no-repeat center / cover; text-align: center; color: #fff;}
#cta:before { position: absolute; top: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); content: ""; display: block; width: 1px; height: 40px; background: #fff;}
#cta h3 { font-size: 36px; margin-bottom: 60px;}
#cta h3 span { display: block; font-size: 20px; font-family: 'Montserrat-Medium'; margin: 0 auto 10px;}
#cta p { font-size: 36px; margin-bottom: 45px;}
#cta p span { display: block; font-size: 16px; line-height: 180%; margin: 45px auto 0;}
#cta .flex { display: flex; justify-content: center; align-items: flex-start;}
#cta .flex .btn { display: block; width: 407px; border-radius: 12px;}
#cta .flex .tel { width: 407px; }
#cta .flex .tel .btn { width: 100%; font-size: 29px; font-family: din-2014, sans-serif; color: #000; font-weight: 600; letter-spacing: 0.06em; background: #fff; padding: 20px 0 17px;}
#cta .flex .tel .btn:before { content: ""; display: inline-block; width: 18px; height: 18px; background: url(../images/common/icn_tell.svg) no-repeat center / 100%;}
#cta .flex .tel .btn span { display: block; font-size: 14px; font-family: 'Noto-Sans-JP-Medium'; letter-spacing: -0.001em; font-feature-settings: "palt"; color: #000; padding-top: 5px;}
#cta .flex .tel p { text-align: right; font-size: 12px; font-family: 'Noto-Sans-JP-Regular'; padding-top: 9px; margin-bottom: 0;}
#cta .flex .contact { position: relative; font-size: 18px; font-family: 'Noto-Sans-JP-Bold'; color: #fff; border: 1px solid #fff; background: #04C755 url(../images/common/icn_line_color.svg) no-repeat 58px center / 41px; text-align: center; padding: 32px 0; margin-left: 30px;}
#cta .flex .contact:after { content: ""; display: block; position: absolute; right: 38px; top: 36px; width: 8px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);}
#cta .flex .contact.mail{ background: #FF7800 url(../images/common/icn_mail.svg) no-repeat 58px center / 30px; }

/* ------- footer ------- */
footer { padding: 45px 0 30px; background: #F2EEE7; min-width: 1400px;}
footer nav { text-align: center; margin-bottom: 80px;}
footer nav a { font-size: 32px; color: #F7861C; font-family: 'Montserrat-Medium'; margin: 0 50px;}

footer .profile { padding-left: max( ( 100% - 1300px ) / 2, 40px); margin-bottom: 60px;}
footer .profile .logo { margin-bottom: 45px;}
footer .profile .logo img { margin-bottom: 15px;}
footer .profile .logo p { font-size: 16px; font-family: 'Noto-Sans-JP-Regular'; }
footer .profile .adress { }
footer .profile .adress p { font-size: 14px; font-family: 'Noto-Sans-JP-Regular'; line-height: 200%;}

footer .sns { text-align: center; margin-bottom: 30px;}
footer .sns a { }
footer .sns a:nth-child(2) { margin: 0 13px;}
footer .copy { font-size: 12px; text-align: center;}


/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
	.wrapper { min-width: auto;}
	
	
	.h3_center { font-size: 26px;}
	.h3_center:before { top: -26px; height: 20px;}
	.h3_center .en { font-size: 14px; margin: 0 auto 6px;}

	
	
	/* ------- header ------- */
	header { display: flex; justify-content: space-between; align-items: center; padding: 0; min-width: auto;}
	header h1 { padding: 4px 19px 12px;}
	header h1 img { width: 103px; height: auto;}
	header h1 small { display: block; font-size: 10px; font-family: 'Noto-Sans-JP-Medium';  padding: 5px 0 0;}
	header .right { display: none;}
	header .menu { position: relative; width: 63px; height: 63px; z-index: 99; cursor: pointer; background: #FF7800;}
	header .menu .list { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); width: 21px; height: 16px;}
	header .menu span { position: absolute; display: block; width: 100%; height: 2px; background: #fff; transition: 0.5s ease;}
	header .menu span:nth-child(1) { top: 0;}
	header .menu span:nth-child(2) { left: auto; top: 7px; opacity: 1;}
	header .menu span:nth-child(3) { bottom: 0;}
	
	header .menu.close span:nth-child(1) { top: 7px; transform: rotate(45deg);}
	header .menu.close span:nth-child(2) { opacity: 0;}
	header .menu.close span:nth-child(3) { bottom: 7px; transform: rotate(-45deg);}
	#modalArea { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; padding: 120px 0 100px; background: #F2EEE7; overflow-x: scroll; z-index: 90; transition: 0.5s;}
	#modalArea .modalbody { display: block;}
	
	
	/* ------- cta ------- */
	#cta { padding: 25px 0 60px; background: url(../images/common/cta_bg_sp.jpg?v=1) no-repeat center / cover;}
	#cta:before { height: 18px;}
	#cta h3 { font-size: 26px; margin-bottom: 40px;}
	#cta h3 span { font-size: 14px; margin: 0 auto 10px;}
	#cta p { font-size: 30px; line-height: 130%; margin-bottom: 44px;}
	#cta p span { font-size: 15px; line-height: 160%; margin: 35px auto 0;}
	#cta .flex { display: block;}
	#cta .flex .btn { width: 100%;}
	#cta .flex .tel { width: 100%; margin-bottom: 22px;}
	#cta .flex .tel .btn { font-size: 29px; padding: 24px 0 19px;}
	#cta .flex .tel .btn:before { }
	#cta .flex .tel .btn span { font-size: 14px; padding-top: 5px;}
	#cta .flex .tel p { font-size: 12px; padding-top: 9px;}
	#cta .flex .contact { font-size: 18px; background: #04C755 url(../images/common/icn_line_color.svg) no-repeat 25px center / 41px;  padding: 29px 0; margin-left: auto;}
	#cta .flex .contact:after { right: 38px; top: 36px; width: 8px; height: 8px;}
	#cta .flex .contact.mail{ margin-top: 20px; background-position: 25px center; }
	
	
	/* ------- footer ------- */
	footer { padding: 40px 0 15px; min-width: auto;}
	footer nav { text-align: center; margin-bottom: 70px;}
	footer nav a { display: block; font-size: 24px; margin: 0 0 40px;}
	footer nav a:last-child { margin-bottom: 0;}
	
	footer .profile { width: 90%; padding-left: 0; margin: 0 auto 34px;}
	footer .profile .logo { width: 204px; margin-bottom: 30px;}
	footer .profile .logo img { width: 100%; height: auto; margin-bottom: 12px;}
	footer .profile .logo p { font-size: 12px;}
	footer .profile .adress { }
	footer .profile .adress p { font-size: 12px; line-height: 190%;}
		

	/* ------- flow-btn ------- */
	.flow-btn{ z-index: 50; position: fixed; left: 0; right: 0; bottom: 0; display: flex; align-items: center; background: #FFF1E5; }
	.flow-btn .contact { display: block; width: 50%; font-size: 13px; background: #04C755 url(../images/common/icn_line_color.svg) no-repeat 10px center / 25px; padding: 20px 10px 20px 40px; text-align: center; color: #fff; }
	.flow-btn .contact.mail{ background: #FF7800 url(../images/common/icn_mail.svg) no-repeat 10px center / 15px; }
	
}