@charset "UTF-8";
@import url("global.css");
#house {
  background: #F5F3F0; }

.sec_intro {
  max-width: 1800px;
  width: 93vw;
  margin: 0 auto 100px;
  position: relative; }
  .sec_intro .text_area {
    position: relative;
    z-index: 2;
    color: #fff;
    width: 50%;
    padding: 120px 0 120px 120px;
    box-sizing: border-box; }
    .sec_intro .text_area .catch {
      margin-bottom: 30px;
      white-space: nowrap;
      font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      font-size: clamp(18px, 3vw, 32px); }
    .sec_intro .text_area p:not([class]) {
      line-height: 2.0;
      font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
      .sec_intro .text_area p:not([class]) + p:not([class]) {
        margin-top: 1em; }
  .sec_intro .bg {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0; }
    .sec_intro .bg::after {
      content: "";
      width: 100%;
      height: 100%;
      background-image: -webkit-linear-gradient(left, #303030, transparent 65%);
      background-image: linear-gradient(to right, #303030, transparent 65%);
      position: absolute;
      left: 0;
      top: 0; }
    .sec_intro .bg figure img {
      height: 100%; }
      .sec_intro .bg figure img.tab {
        display: none; }

#bodyarea .inner {
  display: flex;
  justify-content: space-between;
  gap: 50px; }
#bodyarea .navi-area {
  width: 240px;
  flex-shrink: 0;
  padding-top: 10px; }
  #bodyarea .navi-area ul#navi {
    position: sticky;
    top: 150px;
    padding-left: 30px; }
    #bodyarea .navi-area ul#navi li {
      margin-bottom: 15px; }
      #bodyarea .navi-area ul#navi li a {
        display: block;
        width: fit-content;
        font-weight: 500;
        padding: 5px; }
        #bodyarea .navi-area ul#navi li a::before {
          content: "";
          width: 5px;
          height: 5px;
          background-color: #E3E3E3;
          display: inline-block;
          vertical-align: 4px;
          margin-right: 12px;
          transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
          -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden; }
        #bodyarea .navi-area ul#navi li a.current::before {
          background-color: #E6001A;
          scale: 1.3; }
        @media (any-hover: hover) {
          #bodyarea .navi-area ul#navi li a:hover::before {
            background-color: #A49375; } }
#bodyarea .main-area {
  width: 1150px; }
#bodyarea .section {
  container-type: inline-size; }
  #bodyarea .section + .section {
    margin-top: 70px;
    padding-top: 70px;
    border-top: 1px solid #E3E3E3; }
  #bodyarea .section .sectitle {
    margin-bottom: 50px; }
    #bodyarea .section .sectitle span {
      display: block; }
    #bodyarea .section .sectitle .en {
      color: rgba(90, 86, 87, 0.7);
      font-size: clamp(13px, 2vw, 18px);
      font-family: "Outfit", "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; }
    #bodyarea .section .sectitle .ja {
      font-weight: 700;
      font-size: clamp(22px, 3vw, 26px); }

.seccnt + .seccnt {
  margin-top: 90px; }
.seccnt .seccnt_title {
  margin-bottom: 40px;
  position: relative;
  font-weight: 600;
  font-size: clamp(18px, 2.6vw, 24px); }
  .seccnt .seccnt_title::before {
    content: "";
    width: 50px;
    height: 2px;
    background: #E6001A;
    position: absolute;
    left: 0;
    bottom: -10px; }

.seccnt_inner {
  display: flex;
  justify-content: space-between;
  align-items: stretch; }
  .seccnt_inner .text_area {
    flex: 1;
    padding-right: 50px; }
    .seccnt_inner .text_area .catch {
      margin-bottom: 20px;
      font-weight: 600;
      font-size: 110%; }
    .seccnt_inner .text_area p:not([class]) + p:not([class]) {
      margin-top: 1em; }
    .seccnt_inner .text_area .more {
      margin-top: 20px; }
      .seccnt_inner .text_area .more a {
        margin-left: auto;
        display: block;
        background-color: #E5DED3;
        padding: 15px 50px 15px 20px;
        max-width: 180px;
        box-sizing: border-box;
        border-radius: 99px;
        font-size: .825em;
        line-height: 1;
        font-weight: 500;
        position: relative; }
        @media (any-hover: hover) {
          .seccnt_inner .text_area .more a:hover {
            transform: translateX(3px); } }
        .seccnt_inner .text_area .more a::after {
          content: "\f08e";
          position: absolute;
          right: 20px;
          top: 50%;
          transform: translateY(-50%);
          margin-top: 1px;
          line-height: 1;
          font-family: 'Font Awesome 6 free','Font Awesome 6 Brands';
          font-weight: 900;
          font-size: 1em; }
  .seccnt_inner figure {
    width: 28%; }
    .seccnt_inner figure img + img {
      margin-top: 5px; }

