/* ========================================
   VOICE PAGE
======================================== */

body.page-id-147 {
    margin: 0;
    background: #fff;
    color: #4f4860;

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


/* ========================================
   WORDPRESS / LIGHTNING 調整
======================================== */

/* Lightning標準ヘッダー・ページタイトル・パンくず */
body.page-id-147 .site-header,
body.page-id-147 .page-header,
body.page-id-147 .breadcrumb {
    display: none !important;
}


/* Lightningモバイルメニュー */
body.page-id-147 .vk-mobile-nav-menu-btn,
body.page-id-147 .vk-mobile-nav {
    display: none !important;
}


/* サイドバー・ウィジェット */
body.page-id-147 .sub-section,
body.page-id-147 .widget-area,
body.page-id-147 .widget_archive,
body.page-id-147 .widget_categories,
body.page-id-147 #block-5,
body.page-id-147 #block-6 {
    display: none !important;
}


/* Lightning標準フッター */
body.page-id-147 .site-footer {
    display: none !important;
}


/* 上下余白 */
body.page-id-147 .site-body {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* Lightningの左右余白を解除 */
body.page-id-147 .site-body-container,
body.page-id-147 .site-body-container.container,
body.page-id-147 .site-body-main,
body.page-id-147 .main-section {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ========================================
   WORDPRESS 自動生成の余白対策
======================================== */

body.page-id-147 #voice > p:empty {
    display: none !important;

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

    height: 0 !important;
    line-height: 0 !important;
}


body.page-id-147 .voice-wrapper > p {
    margin: 0 !important;
    padding: 0 !important;

    height: 0 !important;
    line-height: 0 !important;
}


body.page-id-147 .voice-wrapper > p > br {
    display: none !important;
}


body.page-id-147 #voice main > p {
    margin: 0 !important;
    padding: 0 !important;

    height: 0 !important;
    min-height: 0 !important;

    line-height: 0 !important;

    display: none !important;
}


/* ========================================
   PAGE WRAPPER
======================================== */

#voice {
    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #fff;
}


#voice .voice-wrapper {
    position: relative;

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

    margin: 0 auto;

    background: #fff;
}

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

body.page-id-147 .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: 15px 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;
}


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

body.page-id-147 .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-147 .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-147 .header__note span {
    display: block;

    margin-top: 2px;

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


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

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

    top: 15px;
    right: 50px;

    width: 26px;

    z-index: 5;

    pointer-events: none;

    transform: rotate(5deg);
}

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

body.page-id-147 .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-147 .header .nav ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


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

    padding: 14px 8px;

    color: #716581;

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

    font-size: 17px;

    line-height: 1.5;

    text-decoration: none;
}


/* メニューOPEN */
body.page-id-147 .header .nav.open {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

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

body.page-id-147 .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-147 .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-147 .header button.menu > span:nth-of-type(1) {
    top: 6px !important;
}


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


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

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

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

    transform: rotate(45deg) !important;
}


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


body.page-id-147 .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;
}

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

#voice .voice-hero {
    position: relative;

    min-height: 300px;

    padding:
        35px
        25px
        30px;

    box-sizing: border-box;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 92% 25%,
            rgba(233, 218, 255, .80) 0%,
            rgba(233, 218, 255, .38) 27%,
            transparent 53%
        ),
        radial-gradient(
            circle at 3% 75%,
            rgba(255, 252, 200, .60) 0%,
            transparent 40%
        ),
        #fff;
}

    font-size: 10px;

    letter-spacing: .08em;
}


/* ========================================
   HERO 見出し
======================================== */

#voice .voice-hero__heading {
    position: relative;

    z-index: 5;
}


#voice .voice-hero__en {
    margin: 60px 0 8px;

    color: #8a6ca6;

    font-family: "Times New Roman", serif;

    font-size: 30px;
    font-style: italic;
    font-weight: 400;

    letter-spacing: 2px;

    line-height: 1;
}


#voice .voice-hero__title {
    margin: 0 !important;
    padding: 0 !important;

    color: #595757;

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

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

    line-height: 1.5;

    letter-spacing: 0;

    border: none !important;

    background: none !important;

    box-shadow: none !important;
}


