/* ========================================
   PILATES PAGE
======================================== */

body.page-id-200 {
    margin: 0;
    padding: 0;

    background: #fff;
}


/* ========================================
   WORDPRESS / LIGHTNING RESET
======================================== */

body.page-id-200 .site-header,
body.page-id-200 .page-header,
body.page-id-200 .breadcrumb,
body.page-id-200 .site-footer,
body.page-id-200 .sub-section,
body.page-id-200 .widget-area,
body.page-id-200 .widget_archive,
body.page-id-200 .widget_categories,
body.page-id-200 #block-5,
body.page-id-200 #block-6 {
    display: none !important;
}


body.page-id-200 .site-body,
body.page-id-200 .site-body-container,
body.page-id-200 .site-body-container.container,
body.page-id-200 .container {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


body.page-id-200 .main-section,
body.page-id-200 .entry-body {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Lightningの見出し装飾を解除 */

body.page-id-200 h1,
body.page-id-200 h2,
body.page-id-200 h3 {
    border: none !important;
    box-shadow: none !important;
}


/* ========================================
   PILATES WRAPPER
======================================== */

#pilates {
    width: 100%;

    margin: 0;
    padding: 0;

    color: #4f4860;

    background: #fff;
}


#pilates .pilates-wrapper {
    width: 100%;
    max-width: 390px;

    margin: -20px auto -25px;

    overflow: hidden;
}


/* WordPressが本文内に生成する余計なp対策 */

body.page-id-200 #pilates > p {
    margin: 0 !important;
    padding: 0 !important;
}


/* ========================================
   GrowHappily HEADER
======================================== */

body.page-id-200 .header {
    position: fixed;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 390px;
    max-width: 100%;
    height: 54px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 15px 12px 20px;

    box-sizing: border-box;

    background-image:
        url("https://wp.growhappily.net/wp-content/uploads/2026/09/header-back.2png.png");

    background-repeat: no-repeat;
    background-position: center;
    background-size: 220% auto;

    backdrop-filter: blur(8px);

    z-index: 9999;

    overflow: visible;
}


/* =========================
   PILATES HEADER FONT
   VOICEページと統一
========================= */

/* 上段：愛媛県 松山市 女性専門 マシンピラティス */
body.page-id-200 .header .header__note {
  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    serif !important;

  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: .05em !important;
  color: #716581 !important;
}

/* 下段：GrowHappily */
body.page-id-200 .header .header__note span {
  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    serif !important;

  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: #716581 !important;
}


/* ========================================
   HEADER 左側ミモザ
======================================== */

body.page-id-200 .header-mimoza {
    position: absolute;

    top: 4px;
    left: -2px;

    width: 50px;

    padding-top: 0;

    z-index: 5;

    pointer-events: none;

    transform: rotate(35deg);

    opacity: .75;
}


/* ========================================
   HEADER タイトル
======================================== */

body.page-id-200 .header__note {
    margin: 0;

    padding: 0 0 0 15px;

    color: #716581;

    font-size: 11px;

    letter-spacing: .05em;
    line-height: 1.1;

    white-space: nowrap;

    z-index: 999;

    transform: translateY(8px);
}


body.page-id-200 .header__note span {
    display: block;

    margin-top: 2px;

    font-size: 18px;
    font-weight: 500;
}



/* ========================================
   HEADER 右側の葉っぱ
======================================== */

body.page-id-200 .header-leaf {
    position: absolute;

    top: 15px;
    right: 50px;

    width: 26px;

    z-index: 5;

    pointer-events: none;

    transform: rotate(5deg);
}


/* ========================================
   NAVIGATION
======================================== */

body.page-id-200 .header .nav {
    position: absolute;

    top: 100%;
    right: 0;

    width: 80%;
    max-width: 320px;

    padding: 40px 30px;

    background: rgba(255, 255, 255, .95);

    border-radius: 20px 0 0 20px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .1);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-20px);

    transition: .4s ease;
}


body.page-id-200 .header .nav ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


body.page-id-200 .header .nav a {
    display: block;

    padding: 14px 8px;

    color: #716581 !important;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 17px;

    line-height: 1.5;

    text-decoration: none !important;
}


/* メニューOPEN */

