/* 2025/02/27 17:26 */
p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0}
button{appearance: none;}
a{background-color:transparent;text-decoration:none;color:inherit}
:root{
    /*color*/
    --black: #030303;
    --pink: #f09b9e;
    --light_brown: #CEC4BA;
    --dark_brown: #3F342B;
    --ivory: #F7F4F0;
    --gray: #777474;

    /*style*/
    --background-color: var(--ivory);
    --text-color: var(--black);


    /*font*/
    --font-l: 'A-OTF Shuei MaruGo Std',"秀英丸ゴシック L", "Shuei MaruGo L", "ヒラギノ丸ゴ ProN","メイリオ","meiryo",sans-serif;
    --font-b: 'A-OTF Shuei MaruGo Std',"秀英丸ゴシック B", "Shuei MaruGo B", "ヒラギノ丸ゴ ProN","メイリオ","meiryo",sans-serif;
    --font-default: "ヒラギノ丸ゴ ProN","Hiragino Maru Gothic ProN","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO",sans-serif;
    --font-input: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","meiryo","メイリオ","MS PGothic", "MS Pゴシック", Osaka, sans-serif, Verdana;
    --font-adjust: rotate(0.03deg);
    --font-readjust: none;
    --vh: 1vh;
}

html {
    width: 100%;
    font-size: 62.5%;
    scroll-behavior: smooth;

}

a {
    text-decoration: none;
}
ul,li {
    list-style: none;
}

/* Google font */
/* <uniquifier>: Use a unique and descriptive class name */
/* <weight>: Use a value from 300 to 700 */
.jura_font_title {
    font-family: "Jura", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

/* <uniquifier>: Use a unique and descriptive class name */
/* <weight>: Use a value from 100 to 700 */
.josefin-sans-font_title {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: italic;
}

/* google font japanese*/
.zen-kaku-gothic-new-regular {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    font-style: normal;
}


/* sp/tablet */
@media screen and (max-width: 767.9px){
    body{
        margin: 0;
        width: 100%;
        background-color: var(--background-color);
        color: var(--text-color);
        font-family: var(--font-l);
        word-break: break-all;
    }
}
/* pc */
@media screen and (min-width: 768px){
    body{
        margin: 0;
        width: 100%;
        background-color: var(--background-color);
        color: var(--text-color);
        font-family: var(--font-l);
        word-break: break-all;
    }
}


/* ------ header ------ */
/* sp/tablet */
@media screen and (max-width: 767.9px){
    #header{
        width: 100%;
        height: 70px;
        background-color: var(--background-color);
        text-align: center;
        align-items: center;
        position: fixed;
        z-index: 30;
        box-shadow: #c9c9c9 1px 1px 2px;
        top: 0;
        right: 0;
        left: 0;
    }
    
    .wrapper .site-header__wrapper{
        width:auto;
        display: flex;
    }
    .site-header__wrapper {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem; }
    
    .header_content{
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: center;
        height: inherit;
        margin-left: 0px;
        margin-right: 0px;
    }
    
    .header_center{
        width: 84%;
        text-align: center;
        z-index: 10;
        padding-left: 16%;
    }
    
    .lead {
        padding-bottom: 6px;
        font-family: "M PLUS Rounded 1c", "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
        font-weight: 400;
        font-style: normal;
    }
    .lead a{
        text-decoration: none;
        color: var(--text-color);
        
    }
    
    .lsp{
        letter-spacing: -0.25rem;
    }
    
    .logo .site img{
        width: 148px;
        text-align: center;
        display: inline;
    }
    
    .header_right{
        width: 16%;
        text-align: right;
        z-index: 20;
    }
    
    .header__nav{
        position: absolute;
        right: 0;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        transform: translateX(100%); 
        background-color: #F7F4F0;
        transition: ease .4s;
    }
}
/* pc */
@media screen and (min-width: 768px){
    #header{
        width: 100%;
        height: 70px;
        background-color: var(--background-color);
        text-align: center;
        align-items: center;
        position: fixed;
        z-index: 30;
        box-shadow: #c9c9c9 1px 1px 2px;
        top: 0;
        right: 0;
        left: 0;
    }
    
    .wrapper .site-header__wrapper{
        width:auto;
        display: flex;
    }
    .site-header__wrapper {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem; }
    
    .header_content{
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: center;
        height: inherit;
        margin-left: 0px;
        margin-right: 0px;
    }
    
    .header_center{
        width: 84%;
        text-align: center;
        z-index: 10;
        padding-left: 16%;
    }
    
    .lead {
        padding-bottom: 6px;
        font-family: "M PLUS Rounded 1c", "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
        font-weight: 400;
        font-style: normal;
    }
    .lead a{
        text-decoration: none;
        color: var(--text-color);
        
    }
    
    .lsp{
        letter-spacing: -0.25rem;
    }
    
    .logo .site img{
        width: 148px;
        text-align: center;
        display: inline;
    }
    
    .header_right{
        width: 16%;
        text-align: right;
        z-index: 20;
    }
    
    .header__nav{
        position: absolute;
        right: 0;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        transform: translateX(100%); 
        background-color: #F7F4F0;
        transition: ease .4s;
    }
}

/* sp/tablet */
@media screen and (max-width: 767.9px){
    .header__hamburger {
        width: 48px;
        height: 100%;
    }
    
    .hamburger{
        background-color: transparent;
        border-color: transparent;
        z-index: 9997;
    }
    
    .hamburger span{
        width: 100%;
        height: 1px;
        background-color: #777474;
        position: relative;
        transition: ease .4s;
        display: block;
    }
    
    .hamburger span:nth-child(1){
        top:0;
    }
    .hamburger span:nth-child(2){
        margin: 8px 0;
    }
    .hamburger span:nth-child(3){
        top:0;
    }
    
    .header__nav.active{
        transform: translateX(0);
        background-color: #f09b9ecc;
    }
    
    .hamburger.active span:nth-child(1){
        top: 5px;
        transform: rotate(45deg);
    }
    
    .hamburger.active span:nth-child(2){
        opacity: 0;
    }
    
    .hamburger.active span:nth-child(3){
    top: -13px;
    transform: rotate(-45deg);
    }
}

