/*
Theme Name: development-2025-pilates-k
Theme URI: https://pilates-k.jp/
Description: Word Press Theme for pilates-k official site
Text Domain: 2025-pilates-k
*/

:root {
  /* color-pallet */
  --color-white: #fff;
  --color-dark-brown: #412e1c;
  --color-medium-brown: #5d4d3d;
  --color-medium-brown-2: #665b51;
  --color-logo: #7d7773;
  --color-brown: #988f87;
  --color-light-brown: #ded7d1;
  --color-yellow-beige: #fff7f0;
  --color-beige: #f7f6f4;
  --color-green: #377975;
  --color-deep-grayish-green: #5e857d;
  --color-medium-grayish-green: #8fb2aa;
  --color-light-grayish-green: #adc7c2;
  --color-purple: #9f8fca;
  --color-purple-2: #c5bcdf;
  --color-light-purple: #ddd7e7;
  --color-red: #eb4d4d;
  --color-light-red: #fff6f6;
  --header-bg-color: var(--color-light-brown);


  /* font-family */
  --font-family-ja: "Zen Old Mincho", "游明朝", yumincho,
    "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
    "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  --font-family-en: "brandon-grotesque", "Helvetica Neue", helvetica, arial,
    sans-serif;
  --font-family-holland: "Holland", "Helvetica Neue", helvetica, arial,
    sans-serif;

  /* font-size
  clamp()を使用。viewportは以下を想定。
  min-width: 375px;
  max-width: 1440px;
  */

  /* ja */
  --text-ja-32: clamp(2rem, 1.648rem + 1.5vw, 3rem); /* 32px 48px */
  --text-ja-24: clamp(1.5rem, 1.324rem + 0.75vw, 2rem); /* 24px 32px */
  --text-ja-20: clamp(1.25rem, 1.162rem + 0.38vw, 1.5rem); /* 20px 24px */
  --text-ja-18: clamp(1.125rem, 1.081rem + 0.19vw, 1.25rem); /* 18px 20px */
  --text-ja-16: clamp(1rem, 0.956rem + 0.19vw, 1.125rem); /* 16px 18px */
  --text-ja-15: clamp(0.938rem, 0.915rem + 0.09vw, 1rem); /* 15px 16px */
  --text-ja-14: clamp(0.875rem, 0.853rem + 0.09vw, 0.938rem); /* 14px 15px */
  --text-ja-13: clamp(0.813rem, 0.79rem + 0.09vw, 0.875rem); /* 13px 14px */
  --text-ja-12: 0.75rem; /* 12px 12px */
  --text-ja-11: clamp(0.688rem, 0.665rem + 0.09vw, 0.75rem); /* 11px 12px */
  --text-ja-10: clamp(0.625rem, 0.581rem + 0.19vw, 0.75rem); /* 10px 11px */

  /* en */
  --text-en-56: clamp(3.5rem, 3.148rem + 1.5vw, 4.5rem); /* 56px 72px */
  --text-en-44: clamp(2.75rem, 2.486rem + 1.13vw, 3.5rem); /* 44px 56px */
  --text-en-40: clamp(2.5rem, 2.148rem + 1.5vw, 3.5rem); /* 40px 56px */
  --text-en-32: clamp(2rem, 1.472rem + 2.25vw, 3.5rem); /* 32px 56px */
  --text-en-24: clamp(1.5rem, 1.324rem + 0.75vw, 2rem); /* 24px 32px */
  --text-en-20: clamp(1.25rem, 1.162rem + 0.38vw, 1.5rem); /* 20px 24px */
  --text-en-18: clamp(1.125rem, 0.993rem + 0.56vw, 1.5rem); /* 18px 24px */
  --text-en-16: clamp(1rem, 0.824rem + 0.75vw, 1.5rem); /* 16px 24px */
  --text-en-13: clamp(0.813rem, 0.746rem + 0.28vw, 1rem); /* 13px 16px */
  --text-en-12: clamp(0.75rem, 0.728rem + 0.09vw, 0.813rem); /* 12px 13px */
  --text-en-10: clamp(0.625rem, 0.581rem + 0.19vw, 0.75rem); /* 10px 12px */
}

/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
html {
  /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
  min-width: 375px;
  font-family: var(--font-family-ja);
  line-height: 1.4; /* 1. Correct the line height in all browsers. */
  letter-spacing: 0.08em;
  tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
  text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
  scroll-padding-top: 72px;
  scroll-behavior: smooth;

  @media (width >= 768px) {
    line-height: 1.7;
    scroll-padding-top: 100px
  }
}

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

