/*
Theme Name: SHAON 社温
Theme URI: https://example.com/
Author: 株式会社TAYORI
Description: 会社の体温をはかるインタビューメディア「社温 / SHAON」専用テーマ。
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: shaon
*/

:root{
  --paper:#FBFAF7;
  --ink:#1F1D1A;
  --mercury:#C73E3A;
  --sub:#6E6A63;
  --line:#E5E1DA;
  --tint:#F6ECE8;
  --serif:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  --mono:"IBM Plex Mono",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--gothic);font-size:15px;line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--mercury);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* ── 目盛り(gauge) ── */
.gauge{position:relative;height:34px;overflow:hidden}
.gauge .ticks{
  position:absolute;inset:0;
  background-image:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 14px),
                   repeating-linear-gradient(to right,var(--sub) 0 1px,transparent 1px 70px);
  background-size:100% 10px,100% 18px;
  background-position:bottom left,bottom left;
  background-repeat:repeat-x;
}
.gauge .mercury{
  position:absolute;bottom:0;left:0;height:3px;width:0;
  background:var(--mercury);
  transition:width 2.4s cubic-bezier(.22,.9,.3,1);
}
.gauge.filled .mercury{width:73%}
@media (prefers-reduced-motion:reduce){.gauge .mercury{transition:none}}
.gauge .mark{
  position:absolute;bottom:8px;left:73%;transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;color:var(--mercury);letter-spacing:.05em;
}

/* ── header ── */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,250,247,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:baseline;gap:10px}
.logo .kanji{font-family:var(--serif);font-weight:800;font-size:26px;letter-spacing:.12em}
.logo .roman{font-family:var(--mono);font-size:10px;letter-spacing:.28em;color:var(--sub)}
.site-header nav ul{display:flex;align-items:center;gap:28px;list-style:none}
.site-header nav a{font-size:13px;letter-spacing:.08em}
.site-header nav a:hover{color:var(--mercury)}
.cta{
  background:var(--ink);color:var(--paper);
  padding:9px 18px;border-radius:2px;font-size:13px;letter-spacing:.08em;
  transition:background .2s;
}
.cta:hover{background:var(--mercury);color:var(--paper)}
@media (max-width:720px){.site-header nav ul li:not(.nav-cta){display:none}}

/* ── hero ── */
.hero{padding:72px 0 0;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start;padding-bottom:56px}
.hero-copy .eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--mercury);margin-bottom:22px;
}
h1.tate{
  writing-mode:vertical-rl;
  font-family:var(--serif);font-weight:700;
  font-size:clamp(34px,5.2vw,56px);letter-spacing:.22em;line-height:1.7;
  height:clamp(300px,44vw,430px);
}
.hero-copy{display:flex;gap:clamp(24px,5vw,64px)}
.hero-lead{max-width:340px;align-self:flex-end;padding-bottom:8px}
.hero-lead p{font-size:14px;color:var(--sub)}
.hero-lead p+p{margin-top:14px}
.hero-temp{align-self:end;text-align:right;padding-bottom:8px}
.hero-temp .num{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(44px,6vw,72px);line-height:1;letter-spacing:-.02em;
}
.hero-temp .num small{font-size:.4em;letter-spacing:0}
.hero-temp .label{font-size:12px;color:var(--sub);letter-spacing:.16em;margin-top:8px}
@media (max-width:720px){
  .hero{padding-top:48px}
  .hero-grid{grid-template-columns:1fr;gap:8px}
  .hero-copy{flex-direction:column;gap:28px}
  h1.tate{writing-mode:horizontal-tb;height:auto;line-height:1.5}
  .hero-temp{text-align:left}
}

/* ── section common ── */
.sec{padding:88px 0}
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:44px}
.sec-head h2{font-family:var(--serif);font-weight:700;font-size:26px;letter-spacing:.14em}
.sec-head .en{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--sub)}

