@charset "utf-8";
/* 「円安」レスポンシブCSS */
/*★ リセット ★*/
.main div:not([class])::after {
  content: none;
}
.main a {
  text-decoration: none;
}
.main .is-em {
  font-weight: bold;
}
#footer, #topbuttonApp, #searchArea {
  position: relative;
  z-index: 1;
}
#footer {
  background: #fff;
  padding-top: 40px;
}
#footer .footer {
  margin-top: 0 !important;
}
.breadcrumb__inner {
  width: min(100%, 1024px);
  margin: auto;
  letter-spacing: 0 !important;
}
.is-device-pc :is(#breadcrumbArea, .breadcrumb__contents) {
  height: auto;
  min-height: 28px;
  overflow: auto;
}
.is-device-pc .breadcrumb {
  width: auto;
  margin: 0;
  overflow: hidden;
}
.goTop__link {
  display: none;
}
/*------------------------------------------------*/
/*★ ページスタイル設定 ★*/
#hisApp {
  position: relative;
  overflow: hidden;
}
:root {
  --default-max-height: 100lvh;
  --default-color-black: #000;
  --default-color-gray: #939dad;
  --default-color-red: #e90000;
  --default-color-blue: #1f2c5c;
  --default-color-blue2: #0040ea;
  --default-color-blue3: #001e7f;
  --default-color-blue4: #b3d4e8;
  --default-color-yellow: #ffcd1f;
  --default-color-yellow2: #f1be09;
  --default-font-size-pc-val: 14;
  --default-font-size-pc: 14px;
  --default-font-size-sp: calc(24vw / 7.5);
  --default-font-size: min(var(--default-font-size-sp), var(--default-font-size-pc));
  --default-width-sp-val: 710;
  --default-width-pc-val: 992;
  --default-width-sp: (710vw / 7.5);
  --default-width-pc: 992px;
  --default-width: min(var(--default-width-sp), var(--default-width-pc));
  --default-width2: min(100%, var(--default-width-pc));
  --default-bg-width-pc: max(100%, 1920px);
  --default-bg-setting: no-repeat center center / cover;
  --default-ff-icon: "Material Symbols Rounded";
  --default-icon-arw-r: "\e5e1";
  --default-icon-blank: "\e89e";
  --default-hover-speed: .3s;
  --default-hover-opacity: .6;
  --default-hover-transition: opacity var(--default-hover-speed);
  --default-hover-transition2: background var(--default-hover-speed);
  --default-hover-transition3: color var(--default-hover-speed);
  --default-hover-transition4: transform var(--default-hover-speed);
}
.is-pc .js-accordion-button-pc, .is-sp .js-accordion-button-sp, .js-toggleControl:not([class*="active"]) {
  cursor: pointer;
}
:is(.is-pc .js-accordion-button-pc, .is-sp .js-accordion-button-sp) + * {
  display: none;
}
.main {
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--default-font-size);
  color: var(--default-color-black);
  line-height: calc(34 / var(--default-font-size-sp-val));
  padding-bottom: 0 !important;
  background: #f3f3f3;
}
.is-pc .is-dsp-sp, .is-sp .is-dsp-pc {
  display: none !important;
}
.is-font-small, .is-sp .is-font-small-sp, .is-pc .is-font-small-pc {
  font-size: .8em;
}
.is-font-big {
  font-size: 1.5em;
  line-height: 1;
}
.is-inline-block {
  display: inline-block;
}
.is-indent-1, .section [class*="notes--item"] {
  text-indent: -1em;
  padding-left: 1em;
}
.is-pr-half {
  padding-right: .5em;
}
.toggle__contents:not([class*="--active"]) {
  display: none;
}
.js-open-trigger {
  cursor: pointer;
  position: relative;
}
.js-open-target {
  display: none;
}
.js-modal-button, .js-accordion-button {
  cursor: pointer;
}
.js-accordion-button + * {
  display: none;
}
.section__inner, .contents__wrapper {
  width: var(--default-width);
  margin: auto;
  position: relative;
}
:where([class*="__link"], [class*="--link"]) {
  color: inherit;
}
/*is-lock*/
html:has(.is-lock) {
  overflow: hidden !important;
}
.is-lock .js-modal-body {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100lvh;
  background: rgba(5, 38, 58, .7);
  opacity: .8;
}
.js-modal-button {
  cursor: pointer;
}
.js-modal-target, .js-modal-item {
  display: none;
}
/*button＋text-link*/
.base-text-link__link {
  color: var(--textlink-color, inherit);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0 .25em;
}
.base-button__link, .base-small-button__link, .base-text-link__link {
  &::after {
    content: var(--icon, var(--default-icon-arw-r));
    font-family: var(--default-ff-icon);
    line-height: .9;
  }
  &[href^="#"]::after {
    transform: rotate(90deg);
    margin-top: .25em;
  }
  &[target="_blank"]::after {
    --icon: var(--default-icon-blank);
  }
}
.base-button__wrapper, .base-button, .base-small-button {
  --btn-yohaku-ue: min((50vw / 7.5), 40px);
}
.base-button, .base-small-button {
  display: grid;
  justify-items: center;
  .is-pc & {
    --border-color: rgba(0, 0, 0, .23);
    --btn-radius: 500px;
  }
  &:not(:first-child):not(.is-mt-0) {
    margin-top: var(--btn-yohaku-ue)
  }
}
:is(.base-button__link, .base-small-button__link) {
  --btn-gap: .5em;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--btn-gap);
  align-items: center;
  color: #fff;
  font-size: min((26vw / 7.5), 16px);
  line-height: 1.2;
  font-weight: 500;
  text-align: center;
  width: 100%;
  height: 100%;
  min-height: var(--btn-h, min((80vw / 7.5), 43px));
  padding: .3em .75em .4em;
  border-radius: var(--btn, min((20vw / 7.5), 20px));
  background: var(--btn-bg, var(--default-color-blue2));
  box-shadow: 0px min((5vw / 7.5), 3px) 0px 0px var(--border-color, rgba(0, 0, 0, .5));
  .base-button__text {
    padding-left: calc(var(--btn-gap) * 2);
  }
}
.base-button__wrapper {
  display: grid;
  --btn-gap-tate-max: 28px;
  --btn-gap: min((30vw / 7.5), var(--btn-gap-tate-max));
  gap: var(--btn-gap);
  .is-pc & {
    --btn-gap: calc((12 / var(--default-width-pc-val)) * 100%);
    grid-template-columns: repeat(auto-fit, calc((100% - var(--btn-gap)) / 2));
    justify-content: center;
    grid-row-gap: var(--btn-gap-tate-max);
  }
  &:not(:first-child) {
    margin-top: var(--btn-yohaku-ue)
  }
  .base-button, .base-small-button {
    margin-top: 0 !important;
  }
}
/*base-banner*/
.banner_wrapper {
  display: grid;
  justify-items: center;
  gap: var(--gap, min((30vw / 7.5), 15px));
  width: min(var(--default-width-sp), 960px);
  margin: var(--yohaku-top, 0) auto var(--yohaku-btm, 0);
}
.is-pc .banner_wrapper {
  --gap: 11px;
  grid-template-columns: repeat(2, 1fr);
}
.is-pc .banner_wrapper .base-banner.is-column-1 {
  grid-column: span 2;
}
.is-sp .banner_wrapper .base-banner {
  max-width: 400px;
}
.product__title + .banner_wrapper {
  --yohaku-btm: min((50vw / 7.5), 25px);
}
.product__list--contents ~ .banner_wrapper {
  --yohaku-top: min((60vw / 7.5), 30px);
}
.base-banner__link {
  background: #fff;
}
/*slider*/
.is-slider-contents {
  position: relative;
  --swiper-navigation-size: min((40vw / 7.5), 25px);
  --swiper-navigation-color: #000;
  --swiper-navigation-sides-offset: -30px;
}
.swiper-accessories {
  --swiper-pagination-bottom: 0;
  --swiper-scrollbar-bottom: 0;
}
.swiper-accessories :is(.swiper-pagination, .swiper-scrollbar) {
  position: relative;
}
.swiper-accessories .swiper-scrollbar {
  margin-top: var(--swiper-pagination-yohaku-ue, min((16vw / 7.5), 14px));
}
.swiper-accessories .swiper-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--swiper-pagination-yohaku-ue, min((40vw / 7.5), 25px));
}
.swiper-accessories [class*="swiper-button-"]:not([tabindex]) {
  display: none;
}
.swiper-accessories [class*="swiper-button-"] {
  transform: var(--default-hover-transition);
}
.swiper-accessories [class*="swiper-button-"].swiper-button-disabled {
  opacity: 0;
}
.swiper-accessories [class*="swiper-button-"]::before, .swiper-accessories [class*="swiper-button-"]::after {
  font-weight: bold;
}
.slider__arrow {
  --posi: 0;
  --size: min((60vw / 7.5), 60px);
  background: var(--default-icon-arrow-right-black);
  width: var(--size);
  height: var(--size);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
  cursor: pointer;
  transition: var(--default-hover-transition);
}
.slider__arrow.is-prev {
  left: var(--posi);
  transform: rotate(180deg);
}
.slider__arrow.is-next {
  right: var(--posi);
}
/*fixed-navi*/
[class*="-navi__wrapper"].is-fixed-navi {
  width: 100%;
  position: fixed;
  top: -300px;
  left: 0;
  z-index: 100;
  transition: top .6s ease-out;
}
[class*="-navi__wrapper"].is-fixed-navi.is-fixed-active {
  top: 0;
}
/*------------------------------------------------*/
/*★ ＝＝ headerArea ＝＝ ★*/
#headerArea {
  position: relative;
}
/*portal-navi*/
.portal-navi {
  font-weight: bold;
  background: var(--default-color-blue);
  color: #fff;
  --portal-button-bg: var(--default-color-yellow);
}
.js-open-trigger {
  cursor: pointer;
}
.portal-navi__title--text {
  display: flex;
  gap: .75em;
  align-items: center;
}
.portal-navi__title--arrows {
  display: grid;
  --size: .5em;
  grid-template-columns: repeat(3, var(--size));
  gap: .25em;
}
.portal-navi__title--arrow {
  width: var(--size);
  height: var(--size);
  background: currentColor;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
.portal-navi__list--link.is-active {
  background: var(--portal-button-bg);
  color: var(--default-color-black);
}
/*発地ナビSP完全別レイアウトスタイル*/
@media(width < 980px) {
  .js-open-target {
    display: none;
  }
  .portal-navi__title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min((57vw / 7.5), 40px);
    font-size: min((32vw / 7.5), 18px);
    padding: min((26vw / 7.5), 13px);
  }
  .portal-navi__button {
    display: grid;
    justify-items: center;
    align-items: center;
    width: min((310vw / 7.5), 330px);
    height: min((64vw / 7.5), 40px);
    background: #ffe27b;
    font-size: min((30vw / 7.5), 16px);
    color: var(--default-color-black);
  }
  .portal-navi__inner {
    position: relative;
  }
  .portal-navi__list--wrapper {
    --portal-wrapper-bg: rgba(255, 255, 255, .95);
    min-width: min((455vw / 7.5), 440px);
    position: absolute;
    right: calc(50vw / 7.5);
    z-index: 250;
    background: var(--portal-wrapper-bg);
    color: var(--default-color-black);
    margin-top: max((-8vw / 7.5), -8px);
    &::before {
      --posi: calc((76 / 455) * 100%);
      content: "";
      display: block;
      width: min((54vw / 7.5), 27px);
      height: min((33vw / 7.5), 16.5px);
      background: var(--portal-wrapper-bg);
      clip-path: polygon(50% 0, 100% 100%, 0 100%);
      position: absolute;
      transform: translateY(calc(-100% + 1px));
    }
    @media (width > 740px) {
      &::before {
        left: var(--posi);
      }
    }
    @media (width <=740px) {
      &::before {
        right: var(--posi);
      }
    }
  }
  .portal-navi__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
    gap: min((14vw / 7.5), 7px) min((12vw / 7.5), 6px);
    padding: min((28vw / 7.5), 14px) min((22vw / 7.5), 11px);
    position: relative;
  }
  .portal-navi__list--item:has(.is-active) {
    display: none;
  }
  .portal-navi__list--link {
    width: 100%;
    padding: .3em .5em .4em;
    font-size: min((24vw / 7.5), 13px);
    display: flex;
    align-items: center;
    gap: .25em;
    cursor: pointer;
    &::before {
      content: var(--default-icon-arw-r);
      font-family: var(--default-ff-icon);
      line-height: .9;
      margin-top: 1px;
    }
  }
}
/*発地ナビPC完全別レイアウトスタイル*/
@media(width >=980px) {
  :is(.portal-navi__list--title, .js-open-trigger) {
    display: none;
  }
  .portal-navi__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: calc((5 / 992) * 100%);
    width: min(98%, 992px);
    margin: auto;
    font-size: 14px;
    align-items: center;
    padding: 10px 0;
  }
  .portal-navi__list {
    display: flex;
      gap: .4em;
    &:has(:nth-child(6)) {
      justify-content: space-around;
    }
  }
  .portal-navi__list--link {
    padding: .2em .8em .3em;
  }
  .portal-navi__list--wrapper {
    display: block !important;
  }
}
/*mv*/
.is-pc {
  --mv-bg: url("../images/mv_photo_pc.webp");
  --mv-bg-size: 2160px;
  --mv-logo-size: min((520vw / 9.92), 520px);
}
.mv {
  background: #0140da var(--mv-bg, url("../images/mv_photo_sp.webp")) repeat center 0 / var(--mv-bg-size, min(100%, 750px));
  text-align: center;
}
.mv, .mv__inner {
  position: relative;
  &::before, &::after {
    content: "";
    display: block;
    background: var(--mv-kazari-bg);
    width: var(--mv-kazari-w);
    height: var(--mv-kazari-h);
    position: absolute;
  }
  &::before {
    top: 0;
    left: 0;
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }
  &::after {
    bottom: 0;
    right: 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }
  &.mv__inner::before, &.mv__inner::after {
    z-index: 1;
    --mv-kazari-bg: var(--default-color-yellow);
  }
  &.mv::before {
    --mv-kazari-bg: var(--default-color-yellow2);
    --mv-kazari-w: min((112vw / 7.5), 112px);
    --mv-kazari-h: min((207vw / 7.5), 207px);
  }
  &.mv__inner::before {
    --mv-kazari-w: min((396vw / 7.5), 396px);
    --mv-kazari-h: min((56vw / 7.5), 56px);
  }
  &.mv::after {
    --mv-kazari-bg: #ffe27b;
    --mv-kazari-w: min((174vw / 7.5), 174px);
    --mv-kazari-h: min((162vw / 7.5), 162px);
  }
  &.mv__inner::after {
    --mv-kazari-w: min((472vw / 7.5), 472px);
    --mv-kazari-h: min((61vw / 7.5), 61px);
  }
  .is-pc & {
    &.mv::before {
      --mv-kazari-w: min((239vw / 19.2), 239px);
      --mv-kazari-h: min((362vw / 19.2), 362px);
    }
    &.mv__inner::before {
      --mv-kazari-w: min((838vw / 19.2), 838px);
      --mv-kazari-h: min((115vw / 19.2), 115px);
    }
    &.mv::after {
      --mv-kazari-w: min((325vw / 19.2), 325px);
      --mv-kazari-h: min((509vw / 19.2), 509px);
    }
    &.mv__inner::after {
      --mv-kazari-w: min((853vw / 19.2), 853px);
      --mv-kazari-h: min((117vw / 19.2), 117px);
    }
  }
}
.mv__logo {
  padding: min((81vw / 7.5), 58px) 0 min((73vw / 7.5), 46px);
  .base-picture__image {
    height: var(--mv-logo-size, min((449vw / 7.5), 449px));
    object-fit: contain;
  }
}
/*search-button*/
.search-button .search-button__link {
  --size: min((128vw / 7.5), 128px);
  width: var(--size);
  height: var(--size);
  position: absolute;
  margin-top: var(--posi-tate, 33px);
  right: var(--posi-yoko, 20px);
  transition: right 1s, margin .5s;
  z-index: 100;
}
.search-button.is-fixed .search-button__link {
  position: fixed;
  top: 0;
  --posi-tate: 95px;
}
:is(.is-sp .search-button, .search-button.is-over) .search-button__link {
  --posi-yoko: -300px;
}
/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/
/*section-navi*/
.section-navi__wrapper {
  background: var(--default-color-blue);
  color: #fff;
}
.section-navi__list {
  max-width: var(--default-width);
  margin: auto;
  display: flex;
  justify-content: var(--jc, center);
  gap: 1.75em;
  text-align: center;
  .is-pc & {
    --jc: space-between;
  }
}
.section-navi__link {
  cursor: pointer;
  display: grid;
  gap: .25em;
  font-size: min((22vw / 7.5), 16px);
  line-height: calc(28 / 22);
  padding: min((30vw / 7.5), 20px) 0 min((14vw / 7.5), 13px);
  .is-active & {
    color: var(--default-color-yellow);
  }
  &::after {
    content: var(--default-icon-arw-r);
    font-family: var(--default-ff-icon);
    transform: rotate(90deg);
    line-height: 1;
  }
}
/*section*/
.section {
  background: var(--sec-bg, none);
  &#product {
    --sec-bg: #f9efca;
    --sec-ttl-ico-h: min((76vw / 7.5), 76px);
  }
  &#dst {
    --sec-bg: var(--default-color-blue4);
    --sec-ttl-ico-h: min((71vw / 7.5), 71px);
  }
  &#article {
    --sec-bg: #f4da77;
    --sec-ttl-ico-h: min((75vw / 7.5), 75px);
  }
  &#advice {
    --sec-bg: #3262a8 var(--sec-bg-photo, url("../images/advice_photo_sp.webp")) no-repeat center center / cover;
    --sec-ttl-fc: #fff;
    --sec-ttl-ico-h: min((83vw / 7.5), 83px);
    .is-pc & {
      --sec-bg-photo: url("../images/advice_photo_pc.webp");
    }
  }
}
.section__inner {
  padding: min((60vw / 7.5), 110px) 0 min((120vw / 7.5), 120px);
}
.is-sp #product .section__inner {
  width: 100%;
}
/*section__title＋section__lead*/
.section__title {
  display: grid;
  justify-items: center;
  gap: min((16vw / 7.5), 16px);
  color: var(--sec-ttl-fc, inherit);
  text-align: center;
  font-weight: bold;
  font-size: min((42vw / 7.5), 36px);
  line-height: calc(52 / 42);
  margin-bottom: var(--sec-ttl-mb, min((44vw / 7.5), 50px));
  .base-title__icon {
    height: var(--sec-ttl-ico-h);
  }
  .section:has(.section__lead) & {
    --sec-ttl-mb: min((20vw / 7.5), 10px);
  }
}
.section__lead {
  color: var(--sec-ttl-fc, inherit);
  text-align: center;
  font-weight: bold;
  font-size: min((24vw / 7.5), 17px);
  margin-bottom: min((60vw / 7.5), 50px);
}
/*section__notes*/
.section__notes {
  font-size: min((20vw / 7.5), 14px);
  line-height: 1.2;
  margin-top: 1em;
}
.section__notes--title {
  margin-bottom: .25em;
}
.section__notes--list {
  display: grid;
  gap: .25em;
}
/*banner*/
#banner:not(:has(.base-banner)) {
  display: none;
}
/*#dst ＋ #article*/
.dst__list, .article__list {
  --columns-num: 2;
  --gap-yoko: calc((15 / var(--default-width-sp-val)) * 100%);
  display: grid;
  grid-template-columns: repeat(auto-fit, calc((100% - (var(--gap-yoko) * (var(--columns-num) - 1))) / var(--columns-num)));
  justify-content: center;
  gap: var(--gap-tate, min((30vw / 7.5), 15px)) var(--gap-yoko);
  width: 100%;
  .is-pc & {
    --columns-num: 3;
    --gap-yoko: calc((16 / var(--default-width-pc-val)) * 100%);
  }
}
/*--- dst__list*/
.dst__list {
  --gap-tate: min((55vw / 7.5), 50px);
  .dst__item {
    display: grid;
    gap: min((20vw / 7.5), 15px);
    grid-template-rows: subgrid;
    grid-row: span 3;
  }
  .dst__item--title {
    position: relative;
    height: 100%;
    min-height: var(--dst-photo-h, min((213vw / 9.92), 213px));
    overflow: hidden;
    &::after {
      --posi: -1px;
      content: "\e5c8";
      font-family: var(--default-ff-icon);
      width: min((80vw / 7.5), 67px);
      aspect-ratio: 1/ 1;
      background: var(--default-color-yellow);
      clip-path: polygon(100% 0, 100% 100%, 0 100%);
      position: absolute;
      bottom: var(--posi);
      right: var(--posi);
      display: grid;
      justify-items: right;
      align-items: end;
      font-size: min((38vw / 7.5), 30px);
      line-height: .9;
      font-weight: 500;
      padding: .17em .1em;
    }
  }
  .dst__item--title--bg {
    &, [class*="base-picture"] {
      height: 100%;
    }
    .base-picture__image {
      width: 100%;
      object-fit: cover;
    }
  }
  .dst__item--title--text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    font-size: min((38vw / 9.92), 34px);
    text-align: center;
    color: #fff;
    font-weight: bold;
  }
}
/*--- article__list*/
.article__list {
  .article__link {
    display: grid;
    background: #fff;
  }
  .article__image {
    width: 100%;
    height: var(--article-photo-h, min((210vw / 9.92), 210px));
    object-fit: cover;
  }
  .article__detail {
    display: grid;
    grid-template-areas:
      "ttl date"
      "txt txt";
    justify-content: space-between;
    gap: .75em;
    grid-template-rows: auto 1fr;
    align-items: baseline;
    font-size: min((22vw / 7.5), 14px);
    line-height: 1.2;
    padding: 1em min((10vw / 7.5), 10px);
    position: relative;
    &::after {
      content: var(--default-icon-blank);
      font-size: calc(16em / 14);
      line-height: .9;
      font-family: var(--default-ff-icon);
      position: absolute;
      bottom: calc(9em / 16);
      right: calc(12em / 16);
    }
  }
  .article__detail--title {
    grid-area: ttl;
    font-size: min((32vw / 7.5), 17px);
    font-weight: bold;
  }
  .article__detail--label {
    grid-area: date;
    font-size: min((20vw / 7.5), 14px);
    text-align: right;
  }
  .article__detail--text {
    grid-area: txt;
    line-height: calc(36 / 22);
    &::after {
      content: "";
      display: inline-block;
      width: 1.5em;
      height: 1em;
    }
  }
}
@media (width >=531px) {
  .article__list {
    .article__detail {
      padding-top: 0;
    }
    .article__item {
      display: contents;
    }
    .article__link {
      height: 100%;
      grid-template-rows: subgrid;
      grid-row: span 2;
    }
  }
}
@media (width <=530px) {
  :is(.dst__list, .article__list) {
    grid-template-columns: 1fr;
    --articl-photo-maxw: 200px;
  }
  /*--- dst__list*/
  .dst__list {
    .dst__item {
      grid-template-columns: min((260vw / 7.5), 164px) 1fr; /*MAX63%*/
      --dst-photo-h: min((305vw / 7.5), 305px);
      grid-template-rows: auto;
      grid-row: auto;
      .dst__item--button {
        grid-column: span 2;
      }
    }
  }
  /*--- article__list*/
  .article__list {
    .article__link {
      min-height: min((220vw / 7.5), 220px);
      grid-template-columns: min((320vw / 7.5), 200px) 1fr; /*MAX63%*/
      --article-photo-h: 100%;
      --article-photo-w: min((320vw / 7.5), 200px);
      --article-txt-yohaku: min((20vw / 7.5), 20px) min((20vw / 7.5), 20px) min((20vw / 7.5), 20px) 1em;
      position: relative;
      &::before {
        content: ""; /*画像のサイズ確保用*/
      }
    }
    .article__image {
      position: absolute; /*読込画像サイズがバラバラで高さが揃わない為absolute対応*/
      width: var(--article-photo-w);
      top: 0;
      left: 0;
    }
    .article__detail {
      padding: min((20vw / 7.5), 20px) min((16vw / 7.5), 16px) 1em min((22vw / 7.5), 22px);
    }
  }
}
/*--- dst__detail*/
.dst__detail {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100lvh;
  .js-modal-body {
    position: relative;
  }
}
.dst__detail--list {
  width: var(--modal-item-w, min(var(--default-width-sp), 490px));
  position: absolute;
  z-index: 100;
  height: var(--modal-item-h, clamp(70vmin, (100% - (194vw / 7.5)), min((1020vw / 7.5), 720px)));
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .is-pc & {
    --modal-item-h: min(((547 / 760)* 100%), 547px);
    --modal-item-w: min((100% - 144px), 872px);
    --modal-item-h: min(((574 / 760) * 100%), 547px);
    --modal-item-gap: 20px;
  }
}
.dst__detail--button--switch, .dst__detail--button--close {
  --modal-button-size: min((80vw / 7.5), 40px);
  width: var(--modal-button-size);
  height: var(--modal-button-size);
  background: var(--modal-button-bg, #fff);
  display: grid;
  justify-items: center;
  align-items: center;
  position: absolute;
  cursor: pointer;
  &::before {
    content: var(--modal-button-icon, "\e5c8");
    font-family: var(--default-ff-icon);
    font-size: 2em;
    line-height: .9;
    font-weight: 500;
  }
  .is-pc & {
    --modal-button-size: 48px;
    border-radius: 100%;
  }
  &.dst__detail--button--switch {
    top: 0;
    bottom: 0;
    margin: auto;
    --modal-button-posi-x: -60px;
    &.is-prev {
      left: var(--modal-button-posi-x);
      transform: rotate(180deg);
    }
    &.is-next {
      right: var(--modal-button-posi-x);
    }
    .is-sp & {
      --modal-button-size: min((60vw / 7.5), 30px);
      --modal-button-bg: rgb(255, 255, 255, .5);
      --modal-button-posi-x: max((-20vw / 7.5), -10px);
    }
  }
  &.dst__detail--button--close {
    --modal-button-icon: "\e5cd";
    top: max((-80vw / 7.5), -40px);
    right: 0;
    .is-pc & {
      top: -28px;
      right: -20px;
    }
  }
}
.dst__detail--item {
  background: var(--default-color-blue4);
  height: 100%;
  position: absolute;
  top: 0;
}
.dst__detail--inner {
  display: grid;
  gap: var(--modal-item-gap, min((26vw / 7.5), 13px));
  padding: min((30vw / 7.5), 20px) min((40vw / 7.5), 20px);
  height: 100%;
  overflow-y: auto;
  .is-sp & {
    grid-template-rows: min((196vw / 7.5), 150px) 1fr;
  }
  .is-pc & {
    grid-template-columns: calc((269 / 832) * 100%) 1fr;
  }
}
.dst__detail--title {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.dst__detail--title--bg {
  &, [class*="base-picture"] {
    height: 100%;
  }
  .base-picture__image {
    width: 100%;
    object-fit: cover;
  }
}
.dst__detail--title--text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
  font-size: min((50vw / 7.5), 34px);
  text-align: center;
  color: #fff;
  font-weight: bold;
}
.dst__detail--point {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: space-between;
  gap: min((20vw / 7.5), 20px) 0;
  font-weight: bold;
  &:not(:first-child) {
    margin-top: min((34vw / 7.5), 25px);
  }
}
.dst__detail--point--item {
  &.is-price {
    grid-column: span 2;
    --modal-item-ttl-mb: min((10vw / 7.5), 10px);
  }
}
.dst__detail--point--item--title {
  background: #fff;
  display: inline-block;
  font-size: min((22vw / 7.5), var(--default-font-size-pc));
  line-height: 1;
  padding: .2em .3em .3em;
  margin-bottom: var(--modal-item-ttl-mb, min((8vw / 7.5), 8px));
}
.dst__detail--point--item--text {
  font-size: var(--modal-item-txt-fs, min((28vw / 7.5), 22px));
  line-height: var(--modal-item-txt-lh, 1);
  .is-season & {
    --modal-item-txt-fs: min((22vw / 7.5), var(--default-font-size-pc));
    --modal-item-txt-lh: 1.5;
  }
}
.dst__detail--point--item--price {
  --waku-border: 1px dotted #fff;
  --waku-yohaku: 2px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: var(--waku-border);
  gap: 1px; /*borderのサイズ確保*/
  .is-pc & {
    padding: 7px;
    --waku-yohaku: 14px;
  }
}
.dst__detail--point--item--price--item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  justify-items: center;
  align-items: center;
  font-size: min((34vw / 7.5), 22px);
  line-height: 1.2;
  text-align: center;
  font-weight: bold;
  padding: var(--item-yohaku, min((12vw / 7.5), 12px) 0);
  position: relative;
  .is-sp & {
    grid-template-areas:
      "ttl ttl"
      "ico txt";
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: min((14vw / 7.5), 8px) min((24vw / 7.5), 12px);
  }
  .is-pc & {
    --item-yohaku: 12px;
    --item-yohaku-half: calc(var(--item-yohaku) / 2);
    grid-template-areas:
      "ico ttl"
      "ico txt";
    grid-template-columns: 50px 1fr;
    gap: 0;
    &:nth-child(-n+3) {
      padding-top: var(--item-yohaku-half);
    }
    &:nth-child(n+4) {
      padding-bottom: var(--item-yohaku-half);
    }
  }
  &:first-child {
    &::after {
      content: "";
      width: 300%;
      height: 0px;
      border-bottom: var(--waku-border);
      position: absolute;
      bottom: -1px;
      left: 0;
    }
  }
  &:not(:nth-child(3n)) {
    &::before {
      content: "";
      width: 0;
      height: 100%;
      border-right: var(--waku-border);
      position: absolute;
      top: 0;
      right: -1px;
    }
  }
}
.dst__detail--point--item--price--item--name {
  grid-area: ttl;
  font-size: min((21vw / 7.5), 13px);
}
.dst__detail--point--item--price--item--text {
  grid-area: txt;
}
.dst__detail--point--item--price--item--icon {
  grid-area: ico;
  height: var(--price-icon-h);
  .is-water & {
    --price-icon-h: min((50vw / 7.5), 50px);
    .is-sp & {
      margin-left: auto;
    }
  }
  .is-mcdonalds & {
    --price-icon-h: min((50vw / 7.5), 50px); /*44*/
  }
  .is-beer & {
    --price-icon-h: min((47vw / 7.5), 47px);
  }
  .is-taxi & {
    --price-icon-h: min((38vw / 7.5), 38px);
  }
  .is-train & {
    --price-icon-h: min((45vw / 7.5), 45px);
  }
  .is-starbucks & {
    --price-icon-h: min((43vw / 7.5), 43px);
  }
}
/*#advice*/
.advice__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: min((30vw / 7.5), 45px);
  width: min((630vw / 7.5), 930px);
  margin: auto;
}
.advice__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: min((24vw / 7.5), 18px);
  border-radius: min((30vw / 7.5), 30px);
  background: var(--default-color-blue4);
  padding: min((22vw / 7.5), 20px);
}
.advice__item--title {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  font-weight: bold;
  font-size: min((30vw / 7.5), 18px);
  line-height: calc(23 / 18);
  gap: 1em;
  .base-title__icon {
    height: var(--ttl-ico-h, min((56vw / 7.5), 41px));
  }
  .is-lcc & {
    --ttl-ico-h: min((64vw / 7.5), 48px);
  }
}
/*------------------------------------------------*/
/*★ ＝＝ footerArea ＝＝ ★*/
#footerArea:not(:empty) {
  padding: min((100vw / 7.5), 65px) 0;
}
/*reco-banner*/
.reco-banner__list {
  width: var(--size, min((524vw / 7.5), 420px));
  margin: auto;
  display: grid;
  grid-template-columns: var(--column, repeat(2, 1fr));
  gap: min((22vw / 7.5), 30px);
  .is-pc & {
    --size: var(--default-width);
    --column: repeat(4, 1fr);
    background: #fff;
    padding: calc((26 / var(--default-width-pc-val)) * 100%);
  }
}
.reco-banner__link {
  display: block;
  border: var(--border-color, transparent) min((4vw / 7.5), 4px) solid;
}
/*★ ＝＝ searchArea（検索ボックスのレイアウト切り替えタイミングで変更） ＝＝ ★*/
/*search*/
#searchArea {
  padding-bottom: min((50vw / 7.5), 60px);
}
.is-pc ~ #searchArea {
  padding: 60px 0;
  background: url("../images/search_photo.webp") repeat center top / 1920px;
}
/*
@media (min-width:741px) {
}
@media only screen and (orientation: landscape) and (max-width: 828px), only screen and (max-width: 740px) {
  #searchArea .rn-searchMod__formSection {
    padding-bottom: min((100vw / 7.5), 100px);
  }
}
#pageApp.is-device-tab ~ #searchArea {
  padding-bottom: min((86vw / 7.5), 86px);
}*/
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover : hover) and (pointer : fine) {
  .portal-navi__list--link[href]:hover {
    background: var(--portal-button-bg);
    color: var(--default-color-black);
  }
  :is(.base-button__link, .base-small-button__link) {
    transition: var(--default-hover-transition2);
    &:hover {
      --btn-bg: var(--default-color-blue3);
    }
  }
  .section-navi__link {
    transition: var(--default-hover-transition3);
    &:hover {
      color: var(--default-color-yellow);
    }
  }
  .product__block--button {
    transition: var(--default-hover-transition2);
    &:hover {
      --product-tab-bg: var(--default-color-yellow);
    }
  }
  .product__list--inner {
    transition: var(--default-hover-transition);
    &:hover {
      opacity: var(--default-hover-opacity);
    }
  }
  .dst__item--title {
    background: #000;
    .base-picture {
      transition: var(--default-hover-transition);
    }
    &:hover {
      .base-picture {
        opacity: .8;
      }
    }
  }
  [class^="dst__detail--button--"] {
    transition: var(--default-hover-transition);
    &:hover {
      opacity: .8;
    }
  }
  .article__link {
    .article__image {
      transition: var(--default-hover-transition);
    }
    &:hover {
      .article__image {
        opacity: var(--default-hover-opacity);
      }
    }
  }
  .reco-banner__link {
    /*transition: border var(--default-hover-speed);*/
    &:hover {
      --border-color: var(--default-color-blue3);
    }
  }
}