/* ===================================================================
   工務店の見本。写真は1枚も使っていない。
   紙・墨・木の色と、図面の線だけで作っている。
   （お客様に「写真が無いから作れない」と言わせないため）
   =================================================================== */
:root{
  --sumi:#1d1a16; --sumi-soft:#4e4840; --sumi-faint:#867e73;
  --kami:#f6f3ec; --kami-2:#ece7dc; --shiro:#fffdf9;
  --ki:#a36b39; --ki-fukai:#7d5028; --ao:#2d4a52;
  --sen:#d9d2c4; --sen-koi:#c2b9a6;
  --gut:22px; --max:1120px;
  --e:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--kami); color:var(--sumi);
  font-family:"Noto Sans JP",system-ui,sans-serif;
  font-size:16px; line-height:1.95; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4{font-family:"Noto Serif JP",serif; margin:0; font-weight:600; line-height:1.45; letter-spacing:-.01em}
p{margin:0}
img{display:block}
a{color:inherit}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gut)}
.kicker{font-size:11.5px; letter-spacing:.24em; color:var(--ki); font-weight:700}

/* ── 見本であることの告知。常に出す ── */
.mihon-obi{
  position:relative; z-index:60; background:var(--sumi); color:#f3ece0;
  font-size:12px; letter-spacing:.04em; text-align:center; padding:9px 16px; line-height:1.7;
}
.mihon-obi b{color:#e8c48f; font-weight:700}
.mihon-obi a{color:#f3ece0}

/* ── 帯 ── */
header{position:sticky; top:0; z-index:50; background:rgba(246,243,236,.93); backdrop-filter:blur(12px); border-bottom:1px solid var(--sen)}
.bar{display:flex; align-items:center; gap:20px; height:74px}
.yagou{display:flex; flex-direction:column; text-decoration:none; flex:0 0 auto; line-height:1.3}
.yagou b{font-family:"Noto Serif JP",serif; font-size:19px; font-weight:700; letter-spacing:.06em}
.yagou small{font-size:10.5px; color:var(--sumi-faint); letter-spacing:.14em}
.menu{display:flex; gap:24px; align-items:center; margin-left:auto}
.menu a{font-size:13.5px; color:var(--sumi-soft); text-decoration:none; padding-bottom:3px; border-bottom:1px solid transparent; transition:border-color .2s var(--e), color .2s var(--e)}
.menu a:hover{color:var(--sumi); border-color:var(--sen-koi)}
.denwa{display:flex; flex-direction:column; align-items:flex-end; text-decoration:none; line-height:1.25}
.denwa small{font-size:10px; letter-spacing:.14em; color:var(--sumi-faint)}
.denwa strong{font-family:"Noto Serif JP",serif; font-size:21px; font-weight:700; letter-spacing:.02em; color:var(--sumi)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--ki); color:#fff; text-decoration:none; border:1px solid var(--ki); cursor:pointer;
  padding:13px 24px; font-size:14px; font-weight:500; letter-spacing:.06em; border-radius:0;
  transition:background .22s var(--e), border-color .22s var(--e), transform .22s var(--e);
}
.btn:hover{background:var(--ki-fukai); border-color:var(--ki-fukai); transform:translateY(-1px)}
.btn.sumi{background:var(--sumi); border-color:var(--sumi)}
.btn.sumi:hover{background:#000; border-color:#000}
.btn.kara{background:transparent; color:var(--sumi); border-color:var(--sen-koi)}
.btn.kara:hover{background:transparent; border-color:var(--sumi)}

/* ── 見出し。写真の代わりに「図面の線」を敷く ── */
.hero{position:relative; overflow:hidden; background:var(--kami-2); border-bottom:1px solid var(--sen); padding:92px 0 84px}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(29,26,22,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(29,26,22,.055) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 62%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 62%, transparent 100%);
}
/* ★前は幅を決めた四角に斜めの色を敷いたので、左端が線になって見えた。
   画面いっぱいの円形にして継ぎ目を消す */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(118% 88% at 86% 6%, rgba(163,107,57,.14), rgba(163,107,57,0) 62%);
}
.hero .wrap{position:relative; z-index:1}
.hero h1{margin-top:22px; font-size:clamp(30px,5.6vw,60px); line-height:1.36; letter-spacing:-.035em; max-width:17em}
.hero h1 em{
  font-style:normal; color:var(--ki-fukai);
  -webkit-text-emphasis:filled dot var(--ki-fukai); text-emphasis:filled dot var(--ki-fukai);
  -webkit-text-emphasis-position:over right; text-emphasis-position:over right;
}
.hero .lead{margin-top:28px; max-width:33em; color:var(--sumi-soft); font-size:15.5px}
.hero-btn{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px}
.hero-shita{display:flex; flex-wrap:wrap; gap:28px; margin-top:40px; padding-top:26px; border-top:1px solid var(--sen-koi)}
.hero-shita div b{display:block; font-family:"Noto Serif JP",serif; font-size:30px; font-weight:700; color:var(--sumi); line-height:1.2; letter-spacing:-.02em}
.hero-shita div span{font-size:11.5px; color:var(--sumi-faint); letter-spacing:.08em}

