@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 ---*/
html {
    font-size: 62.5%;
    /* 10px */
}

body {
    color: #333;
    background: #FFF;
    font-size: 1.8rem;/* 18px */
    line-height: 4.0rem;
    position: relative;
    font-family: "Roboto Condensed", YakuHanJP, "Noto Sans JP", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "palt";
    -webkit-font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "palt";
    font-kerning: normal;
}






/*-- ハンバーガーボタン --*/
.hamburger {
    display : block;
    position: fixed;
    z-index : 100;
    right : 13px;
    top   : 9px;
    width : 48px;
    height: 48px;
    cursor: pointer;
    text-align: center;
    background : #ccc0;
}

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

.hamburger span {
    display : block;
    position: absolute;
    width   : 36px;
    height  : 2px ;
    left    : 6px;
    background : #555;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition   : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
}

.hamburger span:nth-child(1) {
    top: 16px;
}

.hamburger span:nth-child(2) {
    top: 28px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
    background : #333;
    top : 24px;
    left: 6px;
    -webkit-transform: rotate(-160deg);
    -moz-transform   : rotate(-160deg);
    transform        : rotate(-160deg);
}

.hamburger.active span:nth-child(2) {
    background : #333;
    top: 24px;
    -webkit-transform: rotate(160deg);
    -moz-transform   : rotate(160deg);
    transform        : rotate(160deg);
}

nav.globalMenuSp {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    background: #FFF;
    text-align: center;
    transform: translateX(-100%);
    transition: all 0.6s;
    width: 100%;
    height: 100%;
}

nav.globalMenuSp ul {
    margin-left: auto;
    padding-top: 120px;
    width: 100%;
    height: 100%;
}

nav.globalMenuSp ul li {
    list-style-type: none;
    text-align: center;
    padding: 0 20px;
    width: 100%;
}
nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
nav.globalMenuSp ul li:hover{
    color: #333;
}

nav.globalMenuSp ul li a {
    display: block;
    color: #333;
    padding: 1em 0;
    font-size: 2.4rem;
    font-weight: 600;
}

nav.globalMenuSp ul li a:hover {
    color: #009DE4;
}

.gmsp_info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-top: 30px;
}

.gmsp_follow_us {
    color: #333;
    position: relative;
    width: 250px;
    margin: 10px auto;
}

.gmsp_follow_us::before {
    position: absolute;
    content: "";
    width: 80px;
    height: 1px;
    background: #fff;
    top: 50%;
    left: 0;
}

.gmsp_follow_us::after {
    position: absolute;
    content: "";
    width: 80px;
    height: 1px;
    background: #fff;
    top: 50%;
    right: 0;
}

.gmsp_sns {
    width: 250px;
    margin: 0 auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.gmsp_sns div:nth-child(1) {
    width: 40%;
}

.gmsp_sns div:nth-child(2) {
    width: 48%;
}




/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
    transform: translateX(0%);
}

.ul_link{
    line-height: 1.5;
}

.ul_link a{
    margin-bottom: 20px;
}

.ul_link img{
    width: 5%;
}

.ul_link span{
    font-size: 20px;
}






/*--- 共通css ---*/

* {
    box-sizing: border-box;
}