/* pc */
@media screen and (min-width: 768px){
    .header__hamburger {
        width: 48px;
        height: 100%;
    }
    
    .hamburger{
        background-color: transparent;
        border-color: transparent;
        z-index: 9997;
    }
    
    .hamburger span{
        width: 100%;
        height: 1px;
        background-color: #777474;
        position: relative;
        transition: ease .4s;
        display: block;
    }
    
    .hamburger span:nth-child(1){
        top:0;
    }
    .hamburger span:nth-child(2){
        margin: 8px 0;
    }
    .hamburger span:nth-child(3){
        top:0;
    }
    
    .header__nav.active{
        transform: translateX(0);
        background-color: #f09b9ecc;
    }
    
    .hamburger.active span:nth-child(1){
        top: 5px;
        transform: rotate(45deg);
    }
    
    .hamburger.active span:nth-child(2){
        opacity: 0;
    }
    
    .hamburger.active span:nth-child(3){
    top: -13px;
    transform: rotate(-45deg);
    }
}


/* sp/tablet */
@media screen and (max-width: 767.9px){
    .nav-items {
        padding: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    
    .nav-items__item{
        font-family: "Rounded-X M+ 2c","M PLUS Rounded 1c", "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
    }
    
    .nav-items__item a {
        color: rgb(255, 255, 255);
        width: 100%;
        display: block;
        text-align: center;
        font-size: 18px;
        margin-bottom: 24px;
    }
    
    .nav-items__item:last-child a {
        margin-bottom: 0;
    }

    .nav-items__item span {
        display: inline-block;
    }

    .mgr_space {
        margin-right: 0.5rem;
    }
}

/* pc */
@media screen and (min-width: 768px){
    .nav-items {
        padding: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    
    .nav-items__item{
        font-family: "Rounded-X M+ 2c","M PLUS Rounded 1c", "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
    }
    
    .nav-items__item a {
        color: rgb(255, 255, 255);
        width: 100%;
        display: block;
        text-align: center;
        font-size: 20px;
        margin-bottom: 24px;
    }
    
    .nav-items__item:last-child a {
        margin-bottom: 0;
    }
}

/* -------- header終了 -------- */

/* -------- contents -------- */
/* sp/tablet */
@media screen and (max-width: 767.9px){
    .top_message{
        color: #FFF;
        line-height: 6rem;
        letter-spacing: 1.4rem;
        font-size: 3.5rem;
    }
    
    /* content */
    #content{
        padding: 70px 0 0;
    }
    
    .contents{
        width: 100%;
    }
    
    .wrap{
        margin: 0 auto;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
    }
}

/* pc */
@media screen and (min-width: 768px){
    .top_message{
        color: #FFF;
        line-height: 6rem;
        letter-spacing: 1.4rem;
        font-size: 3.5rem;
    }
    
    /* content */
    #content{
        padding: 70px 0 0;
    }
    
    .contents{
        width: 100%;
    }
    
    .wrap{
        margin: 0 auto;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
    }
}

/* mini */
@media screen and (max-width: 350px){
    .top_message{
        color: #FFF;
        line-height: 4rem;
        letter-spacing: 1.2rem;
        font-size: 2.5rem;
    }
}