/* ── articles ── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
@media (max-width:860px){.cards{grid-template-columns:1fr}}
.card{border-top:1px solid var(--ink);padding-top:20px;display:flex;flex-direction:column;gap:14px}
.card .photo,.card .photo img{
  aspect-ratio:4/3;object-fit:cover;width:100%;
}
.card .photo{
  background:linear-gradient(160deg,#EFECE6,#E2DDD4);
  display:flex;align-items:center;justify-content:center;
  color:var(--sub);font-size:11px;letter-spacing:.2em;overflow:hidden;
}
.card .meta{display:flex;align-items:center;justify-content:space-between}
.card .tag{
  font-size:11px;letter-spacing:.14em;padding:3px 10px;
  background:var(--tint);color:var(--mercury);border-radius:2px;
}
.card .temp{font-family:var(--mono);font-size:20px}
.card .temp small{font-size:11px;color:var(--sub);margin-left:2px}
.card h3{font-family:var(--serif);font-weight:700;font-size:18px;line-height:1.7;letter-spacing:.04em}
.card h3 a:hover{color:var(--mercury)}
.card .company{font-size:12px;color:var(--sub);letter-spacing:.06em}
.card .minigauge{height:3px;background:var(--line);position:relative;margin-top:auto}
.card .minigauge i{position:absolute;left:0;top:0;bottom:0;background:var(--mercury)}
.more-link{margin-top:40px;text-align:center}
.more-link a{
  display:inline-block;border:1px solid var(--ink);padding:12px 44px;
  font-size:13px;letter-spacing:.16em;transition:all .2s;
}
.more-link a:hover{background:var(--ink);color:var(--paper)}

/* ── 名物質問 band ── */
.band{background:var(--ink);color:var(--paper);text-align:center;padding:96px 24px}
.band .q-label{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:#B8B3AA;margin-bottom:26px}
.band blockquote{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(24px,4vw,40px);letter-spacing:.12em;line-height:1.8;border:0;
}
.band blockquote em{font-style:normal;color:#E8A19D;border-bottom:1px solid var(--mercury);padding-bottom:4px}
.band .band-note{margin-top:26px;font-size:13px;color:#B8B3AA;letter-spacing:.06em}

/* ── about ── */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}
@media (max-width:860px){.about-grid{grid-template-columns:1fr;gap:36px}}
.about p+p{margin-top:18px}
.about .lead{font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:.06em;line-height:2;margin-bottom:22px}
.profile{border:1px solid var(--line);padding:32px;background:#fff}
.profile .role{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--mercury);margin-bottom:12px}
.profile .name{font-family:var(--serif);font-size:20px;font-weight:700;letter-spacing:.1em}
.profile p{font-size:13px;color:var(--sub);margin-top:14px}

/* ── sponsors ── */
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:720px){.logos{grid-template-columns:repeat(2,1fr)}}
.logos div{
  background:var(--paper);aspect-ratio:5/2;
  display:flex;align-items:center;justify-content:center;
  color:var(--sub);font-size:11px;letter-spacing:.2em;
}
.logos div img{max-height:60%;width:auto}

/* ── request ── */
.request{background:var(--tint)}
.req-points{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:44px 0 48px}
@media (max-width:720px){.req-points{grid-template-columns:1fr}}
.req-points .pt{border-top:1px solid var(--mercury);padding-top:18px}
.req-points .pt .k{font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:.1em;margin-bottom:8px}
.req-points .pt p{font-size:13px;color:var(--sub)}
.req-cta{text-align:center}
.req-cta a{
  display:inline-block;background:var(--mercury);color:#fff;
  padding:16px 52px;border-radius:2px;font-size:14px;letter-spacing:.16em;
  transition:opacity .2s;
}
.req-cta a:hover{opacity:.85}

/* ── single(記事ページ) ── */
.single-head{padding:72px 0 0;border-bottom:1px solid var(--line)}
.single-head .meta-row{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.single-head .tag{
  font-size:12px;letter-spacing:.14em;padding:4px 12px;
  background:var(--tint);color:var(--mercury);border-radius:2px;
}
.single-head .date{font-family:var(--mono);font-size:12px;color:var(--sub)}
.single-head h1{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(24px,3.6vw,36px);letter-spacing:.06em;line-height:1.9;
}
.single-head .company{margin-top:16px;font-size:13px;color:var(--sub)}
.single-temp{display:flex;align-items:flex-end;justify-content:space-between;margin:40px 0 0;padding-bottom:32px}
.single-temp .num{font-family:var(--mono);font-size:clamp(40px,5vw,60px);line-height:1}
.single-temp .num small{font-size:.4em;color:var(--sub)}
.single-temp .cap{font-size:12px;color:var(--sub);letter-spacing:.14em}
.single-body{max-width:720px;margin:0 auto;padding:64px 24px 88px}
.single-body p{margin-bottom:1.8em}
.single-body h2{
  font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:.08em;
  margin:2.4em 0 1em;padding-left:16px;border-left:3px solid var(--mercury);
}
.single-body h3{font-family:var(--serif);font-weight:700;font-size:18px;margin:2em 0 .8em}
.single-body blockquote{
  border-left:2px solid var(--line);padding:4px 0 4px 20px;color:var(--sub);
  font-family:var(--serif);margin-bottom:1.8em;
}
.single-body img{margin:2em 0}
.single-body a{color:var(--mercury);text-decoration:underline;text-underline-offset:3px}
.shoken{
  background:var(--tint);border-radius:2px;padding:28px 32px;margin:3em 0 0;
}
.shoken .shoken-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.26em;color:var(--mercury);margin-bottom:12px;
}
.back-link{text-align:center;padding:0 0 88px}
.back-link a{font-size:13px;letter-spacing:.14em;border-bottom:1px solid var(--ink);padding-bottom:3px}
.back-link a:hover{color:var(--mercury);border-color:var(--mercury)}

/* ── archive ── */
.archive-head{padding:64px 0 0}
.archive-head h1{font-family:var(--serif);font-weight:700;font-size:28px;letter-spacing:.12em}
.pagination{margin-top:48px;text-align:center;font-family:var(--mono);font-size:13px}
.pagination .page-numbers{padding:6px 12px;margin:0 2px;border:1px solid var(--line)}
.pagination .current{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ── footer ── */
.site-footer{border-top:1px solid var(--line);padding:48px 0 40px}
.foot{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px}
.foot .flogo{font-family:var(--serif);font-weight:800;font-size:20px;letter-spacing:.12em}
.foot .flogo span{font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--sub);margin-left:10px}
.foot p{font-size:12px;color:var(--sub)}

/* ═══ v1.1 追加分 ═══ */

/* ── カードのホバーモーション ── */
.card .photo{overflow:hidden}
.card .photo img{transition:transform .5s cubic-bezier(.22,.9,.3,1)}
.card:hover .photo img{transform:scale(1.05)}
.card h3 a{transition:color .2s}
.card .minigauge i{transition:width .8s cubic-bezier(.22,.9,.3,1)}

/* ── スクロール出現 ── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.card .photo img{transition:none}}

/* ── Pick up(先頭固定記事)── */
.pickup{border:1px solid var(--ink);display:grid;grid-template-columns:1.15fr 1fr;margin-bottom:56px;background:#fff}
@media (max-width:860px){.pickup{grid-template-columns:1fr}}
.pickup .photo{aspect-ratio:16/10;overflow:hidden;background:linear-gradient(160deg,#EFECE6,#E2DDD4);display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:11px;letter-spacing:.2em}
.pickup .photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.9,.3,1)}
.pickup:hover .photo img{transform:scale(1.04)}
.pickup .body{padding:36px 40px;display:flex;flex-direction:column;gap:14px}
.pickup .pk-label{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--mercury)}
.pickup .meta{display:flex;align-items:center;justify-content:space-between}
.pickup .temp{font-family:var(--mono);font-size:30px}
.pickup .temp small{font-size:13px;color:var(--sub)}
.pickup h3{font-family:var(--serif);font-weight:700;font-size:24px;line-height:1.8;letter-spacing:.04em}
.pickup h3 a:hover{color:var(--mercury)}
.pickup .company{font-size:12px;color:var(--sub)}

/* ── タグから探す ── */
.tags-cloud{display:flex;flex-wrap:wrap;gap:10px}
.tags-cloud a{
  font-size:13px;letter-spacing:.06em;padding:7px 16px;border:1px solid var(--line);
  border-radius:999px;background:#fff;transition:all .2s;
}
.tags-cloud a:hover{border-color:var(--mercury);color:var(--mercury)}
.card .card-tags{display:flex;flex-wrap:wrap;gap:6px}
.card .card-tags span{font-size:10px;letter-spacing:.08em;color:var(--sub);border:1px solid var(--line);border-radius:999px;padding:1px 9px}

/* ── おすすめ・広告枠 ── */
.fw-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
@media (max-width:720px){.fw-grid{grid-template-columns:1fr}}
.fw-item{border:1px solid var(--line);background:#fff;padding:26px}
.fw-item img{width:100%;height:auto}
.fw-title{font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:.08em;margin-bottom:10px}
.ad-note{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--sub);margin-bottom:14px}
.under-post{max-width:720px;margin:0 auto;padding:0 24px 72px}
.under-post .fw-item{margin-top:12px}

/* ── 記事内画像ライトボックス ── */
.single-body img{cursor:zoom-in;transition:opacity .2s}
.single-body img:hover{opacity:.92}
.shaon-lb{
  position:fixed;inset:0;z-index:200;background:rgba(31,29,26,.94);
  display:flex;align-items:center;justify-content:center;cursor:zoom-out;
  opacity:0;transition:opacity .25s ease;
}
.shaon-lb.on{opacity:1}
.shaon-lb img{
  max-width:92vw;max-height:88vh;box-shadow:0 24px 80px rgba(0,0,0,.5);
  transform:scale(.96);transition:transform .25s ease;cursor:zoom-out;
}
.shaon-lb.on img{transform:scale(1)}
.shaon-lb .lb-close{
  position:absolute;top:22px;right:30px;color:#FBFAF7;font-family:var(--mono);
  font-size:13px;letter-spacing:.2em;
}
@media (prefers-reduced-motion:reduce){.shaon-lb,.shaon-lb img{transition:none}}

/* ── 社温のよみかた(目盛り帯)── */
.yomikata{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:720px){.yomikata{grid-template-columns:repeat(2,1fr)}}
.yomikata .yband{background:#fff;padding:26px 22px;text-align:left;color:var(--ink)}
.yomikata .deg{font-family:var(--mono);font-size:15px;color:var(--sub);letter-spacing:.04em}
.yomikata .nm{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:.14em;margin:8px 0 10px}
.yomikata .yband.heat .nm,.yomikata .yband.fever .nm{color:var(--mercury)}
.yomikata .yband p{font-size:12.5px;color:var(--sub);line-height:1.9}
.yomikata .strip{height:4px;margin-bottom:16px;background:var(--line)}
.yomikata .yband.cold .strip{background:linear-gradient(to right,#B9C4CC,var(--line))}
.yomikata .yband.normal .strip{background:var(--mercury);opacity:.45}
.yomikata .yband.heat .strip{background:var(--mercury);opacity:.75}
.yomikata .yband.fever .strip{background:var(--mercury)}
.yomikata-note{margin-top:22px;font-size:13px;color:var(--sub)}