@charset "UTF-8";

/*reset*/
/*-------------------------------------------------------*/
article,aside,figure,figcaption,footer,header,nav,section,main{ display: block; }
small{ font-size: inherit; line-height: inherit; }
body,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,div,figure,figcaption{ margin: 0; padding: 0; font-size: 100%; line-height: 1.5; }
ul,li,ol{ list-style: none; margin: 0; padding: 0; }
button{ background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; }
a img{ border: none; }
a{ transition: all 0.25s linear; color: #3388cb; }
a:hover{ opacity: 0.7; text-decoration: none; }
img{ vertical-align: bottom; max-width: 100%; height: auto; }
html,body,p,div{
	color: #888888;
	font-family: 'YakuHanJP', Lato, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
	font-size: 14px; line-height: 2; font-weight: 500;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}




/*initialize*/
/*-------------------------------------------------------*/
#wrapper .defs{ display: none; }


/*header*/
/*-------------------------------------------------------*/
@media screen and (min-width: 1301px) {
	#header{ height: 74px; position: relative; background-color: #ffffff; z-index: 2000; }
	#header .logo{ position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 145px; }
	#header .menu-btn{ display: none; }
	#header .global-navi{ margin-left: 180px; display: -ms-flex; display: flex; }
	#header .global-navi .navi+.navi{ margin-left: 1.5em; }
	#header .global-navi .navi a{ display: block; line-height: 74px; color: #444444; text-decoration: none; position: relative; }
	#header .global-navi .navi a:hover{ color: #e95504; }
	#header .contact-navi{ position: absolute; right: 0; top: 0; }
	#header .contact-navi a{ display: block; width: 180px; line-height: 74px; background: linear-gradient(135deg, #fbdc3a 0%,#f52b27 60%); text-align: center; text-decoration: none; color: #ffffff; }
}
@media screen and (min-width: 1301px) and (max-width: 1200px) {
	#header .global-navi .navi+.navi{ margin-left: 1em; }
	#header .contact-navi a{ width: 100px; }
}
@media screen and (max-width: 1300px) {
	#header{ position: fixed; height: 70px; background-color: #ffffff; width: 100%; z-index: 2000; overflow-y: hidden; transition: height 0.5s; }
	#header.active{ height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
	#header .logo{ height: 70px; display: -ms-flex; display: flex; width: 100%; align-items: center; }
	#header .logo a{ display: inline-block; margin-left: 15px; }
	#header .menu-btn{ position: absolute; width: 70px; height: 70px; right: 0; top: 0; }
	#header .menu-btn a{ color: transparent; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
	#header .menu-btn a::before{ content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 19px; border: solid #494949; border-width: 1px 0; transform: translate(-50%,-50%); }
	#header .menu-btn a::after{ content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 1px; background-color: #494949; transform: translate(-50%,-50%); }
	#header.active .menu-btn a::before{ border: none; height: 1px; background-color: #494949; transform: translate(-50%,-50%) rotate(45deg); }
	#header.active .menu-btn a::after{ transform: translate(-50%,-50%) rotate(-45deg); }
	#header .navi-wrap{ padding-bottom: 50px; }
	#header .global-navi{ border-top: 1px solid #e4e4e4; }
	#header .global-navi .navi{ border-bottom: 1px solid #e4e4e4; }
	#header .global-navi .navi a{ display: block; color: #444444; text-decoration: none; padding: 15px; position: relative; }
	#header .global-navi .navi a::before{ content: ''; position: absolute; top: 50%; right: 15px; width: 10px; height: 1px; background-color: #444444; }
	#header .global-navi .navi a::after{ content: ''; position: absolute; top: 50%; right: 15px; border: solid transparent; border-left-color: #444444; border-width: 3px 0 3px 3px; transform: translateY(-50%) translateY(0.5px); }
	#header .contact-navi{ max-width: 300px; margin: 30px auto 0; padding: 0 5%; }
	#header .contact-navi a{ display: block; background: linear-gradient(135deg, #fbdc3a 0%,#f52b27 60%); color: #ffffff; text-align: center; padding: 20px 0; text-decoration: none; }
}


/*main*/
/*-------------------------------------------------------*/
#main .hero .ttl-body{ max-width: 1050px; margin: 0 auto; padding: 100px 5%; }
#main .hero .ttl-body .ttl{ font-size: 48px; line-height: 1.5; font-weight: bold; color: #444444; letter-spacing: 0.1em; position: relative; }
#main .hero .ttl-body .ttl::before{ content: ''; position: absolute; left: -60px; top: 50%; width: 40px; height: 1px; background-color: #e95504; }
#main .hero .ttl-body .en{ color: #e95504; }
#main .hero .photo{ background-color: center center no-repeat; background-size: cover; height: 400px; margin-left: calc(50% - 525px); border-radius: 50px 0 0 50px; position: relative; }
#main .hero .photo::before{ content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(135deg, #fbdc3a 0%,#f52b27 60%); z-index: -1; left: -20px; top: 20px; padding-right: 20px; border-radius: 50px 0 0 50px; }
#main .intro{ max-width: 1050px; margin: 80px auto 0; padding: 0 5%; }
#main .intro .navi-list{ display: -ms-flex; display: flex; flex-wrap: wrap; }
#main .intro *+.navi-list{ margin-top: 55px; }
#main .intro .navi-list .navi{ width: 28.58%; }
#main .intro .navi-list .navi:nth-child(3n+2),
#main .intro .navi-list .navi:nth-child(3n+3){ margin-left: 7.13%; }
#main .intro .navi-list .navi a{ display: block; border-bottom: 1px solid #444444; color: #444444; text-decoration: none; padding: 15px 10px; position: relative; }
#main .intro .navi-list .navi a::before{ content: ''; position: absolute; top: 50%; right: 15px; width: 10px; height: 1px; background-color: #444444; }
#main .intro .navi-list .navi a::after{ content: ''; position: absolute; top: 50%; right: 15px; border: solid transparent; border-left-color: #444444; border-width: 3px 0 3px 3px; transform: translateY(-50%) translateY(0.5px); }
@media screen and (max-width: 1180px) {
	#main .hero .photo{ margin-left: 5%; }
}
@media screen and (max-width: 1050px) {
	#main{ padding-top: 70px; }
	#main .intro .navi-list .navi{ width: 48%; }
	#main .intro .navi-list .navi:nth-child(n){ margin-left: 0; }
	#main .intro .navi-list .navi:nth-child(2n+2){ margin-left: 4%; }
}
@media screen and (max-width: 700px) {
	#main .hero .ttl-body{ padding: 10.95% 5%; }
	#main .hero .ttl-body .ttl{ font-size: 6.19vw; padding-left: 40px; letter-spacing: 0; }
	#main .hero .ttl-body .ttl::before{ left: 0; width: 20px; }
	#main .hero .ttl-body .en{ padding-left: 40px; font-size: 2.38vw; }
	#main .hero .photo{ height: 0; padding-top: 30.95%; border-radius: 7.14vw 0 0 7.14vw; }
	#main .hero .photo::before{ left: 0; top: 0; padding-right: 0; margin-top: 2.38%; border-radius: 7.14vw 0 0 7.14vw; }
	#main .intro{ margin-top: 11.9%; }
	#main .intro .navi-list{ display: block; }
	#main .intro *+.navi-list{ margin-top: 8%; }
	#main .intro .navi-list .navi{ width: 100%; }
	#main .intro .navi-list .navi:nth-child(n){ margin-left: 0; }
}


/*footer*/
/*-------------------------------------------------------*/
#footer{ background-color: #f5f5f5; }
@media screen and (min-width: 701px) {
	#footer{ padding: 100px 5% 50px; margin-top: 150px; }
	#footer .split-view{ display: -ms-flex; display: flex; max-width: 990px; width: 100%; margin: 0 auto; }
	#footer .split-view .logo{ width: 145px; margin-right: 9%; }
	#footer .split-view .navi-wrap{ flex: 1; }
	#footer .split-view .navi-wrap .head a{ font-size: 13px; line-height: 2.5; text-decoration: none; display: inline-block; color: #444444; position: relative; padding-left: 1.4em; background: url(../image/common/i01.png) 0 center no-repeat; background-size: 15px 14px;  }
	#footer .split-view .navi-wrap .global-navi{ overflow: hidden; }
	#footer .split-view .navi-wrap .global-navi .navi{ float: left; }
	#footer .split-view .navi-wrap .global-navi .navi:nth-child(1){ width: 32.43%; }
	#footer .split-view .navi-wrap .global-navi .navi:nth-child(2){ width: 24.32%; }
	#footer .split-view .navi-wrap .global-navi .navi:nth-child(n+3){ width: 21.62%; }
	#footer .split-view .navi-wrap .global-navi .navi a{ font-size: 13px; line-height: 2.5; text-decoration: none; display: inline-block; }
	#footer .split-view .navi-wrap .global-navi .navi > a{ color: #444444; position: relative; padding-left: 1.4em; }
	#footer .split-view .navi-wrap .global-navi .navi > a::before{ content: ''; width: 0.8em; height: 1px; position: absolute; left: 0; top: 50%; background-color: #e95504; }
	#footer .split-view .navi-wrap .global-navi .navi .local-navi{ padding-left: 2.4em; }
	#footer .split-view .navi-wrap .global-navi .navi .local-navi .navi-s a{ color: #878787; }
	#footer .copyright{ max-width: 990px; width: 100%; margin: 70px auto 0; font-size: 10px; line-height: 1.5; color: #acacac; }
}
@media screen and (min-width: 701px) and (max-width: 1050px) {
	#footer .split-view .navi-wrap .global-navi .navi{ display: inline-block; float: none; vertical-align: top; margin-top: 10px; }
	#footer .split-view .navi-wrap .global-navi .navi:nth-child(n){ width: 50%; }
	#footer .split-view .navi-wrap .global-navi .navi:nth-child(n+3){ margin-top: 10px; }
}
@media screen and (max-width: 700px) {
	#footer{ padding-bottom: 25px; margin-top: 14.29%; }
	#footer .split-view{ display: -ms-flex; display: flex; flex-wrap: wrap; }
	#footer .split-view .logo{ order: 2; width: 100%; margin-top: 50px; text-align: center; }
	#footer .split-view .navi-wrap{ order: 1; width: 100%; }
	#footer .split-view .navi-wrap .head,
	#footer .split-view .navi-wrap .local-navi{ display: none; }
	#footer .split-view .navi-wrap .normal-navi{ border-bottom: 1px solid #ffffff; }
	#footer .split-view .navi-wrap .normal-navi a{ display: block; color: #444444; background-color: #f5f5f5; text-decoration: none; padding: 15px; position: relative; }
	#footer .split-view .navi-wrap .normal-navi a::before{ content: ''; position: absolute; top: 50%; right: 15px; width: 10px; height: 1px; background-color: #444444; }
	#footer .split-view .navi-wrap .normal-navi a::after{ content: ''; position: absolute; top: 50%; right: 15px; border: solid transparent; border-left-color: #444444; border-width: 3px 0 3px 3px; transform: translateY(-50%) translateY(0.5px); }
	#footer .split-view .navi-wrap .contact-navi{ max-width: 300px; margin: 30px auto 0; padding: 0 5%; }
	#footer .split-view .navi-wrap .contact-navi a{ display: block; background: linear-gradient(135deg, #fbdc3a 0%,#f52b27 60%); color: #ffffff; text-align: center; padding: 20px 0; text-decoration: none; }
	#footer .copyright{ font-size: 10px; line-height: 1.5; margin-top: 60px; text-align: center; color: #acacac; }
}