#voice .voice-hero__title::before,
#voice .voice-hero__title::after {
    content: none !important;

    display: none !important;
}


/* ========================================
   HERO リード文
======================================== */

#voice .voice-hero__lead {
    margin: 0;

    color: #716581;

    font-size: 13px;

    line-height: 2;

    letter-spacing: .07em;
}


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

#voice .voice-hero__visual {
    position: absolute;

    right: 20px;
    top: -15px;

    z-index: 2;

    width: 225px;
    height: 310px;

    pointer-events: none;
}


#voice .voice-hero__photo {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 120px 0 0 0;
}


#voice .voice-hero__lavender {
    position: absolute;

    right: 5px;
    bottom: 85px;
    left: auto;

    width: 100px;
    height: auto;

    z-index: 3;

    opacity: .45;

    transform: rotate(-15deg);

    pointer-events: none;
}

/* HERO 下部の白い曲線 */
#voice .voice-hero::after {
    content: "";

    position: absolute;

    left: -10%;
    bottom: -55px;

    z-index: 10;

    width: 120%;
    height: 105px;

    background: #fff;

    border-radius:
        50% 50% 0 0 /
        65% 65% 0 0;
}


/* 文字下の横ライン */
#voice .voice-hero__heading::after {
    content: "";

    position: absolute;

    left: 0;
    top: calc(100% + 24px);

    width: 205px;
    height: 1px;

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


/* ラベンダー横の縦ライン */
#voice .voice-hero__visual::after {
    content: "";

    position: absolute;

    right: 0;
    top: 120px;

    width: 1px;
    height: 115px;

    background: rgba(113, 101, 129, .18);

    z-index: 2;
}

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

#voice .voice-intro {
    position: relative;

    padding:
        0
        28px
        0;

    box-sizing: border-box;

    background: #fff;
}


#voice .voice-intro__inner {
    position: relative;

    width: 100%;

    margin: -5px auto;
}


#voice .voice-intro__en {
    margin:
        0
        0
        5px;

    color: #9b8aaa;

    font-family:
        "Times New Roman",
        serif;

    font-size: 15px;
    font-style: italic;

    letter-spacing: .12em;
}


#voice .voice-intro__title {
    margin: 0 !important;
    padding: 0 !important;

    color: #595757;

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

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

    line-height: 1.8;

    letter-spacing: .04em;

    border: none !important;
    background: none !important;
    box-shadow: none !important;
}


#voice .voice-intro__title::before,
#voice .voice-intro__title::after {
    content: none !important;

    display: none !important;
}

#voice .voice-intro__line {
    width: 280px;
    height: .5px;

    margin:
        15px
        0
        20px;

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


#voice .voice-intro__text {
    margin:
        0
        0
        22px;

    color: #665f6c;

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

    font-size: 14px;

    line-height: 2.15;

    letter-spacing: .045em;
}


#voice .voice-intro__note {
    margin:
        32px
        0
        0;

    color: #9a929d;

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

    font-size: 10px;

    line-height: 1.8;

    letter-spacing: .03em;
}


/* ========================================
   CASE SEPARATOR
======================================== */

#voice .voice-case--01::before,
#voice .voice-case--02::before,
#voice .voice-case--03::before {
    content: "";
    display: block;

    width: 100%;
    height: 2px;

    margin: 0 0 42px;

    background-image:
        radial-gradient(
            circle,
            rgba(113, 101, 129, .30) 1px,
            transparent 1.2px
        );

    background-size: 7px 2px;
    background-repeat: repeat-x;
}

/* ========================================
   CASE 共通
======================================== */

#voice .voice-case--01,
#voice .voice-case--02,
#voice .voice-case--03 {
    position: relative;
    box-sizing: border-box;
    verflow: visible;

    padding-left: 25px;
    padding-right: 25px;
}


/* ========================================
   CASE 01
   WHITE → LAVENDER
======================================== */

#voice .voice-case--01 {
    padding-top: 5px;
    padding-bottom: 0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            rgba(233, 218, 255, .18) 20%,
            rgba(233, 218, 255, .08) 100%
        );
}


/* ========================================
   CASE 02
   LAVENDER → CREAM
======================================== */

