/* SPのデザイン */
@media (max-width: 767px) {

    /* オーバーレイ */
    .top-overlay {
        height: 100vh;
        background-color: #fff;
        z-index: 9999;
        width: 100%;
        top: 0;
        animation-name:hide;
        animation-delay: 4s;
        animation-duration:1s;
        animation-fill-mode:forwards;
    }

    .top-overlay--main {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .top-overlay--main h2 {
        font-size: 7rem;
        opacity: 0;
        line-height: 17rem;
        writing-mode: vertical-lr;
        color: var(--main-color);
    }

    .top-overlay--main h2.o1 {
        animation-name:show;
        animation-delay: 1.2s;
        animation-duration:1s;
        animation-fill-mode:forwards;
    }

    .top-overlay--main h2.o2 {
        animation-name:show;
        animation-delay: 2s;
        animation-duration:1s;
        animation-fill-mode:forwards;
    }

    .top-overlay--main h2.o3 {
        animation-name:show;
        animation-delay: 2.8s;
        animation-duration:1s;
        animation-fill-mode:forwards;
    }

    .top-overlay--bg1 {
        background-image: url(../img/bg1.png);
        background-size: cover;
        width: 160rem;
        height: 160rem;
        top: -25rem;
        left: -3rem;
        opacity: 0;
        animation-name:show;
        animation-delay: 1s;
        animation-duration:2s;
        animation-fill-mode:forwards;
    }

    .top-overlay--bg2 {
        background-image: url(../img/bg2.png);
        background-size: cover;
        width: 175rem;
        height: 175rem;
        bottom: -5rem;
        right: 5rem;
        opacity: 0;
        animation-name:show;
        animation-delay: 1.5s;
        animation-duration:2s;
        animation-fill-mode:forwards;
    }

    @keyframes show{
        from {
            opacity: 0;
        }
    
        to {
            opacity: 1;
        }
    }

    @keyframes hide{
        from {
            opacity: 1;
        }
    
        to {
            opacity: 0;
            z-index: -99;
        }
    }

    .pc {
        display: none!important;
    }

    .logo-area {
        width: 62%;
    }

    .logo-area a:first-child{
        width: 25%;
    }

    .logo-area a h1{
        font-size: 4.5rem;
        padding-left: 2rem;
    }

    .header-main {
        padding: 4rem;
        background-color: #fff;
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2);
    }

    .header-main .header-icon {
        width: 6rem;
        height: 3rem;
        font-size: 7rem;
        color: #333;
    }

    .btn1{
        position: relative;
        background:#ffffff00;
        cursor: pointer;
        width: 30px;
        height:15px;
        border: none;
        padding: 0;
    }
  
    .btn1 span{
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 10%;
        height: 2px;
        border-radius: 2px;
        width: 80%;
    }
  
    .btn1 span:nth-of-type(1) {
        top:0px; 
        background: var(--main-color);
    }

    .btn1 span:nth-of-type(2) {
        top:6px;
        background: var(--main-color);
    }

    .btn1 span:nth-of-type(3) {
        top:12px;
        background: var(--main-color);
    }

    .quit{
        height: 14rem;
        background:#ffffff00;
        border: none;
        border-bottom: solid 1px #ffffff45;
    }

    .quit img {
        width: 4rem;
        margin-right: 4rem;
    }

    /* .menu-mainmenu-container{
        margin-top: 10rem;
    } */

    header .menu-col {
        position: fixed;
        transition: .5s;
        transform: translateX(1000px);
        height: 100vh;
        overflow: auto;
        top: 0;
        width: 100%;
        background-color: var(--main-color);
        z-index: 2000;
    }

    header .menu-col.active {
        transform: translateX(0);
    }

    .menu-mainmenu-container #Main {
        padding: 0;
    }

    .menu-mainmenu-container #Main li{
        padding: 3.3rem 5rem;
        border-bottom: solid 1px #ffffff45;
    }

    .menu-mainmenu-container #Main li a {
        font-size: 3.3rem;
        color: #fff!important;
    }

    .menu-col .tel {
        padding: 3rem;
        border: solid 1px #ffffff45;
        width: 90%;
        margin: 10rem auto;
    }

    .menu-col .tel p{
        font-size: 4.8rem;
        color: #fff;
    }

    .menu-col .holiday{
        font-size: 3.3rem;
        color: #fff;
        line-height: 7rem;
    }

    .menu-col .holiday .small{
        font-size: 3rem;
    }

    /* top-mv */
    .top-mv--logo_area {
        width: 15rem;
        top: 4rem;
        left: 6rem;
    }

    .top-mv--img_area {
        width: 100%;
        height: 90rem;
        margin: 20rem 0 0;
        overflow: hidden;
    }

    .top-mv--img_area .top-mv--img {
        /* background-image: url(../img/top-mv.png); */
        background-image: url(../img/midoribashi-top-pc.jpg);
        background-size: cover;
        background-position: right;
        width: 100%;
        height: 100%;
    }

    .top-mv--title1 {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        width: 80%;
        background-color: #0000004f;
        padding: 1.75rem 0;
    }

    .top-mv--title1 h2 {
        letter-spacing: 0.5rem;
        color: #fff;
        text-shadow: 1px 1px 1px #a3a3a3;
        font-size: 6rem;
        line-height: 8rem;
    }

    .top-mv--title2 {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        width: 65%;
        background-color: #ffffffa3;
        padding: 4.5rem 0;
    }

    .top-mv--title2 h2 {
        letter-spacing: 0.5rem;
        font-size: 6rem;
        color: #333;
        text-shadow: 1px 1px 1px #858585;
    }

    .top-mv--title1 h2:last-child{
        margin-top: 4rem!important;
    }


    /* top-mv end */

    /* top-feature */
    .content1--box {
        padding: 5rem 0;
    }

    .content1--box .content1--title {
        margin-bottom: 5rem;
    }

    .content1--box .content1--title h2{
        font-size: 5.2rem;
        letter-spacing: 0.25rem;
        color: var(--main-color);
    }

    .content1--box .content1--desc{
        width: 90%;
        margin: auto;
    }

    .content1--desc h3 {
        font-size: 4.5rem;
        margin: 7rem 0 2.5rem !important;
    }

    .content1--box .content1--desc h4,
    .content1--box .content1--desc h5 {
        margin-top: 3.5rem !important;
        margin-bottom: 1.5rem !important;
        font-size: 4rem;
    }

    .content1--box .content1--desc p{
        font-size: 3.3rem;
        line-height: 5.5rem;
    }

    .content1--list{
        padding: 0 5rem;
        background-color: #fafafa;
        border-radius: 4rem;
        width: 100%;
        margin: 5rem auto;
        border: solid 1px #ddd;
    }

    .content1--list-row {
        padding: 2rem 0;
        letter-spacing: 0.1rem;
    }

    .content1--list-row:not(:last-child){
        border-bottom: solid 1px #ddd;
    }

    .content1--list h3 .num{
        font-size: 4.5rem;
        margin-right: 3rem;
    }

    .content1--list h3{
        font-size: 3.5rem;
        margin-bottom: 2rem!important;
    }

    .content1--button_area {
        width: 52%;
        margin: 10rem auto;
    }

    .content1--button_area .content1--button {
        padding: 3.3rem 0;
        background-color: var(--main-color);
        border-radius: 8rem;
        font-size: 3.4rem;
        color: #fff;
        transition: .5s;
    }

    .content1--button_area .content1--button:hover{
        background-color: #27adbd;
    }

    /* top-feature end */

    /* top-visiting */
    .content2--content {
        padding: 5rem 0;
    }
    .content2--title h2 {
        font-size: 5.2rem;
        letter-spacing: 0.25rem;
        color: var(--main-color);
    }

    .content2--row {
        width: 90%;
        margin: 10rem auto 0;
    }

    .content2--img_box {
        /* background-image: url(../img/top-visiting.png); */
        /* background-image: url(../img/457627107.jpeg); */
        background-image: url(../img/img2/1196092825.png);
        background-size: cover;
        background-position: center;
        height: 60rem;
        border-radius: 2rem;
    }

    .content2--director p {
        font-size: 4rem!important;
    }

    .content2--desc{
        margin-top: 5rem;
    }

    .content2--desc h2{
        font-size: 4.5rem;
        letter-spacing: 0.25rem;
        margin: 4rem 0!important;
        color: var(--main-color);
    }

    .content2--desc p{
        font-size: 3.3rem;
        line-height: 5.5rem;
        letter-spacing: 0.1rem;
    }

    .content2--link{
        margin-top: 5.5rem;
    }

    .content2--link a {
        font-size: 3.75rem;
        letter-spacing: 0.1rem;
        margin-left: 50rem;
        color: var(--main-color)!important;
    }

    .content2--link a i{
        margin-left: 5rem;
        font-size: 3.3rem;
        transition: .5s;
    }

    .content2--link a:hover i{
        margin-left: 6rem;
    }
    /* top-visiting end */

    /* top-company */
    .content3--row {
        width: 90%;
        margin: 10rem auto 0;
    }

    .content3--img_box {
        /* background-image: url(../img/top-company.png); */
        /* background-image: url(../img/962889182.jpeg); */
        background-image: url(../img/img2/1074965656.png);
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 60rem;
        border-radius: 2rem;
    }

    .content3--desc{
        margin-top: 5rem;
    }

    .content3--desc h2{
        font-size: 4.5rem;
        letter-spacing: 0.25rem;
        margin-bottom: 2rem!important;
        color: var(--main-color);
    }

    .content3--desc p{
        font-size: 3.3rem;
        line-height: 5.5rem;
        letter-spacing: 0.1rem;
    }

    .content3--link{
        margin-top: 5.5rem;
    }

    .content3--link a {
        font-size: 3.75rem;
        letter-spacing: 0.1rem;
        margin-left: 53rem;
        color: var(--main-color)!important;
    }

    .content3--link a i{
        margin-left: 5rem;
        font-size: 3.3rem;
        transition: .5s;
    }

    .content3--link a:hover i{
        margin-left: 6.5rem;
    }
    /* top-company end */

    /* top-news */
    .top-news--box {
        width: 90%;
        margin: 15rem auto;
    }

    .top-news--title {
        margin-bottom: 10rem;
    }

    .top-news--title h2{
        font-size: 4.5rem;
        letter-spacing: 0.25rem;
        color: var(--main-color);
    }

    .top-news-main {
        background-color: #fafafa;
        padding: 4.5rem 3rem;
        border-radius: 1rem;
        border: solid 1px #ddd;
    }

    .newscol:not(:last-child){
        border-bottom: solid 1px #ddd;
        padding-bottom: 3.3rem;
    }

    .newscol:not(:first-child){
        padding: 3.3rem 0;
    }

    .newscol:last-child{
        padding-bottom: 0;
    }

    .newscol .day {
        margin-right: 5rem;
    }

    .newscol .day p {
        letter-spacing: 0.05rem;
        font-size: 3rem;
        color: #7f7f7f;
    }

    .newscol .day p i {
        font-size: 3rem;
        color: #7f7f7f;
        margin-right: 1.5rem;
    }

    .newscol .news-title h3{
        font-size: 3.3rem;
    }

    .more-btn {
        width: 52%;
        margin: 15rem auto;
    }

    .more-btn p{
        padding: 3.3rem 0;
        background-color: var(--main-color);
        border-radius: 8rem;
        font-size: 3.4rem;
        color: #fff;
        transition: .5s;
    }

    .more-btn:hover p{
        background-color: #27adbd;
    }
    /* top-news end */

    /* top-content-view */
    .top-content_view--row {
        width: 90%;
        margin: 0 auto 15rem;
    }

    .top-content_view--col {
        width: 100%;
        border-right: solid 1px #fff;
        margin-bottom: 5rem;
    }

    .top-content_view--visiting_img {
        height: 45rem;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        transition: .5s;
        cursor: pointer;
    }

    .top-content_view--visiting_img.img1 {
        background-image: url(../img/visiting.jpeg);

    }

    .top-content_view--visiting_img.img2 {
        background-image: url(../img/staff.jpeg);

    }

    .top-content_view--visiting_img.img3 {
        background-image: url(../img/clinic.jpeg);

    }

    .top-content_view--visiting_img:hover {
        scale: 1.1;
    }

    .top-content_view--col p {
        font-size: 5rem;
        padding: 3rem;
        background-color: #3fb3c1;
        border-top: solid 1px #fff;
        color: #fff;
        transition: .5s;
    }

    .top-content_view--col p:hover {
        background-color: var(--main-color);
    }

    /* top-content-view end */

    /* staff */
    .page-staff {
        margin-top: 20rem;
    }
    /* staff end */

    /* visiting */
    main.page-visiting {
        margin-top: 20rem;
    }
    .page-mv--img_box.visiting-mv {
        background-image: url(../img/midoribashi-top-pc.jpg);
    }
    .content2--img_box.visiting {
        background-image: url(../img/img2/853723102.png);
    }
    .content3--img_box.visiting {
        background-image: url(../img/img2/951108535.png);
    }
    /* visiting end */

    /* feature */
    main.page-feature {
        margin-top: 20rem;
    }

    .page-mv--img_box {
        background-image: url(../img/294865929.jpeg);
        background-size: cover;
        background-position: right;
        width: 100%;
        height: 90rem;
    }
    .content2--img_box.feature {
        background-image: url(../img/img2/933209577.png);
        width: 100%;
    }

    .content3--img_box.feature {
        background-image: url(../img/img2/668493346.png);
    }

    .page-mv--title {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: #ffffff47;
        padding: 2rem;
    }

    .page-mv--title h2{
        font-size: 4.5rem;
        letter-spacing: 0.05rem;
    }

    .page-feature .content1--box{
        padding: 10rem 0 5rem;
    }

    /* .page-feature .content2--row {
        margin: 5rem auto 0 10rem;
    } */

    .content4--box {
        width: 75%;
        margin: 10rem auto;
    }

    .content4--title {
        margin-bottom: 10rem;
    }

    .content4--title h2{
        font-size: 4.5rem;
        letter-spacing: 0.25rem;
        color: var(--main-color);
    }

    .content4--card_row {
        margin-bottom: 5rem;
    }

    .content4--card_col .card-title{
        margin-bottom: 5rem;
    }

    .content4--card_col .card-title h3 {
        font-size: 4.5rem;
        letter-spacing: 0.25rem;
    }

    .content4--card_col {
        width: 100%;
        margin-bottom: 15rem;
    }

    .page-feature .card {
        border-radius: 2rem;
        box-shadow: 2px 2px 3px #dedede;
    }

    .page-feature .card .card-body {
        padding: 5rem;
    }

    .page-feature .card .card-body p{
        font-size: 3.3rem;
        line-height: 5rem;
        letter-spacing: 0.1rem;
    }

    .content4--comment_row {
        margin: 4.5rem 0;
    }

    .content4--icon_box {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        width: 10rem;
        height: 10rem;
        margin-right: 5rem;
    }

    .content4--icon_box.box1 {
        background-image: url(../img/face4.png);
    }

    .content4--icon_box.box2 {
        background-image: url(../img/face1.png);
    }

    .content4--icon_box.box3 {
        background-image: url(../img/face2.png);
    }

    .content4--icon_box.box4 {
        background-image: url(../img/face3.png);
    }

    .content4--name_box h3{
        font-size: 4.5rem;
        letter-spacing: 0.25rem;
        margin-top: 0.5rem;
    }

    .content6--row {
        width: 90%;
        margin: 10rem auto 0;
    }

    .content6--img_box {
        background-image: url(../img/top-visiting.png);
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 60rem;
        border-radius: 2rem;
    }

    .content6--desc{
        width: 100%;
        margin-top: 5rem;
    }

    .content6--director p {
        font-size: 4rem!important;
    }

    .content6--desc h2{
        font-size: 4.5rem;
        letter-spacing: 0.25rem;
        margin-bottom: 2rem!important;
        color: var(--main-color);
    }

    .content6--desc p{
        font-size: 3.3rem;
        line-height: 5.5rem;
        letter-spacing: 0.1rem;
    }

    /* feature end */

    /* company */
    main.page-company {
        margin-top: 20rem;
    }
    .page-mv--img_box.company-mv {
        background-image: url(../img/midoribashi-top-pc.jpg);
    }

    .content2--img_box.company {
        background-image: url(../img/106605921.jpeg);
    }

    .content6--img_box.company {
        background-image: url(../img/1005437694.jpeg);
    }

    .page-company .content2--row {
        margin: auto;
    }

    .page-company .content2--title {
        margin-bottom: 7rem;
    }

    .page-company .content2--title h2{
        font-size: 4.5rem;
        letter-spacing: 0.25rem;
        color: var(--main-color);
    }

    .page-company .content2--director {
        margin-bottom: 4.5rem;
    }

    .page-company .content2--director h2{
        margin-bottom: 3rem!important;
    }

    .content5--box{
        width: 90%;
        margin: 7rem auto;
        background-color: #fafafa;
        border-radius: 2rem;
        padding: 5rem;
    }

    .content5--box h2{
        font-size: 4.5rem;
        letter-spacing: 0.25rem;
        margin: 5rem!important;
        color: var(--main-color);
    }

    .content5--box p{
        font-size: 3.3rem;
        line-height: 5.5rem;
        letter-spacing: 0.1rem;
        margin-bottom: 2rem !important;
    }

    .content6--director {
        margin-bottom: 4.5rem;
    }

    .content6--director h2{
        margin-bottom: 3rem!important;
    }

    .content7--box {
        width: 90%;
        margin: 5rem auto;
    }

    .content7--title {
        margin-bottom: 5rem;
    }

    .content7--title h2{
        font-size: 4.5rem;
        letter-spacing: 0.25rem;
        color: var(--main-color);
    }

    #tablepress-2 {
        margin: 5rem 0;
    }

    #tablepress-2 td{
        padding: 5rem 0!important;
    }

    .content7--col {
        border-radius: 2rem;
    }

    .content7--col iframe{
        border: 0;
        width: 100%;
        border-radius: 2rem;
        height: 70rem;
    }

    .content7--access_map {
        background-image: url(../img/access_sp.png);
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 71rem;
        border-radius: 2rem;
    }

    .content7--desc {
        margin: 3rem 0;
    }

    .content7--desc p{
        color: #333;
        font-size: 3.1rem;
        line-height: 5.5rem;
        letter-spacing: 0.05rem;
    }

    .content7--table {
        width: 100%;
        margin: 10rem auto;
    }

    .content7--table #tablepress-1 .column-1{
        width: 25%;
    }

    .content7--table #tablepress-1 td{
        padding: 3rem 0!important;
    }

    .content7--table p{
        font-size: 3.3rem;
    }

    .content7--table thead .row-1 th{
        background-color: #fff;
    }

    .content7--table th,
    .content7--table td {
        text-align: center!important;
        padding: 2rem 0!important;
        font-size: 3rem;
        letter-spacing: 0.1rem;
        color: #333 !important;
    }

    /* company end */

    /* news */
    main.page-news{
        margin-top: 20rem;
    }

    .page-mv--top_title {
        background-color: var(--main-color);
        padding: 5.5rem 0;
    }

    .page-mv--top_title h2{
        color: #fff;
        font-size: 5rem;
    }

    .page-mv--img_box.news-mv {
        background-image: url(../img/midoribashi-top-pc.jpg);
        background-position: right;
        height: 90rem;
    }

    .page-news .top-news--box {
        margin: auto;
        padding: 8rem 0;
    }

    .page-news .pagenavi{
        margin-top: 7rem;
        font-size: 3.3rem;
    }

    .page-news .pagenavi a{
        padding: 1rem 2.5rem;
        font-size: 3.3rem;
    }

    .page-news .pagenavi .now{
        color: #fff;
        padding: 1rem 2.5rem;
        font-size: 3.3rem;
        background-color: var(--main-color);
    }

    .news-detail-main .news-border  {
        border-bottom: solid 1px var(--main-color);
    }

    /* news end */

    /* news detail */
    .page_news_detail{
        margin-top: 20rem;
    }

    .news-detail-main {
        width: 90%;
        margin: 5rem auto;
    }

    .news-detail-main .news-title  {
        border-left: solid 3px var(--main-color);
        margin: 6rem 0 3rem;
        padding-left: 3rem;
    }

    .news-detail-main .news-title .news-detail-date {
        font-size: 3.3rem;
        color: #aaa;
    }

    .news-detail-main .news-title .news-detail-title h1{
        font-size: 4.5rem;
        letter-spacing: 0.1rem;
    }

    .news-detail-main .news-detail-content{
        margin: 6rem 0 3rem;
        font-size: 3.3rem;
        line-height: 6.5rem;
    }

    .news-detail-main .returnbtn {
        margin: 10rem 0;
    }

    .news-detail-main .returnbtn p{
        background-color: var(--main-color);
        color: #fff;
        border-radius: 6rem;
        padding: 3rem 10rem;
        font-size: 3.4rem;
        letter-spacing: 0.1rem;
        margin: 0rem 11.5rem !important;
        cursor: pointer;
        transition: .5s;
    }

    .news-detail-main .returnbtn:hover p{
        background-color: #fafafa;
    }

    .news-detail-main .returnbtn i{
        color: var(--main-color);
        font-size: 10rem;
        margin: 0.5rem 4rem 0;
    }
    /* news detail */

    /* 404 */
    .not_found {
        padding: 15rem 0;
    }

    .not_found h2 {
        font-size: 4.5rem;
        margin-bottom: 3rem!important;
    }

    .not_found p{
        font-size: 1.1rem;
        letter-spacing: 0.05rem;
        line-height: 4rem;
    }

    .not_found p a{
        text-decoration: underline!important;
    }
    /* 404 end */

    /* footer */
    footer {
        margin-bottom: 15rem;
    }

    .footer--zip {
        background-color: var(--main-color);
        padding: 10rem 0;
    }

    .footer--zip p {
        color: #fff;
        font-size: 3.2rem;
        line-height: 6rem;
        letter-spacing: 0.05rem;
    }

    .footer--zip p a{
        color: #fff!important;
    }

    footer .copyright {
        background-color: #fff;
        color: var(--main-color);
        padding: 2rem 0;
        font-size: 2.5rem;
        letter-spacing: 0.3rem;
    }

    .footer-kotei-area{
        position: fixed;
        bottom: 0;
        text-align: center;
        width: 100%;
        z-index: 1000;
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2);
    }
    
    .footer-kotei-area .ffl .t{
        width: 100%;
        background: #fff;
        height: 15rem;
        font-size: 3.3rem;
        color: #333;
        border-top: solid 1px var(--main-color);
    }
    
    .footer-kotei-area .ffl .f-tel i{
        font-size: 5rem;
        margin-right: 2rem;
    }
    
    .footer-kotei-area .ffl a{
        width: 100%;
        color: #000;
    }

    /* @keyframes show2{
        from {
            bottom: -20rem;
        }
    
        to {
            bottom: 0rem;
        }
    } */

    /* footer end */
}