:root {
  --red: #d70c18;
  --yellow: #fcc926;
  --ink: #231815;
  --white: #fff;
  --design-width: 1440px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--yellow);
  font-family: "Noto Sans JP", sans-serif;
  font-feature-settings: "palt" 1;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

button,
summary {
  font: inherit;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 8px;
  left: 8px;
  padding: 10px 18px;
  color: var(--white);
  background: var(--ink);
  border-radius: 999px;
  transform: translateY(-160%);
}

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

/* Header — Figma v02: y=0〜129.494、ロゴだけ円形にヒーローへ重なる */
.download-header {
  position: relative;
  z-index: 20;
  height: 129.494px;
  background: var(--white);
}

.header-inner {
  position: relative;
  width: min(100%, var(--design-width));
  height: 100%;
  margin-inline: auto;
}

.header-logo {
  position: absolute;
  z-index: 2;
  top: 36.017px;
  left: max(24px, calc(50% - 658.218px));
  width: 237.911px;
  height: 132.62px;
  text-decoration: none;
}

.header-logo::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -107px;
  left: 50%;
  width: 330px;
  height: 294px;
  background: var(--white);
  border-radius: 50%;
  transform: translateX(-50%);
}

.header-logo img {
  width: 100%;
  height: 100%;
}

.desktop-nav {
  position: absolute;
  top: 45px;
  left: calc(50% - 45.041px);
  width: 716px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.desktop-nav a {
  position: relative;
  padding: 10px 0 10px 21px;
  text-decoration: none;
  white-space: nowrap;
}

.desktop-nav a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  background: var(--red);
  border: 2px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--red);
  transform: translateY(-50%);
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible {
  color: var(--red);
}

.desktop-nav .download-instagram-link {
  display: grid;
  width: 50px;
  height: 50px;
  padding: 0;
  place-items: center;
}

.desktop-nav .download-instagram-link::before {
  display: none;
}

.download-instagram-link svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mobile-menu {
  display: none;
}

/* Hero — Figma v02 Hero/Desktop（1440×711.288）の実座標 */
.download-hero {
  position: relative;
  z-index: 1;
  height: 711.288px;
  overflow: hidden;
  background: var(--yellow);
}

.hero-canvas {
  position: relative;
  left: 50%;
  width: var(--design-width);
  height: 100%;
  transform: translateX(-50%);
}

.hero-canvas > img,
.hero-heading,
.hero-heading-background {
  position: absolute;
}

.hero-confetti {
  z-index: 0;
  top: 0;
  left: 0;
  width: 1440px;
  height: 833.781px;
  max-width: none;
}

.hero-people {
  z-index: 2;
  top: 292.15px;
  left: 131.594px;
  width: 228.178px;
  height: 392.969px;
}

.hero-onsen {
  z-index: 2;
  top: 84.957px;
  left: 974.947px;
  width: 323.592px;
  height: 319.545px;
}

.hero-airplane {
  z-index: 2;
  top: 128.169px;
  left: 219.707px;
  width: 197.728px;
  height: 90.034px;
}

.hero-suitcase {
  z-index: 2;
  top: 509.197px;
  left: 1056.119px;
  width: 83.764px;
  height: 109.873px;
}

.hero-bag {
  z-index: 2;
  top: 618.91px;
  left: 1141.846px;
  width: 76.677px;
  height: 69.148px;
}

.hero-emblem {
  z-index: 3;
  top: 84.205px;
  left: 456.877px;
  width: 522.366px;
  height: 463.803px;
}

.hero-heading-background {
  z-index: 3;
  top: 577.87px;
  left: 351.65px;
  width: 736.694px;
  height: 100.158px;
  background: var(--white);
  border-radius: 999px;
}

.hero-heading {
  z-index: 4;
  top: 587.148px;
  left: 453.478px;
  width: 523.078px;
  height: 77.276px;
  margin: 0;
}

.hero-heading img {
  width: 100%;
  height: 100%;
}

.download-intro {
  position: relative;
  z-index: 1;
  height: 210.498px;
  background: var(--yellow);
}

.hero-lead {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1015px;
  margin: 0;
  color: var(--ink);
  font-size: 28.331px;
  font-weight: 900;
  line-height: 44.095px;
  letter-spacing: -0.025em;
  text-align: center;
  transform: translateX(-50%);
}

/* Download panel — v02: x=120 / y=1051.28 / 1200×1699.206 */
.download-library {
  position: relative;
  z-index: 2;
  padding: 0 0 97.423px;
  background: var(--yellow);
}

.library-panel {
  position: relative;
  width: min(calc(100% - 32px), 1200px);
  height: 1699.206px;
  margin-inline: auto;
  color: var(--white);
  background: var(--red);
  border-radius: 27px;
  overflow: hidden;
}

.asset-grid {
  position: absolute;
  top: 63.918px;
  left: 50%;
  width: 1092px;
  display: grid;
  grid-template-columns: repeat(3, 330.218px);
  column-gap: 50.637px;
  row-gap: 151.938px;
  transform: translateX(-50%);
}

.asset-card {
  min-width: 0;
}

