/* v3（2026-09-20）：design/skeleton.md のとおり、三五工務店の骨組みと動きに合わせる。style.css のあとに読み込む */

/* スクロール表示の動きは使わない（三五工務店に無い） */
.rv,.h2a .en i{opacity:1!important;transform:none!important;transition:none!important}
.h2a .ja::before{transform:none!important;transition:none!important}

/* 読み込み：白いもやが晴れる */
.loader{background:#fff;transform:none!important;opacity:1;transition:opacity 1.6s ease;pointer-events:none}
html.is-loaded .loader{opacity:0}
.fv-copy h1 span i{transform:none;transition:none}
.fv-lead,.fv-btns{opacity:1;transition:none}
.fv-slide.is-active img,.fv-slide img{animation:none;transform:none}

/* メニュー：項目の真下の小さな白い箱 */
.gnav>li{position:relative}
.sub-menu{position:absolute;left:50%;top:calc(100% + 12px);transform:translate(-50%,-6px);min-width:230px;background:#fff;color:var(--ink);padding:14px 22px;opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.sub-menu::before{content:"";position:absolute;left:50%;top:-8px;margin-left:-8px;border:8px solid transparent;border-top:0;border-bottom-color:#fff}
.sub-menu::after{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.gnav>li:hover>.sub-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.sub-menu a{display:block;padding:7px 0;font-size:15px;font-weight:700;white-space:nowrap;transition:color .3s}
.sub-menu a:hover{color:var(--accent)}

/* PICKUP：横に流れるカード */
.pickup{position:relative}
.pk-track{display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;padding-bottom:4px}
.pk-track::-webkit-scrollbar{display:none}
.pk-track.drag{cursor:grabbing;scroll-snap-type:none}
.pick{flex:0 0 calc((100% - 90px)/4);scroll-snap-align:start;display:block;user-select:none}
.pick .date{display:block;font-family:var(--font-en);font-style:italic;font-size:15px;letter-spacing:.06em;margin-bottom:8px}
.pick figure{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius)}
.pick figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.pick:hover figure img{transform:scale(1.06)}
.pick .cat{display:block;font-size:14px;font-weight:700;color:var(--accent);margin-top:16px;padding-bottom:12px;border-bottom:1px solid var(--ink)}
.pick h3{font-size:19px;line-height:1.6;margin-top:14px}
.pick p{font-size:15.5px;line-height:1.8;color:var(--ink-sub);margin-top:6px}
.pk-arrow{position:absolute;top:26%;width:44px;height:44px;border:0;background:none;cursor:pointer;z-index:2}
.pk-arrow::before{content:"";position:absolute;inset:14px;border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg)}
.pk-arrow.prev{left:-56px}.pk-arrow.next{right:-56px}.pk-arrow.next::before{transform:rotate(-135deg)}
.pickup-sec .btn-row{margin-top:64px}

/* NEWS：左に見出し、右に一覧（3列グリッドの 1:2） */
.news{grid-template-columns:1fr 2fr}

/* CONCEPT：明朝の縦に長い文章、右に大きな写真、左端に小さな写真 */
.concept-sec{display:grid;grid-template-columns:minmax(0,14fr) minmax(0,30fr) minmax(0,56fr);align-items:start;gap:0;padding-inline:0;overflow:hidden}
.cp-left{margin-top:38%;aspect-ratio:3/4;overflow:hidden;transform:translateX(-24%)}
.cp-right{aspect-ratio:1/1;overflow:hidden}
.cp-left img,.cp-right img{width:100%;height:100%;object-fit:cover}
.cp-txt{padding:clamp(20px,3vw,50px) clamp(16px,3vw,56px) 0 0}
.cp-txt h2{font-family:var(--font-copy);font-weight:500;font-size:clamp(26px,2.5vw,38px);line-height:1.9;letter-spacing:.2em}
.cp-txt p{font-family:var(--font-copy);font-size:16px;line-height:2.6;margin:36px 0 44px}

/* SERVICE 上段：全幅の写真3枚（隙間なし）。下段：縦罫の3列 */
.svc-sec{padding-bottom:0}
.svc .num{display:none}
.svc figure figcaption{left:34px;bottom:-0.32em;font-size:clamp(30px,3.3vw,48px)}
.svc .body{text-align:center}
.svc p{text-align:center}
.svc2{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(56px,6vw,90px)}
.svc2 a{display:block;text-align:center;padding:10px 40px 20px;border-left:1px solid var(--line)}
.svc2 a:first-child{border-left:0}
.svc2 .ic{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 18px;border:1px solid var(--ink);border-radius:50%}
.svc2 .ic svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.svc2 .en{display:block;font-family:var(--font-en);font-style:italic;font-size:26px;letter-spacing:.05em;line-height:1.2}
.svc2 h3{font-size:18px;margin-top:4px}
.svc2 p{font-size:16px;line-height:1.9;margin-top:14px;text-align:left}
.more{display:inline-block;margin-top:18px;font-size:14px;font-weight:700;padding:0 34px 8px 0;border-bottom:1px solid currentColor;position:relative}
.more::after{content:"";position:absolute;right:4px;top:8px;width:7px;height:7px;border-right:1.5px solid;border-top:1.5px solid;transform:rotate(45deg);transition:transform .3s}
a:hover>.more::after,a:hover .body .more::after,.more:hover::after{transform:translateX(5px) rotate(45deg)}
.svc .more{border-bottom-color:rgba(255,255,255,.6);align-self:flex-end}

/* 帯バナー */
.band{margin-block:clamp(56px,6vw,90px) clamp(72px,9vw,130px);grid-template-columns:1fr 1fr;min-height:0}
.band figure{min-height:0;aspect-ratio:5/2.1}
.band .body{align-items:center;text-align:center;padding:24px}
.band .en{font-size:clamp(24px,2.6vw,38px)}
.band p{font-size:18px;font-weight:700;margin-top:10px}
.band .more{border-bottom-color:rgba(255,255,255,.6);align-self:flex-end;margin-right:30px}

/* WORKS：幅の広い3列 */
.wrap.wide{max-width:1560px;padding-inline:clamp(16px,2vw,30px)}
.wrap.wide .h2a{padding-inline:clamp(0px,4vw,58px)}

/* 無料相談：RECRUIT の型（4枚の組み写真＋パネル） */
.cta{background:none;color:var(--ink);text-align:left;padding-top:0}
.cta-in{display:grid;grid-template-columns:3fr 2fr}
.cta-ph{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.cta-ph img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover}
.cta-body{background:var(--dark-2);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}
.cta-body .sym{width:44px;height:44px;border:1.5px solid #fff;display:grid;place-items:center;font-family:var(--font-copy);font-size:24px;border-radius:var(--radius)}
.cta-body .en{font-family:var(--font-en);font-size:clamp(30px,3vw,44px);letter-spacing:.06em;line-height:1.2;margin-top:14px}
.cta h2{font-family:var(--font-ja);font-size:16px;font-weight:700;letter-spacing:.1em}
.cta-body p{margin-top:16px;font-size:16px}
.cta .tel-big{margin-top:14px;font-size:clamp(30px,3vw,44px)}
.cta-body .more{border-bottom-color:rgba(255,255,255,.6);align-self:flex-end;margin-right:10px}

@media (max-width:960px){
  .pick{flex-basis:78%}
  .pk-arrow{display:none}
  .pk-track{gap:18px;margin-right:calc(-1*var(--gutter));padding-right:var(--gutter)}
  .news,.cta-in,.svc2{grid-template-columns:1fr}
  .svc2 a{border-left:0;border-top:1px solid var(--line);padding:30px 10px}.svc2 a:first-child{border-top:0}
  .concept-sec{grid-template-columns:1fr;padding-inline:var(--gutter)}
  .cp-left{display:none}.cp-txt{padding:0 0 30px}.cp-right{aspect-ratio:4/3}
  .band{grid-template-columns:1fr}
  .btn-row .btn{width:100%}
}
@media (min-width:961px) and (max-width:1380px){.pk-arrow.prev{left:-10px}.pk-arrow.next{right:-10px}.pk-arrow{background:rgba(255,255,255,.85);border-radius:50%}}

/* ロゴマーク（design/logo の A 案）。線の色は文字色に合わせて変わる（FVの上では白、白地では墨色） */
.logo .sym,.cta-body .sym{border:0;width:46px;height:46px;border-radius:0}
.sym .mark{width:100%;height:100%;display:block}
.cta-body .sym{width:56px;height:56px}
@media (max-width:960px){.logo .sym{width:38px;height:38px}}