@charset "UTF-8";
/*
    Template: swell
    Theme Name: Mira Study
    Theme URI: https://mira-study.com/
    Description: Mira Study - 自習室サイト用子テーマ（SWELL Child）
    Version: 1.0.0
    Author: Correlate Design
    Author URI: https://correlate.design/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
  /* Brand Colors */
  --ms-lime: #F6F193;
  --ms-lime-light: #FAFACC;  /* 背景用（濃い緑の枠線とセット） */
  --ms-lime-dark: #DDD76E;
  --ms-green: #00AA7C;
  --ms-green-light: #2dbf92;
  --ms-white: #FCFEFF;
  --ms-dark-green: #135432;
  --ms-pink: #E883A6;
  --ms-pink-light: #fce8f0;

  /* Semantic Colors */
  --ms-text: #2d2d2d;
  --ms-text-light: #555555;
  --ms-text-muted: #666666;
  --ms-bg: var(--ms-white);
  --ms-bg-light: #F5F8F7;
  --ms-bg-gray: #EEF2F1;
  --ms-bg-green: rgba(37, 165, 121, 0.08);
  --ms-border: var(--ms-dark-green);
  --ms-border-light: rgba(37, 165, 121, 0.2);
  --ms-accent: var(--ms-lime);

  /* Utility Colors */
  --ms-white-pure: #FCFEFF;
  --ms-black: #000000;
  --ms-star-color: #d4a017;  /* 鮮やかな金色 — 装飾要素のため視認性優先 */

  /* Typography — 7社比較調査に基づくスケール */
  --ms-font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ms-heading-weight: 700;
  --ms-line-height: 1.75;
  --ms-line-height-heading: 1.35;
  --ms-letter-spacing: 0.02em;
  --ms-font-size-h1: 2.5rem;
  --ms-font-size-h2: 1.875rem;
  --ms-font-size-h3: 1.25rem;
  --ms-font-size-body: 1rem;
  --ms-font-size-small: 0.8125rem;

  /* Spacing */
  --ms-section-padding: 100px;
  --ms-section-padding-sp: 64px;
  --ms-inner-width: 1100px;
  --ms-inner-padding: 5%;

  /* Animation */
  --ms-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --ms-transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Border Radius */
  --ms-radius-sm: 6px;
  --ms-radius-md: 12px;
  --ms-radius-lg: 16px;
  --ms-radius-xl: 24px;
  --ms-radius-full: 9999px;

  /* Shadows */
  --ms-shadow-sm: none;
  --ms-shadow-md: none;
  --ms-shadow-lg: none;
  --ms-shadow-xl: none;
}

/* ==========================================================================
   Scroll Animations (CSS only)
   ========================================================================== */
@keyframes ms-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ms-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ms-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ms-slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ms-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Scroll-triggered entrance animations (Progressive Enhancement)
   JS adds .ms-animate-ready to body; without it elements remain visible (no FOUC) */
.ms-animate-ready .ms-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ms-animate-ready .ms-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.ms-animate-ready .ms-animate-children > *:nth-child(1) { transition-delay: 0.1s; }
.ms-animate-ready .ms-animate-children > *:nth-child(2) { transition-delay: 0.2s; }
.ms-animate-ready .ms-animate-children > *:nth-child(3) { transition-delay: 0.3s; }
.ms-animate-ready .ms-animate-children > *:nth-child(4) { transition-delay: 0.4s; }

/* ==========================================================================
   Base Overrides (SWELL child theme adjustments)
   ========================================================================== */

/* Focus styles */
.ms-btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ms-green);
  outline-offset: 2px;
  box-shadow: none;
}

/* Skip link */
.ms-skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  background: var(--ms-green);
  color: var(--ms-white-pure);
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 var(--ms-radius-md) var(--ms-radius-md);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}

.ms-skip-link:focus {
  top: 0;
}

/* ==========================================================================
   Utility: Inner Container
   ========================================================================== */
.ms-inner {
  max-width: var(--ms-inner-width);
  margin: 0 auto;
  padding: 0 var(--ms-inner-padding);
}

/* ==========================================================================
   Section
   ========================================================================== */
.ms-section {
  padding: var(--ms-section-padding) 0;
  position: relative;
}

.ms-section__inner {
  max-width: var(--ms-inner-width);
  margin: 0 auto;
  padding: 0 var(--ms-inner-padding);
}

.ms-section--gray {
  background: var(--ms-bg-light);
}

.ms-section--alt {
  background: var(--ms-bg-gray);
}

.ms-section__lead {
  text-align: center;
  font-size: var(--ms-font-size-body);
  color: var(--ms-text-light);
  margin-bottom: 2.5rem;
  line-height: var(--ms-line-height);
  letter-spacing: var(--ms-letter-spacing);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   Section Title
   ========================================================================== */
.ms-section-title {
  font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  font-weight: 800;
  color: var(--ms-green);
  text-align: center;
  margin-bottom: 2.25rem;
  position: relative;
  color: var(--ms-dark-green);
  letter-spacing: 0.06em;
  line-height: var(--ms-line-height-heading);
}

h3.ms-section-title {
  font-size: var(--ms-font-size-h3);
  margin-bottom: 2rem;
}

.ms-section-title__en {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ms-green);
  margin-bottom: 0.25rem;
}

.ms-section-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  background: linear-gradient(90deg, var(--ms-green), var(--ms-lime));
  margin: 1rem auto 1.5rem;
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Phase 2-3: Animated underline on scroll reveal */
.ms-animate-ready .ms-section-title::after {
  width: 0;
}

.ms-animate-ready .is-visible .ms-section-title::after,
.ms-animate-ready .ms-section-title.is-visible::after {
  width: 48px;
}

.ms-section-title--light {
  color: var(--ms-white-pure);
}

.ms-section-title--light .ms-section-title__en {
  color: var(--ms-lime);
}

.ms-section-title--light::after {
  background: linear-gradient(90deg, var(--ms-lime), var(--ms-lime-light));
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.25rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--ms-radius-full);
  border: 2px solid var(--ms-green);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  line-height: 1.4;
  letter-spacing: 0.03em;
  position: relative;
  overflow: hidden;
  min-height: 48px;
}

.ms-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ms-btn:hover::after {
  opacity: 1;
}

/* Phase 2-3: Button active state feedback */
.ms-btn:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

.ms-btn--primary {
  background: var(--ms-green);
  color: var(--ms-white-pure) !important;
  border-color: var(--ms-green);
}

.ms-btn--primary:hover {
  background: var(--ms-dark-green);
  border-color: var(--ms-dark-green);
  color: var(--ms-white-pure) !important;
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: none;
}

.ms-btn--outline {
  background: var(--ms-lime);
  color: var(--ms-dark-green) !important;
  border-color: var(--ms-dark-green);
  font-weight: 700;
}

.ms-btn--outline:hover {
  background: var(--ms-dark-green);
  border-color: var(--ms-dark-green);
  color: var(--ms-white-pure) !important;
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: none;
}

.ms-btn--lg {
  padding: 1.125rem 3rem;
  font-size: 18px;
  font-weight: 700;
  min-height: 56px;
}

.ms-btn--sm {
  padding: 0.5rem 1.5rem;
  font-size: 13px;
}

.ms-btn--line {
  background: #06C755;
  color: var(--ms-white-pure) !important;
  border-color: #06C755;
}

.ms-btn--line:hover {
  background: #05a84a;
  border-color: #05a84a;
  color: var(--ms-white-pure) !important;
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: none;
}

/* ==========================================================================
   Link Arrow
   ========================================================================== */
.ms-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 15px;
  font-weight: 600;
  color: var(--ms-green);
  text-decoration: none;
  transition: var(--ms-transition);
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
}

.ms-link-arrow::after {
  content: '\2192';
  transition: var(--ms-transition);
  font-size: 18px;
}

.ms-link-arrow:hover {
  color: var(--ms-dark-green);
  opacity: 1;
  border-bottom-color: var(--ms-dark-green);
}

.ms-link-arrow:hover::after {
  transform: translateX(6px);
}

/* ==========================================================================
   Tag
   ========================================================================== */
.ms-tag {
  display: inline-block;
  padding: 0.25rem 0.875rem;
  font-size: 12px;
  font-weight: 600;
  background: var(--ms-bg-green);
  border: none;
  color: var(--ms-green);
  border-radius: 100px;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Page Hero (sub-page headers)
   ========================================================================== */
.ms-page-hero {
  padding: calc(var(--ms-section-padding) * 1.2) var(--ms-inner-padding);
  background: var(--ms-bg-light);
  color: var(--ms-text);
  text-align: left;
  position: relative;
  overflow: hidden;
}

/* 背景ウォーターマーク — 右寄せで大胆に */
.ms-page-hero::before {
  content: attr(data-en);
  position: absolute;
  top: 50%;
  right: clamp(1rem, 5vw, 5rem);
  transform: translateY(-50%);
  font-size: clamp(5rem, 15vw, 10rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: rgba(37, 165, 121, 0.07);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
}

.ms-page-hero__inner {
  max-width: var(--ms-inner-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.ms-page-hero__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--ms-green);
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.ms-page-hero__title {
  font-size: clamp(1.75rem, 5vw, 2.5rem) !important;
  font-weight: 800 !important;
  color: var(--ms-green) !important;
  margin-bottom: 0.75rem !important;
  letter-spacing: 0.04em;
  line-height: 1.3 !important;
}

.ms-page-hero__subtitle {
  font-size: 15px;
  color: var(--ms-text-light);
  line-height: 1.8;
  max-width: 560px;
}

.ms-page-hero__desc {
  font-size: 14px;
  color: var(--ms-text-light);
  line-height: 1.8;
  max-width: 560px;
  margin-top: 0.75rem;
}

@media (min-width: 768px) {
  .ms-page-hero__title {
    font-size: clamp(2rem, 5vw, 3rem);
  }
}

@media (max-width: 768px) {
  .ms-page-hero::before {
    font-size: 4rem;
    right: 0.5rem;
    opacity: 0.5;
  }
}

/* ==========================================================================
   Hero (Top page)
   ========================================================================== */
.ms-hero {
  padding: 100px var(--ms-inner-padding) 80px;
  background: linear-gradient(170deg, var(--ms-bg-light) 0%, var(--ms-white-pure) 40%, var(--ms-bg-light) 100%);
  text-align: center;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.ms-hero::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(246, 241, 147, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.ms-hero::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(37, 165, 121, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.ms-hero__inner {
  max-width: 800px;
  position: relative;
  z-index: 1;
}

.ms-hero__badge {
  display: inline-block;
  background: var(--ms-lime);
  color: var(--ms-dark-green);
  font-size: 14px;
  font-weight: 800;
  padding: 0.625rem 1.75rem;
  margin-bottom: 2rem;
  border-radius: 100px;
  box-shadow: none;
  animation: ms-fadeInUp 0.6s ease both;
}

.ms-hero__title {
  font-size: clamp(1.625rem, 5vw, var(--ms-font-size-h1));
  font-weight: var(--ms-heading-weight);
  line-height: var(--ms-line-height-heading);
  margin-bottom: 1.5rem;
  color: var(--ms-dark-green);
  letter-spacing: 0.04em;
  animation: ms-fadeInUp 0.6s ease 0.1s both;
}

.ms-hero__subtitle {
  font-size: clamp(1rem, 2.5vw, var(--ms-font-size-h3));
  font-weight: 600;
  color: var(--ms-text-light);
  margin-bottom: 1rem;
  animation: ms-fadeInUp 0.6s ease 0.2s both;
}

.ms-hero__lead {
  font-size: 18px;
  line-height: var(--ms-line-height);
  color: var(--ms-text-light);
  margin-bottom: 2rem;
  animation: ms-fadeInUp 0.6s ease 0.3s both;
}

.ms-hero__location {
  font-size: 1rem;
  color: var(--ms-text-light);
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  animation: ms-fadeInUp 0.6s ease 0.35s both;
}

.ms-hero__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2rem;
  margin-bottom: 2.5rem;
  animation: ms-fadeInUp 0.6s ease 0.4s both;
}

.ms-hero__points li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 15px;
  font-weight: 500;
  color: var(--ms-text);
  background: var(--ms-white-pure);
  padding: 0.5rem 1rem;
  border-radius: 100px;
  box-shadow: var(--ms-shadow-sm);
}

.ms-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  animation: ms-fadeInUp 0.6s ease 0.5s both;
}

@media (max-width: 640px) {
  .ms-hero__points {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .ms-hero__cta {
    flex-direction: column;
  }

  .ms-hero__cta .ms-btn {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .ms-hero {
    padding: 80px var(--ms-inner-padding) 60px;
    min-height: auto;
  }

  .ms-hero::before,
  .ms-hero::after {
    display: none;
  }

  .ms-hero__points li {
    padding: 0.5rem 1rem;
    font-size: var(--ms-font-size-small);
  }
}

/* ==========================================================================
   Concept Section (Top)
   ========================================================================== */
.ms-concept {
  padding: var(--ms-section-padding) var(--ms-inner-padding);
  background: var(--ms-bg-gray);
  position: relative;
}

.ms-concept__inner {
  max-width: var(--ms-inner-width);
  margin: 0 auto;
}

.ms-concept__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.ms-concept__text {
  text-align: left;
  font-size: var(--ms-font-size-body);
}

.ms-concept__problem {
  font-size: 18px;
  line-height: 2;
  color: var(--ms-text);
  margin-bottom: 0.75rem;
  letter-spacing: var(--ms-letter-spacing);
}

.ms-concept__problem strong {
  color: var(--ms-dark-green);
  font-weight: 800;
  font-size: 20px;
  line-height: 0;
  background-image: linear-gradient(var(--ms-lime), var(--ms-lime));
  background-size: 100% 20%;
  background-repeat: no-repeat;
  background-position: left bottom;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.ms-concept__problem strong::before {
  content: '';
  display: block;
  margin-top: 0.5rem;
}

.ms-concept__solution {
  font-size: 18px;
  line-height: 2;
  color: var(--ms-text);
  font-weight: 500;
  margin-bottom: 1rem;
  letter-spacing: var(--ms-letter-spacing);
}

.ms-concept__cta {
  margin-top: 2.5rem;
}

.ms-concept__image--dual {
  display: flex;
  gap: 1rem;
}

.ms-concept__image--dual picture,
.ms-concept__image--dual > img {
  flex: 1;
  width: 50%;
}

.ms-concept__image--dual img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-md);
  transition: var(--ms-transition);
}

.ms-concept__image--dual img:hover {
  transform: scale(1.02);
  box-shadow: var(--ms-shadow-lg);
}

@media (max-width: 768px) {
  .ms-concept {
    padding: var(--ms-section-padding-sp) var(--ms-inner-padding);
  }

  .ms-concept__content {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .ms-concept__text {
    text-align: center;
  }

  .ms-concept__problem {
    font-size: var(--ms-font-size-body);
  }

  .ms-concept__problem strong {
    font-size: var(--ms-font-size-h3);
  }

  .ms-concept__solution {
    font-size: var(--ms-font-size-body);
  }

  .ms-concept__image--dual {
    gap: 0.5rem;
  }
}

/* ==========================================================================
   Card & Card Grid
   ========================================================================== */
.ms-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.75rem;
}

.ms-card-grid:has(> :only-child) {
  display: flex;
  justify-content: center;
}

.ms-card-grid > :only-child {
  width: calc((100% - 1.75rem) / 2);
}

.ms-card {
  background: var(--ms-white-pure);
  border: 3px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  padding: 2rem;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.ms-card:hover {
  box-shadow: none;
  transform: none;
  border-color: var(--ms-green);
}

.ms-card__num {
  display: block;
  font-size: 44px;
  font-weight: 800;
  color: var(--ms-green);
  line-height: 1;
  margin-bottom: 1rem;
  opacity: 0.8;
}

.ms-card__title {
  font-size: var(--ms-font-size-h3);
  font-weight: var(--ms-heading-weight);
  color: var(--ms-dark-green);
  margin-bottom: 0.625rem;
  letter-spacing: 0.02em;
  line-height: var(--ms-line-height-heading);
}

.ms-card__desc {
  font-size: 14px;
  color: var(--ms-text-light);
  line-height: var(--ms-line-height);
}

@media (max-width: 768px) {
  .ms-card-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .ms-card-grid > :only-child {
    width: 100%;
  }

  .ms-card {
    padding: 1.75rem;
  }
}

/* ==========================================================================
   Features (Top: card-style feature highlights)
   ========================================================================== */
.ms-features__problem {
  text-align: center;
  font-size: var(--ms-font-size-body);
  line-height: var(--ms-line-height);
  margin-bottom: 2.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.ms-features__problem strong {
  color: var(--ms-dark-green);
}

.ms-features__lead {
  text-align: center;
  color: var(--ms-text-light);
  font-size: var(--ms-font-size-body);
  margin-bottom: 3rem;
}

.ms-features__cta {
  text-align: center;
  margin-top: 2rem;
}

/* ==========================================================================
   Gallery
   ========================================================================== */
.ms-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.ms-gallery__item {
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-sm);
  transition: var(--ms-transition);
}

.ms-gallery__item:hover {
  box-shadow: var(--ms-shadow-sm);
}

.ms-gallery__item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: var(--ms-radius-lg);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ms-gallery__item:hover img {
  transform: none;
}

.ms-gallery__caption {
  font-size: var(--ms-font-size-small);
  color: var(--ms-text);
  text-align: center;
  padding: 0.5rem 0.25rem;
}

/* Gallery with main + thumbnails — 左右の高さを揃える */
.ms-gallery--featured {
  grid-template-columns: 2fr 1fr;
  align-items: stretch;
}

.ms-gallery__main {
  display: flex;
  flex-direction: column;
}

.ms-gallery__main .ms-gallery__item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ms-gallery__main .ms-gallery__item img {
  aspect-ratio: auto;
  flex: 1;
  min-height: 0;
  object-fit: cover;
}

.ms-gallery__thumbs {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ms-gallery__thumbs .ms-gallery__item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ms-gallery__thumbs img {
  flex: 1;
  min-height: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  border-radius: var(--ms-radius-lg);
}

.ms-gallery__arrow {
  display: none;
}

@media (min-width: 768px) {
  .ms-gallery:not(.ms-gallery--featured) {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .ms-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  /* featured: SP横スクロールカルーセル（両端チラ見せ） */
  .ms-gallery--featured {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0.5rem;
    padding: 0 1rem;
    position: relative;
    scrollbar-width: none;
  }

  .ms-gallery--featured::-webkit-scrollbar {
    display: none;
  }

  .ms-gallery--featured .ms-gallery__main,
  .ms-gallery--featured .ms-gallery__thumbs {
    display: contents;
  }

  .ms-gallery--featured .ms-gallery__item {
    flex: 0 0 85%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .ms-gallery--featured .ms-gallery__main .ms-gallery__item img,
  .ms-gallery--featured .ms-gallery__thumbs img {
    aspect-ratio: 16 / 9;
    width: 100%;
    border-radius: 0;
  }

  .ms-gallery--featured .ms-gallery__caption {
    padding: 0.375rem 0.5rem;
  }

  /* ラッパー: 矢印の位置基準 */
  .ms-gallery-wrap {
    position: relative;
  }

  /* 矢印ボタン */
  .ms-gallery__arrow {
    position: absolute;
    top: calc(50% - 18px);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    color: var(--ms-dark-green);
  }

  .ms-gallery__arrow--prev {
    left: 8px;
  }

  .ms-gallery__arrow--next {
    right: 8px;
  }
}

@media (max-width: 480px) {
  .ms-gallery {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   Info Table
   ========================================================================== */
.ms-info-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--ms-radius-md);
  overflow: hidden;
}

.ms-info-table th,
.ms-info-table td {
  padding: 1.375rem 1.25rem;
  border-bottom: 1px solid var(--ms-border-light);
  text-align: left;
  vertical-align: top;
}

.ms-info-table th {
  width: 200px;
  font-weight: 700;
  background: var(--ms-bg-light);
  color: var(--ms-dark-green);
  letter-spacing: 0.02em;
}

.ms-info-table tr:hover td {
  background: var(--ms-bg-green);
}

.ms-info-table td ul {
  padding-left: 1.25rem;
  list-style: disc;
}

.ms-info-table td ul li {
  list-style: disc !important;
}

.ms-info-table td li {
  list-style: disc;
  margin-bottom: 0.25rem;
}

@media (max-width: 768px) {
  .ms-info-table th {
    width: 120px;
    font-size: var(--ms-font-size-small);
  }

  .ms-info-table th,
  .ms-info-table td {
    padding: 1rem 0.75rem;
  }
}

/* ==========================================================================
   Legal Content
   ========================================================================== */
.ms-legal-content h3 {
  font-size: var(--ms-font-size-h3);
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 2px solid var(--ms-green);
  color: var(--ms-dark-green);
  font-weight: var(--ms-heading-weight);
  letter-spacing: 0.02em;
}

.ms-legal-content h3:first-of-type {
  margin-top: 2rem;
}

.ms-legal-content {
  font-size: 14px;
}

.ms-legal-content p {
  margin-bottom: 1rem;
  line-height: 1.8;
}

.ms-legal-content ul,
.ms-legal-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.ms-legal-content li {
  list-style: disc;
  margin-bottom: 0.5rem;
  line-height: 1.8;
}

.ms-legal-content ol li {
  list-style: decimal;
}

.ms-legal-content__toc {
  background: var(--ms-bg-light);
  border-radius: var(--ms-radius-lg);
  padding: 2rem;
  margin-bottom: 3rem;
}

.ms-legal-content__toc ol {
  list-style: decimal;
  padding-left: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 2rem;
}

.ms-legal-content__toc a {
  color: var(--ms-dark-green);
  text-decoration: none;
  transition: var(--ms-transition);
}

.ms-legal-content__toc a:hover {
  color: var(--ms-green);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .ms-legal-content__toc ol {
    grid-template-columns: 1fr;
  }
}

.ms-legal-content__date {
  margin-top: 3rem;
  text-align: right;
  color: var(--ms-text-light);
}

/* ==========================================================================
   CTA Section
   ========================================================================== */
.ms-cta {
  padding: var(--ms-section-padding) var(--ms-inner-padding);
  background: var(--ms-green);
  color: var(--ms-white-pure);
  text-align: center;
  position: relative;
  overflow: hidden;
  border: none;
}

.ms-cta::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -15%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(246, 241, 147, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.ms-cta::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(232, 131, 166, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.post_content .ms-cta .ms-section-title {
  color: var(--ms-white-pure) !important;
}

.post_content .ms-cta .ms-section-title__en {
  color: var(--ms-lime) !important;
}

.ms-cta__inner {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.ms-cta__title {
  font-size: var(--ms-font-size-h2);
  font-weight: var(--ms-heading-weight);
  margin-bottom: 1.25rem;
  letter-spacing: 0.04em;
  line-height: var(--ms-line-height-heading);
}

.ms-cta__desc {
  font-size: var(--ms-font-size-body);
  opacity: 0.92;
  margin-bottom: 2.5rem;
  line-height: var(--ms-line-height);
}

.ms-cta__note {
  font-size: 13px;
  opacity: 0.85;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.ms-cta__methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.ms-cta__method {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 2rem;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid var(--ms-dark-green);
  background: var(--ms-lime);
  color: var(--ms-dark-green);
  border-radius: var(--ms-radius-lg);
}

.ms-cta__method:hover {
  background: var(--ms-dark-green);
  border-color: var(--ms-dark-green);
  color: var(--ms-white-pure);
  transform: translateY(-2px);
  box-shadow: none;
}

.ms-cta__method-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 0.75rem;
  color: var(--ms-dark-green) !important;
}

.ms-cta__method--line .ms-cta__method-icon {
  fill: currentColor;
  stroke: none;
}

.ms-cta__method-name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: var(--ms-dark-green) !important;
}

.ms-cta__method-desc {
  font-size: 13px;
  color: var(--ms-dark-green) !important;
  opacity: 0.7;
}

.ms-cta__method:hover .ms-cta__method-name,
.ms-cta__method:hover .ms-cta__method-desc,
.ms-cta__method:hover .ms-cta__method-icon {
  color: var(--ms-white-pure) !important;
}

/* ==========================================================================
   Flow (Steps)
   ========================================================================== */
.ms-flow {
  padding: var(--ms-section-padding) var(--ms-inner-padding);
  background: var(--ms-white-pure);
}

.ms-flow__inner {
  max-width: var(--ms-inner-width);
  margin: 0 auto;
}

.ms-flow__steps {
  counter-reset: step;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 1rem !important;
}

.ms-flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 2.5rem 1rem 1.5rem;
  background: var(--ms-bg-green);
  border: none;
  border-radius: var(--ms-radius-lg);
  flex: 1;
  position: relative;
  transition: var(--ms-transition);
}

.ms-flow__step:hover {
  transform: none;
}

/* ステップ間の矢印コネクター（横向き） */
.ms-flow__step + .ms-flow__step::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -32px;
  transform: translateY(-50%);
  width: 32px;
  height: 2px;
  background: var(--ms-green);
}

.ms-flow__step + .ms-flow__step::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%) rotate(-45deg);
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ms-green);
  border-bottom: 2px solid var(--ms-green);
}

/* ステップ間の余白（矢印分） */
.ms-flow__step + .ms-flow__step {
  margin-top: 0;
  margin-left: 40px;
}

.ms-flow__step-num {
  width: 48px;
  height: 48px;
  background: var(--ms-green);
  color: var(--ms-white-pure);
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
}

.ms-flow__step-content h3 {
  font-size: var(--ms-font-size-h3);
  font-weight: var(--ms-heading-weight);
  margin-bottom: 0.5rem !important;
  color: var(--ms-dark-green);
  letter-spacing: 0.02em;
  line-height: var(--ms-line-height-heading);
}

.ms-flow__step-content p {
  font-size: 15px;
  color: var(--ms-text-light);
  line-height: var(--ms-line-height);
}

.ms-flow__cta {
  text-align: center;
  margin-top: 3rem;
}

.ms-flow__cta-lead {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 1.25rem;
  color: var(--ms-dark-green);
}

.ms-flow__reassurance {
  text-align: center;
  font-size: 15px;
  color: var(--ms-text-light, #666);
  margin-top: 1.5rem;
}

.ms-flow__reassurance strong {
  color: var(--ms-green, #00AA7C);
  font-weight: 700;
}

@media (max-width: 768px) {
  .ms-flow__steps {
    flex-direction: column !important;
    align-items: center !important;
  }

  .ms-flow__step {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 1rem;
    width: 100%;
    max-width: none;
    padding-top: 1rem;
  }

  .ms-flow__step .ms-flow__step-num {
    position: static;
    transform: none;
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .ms-flow__step + .ms-flow__step {
    margin-left: 0;
    margin-top: 28px;
  }

  /* 矢印を縦方向に戻す */
  .ms-flow__step + .ms-flow__step::before {
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
  }

  .ms-flow__step + .ms-flow__step::after {
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
  }
}

/* ==========================================================================
   Comparison (ms-compare)
   ========================================================================== */
.ms-compare {
  max-width: 720px;
  margin: 0 auto 1.5rem;
}

.ms-compare__header,
.ms-compare__row {
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  gap: 0;
}

.ms-compare__header {
  margin-bottom: 0.5rem;
}

.ms-compare__header .ms-compare__col--mira {
  background: var(--ms-green);
  color: var(--ms-white-pure);
  border-radius: var(--ms-radius-md) var(--ms-radius-md) 0 0;
  padding: 0.875rem 1rem;
}

.ms-compare__header .ms-compare__col--other {
  padding: 0.875rem 1rem;
  color: var(--ms-text-light);
}

.ms-compare__col-name {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.03em;
}

.ms-compare__row {
  border-bottom: 1px solid var(--ms-border-light);
}

.ms-compare__row:last-child {
  border-bottom: none;
}

.ms-compare__label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.75rem;
  font-weight: 700;
  font-size: 14px;
  color: var(--ms-dark-green);
  text-align: center;
}

.ms-compare__col {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  font-size: 15px;
  text-align: center;
}

.ms-compare__col--mira {
  background: var(--ms-bg-green);
  color: var(--ms-dark-green);
  font-weight: 600;
}

.ms-compare__col--other {
  color: var(--ms-text-light);
}

.ms-compare__icon {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--ms-green);
  line-height: 1;
}

.ms-compare__icon--strong {
  color: var(--ms-green);
  font-weight: 700;
}

.ms-compare__icon--weak {
  color: var(--ms-text-muted);
}

.ms-compare__price {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.ms-compare__col--mira .ms-compare__price {
  color: var(--ms-green);
}

.ms-compare__col--other .ms-compare__price {
  color: var(--ms-text-light);
}

.ms-compare__row--highlight {
  background: var(--ms-bg-light);
  border-bottom: none;
  border-radius: 0 0 var(--ms-radius-md) var(--ms-radius-md);
}

@media (max-width: 768px) {
  .ms-compare__header,
  .ms-compare__row {
    grid-template-columns: 80px 1fr 1fr;
  }

  .ms-compare__label {
    font-size: var(--ms-font-size-small);
    padding: 0.75rem 0.5rem;
  }

  .ms-compare__col {
    padding: 0.75rem 0.5rem;
    font-size: var(--ms-font-size-small);
    flex-wrap: wrap;
  }

  .ms-compare__col-name {
    font-size: var(--ms-font-size-small);
  }

  .ms-compare__price {
    font-size: var(--ms-font-size-body);
  }
}

.ms-comparison-table__note {
  font-size: 14px;
  color: var(--ms-text-light);
  line-height: 1.8;
  text-align: center;
}

/* ==========================================================================
   System Card (About page: service feature cards)
   ========================================================================== */
.ms-system-card {
  border: 3px solid var(--ms-green);
  background: var(--ms-white-pure);
  border-radius: var(--ms-radius-lg);
  overflow: hidden;
  box-shadow: var(--ms-shadow-sm);
  transition: var(--ms-transition);
}

.ms-system-card:hover {
  box-shadow: var(--ms-shadow-sm);
  transform: none;
}

.ms-system-card + .ms-system-card {
  margin-top: 2rem;
}

.ms-system-card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--ms-border-light);
  background: var(--ms-bg-green);
}

.ms-system-card__tag {
  display: inline-block;
  padding: 0.3rem 0.875rem;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--ms-green), var(--ms-green-light));
  color: var(--ms-white-pure);
  border-radius: 100px;
  letter-spacing: 0.05em;
}

.ms-system-card__num {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ms-dark-green);
  min-width: 1.5rem;
}

.ms-system-card__title-wrap {
  flex: 1;
}

.ms-system-card__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ms-dark-green);
  letter-spacing: 0.02em;
}

