@charset "UTF-8";
/* sub.css
----------------------------------------------------------------- */
@layer components {
  /* 下層ページ共通スタイル */
  .subHeading, .subHeading--fontSmall {
    text-align: center;
    font-size: clamp(40px, 8.59375vw, 66px);
    line-height: 1;
    font-weight: 500;
    color: var(--primary-color);
  }
  .subHeading--fontSmall {
    font-size: clamp(40px, 7.8125vw, 60px);
  }
  /* メインビュー */
  .subMv {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 650px;
    aspect-ratio: 1280/650;
  }
  @media screen and (max-width: 768px) {
    .subMv {
      min-height: auto;
      aspect-ratio: 378/193;
    }
  }
  .subMv.is-concept {
    background: url("../img/sub/concept_mv.jpg") center/cover no-repeat;
  }
  @media screen and (max-width: 768px) {
    .subMv.is-concept {
      background: url("../img/sub/concept_mv_sp.jpg") center/cover no-repeat;
    }
  }
  .subMv.is-service {
    background: url("../img/sub/service_mv.jpg") center/cover no-repeat;
  }
  @media screen and (max-width: 768px) {
    .subMv.is-service {
      background: url("../img/sub/service_mv_sp.jpg") center/cover no-repeat;
    }
  }
  .subMv.is-service .subMv__heading {
    padding-bottom: 2rem;
  }
  @media screen and (max-width: 768px) {
    .subMv.is-service .subMv__heading {
      padding-bottom: 0;
    }
  }
  .subMv.is-bland {
    background: url("../img/sub/bland_mv.jpg") center/cover no-repeat;
  }
  @media screen and (max-width: 768px) {
    .subMv.is-bland {
      background: url("../img/sub/bland_mv_sp.jpg") center/cover no-repeat;
    }
  }
  .subMv__heading {
    text-align: center;
    font-size: clamp(42px, 7.421875vw, 57px);
    line-height: 1;
    font-weight: 300;
    color: #fff;
    padding-bottom: 3rem;
  }
  @media screen and (max-width: 768px) {
    .subMv__heading {
      padding-bottom: 0;
    }
  }
  @media screen and (min-width: 1280px) {
    .subMv__heading {
      font-size: max(57px, 4.453125vw);
    }
  }
  /* ブランドセクション */
  .secBland {
    padding-top: 6em;
  }
  @media screen and (max-width: 768px) {
    .secBland {
      padding-top: 5em;
    }
  }
  .secBland--pTopLarge {
    padding-top: 11em;
  }
  @media screen and (max-width: 768px) {
    .secBland--pTopLarge {
      padding-top: 4em;
    }
  }
  .secBland__inner {
    max-width: 810px;
    width: 77.2%;
    margin-inline: auto;
  }
  .secBland__heading {
    text-align: center;
    border: 1px solid var(--primary-color);
    max-width: 471px;
    width: 100%;
    margin-inline: auto;
    font-size: clamp(16px, 2.3148148148vw, 25px);
    line-height: 1;
    font-weight: bold;
    color: #1A1311;
    padding-block: 25px;
    padding-inline: 1em;
  }
  @media screen and (max-width: 768px) {
    .secBland__heading {
      padding-block: 15px;
    }
  }
  .secBland__catch {
    text-align: center;
    font-size: clamp(30px, 6.1197916667vw, 47px);
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 500;
    color: var(--secondary-color);
    padding-top: 2rem;
  }
  @media screen and (max-width: 768px) {
    .secBland__catch {
      padding-top: 1.5rem;
    }
  }
  .secBland__btnBox {
    display: flex;
    justify-content: center;
    padding-top: 1em;
  }
  @media screen and (max-width: 768px) {
    .secBland__btnBox {
      padding-top: 0.5em;
    }
  }
  .secBland__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 4em 0;
    margin-top: 3em;
  }
  @media screen and (max-width: 768px) {
    .secBland__cols {
      grid-template-columns: 1fr 1fr;
      gap: 3em 0;
      margin-top: 2em;
    }
  }
  .secBland__link {
    display: block;
    width: 100%;
  }
  .secBland__logo {
    width: 100%;
    margin-inline: auto;
  }
  .secBland__logo.cassina {
    max-width: clamp(94px, 19.7916666667vw, 152px);
  }
  .secBland__logo.b_b_italia {
    max-width: clamp(66px, 13.9322916667vw, 107px);
  }
  .secBland__logo.minotti {
    max-width: clamp(102px, 21.6145833333vw, 166px);
  }
  .secBland__logo.boconcept {
    max-width: clamp(109px, 22.7864583333vw, 175px);
  }
  .secBland__logo.molteni_c {
    max-width: clamp(142px, 29.9479166667vw, 230px);
  }
  .secBland__logo.arflex {
    max-width: clamp(75px, 15.7552083333vw, 121px);
  }
  .secBland__text {
    text-align: center;
    font-size: clamp(20px, 4.0364583333vw, 31px);
    line-height: 1;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--tertiary-color);
    margin-top: 3rem;
  }
  @media screen and (max-width: 768px) {
    .secBland__text {
      margin-top: 1.5rem;
    }
  }
}
@layer pages {
  /* コンセプトページ */
  .concept {
    padding-bottom: 5em;
  }
  @media screen and (max-width: 768px) {
    .concept {
      padding-bottom: 4em;
    }
  }
  .concept__details {
    max-width: 670px;
    width: 77.2%;
    margin-inline: auto;
  }
  .concept__detailsHead {
    padding-top: 6em;
  }
  @media screen and (max-width: 768px) {
    .concept__detailsHead {
      padding-top: 2em;
    }
  }
  .concept__heading {
    text-align: center;
    font-size: 59px;
    line-height: 1;
    letter-spacing: 0;
    font-weight: bold;
    color: var(--primary-color);
  }
  @media screen and (max-width: 768px) {
    .concept__heading {
      text-align: left;
      max-width: 243px;
      width: 100%;
      margin-inline: auto;
      font-size: 41px;
    }
  }
  .concept__heading > span {
    display: block;
  }
  .concept__heading > span:first-child {
    font-size: 0.75em;
    font-weight: 300;
    letter-spacing: 0.1em;
  }
  @media screen and (max-width: 768px) {
    .concept__heading > span:first-child {
      line-height: 1.1;
    }
  }
  .concept__heading > span:last-child {
    margin-top: 1rem;
  }
  @media screen and (max-width: 768px) {
    .concept__heading > span:last-child {
      margin-top: 0.2rem;
      line-height: 1.05;
    }
  }
  .concept__catch {
    width: 96.6%;
    margin-inline: auto;
    font-size: clamp(22px, 3.90625vw, 30px);
    line-height: 1.67;
    letter-spacing: 0.15em;
    font-weight: bold;
    color: var(--primary-color);
    padding-top: 2rem;
  }
  @media screen and (max-width: 768px) {
    .concept__catch {
      width: 95%;
      line-height: 1.4;
    }
  }
  .concept__detailsBody {
    padding-top: 3em;
  }
  @media screen and (max-width: 768px) {
    .concept__detailsBody {
      padding-top: 2em;
    }
  }
  .concept__img {
    width: 100%;
  }
  .concept__text {
    font-size: clamp(14px, 2.8645833333vw, 22px);
    line-height: 2.27;
    letter-spacing: 0.2em;
    padding-top: 3rem;
  }
  @media screen and (max-width: 768px) {
    .concept__text {
      line-height: 1.79;
      padding-top: 2rem;
    }
  }
  .concept__btnBox {
    display: flex;
    justify-content: center;
    padding-top: 2em;
  }
  @media screen and (max-width: 768px) {
    .concept__btnBox {
      padding-top: 1.5em;
    }
  }
  /* サービスページ */
  .service {
    padding-bottom: 9em;
  }
  @media screen and (max-width: 768px) {
    .service {
      padding-bottom: 4em;
    }
  }
  .service__flow {
    padding-top: 6em;
  }
  @media screen and (max-width: 768px) {
    .service__flow {
      padding-top: 3em;
    }
  }
  .service__inner {
    max-width: 699px;
    width: 77.2%;
    margin-inline: auto;
  }
  .service__headingWrap {
    text-align: center;
  }
  .service__heading {
    position: relative;
    display: inline-block;
    font-size: clamp(22px, 5.078125vw, 39px);
    line-height: 1;
    letter-spacing: 0.199em;
    font-weight: bold;
    color: var(--primary-color);
    padding-inline: clamp(39px, 7.421875vw, 57px);
  }
  .service__heading::after, .service__heading::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: clamp(18px, 5.3385416667vw, 41px);
    background: var(--primary-border);
  }
  .service__heading::after {
    left: 0;
  }
  .service__heading::before {
    right: 0;
  }
  .service__flowList {
    margin-top: 7em;
    display: grid;
    grid-template-columns: 1fr;
    gap: 44.5px;
  }
  @media screen and (max-width: 768px) {
    .service__flowList {
      margin-top: 2em;
      gap: 32px;
    }
  }
  .service__flowItem {
    position: relative;
    background: #E6E6E6;
    display: flex;
    align-items: center;
    padding-inline: 18.2px;
    padding-block: 12px;
  }
  @media screen and (max-width: 768px) {
    .service__flowItem {
      padding-inline: 13.1px;
      padding-block: 7.5px;
    }
  }
  .service__flowItem::after {
    content: "";
    position: absolute;
    bottom: -26px;
    left: 29px;
    width: 20px;
    aspect-ratio: 1/1;
    display: inline-block;
    background: url("../img/common/icon_arrow_navy.svg") center/contain no-repeat;
    transform: rotate(90deg);
  }
  @media screen and (max-width: 768px) {
    .service__flowItem::after {
      bottom: -19px;
      left: 21px;
      width: 15px;
    }
  }
  .service__flowItem:last-child::after {
    display: none;
  }
  .service__flowCount {
    display: flex;
    align-items: center;
    gap: clamp(7px, 1.953125vw, 15px);
    font-size: clamp(20px, 3.2552083333vw, 25px);
    line-height: 1;
    font-weight: 500;
    color: var(--primary-color);
  }
  .service__flowCount > span:nth-child(1) {
    font-size: 0.84em;
    line-height: 1.05;
  }
  .service__flowTitle {
    font-size: clamp(16px, 2.8645833333vw, 22px);
    line-height: 1;
    letter-spacing: 0.18em;
    font-weight: bold;
    color: var(--primary-color);
    margin-left: clamp(29px, 5.3385416667vw, 41px);
  }
  .service__flowSub, .service__flowSub--mLeftLarge {
    font-size: clamp(12px, 2.0833333333vw, 16px);
    line-height: 1.1;
    color: var(--primary-color);
    margin-left: 16px;
  }
  @media screen and (max-width: 768px) {
    .service__flowSub, .service__flowSub--mLeftLarge {
      position: absolute;
      bottom: -17px;
      left: 88px;
      margin-left: 0;
    }
  }
  .service__flowSub--mLeftLarge {
    margin-left: 27px;
  }
  @media screen and (max-width: 768px) {
    .service__flowSub--mLeftLarge {
      left: 94px;
      margin-left: 0;
    }
  }
  @media screen and (max-width: 400px) {
    .service__flowSub--mLeftLarge {
      bottom: -33px;
    }
  }
  .service__price {
    padding-top: 4em;
  }
  .service__serviceCatch {
    max-width: 406px;
    width: 100%;
    margin-inline: auto;
    text-align: center;
    background: #101932;
    padding-block: 16px 20px;
  }
  @media screen and (max-width: 768px) {
    .service__serviceCatch {
      padding-block: 10px 14px;
    }
  }
  .service__serviceText {
    font-size: clamp(25px, 4.0364583333vw, 31px);
    line-height: 1.06451613;
    letter-spacing: 0.4em;
    font-weight: normal;
    color: #fff;
  }
  .service__serviceText > span:nth-child(2) {
    display: inline-block;
    font-family: var(--en);
    font-size: 1.39em;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    margin-right: 0.2em;
    transform: translateY(2px);
  }
  .service__arrow {
    width: 30px;
    aspect-ratio: 1/1;
    margin-inline: auto;
    background: url("../img/common/icon_arrow_navy.svg") center/contain no-repeat;
    transform: rotate(90deg);
    margin-top: 3em;
  }
  @media screen and (max-width: 768px) {
    .service__arrow {
      width: 20px;
    }
  }
  .service__priceHeading {
    text-align: center;
    font-size: clamp(34px, 5.7291666667vw, 44px);
    line-height: 1;
    font-weight: 600;
    color: #101932;
    margin-top: 2rem;
  }
  .service__priceBox {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em 44px;
    margin-top: 2em;
  }
  @media screen and (max-width: 768px) {
    .service__priceBox {
      flex-direction: column;
    }
  }
  .service__period {
    border-radius: 50%;
    border: 1px solid #101932;
    width: clamp(79px, 14.375vw, 110.4px);
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(46px, 8.203125vw, 63px);
    line-height: 1.19;
    font-weight: 600;
    color: #101932;
  }
  .service__period > span:nth-child(2) {
    font-size: 0.413em;
    font-weight: normal;
    transform: translateY(5px);
  }
  .service__priceAmount {
    display: flex;
    align-items: center;
    font-size: clamp(42px, 9.6354166667vw, 74px);
    line-height: 1.2;
    font-weight: 600;
    color: #101932;
  }
  .service__priceWrap {
    display: flex;
    flex-direction: column;
  }
  .service__priceWrap > span:nth-child(1) {
    font-size: 0.488em;
    font-weight: normal;
    line-height: 1;
    margin-left: 0.3em;
  }
  .service__priceWrap > span:nth-child(2) {
    font-size: 0.232em;
    line-height: 1;
    font-weight: normal;
  }
  /* ブランドページ */
  .bland {
    padding-bottom: 6em;
  }
  @media screen and (max-width: 768px) {
    .bland {
      padding-bottom: 5em;
    }
  }
  .bland__sec {
    padding-top: 4em;
  }
  @media screen and (max-width: 768px) {
    .bland__sec {
      padding-top: 3em;
    }
  }
  .bland__inner {
    max-width: 1184px;
    width: 92.5%;
    margin-inline: auto;
  }
  @media screen and (max-width: 768px) {
    .bland__inner {
      width: 100%;
    }
  }
  .bland__heading {
    text-align: center;
    font-size: clamp(28px, 6.9444444444vw, 75px);
    line-height: 1;
    letter-spacing: 0.06em;
    font-weight: bold;
    color: var(--primary-color);
  }
  .bland__heading > span {
    display: block;
  }
  .bland__heading > span:nth-child(2) {
    font-size: 0.96em;
    letter-spacing: 0;
    margin-top: -0.5rem;
  }
  @media screen and (max-width: 768px) {
    .bland__heading > span:nth-child(2) {
      margin-top: -0.2rem;
    }
  }
  .bland__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 7em 1.5em;
    padding-top: 6em;
  }
  @media screen and (max-width: 768px) {
    .bland__list {
      gap: 6em 1.5em;
      padding-top: 4em;
    }
  }
  .bland__logo {
    display: flex;
    width: 100%;
    min-height: 90px;
    margin-inline: auto;
  }
  @media screen and (max-width: 768px) {
    .bland__logo {
      min-height: auto;
    }
  }
  .bland__logo.cassina {
    max-width: 133px;
  }
  .bland__logo.b_b_italia {
    max-width: 111px;
  }
  @media screen and (max-width: 768px) {
    .bland__logo.b_b_italia {
      margin-bottom: 2em;
    }
  }
  .bland__logo.minotti {
    max-width: 182px;
  }
  @media screen and (max-width: 768px) {
    .bland__logo.minotti {
      margin-bottom: 1.5em;
    }
  }
  .bland__logo.arflex {
    max-width: 151px;
  }
  @media screen and (max-width: 768px) {
    .bland__logo.arflex {
      margin-bottom: 1.5em;
    }
  }
  .bland__logo.molteni_c {
    max-width: 224px;
  }
  @media screen and (max-width: 768px) {
    .bland__logo.molteni_c {
      margin-bottom: 1.5em;
    }
  }
  .bland__logo.boconcept {
    max-width: 207px;
  }
  @media screen and (max-width: 768px) {
    .bland__logo.boconcept {
      margin-bottom: 2em;
    }
  }
  .bland__img, .bland__img--border {
    width: 100%;
    margin-top: 0.5em;
  }
  @media screen and (max-width: 768px) {
    .bland__img, .bland__img--border {
      margin-top: 0;
    }
  }
  .bland__img--border {
    border: 1px solid var(--primary-color);
  }
  @media screen and (max-width: 768px) {
    .bland__img--border {
      border: none;
    }
  }
  .bland__text {
    font-size: clamp(12px, 2.0833333333vw, 16px);
    line-height: 1.875;
    letter-spacing: 0.1em;
    color: var(--secondary-color);
    margin-top: 1rem;
  }
  @media screen and (max-width: 768px) {
    .bland__text {
      width: 77.5%;
      line-height: 1.67;
      letter-spacing: -0.02em;
      margin-inline: auto;
      margin-top: 1.5rem;
    }
  }
  .bland__btnBox {
    display: flex;
    justify-content: center;
    margin-top: 2em;
  }
  @media screen and (max-width: 768px) {
    .bland__btnBox {
      margin-top: 1em;
    }
  }
  /* お問い合わせページ */
  .contact {
    padding-block: 3em 16em;
  }
  @media screen and (max-width: 768px) {
    .contact {
      padding-block: 0.5em 2em;
    }
  }
  .contact__inner {
    max-width: 442px;
    width: 79.4%;
    margin-inline: auto;
  }
  .contact__fieldBox {
    display: flex;
    flex-direction: column;
    gap: 2em;
    margin-top: 5em;
  }
  @media screen and (max-width: 768px) {
    .contact__fieldBox {
      gap: 1.5em;
      margin-top: 2em;
    }
  }
  .contact__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6em;
  }
  .contact__group .wpcf7-form-control-wrap {
    width: 100%;
    gap: 0.5em;
  }
  .contact__label {
    font-size: clamp(14px, 2.8645833333vw, 22px);
    line-height: 1;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--secondary-color);
  }
  input[type=text],
  input[type=email],
  input[type=tel],
  textarea {
    width: 100%;
    border: 1px solid var(--secondary-color);
    font-size: clamp(16px, 2.8645833333vw, 22px);
    line-height: 1.36;
    color: var(--secondary-color);
    padding-block: clamp(6px, 1.3020833333vw, 10px);
    padding-inline: 0.5em;
  }
  textarea {
    min-height: clamp(167px, 32.03125vw, 246px);
  }
  .contact__btnBox {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 5em;
  }
  .contact__btnBox .wpcf7-spinner {
    position: absolute !important;
    bottom: -40px;
    left: 44%;
    transform: translateX(-50%);
  }
  .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
    margin-top: 0.5em;
  }
}