:root { --ink:#302b2b; --rose:#d67d80; --sand:#f8f2ed; --line:#eaded5; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:#302b2b; font-family:'Noto Sans JP',sans-serif; font-size:15px; line-height:1.8; background:#fffdfa; } img { display:block; max-width:100%; height:auto; } a { color:inherit; text-decoration:none; } button { font:inherit; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:'Noto Serif JP',serif; font-weight:500; line-height:1.55; } :focus-visible { outline:3px solid #d67d80; outline-offset:3px; }
.l-container { width:min(1160px, calc(100% - 48px)); margin-inline:auto; } .l-header { position:sticky; z-index:20; top:0; background:rgba(255,253,250,.96); transition:box-shadow .25s; } .l-header.is-scrolled { box-shadow:0 4px 22px rgba(61,42,33,.09); } .l-header__inner { height:84px; max-width:1280px; padding:0 28px; margin:auto; display:flex; align-items:center; gap:26px; } .l-header__brand { flex:0 1 210px; } .l-header__logo { max-height:54px; width:auto; } .l-header__name,.l-footer__brand { font-family:'Playfair Display','Noto Serif JP',serif; color:#b58a68; font-size:22px; } .l-header__nav { flex:1; } .l-header__nav ul,.l-footer ul { list-style:none; padding:0; margin:0; display:flex; gap:19px; justify-content:center; } .l-header__nav li { font-size:12px; white-space:nowrap; } .l-header__contact { text-align:right; line-height:1.2; white-space:nowrap; } .l-header__contact span,.l-header__contact a { display:block; } .l-header__contact span { font-size:9px; } .l-header__contact a,.l-footer__phone a { font-family:'Noto Serif JP',serif; font-size:22px; } .l-header__toggle { display:none; border:0; background:none; padding:8px; } .l-header__toggle span { display:block; width:22px; height:1px; background:var(--ink); margin:5px; } .l-header__toggle b { display:block; font-size:8px; font-weight:500; } .l-footer { background:#fff; border-top:1px solid var(--line); padding:44px 24px 18px; } .l-footer__inner { width:min(1160px,100%); margin:auto; display:grid; grid-template-columns:1.2fr 1fr auto; gap:32px; align-items:start; } .l-footer p,.l-footer small { font-size:11px; } .l-footer__phone { text-align:right; } .l-footer__phone small,.l-footer__phone a { display:block; } .l-footer__copy { display:block; text-align:center; margin-top:26px; color:#8b7d76; } .l-entry,.l-archive { width:min(920px,calc(100% - 48px)); margin:90px auto; } .l-entry__head { text-align:center; margin-bottom:46px; } .l-entry__head h1 { font-size:clamp(27px,4vw,42px); } .l-entry__content { max-width:760px; margin:auto; } .l-entry__content h2 { margin-top:2em; } .l-entry__image { max-width:920px; margin:0 auto 42px; border-radius:30px; overflow:hidden; } .l-archive__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.c-section-heading { text-align:center; margin-bottom:36px; } .c-section-heading__en { display:block; color:#cba38b; font-family:'Playfair Display',serif; font-style:italic; letter-spacing:.08em; font-size:21px; line-height:1.3; } .c-section-heading__title { font-size:clamp(23px,3vw,32px); margin:4px 0 0; } .c-button { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:48px; padding:11px 25px; border-radius:999px; background:var(--rose); color:#fff; font-size:13px; font-weight:700; box-shadow:0 8px 15px rgba(188,98,105,.16); transition:transform .25s,box-shadow .25s; } .c-button:hover { transform:translateY(-3px); box-shadow:0 11px 22px rgba(188,98,105,.25); } .c-button--outline { background:#fff; color:#9a6a58; border:1px solid #d9b79e; } .c-button--line { background:#86a943; } .c-button--mail { background:#d77d83; } .c-hero { position:relative; padding:clamp(44px,7vw,95px) max(24px,calc((100vw - 1220px)/2)); min-height:600px; overflow:hidden; background:linear-gradient(105deg,#fffaf7 10%,#f8eee9 100%); } .c-hero__inner { max-width:1220px; margin:auto; display:grid; grid-template-columns:1fr 1.1fr; align-items:center; } .c-hero__content { position:relative; z-index:2; padding:45px 0 80px; } .c-hero__kicker { color:#b8876d; font-size:13px; letter-spacing:.1em; } .c-hero h1 { font-size:clamp(30px,3.3vw,48px); letter-spacing:.07em; margin:10px 0 20px; } .c-hero__text { font-size:15px; } .c-hero__visual { height:490px; position:relative; border-radius:48% 46% 34% 40%; overflow:hidden; background:#e9ded6; } .c-hero__image { width:100%; height:100%; object-fit:cover; } .c-hero__seal { position:absolute; top:42px; right:32px; width:150px; aspect-ratio:1; background:rgba(255,253,250,.88); border:1px solid #cdb49b; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; line-height:1.5; } .c-hero__seal span,.c-hero__seal small { font-size:10px; } .c-hero__seal strong { font-family:'Noto Serif JP'; font-size:19px; } .c-hero__contact { position:absolute; z-index:3; bottom:34px; right:max(24px,calc((100vw - 1200px)/2)); padding:17px 28px; min-width:260px; border-radius:18px; background:rgba(255,255,255,.94); box-shadow:0 8px 28px rgba(76,49,39,.15); text-align:center; } .c-hero__contact span { display:block; font-size:10px; } .c-hero__contact a { font:27px 'Noto Serif JP'; } .c-cards { padding:78px 0; } .c-cards--trouble { background:#fff; } .c-cards__grid { display:grid; grid-template-columns:repeat(5,1fr); gap:15px; } .c-cards__item { position:relative; text-align:center; background:#fff; border-radius:24px; padding:15px 12px 18px; box-shadow:0 7px 22px rgba(82,55,42,.08); overflow:hidden; } .c-cards__image { height:154px; margin:-15px -12px 12px; border-radius:20px 20px 0 0; overflow:hidden; background:#eee3dc; } .c-cards__image img { width:100%; height:100%; object-fit:cover; } .c-cards__item h3 { font-size:14px; margin:4px 0; } .c-cards__item p { font-size:11px; line-height:1.6; margin:0; } .c-cards__icon { display:grid; place-items:center; width:48px; height:48px; margin:2px auto 10px; border:1px solid #e8c7c8; border-radius:50%; color:var(--rose); font-size:24px; } .c-cards--reason { background:linear-gradient(180deg,#fff 0,#fdf8f5 100%); } .c-cards--reason .c-cards__grid { grid-template-columns:repeat(6,1fr); } .c-cards--reason .c-cards__item { aspect-ratio:1; border-radius:50%; display:flex; flex-direction:column; justify-content:center; box-shadow:0 5px 18px rgba(82,55,42,.08); } .c-cards--flow { background:#f9ede9; } .c-cards--flow .c-cards__grid { grid-template-columns:repeat(7,1fr); gap:0; background:#fff; border-radius:18px; padding:14px; } .c-cards--flow .c-cards__item { box-shadow:none; border-radius:0; padding:12px 5px; overflow:visible; } .c-cards--flow .c-cards__item:not(:last-child)::after { content:'›'; position:absolute; right:-7px; top:48%; color:#d28d90; font-size:22px; z-index:2; } .c-cards__number { font-size:11px; color:#fff; background:var(--rose); border-radius:50%; padding:3px 7px; } .c-faq { padding:75px 0; background:linear-gradient(110deg,#f9f2ee,#fff); } .c-faq__list { max-width:900px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:14px; } .c-faq__item { background:#fff; border-radius:12px; box-shadow:0 4px 12px rgba(82,55,42,.07); } .c-faq__item summary { cursor:pointer; list-style:none; padding:17px 20px; font-size:14px; font-weight:600; } .c-faq__item summary::-webkit-details-marker { display:none; } .c-faq__item summary::after { content:'＋'; float:right; color:#b8876d; font-size:20px; } .c-faq__item[open] summary::after { content:'−'; } .c-faq__item summary span,.c-faq__item div>span { color:var(--rose); margin-right:10px; font-family:'Playfair Display'; } .c-faq__item div { display:flex; padding:0 20px 16px; font-size:13px; } .c-faq__item p { margin:0; } .c-cta { position:relative; display:flex; align-items:center; min-height:230px; background:#fff7f5; overflow:hidden; } .c-cta__image { width:34%; align-self:stretch; background:#e8ded7; } .c-cta__image img { width:100%; height:100%; object-fit:cover; } .c-cta__content { padding:35px 5%; text-align:center; flex:1; } .c-cta h2 { font-size:clamp(23px,3vw,33px); margin:0 0 6px; } .c-cta__content>p { font-size:12px; } .c-cta__actions { display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; } .c-cta__phone { font:28px 'Noto Serif JP'; padding:0 15px; } .c-post-card { border-radius:20px; overflow:hidden; background:#fff; box-shadow:0 7px 20px rgba(82,55,42,.08); } .c-post-card img { width:100%; aspect-ratio:1.45; object-fit:cover; } .c-post-card h2,.c-post-card p { padding:0 17px; } .c-post-card h2 { font-size:17px; } .c-post-card p { color:#a28a80; font-size:12px; margin-top:14px; } .c-to-top { position:fixed; right:22px; bottom:22px; z-index:10; display:grid; place-items:center; width:45px; height:45px; border:1px solid #d9b79e; border-radius:50%; background:#fff; color:#b8876d; opacity:0; pointer-events:none; transition:.2s; } .c-to-top.is-visible { opacity:1; pointer-events:auto; } [data-reveal] { opacity:0; transform:translateY(20px); transition:opacity .7s ease,transform .7s ease; } [data-reveal].is-visible { opacity:1; transform:none; }
@media (max-width:900px) { .l-header__inner { height:68px; padding:0 18px; } .l-header__nav { display:none; position:absolute; left:0; right:0; top:68px; padding:20px; background:#fffdfa; box-shadow:0 12px 20px rgba(0,0,0,.08); } .l-header__nav.is-open { display:block; } .l-header__nav ul { display:block; } .l-header__nav li { padding:10px; text-align:center; } .l-header__contact { margin-left:auto; } .l-header__contact span { display:none; } .l-header__contact a { font-size:17px; } .l-header__toggle { display:block; } .c-cards__grid,.c-cards--reason .c-cards__grid { grid-template-columns:repeat(3,1fr); } .c-cards--flow .c-cards__grid { grid-template-columns:repeat(4,1fr); } .l-footer__inner { grid-template-columns:1fr 1fr; } .l-footer__phone { text-align:left; } }
@media (max-width:600px) { .l-container { width:min(100% - 32px,1160px); } .l-header__brand { max-width:180px; } .c-hero { padding:35px 16px 128px; } .c-hero__inner { display:flex; flex-direction:column-reverse; align-items:stretch; } .c-hero__visual { height:330px; border-radius:42% 42% 25% 25%; } .c-hero__seal { width:115px; right:18px; top:20px; } .c-hero__seal strong { font-size:15px; } .c-hero__content { padding:25px 7px 0; } .c-hero h1 { font-size:29px; } .c-hero__contact { bottom:28px; left:24px; right:24px; } .c-cards { padding:58px 0; } .c-cards__grid { display:flex; overflow:auto; margin-right:-16px; padding:5px 16px 14px 0; scroll-snap-type:x mandatory; } .c-cards__item { min-width:166px; scroll-snap-align:start; } .c-cards--reason .c-cards__item { min-width:142px; } .c-cards--flow .c-cards__grid { display:grid; grid-template-columns:1fr 1fr; overflow:visible; margin:0; padding:8px; } .c-cards--flow .c-cards__item { min-width:0; } .c-cards--flow .c-cards__item:not(:last-child)::after { display:none; } .c-faq__list { grid-template-columns:1fr; } .c-cta { display:block; } .c-cta__image { width:100%; height:160px; } .c-cta__content { padding:29px 16px; } .c-cta__phone { width:100%; font-size:26px; } .c-cta__actions .c-button { flex:1; padding-inline:12px; } .l-footer__inner,.l-archive__grid,.c-post-grid__items { grid-template-columns:1fr; } .l-footer nav { display:none; } }
.c-post-grid { padding:76px 0; background:#fffdfa; } .c-post-grid__items { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .c-post-grid__more { margin-top:30px; text-align:center; }
.c-breadcrumb { margin-bottom:24px; color:#97867d; font-size:12px; } .c-breadcrumb span { margin-inline:8px; }
.l-page-design { width:min(1160px,calc(100% - 48px)); margin:28px auto -8px; }
.c-hero__badges { display:flex; gap:10px; padding:0; margin:24px 0 0; list-style:none; } .c-hero__badges li { min-width:112px; padding:8px 12px; background:rgba(255,255,255,.82); border-radius:12px; box-shadow:0 4px 12px rgba(82,55,42,.08); } .c-hero__badges strong,.c-hero__badges span { display:block; font-size:10px; line-height:1.55; } .c-hero__badges strong { color:#b56c6e; }
@media (max-width:600px) { .c-hero__badges { overflow:auto; margin-right:-16px; padding-right:16px; } .c-hero__badges li { flex:0 0 120px; } }
@media (max-width:600px) { .c-post-grid { padding:58px 0; } .c-post-grid__items { grid-template-columns:1fr; } }