.ms-system-card__subtitle {
  font-size: 14px;
  color: var(--ms-text-light);
  margin-top: 0.375rem;
  line-height: 1.5;
}

.ms-system-card__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 2rem;
}

.ms-system-card__image {
  order: 2;
}

.ms-system-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: var(--ms-radius-md);
}

.ms-system-card__text {
  font-size: 15px;
  line-height: var(--ms-line-height);
  letter-spacing: var(--ms-letter-spacing);
}

.ms-system-card__text p {
  font-size: var(--ms-font-size-body);
  margin-bottom: 1rem;
}

.ms-system-card__text p:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .ms-system-card + .ms-system-card {
    margin-top: 1.25rem;
  }

  .ms-system-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.5rem 1rem;
  }

  .ms-system-card__tag {
    font-size: 11px;
    padding: 0.125rem 0.5rem;
    margin-bottom: 0.125rem;
  }

  .ms-system-card__num {
    display: none;
  }

  .ms-system-card__title {
    font-size: var(--ms-font-size-body) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-left: none !important;
  }

  .ms-system-card__subtitle {
    font-size: var(--ms-font-size-body);
    margin-top: 0;
    line-height: 1.4;
  }

  .ms-system-card__body {
    grid-template-columns: 1fr;
    padding: 1rem;
    gap: 0.75rem;
  }

  .ms-system-card__image {
    order: -1;
  }

  .ms-system-card__text {
    font-size: var(--ms-font-size-body);
  }

  .ms-system-card__grid--9 .ms-system-card__grid-item strong {
    margin-bottom: 0;
    font-size: 11px !important;
  }
}

/* --------------------------------------------------------------------------
   System Section Lead
   -------------------------------------------------------------------------- */
.ms-about-services__lead {
  text-align: center;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ms-text-light);
  margin-bottom: 3rem;
  letter-spacing: var(--ms-letter-spacing);
}

/* --------------------------------------------------------------------------
   System Card: 9-Grid (Vision Board)
   -------------------------------------------------------------------------- */
.ms-system-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

.ms-system-card__grid-item {
  padding: 0.75rem;
  background: var(--ms-bg-light);
  border: none;
}

.ms-system-card__grid-item strong {
  display: block;
  font-size: 13px;
  margin-bottom: 0.25rem;
}

.ms-system-card__grid--9 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  margin-top: 1rem;
}

.ms-system-card__grid--9 .ms-system-card__grid-item {
  text-align: center;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ms-system-card__grid--9 .ms-system-card__grid-item strong {
  margin-bottom: 0;
  font-size: 13px;
}

.ms-system-card__grid-item--center {
  background: var(--ms-green);
  color: var(--ms-white-pure);
  border-color: var(--ms-green);
}

.ms-system-card__grid-item--center strong {
  color: var(--ms-white-pure);
}

/* --------------------------------------------------------------------------
   System Card: Flow Diagram (Mira Type 16)
   -------------------------------------------------------------------------- */
.ms-system-card__flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.ms-system-card__flow-item {
  width: 100%;
  padding: 1rem;
  background: var(--ms-bg-light);
  border: none;
  text-align: center;
}

.ms-system-card__flow-item strong {
  display: block;
  font-size: 14px;
  margin-bottom: 0.25rem;
}

.ms-system-card__flow-item p {
  font-size: 13px;
  color: var(--ms-text-light);
  margin-bottom: 0;
}

.ms-system-card__flow-arrow {
  font-size: 20px;
  color: var(--ms-text-light);
}

/* --------------------------------------------------------------------------
   System Card: Color Cards (Mini Success Map)
   -------------------------------------------------------------------------- */
.ms-system-card__colors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 1rem 0;
}

.ms-system-card__color {
  padding: 0.75rem;
  text-align: center;
  border: none;
}

.ms-system-card__color strong {
  display: block;
  font-size: 14px;
  margin-bottom: 0.25rem;
}

.ms-system-card__color span {
  display: block;
  font-size: 13px;
  color: var(--ms-text-light);
}

.ms-system-card__color-example {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--ms-border-light);
  font-size: 13px;
}

.ms-system-card__color--red {
  border-color: #dc2626;
  background: #fef2f2;
}

.ms-system-card__color--yellow {
  border-color: #ca8a04;
  background: #fefce8;
}

.ms-system-card__color--green {
  border-color: #16a34a;
  background: #f0fdf4;
}

@media (max-width: 768px) {
  .ms-system-card__colors {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Service Sub (その他のサポート)
   -------------------------------------------------------------------------- */
.ms-service-sub {
  margin-top: 5rem;
  padding-top: 0;
}

.ms-service-sub__title {
  font-size: 1rem;
  text-align: center;
  margin: 0 0 2rem 0 !important;
  padding: 0 !important;
  color: var(--ms-green);
  font-weight: 600;
  letter-spacing: 0.08em;
  border: none !important;
}

.ms-service-sub__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.ms-service-sub__item {
  padding: 1.5rem 1.25rem;
  background: var(--ms-white-pure);
  border-top: 3px solid var(--ms-green);
  border-radius: var(--ms-radius-md);
  box-shadow: none;
}

.ms-service-sub__item strong {
  display: block;
  font-size: 15px;
  margin-bottom: 0.5rem;
  color: var(--ms-dark-green);
}

.ms-service-sub__item p {
  font-size: 13px;
  color: var(--ms-text-light);
  margin-bottom: 0;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .ms-service-sub__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .ms-service-sub__list {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Equipment Cards
   ========================================================================== */
.ms-equipment {
  padding: var(--ms-section-padding) var(--ms-inner-padding);
}

.ms-equipment__inner {
  max-width: var(--ms-inner-width);
  margin: 0 auto;
}

.ms-equipment__category {
  margin-bottom: 2.5rem;
  background: var(--ms-white-pure);
  border-radius: 12px;
  padding: 2rem 1.75rem 1.75rem;
  box-shadow: none;
  border: 3px solid var(--ms-green);
}

.ms-equipment__category:last-child {
  margin-bottom: 0;
}

.ms-equipment__category-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--ms-font-size-h3);
  font-weight: var(--ms-heading-weight);
  margin-bottom: 1.5rem;
  padding-bottom: 0;
  border-bottom: none;
  color: var(--ms-dark-green);
  letter-spacing: 0.02em;
}

.ms-equipment__category-title .icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--ms-green);
  background: var(--ms-bg-green);
  border-radius: 10px;
  padding: 8px;
}

.ms-equipment__list {
  display: grid;
  gap: 0;
}

.ms-equipment__list li {
  padding: 1rem 0;
  border-top: none;
  border-bottom: 1px solid var(--ms-border-light);
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 0 0.75rem;
  align-items: start;
}

.ms-equipment__list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ms-equipment__list li::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ms-green);
  margin-top: 0.45rem;
  grid-row: 1 / 3;
}

.ms-equipment__list strong {
  display: block;
  font-weight: 700;
  margin-bottom: 0.125rem;
  color: var(--ms-heading);
  grid-column: 2;
}

.ms-equipment__list p {
  font-size: 13px;
  color: var(--ms-text-light);
  line-height: 1.6;
  grid-column: 2;
}

@media (min-width: 768px) {
  .ms-equipment__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .ms-equipment__category {
    margin-bottom: 0;
    padding: 1.75rem 1.5rem 1.5rem;
  }
}

/* ==========================================================================
   Security Section (Facility)
   ========================================================================== */
.ms-security__grid {
  display: grid;
  gap: 2rem;
}

.ms-security__item {
  text-align: center;
  padding: 2.25rem;
  background: var(--ms-white-pure);
  border-radius: var(--ms-radius-xl);
  box-shadow: var(--ms-shadow-sm);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
}

.ms-security__item:hover {
  box-shadow: var(--ms-shadow-sm);
  transform: none;
  border-color: transparent;
}

.ms-security__icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 1.25rem;
  background: var(--ms-bg-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--ms-transition);
}

.ms-security__item:hover .ms-security__icon {
  transform: none;
}

.ms-security__icon .icon {
  width: 28px;
  height: 28px;
  color: var(--ms-green);
}

.ms-security__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--ms-dark-green);
}

.ms-security__desc {
  font-size: 14px;
  color: var(--ms-text-light);
  line-height: 1.8;
}

@media (max-width: 768px) {
  .ms-security__grid {
    gap: 0.75rem;
  }

  .ms-security__item {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: start;
    text-align: left;
    padding: 1rem 1.25rem;
    gap: 0.25rem 1rem;
  }

  .ms-security__icon {
    width: 44px;
    height: 44px;
    margin: 0;
    flex-shrink: 0;
    grid-row: 1 / 3;
  }

  .ms-security__icon .icon {
    width: 20px;
    height: 20px;
  }

  .ms-security__title {
    font-size: 15px;
    margin-bottom: 0;
    white-space: nowrap;
  }

  .ms-security__desc {
    font-size: 13px;
    line-height: 1.6;
  }
}

@media (min-width: 769px) {
  .ms-security__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   Price Tabs
   ========================================================================== */
.ms-price-tab__nav {
  display: flex;
  justify-content: center;
  gap: 0.375rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  background: var(--ms-bg-gray);
  padding: 0.375rem;
  border-radius: var(--ms-radius-lg);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.ms-price-tab__btn {
  padding: 0.625rem 1.25rem;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: var(--ms-transition);
  border-radius: var(--ms-radius-md);
  color: var(--ms-text-light);
}

.ms-price-tab__btn:hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--ms-text);
}

