@charset "utf-8";


.sponly {
	display: none;
}
.pconly {
	display: block;
}

/* modal menu
---------------------------------------------------------------*/
#hamburger {
  position: fixed;
  top: 3%;
  right: 2%;
  z-index: 800;
}



.checkbox-wrap{
  /*line-height: 0.9em;*/
}
.label-checkbox input[type="checkbox"]{
  display: none;
}
.label-checkbox{
  cursor: pointer;
  position: relative;
}
.label-checkbox .lever{
  display: block;
  color: #ccc;
  font-weight: normal;
  display: inline-block;
  padding: 0px 0px;
  /*border: 1px solid #e5e5e5;*/
  border-radius:30px;
  margin-right: 10px;
  margin-bottom: 10px;
  -webkit-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
  height: 60px;
  width: 120px;
  background-color:rgba(43,136,58,0.4);
}
.label-checkbox .lever ul {
  position: absolute;
  top:-37px;
  left: 65px;
  color: #fff;
  font-size: 15px;
  -webkit-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.label-checkbox .lever ul li.menu {
  display: block;
}
.label-checkbox .lever ul li.close {
  display: none;
}
.label-checkbox .lever:before{
  content:'';
  position: absolute;
  left: 6px;
  top:-54px;
  background: #2b883a;
  width: 50px;
  height: 50px;
  border-radius:100%;
  -webkit-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.label-checkbox:hover .lever:before{
   border-color: #ddd;
}
.label-checkbox input[type="checkbox"]:checked + .lever{
   /*background: #5cb85c;*/
}
.label-checkbox input[type="checkbox"]:checked + .lever{
   /*border-color:#5cb85c;*/
}
.label-checkbox input[type="checkbox"]:checked + .lever ul {
  left: 16px;
}
.label-checkbox input[type="checkbox"]:checked + .lever ul li.menu {
  display: none;
}
.label-checkbox input[type="checkbox"]:checked + .lever ul li.close {
  display: block;
}
.label-checkbox input[type="checkbox"]:checked + .lever:before{
   left: 64px;
}

.button_container {
  position: absolute;
  top:-38px;
  left: 18px;
  height: 24px;
  width: 26px;
  cursor: pointer;
  z-index: 100;
  -webkit-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  transition: all 300ms cubic-bezier(1, 0, 0, 1);
}
.button_container:hover {
  opacity: .7;
}
.label-checkbox input[type="checkbox"]:checked ~ .button_container {
  left: 76px;
}
.label-checkbox input[type="checkbox"]:checked ~ .button_container .top {
  -webkit-transform: translateY(7px) translateX(0) rotate(45deg);
          transform: translateY(7px) translateX(0) rotate(45deg);
  background: #FFF;
}
.label-checkbox input[type="checkbox"]:checked ~ .button_container .middle {
  opacity: 0;
  background: #FFF;
}
.label-checkbox input[type="checkbox"]:checked ~ .button_container .bottom {
  -webkit-transform: translateY(-7px) translateX(0) rotate(-45deg);
          transform: translateY(-7px) translateX(0) rotate(-45deg);
  background: #FFF;
}
.button_container span {
  background: #FFF;
  border: none;
  height: 1px;
  width: 100%;
  position: absolute;
  top: 1px;
  left: 0px;
  -webkit-transition: all .35s ease;
  transition: all .35s ease;
  cursor: pointer;
}
.button_container span:nth-of-type(2) {
  top: 8px;
}
.button_container span:nth-of-type(3) {
  top: 15px;
}

.overlay {
  position: fixed;
  background: #000;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
  z-index: 600;
}
.overlay.open {
  opacity: .7;
  visibility: visible;
  height: 100%;
}
.overlay.open li {
  -webkit-animation: fadeInRight .5s ease forwards;
          animation: fadeInRight .5s ease forwards;
  -webkit-animation-delay: .35s;
          animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .45s;
          animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .50s;
          animation-delay: .50s;
}
.overlay nav {
  position: relative;
  height: 70%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 30px;
  line-height: 1.2em;
  font-weight: 600;
  text-align: center;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
  height: calc(100% / 7);
  min-height: 30px;
  position: relative;
  opacity: 0;
}
.overlay ul li a {
  display: block;
  position: relative;
  color: #FFF;
  text-decoration: none;
  overflow: hidden;
}
.overlay ul li a.btn_recruit {
  border: #FFF solid 1px;
  padding: 8px 16px;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;
}
.overlay ul li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 3px;
  background: #FFF;
  -webkit-transition: .35s;
  transition: .35s;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}



/* footer
---------------------------------------------------------------*/
footer {
  width: 100%;
}
footer nav ul {
  width: 100%;
  padding: 40px 0;
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:flex;
  -webkit-box-lines:multiple;
  -moz-box-lines:multiple;
  -webkit-flex-wrap:wrap;
  -moz-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  -webkit-box-pack:center;
  -moz-box-pack:center;
  -webkit-flex-pack:center;
  -moz-flex-pack:center;
  -ms-flex-pack:center;
  -webkit-justify-content:center;
  -moz-justify-content:center;
  justify-content:center;
}
footer nav ul li {
  font-size: 124%;
  font-weight: 700;
  padding: 0 15px;
  line-height: 1em;
}
footer nav ul li a {
  color: #000;
  -webkit-transition: .25s ease;
  transition: .25s ease;
}
footer nav ul li a:hover {
  color:#2b883a;
  -webkit-transition: .25s ease;
  transition: .25s ease;
}


.footer_block {
  max-width: 1100px;
  height: auto;
  margin: 0 auto;
  padding: 0 0 30px;
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:flex;
  -webkit-box-pack:justify;
  -moz-box-pack:justify;
  -webkit-flex-pack:justify;
  -moz-flex-pack:justify;
  -ms-flex-pack:justify;
  -webkit-justify-content:space-between;
  -moz-justify-content:space-between;
  justify-content:space-between;
}
.flogo {
  width: 40%;
  /*
  width: 40%;
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:flex;
  */
}
.flogo .flex {
  width: 100%;
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:flex;
  flex-wrap: wrap;
}
.flogo div {
  width: 50%;
  height: auto;
}
.flogo div img {
  width: 100%;
  height: auto;
}
.flogo p {
  font-weight: 700;
  width: calc(50% - 10px);
  height: auto;
  line-height: 1.4em;
  padding: 9px 0 0 10px; 
}
.flogo .japico {
  width: 100%;
  padding-left: 0;
}
.flogo .japico img {
  width: 75px;
  height: auto;
}
.address_set {
  background-repeat: no-repeat;
  background-image: url(../images/icon/access_icon.png);
  background-position: 0 2px;
  padding: 0 0 0 16px;
}
.address_set p {
  line-height: 1.6em;
}
.address_set p a {
  display: inline-block;
  margin-left: -20px;
  padding-left: 20px;
}


.pmark_area {
  padding: 20px 0;
  background-color: #EDEDED;
}
.pmark_block {
  max-width: 1000px;
  margin: 0 auto;
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:flex;
}
.pmark_logo {
  padding: 0 20px 0 0;
}
.pmark_logo img {
  width: 75px;
  height: auto;
}
.pmark_txt p {
  line-height: 1.6em;
  font-size: 93%;
}


.copyright {
  padding: 20px 0;
  text-align: center;
}



/* pagetop
---------------------------------------------------------------*/

#pagetop {
  position: fixed;
  right: 20px;
  bottom: 0;
  z-index: 1500;
}
#pagetop a {
  overflow: hidden;
  outline: none;
}



