@charset "utf-8";

@media screen and (max-width:1024px) {

    /*
 	    General
    ------------------------------------*/

    body {
        padding-bottom: 144px;
    }

    /*--------------------------------
        タブレット表示
    --------------------------------*/

    .tablet,
    .pc-tablet,
    .tablet-sp {
        display: inline-block !important;
    }

    .pc,
    .sp,
    .sp-small {
        display: none !important;
    }

    /*
 	    Header
    ------------------------------------*/

    header {
        position: initial;
        top: 0;
        width: 100%;
        height: 55px;
        border-bottom: 1px solid #dbd5d0;
    }

    #header-wrap {
        position: relative;
        width: 100%;
        height: 55px;
    }

    /*------ 店舗情報＋ロゴ -------*/

    #shop-info-box {
        position: absolute;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        -webkit-transform: translateY(-50%) translateX(-50%);
    }

    #shop-info-box p {
        margin-left: 0;
        text-align: center;
    }

    #shop-info-box p:first-child {
        margin-bottom: 3px;
        letter-spacing: 0;
    }

    #shop-info-box p:nth-child(2) {
        margin: 5px auto;
    }

    /*------ ロゴ -------*/

    #logo {
        display: none;
    }

    /*------ Header ナビ -------*/

    nav#global-nav {
        display: none;
    }

    /*
 	    Contents
    ------------------------------------*/

    #contents {
        position: relative;
        padding-top: 0;
    }

    .section-wrap > h2,
    .section-wrap > p.sub-title {
        max-width: 90%;
    }

    .inner {
        max-width: 90%;
    }

    /*
 	    メインビジュアル
    ------------------------------------*/

    #main-visual .inner {
        max-width: 97%;
    }

    .main-visual-wrap {
        height: 500px;
    }

    .main-visual-wrap .main-visual-box {
        position: absolute;
        width: 100%;
        top: 50%;
        left: 50%;
        text-align: center;
        transform: translateY(-50%) translateX(-50%);
        -webkit-transform: translateY(-50%) translateX(-50%);
    }

    .main-visual-wrap .staff-box {
        display: none;
    }

    /*
 	    患者様とのツーショット
    ------------------------------------*/

    #customer.section-wrap {
        padding: 0;
    }

    .customer-wrap.inner {
        max-width: 100%;
    }

    /*
 	    タブレット＋スマホ追従ナビ
    ------------------------------------*/

    #tablet-sp-nav {
        position: fixed;
        z-index: 9999 !important;
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        bottom: 0;
        z-index: 1;
    }

    #tablet-sp-nav div {
        padding: 10px 0;
        background: #fffdb6;
    }

    #tablet-sp-nav div p {
        font-size: 2.4rem;
        text-align: center;
        font-weight: bold;
        color: #333333;
    }

    #tablet-sp-nav ul {
        font-size: 0;
    }

    #tablet-sp-nav ul li {
        display: inline-block;
        width: 50%;
        /* 未対応ブラウザ用 */
        width: -webkit-calc(100% / 2);
        width: calc(100% / 2);
    }

    #tablet-sp-nav ul li a {
        display: inline-block;
        width: 100%;
        height: auto;
        padding: 10px 0;
        font-size: 3rem;
        font-weight: 600;
        text-decoration: none;
    }

    #tablet-sp-nav ul li p {
        text-align: center;
        color: #fff;
        font-weight: 600;
    }

    #tablet-sp-nav ul li p i {
        text-align: center;
        margin: -8px 15px 0 0;
        font-size: 3.5rem;
        vertical-align: middle;
    }

    #tablet-sp-nav ul li a p:nth-child(2) {
        font-size: 2.4rem;
    }

    #tablet-sp-nav ul li.tel-btn a {
        background: #ff8300;
    }

    #tablet-sp-nav ul li.form-btn a {
        background: #11386b;
    }

    #tablet-sp-nav ul li.line-btn a {
        background: #00b301;
    }

    .bottom-shadow {
        box-shadow: 0 3px 6px rgb(0 0 0 / 20%);
    }

    /*
 	    初回お試し体験＋院情報(マップ＋受付時間)
    -------------------------------------*/

    /*------ 初回お試し体験 -------*/

    .offer-nav-wrap h3 {
        padding: 15px 0;
    }

    .campaign-box {
        padding: 25px;
    }

    /*
 	    患者様の喜びの声
    ------------------------------------*/

    /*------ お客様の名前 -------*/

    .customer-title h3,
    .customer-name {
        text-align: center;
    }

    /*------ 動画 -------*/

    .voice-wrap ul li.customer-movie .customer-data {
        width: 100%;
    }

    .customer-data p:last-child {
        font-size: 1.4rem;
    }

    .voice-wrap ul li.customer-movie .movie-box {
        width: 100%;
        margin: 0 0 20px 0;
    }

    /*------ テキストのみ -------*/

    .customer-icon,
    .voice-wrap ul li.customer-text-only .customer-title,
    .voice-wrap ul li.customer-text-only .customer-icon,
    .voice-wrap ul li.customer-text-only .customer-data {
        width: 100%;
    }

    .voice-wrap ul li.customer-text-only {
        display: flex;
        flex-direction: column;
    }

    .voice-wrap ul li.customer-text-only .customer-title {
        margin-bottom: 25px;
        padding-bottom: 20px;
        border-bottom: dotted 5px #d3ddea;
        order: 1;
    }

    .voice-wrap ul li.customer-text-only .customer-icon {
        margin: 0 0 25px 0;
        order: 2;
    }

    .voice-wrap ul li.customer-text-only .customer-data {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
        order: 3;
    }

    /*
 	    院長メッセージ＋プロフィール
    ------------------------------------*/

    #director .column2-wrap div {
        width: 100%;
    }

    #director .column2-wrap .left-box {
        margin: 0 0 20px 0;
    }

    /*
 	    5つの特徴
    ------------------------------------*/

    /*------ 痛い部分だけでなく＋創業15年 -------*/

    .reasons02,
    .reasons03 {
        width: 100%;
    }

    .reasons02 {
        margin: 0 0 50px 0;
    }

    /*------ 国家資格を持った身体の専門家 -------*/

    .reasons04 div,
    .reasons04 > p {
        width: 100%;
        margin-bottom: 20px;
    }

    .reasons04 .thumb {
        margin: 0 0 20px 0;
    }

    /*------ コロナウィルス感染症対策 -------*/

    .covid19-wrap {
        display: inherit;
    }

    .covid19-wrap div {
        width: 100%;
        padding: 15px 10px;
    }

    .covid19-wrap .left-box {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .covid19-wrap .right-box {
        margin-left: 0;
    }

    .covid19-wrap .right-box p {
        margin-top: 10px;
        padding: 5px;
        font-size: 1.35rem;
    }

    .covid19-wrap h4 {
        margin-bottom: 5px;
        padding-left: 20px;
        font-size: 1.6rem;
        line-height: 1.2;
    }

    .covid19-wrap ul li {
        padding: 7px 0 7px 20px;
        font-size: 1.5rem;
        font-weight: 600;
        line-height: 1.2;
        border-bottom: 1px dashed #dddddd;
    }

    /*
 	    当てはまる症状をチェック！/TOP＋固定ページ
    ----------------------------------------*/

    /*------ 症状リスト -------*/

    .trouble-wrap {
        padding: 25px 30px;
    }

    .trouble-wrap ul {
        width: 100%;
        margin-left: 0;
    }

    .trouble-img {
        display: none;
    }

    /* チェックリスト数が5個以下の場合 */

    .trouble-wrap.list5 {
        min-height: auto;
    }

    .trouble-wrap.list5 ul {
        position: initial;
        top: 0;
        -webkit-transform: none;
        transform: none;
    }

    /*
 	    症状解説/固定ページのみ
    ------------------------------------*/

    .condition-wrap .condition-detail {
        display: flex;
        flex-direction: column;
    }

    .condition-wrap .condition-detail .order1 {
        order: 1;
    }

    .condition-wrap .condition-detail .order2 {
        order: 2;
    }

    .condition-wrap .condition-detail .order3 {
        order: 3;
    }

    .condition-wrap .condition-detail .order4 {
        order: 4;
    }

    .condition-wrap .condition-detail .order5 {
        order: 5;
    }

    .condition-wrap .condition-detail .mt20 {
        margin: 20px 0 0 0;
    }

    .condition-wrap .thumb {
        float: none;
        width: 100%;
        margin: 0 0 20px 0;
        padding-top: 0;
    }

    .condition-wrap .thumb.img-left {
        float: none;
        margin-right: 0;
    }

    .condition-wrap .thumb.img-right {
        float: none;
        margin-left: 0;
    }

    .condition-wrap .thumb.full-width img {
        width: 100%;
    }

    /*------ 動画あり -------*/


    .condition-wrap .movie-box {
        float: none;
        width: 100%;
        margin: 0 0 20px 0;
        padding-top: 0;
    }

    /*
 	    各界より推薦者の声
    ------------------------------------*/

    /*------ 2カラム -------*/

    .recommend-wrap .column2-wrap {
        display: inline-block;
    }

    .recommend-wrap .column2-wrap > div {
        width: 100%;
    }

    .recommend-wrap .column2-wrap .recommend02 {
        margin: 0 0 50px 0;
    }

    .recommend-wrap > div .text p:last-child {
        font-size: 1.4rem;
    }

    /*
 	    院長挨拶
    ------------------------------------*/

    #entrust .column2-wrap div {
        width: 100%;
    }

    #entrust .column2-wrap .left-box {
        margin: 0 0 20px 0;
    }

    #entrust .column2-wrap .left-box img {
        width: 100%;
        height: 550px;
        object-fit: cover;
        object-position: left top;
    }

    /*
 	    お問い合わせ/Contact Form 7
    ------------------------------------*/

    .wpcf7 .form-wrap div.form-row {
        display: block;
    }

    .wpcf7 .form-wrap p.form-label {
        width: 100%;
        padding: 1.5em 1em 0;
    }

    .wpcf7 .form-wrap p.form-body {
        width: 100%;
        padding: 1em 1em 1.5em;
    }
}

