@charset "utf-8";
/* 
	
CSS base.css */



/*
green #f4a53b
lightgreen #f1faf8
*/



/*//////////////////


Header


//////////////////*/

#header { width: 100%; z-index: 100; }
#header .mainbox { display: flex; align-items: center; justify-content: space-between; height: 120px; }
#header .logo { line-height: 0; }
#header .logo img { width: 300px; }
#header .cap { font-size: 13px; line-height: 1.7; letter-spacing: 0;flex: 1; margin-left: 20px; }
/* スクロール時fixed */
#header.fixed { position: fixed; top: 0; background: #fff; background: rgba(255,255,255,0.97); animation: navfit 0.5s ease-out 0s 1 normal both; }
#header.fixed .mainbox { height: 80px; }
#header.fixed .logo img { width: 260px; }
@media screen and (max-width: 1430px) {
	#header .cap { display: none; }
}
@media screen and (max-width: 1040px) {
	#header .logo { top: 0px; left: 40px; }
	#header,
	#header .mainbox { height: 100px; }
}
@media screen and (max-width: 767px) {
	#header,
	#header .mainbox { height: 80px; }
	#header .logo { left: 20px; top: 4px; }
	#header .logo img { width: 235px; }
}

/* スクロール時fixedのアニメーション */
@keyframes navfit {
  0% { transform: translate(0px, -50px); }
  100% { transform: translate(0px, 0px);  }
}






/*//////////////////


Nav


//////////////////*/

#gnav { }
#gnav::after { content: "."; display: block; clear: both; height: 0; visibility: hidden; overflow:hidden; line-height:0; font-size: 0; }
#gnav .bg { opacity: 0; }
#gnav .logobox { display: none; }
#gnav .innav{ padding-left: 40px; }
#gnav ul.main { text-align: right; }
#gnav ul.main>li { display: inline-block; float: left; position: relative; vertical-align: middle; margin-right: 1em; margin-top: 10px; }
#gnav ul.main>li:first-child { display: none; }
#gnav ul.main>li a { text-decoration: none; position: relative; vertical-align: middle; font-size: 15px; }
/* contactアイコン　*/
#gnav ul.main>li[data-cat="contact"] { margin-right: 0; margin-top: 0; margin-left: 5px;}
#gnav ul.main>li._spblock{ display: none; }
@media screen and (max-width: 1180px) {
	#gnav ul.main>li { margin-right: 0.5em; }
	#gnav ul.main>li a.btn.contact{width: 140px;min-width: 140px;font-size: 0;}
}
@media screen and (max-width: 1040px){
	#gnav { z-index: 1000; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: block; pointer-events: none; }
	#gnav .innav { position: absolute; top: 50%; left: 0; text-align: center; width: 88%; padding: 0px 6%; /* Safari用 */ transform: translate(0, -50%); }
	#gnav .logobox { display: block; text-align: center; opacity: 0; }
	#gnav .logobox .navcap { line-height: 1.8; margin-bottom: 20px; }
	#gnav .logobox .navlogo { width: 380px; display: block; margin: 0 auto; }
	#gnav .logobox .navlogo_sp { display: none; }
	
	#gnav ul.main { position: static; display: block; text-align: center; margin:40px 0; }
	#gnav ul.main>li { display: inline-block!important; margin: 0 10px; float: none; opacity: 0; font-size: 18px; }
	#gnav ul.main>li a { font-weight: bold; }
	#gnav ul.main>li:first-child,
	#gnav ul.main>li[data-cat="contact"] { display: block!important; margin-top: 40px; }
	#gnav ul.main>li._spblock{ display: inline-block; }
	
	#gnav .bg {
		background: #fff; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; overflow: hidden; z-index: -1; opacity: 0;
		-webkit-transform:scale(0.9,0.9); transform:scale(0.9,0.9);
		-webkit-transition: all 0.6s cubic-bezier(0,.53,.41,1); transition: all 0.6s cubic-bezier(0,.53,.41,1);
 	}
 	#gnav.is-open { pointer-events: auto; }
	#gnav.is-open .bg { opacity: 1; -webkit-transform:scale(1,1); transform:scale(1,1); }
	
	#gnav.is-open .logobox { opacity:1; transition: 3s; }
	#gnav.is-open ul.main>li { opacity:1; transition: 3s; }
}
@media screen and (max-width: 639px){
	#gnav .logobox .navcap { margin-bottom: 15px; font-size: 13px; }
	#gnav .logobox .navlogo { width: 280px; display: block; margin: 0 auto; }
	#gnav .logobox .navlogo_sp { display: none; }
	
	#gnav ul.main { margin:30px 0; }
	#gnav ul.main>li { font-size: 16px; }
	#gnav ul.main>li:first-child,
	#gnav ul.main>li[data-cat="contact"] { margin-top: 30px; }
	
}