body.page-id-200 .header .nav.open {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/* ========================================
   HAMBURGER BUTTON
======================================== */

body.page-id-200 .header button.menu {
    position: relative;

    z-index: 20;

    top: 30px;
    left: 20px;

    width: 30px !important;
    min-width: 30px !important;

    height: 30px !important;
    min-height: 30px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    border-radius: 25% !important;

    background: #716581 !important;

    cursor: pointer;
}


/* ハンバーガー3本線 */

body.page-id-200 .header button.menu > span {
    position: absolute !important;

    left: 6px !important;

    display: block !important;

    width: 16px !important;
    height: 2px !important;
    min-height: 2px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    border-radius: 1.5px;

    background: #fff !important;

    visibility: visible !important;

    opacity: 1 !important;
}


body.page-id-200 .header button.menu > span:nth-of-type(1) {
    top: 6px !important;
}


body.page-id-200 .header button.menu > span:nth-of-type(2) {
    top: 13px !important;
}


body.page-id-200 .header button.menu > span:nth-of-type(3) {
    top: 20px !important;
}


/* ========================================
   HAMBURGER OPEN → ×
======================================== */

body.page-id-200 .header button.menu.active > span:nth-of-type(1) {
    top: 14px !important;

    transform: rotate(45deg) !important;
}


body.page-id-200 .header button.menu.active > span:nth-of-type(2) {
    opacity: 0 !important;
}


body.page-id-200 .header button.menu.active > span:nth-of-type(3) {
    top: 14px !important;

    transform: rotate(-45deg) !important;
}


/* =========================
   ハンバーガーメニュー
   スクロール対応
========================= */

.header .nav {
    max-height: calc(100dvh - 75px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding-bottom: 35px;
}


/* ========================================
   Lightning標準モバイルメニューを非表示
======================================== */

body.page-id-200 .vk-mobile-nav-menu-btn,
body.page-id-200 .vk-mobile-nav {
    display: none !important;
}

/* ========================================
   HERO
======================================== */

#pilates .pilates-hero {
    position: relative;

    min-height: 300px;

    margin-top: -25px;

    overflow: hidden;

    background: #fff;
}


/* ========================================
   HERO PHOTO
======================================== */

#pilates .pilates-hero__visual {
    position: absolute;

    top: 0;
    right: -10px;

    width: 108%;
    height: 110%;

    z-index: 1;

    background-image:
        url("https://wp.growhappily.net/wp-content/uploads/2026/09/naikann.jpg");

    background-repeat: no-repeat;
    background-size: auto 80%;
    background-position: 15% center;
}


/* ========================================
   写真の上に白グラデーション
======================================== */

#pilates .pilates-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    background:
            linear-gradient(
            90deg,
            rgba(255, 255, 255, .95) 0%,
            rgba(255, 255, 255, .9) 27%,
            rgba(255, 255, 255, .85) 43%,
            rgba(255, 255, 255, .30) 64%,
            rgba(255, 255, 255, .25) 100%
        );
}


/* ========================================
   HERO TEXT
======================================== */

#pilates .pilates-hero__content {
    position: relative;

    z-index: 4;

    width: 62%;

    padding:
        35px
        0
        70px
        20px;

    box-sizing: border-box;
}


#pilates .pilates-hero__en {
    margin: 50px 0 10px;

    color: #716581;

    font-family: Georgia, serif;

    font-size: 11px;

    line-height: 1;

    letter-spacing: .38em;
}


/* PILATES下の短いライン */

#pilates .pilates-hero__en::after {
    content: "";

    display: block;

    width: 85px;
    height: .8px;

    margin: 15px 0 0 -5px;

    background: rgba(113, 101, 129, .65);
}


#pilates .pilates-hero__title {
    margin: 0;

    color: #4f4860;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        "Noto Serif JP",
        serif;

    font-size: 25px;
    font-weight: 400;

    line-height: 1.55;

    letter-spacing: .07em;

    word-break: keep-all;
    white-space: nowrap;
}


/* 元HTMLに入っているライン */

#pilates .pilates-hero__line {
    width: 220px;
    height: .8px;

    margin: 0 0 24px -5px;

    background: rgba(79, 72, 96, .6);
}


#pilates .pilates-hero__lead {
    margin: 0;

    color: #4f4860;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        "Noto Serif JP",
        serif;

    font-size: 14px;
    font-weight: 400;

    line-height: 2.05;

    letter-spacing: .08em;
}