ol,
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

/**
  1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
  2. Correct the odd 'em' font sizing in all browsers.
  */

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
    monospace; /* 1 */

  font-size: 1em; /* 2 */
}

/**
  Use a better box model (opinionated).
  */

*,
::before,
::after {
  blockquote,
  dl,
  dd,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  figure,
  p,
  pre {
    margin: 0;
  }

  box-sizing: border-box;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
}

/*
  Sections
  ========
  */

body {
  margin: 0; /* Remove the margin in all browsers. */
  color: var(--color-dark-brown);
}

/*
  Text-level semantics
  ====================
  */

/**
  Add the correct font weight in Chrome and Safari.
  */

b,
strong {
  font-weight: bolder;
}

/**
  Add the correct font size in all browsers.
  */

small {
  font-size: 80%;
}

/**
  Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
  */

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
  Tabular data
  ============
  */

/**
  Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
  */

table {
  border-color: currentcolor;
}

/*
  Forms
  =====
  */

/**
  1. Change the font styles in all browsers.
  2. Remove the margin in Firefox and Safari.
  */

button,
input,
optgroup,
select,
textarea {
  margin: 0; /* 2 */
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
}

/**
  Correct the inability to style clickable types in iOS and Safari.
  */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  appearance: button;
}

/**
  Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
  */

legend {
  padding: 0;
}

/**
  Add the correct vertical alignment in Chrome and Firefox.
  */

progress {
  vertical-align: baseline;
}

/**
  Correct the cursor style of increment and decrement buttons in Safari.
  */

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
  1. Correct the odd appearance in Chrome and Safari.
  2. Correct the outline style in Safari.
  */

