@charset "utf-8";

/* reset */
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, svg, a, table, tr, th, td, figure, img {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 62.5%;
 vertical-align: baseline;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

table {border-collapse: collapse; border-spacing: 0;}

*, *:before, *:after {
  box-sizing: border-box;
  letter-spacing: 0.05em;
}

@font-face {
  font-family: YuGothic M;
  src: local(Yu Gothic Medium),local(YuGotihc);
  font-weight: 500;
  font-display: swap;
}

body {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, ヒラギノ角ゴシック ProN W3, 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  /* cursor: pointer; */
}

.fw600 {font-weight: 600;}

.ffs-palt {font-feature-settings: "palt";letter-spacing: 2px;}
.ffs-pwid {font-feature-settings: "pwid"; }

.fw-b {font-weight: 600;}

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}

article, header, footer, aside, figure, figcaption, nav, section {
 display: block;
}

p {line-height: 1.8}

ol, ul, li {
 list-style: none;
}

img {width: 100%}

.inner {
  margin: 0 auto;
  max-width: 1088px;
}

.works-sp-br {display: none;}


@media screen and (max-width: 768px) {

  .inner {
    max-width: 768px;
    overflow: hidden;
  }
  
  .works-sp-br {display: inline;}

}

.sp-logo {display: none}

.global-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 70px;
  height: 100vh;
  /* background: rgba(255,255,255,0.3); */
  z-index: 1000;
}

/* drawer custom */