/* sp/tablet */
@media screen and (max-width: 767.9px){
    .css-carousel-slider {
        width: 100%;
        max-width: 480px;
        overflow: hidden;
        position: relative;
        height: 36rem;
    }
    .css-carousel-slider img {
        width: 100%;
        height: auto;
        vertical-align: top;
    }
    
    /* スライド設定 */
    .slide-wrap{
        display: none;
    }
    .css-carousel-slider .slide-wrap {
        width: 400%;
        position: absolute;
        display: flex;
        top: 0;
        left: 0;
        z-index: 0;
        animation: css-carousel-slider 20s infinite;
        animation-delay: 2s;
    }
    .css-carousel-slider .slide-wrap-main {
        width: 100%;
        z-index: 1;
        animation: css-carousel-slider-main 20s infinite;
        animation-delay: 2s;
    }
    .css-carousel-slider .slide {
        width: 100%;
    }
    
    /* スライダーアニメーションの設定(*5) */
    @keyframes css-carousel-slider {
        0% { transform: translateX(0); }
    
        20% { transform: translateX(calc(1 / 4 * -100%)); }
        25% { transform: translateX(calc(1 / 4 * -100%)); }
    
        45% { transform: translateX(calc(2 / 4 * -100%)); }
        50% { transform: translateX(calc(2 / 4 * -100%)); }
    
        70% { transform: translateX(calc(3 / 4 * -100%)); }
        75% { transform: translateX(calc(3 / 4 * -100%)); }
    
        95% { transform: translateX(calc(4 / 4 * -100%)); }
        100% { transform: translateX(calc(4 / 4 * -100%)); }
    }
    
    @keyframes css-carousel-slider-main {
        0% { transform: translateX(100%); }
        75% { transform: translateX(100%); }
        95% { transform: translateX(0%);}
    }
    /* 上下に本型を適用 */
    .css-carousel-slider::before {
        background: url("/babykumon/voice/svg/book-shape_top.svg");
        top: 0;
        content: '';
        height: 3rem;
        position: absolute;
        width: 100%;
        z-index: 2;
    }
    .css-carousel-slider::after {
        background: url("/babykumon/voice/svg/book-shape_bottom.svg");
        bottom: 0;
        content: '';
        height: 3rem;
        position: absolute;
        width: 100%;
    }
    /* //スライドさせる */
    
    /* スライドをフェードイン */
    /* 複数画像切り替え---------------------------------------------- */
    .slider-container {
        position: relative;
        width: 100%;
        aspect-ratio: 4 / 3;
        overflow: hidden;
    }
    
    .slideimg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        background-size: cover;
        animation: slideAnime 12s infinite;
    }
    
    @keyframes slideAnime {
        0%, 30%, 100% { opacity: 0; }
        10%, 20% { opacity: 1; }
    }
    
    /* 各スライドのアニメーションタイミングを均等にずらす */
    .slideimg:nth-of-type(1){
        background-image: url('/babykumon/voice/images/user-voice_pic_04.jpg'); /* 1枚目の画像を指定 */
        animation-delay: 0s;
    }
    
    .slideimg:nth-of-type(2) {
        background-image: url('/babykumon/voice/images/user-voice_pic_05.jpg'); /* 2枚目の画像を指定 */
        animation-delay: 3s;
    }
    
    .slideimg:nth-of-type(3) {
        background-image: url('/babykumon/voice/images/user-voice_pic_06.png'); /* 3枚目の画像を指定 */
        animation-delay: 6s;
    }
    
    .slideimg:nth-of-type(4) {
        background-image: url('/babykumon/voice/images/user-voice_pic_07.jpg'); /* 4枚目の画像を指定 */
        animation-delay: 9s;
    }
    

    .bookphotos{
        position: relative;
    }
    .bookphotos h1{
        position: absolute;
        top: 25%;
        left: 0;
        margin: 0;
    }
    .bookphotos img{
        width: 100%;
    }
    .bookphotos::before {
        background: url("/babykumon/voice/svg/book-shape_top.svg");
        top: 0;
        content: '';
        height: 3rem;
        position: absolute;
        width: 100%;
        z-index: 2;
    }
    .bookphotos::after {
        background: url("/babykumon/voice/svg/book-shape_bottom.svg");
        bottom: 0;
        content: '';
        height: 3rem;
        position: absolute;
        width: 100%;
    }
}

/* pc */
@media screen and (min-width: 768px){
    .css-carousel-slider {
        width: 100%;
        max-width: 480px;
        overflow: hidden;
        position: relative;
        height: 36rem;
    }
    .css-carousel-slider img {
        width: 100%;
        height: auto;
        vertical-align: top;
    }
    
    /* スライド設定 */
    .slide-wrap{
        display: none;
    }
    .css-carousel-slider .slide-wrap {
        width: 400%;
        position: absolute;
        display: flex;
        top: 0;
        left: 0;
        z-index: 0;
        animation: css-carousel-slider 20s infinite;
        animation-delay: 2s;
    }
    .css-carousel-slider .slide-wrap-main {
        width: 100%;
        z-index: 1;
        animation: css-carousel-slider-main 20s infinite;
        animation-delay: 2s;
    }
    .css-carousel-slider .slide {
        width: 100%;
    }
    
    /* スライダーアニメーションの設定(*5) */
    @keyframes css-carousel-slider {
        0% { transform: translateX(0); }
    
        20% { transform: translateX(calc(1 / 4 * -100%)); }
        25% { transform: translateX(calc(1 / 4 * -100%)); }
    
        45% { transform: translateX(calc(2 / 4 * -100%)); }
        50% { transform: translateX(calc(2 / 4 * -100%)); }
    
        70% { transform: translateX(calc(3 / 4 * -100%)); }
        75% { transform: translateX(calc(3 / 4 * -100%)); }
    
        95% { transform: translateX(calc(4 / 4 * -100%)); }
        100% { transform: translateX(calc(4 / 4 * -100%)); }
    }
    
    @keyframes css-carousel-slider-main {
        0% { transform: translateX(100%); }
        75% { transform: translateX(100%); }
        95% { transform: translateX(0%);}
    }
    /* 上下に本型を適用 */
    .css-carousel-slider::before {
        background: url("/babykumon/voice/svg/book-shape_top.svg");
        top: 0;
        content: '';
        height: 3rem;
        position: absolute;
        width: 100%;
        z-index: 2;
    }
    .css-carousel-slider::after {
        background: url("/babykumon/voice/svg/book-shape_bottom.svg");
        bottom: 0;
        content: '';
        height: 3rem;
        position: absolute;
        width: 100%;
    }
    /* //スライドさせる */
    
    /* スライドをフェードイン */
    /* 複数画像切り替え---------------------------------------------- */
    .slider-container {
        position: relative;
        width: 100%;
        aspect-ratio: 4 / 3;
        overflow: hidden;
    }
    
    .slideimg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        background-size: cover;
        animation: slideAnime 12s infinite;
    }
    
    @keyframes slideAnime {
        0%, 30%, 100% { opacity: 0; }
        10%, 20% { opacity: 1; }
    }
    
    /* 各スライドのアニメーションタイミングを均等にずらす */
    .slideimg:nth-of-type(1){
        background-image: url('/babykumon/voice/images/user-voice_pic_04.jpg'); /* 1枚目の画像を指定 */
        animation-delay: 0s;
    }
    
    .slideimg:nth-of-type(2) {
        background-image: url('/babykumon/voice/images/user-voice_pic_05.jpg'); /* 2枚目の画像を指定 */
        animation-delay: 3s;
    }
    
    .slideimg:nth-of-type(3) {
        background-image: url('/babykumon/voice/images/user-voice_pic_06.png'); /* 3枚目の画像を指定 */
        animation-delay: 6s;
    }
    
    .slideimg:nth-of-type(4) {
        background-image: url('/babykumon/voice/images/user-voice_pic_07.jpg'); /* 4枚目の画像を指定 */
        animation-delay: 9s;
    }
    

    .bookphotos{
        position: relative;
        max-width: 540px;
        margin: 0 auto;
    }
    .bookphotos h1{
        position: absolute;
        top: 25%;
        left: 0;
        margin: 0;
    }
    .bookphotos img{
        width: 100%;
    }
    .bookphotos::before {
        background: url("/babykumon/voice/svg/book-shape_top.svg");
        top: 0;
        content: '';
        height: 3rem;
        position: absolute;
        width: 100%;
        z-index: 2;
    }
    .bookphotos::after {
        background: url("/babykumon/voice/svg/book-shape_bottom.svg");
        bottom: 0;
        content: '';
        height: 3rem;
        position: absolute;
        width: 100%;
    }
}
/* //スライドをフェードイン */