/*//////////////////


Menubtn


//////////////////*/

#menubtn {display: none; z-index: 1001; }
@media screen and (max-width: 1040px){
	#menubtn { position: fixed; top: 20px; right: 10px; display: block; background: transparent; width: 60px; height: 60px; transition : 0.3s; cursor: pointer; z-index: 1000;}
	#menubtn a { text-decoration: none; position: relative; display: block; height: 100%; width: 100%; color: #fff; }
	#menubtn a .line {
		width: 24px; height: 4px; background: #1dac8a; position: absolute; left: 50%; margin-left: -12px;
		-webkit-transition: all 0.3s; transition: all 0.3s;
	}
	#menubtn a #line1 { top: 20px; }
	#menubtn a #line2 { top: 30px; }
	#menubtn a #line3 { top: 40px; }
	#menubtn a:hover #line1 { top: 23px; }
	#menubtn a:hover #line2 {top: 30px; }
	#menubtn a:hover #line3 {top: 37px; }
	#menubtn.active a span { width: 40px!important; margin-left: -20px!important; }
	#menubtn.active a #line1 {
		top: 23px;
		-webkit-transform:translateY(10px) translateX(0) rotate(-30deg);
		transform:translateY(10px) translateX(0) rotate(-30deg);
	}
	#menubtn.active a #line2 { display: none;  }
	#menubtn.active a #line3 { 
		top: 43px;
		-webkit-transform:translateY(-10px) translateX(0) rotate(30deg)!important; 
		transform:translateY(-10px) translateX(0) rotate(30deg)!important;
	}
/*
	#menubtn a:hover #line1 { top: 22px; width: 4px; height: 20px; margin-left: -16px; }
	#menubtn a:hover #line2 {top: 26px;width: 16px;margin-left: -15px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
	#menubtn a:hover #line3 {top: 40px;width: 30px;margin-left: -14px;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
	#menubtn.active a .txt { display: none; }
	#menubtn.active a span { width: 40px!important; height: 4px!important; margin-left: -20px!important; }
	#menubtn.active a #line1 {
		top: 23px;
		-webkit-transform:translateY(10px) translateX(0) rotate(-30deg);
		transform:translateY(10px) translateX(0) rotate(-30deg);
	}
	#menubtn.active a #line2 { top: 10px!important; margin-left: 10px!important; width: 0px!important; }
	#menubtn.active a #line3 { 
		top: 43px;
		-webkit-transform:translateY(-10px) translateX(0) rotate(30deg)!important; 
		transform:translateY(-10px) translateX(0) rotate(30deg)!important;
	}
*/
}
@media screen and (max-width: 767px){
	#menubtn { position: fixed; top: 10px; right: 5px; }
}









/*//////////////////


Mainv.index


//////////////////*/

#mainv.index { position: relative; height: 800px; }
#mainv.index .bg { margin-left: 220px; height: 100%; }
#mainv.index .bg img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; /*IE対策*/ border-bottom-left-radius: 30px; }
#mainv.index .bggreen { position: absolute; bottom: -150px; height: 500px; width: 100%; z-index: -1; background: #f1faf8; }
#mainv.index .copybox { position: absolute; bottom: 140px; left: 120px; text-align: left; }
#mainv.index .copybox .maincopy { font-size: 36px; line-height: 1.6; margin-bottom: 20px; letter-spacing: 0.3em; }
#mainv.index .copybox .subtxt { font-size: 20px; margin-bottom: 50px; font-weight: bold; letter-spacing: 0.3em; }
#mainv.index .copybox .en { font-size: 16px; letter-spacing: 0.15em; color: #1dac8a; }
#mainv a.scrollicon { display: inline-block; position: absolute; left: 40px; bottom: 0px; z-index: 2; padding: 10px 10px 80px; overflow: hidden; font-size: 14px; line-height: 1; text-decoration: none; writing-mode: vertical-lr; }
#mainv a.scrollicon::after { content: ''; position: absolute; bottom: 0px; left: 40%; width: 1px; height: 70px; background: #191919; }
#mainv a.scrollicon::after { animation: iconscroll 2s cubic-bezier(1, 0, 0, 1) infinite; }

