/*
font-size  h1=41.9 h2=30.6 h3=25.9 h4=22.1  67.8  109.7
mobilewide.css 26.25em  420px
tablet.css 37.5em  600px
narrowdesktop.css 60em  960px
desktop.css 80em  1280px
widescreen.css 100em  1600px
**INDEX**

1.RESET
2.Font Size
3.Basic
  a.Modal Window
  b.Logo
  c.Grid Layout
  d.Front Page Back Images
  e.Pdf Link
  f.Footer & Mobile navigation
  g.出典
4.Layout
5.Drawer Menu
6.Front Page
7.Spray Insulation
8.Airtightness Measured
9.Solution Info
10.Procedure
11.Technology
12.Company Info
  13.PRIVACY POLICY
14.Case Study
15.Works
16.Recruit
17.Catalog
18.Contact
19.Footer
20.Error Page
*/

/* ----------------------------------------------------------------------
1.RESET
---------------------------------------------------------------------- */

.site-header{
  position: relative;
}

#pc-nav{
  display: none;
}

#pc-view{
  display: none;
}

cite{
  font-size: 9.9px;
}

.phone-phrase br{
  display: none;
}

/* ----------------------------------------------------------------------
2.Font Size
---------------------------------------------------------------------- */

/* h1=41.9 */

#front-title,
.page-title{
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 41.9px;
  line-height: 1.1;
  text-align: center;
  padding: .618em 2.5vw;
}

/* h2=30.6 */

.section-title{
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 30.9px;
  line-height: 1.1;
}

/* h3=25.9 */

.emh3{
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 25.9px;
}

/* h4=22.1 */

.emh4{
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 22.1px;
}

/* ----------------------------------------------------------------------
3.Basic
---------------------------------------------------------------------- */


/* Basic ⇒ Modal Window
---------------------------------------------------------------------- */

.popup a{
  pointer-events:none;
}

.extdisp{
  display: none;
}

.m-wrapper{
  display: none;
}

/* Logo
---------------------------------------------------------------------- */

#header-logo{
  left: 10px;
  position: absolute;
  top: 10px;
  z-index: 100;
}

.header-logo{
  width: 100px;
}

/* Basic ⇒ Grid Layout
---------------------------------------------------------------------- */

.fift-list{ /* frontpage */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 2.5vw;
  grid-row-gap: 2.5vw;
}

.catalog-item{
  display: grid;
  grid-template-columns:  1fr 3fr;
}

.company-item,
.recruit-item{
  display: grid;
  grid-template-columns:  6rem auto;
}

.area-item{
  display: grid;
  grid-template-columns: 6em 1fr 6em;
  text-align: center;
}

.link-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.f-area-item{
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.presen-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 2.5vw;
  grid-row-gap: 2.5vw;
}

/* --------------------------------------------------- End Grid Layout */

/* Front Page Back Images */

.firs{
  background-image: url("images/firs.jpg");
  background-size: cover;
  background-position: center;
}

.thir{
  background-image: url("images/thir.jpg");
  background-size: cover;
  background-position: center right;
}

/* Contents Banner Back Images */
.sib{
  background-image: url("images/sib.jpg");
}

.atm{
  background-image: url("images/atm.jpg");
}

.sol{
  background-image: url("images/sol.jpg");
}

.tec{
  background-image: url("images/tec.jpg");
}

.wor{
  background-image: url("images/wor.jpg");
}

.pro{
  background-image: url("images/pro.jpg");
}

.cat{
  background-image: url("images/cat.jpg");
}

.sig{
  background-image: url("images/sig.jpg");
}

.clc{
  background-image: url("images/clc.jpg");
}

.clb{
  background-image: url("images/clb.jpg");
}

.cst{
  background-image: url("images/cst.jpg");
}

.def{
  background-image: url("images/def.jpg");
}

.cds{
  background-image: url("images/cds.jpg");
}

