/* ============================================
   Vayu マガジン型トップページ CSS（北欧風）
   設置場所: /wp-content/themes/swell_child/assets/css/vayu-front.css
   すべて .vayu-front 配下にスコープ済み（SWELL本体と干渉しません）
   ============================================ */

.vayu-front{
  --vf-snow:#FBFAF7;
  --vf-linen:#F1EEE7;
  --vf-ink:#3E4340;
  --vf-sage:#9CAF97;
  --vf-sage-deep:#6E8468;
  --vf-rose:#D4A5A5;
  --vf-rose-deep:#B98A8A;
  --vf-rose-bg:#F5ECEC;
  --vf-fog:#A7A69C;
  --vf-latin:'Josefin Sans', sans-serif;
  --vf-sans:'Zen Kaku Gothic New', sans-serif;
  --vf-r:18px;
  background:var(--vf-snow);
  color:var(--vf-ink);
  font-family:var(--vf-sans);
  font-size:15px;
  line-height:1.95;
  letter-spacing:.04em;
}
.vayu-front *{box-sizing:border-box}
.vayu-front a{color:inherit;text-decoration:none}
.vayu-front img{display:block;max-width:100%}
.vayu-front .vf-wrap{max-width:1060px;margin:0 auto;padding:0 24px}
.vayu-front h2,.vayu-front h3,.vayu-front h4{margin:0;border:none;padding:0;background:none}
.vayu-front ul{margin:0;padding:0}

/* ── 今日の風 ── */
.vf-hero{padding:64px 0 56px;text-align:center}
.vf-hero-label{font-family:var(--vf-latin);font-size:12px;letter-spacing:.4em;color:var(--vf-sage-deep)}
.vf-hero-label b{font-family:var(--vf-sans);font-weight:500;font-size:10.5px;letter-spacing:.3em;color:var(--vf-fog);margin-left:12px}
.vf-hero-date{font-family:var(--vf-latin);font-size:12px;letter-spacing:.24em;color:var(--vf-fog);margin-top:24px}
.vf-hero-text{max-width:600px;margin:18px auto 0;font-size:17px;line-height:2.3}
.vf-hero-sign{font-size:11px;letter-spacing:.2em;color:var(--vf-rose-deep);margin-top:20px}
.vf-hero-circles{display:flex;justify-content:center;gap:18px;margin-top:38px}
.vf-hero-circles .vf-c{width:74px;height:74px;border-radius:50%;overflow:hidden;background:var(--vf-linen);display:block}
.vf-hero-circles img{width:100%;height:100%;object-fit:cover}