.asset-card h2 {
  height: 34px;
  margin: 0 0 16.027px;
  color: var(--white);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 28.31px;
  font-weight: 900;
  line-height: 34px;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.asset-preview {
  width: 330.218px;
  overflow: hidden;
  background: var(--white);
}

.asset-card--portrait .asset-preview {
  height: 467.002px;
}

.asset-card--square .asset-preview {
  height: 324.244px;
}

.asset-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.format-buttons {
  width: 191.639px;
  margin: 49.462px auto 0;
  display: grid;
  gap: 17.324px;
}

.asset-card--square .format-buttons {
  margin-top: 55.901px;
}

.format-buttons a {
  display: block;
  width: 100%;
  height: 53.052px;
  padding: 0;
  color: #000;
  background: var(--white);
  border: 0;
  border-radius: 999px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 31px;
  font-weight: 900;
  line-height: 53.052px;
  letter-spacing: -0.02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.format-buttons a:focus-visible {
  outline: 4px solid #005fcc;
  outline-offset: 4px;
}

/* Footer — v02: y=2847.909 / 1440×267.891 */
.site-footer {
  position: relative;
  height: 267.891px;
  overflow: hidden;
  color: var(--white);
  background: var(--red);
}

.footer-inner {
  position: relative;
  width: min(100%, var(--design-width));
  height: 100%;
  margin-inline: auto;
}

.footer-logo {
  position: absolute;
  top: 49.563px;
  left: max(36px, calc(50% - 604.446px));
  width: 222.923px;
  height: auto;
}

.footer-brand {
  position: absolute;
  top: 52.688px;
  left: calc(50% - 226.665px);
}

.footer-org,
.footer-addr,
.footer-tel,
.copyright {
  margin: 0;
}

.footer-org {
  font-size: 20px;
  font-weight: 900;
  line-height: 24px;
  letter-spacing: -0.02em;
}

.footer-addr {
  margin-top: 9.72px;
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: -0.02em;
}

.footer-tel {
  margin-top: 9.16px;
  display: flex;
  gap: 22px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 32px;
}

.footer-nav {
  position: absolute;
  top: 196.089px;
  left: calc(50% - 225.686px);
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
}

.footer-nav a {
  text-decoration: none;
}

.footer-nav-row {
  display: contents;
}

.footer-nav a[href]:hover,
.footer-nav a[href]:focus-visible {
  text-decoration: underline;
}

.copyright {
  position: absolute;
  top: 196.196px;
  left: max(36px, calc(50% - 602.986px));
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: -0.035em;
}

.footer-couple {
  position: absolute;
  top: 47.45px;
  left: calc(50% + 351.089px);
  width: 246.096px;
  height: auto;
}

@media (max-width: 1320px) and (min-width: 1200px) {
  .desktop-nav {
    right: 28px;
    left: auto;
    width: auto;
    gap: 28px;
    font-size: 18px;
  }

  .header-logo {
    left: 34px;
  }

  .footer-logo,
  .copyright {
    left: 36px;
  }

  .footer-brand,
  .footer-nav {
    left: 390px;
  }

  .footer-couple {
    right: 34px;
    left: auto;
  }
}

/* Tablet — Figma v02 Hero/Tablet（768×460）の実座標 */
@media (max-width: 1199px) {
  .download-header {
    height: 82px;
  }

  .header-inner {
    width: calc(100% - 34px);
  }

  .header-logo {
    top: 12px;
    left: 0;
    width: 126px;
  }

  .header-logo::before {
    top: -70px;
    width: 190px;
    height: 174px;
  }

  .desktop-nav {
    top: 20px;
    right: 0;
    left: auto;
    width: auto;
    justify-content: flex-end;
    gap: clamp(18px, 3vw, 34px);
    font-size: clamp(13px, 1.7vw, 17px);
  }

  .desktop-nav a {
    padding-left: 15px;
  }

  .desktop-nav a::before {
    width: 9px;
    height: 9px;
    border-width: 1px;
  }

  .download-hero {
    height: 460px;
  }

  .hero-canvas {
    width: 768px;
    height: 460px;
  }

  .hero-confetti {
    top: 0;
    left: -84px;
    width: 936px;
    height: 541.958px;
    transform: none;
  }

  .hero-emblem {
    top: 20px;
    left: 201.17px;
    width: 365.656px;
    height: 324.662px;
    transform: none;
  }

  .hero-people {
    top: 160px;
    left: 60px;
    width: 102.68px;
    height: 176.836px;
  }

  .hero-onsen {
    top: 95px;
    right: auto;
    left: 575px;
    width: 168.268px;
    height: 166.163px;
  }

  .hero-airplane {
    top: 88px;
    left: 125px;
    width: 108.751px;
    height: 49.519px;
  }

  .hero-suitcase {
    top: 280px;
    right: auto;
    left: 675px;
    width: 33.506px;
    height: 43.949px;
  }

  .hero-bag {
    top: 322px;
    right: auto;
    left: 710px;
    width: 30.671px;
    height: 27.659px;
  }

  .hero-heading-background {
    top: 367px;
    left: 168.52px;
    width: 430.966px;
    height: 58.592px;
  }

  .hero-heading {
    top: 375.43px;
    left: 242.77px;
    width: 282.462px;
    height: 41.729px;
    transform: none;
  }

  .download-intro {
    height: 160px;
  }

  .hero-lead {
    width: min(calc(100% - 56px), 820px);
    font-size: clamp(17px, 2.2vw, 23px);
    line-height: 1.85;
    letter-spacing: -0.025em;
  }

  .download-library {
    padding: 24px 0 54px;
  }

  .library-panel {
    width: min(calc(100% - 30px), 940px);
    height: auto;
    min-height: 0;
    padding: 56px clamp(26px, 5vw, 54px) 72px;
    border-radius: 30px;
    overflow: visible;
  }

  .asset-grid {
    position: static;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(34px, 7vw, 70px);
    row-gap: 90px;
    transform: none;
  }

  .asset-card h2 {
    height: auto;
    margin-bottom: 16px;
    font-size: clamp(21px, 2.8vw, 27px);
    line-height: 1.45;
    white-space: normal;
  }

  .asset-preview {
    width: 100%;
  }

  .asset-card--portrait .asset-preview,
  .asset-card--square .asset-preview {
    height: auto;
  }

  .asset-card--portrait .asset-preview {
    aspect-ratio: 1603 / 2267;
  }

  .asset-card--square .asset-preview {
    aspect-ratio: 1603 / 1574;
  }

  .format-buttons,
  .asset-card--square .format-buttons {
    width: min(72%, 220px);
    margin-top: 32px;
    gap: 12px;
  }

  .format-buttons a {
    height: 48px;
    font-size: 24px;
    line-height: 48px;
  }

  .site-footer {
    height: auto;
    min-height: 390px;
    padding: 42px 20px 34px;
    overflow: hidden;
  }

  .footer-inner {
    width: min(100%, 620px);
    height: auto;
    min-height: 314px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-logo,
  .footer-brand,
  .footer-nav,
  .copyright,
  .footer-couple {
    position: static;
  }

  .footer-logo {
    width: 184px;
  }

  .footer-brand {
    margin-top: 18px;
  }

  .footer-org {
    font-size: 18px;
  }

  .footer-addr {
    font-size: 12px;
  }

  .footer-tel {
    justify-content: center;
    font-size: 19px;
  }

  .footer-nav {
    margin-top: 22px;
    justify-content: center;
    flex-wrap: wrap;
    white-space: normal;
  }

  .copyright {
    margin-top: 18px;
  }

  .footer-couple {
    width: 152px;
    margin-top: 22px;
  }
}

@media (max-width: 767px) {
  .download-header {
    height: 74px;
  }

  .header-inner {
    width: calc(100% - 28px);
  }

  .header-logo {
    top: 8px;
    width: 94px;
  }

  .header-logo::before {
    top: -48px;
    width: 148px;
    height: 130px;
  }

  .desktop-nav {
    display: none;
  }

  .mobile-menu {
    position: absolute;
    top: 22px;
    right: 0;
    display: block;
  }

  .mobile-menu summary {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--red);
    cursor: pointer;
    list-style: none;
  }

  .mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .menu-label {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
  }

  .menu-icon {
    width: 28px;
    height: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
  }

  .menu-icon i {
    width: 100%;
    height: 2px;
    display: block;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .mobile-menu[open] .menu-icon i:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .mobile-menu[open] .menu-icon i:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu[open] .menu-icon i:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .mobile-menu nav {
    position: absolute;
    top: 42px;
    right: 0;
    width: min(82vw, 286px);
    padding: 14px 20px 17px;
    color: var(--white);
    background: var(--red);
    border-radius: 16px;
    box-shadow: 0 16px 34px rgba(71, 0, 6, 0.2);
  }

  .mobile-menu nav a {
    display: block;
    padding: 10px 3px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
  }

  .mobile-menu nav a:last-child {
    border-bottom: 0;
  }

  .download-library {
    padding: 15px 0 34px;
  }

  .library-panel {
    width: calc(100% - 20px);
    padding: 44px 18px 58px;
    border-radius: 28px;
  }

  .asset-grid {
    grid-template-columns: 1fr;
    row-gap: 74px;
  }

  .asset-card {
    width: min(100%, 340px);
    margin-inline: auto;
  }

  .asset-card h2 {
    margin-bottom: 14px;
    font-size: 21px;
    text-align: left;
  }

  .format-buttons,
  .asset-card--square .format-buttons {
    width: min(68%, 200px);
    margin-top: 26px;
    gap: 10px;
  }

  .format-buttons a {
    height: 46px;
    font-size: 23px;
    line-height: 46px;
  }

  .site-footer {
    min-height: 418px;
  }

  .footer-org {
    font-size: 15px;
  }

  .footer-addr {
    font-size: 10px;
  }

  .footer-tel {
    gap: 14px;
    font-size: 16px;
  }

  .footer-nav {
    gap: 6px 10px;
    font-size: 11px;
  }

  .copyright {
    font-size: 10px;
  }
}

/* Mobile — Figma v02 Hero/Mobile（390×380）の実座標 */
@media (max-width: 600px) {
  .download-hero {
    height: 380px;
  }

  .hero-canvas {
    width: 390px;
    height: 380px;
  }

  .hero-confetti {
    top: 0;
    left: -165px;
    width: 720px;
    height: 416.891px;
  }

  .hero-emblem {
    top: 22px;
    left: 38.29px;
    width: 313.42px;
    height: 278.282px;
  }

  .hero-airplane {
    top: 70px;
    left: 20px;
    width: 63.273px;
    height: 28.811px;
  }

  .hero-people,
  .hero-onsen,
  .hero-suitcase,
  .hero-bag {
    display: none;
  }

  .hero-heading-background {
    top: 315px;
    left: 40.29px;
    width: 309.411px;
    height: 42.066px;
  }

  .hero-heading {
    top: 319.03px;
    left: 79.92px;
    width: 230.154px;
    height: 34.001px;
  }

  .download-intro {
    height: 192px;
  }

  .hero-lead {
    width: calc(100% - 34px);
    font-size: 13px;
    font-weight: 900;
    line-height: 24px;
    letter-spacing: -0.03em;
  }
}

@media (max-width: 374px) {
  .hero-lead {
    font-size: 12px;
  }
}

/*
 * Download page final Figma contract.
 * Source: HLzebmTT8UBT544Sr1SsC5 / PC 29:25 / Tablet 29:26 / Mobile 29:27.
 * These rules intentionally come after the former fluid draft so approved Figma
 * dimensions cannot be overwritten by the legacy responsive fallback.
 */
@media (min-width: 768px) and (max-width: 1199px) {
  .header-inner {
    width: 768px;
  }

  .header-logo {
    top: 12px;
    left: 17px;
    width: 126px;
  }

  .header-logo::before {
    top: -86px;
    width: 190px;
    height: 190px;
  }

  .desktop-nav {
    top: 20px;
    right: auto;
    left: 231px;
    width: 520px;
    justify-content: space-between;
    gap: 0;
    font-size: 13.1px;
    line-height: 16.4px;
    letter-spacing: -0.02em;
  }

  .desktop-nav a {
    padding: 10px 0 10px 18px;
  }

  .desktop-nav a::before {
    width: 11px;
    height: 11px;
    border-width: 1px;
  }

  .download-intro {
    height: 132px;
  }

  .hero-lead {
    top: 1px;
    width: 720px;
    font-size: 13px;
    line-height: 24px;
    letter-spacing: -0.015em;
  }

  .download-library {
    padding: 0 0 64px;
  }

  .library-panel {
    width: calc(100% - 32px);
    height: 2400.566px;
    min-height: 0;
    padding: 0;
    border-radius: 30px;
    overflow: hidden;
  }

  .asset-grid {
    position: absolute;
    top: 64px;
    left: 50%;
    width: 688px;
    grid-template-columns: repeat(2, 330.218px);
    column-gap: 27.564px;
    row-gap: 64px;
    transform: translateX(-50%);
  }

  .asset-card {
    width: 330.218px;
    margin: 0;
  }

  .asset-card h2 {
    height: 34px;
    margin: 0 0 16.027px;
    font-size: 28.31px;
    line-height: 34px;
    letter-spacing: -0.035em;
    white-space: nowrap;
  }

  .asset-preview {
    width: 330.218px;
  }

  .asset-card--portrait,
  .asset-card--square-tall-tablet {
    height: 760.295px;
  }

  .asset-card--square:not(.asset-card--square-tall-tablet) {
    height: 623.976px;
  }

  .asset-card--portrait .asset-preview {
    height: 467.002px;
    aspect-ratio: auto;
  }

  .asset-card--square .asset-preview {
    height: 324.244px;
    aspect-ratio: auto;
  }

  .format-buttons,
  .asset-card--portrait .format-buttons {
    width: 191.639px;
    margin: 49.462px auto 0;
    gap: 17.324px;
  }

  .asset-card--square:not(.asset-card--square-tall-tablet) .format-buttons {
    width: 191.639px;
    margin-top: 55.901px;
    gap: 17.324px;
  }

  .asset-card--square-tall-tablet h2 {
    margin-bottom: 87.406px;
  }

  .asset-card--square-tall-tablet .format-buttons {
    width: 191.639px;
    margin-top: 120.841px;
    gap: 17.324px;
  }

  .format-buttons a {
    height: 53.052px;
    font-size: 31px;
    line-height: 53.052px;
  }

  .site-footer {
    height: 240px;
    min-height: 0;
    padding: 0;
  }

  .footer-inner {
    width: 768px;
    height: 240px;
    min-height: 0;
    display: block;
    text-align: left;
  }

  .footer-logo {
    position: absolute;
    top: 52px;
    left: 48px;
    width: 180px;
  }

  .footer-brand {
    position: absolute;
    top: 32px;
    left: 272px;
    margin: 0;
  }

  .footer-org {
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0;
  }

  .footer-addr {
    margin-top: 12px;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 0;
  }

  .footer-tel {
    margin-top: 13px;
    justify-content: flex-start;
    gap: 22px;
    font-size: 22px;
    line-height: 32px;
  }

  .footer-nav {
    position: absolute;
    top: 164px;
    left: 272px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: nowrap;
    font-size: 11px;
    line-height: 16px;
    white-space: nowrap;
  }

  .copyright {
    position: absolute;
    top: 198px;
    left: 48px;
    margin: 0;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0;
  }

  .footer-couple {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-inner {
    width: 390px;
  }

  .header-logo {
    top: 12px;
    left: 14px;
    width: 94px;
    height: 52.399px;
  }

  .header-logo::before {
    top: -40px;
    width: 148px;
    height: 130px;
  }

  .mobile-menu {
    top: 11px;
    right: auto;
    left: 307px;
  }

  .mobile-menu summary {
    height: 44px;
    padding: 11px 0;
  }

  .menu-label {
    line-height: 12px;
  }

  .download-intro {
    height: 192px;
  }

  .hero-lead {
    top: 12.5px;
    width: 358px;
    font-size: 13px;
    font-weight: 900;
    line-height: 24px;
    letter-spacing: -0.015em;
  }

  .download-library {
    padding: 0 0 64px;
  }

  .library-panel {
    width: min(calc(100% - 32px), 358px);
    height: auto;
    min-height: 0;
    padding: 64px 13.891px;
    border-radius: 30px;
    overflow: hidden;
  }

  .asset-grid {
    position: static;
    width: 330.218px;
    grid-template-columns: 1fr;
    row-gap: 64px;
    transform: none;
  }

  .asset-card {
    width: 330.218px;
    margin: 0;
  }

  .asset-card h2 {
    height: 34px;
    margin: 0 0 16.027px;
    font-size: 28.31px;
    line-height: 34px;
    letter-spacing: -0.035em;
    white-space: nowrap;
    text-align: left;
  }

  .asset-preview {
    width: 330.218px;
  }

  .asset-card--portrait {
    height: 760.295px;
  }

  .asset-card--square,
  .asset-card--square-tall-tablet {
    height: 623.976px;
  }

  .asset-card--portrait .asset-preview {
    height: 467.002px;
    aspect-ratio: auto;
  }

  .asset-card--square .asset-preview {
    height: 324.244px;
    aspect-ratio: auto;
  }

  .asset-card--square-tall-tablet h2 {
    margin-bottom: 16.027px;
  }

  .format-buttons,
  .asset-card--portrait .format-buttons {
    width: 191.639px;
    margin: 49.462px auto 0;
    gap: 17.324px;
  }

  .asset-card--square .format-buttons,
  .asset-card--square-tall-tablet .format-buttons {
    width: 191.639px;
    margin: 55.901px auto 0;
    gap: 17.324px;
  }

  .format-buttons a {
    height: 53.052px;
    font-size: 31px;
    line-height: 53.052px;
  }

  .site-footer {
    height: 320px;
    min-height: 0;
    padding: 0;
  }

  .footer-inner {
    width: 390px;
    height: 320px;
    min-height: 0;
    display: block;
    text-align: center;
  }

  .footer-logo {
    position: absolute;
    top: 20px;
    left: 120px;
    width: 150px;
  }

  .footer-brand {
    position: absolute;
    top: 126px;
    left: 16px;
    width: 358px;
    margin: 0;
  }

  .footer-org {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
  }

  .footer-addr {
    margin-top: 8px;
    font-size: 11px;
    line-height: 18px;
    letter-spacing: 0;
  }

  .footer-tel {
    margin-top: 14px;
    justify-content: center;
    gap: 18px;
    font-size: 18px;
    line-height: 26px;
  }

  .footer-nav {
    position: absolute;
    top: 232px;
    left: 16px;
    width: 358px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 11px;
    line-height: 18px;
    white-space: nowrap;
  }

  .footer-nav-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .footer-nav-separator-between {
    display: none;
  }

  .copyright {
    position: absolute;
    top: 295px;
    left: 16px;
    width: 358px;
    margin: 0;
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 0;
  }

  .footer-couple {
    display: none;
  }
}

@media (max-width: 374px) {
  .library-panel {
    padding-inline: 13px;
  }

  .asset-grid,
  .asset-card,
  .asset-preview {
    width: 100%;
  }

  .asset-card--portrait,
  .asset-card--square,
  .asset-card--square-tall-tablet {
    height: auto;
  }

  .asset-card--portrait .asset-preview,
  .asset-card--square .asset-preview {
    height: auto;
  }

  .asset-card--portrait .asset-preview {
    aspect-ratio: 1603 / 2267;
  }

  .asset-card--square .asset-preview {
    aspect-ratio: 1603 / 1574;
  }

  .hero-lead {
    width: calc(100% - 32px);
    font-size: 11.5px;
  }
}

@media (max-width: 359px) {
  .site-footer {
    height: 350px;
  }

  .footer-nav {
    top: 252px;
  }

  .copyright {
    top: 325px;
  }
}

/*
 * PC 1440 ↔ Tablet 768 visual interpolation.
 * The endpoints are the approved Figma variants; only the space between them
 * is fluid so the header and hero do not jump at an arbitrary breakpoint.
 */
@media (min-width: 768px) and (max-width: 1439px) {
  .download-header {
    height: calc(7.06755952vw + 27.721143px);
  }

  .header-inner {
    width: 100%;
  }

  .header-logo {
    top: calc(3.57440476vw - 15.451429px);
    left: calc(6.66369048vw - 34.177143px);
    width: calc(16.65342262vw - 1.898286px);
    height: calc(9.28318452vw - 1.057857px);
  }

  .header-logo::before {
    top: calc(-3.125vw - 62px);
    width: calc(20.83333333vw + 30px);
    height: calc(15.47619048vw + 71.142857px);
  }

  .header-logo img {
    width: 100%;
    height: 100%;
  }

  .desktop-nav {
    top: calc(3.7202381vw - 8.571429px);
    right: auto;
    left: calc(66.06547619vw - 276.382857px);
    width: calc(29.16666667vw + 296px);
    justify-content: space-between;
    gap: 0;
    font-size: calc(1.32440476vw + 2.928571px);
    line-height: calc(1.72619048vw + 3.142857px);
  }

  .desktop-nav a {
    padding-left: calc(0.44642857vw + 14.571429px);
  }

  .desktop-nav a::before {
    width: calc(1.04166667vw + 3px);
    height: calc(1.04166667vw + 3px);
  }

  .download-hero {
    height: calc(37.39404762vw + 172.813714px);
  }

  .hero-canvas {
    width: 100vw;
    height: 100%;
  }

  .hero-confetti {
    left: calc(12.5vw - 180px);
    width: calc(75vw + 360px);
    height: calc(43.42604167vw + 208.446px);
  }

  .hero-emblem {
    top: calc(9.55505952vw - 53.382857px);
    left: calc(38.05208333vw - 91.07px);
    width: calc(23.31994048vw + 186.558857px);
    height: calc(20.70550595vw + 165.643714px);
  }

  .hero-people {
    top: calc(19.66517857vw + 8.971429px);
    left: calc(10.65327381vw - 21.817143px);
    width: calc(18.67529762vw - 40.746286px);
    height: calc(32.16264881vw - 70.173143px);
  }

  .hero-onsen {
    top: calc(-1.49404762vw + 106.474286px);
    left: calc(59.51636905vw + 117.914286px);
    width: calc(23.11369048vw - 9.245143px);
    height: calc(22.82470238vw - 9.130714px);
  }

  .hero-airplane {
    top: calc(5.97767857vw + 42.091429px);
    left: calc(14.09375vw + 16.76px);
    width: calc(13.240625vw + 7.063px);
    height: calc(6.02901786vw + 3.216143px);
  }

  .hero-suitcase {
    top: calc(34.10714286vw + 18.057143px);
    left: calc(56.71428571vw + 239.434286px);
    width: calc(7.47886905vw - 23.931714px);
    height: calc(9.81011905vw - 31.392714px);
  }

  .hero-bag {
    top: calc(44.18303571vw - 17.325714px);
    left: calc(64.26339286vw + 216.457143px);
    width: calc(6.84613095vw - 21.907286px);
    height: calc(6.17395833vw - 19.757px);
  }

  .hero-heading-background {
    top: calc(31.37946429vw + 126.005714px);
    left: calc(27.2514881vw - 40.771429px);
    width: calc(45.4952381vw + 81.562571px);
    height: calc(6.18541667vw + 11.088px);
  }

  .hero-heading {
    top: calc(31.50595238vw + 133.464286px);
    left: calc(31.35565476vw + 1.958571px);
    width: calc(35.80595238vw + 7.472286px);
    height: calc(5.28973214vw + 1.103857px);
  }

  .download-intro {
    height: calc(11.68125vw + 42.288px);
  }

  .hero-lead {
    top: calc(-0.14880952vw + 2.142857px);
    width: calc(43.89880952vw + 382.857143px);
    font-size: calc(2.28139881vw - 4.520143px);
    line-height: calc(2.99032738vw + 1.034286px);
    letter-spacing: -0.02em;
  }
}

/*
 * Mobile 390 ↔ Tablet 768 visual interpolation.
 * Mobile keeps the approved simplified hero (no people / onsen / luggage),
 * while every visible layer follows the viewport continuously up to the
 * structural switch to the Tablet component at 768px.
 */
@media (max-width: 767px) {
  .download-header {
    height: calc(2.11640212vw + 65.746032px);
  }

  .header-inner {
    width: 100%;
  }

  .header-logo {
    top: 12px;
    left: calc(0.79365079vw + 10.904762px);
    width: calc(8.46560847vw + 60.984127px);
    height: calc(4.71693122vw + 34.002968px);
  }

  .header-logo::before {
    top: calc(-12.16931217vw + 7.460317px);
    width: calc(11.11111111vw + 104.666667px);
    height: calc(15.87301587vw + 68.095238px);
  }

  .desktop-nav {
    display: none;
  }

  .mobile-menu {
    position: absolute;
    top: 11px;
    right: 14px;
    left: auto;
    display: block;
  }

  .download-hero {
    height: calc(21.16402116vw + 297.460317px);
  }

  .hero-canvas {
    width: 100vw;
    height: 100%;
  }

  .hero-confetti {
    top: 0;
    left: calc(21.42857143vw - 248.571429px);
    width: calc(57.14285714vw + 497.142857px);
    height: calc(33.08650794vw + 287.853619px);
  }

  .hero-emblem {
    top: calc(-0.52910053vw + 24.063492px);
    left: calc(43.08994709vw - 129.760794px);
    width: calc(13.81904762vw + 259.525714px);
    height: calc(12.26984127vw + 230.429619px);
  }

  .hero-airplane {
    top: calc(4.76190476vw + 51.428571px);
    left: calc(27.77777778vw - 88.333333px);
    width: calc(12.03121693vw + 16.351254px);
    height: calc(5.47830688vw + 7.445603px);
  }

  .hero-people,
  .hero-onsen,
  .hero-suitcase,
  .hero-bag {
    display: none;
  }

  .hero-heading-background {
    top: calc(13.75661376vw + 261.349206px);
    left: calc(33.92328042vw - 92.010794px);
    width: calc(32.15740741vw + 183.997111px);
    height: calc(4.37195767vw + 25.015365px);
  }

  .hero-heading {
    top: calc(14.92063492vw + 260.839524px);
    left: calc(43.08201058vw - 88.099841px);
    width: calc(13.83809524vw + 176.185429px);
    height: calc(2.04444444vw + 26.027667px);
  }

  .download-intro {
    height: calc(-15.87301587vw + 253.904762px);
  }

  .hero-lead {
    top: calc(-3.04232804vw + 24.365079px);
    width: min(calc(95.76719577vw - 15.492063px), calc(100% - 32px));
    font-size: 13px;
    line-height: 24px;
    letter-spacing: -0.015em;
  }

  .library-panel {
    width: calc(100% - 32px);
    padding-right: 0;
    padding-left: 0;
  }

  .asset-grid {
    margin-inline: auto;
  }

  .footer-inner {
    width: 100%;
  }

  .footer-logo {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer-brand,
  .footer-nav,
  .copyright {
    left: 16px;
    width: calc(100% - 32px);
  }
}

@media (max-width: 374px) {
  .library-panel {
    padding-right: 13px;
    padding-left: 13px;
  }

  .asset-card h2 {
    height: auto;
    font-size: clamp(21px, 7vw, 26px);
    line-height: 1.3;
    white-space: normal;
  }
}

/*
 * Wide desktop continuation of the approved 1440px Figma frame.
 * At 1440px every value is unchanged; above it the header, hero and lead
 * enlarge in the same proportion instead of leaving a fixed 1440px island.
 */
@media (min-width: 1440px) {
  .download-header {
    height: 8.99263889vw;
  }

  .header-inner {
    width: 100%;
  }

  .header-logo {
    top: 2.50118056vw;
    left: 4.29041667vw;
    width: 16.52159722vw;
    height: 9.20972222vw;
  }

  .header-logo::before {
    top: -7.43055556vw;
    width: 22.91666667vw;
    height: 20.41666667vw;
  }

  .desktop-nav {
    top: 3.125vw;
    left: 46.87215278vw;
    width: 49.72222222vw;
    font-size: 1.38888889vw;
  }

  .desktop-nav a {
    padding: 0.69444444vw 0 0.69444444vw 1.45833333vw;
  }

  .desktop-nav a::before {
    width: 1.25vw;
    height: 1.25vw;
    border-width: 0.13888889vw;
    box-shadow: 0 0 0 0.06944444vw var(--red);
  }

  .download-hero {
    height: 49.395vw;
  }

  .hero-canvas {
    width: 100vw;
    height: 100%;
  }

  .hero-confetti {
    left: 0;
    width: 100vw;
    height: 57.90145833vw;
  }

  .hero-people {
    top: 20.28819444vw;
    left: 9.13847222vw;
    width: 15.84569444vw;
    height: 27.28951389vw;
  }

  .hero-onsen {
    top: 5.89979167vw;
    left: 67.70465278vw;
    width: 22.47166667vw;
    height: 22.190625vw;
  }

  .hero-airplane {
    top: 8.900625vw;
    left: 15.25743056vw;
    width: 13.73111111vw;
    height: 6.25236111vw;
  }

  .hero-suitcase {
    top: 35.36090278vw;
    left: 73.34159722vw;
    width: 5.81694444vw;
    height: 7.63006944vw;
  }

  .hero-bag {
    top: 42.97986111vw;
    left: 79.29486111vw;
    width: 5.32479167vw;
    height: 4.80194444vw;
  }

  .hero-emblem {
    top: 5.84756944vw;
    left: 31.72756944vw;
    width: 36.27541667vw;
    height: 32.20854167vw;
  }

  .hero-heading-background {
    top: 40.12986111vw;
    left: 24.42013889vw;
    width: 51.15930556vw;
    height: 6.95541667vw;
  }

  .hero-heading {
    top: 40.77416667vw;
    left: 31.49152778vw;
    width: 36.32486111vw;
    height: 5.36638889vw;
  }

  .download-intro {
    height: 14.61791667vw;
  }

  .hero-lead {
    width: 70.48611111vw;
    font-size: 1.96743056vw;
    line-height: 3.06215278vw;
  }
}

/* item70：トップページの共通ナビへ統一 */
@media (min-width: 1200px) {
  .desktop-nav {
    top: 3.125vw;
    right: auto;
    left: 31.25vw;
    width: 64.5vw;
    gap: 0;
    font-size: 1.38888889vw;
    line-height: 1.25;
    letter-spacing: .08em;
  }

  .desktop-nav a {
    padding: .69444444vw 0 .69444444vw 1.45833333vw;
  }

  .desktop-nav a::before {
    width: 1.25vw;
    height: 1.25vw;
    border-width: .13888889vw;
    box-shadow: 0 0 0 .06944444vw var(--red);
  }

  .desktop-nav .download-instagram-link {
    width: 3.47222222vw;
    height: 3.47222222vw;
    padding: 0;
  }
}

@media (max-width: 1199px) {
  .download-header {
    height: 56px;
    background: var(--white);
  }

  .header-inner {
    width: calc(100% - 32px);
    height: 56px;
  }

  .header-logo {
    top: 9px;
    left: 0;
    width: auto;
    height: 38px;
  }

  .header-logo::before {
    display: none;
  }

  .header-logo img {
    width: auto;
    height: 38px;
  }

  .desktop-nav {
    display: none;
  }

  .mobile-menu {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    display: block;
  }

  .mobile-menu summary {
    display: flex;
    width: 42px;
    height: 56px;
    align-items: center;
    justify-content: center;
    color: var(--red);
    cursor: pointer;
    list-style: none;
  }

  .mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .menu-label {
    display: none;
  }

  .menu-icon {
    display: flex;
    width: 26px;
    height: 22px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
  }

  .menu-icon i {
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
  }

  .mobile-menu nav {
    position: fixed;
    top: 56px;
    right: 0;
    left: 0;
    width: 100%;
    padding: 8px 0;
    color: var(--ink);
    background: var(--white);
    border-radius: 0;
    box-shadow: 0 10px 18px rgba(35, 24, 21, .13);
  }

  .mobile-menu nav a {
    position: relative;
    display: block;
    padding: 16px 24px 16px 44px;
    border-bottom: 1px solid rgba(35, 24, 21, .08);
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .08em;
    text-decoration: none;
  }

  .mobile-menu nav a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 24px;
    width: 10px;
    height: 10px;
    background: var(--red);
    border: 2px solid var(--white);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--red);
    transform: translateY(-50%);
  }

  .mobile-menu nav .mobile-instagram-link {
    display: flex;
    align-items: center;
    padding: 14px 24px;
    border-bottom: 0;
  }

  .mobile-menu nav .mobile-instagram-link::before {
    display: none;
  }

  .mobile-instagram-link svg {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    margin-right: 10px;
  }
}

/* item70：広幅画面でも共通ヘッダーを1440px正本より巨大化させない */
@media (min-width: 1440px) {
  .download-header {
    height: 129.494px;
  }

  .header-inner {
    width: 1440px;
    max-width: 100%;
    margin-inline: auto;
  }

  .header-logo {
    top: 36.017px;
    left: 61.782px;
    width: 237.911px;
    height: 132.62px;
  }

  .header-logo::before {
    top: -107px;
    width: 330px;
    height: 294px;
  }

  .desktop-nav {
    top: 45px;
    left: 450px;
    width: 928.8px;
    font-size: 20px;
  }

  .desktop-nav a {
    padding: 10px 0 10px 21px;
  }

  .desktop-nav a::before {
    width: 18px;
    height: 18px;
    border-width: 2px;
    box-shadow: 0 0 0 1px var(--red);
  }

  .desktop-nav .download-instagram-link {
    width: 50px;
    height: 50px;
    padding: 0;
  }
}

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

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

/* ============================================================
   item77 STEP A-② タブレットのフルナビ化（768〜1199px）
   社長正式指示 2026-08-13。正本＝CTO補間仕様書v01
   Figma正本 HLzebmTT8UBT544Sr1SsC5 の規定「SPナビは767pxまでMENU、
   Desktopナビは768pxから」（FIGMA_SPEC.md L17）へ実装を戻すもの。
   ヘッダーとロゴの寸法は既存のタブレット補間ブロックをそのまま使い、
   ここではナビの表示制御と枠幅（A案592px＝6項目収容）だけを上書きする。
   ★767px以下（MENU）と1200px以上は一切変更しない
   ============================================================ */
@media (min-width:768px) and (max-width:1199px){
  .desktop-nav{
    display:flex;
    left:calc(49.768519vw - 222.222222px);
    width:calc(42.129630vw + 268.444444px);
    font-size:calc(0.825617vw + 6.759259px);
  }

  .desktop-nav .download-instagram-link{
    width:calc(2.064043vw + 16.898148px);
    height:calc(2.064043vw + 16.898148px);
  }

  .mobile-menu{
    display:none;
  }
}

/* ------------------------------------------------------------
   item77 STEP A-② 追加（社長判断① 2026-08-13）
   ダウンロードページのヘッダーをスクロール追随させ、トップと体験を統一する。
   download.htmlはmain.jsを読まない（analytics-events.jsのみ）ため、
   トップと同じJS駆動の出現方式は使えない。CSSのstickyで実装する。
   ※トップは「120pxスクロール後にスライドイン」、こちらは「常時追随」で
     出現の仕方だけ異なる（挙動差は報告済み）
   ------------------------------------------------------------ */
.download-header{
  position:sticky;
  top:0;
}

/* ------------------------------------------------------------
   item77 差し戻し③ ナビの「ダウンロード」を現在地表示（社長指示 2026-08-14）
   自ページへのリンクを無効化し、減色して現在地であることを示す。
   HTMLは変更せず、既存の aria-current="page" を手掛かりにCSSだけで行う
   （支援技術には従来どおり「現在のページ」として伝わる）。
   PCナビ・SPメニューの両方に適用する。
   ------------------------------------------------------------ */
.desktop-nav a[aria-current="page"],
.mobile-menu nav a[aria-current="page"]{
  color:rgba(35,24,21,.42);
  pointer-events:none;
  cursor:default;
}

.desktop-nav a[aria-current="page"]:hover,
.desktop-nav a[aria-current="page"]:focus-visible,
.mobile-menu nav a[aria-current="page"]:hover,
.mobile-menu nav a[aria-current="page"]:focus-visible{
  color:rgba(35,24,21,.42);
}

.desktop-nav a[aria-current="page"]::before{
  background:rgba(215,12,24,.32);
  box-shadow:0 0 0 1px rgba(215,12,24,.32);
}

/* ============================================================
   item77 ダウンロードページの是正（社長指示 2026-08-14）
   ①タブレットがPCと別扱いで急に変わる → トップページと同じ「PC比率をそのまま
     下ろす」方式（1440基準の純vw）へ統一。768px以上を1本の比率で動かす
   ②白帯に対する上下センター＋文字とInstagramの高さ揃え
     → トップページのPC修正に準じ、top:50%+translateY と a の flex 化
   ③自ページへの導線「ダウンロード」は非表示
     → 半透明で押せない状態より、消えている方が利用者が迷わない（社長判断）
   ★767px以下のSPメニューには寸法の変更を加えない（③の非表示のみ適用）
   ============================================================ */
@media (min-width:768px){
  .download-header{
    height:8.99263889vw;
  }

  .header-inner{
    position:relative;
    width:100%;
    height:100%;
  }

  .header-logo{
    left:4.29041667vw;
    top:2.50118056vw;
    width:16.52159722vw;
    height:9.20972222vw;
  }

  .header-logo::before{
    /* ★2026-08-14 白円がタブレット幅で描画されない件の是正。
       原因は重なり順でも position:sticky でもない（stickyは全幅で正常動作・実測済み）。
       旧「タブレット＝SP扱い」ブロック @media (max-width:1199px)（L1975〜2107）の
       .header-logo::before{display:none} が、この比率統一ブロックで打ち消されずに
       生き残っていたことが原因。1200px以上は旧ブロック自体が効かないため元から出ていた。
       display を明示して768〜1199pxでも復帰させる。 */
    display:block;
    top:-7.43055556vw;
    width:22.91666667vw;
    height:20.41666667vw;
  }

  .header-logo img{
    /* ★2026-08-14 同じ取りこぼしの2件目。旧ブロックの
       .header-logo img{width:auto;height:38px}（L1997）も打ち消されておらず、
       <a>だけがvwで伸びて画像は68×38pxに固定されたままだった
       （768pxでa比0.537／1199pxで0.344、1199px→1200pxでロゴが2.9倍に跳ぶ）。
       PC（基底L111）と同じ100%指定で<a>に追従させ、比率統一を実際に成立させる。 */
    width:100%;
    height:100%;
  }

  .desktop-nav{
    display:flex;
    top:50%;
    transform:translateY(-50%);
    left:31.25vw;
    right:auto;
    width:64.5vw;
    /* ★2026-08-14 社長指摘：「ダウンロード」を消したら隙間が開きすぎた件の是正。
       space-between（両端揃え）は幅を固定したまま余りを隙間へ配るため、
       項目が6→5に減ると隙間が約29.7px→約74.5px（2.5倍）に広がっていた。
       右揃え＋固定の隙間へ変更し、トップページと同じ間隔にする。
       目標値はトップページ実ページの実測＝1440pxで36.73px（36.73/1440=2.551vw）。
       これで今後項目数が変わっても隙間は一定に保たれる。 */
    justify-content:flex-end;
    gap:2.551vw;
    font-size:1.38888889vw;
    line-height:1.25;
    /* ★2026-08-14 同じ取りこぼしの3件目（社長承認）。
       .desktop-nav の letter-spacing:.08em は @media (min-width:1200px)（L1945-1954）
       にしか無く、768〜1199pxでは旧ブロックの -0.02em（L1071）が生き残っていた。
       結果、ダウンロードのタブレットだけトップページより字間が詰まっていた
       （実測：トップ +0.08em ／ ダウンロード -0.02em）。PC・トップと同じ値へ揃える。 */
    letter-spacing:.08em;
  }

  .desktop-nav a{
    display:flex;
    align-items:center;
    padding:.69444444vw 0 .69444444vw 1.45833333vw;
  }

  .desktop-nav a::before{
    width:1.25vw;
    height:1.25vw;
    border-width:.13888889vw;
    box-shadow:0 0 0 .06944444vw var(--red);
  }

  .desktop-nav .download-instagram-link{
    width:3.47222222vw;
    height:3.47222222vw;
    padding:0;
  }

  .mobile-menu{
    display:none;
  }

  .desktop-nav a[aria-current="page"]{
    display:none;
  }
}

/* SPメニュー内の自ページ導線も非表示にする（幅によらず適用） */
.mobile-menu nav a[aria-current="page"]{
  display:none;
}