:root {
  --accent: #f74335;
  --accent-dark: #e52e24;
  --orange: #ff8619;
  --orange-light: #fff0e5;
  --text: #242424;
  --muted: #626262;
  --line: #e9e4df;
  --soft: #fff9f6;
  --white: #fff;
  --shadow: 0 10px 30px rgba(43, 30, 21, .07);
  --radius: 10px;
  --container: min(1180px, calc(100% - 52px));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Arial, sans-serif; line-height: 1.7; background: var(--white); }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
p, h1, h2, h3 { margin: 0; }
.container { width: var(--container); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 20; height: 82px; background: rgba(255,255,255,.97); border-bottom: 1px solid #f0eeeb; backdrop-filter: blur(12px); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 34px; }
.brand { display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; }
.brand-mark { position: relative; display: inline-block; width: 42px; height: 42px; transform: skew(-12deg); }
.brand-mark::before { content: ""; position: absolute; left: 1px; top: 21px; width: 34px; height: 11px; border-radius: 12px 2px 12px 2px; background: linear-gradient(100deg, var(--accent), var(--orange)); transform: rotate(-45deg); }
.brand-mark::after { content: ""; position: absolute; left: 20px; top: 5px; width: 11px; height: 24px; border-radius: 12px 10px 2px 12px; background: var(--accent); transform: rotate(37deg); }
.brand-mark i { position: absolute; right: 4px; bottom: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text small { font-size: 10px; letter-spacing: .13em; font-weight: 700; color: #4c4c4c; }
.brand-text strong { font-size: 20px; letter-spacing: .02em; font-weight: 800; }
.global-nav { margin-left: auto; display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.global-nav a { position: relative; padding: 30px 0 27px; }
.global-nav a:hover, .global-nav .current { color: var(--accent); }
.global-nav .current::after { content: ""; position: absolute; bottom: 18px; left: 0; right: 0; height: 2px; background: var(--accent); }
.header-cta { padding: 15px 24px; border-radius: 28px; color: var(--white); font-size: 14px; font-weight: 700; background: linear-gradient(100deg, var(--accent), var(--orange)); box-shadow: 0 8px 18px rgba(246, 67, 53, .24); white-space: nowrap; }
.menu-button { display: none; border: 0; border-radius: 50%; width: 48px; height: 48px; background: #fff7f2; color: var(--accent); }
.menu-button span { display:block; width: 18px; height: 2px; background: var(--accent); margin: 4px auto; }
.menu-button small { font-size: 8px; }
.hero { min-height: 548px; position: relative; overflow: hidden; background: #f7f3ef; }
.hero-image { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(255,255,255,.99) 5%, rgba(255,255,255,.92) 24%, rgba(255,255,255,.15) 54%, rgba(255,255,255,0) 100%), url("images/hero.jpg"); background-position: center, center; background-size: cover; }
.hero::before { content: ""; position: absolute; z-index: 1; width: 180px; height: 180px; left: -72px; bottom: -54px; border-radius: 50%; background: radial-gradient(circle, rgba(255,132,26,.46), rgba(255,132,26,0) 67%); }
.hero-inner { min-height: 548px; position: relative; z-index: 2; display: flex; align-items: center; }
.hero-copy { padding: 22px 0 28px; }
.eyebrow { display: none; color: var(--accent); font-size: 12px; letter-spacing: .12em; font-weight: 800; }
.hero h1 { font-size: clamp(43px, 4.3vw, 58px); line-height: 1.35; letter-spacing: .06em; font-weight: 800; }
.hero h1 span { color: var(--accent); }
.hero-lead { font-weight: 600; line-height: 2.1; margin-top: 16px; font-size: 16px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 38px; min-height: 58px; padding: 0 36px; border-radius: 34px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.primary { margin-top: 34px; min-width: 288px; background: linear-gradient(100deg, var(--accent), var(--orange)); color: var(--white); box-shadow: 0 8px 22px rgba(247,67,53,.25); }
.button span { font-size: 20px; }
.message-badge { position: absolute; right: 14px; bottom: 66px; width: 207px; height: 207px; border-radius: 50%; display: grid; place-content: center; padding-left: 12px; color: var(--accent); font-family: Georgia, serif; font-style: italic; font-size: 27px; line-height: 1.45; transform: rotate(-7deg); background: rgba(255, 226, 190, .92); box-shadow: 0 2px 30px rgba(245, 137, 53, .17); }
.features { padding: 34px 0 36px; background: #fff; }
.section-title { text-align: center; font-size: 25px; font-weight: 800; letter-spacing: .04em; margin-bottom: 32px; }
.features .section-title::before, .features .section-title::after { content: ""; display: inline-block; vertical-align: middle; width: 46px; height: 1px; background: #888; margin: 0 40px; }
.section-title span { color: var(--accent); }
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.feature { text-align: center; padding: 0 16px; }
.feature h3 { color: var(--accent); font-size: 17px; margin: 11px 0 7px; }
.feature p { font-size: 13px; font-weight: 600; color: #454545; line-height: 1.8; }
.icon { position: relative; display: block; width: 45px; height: 45px; margin-inline: auto; color: var(--accent); }
.icon-heart::before { content: "♡"; font-size: 55px; line-height: 45px; font-family: Arial; }
.icon-calendar { border: 3px solid currentColor; border-radius: 6px; margin-top: 3px; height: 39px; }
.icon-calendar::before { content: ""; position:absolute; top: 9px; left: 0; right: 0; border-top: 3px solid currentColor; }
.icon-calendar::after { content: "•••"; position:absolute; left: 7px; bottom: 0; letter-spacing: 3px; font-weight: 900; }
.icon-person::before { content:""; position:absolute; left: 16px; top: 2px; width: 14px; height:14px; border: 3px solid currentColor; border-radius: 50%; }
.icon-person::after { content:""; position:absolute; left: 9px; bottom: 4px; width: 27px; height: 22px; border: 3px solid currentColor; border-radius: 18px 18px 7px 7px; }
.icon-shoe::before { content:""; position:absolute; left: 2px; bottom: 10px; width: 39px; height: 17px; border: 3px solid currentColor; border-radius: 4px 17px 10px 13px; transform: rotate(-14deg); }
.icon-shoe::after { content:""; position:absolute; left: 19px; top: 13px; width: 13px; height: 3px; background: currentColor; box-shadow: -4px 6px currentColor; transform: rotate(-14deg); }
.program { border-top: 1px solid var(--line); padding: 34px 0 30px; }
.section-head { position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; }
.section-head .section-title { margin-bottom: 0; }
.section-head .section-title::after { content:""; display:block; margin: 9px auto 0; width: 37px; height: 3px; background: var(--accent); }
.outline-link { display: inline-flex; align-items: center; justify-content: center; gap: 16px; height: 42px; padding: 0 22px; border: 1px solid var(--accent); border-radius: 24px; font-size: 13px; font-weight: 700; color: var(--accent); }
.section-head .outline-link { position: absolute; right: 0; top: 3px; }
.program-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.program-card { overflow:hidden; border: 1px solid #ebe8e5; border-radius: 7px; background: #fff; box-shadow: var(--shadow); }
.program-card img { width:100%; aspect-ratio: 1.52; object-fit:cover; }
.program-card div { position:relative; padding: 14px 18px 18px; min-height: 97px; }
.program-card h3 { font-size:15px; color:var(--accent); margin-bottom:5px; }
.program-card p { font-size:12px; font-weight:600; }
.program-card a { position:absolute; right:13px; bottom:15px; width:27px; height:27px; display:grid; place-content:center; border: 1px solid #f6b0aa; border-radius:50%; color:var(--accent); }
.campaign { padding: 0 0 27px; }
.campaign-inner { position: relative; min-height: 140px; border: 1px solid #ffb39f; border-radius: 8px; overflow:hidden; display:flex; align-items:center; background: linear-gradient(90deg, #fff5ed, #fff 56%, #fff1e6); }
.campaign-copy { position:relative; z-index: 2; padding: 22px 0 20px 210px; }
.campaign-copy::before { content:""; position:absolute; left:-40px; bottom:-110px; width:245px; height:245px; border-radius:50%; background:radial-gradient(circle at top right, #ffe1c6, #fff1e8 45%, transparent 68%); }
.campaign-tag { position:absolute; z-index:1; top:25px; left:54px; padding: 8px 25px; background:var(--accent); color:#fff; font-size:13px; font-weight:700; clip-path: polygon(8% 0,100% 0,94% 50%,100% 100%,8% 100%,0 50%); }
.campaign-copy h2 { font-size:29px; color:var(--accent); letter-spacing:.06em; margin-bottom:8px; }
.campaign-price { display:flex; align-items:baseline; gap:22px; font-weight:700; }
.campaign-price em { color:var(--accent); font-style:normal; font-size:33px; margin-left:12px; }
.campaign-copy small { display:block; font-size:10px; color:#666; margin-left:48px; }
.campaign-inner img { position:absolute; right:248px; height:100%; width:294px; object-fit: cover; object-position: 63% center; mask-image:linear-gradient(90deg, transparent, #000 25%, #000); }
.campaign-button { position:absolute; right:35px; top:41px; min-width: 202px; height:56px; min-height:56px; margin-top:0; font-size:13px; padding-inline:22px; gap:20px; }
.guide { padding: 0 0 32px; }
.guide-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }
.guide-card { display:grid; grid-template-columns:1.02fr .98fr; min-height: 188px; overflow:hidden; border-radius:8px; background:#fffaf7; }
.guide-copy { padding: 28px 20px 22px 35px; }
.guide-copy h2 { font-size:21px; margin-bottom: 10px; }
.guide-copy p { font-size:12px; font-weight:600; line-height:1.9; margin-bottom:18px; }
.guide-copy .outline-link { height:38px; font-size:12px; padding-inline:19px; }
.guide-card img { width:100%; height:100%; object-fit:cover; }
.trial { background: linear-gradient(105deg, var(--accent), var(--orange)); color: #fff; padding: 30px 0; }
.trial-inner { display:flex; align-items:center; justify-content:center; gap:62px; }
.trial p { font-size:13px; font-weight:700; }
.trial h2 { font-size:28px; letter-spacing:.06em; }
.white { color:var(--accent); background:#fff; min-height:52px; }
.site-footer { padding: 34px 0 16px; border-top:1px solid #f3eeea; }
.footer-grid { display:grid; grid-template-columns: 1.35fr 1.8fr 1fr 1.1fr 1fr; gap:34px; align-items:start; }
.site-footer .brand-text strong { font-size:19px; }
.footer-info { font-size:12px; font-weight:600; line-height:1.8; }
.footer-info p + p { margin-top:8px; }
.footer-info .tel { color: var(--accent); font-size:13px; }
.footer-menu h2, .social h2 { font-size:12px; margin-bottom:10px; }
.footer-menu a { display:block; font-size:11px; line-height:2; font-weight:600; }
.social > div { display:flex; gap:11px; margin-top:18px; }
.social a { display:grid; place-content:center; width:29px; height:29px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; }
.social a:nth-child(2) { background:#22bd57; }
.social a:nth-child(3) { background:#2683e8; }
.copyright { text-align:center; color:#777; font-size:10px; margin-top:30px; }
@media (max-width: 1100px) {
  .global-nav { display:none; }
  .header-inner { justify-content:space-between; }
  .header-cta { margin-left:auto; }
  .menu-button { display:block; }
  .campaign-copy { padding-left: 130px; }
  .campaign-tag { left:24px; }
  .campaign-inner img { opacity:.4; right:180px; }
}
@media (max-width: 820px) {
  :root { --container: min(100% - 36px, 620px); }
  .site-header { height:70px; }
  .header-cta { display:none; }
  .hero, .hero-inner { min-height: 600px; }
  .hero-image { background-image: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.96) 53%, #fff 100%), url("images/hero.jpg"); background-position:center top; }
  .hero-inner { align-items:flex-end; padding-bottom:34px; }
  .hero h1 { font-size:38px; }
  .hero-lead { font-size:14px; }
  .primary { margin-top:21px; }
  .message-badge { display:none; }
  .features .section-title::before, .features .section-title::after { display:none; }
  .features-grid, .program-grid, .guide-grid { grid-template-columns:repeat(2, 1fr); }
  .section-head { display:block; text-align:center; }
  .section-head .outline-link { position:static; margin-top:18px; }
  .campaign-inner { flex-direction:column; align-items:stretch; padding-bottom:25px; }
  .campaign-copy { padding:25px 20px 18px; text-align:center; }
  .campaign-tag { position:static; display:inline-block; margin-bottom:12px; }
  .campaign-copy h2 { font-size:24px; }
  .campaign-price { justify-content:center; flex-wrap:wrap; gap:8px 16px; }
  .campaign-copy small { margin-left:0; }
  .campaign-inner img { display:none; }
  .campaign-button { position:static; margin:0 auto; }
  .guide-card { grid-template-columns:1fr; }
  .guide-card img { max-height:185px; grid-row:1; }
  .trial-inner { flex-direction:column; gap:18px; text-align:center; }
  .footer-grid { grid-template-columns:repeat(2, 1fr); gap:28px; }
}
@media (max-width: 540px) {
  .brand-text strong { font-size:17px; }
  .features-grid, .program-grid, .guide-grid, .footer-grid { grid-template-columns:1fr; }
  .section-title { font-size:21px; }
  .hero h1 { font-size:34px; }
  .button { width:100%; }
  .feature { padding-block:10px; }
}