@charset "utf-8";
/* 「パスポートCPN」レスポンシブCSS */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/tyo/common/font/NotoSansJP-900.woff2) format('woff2');
}
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(/tyo/common/font/MaterialSymbolsRounded.woff2) format('woff2');
}
/*★ リセット ★*/
.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-color-main: #000;
  --default-color-blue: #1283e3;
  --default-font-size-pc-val: 16;
  --default-font-size-pc: 16px;
  --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: 672;
  --default-width-pc-val: 992;
  --default-width-sp: (672vw / 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-ff-icon: "Material Symbols Rounded";
  --default-hover-speed: .3s;
  --default-hover-opacity: .8;
  --default-hover-transition-opacity: opacity var(--default-hover-speed);
}
.main {
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--default-font-size);
  color: var(--default-color-main);
  line-height: calc(34 / var(--default-font-size-sp-val));
  padding-bottom: 0 !important;
}
.is-inline-block {
  display: inline-block;
}
.is-indent-1, .section [class*="notes--item"] {
  text-indent: -1em;
  padding-left: 1em;
}
.section__inner, .contents__wrapper {
  width: var(--default-width);
  margin: auto;
  position: relative;
}
.is-sp .is-dsp-pc, .is-pc .is-dsp-sp {
  display: none !important;
}
.js-accordion-button {
  cursor: pointer;
  + * {
    display: none;
  }
}
.base-button__link {
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: center;
  gap: min((22vw / 7.5), 24px);
  padding: .4em min((33vw / 7.5), 25px) .5em;
  width: max-content;
  min-width: min((650vw / 7.5), 488px);
  min-height: min((60vw / 7.5), 50px);
  margin: auto;
  color: #fff;
  line-height: calc(31 / 24);
  text-align: center;
  font-weight: bold;
  background: #fea700;
  border-radius: 500px;
  &[target="_blank"] {
    --btn-icon: "\e89e";
  }
  &[href^="#"]::after {
    transform: rotate(90deg);
  }
  &::after {
    content: var(--btn-icon, "\e5e1");
    font-family: var(--default-ff-icon);
    width: 1em;
    height: 1em;
  }
}
.main .base-text-link {
  color: var(--default-color-blue);
  text-decoration: none;
}
/*slider*/
.main {
  .splide {
    --slider-main-bg: var(--default-color-blue);
  }
  .splide__arrow {
    background: none;
    border-radius: 0;
    opacity: 1 !important;
    height: max-content;
    transform: translateY(max((-34vw / 7.5), -22px)); /*splide__paginationの高さ分マイナス*/
    &:disabled {
      opacity: 0;
      cursor: default;
    }
    svg {
      fill: var(--slider-main-bg);
      width: min(70%, 20px);
    }
  }
  .splide__arrow--prev {
    left: 0;
    justify-content: start;
  }
  .splide__arrow--next {
    right: 0;
    justify-content: end;
  }
  .splide__pagination {
    --slider-pagination-size: min((16vw / 7.5), 10px);
    height: min((34vw / 7.5), 22px);
    position: static;
    gap: var(--slider-pagination-size);
    align-items: end;
    li {
      line-height: 0;
    }
  }
  .splide__pagination__page {
    opacity: 1;
    margin: 0;
    width: var(--slider-pagination-size);
    height: var(--slider-pagination-size);
    aspect-ratio: 1;
    background: var(--slider-pagination-bg, #fff);
    border-radius: 50%;
    &.is-active {
      --slider-pagination-bg: var(--slider-main-bg);
    }
  }
}
/*------------------------------------------------*/
/*★ ＝＝ pageArea ＝＝ ★*/
#pageArea {
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  position: relative;
  .page-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100lvh;
    .base-picture__image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  > [id*="Area"] {
    position: relative;
  }
}
/*------------------------------------------------*/
/*★ ＝＝ headerArea ＝＝ ★*/
#headerArea {
  position: relative;
}
/*mv*/
.mv {
  height: var(--mv-size-h, calc(1100vw / 7.5));
  position: relative;
  .is-pc & {
    --mv-size-h: 800px;
    --mv-yohaku-ue: 88px;
    --mv-logo-size-h: 574px;
    --mv-gradation-size-h: 138px;
    --mv-more-kaigai-posi-x: 37px;
    --mv-more-kaigai-posi-y: 36px;
  }
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: var(--mv-gradation-size-h, calc(138vw / 7.5));
    background: linear-gradient(to top, rgba(0, 182, 215, .75) 0%, transparent 100%);
    position: absolute;
    bottom: 0;
  }
}
.mv__inner {
  height: 100%;
  position: relative;
  z-index: 1;
  background: url("../images/logo_more_kaigai.png") no-repeat right var(--mv-more-kaigai-posi-x, calc(16vw / 7.5)) bottom var(--mv-more-kaigai-posi-y, calc(90vw / 7.5)) / min((200vw / 7.5), 100px);
  padding-top: var(--mv-yohaku-ue, calc(209vw / 7.5));
}
.mv__logo--image {
  display: block;
  width: 100%;
  height: var(--mv-logo-size-h, calc(574vw / 7.5));
  object-fit: contain;
}
/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/
/*detail*/
#detail {
  background: rgba(0, 182, 215, .75);
  padding-top: var(--sec-yohaku-ue, min((88vw / 7.5), 88px));
  .is-pc & {
    --sec-yohaku-ue: 20px;
  }
}
.detail-present {
  --border-bg: url("../images/info_border_sp.png");
  width: min((671vw / 7.5), 923px);
  margin: auto;
  padding: min((113vw / 7.5), 113px) 0 min((95vw / 7.5), 95px);
  background: var(--border-bg) no-repeat 0 0 / 100%, var(--border-bg) no-repeat 0 100% / 100%;
  color: #fff;
  text-align: center;
  .is-pc & {
    --border-bg: url("../images/info_border_pc.png");
    padding: 24px 0 57px;
  }
}
.detail-present__inner {
  padding: min((62vw / 7.5), 60px) 0 min((70vw / 7.5), 70px);
  .is-pc & {
    padding: 50px 0 34px;
  }
}
.detail-present__title {
  &:not(:last-child) {
    margin-bottom: min((22vw / 7.5), 22px);
  }
}
.detail-present__title--image {
  display: block;
  width: 100%;
  height: var(--size-h);
  object-fit: contain;
  --size-h: min((454vw / 7.5), 454px);
  .is-pc & {
    --size-h: 348px;
  }
  .is-phase-0905 & {
    --size-h: min((317vw / 7.5), 317px);
    .is-pc & {
      --size-h: 164px;
    }
  }
  .base-picture__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.detail-present__text {
  font-weight: bold;
  font-size: min((24vw / 7.5), 20px);
  line-height: calc(34 / 24);
  .is-fs-small {
    font-size: min((18vw / 7.5), 16px);
  }
}
.detail-present__notes {
  font-size: min((18vw / 7.5), 16px);
  line-height: calc(28 / 18);
  margin-top: min((30vw / 7.5), 30px);
}
.detail-campaign {
  background: rgba(255, 255, 255, .96);
  margin-top: min((70vw / 7.5), 75px);
  padding: min((48vw / 7.5), 38px) min((28vw / 7.5), 32px);
  color: #333;
}
.detail-campaign__title--image {
  width: 100%;
  height: min((43vw / 7.5), 32px);
  object-fit: contain;
  margin-bottom: min((46vw / 7.5), 40px);
}
.detail-campaign__info {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: min((16vw / 7.5), 16px);
}
.detail-campaign__info--item {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  font-size: min((24vw / 7.5), 14px);
}
.detail-campaign__info--item--title {
  background: #0088d3;
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: min((24vw / 7.5), 12px);
  padding: .25em calc(18em / 12) .3em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail-campaign__info--item--notes {
  margin-top: .25em;
  font-size: 12px;
}
.detail-campaign__flow {
  margin-top: min((30vw / 7.5), 38px);
  background: rgba(18, 131, 227, .16);
  display: grid;
  grid-template-columns: repeat(var(--flow-col, 2), 1fr);
  gap: min((25vw / 7.5), 28px) min((40vw / 7.5), 28px);
  font-size: min((24vw / 7.5), 14px);
  line-height: calc(34 / 24);
  padding: min((36vw / 7.5), 20px) min((20vw / 7.5), 10px);
  .is-pc & {
    --flow-col: 4;
  }
  .base-text-link {
    color: #0000ff;
  }
}
.detail-campaign__flow--item--title {
  margin-bottom: min((12vw / 7.5), 10px);
}
.detail-campaign__flow--item--title--image {
  width: 100%;
  height: min((225vw / 7.5), 172px);
  object-fit: contain;
  object-position: top center;
}
.detail-campaign__attention {
  padding-top: min((30vw / 7.5), 28px);
}
.detail-campaign__attention--title {
  font-weight: bold;
  font-size: min((32vw / 7.5), 18px);
  line-height: 1.2;
  margin-bottom: .5em;
}
.detail-campaign__attention {
  color: var(--default-color-main);
  font-size: min((24vw / 7.5), 14px);
  line-height: calc(20 / 14);
}
/*links*/
#links {
  background: linear-gradient(to bottom, rgba(0, 182, 215, .75) 0%, rgba(18, 131, 277, .75) 100%);
  padding: var(--sec-yohaku, min((67vw / 7.5), 67px) 0 min((100vw / 7.5), 100px));
  .is-pc & {
    --sec-yohaku: 89px 0 145px;
  }
  .section__title {
    font-weight: 900;
    color: #fff;
    font-size: min((42vw / 7.5), 30px);
    line-height: 1.2;
    text-align: center;
    margin-bottom: min((45vw / 7.5), 40px);
  }
  > [class^="links-"]:not(:first-child) {
    margin-top: min((60vw / 7.5), 64px);
  }
}
/* ↓準備中 */
.links-banner .section__inner {
  width: var(--sec-inner-size-w, 100%);
  @media (width > 1030px) {
    --sec-inner-size-w: var(--default-width-pc);
    .links-banner__lineup--track {
      max-width: calc(316px * 3);
      margin: auto;
    }
  }
  .splide {
    --slider-main-bg: #ffff00;
  }
}
.links-banner__lineup--item {
  padding: 0 min((12vw / 7.5), 8px);
}
.links-banner__lineup--item--link {
  width: var(--item-size-w, min((520vw / 7.5), 300px));
  height: 100%;
  display: grid;
  grid-template-rows: max-content 1fr;
  background: #fff;
  color: inherit;
  font-size: min((28vw / 7.5), 16px);
  line-height: calc(20 / 16);
  border: 1px solid #ccc;
  .is-pc & {
    --item-size-w: 300px;
  }
}
.links-banner__lineup--item--image {
  padding-top: calc((300 / 736) * 100%);
  position: relative;
}
.links-banner__lineup--item--image--photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.links-banner__lineup--item--text {
  padding: .7em .75em .8em;
}
/* ↑準備中 */
.links-dst__lineup {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: min((18vw / 7.5), 17px);
  .links-dst__lineup--item {
    --item-size: min((210vw / 7.5), 138px);
    width: var(--item-size);
    height: var(--item-size);
    background: no-repeat center center / cover;
  }
  .links-dst__lineup--item--link {
    display: flex;
    align-items: end;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    color: #fff;
    font-size: min((24vw / 7.5), 15px);
    padding: .25em;
  }
}
/*flow*/
#flow {
  padding: var(--sec-yohaku, min((60vw / 7.5), 60px) 0 min((74vw / 7.5), 74px));
  background: #d8f2ff url("../images/bg_pattern.gif") repeat 0 0 / min((37vw / 7.5), 37px);
  > [class^="flow-"]:not(:first-child) {
    margin-top: min((88vw / 7.5), 80px);
  }
  .is-pc & {
    --sec-yohaku: 69px 0 118px;
  }
  .section__title {
    margin-bottom: min((60vw / 7.5), 38px);
    img:is(.section__title--image, .base-picture__image) {
      display: block;
      width: 100%;
      height: var(--flow-sec-size-h);
      object-fit: contain;
      --flow-sec-size-h: min((48vw / 7.5), 36px); /*SPの最大は74%*/
      .is-pc & {
        --flow-sec-size-h: 38px;
      }
      .flow-main & {
        --flow-sec-size-h: min((134vw / 7.5), 99px);
        .is-pc & {
          --flow-sec-size-h: 124px;
        }
      }
      .flow-more & {
        --flow-sec-size-h: min((111vw / 7.5), 82px);
        .is-pc & {
          --flow-sec-size-h: 40px;
        }
      }
    }
  }
}
.flow-main__figure--image {
  width: 100%;
  height: min((147vw / 7.5), 180px);
  object-fit: contain;
}
.flow-main__button--wrapper {
  margin-top: min((50vw / 7.5), 45px);
}
.flow-main__button--title {
  font-weight: 900;
  text-align: center;
  font-size: min((28vw / 7.5), 16px);
  line-height: 1.2;
  margin-bottom: .5em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75em;
  &::before, &::after {
    content: "";
    background: currentColor;
    width: 1px;
    height: 1.25em;
  }
  &::before {
    transform: rotate(-45deg);
  }
  &::after {
    transform: rotate(45deg);
  }
}
.flow-main__more {
  background: #fff;
  margin-top: min((41vw / 7.5), 46px);
  font-size: min((28vw / 7.5), 16px);
  line-height: calc(20 / 16);
  padding: 1em;
}
.flow-main__more--title {
  font-size: min((32vw / 7.5), 18px);
  font-weight: 900;
  margin-bottom: .75em;
}
.flow-more .section__inner {
  width: var(--sec-inner-size-w, 100%);
  @media (width > 1030px) {
    --sec-inner-size-w: var(--default-width-pc);
    .flow-more__lineup--track {
      max-width: calc(236px * 4);
      margin: auto;
    }
  }
}
.flow-more__lineup--item {
  padding: 0 min((12vw / 7.5), 8px);
}
.flow-more__lineup--item--link {
  width: var(--item-size-w, min((520vw / 7.5), 300px));
  height: 100%;
  display: grid;
  grid-template-rows: max-content 1fr;
  background: #fff;
  color: inherit;
  font-size: min((28vw / 7.5), 16px);
  line-height: calc(20 / 16);
  border: 1px solid #ccc;
  .is-pc & {
    --item-size-w: 220px;
  }
}
.flow-more__lineup--item--image {
  padding-top: calc((120 / 220) * 100%);
  position: relative;
}
.flow-more__lineup--item--image--photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.flow-more__lineup--item--text {
  padding: .7em .75em .8em;
}
.flow-qa__lineup {
  font-feature-settings: "palt";
}
.flow-qa__lineup--item {
  --waku-yoyaku-y: min((26vw / 7.5), 20px);
  --waku-yoyaku-x: min((26vw / 7.5), 25px);
  background: #fff;
  border-radius: min((16vw / 7.5), 16px);
  border: 1px solid #aaa;
  font-size: min((28vw / 7.5), 16px);
  line-height: calc(26 / 16);
  &:not(:first-child) {
    margin-top: min((25vw / 7.5), 15px);
  }
}
.flow-qa__lineup--item--q {
  font-weight: 900;
  font-size: min((28vw / 7.5), 18px);
  line-height: 1.2;
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: center;
  gap: 1em;
  padding: var(--waku-yoyaku-y) var(--waku-yoyaku-x);
  &::after {
    content: var(--icon, "\e145");
    background: var(--default-color-blue);
    border-radius: 100%;
    height: 1.25em;
    aspect-ratio: 1 / 1;
    font-family: var(--default-ff-icon);
    font-weight: 500;
    font-size: .95em;
    line-height: 1.25em;
    color: #fff;
    letter-spacing: 0;
    text-align: center;
  }
  &.is-open {
    --icon: "\e15b";
  }
}
.flow-qa__lineup--item--a {
  width: min(calc(560vw / 7.5), 800px);
  margin: 0 0 var(--waku-yoyaku-y) var(--waku-yoyaku-x);
  .is-sp & {
    border-top: 1px dotted #313131;
    padding-top: min((20vw / 7.5), 14px);
    padding-right: calc(30em / 24);
  }
  .is-pc & {
    font-weight: bold;
  }
}
.flow-qa__lineup--item--a--link--text.base-text-link {
  text-decoration: none;
  line-height: calc(34 / 24);
  font-weight: bold;
  margin-top: .75em;
  margin-top: .5em;
  display: block;
  &::before {
    content: var(--icon, "\e5e1");
    font-family: var(--default-ff-icon);
  }
}
.flow-qa__button--wrapper {
  margin-top: min((50vw / 7.5), 43px);
}
.flow-advice__lineup {
  display: grid;
  gap: min((38vw / 7.5), 30px);
  .is-pc & {
    grid-template-columns: repeat(3, 1fr);
  }
}
.flow-advice__lineup--item {
  background: rgba(18, 131, 227, .6);
  font-size: min((28vw / 7.5), 16px);
  color: #fff;
  border-radius: min((20vw / 7.5), 20px);
  padding: min((32vw / 7.5), 25px) min((28vw / 7.5), 17px);
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: min((32vw / 7.5), 35px) 0;
  .is-sp & {
    justify-content: center;
  }
}
.flow-advice__lineup--item--title {
  font-weight: bold;
  text-align: center;
  font-size: min((32vw / 7.5), 20px);
  line-height: 1.2;
  align-self: center;
}
/*------------------------------------------------*/
/*★ ＝＝ footerArea ＝＝ ★*/
/*------------------------------------------------*/
/*★ ＝＝ searchArea（検索ボックスのレイアウト切り替えタイミングで変更） ＝＝ ★*/
/*search*/
.search-button {
  position: fixed;
  top: min((100vw / 7.5), 100px);
  right: min((15vw / 7.5), 30px);
  z-index: 10;
  transition: transform .5s;
  transform: translateX(var(--button-posi, 150%));
  &.is-dsp {
    --button-posi: 0;
  }
}
.search-button__link {
  display: block;
}
.search-button__image {
  width: min((127vw / 7.5), 127px);
  height: min((128vw / 7.5), 128px);
}
#searchArea {
  padding-bottom: min((50vw / 7.5), 60px);
  @media (width > 740px) {
    padding: 60px 0;
    background: url("../images/search_bg_pc.webp") no-repeat center top / var(--default-bg-width-pc);
  }
}
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover : hover) and (pointer : fine) {
  .main .base-text-link {
    &:hover {
      text-decoration: underline;
      text-underline-offset: .3em;
    }
  }
  .base-button__link, .links-banner__lineup--item--link, .links-dst__lineup--item--link, .flow-more__lineup--item--link {
    transition: var(--default-hover-transition-opacity);
    &:hover {
      opacity: var(--default-hover-opacity);
    }
  }
}