.cmp{
  background-image: url("images/cmp.jpg");
}

.rec{
  background-image: url("images/rec.jpg");
}

.c-banner{
  background-image: url("images/spray-insulation.jpg");
  background-size: cover;
  padding: 20vw 0 8vw;
}

.c-banner-mea{
  background-image: url("images/airtightness-meas.jpg");
  background-size: cover;
  padding: 22vw 0 14vw;
}

.contents-banner{ /* 共通 */
  background-position: right center;
  background-size: cover;
  height: calc( 20vw + 70px);
  position: relative;
  vertical-align: bottom;
}

.cb-caption{
  color: #F6F9EA;
  font-size: 5vw;
  font-family: 'Anton', sans-serif;
  position: absolute;
  left: 2.5vw;
  line-height: 1.15;
  margin-right: 5vw;
  top: calc(1.3vw + 70px);
  text-align: left;
  z-index: 2;
}

video{
  width: 100%;
}

/* PDF Link */

.to-pdf{
  border: 2px solid #ff2116;
  position: relative;
}

.fa-file-pdf{
  color: #FF2116;
  font-size: 30.6px;
  left: 1rem;
  position: absolute;
  top: calc(50% - 15.3px);
  vertical-align: middle;
}

.to-pdf .pdf-name{
  line-height: 1.5rem;
  vertical-align: middle;
}

.to-pdf .pdf-name{
  display: block;
  margin: 1rem 1rem 1rem 3rem;
}

/* Anker */

.to-page{
  border-bottom: 2px dotted #00f;
}

/* Basic ⇒ Footer & Mobile navigation
---------------------------------------------------------------------- */

#drawer .current-menu-item a{
  color: #FABE47;
}

#drawer .current-menu-item li a{
  color: #fff;
}

#site-footer #footer-nav-list .current-menu-item a{
  color: #FABE47;
}

/* Basic ⇒ 出典
---------------------------------------------------------------------- */

.cite-note{
  bottom: 0;
  font-size: 11px;
  font-style: italic;
  right: 0;
  position: absolute;
  text-align: right;
}

.cite-note a{/* Anker */
  border-bottom: 2px dotted #00f;
}

/* ----------------------------------------------------------------------
4.Layout
---------------------------------------------------------------------- */

/* Side Margin */

.breadcrumbs{
  background-color: #F1F1EF;
  padding: 1em 2.5vw;
}

/* P Margin */

.parag-zero{
  margin-bottom: 0;
}
.parag-one{
  margin-bottom: 1rem;
}

.parag-tow{
  margin-bottom: 2rem;
}

.parag-three{
  margin-bottom: 3rem;
}

.parag-four{
  margin-bottom: 4rem;
}

.parag-five{
  margin-bottom: 5rem;
}

.parag-six{
  margin-bottom: 6rem;
}

.parag-vw{
  margin-bottom: 2.5vw;
}

.rl-full{
  background-color: #F1F1EF;
  padding: 4rem 0 2rem;
}

.rl-margin{
  margin-left: 2.5vw;
  margin-right: 2.5vw;
}

.first-col{ /* width 1279px Column */
  margin-left: auto;
  margin-right: auto;
  max-width: 1279px;
}

.sec-col{ /* width 910 Column */
  margin-left: auto;
  margin-right: auto;
  max-width: 910px;
}

.third-col{ /* width 791 Column */
  margin-left: auto;
  margin-right: auto;
  max-width: 488px;
}

.alCen{
  text-align: center;
}

.border-one{
  border: 1px solid #b8baaf;
}

.padding-one{
  padding: 1em;
}

/* ----------------------------------------------------------------------
5.Drawer Menu
---------------------------------------------------------------------- */

.drawer-menu{
  margin: 1em;
}

.drawer-menu > .menu-item a{
  border-bottom: 1px solid #63665b;
  line-height: 3em;
  padding: 0 .5em;
  position: relative;
}