.ms-price-tab__btn.is-active {
  background: var(--ms-green);
  color: var(--ms-white-pure);
}

.ms-price-tab__nav--static {
  pointer-events: none;
}

.ms-price-tab__btn.is-disabled {
  opacity: 0.35;
  text-decoration: line-through;
  cursor: default;
}

.ms-price-tab__content {
  display: none;
}

.ms-price-tab__content.is-active {
  display: block;
  animation: ms-fadeIn 0.3s ease both;
}

.ms-price-tab__note {
  text-align: center;
  font-size: 14px;
  color: var(--ms-text-light);
  margin-bottom: 1rem;
}

/* ==========================================================================
   Plan Card (Pricing)
   ========================================================================== */
.ms-plan-card {
  background: var(--ms-white-pure);
  border: 3px solid var(--ms-green);
  border-radius: var(--ms-radius-xl);
  padding: 2.25rem 2rem;
  position: relative;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--ms-shadow-sm);
}

.ms-plan-card:hover {
  box-shadow: none;
  transform: none;
  border-color: var(--ms-green);
}

.ms-plan-card--featured {
  border: 3px solid var(--ms-green);
  background: var(--ms-white-pure);
  z-index: 2;
}

.ms-plan-card--featured:hover {
  transform: translateY(-4px);
}

.ms-plan-card--recommend {
  border: 3px solid var(--ms-green);
  box-shadow: var(--ms-shadow-md);
}

.ms-plan-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--ms-green), var(--ms-green-light));
  color: var(--ms-white-pure);
  font-size: 12px;
  font-weight: 700;
  padding: 0.375rem 1.25rem;
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: none;
  letter-spacing: 0.03em;
}

.ms-plan-card--featured .ms-plan-card__badge {
  background: var(--ms-lime);
  color: var(--ms-dark-green);
  font-size: 13px;
  padding: 0.5rem 1.5rem;
  box-shadow: none;
  font-weight: 800;
}

.ms-plan-card__badge--limited {
  background: var(--ms-text-muted);
}

.ms-plan-card__name {
  font-size: 24px !important;
  font-weight: 500 !important;
  text-align: center;
  margin-bottom: 0.5rem;
  color: var(--ms-green);
  letter-spacing: 0.03em;
}

.ms-plan-card--featured .ms-plan-card__name {
  font-size: 24px;
  font-weight: 500;
}

.ms-plan-card__desc {
  font-size: 14px;
  color: var(--ms-text-light);
  text-align: center;
  margin-bottom: 0.25rem;
}

.ms-plan-card__time {
  font-size: 13px;
  color: var(--ms-text-light);
  text-align: center;
  margin-bottom: 1.5rem;
}

.ms-plan-card__prices {
  margin-bottom: 1.5rem;
  border-top: 1px solid var(--ms-border-light);
  padding-top: 1rem;
}

.ms-plan-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 0 0;
  text-align: center;
  width: fit-content;
  margin: 0 auto;
  background-image: linear-gradient(var(--ms-lime), var(--ms-lime));
  background-size: 100% 15%;
  background-repeat: no-repeat;
  background-position: left 90%;
}

.ms-plan-card__price--main {
  padding: 1.25rem;
  background: var(--ms-bg-green);
  margin: 0 -1rem;
  border-bottom: none;
  margin-bottom: 0.5rem;
  border-radius: var(--ms-radius-md);
}

.ms-plan-card__price-label {
  font-size: 13px;
  color: var(--ms-text-light);
  min-width: 60px;
}

.ms-plan-card__price-amount {
  font-size: 1rem;
  flex: 1;
}

.ms-plan-card__price-amount strong {
  font-size: 26px;
  font-weight: 800;
  color: var(--ms-green);
}

.ms-plan-card__price--main .ms-plan-card__price-amount strong {
  font-size: 36px;
}

.ms-plan-card__price-tax {
  font-size: 13px;
  color: var(--ms-text-light);
  width: 100%;
}

/* Plan card price (simplified version used on price page) */
.ms-plan-card__amount {
  font-size: 40px;
  font-weight: 800;
  color: var(--ms-green);
  letter-spacing: -0.02em;
}

.ms-plan-card--featured .ms-plan-card__amount {
  font-size: 40px;
  color: var(--ms-green);
  -webkit-text-fill-color: var(--ms-green);
}

.ms-plan-card__tax {
  font-size: 13px;
  color: var(--ms-text-muted);
  text-align: center;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px dashed var(--ms-border-light);
}

.ms-plan-card__features {
  font-size: 14px;
  margin-top: 0.5rem;
  width: max-content;
  margin: auto;
}

.ms-plan-card__features li {
  padding: 0.375rem 0;
  padding-left: 1.75rem;
  position: relative;
  line-height: 1.6;
  width: max-content;
}

.ms-plan-card__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 16px;
  height: 16px;
  background: var(--ms-green);
  border-radius: 50%;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask-size: 10px;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  -webkit-mask-size: 10px;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
}

.ms-plan-card__note {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ms-border-light);
  font-size: 13px;
  color: var(--ms-text-muted);
}

/* Price cards grid */
.ms-price-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.ms-price-cards--2col {
  grid-template-columns: repeat(2, 1fr);
  max-width: 700px;
}

.ms-price-cards--1col {
  grid-template-columns: 1fr;
  max-width: 400px;
}

@media (max-width: 768px) {
  .ms-price-cards {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }

  .ms-price-cards--2col {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
}

/* ==========================================================================
   Price Table
   ========================================================================== */
.ms-price-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ms-price-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ms-white-pure);
  border: 3px solid var(--ms-green);
}

.ms-price-table th,
.ms-price-table td {
  padding: 1rem;
  border: 1px solid var(--ms-border-light);
  text-align: center;
  vertical-align: middle;
}

.ms-price-table thead th {
  background: var(--ms-green);
  color: var(--ms-white-pure);
  font-weight: 700;
  font-size: 14px;
}

.ms-price-table tbody td:first-child {
  text-align: left;
  background: var(--ms-bg-light);
}

.ms-price-table tbody td:first-child strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: var(--ms-green);
}

.ms-price-table tbody td:first-child span {
  font-size: 13px;
  color: var(--ms-text-light);
}

.ms-price-table tbody td strong {
  font-size: 18px;
  color: var(--ms-green);
}

.ms-price-table tbody td small {
  display: block;
  font-size: 13px;
  color: var(--ms-text-muted);
}

.ms-price-table__badge {
  display: inline-block;
  font-size: 11px;
  padding: 0.125rem 0.5rem;
  background: var(--ms-green);
  color: var(--ms-white-pure);
  border-radius: 2px;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.ms-price-table__highlight {
  background: var(--ms-bg-green);
}

@media (max-width: 768px) {
  .ms-price-table {
    font-size: var(--ms-font-size-small);
  }

  .ms-price-table th,
  .ms-price-table td {
    padding: 0.75rem 0.5rem;
  }
}

/* ==========================================================================
   Price Section
   ========================================================================== */
.ms-price-section {
  padding: var(--ms-section-padding) 0;
}

.ms-price-section--alt {
  background: var(--ms-bg-gray);
}

.ms-price-section__inner {
  max-width: var(--ms-inner-width);
  margin: 0 auto;
  padding: 0 var(--ms-inner-padding);
}

.ms-price-section__lead {
  text-align: center;
  font-size: 17px;
  color: var(--ms-text-light);
  margin-bottom: 2rem;
  letter-spacing: var(--ms-letter-spacing);
}

.ms-price-section__badges {
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.ms-price-section__badges .ms-plan-card__badge {
  position: static;
  transform: none;
}

.ms-price-section__note {
  text-align: center;
  font-size: 13px;
  color: var(--ms-text-muted);
  margin-top: 1.5rem;
}

.ms-price-section__tip {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--ms-green);
  padding: 0.875rem 1.5rem;
  background: linear-gradient(135deg, rgba(246, 241, 147, 0.15), rgba(246, 241, 147, 0.25));
  margin-bottom: 2rem;
  border-radius: var(--ms-radius-md);
  border: 1px solid rgba(246, 241, 147, 0.3);
}

/* ==========================================================================
   Price Other (Admission, etc.)
   ========================================================================== */
.ms-price-other__list {
  max-width: 600px;
  margin: 0 auto;
}

.ms-price-other__item {
  display: flex;
  gap: 2rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--ms-border-light);
}

.ms-price-other__item:first-child {
  border-top: 1px solid var(--ms-border-light);
}

.ms-price-other__item dt {
  flex-shrink: 0;
  width: 100px;
  font-weight: 700;
  font-size: 15px;
}

.ms-price-other__item dd {
  font-size: 15px;
  line-height: 1.6;
}

.ms-price-other__item dd strong {
  font-size: 18px;
  color: var(--ms-green);
}

.ms-price-other__item dd small {
  display: block;
  font-size: 13px;
  color: var(--ms-text-muted);
  margin-top: 0.25rem;
}

.ms-price-other__campaign {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ms-price-other__campaign-badge {
  display: inline-block;
  background: #e53e3e;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
}

.ms-price-other__campaign s {
  color: var(--ms-text-muted);
  font-size: 15px;
}

@media (max-width: 480px) {
  .ms-price-other__item {
    flex-direction: column;
    gap: 0.5rem;
  }

  .ms-price-other__item dt {
    width: auto;
  }
}

/* ==========================================================================
   Payment Methods
   ========================================================================== */
.ms-payment-methods {
  max-width: 600px;
  margin: 0 auto;
}

.ms-payment-methods__list {
  display: flex !important;
  justify-content: center !important;
  gap: 1rem !important;
  flex-wrap: wrap;
  padding-left: 0 !important;
  list-style: none !important;
  text-align: center;
}

.ms-payment-methods li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--ms-bg-green);
  border: 1px solid var(--ms-green);
  border-radius: 100px;
  font-size: 15px;
}

.ms-payment-methods strong {
  font-weight: 700;
  color: var(--ms-green);
}

/* ==========================================================================
   Notes
   ========================================================================== */
.ms-notes {
  max-width: 600px;
  margin: 0 auto;
}

.ms-notes li {
  padding: 0.5rem 0 0.5rem 1.5rem;
  font-size: 15px;
  position: relative;
  color: var(--ms-text-light);
}

.ms-notes li::before {
  content: '\30FB';
  position: absolute;
  left: 0;
}

/* ==========================================================================
   Voice Card (Testimonials)
   ========================================================================== */
.ms-voice-card {
  background: var(--ms-white-pure);
  padding: 2rem 2rem 1.5rem;
  border-radius: var(--ms-radius-lg);
  border: none;
  border-top: 3px solid var(--ms-green);
  box-shadow: none;
  transition: none;
  position: relative;
  display: flex;
  flex-direction: column;
}

.ms-voice-card::before {
  content: '\201C';
  position: absolute;
  top: -0.25rem;
  left: 0.75rem;
  font-size: 5rem;
  line-height: 1;
  color: var(--ms-green);
  opacity: 0.08;
  font-family: Georgia, serif;
  pointer-events: none;
}

.ms-voice-card:hover {
  box-shadow: none;
}

.ms-voice-card__rating {
  margin-bottom: 0.75rem;
}

.ms-voice-card__star {
  color: var(--ms-star-color);
  font-size: 18px;
  letter-spacing: 0.125rem;
}

.ms-voice-card__title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--ms-dark-green);
  letter-spacing: 0.02em;
}

.ms-voice-card__text {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: auto;
  color: var(--ms-text);
  flex: 1;
}

.ms-voice-card__author {
  font-size: 13px;
  color: var(--ms-text-muted);
  text-align: right;
  font-weight: 500;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--ms-border-light);
  position: relative;
  padding-left: 1.5rem;
}

.ms-voice-card__author::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--ms-text-muted);
}

.ms-voice-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

@media (max-width: 768px) {
  .ms-voice-list {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .ms-voice-card {
    padding: 1.75rem;
  }
}

/* ==========================================================================
   Access Section
   ========================================================================== */
.ms-access {
  padding: var(--ms-section-padding) var(--ms-inner-padding);
  background: var(--ms-white-pure);
}

.ms-access__inner {
  max-width: var(--ms-inner-width);
  margin: 0 auto;
}

.ms-access__content {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: stretch;
  border: 3px solid var(--ms-green);
  border-radius: var(--ms-radius-xl);
  overflow: hidden;
  background: var(--ms-white-pure);
}

.ms-access__map {
  min-height: 300px;
  padding: 1.5rem;
  overflow: hidden;
  transition: none;
}

.ms-access__map iframe {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border: 0;
  border-radius: var(--ms-radius-md);
}

.ms-access__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.25rem;
  font-size: var(--ms-font-size-body);
  border-left: 1px solid var(--ms-border-light);
  transition: none;
}

.ms-access__station {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 18px;
  margin-bottom: 1.5rem;
  color: var(--ms-dark-green);
  font-weight: 700;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--ms-lime);
}

.ms-access__detail {
  font-size: 15px;
  margin-bottom: 1.5rem;
}

.ms-access__detail dt {
  font-weight: 700;
  color: var(--ms-text-light);
  font-size: 13px;
  margin-top: 1rem;
}

.ms-access__detail dt:first-child {
  margin-top: 0;
}

.ms-access__detail dd {
  margin-top: 0.25rem;
  line-height: 1.8;
}

.ms-access__map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
  font-size: 13px;
  color: var(--ms-green);
  text-decoration: none;
  font-weight: 500;
}

.ms-access__map-link:hover {
  text-decoration: underline;
}

.ms-access__map-link svg {
  flex-shrink: 0;
}

.ms-access__note {
  font-size: 13px;
  color: var(--ms-text-light);
}

@media (max-width: 768px) {
  .ms-access__content {
    grid-template-columns: 1fr;
  }

  .ms-access__info {
    border-left: none;
    border-top: 1px solid var(--ms-border-light);
  }
}

/* ==========================================================================
   Access Route (Directions)
   ========================================================================== */
.ms-access-route__steps {
  max-width: 800px;
  margin: 0 auto;
}

.ms-access-route__step {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--ms-border-light);
  align-items: center;
}

.ms-access-route__step:last-child {
  border-bottom: none;
}

.ms-access-route__step-image {
  width: 100%;
  border-radius: var(--ms-radius-md);
  overflow: hidden;
}

.ms-access-route__step-text {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.ms-access-route__step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--ms-green);
  color: var(--ms-white-pure);
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
  border-radius: var(--ms-radius-sm);
}

.ms-access-route__step-text p {
  font-size: 1rem;
  line-height: 1.8;
  padding-top: 0.25rem;
}

@media (max-width: 768px) {
  .ms-access-route__step {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .ms-access-route__step-image {
    max-width: 200px;
  }
}

/* ==========================================================================
   FAQ Preview (Top)
   ========================================================================== */
/* TOPページ: セクション全体として使う場合 */
section.ms-faq-preview {
  padding: var(--ms-section-padding) var(--ms-inner-padding);
  background: var(--ms-bg-gray);
}

.ms-faq-preview__inner {
  max-width: 800px;
  margin: 0 auto;
}

.ms-faq-preview__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0;
}

/* PRICEページ: セクション内で使う場合 */
div.ms-faq-preview {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* 共通: FAQアイテムカードスタイル */
.ms-faq-preview__item {
  background: var(--ms-white-pure);
  border: 3px solid var(--ms-green);
  border-radius: var(--ms-radius-lg);
  overflow: hidden;
}

.ms-faq-preview__item dt {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ms-green);
  padding: 1.125rem 1.25rem 1.125rem 3.5rem;
  position: relative;
  margin: 0;
}

.ms-faq-preview__item dt::before {
  content: 'Q';
  display: block;
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 1.75rem;
  line-height: 1.75rem;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  background: var(--ms-green);
  color: var(--ms-white-pure);
  border-radius: var(--ms-radius-sm);
}

.ms-faq-preview__item dd {
  font-size: 15px;
  color: var(--ms-text-light);
  line-height: var(--ms-line-height);
  padding: 1.125rem 1.25rem 1.125rem 3.5rem;
  border-top: 1px dashed var(--ms-border-light);
  margin: 0;
  position: relative;
}

.ms-faq-preview__item dd::before {
  content: 'A';
  display: block;
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 1.75rem;
  line-height: 1.75rem;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  background: var(--ms-pink);
  color: var(--ms-white-pure);
  border-radius: var(--ms-radius-sm);
}

.ms-faq-preview__cta {
  text-align: center;
  margin-top: 2rem;
}

.ms-faq-preview__cta .ms-btn {
  border-radius: var(--ms-radius-full);
  font-size: 15px;
  padding: 0.75rem 2.5rem;
}

/* ==========================================================================
   FAQ (Full page)
   ========================================================================== */
.ms-faq__list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ms-faq__item {
  background: var(--ms-white-pure);
  border: 3px solid var(--ms-green);
  overflow: hidden;
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-sm);
  transition: var(--ms-transition);
}

.ms-faq__item:hover {
  box-shadow: none;
}

.ms-faq__question {
  padding: 1.375rem 1.75rem;
  font-weight: 700;
  position: relative;
  padding-left: 4rem;
  letter-spacing: 0.02em;
  color: var(--ms-green);
  font-size: 1rem;
}

.ms-faq__question::before {
  content: 'Q';
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  background: linear-gradient(135deg, var(--ms-green), var(--ms-green-light));
  color: var(--ms-white-pure);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  border-radius: var(--ms-radius-sm);
  box-shadow: none;
}

.ms-faq__answer {
  padding: 0 1.75rem 1.375rem 4rem;
  color: var(--ms-text-light);
  font-size: 15px;
  position: relative;
  line-height: var(--ms-line-height);
}

.ms-faq__answer::before {
  content: 'A';
  position: absolute;
  left: 1.25rem;
  top: 0;
  width: 2rem;
  height: 2rem;
  background: linear-gradient(135deg, #c4567a, var(--ms-pink));
  color: var(--ms-white-pure);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  border-radius: var(--ms-radius-sm);
  box-shadow: none;
}

.ms-faq__category {
  margin-bottom: 3.5rem;
}

.ms-faq__category:last-child {
  margin-bottom: 0;
}

.ms-faq__category-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 1.75rem;
  padding-bottom: 0.875rem;
  border-bottom: 3px solid var(--ms-green);
  color: var(--ms-green);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   SWELL Block: FAQ — デザイン統一
   ========================================================================== */

/* カテゴリ見出し h3 — セパレーター兼用 */
.post_content .ms-section__inner > h3.wp-block-heading {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ms-green) !important;
  margin: 0 !important;
  padding: 2rem 0 1rem !important;
  border: none !important;
  border-top: 1px solid var(--ms-border-light) !important;
  background: none !important;
  position: static !important;
  letter-spacing: 0.04em;
}

.post_content .ms-section__inner > h3.wp-block-heading:first-child {
  border-top: none !important;
  padding-top: 0 !important;
}

/* FAQ dl 余白リセット */
.post_content .swell-block-faq {
  margin-bottom: 0;
}

/* FAQ 項目 — カードスタイル */
.post_content .swell-block-faq .swell-block-faq__item {
  background: var(--ms-white-pure);
  border: 3px solid var(--ms-green);
  border-radius: var(--ms-radius-lg);
  overflow: hidden;
}

.post_content .swell-block-faq .swell-block-faq__item + .swell-block-faq__item {
  margin-top: 0.75rem;
}

/* Q — 質問テキスト */
.post_content .swell-block-faq .faq_q {
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--ms-green);
  padding: 1.125rem 1.25rem 1.125rem 3.5rem !important;
}

/* Q マーカー — 緑塗り */
.post_content .swell-block-faq .faq_q::before {
  background: var(--ms-green) !important;
  color: var(--ms-white-pure) !important;
  font-weight: 700;
  font-size: 0.8125rem !important;
  border-radius: var(--ms-radius-sm) !important;
  box-shadow: none !important;
  top: 1rem !important;
  left: 1rem !important;
  width: 1.75rem !important;
  line-height: 1.75rem !important;
}

