@charset "UTF-8";
#Billboard {position: relative;}
#Billboard figure {overflow: hidden;background-color: #213e52;}
#Billboard figure img {transform: scale(1) rotate(0deg);filter: contrast(.5) brightness(3.5) grayscale(0.7);-webkit-backface-visibility: hidden;backface-visibility: hidden;will-change: filter transform;mix-blend-mode: multiply;}
#Billboard .ttl-style-01 {opacity: 0;transition: opacity 1.8s 1s ease, letter-spacing 4s 1s cubic-bezier(0.25, 1, 0.5, 1);-webkit-backface-visibility: hidden;backface-visibility: hidden;will-change: letter-spacing;position: absolute;top: calc(50% + 1.5em);left: 50%;transform: translate(-50%, -50%);z-index: 2;letter-spacing: 0.2em;text-align: center;font-size: 150%;font-family: var(--serif);white-space: nowrap;color: #fff;}
#Billboard .ttl-style-01 span {display: block;margin-bottom: 0.5em;background: linear-gradient(0deg, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 68%) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 400%;font-weight: 400;font-family: var(--garamond);line-height: 1;}

#Billboard.staging figure img {filter: contrast(1) brightness(1) grayscale(0);transform: scale(1.05) rotate(1deg);transition: filter var(--easing) 2000ms, transform var(--easing) 10000ms;}
#Billboard.staging .ttl-style-01 {opacity: 1;letter-spacing: 0.15em;}
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Main .block-location-01 .container > figure {margin-bottom: 3em;}
#Main .block-location-01 .swiper .swiper-slide {position: relative;width: 20em;}
#Main .block-location-01 .swiper .swiper-slide figure {margin: 0 1px;overflow: hidden;}
#Main .block-location-01 .swiper .swiper-slide figcaption {position: absolute;bottom: 0;left: 0;right: 0;padding: 1.5em 1em 0.5em;background: linear-gradient(0deg, rgb(0 0 0 / 50%) 0%, rgb(0 0 0 / 0%) 100%);font-family: var(--serif);color: #fff;}
#Main .block-location-01 .swiper .swiper-slide figcaption small {display: block;line-height: 1;font-size: 62.5%;}
#Main .block-location-01 .swiper-pagination {position: static;}
#Main .block-location-01 .swiper-pagination-bullet {border-radius: 0;width: 20px;height: 3px;}
#Main .block-location-01 .swiper-pagination-bullet-active {background-color: #333;}

#Main .block-location-02 {background: transparent url("../img/common/bg_01.webp") no-repeat 50% 0 / cover;padding: 5em 0;}
#Main .block-location-02 article h3 {margin-bottom: 0.5em;font-size: 150%;line-height: 1.25;font-family: var(--serif);color: #8b6b00;}
#Main .block-location-02 article h3 small {font-family: var(--serif);font-size: 62.5%;letter-spacing: 0.2em;white-space: nowrap;color: #8b6b00;}
#Main .block-location-02 article h3 strong {font-weight: normal;font-size: 150%;line-height: 0;}
#Main .block-location-02 article h4 {margin-bottom: 0.75em;line-height: 1.5;font-family: var(--serif);font-size: 125%;}
#Main .block-location-02 article h4 span {display: inline-block;white-space: nowrap;}
#Main .block-location-02 article h4 + p {font-family: var(--serif);font-size: 100%;letter-spacing: 0.2em;}
#Main .block-location-02 article h4 + p span {display: inline-block;white-space: nowrap;}
#Main .block-location-02 article {position: relative;padding-left: 2em;}
#Main .block-location-02 article::before {content: attr(data-title)"";position: absolute;top: 0;left: 0;transform-origin: 0 100%;transform: rotate(90deg) translateX(-1em);background: #8b6b00;-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-family: 'EB Garamond', "serif";letter-spacing: 0.15em;line-height: 1;}
#Main .block-location-02 article::after {content: "";position: absolute;top: 6em;bottom: 0;left: 3px;width: 1px;background: #8b6b00;}
#Main .block-location-02 article figure {position: relative;margin-bottom: 1em;overflow: hidden;}
#Main .block-location-02 article[data-title="Education"]:nth-of-type(1) h3 {letter-spacing: 0;}
#Main .block-location-02 .container {background-color: #fff;padding: 0;}

/* ------------------------------
   Tabs
------------------------------ */
.tabs-container {overflow-x: auto;}
.tabs {position: relative;display: flex;gap: 2px;scrollbar-width: none;}
.tabs::-webkit-scrollbar {display: none;}

.tab-btn {flex: 1;border: none;cursor: pointer;padding: 1em;background-color: #59636a;position: relative;font-size: 125%;font-family: var(--serif);letter-spacing: 0.1em;text-align: center;color: #fff;}
.tab-btn small {display: block;font-size: 60%;}
.tab-btn.active {background-color: #191b1c;}

.tab-viewport {position: relative;overflow: hidden;transition: height .45s ease;}
.tab-content {position: absolute;inset: 0;opacity: 0;transition: opacity .45s ease, transform .45s ease;padding: 20px 0;}
.tab-content.active {position: relative;opacity: 1;}

/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Main .block-location-02 article {flex: 1;}
  #Main .block-location-02 .column {display: flex;gap: 2em;justify-content: space-between;padding: 3em;}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1280px) {}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  #Billboard figure img {object-fit: cover;height: 100vw;object-position: 38% 0;}
  #Billboard .ttl-style-01 {font-size: 125%;}
  #Billboard .ttl-style-01 span {font-size: 200%;}

  #Main .block-location-01 .swiper .swiper-slide {width: 16em;}

  #Main .block-location-02 {padding: 2em 0;}
  #Main .block-location-02 article {margin: 1em 2em 1em 1em;}
  #Main .block-location-02 article h3 {font-size: 125%;}
  #Main .block-location-02 article h3 small {display: block;margin: 0;}
  #Main .block-location-02 article h4 {font-size: 100%;}
  #Main .block-location-02 article h4 + p {font-size: 87.5%;letter-spacing: 0.05em;}
  #Main .block-location-02 article + article {margin-top: 3em;}

  .tabs {flex-wrap: wrap;}
  .tab-btn {width: 50%;}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}