.drawer-menu > .menu-item a:hover{
  background-color: #63665b;
}

.drawer-menu > .menu-item a{
  color: #F6F9EA;
  display: block;
}

.drawer-menu > .menu-item a::after{
  content: "\f105";
  font-family: FontAwesome;
  position: absolute;
  right: .5em;
}

.drawer-menu > .menu-item > .sub-menu {
  background-color: #3A3B37;
}

.drawer-menu .menu-item .sub-menu > .menu-item a{
  padding: 0 .5em 0 2em;
}

.drawer-menu > .current-menu-item,
.drawer-menu .menu-item .sub-menu > .current-menu-item{
  background-color: #63665b;
}

/* ----------------------------------------------------------------------
6.Front Page
---------------------------------------------------------------------- */


@media screen and (orientation: landscape){ /* 横向き */

  #front-banner{
    background-color: #808080;
    position: relative;
    z-index: 2;
  }
  
  .front-img{
    padding-top: 70px;
    width: 100%;
  }
  
  #front-caption{
    left: 0;
    top: 70px;
    position: absolute;
  }
  
  .catch-first{
    color: #3A3B37;
    font-family: 'Anton', sans-serif;
    font-size: 12vw;
    left: 3vw;
    letter-spacing: .05em;
    line-height: 1.2;
    position: absolute;
    transform: rotate(-3deg);
  }
  
  .catch-sec{
    color: #F6F9EA;
    font-size: 7vw;
    font-family: 'Anton', sans-serif;
    left: 43vw;
    line-height: 1.2;
    top: 1vw;
    position: absolute;
  }
}

@media screen and (orientation: portrait){ /* 縦向き */

  #front-banner{
    background-color: #7F7E7F;
    height: 61.8vh;
    overflow: hidden;
    position: relative;
    z-index: 2;
  }
  
  .front-img{
    bottom: 5px;
    position: absolute;
    width: 100%;
  }
  
  #front-caption{
    left: 0;
    top: 70px;
    position: absolute;
  }
  
  .catch-first{
    color: #3A3B37;
    font-family: 'Anton', sans-serif;
    font-size: 12vh;
    left: 3vw;
    letter-spacing: .05em;
    line-height: 1.2;
    position: absolute;
    top: 2vh;
    transform: rotate(-3deg);
  }
  
  .catch-sec{
    color: #F6F9EA;
    font-size: 7vh;
    font-family: 'Anton', sans-serif;
    left: 43vw;
    line-height: 1.2;
    top: 1vh;
    position: absolute;
  }
}

/* First Contents */

.firs{
  padding: 2.5vw 0;
}

.firs-contents{
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  padding: 4vw;
}

.firs-title{
  color: #3C6432;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 500;
  font-size: 8vw;
  line-height: 1.2;
  margin-bottom: 2rem;
  text-align: center;
  text-shadow: 0px -1px 2px #fff;
}

.firs-phrase{
  font-size: 20.1px;
}

/* Second Contents */

.seco{
  padding: 4rem 0;
}

.seco h3{
  border-bottom: 1px solid #b8baaf;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
}


.seco-f-phrase{
  border: 1px solid #b8baaf;
  margin-bottom: 2.5vw;
}

.seco-s-phrase{
  border: 1px solid #b8baaf;
  margin-bottom: 2.5vw;
}

.seco-f-phrase a, .seco-s-phrase a{
  display: block;
  height: calc( 100% - 8vw );
  padding: 4vw;
}

.seco-f-phrase a:hover, .seco-s-phrase a:hover{
  -moz-box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
  -webkit-box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
  -ms-box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
  box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
}

.seco-img{
  height: 10rem;
}


/* Thirsd Contents */

.thir{
  padding: 2.5vw 0;
}

.thir-contents{
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  padding: 4vw;
}

.thir-title{
  color: #4F5CED;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 500;
  font-size: 8vw;
  line-height: 1.2;
  margin-bottom: 2rem;
  text-align: center;
}

