@media (max-width: 768px) {

    /* 共通 */

    *{
        font-size: 14px;
    }

    .pc_none{
        display: block;
    }

    .sp_none{
        display: none;
    }

    .container{
        width: 90%;
    }

    .main,
    .lower section:first-of-type{
        margin-top: 60px;
    }

    h3,
    h3 .jp span{
        font-size: 32px;
        text-align: center;
    }

    h3 span,
    h3 .en span{
        font-size: 18px;
    }

    h4{
        font-size: 20px;
        line-height: 1.5em;
    }

    a.btn, button{
        padding: 20px;
    }

    a.btn span, button span{
        font-size: 16px;
    }

    a.btn::after,
    button::after{
        width: 10px;
        height: 18px;
        background-size: contain;
    }

    .lower h1{
        font-size: 30px;
    }

    .lower h1 span{
        font-size: 16px;
        padding-top: 10px;
    }

    .lower .title{
        padding: 90px 0 80px;
    }

    .lower.about .title{
        background-image: url(../images/about_title_bg_sp.webp);
    }

    .lower.professional .title{
        background-image: url(../images/professional_title_bg_sp.webp);
    }

    .lower.service .title{
        background-image: url(../images/service_title_bg_sp.webp);
    }

    .lower.price .title{
        background-image: url(../images/price_title_bg_sp.webp);
    }

     .lower.access .title{
        /* background-image: url(../images/access_title_bg_sp.webp); */
    }


    .lower.contact .title{
        background-image: url(../images/contact_title_bg_sp.webp);
    }

    .lower h3{
        padding-bottom: 40px;
    }

    .lower h4{
        text-align: center;
    }

    .breadcrumbs{
        /*  display: none; */
    }


    /* sp menu */

    header .sp_menu_container > div{
        display: flex;
        flex-wrap: wrap;
        max-width: 330px;
    }

    .sp_menu_container > div:first-of-type{
        padding-right: 0;
    }

    header li:not(.menu_contact){
        margin-right: 0;
    }

    header li.active::after,
    header li:hover::after,
    header li.menu_contact a:hover::before{
        display: none;
    }

    header li.menu_contact.active{
        position: relative;
    }

    header ul{
        flex-direction: column;
        width: 50%;
    }

    header ul.pc_none{
        width: 100%;
    }

    header ul li{
        border-bottom: 1px solid #A8C0D9;
    }

    header li a{
        padding: 24px 10px;
        display: inline-block;
    }

     header .menu_contact  {
        padding-bottom: 16px;
     }
    .menu_contact{
        position: static;
        width: auto;
        height: auto;
    }

    .menu_contact a{
        background: none;
        height: auto;
        color: #444;
        display: inline-block;
    }

    header .footer_contact{
        background: none;
        width: 100%;
    }

    header .footer_contact .container{
        width: 100%;
        margin: 40px 0;
        padding: 30px;
    }

    header .footer_contact .tel-info p{
        border-top: 1px solid #A8C0D9;
    }

    .sp_menu_container{
        visibility:hidden;
        opacity: 0;
        display: flex;
        position: fixed;
        z-index: 9999;
        top: 60px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 100%;
        height: calc(100% - 60px);
        flex-direction: column;
        align-items: center;
        transition: all 0.6s;
        padding-right: 0;
        padding: 0 5%;
        box-sizing: border-box;
        background: rgb(211,224,236);
        background: linear-gradient(160deg, rgba(211,224,236,1) 0%, rgba(209,229,242,1) 21%, rgba(230,240,250,1) 59%, rgba(248,250,254,1) 100%);
        overflow-y: scroll;
    }

    .sp_menu_container.active{
        visibility: visible;
        opacity: 1;
    }

    .sp_menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        box-sizing: border-box;
        position: fixed;
        right: 0px;
        top: 0px;
        padding: 15px;
        width: 60px;
        height: 60px;
        cursor: pointer;
        z-index: 99999;
        background: rgb(41,72,106);
        background: linear-gradient(135deg, rgba(41,72,106,1) 0%, rgba(68,89,112,1) 50%, rgba(100,129,160,1) 100%);
    }

    .sp_menu span{
        transition: all 0.3s;
        display: block;
        width: 30px;
        height: 1px;
        background: #fff;
    }

    .sp_menu span:nth-of-type(2){
        width: 25px;
    }

    .sp_menu span:nth-of-type(3){
        width: 20px;
    }

    .sp_menu span:not(:first-of-type){
        margin-top: 6px;
    }

    .sp_menu.active span:not(:first-of-type){
        margin-top: 0;
    }

    .sp_menu.active span:nth-of-type(1){
        transform: rotate(-45deg);
    }

    .sp_menu.active span:nth-of-type(2){
        width: 30px;
        transform: rotate(45deg);
    }

    .sp_menu.active span:nth-of-type(3){
        display: none;
    }

    /* header */

    header{
        z-index: 9999;
        padding: 7px 8px;
        position: fixed;
        background: #fff;
        top: 0;
        left: 0;
    }

    .index header h1,
    header .heder_logo{
        line-height: 0;
    }

    .index header h1 a,
    header .heder_logo a{
        display: inline-block;
        line-height: 0;
    }

    .index header h1 img,
    header .heder_logo img{
        width: 235px;
    }


    /* index */

    .main{
        background-image: url(../images/index_main_bg_sp.webp);
    }

    .main .container{
        flex-direction: column;
        align-items: center;
        padding: 50px 0 46px;
    }

    .main p{
        font-size: 14px;
        padding: 0;
        padding-top: 70px;
    }

    .main::after,
    .scroll::before{
        height: 30px;
    }

    .index h2 span{
        font-size: 21px;
    }

    .news{
        padding: 70px 0 190px;
    }

    .news .container{
        flex-direction: column;
        align-items: center;
        position: relative;
    }

    .news .container > div{
        padding-right: 0;
    }

    .news h3{
        margin-bottom: 30px;
    }

    .news li{
        padding: 15px 6px;
    }

    .news li a{
        flex-direction: column;
    }

    .news a.btn{
        position: absolute;
        width: calc(100% - 60px);
        box-sizing: border-box;
        margin: 0 30px;
        bottom: -110px;
        left: 0;
    }

    .philosophy{
        padding-top: 50px;
    }

    .philosophy .container{
        flex-direction: column-reverse;
        align-items: flex-start;
        padding-bottom: 80px;
    }

    .philosophy .container .text{
        width: 100%;
        margin-top: 0;
    }

    .philosophy h4{
        font-size: 31px;

    }

    .philosophy h4::before{
        width: 20px;
        margin-right: 10px;
    }

    .philosophy p{
        padding-left: 30px;
        padding-top: 36px;
        padding-bottom: 30px;
    }

    .philosophy .container > div.img{
        width: 240px;
        margin-right: 0;
        margin-left: 30px;
    }

    .philosophy .img img {
        filter: drop-shadow(34px 34px 0 rgba(215, 229, 241, 1));
    }

    .philosophy .bg_text{
        width: 100%;
    }

    .guide{
        padding: 80px 0;
    }

    .guide a{
        height: 140px;
    }

    .guide a.price,
    .guide a.service{
        margin-bottom: 20px;
    }

    .guide a.service,
    .guide a.professional{
        width: 100%;
    }

    .guide a p{
        font-size: 27px;
        text-align: center;
    }

    .guide a span{
        font-size: 14px;
    }

    .index_about{
        padding-bottom: 70px;
    }

    .index_about .container{
        width: 90%;
        padding: 55px 36px 50px;
        margin: 50px 0;
    }

    .index_about .bg{
        background-image: url(../images/index_about_bg_sp.webp);
        background-size: 100% auto;
    }

    .index_about h4{
        font-size: 26px;
        padding-bottom: 40px;
    }


    /* about */

    .message{
        padding: 60px 0;
    }

    .message .container{
        flex-direction: column;
        align-items: center;
    }

    .message .img{
        width: 220px;
        height: 240px;
        padding-right: 0;
        margin-right: 0;
        margin-bottom: 90px;
    }

    .message .img img {
        filter: drop-shadow(40px 40px 0 rgba(192, 215, 242, .38));
        height: 100%;
        object-fit: cover;
        object-position: top center;
    }

    .message .text > div{
        padding: 30px 0;
    }

    .about-office{
        padding: 80px 0 100px;
    }

    .about-office dt,
    .about-office dd{
        padding: 15px 10px;
        line-height: 1.5em;
    }

    .about-office dt{
        width: 105px;
        font-weight: 400;
    }

    .about-office dd{
        width: calc(100% - 145px);
    }

        .tokush {
        padding: 80px 0 100px;
    }

    .tokush dt,
    .tokush dd{
        padding: 15px 10px;
        line-height: 1.5em;
    }

    .tokush dt{
        width: 105px;
        font-weight: 400;
    }

    .tokush dd{
        width: calc(100% - 145px);
    }

    /* about */

    .member{
        padding-top: 30px;
        padding-bottom: 70px;
    }

    .member .container > div{
        flex-direction: column;
        padding: 30px 0;
    }

    .member .img{
        width: 120px;
        height: 155px;
        padding-right: 0;
        margin-right: 0;
        position: absolute;
    }

    .member .img img {
        filter: drop-shadow(25px 25px 0 rgba(192, 215, 242, .38));
        height: 100%;
        object-fit: cover;
        object-position: top center;
    }

    .member h3,
    .member h4,
    .member h5{
        padding-left: 180px;
    }

    .member h3{
        padding-bottom: 8px;
        flex-direction: column;
        align-items: flex-start;
    }

    .member h3 span{
        font-size: 14px;
    }

    .member h3 span.name{
        font-size: 20px;
        padding-right: 0;
        padding-bottom: 8px;
    }

    .member h4,
    .member h5{
        font-size: 12px;
        padding-bottom: 8px;
    }

    .member h4{
        text-align: left;
        padding-top: 30px
    }

    .member h5{
        padding-bottom: 40px;
    }

    .member dl{
    }

    .member dt,
    .member dd{
        padding: 15px 10px;
        line-height: 1.5em;
    }

    .member dt{
        width: 60px;
        font-weight: 400;
    }

    .member dd{
        width: calc(100% - 100px);
        line-height: 1.5em;
    }


    /* service */

    .service .caption{
        text-align: left;
    }

    .individual{
        padding: 60px 0 10px;
    }

    .individual .container{
        width: calc(100% - 60px);
    }

    .individual h4{
        padding: 60px 0 50px;
    }

    .individual .case > div,
    .individual .case > a,
    .corporate .case > div,
    .corporate .case > a{
        width: 100%;
        margin-bottom: 50px;
    }

    .individual .case > *:not(:nth-of-type(3n)),
    .corporate .case > *:not(:nth-of-type(3n)){
        margin-right: 0;
    }

    .individual .case p{
        font-size: 16px;
    }

    .individual a .btn,
    .corporate a.btn{
        margin: 20px 0 0;
        max-width: 250px;
        height: 60px;
    }

    .corporate{
        padding: 50px 0 80px;
    }

    .corporate h4{
        padding: 60px 0 40px;
    }

    .corporate dl{
        padding: 0;
    }

    .corporate dt{
        font-size: 16px;
    }

    .corporate dd{
        padding: 15px 10px 20px;
        margin-bottom: 20px;
    }

    .corporate dd.flex{
        flex-direction: column;
    }

    .corporate a.btn{
        width: calc(100% - 50px);
        box-sizing: border-box;
    }


    /* price */

    .price_table{
        padding: 60px 0 100px;
    }

    .price_table .container div{
        overflow-x: scroll;
    }

    .price_table .container > div:first-of-type{
        margin-bottom: 70px;
    }

    .price th,
    .price td{
        white-space: nowrap;
        padding: 14px 20px;
    }

    .price th{
        font-size: 14px;
    }

    .price .price01 td{
        text-align: right;
    }


    /* access */

    .map{
        padding: 60px 0;
    }

    .map iframe{
        height: 300px;
    }

    .map iframe + div{
        flex-direction: column;
        margin-top: 20px;
    }

    .map a.btn{
        width: 260px;
        margin: 33px auto 0;
    }

    .map .pc_none{
        display: inline-block;
    }

    .map p .sp_none{
        display: none;
    }

    .route{
        padding: 75px 0 60px;
    }

    .route .container > div{
        padding: 20px;
    }

    .route p{
        padding-bottom: 14px;
    }

    .route .arrow{
        width: 38px;
        height: 20px;
        background-size: contain;
    }


    /* contact */

    .consultation{
        padding: 60px 0 70px;
    }

    .consultation em{
        font-size: 15px;
        padding: 30px 0 15px;
    }

    .consultation .tel-info{
        flex-direction: column;
    }

    .consultation .tel-info div{
width: 100%;
margin: 0px;
}


    .consultation .tel-info > div:not(:last-of-type){
        border-right: 0;
        padding-right: 0;
        margin-right: 0;
    }

    .consultation .tel-info > div{
        border-top: 1px solid #D9D9D9;
        padding-top: 30px;
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .consultation .tel-info > div > *{
        width: 245px;
    }

    .consultation .tel-info a{
        font-size: 26px;
    }

    .consultation .tel-info a span{
        font-size: 14px;
    }

    .consultation h5{
        font-size: 21px;
    }

    .consultation h6{
        font-size: 16px;
    }

    .mailform{
        padding: 60px 0;
    }

    .mailform .caption{
        padding: 30px 0 60px;
    }

    .mailform dt,
    .mailform dd,
    .mailform dd .prefecture div:nth-of-type(2) input{
        width: 100%;
    }

    .mailform dt,
    .mailform dt:not(:last-of-type){
        margin-bottom: 10px;
    }

    .mailform dd:not(:last-of-type){
        margin-bottom: 20px;
    }

    .mailform dt label{
        font-weight: 500;
    }

    .mailform dt span{
        font-size: 12px;
        margin-right: 10px;
    }

    .mailform dd.tel{
        flex-direction: column;
        align-items: flex-start;
    }

    .mailform dd.tel input{
        width: 100%;
        margin-right: 0;
    }

    .mailform dd .zip div input{
        margin-right: 10px;
    }

    .mailform dd .prefecture div:first-of-type{
        margin-bottom: 20px;
        width: 100%;
    }

    .mailform dd .prefecture{
        flex-wrap: wrap;
    }

    .form_button label{
        margin: 40px 0;
    }

    input[type="checkbox"]{
        width: 16px;
        height: 16px;
    }

    input[type="checkbox"]:checked:before {
        top: 0;
        left: 4px;
        width: 4px;
        height: 8px;
    }

    .form_button button{
        width: 260px;
    }


    /* footer */

    .footer_contact{
        background-image: url(../images/footer_contact_bg_sp.webp);
    }

    .footer_contact .container{
        width: 90%;
        padding: 35px 36px 50px;
        margin: 60px 0 50px;
    }

    .footer_contact h3{
        top: -18px;
        white-space: nowrap;
    }

    .footer_contact .container > div{
        flex-direction: column;
    }

    .footer_contact .tel-info{
        min-width: 100%;
        margin-right: 0;
        margin-bottom: 30px;
    }

    .footer_contact .tel-info p{
        font-size: 13px;
        line-height: 1.3em;
    }

    .footer_contact .tel-info p{
        font-size: 12px;
    }

    .tel-info a{
        font-size: 26px;
    }

    .tel-info a span{
        font-size: 14px;
    }

    .footer_contact .tel-info span {
    font-size: 10px;
}

    .footer_contact .tel-info,
    .footer_contact a.btn{
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    footer{
        padding: 30px 20px 85px;
    }

    footer > div{
        flex-direction: column;
        align-items: center;
        padding: 0;
    }

    footer .footer_logo + p{
        font-size: 13px;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 40px;
    }

    footer .footer_logo + p .pc_none{
        display: inline-block;
    }

    footer .footer_logo + p .sp_none{
        display: none;
    }

    footer li a{
        font-size: 14px;
    }

    footer ul li:not(:last-of-type){
        margin-bottom: 20px;
    }

    address{
        font-size: 11px;
    }

    /* Vi's CSS */

    .p-news__list {
        width: 100%;
        padding-right: 0;
    }
    .c-articleNews strong {
        font-size: 15px;
        font-weight:bold;
        letter-spacing: 1px;
    }
    .c-articleNews__inner.-no-padding h2 {
        font-weight: 700;
        line-height: 180%;
        letter-spacing: 0.9px;
        font-size: 18px;
        padding: 0 0 10px 0;
        margin-bottom: 10px;
    }
    .c-articleNews__inner.-no-padding h2::before {
        width: 60px;
    }
    .c-articleNews__inner.-no-padding p {
        padding: 0;
        margin-top: 20px;
        font-size: 14px;
        margin-bottom: 20px;
    }
    .c-articleNews__inner.-no-padding h3 {
        margin-top: 30px;
        line-height: 1.6;
        border-width: 3px;
    }
    .p-news__category {
        width: 100%;
        margin-top: 86px;
    }
    .p-news__category .sub-ttl{
        text-align: left;
    }

    .wp-block-list {
        margin-bottom: 20px;
    }
}