@charset "utf-8";
/* CSS Document */



html, body {
  margin: 0;
  padding: 0;
  background: linear-gradient(90deg, rgba(226, 248, 252, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(226, 248, 252, 1) 100%);
}



/* 本文レイヤーを“前面”へ */
#page-layer{
  position: relative;  /* ← これが超重要（z-indexを効かせる） */
  z-index: 1;
}

/* 月の固定表示（右下固定・正方形維持） */
.moon {
  position: fixed;
  right: -6vw;
  bottom: -20vw;
  width: 60%;
  aspect-ratio: 1 / 1;
  height: auto;
  background: url("../img/moon.webp") no-repeat center/contain;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 767px) {
  .moon {
    right: -20vw;
    bottom: -20vw;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
  }
}




/*---------------------------*/
/* ===== ヘッダー（追従） ===== */
/*---------------------------*/
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  margin: 0; /* 念のため追加 */
  padding: 0; /* 必要なら調整 */
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 左ロゴ */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none; /* 下線を消す */
  color: #333333; /* 文字色を指定 */
}
.brand__title {
  font-family: "HOT-GFKaishokk-E", "Yu Mincho", serif;
  font-size: 36px;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--ink);
  margin: 0;
  color: #333333;
}
/* PCナビ */
.nav {
  display: flex;
  align-items: center;
  gap: 20px; /* ← 20pxに変更 */
  font-family: "ZenOldMincho-Bold", "Yu Mincho", serif;
}
.nav a {
  position: relative;
  text-decoration: none;
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  padding: 8px 0;
  transition: color .25s ease; 
}
.nav a::after { /* 下線アニメ */
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 3px;
  width: 0;
  background: #678DBB; /* ← 下線の色を指定 */
  transition: width .25s ease;
}
.nav a:hover {
  color: #678DBB; /* ← ホバー時に文字色変更 */
}
.nav a:hover::after {
  width: 100%; /* ← 左からにゅーっと広がる */
}
/* お問い合わせ（PC専用ボタン） */
/* ===== お問い合わせボタン ===== */