[type="search"] {
  appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
  Remove the inner padding in Chrome and Safari on macOS.
  */

::-webkit-search-decoration {
  appearance: none;
}

/**
  1. Correct the inability to style clickable types in iOS and Safari.
  2. Change font properties to 'inherit' in Safari.
  */

::-webkit-file-upload-button {
  font: inherit; /* 2 */
  appearance: button; /* 1 */
}

/*
  Interactive
  ===========
  */

/*
  Add the correct display in Chrome and Safari.
  */

summary {
  display: list-item;
}

a,button {
  transition: all 0.3s ease 0s;
}

a,
a:link,
a:visited,
a:hover,
a:active {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
}

button {
  cursor: pointer;
  border: none;
  outline: none;
}

a:hover,button:hover {
  opacity: 0.8;
}

/* end reset css */

/* utils */
.en-label {
  font-family: var(--font-family-en);
  font-weight: 400;
  line-height: 1.1;
}

.ja-label {
  font-family: var(--font-family-ja);
}

.holland-label {
  font-family: var(--font-family-holland);
}

.uppercase {
  text-transform: uppercase;
}

.sp-block {
  display: block;

  @media (width >= 768px) {
    display: inline;
  }
}

.sp-only {
  display: block;

  @media (width >= 768px) {
    display: none;
  }
}

.pc-block {
  display:inline;

  @media (width >= 768px) {
    display: block;
  }
}

.pc-only {
  display: none;

  @media (width >= 768px) {
    display: block;
  }
}

.with-green-circle-number::before {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
  font-family: var(--font-family-en);
  font-size: var(--text-en-18);
  line-height: 1.5rem;
  color: var(--color-white);
  text-align: center;
  content: counter(item);
  counter-increment: item;
  background: var(--color-green);
  border-radius: 50%;

  @media (width >= 768px) {
      padding-left: 0.125rem;
      font-size: var(--text-en-13);
  }
}

.with-green-check {
  background-image: url('./img/icon/check-icon.svg');
  background-repeat: no-repeat;
  background-position: left 0.25em;

  @media (width >= 768px) {
      background-position: left 0.5625em;
  }
}

/* wrapper */
.base-wrapper,.wide-wrapper {
  max-width: 1440px;
  margin: 0 auto;
}

.base-wrapper {
  width: 89.3%;

  @media (width >= 768px) {
    width: 77.8%;
  }
}

.wide-wrapper {
  width: 89.3%;

  @media (width >= 768px) {
    width: 88.9%;
  }
}

/* heading */
.section-main-title {
  &.en-label {
    font-size: var(--text-en-32);

    @media (width >= 768px) {
      font-size: var(--text-en-44);
    }
  }

  &.ja-label {
    font-size: var(--text-ja-32);
    font-weight: 400;
  }
}

.section-sub-title {
  &.ja-label {
    font-size: var(--text-ja-24);
    font-weight: 400;
  }
}

.top-heading-group {
    .main-en-title {
        font-family: var(--font-family-en);
        font-size: var(--text-en-32);
        font-weight: 400;
    }

    .sub-ja-title {
        font-size: var(--text-ja-24);
        font-weight: 400;
    }
}

/* ui/animate-rect.php */
.animate-rect {
  width: 100%;
  height: auto;

  .rect-large,
  .rect-medium {
      transition: x 0.3s ease, y 0.3s ease, width 0.3s ease, height 0.3s ease;
  }
}

.movable-container {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  display: flex;
  gap: 0.45rem;
  padding-right: 0.75rem;
  transition: left 0.3s ease;
  transform: translateY(-50%);

  &.background-color-beige {
    background-color: var(--color-beige); 
  }
}

/* link */
.link {
  .icon {
    display: inline-block;
    vertical-align: text-bottom;
  }

  &.has-animate-rect {
    &:hover {
      .rect-large {
        x: 10px;
        y: 3.5px;
        width: 14.6111px;
        height: 14.6111px;
      }

      .rect-medium {
        x: 10px;
        y: 3.5px;
        width: 14.6111px;
        height: 14.6111px;
      }
    }
  }

  &.has-movable-container {
    &:hover {
      .movable-container {
        left: 25%;
      }
    }
  }
}

.flexibility-arrow {
  --arrow-translate-distance: 4em;


  .animate-rect {
    width: auto;
  }

  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0.5rem 1rem;
  margin: auto;
  font-size: 1rem;

  .flexibility-arrow-text,
  .animate-rect {
    transition: transform 0.3s ease;
  }

  .flexibility-arrow-text {
    font-family: var(--font-family-en);
    font-size: 1rem;
    line-height: normal;

  }

  .arrow-bar {
    transition: stroke-dashoffset 0.3s ease;
  }

  &:hover {
    .flexibility-arrow-text,
    .animate-rect {
      transform: translateX(var(--arrow-translate-distance));
      
    }

    .arrow-bar {
      stroke-dashoffset: var(--arrow-translate-distance);
    }
  }
}

/* cta-button */
a.cta-button {
  --text-color: var(--color-white);
  --border-radius: 2px;

  &.radius-4 {
    --border-radius: 4px;
  }

  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  font-size: var(--text-ja-18);
  font-weight: 400;
  color: var(--text-color);
  letter-spacing: 0.08em;
  background: linear-gradient(to bottom, #FF988C, #78353E);
  border-radius: var(--border-radius);

  &:hover {
      opacity: 1;
  }

  &:visited {
      color: var(--text-color);
  }

  &::before {
      position: absolute;
      inset: 0; 
      z-index: -1; 
      content: "";
      background: linear-gradient(to bottom, #FF8576, #832532);
      border-radius: var(--border-radius);
      opacity: 0; 
      transition: opacity 0.3s ease;
  }

  &:hover::before {
      opacity: 1;
  }

  @media (width >= 768px) {
      padding: 20px 24px;
      font-size: var(--text-ja-20);
  }

  &.full-width {
      width: 100%;
      text-align: center;
  }
}

.cta-button-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: fit-content;
  text-align: center;
}

.cta-button-appeal-label {
  font-size: 1.25rem;
  font-weight: 600;

  .yen {
      font-weight: 400;
  }

  .zero {
      font-size: 1.78em;
  }
}

/* program-card */
.program-card {
  display: grid;
  grid-template:
  'thumbnail' 400px
  'title'
  'description'
  'rate' / 1fr;
  text-align: center;

  @media (width >= 768px) {
      grid-template:
      'thumbnail' 550px
      'title'
      'description'
      'rate' / 1fr;
      padding-bottom: 24px;
      text-align: left;
  }
}

.program-card-image-container {
  grid-area: thumbnail;
  overflow: hidden;
  border-radius: 6px;
  

  @media (width >= 768px) {
      border-radius: 12px;
  }
}

.program-card-title {
  grid-area:title;
  margin-top: -1.4rem;
  font-size: var(--text-en-40);

  &.small {
      font-size: 2.5rem;
  }
}

.program-card-description {
  margin: 4px 0;
  font-size: var(--text-en-13);
}

.program-card-time {
  /* stylelint-disable-next-line no-descending-specificity */
  img {
      display: inline-block;
      margin-right: 5px;
      vertical-align: -2px;
  }
}

.program-card-rate-wrapper {
  display: flex;
  gap:0.3rem;
}

.program-card-rate-container {
  grid-area: rate;
  margin-top: 16px;

  .label {
      width: 4rem;
      font-size: var(--text-ja-15);
      text-align: right;
  }
}

.program-card-rate-list {
  display: inline-block;
}

.program-card-rate-container .program-card-rate-wrapper img {
  width:16px;
}

.program-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.program-card-body-description-container {
  display: grid;
  grid-area: description;
  grid-template: 'description' 'time' 'rate' / 1fr;

  @media (width >= 768px) {
      grid-template: 'description rate' 'time rate' / 1fr 1fr;
  }
  
  .program-card-description {
      grid-area: description;
  }

  .program-card-time {
      grid-area: time;
  }

  .program-card-rate-container {
      grid-area: rate;
  } 
}

.program-card-rate-item {
  display: flex;
  gap: 0.5rem;
}

/* column-card */
.column-card {
  padding: 20px;
  background-color: var(--color-deep-grayish-green);
  border-radius: 8px;

  @media (width >= 768px) {
      padding: 32px;
  }
}

.column-card-image {
  width: 100%;
  height: auto;
}

/* price-section */
.price-section {
  width: auto;
  padding: 3rem 20px;
}

.price-banner-container {
  width: fit-content;
  margin: auto;
}

.price-banner {
  width: 100%;
  height: auto;
}

.registration-section {
  margin: 2.5rem 0;

  @media (width >= 768px) {
      margin: 5rem 0;
  }
}

.price-section-sub-title-container {
  text-align: center;

  p {
      font-size: var(--text-en-13);
      line-height: 150%;
  }
  
  h3 {
      margin-bottom: 1.25rem;
      font-size: var(--text-ja-24);
      line-height: 170%;
  }
}

.note {
  margin-bottom: 10px; 
  font-size: var(--text-ja-12);

  @media (width >= 768px) {
      font-size: var(--text-ja-14);
      text-align: right;
  }
}

.basic-card {
  --border-radius: 8px;

  height: 100%;
  text-align: center;
  background-color: var(--color-beige);
  border-radius: var(--border-radius);

  .basic-card-head {
      padding: 1.25rem 1.6875rem;
      color: var(--color-white);
      background-color: var(--color-medium-brown-2);
      border-radius: var(--border-radius) var(--border-radius) 0 0;

      h4 {
          font-size: var(--text-ja-20);
      }
  }
  
  .basic-card-body {
      padding: 1.25rem;
      color: var(--color-dark-brown);

      @media (width >= 768px) {
          padding: 2.5rem;
      }

      .basic-card-body-inner:first-child {
          padding-bottom: 1.25rem;
          margin-bottom: 1.25rem;
          border-bottom: 1px solid var(--color-light-brown);
      }

      .basic-card-price-label {
          font-size: var(--text-ja-13);

          @media (width >= 768px) {
              font-size: var(--text-ja-15);
          }
      }

      .basic-card-price {
          font-size: var(--text-ja-24);

          @media (width >= 768px) {
             line-height: 1;
          }
      }

      .basic-card-appeal-list {
          margin-bottom: 1rem;
          text-align: left;

          @media (width >= 768px) {
              margin-bottom: 1.25rem;
          }

          li {
              padding-left: 1rem;
              margin-bottom: 0.25rem;
              font-size: var(--text-ja-13);

              @media (width >= 768px) {
                  margin-bottom: 1rem;
                  font-size: var(--text-ja-15);
              }
          }

          li:last-child {
              margin-bottom: 0;
          }
      }

      .basic-card-addition-list {
          text-align: left;

          /* stylelint-disable-next-line no-descending-specificity */
          li {
              padding-left: 1rem;
              margin-bottom: 0.25rem;
              color: var(--color-brown);
              background-image: url('./img/icon/plus-icon.svg');
              background-repeat: no-repeat;
              background-position: left 4px;

              @media (width >= 768px) {
                  background-position: left 0.4688rem;
              }
          }

          li:last-child {
              margin-bottom: 0;
          }
      }
  }

  .basic-card-body.registration {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-row: 2;
      grid-column: 1;
      padding: unset;
      color: var(--color-dark-brown);
      background-color: var(--color-beige);
      border-radius: 0 0 var(--border-radius) var(--border-radius);

      .registration-price-body-inner {
          padding:1rem;
          font-size: var(--text-ja-13);

          @media (width >= 768px) {
              padding: 2.5rem;
              font-size: var(--text-ja-15);
          }
      }

      .registration-price-body-inner:not(:last-child) {
        border-right: 1px solid var(--color-light-brown);
    }
  }

  .registration-price {
      font-size: var(--text-ja-16);

      @media (width >= 768px) {
          font-size: var(--text-ja-20);

          br {
              display: none;
          }
      }
  }

  .registration-price-note {
      font-size: var(--text-ja-10);
  }

  .registration-price-number {
      display: inline-block;
      margin-top: 0.3125rem;
      font-size: var(--text-ja-32);

      @media (width >= 768px) {
          font-size: var(--text-ja-24);
      }
  }

  .registration-price-body-title {
      font-size: var(--text-ja-10);
      

      @media (width >= 768px) {
          font-size: var(--text-ja-15);
      }
  }

  .registration-price-body-number {
      font-size: var(--text-ja-16);

      @media (width >= 768px) {
          font-size: var(--text-ja-15);
      }
  }
}

.basic-card-note {
  font-size: var(--text-ja-12);
  color: var(--color-brown);
  text-align: left;

  @media (width >= 768px) {
      font-size: var(--text-ja-13);
  }

  &.full-member-note {
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: var(--color-dark-brown);
  }
}

.price-info-card-list {
  display: flex;
  gap: 0 1.25rem;
  justify-content: center;
}

.price-info-card-item-label {
  font-size: var(--text-ja-13);
}

.price-info-card-item-price {
  font-size: var(--text-en-24);
}

#monthly-plan-slide {
  margin: 1.25rem -20px 2.5rem;

  @media (width >= 768px) {
      margin: 1.25rem 0 5rem;
  }
}

.monthly-section .splide__slide__row{
  @media (width >= 768px) {
    justify-content: center;
  }
}

.monthly-plan-info-card {
  color: var(--color-dark-brown);
  background-color: var(--color-beige);
  border-radius: 8px;
}

.monthly-plan-info-card-head {
  padding: 1.25rem;
  text-align: center;
  border-bottom: 1px solid var(--color-light-brown);

  @media (width >= 768px) {
      padding-top: 2.5rem;
  }
}

.monthly-plan-info-card-head-icon {
  width: 0.9375rem;
  margin: 0 auto 0.625rem;
}

.monthly-plan-info-card-title {
  font-size: var(--text-ja-20);
  line-height: 170%;
}

.monthly-plan-info-card-body {
  padding: 1.25rem;

  .monthly-plan-info-card-note {
      margin-bottom: 1.25rem;
      font-size: var(--text-ja-13);
  }

  .monthly-plan-info-card-note2{
    margin-top: 1.25rem;
  }

  @media (width >= 768px) {
      padding: 2.5rem;
  }
}

.monthly-plan-info-card-item-title {
  font-size: var(--text-ja-16);
  font-weight: 400;
  line-height: 170%;

  @media (width >= 768px) {
      font-size: var(--text-ja-18);
  }
}

.monthly-plan-info-card-list {
  counter-reset: item;

  .monthly-plan-info-card-item {
      padding-bottom: 1.25rem;
      margin-bottom: 1.25rem;
      border-bottom: 1px solid var(--color-light-brown);
  }

  .monthly-plan-info-card-item:last-child {
      padding: 0;
      margin: 0;
      border-bottom: none;
  }

  .monthly-plan-info-card-item-note {
      margin-bottom: 1.25rem;
      font-size: var(--text-ja-12);
      color: var(--color-brown);

      @media (width >= 768px) {
          padding-top: 0.375rem;
          margin: 0;
          font-size: var(--text-ja-13);
      }
  }
}

.monthly-plan-info-card-item-inner-grid {
  @media (width >= 768px) {
      display: flex;
      gap: 0 0.5rem;
  }
}

.monthly-plan-info-card-item-grid {
  @media (width >= 768px) {
      display: flex;
      gap: 0 3rem;
  }
}

.other-section {
  margin-top: 2.5rem;
}

.other-card-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;

  @media (width >= 768px) {
      grid-template-columns: repeat(2,1fr);
  }
}