/* ── 面 ── */
.sec{padding:88px 0}
.sec.shiro{background:var(--shiro); border-top:1px solid var(--sen); border-bottom:1px solid var(--sen)}
.sec.sumi{background:var(--sumi); color:#ece5d9}
.sec.sumi h2, .sec.sumi h3{color:#fdf9f2}
.midashi{padding-bottom:20px; border-bottom:1px solid var(--sen-koi)}
.midashi h2{font-size:clamp(22px,3.8vw,34px); margin-top:10px}
.midashi p{margin-top:12px; font-size:14px; color:var(--sumi-faint); max-width:40em}
.sec.sumi .midashi{border-color:rgba(255,255,255,.18)}
.sec.sumi .midashi p{color:rgba(236,229,217,.62)}

/* ── 不安に答える ── */
.fuan{display:grid; gap:0; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:48px; border-top:1px solid var(--sen-koi)}
.fuan-item{padding:32px 30px 34px; border-bottom:1px solid var(--sen-koi); border-right:1px solid var(--sen-koi)}
.fuan-item:last-child{border-right:0}
.fuan-item .q{font-family:"Noto Serif JP",serif; font-size:17px; font-weight:600; line-height:1.7; color:var(--sumi)}
.fuan-item .q::before{content:"「"; color:var(--sen-koi)}
.fuan-item .q::after{content:"」"; color:var(--sen-koi)}
.fuan-item .a{margin-top:16px; font-size:13.5px; color:var(--sumi-soft); line-height:1.95}
.fuan-item .no{font-size:10.5px; letter-spacing:.18em; color:var(--ki); font-weight:700; display:block; margin-bottom:14px}

/* ── できること ── */
.shigoto{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); margin-top:44px}
.shigoto-item{background:var(--kami); border:1px solid var(--sen); padding:26px 26px 28px; display:flex; flex-direction:column; gap:12px; transition:border-color .25s var(--e), transform .25s var(--e)}
.sec.shiro .shigoto-item{background:var(--kami)}
.shigoto-item:hover{border-color:var(--ki); transform:translateY(-3px)}
.shigoto-item h3{font-size:17px}
.shigoto-item p{font-size:13.5px; color:var(--sumi-soft); line-height:1.9; flex:1}
.shigoto-item .nedan{font-size:12.5px; color:var(--ki-fukai); font-weight:500; padding-top:12px; border-top:1px solid var(--sen)}
.zu{width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--sen-koi); color:var(--ki)}
.zu svg{width:20px; height:20px}