.clear {
    clear: left;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

img {
    vertical-align: bottom;
    width: 100%;
}

a {
    color: #999;
    text-decoration: none;
}

a:hover {
    color: #CCC;
    transition: all 0.5s;
}

a img:hover {
    transition: all 0.5s;
    opacity: 0.9;
}

a img {
    border-width: 0px;
    border-style: none;
    border-color: #fff;
    background: transparent;
}

a.anchor {
    display: block;
    padding-top: 16px;
    margin-top: -16px;
}

section {
    width: 100%;
    position: relative;
}

.contents {
    position: relative;
    width: 85%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 0;
}

.contents100 {
    position: relative;
    width: 100%;
}

.contents100_blu {
    position: relative;
    width: 100%;
    background: #00328E;
}

.contents100_sqr {
    position: relative;
    width: 100%;
    background: #FFF url(../images/bg_square.png) repeat 0% 0%;
}

.contents100_stp {
    position: relative;
    width: 100%;
    background: #DFEFD3 url(../images/bg_stripe.png) repeat 0% 0%;
}

.contents100_ylw {
    position: relative;
    width: 100%;
    background: #FFF7DE;
    padding: 100px 0;
}

.contents100_gry {
    position: relative;
    width: 100%;
    background: #F7F7F7;
}

.conteiner1000 {
    max-width: 1000px;
    margin: 0 auto;
    padding: 100px 0;
}

.bg_image {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
}

.text_center {
    text-align: center;
}

.padding100 {
    padding: 100px 0;
}





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

.pc_none {
    display: none;
}





/*--- ヘッダー ---*/
header {
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    transition: 0.5s;
}

.header_logo {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 220px;
}





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





/*--- フッター ---*/
footer {
    position: relative;
    width: 100vw;
    background: #FFF;
}

.footer_top {
    display: flex;
    justify-content: space-between;
    width: 1300px;
    margin: 0 auto;
    padding: 100px 0;
}

.footer_top div:nth-child(1) {
    width: 540px;
}

.footer_top div:nth-child(2) {
    width: 700px;
}

.footer_logo {
    width: 340px;
    margin: 0 0 40px;
}

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

.footer_info p.f_info_01 {
    font-size: 78px;
    font-weight: 500;
    letter-spacing: -0.25rem;
}

.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: 24px;
    font-weight: 500;
}

.footer_info p.f_info_04 {
    font-size: 20px;
    line-height: 1.4em;
    font-weight: 500;
}

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

.footer_navi {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 85%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 72px 0;
}

.footer_navi li {
    width: 400px;
    margin: 0 50px 0 0;
}

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


.copyright {
    color: #fff;
    background: #00328E;
    width: 100%;
    height: 64px;
    font-size: 1.3rem;
    line-height: 64px;
    text-align: center;
}



/*--- コンバージョンエリア共通 ---*/
figure.btn_cv {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 880px;
}

.conversion_area {
    position: relative;
    width: 100vw;
    height: 300px;
    background: url(../images/bg_cv_pc.png) repeat-x 0% 50% / contain;
}

.conversion_area::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    content: "";
    width: 100vw;
    height: 50%;
}

.conversion_area::after {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: "";
    width: 100vw;
    height: 50%;
}

.cva_wt_wt::before,
.cva_wt_wt::after,
.cva_bl_wt::after,
.cva_gy_wt::after {
    background: #FFF;
}

.cva_bl_wt::before {
    background: #00328E;
}

.cva_yw_wt::before {
    background: #FFF7DE;
}

.cva_wt_gy::after,
.cva_gy_wt::before {
    background: #F7F7F7;
}

.cva_sq_st::before {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: "";
    width: 100vw;
    height: 50%;
    background: #FFF url(../images/bg_square.png) repeat 0% 0%;
}

.cva_sq_st:after {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: "";
    width: 100vw;
    height: 50%;
    background: #DFEFD3 url(../images/bg_stripe.png) repeat 0% 0%;
}



















/*--- コンテンツ ---*/
.mv_area {
    position: relative;
    z-index: -100;
    width: 100vw;
    height: auto;
}

