/************************

    ピラティスとは（SP）
************************/
@media screen and (max-width: 450px){
    .pilates_pc {
        display: none;
    }
    .pilates {
        padding-top: 19vw;
    }
    .whatspilates_sp_img {
        width: 100%;
    }
    .whatspilates_sp_top {
        color: #fff;
        background-color: #0b0b0b;
        padding: 0 8vw 2vw 8vw;
    }
    .whatspilates_sp_title {
        display: flex;
        align-items: end;
        padding: 8vw 0;
    }
    .whatspilates_sp_title h1 {
        font-size: 2vw;
        margin-right: 6vw;
    }
    .whatspilates_sp_title h2 {
        font-size: 4vw;
    }
    .whatspilates_sp_sub {
        font-size: 4vw;
        padding-bottom: 8vw;
    }
    .whatspilates_sp_sub_p {
        padding-bottom: 1.7vw
    }
    .whatspilates_sp_top_text {
        font-size: 3vw;
        line-height: 5.5vw;
    }
    .pilates_slide {
        background-color: #0b0b0b;
        color: #000;
        -webkit-text-stroke: 0.3vw #FFF;
        text-stroke: 1px #FFF;
        padding: 6vw 0;
        font-size: 12vw;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        width: 100%;
        overflow: hidden;
    }
    .pilates_slide .marquee {
        display: inline-block;
        white-space: nowrap;
        position: relative;
        padding-right: 3vw;
        animation: marquee 30s linear 0s infinite;
    }
    .pilates_slide .marquee:after {
        content: attr(data-text);
        position: absolute;
        left: 100%;
        top: 0;
    }
    @keyframes marquee {
        0% {
        transform: translateX(0);
        }
        100% {
        transform: translateX(-100%);
        }
    }
    .pilates_features_sp_content {
        position: absolute;
        top: 4vw;
        /* left: 44vw;
        transform: translate(-22vw, -50vw); */
        font-size: 2.6vw;
        color: #fff;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .pilates_features_sp_content h1 {
        font-size: 8vw;
    }
    .pilates_features_sp_content h2 {
        font-size: 5vw;
    }
    .pilates_features_sp_content h3 {
        font-size: 21vw;
        opacity: .4;
    }
    .pilates_features_sp_content h4 {
        font-size: 4vw;
        margin-bottom: 8vw;
    }
    .pilates_features_sp_content p {
        line-height: 4.5vw;
    }
    .pilates_features_sp_title {
        text-align: center;
    }
    .features_position {
        position: relative;
        margin-top: 8vw;
    }
    .features_position h3 {
        position: absolute;
        top: 0;
        left: 48vw;
    }
    /* ------------------------------------------------------------ */
    .background-container {
        position: relative; /* テキストの親要素を相対位置に設定 */
        width: 100%; /* 画像の幅を100%に設定 */
    }

    .background-image {
        width: 100%; /* 画像の幅を100%に設定 */
        height: auto; /* 高さを自動調整 */
    }
    .scrolling-text {
        position: absolute; /* テキストを絶対位置に設定 */
        top: 50%; /* 上端を画面の中央に配置 */
        left: 50%; /* 左端を画面の中央に配置 */
        transform: translate(-50%, -50%); /* 中央揃え */
        z-index: 1; /* 画像よりも前面に表示 */
        /* テキストの幅を指定 */
        width: 80%;
        /* テキストの高さを指定 */
        height: 117vw; /* 例: 適切な高さに変更 */
        /* テキストをスクロール可能にする */
        overflow: auto; /* スクロールバーを表示 */
    }
    /* Webkit系（Chrome, Safari） */
    .scrolling-text::-webkit-scrollbar {
        display: none; /* スクロールバーを非表示にする */
    }

    /* Firefox */
    .scrolling-text {
        scrollbar-width: none; /* Firefox用のスクロールバーを非表示にする */
        -ms-overflow-style: none; /* Internet Explorer用のスクロールバーを非表示にする */
    }
    /* ------------------------------------------------------------ */
    .pilates_machine_sp {
        margin: 12vw 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .pilates_machine_sp img {
        width: 80vw;
        margin: 9vw 0;
    }
    .pilates_machine_sp h1 {
        font-size: 8vw;
    }
    .pilates_machine_sp h2 {
        font-size: 5vw;
        margin-bottom: 1vw;
    }
    .pilates_machine_sp_title {
        text-align: center;
    }
    .pilates_machine_sp_text h2 {
        margin-bottom: 3vw;
    }
    .pilates_machine_sp_text {
        width: 80vw;
        line-height: 5vw;
    }
    .pilates_machine_sp_text p {
        font-size: 3.4vw;
    }
    .pilates_machine_sp_btn_block {
        display: flex;
        justify-content: center;
        margin-bottom: 10vw;
    }
    .pilates_machine_sp_btn {
        width: 37vw;
        height: 15vw;
        background-color: #313131;
        color: #fff;
        display: flex;
        justify-content: center;
    }
    .pilates_machine_sp_btn a {
        display: flex;
        align-items: center;
    }
    .pilates_machine_sp_btn p {
        text-align: center;
    }
}
/************************

ピラティスとは
************************/
@media screen and (min-width: 451px){
    .pilates_sp {
        display: none;
    }
    .pilates {
        position: relative;
        padding-top: 11vw;
    }
    .breadcrumb-001 {
        position: absolute;
        top: 12vw;
        z-index: 1;
        display: flex;
        gap: 0 1vw;
        list-style: none;
        font-size: .9em;
        padding-left: 5vw;
    }
    
    .breadcrumb-001 li {
        display: flex;
        align-items: center;
    }
    
    .breadcrumb-001 li:not(:last-child)::after {
        display: inline-block;
        transform: rotate(45deg);
        width: .7em;
        height: .7em;
        margin-left: 10px;
        border-top: 1px solid #000;
        border-right: 1px solid #000;
        content: '';
    }
    
    .breadcrumb-001 a {
        text-decoration: none;
    }
    .sp_fv {
        position: relative;
        padding-bottom: 20vw;
    }
    .sp_fv img{
        width: 100%;
    }
    /*
    * @parts：「ピラティスとは」一つ目のブロック基本
    * @design：バックカラー、フォントカラー、テキストと画像の横並び
    */
    .pilates_block_1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #0b0b0b;
        color: #fff;
    }
    /*
    * @parts：「ピラティスとは」一つ目のブロックタイトル
    * @design：フォントサイズ
    */
    .pilates_block_1 h2 {
        font-size: .8vw;
        margin-right: 2vw;
    }
    .pilates_block_1 h1 {
        font-size: 1.3vw;
    }
    /*
    * @parts：「ピラティスとは」一つ目のブロックpタグ
    * @design：行間
    */
    .pilates_block_1 p {
        line-height: 1.5vw;
        font-size: 1.1vw;
    }
    /*
    * @parts：「ピラティスとは」一つ目のブロック画像
    * @design：画像サイズ
    */
    .pilates_block_1 img {
        width: 35vw;
        height: auto;
    }
    /*
    * @parts：「ピラティスとは」一つ目のブロックテキスト
    * @design：左右中央寄せ
    */
    .pilates_text_area {
        margin: 0 auto;
    }
    /*
    * @parts：「ピラティスとは」一つ目のブロックタイトル
    * @design：英語日本語横並び、下寄せ、下にマージン
    */
    .pilates_title {
        display: flex;
        align-items: flex-end;
        margin-bottom: 5vw;
    }
    .pilates_title_sub {
        margin-bottom: 3vw;
    }
    /*
    * @parts：「ピラティスとは」スライド
    * @design：各種設定
    */
    .pilates_slide {
    background-color: #0b0b0b;
    color: #000;
    -webkit-text-stroke: 0.3vw #FFF;
    text-stroke: 1px #FFF;
    padding: 4vw 0;
    font-size: 12vw;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    width: 100%;
    overflow: hidden;
    }
    .pilates_slide .marquee {
    display: inline-block;
    white-space: nowrap;
    position: relative;
    padding-right: 3vw;
    animation: marquee 30s linear 0s infinite;
    }
    .pilates_slide .marquee:after {
    content: attr(data-text);
    position: absolute;
    left: 100%;
    top: 0;
    }
    @keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
    }
    /*
    * @parts：「ピラティスの特徴」
    * @design：
    */
    .pilates_features {
    position: relative;
    background-color: #000;
    }
    /*
    * @parts：「ピラティスの特徴」バック画像
    * @design：サイズ、画像暗く
    */
    .pilates_features img {
    width: 100%;
    display: block;
    opacity: 0.3;
    }
    /*
    * @parts：「ピラティスの特徴」
    * @design：テキストを画像の上に配置、中央寄せ
    */
    .pilates_features_content {
    position: absolute;
    top: 6vw;
    /* left: 44vw;
    transform: translate(-22vw, -50vw); */
    font-size: 1vw;
    color: #fff;
    width: 100%;
    }
    .pilates_features_title {
    text-align: center;
    margin-bottom: 10vw;
    }
    /*
    * @parts：「ピラティスの特徴」タイトル（英語）
    * @design：フォントサイズ
    */
    .pilates_features_title h1 {
    font-size: 2.5vw;
    }
    /*
    * @parts：「ピラティスの特徴」タイトル（日本語）
    * @design：フォントサイズ
    */
    .pilates_features_title h2 {
    font-size: 1.8vw;
    }
    /*
    * @parts：「ピラティスの特徴」テキスト
    * @design：数字と文字横並び
    */
    .features_flex {
    display: flex;
    margin-bottom: 5vw;
    line-height: 1.5vw;
    }
    .features_nam {
    margin-right: 4vw;
    }
    .features_flex h3 {
    font-size: 6vw;
    }
    .features_flex h4 {
    font-size: 1.5vw;
    margin-bottom: 3vw;
    padding-top: 1vw;
    }
    /*
    * @parts：「ピラティスの特徴」奇数ナンバー
    * @design：右にずらす
    */
    .pilates_features_text_1,.pilates_features_text_3 {
    margin-left: 14vw;
    }
    /*
    * @parts：「ピラティスの特徴」偶数ナンバー
    * @design：右にずらす
    */
    .pilates_features_text_2,.pilates_features_text_4 {
    margin-left: 32vw;
    }
    .pilates_machine_title {
    margin: 7vw 0;
    text-align: center;
    }
    .pilates_machine_title h1 {
    font-size: 3vw;
    }
    .pilates_machine_title h2 {
    font-size: 1.3vw;
    }
    /*
    * @parts：「ピラティスマシン」
    * @design：画像とテキスト横並び、中央寄せ
    */
    .machine_flex {
    display: flex;
    justify-content: center;
    }
    .machine_flex img {
    width: 32vw;
    }
    .machine_flex h2 {
    font-size: 1.3vw;
    margin-bottom: 2vw;
    }
    .machine_flex p {
    font-size: 1vw;
    line-height: 1.5vw;
    }
    .machine_center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    }
    .pilates_machine_reformer {
    margin-bottom: 7vw;
    }
    .pilates_machine_reformer_text {
    margin-left: 4vw;
    }
    .pilates_machine_combochair_text {
    margin-right: 4vw;
    }
    .pilates_machine_combochair {
    margin-bottom: 7vw;
    }
}