@media screen and (max-width: 767px) {

    /*
 	    General
    ------------------------------------*/
    body {
        padding-bottom: 99px;
    }

    /*--------------------------------
        スマホ表示
    --------------------------------*/

    .tablet-sp,
    .sp {
        display: inline-block !important;
    }

    .pc,
    .pc-tablet,
    .tablet,
    .sp-small {
        display: none !important;
    }

    /*
 	    共通パーツ
    ------------------------------------*/

    h2 {
        margin: 0 auto 25px;
        font-size: 3rem;
    }

    p.sub-title {
        font-size: 2rem;
    }

    /*
 	    Header
    ------------------------------------*/

    /*------ ロゴ -------*/

    #logo {
        width: 95%;
        max-width: 400px;
        height: auto;
    }

    /*
 	    Contents
    ------------------------------------*/

    .section-wrap {
        padding: 30px 0;
    }

    /*
 	    メインビジュアル
    ------------------------------------*/

    .main-visual-wrap {
        height: auto;
        padding-top: 70%;
    }

    /*
 	    タブレット＋スマホ追従ナビ
    ------------------------------------*/

    #tablet-sp-nav div {
        padding: 5px 0;
    }

    #tablet-sp-nav div p {
        font-size: 1.4rem;
    }

    #tablet-sp-nav ul li a {
        font-size: 1.8rem;
    }

    #tablet-sp-nav ul li p i {
        font-size: 2.5rem;
        margin: 0 10px 5px 0;
    }

    #tablet-sp-nav ul li a p:nth-child(2) {
        font-size: 1.6rem;
    }

    /*
 	    初回お試し体験＋院情報(マップ＋受付時間)
    -------------------------------------*/

    .offer-info.section-wrap {
        padding: 15px 0;
    }

    .offer-info h2 {
        font-size: 2.7rem;
        margin-bottom: 15px;
    }

    .offer-nav-wrap {
        margin: 0;
    }

    /*------ 初回お試し体験 -------*/

    .offer-nav-wrap h3 {
        font-size: 2rem;
    }

    .campaign-box {
        padding: 20px;
    }

    .campaign-box .campaign-img {
        width: 100%;
        margin-right: 0;
    }

    .campaign-box .staff-img {
        display: none;
    }

    .blue-arrow {
        margin: 5px auto;
        border-width: 60px 100px 0 100px;
    }

    /*------ お問い合わせボタン -------*/

    .offer-nav-wrap p.info-box {
        margin-top: 0;
        border-radius: 0 0 5px 5px;
    }

    .offer-nav-wrap h4 {
        font-size: 3rem;
        margin-bottom: 0;
    }

    .offer-nav-wrap nav ul li {
        width: 100%
    }

    .offer-nav-wrap nav ul li a {
        padding: 16px 20px 20px;
    }

    .offer-nav-wrap nav ul li a div i {
        display: inline-block;
        width: auto;
        margin-right: 15px;
        font-size: 5.5rem;
    }

    .offer-nav-wrap nav ul li a div p {
        font-size: 2.3rem;
    }

    .offer-nav-wrap nav ul li a:before {
        font-size: 2.5rem;
    }

    /*------ アクセス情報＋受付時間 -------*/

    .info-wrap {
        display: inherit;
    }

    .info-wrap > div {
        width: 100%;
    }

    .info-wrap > div h3 {
        padding: 0 0 0 30px;
        margin-bottom: 5px;
    }

    .info-wrap > div .thumb {
        margin-bottom: 5px;
    }

    .info-wrap .hours-box .thumb + p {
        margin-top: 10px;
    }

    .info-wrap .map-box {
        margin-right: 0;
        margin-bottom: 5px;
    }

    .info-wrap > div p,
    .info-wrap > div p span {
        font-size: 1.6rem;
    }

    .info-wrap > div p,
    .info-wrap > div p span {
        margin-bottom: 0px;
    }

    /*
 	    患者様の喜びの声
    ------------------------------------*/

    #voice h2 {
        font-size: 3.2rem;
    }

    .voice-wrap ul li {
        padding: 20px;
    }

    .voice-wrap ul li.customer-movie .customer-title {
        padding-bottom: 15px;
    }

    .voice-wrap > p {
        text-align: center;
        font-size: 1.5rem;
    }

    /*
 	    院長メッセージ＋プロフィール
    ------------------------------------*/

    #director h2 {
        font-size: 2.8rem;
    }

    #director .column2-wrap .text h3 {
        padding: 15px 10px 15px 15px;
        margin: 20px auto;
        font-size: 1.85rem;
    }

    #director .column2-wrap .text h3:before {
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
        border-radius: 3px 0 0 3px;
    }

    /*
 	    5つの特徴
    ------------------------------------*/

    #reasons h2 {
        font-size: 4.3rem;
    }

    .reasons-wrap h3 {
        margin-bottom: 20px;
        font-size: 1.8rem;
    }

    .reasons01,
    .reasons02 {
        margin-bottom: 20px;
    }

    .reasons04 {
        margin-top: 20px;
    }

    /*------ プロフェッショナルに -------*/

    .reasons01 div {
        width: 100%;
        margin-bottom: 20px;
    }

    .reasons01 div p {
        font-size: 1.6rem;
    }

    .reasons01 .left-box {
        margin-right: 0;
    }

    /*------ コロナウィルス感染症対策 -------*/

    .reasons05 {
        margin-top: 20px;
    }

    /*
 	    当てはまる症状をチェック！/TOP＋固定ページ
    ----------------------------------------*/

    #trouble p.sub-title {
        font-size: 2.5rem;
    }

    #trouble h2 {
        font-size: 2.5rem;
        margin-bottom: 5px;
    }

    .trouble-wrap {
        padding: 20px;
    }

    .trouble-wrap ul li {
        padding: 15px 0;
        font-size: 1.8rem;
        color: #1F1F1F;
    }

    .trouble-wrap ul li:before {
        width: 20px;
        height: 20px;
        margin-top: 2px;
    }

    .trouble-wrap ul li p {
        padding-left: 27px;
    }

    /*
 	    症状解説/固定ページのみ
    ------------------------------------*/

    #condition .condition-box h2 {
        padding: 15px 10px 15px 15px;
        margin: 20px auto;
        font-size: 1.85rem;
    }

    #condition .condition-box:first-child h2 {
        font-size: 2.55rem;
    }

    #condition h2:before {
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
        border-radius: 3px 0 0 3px;
    }

    .condition-wrap .movie-wrap h3 {
        font-size: 1.85rem;
    }

    /*
 	    初回施術の流れ
    ------------------------------------*/

    #point {}

    #point h2 {
        font-size: 2.9rem;
    }

    .point-wrap ul li > div {
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }

    .point-wrap ul li .thumb {
        margin-right: 0;
    }

    .point-wrap ul li .thumb img {
        border-radius: 5px 5px 0 0;
    }

    .point-wrap ul li .thumb p {
        font-size: 1.8rem;
    }

    .point-wrap ul li .text h3 {
        margin-bottom: 20px;
        padding: 10px 20px;
        font-size: 1.8rem;
        color: #fff;
        border-radius: 0 0 5px 5px;
    }

    /*
 	    各界より推薦者の声
    ------------------------------------*/

    #recommend h2 {
        font-size: 3.7rem;
    }

    .recommend-wrap > p {
        text-align: center;
        font-size: 1.5rem;
    }

    .recommend-wrap .recommend01,
    .recommend-wrap .recommend02,
    .recommend-wrap .recommend03 {
        padding: 20px;
    }

    .recommend-wrap > div h3 {
        font-size: 2.2rem;
    }

    .recommend-wrap > div .text h4 {
        font-size: 1.7rem;
    }

    .recommend-wrap .column2-wrap > div {
        padding: 20px;
    }

    .recommend01 {
        margin-bottom: 20px;
    }

    .recommend-wrap .column2-wrap .recommend02 {
        margin: 0 0 20px 0;
    }

    .recommend-wrap .column2-wrap > div .thumb {
        width: 42%;
    }

    .recommend01 .recommend-balloon-top {
        text-align: left;
        padding: 10px;
        font-size: 1.6rem;
    }

    .recommend-wrap .column2-wrap > div .recommend-balloon {
        width: 53%;
        margin: 0 0 0 5%;
        padding: 10px;
        font-size: 1.6rem;
    }

    /*
 	    院長挨拶
    ------------------------------------*/

    #entrust h2 {
        font-size: 2rem;
    }

    #entrust .column2-wrap .left-box img {
        height: 260px;
    }

    /*
 	    お問い合わせ/Contact Form 7
    ------------------------------------*/

    #contact h2 {
        font-size: 3.3rem;
    }

    .form-wrap {
        margin: 30px auto 0;
    }

    .wpcf7 form .wpcf7-response-output {
        margin: 0em 1em 1.5em !important;
    }

    .wpcf7 .form-wrap div.form-row.row-privacy,
    .wpcf7 .form-wrap div.form-row.row-submit {
        margin-top: 0;
    }
}