#voice .voice-case--02 {
    padding-top: 0;
    padding-bottom: 0;

    background:
        linear-gradient(
            180deg,
            rgba(233, 218, 255, .08) 0%,
            rgba(241, 229, 235, .34) 40%,
            rgba(255, 252, 200, .38) 100%
        );
}


/* ========================================
   CASE 03
   CREAM → WHITE
======================================== */

#voice .voice-case--03 {
    padding-top: 20px;
    padding-bottom: 55px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 252, 200, .38) 0%,
            rgba(255, 252, 200, .20) 55%,
            #ffffff 100%
        );
}
/* ========================================
   CASE INNER
======================================== */

#voice .voice-case__inner {
    position: relative;
    width: 100%;
    margin: 0 auto;
    z-index: 2;
}

/* ========================================
   CASE HEADING WRAP
======================================== */

#voice .voice-case__heading-wrap {
    position: relative;

    display: flex;
    align-items: flex-start;

    width: 100%;
    margin: 0;
}


/* CASE横の小花 */
#voice .voice-case__flower {
    position: absolute;

    top: -12px;
    left: 102px;

    width: 20px;
    height: auto;

    opacity: .55;

    transform: rotate(25deg);

    pointer-events: none;
}

/* ========================================
   CASE NUMBER
======================================== */

#voice .voice-case__heading {
    display: flex;
    align-items: baseline;
    gap: 7px;

    margin: -20px 0 -15px;
}

#voice .voice-case__en {
    margin: 0;

    color: #8a6ca6;

    font-family:
        "Times New Roman",
        serif;

    font-size: 20px;
    font-style: italic;
    letter-spacing: .08em;
}

#voice .voice-case__number {
    margin: 0;

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

    font-family:
        "Times New Roman",
        serif;

    font-size: 42px;
    font-weight: 400;
    line-height: 1;
}

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

#voice .voice-case__title {
    margin: -20px 0 12px !important;
    padding: 0 !important;

    color: #4f4860;

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

    font-size: 16px;
    font-weight: 500;
    line-height: 1.85;
    letter-spacing: .035em;

    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

#voice .voice-case__title::before,
#voice .voice-case__title::after {
    content: none !important;
    display: none !important;
}
/* ========================================
   CUSTOMER LABEL
======================================== */

#voice .voice-case__label {
    margin: 0 0 22px;

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

    font-size: 14px;
    line-height: 1.6;
    letter-spacing: .06em;
}


/* ========================================
   BEFORE / AFTER IMAGE
======================================== */

#voice .voice-case__visual {
    position: relative;

    width: calc(100% + 10px);
    margin: 0 -5px 45px;
}

#voice .voice-case__visual > p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

#voice .voice-case__main-image {
    display: block;

    width: 100%;
    height: auto;
    margin: 0;

    border-radius: 2px;

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

/* ========================================
   CUSTOMER'S VOICE
======================================== */

#voice .voice-case__comment {
    position: relative;

    margin-top: -10px;
    padding: 24px 20px 25px;

    box-sizing: border-box;

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

    border:
        1px solid
        rgba(113, 101, 129, .14);

    box-shadow:
        0 5px 16px rgba(79, 72, 96, .045);
}

#voice .voice-case__comment-en {
    margin: 0 0 5px;

    color: rgba(138, 108, 166, .72);

    font-family:
        "Times New Roman",
        serif;

    font-size: 11px;
    font-style: italic;
    line-height: 1.4;
    letter-spacing: .08em;
}
#voice .voice-case__comment-title {
    margin: 0 0 16px !important;
    padding: 0 !important;

    color: #4f4860;

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

    font-size: 14px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: .035em;

    border: none !important;
    background: none !important;
}

#voice .voice-case__comment-title::before,
#voice .voice-case__comment-title::after {
    content: none !important;
    display: none !important;
}

#voice .voice-case__comment-text {
    margin: 0 0 14px;

    color: #665f6c;

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

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

#voice .voice-case__comment-text:last-child {
    margin-bottom: 0;
}

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

#voice .voice-case__note {
    margin: 24px 0 0;

    color: #9a929d;

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

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

/* ========================================
   CASE 01 - PROGRESS
======================================== */