/* ========================================
   ABOUT
======================================== */

#pilates .pilates-about {
    position: relative;
    margin-top: -25px;
    padding: 35px 28px 35px;
    background:
        radial-gradient(
            circle at 90% 82%,
            rgba(233, 218, 255, .55) 0%,
            rgba(233, 218, 255, .22) 24%,
            transparent 48%
        ),
        radial-gradient(
            circle at 28% 5%,
            rgba(255, 252, 200, .35) 0%,
            transparent 38%
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .95) 0%,
            rgba(255, 255, 255, .88) 27%,
            rgba(255, 255, 255, .77) 43%,
            rgba(255, 255, 255, .30) 64%,
            rgba(255, 255, 255, .05) 100%
        );;
    color: #4f4860;
}

#pilates .pilates-about__inner {
    width: 100%;
    margin: 0 auto;
}

/* ABOUT */
#pilates .pilates-about__en {
    margin: 0 7px 8px;
    color: #9b8eaa;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    letter-spacing: .28em;
    line-height: 1;
}

/* ピラティスの始まり */
#pilates .pilates-about__title {
    position: relative;
    margin: 0 0 44px;
    padding: 0 0 17px;

    color: #4f4860;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        "Noto Serif JP",
        serif;

    font-size: 25px;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.55;
}

/* タイトル下の細いライン */
#pilates .pilates-about__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 10px;

    width: 270px;
    height: 1px;

    background: #b8a9c7;
}

/* 本文 */
#pilates .pilates-about__text {
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        "Noto Serif JP",
        serif;

    font-size: 14px;
    font-weight: 400;
    line-height: 2.15;
    letter-spacing: .055em;
}

#pilates .pilates-about__text p {
    margin: 0 0 30px;
}

/* CONTROLOGYなどの強調 */
#pilates .pilates-about__text strong {
    color: #716581;
    font-weight: 600;
}

/* それがピラティスです。 */
#pilates .pilates-about__message {
    margin: 38px 0 40px !important;

    color: #716581;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .1em;
}

/* GrowHappilyの考え方 */
#pilates .pilates-about__grow {
    position: relative;

    margin: 0 !important;
    padding: 24px 20px 24px 22px;

    background: rgba(233, 218, 255, .27);
    border-left: 2px solid #b8a9c7;

    font-size: 13.5px;
    line-height: 2.1;
}

/* ========================================
   PILATES MESSAGE PHOTO
======================================== */

#pilates .pilates-message {
    position: relative;
    padding: 0;
    margin-top: -40px;
    background: #fff;
    overflow: hidden;
}

/* PHOTO */
#pilates .pilates-message__visual {
    position: relative;

    width: calc(100% - 85px);
    height: 230px;

    margin: 0 0 0 auto;

    background-image:
    linear-gradient(
        rgba(255, 255, 255, .75),
        rgba(255, 255, 255, .75)
    ),
    url("https://wp.growhappily.net/wp-content/uploads/2026/10/S__293085187_0.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

    border-radius: 80px 0 0 0;
}

/* 写真の下を白に溶かす */
#pilates .pilates-message__visual::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 48%;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .35) 40%,
            rgba(255, 255, 255, .95) 90%,
            #fff 100%
        );
}


/* MESSAGE */

#pilates .pilates-message__content {
    position: absolute;
    left: 0;
    bottom: 55px;
    z-index: 3;

    width: 100%;
    padding: 0 30px;

    box-sizing: border-box;
}

/* Pilates */
#pilates .pilates-message__script {
    margin: 0 0 5px;

    color: rgba(113, 101, 129, .48);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    font-style: italic;

    letter-spacing: .16em;
}

/* メインコピー */
#pilates .pilates-message__text {
    margin: 0;

    color: #4f4860;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        "Noto Serif JP",
        serif;

    font-size: 19px;
    font-weight: 500;

    line-height: 1.7;
    letter-spacing: .08em;
    text-shadow:
        0 0 3px rgba(255, 255, 255, .35),
        0 0 8px rgba(255, 255, 255, .35),
        0 0 14px rgba(255, 255, 255, .35);
}