@media screen and (max-width: 1280px){
	#mainv.index .copybox { left: 6%; }
	#mainv a.scrollicon { display: none; }
}
@media screen and (max-width: 1040px){
	#mainv.index { height: 600px; }
	#mainv.index .copybox { bottom: 80px; }
	#mainv.index .bggreen { bottom: -150px; height: 450px; }
}
@media screen and (max-width: 767px){
	#mainv.index { }
	#mainv.index .bg { margin-left: 160px; }
	#mainv.index .copybox { top: 50%; margin-top: -80px; }
	#mainv.index .copybox .maincopy { font-size: 28px; }
	#mainv.index .copybox .subtxt { font-size: 16px;  }
	#mainv.index .copybox .en { font-size: 12px; }
	#mainv.index ul.appeal { position: absolute; bottom: -160px; width: 88%; text-align: center; }
	#mainv.index ul.appeal li { width: 100%; }
	#mainv.index ul.appeal li a { width: 100%; font-size: 15px; }
}
@media screen and (max-width: 500px){
	#mainv.index { height: 320px; }
	#mainv.index .bg { margin-left: 100px; }
	#mainv.index .copybox { top: auto; bottom: 20px; }
	#mainv.index .copybox .maincopy { font-size: 24px;margin-bottom: 15px; }
	#mainv.index .copybox .subtxt { font-size: 15px; letter-spacing: 0.1em; margin-bottom: 20px; }
	#mainv.index .bggreen { bottom: -150px; height: 320px; }
}
@media screen and (max-width: 360px){
	#mainv.index .bg { margin-left: 80px; }
}

#mainv .onlinebtn { position: absolute; top: 705px; right: 0; width: 260px; z-index: 1; text-decoration: none; }
#mainv.under .onlinebtn { position: absolute; top: 525px; }
#mainv.under.simple .onlinebtn { position: absolute; top: 305px; }
#mainv .onlinebtn .inbox { position: relative; width: 100%; }
#mainv .onlinebtn .txt1 { padding: 20px 0 20px 25px; font-size: 16px; line-height: 1.5; font-weight: bold; color: #fff; background: #34b496; transition: 0.3s; }
#mainv .onlinebtn .txt2 { padding: 10px 0 10px 25px; font-size: 14px; background: #e4d955; line-height: 1; font-weight: bold;  }
#mainv .onlinebtn .txt2 svg { width: 15px; height: 15px; vertical-align: -3px; line-height: 0; }
#mainv .onlinebtn .txt2 svg .st0{ fill:#141312; }
#mainv .onlinebtn .phone { position: absolute; right: 10px; top: 12px; width: 98px;}
#mainv .onlinebtn:hover .txt1 { color: #fff; background: #6bceb7; }
#mainv .onlinebtn:hover .txt2 { background: #e4d955; }
@media screen and (max-width: 1040px){
	#mainv .onlinebtn { display: none; }
}
@keyframes iconscroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  35% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  35.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  70%, 100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}







/*//////////////////


Mainv.under


//////////////////*/

#mainv.under { position: relative; height: 600px; }
#mainv.under.simple { height: 360px; }
#mainv.under .bg { margin-left: 460px; height: 100%; }
#mainv.under .bg img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; /*IE対策*/ border-bottom-left-radius: 30px; }
#mainv.under .pagetitle { position: absolute; top: 50%; left: 120px; margin-top: -30px; text-align: left; }
@media screen and (max-width: 1280px){
	#mainv.under .pagetitle { left: 6%; }
	#mainv.under .bg { margin-left: 30%; }
}
@media screen and (max-width: 1040px){
	#mainv.under { height: 400px; }
	#mainv.under.simple { height: 300px; }
	#mainv.under .pagetitle { bottom: 80px; }
}
@media screen and (max-width: 767px){
	#mainv.under { }
	#mainv.under.simple { height: 200px; }
	#mainv.under .bg { margin-left: 160px; }
}
@media screen and (max-width: 500px){
	#mainv.under { height: 220px; }
	#mainv.under.simple { height: auto; }
	#mainv.under.simple .pagetitle { position: static; margin: 60px 6%; }
	#mainv.under .bg { margin-left: 100px; }
}
@media screen and (max-width: 360px){
	#mainv.under .bg { margin-left: 80px; }
}









/*//////////////////


Pankuzu


//////////////////*/

#pankuzu { line-height: 1.4; padding:15px 0; }
#pankuzu ol { margin: 0 60px; font-size: 0; }
#pankuzu ol li { display:inline; font-size: 14px; }
#pankuzu ol li:before { content:"/"; display: inline-block; margin: 0 5px }
#pankuzu ol li:first-child:before { display: none; }
#pankuzu ol li a img { width: 18px; height: 15px; line-height: 0; vertical-align: -2px; }
#pankuzu ol li a:hover { opacity: 0.7; transition: 0.3s; }
@media screen and (max-width: 767px) { 
	#pankuzu{ display: none; }
	#pankuzu ol { margin: 0 6%; }
}






