@charset "UTF-8";
@import url("global.css");
.anchornavi {
  margin-bottom: 100px;
}
.anchornavi #anchornavi {
  display: flex;
  margin: 0 -10px;
}
.anchornavi #anchornavi li {
  /* width: ( 100% / 4 ); */
  /*width: ( 100% / 3 );*/
  width: 50%;
  padding: 0 10px;
  box-sizing: border-box;
}
.anchornavi #anchornavi li a {
  display: block;
  border-top: #111 1px solid;
  border-bottom: #111 1px solid;
  padding: 20px 0;
  text-align: center;
  position: relative;
}
.anchornavi #anchornavi li a span {
  display: block;
  line-height: 1;
}
.anchornavi #anchornavi li a span.ja {
  font-size: 20px;
  margin-bottom: 5px;
}
.anchornavi #anchornavi li a span.en {
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}
.anchornavi #anchornavi li a::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 12px 0 12px;
  border-color: #62749B transparent transparent transparent;
  position: absolute;
  bottom: 8px;
  left: 50%;
  margin-left: -12px;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
}
.anchornavi #anchornavi li a:hover {
  color: #374360;
}
.anchornavi #anchornavi li a:hover::before {
  opacity: 1;
  transform: translateY(15px);
}

/* ------------------------------
 Concept
------------------------------ */
#concept .block {
  position: relative;
}
#concept .block .image {
  width: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
}
#concept .block .wrapper {
  z-index: 2;
  position: relative;
}
#concept .block .main {
  background-color: #fff;
  width: 50%;
  padding-top: 100px;
  padding-bottom: 100px;
}
#concept .block .title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 40px;
}
#concept .block p {
  text-align: justify;
}
#concept .block p + p {
  margin-top: 20px;
}
#concept .block:nth-of-type(odd) {
  padding-top: 120px;
}
#concept .block:nth-of-type(odd) .image {
  left: 0;
}
#concept .block:nth-of-type(odd) .main {
  padding-left: 80px;
  margin-left: auto;
  border-top-left-radius: 30px;
}
#concept .block:nth-of-type(even) {
  padding-bottom: 120px;
}
#concept .block:nth-of-type(even) .image {
  right: 0;
}
#concept .block:nth-of-type(even) .main {
  padding-right: 80px;
  border-bottom-right-radius: 30px;
}

/* ------------------------------
 Point
------------------------------ */
.section {
  margin-top: 120px;
}
.section .sectitle {
  margin-bottom: 40px;
}
.section .sectitle span {
  display: block;
}
.section .sectitle .en {
  font-size: 50px;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
  -webkit-text-stroke: 1px #111;
  text-stroke: 1px #111;
  line-height: 1;
}
.section .sectitle .ja {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
}
.section .mainimage {
  height: 460px;
}

#point ul.point > li {
  padding: 70px 0;
}
#point ul.point > li .titleblock {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
#point ul.point > li .titleblock .number {
  width: 120px;
  height: 120px;
  text-align: center;
  letter-spacing: 0;
  background-color: #BED1DC;
  color: #fff;
  margin-right: 40px;
  flex-shrink: 0;
  flex-grow: 0;
  line-height: 1;
  font-size: 26px;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  box-sizing: border-box;
  padding-top: 20px;
}
#point ul.point > li .titleblock .number span {
  display: block;
  font-size: 60px;
  font-weight: 700;
}
#point ul.point > li .titleblock .title {
  font-size: 36px;
  margin-bottom: 20px;
  line-height: 1;
}
#point ul.point > li .titleblock .catch {
  font-weight: 700;
  line-height: 1.5;
}
#point ul.point > li .titleblock .catch br {
  display: none;
}
#point ul.point > li .f_inner {
  display: flex;
  align-items: center;
}
#point ul.point > li .f_inner figure {
  max-width: 600px;
  flex-shrink: 0;
}
#point ul.point > li .f_inner .text {
  margin-right: 80px;
}
#point ul.point > li .f_inner .text:nth-child(even) {
  margin-left: 80px;
  order: 2;
}
#point ul.point > li .text {
  text-align: justify;
}
#point ul.point > li .text .sub_title {
  padding-left: 1.5em;
  margin-bottom: 20px;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
}
#point ul.point > li .text .sub_title::before {
  content: "";
  width: 1em;
  height: 1px;
  display: block;
  background-color: #374360;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