/* クリームの四角 */
#pilates .pilates-message__content::before {
    content: "";

    position: absolute;
    left: 15px;
    bottom:  10px;

    width: 260px;
    height: 115px;

    background: rgba(255, 252, 200, .45);

    z-index: 0;
}

/* 文字を四角より前へ */
#pilates .pilates-message__script,
#pilates .pilates-message__text {
    position: relative;
    z-index: 1;
}

/* ========================================
   PILATES EFFECT
======================================== */

#pilates .pilates-effect {
    position: relative;
    padding: 15px 22px 5px;
    background: #fff;
    color: #4f4860;
}

#pilates .pilates-effect__inner {
    width: 100%;
    margin: 0 auto;
}

/* EFFECT */
#pilates .pilates-effect__en {
    margin: 0 5px -5px;

    color: #9b8eaa;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    letter-spacing: .28em;
    line-height: 1;
}

/* TITLE */
#pilates .pilates-effect__title {
    position: relative;

    margin: 0 0 24px;
    padding-bottom: 16px;

    color: #4f4860;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        "Noto Serif JP",
        serif;

    font-size: 24px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: .06em;
}

#pilates .pilates-effect__title::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 10px;

    width: 210px;
    height: .9px;

    background: #b8a9c7;
}

/* 小見出し */
#pilates .pilates-effect__label {
    margin: 0 0 38px;

    color: #8f839e;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 12px;
    line-height: 1.8;
    letter-spacing: .06em;
}


/* ========================================
   5 CIRCLES
======================================== */

#pilates .pilates-effect__list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    row-gap: 8px;

    width: 100%;
    margin: 0 auto;
}

/* 全アイテム */
#pilates .pilates-effect__item {
    width: auto;
    text-align: center;
    transform: none;
}

/* 上段 */
#pilates .pilates-effect__item:nth-of-type(1) {
    grid-column: 1 / 3;
}

#pilates .pilates-effect__item:nth-of-type(2) {
    grid-column: 3 / 5;
}

#pilates .pilates-effect__item:nth-of-type(3) {
    grid-column: 5 / 7;
}

/* 下段 */
#pilates .pilates-effect__item:nth-of-type(4) {
    grid-column: 2 / 4;
}

#pilates .pilates-effect__item:nth-of-type(5) {
    grid-column: 4 / 6;
}

/* EFFECT内にWordPressが自動生成した空pを非表示 */
#pilates .pilates-effect__list > p {
    display: none !important;
}

/* 円 */
#pilates .pilates-effect__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 88px;
    height: 88px;

    margin: 0 auto 12px;

    box-sizing: border-box;

    border: 1px solid rgba(113, 101, 129, .42);
    border-radius: 50%;

    color: rgba(113, 101, 129, .55);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    letter-spacing: .08em;

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(233, 218, 255, .28),
            rgba(255, 255, 255, .12) 55%,
            transparent 75%
        );
}


/* 円の下の文字 */
#pilates .pilates-effect__name {
    margin: 0;

    color: #4f4860;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        "Noto Serif JP",
        serif;

    font-size: 12px;
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: .04em;
}

/* EFFECT アイコン画像 */
#pilates .pilates-effect__img {
    display: block;
    width: 70px;
    height: 70px;
    object-fit: contain;

    margin: 0 auto;
}

/* ========================================
   WHEN
   運動効果が出る期間
======================================== */

#pilates .pilates-when {
    position: relative;
    padding: 35px 24px 5px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 100% 8%,
            rgba(233, 218, 255, .38) 0%,
            rgba(233, 218, 255, .14) 25%,
            transparent 48%
        ),
        radial-gradient(
            circle at 0% 52%,
            rgba(255, 252, 200, .30) 0%,
            transparent 35%
        ),
        #fff;

    color: #4f4860;
}

#pilates .pilates-when__inner {
    width: 100%;
    margin: 0 auto;
}


/* ========================================
   SECTION TITLE
======================================== */

#pilates .pilates-when__en {
    margin: 0 0 8px;

    color: #9b8eaa;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .28em;
}

#pilates .pilates-when__title {
    position: relative;

    margin: 0 0 30px;
    padding: 0 0 17px;

    color: #4f4860;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        "Noto Serif JP",
        serif;

    font-size: 25px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: .07em;
}

