:root{
  --cream:      #f2ece0;   /* チラシの生成り */
  --cream-lt:   #f7f3ea;   /* すこし明るい生成り */
  --brown:      #574636;   /* チラシのこげ茶（本文） */
  --brown-lt:   #8a7660;   /* うすい茶 */
  --brown-lbl:  #7d6b55;   /* ラベルの茶 */
  --brown-pale: #cabba4;
  --navy:       #2d3949;   /* チラシの濃紺ボックス */
  --white:      #ffffff;
  /* ラベンダー（まゆ美さんのブラウスの色。差し色として少しだけ） */
  --lav-pale:   #dccbec;
  --lav:        #b9a3cf;
  --lav-deep:   #6f5f85;
  --navy-lav:   #332f47;   /* 濃紺に紫をひとさじ */
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  font-family: "Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
  color: var(--brown);
  background: var(--cream);
  line-height: 2;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

img{ max-width:100%; height:auto; display:block; }

.wrap{
  max-width: 620px;
  margin: 0 auto;
  background: var(--cream-lt);
  overflow: hidden;
}

section{ padding: 60px 26px; }

/* ============ 写真のプレースホルダ ============
   写真が用意できたら、この枠ごと <img src="写真.jpg" alt="説明"> に
   置き換えてください。枠は消してOKです。 */
.photo{
  background: linear-gradient(135deg, #e4d9c8 0%, #d3c4ad 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brown-lt);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-align: center;
  line-height: 1.9;
  padding: 20px;
}
.photo-wide{ aspect-ratio: 4/3; }
.photo-sq  { aspect-ratio: 1/1; }

/* ============ 波型の区切り（チラシの特徴） ============ */
.wave{ display:block; width:100%; height:44px; margin-bottom:-1px; }
.wave-up{ transform: rotate(180deg); }

/* ============ ヒーロー ============ */
.hero{ position: relative; background: var(--cream-lt); }
.hero-photo{ position: relative; }

/* バナー画像 */
.hero-banner{ margin: 0; line-height: 0; }
.hero-banner img{ width: 100%; }

/* 波をヒーロー写真の下端に重ねる */
.hero-wave{
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  z-index: 2;
}

.hero-title{
  text-align: center;
  padding: 0 26px;
}

/* ============ 丸バッジ（チラシの「8名様限定」「完全予約制」） ============ */
.badges{
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 30px 0 0;
}
.badge{
  width: 108px; height: 108px;
  border-radius: 50%;
  background: #ece3d3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 15px;
  letter-spacing: .08em;
  line-height: 1.6;
  color: var(--brown);
  box-shadow: 0 2px 10px rgba(87,70,54,.07);
}
.badge .num{
  font-size: 25px;
  letter-spacing: .02em;
}

/* ============ リード文 ============ */
.lead{
  text-align: center;
  font-size: 16px;
  letter-spacing: .06em;
  line-height: 2.5;
}

/* ============ 見出し（チラシの茶色い帯） ============ */
.h2-band{
  display: block;
  max-width: 300px;
  margin: 0 auto 40px;
  background: var(--brown-lbl);
  color: var(--cream-lt);
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .18em;
  padding: 9px 20px;
  border-radius: 3px;
}

/* ============ 情景の3ブロック ============ */
.scene{ margin-bottom: 50px; }
.scene:last-child{ margin-bottom: 0; }
.scene h3{
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .1em;
  margin: 22px 0 12px;
  text-align: center;
  color: var(--lav-deep);
}
.scene p{
  font-size: 15px;
  line-height: 2.3;
  letter-spacing: .04em;
}

/* ============ インスタのリール埋め込み ============ */
.reels{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.reel{
  width: 100%;
  max-width: 340px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream);
  box-shadow: 0 2px 12px rgba(87,70,54,.08);
}
.reel iframe{
  display: block;
  width: 100%;
  height: 700px;
  border: none;
}
.reel-note{
  text-align: center;
  font-size: 13px;
  color: var(--brown-lt);
  letter-spacing: .04em;
  line-height: 2;
  margin-top: 24px;
}

/* ============ 当日の流れ（チラシの↓フロー） ============ */
.flow{ background: var(--cream); }
.flow-list{
  text-align: center;
  max-width: 400px;
  margin: 0 auto;
}
.flow-item{
  font-size: 17px;
  letter-spacing: .08em;
  line-height: 1.9;
}
.flow-item .note{
  display: block;
  font-size: 13.5px;
  color: var(--brown-lt);
  letter-spacing: .04em;
  line-height: 1.9;
  margin-top: 4px;
}
.flow-arrow{
  color: var(--lav);
  font-size: 17px;
  line-height: 1;
  margin: 16px 0;
}

/* ============ こんな方に ============ */
.for-list{
  list-style: none;
  max-width: 400px;
  margin: 0 auto;
}
.for-list li{
  position: relative;
  padding: 0 0 20px 30px;
  font-size: 15.5px;
  line-height: 2.1;
  letter-spacing: .04em;
}
.for-list li:last-child{ padding-bottom: 0; }
.for-list li::before{
  content: "☕";
  position: absolute;
  left: 0; top: 0;
  font-size: 13px;
}

/* ============ 開催概要（チラシの茶色ラベル） ============ */
.info-row{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(202,187,164,.55);
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}
.info-row:last-child{ border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.info-label{
  flex: 0 0 78px;
  white-space: nowrap;
  background: var(--brown-lbl);
  color: var(--cream-lt);
  font-size: 12.5px;
  letter-spacing: .12em;
  text-align: center;
  padding: 4px 0;
  border-radius: 2px;
  margin-top: 7px;
  line-height: 1.7;
}
.info-body{
  flex: 1;
  font-size: 16.5px;
  letter-spacing: .05em;
  line-height: 1.9;
}
.info-body .note{
  display: block;
  font-size: 13px;
  color: var(--brown-lt);
  margin-top: 5px;
  line-height: 1.9;
}
.info-body .big{
  font-size: 27px;
  letter-spacing: .02em;
}

/* ============ プロフィール ============ */
.profile{ background: var(--cream); }
.profile-photo{ max-width: 200px; margin: 0 auto 28px; }
.profile-photo .photo{ border-radius: 50%; }
/* 丸く切り抜き。お顔が真ん中に来るよう object-position で調整 */
.profile-img{
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: 50% 26%;
  border-radius: 50%;
}
.profile-name{
  text-align: center;
  font-size: 20px;
  letter-spacing: .12em;
  margin-bottom: 4px;
}
.profile-role{
  text-align: center;
  font-size: 12.5px;
  letter-spacing: .16em;
  color: var(--brown-lt);
  margin-bottom: 30px;
}
.profile-text p{
  font-size: 15px;
  line-height: 2.4;
  letter-spacing: .04em;
  margin-bottom: 20px;
}
.profile-text p:last-child{ margin-bottom: 0; }
.profile-text .quiet{ color: var(--brown-lt); font-size: 14.5px; }

/* ============ FAQ ============ */
.faq details{
  border-bottom: 1px solid var(--brown-pale);
  padding: 19px 0;
}
.faq details:first-of-type{ border-top: 1px solid var(--brown-pale); }
.faq summary{
  cursor: pointer;
  font-size: 15.5px;
  letter-spacing: .04em;
  list-style: none;
  position: relative;
  padding-right: 30px;
  line-height: 1.9;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: "＋";
  position: absolute;
  right: 2px; top: 0;
  color: var(--lav-deep);
  font-size: 15px;
}
.faq details[open] summary::after{ content: "－"; }
.faq .answer{
  font-size: 14.5px;
  line-height: 2.2;
  color: var(--brown-lt);
  padding: 13px 0 3px;
  letter-spacing: .03em;
}

/* ============ CTA（生成り＋枠線。いちばん軽いかたち） ============ */
.cta-box{
  background: #ede3d0;
  border: 1px solid #c4b299;
  border-radius: 14px;
  padding: 40px 26px;
  text-align: center;
  max-width: 460px;
  margin: 0 auto;
  color: var(--brown);
}
.cta-box .cta-ttl{
  font-size: 19px;
  letter-spacing: .18em;
  margin-bottom: 8px;
  color: var(--brown);
}
.cta-box .cta-rule{
  width: 34px; height: 1px;
  background: #a89478;
  margin: 0 auto 22px;
}
.cta-box .cta-lead{
  font-size: 14.5px;
  line-height: 2.2;
  letter-spacing: .04em;
  margin-bottom: 24px;
  color: #6b5a46;
}
.btn{
  display: block;
  max-width: 320px;
  margin: 0 auto;
  background: #6b5642;
  color: #f5efe3;
  text-decoration: none;
  padding: 19px 22px;
  border-radius: 6px;
  font-size: 17px;
  letter-spacing: .08em;
  box-shadow: 0 3px 12px rgba(87,70,54,.18);
  transition: opacity .2s;
}
.btn:hover{ opacity: .85; }
.btn .btn-sub{
  display: block;
  font-size: 11.5px;
  letter-spacing: .05em;
  margin-top: 5px;
  opacity: .8;
}
.cta-note{
  font-size: 12.5px;
  color: var(--brown-lt);
  margin-top: 18px;
  line-height: 2;
  letter-spacing: .03em;
}

/* ============ フッター ============ */
footer{
  text-align: center;
  padding: 40px 26px 46px;
  font-size: 13px;
  letter-spacing: .12em;
  line-height: 2.2;
  color: var(--brown-lt);
  background: var(--cream);
}

/* ============ スマホ調整 ============ */
@media (max-width: 480px){
  section{ padding: 50px 22px; }
  .h2-band{ font-size: 16px; }
  .lead{ font-size: 15.5px; }
  .badge{ width: 98px; height: 98px; font-size: 14px; }
  .badge .num{ font-size: 22px; }
  .wave{ height: 32px; }
  .info-label{ flex-basis: 72px; font-size: 11.5px; }
  .info-body{ font-size: 15.5px; }
}

/* ==================================================
   ここから下は、下層ページ（自己紹介・イベント詳細）用
   ================================================== */

/* ---- サブページの見出し（バナーの代わり） ---- */
.page-head{
  background: var(--cream);
  text-align: center;
  padding: 46px 26px 40px;
}
.page-head .eyebrow{
  display: block;
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--brown-lt);
  margin-bottom: 14px;
}
.page-head h1{
  font-size: 27px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.8;
}
.page-head .page-rule{
  width: 38px; height: 1px;
  background: var(--lav);
  margin: 20px auto 0;
}

/* ---- 戻るリンク ---- */
.back-link{
  display: inline-block;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--brown-lt);
  text-decoration: none;
  padding: 16px 26px 0;
}
.back-link:hover{ color: var(--lav-deep); }

/* ---- ページ間のリンク（フッター上） ---- */
.page-nav{
  background: var(--cream);
  padding: 40px 26px;
  text-align: center;
}
.page-nav a{
  display: block;
  max-width: 380px;
  margin: 0 auto 14px;
  padding: 17px 20px;
  background: var(--cream-lt);
  border: 1px solid var(--brown-pale);
  border-radius: 6px;
  color: var(--brown);
  text-decoration: none;
  font-size: 15.5px;
  letter-spacing: .08em;
  transition: border-color .2s;
}
.page-nav a:last-child{ margin-bottom: 0; }
.page-nav a:hover{ border-color: var(--lav); }
.page-nav a .nav-sub{
  display: block;
  font-size: 12.5px;
  color: var(--brown-lt);
  letter-spacing: .04em;
  margin-top: 4px;
}

/* ---- 時間割（イベント詳細用） ---- */
.timeline{ max-width: 420px; margin: 0 auto; }
.tl-row{
  display: flex;
  gap: 18px;
  padding-bottom: 26px;
  position: relative;
}
.tl-row:last-child{ padding-bottom: 0; }
.tl-time{
  flex: 0 0 62px;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--lav-deep);
  padding-top: 1px;
}
.tl-body{ flex: 1; }
.tl-body h3{
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: .06em;
  margin-bottom: 5px;
}
.tl-body p{
  font-size: 14.5px;
  line-height: 2.1;
  color: var(--brown-lt);
  letter-spacing: .03em;
}
.tl-row:not(:last-child) .tl-time::after{
  content: "";
  position: absolute;
  left: 30px; top: 30px;
  width: 1px; height: calc(100% - 34px);
  background: var(--brown-pale);
}

