@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800;900&family=Noto+Serif+JP:wght@600;700;900&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");

:root {
      --red: #c71927;
      --red-deep: #98111c;
      --red-soft: #fff0ef;
      --orange: #ef6b2e;
      --gold: #d6a22d;
      --gold-pale: #f8e7ad;
      --navy: #102848;
      --navy-deep: #08172d;
      --blue: #2464a5;
      --cream: #fff9ed;
      --paper: #fffdf8;
      --ink: #171c25;
      --muted: #5e6672;
      --line: #e8ded0;
      --white: #ffffff;
      --shadow-sm: 0 10px 30px rgba(16, 40, 72, 0.09);
      --shadow-md: 0 20px 50px rgba(16, 40, 72, 0.15);
      --radius-sm: 14px;
      --radius-md: 22px;
      --radius-lg: 34px;
      --container: 1180px;
      --header-height: 72px;
    }

*, *::before, *::after { box-sizing: border-box; }

html {
      scroll-behavior: smooth;
      scroll-padding-top: calc(var(--header-height) + 20px);
    }

body {
      margin: 0;
      min-width: 320px;
      overflow-x: hidden;
      color: var(--ink);
      background:
        radial-gradient(circle at 15% 5%, rgba(214, 162, 45, 0.08) 0 2px, transparent 3px) 0 0 / 28px 28px,
        var(--paper);
      font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 16px;
      line-height: 1.8;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

body.menu-open { position: fixed; width: 100%; overflow: hidden; }

img { display: block; max-width: 100%; }

figure { margin: 0; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; }

button { cursor: pointer; }

:focus-visible {
      outline: 3px solid #ffcc3a;
      outline-offset: 4px;
    }

.skip-link {
      position: fixed;
      top: 10px;
      left: 10px;
      z-index: 9999;
      padding: 10px 16px;
      color: var(--white);
      background: var(--navy);
      border-radius: 8px;
      transform: translateY(-150%);
      transition: transform .2s ease;
    }

.skip-link:focus { transform: translateY(0); }

.container {
      width: min(100% - 32px, var(--container));
      margin-inline: auto;
    }

.button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 52px;
      padding: 13px 22px;
      border: 1px solid transparent;
      border-radius: 999px;
      font-size: 15px;
      font-weight: 800;
      line-height: 1.4;
      transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
    }

.button:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 24px rgba(16, 40, 72, .18);
    }

.button--primary { color: var(--white); background: var(--red); }

.button--primary:hover { background: var(--red-deep); }

.button--light { color: var(--navy); background: var(--white); }

.button--outline { color: var(--navy); border-color: rgba(16,40,72,.24); background: transparent; }

.button--outline:hover { color: var(--white); background: var(--navy); }

