/*! Writen  by SCSS */
article img {
  vertical-align: middle;
  max-width: 100%;
  height: auto; }

.pt {
  position: fixed;
  z-index: 999;
  right: 10px;
  bottom: 10px;
  pointer-events: none;
  transition: opacity 0.3s; }
  .pt.on {
    opacity: 1; }
  @media screen and (max-width: 480px) {
    .pt {
      bottom: 85px;
      width: 45px; } }

.main {
  position: relative; }
  .main .img {
    display: flex; }
    @media screen and (max-width: 480px) {
      .main .img {
        height: calc(100vh - 70px - 75px);
        flex-direction: column; } }
    .main .img li {
      width: 50%; }
      @media screen and (max-width: 480px) {
        .main .img li {
          width: 100%;
          height: 50%; } }
      .main .img li img {
        width: 100%;
        height: 100%;
        object-fit: cover; }
  .main .copy {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center; }
  .main .logo {
    position: absolute;
    top: 20px;
    left: 20px; }
    @media screen and (max-width: 480px) {
      .main .logo {
        width: 30%; } }

.inner {
  max-width: 1150px;
  width: calc(100% - 40px);
  margin-inline: auto; }

.sec1 {
  position: relative;
  padding: 50px 0 calc(140% / 16); }
  @media screen and (max-width: 480px) {
    .sec1 {
      padding: 30px 0 110px; } }
  .sec1 .bg_txt {
    position: absolute;
    top: 50px;
    left: 0;
    width: calc(415% / 16); }
    @media screen and (max-width: 480px) {
      .sec1 .bg_txt {
        display: none; } }
  .sec1::after {
    content: "";
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url("../images/house_design/sec1_bg.jpg") center center/cover; }
  .sec1 .inner {
    position: relative;
    z-index: 10;
    text-align: center; }
    .sec1 .inner .t1 {
      font-size: clamp(12px, calc(28vw / 9.6), 28px);
      line-height: 1.5;
      letter-spacing: 0.08em;
      font-weight: 700;
      color: #2f5c97;
      margin-bottom: 0.6em; }
      @media screen and (max-width: 480px) {
        .sec1 .inner .t1 {
          font-size: calc(15vw / 3.9); } }
    .sec1 .inner .t2 {
      font-size: clamp(12px, calc(26vw / 9.6), 26px);
      line-height: 1;
      letter-spacing: 0.08em;
      font-weight: 700;
      padding: 0.3em 10px;
      margin: 0 auto 2.6em;
      border: solid 1px #000;
      background: #fff;
      border-radius: 5px;
      max-width: 26em; }
      @media screen and (max-width: 480px) {
        .sec1 .inner .t2 {
          font-size: calc(15vw / 3.9); } }
    .sec1 .inner .list {
      max-width: 950px;
      margin-inline: auto;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 50px calc(50% / 9.5); }
      @media screen and (max-width: 480px) {
        .sec1 .inner .list {
          gap: 40px 0; } }
      .sec1 .inner .list li {
        width: calc(450% / 9.5);
        position: relative; }
        @media screen and (max-width: 480px) {
          .sec1 .inner .list li {
            width: 90%; } }
        .sec1 .inner .list li a {
          display: block;
          position: relative;
          transition: all 0.3s; }
          .sec1 .inner .list li a .icon {
            position: absolute;
            bottom: calc(15% / 5.97);
            left: calc(172% / 4.5);
            width: calc(106% / 4.5); }
            @media screen and (max-width: 480px) {
              .sec1 .inner .list li a .icon {
                width: 30%;
                left: 35%; } }
          .sec1 .inner .list li a:hover {
            opacity: 0.6; }

.sec2 .ac > li .ttl {
  margin-top: -40px;
  font-size: clamp(12px, calc(29vw / 11.5), 29px);
  line-height: 1.2;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 0.8em 10px;
  text-align: center;
  background: #fff;
  border-radius: 0.8em 0 0 0;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4); }
  @media screen and (max-width: 480px) {
    .sec2 .ac > li .ttl {
      font-size: calc(16vw / 3.9); } }
  .sec2 .ac > li .ttl p {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6em; }
    .sec2 .ac > li .ttl p .i {
      font-size: 30%;
      color: #5b8775;
      display: inline-block;
      transform: translateY(0.4em); }