/* pickup-program-section */
.pickup-program-section{
  position: relative;
  padding: 6.5rem 0;
  overflow-x: hidden;
  background-color: var(--color-light-brown);

  @media (width >= 768px) {
    padding: 10rem 5rem;
  }

  /* stylelint-disable-next-line selector-class-pattern */
  .splide__arrow {
      top: auto;
      bottom: 20px;
      width: 80px;
      height: 80px;
      background-color: transparent;
      background-size: 100% auto;
  }
  
  /* stylelint-disable-next-line selector-class-pattern */
  .splide__arrow--prev {
      left: -10rem;
  }
  
  /* stylelint-disable-next-line selector-class-pattern */
  .splide__arrow--next {
      right: -10rem;
  }

  .program-card-time{
      display: flex;
      align-items: center;
      justify-content: center;

      @media (width >= 768px) {
          justify-content: flex-start;
      }
  }

  &::before{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      min-width: 1040px;
      max-width: 1300px;
      height: 100%;
      margin: 0 auto;
      content: "";
      object-position: center center;
      background: radial-gradient(circle, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 0%) 60%);
      border-radius: 50%;
      transform: translate(-50%, -50%);
  }

  .pickup-program-section-inner{
      position: relative;
  }

  .pickup-program-slider-wrapper{
      margin-top: 60px;

      @media (width >= 768px) {
          margin-top: 0;
      }
  }

  .pickup-program-label{
      position: absolute;
      top: -4.5rem;
      right: -17px;
      width: 120px;
      font-family: var(--font-family-holland);
      font-size: 24px;
      line-height: 1.1;
      color: var(--color-beige);
      letter-spacing: -0.02em;

      @media (width >= 768px) {
          top: 20.5%;
          right: auto;
          left: 50%;
          width: 200px;
          margin-left: 313px;
          font-size: 40px;
          transform: translateX(-50%);
      }
  }

  .on-pc{
      display: none;

      @media (width >= 768px) {
          display: block;
      }
  }

  .on-sp{
      display: block;

       @media (width >= 768px) {
          display: none;
      }
  }
}