.contact-btn{
  position: relative;
  display:inline-block;
  padding:10px 32px!important;
  border-radius:999px;
  background:#678DBB;
  color: #fff !important;
  border:2px solid #678DBB;
  font-size:18px;
  font-family:"ZenOldMincho-Bold","Yu Mincho",serif;
  text-decoration:none;
  overflow:hidden;
  transition: color .4s ease;
  isolation:isolate;
}
.contact-btn::before{
  content:""; position:absolute; top:50%; left:50%;
  width:12px; height:12px; background: #fff;
  border-radius:50%; transform:translate(-50%,-50%) scale(0);
  transition: transform .4s ease-in-out!important; z-index:-1; pointer-events:none;
}
.contact-btn:hover{ color:#678DBB !important; }
.contact-btn:hover::before{ transform:translate(-50%,-50%) scale(16)!important; }









/* ====== 767px以下：ハンバーガーに切替 ====== */
@media (max-width:767px) {
  .nav, .contact-btn {
    display: none;
  } /* PCナビ非表示 */
  .brand__title {
    font-size: 28px;
  }
}
/* ====== ハンバーガー（あなたのコードを整理して流用） ====== */
/* 三本線（:before/:after を必ず :: に） */
.menu-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  cursor: pointer;
  background: transparent;
  z-index: 90;
}
.menu-btn span {
  position: relative;
  display: block;
  width: 25px;
  height: 3px;
  border-radius: 3px;
  background: #333333;
  transition: .5s;
}
.menu-btn span::before, .menu-btn span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 25px;
  height: 3px;
  border-radius: 3px;
  background: #333333;
  transition: .5s;
}
.menu-btn span::before {
  top: -8px;
}
.menu-btn span::after {
  top: 8px;
}
#menu-btn-check {
  display: none;
}
#menu-btn-check:checked ~ .menu-btn span {
  background: rgba(255, 255, 255, 0);
}
#menu-btn-check:checked ~ .menu-btn span::before {
  top: 0;
  transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
}
/* メニュー本体（スライドイン） */
.menu-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%;
  z-index: 80;
  background: #E2F8FC;
  transition: all .5s;
}
#menu-btn-check:checked ~ .menu-content {
  left: 0;
}
.menu-content .m-nav {
  padding: 100px 18px 24px;
  margin: 0;
}
.menu-content .m-nav li {
  list-style: none;
  margin: 0 0 14px;
}
/* --- 青ボタン（上3つ） --- */
.m-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  font-family: 'Noto Sans JP', "Yu Mincho", serif;
  font-size: 18px;
  line-height: 1;
  padding: 14px 18px;
  border-radius: 999px;
  background: #678DBB;
  color: #fff;
  border: 2px solid #678DBB;
  font-family: "ZenOldMincho-Bold", "Yu Mincho", serif;
}
/* --- 白ボタン（お問い合わせ） --- */
.m-btn--ghost {
  background: #fff;
  color: #678DBB;
  border-color: #678DBB;
  font-family: "ZenOldMincho-Bold", "Yu Mincho", serif;
}
/* 共通：pill & 中央から広がるアニメの土台 */
.contact-btn, .m-btn--ink, .m-btn--ghost {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  isolation: isolate;
  transition: color .4s ease;
}
/* 中央の円（共通） */
.contact-btn::before, .m-btn--ink::before, .m-btn--ghost::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .4s ease-in-out;
  z-index: -1;
  pointer-events: none;
}
/* ── 青→白（PCお問い合わせ & 上3つ） ── */
.contact-btn, .m-btn--ink {
  background: #678DBB;
  color: #fff !important;
  border: 2px solid #678DBB;
}
.contact-btn::before, .m-btn--ink::before {
  background: #fff; /* 広がる色＝白 */
}
.contact-btn:hover, .contact-btn:focus-visible, .m-btn--ink:hover, .m-btn--ink:focus-visible {
  color: #678DBB !important; /* 反転：文字を青に */
}
.contact-btn:hover::before, .contact-btn:focus-visible::before, .m-btn--ink:hover::before, .m-btn--ink:focus-visible::before {
  transform: translate(-50%, -50%) scale(60); /* 中央から広げる */
}
/* ── 白→青（モバイル4つ目） ── */
.m-btn--ghost {
  background: #fff;
  color: #678DBB !important;
  border: 2px solid #678DBB;
}
.m-btn--ghost::before {
  background: #678DBB; /* 広がる色＝青 */
}
.m-btn--ghost:hover, .m-btn--ghost:focus-visible {
  color: #fff !important; /* 反転：文字を白に */
}
.m-btn--ghost:hover::before, .m-btn--ghost:focus-visible::before {
  transform: translate(-50%, -50%) scale(60);
}
/* ====== ハンバーガーメニュー内SNSエリア ====== */
.hamburger_sns-section {
  position: relative;
  padding: 18px 16px 28px;
  margin-top: 8px;
}

.hamburger_sns-section .hamburger_sns-tile {
  position: absolute;
  inset: 0 0 auto 0;
  top: -20px;
  height: 160px;
  background: url("../img/柄シームレス素材4.webp") repeat;
  background-size: 600px 600px;
  opacity: 1;
  z-index: 0;
}

.hamburger_sns-section .hamburger_sns-ribbon {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  border: 2px solid var(--ink);
  border-radius: 9999px;
  padding: 14px 18px;
  margin: 0px 12px 16px;
  display: flex;
  justify-content: center;
  gap: 30px;
}

.hamburger_sns-btn {
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: transform .2s ease, filter .2s ease;
}
.hamburger_sns-btn img {
  width: 58px;
  height: 58px;
  display: block;
}
@media (hover:hover) {
  .hamburger_sns-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
  }
}

