/* 株式会社ワタリ（仮） ホームページ見本 v2 */

:root{
  --ground:#ffffff;
  --tint:#eff4f8;
  --tint-2:#e3ebf2;
  --line:#dbe3ea;
  --ink:#15202b;
  --dim:#57697a;
  --blue:#0a5cad;
  --blue-deep:#073c74;
  --navy:#0b2440;
  --on-dark:#ffffff;
  --green:#1c7f47;
  --clay:#bd5c25;
  --focus:#0a5cad;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0b141c;
    --tint:#122130;
    --tint-2:#17293a;
    --line:#263b4e;
    --ink:#e8eef3;
    --dim:#9aadbc;
    --blue:#5ea9e8;
    --blue-deep:#0c3c6b;
    --navy:#061523;
    --green:#55b47c;
    --clay:#dd8b55;
    --focus:#5ea9e8;
  }
}
:root[data-theme="dark"]{
  --ground:#0b141c;
  --tint:#122130;
  --tint-2:#17293a;
  --line:#263b4e;
  --ink:#e8eef3;
  --dim:#9aadbc;
  --blue:#5ea9e8;
  --blue-deep:#0c3c6b;
  --navy:#061523;
  --green:#55b47c;
  --clay:#dd8b55;
  --focus:#5ea9e8;
}

*,*::before,*::after{box-sizing:border-box;}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-size:16px;
  line-height:1.9;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;
}
h1,h2,h3,h4{margin:0;color:var(--ink);line-height:1.4;font-weight:700;text-wrap:balance;}
p{margin:0;}

.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:clamp(16px,4vw,36px);}

