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




/* ------------------- */
/* メインビジュアルの配置 */
/* ------------------- */
.main-visual {
  position: absolute;  /* relative → absolute */
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 1; /* 背景扱い */
}



/* ===== スライド共通設定 ===== */
.slide {
  position: absolute;
  overflow: hidden;
  z-index: 2;
  border-radius: 50%;
}
.slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;             /* 基本は非表示。各アニメで表示させる */
  will-change: opacity, transform;
}

/* ===== 上のスライド（小） ===== */
.slide-top {
  width: 14%;
  aspect-ratio: 1 / 1;
  height: auto;
  left: 30%;
  top: -2vw;              /* ← 大文字 VW は無効。小文字 vw に修正 */
  z-index: 3;
}
@media (max-width: 767px) {
  .slide-top {
    width: 34%;
    aspect-ratio: 1 / 1;
    height: auto;
    left: 60%;
    top: -2vw;
  }
}

/* ===== 下のスライド（大） ===== */
.slide-bottom {
  width: 42%;
  aspect-ratio: 1 / 1;
  height: auto;
  left: 4%;
  top: 24vw;             
  transform: translateY(-50%);
  z-index: 2;
}
@media (max-width: 767px) {
  .slide-bottom {
    width: 120%;
    aspect-ratio: 1 / 1;
    height: auto;
    left: -10%;
    top: 70vw;            
  }
}

/* ===== 縦書き ===== */
.vertical-text {
  position: absolute;
  right: 15%;
  top: 20%;
  writing-mode: vertical-rl;
  font-family: "ZenOldMincho-Bold", "Hiragino Mincho ProN", serif;
  color: #222;
  font-size: 24px;
  line-height: 1.8;
  z-index: 3;
}
.vertical-text2 {
  position: absolute;
  right: 10%;
  top: 20%;
  writing-mode: vertical-rl;
  font-family: "HOT-GFKaishokk-E", "Hiragino Mincho ProN", serif;
  color: #222;
  z-index: 3;
}
.vertical-text2 .big {
  font-size: 48px;
  font-weight: bold;
}

/* ========================= */
/*  アニメーション設定一式   */
/* ========================= */
/* 通常の切替（遠く→手前→遠く）: 周期18s（各画像6s見せ場） */
@keyframes slideAnime {
  0%   { opacity: 0; transform: scale(1.2); }
  5%   { opacity: 1; transform: scale(1.0); }
  28%  { opacity: 1; transform: scale(1.0); }
  33%  { opacity: 0; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(0.8); }
}

/* “最初だけ見せる”専用：3秒版（上1枚目用） */
@keyframes holdThenOut3 {
  0%   { opacity: 1; transform: scale(1.0); }
  80%  { opacity: 1; transform: scale(1.0); }
  100% { opacity: 0; transform: scale(0.95); }
}

/* “最初だけ見せる”専用：6秒版（下1枚目用） */
@keyframes holdThenOut6 {
  0%   { opacity: 1; transform: scale(1.0); }
  90%  { opacity: 1; transform: scale(1.0); }
  100% { opacity: 0; transform: scale(0.95); }
}

/* ===== 上：最初の3秒は1枚目を表示 → 3sで2枚目へ、以降6秒ごと ===== */
.slide-top img:nth-of-type(1) {
  /* 0〜3s は見せっぱなし（1回だけ）、次に 15s から通常ループに参加 */
  animation-name: holdThenOut3, slideAnime;
  animation-duration: 3s, 18s;
  animation-delay: 0s, 15s;
  animation-iteration-count: 1, infinite;
  animation-timing-function: linear, ease;
  animation-fill-mode: both, none;
}
.slide-top img:nth-of-type(2) {
  /* 3s から通常ループ開始（3, 9, 15…で切替） */
  animation: slideAnime 18s ease 3s infinite;
}
.slide-top img:nth-of-type(3) {
  /* 9s から通常ループ開始 */
  animation: slideAnime 18s ease 9s infinite;
}

/* ===== 下：最初の6秒は1枚目を表示 → 6sで2枚目へ、以降6秒ごと ===== */
.slide-bottom img:nth-of-type(1) {
  /* 0〜6s は見せっぱなし（1回だけ）、次に 18s から通常ループに参加 */
  animation-name: holdThenOut6, slideAnime;
  animation-duration: 6s, 18s;
  animation-delay: 0s, 18s;
  animation-iteration-count: 1, infinite;
  animation-timing-function: linear, ease;
  animation-fill-mode: both, none;
}
.slide-bottom img:nth-of-type(2) {
  /* 6s から通常ループ開始（6, 12, 18…で切替） */
  animation: slideAnime 18s ease 6s infinite;
}
.slide-bottom img:nth-of-type(3) {
  /* 12s から通常ループ開始 */
  animation: slideAnime 18s ease 12s infinite;
}

/* 縦書き文字（茶道松尾流） */
.vertical-text {
  position: absolute;
  right: 15%; /* 月の少し左に配置 */
  top: 10%;
  writing-mode: vertical-rl; /* 縦書き */
  font-family: "ZenOldMincho-Bold", "Hiragino Mincho ProN", serif;
  color: #222;
  font-size: 3vw;
  line-height: 1.8; /* 文字間隔を調整 */
  z-index: 3;
  text-shadow: 2px 2px 0px #FFFFFF;
}
/* 銀月会 */
.vertical-text2 {
  position: absolute;
  right: 20%; /* 少し位置を変える */
  top: 10%;
  writing-mode: vertical-rl;
  font-family: "HOT-GFKaishokk-E", "Hiragino Mincho ProN", serif;
  color: #222;
  z-index: 3;
  text-shadow: 4px 4px 0px #FFFFFF;
}
.vertical-text2 .big {
  font-size: 10vw;
  font-weight: bold;
}
@media(max-width:767px) {
  .vertical-text {
    right: 50%; /* 月の少し左に配置 */
    top: 58vw;
    font-size: 6vw !important;
  }
  .vertical-text2 {
    right: 62%; /* 少し位置を変える */
    top: 55vw;
  }
  .vertical-text2 .big {
    font-size: 20vw !important;
  }
}