/* タイトルエリア */
.hamburger_club-title {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #333333;
  margin-top: 60px;
}
.hamburger_club-line {
  margin: 0 0 6px;
  display: flex;
  justify-content: center;
  gap: 8px;
  line-height: 1;
}
.hamburger_badge {
  display: inline-block;
  padding: 6px 10px;
  font-family: "ZenOldMincho-Bold", "Yu Mincho", serif;
  font-size: 36px;
  text-shadow: 2px 2px 0 #fff;
}
.hamburger_club-name {
  margin: 0;
  font-family: "ZenOldMincho-Bold", "Yu Mincho", serif;
  font-weight: 700;
  font-size: 80px;
  letter-spacing: .06em;
  line-height: 1.1;
  text-shadow: 3px 3px 0 #fff;
  color: #333333;
}
/* レイアウト微調整（狭い幅） */
@media (max-width:360px) {
  .hamburger_sns-section .hamburger_sns-ribbon {
    padding: 12px 14px;
    gap: 14px;
  }
  .hamburger_sns-btn {
    width: 52px;
    height: 52px;
  }
  .hamburger_sns-btn img {
    width: 40px;
    height: 40px;
  }
  .badge {
    font-size: 22px;
  }
  .hamburger_club-name {
    font-size: 40px;
  }
}
/* （任意）モバイルでも軽いホバーを付けたい場合 */
@media (hover:hover) {
  .m-btn:hover {
    filter: brightness(1.05);
  }
  .m-btn--ghost:hover {
    background: #f8fbff;
  }
}
/* PCではハンバーガー非表示 */
@media (min-width:768px) {
  .hamburger-menu {
    display: none;
  }
}






/* ==================== */
/*        Footer        */
/* ==================== */
:root{
  --foot-ink: #2f3e4f;
  --foot-bar-bg: #678DBB;   /* ヘッダーの色違い帯 */
  --foot-link:  #ffffff;
  --foot-accent:#678DBB;    /* 既存の青と合わせる */
}

