@charset "utf-8";
/* CSS Document */
/*
Theme Name: START!! 卓球スクール・卓球用品店アドバンス
Theme URI: https://t-advance.jp
Version: 1.0
Author: DIGITAL STRIVE
Author URI: https://d-strive.com/
Requires PHP: 7.4
*/


/*--- PC版表示CSS ---*/
@media screen and (max-width:1024px) {

    body {
    background: #fff url() no-repeat fixed 50% 50% / cover;
    }


    /*--- ヘッダー ---*/







}





/*-- スマホ表示CSS - W640 --*/
@media screen and (max-width:640px) {
    body {
        color: #333;
        background: #FFF;
        font-size: 1.6rem;/* 16px */
        line-height: 3.2rem;
    }




    /*--- 共通css ---*/
    .conteiner1000 {
        width: 100%;
        padding: 40px 0;
    }






    /*--- ヘッダー ---*/
    header {
    }



    .hamburger::before {
        position: absolute;
        top: -60px;
        right: -60px;
        content: '';
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: #FFF;
    }





    /*--- スクロールトップ ---*/
    #page_top {
        color: #538FFF;
        font-size: 4.0rem;
        position: fixed;
        z-index: 90;
        bottom: 60px;
        right: 20px;
    }



    /*--- フッター ---*/
    .footer_top {
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        width: 85%;
        margin: 0 auto;
        padding: 60px 0;
    }

    .footer_top div:nth-child(1) {
        width: 100%;
    }

    .footer_top div:nth-child(2) {
        width: 100%;
    }

    .footer_logo {
        width: 100%;
        margin: 0 0 40px;
    }

    .footer_info p {
        margin: 0 0 0.25em;
    }

    .footer_info p.f_info_01 {
        font-size: 48px;
        font-weight: 500;
        letter-spacing: -0.25rem;
        text-align: center;
    }

    .footer_info p.f_info_01 a {
        color: #00328E;
    }

    .footer_info p.f_info_02 {
        color: #FFF;
        background: #00328E;
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 24px;
        font-weight: 500;
        text-align: center;
        margin: 0 0 1.4em;
    }

    .footer_info p.f_info_03 {
        color: #00328E;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
    }

    .footer_info p.f_info_04 {
        font-size: 16px;
        line-height: 1.4em;
        font-weight: 500;
        text-align: center;
        margin: 0 0 20px;
    }

    .footer_bottom {
        width: 100vw;
        color: #FFF;
        background: #00328E;
    }

    .footer_navi {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        margin: 0 auto;
        padding: 48px 0;
    }

    .footer_navi li {
        width: 100%;
        margin: 0 0 20px 0;
    }

    .footer_navi li:last-child {
        margin: 0 0 20px;
    }

    .gmap_wrap {
        max-width: 700px;
        width: 100%;
        margin: 0 auto;
        /*clip-path: inset(0 round 30px); 角丸を付ける場合*/
    }

    .gmap {
        height: 0;
        overflow: hidden;
        padding-bottom: 50%;
        position: relative;
    }

    .gmap iframe {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
    }





    /*-- ディスプレイ切り替え --*/
    .sp_none {
        display: none;
    }

    .pc_none {
        display: block;
    }








    /*--- コンテンツ ---*/
    .top_circle {
        position: absolute;
        z-index: -1;
        top: -80px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        color: #FFF;
        background: #00328E;
        width: 375px;
        height: 375px;
        border-radius: 50%;
        padding: 1.6em 0 0;
    }

    .top_circle p {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.4em;
        text-align: center;
        padding: 0 0 0.5em;
    }

    .text_strong {
        font-size: 40px;
        font-weight: 700;
    }

    .top_message {
        width: 85%;
        max-width: 880px;
        margin: 0 auto;
        padding: 60px 0;
    }



    .why_5points {
        font-size: 24px;
        margin: 0 0 60px;
    }

    .why_strong {
        font-size: 64px;
    }

    .why_5points::before {
        position: absolute;
        bottom: -1.0em;
        left: 0;
        right: 0;
        content: url(../images/under_line.png);
        transform: scale(0.3);
    }



    h2 {
        font-size: 30px;
        padding: 100px 0 30px;
    }

    .accent::before {
        position: absolute;
        top: 50px;
        left: 45%;
        content: url(../images/accent.png);
        transform: scale(0.3);
    }


    h3 {
        font-size: 18px;
        padding: 0 0 40px;
        width: 90%;
        margin: 0 auto;
        text-align: center;
    }

    .point_flag {
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 160px;
    }

    .point1_unit_list {
        width: 90%;
        max-width: 1300px;
        margin: 0 auto;
        display: flex;
        flex-flow: column wrap;
        justify-content: flex-start;
        padding: 0 0 80px;
    }

    .point1_unit_list div {
        width: 100%;
        margin: 0 auto 40px;
    }

    .point1_unit_list div:nth-child(3n) {
        margin: 0 auto 40px;
    }

    .point1_unit_wrap {
        width: 100%;
    }

    .point1_header {
        width: 100%;
        height: 70px;
        padding: 10px 0;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        color: #FFF;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.1em;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .point_unit_wrap div.point1_inner {
        width: 100%;
        height: 100px;
        margin: 0 auto;
        border-radius: 24px;
        background: #FFF;
        text-align: left;
        line-height: 1.2em;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .point1_inner figure {
        width: 120px;
    }







    /*--- Point2 ----------------------------------------------*/
    .point2_unit_list {
        display: flex;
        flex-flow: column wrap;
        justify-content: flex-start;
        padding: 0 0 80px;
    }

    .point2_unit_wrap {
        position: relative;
        background: #FFF;
        border-radius: 10px;
        border: 1px #538FFF solid;
        margin: 0 0 80px 0;
    }

    .point2_unit_wrap:nth-child(3n) {
        margin: 0 0 80px  0;
    }

    .point2_header {
        position: absolute;
        top: -40px;
        left: 0;
        right: 0;
        width: 90%;
        margin: 0 auto;
        height: 80px;
        border-radius: 40px;
        line-height: 1.6em;
    }

    .point2_header p:nth-child(2) {
        font-size: 24px;
    }

    .point2_inner {
        width: 100%;
        height: 160px;
        text-align: center;
        padding: 90px 0 0;
        font-size: 40px;
        font-weight: 700;
    }

    .point2_strong {
        font-size: 80px;
    }

    .p2_01, .p2_05 {
        background: url(../images/icon_members.png) no-repeat 90% 90%;
    }

    .p2_02 {
        background: url(../images/icon_participant.png) no-repeat 90% 90%;
    }

    .p2_03, .p2_04 {
        background: url(../images/icon_players.png) no-repeat 90% 90%;
    }

    .p2_06 {
        background: url(../images/icon_coach.png) no-repeat 90% 90%;
    }



    /*--- Point3 ----------------------------------------------*/
    .voice_wrap {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 85%;
        margin: 0 auto;
        padding: 0 0 100px;
    }

    .rev {
        flex-flow: column nowrap;
    }

    .btn_to_plan {
        display: none;
    }

    .voice_article {
        position: relative;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        width: 100%;
        background: #FFF;
        border-radius: 40px;
        padding: 100px 20px 20px;
        margin: 60px 0 0;
    }

    .voice_article_rev {
        flex-flow: column nowrap;
    }

    .voice_article figure {
        position: absolute;
        top: -100px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 200px;
        height: 200px;
    }

    .voice_contens {
        width: 100%;
    }

    .voice_parsonal {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.3em;
        padding: 0.5em 0 0.5em;
    }

    .voice_content {
        font-size: 16px;
        background-color: #fff; /* 背景色 */
        background-size: 100% 2.5em; /* 行の高さ */
        line-height: 2.5em; /* 文字の高さ */
        padding-bottom: 2px; /* 最終行の下にも罫線を引く */
    }





    /*--- Point4 ----------------------------------------------*/
    .plan_header_back {
        width: 90%;
        max-width: 1400px;
        margin: 0 auto;
        border-top-left-radius: 40px;
        border-top-right-radius: 40px;
        background: #FFF;
        padding: 100px 0 0;
    }

    .plan_wrap {
        display: flex;
        flex-flow: column wrap;
        justify-content: space-between;
        width: 90%;
        max-width: 1400px;
        margin: 0 auto;
        padding: 80px 10px 0;
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;
        background: #FFF;
    }

    .plan_unit {
        width: 100%;
        margin: 0 0 80px;
    }

    .plan_header {
        width: 100%;
        position: relative;
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        padding: 0 0 0.5em;
    }

    .ph_red::before {
        position: absolute;
        top: 0;
        left: 50px;
        content: "";
        width: 6px;
        height: 32px;
        background: #FF6A6A;
        transform: rotate(-15deg);
    }

    .ph_red::after {
        position: absolute;
        top: 0;
        right: 50px;
        content: "";
        width: 6px;
        height: 32px;
        background: #FF6A6A;
        transform: rotate(15deg);
    }

    .ph_orange::before {
        position: absolute;
        top: 0;
        left: 30px;
        content: "";
        width: 6px;
        height: 32px;
        background: #FFBA6A;
        transform: rotate(-15deg);
    }

    .ph_orange::after {
        position: absolute;
        top: 0;
        right: 30px;
        content: "";
        width: 6px;
        height: 32px;
        background: #FFBA6A;
        transform: rotate(15deg);
    }

    .ph_blue::before {
        position: absolute;
        top: 0;
        left: 10px;
        content: "";
        width: 6px;
        height: 32px;
        background: #538FFF;
        transform: rotate(-15deg);
    }

    .ph_blue::after {
        position: absolute;
        top: 0;
        right: 10px;
        content: "";
        width: 6px;
        height: 32px;
        background: #538FFF;
        transform: rotate(15deg);
    }

    .ph_green::before {
        position: absolute;
        top: 0;
        left: 50px;
        content: "";
        width: 6px;
        height: 32px;
        background: #7CC975;
        transform: rotate(-15deg);
    }

    .ph_green::after {
        position: absolute;
        top: 0;
        right: 50px;
        content: "";
        width: 6px;
        height: 32px;
        background: #7CC975;
        transform: rotate(15deg);
    }

    .plan_unit_top {
        width: 100%;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        padding: 20px 15px;
    }

    .p_unit_top_red {
        background: #FFEDED;
    }

    .p_unit_top_orange {
        background: #FFF07E;
    }

    .p_unit_top_blue {
        background: #BFE6FF;
    }

    .p_unit_top_green {
        background: #E3FDB1;
    }

    .plan_subheader {
        font-size: 24px;
        border-bottom: 2px dotted #aaa;
        padding: 0 0 0.5em 0;
        margin: 0 0 0.5em 0;
    }

    .psh_red {
        color: #FF6A6A;
    }

    .psh_orange {
        color: #FFBA6A;
    }

    .psh_blue {
        color: #538FFF;
    }

    .psh_green {
        color: #7CC975;
    }

    .plan_list {
        font-size: 16px;
    }

    .plan_list li {
        position: relative;
        display: inline-block;
        padding: 0 0 0 1em;
        line-height: 1.4em;
    }

    .plan_list li::before {
        position: absolute;
        top: 0.3em;
        left: 0;
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }

    .p_list_red li::before {
        background: #FF6A6A;
    }

    .p_list_orange li::before {
        background: #FFBA6A;
    }

    .p_list_blue li::before {
        background: #538FFF;
    }

    .p_list_green li::before {
        background: #7CC975;
    }

    .plan_unit_bottom {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
    }

    .p_unit_bottom_red {
        background: #FF6A6A;
    }

    .p_unit_bottom_orange {
        background: #FFBA6A;
    }

    .p_unit_bottom_blue {
        background: #538FFF;
    }

    .p_unit_bottom_green {
        background: #7CC975;
    }

    .plan_time {
        color: #FFF500;
        font-size: 20px;
        font-weight: 700;
        padding: 0 0.3em 0 0;
        line-height: 1.2em;
        text-align: center;
    }

    .plan_price {
        height: 100px;
        line-height: 100px;
        color: #FFF500;
        font-size: 64px;
        font-weight: 700;
        text-align: center;

    }

    .yen {
        font-size: 36px;
    }

    .yen::after {
        top: -56px;
        left: 0;
        font-size: 12px;
    }







    /*--- Point5 ----------------------------------------------*/
    .about_ad-coach {
        width: 85%;
        margin: 0 auto;
        padding: 0 0 60px;
        text-align: left;
        font-size: 16px;
        line-height: 1.8;
    }

    .coach_wrap,
    .coach_wrap_02 {
        width: 90%;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-around;
        margin: 0 auto;
        padding: 0;
    }

    .coach_01,
    .coach_03 {
        position: relative;
        width: 100%;
        height: 720px;
        background: #BFE6FF;
        margin: 0 0 60px 0;
    }

    .coach_02,
    .coach_04 {
        position: relative;
        width: 100%;
        height: 720px;
        background: #FFCCDA;
        margin: 0 0 60px 0;
    }

    .btn_ytb_01,
    .btn_ytb_02,
    .btn_ytb_03,
    .btn_ytb_04 {
        position: absolute;
        top: 20px;
        right: 30px;
    }

    .coach_01 figure,
    .coach_02 figure,
    .coach_03 figure,
    .coach_04 figure {
        position: absolute;
        bottom: 50%;
        left: 0;
        width: 80%;
    }

    .coach_01_contents,
    .coach_03_contents {
        color: #FFF;
        background: #185BD9;
        position: absolute;
        bottom: 0;
        right: 0;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
        height: 560px;
        clip-path: polygon(0% 25%, 0% 100%, 100% 100%, 100% 0%);
        padding: 160px 20px 20px;
    }

    .coach_02_contents,
    .coach_04_contents {
        color: #FFF;
        background: #D83B71;
        position: absolute;
        bottom: 0;
        right: 0;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
        height: 560px;
        clip-path: polygon(0% 25%, 0% 100%, 100% 100%, 100% 0%);
        padding: 160px 20px 20px;
    }

    .coach_01_header,
    .coach_02_header,
    .coach_03_header,
    .coach_04_header {
        font-size: 24px;
        font-weight: 700;
        width: 100%;
        flex-grow: 1;
    }

    .coach_01_comment,
    .coach_02_comment,
    .coach_03_comment,
    .coach_04_comment {
        font-size: 16px;
        font-weight: 500;
        line-height: 1.6em;
        width: 100%;
        flex-grow: 2;
    }

    .coach_01_personal_wrap,
    .coach_02_personal_wrap,
    .coach_03_personal_wrap,
    .coach_04_personal_wrap {
        display: flex;
        flex-flow: row nowrap;
        align-self: flex-end;
    }

    .coach_01_personal_wrap .expert,
    .coach_02_personal_wrap .expert,
    .coach_03_personal_wrap .expert,
    .coach_04_personal_wrap .expert {
        width: 100px;
    }

    .coach_personal {
        font-weight: 700;
    }

    .coach_type {
        font-size: 14px;
        border-bottom: 1px solid #FFF;
    }

    .name_e {
        font-size: 16px;
    }

    .name_j {
        font-size: 26px;
    }




    .coach_wrap_03 {
        width: 90%;
        height: auto;
        margin: -20px auto 80px;
        padding: 1.0em 1.0em;
    }

    .ex_coach_logo {
        position: absolute;
        width: 40%;
        height: 90px;
    }

    .ex_coach_logo figure {
        width: 80px;
    }

    .ex_coach_header {
        height: 90px;
        font-size: 16px;
        font-weight: 700;
        padding: 0 0 0 110px;
        text-align: center;
        line-height: 2.0rem;
    }

    .coach_strong {
        font-size: 18px;
    }

    .ex_coach_list li {
        position: relative;
        font-size: 14px;
        font-weight: 500;
        padding: 0 0 0 1.2em;
        line-height: 1.4em;
    }

    .ex_coach_list li::before {
        position: absolute;
        top: 0.3em;
        left: 0;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        content: "";
        width: 10px;
        height: 10px;
        background: #333;
    }




















    /*--- インスタグラム ---*/
    .insta_title {
        width: 100%;
        margin: 60px auto 10px;
    }

    .insta_area {
        width: 100%;
    }

    .insta-list {
        display: flex;
        flex-flow: wrap;
        justify-content: flex-start;
        list-style: none;
        margin-bottom: 20px;
    }

    .insta-list li {
        width: 33.33vmin;
        height: 33.33vmin;
        margin-right: 0;
        margin-bottom: 0;
    }

    .object-fit {
        width: 33.33vmin;
        height: 33.33vmin;
        object-fit: cover;
    }

    .sns_icons {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 40px;
    }

    .sns_icons li {
        width: 24px;
        margin: 0 20px;
        list-style: none;
    }





}

/*-- End --*/