.sec2 .ac > li .cont {
  padding: 80px 0 calc(80px + 40px);
  background: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4); }
  @media screen and (max-width: 480px) {
    .sec2 .ac > li .cont {
      padding: 40px 0 calc(40px + 40px); } }
  .sec2 .ac > li .cont .inn {
    max-width: 1600px;
    margin-inline: auto; }
  .sec2 .ac > li .cont .box {
    margin: 0 0 0 auto;
    max-width: 1335px;
    display: grid;
    grid-template-columns: calc(511% / 13.35) calc(800% / 13.35);
    grid-template-rows: repeat(2, auto);
    grid-column-gap: calc(22% / 13.35);
    grid-row-gap: 10px; }
    @media screen and (max-width: 480px) {
      .sec2 .ac > li .cont .box {
        display: block; } }
    .sec2 .ac > li .cont .box.ex .mv {
      grid-area: 1 / 2 / 2 / 3; }
    .sec2 .ac > li .cont .box.ex .txt {
      grid-area: 1 / 1 / 2 / 2; }
    .sec2 .ac > li .cont .box.ex .img {
      grid-area: 2 / 1 / 3 / 3; }
      .sec2 .ac > li .cont .box.ex .img ul {
        width: calc(940% / 13.35);
        display: flex;
        justify-content: space-between; }
        @media screen and (max-width: 480px) {
          .sec2 .ac > li .cont .box.ex .img ul {
            width: 100%;
            flex-wrap: wrap;
            row-gap: 15px; } }
        .sec2 .ac > li .cont .box.ex .img ul li {
          width: calc(302% / 9.4); }
          @media screen and (max-width: 480px) {
            .sec2 .ac > li .cont .box.ex .img ul li {
              width: calc(302% / 6.2); }
              .sec2 .ac > li .cont .box.ex .img ul li:first-child {
                margin-left: calc(159% / 6.2); } }
    .sec2 .ac > li .cont .box .mv {
      grid-area: 1 / 2 / 2 / 3; }
      @media screen and (max-width: 480px) {
        .sec2 .ac > li .cont .box .mv {
          width: 100%;
          margin-bottom: 20px; } }
      .sec2 .ac > li .cont .box .mv .video {
        width: 100%;
        aspect-ratio: 1280 / 720; }
        .sec2 .ac > li .cont .box .mv .video video {
          width: 100%;
          height: 100%;
          object-fit: cover; }
    .sec2 .ac > li .cont .box .txt {
      grid-area: 1 / 1 / 3 / 2;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center; }
      @media screen and (max-width: 480px) {
        .sec2 .ac > li .cont .box .txt {
          width: calc(100% - 40px);
          margin: 0 auto 20px; } }
      .sec2 .ac > li .cont .box .txt .s1 {
        display: inline-block; }
      .sec2 .ac > li .cont .box .txt .icon {
        text-align: center;
        margin-bottom: 15px; }
        @media screen and (max-width: 480px) {
          .sec2 .ac > li .cont .box .txt .icon {
            width: 40%; } }
      .sec2 .ac > li .cont .box .txt .t1 {
        font-size: clamp(8px, calc(10vw / 13.35), 10px);
        line-height: 1;
        letter-spacing: 0;
        font-weight: 900;
        padding: 0.4em 2em;
        border: solid 1px #000;
        margin-bottom: 0.6em;
        text-align: center; }
        @media screen and (max-width: 480px) {
          .sec2 .ac > li .cont .box .txt .t1 {
            font-size: calc(10vw / 3.9); } }
      .sec2 .ac > li .cont .box .txt .t2 {
        font-size: clamp(12px, calc(21vw / 13.35), 21px);
        line-height: 1.7;
        letter-spacing: 0.1em;
        font-weight: 900;
        margin-bottom: 0.8em;
        text-align: left; }
        @media screen and (max-width: 480px) {
          .sec2 .ac > li .cont .box .txt .t2 {
            text-align: center;
            font-size: calc(16vw / 3.9); } }
      .sec2 .ac > li .cont .box .txt .t3 {
        font-size: clamp(10px, calc(13vw / 13.35), 13px);
        line-height: 1.8;
        letter-spacing: 0.1em;
        font-weight: 500;
        margin-bottom: 2.8em;
        text-align: left; }
        @media screen and (max-width: 480px) {
          .sec2 .ac > li .cont .box .txt .t3 {
            text-align: center;
            font-size: calc(12vw / 3.9);
            margin-bottom: 1.8em;
            letter-spacing: 0.05em; } }
    .sec2 .ac > li .cont .box .img {
      grid-area: 2 / 2 / 3 / 3;
      display: flex;
      align-items: flex-end; }
      @media screen and (max-width: 480px) {
        .sec2 .ac > li .cont .box .img {
          width: calc(100% - 40px);
          margin: 0 auto;
          display: block; } }
      .sec2 .ac > li .cont .box .img ul {
        width: calc(620% / 8);
        display: flex;
        justify-content: space-between; }
        @media screen and (max-width: 480px) {
          .sec2 .ac > li .cont .box .img ul {
            width: 100%; } }
        .sec2 .ac > li .cont .box .img ul li {
          width: calc(302% / 6.2); }
