/*
Theme Name: リズムメロディ保育園
Theme URI: https://www.r-melody.ed.jp
Author: 有限会社プロデュースマツモト
Description: リズムメロディ保育園のオリジナルテーマ。ピンクベース・写真メインのデザイン。
Version: 1.1.4
Requires at least: 4.7
Requires PHP: 5.6
Text Domain: rhythm-melody
*/
:root{
  --usubeni:#FCF3F4;
  --sakura:#F5DCE0;
  --momo:#E9B4BF;
  --kobai:#B84C66;
  --sumi:#2E2528;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--usubeni);color:var(--sumi);font-family:var(--gothic);font-size:15px;line-height:2;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--kobai);outline-offset:3px}
h1,h2,h3{font-family:var(--mincho);font-weight:500;letter-spacing:.08em;line-height:1.5}
.link{display:inline-block;font-family:var(--mincho);font-size:14px;letter-spacing:.12em;text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px;padding:6px 0}
.link:hover{color:var(--kobai)}

/* 写真枠 */
.ph{position:relative;background:var(--sakura);overflow:hidden}
.ph::after{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;font-family:var(--mincho);font-size:13px;color:var(--kobai);letter-spacing:.1em}
.ph img{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;max-width:none;object-fit:cover}

/* ヘッダー */
.top{background:#fff;text-align:center;border-bottom:1px solid var(--sakura);position:sticky;top:0;z-index:20}
.admin-bar .top{top:32px}
.top-in{position:relative;padding:14px 56px 12px}
.motto{font-family:var(--mincho);font-size:11px;letter-spacing:.3em;color:var(--kobai);line-height:1.4}
.name{font-family:var(--mincho);font-size:clamp(16px,5.2vw,22px);font-weight:500;letter-spacing:.1em;text-decoration:none;display:block;line-height:1.5}
.menu-btn{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:0;font-family:var(--mincho);font-size:12px;letter-spacing:.1em;color:var(--sumi);padding:10px 6px;cursor:pointer}
.nav{display:none;border-top:1px solid var(--sakura)}
.nav.open{display:block}
.nav ul{list-style:none}
.nav a{display:block;padding:13px;font-family:var(--mincho);font-size:14px;letter-spacing:.14em;text-decoration:none;border-bottom:1px solid var(--usubeni)}
.nav a:hover{color:var(--kobai)}
.nav .sub-menu a{font-size:13px;padding:10px 13px;background:var(--usubeni);border-bottom:1px solid #fff}

/* メイン写真 */
.hero{background:var(--momo);height:82vh;min-height:460px;max-height:860px}
.hero::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(46,37,40,.55),rgba(46,37,40,0) 55%)}
.hero-txt{position:absolute;left:0;right:0;bottom:0;z-index:3;text-align:center;color:#fff;padding:0 20px 44px}
.hero-txt p{font-family:var(--mincho);font-size:13px;letter-spacing:.14em}
.hero-txt p span,.hero-txt h1 span{display:inline-block}
.hero-txt h1{font-size:clamp(22px,7vw,60px);letter-spacing:.12em;margin:4px 0 14px}
.hero-txt .link{margin:0 7px;color:#fff;letter-spacing:.08em}

.lead{max-width:34em;margin:0 auto;padding:64px 24px;text-align:center}
.lead h2{font-size:22px;margin-bottom:20px}
.lead p{text-align:left}

/* 2枚の大きな写真 */
.pair{display:grid;gap:48px 4px}
.tile .ph{aspect-ratio:4/5}
.tile-txt{text-align:center;padding:22px 24px 0;max-width:30em;margin:0 auto}
.tile-txt h3{font-size:20px;margin-bottom:8px}
.tile-txt p{text-align:left;font-size:14px}
.tile-txt .link{margin-top:10px}

/* 四季の行事 */
.seasons{padding:80px 0 0}
.seasons-head{text-align:center;padding:0 24px 28px}
.seasons-head h2{font-size:24px}
.seasons-head p{font-size:14px}
.strip{display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 8px}
.season{flex:0 0 72%;scroll-snap-align:center}
.season .ph{aspect-ratio:3/4}
.season h3{font-size:26px;text-align:center;margin-top:16px}
.season ul{list-style:none;text-align:center;font-size:13px;line-height:1.9;padding:4px 12px 0}
.seasons-foot{text-align:center;padding:24px}

/* お知らせ */
.news{max-width:40em;margin:0 auto;padding:72px 24px}
.news h2{font-size:22px;text-align:center;margin-bottom:20px}
.news-item{display:block;padding:18px 4px;border-top:1px solid var(--momo);text-decoration:none;font-family:var(--mincho);font-size:16px;letter-spacing:.06em}
.news-item:last-of-type{border-bottom:1px solid var(--momo)}
.news-item span{display:block;font-family:var(--gothic);font-size:13px;color:#6b5c60;letter-spacing:0}
.news-item:hover{color:var(--kobai)}
.news-empty{text-align:center;font-size:14px}
.news-more{text-align:center;margin-top:20px}

/* アクセス */
.access{background:var(--sakura);display:grid}
.access .ph{aspect-ratio:1/1;background:#fff}
.access .ph img{object-fit:contain}
.access-txt{padding:48px 24px;align-self:center}
.access-txt h2{font-size:24px;margin-bottom:14px}
.access-txt ul{list-style:none;margin-bottom:16px}
.access-txt li{padding:8px 0;border-bottom:1px solid var(--momo);font-size:14px}

.corp{max-width:34em;margin:0 auto;padding:72px 24px;text-align:center}
.corp h2{font-size:22px;margin-bottom:16px}
.corp p{text-align:left;font-size:14px;margin-bottom:14px}

/* 下層ページ・お知らせ記事 */
.page-head{background:var(--sakura);text-align:center;padding:56px 24px}
.page-head h1{font-size:26px;letter-spacing:.14em}
.page-head time{display:block;font-family:var(--mincho);font-size:13px;letter-spacing:.1em;margin-top:6px}
.page-photo{aspect-ratio:16/9;max-height:70vh;width:100%}
.entry{max-width:40em;margin:0 auto;padding:56px 24px 80px}
.entry > * + *{margin-top:1.4em}
.entry h2{font-size:22px;margin-top:2.4em;padding-bottom:8px;border-bottom:1px solid var(--momo)}
.entry h3{font-size:18px;margin-top:2em}
.entry ul,.entry ol{padding-left:1.4em}
.entry a{color:var(--kobai);text-underline-offset:4px}
.entry img{display:block;width:100%}
.entry figure{margin-left:0;margin-right:0}
.entry figcaption{font-size:13px;text-align:center;color:#6b5c60}
.entry table{width:100%;border-collapse:collapse;font-size:14px}
.entry th,.entry td{border-bottom:1px solid var(--momo);padding:12px 8px;text-align:left;vertical-align:top}
.entry th{font-family:var(--mincho);font-weight:500;white-space:nowrap}
.entry .photos{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.entry .photos img{aspect-ratio:1/1;height:auto;object-fit:cover;background:var(--sakura)}
.entry figure img{background:var(--sakura)}
.alignwide,.alignfull{max-width:none}
.back{text-align:center;padding:0 24px 72px}
.pager{text-align:center;padding:24px;font-family:var(--mincho);font-size:14px}
.pager a,.pager span{margin:0 6px}

footer.site-foot{background:#fff;border-top:1px solid var(--sakura);text-align:center;padding:48px 24px 32px;font-size:13px}
.site-foot .name{font-size:19px;margin:2px 0 14px}
.site-foot .sns{margin:16px 0}
.site-foot .sns a{margin:0 10px}
.site-foot small{display:block;margin-top:24px;color:#8a7a7e;font-size:11px}

@media (max-width:782px){.admin-bar .top{top:46px}}
@media (min-width:800px){
  body{font-size:16px}
  .menu-btn{display:none}
  .top-in{padding:18px 24px 10px}
  .name{font-size:27px;letter-spacing:.18em}
  .hero-txt p{letter-spacing:.2em}
  .hero-txt .link{margin:0 12px;letter-spacing:.12em}
  .nav{display:block;border-top:0;padding-bottom:12px}
  .nav ul{display:flex;justify-content:center;gap:34px}
  .nav a{border:0;padding:4px 0}
  .nav li{position:relative}
  .nav .sub-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);z-index:30;background:#fff;border:1px solid var(--sakura);padding:6px 20px;white-space:nowrap}
  .nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu{display:block}
  .nav .sub-menu a{background:none;border:0;padding:8px 0}
  .pair{grid-template-columns:1fr 1fr;gap:4px}
  .tile-txt{padding-bottom:16px}
  .strip{overflow:visible;padding:0}
  .season{flex:1 1 0}
  .access{grid-template-columns:1fr 1fr}
  .access-txt{padding:64px 9%}
  .lead{padding:96px 24px}
  .entry .photos{grid-template-columns:repeat(3,1fr)}
  .page-head{padding:80px 24px}
  .page-head h1{font-size:32px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}