#voice .voice-case__progress {
    position: relative;

    margin: 38px 0 48px;
    padding: 28px 0 0;

    background: transparent;

    border: none;
    border-top:
        1px solid
        rgba(113, 101, 129, .14);
}

#voice .voice-case__progress-heading {
    position: relative;
    margin: 0;
    padding: 0;
}

#voice .voice-case__progress-heading::after {
    content: none !important;
    display: none !important;
}

#voice .voice-case__progress-en {
    margin: 0 0 7px;

    color: rgba(138, 108, 166, .68);

    font-family:
        "Times New Roman",
        serif;

    font-size: 11px;
    font-style: italic;
    line-height: 1.4;
    letter-spacing: .1em;
}

#voice .voice-case__progress-title {
    margin: 0 0 12px !important;
    padding: 0 !important;

    color: #4f4860;

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

    font-size: 17px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: .035em;

    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

#voice .voice-case__progress-title::before,
#voice .voice-case__progress-title::after {
    content: none !important;
    display: none !important;
}

/* 1カ月半の変化 */
#voice .voice-case__progress-label {
    margin: 0 0 6px;

    color: rgba(138, 108, 166, .78);

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

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

    line-height: 1.6;
    letter-spacing: .05em;
}

#voice .voice-case__progress-text {
    margin: 0 0 22px;

    color: #746b79;

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

    font-size: 13px;
    line-height: 1.9;
    letter-spacing: .035em;
}

#voice .voice-case__progress-visual {
    width: 100%;
    margin: 0;
}

#voice .voice-case__progress-visual > p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

#voice .voice-case__progress-image {
    display: block;

    width: 100%;
    height: auto;
    margin: 0;

    border-radius: 2px;

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

/* ========================================
   CASE 02 BEFORE → AFTER ARROW
======================================== */

#voice .voice-case--02 .voice-case__visual::after {
    content: "⇒";

    position: absolute;
    top: 50%;
    left: 52%;

    transform: translate(-50%, -50%);

    color: #716581;

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

    font-size: 22px;
    font-weight: 400;
    line-height: 1;

    z-index: 5;

    text-shadow:
        0 1px 5px rgba(255, 255, 255, .9);
}

/* ========================================
   CASE 01〜03 共通背景
======================================== */

#voice main {
    background:
        radial-gradient(
            circle at 100% 42%,
            rgba(233, 218, 255, .55) 0%,
            rgba(233, 218, 255, .24) 18%,
            transparent 38%
        ),
        radial-gradient(
            circle at 0% 65%,
            rgba(255, 252, 200, .55) 0%,
            rgba(255, 252, 200, .24) 18%,
            transparent 38%
        ),
        radial-gradient(
            circle at 100% 88%,
            rgba(233, 218, 255, .45) 0%,
            rgba(233, 218, 255, .18) 18%,
            transparent 38%
        ),
        #fff;
}

/* ========================================
   OTHER VOICES
======================================== */

#voice .voice-other {
    position: relative;
    padding: 65px 20px 5px;
    box-sizing: border-box;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 100% 8%,
            rgba(233, 218, 255, .48) 0%,
            rgba(233, 218, 255, .16) 24%,
            transparent 46%
        ),
        radial-gradient(
            circle at 0% 72%,
            rgba(255, 252, 200, .50) 0%,
            rgba(255, 252, 200, .16) 24%,
            transparent 46%
        ),
        #fff;
}


#voice .voice-other__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    margin: 0 auto;
}

/* ========================================
   HEADING
======================================== */

#voice .voice-other__heading {
    margin: 0 8px 20px;
}


#voice .voice-other__en {
    margin: 0 0 4px;

    color: #8a6ca6;

    font-family: "Times New Roman", serif;
    font-size: 29px;
    font-style: italic;
    font-weight: 400;

    line-height: 1.2;
    letter-spacing: .09em;
}


#voice .voice-other__title {
    margin: 0 !important;
    padding: 0 !important;

    color: #595757;

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

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

    line-height: 1.7;
    letter-spacing: .04em;

    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

#voice .voice-other__title::before,
#voice .voice-other__title::after {
    content: none !important;
    display: none !important;
}


#voice .voice-other__line {
    width: 100%;
    height: 1px;

    margin: 14px 0 16px;

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