/* ── 流れ ── */
.nagare{margin-top:48px; display:grid; gap:0; counter-reset:n}
.nagare-item{display:grid; grid-template-columns:78px minmax(0,13em) minmax(0,1fr); gap:24px; align-items:start; padding:28px 0; border-top:1px solid var(--sen-koi)}
.nagare-item:last-child{border-bottom:1px solid var(--sen-koi)}
.nagare-no{font-family:"Noto Serif JP",serif; font-size:13px; letter-spacing:.14em; color:var(--ki); font-weight:700; padding-top:5px}
.nagare-item h3{font-size:17px}
.nagare-item p{font-size:13.5px; color:var(--sumi-soft)}
.nagare-item .hiyou{display:inline-block; margin-top:10px; font-size:11.5px; letter-spacing:.06em; color:var(--ki-fukai); border:1px solid rgba(163,107,57,.35); padding:2px 10px}

/* ── よくある質問 ── */
.qa{margin-top:44px; border-top:1px solid var(--sen-koi)}
.qa details{border-bottom:1px solid var(--sen-koi)}
.qa summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family:"Noto Serif JP",serif; font-size:16px; font-weight:600; line-height:1.7;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:""; position:absolute; right:8px; top:50%; width:12px; height:12px; margin-top:-6px;
  border-right:1.6px solid var(--ki); border-bottom:1.6px solid var(--ki);
  transform:rotate(45deg); transform-origin:center; transition:transform .25s var(--e);
}
.qa details[open] summary::after{transform:rotate(-135deg)}
.qa .kotae{padding:0 0 24px; font-size:14px; color:var(--sumi-soft); line-height:1.95; max-width:52em}