/* A — 回答テキスト */
.post_content .swell-block-faq .faq_a {
  color: var(--ms-text-light);
  font-size: 0.9375rem;
  line-height: var(--ms-line-height);
  border-top: 1px dashed var(--ms-border-light);
  padding: 1.125rem 1.25rem 1.125rem 3.5rem !important;
}

/* A マーカー — ピンク塗り */
.post_content .swell-block-faq .faq_a::before {
  background: var(--ms-pink) !important;
  color: var(--ms-white-pure) !important;
  font-weight: 700;
  font-size: 0.8125rem !important;
  border-radius: var(--ms-radius-sm) !important;
  box-shadow: none !important;
  top: 1rem !important;
  left: 1rem !important;
  width: 1.75rem !important;
  line-height: 1.75rem !important;
}

/* border style — 同じカードスタイルに統一 */
.post_content .swell-block-faq.is-style-faq-border .swell-block-faq__item {
  border: 3px solid var(--ms-green);
  border-radius: var(--ms-radius-lg);
  padding: 0 !important;
}

.post_content .swell-block-faq.is-style-faq-border .swell-block-faq__item + .swell-block-faq__item {
  margin-top: 0.75rem;
  padding-top: 0 !important;
}

/* hover 無効化 */
.post_content .swell-block-faq .swell-block-faq__item:hover {
  transform: none;
}

/* セパレーター — 薄いグレーライン */
.post_content .ms-section__inner > hr.wp-block-separator {
  border: none !important;
  border-top: 1px solid var(--ms-border-light) !important;
  opacity: 1;
  margin: 2.5rem 0 !important;
}

/* 「その他のご質問」h2 — 控えめなサブヘッド */
.post_content .ms-section__inner > h2.wp-block-heading:not(.ms-section-title):not(.ms-faq__category-title) {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 0 0.5rem !important;
  padding: 0 !important;
  border: none !important;
  color: var(--ms-green) !important;
  letter-spacing: 0.02em;
  background: none !important;
  position: static !important;
  line-height: 1.4 !important;
  text-align: center;
}

/* 「その他」セクション中央寄せテキスト */
.post_content .ms-section__inner > p.has-text-align-center {
  color: var(--ms-text-light);
  font-size: 14px;
  margin-bottom: 0;
}

/* ==========================================================================
   SWELL Block: Accordion — デザイン統一
   ========================================================================== */
.post_content .swell-block-accordion__title {
  background: var(--ms-bg-light);
  color: var(--ms-text);
  font-weight: 700;
}

.post_content .swell-block-accordion.is-style-main .swell-block-accordion__title {
  background-color: var(--ms-green);
}

.post_content .swell-block-accordion.is-style-main .swell-block-accordion__body {
  border-color: var(--ms-green);
}

.post_content .swell-block-accordion.is-style-border .swell-block-accordion__item {
  border-color: var(--ms-border);
}

.post_content .swell-block-accordion.is-style-border .swell-block-accordion__body,
.post_content .swell-block-accordion.is-style-simple .swell-block-accordion__body {
  border-top-color: var(--ms-border-light);
}

.post_content .swell-block-accordion.is-style-simple > .swell-block-accordion__item {
  border-color: var(--ms-border);
}

/* ==========================================================================
   SWELL Block: ブロックエディター内 h3 — カスタムテンプレート以外用
   ========================================================================== */
.post_content .ms-section__inner h3:not(.wp-block-heading):not(.ms-security__title):not(.ms-equipment__category-title):not(.ms-plan-card__name):not(.ms-facility-hours__title):not(.ms-price-preview__name) {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ms-green) !important;
  margin: 2rem 0 1.25rem !important;
  padding: 0 0 0 1rem !important;
  border: none !important;
  border-left: 3px solid var(--ms-green) !important;
  background: none !important;
  position: static !important;
}

/* SWELL ボタンブロック — デザイン統一 */
.post_content .ms-section__inner .swell-block-button,
.post_content .ms-section__inner .wp-block-buttons {
  margin-top: 2rem;
}

.post_content .swell-block-button a,
.post_content .ms-section__inner .wp-block-button__link {
  display: inline-block;
  background: var(--ms-lime) !important;
  color: var(--ms-dark-green) !important;
  border: 2px solid var(--ms-dark-green) !important;
  border-radius: var(--ms-radius-full) !important;
  font-size: 15px;
  font-weight: 700;
  padding: 0.75rem 2.5rem;
  text-decoration: none !important;
  text-decoration: none;
  transition: var(--ms-transition);
}

.post_content .swell-block-button a:hover,
.post_content .ms-section__inner .wp-block-button__link:hover,
.post_content .swell-block-button a:hover {
  background: var(--ms-dark-green) !important;
  border-color: var(--ms-dark-green) !important;
  color: var(--ms-white-pure) !important;
}

/* ==========================================================================
   News List
   ========================================================================== */
.ms-news-list {
  max-width: 800px;
  margin: 0 auto;
}

.ms-news-list__item {
  display: flex;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--ms-border-light);
  transition: var(--ms-transition);
}

.ms-news-list__item:hover {
  padding-left: 0;
}

.ms-news-list__item:first-child {
  padding-top: 0;
}

.ms-news-list__date {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--ms-text-muted);
  font-weight: 500;
  letter-spacing: 0.03em;
  padding-top: 0.125rem;
}

.ms-news-list__title {
  font-size: 15px;
  line-height: 1.6;
}

.ms-news-list__title a {
  color: var(--ms-text);
  text-decoration: none;
  transition: var(--ms-transition);
}

.ms-news-list__title a:hover {
  color: var(--ms-green);
}

.ms-news-list__cta {
  text-align: center;
  margin-top: 2.5rem;
}

.ms-news-list__empty {
  text-align: center;
  color: var(--ms-text-muted);
  padding: 3rem 0;
}

@media (max-width: 768px) {
  .ms-news-list__item {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.ms-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 3rem;
  flex-wrap: wrap;
}

.ms-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 3px solid var(--ms-border);
  color: var(--ms-text);
  transition: var(--ms-transition);
}

.ms-pagination .page-numbers.current {
  background: var(--ms-green);
  color: var(--ms-white-pure);
  border-color: var(--ms-green);
}

.ms-pagination .page-numbers:hover:not(.current):not(.dots) {
  background: var(--ms-bg-light);
  border-color: var(--ms-green);
  color: var(--ms-green);
}

.ms-pagination .page-numbers.dots {
  border: none;
  pointer-events: none;
}

/* ==========================================================================
   Contact Flow (Steps for contacting)
   ========================================================================== */
.ms-contact-flow__lead {
  text-align: center;
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 2rem;
}

.ms-contact-flow {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 700px;
  margin: 0 auto;
}

.ms-contact-flow__step {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  background: var(--ms-white-pure);
  border: 3px solid var(--ms-green);
  border-radius: var(--ms-radius-lg);
  transition: var(--ms-transition);
  line-height: var(--ms-line-height) !important;
  margin: 0 !important;
}

.ms-contact-flow__step:hover {
  transform: none;
}

.ms-contact-flow__step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  background: var(--ms-green);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  border-radius: var(--ms-radius-md);
}

.post_content .ms-contact-flow__step-content h3 {
  font-size: var(--ms-font-size-h3) !important;
  font-weight: var(--ms-heading-weight) !important;
  color: var(--ms-dark-green) !important;
  margin: 0 0 0.375rem 0 !important;
  padding: 0 !important;
  border: none !important;
  line-height: var(--ms-line-height-heading) !important;
}

.ms-contact-flow__step-content p {
  font-size: 15px;
  color: var(--ms-text-light);
  line-height: 1.6;
}

.ms-contact-flow__faq-link {
  text-align: center;
  margin-bottom: 2rem;
  padding: 1rem 1.5rem;
  background: var(--ms-bg-light);
  border-radius: var(--ms-radius-md);
}

.ms-contact-flow__faq-link p {
  font-size: 15px;
  margin: 0;
}

.ms-contact-flow__faq-link a {
  color: var(--ms-green);
  font-weight: 500;
}

.ms-contact-flow__methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.ms-contact-flow__method {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.25rem;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border: 3px solid var(--ms-green);
  background: var(--ms-white-pure);
  color: var(--ms-dark-green);
  border-radius: var(--ms-radius-lg);
  position: relative;
  box-shadow: var(--ms-shadow-sm);
}

.ms-contact-flow__method:hover {
  background: var(--ms-dark-green);
  color: var(--ms-white-pure);
  opacity: 1;
  transform: translateY(-4px);
  box-shadow: none;
}

.ms-contact-flow__method-name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.ms-contact-flow__method-desc {
  font-size: 13px;
  opacity: 0.9;
}

.ms-contact-flow__badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: linear-gradient(135deg, #c4567a, var(--ms-pink));
  color: var(--ms-white-pure);
  font-size: 11px;
  font-weight: 800;
  padding: 0.3rem 0.625rem;
  border-radius: var(--ms-radius-sm);
  box-shadow: none;
  letter-spacing: 0.03em;
}

/* ==========================================================================
   Contact Tab (LINE / Mail switcher)
   ========================================================================== */
.ms-contact-tab {
  max-width: 800px;
  margin: 0 auto;
}

.ms-contact-tab__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.ms-contact-tab__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem;
  background: var(--ms-lime);
  border: 3px solid var(--ms-dark-green);
  border-radius: var(--ms-radius-lg);
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  color: var(--ms-dark-green);
  transition: var(--ms-transition);
  text-decoration: none;
}

.ms-contact-tab__btn:hover {
  background: var(--ms-dark-green);
  border-color: var(--ms-dark-green);
  color: var(--ms-white-pure);
}

.ms-contact-tab__btn:hover .ms-contact-tab__badge {
  background: var(--ms-lime);
  color: var(--ms-green);
}

.ms-contact-tab__btn.is-active {
  background: var(--ms-dark-green);
  border-color: var(--ms-dark-green);
  color: var(--ms-white-pure);
}

.ms-contact-tab__btn.is-active .ms-contact-tab__badge {
  background: var(--ms-lime);
  color: var(--ms-green);
}

.ms-contact-tab__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 0.5rem;
}

.ms-contact-tab__btn--line .ms-contact-tab__icon {
  fill: currentColor;
  stroke: none;
}

.ms-contact-tab__name {
  font-size: 18px;
  font-weight: 700;
}

.ms-contact-tab__desc {
  font-size: 13px;
  opacity: 0.9;
}

.ms-contact-tab__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ms-white-pure);
  background: var(--ms-green);
  margin-top: 0.5rem;
  padding: 0.1875rem 0.625rem;
  border-radius: var(--ms-radius-full);
}

.ms-contact-tab__panel {
  display: none;
}

.ms-contact-tab__panel.is-active {
  display: block;
}

/* LINE panel */
.ms-contact-line {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  background: var(--ms-white-pure);
  padding: 2.5rem;
  border-radius: var(--ms-radius-lg);
  border: 3px solid var(--ms-green);
}

.ms-contact-line__qr {
  flex-shrink: 0;
  text-align: center;
}

.ms-contact-line__qr img {
  width: 180px;
  height: 180px;
  border-radius: var(--ms-radius-md);
  border: 3px solid var(--ms-green);
}

.ms-contact-line__qr-note {
  font-size: 12px;
  color: var(--ms-text-muted);
  margin-top: 0.5rem;
}

.ms-contact-line__info h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--ms-green);
  margin-bottom: 0.75rem;
}

.ms-contact-line__info > p {
  font-size: 15px;
  color: var(--ms-text-light);
  line-height: var(--ms-line-height);
  margin-bottom: 1rem;
}

.ms-contact-line__merits {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ms-contact-line__merits li {
  font-size: 14px;
  font-weight: 600;
  color: var(--ms-text);
  padding-left: 1.5rem;
  position: relative;
}

.ms-contact-line__merits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--ms-green);
  font-weight: 800;
}

@media (max-width: 768px) {
  .ms-contact-line {
    flex-direction: column;
    padding: 2rem 1.5rem;
    text-align: center;
  }

  .ms-contact-line__merits {
    align-items: center;
  }
}

/* ==========================================================================
   Contact Form (CF7 Integration)
   ========================================================================== */
.ms-contact-form {
  background: var(--ms-white-pure);
  padding: 3rem;
  border-radius: var(--ms-radius-lg);
  border: 3px solid var(--ms-green);
}

.ms-contact-form__group {
  margin-bottom: 1.5rem;
}

.ms-contact-form__label {
  display: block;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.ms-contact-form__label .required,
.ms-required {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-size: 11px;
  font-weight: 700;
  background: var(--ms-green);
  color: var(--ms-white-pure);
  margin-left: 0.5rem;
  vertical-align: middle;
  border-radius: 2px;
}

/* CF7 form elements within .ms-contact-form */
.ms-contact-form input[type="text"],
.ms-contact-form input[type="email"],
.ms-contact-form input[type="tel"],
.ms-contact-form select,
.ms-contact-form textarea {
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  border: 1px solid var(--ms-bg-gray);
  background: var(--ms-bg-light);
  transition: var(--ms-transition);
  border-radius: var(--ms-radius-md);
  min-height: 48px;
}

.ms-contact-form textarea {
  resize: vertical;
  min-height: 140px;
}

.ms-contact-form input:focus,
.ms-contact-form select:focus,
.ms-contact-form textarea:focus {
  outline: none;
  border-color: var(--ms-green);
  box-shadow: none;
  background: var(--ms-white-pure);
  transform: translateY(-1px);
}

/* Phase 2-4: CF7 Validation & State Styles */
.ms-contact-form .wpcf7-not-valid {
  border-color: #dc2626 !important;
  box-shadow: none;
  background: #fef2f2;
}

.ms-contact-form .wpcf7-not-valid-tip {
  color: #dc2626;
  font-size: 13px;
  margin-top: 0.375rem;
  display: block;
}

/* Submit button loading state */
.ms-contact-form .wpcf7-form.submitting .wpcf7-submit {
  opacity: 0.7;
  pointer-events: none;
  position: relative;
  color: transparent;
}

.ms-contact-form .wpcf7-form.submitting .wpcf7-submit::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 3px solid var(--ms-white-pure);
  border-top-color: transparent;
  border-radius: 50%;
  animation: ms-spin 0.8s linear infinite;
}

@keyframes ms-spin {
  to { transform: rotate(360deg); }
}

/* Success / Error response messages */
.ms-contact-form .wpcf7-response-output {
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  border-radius: var(--ms-radius-md);
  font-size: 15px;
  text-align: center;
  border: none;
}

.ms-contact-form .wpcf7-form.sent .wpcf7-response-output {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.ms-contact-form .wpcf7-form.failed .wpcf7-response-output,
.ms-contact-form .wpcf7-form.aborted .wpcf7-response-output,
.ms-contact-form .wpcf7-form.invalid .wpcf7-response-output {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.ms-contact-form .wpcf7-mail-sent-ok {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  padding: 1rem 1.25rem;
  border-radius: var(--ms-radius-md);
  text-align: center;
}

.ms-contact-form__privacy {
  margin: 2rem 0;
  text-align: center;
}

.ms-contact-form__privacy label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 15px;
  cursor: pointer;
}

.ms-contact-form__privacy input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--ms-green);
}

.ms-contact-form__submit {
  text-align: center;
}

.ms-contact-form__submit .wpcf7-spinner {
  display: none;
}

.ms-contact-form__note {
  font-size: 13px;
  color: var(--ms-text-muted);
  text-align: center;
  margin-top: 1.5rem;
}

@media (max-width: 768px) {
  .ms-contact-form {
    padding: 1.5rem;
  }
}

/* ==========================================================================
   Price Preview (Top page)
   ========================================================================== */
.ms-price-preview__inner {
  margin: 0 auto;
}

.ms-price-preview__main {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.ms-price-preview__lead {
  text-align: center;
  font-size: var(--ms-font-size-body);
  color: var(--ms-text-light);
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.ms-price-preview__compare {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 2rem;
  padding: 1rem;
  background: var(--ms-bg-light);
  border-radius: var(--ms-radius-sm);
}

.ms-price-preview__compare strong {
  color: #c03030;
  font-size: 18px;
  font-weight: 800;
}

.ms-price-preview__main {
  background: var(--ms-green);
  color: var(--ms-white-pure);
  padding: 2.5rem;
  text-align: center;
  margin-bottom: 2rem;
  border-radius: var(--ms-radius-xl);
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.ms-price-preview__main::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(246, 241, 147, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.ms-price-preview__label {
  display: inline-block;
  background: var(--ms-lime);
  color: var(--ms-dark-green);
  font-size: 12px;
  font-weight: 800;
  padding: 0.375rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: 100px;
  position: relative;
  z-index: 1;
}

.ms-price-preview__name {
  font-size: 26px;
  font-weight: var(--ms-heading-weight);
  margin-bottom: 0.625rem;
  position: relative;
  z-index: 1;
  color: var(--ms-white-pure);
}

.ms-price-preview__point {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}

.ms-price-preview__point strong {
  color: var(--ms-lime);
  font-weight: 800;
}

.ms-price-preview__amount {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  display: inline;
  background-image: linear-gradient(var(--ms-lime), var(--ms-lime));
  background-size: 100% 20%;
  background-repeat: no-repeat;
  background-position: left bottom;
}

.ms-price-preview__amount span {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 10px;
}

.ms-price-preview__amount small {
  font-size: 13px;
  opacity: 0.9;
}

.ms-price-preview__note {
  font-size: 13px;
  opacity: 0.85;
  margin-top: 0.5rem;
  position: relative;
  z-index: 1;
}

.ms-price-preview__others {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.ms-price-preview__other {
  padding: 2rem 1.5rem;
  background: var(--ms-white-pure);
  border: 3px solid var(--ms-green);
  text-align: center;
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-sm);
  transition: var(--ms-transition);
  position: relative;
}

/* 先頭カード（プレミアム）を特別デザインに */
.ms-price-preview__other:first-child {
  border-color: var(--ms-green);
  background: var(--ms-white-pure);
}

.ms-price-preview__other:first-child::before {
  content: 'PREMIUM';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ms-green);
  color: var(--ms-white-pure);
  font-size: 11px;
  font-weight: 800;
  padding: 0.25rem 1rem;
  border-radius: 100px;
  letter-spacing: 0.1em;
}

.ms-price-preview__other:hover {
  box-shadow: var(--ms-shadow-md);
  transform: translateY(-2px);
}

.ms-price-preview__other h4 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--ms-green);
  letter-spacing: 0.03em;
}

.ms-price-preview__other p {
  font-size: 1rem;
  color: var(--ms-text-light);
}

.ms-price-preview__other-price {
  font-weight: 800;
  color: var(--ms-dark-green);
  margin-top: 0.75rem;
  white-space: nowrap;
  font-size: 18px;
  display: inline;
  background-image: linear-gradient(var(--ms-lime), var(--ms-lime));
  background-size: 100% 20%;
  background-repeat: no-repeat;
  background-position: left bottom;
}

.ms-price-preview__other-price small {
  font-size: 13px;
  font-weight: 500;
  color: var(--ms-text-light);
}

.ms-price-preview__admission {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--ms-dark-green);
  background: rgba(19, 84, 50, 0.06);
  padding: 0.75rem 1.5rem;
  border-radius: var(--ms-radius-md);
  margin-bottom: 1.5rem;
}

.ms-price-preview__other-target {
  text-align: center;
  margin-bottom: 1.5rem;
}

.ms-price-preview__cta {
  text-align: center;
}

@media (max-width: 768px) {
  .ms-price-preview__others {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Promo Banner (Sidebar Widget)
   ========================================================================== */
.ms-promo-banner {
  display: block;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(135deg, var(--ms-green), #008f66);
  color: var(--ms-white-pure);
  border-radius: var(--ms-radius-lg);
  padding: 1.5rem 1.25rem;
  transition: var(--ms-transition);
  box-shadow: none;
}

.ms-promo-banner:hover {
  transform: translateY(-2px);
  box-shadow: none;
  color: var(--ms-white-pure);
}

.ms-promo-banner__badge {
  display: inline-block;
  background: var(--ms-lime);
  color: var(--ms-green);
  font-size: 12px;
  font-weight: 700;
  padding: 0.25rem 0.875rem;
  border-radius: var(--ms-radius-full);
  margin-bottom: 0.75rem;
}

.ms-promo-banner__main {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.ms-promo-banner__main strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--ms-lime);
}

.ms-promo-banner__sub {
  display: block;
  font-size: 13px;
  opacity: 0.8;
  text-decoration: line-through;
}

/* ==========================================================================
   Facility Preview (Top page gallery)
   ========================================================================== */
.ms-facility-preview__features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
}

.ms-facility-preview__features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ms-white-pure);
  padding: 0.625rem 1.25rem;
  border-radius: 100px;
  box-shadow: var(--ms-shadow-sm);
  border: 1px solid var(--ms-green);
  transition: var(--ms-transition);
}

