@charset "UTF-8";
/* =========================================================
みうら不動産 / 土地の分譲サービス (/land-sale)
実サイトのトンマナに準拠：白基調・ゴシック体
オレンジ(ロゴ/連絡)＋ティール(主要アクション)＋赤(価格)
ブランドカラーは :root で一括調整可
※ヘッダー(.site-header系)・フッター(.site-footer系)の
スタイルは本テンプレートに含まれないため除外しています。
========================================================= */
:root{
--teal:#3f8c86; /* 主要アクション・見出しアクセント */
--teal-dark:#33706b;
--teal-deep:#2b5b57; /* 濃ティール（ボタン/オーバーレイ） */
--orange:#e6713a; /* ロゴの屋根色・連絡先・主CTA */
--orange-dark:#cf5f2c;
--red:#d23f2d; /* 価格・強調 */
--ink:#333333;
--ink-soft:#6b6b6b;
--base:#ffffff;
--gray:#f5f4f1; /* セクション背景 */
--gray2:#ecebe6;
--line:#e3e1da;
--footer:#efeeea;
--radius:8px;
--maxw:1140px;
}
/* グローバル汚染を防ぐため、すべて .land-sale 配下に限定。
本文は …
で囲むこと。 */
html{scroll-behavior:smooth}
.land-sale *{box-sizing:border-box;margin:0;padding:0}
.land-sale{
font-family:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN","メイリオ",sans-serif;
color:var(--ink);background:var(--base);line-height:1.85;font-size:15px;
-webkit-font-smoothing:antialiased;
}
.land-sale img{max-width:100%;display:block}
.land-sale a{color:#fff;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
/* 見出し共通：英語ラベル＋日本語タイトル＋下線アクセント */
.eyebrow{
font-size:.7rem;font-weight:700;letter-spacing:.22em;color:var(--teal);
text-transform:uppercase;display:block;margin-bottom:.7em;
}
.section-title{
font-weight:700;font-size:clamp(1.5rem,3.2vw,2rem);color:var(--ink);
line-height:1.45;letter-spacing:.02em;
}
.section-head{text-align:center;max-width:40em;margin:0 auto 48px}
.section-head .accent{width:54px;height:3px;background:var(--orange);margin:20px auto 0;border-radius:2px}
/* ---------- Breadcrumb ---------- */
.crumb{background:var(--gray)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5em;font-size:.76rem;color:var(--ink-soft);padding:11px 0}
.crumb li::after{content:"›";margin-left:.5em;color:var(--teal)}
.crumb li:last-child::after{content:""}
.crumb li:last-child{color:var(--ink);font-weight:700}
/* No Sidebar & Centered Layout Template */
.no-sidebar .content-area,
.site-content .centered-content-area, .sidebar-left .site-content .centered-content-area {
max-width: 100%;
}
.site-content{
padding: 0;
}
/* ---------- S1 Hero（全幅写真＋白文字オーバーレイ） ---------- */
.hero{position:relative;min-height:440px;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero .bg{
position:absolute;inset:0;
background:linear-gradient(120deg,#cdd6cf 0%,#aebcb0 50%,#9fb1ab 100%);
}
.hero .bg::after{
/*content:"イメージ写真（土地・住宅／全幅）";*/position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);font-size:.85rem;letter-spacing:.1em;
}
.hero .bg-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero .overlay{position:absolute;inset:0;z-index:0;/*background:#517380;*/background-image:url(http://miurafudo-miyagi.jp/wp-content/uploads/fv_land-sale-1.jpg);background-size:cover;}
.hero .inner{position:relative;padding:64px 0;max-width:42em}
.hero .eyebrow{color:#ffd8b8}
.hero h1{font-weight:900;font-size:clamp(1.85rem,4.4vw,2.9rem);line-height:1.4;letter-spacing:.03em;margin-bottom:.45em;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.hero .lead{font-size:clamp(1rem,1.4vw,1.15rem);font-weight:700;margin-bottom:.5em}
.hero .sub{font-size:.92rem;font-weight:500;line-height:2;color:#eaf1ee;margin-bottom:2em;max-width:32em}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;padding:14px 30px;border-radius:6px;font-weight:700;font-size:.92rem;transition:transform .18s,background .2s,box-shadow .2s,color .2s;cursor:pointer;border:none}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 10px 22px -12px rgba(230,113,58,.9)}
.btn-primary:hover{background:var(--orange-dark)}
.btn-teal{background:var(--teal-deep);color:#fff}
.btn-teal:hover{background:var(--teal)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.65)}
.btn-ghost:hover{background:rgba(255,255,255,.22)}
.btn-line{background:#fff;color:var(--teal-dark);border:1.5px solid var(--teal)}
.btn-line:hover{background:var(--teal);color:#fff}
.btn-sm{padding:11px 22px;font-size:.82rem}
/* ---------- generic section ---------- */
.section{padding:78px 0}
.section.alt{background:var(--gray)}
/* ---------- S2 Features（各カード上部に画像枠） ---------- */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature{background:var(--base);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-align:left;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.feature:hover{transform:translateY(-5px);box-shadow:0 16px 32px -22px rgba(43,91,87,.5)}
/* 画像枠：実画像に差し替えるときは中身を 
に置き換えるだけ */
.feature .imgframe{aspect-ratio:4/3;/*background:linear-gradient(150deg,#e7e3d8,#d6d0c2)*/;display:flex;align-items:center;justify-content:center;color:#9a917c;font-size:.74rem;text-align:center;padding:10px;position:relative}
.feature .img01{background-image:url(http://miurafudo-miyagi.jp/wp-content/uploads/28652990_m.jpg);background-size:cover;}
.feature .img02{background-image:url(http://miurafudo-miyagi.jp/wp-content/uploads/24843613_m.jpg);background-size:cover;}
.feature .img03{background-image:url(http://miurafudo-miyagi.jp/wp-content/uploads/34808603_m.jpg);background-size:cover;}
.feature .img04{background-image:url(http://miurafudo-miyagi.jp/wp-content/uploads/34666801_m.jpg);background-size:cover;}
.feature .imgframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.feature .pad{padding:0 22px 26px;position:relative}
.feature .ic{width:50px;height:50px;border-radius:13px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 18px -10px rgba(43,91,87,.5);display:flex;align-items:center;justify-content:center;margin:-25px 0 14px;position:relative;z-index:2}
.feature .ic svg{width:26px;height:26px;stroke:var(--teal);fill:none;stroke-width:1.7}
.feature h3{font-weight:700;font-size:1.05rem;color:var(--teal-dark);margin-bottom:.5em;line-height:1.5}
.feature p{font-size:.83rem;color:var(--ink-soft);line-height:1.9}
/* ---------- S3 Land listings ---------- */
.listing{display:grid;grid-template-columns:300px 1fr;background:var(--base);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:22px;transition:box-shadow .25s}
.listing:hover{box-shadow:0 16px 34px -24px rgba(43,91,87,.55)}
.listing .photo{background:linear-gradient(150deg,#e7e3d8,#d6d0c2);min-height:210px;display:flex;align-items:center;justify-content:center;color:#9a917c;font-size:.8rem;position:relative}
.listing .photo .badge{position:absolute;top:13px;left:13px;font-size:.72rem;font-weight:700;padding:5px 14px;border-radius:4px;color:#fff;letter-spacing:.03em}
.badge.sale{background:var(--teal)}
.badge.talk{background:var(--orange)}
.listing .body{padding:24px 28px;display:flex;flex-direction:column}
.listing .body h3{font-weight:700;font-size:1.25rem;color:var(--ink);margin-bottom:.25em}
.listing .body .addr{font-size:.84rem;color:var(--ink-soft);margin-bottom:16px}
.spec{display:flex;flex-wrap:wrap;gap:30px;padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px}
.spec div{display:flex;flex-direction:column}
.spec .lbl{font-size:.66rem;color:var(--ink-soft);letter-spacing:.06em;margin-bottom:1px}
.spec .val{font-weight:700;font-size:1.18rem;color:var(--ink)}
.spec .val.price{color:var(--red);font-size:1.32rem}
.spec .val.sale{color:var(--teal)}
.spec .val.talk{color:var(--orange)}
.listing .actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:auto}
.map-embed{margin-top:8px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:repeating-linear-gradient(45deg,#eceadf 0 16px,#e4e1d3 16px 32px);height:300px;display:flex;align-items:center;justify-content:center;color:#9a917c;font-size:.85rem}
/* ---------- S4 Flow ---------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{background:var(--base);border:1px solid var(--line);border-radius:var(--radius);padding:28px 22px;position:relative}
.step .n{width:46px;height:46px;border-radius:50%;background:var(--teal);color:#fff;font-weight:900;font-size:1.3rem;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.step h3{font-weight:700;font-size:1rem;color:var(--teal-dark);margin-bottom:.5em;line-height:1.5}
.step p{font-size:.82rem;color:var(--ink-soft);line-height:1.9}
.step .arrow{position:absolute;right:-11px;top:46px;color:var(--orange);font-size:1.5rem;font-weight:700;z-index:2}
.step:last-child .arrow{display:none}
/* ---------- S5 FAQ ---------- */
.faq-list{max-width:840px;margin:0 auto}
.faq{background:var(--base);border:1px solid var(--line);border-radius:6px;margin-bottom:12px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;gap:15px;align-items:flex-start;font-weight:700;font-size:.97rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{flex:none;width:28px;height:28px;border-radius:5px;background:var(--teal);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:.9rem}
.faq summary .qt{flex:1}
.faq summary .chev{flex:none;transition:transform .3s;color:var(--orange);font-size:1rem;margin-top:3px}
.faq[open] summary .chev{transform:rotate(180deg)}
.faq .a{padding:0 24px 22px 67px;font-size:.88rem;color:var(--ink-soft);line-height:2}
.faq .a::before{content:"A";display:inline-flex;width:24px;height:24px;border-radius:5px;background:var(--gray2);color:var(--ink-soft);font-weight:900;align-items:center;justify-content:center;font-size:.8rem;margin:0 10px -6px -34px}
/* ---------- S6 Contact CTA ---------- */
.cta{background:var(--teal-deep);color:#fff;position:relative;overflow:hidden; margin-bottom: 60px;}
.cta::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 38px,transparent 38px 76px)}
.cta-inner{position:relative;text-align:center;padding:70px 0}
.cta h2{font-weight:900;font-size:clamp(1.45rem,3.2vw,2rem);line-height:1.5;margin-bottom:.5em}
.cta p{color:#d2e0dd;font-size:.92rem;margin-bottom:1.8em;line-height:2}
.cta-tel{margin-bottom:28px}
.cta-tel a{font-weight:900;font-size:clamp(2rem,5vw,2.7rem);color:#fff;letter-spacing:.03em;display:inline-block}
.cta-tel small{display:block;font-size:.78rem;color:#d2e0dd;letter-spacing:.1em;margin-top:.4em}
.cta-btns{display:flex;flex-wrap:wrap;gap:13px;justify-content:center}
/* ---------- reveal（スクロール表示アニメーション） ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.btn:hover,.feature:hover{transform:none}}
/* ---------- Responsive ---------- */
@media(max-width:980px){
.sm{display:none;}
.md{display:block;}
.features{grid-template-columns:repeat(2,1fr)}
.flow{grid-template-columns:repeat(2,1fr)}
.step .arrow{display:none}
}
@media(max-width:760px){
.md{display:none;}
.sm{display:block;}
.features{grid-template-columns:1fr}
.listing{grid-template-columns:1fr}
.listing .photo{min-height:180px}
.flow{grid-template-columns:1fr}
.section{padding:54px 0}
.hero .inner {max-width: 23em;}
}
@media only screen and (max-width: 60em) {
#commonCnt {display:none;}
}
/* =========================================================
親テーマ Light3 (style.css) との干渉打ち消し
※テーマ側の要素セレクタ（a / p / h1）が本文に
染み込むのを、ここで個別に上書きして無効化します。
========================================================= */
/* 1) a:hover{transform:translateX(5px)} の打ち消し
パンくず・電話番号リンクがホバーで右にずれるのを防ぐ
（.btn系は .btn:hover が勝つため対象外） */
.crumb a:hover,
.cta-tel a:hover{transform:none}
/* 2) p{margin-bottom:1.75em} の打ち消し
特徴カード・流れ内テキスト下の余分な余白を除去 */
.feature p,
.step p{margin-bottom:0}
/* 3) h1{margin:.55em 0} の上マージン打ち消し
ヒーロー見出し上の余白を除去 */
.hero h1{margin-top:0}
/* 4) a img:hover{filter:brightness(90%)} の打ち消し（任意）
画像枠を ![]()
に差し替えた後のホバー暗転を防ぐ */
.feature .imgframe a:hover img,
.listing .photo a:hover img,
.hero a:hover img{filter:none}
/* 5) wh-style.css の a:hover/focus/active{color:#2277ff} の打ち消し
本文内リンクがホバーで青く変色するのを防ぐ */
.land-sale a:hover,
.land-sale a:focus,
.land-sale a:active{color:inherit}
/* ただしボタン・電話番号リンクはホバーでも文字色を維持 */
.land-sale .btn-primary:hover,
.land-sale .btn-teal:hover,
.land-sale .btn-ghost:hover,
.land-sale .btn-line:hover{color:#fff}
.land-sale .cta-tel a:hover{color:#fff}
/* =========================================================
Contact Form 7 用スタイル（CTA内のフォーム）
.land-sale スコープ内なのでヘッダー/フッターには影響しません
========================================================= */
.land-sale .cta-head{text-align:center;margin-bottom:34px}
.land-sale .contact-card{background:#fff;border-radius:var(--radius);padding:38px 40px;max-width:680px;margin:0 auto;text-align:left;box-shadow:0 20px 50px -28px rgba(0,0,0,.55)}
.land-sale .form-row{margin-bottom:20px}
.land-sale .form-label{display:block;font-weight:700;font-size:.9rem;color:var(--ink);margin-bottom:8px}
.land-sale .form-label .req{display:inline-block;background:var(--red);color:#fff;font-size:.64rem;font-weight:700;padding:2px 8px;border-radius:3px;margin-left:8px;vertical-align:middle;letter-spacing:.04em}
.land-sale .form-label .opt{display:inline-block;background:var(--gray2);color:var(--ink-soft);font-size:.64rem;font-weight:700;padding:2px 8px;border-radius:3px;margin-left:8px;vertical-align:middle;letter-spacing:.04em}
/* 入力欄 */
.land-sale .contact-card input[type=text],
.land-sale .contact-card input[type=email],
.land-sale .contact-card input[type=tel],
.land-sale .contact-card textarea{width:100%;border:1px solid var(--line);border-radius:6px;padding:13px 15px;font-size:.92rem;font-family:inherit;color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s}
.land-sale .contact-card input[type=text]:focus,
.land-sale .contact-card input[type=email]:focus,
.land-sale .contact-card input[type=tel]:focus,
.land-sale .contact-card textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(63,140,134,.15)}
.land-sale .contact-card textarea{min-height:120px;resize:vertical;line-height:1.8}
.land-sale .field-note{font-size:.78rem;color:var(--ink-soft);margin-top:7px;line-height:1.7}
/* ラジオ（ご相談内容） */
.land-sale .wpcf7-radio{display:flex;flex-direction:column;gap:10px}
.land-sale .wpcf7-radio .wpcf7-list-item{margin:0}
.land-sale .wpcf7-radio .wpcf7-list-item label{display:flex;color:#333333b5;align-items:center;gap:11px;cursor:pointer;border:1px solid var(--line);border-radius:6px;padding:13px 16px;transition:border-color .2s,background .2s;font-size:.9rem;font-weight:500}
.land-sale .wpcf7-radio .wpcf7-list-item label:hover{border-color:var(--teal);background:var(--gray)}
.land-sale .wpcf7-radio input[type=radio]{accent-color:var(--teal);width:18px;height:18px;flex:none;margin:0}
/* 送信ボタン */
.land-sale .contact-card .wpcf7-submit{background:var(--orange);color:#fff;border:none;border-radius:6px;font-weight:700;font-size:1rem;padding:15px 40px;cursor:pointer;transition:background .2s,transform .18s;display:block;margin:10px auto 0;min-width:240px}
.land-sale .contact-card .wpcf7-submit:hover{background:var(--orange-dark);transform:translateY(-2px)}
/* CF7のバリデーション・応答メッセージ */
.land-sale .wpcf7-not-valid-tip{color:var(--red);font-size:.76rem;margin-top:5px}
.land-sale .wpcf7-response-output{border-radius:6px;font-size:.85rem;margin:18px 0 0!important;padding:12px 16px!important;line-height:1.7}
.land-sale .contact-card .wpcf7-spinner{margin:14px auto 0;display:block}
/* お急ぎ電話 */
.land-sale .cta-or{text-align:center;color:#d2e0dd;font-size:.85rem;margin:32px 0 8px}
/* スマホ調整 */
@media(max-width:760px){
.land-sale .contact-card{padding:26px 20px}
}
.miura-land-section {
--mls-teal: #5b8b7d;
--mls-teal-deep: #437064;
--mls-orange: #cc6a38;
--mls-orange-deep: #b85a2c;
--mls-ink: #3a3a3a;
--mls-gray: #8a8a8a;
--mls-bg: #f4f2ee;
--mls-card: #ffffff;
--mls-line: #ece8e1;
box-sizing: border-box;
/*background: var(--mls-bg);*/
padding: 0px 24px 96px;
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
-webkit-font-smoothing: antialiased;
}
.miura-land-section *,
.miura-land-section *::before,
.miura-land-section *::after { box-sizing: border-box; }
.mls-inner {
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.mls-eyebrow {
margin: 0 0 14px;
color: var(--mls-teal);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.28em;
text-indent: 0.28em;
}
.mls-title {
margin: 0;
color: var(--mls-ink);
font-size: 34px;
font-weight: 700;
letter-spacing: 0.04em;
}
.mls-rule {
display: block;
width: 56px;
height: 3px;
margin: 22px auto 0;
border-radius: 2px;
background: var(--mls-orange);
}
/* ---- 非公開ご案内カード ---- */
.mls-card {
position: relative;
width:50%;
text-align:center;
margin: 48px auto 0;
padding: 64px 48px 56px;
background: var(--mls-card);
border: 1px solid var(--mls-line);
border-radius: 14px;
box-shadow: 0 18px 40px -24px rgba(67, 112, 100, 0.28);
overflow: hidden;
animation: mls-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* 上辺のさりげないティールのアクセントライン */
.mls-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: linear-gradient(90deg, var(--mls-teal), var(--mls-teal-deep));
}
.mls-icon {
width: 72px;
height: 72px;
margin: 0 auto 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(91, 139, 125, 0.10);
}
.mls-icon svg { width: 32px; height: 32px; }
.mls-badge {
display: inline-block;
margin: 0 0 22px;
padding: 6px 16px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--mls-teal-deep);
background: rgba(91, 139, 125, 0.12);
border-radius: 999px;
}
.mls-headline {
margin: 0 auto 20px;
max-width: 22em;
color: var(--mls-ink);
font-size: 25px;
font-weight: 700;
line-height: 1.55;
letter-spacing: 0.02em;
}
.mls-body {
margin: 0 auto 36px;
max-width: 34em;
color: var(--mls-gray);
font-size: 15.5px;
line-height: 2.0;
text-align: center; /* 短文なので中央寄せ。長くなる場合は left へ */
}
.mls-cta {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 16px 38px;
color: #fff;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.04em;
text-decoration: none;
background: var(--mls-orange);
border-radius: 8px;
box-shadow: 0 10px 22px -10px rgba(204, 106, 56, 0.6);
transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.mls-cta svg { width: 20px; height: 20px; color: #fff; }
.mls-cta:hover {
background: var(--mls-orange-deep);
transform: translateY(-2px);
box-shadow: 0 14px 26px -10px rgba(204, 106, 56, 0.7);
}
.mls-cta:focus-visible {
outline: 3px solid rgba(204, 106, 56, 0.45);
outline-offset: 3px;
}
.mls-note {
margin: 22px 0 0;
color: #aaa49b;
font-size: 12.5px;
letter-spacing: 0.02em;
}
@keyframes mls-rise {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---- レスポンシブ ---- */
@media (max-width: 640px) {
.miura-land-section { padding: 0 0 68px; }
.mls-title { font-size: 26px; }
.mls-card { width:100%; margin-top: 36px; padding: 30px 20px 23px; }
.land-sale a{font-size: 15px; color: #fff;}
.mls-cta svg{display:none;}
.mls-icon { width: 64px; height: 64px; }
.mls-headline { font-size: 21px; }
.mls-body { font-size: 14px; line-height: 1.95; text-align: left;}
.mls-cta { width: 100%; justify-content: center; padding: 16px 24px; }
.mls-note{ text-align: left;}
}
@media (prefers-reduced-motion: reduce) {
.mls-card { animation: none; }
.mls-cta { transition: none; }
}