/* ── 求人 ── */
.kyujin-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; margin-top:44px; align-items:start}
.kyujin-koe{border-left:2px solid var(--ki); padding:4px 0 4px 22px}
.kyujin-koe p{font-family:"Noto Serif JP",serif; font-size:17px; line-height:2; color:#fdf9f2}
.kyujin-koe cite{display:block; margin-top:14px; font-style:normal; font-size:12px; color:rgba(236,229,217,.6); letter-spacing:.06em}
.kyujin-hyo{margin:0}
.kyujin-hyo > div{display:grid; grid-template-columns:6.5em 1fr; gap:16px; padding:14px 0; border-top:1px solid rgba(255,255,255,.16)}
.kyujin-hyo dt{font-size:12px; color:rgba(236,229,217,.58); letter-spacing:.06em}
.kyujin-hyo dd{margin:0; font-size:14px; color:#ece5d9; line-height:1.85}
.kyujin-btn{margin-top:30px; display:flex; flex-wrap:wrap; gap:12px}
.sec.sumi .btn.kara{color:#fdf9f2; border-color:rgba(255,255,255,.32)}
.sec.sumi .btn.kara:hover{border-color:#fff}

/* ── 会社概要 ── */
.gaiyo{margin-top:40px}
.gaiyo dl{margin:0; display:grid; grid-template-columns:9em 1fr}
.gaiyo dt{padding:16px 0; font-size:12.5px; color:var(--sumi-faint); border-top:1px solid var(--sen); letter-spacing:.06em}
.gaiyo dd{padding:16px 0; margin:0; font-size:14px; border-top:1px solid var(--sen)}
.gaiyo dl > dt:last-of-type, .gaiyo dl > dd:last-of-type{border-bottom:1px solid var(--sen)}

/* ── アクセス ── */
.access{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:40px; margin-top:44px; align-items:start}
.access dl{margin:0 0 24px}
.access dl > div{display:grid; grid-template-columns:5em 1fr; gap:14px; padding:13px 0; border-top:1px solid var(--sen)}
.access dt{font-size:12.5px; color:var(--sumi-faint)}
.access dd{margin:0; font-size:14px}
.access-btn{display:flex; flex-wrap:wrap; gap:12px}
.chizu{overflow:hidden; border:1px solid var(--sen); background:var(--kami-2)}
.chizu iframe{display:block; width:100%; height:clamp(17rem,38vw,24rem); border:0}

/* ── 相談 ── */
.soudan{background:var(--kami-2); border-top:1px solid var(--sen); padding:88px 0 96px}
.soudan-inner{max-width:720px; margin:0 auto}
.soudan h2{font-size:clamp(22px,3.8vw,32px)}
.soudan .lead{margin-top:18px; font-size:15px; color:var(--sumi-soft)}
.soudan form{display:grid; gap:18px; margin-top:36px}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.fld{display:grid; gap:7px}
.fld > span{font-size:12.5px; color:var(--sumi-soft); letter-spacing:.06em; display:flex; align-items:center; gap:9px}
.fld i{font-style:normal; font-size:10.5px; color:var(--ki-fukai); border:1px solid rgba(163,107,57,.4); padding:1px 7px; letter-spacing:.08em}
.fld input, .fld textarea, .fld select{
  font:inherit; font-size:15px; color:var(--sumi); background:var(--shiro);
  border:1px solid var(--sen-koi); border-radius:0; padding:12px 14px; width:100%;
  transition:border-color .2s var(--e);
}
.fld input:focus, .fld textarea:focus, .fld select:focus{outline:none; border-color:var(--ki)}
.fld textarea{resize:vertical; line-height:1.85; min-height:9.5rem}
.wana{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.doui{display:flex; gap:11px; align-items:flex-start; font-size:13px; color:var(--sumi-soft); line-height:1.85; cursor:pointer}
.doui input{margin-top:7px; width:16px; height:16px; accent-color:var(--ki); flex:0 0 auto}
.okuru{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:4px}
.hikae{font-size:12.5px; color:var(--sumi-faint)}
.shirase{font-size:13.5px; line-height:1.85; color:var(--ki-fukai)}
.owari{border:1px solid var(--ki); background:var(--shiro); padding:30px 32px; margin-top:36px}
.owari h3{font-size:19px; margin-bottom:14px}
.owari p{font-size:14px; color:var(--sumi-soft)}

/* ── 下の帯 ── */
footer{background:var(--sumi); color:rgba(236,229,217,.72); padding:44px 0 52px; font-size:12.5px}
.f-row{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:flex-start}
footer b{font-family:"Noto Serif JP",serif; font-size:16px; color:#fdf9f2; letter-spacing:.06em; display:block; margin-bottom:8px}
footer a{color:rgba(236,229,217,.72)}
.f-chui{margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); font-size:11.5px; line-height:1.9; color:rgba(236,229,217,.56)}

/* ── スマホの下に出す帯 ── */
.sumaho-obi{
  position:fixed; left:0; right:0; bottom:0; z-index:55; display:none;
  background:rgba(29,26,22,.96); backdrop-filter:blur(8px);
  padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px));
  gap:9px;
}
.sumaho-obi a{
  flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:7px;
  text-decoration:none; font-size:13.5px; font-weight:500; padding:12px 8px; color:#fff;
}
.sumaho-obi .tel{background:var(--ki)}
.sumaho-obi .form{border:1px solid rgba(255,255,255,.34)}
.sumaho-obi svg{width:15px; height:15px}

/* ── 現れ方 ── */
.deru{opacity:0; transform:translateY(16px); transition:opacity .8s var(--e), transform .8s var(--e)}
.deru.in{opacity:1; transform:none}
.deru[data-d="1"]{transition-delay:.07s}
.deru[data-d="2"]{transition-delay:.14s}
.deru[data-d="3"]{transition-delay:.21s}

@media (max-width:980px){
  .fuan{grid-template-columns:1fr}
  .fuan-item{border-right:0}
  .kyujin-grid, .access{grid-template-columns:1fr; gap:32px}
}
@media (max-width:880px){
  .menu{display:none}
  .denwa{margin-left:auto}
}
@media (max-width:640px){
  :root{--gut:18px}
  .bar{height:64px}
  .yagou b{font-size:16.5px}
  .denwa strong{font-size:17px}
  .bar .btn{display:none}
  .hero{padding:58px 0 56px}
  .sec{padding:58px 0}
  .nagare-item{grid-template-columns:54px 1fr; gap:14px}
  .nagare-item > div, .nagare-item p{grid-column:2}  /* 説明はdivに包まれている＝divを2列目へ（2026-10-01 スマホで1文字ずつ折れていた） */
  .f2{grid-template-columns:1fr}
  .gaiyo dl, .access dl > div{grid-template-columns:1fr}
  .gaiyo dt{padding:14px 0 0}
  .gaiyo dd{padding:2px 0 14px; border-top:0}
  .gaiyo dl > dd:last-of-type{border-bottom:1px solid var(--sen)}
  .access dl > div{gap:2px; padding:12px 0}
  .sumaho-obi{display:flex}
  body{padding-bottom:74px}
  .soudan{padding:58px 0 64px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important}
  .deru{opacity:1; transform:none}
}

/* ── 共有の動き（/ugoki.css）を、この見本の色に合わせる ── */
.susumi span{background:linear-gradient(90deg, var(--ki), var(--ki-fukai))}
header.chijimu .bar{height:62px}
header.chijimu .logo img{height:auto}
.mihon-obi{position:sticky; top:0}


/* ══════════════ 図面 ══════════════
   写真が1枚も無くても成立させるための、この見本の主役。
   線を1本ずつ引く。pathLength="1" を全部に付けてあるので、
   長さが違っても同じ速さで引ける。 */
.zumen{ display:block; width:100%; height:auto; color:var(--sumi); }
.zumen .hiku > *, .zumen .hiku g > *{
  stroke-dasharray:1; stroke-dashoffset:1;
}
.zumen.in .hiku > *, .zumen.in .hiku g > *,
.in .zumen .hiku > *, .in .zumen .hiku g > *{
  animation:hiku .85s cubic-bezier(.33,.9,.55,1) forwards;
  animation-delay:calc(var(--i, 0) * .055s + .1s);
}
@keyframes hiku{ to{ stroke-dashoffset:0 } }
.zumen .sunpou{ color:var(--ki); stroke:var(--ki) }
.zumen-ji, .sunpou-ji{
  font-family:"Noto Sans JP",sans-serif; font-size:11px; letter-spacing:.08em;
  fill:var(--sumi-faint); opacity:0; transition:opacity .6s ease .9s;
}
.zumen.in .zumen-ji, .zumen.in .sunpou-ji,
.in .zumen .zumen-ji, .in .zumen .sunpou-ji{ opacity:1 }
.sunpou-ji{ fill:var(--ki-fukai); font-size:12px }

/* 見出しを左右に割る */
.hero-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:clamp(30px,4.5vw,64px); align-items:center; }
.zumen-ookii{ max-width:640px; margin-left:auto; }

/* 屋号の判子 */
.yagou{ flex-direction:row; align-items:center; gap:11px; }
.in-mark{ width:34px; height:34px; flex:0 0 auto; color:var(--ki); }
.yagou span{ display:flex; flex-direction:column; line-height:1.3; }

/* ══════════════ 施工例 ══════════════ */
.jirei{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); margin-top:46px; }
.jirei-item{
  background:var(--kami); border:1px solid var(--sen); display:flex; flex-direction:column;
  transition:border-color .3s var(--e,cubic-bezier(.22,.61,.36,1)), transform .35s var(--e,cubic-bezier(.22,.61,.36,1)), box-shadow .35s ease;
}
.jirei-item:hover{ border-color:var(--ki); transform:translateY(-3px); box-shadow:0 2px 6px rgba(29,26,22,.05), 0 22px 50px rgba(29,26,22,.10); }
.jirei-item .zumen-ko{ background:var(--shiro); border-bottom:1px solid var(--sen); padding:18px 20px; }
.jirei-naka{ padding:22px 24px 24px; display:flex; flex-direction:column; gap:12px; flex:1; }
.jirei-naka h3{ font-size:17px; }
.jirei-naka p{ font-size:13.5px; color:var(--sumi-soft); line-height:1.9; flex:1; }
.jirei-hyo{ margin:6px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:2px; border-top:1px solid var(--sen); padding-top:14px; }
.jirei-hyo dt{ font-size:10.5px; letter-spacing:.1em; color:var(--sumi-faint); }
.jirei-hyo dd{ margin:3px 0 0; font-family:"Noto Serif JP",serif; font-size:15.5px; font-weight:600; color:var(--ki-fukai); letter-spacing:-.01em; }
.jirei-chu{ margin-top:26px; font-size:11.5px; color:var(--sumi-faint); line-height:1.8; }

@media (max-width:980px){
  .hero-split{ grid-template-columns:1fr; gap:36px; }
  .zumen-ookii{ margin:0 auto; }
}
@media (max-width:640px){
  .in-mark{ width:28px; height:28px; }
  .jirei-hyo dd{ font-size:14px; }
}
@media (prefers-reduced-motion:reduce){
  .zumen .hiku > *, .zumen .hiku g > *{ stroke-dashoffset:0 !important; animation:none !important; }
  .zumen-ji, .sunpou-ji{ opacity:1 }
}

/* ── 帯の詰まり直し（マークと施工例を足して幅が足りなくなった） ── */
.menu{ gap:18px; }
.menu a, .denwa, .bar .btn{ white-space:nowrap; }
.denwa strong{ font-size:19px; }
.bar{ gap:14px; }
@media (max-width:1180px){
  .menu{ gap:14px; }
  .menu a{ font-size:12.5px; }
  .denwa strong{ font-size:17px; }
  .bar .btn{ padding:9px 14px; font-size:12.5px; }
}
@media (max-width:1050px){
  .menu{ display:none; }
}

/* ── 見出しは左半分に入るので、少し落とす ── */
.hero-split .hero h1, .hero-split h1{ font-size:clamp(28px,3.9vw,48px); }

/* ── 施工例は4枚。3＋1に割れないよう2×2でそろえる ── */
.jirei{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:820px){ .jirei{ grid-template-columns:1fr; } }

/* ── 見本の帯は流す（帯と重なって目次が隠れていた） ── */
.mihon-obi{ position:relative; }


/* ── できることの図（施工例と同じ格にそろえる） ── */
.zumen-shigoto{
  background:var(--shiro); border:1px solid var(--sen);
  padding:12px 14px; margin:-4px 0 6px;
}
.sec.shiro .zumen-shigoto{ background:var(--kami); }
.shigoto-item:hover .zumen-shigoto{ border-color:var(--ki); }
.zumen .ame{ color:var(--ao); stroke:var(--ao) }
.zumen .mizu{ color:var(--ki); stroke:var(--ki) }
.zumen .tesuri, .zumen .yajirushi{ color:var(--ki); stroke:var(--ki) }
.zumen-shigoto .zumen-ji{ font-size:9px }

/* ── 採用の仕口（暗い地なので線を明るく） ── */
.zumen-shiguchi{ max-width:420px; margin:0 0 26px; }
.sec.sumi .zumen{ color:rgba(236,229,217,.82); }
.sec.sumi .zumen .sunpou, .sec.sumi .zumen .yajirushi{ color:#e8b174; stroke:#e8b174 }
.sec.sumi .zumen-ji{ fill:rgba(236,229,217,.6) }
.sec.sumi .sunpou-ji{ fill:#e8b174 }

@media (max-width:640px){
  .zumen-shiguchi{ margin-bottom:20px }
}