@charset "UTF-8";
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

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

svg,
img {
  max-width: 100%;
  vertical-align: middle;
}

svg {
  overflow: visible;
}

li {
  list-style: none;
}

h1, h2, h3, h4, h5, h6, th, dt {
  font-weight: inherit;
}

article, main, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, picture {
  display: block;
}

:root {
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "メイリオ", "Meiryo", sans-serif;
  --serif: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;
  --font: var(--sans);
  --PF: pf-venue, sans-serif;
  --color: #fff;
  --color-inverse: #002F76;
  --color-accent: #FFE200;
  --stroke1: 1px;
  --color-navy: #002F76;
  --color-deepblue: #0E3E8F;
  --color-lightblue: #043D8B;
  --color-lightblue2: #CAE9FC;
  --color-sky: #0DB3EF;
  --color-yellow: #FFE200;
  --color-white2: #F2F2F2;
  --color-white3: #E5E5E5;
  --header-height: 3.75rem;
}
@media screen and (min-width: 1024px) {
  :root {
    --header-height: 7.5rem;
  }
}
:root {
  --gap: 0.75rem;
  --padding-section: 6.75rem;
  --padding-page: 16.625rem;
}
@media screen and (min-width: 1024px) {
  :root {
    --gap: 1rem;
    --padding-section: 10.25rem;
    --padding-page: 24.5rem;
  }
}

:root {
  --easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --easeInOutSine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --easeInQuart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1);
  --easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
  --easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);
  --easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
  --easeInOutExpo: cubic-bezier(1, 0, 0, 1);
  --easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --duration: .4s;
  --easeTheme: var(--easeOutQuart);
}

.is-section-dark,
.is-nav-open {
  --color: #fff;
}

/*----------------------------------------------------
	c-paragraph
----------------------------------------------------*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	c-paragraph
	本文（PC 16px / SP 12px）
----------------------------------------------------*/
.c-paragraph {
  color: var(--color);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: justify;
}
@media screen and (min-width: 1024px) {
  .c-paragraph {
    font-size: 1rem;
  }
}

/*----------------------------------------------------
	c-paragraph-md
	セクション見出しに添えるリード文（Figma 1521-5321 / 1261-6480）
	PC 18px / SP 14px、両端揃え
----------------------------------------------------*/
.c-paragraph-md {
  color: var(--color-white2);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: justify;
}
@media screen and (min-width: 1024px) {
  .c-paragraph-md {
    font-size: 1.125rem;
  }
}