.button--gold { color: var(--navy-deep); background: #ffd86a; }

.button__arrow {
      display: grid;
      width: 25px;
      height: 25px;
      place-items: center;
      border-radius: 50%;
      background: rgba(255,255,255,.18);
    }

.button--light .button__arrow,
    .button--gold .button__arrow,
    .button--outline .button__arrow { background: rgba(16,40,72,.08); }

.event-bar {
      position: relative;
      z-index: 80;
      color: var(--white);
      background: linear-gradient(90deg, var(--red-deep), var(--red), var(--orange));
    }

.event-bar__inner {
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 8px 0;
      text-align: center;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .02em;
    }

.event-bar__inner strong { color: #fff4a8; }

.site-header {
      position: sticky;
      top: 0;
      z-index: 70;
      height: var(--header-height);
      border-bottom: 1px solid rgba(16,40,72,.08);
      background: rgba(255,253,248,.94);
      backdrop-filter: blur(16px);
      transition: box-shadow .25s ease, height .25s ease;
    }

.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(16,40,72,.12); }

.site-header__inner {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

.brand {
      display: inline-flex;
      min-width: 0;
      align-items: center;
      gap: 10px;
    }

.brand__logo {
      width: 92px;
      height: 46px;
      object-fit: contain;
      flex: 0 0 auto;
    }

.brand__text {
      min-width: 0;
      color: var(--navy);
      line-height: 1.3;
    }

.brand__name {
      display: block;
      overflow: hidden;
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

.brand__en {
      display: none;
      margin-top: 3px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
    }

.desktop-nav { display: none; }

.menu-button {
      position: relative;
      width: 48px;
      height: 48px;
      flex: 0 0 auto;
      border: 0;
      border-radius: 50%;
      color: var(--white);
      background: var(--red);
      box-shadow: 0 8px 18px rgba(199,25,39,.25);
    }

.menu-button span {
      position: absolute;
      left: 14px;
      width: 20px;
      height: 2px;
      border-radius: 99px;
      background: currentColor;
      transition: transform .25s ease, opacity .25s ease, top .25s ease;
    }

.menu-button span:nth-child(1) { top: 16px; }

.menu-button span:nth-child(2) { top: 23px; }

.menu-button span:nth-child(3) { top: 30px; }

.menu-button[aria-expanded="true"] span:nth-child(1) { top: 23px; transform: rotate(45deg); }

.menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }

.menu-button[aria-expanded="true"] span:nth-child(3) { top: 23px; transform: rotate(-45deg); }

.mobile-menu {
      position: fixed;
      inset: var(--header-height) 0 0;
      z-index: 65;
      visibility: hidden;
      opacity: 0;
      background: rgba(8,23,45,.48);
      transition: opacity .25s ease, visibility .25s ease;
    }

.mobile-menu.is-open { visibility: visible; opacity: 1; }

.mobile-menu__panel {
      width: min(92%, 430px);
      height: 100%;
      margin-left: auto;
      overflow-y: auto;
      padding: 26px 24px 40px;
      color: var(--white);
      background:
        radial-gradient(circle at 100% 0, rgba(214,162,45,.22), transparent 35%),
        var(--navy-deep);
      transform: translateX(100%);
      transition: transform .28s ease;
    }

.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }

.mobile-menu__nav {
      display: grid;
      gap: 0;
      margin-bottom: 26px;
    }

.mobile-menu__nav a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 58px;
      border-bottom: 1px solid rgba(255,255,255,.13);
      font-size: 17px;
      font-weight: 700;
    }

.mobile-menu__nav i { color: #ffd86a; }

.mobile-menu__sub {
      margin: 20px 0 0;
      color: rgba(255,255,255,.7);
      font-size: 13px;
    }

.site-footer {
      color: rgba(255,255,255,.84);
      background: var(--navy-deep);
    }

.site-footer__main {
      display: grid;
      gap: 34px;
      padding: 48px 0 36px;
    }

.footer-brand__logo {
      width: min(100%, 270px);
      margin-bottom: 14px;
      filter: brightness(0) invert(1);
    }

.footer-brand p { margin: 0; color: rgba(255,255,255,.62); font-size: 13px; }

.footer-contact h3,
    .footer-links h3 {
      margin: 0 0 14px;
      color: #ffd86a;
      font-size: 15px;
    }

.footer-contact__phone {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
      color: var(--white);
      font-size: 24px;
      font-weight: 900;
      letter-spacing: .03em;
    }

.footer-contact p { margin: 0; color: rgba(255,255,255,.62); font-size: 13px; }

.footer-links__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 18px;
    }

.footer-links a { font-size: 13px; transition: color .2s ease; }

