@charset "UTF-8";


/* ===============================================
* Foundation *
=============================================== */

html {
  font-size: 62.5%;
  /* scroll-padding-top: var(--height-header); */
  overflow-y: scroll; /* NOTE: スクロール固定時のガター処理 */

  /* @media (min-width: 768px) {
    font-size: 10px;
  } */
}

html[data-scroll-fixed=active] {
  overflow: hidden;
}

img,
svg {
  max-width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}




/* ===============================================
  * Layout *
=============================================== */

.l-contents__fluid-wrapper {
  width: min(100%, calc(var(--design-default-width, 128rem) + (var(--padding-horizontal-global) * 2)));
  margin-inline: auto;
  padding-inline: var(--padding-horizontal-global);
}


/* ===============================================
  * Object *
=============================================== */


/*
 * Object - Component
 */


/*
 * Object - Project
 */


/*
 * Object - Utility
 */

.u-visually-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(0px 0px 99.9% 99.9%);
}

/* 1. デフォルトの状態（常にJP表示、EN非表示） */
.lang-en {
  display: none!important;
}
.lang-ja {
  display: block;
}

/* 2. JSによって .show-en-pair が「個別の親」(<dt>など)に付与された時の状態 */
/* (＝ 英語が選択され、かつ そのペアにENフィールドが存在した時) */
/* ▼▼▼【変更】▼▼▼ */
.show-en-pair .lang-ja {
  display: none!important; /* そのペアのJPを隠す */
}
.show-en-pair .lang-en {
  display: block!important; /* そのペアのENを表示 */
}

/* Responsive */
.u-hidden {
  display: none !important;
}

@media (min-width: 375px) {
  .u-hidden-sm-up {
    display: none !important;
  }
}