/*----------------------------------------------------
	c-btn
----------------------------------------------------*/
.c-btn-arrow, .c-btn-round-cta__arrow, .c-btn-round-arrow__arrow, .c-btn-more__arrow {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  position: relative;
  padding: 0 0 0 0.125rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  aspect-ratio: 1/1;
  border-radius: 100%;
  line-height: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  overflow: hidden;
}
.c-btn-arrow:before, .c-btn-round-cta__arrow:before, .c-btn-round-arrow__arrow:before, .c-btn-more__arrow:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background: var(--deepblue, #0E3E8F);
  border-radius: 100%;
  -webkit-transition: -webkit-transform var(--duration) var(--easeOutBack);
  transition: -webkit-transform var(--duration) var(--easeOutBack);
  transition: transform var(--duration) var(--easeOutBack);
  transition: transform var(--duration) var(--easeOutBack), -webkit-transform var(--duration) var(--easeOutBack);
}
.c-btn-arrow svg, .c-btn-round-cta__arrow svg, .c-btn-round-arrow__arrow svg, .c-btn-more__arrow svg {
  position: relative;
  width: 0.9375rem;
  height: auto;
  aspect-ratio: 22/17;
  -webkit-transition: opacity var(--duration) var(--easeOutBack), -webkit-transform var(--duration) var(--easeOutBack);
  transition: opacity var(--duration) var(--easeOutBack), -webkit-transform var(--duration) var(--easeOutBack);
  transition: transform var(--duration) var(--easeOutBack), opacity var(--duration) var(--easeOutBack);
  transition: transform var(--duration) var(--easeOutBack), opacity var(--duration) var(--easeOutBack), -webkit-transform var(--duration) var(--easeOutBack);
  fill: #fff;
}
.c-btn-arrow svg:nth-child(2), .c-btn-round-cta__arrow svg:nth-child(2), .c-btn-round-arrow__arrow svg:nth-child(2), .c-btn-more__arrow svg:nth-child(2) {
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%) translateX(-300%);
          transform: translate(-50%, -50%) translateX(-300%);
}
a:hover .c-btn-arrow:before, a:hover .c-btn-round-cta__arrow:before, a:hover .c-btn-round-arrow__arrow:before, a:hover .c-btn-more__arrow:before, .c-btn-arrow:hover:before, .c-btn-round-cta__arrow:hover:before, .c-btn-round-arrow__arrow:hover:before, .c-btn-more__arrow:hover:before {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
a:hover .c-btn-arrow svg:nth-child(1), a:hover .c-btn-round-cta__arrow svg:nth-child(1), a:hover .c-btn-round-arrow__arrow svg:nth-child(1), a:hover .c-btn-more__arrow svg:nth-child(1), .c-btn-arrow:hover svg:nth-child(1), .c-btn-round-cta__arrow:hover svg:nth-child(1), .c-btn-round-arrow__arrow:hover svg:nth-child(1), .c-btn-more__arrow:hover svg:nth-child(1) {
  opacity: 0;
  -webkit-transform: translateX(300%);
          transform: translateX(300%);
}
a:hover .c-btn-arrow svg:nth-child(2), a:hover .c-btn-round-cta__arrow svg:nth-child(2), a:hover .c-btn-round-arrow__arrow svg:nth-child(2), a:hover .c-btn-more__arrow svg:nth-child(2), .c-btn-arrow:hover svg:nth-child(2), .c-btn-round-cta__arrow:hover svg:nth-child(2), .c-btn-round-arrow__arrow:hover svg:nth-child(2), .c-btn-more__arrow:hover svg:nth-child(2) {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) translateX(0);
          transform: translate(-50%, -50%) translateX(0);
  -webkit-transition-delay: 0.08s;
          transition-delay: 0.08s;
}
@media screen and (min-width: 1024px) {
  .c-btn-arrow, .c-btn-round-cta__arrow, .c-btn-round-arrow__arrow, .c-btn-more__arrow {
    width: 4.375rem;
    height: 4.375rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .c-btn-arrow svg, .c-btn-round-cta__arrow svg, .c-btn-round-arrow__arrow svg, .c-btn-more__arrow svg {
    width: 1.375rem;
  }
}

.c-btn-arrow--wh:before {
  background: #fff;
}
.c-btn-arrow--wh svg {
  fill: var(--deepblue, #0E3E8F);
}

.c-btn-arrow--accent:before, .c-btn-round-cta__arrow:before {
  background: var(--color-accent);
}
.c-btn-arrow--accent svg, .c-btn-round-cta__arrow svg {
  fill: var(--deepblue, #0E3E8F);
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.c-btn-more {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  font-weight: 700;
}
@media screen and (min-width: 1024px) {
  .c-btn-more {
    gap: 1.25rem;
    font-size: 1.25rem;
  }
}

@media screen and (min-width: 1024px) {
  .c-btn-more--join {
    gap: 0.9375rem;
    font-size: 1.125rem;
  }
}
.c-btn-more--join .c-btn-more__arrow {
  width: 2.1875rem;
  height: 2.1875rem;
}
@media screen and (min-width: 1024px) {
  .c-btn-more--join .c-btn-more__arrow {
    width: 3.125rem;
    height: 3.125rem;
  }
}

.c-btn-more--sm {
  font-size: 0.875rem;
}
@media screen and (min-width: 1024px) {
  .c-btn-more--sm {
    font-size: 1.125rem;
  }
}
.c-btn-more--sm .c-btn-more__arrow {
  width: 2.1875rem;
  height: 2.1875rem;
}
@media screen and (min-width: 1024px) {
  .c-btn-more--sm .c-btn-more__arrow {
    width: 3.125rem;
    height: 3.125rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.c-btn-round-arrow {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 16.25rem;
  height: 3.5rem;
  position: relative;
  color: #FFF;
  font-size: 0.875rem;
  font-weight: 700;
}
.c-btn-round-arrow:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background: var(--deepblue, #0E3E8F);
  border-radius: 6.25rem;
  -webkit-transition: -webkit-transform var(--duration) var(--easeTheme);
  transition: -webkit-transform var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
  will-change: transform;
}
.c-btn-round-arrow span {
  position: relative;
}
.c-btn-round-arrow:hover:before {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}
@media screen and (min-width: 1024px) {
  .c-btn-round-arrow {
    width: 23.625rem;
    height: 5rem;
    font-size: 1.25rem;
  }
}

.c-btn-round-arrow__arrow {
  position: absolute;
  right: 0.1875rem;
}
@media screen and (min-width: 1024px) {
  .c-btn-round-arrow__arrow {
    right: 0.3125rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.c-btn-round-cta {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 3.75rem;
  position: relative;
  container-type: inline-size;
  color: var(--navy, #002F76);
  font-size: 0.875rem;
  font-weight: 900;
}
.c-btn-round-cta:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background: #fff;
  border-radius: 6.25rem;
  -webkit-transition: -webkit-transform var(--duration) var(--easeTheme);
  transition: -webkit-transform var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
  will-change: transform;
}
.c-btn-round-cta span {
  position: relative;
}
.c-btn-round-cta:hover:before {
  -webkit-transform: scale(0.98);
          transform: scale(0.98);
}
@media screen and (min-width: 1024px) {
  .c-btn-round-cta {
    height: 6.875rem;
    font-size: 1.375rem;
  }
}

.c-btn-round-cta__arrow {
  position: absolute;
  right: 0.375rem;
  -webkit-transition: -webkit-transform var(--duration) var(--easeTheme);
  transition: -webkit-transform var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
  will-change: transform;
}
.c-btn-round-cta:hover .c-btn-round-cta__arrow {
  -webkit-transform: translateX(-1cqw);
          transform: translateX(-1cqw);
}
@media screen and (min-width: 1024px) {
  .c-btn-round-cta__arrow {
    right: 1.25rem;
  }
}

.c-btn-round-cta--drawer {
  color: #fff;
}
.c-btn-round-cta--drawer:before {
  background: var(--color-deepblue);
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	c-btn-help
	サービス内容一覧の「？」（Figma 921-7539）
	押すと説明モーダルが開く（common.js の jsModal）
----------------------------------------------------*/
.c-btn-help {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 1.625rem;
  height: 1.625rem;
  position: relative;
  padding: 0;
  background: none;
  cursor: pointer;
}
.c-btn-help:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background: var(--color-deepblue);
  border-radius: 100%;
  -webkit-transition: -webkit-transform var(--duration) var(--easeTheme);
  transition: -webkit-transform var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
}
.c-btn-help svg {
  position: relative;
  width: 0.3375rem;
  height: auto;
  aspect-ratio: 7.5/15;
  fill: #fff;
}
.c-btn-help:hover:before {
  -webkit-transform: scale(0.85);
          transform: scale(0.85);
}
@media screen and (min-width: 1024px) {
  .c-btn-help {
    width: 2.25rem;
    height: 2.25rem;
  }
  .c-btn-help svg {
    width: 0.46875rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.c-btn-top {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4375rem;
  padding: 0;
  font-family: var(--PF);
  font-size: 0.875rem;
}
.c-btn-top:hover {
  color: var(--color-accent);
}
.c-btn-top:hover svg {
  stroke: var(--color-accent);
}
@media screen and (min-width: 1024px) {
  .c-btn-top {
    gap: 0.6875rem;
    font-size: 1.25rem;
  }
}

.c-btn-top__ico {
  width: 0.5625rem;
  position: relative;
}
.c-btn-top__ico svg {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 14/11;
  -webkit-transition: opacity var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
  transition: opacity var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme), opacity var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme), opacity var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
}
.c-btn-top__ico svg:nth-child(2) {
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%) translateY(100%);
          transform: translate(-50%, -50%) translateY(100%);
}
.c-btn-top:hover .c-btn-top__ico svg:nth-child(1) {
  opacity: 0;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.c-btn-top:hover .c-btn-top__ico svg:nth-child(2) {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) translateY(0);
          transform: translate(-50%, -50%) translateY(0);
  -webkit-transition-delay: 0.08s;
          transition-delay: 0.08s;
}
@media screen and (min-width: 1024px) {
  .c-btn-top__ico {
    width: 0.8125rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.c-btn-header-cta {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0.625rem 1.125rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.625rem;
  color: var(--navy, #002F76);
  font-size: 0.875rem;
  font-weight: 700;
  position: relative;
}
.c-btn-header-cta:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background: var(--yellow, #FFE200);
  border-radius: 6.25rem;
  -webkit-transition: -webkit-transform var(--duration) var(--easeTheme);
  transition: -webkit-transform var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
}
.c-btn-header-cta span {
  position: relative;
}
.c-btn-header-cta:hover:before {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.c-btn-round-sns {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 2.1875rem;
  height: 2.1875rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  aspect-ratio: 1/1;
  border-radius: 100%;
  position: relative;
}
.c-btn-round-sns:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 100%;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: var(--duration) var(--easeTheme);
  transition: var(--duration) var(--easeTheme);
}
.c-btn-round-sns img {
  position: relative;
  width: 100%;
}
a:hover .c-btn-round-sns:before, .c-btn-round-sns:hover:before {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  background: var(--deepblue, #0E3E8F);
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.c-btn-menu {
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  position: relative;
  background: #fff;
  padding: 0;
  -webkit-transition: var(--duration) var(--easeTheme);
  transition: var(--duration) var(--easeTheme);
}
.c-btn-menu span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #002F76;
  left: 0;
  -webkit-transition: top var(--duration) var(--easeTheme), -webkit-transform 0 var(--easeTheme);
  transition: top var(--duration) var(--easeTheme), -webkit-transform 0 var(--easeTheme);
  transition: top var(--duration) var(--easeTheme), transform 0 var(--easeTheme);
  transition: top var(--duration) var(--easeTheme), transform 0 var(--easeTheme), -webkit-transform 0 var(--easeTheme);
}
@media (hover: hover) {
  .c-btn-menu:hover span, a:hover .c-btn-menu span {
    background: var(--color-accent);
  }
  .c-btn-menu:hover span:nth-child(1), a:hover .c-btn-menu span:nth-child(1) {
    top: calc(50% - 0.28125rem);
  }
  .c-btn-menu:hover span:nth-child(2), a:hover .c-btn-menu span:nth-child(2) {
    top: calc(50% + 0.28125rem);
  }
}
.c-btn-menu span:nth-child(1) {
  top: calc(50% - 0.21875rem);
}
.c-btn-menu span:nth-child(2) {
  top: calc(50% + 0.21875rem);
}
.c-btn-menu.is-nav-open span {
  -webkit-transition: top 0.2s var(--easeOutBack), -webkit-transform 0.3s 0.2s var(--easeOutBack);
  transition: top 0.2s var(--easeOutBack), -webkit-transform 0.3s 0.2s var(--easeOutBack);
  transition: top 0.2s var(--easeOutBack), transform 0.3s 0.2s var(--easeOutBack);
  transition: top 0.2s var(--easeOutBack), transform 0.3s 0.2s var(--easeOutBack), -webkit-transform 0.3s 0.2s var(--easeOutBack);
}
.c-btn-menu.is-nav-open span:nth-child(1) {
  top: 50%;
  -webkit-transform: scale(-1, -1) rotate(-20deg);
          transform: scale(-1, -1) rotate(-20deg);
}
.c-btn-menu.is-nav-open span:nth-child(2) {
  top: 50%;
  -webkit-transform: scale(-1, -1) rotate(20deg);
          transform: scale(-1, -1) rotate(20deg);
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	フォーム
----------------------------------------------------*/
[hidden] {
  display: none !important;
}

[disabled] {
  cursor: not-allowed;
}

:focus:not(:focus-visible) {
  outline: none;
}

.sr-only {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  left: -9999px;
  top: -9999px;
}

input,
select,
label {
  vertical-align: middle;
  color: var(--color);
}

[type=text] {
  line-height: normal;
}

input[type=text],
input[type=email],
input[type=tel],
button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--color);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
}

input[type=submit],
button {
  cursor: pointer;
  border: none;
}

textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  resize: none;
  outline: none;
  background: transparent;
  color: var(--color);
  font-family: var(--font);
  font-size: 16px;
}

*:focus {
  outline: none;
}

/*----------------------------------------------------
	フォント
----------------------------------------------------*/
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
       text-size-adjust: 100%;
}
@media screen and (max-width: 640px) {
  html {
    font-size: 4.2666666667vw;
  }
}
@media screen and (min-width: 641px) and (max-width: 1023px) {
  html {
    font-size: 2.1333333333vw;
  }
}
@media screen and (min-width: 1024px) {
  html {
    font-size: min(16px, 1.1111111111vw);
  }
}
body {
  font-family: var(--font);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
       text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-weight: 500;
  -webkit-font-feature-settings: "pwid" on, "palt" on;
          font-feature-settings: "pwid" on, "palt" on;
  letter-spacing: 0.08em;
  word-wrap: break-word;
  color: var(--color);
}

.serif {
  font-family: var(--serif);
}

/*----------------------------------------------------
	レスポンシブ
----------------------------------------------------*/
@media screen and (min-width: 641px) {
  .sp {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  .sp-tab {
    display: none;
  }
}

@media screen and (max-width: 1023px) {
  .pc {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  .pc-tab {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  .tab {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  .tab {
    display: none;
  }
}

/*----------------------------------------------------
	リンク
----------------------------------------------------*/
button,
a {
  color: var(--color);
  text-decoration: none;
  -webkit-transition: var(--duration) var(--easeTheme);
  transition: var(--duration) var(--easeTheme);
  cursor: pointer;
}
@media (hover: none) {
  a, button {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
}
[id] {
  scroll-margin-top: var(--header-height);
}

[data-scroll-target] {
  content: "";
  display: block;
  position: relative;
  pointer-events: none;
  top: calc(-1 * var(--header-height));
}

/*
 * Lenis（慣性スクロール）
 * 本来は lenis/dist/lenis.css を読み込むが、lenis は package.json で
 * sideEffects: false を宣言しているため、JS から import すると Rollup に
 * ツリーシェイクされてバンドルに入らない。そのため SCSS 側で定義する。
 * 追従元: node_modules/lenis/dist/lenis.css
 */
html.lenis,
html.lenis body {
  height: auto;
}

/* lenis.stop() 中にキーボード・スクロールバー操作でスクロールするのを防ぐ */
.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

/* 入れ子のスクロール領域（data-lenis-prevent）で親にスクロールを伝播させない */
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
}

/* 慣性スクロール中に iframe がホイールイベントを奪うのを防ぐ */
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/*----------------------------------------------------
	コンテナ
----------------------------------------------------*/
.l-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1440px;
}
@media screen and (max-width: 640px) {
  .l-container {
    padding-left: 5.3333333333vw;
    padding-right: 5.3333333333vw;
  }
}
@media screen and (min-width: 641px) and (max-width: 1023px) {
  .l-container {
    padding-left: 5.3333333333vw;
    padding-right: 5.3333333333vw;
  }
}
@media screen and (min-width: 1024px) {
  .l-container {
    padding-left: 2.7777777778vw;
    padding-right: 2.7777777778vw;
  }
}
@media screen and (min-width: 1441px) {
  .l-container {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/*----------------------------------------------------
	body
----------------------------------------------------*/
body {
  position: relative;
  background: #38A6DC;
}
.l-body-wrap {
  width: 100%;
  min-height: 100%;
}
@media screen and (max-width: 1023px) {
  .l-body-wrap {
    overflow: hidden;
  }
}

/*----------------------------------------------------
	ヘッダー
----------------------------------------------------*/
.l-header-logo {
  position: fixed;
  z-index: 500;
  width: 10.625rem;
  left: 1.25rem;
  top: 1.5625rem;
}
@media screen and (min-width: 1024px) {
  .l-header-logo {
    left: 2.5rem;
    top: 2.8125rem;
    width: 17.005625rem;
  }
}

.l-header-nav {
  position: fixed;
  z-index: 500;
  right: 1.125rem;
  top: 1.25rem;
  -webkit-transition: opacity var(--duration) var(--easeTheme);
  transition: opacity var(--duration) var(--easeTheme);
  opacity: 1;
}
@media screen and (min-width: 1024px) {
  .l-header-nav {
    right: 2.5rem;
    top: 2.5rem;
  }
}

.js body:has(.p-top-mv__copy):not(.is-mv-copy-shown) .l-header-nav {
  opacity: 0;
  pointer-events: none;
}

/*----------------------------------------------------
	l-header-drawer
	ハンバーガーで開くドロワー（Figma SP 1976-4132 / PC 1976-4133）
	SPは全幅、PCは右から出る 720px（＝1440幅の半分）のパネル
	ヘッダーは fixed で常に見えているので、ドロワーはその下に敷く
	ナビの中身はフッターと同じ .cm-nav-main 一式。地色が白なので、
	文字色は --color の差し替えでまとめて反転させる
----------------------------------------------------*/
.l-header-drawer {
  width: 100%;
  position: fixed;
  z-index: 400;
  inset: 0 0 0;
  overflow: auto;
  background: #fff;
  --color: var(--color-navy);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity var(--duration) var(--easeTheme), visibility var(--duration) var(--easeTheme);
  transition: opacity var(--duration) var(--easeTheme), visibility var(--duration) var(--easeTheme);
}
.is-nav-open .l-header-drawer {
  opacity: 1;
  visibility: visible;
}
@media screen and (min-width: 1024px) {
  .l-header-drawer {
    inset: 0 0 0 auto;
    width: 45rem;
  }
}

/*----------------------------------------------------
	開くときの演出
	中身を上から順にフェードインアップさせる。順番（--i）は
	common.js の globalMenu() が「実際に出ている項目だけ」を数えて振る
	（TOPとCTAはSP限定で、PCでは display:none になるため）
	閉じるときは伏せた状態の指定（＝遅延なし）に戻るので、
	パネルのフェードアウトと一緒に一気に消える
----------------------------------------------------*/
.l-header-drawer__item {
  opacity: 0;
  -webkit-transform: translateY(1.25rem);
          transform: translateY(1.25rem);
  -webkit-transition: opacity var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
  transition: opacity var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
  transition: opacity var(--duration) var(--easeTheme), transform var(--duration) var(--easeTheme);
  transition: opacity var(--duration) var(--easeTheme), transform var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
  will-change: opacity, transform;
}
.is-nav-open .l-header-drawer__item {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
  -webkit-transition: opacity 0.7s var(--easeOutQuart) calc(var(--i, 0) * 0.05s + 0.15s), -webkit-transform 0.7s var(--easeOutQuart) calc(var(--i, 0) * 0.05s + 0.15s);
  transition: opacity 0.7s var(--easeOutQuart) calc(var(--i, 0) * 0.05s + 0.15s), -webkit-transform 0.7s var(--easeOutQuart) calc(var(--i, 0) * 0.05s + 0.15s);
  transition: opacity 0.7s var(--easeOutQuart) calc(var(--i, 0) * 0.05s + 0.15s), transform 0.7s var(--easeOutQuart) calc(var(--i, 0) * 0.05s + 0.15s);
  transition: opacity 0.7s var(--easeOutQuart) calc(var(--i, 0) * 0.05s + 0.15s), transform 0.7s var(--easeOutQuart) calc(var(--i, 0) * 0.05s + 0.15s), -webkit-transform 0.7s var(--easeOutQuart) calc(var(--i, 0) * 0.05s + 0.15s);
}

@media (prefers-reduced-motion: reduce) {
  .l-header-drawer__item {
    -webkit-transform: none;
            transform: none;
  }
  .is-nav-open .l-header-drawer__item {
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
  }
}
.l-header-drawer__wrap {
  min-height: 100%;
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
  padding: calc(var(--header-height) + 3.875rem) 1.25rem 3.53125rem;
}
@media screen and (min-width: 1024px) {
  .l-header-drawer__wrap {
    padding: calc(var(--header-height) + 1.5625rem) 4.625rem 5.125rem;
  }
}

.l-header-drawer__nav .cm-nav-main-link__external svg {
  fill: var(--color-navy);
}
.l-header-drawer__nav .cm-nav-main-link__ja {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  white-space: nowrap;
}
.l-header-drawer__nav .cm-nav-main__list-sub {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.21875rem;
}
@media screen and (min-width: 1024px) {
  .l-header-drawer__nav .cm-nav-main__list {
    gap: 0.3125rem;
  }
  .l-header-drawer__nav .cm-nav-main__list-sub {
    gap: 0.3125rem;
    margin-top: 2.8125rem;
  }
}

/*----------------------------------------------------
	各ページのセクションへのアンカー（Figma SP 2400-4320 / PC 2354-6186）
	見出しのすぐ下に、行頭へ星（#ico-star）を置いて小さく並べる
	（もとは左に破線の縦罫だったが、Figma更新で星の箇条書きになった）
	下の余白（Figmaは見出しブロック側の padding-bottom 10）はここで持つ
----------------------------------------------------*/
.l-header-drawer__anchors {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.1875rem;
  margin-bottom: 0.625rem;
}
@media screen and (min-width: 1024px) {
  .l-header-drawer__anchors {
    gap: 0.3125rem;
  }
}

.l-header-drawer__anchor {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3125rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
@media (hover: hover) {
  .l-header-drawer__anchor:hover, a:hover .l-header-drawer__anchor {
    color: var(--color-accent);
  }
}
@media screen and (min-width: 1024px) {
  .l-header-drawer__anchor {
    font-size: 1rem;
    letter-spacing: 0.06em;
  }
}

.l-header-drawer__anchor-ico {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 1.375rem;
  line-height: 0;
}
@media screen and (min-width: 1024px) {
  .l-header-drawer__anchor-ico {
    width: 2.125rem;
  }
}
.l-header-drawer__anchor-ico svg {
  width: 100%;
  height: auto;
  aspect-ratio: 34/27;
  fill: var(--color-yellow);
}

.l-header-drawer__cta {
  margin-top: 1.6875rem;
}

/*----------------------------------------------------
	球団オフィシャルサイトへの導線（Figma 1893-7081 / 1893-8231）
	上の区切り線は2pxのベタ（Figma Vector 31）
----------------------------------------------------*/
.l-header-drawer__official {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.25rem;
  color: var(--color);
  margin-top: 1.4375rem;
  padding-top: 1.4375rem;
  border-top: 2px solid var(--color-lightblue);
}
@media screen and (min-width: 1024px) {
  .l-header-drawer__official {
    gap: 2.5rem;
    margin-top: 3.125rem;
    padding-top: 3.125rem;
  }
}

.l-header-drawer__official-logo {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 4.5rem;
}
@media screen and (min-width: 1024px) {
  .l-header-drawer__official-logo {
    width: 5.9375rem;
  }
}
.l-header-drawer__official-logo img {
  width: 100%;
  height: auto;
}

.l-header-drawer__official-list {
  display: -ms-grid;
  display: grid;
  grid-auto-flow: column;
  -ms-grid-rows: auto 0 auto;
  grid-template-rows: repeat(2, auto);
  gap: 0 1.25rem;
}
@media screen and (min-width: 1024px) {
  .l-header-drawer__official-list {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 1.25rem;
  }
}

/*----------------------------------------------------
	main
----------------------------------------------------*/
.l-main__bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.l-main__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/*----------------------------------------------------
	l-opener
	TOPのオープナー（Figma SP 1725-9302 / PC 1725-9247）
	白地にロゴだけを置き、読み込み後にフェードアウトする
	抜けきってから body に is-opener-done が付き、
	それを合図に MV のイントロが動き出す（page.js の mvSlider）
	消すのは JS なので、JS無効時は最初から出さない
----------------------------------------------------*/
.l-opener {
  display: none;
}
.js .l-opener {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: -ms-grid;
  display: grid;
  place-items: center;
  background: #fff;
}

.l-opener.is-hidden {
  display: none;
}

.l-opener__logo {
  display: block;
  width: 7.8125rem;
  height: auto;
}
@media screen and (min-width: 1024px) {
  .l-opener__logo {
    width: 12.5rem;
  }
}

/*----------------------------------------------------
	l-opener--page
	下層ページのオープナー（TOPの短縮版。マークアップは _default.pug）
	ページ遷移直後のフォント読み込みでカクつくのを隠すのが目的なので、
	ロゴは置かず（ヘッダーロゴをそのまま見せる）青いベタ塗りだけにする

	流れは
	1. 青がフェードアウト（common.js の jsOpener → body に is-opener-done）
	2. FVテキストが動く（js-block-anim / js-letter-anim の data-wait で待ち受け）
	3. 英字が入りきったら body に is-page-intro-done が付き、ナビとFVより下が出る
	   （和文の入り終わりを待つと遅いので、バトンは英字＝js-block-anim 側で渡す）
	   （FVテキストを持たない規約ページ等は common.js の pageIntro が代わりに付ける）
----------------------------------------------------*/
.js .l-opener--page {
  background: var(--color-deepblue);
}

.js body:has(.l-opener--page):not(.is-opener-done) .l-header-logo,
.js body:has(.l-opener--page):not(.is-opener-done) .l-header-nav {
  z-index: 1001;
}
.js body:has(.l-opener--page):not(.is-opener-done) .l-header-nav {
  pointer-events: none;
}

.js body:has(.l-opener--page) .l-page-header ~ *,
.js body:has(.l-opener--page) .l-footer {
  -webkit-transition: opacity 0.8s var(--easeTheme);
  transition: opacity 0.8s var(--easeTheme);
}
.js body:has(.l-opener--page):not(.is-page-intro-done) .l-page-header ~ *,
.js body:has(.l-opener--page):not(.is-page-intro-done) .l-footer {
  opacity: 0;
}

/*----------------------------------------------------
	l-page-header
	下層ページ共通のページヘッダー（マークアップは _include/_mixin.pug の pageHeader）
	共通なのは箱のサイズと写真、そのロード演出（common.js の jsPageHeader）だけで、
	見出しの配置・文言はページ側（__inner に付ける固有クラス）で持たせる
----------------------------------------------------*/
.l-page-header {
  position: relative;
  width: 100%;
  aspect-ratio: 375/300;
}
@media screen and (min-width: 1024px) {
  .l-page-header {
    aspect-ratio: 1440/680;
  }
}

.l-page-header__bg {
  position: absolute;
  inset: 0;
  overflow: clip;
}
.l-page-header__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  will-change: transform;
}

.l-page-header__inner {
  position: absolute;
  color: var(--color);
}

/*----------------------------------------------------
	l-page-header--flat
	写真を敷かないベタ塗りのページヘッダー（規約ページなど、下層で共通に使う）
	見出しは絶対配置ではなく .l-container に入れて下端揃えで置くので、
	文言が増えて行数が変わっても頭が上に伸びるだけで済む
	（Figma実測の箱 SP 375:300 / PC 1440:492）
----------------------------------------------------*/
.l-page-header--flat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding-bottom: 2.1125rem;
  background: var(--color-deepblue);
}
@media screen and (min-width: 1024px) {
  .l-page-header--flat {
    aspect-ratio: initial;
    height: 30.75rem;
    padding-bottom: 3.28125rem;
  }
}

.l-page-header__title {
  color: var(--color);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
}
@media screen and (min-width: 1024px) {
  .l-page-header__title {
    font-size: 2.8125rem;
  }
}

/*----------------------------------------------------
	フッター
----------------------------------------------------*/
.l-footer {
  position: relative;
  --slit-count: 10;
  --slits-height: 15rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#103D89), to(#103D89)) no-repeat 0 100%/100% calc(100% - var(--slits-height));
  background: linear-gradient(#103D89, #103D89) no-repeat 0 100%/100% calc(100% - var(--slits-height));
  padding-top: calc(var(--slits-height) * 0.5);
}
@media screen and (min-width: 1024px) {
  .l-footer {
    padding-top: calc(var(--slits-height) * 0.5);
    --slits-height: 37.5rem;
  }
}

/*----------------------------------------------------
	フッター直上のストライプ
	各スリットを scaleY で伸ばし、ストライプ→ベタ塗りに変化させる
	アニメーションは common.js の footerSlits()
----------------------------------------------------*/
.l-footer__slits {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--slits-height);
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (1fr)[var(--slit-count)];
  grid-template-rows: repeat(var(--slit-count), 1fr);
  pointer-events: none;
}

.l-footer__slit {
  background: #103D89;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transform-origin: center top;
          transform-origin: center top;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .l-footer__slit {
    -webkit-transform: none;
            transform: none;
  }
}

.l-footer__pagetop {
  position: absolute;
  right: 0;
  top: 0.9375rem;
}
@media screen and (min-width: 1024px) {
  .l-footer__pagetop {
    top: 1.5625rem;
  }
}

.l-footer__wrap {
  position: relative;
  padding-block: 5.375rem 3.125rem;
  display: -ms-grid;
  display: grid;
      grid-template-areas: "nav nav" ". nav2" "sns bnr" "copyright bnr";
  -ms-grid-columns: 7.8125rem 2.0625rem 1fr;
  grid-template-columns: 7.8125rem 1fr;
  -ms-grid-rows: auto 1.25rem auto 1.25rem auto 1.25rem 1fr;
  grid-template-rows: auto auto auto 1fr;
  gap: 1.25rem 2.0625rem;
}
@media screen and (min-width: 1024px) {
  .l-footer__wrap {
    padding-block: 8.0625rem 2.5rem;
        grid-template-areas: "sns nav" "bnr nav2" "bnr copyright";
    gap: 0;
    -ms-grid-rows: auto 0 1fr 0 auto;
    grid-template-rows: auto 1fr auto;
    -ms-grid-columns: 1fr 0 42.5rem;
    grid-template-columns: 1fr 42.5rem;
  }
}

.l-footer__nav {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: nav;
}
@media screen and (min-width: 1024px) {
  .l-footer__nav {
    padding: 0;
  }
}

.l-footer__nav2 {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  grid-area: nav2;
  padding: 0 0 3.125rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.8125rem 1.25rem;
  color: #FFF;
  font-size: 0.6875rem;
}
.l-footer__nav2 a:hover {
  color: var(--color-accent);
}
@media screen and (max-width: 1023px) {
  .l-footer__nav2 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .l-footer__nav2 li:nth-child(1) {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .l-footer__nav2 {
    padding: 1.375rem 0 0;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    gap: 2.5rem;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
  }
}

.l-footer__sns {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  grid-area: sns;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 0.625rem 1fr 0.625rem 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.625rem;
}
@media screen and (min-width: 1024px) {
  .l-footer__sns {
    padding: 0 0 3.625rem;
    -ms-flex-item-align: end;
        align-self: flex-end;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0.5rem;
  }
}

.l-footer__bnr {
  -ms-grid-row: 5;
  -ms-grid-row-span: 3;
  -ms-grid-column: 3;
  grid-area: bnr;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}
.l-footer__bnr a {
  display: block;
  -webkit-transition: opacity var(--duration) var(--easeTheme);
  transition: opacity var(--duration) var(--easeTheme);
}
@media (hover: hover) {
  .l-footer__bnr a:hover, a:hover .l-footer__bnr a {
    opacity: 0.7;
  }
}
@media screen and (min-width: 1024px) {
  .l-footer__bnr {
    gap: 0.625rem;
    margin-top: 0.625rem;
    position: relative;
    top: -1.875rem;
  }
  .l-footer__bnr li {
    width: 12.5rem;
  }
}

.l-footer__copyright {
  -ms-grid-row: 7;
  -ms-grid-column: 1;
  grid-area: copyright;
  align-self: flex-end;
  font-family: var(--PF);
  font-size: 0.625rem;
  font-weight: 400;
  line-height: 118%;
  letter-spacing: 0;
}

@media screen and (min-width: 1024px){
  .l-footer__nav {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
  }
  .l-footer__nav2 {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
  .l-footer__sns {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .l-footer__bnr {
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
  }
  .l-footer__copyright {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
  }
}
@media screen and (min-width: 1024px) {
  .l-footer__copyright {
    position: relative;
    top: -1.875rem;
    text-align: right;
    font-size: 0.6875rem;
  }
}

/*----------------------------------------------------
	...
----------------------------------------------------*/
.p-top__bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.p-top__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.p-top-mv {
  position: relative;
  background: var(--color-deepblue);
}
@media screen and (max-width: 640px) {
  .p-top-mv {
    aspect-ratio: 750/1200;
  }
}
@media screen and (min-width: 1024px) {
  .p-top-mv {
    height: 100vh;
  }
}

/*----------------------------------------------------
	MVスライド
	クロスフェードで入れ替えつつ、表示しているあいだはゆっくり寄せ続ける
	アニメーションは page.js の mvSlider()
----------------------------------------------------*/
.p-top-mv__slide {
  display: block;
  width: 100%;
  aspect-ratio: 750/1200;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  pointer-events: none;
}
@media screen and (min-width: 1024px) {
  .p-top-mv__slide {
    aspect-ratio: auto;
    height: 100%;
  }
}

.p-top-mv__slideItem {
  display: block;
  position: absolute;
  inset: 0;
  will-change: transform;
}
.p-top-mv__slideItem img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-top-mv__slideItem:not(:first-child) {
  opacity: 0;
}

.js .p-top-mv__slideItem:first-child {
  opacity: 0;
}

/*----------------------------------------------------
	FVを覆うスリット
	下スクロールに合わせて、下のスリットから順に、下端を軸に上へ伸びてFVを塗りつぶす
	（フッターは上端を軸に下へ伸ばすので、伸びる向きが逆）
	コピー（__wrap）はこの上に重ねるので覆われない
	アニメーションは page.js の mvSlits()
----------------------------------------------------*/
.p-top-mv__slits {
  --slit-count: 10;
  position: absolute;
  inset: 0;
  z-index: 2;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (1fr)[var(--slit-count)];
  grid-template-rows: repeat(var(--slit-count), 1fr);
  pointer-events: none;
}

.p-top-mv__slit {
  background: var(--color-deepblue);
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  will-change: transform;
}

.p-top-mv__wrap {
  position: relative;
  z-index: 5;
  padding-block: 30.3125rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (min-width: 1024px) {
  .p-top-mv__wrap {
    height: 100%;
  }
}

.p-top-mv__copy {
  width: 16.25rem;
  margin: 0 0 0 0;
}
.p-top-mv__copy svg {
  display: block;
  width: 100%;
  height: auto;
}
.p-top-mv__copy svg.L1 {
  width: 11.875rem;
}
.p-top-mv__copy .c-letter-anim__line + .c-letter-anim__line {
  margin-top: 3.605313093%;
}
@media screen and (min-width: 1024px) {
  .p-top-mv__copy {
    width: 36.25rem;
    margin: 0;
    position: absolute;
    bottom: -0.625rem;
  }
  .p-top-mv__copy svg.L1 {
    width: 26.5rem;
  }
}

/*----------------------------------------------------
	スライドの現在地（Figma PC 2224-7440 / SP 2235-4276）
	FVのすぐ下、コンテナ内側の右端に置く
	.c-modal-option__dots と同じ星（#ico-star）だが、こちらは current が一回り大きくなる
	切り替えは page.js の mvSlider() が .is-current を付け替える
----------------------------------------------------*/
.p-top-mv__dots {
  position: absolute;
  -ms-flex-item-align: end;
      align-self: flex-end;
  bottom: -2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3125rem;
}
@media screen and (min-width: 1024px) {
  .p-top-mv__dots {
    bottom: -2.9375rem;
    gap: 0.5rem;
  }
}

.p-top-mv__dot {
  display: block;
}
.p-top-mv__dot svg {
  display: block;
  width: 1rem;
  height: auto;
  aspect-ratio: 34/27;
  fill: #fff;
  -webkit-transition: width var(--duration) var(--easeTheme), fill var(--duration) var(--easeTheme);
  transition: width var(--duration) var(--easeTheme), fill var(--duration) var(--easeTheme);
}
.p-top-mv__dot.is-current svg {
  width: 1.375rem;
  fill: var(--color-accent);
}
@media screen and (min-width: 1024px) {
  .p-top-mv__dot svg {
    width: 1.375rem;
  }
  .p-top-mv__dot.is-current svg {
    width: 2.125rem;
  }
}

.p-top-mv__desc {
  position: absolute;
  bottom: -8.125rem;
  margin: 0 0 0 0;
  -ms-flex-item-align: end;
      align-self: flex-end;
  font-size: 0.875rem;
  font-weight: 700;
}
@media screen and (max-width: 640px) {
  .p-top-mv__desc {
    right: 1.25rem;
  }
}
@media screen and (min-width: 1024px) {
  .p-top-mv__desc {
    bottom: -8.375rem;
    margin: 0 -0.3125rem 0 0;
    font-size: 1.5rem;
  }
}
/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.p-top-earlyBirdJoin {
  position: relative;
    padding-top: 4rem;
  overflow: hidden;
}
@media screen and (min-width: 1024px) {
  .p-top-earlyBirdJoin {
    padding-top: 10rem;
  }
}

.earlyBirdJoin__content {
  border: 5px double #ffffff; 
  padding: 10px;
}


/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.p-top-howto {
  position: relative;
  padding-block: 9.25rem 4.375rem;
  overflow: hidden;
}
@media screen and (min-width: 1024px) {
  .p-top-howto {
    padding-block: 15.625rem 8.125rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-top-howto__head {
    padding: 0 0 0 3.75rem;
  }
}

.p-top-howto__head-en {
  width: 20.625rem;
}
.p-top-howto__head-en svg {
  width: 100%;
  height: auto;
}
.p-top-howto__head-en > :nth-child(1) {
  width: 11.875rem;
}
.p-top-howto__head-en > :nth-child(2) {
  margin: 0.25rem 0 0 6.25rem;
  width: 12rem;
}
@media screen and (min-width: 1024px) {
  .p-top-howto__head-en {
    width: 38.75rem;
  }
  .p-top-howto__head-en > :nth-child(1) {
    width: 24.75rem;
  }
  .p-top-howto__head-en > :nth-child(2) {
    margin: 0.5625rem 0 0 12.625rem;
    width: 25.6875rem;
  }
}

.p-top-howto__head-ja {
  margin-top: 1.25rem;
  color: var(--white2, #F2F2F2);
  font-size: 0.8125rem;
  font-weight: 900;
  letter-spacing: 0;
}
@media screen and (min-width: 1024px) {
  .p-top-howto__head-ja {
    margin: 1.75rem 0 0 0.625rem;
    font-size: 1.75rem;
  }
}

.p-top-howto__points {
  margin-top: 4.6875rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8.75rem;
  padding: 0 1.75rem;
}
@media screen and (min-width: 1024px) {
  .p-top-howto__points {
    margin-top: 8.125rem;
    padding: 0 0 0 10.375rem;
    gap: 12.5rem;
  }
}

.p-top-howto-point {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5.25rem;
}
@media screen and (min-width: 1024px) {
  .p-top-howto-point {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 0;
  }
}

.p-top-howto-point__head {
  position: relative;
  z-index: 5;
}
.p-top-howto-point__head-txt1 {
  color: var(--white2, #F2F2F2);
  font-family: var(--PF);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 120%;
}
@media screen and (min-width: 1024px) {
  .p-top-howto-point__head-txt1 {
    font-size: 1.375rem;
  }
}

.p-top-howto-point__head-txt2 {
  margin-left: -0.05em;
  color: var(--white2, #F2F2F2);
  font-family: var(--PF);
  font-size: 4.375rem;
  font-weight: 700;
  line-height: 1;
}
@media screen and (min-width: 1024px) {
  .p-top-howto-point__head-txt2 {
    font-size: 6.25rem;
  }
}

.p-top-howto-point__head-txt3 {
  margin-top: 0.5625rem;
  color: var(--white2, #F2F2F2);
  font-family: var(--PF);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 100%;
}
@media screen and (min-width: 1024px) {
  .p-top-howto-point__head-txt3 {
    margin-top: 0.75rem;
    font-size: 1.75rem;
  }
}

.p-top-howto-point__pic {
  position: absolute;
}
.p-top-howto-point__pic svg {
  position: absolute;
  max-width: none;
  will-change: transform;
}
.p-top-howto-point__pic img {
  position: relative;
  will-change: transform;
}
.p-top-howto-point__content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
@media screen and (min-width: 1024px) {
  .p-top-howto-point__content {
    margin: 0 8.4375rem 0 auto;
  }
}

.p-top-howto-point__copy {
  color: var(--white2, #F2F2F2);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 135%;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 1024px) {
  .p-top-howto-point__copy {
    font-size: 2rem;
  }
}

.p-top-howto-point__label {
  margin-top: 1.125rem;
  margin-left: -0.25rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 1.6116875rem;
  padding: 0 0.625rem;
  background: url(../img/p-top-howto-point-label-bg.webp) center center/100% 100%;
  color: var(--Backgrounds-Secondary---Elevated, #F2F2F7);
  font-size: 0.875rem;
  font-weight: 700;
}
@media screen and (min-width: 1024px) {
  .p-top-howto-point__label {
    margin-top: 2.25rem;
    height: 2.3125rem;
    padding: 0 0.75rem;
    font-size: 1.25rem;
  }
}

.p-top-howto-point__desc {
  margin-top: 0.1875rem;
  color: var(--white2, #F2F2F2);
  text-align: justify;
  font-size: 0.75rem;
}
@media screen and (min-width: 1024px) {
  .p-top-howto-point__desc {
    margin-top: 0.875rem;
    width: 27.1875rem;
    font-size: 1rem;
  }
}

.p-top-howto-point__more {
  margin-top: 1.25rem;
}
@media screen and (min-width: 1024px) {
  .p-top-howto-point__more {
    margin-top: 1.875rem;
  }
}

.p-top-howto-point--01 .p-top-howto-point__pic svg {
  width: 12.5rem;
  top: 3.8125rem;
  left: 5.6875rem;
}
.p-top-howto-point--01 .p-top-howto-point__pic img {
  width: 10.5625rem;
  left: 7.3125rem;
  top: 0.375rem;
}
@media screen and (min-width: 1024px) {
  .p-top-howto-point--01 .p-top-howto-point__pic svg {
    width: 23.375rem;
    left: 7.8125rem;
    top: 10.8125rem;
  }
  .p-top-howto-point--01 .p-top-howto-point__pic img {
    width: 19.75rem;
    left: 10.75rem;
    top: -0.4375rem;
  }
}

.p-top-howto-point--02 .p-top-howto-point__pic svg {
  width: 13.6875rem;
  left: 5.25rem;
  top: 2.5625rem;
}
.p-top-howto-point--02 .p-top-howto-point__pic img {
  width: 9.9375rem;
  left: 7.5625rem;
  top: -0.1875rem;
}
@media screen and (min-width: 1024px) {
  .p-top-howto-point--02 .p-top-howto-point__pic svg {
    width: 24.8125rem;
    left: 6.25rem;
    top: 5.875rem;
  }
  .p-top-howto-point--02 .p-top-howto-point__pic img {
    width: 17.75rem;
    left: 10.875rem;
    top: -3.3125rem;
  }
}

.p-top-howto-point--03 .p-top-howto-point__pic svg {
  width: 11.75rem;
  height: auto;
  display: block;
  left: 5.375rem;
  top: 0.09375rem;
}
.p-top-howto-point--03 .p-top-howto-point__pic img {
  width: 13.3125rem;
  left: 5.25rem;
  top: -0.9375rem;
}
@media screen and (min-width: 1024px) {
  .p-top-howto-point--03 .p-top-howto-point__pic svg {
    width: 23.75rem;
    left: 6.0625rem;
    top: -1.6875rem;
  }
  .p-top-howto-point--03 .p-top-howto-point__pic img {
    width: 22.0625rem;
    left: 8.5rem;
    top: -2rem;
  }
}

.p-top-howto__options {
  margin-top: 5.125rem;
}
@media screen and (min-width: 1024px) {
  .p-top-howto__options {
    margin-top: 8.375rem;
    position: relative;
    padding: 0 5rem;
  }
}

.p-top-howto__options-list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 0.9375rem 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 0.9375rem;
}
@media screen and (min-width: 1024px) {
  .p-top-howto__options-list {
    -ms-grid-columns: 1fr 1.25rem 1fr 1.25rem 1fr 1.25rem 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1.25rem;
  }
}

.p-top-howto__options-more {
  margin-top: 2.6875rem;
  text-align: right;
}
@media screen and (min-width: 1024px) {
  .p-top-howto__options-more {
    margin-top: 0;
    position: relative;
  }
  .p-top-howto__options-more a {
    position: absolute;
    top: -13.75rem;
    right: 8.125rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.p-top-join {
  position: relative;
}
.p-top-join__bg {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.p-top-join__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-top-join__wrap {
  position: relative;
  padding-block: 11.25rem 4.375rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 1024px) {
  .p-top-join__wrap {
    padding: 13.25rem 5rem 4.375rem;
    height: 53.75rem;
  }
}

.p-top-join__price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.375rem;
}
@media screen and (min-width: 1024px) {
  .p-top-join__price {
    gap: 2.6875rem;
  }
}

.p-top-join__price-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.3125rem;
}
.p-top-join__price-label {
  color: #0E3E8F;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 120%;
  letter-spacing: 0.18em;
}
@media screen and (min-width: 1024px) {
  .p-top-join__price-label {
    font-size: 1.625rem;
    letter-spacing: 0.15em;
  }
}

.p-top-join__price-tag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0.0875rem 0.21875rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4375rem;
  -ms-flex-item-align: stretch;
      -ms-grid-row-align: stretch;
      align-self: stretch;
  background: #0E3E8F;
  color: #FFF;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 120%;
}
@media screen and (min-width: 1024px) {
  .p-top-join__price-tag {
    padding: 0.125rem 0.3125rem;
    font-size: 0.875rem;
  }
}

.p-top-join__price-amount {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 1024px) {
  .p-top-join__price-amount {
    gap: 0.25rem;
  }
}

.p-top-join__price-tax {
  position: absolute;
  left: 0;
  top: 0.8em;
  color: #002E73;
  font-size: 0.625rem;
  line-height: 120%;
}
@media screen and (min-width: 1024px) {
  .p-top-join__price-tax {
    font-size: 0.875rem;
  }
}

.p-top-join__price-yen {
  -ms-flex-item-align: end;
      align-self: flex-end;
  padding-bottom: 0.05em;
  color: #002E73;
  font-family: var(--PF);
  font-size: 3.375rem;
  font-weight: 700;
  line-height: 98%;
}
@media screen and (min-width: 1024px) {
  .p-top-join__price-yen {
    font-size: 4.875rem;
  }
}

.p-top-join__price-num {
  color: #002E73;
  font-family: var(--PF);
  font-size: 4.625rem;
  font-weight: 700;
  line-height: 1;
}
@media screen and (min-width: 1024px) {
  .p-top-join__price-num {
    font-size: 6.625rem;
    letter-spacing: -0.02em;
  }
}

.p-top-join__desc {
  margin-top: 1.3125rem;
  width: 17.5rem;
  color: #FFF;
  text-align: justify;
  font-size: 0.75rem;
  font-weight: 700;
}
@media screen and (min-width: 1024px) {
  .p-top-join__desc {
    margin-top: 3.125rem;
    width: 35.75rem;
    font-size: 1.125rem;
  }
}

.p-top-join__more {
  margin-top: 2.625rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.9375rem;
}
@media screen and (min-width: 1024px) {
  .p-top-join__more {
    margin-top: 5.625rem;
    gap: 8.5rem;
  }
}

.p-top-join__action {
  margin-top: 1.5625rem;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .p-top-join__action {
    margin-top: 2.5rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	ステートメント（Figma PC 2252-6735 / SP 2256-6754）
	.p-top の最後、共通のページ内ナビ（.cm-nav-page）の手前
	背景は .p-top__bg（fixed）をそのまま見せるので自前の背景は持たない
----------------------------------------------------*/
.p-top-statement {
  position: relative;
  padding-block: 5.3125rem 2.75rem;
}
@media screen and (min-width: 1024px) {
  .p-top-statement {
    padding-block: 8.75rem 2.1875rem;
  }
}

.p-top-statement__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.p-top-statement__logo {
  width: 100px;
}
.p-top-statement__logo img {
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .p-top-statement__logo {
    width: 9.375rem;
  }
}

.p-top-statement__copy {
  margin-top: 2rem;
  width: 13.25rem;
}
.p-top-statement__copy svg {
  display: block;
  width: 100%;
  height: auto;
}
.p-top-statement__copy .c-letter-anim__line + .c-letter-anim__line {
  margin-top: 1.6746%;
}
@media screen and (min-width: 1024px) {
  .p-top-statement__copy {
    margin-top: 60px;
    width: 24.0625rem;
  }
}

.p-top-statement__desc {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.7875rem;
  font-weight: 700;
}
@media screen and (min-width: 1024px) {
  .p-top-statement__desc {
    margin-top: 2.5rem;
    font-size: 1.125rem;
  }
}
.p-top-statement__desc .c-letter-anim__line:last-child {
  margin-top: 1.3em;
}

.p-top-statement__desc + .p-top-statement__desc {
  margin-top: 1.3em;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	入会受付バナー（Figma PC 2270-5622 / SP 2256-6941）
	画面右下に固定。出し入れは page.js の asideJoin()（.is-shown）
	Figma上は .p-top の途中に置かれているが、注釈どおり「画面右下」に出す
----------------------------------------------------*/
.p-top-aside-join {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(1.25rem);
          transform: translateY(1.25rem);
  -webkit-transition: opacity var(--duration) var(--easeTheme), visibility var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
  transition: opacity var(--duration) var(--easeTheme), visibility var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
  transition: opacity var(--duration) var(--easeTheme), visibility var(--duration) var(--easeTheme), transform var(--duration) var(--easeTheme);
  transition: opacity var(--duration) var(--easeTheme), visibility var(--duration) var(--easeTheme), transform var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
}
.p-top-aside-join.is-shown {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
@media screen and (min-width: 1024px) {
  .p-top-aside-join {
    right: 2.5rem;
    bottom: 2.5rem;
  }
}

.p-top-aside-join__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 17.25rem;
  height: 6.5625rem;
  border-radius: 0.3125rem;
  background: var(--color-deepblue);
  overflow: hidden;
}
@media screen and (min-width: 1024px) {
  .p-top-aside-join__link {
    width: 26.9375rem;
    height: 8.75rem;
    border-radius: 0.625rem;
  }
}

.p-top-aside-join__pic {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 6.5625rem;
  height: 6.5625rem;
}
.p-top-aside-join__pic img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 1024px) {
  .p-top-aside-join__pic {
    width: 8.75rem;
    height: 8.75rem;
  }
}

.p-top-aside-join__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.3125rem;
  padding-left: 1.25rem;
}
@media screen and (min-width: 1024px) {
  .p-top-aside-join__body {
    padding-left: 2.0625rem;
  }
}

.p-top-aside-join__label {
  padding: 0.0875rem 0.21875rem;
  background: #fff;
  color: var(--color-deepblue);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
@media screen and (min-width: 1024px) {
  .p-top-aside-join__label {
    padding: 0.125rem 0.3125rem;
    font-size: 0.875rem;
  }
}

.p-top-aside-join__date {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.625rem;
}

.p-top-aside-join__date-day {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3125rem;
}
@media screen and (min-width: 1024px) {
  .p-top-aside-join__date-day {
    gap: 0.375rem;
  }
}

.p-top-aside-join__date-num,
.p-top-aside-join__date-time {
  font-family: var(--PF);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
@media screen and (min-width: 1024px) {
  .p-top-aside-join__date-num,
  .p-top-aside-join__date-time {
    font-size: 2.8125rem;
  }
}

.p-top-aside-join__date-dow {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 0.7px solid #fff;
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (min-width: 1024px) {
  .p-top-aside-join__date-dow {
    width: 1.5625rem;
    height: 1.5625rem;
    border-width: 1px;
    font-size: 1rem;
  }
}

.p-top-aside-join__close {
  position: absolute;
  right: 0.875rem;
  top: 0.875rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.3125rem;
  margin: -0.3125rem;
  background: none;
  border: 0;
  cursor: pointer;
}
.p-top-aside-join__close svg {
  display: block;
  width: 1rem;
  height: auto;
  aspect-ratio: 23.5/15.299;
  stroke: #fff;
  -webkit-transition: opacity var(--duration) var(--easeTheme);
  transition: opacity var(--duration) var(--easeTheme);
}
@media (hover: hover) {
  .p-top-aside-join__close:hover svg, a:hover .p-top-aside-join__close svg {
    opacity: 0.6;
  }
}
@media screen and (min-width: 1024px) {
  .p-top-aside-join__close svg {
    width: 1.46875rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	p-enjoy（BlueMatesの楽しみ方）
	Figma: SP 1131-5681 / PC 1167-12151
----------------------------------------------------*/
.p-enjoy {
  position: relative;
}

/*----------------------------------------------------
	本文の内側幅
	PCの本文カラムは 1188/1440（左右126px）で、l-container（左右40px）より
	さらに内側。SPは l-container の内側と同じ（335/375）なので、
	l-container は使わず自前で持たせる
----------------------------------------------------*/
.p-enjoy-body,
.p-enjoy-intro {
  margin-inline: auto;
  width: 100%;
  max-width: 1440px;
  padding-inline: 1.25rem;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-body,
  .p-enjoy-intro {
    padding-inline: 7.875rem;
  }
}

/*----------------------------------------------------
	ページヘッダーの中身（Figma 1131-6615 / 1167-12295）
	箱と写真は共通（l-page-header）で、ここは配置と文字組みだけ。
	「ENJOY!」と和文はヘッダー写真の下端をはみ出して背景の上に乗る
----------------------------------------------------*/
.p-enjoy-header__inner {
  left: 4.5%;
  top: 64%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-header__inner {
    left: 6.74%;
    top: 61.5%;
  }
}

.p-enjoy-header__en {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  color: var(--color-white2);
  font-family: var(--PF);
  font-size: 6.8429375rem;
  font-weight: 700;
  line-height: 0.7937;
  letter-spacing: 0;
  white-space: nowrap;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-header__en {
    font-size: 12.8125rem;
  }
}

.p-enjoy-header__en-line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.1453em;
}

.p-enjoy-header__en-to {
  font-size: 0.639em;
  font-weight: 900;
}

.p-enjoy-header__en-line--enjoy {
  margin-left: 0.9877em;
  height: 1em;
  gap: 0.021em;
}

.p-enjoy-header__en-mark {
  position: relative;
  width: 1.5625rem;
  top: 0.375rem;
  left: -0.9375rem;
}
.p-enjoy-header__en-mark svg {
  width: 100%;
  height: auto;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-header__en-mark {
    width: 2.9375rem;
    top: 0.625rem;
    left: -1.875rem;
  }
}

.p-enjoy-header__ja {
  margin-top: -0.25rem;
  color: var(--color-white2);
  font-size: 0.8125rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-header__ja {
    margin-top: -1.25rem;
    font-size: 1.75rem;
    letter-spacing: 0;
  }
}

/*----------------------------------------------------
	導入文＋年会費の写真（Figma 1131-5702・1131-6662 / 1167-12159・1167-12160）
	どちらも本文カラムの右端に揃える
----------------------------------------------------*/
.p-enjoy-intro {
  margin-top: 10.0625rem;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-intro {
    margin-top: 15.1875rem;
  }
}

.p-enjoy-intro__lead {
  margin-left: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--color-white2);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-intro__lead {
    font-size: 1.25rem;
  }
}

/*----------------------------------------------------
	年会費バナー（Figma 1976-4131 / 1326-5589）
	写真の上に年会費の文字を載せる。文字は焼き込まないのでSP/PCで組み替える
----------------------------------------------------*/
.p-enjoy-intro__banner {
  position: relative;
  margin-top: 1.25rem;
  margin-left: auto;
  aspect-ratio: 336/169;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-intro__banner {
    margin-top: 2.5rem;
    width: 68.8125rem;
    aspect-ratio: 1101/440;
  }
}

.p-enjoy-intro__pic {
  display: block;
  position: absolute;
  inset: 0;
}
.p-enjoy-intro__pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-enjoy-intro__pic:after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(-30.56deg, rgba(0, 0, 0, 0.2) 24.384%, rgba(0, 0, 0, 0) 31.615%);
}
@media screen and (min-width: 1024px) {
  .p-enjoy-intro__pic:after {
    background-image: linear-gradient(-25.13deg, rgba(0, 0, 0, 0.2) 24.384%, rgba(0, 0, 0, 0) 31.615%);
  }
}

.p-enjoy-intro__fee {
  position: absolute;
  right: 1.16875rem;
  bottom: 0.95rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.625rem;
  color: var(--color);
}
@media screen and (min-width: 1024px) {
  .p-enjoy-intro__fee {
    right: 1.9rem;
    bottom: 1.25rem;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1.5625rem;
  }
}

.p-enjoy-intro__fee-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 0.3125rem;
}

.p-enjoy-intro__fee-label {
  margin-right: -0.17em;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.17em;
  white-space: nowrap;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-intro__fee-label {
    margin-right: -0.15em;
    font-size: 1.625rem;
    letter-spacing: 0.15em;
  }
}

.p-enjoy-intro__fee-tag {
  padding: 0.0875rem 0.21875rem;
  background: var(--color-deepblue);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-intro__fee-tag {
    padding: 0.125rem 0.3125rem;
    font-size: 0.875rem;
  }
}

.p-enjoy-intro__price {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0.14375rem;
  font-family: var(--PF);
  font-weight: 700;
  line-height: 1;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-intro__price {
    gap: 0.223125rem;
  }
}

.p-enjoy-intro__price-yen {
  font-size: 3.375rem;
  letter-spacing: -0.02em;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-intro__price-yen {
    font-size: 4.875rem;
  }
}

.p-enjoy-intro__price-num {
  font-size: 4.625rem;
  letter-spacing: -0.02em;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-intro__price-num {
    font-size: 6.625rem;
  }
}

.p-enjoy-intro__price-tax {
  position: absolute;
  left: 0.04375rem;
  top: 0.426875rem;
  font-family: var(--font);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-intro__price-tax {
    left: 0.151875rem;
    top: 0.61rem;
    font-size: 0.875rem;
  }
}

/*----------------------------------------------------
	POINT 01-03（Figma 1131-5712〜 / 1167-12303）
	TOPの「BlueMatesの楽しみ方」と同じ内容のため、
	DOM・CSSともに .p-top-howto-point 一式をそのまま使う
	（共通化する場合はこの2ページをまとめて移す）
----------------------------------------------------*/
.p-enjoy-howto {
  position: relative;
  overflow-x: clip;
  margin-top: 8.5rem;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-howto {
    margin-top: 15.6875rem;
  }
}
.p-enjoy-howto .p-top-howto__points {
  margin-top: 0;
}

/*----------------------------------------------------
	サービス内容一覧（Figma 1131-7003 / 1167-12860）
----------------------------------------------------*/
.p-enjoy-service {
  margin-top: 7.5rem;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-service {
    margin-top: 10.875rem;
  }
}

.p-enjoy-service__body {
  margin-top: 2.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.8125rem;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-service__body {
    margin-top: 3.125rem;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 4.875rem 1fr;
    grid-template-columns: 1fr 1fr;
    -webkit-column-gap: 4.875rem;
       -moz-column-gap: 4.875rem;
            column-gap: 4.875rem;
    row-gap: 3.125rem;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}

@media screen and (min-width: 1024px) {
  .p-enjoy-service__group--wide {
    grid-column: 1/-1;
  }
}

.p-enjoy-service__head {
  margin-bottom: 0.625rem;
  padding: 0.625rem 0;
  background-image: repeating-linear-gradient(to right, #fff 0 1px, transparent 1px 3px), repeating-linear-gradient(to right, #fff 0 1px, transparent 1px 3px);
  background-position: left top, left bottom;
  background-size: 100% 1px;
  background-repeat: repeat-x;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-service__head {
    margin-bottom: 1.25rem;
    padding: 0.9375rem 0;
    font-size: 1.5rem;
  }
}

.p-enjoy-service__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.375rem;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-service__list {
    gap: 0.5rem;
  }
}

.p-enjoy-service__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.625rem;
  min-height: 1.625rem;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-service__item {
    min-height: 2.25rem;
  }
}

.p-enjoy-service__txt {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-service__txt {
    font-size: 1.1875rem;
  }
}

.p-enjoy-service__txt-note {
  font-size: 0.875rem;
}
@media screen and (max-width: 640px) {
  .p-enjoy-service__txt-note {
    display: block;
    margin-top: 0.1875rem;
  }
}
@media screen and (min-width: 1024px) {
  .p-enjoy-service__txt-note {
    font-size: 0.875rem;
  }
}

/*----------------------------------------------------
	サービスに関する注意事項（Figma 1167-13539 / 1167-12862・1167-12985）
	開閉は共通の c-accordion（既定は閉じた状態）
----------------------------------------------------*/
.p-enjoy-attention {
  margin-top: 0.625rem;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-attention {
    margin-top: -0.5rem;
  }
}

.p-enjoy-attention__pic {
  --jump-room: 1.25rem;
  overflow: clip;
  margin-top: calc(var(--jump-room) * -1);
  padding-top: var(--jump-room);
  margin-left: auto;
  margin-right: 2.25rem;
  width: 9.0625rem;
}
.p-enjoy-attention__pic img {
  width: 100%;
  display: block;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-attention__pic {
    --jump-room: 2rem;
    margin-right: 4.5625rem;
    width: 14.125rem;
  }
}

/*----------------------------------------------------
	今すぐ入会する（Figma 1409-6242 / 1167-12869）
	ボタン自体はTOPと同じ c-btn-round-cta
----------------------------------------------------*/
.p-enjoy-action {
  margin-top: 1.875rem;
}
@media screen and (min-width: 1024px) {
  .p-enjoy-action {
    margin-top: 5rem;
    margin-inline: auto;
    width: 63.3125rem;
  }
}

/*----------------------------------------------------
	p-join（入会方法）
	Figma: SP 1583-12404 / PC 1261-5059
----------------------------------------------------*/
.p-join {
  position: relative;
}

/*----------------------------------------------------
	ページヘッダーの中身（Figma 1583-12411 / 1261-5527）
	箱と写真は共通（l-page-header）で、ここは配置と文字組みだけ
----------------------------------------------------*/
.p-join-header__inner {
  left: 50%;
  top: 35%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3125rem;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .p-join-header__inner {
    left: 73.125%;
    top: 27.5%;
    gap: 0.9375rem;
  }
}

.p-join-header__en {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  font-family: var(--PF);
  font-size: 4.625rem;
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
@media screen and (min-width: 1024px) {
  .p-join-header__en {
    font-size: 9.375rem;
  }
}

.p-join-header__en-line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.603125rem;
}
@media screen and (min-width: 1024px) {
  .p-join-header__en-line {
    gap: 1.75rem;
  }
}

.p-join-header__en-to {
  margin-top: 0.15625rem;
  font-size: 2.8125rem;
  font-weight: 900;
}
@media screen and (min-width: 1024px) {
  .p-join-header__en-to {
    margin-top: 0.3125rem;
    font-size: 5.625rem;
  }
}

.p-join-header__en-line--join {
  margin-left: 1.0625rem;
}
@media screen and (min-width: 1024px) {
  .p-join-header__en-line--join {
    margin-left: 2.5rem;
    margin-top: 0.28125rem;
  }
}

.p-join-header__ja {
  font-size: 0.8125rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
@media screen and (min-width: 1024px) {
  .p-join-header__ja {
    font-size: 1.75rem;
  }
}

/*----------------------------------------------------
	本文まわり
	SPはサイドナビを本文の上に右寄せ、PCは左に並べる
----------------------------------------------------*/
.p-join-body {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-top: 1.25rem;
  padding-bottom: 4.125rem;
}
@media screen and (min-width: 1024px) {
  .p-join-body {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 14rem;
    padding-top: 1.875rem;
    padding-bottom: 7.5rem;
  }
}

.p-join-body__side {
  -ms-flex-item-align: end;
      align-self: flex-end;
}
@media screen and (min-width: 1024px) {
  .p-join-body__side {
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 12.9375rem;
  }
}

.p-join-body__main {
  margin-top: 7.875rem;
}
@media screen and (min-width: 1024px) {
  .p-join-body__main {
    margin-top: 9.6875rem;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 52.6875rem;
  }
}

/*----------------------------------------------------
	早期キャンペーン（Figma 1583-13312 / 1261-6393）
----------------------------------------------------*/
.p-join-campaign .c-heading-section {
  margin-bottom: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .p-join-campaign .c-heading-section {
    margin-bottom: 3.75rem;
  }
}

.p-join-campaign__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 0.625rem;
}
@media screen and (min-width: 1024px) {
  .p-join-campaign__body {
    gap: 1.25rem;
  }
}

.p-join-campaign__body + .p-join-campaign__body,
.p-join-campaign__info {
  margin-top: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .p-join-campaign__body + .p-join-campaign__body,
  .p-join-campaign__info {
    margin-top: 3.75rem;
  }
}

.p-join-campaign__bnr {
  display: -ms-grid;
  display: grid;
  place-items: center;
  width: 100%;
  background: #EAF5FE;
  color: #6A6A6A;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
@media screen and (min-width: 1024px) {
  .p-join-campaign__bnr {
    font-size: 1.25rem;
  }
}

/*----------------------------------------------------
	手続方法（Figma 1583-13304 / 1261-6433）
----------------------------------------------------*/
.p-join-process {
  margin-top: 6.25rem;
}
@media screen and (min-width: 1024px) {
  .p-join-process {
    margin-top: 12.375rem;
    max-width: 48.5625rem;
  }
}
.p-join-process .c-heading-section {
  margin-bottom: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .p-join-process .c-heading-section {
    margin-bottom: 3.75rem;
  }
}

.p-join-process__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 0.625rem;
}
@media screen and (min-width: 1024px) {
  .p-join-process__body {
    gap: 1.25rem;
  }
}
.p-join-process__body .c-list-annotation {
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .p-join-process__body .c-list-annotation {
    width: 33.625rem;
  }
}

.p-join-process__rows {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.625rem;
}
@media screen and (min-width: 1024px) {
  .p-join-process__rows {
    gap: 1.25rem;
  }
}

.p-join-process__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.875rem;
  margin: 0;
}
@media screen and (min-width: 1024px) {
  .p-join-process__row {
    gap: 1.25rem;
  }
}

.p-join-process__row-label {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 7.75rem;
  height: 4.125rem;
  border: 1.4px solid #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 1024px) {
  .p-join-process__row-label {
    width: 13.75rem;
    height: 4.5rem;
    border-width: 2px;
    font-size: 1.5rem;
  }
}

.p-join-process__row-txt {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: justify;
}
@media screen and (min-width: 1024px) {
  .p-join-process__row-txt {
    font-size: 1rem;
  }
}

.p-join-process__date {
  width: 100%;
  height: 8.125rem;
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  justify-items: start;
  gap: 0.6875rem;
  margin-top: 0.625rem;
  background: var(--color-deepblue);
}
@media screen and (min-width: 1024px) {
  .p-join-process__date {
    grid-auto-flow: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1.5625rem;
    height: 11.25rem;
    margin-top: 1.25rem;
  }
}

.p-join-process__date-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 0.3125rem;
}

.p-join-process__date-target {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
@media screen and (min-width: 1024px) {
  .p-join-process__date-target {
    font-size: 0.875rem;
  }
}

.p-join-process__date-tag {
  padding: 0.0875rem 0.21875rem;
  background: #fff;
  color: var(--color-deepblue);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .p-join-process__date-tag {
    padding: 0.125rem 0.3125rem;
    font-size: 1rem;
  }
}

.p-join-process__date-value {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.625rem;
  font-family: var(--PF);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.p-join-process__date-day {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3125rem;
}
@media screen and (min-width: 1024px) {
  .p-join-process__date-day {
    gap: 0.375rem;
  }
}

.p-join-process__date-num,
.p-join-process__date-time {
  font-size: 2.1875rem;
  letter-spacing: 0.02em;
}
@media screen and (min-width: 1024px) {
  .p-join-process__date-num,
  .p-join-process__date-time {
    font-size: 3.4375rem;
  }
}

.p-join-process__date-dow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 1.3125rem;
  height: 1.3125rem;
  border: 0.7px solid #fff;
  border-radius: 6.25rem;
  font-family: var(--font);
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: 0;
}
@media screen and (min-width: 1024px) {
  .p-join-process__date-dow {
    width: 1.875rem;
    height: 1.875rem;
    border-width: 1px;
    font-size: 1.25rem;
  }
}

.p-join-process__info {
  margin-top: 0.625rem;
}
@media screen and (min-width: 1024px) {
  .p-join-process__info {
    margin-top: 1.25rem;
  }
}

/*----------------------------------------------------
	決済方法（Figma 1583-13229 / 1261-6412）
----------------------------------------------------*/
.p-join-payment {
  margin-top: 4.40625rem;
}
@media screen and (min-width: 1024px) {
  .p-join-payment {
    margin-top: 6.875rem;
  }
}
.p-join-payment .c-heading-bar {
  margin-bottom: 1.875rem;
}
@media screen and (min-width: 1024px) {
  .p-join-payment .c-heading-bar {
    margin-bottom: 2.875rem;
  }
}

.p-join-payment__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 1.25rem;
}
.p-join-payment__body > .c-paragraph {
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .p-join-payment__body .c-btn-more {
    margin-top: 0.625rem;
  }
}

.p-join-payment__note {
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .p-join-payment__note {
    width: 30.25rem;
  }
}

.p-join-payment__cards {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.625rem;
}
@media screen and (min-width: 1024px) {
  .p-join-payment__cards {
    gap: 1.5625rem;
  }
}

.p-join-payment__card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.3125rem;
  padding: 1.25rem;
  border-radius: 0.4375rem;
  background: var(--color-lightblue2);
}
.p-join-payment__card:first-child {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 6.8125rem;
}
.p-join-payment__card:last-child {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
@media screen and (min-width: 1024px) {
  .p-join-payment__card {
    gap: 1.5625rem;
    padding: 2rem;
    border-radius: 0.625rem;
  }
  .p-join-payment__card:first-child {
    width: 17.5rem;
  }
}

.p-join-payment__card-name {
  white-space: nowrap;
  color: var(--color-navy);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 1024px) {
  .p-join-payment__card-name {
    font-size: 1.1875rem;
  }
}

.p-join-payment__logos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.3125rem;
}
@media screen and (min-width: 1024px) {
  .p-join-payment__logos {
    gap: 1.25rem;
  }
}

.p-join-payment__logo {
  width: 3.125rem;
}
.p-join-payment__logo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 100/62;
}
@media screen and (min-width: 1024px) {
  .p-join-payment__logo {
    width: 6.25rem;
  }
}

/*----------------------------------------------------
	2025年度メンバーへのご案内（Figma 1583-13311 / 1261-6353）
----------------------------------------------------*/
.p-join-guide {
  margin-top: 5rem;
}
@media screen and (min-width: 1024px) {
  .p-join-guide {
    margin-top: 6.25rem;
    max-width: 43rem;
  }
}
.p-join-guide .c-heading-bar {
  margin-bottom: 1.875rem;
}
@media screen and (min-width: 1024px) {
  .p-join-guide .c-heading-bar {
    margin-bottom: 2.8125rem;
  }
}

.p-join-guide__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.25rem;
}
@media screen and (min-width: 1024px) {
  .p-join-guide__body {
    gap: 3.125rem;
  }
}

.p-join-guide__head {
  padding-block: 0.625rem;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 1024px) {
  .p-join-guide__head {
    padding-block: 0.9375rem;
    font-size: 1.5rem;
  }
}

.p-join-guide__groups {
  margin-top: 1.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.9375rem;
}
@media screen and (min-width: 1024px) {
  .p-join-guide__groups {
    gap: 1.5625rem;
  }
}

.p-join-guide__term {
  margin-bottom: 0.3125rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: justify;
}
@media screen and (min-width: 1024px) {
  .p-join-guide__term {
    font-size: 1.1875rem;
  }
}

.p-join-guide__list {
  color: var(--color-white2);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
.p-join-guide__list > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.625rem;
  text-align: justify;
}
.p-join-guide__list > li:before {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-top: calc((1.5em - 0.375rem) / 2);
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
}
@media screen and (min-width: 1024px) {
  .p-join-guide__list {
    font-size: 1rem;
  }
}

.p-join-guide__txt {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: justify;
}
@media screen and (min-width: 1024px) {
  .p-join-guide__txt {
    font-size: 1rem;
  }
}

/*----------------------------------------------------
	p-ticket（チケットサービス）
	Figma: SP 1409-5282 / PC 987-6117
----------------------------------------------------*/
.p-ticket {
  position: relative;
}

/*----------------------------------------------------
	ページヘッダーの中身（Figma 1409-5291 / 1107-1985）
	箱と写真は共通（l-page-header）
----------------------------------------------------*/
.p-ticket-header__inner {
  left: 50%;
  top: 34.3%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3125rem;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .p-ticket-header__inner {
    left: 73.125%;
    top: 27.9%;
    gap: 0.9375rem;
  }
}

.p-ticket-header__en {
  font-family: var(--PF);
  font-size: 4.625rem;
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.p-ticket-header__en span {
  display: block;
}
@media screen and (min-width: 1024px) {
  .p-ticket-header__en {
    font-size: 9.375rem;
    letter-spacing: 0;
  }
}

.p-ticket-header__ja {
  font-size: 0.8125rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
@media screen and (min-width: 1024px) {
  .p-ticket-header__ja {
    font-size: 1.75rem;
  }
}

/*----------------------------------------------------
	本文まわり（p-join と同じ組み）
----------------------------------------------------*/
.p-ticket-body {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-top: 1.25rem;
  padding-bottom: 1.875rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-body {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 14rem;
    padding-top: 1.875rem;
    padding-bottom: 8.6875rem;
  }
}

.p-ticket-body__side {
  -ms-flex-item-align: end;
      align-self: flex-end;
}
@media screen and (min-width: 1024px) {
  .p-ticket-body__side {
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 12.9375rem;
  }
}

.p-ticket-body__main {
  margin-top: 7.875rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-body__main {
    margin-top: 9.6875rem;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 52.6875rem;
  }
}

/*----------------------------------------------------
	共通パーツ
----------------------------------------------------*/
.p-ticket-heading-sub {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
}
@media screen and (min-width: 1024px) {
  .p-ticket-heading-sub {
    font-size: 1.5rem;
  }
}

.p-ticket-step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.25rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-step {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 3.125rem;
  }
}

.p-ticket-step__pic {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 8.4375rem;
}
.p-ticket-step__pic img {
  display: block;
  width: 100%;
  height: auto;
}

.p-ticket-step__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.125rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-step__list {
    gap: 1.875rem;
  }
}

.p-ticket-step__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.5rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-step__item {
    gap: 0.625rem;
  }
}

.p-ticket-step__num {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 1.3125rem;
  height: 1.3125rem;
  border-radius: 100%;
  background: var(--color-deepblue);
  color: var(--color-white2);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}
@media screen and (min-width: 1024px) {
  .p-ticket-step__num {
    width: 1.875rem;
    height: 1.875rem;
    font-size: 1rem;
  }
}

.p-ticket-step__body {
  padding-top: 0.125rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-step__body {
    padding-top: 0.1875rem;
  }
}

.p-ticket-step__txt {
  color: var(--color-white2);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 1024px) {
  .p-ticket-step__txt {
    font-size: 1rem;
  }
}

.p-ticket-step__note {
  margin-top: 0.25rem;
  color: var(--color-white2);
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 1024px) {
  .p-ticket-step__note {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
  }
}

/*----------------------------------------------------
	チケットの先行・割引購入（Figma 1521-5321 / 1261-6480）
----------------------------------------------------*/
.p-ticket-member__lead {
  margin-top: 2.1875rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-member__lead {
    margin-top: 2.5rem;
  }
}

.p-ticket-member__bar {
  margin-top: 3.75rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-member__bar {
    margin-top: 5.25rem;
  }
}
.p-ticket-member__bar + .c-paragraph {
  margin-top: 1.25rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-member__bar + .c-paragraph {
    margin-top: 2.875rem;
  }
}

.p-ticket-member__rank {
  margin-top: 1.25rem;
}

.p-ticket-member__bnr {
  display: -ms-grid;
  display: grid;
  place-items: center;
  width: 100%;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
@media screen and (min-width: 1024px) {
  .p-ticket-member__bnr {
    font-size: 1.25rem;
  }
}

.p-ticket-member__note {
  margin: 0.625rem 0 0 auto;
}
@media screen and (max-width: 640px) {
  .p-ticket-member__note {
    width: 16.5625rem;
  }
}
@media screen and (min-width: 1024px) {
  .p-ticket-member__note {
    margin: 1.25rem 0 0 auto;
    width: 27.0625rem;
  }
}

.p-ticket-member__accordion {
  margin-top: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-member__accordion {
    margin-top: 3.125rem;
    max-width: 48.4375rem;
  }
}

/*----------------------------------------------------
	RANK別チケット販売日程（Figma 1334-7358）
----------------------------------------------------*/
.p-ticket-heading-sub {
  margin-top: 3.75rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-heading-sub {
    margin-top: 6.25rem;
  }
}

/*
	この表の line-height は単位なし数値ではなく px 相当（rem）で持つ。
	単位なし数値だと行ボックスの高さに小数が出て、Safari(WebKit)だけがそれを
	整数へ切り捨てるため、日付が積み上がるほど Chrome とズレが広がる。
	（実測: 36px × 1.35 → Chrome 48.594 / Safari 48。表全体で 4.2px の差）
	値は Chrome の現在の見た目に最も近い整数へ丸めてある。
	子要素は親の px を継承してしまうので、文字サイズを変える要素には必ず個別に持たせること。
*/
.p-ticket-schedule {
  margin-top: 1.25rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-schedule {
    width: 52.5rem;
  }
}

.p-ticket-schedule__table {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 0.9375rem 0.625rem 0.9375rem 0.9375rem;
  border-radius: 0.625rem;
  background: #EAF5FE;
  overflow-x: auto;
}
@media screen and (min-width: 1024px) {
  .p-ticket-schedule__table {
    padding: 1.875rem 0 1.875rem 2.125rem;
    overflow-x: visible;
  }
}

.p-ticket-schedule__rounds {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 2.75rem;
  gap: 2.375rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-schedule__rounds {
    margin-top: 6.3125rem;
    gap: 3.8125rem;
  }
}

.p-ticket-schedule__round {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.125rem;
  height: 0.9375rem;
  padding: 0.15em 0.25rem 0;
  background: var(--color-deepblue);
  color: var(--color);
  font-size: 0.625rem;
  line-height: 0.875rem;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 1024px) {
  .p-ticket-schedule__round {
    gap: 0.1875rem;
    height: 1.75rem;
    padding: 0.15em 0.625rem 0;
    font-size: 0.8125rem;
    line-height: 1.125rem;
  }
}

.p-ticket-schedule__round-num {
  position: relative;
  top: -0.05em;
  font-family: var(--PF);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.1875rem;
  letter-spacing: 0.02em;
}
@media screen and (min-width: 1024px) {
  .p-ticket-schedule__round-num {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.p-ticket-schedule__ranks {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (min-width: 1024px) {
  .p-ticket-schedule__ranks {
    padding-left: 1.5rem;
  }
}

.p-ticket-schedule__rank {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.p-ticket-schedule__rank + .p-ticket-schedule__rank .p-ticket-schedule__dates:after {
  content: "";
  display: block;
  width: 1px;
  height: calc(100% - 2.25rem);
  position: absolute;
  left: 0;
  top: 2.25rem;
  pointer-events: none;
  background: url(../img/line-gray-vertical.svg) left top/auto auto repeat-y;
}
@media screen and (min-width: 1024px) {
  .p-ticket-schedule__rank {
    gap: 0;
  }
  .p-ticket-schedule__rank + .p-ticket-schedule__rank .p-ticket-schedule__dates:after {
    height: calc(100% - 5rem);
    top: 5rem;
  }
}

.p-ticket-schedule__rank-head {
  margin-bottom: -0.5625rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.125rem;
  font-family: var(--PF);
  font-weight: 700;
  line-height: 1rem;
  letter-spacing: 0.02em;
  color: var(--color-sky);
  font-size: 0.75rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-schedule__rank-head {
    margin-bottom: -0.25rem;
    gap: 0.3125rem;
    font-size: 1.375rem;
    line-height: 1.875rem;
  }
}

.p-ticket-schedule__rank-num {
  font-size: 1.25rem;
  line-height: 1.6875rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-schedule__rank-num {
    font-size: 2.625rem;
    line-height: 3.5625rem;
  }
}

.p-ticket-schedule__dates {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.9375rem;
  width: 100%;
  padding: 0.9375rem 0 0;
}
@media screen and (min-width: 1024px) {
  .p-ticket-schedule__dates {
    gap: 1.25rem;
  }
}

.p-ticket-schedule__date {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.p-ticket-schedule__date-day {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.1875rem;
  font-family: var(--PF);
  font-weight: 700;
  line-height: 1.375rem;
  letter-spacing: 0.02em;
  color: var(--color-deepblue);
  font-size: 1rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-schedule__date-day {
    font-size: 2.25rem;
    line-height: 3.0625rem;
  }
}

.p-ticket-schedule__date-dow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 100%;
  background: #0043A7;
  color: var(--color);
  font-family: var(--font);
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}
@media screen and (min-width: 1024px) {
  .p-ticket-schedule__date-dow {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.8125rem;
  }
}

.p-ticket-schedule__date-time {
  margin-top: 0;
  font-family: var(--PF);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  letter-spacing: 0.02em;
  color: var(--color-deepblue);
}
@media screen and (min-width: 1024px) {
  .p-ticket-schedule__date-time {
    margin-top: -0.3125rem;
    font-size: 1.25rem;
    line-height: 1.6875rem;
  }
}

.c-list-annotation.p-ticket-schedule__note {
  margin: 0.625rem 0 0 auto;
  width: 16.5625rem;
  line-height: 0.9375rem;
}
@media screen and (min-width: 1024px) {
  .c-list-annotation.p-ticket-schedule__note {
    margin: 1.25rem 0 0 auto;
    width: 27.0625rem;
    line-height: 1.125rem;
  }
}

/*----------------------------------------------------
	チケットの割引について（Figma 1261-6514〜6526）
----------------------------------------------------*/
.p-ticket-discount {
  margin-top: 2.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (min-width: 1024px) {
  .p-ticket-discount {
    margin-top: 1.25rem;
    width: 48.4375rem;
  }
}

.p-ticket-discount__row {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.25rem;
  margin: 0;
  padding: 1.375rem 0 1.1875rem;
  background: url(../img/line-wh.svg) left bottom/775px auto repeat-x;
}
.p-ticket-discount__row:before {
  content: "";
  display: block;
  width: calc(100% - 7.625rem);
  height: 100%;
  position: absolute;
  left: 7.625rem;
  top: 0;
  pointer-events: none;
  background: url(../img/line-wh.svg) left top/775px auto repeat-x;
}
@media screen and (min-width: 1024px) {
  .p-ticket-discount__row {
    padding: 0.5625rem 0;
  }
  .p-ticket-discount__row:before {
    width: calc(100% - 6.25rem);
    left: 6.25rem;
  }
}

.p-ticket-discount__label {
  position: absolute;
  top: -0.4375rem;
  left: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 1024px) {
  .p-ticket-discount__label {
    position: relative;
    top: -0.6875rem;
    width: 6.625rem;
    font-size: 0.875rem;
  }
}

.p-ticket-discount__flow {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.3125rem;
  margin: 0;
}
.p-ticket-discount__flow svg {
  width: 1.125rem;
  height: auto;
}
@media screen and (min-width: 1024px) {
  .p-ticket-discount__flow {
    gap: 0.625rem;
  }
  .p-ticket-discount__flow svg {
    width: 2.25rem;
  }
}

.p-ticket-discount__chip {
  position: relative;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
@media screen and (min-width: 1024px) {
  .p-ticket-discount__chip {
    font-size: 1.375rem;
  }
}

.p-ticket-discount__note {
  margin: 0.625rem 0 0 auto;
  -ms-flex-item-align: end;
      align-self: flex-end;
}
@media screen and (min-width: 1024px) {
  .p-ticket-discount__note {
    margin: 1.25rem 0 0 auto;
    width: 22rem;
  }
}

/*----------------------------------------------------
	引換チケット（Figma 1521-5323 / 1261-6835）
----------------------------------------------------*/
.p-ticket-exchange {
  margin-top: 7rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-exchange {
    margin-top: 11.25rem;
  }
}

.p-ticket-exchange__lead {
  margin-top: 2.1875rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-exchange__lead {
    margin-top: 2.5rem;
  }
}

.p-ticket-exchange__bar {
  margin-top: 3.75rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-exchange__bar {
    margin-top: 5.25rem;
  }
}

.p-ticket-exchange__bar + .p-ticket-exchange__accordion {
  margin-top: 2rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-exchange__bar + .p-ticket-exchange__accordion {
    margin-top: 2.8125rem;
  }
}

.p-ticket-exchange__accordion {
  margin-top: 1.25rem;
}
.p-ticket-exchange__accordion .c-accordion__body {
  padding: 1.25rem 1.875rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-exchange__accordion .c-accordion__body {
    padding: 2.5rem 5.4375rem;
  }
}

/*----------------------------------------------------
	対象試合／対象座席のタブ（Figmaは縦並びだがタブ切り替えにする）
	切り替えは common.js の jsTab
----------------------------------------------------*/
.p-ticket-tab {
  margin-top: 3.6875rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-tab {
    margin-top: 4.6875rem;
  }
}

.p-ticket-tab__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 1rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-tab__nav {
    padding-left: 2rem;
  }
}

.p-ticket-tab__btn {
  position: relative;
  z-index: 0;
  width: 8.125rem;
  height: 2.25rem;
  padding-right: 1rem;
  color: var(--color);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.05em;
  opacity: 0.6;
  -webkit-transition: opacity var(--duration) var(--easeTheme);
  transition: opacity var(--duration) var(--easeTheme);
  cursor: pointer;
}
@media (hover: hover) {
  .p-ticket-tab__btn:hover, a:hover .p-ticket-tab__btn {
    opacity: 1;
  }
}
.p-ticket-tab__btn:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #17539F;
  mask: url(../img/mask-tab.svg) no-repeat center/100% 100%;
  -webkit-mask: url(../img/mask-tab.svg) no-repeat center/100% 100%;
  -webkit-transition: background var(--duration) var(--easeTheme);
  transition: background var(--duration) var(--easeTheme);
}
.p-ticket-tab__btn + .p-ticket-tab__btn {
  margin-left: -0.625rem;
}
.p-ticket-tab__btn.is-active {
  z-index: 1;
  color: var(--color-navy);
  opacity: 1;
}
.p-ticket-tab__btn.is-active:before {
  background: #EAF5FE;
}
@media screen and (min-width: 1024px) {
  .p-ticket-tab__btn {
    width: 12.8125rem;
    height: 3.25rem;
    padding-right: 1.125rem;
    font-size: 1.25rem;
  }
  .p-ticket-tab__btn + .p-ticket-tab__btn {
    margin-left: -1.25rem;
  }
}

.p-ticket-tab__panel {
  display: none;
  padding: 1rem;
  border-radius: 0.625rem;
  background: #EAF5FE;
  position: relative;
  margin-top: calc(var(--stroke1) * -1);
}
.p-ticket-tab__panel.is-active {
  display: block;
}
@media screen and (min-width: 1024px) {
  .p-ticket-tab__panel {
    padding: 2rem;
  }
}

.p-ticket-games {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 0.625rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625rem;
}
@media screen and (min-width: 1024px) {
  .p-ticket-games {
    -ms-grid-columns: 1fr 0.6625rem 1fr 0.6625rem 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6625rem;
  }
}

.p-ticket-games__item img {
  display: block;
  width: 100%;
  height: auto;
}

.p-ticket-games__foot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.625rem;
  margin-top: 1.25rem;
}
.p-ticket-games__foot .c-list-annotation {
  color: var(--color-navy);
}
@media screen and (min-width: 1024px) {
  .p-ticket-games__foot {
    margin-left: auto;
    gap: 1.5rem;
    width: 22.125rem;
  }
}

.p-ticket-games__legend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  color: var(--color-navy);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
}
@media screen and (min-width: 1024px) {
  .p-ticket-games__legend {
    font-size: 0.8125rem;
  }
}

.p-ticket-games__legend-mark {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 100%;
  background: var(--color-sky);
}

.p-ticket-seat img {
  display: block;
  width: 100%;
  height: auto;
}
.p-ticket-seat + .c-list-annotation {
  margin-top: 1.25rem;
  color: var(--color-navy);
}
@media screen and (min-width: 1024px) {
  .p-ticket-seat + .c-list-annotation {
    width: 30.3125rem;
  }
}

/*----------------------------------------------------
	p-option（オプション）
	Figma: SP 1725-3735 / PC 1549-4594
	ページヘッダーの写真だけ書き出し名が p-p-option-header で、
	クラスは他の下層ページに合わせて p-option- で揃える
----------------------------------------------------*/
.p-option {
  position: relative;
}

/*----------------------------------------------------
	ページヘッダーの中身（Figma 1725-3742 / 1549-4624）
	箱と写真は共通（l-page-header）。組みは p-ticket と同じで、位置だけ違う
----------------------------------------------------*/
.p-option-header__inner {
  left: 50%;
  top: 45.5%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3125rem;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .p-option-header__inner {
    left: 73.125%;
    top: 37.5%;
    gap: 0.9375rem;
  }
}

.p-option-header__en {
  font-family: var(--PF);
  font-size: 4.625rem;
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.p-option-header__en span {
  display: block;
}
@media screen and (min-width: 1024px) {
  .p-option-header__en {
    font-size: 9.375rem;
    letter-spacing: 0;
  }
}

.p-option-header__ja {
  font-size: 0.8125rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
@media screen and (min-width: 1024px) {
  .p-option-header__ja {
    font-size: 1.75rem;
  }
}

/*----------------------------------------------------
	本文まわり（p-ticket / p-join と同じ組み）
----------------------------------------------------*/
.p-option-body {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-top: 1.25rem;
  padding-bottom: 4.375rem;
}
@media screen and (min-width: 1024px) {
  .p-option-body {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 14rem;
    padding-top: 1.875rem;
    padding-bottom: 7.5rem;
  }
}

.p-option-body__side {
  -ms-flex-item-align: end;
      align-self: flex-end;
}
@media screen and (min-width: 1024px) {
  .p-option-body__side {
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 12.9375rem;
    padding-bottom: 14.125rem;
  }
}

.p-option-body__main {
  margin-top: 7.875rem;
}
@media screen and (min-width: 1024px) {
  .p-option-body__main {
    margin-top: 9.6875rem;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 52.6875rem;
  }
}

.p-option-lineup {
  margin-top: 8.125rem;
}
@media screen and (min-width: 1024px) {
  .p-option-lineup {
    margin-top: 12.125rem;
  }
}

/*----------------------------------------------------
	オプションについて（Figma 1725-4409 / 1549-6150）
----------------------------------------------------*/
.p-option-about__body {
  margin-top: 2.1875rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.625rem;
}
@media screen and (min-width: 1024px) {
  .p-option-about__body {
    margin-top: 3.75rem;
  }
}

.p-option-about__lead {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: justify;
}
@media screen and (min-width: 1024px) {
  .p-option-about__lead {
    font-size: 1.5rem;
  }
}

.p-option-about__txt {
  color: var(--color-white2);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: justify;
}
@media screen and (min-width: 1024px) {
  .p-option-about__txt {
    font-size: 1.125rem;
  }
}

.p-option-about__customize {
  margin-top: 3.75rem;
}

.p-option-about__customize-pic {
  margin-top: 1.25rem;
}
.p-option-about__customize-pic img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 1024px) {
  .p-option-about__customize-pic {
    margin-top: 2.5rem;
  }
  .p-option-about__customize-pic img {
    width: 37.75rem;
    max-width: none;
  }
}

/*----------------------------------------------------
	オプションラインナップ（Figma 1725-4413 / 1579-8273）
----------------------------------------------------*/
.p-option-lineup__body {
  position: relative;
  margin-top: 1.875rem;
}
@media screen and (min-width: 1024px) {
  .p-option-lineup__body {
    margin-top: 3.5rem;
  }
}

.p-option-filter-col {
  margin-bottom: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .p-option-filter-col {
    position: absolute;
    left: -26.9375rem;
    top: 0;
    bottom: 0;
    width: 14.9375rem;
    margin-bottom: 0;
  }
}

.p-option-filter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.625rem;
}
@media screen and (min-width: 1024px) {
  .p-option-filter {
    position: sticky;
    top: calc(var(--header-height) + 8.875rem);
  }
}

.p-option-filter__count {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0.1875rem;
}

.p-option-filter__count-num {
  font-family: var(--PF);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
}
@media screen and (min-width: 1024px) {
  .p-option-filter__count-num {
    font-size: 3.75rem;
  }
}

.p-option-filter__count-unit {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 1024px) {
  .p-option-filter__count-unit {
    font-size: 1rem;
  }
}

.p-option-filter__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.3125rem;
}
@media screen and (min-width: 1024px) {
  .p-option-filter__list {
    gap: 0.625rem;
  }
}

.p-option-filter__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.0875rem 0.4375rem;
  border-radius: 100px;
  background: var(--color-white2);
  color: var(--color-deepblue);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-transition: opacity var(--duration) var(--easeTheme);
  transition: opacity var(--duration) var(--easeTheme);
}
.p-option-filter__btn.is-current {
  background: var(--color-deepblue);
  color: var(--color-white2);
}
@media (hover: hover) {
  .p-option-filter__btn:hover, a:hover .p-option-filter__btn {
    opacity: 0.7;
  }
}
@media screen and (min-width: 1024px) {
  .p-option-filter__btn {
    padding: 0.125rem 0.625rem;
    font-size: 0.875rem;
  }
}

.p-option-lineup__list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media screen and (min-width: 1024px) {
  .p-option-lineup__list {
    -ms-grid-columns: 1fr 1.25rem 1fr 1.25rem 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

.p-option-lineup__list > .is-hidden {
  display: none;
}

/*----------------------------------------------------
	p-royalty（ロイヤリティプログラム / STAR交換）
	Figma: SP 1683-4866 / PC 1494-4027
	ページヘッダーの写真だけ書き出し名が p-p-royalty-header で、
	クラスは他の下層ページに合わせて p-royalty- で揃える
	※PCのカンプで本文の外に置かれている赤字の申し送りは構築対象外
----------------------------------------------------*/
.p-royalty {
  position: relative;
}

/*----------------------------------------------------
	ページヘッダーの中身（Figma 1683-5242 / 1494-4057）
	組みは p-ticket / p-option と同じで、欧文が2行になるぶん位置だけ違う
----------------------------------------------------*/
.p-royalty-header__inner {
  left: 50%;
  top: 35%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3125rem;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .p-royalty-header__inner {
    left: 73.125%;
    top: 27.5%;
    gap: 0.9375rem;
  }
}

.p-royalty-header__en {
  font-family: var(--PF);
  font-size: 4.625rem;
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.p-royalty-header__en span {
  display: block;
}
@media screen and (min-width: 1024px) {
  .p-royalty-header__en {
    font-size: 9.375rem;
    letter-spacing: 0;
  }
}

.p-royalty-header__ja {
  font-size: 0.8125rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
@media screen and (min-width: 1024px) {
  .p-royalty-header__ja {
    font-size: 1.75rem;
  }
}

/*----------------------------------------------------
	本文まわり（p-ticket / p-option と同じ組み）
----------------------------------------------------*/
.p-royalty-body {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-top: 1.25rem;
  padding-bottom: 4.375rem;
}
@media screen and (min-width: 1024px) {
  .p-royalty-body {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 14rem;
    padding-top: 1.875rem;
    padding-bottom: 7.8125rem;
  }
}

.p-royalty-body__side {
  -ms-flex-item-align: end;
      align-self: flex-end;
}
@media screen and (min-width: 1024px) {
  .p-royalty-body__side {
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 12.9375rem;
  }
}

.p-royalty-body__main {
  margin-top: 6.4375rem;
}
@media screen and (min-width: 1024px) {
  .p-royalty-body__main {
    margin-top: 9.6875rem;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 52.6875rem;
  }
}

.p-royalty-goods,
.p-royalty-event {
  margin-top: 8.5rem;
}
@media screen and (min-width: 1024px) {
  .p-royalty-goods,
  .p-royalty-event {
    margin-top: 13.1875rem;
  }
}

/*----------------------------------------------------
	共通パーツ
----------------------------------------------------*/
.p-royalty-lead {
  margin-top: 2.1875rem;
  color: var(--color-white2);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: justify;
}
@media screen and (min-width: 1024px) {
  .p-royalty-lead {
    margin-top: 3.75rem;
    font-size: 1.125rem;
  }
}

.p-royalty-note-content,
.p-royalty-note {
  margin-top: 1.875rem;
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: justify;
}
@media screen and (min-width: 1024px) {
  .p-royalty-note-content,
  .p-royalty-note {
    margin-top: 2.875rem;
    font-size: 1rem;
  }
}

.p-royalty-note-content {
  color: var(--color-inverse);
}

/*----------------------------------------------------
	ロイヤリティプログラムについて（Figma 1683-5025 / 1494-4060）
----------------------------------------------------*/
.p-royalty-rank {
  margin-top: 2.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 0.625rem;
}
@media screen and (min-width: 1024px) {
  .p-royalty-rank {
    margin-top: 3.75rem;
    gap: 1.25rem;
  }
}

.p-royalty-rank__pic {
  display: -ms-grid;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 840/578;
  border-radius: 0.625rem;
  background: #EAF5FE;
  color: #6A6A6A;
  font-size: 0.8125rem;
  font-weight: 700;
}
.p-royalty-rank__pic img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.625rem;
}

/*----------------------------------------------------
	2025年度メンバーへのご案内（Figma 1683-5137）
	※PCのカンプには無いブロックなので、SPの組みをそのまま広げている
----------------------------------------------------*/
.p-royalty-guide {
  margin-top: 3.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.875rem;
}
@media screen and (min-width: 1024px) {
  .p-royalty-guide {
    margin-top: 5rem;
    gap: 2.5rem;
  }
}

.p-royalty-guide__block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.25rem;
}

.p-royalty-guide__head {
  padding: 0.625rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}

.p-royalty-guide__group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.9375rem;
}

.p-royalty-guide__term {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.3125rem;
}

.p-royalty-guide__term > p:first-child {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: justify;
}

.p-royalty-guide__list {
  color: var(--color-white2);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: justify;
}
.p-royalty-guide__list > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.625rem;
}
.p-royalty-guide__list > li:before {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-top: 0.45em;
  width: 0.375rem;
  height: 0.5rem;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.p-royalty-guide__txt {
  color: var(--color-white2);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: justify;
}

/*----------------------------------------------------
	STARを貯める（Figma 1683-5105 / 1494-4100）
	タブの形は p-ticket と同じ mask-tab.svg
	SPはタブがパネルの右側に縦並びになる
----------------------------------------------------*/
.p-royalty-star {
  margin-top: 3.75rem;
}
@media screen and (min-width: 1024px) {
  .p-royalty-star {
    margin-top: 5rem;
  }
}

.p-royalty-tab {
  --p-royalty-tab-btn: 8.125rem;
  --p-royalty-tab-lap: 1.375rem;
  --p-royalty-tab-nav-pt: 1.25rem;
  --p-royalty-tab-nav: calc(var(--p-royalty-tab-nav-pt) + var(--p-royalty-tab-btn) * 5 - var(--p-royalty-tab-lap) * 4);
  margin-top: 2.4375rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
@media screen and (max-width: 1023px) {
  .p-royalty-tab {
    margin-right: -0.625rem;
  }
}
@media screen and (min-width: 1024px) {
  .p-royalty-tab {
    margin-top: 3.8125rem;
    display: block;
  }
}

.p-royalty-tab__nav {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-top: var(--p-royalty-tab-nav-pt);
}
@media screen and (min-width: 1024px) {
  .p-royalty-tab__nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    padding-top: 0;
    padding-left: 1.9375rem;
  }
}

.p-royalty-tab__btn {
  position: relative;
  z-index: 0;
  width: 2.5rem;
  height: var(--p-royalty-tab-btn);
  padding: 0 0 1.25rem 0;
  color: var(--color);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.05em;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  opacity: 1;
  -webkit-transition: opacity var(--duration) var(--easeTheme);
  transition: opacity var(--duration) var(--easeTheme);
  cursor: pointer;
}
.p-royalty-tab__btn span {
  opacity: 0.6;
  -webkit-transition: opacity var(--duration) var(--easeTheme);
  transition: opacity var(--duration) var(--easeTheme);
}
@media (hover: hover) {
  .p-royalty-tab__btn:hover span, a:hover .p-royalty-tab__btn span {
    opacity: 1;
  }
}
.p-royalty-tab__btn:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #17539F;
  -webkit-mask: url(../img/mask-tab-vertical.svg) no-repeat center/100% 100%;
          mask: url(../img/mask-tab-vertical.svg) no-repeat center/100% 100%;
  -webkit-transition: background var(--duration) var(--easeTheme);
  transition: background var(--duration) var(--easeTheme);
}
.p-royalty-tab__btn + .p-royalty-tab__btn {
  margin-top: calc(var(--p-royalty-tab-lap) * -1);
}
.p-royalty-tab__btn:nth-child(1) {
  z-index: 5;
}
.p-royalty-tab__btn:nth-child(2) {
  z-index: 4;
}
.p-royalty-tab__btn:nth-child(3) {
  z-index: 3;
}
.p-royalty-tab__btn:nth-child(4) {
  z-index: 2;
}
.p-royalty-tab__btn:nth-child(5) {
  z-index: 1;
}
.p-royalty-tab__btn:nth-child(even):before {
  background: #1C64AC;
}
.p-royalty-tab__btn.is-active {
  z-index: 10;
  color: var(--color-navy);
}
.p-royalty-tab__btn.is-active span {
  opacity: 1;
}
.p-royalty-tab__btn.is-active:before {
  background: #EAF5FE;
}
@media screen and (min-width: 1024px) {
  .p-royalty-tab__btn {
    width: 11.0625rem;
    height: 3.25rem;
    padding: 0 1.25rem 0 0;
    font-size: 1.125rem;
    -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
            writing-mode: horizontal-tb;
  }
  .p-royalty-tab__btn:before {
    -webkit-mask-image: url(../img/mask-tab.svg);
            mask-image: url(../img/mask-tab.svg);
  }
  .p-royalty-tab__btn + .p-royalty-tab__btn {
    margin-top: 0;
    margin-left: -1.6875rem;
  }
}

.p-royalty-tab__body {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  padding: 1.5625rem 1.25rem;
  border-radius: 0.625rem;
  background: #EAF5FE;
}
@media screen and (max-width: 1023px) {
  .p-royalty-tab__body {
    min-height: var(--p-royalty-tab-nav);
  }
}
@media screen and (min-width: 1024px) {
  .p-royalty-tab__body {
    padding: 2rem;
  }
}

.p-royalty-tab__panel {
  display: none;
}
.p-royalty-tab__panel.is-active {
  display: block;
}

.p-royalty-grant {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.625rem;
}

.p-royalty-grant__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.9375rem;
  padding: 0.9375rem;
  border: var(--stroke1) solid #12459A;
  border-radius: 0.5rem;
  background: #fff;
}
@media screen and (min-width: 1024px) {
  .p-royalty-grant__item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    border-radius: 0.625rem;
    gap: 1.25rem;
    padding: 2rem;
  }
}

.p-royalty-grant__name {
  color: var(--color-navy);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 1024px) {
  .p-royalty-grant__name {
    font-size: 1.1875rem;
  }
}

.c-spec.p-royalty-grant__spec {
  --c-spec-line: rgba(14, 62, 143, .4);
  color: var(--color-deepblue);
}
@media screen and (min-width: 1024px) {
  .c-spec.p-royalty-grant__spec {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 26.8125rem;
  }
}

.c-list-annotation.p-royalty-grant__notes {
  margin-top: 1.25rem;
  color: var(--color-deepblue);
}
@media screen and (min-width: 1024px) {
  .c-list-annotation.p-royalty-grant__notes {
    margin-top: 1.875rem;
    margin-left: auto;
    width: 34.3125rem;
  }
}

.p-royalty-star__accordion {
  margin-top: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .p-royalty-star__accordion {
    margin-top: 3.75rem;
  }
}

.p-royalty-star__terms {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .p-royalty-star__terms {
    gap: 1.5625rem;
    width: 44.5rem;
  }
}

.p-royalty-star__term {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.3125rem;
}
.p-royalty-star__term > h4 {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
}
.p-royalty-star__term > p {
  color: var(--color-white2);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: justify;
}
@media screen and (min-width: 1024px) {
  .p-royalty-star__term > h4 {
    font-size: 1.1875rem;
  }
  .p-royalty-star__term > p {
    font-size: 1rem;
  }
}

/*----------------------------------------------------
	STAR交換グッズ（Figma 1683-5374 / 1494-4070）
----------------------------------------------------*/
.p-royalty-past {
  margin-top: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .p-royalty-past {
    margin-top: 3.875rem;
  }
}

.p-royalty-past__head {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
}
@media screen and (min-width: 1024px) {
  .p-royalty-past__head {
    font-size: 1.5rem;
  }
}

.p-royalty-past__body {
  margin-top: 0.9375rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 0.625rem;
}
.p-royalty-past__body img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 1024px) {
  .p-royalty-past__body {
    margin-top: 1.5rem;
    gap: 1.25rem;
  }
}

.p-royalty-goods__list {
  margin-top: 2.5rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media screen and (min-width: 1024px) {
  .p-royalty-goods__list {
    margin-top: 3.125rem;
    -ms-grid-columns: 1fr 1.1875rem 1fr 1.1875rem 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1875rem;
  }
}

/*----------------------------------------------------
	会員限定イベント（Figma 1711-7356 / 1494-4416）
	開閉は common.js の jsAccordion
----------------------------------------------------*/
.p-royalty-event__list {
  margin-top: 2.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.25rem;
}
@media screen and (min-width: 1024px) {
  .p-royalty-event__list {
    margin-top: 3.75rem;
  }
}

.p-royalty-event-item {
  border-radius: 0.5rem;
  background: var(--color-deepblue);
}
@media screen and (min-width: 1024px) {
  .p-royalty-event-item {
    border-radius: 0.625rem;
  }
}

.p-royalty-event-item__head {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.9375rem;
  padding: 1.25rem;
  background: none;
  cursor: pointer;
  text-align: left;
}
@media (hover: hover) {
  .p-royalty-event-item__head:hover .p-royalty-event-item__ico, a:hover .p-royalty-event-item__head .p-royalty-event-item__ico {
    background-size: 85% 85%;
  }
}
@media screen and (min-width: 1024px) {
  .p-royalty-event-item__head {
    gap: 2.5rem;
    padding: 2.5rem;
  }
}

.p-royalty-event-item__summary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}
@media screen and (min-width: 1024px) {
  .p-royalty-event-item__summary {
    gap: 2.5rem;
  }
}

.p-royalty-event-item__pic {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 7.4375rem;
  border-radius: 0.125rem;
  overflow: clip;
}
.p-royalty-event-item__pic img {
  display: block;
  width: 100%;
  aspect-ratio: 3/2;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 1024px) {
  .p-royalty-event-item__pic {
    width: 18.75rem;
    border-radius: 0.5rem;
  }
}

.p-royalty-event-item__txt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.3125rem;
}
@media screen and (min-width: 1024px) {
  .p-royalty-event-item__txt {
    gap: 0.625rem;
  }
}

.p-royalty-event-item__name {
  color: var(--color);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-align: left;
}
@media screen and (min-width: 1024px) {
  .p-royalty-event-item__name {
    font-size: 1.5rem;
    line-height: 1.35;
    letter-spacing: 0;
  }
}

.p-royalty-event-item__tag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.0625rem 0.3125rem;
  border: 1px solid var(--color-white3);
  color: var(--color);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
@media screen and (min-width: 1024px) {
  .p-royalty-event-item__tag {
    padding: 0.125rem 0.625rem 0.1875rem;
    font-size: 0.8125rem;
  }
}

.p-royalty-event-item__ico {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 100%;
  background-color: transparent;
  background-image: radial-gradient(circle closest-side, #fff 99%, transparent 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-transition: background-size var(--duration) var(--easeTheme);
  transition: background-size var(--duration) var(--easeTheme);
}
.p-royalty-event-item__ico:before, .p-royalty-event-item__ico:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.75rem;
  height: 2px;
  margin: -1px 0 0 -0.375rem;
  background: var(--color-deepblue);
  -webkit-transition: -webkit-transform var(--duration) var(--easeTheme);
  transition: -webkit-transform var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
}
.p-royalty-event-item__ico:after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.is-open .p-royalty-event-item__ico:after {
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
@media screen and (min-width: 1024px) {
  .p-royalty-event-item__ico {
    width: 2.75rem;
    height: 2.75rem;
  }
  .p-royalty-event-item__ico:before, .p-royalty-event-item__ico:after {
    width: 1.25rem;
    margin: -1px 0 0 -0.625rem;
  }
}

.p-royalty-event-item__body {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.9375rem;
  padding: 0 1.25rem 1.25rem;
  overflow: clip;
  will-change: display, height;
}
.p-royalty-event-item__body.is-open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 1024px) {
  .p-royalty-event-item__body {
    gap: 1.25rem;
    padding: 0 2.5rem 2.5rem;
    width: 45.6875rem;
  }
}

.p-royalty-event-item__desc {
  color: var(--color);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-align: justify;
}
@media screen and (min-width: 1024px) {
  .p-royalty-event-item__desc {
    font-size: 1rem;
  }
}

.c-spec.p-royalty-event-item__spec {
  --c-spec-line: rgba(255, 254, 254, .4);
  color: #FFFEFE;
}
@media screen and (min-width: 1024px) {
  .c-spec.p-royalty-event-item__spec {
    width: 26.8125rem;
  }
}

.c-list-annotation.p-royalty-event-item__notes {
  color: var(--color-white3);
}

/*----------------------------------------------------
	p-terms（規約ページ）
	Figma: SP 1878-14153 / PC 1868-10984
	ロイヤリティプログラム利用規約・BlueMates会員規約で共有する想定なので
	文言に寄せた名前は付けない
----------------------------------------------------*/
.p-terms {
  position: relative;
}

/*----------------------------------------------------
	本文まわり
	Figmaの本文カラムは SP 335px / PC 882px 固定で、PCは中央寄せ
----------------------------------------------------*/
.p-terms-body {
  position: relative;
  padding-top: 2.1875rem;
  padding-bottom: 3.75rem;
}
@media screen and (min-width: 1024px) {
  .p-terms-body {
    padding-top: 7.5rem;
    padding-bottom: 4.6875rem;
  }
}

.p-terms-body__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.5rem;
  width: 100%;
  max-width: 55.125rem;
  margin-inline: auto;
  color: var(--color);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: justify;
}
@media screen and (min-width: 1024px) {
  .p-terms-body__inner {
    gap: 3.75rem;
    font-size: 1rem;
  }
}

/*----------------------------------------------------
	区切り線（Figma Vector 29：1px + 3px の破線）
	hr のリセット（実線1px・上下マージン）を打ち消して描き直す
----------------------------------------------------*/
.p-terms-line {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background-image: repeating-linear-gradient(to right, #fff 0 1px, transparent 1px 4px);
}

/*----------------------------------------------------
	条文
----------------------------------------------------*/
.p-terms-sections {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3.75rem;
}

.p-terms-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.25rem;
}

.p-terms-section__head {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-align: left;
}
@media screen and (min-width: 1024px) {
  .p-terms-section__head {
    font-size: 1.5rem;
  }
}

/*----------------------------------------------------
	条文の項番リスト（1. 2. 3.）
	li のリセットで list-style が消えているので、番号はここで戻す
----------------------------------------------------*/
.p-terms-list > li {
  -webkit-margin-start: 1.125rem;
          margin-inline-start: 1.125rem;
  list-style-type: decimal;
}
.p-terms-list > li + li {
  margin-top: 0.3125rem;
}
@media screen and (min-width: 1024px) {
  .p-terms-list > li {
    -webkit-margin-start: 1.5rem;
            margin-inline-start: 1.5rem;
  }
}

.p-terms-list--sub > li + li {
  margin-top: 1.25rem;
}

.p-terms-sublist {
  margin-top: 0.3125rem;
}

.p-terms-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.3125rem;
}
.p-terms-group > .p-terms-sublist {
  margin-top: 0;
}

/*----------------------------------------------------
	お問合せ先の囲み（Figma 1878-14910 / 1878-14146）
----------------------------------------------------*/
.p-terms-contact {
  padding: 1.25rem;
  border-radius: 0.625rem;
  background: var(--color-lightblue2);
  color: var(--color-lightblue);
  text-align: left;
}
@media screen and (min-width: 1024px) {
  .p-terms-contact {
    padding: 1.875rem 2.5rem;
  }
}

/*----------------------------------------------------
	...
----------------------------------------------------*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	...
----------------------------------------------------*/
.cm-nav-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 2.5625rem;
  padding: 0 1rem;
  gap: 1.25rem;
  border-radius: 6.25rem;
  background: #FFF;
  -webkit-box-shadow: 0 0 0.327875rem 0 rgba(122, 147, 167, 0.1);
          box-shadow: 0 0 0.327875rem 0 rgba(122, 147, 167, 0.1);
}
@media screen and (max-width: 1023px) {
  .cm-nav-header {
    overflow: hidden;
  }
}
@media screen and (min-width: 1024px) {
  .cm-nav-header {
    padding: 0.625rem 0.625rem 0.625rem 1.75rem;
    height: 3.8125rem;
    gap: 1.875rem;
  }
}

.cm-nav-header__login a {
  position: relative;
  top: -0.1em;
  color: var(--navy, #002F76);
  font-size: 0.6875rem;
  font-weight: 700;
}
.cm-nav-header__login a:hover {
  color: var(--color-accent);
}
@media screen and (min-width: 1024px) {
  .cm-nav-header__login a {
    font-size: 0.875rem;
  }
}

.cm-nav-header__menu {
  position: relative;
  line-height: 0;
  -ms-flex-item-align: start;
      align-self: flex-start;
}
@media screen and (max-width: 640px) {
  .cm-nav-header__menu {
    left: -1px;
  }
}
@media screen and (min-width: 1024px) {
  .cm-nav-header__menu {
    top: -1px;
  }
}

.cm-nav-header__cta {
  display: none;
}
@media screen and (min-width: 1024px) {
  .cm-nav-header__cta {
    display: block;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	cm-nav-aside
	ページ内の現在地を示すサイドナビ（Figma 1583-12550 / 1261-5480）
	現在地（.is-current）はアイコンをイエローにして、他は少し伏せる
----------------------------------------------------*/
.cm-nav-aside {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.3125rem;
}
@media screen and (min-width: 1024px) {
  .cm-nav-aside {
    gap: 0.5rem;
    position: sticky;
    top: calc(var(--header-height) + 2.5rem);
  }
}

.cm-nav-aside__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3125rem;
  color: var(--color-white2);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  white-space: nowrap;
  opacity: 0.6;
  -webkit-transition: opacity var(--duration) var(--easeTheme);
  transition: opacity var(--duration) var(--easeTheme);
}
.cm-nav-aside__link svg {
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 1.375rem;
  height: auto;
  aspect-ratio: 34/27;
  fill: #fff;
  -webkit-transition: fill var(--duration) var(--easeTheme);
  transition: fill var(--duration) var(--easeTheme);
}
@media (hover: hover) {
  .cm-nav-aside__link:hover, a:hover .cm-nav-aside__link {
    opacity: 1;
  }
}
@media screen and (max-width: 1023px) {
  .cm-nav-aside__link {
    opacity: 1;
  }
  .cm-nav-aside__link svg {
    fill: #fff;
  }
}
@media screen and (min-width: 1024px) {
  .cm-nav-aside__link {
    gap: 0.625rem;
    font-size: 0.875rem;
  }
  .cm-nav-aside__link svg {
    width: 2.125rem;
  }
  .cm-nav-aside__link.is-current, .is-current > .cm-nav-aside__link {
    opacity: 1;
  }
  .cm-nav-aside__link.is-current svg, .is-current > .cm-nav-aside__link svg {
    fill: var(--color-accent);
  }
}

.cm-nav-page__list {
  padding: 1.875rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.625rem;
}
@media screen and (min-width: 1024px) {
  .cm-nav-page__list {
    padding: 5.3125rem 5rem 5.0625rem;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 1.875rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.cm-nav-main__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0;
}
.cm-nav-main__list-sub {
  margin-top: 1.875rem;
}
@media screen and (min-width: 1024px) {
  .cm-nav-main__list-sub {
    margin-top: 3.125rem;
  }
}

.cm-nav-main-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.625rem;
}
.cm-nav-main-link:hover {
  color: var(--color-accent);
}
.cm-nav-main-link:hover svg {
  fill: var(--color-accent);
}
@media screen and (min-width: 1024px) {
  .cm-nav-main-link {
    gap: 1.25rem;
  }
}

.cm-nav-main-link__en {
  font-family: var(--PF);
  font-size: 2.875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.cm-nav-main-link__en > span {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  white-space: nowrap;
}
@media screen and (min-width: 1024px) {
  .cm-nav-main-link__en {
    font-size: 4.125rem;
  }
}

.cm-nav-main-link__ja {
  padding-bottom: 0.8em;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
}
@media screen and (min-width: 1024px) {
  .cm-nav-main-link__ja {
    padding-bottom: 0.8em;
    font-size: 1rem;
  }
}

.cm-nav-main-link__external {
  margin: 0.25rem 0 0 -0.25rem;
  width: 1.125rem;
  position: relative;
  line-height: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -ms-flex-item-align: start;
      align-self: flex-start;
}
.cm-nav-main-link__external svg {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 18/13;
  -o-object-fit: contain;
     object-fit: contain;
  fill: #fff;
  -webkit-transition: opacity var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
  transition: opacity var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme), opacity var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme), opacity var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
}
.cm-nav-main-link__external svg:nth-child(2) {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
a:hover .cm-nav-main-link__external svg:nth-child(1) {
  opacity: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
a:hover .cm-nav-main-link__external svg:nth-child(2) {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition-delay: 0.08s;
          transition-delay: 0.08s;
}
@media screen and (min-width: 1024px) {
  .cm-nav-main-link__external {
    margin: 0.625rem 0 0 -0.875rem;
  }
}

.cm-nav-main-link--enjoy .cm-nav-main-link__en {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.375rem;
}
.cm-nav-main-link--enjoy .cm-nav-main-link__en span:nth-child(2) {
  position: relative;
  top: 0.1em;
  font-size: 1.875rem;
}
@media screen and (min-width: 1024px) {
  .cm-nav-main-link--enjoy .cm-nav-main-link__en {
    gap: 0.625rem;
  }
  .cm-nav-main-link--enjoy .cm-nav-main-link__en span:nth-child(2) {
    font-size: 2.8125rem;
  }
}

.cm-nav-main-link--royalty .cm-nav-main-link__en {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (max-width: 640px) {
  .cm-nav-main-link--royalty .cm-nav-main-link__en span:nth-child(2) {
    margin: -0.9375rem 0 0 0;
  }
}
@media screen and (min-width: 1024px) {
  .cm-nav-main-link--royalty .cm-nav-main-link__en {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 0.25em;
  }
}

.cm-nav-main-link--royaltyDrawer .cm-nav-main-link__en {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.25em;
}
@media screen and (min-width: 1024px) {
  .cm-nav-main-link--royaltyDrawer .cm-nav-main-link__en {
    gap: 0.25em;
  }
}

.cm-nav-main-link--join .cm-nav-main-link__en {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.375rem;
  font-size: 1.8125rem;
}
.cm-nav-main-link--join .cm-nav-main-link__en span:nth-child(2) {
  position: relative;
  top: 0.1em;
  font-size: 1.125rem;
}
@media screen and (min-width: 1024px) {
  .cm-nav-main-link--join .cm-nav-main-link__en {
    font-size: 2.625rem;
    gap: 0.5rem;
  }
  .cm-nav-main-link--join .cm-nav-main-link__en span:nth-child(2) {
    font-size: 1.625rem;
  }
}
.cm-nav-main-link--join .cm-nav-main-link__ja {
  font-size: 0.625rem;
}
@media screen and (min-width: 1024px) {
  .cm-nav-main-link--join .cm-nav-main-link__ja {
    font-size: 0.875rem;
  }
}

.cm-nav-main-link--faq .cm-nav-main-link__en {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.125rem;
  font-size: 1.8125rem;
}
.cm-nav-main-link--faq .cm-nav-main-link__en span:nth-child(2) {
  position: relative;
  top: 0.1em;
  font-size: 1.375rem;
}
@media screen and (min-width: 1024px) {
  .cm-nav-main-link--faq .cm-nav-main-link__en {
    font-size: 2.625rem;
    gap: 0.375rem;
  }
  .cm-nav-main-link--faq .cm-nav-main-link__en span:nth-child(2) {
    font-size: 1.9375rem;
  }
}
.cm-nav-main-link--faq .cm-nav-main-link__ja {
  font-size: 0.625rem;
}
@media screen and (min-width: 1024px) {
  .cm-nav-main-link--faq .cm-nav-main-link__ja {
    padding-bottom: 0.5em;
    font-size: 0.875rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	行単位でマスクしながら下からスライドさせるアニメーション
	.js-block-anim を付けた要素に対し、common.js の jsBlockAnim() が
	子要素ひとつずつを行ボックス（__line＝マスク）と動かす箱（__inner）で包む
	.c-letter-anim と違い、1文字ずつの分割も2セットの重ねも行わない
----------------------------------------------------*/
.c-block-anim__line {
  display: block;
  overflow: clip;
}

.c-block-anim__inner {
  display: block;
  will-change: transform;
}

.js .js-block-anim {
  visibility: hidden;
}

/*----------------------------------------------------
	c-accordion
	白フチの見出し＋開閉する中身（Figma 1261-6440 / 1405-5100）
	開閉は common.js の jsAccordion（.js-accordion の次の要素を開閉）
	既定はFigmaに合わせて開いた状態（マークアップ側で .is-open を付ける）
----------------------------------------------------*/
.c-accordion {
  width: 100%;
  border: 1.4px solid #fff;
}
@media screen and (min-width: 1024px) {
  .c-accordion {
    border-width: 2px;
  }
}

.c-accordion__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  width: 100%;
  cursor: pointer;
}
@media (hover: hover) {
  .c-accordion__head:hover .c-accordion__ico, a:hover .c-accordion__head .c-accordion__ico {
    background-size: 85% 85%;
  }
}
.c-accordion__head {
  padding: 0.875rem 2.75rem;
  color: var(--color);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .c-accordion__head {
    padding: 1.375rem 4.375rem;
    font-size: 1.25rem;
    letter-spacing: 0.01em;
  }
}

.c-accordion__ico {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border-radius: 100%;
  background-color: transparent;
  background-image: radial-gradient(circle closest-side, var(--color-deepblue) 99%, transparent 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-transition: background-size var(--duration) var(--easeTheme);
  transition: background-size var(--duration) var(--easeTheme);
}
.c-accordion__ico:before, .c-accordion__ico:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.875rem;
  height: 2px;
  margin: -1px 0 0 -0.4375rem;
  background: #fff;
  -webkit-transition: -webkit-transform var(--duration) var(--easeTheme);
  transition: -webkit-transform var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
}
.c-accordion__ico:after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.is-open .c-accordion__ico:after {
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
@media screen and (min-width: 1024px) {
  .c-accordion__ico {
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
  }
  .c-accordion__ico:before, .c-accordion__ico:after {
    width: 1.25rem;
    margin: -1px 0 0 -0.625rem;
  }
}

.c-accordion__body {
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.875rem 1.25rem;
  background: url(../img/line-wh.svg) left top/775px auto repeat-x;
  overflow: clip;
  will-change: display, height;
}
.c-accordion__body.is-open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 1024px) {
  .c-accordion__body {
    padding: 1.25rem 2.5rem 1.375rem;
  }
}

/*----------------------------------------------------
	...
----------------------------------------------------*/
.c-card-ticket {
  position: relative;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (max-width: 1023px) {
  .c-card-ticket:nth-child(2) .c-card-ticket__wrap,
  .c-card-ticket:nth-child(2) .c-card-ticket__foot,
  .c-card-ticket:nth-child(3) .c-card-ticket__wrap,
  .c-card-ticket:nth-child(3) .c-card-ticket__foot,
  .c-card-ticket:nth-child(6) .c-card-ticket__wrap,
  .c-card-ticket:nth-child(6) .c-card-ticket__foot,
  .c-card-ticket:nth-child(7) .c-card-ticket__wrap,
  .c-card-ticket:nth-child(7) .c-card-ticket__foot {
    background: #EAF5FE;
  }
}
@media screen and (min-width: 1024px) {
  .c-card-ticket:nth-child(even) .c-card-ticket__wrap,
  .c-card-ticket:nth-child(even) .c-card-ticket__foot {
    background: #EAF5FE;
  }
}
.c-card-ticket__badge {
  position: absolute;
  z-index: 5;
  left: -0.625rem;
  top: -1rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 100%;
  background: #F5D900;
  color: var(--navy, #002F76);
  font-family: var(--PF);
  font-size: 1rem;
  font-weight: 700;
  -webkit-transform: rotate(-5deg) scale(var(--badge-pop, 1));
          transform: rotate(-5deg) scale(var(--badge-pop, 1));
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
@media screen and (min-width: 1024px) {
  .c-card-ticket__badge {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.25rem;
    left: -0.3125rem;
    top: -1rem;
  }
}

.c-card-ticket__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.75rem;
  padding: 0.8125rem 0.6875rem 0.6875rem 0.8125rem;
  background: var(--lightblue2, #CAE9FC);
  border-radius: 0.5rem;
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.c-card-ticket__wrap:before {
  content: "";
  display: block;
  width: 100%;
  height: 0.125rem;
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: none;
  background: url(../img/card-ticket-dot.svg) center bottom/100% auto no-repeat;
}
@media screen and (min-width: 1024px) {
  .c-card-ticket__wrap {
    padding: 1.375rem 1.375rem;
    gap: 0.75rem;
  }
}

.c-card-ticket__pic {
  position: relative;
  width: 100%;
  aspect-ratio: 236/157;
  overflow: hidden;
  -webkit-transform: scale(var(--pic-pop, 1));
          transform: scale(var(--pic-pop, 1));
  -webkit-transform-origin: center center;
          transform-origin: center center;
  mask-image: url(../img/mask-card-ticket-pic.svg);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-image: url(../img/mask-card-ticket-pic.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
}
.c-card-ticket__pic:after {
  content: "";
  display: block;
  position: absolute;
  inset: -2px 0;
  z-index: 1;
  pointer-events: none;
  background: var(--color-navy);
  -webkit-transform: translateY(calc(var(--pic-cover, -100) * 1%));
          transform: translateY(calc(var(--pic-cover, -100) * 1%));
}

.c-card-ticket__pic img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transform: translateY(calc(var(--pic-img, 0) * 1%));
          transform: translateY(calc(var(--pic-img, 0) * 1%));
}

.c-card-ticket__name {
  color: var(--navy, #002F76);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
}
@media screen and (min-width: 1024px) {
  .c-card-ticket__name {
    padding-top: 0.625rem;
    font-size: 1.1875rem;
  }
}

.c-card-ticket__desc {
  margin: auto 0 0;
  color: #043D8B;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.35;
}
@media screen and (min-width: 1024px) {
  .c-card-ticket__desc {
    font-size: 0.8125rem;
    line-height: 1.5;
  }
}

.c-card-ticket__foot {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.375rem 0.75rem;
  background: var(--lightblue2, #CAE9FC);
  border-radius: 0.5rem;
}
.c-card-ticket__foot:before {
  content: "";
  display: block;
  width: 100%;
  height: 0.125rem;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background: url(../img/card-ticket-dot2.svg) center top/100% auto no-repeat;
}
@media screen and (min-width: 1024px) {
  .c-card-ticket__foot {
    padding: 0.6875rem 1.375rem;
  }
}

.c-card-ticket__price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}
.c-card-ticket__price-head {
  margin-bottom: 0.15em;
  width: 100%;
  color: #0F4695;
  font-family: var(--PF);
  font-size: 0.4375rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}
@media screen and (min-width: 1024px) {
  .c-card-ticket__price-head {
    font-size: 0.5625rem;
  }
}

.c-card-ticket__price-num {
  color: var(--navy, #002F76);
  font-family: var(--PF);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
}
@media screen and (min-width: 1024px) {
  .c-card-ticket__price-num {
    font-size: 1.1875rem;
  }
}

.c-card-ticket__price-tax {
  color: #002F76;
  font-size: 0.4375rem;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (min-width: 1024px) {
  .c-card-ticket__price-tax {
    font-size: 0.6875rem;
  }
}

.c-card-ticket__barcode {
  width: 3.8125rem;
  height: 1.375rem;
  background: url(../img/icon-barcode.svg) center center/cover;
}
@media screen and (min-width: 1024px) {
  .c-card-ticket__barcode {
    width: 6.625rem;
    height: 2.375rem;
  }
}

/*----------------------------------------------------
	c-card-ticket--option
	オプションのラインナップ（Figma SP 1725-5256 / PC 1576-8035）
	チケットのカードとの違いは
	・説明文（__desc）ではなくカテゴリのラベル（__tag）が入る
	・バーコードではなく詳細モーダルを開く「＋」ボタン（__btn）が入る
	・絞り込みで並びが変わるので、交互の塗りは nth-child ではなく
	　common.js の jsOptionFilter が付ける .is-alt で持つ
	　（既定の nth-child より強くするためクラスを重ねている）
----------------------------------------------------*/
.c-card-ticket--option.c-card-ticket--option .c-card-ticket__wrap,
.c-card-ticket--option.c-card-ticket--option .c-card-ticket__foot {
  background: var(--lightblue2, #CAE9FC);
}
.c-card-ticket--option.c-card-ticket--option.is-alt .c-card-ticket__wrap,
.c-card-ticket--option.c-card-ticket--option.is-alt .c-card-ticket__foot {
  background: #EAF5FE;
}
.c-card-ticket--option.c-card-ticket--option {
  cursor: pointer;
}
@media (hover: hover) {
  .c-card-ticket--option.c-card-ticket--option:hover .c-card-ticket__btn:before, a:hover .c-card-ticket--option.c-card-ticket--option .c-card-ticket__btn:before {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
}

.c-card-ticket__hit {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: none;
  cursor: pointer;
}

.c-card-ticket__tag {
  -ms-flex-item-align: start;
      align-self: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.0625rem 0.3125rem;
  border-radius: 100px;
  background: #fff;
  color: var(--color-deepblue);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
@media screen and (min-width: 1024px) {
  .c-card-ticket__tag {
    padding: 0.0625rem 0.5rem;
    font-size: 0.8125rem;
  }
}

.c-card-ticket__btn {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  background: none;
}
.c-card-ticket__btn:before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--color-deepblue);
  border-radius: 100%;
  -webkit-transition: -webkit-transform var(--duration) var(--easeTheme);
  transition: -webkit-transform var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
  will-change: transform;
}
@media screen and (min-width: 1024px) {
  .c-card-ticket__btn {
    width: 2.25rem;
    height: 2.25rem;
  }
}

.c-card-ticket__btn-icon {
  position: relative;
  display: block;
  width: 0.75rem;
  height: 0.75rem;
}
.c-card-ticket__btn-icon:before, .c-card-ticket__btn-icon:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  background: #fff;
}
.c-card-ticket__btn-icon:before {
  width: 100%;
  height: 0.125rem;
}
.c-card-ticket__btn-icon:after {
  width: 0.125rem;
  height: 100%;
}
@media screen and (min-width: 1024px) {
  .c-card-ticket__btn-icon {
    width: 1rem;
    height: 1rem;
  }
}

.c-card-ticket--open .c-card-ticket__foot {
  -webkit-transform: rotate(calc(var(--foot-rotate, -9.43) * 1deg));
          transform: rotate(calc(var(--foot-rotate, -9.43) * 1deg));
  -webkit-transform-origin: right top;
          transform-origin: right top;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	c-card-goods
	STAR交換グッズのカード（Figma SP 1711-6190 / PC 1494-4236）
	カード全体がモーダルを開くボタン（当たり判定は __hit）
----------------------------------------------------*/
.c-card-goods {
  position: relative;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.3125rem;
  padding: 0.75rem;
  border-radius: 0.625rem;
  background: #fff;
  cursor: pointer;
}
@media (hover: hover) {
  .c-card-goods:hover .c-card-ticket__btn:before, a:hover .c-card-goods .c-card-ticket__btn:before {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
}
@media screen and (min-width: 1024px) {
  .c-card-goods {
    padding: 1.25rem;
  }
}

.c-card-goods__pic {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #fff;
  -webkit-transform: scale(var(--pic-pop, 1));
          transform: scale(var(--pic-pop, 1));
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.c-card-goods__pic:after {
  content: "";
  display: block;
  position: absolute;
  inset: -2px 0;
  z-index: 1;
  pointer-events: none;
  background: var(--color-navy);
  -webkit-transform: translateY(calc(var(--pic-cover, -100) * 1%));
          transform: translateY(calc(var(--pic-cover, -100) * 1%));
}
.c-card-goods__pic img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-transform: translateY(calc(var(--pic-img, 0) * 1%));
          transform: translateY(calc(var(--pic-img, 0) * 1%));
}

.c-card-goods__body {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.3125rem;
  padding-right: 2rem;
}
@media screen and (min-width: 1024px) {
  .c-card-goods__body {
    padding-right: 2.75rem;
    gap: 0.3125rem;
  }
}

.c-card-goods__star {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--color-sky);
  border-radius: 100px;
  color: #00A1DB;
  font-family: var(--PF);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
@media screen and (min-width: 1024px) {
  .c-card-goods__star {
    padding: 0.25rem 0.625rem;
    font-size: 1rem;
  }
}

.c-card-goods__title {
  color: var(--color-navy);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
}
@media screen and (min-width: 1024px) {
  .c-card-goods__title {
    font-size: 1.1875rem;
  }
}

.c-card-goods__btn {
  position: absolute;
  right: -0.1875rem;
  bottom: 0.125rem;
}
@media screen and (min-width: 1024px) {
  .c-card-goods__btn {
    right: -0.1875rem;
    bottom: 0.375rem;
  }
}

.c-card-goods__badge {
  position: absolute;
  z-index: 5;
  left: -0.625rem;
  top: -0.625rem;
  pointer-events: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.84375rem;
  height: 2.84375rem;
  border-radius: 100%;
  background: #F5D900;
  color: var(--navy, #002F76);
  font-size: 0.8125rem;
  font-weight: 700;
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}
@media screen and (min-width: 1024px) {
  .c-card-goods__badge {
    width: 3.520625rem;
    height: 3.520625rem;
    font-size: 1rem;
  }
}

/*----------------------------------------------------
	カードのホバー：画像だけ少し寄せる（枠は overflow: hidden なのではみ出さない）
	出現アニメーションの GSAP が transform（--pic-img の translateY）を毎フレーム
	書き換えるので、ホバーは独立した scale プロパティで持たせて transition を分ける
	（transform に transition を掛けると、出現時の動きまで引きずってしまう）
----------------------------------------------------*/
.c-card-ticket__pic img,
.c-card-goods__pic img {
  scale: 1;
  -webkit-transition: scale var(--duration) var(--easeTheme);
  transition: scale var(--duration) var(--easeTheme);
  will-change: scale;
}

@media (hover: hover) {
  .c-card-ticket:hover .c-card-ticket__pic img, a:hover .c-card-ticket .c-card-ticket__pic img {
    scale: 1.05;
  }
}

@media (hover: hover) {
  .c-card-goods:not(.c-card-goods--end):hover .c-card-goods__pic img, a:hover .c-card-goods:not(.c-card-goods--end) .c-card-goods__pic img {
    scale: 1.05;
  }
}

.c-card-goods--end {
  cursor: default;
}
.c-card-goods--end .c-card-goods__pic,
.c-card-goods--end .c-card-goods__body {
  opacity: 0.4;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	c-heading
----------------------------------------------------*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	c-heading-section
	欧文（__en）＋和文（__ja）のセクション見出し
	SPは縦積み、PCは横並び（Figma 1521-5321 / 1261-6480）
----------------------------------------------------*/
.c-heading-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.3125rem;
  color: var(--color);
}
@media screen and (min-width: 1024px) {
  .c-heading-section {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1.875rem;
  }
}

.c-heading-section__en {
  font-family: var(--PF);
  font-size: 3.125rem;
  line-height: 0.85;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  font-weight: 700;
}
@media screen and (min-width: 1024px) {
  .c-heading-section__en {
    font-size: 5.875rem;
  }
}

.c-heading-section__ja {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 1024px) {
  .c-heading-section__ja {
    font-size: 1.25rem;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}

@media screen and (min-width: 1024px) {
  .c-heading-section--aboutRoyal .c-heading-section__ja {
    position: relative;
    left: -0.5em;
    bottom: 0.45em;
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
}

@media screen and (min-width: 1024px) {
  .c-heading-section--membersOnly .c-heading-section__ja {
    position: relative;
    bottom: 1.1em;
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
}

@media screen and (min-width: 1024px) {
  .c-heading-section--royaltyGoods {
    gap: 1.25rem;
  }
}

/*----------------------------------------------------
	c-heading-bar
	筆文字のバーを頭に添えた見出し（Figma 1409-5443 / 1261-6816）
	バーは装飾なので mask で描き、色は本文と切り離して指定できるようにする
----------------------------------------------------*/
.c-heading-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  padding: 0.1875rem 0 0.1875rem 1.3125rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5625rem;
  color: var(--color);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.05em;
}
.c-heading-bar:before {
  content: "";
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 0.75rem;
  height: 100%;
  position: absolute;
  left: 0;
  background: var(--color-deepblue);
  mask: url(../img/heading-bar-sp.svg) no-repeat center/100% 100%;
  -webkit-mask: url(../img/heading-bar-sp.svg) no-repeat center/100% 100%;
}
@media screen and (min-width: 1024px) {
  .c-heading-bar {
    gap: 0.75rem;
    padding: 0.25rem 0 0.25rem 2.3125rem;
    font-size: 2rem;
  }
  .c-heading-bar:before {
    width: 1.5625rem;
    height: 3.25rem;
    mask-image: url(../img/heading-bar.svg);
    -webkit-mask-image: url(../img/heading-bar.svg);
  }
}

/*----------------------------------------------------
	c-information
	白フチの見出し＋本文のお知らせ枠
	デザインが起きていないので、枠・見出し・区切り線は c-accordion と同じ組みにしてある
	（c-accordion との違いは開閉しないことだけ。トグルの「＋／−」も持たない）
----------------------------------------------------*/
.c-information {
  width: 100%;
  border: 1.4px solid #fff;
}
@media screen and (min-width: 1024px) {
  .c-information {
    border-width: 2px;
  }
}

.c-information__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.875rem 1.25rem;
  color: var(--color);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .c-information__head {
    padding: 1.375rem 2.5rem;
    font-size: 1.25rem;
    letter-spacing: 0.01em;
  }
}

.c-information__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.875rem 1.25rem;
  background: url(../img/line-wh.svg) left top/775px auto repeat-x;
}
@media screen and (min-width: 1024px) {
  .c-information__body {
    padding: 1.25rem 2.5rem 1.375rem;
  }
}

.c-information__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.625rem;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .c-information__inner {
    gap: 0.9375rem;
  }
}

.c-information__lead {
  color: var(--color);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 1024px) {
  .c-information__lead {
    font-size: 1.1875rem;
  }
}

.c-information__txt {
  color: var(--color-white2);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: justify;
}
@media screen and (min-width: 1024px) {
  .c-information__txt {
    font-size: 1rem;
  }
}

/*----------------------------------------------------
	1文字ずつロールアップさせるテキストアニメーション
	.js-letter-anim を付けた要素に対し、common.js の jsLetterAnim() が
	<br> 区切りごとの行ボックス（__line）と、その中に同じ文言を2セット（__set）生成する
	1セット目が上へ抜けると同時に2セット目が下から定位置に入り、
	文字が入れ替わりながらせり上がって見える
----------------------------------------------------*/
.c-letter-anim__line {
  display: -ms-inline-grid;
  display: inline-grid;
  overflow: clip;
  line-height: 1.15;
  padding-block: 0.06em 0.14em;
}

.c-letter-anim__set {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: 1/1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.c-letter-anim__char {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  will-change: transform;
}

.c-letter-anim__line--svg {
  display: -ms-grid;
  display: grid;
  line-height: 0;
  padding-block: 0;
  width: 100%;
}
.c-letter-anim__line--svg .c-letter-anim__set {
  display: block;
  width: 100%;
}
.c-letter-anim__line--svg svg {
  display: block;
  width: 100%;
  height: auto;
}
.c-letter-anim__line--svg path {
  will-change: transform;
}

.js .js-letter-anim {
  visibility: hidden;
}

/*----------------------------------------------------
	c-link
----------------------------------------------------*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	c-link-text
	本文中のテキストリンク（Figma 1868-12733 ほか）
	下線だけの装飾で、色は置かれた文脈（本文・囲み）から受け取る
----------------------------------------------------*/
.c-link-text {
  color: inherit;
  text-decoration: underline;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-underline-position: from-font;
}
@media (hover: hover) {
  .c-link-text:hover, a:hover .c-link-text {
    text-decoration: none;
  }
}

/*----------------------------------------------------
	c-link-external
	別窓で開く外部リンク（Figma SP 2052-4251 / PC 2058-4876）
	文字のうしろに「↗」を添えるだけ。色は置かれた文脈から受け取るので、
	置き場所が変わっても地色に合わせて動く
	マークアップは _default.pug のドロワー内を参照（テキスト＋.__icon の2要素）
----------------------------------------------------*/
.c-link-external {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.125rem;
  color: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  white-space: nowrap;
  -webkit-transition: color var(--duration) var(--easeTheme);
  transition: color var(--duration) var(--easeTheme);
}
@media screen and (min-width: 1024px) {
  .c-link-external {
    font-size: 0.875rem;
  }
}
@media (hover: hover) {
  .c-link-external:hover, a:hover .c-link-external {
    color: var(--color-accent);
  }
}

.c-link-external__icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: -0.375rem 0 0 0.125rem;
  width: 0.625rem;
  position: relative;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.c-link-external__icon svg {
  position: relative;
  display: block;
  width: 0.625rem;
  height: auto;
  aspect-ratio: 18/13;
  fill: currentColor;
  -webkit-transition: opacity var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
  transition: opacity var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme), opacity var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme), opacity var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
  will-change: transform, opacity;
}
.c-link-external__icon svg:nth-child(2) {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  -webkit-transform: translateX(-80%);
          transform: translateX(-80%);
}
a:hover .c-link-external__icon svg:nth-child(1) {
  opacity: 0;
  -webkit-transform: translateX(80%);
          transform: translateX(80%);
}
a:hover .c-link-external__icon svg:nth-child(2) {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition-delay: 0.08s;
          transition-delay: 0.08s;
}
@media screen and (min-width: 1024px) {
  .c-link-external__icon {
    margin: -0.3125rem 0 0 0.125rem;
    width: 0.875rem;
  }
  .c-link-external__icon svg {
    width: 0.875rem;
  }
}

/*----------------------------------------------------
	...
----------------------------------------------------*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	c-list-annotation
	注釈リスト（Figma 1583-13168 / 1261-6147）
	「※」はCSSで付けるので、li はテキストだけで書ける
	2行目以降が「※」の下に潜らないよう、li を flex にしてぶら下げる
----------------------------------------------------*/
.c-list-annotation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.21875rem;
  color: var(--color);
  font-size: 0.6875rem;
  line-height: 1.35;
  letter-spacing: 0.06em;
}
.c-list-annotation > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.21875rem;
  text-align: justify;
}
.c-list-annotation > li:before {
  content: "※";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 0.653125rem;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .c-list-annotation {
    gap: 0.3125rem;
    font-size: 0.8125rem;
  }
  .c-list-annotation > li {
    gap: 0.3125rem;
  }
  .c-list-annotation > li:before {
    width: 0.933125rem;
  }
}

/*----------------------------------------------------
	c-modal
	サービス内容一覧の「？」から開く説明モーダル
	（Figma SP 1131-8624・1131-8621 / PC 1090-6771・1090-6792）
	開閉は common.js の jsModal（[data-modal-open] → 同idの .c-modal）
----------------------------------------------------*/
.c-modal {
  --modal-duration: .45s;
  position: fixed;
  inset: 0;
  z-index: 600;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.25rem;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity var(--modal-duration) var(--easeTheme), visibility var(--modal-duration) var(--easeTheme);
  transition: opacity var(--modal-duration) var(--easeTheme), visibility var(--modal-duration) var(--easeTheme);
}
.c-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.c-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.c-modal__panel {
  position: relative;
  width: 17.4375rem;
  max-height: calc(100dvh - 5rem);
  padding: 1.25rem;
  border-radius: 0.625rem;
  background: var(--color-deepblue);
  overflow-y: auto;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  -webkit-transition: -webkit-transform var(--modal-duration) var(--easeTheme);
  transition: -webkit-transform var(--modal-duration) var(--easeTheme);
  transition: transform var(--modal-duration) var(--easeTheme);
  transition: transform var(--modal-duration) var(--easeTheme), -webkit-transform var(--modal-duration) var(--easeTheme);
}
.is-open .c-modal__panel {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform var(--modal-duration) var(--easeOutBack);
  transition: -webkit-transform var(--modal-duration) var(--easeOutBack);
  transition: transform var(--modal-duration) var(--easeOutBack);
  transition: transform var(--modal-duration) var(--easeOutBack), -webkit-transform var(--modal-duration) var(--easeOutBack);
  will-change: transform;
}
@media screen and (min-width: 1024px) {
  .c-modal__panel {
    width: 45.625rem;
    padding: 2.5rem;
    max-height: calc(100dvh - 5rem);
  }
}

.c-modal__close {
  position: absolute;
  right: 0.875rem;
  top: 0.875rem;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.625rem;
  margin: -0.625rem -0.625rem 0 0;
  background: none;
  cursor: pointer;
}
.c-modal__close svg {
  width: 0.9375rem;
  height: auto;
  aspect-ratio: 23.5/15.3;
  stroke: #fff;
  -webkit-transition: -webkit-transform var(--duration) var(--easeTheme);
  transition: -webkit-transform var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
}
.c-modal__close:hover svg {
  -webkit-transform: scale(0.85);
          transform: scale(0.85);
}
@media screen and (min-width: 1024px) {
  .c-modal__close {
    right: 1.25rem;
    top: 1.25rem;
  }
  .c-modal__close svg {
    width: 1.375rem;
  }
}

.c-modal__title {
  padding-right: 1.875rem;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 1024px) {
  .c-modal__title {
    font-size: 1.5rem;
  }
}

.c-modal__body {
  margin-top: 1.5625rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.875rem;
}
@media screen and (min-width: 1024px) {
  .c-modal__body {
    margin-top: 2.8125rem;
    gap: 2.8125rem;
  }
}

.c-modal__section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.625rem;
}

.c-modal__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0.5rem;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.05em;
}
.c-modal__head:before {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-item-align: start;
      align-self: flex-start;
  margin-top: 0.32em;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 100%;
  background: #fff;
}
@media screen and (min-width: 1024px) {
  .c-modal__head {
    gap: 0.625rem;
    font-size: 1.25rem;
  }
  .c-modal__head:before {
    width: 0.875rem;
    height: 0.875rem;
  }
}

.c-modal__head-note {
  margin-left: 0.625rem;
  font-size: 0.6875rem;
}
@media screen and (min-width: 1024px) {
  .c-modal__head-note {
    font-size: 0.875rem;
  }
}

.c-modal__txt {
  color: var(--color-white2);
  font-size: 0.75rem;
  line-height: 1.5;
}
@media screen and (min-width: 1024px) {
  .c-modal__txt {
    font-size: 0.875rem;
  }
}

.c-modal__txt a {
  text-decoration: underline;
}
.c-modal__txt a:hover {
  text-decoration: none;
}

.c-modal__pic img {
  width: 100%;
  height: auto;
}

.c-modal__line {
  height: 1px;
  background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 3px);
}

.c-modal__note {
  opacity: 0.9;
}
.c-modal__note a {
  text-decoration: underline;
}
.c-modal__note a:hover {
  text-decoration: none;
}

/*----------------------------------------------------
	c-modal--option
	オプションの詳細モーダル（Figma SP 1725-6612 / PC 1583-9412）
	説明モーダルより広い箱で、PCだけ「画像＋価格」と「説明」の2段組にする
----------------------------------------------------*/
.c-modal--option .c-modal-option__frame {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 1.25rem;
  width: 100%;
  max-height: calc(100dvh - 2.5rem);
}
@media screen and (min-width: 1024px) {
  .c-modal--option .c-modal-option__frame {
    width: 65.9375rem;
    max-width: 100%;
    gap: 1.875rem;
  }
}
.c-modal--option .c-modal__panel {
  width: 100%;
  max-height: none;
  min-height: 0;
}
@media screen and (min-width: 1024px) {
  .c-modal--option .c-modal__title {
    font-size: 2rem;
  }
}
.c-modal--option .c-modal__body {
  margin-top: 1.25rem;
  gap: 1.875rem;
}
@media screen and (min-width: 1024px) {
  .c-modal--option .c-modal__body {
    margin-top: 1.625rem;
    gap: 2.5rem;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 29.25rem 2.4375rem 29.25rem;
    grid-template-columns: 29.25rem 29.25rem;
    -webkit-column-gap: 2.4375rem;
       -moz-column-gap: 2.4375rem;
            column-gap: 2.4375rem;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}

/*----------------------------------------------------
	画像まわり
----------------------------------------------------*/
.c-modal-option__media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.625rem;
}
@media screen and (min-width: 1024px) {
  .c-modal-option__media {
    gap: 0.9375rem;
    position: sticky;
    top: 0;
    -ms-flex-item-align: start;
        -ms-grid-row-align: start;
        align-self: start;
    margin-bottom: -2.5rem;
    padding-bottom: 2.5rem;
    background: var(--color-deepblue);
  }
}

.c-modal-option__gallery {
  position: relative;
  width: 100%;
}
.c-modal-option__gallery .swiper {
  width: 100%;
  aspect-ratio: 468/309;
  border: 1px solid #0B43A2;
}
.c-modal-option__gallery .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.c-modal-option__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 100%;
  background: #002B6A;
  cursor: pointer;
}
.c-modal-option__nav svg {
  display: block;
  width: 0.8125rem;
  height: auto;
  aspect-ratio: 22/17;
  fill: #fff;
  -webkit-transition: -webkit-transform var(--duration) var(--easeTheme);
  transition: -webkit-transform var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme);
  transition: transform var(--duration) var(--easeTheme), -webkit-transform var(--duration) var(--easeTheme);
  will-change: transform;
}
@media (hover: hover) {
  .c-modal-option__nav:hover svg, a:hover .c-modal-option__nav svg {
    -webkit-transform: translateX(15%);
            transform: translateX(15%);
  }
}
@media screen and (min-width: 1024px) {
  .c-modal-option__nav {
    width: 3.125rem;
    height: 3.125rem;
  }
  .c-modal-option__nav svg {
    width: 1.25rem;
  }
}

.c-modal-option__nav--prev {
  left: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.c-modal-option__nav--prev svg {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
@media (hover: hover) {
  .c-modal-option__nav--prev:hover svg, a:hover .c-modal-option__nav--prev svg {
    -webkit-transform: scaleX(-1) translateX(15%);
            transform: scaleX(-1) translateX(15%);
  }
}

.c-modal-option__nav--next {
  right: 0;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}

.c-modal-option__gallery--single .c-modal-option__nav {
  display: none;
}

.c-modal-option__gallery--contain .swiper {
  background: #fff;
}
.c-modal-option__gallery--contain .swiper-slide img {
  -o-object-fit: contain;
     object-fit: contain;
}

.c-modal-option__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.625rem;
}

.c-modal-option__dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.21875rem;
}
@media screen and (min-width: 1024px) {
  .c-modal-option__dots {
    gap: 0.3125rem;
  }
}

.c-modal-option__dot {
  display: block;
  background: none;
  opacity: 0.6;
  cursor: pointer;
  -webkit-transition: opacity var(--duration) var(--easeTheme);
  transition: opacity var(--duration) var(--easeTheme);
  margin: 0;
  padding: 0;
}
.c-modal-option__dot svg {
  display: block;
  width: 1.125rem;
  height: auto;
  aspect-ratio: 34/27;
  fill: #fff;
  -webkit-transition: fill var(--duration) var(--easeTheme);
  transition: fill var(--duration) var(--easeTheme);
}
.c-modal-option__dot.is-current {
  opacity: 1;
}
.c-modal-option__dot.is-current svg {
  fill: var(--color-accent);
}
@media (hover: hover) {
  .c-modal-option__dot:hover, a:hover .c-modal-option__dot {
    opacity: 1;
  }
}
@media screen and (min-width: 1024px) {
  .c-modal-option__dot svg {
    width: 1.375rem;
  }
}

.c-modal-option__price {
  margin-left: auto;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  white-space: nowrap;
}

.c-modal-option__price-num {
  color: #fff;
  font-family: var(--PF);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 1024px) {
  .c-modal-option__price-num {
    font-size: 1.5rem;
  }
}

.c-modal-option__price-tax {
  color: var(--color-white2);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (min-width: 1024px) {
  .c-modal-option__price-tax {
    font-size: 0.6875rem;
  }
}

/*----------------------------------------------------
	説明まわり
----------------------------------------------------*/
.c-modal-option__detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.875rem;
}
@media screen and (min-width: 1024px) {
  .c-modal-option__detail {
    gap: 2.5rem;
  }
}

.c-modal-option__lead {
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: justify;
}
@media screen and (min-width: 1024px) {
  .c-modal-option__lead {
    font-size: 1rem;
  }
}

.c-modal-option__blocks {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.3125rem;
}
@media screen and (min-width: 1024px) {
  .c-modal-option__blocks {
    gap: 1.875rem;
  }
}

.c-modal-option__block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.4375rem;
}
@media screen and (min-width: 1024px) {
  .c-modal-option__block {
    gap: 0.625rem;
    padding-left: 0.625rem;
  }
}

.c-modal-option__head {
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 1024px) {
  .c-modal-option__head {
    font-size: 1rem;
  }
}

.c-modal-option__spec {
  color: #fff;
}

.c-modal-option__notes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.21875rem;
  color: var(--color-white3, #E5E5E5);
  font-size: 0.625rem;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-align: justify;
}
.c-modal-option__notes li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.21875rem;
}
.c-modal-option__notes li:before {
  content: "※";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 0.65625rem;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .c-modal-option__notes {
    gap: 0.3125rem;
    font-size: 0.8125rem;
  }
  .c-modal-option__notes li {
    gap: 0.3125rem;
  }
  .c-modal-option__notes li:before {
    width: 0.9375rem;
  }
}

/*----------------------------------------------------
	オプション内容（STAR GUIDE のような機能紹介）
	区切りの罫線は項目どうしの間だけに出す
----------------------------------------------------*/
.c-modal-option__features {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.875rem;
}
@media screen and (min-width: 1024px) {
  .c-modal-option__features {
    gap: 2.5rem;
    padding: 10px 0 0 10px;
  }
}

.c-modal-option__feature {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.9375rem;
}
.c-modal-option__feature + .c-modal-option__feature {
  padding-top: 1.875rem;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}
@media screen and (min-width: 1024px) {
  .c-modal-option__feature {
    gap: 1.25rem;
  }
  .c-modal-option__feature + .c-modal-option__feature {
    padding-top: 2.5rem;
  }
}

.c-modal-option__feature-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.4375rem;
}
@media screen and (min-width: 1024px) {
  .c-modal-option__feature-head {
    gap: 0.3125rem;
  }
}

.c-modal-option__feature-num {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.625rem;
  padding: 0.25rem 0.5rem;
  background: var(--color-sky, #0DB3EF);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
@media screen and (min-width: 1024px) {
  .c-modal-option__feature-num {
    padding: 0.3125rem 0.625rem;
    font-size: 1rem;
  }
}

.c-modal-option__feature-title {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 1024px) {
  .c-modal-option__feature-title {
    font-size: 1.5rem;
  }
}

.c-modal-option__feature-pic {
  width: 16.6875rem;
  max-width: 100%;
}
.c-modal-option__feature-pic img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 1024px) {
  .c-modal-option__feature-pic {
    width: 21.875rem;
  }
}

.c-modal-option__feature-txt {
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: justify;
}
@media screen and (min-width: 1024px) {
  .c-modal-option__feature-txt {
    font-size: 0.8125rem;
  }
}

.c-modal-option__store {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.625rem;
}
.c-modal-option__features + .c-modal-option__store {
  padding-top: 1.875rem;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}
.c-modal-option__store li {
  width: 6.25rem;
}
.c-modal-option__store a {
  display: block;
  -webkit-transition: opacity var(--duration) var(--easeTheme);
  transition: opacity var(--duration) var(--easeTheme);
}
@media (hover: hover) {
  .c-modal-option__store a:hover, a:hover .c-modal-option__store a {
    opacity: 0.7;
  }
}
.c-modal-option__store img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 1024px) {
  .c-modal-option__features + .c-modal-option__store {
    padding-top: 2.5rem;
  }
  .c-modal-option__store li {
    width: 8.4375rem;
  }
}

/*----------------------------------------------------
	c-modal--goods
	STAR交換グッズの詳細モーダル（Figmaなし。c-modal--option の組みを流用）
	画像は1枚だけなので枠線・送り・星は出さず、価格の代わりにSTAR数を出す
----------------------------------------------------*/
.c-modal--goods .c-modal-option__gallery .swiper {
  border: 0;
  background: #fff;
}
.c-modal--goods .c-modal-option__gallery .swiper-slide img {
  -o-object-fit: contain;
     object-fit: contain;
}

.c-modal-option__tag {
  -ms-flex-item-align: start;
      align-self: flex-start;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 100px;
  background: #fff;
  color: var(--color-deepblue);
  font-family: var(--PF);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
@media screen and (min-width: 1024px) {
  .c-modal-option__tag {
    padding: 0.375rem 0.625rem;
    font-size: 1rem;
  }
}

/*----------------------------------------------------
	前後のオプションへの送り（Figma SP 1592-5129 / PC 1583-10439）
	ボタンには前後の項目の id を data-modal-open で渡してあるので、
	開閉そのものは jsModal がそのまま面倒を見る
----------------------------------------------------*/
.c-modal-option__paging {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.625rem;
}

.c-modal-option__paging-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: none;
  cursor: pointer;
}
@media screen and (min-width: 1024px) {
  .c-modal-option__paging-btn {
    width: 4.375rem;
  }
}

.c-modal-option__paging-label {
  color: #fff;
  font-family: var(--PF);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .c-modal-option__paging-label {
    font-size: 0.875rem;
  }
}

.c-modal-option__paging-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 100%;
  overflow: hidden;
  line-height: 0;
}
.c-modal-option__paging-icon:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background: #002B6A;
  border-radius: 100%;
  -webkit-transition: -webkit-transform var(--duration) var(--easeOutBack);
  transition: -webkit-transform var(--duration) var(--easeOutBack);
  transition: transform var(--duration) var(--easeOutBack);
  transition: transform var(--duration) var(--easeOutBack), -webkit-transform var(--duration) var(--easeOutBack);
  will-change: transform;
}
.c-modal-option__paging-icon svg {
  display: block;
  position: relative;
  width: 0.9375rem;
  height: auto;
  aspect-ratio: 22/17;
  fill: #fff;
  -webkit-transition: opacity var(--duration) var(--easeOutBack), -webkit-transform var(--duration) var(--easeOutBack);
  transition: opacity var(--duration) var(--easeOutBack), -webkit-transform var(--duration) var(--easeOutBack);
  transition: transform var(--duration) var(--easeOutBack), opacity var(--duration) var(--easeOutBack);
  transition: transform var(--duration) var(--easeOutBack), opacity var(--duration) var(--easeOutBack), -webkit-transform var(--duration) var(--easeOutBack);
  will-change: transform, opacity;
}
.c-modal-option__paging-icon svg:nth-child(2) {
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%) translateX(-300%);
          transform: translate(-50%, -50%) translateX(-300%);
}
@media screen and (min-width: 1024px) {
  .c-modal-option__paging-icon {
    width: 4.375rem;
    height: 4.375rem;
  }
  .c-modal-option__paging-icon svg {
    width: 1.375rem;
  }
}

.c-modal-option__paging-btn:not(.c-modal-option__paging-btn--next) .c-modal-option__paging-icon {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

@media (hover: hover) {
  .c-modal-option__paging-btn:hover .c-modal-option__paging-icon:before, a:hover .c-modal-option__paging-btn .c-modal-option__paging-icon:before {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  .c-modal-option__paging-btn:hover .c-modal-option__paging-icon svg:nth-child(1), a:hover .c-modal-option__paging-btn .c-modal-option__paging-icon svg:nth-child(1) {
    opacity: 0;
    -webkit-transform: translateX(300%);
            transform: translateX(300%);
  }
  .c-modal-option__paging-btn:hover .c-modal-option__paging-icon svg:nth-child(2), a:hover .c-modal-option__paging-btn .c-modal-option__paging-icon svg:nth-child(2) {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) translateX(0);
            transform: translate(-50%, -50%) translateX(0);
    -webkit-transition-delay: 0.08s;
            transition-delay: 0.08s;
  }
}

@media screen and (min-width: 1260px) {
  .c-modal--option .c-modal-option__frame {
    display: block;
    max-height: none;
  }
  .c-modal--option .c-modal__panel {
    max-height: calc(100dvh - 2.5rem);
  }
  .c-modal--option .c-modal-option__paging {
    position: absolute;
    left: 100%;
    top: 3.375rem;
    margin-left: 1.9375rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.9375rem;
  }
}
.c-modal-option__store li {
  display: -ms-grid;
  display: grid;
  place-items: center;
  width: 6.25rem;
  height: 1.875rem;
  border: 1px solid #A6A6A6;
  border-radius: 0.3125rem;
  background: #000;
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
@media screen and (min-width: 1024px) {
  .c-modal-option__store li {
    width: 8.4375rem;
    height: 2.5rem;
    font-size: 0.6875rem;
  }
}

@media screen and (min-width: 1024px) {
  .c-modal__note--cols {
    display: block;
    -webkit-columns: 2;
       -moz-columns: 2;
            columns: 2;
    -webkit-column-gap: 2.8125rem;
       -moz-column-gap: 2.8125rem;
            column-gap: 2.8125rem;
  }
  .c-modal__note--cols > li {
    -webkit-column-break-inside: avoid;
       -moz-column-break-inside: avoid;
            break-inside: avoid;
  }
  .c-modal__note--cols > li:not(:first-child) {
    margin-top: 0.3125rem;
  }
}

/*----------------------------------------------------
	c-spec
	「対象者／日時／定員」のようなラベル＋値の定義リスト
	左の破線と、ラベル幅・文字色は使う側から差し替えられるようにしておく
	（Figma STAR付与テーブル 1494-4141 / イベント 1494-4439・1711-7293
	 / オプション詳細モーダル 1583-10630）
----------------------------------------------------*/
.c-spec {
  --c-spec-label: 2.875rem;
  --c-spec-line: rgba(255, 255, 255, .4);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.35rem;
  padding-left: 0.875rem;
  background-image: repeating-linear-gradient(to bottom, var(--c-spec-line) 0 2px, transparent 2px 3px);
  background-position: left top;
  background-size: 1px 100%;
  background-repeat: no-repeat;
  font-size: 0.6875rem;
  line-height: 1.35;
}
@media screen and (min-width: 1024px) {
  .c-spec {
    --c-spec-label: 3.4375rem;
    gap: 0.5rem;
    padding-left: 1.25rem;
    font-size: 0.8125rem;
  }
}

.c-spec--narrow {
  --c-spec-label: 2rem;
}
@media screen and (min-width: 1024px) {
  .c-spec--narrow {
    --c-spec-label: 2.375rem;
  }
}

.c-spec__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.875rem;
}
@media screen and (min-width: 1024px) {
  .c-spec__row {
    gap: 1.25rem;
  }
}

.c-spec__label {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: var(--c-spec-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.c-spec__body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  letter-spacing: 0.04em;
  text-align: justify;
}

.c-spec__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0 0.875rem;
  text-align: left;
}
.c-spec__list > li {
  position: relative;
  padding-left: 0.45rem;
}
.c-spec__list > li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.675em;
  top: 0.5lh;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 0.1875rem;
  height: 0.1875rem;
  border-radius: 100%;
  background: currentColor;
}
@media screen and (min-width: 1024px) {
  .c-spec__list {
    gap: 0 1.25rem;
  }
  .c-spec__list > li {
    padding-left: 0.6875rem;
  }
  .c-spec__list > li:before {
    width: 0.3125rem;
    height: 0.3125rem;
  }
}

/*----------------------------------------------------
	汎用クラス
----------------------------------------------------*/
.bold,
.strong {
  font-weight: bold;
}

.u-hide {
  display: none;
}

.u-breakLine {
  display: inline-block;
}

.u-center {
  text-align: center;
}

.u-only-sp {
  display: block !important;
}
@media screen and (min-width: 641px) {
  .u-only-sp {
    display: none !important;
  }
}

.u-only-pc {
  display: none !important;
}
@media screen and (min-width: 641px) {
  .u-only-pc {
    display: block !important;
  }
}

.u-color-accent {
  color: var(--color-accent);
}

.u-template {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5rem;
  padding-bottom: 6.25rem;
}
.u-template > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
}

.u-gap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: var(--gap);
}

.is-disabled {
  opacity: 0.7;
  pointer-events: none;
}

.u-budoux {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

[data-delay="0.1"] {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

[data-delay="0.2"] {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

[data-delay="0.3"] {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

[data-delay="0.4"] {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}

[data-delay="0.5"] {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}

[data-delay="0.6"] {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}

[data-delay="0.7"] {
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}

[data-delay="0.8"] {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}

[data-delay="0.9"] {
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}

[data-delay="1"] {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}

[data-delay="1.1"] {
  -webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}

[data-delay="1.2"] {
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}

[data-delay="1.3"] {
  -webkit-transition-delay: 1.3s;
          transition-delay: 1.3s;
}

[data-delay="1.4"] {
  -webkit-transition-delay: 1.4s;
          transition-delay: 1.4s;
}

[data-delay="1.5"] {
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}

[data-delay="1.6"] {
  -webkit-transition-delay: 1.6s;
          transition-delay: 1.6s;
}

[data-delay="1.7"] {
  -webkit-transition-delay: 1.7s;
          transition-delay: 1.7s;
}

[data-delay="1.8"] {
  -webkit-transition-delay: 1.8s;
          transition-delay: 1.8s;
}

[data-delay="1.9"] {
  -webkit-transition-delay: 1.9s;
          transition-delay: 1.9s;
}

[data-delay="2"] {
  -webkit-transition-delay: 2s;
          transition-delay: 2s;
}

[data-delay="2.1"] {
  -webkit-transition-delay: 2.1s;
          transition-delay: 2.1s;
}

[data-delay="2.2"] {
  -webkit-transition-delay: 2.2s;
          transition-delay: 2.2s;
}

[data-delay="2.3"] {
  -webkit-transition-delay: 2.3s;
          transition-delay: 2.3s;
}

[data-delay="2.4"] {
  -webkit-transition-delay: 2.4s;
          transition-delay: 2.4s;
}

[data-delay="2.5"] {
  -webkit-transition-delay: 2.5s;
          transition-delay: 2.5s;
}

[data-delay="2.6"] {
  -webkit-transition-delay: 2.6s;
          transition-delay: 2.6s;
}

[data-delay="2.7"] {
  -webkit-transition-delay: 2.7s;
          transition-delay: 2.7s;
}

[data-delay="2.8"] {
  -webkit-transition-delay: 2.8s;
          transition-delay: 2.8s;
}

[data-delay="2.9"] {
  -webkit-transition-delay: 2.9s;
          transition-delay: 2.9s;
}

[data-delay="3"] {
  -webkit-transition-delay: 3s;
          transition-delay: 3s;
}

.__loop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.__loop figure {
  -webkit-animation: loopLeft linear 30s infinite;
          animation: loopLeft linear 30s infinite;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.__loop img {
  width: auto;
  max-width: none;
  height: 18.75rem;
}
@media screen and (min-width: 1024px) {
  .__loop figure {
    -webkit-animation-duration: 50s;
            animation-duration: 50s;
  }
  .__loop img {
    height: 32.875rem;
  }
}

@-webkit-keyframes loopLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}

@keyframes loopLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}
@-webkit-keyframes loopRight {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes loopRight {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes btnArrow {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  30% {
    -webkit-transform: translate3d(70%, 0, 0);
            transform: translate3d(70%, 0, 0);
  }
  30.1% {
    -webkit-transform: translate3d(-70%, 0, 0);
            transform: translate3d(-70%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes btnArrow {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  30% {
    -webkit-transform: translate3d(70%, 0, 0);
            transform: translate3d(70%, 0, 0);
  }
  30.1% {
    -webkit-transform: translate3d(-70%, 0, 0);
            transform: translate3d(-70%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
/*----------------------------------------------------
	注釈のなかで強調したい一文（本番サイトの .red に相当）
----------------------------------------------------*/
.u-txt-red {
  color: #DE5D5D;
}