@charset "UTF-8";
/* スマホ商品撮影 1DAY WORKSHOP */

:root{
  --base:#FAF7F5;      /* ウォームオフホワイト（基本背景） */
  --ink:#3E3639;       /* ウォームチャコール（見出し・本文） */
  --rose:#B4636A;      /* ダスティローズ（CTA・アクセント） */
  --rose-hover:#9E545B;
  --mauve:#8C7078;     /* くすみモーヴ（ラベル・英字） */
  --pale:#F4EAE8;      /* ペールピンク（面） */
  --line:#E8DCD9;      /* 罫線 */
  --plum:#5F4A52;      /* 深いモーヴ（最終CTA） */
  --sub:#857A7C;       /* 補助文字 */
  --white:#FFFFFF;
  --wrap:1120px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}

body{
  font-family:"Noto Sans JP",sans-serif;
  font-size:16px;line-height:1.9;
  color:var(--ink);background:var(--white);
  letter-spacing:.03em;padding-bottom:84px;
  -webkit-text-size-adjust:100%;
}

img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
a{color:inherit}

h1,h2,h3{line-height:1.6;font-weight:700}
.num{font-family:"Montserrat","Noto Sans JP",sans-serif;font-weight:600;letter-spacing:.01em}

.wrap{max-width:var(--wrap);margin:0 auto}
.wrap--narrow{max-width:720px}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:300}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:16px 32px;
  font-size:16px;font-weight:700;line-height:1.5;text-align:center;text-decoration:none;
  border:1px solid transparent;border-radius:100px;cursor:pointer;
  letter-spacing:.04em;
  transition:background-color .3s ease,color .3s ease,box-shadow .3s ease,transform .3s ease;
}
.btn--accent{background:var(--rose);color:#fff;border-color:var(--rose)}
.btn--accent:hover{background:var(--rose-hover);border-color:var(--rose-hover);transform:translateY(-2px);box-shadow:0 10px 24px rgba(180,99,106,.28)}
.btn--outline{background:transparent;color:var(--rose);border-color:var(--rose)}
.btn--outline:hover{background:var(--rose);color:#fff;transform:translateY(-2px)}
.btn--light{background:var(--white);color:var(--plum);border-color:var(--white)}
.btn--light:hover{background:var(--pale);border-color:var(--pale);transform:translateY(-2px)}
.btn:active{transform:none;box-shadow:none}
.btn--sm{min-height:56px;padding:12px 24px;font-size:14px}
.btn--wide{width:100%}

/* ---------- ヘッダー ---------- */
.head{
  position:sticky;top:0;z-index:90;
  background:rgba(250,247,245,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.head__inner{
  max-width:var(--wrap);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 18px;
}
.head__logo{
  font-family:"Montserrat",sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.16em;line-height:1.5;color:var(--ink);
}
.head__date{font-size:13px;color:var(--mauve);letter-spacing:.1em;display:none}
.head__cta{display:none}

/* ハンバーガー */
.burger{
  width:46px;height:46px;border:1px solid var(--line);border-radius:100px;
  background:var(--white);cursor:pointer;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  transition:background-color .25s ease;
}
.burger span{display:block;width:18px;height:1px;background:var(--ink);transition:transform .25s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.burger:hover{background:var(--pale)}

.drawer{display:none;background:var(--white);border-top:1px solid var(--line);padding:8px 20px 20px}
.drawer.is-open{display:block}
.drawer__list li+li{border-top:1px solid var(--line)}
.drawer__list a{display:block;padding:14px 4px;text-decoration:none;font-size:15px}
.drawer__list a:hover{color:var(--rose)}

/* ---------- 装飾 ---------- */
.deco{position:absolute;display:block;pointer-events:none}
.deco--circle{
  width:230px;height:230px;border-radius:50%;
  background:var(--pale);top:-80px;right:-90px;opacity:.7;
}
.deco--square{
  width:150px;height:150px;border:1px solid var(--line);
  transform:rotate(12deg);bottom:24px;left:-60px;border-radius:24px;
}

/* ---------- セクション共通 ---------- */
.sec{padding:72px 20px;position:relative;overflow:hidden}
.sec--pale{background:var(--pale)}
.sec--cream{background:var(--base)}
.sec__title{font-size:22px;text-align:center;color:var(--ink);margin-bottom:28px;letter-spacing:.02em}
.sec__title--light{color:#fff}
.sec__num{font-size:1.5em;color:var(--rose);margin:0 3px;font-weight:600}
.sec__lead{text-align:center;font-size:15px;color:var(--sub);margin-bottom:36px}
.note{font-size:13px;color:var(--sub);text-align:center;margin-top:24px}

.tag{
  display:inline-block;background:transparent;color:var(--mauve);
  font-size:12px;font-weight:500;letter-spacing:.12em;
  border:1px solid var(--mauve);border-radius:100px;padding:6px 18px;margin-bottom:22px;
}

/* ---------- ファーストビュー ---------- */
.hero{background:var(--base);padding:40px 20px 60px;position:relative;overflow:hidden}
.hero__inner{position:relative;z-index:1}
.hero__hook{font-size:21px;font-weight:700;line-height:1.7;margin-bottom:16px;letter-spacing:.02em}
.hero__title{font-size:19px;color:var(--mauve);margin-bottom:20px;line-height:1.7;font-weight:700}
.hero__title-em{
  background:linear-gradient(transparent 66%,rgba(180,99,106,.16) 66%);
  padding:0 2px;
}
.hero__sub{font-size:15px;color:var(--sub);margin-bottom:30px}
.hero__photo{margin:0 0 30px}
.hero__photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}

.event{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:24px 22px;margin-bottom:26px}
.event__row{display:grid;grid-template-columns:5em 1fr;gap:12px;align-items:baseline;padding:10px 0}
.event__row+.event__row{border-top:1px solid var(--line)}
.event__row dt{font-size:12px;font-weight:500;letter-spacing:.1em;color:var(--mauve)}
.event__row dd{font-size:15px}
.event__big{font-size:25px;line-height:1.3;color:var(--ink);font-weight:600}
.event__day{font-size:14px}

.hero__deadline{font-size:13px;color:var(--sub);text-align:center;margin-top:16px;letter-spacing:.04em}

/* ---------- 悩み ---------- */
.worries{display:grid;gap:1px;max-width:760px;margin:0 auto;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.worries li{
  background:var(--white);padding:18px 16px 18px 44px;position:relative;font-size:16px;
}
.worries li::before{
  content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:var(--rose);
}
.worries__close{text-align:center;margin-top:36px;font-size:17px;line-height:1.9}
.worries__close strong{color:var(--rose);font-weight:700}

/* ---------- できるようになること ---------- */
.cans{display:grid;gap:20px}
.can{background:var(--white);border-radius:6px;padding:26px 24px}
.can__num{font-size:13px;color:var(--rose);line-height:1.4;letter-spacing:.14em;margin-bottom:8px;font-weight:600}
.can__title{font-size:17px;color:var(--ink);margin-bottom:8px}
.can p{font-size:14px;color:var(--sub)}

/* ---------- ビフォーアフター ---------- */
.ba{display:grid;gap:20px;align-items:start}
.ba__label{
  font-family:"Montserrat",sans-serif;font-weight:600;font-size:12px;letter-spacing:.2em;
  text-align:center;padding:6px 0;margin-bottom:14px;
}
.ba__label--before{color:var(--sub);border-bottom:1px solid var(--line)}
.ba__label--after{color:var(--rose);border-bottom:1px solid var(--rose)}
.phone{
  border:8px solid var(--ink);border-radius:26px;overflow:hidden;background:var(--ink);
  max-width:270px;margin:0 auto;
}
.ba__img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.ba__img--before{filter:brightness(.62) saturate(.72) sepia(.22) contrast(.92)}
.ba figcaption{font-size:14px;color:var(--sub);margin-top:14px;text-align:center}
.ba__arrow{text-align:center;color:var(--rose);font-size:18px;transform:rotate(90deg)}

/* ---------- カリキュラム ---------- */
.curriculum{display:grid;gap:0;max-width:820px;margin:0 auto}
.cur{background:transparent;padding:26px 0;border-bottom:1px solid var(--line)}
.cur:first-child{border-top:1px solid var(--line)}
.cur__time{
  display:inline-block;color:var(--rose);font-size:14px;letter-spacing:.06em;
  margin-bottom:10px;
}
.cur__title{font-size:17px;margin-bottom:10px}
.cur__body ul{display:grid;gap:6px}
.cur__body li{font-size:14px;padding-left:16px;position:relative;color:var(--sub)}
.cur__body li::before{content:"";position:absolute;left:2px;top:.85em;width:5px;height:1px;background:var(--mauve)}

/* ---------- 持ち物 ---------- */
.bring{display:grid;gap:20px;max-width:860px;margin:0 auto}
.bring__box{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:26px 24px}
.bring__box--sub{background:var(--base);border-color:transparent}
.bring__title{font-size:16px;color:var(--ink);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.bring__list{display:grid;gap:10px}
.bring__list li{font-size:15px;padding-left:22px;position:relative}
.bring__list li::before{
  content:"";position:absolute;left:2px;top:.62em;width:10px;height:5px;
  border-left:1.5px solid var(--rose);border-bottom:1.5px solid var(--rose);transform:rotate(-45deg);
}

/* ---------- 特典 ---------- */
.bonuses{display:grid;gap:20px}
.bonus{background:var(--white);border-radius:6px;padding:28px 24px}
.bonus__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--rose);color:var(--rose);
  font-size:13px;margin-bottom:14px;font-weight:600;
}
.bonus__title{font-size:16px;color:var(--ink);margin-bottom:8px}
.bonus p{font-size:14px;color:var(--sub)}

/* ---------- 講師 ---------- */
.teacher{display:grid;gap:28px;max-width:900px;margin:0 auto}
.teacher__photo img{width:100%;max-width:220px;margin:0 auto;aspect-ratio:3/4;object-fit:cover;border-radius:4px}
.teacher__role{font-size:12px;color:var(--mauve);letter-spacing:.12em}
.teacher__name{font-size:22px;color:var(--ink);margin-bottom:18px;font-weight:700}
.teacher__body p{margin-bottom:1.1em;font-size:15px}
.teacher__career{border-top:1px solid var(--line);padding-top:18px;display:grid;gap:8px}
.teacher__career li{font-size:14px;color:var(--sub);padding-left:16px;position:relative}
.teacher__career li::before{content:"";position:absolute;left:0;top:.85em;width:8px;height:1px;background:var(--rose)}

/* ---------- 開催概要 ---------- */
.outline{max-width:760px;margin:0 auto}
.outline__row{display:grid;gap:4px;padding:16px 4px;border-bottom:1px solid var(--line)}
.outline__row:first-child{border-top:1px solid var(--line)}
.outline__row dt{font-size:12px;font-weight:500;letter-spacing:.1em;color:var(--mauve)}
.outline__row dd{font-size:15px}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line);padding:20px 4px}
.faq__item dt{font-weight:700;color:var(--ink);padding-left:28px;position:relative;margin-bottom:10px}
.faq__item dt::before{content:"Q";position:absolute;left:0;top:0;font-family:"Montserrat",sans-serif;color:var(--rose);font-size:15px;font-weight:600}
.faq__item dd{font-size:15px;color:var(--sub);padding-left:28px}

/* ---------- 参加申込 ---------- */
.entry{background:var(--white);border-radius:6px;padding:30px 24px;text-align:center}
.entry__summary{display:grid;gap:0;margin-bottom:28px;text-align:left}
.entry__summary div{display:grid;grid-template-columns:4.5em 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.entry__summary div:first-child{border-top:1px solid var(--line)}
.entry__summary dt{font-size:12px;font-weight:500;letter-spacing:.1em;color:var(--mauve)}
.entry__summary dd{font-size:15px}
.entry__note{font-size:13px;color:var(--sub);margin-top:18px;line-height:1.8}

/* ---------- 最終CTA ---------- */
.sec--last{background:var(--plum);color:#fff;text-align:center;padding-bottom:80px}
.sec--last .sec__lead{color:rgba(255,255,255,.8)}
.last__text{font-size:15px;margin-bottom:24px;color:rgba(255,255,255,.88)}
.last__limit{
  display:inline-block;border:1px solid rgba(255,255,255,.4);border-radius:100px;
  padding:7px 24px;font-size:14px;margin-bottom:28px;letter-spacing:.06em;
}
.last__deadline{font-size:13px;margin-top:18px;color:rgba(255,255,255,.72)}

/* ---------- フッター ---------- */
.foot{background:var(--base);color:var(--ink);text-align:center;padding:52px 20px 40px;border-top:1px solid var(--line)}
.foot__brand{font-size:14px;font-weight:700;margin-bottom:26px}
.foot__title{font-size:11px;font-weight:500;letter-spacing:.16em;color:var(--mauve);margin-bottom:10px}
.foot__sample{font-size:12px;color:var(--sub);max-width:720px;margin:0 auto;line-height:1.9}
.foot__links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;margin:22px 0 18px}
.foot__links a{font-size:12px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.foot__links a:hover{border-bottom-color:var(--rose);color:var(--rose)}
.foot__copy{font-size:11px;color:var(--sub);letter-spacing:.08em}

/* ---------- 固定CTA ---------- */
.fixed-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  display:flex;align-items:center;gap:14px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  transition:transform .3s ease;
}
.fixed-cta.is-hidden{transform:translateY(115%)}
.fixed-cta__info{font-size:11px;color:var(--mauve);line-height:1.5;flex-shrink:0;letter-spacing:.06em}
.fixed-cta__btn{
  flex:1;display:flex;align-items:center;justify-content:center;min-height:56px;
  background:var(--rose);color:#fff;border-radius:100px;font-weight:700;font-size:15px;
  text-decoration:none;letter-spacing:.04em;transition:background-color .3s ease}
.fixed-cta__btn:hover{background:var(--rose-hover)}

/* ---------- フェードイン ---------- */
.fade{opacity:0;transform:translateY(10px);transition:opacity .7s ease,transform .7s ease}
.fade.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fade{opacity:1;transform:none;transition:none}
  .btn:hover{transform:none}
}

/* ---------- タブレット以上 ---------- */
@media (min-width:768px){
  body{padding-bottom:0}
  .sp{display:none}
  .fixed-cta{display:none}
  .head__date{display:block}
  .head__cta{display:inline-flex}
  .burger{display:none}
  .drawer{display:none !important}
  .head__logo{font-size:13px}
  .head__inner{padding:14px 28px}

  .sec{padding:104px 32px}
  .sec__title{font-size:28px;margin-bottom:40px}

  .hero{padding:72px 32px 88px}
  .hero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .hero__hook{font-size:30px}
  .hero__title{font-size:23px}
  .hero__photo{margin:0}
  .hero__photo img{aspect-ratio:3/4}
  .hero__deadline{text-align:left}

  .worries{grid-template-columns:repeat(2,1fr);gap:1px}
  .cans{grid-template-columns:repeat(2,1fr)}
  .ba{grid-template-columns:1fr auto 1fr;gap:32px;align-items:center;max-width:880px;margin:0 auto}
  .ba__arrow{transform:none;font-size:22px}
  .phone{max-width:300px}

  .cur{display:grid;grid-template-columns:180px 1fr;gap:28px;align-items:start;padding:30px 0}
  .cur__time{margin-bottom:0}

  .bring{grid-template-columns:1fr 1fr}
  .bonuses{grid-template-columns:repeat(3,1fr)}
  .teacher{grid-template-columns:220px 1fr;gap:48px;align-items:start}
  .teacher__photo img{max-width:none}
  .outline__row{grid-template-columns:9em 1fr;gap:24px;align-items:baseline}
  .entry{padding:44px 48px}
  .foot{padding:64px 32px 44px}
}

@media (min-width:1024px){
  .hero__hook{font-size:34px}
  .hero__title{font-size:25px}
}