/* scroll*/
/* sp/tablet */
@media screen and (max-width: 767.9px){
    .scroll_area{
        width: 100%;
        position: relative;
        justify-content: center;
    }
    
    /* スクロールダウンの位置 */
    .scroll {
        position:absolute;
        display: flex;
        writing-mode: vertical-rl;
        width: 100%;
        margin: 0;
        text-align: center;
    }
      /* 線のアニメーション部分 */
    .scroll::before {
        animation: scroll 2s infinite;
        background-color: #fff;
        bottom: -6rem;
        content: "";
        height: 100px;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        width: 1px;
    }
      /* 線のアニメーション */
    @keyframes scroll {
        0% {
        transform: scale(1, 0);
        transform-origin: 0 0;
        }
        50% {
        transform: scale(1, 1);
        transform-origin: 0 0;
        }
        51% {
        transform: scale(1, 1);
        transform-origin: 0 100%;
        }
        100% {
        transform: scale(1, 0);
        transform-origin: 0 100%;
        }
    }
    
    .scroll_area img{
        padding-top: 4rem;
        margin: auto;
        display: block;
        width: 4rem;
    }
}
/* pc  */
@media screen and (min-width: 768px){
    .scroll_area{
        width: 100%;
        position: relative;
        justify-content: center;
    }
    
    /* スクロールダウンの位置 */
    .scroll {
        position:absolute;
        display: flex;
        writing-mode: vertical-rl;
        width: 100%;
        margin: 0;
        text-align: center;
    }
      /* 線のアニメーション部分 */
    .scroll::before {
        animation: scroll 2s infinite;
        background-color: #fff;
        bottom: -6rem;
        content: "";
        height: 100px;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        width: 1px;
    }
      /* 線のアニメーション */
    @keyframes scroll {
        0% {
        transform: scale(1, 0);
        transform-origin: 0 0;
        }
        50% {
        transform: scale(1, 1);
        transform-origin: 0 0;
        }
        51% {
        transform: scale(1, 1);
        transform-origin: 0 100%;
        }
        100% {
        transform: scale(1, 0);
        transform-origin: 0 100%;
        }
    }
    
    .scroll_area img{
        padding-top: 4rem;
        margin: auto;
        display: block;
        width: 4rem;
    }
}
/* //scroll end*/