#voice .voice-other__lead {
    margin: 0;

    color: #746b79;

    font-size: 13px;

    line-height: 1.9;
    letter-spacing: .04em;
}

/* ========================================
   VOICE CARD
======================================== */

#voice .voice-other__card {
    position: relative;

    width: 100%;
    height: auto;
    min-height: 0;

    margin: 0 0 14px;
    padding: 16px 15px;

    box-sizing: border-box;

    border:
        1px solid
        rgba(113, 101, 129, .12);

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .94),
            rgba(248, 244, 252, .78)
        );

    box-shadow:
        0 6px 18px
        rgba(79, 72, 96, .055);
}


#voice .voice-other__card:last-child {
    margin-bottom: 0;
}

/* 真ん中だけクリーム */
#voice .voice-other__card--yellow {
    border-color:
        rgba(224, 196, 110, .28);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .95),
            rgba(255, 252, 225, .72)
        );
}


/* ========================================
   CARD CONTENT
======================================== */

#voice .voice-other__card-top {
    display: grid;

    grid-template-columns:
        78px
        minmax(0, 1fr);

    gap: 14px;

    align-items: center;

    width: 100%;
    height: auto;
    min-height: 0;

    margin: 0;
    padding: 0;
}

/* ========================================
   PORTRAIT
======================================== */

#voice .voice-other__portrait {
    position: relative;

    width: 78px;
    height: 78px;

    margin: 0;

    overflow: hidden;

    border-radius: 50%;

    background:
        rgba(233, 218, 255, .22);
}


#voice .voice-other__portrait img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;

    object-fit: cover;

    border-radius: 50%;
}

/* ========================================
   CONTENT
======================================== */

#voice .voice-other__content {
    min-width: 0;

    margin: 0;
    padding: 0;
}
/* ========================================
   VOICE NUMBER + LABEL
======================================== */

#voice .voice-other__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px 8px;

    margin: 0 0 7px;
    padding: 0;
}


#voice .voice-other__number {
    display: flex;
    align-items: baseline;

    gap: 4px;

    margin: 0 0 0 10px;
    padding: 0;

    color: #8a6ca6;

    font-family:
        "Times New Roman",
        serif;
}

#voice .voice-other__number span {
    font-size: 13px;
    font-style: italic;

    line-height: 1;
    letter-spacing: .08em;
}


#voice .voice-other__number strong {
    color:
        rgba(113, 101, 129, .42);

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

    line-height: 1;
}

/* ========================================
   LABEL
======================================== */

#voice .voice-other__label {
    display: inline-block;

    margin: 0;
    padding: 3px 9px;

    color: #82748e;

    background:
        rgba(233, 218, 255, .52);

    border-radius: 999px;

    font-size: 10px;

    line-height: 1.5;
    letter-spacing: .03em;

    white-space: nowrap;
}


#voice .voice-other__label--yellow {
    background:
        rgba(255, 239, 183, .62);
}

/* ========================================
   COMMENT
======================================== */

#voice .voice-other__text {
    position: relative;

    margin: 0 !important;
    padding: 0 0 0 10px;

    color: #595757;

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

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

    line-height: 1.75;
    letter-spacing: .02em;

    text-align: left;
}
/* コメント横のアクセントライン */
#voice .voice-other__text::before {
    content: "";

    position: absolute;

    left: 0;
    top: 3px;

    width: 1px;
    height: calc(100% - 6px);

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

/* ========================================
   WORDPRESS余白対策
======================================== */

#voice .voice-other__card p,
#voice .voice-other__card-top p,
#voice .voice-other__content p {
    margin-top: 0;
}


#voice .voice-other__card > p:empty,
#voice .voice-other__card-top > p:empty,
#voice .voice-other__content > p:empty {
    display: none !important;

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

    height: 0 !important;
    line-height: 0 !important;
}

/* ========================================
   SMALL SCREEN
======================================== */

