@charset "utf-8";
/* 「アニ旅扉 」レスポンシブCSS */
/**/
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 900;
  src: url(/tyo/common/font/NotoSansJP-900.woff) format('woff');
}
/*★ リセット ★*/
#hisApp {
  position: relative;
  overflow: hidden;
}
#hisAp > p.main {
  position: static;
}
:where(.main div::after) {
  content: none;
}
:where(.main a) {
  text-decoration: none;
  color: inherit;
}
:where(.main b) {
  font-weight: normal;
}
:where(.main .is-em) {
  font-weight: bold;
}
.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;
}
:root {
  --default-color-black: #000;
  --default-font-size-pc-val: 16;
  --default-font-size-pc: 16px;
  --default-font-size-sp: calc(26vw / 7.5);
  --default-font-size: min(var(--default-font-size-sp), var(--default-font-size-pc));
  --default-width-pc: 882px;
  --default-width-pc-val: 882;
  --default-width: min((686vw / 7.5), var(--default-width-pc));
  --default-bg-width-pc: max(100%, 1920px);
  --default-ff-icon: "Material Symbols Rounded";
  --default-icon-arw-r: "\e5e1";
}
/*------------------------------------------------*/
/*★ ページスタイル設定 ★*/
.main {
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--default-font-size);
  line-height: calc(34 / var(--default-font-size-sp-val));
  color: var(--default-color-black);
  padding-bottom: 0 !important;
  background: url("../images/bg_pattern.png") repeat 0 0 / min((30vw / 7.5), 30px);
}
.is-pc .is-dsp-sp, .is-sp .is-dsp-pc {
  display: none !important;
}
.is-inline-block {
  display: inline-block;
}
.is-font-small {
  font-size: .8em;
}
.is-font-big {
  font-size: 1.5em;
  line-height: 1;
}
.is-indent-1, .section [class*="notes--item"] {
  text-indent: -1em;
  padding-left: 1em;
}
.toggle__contents:not([class*="--active"]) {
  display: none;
}
.section__inner, .contents__wrapper {
  width: var(--default-width);
  margin: auto;
  position: relative;
}
/*base-banner*/
.banner__wrapper {
  display: grid;
  justify-items: center;
  gap: min((40vw/ 7.5), 20px);
}
.base-banner {
  display: grid;
  justify-content: center;
  gap: min((30vw/ 7.5), 15px);
}
.base-banner__link {
  background: #fff;
}
/*------------------------------------------------*/
.main:has(.reco-banner__list) #footerArea, .main:not(:has(.reco-banner__list)) #mainArea {
  padding-bottom: min((100vw / 7.5), 100px);
}
/*★ ＝＝ headerArea ＝＝ ★*/
#mv {
  display: grid;
  justify-items: center;
  .is-pc & {
    background: url("../images/mv_photo_pc.webp") repeat center center / auto 100%;
    min-height: 670px;
  }
  .is-sp & {
    padding: calc((200 / 750) * 100%) 0;
    background: url("../images/mv_photo_sp_top.webp") no-repeat left top / 100%, url("../images/mv_photo_sp_bottom.webp") no-repeat left bottom / 100%;
  }
}
.mv__inner {
  background: #fff;
  text-align: center;
  font-size: min((24vw / 7.5), 18px);
  line-height: calc(42 / 26);
  font-weight: 900;
  position: relative;
  .is-sp & {
    width: 100%;
    padding: min((40vw / 7.5), 40px) min((30vw / 7.5), 30px) min((90vw / 7.5), 90px);
  }
  .is-pc & {
    --mv-logo-h: 154px;
    width: 659px;
    height: 100%;
    padding: 26px 52px;
  }
  &::before, &::after {
    content: "";
    width: min((114vw / 7.5), 114px);
    aspect-ratio: 114 / 269;
    background: #0d53a4;
    position: absolute;
    display: block;
  }
  &::before {
    left: 0;
    top: 0;
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }
  &::after {
    right: 0;
    bottom: 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }
}
.mv__logo--image {
  margin: min((40vw / 7.5), 20px) auto min((48vw / 7.5), 30px);
  height: var(--mv-logo-h, min((218vw / 7.5), 218px))
}
.mv__logo--text {
  font-size: min((48vw / 7.5), 36px);
  line-height: calc(60 / 48);
}
.mv__lead {
  position: relative;
  z-index: 1;
  ~ .mv__lead {
    margin-top: 1em;
  }
}
/*portal-navi*/
.portal-navi {
  font-weight: bold;
  background: #000;
  color: #fff;
  --portal-button-bg: #009e96;
}
.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%);
}
/*発地ナビSP完全別レイアウトスタイル*/
@media(width < 980px) {
  .js-open-target {
    display: none;
  }
  .portal-navi {
    --portal-button-radius: min((6vw / 7.5), 8px);
  }
  .portal-navi__title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min((37vw / 7.5), 30px);
    padding: min((20vw / 7.5), 15px);
  }
  .portal-navi__button {
    display: grid;
    justify-items: center;
    align-items: center;
    width: min((330vw / 7.5), 330px);
    height: min((80vw / 7.5), 40px);
    background: var(--portal-button-bg);
    border-radius: var(--portal-button-radius);
    color: #fff;
  }
  .portal-navi__inner {
    position: relative;
  }
  .portal-navi__list--wrapper {
    width: min((440vw / 7.5), 440px);
    position: absolute;
    right: calc(50vw / 7.5);
    z-index: 250;
    background: rgba(255, 255, 255, .95);
    color: var(--default-color-black);
    border: 2px solid;
    border-radius: min((10vw / 7.5), 5px);
    filter: drop-shadow(0px 3px 0px rgba(0, 0, 0, .15));
    margin-top: min((15vw / 7.5), 7.5px);
    &::before, &::after {
      --posi: calc((76 / 440) * 100%);
      content: "";
      display: block;
      width: 27px;
      height: 16px;
      background: var(--icon-bg, #fff);
      clip-path: polygon(50% 0, 100% calc(100% - 3px), 0 calc(100% - 3px));
      position: absolute;
      top: var(--icon-posi-t, -12px);
      right: calc((76 / 440) * 100%);
    }
    &::before {
      --icon-posi-t: -14px;
      --icon-bg: #000;
    }
    @media (width > 740px) {
      &::before, &::after {
        left: var(--posi);
      }
    }
    @media (width <=740px) {
      &::before, &::after {
        right: var(--posi);
      }
    }
  }
  .portal-navi__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: min((14vw / 7.5), 14px) min((12vw / 7.5), 12px);
    padding: min((28vw / 7.5), 14px) min((22vw / 7.5), 11px);
    position: relative;
  }
  .portal-navi__list--link {
    width: 100%;
    padding: .3em .5em .4em;
    font-size: min((24vw / 7.5), 14px);
    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;
    }
    &.is-active {
      background: var(--portal-button-bg);
      border-color: var(--portal-button-bg);
      color: #fff;
    }
  }
}
/*発地ナビ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: min((13vw / 7.5), 14px);
    align-items: center;
    padding: 10px 0;
  }
  .portal-navi__list {
    display: flex;
    gap: .6em;
    justify-content: space-around;
  }
  .portal-navi__list--link {
    padding: .2em .7em .3em;
    border-radius: 4px;
    &.is-active {
      background: var(--portal-button-bg);
    }
  }
  .portal-navi__list--wrapper {
    display: block !important;
  }
}
/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/
#mainArea {
  padding-top: min((80vw / 7.5), 80px);
}
.anitabi-status-text {
  font-size: min((40vw / 7.5), 36px);
  line-height: calc(50 / 40);
  font-weight: 900;
  text-align: center;
  .main:has(.anitabi-list) & {
    display: flex;
    justify-content: center;
    align-items: end;
    gap: .25em;
    margin-bottom: 1em;
    &::before, &::after {
      content: "";
      width: 2px;
      height: 1em;
      background: currentColor;
    }
    &::before {
      transform: rotate(-45deg);
      margin-right: .25em;
    }
    &::after {
      transform: rotate(45deg);
    }
  }
}
.anitabi-list {
  display: grid;
  gap: min((40vw / 7.5), 40px);
  justify-content: center;
}
.anitabi-list__item {
  background: #fff;
}
.anitabi-list__banner {
  height: min((280vw / 7.5), 300px);
  aspect-ratio: 736 / 300;
  display: block;
}
/*------------------------------------------------*/
/*★ ＝＝ footerArea ＝＝ ★*/
#footerArea {
  margin-top: var(--yohaku-ue, min((80vw / 7.5), 80px));
  .main:has(.anitabi-list) & {
    --yohaku-ue: min((110vw / 7.5), 90px);
  }
  &:not(:has(.reco-banner__item)) {
    display: none;
  }
}
#banner {
  .base-title {
    font-size: min((36vw / 7.5), 30px);
    line-height: calc(46 / 36);
    text-align: center;
    margin-bottom: min((50vw / 7.5), 35px);
  }
}
.reco-banner__list {
  display: grid;
  gap: var(--gap, min((30vw / 7.5), 30px));
  .is-sp & {
    grid-template-columns: repeat(2, 1fr);
    max-width: 500px;
    margin: auto;
  }
  .is-pc & {
    --gap: 38px;
    grid-template-columns: repeat(auto-fit, calc((100% - var(--gap) * 3) / 4));
    justify-content: center;
  }
}
.reco-banner__item {
  background: #fff;
}
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover : hover) and (pointer : fine) {
  @media(width < 980px) {
    .portal-navi__list--link[href]:hover {
      background: var(--portal-button-bg);
      color: #fff;
    }
  }
  @media(width >=980px) {
    .portal-navi__list--link[href]:hover {
      color: var(--portal-button-bg);
    }
  }
  .anitabi-list__link, .reco-banner__link {
    transition: opacity .4s;
    &:hover {
      opacity: .75;
    }
  }
}