/* ユーザーボイス */
/* sp/tablet */
@media screen and (max-width: 767.9px){
    .voice_of_baby_kumon{
        display: flex;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
        text-align: center;
        padding-bottom: 8rem;
    }
    
    .voices_area{
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
    }
    
    .user_voices{
        flex-direction: column;
        align-items: flex-end;
        flex-shrink: 0;
        align-self: stretch;
    }
    
    .voices_contents_top,.voices_contents_top_right_no5,.voices_contents_top_right_no7,.voices_contents_top_right_no9{
        width: 100%;
        padding-left: 40%;
        position: relative;
        z-index: 20;
    }
    
    .voices_contents_top_left,.voices_contents_top_left_no4,.voices_contents_top_left_no6{
        width: 100%;
        padding-right: 40%;
        position: relative;
        z-index: 20;
    }


    
    .voices_contents_top img{
        position: relative;
        top: 20px;
    }

    .voices_contents_top_left_no4 img{
        position: relative;
        top: -20px;
    }

    .voices_contents_top_right_no5, .voices_contents_top_right_no7,.voices_contents_top_right_no9{
        position: relative;
        top: 0px;
    }
    
    .voices_contents_bottom{
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        width: 100%;
        position: relative;
        bottom: 4rem;
    }
    
    .voices_contents_left,.voices_contents_right{
        display: flex;
        width: 65%;
        align-items: flex-end;
        align-self: stretch;
        z-index: 2;
    }
    
    .voices_pic_left{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        flex: 1 0 0;
    }
    
    .voices_pic_left img{
        border-radius: 0 0 20px 0;
    }
    
    .voices_pic_right img{
        border-radius: 20px 0 0 0;
    }
    
    .voices_name_left{
        display: flex;
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 8px;
        justify-content: center;
        align-items: center;
        border: 1px solid #F09B9E;
        background: #FFF;
    }
    
    .voices_name_right{
        display: flex;
        position: absolute;
        right: 0;
        bottom: 0;
        padding: 8px;
        justify-content: center;
        align-items: center;
        border: 1px solid #F09B9E;
        background: #FFF;
    }
    
    .voices_name_left,.voices_name_right,.voices_name_popup p{
        color: #F09B9E;
        font-family: "Rounded-X M+ 2c";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 2.4px;
    }
    
    .voices_text_area_right{
        width: 40%;
        height: fit-content;
        display: flex;
        padding: 20px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1 0 0;
        border-radius: 24px;
        background: #FFF;
        position: absolute;
        bottom: -10px;
        right: 0;
    }
    
    .voices_text_area_left{
        width: 40%;
        height: fit-content;
        display: flex;
        padding: 20px;
        flex: 1 0 0;
    }

    .voices_text_area_left_bg{
        width: 40%;
        height: fit-content;
        display: flex;
        padding: 20px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1 0 0;
        border-radius: 24px;
        background: #FFF;
    }

    .text_area{
        display: flex;
        justify-content: center;
        align-items: center;
        align-self: stretch;
        padding-bottom: 2rem;
    }
    
    .text_area p{
        font-size: 1rem;
        line-height: 2.2rem;
    }
}
/* pc  */
@media screen and (min-width: 768px){
    .voice_of_baby_kumon{
        display: flex;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
        text-align: center;
        padding-bottom: 8rem;
    }
    
    .voices_area{
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
    }

    #voices_area p{
        font-size: 2rem;
    }
    
    .user_voices{
        max-width: 540px;
        margin: 0 auto;
        flex-direction: column;
        align-items: flex-end;
        flex-shrink: 0;
        align-self: stretch;
    }
    
    .voices_contents_top,.voices_contents_top_right_no5,.voices_contents_top_right_no7,.voices_contents_top_right_no9{
        width: 100%;
        padding-left: 50%;
        position: relative;
        z-index: 20;
    }
    
    .voices_contents_top_left,.voices_contents_top_left_no4,.voices_contents_top_left_no6{
        width: 100%;
        padding-right: 50%;
        position: relative;
        z-index: 20;
    }
    
    .voices_contents_top_left img{
        position: relative;
        top: 65px;
    }

    .voices_contents_top_left_no4 img{
        position: relative;
        top: 45px;
    }

    .voices_contents_top_left_no6 img{
        position: relative;
        top: 64px;
    }
    
    .voices_contents_bottom{
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        width: 100%;
        position: relative;
        bottom: 4rem;
    }
    
    .voices_contents_left,.voices_contents_right{
        display: flex;
        width: 348px;
        align-items: flex-end;
        align-self: stretch;
        z-index: 2;
    }
    
    .voices_pic_left {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        flex: 1 0 0;
    }
    
    .voices_pic_left img{
        border-radius: 0 0 20px 0;
    }
    
    .voices_pic_right img{
        border-radius: 20px 0 0 0;
    }
    
    .voices_name_left{
        display: flex;
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 8px;
        justify-content: center;
        align-items: center;
        border: 1px solid #F09B9E;
        background: #FFF;
    }
    
    .voices_name_right{
        display: flex;
        position: absolute;
        right: 0;
        bottom: 0;
        padding: 8px;
        justify-content: center;
        align-items: center;
        border: 1px solid #F09B9E;
        background: #FFF;
    }
    
    .voices_name_left,.voices_name_right,.voices_name_popup p{
        color: #F09B9E;
        font-family: "Rounded-X M+ 2c";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 2.4px;
    }
    
    .voices_text_area_right{
        width: 40%;
        height: fit-content;
        display: flex;
        padding: 20px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1 0 0;
        border-radius: 24px;
        background: #FFF;
        position: absolute;
        bottom: -10px;
        right: 0;
    }
    
    .voices_text_area_left{
        width: 40%;
        height: fit-content;
        display: flex;
        padding: 20px;
        flex: 1 0 0;
    }

    .voices_text_area_left_bg{
        width: 40%;
        height: fit-content;
        display: flex;
        padding: 20px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1 0 0;
        border-radius: 24px;
        background: #FFF;
    }

    .text_area{
        display: flex;
        justify-content: center;
        align-items: center;
        align-self: stretch;
        padding-bottom: 2rem;
    }
    
    .text_area p{
        font-size: 1.6rem;
        line-height: 3.2rem;
    }
}



/*--- --- タイトル--- --- */
/* sp/tablet */
@media screen and (max-width: 767.9px){
    .title_area{
        text-align: center;
        color: var(--light_brown);
        display: flex;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
    }
    .title_area h1{
        font-size: 4rem;
        margin-bottom: 0;
    }
    .title_area img{
        width: 70%;
    }
}
/* pc  */
@media screen and (min-width: 768px){
    .title_area{
        text-align: center;
        color: var(--light_brown);
        display: flex;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
    }
    .title_area h1{
        font-size: 6rem;
        margin-bottom: 0;
    }
    .title_area img{
        width: 420px;
    }
}


/* Instagram Youtube タイトル */
/* sp/tablet */
@media screen and (max-width: 767.9px){
    .title_area_left{
        padding-bottom: 2rem;
    }
    .title_area_left h1{
        text-align: left;
        color: var(--light_brown);
        display: flex;
        flex-direction: column;
        align-self: stretch;
        font-size: 4rem;
        margin-bottom: 0;
    }
    .title_area_left .pink{
        color: var(--pink);
    }

    .title_area .pink{
        color: var(--pink);
        padding-bottom: 2rem;
    }
}
/* pc */
@media screen and (min-width: 768px){
    .title_area_left{
        padding: 0 20rem 2rem;
    }
    .title_area_left h1{
        text-align: left;
        color: var(--light_brown);
        display: flex;
        flex-direction: column;
        align-self: stretch;
        font-size: 4rem;
        margin-bottom: 0;
    }
    .title_area_left .pink{
        color: var(--pink);
    }
    .title_area .pink{
        color: var(--pink);
        padding-bottom: 2rem;
    }
}


/* sp/tablet */
@media screen and (max-width: 767.9px){
    .ellipsis {
        width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        text-align: left;
    }
}
/* pc */
@media screen and (min-width: 768px){
    .ellipsis {
        width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        text-align: left;
    }
}


