/* FUNDY Designer Note トップ（/fundy/）。上から1本の流れ：タイトル → ギフト → お知らせ → 資料・素材 → フォロー・シェア → ご質問 → ホームページ
   色：hitohira の生成り・金を土台に、押せるものだけ FUNDY の緑 */
:root{--paper:#fffdf9;--bg:#f6f0e6;--ink:#3a342c;--sub:#7a6f60;--gold:#a8884f;--line:#e8dfcf;--teal:#1E9C9B;--deep:#0F5E5D;--mint:#e8f3f2}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden}
body{background:var(--paper);color:var(--ink);font-family:"Noto Serif JP",serif;line-height:1.85;-webkit-font-smoothing:antialiased;font-size:16px}
a{color:inherit}
/* サイト共通のヘッダー */
header.site{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 28px;background:rgba(255,253,249,.95);box-shadow:0 1px 0 var(--line)}
.logo{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:24px;letter-spacing:.06em;text-decoration:none;color:var(--gold)}
nav{display:flex;gap:22px;align-items:center}
nav a{text-decoration:none;font-size:13px;letter-spacing:.12em}
nav a.now{color:var(--teal);border-bottom:1px solid var(--teal)}
nav a.mypage{background:var(--gold);color:#fff;border-radius:99px;padding:4px 16px}
.menu-btn{display:none;background:none;border:0;color:var(--ink);font-size:26px;cursor:pointer}

/* ① タイトル＋ギフト */
.hero{background:var(--bg);text-align:center;padding:56px 20px 48px}
.hero h1{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;font-size:clamp(44px,8vw,84px);line-height:1.1;letter-spacing:.04em}
.hero h1 i{color:var(--gold)}
.by{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-size:14px;color:var(--sub);letter-spacing:.08em}
.by img{width:34px;height:34px;border-radius:50%}
.gift{display:flex;align-items:center;gap:16px;max-width:560px;margin:30px auto 0;text-align:left;text-decoration:none;background:#fff;border:1px solid #a9d6d4;border-radius:14px;padding:14px 20px;box-shadow:0 8px 24px rgba(15,94,93,.10);transition:transform .2s,box-shadow .2s}
.gift:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(15,94,93,.16)}
.gi{flex:0 0 50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--deep));color:#fff;display:flex;align-items:center;justify-content:center}
.gi svg{width:28px;height:28px}
.gt{display:flex;flex-direction:column;min-width:0;flex:1}
.gt em{font-family:"Cormorant Garamond",serif;font-size:14px;letter-spacing:.14em;color:var(--teal)}
.gt b{font-size:17px;font-weight:600;letter-spacing:.04em;line-height:1.5}
.gt small{font-size:14px;color:var(--sub)}
.ga{color:var(--teal);font-size:22px}

main{max-width:1080px;margin:0 auto;padding:0 20px}

/* ② お知らせ（細い帯） */
.news{display:flex;gap:28px;align-items:flex-start;border-bottom:1px solid var(--line);padding:26px 4px}
.news .lbl{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;color:var(--gold);font-size:22px;letter-spacing:.08em;line-height:1.4;flex:0 0 auto}
.news ul{list-style:none;flex:1}
.news li{display:flex;gap:16px;font-size:15px;padding:3px 0}
.news time{color:var(--gold);font-family:"Cormorant Garamond",serif;font-size:16px;white-space:nowrap}
.news a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.news a:hover{color:var(--deep);border-color:var(--teal)}

/* 見出し（全部同じ形） */
.block{padding-top:52px}
.ttl{text-align:center;font-size:21px;font-weight:600;letter-spacing:.16em;margin-bottom:24px}
.ttl span{display:block;font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;color:var(--gold);font-size:18px;letter-spacing:.1em}

/* ③ 資料・素材のカード（同じ大きさで横一列） */
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 10px 16px;text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s}
a.card[href]:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:0 10px 24px rgba(15,94,93,.12)}
.cat{font-size:11.5px;letter-spacing:.1em;color:var(--sub)}
.ic{width:58px;height:58px;border-radius:50%;background:var(--mint);color:var(--deep);display:flex;align-items:center;justify-content:center}
.ic svg{width:30px;height:30px}
.card b{font-size:15.5px;font-weight:600;letter-spacing:.04em}
.st{font-size:12.5px;color:var(--sub);border:1px solid var(--line);border-radius:99px;padding:0 12px}
.st.go{color:var(--teal);border-color:#a9d6d4}
.card.soon{background:#fbf9f5}
.card.soon .ic{background:#efebe4;color:#b3a894}
.card.soon b{color:var(--sub)}
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:20px}
.video{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none}
.video .th{display:block;aspect-ratio:16/9;background:#eee center/cover}
.video b{display:block;padding:10px 14px;font-size:15px;font-weight:600}

/* ④ フォロー・シェア（1行にまとめる） */
.frow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:99px;padding:8px 18px;font-size:15px;letter-spacing:.04em;transition:border-color .2s}
.pill:hover{border-color:var(--teal)}
.pill svg{width:20px;height:20px}
.pill.insta svg{color:#d6336c}
.sep{width:1px;height:26px;background:var(--line);margin:0 6px}
.sb{border:1px solid var(--line);background:none;cursor:pointer;font:inherit;font-size:14px;color:var(--sub);text-decoration:none;border-radius:99px;padding:7px 16px;letter-spacing:.06em;transition:border-color .2s,color .2s}
.sb:hover{border-color:var(--gold);color:var(--ink)}

/* ⑤ ご質問フォーム（contact-form.js）の余白 */
.cf-sec{margin-top:56px!important}

/* ⑥ ホームページ（写真をやわらかく・横長の1枚） */
.hp{display:flex;align-items:stretch;margin:56px auto 0;max-width:820px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;transition:box-shadow .2s}
.hp:hover{box-shadow:0 10px 26px rgba(58,52,44,.10)}
.hpimg{flex:0 0 44%;min-height:200px;background:url(/images/top01.jpg) center 45%/cover;position:relative}
.hpimg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0) 60%,#fff)}
.hpt{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:20px 26px}
.hpt i{font-family:"Cormorant Garamond",serif;color:var(--gold);font-size:24px;letter-spacing:.06em}
.hpt span{font-size:14px;color:var(--sub);line-height:1.8}
.hpt b{font-weight:400;font-size:14px;color:var(--gold);letter-spacing:.1em;margin-top:4px}

footer{text-align:center;padding:28px 20px;font-size:13px;color:var(--sub);border-top:1px solid var(--line);margin-top:60px}
footer a{color:var(--sub)}

/* タブレット */
@media (max-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}}
/* スマホ */
@media (max-width:760px){
  header.site{padding:12px 16px}
  .menu-btn{display:block}
  nav{position:fixed;inset:56px 0 auto;background:rgba(255,253,249,.98);flex-direction:column;gap:0;padding:8px 0;display:none;box-shadow:0 6px 12px rgba(0,0,0,.06)}
  nav.open{display:flex}
  nav a{padding:12px;width:100%;text-align:center}
  nav a.now{border:0}
  nav a.mypage{border-radius:0}
  .hero{padding:36px 16px 30px}
  .by{font-size:12.5px}
  .gift{margin-top:20px;padding:10px 12px;gap:10px}
  .gi{flex:0 0 38px;height:38px}.gi svg{width:22px;height:22px}
  .gt em{font-size:12px}.gt b{font-size:14.5px}.gt small{font-size:12.5px}
  main{padding:0 16px}
  .news{flex-direction:column;gap:6px;padding:18px 2px}
  .news .lbl{font-size:19px}
  .news li{flex-direction:column;gap:0;font-size:14px;padding:4px 0}
  .news time{font-size:14px}
  .block{padding-top:40px}
  .cards{grid-template-columns:1fr 1fr;gap:10px}
  .card b{font-size:14.5px}
  .sep{display:none}
  .hp{flex-direction:column}
  .hpimg{flex-basis:auto;height:180px}
  .hpimg::after{background:linear-gradient(rgba(255,255,255,0) 55%,#fff)}
  .hpt{text-align:center;padding:4px 18px 22px}
}
/* ホームページの欄は小さく（11/02 本人「でかい・こんなにいらん」） */
.hp{max-width:620px}
.hpimg{flex:0 0 150px;min-height:0;height:auto}
.hpt{padding:14px 20px;gap:2px}
.hpt i{font-size:20px}
.hpt span{font-size:13px}
.hpt b{font-size:13px}
@media (max-width:760px){.hp{flex-direction:row}.hpimg{flex:0 0 96px;height:auto}.hpimg::after{background:linear-gradient(90deg,rgba(255,255,255,0) 60%,#fff)}.hpt{text-align:left;padding:10px 14px}.hpt i{font-size:18px}.hpt span{font-size:12px}}

/* 11/02 本人「おしゃれだけど劇的にわかりにくい」→ 種類ごとに見出しを付けて、横長の行で並べる */
.groups{display:grid;gap:22px;max-width:860px;margin:0 auto}
.grp h3{font-size:17px;font-weight:600;letter-spacing:.08em;padding-left:12px;border-left:4px solid var(--teal);margin-bottom:10px;line-height:1.4}
.grp h3 small{font-size:13px;color:var(--sub);font-weight:400;margin-left:4px}
.items{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.item{display:flex;align-items:center;gap:14px;background:#fff;border:1.5px solid #a9d6d4;border-radius:12px;padding:12px 16px;text-decoration:none;transition:transform .2s,box-shadow .2s}
a.item[href]:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,94,93,.12)}
.item .ic{flex:0 0 44px;width:44px;height:44px}
.item .ic svg{width:24px;height:24px}
.item b{font-size:16px;font-weight:600;letter-spacing:.04em;flex:1}
.item .st{white-space:nowrap}
.item.soon{background:#faf8f4;border:1px dashed var(--line)}
.item.soon .ic{background:#efebe4;color:#b3a894}
.item.soon b{color:var(--sub);font-weight:400}
@media (max-width:760px){.items{grid-template-columns:1fr}.item b{font-size:15px}}

/* 11/02 テキストブック／素材集／おすすめ解説動画に分けた */
.groups > .items{max-width:860px}
.videos{margin:0 0 12px}
.vnone{text-align:center;color:var(--sub);font-size:14px;padding:14px;border:1px dashed var(--line);border-radius:12px;background:#faf8f4}
.ytch{max-width:430px;margin:0 auto}
.ytch .ic{color:#e33;background:#fdeceb}
.vnone{grid-column:1/-1}
.groups{width:100%}
.ytch{max-width:480px}.ytch b{white-space:nowrap}
.docnote{max-width:860px;margin:-6px auto 22px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 20px;font-size:14px;color:var(--sub);line-height:1.9}
.docnote p+p{margin-top:2px}
.item b small.v{display:block;font-size:12px;font-weight:400;color:var(--sub);letter-spacing:.02em}
.video b{font-size:14px;line-height:1.6}
.videos{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

/* FUNDY 公式からのお知らせ＝黒板（11/02 本人「黒板みたいなところに・軽く見えるように」） */
.board{margin:26px auto 0;max-width:860px;background:#2f4a40 radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.06),transparent 60%);border:8px solid #8a6a45;border-radius:10px;padding:16px 24px 18px;color:#f4f1e8;font-family:"Klee One","Noto Serif JP",serif;box-shadow:inset 0 0 24px rgba(0,0,0,.25),0 6px 16px rgba(58,52,44,.12)}
.board h2{font-size:17px;font-weight:600;letter-spacing:.12em;color:#fff;margin-bottom:6px;border-bottom:1px dashed rgba(255,255,255,.35);padding-bottom:6px}
.board ul{list-style:none}
.board li{display:flex;gap:12px;align-items:baseline;padding:5px 0;font-size:15.5px;line-height:1.7}
.board em{font-style:normal;flex:0 0 auto;font-size:13px;color:#2f4a40;background:#f3e6a8;border-radius:4px;padding:0 8px;font-weight:600}
@media (max-width:760px){.board{border-width:6px;padding:12px 14px}.board h2{font-size:15px}.board li{flex-direction:column;gap:2px;font-size:14px}.board em{align-self:flex-start;font-size:12px}}

/* 黒板をおしゃれに（11/02 本人「黒板すぎる」）：木の枠・手書き文字をやめて、深いグリーンに細い金の線 */
.board{background:#2c3f38;border:0;border-radius:14px;padding:22px 30px 20px;font-family:"Noto Serif JP",serif;box-shadow:0 10px 28px rgba(44,63,56,.18);position:relative}
.board::before{content:"";position:absolute;inset:7px;border:1px solid rgba(201,176,122,.45);border-radius:9px;pointer-events:none}
.board h2{display:flex;align-items:baseline;gap:12px;border:0;padding:0;margin-bottom:10px;font-size:15px;letter-spacing:.14em;color:#efe9da;font-weight:400}
.board h2 i{font-family:"Cormorant Garamond",serif;font-size:21px;color:#c9b07a;letter-spacing:.06em}
.board li{border-top:1px solid rgba(255,255,255,.10);padding:9px 0;font-size:15px;color:#f3efe4;gap:16px}
.board li:first-of-type{border-top:0}
.board em{background:none;border:1px solid rgba(201,176,122,.7);color:#d9c18c;font-weight:400;font-size:12.5px;border-radius:99px;padding:0 11px;letter-spacing:.06em;min-width:92px;text-align:center}
@media (max-width:760px){.board{padding:16px 18px}.board::before{inset:5px}.board h2{flex-direction:column;gap:0}.board li{font-size:14px}.board em{min-width:0}}
/* 11/02 本人「全体的に文字が小さすぎ」→ 一段ずつ大きく */
body{font-size:17px}
nav a{font-size:14px}
.by{font-size:16px}.by img{width:40px;height:40px}
.gt em{font-size:15px}.gt b{font-size:20px}.gt small{font-size:16px}
.board h2{font-size:18px}.board h2 i{font-size:24px}
.board li{font-size:17px}.board em{font-size:14px;min-width:110px}
.news .lbl{font-size:25px}.news li{font-size:17px;padding:4px 0}.news time{font-size:18px}
.ttl{font-size:25px}.ttl span{font-size:20px}
.docnote{font-size:16px}
.grp h3{font-size:20px}.grp h3 small{font-size:15px}
.item{padding:14px 18px}.item b{font-size:18px}.item .st{font-size:14px;padding:1px 14px}
.item b small.v{font-size:14px}
.item .ic{flex:0 0 50px;width:50px;height:50px}.item .ic svg{width:27px;height:27px}
.pill{font-size:17px;padding:9px 20px}.sb{font-size:16px;padding:8px 18px}
.hpt i{font-size:23px}.hpt span{font-size:15px}.hpt b{font-size:15px}
footer{font-size:14px}
@media (max-width:760px){
  body{font-size:16px}
  .by{font-size:14px}
  .gt b{font-size:16.5px}.gt small{font-size:14px}.gt em{font-size:13px}
  .board li{font-size:15.5px}.board em{font-size:13px}
  .news li{font-size:15.5px}.news time{font-size:15px}
  .ttl{font-size:22px}
  .docnote{font-size:15px}
  .grp h3{font-size:18px}
  .item b{font-size:16.5px}
  .pill{font-size:15.5px}.sb{font-size:14.5px}
  .hpt span{font-size:13.5px}
}
.docnote{color:var(--ink)}
.news a{color:var(--ink)}
.docnote{margin:22px auto 0}
/* 11/02 本人「黒板みたいにしないで・ホワイトボードの方が合う」→ 白いボード */
.board{background:#fff;color:var(--ink);border:1px solid #d9dedd;border-radius:14px;box-shadow:0 1px 0 #e9eceb,0 10px 26px rgba(58,52,44,.08)}
.board::before{inset:6px;border:1px solid #eef1f0}
.board h2{color:var(--ink)}
.board h2 i{color:var(--teal)}
.board li{color:var(--ink);border-top:1px solid #eef1f0}
.board em{border-color:#a9d6d4;color:var(--deep);background:var(--mint)}
.by i{font-family:"Cormorant Garamond",serif;font-size:1.15em;color:var(--gold);margin-right:8px;letter-spacing:.04em}
.by{flex-direction:row-reverse}
.pill .me{width:28px;height:28px;border-radius:50%;margin-left:-8px;box-shadow:0 0 0 2px #fff,0 0 0 3px #e1306c}
.items.three{grid-template-columns:repeat(3,1fr)}
.items.three .item b{font-size:17px;white-space:nowrap}
@media (max-width:900px){.items.three{grid-template-columns:1fr}}
.items.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.items.three .item{padding:12px 14px;gap:10px;min-width:0}
.items.three .item b{font-size:16px}
.items.three .item .st{font-size:13px;padding:1px 10px}
@media (max-width:900px){.items.three{grid-template-columns:1fr}}
.groups{max-width:860px;margin-left:auto;margin-right:auto}
.items.three .st{border:0;padding:0;font-size:0}
.items.three .st.go::after{content:"→";font-size:20px;color:var(--teal)}
/* 11/02 本人「左に素材集・右に2段で動画」 */
.items.three{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:10px}
.items.three > :first-child{grid-row:1 / span 2}
.items.three .item{padding:14px 18px;gap:14px}
.items.three .item b{white-space:normal;font-size:17px}
.items.three .st{border:1px solid #a9d6d4;padding:1px 14px;font-size:14px}
.items.three .st.go::after{content:none}
.items.three .st.go{font-size:14px}
@media (max-width:760px){.items.three{grid-template-columns:1fr}.items.three > :first-child{grid-row:auto}}
.herolinks{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:16px}
.herolinks .pill{background:#fff}
.items.three .item b small.v{font-size:14px;margin-top:4px;line-height:1.6}
.herolinks{align-items:flex-start}
.fw{display:inline-flex;flex-direction:column;align-items:center;gap:3px}
.fw small{font-size:13px;color:var(--sub);letter-spacing:.06em}
.fw small i{font-family:"Cormorant Garamond",serif;font-size:17px;color:var(--gold);letter-spacing:.08em}
/* FUNDY のページではお客様マイページを目立たせない（11/02 本人） */
nav a.mypage{background:none;color:var(--sub);border:1px solid var(--line);font-size:12.5px}
.item a.st{text-decoration:none}
.item a.st + a.st{margin-left:6px}
/* 11/02 スマホではみ出す → 行の中身を折り返せるように */
.items{grid-template-columns:repeat(2,minmax(0,1fr))}
.item{min-width:0}
.item b{min-width:0}
@media (max-width:760px){
  .items,.items.three{grid-template-columns:minmax(0,1fr)}
  .groups,.docnote{max-width:100%}
  .item{flex-wrap:wrap;gap:10px 12px;padding:12px 14px}
  .item .ic{flex:0 0 44px;width:44px;height:44px}
  .item b{flex:1 1 0;font-size:16px}
  .item b small.v{font-size:12.5px}
  .item .st{margin-left:auto;font-size:13px;padding:1px 12px}
  .item a.st:first-of-type{margin-left:auto}
  .item:has(a.st + a.st) b{flex-basis:calc(100% - 60px)}
  .item a.st + a.st{margin-left:0}
}
/* 11/02 本人「名前の見え方・改行をきれいに」：言葉の途中で折り返さない */
.nw{display:inline-block;white-space:nowrap}
.by .nm{margin-left:1em;white-space:nowrap}
.gt b .nw{margin-left:.3em}
@media (max-width:760px){
  .by{display:block;line-height:1.7}
  .by > span{display:flex;flex-direction:column;align-items:center}
  .by i{margin-right:0}
  .by .nm{margin-left:0;font-size:1.15em;color:var(--ink)}
  .gt b .nw{margin-left:0}
}

/* ===== 期間限定セール告知（2026-11-11・終了後は削除）===== */
.saletag{display:flex;flex-direction:column;align-items:center;gap:0;width:max-content;max-width:90%;margin:26px auto -6px;font-family:"Noto Serif JP",serif;font-weight:600;font-size:15px;letter-spacing:.09em;color:#c25737;background:#fff6f1;border:1px solid #e8b9a5;border-radius:99px;padding:8px 24px 9px;animation:saleblink 1.4s ease-in-out infinite}
.saletag small{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:13px;letter-spacing:.06em;color:#b47c63;margin-top:1px}
@keyframes saleblink{0%{box-shadow:0 0 0 0 rgba(194,87,55,.28);opacity:.9}50%{box-shadow:0 0 20px 5px rgba(194,87,55,.26);opacity:1}100%{box-shadow:0 0 0 0 rgba(194,87,55,.28);opacity:.9}}
.saleflow{max-width:560px;margin:14px auto 0;font-size:14.5px;color:var(--sub);line-height:1.85}
.saleflow b{color:var(--deep);font-weight:600}
@media (prefers-reduced-motion:reduce){.saletag{animation:none}}

/* ===== ②セール購入ボタン（2026-11-11・終了後は削除）===== */
.buy{display:flex;align-items:center;gap:16px;max-width:560px;margin:14px auto 0;text-align:left;text-decoration:none;background:linear-gradient(135deg,#1E9C9B,#0F5E5D);color:#fff;border-radius:14px;padding:16px 22px;box-shadow:0 10px 26px rgba(15,94,93,.22);transition:transform .2s,box-shadow .2s}
.buy:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(15,94,93,.30)}
.buy .bi{flex:0 0 50px;height:50px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;justify-content:center}
.buy .bi svg{width:28px;height:28px}
.buy .gt{display:flex;flex-direction:column;flex:1}
.buy .gt em{color:#ffe6ad}
.buy .gt b{color:#fff}
.buy .gt small{color:rgba(255,255,255,.92)}
.buy .ga{color:#fff;font-size:22px;margin-left:auto}

/* 2026-11-11 本人「スマホ版だともうニュースは、一回消してもらって表示させないように…パソコンから見てる人にはニュースが見えるように」 */
@media (max-width:760px){.news{display:none}}