.pickup-program-section-text-container {
  width: fit-content;
  margin: auto;
  text-align: center;
  
  @media (width >= 768px) {
      grid-area: overlap;
      margin: 0;
      text-align: left
  }

  h2 {
      font-size: var(--text-en-32);
  }

  h3 {
      margin: 16px 0 32px;
      font-size: var(--text-en-24);
      font-weight: 400;
  }        
}

.program-all-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:0 20px;
  margin-bottom: 4.0625rem;
  white-space: nowrap;

  @media (width >= 768px) {
      justify-content: left;
      padding: 0;
      margin-bottom: 1.25rem;
  }
}

.program-all-btn::before {
  display: inline-block;
  width: 24px;
  height: 21px;
  margin-right: 8px;
  content: "";
  background-image: url('./img/top/fav-frame.webp');
  background-size: 100% auto;
}

.program-all-btn::after {
  display: inline-block;
  width: 168px;
  height: 8px;
  margin-left: 12px;
  content: "";
  background-image: url('./img/top/arrow-long-right.webp');
  background-size: 100% auto;
}

.splide.pickup-program {
  @media (width >= 500px) {
      grid-area: overlap;
      width: 30%;
      min-width: 440px;
      margin: auto;
  }
}

/* static-page-fv-section */
.static-page-fv-section {
  position: relative;
  padding: 3rem 0;
  
  @media (width >= 768px) {
      width: 88.9%;
      max-width: 1440px;
      padding-top: 0;
      margin: 0 auto;
  }
}

