@charset "UTF-8";


/* desktop first */

@media (max-width: 480px) {/* 480px以下に対して */
    /* all */
    .main-title {
        padding: 60px 0;
    }
    .main-title h2 {
        font-size: 1.5rem;/* 24px */
        margin-bottom: 22px;
    }

    .section-title {
        font-size: 1.25rem;/* 20px */
    }

    .h2-title-a {
        width: 88%;/* 左右各6％ */
        height: 42px;
        font-size: 1.25rem;/* 20px */
    }
    .h2-title-a .title-span {
        font-size: 0.875rem;/* 14px */
        margin-left: 20px;
        padding-bottom: 9px;
    }
    /* //all */



    /* space */
    .space-20 {
        display: none;
    }
    .space-40 {
        display: none;
    }
    .space-120 {
        display: none;
    }
    .space-150 {
        display: none;
    }
    .space-180 {
        display: none;
    }
    .space-200 {
        display: none;
    }

    .space-resp-30 {
        width: auto;
        height: 30px;
    }
    .space-resp-60 {
        width: auto;
        height: 60px;
    }
    .space-resp-110 {
        width: auto;
        height: 110px;
    }
    .space-resp-120 {
        width: auto;
        height: 125px;
    }
    /* //space */



    /* header */
    header {/* 固定解除 */
        position: static;/* ??? z-indexが効かない */
    }

    .header-left {/* 非表示 */
        display: none;
    }
    .header-main h1, .header-main p, .tel {
        display: none;
    }

    .header-main {/* 微調整 */
        height: 114px;
    }
    .header-main-resp img {
        height: 76px;
    }
    .header-right-wrap {
        justify-content: space-between;
        padding: 0 5%;
    }

    .desktop-navi {/* 非表示 */
        display: none;
    }


    /* hamburger menu */
    .drawer-hidden {
        display: none;/* チェックボックスを非表示 */
    }

    /* menu area */
    .drawer-open {
        width: 60px;
        height: 60px;

        display: flex;
        align-items: center;
        justify-content: center;

        position: relative;
        z-index: 100;

        cursor: pointer;
    }
    /* //menu area */


    /* menu icon */
    .drawer-open span, 
    .drawer-open span:before, 
    .drawer-open span:after {
        content: '';
        display: block;
        width: 25px;
        height: 2px;
        border-radius: 2px;
        background: #666;
        position: absolute;
        transition: .4s;
    }

    /* 1st bar */
    .drawer-open span:before {
        bottom: 8px;
    }
    /* クリックで回転 */
    #drawer-input:checked ~ .drawer-open span::before {
        bottom: 0;
        transform: rotate(-45deg);
        height: 1px;
        background: #fff;
    }
    /* //1st bar */

    /* 2nd bar */
    /* クリックで透明 */
    #drawer-input:checked ~ .drawer-open span {
        background: rgba(255, 255, 255, 0);
    }
    /* //2nd bar */

    /* 3rd bar */
    .drawer-open span:after {
        top: 8px;
    }
    /* クリックで回転 */
    #drawer-input:checked ~ .drawer-open span::after {
        top: 0;
        transform: rotate(45deg);
        height: 1px;
        background: #fff;
    }
    /* //3rd bar */
    /* //menu icon */


    /* slide menu */
    /* クリックでスライドイン */
    #drawer-input:checked ~ .mobile-navi {
        left: 0;
    }

    .mobile-navi {
        width: 100%;
        height: 100%;
        /* background: rgba(0, 0, 0, .85); */
        background: #444;

        position: fixed;
        top: 0%;
        left: 100%;
        z-index: 99;

        text-align: center;
        padding-top: 55px;

        transition: .4s;
    }

    nav {
        padding: 0;
    }

    nav ul {
        display: block;
    }

    nav li.has-child ul,
    nav li.has-child ul ul {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        visibility: visible; /* jsで制御するため一旦表示 */
        opacity: 1; /* jsで制御するため一旦表示 */
        display: none; /* jsのslidetoggleで表示させるため非表示 */
        transition: none; /* jsで制御するためcssのアニメーションをoff */
    }

    nav ul li a {
        display: block;
        font-size: 1rem;/* 16px */
        color: #ddd;
        padding: 20px 35px;
        border-bottom: 1px solid #aaa;
    }
    /* nav ul li:last-child a {
        border-bottom: none
    } */

    nav ul li li a {/* 2階層目 */
        font-size: .925rem;/* 14.8px */
        color: #ccc;
        padding: 20px 35px;
        background: rgba(255, 255, 255, .15);
    }
    /* //slide menu */
    /* //hamburger menu */
    /* //header */



    /* footer */
    footer {
        padding-top: 30px;
    }
    .footer-wrap {
        width: 100%;
        padding-left: 10%;
        padding-right: 5%;
        flex-wrap: wrap;
        margin-bottom: 30px;
    }
    .footer-navi {
        font-size: 0.875rem;
        font-weight: bolder;
        justify-content: flex-start;
        margin-bottom: 40px;
    }
    .footer-navi-menu {
        width: 33.33%;
        margin-bottom: 24px;
    }




    .footer-navi-menu:nth-child(2),
    .footer-navi-menu:nth-child(5) {
        padding-left: 14px;
    }



    .footer-navi-child {
        font-weight: normal;
        padding-top: 0;
    }

    .footer-info-left-top h3 {
        display: inline;
    }
    

    .footer-info-left-top img {
        display: none;
    }

    .footer-info-left-bottom {
        margin-bottom: 10px;
    }

    .footer-info-right iframe {
        width: 100%;
        height: 80%;
    }
    /* //footer */



    /* slider */
    .slider-item {/* 画面いっぱい */
        width: 100vw;
        height: 50vw;

        margin-bottom: 20px;
    }

    .slick-prev, .slick-next {/* 非表示 */
        border: 0px;
    }

    .slick-dots li {
        margin: 0 12px;
    }
    /* //slider */


    /* about us */
    .about-wrap {
        padding: 16% 12%;
    }
    .about-right {
        width: 100%;
        height: auto;
    }
    .about-right h2 {
        font-size: 1.5rem;/* 24px */
    }
    .title-span::before {
        /* width: 100%;
        height: 100%; */
        content: "";
        display: block;
        margin-bottom: 10px;
    }
    .title-span {
        margin-left: 0;
    }
    .about-right p {
        font-size: 1rem;
        line-height: 1.875rem;/* 30px */
    }
    /* //about us */


    /* clinic info */
    .clinic-table {
        padding: 16% 0;
    }
    .clinic-info-wrap {
        width: 76%;
        display: block;
        margin-top: 0;
        margin-bottom: 60px;
    }
    .clinic-info-left {
        width: 100%;
        height: auto;
        margin: 0 0 15px;
    }
    .clinic-info-left img {
        width: 100%;
        height: auto;
        margin: 0;
    }
    .clinic-info-h3 {
        font-size: 1.25rem;
        margin: 0 0 10px;
    }
    .clinic-info-notes {
        margin-top: 10px;
    }
    /* //clinic info */



    /* clinic */
    .clinic-main {
        display: block;
        width: 88%;
        margin: auto;
    }

    .clinic-gallery {
        width: 100%;
        margin: 0 0 40px;
    }

    .clinic-text {
        width: 90%;
        margin: auto;
    }
    .clinic-text h3 {
        text-align: center;
        margin-bottom: 15px;
    }
    .clinic-text iframe {
        aspect-ratio: 4 / 3;
    }

    .schedule-scroll {
        white-space: nowrap;
        overflow: scroll;
    }

    .clinic-table-b {
        padding: 16% 0 32%;
    }
    /* //clinic */



    /* menu */
    .main-wrap {
        width: 88%;
    }

    .section-title-menu {
        padding-left: 1.25rem;/* 20px */
    }

    .menu-category {
        padding: 40px 0 30px;
    }

    .menu-table {
        width: 92%;
        display: block;
        padding: 10% 5%;
    }

    .menu-list-img {
        width: 100%;
        height: 75%;
        margin: 0 0 10px;
    }
    /* //menu */



    /* price */
    .price-frame {
        padding-bottom: 40px;
    }

    .main-title-price {
        white-space: nowrap;
    }

    /* health */
    .section-title-price {
        margin-bottom: 20px;
        padding-left: 1.25rem;
    }

    .price-table {
        width: 92%;
    }
    .price-table caption {
        text-align: center;
        line-height: 1.2;
        margin-bottom: 8px;
    }
    .price-table thead {
        font-size: 0.875rem;/* 14px */
    }
    .price-table thead th:first-child {/* info */
        writing-mode: vertical-rl;
        /* text-orientation: upright; */
        letter-spacing: .175rem;
        padding: 2px 4px 0;
    }
    .price-table thead th:nth-child(n+4) {
        letter-spacing: normal;
        line-height: 1.2;
        padding: 8px 4px;
    }


    .price-category th {
        padding: 70px 0 20px;
    }

    .price-list td {
        font-size: .9375rem;/* 15px */
    }
    .price-list td:nth-of-type(2) {
        line-height: 1.25;
        padding-left: .5rem;
    }
    /* //health */


    /* beauty */
    .price-frame-beauty {
        padding-bottom: 40px;
    }
    .section-title-price-beauty {
        margin-bottom: 20px;
    }
    /* //beauty */
    /* //price */



    /* company */
    .company-table {
        width: 88%;
    }
    .company-table th,
    .company-table td {
        display: block;
    }
    .company-table th {
        padding: 8px;
        margin-bottom: 2px;
    }
    .company-table td {
        margin: 0 auto;
        padding-left: 0;
        text-align: center;
    }


    /* recruit */
    .recruit-copy-main {
        font-size: 1.625rem;/* 26px */
        line-height: 1.25;
    }
    .recruit-copy-text {
        width: 90%;
        margin: 0 auto;
    }

    .section-title-recruit {
        justify-content: left;
        white-space: nowrap;
        padding-left: 1.25rem;
        margin-bottom: 45px;
    }
    .recruit-table-scroll {
        white-space: nowrap;
        overflow: scroll;

        padding: 0 4%;
    }
    .recruit-table {
        width: auto;
        margin-bottom: 40px;
    }
    .recruit-table td {
        padding-left: 15px;
    }
    /* //recruit */
    /* //company */



    /* privacypolicy */
    .pp-wrap {
        width: 90%;
        margin: 0 auto;
    }
    /* //privacypolicy */
}




@media (min-width: 481px) {/* 480px以上に対して */
    /* header */
    .header-main-resp img {
        display: none;
    }

    .hbg-menu {
        display: none;
    }
    /* //header */

    /* about us */
    .sp {
        display: none;
    }
    /* //about us */
}




@media (max-width: 1140px) {/* 1140px以下に対して */
    /* header */
    .navi-menu {
        padding: 0 15px;
    }
    /* //header */
}



@media (min-width: 1141px) {/* 1140px以上に対して */
    /* header */
    .header-main-sp {
        display: none;
    }
    /* //header */
}