/*
Theme Name: 五色防災
Theme URI: https://goshikibousai.jp/
Author: 株式会社サンフォワード
Description: 株式会社五色防災 公式サイト用のオリジナルテーマです。文章の修正場所は「editing-guide.txt（編集ガイド）」をご覧ください。
Version: 1.0.5
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: goshiki-bousai
*/

/* ==========================================================
   色やサイズの基本設定
   ここの値を変えると、サイト全体の色がまとめて変わります。
   ========================================================== */
:root{
  color-scheme:light;
  --ink:#14213d;
  --ink-2:#4a5568;
  --line:#e5e8ef;
  --bg:#ffffff;
  --bg-soft:#f5f7fa;
  --accent:#d62828;
  --accent-dark:#a61e1e;
  --navy:#0f1c33;
  --radius:14px;
  --max:1120px;
  --hero-img:url("assets/images/hero.jpg");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans JP",system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.85;font-size:16px;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.en{font-family:Inter,sans-serif;letter-spacing:.14em;font-weight:700;font-size:.78rem;color:var(--accent);text-transform:uppercase}
.sec{padding:112px 0}
.sec-head{margin-bottom:56px}
.sec-head h2{font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:900;letter-spacing:.04em;line-height:1.4;margin-top:8px}
.sec-head p{color:var(--ink-2);margin-top:16px;max-width:640px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:999px;font-weight:700;font-size:.95rem;transition:.2s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark)}
.btn-ghost{border:1.5px solid currentColor}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(4px)}