/*//////////////////


Content


//////////////////*/

#main { margin-top: 70px; margin-bottom: 150px; position: relative; }
#index #main { margin-top: 70px; }
@media screen and (max-width: 767px) { 
	#main { margin-top: 40px; margin-bottom: 60px; }
}


#content { display: flex; justify-content: space-between; }
#content #base { flex: 1; margin-right: 80px; }
#content #side { width: 240px; }
@media screen and (max-width: 1040px) { 
	#content { display: block; }
	#content #base { margin-right: 0px; }
	#content #side { width: 100%; margin-top: 100px; }
}
@media screen and (max-width: 767px) { 
}





/*//////////////////


Intro


//////////////////*/


#intro { position: relative; margin-top: -150px; padding: 250px 0 100px; width: 100%; z-index: -1; background: #f1faf8; }
#intro .incnt { max-width: none; width: calc(100% - 240px); margin: 0 120px; }
@media screen and (max-width: 1280px) { 
	#intro .incnt { width: 88%; margin: 0 6%; }
}
@media screen and (max-width: 1040px) { 
	#intro br { display: none; }
}
@media screen and (max-width: 767px) { 
	#intro { padding: 210px 0 60px;  }
}











/* #sec_1 */
#contactbox { color: #fff; text-align: center; }
#contactbox .txt.big2 { margin-bottom: 40px; }
#contactbox .block { display: flex; justify-content: center; align-items: center; margin-bottom: 30px; }
#contactbox .block .telbox { text-align: center; }
#contactbox .block .telbox a.tel { font-size: 34px; margin-bottom: 10px; color: #fff; line-height: 1; }
#contactbox .block .telbox .time { font-size: 14px; }
#contactbox .block .online { position: relative; padding-left: 50px; margin: -5px 0px 0 50px; }
#contactbox .block .online a { display: flex; align-items: center; width: 100%; text-align: left; color: #fff; text-decoration: none; }
#contactbox .block .online a:after { content: ""; background: #fff; width: 100px; height: 4px; position: absolute; bottom: -20px; left: 50%; margin-left: -40px; opacity: 0; transition: 0.3s; }
#contactbox .block .online a:hover:after { opacity: 1; }
#contactbox .block .online a .txt { padding-right: 10px; font-weight: bold; line-height: 1.6;  display: inline-block; }
#contactbox .block .online a .svg img { width: 100px; height: 90px; margin-top: -5px; }
#contactbox .block .mailbox { position: relative; padding-left: 50px; }
#contactbox .block .online:before,
#contactbox .block .mailbox:before { content: ""; font-size: 0; width: 2px; height: 30px; background: #fff; position: absolute; top: 50%; left: 0; -webkit-transform:translateY(-10px) translateX(0) rotate(15deg)!important; transform:translateY(-10px) translateX(0) rotate(15deg)!important; }
#contactbox .caution { line-height: 1.8; }
#contactbox .block .mailbox .btn { box-shadow:none; }
@media screen and (max-width: 1280px) {
	#contactbox .block .online { padding-left: 30px; margin: -5px 0px 0 30px; }
	#contactbox .block .mailbox { padding-left: 30px; }
}
@media screen and (max-width: 1040px) {
	#contactbox .block { flex-wrap: wrap; }
	#contactbox .block .telbox { width: 100%; margin-bottom: 30px; }
	#contactbox .block .online { padding-left: 0; margin: -5px 0px 0 30px; }
	#contactbox .block .online:before {display: none; }
}
@media screen and (max-width: 767px) {
	#contactbox { margin-bottom: 0; }
}
@media screen and (max-width: 639px) {
	#contactbox .txt.big2 { margin-bottom: 20px; }
	#contactbox .block { display: block; }
	#contactbox .block .telbox a.tel { font-size: 28px; }
	#contactbox .block .online { text-align: center; margin: 0; margin-top: -10px; margin-bottom: 30px; }
	#contactbox .block .online a {justify-content: center; padding-left: 20px; }
	#contactbox .block .mailbox { padding-left: 0px; }
	#contactbox .block .mailbox:before {display: none; }
	#contactbox .caution { text-align: left; }
}






/*//////////////////


Footer


//////////////////*/

#footer {  }