.ms-facility-preview__features li:hover {
  box-shadow: var(--ms-shadow-md);
  transform: translateY(-1px);
}

.ms-facility-preview__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--ms-green);
}

.ms-facility-preview__features span {
  font-size: 15px;
  font-weight: 500;
}

.ms-facility-preview__cta {
  text-align: center;
}

.ms-facility-preview__note {
  text-align: center;
  font-size: 14px;
  color: var(--ms-text-muted);
  margin-top: 24px;
  margin-bottom: 16px;
  line-height: 1.6;
}

/* ---------- System Preview (3つの仕組み / FEATURES内) ---------- */
.ms-system-preview {
  margin-top: 3rem;
  padding: 2rem;
  background: var(--ms-bg-light, #f8faf8);
  border-radius: 8px;
  border: 1px solid var(--ms-border, #e0e8e0);
}

.ms-system-preview__title {
  font-size: 18px;
  margin-bottom: 1.5rem;
  text-align: center;
}

.ms-system-preview__title strong {
  color: var(--ms-green, #00AA7C);
}

.ms-system-preview__items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ms-system-preview__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.ms-system-preview__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  background: var(--ms-green, #00AA7C);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 50%;
}

.ms-system-preview__item strong {
  display: block;
  font-size: 15px;
}

.ms-system-preview__item p {
  font-size: 13px;
  color: var(--ms-text-light, #666);
  margin-top: 0.25rem;
}

.ms-system-preview .ms-link-arrow {
  display: block;
  text-align: center;
  margin-top: 1.5rem;
}

@media (max-width: 768px) {
  .ms-facility-preview__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .ms-facility-preview__features li {
    justify-content: center;
  }

  .ms-facility-preview__features li:hover {
    box-shadow: none;
    transform: none;
  }
}

/* ==========================================================================
   Founder / Story Section
   ========================================================================== */
.ms-founder__content {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 3rem;
  align-items: start;
  background: var(--ms-white-pure);
  padding: 3rem;
  border-radius: var(--ms-radius-xl);
  border-top: 3px solid var(--ms-green);
  box-shadow: none;
}

.ms-founder__image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--ms-radius-xl);
}

.ms-founder__text p {
  font-size: var(--ms-font-size-body);
  margin-bottom: 1.25rem;
  line-height: 2;
  letter-spacing: var(--ms-letter-spacing);
  font-size: 15px;
}

.ms-founder__text p strong {
  color: var(--ms-dark-green);
  background-image: linear-gradient(var(--ms-lime), var(--ms-lime));
  background-size: 100% 20%;
  background-repeat: no-repeat;
  background-position: left bottom;
}

.ms-founder__lead {
  font-size: var(--ms-font-size-h3);
  font-weight: var(--ms-heading-weight);
  color: var(--ms-dark-green);
  margin-bottom: 1.5rem;
  line-height: var(--ms-line-height-heading);
}

.ms-founder__signature {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ms-border-light);
  text-align: right;
  color: var(--ms-text-light);
  font-size: 14px;
}

.ms-founder__signature strong {
  display: inline;
  font-size: 22px;
  color: var(--ms-dark-green);
  margin-top: 0.25rem;
  background-image: linear-gradient(var(--ms-lime), var(--ms-lime));
  background-size: 100% 40%;
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-bottom: 2px;
}

.ms-founder__reading {
  font-size: 12px;
  color: var(--ms-text-muted);
  margin-left: 0.5rem;
}

.ms-founder__career {
  text-align: right;
  font-size: 14px;
  color: var(--ms-text-muted);
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .ms-founder__content {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem 1.5rem;
  }

  .ms-founder__image {
    max-width: 180px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   Target Value (For Students / Parents)
   ========================================================================== */
.ms-target-value__block {
  margin-bottom: 4rem;
  border: none;
  overflow: hidden;
  border-radius: var(--ms-radius-xl);
  box-shadow: var(--ms-shadow-lg);
}

.ms-target-value__block:last-child {
  margin-bottom: 0;
}

.ms-target-value__header {
  padding: 2.5rem;
  text-align: center;
  background: var(--ms-green);
  color: var(--ms-white-pure);
}

.ms-target-value__block--parents .ms-target-value__header {
  background: var(--ms-green);
}

.ms-target-value__title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.ms-target-value__subtitle {
  font-size: 1rem;
  opacity: 0.9;
}

.ms-target-value__content {
  padding: 2.5rem;
  background: var(--ms-white-pure);
}

.ms-target-value__message {
  text-align: center;
  font-size: 18px;
  line-height: 2;
  margin-bottom: 2rem;
  color: var(--ms-text-light);
}

.ms-target-value__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.ms-target-value__list li {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--ms-bg-light);
  border: 3px solid var(--ms-border);
  border-radius: var(--ms-radius-md);
}

.ms-target-value__list strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--ms-dark-green);
}

.ms-target-value__list p {
  font-size: 14px;
  color: var(--ms-text-light);
  line-height: 1.7;
}

@media (max-width: 768px) {
  .ms-target-value__header {
    padding: 1.5rem;
  }

  .ms-target-value__title {
    font-size: var(--ms-font-size-h3);
  }

  .ms-target-value__content {
    padding: 1.5rem;
  }

  .ms-target-value__list {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Target Nav (Student / Parent navigation)
   ========================================================================== */
.ms-target-nav__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.ms-target-nav__item {
  padding: 2.5rem;
  background: var(--ms-white-pure);
  border: 3px solid var(--ms-border);
  text-align: center;
  border-radius: var(--ms-radius-xl);
  box-shadow: var(--ms-shadow-sm);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.ms-target-nav__item:hover {
  box-shadow: var(--ms-shadow-sm);
  transform: none;
}

.ms-target-nav__item--student {
  border-top: 4px solid var(--ms-dark-green);
}

.ms-target-nav__item--parent {
  border-top: 4px solid var(--ms-green);
}

.ms-target-nav__title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--ms-dark-green);
}

.ms-target-nav__desc {
  font-size: 15px;
  color: var(--ms-text-light);
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .ms-target-nav__inner {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Facility Hours Table
   ========================================================================== */
.ms-facility-hours {
  margin-bottom: 3rem;
}

.ms-facility-hours__title {
  font-size: 20px;
  font-weight: var(--ms-heading-weight);
  color: var(--ms-dark-green);
  margin-bottom: 1.5rem;
}

.ms-facility-hours__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  overflow: hidden;
  box-shadow: var(--ms-shadow-sm);
  border: 3px solid var(--ms-green);
}

.ms-facility-hours__table th,
.ms-facility-hours__table td {
  padding: 1.125rem 1rem;
  text-align: center;
  border: 1px solid var(--ms-border-light);
}

.ms-facility-hours__table th {
  background: var(--ms-bg-light);
  font-weight: 700;
  color: var(--ms-green);
}

.ms-facility-hours__table tr:first-child th {
  background: var(--ms-green);
  color: var(--ms-white-pure);
}

.ms-facility-hours__notes {
  font-size: 13px;
  color: var(--ms-text-light);
}

.ms-facility-hours__notes li {
  font-size: var(--ms-font-size-body);
  margin-bottom: 0.25rem;
}

.ms-facility-hours__notes li::before {
  content: "\203B";
  margin-right: 0.25em;
}

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

/* About Intro */
.ms-about-intro__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.ms-about-intro__lead {
  font-size: 26px;
  font-weight: var(--ms-heading-weight);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: var(--ms-green);
  letter-spacing: 0.03em;
}

.ms-about-intro__desc {
  font-size: 1rem;
  line-height: 2;
  color: var(--ms-text-light);
  letter-spacing: var(--ms-letter-spacing);
}

.ms-about-intro__image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--ms-radius-xl);
  width: 100%;
  box-shadow: var(--ms-shadow-lg);
  transition: var(--ms-transition-slow);
}

.ms-about-intro__image img:hover {
  transform: none;
  box-shadow: var(--ms-shadow-lg);
}

@media (max-width: 768px) {
  .ms-about-intro__content {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .ms-about-intro__lead {
    font-size: var(--ms-font-size-h2);
  }

  .ms-about-intro__image {
    order: -1;
  }

  .ms-about-intro__image img {
    aspect-ratio: 16 / 9;
  }

  .ms-about-difference__lead {
    text-align: left;
  }

  .ms-about-difference__lead br {
    display: none;
  }
}

/* About Difference */
.ms-about-difference__lead {
  text-align: center;
  color: var(--ms-text-light);
  font-size: var(--ms-font-size-body);
  margin-bottom: 2rem;
  line-height: 1.8;
}

.ms-about-difference__content {
  max-width: 800px;
  margin: 0 auto;
}

.ms-about-difference__note {
  font-size: 14px;
  color: var(--ms-text-light);
  line-height: 1.8;
  text-align: center;
}

.ms-about-difference__link {
  text-align: center;
  margin-top: 2rem;
}

/* ==========================================================================
   Profile Section
   ========================================================================== */
.ms-profile {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2rem;
  align-items: start;
}

.ms-profile__image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--ms-radius-md);
}

.ms-profile__name {
  font-size: 20px;
  margin-bottom: 0.5rem;
  color: var(--ms-dark-green);
}

.ms-profile__name strong {
  background-image: linear-gradient(var(--ms-lime), var(--ms-lime));
  background-size: 100% 40%;
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-bottom: 2px;
}

.ms-profile__meta {
  font-size: 14px;
  color: var(--ms-text-light);
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ms-border-light);
}

.ms-profile__text p {
  font-size: var(--ms-font-size-body);
  margin-bottom: 1rem;
  line-height: 1.8;
}

.ms-profile__link {
  margin-top: 1.5rem;
}

@media (max-width: 768px) {
  .ms-profile {
    grid-template-columns: 1fr;
  }

  .ms-profile__image {
    max-width: 150px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   Testimonials (Company page)
   ========================================================================== */
.ms-testimonials {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 700px;
  margin: 0 auto;
}

.ms-testimonial {
  padding: 1.75rem;
  background: var(--ms-white-pure);
  border-left: 4px solid var(--ms-green);
  border-radius: 0 var(--ms-radius-lg) var(--ms-radius-lg) 0;
  box-shadow: var(--ms-shadow-sm);
  transition: var(--ms-transition);
}

.ms-testimonial:hover {
  box-shadow: var(--ms-shadow-md);
  transform: translateX(4px);
}

.ms-testimonial__text {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 1rem;
}

.ms-testimonial__author {
  font-size: 13px;
  color: var(--ms-text-muted);
  text-align: right;
}

.ms-testimonials__note {
  max-width: 700px;
  margin: 1rem auto 0;
  font-size: 13px;
  color: var(--ms-text-muted);
  text-align: right;
}

/* ==========================================================================
   Habit Method Section (About page)
   ========================================================================== */
.ms-habit__lead {
  text-align: center;
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 3rem;
}

.ms-habit__list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 700px;
  margin: 0 auto 2rem;
}

.ms-habit__item {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.ms-habit__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--ms-green), var(--ms-green-light));
  color: var(--ms-white-pure);
  font-size: 20px;
  font-weight: 800;
  flex-shrink: 0;
  border-radius: var(--ms-radius-md);
  box-shadow: none;
}

.ms-habit__content h3 {
  font-size: var(--ms-font-size-h3);
  font-weight: var(--ms-heading-weight);
  margin-bottom: 0.5rem;
  color: var(--ms-dark-green);
}

.ms-habit__content p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ms-text-light);
}

.ms-habit__result {
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  padding: 2rem;
  background: var(--ms-bg-green);
  border: 3px solid var(--ms-green);
  max-width: 600px;
  margin: 0 auto;
  border-radius: var(--ms-radius-lg);
  color: var(--ms-dark-green);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .ms-habit__item {
    flex-direction: column;
    gap: 1rem;
  }
}

/* --------------------------------------------------------------------------
   Floating Campaign Banner
   -------------------------------------------------------------------------- */
.ms-floating-campaign {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--ms-green);
  color: var(--ms-white-pure);
  padding: 0.75rem 1rem;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
}