/* header */
header{position:fixed;inset:0 0 auto 0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{display:flex;align-items:center;gap:10px}
.hd{gap:20px}
.logo-mark{height:30px;width:auto;flex:none}
.ft-mark{background:#fff;border-radius:8px;padding:6px 8px;height:44px}
.logo-txt b{display:block;font-family:"Yuji Syuku","Noto Serif JP","Hiragino Mincho ProN",serif;font-size:1.5rem;font-weight:400;letter-spacing:.08em;line-height:1.25}
.logo-txt small{display:block;font-size:.66rem;color:var(--ink-2);letter-spacing:.08em;line-height:1.4;margin-top:2px}
nav ul{display:flex;gap:26px;list-style:none;align-items:center}
nav a{font-size:.9rem;font-weight:500;white-space:nowrap}
.logo-txt,.tel-box,.hd .btn{white-space:nowrap}
nav a:hover{color:var(--accent)}
.hd-tel{display:flex;align-items:center;gap:16px}
.tel-box{text-align:right;line-height:1.3}
.tel-box b{font-family:Inter,sans-serif;font-size:1.25rem;font-weight:800;letter-spacing:.02em}
.tel-box small{display:block;font-size:.68rem;color:var(--ink-2)}
.hd .btn{padding:12px 22px;font-size:.85rem}
.menu-btn{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer}
.menu-btn span{display:block;width:24px;height:2px;background:var(--ink);margin:6px auto;transition:.25s}

/* hero */
.hero{position:relative;padding:200px 0 140px;min-height:640px;display:flex;align-items:center;color:#fff;
  background:linear-gradient(90deg,rgba(15,28,51,.6) 0%,rgba(15,28,51,.35) 45%,rgba(15,28,51,0) 100%),var(--hero-img) center/cover no-repeat}
.hero .wrap{width:100%}
.hero-inner{max-width:620px}
.hero .en{color:#ff8a8a}
.hero h1{font-size:clamp(1.9rem,4.6vw,3.5rem);font-weight:900;line-height:1.35;letter-spacing:.03em;margin:18px 0 26px;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.nw{display:inline-block}
.hero h1 em{font-style:normal;color:#ff6b6b}
.hero p.lead{color:rgba(255,255,255,.9);font-size:1.05rem;max-width:540px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.hero-cta .btn-ghost{color:#fff}

/* about */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.about-grid h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:900;line-height:1.55;margin:10px 0 24px}
.about-grid p{color:var(--ink-2)}
.about-grid p+p{margin-top:1em}
.points{display:grid;gap:16px}
.point{display:flex;gap:20px;padding:26px 28px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.point .num{font-family:Inter,sans-serif;font-weight:800;color:var(--accent);font-size:.9rem;padding-top:2px}
.point h3{font-size:1.05rem;font-weight:700}
.point p{font-size:.9rem;margin-top:4px}

/* services */
.services{background:var(--bg-soft)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc{background:#fff;border-radius:20px;padding:36px 32px;display:flex;flex-direction:column;gap:14px;border:1px solid transparent;transition:.25s}
.svc:hover{border-color:var(--line);transform:translateY(-4px);box-shadow:0 24px 48px -24px rgba(15,28,51,.2)}
.svc-icon{width:56px;height:56px;border-radius:14px;background:#fdeeee;display:grid;place-items:center;color:var(--accent)}
.svc-top{display:flex;justify-content:space-between;align-items:flex-start}
.svc-top .en{color:#b7bfcc}
.svc h3{font-size:1.25rem;font-weight:900;letter-spacing:.03em;line-height:1.5}
.svc p{color:var(--ink-2);font-size:.95rem}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.tags span{font-size:.75rem;background:var(--bg-soft);padding:4px 12px;border-radius:999px;color:var(--ink-2)}

/* buildings */
.bld-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.bld{border:1px solid var(--line);border-radius:var(--radius);padding:28px 10px;text-align:center;font-weight:700;font-size:.92rem}
.bld svg{margin:0 auto 12px;color:var(--ink)}

/* flow */
.flow{background:var(--navy);color:#fff}
.flow .sec-head p{color:#aab4c5}
.flow-list{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;list-style:none;counter-reset:f}
.flow-list li{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:28px 22px}
.flow-list li::before{counter-increment:f;content:"STEP 0" counter(f);font-family:Inter,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.14em;color:#ff6b6b}
.flow-list h3{font-size:1.02rem;margin:10px 0 6px}
.flow-list p{font-size:.84rem;color:#aab4c5;line-height:1.75}

/* message */
.msg-grid{display:block}
.msg-body{max-width:760px}
.msg-photo{aspect-ratio:4/5;border-radius:24px;background:linear-gradient(160deg,#e9edf3,#d4dbe6);display:grid;place-items:center;color:#8a95a8;font-size:.85rem}
.msg-body h2{font-size:clamp(1.4rem,2.8vw,2rem);font-weight:900;line-height:1.6;margin:10px 0 28px}
.msg-body p{color:var(--ink-2)}
.msg-body p+p{margin-top:1em}
.sign{margin-top:32px;font-weight:700}
.sign small{display:block;font-weight:400;font-size:.8rem;color:var(--ink-2)}

/* company */
.company{background:var(--bg-soft)}
.co-grid{display:block;max-width:880px}
.co-table{width:100%;border-collapse:collapse;background:#fff;border-radius:20px;overflow:hidden}
.co-table th,.co-table td{padding:20px 28px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;font-size:.94rem}
.co-table tr:last-child th,.co-table tr:last-child td{border-bottom:0}
.co-table th{width:28%;font-weight:700;white-space:nowrap}
.co-table td{color:var(--ink-2)}
.co-table ul{list-style:none}
.co-table li::before{content:"・"}
.map{background:#fff;border-radius:20px;padding:28px}
.map-box{aspect-ratio:1/1;border-radius:12px;background:repeating-linear-gradient(45deg,#eef1f6 0 12px,#f6f8fb 12px 24px);display:grid;place-items:center;color:#8a95a8;font-size:.85rem;text-align:center}
.map h3{font-size:1rem;margin:20px 0 6px}
.map p{font-size:.88rem;color:var(--ink-2)}
.ph{background:#fff4d6;color:#8a6100;border-radius:4px;padding:0 4px}

/* contact */
.cta{padding:96px 0}
.cta-box{background:linear-gradient(120deg,var(--accent) 0%,#b31d1d 100%);color:#fff;border-radius:28px;padding:72px 64px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;position:relative;overflow:hidden}
.cta-box::after{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;border:48px solid rgba(255,255,255,.08)}
.cta-box h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:900;line-height:1.5}
.cta-box p{opacity:.9;margin-top:10px}
.cta-actions{display:flex;flex-direction:column;gap:14px;position:relative;z-index:1}
.cta-tel{background:#fff;color:var(--ink);border-radius:16px;padding:18px 28px;text-align:center}
.cta-tel b{font-family:Inter,sans-serif;font-size:1.7rem;font-weight:800;display:block;line-height:1.2}
.cta-tel small{font-size:.75rem;color:var(--ink-2)}
.cta-actions .btn-ghost{color:#fff;justify-content:center}

footer{background:var(--navy);color:#aab4c5;padding:64px 0 32px;font-size:.88rem}
.ft{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
footer .logo-txt b{color:#fff}
footer .logo-txt small{color:#aab4c5}
.ft-nav{display:flex;gap:24px;flex-wrap:wrap}
.ft-nav a:hover{color:#fff}
.copy{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:24px;font-size:.75rem;font-family:Inter,sans-serif;letter-spacing:.05em}

/* form */
.form-sec{background:var(--bg-soft)}
.form-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.form-intro h2{font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:900;margin:8px 0 18px}
.form-intro p{color:var(--ink-2)}
.contact-info{margin-top:32px;display:grid;gap:14px}
.contact-info div{display:flex;gap:16px;align-items:baseline;border-top:1px solid var(--line);padding-top:14px}
.contact-info dt{font-family:Inter,sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.12em;color:var(--accent);width:56px;flex:none}
.contact-info dd{font-weight:700;word-break:break-all}
.cform{background:#fff;border-radius:20px;padding:40px;display:grid;gap:22px;min-width:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:grid;gap:8px;min-width:0}
.field label{font-size:.9rem;font-weight:700;display:flex;align-items:center;gap:8px}
.req{font-size:.68rem;font-weight:700;color:#fff;background:var(--accent);border-radius:4px;padding:1px 6px;line-height:1.6}
.cform input,.cform select,.cform textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--bg-soft);border:1.5px solid transparent;border-radius:10px;padding:13px 16px;transition:border-color .2s,background .2s}
.cform textarea{resize:vertical;min-height:150px}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--ink);background:#fff}
.cform .invalid{border-color:var(--accent);background:#fff5f5}
.count{font-size:.75rem;color:var(--ink-2);text-align:right;font-family:Inter,sans-serif}
.submit{justify-self:start;border:0;cursor:pointer;font-family:inherit}
.form-msg{font-size:.9rem;font-weight:700;padding:14px 18px;border-radius:10px;background:#eef6f0;color:#1f6b3a}
.form-msg.err{background:#fff0f0;color:var(--accent-dark)}

/* responsive */
@media (max-width:1180px){
  nav,.hd-tel .tel-box{display:none}
  .menu-btn{display:block}
  nav.open{display:block;position:fixed;top:76px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:16px 24px 28px}
  nav.open ul{flex-direction:column;align-items:flex-start;gap:0}
  nav.open li{width:100%;border-bottom:1px solid var(--line)}
  nav.open a{display:block;padding:14px 0;font-size:1rem}
  .flow-list{grid-template-columns:repeat(2,1fr)}
  .svc-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .sec{padding:80px 0}
  .hero{padding:140px 0 88px;min-height:0;background-position:center 60%}
  .hero{background-image:linear-gradient(180deg,rgba(15,28,51,.4),rgba(15,28,51,.55)),var(--hero-img)}
  .about-grid,.msg-grid,.co-grid,.cta-box,.form-grid{grid-template-columns:1fr}
  .form-grid{gap:40px}
  .cform{padding:28px 22px}
  .row2{grid-template-columns:1fr}
  .about-grid,.msg-grid{gap:40px}
  .svc-grid{grid-template-columns:1fr}
  .svc{padding:30px 26px}
  .cta-box{padding:48px 28px}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .hd .btn{display:none}
  .flow-list{grid-template-columns:1fr}
  .bld-grid{grid-template-columns:repeat(2,1fr)}
  .bld:last-child{grid-column:1/-1}
  .co-table th,.co-table td{display:block;width:100%;padding:12px 20px}
  .co-table th{padding-bottom:0;border-bottom:0}
}

/* ==========================================================
   WordPress用の追加設定
   ========================================================== */
/* ログイン中は上部に管理バーが出るため、ヘッダーをその分下げる */
.admin-bar header{top:32px}
@media (max-width:782px){.admin-bar header{top:46px}}
/* 迷惑メール対策用の見えない入力欄 */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}