@charset "UTF-8";
/*
Theme Name: Uemura Tatami
Theme URI: https://uemura-tatami.com/
Author: 株式会社まちんぐ
Description: うえむら畳商店専用のシンプルテーマ。プラグイン依存を最小化し、畳割りグリッドと畳縁の帯を基調にした和のデザイン。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: uemura-tatami
*/

:root{
  --sumi:#23211c;
  --washi:#f6f2e8;
  --washi-d:#eae4d4;
  --aoi:#6f7f43;
  --ame:#c2954c;
  --ai:#22404f;
  --gray:#7c776c;

  --mincho:"Shippori Mincho B1","Yu Mincho","Hiragino Mincho ProN",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;

  --pad:clamp(20px,5vw,64px);
  --maxw:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--washi);color:var(--sumi);
  font-family:var(--gothic);font-size:16px;line-height:1.9;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ame);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;background:var(--sumi);color:var(--washi);padding:10px 16px;z-index:99}

/* ── 畳の目テクスチャ（画像未設定時のプレースホルダ／地紋） ── */
.igusa{
  background-color:#8c9a5e;
  background-image:
    repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 2px,transparent 2px 9px),
    linear-gradient(160deg,#97a468 0%,#7d8b50 55%,#6d7a44 100%);
  position:relative;
}
.igusa--ame{
  background-color:#c9a765;
  background-image:
    repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 2px,transparent 2px 9px),
    linear-gradient(160deg,#d8b878 0%,#c19a54 60%,#ad8845 100%);
}
.igusa span{position:absolute;left:12px;bottom:10px;font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.82)}

/* ── 署名要素：畳縁の帯 ── */
.heri{height:9px;background:var(--ai);position:relative}
.heri::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.34) 0 2px,transparent 2px 7px,
    rgba(255,255,255,.16) 7px 8px,transparent 8px 16px);
}

/* ── ヘッダー ── */
.site-header{position:sticky;top:0;z-index:50;background:rgba(246,242,232,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--washi-d)}
.hd{max-width:var(--maxw);margin:0 auto;padding:12px var(--pad);display:flex;align-items:center;gap:20px}
.logo{font-family:var(--mincho);font-weight:700;font-size:21px;letter-spacing:.08em;line-height:1.3;text-decoration:none}
.logo small{display:block;font-family:var(--gothic);font-weight:400;font-size:10px;letter-spacing:.22em;color:var(--gray)}
.gnav{margin-left:auto}
.gnav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;font-size:13.5px}
.gnav a{text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;transition:border-color .2s}
.gnav a:hover,.gnav a:focus-visible,.gnav .current-menu-item > a{border-color:var(--aoi)}
.tel{font-family:var(--mincho);font-size:19px;letter-spacing:.04em;white-space:nowrap;text-decoration:none}
.tel small{display:block;font-family:var(--gothic);font-size:10px;letter-spacing:.16em;color:var(--gray)}

/* モバイル：CSSのみのトグル */
.nav-toggle{display:none}
.nav-btn{display:none;margin-left:auto;font-size:12px;letter-spacing:.12em;border:1px solid var(--sumi);padding:8px 14px;cursor:pointer}
@media(max-width:900px){
  .nav-btn{display:block}
  .tel{display:none}
  .gnav{order:9;flex-basis:100%;margin-left:0;max-height:0;overflow:hidden;transition:max-height .25s}
  .gnav ul{flex-direction:column;gap:0}
  .gnav li{border-top:1px solid var(--washi-d)}
  .gnav a{display:block;padding:14px 2px;border:0}
  .nav-toggle:checked ~ .gnav{max-height:520px}
}