.thir-phrase{
  font-size: 20.1px;
}

/* Four Contents */

.four{
background-color: #FAFBF2;
padding: 4rem 0;
}

.four h3{
  border-bottom: 1px solid #b8baaf;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
}


.four-f-phrase{
  background-color: #fff;
  border: 1px solid #b8baaf;
  margin-bottom: 2.5vw;
}

.four-s-phrase{
  background-color: #fff;
  border: 1px solid #b8baaf;
  margin-bottom: 2.5vw;
}

.four-f-phrase a, .four-s-phrase a{
  display: block;
  height: calc( 100% - 8vw );
  padding: 4vw;
}

.four-f-phrase a:hover, .four-s-phrase a:hover{
  -moz-box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
  -webkit-box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
  -ms-box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
  box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
}

.four-img{
  width: 340px;
}

/* Fifth Contents */

.fift-ank{
  border: 1px solid #b8baaf;
  display: block;
  height: 100%;
}

.fift-item h3{
  font-weight: bold;
  padding-left: 1rem;
  padding-right: 1rem;
}

.fift-ank:hover{
  -moz-box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
  -webkit-box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
  -ms-box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
  box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
}

.fift-phrase{
  font-size: 14px;
  padding: 1em;
}


/* ----------------------------------------------------------------------
7.Spray Insulation
---------------------------------------------------------------------- */

.c-banner-img{
  margin-left: 2.5vw;
  margin-right: 2.5vw;
  max-width: 791px;
}

.c-img{
  margin-left: 2.5vw;
  margin-right: 2.5vw;
  max-width: 600px;
}

.area-title{
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 30.9px;
  line-height: 1.1;
  margin-bottom: 3rem;
  text-align: center;
}

.area-item{
  border-top: 1px solid #b8baaf;
}

.area-item:last-child{
  border-bottom: 1px solid #b8baaf;
}

.area-item p{
  padding: 1em;
}

.area-list-title{
  background-color: #fff;
}

.area-list-phrase .separ{
  display: none;
}

.area-list-title::first-letter{
  padding-right: 1em;
}

.link-list-wrap{
  background-color: #EEEEEF;
  border-top: 1px solid #E6E6E6;
  padding: 2rem 2.5vw;
}

.to-page-sec{
  position: absolute;
  bottom: 10px;
  left: calc(50% - 0.5em);
}

.to-page-txt{
  display: none;
}

.fa-chevron-circle-right{
  color: #4F5CED;
}

.catalog-list-item{
  background-color: #fff;
  border-bottom: 1px solid #E6E6E6;
  border-left: 1px solid #F7F7F7;
  border-right: 1px solid #E6E6E6;
  border-top: 1px solid #F7F7F7;
  text-align: center;
  position: relative;
}
.cotalog-title{
  display: block;
  padding: 1em 1em 2.5em 1em;
}
.catalog-list-item:hover{
  -moz-box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
  -webkit-box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
  -ms-box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
  box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
}

.catalog-list-item a{
  display: block;
  height: 100%;
}

/* ----------------------------------------------------------------------
8.Airtightness Measured
---------------------------------------------------------------------- */

cite{
  display: block;
  text-align: right;
}

.link-banner{
  text-align: center;
}

.l-img{
  margin-left: auto;
  margin-right: auto;
}

.atn-number{
  background-color: #3a3b37;
  color: #F6F9EA;
  padding: 1em;
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  border-radius: 10px;
}


/* ----------------------------------------------------------------------
9.Solution Info
---------------------------------------------------------------------- */

.solution-item{
  margin-bottom: 30px;
}

.solution-ank{
  border: 1px solid #b8baaf;
  display: block;
}

.solution-ank:hover{
  -moz-box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
  -webkit-box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
  -ms-box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
  box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
}

.solution-item h3{
  padding-left: 1rem;
  padding-right: 1rem;
}

