@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@500;600&family=EB+Garamond:ital,wght@0,400;0,500&display=swap');

/*-----------------------

         変数

-----------------------*/
:root {
  --baseColor: #1a1a1a;
  --mainColor: #1a1a1a;
  --subColor: #484848;
  --accentColor: transparent;
  --colorW: #fff;
  --base50Color: #8c8c8c;
  --main50Color: #8c8c8c;
  --sub50Color: #a3a3a3;
  --accent50Color: transparent;
  --base10Color: #e8e8e8;
  --main10Color: #e8e8e8;
  --sub10Color: #ededed;
  --accent10Color: transparent;
}

/*-----------------------

         COMMON

-----------------------*/
body {
  width: 100%;
  color: var(--baseColor);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  font-family: 'Shippori Mincho B1', 'EB Garamond', serif;
}

/*-----------------------

         HEADER

-----------------------*/
/* ヘッダーをメインビジュアルに重ねる */
header.top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 200;
}

/* トップページ: 背景を透明にしてビジュアルを全面表示 */
.body-page-detail-top header.top {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* トップページ: ハンバーガーボタン境界線を透明ヘッダー対応に */
.body-page-detail-top header.top .pc .drawer-toggle.drawer-hamburger {
  border-color: var(--baseColor) !important;
  background: transparent !important;
}

/* ナビゲーションバーを非表示 */
header.top .navi {
  display: none;
}

/* PC: ハンバーガーの絶対配置基準・ベースCSSのmax-width等を無効化 */
header.top .pc {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* PCヘッダー内レイアウト（直接の子のみ。drawer-nav 内は除外） */
header.top .pc > .hdr-inner {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 70px;
}

/* ドロワーナビ内の hdr-inner：外側ヘッダーと同じ余白 */
header.top .drawer-nav .hdr-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 20px !important;
  height: auto !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* ドロワーヘッダー右エリア（ログイン＋閉じるボタン） */
.drawer-hdr-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 閉じるボタン */
.drawer-close-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: block;
  line-height: 0;
}

.drawer-close-btn img {
  height: 44px;
  width: auto;
  display: block;
}

.drawer-close-btn:hover {
  opacity: 0.7;
}

/* ドロワー「/」セパレータを非表示 */
.drawer-nav a::after,
.drawer-nav li::after,
.drawer-nav .drawer-menu-item::after {
  content: none !important;
  display: none !important;
}

/* ドロワー 2列レイアウト */
.drawer-cols {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
  padding: 30px 20px 40px;
}

.drawer-col-left {
  flex: none;
  width: auto;
  min-width: 180px;
  padding-right: 0;
}

.drawer-col-right {
  flex: none;
  width: auto;
  min-width: 160px;
  padding-left: 0;
}

.drawer-col-left ul,
.drawer-col-right ul {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}

/* 左列：大きいテキスト・左寄せ */
.drawer-col-left li a {
  display: block;
  padding: 12px 0;
  color: var(--baseColor);
  text-decoration: none;
  font-size: 2rem;
  letter-spacing: 0.05em;
  text-align: left;
}

.drawer-col-left li a:hover {
  opacity: 0.6;
}

/* 右列：小さいテキスト・左寄せ */
.drawer-col-right .drawer-menu li a {
  display: block;
  padding: 8px 0;
  color: var(--baseColor);
  text-decoration: none;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  text-align: left;
}

.drawer-col-right .drawer-menu li a:hover {
  opacity: 0.6;
}

/* ロゴを fixed で左上角に固定（コンテナ制約をバイパス） */
header.top .pc .hdr-inner h1 {
  position: fixed !important;
  top: 10px !important;
  left: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 300;
}

/* right-Area を fixed で右上角に固定（コンテナ制約をバイパス） */
header.top .pc .right-Area {
  position: fixed !important;
  top: 10px !important;
  right: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  z-index: 300;
  margin: 0 !important;
}

/* ログインリンク */
header.top .login a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--baseColor);
  font-size: 1.4rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.05em;
}

header.top .login a:hover {
  opacity: 0.6;
}

header.top .login a img {
  width: 22px;
  height: 22px;
}