/*--------------------*/
/*けいこの様子*/
/*--------------------*/

/* ===== About / ご案内 ===== */
.about{
  position: relative;
  padding-top: 52vw;
	padding-bottom: 10vw;
  /* 背景の月やグラデとの整合のため余白やや広め */
}
.about__inner{
  width: min(1200px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 画像 / 文章 */
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}

/* 左：写真（丸角＆横長比率） */
.about__media{
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
}
.about__media img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 11;     /* 近い比率に固定 */
  object-fit: cover;
  border-radius: 24px;
}

/* 右：文章パネル */
.about__panel{
  background: rgba(255,255,255,0.6);
  /*border: 1px solid #dfe7ef;*/
  border-radius: 16px;
  padding: clamp(20px, 3vw, 32px);
  color: #333;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  line-height: 1.9;
	
}
.about__title{
  margin: 0 0 10px;
  text-align: center;
  font-family: "ZenOldMincho-Bold","Yu Mincho","Hiragino Mincho ProN",serif;
  font-weight: 700;
  font-size: clamp(18px, 1.9vw, 22px);
  letter-spacing: 0.08em;
}
.about__sep{
  width: 70%;
  height: 1px;
  margin: 10px auto 18px;
  background: #bfc9d4;
}
.about__text{
  margin: 0 0 10px;
  font-size: clamp(14px, 1.5vw, 16px);
}

/* 1366px 以下 & 768px 以上：左の画像を自動で縦長にして右パネルと同じ高さに */
@media (max-width:1366px) and (min-width:768px){
  .about__inner{
    align-items: stretch;          /* 高さを列ごとに揃える */
  }
  .about__media{
    height: 100%;                  /* 行(=右パネル)の高さにフィット */
  }
  .about__media img{
    width: 100%;
    height: 100%;
    object-fit: cover;             /* はみ出しはトリミング */
    aspect-ratio: auto;            /* 16/11 の固定を解除して縦長OKに */
  }
  /* 右パネル側は特に不要だが、念のため */
  /*bout__panel{
    height: 100%;
  }*/
}


/* ====== レスポンシブ（タブレット以下） ====== */
@media (max-width: 1024px){
  .about__inner{
    gap: 24px;
  }
}

/* ====== スマホ（767px以下） ====== */
@media (max-width: 767px){
	.about{
  padding-top: 140vw;
		padding-bottom: 20vw;
  /* 背景の月やグラデとの整合のため余白やや広め */
}
  .about__inner{
    grid-template-columns: 1fr;   /* 1カラムに */
  }
  .about__media{
    order: 3;
    border-radius: 18px;
  }
  .about__media img{
    border-radius: 18px;
    aspect-ratio: 4 / 3;          /* 縦目にして見やすく */
  }
  .about__panel{
    order: 2;
    padding: 18px;
  }
  .about__title{
    font-size: 18px;
  }
  .about__sep{
    width: 88%;
  }
  .about__text{
    font-size: 15px;
  }
}



/*---------------------------------------------*/
/* ====== お問い合わせ（柄パターン＋白パネル） ====== */
/*---------------------------------------------*/
.sns-section{
  position: relative;
  padding: clamp(40px, 7vw, 96px) 0;
  z-index: 2;
  overflow: hidden;
}

/* 柄タイル */
.sns-section .sns-tile{
  position: absolute; inset: 0;
  background: url("../img/柄シームレス素材4.webp") repeat;
  background-size: 600px 600px;
  z-index: 0; pointer-events:none;
	height:auto;
}

/* 白パネル */
.sns-section .sns-ribbon{
  position: relative; z-index: 1;
  width: 60%; margin: 0 auto;
  background: rgba(255,255,255,0.9);
  border-radius: 20px;
  padding: clamp(20px, 4vw, 36px);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}