#point ul.point > li .text p small {
  font-size: 80%;
}
#point ul.point > li:nth-of-type(even) {
  background-color: #f3f3f3;
}
#point ul.point > li:last-of-type {
  /*padding-bottom: 0;*/
}
#point .column {
  text-align: center;
  border: #ccc 1px solid;
  background-color: #fff;
  padding: 40px 30px;
  margin-top: 40px;
}
#point .column .h {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 10px;
}
#point .column.model3d .f_inner .text {
  width: 60%;
}
#point .column.model3d .f_inner figure {
  width: 40%;
}
#point .column.kanki .inner dd p {
  margin-bottom: 10px;
  text-align: center;
}
#point .column.humidity_control .f_inner .text {
  width: 60%;
}
#point .column.humidity_control .f_inner figure {
  width: 40%;
}
#point .column.fireproof .f_inner .text {
  width: 60%;
}
#point .column.fireproof .f_inner figure {
  width: 40%;
}
#point .column.fireproof .f_inner ol li + li {
  margin-top: 20px;
}
#point .column.fireproof .f_inner ol li span {
  display: block;
  font-weight: 700;
}
#point .column.fire_insurance .ph_area {
  max-width: 800px;
  margin: 40px auto 0;
}
#point .column.fire_insurance .ph_area .f_inner {
  margin-top: 20px;
  gap: 20px;
}
#point .column.fire_insurance .ph_area .f_inner figure {
  flex-shrink: 1;
}
#point .column.guarantee figure {
  margin-top: 40px;
}
#point .column.after .f_inner .text {
  width: 30%;
  text-align: center;
}
#point .column.after .f_inner figure {
  max-width: unset;
  width: 70%;
}
#point .column.after > p {
  margin-top: 30px;
  text-align: center;
}
#point .structure_content .structure_box.sashi .f_inner {
  margin-top: 20px;
}
#point .structure_content .structure_box.sashi .f_inner .text {
  width: 60%;
}
#point .structure_content .structure_box.sashi .f_inner figure {
  width: 40%;
}
#point .structure_content .structure_box.sashi ul.sashi_point li {
  padding-left: 2em;
  position: relative;
  box-sizing: border-box;
}
#point .structure_content .structure_box.sashi ul.sashi_point li + li {
  margin-top: 10px;
}
#point .structure_content .structure_box.sashi ul.sashi_point li::before {
  content: "";
  width: 1.3em;
  height: 1.3em;
  display: block;
  background-color: #0a6aae;
  border-radius: 50px;
  position: absolute;
  top: 5px;
  left: 0;
  z-index: 1;
}
#point .structure_content .structure_box.sashi ul.sashi_point li::after {
  content: "";
  color: #fff;
  position: absolute;
  top: 0;
  left: 5px;
  z-index: 3;
}
#point .structure_content .structure_box.sashi ul.sashi_point li:first-child::after {
  content: "A";
}
#point .structure_content .structure_box.sashi ul.sashi_point li:nth-child(2)::after {
  content: "B";
}
#point .structure_content .structure_box.sashi ul.sashi_point li:nth-child(3)::after {
  content: "C";
}
#point .structure_content .structure_box.door .f_inner .text {
  width: 60%;
}
#point .structure_content .structure_box.door .f_inner figure {
  width: 40%;
}
#point .structure_content .structure_box.ventilation .f_inner .text .joto a {
  width: fit-content;
  padding: 10px;
  margin-top: 30px;
  display: block;
  border: 1px solid #111;
}
#point .structure_content .structure_box.ventilation .f_inner .text .joto a img {
  width: 260px;
}
#point .structure_content .structure_box.ventilation .f_inner .ph_area {
  display: flex;
  justify-content: center;
  gap: 10px;
}
#point .structure_content .structure_box.ventilation .f_inner .ph_area figure {
  flex-shrink: 1;
}
#point .structure_content .structure_box + .structure_box {
  margin-top: 100px;
}
#point .structure_content .structure_box:nth-child(even) .f_inner .text {
  margin-left: 80px;
}
#point .structure_content .structure_box:nth-child(even) .f_inner figure {
  order: -2;
}
#point .onestop ol.flow {
  display: flex;
  margin: 20px 0 40px;
}
#point .onestop ol.flow li {
  width: 20%;
  position: relative;
  font-size: 18px;
}
#point .onestop ol.flow li::after {
  content: "\f04e";
  font-family: "Font Awesome 5 free";
  font-size: 40px;
  font-weight: 900;
  color: #BED1DC;
  line-height: 1;
  width: 40px;
  position: absolute;
  top: 50%;
  right: 0;
  margin: -20px -20px 0 0;
}
#point .onestop ol.flow li:last-of-type::after {
  display: none;
}
#point .onestop ol.flow li img {
  display: block;
  width: 100px;
  margin: 0 auto 10px;
}
#point .onestop ul.merit {
  display: inline-block;
  text-align: left;
}
#point .onestop ul.merit li {
  line-height: 1.5;
  margin: 8px 0;
  text-indent: -18px;
  padding-left: 18px;
}
#point .onestop ul.merit li::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-right: 8px;
  display: inline-block;
  vertical-align: 1px;
  background-color: #BED1DC;
  border-radius: 50%;
  text-indent: 0;
}
#point .cost .inner, #point .kanki .inner {
  display: flex;
  margin: 30px -18px 0;
}
#point .cost .inner dl, #point .kanki .inner dl {
  width: 50%;
  flex-shrink: 0;
  padding: 0 18px;
  box-sizing: border-box;
}
#point .cost .inner dl dt, #point .kanki .inner dl dt {
  background-color: #BED1DC;
  color: #374360;
  font-size: 16px;
  font-weight: 700;
  padding: 10px;
  margin-bottom: 25px;
}
#point .cost .inner dl dd, #point .kanki .inner dl dd {
  line-height: 1.5;
  margin: 15px 10px;
  text-align: left;
  font-size: 14px;
}
#point .cost .inner dl dd span:not([class]), #point .kanki .inner dl dd span:not([class]) {
  font-size: 16px;
  display: block;
  font-weight: 700;
}
#point .cost .inner dl dd small, #point .kanki .inner dl dd small {
  font-size: 80%;
}
#point .cost .inner dl dd img, #point .kanki .inner dl dd img {
  width: 400px;
  display: block;
  margin: 0 auto;
}
#point ul.hosyo {
  display: flex;
  justify-content: space-between;
}
#point ul.hosyo li {
  width: 25%;
  line-height: 1.3;
}
#point ul.hosyo li img {
  width: 80px;
  opacity: .4;
}
#point ul.hosyo li span:not([class]) {
  display: block;
  padding: 10px 0 5px;
  font-weight: 700;
  font-size: 18px;
}
#point .option {
  width: fit-content;
  padding: 5px 10px;
  margin: 10px auto;
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  background-color: #62749B;
  border-radius: 5px;
}