/* ── 特集 ── */
.vf-feature{padding-bottom:80px}
.vf-feature-card{display:grid;grid-template-columns:1.25fr 1fr;background:var(--vf-linen);border-radius:var(--vf-r);overflow:hidden}
.vf-feature-img{min-height:360px;background:linear-gradient(150deg,#CBD6C4,#8FA689)}
.vf-feature-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(1.02)}
.vf-feature-body{padding:46px 44px;display:flex;flex-direction:column;justify-content:center}
.vf-eyebrow{font-family:var(--vf-latin);font-size:12px;letter-spacing:.34em;color:var(--vf-sage-deep)}
.vf-feature-body h2{font-size:22px;font-weight:700;line-height:1.8;letter-spacing:.05em;margin-top:16px}
.vf-feature-body p{font-size:13.5px;color:rgba(62,67,64,.8);margin-top:16px}
.vf-feature-meta{font-family:var(--vf-latin);font-size:11px;letter-spacing:.22em;color:var(--vf-fog);margin-top:18px}
.vf-btn{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-size:13px;letter-spacing:.12em;font-weight:500;color:var(--vf-sage-deep)}
.vf-btn::after{content:"";width:34px;height:1.5px;background:var(--vf-sage-deep);transition:width .3s}
.vf-btn:hover::after{width:52px}

/* ── 共通セクション ── */
.vf-section{padding:72px 0}
.vf-new{padding-top:0}
.vf-sec-head{text-align:center;margin-bottom:44px}
.vf-sec-title{font-family:var(--vf-latin);font-weight:400;font-size:24px;letter-spacing:.24em}
.vf-sec-sub{font-size:11px;letter-spacing:.3em;color:var(--vf-fog);margin-top:10px}

/* ── 新着 ── */
.vf-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 28px}
.vf-thumb{aspect-ratio:4/3;border-radius:var(--vf-r);overflow:hidden;margin-bottom:16px;background:linear-gradient(150deg,#D3DCCC,#93A88D)}
.vf-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s;filter:saturate(.9)}
.vf-card:hover .vf-thumb img{transform:scale(1.05)}
.vf-cat-tag{display:inline-block;font-family:var(--vf-latin);font-size:10.5px;letter-spacing:.24em;color:var(--vf-rose-deep);background:var(--vf-rose-bg);border-radius:99px;padding:5px 14px 3px}
.vf-card h3{font-size:15.5px;font-weight:700;line-height:1.85;margin-top:12px}
.vf-card time{display:block;font-family:var(--vf-latin);font-size:11px;letter-spacing:.2em;color:var(--vf-fog);margin-top:8px}

/* ── 棚：連載 ── */
.vf-shelf{background:var(--vf-linen)}
.vf-shelf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.vf-spine{background:var(--vf-snow);border-radius:var(--vf-r);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s, box-shadow .3s}
.vf-spine:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(62,67,64,.08)}
.vf-photo{aspect-ratio:16/10;background:linear-gradient(150deg,#E7DCC8,#C7AE8B)}
.vf-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.vf-spine-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.vf-spine h3{font-family:var(--vf-latin);font-weight:500;font-size:15px;letter-spacing:.16em}
.vf-spine h4{font-size:13.5px;font-weight:700;line-height:1.8;margin-top:4px}
.vf-spine p{font-size:12px;line-height:1.9;color:rgba(62,67,64,.75);margin-top:10px;flex:1}
.vf-cnt{font-family:var(--vf-latin);font-size:10.5px;letter-spacing:.2em;color:var(--vf-rose-deep);margin-top:14px}

/* ── カテゴリー ── */
.vf-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.vf-cat-block{border:1px solid #E4E0D5;border-radius:var(--vf-r);overflow:hidden;transition:border-color .3s;background:#fff}
.vf-cat-block:hover{border-color:var(--vf-sage)}
.vf-cat-photo{aspect-ratio:16/6;overflow:hidden;background:linear-gradient(150deg,#DDE3E4,#9FB4BA)}
.vf-cat-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.vf-cat-body{padding:26px 30px 30px}
.vf-cat-name{display:flex;align-items:baseline;gap:12px}
.vf-cat-name b{font-family:var(--vf-latin);font-weight:400;font-size:22px;letter-spacing:.16em}
.vf-cat-name small{font-size:11px;letter-spacing:.26em;color:var(--vf-sage-deep)}
.vf-cat-list{margin-top:14px;list-style:none}
.vf-cat-list li{border-bottom:1px solid #ECE9E0;list-style:none}
.vf-cat-list li:last-child{border-bottom:none}
.vf-cat-list a{display:block;font-size:13.5px;padding:11px 2px;transition:.3s}
.vf-cat-list a:hover{color:var(--vf-sage-deep);padding-left:8px}
.vf-cat-all{display:inline-block;margin-top:12px;font-family:var(--vf-latin);font-size:11px;letter-spacing:.22em;color:var(--vf-fog)}
.vf-cat-all:hover{color:var(--vf-sage-deep)}

/* ── Salon ── */
.vf-salon{padding:0 24px 80px}
.vf-salon-card{position:relative;max-width:1060px;margin:0 auto;border-radius:calc(var(--vf-r) + 8px);color:var(--vf-snow);text-align:center;padding:84px 28px;overflow:hidden;background:linear-gradient(130deg,#8FA689,#6E8468)}
.vf-salon-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.7)}
.vf-salon-card::after{content:"";position:absolute;inset:0;background:linear-gradient(130deg,rgba(90,110,86,.82),rgba(62,80,60,.78))}
.vf-salon-inner{position:relative;z-index:2}
.vf-salon-card .vf-eyebrow{color:#E4EBDF}
.vf-salon-card h2{font-size:21px;font-weight:700;letter-spacing:.1em;margin-top:16px}
.vf-salon-card p{max-width:520px;margin:14px auto 0;font-size:13px;color:rgba(251,250,247,.9)}
.vf-salon-card .vf-btn{color:var(--vf-snow);justify-content:center}
.vf-salon-card .vf-btn::after{background:var(--vf-snow)}

/* ── responsive ── */
@media(max-width:900px){
  .vf-shelf-grid{grid-template-columns:repeat(2,1fr)}
  .vf-feature-card{grid-template-columns:1fr}
  .vf-feature-img{min-height:240px}
  .vf-feature-body{padding:34px 28px}
}
@media(max-width:640px){
  .vf-grid3{grid-template-columns:1fr}
  .vf-cats{grid-template-columns:1fr}
  .vf-hero{padding:52px 0 44px}
  .vf-hero-text{font-size:15.5px}
  .vf-hero-circles .vf-c{width:60px;height:60px}
}
@media(max-width:460px){
  .vf-shelf-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .vayu-front *{transition:none!important}
}

/* ── 編集室のとなり（note 最新） ── */
.vf-note{padding-bottom:88px}
.vf-note-list{list-style:none;max-width:640px;margin:0 auto}
.vf-note-list li{border-bottom:1px solid #E5E1D6}
.vf-note-list a{display:flex;gap:18px;align-items:baseline;padding:16px 4px;transition:color .25s}
.vf-note-list a:hover{color:var(--vf-rose-deep)}
.vf-note-list time{font-family:var(--vf-latin);font-size:11px;letter-spacing:.14em;color:var(--vf-fog);white-space:nowrap}
.vf-note-list span{font-size:14px;letter-spacing:.05em}
.vf-note-more{display:block;width:fit-content;margin:26px auto 0;font-family:var(--vf-latin);font-size:12px;letter-spacing:.22em;color:var(--vf-sage-deep)}
.vf-note-more:hover{color:var(--vf-ink)}
@media(max-width:640px){
  .vf-note-list a{flex-direction:column;gap:4px;padding:14px 4px}
}

/* ── トップページではサイドバーを表示しない ──
   このCSSはトップページのみ読み込まれるため他ページには影響しません */
#sidebar.l-sidebar{display:none}
#content.l-content #main_content,
#content.l-content>main{width:100%;max-width:none;flex:1 1 100%}