/* ---- 本文ブロック（自己紹介用） ---- */
.story{ max-width: 460px; margin: 0 auto; }
.story h3{
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--lav-deep);
  margin: 40px 0 14px;
  text-align: center;
}
.story h3:first-child{ margin-top: 0; }
.story p{
  font-size: 15.5px;
  line-height: 2.4;
  letter-spacing: .04em;
  margin-bottom: 20px;
}
.story p:last-child{ margin-bottom: 0; }
.story .quiet{ color: var(--brown-lt); font-size: 15px; }

/* ---- 持ち物などのリスト ---- */
.plain-list{ list-style: none; max-width: 420px; margin: 0 auto; }
.plain-list li{
  position: relative;
  padding: 0 0 14px 26px;
  font-size: 15.5px;
  line-height: 2;
  letter-spacing: .04em;
}
.plain-list li:last-child{ padding-bottom: 0; }
.plain-list li::before{
  content: "・";
  position: absolute;
  left: 4px; top: 0;
  color: var(--lav);
}

/* ==================================================
   ★確認用の目印（公開する前に、この印のブロックを消すか直す）
   ================================================== */
.check{
  background: #fdf6e3;
  border-left: 3px solid #d9a441;
  padding: 14px 16px;
  margin: 16px auto;
  max-width: 460px;
  font-size: 13.5px;
  line-height: 2;
  color: #8a6d2f;
  letter-spacing: .03em;
  border-radius: 0 4px 4px 0;
}
.check strong{ font-weight: 600; }

@media (max-width: 480px){
  .page-head h1{ font-size: 23px; }
  .tl-time{ flex-basis: 56px; font-size: 14px; }
  .tl-row:not(:last-child) .tl-time::after{ left: 27px; }
}