#spec > p:not([class]) {
  display: inline-block;
  text-align: justify;
  margin: 60px 20px 80px;
}
#spec .block {
  position: relative;
  padding-top: 120px;
}
#spec .block .image {
  width: 50%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
}
#spec .block .wrapper {
  z-index: 2;
  position: relative;
}
#spec .block .main {
  background-color: #fff;
  width: 50%;
  padding: 100px 0 100px 80px;
  margin-left: auto;
}
#spec .block .title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 40px;
}
#spec .block p {
  text-align: justify;
}
#spec .block p + p {
  margin-top: 20px;
}
#spec ul.spec li {
  border-bottom: #ccc 1px solid;
  padding: 40px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#spec ul.spec li .main {
  flex-glow: 1;
  margin-right: 80px;
  padding: 20px 0;
}
#spec ul.spec li .main .title {
  font-size: 36px;
  margin-bottom: 50px;
  line-height: 1;
}
#spec ul.spec li .main .title span {
  display: inline-block;
  font-size: 16px;
  vertical-align: 5px;
}
#spec ul.spec li .main .title span::before {
  content: "";
  width: 60px;
  height: 1px;
  background-color: #111;
  display: inline-block;
  margin: 0 20px;
  vertical-align: 6px;
}
#spec ul.spec li .main .sub {
  font-weight: 700;
  margin-bottom: 15px;
}
#spec ul.spec li .main .sub span {
  display: inline-block;
  background-color: #C43134;
  color: #fff;
  font-weight: 700;
  padding: 0 15px;
  margin-left: 15px;
}
#spec ul.spec li .main dl dt {
  font-weight: 700;
  margin: 15px 0 4px;
}
#spec ul.spec li .image {
  flex-shrink: 0;
  max-width: 50%;
}
#spec ul.spec li .image .dannetsu {
  width: 500px;
}
#spec ul.spec li .image .kimitsu {
  width: 268px;
}
#spec ul.spec li.sozai {
  align-items: stretch;
}
#spec ul.spec li.sozai .main {
  max-width: 50%;
  box-sizing: border-box;
  padding-right: 20px;
  margin-right: 0;
}
#spec ul.spec li.sozai .image {
  width: 50%;
  box-sizing: border-box;
  padding-left: 20px;
}
#spec ul.spec li.sozai .image img.objectfit {
  object-position: left center;
}