.footer-links a:hover { color: #ffd86a; }

.footer-social {
      display: flex;
      gap: 10px;
      margin-top: 18px;
    }

.footer-social a {
      display: grid;
      width: 42px;
      height: 42px;
      place-items: center;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 50%;
      color: var(--white);
      background: rgba(255,255,255,.06);
      transition: transform .2s ease, background .2s ease;
    }

.footer-social a:hover { transform: translateY(-3px); background: var(--red); }

.site-footer__bottom {
      border-top: 1px solid rgba(255,255,255,.09);
      padding: 18px 0 22px;
    }

.site-footer__bottom-inner {
      display: grid;
      gap: 10px;
      color: rgba(255,255,255,.5);
      font-size: 12px;
      text-align: center;
    }

.footer-languages {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 14px;
    }

@media (min-width: 600px) {
:root { --header-height: 78px; }

.container { width: min(100% - 48px, var(--container)); }

.brand__logo { width: 112px; height: 54px; }

.brand__name { font-size: 15px; }

.brand__en { display: block; }

.site-footer__bottom-inner { grid-template-columns: 1fr auto; align-items: center; text-align: left; }

.footer-languages { justify-content: flex-end; }
}

@media (min-width: 760px) {
.site-footer__main { grid-template-columns: 1.05fr .8fr 1fr; gap: 50px; }
}

@media (min-width: 1040px) {
:root { --header-height: 88px; }

.menu-button { display: none; }

.desktop-nav {
        display: flex;
        align-items: center;
        gap: 3px;
      }

.desktop-nav > a {
        position: relative;
        padding: 12px 10px;
        color: var(--navy);
        font-size: 13px;
        font-weight: 800;
      }

.desktop-nav > a::after {
        content: "";
        position: absolute;
        right: 10px;
        bottom: 6px;
        left: 10px;
        height: 3px;
        border-radius: 99px;
        background: linear-gradient(90deg, var(--red), var(--gold));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .2s ease;
      }

.desktop-nav > a:hover::after { transform: scaleX(1); }

.desktop-nav .button { min-height: 46px; margin-left: 8px; padding-inline: 18px; color: var(--white); font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }

*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* compact-global-nav */
@media (min-width:1100px){
  .brand__logo{width:90px;height:48px}
  .brand__name{font-size:13px}
  .brand__en{display:none}
  .desktop-nav{gap:1px}
  .desktop-nav>a{flex:0 0 auto;padding:12px 6px;font-size:12px;white-space:nowrap}
  .desktop-nav>a::after{right:6px;left:6px}
  .desktop-nav .button{min-height:44px;margin-left:5px;padding-inline:13px;font-size:12px}
}
/* /compact-global-nav */

/* 2026 design renewal: shared frame */
:root {
  --red:#e3122f;
  --red-deep:#bb0b23;
  --red-soft:#fff1f3;
  --orange:#ef6b2e;
  --gold:#f3bb3d;
  --gold-pale:#fff0b7;
  --navy:#071a3d;
  --navy-deep:#041126;
  --blue:#145ac6;
  --cream:#fffaf0;
  --paper:#fff;
  --ink:#10213a;
  --muted:#61708a;
  --line:rgba(16,33,58,.13);
  --shadow-sm:0 12px 34px rgba(7,26,61,.10);
  --shadow-md:0 22px 60px rgba(7,26,61,.16);
  --radius-sm:14px;
  --radius-md:20px;
  --radius-lg:30px;
}

body { padding-left:8px; background:var(--white); }
body::before { content:""; position:fixed; inset:0 auto 0 0; z-index:1000; width:8px; background:var(--red); pointer-events:none; }
.event-bar { display:none; }
.site-header { position:fixed; top:0; right:0; left:8px; z-index:80; width:auto; color:var(--white); background:linear-gradient(180deg,rgba(4,17,38,.72),transparent); border-bottom:1px solid transparent; box-shadow:none; transition:background .22s ease,border-color .22s ease,box-shadow .22s ease,color .22s ease; }
.site-header.is-scrolled { color:var(--navy); background:rgba(255,255,255,.96); border-color:var(--line); box-shadow:0 8px 28px rgba(7,26,61,.09); backdrop-filter:blur(12px); }
.dogyoretsu-site .site-header:not(.is-scrolled) .brand-ja,.dogyoretsu-site .site-header:not(.is-scrolled) .brand-en,.dogyoretsu-site .site-header:not(.is-scrolled) .desktop-nav>a { color:var(--white); }
.dogyoretsu-site .site-header:not(.is-scrolled) .menu-button { color:var(--white); border-color:rgba(255,255,255,.42); background:rgba(7,26,61,.32); }
.dogyoretsu-site .site-header:not(.is-scrolled) .menu-button span { background:var(--white); }
.desktop-nav>a { font-weight:800; letter-spacing:.03em; }
.desktop-nav>a::after { height:3px; background:var(--red); }
.button { border-radius:999px; }
.button--primary { background:var(--red); box-shadow:none; }
.button--primary:hover { background:var(--red-deep); }
.site-footer { position:relative; overflow:hidden; background:var(--navy); }
.site-footer::before { content:"MATSUE DO-GYORETSU"; position:absolute; right:-.02em; bottom:-.22em; color:rgba(255,255,255,.035); font-size:clamp(70px,12vw,190px); font-weight:900; line-height:1; letter-spacing:-.06em; white-space:nowrap; pointer-events:none; }
.site-footer__main,.site-footer__bottom { position:relative; z-index:1; }

@media (max-width:1039px) {
  .site-header { background:rgba(4,17,38,.72); }
  .site-header.is-scrolled { background:rgba(255,255,255,.97); }
}

/* Reference design: shared header and footer */
.site-header{height:76px;padding-left:0}.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:14px}.header-brand{display:flex;align-items:center;min-width:0}.brand-symbol{display:block;width:42px;height:42px;flex:0 0 42px;margin-right:11px;background:#fff;border-radius:50%;object-fit:contain}.brand-ja{display:block;font-size:.9rem;font-weight:900;white-space:nowrap}.brand-en{display:block;margin-top:1px;font-size:.59rem;font-weight:800;letter-spacing:.1em;opacity:.72;white-space:nowrap}.header-cta{display:none;align-items:center;min-height:42px;padding:0 18px;color:#fff;background:var(--red);border-radius:999px;font-size:.8rem;font-weight:900}.mobile-panel .mobile-contact{color:#fff;background:var(--red);justify-content:center}.site-footer{position:relative;overflow:hidden;padding:64px 0 28px;color:#fff;background:#04122c}.site-footer::before{content:"";position:absolute;top:0;left:0;width:100%;height:5px;background:linear-gradient(90deg,var(--red) 0 70%,var(--gold) 70%)}.site-footer::after{content:"";position:absolute;inset:0;opacity:.1;background:repeating-radial-gradient(circle at 0 100%,transparent 0 28px,#fff 29px 31px,transparent 32px 58px);pointer-events:none}.footer-grid{position:relative;z-index:1;display:grid;gap:38px}.footer-logo{width:min(320px,100%);padding:18px 22px;background:#fff;border-radius:22px}.footer-logo img{width:100%;max-height:120px;object-fit:contain}.footer-copy{margin:18px 0 0;color:rgba(255,255,255,.68);font-size:.82rem}.footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}.footer-nav a{color:rgba(255,255,255,.78);font-size:.82rem;font-weight:800}.footer-nav a:hover{color:var(--gold)}.footer-bottom{position:relative;z-index:1;display:grid;gap:12px;margin-top:40px;padding-top:22px;color:rgba(255,255,255,.52);border-top:1px solid rgba(255,255,255,.12);font-size:.7rem}
@media(min-width:1040px){.site-header{height:86px}.header-cta{display:inline-flex}.footer-grid{grid-template-columns:1fr 1fr;align-items:start}.footer-bottom{grid-template-columns:1fr auto;align-items:end}}
.footer-logo{padding:0;background:transparent;border-radius:0}.footer-logo img{max-height:150px}
.dogyoretsu-site .site-header .brand-symbol{border:0}
.dogyoretsu-site .site-header .brand-symbol{background:transparent;filter:none}

@keyframes header-symbol-spin{to{transform:rotate(360deg)}}
@media(hover:hover) and (pointer:fine){
  .dogyoretsu-site .site-header .header-brand:hover .brand-symbol{animation:header-symbol-spin 1s linear infinite}
}
@media(prefers-reduced-motion:reduce){
  .dogyoretsu-site .site-header .header-brand:hover .brand-symbol{animation:none}
}

/* Keep the header background frame away from the viewport edge */
.dogyoretsu-site .site-header {
  top: 10px;
  right: 12px;
  left: 20px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 14px;
}

.dogyoretsu-site .site-header::before {
  content: "";
  position: absolute;
  top: -10px;
  right: -12px;
  left: -20px;
  z-index: 0;
  height: calc(66.666% + 10px);
  background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,.08) 58%, rgba(255,255,255,.2));
  backdrop-filter: blur(32px) saturate(145%);
  -webkit-backdrop-filter: blur(32px) saturate(145%);
  -webkit-mask-image: linear-gradient(to top, transparent, rgba(0,0,0,.72) 55%, #000);
  mask-image: linear-gradient(to top, transparent, rgba(0,0,0,.72) 55%, #000);
  pointer-events: none;
}

.dogyoretsu-site .site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg,rgba(4,17,38,.72),transparent);
  border-radius: inherit;
  transition: background .22s ease;
  pointer-events: none;
}