#pilates .pilates-when__title::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 46px;
    height: 1px;

    background: #b8a9c7;
}


/* ========================================
   INTRO
======================================== */

#pilates .pilates-when__lead {
    margin: 0 0 22px;

    color: #716581;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        "Noto Serif JP",
        serif;

    font-size: 16px;
    font-weight: 600;
    line-height: 2;
    letter-spacing: .055em;
}

#pilates .pilates-when__intro {
    margin: 0 0 50px;

    color: #4f4860;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        "Noto Serif JP",
        serif;

    font-size: 13px;
    line-height: 2.05;
    letter-spacing: .04em;
}


/* ========================================
   JOSEPH PILATES QUOTE
======================================== */

#pilates .pilates-when__quote {
    position: relative;

    margin: 0 0 72px;
    padding: 38px 14px 30px;

    background: rgba(255, 255, 255, .72);

    border-top: 1px solid rgba(184, 169, 199, .35);
    border-bottom: 1px solid rgba(184, 169, 199, .35);

    text-align: center;
}

#pilates .pilates-when__quote-en {
    margin: 0 0 13px;

    color: #a493b2;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    font-style: italic;
    line-height: 1;
    letter-spacing: .18em;
}

#pilates .pilates-when__quote-label {
    margin: 0 0 20px;

    color: #716581;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 12px;
    line-height: 1.9;
    letter-spacing: .055em;
}


/* ========================================
   10 / 20 / 30
======================================== */

#pilates .pilates-when__count {
    position: relative;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    width: 100%;
    margin: 0 auto -10px;
}

#pilates .pilates-when__count-item {
    position: relative;

    min-width: 0;
    padding: 4px 4px 0;

    text-align: center;
}

/* 10 → 20 → 30 をつなぐライン */
#pilates .pilates-when__count::before {
    content: "";

    position: absolute;
    top: 34px;
    left: 15%;
    right: 15%;

    height: 1px;

    background: rgba(184, 169, 199, .35);
}


/* 数字 */
#pilates .pilates-when__count-number {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 60px;
    height: 60px;

    border: 1px solid rgba(113, 101, 129, .38);
    border-radius: 50%;

    background: #fff;

    color: #716581;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
}


/* 「回」 */
#pilates .pilates-when__count-unit {
    position: relative;
    z-index: 3;

    margin-left: -5px;

    color: #8f819d;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 10px;
}


/* 数字の下の説明 */
#pilates .pilates-when__count-item p {
    position: relative;
    z-index: 2;

    margin: 14px 0 0;

    color: #4f4860;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 11px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: .025em;
}


/* 引用の締め */
#pilates .pilates-when__quote-text {
    margin: 0 0 15px;

    color: #716581;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 12px;
    line-height: 1.8;
    letter-spacing: .04em;
}

#pilates .pilates-when__quote-note {
    margin: 0;

    color: #9a929f;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 9.5px;
    line-height: 1.7;
    letter-spacing: .02em;
}


/* ========================================
   EXERCISE PERIOD TITLE
======================================== */

#pilates .pilates-when__period-title {
    margin: 0 0 42px;
    text-align: center;
}

#pilates .pilates-when__period-en {
    margin: 0 0 10px;

    color: #a493b2;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 10px;
    line-height: 1;
    letter-spacing: .22em;
}

#pilates .pilates-when__period-title h3 {
    position: relative;

    margin: 0;
    padding-bottom: 16px;

    color: #4f4860;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 18px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: .06em;
}

#pilates .pilates-when__period-title h3::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 0;

    width: 35px;
    height: 1px;

    transform: translateX(-50%);

    background: #b8a9c7;
}


/* ========================================
   TIMELINE
======================================== */

#pilates .pilates-when__timeline {
    position: relative;
}


/* 縦ライン */
#pilates .pilates-when__timeline::before {
    content: "";

    position: absolute;
    top: 21px;
    bottom: 25px;
    left: 20px;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            rgba(184, 169, 199, .25),
            rgba(113, 101, 129, .55),
            rgba(184, 169, 199, .22)
        );
}


/* 01 / 02 / 03 */
#pilates .pilates-when__item {
    position: relative;

    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: 10px;

    margin: 0 0 52px;
}

#pilates .pilates-when__item:last-child {
    margin-bottom: 0;
}