@media screen and (max-width: 320px) {


    h2 {
        font-size: 2.6rem;
    }

    #tablet-sp-nav div p {
        font-size: 1.2rem;
    }

    p.sub-title {
        font-size: 1.8rem;
    }

    #shop-info-box p:first-child,
    #shop-info-box p:last-child {
        font-size: 1.3rem;
    }

    .offer-info h2 {
        font-size: 2.3rem;
    }

    .offer-nav-wrap h3 {
        font-size: 1.7rem;
    }


    .offer-nav-wrap nav ul li a div i {
        margin-right: 10px;
        font-size: 5rem;
    }

    .offer-nav-wrap nav ul li a div p {
        font-size: 2rem;
    }

    .covid19-wrap h3 {
        font-size: 2rem;
    }

    #director .column2-wrap .text h3 {
        font-size: 1.8rem;
    }

    #reasons h2 {
        font-size: 3.6rem;
    }

    .reasons-wrap .reasons01 h3,
    .reasons-wrap .reasons03 h3 {
        font-size: 2.1rem;
    }

    .reasons-wrap .reasons02 h3 {
        font-size: 1.7rem;
    }

    #voice h2 {
        font-size: 2.7rem;
    }

    .voice-wrap > p {
        font-size: 1.3rem;
    }

    #trouble p.sub-title {
        font-size: 2.2rem;
    }

    #trouble h2 {
        font-size: 2.1rem;
    }

    #condition .condition-box:first-child h2 {
        font-size: 2.2rem;
    }

    #point h2 {
        font-size: 2.5rem;
    }

    .point-wrap ul li .text h3 {
        font-size: 1.6rem;
    }

    #recommend h2 {
        font-size: 3.2rem;
    }

    .recommend-wrap > div h3 {
        font-size: 1.8rem;
    }

    .recommend-wrap > div .text h4 {
        font-size: 1.44rem;
    }

    .recommend01 .recommend-balloon-top {
        font-size: 1.4rem;
    }

    .recommend-wrap .column2-wrap > div .recommend-balloon {
        font-size: 1.3rem;
    }

    .recommend-wrap > p {
        font-size: 1.3rem;
    }

    #director h2 {
        font-size: 2.4rem;
    }

    #entrust h2 {
        font-size: 1.8rem;
    }

    #contact h2 {
        font-size: 2.8rem;
    }

    .wpcf7 .form-wrap input[type="submit"] {
        font-size: 2rem;
    }

    .wpcf7 form .wpcf7-response-output {
        font-size: 1.5rem;
    }

    footer p {
        text-align: center;
        color: #fff;
        font-size: 1.1rem;
    }
}