@charset "UTF-8";

:root {
  /* font */
  --fontJP: "Noto Sans JP", sans-serif;
  --fontEN: "Figtree", sans-serif;
  --fontNum: "Akshar", sans-serif;
  --fontNum2: "Josefin Sans", sans-serif;
  /* color */
  --key: #000;
  --blue: #0489A8;
  --blue-p: #D9EDF2;
  --pink: #E4007F;
  --bg: #EFEEED;
  --bg50: #F7F6F6;
  --bgblue: #E4F2F6;
  --line-d: #8A8A8A;
  --line-t: #D5D5D5;
  --txt: #1F1F1F;
  --txt-p: #A7A7A7;
  --txt-d: #615F5F;
  --link: #6155F5;
  /* other */
  --transition: all .3s cubic-bezier(.25,.1,.25,1);
  --drop: drop-shadow(0 1px 2px rgb(0 0 0 / .1));
  --dropModal: drop-shadow(0 0 10px rgb(0 0 0 / .15));
  --arw: translate(-70%,-50%) rotate(-45deg) skew(15deg,15deg);
  --arw-d: translate(13px,-50%) rotate(45deg) skew(15deg,15deg);
  --r: 5px;
  --hoverTxt: .8;
}

body {
  font-family: var(--fontJP);
  font-size: min(4vw,16px);
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
  color: var(--key);
  background: #fff;
  position: relative;
  transition: var(--transition);
}
#wrap {
  overflow-x: hidden;
}

@media screen and (max-width: 767px) {
  .-pc {
    display: none !important;
  }
}
@media screen and (min-width: 768px) {
  .-sp {
    display: none !important;
  }
}

ol {
  margin: 0;
  padding-left: 1.3em;
  li {
    padding-left: .2em;
  }
}

hr {
  border-top: 1px solid var(--line-t);
  height: 0;
  color: transparent;
  background-color: transparent;
}


/* container -------------------------------*/
.container {
  max-width: 1270px;
  margin: auto;
}

@media screen and (max-width: 767px) {
  .container {
    width: calc( 100% - 30px );
  }
}
@media screen and (min-width: 768px) {
  .container {
    width: calc( 100% - 100px );
  }
}

/* hideTxt -------------------------------*/
.e-hideTxt {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* b-btn -------------------------------*/

.b-btns {
  .b-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    border: 1px solid #000;
    background: #fff;
    color: var(--txt);
    border-radius: 5px;
    position: relative;
    transition: var(--transition);
    filter: var(--drop);
    &.m-mark {
      .b-mark {
        aspect-ratio: 1/1;
        width: 1.25em;
        background: var(--key);
        border-radius: 50%;
        position: absolute;
        transition: var(--transition);
        right: 30px;
        span {
          display: block;
          aspect-ratio: 1/1;
        }
        &>span {
          width: 100%;
          position: relative;
          span {
            width: 26%;
            border-right: 1px solid #fff;
            border-bottom: 1px solid #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform-origin: center center;
            transform: var(--arw);
          }
        }
      }
    }
  }
}
.b-pageContent {
  .b-btns {
    .b-btn {
      &.m-mark {
        border-color: var(--line-t);
        .b-mark {
          width: min(10vw,40px);
          background: #fff;
          right: 23px;
          .e-txt {
            padding-right: min(10vw,40px);
          }
          &>span {
            span {
              width: 13%;
              border-color: var(--txt);
            }
          }
        }
      }
    }
  }
}

@media screen and (min-width: 768px) {
  .b-btn {
    &:hover {
      background: var(--key);
      color: #fff;
      &.b-mark {
        background: #fff;
        &>span {
          span {
            border-color: var(--key);
          }
        }
      }
    }
  }
  .b-pageContent {
    .b-btns {
      .b-btn {
        &:hover {
          &.m-mark {
            background: #fff;
            color: var(--blue);
            .b-mark {
              background: var(--bgblue);
              &>span {
                span {
                  border-color: var(--blue);
                }
              }
            }
          }
        }
      }
    }
  }
}