.static-page-fv-section-main-title {
  position: absolute;
  top: 20%;
  left: 0;
  display: flex;
  justify-content: center;
  writing-mode: vertical-rl;

  &.en-label {
      font-size: var(--text-en-40);
  }

  @media (width >= 768px) {
      position: relative;
      top: 0;
      display: block;
      text-align: left;
      letter-spacing: 0.6rem;
      writing-mode: inherit;
  }
}

.static-page-fv-section-group {
  @media (width >= 768px) {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
  }
}

.static-page-fv-section-title-group{
  margin-bottom: 2rem;
}

.static-page-fv-section-sub-title {
  padding: 0 1.25rem;
  font-size: var(--text-ja-24);
  text-align: center;

  @media (width >= 768px) {
      padding: 0;
      text-align: left;
  }
}

.static-page-fv-section-description {
  padding: 0 1.25rem;
  margin-top: 1.25rem;
  font-size: var(--text-ja-13);
  text-align: center;

  @media (width >= 768px) {
      max-width: 18rem;
      padding: 0;
      text-align: left;
  }

  span {
      display: block;

      @media (width >= 768px) {
          display: inline;
      }
  }
}

.static-page-fv-image-container {
  padding-left: 3rem;

  @media (width >= 768px) {
      width: 75%;
      padding-left: 0;
      margin-left: auto;
  }
}

.static-page-fv-image {
  width: 100%;
  height: auto;
}

.arrow-down {
  display: block;
  margin: 1.75rem 0 2.5rem;
  font-size: var(--text-en-12);
  text-align: center;

  @media (width >= 768px) {
      display: none;
  }

  /* stylelint-disable-next-line no-descending-specificity */
  img {
      display: block;
      margin: 0.5rem auto 0;
  }
}