.dogyoretsu-site .site-header.is-scrolled::after {
  background: rgba(255,255,255,.96);
}

.dogyoretsu-site .site-header .header-inner {
  position: relative;
  z-index: 1;
}

@media(max-width:1039px){
  .dogyoretsu-site .site-header::after{background:rgba(4,17,38,.72)}
  .dogyoretsu-site .site-header.is-scrolled::after{background:rgba(255,255,255,.97)}
}

/* Improve header label readability */
.dogyoretsu-site .site-header .brand-ja{font-size:1.15rem}
.dogyoretsu-site .site-header .brand-en{font-size:.5rem;font-weight:400}

@media(min-width:1040px){
  .dogyoretsu-site .site-header .brand-ja{font-size:1.3rem}
  .dogyoretsu-site .site-header .desktop-nav>a{font-size:clamp(.88rem,.85vw,.96rem)}
  .dogyoretsu-site .site-header .header-cta{font-size:.9rem;transition:transform .25s cubic-bezier(.22,1,.36,1),background-color .28s ease}
}

@media(min-width:1040px) and (hover:hover) and (pointer:fine){
  .dogyoretsu-site .site-header .header-cta:hover{color:var(--white);background:#ea2943;transform:translateY(-2px)}
}

/* Accessible mobile navigation */
@media(max-width:1039px){
  body.menu-open{position:static;top:auto!important;width:auto;overflow:hidden}
  body.menu-open .site-header{transition:none!important}
  .dogyoretsu-site .menu-button{display:grid;place-items:center}
  .dogyoretsu-site .menu-button .menu-lines,
  .dogyoretsu-site .menu-button .menu-lines::before,
  .dogyoretsu-site .menu-button .menu-lines::after{display:block;width:21px;height:2px;border-radius:10px;background:currentColor;transition:transform .25s ease,background-color .25s ease}
  .dogyoretsu-site .menu-button .menu-lines{position:relative;top:auto;left:auto;transform:none}
  .dogyoretsu-site .menu-button .menu-lines::before,
  .dogyoretsu-site .menu-button .menu-lines::after{content:"";position:absolute;left:0}
  .dogyoretsu-site .menu-button .menu-lines::before{top:-7px}
  .dogyoretsu-site .menu-button .menu-lines::after{top:7px}
  .dogyoretsu-site .site-header .menu-button[aria-expanded="true"] .menu-lines{top:auto!important;left:auto!important;background:transparent!important;transform:none!important;transition:none!important}
  .dogyoretsu-site .menu-button[aria-expanded="true"] .menu-lines::before{transform:translateY(7px) rotate(45deg)!important;transition:none!important}
  .dogyoretsu-site .menu-button[aria-expanded="true"] .menu-lines::after{transform:translateY(-7px) rotate(-45deg)!important;transition:none!important}

  .dogyoretsu-site .mobile-panel{position:fixed;inset:76px 0 0 8px;z-index:75;padding:0;background:rgba(4,17,38,.58);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);visibility:hidden;opacity:0;transform:none;pointer-events:none;transition:opacity .25s ease,visibility .25s ease}
  .dogyoretsu-site .mobile-panel.is-open{visibility:visible!important;opacity:1!important;transform:none!important;pointer-events:auto!important}
  .dogyoretsu-site .mobile-panel nav{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:10px;width:min(calc(100% - 56px),430px);height:100%;margin-left:auto;padding:22px 20px 34px;overflow-y:auto;background:rgba(255,255,255,.98);box-shadow:-18px 0 42px rgba(4,17,38,.22);transform:translateX(100%);transition:transform .28s ease}
  .dogyoretsu-site .mobile-panel a{display:flex;min-height:48px;align-items:center;padding:8px 14px;color:var(--navy);background:#dcecff;border:1px solid #b8d5f2;border-radius:12px;box-shadow:0 4px 12px rgba(7,26,61,.08);font-size:.9rem;font-weight:900;line-height:1.45}
  .dogyoretsu-site .mobile-panel a.is-current{color:var(--white);background:var(--navy);border-color:var(--navy);box-shadow:0 6px 16px rgba(7,26,61,.18)}
  .dogyoretsu-site .mobile-panel .mobile-contact{grid-column:1/-1;color:var(--white);background:var(--red);justify-content:center}
  .dogyoretsu-site .mobile-panel .mobile-contact.is-current{background:var(--red-deep);border:2px solid var(--gold);box-shadow:0 0 0 3px rgba(243,187,61,.2),0 6px 16px rgba(7,26,61,.18)}
  .dogyoretsu-site .mobile-panel.is-open nav{transform:translateX(0)!important}
  .dogyoretsu-site .mobile-panel{top:86px}
}

@media(min-width:1040px){
  .dogyoretsu-site .mobile-panel{display:none}
}

.dogyoretsu-site .desktop-nav>a.is-current{color:var(--red)}
.dogyoretsu-site .desktop-nav>a.is-current::after{transform:scaleX(1)}
.dogyoretsu-site .header-cta.is-current{color:var(--white);background:var(--red-deep);box-shadow:0 0 0 2px var(--gold),0 0 0 5px rgba(243,187,61,.18)}

@media(min-width:720px){
  .dogyoretsu-site a[href^="tel:"]{color:inherit!important;text-decoration:none!important;cursor:text;pointer-events:none}
}