/* Tobe Works 株式会社 ／ 2026-10-30 作り直し
   色＝ロゴと名刺の実測値。背景＝モルタル調（少し濃いめ）。
   書体＝理念とお礼だけ筆書体、それ以外は明朝で統一。 */
:root{
  --navy:#0F212D;
  --navy-2:#1a3242;
  --gold:#7C572D;
  --gold-lt:#c39a62;
  --washi:#E3DCD5;
  --text:#1d2a33;
  --mute:#4d5961;
  --line:rgba(15,33,45,.18);
  --brush:'Yuji Syuku',serif;
  --mincho:'Shippori Mincho',serif;
  --hd:84px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--hd)}
body{margin:0;font-family:var(--mincho);color:var(--text);font-size:16px;line-height:2;letter-spacing:.04em;
  background:#bdb8b0 url(../img/mortar.jpg) repeat;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
.sp{display:none}
@media (max-width:767px){.sp{display:inline}.pc{display:none}}
.tw{color:var(--gold);font-weight:700;letter-spacing:.02em}
.sec--navy .tw,.mv .tw,.chat .tw{color:var(--gold-lt)}

.draft{margin:0;background:var(--gold);color:#fff;font-size:12px;text-align:center;padding:4px 12px;line-height:1.6}

/* ── ヘッダー ── */
.hd{position:sticky;top:0;z-index:50;background:#c9c4bc url(../img/mortar.jpg) repeat;border-bottom:1px solid var(--line);height:var(--hd)}
.hd__in{max-width:1320px;margin:0 auto;height:100%;display:flex;align-items:center;gap:28px;padding:0 24px}
.hd__logo img{width:190px}
.hd__nav{display:flex;gap:22px;margin-left:auto;font-size:14px;font-weight:600}
.hd__nav a{text-decoration:none;white-space:nowrap}
.hd__nav a:hover{color:var(--gold)}
.hd__tel{text-decoration:none;font-size:21px;font-weight:700;line-height:1.2;color:var(--navy);white-space:nowrap}
.hd__tel small{display:block;font-size:11px;font-weight:500;color:var(--mute)}
.hd__cta{background:var(--navy);color:#fff;text-decoration:none;font-size:14px;font-weight:600;padding:12px 20px;white-space:nowrap}
.hd__cta:hover{background:var(--gold)}
.hd__menu{display:none;margin-left:auto;width:54px;height:54px;background:var(--navy);border:0;position:relative;cursor:pointer}
.hd__menu span{position:absolute;left:15px;width:24px;height:2px;background:#fff;transition:.3s}
.hd__menu span:nth-child(1){top:15px}.hd__menu span:nth-child(2){top:22px}.hd__menu span:nth-child(3){top:29px}
.hd__menu em{position:absolute;left:0;right:0;bottom:6px;font-style:normal;color:#fff;font-size:9px;letter-spacing:.05em;line-height:1}
.hd__menu[aria-expanded=true] span:nth-child(1){top:22px;transform:rotate(45deg)}
.hd__menu[aria-expanded=true] span:nth-child(2){opacity:0}
.hd__menu[aria-expanded=true] span:nth-child(3){top:22px;transform:rotate(-45deg)}
.drawer{position:fixed;inset:var(--hd) 0 0 auto;width:min(380px,100%);z-index:49;background:var(--navy) url(../img/mortar-navy.jpg);color:#fff;padding:24px 28px 40px;overflow-y:auto}
.drawer__nav a{display:block;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.15);text-decoration:none;font-weight:600}
.drawer__tel{display:block;margin-top:24px;text-align:center;background:var(--gold);padding:14px;font-size:20px;font-weight:700;text-decoration:none}
@media (max-width:1240px){.hd__nav{display:none}.hd__tel{margin-left:auto}.hd__menu{display:block;margin-left:0}}
@media (max-width:767px){:root{--hd:64px}.hd__in{padding:0 0 0 16px;gap:12px}.hd__logo img{width:150px}.hd__tel,.hd__cta{display:none}.hd__menu{margin-left:auto;width:64px;height:64px}.hd__menu span{left:20px}.hd__menu span:nth-child(1){top:18px}.hd__menu span:nth-child(2){top:26px}.hd__menu span:nth-child(3){top:34px}.hd__menu[aria-expanded=true] span:nth-child(1),.hd__menu[aria-expanded=true] span:nth-child(3){top:26px}.hd__menu em{bottom:8px}}

/* ── 企業理念（ファーストビュー）── */
.mv{position:relative;min-height:min(calc(100svh - var(--hd) - 26px),860px);display:grid;place-items:center;color:#fff;overflow:hidden;background:var(--navy)}
.mv__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.32;filter:grayscale(.4)}
.mv::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,33,45,.35),rgba(15,33,45,.75))}
.mv__in{position:relative;z-index:1;text-align:center;padding:60px 20px 90px}
.mv__label{display:inline-block;font-size:14px;letter-spacing:.4em;padding:0 0 6px;border-bottom:1px solid var(--gold-lt);color:var(--gold-lt);margin-bottom:28px}
.mv__brush{font-family:var(--brush);font-weight:400;font-size:clamp(46px,6.4vw,96px);line-height:1.35;letter-spacing:.06em;display:flex;justify-content:center;gap:.5em;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.mv__brush span{display:block;white-space:nowrap;opacity:0;transform:translateY(12px);animation:rise 1.2s ease forwards}
.mv__brush span:nth-child(2){animation-delay:.35s}.mv__brush span:nth-child(3){animation-delay:.7s}
@keyframes rise{to{opacity:1;transform:none}}
.mv__lead{margin-top:36px;font-size:clamp(17px,1.8vw,24px);font-weight:600;letter-spacing:.08em;line-height:1.8}
.mv__name{margin-top:18px;font-size:15px;letter-spacing:.2em}
.mv__area{position:absolute;z-index:1;right:28px;bottom:24px;font-size:13px;letter-spacing:.2em;writing-mode:vertical-rl;color:rgba(255,255,255,.75)}
@media (max-width:767px){
  .mv{min-height:min(calc(100svh - var(--hd) - 40px),760px)}
  .mv__brush{flex-direction:column;gap:0;font-size:clamp(48px,15vw,64px)}
  .mv__lead{font-size:17px;margin-top:28px}
  .mv__area{writing-mode:horizontal-tb;left:0;right:0;text-align:center;bottom:20px;font-size:12px}
}

/* ── セクション共通 ── */
.sec{padding:110px 0}
.sec--mortar{background:transparent}
.sec--washi{background:var(--washi) url(../img/mortar-washi.jpg) repeat}
.sec--navy{background:var(--navy) url(../img/mortar-navy.jpg) repeat;color:#fff}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.ttl{text-align:center;margin-bottom:64px}
.ttl__sub{display:inline-flex;align-items:center;gap:14px;color:var(--gold);font-size:15px;font-weight:700;letter-spacing:.25em}
.ttl__sub::before,.ttl__sub::after{content:"";width:28px;height:1px;background:currentColor}
.ttl__main{margin-top:14px;font-size:clamp(25px,3vw,38px);font-weight:700;line-height:1.6;letter-spacing:.06em;color:var(--navy)}
.ttl__lead{margin-top:24px;color:var(--mute);line-height:2.1}
.ttl--rev .ttl__sub{color:var(--gold-lt)}
.ttl--rev .ttl__main{color:#fff}
.ttl--rev .ttl__lead{color:rgba(255,255,255,.82)}
.ttl--left{text-align:left;margin-bottom:28px}
.ttl--left .ttl__sub::after{display:none}
@media (max-width:767px){.sec{padding:72px 0}.wrap{padding:0 16px}.ttl{margin-bottom:40px}.ttl__lead{text-align:left;font-size:15px}}

.ph{position:relative;background:#9a948b center/cover no-repeat}
.ph__tag{position:absolute;left:10px;top:10px;font-size:11px;background:rgba(15,33,45,.75);color:#fff;padding:2px 8px;line-height:1.6}
.ph--blank{display:grid;place-items:center;background:rgba(15,33,45,.08);border:1px dashed rgba(15,33,45,.35);color:var(--mute);font-size:13px;aspect-ratio:4/3}

.btnwrap{text-align:center;margin-top:48px}
.btn{display:inline-block;min-width:280px;padding:16px 32px;border:1px solid var(--navy);color:var(--navy);text-decoration:none;font-weight:700;letter-spacing:.1em;background:transparent;font-family:inherit;font-size:15px;cursor:pointer;transition:.25s}
.btn:hover{background:var(--navy);color:#fff}
.btn--fill{background:var(--navy);color:#fff}
.btn--fill:hover{background:var(--gold);border-color:var(--gold)}

/* ── お困りごと ── */
.worry{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.worry__item{background:rgba(255,255,255,.55);border-left:4px solid var(--gold);padding:30px 32px;counter-increment:w}
.worry__item h3{font-size:20px;line-height:1.6;color:var(--navy);margin-bottom:12px}
.worry__item p{color:var(--mute);font-size:15px}
.bridge{margin-top:56px;text-align:center;font-size:clamp(22px,2.6vw,30px);font-weight:700;color:var(--navy);letter-spacing:.08em}
.bridge::before{content:"";display:block;width:1px;height:48px;background:var(--gold);margin:0 auto 24px}
@media (max-width:767px){.worry{grid-template-columns:1fr;gap:14px}.worry__item{padding:22px 20px}.worry__item h3{font-size:18px}}

/* ── 選ばれる理由 ── */
.rsn{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:72px}
.rsn:first-of-type{margin-top:0}
.rsn--rev .rsn__ph{order:2}
.rsn__ph{aspect-ratio:4/3;box-shadow:16px 16px 0 rgba(124,87,45,.22)}
.rsn--rev .rsn__ph{box-shadow:-16px 16px 0 rgba(124,87,45,.22)}
.rsn__no{color:var(--gold);font-weight:700;letter-spacing:.3em;font-size:15px}
.rsn__h{font-size:clamp(23px,2.4vw,30px);line-height:1.6;color:var(--navy);margin:8px 0 22px}
.rsn__body p+p{margin-top:12px}
.rsn__note{font-weight:700;color:var(--navy);border-top:1px solid var(--line);padding-top:12px;margin-top:18px!important}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin:22px 0 4px}
.chain li{display:flex;align-items:center;font-size:14px;font-weight:700;color:var(--navy);line-height:1.6}
.chain li span{background:#fff;padding:6px 12px;border:1px solid var(--line)}
.chain li+li::before{content:"→";color:var(--gold);padding:0 8px;font-weight:400}
.chain li:last-child span{background:var(--navy);color:#fff;border-color:var(--navy)}
@media (max-width:900px){.rsn{grid-template-columns:1fr;gap:28px;margin-top:56px}.rsn--rev .rsn__ph{order:0}.rsn__ph{margin-right:16px}.rsn--rev .rsn__ph{margin:0 0 0 16px}}

/* ── 対応できる工事 ── */
.svc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.svc__item{background:rgba(255,255,255,.6);padding:26px 18px 24px;border-top:3px solid var(--navy);position:relative}
.svc__no{display:block;font-size:13px;color:var(--gold);font-weight:700;letter-spacing:.15em}
.svc__item h3{font-size:19px;line-height:1.5;color:var(--navy);margin:6px 0 10px;min-height:3em;display:flex;align-items:flex-end}
.svc__item p{font-size:14px;line-height:1.85;color:var(--mute)}
.svc__more{text-align:center;margin-top:36px;font-weight:700;color:var(--navy)}
@media (max-width:1000px){.svc{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.svc__item h3{min-height:0}}
@media (max-width:767px){.svc__item{padding:18px 14px}.svc__item h3{font-size:17px}.svc__item p{font-size:13px}}

/* ── 施工事例 ── */
.works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.works__ba{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.works__cat{margin-top:14px;font-size:13px;color:var(--gold);font-weight:700}
.works__item h3{font-size:17px;color:var(--navy);line-height:1.6}
@media (max-width:900px){.works{grid-template-columns:1fr}}

/* ── 施工会社の声（LINE風の展開）── */
.voices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.voice{background:#fff;color:var(--text)}
.voice[open]{grid-column:1/-1}
.voice__card{display:grid;grid-template-columns:64px 1fr;gap:6px 16px;padding:26px 26px 22px;cursor:pointer;list-style:none}
.voice__card::-webkit-details-marker{display:none}
.voice__avatar{grid-row:span 2;width:64px;height:64px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:24px;font-weight:700}
.voice__who{display:flex;flex-direction:column;line-height:1.5}
.voice__co{font-size:13px;color:var(--mute)}
.voice__name{font-size:19px;font-weight:700;color:var(--navy)}
.voice__tags{display:flex;flex-wrap:wrap;gap:6px}
.voice__tags span{font-size:12px;background:var(--washi);padding:1px 9px;line-height:1.9}
.voice__quote{grid-column:1/-1;margin-top:12px;font-size:17px;font-weight:600;line-height:1.9;color:var(--navy);border-left:3px solid var(--gold);padding-left:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.voice__more{grid-column:1/-1;margin-top:10px;text-align:right;font-size:14px;font-weight:700;color:var(--gold)}
.voice__more b{font-weight:700}
.voice__more .o::after{content:" ＋"}
.voice__more .c{display:none}.voice__more .c::after{content:" －"}
.voice[open] .voice__more .o{display:none}.voice[open] .voice__more .c{display:inline}
.voice[open] .voice__card{grid-template-columns:64px auto 1fr}
.voice[open] .voice__avatar{grid-row:auto}
.voice[open] .voice__tags{align-self:center}
.voice--wait{min-height:220px;display:grid;place-items:center;text-align:center;background:transparent;border:1px dashed rgba(255,255,255,.35);color:rgba(255,255,255,.7);font-size:15px;line-height:1.9}

.chat{background:#8fa9c4;padding:22px 20px 30px;display:flex;flex-direction:column;gap:12px;font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;letter-spacing:.02em}
.chat__date{align-self:center;background:rgba(0,0,0,.18);color:#fff;font-size:12px;padding:2px 12px;border-radius:12px;line-height:1.8}
.msg{display:flex;align-items:flex-start;gap:8px;max-width:78%}
.msg p{padding:10px 14px;border-radius:18px;font-size:15px;line-height:1.7;position:relative}
.msg--q{align-self:flex-end}
.msg--q p{background:#8de055;color:#111;border-top-right-radius:4px}
.msg--a p{background:#fff;color:#111;border-top-left-radius:4px}
.msg__av{flex:none;width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700;font-family:var(--mincho)}
@media (max-width:900px){.voices{grid-template-columns:1fr}.voice[open] .voice__card{grid-template-columns:64px 1fr}.voice[open] .voice__avatar{grid-row:span 2}.voice--wait{min-height:120px}}
@media (max-width:767px){.voice__card{padding:20px 18px 18px;grid-template-columns:52px 1fr}.voice__avatar{width:52px;height:52px;font-size:20px}.chat{padding:18px 10px 24px}.msg{max-width:88%}.msg p{font-size:14px}}

/* ── 代表の信念 ── */
.belief{display:grid;grid-template-columns:340px 1fr;gap:64px;align-items:start}
.belief__fig{position:sticky;top:calc(var(--hd) + 30px)}
.belief__fig img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top}
.belief__fig figcaption{margin-top:16px;display:flex;flex-direction:column;line-height:1.6}
.belief__fig figcaption span{font-size:13px;color:var(--mute)}
.belief__fig strong{font-size:26px;color:var(--navy);letter-spacing:.2em}
.belief__fig small{font-size:12px;color:var(--gold);letter-spacing:.2em}
.belief__list li{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:30px 0;border-bottom:1px solid var(--line)}
.belief__list li:first-child{padding-top:0}
.belief__no{font-family:var(--brush);font-size:44px;line-height:1;color:var(--gold);text-align:center}
.belief__list h3{font-size:clamp(20px,2vw,24px);line-height:1.6;color:var(--navy);margin-bottom:8px}
.belief__list p{color:var(--mute)}
@media (max-width:900px){.belief{grid-template-columns:1fr;gap:36px}.belief__fig{position:static;max-width:300px;margin:0 auto}.belief__list li{grid-template-columns:44px 1fr;gap:12px;padding:22px 0}.belief__no{font-size:34px}}

/* ── 対応エリア ── */
.area{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.area__txt p+p{margin-top:12px}
.area__cities{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.area__cities li{background:var(--navy);color:#fff;font-size:14px;padding:4px 14px}
.area__cities li:nth-child(-n+3){background:var(--gold)}
.area__map{background:#fdfcf8;padding:18px;box-shadow:0 10px 30px rgba(15,33,45,.15)}
@media (max-width:900px){.area{grid-template-columns:1fr;gap:32px}}

/* ── ご依頼の流れ ── */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:f}
.flow li{border:1px solid rgba(255,255,255,.22);padding:28px 26px 26px;text-align:center;position:relative}
.flow span{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--gold);font-weight:700;font-size:18px}
.flow h3{font-size:18px;margin:12px 0 8px}
.flow p{font-size:15px;line-height:1.9;color:rgba(255,255,255,.82)}
@media (max-width:1000px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.flow{grid-template-columns:1fr}.flow li{display:grid;grid-template-columns:44px 1fr;gap:4px 16px;text-align:left;padding:18px}.flow span{grid-row:span 2}.flow h3{margin:0}}

/* ── お礼・お問い合わせ ── */
.thanks{max-width:760px;margin:0 auto 64px;text-align:center}
.thanks__brush{font-family:var(--brush);font-size:clamp(34px,4.6vw,56px);color:var(--navy);line-height:1.5;margin-bottom:28px}
.thanks p:not(.thanks__brush){line-height:2.2}
.thanks__sign{margin-top:18px;font-weight:700;color:var(--navy)}
@media (max-width:767px){.thanks{text-align:left}.thanks__brush{text-align:center}.thanks__sign{text-align:right}}
.ct{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:920px;margin:0 auto}
.ct a{display:flex;flex-direction:column;align-items:center;text-decoration:none;padding:26px 16px;line-height:1.6;text-align:center}
.ct__tel{background:var(--navy);color:#fff}
.ct__mail{background:#fff;color:var(--navy);border:1px solid var(--navy)}
.ct small{font-size:13px}
.ct strong{font-size:clamp(20px,2.6vw,30px);letter-spacing:.06em;margin:4px 0;word-break:break-all}
.ct span{font-size:13px;opacity:.85}
@media (max-width:767px){.ct{grid-template-columns:1fr}}
.form{max-width:760px;margin:56px auto 0;background:rgba(255,255,255,.65);padding:44px 48px}
.form__ttl{text-align:center;font-size:21px;font-weight:700;color:var(--navy);margin-bottom:28px}
.form__row{display:grid;grid-template-columns:180px 1fr;gap:16px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.form__row label{font-weight:700;color:var(--navy);padding-top:10px;font-size:15px}
.form__row em{font-style:normal;font-size:11px;background:var(--gold);color:#fff;padding:1px 6px;margin-left:8px;vertical-align:2px}
.form input,.form select,.form textarea{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:1px solid rgba(15,33,45,.3);background:#fff;border-radius:0;color:var(--text)}
.form__btn{text-align:center;margin-top:28px}
.form__note{text-align:center;font-size:13px;color:var(--mute);margin-top:12px}
@media (max-width:767px){.form{padding:28px 18px}.form__row{grid-template-columns:1fr;gap:6px}.form__row label{padding-top:0}}

/* ── フッター ── */
.ft{background:var(--navy) url(../img/mortar-navy.jpg);color:#fff;padding:64px 0 0}
.ft__in{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.ft__co img{width:220px;margin-bottom:20px}
.ft__co p{font-size:14px;line-height:2;color:rgba(255,255,255,.85)}
.ft__co p+p{margin-top:10px}
.ft__co a{text-decoration:none}
.ft__nav{display:grid;grid-template-columns:repeat(3,auto);gap:10px 28px;align-content:start;justify-content:end;font-size:14px}
.ft__nav a{text-decoration:none;color:rgba(255,255,255,.85)}
.ft__nav a:hover{color:var(--gold-lt)}
.ft__copy{text-align:center;font-size:12px;color:rgba(255,255,255,.55);padding:40px 0 24px}
@media (max-width:767px){.ft__in{grid-template-columns:1fr;gap:28px}.ft__nav{grid-template-columns:repeat(2,auto);justify-content:start}}

.spbar{display:none}
@media (max-width:767px){
  body{padding-bottom:60px}
  .spbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:40;height:60px}
  .spbar a{display:grid;place-items:center;text-decoration:none;color:#fff;font-weight:700;font-size:15px}
  .spbar a:first-child{background:var(--gold)}
  .spbar a:last-child{background:var(--navy)}
}

/* 動きは控えめ（スクロールで静かに浮かぶだけ）*/
.fade{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.fade.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fade,.mv__brush span{opacity:1;transform:none;animation:none;transition:none}}
.ct__mail strong{font-size:clamp(17px,2vw,24px);word-break:normal}
@media (max-width:767px){.draft{font-size:11px;letter-spacing:0}}
.voice[open] .chat{padding-left:max(20px,calc((100% - 780px)/2));padding-right:max(20px,calc((100% - 780px)/2))}