.ms-floating-campaign__inner {
  max-width: var(--ms-inner-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.ms-floating-campaign__text {
  font-size: var(--ms-font-size-body);
  margin: 0;
}

.ms-floating-campaign__text strong {
  font-weight: 700;
}

.ms-floating-campaign__text small {
  font-size: 13px;
  opacity: 0.9;
}

.ms-floating-campaign__free {
  font-size: 24px;
  font-weight: 900;
  color: var(--ms-lime);
  margin: 0 0.5rem;
}

.ms-floating-campaign__close {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--ms-white-pure);
  font-size: 24px;
  cursor: pointer;
  opacity: 0.85;
  line-height: 1;
  padding: 0.25rem;
}

.ms-floating-campaign__close:hover {
  opacity: 1;
}

/* ==========================================================================
   Responsive: Section Padding & Mobile Refinements
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    /* SP Font Scale — px固定（SWELLのroot vw縮小の影響を回避） */
    --ms-font-size-h1: 22px;
    --ms-font-size-h2: 18px;
    --ms-font-size-h3: 16px;
    --ms-font-size-body: 14px;
    --ms-font-size-small: 12px;
    --ms-section-padding: 64px;
    --ms-radius-xl: 16px;
  }

  .ms-section {
    padding: var(--ms-section-padding-sp) 0;
  }

  /* Touch-friendly button sizes */
  .ms-btn {
    min-height: 48px;
    padding: 0.875rem 1.75rem;
    font-size: var(--ms-font-size-body);
    width: 100%;
    justify-content: center;
  }

  .ms-btn--lg {
    min-height: 52px;
    padding: 1rem 2rem;
    font-size: var(--ms-font-size-body);
  }

  .ms-floating-campaign__inner {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  .ms-floating-campaign__text {
    font-size: var(--ms-font-size-small);
  }

  /* Mobile font sizes */
  .ms-page-hero {
    padding: calc(var(--ms-section-padding-sp) * 1.2) var(--ms-inner-padding);
  }

  .ms-page-hero__title {
    font-size: var(--ms-font-size-h1) !important;
  }

  .ms-page-hero__subtitle {
    font-size: var(--ms-font-size-body);
  }

  .ms-page-hero__desc {
    font-size: var(--ms-font-size-body);
  }

  .ms-page-hero__label {
    font-size: var(--ms-font-size-small);
  }

  /* Plan card mobile: no scale on featured */
  .ms-plan-card--featured {
    transform: none;
  }

  .ms-plan-card--featured:hover {
    transform: translateY(-4px);
  }

  .ms-plan-card {
    padding: 1.5rem 1.25rem;
  }

  .ms-plan-card__time {
    margin-bottom: 1rem;
  }

  .ms-plan-card__prices {
    margin-bottom: 1rem;
  }

  .ms-plan-card__tax {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .ms-plan-card__amount {
    font-size: 2rem;
  }

  .ms-plan-card--featured .ms-plan-card__amount {
    font-size: 2rem;
  }

  .ms-plan-card__price--main .ms-plan-card__price-amount strong {
    font-size: 28px;
  }

  /* Access info card on mobile */
  .ms-access__info {
    padding: 1.5rem;
  }

  /* Contact form on mobile */
  .ms-contact-form {
    padding: 1.75rem;
    border-radius: var(--ms-radius-lg);
  }

  /* Price preview mobile */
  .ms-price-preview__main {
    padding: 2rem 1.5rem;
    border-radius: var(--ms-radius-lg);
  }

  .ms-price-preview__amount span {
    font-size: 32px;
  }

  /* Section title mobile */
  .ms-section-title {
    margin-bottom: 2.5rem;
  }

  /* Price tab mobile */
  .ms-price-tab__nav {
    width: 100%;
    justify-content: stretch;
  }

  .ms-price-tab__btn {
    flex: 1;
    text-align: center;
    padding: 0.5rem 0.75rem;
    font-size: var(--ms-font-size-small);
  }

  /* ── Hero section ── */
  .ms-hero__lead {
    font-size: var(--ms-font-size-body);
  }

  .ms-hero__location {
    font-size: var(--ms-font-size-body);
  }

  .ms-hero__badge {
    font-size: var(--ms-font-size-small);
  }

  /* ── Section common ── */
  .ms-section-title__en {
    font-size: var(--ms-font-size-small);
  }

  /* ── Card ── */
  .ms-card__desc {
    font-size: var(--ms-font-size-small);
  }

  /* ── Voice ── */
  .ms-voice-card__title {
    font-size: var(--ms-font-size-body);
  }

  .ms-voice-card__text {
    font-size: var(--ms-font-size-body);
  }

  .ms-voice-card__rating {
    margin-bottom: 0;
  }

  /* ── Price preview ── */
  .ms-price-preview__name {
    font-size: 18px;
  }

  .ms-price-preview__point {
    font-size: var(--ms-font-size-body);
  }

  .ms-price-preview__amount {
    font-size: var(--ms-font-size-body);
    white-space: normal;
  }

  .ms-price-preview__amount small {
    display: block;
    margin-top: 0.25rem;
  }

  .ms-price-preview__other h4 {
    font-size: var(--ms-font-size-h2);
  }

  .ms-price-preview__other p {
    font-size: var(--ms-font-size-body);
  }

  .ms-price-preview__other-price {
    font-size: var(--ms-font-size-body);
  }

  .ms-price-preview__admission {
    font-size: var(--ms-font-size-body);
  }

  /* ── Flow ── */
  .ms-flow__step-num {
    font-size: var(--ms-font-size-body);
  }

  .ms-flow__step-content p {
    font-size: var(--ms-font-size-small);
  }

  .ms-flow__cta-lead {
    font-size: var(--ms-font-size-body);
  }

  /* ── Facility ── */
  .ms-facility-preview__features span {
    font-size: var(--ms-font-size-small);
  }

  .ms-facility-preview__note {
    font-size: var(--ms-font-size-small);
  }

  /* ── Access ── */
  .ms-access__station {
    font-size: var(--ms-font-size-h3);
  }

  .ms-access__detail {
    font-size: var(--ms-font-size-body);
  }

  .ms-access__detail dt {
    font-size: var(--ms-font-size-small);
  }

  .ms-access__map-link {
    font-size: var(--ms-font-size-small);
  }

  .ms-access__note {
    font-size: var(--ms-font-size-small);
  }

  .ms-access-route__step-num {
    font-size: var(--ms-font-size-body);
  }

  .ms-access-route__step-text p {
    font-size: var(--ms-font-size-body);
  }

  /* ── FAQ preview ── */
  .ms-faq-preview__item dt {
    font-size: 14px;
    padding-top: 1rem !important;
  }

  .ms-faq-preview__item dd {
    font-size: var(--ms-font-size-small);
  }

  /* FAQ/その他 中央テキスト: SPで自然改行 */
  .post_content .ms-section__inner > p.has-text-align-center {
    max-width: 16em;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── News ── */
  .ms-news-list__title {
    font-size: var(--ms-font-size-small);
  }

  /* ── About page ── */
  .ms-about-intro__desc {
    font-size: var(--ms-font-size-body);
  }

  .ms-profile__name {
    font-size: var(--ms-font-size-h3);
  }

  .ms-profile__meta {
    font-size: var(--ms-font-size-small);
  }

  .ms-founder__text p {
    font-size: var(--ms-font-size-body);
  }

  .ms-founder__career {
    font-size: var(--ms-font-size-small);
  }

  /* ── Contact tab ── */
  .ms-contact-tab__nav {
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .ms-contact-tab__btn {
    font-size: var(--ms-font-size-body);
    padding: 1.25rem 0.75rem;
    gap: 0.25rem;
  }

  .ms-contact-tab__icon {
    width: 28px;
    height: 28px;
    margin-bottom: 0.25rem;
  }

  .ms-contact-tab__name {
    font-size: var(--ms-font-size-body);
  }

  .ms-contact-tab__desc {
    font-size: var(--ms-font-size-small);
    line-height: 1.3;
  }

  .ms-contact-tab__badge {
    font-size: 11px;
    padding: 0.125rem 0.5rem;
  }

  .ms-contact-line__info h3 {
    font-size: var(--ms-font-size-h3);
  }

  .ms-contact-line__merits li {
    font-size: var(--ms-font-size-small);
  }

  /* ── Plan cards ── */
  .ms-plan-card__desc {
    font-size: var(--ms-font-size-small);
  }

  .ms-plan-card__features {
    width: max-content;
    max-width: 100%;
    margin: 0.25rem auto 0;
  }

  .ms-plan-card__features li {
    width: max-content;
    max-width: 100%;
    padding: 0.25rem 0 0.25rem 1.5rem;
    line-height: 1.4;
    font-size: var(--ms-font-size-small);
  }

  .ms-plan-card__features li::before {
    top: 0.45rem;
    width: 14px;
    height: 14px;
  }

  /* Reduce animation on mobile for performance */
  .ms-card-grid > *,
  .ms-voice-list > *,
  .ms-flow__steps > * {
    animation-duration: 0.4s;
  }

  /* Gallery mobile */
  .ms-gallery__item {
    border-radius: var(--ms-radius-md);
  }
}

@media (max-width: 480px) {
  .ms-hero__badge {
    font-size: 12px;
    padding: 0.5rem 1.25rem;
  }

  .ms-hero__title {
    font-size: 26px;
  }

  .ms-price-preview__others {
    gap: 0.75rem;
  }

  .ms-plan-card__amount {
    font-size: 20px;
  }

  .ms-plan-card--featured .ms-plan-card__amount {
    font-size: 20px;
  }

  /* 480px: 本文15px維持。見出しのみ微縮小 */
  :root {
    --ms-font-size-h1: 20px;
    --ms-font-size-h2: 17px;
    --ms-font-size-h3: 14px;
    --ms-font-size-body: 14px;
    --ms-font-size-small: 12px;
  }

  .ms-section {
    padding: 48px 0;
  }

  .ms-floating-campaign__text {
    font-size: var(--ms-font-size-small);
  }

  .ms-floating-campaign__text small {
    display: none;
  }

  .ms-floating-campaign__free {
    font-size: 20px;
  }

  .ms-btn--sm {
    font-size: 12px;
    padding: 0.5rem 1rem;
  }

  .ms-btn {
    padding: 0.75rem 1.5rem;
    font-size: var(--ms-font-size-body);
  }

  .ms-btn--lg {
    padding: 0.875rem 1.75rem;
    font-size: var(--ms-font-size-body);
  }

  /* Phase 2: テーブル系コンポーネント 480px */
  .ms-compare__header,
  .ms-compare__row {
    grid-template-columns: 60px 1fr 1fr;
    font-size: 12px;
  }

  .ms-compare__col {
    padding: 0.625rem 0.5rem;
  }

  .ms-compare__header .ms-compare__col--mira,
  .ms-compare__header .ms-compare__col--other {
    font-size: 11px;
  }

  .ms-info-table th {
    width: 100px;
    font-size: 12px;
    padding: 1rem 0.75rem;
  }

  .ms-info-table td {
    font-size: 12px;
    padding: 1rem 0.75rem;
  }

  .ms-price-table th,
  .ms-price-table td {
    padding: 0.75rem 0.5rem;
    font-size: 12px;
  }

  /* フロー・CTA・コンセプト */
  .ms-concept__problem {
    font-size: var(--ms-font-size-body);
  }

  .ms-concept__problem strong {
    font-size: var(--ms-font-size-h3);
  }

  .ms-concept__solution {
    font-size: var(--ms-font-size-body);
  }

  .ms-concept__image--dual {
    gap: 0.75rem;
  }

  .ms-flow__step-num {
    width: 40px;
    height: 40px;
    font-size: var(--ms-font-size-body);
  }

  .ms-flow__step-content h3 {
    font-size: var(--ms-font-size-body);
  }

  .ms-flow__step-content p {
    font-size: var(--ms-font-size-small);
  }

  .ms-cta {
    padding: 48px var(--ms-inner-padding);
  }

  .ms-cta__title {
    font-size: var(--ms-font-size-h2);
  }

  .ms-cta__desc {
    font-size: var(--ms-font-size-body);
    margin-bottom: 1.5rem;
  }

  .ms-cta__note {
    font-size: var(--ms-font-size-small);
    margin-top: 1rem;
    padding-top: 1rem;
  }

  .ms-cta__method {
    padding: 1rem 1.25rem;
  }

  .ms-cta__method-name {
    font-size: var(--ms-font-size-body);
  }

  /* お問い合わせ・LINE・施設 */
  .ms-contact-line {
    padding: 1.5rem 1rem;
    gap: 1.5rem;
  }

  .ms-contact-line__qr img {
    width: 140px;
    height: 140px;
  }

  .ms-contact-line__info {
    font-size: var(--ms-font-size-body);
  }

  .ms-contact-form {
    padding: 1.25rem;
  }

  .ms-contact-form__field label {
    font-size: var(--ms-font-size-body);
  }

  .ms-contact-form__field input,
  .ms-contact-form__field textarea,
  .ms-contact-form__field select {
    font-size: 1rem; /* iOS zoom防止: 16px以上 */
    padding: 0.625rem 0.75rem;
  }

  .ms-facility-preview__feature-icon {
    width: 40px;
    height: 40px;
  }

  .ms-facility-preview__feature-text {
    font-size: var(--ms-font-size-small);
  }

  /* About・Footer・ニュース */
  .ms-about-intro__content {
    gap: 1.5rem;
  }

  .ms-about-intro__text {
    font-size: var(--ms-font-size-body);
  }

  .ms-founder__content {
    gap: 1.5rem;
  }

  .ms-founder__image img {
    max-width: 200px;
    margin: 0 auto;
    display: block;
  }

  .ms-founder__name {
    font-size: var(--ms-font-size-h3);
  }

  .ms-founder__bio {
    font-size: var(--ms-font-size-body);
  }

  .ms-profile {
    gap: 1.5rem;
  }

  .ms-profile__image img {
    max-width: 180px;
    margin: 0 auto;
    display: block;
  }

  .ms-profile__name {
    font-size: var(--ms-font-size-h2);
  }

  .ms-profile__bio {
    font-size: var(--ms-font-size-body);
  }

  .ms-footer {
    font-size: var(--ms-font-size-small);
  }

  .ms-footer__address {
    font-size: var(--ms-font-size-small);
  }

  .ms-footer__nav-list {
    gap: 0.5rem;
  }

  .ms-footer__nav-list a {
    font-size: var(--ms-font-size-small);
  }

  .ms-footer__sub-nav {
    gap: 0.75rem;
  }

  .ms-footer__sub-nav a {
    font-size: var(--ms-font-size-small);
  }

  .ms-footer__sns {
    justify-content: center;
  }

  .ms-news-list__item {
    gap: 0.375rem;
  }

  .ms-news-list__title {
    font-size: var(--ms-font-size-body);
  }

  .ms-news-list__meta {
    font-size: var(--ms-font-size-small);
  }

  /* Phase 7: Hero + 全体微調整 480px */
  .ms-hero {
    padding: 60px var(--ms-inner-padding) 40px;
  }

  .ms-hero__subtitle {
    font-size: var(--ms-font-size-body);
  }

  .ms-hero__points {
    gap: 0.375rem;
  }

  .ms-hero__point {
    font-size: var(--ms-font-size-small);
    padding: 0.375rem 0.75rem;
  }

  .ms-page-hero {
    padding: 48px var(--ms-inner-padding);
  }

  .ms-page-hero__title {
    font-size: var(--ms-font-size-h1) !important;
  }

  .ms-page-hero__subtitle {
    font-size: var(--ms-font-size-body);
  }

  .ms-page-hero__desc {
    font-size: var(--ms-font-size-body);
  }

  .ms-page-hero::before {
    font-size: 3rem;
  }

  .ms-section-title__en {
    font-size: var(--ms-font-size-small);
  }

  /* コンタクトタブ */
  .ms-contact-tab__nav {
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .ms-contact-tab__btn {
    padding: 1rem 0.5rem;
    gap: 0.125rem;
  }

  .ms-contact-tab__icon {
    width: 24px;
    height: 24px;
    margin-bottom: 0.125rem;
  }

  .ms-contact-tab__name {
    font-size: var(--ms-font-size-small);
  }

  .ms-contact-tab__desc {
    font-size: var(--ms-font-size-small);
    line-height: 1.3;
  }

  .ms-contact-tab__badge {
    font-size: 11px;
    padding: 0.125rem 0.375rem;
  }

  /* ボイスカード */
  .ms-voice-card {
    padding: 1.25rem;
  }

  .ms-voice-card__text {
    font-size: var(--ms-font-size-body);
  }

  .ms-voice-card__author {
    font-size: var(--ms-font-size-small);
  }

  /* アクセスルート */
  .ms-access-route__step {
    gap: 0.75rem;
  }

  .ms-access-route__label {
    font-size: var(--ms-font-size-small);
  }

  .ms-access-route__desc {
    font-size: var(--ms-font-size-small);
  }

  /* カードグリッド */
  .ms-card-grid {
    gap: 1rem;
  }

  .ms-card {
    padding: 1.25rem;
  }

  .ms-card__title {
    font-size: var(--ms-font-size-h3);
  }

  .ms-card__text {
    font-size: var(--ms-font-size-small);
  }
}

/* ==========================================================================
   Phase 2-5: Smooth Scroll Behavior
   ========================================================================== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* SWELLの固定ヘッダー分 */
}

/* ==========================================================================
   Prefers-reduced-motion: Disable animations for accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  .ms-animate-ready .ms-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   SWELL Integration: Comprehensive Override
   SWELLの既存スタイルとの競合を完全解消するセクション
   ========================================================================== */

/* ------------------------------------------------------------------
   1. SWELL Theme Colors Override
   SWELLカスタマイザーのカラー設定をMiraStudyブランドカラーで上書き
   ------------------------------------------------------------------ */
:root {
  /* Override SWELL's color variables */
  --color_main: #00AA7C;
  --color_text: #2d2d2d;
  --color_link: #00AA7C;
  --color_htag: #135432;
  --color_bg: #FCFEFF;
  --color_header_bg: #FFFFFF;
  --color_header_text: #2d2d2d;
  --color_footer_bg: #00AA7C;
  --color_footer_text: #FFFFFF;

  /* Override SWELL font settings */
  --swl-font_family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --swl-font_weight: 400;
  --swl-fz--content: 16px;

  /* Remove SWELL's h2 negative margin extension */
  --swl-h2-margin--x: 0;

  /* Reset SWELL padding on post_content */
  --swl-pad_post_content: 0px;

  /* Tighter block margin for our custom layout */
  --swl-block-margin: 0;
}

/* ------------------------------------------------------------------
   2. post_content Wrapper Reset
   SWELLの.post_content内のスタイルリセット
   ------------------------------------------------------------------ */

/* Remove default margin/padding from post_content wrapper */
.l-mainContent__inner > .post_content {
  margin: 0;
  padding: 0;
}

/* Kill SWELL's default bottom margin on direct children of post_content */
.post_content > * {
  margin-bottom: 0;
}

/* SWELL .l-content の不要な余白を除去 */
.l-content {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

/* Kill SWELL's first/last child margin resets (we handle our own) */
.post_content > :first-child {
  margin-top: 0 !important;
}

.post_content > :last-child {
  margin-bottom: 0 !important;
}

/* Ensure post_content uses our font */
.post_content {
  font-family: var(--ms-font-family);
  font-size: var(--ms-font-size-body);
  font-weight: 400;
  color: var(--ms-text);
  line-height: var(--ms-line-height);
}

/* ------------------------------------------------------------------
   3. Heading Overrides inside post_content
   SWELLのh2/h3/h4スタイルを、ms-*セクション内で完全にリセット
   ------------------------------------------------------------------ */

/* Reset SWELL heading styles within our custom sections */
.post_content .ms-section h2,
.post_content .ms-concept h2,
.post_content .ms-flow h2,
.post_content .ms-access h2,
.post_content .ms-faq-preview h2,
.post_content .ms-cta h2,
.post_content .ms-equipment h2,
.post_content .ms-page-hero h1,
.post_content h2.ms-faq__category-title {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0;
  line-height: inherit;
  position: static;
  z-index: auto;
  background: none;
  border: none;
  color: inherit;
  letter-spacing: inherit;
}

/* Reset SWELL h2 margin-left/right extension */
.post_content > h2.ms-section-title,
.post_content .ms-section-title {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  font-size: clamp(1.25rem, 3.5vw, 1.75rem) !important;
  font-weight: 800 !important;
  color: var(--ms-green) !important;
}

/* Reset SWELL h3 styles within our sections */
.post_content .ms-section h3,
.post_content .ms-flow__step-content h3,
.post_content .ms-concept h3,
.post_content .ms-habit__content h3,
.post_content .ms-contact-flow__step-content h3,
.post_content .ms-faq__category-title {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0;
  line-height: inherit;
  position: static;
}

/* Reset h2::before from SWELL (it adds border-top/bottom decorative lines) */
.post_content .ms-section h2::before,
.post_content .ms-concept h2::before,
.post_content .ms-flow h2::before,
.post_content .ms-access h2::before,
.post_content .ms-faq-preview h2::before,
.post_content .ms-cta h2::before,
.post_content .ms-equipment h2::before,
.post_content .ms-page-hero h1::before,
.post_content h2.ms-faq__category-title::before {
  content: none !important;
  display: none !important;
}

/* Reset h3::before from SWELL (it adds decorative elements) */
.post_content .ms-section h3::before,
.post_content .ms-equipment h3::before,
.post_content .ms-flow__step-content h3::before,
.post_content .ms-habit__content h3::before,
.post_content .ms-contact-flow__step-content h3::before {
  display: none;
}

/* Reset SWELL h3 styles for equipment/facility-hours */
.post_content .ms-equipment h3,
.post_content .ms-section .ms-facility-hours__title {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0;
  border: none;
  line-height: inherit;
  position: static;
  background: none;
  color: inherit;
}

/* Reset SWELL h4 styles */
.post_content .ms-section h4 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0;
  border: none;
  line-height: inherit;
  position: static;
}

.post_content .ms-price-preview__other h4 {
  font-size: 24px !important;
  font-weight: 500 !important;
  color: var(--ms-green) !important;
  margin: 0 0 0.5rem !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  line-height: inherit;
  position: static;
}

@media (max-width: 768px) {
  .post_content .ms-price-preview__other h4 {
    font-size: 18px !important;
  }
}

/* ------------------------------------------------------------------
   4. Section Layout Overrides
   ms-*セクションのレイアウトがSWELLに潰されないように
   ------------------------------------------------------------------ */

/* Full-width sections: break out of SWELL's l-container */
.post_content .ms-section,
.post_content .ms-concept,
.post_content .ms-flow,
.post_content .ms-access,
.post_content section.ms-faq-preview,
.post_content .ms-cta,
.post_content .ms-page-hero,
.post_content .ms-equipment {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  clear: both;
}

/* Card grid and gallery should not be constrained */
.post_content .ms-card-grid,
.post_content .ms-gallery,
.post_content .ms-voice-list,
.post_content .ms-price-cards,
.post_content .ms-faq__list {
  max-width: none;
}

/* ------------------------------------------------------------------
   5. List Style Overrides
   SWELLのデフォルトリストスタイルをカスタムコンポーネント内で無効化
   ------------------------------------------------------------------ */

/* Reset SWELL's list-style: disc for our custom lists */
.post_content .ms-plan-card__features,
.post_content .ms-notes,
.post_content .ms-payment-methods,
.post_content .ms-payment-methods__list,
.post_content .ms-facility-preview__features,
.post_content .ms-hero__points,
.post_content .ms-news-list,
.post_content .ms-faq-preview__list,
.post_content .ms-flow__steps,
.post_content .ms-equipment__list,
.post_content .ms-habit__list,
.post_content .ms-contact-flow,
.post_content .ms-target-value__list,
.post_content .ms-facility-hours__notes,
.post_content .ms-voice-list,
.post_content .ms-card-grid {
  list-style: none;
  padding-left: 0;
}

/* Reset SWELL li margins */
.post_content [class*="ms-"] li {
  margin: 0;
  list-style: none;
}

/* But keep disc for legal content lists */
.post_content .ms-legal-content ul li {
  list-style: disc;
}

.post_content .ms-legal-content ol li {
  list-style: decimal;
}

/* Reset list marker content */
.post_content .ms-plan-card__features li::marker,
.post_content .ms-notes li::marker,
.post_content .ms-hero__points li::marker,
.post_content .ms-facility-preview__features li::marker,
.post_content .ms-news-list li::marker,
.post_content .ms-flow__steps li::marker,
.post_content .ms-voice-list li::marker,
.post_content .ms-equipment__list li::marker {
  content: none;
}

/* ------------------------------------------------------------------
   6. Button & Link Overrides
   SWELLのリンク/ボタンスタイルをms-btn内で無効化
   ------------------------------------------------------------------ */

/* Ensure our buttons don't inherit SWELL link color or decoration */
.post_content .ms-btn,
.post_content a.ms-btn {
  text-decoration: none !important;
  color: var(--ms-green) !important;
}

.post_content .ms-btn--primary,
.post_content a.ms-btn--primary,
.post_content a.ms-btn.ms-btn--primary {
  color: var(--ms-white-pure) !important;
}

.post_content .ms-btn--line,
.post_content a.ms-btn--line,
a.ms-btn.ms-btn--line {
  color: var(--ms-white-pure) !important;
}

.post_content .ms-btn--line:hover,
.post_content a.ms-btn--line:hover,
a.ms-btn.ms-btn--line:hover {
  color: var(--ms-white-pure) !important;
}

.post_content .ms-btn--outline,
.post_content a.ms-btn--outline {
  color: var(--ms-dark-green) !important;
}

.post_content .ms-btn--outline:hover,
.post_content a.ms-btn--outline:hover {
  color: var(--ms-white-pure) !important;
}

/* Prevent SWELL hover opacity change on our buttons and links */
.post_content a.ms-btn:hover,
.post_content a.ms-link-arrow:hover,
.post_content .ms-btn:hover {
  text-decoration: none;
  opacity: 1;
}

/* Prevent SWELL link color on our nav links */
.post_content .ms-news-list__title a {
  color: var(--ms-text) !important;
}

.post_content .ms-news-list__title a:hover {
  color: var(--ms-green);
}

/* ------------------------------------------------------------------
   7. Image Overrides
   SWELLの画像スタイルをギャラリー内で制御
   ------------------------------------------------------------------ */

/* picture要素のベーススタイル（WebP対応） */
.ms-gallery__item picture,
.ms-about-intro__image picture,
.ms-founder__image picture,
.ms-system-card__image picture,
.ms-profile__image picture {
  display: block;
  width: 100%;
  height: 100%;
}

.post_content .ms-gallery__item img,
.post_content .ms-concept__image--dual img,
.post_content .ms-about-intro__image img,
.post_content .ms-founder__image img,
.post_content .ms-system-card__image img,
.post_content .ms-profile__image img {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------
   8. Table Overrides
   SWELLのテーブルスタイルがms-*テーブルを壊さないように
   ------------------------------------------------------------------ */
.post_content .ms-info-table th,
.post_content .ms-info-table td,
.post_content .ms-price-table th,
.post_content .ms-price-table td,
.post_content .ms-facility-hours__table th,
.post_content .ms-facility-hours__table td {
  background-color: unset;
  color: unset;
}

/* Re-apply our custom table header colors (overriding SWELL's --thead-color--bg) */
.post_content .ms-price-table thead th {
  background: var(--ms-green);
  color: var(--ms-white-pure);
}

.post_content .ms-facility-hours__table th {
  color: var(--ms-green);
}

.post_content .ms-price-table tbody td:first-child strong {
  color: var(--ms-green);
}

.post_content .ms-info-table th {
  background: var(--ms-bg-light);
  color: var(--ms-dark-green);
}

.post_content .ms-facility-hours__table tr:first-child th {
  background: var(--ms-green);
  color: var(--ms-white-pure);
}

/* ------------------------------------------------------------------
   9. SWELL Blockquote Reset (within our sections)
   ------------------------------------------------------------------ */
.post_content .ms-section blockquote,
.post_content .ms-concept blockquote {
  background: transparent;
  padding: 0;
}

.post_content .ms-section blockquote::before,
.post_content .ms-section blockquote::after {
  content: none;
}

/* ------------------------------------------------------------------
   10. SWELL small/code Reset
   ------------------------------------------------------------------ */
.post_content .ms-price-preview__amount small,
.post_content .ms-price-preview__note,
.post_content .ms-plan-card__tax,
.post_content .ms-price-other__item dd small {
  opacity: 1;
}

/* ------------------------------------------------------------------
   11. SWELL Breadcrumb Styling
   パンくずリストをブランドに合わせる
   ------------------------------------------------------------------ */
.p-breadcrumb {
  background: var(--ms-bg-light);
  border-bottom: 1px solid var(--ms-border-light);
}

.p-breadcrumb__list {
  font-size: 0.8125rem;
}

.p-breadcrumb__text {
  color: var(--ms-text-light);
}

.p-breadcrumb a.p-breadcrumb__text:hover {
  color: var(--ms-green);
}

/* ==========================================================================
   Header Styling
   SWELLヘッダーのカスタマイズ
   ========================================================================== */

/* Header bar (top bar with catchphrase) */
.l-header__bar {
  background: var(--ms-green);
  color: var(--ms-white-pure);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
}

.c-catchphrase {
  color: var(--ms-white-pure);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* Icon list in header bar */
.l-header__bar .c-iconList__link {
  color: rgba(255, 255, 255, 0.7);
}

.l-header__bar .c-iconList__link:hover {
  color: var(--ms-lime);
}

/* Main header area */
.l-header {
  background: var(--ms-green);
  border-bottom: none;
  box-shadow: none;
}

.l-header__inner {
  max-width: var(--ms-inner-width);
}

/* Logo */
.c-headLogo {
  font-family: var(--ms-font-family);
}

.c-headLogo.-txt .c-headLogo__link {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ms-white-pure) !important;
  text-decoration: none;
  letter-spacing: 0.02em;
}

.c-headLogo.-txt .c-headLogo__link:hover {
  color: var(--ms-lime);
  opacity: 1;
}

/* Global Navigation */
.c-gnav > .menu-item {
  display: flex;
}

.c-gnav > .menu-item > a {
  height: 75%;
}

.c-gnav a {
  color: var(--ms-white-pure) !important;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
  letter-spacing: 0.02em;
}

.c-gnav a:hover {
  color: var(--ms-lime) !important;
  opacity: 1;
}

/* Active nav item */
.c-gnav .current-menu-item > a,
.c-gnav .current_page_item > a {
  color: var(--ms-white-pure) !important;
  font-weight: 600;
}

/* Contact menu item - highlight as CTA (白ボタン on 緑ヘッダー) */
.c-gnav .contact > a {
  background: var(--ms-white-pure);
  color: var(--ms-green) !important;
  padding: 0.5rem 1.25rem;
  border-radius: var(--ms-radius-md);
  font-weight: 700;
  transition: all 0.3s ease;
  align-items: center;
}

.c-gnav .contact > a:hover {
  background: var(--ms-dark-green);
  color: var(--ms-white-pure) !important;
  opacity: 1;
}

/* Fixed header */
.l-fixHeader {
  border-bottom: none !important;
  box-shadow: none;
}

.l-fixHeader::before {
  background: var(--ms-green) !important;
}

.l-fixHeader__inner {
  max-width: var(--ms-inner-width);
  color: var(--ms-white-pure) !important;
}

.l-fixHeader .c-headLogo.-txt .c-headLogo__link {
  color: var(--ms-white-pure) !important;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.l-fixHeader .c-gnav a {
  color: var(--ms-white-pure) !important;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  align-items: center;
  height: 70%;
  margin: auto;
}

.l-fixHeader .c-gnav a:hover {
  color: var(--ms-lime) !important;
  opacity: 1;
}

.l-fixHeader .c-gnav .contact > a {
  background: var(--ms-white-pure);
  color: var(--ms-green) !important;
  padding: 0.5rem 1.25rem;
  border-radius: var(--ms-radius-md);
  font-weight: 700;
  transition: all 0.3s ease;
}

.l-fixHeader .c-gnav .contact > a:hover {
  background: var(--ms-dark-green);
  color: var(--ms-white-pure) !important;
  opacity: 1;
}

/* Mobile menu button */
.l-header__menuBtn .c-iconBtn {
  color: var(--ms-white-pure);
}

/* Mobile SP menu */
.p-spMenu__inner {
  background: var(--ms-white-pure);
}

.p-spMenu .c-gnav a {
  color: var(--ms-text);
  font-size: 1rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--ms-bg-gray);
}

.p-spMenu .c-gnav a:hover,
.p-spMenu .c-gnav .current-menu-item > a {
  color: var(--ms-green);
  background: var(--ms-bg-green);
}

/* Search button */
.l-header .c-iconBtn,
.l-header .c-iconList__link {
  color: var(--ms-white-pure);
}

.l-header .c-iconBtn:hover,
.l-header .c-iconList__link:hover {
  color: var(--ms-lime);
}

/* ==========================================================================
   Main Visual (Home hero managed by SWELL)
   SWELLメインビジュアルのカスタマイズ
   ========================================================================== */

/* MV text styling */
.p-mainVisual .post_content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.p-mainVisual .post_content * {
  text-shadow: none !important;
}

/* MV背景オーバーレイ非表示（差し替え画像でテキスト可読性を確保済み） */
.p-mainVisual .c-filterLayer::before {
  opacity: 0 !important;
}

/* MV内のカラムレイアウトを中央1列に強制 */
.p-mainVisual .post_content .wp-block-columns,
.p-mainVisual .post_content .swell-block-columns {
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.p-mainVisual .post_content .wp-block-column,
.p-mainVisual .post_content .swell-block-column {
  flex-basis: auto !important;
  width: auto;
}

.p-mainVisual .post_content h2.is-style-section_ttl {
  font-family: var(--ms-font-family);
  font-weight: 800;
  color: var(--ms-white-pure) !important;
  font-size: clamp(1.5rem, 5vw, 2.25rem) !important;
  line-height: 1.4;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.p-mainVisual .post_content h2.is-style-section_ttl .swl-fz {
  font-size: inherit !important;
  color: inherit !important;
}


/* SP: 前後記事ナビを縦並び */
@media (max-width: 768px) {
  .p-pnLinks {
    flex-direction: column;
  }
  .p-pnLinks__item {
    width: 100%;
  }
  .p-pnLinks__link {
    white-space: nowrap;
  }
  .p-pnLinks__title {
    white-space: normal;
  }
}

/* SP専用改行ユーティリティ */
.ms-sp-br { display: none; }
@media (max-width: 768px) {
  .ms-sp-br { display: inline; }
}

.p-mainVisual .post_content .is-style-section_ttl {
  color: var(--ms-white-pure) !important;
}

.p-mainVisual .post_content p {
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  font-size: 1rem;
  letter-spacing: 0.03em;
}

/* SWELL MV badge */
.p-mainVisual .swl-bg-color.has-swl-main-background-color {
  background: var(--ms-lime) !important;
  color: var(--ms-dark-green) !important;
  font-weight: 800;
  font-size: 0.8125rem;
  border-radius: 100px;
  padding: 0.375rem 1.5rem;
  display: inline-block;
  letter-spacing: 0.08em;
}

/* MV button styling — !important でSWELLブロックボタンの上書きを確実に */
.p-mainVisual .swell-block-button {
  margin-top: 1.5rem;
}

.p-mainVisual .swell-block-button .swell-block-button__link,
.p-mainVisual .swell-block-button__link {
  background: var(--ms-green) !important;
  color: var(--ms-white-pure) !important;
  font-weight: 700;
  border-radius: 100px;
  padding: 1rem 3rem;
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  transition: all 0.3s ease;
  box-shadow: none;
  border: none !important;
}

.p-mainVisual .swell-block-button .swell-block-button__link:hover,
.p-mainVisual .swell-block-button__link:hover {
  background: var(--ms-dark-green) !important;
  color: var(--ms-white-pure) !important;
  transform: translateY(-2px);
  box-shadow: none;
  opacity: 1;
}

/* SP: section inner h3 サイズ縮小 */
@media (max-width: 768px) {
  .post_content .ms-section__inner h3:not(.wp-block-heading):not(.ms-security__title):not(.ms-equipment__category-title):not(.ms-plan-card__name):not(.ms-facility-hours__title):not(.ms-price-preview__name) {
    margin: 1rem 0 0.5rem !important;
    font-size: 15px !important;
  }
}

/* Phase 2-2: Mobile text sizing for Main Visual */
@media (max-width: 768px) {
  .p-mainVisual .post_content h2.is-style-section_ttl {
    font-size: clamp(1.5rem, 5vw, 2.25rem);
    line-height: 1.4;
  }

  .p-mainVisual .post_content p {
    font-size: clamp(0.875rem, 3vw, 1.0625rem);
    line-height: 1.6;
  }

  .p-mainVisual .swell-block-button__link {
    padding: 0.875rem 2.5rem;
    font-size: var(--ms-font-size-body);
  }
}

/* ==========================================================================
   Footer Styling
   SWELLフッターのカスタマイズ - ダークグリーンベース
   ========================================================================== */
.l-footer {
  background: var(--ms-dark-green);
  color: var(--ms-white-pure);
  padding-bottom: 72px;
  position: relative;
  overflow: hidden;
}

/* 波型の上端（CTAとの接続部） */
.l-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 40px;
  background: var(--ms-dark-green);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40'%3E%3Cpath d='M0 40V20C200 0 400 0 600 20S1000 40 1200 20V40z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40'%3E%3Cpath d='M0 40V20C200 0 400 0 600 20S1000 40 1200 20V40z'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  z-index: 1;
}

.l-footer__inner {
  background: var(--ms-dark-green);
  position: relative;
  z-index: 1;
}

/* 装飾: 薄い斜めストライプ */
.l-footer__inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 30px,
    rgba(255, 255, 255, 0.015) 30px,
    rgba(255, 255, 255, 0.015) 60px
  );
  pointer-events: none;
}

/* ==========================================================================
   Custom Footer Layout (ms-footer)
   プロトタイプ準拠: ブランド+メインナビ / サブナビ+コピーライト 2段構成
   ========================================================================== */
.ms-footer {
  position: relative;
  padding: 3rem 0 1.5rem;
}

.ms-footer__inner {
  max-width: var(--ms-inner-width);
  margin: 0 auto;
  padding: 0 var(--ms-inner-padding);
}

/* 上段: ブランド + メインナビ */
.ms-footer__main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 1.5rem;
}

.ms-footer__brand {
  flex-shrink: 0;
}

.ms-footer__logo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.ms-footer__logo a {
  color: var(--ms-white-pure);
  text-decoration: none;
}

.ms-footer__address {
  font-size: 13px;
  opacity: 0.7;
  line-height: 1.6;
}

.ms-footer__sns {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.75rem;
}

.ms-footer__sns-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ms-white-pure);
  transition: var(--ms-transition);
}

