@charset "utf-8";
/*!
 * Smartphone Theme
 */


/*===============================================
 Frame Design
===============================================*/
.pc{display: none!important;}
.sp{display: block!important;}
.flexBox { display: block; margin-bottom: 0;}
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12 { width: 100%; }
.docs{ width: 100%;}
.docsfr{ width: 100%; padding: 20px 20px ;}
.outlineTxt{ font-size: 14px; }


/*===============================================
 layout
===============================================*/

#topCopy{display: none;}
main{
  position: absolute;
  top: 0; right:0; left:0; margin: auto;
  width: 480px; padding-top: 34px;
}
header{
  position: fixed; top: 0; left: 0;
  width: 100%; height: 60px;
  margin: 0 auto; z-index: 999;
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
}
header .siteLogo{ margin-bottom: 0px; color: #000; padding: 10px 10px 0 15px;}
header .siteLogo img{ filter: none; width: 140px;}
header .headerInqSp{
  display: block; position: absolute;
  right: 70px; top: 10px; width: 42px; height: 51px;
  cursor: pointer; z-index: 99999; text-align: center;
}
header .headerInqSp a{
  display: block; position: relative;
  width: 42px; height: 42px; border-radius: 50%;
  background-color: #0d3620;
}
header .headerInqSp img{
  filter: invert(99%) sepia(92%) saturate(0%) hue-rotate(196deg) brightness(107%) contrast(100%); position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
header .globalNav{ margin-bottom: 0px;}
header .requestInfo{ display: none;}


/*===============================================
 hanburger
===============================================*/
#hanburger { display: none;}

/*---------------------menu button*/
.navToggle {
  display: block; position: absolute;
  right: 20px; top: 5px; width: 42px; height: 51px;
  cursor: pointer; z-index: 99999; text-align: center;
}
.navToggle span {
  display: block; position: absolute;
  width: 30px; border-bottom: solid 3px #0d3620;
  transition: .35s ease-in-out; left: 6px;
}
.navToggle span:nth-child(1) { top: 9px; }
.navToggle span:nth-child(2) { top: 18px; }
.navToggle span:nth-child(3) { top: 27px; }
.navToggle span:nth-child(4) {
  border: none; color: #0d3620;
  font-size: 10px; font-weight: bold; top: 27px;
}
#hanburger:checked + .navToggle span:nth-child(1) {
  top: 18px; left: 6px; transform: rotate(-45deg); border-bottom: solid 3px #0d3620;
}
#hanburger:checked + .navToggle span:nth-child(2),
#hanburger:checked + .navToggle span:nth-child(3) {
  top: 18px; transform: rotate(45deg); border-bottom: solid 3px #0d3620;
}
#hanburger:checked + .navToggle span:nth-child(4){color: #0d3620;}

/*---------------------/menu button*/


/*===============================================
 navigation
===============================================*/
.globalNav {
  display: block; visibility: hidden;
  width: 100vw; height: 100%;  /*width: 480px;*/ 
  position: fixed;
  margin: auto;
  top: 60px; right: 0; left: 0;
  padding: 0; color: #fff;
  background: #f2eee4;
  /*overflow-y:  scroll;*/
  text-align: left; z-index: 99;
}

/*----*/
.globalNav ul{margin-bottom: 40px;}
.globalNav li{ margin-bottom: 20px;}
.globalNav li:first-child{margin-top: 70px;}

.globalNav li a{background-color: inherit; text-align: center; color: #322e21;}
.globalNav li a span { position: static; transition: all 0s; text-shadow: none;}
.globalNav li a span:nth-child(2) { display: none;}
.globalNav li a:hover{ top: 0;}
.globalNav li a:before{content:none;}

.globalNav .requestInfoSp{ display: block; text-align: center; width: 280px; margin: 0 auto;}
.globalNav .requestInfoSp .contactTel img{
  filter: invert(66%) sepia(69%) saturate(847%) hue-rotate(342deg) brightness(97%) contrast(89%);
  position: relative; top:5px; margin-right: 10px;
}
.globalNav .requestInfoSp .contactTel a{
  text-decoration: none; color: #322e21;
  font-size: 28px; font-weight: bold;
}
.globalNav .requestInfoSp .btInq{margin-bottom: 20px;}
.globalNav .requestInfoSp .btInq a{transition-duration: 0s;}

/*----*/

#hanburger:checked ~ .globalNav { 
  visibility: visible;
  animation-name:globalNavAnime;
  animation-duration:0.4s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes globalNavAnime {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}


/*===============================================
 device sizes below 540px
===============================================*/
@media (max-width:540px){
  main{ width: 100%;}
  .globalNav {width: 100vw;}
}



/*########################################################################
 top contents
########################################################################*/
/*===============================================
 top common
===============================================*/
#topVisual .topVisualInner{left:0;}
@media (max-width:540px){
  #topVisual .topVisualInner{width: 100%;}
}

a.anchorLink{
    display: block;
    padding-top: 60px;
    margin-top: -60px;
}
/*===============================================
 about
===============================================*/
@media (max-width:480px){
 #about .diagram .fig1 img, #about .diagram .fig3 img{width: 138px;}
}


/*########################################################################
 under contents
########################################################################*/
/*===============================================
 common
===============================================*/
#breadcrumbs{padding: 30px 0 0 0;}



/*===============================================
 
===============================================*/
/*===============================================
 
===============================================*/
/*===============================================
 
===============================================*/
/*===============================================
 
===============================================*/