#pilates .pilates-when__number {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    box-sizing: border-box;

    border: 1px solid rgba(113, 101, 129, .42);
    border-radius: 50%;

    background: #fff;

    color: #8f819d;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 10px;
    line-height: 1;
    letter-spacing: .08em;
}


/* ========================================
   TIMELINE TEXT
======================================== */

#pilates .pilates-when__content {
    padding-top: 0;
}

#pilates .pilates-when__period {
    margin: 0 0 5px;

    color: #a493b2;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: .16em;
}

#pilates .pilates-when__heading {
    margin: 0 0 14px;

    color: #716581;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        "Noto Serif JP",
        serif;

    font-size: 17px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .05em;
}

#pilates .pilates-when__text {
    margin: 0 0 13px;

    color: #4f4860;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        "Noto Serif JP",
        serif;

    font-size: 12.5px;
    line-height: 2;
    letter-spacing: .035em;
}

#pilates .pilates-when__text:last-child {
    margin-bottom: 0;
}


/* ========================================
   NOTE
======================================== */

#pilates .pilates-when__note {
    margin: 46px 0 0;
    padding: 18px 4px 0;

    border-top: 1px solid rgba(184, 169, 199, .28);

    color: #918995;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 10px;
    line-height: 1.8;
    letter-spacing: .02em;
}

/* ========================================
   RECOMMEND
   こんな方におすすめです
======================================== */

#pilates .pilates-recommend {
    position: relative;
    padding: 55px 24px 0;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 100% 5%,
            rgba(233, 218, 255, .42) 0%,
            rgba(233, 218, 255, .15) 26%,
            transparent 48%
        ),
        radial-gradient(
            circle at 0% 75%,
            rgba(255, 252, 200, .38) 0%,
            rgba(255, 252, 200, .12) 25%,
            transparent 46%
        ),
        #fff;

    color: #4f4860;
}

#pilates .pilates-recommend__inner {
    width: 100%;
    margin: 0 auto;
}


/* ========================================
   TITLE
======================================== */

#pilates .pilates-recommend__en {
    margin: 0 0 8px;

    color: #9b8eaa;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .28em;
}

#pilates .pilates-recommend__title {
    position: relative;

    margin: 0 0 28px;
    padding: 0 0 17px;

    color: #4f4860;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        "Noto Serif JP",
        serif;

    font-size: 24px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: .055em;
}

#pilates .pilates-recommend__title::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 46px;
    height: 1px;

    background: #b8a9c7;
}


/* ========================================
   LEAD
======================================== */

#pilates .pilates-recommend__lead {
    margin: 0 0 15px;

    color: #716581;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        "Noto Serif JP",
        serif;

    font-size: 14px;
    font-weight: 500;
    line-height: 2;
    letter-spacing: .055em;
}

/* ========================================
   CHECK LIST
   ひとつのBOXにまとめる
======================================== */

#pilates .pilates-recommend__list {
    position: relative;

    display: flex;
    flex-direction: column;
    gap: 0;

    width: 100%;
    margin: 0;
    padding: 15px 22px;

    box-sizing: border-box;

    border: none;
    border-radius: 0 34px 0 34px;

    background:
        linear-gradient(
            135deg,
            rgba(233, 218, 255, .50),
            rgba(255, 255, 255, .78)
        );
}


/* 各項目 */
#pilates .pilates-recommend__item {
    position: relative;

    display: flex;
    align-items: flex-start;
    gap: 12px;

    min-height: 0;

    margin: 0;
    padding: 9px 0;

    border: none;
    border-radius: 0;

    background: transparent;
}


/* CHECK */
#pilates .pilates-recommend__check {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 21px;
    height: 21px;

    margin-top: 1px;

    border: none;
    border-radius: 50%;

    background: rgba(183, 163, 207, .52);

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1;
}


/* TEXT */
#pilates .pilates-recommend__item p {
    margin: 0;

    color: #4f4860;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        "Noto Serif JP",
        serif;

    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: .035em;
}
/* ========================================
   FINAL MESSAGE
======================================== */

#pilates .pilates-recommend__message {
    position: relative;

    margin: 25px -24px 0;
    padding: 15px 28px 10px;

    text-align: center;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(255, 252, 200, .48) 0%,
            transparent 40%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(233, 218, 255, .52) 0%,
            transparent 45%
        ),
        rgba(255, 255, 255, .62);
}