.solution-phrase{
  padding: 1em;
}

.recomm-item{
  border: 1px solid #b8baaf;
  display: block;
  margin-bottom: 2.5vw;
  position: relative;
}

.recomm-item figure{
  padding: 1em 1em 0 1em;
  text-align: center;
}

.recomm-phrase{
  margin-bottom: 3em;
  padding: 1em;
}

.recomm-url{
  bottom: 0;
  position: absolute;
  padding: 1em;
  text-align: center;
  width: 100%;
}

.recomm-phrase a,
.recomm-url a{/* Anker */
  border-bottom: 2px dotted #00f;
}

/* ----------------------------------------------------------------------
10.Procedure
---------------------------------------------------------------------- */

.proce-list{
  list-style: decimal;
  margin-left: 2em;
}

/* ----------------------------------------------------------------------
11.Technology
---------------------------------------------------------------------- */

.presen-group-phrase{
  position: relative;
}

.presen-item{
  border: 1px solid #b8baaf;
  counter-increment: numeber;
  padding: 4vw 4vw 24vw 4vw;
  position: relative;
}

.presen-item::before{
  background-color: #D4A7B7;
  border-radius: 5px;
  color: #fff;
  content: counter(numeber);
  font-weight: bold;
  padding: 5px 15px;
	position: absolute;
	left: -5px;
	top: -5px;
}

.presen-item .presen-title{
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 20px;
  line-height: 1.2;
  margin-bottom: 1rem;
  padding-top: 1em;
  transform: rotate(0.03deg);
}

.presen-phrase{
  margin-bottom: 1rem;
}

.presen-fig{
  border: 1px solid #B8BAAF;
  border-radius: 50%;
  bottom: 2.5vw;
  overflow: hidden;
  position: absolute;
  right: 2.5vw;
  text-align: right;
}

.presen-img{
  width: 20vw;
}

.item-phrase{
  position: relative;
}

/* ----------------------------------------------------------------------
12.Company Info
---------------------------------------------------------------------- */

.company-item{
  border-top: 1px solid #b8baaf;
}

.company-item:last-child{
  border-bottom: 1px solid #b8baaf;
}

.company-title{
  background-color: #f6f9ea;
  padding: 1em;
}

.company-phrase{
  padding: 1em;
}

.company-phrase ul{
  list-style: disc;
  margin-left: 1em;
}

.phone{
  font-size: 22.1px;
  text-align: center;
}

.phone a{/* Anker */
  border-bottom: 2px dotted #00f;
}

.to-recruit{
  background-image: url("images/recruit.jpg");
  background-size: cover;
  border:1px solid #b8baaf;
  margin-left: auto;
  margin-right: auto;
  max-width: 486px;
}

.to-recruit-in{
  position: relative;
  width: 100%;
}

.to-recruit-in::before{
  display: block;
  content: "";
  padding-top: 31.25%; /* 縦横比 */
}