.sec2 .ac > li:nth-child(2n) .cont {
  background: #f9f8f4; }
  .sec2 .ac > li:nth-child(2n) .cont .box {
    margin: 0 auto 0 0;
    grid-template-columns: calc(800% / 13.35) calc(511% / 13.35); }
    .sec2 .ac > li:nth-child(2n) .cont .box.ex .mv {
      grid-area: 1 / 1 / 2 / 2; }
    .sec2 .ac > li:nth-child(2n) .cont .box.ex .txt {
      grid-area: 1 / 2 / 2 / 3; }
    .sec2 .ac > li:nth-child(2n) .cont .box.ex .img {
      grid-area: 2 / 1 / 3 / 3; }
    .sec2 .ac > li:nth-child(2n) .cont .box .mv {
      grid-area: 1 / 1 / 2 / 2; }
    .sec2 .ac > li:nth-child(2n) .cont .box .txt {
      grid-area: 1 / 2 / 3 / 3; }
    .sec2 .ac > li:nth-child(2n) .cont .box .img {
      grid-area: 2 / 1 / 3 / 2; }
      .sec2 .ac > li:nth-child(2n) .cont .box .img ul {
        margin: 0 0 0 auto; }

.sec3 {
  position: relative;
  padding: 80px 0; }
  @media screen and (max-width: 480px) {
    .sec3 {
      padding: 40px 0; } }
  .sec3::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url("../images/house_design/sec3_bg.jpg") center center/cover; }
    @media screen and (max-width: 480px) {
      .sec3::after {
        background: url("../images/house_design/sec3_sp.jpg") center center/cover; } }
  .sec3.fix::after {
    position: fixed; }
  .sec3 .inner {
    max-width: 1460px; }
  .sec3 .inn {
    max-width: 934px;
    margin-inline: auto; }
  .sec3 .tab {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 5px; }
    .sec3 .tab li {
      cursor: pointer;
      width: calc((100% - 30px) / 6);
      background: #fff;
      border-radius: 4px;
      font-size: clamp(10px, calc(14vw / 9.34), 14px);
      line-height: 1;
      letter-spacing: 0.1em;
      font-weight: 500;
      text-align: center;
      padding: 0.4em 5px; }
      @media screen and (max-width: 480px) {
        .sec3 .tab li {
          font-size: calc(11vw / 3.9);
          width: calc((100% - 10px) / 3); } }
  .sec3 .cont {
    position: relative; }
    .sec3 .cont > li {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      transition: all 0.4s;
      pointer-events: none; }
      .sec3 .cont > li.active {
        opacity: 1;
        position: relative;
        pointer-events: all; }
      .sec3 .cont > li .radio {
        display: none; }
      .sec3 .cont > li .slide_main {
        position: relative; }
        .sec3 .cont > li .slide_main > li {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          opacity: 0;
          transition: all 0.6s; }
          .sec3 .cont > li .slide_main > li.active {
            opacity: 1;
            position: relative; }
      .sec3 .cont > li .pos_re {
        position: relative; }
      .sec3 .cont > li .slide_prev {
        cursor: pointer;
        position: absolute;
        left: calc((50% - 50vw) + 30px);
        top: 50%;
        height: 1px;
        width: calc((50vw - 50%) - 50px);
        background: #fff; }
      .sec3 .cont > li .slide_next {
        cursor: pointer;
        position: absolute;
        right: calc((50% - 50vw) + 30px);
        top: 50%;
        height: 1px;
        width: calc((50vw - 50%) - 50px);
        background: #fff; }
      .sec3 .cont > li .slide_thum {
        margin-top: 30px;
        display: flex;
        justify-content: center;
        gap: 20px; }
        .sec3 .cont > li .slide_thum li {
          cursor: pointer;
          width: 12px;
          height: 12px;
          border: solid 2px #FFF;
          background: #b5b5b6;
          border-radius: 50%; }
          .sec3 .cont > li .slide_thum li.active {
            background: #914446; }

.w_img {
  width: 100%; }

/*# sourceMappingURL=house_design.css.map */