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

/* common */
html{ scroll-behavior: smooth;}
body{ font-family: 'Noto Sans JP', sans-serif; color: #231815;}
body.menu_open{ height: 100%; overflow: hidden;}
main{ overflow: hidden;}
p,figure{ margin: 0;}
ul{ margin: 0; padding: 0; list-style: none;}
a, a:link, a:visited, a:active{ color: #231815; outline: 0px none; text-decoration: none; -webkit-touch-callout: none;}
.contents-wrap { margin-bottom: 40px;}
img{ max-width: 100%; object-fit: contain;}
@media (min-width: 768px) {
	body{ font-size: 15px;}
	.pcnone{ display: none !important;}
	.pcnone2{ display: none !important;}
	.contents{ width: 1170px; margin: 0 auto;}
	main{ margin: 70px 0 0 0;}
	a[href*="tel:0120171711"] { pointer-events: none;}
}
@media (min-width: 768px) and (max-width: 900px) {
	.pcnone2{ }
}
@media (max-width: 767.98px) {
	body{ min-width: 100%; font-size: 14px;}
	.spnone{ display: none !important;}
	.contents{ width: 100%; margin: 0 auto;}
	main{ margin: 50px 0 0 0;}
}

@media (min-width: 768px) {
	.title1{ text-align: center; margin: 0 0 50px 0;}
	.title1.outside{ margin: 100px 0 74px 0;}
	.title1 h2{ font-size: 24px; margin: 0;}
}
@media (max-width: 767.98px) {
	.title1{ text-align: center; margin: 0 0 30px 0;}
	.title1.outside{ margin: 50px 0 30px 0;}
	.title1 h2{ font-size: 20px; margin: 0;}
}


@media (min-width: 768px) {
	.lead_all{ font-size: 18px; text-align: center; margin: 0 0 31px 0; letter-spacing: 2px; font-weight: 400; line-height: 1.8;}
	.title1.outside .lead_all{ margin: 50px 0 0 0;}
	
	#concept, #location{ padding-top: 70px; margin-top: -70px;}
}
@media (max-width: 767.98px) {
	.lead_all{ font-size: 14px; text-align: center; margin: 0 0 20px 0; letter-spacing: 2px; line-height: 1.6;}
	.title1.outside .lead_all{ margin: 20px 0 0 0;}
	
	#concept, #location{ padding-top: 50px; margin-top: -50px;}
}


@media (min-width: 768px) {
	.midashi_box{ width: 800px; margin: 0 auto 80px; position: relative; }
	.midashi{ display: block;}
	.midashi:hover{ opacity: 0.8;}
	.midashi .midashi_title{ position: absolute; color: #fff; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%; padding: 0 0 70px 0;}
	.midashi .midashi_title .en{ font-size: 24px; padding: 0 0 30px 0;}
	.midashi .midashi_title h2{ font-size: 28px;}
	.midashi .midashi_title h2 img{ width: 380px;}
	
	.read_more{ text-align: right; position: relative; width: 800px; margin: 10px auto 0;}
	.read_more a{ padding: 0 70px 0 0;}
	.read_more:hover{ opacity: 0.8;}
	.read_more::after{ content: ""; background-image: url("../images/more.svg"); background-size: 60px 11px; width: 60px; height: 11px; display: block; position: absolute; right: 0; top: 6px;}
}
@media (min-width: 768px) and (max-width: 900px) {
	.midashi{ width: 730px;}
}
@media (max-width: 767.98px) {
	.midashi_box{ margin: 0 15px 60px;}
	.midashi{ width: 100%; position: relative; display: block;}
	.midashi:hover{ opacity: 0.8;}
	.midashi .midashi_title{ position: absolute; color: #fff; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%; padding: 0;}
	.midashi .midashi_title .en{ font-size: 20px; padding: 0 0 10px 0;}
	.midashi .midashi_title h2{ font-size: 16px;}
	.midashi .midashi_title h2 img{ width: 240px;}
	
	.read_more{ text-align: right; position: relative; width: 100%; margin: 10px auto 0;}
	.read_more a{ padding: 0 60px 0 0;}
	.read_more:hover{ opacity: 0.8;}
	.read_more::after{ content: ""; background-image: url("../images/more.svg"); background-size: 55px 9px; width: 55px; height: 9px; display: block; position: absolute; right: 0; top: 6px;}
}


/* header */
@media (min-width: 768px) {
	header{ position: fixed; width: 100%; left: 0; top: 0; z-index: 100; height: 70px; box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.5);}
	header>div{ background-color: #fff; position: relative; height: 70px; display: flex; align-items: center;}
	header>div>a{ display: inline-block;}
	
	header .logo_box{ position: absolute; left: 25px; top: 16px;}
	header .logo_box .logo .logo_inner{ font-size: 0; margin: 0;}
	header .logo_box .logo .logo_inner img{ width: 120px; height: auto;}
	header .logo_box .logo:hover{ opacity: 0.7;}
	header .logo_box .logo .logo_inner span{ font-size: 25px; color: #fff; position: absolute; left: 130px; top: 1px; white-space: nowrap;}
	header .logo_box p{ color: #fff; font-size: 14px; position: absolute; left: 130px; top: 37px; white-space: nowrap;}
	
	#nav-toggle{ display: inline-block; cursor: pointer; transition: .3s ease-in-out; width: 42px; height: 26px; position: absolute; right: 25px; z-index: 102;}
	#nav-toggle>div{ position: relative; width: 42px; height: 26px;}
	#nav-toggle>div>span{ display: block; position: absolute; background-color: #595757; transition: .3s ease-in-out; height: 5px; right: 0;}
	#nav-toggle span:nth-child(1){ top: calc(50% - 13px); width: 100%;}
	#nav-toggle span:nth-child(2){ top: calc(50% - 2px); width: 100%;}
	#nav-toggle span:nth-child(3){ top: calc(50% + 9px); width: 100%;}
	
	body.menu_open #nav-toggle>div>span{ background-color: white;}
	body.menu_open #nav-toggle>div>span:nth-child(2){ width: 0; right: 50%;}
	body.menu_open #nav-toggle>div>span:nth-child(1){ transform: rotate(45deg);}
	body.menu_open #nav-toggle>div>span:nth-child(3){ transform: rotate(-45deg);}
	body.menu_open #nav-toggle>div>span:nth-child(1),
	body.menu_open #nav-toggle>div>span:nth-child(3){ top: calc(50% - 2px); width: 100%;}
	body.menu_open nav{ opacity: 1; display: block;}
	
	.global_menu_sp{ display: none!important;}
	.global_menu{ background-color: #6f6f6f; color: #fff; height: 100vh; position: fixed; right: 0; top: 0; transition: .3s ease-in-out;  opacity: 0; overflow: auto; width: 280px; padding: 90px 0 30px; font-size: 16px; z-index: 101; margin: 0; border-top: 1px solid #686d71; display: none;}
	.global_menu>ul{ list-style: none; padding: 0; margin: 0 auto; width: 280px;  display: flex; justify-content: center;}
	.global_menu>ul>li{ width: 240px; border-right: 1px solid #686d71;}
	.global_menu>ul>li:last-child{ border-right: 0;}
	.global_menu>ul>li>a{ display: block; padding: 0 39px 15px; color: #fff; line-height: 1.2;}
	.global_menu>ul>li>a:hover{ color: #b7e7f9;}
	.global_menu>ul>li>a:last-child{ margin-bottom: 18px;}
	.global_menu>ul>li>a.gray{ color: #aaa;}

	.btn_box{ display: flex; position: absolute; right: 112px;}
	.btn_box a{ color: #fff; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 12.5px; width: 88px; height: 33px; transition: 0.3s;}
	.btn_box a:first-child{ background-color: #0076aa; margin: 0 17px 0 0;}
	.btn_box a:hover:first-child{ background-color: #fff; border: 1px solid #0076aa; color: #0076aa;}
	.btn_box a:last-child{ background-color: #003f76;}
	.btn_box a:hover:last-child{ background-color: #fff; border: 1px solid #003f76; color: #003f76;}
	
	.side_banner{ position: fixed; right: 0; bottom: 20px; opacity: 0; pointer-events: none; transition: opacity 0.5s ease;}
  	.side_banner.visible { opacity: 1; pointer-events: auto;}
	.side_banner a{ color: #fff; border-radius: 5px 0 0 5px; display: flex; justify-content: center; align-items: center; font-size: 15px;    width: 160px; height: 55px; transition: 0.3s;}
	.side_banner a:first-child{ background-color: #0076aa; margin: 0 0 10px 0;}
	.side_banner a:hover:first-child{ background-color: #fff; border: 1px solid #0076aa; color: #0076aa;}
	.side_banner a:last-child{ background-color: #003f76;}
	.side_banner a:hover:last-child{ background-color: #fff; border: 1px solid #003f76; color: #003f76;}
}
@media (min-width: 768px) and (max-width: 1095px) {
	.pcnone2{ display: block!important;}
	header .logo_box .logo .logo_inner span { font-size: 24px;}
	header .logo_box p { color: #fff; font-size: 12px; top: 31px;}
}
@media (max-width: 767.98px) {
	header{ position: fixed; width: 100%; left: 0; top: 0; z-index: 101; height: 50px; box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.5);}
	header>div{ background-color: #fff; position: relative; height: 50px; display: flex; align-items: center;}
	header>div>a{ display: inline-block;}
	
	header .logo_box{ position: absolute; left: 15px; top: 12px;}
	header .logo_box .logo .logo_inner{ font-size: 0; margin: 0;}
	header .logo_box .logo .logo_inner img{ width: 90px; height: auto;}
	header .logo_box .logo .logo_inner span{ display: none;}
	header .logo_box p{ display: none;}
	header .logo_box .icon_insta{ display: none;}
	header .logo_box .icon_mail { display: none;}
	
	#nav-toggle{ display: inline-block; cursor: pointer; transition: .3s ease-in-out; width: 36px; height: 28px; position: absolute; right: 15px; z-index: 102;}
	#nav-toggle>div{ position: relative; width: 36px; height: 28px;}
	#nav-toggle>div>span{ display: block; position: absolute; background: #fff; transition: .3s ease-in-out; height: 4px; right: 0; background-color: #595757;}
	#nav-toggle span:nth-child(1){ top: calc(50% - 12px); width: 100%;}
	#nav-toggle span:nth-child(2){ top: calc(50% - 2px); width: 100%;}
	#nav-toggle span:nth-child(3){ top: calc(50% + 9px); width: 100%;}
	
	body.menu_open #nav-toggle>div>span{ background-color: white;}
	body.menu_open #nav-toggle>div>span:nth-child(2){ width: 0; right: 50%;}
	body.menu_open #nav-toggle>div>span:nth-child(1){ transform: rotate(45deg);}
	body.menu_open #nav-toggle>div>span:nth-child(3){ transform: rotate(-45deg);}
	body.menu_open #nav-toggle>div>span:nth-child(1),
	body.menu_open #nav-toggle>div>span:nth-child(3){ top: calc(50% - 2px); width: 100%;}
	body.menu_open nav{ opacity: 1; display: block;}
	
	.global_menu{ background-color: #6f6f6f; color: #fff; height: 100vh; position: fixed; right: 0; top: 0; transition: .3s ease-in-out;  opacity: 0; overflow: auto; width: 100%; padding: 60px 15px 10px; margin: 0 0 15px 0; font-size: 16px; z-index: 101; border-top: 1px solid #686d71; display: none;}
	.global_menu>ul{ list-style: none; padding: 0; margin: 0 auto; width: 100%; display: flex; justify-content: center;}
	.global_menu>ul>li{ width: 220px; border-right: 1px solid #686d71;}
	.global_menu>ul>li:last-child{ border-right: 0;}
	.global_menu>ul>li>a{ display: block; padding: 0 20px 10px; color: #fff; line-height: 1.2; border-bottom: 1px solid #fff; margin: 0 0 20px 0;}
	.global_menu>ul>li>a:hover{ color: #b7e7f9;}
	.global_menu>ul>li>a:last-child{ margin-bottom: 18px;}
	.global_menu>ul>li>a.gray{ color: #aaa;}
	
	.btn_box{ display: flex; position: absolute; right: 70px;}
	.btn_box a{ color: #fff; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 12px; width: 66px; height: 28px; transition: 0.3s;}
	.btn_box a:first-child{ background-color: #0076aa; margin: 0 10px 0 0;}
	.btn_box a:hover:first-child{ background-color: #fff; border: 1px solid #0076aa; color: #0076aa;}
	.btn_box a:last-child{ background-color: #003f76;}
	.btn_box a:hover:last-child{ background-color: #fff; border: 1px solid #003f76; color: #003f76;}
	
	.side_banner{ display: none;}
}


/* footer */
footer { color: #333;}
footer a { color: #333;}
footer a:hover,
footer a:active,
footer a:focus { color: #757092;}
footer .navbar-brand img,
footer .navbar-brand object { height: 36px; width: 216px; margin-top: 2px; margin-bottom: 2px;}
.footer-top { background-color: #fff; border-top: 8px solid #3a3364; padding: 50px 0 0 0;}
.footer-bottom { background-color: #fff;}
.footer-contents { margin-top: 20px;}
.company-info { font-size: 13px; margin-bottom: 5px;}
.company-info h4 { margin-top: 0; font-size: 19px;}
.company-info p{ margin: 0 0 12px 0;}

.footer-menu { font-size: 11px; margin-bottom: 0; padding: 0;}
.footer-menu li { list-style: none; padding-bottom: 5px;}
.footer-menu li:before { color: #3a3364; content: '\f0da'; font-family: FontAwesome; padding-right: 6px;}
.footer-menu>li>a,
.footer-menu>.footer-sub-menu>li>a { display: inline;}
.footer-menu li a:hover,
.footer-menu li a:active,
.footer-menu li a:focus { color: #757092;}
.footer-menu .footer-sub-menu { padding-left: 10px;}
.footer-menu .footer-sub-menu li { padding: 0 0 2px;}
.footer-menu .footer-sub-menu li:first-child { padding-top: 2px;}
.footer-menu .footer-sub-menu li:before { content: '\f105'; font-family: FontAwesome;}
.footer-menu li a.gray{ color: #aaa;}

/* social nav */
.social-nav ul { padding-left: 0;}
.social-nav ul li { display: inline-block; text-align: center; margin-left: 5px;}
.social-nav ul li a { display: block; color: #666;}
.social-nav ul li a:hover,
.social-nav ul li a:active,
.social-nav ul li a:focus { color: #3a3364;}
.social-nav{ margin: 12px 0 0 0;}
.social-nav img { max-width: 20px;}
.copyright { font-size: 12px; padding-top: 12px; padding-bottom: 12px; margin-top: 0; margin-bottom: 10px;}
@media (min-width: 768px) and (max-width: 992px) {
	.row { flex-wrap: wrap;}
	.col-md-9 { width: 100%; max-width: 100%; flex: 0 0 auto;}
	.col-md-3 { width: 100%; max-width: 100%; flex: 0 0 auto;}
	.col-md-4 { width: 100%; max-width: 100%; flex: 0 0 auto;}
}


@media (min-width: 768px) {}
@media (max-width: 767.98px) {}