/* 英字（見出し・ラベル） */
.en{
  font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* ───── 見本の注記 ───── */
.mock-note{
  background:var(--navy);color:rgba(255,255,255,.86);
  font-size:.76rem;line-height:1.6;padding-block:7px;
}

/* ───── ヘッダー ───── */
.site-head{
  position:relative;z-index:5;
  background:var(--ground);
  border-bottom:1px solid var(--line);
}
.site-head a{text-decoration:none;}
.head-in{display:flex;align-items:stretch;gap:18px;min-height:70px;}
.brand{display:flex;align-items:center;gap:11px;padding-block:10px;margin-right:auto;}
.brand-mark{
  width:38px;height:38px;flex:0 0 auto;position:relative;overflow:hidden;
  background:var(--blue);
}
.brand-mark i{position:absolute;top:-6px;bottom:-6px;width:34%;transform:skewX(-14deg);}
.brand-mark i:nth-child(1){left:-4%;background:var(--green);}
.brand-mark i:nth-child(2){left:32%;background:var(--blue);}
.brand-mark i:nth-child(3){left:68%;background:var(--clay);}
.brand-name{font-size:1.22rem;font-weight:700;letter-spacing:.06em;line-height:1.25;color:var(--ink);}
.brand-en{display:block;font-size:.6rem;letter-spacing:.22em;color:var(--dim);font-weight:600;}

.site-nav{display:flex;align-items:center;}
.site-nav ul{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:0 4px;}
.site-nav a{
  display:block;padding:8px 12px;font-size:.92rem;font-weight:500;color:var(--ink);
  border-bottom:3px solid transparent;
}
.site-nav a:hover{color:var(--blue);}
.site-nav a[aria-current="page"]{color:var(--blue);border-bottom-color:var(--blue);}

.head-cta{display:flex;align-items:stretch;}
.head-cta a{
  display:flex;flex-direction:column;justify-content:center;
  padding:10px 20px;font-size:.84rem;line-height:1.4;color:#fff;text-align:center;
}
.head-cta .c-tel{background:var(--blue);}
.head-cta .c-form{background:var(--navy);}
.head-cta strong{font-size:1.12rem;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;}
.head-cta small{font-size:.68rem;opacity:.85;}

/* ───── ヒーロー ───── */
.hero{
  position:relative;overflow:hidden;
  background:var(--navy);
  min-height:clamp(360px,52vw,540px);
  display:grid;
  align-items:center;
}
.hero-panels{position:absolute;inset:0;}
.hero-panels .hp{position:absolute;top:0;bottom:0;overflow:hidden;}
.hp .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hp .wash{position:absolute;inset:0;}
.hp1 .wash{background:linear-gradient(155deg,rgba(28,127,71,.44),rgba(13,79,44,.64));}
.hp2 .wash{background:linear-gradient(155deg,rgba(10,92,173,.36),rgba(6,47,92,.58));}
.hp3 .wash{background:linear-gradient(155deg,rgba(189,92,37,.46),rgba(122,54,18,.70));}
.hero-panels .hp1{left:0;width:44%;clip-path:polygon(0 0,100% 0,80% 100%,0 100%);background:linear-gradient(155deg,#1c7f47,#0d4f2c);}
.hero-panels .hp2{left:35%;width:42%;clip-path:polygon(20% 0,100% 0,80% 100%,0 100%);background:linear-gradient(155deg,#0a5cad,#062f5c);}
.hero-panels .hp3{left:66%;width:34%;clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);background:linear-gradient(155deg,#bd5c25,#7a3612);}
.art{position:absolute;inset:0;width:100%;height:100%;display:block;}
.photo .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.photo.shot{overflow:hidden;}
.hero-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,20,34,.82) 0%,rgba(6,20,34,.42) 52%,rgba(6,20,34,.12) 100%);}
.hero-in{position:relative;padding-block:clamp(44px,7vw,86px);}
.hero h1{
  color:#fff;
  font-size:clamp(1.95rem,5.4vw,3.5rem);
  font-weight:900;
  line-height:1.28;
  letter-spacing:.01em;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.hero-tag{
  color:rgba(255,255,255,.9);
  font-family:"Barlow Condensed",Arial,sans-serif;
  font-size:clamp(1rem,2.4vw,1.5rem);
  letter-spacing:.18em;font-weight:600;text-transform:uppercase;
  margin-bottom:16px;
}
.hero-lead{color:rgba(255,255,255,.88);font-size:.98rem;max-width:31em;margin-top:20px;}
.hero-facts{display:flex;flex-wrap:wrap;gap:0;margin-top:28px;}
.hero-facts div{
  padding:6px 20px 6px 0;margin-right:20px;border-right:1px solid rgba(255,255,255,.28);
  color:#fff;
}
.hero-facts div:last-child{border-right:0;margin-right:0;}
.hero-facts b{
  display:block;font-family:"Barlow Condensed",Arial,sans-serif;
  font-size:1.7rem;font-weight:700;line-height:1.1;letter-spacing:.02em;
}
.hero-facts span{font-size:.72rem;letter-spacing:.1em;opacity:.78;}

/* ───── セクション ───── */
section{padding-block:clamp(44px,6.5vw,86px);}
.tinted{background:var(--tint);}

.sec-head{margin-bottom:clamp(24px,3.5vw,44px);}
.sec-head .en{
  display:block;
  font-size:clamp(2.1rem,6vw,3.6rem);
  line-height:.95;
  color:var(--blue);
  position:relative;
  padding-left:26px;
}
.sec-head .en::before{
  content:"";position:absolute;left:0;top:.1em;bottom:.22em;width:7px;
  background:var(--blue);transform:skewX(-14deg);
}
.sec-head .ja{display:block;font-size:.95rem;font-weight:700;margin-top:6px;padding-left:26px;color:var(--ink);}
.sec-head .desc{margin-top:16px;color:var(--dim);max-width:42em;font-size:.95rem;}
.sec-head.g .en,.sec-head.g .en::before{color:var(--green);background:var(--green);}
.sec-head.g .en{background:none;}
.sec-head.c .en,.sec-head.c .en::before{color:var(--clay);background:var(--clay);}
.sec-head.c .en{background:none;}

/* ───── 写真枠 ───── */
.photo{
  position:relative;overflow:hidden;
  display:grid;place-content:center;
  background:linear-gradient(150deg,var(--blue),var(--blue-deep));
}
.photo.g{background:linear-gradient(150deg,#1c7f47,#0d4f2c);}
.photo.c{background:linear-gradient(150deg,#bd5c25,#7a3612);}
.photo.n{background:linear-gradient(150deg,#1d3b58,#0b2440);}
.photo span{
  font-family:"Barlow Condensed",Arial,sans-serif;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.35);padding:3px 10px;
}

/* ───── 部門カード ───── */
.depts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);}
.dept{background:var(--ground);display:flex;flex-direction:column;box-shadow:0 1px 0 var(--line),0 10px 30px rgba(11,36,64,.06);}
.dept .photo{aspect-ratio:16/10;}
.dept-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:12px;flex:1;}
.dept-label{
  font-family:"Barlow Condensed",Arial,sans-serif;
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
}
.dept h3{font-size:1.28rem;}
.dept p{font-size:.9rem;color:var(--dim);}
.dept ul{margin:0;padding:0;list-style:none;font-size:.87rem;display:flex;flex-direction:column;gap:4px;}
.dept ul li{padding-left:14px;position:relative;}
.dept ul li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:2px;background:currentColor;opacity:.5;}
.dept .more{
  margin-top:auto;align-self:flex-start;text-decoration:none;font-size:.88rem;font-weight:700;
  padding:9px 18px;color:#fff;
}
.d-seika{color:var(--green);} .d-seika .more{background:var(--green);}
.d-mob{color:var(--blue);} .d-mob .more{background:var(--blue);}
.d-ryo{color:var(--clay);} .d-ryo .more{background:var(--clay);}
.dept h3,.dept p,.dept ul{color:var(--ink);}
.dept p{color:var(--dim);}
.badge-prep{
  align-self:flex-start;font-size:.72rem;font-weight:700;
  background:var(--clay);color:#fff;padding:2px 10px;
}
.photo .badge-prep{position:absolute;top:0;left:0;z-index:2;padding:5px 14px;font-size:.76rem;}

/* ───── 事業タイル ───── */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);}
.tile{background:var(--ground);padding:22px 20px;display:flex;flex-direction:column;gap:7px;border-top:4px solid var(--tc,var(--blue));}
.tile-no{
  font-family:"Barlow Condensed",Arial,sans-serif;font-size:.74rem;letter-spacing:.14em;
  color:var(--tc);font-weight:700;text-transform:uppercase;
}
.tile h3{font-size:1.04rem;}
.tile p{font-size:.85rem;color:var(--dim);}
.t-seika{--tc:var(--green);} .t-mob{--tc:var(--blue);} .t-ryo{--tc:var(--clay);}

/* ───── 斜めの数字帯 ───── */
.band{
  background:var(--navy);color:#fff;
  padding-block:clamp(34px,5vw,58px);
  clip-path:polygon(0 0,100% 22px,100% 100%,0 calc(100% - 22px));
  margin-block:clamp(-22px,-2vw,-22px);
}
.band-in{display:flex;flex-wrap:wrap;gap:22px 40px;align-items:flex-end;justify-content:space-between;}
.band h2{color:#fff;font-size:clamp(1.15rem,2.6vw,1.6rem);}
.band p{color:rgba(255,255,255,.78);font-size:.9rem;margin-top:8px;max-width:34em;}
.band-nums{display:flex;flex-wrap:wrap;gap:26px;}
.band-nums div b{
  display:block;font-family:"Barlow Condensed",Arial,sans-serif;font-size:2.3rem;line-height:1;font-weight:700;
}
.band-nums div span{font-size:.72rem;letter-spacing:.12em;opacity:.78;}

/* ───── 表 ───── */
.table-scroll{overflow-x:auto;}
table{width:100%;min-width:600px;border-collapse:collapse;font-size:.9rem;background:var(--ground);}
.tinted table{background:var(--ground);}
caption{caption-side:bottom;text-align:left;font-size:.78rem;color:var(--dim);padding-top:10px;}
th,td{text-align:left;vertical-align:top;padding:13px 16px;border-bottom:1px solid var(--line);}
thead th{background:var(--navy);color:#fff;font-weight:500;font-size:.8rem;letter-spacing:.06em;border-bottom:0;}
tbody th{font-weight:700;white-space:nowrap;}
td.num,th.num{font-variant-numeric:tabular-nums;white-space:nowrap;}
.dept-tag{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 9px;white-space:nowrap;color:#fff;}
.tag-seika{background:var(--green);} .tag-mobility{background:var(--blue);} .tag-ryokan{background:var(--clay);}

/* ───── 定義リスト ───── */
.dl{display:grid;grid-template-columns:11em 1fr;border-top:2px solid var(--navy);font-size:.94rem;}
.dl dt{padding:14px 16px 14px 0;border-bottom:1px solid var(--line);color:var(--dim);font-size:.86rem;font-weight:700;}
.dl dd{margin:0;padding:14px 0;border-bottom:1px solid var(--line);}

/* ───── 汎用ボックス ───── */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(14px,1.8vw,22px);}
.box{background:var(--ground);border:1px solid var(--line);border-top:4px solid var(--blue);padding:22px;display:flex;flex-direction:column;gap:10px;}
.box h3{font-size:1.06rem;}
.box p,.box li{font-size:.88rem;color:var(--dim);}
.box ul{margin:0;padding-left:1.15em;display:flex;flex-direction:column;gap:4px;}
.box.g{border-top-color:var(--green);} .box.c{border-top-color:var(--clay);}
.notelist{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:7px;font-size:.9rem;color:var(--dim);}

/* ───── 帯CTA ───── */
.cta{background:var(--blue);color:#fff;}
.cta-in{padding-block:clamp(32px,5vw,56px);display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;}
.cta h2{color:#fff;font-size:clamp(1.2rem,2.8vw,1.7rem);}
.cta p{color:rgba(255,255,255,.85);font-size:.9rem;margin-top:8px;}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.cta .tel-big{
  font-family:"Barlow Condensed",Arial,sans-serif;font-size:2.1rem;font-weight:700;
  letter-spacing:.03em;text-decoration:none;color:#fff;line-height:1.1;
}
.btn{display:inline-block;padding:13px 28px;font-size:.94rem;font-weight:700;text-decoration:none;}
.btn-white{background:#fff;color:var(--blue);}
.btn-line{border:2px solid var(--navy);color:var(--ink);background:var(--ground);}

/* ───── 下層ページの頭 ───── */
.crumb{font-size:.78rem;color:var(--dim);padding-block:14px;}
.crumb a{text-decoration:none;}
.crumb a:hover{color:var(--blue);}
.page-head{position:relative;overflow:hidden;background:var(--navy);color:#fff;}
.page-head .ph{position:absolute;inset:0;opacity:.9;}
.page-head .in{position:relative;padding-block:clamp(34px,5.5vw,68px);}
.page-head .en{display:block;font-size:clamp(2.2rem,6.5vw,4rem);line-height:.95;color:rgba(255,255,255,.95);}
.page-head h1{color:#fff;font-size:clamp(1.5rem,3.4vw,2.1rem);margin-top:10px;}
.page-head p{color:rgba(255,255,255,.85);max-width:42em;font-size:.95rem;margin-top:14px;}
.ph-seika{background:linear-gradient(120deg,#1c7f47 0%,#0b3a22 62%,#0b2440 100%);}
.ph-mob{background:linear-gradient(120deg,#0a5cad 0%,#062f5c 62%,#0b2440 100%);}
.ph-ryo{background:linear-gradient(120deg,#bd5c25 0%,#7a3612 62%,#0b2440 100%);}
.ph-navy{background:linear-gradient(120deg,#1d3b58 0%,#0b2440 100%);}

/* ───── フォーム ───── */
.form{display:grid;gap:18px;max-width:660px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:.86rem;font-weight:700;}
.field .req{color:var(--clay);font-size:.74rem;}
input,textarea,select{
  font:inherit;font-size:.94rem;padding:11px 13px;border:1px solid var(--line);
  background:var(--ground);color:var(--ink);border-radius:0;width:100%;
}
textarea{min-height:130px;resize:vertical;}
.form-note{font-size:.85rem;color:var(--ink);background:var(--tint-2);border-left:5px solid var(--clay);padding:13px 16px;}

/* ───── フッター ───── */
.site-foot{background:var(--navy);color:rgba(255,255,255,.82);padding-block:44px 24px;font-size:.86rem;}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px;}
.site-foot h3{color:#fff;font-size:1rem;margin-bottom:12px;}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.site-foot a{text-decoration:none;}
.site-foot a:hover{color:#fff;text-decoration:underline;}
.site-foot address{font-style:normal;line-height:1.85;}
.foot-tel{font-family:"Barlow Condensed",Arial,sans-serif;font-size:1.7rem;font-weight:700;color:#fff;letter-spacing:.03em;display:inline-block;text-decoration:none;}
.foot-bottom{margin-top:30px;padding-top:16px;border-top:1px solid rgba(255,255,255,.2);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.74rem;opacity:.68;}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ───── 狭い画面 ───── */
@media (max-width:1000px){
  .head-in{flex-wrap:wrap;min-height:0;}
  .site-nav{order:3;width:100%;border-top:1px solid var(--line);}
  .site-nav a{padding:10px 12px;}
  .tiles{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:860px){
  .depts{grid-template-columns:1fr;}
  .dept .photo{aspect-ratio:16/7;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  body{font-size:15px;}
  .head-cta{width:100%;}
  .head-cta a{flex:1;}
  .tiles{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .dl{grid-template-columns:1fr;}
  .dl dt{padding-bottom:0;border-bottom:0;}
  .dl dd{padding-top:2px;}
  .cta-in{flex-direction:column;align-items:flex-start;}
  .band{clip-path:polygon(0 0,100% 12px,100% 100%,0 calc(100% - 12px));}
  .hero-facts div{border-right:0;padding-right:0;margin-right:22px;}
}