.ms-footer__sns-link:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.post_content .ms-footer__sns-link,
.post_content a.ms-footer__sns-link {
  color: var(--ms-white-pure) !important;
  text-decoration: none !important;
}

/* メインナビ */
.ms-footer__nav {
  flex-shrink: 0;
}

.ms-footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ms-footer__nav-list li {
  border: none !important;
}

.ms-footer__nav-list a {
  color: var(--ms-white-pure);
  font-size: 14px;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  letter-spacing: 0.02em;
  padding: 0;
  border: none !important;
}

.ms-footer__nav-list a:hover {
  opacity: 1;
}

/* 下段: サブナビ + コピーライト */
.ms-footer__sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

.ms-footer__sub-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ms-footer__sub-nav li {
  border: none !important;
}

.ms-footer__sub-nav a {
  color: var(--ms-white-pure);
  font-size: 12px;
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 0.3s ease;
  padding: 0;
  border: none !important;
}

.ms-footer__sub-nav a:hover {
  opacity: 0.9;
}

.ms-footer__copy {
  color: var(--ms-white-pure);
  font-size: 12px;
  opacity: 0.45;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* SP: フッター縦積み */
@media (max-width: 767px) {
  .ms-footer__main {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .ms-footer__nav-list {
    justify-content: center;
  }

  .ms-footer__sub {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .ms-footer__sub-nav {
    justify-content: center;
  }
}

/* Legacy: SWELLデフォルトフッター非表示 (footer.phpオーバーライド済み) */
.l-footer__foot {
  display: none;
}

/* Footer widget area (if used) */
.l-footer__widgetArea {
  background: transparent;
  padding: 3rem 0;
}

.l-footer__widgetArea .widget-title {
  color: var(--ms-lime);
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}

.l-footer__widgetArea a {
  color: rgba(255, 255, 255, 0.9);
}

.l-footer__widgetArea a:hover {
  color: var(--ms-lime);
}

@media (min-width: 960px) {
  .p-fixBtnWrap {
    bottom: 10px !important;
  }
}

/* Page-top button — バナーの上に配置 */
.c-fixBtn.hov-bg-main {
  background: var(--ms-white-pure) !important;
  color: var(--ms-green) !important;
  border: 2px solid var(--ms-green) !important;
  border-radius: var(--ms-radius-md);
  box-shadow: none;
  bottom: 80px !important;
  opacity: 1 !important;
}

.c-fixBtn.hov-bg-main:hover {
  background: var(--ms-white-pure) !important;
  opacity: 1 !important;
}

.c-fixBtn.hov-bg-main svg,
.c-fixBtn.hov-bg-main::before,
.c-fixBtn.hov-bg-main i {
  color: var(--ms-green) !important;
  fill: var(--ms-green) !important;
}

/* ==========================================================================
   Search Modal
   ========================================================================== */
.p-searchModal__inner {
  background: var(--ms-white-pure);
  border-radius: var(--ms-radius-lg);
}

.c-searchForm__submit {
  background: var(--ms-green) !important;
}

.c-searchForm__submit:hover {
  background: var(--ms-green) !important;
}

/* ==========================================================================
   SWELL Block Overrides (MV / Blog Parts)
   SWELLブロック要素のブランドカラー統一
   ========================================================================== */

/* SWELL buttons */
.swell-block-button.is-style-btn_normal .swell-block-button__link {
  background: var(--ms-green);
  border-color: var(--ms-green);
}

.swell-block-button.is-style-btn_normal .swell-block-button__link:hover {
  background: var(--ms-green);
  border-color: var(--ms-dark-green);
  opacity: 1;
}

/* SWELL main color backgrounds */
.has-swl-main-background-color {
  background-color: var(--ms-green) !important;
}

.has-swl-main-color {
  color: var(--ms-green) !important;
}

/* ==========================================================================
   Phase 4-1: Lighthouse Optimization Notes
   ========================================================================== */
/*
 * Font Preload: Noto Sans JP is loaded via functions.php wp_enqueue_style.
 * For further optimization, add preload in functions.php:
 *
 *   add_action('wp_head', function() {
 *     echo '<link rel="preload" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800&display=swap" as="style">';
 *     echo '<link rel="preconnect" href="https://fonts.googleapis.com">';
 *     echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>';
 *   }, 1);
 *
 * Critical CSS: Above-the-fold styles include:
 *   - CSS Variables (:root)
 *   - Header (.l-header, .c-gnav, .c-headLogo)
 *   - Main Visual (.p-mainVisual)
 *   - Hero (.ms-hero) / Page Hero (.ms-page-hero)
 *   - Buttons (.ms-btn)
 *   These should be inlined or loaded with highest priority.
 *
 * Non-critical CSS (below fold): Gallery, FAQ, Footer, Legal, Print
 * These can be deferred or loaded asynchronously.
 */

/* ==========================================================================
   Phase 3-1: Price Savings Highlight (CSS)
   ========================================================================== */
.ms-plan-card__savings {
  display: none;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ms-green);
  background: var(--ms-bg-green);
  padding: 0.5rem 0.75rem;
  border-radius: var(--ms-radius-sm);
  margin-bottom: 1rem;
  border: 1px solid var(--ms-border-light);
  animation: ms-fadeIn 0.4s ease both;
}

.ms-plan-card__savings.is-visible {
  display: block;
}

/* Phase 3-1: Featured plan badge pulse */
@keyframes ms-badge-pulse {
  0%, 100% {
    box-shadow: none;
  }
  50% {
    box-shadow: 0 4px 14px rgba(246, 241, 147, 0.4),
                0 0 0 6px rgba(246, 241, 147, 0.12);
  }
}

.ms-plan-card--featured .ms-plan-card__badge {
  animation: ms-badge-pulse 2s ease-in-out infinite;
}

/* ==========================================================================
   Single Post / Article Page Styles
   ========================================================================== */

/* --- Article Header --- */
.p-articleHead.c-postTitle {
  padding: 2.5rem 0 1.5rem;
}

.c-postTitle__ttl {
  font-size: clamp(1.375rem, 4vw, 1.875rem);
  font-weight: 800;
  line-height: 1.5;
  color: var(--ms-text);
  letter-spacing: 0.02em;
}

.c-postTitle__date {
  display: none;
}

/* --- Article Meta --- */
.p-articleMetas {
  padding: 0.75rem 0;
  border-top: 1px solid var(--ms-border-light);
  border-bottom: 1px solid var(--ms-border-light);
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.p-articleMetas.-bottom {
  margin-bottom: 0;
  margin-top: 2.5rem;
}

.c-categoryList__link {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ms-green);
  background: var(--ms-bg-green);
  padding: 0.25rem 0.75rem;
  border-radius: var(--ms-radius-full);
  text-decoration: none;
  transition: var(--ms-transition);
}

.c-categoryList__link:hover {
  background: var(--ms-green);
  color: var(--ms-white-pure);
}

.c-postTimes {
  font-size: 0.8125rem;
  color: var(--ms-text-light);
}

/* --- Table of Contents --- */
.p-toc {
  background: var(--ms-bg-gray);
  border: none;
  border-radius: 8px;
  padding: 1.5rem 2rem;
  margin: 2rem 0 2.5rem;
}

.p-toc__ttl {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ms-green);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--ms-green);
}

.p-toc__list {
  margin: 0;
  padding: 0;
  counter-reset: toc-counter;
}

.p-toc__list li {
  margin-bottom: 0.375rem;
}

.p-toc__link {
  font-size: 0.875rem;
  color: var(--ms-text);
  text-decoration: none;
  transition: var(--ms-transition);
}

.p-toc__link:hover {
  color: var(--ms-green);
}

.p-toc__childList {
  margin-top: 0.375rem;
  padding-left: 1.25rem;
}

.p-toc__childList .p-toc__link {
  font-size: 0.8125rem;
  color: var(--ms-text-light);
}

.p-toc__expandBtn {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ms-green);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.p-toc__expandBtn:hover {
  text-decoration: underline;
}

/* --- Post Content: Headings (override SWELL) --- */
.l-article .post_content > h2.wp-block-heading {
  font-size: 1.375rem !important;
  font-weight: 800 !important;
  color: var(--ms-dark-green) !important;
  margin: 3rem 0 1.25rem !important;
  padding: 0.75rem 0 !important;
  border-top: 3px solid var(--ms-green) !important;
  border-bottom: 1px solid var(--ms-border-light) !important;
  border-left: none !important;
  border-right: none !important;
  background: none !important;
  position: relative !important;
  z-index: 1 !important;
}

.l-article .post_content > h2.wp-block-heading::before,
.l-article .post_content > h2.wp-block-heading::after {
  content: none !important;
  display: none !important;
}