#design .seccnt_inner figure {
  width: 45%; }

#quality .seccnt_inner figure {
  width: 20%; }

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

 Responsive-Breakpoint-1 ( 1600px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1600px) {
  .sec_intro .text_area {
    padding: 90px 0 90px 60px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  .sec_intro .text_area {
    padding: 50px 0; }
    .sec_intro .text_area p:not([class]) br {
      display: none; }

  #bodyarea .navi-area {
    width: 200px; }
    #bodyarea .navi-area ul#navi {
      padding-left: 0; }
  #bodyarea .main-area {
    width: 1150px; }

  .seccnt_inner .text_area {
    padding-right: 30px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .sec_intro {
    margin-bottom: 70px; }
    .sec_intro .bg figure img.tab {
      display: block; }
    .sec_intro .bg figure img.pc {
      display: none; }

  #bodyarea .inner {
    gap: 5vw; }
  #bodyarea .navi-area {
    width: 160px; }
    #bodyarea .navi-area ul#navi li {
      margin-bottom: 10px; }
      #bodyarea .navi-area ul#navi li a {
        font-weight: 700; }
        #bodyarea .navi-area ul#navi li a::before {
          vertical-align: 3px;
          margin-right: 10px; }
  #bodyarea .section + .section {
    margin-top: 70px;
    padding-top: 70px; }
  #bodyarea .section .sectitle {
    margin-bottom: 30px; }

  .seccnt_inner {
    display: block; }
    .seccnt_inner .text_area {
      padding-right: 0;
      margin-bottom: 30px; }
      .seccnt_inner .text_area .more {
        margin-top: 10px; }
    .seccnt_inner figure {
      width: 100%; }
      .seccnt_inner figure img.objectfit {
        aspect-ratio: 16 / 9; }

  #design .seccnt_inner figure {
    width: 100%; }

  #quality .seccnt_inner figure {
    width: 100%;
    display: flex;
    justify-content: space-between; }
    #quality .seccnt_inner figure img {
      width: 48%;
      margin: 0; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .sec_intro {
    margin: 0 auto 60px;
    display: flex;
    flex-direction: column-reverse; }
    .sec_intro .text_area {
      width: 100%;
      padding: 0;
      color: #303030; }
      .sec_intro .text_area .catch {
        margin-bottom: 20px; }
      .sec_intro .text_area p:not([class]) {
        line-height: 1.8; }
    .sec_intro .bg {
      height: 180px;
      overflow: hidden;
      position: relative;
      left: auto;
      top: auto;
      margin-bottom: 20px; }
      .sec_intro .bg::after {
        background-image: none; }
      .sec_intro .bg figure img {
        height: 100%; }
        .sec_intro .bg figure img.tab {
          display: none; }
        .sec_intro .bg figure img.pc {
          display: block; }

  #bodyarea .inner {
    display: block; }
  #bodyarea .navi-area {
    border-top: #ccc 1px solid;
    border-bottom: #ccc 1px solid;
    width: auto;
    padding: 20px 5vw;
    margin-bottom: 50px; }
    #bodyarea .navi-area ul#navi {
      position: static;
      display: flex;
      flex-wrap: wrap;
      gap: 2px 15px;
      justify-content: center; }
      #bodyarea .navi-area ul#navi li {
        margin-bottom: 0; }
        #bodyarea .navi-area ul#navi li a {
          padding: 5px 0; }
          #bodyarea .navi-area ul#navi li a::before {
            vertical-align: 2px; }
          #bodyarea .navi-area ul#navi li a.current::before {
            background-color: #E3E3E3;
            scale: 1; }
  #bodyarea .main-area {
    width: auto; }
  #bodyarea .section {
    container-type: inline-size; }
    #bodyarea .section + .section {
      margin-top: 50px;
      padding-top: 50px; }
    #bodyarea .section .sectitle {
      display: block;
      margin-bottom: 30px;
      line-height: 1.3;
      text-align: center; }
      #bodyarea .section .sectitle span {
        display: block; }

  .seccnt + .seccnt {
    margin-top: 60px; }
  .seccnt .seccnt_title {
    margin-bottom: 30px; }

  .seccnt_inner .text_area {
    margin-bottom: 20px; }
    .seccnt_inner .text_area .catch {
      margin-bottom: 10px;
      font-size: 115%; } }