@charset "UTF-8";
/*! Writen  by SCSS */
body {
  background: #fafafa; }

.item_head {
  font-size: clamp(20px, 2.858vw, 40px);
  letter-spacing: 0.1em;
  font-weight: bold;
  line-height: 1.4;
  display: flex;
  column-gap: 3.34%;
  align-items: baseline; }
  @media screen and (max-width: 480px) {
    .item_head {
      flex-direction: column;
      text-align: center;
      align-items: center;
      margin-inline: auto !important;
      row-gap: 5px;
      letter-spacing: 0.05em; } }
  .item_head.w {
    color: #fff; }
    .item_head.w .min {
      color: #fff; }
  .item_head.b {
    display: block; }
    .item_head.b .min {
      display: block; }
      @media screen and (max-width: 480px) {
        .item_head.b .min {
          margin-bottom: 5px; } }
  .item_head .min {
    font-size: clamp(12px, 1.167vw, 14px);
    letter-spacing: 0.2em;
    color: #003164;
    margin-bottom: 10px; }
  .item_head.blue {
    color: #003164; }

.item_ttl {
  font-size: clamp(20px, 2.667vw, 32px);
  letter-spacing: 0.1em;
  font-weight: bold; }
  @media screen and (max-width: 480px) {
    .item_ttl.ls_min {
      letter-spacing: 0.05em; } }

.read {
  font-size: clamp(14px, 1.334vw, 16px); }

.slide_prev, .slide_next {
  display: none !important; }
  @media screen and (max-width: 480px) {
    .slide_prev, .slide_next {
      display: block !important;
      color: #fff; }
      .slide_prev.b, .slide_next.b {
        color: #333; } }

.swiper-button-prev {
  left: 5px !important;
  right: auto !important; }

.swiper-button-next {
  left: auto !important;
  right: 5px !important; }

.sec_main {
  position: relative; }
  .sec_main .main_image {
    mask: 0; }
    @media screen and (max-width: 480px) {
      .sec_main .main_image img {
        aspect-ratio: 3.5/4;
        object-position: 35%; } }
  .sec_main .main_txt {
    padding-top: 0;
    position: absolute;
    left: 0;
    top: 0; }
    @media screen and (max-width: 480px) {
      .sec_main .main_txt {
        width: 80%;
        left: 10px;
        top: auto;
        bottom: 40px; } }

.sec02,
.sec03,
.sec04,
.aa {
  margin-bottom: clamp(60px, 11.667vw, 140px); }

@media screen and (max-width: 480px) {
  .sec03,
  .sec04,
  .aa {
    margin-bottom: 90px; } }

.sec06,
.aa {
  margin-bottom: clamp(60px, 10vw, 120px); }

.btn_wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  column-gap: 2.5%; }
  .btn_wrap .btn {
    width: 100%;
    max-width: 250px;
    color: #fff; }
    .btn_wrap .btn a {
      font-size: clamp(14px, 1.667vw, 20px);
      display: block;
      padding: clamp(12px, 1.25vw, 15px) 0;
      text-align: center;
      border-radius: 999px;
      letter-spacing: 0.05em;
      transition: opacity 0.3s ease-in-out 0s;
      color: #fff; }
      @media (hover: hover) {
        .btn_wrap .btn a:hover {
          opacity: .7; } }
    .btn_wrap .btn:nth-child(1) a {
      background: #640000; }
    .btn_wrap .btn:nth-child(2) a {
      background: #003164; }
    .btn_wrap .btn.ex a {
      color: #003164;
      background: #ccd6df; }
    .btn_wrap .btn .cap_c {
      margin-top: 0.5em;
      letter-spacing: 0.1em;
      color: #000; }
      .btn_wrap .btn .cap_c.w {
        color: #fff; }
      @media screen and (max-width: 480px) {
        .btn_wrap .btn .cap_c.w_sp {
          color: #fff; } }

.sec_info {
  background: #003164;
  padding: 40px 0; }
  @media screen and (max-width: 480px) {
    .sec_info {
      padding: 50px 0; } }
  .sec_info .flex_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: clamp(20px, 2.917vw, 35px);
    line-height: 1;
    font-size: clamp(14px, 1.667vw, 20px);
    color: #fff; }
  @media screen and (max-width: 480px) {
    .sec_info .txt01 {
      width: 90%;
      margin-inline: auto; } }
  @media screen and (max-width: 480px) {
    .sec_info .txt {
      line-height: 1.6;
      font-size: 16px; } }
  .sec_info .in_box {
    width: 100%; }

.sec01 {
  position: relative;
  padding-top: clamp(60px, 8.334vw, 100px);
  margin-bottom: clamp(60px, 8.334vw, 100px); }
  .sec01 .plan_obj {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 486px;
    width: 30.38%; }
    @media screen and (max-width: 480px) {
      .sec01 .plan_obj {
        width: 44.19%; } }
  .sec01 .ttl_wrap .txt {
    font-size: clamp(14px, 1.667vw, 20px); }
  .sec01 .img_wrap .img {
    position: relative;
    width: 43.34%; }
    @media screen and (max-width: 480px) {
      .sec01 .img_wrap .img {
        width: 100% !important; } }
    .sec01 .img_wrap .img .icon {
      position: absolute;
      display: block;
      right: 5.77%;
      top: 22.4%;
      width: 80px; }
      @media screen and (max-width: 480px) {
        .sec01 .img_wrap .img .icon {
          display: none; } }
  .sec01 .img_wrap .en_img {
    width: 5.75%; }

.sec02 {
  position: relative;
  display: flex;
  justify-content: flex-end;
  column-gap: 4.38%;
  background: #dfeff8;
  padding: clamp(60px, 8.334vw, 100px) 0; }
  @media screen and (max-width: 480px) {
    .sec02 {
      padding-inline: 20px;
      flex-wrap: wrap;
      column-gap: 0;
      row-gap: 30px;
      justify-content: space-between;
      padding-bottom: 80px; } }
  .sec02 .text_wrap {
    width: 27.5%;
    margin-top: clamp(30px, 4.375vw, 70px); }
    @media screen and (max-width: 480px) {
      .sec02 .text_wrap {
        width: 100%;
        text-align: center;
        margin-top: 0; } }
    .sec02 .text_wrap .item_head {
      margin-bottom: clamp(40px, 6.429vw, 90px); }
      @media screen and (max-width: 820px) {
        .sec02 .text_wrap .item_head {
          margin-bottom: 30px; } }
    @media screen and (max-width: 480px) {
      .sec02 .text_wrap .cap_l {
        text-align: center; } }
  .sec02 .item {
    width: 26.25%;
    display: flex;
    flex-direction: column;
    row-gap: clamp(15px, 1.667vw, 20px); }
    @media screen and (max-width: 480px) {
      .sec02 .item {
        width: 48%; } }
    .sec02 .item .txt {
      line-height: 1;
      display: flex;
      flex-direction: column;
      row-gap: 10px;
      align-items: flex-start;
      letter-spacing: 0.05em; }
      .sec02 .item .txt .min {
        display: inline-block;
        font-size: 60%;
        color: #9d0000; }
      @media screen and (max-width: 480px) {
        .sec02 .item .txt {
          font-size: 14px;
          letter-spacing: 0;
          line-height: 1.4; } }
    @media screen and (min-width: 960px) {
      .sec02 .item.item02 {
        flex-direction: column-reverse; } }
  .sec02 .cap {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 12px;
    display: block;
    padding: 3px 5px;
    line-height: 1.5;
    color: #333;
    text-align: right; }
    @media screen and (max-width: 480px) {
      .sec02 .cap {
        font-size: 10px; } }

.sec03 > .item_ttl {
  line-height: 1; }
  @media screen and (max-width: 480px) {
    .sec03 > .item_ttl {
      line-height: 1.6;
      text-align: center; } }
@media screen and (max-width: 480px) {
  .sec03 .item_wrap {
    width: calc(100% - 40px);
    margin-inline: auto; } }
.sec03 .item_wrap .item {
  padding: 70px 0;
  color: #fff;
  width: 25%;
  padding-inline: 3.13%;
  background: center center / cover no-repeat;
  display: flex;
  flex-direction: column;
  row-gap: clamp(15px, 2.084vw, 25px); }
  @media screen and (max-width: 480px) {
    .sec03 .item_wrap .item {
      width: 100% !important;
      padding: 20px; } }
  .sec03 .item_wrap .item.item01 {
    background-image: url("../images/walldoor/img03_bg.png"); }
  .sec03 .item_wrap .item.item02 {
    background-image: url("../images/walldoor/img04_bg.png"); }
  .sec03 .item_wrap .item.item03 {
    background-image: url("../images/walldoor/img05_bg.png"); }
  .sec03 .item_wrap .item.item04 {
    background-image: url("../images/walldoor/img06_bg.png"); }
  .sec03 .item_wrap .item .ttl .min {
    font-size: clamp(12px, 1.167vw, 14px);
    display: block;
    opacity: .6; }
@media (min-width: 768px) {
  .sec03 .swiper-wrapper {
    display: flex; } }

.sec04 .item_wrap {
  flex-wrap: wrap;
  row-gap: clamp(30px, 3.334vw, 40px); }
  @media screen and (max-width: 480px) {
    .sec04 .item_wrap {
      flex-direction: column; } }
  .sec04 .item_wrap .item {
    width: 46.67%;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    column-gap: 5.36%;
    align-items: center;
    padding: 20px 40px 30px;
    grid-row-gap: clamp(15px, 1.667vw, 20px); }
    @media screen and (max-width: 820px) {
      .sec04 .item_wrap .item {
        padding: 20px 20px 30px;
        column-gap: 15px; } }
    @media screen and (max-width: 480px) {
      .sec04 .item_wrap .item {
        width: 100%;
        padding: 20px; } }
    .sec04 .item_wrap .item.item03 .ttl, .sec04 .item_wrap .item.item04 .ttl {
      letter-spacing: 0.05em; }
    .sec04 .item_wrap .item .position {
      position: relative; }
      .sec04 .item_wrap .item .position .ab_txt {
        position: absolute;
        inset: 0;
        bottom: 100%;
        top: auto;
        font-size: 60%;
        text-align: center;
        letter-spacing: 0.1em;
        letter-spacing: normal; }
        @media screen and (max-width: 480px) {
          .sec04 .item_wrap .item .position .ab_txt {
            font-size: 80%; } }
    .sec04 .item_wrap .item .no {
      line-height: 2.23;
      flex-shrink: 0;
      width: 100%;
      font-size: clamp(18px, 1.667vw, 20px);
      align-content: center;
      letter-spacing: 0.2em;
      color: #003164; }
      .sec04 .item_wrap .item .no .big {
        font-size: 160%;
        line-height: 1;
        vertical-align: middle; }
    .sec04 .item_wrap .item .ttl {
      color: #003164;
      font-size: clamp(16px, 2.09vw, 24px); }
      @media screen and (max-width: 820px) {
        .sec04 .item_wrap .item .ttl {
          margin-top: 20px; } }
      @media screen and (max-width: 480px) {
        .sec04 .item_wrap .item .ttl {
          font-size: 4vw;
          line-height: 1.4 !important;
          letter-spacing: 0.05em; } }
    .sec04 .item_wrap .item :not(.read) {
      line-height: 1;
      line-height: 1.4; }
    @media screen and (max-width: 480px) {
      .sec04 .item_wrap .item .icon {
        width: 100px; } }
    @media screen and (max-width: 480px) {
      .sec04 .item_wrap .item .icon img {
        width: 100%; } }

.sec05 {
  position: relative;
  height: 400px;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../images/walldoor/img07.png"); }
  @media screen and (max-width: 820px) {
    .sec05 {
      height: 300px; } }
  @media screen and (max-width: 480px) {
    .sec05 {
      height: auto;
      padding: 30px 0;
      background-image: url("../images/walldoor/img07_sp.png"); } }
  @media screen and (max-width: 480px) {
    .sec05 .img {
      aspect-ratio: 1; }
      .sec05 .img img {
        width: 100%;
        height: 100%;
        object-fit: cover; } }
  .sec05 .text_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: clamp(20px, 2.5vw, 30px);
    position: absolute;
    inset: 0; }
    @media screen and (max-width: 480px) {
      .sec05 .text_wrap {
        position: static; } }
    .sec05 .text_wrap .ttl {
      color: #000; }
    .sec05 .text_wrap .ttl, .sec05 .text_wrap .read {
      text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.9), 0px 0px 1px rgba(255, 255, 255, 0.9), 0px 0px 2px rgba(255, 255, 255, 0.9), 0px 0px 3px rgba(255, 255, 255, 0.9), 0px 0px 4px rgba(255, 255, 255, 0.9), 0px 0px 5px rgba(255, 255, 255, 0.9), 0px 0px 6px rgba(255, 255, 255, 0.9), 0px 0px 7px rgba(255, 255, 255, 0.9), 0px 0px 8px rgba(255, 255, 255, 0.9), 0px 0px 9px rgba(255, 255, 255, 0.9), 0px 0px 10px rgba(255, 255, 255, 0.9); }
  .sec05 .btn_wrap {
    justify-content: flex-start; }

.sec06 .life {
  max-width: 1069px;
  width: 66.82%; }
  @media screen and (max-width: 480px) {
    .sec06 .life {
      max-width: 1069px;
      width: 97.19%; } }
.sec06 .img_wrap .img {
  max-width: 560px;
  width: 46.67%;
  position: relative; }
  @media screen and (max-width: 480px) {
    .sec06 .img_wrap .img {
      width: 100% !important; } }
  .sec06 .img_wrap .img .btn {
    position: absolute;
    inset: 0;
    display: block;
    margin-inline: auto;
    top: auto;
    text-align: center;
    bottom: 3.7%;
    transition: opacity 0.3s ease-in-out 0s;
    width: fit-content;
    width: 35.72%;
    margin-inline: auto; }
    @media (hover: hover) {
      .sec06 .img_wrap .img .btn:hover {
        opacity: .7; } }
    @media screen and (max-width: 480px) {
      .sec06 .img_wrap .img .btn {
        width: 120px;
        bottom: 24px; } }
.sec06 .swiper-button-prev, .sec06 .swiper-button-next {
  filter: drop-shadow(0px 0px 0px rgba(51, 51, 51, 0.2)) drop-shadow(0px 0px 1px rgba(51, 51, 51, 0.2)) drop-shadow(0px 0px 2px rgba(51, 51, 51, 0.2)); }

.sec07 {
  padding: clamp(60px, 5.834vw, 70px) 0;
  background: #003164;
  position: relative; }
  .sec07::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("../images/walldoor/trust.png") center center/cover no-repeat;
    pointer-events: none;
    mix-blend-mode: screen; }
  .sec07 .item_head {
    margin-inline: 0; }
  @media screen and (max-width: 480px) {
    .sec07 .img_wrap {
      flex-wrap: wrap;
      row-gap: 10px;
      width: 80%;
      margin-inline: auto; } }
  .sec07 .img_wrap .img {
    width: 22.5%; }
    @media screen and (max-width: 480px) {
      .sec07 .img_wrap .img {
        width: 48%; } }
  .sec07 .read {
    color: #fff;
    line-height: 1.8;
    font-size: clamp(15px, 1.5vw, 18px); }

.obj {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  padding: 80px 0;
  background: url("../images/walldoor/bg.png") center center/cover no-repeat; }
  .obj .txt {
    display: inline-block;
    padding-right: 0.5em;
    line-height: 1;
    font-size: clamp(26px, 5.5vw, 66px);
    color: #143f6e;
    opacity: .1; }

@keyframes marquee {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }
.sec08 {
  color: #fff;
  padding: 80px 0 50px;
  background: url("../images/walldoor/exp_bg.png") center center/cover no-repeat; }
  @media screen and (max-width: 480px) {
    .sec08 {
      padding: 60px 0;
      background-image: url("../images/walldoor/exp_bg_sp.png"); } }
  @media screen and (max-width: 480px) {
    .sec08 .text_wrap .read {
      text-align: center; } }
  .sec08 .item_wrap {
    max-width: 630px;
    width: 52.5%;
    padding-top: clamp(30px, 5vw, 60px);
    margin-top: clamp(30px, 4.167vw, 50px);
    border-top: 1px solid #fff;
    flex-wrap: wrap;
    gap: clamp(15px, 2.5vw, 30px) 0;
    margin-bottom: clamp(50px, 5vw, 60px); }
    @media screen and (max-width: 480px) {
      .sec08 .item_wrap {
        width: 100%;
        gap: 20px 0px; } }
    .sec08 .item_wrap .item {
      width: 47.62%;
      text-align: center;
      position: relative;
      z-index: 1;
      padding: clamp(15px, 1.667vw, 20px) 0; }
      @media screen and (max-width: 480px) {
        .sec08 .item_wrap .item {
          width: 100%;
          padding: 20px 0; } }
      .sec08 .item_wrap .item::before {
        content: '';
        position: absolute;
        inset: 0;
        border: 1px solid #fff;
        pointer-events: none;
        border-radius: 10px;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: -1; }
      .sec08 .item_wrap .item .ttl {
        color: #ffff00;
        font-size: clamp(14px, 1.834vw, 22px);
        margin-bottom: .75em;
        line-height: 1;
        letter-spacing: 0.05em; }
        @media screen and (max-width: 480px) {
          .sec08 .item_wrap .item .ttl {
            font-size: 5.4vw; } }
      .sec08 .item_wrap .item .txt {
        font-size: clamp(11px, 1.25vw, 15px);
        letter-spacing: 0.05em; }
        @media screen and (max-width: 480px) {
          .sec08 .item_wrap .item .txt {
            font-size: 14px; } }

@media screen and (max-width: 480px) {
  .ls05_sp {
    letter-spacing: -0.05em; } }

.button {
  transition: opacity 0.3s ease-in-out 0s; }
  @media (hover: hover) {
    .button:hover {
      opacity: .7; } }

/*	モーダルmp4	*/
.movie_wrap {
  position: relative; }
  .movie_wrap:before {
    content: "";
    display: block;
    padding-bottom: 56.25%;
    pointer-events: none; }
  .movie_wrap video, .movie_wrap iframe {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%; }

/*	モーダル	*/
.modal_cont {
  display: none; }

.iziModal {
  background: none !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important; }

.modal_box {
  margin: 0 auto;
  padding: 0 70px;
  position: relative;
  max-width: 1100px; }
  @media screen and (max-width: 768px) {
    .modal_box {
      padding: 30px 20px; } }
  .modal_box .m_box {
    position: relative;
    background: #FFF;
    flex-direction: row-reverse; }
    @media screen and (max-width: 768px) {
      .modal_box .m_box {
        flex-wrap: wrap; } }
    .modal_box .m_box .img {
      text-align: center;
      padding: 20px 0; }
  .modal_box a.close {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    border: none;
    width: auto;
    height: auto;
    background: none;
    cursor: pointer; }
    .modal_box a.close span {
      font-size: 40px;
      color: #FFF;
      display: block;
      line-height: 1;
      transform-origin: center;
      transition: 0.3s opacity ease-in-out 0s; }
      .modal_box a.close span:hover {
        opacity: .7; }
  .modal_box .controls {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0; }
    @media screen and (max-width: 768px) {
      .modal_box .controls {
        position: relative;
        max-width: 120px;
        margin: 20px auto 0;
        display: flex;
        justify-content: space-between; } }
    .modal_box .controls li {
      position: absolute;
      top: 50%;
      margin-top: -35px;
      cursor: pointer;
      width: 50px;
      height: 50px;
      border: 1px solid #FFF;
      border-radius: 100px; }
      @media screen and (max-width: 768px) {
        .modal_box .controls li {
          position: static;
          margin-top: 0; } }
      .modal_box .controls li span {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 0;
        height: 0;
        border: 8px solid transparent; }
      .modal_box .controls li.prev {
        left: 10px; }
        .modal_box .controls li.prev span {
          margin-left: 8px;
          border-right: 14px solid #FFF; }
      .modal_box .controls li.next {
        right: 10px; }
        .modal_box .controls li.next span {
          margin-right: 8px;
          border-left: 14px solid #FFF; }

/* sec02 */

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