/* ハンバーガーメニューボタン */
header.top .drawer-toggle.drawer-hamburger {
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  display: block !important;
  cursor: pointer;
  z-index: auto;
  line-height: 0;
}

header.top .drawer-toggle.drawer-hamburger img {
  height: 44px;
  width: auto;
  display: block;
}

/* ドロワーナビ：パディングを全リセット */
header.top .drawer-nav {
  background: #fff;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

header.top .drawer-nav .drawer-menu a {
  color: var(--baseColor);
  font-size: 1.6rem;
}

header.top .drawer-nav .drawer-menu a:hover {
  opacity: 0.6;
}

/* SPヘッダー */
header.top .sp {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* SP: hdr-inner は高さ確保のみ */
header.top .sp .hdr-inner {
  height: 54px;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

/* SP: ロゴ fixed 左上 */
header.top .sp .hdr-inner h1 {
  position: fixed !important;
  top: 12px !important;
  left: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 300;
}

/* SP: ログイン＋メニュー fixed 右上 */
header.top .sp .sp-right-area {
  position: fixed !important;
  top: 10px !important;
  right: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 300;
  margin: 0 !important;
}

/* SP: ログインアイコン（テキストなし） */
header.top .sp .sp-right-area .login a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

header.top .sp .sp-right-area .login a img {
  width: 24px !important;
  height: 24px !important;
}

header.top .sp .drawer-hamburger .text {
  font-size: 1.1rem;
  color: var(--baseColor);
  margin: 0;
  padding: 0;
}

header.top .sp .drawer-nav {
  background: #fff;
}

/* SP ドロワーヘッダー（ロゴ＋閉じるボタン横並び） */
header.top .sp .drawer-nav .sp-drawer-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
}

header.top .sp .drawer-nav .sp-drawer-hdr .logo {
  margin: 0;
  padding: 0;
}


/*-----------------------

     PAGE HEADER（下層ページ）

-----------------------*/
/* 下層ページ全般（トップページ以外）: 背景画像をヘッダー領域（y=0）から表示するため上部コンテナをリセット */
body:not(.body-page-detail-top) .top-container,
body:not(.body-page-detail-top) .content-banner {
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 下層ページ全般（トップページ以外）のヘッダーを透明にして背景画像を全面表示 */
body:not(.body-page-detail-top) header.top {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* ページタイトルセクション */
.content-header {
  background-image: url('../img/title-bg-pc.webp');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  background-color: transparent;
  padding: 100px 60px 60px;
  text-align: left;
  margin-bottom: 0;
}

.content-header .page-header {
  color: #000 !important;
  font-size: 6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  border: none;
  margin: 0;
  padding: 0;
  font-family: 'Shippori Mincho B1', serif;
  line-height: 1.2;
}

/* サブタイトル（大きめ装飾テキスト・薄グレー） */
.page-subtitle {
  display: block;
  font-family: 'EB Garamond', serif;
  font-size: 3.6rem;
  font-weight: 400;
  font-style: normal;
  color: rgba(26, 26, 26, 0.18) !important;
  letter-spacing: 0.12em;
  margin-top: 6px;
  line-height: 1.2;
}

/*-----------------------

         FOOTER

-----------------------*/
/* メインビジュアル下部の余白を除去してフッターを密着 */
.body-page-detail-top .detail-page.content-wrapper {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.body-page-detail-top .fr-view > p:last-child,
.body-page-detail-top .fr-view p:last-child {
  margin-bottom: 0 !important;
}

footer.main-footer {
  background-image: url('../img/footer-bg-pc.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  padding: 0;
}

/*-----------------------
     FOOTER CTA
-----------------------*/
.ftr-cta {
  text-align: center;
  padding: 80px 20px 50px;
}

.ftr-cta .container {
  text-align: center;
}

.ftr-cta-heading {
  font-family: 'Shippori Mincho B1', serif;
  font-size: 3.2rem;
  font-weight: 600;
  color: var(--baseColor);
  letter-spacing: 0.06em;
  line-height: 1.5;
  margin: 0 0 18px;
  text-align: center !important;
}

.ftr-cta-sub {
  font-family: 'EB Garamond', serif;
  font-size: 1.4rem;
  font-style: normal;
  color: var(--subColor);
  letter-spacing: 0.15em;
  margin: 0 0 28px;
  text-align: center !important;
}

.ftr-cta-body {
  font-size: 1.6rem;
  color: var(--baseColor);
  letter-spacing: 0.08em;
  margin: 0 0 44px;
  text-align: center !important;
}

.ftr-cta-btn {
  text-align: center !important;
  margin: 0;
}

.ftr-cta-btn a {
  display: inline-block;
  background-color: var(--baseColor);
  color: var(--colorW);
  font-family: 'Shippori Mincho B1', serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: 50px;
  padding: 20px 70px;
  transition: opacity 0.2s;
}

.ftr-cta-btn a:hover {
  opacity: 0.75;
}

/*-----------------------
     FOOTER NAV
-----------------------*/
footer.main-footer > .container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

footer.main-footer .ftr-navi {
  text-align: center;
  padding-top: 40px !important;
  padding-bottom: 40px;
  margin-top: 0 !important;
}

footer.main-footer .ftr-navi ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  gap: 0;
}

footer.main-footer .ftr-navi ul li {
  display: flex;
  align-items: center;
  font-size: 1.3rem;
}

footer.main-footer .ftr-navi ul li + li::before {
  content: '｜';
  color: var(--sub50Color);
  margin: 0 4px;
}

footer.main-footer .ftr-navi ul li a {
  color: var(--baseColor);
  text-decoration: none;
  font-size: 1.3rem;
  transition: opacity 0.2s;
}

footer.main-footer .ftr-navi ul li a:hover {
  opacity: 0.6;
}

footer.main-footer .ftr-navi .ftr-contact {
  margin: 0 0 30px;
}

footer.main-footer .ftr-navi .ftr-contact a {
  display: inline-block;
  color: var(--baseColor);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
  border: 1px solid var(--baseColor);
  border-radius: 40px;
  padding: 12px 50px;
  transition: background-color 0.2s, color 0.2s;
}

footer.main-footer .ftr-navi .ftr-contact a:hover {
  background-color: var(--baseColor);
  color: var(--colorW);
}

footer.main-footer .ftr-navi .logo {
  text-align: center;
  margin: 0 0 20px;
}

footer.main-footer .ftr-navi .logo img {
  max-width: 280px;
  height: auto;
  display: inline-block;
}

footer.main-footer .ftr-navi .copy,
footer.main-footer .ftr-navi .copy small,
footer.main-footer .ftr-navi .copy span {
  font-size: 1.2rem;
  color: var(--baseColor) !important;
  margin: 0;
}

footer.main-footer .ftr-navi .copy a {
  color: var(--baseColor) !important;
  text-decoration: none;
}

footer.main-footer .ftr-navi .copy a:hover {
  text-decoration: underline;
}

/*-----------------------

     RESPONSIVE

-----------------------*/
/* トップページ: コンテナの上スペースをリセット */
.body-page-detail-top .top-container,
.body-page-detail-top .content-banner {
  padding-top: 0;
  margin-top: 0;
}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1368px) {}

@media screen and (max-width: 1280px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 559px) {
  header.top .drawer-toggle.drawer-hamburger img,
  .drawer-close-btn img {
    height: 36px;
  }
  .content-header {
    background-image: url('../img/title-bg-sp.webp');
    background-position: right center;
    padding: 80px 24px 40px;
  }
  .content-header .page-header {
    font-size: 3.6rem !important;
  }
  .page-subtitle {
    font-size: 2rem !important;
  }
  footer.main-footer {
    background-image: url('../img/footer-bg-sp.webp');
  }
  .ftr-cta {
    padding: 60px 20px 40px;
  }
  .ftr-cta-heading {
    font-size: 2.4rem !important;
  }
  .ftr-cta-btn a {
    padding: 16px 40px;
    font-size: 1.5rem;
  }
  footer.main-footer .ftr-navi ul {
    flex-direction: column;
    gap: 6px;
  }
  footer.main-footer .ftr-navi ul li + li::before {
    display: none;
  }
  footer.main-footer .ftr-navi .logo img {
    max-width: 200px;
  }
  footer.main-footer .ftr-navi .ftr-contact a {
    padding: 12px 36px;
  }
}

@media screen and (max-width: 375px) {}

@media screen and (max-width: 361px) {}