.top_circle {
    position: absolute;
    z-index: -1;
    top: -130px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    color: #FFF;
    background: #00328E;
    width: 465px;
    height: 465px;
    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_pink {
    color: #FF6A6A;
}

.text_red {
    color: #EE0000;
}

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

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

.why_advance {
    width: 95%;
    max-width: 530px;
    margin: 0 auto;
    padding: 80px 0 40px;
}

.why_5points {
    position: relative;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 20px;
}

.why_strong {
    color: #185BD9;
    font-size: 90px;
    padding: 0 0.1em 0 0.25em;
}

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

h2 {
    color: rgba(0,0,0,0);
    font-family: "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 48px;
    font-weight: 700;
    text-align: center;
    padding: 100px 0 30px;
    letter-spacing: 0.1em;
    -webkit-text-stroke: 1px #333;
    text-stroke: 1px #333;
}

.h_red {
    text-shadow: 2px 2px #FF6A6A;
}

.h_blue {
    text-shadow: 2px 2px #93A9F4;
}

.h_green {
    text-shadow: 2px 2px #7CC975;
}

.h_yellow {
    text-shadow: 2px 2px #EBE200;
}

.h_aqua {
    text-shadow: 2px 2px #93D9F4;
}

.accent {
    position: relative;
}

.accent::before {
    position: absolute;
    top: 40px;
    left: 50.4%;
    content: url(../images/accent.png);
    transform: scale(0.5);
}

h3 {
    font-weight: 500;
    text-align: center;
    padding: 0 0 80px;
}

.point_flag {
    position: absolute;
    top: 100px;
    left: 16%;
    width: 210px;
}

.head_wrap {
    position: relative;
    padding: 100px 0 60px;
}

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

.point1_unit_list div {
    margin: 0 50px 50px 0;
}

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

.point1_unit_wrap {
}

.point1_header {
    width: 380px;
    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: 380px;
    height: 210px;
    margin: 0 auto;
    border-radius: 24px;
    background: #FFF;
    text-align: center;
    line-height: 1.1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.point1_inner figure {
    width: 240px;
}

.bgc_red {
    background: 2px 2px #FF6A6A;
    border: 10px solid #FF6A6A;
    border-radius: 30px;
}

.bgc_orange {
    background: 2px 2px #FFBA6A;
    border: 10px solid #FFBA6A;
    border-radius: 30px;
}

.bgc_yellow {
    background: 2px 2px #EBE200;
    border: 10px solid #EBE200;
    border-radius: 30px;
}

.bgc_lime {
    background: 2px 2px #B1E551;
    border: 10px solid #B1E551;
    border-radius: 30px;
}

.bgc_green {
    background: 2px 2px #7CC975;
    border: 10px solid #7CC975;
    border-radius: 30px;
}

.bgc_aqua {
    background: 2px 2px #93D9F4;
    border: 10px solid #93D9F4;
    border-radius: 30px;
}

.bgc_blue {
    background: 2px 2px #93A9F4;
    border: 10px solid #93A9F4;
    border-radius: 30px;
}

.bgc_purple {
    background: 2px 2px #CB93F4;
    border: 10px solid #CB93F4;
    border-radius: 30px;
}

.bgc_pink {
    background: 2px 2px #FFA5FF;
    border: 10px solid #FFA5FF;
    border-radius: 30px;
}


/*--- Point2 ----------------------------------------------*/
.point2_unit_list {
    width: 85%;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    padding: 0 0 80px;
}

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

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

.point2_header {
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    width: 330px;
    margin: 0 auto;
    color: #FFF;
    background: #538FFF;
    text-align: center;
    height: 80px;
    border-radius: 40px;
    line-height: 1.6em;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-self: center;
    font-weight: 700;
}

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

.point2_header::before {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    content: "";
    width: 32px;
    height: 32px;
    background: #538FFF;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

.point2_inner {
    width: 380px;
    height: 240px;
    text-align: center;
    padding: 120px 0 0;
    font-size: 40px;
    font-weight: 700;
}

.point2_strong {
    color: #EE0000;
    font-size: 100px;
}

.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;
    justify-content: space-between;
    align-items: center;
    width: 1300px;
    margin: 0 auto;
    padding: 0 0 100px;
}

.rev {
    flex-flow: row-reverse nowrap;
}

.btn_to_plan {
    position: relative;
    width: 260px;
}

.btn_to_plan a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFF;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4em;
    text-align: center;
    display: block;
    cursor: pointer;
}

.btn_to_plan a::before {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "";
    width: 180px;
    height: 180px;
    border-radius: 50%;
    cursor: pointer;
}

.btn_to_plan a:hover::before {
    opacity: 0.8;
    cursor: pointer;
}

.btn_to_plan a:after {
    position: absolute;
    bottom: -30px;
    left: 40%;
    transform: translateX(-50);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 20px;
    height: 20px;
    content: "";
    border-left: 4px solid #FFF;
    border-bottom: 4px solid #FFF;
    transform: rotate(-45deg);
    }

.voice_article {
    display: flex;
    justify-content: space-between;
    width: 1050px;
    background: #FFF;
    border-radius: 40px;
    padding: 60px 40px;
}

.voice_article_rev {
    flex-flow: row-reverse nowrap;
}

.voice_article figure {
    width: 260px;
    height: 260px;
}

.voice_contens {
    width: 640px;
}

.voice_parsonal {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 24px;
    font-weight: 700;
    padding: 0 0 0.3em;
}

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

.v_bgc_red a:before {
    background-color: #FF6A6A;
}

.v_bgc_orange a:before {
    background-color: #FFBA6A;
}

.v_bgc_blue a:before {
    background-color: #538FFF;
}

.v_bgc_green a:before {
    background-color: #7CC975;
}

.v_header_red {
    color: #FF6A6A;
}

.v_header_orange {
    color: #FFBA6A;
}

.v_header_blue {
    color: #538FFF;
}

.v_header_green {
    color: #7CC975;
}

.v_vs_red {
    box-shadow: #FF6A6A 10px 10px;
}

.v_vs_orange {
    box-shadow: #FFBA6A 10px 10px;
}

.v_vs_blue {
    box-shadow: #538FFF 10px 10px;
}

.v_vs_green {
    box-shadow: #7CC975 10px 10px;
}

.v_liner_red {
    background-image: linear-gradient(180deg, #FF6A6A 2px, transparent 2px); /* 罫線の色と太さ */
}

.v_liner_orange {
    background-image: linear-gradient(180deg, #FFBA6A 2px, transparent 2px); /* 罫線の色と太さ */
}

.v_liner_blue {
    background-image: linear-gradient(180deg, #538FFF 2px, transparent 2px); /* 罫線の色と太さ */
}

.v_liner_green {
    background-image: linear-gradient(180deg, #7CC975 2px, transparent 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: row wrap;
    justify-content: space-between;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 80px 0;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    background: #FFF;
}

.plan_unit {
    margin: 0 0 80px;
}

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

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

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

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

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

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

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

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

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

.plan_unit_top {
    width: 570px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    padding: 40px;
}

.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: 30px;
    font-weight: 700;
    text-align: center;
    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: 24px;
}

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

.plan_list li::before {
    position: absolute;
    top: 0.65em;
    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: 570px;
    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 1em 0 0;
    line-height: 1.2em;
    text-align: center;
}

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

}

.yen {
    position: relative;
    font-size: 50px;
}

.yen::after {
    position: absolute;
    top: -64px;
    left: 0;
    content: "（税込）";
    font-size: 16px;
}



/*--- Point5 ----------------------------------------------*/
.about_ad-coach {
    color: #0D3386;
    padding: 0 0 80px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    line-height: 2.4;
}

.icon_ytb {
    position: relative;
    width: 64px;
    height: 48px;
    border-radius: 16px;
    background: #E64444;
    display: block;
}

.icon_ytb::before {
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    content: "";
    width: 19px;
    height: 16px;
    background: #FFF;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

.icon_ytb::after {
    position: absolute;
    bottom: -2.4em;
    left: 65%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    content: "動画で見る";
    width: 80px;
    font-size: 12px;
    font-weight: 700;
    color: #333;
}

.pre::after {
    left: 85%;
    content: "準備中";
}

.btn_ytb_01 {
    position: absolute;
    top: 20px;
    right: 560px;
}

.coach_wrap {
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 0 100px;
}

.coach_01 {
    position: relative;
    width: 960px;
    height: 420px;
    background: #BFE6FF;
    margin: 0 340px 100px 0;
}

.coach_01 figure {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 366px;
}

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

.coach_01_header {
    font-size: 32px;
    font-weight: 700;
    width: 420px;
    flex-grow: 1;
}

.coach_01_comment {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4em;
    width: 420px;
    flex-grow: 2;
}

.coach_01_personal_wrap,
.coach_02_personal_wrap {
    display: flex;
    flex-flow: row nowrap;
}

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

.coach_02_personal_wrap .expert,
.coach_03_personal_wrap .expert,
.coach_04_personal_wrap .expert {
    margin-left: -30px;
}

.coach_02 {
    position: relative;
    width: 960px;
    height: 420px;
    background: #FFCCDA;
    margin: 0 0 100px 340px;
}

.btn_ytb_02 {
    position: absolute;
    top: 20px;
    right: 340px;
}

.coach_02 figure {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 336px;
}

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

.coach_02_header {
    font-size: 32px;
    font-weight: 700;
    width: 420px;
    flex-grow: 1;
}

.coach_02_comment {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4em;
    width: 420px;
    flex-grow: 2;
}




.coach_wrap_02 {
    width: 90%;
    max-width: 1160px;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    margin: 0 auto;
    padding: 0;
}

.coach_03 {
    position: relative;
    width: 480px;
    height: 720px;
    background: #BFE6FF;
    margin: 0 50px 200px;
}

.coach_04 {
    position: relative;
    width: 480px;
    height: 720px;
    background: #FFCCDA;
    margin: 0 50px 200px;
}

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

.coach_03 figure,
.coach_04 figure {
    position: absolute;
    bottom: 50%;
    left: 0;
    width: 360px;
}

.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: 480px;
	height: 560px;
	clip-path: polygon(0% 25%, 0% 100%, 100% 100%, 100% 0%);
    padding: 160px 20px 20px;
}

.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: 480px;
	height: 560px;
	clip-path: polygon(0% 25%, 0% 100%, 100% 100%, 100% 0%);
    padding: 160px 20px 20px;
}

.coach_03_header,
.coach_04_header {
    font-size: 30px;
    font-weight: 700;
    width: 420px;
    flex-grow: 1;
}

.coach_03_comment,
.coach_04_comment {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4em;
    width: 420px;
    flex-grow: 2;
}

.coach_03_personal_wrap,
.coach_04_personal_wrap {
    display: flex;
    flex-flow: row nowrap;
}

.coach_personal_wrap .expert {
    width: 130px;
}

.coach_personal {
    font-weight: 700;
}

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

.name_e {
    font-size: 24px;
}

.name_j {
    font-size: 42px;
}



.coach_wrap_03 {
    position: relative;
    max-width: 960px;
    height: 180px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    margin: 0 auto 180px;
    padding: 1.0em 0 1.0em 240px;
    box-shadow: 0px 1px 8px #999;
}

.ex_coach_logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 240px;
    height: 180px;
    background: #00328E;
    clip-path: polygon(0% 0%, 100% 0%, 60% 100%, 0% 100%);
}

.ex_coach_logo figure {
    position: absolute;
    top: 50%;
    left: 3%;
    transform: translateY(-50%);
    width: 160px;
}

.ex_coach_header {
    font-size: 18px;
    font-weight: 700;
}

.coach_strong {
    font-size: 20px;
}

.ex_coach_list li {
    position: relative;
    font-size: 16px;
    font-weight: 500;
    padding: 0 0 0 1.0em;
    line-height: 1.8em;
}

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





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

.insta_area {
    width: 940px;
    margin: 0 auto;
}

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

.insta-list li {
    width: 294px;
    height: 294px;
    margin-right: 29px;
    margin-bottom: 29px;
}

.insta-list li:nth-of-type(3n) {
    margin-right: 0;
}

.object-fit {
    width: 294px;
    height: 294px;
    object-fit: cover;
}

.sns_icons {
    width: 330px;
    margin: 0 auto 100px;
    display: flex;
    justify-content: center;
}

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
























/*--- End ---*/