/* intro-section */
.intro-section {
  padding:64px 24px;
  overflow-x: hidden;
  background-color: var(--color-light-brown);

  @media (width >= 768px) {
      padding:0;
  }
}

.intro-container {
  max-width:1440px;
  margin:0 auto;

  @media (width >= 768px) {
      display: grid;
  }
}

.intro-section-text-container {
  text-align: center;

  @media (width >= 768px) {
      grid-row: 1;
      grid-column: 1;
      margin-top: 10%;
      margin-left: 5%;
  }

  @media (width >= 1100px) {
      text-align: left;
  }
}

.intro-section-slogan {
  margin: 0 -32px;
  font-size: var(--text-en-32);
  color: var(--color-purple);
  white-space: nowrap;
  opacity: 0.5;

  @media (width >= 768px) {
      margin:0;
      font-size: var(--text-en-24);
  }
}

.intro-section-title {
  overflow: visible;
  font-size: var(--text-ja-24);
  font-weight: 400;
  white-space: nowrap;

  @media (width >= 768px) {
      font-size: var(--text-ja-32);
  }
}

.intro-section-subtitle {
  font-size: var(--text-ja-15);

  @media (width >= 768px) {
      font-size: var(--text-ja-24);
  }
}

.intro-slide-bg-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  background-image: radial-gradient(circle, white 15%, rgb(255 255 255 / 0%) 70%);
  border-radius: 50%;

  @media (width >= 1100px) {
      grid-row: 1;
      grid-column: 1;
      justify-content: right;
      justify-self: flex-end;
      width: 960px;
      height: 960px;
      padding-right:5%;
  }

  @media (width >= 1400px) {
      justify-content: center;
      padding-right:0;
      overflow: hidden;
  }
}

.intro-slide-container {
  display: grid;
  grid-template: 'indicator' 'main' 'thumbnail' / 1fr;
  width: 480px;
  max-width:100%;

  @media (width >= 768px) {
      grid-template: '. . indicator' 12% 'thumbnail main main' 1fr 'thumbnail main main' 1fr / 16% 1fr 45%;
  }

  .main {
      grid-area: main;
  }

  .thumbnail {
      grid-area: thumbnail;
      margin-top: 12px;

      @media (width >= 768px) {
         align-self: flex-end;
         padding-bottom:12px;
         margin-top: 0;
      }
  }

  /* stylelint-disable-next-line selector-class-pattern */
  .splide__slide {
      border: none !important;
  }


  /* stylelint-disable-next-line selector-class-pattern */
  .splide__slide:last-child {
      margin-right: 0 !important;
  }

  .thumbnail-carousel-list{
    display: grid;
    place-items: center; 
  }

  .page-indicator {
      grid-area: indicator;
      margin: 10px 0 -15px;
      font-size: 2.5rem;
      font-weight: 300;
      color: var(--color-yellow-beige);
      text-align: right;
      letter-spacing: -0.1em;

      label {
          font-style: italic;
      }

      @media (width >= 768px) {
          justify-self: right;
          margin: 0;
          font-size: 3rem;
      }
  }

  .current-page {
      font-size: 5rem;
      font-style: italic;
      font-weight: 300;

      @media (width >= 768px) {
          font-size: 6rem;
      }
  }

  /* stylelint-disable-next-line selector-class-pattern */
  .splide__track {
      @media(width >= 768px) {
          height: 100%;
      }
  }

  
  /* stylelint-disable-next-line no-descending-specificity,selector-class-pattern,no-duplicate-selectors */
  .splide__slide {
      opacity: 0.6;

      &.is-active {
          opacity: 1;
      }

      /* stylelint-disable-next-line selector-class-pattern */
      .splide__slide-image {
          width: 100%;
          height: auto;
          object-fit: cover;
          border-radius: 3px;
      }
  }
}

.intro-menu-card-body {
  padding: 1rem;
  background-color: var(--color-white);
  border-radius: 0 0 8px 8px;

  @media(width >= 768px) {
    padding: 2rem 2rem 3rem;
}
}

.intro-menu-card-title {
  font-size: var(--text-ja-20);

  @media(width >= 768px) {
      font-size: var(--text-ja-24);
  }
}

.intro-menu-card-description {
  font-size: var(--text-ja-13);

  @media(width >= 768px) {
      font-size: var(--text-ja-16);
  }
}

/* interview-section */
.interview-section {
  position: relative;
}

.interview-head {
  padding: 0 2.125rem;
  text-align: center;
}