@media (max-width: 374px) {
  .u-hidden-sm-down {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .u-hidden-md-up {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .u-hidden-md-down {
    display: none !important;
  }
}

@media (min-width: 1280px) {
  .u-hidden-lg-up {
    display: none !important;
  }
}

@media (max-width: 1279px) {
  .u-hidden-lg-down {
    display: none !important;
  }
}

@media (min-width: 1500px) {
  .u-hidden-xl-up {
    display: none !important;
  }
}

@media (max-width: 1499px) {
  .u-hidden-xl-down {
    display: none !important;
  }
}

@media (min-width: 1700px) {
  .u-hidden-xxl-up {
    display: none !important;
  }
}

@media (max-width: 1699px) {
  .u-hidden-xxl-down {
    display: none !important;
  }
}

/* エリアを非表示にする. */
.u-hidden-area:not(:has(.u-hidden-area--target)),
.u-hidden-area:has(.u-hidden-area--target:empty) {
  display: none !important;
}


/* =============================================================
    Site
============================================================= */
:where(button) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  color: inherit;
}

:where(input, button, textarea, select) {
  color: inherit;
}

:where(a) {
  text-decoration: none;
  outline: none;
  color: inherit;
}

img,
picture {
  width: auto;
  height: auto;
  max-width: 100%;
  display: block;
}
ul,li{
  list-style: none;
}


/* ===============================================
* Component *
=============================================== */
.c-button {
  width: fit-content;
  display: grid;
  place-content: center;
  padding-block: 1.15rem;
  padding-inline: 2rem;
  font-size: 13px;
  letter-spacing: .03em;
  line-height: 1;
  color: #fff;
  border: 1px solid var(--color-text-default);
  border-radius: 4em;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}

.c-button-cta{
  background-color: var(--color-text-default);
  transition: background-color var(--transition-default),color var(--transition-default);
}
.c-button-main{
  color: var(--color-text-default);
  backdrop-filter: blur(5px);
}
.c-button-main[data-color="white"]{
  color: #fff;
  border-color: #fff;
}
.c-button-translate,
.gtranslate_wrapper .gt_selector{
  /* width: 8rem; */
  height: 30px;
  padding-block: 0;
}
.c-button-book.c-button-cta{
  /* width: 10rem; */
  height: 30px;
  padding-block: 0;
  padding-inline: 3.2rem;

  color: #fff;
  background-color: var(--color-text-default);
  border-color: var(--color-text-default);
}
.c-button-translate.c-button-main{
  padding-inline: 2.7rem 1.3rem;
}
.header-top .c-button-translate.c-button-main{
  backdrop-filter: unset;
}
.header-top.stopped .c-button-translate.c-button-main{
  background-color: rgba(255, 255, 255, .1);
  backdrop-filter: blur(5px);
}

@media (min-width: 768px) {
  .c-button {
    padding-block: 1.25rem;
    padding-inline: 2.45rem;
    font-size: 16px;
  }
  .c-button-book.c-button-cta{
    padding-inline: 3.3rem;
  }
  .c-button-translate.c-button-main{
    padding-inline:4.4rem;
  }
}

/* タイトル関係 */
.c-heading-primary{
  padding-inline: 1rem 0;
  display: grid;
  gap: 2rem;
}
.c-heading-primary--subtitle{
  font-size: 1.1rem;
  line-height: 1.5;
  display: grid;
  gap: 2rem;
  font-weight: var(--fw-regular);
  font-family: var(--font-roboto);
  letter-spacing: 0.06em;
}
.c-heading-primary--title{
  font-size: 4rem;
  line-height: 1.3;
  font-weight: var(--fw-medium);
  font-family: var(--font-roboto);
  letter-spacing: 0.06em;
}
.c-heading-primary--subtitle::after{
  content: '';
  width: 3rem;
  height: 1px;
  background-color: var(--color-text-default);
}

.c-heading-secondry{
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  font-weight: var(--fw-medium);
}

[data-color="white"]{
  color: #fff!important;
}
[data-color="white"] .c-heading-primary--subtitle::after{
  background-color: #fff;
}


@media (min-width: 768px) {
  .c-heading-primary{
    padding-inline: 0;
    gap: 2.4rem;
  }
  .c-heading-primary--subtitle{
    font-size: 13px;
    gap: 3rem;
  }
  .c-heading-primary--title{
    font-size: 5rem;
  }
  .c-heading-secondry{
    font-size: 35px;
  }
}






/* =============================================================
    Swiper 共通
============================================================= */
/* Swiper */
.swiper {
  display: grid;
  width: 100%;
}
.swiper-wrapper {
  min-width: 0;
}
[class*=swiper]:focus {
  outline: none;
}

.swiper-button-prev,
.swiper-button-next {
  border: 1px solid #fff;
  width: 55px;
  height: 55px;
  border-radius: 99%;
  position: static;
  cursor: pointer;
  position: static;
  margin-top: 0;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after,
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after{
  display: none;
}
.swiper-button-disabled {
  pointer-events: none;
  opacity: .3;
}


.js-intersectTarget[data-animation="fade-blur"]{
  opacity: 0;
  transition: transform 1s linear;
  animation-duration: var(--transition-duration-extra-long);
}
.js-intersectTarget[data-animation="fade-blur"][data-intersect="intersected"]{
  animation-name: fade-blur;
  opacity: 1;
}


@keyframes fade-blur {
  from {
    opacity: 0;
    filter: blur(15px);
  }
  to {
    opacity: 1;
    filter: blur(0px);
  }
}


@media (min-width: 768px) {
}



/* =============================================================
  ページャー & パンクズ
============================================================= */
.pager-common{
  display: grid;
  justify-content: space-between;
  align-items: center;
  grid-template-columns: 4.5rem max-content 4.5rem;
  gap: 1rem;
  width: 100%;
}
.pager-rect{
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid var(--color-text-default);
  border-radius: 99%;
  overflow: hidden;
  display: grid;
  place-content: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.pager-rect--prev{
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2245%22%20height%3D%2245%22%20viewBox%3D%220%200%2045%2045%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_6%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%206%22%20transform%3D%22translate(370%206945)%20rotate(180)%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_14%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2014%22%20width%3D%2245%22%20height%3D%2245%22%20rx%3D%2222.5%22%20transform%3D%22translate(325%206900)%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20id%3D%22_%22%20data-name%3D%22%26gt%3B%22%20d%3D%22M1350.1%2C32.5a.5.5%2C0%2C0%2C1-.384-.18l-5-6%2C.768-.64%2C4.616%2C5.539%2C4.616-5.539.768.64-5%2C6A.5.5%2C0%2C0%2C1%2C1350.1%2C32.5Z%22%20transform%3D%22translate(319.5%208272.6)%20rotate(-90)%22%20fill%3D%22%23111%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E')
}
.pager-rect--next{
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2245%22%20height%3D%2245%22%20viewBox%3D%220%200%2045%2045%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_5%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%205%22%20transform%3D%22translate(-325%20-6900)%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_14%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2014%22%20width%3D%2245%22%20height%3D%2245%22%20rx%3D%2222.5%22%20transform%3D%22translate(325%206900)%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20id%3D%22_%22%20data-name%3D%22%26gt%3B%22%20d%3D%22M1350.1%2C32.5a.5.5%2C0%2C0%2C1-.384-.18l-5-6%2C.768-.64%2C4.616%2C5.539%2C4.616-5.539.768.64-5%2C6A.5.5%2C0%2C0%2C1%2C1350.1%2C32.5Z%22%20transform%3D%22translate(319.5%208272.6)%20rotate(-90)%22%20fill%3D%22%23111%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E')
}
.pager-rect.disable{
  opacity: .4;
}

.pager-numeric{
  display: flex;
  gap: .9rem;
}
.page-numbers{
  width: 3rem;
  height: 3rem;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  color: var(--color-tab);
}
.page-numbers.current{
  color: var(--color-text-default);
  font-weight: var(--fw-medium);
  position: relative;
}
.page-numbers.dots{
  width: unset;
}
.page-numbers.current::after{
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background-color: var(--color-text-default);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
}

@media (min-width: 769px) {
  .pager-common{
    justify-content: center;
    grid-template-columns: 5.5rem max-content 5.5rem;
    gap: 5rem;
  }
  .pager-rect{
    width: 5.5rem;
    height: 5.5rem;
  }
  .pager-numeric{
    display: flex;
    gap: 1.6rem;
  }
  .page-numbers{
    font-size: 17px;
  }
}

.breadcrumb-area{
  overflow-x: hidden;
}
.breadcrumb-custom{
  width: 100%;
  margin-block: 0;
  margin-inline: auto;
  padding-block: 1.5rem;
  padding-inline: 2rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  overflow-x: auto;
}
.breadcrumb-custom li{
  font-size: 11px;
  line-height: 1;
  letter-spacing: .03em;
  white-space: nowrap;
  color: #AAAAAA;
}
.breadcrumb-custom li a{
  color: var(--color-text-default);
}
.breadcrumb-custom li + li{
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.breadcrumb-custom li + li::before{
  content: '';
  width: 5px;
  height: 1px;
  background-color: var(--color-text-gray-08);
}

@media (min-width: 769px) {
  .breadcrumb-custom{
    width: min(90%,1500px);
    gap: 2rem;
    padding-inline: 0;
  }
  .breadcrumb-custom li + li{
    gap: 2rem;
  }
}



button.c-button-cta:hover,
.c-button-cta.clicked {
  opacity: .5;
}
@media (hover: hover) {
  a,
  button{
    transition: opacity var(--transition-default);
  }
  a:hover,
  button:hover{
    opacity: var(--hover-opacity);
  }
  .pager-common a:not(.disable):hover{
    cursor: pointer;
  }
}