.drawer--right.drawer-open .drawer-nav {right: 70px}
.drawer-nav{width:100vw;background-color:rgba(255,255,255,0.95);  z-index: 1100;}
.drawer-overlay{position:fixed;z-index:1000;top:0;left:0;display:none;width:calc(100% - 70px);height:100%;background-color:rgba(255,255,255,.2)}
.drawer--right .drawer-nav{right:100vw;-webkit-transition:right .6s cubic-bezier(.19,1,.22,1);transition:right .6s cubic-bezier(.19,1,.22,1)}
.drawer--right.drawer-open .drawer-hamburger{top:10px;right:0;z-index:1150;}
.drawer-hamburger-icon{margin-top: 30px;padding: 0 8px;font-size:12px;writing-mode: vertical-rl;background:transparent;}
.drawer-hamburger-icon::after,.drawer-hamburger-icon::before{width:100%;height:2px;-webkit-transition:all .6s cubic-bezier(.19,1,.22,1);transition:all .6s cubic-bezier(.19,1,.22,1);background-color:#222}
.drawer-hamburger-icon::after{top:-12px;}
.drawer-hamburger-icon::before{position:absolute;top:-25px;left:0;content:""}
.drawer-open .drawer-hamburger-icon::after {top: -19px;}
.drawer-open .drawer-hamburger-icon::before {top: -20px;}
.drawer-hamburger-icon-close {display: none;}
.drawer--right.drawer-open .drawer-hamburger-icon {display: none;}
.drawer--right.drawer-open .drawer-hamburger-icon-close {display:block; position: relative; margin-top: 25px;padding: 0 8px; width: 100%; height: 2px; font-size: 12px;-webkit-transition: all .6s cubic-bezier(.19,1,.22,1); transition: all .6s cubic-bezier(.19,1,.22,1);background: transparent;writing-mode:vertical-rl;}
.drawer-hamburger-icon-close::after,.drawer-hamburger-icon-close::before{width:100%;height:2px;-webkit-transition:all .6s cubic-bezier(.19,1,.22,1);transition:all .6s cubic-bezier(.19,1,.22,1);background-color:#222}
.drawer-hamburger-icon-close::after,.drawer-hamburger-icon-close::before{content:"";position:absolute;top:-19px;left:0;transform:rotate(-45deg);}
.drawer-hamburger-icon-close::before{top:-20px;transform:rotate(45deg);}

.drawer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 60px;
  padding: 0 1em;
}

.drawer-menu {
  margin: 0 auto;
  padding-top: 54px;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.menu-list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 56vh;
  max-height: 400px;
}

.menu-list > li {
  margin-right: 65px;
}

.drawer-menu > li:nth-child(2) {
  display: none;
  margin: 10px 0 22px;
}

.sp-contact > ul,
.sns-links > ul {
  display: flex;
  flex-wrap: wrap;
  max-width: 335px;
}

.sp-contact > ul li a > img {
  max-width: 65px;
}

.sns-links > ul {
  width: auto;
}  

.drawer-dropdown {
  /* margin: 0 auto; */
  position: relative;
}

/* .drawer-dropdown:nth-of-type(14) {display: none;} */

.drawer-dropdown::before {
  content: "";
  position: absolute;
  top: 14px;
  left: -27px;
  width: 16px;
  height: 1px;
  background: #091934;
}

.drawer-dropdown.fb {
  margin: 10px 18px 0 -3px;
  width: auto;
}

.drawer-dropdown.insta {
  margin: 10px 16px 0 0;
  width: auto;
}

.drawer-dropdown.line {
  margin: 10px 0 0;
  width: auto;
}

.drawer-dropdown.fb::before,
.drawer-dropdown.insta::before,
.drawer-dropdown.line::before {
  display: none;
}

.drawer-dropdown > a,
.drawer-dropdown > a span {
  margin: 0 auto 15px;
  color: #091934;
  display: inline-block;
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  line-height: 1.4;
  text-decoration: none;
  transition: all 0.4s;
}

.drawer-dropdown > a span {
  display: block;
  margin-bottom: 0;
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: 400;
}

.drawer-dropdown > a:hover {
  color: #1d51a9;
}

.drawer-dropdown > a.current,
.drawer-dropdown > a.current span {
  color: rgba(9,25,52,0.7);
  pointer-events: none;
}

.blog,.tour {display: none;}

.fb a img, .insta a img, .line a img {
  margin-top: -5px;
  height: 30px;
  transition: all 0.4s;
}

.fb a img:hover, .insta a img:hover, .line a img:hover {
  opacity: 0.6;
}
  

@media screen and (max-width: 844px) {
  
  .drawer-dropdown > a {
    margin-bottom: 14px;
    font-size: 21px;
    font-size: 2.1rem;
  }

}

  
@media screen and (max-width: 768px) {

  .drawer-hamburger {
    padding: 8px 6.5rem 30px 0;
  }

  .drawer-hamburger-icon,.drawer-hamburger-icon-close {
    margin-top: 7px;
    padding: 0 3px;
    writing-mode: horizontal-tb;
  }
  
  .drawer-hamburger-icon::before {top: -1px;left: 50px;}
  
  .drawer-hamburger-icon::after {top: 10px;left: 50px;}
  
  .drawer--right.drawer-open .drawer-hamburger-icon-close {
    margin-top: -4px;
    padding: 0;
    writing-mode: horizontal-tb;
  }
  
  .drawer-hamburger-icon-close::after{top:5px;left:50px;}
  .drawer-hamburger-icon-close::before{top:5px;left:50px;}  
  
  .drawer--right.drawer-open .drawer-nav {
    right: 0;
  }
  
  .drawer-nav {
    width: 100vw;
  }
  
  .drawer-menu {
    padding-top: 48px;
    padding-left: 64px;
    flex-direction: column;
  }
  
  .drawer-menu > li:first-child {
    width: 100vw;
  }
  
  .menu-list {
    width: 50%;
    height: auto;
    max-height: 510px;
    }

  .drawer-menu > li:nth-child(2) {
    display: inline;
    margin-top: 20px;
    margin-left: -32px;
  }
  
  .drawer-menu > li:nth-child(3) {
    margin-top: 8px;
    margin-left: -20px;
  }

}

@media screen and (max-width: 700px) {
    
  .drawer-menu {padding-left: 55px;}

  .menu-list {
    width: 100%;
    max-height: 100%;
  }
    
  .drawer-dropdown > a {font-size: 19px;}

}


/* /drawer custom */


.side-logo {
  position: relative;
  margin: 0 auto;
  width: 40px;
  top: 24%;
  transform: translateY(-24%);
}


.nav-btn li {
  position: absolute;
  bottom: 0;
  z-index: 150;
}

.nav-btn li.recruit {
  bottom: 280px;
}

.nav-btn li.request {
  bottom: 210px;
}

.nav-btn li.consultation {
  bottom: 140px;
}

.nav-btn li.model-house {
  bottom: 70px;
}

.nav-btn li a {
  opacity: 1;
  transition: all 0.5s;
}

.nav-btn li a:hover {
  opacity: 0.7;
}    

.nav-btn li a img {
  width: 70px;
  height: 70px;
  vertical-align: bottom;
}

@media screen and (max-width: 768px) {
    
  .sp-logo {
    display: block;
    position: absolute;
    top: 13px;
    left: 13px;
    width: 104px;
    z-index: 1;
  }

  .side-logo,.nav-btn {display: none}

}


/*----- container -----*/

.container {width: 100%}

.head-Title {
  margin-bottom: 30px;
  font-size: 26px;
  font-size: 2.6rem;
  text-align: center;
  display: block;
  vertical-align: middle;
  font-weight: 200;
  letter-spacing: 2px;
  line-height: 1.4;
}

.head-Title > span {
  display: block;
  font-size: 14px;
}


/*
top page
*/

.works {
  margin: 0 auto 100px;
  width: calc(100% - 140px);
  /* min-width: 1100px; */
  font-family: 'Bitter',"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, ヒラギノ角ゴシック ProN W3, 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', sans-serif;
  -js-display: flex;
  display: flex;
  flex-wrap: wrap;
}

.main-works {
  position: relative;
  margin: 0 auto;
  width: 100%;
}

.top-std-works {
  position: relative;
  margin: 0;
  width: 33.33333%;
}

.std-works {
  position: relative;
  margin: 1%;
  width: 31.33333%;
}

.top-std-works:nth-child(5) {
  display: none;
}


@media screen and ( max-width: 768px ) {

  .works {
    width: 100%;
    min-width: 100%;
  }

}


.main-works > a img,
.top-std-works > a img,
.std-works > a img {
  height: 100%;
  filter: brightness(82%);
  transition: 0.5s all;
}

.main-works > a img:hover,
.top-std-works > a img:hover,
.std-works > a img:hover {
  filter: brightness(100%);
}

.main-works-name,
.std-works-name {
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translate(0%, -50%);
}

.main-works-name li,
.std-works-name li {
  color: #fff;
  font-size: 32px;
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
  line-height: 1.3;
  text-shadow: 0px 0px 2px #444;
}

.main-works-name li:hover,
.std-works-name li:hover {
  text-shadow: 0px 0px 4px #333;
}

.std-works-name li {
  font-size: 24px;
  font-size: 2.4rem;
  letter-spacing: 0.2rem;
}

.main-works-name > li span {
  font-size: 20px;
  font-size: 2.0rem;
  letter-spacing: 0.1rem;
  display: block;
}

.std-works-name > li span {
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: 0.1rem;
  display: block;
}

.main-works-name li:first-child,
.std-works-name li:first-child {
  margin-bottom: 6px;
  padding: 3px 14px 2px;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: 400;
  background: #000;
  display: inline-block;
}

.std-works-name li:first-child {
  font-size: 12px;
  font-size: 1.2rem;
}

@media screen and (max-width: 854px) {
    
  .top-std-works {
    position: relative;
    width: 50%;
  }

  .std-works {
    position: relative;
    width: 48%;
  }
  
  .top-std-works:nth-child(5) {
    display: inline;
  }
  
  .main-works-name li,
  .std-works-name li {
    color: #fff;
    font-size: 18px;
    font-size: 1.8rem;
  }
  
  .main-works-name > li span,
  .std-works-name > li span {
    font-size: 13px;
    font-size: 1.3rem;
    letter-spacing: 0.1rem;
  }
  
  .main-works-name li:first-child,
  .std-works-name li:first-child {
    font-size: 10px;
    font-size: 1.0rem;
  }
  
}

@media screen and (max-width: 600px) {

  .main-works-name li,
  .std-works-name li {
    color: #fff;
    font-size: 17px;
  }
  
  .main-works-name > li span,
  .std-works-name > li span {
    font-size: 11px;
    letter-spacing: 0.05rem;
  }
  
}


.top-contents {
  clear: both;
}

.top-contents-head {
  float: left;
  width: 60px;
}

.top-contents-head > h1 {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
  font-size: 20px;
  font-size: 2.0rem;
  line-height: 1.4;
  letter-spacing: 0.1rem;
  display: inline-block;
}

.top-contents-head > h1 > span {
  font-size: 16px;
  font-size: 1.6rem;
  font-family: 'Bitter';
  letter-spacing: 0.1rem;
  display: block;
}

.top-contents-head > .button {
  margin: 18px 0px 0px -6px;
  padding: 3px 10px;
  width: 60px;
  color: #000;
  font-size: 12px;
  font-size: 1.2rem;
  text-align: center;
  text-decoration: none;
  border: 1px solid #000;
  transition: 0.5s all;
  display: inline-block;
}

.top-contents-head > .button:hover {
  color: #fff;
  background: #000;
}

.event {
  margin: 0 auto 100px;
  max-width: 600px;
}

.top-interview-wrap {
  margin-bottom: 100px;
  padding: 50px 0px;
  width: 100%;
  background: #fafafa;
}

.top-interview {
  margin: 0 auto;
  max-width: 768px;
}

.news {
  margin: 0 auto 100px;
  max-width: 768px;
}

.event-body {
  margin: 0px 0px 40px 100px;
  width: 83.33333%;
  max-width: 500px;
  -js-display: flex;
  display: flex;
  align-items: flex-start;
}

.event-img-wrap {
  width: 56%;
  max-width: 280px;
}

.event-img-wrap img {
  transition: 0.5s all;
}

.event-img-wrap img:hover {
  opacity: 0.75;
}

.event-text {
  margin: -0.2em 0px 0px 3.6%/*18px*/;
  width: 44%;
  font-size: 15px;
  font-size: 1.5rem;
}

.date, .news-date {
  margin-bottom: 2px;
  font-size: 13px;
  font-size: 1.3rem;
  display: block;
}

.news-date {
  width: 14.97005%;
}


@media screen and (max-width: 854px) {

  .top-contents-head {
    position: relative;
    float: none;
    margin: 0 auto;
    width: 90%;
  }

  .top-contents-head > h1 {
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-size: 2.0rem;
    line-height: 1.5;
  }
  
  .top-contents-head > .button {
    position: absolute;
    top: 0px;
    right: 0px;
    margin: 0px;
    padding: 3px 10px;
    width: 60px;
  }
  
  .top-interview-wrap {
    margin-bottom: 60px;
    padding: 50px 0px 60px;
    width: 100%;
    background: #f7f7f7;
  }

  .top-interview, .news {
    max-width: 600px;
  }
  
  .event {
    margin: 0 auto 60px;
  }
  
  .event-body {
    margin: 30px auto;
    width: 100%;
    max-width: 92%;
  }
  
  .event-img-wrap {
    width: 56%;
    max-width: 336px;
  }

}


.top-interview-body {
  margin: 0px 0px 0px 100px;
  width: 86.979166%;
  max-width: 668px;
  -js-display: flex;
  display: flex;
}

.top-interview-text-wrap {
  margin-right: 5.98802%/*40px*/;
  width: 44.01198%;
 } 

.top-interview-text {
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: 400;
  text-align: justify;
  text-justify: inter-ideograph;
}

.top-interview-text > span {
  position: relative;
  margin: 3px 0px 18px 52px;
  font-size: 13px;
  font-size: 1.3rem;
  display: block;
}

.top-interview-text > span::before {
  content: "03";
  position: absolute;
  top: -16px;
  left: -52px;
  font-size: 32px;
  font-weight: 700;
}

.read-more a {
  margin-top: 20px;
  color: #000;
  font-size: 14px;
  font-size: 1.4rem;
  text-decoration: none;
  display: inline-block;
  transition: 0.4s all;
}

.read-more a:hover {
  transform: translateX(6px);
  opacity: 0.7;
}

.arrow img {
  margin-right: 5px;
  width: 24px;
  display: inline;
}

.top-interview-img {
  margin: 0;
  width: 50%;
  max-width: 334px;
  z-index: 100;
}


@media screen and (max-width: 854px) {
    
  .top-interview-body {
    margin: 0px auto 0px;
    width: 86.979166%;
    max-width: 100%;
    flex-direction: column;
  }

  .top-interview-text-wrap {
    margin-right: 0;
    width: 100%;
  }

  .read-more a {
    float: right;
    margin: 5px 0px 10px;
  }

  .top-interview-img {
    clear: both;
    width: 100%;
    max-width: 100%;
  }

}


.news-body {
  margin: 0px 0px 0px 100px;
  width: 86.979166%;
  max-width: 668px;
}

.news-item {
  padding: 7px 0px 6px;
  width: 100%;
  min-height: 72px;
  border-top: 1px solid #d1d1d1;
  -js-display: flex;
  display: flex;
  align-items: center;
}

.news-item:last-child {
  border-top: 1px solid #d1d1d1;
  border-bottom: 1px solid #d1d1d1;
}

.news-item-body {
  width: 85.02995%;
}

.news-item-body a {
  color: #000;
  font-size: 15px;
  font-size: 1.5rem;
  text-align: justify;
  text-justify: inter-ideograph;
  text-decoration: none;
  transition: 0.5s all;
}

.news-item-body a:hover {
  color: #888;
}


@media screen and (max-width: 854px) {
  
  .top-interview-body, .news-body {
    margin: 40px auto 0;
    width: 100%;
    max-width: 92%;
  }
  
  .news-date {
    width: 100%;
  }
  
  .news-item {
    align-items: flex-start;
    flex-direction: column;
  }
  
  .news-item-body {
    width: 100%;
  }

}


/*
/top page
*/


/*
Housing
*/

.housing-Wrap {
  margin: 0 auto;
  padding: 10px 0;
  /* background: #fafafa; */
  line-height: 1.7;/* 202105追加 */
}

.housing-Concept-Head {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  color: #fff;
  font-size: 38px;
  font-size: 3.8rem;
  letter-spacing: 3px;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}

.housing-Concept-R {
  margin: 0;
  padding: 0;
  color: #000;
  font-size: 14px;
  font-size: 1.4rem;
  text-align: right;
  vertical-align: middle;
  line-height: 2.4;
  display: table-cell;
}

.housing-Concept-L {
  margin: 0;
  padding: 0;
  color: #000;
  font-size: 14px;
  font-size: 1.4rem;
  text-align: left;
  vertical-align: middle;
  line-height: 2.4;
  display: table-cell;
}

.housing-Concept-R span,.housing-Concept-L span {
  font-size: 20px;
  display: block;
}

.housing-Concept-R span.detail-Link {
    font-size: 1em;
}

.housing-Concept-R span.detail-Link a {
  margin: 8px 0px 0px;
  padding: 3px 10px 0px;
  color: #000;
  font-size: 14px;
  font-size: 1.4rem;
  text-decoration: none;
  text-align: center;
  border-radius: 5px;
  border: 1px solid #000;
  display: inline-block;
  transition: 0.6s;
}

.housing-Concept-R span.detail-Link a:hover {
  color: #fff;
  background: #000;
}

.housing-Contents-Wrap {
  margin: 0px auto;
  padding: 0;
  width: 100%;
  background: #fff;/* #fafafa; */
}

@media screen and (max-width: 420px) {

  .housing-Wrap {
    padding: 0;
  }

  .housing-Concept-R br,.housing-Concept-L br {
    display: none;
  }

  .housing-Concept-R {
    text-align: left;
  }

  .housing-Concept-R span.detail-Link a {
    width: 100%;
  }

}


/*----- housing 各ページへのリンクバナー -----*/

.housing-Pages-Wrap {
  width: 100%;
  background: #686864;
}

.housing-Pages {
  margin: 0 auto;
  padding: 0;
  max-width: 1020px;
  font-size: 0;
  background: #fff;
}

.housing-Pages li {
  margin: 0;
  padding: 0;
  display: inline;
}

.housing-Pages li a {
  margin: 0;
  padding: 0;
  width: 25%;
  max-width: 255px;
  display: inline-block;
  transition: all 0.4s;
}

.housing-Pages li a img {
  line-height: 0;
}

.housing-Pages li a:hover {
  opacity: 0.9;
}

@media screen and (max-width: 600px) {

  .housing-Pages li a {
    width: 50%;
    max-width: 300px;
    display: inline-block;
  }

}


/*----- 家づくりの流れ -----*/

.process {
  margin: 0 auto;
  padding: 40px 52px 80px;
  width: 100%;
  max-width: 1024px;
  background: #fff;
  line-height: 1.7;
}

.process-head {
  margin-bottom: 10px;
  font-size: 28px;
  font-size: 2.8rem;
  font-weight: 700;
  text-align: center;
}

.process-body {
  margin: 0;
  padding: 0;
  width: 100%;
}

.process-body li {
  padding: 8px 0.5em 9px;
  font-size: 14px;
  font-size: 1.4rem;
  border-top: 1px solid #c3c3c3;
}

.process-body li:first-child {
  padding: 0px 0.5em 9px;
  border-top: none;
}

.process-body li br {
  display: none;
}

.process-Number {
  margin: -6px 0.5em 0 0;
  padding: 2px 0 0;
  width: 25px;
  height: 25px;
  color: #fff;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 600;
  text-align: center;
  background: #000;
  display: inline-block;
  vertical-align: text-top;
}

.process-item {
  width: 12em;
  font-size: 18px;
  font-size: 1.8rem;
  display: inline-block;
}


@media screen and (max-width: 768px) {

  .process-body li br {
    display: inline;
  }

}


@media screen and (max-width: 600px) {

  .process {
    margin: 0 auto;
    padding: 40px 0px 80px;
    width: 90%;
    max-width: 600px;
    background: #fff;
  }
  
  .process-Number {
    margin: -7px 0.5em 0px 0px;
  }  
  
  .process-item {
    margin-bottom: 6px;
  }

}


/*----- 施工例リンク -----*/

.works-Link-Wrap {
  width: 100%;
  background: #686864;
}

.works-Link {
  position: relative;
  margin: 0 auto;
  padding: 40px 0px 46px;
  width: 100%;
  max-width: 1020px;
  color: #fff;
  background: #686864;
}

.works-Link:after {
  content: "※金額の表記は本体価格です。";
  position: absolute;
  bottom: 4px;
  right: 10px;
  font-size: 10px;
}

.works-Link h2 {
  margin: 0;
  padding: 0px 0px 16px;
  font-size: 2em;
  font-weight: 400;
  line-height: 1.0;
  text-align: center;
}

.works-Jp {
  font-size: 16px;
}

.works-Link-Body {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 900px;
  font-size: 0;
}

.works-Link-Body li {
  margin: 0px  0px 0px 1.1111111111%/* 10px */;
  padding: 0;
  display: inline;
  line-height: 1.4;
}

.works-Link-Body li:nth-child(5n+1) {
  margin: 0;
  padding: 0;
  display: inline;
  line-height: 1.4;
}

.works-Link-Body li a {
  margin-bottom: 10px;
  padding: 6px 0px 3px;
  width: 19.1111111112%;/* 172px / 900px */
  color: #fff;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 5px;
  border: 1px solid #fff;
  transition: color 0.6s, background 0.6s;
}

.works-Link-Body li a:hover {
  color: #000;
  background: #fff;
}


@media screen and (max-width: 768px) {

  .works-Link-Body {
    width: 100%;
    max-width: 690px;
  }

  .works-Link-Body li {
    margin: 0px 0px 10px 1.449275362%/* 10px */;
    display: inline;
    line-height: 1.4;
  }

 .works-Link-Body li a {
    margin-bottom: 10px;
    padding: 5px 0px 3px;
    width: 18.8405797101%;/* 130px / 690px */
  }

}


@media screen and (max-width: 420px) {

  .works-Link {
    margin: 0 auto;
    padding: 18px 0px 28px;
    max-width: 420px;
  }

  .works-Link h2 {
    padding: 0px 0px 14px;
  }

  .works-Link h2 br {
    display: none;
  }

  .works-Jp {
    margin-left: 5px;
  }

  .works-Link-Body {
    width: 100%;
    max-width: 420px;
  }

 .works-Link-Body li {
    margin: 0 auto;
    display: block;
  }

   .works-Link-Body li:last-child {
    margin: 0 auto;
    display: block;
    border-bottom: 1px solid #b6b6b3;
  }

  .works-Link-Body li a {
    margin: 0 auto;
    padding: 10px 0px 7px;
    width: 100%;
    border-radius: 0;
    border: none;
    border-top: 1px solid #b6b6b3;
  }

}

/*----------------------------------------

TIPの家
ソーラーサーキットの家 BASIC
ソーラーサーキットの家 NEXT
かながわ県産木材の家

----------------------------------------*/

.page-Title {
  margin: auto;
  padding: 60px 0px 30px;
  width: 100%;
  max-width: 1020px;
  font-size: 36px;
  font-size: 3.6rem;
  font-weight: 400;
  text-align: center;
  line-height: 1;
}

.sub-Title {
  margin: 0;
  padding: 0;
  font-size: 0.7777777778em;/* 28px  / 36px */
  font-weight: 400;
  display: inline-block;
  line-height: 1.8;
}

.housing-inner-Wrap {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 1020px;
  background: #fff;
}

.head-Copy {
  clear: both;
  margin: 0;
  padding: 36px 0px;
  font-size: 28px;
  font-weight: 400;
  text-align: center;
  line-height: 1;
}

.head-Cap {
  clear: both;
  margin: 0 auto;
  padding: 0px 3.52941176%/* 36px */ 30px;
  width: 100%;
  max-width: 1020px;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 2;
}

.housing-Cap {
  clear: both;
  margin: 0 auto;
  padding: 36px 3.52941176%/* 36px */ 46px;
  width: 100%;
  max-width: 1020px;
  font-size: 14px;
  font-size: 1.4rem;
  text-align: justify;
  text-justify: inter-ideograph;
  line-height: 2;
}

.housing-Cap-half {
  float: left;
  margin: 0 auto;
  padding: 36px 3.52941176%/* 36px */;
  width: 50%;
  max-width: 510px;
  font-size: 14px;
  font-size: 1.4rem;  
  text-align: justify;
  text-justify: inter-ideograph;
  line-height: 1.8;
}

.cap-Title {
  margin: 0;
  padding: 0;
  font-size: 26px;
  font-size: 2.6rem;
  display: block;
}


@media screen and (max-width: 768px) {

  .head-Cap br{
    display: none;
  }

}


@media screen and (max-width: 600px) {

  .page-Title {
    font-size: 30px;
    line-height: 1.5;
  }

  .head-Cap {
    clear: both;
    margin: 0 auto;
    padding: 0px 3.52941176%/* 36px */ 30px;
    width: 96%;
    max-width: 420px;
    text-align: left;
  }

  .head-Copy {
    margin: 0 auto;
    padding: 36px 0px 26px;
    width: 96%;
    font-size: 22px;
    font-weight: 400;
    text-align: center;
    line-height: 1.5;
  }
  
  .cap-Title {
    font-size: 20px;
  }

}


/*----- TIPの家 -----*/

.tip {
  margin: 0 auto;
  padding: 0;
  width: calc(100% - 140px);
  max-width: 1020px;
  height: auto;
}

ul.tip-point {
  margin: 0;
  padding: 25px 0px 25px 10px;
  width: 100%;
  max-width: 1020px;
  color: #fff;
  background: rgba(24,24,23,0.7);
  display: table;
}

ul.tip-point li {
  margin: 0;
  padding: 0px 0px;
  width: 10%;/* 101px / 1010px */
  max-width: 101px;
  max-width: 50%;
  display: table-cell;
  line-height: 1.4;
}

ul.tip-point li div img {
  float: left;
  margin: 0;
  max-width: 101px;
}

.tip-Explain {
  margin: 14px 0px 0px 5px;
  font-size: 14px;
  font-size: 1.4rem;
  display: inline-block;
}

.tip-Title {
  float: left;
  position: relative;
  margin: 0px 0px 0px -10px;
  max-width: 147px;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 400;
  line-height: 1.5;
}

.tip-Title:after {
  content: "";
  position: absolute;
  top: 82px;
  left: -76px;
  width: 343px;
  border-bottom: 1px solid #444;
  transform: rotate(-45deg);
}

.tip-STitle {
  margin-top: -3px;
  padding: 0;
  font-size: 12px;
  display: block;
}

.tip-Cap {
  float: right;
  margin: 0;
  padding: 0;
  width: 77.021276595%;/* 724px / 940px */
  max-width: 724px;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 2.0;
  text-align: justify;
}

.tip-Cap a {
  font-size: 14px;
  font-size: 1.4rem;
}

.movie01 {
  float: left;
  margin-bottom: 6px;
  width: 48.618784530%;/* 352px / 724px */
  max-width: 724px;
  line-height: 0;
}

.movie02 {
  float: right;
  margin-bottom: 6px;
  width: 48.618784530%;/* 352px / 724px */
  max-width: 724px;
  line-height: 0;
}

.movie-attn {
  clear: both;
  margin: 0;
  font-size: 0.8571428em;/*12px */
}

ul.why-Tip {
  margin: 195px 0px 0px;
  padding: 0;
  width: 100%;
  font-size: 0;/* listの余白削除 */
}

li.why-Tip-Contents {
  margin: 0;
  padding: 0;
  width: 32.1276595744%;/* 302px / 960px */
  max-width: 302px;
  display: inline-block;
  vertical-align: bottom;
}

li.why-Tip-Contents:nth-child(2),
li.why-Tip-Contents:nth-child(5) {
  margin: 10px 1.80851063% 0px;
}

li.why-Tip-Contents img {
  width: 100%;
  max-width: 100%;
}

li.why-Tip-Contents p {
  margin-top: 5px;
  line-height: 1.5;
  font-size: 14px;
  min-height: 42px;
}


@media screen and (max-width: 768px) {

  .tip {width: 100%}

   ul.tip-point {
    padding: 25px 0px;
  }

  ul.tip-point li div {
    margin: 0 auto;
    width: 101px;
    text-align: center;
  }

  .tip-Cap {
    max-width: 500px;
  }

  .tip-Explain {
    margin: 2px auto 0px;
    width: 100%;
    display: inline-block;
    text-align: center;
  }
  
  .tip-Title:after {
    top: 100px;
    left: -24px;
  width: 192px;
  border-bottom: 2px solid #000;
  transform: rotate(-40deg);
  }

}


@media screen and (max-width: 600px) {

  ul.tip-point {
    padding: 15px 0px;
  }

  ul.tip-point li div {
    margin: 0 auto;
    width: 74px;
    text-align: center;
  }

  ul.tip-point li div img {
    float: none;
    margin: 0 auto;
    width: 70px;
    text-align: center;
  }

  .tip-Explain {
    margin: 2px auto 0px;
    width: 100%;
    display: inline-block;
    font-size: 11px;
    text-align: center;
  }

  .tip-Title {
    float: none;
    margin: 0px auto 10px;
    padding: 0;
    width: 94%;
    max-width: 94%;
    line-height: 1.5;
  }

  .tip-Title br {
    display: none;
  }

  .tip-Title:after {
    display: none;
  }

 .tip-STitle {
    margin: 0px 0px 0px 7px;
    display: inline;
  }

  .tip-Cap {
    width: 100%;
    max-width: auto;
    text-align: justify;
  }

  .movie01,.movie02 {
    float: none;
    margin: 0px auto 10px;
    width: 100%;
    line-height: 0;
    text-align: center;
  }

  ul.why-Tip {
    margin: 10px auto 0px;
    padding: 0;
    width: 94%;
    max-width: 100%;
  }

  li.why-Tip-Contents {
    margin: 14px auto 0px;
    padding: 0;
    width: 100%;
    max-width: 100%;
    display: inline-block;
    vertical-align: bottom;
    font-size: 0;
  }
  
  li.why-Tip-Contents:nth-child(2),
  li.why-Tip-Contents:nth-child(5) {
    margin: 14px 0px 0px;
  }
  
    ul.why-Tip li:nth-child(even) {
    margin: 14px 0px 0px 0px;
  }
  
  li.why-Tip-Contents p {
    min-height: auto;
  }

}


/*----- ソーラーサーキットの家 BASIC -----*/

.sc-Basic {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 1020px;
  line-height: 0;
}

.summer, .winter {
  clear: both;
  position: relative;
  margin: 0 auto;
  padding: 0px;
  width: 100%;
  max-width: 1020px;
  background: #fff;
}

.summer:before {
  position: absolute;
  content: "";
  width: 100%;
  max-width: 1020px;
  height: 5px;
  background: linear-gradient(90deg,#88e8b4,#59ace0);
}

.winter:before {
  position: absolute;
  content: "";
  width: 100%;
  max-width: 1020px;
  height: 5px;
  background: linear-gradient(90deg,#ffef6a,#ff7015);
}

.summer-Inner, .winter-Inner {
  margin: 0 auto;
  padding: 60px 0px;
  width: 84.313725490%;/* 860px / 1020px */
  max-width: 860px;
}

.season-Title {
  margin: 0;
  padding: 23px 23px;
  max-width: 80px;
  max-height: 80px;
  color: #fff;
  font-size: 34px;
  font-weight: 400;
  display: inline-block;
  background: #000;
  text-align: center;
  vertical-align: middle;
  line-height: 1;
}

.season-Head {
  margin: -20px auto 54px;
  width: 79.069767441%;/* 680px / 860px */
  max-width: 680px;
  height: 189px;
}

.sc-Img {
  float: left;
  margin: 0;
  padding: 0;
  width: 44.8529411%;/* 305px / 680px */
  max-width: 305px;
}

.sc-Copy {
  float: right;
  margin: 30px 0px 0px;
  font-size: 20px;
  font-size: 2.0rem;
}

.sc-Copy span.summer-color {
  font-size: 14px;
  color: #3780da;
  display: block;
  line-height: 2.6;
}

.sc-Chart {
  clear: both;
}

.sc-Chart-Title {
  margin: 0px 0px 5px;
  padding: 0;
  font-size: 20px;
  font-size: 2.0rem;
}

.sc-Chart-Img-L {
  float: left;
  margin-bottom: 15px;
  width: 50%;
  max-width: 392px;
  font-size: 14px;
  font-size: 1.4rem;
}

.sc-Chart-Img-R {
  float: right;
  margin-bottom: 15px;
  width: 50%;
  max-width: 392px;
  font-size: 14px;
  font-size: 1.4rem;
}

.chart-Exp-Red, .chart-Exp-Blue {
  position: relative;
  margin: 0px 50px 0px 0px;
  padding: 0;
  font-size: 12px;
  display: inline-block;
}

.chart-Exp-Red:after {
  position: absolute;
  content: "";
  margin: 11px 2px 0px;
  width: 40px;
  border-top: 2px solid #fa4e6a;
}

.chart-Exp-Blue:after {
  position: absolute;
  content: "";
  margin: 11px 2px 0px;
  width: 40px;
  border-top: 2px solid #6ba8f4;
}

.condition {
  margin: 16px 0px 0px;
  font-size: 12px;
  line-height: 1.7;
  display: table;
}

.condition-Head {
  margin: 0;
  padding: 0;
  width: 78px;
  height: 78px;
  font-size: 12px;
  font-size: 1.2rem;
  border: 1px solid #494949;
  background: transparent;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.sc-Condition {
  margin: 0;
  padding: 0px 0px 0px 12px;
  font-size: 12px;
  font-size: 1.2rem;
  display: table-cell;
}

.sc-Next-Link {
  margin: 0 auto;
  padding: 20px 0px 14px;
  width: 100%;
  max-width: 1020px;
  color: #000;
  text-align: center;
  background: #fff;
}

.sc-Next-Link > p {
  font-size: 18px;
  font-size: 1.8rem;
}

.link-Btn a {
  margin: -10px 0px 0px 10px;
  padding: 2px 20px 0px;
  color: #000;
  font-size: 14px;
  font-size: 1.4rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  vertical-align: text-top;
  border: 1px solid #686864;
  border-radius: 5px;
  background: transparent;
  transition: background 0.6s, color 0.6s;
}

.link-Btn a:hover {
  color: #fff;
  background: #686864;
}


@media screen and (max-width: 768px) {

  .season-Title {
    margin: 0;
    padding: 24px 19px;
    max-width: 70px;
    max-height: 70px;
    color: #fff;
    font-size: 30px;
  }

  .season-Head {
    margin: -10px auto 28px;
    width: 90%;
    max-width: 648px;
    height: 163px;
  }

  .sc-Img {
    width: 39.1975308%;/* 254px / 648px */
    max-width: 254px;
  }

  .sc-Copy {
    margin: 20px 0px 0px;
  }

  .sc-Chart-Img-L {
    float: left;
    width: 48%;
    max-width: 392px;
  }

  .sc-Chart-Img-R {
    float: right;
    width: 48%;
    max-width: 392px;
  }

}


@media screen and (max-width: 420px) {

   .season-Head {
    margin: -20px auto 28px;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .sc-Img {
    float: none;
    margin: 0 auto;
    width: 80%;
    max-width: 305px;
  }

  .sc-Copy {
    float: none;
    margin: 14px auto 0px;
    width: 100%;
    font-size: 1.428571em;/* 20px */
  }

  .sc-Chart-Img-L {
    float: none;
    width: 100%;
    max-width: 392px;
  }

  .sc-Chart-Img-R {
    float: none;
    width: 100%;
    max-width: 392px;
  }

  .condition {
    display: inline-block;
  }

  .condition-Head {
    margin: 0 auto;
    padding: 4px 0px;
    width: 100%;
    height: auto;
    border: 1px solid #494949;
    background: transparent;
    display: inline-block;
  }

  .sc-Condition {
    margin: 10px 0px 0px;
    padding: 0;
    display: block;
  }

  .sc-Next-Link {
    padding: 14px 0px;
  }

}


/*----- ソーラーサーキットの家 NEXT -----*/

.sc-next-Concept {
  margin: 0 auto;
  padding: 0;
  width: 508px;
  max-width: 1020px;
}

.sc-next-Concept-Title,.sc-next-Access-Map h2 {
  margin: 20px auto 0px;
  padding: 0;
  font-size: 28px;
  font-size: 2.8rem;
  font-weight: 400;
  text-align: center;
}

.sc-next-Concept-Body {
  padding: 0px 0px 30px;
}

.sc-next-Concept-Contents {
  font-size: 14px;
  font-size: 1.4rem;
}

.advantages1,.advantages2,.advantages3 {
  position: relative;
  margin-left: 39px;
  font-size: 20px;
  font-size: 2.0rem;
  width: 5em;
  display: inline-block;
  line-height: 2.2;
}

.advantages1:before {
  content: "";
  position: absolute;
  top: 8px;
  left: -39px;
  width: 29px;
  height: 29px;
  background: url("../housing/next/images/icon1.png")no-repeat;
}

.advantages2:before {
  content: "";
  position: absolute;
  top: 8px;
  left: -39px;
  width: 29px;
  height: 29px;
  background: url("../housing/next/images/icon2.png")no-repeat;
}

.advantages3:before {
  content: "";
  position: absolute;
  top: 8px;
  left: -39px;
  width: 29px;
  height: 29px;
  background: url("../housing/next/images/icon3.png")no-repeat;
}

.sc-next-Tech {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 1020px;
}

.sc-next-Tech-Title {
  margin-bottom: 30px;
  padding: 0;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 400;
  text-align: center;
}

.sc-next-Tech-Body {
  margin: 0 auto 40px;
  padding: 0;
  width: 100%;
  max-width: 704px;
  display: table;
}

.sc-next-Tech-L {
  float: left;
  margin: 0;
  padding: 0;
  width: 288px;
  max-width: 288px;
  font-size: 0;
}

.tech-Img-L {
  float: left;
  margin: 0;
  padding: 0;
  width: 136px;
  max-width: 136px;
  display: inline-block;
}

.tech-Img-R {
  float: right;
  margin: 0;
  padding: 0;
  width: 136px;
  max-width: 136px;
  display: inline-block;
}

.tech-Img-L img,.tech-Img-R img {
  width: 100%;
  max-width: 100%;
}

.tech-Exp {
  margin-top: 4px;
  width: 100%;
  font-size: 12px;
  line-height: 1.7;
  display: inline-block;
}

.sc-next-Tech-R {
  float: left;
  margin: 0px 0px 0px 16px;
  padding: 0;
  width: 400px;
  max-width: 400px;
}

.tech-Copy {
  margin: 0;
  padding: 0;
  max-width: 400px;
  font-size: 12px;/* 12px */
}

.tech-Copy span {
  margin-top: -0.4em;
  font-size: 16px;
  display: block;
}

.bels {
  margin: 0 auto 40px;
  width: 467px;
  display: table:
}

.bels a {
  color: #fff;
}

.bels-L {
  margin: 0;
  padding: 0;
  width: 77px;
  max-width: 77px;
  display: table-cell;
}

.bels-R {
  margin: 0;
  padding-left: 10px;
  width: 380px;
  height: 77px;
  font-size: 14px;
  font-size: 1.4rem;
  vertical-align: middle;
  line-height: 1.7;
  display: table-cell;
}

.bels-R a {
  font-size: 14px;
  font-size: 1.4rem;
}


/*----- BASIC / NEXT モデルルームタイトル-----*/

.model-Room {
    margin: 0 auto;
    padding: 4px 0px 2px;
    width: 100%;
    max-width: 1020px;
    color: #fff;
    font-size: 20px;
    font-size: 2.0rem;
    text-align: center;
    background: rgba(0,0,0,0.4);
}

@media screen and (max-width: 420px) {

  .model-Room {
    font-size: 16px;
  }

}


/*----- BASIC / NEXT アクセスマップ -----*/

.sc-next-Access-Map {
  margin: 0 auto;
  padding: 0px 0px 40px;
  text-align: center;
}

.sc-next-Access-Map p.info br {
  display: none;
}

.welcome {
  font-size: 20px;
}

.welcome br {
  display: none;
}

.sc-next-Access-Map > .info {
  font-size: 14px;
  font-size: 1.4rem;
}

.ggl-Map {
  position: relative;
  margin: 20px auto 0px;
  padding-top: 40%;
  width: 80%;
  height: 0;
  overflow: hidden;
}

.ggl-Map iframe,
.ggl-Map object,.ggl-Map embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/*----- BASIC / NEXT ページ最下部リンク -----*/

.sc-reserve-Link {
  margin: 0 auto;
  width: 100%;
  max-width: 1020px;
  text-align: center;
  line-height: 1.6;
}

.sc-reserve-Link br {
  display: none;
}

.sc-reserve-Link a {
  padding: 17px 0px 15px;
  color: #fff;
  font-size: 24px;
  font-size: 2.4rem;
  text-decoration: none;
  display: block;
  background: rgba(104,104,100,0.9);
  transition: all 0.6s;
}

.sc-reserve-Link a:hover {
  color: #686864;
  background: rgba(240,240,239,0.9);
}


@media screen and (max-width: 600px) {

  .sc-next-Concept {
    margin: 0 auto;
    padding: 0;
    width:80%;
    max-width: 320px;
  }

  .sc-next-Concept-Body {
    margin: 0 auto;
    padding: 0px 0px 30px;
    width: 320px;
  }

  .advantages1,.advantages2,.advantages3 {
    position: relative;
    margin-left: 39px;
    font-size: 1.428571em;/* 20px */
    width: 5em;
    display: block;
    line-height: 2.2;
  }
  
  .sc-next-Tech {
    width: 92%;
  }

  .sc-next-Tech-Title span {
    display: block;
  }

  .sc-next-Tech-Body {
    margin: 0 auto 40px;
    padding: 0;
    width: 100%;
    max-width: 420px;
    display: table;
  }

  .sc-next-Tech-L {
    float: none;
    margin: 0px auto 14px;
    padding: 0;
    width: 100%;
    max-width: 320px;
    font-size: 0;
  }

  .tech-Img-L {
    width: 152px;
    max-width: 152px;
  }

  .tech-Img-R {
    width: 152px;
    max-width: 152px;
  }

  .tech-Exp {
    margin: 4px 0px 0px;
    width: 320px;
  }

  .sc-next-Tech-R {
    float: none;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 320px;
  }

  .tech-Copy {
    margin: 0 auto;
    text-align: justify;
  }

  .bels {
    margin: 0 auto 50px;
    width: 320px;
    display: table:
  }

  .bels-L {
    margin: 0;
    padding: 0;
    width: 77px;
    max-width: 77px;
    display: table-cell;
  }

  .bels-R {
    margin: 0;
    padding-left: 10px;
    width: 249px;
    height: 77px;
    vertical-align: middle;
    line-height: 1.7;
    display: table-cell;
  }

  .sc-next-Access-Map h2 {
    margin: 36px auto 20px;
    padding: 0;
    font-size: 2em;
    font-weight: 400;
    text-align: center;
    line-height: 0;
  }

  .welcome {
    font-size: 18px;
    text-align: center;
  }

  .welcome br {
    display: inline;
  }

  .ggl-Map {
    padding-top: 60%;
    width: 90%;
  }

  .sc-next-Access-Map p.info {
    margin: 5px auto 0px;
    width: 80%;
  }

  .sc-next-Access-Map p.info br {
    display: inline;
  }

  .sc-reserve-Link {
    font-size: 18px;
  }

  .sc-reserve-Link br {
    display: inline;
  }

}


/*----- かながわ県産木材 -----*/

.kanagawa-pref {
  margin: 0 auto;
  width: 100%;
  max-width: 1020px;
  max-height: 420px;
}

.kanagawa-pref-img {
  line-height: 0;
}

.kanagawa-pref-half-img {
  float: left;
  margin: 0;
  width: 50%;
  max-width: 510px;
  line-height: 0;
}

.kanagawa-pref-img img,.kanagawa-pref-half-img img{
  width: 100%;
  max-width: 100%;
}


@media screen and (max-width: 768px) {

  .kanagawa-pref-half-img {
    float: none;
    margin: 0 auto;
    width: 70%;
    max-width: 768px;
  }

  .housing-Cap-half {
    float: none;
    margin: 0 auto;
    padding: 36px 0 10px;
    width: 70%;
    max-width: 768px;
  }

}


@media screen and (max-width: 600px) {

  .kanagawa-pref-half-img {
    width: 100%;
    max-width: 600px;
  }

  .housing-Cap-half {
    padding: 36px 3.52941176%/* 36px */ 0;
    width: 100%;
    max-width: 600
  }

}


/*----- 耐震性の基礎・軸組み -----*/

.earthquake-proof {
  margin: 0 auto;
  width: calc(100% - 140px);
  max-width: 1020px;
  height: auto;
  background: #fff;
}

.goal {
  margin: 14px auto 0;
  width: 90%;
  font-size: 14px;
  font-size: 1.4rem;
  text-align: center;
}

.earthquake-Inner {
  margin: 0 auto;
  padding: 0 36px;
  width: calc(100% - 140px);
  max-width: 1020px;
  background: #fff;
}

.basic-Point {
  margin: -6px 10px 0 0;
  padding: 10px 12px;
  color: #fff;
  font-size: 18px;
  font-size: 1.8rem;
  text-align: center;
  line-height: 1;
  background: #000;
  display: inline-block;
  vertical-align: text-top;
}

.earthquake-Inner > .sub-Copy {
  margin-top: 10px;
  padding-bottom: 14px;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.6;
}

table.left-Body {
  float: left;
  margin: -4px 0 0;
  width: 76.26582278%;/* 723px / 948px */
  max-width: 723px;
}

table.left-Body th {
  width: 19.3637621%;/* 140px / 723px */
  max-width: 140px;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

table.left-Body td {
  padding-bottom: 12px;
  width: 80.63623789%;/* 583px / 723px */
  max-width: 583px;
  font-size: 14px;
  font-size: 1.4rem;
  text-align: justify;
  text-justify: inter-ideograph;
  vertical-align: top;
}

table.wide-Body {
  clear: both;
  width: 100%;
  max-width: 948px;
}

table.wide-Body th {
  width: 14.767932489%;/* 140px / 948px */
  max-width: 140px;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

table.wide-Body td {
  padding-bottom: 22px;
  font-size: 14px;
  font-size: 1.4rem;
  text-align: justify;
  text-justify: inter-ideograph;
  vertical-align: top;
}

.right-Body {
  float: right;
  margin-bottom: 20px;
  width: 21.62447257%;/* 205px / 948px */
  max-width: 205px;
  line-height: 0;
}

.anti-Termite-Left {
  margin: 0;
  padding-right: 20px;
  width: 54.00843881%;/* 512px / 948px */
  max-width: 512px;
}

.anti-Termite-Right {
  width: 28.586497%;/* 271px / 948px */
  max-width: 271px;
  font-size: 12px !important;
  font-size: 1.2rem !important;
  line-height: 1.8;
}

ul.basic3 {
  margin: 0 auto;
  width: 100%;
  font-size: 0;
}

ul.basic3 li {
  margin-left: 2.84810126%;/* 27px / 948px */
  width: 31.43459915%;/* 298px / 948px */
  max-width: 298px;
  font-size: 12px;
  vertical-align: top;
  display: inline-block;
}

ul.basic3 li:nth-child(3n+1) {
  margin-left: 0px;
}

ul.basic3 li img {
  width: 100%;
  max-width: 100%;
}

ul.basic3 li > .captions {
  margin: 8px 0 14px;
  font-size: 12px;
  line-height: 1.4;
}

.slogan {
  margin: 0 auto;
  padding: 40px 0;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 400;
  text-align: center;
}


@media screen and (max-width: 768px) {
    
  .earthquake-proof {
    margin-top: 60px;
    width: 100%;
  }
    
  .earthquake-Inner {
    width: 100%;
  }

  table.left-Body {
    float: left;
    margin: -4px 0 0;
    width: 76.26582278%;/* 723px / 696px */
    max-width: 476px;
  }

  table.left-Body th {
    width: 29.411764705%;/* 140px / 476px */
  }

  table.left-Body td {
    width: 70.588235294%;/* 583px / 476px */
    max-width: 336px;
  }

  .right-Body {
    width: 29.454022988%;/* 205px / 696px */
    max-width: 205px;
  }

  table.wide-Body th {
    width: 20.114942528%;/* 140px / 696px */
  }

  table.wide-Body td {
    padding-bottom: 0;
    display: block;
  }

  .anti-Termite-Left {
    margin: 10px 0 0;
    width: 100%;
    max-width: 512px;
  }

  .anti-Termite-Right {
    margin-bottom: 10px;
    width: 100%;
    max-width: 570px;
    font-size: 12px;
    line-height: 1.8;
  }
  
  .slogan {text-align: justify;}

  .slogan br {
    display: none;
  }

}


@media screen and (max-width: 600px) {

  .goal {
    margin: 0 auto;
    text-align: justify;
    text-justify: inter-ideograph;
    line-height: 1.8;
  }

  .goal br {
    display: none;
  }

  .earthquake-Inner {
    margin: 0 auto;
    padding: 0 5%;
    width: 100%;
  }

  .basic-Point {
    margin: -2px 10px 0 0;
    padding: 7px 12px 8px;
    color: #fff;
    font-size: 18px;
    vertical-align: baseline;
  }

  table.left-Body {
    float: none;
    margin: -4px 0 0;
    width: 100%;
    max-width: 100%;
  }

  table.left-Body th,
  table.wide-Body th {
    width: 100%;
    max-width: 100%;
    font-size: 18px;
    display: block;
  }

  table.left-Body td,
  table.wide-Body td {
    width: 100%;
    max-width: 100%;
    display: block;
    line-height: 1.8;
  }

  .earthquake-Inner > .sub-Copy {
    padding-bottom: 0;
    padding: 5px 0 14px;
    font-size: 14px;
    text-align: justify;
    text-justify: inter-ideograph;
    line-height: 1.8;
  }

  .right-Body {
    display: none;
  }

  ul.basic3 li > .captions {
    height: 32px;
  }
  
  .anti-Termite-Left {
    margin: 10px 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
  }

  .anti-Termite-Right {
    margin-bottom: 10px;
    width: 100%;
    max-width: 570px;
    font-size: 12px;
    line-height: 1.8;
  }

  .slogan {
    padding: 20px 0 50px;
    font-size: 18px;
    text-align: justify;
    line-height: 1.8;
  }

}


/*
/housing page
*/


/*
works page
*/

.category-menu-container {
  position: relative;
  margin: 10px auto 0;
  width: calc(98% - 140px);
  height: 40px;
  -js-display: flex;
  display: flex;
}

.category-menu-container > p {
  margin: 0 1.5rem 0 0;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 40px;
}

.works-attn,
.works-attn-sp {
  margin: 0 !important;
  margin-left: auto !important;
  font-size: 12px !important;
  font-size: 1.2rem !important;
}

.works-attn-sp {
  display: none;
}

.category-menu {
  margin: 0;
  width: 100%;
  height: 40px;
  max-width: 1000px;
}

.category-menu > li {
  float: left;
  width: auto;
  height: 40px;
  line-height: 40px;
}

.category-menu > li a {
  display: inline-block;
  padding: 0 2.8rem;
  color: #000;
  font-size: 14px;
  font-size: 1.4rem;
  text-decoration: none;
  transition: all 0.4s;
}

.category-menu > li a:hover {
  background: #fff;
}

ul.category-menu__second-level {
  visibility: hidden;
  opacity: 0;
  z-index: 1;
}

li.category-menu__mega ul.category-menu__second-level {
  position: absolute;
  top: 30px;
  left: -2px;
  box-sizing: border-box;
  width: 100.25%;
  padding: 1px 0;
  background: rgba(255,255,255,0.87);
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

li.category-menu__mega:hover ul.category-menu__second-level {
  top: 40px;
  visibility: visible;
  opacity: 1;
}

li.category-menu__mega ul.category-menu__second-level > li {
  float: left;
  width: 20%;
  border: none;
}

li.category-menu__mega ul.category-menu__second-level > li a {
  margin: 0;
  padding: 0px 1.5rem;
  display: block;
}

.category-title {
  margin: 15px auto;
  font-size: 20px;
  font-size: 2.0rem;
  text-align: center;
  letter-spacing: 2px;
}


@media screen and (max-width: 1100px) {

  .category-menu-container > p {
    margin: 0 20px 0 0;
  }

}


@media screen and (max-width: 899px) {

  li.category-menu__mega ul.category-menu__second-level > li {
    width: 25%;
  }

}

@media screen and (max-width: 768px) {

  .category-menu-container {
    margin: 74px auto 0;
    width: 96%;
    height: 40px;
}

}


@media screen and (max-width: 710px) {
  
  .category-menu-container {
    height: auto;
    margin-bottom: 25px;
  }

  .category-menu-container > p {
    margin: 0 1.5rem 0 0;
    width: 120px;
  }
  
  .category-menu > li a {
    padding: 0 1.5rem;
  }
  
  .works-attn {
    display: none;
  }
  
  .works-attn-sp {
    display: block;
    margin-left: 2% !important;
    margin-bottom:8px !important;
  }
    
  li.category-menu__mega:hover ul.category-menu__second-level {
    top: 40px;
  }

  li.category-menu__mega ul.category-menu__second-level > li {
    width: 33.33333%;
  }

}


@media screen and (max-width: 540px) {

  li.category-menu__mega ul.category-menu__second-level > li {
    width: 50%;
  }

}


.works-wrap {
  margin: 0 auto;
  width: 100%;
  max-width: 1100px;
  font-family: 'Bitter',"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, ヒラギノ角ゴシック ProN W3, 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', sans-serif;
}

.works-wrap-header {
  margin: 20px auto 30px;
  width: 100%;
  -js-display: flex;
  display: flex;
  justify-content: space-between;
}

.works-page-title {
  writing-mode: vertical-lr;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.2rem;
}

.works-name {
  text-align: right;
}

.works-name li,
.works-name li p,
.works-name li a {
  color: #000;
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.2rem;
}

.works-name li p {
  margin: 4px 0 6px;
  font-size: 21px;
  font-size: 2.1rem;
}

.works-name li a {
  margin-bottom: 10px;
  display: inline-block;
  font-size: 20px;
  font-size: 2.0rem;
}

.works-name > li span {
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: 0.2rem;
  display: block;
}

.works-name li:first-child {
  margin-bottom: 6px;
  padding: 3px 14px 2px;
  height: 20px;
  color: #fff;
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: 400;
  background: #000;
  display: inline-block;
}

.works-spec-wrap {
  margin: 50px auto;
  width: 100%;
  max-width: 1100px;
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic;
  -js-display: flex;
  display: flex;
  justify-content: space-between;
}

.works-spec {
  margin-top: 10px;
}

.works-spec li, .works-spec li > span {
  font-size: 13px;
  font-size: 1.3rem;
  text-align: right;
  line-height: 2;
  letter-spacing: 0.2rem;
}

.works-spec li > span {
  margin-right: 1rem;
  width: 10rem;
  font-weight: 700;
  display: inline-block;
}

.works-spec li:first-child > span {
  margin-right: 0;
}

.works-head-img {
  margin-bottom: 28px;
}

.works-head-img > img {
  max-width: 100%;
}

.works-img-wrap {
  margin: 0 auto;
}

.horizontal-img {
  margin: 0 auto 28px;
  max-width: 100%;
  max-height: 780px;
}

.vertical-img {
  margin: 0 auto 28px;
  max-width: 70.909090%;/*780/1100*/;
  max-height: 1100px;
}

.horizontal-img-s,.horizontal-img-390 {
  position: relative;
  margin: 0 auto 28px;
  max-width: 550px;
  max-height: 350px;
}

.horizontal-img-390 {
  max-height: 390px;
}

.vertical-img-390 {
  position: relative;
  margin: 0 auto 28px;
  max-width: 390px;
  max-height: 550px;
}

.horizontal-img > img,
.horizontal-img-s > img {
  max-width: 100%;
}

.horizontal-img-s .arrow {
  position: absolute;
  bottom: -74px;
  left: 50%;
  width: 60px;
  height: 70px;
  transform: translateX(-50%);
  z-index: 10;
}

.works-img-wrap > div:last-child {
  margin: 0 auto;
}

.rnv-after, .rnv-before {
  position: relative;
  width: 100%;
  height: 100%;
}

.rnv-before::before {
  content: 'BEFORE';
  position: absolute;
  top: 0;
  left: 0;
  padding: 9px 12px;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  background: rgba(0,0,0,0.65);
}


@media screen and (max-width: 1100px) {

  .works-wrap-header,
  .works-spec-wrap,
  .works-img-wrap {
    width: 90%;
  }

}

@media screen and (max-width: 768px) {

  .works-wrap-header {
    margin: 80px auto 30px;
    width: 90%;
  }
  
  .horizontal-img-s {margin-bottom: 16px}
  
  .horizontal-img-s .arrow {
    bottom: -52px;
    width: 42px;
    height: 49px;
  }
  
  .horizontal-img-s,.horizontal-img-390 {width: 77% !important;}
  .vertical-img-390  {width: 54.598% !important;}
  
  .rnv-before::before {
    padding: 7px 10px;
    font-size: 13px;
  }

}


/*
/works page
*/


/*
company page
*/

.company-Wrap {
  margin: 0 auto;
  width: calc(100% - 140px);
  line-height: 1.7;
}

.concept-Cap {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px 20px 12px;
  width: 100%;
  color: #fff;
  font-size: 14px;
  line-height: 2;
  background: rgba(0,0,0,0.3);
}

.concept-Cap span {
  margin-bottom: 4px;
  font-size: 20px;
  display: block;
  line-height: 1.5;
}

.company {
  margin: 0 auto;
  padding: 0 0 50px;
  width: 100%;
  max-width: 1020px;
  background: #fff;
}

.company-story-head,
.company-profile-head {
  clear: both;
  margin: 0;
  padding: 36px 0px 26px;
  font-size: 26px;
  font-weight: 400;
  text-align: center;
  line-height: 1.5;
}

.story-Body {
  margin: 0 auto;
  padding: 0;
  width: 75.49019607%;/* 770px */
}

.story-Body li {
  padding: 9px 0.5em 5px;
  font-size: 14px;
  font-size: 1.4rem;
  border-top: 1px solid #c3c3c3;
}

.story-Body li span {
  font-size: 14px;
  font-size: 1.4rem;
}

.story-Body li:first-child {
  padding: 0 0.5em 3px;
  border-top: none;
}

.story-Date {
  width: 12em;
  display: inline-block;
}

.story-Img-Wrap {
  margin: 0 auto;
  padding: 0 0 20px;
  width: 100%;
  max-width: 1020px;
  line-height: 0;
  display: table;
  background: #fff;
}

.story-Img-L,.story-Img-R {
  margin: 0;
  padding: 0;
  width: 50%;
  max-width: 510px;
  display: table-cell;
}

.story-Img-L img,.story-Img-R img {
  width: 100%;
  max-width: 100%;
}

.m-v-Wrap,
.company-Profile {
  position: relative;
  margin: 0 auto;
  padding: 0 0;
  width: 100%;
  max-width: 1020px;
  background: #fff;
  line-height: 2;
  display: table;
}

.m-v-Wrap {
  padding: 20px 0;
}

.m-v-Wrap:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 522px;
  height: 359px;
  background: url(../company/images/kanagawa-map.png)no-repeat;
}

.m-v-Inner,.company-Profile-Inner {
  position: relative;
  margin: 0 auto;
  max-width: 916px;
  z-index: 1;
}

.m-v-Inner:first-child {
  margin: 0px auto 20px;
}

.mission-Head,.value-Head {
  margin: 0;
  padding: 0;
  width: 28%;
  font-size: 26px;
  font-size: 2.6rem;
  font-weight: 400;
  text-align: center;
  line-height: 1.2;
  vertical-align: middle;
  display: table-cell;
}

.mission,.value {
  width: 72%;
  font-size: 14px;
  font-size: 1.4rem;
  text-align: justify;
  text-justify: inter-ideograph;/* ie */
  display: table-cell;
}

.mission > span,.value > span {
  margin: 0 0 2px;
  font-size: 18px;
  font-size: 1.8rem;
  display: block;
}

.profile-Wrap {
  float: left;
  margin: 0;
  padding-bottom: 50px;
  max-width: 460px;
  display: table;
}

.profile-Items {
  width: 7.5em;
  font-size: 14px;
  font-size: 1.4rem;
  display: table-cell;
}

.profile-Body {
  width: 344px;
  font-size: 14px;
  font-size: 1.4rem;
  display: table-cell;
}

.company-Map {
  margin: 0;
  padding-top: 51%;
  height: 0;
  position: relative;
  overflow: hidden;
}

.company-Map iframe,
.company-Map object,
.company-Map embed{
  position: absolute;
  top: 0;
  left: 5%;
  width: 95%;
  height: 100%;
}


@media screen and (max-width: 768px) {
    
  .company-Wrap {
    margin: 66px auto 0;
    width: 100%;
  }

  .company {
    padding: 0 0 30px;
  }

  .story-Body {
    width: 92%;
  }

  .m-v-Wrap,.company-Profile {
    position: relative;
    margin: 0 auto;
    padding: 0 4% 0;
    width: 100%;
    max-width: 1020px;
    background: #fff;
    line-height: 2;
    display: table;
  }

  .mission-Head,.value-Head {
    text-align: left;
  }

  .profile-Wrap {
    float: none;
    margin: 0 auto;
    padding-bottom: 30px;
    width: 98%;
  }

  .company-Map {
    margin: 0 0 50px;
    padding-top: 58%;
    height: 0;
    position: relative;
    overflow: hidden;
  }

  .company-Map iframe,
  .company-Map object,
  .company-Map embed{
    position: absolute;
    top: 0;
    left: 0%;
    width: 100%;
    height: 100%;
    margin-bottom: 50px;
  }

}


@media screen and (max-width: 420px) {

  .concept-Cap {
    padding: 45px 15px;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 14px;
    line-height: 2;
    background: rgba(0,0,0,0.35);
    vertical-align: middle;
  }

  .concept-Cap br {
    display: none;
  }

  .concept-Cap span {
    font-size: 16px;
  }

  .story-Date {
    margin: 0 0 2px;
    width: 100%;
    display: block;
  }

  .story-Img-L,.story-Img-R {
    width: 100%;
    display: block;
  }

  .m-v-Wrap:after {
    display: none;
  }

  .mission-Head,.value-Head {
    margin-bottom: 5px;
    width: 100%;
    text-align: center;
    position: relative;
    display: block;
  }

  .mission-Head:before,.value-Head:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    border-top: 1px solid #a4a4a4;
  }

  .mission-Head span,.value-Head span {
    padding: 0 0.5em;
    font-size: 18px;
    display: inline-block;
    background: #fff;
    position: relative;
  }

  .mission > span,.value > span {
    margin: 0 0 2px;
    font-size: 16px;
    display: block;
  }

  .company-Map {
    padding-top: 70%;
  }

}

/*
/company page
*/



/*
open house / event page
*/

.event-wrap {
  margin: 0 auto;
  padding: 48px 0px;
  width: 100%;
  /* background: #fafafa; */
}

.event-contents {
  clear: both;
  margin: 0 auto;
  width: 92%;
  max-width: 1100px;
  font-size: 0;
  vertical-align: top;
}

.event-item {
  margin-bottom: 40px;
  padding: 0;
  width: 100%;
  max-width: 1100px;
  font-size: 0;
}

@media screen and (max-width: 1240px) {
  .event-item {
    margin: 0 auto 40px;
    width: calc(100% - 140px)
  }
}

.event-Img, .openhouse-Img {
  width: 25.4545454546%;/* 280px / 1100px */
  max-width: 280px;
  font-size: 14px;
  vertical-align: top;
  display: inline-block;
  line-height: 0;
  position: relative;
}

.event-img-cap {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
}

.event-Img:before {
  content: "Event";
  position: absolute;
  top: 0;
  left: 0;
  padding: 7px 10px;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  line-height: 1;
  background: rgba(0,0,0,0.7);
  z-index: 1;
}

.openhouse-Img:before {
  content: "Open House";
  position: absolute;
  top: 0;
  left: 0;
  padding: 7px 10px;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  line-height: 1;
  background: rgba(0,0,0,0.7);
  z-index: 1;
}

.event-item > div {
  margin: 0 0 0 1.81818182%/*20px*/;
  padding: 0;
  width: 72.7272727273%;/* 800px / 1100px */
  max-width: 800px;
  font-size: 14px;
  display: inline-block;
  text-align: justify;
  text-justify: inter-ideograph;
  line-height: 1.8;
}

.event-title {
  margin-top: -4px;
  margin-bottom: 8px;
  padding: 0;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
  display: block;
}

.event-title > span {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7 !important;
}

.event-detail, .event-detail p, .event-detail a, .event-detail span, .event-detail li {
  color: #000;
  font-size: 14px;
  font-size: 1.4rem;
  overflow-wrap: break-word;
}

.event-detail p {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1.5px;
}

.red {color: red !important;}

.event-detail ul {
  margin-bottom: 5px;
}

.event-detail ul li {
  margin-left: 1.4rem;
  color: #000;
  font-size: 1.4rem;
  font-weight: 400;
  list-style-type: disc;
}

.reservation-Btn {
  margin: 8px 0px 0px;
  padding: 0;
}

.reservation-Btn a {
  padding: 10px;
  color: #000;
  font-size: 13px;
  font-size: 1.3rem;
  text-align: center;
  text-decoration: none;
  border: 1px solid rgba(44,44,42,1.0);
  border-radius: 4px;
  line-height: 1em;
  display: inline-block;
  transition: color 0.6s, background 0.6s;
}

.reservation-Btn a:hover {
  color: #fff;
  background: rgba(44,44,42,1.0);
}

.event-Ended  {
  color: red;
  font-size: 14px;
  font-size: 1.4rem;
}


@media screen and (max-width: 768px) {
    
  .event-wrap {
    margin-top: 66px;
    padding: 30px 0 48px;
  }

  .event-contents {
    clear: both;
    margin: 0 auto;
    width: 92%;
    max-width: 768px;
    font-size: 0;
    vertical-align: top;
  }

  .event-item {
    margin: 0 0 40px;
    padding: 0;
    width: 100%;
  }

  .event-Img {
    width: 39.660056657224%;/* 280px / 706px */
    max-width: 280px;
  }

  .event-item > div {
    margin: -4px 0 0 1.983002832861%/*14px*/;
    padding: 0;
    width: 58.3569405099%;/* 412px / 706px */
    max-width: 412px;
  }

}


@media screen and (max-width: 600px) {

  .event-item {
    margin: 0 auto  48px;
    padding: 0;
    width: 100%;
    max-width: 400px;
    font-size: 14px;
    display: block;
  }

  .event-Img {
    margin: 0 auto 18px;
    width: 100%;
    max-width: 100%;
    display: block;
  }

  .event-item > div {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
  }

  .reservation-Btn a {
    padding: 14px 10px 11px;
    width: 100%;
    text-align: center;
    display: inline-block;
  }

  .underconstruction {
    display: none;
  }

}


/*
open House / event page
*/



/*
interview
*/

.interviews-container {
  position: relative;
  /* margin-top: 58px; */
  background: #f7f7f7;
}

.interviews-container-inner {
  margin: 0 auto;
  padding: 34px 0;
  width: calc(100% - 140px);
  max-width: 100%;
}


@media screen and (max-width: 768px) {

  .interviews-container-inner {
    margin: 66px auto 0;
    width: 100%;
    max-width: 92%;
  }

}


@media screen and (max-width: 600px) {

  .interviews-container {
    margin-top: 0;
  }

  .interviews-container-inner {
    padding: 30px 0;
    max-width: 92%;
  }

}

/*----- bread crumb -----*/

.inner-nav {
  margin: 0 auto;
  padding: 26px 0 40px;
  width: 94%;
  max-width: 1196px;
}

.inner-nav li {
  display: inline;
}

.inner-nav li .fa-angle-right {
  margin: 0 3px 0 0;
  color: #ff7213;
}

.inner-nav li a {
  margin: 0 16px 0 0;
  color: #000;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.5s;
}

.inner-nav li a:hover {
  color: #ff7213;
}

.inner-nav li a.current {
  color: #a2a2a2;
}


/*----- bread clam -----*/


.interview {
  margin: 0 auto;
  max-width: 100%;
  /*min-width: 1100px; */
}

.interview-head {
  margin-bottom: 6px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

.interview-head > span {
  margin-left: 4px;
  font-size: 18px;
  vertical-align: middle;
}

.interview-sub-head {
  margin-bottom: 50px;
  font-size: 18px;
  text-align: center;
  font-weight: 400;
}

.interviews-wrap {
  margin: 0 auto;
  -js-display: flex;
  display: flex;
  flex-wrap: wrap;
}

.interviews {
  margin-bottom: 30px;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.interviews:nth-child(3n+1) {
  margin-left: 0;
  border-left: none;
}

.interviews:nth-child(-n+3) {
  border-top: none;
}

.interviews-body {
  margin: 0 auto;
  padding: 20px;
  -js-display: flex;
  display: flex;
  position: relative;    
  background: #fff;
  border-radius: 3px;
}

.interviews-body > h3,
.interviews-body > p {
  margin: 0 auto;
  padding: 20px;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: justify;
  text-justify: inter-ideograph;
}

.interviews-body > p {
  height: 148px;
}

.volume {
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 400;
  vertical-align: middle;
  display: block;
}

.interview-img a {
  width: 400px;
  display: block;
  overflow: hidden;
  background: #000;
}

.interview-img a img {
  width: 100%;
  max-width: 100%;
  vertical-align: bottom;
  transition: all 0.7s;
}

.interview-img a img:hover {
  opacity: 0.9;
  -webkit-transform: scale(1.02);
  transform: scale(1.02)
}

.interview-tx {
  margin-left: 20px;
}

.volume {
  margin: -3px 8px 0px 0px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  display: inline-block;
}

.interview-tx p {
  margin-bottom: 18px;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 700;
  position: relative;
}

.interviews-body h2 {
  margin-bottom: 18px;
  padding: 0;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 400;
  text-align: justify;
  text-justify: inter-ideograph;
  line-height: 2;
}

.interview-btn {
  display: inline-block;
  margin: 20px 0px 0px;
  text-align: right;
  height: 4px;
}

.interview-btn a {
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding: 11px 20px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  border: 1px solid rgba(44,44,42,1.0);
  border-radius: 4px;
  background: #fff;
  transition: all 0.6s;
}

.interview-btn a:hover {
  color: #fff;
  background: rgba(64,64,62,1.0);
}

.interview-btn a span {
  margin-right: 7px;
  vertical-align: middle;
  line-height: 1;
}

.arrow line, .arrow polyline {
  stroke: #000;
  transition: all 0.5s;
}

a:hover .arrow line,
a:hover .arrow polyline {
  stroke: #fff;
}

.interview-contents {
  margin: 0 auto;
  padding-bottom: 50px;
  max-width: 1196px;
  background: #fff;
}

.interview-contents-head {
  margin-bottom: 60px;
  -js-display: flex;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
}

.interview-contents-head > div:first-child {
  margin-top: 20px;
  margin-left: 20px;
}

.interview-contents-volume {
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 700;
}

.interview-contents-head p {
  margin: 0;
  font-size: 22px;
  font-weight: 400;
  line-height: 2;
}

.interview-contents-head-img {
  margin: 0;
  width: 58.528428093%;
  max-width: 700px;
}

.interview-contents-head-img img {
  vertical-align: bottom;
}

.interview-contents-body {
  margin: 0 auto;
  width: 79.933110367%;
  max-width: 956px;
}

.interview-contents-body > p {
  margin-bottom: 50px;
  font-size: 14px;
  line-height: 2.2;
  text-align: justify;
  text-justify: inter-ideograph;
}

.interview-contents-body > p:last-child {
  margin-bottom: 0;
}

.works-link {
  margin: 30px auto;
  text-align: center;
}

.works-link a {
  padding: 14px 40px 13px;
  color: #000;
  font-size: 15px;
  line-height: 1.7;
  text-decoration: none;
  background: #fff;
  border: 1px solid #bfbfbf;
  transition: 0.5s all;
}

.works-link a:hover {
  color: #fff;
  background: #222;
  border: 1px solid #222;
}

.credit {
  margin-top: 10px;
  font-size: 14px;
  text-align: right;
  display: block;
}

.question {
  font-size: 15px;
  font-weight: 700;
  display: block;
}

.interview-contents-img {
  margin-bottom: 50px;
  -js-display: flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.v-size {
  width: 32.6359832%;
  max-width: 312px;
}

.v2-size {
  width: 66.31799163%;
  max-width: 634px;
}

.h-size {
  width: 49.476987447%;
  max-width: 473px;
}

.interview-contents-img li:nth-child(n+4) {
  margin: 0 auto;
}

/* .interview-contents-body:last-child li:first-child {
  margin-bottom: 10px;
} */

.interview-contents-img img {
  vertical-align: bottom;
}

@media screen and (max-width: 1200px) {

  .interview {
    width: 98%;
    min-width: 98%;
  }
  
  .interviews-body h2 br {
    display: none;
  }

}


@media screen and (max-width: 1000px) {
    
  .interviews-body {
    margin: 0 auto;
    padding: 20px;
    flex-direction: column;
    position: relative;    
    background: #fff;
    border-radius: 3px;
    overflow: hidden;
  }
  
  .interview-img a {
    width: auto;
  }
  
  .interview-tx {
    margin-top: 20px;
    margin-left: 0;
  }
  
  .interview-tx p {
    margin-bottom: 14px;
  }
  
  .interviews-body h2 {
    font-size: 16px;
  }
  
  .interview-btn a {
    position: relative;
    right: 0px;
  }

}


@media screen and (max-width: 768px) {
    
  .interview-contents-head > div {
    width: 50%;
  }
  
  .interview-contents-head p {
    font-size: 18px;
    text-align: justify;
  }
  
}


@media screen and (max-width: 600px) {
    
  .interview-contents-head {
    margin-bottom: 6px;
    flex-direction: column-reverse;
    justify-content: space-between;
  }
  
  .interview-contents-head > div {
    width: 100%;
  }
  
  .interview-contents-head p br {
    display: none;
  }
  
  .interview-contents-head > div:first-child {
    margin: 20px auto;
    width: 84%;    
  }
  
  .interview-contents-head-img {
    margin: 0 auto;
    width: 100%;
    max-width: 600px;
  }
  
  .interview-contents-body {
    width: 84%;
    max-width: 600px;
  }
  
  .question {
    font-size: 17px;
  }
  
  .interview-contents-body > p {
    font-size: 16px;
  }
  
  .interview-contents-img {
    flex-direction: column;
  }

  .v-size,.v2-size,.h-size  {
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    text-align: center;
  }
  
  .v-size,.v2-size {
    width: 70%;
  }  
  
  /* .interview-contents-body:last-child li:first-child {
    margin: 0 auto;
  } */
  
  .interview-contents-img li img {
    margin: 0 auto 10px;
    max-width: 100%;
  }
  
  .interview-sub-head {
    margin-bottom: 40px;
  }
  
  .interview-tx p {
    margin-bottom: 8px;
  }
  
  .interviews-body h2 {
    margin-bottom: 14px;
  }
  
  .interview-btn {
    display: inline-block;
    margin: 20px 0px 14px;
    height: 2px;
  }
  
  .interview-btn a {
    width: 100%;
    display: block;
  }

}


/*
/interviews
*/



/*
Information
*/

.information {
  margin: 0;
  padding: 48px 0 78px;
  width: 100%;
  /* background: #fbfbfb; */
}

.information-Inner {
  margin: 0 auto;
  max-width: 768px;
  color: #000/*#fff*/;
}

.information-detail-Btn {
  margin: 5px 0 0 16px;
  width: 142px;
  font-size: 14px;
  font-weight: 400;
  display: inline-block;
  vertical-align: text-top;
}

.information-detail-Btn a {
  margin: 0;
  padding: 3px 0 1px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background: transparent;
  border: 1px solid #fff;
  border-radius: 4px;
  display: block;
  transition: background 0.6s,color 0.6s;
}

.information-detail-Btn a:hover {
  color: #023230;
  background: #fff;
}

ul.information-container {
  width: auto;
  max-width: 100%;
  line-height: 1.8;
  -js-display: flex; 
  display: flex;
  flex-wrap: wrap;
}

ul.information-container li {
  margin: 0 0 34px;
}

ul.information-container li:last-child {
  margin: 0;
}

.notice {
  clear: both;
}

ul.information-container li p span.information-date {
  margin: 1px 11px 0 0;
  padding: 4px 7px;
  min-width: 79px;
  height: 20px;
  color: #fff;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1;
  vertical-align: top;
  background: #424240;
  display: inline-block;
}

ul.information-container li p span.information-contents,
ul.information-container li p span.information-contents a,
ul.information-container li p span.extra-contents,
.information-table {
  margin: 0;
  padding: 0;
  max-width: 676px;
  color: #000;
  font-size: 14px;
  font-size: 1.4rem;
  /* text-decoration: underline; */
  display: inline-block;
  text-align: justify;
}

.information-table {
  float: right;
  margin-top: 14px;
  width: 88.020833333%;
}

.information-table tr {
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
}

.information-tabel tr:first-of-type {
  border-bottom: none;
}

.information-table tr td {
  padding: 8px 0;
  width: 112px;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  vertical-align: middle;
}

ul.information-container li p span.information-contents:hover {
  text-decoration: none;
}

ul.information-container li p.holidays span.information-contents,
ul.information-container li p.notice span.information-contents {
  color: #000;
  text-decoration: none;
}

ul.information-container li p span.extra-contents {
  margin-top: 8px;
}

ul.information-container li p span.extra-contents > span {
  font-size: 14px;
  font-size: 1.4rem;
  display: inline;
  font-weight: 700;
}

.extra-contents2 {
  margin-top: 8px;
  -js-display: flex;
  display: flex;
}

.extra-contents2 > span,
.extra-contents2 > span a {
  font-size: 14px;
  font-size: 1.4rem;
  text-align: justify;
}

.extra-contents2__img {
  max-width: 35%;
  margin-right: 14px;
}

.info-banner {
  margin: 10px 0 10px 90px;
  max-width: 584px;
}

.info-banner > a img {
  transition: all 0.5s;
}

.info-banner > a img:hover {
  opacity: 0.8;
}
  

.hoye-wrap {
  margin: 10px  0 0 89px;
}

@media screen and (max-width: 768px) {

  .information {
    margin-top: 66px;
    padding: 30px 0 78px;
  }
  
  ul.information-container li p span.information-contents,
  ul.information-container li p span.information-contents a,
  ul.information-container li p span.extra-contents,
  .information-table {
    max-width: 100%;
  }  

}


@media screen and (max-width: 600px) {

  .hoye-wrap {
    margin: 10px 0 0;
  }
  
}

.hoye-logo img {
  margin-right: 14px;
  width: 220px;
}

.hoye-prize img {
  width: 100px;
}

.zeh-Performance {
  margin-top: 5px;
  display: inline-block;
}

.info-Attn {
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.1em;
  display: inline-block;
}

.info-align-R {
  margin: 0;
  padding: 0;
  font-size: 12px;
  text-align: right;
  display: block;
}

.prize-Wrap {
  margin: 0 auto;
  padding: 0;
  width: 800px;
  max-width: 800px;
}

.prize-Body {
  margin: 8px auto 0px;
  padding: 0px 2%;
}

.prize-Body a {
  margin: 0;
  padding: 0;
  color: #000;
  font-size: 18px;
  font-weight: 400;
  text-decoration: underline;
  transition: all 0.4s;
}

.prize-Body a:hover {
  color: #777;
  text-decoration: none;
}

.close-Btn {
  margin: 0;
  text-align: center;
}

.close-Btn a {
  margin: 10px 0px 20px;
  padding: 7px 0px 5px;
  width: 142px;
  font-size: 18px;
  color: #023230;
  text-decoration: none;
  display: inline-block;
  background: rgba(64,64,62,0.0);
  border: 1px solid rgba(44,44,42,1.0);
  border-radius: 4px;
  line-height: 1;
  transition: all 0.6s;
}

.close-Btn a:hover {
  color: #fff;
  background: rgba(64,64,62,1.0);
}


@media screen and (max-width: 768px) {

  ul.information-container {
    margin: 0 auto;
    max-width: 676px;
    flex-direction: column;
  }

  ul.information-container li p span.information-date {
    margin: 1px 11px 5px 0;
  }
  
  .info-banner {
    margin-left: 0px;
  } 
  
  .information-table {
    float: none;
    width: 100%;
  }

}

@media screen and (max-width: 600px) {
    
  ul.information-container {
    margin: 0 auto;
    width: 92%;
    max-width: 600px;
  }

  ul.information-container li p span.information-date,
  ul.information-container li a span.information-date {
    margin: 1px 0px 6px;
  }
  
  ul.information-container li a span.information-contents,
  span.information-contents {
    margin: 0 auto;
    width: 100%;
    text-align: justify;
  }
  
  .information-table tr td {
    font-size: 12px;
  }  
  
  .extra-contents2 {
    flex-direction: column;
  }
  
  .extra-contents2__img {
    margin-right: 0;
    margin-bottom: 10px;
    max-width: 65%;
  }

}


/*
/Information
*/


/*----- /container -----*/