@charset "utf-8";
/* 注文住宅ページ（contents/order/）専用。クラスはすべて .od- で始まる */
/* ===== 注文住宅ページ専用（.od- で始まるクラスのみ） ===== */
.od-wrap { --od-ink:#2b2b2b; --od-sub:#666; --od-line:#e3ded6; --od-bg:#f7f4ef; --od-accent:#8a6a3f; --od-wood:#b08a5a; color:var(--od-ink); line-height:1.9; }
.od-wrap * { box-sizing:border-box; }
.od-wrap img { display:block; width:100%; height:auto; }

/* ヒーロー */
.od-hero { position:relative; margin:0 0 2.5em; border-radius:6px; overflow:hidden; background:#222; }
.od-hero img { aspect-ratio:16/10; object-fit:cover; object-position:50% 50%; opacity:.95; }
.od-hero-text { position:absolute; left:0; right:0; top:0; padding:1.4em 1.4em 3em; background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0)); color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.35); }
.od-hero-text p { margin:0; font-size:.95em; opacity:.92; }

/* 導入 */
.od-lead { font-size:1.02em; margin:0 0 6em; }
.od-trio { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:6px; margin:1.6em 0 0; padding:0; list-style:none; }
.od-trio li.od-link { background:none; padding:0; display:flex; align-items:center; justify-content:center; }
.od-link svg { display:block; overflow:visible; }
.od-ar path { fill:none; stroke:var(--od-wood); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.od-ar1 { animation:od-go 2.4s ease-in-out infinite; }
.od-ar2 { animation:od-back 2.4s ease-in-out infinite; }
@keyframes od-go { 0%,100% { transform:translateX(-3px); opacity:.55; } 50% { transform:translateX(3px); opacity:1; } }
@keyframes od-back { 0%,100% { transform:translateX(3px); opacity:1; } 50% { transform:translateX(-3px); opacity:.55; } }
@media (prefers-reduced-motion:reduce) { .od-ar1, .od-ar2 { animation:none; } }
.od-trio li { background:var(--od-bg); border-radius:6px; padding:1em .8em; text-align:center; font-size:.9em; line-height:1.6; }
.od-trio b { display:block; font-size:1.08em; color:var(--od-accent); margin-bottom:.2em; }

/* 見出し */
.od-sec { margin:0 0 6em; }
.od-label { display:block; font-size:.78em; letter-spacing:.18em; color:var(--od-wood); margin-bottom:.2em; }
.od-hero-text h2 { margin:0 0 .3em; padding:0; border:none; background:none; color:#fff; font-size:1.7em; line-height:1.45; letter-spacing:.04em; font-weight:bold; }
.od-sec h3 { margin:0 0 1em; padding:0 0 .35em; border-bottom:2px solid var(--od-line); background:none; font-size:1.35em; line-height:1.5; color:var(--od-ink); font-weight:bold; }

/* 写真 */
.od-main-photo { border-radius:6px; overflow:hidden; margin:0 0 10px; }
.od-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0 0 1.4em; }
.od-gallery figure { margin:0; border-radius:4px; overflow:hidden; }
.od-gallery img { aspect-ratio:4/3; object-fit:cover; }
.od-gallery .od-tall img { aspect-ratio:auto; height:100%; }
.od-caption { font-size:.85em; color:var(--od-sub); margin:-.4em 0 1.2em; }

/* お客様の声 */
.od-voice { border-left:3px solid var(--od-wood); background:var(--od-bg); padding:1em 1.2em; border-radius:0 6px 6px 0; margin:0 0 1em; }
.od-voice p { margin:0; }
.od-voice a { display:inline-block; margin-top:.6em; font-size:.9em; }

/* 進め方 */
.od-steps { list-style:none; margin:1.4em 0; padding:0; counter-reset:od; }
.od-steps li { position:relative; padding:0 0 1.4em 3.2em; counter-increment:od; }
.od-steps li::before { content:counter(od); position:absolute; left:0; top:.1em; width:2.1em; height:2.1em; border-radius:50%; background:var(--od-accent); color:#fff; font-weight:bold; text-align:center; line-height:2.1em; }
.od-steps li::after { content:""; position:absolute; left:1.02em; top:2.4em; bottom:.3em; border-left:1px dashed var(--od-line); }
.od-steps li:last-child::after { display:none; }
.od-steps b { display:block; font-size:1.05em; }
.od-note { background:var(--od-bg); border-radius:6px; padding:1em 1.2em; }

/* 家のつくり */
.od-spec { list-style:none; margin:1em 0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.od-spec li { border:1px solid var(--od-line); border-radius:6px; padding:.9em 1em; font-size:.95em; line-height:1.7; }
.od-spec b { display:block; color:var(--od-accent); }

/* 相談 */
.od-cta { text-align:center; background:var(--od-bg); border-radius:6px; padding:2em 1.2em; margin:0 0 2em; }
.od-cta p { margin:0 0 1.2em; }
.od-cta a.od-btn { display:inline-block; background:var(--od-accent); color:#fff; text-decoration:none; padding:.9em 2.4em; border-radius:40px; font-weight:bold; }
.od-cta a.od-btn:hover { opacity:.85; }
.od-cta small { display:block; margin-top:1em; color:var(--od-sub); }

@media (max-width:640px) {
	.od-hero img { aspect-ratio:4/5; object-position:70% 50%; } /* スマホの見せる位置：左右は1つ目の%（0%=左端・100%=右端） */
	.od-hero-text h2 { font-size:1.35em; }
	.od-trio { grid-template-columns:1fr; gap:4px; }
	.od-trio li { text-align:center; }
	.od-link svg { transform:rotate(90deg); width:30px; height:30px; }
	.od-gallery { grid-template-columns:repeat(2,1fr); gap:6px; }
	.od-spec { grid-template-columns:1fr; }
}
/* ===== ご相談：LINE・こぼのリンク、こぼに聞いてみる（2026-10-25追加） ===== */
.od-cta small a { color:var(--od-accent); text-decoration:underline; }
.od-kobo { margin:1.8em auto 0; padding-top:1.6em; border-top:1px dashed var(--od-line); max-width:560px; }
.od-kobo .od-kobo-head { display:flex; align-items:center; justify-content:center; gap:.5em; margin:0 0 .9em; font-weight:bold; color:var(--od-ink); }
.od-kobo .od-kobo-head img { width:40px; height:40px; border-radius:50%; background:#fff; object-fit:cover; }
.od-kobo-qs { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.od-kobo-qs button { appearance:none; -webkit-appearance:none; font:inherit; font-size:.9em; line-height:1.5; color:var(--od-accent); background:#fff; border:1px solid var(--od-wood); border-radius:40px; padding:.55em 1.2em; cursor:pointer; }
.od-kobo-qs button:hover { background:var(--od-accent); color:#fff; }
@media (max-width:640px) {
	.od-kobo-qs { flex-direction:column; align-items:stretch; }
	.od-kobo-qs button { width:100%; }
}