.to-recruit-an{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.to-recruit-text{
  color: #fff;
  font-size: 25.9px;
  position: absolute;
  right: 2rem;
  top: 2rem;
}

.c-photo{
  margin-left: auto;
  margin-right: auto;
  max-width: 486px;
}
/* 13.PRIVACY POLICY
---------------------------------------------------------------------- */
.privacy h2{
  border-left: 5px solid #FF6B3E;
  font-size: 21px;
  font-weight: bold;
  line-height: 3rem;
  margin: 1rem 0;
  padding-left: 1rem;
}

.privacy ol{
  list-style-position: outside;
  list-style-type: decimal;
  margin: 1em 0;
	padding-left: 40px;
}

.privacy ol li{
  margin-bottom: 0.618rem;
}

.privacy ol li::marker{
  font-weight: bold;
}

.privacy ul{
  list-style-position: outside;
  list-style: disc;
  margin: 1em 0;
	padding-left: 40px;
}

.privacy ul li{
  margin-bottom: 0.618rem;
}

.privacy ul li::marker{
  color: #FF6B3E;
}

.privacy p{
  margin-bottom: 1rem;
}

.privacy .privacy-note{
  margin-bottom: 1rem;
  margin-left: 1rem;
  margin-top: 1rem;
}

/* ----------------------------------------------------------------------
14.Case Study
---------------------------------------------------------------------- */

.bef-aft{
  background-color: #F1F1EF;
  padding: 2rem;
}


.circle{
  border: 1px solid #3a3b37;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

.wp-image-602,
.wp-image-603{
  object-fit: cover;
}

.circle-phrase{
  padding: 1.5em;
  margin-left: auto;
  margin-right: auto;
  max-width: 325px;
}

.house-item{
  margin-bottom: 2em;
}

.house-title{
  background-color: #f6f9ea;
  border-bottom: 1px solid #b8baaf;
  padding: .5em;
}

.house-phrase{
  padding: .5em;
}

.house-phrase .separ{
  display: none;
}

.cost-table{
  overflow: hidden;
}

.cost-table .cost-table-wrap{
  overflow-x: auto;
}

.unit{
  font-size: 9.9px;
}

.cost-list{
  border-collapse: collapse;
  border-spacing: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.cost-list th,
.cost-list td{
  padding: 0.5em;
  padding-top: 0.5em;
  white-space: nowrap;
}

.cost-list th{
  background-color: #F6F9EA;
  border-bottom: 1px solid #b8baaf;
  border-left: 1px solid #b8baaf;
  border-top: 1px solid #b8baaf;
  text-align: center;
}

.cost-list th:last-child{
  border-right: 1px solid #b8baaf;
}

.cost-list td{
  border-bottom: 1px solid #b8baaf;
  border-left: 1px solid #b8baaf;
}

.cost-list td:last-child{
  border-right: 1px solid #b8baaf;
}

.al-c{
  text-align: center;
}

.al-r{
  text-align: right;
}

.graph-phrase{
  text-align: center;
}


.cost-phrase-wrap p{
  padding: 1rem 0;
}

.etc-item-phrase{
  padding: 1.5em 0;
}

/* ----------------------------------------------------------------------
15.Works
---------------------------------------------------------------------- */

.works-repeat{
  padding: 4rem 0 2rem;
}

.works-repeat:nth-child(2n){
  background-color: #F1F1EF;
}

.to-catalog{
  margin-top: 2em;
  text-align: right;
}
.to-catalog a{/* Anker */
  border-bottom: 2px dotted #4f5ced;
}

/* ----------------------------------------------------------------------
16.Recruit
---------------------------------------------------------------------- */

.recruit-item{
  border-top: 1px solid #b8baaf;
}

.recruit-item:last-child{
  border-bottom: 1px solid #b8baaf;
}

.recruit-title{
  background-color: #f6f9ea;
  padding: 1em;
}

.recruit-phrase{
  padding: 1em;
}

.recruit-phrase ol{
  list-style: disc;
  margin-left: 1em;
}

/* ----------------------------------------------------------------------
17.Catalog
---------------------------------------------------------------------- */

/* Archives
---------------------------------------------------------------------- */

.catalog-item{
  border-top: 1px dotted #B8BAAF;
  height: 100%;
}

.list-item:last-child{
  border-bottom: 1px dotted #B8BAAF;
}

.catalog-item:hover{
  -moz-box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
  -webkit-box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
  -ms-box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
  box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 0.24);
}

.catalog-img{
  margin: 1.54vw;
}

.catalog-phrase .title{
  line-height: 1.2;
  margin: 1.54vw 0 1vw 1.54vw;
}

.catalog-phrase .phrase{
  font-size: 11px;
  margin: 0 0 1.54vw 1.54vw;
}

/* Single
---------------------------------------------------------------------- */

.flexslider{
  max-width: 1200px;
}

/* ----------------------------------------------------------------------
18.Contact
---------------------------------------------------------------------- */

.contact-col{
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
}

label{
  display: block;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0;
}

.ct-title{
  display: flex;
  justify-content:left;
  align-items: center;
  margin-bottom: 0.5rem;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"]{
  background-color: #F1F1EF;
  border-radius: 3px;
  box-sizing:border-box;border:none;
  color: #5c6b80;
  display: block;
  font-size: 1rem;
  height: 45px;
  line-height: 45px;
  padding: 0 12px;
  transition: background-color 0.24s ease-in-out;
  width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus{
  background-color: #EEDCE2;
}

textarea{
  background-color: #F1F1EF;
  height: calc( 1.618rem * 5 );
  line-height: 1.618;
  background-color: #F1F1EF;
  border-radius: 3px;
  box-sizing:border-box;border:none;
  color: #5c6b80;
  display: block;
  font-size: 1rem;
  padding: 12px;
  transition: background-color 0.24s ease-in-out;
  width: 100%;
  overflow: auto;
}

input[type="button"],
input[type="submit"]{
  border-radius: 3px;
  box-sizing:border-box;border:none;
  color: #fff;
  display: block;
  font-size: 1rem;
  height: 45px;
  line-height: 45px;
  margin-bottom: 2rem;
  padding: 0 12px;
  transition: background-color 0.24s ease-in-out;
  width: 100%;
}

input[type="button"]{
  background-color: #4F5CED;
}

input[type="submit"]{
  background-color: #D4A7B7;
  cursor: pointer;
}

input[type="submit"]:hover{
  background-color: #666;
}

.must, .any{
  border-radius: 5px;
  color: #fff;
  font-size: 11px;
  padding: 0.5em;
}

.must{
  background-color: orange;
}

.any{
  background-color: gray;
}

.wpcf7 input[type="checkbox"] {
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.wpcf7 input[type="checkbox"] {
  margin-right: 1em;
  position: relative;
  width: 25px;
  height: 25px;
  border: 1px solid #000;
  vertical-align: middle;
}

.wpcf7 input[type="checkbox"]:checked:before {
  position: absolute;
  top: 5px;
  left: 10px;
  transform: rotate(50deg);
  width: 4px;
  height: 8px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  content: '';
}

/* レスポンスメッセージのスタイル指定
----------------------------------------------------------------------------- */

.wpcf7 form .wpcf7-response-output {
  margin: 2em 0 1em;
  padding: 0.2em 1em;
  border: 3px dotted #00a0d2;
  font-size: 1rem;
  border-radius: 12px;
  padding: 1rem;
}

.wpcf7 form.init .wpcf7-response-output {
  display: none;
}

.wpcf7 form.sent .wpcf7-response-output {/* 送信ボタン下完了時 */
  border: 3px dotted #46b450;
  font-size: 1rem;
  border-radius: 12px;
  padding: 1rem;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  border: 3px dotted #dc3232;
  font-size: 1rem;
  border-radius: 12px;
  padding: 1rem;
}

.wpcf7 form.spam .wpcf7-response-output {
  border: 3px dotted #f56e28;
  font-size: 1rem;
  border-radius: 12px;
  padding: 1rem;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {/* 入力内容に問題があります。確認して再度お試しください。 */
  border: 3px dotted #ffb900;
  font-size: 1rem;
  border-radius: 12px;
  padding: 1rem;
}

.wpcf7-not-valid-tip {/* 必須項目に入力してください。 */
  color: #f88;
}

/* Complete
---------------------------------------------------------------------- */
.complete-info{
  margin-bottom: 5rem;
  margin-top: 5rem;
}

.to-home a{
  background-color: #D4A7B7;
  border-radius: 3px;
  color: #fff;
  display: block;
  text-align: center;
  font-size: 1rem;
  height: 45px;
  line-height: 45px;
  margin-bottom: 2rem;
  padding: 0 12px;
  transition: background-color 0.24s ease-in-out;
}

.to-home a:hover{
  background-color: #666;
  color: #fff;
}

.complete-moreinfo{
  background-color: #ececec;
  border-radius: 3px;
  padding: 1.618rem;
}

/* ----------------------------------------------------------------------
18.Footer
---------------------------------------------------------------------- */

#site-footer{
  background-color: #2c2c29;
  color: #F6F9EA;
}

.footer-top{
  padding-bottom: 2.5vw;
  padding-top: 2.5vw;
}

#site-footer a{
  color: #F6F9EA;
  border-bottom-color: #F6F9EA;
}

.f-phone{
  background-color: #3A3B37;
  margin-bottom: 1rem;
  max-width: 600px;
  padding-bottom: 1.5rem;
  padding-top: 1.5rem;
  text-align: center;
}

.phone-phrase{
  display: block;
}

.contact{
  margin-bottom: 1rem;
}

.f-area-title{
  font-size: 18px;
  text-align: center;
}

.f-title{
  text-align: center;
}

.to-contact{
  display: block;
  position: relative;
  border: 1px solid #3A3B37;
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
  padding: 1.5rem 68px 1.5rem 1rem;
  text-align: center;
}

.to-contact:before, .to-contact:after {
  content: "";
  position: absolute;
  display: block;
}

.fa-envelope{
  font-size: 2rem;
  position: absolute;
  right: 15px;
  top: calc( 50% - 15px);
}

.to-contact:before {
  top: 0;
  right: 0;
  width: 65px;
  height: 100%;
  background: #3A3B37;
}

.to-contact:hover{
  border: 1px solid #D4A7B7;
}
.to-contact:hover:before{
  background: #D4A7B7;
}

#site-footer .footer-contents{
  background-image: url("images/footer.jpg");
  background-size: cover;
  background-position: top center;
  color: #fff;
}

#site-footer .footer-contents a{
  color: #fff;
}

.footer-contents{
  padding-bottom: 4rem;
  padding-top: 4rem;
}

.footer-bottom{
  margin-bottom: 4rem;
}

.f-corporation .to-top{
  display: block;
  height: auto;
  margin-bottom: 4rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 300px;
}

#f-logo figcaption{
  display: none;
}