/* === PC：上部の色帯 === */
.site-footer .foot-bar{
	position: relative;     /* ← z-index を効かせるために relative を指定 */
  z-index: 10;            /* ← 月(.moon)より前に出す */
  background: var(--foot-bar-bg);
  color: var(--foot-link);
}
.site-footer .foot-bar__inner{
  width:min(1200px,92%);
  margin:0 auto;
  padding: 12px 20px;
}
.site-footer .foot-nav{
  display:flex; align-items:center; gap:6vw;
  font-family:"ZenOldMincho-Bold","Yu Mincho",serif;
	 justify-content: center;
}
.site-footer .foot-nav a{
  position:relative; text-decoration:none;
  color: var(--foot-link);
  font-size:16px; line-height:1; padding:8px 0;
  transition:color .25s ease;
}
.site-footer .foot-nav a::after{
  content:""; position:absolute; left:0; bottom:-6px;
  height:3px; width:0; background:#fff; transition:width .25s ease;
}
.site-footer .foot-nav a:hover{ color:#fff; }
.site-footer .foot-nav a:hover::after{ width:100%; }

/* お問い合わせだけ pill ボタン（色反転） */






.site-footer .foot-contact-btn{
  position: relative;
  display:inline-block;
  padding:10px 32px!important;
  border-radius:999px;
  background:#fff;
  color: var(--foot-bar-bg) !important;
  border:2px solid #fff;
  font-size:18px;
  font-family:"ZenOldMincho-Bold","Yu Mincho",serif;
  text-decoration:none;
  overflow:hidden;
  transition: color .4s ease;
  isolation:isolate;
}
.site-footer .foot-contact-btn::before{
  content:""; position:absolute; top:50%; left:50%;
  width:12px; height:12px; background: var(--foot-bar-bg);
  border-radius:50%; transform:translate(-50%,-50%) scale(0);
  transition: transform .4s ease-in-out; z-index:-1; pointer-events:none;
}
.site-footer .foot-contact-btn:hover{ color:#fff !important; }
.site-footer .foot-contact-btn:hover::before{ transform:translate(-50%,-50%) scale(14); }







/* スマホでは帯は非表示 */
@media(max-width:767px){
  .site-footer .foot-bar{ display:none; }
}

/* === タイル背景＋白パネル === */
.site-footer .foot-panels{ position:relative; padding: clamp(32px,6vw,64px) 0 0; overflow:hidden; }
.site-footer .foot-tile{
  position:absolute; inset:0 auto auto 0; width:100%; height:auto!important; min-height:440px; inset: 0; /* ← 上下左右いっぱいに広げる */
  background:url("../img/柄シームレス素材4.webp") repeat; background-size:600px 600px; z-index:0;
}

/* スマホ用ナビ（タイル内） */
.site-footer .foot-nav-sp{ position:relative; z-index:1; width:min(960px,60%); margin:0 auto 12px; }
.site-footer .foot-mnav{ list-style:none; margin:0; padding:0; display:none; gap:10px; }
.site-footer .foot-mbtn{
  display:block; width:100%; box-sizing:border-box; text-align:center; text-decoration:none;
  font-family:"ZenOldMincho-Bold","Yu Mincho",serif; font-size:18px; line-height:1;
  padding:14px 18px; border-radius:999px; border:2px solid var(--foot-accent); position:relative; overflow:hidden;
  isolation:isolate; transition:color .4s ease;
}
.site-footer .foot-mbtn::before{
  content:""; position:absolute; top:50%; left:50%; width:12px; height:12px; border-radius:50%;
  transform:translate(-50%,-50%) scale(0); transition: transform .4s ease-in-out; z-index:-1; pointer-events:none;
}
.site-footer .foot-mbtn--ink{ background: var(--foot-accent); color:#fff !important; }
.site-footer .foot-mbtn--ink::before{ background:#fff; }
.site-footer .foot-mbtn--ink:hover{ color: var(--foot-accent) !important; }
.site-footer .foot-mbtn--ink:hover::before{ transform:translate(-50%,-50%) scale(60); }

.site-footer .foot-mbtn--ghost{ background:#fff; color: var(--foot-accent) !important; }
.site-footer .foot-mbtn--ghost::before{ background: var(--foot-accent); }
.site-footer .foot-mbtn--ghost:hover{ color:#fff !important; }
.site-footer .foot-mbtn--ghost:hover::before{ transform:translate(-50%,-50%) scale(60); }

@media(max-width:767px){
  .site-footer .foot-mnav{ display:grid; }
}

/* 2カラム白カード */
.site-footer .foot-panels__inner{
  position:relative; z-index:1;
  width:min(1200px,92%); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap: clamp(24px,4vw,40px);
  padding-bottom: clamp(24px,6vw,56px);
}
.site-footer .foot-card{
  background: rgba(255,255,255,0.95);
  border-radius: 16px;
  padding: clamp(16px,3vw,24px);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  text-align: center;
}
.site-footer .foot-card__lead{
  margin: 4px 0 12px;
  font-family:"ZenOldMincho-Bold","Yu Mincho",serif;
  letter-spacing:.08em; color:#333; font-size: clamp(16px,1.9vw,18px);
}

/* ピル型ボタン（PC/タブレット表示） */
.site-footer .foot-contact-list,
.site-footer .foot-sns-list{
  list-style:none; margin:0 auto; padding:0; width:min(560px,100%);
  display:grid; grid-template-columns:1fr; gap:12px;
}
.site-footer .foot-btn{
  position:relative; display:flex; align-items:center; justify-content:center; gap:12px;
  height:56px; padding:0 20px; border-radius:999px; color:#fff; text-decoration:none;
  overflow:hidden; isolation:isolate; font:600 16px/1 "Noto Sans JP","Yu Gothic",sans-serif;
  box-shadow:0 6px 16px rgba(0,0,0,.06); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.site-footer .foot-blue{ background:#678DBB; }
.site-footer .foot-green{ background:#06C755; }
.site-footer .foot-fb{ background:#0866FF; }
.site-footer .foot-ig{ background:#FFAF53; }
.site-footer .foot-x { background:#8F8F8F; }
.site-footer .foot-ic{ width:28px; height:28px; }
.site-footer .foot-txt{ white-space:nowrap; }
.site-footer .foot-btn::before{
  content:""; position:absolute; top:0; left:-75%; width:50%; height:100%; transform:skewX(-25deg);
  background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 100%); z-index:1;
}
.site-footer .foot-btn:hover::before{ animation: foot-shine .75s; }
@keyframes foot-shine{ 100%{ left:125%; } }
@media(hover:hover){
  .site-footer .foot-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.12); filter:brightness(1.05);}
  .site-footer .foot-btn:active{ transform:translateY(0); box-shadow:0 6px 16px rgba(0,0,0,.06); }
}

/* スマホ：丸アイコン */
.site-footer .foot-contact-list--sp,
.site-footer .foot-sns-list--sp{
  display:none; gap:22px; justify-content:center; list-style:none; padding:0; margin: 10px 0 0;
}
.site-footer .foot-circle{
  position:relative; width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center; overflow:hidden; isolation:isolate;
  box-shadow:0 6px 16px rgba(0,0,0,0.08) inset, 0 6px 16px rgba(0,0,0,0.08);
}
.site-footer .foot-circle img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.site-footer .foot-circle.tel,
.site-footer .foot-circle.mail{ background:#678DBB; }
.site-footer .foot-circle.line{ background:#06C755; }
.site-footer .foot-circle.fb{ background:#0866FF; }
.site-footer .foot-circle.ig{ background:#FFAF53; }
.site-footer .foot-circle.xx{ background:#8F8F8F; }
.site-footer .foot-circle::before{
  content:""; position:absolute; top:0; left:-75%; width:50%; height:100%; transform:skewX(-25deg);
  background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 100%); z-index:1;
}
.site-footer .foot-circle:hover::before{ animation: foot-shine .75s; }

/* レスポンシブ切替 */
@media(max-width:767px){
  .site-footer .foot-panels__inner{ grid-template-columns:1fr; gap:18px; }
  .site-footer .foot-contact-list,
  .site-footer .foot-sns-list{ display:none; }
  .site-footer .foot-contact-list--sp,
  .site-footer .foot-sns-list--sp{ display:flex; }

  /* 電話・メールアイコンだけ少し小さめ（ご要望準拠） */
  .site-footer .foot-circle.tel img,
  .site-footer .foot-circle.mail img{ width:34px; height:34px; border-radius:0 !important; }
}

/* ===== フッター専用タイトル ===== */
.social-title-footer {
  margin: 0;
  text-align: center;
  font-family: "ZenOldMincho-Bold","Yu Mincho",serif;
  color: #333;
  line-height: 1.55;
  letter-spacing: .08em;
  font-size: clamp(18px, 2.1vw, 22px);
}

/* 各行をハイライト */
.social-title-footer span {
  position: relative;
  display: inline-block;
  padding: 0 .3em;
  z-index: 0;
}

/* #FFEDBE の帯を文字背面に */
.social-title-footer span::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: .15em;
  height: .55em;
  background: #FFEDBE;
  border-radius: 4px;
  z-index: -1;
}

@media (max-width: 767px){
  .social-title-footer { font-size: 18px; }
}

/* === 最下部：ロゴ＆コピーライト === */
.site-footer .foot-bottom{
  position: relative;
  z-index: 1;
  width: min(1200px,92%);
  margin: clamp(8px,3vw,24px) auto clamp(24px,5vw,40px);
  text-align: center;
  color: #333;

  display: flex;              /* ← 追加：縦並び用 */
  flex-direction: column;     /* ← 縦方向に並べる */
  align-items: center;        /* ← 中央揃え */
  gap: 10px;                  /* ← ロゴとコピーライトの間隔 */
}

.site-footer .foot-logo{
  display: block;             /* ← inline-block → block */
  margin: 0;                  /* ← flex間隔で揃えるので余計な margin は削除 */
}
.site-footer .foot-logo img{
  width: min(180px,30vw);
  height: auto;
  display: block;
  margin: 0 auto;
}

.site-footer .copyright{
  font-size: 13px;
  line-height: 1.6;
  color: #444;
}