/* ===================================================
   common.css
   20260622koukai / male / female 全ページ共通スタイル
   個別スタイルは各ページの css/style.css に記述
   =================================================== */

/* ===== リセット & ベース ===== */
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:#f5f1ec;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  overflow-x:hidden;
}
img{display:block;width:100%;height:auto;}
picture{display:block;line-height:0;}

/* ===== ページ幅（koukai は main、male/female は .page） ===== */
main{max-width:590px;margin:0 auto;background:#f5f1ec;}
main > section.fade-up{line-height:0;font-size:0;}
main > section.fade-up + section.fade-up{margin-top:-1px;}
.page{width:100%;max-width:590px;margin:0 auto;background:#f5f1ec;}

/* ===== koukai 固定ヘッダー・フッター ===== */
.header,.footer{
  position:fixed;left:50%;transform:translateX(-50%);
  max-width:590px;width:100%;z-index:999;
  opacity:0;transition:.5s;
}
.header{top:0;}
.footer{bottom:0;}
.show-bar{opacity:1;}

/* ===== FVスライダー ===== */
.fv-slider{
  position:relative;max-width:590px;margin:0 auto;
  overflow:hidden;background:#f5f1ec;aspect-ratio:590/900;
}
.fv-slider picture{position:absolute;inset:0;width:100%;height:100%;}
/* koukai用（.fv） */
.fv{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;transition:opacity 1.5s ease;object-fit:cover;
}
.fv.active{opacity:1;}
/* male/female用（.slide） */
.slide{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transform:scale(1);
  transition:opacity 1.2s ease,transform 3s ease;
}
.slide.active{opacity:1;transform:scale(1.015);}
/* FVコピーオーバーレイ（male/female） */
.fv-copy{
  position:absolute;inset:0;z-index:5;
  display:flex;align-items:center;justify-content:center;
  text-align:center;pointer-events:none;
}
.fv-copy h1{
  color:#fff;font-size:clamp(36px,8vw,60px);line-height:1.55;
  font-weight:300;letter-spacing:.08em;
  text-shadow:0 3px 18px rgba(90,70,45,.28),0 1px 4px rgba(90,70,45,.18);
}

/* ===== フェードアップ ===== */
/* koukai用（.fade-up） */
.fade-up{
  opacity:0;transform:translateY(40px);
  transition:opacity 1s ease,transform 1s ease;will-change:opacity,transform;
}
.fade-up.show{opacity:1;transform:translateY(0);}
/* male/female用（.fade-section） */
.fade-section{
  opacity:0;transform:translateY(48px);
  transition:opacity 1.1s ease,transform 1.1s ease;will-change:opacity,transform;
}
.fade-section.show{opacity:1;transform:translateY(0);}

/* ===== アコーディオン ===== */
.accordion-wrap{max-width:590px;margin:0 auto;background:#f5f5f5;position:relative;}
.accordion-btn{
  width:100%;padding:22px;border:none;background:#f5f5f5;
  display:flex;justify-content:center;align-items:center;
  font-size:18px;letter-spacing:.15em;cursor:pointer;
  color:#05396b;text-align:center;gap:8px;font-family:inherit;
}
.icon{font-size:24px;}
.accordion-content{max-height:0;overflow:hidden;transition:max-height .6s ease;}
.accordion-content.open{max-height:3000px;}
.accordion-content img{display:block;width:100%;}

/* ===== koukai 事前予約リンク（FV上に重ねて表示） ===== */
.fv-reserve{
  position:absolute;left:45%;bottom:12%;transform:translateX(-50%);
  color:#fff;text-decoration:underline;text-underline-offset:4px;
  z-index:20;white-space:nowrap;font-size:clamp(14px,3.5vw,18px);
  letter-spacing:.1em;font-family:inherit;
  opacity:1;pointer-events:auto;transition:opacity .5s;
}
.fv-reserve.hide{opacity:0;pointer-events:none;}

/* ===== male/female 追従CTAバー ===== */
.floating-cta{
  position:fixed;left:50%;bottom:0;transform:translate(-50%,100%);
  width:100%;max-width:590px;display:flex;z-index:100;
  opacity:0;transition:transform .55s ease,opacity .55s ease;
  box-shadow:0 -12px 40px rgba(193,179,149,.32),0 -2px 12px rgba(193,179,149,.22);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.floating-cta.show{transform:translate(-50%,0);opacity:1;}
.cta-btn{
  flex:1;height:64px;display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:#fff;font-size:16px;letter-spacing:.04em;font-family:inherit;
  gap:4px;
}
.cta-phone{background:#a9473a;}
.cta-line{background:#31ad61;}

/* ===== SNSフッター + コピーライト ===== */
.sns-footer{
  max-width:590px;margin:0 auto;background:#f8f6f5;
  padding:32px 24px 200px;text-align:center;
}
.sns-footer-icons{display:flex;justify-content:center;gap:28px;margin-bottom:20px;}
.sns-footer-icons a{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  border:1.5px solid #8c7f76;color:#8c7f76;
  text-decoration:none;transition:background .2s,color .2s;
}
.sns-footer-icons a:hover,.sns-footer-icons a:focus{
  background:#8c7f76;color:#f8f6f5;outline:none;
}
.sns-footer-icons svg{width:20px;height:20px;display:block;}
.copyright{
  font-size:10px;letter-spacing:.08em;color:#8c7f76;
  font-family:inherit;margin-bottom:200px;
}

/* ===== 地図セクション ===== */
.map-section{max-width:590px;margin:0 auto;background:#d5cec6;padding:40px;}
.map-wrap{width:100%;overflow:hidden;line-height:0;}
.map-wrap iframe{display:block;width:100%;height:450px;border:0;}

/* ===== PC レイアウト（769px以上） ===== */
@media (min-width:769px){
  /* koukai：ヘッダー非表示 */
  .header{display:none;}
  /* male/female：PC中央寄せ */
  .page{
    width:590px;max-width:590px;
    margin-left:auto;margin-right:auto;background:transparent;
  }
  .page .sns-footer,
  .page .map-section,
  .page .accordion-wrap{
    width:100%;max-width:none;
    margin-left:0;margin-right:0;
  }
  .sns-footer{background:#f8f6f5;}
  .map-section{background:#d5cec6;}
  .accordion-wrap{background:#b2a190;}
  .accordion-btn{background:#b2a190;color:#fff;}
  /* male/female：追従CTAバー */
  .floating-cta{
    left:50%;right:auto;
    transform:translate(-50%,100%);width:590px;max-width:590px;
  }
  .floating-cta.show{transform:translate(-50%,0);}
}