/* Basic ⇒ Footer navigation
---------------------------------------------------------------------- */

.footer-nav-body{
  line-height: 2rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 320px;
}

#footer-nav-list{
  text-align: center;
}

#footer-nav-list li{
  font-size: 14px;
  display: inline-block;
  padding: 0 1rem;
}

#footer-nav-list li.menu-item-868{
  border-bottom: 1px dotted #B8BAAF;
  display: block;
}

#footer-nav-list li.menu-item-878,
#footer-nav-list li.menu-item-877,
#footer-nav-list li.menu-item-876,
#footer-nav-list li.menu-item-875,
#footer-nav-list li.menu-item-867,
#footer-nav-list li.menu-item-868{
  font-size: 16px;
}

/* Animation */

#footer-nav-list li a span {
  display: inline-block;
  padding: 0 0 5px;
  position: relative;
  transition: 0.3s;
}

#footer-nav-list li a span::after {
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #FABE47;
  content: "";
  transition: 0.3s;
  transform: translateX(-50%);
}

#footer-nav-list li a span:hover::after {
  width: 100%;
}

#footer-nav-list .current-menu-item a span:hover::after{
  width: 0;
}

/* Copyright 
---------------------------------------------------------------------- */

#copyright{
  margin-left: 2.5vw;
  margin-right: 2.5vw;
  padding-bottom: 25vw;
  padding-top: 2.5vw;
  text-align: center;
}

/* ----------------------------------------------------------------------
19.Error Page
---------------------------------------------------------------------- */
.error-item{
  background-color: #808080;
  padding: 5vw 2.5vw 5vw;
  text-align: right;
}
.error-img{
  width: 150px;
}