/* ── ヒーロー（畳割り） ── */
.hero{max-width:var(--maxw);margin:0 auto;padding:var(--pad) var(--pad) 0}
.jouwari{
  display:grid;grid-template-columns:1.15fr 1fr 1fr;grid-template-rows:170px 170px 130px;gap:7px;
  grid-template-areas:"copy a b" "copy c c" "meta d e";
}
.jouwari > *{border-radius:2px;overflow:hidden}
.j-copy{grid-area:copy;background:var(--sumi);color:var(--washi);padding:32px 28px;display:flex;flex-direction:column;justify-content:center}
.j-copy p{margin:0 0 14px;font-size:11.5px;letter-spacing:.24em;color:#b9b3a4}
.j-copy h1{margin:0;font-family:var(--mincho);font-weight:500;font-size:clamp(26px,3.4vw,40px);line-height:1.65;letter-spacing:.06em}
.j-copy h1 em{font-style:normal;color:var(--ame)}
.j-a{grid-area:a}.j-b{grid-area:b}.j-c{grid-area:c}.j-d{grid-area:d}.j-e{grid-area:e}
.jouwari img{width:100%;height:100%;object-fit:cover}
.j-meta{grid-area:meta;background:var(--washi-d);padding:20px 26px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.j-meta strong{font-family:var(--mincho);font-size:34px;line-height:1.2;letter-spacing:.02em}
.j-meta span{font-size:12px;letter-spacing:.1em;color:var(--gray)}
.hero-lead{max-width:720px;margin:26px 0 0;font-size:15px;color:#4a463d}
@media(max-width:760px){
  .jouwari{grid-template-columns:1fr 1fr;grid-template-rows:auto 140px 110px;grid-template-areas:"copy copy" "a b" "meta c"}
  .j-d,.j-e{display:none}
}

/* ── セクション共通 ── */
.section{padding:clamp(56px,8vw,96px) var(--pad)}
.section--dark{background:var(--sumi);color:var(--washi)}
.section--tint{background:var(--washi-d)}
.inner{max-width:var(--maxw);margin:0 auto}
.eyebrow{font-size:11px;letter-spacing:.28em;color:var(--aoi);margin:0 0 10px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--aoi)}
.section--dark .eyebrow{color:var(--ame)}
.section--dark .eyebrow::before{background:var(--ame)}
h2{font-family:var(--mincho);font-weight:500;font-size:clamp(23px,2.9vw,32px);letter-spacing:.08em;line-height:1.6;margin:0 0 8px}
.sub{margin:0 0 40px;color:var(--gray);font-size:14.5px}
.section--dark .sub{color:#a49e90}
.lead{font-size:14.5px;color:#4a463d}

/* ── 三つのなおし方 ── */
.naoshi{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--washi-d)}
.naoshi article{background:var(--washi);padding:0 0 26px}
.naoshi .ph{height:150px;width:100%;object-fit:cover}
.naoshi .body{padding:22px 24px 0}
.naoshi h3{font-family:var(--mincho);font-size:21px;letter-spacing:.08em;margin:0 0 4px;font-weight:700}
.naoshi .yomi{font-size:11px;letter-spacing:.2em;color:var(--gray);margin:0 0 14px}
.naoshi p{margin:0 0 16px;font-size:14px;line-height:1.95}
.naoshi dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:13px;border-top:1px solid var(--washi-d);padding-top:12px}
.naoshi dt{color:var(--gray)}
.naoshi dd{margin:0;font-family:var(--mincho);font-size:15px}
@media(max-width:760px){.naoshi{grid-template-columns:1fr}}

/* ── 特注畳のタグ ── */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tags li{border:1px solid #4a463d;padding:9px 17px;font-size:13.5px;letter-spacing:.06em;transition:background .2s,border-color .2s}
.tags li:hover{background:#2e2b25;border-color:var(--ame)}
.note-ame{margin:34px 0 0;padding-left:18px;border-left:2px solid var(--ame);font-size:14px;color:#cfc9bb;max-width:640px}

/* ── い草 ── */
.igusa-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,56px);align-items:center}
.iro{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.iro div{height:118px;display:flex;align-items:flex-end;padding:10px;font-size:11px;letter-spacing:.1em;color:#fff}
.badge{display:inline-block;margin-top:24px;border:1px solid var(--aoi);color:var(--aoi);padding:7px 14px;font-size:12.5px;letter-spacing:.08em}
@media(max-width:760px){.igusa-row{grid-template-columns:1fr}}

/* ── ご依頼の流れ ── */
.flow{counter-reset:step;border-top:1px solid var(--washi-d);margin:0;padding:0}
.flow li{list-style:none;display:grid;grid-template-columns:64px 1fr 1.4fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--washi-d);align-items:baseline}
.flow li::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--mincho);font-size:17px;color:var(--ame);letter-spacing:.06em}
.flow h3{margin:0;font-size:16px;font-weight:700;letter-spacing:.06em}
.flow p{margin:0;font-size:14px;color:#4a463d}
@media(max-width:700px){.flow li{grid-template-columns:44px 1fr;gap:8px 14px}.flow p{grid-column:2}}

/* ── 店主 ── */
.tenshu{display:grid;grid-template-columns:300px 1fr;gap:clamp(24px,5vw,52px);align-items:start}
.tenshu .ph{aspect-ratio:3/4;width:100%;object-fit:cover}
.tenshu blockquote{margin:0 0 22px;font-family:var(--mincho);font-size:clamp(19px,2.4vw,26px);line-height:1.85;letter-spacing:.08em}
.tenshu p{font-size:14.5px;color:#4a463d;margin:0 0 14px}
.tenshu .name{font-family:var(--mincho);font-size:17px;letter-spacing:.1em;color:var(--sumi)}
.media{display:flex;flex-wrap:wrap;gap:6px;margin:22px 0 0;padding:0;list-style:none}
.media li{background:var(--washi-d);padding:5px 11px;font-size:12px;letter-spacing:.06em;color:#57534a}
@media(max-width:760px){.tenshu{grid-template-columns:1fr}.tenshu .ph{aspect-ratio:16/9}}

/* ── カード一覧（施工例・お知らせ共通） ── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cards a{text-decoration:none;display:block}
.cards .ph{height:180px;width:100%;object-fit:cover;margin-bottom:14px}
.cards time{font-size:11.5px;letter-spacing:.12em;color:var(--gray)}
.cards .cat{margin-left:10px;color:var(--aoi);font-size:11.5px;letter-spacing:.1em}
.cards h3{margin:6px 0 0;font-size:15px;line-height:1.75;font-weight:500}
.cards a:hover h3{text-decoration:underline;text-underline-offset:4px}
.cards .meta{margin:6px 0 0;font-size:12.5px;color:var(--gray)}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cards{grid-template-columns:1fr;gap:20px}}

/* ── 施工種別の絞り込み ── */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 36px;padding:0;list-style:none}
.filter a{display:inline-block;text-decoration:none;border:1px solid var(--washi-d);background:#fff;padding:7px 16px;font-size:13px;letter-spacing:.06em;transition:background .2s,color .2s,border-color .2s}
.filter a:hover,.filter .is-current a{background:var(--sumi);color:var(--washi);border-color:var(--sumi)}

/* ── ページ見出し ── */
.page-head{padding:clamp(40px,6vw,72px) var(--pad) 0}
.page-head .inner{border-bottom:1px solid var(--washi-d);padding-bottom:26px}
.page-head h1{font-family:var(--mincho);font-weight:500;font-size:clamp(24px,3.2vw,34px);letter-spacing:.08em;margin:0}
.breadcrumb{font-size:11.5px;letter-spacing:.1em;color:var(--gray);margin:0 0 12px}
.breadcrumb a{text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

/* ── 本文（投稿・固定ページ） ── */
.entry{max-width:760px;margin:0 auto;padding:clamp(36px,6vw,64px) var(--pad) clamp(56px,8vw,96px)}
.entry h2{margin:44px 0 14px}
.entry h3{font-family:var(--mincho);font-size:19px;letter-spacing:.06em;margin:32px 0 10px}
.entry p{font-size:15.5px;line-height:2.05;margin:0 0 20px}
.entry ul,.entry ol{font-size:15.5px;line-height:2.05;padding-left:1.4em}
.entry img{margin:26px 0}
.entry figcaption{font-size:12.5px;color:var(--gray);margin-top:8px}
.entry blockquote{margin:26px 0;padding-left:18px;border-left:2px solid var(--aoi);color:#4a463d}
.entry table{width:100%;border-collapse:collapse;font-size:14.5px;margin:26px 0}
.entry th,.entry td{border-bottom:1px solid var(--washi-d);padding:12px 10px;text-align:left;vertical-align:top}
.entry th{width:8em;color:var(--gray);font-weight:500}
.entry a{text-underline-offset:3px}

.work-data{margin:0 0 30px;background:var(--washi-d);padding:20px 24px;font-size:14px}
.work-data dl{margin:0;display:grid;grid-template-columns:6em 1fr;gap:4px 14px}
.work-data dt{color:var(--gray)}
.work-data dd{margin:0}

/* ── Googleフォーム埋め込み ── */
.gform{max-width:760px;margin:0 auto;padding:0 var(--pad) clamp(56px,8vw,96px)}
.gform iframe{width:100%;min-height:1200px;border:0;background:#fff}
.gform-note{font-size:13.5px;color:var(--gray);margin:0 0 20px}

/* ── CTA・店舗情報 ── */
.soudan .inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,56px)}
.soudan h2{margin-bottom:14px}
.soudan p{font-size:14.5px;color:#4a463d;margin:0 0 26px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;text-decoration:none;padding:15px 30px;font-size:14.5px;letter-spacing:.08em;border:1px solid var(--sumi);transition:background .2s,color .2s}
.btn--fill{background:var(--sumi);color:var(--washi)}
.btn--fill:hover{background:var(--aoi);border-color:var(--aoi)}
.btn:hover{background:var(--sumi);color:var(--washi)}
.shop{font-size:14px;line-height:2.1;margin:0}
.shop dt{float:left;clear:left;width:5.5em;color:var(--gray);font-size:13px}
.shop dd{margin:0 0 0 5.5em}
@media(max-width:760px){.soudan .inner{grid-template-columns:1fr}}

/* ── ページネーション ── */
.pagenav{margin:48px 0 0;display:flex;justify-content:center;gap:8px;font-size:14px}
.pagenav .page-numbers{display:inline-block;padding:9px 15px;border:1px solid var(--washi-d);text-decoration:none;background:#fff}
.pagenav .current,.pagenav .page-numbers:hover{background:var(--sumi);color:var(--washi);border-color:var(--sumi)}

/* ── フッター ── */
.site-footer{background:var(--sumi);color:#a49e90;font-size:13px;padding:44px var(--pad) 30px}
.ft{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end}
.ft .logo{color:var(--washi);text-decoration:none}
.ft nav ul{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap;list-style:none;padding:0}
.ft nav{margin-left:auto}
.ft nav a{text-decoration:none}
.ft nav a:hover{color:var(--washi)}
.copy{max-width:var(--maxw);margin:28px auto 0;font-size:11.5px;letter-spacing:.08em;color:#6d685e}

/* ── 地図の埋め込み ── */
.map{margin-top:16px;line-height:0}
.map iframe{width:100%;height:230px;border:0;filter:grayscale(.25)}