/* English */
#pilates .pilates-recommend__message-en {
    margin: 0 0 18px;

    color: #a493b2;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    font-style: italic;
    line-height: 1;
    letter-spacing: .18em;
}


/* MAIN MESSAGE */
#pilates .pilates-recommend__message-main {
    position: relative;

    margin: 0 0 30px;
    padding-bottom: 25px;

    color: #716581;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        "Noto Serif JP",
        serif;

    font-size: 20px;
    font-weight: 500;
    line-height: 1.9;
    letter-spacing: .07em;
}

#pilates .pilates-recommend__message-main::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 0;

    width: 36px;
    height: 1px;

    transform: translateX(-50%);

    background: rgba(113, 101, 129, .42);
}


/* SUB TEXT */
#pilates .pilates-recommend__message-text {
    margin: 0;

    color: #4f4860;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        "Noto Serif JP",
        serif;

    font-size: 12px;
    line-height: 2;
    letter-spacing: .035em;
}

/* ========================================
   PILATES CTA
   FINAL MESSAGEと一体化
======================================== */

#pilates .pilates-cta {
    position: relative;

    margin: -1px -24px -26px;
    padding: 20px 28px 45px;

    box-sizing: border-box;
    text-align: center;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(233, 218, 255, .52) 0%,
            transparent 42%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(255, 252, 200, .48) 0%,
            transparent 42%
        ),
        rgba(255, 255, 255, .62);
}


/* ========================================
   PRICE
======================================== */

#pilates .pilates-cta__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;

    margin: 0 0 22px;

    color: #716581;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
}

#pilates .pilates-cta__price span {
    font-size: 14px;
    letter-spacing: .08em;
}

#pilates .pilates-cta__price strong {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .04em;
}


/* ========================================
   BUTTON
======================================== */

#pilates .pilates-cta__button {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 60px;

    margin: 0 auto;
    padding: 0 52px 0 28px;

    box-sizing: border-box;

    border-radius: 2px;

    background: #716581;

    color: #fff !important;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .08em;

    text-decoration: none !important;

    box-shadow: 0 8px 20px rgba(79, 72, 96, .12);

    transition:
        transform .25s ease,
        opacity .25s ease;
}

#pilates .pilates-cta__button:hover {
    color: #fff !important;
    opacity: .88;
    transform: translateY(-2px);
}


/* ARROW */
#pilates .pilates-cta__arrow {
    position: absolute;
    right: 22px;

    font-family: Georgia, serif;
    font-size: 18px;
    font-weight: 400;

    transition: transform .25s ease;
}

#pilates .pilates-cta__button:hover .pilates-cta__arrow {
    transform: translateX(4px);
}


/* ========================================
   NOTE
======================================== */

#pilates .pilates-cta__note {
    margin: 13px 0 0;

    color: #8f8797;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 10px;
    line-height: 1.7;
    letter-spacing: .025em;
}



/* =========================
   PILATES PC版 背景・シャドウ
========================= */

@media screen and (min-width: 768px) {

  /* PC画面全体の背景画像 */
  html {
    background:
      url("https://wp.growhappily.net/wp-content/uploads/2026/10/pc-back-ground.jpg")
      center center / cover fixed no-repeat !important;
  }

  /* WordPress側の白背景を解除 */
  body.page-id-200,
  body.page-id-200 .site,
  body.page-id-200 .site-body,
  body.page-id-200 .site-body-container,
  body.page-id-200 .container,
  body.page-id-200 .main-section,
  body.page-id-200 .entry-body,
  body.page-id-200 #pilates {
    background: transparent !important;
  }

  /* 中央390pxのコンテンツ */
  body.page-id-200 #pilates .pilates-wrapper {
    position: relative;
    width: 390px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: #fff !important;

    box-shadow:
      0 0 35px 15px rgba(255,255,255,.75),
      0 0 75px 30px rgba(255,255,255,.35),
      0 10px 35px rgba(79,72,96,.10);
  }
}

/* =========================
   Pilatesとは？ フッター調整
   PAGE ID : 200
========================= */

body.page-id-200 .gh-footer {
  margin-top: -50px !important;
  background-color: #f4effb !important;
}