/* secondly
---------------------------------------------------------------*/

.subpage-header {
	position: relative;
	width: 100%;
	height: 498px;
	background-color: #F8F8F8;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 0;
	color: #FFF;
	z-index: 1
}
.subpage_header_third {
	position: relative;
	width: 100%;
	height: 298px;
	background-color: #F8F8F8;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 0;
	color: #FFF;
	z-index: 1
}
.subpage-header-mask {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin-bottom: auto;
	background: rgba(21,12,51,.35);
	z-index: 0
}
.subpage-header .content-inner {
	position: relative;
	height: 100%;
  z-index: 1
}
.subpage_header_third .content-inner {
	position: relative;
	height: 100%;
  z-index: 1
}
.header-clip, .header-clip svg {
	position: absolute;
	right: 0;
	left: 0;
}
.hgroup {
  position: relative;
  top:47%;
  -moz-transform: translate(0%, -47%);
  -webkit-transform: translate(0%, -47%);
  transform: translate(0%, -47%);
}
.subpage-header h1 {
	font-size: 36px;
	font-weight: 500;
	letter-spacing: .25em;
  text-align: center;
  line-height: 1em;
}
.subpage-header h1 span {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .3em;
  text-align: center;
  line-height: 1em;
  padding: 15px 0 0;
}
.subpage_header_third h1 {
	font-size: 36px;
	font-weight: 500;
	letter-spacing: .25em;
  text-align: center;
  line-height: 1em;
}
.subpage_header_third h1 span {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .3em;
  text-align: center;
  line-height: 1em;
  padding: 15px 0 0;
}
.header-clip {
	top: auto;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 20px
}
.header-clip svg {
	top: 0;
	bottom: 0px;
	margin: auto;
	width: 120px;
	height: 20px
}
.subpage-header .scroll-down {
	position: absolute;
	top: auto;
	bottom: 0;
  display: block;
	left: 0;
	right: 0;
	margin: auto;
	width: 64px;
	height: 25px;
	z-index: 1;
	cursor: default;
}
.subpage_header_third .scroll-down {
	position: absolute;
	top: auto;
	bottom: 0;
}
.header-clip path {
	fill: #F8F8F8;
}
.header-clip .fill {
	position: absolute;
	bottom: 0;
	width: -webkit-calc(50% - 59px);
	width: calc(50% - 59px);
	height: 20px;
	background: #F8F8F8;
}
.header-clip .fill-left {
	left: 0
}
.header-clip .fill-right {
	right: 0
}
.subpage-header .scroll-down {

}
.about-header {
	background-image: url(../images/header-about.jpg);
}
header {
  position: relative;
}
.mark {
  position: absolute;
  top:30px;
  left: 30px;
}