@media (max-width: 360px) {

    #voice .voice-other {
        padding:
            58px
            16px
            32px;
    }


    #voice .voice-other__heading {
        margin:
            0
            4px
            20px;
    }


    #voice .voice-other__card {
        padding:
            14px
            13px;

        border-radius: 18px;
    }


    #voice .voice-other__card-top {
        grid-template-columns:
            72px
            minmax(0, 1fr);

        gap: 12px;
    }


    #voice .voice-other__portrait {
        width: 72px;
        height: 72px;
    }


    #voice .voice-other__number strong {
        font-size: 25px;
    }


    #voice .voice-other__label {
        padding:
            3px
            8px;

        font-size: 9px;
    }

    #voice .voice-other__text {
        font-size: 12px;

        line-height: 1.75;
    }

}

/* ========================================
   VOICE CTA
======================================== */

#voice .voice-cta {
    position: relative;

    padding: 45px 28px 70px;

    box-sizing: border-box;
    overflow: hidden;

    text-align: center;

    /*
     上端を白にして
     OTHER VOICESから自然につながるようにする
    */
    background:
        radial-gradient(
            circle at 0% 35%,
            rgba(255, 252, 200, .45) 0%,
            rgba(255, 252, 200, .18) 28%,
            transparent 52%
        ),
        radial-gradient(
            circle at 100% 85%,
            rgba(233, 218, 255, .65) 0%,
            rgba(233, 218, 255, .25) 32%,
            transparent 58%
        ),
        linear-gradient(
            to bottom,
            #fff 0%,
            rgba(255, 255, 255, .96) 18%,
            rgba(249, 246, 252, .88) 55%,
            rgba(243, 236, 250, .92) 100%
        );
}

#voice .voice-cta__inner {
    position: relative;

    width: 100%;
    margin: 0 auto;

    z-index: 2;
}


/* ========================================
   LINE
   縦線は使わない
======================================== */

#voice .voice-cta__line {
    display: none;
}


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

#voice .voice-cta__text {
    margin: 0 0 38px;

    color: #595757;

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

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

    line-height: 2;
    letter-spacing: .06em;
}

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

#voice .voice-cta__button {
    position: relative;

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

    width: 100%;
    max-width: 305px;
    min-height: 62px;

    margin: 0 auto;

    padding:
        12px
        48px
        12px
        25px;

    box-sizing: border-box;

    color: #62576d !important;

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

    border:
        1px solid
        rgba(113, 101, 129, .22);

    border-radius: 40px;

    box-shadow:
        0 8px 24px
        rgba(113, 101, 129, .08);

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

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

    line-height: 1.6;
    letter-spacing: .04em;

    text-decoration: none !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

/* ========================================
   ARROW
======================================== */

#voice .voice-cta__arrow {
    position: absolute;

    top: 50%;
    right: 22px;

    transform:
        translateY(-50%);

    color: #8d7a9d;

    font-family: serif;
    font-size: 20px;
    font-weight: 400;

    line-height: 1;
}


/* ========================================
   HOVER
======================================== */

#voice .voice-cta__button:hover {
    color: #62576d !important;

    background: #fff;

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 28px
        rgba(113, 101, 129, .14);

    text-decoration: none !important;
}

/* VOICE直後にWordPressが生成する空のpだけ削除 */
body.page-id-147 #voice + p {
    display: none !important;
    margin: 0 !important;
}
/* ========================================
   VOICE NOTE
======================================== */

#voice .voice-cta .voice-note {
    margin: 28px 0 0 !important;

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

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

    font-size: 10px !important;
    font-weight: 400 !important;

    line-height: 1.7 !important;
    letter-spacing: .02em !important;

    text-align: center !important;
}

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

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

  body.page-id-147 {
    background-color: #DCE8D7 !important;
    background-image: url("https://wp.growhappily.net/wp-content/uploads/2026/10/pc-back-ground.jpg") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
  }

  /* 中央のページ */
  body.page-id-147 .voice-wrapper {
    position: relative;
    width: 390px;
    max-width: 100%;
    margin: 0 auto;

    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);
  }

}


/* =========================
   VOICE PC背景 最終調整
========================= */

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

  /* 画面いっぱいの白背景を解除 */
  body.page-id-147 #voice {
    background: transparent !important;
    overflow: visible;
  }

  /* 中央390pxのデザインは白背景を維持 */
  body.page-id-147 #voice .voice-wrapper {
    background: #fff;

    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);
  }

}