/* === theme.css === */ @charset "UTF-8"; /* CSS Document */ :root{ --primary:#e9534f; /* 赤（強調のみ） */ --accent:#ffb400; /* 薄い青の基調（ヘッダー・フッター以外） */ --ui-blue:#eaf4ff; --ui-blue-2:#f4f9ff; --ui-blue-line:rgba(24,78,140,.12); --text-main:#333; --text-muted:#777; --bg:var(--ui-blue-2); --bg-alt:#ffffff; --card-bg:#fff; --border-soft:#e2e2e7; --radius-lg:16px; --shadow-soft:0 10px 25px rgba(0,0,0,.08); --border-color: var(--border-soft); --maxw:1100px; --inner-pad:16px; --dark:#111319; /* ヘッダー/フッター専用 */ --dark-border:rgba(255,255,255,.08); --pc-break:901px; } /* === base.css === */ @charset "UTF-8"; /* CSS Document */ /* ===== Base ===== */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック体","YuGothic","メイリオ",sans-serif; color:var(--text-main); background:var(--bg); line-height:1.7; font-size:14px; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button{font:inherit} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 } /* ===== Layout ===== */ /* NOTE (WP対応): WordPressは固定ページでを付与します。静的サイトでは `.page` をレイアウトラッパーとして使用していたため、そのままだと body.page にも効いてヘッダー/フッターの横幅が崩れます。そこで、ラッパー用 `.page` は元の仕様どおり維持しつつ、body.page には効かないように body.page をリセットして衝突を回避します。 */ .page{max-width:var(--maxw);margin:0 auto;padding:0 var(--inner-pad)} body.page{max-width:none;margin:0;padding:0} .section{padding:54px 0} .section--alt{background:var(--bg-alt)} /* ===== Card ===== */ .card{ background:var(--card-bg); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-soft) } /* ===== Reveal ===== */ .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease} .reveal.is-visible{opacity:1;transform:none} /* ===== Section Head ===== */ .section-head{ display:grid; grid-template-columns: 1fr auto; column-gap:16px; align-items:start; padding:0 0 14px; border-bottom:1px solid rgba(0,0,0,.14); margin:0 0 18px; } .sec-title-wrap{min-width:0} .sec-title{ margin:0; font-size:28px; font-weight:1000; letter-spacing:.04em; line-height:1.25; } .sec-title-en{ margin:6px 0 0; font-size:12px; font-weight:900; letter-spacing:.22em; color:var(--primary); opacity:.92; text-transform:uppercase; } .section-caption{ margin:0; color:var(--text-muted); line-height:1.9; text-align:right; padding-top:4px; max-width:48ch; justify-self:end; } @media (max-width:900px){ .section-head{grid-template-columns:1fr;row-gap:10px} .section-caption{text-align:left;padding-top:0;max-width:unset;justify-self:start} } @media (max-width:600px){ .sec-title{font-size:22px} } /* === header-nav.css === */ @charset "UTF-8"; /* ===== Top Info Bar ===== */ .top-info{ background:var(--ui-blue); border-bottom:1px solid var(--ui-blue-line); color:#1f2937; font-size:12px; } .top-info-inner{ max-width:var(--maxw); margin:0 auto; padding:8px var(--inner-pad); display:flex; align-items:center; justify-content:center; gap:10px; text-align:center; } /* CSS Document */ /* ===== Header (dark keep) ===== */ .header{ background:var(--dark); color:#f4f5f7; } .header-inner{ max-width:var(--maxw); margin:0 auto; padding:14px var(--inner-pad); display:flex; align-items:center; justify-content:space-between; gap:14px; } .brand{display:flex;align-items:center;gap:10px;min-width:0} .brand-text{display:flex;flex-direction:column;gap:2px;min-width:0} .brand-name{font-size:14px;font-weight:900;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .brand-sub{font-size:11px;color:#b5b7c0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Logo click area fix */ .brand{display:inline-flex;flex:0 0 auto;align-self:center;padding:0;} .brand-name{display:block;line-height:0;} .brand-name img{display:block;height:64px;width:auto;max-width:360px;} @media (max-width:600px){.brand-name img{height:56px;max-width:320px;}} .header-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end} .btn{ display:inline-flex;align-items:center;gap:8px; padding:10px 14px;border-radius:999px; font-weight:900;font-size:12px; border:1px solid rgba(255,255,255,.22); color:#f4f5f7;background:rgba(255,255,255,.06); transition:transform .15s ease, background .2s ease, box-shadow .2s ease; white-space:nowrap; } .btn:hover{transform:none;background:rgba(255,255,255,.10);box-shadow:0 10px 22px rgba(0,0,0,.18)} .btn--primary{border:none;color:var(--dark);background:linear-gradient(135deg,var(--primary),var(--accent))} @media (max-width:900px){ .header-actions{display:none} .brand-sub{display:none} } /* ===== Hamburger ===== */ .hamburger{ width:44px;height:44px;border-radius:12px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:#f4f5f7; display:inline-flex;align-items:center;justify-content:center; cursor:pointer; transition:transform .15s ease, background .2s ease, box-shadow .2s ease; } .hamburger:hover{transform:none;background:rgba(255,255,255,.10);box-shadow:0 10px 22px rgba(0,0,0,.18)} .hamburger-lines{position:relative;width:18px;height:12px} .hamburger-lines span{ position:absolute;left:0;right:0;height:2px;border-radius:2px;background:#fff; transition:transform .2s ease, top .2s ease, opacity .2s ease; } .hamburger-lines span:nth-child(1){top:0} .hamburger-lines span:nth-child(2){top:5px} .hamburger-lines span:nth-child(3){top:10px} .hamburger[aria-expanded="true"] .hamburger-lines span:nth-child(1){top:5px;transform:rotate(45deg)} .hamburger[aria-expanded="true"] .hamburger-lines span:nth-child(2){opacity:1} .hamburger[aria-expanded="true"] .hamburger-lines span:nth-child(3){top:5px;transform:rotate(-45deg)} /* PC版ではハンバーガーメニューを表示しない ※CSSカスタムプロパティはmedia queryで使えないブラウザがあるため数値で固定 */ @media (min-width:901px){ .hamburger{display:none !important} } /* ===== Global Nav (PC) ===== */ .gnav-wrap{ background:linear-gradient(180deg,var(--ui-blue) 0%, #ffffff 100%); border-bottom:1px solid var(--ui-blue-line); } .gnav{ max-width:var(--maxw); margin:0 auto; padding:0 var(--inner-pad); display:flex; overflow:auto; } .gnav a{ display:inline-flex;align-items:center;gap:10px; padding:14px 18px; font-weight:900;font-size:14px;color:#222; border-right:1px solid rgba(0,0,0,.08); transition:background .2s ease, color .2s ease; white-space:nowrap; } .gnav a:first-child{border-left:1px solid rgba(0,0,0,.08)} .gnav a:hover{background:#fff;color:var(--primary)} .nav-ico{ width:26px;height:26px;border-radius:10px; display:inline-flex;align-items:center;justify-content:center; background:rgba(24,78,140,.10); border:1px solid rgba(24,78,140,.18); color:#184e8c; font-size:14px;flex:0 0 auto; } @media (max-width:900px){.gnav-wrap{display:none !important}} /* ===== Drawer (mobile) ===== */ .drawer-backdrop{ position:fixed;inset:0; background:rgba(0,0,0,.45); opacity:0;pointer-events:none; transition:opacity .2s ease; z-index:9998; } .drawer{ position:fixed;top:0;right:0;height:100%; width:min(86vw, 360px); background:#fff; box-shadow:-20px 0 50px rgba(0,0,0,.18); transform:translateX(105%); transition:transform .25s ease; z-index:9999; display:flex;flex-direction:column; } .drawer-head{ padding:14px 14px 10px; border-bottom:1px solid rgba(0,0,0,.08); display:flex;align-items:center;justify-content:space-between;gap:10px; } .drawer-title{font-weight:900} .drawer-close{ width:40px;height:40px;border-radius:12px; border:1px solid rgba(0,0,0,.08); background:#fff;cursor:pointer; } .drawer-nav{padding:10px 8px 18px;overflow:auto} .drawer-nav a{ display:flex;align-items:center;gap:10px; padding:12px 12px;border-radius:12px; font-weight:900;color:#222; transition:background .2s ease; } .drawer-nav a:hover{background:rgba(24,78,140,.08)} .drawer-backdrop.is-open{opacity:1;pointer-events:auto} .drawer.is-open{transform:translateX(0)} @media (min-width:901px){.drawer,.drawer-backdrop{display:none !important}} /* ===== Footer (dark keep) ===== */ .footer{ background:var(--dark); color:#f4f5f7; padding:32px 16px 18px; border-top:1px solid var(--dark-border); } /* ===== Mobile Fixed Bottom Bar ===== */ .mobile-bar{ position:fixed;left:0;right:0;bottom:0; display:none;z-index:9997;background:#fff; border-top:1px solid rgba(0,0,0,.08); box-shadow:0 -10px 30px rgba(0,0,0,.10); padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); } .mobile-bar-inner{ max-width:var(--maxw);margin:0 auto; display:grid;grid-template-columns:1fr 1fr;gap:10px; } .mobile-bar a{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 12px;border-radius:14px;font-weight:900; border:1px solid rgba(0,0,0,.08);background:#fff;color:#222; transition:transform .15s ease, box-shadow .2s ease;white-space:nowrap; } .mobile-bar a:hover{transform:none;box-shadow:0 10px 22px rgba(0,0,0,.08)} .mobile-bar a.primary{border:none;color:#111319;background:linear-gradient(135deg,var(--primary),var(--accent))} @media (max-width:900px){ .mobile-bar{display:block} body{padding-bottom:86px;} } /* === sections.css === */ @charset "UTF-8"; /* CSS Document */ /* ===== Slideshow ===== */ .slideshow-section{padding:28px 0 44px;background:#fff} .slideshow-shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--inner-pad)} .slideshow{ position:relative;width:100%;height:560px; display:flex;align-items:center;justify-content:center;overflow:visible; } .slide-main{ width:100%;height:100%;border-radius:18px;overflow:hidden; box-shadow:0 18px 40px rgba(0,0,0,.12); border:1px solid rgba(0,0,0,.06); background:#eee;position:relative;z-index:3; } .slide-main img{ width:100%;height:100%;object-fit:cover; transform:scale(1); animation: slideZoom 6s ease-in-out infinite; will-change: transform; } @keyframes slideZoom{0%{transform:scale(1)}100%{transform:scale(1.08)}} .slide-side{ position:absolute;top:16px;width:45%;height:448px;border-radius:18px;overflow:hidden; border:1px solid rgba(0,0,0,.05);background:#eee;z-index:1;opacity:.55; } .slide-side img{width:100%;height:100%;object-fit:cover} .slide-left{left:-18%} .slide-right{right:-18%} .slide-left::after,.slide-right::after{content:"";position:absolute;inset:0;pointer-events:none} .slide-left::after{background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.88) 78%, rgba(255,255,255,1) 100%)} .slide-right::after{background:linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.88) 78%, rgba(255,255,255,1) 100%)} .slide-controls{position:absolute;inset:auto 0 14px 0;display:flex;justify-content:center;gap:10px;z-index:5} .dot{width:10px;height:10px;border-radius:999px;border:1px solid rgba(0,0,0,.25);background:rgba(0,0,0,.08);cursor:pointer;transition:transform .15s ease, background .2s ease} .dot.active{background:rgba(233,83,79,.55);border-color:rgba(233,83,79,.55);transform:scale(1.15)} .slide-arrows{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none;z-index:6} .arrow{ pointer-events:auto;width:44px;height:44px;border-radius:999px;border:1px solid rgba(0,0,0,.10); background:rgba(255,255,255,.9);box-shadow:0 10px 24px rgba(0,0,0,.10); display:inline-flex;align-items:center;justify-content:center;margin:0 10px;cursor:pointer;transition:transform .15s ease;font-size:16px; } .arrow:hover{transform:translateY(-1px)} @media (max-width:900px){ .slideshow{height:420px} .slide-side{display:none} .slide-main{border-radius:16px} } /* スマホは縦長寄りに（ヒーロー感を出す） */ @media (max-width:600px){.slideshow{height:min(125vw, 560px)}} /* overlay text */ .slide-caption{ position:absolute;inset:0; display:flex;flex-direction:column;justify-content:center;align-items:center; text-align:center;padding:24px;z-index:4;pointer-events:none; background:linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,.22)); } .slide-catch{ margin:0 0 10px; font-size:32px;font-weight:1000;letter-spacing:.08em;color:#fff; text-shadow:0 6px 18px rgba(0,0,0,.45); animation: fadeUp .8s ease both; } .slide-sub{ margin:0;font-size:15px;font-weight:700;letter-spacing:.18em;color:#e6f3ff; animation: fadeUp 1s ease both; } @keyframes fadeUp{from{opacity:1;transform:translateY(12px)}to{opacity:1;transform:none}} @media (max-width:900px){.slide-catch{font-size:24px}} @media (max-width:600px){.slide-catch{font-size:20px}.slide-sub{font-size:13px}} /* ===== Features ===== */ .features-catch{margin:28px 0 40px;text-align:center;font-size:20px;font-weight:900} .features-catch strong{color:var(--primary)} .features-strong-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px} @media(max-width:900px){.features-strong-grid{grid-template-columns:1fr}} .feature-strong-card{ background:#fff;border-radius:22px;overflow:hidden; border:1px solid var(--ui-blue-line); box-shadow:0 18px 40px rgba(24,78,140,.10); transition:.25s ease; } .feature-strong-card:hover{transform:none;box-shadow:0 28px 66px rgba(24,78,140,.16)} .feature-media{position:relative;height:240px} .feature-media img{width:100%;height:100%;object-fit:cover} .feature-check{ position:absolute;top:14px;right:-6px;background:var(--primary);color:#fff; font-size:12px;font-weight:900;padding:6px 14px; clip-path:polygon(0 0,100% 0,90% 50%,100% 100%,0 100%,8% 50%); } .feature-title-band{ position:absolute;left:0;right:0;bottom:0; padding:12px 16px; background:var(--primary); color:#fff;font-size:17px;font-weight:1000;text-align:center; } .feature-body{padding:20px} .feature-desc{margin:0;font-size:14px;line-height:1.95;color:#455} /* ===== Flow（横スクロール） ===== */ .flow-pro{margin-top:28px} .flow-pro-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:6px;margin:0 -6px;scroll-snap-type:x mandatory} .flow-pro-row{display:flex;gap:16px;padding:6px;scroll-snap-type:x mandatory;align-items:stretch} .flow-pro-item{ scroll-snap-align:start; background:#fff;border:1px solid rgba(0,0,0,.06); border-radius:18px; box-shadow:0 12px 26px rgba(0,0,0,.06); overflow:hidden;position:relative; transition:transform .15s ease, box-shadow .2s ease; display:flex;flex-direction:column; flex:0 0 auto; } .flow-pro-item:hover{transform:none;box-shadow:0 18px 34px rgba(0,0,0,.10)} @media (min-width:901px){.flow-pro-item{width: calc((100% - 32px) / 3)}} @media (max-width:900px){.flow-pro-item{width: min(78vw, 360px)}} /* ===== FAQ ===== */ .faq-list{margin-top:20px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px} .faq-item{ border-radius:14px;border:1px solid rgba(24,78,140,.14); background:linear-gradient(135deg,#fff 0%, #f4f9ff 100%); box-shadow:0 6px 16px rgba(0,0,0,.04);overflow:hidden; transition:box-shadow .25s ease,transform .15s ease } .faq-item:hover{transform:none;box-shadow:0 10px 24px rgba(0,0,0,.06)} .faq-question{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer} .faq-question-main{display:flex;align-items:center;gap:10px;font-weight:900;color:#184e8c} .faq-q-label{ width:26px;height:26px;border-radius:999px;background:#184e8c;color:#fff;display:inline-flex; align-items:center;justify-content:center;font-size:13px;box-shadow:0 0 0 3px rgba(24,78,140,.12);flex:0 0 auto } .faq-q-text{font-size:14px} .faq-toggle-icon{font-size:18px;color:#184e8c;transition:transform .25s ease;flex:0 0 auto} .faq-answer{display:none;padding:0 16px 14px} .faq-answer-inner{display:flex;align-items:flex-start;gap:10px;margin-top:2px} .faq-a-label{ width:24px;height:24px;border-radius:999px;background:#fff;border:1px solid rgba(24,78,140,.22); display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#184e8c;flex:0 0 auto } .faq-a-text{font-size:13px;line-height:1.8;color:var(--text-main)} .faq-item.active .faq-answer{display:block} .faq-item.active .faq-toggle-icon{transform:rotate(45deg)} @media (max-width:600px){.faq-list{grid-template-columns:1fr}} /* === merged from style.css === */ /* ========================================= Base / Variables ========================================= */ :root{ --primary:#e9534f; /* 赤（強調のみ） */ --accent:#ffb400; /* 薄い青の基調（ヘッダー・フッター以外） */ --ui-blue:#eaf4ff; --ui-blue-2:#f4f9ff; --ui-blue-line:rgba(24,78,140,.12); --ui-blue-deep:#184e8c; --text-main:#333; --text-muted:#6f7682; --bg:var(--ui-blue-2); --bg-alt:#ffffff; --card-bg:#fff; --border-soft:#e2e2e7; --radius-lg:16px; --shadow-soft:0 10px 25px rgba(0,0,0,.08); --border-color: var(--border-soft); --maxw:1100px; --inner-pad:16px; --dark:#111319; /* ヘッダー/フッター専用 */ --dark-border:rgba(255,255,255,.08); --pc-break:901px; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック体","YuGothic","メイリオ",sans-serif; color:var(--text-main); background:var(--bg); line-height:1.7; font-size:14px; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button{font:inherit} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ===== Layout ===== */ .page{max-width:var(--maxw);margin:0 auto;padding:0 var(--inner-pad)} .section{padding:54px 0} .section--alt{background:linear-gradient(180deg,var(--ui-blue) 0%, #ffffff 70%)} /* ===== Section Head ===== */ .section-head{ display:grid; grid-template-columns: 1fr auto; column-gap:16px; align-items:start; padding:0 0 14px; border-bottom:1px solid rgba(0,0,0,.14); margin:0 0 18px; } .sec-title-wrap{min-width:0} .sec-title{ margin:0; font-size:28px; font-weight:1000; letter-spacing:.04em; color:var(--text-main); line-height:1.25; } .sec-title-en{ margin:6px 0 0; font-size:12px; font-weight:900; letter-spacing:.22em; color:var(--primary); opacity:.92; text-transform:uppercase; } .section-caption{ margin:0; color:var(--text-muted); line-height:1.9; text-align:right; padding-top:4px; max-width:48ch; justify-self:end; } @media (max-width:900px){ .section-head{grid-template-columns:1fr;row-gap:10px} .section-caption{text-align:left;padding-top:0;max-width:unset;justify-self:start} } @media (max-width:600px){.sec-title{font-size:22px}} /* ===== Card ===== */ .card{ background:var(--card-bg); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-soft); border:1px solid var(--ui-blue-line); } /* ===== Reveal ===== */ .reveal{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease} .reveal.is-visible{opacity:1;transform:none} /* ========================================= Header (dark keep) ========================================= */ .header{background:var(--dark);color:#f4f5f7;} .header-inner{ max-width:var(--maxw); margin:0 auto; padding:14px var(--inner-pad); display:flex; align-items:center; justify-content:space-between; gap:14px; } .brand{display:flex;align-items:center;gap:10px;min-width:0} .brand-text{display:flex;flex-direction:column;gap:2px;min-width:0} .brand-name{font-size:14px;font-weight:900;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .brand-sub{font-size:11px;color:#b5b7c0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Logo click area fix */ .brand{display:inline-flex;flex:0 0 auto;align-self:center;padding:0;} .brand-name{display:block;line-height:0;} .brand-name img{display:block;height:64px;width:auto;max-width:360px;} @media (max-width:600px){.brand-name img{height:56px;max-width:320px;}} .header-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end} .btn{ display:inline-flex;align-items:center;gap:8px; padding:10px 14px;border-radius:999px; font-weight:900;font-size:12px; border:1px solid rgba(255,255,255,.22); color:#f4f5f7;background:rgba(255,255,255,.06); transition:transform .15s ease, background .2s ease, box-shadow .2s ease; white-space:nowrap; } .btn:hover{transform:none;background:rgba(255,255,255,.10);box-shadow:0 10px 22px rgba(0,0,0,.18)} .btn--primary{border:none;color:var(--dark);background:linear-gradient(135deg,var(--primary),var(--accent))} /* ===== Hamburger ===== */ .hamburger{ width:44px;height:44px;border-radius:12px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:#f4f5f7; display:inline-flex;align-items:center;justify-content:center; cursor:pointer; transition:transform .15s ease, background .2s ease, box-shadow .2s ease; } .hamburger:hover{transform:none;background:rgba(255,255,255,.10);box-shadow:0 10px 22px rgba(0,0,0,.18)} .hamburger-lines{position:relative;width:18px;height:12px} .hamburger-lines span{ position:absolute;left:0;right:0;height:2px;border-radius:2px;background:#fff; transition:transform .2s ease, top .2s ease, opacity .2s ease; } .hamburger-lines span:nth-child(1){top:0} .hamburger-lines span:nth-child(2){top:5px} .hamburger-lines span:nth-child(3){top:10px} .hamburger[aria-expanded="true"] .hamburger-lines span:nth-child(1){top:5px;transform:rotate(45deg)} .hamburger[aria-expanded="true"] .hamburger-lines span:nth-child(2){opacity:1} .hamburger[aria-expanded="true"] .hamburger-lines span:nth-child(3){top:5px;transform:rotate(-45deg)} /* ※CSSカスタムプロパティはmedia queryで使えないブラウザがあるため数値で固定 */ @media (min-width:901px){.hamburger{display:none}} @media (max-width: 900px){.header-actions{display:none}.brand-sub{display:none}} /* ========================================= Global Nav (PC only) ========================================= */ .gnav-wrap{ background:linear-gradient(180deg,var(--ui-blue) 0%, #ffffff 100%); border-bottom:1px solid var(--ui-blue-line); } .gnav{ max-width:var(--maxw); margin:0 auto; padding:0 var(--inner-pad); display:flex; overflow:auto; } .gnav a{ display:inline-flex;align-items:center;gap:10px; padding:14px 18px; font-weight:900;font-size:14px;color:#222; border-right:1px solid rgba(0,0,0,.08); transition:background .2s ease, color .2s ease; white-space:nowrap; } .gnav a:first-child{border-left:1px solid rgba(0,0,0,.08)} .gnav a:hover{background:#fff;color:var(--primary)} .nav-ico{ width:26px;height:26px;border-radius:10px; display:inline-flex;align-items:center;justify-content:center; background:rgba(24,78,140,.10); border:1px solid rgba(24,78,140,.18); color:var(--ui-blue-deep); font-size:14px;flex:0 0 auto; } @media (max-width: 900px){.gnav-wrap{display:none !important}} /* ========================================= Drawer ========================================= */ .drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:9998} .drawer{ position:fixed;top:0;right:0;height:100%; width:min(86vw, 360px); background:#fff; box-shadow:-20px 0 50px rgba(0,0,0,.18); transform:translateX(105%); transition:transform .25s ease; z-index:9999; display:flex;flex-direction:column; } .drawer-head{padding:14px 14px 10px;border-bottom:1px solid rgba(0,0,0,.08);display:flex;align-items:center;justify-content:space-between;gap:10px} .drawer-title{font-weight:900} .drawer-close{width:40px;height:40px;border-radius:12px;border:1px solid rgba(0,0,0,.08);background:#fff;cursor:pointer} .drawer-nav{padding:10px 8px 18px;overflow:auto} .drawer-nav a{display:flex;align-items:center;gap:10px;padding:12px 12px;border-radius:12px;font-weight:900;color:#222;transition:background .2s ease} .drawer-nav a:hover{background:rgba(24,78,140,.08)} .drawer-backdrop.is-open{opacity:1;pointer-events:auto} .drawer.is-open{transform:translateX(0)} @media (min-width:901px){.drawer,.drawer-backdrop{display:none !important}} /* ========================================= Slideshow ========================================= */ .slideshow-section{padding:28px 0 44px;background:#fff} .slideshow-shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--inner-pad)} .slideshow{ position:relative;width:100%;height:560px; display:flex;align-items:center;justify-content:center;overflow:visible; } .slide-main{ width:100%;height:100%;border-radius:18px;overflow:hidden; box-shadow:0 18px 40px rgba(0,0,0,.12); border:1px solid rgba(0,0,0,.06); background:#eee;position:relative;z-index:3; } .slide-main img{ width:100%;height:100%;object-fit:cover; transform:scale(1); animation: slideZoom 6s ease-in-out infinite; will-change: transform; } @keyframes slideZoom{0%{transform:scale(1)}100%{transform:scale(1.08)}} .slide-side{ position:absolute;top:16px;width:45%;height:448px;border-radius:18px;overflow:hidden; border:1px solid rgba(0,0,0,.05);background:#eee;z-index:1;opacity:.55; } .slide-side img{width:100%;height:100%;object-fit:cover} .slide-left{left:-18%} .slide-right{right:-18%} .slide-left::after,.slide-right::after{content:"";position:absolute;inset:0;pointer-events:none} .slide-left::after{background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.88) 78%, rgba(255,255,255,1) 100%)} .slide-right::after{background:linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.88) 78%, rgba(255,255,255,1) 100%)} .slide-controls{position:absolute;inset:auto 0 14px 0;display:flex;justify-content:center;gap:10px;z-index:5} .dot{width:10px;height:10px;border-radius:999px;border:1px solid rgba(0,0,0,.25);background:rgba(0,0,0,.08);cursor:pointer;transition:transform .15s ease, background .2s ease} .dot.active{background:rgba(233,83,79,.55);border-color:rgba(233,83,79,.55);transform:scale(1.15)} .slide-arrows{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none;z-index:6} .arrow{ pointer-events:auto;width:44px;height:44px;border-radius:999px;border:1px solid rgba(0,0,0,.10); background:rgba(255,255,255,.9);box-shadow:0 10px 24px rgba(0,0,0,.10); display:inline-flex;align-items:center;justify-content:center;margin:0 10px;cursor:pointer;transition:transform .15s ease;font-size:16px; } .arrow:hover{transform:translateY(-1px)} @media (max-width:900px){ .slideshow{height:420px} .slide-side{display:none} .slide-main{border-radius:16px} } /* スマホは縦長寄りに（ヒーロー感を出す） */ @media (max-width:600px){.slideshow{height:min(125vw, 560px)}} /* ===== Slideshow overlay text ===== */ .slide-caption{ position:absolute;inset:0; display:flex;flex-direction:column;justify-content:center;align-items:center; text-align:center;padding:24px;z-index:4;pointer-events:none; background:linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,.22)); } .slide-catch{ margin:0 0 10px; font-size:32px;font-weight:1000;letter-spacing:.08em;color:#fff; text-shadow:0 6px 18px rgba(0,0,0,.45); animation: fadeUp .8s ease both; } .slide-sub{ margin:0;font-size:15px;font-weight:700;letter-spacing:.18em;color:#e6f3ff; animation: fadeUp 1s ease both; } @keyframes fadeUp{from{opacity:1;transform:translateY(12px)}to{opacity:1;transform:none}} @media (max-width:900px){.slide-catch{font-size:24px}} @media (max-width:600px){.slide-catch{font-size:20px}.slide-sub{font-size:13px}} /* ========================================= Campaign（青基調） ========================================= */ .campaign-stack{display:flex;flex-direction:column;gap:12px} .campaign-banner{ display:grid;grid-template-columns:240px 1fr;gap:14px;align-items:stretch;border-radius:16px;overflow:hidden; border:1px solid var(--ui-blue-line);background:#fff; box-shadow:0 14px 28px rgba(24,78,140,.08); transition:transform .15s ease, box-shadow .2s ease;min-height:130px; } .campaign-banner:hover{transform:none;box-shadow:0 18px 34px rgba(24,78,140,.14)} .campaign-media{position:relative;background:#d9d9df;overflow:hidden} .campaign-media img{width:100%;height:100%;object-fit:cover} .campaign-tag{ position:absolute;top:10px;left:10px;z-index:2; display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px; font-size:11px;font-weight:900;letter-spacing:.06em;color:#fff;background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.22);backdrop-filter: blur(6px); } .campaign-content{padding:14px 14px 16px;display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0} .campaign-title{margin:0;font-size:16px;font-weight:900;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .campaign-desc{margin:0;font-size:12px;color:#55606c;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .campaign-cta{margin-top:2px;font-size:12px;font-weight:900;color:var(--primary);width:fit-content} .campaign-cta:hover{text-decoration:underline} @media (max-width:700px){ .campaign-banner{grid-template-columns:1fr} .campaign-media{height:170px} .campaign-title{white-space:normal} } /* ========================================= News（青基調） ========================================= */ .news-card{ background:linear-gradient(135deg,#fff 0%, var(--ui-blue-2) 100%); border:1px solid var(--ui-blue-line); } .news-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px} .news-title{margin:0;font-size:18px;font-weight:900;letter-spacing:.06em;color:var(--text-main);display:inline-flex;align-items:center;gap:8px} .news-title-badge{ width:28px;height:28px;border-radius:10px; background:linear-gradient(135deg,var(--ui-blue-deep), #3f8ad6); display:inline-flex;align-items:center;justify-content:center; color:#fff;font-size:14px;font-weight:900;box-shadow:0 8px 18px rgba(24,78,140,.18) } .news-more{font-size:12px;color:var(--primary);font-weight:900;white-space:nowrap} .news-more:hover{text-decoration:underline} .news-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:10px} .news-item{ background:#fff;border:1px solid var(--ui-blue-line);border-radius:12px;padding:12px 12px; display:grid;grid-template-columns:110px 120px 1fr;gap:10px;align-items:center; transition:transform .12s ease,box-shadow .2s ease; } .news-item:hover{transform:none;box-shadow:0 12px 22px rgba(24,78,140,.10)} .news-date{font-size:12px;color:var(--text-muted);letter-spacing:.02em;white-space:nowrap} .news-cat{ display:inline-flex;align-items:center;justify-content:center;padding:5px 10px;border-radius:999px; font-size:11px;font-weight:900;line-height:1;border:1px solid rgba(24,78,140,.22); background:rgba(24,78,140,.08);color:var(--ui-blue-deep);white-space:nowrap;width:fit-content } .news-cat.cat-campaign{border-color:rgba(255,180,0,.35);background:rgba(255,180,0,.16);color:#7a5600} .news-cat.cat-important{border-color:rgba(233,83,79,.35);background:rgba(233,83,79,.18);color:#a92e2c} .news-link{font-weight:900;color:var(--text-main);line-height:1.45;font-size:13px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block} .news-link:hover{color:var(--primary);text-decoration:underline} @media (max-width:700px){ .news-item{ grid-template-columns:1fr auto; grid-template-areas: "date cat" "link link"; align-items:center; gap:8px 10px } .news-date{grid-area:date} .news-cat{grid-area:cat;justify-self:end} .news-link{grid-area:link;white-space:normal} } /* ========================================= Features（画像縦長 + 説明文サイズ調整） ========================================= */ .features-catch{margin:28px 0 40px;text-align:center;font-size:20px;font-weight:900} .features-catch strong{color:var(--primary)} .features-strong-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px} @media(max-width:900px){.features-strong-grid{grid-template-columns:1fr}} .feature-strong-card{ background:#fff;border-radius:22px;overflow:hidden; border:1px solid var(--ui-blue-line); box-shadow:0 18px 40px rgba(24,78,140,.10); transition:.25s ease; } .feature-strong-card:hover{transform:none;box-shadow:0 28px 66px rgba(24,78,140,.16)} .feature-media{position:relative;height:240px} /* 縦を広げる */ .feature-media img{width:100%;height:100%;object-fit:cover} .feature-check{ position:absolute;top:14px;right:-6px;background:var(--primary);color:#fff; font-size:12px;font-weight:900;padding:6px 14px; clip-path:polygon(0 0,100% 0,90% 50%,100% 100%,0 100%,8% 50%); } .feature-title-band{ position:absolute;left:0;right:0;bottom:0; padding:12px 16px; background:var(--primary); color:#fff;font-size:17px;font-weight:1000;text-align:center; } .feature-body{padding:20px} .feature-desc{margin:0;font-size:14px;line-height:1.95;color:#455} /* ========================================= Price table（青基調） ========================================= */ .device-selector{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 16px;padding:16px;margin:14px 0 18px;border-radius:12px; background:linear-gradient(180deg,var(--ui-blue) 0%, #ffffff 100%); border:1px solid var(--ui-blue-line); } .selector-item{display:flex;flex-direction:column;gap:4px} .selector-item label{font-size:.85rem;font-weight:900;color:var(--text-main)} .selector-item select{ padding:8px 10px;border-radius:8px;border:1px solid var(--ui-blue-line); font-size:.95rem;background-color:#fff; } .selector-helper{grid-column:1/-1;font-size:.85rem;color:var(--text-muted)} @media (max-width:640px){.device-selector{grid-template-columns:1fr}} .price-table-wrapper{border-radius:12px;border:1px solid var(--ui-blue-line);overflow:hidden} .price-table-header{ padding:3px 14px;background:linear-gradient(90deg,var(--ui-blue-deep), #3f8ad6); color:#fff;font-size:.95rem; display:flex;justify-content:space-between;align-items:center;gap:10px } .price-table-header span.current-model{font-weight:900} .price-table-header span.note{font-size:.8rem;opacity:.92;background:transparent;padding:0;border:0;box-shadow:none;outline:0;border-radius:0;} table.repair-price-table{width:100%;border-collapse:collapse;font-size:.9rem;table-layout:fixed;background-color:#fff} table.repair-price-table thead{background:rgba(24,78,140,.08)} table.repair-price-table th, table.repair-price-table td{padding:10px 10px;border-bottom:1px solid var(--ui-blue-line);text-align:left;vertical-align:top} table.repair-price-table th:nth-child(1), table.repair-price-table td:nth-child(1){width:45%} table.repair-price-table th:nth-child(2), table.repair-price-table td:nth-child(2){width:30%;text-align:right} table.repair-price-table th:nth-child(3), table.repair-price-table td:nth-child(3){width:25%;text-align:right} /* price/time vertical centering */ table.repair-price-table td.menu-price, table.repair-price-table td.menu-time{vertical-align:middle} table.repair-price-table th{font-weight:900;font-size:.85rem;color:#3f4a57} table.repair-price-table tbody tr:nth-child(even){background:#fbfdff} .menu-name{font-weight:900;margin-bottom:2px} .menu-desc{font-size:.8rem;color:var(--text-muted);line-height:1.6} .menu-time{font-size:.85rem} .menu-time small{display:block;font-size:.75rem;color:var(--text-muted);margin-top:3px} .menu-price{font-weight:normal;font-size:1rem} .menu-price small{display:block;font-size:.75rem;color:var(--text-muted);margin-top:3px;font-weight:normal} .empty-state{padding:18px 14px;text-align:center;font-size:.9rem;color:var(--text-muted)} .price-notes{margin-top:10px;font-size:.8rem;color:var(--text-muted);line-height:1.6} .price-notes ul{padding-left:1.2rem;margin:4px 0 0} .price-notes li{margin-bottom:2px} /* ========================================= Repair Blog（青基調） ========================================= */ .repair-blog-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .repair-blog-item{ border-radius:16px;border:1px solid var(--ui-blue-line);background:#fff;overflow:hidden; transition:transform .15s ease,box-shadow .2s ease;display:flex;flex-direction:column;min-height:100%; box-shadow:0 14px 28px rgba(24,78,140,.08); } .repair-blog-item:hover{transform:none;box-shadow:0 18px 34px rgba(24,78,140,.14)} .repair-blog-thumb{width:100%;aspect-ratio:16/10;background:#d9d9df;overflow:hidden} .repair-blog-thumb img{width:100%;height:100%;object-fit:cover} .repair-blog-body{padding:12px 12px 14px;display:flex;flex-direction:column;gap:8px;flex:1} .repair-blog-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--text-muted);font-size:12px;line-height:1.2} .repair-blog-model{ display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px; font-size:11px;font-weight:900;background:rgba(24,78,140,.10);border:1px solid rgba(24,78,140,.20); color:var(--ui-blue-deep);white-space:nowrap } .repair-blog-headline{ font-weight:900;font-size:14px;color:var(--text-main);line-height:1.45;margin:0; min-height:2.9em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden } .repair-blog-excerpt{ margin:0;font-size:12px;color:#55606c;line-height:1.85; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden } .repair-blog-cta{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:900;color:var(--primary);padding-top:4px;width:fit-content} .repair-blog-cta:hover{text-decoration:underline} @media (max-width:900px){.repair-blog-list{grid-template-columns:1fr}} /* ========================================= Access / Map / Info（青基調） ========================================= */ .map-wrapper-full{border-radius:12px;overflow:hidden;border:1px solid var(--ui-blue-line);margin-bottom:12px} .map-wrapper-full iframe{width:100%;height:360px;border:none;display:block} .map-cta-full{ display:block;margin-top:10px;text-align:center;padding:12px;background:rgba(24,78,140,.08); border-radius:10px;border:1px solid rgba(24,78,140,.20);color:var(--ui-blue-deep);font-weight:900;transition:.25s ease } .map-cta-full:hover{background:rgba(24,78,140,.14);transform:none;box-shadow:0 10px 22px rgba(24,78,140,.14)} .topic-box{ background:linear-gradient(180deg,var(--ui-blue) 0%, #ffffff 100%); border-radius:10px;padding:12px;border:1px solid var(--ui-blue-line); display:flex;gap:10px;margin-top:16px } .topic-box-icon{font-size:18px;margin-top:2px} .topic-box-text{line-height:1.7} .info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 16px;margin-top:16px} .info-item{display:grid;grid-template-columns:120px 1fr;gap:8px} .info-label{ padding:10px 12px;background:rgba(24,78,140,.06);border:1px solid var(--ui-blue-line); border-radius:8px 0 0 8px;font-weight:900;color:var(--text-muted); display:flex;align-items:center;gap:6px;white-space:nowrap } .info-value{ padding:10px 12px;border:1px solid var(--ui-blue-line);border-left:none; border-radius:0 8px 8px 0;background:#fff;word-break:break-word } @media (max-width:600px){.info-grid{grid-template-columns:1fr}} @media (max-width:700px){ #access .card{ border:none; box-shadow:none; background:transparent; padding:0; border-radius:0 } } .payment-section{margin-top:24px} .payment-heading-line{display:flex;align-items:center;gap:20px;margin:8px 0 16px} .payment-heading-line::before,.payment-heading-line::after{content:"";flex:1;height:2px;background:rgba(24,78,140,.12)} .payment-heading-label{ background:rgba(24,78,140,.08); padding:10px 22px;border-radius:999px;font-size:18px;font-weight:1000;color:var(--ui-blue-deep); display:inline-flex;align-items:center;gap:8px;white-space:nowrap } .payment-description{margin:0 0 8px;font-size:13px;color:#55606c} .payment-brand-logos{display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:6px} .payment-brand-logos img{height:26px;object-fit:contain;display:block} /* ========================================= Route tiles（青基調） ========================================= */ .h-scroll{overflow-x:auto;padding-bottom:10px;margin:0 -6px} .h-row{display:flex;gap:14px;padding:6px;scroll-snap-type:x mandatory} .tile{ scroll-snap-align:start; background:#fff;border:1px solid var(--ui-blue-line); border-radius:16px;box-shadow:0 14px 28px rgba(24,78,140,.08); overflow:hidden;min-width:260px;max-width:280px;flex:0 0 auto; transition:transform .15s ease, box-shadow .2s ease; } .tile:hover{transform:none;box-shadow:0 18px 34px rgba(24,78,140,.14)} .tile-top{position:relative;height:150px;background:#d9d9df;overflow:hidden} .tile-top img{width:100%;height:100%;object-fit:cover} .tile-step{ position:absolute;left:12px;top:12px; display:inline-flex;align-items:baseline;gap:8px; padding:6px 10px;border-radius:999px; background:rgba(0,0,0,.55);color:#fff; border:1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); font-weight:900; } .tile-step .num{font-size:16px;line-height:1} .tile-step .label{font-size:11px;letter-spacing:.08em;opacity:.92} .tile-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:6px} .tile-title{margin:0;font-size:14px;font-weight:900;line-height:1.35} .tile-desc{margin:0;font-size:12px;color:#55606c;line-height:1.9} /* ========================================= FAQ（青基調 + 強調赤は維持） ========================================= */ .faq-list{margin-top:20px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px} .faq-item{ border-radius:14px;border:1px solid var(--ui-blue-line); background:linear-gradient(135deg,#fff 0%, var(--ui-blue-2) 100%); box-shadow:0 10px 22px rgba(24,78,140,.08);overflow:hidden; transition:box-shadow .25s ease,transform .15s ease } .faq-item:hover{transform:none;box-shadow:0 14px 28px rgba(24,78,140,.14)} .faq-question{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer} .faq-question-main{display:flex;align-items:center;gap:10px;font-weight:1000;color:var(--ui-blue-deep)} .faq-q-label{ width:26px;height:26px;border-radius:999px;background:var(--primary);color:#fff;display:inline-flex; align-items:center;justify-content:center;font-size:13px;box-shadow:0 0 0 3px rgba(233,83,79,.18);flex:0 0 auto } .faq-q-text{font-size:14px} .faq-toggle-icon{font-size:18px;color:var(--ui-blue-deep);transition:transform .25s ease;flex:0 0 auto} .faq-answer{display:none;padding:0 16px 14px} .faq-answer-inner{display:flex;align-items:flex-start;gap:10px;margin-top:2px} .faq-a-label{ width:24px;height:24px;border-radius:999px;background:#fff;border:1px solid rgba(24,78,140,.25); display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:1000;color:var(--ui-blue-deep);flex:0 0 auto } .faq-a-text{font-size:13px;line-height:1.9;color:#3c4652} .faq-item.active .faq-answer{display:block} .faq-item.active .faq-toggle-icon{transform:rotate(45deg)} .faq-item.active .faq-question-main{color:#0f3f72} @media (max-width:600px){.faq-list{grid-template-columns:1fr}} /* ========================================= Flow（ここが省略されていたので完全復元） ========================================= */ .flow-pro{margin-top:28px} .flow-pro-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding:6px; margin:0 -6px; scroll-snap-type:x mandatory; } .flow-pro-row{ display:flex; gap:16px; padding:6px; scroll-snap-type:x mandatory; align-items:stretch; } .flow-pro-item{ scroll-snap-align:start; background:#fff; border:1px solid var(--ui-blue-line); border-radius:18px; box-shadow:0 14px 28px rgba(24,78,140,.08); overflow:hidden; position:relative; transition:transform .15s ease, box-shadow .2s ease; display:flex; flex-direction:column; min-height:100%; flex:0 0 auto; } .flow-pro-item:hover{transform:none;box-shadow:0 18px 34px rgba(24,78,140,.14)} @media (min-width:901px){ .flow-pro-item{width: calc((100% - 32px) / 3)} } @media (max-width: 900px){ .flow-pro-item{width: min(78vw, 360px)} } .flow-pro-head{ display:flex; align-items:center; gap:14px; padding:18px 18px 14px; position:relative; background:linear-gradient(180deg, rgba(24,78,140,.08) 0%, rgba(255,255,255,1) 80%); z-index:1; } .flow-pro-num{ flex:0 0 auto; width:68px; display:flex; align-items:flex-end; justify-content:center; font-weight:1000; letter-spacing:.02em; color:var(--ui-blue-deep); line-height:1; } .flow-pro-num .big{font-size:46px} .flow-pro-item::before{ content:attr(data-step); position:absolute; top:10px;left:12px; font-weight:1000; font-size:92px; line-height:1; color:rgba(24,78,140,.08); pointer-events:none; user-select:none; z-index:0; } .flow-pro-title{ margin:0; font-size:18px; font-weight:1000; letter-spacing:.02em; color:var(--text-main); white-space:nowrap; z-index:1; min-width:0; overflow:hidden; text-overflow:ellipsis; } .flow-pro-arrow{ flex:1; height:2px; position:relative; overflow:hidden; border-radius:999px; background:linear-gradient( 90deg, rgba(24,78,140,0) 0%, rgba(24,78,140,.35) 18%, rgba(24,78,140,.95) 50%, rgba(24,78,140,.35) 82%, rgba(24,78,140,0) 100% ); background-size:220% 100%; animation:flowLine 1.8s linear infinite; z-index:1; opacity:.95; min-width:40px; } .flow-pro-arrow::after{ content:""; position:absolute; right:0;top:50%; width:10px;height:10px; border-top:2px solid rgba(24,78,140,.95); border-right:2px solid rgba(24,78,140,.95); transform:none; animation:arrowPulse 1.2s ease-in-out infinite; } @keyframes flowLine{0%{background-position:0% 0%}100%{background-position:220% 0%}} @keyframes arrowPulse{ 0%,100%{transform:translateY(-50%) rotate(45deg) scale(1)} 50%{transform:translateY(-50%) rotate(45deg) scale(1.15)} } @media (prefers-reduced-motion:reduce){ .flow-pro-arrow,.flow-pro-arrow::after{animation:none} .flow-pro-item:hover{transform:none} } .flow-pro-body{ display:flex; flex-direction:column; gap:12px; padding:0 18px 18px; position:relative; z-index:1; } .flow-pro-media{ border-radius:14px; overflow:hidden; border:1px solid var(--ui-blue-line); background:#d9d9df; box-shadow:0 10px 22px rgba(24,78,140,.06); } .flow-pro-media img{ width:100%; height:220px; object-fit:cover; display:block; } @media (min-width:901px){ .flow-pro-media img{height:210px} } .flow-pro-text{ background:rgba(255,255,255,.95); border:1px solid var(--ui-blue-line); border-radius:14px; padding:14px 14px; box-shadow:0 10px 22px rgba(24,78,140,.06); flex:1; } .flow-pro-desc{ margin:0; font-size:13px; color:#3c4652; line-height:1.95; } .flow-pro-note{ margin:10px 0 0; font-size:12px; color:var(--text-muted); line-height:1.7; display:flex; gap:8px; align-items:flex-start; } .flow-pro-note strong{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:18px;height:18px; border-radius:999px; background:rgba(233,83,79,.12); border:1px solid rgba(233,83,79,.22); color:var(--primary); font-size:11px; line-height:1; margin-top:2px; } /* ========================================= Footer (dark keep) ※最低限の復元 ========================================= */ .footer{background:var(--dark);color:#f4f5f7;padding:32px 16px 18px;border-top:1px solid var(--dark-border)} .footer-inner{max-width:var(--maxw);margin:0 auto} .footer-main{display:grid;grid-template-columns:2fr 1.5fr 1.5fr;gap:24px;align-items:flex-start;margin-bottom:18px} .footer-brand{display:flex;flex-direction:column;gap:8px} .footer-logo{ font-size:20px;font-weight:900;letter-spacing:.09em;text-transform:uppercase; display:inline-flex;align-items:center;gap:8px } .footer-logo-mark{ width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--primary),var(--accent)); display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:900 } .footer-logo-text{white-space:nowrap} .footer-logo-img{height:64px;width:auto;display:block} .footer-copy-text{font-size:12px;color:#b5b7c0;line-height:1.7} .footer-address{font-size:12px;color:#d0d2da;line-height:1.7} .footer-title{font-size:13px;font-weight:900;margin-bottom:8px;letter-spacing:.08em;text-transform:uppercase;color:#f8f9ff} .footer-list{list-style:none;padding:0;margin:0;font-size:12px} .footer-list li+li{margin-top:4px} .footer-link{color:#d4d7e5;position:relative;padding-bottom:2px} .footer-link::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);transition:width .2s ease} .footer-link:hover::after{width:100%} .footer-sns{display:flex;gap:10px;margin-top:6px} .footer-sns-badge{ width:26px;height:26px;border:1px solid rgba(255,255,255,.35); display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:#f4f5f7 } .footer-bottom{ border-top:1px solid rgba(255,255,255,.08);padding-top:10px;display:flex;justify-content:space-between; align-items:center;gap:12px;font-size:11px;color:#8f93a3;flex-wrap:wrap } .footer-mini-links{display:flex;gap:14px;flex-wrap:wrap} .footer-mini-link{color:#b8bbcc} .footer-mini-link:hover{text-decoration:underline} .footer-pagetop{margin-left:auto;font-size:11px} .footer-pagetop a{ color:#f4f5f7;display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px; border:1px solid rgba(255,255,255,.35) } @media (max-width:900px){.footer-main{grid-template-columns:1fr 1fr}} @media (max-width:600px){ .footer-main{grid-template-columns:1fr} .footer{padding:28px 16px 16px} .footer-bottom{flex-direction:column;align-items:flex-start} .footer-pagetop{margin-left:0} } /* ========================================= Mobile bar ========================================= */ .mobile-bar{ position:fixed;left:0;right:0;bottom:0; display:none;z-index:9997;background:#fff;border-top:1px solid var(--ui-blue-line); box-shadow:0 -10px 30px rgba(0,0,0,.10); padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); } .mobile-bar-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:10px} .mobile-bar a{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 12px;border-radius:14px;font-weight:900; border:1px solid rgba(0,0,0,.08);background:#fff;color:#222; transition:transform .15s ease, box-shadow .2s ease;white-space:nowrap; } .mobile-bar a:hover{transform:none;box-shadow:0 10px 22px rgba(0,0,0,.08)} .mobile-bar a.primary{border:none;color:#111319;background:linear-gradient(135deg,var(--primary),var(--accent))} @media (max-width:900px){.mobile-bar{display:block}body{padding-bottom:86px}} /* ========================================= Section Footer Button ========================================= */ .section-footer{display:flex;justify-content:center;margin-top:18px} .section-more-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 28px;border-radius:999px; min-width:260px; font-weight:900;font-size:13px; color:#111319; background:linear-gradient(135deg,var(--primary),var(--accent)); border:none; box-shadow:0 14px 28px rgba(24,78,140,.12); transition:transform .15s ease, box-shadow .2s ease, filter .2s ease; white-space:nowrap; } .section-more-btn:hover{transform:none;box-shadow:0 18px 34px rgba(24,78,140,.16);filter:saturate(1.05)} .section-more-btn--ghost{ background:#fff;color:var(--ui-blue-deep); border:1px solid var(--ui-blue-line); box-shadow:0 14px 28px rgba(24,78,140,.08); } .section-more-btn--ghost:hover{background:rgba(24,78,140,.06)} @media (max-width:420px){ .section-more-btn{min-width:210px} } /* ========================================= Tips（修理速報に寄せつつ差分を出す） ========================================= */ .tips-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .tips-item{ border-radius:18px; background:linear-gradient(180deg, rgba(24,78,140,.08) 0%, #ffffff 65%); border:1px solid var(--ui-blue-line); overflow:hidden; transition:transform .15s ease, box-shadow .2s ease; box-shadow:0 14px 28px rgba(24,78,140,.08); } .tips-item a{display:flex;flex-direction:column;height:100%;padding:14px 14px 16px;color:inherit} .tips-item:hover{transform:none;box-shadow:0 18px 34px rgba(24,78,140,.14)} .tips-thumb{ height:110px; border-radius:14px; overflow:hidden; border:1px solid rgba(24,78,140,.18); background:#eee; margin-bottom:10px; } .tips-thumb img{width:100%;height:100%;object-fit:cover;display:block} .tips-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px} .tips-date{font-size:11px;font-weight:800;color:#6b7785;letter-spacing:.02em;white-space:nowrap} .tips-badge{ font-size:11px;font-weight:900; padding:6px 10px;border-radius:999px; background:rgba(24,78,140,.10); border:1px solid rgba(24,78,140,.20); color:var(--ui-blue-deep);white-space:nowrap; } .tips-badge--warn{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.24);color:#8a5b00} .tips-badge--good{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.24);color:#0b5c45} .tips-title{margin:0 0 6px;font-weight:900;font-size:14px;line-height:1.45;color:var(--text-main)} .tips-desc{ margin:0; font-size:12px;color:#55606c;line-height:1.85; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } .tips-cta{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:900;color:var(--primary);padding-top:10px;width:fit-content} .tips-cta:hover{text-decoration:underline} @media (max-width:900px){.tips-list{grid-template-columns:1fr}} /* === post.css === */ @charset "UTF-8"; /* ===== Post Page (SEO Local: Funabashi × Symptoms) ===== */ /* Breadcrumb */ .breadcrumb{margin:18px 0 10px} .breadcrumb__list{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--text-muted);list-style:none;margin:0;padding:0} .breadcrumb__item{display:flex;align-items:center;gap:8px} .breadcrumb__item:not(:last-child)::after{content:"/";opacity:.55} .breadcrumb a{color:inherit;text-decoration:none} .breadcrumb a:hover{text-decoration:underline} /* Post shell */ .post{background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);overflow:hidden} /* Kicker (news ticker, site color) */ .post__kicker{position:relative;display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:12px;color:#fff; background:linear-gradient(90deg,var(--primary), #ff7a76, var(--primary)); background-size:200% 100%; border:1px solid rgba(0,0,0,.08);padding:7px 12px;border-radius:999px;letter-spacing:.06em;overflow:hidden; animation:kickerGradient 2.8s linear infinite} .post__kicker--news::before{content:"速報";display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900; padding:4px 8px;border-radius:999px;background:var(--dark);color:#fff;letter-spacing:.08em;animation:kickerPulse 1.2s ease-in-out infinite} .post__kicker::after{content:"";position:absolute;top:-20%;left:-40%;width:40%;height:140%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-20deg);animation:kickerSweep 2.6s ease-in-out infinite;pointer-events:none} @keyframes kickerSweep{0%{left:-50%}55%{left:110%}100%{left:110%}} @keyframes kickerGradient{0%{background-position:0% 50%}100%{background-position:200% 50%}} @keyframes kickerPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.92}} @media (prefers-reduced-motion: reduce){ .post__kicker,.post__kicker--news::before,.post__kicker::after{animation:none!important} } /* Post Title Layout: left image / right meta+title */ .post__header{padding:22px;background:#fff;border-bottom:1px solid var(--border-soft)} .post-hero{display:grid;grid-template-columns:1fr;gap:14px;align-items:stretch} .post-hero__media{margin:0;border:1px solid var(--border-soft);background:var(--ui-blue-2);overflow:hidden} .post-hero__img{width:100%;height:220px;object-fit:cover;display:block} .post-hero__body{display:flex;flex-direction:column;gap:10px} .post__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0} .post__date{font-size:13px;color:var(--text-muted);background:#fff;border:1px solid var(--border-soft);padding:6px 10px;border-radius:999px} .post__tags{display:flex;flex-wrap:wrap;gap:8px} .tag{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:13px;color:var(--dark);background:#fff;border:1px solid var(--border-soft);text-decoration:none} .tag:hover{border-color:rgba(24,78,140,.22)} .tag--soft{background:var(--ui-blue-2);border-color:var(--ui-blue-line)} .post__title{margin:0;font-size:clamp(22px,3.2vw,34px);line-height:1.18;letter-spacing:.02em;color:var(--text-main)} @media (min-width:800px){ .post__header{padding:26px} .post-hero{grid-template-columns:360px 1fr;gap:18px} .post-hero__img{height:100%} } /* Intro above TOC */ .post__intro{margin:0;padding:18px 22px;line-height:1.95;color:var(--text-main);border-bottom:1px solid var(--border-soft);background:#fff} /* For who */ .forwho{margin:0;padding:18px 22px;border-bottom:1px solid var(--border-soft);background:var(--ui-blue-2);border-left:6px solid rgba(24,78,140,.22)} .forwho__title{margin:0 0 10px;font-size:15px;font-weight:900;letter-spacing:.04em} .forwho__list{margin:0;padding-left:1.2em;display:grid;gap:8px} .forwho__list li{line-height:1.7} /* TOC */ .toc{margin:0;padding:18px 22px;border-bottom:1px solid var(--border-soft);background:var(--ui-blue-2)} .toc__title{margin:0 0 10px;font-weight:800;color:var(--dark)} .toc__list{margin:0;padding-left:18px;display:grid;gap:8px} .toc__list a{color:var(--text-main);text-decoration:none} .toc__list a:hover{text-decoration:underline} .toc__list li{line-height:1.6} /* Content */ .post__content{padding:26px 22px 10px;line-height:1.95;color:var(--text-main)} .post__content > *:first-child{margin-top:0} .post__content p{margin:0 0 14px} .post__content ul,.post__content ol{margin:0 0 16px;padding-left:1.2em} .post__content li{margin:6px 0} .post__content strong{font-weight:800} /* Headings (no rounded corners) */ .post__content h2,.post__content h3,.post__content h4{scroll-margin-top:92px} .post__content h2{margin:28px 0 12px;padding:10px 12px;font-size:20px;line-height:1.35;background:var(--ui-blue);border-left:6px solid var(--primary)} .post__content h3{margin:22px 0 10px;font-size:17px;line-height:1.4;padding-left:10px;border-left:4px solid rgba(24,78,140,.22)} .post__content h4{margin:18px 0 10px;font-size:15px;line-height:1.45;color:var(--dark)} .post__content a{color:rgba(24,78,140,1);text-decoration:underline} .post__content a:hover{text-decoration:none} /* Note / Warning (no rounded corners) */ .note,.warning{padding:14px 14px;margin:16px 0;background:#fff;border:1px solid var(--border-soft)} .note{border-left:6px solid rgba(24,78,140,.25)} .warning{border-left:6px solid rgba(233,83,79,.55)} .note__title,.warning__title{margin:0 0 6px;font-weight:900} .danger{color:var(--primary)} /* Tables */ .table-wrap{overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border-soft);background:#fff;margin:16px 0} .post-table{width:100%;border-collapse:separate;border-spacing:0;min-width:680px} .post-table th,.post-table td{padding:12px 12px;border-bottom:1px solid var(--border-soft);vertical-align:top;font-size:14px;line-height:1.7} .post-table th{position:sticky;top:0;background:var(--ui-blue);text-align:left;font-weight:800} .post-table tr:last-child td{border-bottom:none} /* FAQ */ .faq{margin:14px 0 0} .faq__item{border:1px solid var(--border-soft);background:#fff;overflow:hidden;margin:10px 0} .faq__q{cursor:pointer;padding:14px 14px;font-weight:800;list-style:none} .faq__q::-webkit-details-marker{display:none} .faq__q::after{content:"＋";float:right;font-weight:900;opacity:.7} details[open] .faq__q::after{content:"−"} .faq__a{padding:0 14px 14px} .faq__a p{margin:0} /* Local cluster links */ .local-links{margin:18px 0 8px;padding:16px 14px;border:1px solid var(--border-soft);background:#fff} .local-links__title{margin:0 0 10px;font-size:15px;font-weight:900} .local-links__grid{margin:0;padding:0;list-style:none;display:grid;gap:10px} .local-links__grid a{display:block;text-decoration:none;font-weight:800;padding:12px 12px;background:var(--ui-blue-2);border:1px solid var(--ui-blue-line)} .local-links__grid a:hover{background:#fff} @media (min-width:800px){.local-links__grid{grid-template-columns:1fr 1fr}} /* Prev/Next */ .post-nav{display:grid;grid-template-columns:1fr;gap:10px;padding:18px 22px 22px;border-top:1px solid var(--border-soft)} .post-nav a{display:block;text-decoration:none;color:var(--text-main);background:var(--ui-blue-2);border:1px solid var(--ui-blue-line);padding:14px 14px} .post-nav a:hover{background:#fff} .post-nav__label{display:block;font-size:12px;color:var(--text-muted);margin-bottom:6px} .post-nav__title{display:block;font-weight:900;line-height:1.5} @media (min-width:700px){.post-nav{grid-template-columns:1fr 1fr}} /* Bottom: Latest + tags (stack) */ .post-bottom{padding:0 0 22px} .post-bottom__stack{display:grid;grid-template-columns:1fr;gap:14px;padding:0 22px} .subhead{margin:0 0 10px;font-size:16px;font-weight:900} .latest,.taglist{background:#fff;border:1px solid var(--border-soft);padding:16px 14px} .latest__list{margin:0;padding:0;list-style:none;display:grid;gap:10px;grid-template-columns:1fr} @media (min-width:700px){.latest__list{grid-template-columns:1fr 1fr}} .latest__item a{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:10px;text-decoration:none;color:var(--text-main);padding:10px 10px;background:var(--ui-blue-2);border:1px solid transparent} .latest__item a:hover{background:#fff;border-color:var(--ui-blue-line)} .latest__thumb{width:72px;height:54px;object-fit:cover;border-radius:0;border:1px solid var(--border-soft);background:#fff} .latest__meta{display:grid;gap:6px} .latest__top{display:flex;align-items:center;justify-content:space-between;gap:10px} .latest__item time{font-size:12px;color:var(--text-muted)} .latest__tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end} .tag--mini{padding:4px 8px;font-size:12px;border-radius:999px;background:#fff;border:1px solid var(--border-soft)} .latest__title{font-weight:800;line-height:1.55} .taglist__cloud{display:flex;flex-wrap:wrap;gap:8px} .taglist__note{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-soft);color:var(--text-muted);font-size:13px} @media (min-width:900px){ .post__header,.post__intro,.forwho,.toc,.post__content,.post-nav,.post-bottom__stack{padding-left:26px;padding-right:26px} } :where(.toc a,.post__content a,.post-nav a,.latest__item a,.tag):focus{outline:3px solid rgba(255,180,0,.45);outline-offset:2px} /* ========================================================= Blog Archive (一覧ページ) ========================================================= */ .blog-layout{ display:grid; grid-template-columns: 1fr 320px; gap:24px; align-items:start; } .blog-list{min-width:0;} .blog-card{ display:grid; grid-template-columns: 180px 1fr; gap:16px; padding:16px; border:1px solid rgba(15, 30, 50, .08); border-radius:16px; background:#fff; text-decoration:none; color:inherit; box-shadow: 0 10px 30px rgba(15, 30, 50, .06); transition: transform .15s ease, box-shadow .15s ease; margin-bottom:16px; } .blog-card:hover{ transform: translateY(-2px); box-shadow: 0 18px 48px rgba(15, 30, 50, .10); } .blog-card__thumb{ border-radius:12px; overflow:hidden; aspect-ratio: 4 / 3; background:#f2f5f9; } .blog-card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .blog-card__kicker{ font-size:12px; letter-spacing:.08em; color: rgba(15, 30, 50, .72); margin:0 0 6px; } .blog-card__meta{ font-size:12px; color: rgba(15, 30, 50, .62); margin:0 0 8px; } .blog-card__title{ font-size:18px; line-height:1.4; margin:0 0 10px; } .blog-card__excerpt{ font-size:14px; line-height:1.8; color: rgba(15, 30, 50, .76); margin:0 0 12px; } .blog-card__more{ display:inline-block; font-size:13px; font-weight:700; padding:8px 12px; border-radius:999px; border:1px solid rgba(15, 30, 50, .12); background: rgba(15, 30, 50, .02); } .blog-side{position:sticky; top:16px;} .blog-widget{padding:0; margin:16px 0;} .blog-widget__title{font-size:16px; margin:0 0 12px; background:var(--ui-blue); padding:10px 12px; border-radius:10px;} .blog-widget__list{list-style:none; padding:0; margin:0;} .blog-widget__list li{margin:6px 0;} .blog-widget__list a{color:inherit; text-decoration:none;} .blog-widget__list a:hover{text-decoration:underline;} .pagination{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-start; margin-top:12px; } .pagination a{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; border-radius:10px; border:1px solid rgba(15, 30, 50, .12); background:#fff; text-decoration:none; color:inherit; font-weight:700; font-size:14px; } .pagination a[aria-disabled="true"]{ opacity:.45; pointer-events:none; } .pagination__num.is-active{ border-color: rgba(15, 30, 50, .28); background: rgba(15, 30, 50, .03); } @media (max-width: 960px){ .blog-layout{grid-template-columns: 1fr;} .blog-side{position:static;} } @media (max-width: 640px){ .blog-card{grid-template-columns: 1fr;} .blog-card__thumb{aspect-ratio: 16 / 9;} } .blog-widget{margin:34px 0;} /* Archive layout (desktop: main left, sidebar right) */ .blog-layout{display:block;} @media (min-width: 960px){ .blog-layout{display:flex; gap:32px; align-items:flex-start;} .blog-main{flex:1; min-width:0;} .blog-side{width:320px; flex:0 0 320px;} } /* --- archive layout adjustment (main narrower, sidebar right) --- */ @media (min-width: 960px){ .blog-layout{display:flex; align-items:flex-start; gap:32px;} .blog-main{flex: 0 1 720px; max-width:720px;} .blog-side{flex: 1 0 320px; max-width:320px;} } /* --- archive sidebar sticky (desktop) --- */ @media (min-width: 961px){ .blog-layout{align-items:flex-start; overflow:visible;} .blog-side{position: static; top: 24px; align-self:flex-start;} } .drawer-open .drawer-backdrop{opacity:1;pointer-events:auto} /* --- Sidebar (archive.html) --- */ .blog-side{position:sticky; top:110px;} @media (max-width: 960px){ .blog-side{position:static; top:auto; width:100%;} } .blog-widget__text{font-size:14px; line-height:1.7; margin:0 0 12px;} .btn--sm{padding:.55em 1em; font-size:14px;} /* ===== Sidebar widgets (tags / popular posts) ===== */ .tag-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0;} .tag-list a{display:inline-block;padding:6px 10px;border:1px solid #ddd;border-radius:999px;font-size:14px;line-height:1;text-decoration:none;} .tag-list a:hover{opacity:.8;} .popular-posts{margin:0;padding-left:20px;} .popular-posts li{margin:10px 0;} .popular-posts a{text-decoration:none;} .popular-posts a:hover{opacity:.8;} /* ===== Sidebar: campaign banner ===== */ .blog-campaign{ margin-bottom: 16px; } .blog-campaign__link{ display:block; padding:16px; border-radius:14px; background: linear-gradient(135deg, #fef3c7, #fde68a); color:#111; text-decoration:none; border:1px solid rgba(0,0,0,.08); } .blog-campaign__badge{ display:inline-block; font-size:12px; font-weight:700; padding:4px 8px; border-radius:999px; background:#111; color:#fff; margin-bottom:10px; } .blog-campaign__title{ display:block; font-size:16px; font-weight:800; margin-bottom:6px; } .blog-campaign__text{ display:block; font-size:14px; margin-bottom:10px; } .blog-campaign__cta{ display:inline-block; font-size:13px; font-weight:700; text-decoration:underline; } .blog-campaign__link:hover{ opacity:.92; } /* ===== Pagination ===== */ .pagination{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:24px 0 0; } .pagination__btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border:1px solid #ddd; border-radius:999px; text-decoration:none; color:#111; background:#fff; font-weight:700; white-space:nowrap; } .pagination__btn:hover{opacity:.9;} .pagination__btn.is-disabled{ opacity:.45; pointer-events:none; } .pagination__pages{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; flex:1; } .pagination__page{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #ddd; border-radius:12px; text-decoration:none; color:#111; background:#fff; font-weight:700; } .pagination__page:hover{opacity:.9;} .pagination__page.is-current{ background:#111; color:#fff; border-color:#111; } .pagination__dots{padding:0 4px; color:#666;} @media (max-width: 520px){ .pagination{flex-wrap:wrap;} .pagination__btn{flex:1;} .pagination__pages{order:3; width:100%;} } .page-header { background-image: url("../images/page/bg.jpg"); height: 300px; width: 100%; /* 背景画像を枠内に「全体表示」しつつ綺麗に見せる */ background-size: cover; background-position: center; background-repeat: no-repeat; /* 文字を縦横センタリング */ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 8px; } /* page-header内テキストのデフォルト余白を除去して、縦中央が正確に反映されるようにする */ .page-header h1, .page-header h2, .page-header p { margin: 0; } .page-header__title { text-align: center; } .page-header__slug { text-align: center; } /* --- Simple H2 heading style for Privacy Policy / Disclaimer pages --- */ .content--page h2{ font-size: 22px; font-weight: 700; line-height: 1.4; margin: 40px 0 16px; padding-left: 12px; border-left: 4px solid #333; } .content--page h2 + p{ margin-top: 0; } /* --- Table layout for Company Info (Specific Commercial Transactions) --- */ .info-table{ width: 100%; border-collapse: collapse; margin: 24px 0 40px; font-size: 16px; } .info-table th, .info-table td{ border: 1px solid #ddd; padding: 14px 16px; vertical-align: top; } .info-table th{ width: 28%; background: #f7f7f7; font-weight: 700; } .info-table a{ color: inherit; text-decoration: underline; } @media (max-width: 600px){ .info-table th, .info-table td{ display: block; width: 100%; } .info-table tr{ display: block; margin-bottom: 12px; } .info-table th{ border-bottom: none; } } /* WP fix: prevent body.tag (tag archive) from inheriting .tag pill styles */ body.tag{ display:block; align-items:initial; padding:0; border-radius:0; font-size:inherit; color:inherit; background:var(--bg); border:0; } body.tag:hover{border:0;} /* サイドバー：期間限定キャンペーン（画像のみ表示） */ .blog-campaign__link--image{ padding:0; border-radius:14px; overflow:hidden; background:none; border:1px solid rgba(0,0,0,.08); } .blog-campaign__img{ width:100%; height:auto; display:block; } /* ヘッダーCTA：電話 / オンライン予約 / お問い合わせ */ .header-actions .btn--tel{ background:#16a34a; color:#fff; border-color:transparent; } .header-actions .btn--tel:hover{ background:#15803d; } .header-actions .btn--reserve{ background:#2563eb; color:#fff; border-color:transparent; } .header-actions .btn--reserve:hover{ background:#1d4ed8; } .header-actions .btn--contact{ background:#f59e0b; color:#111827; border-color:transparent; } .header-actions .btn--contact:hover{ background:#d97706; } /* PCグローバルナビ：スクロール無効・縦ボーダー削除 */ @media (min-width: 1024px){ .global-nav, .global-nav__list{ overflow: visible; } .global-nav__item{ border-left: none; border-right: none; } .global-nav__item:first-child, .global-nav__item:last-child{ border: none; } } /* お知らせ一覧：左ボーダー削除 */ .news-item, .news-list .news-item{ border-left: none; padding-left: 0; } /* スライドショー内にキャンペーン/お知らせ画像を収める */ .slideshow, .slideshow-inner, .slideshow img{ max-width: 100%; overflow: hidden; } /* PCグローバルナビ：はみ出し対策（折り返し + 余白調整） */ @media (min-width: 1024px){ .global-nav__list{ display:flex; flex-wrap:wrap; justify-content:center; gap:0; } .global-nav__item{ white-space:nowrap; } .global-nav__link{ padding:10px 14px; font-size:14px; } } /* PCグローバルナビ：1行固定（スクロール無しで収める） */ @media (min-width: 1024px){ .global-nav__list{ display:flex; flex-wrap:nowrap !important; justify-content:space-between; align-items:center; gap:0; overflow:visible; } .global-nav__item{ flex:0 1 auto; min-width:0; white-space:nowrap; } .global-nav__link{ /* 画面幅に応じて詰める（PCで1行維持） */ font-size:clamp(12px, 1.05vw, 14px); padding:clamp(8px, .75vw, 12px) clamp(8px, .9vw, 14px); } /* アイコンがある場合は少し小さくして詰める */ .global-nav__link img, .global-nav__link svg{ width:clamp(16px, 1.15vw, 20px); height:clamp(16px, 1.15vw, 20px); } } /* PCグローバルナビ：スクロール完全除去（最終調整） */ @media (min-width: 1024px){ .global-nav{ overflow-x: hidden !important; overflow-y: visible !important; } .global-nav__list{ overflow: hidden !important; max-width: 100%; } } /* PCグローバルナビ(.gnav)：スクロール無し・1行固定・縦ボーダー削除 */ @media (min-width: 1024px){ .gnav{ overflow: hidden !important; /* scrollバーを消す */ flex-wrap: nowrap; justify-content: space-between; } .gnav a{ border-right: none !important; padding: clamp(10px, .75vw, 14px) clamp(10px, .9vw, 18px); font-size: clamp(12px, 1.05vw, 14px); } .gnav a:first-child{ border-left: none !important; } .nav-ico{ width: clamp(18px, 1.2vw, 26px); height: clamp(18px, 1.2vw, 26px); border-radius: clamp(8px, .8vw, 10px); font-size: clamp(12px, 1.0vw, 14px); } } /* スライドショー：左右ナビ（矢印）復元 */ .slideshow{ overflow: visible; } .slideshow .swiper-button-prev, .slideshow .swiper-button-next{ display: flex; opacity: 1; pointer-events: auto; z-index: 10; } /* トップ：お知らせ日付左の余白復元 */ #news .news-item{ padding-left: 16px; }