@charset "utf-8";
/*------------------------------------------------*/
/*★ ページスタイル設定 ★*/
/*------------------------------------------------*/
.bg {
  background: url(../images/mv_bg.webp) no-repeat center center / cover;
  position: fixed;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100lvh;
  z-index: -1;
}
#js-ui-static-breadcrumb {
  background: var(--default-color-white);
}
#pageContent {
  position: relative;
  z-index: 1;
}
/*------------------------------------------------*/
/*★ ＝＝ headerArea ＝＝ ★*/
.mv {
  .mv__inner {
    display: grid;
    align-items: center;
    justify-items: center;
    min-height: min((600vw / 3.75), 855px);
  }
  .mv__logo {
    width: min(100%, 480px);
    .is-size-pc & {
      width: min(95%, 800px);
    }
  }
}
/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/
#mainArea {
  --section-gap-inner: var(--default-gap-64-48);
}
/*section*/
section.section {
  background: var(--section-bg-color, var(--default-color-white));
  padding: var(--section-gap-inner) 0;
  .section__inner {
    width: var(--section-inner-size-w, var(--default-width));
    margin-inline: auto;
  }
  .section-title {
    font-family: var(--default-font-family-min);
    font-size: var(--default-font-size-heading1);
    color: var(--section-title-font-color, inherit);
    text-align: center;
    margin-bottom: var(--section-title-margin-bottom, 0);
    .base-title__sub-text {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--default-font-size-16);
      &::before,
      &::after {
        content: '～';
      }
    }
  }
  .section-lead {
    font-size: var(--default-font-size-paragraph-big);
    color: var(--section-lead-font-color, inherit);
    text-align: center;
    margin-bottom: var(--section-lead-margin-bottom, 0);
  }
}
/*information*/
#information {
  --section-bg-color: #f7f5f0;
  --section-title-margin-bottom: var(--default-gap-24-20);
  --section-lead-margin-bottom: var(--default-gap-24-20);
  .section-title {
    .base-title__inner {
      padding-bottom: var(--default-gap-16);
      position: relative;
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        translate: -50% 0;
        width: 200px;
        height: 1px;
        background: var(--default-color-primary);
      }
    }
  }
  .information-image {
    width: min(100%, 400px);
    margin-inline: auto;
  }
  .information-lead {
    font-size: var(--default-font-size-heading3);
    font-weight: var(--default-font-weight-bold);
    color: var(--default-color-primary);
    text-align: center;
    margin-top: var(--default-gap-40-32);
  }
}
/*reason*/
#reason {
  --section-bg-color: #ede9df;
  --section-title-margin-bottom: var(--default-gap-40-32);
  .reason-lineup {
    display: flex;
    flex-wrap: wrap;
    gap: var(--default-gap-24);
    justify-content: center;
  }
  .reason-lineup__item {
    width: min(100%, 463px);
    padding: var(--default-gap-24);
    background: var(--default-color-white);
    border: 1px solid var(--default-color-primary);
    text-align: center;
  }
  .reason-lineup__item--title {
    font-family: var(--default-font-family-min);
    font-size: var(--default-font-size-heading2);
    margin-bottom: var(--default-gap-16);
    &.is-icon-inspection {
      --reason-lineup-item-title-before-content: '\f565';
    }
    &.is-icon-support {
      --reason-lineup-item-title-before-content: '\ea70';
    }
    .base-title__inner {
      --base-title-inner-gap: var(--default-gap-8);
      &::before {
        content: var(--reason-lineup-item-title-before-content, '');
        font-family: var(--default-icon-ff);
        color: var(--default-color-primary);
        font-size: 1.5em;
        line-height: 1;
        font-weight: var(--default-font-weight-normal);
      }
    }
  }
}
/*airline*/
#airline {
  --section-bg-color: var(--default-color-secondary);
  --section-title-font-color: var(--default-color-white);
  --section-lead-font-color: var(--default-color-white);
  --section-title-margin-bottom: var(--default-gap-16);
  --section-lead-margin-bottom: var(--default-gap-40-32);
  .airline-lineup {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
    gap: var(--default-gap-24);
  }
  .airline-lineup__item {
    background: var(--default-color-white);
    display: grid;
    grid-template-rows: repeat(2, auto) 1fr;
  }
  .airline-lineup__item--image {
    order: -1;
  }
  .airline-lineup__item--texts {
    padding: var(--default-gap-16);
    display: grid;
    gap: var(--default-gap-16);
  }
  .airline-lineup__item--title {
    --base-title-inner-gap: var(--default-gap-8);
    font-weight: var(--default-font-weight-bold);
    text-align: center;
    .base-title__main-text {
      font-size: var(--default-font-size-heading3);
    }
  }
  .airline-lineup__item--point {
    background: color-mix(in srgb, var(--default-color-primary) 10%, transparent);
    padding: var(--default-gap-16);
  }
  .airline-lineup__item--point--title {
    font-size: var(--default-font-size-paragraph-big);
    font-weight: var(--default-font-weight-bold);
    color: var(--default-color-primary);
    line-height: var(--default-font-lh-180);
    margin-bottom: var(--default-gap-8);
    .base-title__inner {
      grid-auto-flow: column;
      align-items: center;
      justify-content: start;
      --base-title-inner-gap: var(--default-gap-4);
      &::before {
        content: '\e838';
        font-family: var(--default-icon-ff);
        font-size: 1.5em;
        line-height: 1;
        font-weight: var(--default-font-weight-normal);
        font-variation-settings: var(--default-icon-variation-settings-fill-1);
      }
    }
  }
  .airline-lineup__item--button {
    padding: 0 var(--default-gap-16) var(--default-gap-24);
    align-self: end;
  }
}
/*product*/
#product {
  --section-bg-color: #f7f5f0;
  --section-title-margin-bottom: var(--default-gap-64-48);
  .section__inner {
    container-type: inline-size;
  }
  .portal-navi-item-lineup {
    width: fit-content;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    --portal-navi-item-lineup-gap: min((8vw / 3.75), 16px);
    gap: var(--portal-navi-item-lineup-gap);
    margin-bottom: var(--default-gap-64-48);
    .is-size-sp & {
      --portal-navi-item-lineup-item-width: calc((100cqw - (var(--portal-navi-item-lineup-gap) * 2)) / 3);
    }
    .is-size-pc & {
      --portal-navi-item-lineup-item-width: min(calc((100cqw - (var(--portal-navi-item-lineup-gap) * 2)) / 3), 264px);
    }
    .portal-navi-item-lineup__item {
      width: var(--portal-navi-item-lineup-item-width);
    }
    .portal-navi-item-lineup__item--inner {
      display: block;
      padding: var(--default-gap-16) var(--default-gap-8);
      border-radius: var(--default-radius-8);
      font-size: var(--default-font-size-paragraph-big);
      font-weight: var(--default-font-weight-bold);
      text-align: center;
      color: var(--portal-navi-item-lineup-item-font-color, inherit);
      background: var(--portal-navi-item-lineup-item-bg, var(--default-color-dummy));
      &.is-active {
        --portal-navi-item-lineup-item-bg: var(--default-color-primary);
        --portal-navi-item-lineup-item-font-color: var(--default-color-white);
      }
    }
  }
  .product-block-title {
    font-size: var(--default-font-size-heading3);
    font-weight: var(--default-font-weight-bold);
    margin-bottom: var(--default-gap-24-20);
    .base-title__inner {
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      --base-title-inner-gap: var(--default-gap-24);
      &::before,
      &::after {
        content: '';
        width: min(100%, 200px);
        height: 1px;
        background: currentColor;
      }
      &::before {
        justify-self: end;
      }
      &::after {
        justify-self: start;
      }
    }
  }
  .product-block {
    &:not(:first-child) {
      margin-top: var(--default-gap-64-48);
    }
    .product__list {
      --product-list-gap: var(--default-gap-16);
    }
  }
  .product-block-buttons {
    margin-top: var(--default-gap-24-20);
  }
  .product-none {
    font-size: var(--default-font-size-paragraph-big);
    font-weight: var(--default-font-weight-bold);
    text-align: center;
  }
}
/*------------------------------------------------*/
/*★ ＝＝ footerArea ＝＝ ★*/
#footerArea {
  --section-gap-inner: var(--default-gap-40-32);
  /*search*/
  #search {
    font-family: var(--default-font-family-noto);
    font-weight: var(--default-font-weight-normal);
    padding-block: var(--default-gap-container-gap);
    .section {
      padding: 0;
    }
    @media (width <= 740px) {
      background: var(--default-color-white);
      padding-block: var(--section-gap-inner);
    }
  }
}
/*banner*/
#banner {
  --section-inner-size-w: min(var(--default-width-sp), 904px);
  padding-block: var(--default-gap-40-32);
  &:not(:has(#reco-banner)) {
    display: none;
    @media (width <= 740px) {
      + #search {
        padding-top: 0;
      }
    }
  }
  #reco-banner {
    --col-num: 2;
    --gap: min((20vw / 3.75), 24px);
    .reco-banner__list {
      display: grid;
      grid-template-columns: repeat(auto-fit, calc((100% - var(--gap) * (var(--col-num) - 1)) / var(--col-num)));
      justify-content: center;
      gap: var(--gap);
      width: 100%;
      margin: auto;
      .is-size-pc & {
        --col-num: 4;
      }
      .is-size-sp & {
        max-width: 476px;
      }
      .reco-banner__link,
      .reco-banner__image {
        display: block;
      }
      .reco-banner__image {
        object-fit: contain;
      }
    }
  }
}
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover: hover) and (pointer: fine) {
  .portal-navi-item-lineup__item--inner {
    transition: var(--default-transition-background), var(--default-transition-color);
    &:hover {
      --portal-navi-item-lineup-item-bg: var(--default-color-primary);
      --portal-navi-item-lineup-item-font-color: var(--default-color-white);
    }
  }
  .product__list--inner,
  .reco-banner__link {
    transition: var(--default-transition-opacity);
    &:hover {
      opacity: var(--default-hover-opacity);
    }
  }
}