@charset "UTF-8";
/****************************************
Resetting
*****************************************/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;}
h1, h2, h3, h4, h5, h6{font-weight: 500}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, main,hgroup, menu, nav, section {display: block;}
ol,ul,li{list-style: none;}
blockquote, q {quotes: none;}
blockquote:before,
blockquote:after,
q:before,
q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
input[type="submit"],
input[type="button"],
input[type="reset"]{
appearance: button;border: none;
border-radius: 0;cursor: pointer;-webkit-appearance: button;}
a{text-decoration: none;}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
html{width: 100%;height: 100vh;overflow-y: scroll;font-size: 62.5%;-webkit-font-smoothing: antialiased;}
body{color: #000;font-size: 14px;font-size: 1.4rem;line-height: 1.7em;font-family: Hiragino Sans, "ヒラギノ角ゴシック",Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo,sans-serif;min-width: 1040px;}

@media screen and (max-width:767px){/*スマホ対応*/
html{width: 100%}
body{width: 100%;margin: 0;padding: 0;min-width:100%;}
}

.wf-hannari{ font-family: 'Kosugi', sans-serif;}
.wf-lato{font-family: 'Lato', sans-serif;}
a:link {color: #fff;-moz-transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
a:visited {color: #fff;}
a:hover,a:active{color: #31ADEF;text-decoration: none;}

/******************************************
clearfix
******************************************/
.clearfix:after {content: ".";clear: both;display: block;height: 0;visibility: hidden;}
.clearfix {display: inline-table;}  
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}  
/* End hide from IE-mac */

/****************************************
Layout
*****************************************/
/*flexbox*/
.flex{
display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;flex-wrap: wrap;-webkit-flex-wrap:wrap;}
.flex--start{/*左寄せ*/justify-content: flex-start;-webkit-justify-content: flex-start;}
.flex--center{/*中央寄せ*/justify-content: center;-webkit-justify-content: center;}
.flex--end{/*右寄せ*/justify-content: flex-end;-webkit-justify-content: flex-end;}
.flex--bet{/*残り余白の均等割り*/justify-content: space-between;-webkit-justify-content: space-between;}
.flex--around{/*左右余白 ＋ 均等割り*/justify-content: space-around;-webkit-justify-content: space-around;}
/*col*/
.col1{width:100%;}
.col2{width:48%;}
.col3{width:30%;}
.col4{width:25%;}
.col5{width:18.4%;}
.col_6{width:15%;}
.col6{width:52%;}
.col7{width:40%;}
.inner{margin: 0 auto;width: 1000px;}
.inner--long{margin: 0 auto;width: 1040px;}
.inner--short{margin: 0 auto;width: 960px;}

@media screen and (max-width:767px){/*スマホ対応*/
.inner{width: 100%;}
.inner--short{width: 90%;}
}
/* ------------------------------------------------------------
9. Common Module
------------------------------------------------------------ */
.Tleft{ text-align:left;}
.Tright{ text-align:right;}
.Tcenter{ text-align:center;}
.text10{ font-size: 1.0rem}
.text11{ font-size: 1.1rem}
.text12{ font-size: 1.2rem}
.text13{ font-size: 1.3rem}
.text14{ font-size: 1.4rem}
.text15{ font-size: 1.5rem}
.text16{ font-size: 1.6rem}
.text17{ font-size: 1.7rem}
.text18{ font-size: 1.8rem}
.text19{ font-size: 1.9rem}
.text20{ font-size: 2.0rem}
.text25{ font-size: 2.5rem}
.text30{ font-size: 3.0rem}
.text50{ font-size: 5.0rem}

.mT10{margin-top: 10px;}
.mT20{margin-top: 20px;}
.mT30{margin-top: 30px;}
.mT70{margin-top: 70px;}
.mT120{margin-top: 120px;}
.mB10{margin-bottom: 10px;}
.mB20{margin-bottom: 20px;}
.mB30{margin-bottom: 30px;}
.pT10{padding-top: 10px;}
.pT30{padding-top: 30px;}
.pB30{padding-bottom: 30px;}

.coution{margin-left: 1em;text-indent: -1em;}

@media (min-width: 751px) {
a[href*="tel:"] {pointer-events: none;cursor: default;text-decoration: none;}
}
@media screen and (min-width:768px){ /*PC独自設定*/
.sp{display:none !important;}
}
@media screen and (max-width:767px){/*スマホ対応*/
.pc{display:none !important;}
.col2{width:100%;margin-bottom: 20px;}
}
/*
*****************************************/

@media screen and (min-width:768px){/*PC*/
.site-header{padding: 30px 0;position: fixed;top: 0;left: 0;width: 100vw;z-index: 98;}
.site-header h1{color: #3C6B43;font-size: 1.8rem;letter-spacing: 0.2em;font-weight: bold}
.site-header h1 a{color: #3C6B43;}
.site-header ul{display: table;width: 76%;margin-top: -30px; margin-left: auto; text-align: center;}
.site-header li{display: table-cell;vertical-align: middle;line-height: 1.6em;;letter-spacing: 0.1em;margin-right: -0.1em;position: relative;width: 150px}
.site-header li a{position: relative;z-index: 0;display: block;padding: 8px 0;color: #3C6B43;}
.site-header li a:after {-webkit-backface-visibility: hidden;backface-visibility: hidden;border: 1px solid rgba(208,90,44,0);bottom: 0px;content: " ";display: block;margin: 0 auto;
position: absolute;transition: all 280ms ease-in-out;width: 0;}
.site-header li a:after {right: 0px;left: 0;margin: auto;bottom: 0px;}
.site-header li a:hover:after,
.site-header li a:focus:after,
.site-header li a:active:after{  -webkit-backface-visibility: hidden;backface-visibility: hidden; border-color: rgba(208,90,44,1); transition: width 350ms ease-in-out; width: 70%;}
.site-header li a span.en {display: inline;}
.site-header li a:hover span.en {display: none;}
.site-header li a span.jp {display: none;}
.site-header li a:hover span.jp {display: inline;}

.is_fixed{padding: 20px 0 16px;background-color: rgba(255,255,255,0.9);z-index: 98;-webkit-transition: all .4s ease 0s,background .6s ease .2s;transition: all .4s ease 0s,background .6s ease .2s;-webkit-overflow-scrolling: touch;overflow-scrolling: touch;border-bottom: 1px solid #ececec;}

.sec .site-header{background: #fff;padding: 30px 0 10px 0}
.sec .site-header .logo{text-align: center;margin-bottom: 25px;}
.sec .site-header.is_fixed{margin-top: -100px}

#humberger{display: none}
}

@media screen and (max-width:768px){
.site-header{position:absolute;top: 0;left: 0;width: 100vw;z-index: 98;}
.site-header h1{font-size: 1.8rem;letter-spacing: 0.2em;font-weight: bold;padding: 24px 0 0 12px;}
.site-header h1 a{color: #3C6B43;}
.site-header .sp{text-align: center;margin-top: 30px;display: none}
.site-header .sp a{color: #000;text-decoration: underline;}
.site-header .sp h2{margin-bottom: 12px}
.site-header .sp p{line-height: 2em}
.site-header li a span.jp {font-size: 1rem;color:#3C6B43;margin-left: 12px }
}

@media screen and (max-width: 896px) and (orientation: landscape){/*スマホ横向き*/
.sec .site-header ul li:first-child img{width:40%!important;height: auto}
}



/****************************************
footer
*****************************************/
.site-footer{background: #E5E5E5;color: #3C6B43;padding: 60px 0;position: relative;z-index: 2}
.site-footer .logo{float: left;margin-right: 30px;}
.site-footer h2{font-size: 1.8rem;margin-bottom: 12px;letter-spacing: 0.2em;}
.site-footer a{color:#3C6B43 }
.site-footer a img:hover{opacity: 0.7}
.site-footer a img{border-bottom: 3px solid #d05a2c;width: 280px;height: auto}
.site-footer address{font-size:1.3rem;margin-top: 15px;font-style:normal; }

#pagetop{position:fixed;right:10px;bottom:10px;cursor:pointer;z-index:9999}

@media screen and (max-width:768px){
.site-footer{text-align: center;}
.site-footer .inner ul li.col2{display:block;width: 80%;margin: auto}
.site-footer .inner ul li:nth-child(1){-webkit-box-ordinal-group:3;-ms-flex-order:2;-webkit-order:2;order:2;}
.site-footer .inner ul li:nth-child(2){-webkit-box-ordinal-group:1;-ms-flex-order:1;-webkit-order:1;order:1;margin-bottom: 40px}
.site-footer a img{width:100%;height: auto}
#pagetop{width: 50px}
}
@media screen and (max-width: 896px) and (orientation: landscape){/*スマホ横向き*/
.site-footer .freedial{font-size: 3rem;}
.site-footer .boederR{padding-left: 15px;padding-right: 15px;border-bottom:none}
}

/****************************************
2階層目
*****************************************/
.sec main{margin-top: 168px;padding-bottom: 40px;}
main h1.pagetitle{background: #3c6b43;font-size: 4.0rem;color: #fff;letter-spacing: 0.2em;text-indent:0.2em;text-align: center;padding: 34px 0;}
main div.mainimg{height: 400px; background: url("../images/company/mainimg.jpg") no-repeat center center;background-size: cover;position: relative}
main div.mainimg:before {  display: block;  content: '';  position: absolute;  top: 4px;  width: 100%;  left: 0;  border: 2px solid #d05a2c;}
main div.mainimg img{display: none}

main h2.title{border-bottom: 1px solid #3C6B43;background: url("../images/top/pagetitle_line.png") no-repeat center bottom;padding-bottom: 12px; font-size: 2rem;letter-spacing: 0.2em;text-indent:0.2em;line-height: 2em;color: #3c6b43;font-weight: normal;text-align: center;position: relative}
main h2.title .act{position: absolute;top: 0;left: 0;right: 0;margin: auto;display: none}

#pan{text-align:left;font-size:85%;padding:12px 0;}
#pan li{display:inline-block;text-align:left;position:relative;color: #000}
#pan li a{padding-right:20px;color: #000}
#pan li a:after{content:'';width:4px;height:4px;border:0px;border-top:solid 1px #000;border-right:solid 1px #000;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);position:absolute;top:50%;right:8px;margin-top:-3px;}

#mainarea{position: relative}
.mainvisual img{max-width: 100%;height: auto}
#pagelink{position: absolute;left: 0;top: 0;background: rgba(71,0,0,0.8);padding: 18px 0;width: 100%}
#pagelink ul{border-right: 1px solid #fff;}
#pagelink li{text-align: center;border-left: 1px solid #fff;}
#pagelink a:link{color: #fff}


@media screen and (max-width:768px){
.sec main{margin-top: 80px;}

#pan{display: none}
main h1.pagetitle{font-size: 2.5rem;padding: 20px 0;}
main div.mainimg{height: auto!important; background: none!important;text-align: center!important}
main div.mainimg img{display:block!important;width: 100%}
main h2.title{background: url("../images/top/pagetitle_line.png") no-repeat left bottom;font-size: 1.6rem}
main h2.title img{width: 70%;position: absolute;left: 0;right: 0;margin: auto;top: 0}

}


.button {  position: relative;  display: inline-block;  padding: .9em 3.6em;  border: 2px solid #fff;  color: #fff;  text-align: center;  text-decoration: none;  outline: none;  transition: all .3s;  letter-spacing: 0.1em;text-indent:0.1em;}
.button::before,
.button::after,
.button span::before,
.button span::after {  position: absolute;  z-index: 2;  content: '';  width: 0;  height: 0;  border: 2px solid transparent;  transition: all .3s;}
.button::before {  top: -2px;  left: -2px;  border-left-color: #D8E724;}
.button::after {  bottom: -2px;  right: -2px;  border-right-color: #D8E724;}
.button span::before {  bottom: -2px;  left: -2px;  border-bottom-color: #D8E724;}
.button span::after {  top: -2px;  right: -2px;  border-top-color: #D8E724;}
.button:hover {  color: #D8E724;}
.button:hover::before,
.button:hover::after {  height: 100%;  visibility: visible;}
.button:hover span::before,
.button:hover span::after {  width: 100%;  visibility: visible;}


/****************************************
effect-fade
*****************************************/
.effect-fade {
opacity : 0;
transform : translate(0, 45px);
transform : translate(0, 50px);
transition : all 1500ms;
}

.effect-fade.effect-scroll{
opacity : 1;
transform : translate(0, 0);
}



@media screen and (max-width:768px){
img{max-width:100%;height:auto;}
.site-header ul{display: none}

#humberger{display: block;background:#396B40;line-height:1em;color:#fff;position:fixed;top:10px;right:10px;z-index:98;width:50px;padding:9px 10px 0px;height:50px;cursor:pointer;}
.icon-bar{height:2px;background:#fff;display:block;margin-bottom:6px;-webkit-transition:all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);-moz-transition:all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);-o-transition:all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);transition:all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);-webkit-transition-timing-function:cubic-bezier(1.000, 0.000, 0.000, 1.000);-moz-transition-timing-function:cubic-bezier(1.000, 0.000, 0.000, 1.000);-o-transition-timing-function:cubic-bezier(1.000, 0.000, 0.000, 1.000);transition-timing-function:cubic-bezier(1.000, 0.000, 0.000, 1.000);}
.icon-bar.last{margin-bottom:0}
.fixed-content{right:inherit;width:100%;z-index:2;-webkit-transition:all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);-moz-transition:all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);-o-transition:all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);transition:all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);-webkit-transition-timing-function:cubic-bezier(1.000, 0.000, 0.000, 1.000);-moz-transition-timing-function:cubic-bezier(1.000, 0.000, 0.000, 1.000);-o-transition-timing-function:cubic-bezier(1.000, 0.000, 0.000, 1.000);transition-timing-function:cubic-bezier(1.000, 0.000, 0.000, 1.000);}
#overlay{z-index:-1;opacity:0;background:#fff;left:0;top:0;width:100%;height:100%;position:fixed;-webkit-transition:all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);-moz-transition:all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);-o-transition:all 400ms cubic-bezier(1.000,0.000,0.000,1.000);transition:all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);-webkit-transition-timing-function:cubic-bezier(1.000, 0.000, 0.000,1.000);-moz-transition-timing-function:cubic-bezier(1.000, 0.000, 0.000, 1.000);-o-transition-timing-function:cubic-bezier(1.000, 0.000, 0.000, 1.000);transition-timing-function:cubic-bezier(1.000, 0.000, 0.000, 1.000);}

body.drawer-opened .site-header{background: #fff;color: #000;position: fixed;left: 0;top: 0;
position: fixed;width: 100%;z-index: 50;
overflow:hidden;height: 100%; overflow: auto;-webkit-overflow-scrolling: touch;
-webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);-moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);  -o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);-moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);  -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */ 

}

body.drawer-opened .site-header ul{display: block;text-align: center;width: 80%;margin:20px auto 0}
body.drawer-opened .site-header ul li a{display: block;padding: 22px 0;color: #000;border-bottom: 1px solid #ccc}
body.drawer-opened .site-header .sp{display: block}

body.drawer-opened #page{top:0px;box-shadow: 1px 0 2px #000;-webkit-box-shadow: 1px 0 2px #000;}
body.drawer-opened .fixed-content{top:0px;}

body.drawer-opened #humberger .icon-bar{background:  #fff;}
body.drawer-opened #humberger :nth-child(1){transform:translate(0,8px) rotate(45deg);-webkit-transform:translate(0,8px) rotate(45deg);}
body.drawer-opened #humberger :nth-child(2){transform:translate(-20px ,0);-webkit-transform:translate(-20px ,0);opacity:0;}
body.drawer-opened #humberger :nth-child(3){transform:translate(0,-8px) rotate(-45deg);-webkit-transform:translate(0,-8px) rotate(-45deg);}
body.drawer-opened #overlay{z-index: 3;opacity: 0.3;top:0px;}
}

@media screen and (max-width: 896px) and (orientation: landscape){/*スマホ横向き*/
}