/* bg */
.b-btn.m-bg {
  background: none;
  border-color: #fff;
  color: #fff;
  .b-mark {
    background: #fff;
    &>span {
      span {
        border-color: #000;
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .b-btn.m-bg {
     &:hover {
       background: #fff;
       color: var(--key);
       .b-mark {
         background: var(--key);
         &>span {
           span {
             border-color: #fff;
           }
         }
       }
    }
  }
}

/* arw */
.b-btn.m-arw {
  position: relative;
  &::after {
    content: "";
    display: block;
    aspect-ratio: 1/1;
    width: .3276em;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    position: absolute;
    top: 50%;
    right: 20px;
    transform-origin: center center;
    transform: var(--arw);
    transition: var(--transition);
  }
}
@media screen and (min-width: 768px) {
  .b-btn.m-arw {
    &:hover {
      &::after {
        border-color: #fff;
      }
    }
  }
}

/* back */
.b-btn.m-back {
  .b-mark {
    background: none;
    right: unset;
    left: 20px;
    transform: rotate(180deg);
    &>span {
      span {
        width: 35%;
        border-color: var(--key);
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .b-btn.m-back {
     &:hover {
       .b-mark {
         &>span {
           span {
             border-color: #fff;
           }
         }
       }
    }
  }
}

/* pageContent btn */
.b-pageContent {
  .b-btn {
    font-weight: 500;
    max-width: 300px;
    &[target="_blank"] {
      &::after {
        content: "";
        display: block;
        aspect-ratio: 1/1;
        width:min(5vw,20px);
        background: url(../images/icon-link_blank.png) center center / contain no-repeat;
        position: absolute;
        right: 15px;
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .b-pageContent {
  .b-btn {
    max-width: 300px;
    &[target="_blank"] {
      &:hover {
        &::after {
          background-image: url(../images/icon-link_blank-wh.png);
        }
      }
    }
   }
  }
}

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

/* header ( breakpoint 1000px )

/*--------------------------------------------------*/
.b-header {
  width: 100%;
  background: var(--key);
  color: #fff;
  line-height: 1.5;
  position: fixed;
  z-index: 200;
  .b-headerInner {
    position: relative;
  }
  .e-logo {
    display: block;
    width: min(42.5vw,170px);
    padding: 30px 0;
  }
}
@media screen and (max-width: 1000px) {
  .b-header {
    padding: 0 20px;
    .e-logo {
      &.-sp {
        display: block !important;
      }
    }
    .b-subNav {
      width: 100dvw;
      padding: 20px 20px 200px;
      margin-left: 50%;
      background: #333;
      border-top: 1px solid rgb(255 255 255 / .8);
      transform: translateX(-50%);
    }
  }
}

@media screen and (min-width: 1001px) {
  .b-header {
    padding: 0 10px 0 20px;
    .b-headerMain {
      display: flex;
      flex-direction: column;
    }
    .b-subNav {
      display: flex;
      flex-direction: column;
      width: min(30vw,340px);
    }
  }
}

/* menu -----------------------------------*/
.b-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  height: 100%;
  position: absolute;
  z-index: 100;
  top: 0;
  right: -20px;
  .inner {
    aspect-ratio: 1/1;
    width: 17px;
    position: relative;
  }
  span {
    display: block;
    height: 2px;
    background: #fff;
    position: absolute;
    top: 50%;
    transition: var(--transition);
    transform-origin: center center;
    &:nth-child(1) {
      width: 100%;
      transform: translateY(-4px);
    }
    &:nth-child(2) {
      width: 65%;
      transform: translateY(4px);
    }
  }
}
body.menuOpen {
  .b-menu {
    span {
      width: 130%;
      &:nth-child(1) {
        transform: translate(-15%,-50%) rotate(40deg);
      }
      &:nth-child(2) {
        transform: translate(-15%,-50%) rotate(-40deg);
      }
    }
  }
}
@media screen and (min-width: 1001px) {
  .b-menu {
    display: none;
  }
}

/* menuWrap */
@media screen and (max-width: 1000px) {
  .b-menuWrap {
    width: 100dvw;
    height: 115dvh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 20px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background: var(--key);
    transition: var(--transition);
    opacity: 1;
  }
  body:not(.menuOpen) {
    .b-menuWrap {
      opacity: 0;
      pointer-events: none;
    }
  }
}
@media screen and (min-width: 1001px) {
  .b-menuWrap {
    display: flex;
    justify-content: space-between;
    height: 100%;
  }
}

/* nav -----------------------------------*/
.b-gNav {
  font-weight: 500;
  .e-txt {
    display: flex;
    position: relative;
    &::after {
      content: "";
      display: block;
      position: absolute;
      aspect-ratio: 1/1;
      width: 6px;
      border-right: 1px solid #fff;
      border-bottom: 1px solid #fff;
      top: 50%;
    }
  }
}
@media screen and (max-width: 1000px) {
  .b-gNav {
    width: 100dvw;
    margin-left: 50%;
    transform: translateX(-50dvw);
    overflow: hidden;
    .b-item {
      display: block;
      &+.b-item {
        border-top: 1px solid rgb(255 255 255 / .8);
      }
      .e-txt {
        display: block;
        width: 100%;
        text-align: left;
        padding: 1em 20px;
        font-size: min(4.25vw,17px);
        &::after {
          right: 20px;
          transform:  var(--arw);
        }
      }
    }
    .b-item:has(.b-childNav) {
      button.e-txt {
        position: relative;
        &::after {
          display: none;
        }
        .e-mark {
          aspect-ratio: 1/1;
          width: 12px;
          position: absolute;
          right: 1.2em;
          top: 50%;
          transform: translateY(-50%);
          .inner {
            width: 100%;
            height: 100%;
            position: relative;
            &::before,
            &::after {
              content: "";
              display: block;
              width: 100%;
              height: 1px;
              background: #fff;
              position: absolute;
              top: 50%;
              left: 50%;
              transition: var(--transition);
              transform: translate(-50%,-50%);
            }
          }
        }
        &:not(.active) {
          .e-mark {
            .inner {
              &::before {
                transform: translate(-50%,-50%) rotate(-90deg);
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (min-width: 1001px) {
  .b-gNav {
    height: 100%;
    .b-gNavList {
      display: flex;
      gap: min(3vw,30px);
    }
    .b-item {
      font-size: min(1.4vw,15px);
      .e-txt {
        height: 36px;
        &::before,
        &::after {
          opacity: 0;
          transition: var(--transition);
        }
        &::before {
          content: "";
          display: block;
          width: calc(100% + 17px);
          height: 2px;
          background: #fff;
          position: absolute;
          left: 0;
          bottom: 0;
        }
        &::after {
          width: .25em;
          right: 0;
          top: .7em;
          transform:  var(--arw-d);
        }
        &:hover {
          &::after {
            opacity: 1;
          }
        }
        &.m-current {
          &::before,
          &::after {
            opacity: 1;
          }
        }
        &.active {
          &::after {
            opacity: 1;
          }
        }
      }
    }
  }
}
@media screen and (min-width: 1161px) {
  .b-gNav{
    .b-gNavList {
      gap: 35px;
    }
    .b-item {
      font-size: 15px;
    }
  }
}
/* childNav -----------------------------------*/
.b-childNav {
  .b-childNavList {
    .e-txt {
      font-size: min(3.5vw,14px);
    }
  }
}
@media screen and (max-width: 1000px) {
  .b-childNav {
    display: none;
    .b-navMds,
    .e-img {
      display: none;
    }
    li {
      display: block;
    }
    .b-childNavList {
      padding-bottom: 1em;
      .e-txt {
        padding: .8em 20px;
      }
    }
  }
}
@media screen and (min-width: 1001px) {
  .b-childNav {
    position: absolute;
    width: 100dvw;
    padding: 30px 0;
    background: var(--txt);
    position: absolute;
    top: 100%;
    left: -20px;
    transition: var(--transition);
    &:not(.show) {
      opacity: 0;
      pointer-events: none;
    }
  }
  .b-childNavInner {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    .b-navMds {
      display: flex;
      flex-direction: column-reverse;
      width: 220px;
      flex-shrink: 0;
      padding: 0 20px;
      font-weight: 400;
      font-size: 20px;
      .e-en {
        font-family: var(--fontEN);
        color: var(--blue);
        font-size: 14px;
        letter-spacing: .01em;
      }
    }
    .b-childNavList {
      display: flex;
      flex: 0 1 auto;
      width: fit-content;
      gap: 15px;
      padding-right: 20px;
      li {
        flex: 1 1 200px;
        max-width: 200px;
      }
      .e-img {
        border-radius: var(--r);
        overflow: hidden;
        position: relative;
        &::after {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background: #fff;
          transition: var(--transition);
          position: absolute;
          z-index: 1;
          left: 0;
          top: 0;
          opacity: 0;
        }
      }
      .e-txt {
        margin-top: 15px;
        height: unset;
        transition: var(--transition);
        &::after {
          right: .5em;
          transform:  var(--arw);
          opacity: 1;
          transition: var(--transition);
        }
      }
      a:hover {
        .e-img {
          transform: scale(1);
          &::after {
            opacity: .5;
          }
        }
        .e-txt {
          color: var(--line-t);
          &::after {
            border-color: var(--line-t);;
          }
        }
      }
    }
  }
}



/* 1st -----------------------------------*/
@media screen and (min-width: 601px) {
  .b-header {
    .b-1st {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      padding: 10px 0;
    }
  }
}
@media screen and (max-width: 1000px) {
  .b-header {
    .b-1st {
      margin-bottom: 40px;
    }
  }
}

/* translate */
.b-translate {
  .gtranslate_wrapper {
    display: inline-block;
    width: 110px;
    padding: .5em 0 .5em;
    border-bottom: 1px solid;
    cursor: pointer;
    position: relative;
    &::after {
      content: "";
      display: block;
      aspect-ratio: 1/1;
      width: .3em;
      border-right: 1px solid;
      border-bottom: 1px solid;
      transform-origin: center center;
      transform: translateY(-60%) rotate(45deg) skew(8deg,8deg);
      position: absolute;
      right: 5px;
      top: 50%;
      pointer-events: none;
    }
    select {
      width: 100%;
    }
  }
}
@media screen and (max-width: 1000px) {
  .b-translate {
    font-size: min(3.75vw,15px);
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 1001px) {
  .b-translate {
    font-size: 12px;
  }
}

/* searchBox */
.b-searchBox {
  .b-searchBoxInner {
    height: 40px;
    padding-left: 30px;
    background: #fff;
    color: var(--key);
    border-radius: 5px;
    position: relative;
    &::before {
      content: "";
      display: block;
      aspect-ratio: 1/1;
      width: 30px;
      background: url(../images/icon-search.svg) center center / cover no-repeat;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }
    input[type="text"] {
      width: 100%;
      height: 100%;
      font-size: min(3.75vw,15px);
    }
  }
}
@media screen and (max-width: 600px) {
  .b-searchBox {
    .b-searchBoxInner {
      height: 60px;
      padding-left: 60px;
      &::before {
        width: 60px;
      }
    }
  }
}
@media screen and (min-width: 601px) {
  .b-header {
    .b-searchBox {
      width: 100%;
    }
  }
}

/* 2nd -----------------------------------*/

/* telBox */
.b-header {
  .b-telBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    dt {
      font-family: var(--fontNum);
      font-weight: 600;
      .e-mds {
        font-size: min(3.5vw,14px);
        padding-right: .4em;
      }
    }
    dd {
      font-size: min(2.75vw,11px);
      margin-right: -.4em;
    }
  }
}
@media screen and (max-width: 1000px) {
  .b-header {
    .b-telBox {
      padding: 20px 0;
      dt {
        .e-num {
          font-size: min(22px,5.5vw);
        }
      }
    }
  }
}
@media screen and (min-width: 601px) and (max-width: 1000px) {
  .b-header {
    .b-telBox {
      justify-content: center;
      dt {
        margin-right: 1em;
      }
    }
  }
}
@media screen and (min-width: 1001px) {
  .b-header {
    .b-telBox {
      padding: 11px 0;
      dt {
        .e-num {
          font-size: 20px;
        }
      }
    }
  }
}

/* btns */
.b-header {
  .b-btns {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    .b-btn {
      width: calc( (100% - 5px) / 2 );
      font-weight: 500;
      &.m-wcatalog {
        background: none;
        color: #fff;
        border-color: #fff;
      }
      &.m-catalog {
        border-color: #fff;
      }
      &.m-contact {
        background: var(--blue-p);
        border-color: var(--blue-p);
      }
      .b-mark {
        display: none;
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .b-header {
    .b-btn {
      height: 60px;
      font-size: min(4.5vw,18px);
    }
  }
}
@media screen and (max-width: 400px) {
  .b-header {
    .b-btns {
      flex-direction: column;
      gap: 10px;
      .b-btn {
        width: 100%;
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .b-header {
    .b-btns {
      padding-bottom: 10px;
      .b-btn {
        font-size: 15px;
        height: 50px;
        &:hover {
          border-color: #fff;
        }
        &.m-wcatalog {
          &:hover {
            color: var(--blue);
            background: rgb(255 255 255 / .9);
            border-color: rgb(255 255 255 / .0);
          }
        }
        &.m-catalog {
          &:hover {
            color: var(--blue);
            background: rgb(255 255 255 / .9);
            border-color: rgb(255 255 255 / .0);
          }
        }
        &.m-contact {
          &:hover {
            background: var(--blue);
            border-color: var(--blue);
          }
        }
      }
    }
  }
}

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

/* visualLink

/*--------------------------------------------------*/
.b-visualNav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  border-bottom: 1px solid #fff;
  li {
    overflow: hidden;
  }
  a {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 30px;
    line-height: 1.5;
    position: relative;
    .inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin: auto;
      position: relative;
      z-index: 1;
    }
    .e-txt,
    .e-shoulder {
      margin: auto;
      position: relative;
      z-index: 2;
      color: #fff;
    }
    .e-txt {
      font-size: min(5.5vw,22px);
    }
    .e-shoulder {
      font-size: min(3.5vw,14px);
      margin-top: 10px;
      span {
        display: inline-block;
      }
    }
    .e-mark {
        display: block;
        aspect-ratio: 1/1;
        width: min(10vw,50px);
        border-radius: 50%;
        position: relative;
        &::after {
          content: "";
          display: block;
          width: min(2.25vw,9px);
          position: absolute;
          aspect-ratio: 1/1;
          border-right: 1px solid #fff;
          border-bottom: 1px solid #fff;
          top: 50%;
          left: 48%;
          transform: var(--arw);
        }
      }
    .e-img {
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 0;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      overflow: hidden;
      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }
    &::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: #000;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      opacity: .7;
    }
  }
}
@media screen and (max-width: 767px) {
  .b-visualNav ul {
    li {
      width: 100%;
      height: 140px;
      a {
        .inner {
          max-width: 100%;
        }
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .b-visualNav ul {
    li {
      height: 240px;
    }
    a {
      .inner {
        max-width: 350px;
      }
      .e-mark {
        transition: var(--transition);
        &::after {
          transition: var(--transition);
        }
      }
      &:hover {
        .e-mark {
          background: #fff;
          &::after {
            border-color: #000;
          }
        }
        &::before {
          transition: var(--transition);
          opacity: .5;
        }
      }
    }
  }
}

/* about */

@media screen and (min-width: 768px) {
  .b-visualNav.m-about ul {
    li {
      width: calc( (100% - 2px) / 3);
      &.m-recruit {
        width: 100%;
        .inner {
          max-width: 410px;
        }
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 920px) {
  .b-visualNav.m-about ul {
    li {
      width: 100%;
      height: 140px;
      .inner {
        max-width: 100% !important;
      }
    }
  }
}

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

/* CTA

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

/* contact ---------------------------*/
.b-CTAcontact {
  display: flex;
  align-items: center;
  color: #fff;
  background-color: #000 !important;
  .e-btn {
    display: inline-flex;
    align-items: center;
    font-size: min(5.5vw,22px);
    .e-mark {
      display: block;
      aspect-ratio: 1/1;
      width: min(15vw,60px);
      margin-left: .85em;
      position: relative;
      border: 1px solid #fff;
      border-radius: 50%;
      &::after {
        content: "";
        display: block;
        width: min(3.75vw,15px);
        position: absolute;
        aspect-ratio: 1/1;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
        top: 50%;
        left: 45%;
        transform: var(--arw);
      }
    }
  }
  .b-telGroup {
    line-height: 1.35;
    dt {
      font-size: min(5vw,20px);
      span {
        display: inline-block;
        border: 1px solid #fff;
        font-size: min(4vw,16px);
        font-weight: 500;
        padding: .2em .7em .3em;
        margin-bottom: .6em;
      }
    }
    .e-name,.e-num {
      font-family: var(--fontNum);
      font-weight: 600;
    }
    .e-name {
      display: inline-block;
      padding-right: .3em;
    }
    .e-jp {
      font-size: min(3.5vw,14px);
    }
    .b-tel {
      padding-top: .75em;
    }
    .b-fax {
      margin-top: .8em;
      margin-bottom: .5em;
    }
  }
}
@media screen and (max-width: 767px) {
  .b-CTAcontact {
    .container {
      width: calc( 100% - 40px );
    }
    .e-lead {
      display: none;
    }
    .e-btn {
      width: 100dvw;
      margin-left: 50%;
      transform: translateX(-50dvw);
      background-image: url(../images/cta-contact-pc.jpg);
      background-size: auto 320px;
      background-position: 62.5% -5px;
      background-repeat: no-repeat;
      padding: 130px 0 130px 20px;
    }
    .b-telSection {
      padding-bottom: 50px;
    }
    .b-telGroup {
      .e-name {
        font-size: min(4.5vw,18px);
      }
      .e-num {
        font-size: min(8vw,32px);
      }
      .b-fax {
        .e-num {
          font-size: min(5.5vw,22px);
        }
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .b-CTAcontact {
    min-height: 500px;
    padding: 50px 0;
    background: url(../images/cta-contact-pc.jpg) center center / cover;
    .e-lead {
      font-size: min(5vw,20px);
      font-weight: 300;
      line-height: 1.5;
    }
    .e-btn {
      margin: 30px 0 50px;
      transition: var(--transition);
      .e-mark {
        transition: var(--transition);
      }
    }
    .b-telSection {
      display: flex;
    }
    .b-telGroup {
      &.m-01 {
        padding-right: 50px;
      }
      &.m-02 {
        padding-left: 50px;
      }
      .e-name {
        font-size: 22px;
      }
      .e-num {
        font-size: 32px;
      }
      .b-fax {
        .e-num {
          font-size: 22px;
        }
      }
    }
    &:hover {
      .e-btn {
        color: var(--blue);
        .e-mark {
          border-color: var(--blue);
          background: var(--blue);
        }
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1000px) {
  .b-CTAcontact {
    background: url(../images/cta-contact-sp.jpg) center center / cover;
  }
}
@media screen and (max-width: 1000px) {
  .b-CTAcontact {
    .b-telSection {
      display: block;
    }
    .b-telGroup {
      &.m-01 {
        padding-right: 0;
        padding-bottom: 30px;
        border-right: 0 none;
      }
      &.m-02 {
        padding-left: 0;
        padding-top: 30px;
        border-top: 1px solid #fff;
      }
    }
  }
}
@media screen and (min-width: 1001px) {
  .b-CTAcontact {
    background-size: auto 500px;
    background-repeat: no-repeat;
    .b-telGroup {
      &.m-02 {
        border-left: 1px solid #fff;
      }
    }
  }
}

body:not(.troubleshooting) {
  .b-CTAcontact {
    .b-telGroup.m-02 {
      display: none;
    }
  }
}


/* catalog ---------------------------*/
.b-CTAcatalog {
  background: var(--bg);
  .container {
    display: flex;
    align-items: center;
    .b-btns {
      display: flex;
      flex-grow: 1;
      .b-btn {
        flex-grow: 1;
        border-color: var(--line-t);
        filter: drop-shadow(0 3px 4px rgb(0 0 0 / .1));
        justify-content: flex-start;
        color: var(--txt);
        &::after {
          content: "";
          display: block;
          position: absolute;
          aspect-ratio: 1/1;
          width: 9px;
          border-right: 1px solid #000;
          border-bottom: 1px solid #000;
          top: 50%;
          transform: var(--arw);
        }
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .b-CTAcatalog {
    padding: 30px 0;
    .container {
      gap: 3%;
    }
    .e-img {
      width: 31%;
      min-width: 31%;
    }
    .b-btns {
      flex-direction: column;
      gap: 3.5vw;
      .b-btn {
        height: 16vw;
        font-size: min(4.5vw,18px);
        font-weight: 500;
        padding-left: 1em;
        &::after {
          right: 1em;
        }
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .b-CTAcatalog {
    padding: 50px 0;
    .container {
      gap: 50px;
    }
    .e-img {
      width: 170px;
      min-width: 170px;
    }
    .b-btns {
      gap: 50px;
      .b-btn {
        height: 130px;
        font-size: 22px;
        padding-left: 30px;
        &::after {
          right: 30px;
        }
        &:hover {
          color: #fff;
          &::after {
            border-color: #fff;
          }
        }
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1060px) {
  .b-CTAcatalog {
    .e-img {
      width: 250px;
      min-width: 250px;
    }
    .b-btns {
      flex-direction: column;
      gap: 20px;
      .b-btn {
        height: 100px;
      }
    }
  }
}


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

/* footer

/*--------------------------------------------------*/
.b-footer {
  padding: 50px 0 30px;
  background: var(--key);
  color: #fff;
  .container {
    position: relative;
  }
  .e-logo {
    display: block;
    width: min(45.75vw,183px);
  }
  .b-vitalInfo {
    margin-top: 15px;
    font-size: min(2.75vw,11px);
    line-height: 1.4;
  }
  .e-address {
    margin-top: 30px;
    font-size: min(3.5vw,14px);
    font-weight: 500;
  }
  .b-tels {
    margin-top: .5em;
    .e-name,
    .e-num {
      font-family: var(--fontNum);
      font-weight: 600;
    }
    .e-name {
      display: inline-block;
      font-size: min(3.5vw,14px);
      padding-right: .35em;
    }
    .e-num {
      font-size: min(5.5vw,22px);
    }
    dt {
      .e-jp {
        font-size: 12px;
      }
    }
    dd {
      font-size: 11px;
    }
  }
  .b-sns {
    margin: 30px 0;
    dt {
      font-family: var(--fontNum);
      font-weight: 300;
      font-size: min(3.5vw,14px);
      margin-bottom: 10px;
      position: relative;
      span {
        display: inline-block;
        padding-right: .5em;
        background: var(--key);
        position: relative;
        z-index: 1;
      }
      &::after {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background: #fff;
        position: absolute;
        top: 50%;
        left: 0;
      }
    }
    dd {
      display: flex;
      
    }
  }
  .b-footerBottom {
    .e-bnrAir {
      display: block;
    }
  }
  .e-copyright {
    display: block;
    width: 100%;
    margin-top: 17px;
    font-family: var(--fontEN);
    font-size: 10px;
    letter-spacing: .05em;
  }
}
@media screen and (max-width: 950px) {
  .b-footer {
    .b-sns {
      dd {
        justify-content: space-around;
      }
    }
    .b-footerBottom {
      margin-top: 30px;
      .e-bnrAir {
        padding-bottom: 20px;
      }
    }
  }
}
@media screen and (min-width: 951px) {
  .b-footer {
    .b-sns {
      width: 200px;
      dd {
        justify-content: space-between;
        a {
          position: relative;
          &::after {
            content: "";
            display: block;
            aspect-ratio: 1/1;
            width: 100%;
            border-radius: 50%;
            background: #fff;
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            transition: var(--transition);
            mix-blend-mode: difference;
            opacity: 0;
          }
          &:hover {
            &::after {
              opacity: 1;
            }
          }
        }
      }
    }
    .b-footerBottom {
      .e-bnrAir {
        width: 240px;
      }
    }
  }
}

/* footerContent -----------------------------------*/
.b-footerContent {
  .b-navLinks {
    display: flex;
    a {
      display: inline-block;
    }
    dt {
      font-size: min(3.75vw,15px);
      line-height: 1.5;
      font-weight: 500;
      a {
        padding-bottom: .3em;
        position: relative;
      }
    }
    dd {
      font-size: min(3vw,12px);
      line-height: 1.4;
      font-weight: 400;
      a {
        margin-top: .75em;
      }
    }
    .b-links {
      margin-bottom: 35px;
    }
    .e-privay {
      font-size: min(3vw,12px);
    }
  }
}

@media screen and (max-width: 950px) {
  .b-footer {
    .container {
      max-width: 800px;
    }
  }
  .b-footerContent {
    .b-navLinks {
      flex-wrap: wrap;
      justify-content: space-between;
      .b-1st {
        width: 60%;
        padding-right: 2em;
      }
      .b-2nd {
        width: 38%;
        dt {
          word-break: keep-all;
          overflow-wrap: anywhere;
        }
      }
      .b-3rd {
        width: 100%;
        .b-links {
          display: flex;
          gap: 50px;
        }
      }
    }
  }
}

@media screen and (min-width: 951px) {
  .b-footerContent {
    display: flex;
    justify-content: space-between;
    .b-footerMain {
      width: 280px;
      margin-right: auto;
    }
    .b-navLinks {
      gap: 70px;
      a {
        transition: var(--transition);
      }
      dt {
        a {
          &::after {
            content: "";
            display: block;
            width: 100%;
            height: 1px;
            background: #fff;
            position: absolute;
            bottom: 0;
            left: 0;
            opacity: 0;
            transition: var(--transition);
          }
          &:hover {
            &::after {
              opacity: 1;
            }
          }
        }
      }
      dd {
        a {
          &:hover {
            opacity: var(--hoverTxt);
          }
        }
      }
      .b-2nd {
        padding-right: 150px;
      }
      .b-3rd {
        dt {
          margin-bottom: 10px;
        }
      }
    }
  }
}
@media screen and (min-width: 951px) and (max-width: 1210px ) {
  .b-footerContent {
    .b-navLinks {
      width: 100%;
      flex-wrap: wrap;
      flex: 0 1 auto;
      width: 500px;
      .b-links:last-of-type {
        margin-bottom: 0;
      }
      .b-2nd {
        padding-right: 0;
      }
      .b-3rd {
        display: flex;
        gap: 51px;
      }
    }
  }
}
@media screen and (min-width: 1211px ) {
  .b-footerContent {
    .b-navLinks {
      .e-privay {
        padding-top: 50px;
      }
    }
  }
}

/* pagetop -----------------------------------*/
.b-footer {
  .b-pageTop {
    aspect-ratio: 1/1;
    width: 50px;
    position: absolute;
    right: 0;
    a {
      display: block;
      aspect-ratio: 1/1;
      width: 100%;
      position: relative;
      border: 1px solid #fff;
      border-radius: 50%;
      &::before {
        content: "";
        display: block;
        aspect-ratio: 1/1;
        width: 18%;
        border-right: 1px solid #fff;
        border-top: 1px solid #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center center;
        transform: translate(-50%,-10%) rotate(-45deg) skew(-20deg,-20deg);
      }
    }
  }
}
@media screen and (max-width: 950px) {
  .b-footer {
    .b-pageTop {
      bottom: -10px;
    }
  }
}
@media screen and (min-width: 798px) {
  .b-footer {
    .b-pageTop {
      bottom: 0;
      a {
        transition: var(--transition);
        &:hover {
          background: #fff;
          &::before {
            border-color: var(--key);
          }
        }
      }
    }
  }
}


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

/* main

/*--------------------------------------------------*/
.b-main {
  min-height: 500px;
}

/* mainHeader
----------------------------------------------------*/
.b-mainHeader {
  background: var(--bg);
}
@media screen and (max-width: 767px) {
  .b-mainHeader {
    padding-top: 42px;
    min-height: 160px;
  }
}
@media screen and (min-width: 768px) {
  .b-mainHeader {
    min-height: 200px;
    padding-top: 50px;
  }
}

/* pankuzu
----------------------------------------------------*/
.b-pankuzu {
  display: flex;
  flex-wrap: wrap;
  font-size: min(3vw,12px);
  line-height: 1.4;
  padding: .8em 0;
  position: relative;
  z-index: 1;
  li {
    padding: .2em 0;
  }
  li:has(a),
  li:has(span) {
    &+li {
      &::before {
        display: inline-block;
        color: var(--line-d);
      }
    }
  }
  li:has(a) {
    &+li {
      &::before {
        content: "/";
        margin: 0 1.8em;
        font-size: 10px;
        transform: translateY(-.2em);
      }
    }
  }
  li:has(span) {
    &+li {
      &::before {
        content: "";
        width: 9px;
        height: 1px;
        margin: 0 .3em;
        background: var(--line-d);
        transform: translateY(-.3em);
      }
    }
  }
}

/* pageNav
----------------------------------------------------*/
.b-pageNav {
  width: 100dvw;
  text-align: center;
  margin-left: 50%;
  padding-top: 20px;
  transform: translateX(-50dvw);
  position: absolute;
  z-index: 100;
  left: 0;
  top: 0;
  font-size: min(3.5vw,14px);
  font-weight: 500;
  color: var(--txt);
  &.fixed {
    position: fixed;
  }
  ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
  }
  a {
    display: block;
    padding: 10px .8em;
    border: 1px solid var(--line-t);
    border-radius: var(--r);
    background: #fff;
    filter: var(--drop);
  }
}
@media screen and (min-width: 768px) {
  .b-pageNav {
    a {
      min-width: 160px;
      transition: var(--transition);
      &:hover {
        border-color: var(--blue);
        color: var(--blue);
      }
    }
  }
}

/* headding
----------------------------------------------------*/

/* pageTtl ---------*/
.b-pageTtl {
  display: flex;
  flex-direction: column-reverse;
  .e-pageTtl {
    font-weight: 300;
    line-height: 1.6;
    color: var(--txt);
  }
  .e-en,
  .e-jp {
    font-size: min(3.5vw,14px);
    line-height: 1.6;
    letter-spacing: .01em;
  }
  .e-en {
    font-family: var(--fontEN);
    color: var(--blue);
  }
  &:has(.e-jp) {
    flex-direction: column;
    .e-pageTtl {
      margin-bottom: 10px;
    }
  }
}
@media screen and (max-width: 767px) {
  .e-pageTtl {
    font-size: min(8vw,32px);
  }
}
@media screen and (min-width: 768px) {
  .e-pageTtl {
    font-size: 50px;
  }
}
/* mds ---------*/
.b-pageContent {
  .e-mds,
  .e-mds.m-normal,
  h3 {
    font-size: min(6.5vw,26px);
    line-height: 1.4;
    font-weight: 300;
    text-align: left;
  }
  h2,h3,h4,h5 {
    text-align: left;
    font-weight: 300;
    line-height: 1.4;
    
  }
  :not(.b-mds) {
    h2,h3,h4,h5 {
      margin-bottom: 20px;
    }
  }
  .e-mds {
    &.m-smallTxt {
      font-size: min(3.5vw,14px);
      font-weight: 400;
      color: var(--blue);
      margin-bottom: 40px;
      &::before {
        content: "";
        display: inline-block;
        width: .6em;
        height: 1px;
        background: var(--blue);
        margin-right: .6em;
      }
    }
    &.m-blue {
      color: var(--blue);
      font-size: min(5.5vw,22px);
      font-weight: 500;
      margin-bottom: 20px;
    }
  }
}
.b-mds {
  margin-bottom: 50px;
  position: relative;
  &.m-hasLine {
    padding-left: 17px;
    &::before {
      content: "";
      display: block;
      width: 2px;
      height: calc(100% - .6em );
      background: var(--blue);
      position: absolute;
      left: 0;
      top: .45em;
    }
    .e-mds {
      margin-bottom: 0;
    }
  }
  .e-en {
    font-size: min(7.5vw,30px);
    font-family: var(--fontEN);
    color: var(--blue);
    font-weight: 300;
  }
  &:has(.e-en) {
    display: flex;
    flex-direction: column-reverse;
  }
}
@media screen and (max-width: 767px) {
  .b-pageContent {
    h2,
    .e-mds.m-wide {
      font-size: min(7vw,28px);
    }
    h4,
    .e-mds.m-small {
      font-size: min(6vw,24px);
    }
    .e-mds.m-min {
      font-size: min(5.5vw,22px);
    }
    .b-mds {
      &:has(.e-en) {
        .e-mds {
          font-size: min(6.5vw,26px);
        }
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .b-pageContent {
    h2,
    .e-mds.m-wide {
      font-size: 42px;
    }
    h3,
    .e-mds.m-mid,
    .e-mds.m-normal{
      font-size: 32px;
    }
    h4,
     .e-mds.m-small {
      font-size: 28px;
    }
    .b-mds {
      &:has(.e-en) {
        .e-mds {
          font-size: 26px;
        }
      }
    }
  }
}


/* layout
----------------------------------------------------*/

/* mainContent ---------*/

.b-mainContent {
  position: relative;
}
@media screen and (max-width: 767px) {
  .b-mainContent {
    padding-top: 50px;
    &:has(.b-pageNav) {
      padding-top: 150px;
    }
  }
}
@media screen and (min-width: 768px) {
  .b-mainContent {
    padding-top: 150px;
  }
}

/* pageContent ---------*/
.b-pageContent {
  padding-bottom: 150px;
  p {
    text-align: justify;
  }
}
@media screen and (max-width: 767px) {
  .b-section {
    &:not(:last-of-type) {
      margin-bottom: 50px;
    }
  }
}
@media screen and (min-width: 768px) {
  .b-section {
    &:not(:last-of-type) {
      margin-bottom: 150px;
    }
  }
}

/* dotsList ---------*/
.b-dotsList {
  dt {
    font-size: min(6.5vw,26px);
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 20px;
  }
  dd {
    text-indent: -1.4em;
    padding-left: 1.4em;
    &::before {
      content: "";
      display: inline-block;
      aspect-ratio: 1/1;
      width: .9em;
      margin-right: .3em;
      border-radius: 50%;
      background: var(--blue);
      transform: translateY(.13em);
    }
    &+dd {
      margin-top: 10px;
    }
  }
}
/* table ---------*/
.b-table {
  table {
    width: 100%;
  }
  th,td {
    text-align: left;
    vertical-align: top;
    padding: 20px 10px;
    a {
      text-decoration: underline;
      color: var(--blue);
    }
  }
  th {
    border-bottom: 1px solid var(--blue);
    font-size: min(3.5vw,14px);
    font-weight: 500;
  }
  td {
    border-bottom: 1px solid var(--line-t);
    padding-right: 0;
  }
}
@media screen and (max-width: 767px) {
  .b-table {
    th {
      width: 140px;
    }
  }
}
@media screen and (min-width: 768px) {
  .b-table {
    th {
      width: 150px;
    }
  }
}

/* parts
----------------------------------------------------*/

a.e-googleMap {
  display: inline-block;
  color: var(--blue);
  text-decoration: none !important;
  line-height: 1.5;
  font-size: min(3.75vw,15px);
  font-weight: 500;
  &::before {
    content: "";
    display: inline-block;
    aspect-ratio: 12/15;
    width: min(3vw,12px);
    background: url(../images/icon-pin.svg) center center / contain no-repeat;
    margin-right: .6em;
    transform: translateY(.1em);
  }
}
@media screen and (min-width: 768px) {
  a.e-googleMap {
    &:hover {
      text-decoration: underline !important;
    }
  }
}

/**/
.b-sign {
  text-align: right;
  line-height: 1.6;
  margin-top: 40px;
  dd {
    font-size: min(5vw,20px);
  }
}

/* contactContent
----------------------------------------------------*/
.b-contactContent {
  .e-contactListLead {
    font-size: inherit;
    font-weight: inherit;
  }
  .e-contactLead {
    border: 1px solid var(--line-t);
    text-align: center;
    padding: .8em 1em;
    margin: auto;
    max-width: 960px;
    span {
      display: inline-block;
    }
  }
  .b-contactList {
    .b-btn {
      justify-content: flex-start;
      max-width: unset;
      height: auto;
      min-height: 100px;
      padding: 15px 30px;
      font-size: min(5.5vw,22px);
      font-weight: 400;
      filter: drop-shadow(0 3px 4px rgb(0 0 0 / .1));
      .e-txt {
        padding-right: min(12.5vw,50px) !important;
      }
      .b-mark {
        width: min(12.5vw,50px) !important;
        &>span {
          span {
            width: 18% !important;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .b-contactContent {
    .b-contactList {
      .b-btn {
        margin-top: 30px;
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .b-contactContent {
    .b-contactList {
      .b-btn {
        margin-top: 50px;
      }
    }
  }
}

.b-contactContent {
  .b-telSection {
    border: 1px solid var(--line-t);
    margin: 50px auto 0;
    max-width: 960px;
  }
  .b-telGroup {
    line-height: 1.35;
    .inner {
      display: inline-block;
      text-align: left;
    }
    dt {
      font-size: min(5vw,20px);
      span {
        display: inline-block;
        border: 1px solid var(--key);
        font-size: min(4vw,16px);
        font-weight: 500;
        padding: .2em .7em .3em;
        margin-bottom: .6em;
      }
    }
    .e-name,.e-num {
      font-family: var(--fontNum);
      font-weight: 600;
    }
    .e-name {
      display: inline-block;
      padding-right: .3em;
    }
    .e-jp {
      font-size: min(3.5vw,14px);
    }
    .b-tel {
      padding-top: .75em;
    }
    .b-fax {
      margin-top: .8em;
      margin-bottom: .5em;
    }
  }
}
@media screen and (max-width: 767px) {
  .b-contactContent {
    .b-telSection {
      padding: 50px 20px;
      .b-telGroup {
        .e-name {
          font-size: min(4.5vw,18px);
        }
        .e-num {
          font-size: min(8vw,32px);
        }
        .b-fax {
          .e-num {
            font-size: min(5.5vw,22px);
          }
        }
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .b-contactContent {
    .b-telSection {
      .b-telGroup {
        .e-name {
          font-size: 22px;
        }
        .e-num {
          font-size: 32px;
        }
        .b-fax {
          .e-num {
            font-size: 22px;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 900px) {
  .b-contactContent {
    .b-telSection {
      .b-telGroup {
        &.m-02 {
          margin-top: 30px;
          padding-top: 30px;
          border-top: 1px solid var(--line-t);
        }
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 900px) {
  .b-contactContent {
    .b-telSection {
      padding: 30px 50px;
    }
  }
}
@media screen and (min-width: 901px) {
  .b-contactContent {
    .b-telSection {
      display: flex;
      justify-content: space-around;
      padding: 30px 0;
      .b-telGroup {
        flex-grow: 1;
        padding: 0 40px !important;
        &.m-02 {
          border-left: 1px solid var(--line-t);
        }
      }
    }
  }
}

/* 404
----------------------------------------------------*/
.b-404 {
  text-align: center;
  .b-en {
    font-weight: 300;
    span {
      display: block;
      &.e-ttl {
        font-family: var(--fontNum2);
        font-size: min(50vw,200px);
        line-height: 1;
      }
      &.e-sub {
        font-family: var(--fontEN);
        font-size: min(7.5vw,30px);
        line-height: 1.5;
      }
    }
  }
  .e-lead {
    text-align: center;
    margin-top: 50px;
  }
  .b-btns {
    margin-top: 50px;
    .b-btn {
      margin: 0 auto;
    }
  }
}
@media screen and (min-width: 768px) {
  .b-404 {
    .b-btns {
      margin-top: 100px;
    }
  }
}

/* businessKey
----------------------------------------------------*/
.b-businessKey {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  .b-businessKeyItem {
    display: flex;
    flex-direction: column-reverse;
    .b-txts {
      background: #000;
      color: #fff;
      font-weight: 300;
      text-align: center;
      .e-mds {
        font-size: min(5.5vw,22px);
        margin-bottom: 0;
        text-align: center;
      }
      .e-lead {
        text-align: center;
      }
    }
  }
  .b-links {
    display: flex;
    overflow: hidden;
    .b-item {
      overflow: hidden;
      position: relative;
      .e-icon {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 2;
        transform: translate(-50%,-50%);
      }
      &::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: rgb(0 0 0 / .4);
        position: absolute;
        z-index: 1;
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .b-businessKey {
    .b-businessKeyItem {
      .b-links {
        .b-item {
          .e-icon {
            width: min(20vw,80px);
          }
        }
      }
      .b-txts {
        padding: 20px 20px 23px;
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .b-businessKey {
    .b-businessKeyItem {
      width: calc( (100% - 1px) / 2 );
      .b-links {
        .b-item {
          .e-icon {
            width: 100px;
          }
        }
      }
      .b-txts {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 102px;
      }
      .e-img {
        transition: var(--transition);
        transform-origin: center center;
      }
    }
  }
  a:hover {
    .e-img {
      transform: scale(1.05);
    }
  }
}

/* modal
----------------------------------------------------*/

.b-modal {
  &:not(.active) {
    pointer-events: none;
    opacity: 0;
  }
  transition: var(--transition);
  position: fixed !important;
  left: 0;
  top: -5dvh;
  z-index: 1000;
  width: 100dvw;
  height: 110dvh;
  backdrop-filter: blur(5px);
  background: rgb(255 255 255 / .5);
  .b-modalInner {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .b-modalContent {
    width: min(calc( 100dvw - 50px),1000px);
    height: calc( 100dvh - 50px);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    .inner {
      position: relative;
      height: 100%;
      max-height: calc( 100dvh - 50px);
      .e-close {
        position: absolute;
        right: 16px;
        top: 14px;
        color: var(--txt-p);
        font-size: 26px;
        font-weight: 500;
        line-height: 1;
        transition: var(--transition);
      }
    }
  }
}

/* slick */
.b-modal {
  .slick-track {
    padding-bottom: min( calc(12.5vw + 30px),80px);
  }
  .slick-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 1;
    font-size: 0;
    aspect-ratio: 1/1;
    width: min(12.5vw,50px);
    background: #fff;
    border-radius: var(--r);
    bottom: 30px;
    &::before {
      content: "";
      display: block;
      aspect-ratio: 1/1;
      width: 18%;
      border-right: 1px solid #000;
      border-top: 1px solid #000;
      transform-origin: center center;
    }
    &.slick-next {
      right: 30px;
      &::before {
        transform: translate(-25%,0%) rotate(45deg) skew(-20deg,-20deg);
      }
    }
    &.slick-prev {
      right: min(calc(40px + 12.5vw),90px);
      &::before {
        transform: translate(25%,0%) rotate(-135deg) skew(-20deg,-20deg);
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .b-modal {
    .slick-arrow {
      transition: var(--transition);
      &:hover {
        background: var(--bg50);
      }
    }
  }
}


/* toggle
----------------------------------------------------*/
.b-toggle {
  .b-button {
    width: 100%;
    border: 1px solid var(--line-t);
    border-radius: var(--r);
    background: #fff;
    filter: var(--drop);
    padding: 12px min(10vw,40px) 15px 20px;
    padding-top: 12px;
    padding-bottom: 15px;
    margin-bottom: 30px;
    position: relative;
    .e-mds {
      font-size: min(4.5vw,18px);
      line-height: 1.5;
      font-weight: 500;
      margin-bottom: 0;
    }
    .b-mark {
      aspect-ratio: 1/1;
      width: min(2.75vw,11px);
      position: absolute;
      right: min(5vw,20px);
      top: 50%;
      .inner {
        width: 100%;
        height: 100%;
        position: relative;
        span {
          display: block;
          width: 100%;
          height: 1px;
          background: var(--blue);
          transform-origin: center center;
          transition: var(--transition);
          &:nth-child(1) {
              transform: translateY(1px) rotate(0);
          }
        }
      }
    }
  }
  .b-content {
    display: none;
    padding-bottom: 80px;
  }
  &:not(.active) {
    .b-button {
      .b-mark {
        .inner {
          span {
            &:nth-child(1) {
            transform: translateY(1px) rotate(-90deg);
            }
          }
        }
      }
    }
  }
}