.info_area {
  width: auto;
  height: auto;
  background-color: #F8F8F8;
  padding: 50px 10px 0;
}
.info_block {
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
  background-color: #FFF;
}
.info_inner {
  padding: 40px;
}
.info_inner h2 {
  text-align: center;
  line-height: 1.3em;
  font-size: 200%;
  font-weight: 900;
  padding: 0 0 15px;
}
.info_inner h3 {
  text-align: center;
  line-height: 1.3em;
  font-size: 185%;
  font-weight: 900;
  padding: 0 0 5px;
}
.info_inner p {
  line-height: 1.7em;
  text-align: justify;
}
.info_inner ul {
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:flex;
  -webkit-box-lines:multiple;
  -moz-box-lines:multiple;
  -webkit-flex-wrap:wrap;
  -moz-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  -webkit-box-pack:justify;
  -moz-box-pack:justify;
  -webkit-flex-pack:justify;
  -moz-flex-pack:justify;
  -ms-flex-pack:justify;
  -webkit-justify-content:space-between;
  -moz-justify-content:space-between;
  justify-content:space-between;
}
.info_inner ul li {
  width: 440px;
  height: auto;
  padding: 20px 0;
}
.info_inner ul li:nth-child(1) { animation-delay: 0.0s; }
.info_inner ul li:nth-child(2) { animation-delay: 0.2s; }
.info_inner ul li:nth-child(3) { animation-delay: 0.4s; }
.info_inner ul li:nth-child(4) { animation-delay: 0.6s; }
 
 
.info_inner ul li .img_box img {
  width: 100%;
  height: auto;
}
.info_inner ul li .txt_box h4 {
  font-size: 154%;
  text-align: center;
  font-weight: 900;
  line-height: 1.2em;
  padding: 16px 0;
}
.info_inner ul li .txt_box dl {
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:flex;
  -webkit-box-lines:multiple;
  -moz-box-lines:multiple;
  -webkit-flex-wrap:wrap;
  -moz-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}
.info_inner ul li .txt_box dt {
  width: 40%;
  line-height: 1.6em;
  font-weight: 900;
  padding: 5px 0;
}
.info_inner ul li .txt_box dd {
  width: 60%;
  line-height: 1.6em;
  padding: 5px 0;
}

.contact_tel {
  text-align: center;
  background-color: #2b883a;
  color: #FFF;
  padding: 40px 0;
}
.contact_tel a {
  color: #FFF;
}
.contact_tel h2 {
  font-size: 139%;
  line-height: 1.4em;
  font-weight: 900;
  padding: 0 0 20px;
}
.contact_tel p {
  font-size: 231%;
  font-weight: 900;
  line-height: 1em;
  padding: 0 0 0 1.1em;
  background-image: url(../images/icon/tel.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  display: inline-block;
}

/*================================================================*/
/* @SP
/*================================================================*/
@media all and (max-width: 767px) {
  
      .sponly {
        display: block;
      }
      .pconly {
        display: none;
      }

      footer nav ul {
        padding: 15px 0;
        display:block;
        text-align: center;
      }
      footer nav ul li {
        padding: 8px 0px;
      }


      .footer_block {
        padding: 0 10px 30px;
        display:block;
        text-align: center;
      }
      .flogo {
        width: 100%;
        display:block;
        padding: 0 0 10px;
      }
      .flogo div {
        margin: 0 auto;
      }
      .flogo div img {
        width: 100%;
        height: auto;
      }
      .flogo p {
        width: auto;
        padding: 9px 0px 0 0px; 
        text-align: left;
        display: inline-block;
      }
      .flogo .japico {
        text-align: center;
      }
      .address_set {
        padding: 0 0 10px 16px;
        text-align: left;
      }
  
      #hamburger {
        top: 2%;
        right: 0.3%;
      }

      .mark {
        top:20px;
        left: 12px;
      }
      .mark img {
        width: 30px;
        height: auto;
      }
  
      .pmark_area {
        padding: 20px 10px;
        background-color: #EDEDED;
      }
  
      .subpage-header {
        height: 235px;
      }
      .subpage_header_third {
        height: 235px;
      }
      .info_area {
        padding: 20px 10px 0;
      }
      .info_inner {
        padding: 15px;
      }
      .info_inner h2 {
        text-align: left;
        font-size: 170%;
        padding: 0 0 10px;
      }
  
      .contact_tel {
        padding: 40px 10px;
      }
      .contact_tel h2 {
        text-align: left;
      }
  
}