.l-article .post_content > h3.wp-block-heading {
  font-size: 1.1875rem !important;
  font-weight: 700 !important;
  color: var(--ms-dark-green) !important;
  margin: 2.25rem 0 1rem !important;
  padding: 0.125rem 0 0.125rem 1rem !important;
  border-left: 4px solid var(--ms-green) !important;
  border-top: none !important;
  border-bottom: none !important;
  border-right: none !important;
  background: none !important;
  position: relative !important;
}

.l-article .post_content > h3.wp-block-heading::before,
.l-article .post_content > h3.wp-block-heading::after {
  content: none !important;
  display: none !important;
}

.l-article .post_content > h4.wp-block-heading {
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  color: var(--ms-text) !important;
  margin: 1.75rem 0 0.75rem !important;
  padding: 0 0 0.375rem 0 !important;
  border-bottom: 2px dotted var(--ms-border-light) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  background: none !important;
}

.l-article .post_content > h4.wp-block-heading::before,
.l-article .post_content > h4.wp-block-heading::after {
  content: none !important;
  display: none !important;
}

/* --- Post Content: Paragraphs --- */
.l-article .post_content > p {
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--ms-text);
  margin-bottom: 1.5rem;
}

.l-article .post_content a:not(.wp-block-button__link) {
  color: var(--ms-green);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: var(--ms-transition);
}

.l-article .post_content a:not(.wp-block-button__link):hover {
  color: var(--ms-dark-green);
}

/* --- Post Content: Lists --- */
.l-article .post_content ul.wp-block-list,
.l-article .post_content ol.wp-block-list {
  margin: 0 0 1.75rem;
  padding-left: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--ms-text);
}

.l-article .post_content ul.wp-block-list li,
.l-article .post_content ol.wp-block-list li {
  margin-bottom: 0.5rem;
}

.l-article .post_content ul.wp-block-list li::marker {
  color: var(--ms-green);
}

.l-article .post_content ol.wp-block-list li::marker {
  color: var(--ms-green);
  font-weight: 700;
}

/* --- Post Content: Image --- */
.l-article .post_content .wp-block-image {
  margin: 2rem 0;
}

.l-article .post_content .wp-block-image img {
  border-radius: 8px;
  max-width: 100%;
  height: auto;
}

.l-article .post_content .wp-block-image figcaption,
.l-article .post_content .wp-element-caption {
  font-size: 0.8125rem;
  color: var(--ms-text-light);
  text-align: center;
  margin-top: 0.5rem;
}

/* --- Post Content: Blockquote (override SWELL) --- */
.l-article .post_content .wp-block-quote {
  margin: 2rem 0 !important;
  padding: 1.5rem 1.75rem !important;
  background: var(--ms-bg-gray) !important;
  border: none !important;
  border-left: 4px solid var(--ms-green) !important;
  border-radius: 0 8px 8px 0 !important;
  position: relative;
}

.l-article .post_content .wp-block-quote::before,
.l-article .post_content .wp-block-quote::after {
  content: none !important;
  display: none !important;
}

.l-article .post_content .wp-block-quote p {
  font-size: 0.9375rem !important;
  line-height: 1.8 !important;
  color: var(--ms-text) !important;
  margin-bottom: 0.75rem !important;
}

.l-article .post_content .wp-block-quote cite {
  display: block !important;
  font-size: 0.8125rem !important;
  color: var(--ms-text-light) !important;
  font-style: normal !important;
  text-align: right !important;
  opacity: 1 !important;
}

.l-article .post_content .wp-block-quote cite::before {
  content: "\2014\00a0" !important;
}

/* --- Post Content: Table (override SWELL) --- */
.l-article .post_content .wp-block-table {
  margin: 2rem 0 !important;
  overflow-x: auto;
}

.l-article .post_content .wp-block-table table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 0.875rem !important;
  line-height: 1.7 !important;
}

.l-article .post_content .wp-block-table thead {
  background: var(--ms-green) !important;
  color: var(--ms-white-pure) !important;
}

.l-article .post_content .wp-block-table thead th {
  padding: 0.75rem 1rem !important;
  font-weight: 700 !important;
  text-align: left !important;
  border: none !important;
  color: var(--ms-white-pure) !important;
}

.l-article .post_content .wp-block-table tbody td {
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid var(--ms-border-light) !important;
  border-left: none !important;
  border-right: none !important;
  color: var(--ms-text) !important;
}

.l-article .post_content .wp-block-table tbody tr:nth-child(even) {
  background: var(--ms-bg-gray) !important;
}

.l-article .post_content .wp-block-table figcaption {
  font-size: 0.8125rem !important;
  color: var(--ms-text-light) !important;
  margin-top: 0.5rem !important;
}

/* --- Post Content: Buttons (override SWELL) --- */
.l-article .post_content .wp-block-buttons {
  margin: 2rem 0 !important;
}

.l-article .post_content .wp-block-button__link {
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  padding: 0.875rem 2.5rem !important;
  border-radius: var(--ms-radius-full) !important;
  background: var(--ms-lime) !important;
  color: var(--ms-dark-green) !important;
  border: 2px solid var(--ms-dark-green) !important;
  text-decoration: none !important;
  transition: var(--ms-transition);
  display: inline-block;
}

.l-article .post_content .wp-block-button__link:hover {
  background: var(--ms-dark-green) !important;
  border-color: var(--ms-dark-green) !important;
  color: var(--ms-white-pure) !important;
  opacity: 1 !important;
}

.l-article .post_content .is-style-outline .wp-block-button__link {
  background: var(--ms-lime) !important;
  color: var(--ms-dark-green) !important;
  border: 2px solid var(--ms-dark-green) !important;
}

.l-article .post_content .is-style-outline .wp-block-button__link:hover {
  background: var(--ms-dark-green) !important;
  border-color: var(--ms-dark-green) !important;
  color: var(--ms-white-pure) !important;
}

/* --- Post Content: Columns (override SWELL) --- */
.l-article .post_content .wp-block-columns {
  margin: 2rem 0 !important;
  gap: 2rem !important;
}

.l-article .post_content .wp-block-column {
  background: var(--ms-bg-gray) !important;
  padding: 1.5rem !important;
  border-radius: 8px !important;
}

/* h3 inside columns: inherit column card style, no SWELL decoration */
.l-article .post_content .wp-block-column h3.wp-block-heading {
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  color: var(--ms-dark-green) !important;
  margin: 0 0 0.75rem !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

.l-article .post_content .wp-block-column h3.wp-block-heading::before,
.l-article .post_content .wp-block-column h3.wp-block-heading::after {
  content: none !important;
  display: none !important;
}

/* h3 inside group blocks: similar reset */
.l-article .post_content .wp-block-group h3.wp-block-heading {
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  color: var(--ms-dark-green) !important;
  margin: 0 0 0.75rem !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

.l-article .post_content .wp-block-group h3.wp-block-heading::before,
.l-article .post_content .wp-block-group h3.wp-block-heading::after {
  content: none !important;
  display: none !important;
}

/* --- Post Content: Code Block (override SWELL) --- */
.l-article .post_content .wp-block-code {
  margin: 2rem 0 !important;
  background: #1e293b !important;
  color: #e2e8f0 !important;
  padding: 1.25rem 1.5rem !important;
  border-radius: 8px !important;
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
  overflow-x: auto;
  font-size: 0.8125rem !important;
  line-height: 1.7 !important;
}

.l-article .post_content .wp-block-code::before,
.l-article .post_content .wp-block-code::after {
  content: none !important;
  display: none !important;
}

.l-article .post_content .wp-block-code code {
  background: none !important;
  padding: 0 !important;
  color: inherit !important;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
}

/* --- Post Content: Group Block (with bg) --- */
.l-article .post_content .wp-block-group.has-background {
  padding: 1.5rem 2rem !important;
  border-radius: 8px !important;
  margin: 2rem 0 !important;
}

/* --- Post Content: Separator (override SWELL) --- */
.l-article .post_content .wp-block-separator {
  border: none !important;
  border-top: 1px solid var(--ms-border-light) !important;
  margin: 2rem 0 !important;
  opacity: 1 !important;
}

/* --- Post Content: Inline Styles --- */
.l-article .post_content code:not(.wp-block-code code) {
  background: var(--ms-bg-green);
  color: var(--ms-dark-green);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.875em;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.l-article .post_content mark.has-inline-color {
  padding: 0.1rem 0.25rem;
  border-radius: 3px;
}

/* --- Article Footer / Prev-Next Links (override SWELL) --- */
.p-articleFoot {
  margin-top: 2.5rem !important;
}

.p-pnLinks {
  margin: 2rem 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.p-pnLinks__item {
  margin-bottom: 0.75rem !important;
}

.p-pnLinks__link {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 1rem 1.25rem !important;
  background: var(--ms-bg-gray) !important;
  border: none !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: var(--ms-transition);
}

.p-pnLinks__link:hover {
  background: var(--ms-bg-green) !important;
  border-color: var(--ms-green) !important;
}

.p-pnLinks__link::before {
  font-size: 0.75rem !important;
  color: var(--ms-green) !important;
  font-weight: 700 !important;
}

.p-pnLinks__item.-prev .p-pnLinks__link::before {
  content: "\2190\00a0 前の記事" !important;
  display: block !important;
}

.p-pnLinks__item.-next .p-pnLinks__link::before {
  content: "次の記事 \00a0\2192" !important;
  display: block !important;
}

.p-pnLinks__title {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--ms-text) !important;
  line-height: 1.5 !important;
}

/* --- Related Posts (override SWELL flex layout) --- */
.l-articleBottom__section.-related {
  margin-top: 3rem;
  padding-top: 2.5rem;
  padding-bottom: 4rem;
  border-top: 2px solid var(--ms-border-light);
}

.l-articleBottom__title.c-secTitle {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--ms-dark-green) !important;
  margin-bottom: 1.5rem !important;
  padding-left: 1rem !important;
  border-left: 4px solid var(--ms-green) !important;
}

.p-relatedPosts.-type-card {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.25rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.p-relatedPosts.-type-card .p-postList__item {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--ms-white-pure) !important;
  border: 3px solid var(--ms-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: var(--ms-transition);
}

.p-relatedPosts.-type-card .p-postList__item:hover {
  box-shadow: none;
  transform: translateY(-2px);
}

.p-relatedPosts.-type-card .p-postList__link {
  text-decoration: none !important;
  display: block !important;
  height: auto !important;
}

.p-relatedPosts.-type-card .c-postThumb {
  width: 100% !important;
}

.p-relatedPosts.-type-card .c-postThumb__img {
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  width: 100% !important;
}

.p-relatedPosts.-type-card .p-postList__body {
  padding: 0.875rem 1rem !important;
}

.p-relatedPosts.-type-card .p-postList__title {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--ms-text) !important;
  line-height: 1.5 !important;
  margin-bottom: 0.375rem !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-relatedPosts.-type-card .p-postList__times {
  font-size: 0.75rem !important;
  color: var(--ms-text-light) !important;
}

/* --- Sidebar (override SWELL) --- */
#sidebar {
  font-size: 0.875rem !important;
  padding-left: 1.5rem !important;
  padding-top: 2.5rem !important;
  border-left: none !important;
}

#sidebar .c-widget + .c-widget {
  margin-top: 2rem !important;
}

/* Sidebar: Widget Title — ms-section-title と統一 */
#sidebar .c-widget__title {
  font-size: 0.9375rem !important;
  font-weight: 800 !important;
  color: var(--ms-dark-green) !important;
  letter-spacing: 0.06em !important;
  padding-bottom: 0 !important;
  margin-bottom: 1.25rem !important;
  border-bottom: none !important;
  position: relative !important;
  text-align: left !important;
}

#sidebar .c-widget__title::before,
#sidebar .c-widget__title::after {
  content: none !important;
  display: none !important;
}

/* Sidebar: Profile Widget */
#sidebar .p-profileBox {
  text-align: center !important;
  padding: 1.5rem !important;
  background: var(--ms-bg-gray) !important;
  border-radius: 8px !important;
}

#sidebar .p-profileBox__name {
  font-weight: 700 !important;
  color: var(--ms-dark-green) !important;
  margin-bottom: 0.25rem !important;
}

#sidebar .p-profileBox__job {
  font-size: 0.8125rem !important;
  color: var(--ms-text-light) !important;
  line-height: 1.5 !important;
}

/* Sidebar: Navigation Menu */
#sidebar .c-listMenu .menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#sidebar .c-listMenu .menu-item a {
  display: block !important;
  padding: 0.625rem 0.75rem !important;
  color: var(--ms-text) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--ms-border-light) !important;
  font-size: 0.875rem !important;
  transition: var(--ms-transition);
}

#sidebar .c-listMenu .menu-item a:hover {
  color: var(--ms-green) !important;
  background: var(--ms-bg-green) !important;
  padding-left: 1rem !important;
}

/* Sidebar: New Posts Widget */
#sidebar .p-postList.-type-list .p-postList__link {
  display: flex !important;
  gap: 0.75rem !important;
  padding: 0.625rem 0 !important;
  border-bottom: 1px solid var(--ms-border-light) !important;
  text-decoration: none !important;
  align-items: flex-start !important;
}

#sidebar .p-postList.-type-list .p-postList__link:hover .p-postList__title {
  color: var(--ms-green) !important;
}

#sidebar .p-postList.-type-list .c-postThumb {
  flex-shrink: 0 !important;
  width: 80px !important;
}

#sidebar .p-postList.-type-list .c-postThumb__img {
  width: 80px !important;
  height: 56px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
}

#sidebar .p-postList.-type-list .p-postList__title {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--ms-text) !important;
  line-height: 1.5 !important;
  transition: var(--ms-transition);
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}

#sidebar .p-postList.-type-list .p-postList__meta {
  margin-top: 0.25rem !important;
}

#sidebar .p-postList.-type-list .p-postList__times,
#sidebar .p-postList.-type-list .p-postList__cat {
  font-size: 0.6875rem !important;
  color: var(--ms-text-light) !important;
}

/* Sidebar: Sticky Area */
#sidebar .w-fixSide {
  margin-top: 2rem !important;
}

/* --- Article Page Responsive --- */
@media (max-width: 768px) {
  .p-articleHead.c-postTitle {
    padding: 1.5rem 0 1rem;
  }

  .c-postTitle__ttl {
    font-size: var(--ms-font-size-h2);
  }

  .p-articleMetas {
    gap: 0.5rem;
  }

  .p-toc {
    padding: 1.25rem 1.25rem;
    margin: 1.5rem 0 2rem;
  }

  .l-article .post_content > h2.wp-block-heading {
    font-size: var(--ms-font-size-h2) !important;
    margin: 2.5rem 0 1rem !important;
  }

  .l-article .post_content > h3.wp-block-heading {
    font-size: var(--ms-font-size-h3) !important;
    margin: 2rem 0 0.75rem !important;
  }

  .l-article .post_content > p {
    font-size: var(--ms-font-size-body);
    line-height: 1.85;
  }

  .l-article .post_content ul.wp-block-list,
  .l-article .post_content ol.wp-block-list {
    font-size: var(--ms-font-size-body);
    padding-left: 1.25rem;
  }

  .l-article .post_content .wp-block-quote {
    padding: 1.25rem 1.25rem;
  }

  .l-article .post_content .wp-block-table {
    font-size: var(--ms-font-size-small);
  }

  .l-article .post_content .wp-block-table thead th,
  .l-article .post_content .wp-block-table tbody td {
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
  }

  .l-article .post_content .wp-block-code {
    padding: 1rem;
    font-size: 11px;
  }

  .l-article .post_content .wp-block-group.has-background {
    padding: 1.25rem;
  }

  .p-relatedPosts.-type-card {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .p-relatedPosts.-type-card .p-postList__link {
    display: flex !important;
    flex-direction: row !important;
  }

  .p-relatedPosts.-type-card .c-postThumb {
    flex-shrink: 0 !important;
    width: 120px !important;
  }

  .p-relatedPosts.-type-card .c-postThumb__img {
    aspect-ratio: 4 / 3 !important;
    height: 100% !important;
  }

  /* Phase 4: 料金カード・支払い方法・FAQ 480px */
  .ms-plan-card {
    padding: 0.875rem 0.875rem 1rem;
    border-width: 2px;
    border-radius: var(--ms-radius-lg);
  }

  .ms-plan-card__time {
    margin-bottom: 0.5rem;
  }

  .ms-plan-card__prices {
    margin-bottom: 0.5rem;
  }

  .ms-plan-card__tax {
    padding-bottom: 0.375rem;
    margin-bottom: 0.375rem;
    font-size: 12px;
  }

  .ms-plan-card__amount {
    font-size: 24px;
  }

  .ms-plan-card--featured .ms-plan-card__amount {
    font-size: 24px;
  }

  .ms-plan-card__price--main .ms-plan-card__price-amount strong {
    font-size: 20px;
  }

  .ms-plan-card__price {
    margin-bottom: 0.125rem;
    padding-top: 0;
  }

  .ms-plan-card__name {
    font-size: 15px !important;
    margin-bottom: 0.25rem;
    padding-top: 0.25rem;
  }

  .ms-plan-card--featured .ms-plan-card__name {
    font-size: 16px !important;
  }

  .ms-plan-card__desc {
    font-size: 12px;
    margin-bottom: 0.125rem;
  }

  .ms-plan-card__features {
    width: max-content;
    max-width: 100%;
    margin: 0.125rem auto 0;
  }

  .ms-plan-card__features li {
    font-size: 12px;
    padding: 0.125rem 0 0.125rem 1.25rem;
    line-height: 1.4;
    width: max-content;
    max-width: 100%;
  }

  .ms-plan-card__features li::before {
    top: 0.3rem;
    width: 11px;
    height: 11px;
    mask-size: 7px;
  }

  .ms-plan-card__badge {
    font-size: 10px;
    padding: 0.25rem 0.75rem;
    top: -10px;
  }

  .ms-plan-card--featured .ms-plan-card__badge {
    font-size: 11px;
    padding: 0.3rem 1rem;
    top: -11px;
  }

  .ms-plan-card__savings {
    font-size: 12px;
    padding: 0.375rem 0.75rem;
    margin: 0.25rem 0.5rem 0.375rem;
  }

  .ms-card-grid {
    gap: 1.25rem;
  }

  .ms-payment-methods li {
    padding: 0.5rem 1rem;
    font-size: var(--ms-font-size-small);
  }

  .ms-payment-methods__list {
    gap: 0.5rem !important;
  }

  section.ms-faq-preview {
    padding: 48px var(--ms-inner-padding);
  }

  .ms-faq-preview__item-q {
    font-size: var(--ms-font-size-small);
    padding: 1rem;
  }

  .ms-faq-preview__item-a {
    font-size: var(--ms-font-size-small);
    padding: 0.75rem 1rem;
  }
}

/* ==========================================================================
   Phase 4-3: Print Styles
   ========================================================================== */
@media print {
  .ms-skip-link,
  .ms-floating-campaign,
  .ms-cta,
  .l-fixHeader,
  .l-footer,
  .p-mainVisual,
  nav,
  .ms-btn {
    display: none !important;
  }

  .ms-section {
    padding: 1rem 0;
    break-inside: avoid;
  }

  body {
    color: #000;
    background: #fff;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #666;
  }
}

/* ==========================================================================
   Page Transition: Fade In / Fade Out
   ========================================================================== */
body {
  opacity: 0;
}

body.ms-page-visible {
  opacity: 1;
  transition: opacity 0.4s ease;
}

body.ms-page-leave {
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

/* ==========================================================================
   Google Maps: Mira Study ピンラベル
   ========================================================================== */
.ms-map-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.ms-map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  z-index: 10;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ms-map-pin__label {
  background: var(--ms-green);
  color: var(--ms-white-pure);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  letter-spacing: 0.04em;
}

.ms-map-pin__arrow {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--ms-green);
}

.ms-map-pin__dot {
  width: 10px;
  height: 10px;
  background: var(--ms-green);
  border: 2px solid var(--ms-white-pure);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  margin-top: -2px;
}