#fnavbox { background: #f1faf8; }
#fnavbox .fnav { text-align: center; padding: 30px 0; }
#fnavbox .fnav li { margin: 0 7px; display: inline-block; }
#fnavbox .fnav li a { text-decoration: none; }
#fnavbox .fnav li a:hover { text-decoration: underline; color: #191919; }
@media screen and (max-width: 1040px) {
	#fnavbox {  }
}
@media screen and (max-width: 767px) {
}


/* #pagetop */
#pagetop { width: 100%; z-index: 10000; }
#pagetop a { text-decoration: none; display: block; padding: 10px 0; text-align: center; background: #f7f7f7; }
#pagetop a:hover { opacity: 1; background: #e6e6e6;  }
#pagetop svg { stroke:#333; width: 16px; height: 12px; fill-opacity: 0; }
@media screen and (max-width: 767px) { 
}

#footer .fcautionbox{ padding: 40px; font-size: 14px; }

/* footerinfo */
#footer .footerinfo { position: relative; text-align: center; margin-top: 80px; }
#footer .footerinfo:after { content: ""; display: block; clear: both; height: 0; visibility: hidden; overflow:hidden; line-height:0; font-size: 0; }
#footer .footerinfo .map { width: 100%; height: 560px; }
#footer .footerinfo .infobox { width: 50%; height: 750px; float: right; display: flex; justify-content: center; align-items: center; }
#footer .footerinfo .inbox { text-align: left; max-width: 70%; }
#footer .footerinfo .cap { margin-bottom: 20px; }
#footer .footerinfo .cap br { display: none; }
#footer .footerinfo .logo { width: 380px; display: inline-block; margin-bottom: 30px; }
#footer .footerinfo .address { margin-bottom: 30px; }
#footer .footerinfo ul.pnav { margin-bottom: 10px; }
#footer .footerinfo ul.pnav li { display: inline-block; margin: 0 8px; }
#footer .footerinfo .cr { margin-bottom: 80px; }
#footer .footerinfo .link { margin-bottom: -30px; }
#about.office #footer .footerinfo .map,
#about.office #footer .footerinfo .link { display: none; } 
@media screen and (max-width: 1280px) {
	#footer .crbox .incnt { justify-content: flex-end; }
}
@media screen and (max-width: 1040px) {
	#footer .footerinfo .map { height: 500px; }
	#footer .footerinfo .infobox { width: 88%; padding: 60px 6%; height: auto; display: block; }
	#footer .footerinfo .inbox { max-width: none; }
}
@media screen and (max-width: 767px) {
	#footer .footerinfo .logo { width: 280px; }
	#footer .footerinfo .cr { font-size: 12px; }
	#footer .footerinfo .cap br { display: block; }
	#footer .footerinfo .cap span { display: none; }
}
@media screen and (max-width: 500px) {
	#footer .footerinfo { margin-top: 40px; }
	#footer .footerinfo .map { height: 400px; }
	#footer .footerinfo .logo { width: 235px; }
	#footer .footerinfo .cr { margin-bottom: 40px; }
	#footer .footerinfo .address span span { display: none; }
}



/*//////////////////


IE判別処理


//////////////////*/
#iealertbox { position: fixed; top: 0; right: 0; height: 100%; width: 100%; background: #262626; z-index: 10000; display: none; justify-content: center; align-items: center; pointer-events: none; }
#iealertbox.is-ie { display: flex; pointer-events: auto; }
#iealertbox .inbox { text-align: center; margin: 10%; color: #fff; }
#iealertbox .inbox .copy {  }
#iealertbox .inbox .txt { margin-bottom: 20px; }
#iealertbox .inbox .browser { text-align: center; display: flex; justify-content: center; }
#iealertbox .inbox .browser li { margin: 20px;  }
#iealertbox .inbox .browser li a { width: 280px; border: 2px solid #fff; padding: 40px; display: block; border-radius: 10px; box-sizing: border-box; text-decoration: none; color: #fff; }
#iealertbox .inbox .browser li a:hover { background: #666; }
#iealertbox .inbox .browser li a img { width: 120px; }
#iealertbox .inbox .browser li a .txt1 { margin-top: 20px; line-height: 1.8; }
@media screen and (max-width: 767px) {
	#iealertbox .inbox .browser { display: block; }
	#iealertbox .inbox .browser li { margin: 0; margin-bottom: 20px; }
	#iealertbox .inbox .browser li a { width: 100%; padding: 30px 8%; }
	#iealertbox .inbox .browser li a img { width: 80px; }
	#iealertbox .inbox .txt { text-align: justify; }
	#iealertbox .inbox .txt br { display: none;  }
}