.interview-section-bg-image {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.interview-section-container {
  padding: 5rem 0;

  @media (width >= 768px) {
      padding: 10rem 0;
  }
}

.interview-section-title {
  margin-bottom: 16px;
  font-size: var(--text-en-32);

  @media (width >= 768px) {
      margin-bottom: 20px;
      font-size: var(--text-en-44);
  }
}

.interview-section-description {
  margin-bottom: 2rem;
  font-size: var(--text-ja-16);

  @media (width >= 768px) {
      margin-bottom: 3.375rem;
      font-size: var(--text-ja-24);
  }
}

.splide.interview {
  position: relative;

  /* stylelint-disable-next-line selector-class-pattern */
  .splide__arrows {
      position: absolute;
      top: -2.8125rem;
      right: 4.75rem;
      z-index: 10;
      display: flex;
      justify-content: space-between;
      width: 120px;
      opacity: 0;

      @media (width >= 768px) {
          opacity: 1;
      }
      
      /* stylelint-disable-next-line selector-class-pattern */
      .splide__arrow {
          width: auto;
          background: transparent;
      }

      /* stylelint-disable-next-line selector-class-pattern */
      .splide__arrow--prev {
          left: 0;
      }
      
      /* stylelint-disable-next-line selector-class-pattern */
      .splide__arrow--next {
          right: 0;
      }
    }
}

.interview-card-image {
  width: 100%;
  aspect-ratio: 3/2;
  margin-bottom: 20px;
}

.interview-card-title {
  font-size: var(--text-ja-20);
  font-weight: 400;
}

.interview-card-description {
  margin: 4px 0;
  font-size: var(--text-ja-13);

  @media (width >= 768px) {
      font-size: var(--text-ja-15);
  }
}

.interview-card-meta {
  font-size: var(--text-ja-10);
  line-height: 1.7;
  color: var(--color-brown);
  letter-spacing: 0.08em;

  @media (width >= 768px) {
      font-size: var(--text-ja-13);
  }
}

.relative{
  position: relative;
}

.page-breadcrumb{
  display: none;
  padding: 20px 0; 
  font-family: var(--font-family-en);
  font-size: 14px;
  line-height: 1.1;
  color: var(--color-dark-brown);
  text-transform: uppercase;
  letter-spacing: 0.06em;

  @media (width >= 768px) {
    display: block;
  }

  .breadcrumb{
    display: flex;
  }

  a{
    color: var(--color-brown);

    &::after{
      display: inline-block;
      width: 7px;
      height: 9px;
      margin: 0 0.75rem;
      content: "";
      background-image: url("img/icon/breadcrumb-arrow-fade.svg");
      background-repeat: no-repeat;
      background-size: 100% auto;
    }
  }
}

.page-breadcrumb-absolute{
  position: absolute;
  top: 20px;
  right: 0;
  left: 0;
  z-index: 5;
  padding: 0;
  color: var(--color-white);

  a{
    color: var(--color-light-brown);

    &::after{
      filter: brightness(0) invert(1);
    }
  }
}

.breadcrumb-absolute-left{
    position: absolute;
  top: 10px;
  left: 0;
  max-width: 25%;
  padding: 0;
  margin: 0;

  .breadcrumb{
    position: absolute;
    top: 0;
  }
}

/* campaign-plan-section */
.campaign-plan-section{
  max-width: 940px;
  margin: auto;

  .additional-info {
    margin-top: 1.25rem;
    text-align: center;
  }
}

.campaign-plan-list-container {
  display: flex;
  flex-direction: column;
  gap:1.25rem;
  margin-top: 1.25rem;
}

.campaign-plan-image {
  width: 100%;
  height: auto;
}

.not-found-section {
  padding: 10rem 0;
  text-align: center;
  background-color: var(--color-beige);

  .not-found-section-inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .not-found-section-title {
    font-size: var(--text-ja-24);
    font-weight: 400;

    .accent {
      margin-left: 0.5em;
      font-size: 1.3em;
    }
  }

  .not-found-section-text {
    font-size: var(--text-ja-16);
  }
}

.wpcf7-response-output[aria-hidden="true"] {
  display: none;
}

.slot-animation-container {
  display: grid;
  
  .current,.next {
    grid-row: 1;
    grid-column: 1;
    transition: transform 0.4s ease-in-out;
  }

  .next {
    display: none;
    transform: translateY(-100%);

    @media (width >= 1024px) {
      display: flex;
    }
  }


  @media (width >= 1024px) {
    &:hover {
      .current {
        transform: translateY(100%) ;
      }
  
      .next {
        transform: translateY(0);
      }
    }
  }
}