#structure ul.structure li {
  padding: 80px 0;
}
#structure ul.structure li .wrapper {
  display: flex;
  align-items: center;
}
#structure ul.structure li .main .title {
  font-size: 28px;
  margin-bottom: 45px;
  line-height: 1;
}
#structure ul.structure li .main .title br {
  display: none;
}
#structure ul.structure li .image {
  max-width: 600px;
  flex-shrink: 0;
}
#structure ul.structure li .image .kiso {
  width: 350px;
}
#structure ul.structure li:nth-of-type(odd) .main {
  order: 1;
  margin-right: 80px;
}
#structure ul.structure li:nth-of-type(odd) .image {
  order: 2;
}
#structure ul.structure li:nth-of-type(even) {
  background-color: #f3f3f3;
}
#structure ul.structure li:nth-of-type(even) .main {
  order: 2;
  margin-left: 80px;
}
#structure ul.structure li:nth-of-type(even) .image {
  order: 1;
}

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

 Responsive-Breakpoint-1 (1500px)
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1.5 (1320px)
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1320px) {
  /* ------------------------------
   Concept
  ------------------------------ */
  #concept .block .main {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  #concept .block p br {
    display: none;
  }
  #concept .block:nth-of-type(odd) {
    padding-top: 100px;
  }
  #concept .block:nth-of-type(even) {
    padding-bottom: 100px;
  }

  #point ul.point > li .f_inner figure {
    max-width: 50%;
  }
  #point ul.point > li .f_inner .text {
    margin-right: 60px;
  }
  #point ul.point > li .f_inner .text:nth-child(even) {
    margin-left: 60px;
  }
  #point .column.after .f_inner .text {
    width: 35%;
    text-align: center;
  }
  #point .column.after .f_inner figure {
    width: 65%;
  }
  #point .structure_content .structure_box.hybrid .f_inner figure {
    max-width: 45%;
  }
  #point .structure_content .structure_box.ventilation .f_inner .text {
    width: 50%;
  }
  #point .structure_content .structure_box.ventilation .f_inner .ph_area {
    width: 50%;
  }
  #point .structure_content .structure_box:nth-child(even) .f_inner .text {
    margin-left: 60px;
  }
  #point .onestop ol.flow li {
    font-size: 16px;
  }
  #point .onestop ol.flow li::after {
    font-size: 32px;
    width: 32px;
    margin: -16px -16px 0 0;
  }
  #point .cost .inner, #point .kanki .inner {
    margin: 30px -15px 0;
  }
  #point .cost .inner dl, #point .kanki .inner dl {
    padding: 0 15px;
  }

  #spec ul.spec li .main {
    margin-right: 40px;
  }
  #spec ul.spec li .main .title {
    font-size: 30px;
  }

  #structure ul.structure li .image {
    max-width: 50%;
  }
  #structure ul.structure li:nth-of-type(odd) .main {
    margin-right: 60px;
  }
  #structure ul.structure li:nth-of-type(even) .main {
    margin-left: 60px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .anchornavi {
    margin-bottom: 60px;
  }
  .anchornavi #anchornavi {
    margin: 0 -5px;
  }
  .anchornavi #anchornavi li {
    padding: 0 5px;
  }
  .anchornavi #anchornavi li a {
    padding: 20px 0;
  }
  .anchornavi #anchornavi li a span.ja {
    font-size: 17px;
    margin-bottom: 5px;
  }
  .anchornavi #anchornavi li a::before {
    display: none;
  }
  .anchornavi #anchornavi li a:hover {
    color: #111;
  }

  /* ------------------------------
   Concept
  ------------------------------ */
  #concept .block .main {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  #concept .block .title {
    font-size: calc(100% + 8 * (100vw - 650px) / 310);
    margin-bottom: 40px;
  }
  #concept .block p {
    letter-spacing: 0;
    font-size: 15px;
  }
  #concept .block:nth-of-type(odd) {
    padding-top: 80px;
  }
  #concept .block:nth-of-type(odd) .main {
    padding-left: 60px;
  }
  #concept .block:nth-of-type(even) {
    padding-bottom: 80px;
  }
  #concept .block:nth-of-type(even) .main {
    padding-right: 60px;
  }

  /* ------------------------------
   Point
  ------------------------------ */
  .section {
    margin-top: 90px;
  }
  .section .sectitle {
    margin-bottom: 40px;
  }
  .section .sectitle .en {
    font-size: 48px;
  }
  .section .sectitle .ja {
    font-size: 24px;
  }
  .section .mainimage {
    height: 320px;
  }

  #point ul.point > li {
    padding: 60px 0;
  }
  #point ul.point > li .titleblock .title {
    font-size: 30px;
  }
  #point ul.point > li .titleblock .catch br {
    display: inline;
  }
  #point ul.point > li .f_inner {
    display: block;
  }
  #point ul.point > li .f_inner figure {
    max-width: none;
    text-align: center;
  }
  #point ul.point > li .f_inner .text {
    margin-right: 0;
  }
  #point ul.point > li .f_inner .text:nth-child(even) {
    margin-left: 0;
  }
  #point .column.model3d .f_inner .text {
    width: 100%;
  }
  #point .column.model3d .f_inner figure {
    width: 400px;
    margin: 30px auto 0;
  }
  #point .column.humidity_control .f_inner .text {
    width: 100%;
  }
  #point .column.humidity_control .f_inner figure {
    width: 400px;
    margin: 30px auto 0;
  }
  #point .column.fireproof .f_inner .text {
    width: 100%;
  }
  #point .column.fireproof .f_inner figure {
    width: 80%;
    margin: 30px auto 0;
  }
  #point .column.fire_insurance .ph_area .f_inner {
    display: flex;
  }
  #point .column.after .f_inner .text {
    width: 100%;
  }
  #point .column.after .f_inner figure {
    width: 100%;
    margin-top: 30px;
  }
  #point .structure_content .structure_box figure {
    width: 80%;
    margin: 30px auto 0;
  }
  #point .structure_content .structure_box.hybrid .f_inner figure {
    max-width: 100%;
  }
  #point .structure_content .structure_box.sashi .f_inner {
    display: flex;
    flex-direction: column-reverse;
  }
  #point .structure_content .structure_box.sashi .f_inner .text {
    width: 100%;
  }
  #point .structure_content .structure_box.sashi .f_inner figure {
    width: 400px;
    margin: 0 auto 30px;
  }
  #point .structure_content .structure_box.door .f_inner .text {
    width: 100%;
  }
  #point .structure_content .structure_box.door .f_inner figure {
    width: 400px;
    margin: 30px auto 0;
  }
  #point .structure_content .structure_box.ventilation .f_inner .text {
    width: 100%;
  }
  #point .structure_content .structure_box.ventilation .f_inner .ph_area {
    width: 80%;
    margin: 0 auto;
  }
  #point .structure_content .structure_box + .structure_box {
    margin-top: 60px;
  }
  #point .structure_content .structure_box:nth-child(even) .f_inner .text {
    margin-left: 0;
  }
  #point .structure_content .structure_box:nth-child(even) .f_inner figure {
    order: 0;
  }
  #point .onestop ol.flow {
    margin: 20px 0 40px;
  }
  #point .onestop ol.flow li {
    font-size: 16px;
    margin: 0 10px;
    line-height: 1.4;
    font-size: 15px;
  }
  #point .onestop ol.flow li::after {
    font-size: 28px;
    width: 28px;
    margin: -14px -24px 0 0;
  }
  #point .cost .inner, #point .kanki .inner {
    display: block;
    margin: 30px 0 0;
  }
  #point .cost .inner dl, #point .kanki .inner dl {
    width: auto;
    padding: 0;
    margin-top: 30px;
  }
  #point ul.hosyo li span {
    font-size: calc(87.5% + 4 * (100vw - 650px) / 310);
  }

  #spec .block {
    padding-top: 80px;
  }
  #spec .block .main {
    padding: 60px 0 60px 60px;
  }
  #spec .block .title {
    font-size: calc(100% + 8 * (100vw - 650px) / 310);
  }
  #spec .block p {
    letter-spacing: 0;
    font-size: 15px;
  }
  #spec ul.spec li {
    padding: 50px 0;
    display: block;
  }
  #spec ul.spec li .main {
    margin: 0 0 40px 0;
    padding: 0;
  }
  #spec ul.spec li .main .title {
    font-size: 30px;
    margin-bottom: 30px;
    text-align: center;
  }
  #spec ul.spec li .main .sub {
    text-align: center;
  }
  #spec ul.spec li .main dl dt {
    text-align: center;
    margin: 15px 0 5px;
  }
  #spec ul.spec li .image {
    max-width: none;
    text-align: center;
  }
  #spec ul.spec li.sozai .main {
    max-width: none;
    padding-right: 0;
    margin: 0 0 40px 0;
  }
  #spec ul.spec li.sozai .image {
    width: auto;
    padding-left: 0;
  }

  #structure ul.structure li {
    padding: 60px 0;
  }
  #structure ul.structure li .wrapper {
    display: block;
  }
  #structure ul.structure li .main {
    margin-bottom: 40px;
  }
  #structure ul.structure li .main .title {
    font-size: 28px;
    margin-bottom: 30px;
    text-align: center;
  }
  #structure ul.structure li .image {
    max-width: none;
    text-align: center;
  }
  #structure ul.structure li:nth-of-type(odd) .main {
    margin-right: 0;
  }
  #structure ul.structure li:nth-of-type(even) .main {
    margin-left: 0;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  /* ナビ4つのバージョン
  	.anchornavi {
  		margin-bottom: 50px;
  		#anchornavi {
  			flex-wrap: wrap;
  			margin: 0 -6px;
  			li {
  				width: ( 100% / 2 );
  				padding: 0 6px;
  				a {
  					padding: 15px 0;
  					span {
  						&.ja {
  							font-size: 16px;
  						}
  					}
  				}
  				&:nth-child(n + 3) a {
  					border-top: none;
  				}
  			}
  		}
  	}
  */
  .anchornavi {
    margin-bottom: 50px;
  }
  .anchornavi #anchornavi {
    flex-wrap: wrap;
    margin: 0 -5px;
  }
  .anchornavi #anchornavi li {
    /*width: ( 100% / 3 );*/
    width: 50%;
    padding: 0 5px;
  }
  .anchornavi #anchornavi li a {
    padding: 15px 0;
  }
  .anchornavi #anchornavi li a span.ja {
    font-size: 15px;
    letter-spacing: 0;
  }

  /* ------------------------------
   Concept
  ------------------------------ */
  #concept .block {
    margin-top: 50px;
  }
  #concept .block .image {
    width: 90%;
    position: relative;
    height: 0;
    padding-top: 50%;
  }
  #concept .block .image img {
    position: absolute;
    top: 0;
    left: 0;
  }
  #concept .block .main {
    width: 90%;
    padding-top: 40px;
    padding-bottom: 0;
    margin-top: -8vw;
    box-sizing: border-box;
  }
  #concept .block .title {
    font-size: calc(107.14% + 7 * (100vw - 360px) / 290);
    margin-bottom: 25px;
  }
  #concept .block p {
    font-size: inherit;
  }
  #concept .block:nth-of-type(odd) {
    padding-top: 0;
  }
  #concept .block:nth-of-type(odd) .main {
    padding-left: 40px;
    border-top-left-radius: 10px;
  }
  #concept .block:nth-of-type(even) {
    padding-bottom: 0;
  }
  #concept .block:nth-of-type(even) .main {
    padding-right: 40px;
    border-top-right-radius: 10px;
  }
  #concept .block:nth-of-type(even) .image {
    margin-left: auto;
  }

  /* ------------------------------
   Point
  ------------------------------ */
  .section {
    margin-top: 80px;
  }
  .section .sectitle {
    margin-bottom: 30px;
  }
  .section .sectitle .en {
    font-size: 40px;
  }
  .section .sectitle .ja {
    font-size: 19px;
  }
  .section .mainimage {
    height: 220px;
  }

  #point ul.point > li {
    padding: 50px 0;
  }
  #point ul.point > li .titleblock {
    margin-bottom: 30px;
  }
  #point ul.point > li .titleblock .number {
    width: 80px;
    height: 80px;
    margin-right: 20px;
    font-size: 16px;
    padding-top: 10px;
    line-height: .9;
  }
  #point ul.point > li .titleblock .number span {
    font-size: 52px;
  }
  #point ul.point > li .titleblock .title {
    font-size: calc(135.7% + 5 * (100vw - 360px) / 290);
    margin-bottom: 15px;
  }
  #point ul.point > li .titleblock .catch {
    font-size: calc(85.7% + 3 * (100vw - 360px) / 290);
    margin-right: -10px;
  }
  #point .column {
    padding: 30px 20px;
    margin-top: 30px;
  }
  #point .column .h {
    margin-bottom: 12px;
  }
  #point .column.model3d .f_inner figure {
    width: 100%;
  }
  #point .column.humidity_control .f_inner figure {
    width: 100%;
  }
  #point .column.fireproof .f_inner figure {
    width: 100%;
  }
  #point .column.fire_insurance .ph_area .f_inner {
    display: block;
  }
  #point .column.fire_insurance .ph_area .f_inner figure + figure {
    margin-top: 20px;
  }
  #point .column.guarantee .schedule {
    overflow: scroll;
  }
  #point .column.guarantee .schedule figure {
    min-width: 500px;
  }
  #point .column.after .f_inner .text {
    width: 100%;
  }
  #point .column.after .f_inner figure {
    width: 100%;
    margin-top: 30px;
  }
  #point .structure_content .structure_box figure {
    width: 100%;
  }
  #point .structure_content .structure_box.hybrid .f_inner figure {
    max-width: 100%;
    margin: 20px auto 0;
  }
  #point .structure_content .structure_box.sashi .f_inner figure {
    width: 80%;
    margin: 0 auto 20px;
  }
  #point .structure_content .structure_box.sashi ul.sashi_point li::before {
    top: 3px;
    left: 1px;
  }
  #point .structure_content .structure_box.door .f_inner figure {
    width: 80%;
    margin: 20px auto 0;
  }
  #point .structure_content .structure_box.ventilation .f_inner .text .joto a {
    margin: 20px auto 0;
  }
  #point .structure_content .structure_box.ventilation .f_inner .text .joto a img {
    width: 180px;
  }
  #point .structure_content .structure_box.ventilation .f_inner .ph_area {
    width: 100%;
  }
  #point .structure_content .structure_box + .structure_box {
    margin-top: 40px;
  }
  #point .onestop ol.flow {
    margin: 20px -10px 30px;
  }
  #point .onestop ol.flow li {
    margin: 0 5px;
    font-size: calc(71.4% + 4 * (100vw - 360px) / 290);
    font-weight: 700;
  }
  #point .onestop ol.flow li::after {
    font-size: 16px;
    width: 16px;
    margin: 0 -13px 0 0;
    top: 40%;
  }
  #point .onestop ol.flow li:last-of-type::after {
    display: none;
  }
  #point .onestop ul.merit {
    text-align: justify;
  }
  #point .cos .inner, #point .kanki .inner {
    margin: 0;
  }
  #point .cos .inner dl, #point .kanki .inner dl {
    margin-top: 30px;
  }
  #point .cos .inner dl dt, #point .kanki .inner dl dt {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 20px;
  }
  #point .cos .inner dl dd, #point .kanki .inner dl dd {
    margin: 15px 10px;
    font-size: inherit;
  }
  #point .cos .inner dl dd span, #point .kanki .inner dl dd span {
    font-size: 15px;
  }
  #point ul.hosyo {
    margin: 0 -10px -15px;
    flex-wrap: wrap;
    justify-content: center;
  }
  #point ul.hosyo li {
    width: 50%;
    padding: 0 5px 15px;
    box-sizing: border-box;
    letter-spacing: 0;
  }
  #point ul.hosyo li span {
    font-size: inherit;
  }

  #spec > p:not([class]) {
    margin: 30px 20px 40px;
  }
  #spec .block {
    position: relative;
    padding-top: 0;
  }
  #spec .block .image {
    width: auto;
    position: relative;
    height: 0;
    padding-top: 50%;
  }
  #spec .block .image img {
    position: absolute;
    top: 0;
    left: 0;
  }
  #spec .block .main {
    width: auto;
    padding: 40px 20px 0;
    margin: -8vw 0 0 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  #spec .block .title {
    font-size: 16px;
    margin-bottom: 30px;
    text-align: center;
  }
  #spec ul.spec {
    margin-top: 50px;
    border-top: #ccc 1px solid;
  }
  #spec ul.spec li {
    padding: 40px 0;
  }
  #spec ul.spec li .main {
    margin: 0 0 40px 0;
  }
  #spec ul.spec li .main .title {
    font-size: 25px;
    margin: 0 -10px 30px;
  }
  #spec ul.spec li .main .title span {
    font-size: 15px;
    vertical-align: 3px;
  }
  #spec ul.spec li .main .title span::before {
    width: 24px;
    margin: 0 12px;
    vertical-align: 6px;
  }
  #spec ul.spec li .main .sub {
    margin-bottom: 20px;
  }
  #spec ul.spec li .main dl dt {
    margin: 20px 0 6px;
    font-size: 16px;
  }
  #spec ul.spec li .image .kimitsu {
    width: 220px;
  }

  #structure ul.structure li {
    padding: 50px 0;
  }
  #structure ul.structure li .main {
    margin-bottom: 30px;
  }
  #structure ul.structure li .main .title {
    line-height: 1.4;
    font-size: 25px;
    margin-bottom: 30px;
  }
}