/* タイトル */
.sns-title{ margin:0; font-family:"ZenOldMincho-Bold","Yu Mincho",serif;
  letter-spacing:.08em; line-height:1.6; color:#333; font-size:clamp(18px,2.1vw,22px);}
.sns-title span{ position:relative; display:inline-block; padding:0 .3em;}
.sns-title span::before{ content:""; position:absolute; inset:55% 0 auto 0;
  height:.55em; background:#FFEDBE; border-radius:4px; z-index:-1; }

/* 区切り線 */
.sns-divider{ width:86%; height:1px; margin:0 auto 4px; background:#cbd6e2; }

/* PCボタン（ピル型） */
.sns-list{ display:grid; grid-template-columns:1fr; gap:12px; width:min(560px,100%); list-style:none; margin:0 auto; padding:0; }
.sns-btn{
  position:relative; display:flex; align-items:center; justify-content:center;
  gap:12px; height:56px; border-radius:999px;
  padding:0 20px; font:600 16px/1 "Noto Sans JP","Yu Gothic",sans-serif;
  color:#fff; text-decoration:none; overflow:hidden; isolation:isolate;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.sns-blue{ background:#678DBB; }
.sns-green{ background:#06C755; }
.sns-ic{ width:30px!important; height:30px!important; }
.sns-txt{ white-space:nowrap; }

/* Shine */
.sns-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;
}
.sns-btn:hover::before{ animation: shine .75s; }
@keyframes shine{ 100%{ left:125%; } }

/* Hover lift */
@media (hover:hover){
  .sns-btn:hover{ transform:translateY(-2px);  filter:brightness(1.05);}
  .sns-btn:active{ transform:translateY(0); }
}

/* スマホ丸ボタン */
.sns-list--sp{ display:none; gap:22px; justify-content:center; list-style:none; padding:0; }
.sns-circle{ position:relative; width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center; overflow:hidden; isolation:isolate;
   inset,0 6px 16px rgba(0,0,0,0.08);}
.sns-circle img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.sns-circle.tel{ background:#678DBB; }
.sns-circle.mail{ background:#678DBB; }
.sns-circle.line{ background:#06C755; }
.sns-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;}
.sns-circle:hover::before{ animation: shine .75s; }

@media (max-width:767px){
  .sns-section .sns-ribbon{ width:min(520px,80%); }
  .sns-list{ display:none; }
  .sns-list--sp{ display:flex; }
	/* 電話アイコンだけ小さめ */
  .sns-circle.tel img{
    width: 34px;
    height: 34px;
	  border-radius:0px!important;
  }

  /* メールアイコンだけ小さめ */
  .sns-circle.mail img{
    width: 34px;
    height: 34px;
	  border-radius:0px!important;
  }
}




/*--------------------*/
/* ===== お知らせ ===== */
/*--------------------*/

/* レイアウト共通 */
.news-section{ position:relative; z-index:2; padding:clamp(40px,7vw,96px) 0; }
.news-inner{
  width:min(1200px,92%); 
  margin:0 auto; 
  display:grid;
  grid-template-columns:1.1fr .9fr; 
  gap:clamp(24px,4vw,56px); 
  align-items: stretch;   /* ← 行の高さに合わせて左右を伸ばす */
}
.news-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.news-pill{
  padding:.6em 1.2em; border-radius:999px; background:#678DBB; color:#fff;
  font-family:"ZenOldMincho-Bold","Yu Mincho","Hiragino Mincho ProN",serif; letter-spacing:.08em;
  font-size:24px;
}
.news-dot{ width:24px; height:24px; border-radius:50%; background:#678DBB; }
.news-dot + .news-dot{ width:12px; height:12px; }

.news-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.news-item{
  display:grid; grid-template-columns:140px 1fr; align-items:center;
  padding:14px 12px;  background:rgba(255,255,255,.6); border-radius:8px;
}
.news-date{ display:grid; gap:2px; color:#222; font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; }
.news-date .y{ font-size:12px; letter-spacing:.08em; color:#777; }
.news-date .md{ font-size:28px; font-weight:700; letter-spacing:.02em; }
.news-text{ font-size:15px; color:#333; line-height:1.8; }

/* スライド共通 */
.img-frame{ 
  position:relative; width:100%; border-radius:12px; 
  overflow:hidden; ; 
}
.img-frame > div{
  position:absolute; inset:0; width:100%; height:100%;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}

/* PC用（縦長）— PCでだけ表示 */
/* ② 右カラムを“縦に伸びる”flexコンテナにする */
.news-right{
  display: flex;
  /* なくても動きますが保険で */
  align-items: stretch;
}
.news-right .img-frame-pc{
  flex: 1 1 auto;
  height: auto;            /* ← 既存の height:100%!important; は外す */
  min-height: 340px;       /* 最低高はそのままキープ */
}
.img-frame-pc{
  display:block;
  height:100%!important;              /* ← 左と同じ高さにフィット */
  min-height:340px;         /* ← 最低限の高さ（お好みで調整） */
}
.pc-01{ background-image:url("../img/index_osirase_1.webp"); animation: slide-animation-01 24s infinite; }
.pc-02{ background-image:url("../img/index_osirase_2.webp"); animation: slide-animation-02 24s infinite; }
.pc-03{ background-image:url("../img/index_osirase_3.webp"); animation: slide-animation-03 24s infinite; }

/* スマホ用（横長）— 左カラムの見出しとリストの間に出す。PCでは非表示 */
.img-frame-sp-inline{ display:none; margin:6px 0 12px; }
.sp-01{ background-image:url("../img/index_osirase_moba_1.webp"); animation: slide-animation-01 24s infinite; }
.sp-02{ background-image:url("../img/index_osirase_moba_2.webp"); animation: slide-animation-02 24s infinite; }
.sp-03{ background-image:url("../img/index_osirase_moba_3.webp"); animation: slide-animation-03 24s infinite; }

/* セクション別の高さ（スマホ表示時に反映される） */
.news-section  .img-frame-sp-inline,
.img-frame-sp-inline.news-sp{
  /* お知らせ：横長・小さめ */
  height: 140px;
}

/* アニメーション（共通） */
@keyframes slide-animation-01 {
  0%{opacity:1; transform:scale(1.0);} 30%{opacity:1;}
  40%{opacity:0; transform:scale(1.12);} 90%{opacity:0;}
  100%{opacity:1; transform:scale(1.0);}
}
@keyframes slide-animation-02 {
  0%{opacity:0;} 30%{opacity:0; transform:scale(1.06);}
  40%{opacity:1;} 60%{opacity:1;}
  70%{opacity:0; transform:scale(1.0);} 100%{opacity:0;}
}
@keyframes slide-animation-03 {
  0%{opacity:0;} 60%{opacity:0; transform:scale(1.0);}
  70%{opacity:1;} 90%{opacity:1;}
  100%{opacity:0; transform:scale(1.06);}
}

/* ===== スマホ：見出し →（画像スライド）→ リスト ===== */
@media (max-width:767px){
  .news-inner{ grid-template-columns:1fr; }
  .news-right{ display:none; }              /* PC用スライドを隠す */
  .img-frame-sp-inline{ display:block; }    /* SP用スライドを表示 */

  .news-item{ grid-template-columns:110px 1fr; padding:12px 10px; }
  .news-date .md{ font-size:24px; }
  .news-text{ font-size:14px; }
}





/* -------------------- */
/* ===== 茶会情報 ===== */
/* -------------------- */

/* レイアウト（左右をお知らせとミラーに） */
.event-section{ position:relative; z-index:2; padding:clamp(40px,7vw,96px) 0; }
.event-inner{
  width:min(1200px,92%); margin:0 auto; display:grid;
  grid-template-columns:.9fr 1.1fr;      /* 左：画像／右：テキスト */
  gap:clamp(24px,4vw,56px);
  align-items:stretch;                   /* 行の高さで左右そろえる */
}

/* 見出し（右寄せピル＋左にドット） */
.event-head{
  display:flex; align-items:center; gap:12px;
  justify-content:flex-end;              /* 右寄せに */
  margin-bottom:14px;
}
.event-pill{
  padding:.6em 1.2em; border-radius:999px; background:#678DBB; color:#fff;
  font-family:"ZenOldMincho-Bold","Yu Mincho","Hiragino Mincho ProN",serif;
  letter-spacing:.08em; font-size:24px;
}
.event-dot{ width:12px; height:12px; border-radius:50%; background:#678DBB; }
.event-dot + .event-dot{ width:24px; height:24px; }

/* 右カラム内のリスト（見た目は news と同等） */
.event-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.event-item{
  display:grid; grid-template-columns:140px 1fr; align-items:center;
  padding:14px 12px; background:rgba(255,255,255,.6); border-radius:8px;
}
.event-date{ display:grid; gap:2px; color:#222; font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; }
.event-date .y{ font-size:12px; letter-spacing:.08em; color:#777; }
.event-date .md{ font-size:28px; font-weight:700; letter-spacing:.02em; }
.event-text{ font-size:15px; color:#333; line-height:1.8; }

/* 左：PC用スライド（縦長） */
.event-left{ display:flex; align-items:stretch; }
.event-left .img-frame-pc{
  display:block; height:100%!important; min-height:340px; /* 右の高さにフィット */
}

/* 画像セット（PC/スマホ）—パス差し替え */
.ev-pc-01{ background-image:url("../img/index_jouhou_1.webp"); animation:slide-animation-01 24s infinite; }
.ev-pc-02{ background-image:url("../img/index_jouhou_2.webp"); animation:slide-animation-02 24s infinite; }
.ev-pc-03{ background-image:url("../img/index_jouhou_3.webp"); animation:slide-animation-03 24s infinite; }

.img-frame-sp-inline{ display:none; margin:6px 0 12px; } /* ここはnewsと共用 */
.ev-sp-01{ background-image:url("../img/index_jouhou_moba_1.webp"); animation:slide-animation-01 24s infinite; }
.ev-sp-02{ background-image:url("../img/index_jouhou_moba_2.webp"); animation:slide-animation-02 24s infinite; }
.ev-sp-03{ background-image:url("../img/index_jouhou_moba_3.webp"); animation:slide-animation-03 24s infinite; }

.event-section .img-frame-sp-inline,
.img-frame-sp-inline.event-sp{
  /* 茶会情報：横長・小さめ */
  height: 140px;
}

/* スマホ：1カラムで「見出し →（横長スライド）→ リスト」 */
@media (max-width:767px){
  .event-inner{ grid-template-columns:1fr; }
  .event-left{ display:none; }

  /* スマホは見出しを左寄せにした上で、順番を逆に */
  .event-head{
    flex-direction: row-reverse; /* 並びを逆にする */
    justify-content: flex-end;   /* 左に寄せるように見せる */
  }
  .event-right .img-frame-sp-inline{ display:block; }

  .event-item{ grid-template-columns:110px 1fr; padding:12px 10px; }
  .event-date .md{ font-size:24px; }
  .event-text{ font-size:14px; }
}




/* ===========================
   リスト内リンク：色付き下線アニメ
   対象：.event-text 内の <a>（将来 .news-text にリンクが来てもOK）
   =========================== */

/* ベース：色指定・装飾オフ */
.event-text a,
.news-text a{
  position: relative;
  display: inline-block;        /* 疑似要素の下線を扱いやすくする */
  text-decoration: none;        /* 既定の下線は消す */
  color: #406490;                  /* 本文色に合わせる */
  font-weight: 600;             /* 視認性アップ（お好みで） */
  padding-bottom: 2px;          /* 下線との余白 */
  transition: color .25s ease;  /* 文字色の遷移（お好みで） */
}

/* 通常の薄い下線（常時表示） */
.event-text a::before,
.news-text a::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: rgba(0,0,0,.12);  /* 薄いグレーライン */
  transform: translateX(-50%);
}

/* ホバー時に伸びるカラー下線（初期は 0% 幅） */
.event-text a::after,
.news-text a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #678DBB;          /* 銀月会のアクセントカラー */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease;
}

/* ホバー＆キーボードフォーカス時：カラー下線を 100% に */
.event-text a:hover::after,
.event-text a:focus-visible::after,
.news-text a:hover::after,
.news-text a:focus-visible::after{
  transform: scaleX(1);
}

/* ホバー時の文字色（お好み。不要なら削除OK） */
.event-text a:hover,
.event-text a:focus-visible,
.news-text a:hover,
.news-text a:focus-visible{
  color: #678DBB;
  outline: none;                 /* 既定アウトラインを消す場合は別のフォーカス可視化を用意 */
}

/* アクセシビリティ：キーボード操作でのフォーカス可視化 */
.event-text a:focus-visible,
.news-text a:focus-visible{
  box-shadow: 0 0 0 3px rgba(103,141,187,.25); /* 薄いハイライト */
  border-radius: 4px;
}

/* 低モーション環境配慮（アニメOFF） */
@media (prefers-reduced-motion: reduce){
  .event-text a::after,
  .news-text a::after{
    transition: none;
  }
}




/*-----------------------------------*/
/* ===== SNSリンク（柄＋白パネル） ===== */
/*-----------------------------------*/
.social-section{ position:relative; padding:clamp(40px,7vw,96px) 0; z-index:2; overflow:hidden;}
.social-section .social-tile{ position:absolute; inset:0; background:url("../img/柄シームレス素材4.webp") repeat; background-size:600px 600px; z-index:0;}
.social-section .social-ribbon{ position:relative; z-index:1; width:min(960px,60%); margin:0 auto; background:rgba(255,255,255,0.9); border-radius:20px;
  padding:clamp(20px,4vw,36px); text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.social-title{ margin:0; font-family:"ZenOldMincho-Bold","Yu Mincho",serif; letter-spacing:.08em; line-height:1.6; color:#333; font-size:clamp(18px,2.1vw,22px);}
.social-title span{ position:relative; display:inline-block; padding:0 .3em;}
.social-title span::before{ content:""; position:absolute; inset:55% 0 auto 0; height:.55em; background:#FFEDBE; border-radius:4px; z-index:-1;}
.social-divider{ width:86%; height:1px; margin:0 auto 4px; background:#cbd6e2; }

/* PCボタン */
.social-list{ display:grid; grid-template-columns:1fr; gap:12px; width:min(560px,100%); margin:0 auto; padding:0; list-style:none;}
.social-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; text-align:center; font:600 16px/1 "Noto Sans JP","Yu Gothic",sans-serif; ; transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;}
.social-fb{ background:#0866FF;} .social-ig{ background:#FFAF53;} .social-x{ background:#8F8F8F;}
.social-ic{ width:28px; height:28px; }
.social-txt{ white-space:nowrap; }

/* Shine */
.social-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;}
.social-btn:hover::before{ animation:shine .75s; }
@keyframes shine{ 100%{ left:125%; } }

/* Hover lift */
@media (hover:hover){
  .social-btn:hover{ transform:translateY(-2px);  filter:brightness(1.05);}
  .social-btn:active{ transform:translateY(0); }
}

/* スマホ丸ボタン */
.social-list--sp{ display:none; gap:22px; justify-content:center; list-style:none; padding:0;}
.social-circle{ position:relative; width:64px; height:64px; border-radius:50%; display:grid; place-items:center; overflow:hidden; isolation:isolate;
  }
.social-circle img{ width:100%; height:100%; object-fit:cover; border-radius:50%;}
.social-circle.fb{ background:#0866FF;} .social-circle.ig{ background:#FFAF53;} .social-circle.xx{ background:#8F8F8F;}
.social-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;}
.social-circle:hover::before{ animation:shine .75s; }

@media(max-width:767px){
  .social-section .social-ribbon{ width:min(520px,80%);}
  .social-list{ display:none;}
  .social-list--sp{ display:flex;}
}





/*----------------------------------*/
/* ===== カルーセルセクション全体 ===== */
/*----------------------------------*/
.gallery-section{
  position: relative;
  z-index: 2;               /* 月より前面 */
  background: #E2F8FC;      /* ご指定色 */
  padding: clamp(36px, 6vw, 80px) 0;
}
.gallery-inner{
  width: min(1200px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 0.4fr;  /* ← 1.2fr→1.6fr / 0.8fr→0.4fr に変更 */
  gap: clamp(20px, 4vw, 48px);
  align-items: stretch;                /* ← center → stretch に変更（高さを揃える） */
}

/* カード全体：背景を透明に（下ナビ帯が透ける） */
.carousel{
  position: relative;
  background: transparent;      /* ← ここを透明に */
  border-radius: 14px;          /* 角丸自体は残してOK（影だけ出したい時など） */
  overflow: visible;            /* ← 下帯をはみ出させるなら visible でもOK */
  padding-bottom: 52px;
	/* ▼ 追記：矢印サイズと余白、ドット帯の下マージン */
  --nav-size: 36px;   /* 矢印の直径 */
  --nav-gap:  60px;    /* 矢印とドット帯の間隔 */
  --dots-bottom: 14px;/* ドット帯の下からの位置 */
}
@media(max-width:480px){
	.carousel{ --nav-gap:  20px;}
}
/* スライド領域：ここに白背景＋角丸＋クリップを集約 */
.carousel-viewport{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;             /* ← 角丸で画像をクリップ */
  background: #fff;             /* ← 白背景は viewport 側へ */
  border-radius: 14px;          /* ← 画像も含め四隅を丸くする */

  /* もし “下だけ丸く” にしたい場合は ↑を消して↓2行に */
  /* border-bottom-left-radius: 14px;     */
  /* border-bottom-right-radius: 14px;    */
}
.carousel-track{
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .5s ease;
  will-change: transform;
}
.carousel-track img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex: 0 0 100%;
  user-select: none;
  -webkit-user-drag: none;
}

/* 矢印（丸ボタン #678DBB／白三角はCSS図形） */
.carousel .nav{
  position: absolute;
  bottom: 6px;
  width: 36px; height: 36px;
  border: none;
  border-radius: 50%;
  background: #678DBB;
  cursor: pointer;
  display: grid; place-items: center;
  transition: filter .15s ease;
  width: var(--nav-size);
  height: var(--nav-size);
}
.carousel .nav.prev { left: 0; }
.carousel .nav.next { right: 0; }
.carousel .nav:hover{ filter: brightness(1.05); }

/* 白三角（CSSのみ） */
.carousel .nav.prev::before,
.carousel .nav.next::before{
  content:"";
  display:block;
  width: 0; height: 0;
  border-style: solid;
}
.carousel .nav.prev::before{
  border-width: 8px 10px 8px 0;
  border-color: transparent #fff transparent transparent;
  margin-left: -2px;
}
.carousel .nav.next::before{
  border-width: 8px 0 8px 10px;
  border-color: transparent transparent transparent #fff;
  margin-left: 2px;
}

/* ドット #ADECEF / アクティブ #678DBB */
.carousel .dots{
  position: absolute;
  bottom: var(--dots-bottom);
  /* 画像幅 −（左右の矢印＋余白）だけ内側に収める */
  left:  calc(var(--nav-size) + var(--nav-gap));
  right: calc(var(--nav-size) + var(--nav-gap));
  /* 中央寄せの transform は不要 */
  transform: none;

  /* 可変で等間隔に広げる */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}
/* 正円ドット（既定のボタンスタイルを完全オフ） */
.carousel .dot{
  width: 12px;
  aspect-ratio: 1 / 1;           /* ← 正方形を保証 */
  height: auto;                  /* ← aspect-ratioに委ねる */
  border-radius: 50%;
  background: #ADECEF;
  display: block;                /* ← インライン特性の影響を排除 */
  box-sizing: content-box;
  padding: 0;                    /* ← 既定paddingを消す */
  border: 0;                     /* ← 既定borderを消す */
  line-height: 0;                /* ← 文字高さの影響を消す */
  -webkit-appearance: none;      /* ← Safari等の既定見た目オフ */
  appearance: none;              /* ← 〃 */
  flex-shrink: 0;                /* ← 念のため潰れ防止 */
}
/* アクティブ表現はscaleをやめて外枠で（楕円化しづらい） */
.carousel .dot.is-active{
  background: #678DBB;
  transform: none;               /* ← scale(1.1) は外す */
}

/* ===== 右：ホバーで追従拡大 ===== */
/* 右：ホバーカードは行の高さにフィットさせる */
.hover-card{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  /* min-height: 320px;  ← 高さを揃えるため外す or 小さくする */
  height: 100%;           /* ← 追加：グリッドの行高いっぱいに伸ばす */
  aspect-ratio: auto;     /* ← 追加：固定比率を解除（細長さは列幅で決まる） */
}
/* 中の背景画像は全面カバー（そのままでOKだが明示しておくと安心） */
.hover-img{
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform .2s ease, filter .2s ease;
  will-change: transform;
}
.hover-card:hover .hover-img{
  filter: brightness(1.03);
}

/* ===== スマホ：1カラム、右は非表示、矢印の配置調整 ===== */
@media (max-width: 767px){
  .gallery-inner{ grid-template-columns: 1fr; }
  .hover-card{ display: none; }

  .carousel{
    padding-bottom: 56px;
  }
  .carousel .nav.prev{ left: 8px; }
  .carousel .nav.next{ right: 8px; }
}

/* 動作の苦手な人に配慮（自動アニメ弱め） */
@media (prefers-reduced-motion: reduce){
  .carousel-track{ transition: none; }
}





/*--------------------*/
/* ===== 稽古日 ===== */
/*--------------------*/
.keikobi-section{ position:relative; z-index:2; padding:clamp(40px,7vw,96px) 0; }
.keikobi-inner{ width:min(1200px,92%); margin:0 auto; }

/* タイトル（お知らせと同じ数値） */
.keikobi-head{
  display:flex; align-items:center; justify-content:center;
  gap:12px; margin-bottom:14px;
}
.keikobi-pill{
  padding:.6em 1.2em; border-radius:999px; background:#678DBB; color:#fff;
  font-family:"ZenOldMincho-Bold","Yu Mincho","Hiragino Mincho ProN",serif;
  letter-spacing:.08em; font-size:24px; margin:0;
}
/* 共通ドット */
.keikobi-dot{ width:24px; height:24px; border-radius:50%; background:#678DBB; }
.keikobi-dot {
  border-radius:50%;
  background:#678DBB;
  display:inline-block;
}
.keikobi-dot.large { width:24px; height:24px; }
.keikobi-dot.small { width:12px; height:12px; }

/* グループの並び調整 */
.dot-group {
  display:flex; gap:14px; /* ← 間隔はお好みで */
  align-items:center;
}

/* 画像切替（お知らせと同アニメ） */
.keikobi-visual {
  display: block;   /* ← gridを解除して単独扱いに */
  margin: 0 auto clamp(24px, 4vw, 40px); /* センター揃え＆下余白 */
  max-width: 100%;  /* 親の幅いっぱいまでOK */
}

/* 共通フレーム */
.img-frame{ position:relative; width:100%; border-radius:12px; overflow:hidden;  }
.img-frame > div{ position:absolute; inset:0; width:100%; height:100%;
  background-size:cover; background-position:center; background-repeat:no-repeat; }

/* PC用（縦長） */
.img-frame-pc {
  display: block;
  width: 100%;            /* ← カード2枚分の幅いっぱい */
  min-height: 500px;
  margin: 0 auto;         /* センター揃え */
}
.keikobi-pc .pc-01{ background-image:url("../img/index_keikobi_1.webp"); animation: slide-animation-01 24s infinite; }
.keikobi-pc .pc-02{ background-image:url("../img/index_keikobi_2.webp"); animation: slide-animation-02 24s infinite; }
.keikobi-pc .pc-03{ background-image:url("../img/index_keikobi_3.webp"); animation: slide-animation-03 24s infinite; }

/* SP用（横長） */
.img-frame-sp-inline{ display:none; margin:6px 0 12px; }
.keikobi-sp .sp-01{ background-image:url("../img/index_keikobi_moba_1.webp"); animation: slide-animation-01 24s infinite; }
.keikobi-sp .sp-02{ background-image:url("../img/index_keikobi_moba_2.webp"); animation: slide-animation-02 24s infinite; }
.keikobi-sp .sp-03{ background-image:url("../img/index_keikobi_moba_3.webp"); animation: slide-animation-03 24s infinite; }

.keikobi-section .img-frame-sp-inline,
.img-frame-sp-inline.keikobi-sp{
  /* 稽古日：縦長・大きめ */
  height: 140vw;
}

/* 下部2カラム（カード） */
/* 2カラム：各カードは同じ行にあるので “行の最大高” に揃います */
.keikobi-cards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px,4vw,40px);
  align-items: stretch; /* ← 行の最大高にカードを伸ばす */
}
/* カード内は縦並び：タイトル → テーブル → （余白）→ マップ */
.keikobi-card{
  display: flex;            /* ← 追加 */
  flex-direction: column;   /* ← 追加 */
  background: rgba(255,255,255,.6);
  border-radius: 12px;
  padding: clamp(16px,2.2vw,22px);
}
.keikobi-card__title {
  margin: 0 0 12px;
  text-align: center;   /* ← h3の中身を中央寄せ */
}

.keikobi-card__title span {
  display: inline-block;   /* ← pill風に縮める */
  padding: .5em 1.2em;
  border-radius: 999px;
  background: #678DBB;
  color: #fff;
  font-family: "ZenOldMincho-Bold","Yu Mincho",serif;
  font-size: 20px;
  letter-spacing: .08em;
}

/* 情報テーブル */
.keikobi-table{ width:100%; border-collapse:collapse; margin:10px 0 12px; font-size:15px; color:#333; }
.keikobi-table th, .keikobi-table td{ padding:10px 8px; vertical-align:top; }
.keikobi-table th{ width:72px; color:#222; font-weight:700; text-align:left; white-space:nowrap; }
.keikobi-table tr + tr td, .keikobi-table tr + tr th{ border-top:1px solid #dfe7ef; }

/* マップ */
.map-frame{ margin-top:10px; margin-top: auto;         /* ← ここがキモ！ */}
/* マップの高さは固定で統一（数値は好みで） */
.map-frame iframe{
  width: 100%;
  height: 320px;            /* ← 同じ数値なので高さが一致 */
  border: 0;
  border-radius: 12px;
}

/* スマホ */
@media (max-width:767px){
  .keikobi-visual{ grid-template-columns:1fr; }
  .img-frame-sp-inline{ display:block; }
  .img-frame-pc{ display:none; }
  .keikobi-cards{ grid-template-columns:1fr; }
  .map-frame iframe{ height:240px; }
}
/* カレンダー：画像と同じ幅で、下に40pxの余白 */
.keikobi-cal{
  width: 100%;              /* keikobi-inner の幅に合わせる（=画像と同じ） */
  margin: 0 auto 40px;      /* 下の2カラムとの間隔を40px */
}
.keikobi-cal iframe{
  display: block;
  width: 100% !important;   /* 画像と同幅 */
  height: 500px;            /* お好みで調整可 */
  border: 0;
  border-radius: 12px;      /* 上の画像と揃えるなら */
  background: #fff;
}

/* スマホで少し縦を詰めるなら（任意） */
@media (max-width: 767px){
  .keikobi-cal iframe{ height: 420px; }
}



/*--------------------------------------------*/
/* ============ PC“ぴょこっ”ギミック ============ */
/*--------------------------------------------*/
.peel-links{
  position: fixed;
  right: 0;
  bottom: 6vh;
  display: grid;
  gap: 16px;
  z-index: 9999!important;
}

/* タブ本体（初期は完全に隠す） */
.peel{
  --h: 76px;                 /* 高さ */
  --w: 200px;                /* 全開時の幅 */
  --peek: 70px;              /* 頭出し量（小さく顔出す量） */

  height: var(--h);
  width: var(--w);
  background: #ADECEF;
  color: #333;
  text-decoration: none;
  border-radius: 36px 0 0 36px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 18px;
	z-index: 9999!important;

  transform: translateX(100%);         /* 初期：完全オフスクリーン */
  transition: transform .35s ease, filter .2s ease;
}

/* フッターが見えたタイミングの“ぴょこっ”（第1段階） */
.peel.is-peek{
  transform: translateX(calc(100% - var(--peek)));
  animation: peelPeek 450ms cubic-bezier(.2,.8,.2,1);
}
/* ぴょこっの動き */
@keyframes peelPeek{
  0%   { transform: translateX(100%); }
  60%  { transform: translateX(calc(100% - (var(--peek) - 20px))); }
  100% { transform: translateX(calc(100% - var(--peek))); }
}

/* ホバーで全開（第2段階） */
.peel:hover{
  transform: translateX(0);
  filter: brightness(1.02);
}

/* アイコン丸 */
.peel-ic{
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  font-size: 26px;
}

/* テキスト */
.peel-txt{
  font-family: "ZenOldMincho-Bold","Yu Mincho","Hiragino Mincho ProN",serif;
  font-size: 22px;
  letter-spacing: .12em;
  white-space: nowrap;
}

/* モーション配慮 */
@media (prefers-reduced-motion: reduce){
  .peel, .peel.is-peek{ transition: none; animation: none; }
}

/* スマホ・タブは非表示 */
@media (max-width: 767px){
  .peel-links{ display: none; }
}




/*-----------------------------------------------*/
/* ========== SPピール（和菓子店／お茶屋） ========== */
/*-----------------------------------------------*/
.sp-peel-wrap{ display:none; } /* PCでは非表示にする想定なら残す */

@media (max-width:767px){
  :root{
    --slot: 200px;      /* 各ボタンの最大幅 */
    --collapsed: 92px;  /* 閉じ幅（中央に見せる最小ピル幅） */
    --h: 80px;          /* スロットの高さ */
    --pill-h: 80px;     /* 水色ピルの高さ */
    --pad: 0px;         /* 中央側アンカーの余白 */
    --ic: 44px;         /* アイコン直径 */
    --delta: calc((var(--slot) - var(--pad)*2) - var(--collapsed)); /* 伸び増分 */
    --txt-gap: 0px;     /* テキストの“にゅっ”押し出し量 */
  }

  .sp-peel-wrap{
    display:flex; justify-content:center; align-items:center; gap:0;
    width: 100%;
    margin: 14px auto 24px; position: relative; z-index: 10;
	  overflow: hidden;
  }

  .sp-peel{
    position: relative; flex: 0 0 var(--slot);
    width: var(--slot); height: var(--h);
    text-decoration: none; display:flex; align-items:center; justify-content:center;
    overflow: hidden;
  }

  /* 背景ピル：中央にアンカーして外側へ伸びる */
  .sp-peel::before{
    content:""; position:absolute; top:50%; transform: translateY(-50%);
    height: var(--pill-h);
    width: var(--collapsed);
    background:#ADECEF;
    transition: width .35s cubic-bezier(.2,.8,.2,1);
    z-index:0;
  }

  /* 左ボタン（和菓子店） */
  .sp-peel:first-child{ display:flex; justify-content:flex-start; gap:10px; }
  .sp-peel:first-child::before{
    right: var(--pad);                    /* 中央（右側）に固定 */
    border-radius: 999px 0 0 999px;       /* 外側(左)だけ丸 */
  }

  /* 右ボタン（お茶屋） */
  .sp-peel:last-child{ display:flex; justify-content:flex-end; gap:10px; }
  .sp-peel:last-child::before{
    left: var(--pad);                     /* 中央（左側）に固定 */
    border-radius: 0 999px 999px 0;       /* 外側(右)だけ丸 */
  }

  /* アイコン：中央スタート → 背景と同じだけ外側へスライド */
  .sp-peel__ic{
    position:absolute; top:50%; transform: translateY(-50%) translateX(0);
    width:var(--ic); height:var(--ic); border-radius:50%; background:#fff;
    display:grid; place-items:center; font-size:24px; line-height:1;
    z-index:1;
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .sp-peel:first-child .sp-peel__ic{
    right: calc(var(--pad) + (var(--collapsed) - var(--ic))/2);
  }
  .sp-peel:last-child .sp-peel__ic{
    left:  calc(var(--pad) + (var(--collapsed) - var(--ic))/2);
  }
  .sp-peel:first-child.is-open .sp-peel__ic{
    transform: translateY(-50%) translateX(calc(-1 * var(--delta)));
  }
  .sp-peel:last-child.is-open .sp-peel__ic{
    transform: translateY(-50%) translateX(var(--delta));
  }

  /* テキスト：中央アンカー＋clip-pathで“にゅっ” */
  .sp-peel__txt{
    position:absolute; top:50%;
    transform: translateY(-50%);
    white-space:nowrap;
    max-width: calc(var(--slot) - var(--collapsed) - 18px);
    overflow:hidden;
    opacity:0;
    z-index:1;
    transition:
      clip-path .35s cubic-bezier(.2,.8,.2,1),
      transform .35s cubic-bezier(.2,.8,.2,1),
      opacity .25s ease;
    /* お好みでフォント指定 */
    font-family:"ZenOldMincho-Bold","Yu Mincho","Hiragino Mincho ProN",serif;
    font-size:18px; letter-spacing:.12em;
	  color:#333;
  }

  /* 左：中央（右）に固定 → 右向きに“にゅっ” */
  .sp-peel:first-child .sp-peel__txt{
  right: calc(var(--pad) + var(--collapsed)/2);  /* 中央にアンカー */
  /* ★ ここを変更：左から100%カット＝幅ゼロを中央端に揃える（=内側起点） */
  clip-path: inset(0 0 0 100%);
}
  .sp-peel:first-child.is-open .sp-peel__txt{
  clip-path: inset(0 0 0 0);       /* 全面表示へ */
  opacity:1;
  /* ★ ちょい内側方向（=中央側基準）から“にゅっ” → 左へ少し押し出す */
  transform: translateY(-50%) translateX(calc(-1 * var(--txt-gap)));
}

  /* 右：中央（左）に固定 → 左向きに“にゅっ” */
  .sp-peel:last-child .sp-peel__txt{
  left:  calc(var(--pad) + var(--collapsed)/2);  /* 中央にアンカー */
  /* ★ ここを変更：右から100%カット＝幅ゼロを中央端に揃える（=内側起点） */
  clip-path: inset(0 100% 0 0);
}
  .sp-peel:last-child.is-open .sp-peel__txt{
  clip-path: inset(0 0 0 0);
  opacity:1;
  /* ★ ちょい内側方向（=中央側基準）から“にゅっ” → 右へ少し押し出す */
  transform: translateY(-50%) translateX(var(--txt-gap));
}

  /* 開いた時：背景を最大まで（中央は固定のまま外側に伸びる） */
  .sp-peel.is-open::before{
    width: calc(var(--slot) - var(--pad) * 2);
  }

  @media (prefers-reduced-motion: reduce){
    .sp-peel::before, .sp-peel__ic, .sp-peel__txt{ transition:none; }
  }
}