/* ==========Theme / Base========== */
:root { --accent:#0068b7; --text:#0b0f14; --muted:#16181a; --line:#e6e8eb; --bg:#ffffff; --bg-soft:#f7f8fa; --bg-accent:#f2f7ff; }
:root { --radius:16px; --btn_radius:50px; --shadow:0 10px 24px rgba(0,0,0,.06); --max:1200px; --header-h:95px; }
:root { --serif:"Noto Serif JP", serif; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Noto Sans JP", serif; font-optical-sizing:auto; font-weight:400; font-style:normal; font-size:14px; color:var(--text); background:var(--bg); line-height:1.7; letter-spacing:.02em; }
body { width:100%; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
section { padding:100px 0; }
section:not(:first-child) { border-top:1px solid var(--line); }
h2 { font-size:clamp(18px, 2.3vw, 26px); margin:0; letter-spacing:.01em; }
h3 { font-size:18px; margin:0 0 6px; }
p { margin:0; }
small { font-size:50%; }
aside { margin-top:10px; display:flex; justify-content:end; }
aside p { font-size:90%; text-indent:-2.5em; margin-left:2.5em; }

.inner { width:min(var(--max), calc(100% - 40px)); margin-inline:auto; }
.tel { font-weight:700; font-size:16px; letter-spacing:.03em; padding:11px 14px; border:1px solid var(--line); border-radius:var(--btn_radius); background:#fff; }
.btn { font-weight:700; font-size:16px; display:inline-flex; align-items:center; justify-content:center; padding:11px 14px; border-radius:var(--btn_radius); border:1px solid transparent; cursor:pointer; white-space:nowrap; }
.btn-ghost { background:#fff; border-color:rgba(0,104,183,.35); color:var(--accent); }
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 10px 18px rgba(0,104,183,.18); }
.dot { display:inline-block; width:10px; height:10px; border-radius:5px; background:var(--accent); margin-right:8px; }
.radius_photo { border-radius:var(--radius); overflow:hidden; margin-left:auto; aspect-ratio:4 / 3; }
.radius_photo img { width:100%; height:100%; object-fit:cover; }
.badges { margin-top:16px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.badge { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:0 8px 18px rgba(0,0,0,.04); }
.badge_title { font-weight:800; margin:0 0 6px; display:flex; align-items:center; gap:8px; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.badge p { margin:0; color:var(--muted); font-size:15px; }
.nobr { white-space:nowrap; display:inline-block; }

.header, .tel, h1, h2, h3, .btn, .kicker, .lead, .section_desc, step_no, .step_title, summary, .company_lead, footer { font-family:var(--serif); }

/* ==========Header========== */
.header { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.88); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line); }
.header .inner { display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:12px; }
.brand { display:flex; align-items:center; gap:24px; min-width:220px; flex-shrink:0; }
.logo { height:70px; }
.brand_text { display:flex; flex-direction:column; line-height:1.2; }
.brand_name { font-weight:900; font-size:22px; }
.brand_sub  { font-weight:700; font-size:22px; color:var(--muted); margin-top:4px; }
.header_actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:right; }
.header_actions>div { display:flex; gap:10px; }

/* ==========Hero========== */
.hero_grid { display:grid; justify-content:space-between; grid-template-columns:minmax(320px, 1fr) 0.85fr; column-gap:25px; row-gap:24px; align-items:center; margin-bottom:25px; }
.kicker { color:var(--muted); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
h1 { margin:1rem 0; font-size:clamp(22px, 2.8vw, 32px); line-height:1.4; letter-spacing:.01em; max-width:500px; }
.lead { color:var(--muted); margin-bottom:2rem; font-size:18px; }
.hero .lead { max-width:450px; }
.hero_cta { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.hero_grid .radius_photo { max-width:450px; }
.hero_grid img { max-width:450px; }

/* ==========Sections========== */
section.soft { background:var(--bg-soft); }
.section_head { display:flex; align-items:center; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; margin-bottom:18px; }
.section_desc { color:var(--muted); font-size:16px; }
.card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:0 10px 24px rgba(0,0,0,.04); }
.card ul { padding-left:1.3rem; }

/* ==========Service========== */
#service .badges { grid-template-columns:repeat(4, minmax(0,1fr)); line-height:1.4; }
#service .badge { display:grid; grid-template-columns:1fr; gap:10px; }
.badge_sub { text-indent:10px; }

/* ==========OK Gallery========== */
.ok_grid { display:grid; grid-template-columns:4fr .63fr; gap:24px; align-items:flex-end; }
.ok_grid img { max-width:300px; }

/* ==========Steps========== */
section#flow { scroll-margin-top:calc(var(--header-h) + 12px); }
.steps { display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; margin-top:10px; }
.step { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; }
.step_no { width:30px; height:30px; border-radius:999px; border:2px solid rgba(0,104,183,.65); color:var(--accent); display:grid; place-items:center; font-weight:900; margin-bottom:2px; }
.step_text { margin:0; color:var(--muted); line-height:1.55; }

/* ==========FAQ========== */
.faq { display:grid; gap:10px; margin-top:10px; }
details { border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:14px 16px; }
summary { cursor:pointer; list-style:none; font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:space-between; gap:12px; line-height:1.4; }
summary::-webkit-details-marker { display:none; }
.chev { width:30px; height:30px; border-radius:var(--radius); border:1px solid var(--line); position:relative; flex:0 0 auto; transition:transform .2s ease; }
.chev::before { content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:translate(-50%,-60%) rotate(45deg); }
details[open] .chev { transform:rotate(180deg); }
.faq details p { margin:10px 0 0; color:var(--muted); font-size:14px; padding-right:10px; }

/* ==========CTA Block========== */
section#contact { scroll-margin-top:calc(var(--header-h) + 12px); }
.cta { background:var(--bg-accent); }
.cta_box { display:grid; justify-content:space-between;  grid-template-columns:1fr 270px; align-items:center; gap:25px 50px; padding:22px; border-radius:var(--radius); border:1px solid rgba(0,104,183,.18); background:linear-gradient(135deg, #fff, var(--bg-accent)); box-shadow:var(--shadow); }
.cta_box h2 { font-size:clamp(18px, 2.2vw, 24px); margin-bottom:8px; }
.cta_meta { display:grid; gap:10px; justify-items:end; }
.cta_tel { font-size:22px; font-weight:900; letter-spacing:.03em; padding:10px 14px; border-radius:var(--btn_radius); border:1px solid var(--line); background:#fff; width:fit-content; }
.cta_hours { color:var(--muted); text-align:right; }

/* ==========Company table========== */
#company .section_head { display:grid; grid-template-columns:120px auto; gap:25px; justify-content:space-between; }
.company_lead { font-size:20px; font-weight:700; }
.company-grid { display:grid; grid-template-columns:auto auto; gap:22px; justify-content:space-between; }
.table { border-collapse:collapse; overflow:hidden; border:1px solid var(--line); background:#fff; }
.table th,.table td { padding:14px; border-bottom:1px solid var(--line); vertical-align:top; }
.table th { width:160px; color:var(--muted); background:var(--bg-soft); font-weight:800; text-align:center; }
.table tr:last-child th,.table tr:last-child td { border-bottom:0; }
.company-grid img { max-width:360px; }
.company-map { margin-top:50px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.04); }
.company-map iframe { width:100%; height:450px; border:0; display:block; }

/* ==========Footer========== */
footer { padding:25px 0 100px; color:var(--muted); font-size:12px; border-top:1px solid var(--line); background:#fff; text-align:right; }

/* ==========Mobile Bottom Bar========== */
.mobilebar { position:fixed; left:0; right:0; bottom:0; width:100vw; z-index:60; padding:10px 12px; background:rgba(255,255,255,.92); border-top:1px solid var(--line); backdrop-filter:saturate(140%) blur(10px); display:none; }
.mobilebar_inner { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mobilebar_inner .btn { padding:10px 0; font-size:18px; }

/* **********Tablet(Horizontal)***********/
@media screen and (max-width:1200px) {

:root { --radius:12px; }

.brand_name, .brand_sub, .company_lead { font-size:18px; }
.brand { gap:15px; }
.header_actions, .header_actions>div { gap:5px; }
.tel, .btn { font-size:14px; padding:6px 9px; }
section { padding:50px 0; }
.lead { font-size:16px; }
.hero .lead { max-width:400px; }
.badge, details { padding:12px; }
.badge p { font-size:14px; }
p.badge_sub { font-size:13px; }
h3, summary { font-size:16px; }
.table th, .table td { padding:10px; }
.table th { width:100px; }

}

/* **********Tablet(Vertical)***********/
@media screen and (max-width:960px) {

.hero .badges { grid-template-columns: 1fr; }
.hero .badge { padding:8px 12px; display:flex; column-gap:25px; flex-wrap:wrap; }
.hero .badge h3 { flex-basis:250px; }
.hero .badge p { flex-basis:400px; }

#service .badges { grid-template-columns: repeat(2, minmax(0,1fr)); }
#service .badge { grid-template-columns:185px 1fr; }

.steps { grid-template-columns:1fr; }
.step { display:grid; grid-template-columns:200px 1fr; row-gap:5px; padding:12px; align-items:center; }
.step_header { display:flex; align-items:center; gap:5px; }
.step_no { margin-bottom:0; }
.step_header h3 { margin-bottom:0; }

}

/* **********Tablet(Vertical)***********/
@media screen and (max-width:800px) {

.mobilebar { display:block; }
.header { position:unset; }
.hero_grid { display:block; }
.hero_grid .radius_photo { margin-top:25px; }
.header_actions { display:none; }
.tel, .btn { padding:4px 8px; }
#service .badges { grid-template-columns:1fr; }
#service .badges .radius_photo { max-width:200px; }
.ok_grid { grid-template-columns:1fr 0.5fr; }
.ok_grid .badges { grid-template-columns:1fr; }
.ok_grid .badge { padding:4px 12px; }
.cta_box { grid-template-columns:1fr; }
#company .section_head { grid-template-columns:1fr; }
.company_lead { font-size:16px; }
footer { padding-bottom:150px; }

}

/* **********SmartPhone***********/
@media screen and (max-width:640px) {

.header .inner { padding:22px 0; }
.logo { height:50px; }

section { padding:25px 0; }
.hero_grid { display:block; }
.lead, .section_desc, .company_lead { font-size:14px; }
.lead { margin-bottom:1rem; }
.hero .lead { max-width:340px; }
.ok_grid { grid-template-columns:1fr; }
.ok_grid .radius_photo { width:180px; }
.step { grid-template-columns:1fr; }
.company-grid { grid-template-columns:1fr; }
.company-map iframe { height:300px; }

}