/* 絵画教室 STORY labo — 元サイト（Ameba Ownd）のくすみピンク×白カード×ベージュ文字の雰囲気を再現 */
:root{
  --bg:#dfb7b3; --bg-deep:#cf9f9a; --card:#fff; --ink:#6b5e52; --ink-soft:#998e7c;
  --accent:#c9766e; --accent-soft:#f6e6e3; --line:#ece2da;
  --line-green:#06c755; --ig:#c13584;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{background:var(--bg);color:var(--ink);font-family:"Zen Maru Gothic","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  line-height:1.9;font-size:15px;letter-spacing:.03em;}
a{color:var(--accent);}
img{max-width:100%;}

/* ヘッダー */
.site-head{background:rgba(255,255,255,.95);box-shadow:0 1px 0 var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 16px;padding:8px 16px 6px;}
@media (min-width:720px){.site-head{position:sticky;top:0;z-index:10;}}
.brand{color:var(--ink);text-decoration:none;font-size:1rem;}
.brand b{color:var(--accent);font-weight:700;letter-spacing:.06em;}
.gnav{display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%;}
.gnav::-webkit-scrollbar{display:none;}
.gnav a{color:var(--ink-soft);text-decoration:none;font-size:.8rem;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.gnav a.on{background:var(--accent-soft);color:var(--accent);font-weight:700;}

main{max-width:880px;margin:0 auto;padding:20px 16px 40px;}

/* 写真の枠（images/ に写真が無いときは案内を出す） */
.ph{position:relative;margin:14px 0;border-radius:10px;overflow:hidden;background:repeating-linear-gradient(45deg,#f7efe9,#f7efe9 10px,#f2e7df 10px,#f2e7df 20px);
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ph-label{color:var(--ink-soft);font-size:.85rem;text-align:center;line-height:1.5;padding:8px;}
.ph-label small{display:block;font-size:.72rem;opacity:.8;}
.ph.round{width:150px;height:150px;aspect-ratio:auto;border-radius:50%;margin:10px auto;}
.ph.round .ph-label{font-size:.7rem;}

/* トップの大きな写真＋白いカード */
.hero{position:relative;margin-bottom:20px;}
.hero-ph{aspect-ratio:16/10;margin:0;border:8px solid #fff;border-radius:4px;}
.hero-card{background:#fff;padding:22px 22px 18px;margin:-60px 14px 0;position:relative;box-shadow:0 2px 0 rgba(0,0,0,.04);}
.hero-card h1{font-size:1.5rem;line-height:1.4;margin-bottom:10px;color:var(--ink);font-weight:500;}
.hero-card h1 span{color:var(--accent);font-weight:700;letter-spacing:.08em;}
.hero-card p{font-size:.92rem;}
@media (min-width:720px){
  .hero{display:grid;grid-template-columns:1fr 1.6fr;align-items:center;}
  .hero-card{grid-row:1;grid-column:1/2;margin:0 -40px 0 0;z-index:1;}
  .hero-ph{grid-row:1;grid-column:2/3;}
}

/* カード */
.card{background:var(--card);border-radius:6px;padding:24px 20px;margin-bottom:18px;}
.card h2{font-size:1.15rem;color:var(--accent);text-align:center;margin-bottom:14px;padding-bottom:10px;
  border-bottom:1px dashed var(--line);font-weight:700;}
.card h3{font-size:1rem;margin:18px 0 6px;color:var(--ink);}
.card h4{font-size:.95rem;margin:14px 0 4px;}
.card p{margin-bottom:8px;}
.card.accent{border:2px solid var(--accent-soft);}
.center{text-align:center;margin-top:10px;}
.box{background:var(--accent-soft);border-radius:8px;padding:12px 14px;margin:12px 0;font-size:.92rem;}
.box p{margin-bottom:2px;}
.box-title{font-weight:700;color:var(--accent);}
.dots{list-style:none;margin:8px 0 12px;}
.dots li{padding-left:1.1em;text-indent:-1.1em;margin-bottom:6px;}
.dots li::before{content:"・";}

.points{display:grid;gap:10px;margin:10px 0 14px;}
@media (min-width:640px){.points{grid-template-columns:1fr 1fr;}}
.point{background:#fbf6f2;border-radius:8px;padding:12px 14px;}
.point h4{margin:0 0 4px;color:var(--accent);}
.point p{font-size:.9rem;margin:0;}

.teacher{text-align:center;}
.teacher p{text-align:left;}
@media (min-width:640px){.teacher p{text-align:center;}}

.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.ig-grid .ph{aspect-ratio:1;margin:0;}
.ig-grid .ph-label{font-size:.68rem;}

/* ボタン */
.btn-line,.btn-ig,.btn-more{display:inline-block;color:#fff;text-decoration:none;font-weight:700;border-radius:999px;padding:7px 18px;font-size:.88rem;}
.btn-line{background:var(--line-green);}
.btn-ig{background:linear-gradient(45deg,#f09433,#dc2743 50%,#bc1888);}
.btn-more{background:var(--accent);}
.big{padding:12px 30px;font-size:1rem;}

/* お知らせ一覧 */
.news-list{list-style:none;}
.news-list li{border-bottom:1px dashed var(--line);}
.news-list a{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;padding:10px 2px;color:var(--ink);text-decoration:none;}
.news-list time{color:var(--ink-soft);font-size:.82rem;}
.tag{font-size:.7rem;border-radius:999px;padding:0 9px;line-height:1.8;color:#fff;}
.tag-s{background:#9bb59a;}
.tag-n{background:var(--accent);}

/* 記事 */
.page-title h1{font-size:1.3rem;color:var(--accent);text-align:center;margin-bottom:8px;}
.filters{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:6px;}
.filters button{border:1px solid var(--line);background:#fff;color:var(--ink-soft);border-radius:999px;padding:5px 14px;font:inherit;font-size:.85rem;cursor:pointer;}
.filters button.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.post h2{text-align:left;}
.post-meta{display:flex;gap:8px;align-items:center;color:var(--ink-soft);font-size:.82rem;}
.post .ph{max-width:520px;margin-left:auto;margin-right:auto;}
.post p a{word-break:break-all;}

/* 教室 */
.classroom{border-top:1px dashed var(--line);padding-top:6px;margin-top:14px;}
.classroom:first-of-type{border-top:none;}
.classroom h3{color:var(--accent);}
.classroom h3 small{font-size:.75rem;color:var(--ink-soft);font-weight:400;}
.classroom dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:.92rem;margin:8px 0;}
.classroom dt{color:var(--ink-soft);font-weight:700;}
.map{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#eee;margin-top:8px;}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.map-link{font-size:.85rem;text-align:right;margin-top:4px;}
.terms h3{font-size:.95rem;color:var(--accent);border-left:4px solid var(--accent-soft);padding-left:8px;}
.terms p{font-size:.9rem;}

/* フッター */
.site-foot{background:var(--bg-deep);color:#fff;text-align:center;padding:26px 16px 30px;font-size:.85rem;line-height:1.9;}
.site-foot a{color:#fff;}
.foot-name{font-weight:700;font-size:.95rem;}
.foot-links{display:flex;gap:8px;justify-content:center;margin:8px 0;}
.foot-links a{text-decoration:none;}
.copy{opacity:.8;font-size:.75rem;margin-top:8px;}

/* ── スケジュールのカレンダー ── */
.cal{margin:12px 0;}
.cal-title{text-align:center;font-weight:700;color:var(--accent);margin-bottom:6px;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);}
.cal-dow,.cal-cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
.cal-dow{text-align:center;font-size:.75rem;font-weight:700;background:#fbf6f2;padding:2px 0;}
.cal-dow.sun,.cal-cell.sun .cal-d{color:#d0605a;}
.cal-dow.sat,.cal-cell.sat .cal-d{color:#5a86c0;}
.cal-cell{min-height:58px;padding:2px 3px;font-size:.66rem;line-height:1.35;overflow:hidden;word-break:break-all;}
.cal-cell.blank{background:#fcfaf8;}
.cal-cell.has{background:#fff6ee;}
.cal-cell.off{background:#f3eeee;}
.cal-d{display:block;font-weight:700;font-size:.78rem;}
.cal-t{display:block;color:var(--ink);}
.cal-off{display:inline-block;background:#c9766e;color:#fff;border-radius:4px;padding:0 4px;font-size:.62rem;margin-right:3px;}
@media (min-width:640px){.cal-cell{min-height:76px;font-size:.74rem;}}
.cal-list{list-style:none;margin:10px 0 14px;font-size:.88rem;}
.cal-list li{padding:5px 0;border-bottom:1px dashed var(--line);}
.cal-list li b{display:inline-block;min-width:5.6em;color:var(--accent);}
.cal-list li.off{color:var(--ink-soft);}
.cal-edit .cal-cell[data-day]{cursor:pointer;}
.cal-edit .cal-cell[data-day]:hover{outline:2px solid var(--accent);outline-offset:-2px;}

/* ── 入力画面 ── */
.form{display:flex;flex-direction:column;gap:12px;}
.form label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:700;color:var(--ink-soft);}
.form input,.form textarea,.form select,.day-box textarea,.bulk select,.bulk input{font:inherit;font-size:16px;color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:9px 10px;background:#fff;width:100%;}
.btn-main,.btn-sub,.btn-danger{font:inherit;font-weight:700;border-radius:999px;padding:10px 20px;cursor:pointer;border:none;}
.btn-main{background:var(--accent);color:#fff;}
.btn-main:disabled{opacity:.6;}
.btn-sub{background:#fff;color:var(--accent);border:1px solid var(--accent);}
.btn-danger{background:none;color:#b0413e;text-decoration:underline;font-weight:400;font-size:.85rem;align-self:center;}
.new-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.edit-btns{display:flex;gap:10px;justify-content:flex-end;}
.msg{color:#b0413e;font-size:.85rem;min-height:1.2em;}
.note{font-size:.8rem;color:var(--ink-soft);}
.admin-list{list-style:none;}
.admin-list li{border-bottom:1px dashed var(--line);}
.admin-list button{width:100%;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;padding:10px 2px;background:none;border:none;
  font:inherit;color:var(--ink);text-align:left;cursor:pointer;}
.admin-list time{color:var(--ink-soft);font-size:.82rem;}
.admin-list .edit-mark{margin-left:auto;color:var(--accent);font-size:.8rem;}
.admin-list .empty{padding:10px 0;color:var(--ink-soft);}
.bulk{background:#fbf6f2;border-radius:8px;padding:10px;}
.bulk-title{font-size:.82rem;font-weight:700;color:var(--ink-soft);margin-bottom:6px;}
.bulk-row{display:grid;grid-template-columns:auto 1fr auto;gap:6px;}
.bulk-row select{width:auto;}
@media (max-width:420px){.bulk-row{grid-template-columns:1fr auto;}.bulk-row select{grid-column:1/3;width:100%;}}
.overlay{display:none;position:fixed;inset:0;background:rgba(80,60,55,.45);z-index:50;align-items:center;justify-content:center;padding:16px;}
.overlay.open{display:flex;}
.day-box{background:#fff;border-radius:12px;padding:18px;width:100%;max-width:400px;display:flex;flex-direction:column;gap:10px;}
.day-box h3{color:var(--accent);}
.chk{display:flex;align-items:center;gap:8px;font-size:.9rem;}
.chk input{width:18px;height:18px;accent-color:var(--accent);}