/* ユーザーボイスもっと見るボタン */
/* sp/tablet */
@media screen and (max-width: 767.9px){
    .popup-open-btn{
        display: flex;
        padding: 4px 8px;
        justify-content: center;
        align-items: center;
        border-radius: 14px;
        border: 0.5px solid #000;
    }
}
/* pc */
@media screen and (min-width: 768px){
    .popup-open-btn{
        display: flex;
        padding: 4px 8px;
        justify-content: center;
        align-items: center;
        border-radius: 14px;
        border: 0.5px solid #000;
    }
}
/*--- --- --- --- */




/* ユーザーボイスポップアップ表示 */
/* sp/tablet */
@media screen and (max-width: 767.9px){
    #popup,#popup02,#popup03,#popup04,#popup05,#popup06,#popup07,#popup08,#popup09,#popup10{
        display: none;
    }
    
    .popup-open {
        cursor: pointer;
    }
    
    .popup-overlay {
        display: none;
    }
    /* ユーザーボイスポップアップ表示 1人目 */
    input[type=checkbox]:checked ~ #popup-contents01{
        display: block;
        z-index: 99999;
        background-color: #00000070;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }
    
    /* ユーザーボイスポップアップ表示 2人目 */
    input[type=checkbox]:checked ~ #popup-contents02{
        display: block;
        z-index: 99999;
        background-color: #00000070;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }
    
    
    /* ユーザーボイスポップアップ表示 3人目 */
    input[type=checkbox]:checked ~ #popup-contents03{
        display: block;
        z-index: 99999;
        background-color: #00000070;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }
    
    /* ユーザーボイスポップアップ表示 4人目 */
    input[type=checkbox]:checked ~ #popup-contents04{
        display: block;
        z-index: 99999;
        background-color: #00000070;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }
    
    /* ユーザーボイスポップアップ表示 5人目 */
    input[type=checkbox]:checked ~ #popup-contents05{
        display: block;
        z-index: 99999;
        background-color: #00000070;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }
    
    /* ユーザーボイスポップアップ表示 6人目 */
    input[type=checkbox]:checked ~ #popup-contents06{
        display: block;
        z-index: 99999;
        background-color: #00000070;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }
    
    /* ユーザーボイスポップアップ表示 7人目 */
    input[type=checkbox]:checked ~ #popup-contents07{
        display: block;
        z-index: 99999;
        background-color: #00000070;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }
    
    /* ユーザーボイスポップアップ表示 8人目 */
    input[type=checkbox]:checked ~ #popup-contents08{
        display: block;
        z-index: 99999;
        background-color: #00000070;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }
    
    /* ユーザーボイスポップアップ表示 9人目 */
    input[type=checkbox]:checked ~ #popup-contents09{
        display: block;
        z-index: 99999;
        background-color: #00000070;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }
    
    /* ユーザーボイスポップアップ表示 10人目 */
    input[type=checkbox]:checked ~ #popup-contents10{
        display: block;
        z-index: 99999;
        background-color: #00000070;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }
    
    
    .popup-window {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 600px;
        height: auto;
        max-height: 90vh;
        background: white;
        border-radius: 8px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        overflow: auto;
        padding: 20px;
        position: relative;
    }
    .popup-text {
        margin: 0;
        line-height: 2rem;
        padding: 10px 0;
        text-align: left;
    }
    
    .popup-text:not(:last-of-type) {
        margin-bottom: 1em
    }
    
    .popup-close {
        cursor: pointer;
        position: fixed;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        transition: background 0.3s ease;
        z-index: 1000;
    }
    
    .popup-close:hover {
        background: rgba(0, 0, 0, 0.8);
    }
    

    .voices_pic_popup{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        flex: 1 0 0;
    }
    
    .voices_pic_popup img{
        border-radius: 0 0 20px 0;
        width: 100%;
        height: auto;
        max-height: 80vh;
        object-fit: contain;
    }
    
    .voices_name_popup{
        display: flex;
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 8px;
        justify-content: center;
        align-items: center;
        border: 1px solid #F09B9E;
        background: #FFF;
    }
    .hidden-view {
        display: none;
    }
    
    .hidden-view.open {
        display: block;
    }
    
    #toggle-button{
        transition: .5s;
        -webkit-transition: .5s;
        font-size: 1.5rem;
        
    }
    #toggle-button::before{
        content: "みんなの口コミを見る";
        transition: .2s;
        -webkit-transition: .2s;
    }
    
    .hidden-view.open + #toggle-button::before{
        content: "閉じる";
    }
}
/* pc */
@media screen and (min-width: 768px){
    #popup,#popup02,#popup03,#popup04,#popup05,#popup06,#popup07,#popup08,#popup09,#popup10{
        display: none;
    }
    
    .popup-open {
        cursor: pointer;
    }
    
    .popup-overlay {
        display: none;
    }
    /* ユーザーボイスポップアップ表示 1人目 */
    input[type=checkbox]:checked ~ #popup-contents01{
        display: block;
        z-index: 99999;
        background-color: #00000070;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }
    
    /* ユーザーボイスポップアップ表示 2人目 */
    input[type=checkbox]:checked ~ #popup-contents02{
        display: block;
        z-index: 99999;
        background-color: #00000070;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }
    
    
    /* ユーザーボイスポップアップ表示 3人目 */
    input[type=checkbox]:checked ~ #popup-contents03{
        display: block;
        z-index: 99999;
        background-color: #00000070;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }
    
    /* ユーザーボイスポップアップ表示 4人目 */
    input[type=checkbox]:checked ~ #popup-contents04{
        display: block;
        z-index: 99999;
        background-color: #00000070;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }
    
    /* ユーザーボイスポップアップ表示 5人目 */
    input[type=checkbox]:checked ~ #popup-contents05{
        display: block;
        z-index: 99999;
        background-color: #00000070;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }
    
    /* ユーザーボイスポップアップ表示 6人目 */
    input[type=checkbox]:checked ~ #popup-contents06{
        display: block;
        z-index: 99999;
        background-color: #00000070;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }
    
    /* ユーザーボイスポップアップ表示 7人目 */
    input[type=checkbox]:checked ~ #popup-contents07{
        display: block;
        z-index: 99999;
        background-color: #00000070;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }
    
    /* ユーザーボイスポップアップ表示 8人目 */
    input[type=checkbox]:checked ~ #popup-contents08{
        display: block;
        z-index: 99999;
        background-color: #00000070;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }
    
    /* ユーザーボイスポップアップ表示 9人目 */
    input[type=checkbox]:checked ~ #popup-contents09{
        display: block;
        z-index: 99999;
        background-color: #00000070;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }
    
    /* ユーザーボイスポップアップ表示 10人目 */
    input[type=checkbox]:checked ~ #popup-contents10{
        display: block;
        z-index: 99999;
        background-color: #00000070;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }

    .popup-window {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 600px;
        height: auto;
        max-height: 90vh;
        background: white;
        border-radius: 8px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        overflow: auto;
        padding: 20px;
        position: relative;
    }

    .popup-text {
        margin: 0;
        line-height: 4rem;
        padding: 10px 0;
        text-align: left;
        font-size: 2rem;
    }
    
    .popup-text:not(:last-of-type) {
        margin-bottom: 1em
    }
    
    .popup-close {
        cursor: pointer;
        position: fixed;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        transition: background 0.3s ease;
        z-index: 1000; /* 他の要素より前面に表示 */
    }
    

    .popup-close:hover {
        background: rgba(0, 0, 0, 0.8);
    }
    
    
    .voices_pic_popup{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        flex: 1 0 0;
    }
    
    .voices_pic_popup img{
        border-radius: 0 0 20px 0;
        width: 100%;
        height: auto;
        max-height: 80vh;
        object-fit: contain;
    }
    
    
    .voices_name_popup{
        display: flex;
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 8px;
        justify-content: center;
        align-items: center;
        border: 1px solid #F09B9E;
        background: #FFF;
    }
    .hidden-view {
        display: none;
    }
    
    .hidden-view.open {
        display: block;
    }
    
    #toggle-button{
        transition: .5s;
        -webkit-transition: .5s;
        font-size: 1.5rem;
        
    }
    #toggle-button::before{
        content: "みんなの口コミを見る";
        transition: .2s;
        -webkit-transition: .2s;
    }
    
    .hidden-view.open + #toggle-button::before{
        content: "閉じる";
    }
}

/* button_simple の調整（iPhone表示対応） */
.button_simple {
    position: relative !important;
    display: inline-block !important;
    width: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* sp/tablet */
@media screen and (max-width: 767.9px){
    .button_simple{
        min-width: 100px;
        padding: 8px 40px;
        background-color: var(--background-color);
        border: solid 1px var(--dark_brown);
        font-size: 1.5rem;
        margin: 20px 0;
        color: var(--dark_brown);
    }
    
    .button_simple a{
        font-size: 1.5rem;
    }
}
/* pc */
@media screen and (min-width: 768px){
    .button_simple{
        min-width: 100px;
        padding: 8px 40px;
        background-color: var(--background-color);
        border: solid 1px var(--dark_brown);
        font-size: 1.5rem;
        margin: 20px 0;
        color: var(--dark_brown);
    }
    
    .button_simple a{
        font-size: 1.5rem;
    }
}


/* instagram */
/* external css: flickity.css */
/* sp/tablet */
@media screen and (max-width: 767.9px){
    * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    .gallery {
        background: var(--background-color);
        padding-top: 4rem;
    }
    
    .gallery-cell {
        width: 26rem;
        height: 26rem;
        margin-right: 10px;
        background: var(--background-color);
    }
    
    .instagram_ambassador{
        padding:0 2em 8rem;
    }
}
/* pc */
@media screen and (min-width: 768px){
    * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    .gallery {
        background: var(--background-color);
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        padding-top: 4rem;
    }
    
    .gallery-cell {
        width: 36rem;
        height: 36rem;
        margin-right: 70px;
        background: var(--background-color);
    }
    
    .instagram_ambassador{
        padding:0 2em 8rem;
    }
}


/*youtube*/
/* sp/tablet */
@media screen and (max-width: 767.9px){
    .youtube{
        padding:0 2rem 8rem;
    }
    
    .video-container {
        margin: 20px auto;
        text-align: center;
        display: grid;
        gap: 6rem;
    }
    
    iframe {
        width: 100%;
        max-width: 650px;
        aspect-ratio: 16 / 9;
        margin: 0 auto;
        border: none;
        border-radius: 8px;
    }
}
/* pc */
@media screen and (min-width: 768px){
    .youtube{
        padding:0 2rem 8rem;
    }
    
    .video-container {
        margin: 20px auto;
        text-align: center;
        display: grid;
        gap: 6rem;
    }
    
    iframe {
        width: 100%;
        max-width: 480px;
        aspect-ratio: 16 / 9;
        margin: 0 auto;
        border: none;
        border-radius: 8px;
    }
}



/*追従ボタンバナー*/
/* sp/tablet */
@media screen and (max-width: 767.9px){
    .fixed_banner{
        position: fixed;
        z-index: 9000;
        bottom: 40px;
        right: 40px;
    }
    
    .fixed_banner_sp{
        width: 96px;
    }
    
    .fixed_banner_pc{
        display: none;
    }
    
    .floating-banner:hover{
        opacity: 0.8;
    }

}
/* pc */
@media screen and (min-width: 768px){
    .fixed_banner{
        position: fixed;
        z-index: 9000;
        bottom: 40px;
        right: 40px;
    }
    
    .fixed_banner_sp{
        display: none;
    }

    .fixed_banner_pc{
        width: 140px;
    }
    .floating-banner:hover{
        opacity: 0.8;
    }
}


/* サービス紹介エリア　つなぎ */
/* sp/tablet */
@media screen and (max-width: 767.9px){
    .svg_decoration{
        background-color: #fff;
    }
}
/* pc */
@media screen and (min-width: 768px){
    .svg_decoration{
        background-color: #fff;
    }
}


/* サービス紹介エリア */
/* sp/tablet */
@media screen and (max-width: 767.9px){
    .about_service{
        background-color: #fff;
    }
    
    .about_service img{
        width: 100%;
        padding-bottom: 8rem;
    }
    
    .service_satisfaction{
        padding-top: 56px;
    }
    
    .senpai_q_and_a{
        padding-top: 10rem;
    }
    
    .senpai_q_and_a img{
        padding-bottom: 4rem;
    }
    
    .q_and_a{
        padding: 5rem;
    }
    
    .q_and_a p{
        display: inline-block;
        border-left: solid 2px var(--gray);
        padding-left: 1rem;
    }
    
    .question{
        padding-bottom: 2rem;
    }
    
    .question p{
        font-size: 2rem;
        font-family: var(--font-b);
        font-family: "Zen Maru Gothic", serif;
        font-weight: 700;
        font-style: normal;
        color: var(--gray);
    }

    .link_white{
        margin: 0 auto;
        text-align: center;
        padding-bottom: 4rem;
    }
    .white_button_simple{
        min-width: 100px;
        padding: 8px 40px;
        font-size: 1.5rem;
        margin: 20px 0;
        text-decoration: underline;
    }
}
/* pc */
@media screen and (min-width: 768px){
    .about_service{
        background-color: #fff;
    }
    
    .about_service img{
        width: 580px;
        padding-bottom: 8rem;
        margin: 0 auto;
    }
    
    .service_satisfaction{
        padding-top: 56px;
    }
    
    .senpai_q_and_a{
        padding-top: 10rem;
    }
    
    .senpai_q_and_a img{
        padding-bottom: 4rem;
    }
    
    .q_and_a{
        width:768px;
        margin: 0 auto;
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    
    .q_and_a p{
        display: inline-block;
        border-left: solid 2px var(--gray);
        padding-left: 1rem;
    }
    
    .question{
        padding-bottom: 2rem;
    }
    
    .question p{
        font-size: 2rem;
        font-family: var(--font-b);
        font-family: "Zen Maru Gothic", serif;
        font-weight: 700;
        font-style: normal;
        color: var(--gray);
    }
    .link_white{
        margin: 0 auto;
        text-align: center;
        padding-bottom: 4rem;
    }
    .white_button_simple{
        min-width: 100px;
        padding: 8px 40px;
        font-size: 1.5rem;
        margin: 20px 0;
        text-decoration: underline;
    }
}

/* sp/tablet */
@media screen and (max-width: 767.9px){
    .btn_otameshi{
        text-align: center;
        background-color: #fff;
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
    
    .btn_otameshi img{
        width: 75%;
        margin: auto;
        cursor: pointer;
    }
    
    .btn_otameshi img:hover{
        opacity: 0.8;
    }
}
/* pc */
@media screen and (min-width: 768px){
    .btn_otameshi{
        text-align: center;
        background-color: #fff;
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
    
    .btn_otameshi img{
        width: 296px;
        margin: auto;
        cursor: pointer;
    }
    
    .btn_otameshi img:hover{
        opacity: 0.8;
    }
}


/* sp/tablet */
@media screen and (max-width: 767.9px){
    footer{
        background-color: #fff;
        border-top: solid 1px #000;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .footer_contents{
        padding-left: 2rem;
        padding-top: 2rem;
    }

    .footer_contents .pink{
        color: var(--pink);
        font-size: 1.6rem;
        font-family: "Josefin Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 700;
        font-style: italic;
        padding-bottom: 2rem;
    }

    a .dark-brown{
        color: var(--black);
        font-size: 1.2rem;
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 400;
        font-style: normal;
        padding-bottom: 0.6rem;
    }
}
/* pc */
@media screen and (min-width: 768px){
    footer{
        background-color: #fff;
        border-top: solid 1px #000;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .footer_contents{
        padding-left: 2rem;
        max-width: 768px;
        margin: 0 auto;
        padding-top: 4rem;
    }

    .footer_contents .pink{
        color: var(--pink);
        font-size: 3rem;
        font-family: "Josefin Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 700;
        font-style: italic;
        padding-bottom: 4rem;
    }

    a .dark-brown{
        color: var(--black);
        font-size: 1.6rem;
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 400;
        font-style: normal;
        padding-bottom: 1.6rem;
    }
}

/* ヘッダーの高さ + 余白を調整 */
/* sp/tablet */
@media screen and (max-width: 767.9px){
    #voices_area{
        scroll-margin-top: 60px;
    }

    #instagram_ambassador, #youtube {
        scroll-margin-top: 80px;
    }

    #about_service{
        scroll-margin-top: 56px;
    }

    #senpai_q_and_a {
        scroll-margin-top: 40px;
    }
}

/* pc */
@media screen and (min-width: 768px){
    #voices_area{
        scroll-margin-top: 60px;
    }

    #instagram_ambassador, #youtube {
        scroll-margin-top: 80px;
    }

    #about_service{
        scroll-margin-top: 56px;
    }

    #senpai_q_and_a {
        scroll-margin-top: 40px;
    }
}