@charset "utf-8";

body{
    background: #f4f8ff;
    font-family: a-otf-ud-shin-go-pr6n, sans-serif;
    color: #000;
}

h1, h2, h3, h4, h5{
    font-family: "m-plus-1p", sans-serif;
}

a:hover{opacity: 0.8;}

header{
    width: 100%;
    max-width: 100%;
    padding: 36px 10px 40px 10px;
    background: #fff;
    position: relative;
    border-bottom: 22px solid #000;
    display: flex;
    justify-content: flex-end;
}

header h1.header__title.header-title{
    width: 140px;
}

header .header__inner{
    width: 100%;
    max-width: 1400px;
    display: flex;
    justify-content: space-between;
}

header .header__inner-right{
    display: flex;
    align-items: center;
}

header .header__inner-right nav{
    margin-right: 20px;
}

header nav ul{
    padding: 0;
    flex-direction: unset;
}
header nav li{
    margin: 20px 0 20px 20px;
    font-family: tt-commons-pro, sans-serif;
    font-size: 18px;
    letter-spacing: 1px;
}
header nav li a{color: #000;}


.line_btn{
    width: 100%;
    width: 340px;
}
.line_btn a{
    width: 100%;
    padding: 10px;
    background: #05c654;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 2px;
    border-radius: 15px;
}
.line_btn a:before{
    content: '';
    background: url(../img/icon_line_w.png) no-repeat;
    background-size: 100%;
    width: 42px;
    height: 40px;
    display: block;
    margin-right: 10px;
}

section{
    padding: 0;
}

h1.ttl{
    font-family: tt-commons-pro, sans-serif;
    font-size: 34px;
    font-weight: 600;
    text-align: center;
}

h1.ttl2{
    font-family: tt-commons-pro, sans-serif;
    font-size: 26px;
    font-weight: 500;
    color: #000;
    text-align: center;
    letter-spacing: 4px;
    text-transform: uppercase;
}

@media screen and (max-width:768px) {
    body{
        font-size: calc(100vw * 12 / 500);
    }
    
    header{
        padding: 4% 3% 4%;
    }
    header h1.header__title.header-title{
        width: 20%;
    max-width: 140px;
    }
    header .header__inner-right{
        display: none;
    }

    #nav-input:checked ~ #nav-content{
        display: block;
    }

    header nav li{
        font-size: 160%;
    }
    #nav-open{
        width: 50px;
    }

    #nav-open span{
        top: 28px;
        rotate: -196deg;
    }
    #nav-open span, #nav-open span:before, #nav-open span:after{
        width: 40px;
        height: 2px;
    }

    #nav-drawer{
        width: 50px;
        height: 50px;
            top: -8px;
    }

    #nav-open span:before{
        left: -10px;
    }

    #nav-content{
        width: 75%;
        padding: 20% 20% 0 0;
    }
    label#nav-open:after{
           content: 'MENU';
        bottom: -22px;
        position: absolute;
        display: inline-block;
        font-size: 16px;
    }

    #nav-input:checked ~ #nav-open span::before{
        rotate: 30deg;
        left: 0;
    }
    

    h1.ttl{
        font-size: 231%;
    }
    h1.ttl2{
        font-size: 177%;
    }
    
}


section#trouble{
    margin-top: -14px;
    padding: 2.9% 0 0;
    background: url(../img/photo/trouble_bg.png)repeat-y center top;
    background-size: 100%;

}
section#trouble h1.ttl{
    color: #ddd;
}

p.trouble__txt{
    margin: 1.5% 0 3.9%;
    font-size: 31px;
    font-weight: 600;
    text-align: center;
}
p.trouble__txt span{
    color: #ff7272;
}

section#trouble picture{
    max-width: 1054px;
    margin: 0 auto 3.4%;
}

#suggestion{
    padding: 2.8% 0 7.6%;
    background: url(../img/photo/suggestion_bg.png)no-repeat top center;
}

#suggestion h2 {
    margin: 0 0 2.8%;
    font-size: 31px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
}

.suggestion__block{
    width: 94%;
    max-width: 1107px;
    margin: 0 auto;
    display: flex;
    column-gap: 53px;
}
.suggestion__block > div{
    width: 333px;
    position: relative;
    z-index: 0;
}
.suggestion__block > div::after{
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg,rgba(242, 247, 245, 1) 0%, rgba(255, 250, 230, 1) 100%);
    display: block;
    position: absolute;
    top: 28px;
    left: 28px;
    z-index: -1;
}

@media screen and (max-width:768px) {
    section#trouble{
        padding: 8% 0 0;
    }
    .suggestion__block > div:nth-last-child(3){
        display: none;
    }

    p.trouble__txt{
        margin: 3.2% 0 3%;
        font-size: 210%;
    }

    section#trouble picture{
        width: 92%;
        margin: 0 auto 6.6%;
    }

    #suggestion{
        padding: 5.1% 0 7.6%;
    }
    #suggestion h2{
        margin: 0 0 5.4%;
        font-size: 210%;
    }
    .suggestion__block{
        column-gap: 30px;
    }

    .suggestion__block > div::after{
        top: 18px;
        left: 18px;
    }
}


section#reason{
    margin-bottom: 9%;
}
section#reason .reason__wrap{
    position: relative;
}
section#reason .reason__wrap h1.ttl2 {
    width: 100%;
    max-width: 640px;
    margin: auto;
    padding: 5px 10px 14px;
    background: #000;
    font-weight: 500;
    color: #fff;
    text-align: center;
    letter-spacing: 1.5px;
    border-radius: 50px;
    display: inline-block;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: 18px;
}
section#reason .reason__wrap h1 span{
    font-size: 46px;
}
section#reason .swiper{
    width: 100%;
    max-width: 1200px;
    padding: 0 30px 30px;
}
section#reason .swiper-slide{
    width: 100%;
    margin: 0 auto;
    padding: 39px 30px 20px;
    background: linear-gradient(0deg,rgba(242, 247, 245, 1) 0%, rgba(229, 241, 251, 1) 100%);
}
section#reason .swiper-slide .img_block{
    width: 70%;
    margin: 0 auto;
}

section#reason .swiper-slide .txt_block{
    position: relative;
}
section#reason .swiper-slide .txt_block p.tag{
    margin: 0;
    padding: 0 24px;
    background: #fe97a9;
    font-size: 18px;
    font-family: tt-commons-pro, sans-serif;
    color: #fff;
    display: inline-block;
    position: absolute;
    top: -55px;
    left: 110px;
    letter-spacing: 1.5px;
    border-radius: 5px;
}

section#reason .swiper-button-prev,
section#reason .swiper-button-next{
    width: 54px;
    height: 54px;
    background: url(../img/photo/icon_arrow.png) no-repeat;
    background-size: 100%;
    top: 270px;
}
section#reason .swiper-button-prev{
    left: 0;
}
section#reason .swiper-button-next{
    right: 0;
    rotate: 180deg;
}

section#reason .swiper-slide .txt_block h2{
    margin: 3.7% 0 1.6%;
    font-size: 31px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
}
section#reason .swiper-slide .txt_block p.txt{
    margin: 0;
    line-height: 1.5;
    font-size: 18px;
    display: flex;
    justify-content: center;
}

section#reason .swiper-pagination{
    position: relative;
    top: 30px;
}
.swiper-pagination-bullet{
    width: 14px;
    height: 14px;
    background: #f2f7f5;
    opacity: 1;
}
.swiper-pagination-bullet-active{
    background: #aae2d8
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
    margin: 0 10px;
}

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

    section#reason .reason__wrap h1.ttl2{
        font-size: 177%;
        top: 11px;
    }
    section#reason .reason__wrap h1 span{
        font-size: 176%;
    }

    section#reason .swiper{
        padding: 0 15px 30px;
    }

    section#reason .swiper-slide{
        padding: 27px 0px 20px;
    }
    section#reason .swiper-slide .img_block{
        width: 90%; 
        /*height: 390px;*/
        height: 100%;
    }
    section#reason .swiper-slide .img_block img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    section#reason .swiper-slide .txt_block p.tag{
        padding: 0 3.7%;
        font-size: 120%;
        top: -90%;
        left: 20px;
    }

    section#reason .swiper-slide .txt_block h2{
        margin: 7% 0 3.3%;
        font-size: 160%;
        line-height: 1.1;
    }

    section#reason .swiper-slide .txt_block p.txt{
        font-size: 170%;
    }
}


section#retouch{
    margin-bottom: 13%;
}

section#retouch .retouch__wrap{
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

section#retouch .retouch__wrap .hed__txt{
    padding-bottom: 10.6%;
    background: url(../img/photo/menu_bg.png)no-repeat center top;
    background-size: 100%;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

section#retouch h1.ttl2 {
    margin: 1.2% 0;
    letter-spacing: 4px;
    color: #ddd;
}
section#retouch h1.ttl2::before{
    content: '';
    background: url(../img/photo/icon_mark.png) no-repeat;
    background-size: 100%;
    width: 47px;
    height: 46px;
    display: block;
    margin: 0 auto 4px;
}

section#retouch h2.ttl{
    margin: 2.1% 0 0;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 0;
}

section#retouch p.h_txt{
    margin: 2.1% 0 0;
    text-align: center;
    font-size: 18px;
    line-height: 1.4;
}
section#retouch p.h_txt:after{
    content: '';
    width: 100%;
    height: 1px;
    margin-top: 2.6%;
    background: #ddd;
    display: block;
}

section#retouch .retouch_block{
    width: 100%;
    background: url(../img/photo/menu_line.png)no-repeat center top;
    background-size: 100%;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    position: relative;
}

section#retouch .retouch_02{
    margin: 4.8% 0;
}

section#retouch .retouch_block h2{
    width: 430px;
    margin: 0 auto;
    padding: 14px 0 15px;
    font-size: 26px;
    font-family: tt-commons-pro, sans-serif;
    position: absolute;
    left: 20px;
    top: -25px;
}

section#retouch .retouch_01 h2{
    background: linear-gradient(90deg,rgba(242, 247, 245, 1) 0%, rgba(231, 243, 253, 1) 100%);
}
section#retouch .retouch_02 h2{
    background: linear-gradient(90deg,rgba(255, 228, 232, 1) 0%, rgba(246, 229, 229, 1) 100%);
}
section#retouch .retouch_03 h2{
    background: linear-gradient(90deg,rgba(253, 254, 207, 1) 0%, rgba(254, 238, 190, 1) 100%);
}

section#retouch .img_block{
    width: 72%;
    max-width: 789px;
    padding: 5% 0 2%;
    position: relative;
    z-index: 1;
}

section#retouch .txt_block{
    max-width: 540px;
    width: 100%;
    padding: 9.4% 0 0 19%;
    position: absolute; 
    top: 10px;
    right: 5px;
}
section#retouch .retouch_01 .txt_block{
    background: url(../img/photo/retouch_no01.png), #f1f7f7;
    background-repeat: no-repeat;
    background-position: 137px 10px,  0 0;
}
section#retouch .retouch_02 .txt_block{
    background: url(../img/photo/retouch_no02.png), linear-gradient(180deg,rgba(255, 228, 232, 1) 0%, rgba(246, 229, 229, 1) 100%);
    background-repeat: no-repeat;
    background-position: 115px 10px,  0 0;
}
section#retouch .retouch_03 .txt_block{
    background: url(../img/photo/retouch_no03.png), linear-gradient(0deg, rgba(253, 254, 207, 1) 0%, rgba(254, 238, 190, 1) 100%);
    background-repeat: no-repeat;
    background-position: 115px 10px,  0 0;
    background-size: auto, 100% 67%;
}

section#retouch .txt_block h3{
    margin: 0 auto 13.5%;
    font-size: 28px;
    font-weight: 600;
    text-align: center;
}

section#retouch .txt_block ul{
    margin-left: 9%;
}
section#retouch .txt_block ul li{
    margin-bottom: 6.7%;
    font-size: 20px;
    display: flex;
}
section#retouch .txt_block ul li::before{
    content: '';
    background: url(../img/photo/icon_check.png) no-repeat;
    width: 23px;
    height: 23px;
    margin-right: 10px;
    display: inline-block;
}

section#retouch p.txt{
    margin: 0;
    padding: 6.2% 0 7.5%;
    font-size: 31px;
    font-weight: 600;
    font-family: "m-plus-1p", sans-serif;
    text-align: center;
    border: 1px solid #ddd;
    line-height: 1.5;
    position: relative;
}
section#retouch p.txt:after{
    content: '';
    width: 100%;
    height: 37px;
    background: url(../img/photo/menu_bg.png) no-repeat bottom center;
    transform: scale(1, -1);
    position: absolute;
    bottom: 0;
    display: block;
}

@media screen and (max-width:768px) {
    section#retouch{
        margin-bottom: 8.8%;
    }
    section#retouch .retouch__wrap{
        width: 93%;
    }
    section#retouch h1.ttl2{
        margin: 1.2% 0 3.3%;
        font-size: 180%;
    }
    section#retouch h2.ttl{
        font-size: 218%;
    }

    section#retouch p.h_txt{
        margin: 2.1% 0 0;
        font-size: 164%;
    }

    section#retouch .retouch__wrap .hed__txt{
        padding-bottom: 11.3%;
    }

    section#retouch .img_block{
        width: 100%;
        max-width: 789px;
        padding: 6.5% 0 3.4%;
        position: relative;
        z-index: 1;
    }

    section#retouch .retouch_block{
        padding-bottom: 13%;
        border-bottom: none;
    }

    section#retouch .retouch_block.retouch_03{
        padding-bottom: 1%;
    }
    
    section#retouch .retouch_block h2{
        width: 64%;
        max-width: 430px;
        font-size: 178%;
        padding: 2.1% 0 2.2%;
        left: 0;
        right: 0;
        margin: auto;
    }

    section#retouch .txt_block{
        width: 98%;
        max-width: 100%;
        margin: 0 auto; 
        padding: 3% 0 5%;
        position: relative;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
    }
    section#retouch .txt_block:before {
        content: '';
        width: 229px;
        height: 160px;
        display: block;
        position: absolute;
        mix-blend-mode: screen;
        top: 20px;
        left: 20px;
        z-index: 0;
    }
    
    section#retouch .retouch_01 .txt_block{
        background: #f1f7f7;
        background-position: 0 0;
    }
    section#retouch .retouch_01 .txt_block:before {
        background: url(../img/photo/retouch_no01.png) no-repeat;
        background-size: 100%;
    }

    section#retouch .retouch_02 .txt_block{
        background: linear-gradient(180deg,rgba(255, 228, 232, 1) 0%, rgba(246, 229, 229, 1) 100%);
        background-position: 0 0;
    }
    section#retouch .retouch_02 .txt_block:before {
            background: url(../img/photo/retouch_no02.png) no-repeat;
            background-size: 100%;
        }

    section#retouch .retouch_03 .txt_block{
        background: linear-gradient(0deg, rgba(253, 254, 207, 1) 0%, rgba(254, 238, 190, 1) 100%);
        background-position: 0 0;
    }
    section#retouch .retouch_03 .txt_block:before {
        background: url(../img/photo/retouch_no03.png) no-repeat;
        background-size: 100%;
    }

    section#retouch .retouch_02{
        margin: 0 0 0;
    }

    section#retouch .txt_block h3{
        width: 49%;
        margin: 0;
        padding: 0;
        font-size: 200%;
        font-weight: 600;
        text-align: center;
        z-index: 0;
    }

    section#retouch .txt_block ul{
        margin-left: 0;
        width: 51.5%;
        z-index: 1;
    }
    section#retouch .txt_block ul li{
        margin-bottom: 5.8%;
        font-size: 161%;
    }
    section#retouch .txt_block ul li::before{
        margin-right: 0;
        background-size: contain;
        width: 33px;
        height: 23px;
    }
    
    section#retouch p.txt{
        padding: 6.5% 0 5.9%;
        font-size: 211%;
    }

    
}


section#menu{
    margin-bottom: 12.8%;
}

section#menu table{
    width: 100%;
    max-width: 1168px;
    margin: 0 auto;
    border-spacing: 0px;
    border-collapse: 0;
}

section#menu table th h2{
    margin: 0 0 10%;
    font-size: 24px;
}

section#menu .menu_list{
    margin-bottom: -4px;
    margin-left: 3px;
    display: flex;
}

section#menu table th:nth-child(1){
    width: 220px;
}

section#menu table th div > div{
    width: 308px;
    padding: 5% 0;
    position: relative;
    padding: 5% 0 3.8%;
}

section#menu table th div.menu01,
section#menu .menu_list.menu01 .left_block{
    width: 307px;
    background: linear-gradient(0deg, rgba(242, 247, 245, 1) 0%, rgba(231, 243, 253, 1) 100%);
    border-radius: 10px 0 0 0;
    box-shadow: -4px -4px 10px 0px #ddd;
}
section#menu table th div.menu02,
section#menu .menu_list.menu02 .left_block{
    width: 308px;
    background: linear-gradient(180deg,rgba(255, 228, 232, 1) 0%, rgba(246, 229, 229, 1) 100%);
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    box-shadow: 0px -2px 6px #ddd;
}
section#menu table th div.menu03,
section#menu .menu_list.menu03 .left_block{
    width: 306px;
    background: linear-gradient(0deg, rgba(253, 254, 207, 1) 0%, rgba(254, 238, 190, 1) 100%);
    border-radius: 0 10px 0 0;
    box-shadow: 4px -4px 10px 0px #ddd;
}

section#menu .menu_list p.price{
    margin: 0 0 9.7%;
    font-family: tt-commons-pro, sans-serif;
    font-weight: 400;
    line-height: 1;
}
section#menu .menu_list p.price span.cost{
    font-size: 59px;
    display: inline-block;
}

section#menu .menu_list p.price span.currency{
    font-size: 24px;
    display: inline-block;
}
section#menu .menu_list p.price span.currency span{
    display: block;
    font-weight: 700;
    line-height: 0.5;
}

section#menu .menu_list .btn{
    width: 240px;
    margin: 0 auto;
    padding: 0;
    font-size: 18px;
}
section#menu .menu_list .btn a{
    width: 100%;
    padding: 17px;
    display: block;
    color: #000;
    border: 4px solid #fff;
    border-radius: 50px;
    box-shadow: 0 0 10px #ccc;
    text-align: center;
}

section#menu p.discount_badge{
    width: 240px;
    margin: auto;
    background: #fe97a9;
    color: #fff;
    font-size: 24px;
    border-radius: 10px;
    position: absolute;
    top: -21px;
    left: 14px;
    right: 0;
}

section#menu table td img{
    margin-top: -2px;
}

@media screen and (max-width:1024px) {
    section#menu{
        margin-bottom: 12%;
    }
    section#menu .menu_list{
        max-width: 807px;
        margin-left: 3px;
        margin-right: 19px;
    }
}
@media screen and (max-width:768px) {
    section#menu .menu_list{
        max-width: 99%;
        margin: 0 auto 4%;
    }

    section#menu .menu_list .left_block{
        position: relative;
    }

    section#menu .menu_list.menu01 .left_block,
    section#menu .menu_list.menu02 .left_block,
    section#menu .menu_list.menu03 .left_block{
        width: 40%;
        padding: 12.5% 0 0;
        box-shadow: unset;
        border-radius: 10px 0 0 10px;
    }

    section#menu .menu_list .left_block h2{
        margin: 0 0 10.4%;
        font-size: 160%;
        letter-spacing: 0;
    }
    section#menu .menu_list .left_block p.price{
        text-align: center;
    }
    section#menu .menu_list .left_block p.price span.cost{
        font-size: 401%;
    }
    section#menu .menu_list .left_block p.price span.currency{
        font-size: 163%;
    }
    section#menu .menu_list .left_block .btn{
        width: 85%;
        font-size: 122%;
    }
    section#menu .menu_list .btn a{
        padding: 5% 10%;
    }
    section#menu .menu_list .right_block{
        width: 60%;
    }

    section#menu p.discount_badge{
        width: 84%;
        max-width: 240px;
        font-size: 164%;
        top: -15px;
        left: 0;
        right: 0;
        text-align: center;
    }
}

section#gallery{
    margin-bottom: 9.1%;
}

section#gallery .gallery__wrap{
    max-width: 1010px;
    margin: 5.2% auto 0;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 50px 85px;
}
section#gallery .gallery__wrap > div{
    width: 280px;
}

@media screen and (max-width:768px) {
    section#gallery{
        margin-bottom: 12.1%;
    }
    section#gallery .gallery__wrap{
        margin: 10.1% auto 0;
        gap: 10px 15px;
    }

    section#gallery .gallery__wrap > div{
        width: 46%;
        max-width: 280px;
    }
    section#gallery .gallery__wrap > div:nth-last-child(n+5){
        display: none;
    }
    
}

section#flow{
    margin: 0 auto 9.2%;
}
section#flow .flow__wrap{
    width: 100%;
    max-width: 1175px;
    display: flex;
    margin: 5% auto 0;
}

section#flow .flow__block{
    width: 235px;
    padding-top: 75px;
    background: #fff;
    position: relative;
}
section#flow .flow__block > div{
    height: 100%;
    padding-top: 123px;
    background: #eee;
    border-radius: 10px;
    box-shadow: inset 0 0 10px #e5e5e5;;
}

section#flow .flow__block .img_block{
    width: 180px;
    position: absolute;
    top: 0;
    margin: auto;
    right: 0;
    left: 0;
}

section#flow .flow__block h2{
    margin: 0 auto 6%;
    font-family: serif;
    font-size: 22px;
    font-weight: bold;
    color: #7c6a3f;
    letter-spacing: 0;
}

section#flow .flow__block p.no{
    width: 100px;
    margin: 0 auto 10%;
    padding: 4px 0 5px;
    background: #000;
    font-size: 22px;
    font-family: tt-commons-pro, sans-serif;
    color: #fff;
    line-height: 1;
    text-align: center;
    position: relative;
}
section#flow .flow__block p.no:before{
    content: '';
    width: 1px;
    height: 52px;
    display: block;
    background: #000;
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    margin: auto;
}

section#flow .flow__block p.cot {
    margin: 0;
    padding: 0 18px 10px;
    font-size: 18px;
    line-height: 1.8;
}

@media screen and (max-width:768px) {
    section#flow{
        margin: 0 auto 4.5%;
    }
    section#flow .flow__wrap{
        display: block;
    }
    
    section#flow .flow__block{
        width: 99%;
        padding: 0 0 0 10%;
    }

    section#flow .flow__block > div{
        padding: 8% 0 8% 19%;
        display: block;
    }
    section#flow .flow__block .ttl {
        display: flex;
        align-items: center;
    }

    section#flow .flow__block p.no{
        margin: 0;
        font-size: 150%;
    }
    section#flow .flow__block h2{
        margin: 0 0 0 5%;
        font-size: 190%;
    }

    section#flow .flow__block .img_block{
        width: 24%;
        max-width: 180px;
        top: 22px;
        right: unset;
        left: 12px;
    }

    section#flow .flow__block p.cot{
        margin: 0;
        padding: 0;
        font-size: 176%;
        line-height: 1.9;
    }

    section#flow .flow__block p.no:before{
        width: 41px;
        height: 1px;
        top: 16px;
        left: -140px;
        right: 0;
    }
}

section#faq{
    padding: 3.1% 0;
    background: #f7f7f7;
}

.accordion{
    width: 100%;
    max-width: 800px;
    margin: 2.8% auto 0;
    border: 1px solid;
    border-radius: 10px;
    overflow: hidden;
}

.accordion-content {
  display: none;
}

.accordion-header {
    background-color: #FFF;
    padding: 16px 45px 10px 15px;
    font-size: 22px;
    transition: background .2s ease;
    cursor: pointer;
    position: relative;
}

.accordion-header > span::before,
.accordion-header > span::after{
  position:absolute;
  content:'';
  top:1px;
  right:20px;
  bottom:0;
  width:30px;
  height:2px;
  margin:auto;
  background:#151E2F;
}
.accordion-header > span::after{
  transform:rotate(-90deg);
  transition:transform 0.3s;
}
.accordion-header.active > span::after{transform:rotate(0deg);}

.accordion-content {
  background-color: #FFF;
  padding: 17px 20px 4.5% 15px;
  font-size: 18px;
}

.accordion-header > span > span,
.accordion-content > span{
    position: relative;
    font-weight: 600;
    display: flex;
}

.accordion-header  > span > span{
    align-items: center;
}

.accordion-content > span{
    align-items: flex-start;
    line-height: 2;
}

.accordion-content > span > span{
    width: 90%;
}

.accordion-header  > span > span::before,
.accordion-content  > span::before{
    content: '';
    width: 42px;
    height: 42px;
    margin-right: 20px;
    font-family: tt-commons-pro, sans-serif;
    font-weight: 400;
    font-size: 33px;
    color: #fff;
    display: inline-block;
    border-radius: 50px;
    text-align: center;
    line-height: 1.3;
}


.accordion-header  > span > span::before{
    background: #000;
  content:"Q";
  top: 2px;
  left: 0;
}

.accordion-content  > span::before{
    background: #fe97a9;
  content:"A";
  top: 3px;
  left: 0;
}

/* hover */
.accordion-header:hover {
  background-color: #F2F2F2;
}

@media screen and (max-width:768px) {
    section#faq{
        padding: 6.9% 0;
    }

    section#faq h1.ttl2{
        margin-bottom: 6%;
    }
    .accordion{
        width: 98%;
        margin: 2.8% auto 0;
    }
    .accordion-header > span > span::before, .accordion-content > span::before{
        font-size: 150%;
        width: 32px;
        height: 32px;
        margin-right: 10px;
    }
    .accordion-header  > span > span{
        width: 100%;
        display: inline-block;
        font-size: 70%;
        display: flex;
        align-items: center;
    }
    .accordion-header > span::before, .accordion-header > span::after{
        width: 20px;
        right: 10px;
    }

    .accordion-content  > span > span{
        font-size: 80%;
    }
}



/* access */
section#access{
    margin-bottom: 2%;
}
section#access h1{
    margin-bottom: 3.2%;
    padding: 2.9% 0 2.7%;
    background: #f4f8ff;
}

section#access dl {
    max-width: 820px;
    margin: 0 auto 2.2%;
    display: flex;
    align-items: center;
}
section#access dl dt{
     width: 164px;
    margin-right: 17px;
    padding: 0 49px 16px 8px;
    background: url(../img/photo/access_line.png) no-repeat left bottom;
    font-family: tt-commons-pro, sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 2px;
    text-align: center;
}
section#access dl dd{
    width: 500px;
    font-size: 20px;
}


section#access .map {
    width: 100%;
    max-width: 750px;
    height: 404px;
    margin: 3% auto 2.9%;
}
section#access .map iframe{
    width: 100%;
    height: 100%;
}

section#access .access_block{
    display: flex;
    justify-content: center;
    column-gap: 32px;
}

section#access .movie{
  width: 500px;
  height: 200px;
  position: relative;
}
section#access .movie-inner{
  display: block;    
  width: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}
section#access .thumb{
  width: 100%;
  max-width: 100%;
}
section#access .movie-player{
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 768px) {
  .movie{
    width: 100%;
    height: 200px;
  }

  .access_block{
    display: block;
  }

  section#access h1{
    padding: 7.3% 0 5.6%;
  }

  section#access dl{
    width: 85%;
    max-width: 640px;
        display: block;
  }
  section#access dl dt{
    font-size: 170%;
  }
  section#access dl dd{
      width: 100%;
    max-width: 100%;
    font-size: 177%;
    padding: 4% 0.5% 0;
    margin-bottom: 6%;
  }
  section#access .map{
    width: 89%;
    height: 364px;
    margin: 10% auto 2.9%;
  }
  section#access .access_block{
    margin: 11% 0 13%;
    display: block;
  }
  section#access .movie{
    width: 67%;
    max-width: 500px;
    margin: 0 auto 6%;
  }
}

section.news{
    background: #f4f8ff;
    padding: 3.8% 0 0.9%;
    box-shadow: 0 2px 5px #ddd;
    position: relative;
}

section.news .news_wrap{
    width: 100%;
    max-width: 880px;
    margin: 3.7% auto 0;
}

section.news .news_wrap article,
section.news .news_wrap .ttl_wrap{
    width: 100%;
    margin: 0 0 5.2%;
    padding-left: 2.7%;
    padding-bottom: 1.9%;
    border-bottom: 1px solid #000;
    display: flex;
    align-items: center;
    font-family: tt-commons-pro, sans-serif;
}

section.news .news_wrap .ttl{
    display: flex;
    align-items: center;
}

section.news .news_wrap span.label_NEWS,
section.news .news_wrap span.label_OTHER,
section.news .news_wrap span.label_BLOG{
    width: 80px;
    padding: 7px 5px 5px;
    margin-right: 17px;
    color: #fff;
    border-radius: 50px;
    display: inline-block;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 1px;
    text-align: center;
}
section.news .news_wrap span.label_NEWS{
    background: #000;
}

section.news .news_wrap span.label_OTHER{
    background: #777771;
}

section.news .news_wrap time.date {
    display: flex;
    align-items: center;
    line-height: 1;
}
section.news .news_wrap time.date span.day{
    margin-right: 8px;
    font-size: 43px;
    display: inline-block;
}
section.news .news_wrap time.date span.y-m{
    font-size: 16px;
    display: inline-block;
}
section.news .news_wrap time.date span.month {
    display: block;
}

section.news .news_wrap article a {
    width: 100%;
    margin: 0;
    padding: 0 0 0 3.4%;
    text-decoration: unset;
    font-size: 18px;
}

@media screen and (max-width:768px) {
    section.news{
        padding: 6.6% 0 0.9%;
    }
    section.news .news_wrap .ttl{
        display: block;
    }
    section.news .news_wrap span.label_news, section.news .news_wrap span.label_{
        font-size: 102%;
        margin-bottom: 9%;
        margin-right: 0;
    }
    section.news .news_wrap time.date span.day{
        font-size: 290%;
    }
    section.news .news_wrap time.date span.y-m{
        font-size: 110%;
    }
    section.news .news_wrap article a{
        padding: 0 0 1% 3.4%;
        font-size: 170%;
        line-height: 1.3;

    }
    section.news .news_wrap article{
        margin: 0 0 1.7%;
        align-items: self-end;
    }
}

aside.line_wrap {
    padding: 2.1% 0 2.9%;
    background: #f4f8ff;
}

aside.line_wrap .line_btn{
    width: 28%;
    max-width: 430px;
    margin: 0 auto;
}
aside.line_wrap .line_btn a{
    font-size: 23px;
    letter-spacing: 3px;
}
aside.line_wrap .line_btn a:before{
    width: 58px;
    height: 57px;
    margin-right: 37px;
}

@media screen and (max-width:768px) {
    aside.line_wrap .line_btn{
        width: 80%;
    }
    aside.line_wrap .line_btn a{
        font-size: 176%;
    }
    aside.line_wrap .line_btn a:before{
        width: 48px;
       height: 47px;
            margin-right: 15px;
    }
}

/*  下層  */

main.photo_under{
    margin: 0 auto 6.9%;
    padding: 5.3% 0 3.4%;
    box-shadow: 0 2px 5px #ddd;
}

main#faq h1.ttl2{
    margin: 0 0 4.2%;
}

main#faq .faq{
    max-width: 1017px;
    margin: 0 auto;
}
main#faq .faq h2.ttl {
    width: 90%;
    max-width: 320px;
    margin: 5.9% 0 5.1%;
    padding: 10px 10px 11px;
    background: #000;
    color: #fff;
    text-align: left;
    font-size: 22px;
}

section.faq_etc{
    margin-top: 4.2%;
    padding: 3.4% 0 3.9%;
    background: #f4f8ff;
}

section.faq_etc h2.ttl {
    margin: 0;
    font-size: 35px;
    font-weight: 500;
    color: #000;
}

section.faq_etc p.faq_txt{
    margin: 2.5% 0 3.7%;
    font-size: 18px;
    text-align: center;
}

.btn_block{
    display: flex;
    justify-content: center;
    column-gap: 50px;
}
.btn_block .btn{
    width: 350px;
}
.btn_block .btn a{
    display: block;
    width: 100%;
    padding: 22px 15px;
    background: #C6B27B;
    border-radius: 50px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    position: relative;
}

.btn_block .btn a:after{
	font-family: "Material Icons";
	content: "\e5e1";
    position: absolute;
    right: 10px;
    font-size: 20px;
}

main.photo_under#faq{
    padding: 5.3% 0 0px;
}


@media screen and (max-width:768px) {
    main#faq .faq h2.ttl{
        max-width: 240px;
        margin: 5.9% 1.5% 5.1%;
        padding: 5px 5px 6px;
        font-size: 160%;
        letter-spacing: 1px;
    }

    section.faq_etc h2.ttl{
        font-size: 200%;
    }

    section.faq_etc p.faq_txt{
        font-size: 150%;
        line-height: 1.6;
    }

    .btn_block{
        display: block;
    }
    .btn_block .btn{
        max-width: 350px;
        margin: 0 auto 4%;
    }
    .btn_block .btn a{
        padding: 15px 10px;
        font-size: 140%;
    }
    .btn_block .btn a:after{
        font-size: 14px;
    }
}


main.photo_under section.gallery{
    max-width: 1020px;
    margin: 3.5% auto 0;
    padding-bottom: 5.2%;
}

@media screen and (max-width:768px) {
    main.photo_under section.gallery{
        width: 90%;
    }
}



section.column .column_block{
    width: 96%;
    max-width: 1070px;
    margin: 3.9% auto;
    display: flex;
    flex-wrap: wrap;
    gap: 39px 63px;
}

section.column .column_block article{
    width: 20.5%;
}

section.column .column_block article h2 {
    margin: 0 0 15px;
    line-height: 1.4;
    font-family: a-otf-ud-shin-go-pr6n, sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    letter-spacing: 0;
}

section.column .column_block article .img_block {
    margin-bottom: 16.2%;
    width: 219px;
    height: 202px;
}
section.column .column_block article .img_block img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

section.column .column_block article time {
    color: #ccc;
}


.pagination__btn--last, .pagination__btn--first, .pagination__btn--next, .pagination__btn--prev, .pagination__item a, .pagination__item--current {
    box-sizing: border-box;
    display: block;
    color: #333;
    text-decoration: none;
    text-align: center;
    background: #FFF;
    border-right: 1px solid #EBEBEB;
    min-width: 2em;
    transition: all .2s;
    margin: 0;
    padding: 0;
}
.pagination__btn--last:hover, .pagination__btn--first:hover, .pagination__btn--next:hover, .pagination__btn--prev:hover, .pagination__item a:hover, .pagination__item--current:hover {
    color: #FFF;
    background: #333;
}
.pagination {
    background: #FFF;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    border-radius: 50px;
    margin: 6.2% auto 1px;
    padding: 0 0.1em;
    border: 1px solid #000;
}

.pagination__pos {
    color: #333;
    margin: 0;
    padding: 10px;
    display: flex;
    align-items: center;
    line-height: 1;
    font-family: tt-commons-pro, sans-serif;
    font-size: 24px;
    order: 2;
}

.pagination__item {
    margin: 0;
}
.pagination__item--current {
    color: #333;
    color: #FFF;
    font-weight: bold;
}

.pagination .pagination__btn--prev {
    order: 1;
    margin-right: 1em;
}
.pagination .pagination__btn--next {
    order: 3;
    border-right: none;
    border-left: 1px solid #EBEBEB;
    margin-left: 1em;
}


@media screen and (max-width:768px) {
    
    section.column .column_block{
        gap: 20px 15px;
    }

    section.column .column_block article{
        width: 48%;
    }

    section.column .column_block article h2{
        font-size: 14px;
    }

    section.column .column_block article .img_block{
        margin-bottom: 6.2%;
        width: 100%;
        height: 180px;
    }

    .pagination__pos{
        font-size: 18px;
    }
}



main#news{
    background: #f4f8ff;
}
main#news section.news{
    box-shadow: none;
}
main#news section.news .news_wrap article p{
    width: 80%;
    margin: 0;
}

main.single section.news{
    padding: 0.1% 0 0.9%;
    background: #fff;
    box-shadow: none;
}

section.news .ttl_wrap{
    display: flex;
}

section.news .ttl_wrap h2 {
    width: 80%;
    margin: 0;
    padding: 0 0 0 3.4%;
    font-size: 18px;
    text-align: left;
    line-height: 1.3;
    font-family: tt-commons-pro, sans-serif;
}

section.news .news_wrap .ttl_wrap{
    margin: 0 0 7.5%;
}

section.news .news_wrap .news_detail{
    width: 97%;
    margin: 5% auto 6.6% !important;
    padding: 5.5% 12.6%;
    background: linear-gradient(0deg,rgba(242, 247, 245, 1) 0%, rgba(229, 241, 251, 1) 100%);
    font-size: 18px;
    border-bottom-left-radius: 0;
}

section.news .back {
    width: 270px;
    margin: 0 auto;
    font-size: 26px;
}
section.news .back a{
    width: 100%;
    margin: 0;
    display: block;
    text-decoration: none;
    border: 1px solid #000;
    font-family: tt-commons-pro, sans-serif;
    border-radius: 50px;
    text-align: center;
}


@media screen and (max-width:768px) {
    section.news .news_wrap .news_detail{
        width: 96%;
        padding: 5.5% 5%;
        font-size: 160%;
    }

    section.news .back a{
        font-size: 80%;
    }
}


main.photo_under#contact{
    margin: 0 auto 3%;
    padding: 5.3% 0 0;
    box-shadow: none;
}

main#contact p.header_txt,
main#contact-conf p.header_txt,
main#contact-fin p.header_txt{
    margin: 5.5% 0 3.8%;
    text-align: center;
    font-size: 18px;
}

main#contact .form_block {
    margin-bottom: 5.6%;
    display: flex;
    justify-content: center;
    column-gap: 55px;
}

main#contact .form_block > div{
    width: 30%;
    max-width: 322px;
    padding: 2.4% 0 1.9%;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    border-radius: 40px;
}

main#contact .form_block > div .img_block{
    width: 86px;
    margin: 0 auto 7%;
}

main#contact .form_block > div h2{
    margin: 0 0 12%;
    font-weight: 600;
    font-size: 23px;
}

main#contact .form_block > div p{
    margin: 0 0 8%;
    font-size: 18px;
    text-align: center;
}

main#contact .form_block .link_btn{
    width: 200px;
    margin: 0 auto;
}
main#contact .form_block .link_btn a{
    display: block;
    width: 100%;
    padding: 8px 10px 10px;
    background: #C6B27B;
    border-radius: 50px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    position: relative;
}

main#contact section#form{
    padding: 3% 1%;
    background: linear-gradient(0deg,rgba(244, 248, 255, 1) 0%, rgba(229, 241, 251, 1) 100%);
}

main#contact section#form .contact_caution {
    max-width: 760px;
    margin: 0 auto 6.5%;
    padding: 26px 22px 26px;
    background: #fff;
}

main#contact section#form .contact_caution p{
    font-size: 16px;
    margin: 0;
    line-height: 1.8;
}

main#contact section#form ul{

}

main#contact section#form ul li{
    margin: 0;
    font-size: 16px;
    text-indent: -1em;
    padding-left: 1em;
    line-height: 1.8;
}

section#form dl {
    max-width: 760px;
    margin: 0 auto;
    display: block;
}

section#form dl dt{
    width: 100%;
    margin-bottom: 26px;
    font-size: 23px;
    font-family: tt-commons-pro, sans-serif;
    letter-spacing: 5px;
    font-weight: 500;
}
section#form dl dt span{
    margin-left: 10px;
    font-size: 18px;
    display: inline-block;
    letter-spacing: 1px;
    line-height: 1;
    color: #a3a3a3;
}

section#form dl dd{
    width: 100%;
    margin-bottom: 5%;
}

section#form input[type="text"],
section#form input[type="mail"],
section#form textarea{
    background: none;
    padding: 16px;
    font-size: 110%;
    border: 1px solid #000;
    border-radius: 50px;
}

section#form textarea{
    height: 200px;
    border-radius: 15px;
}

section#form .input_btn{
    margin: 6.1% auto 0;
}
section#form .btn_submit{
    margin: 0 auto!important;
    padding: 1.9% 12%;
    background: #c6b27b;
    border: none;
    border-radius: 50px;
    font-size: 22px;
    box-shadow: 0px 3px #e9e1cd;
}


main#contact-conf input.btn_back{
    margin: 0 !important;
    border-radius: 55px;
    font-size: 22px;
}
main#contact-conf section#form .btn_submit{
    margin: 0 50px !important;
}

@media screen and (max-width:768px) {
    main#contact p.header_txt,
    main#contact-conf p.header_txt,
    main#contact-fin p.header_txt{
        margin: 5.5% 0 6.8%;
        font-size: 130%;
    }

    main#contact .form_block{
        flex-wrap: wrap;
        gap: 25px 15px;
    }
    main#contact .form_block > div{
        width: 43%;
        border-radius: 20px;
    }
    main#contact .form_block > div .img_block{
        width: 30%;
    }
    main#contact .form_block > div h2{
        margin: 0 0 6%;
        font-size: 180%;
        letter-spacing: 0;
    }
    main#contact .form_block > div p{
        margin: 0 0 5%;
        font-size: 140%;
    }

    main#contact .form_block .link_btn{
        width: 140px;
    }

    main#contact section#form .contact_caution{
        width: 96%;
    }
    main#contact .form_block .link_btn a{
        font-size: 140%;
    }

    main#contact section#form .contact_caution p,
    main#contact section#form ul li{
        font-size: 14px;
    }
    
    section#form dl{
        width: 96%;
    }
    ection#form dl dt{
        margin-bottom: 10px;
        font-size: 180%;
    }
    section#form dl dt span{
        margin-left: 0px;
        font-size: 90%;
    }

    section#form input[type="text"], section#form input[type="mail"], section#form textarea{
            padding: 10px 15px;
        font-size: 160%;
    }

    section#form .btn_submit{
        padding: 4% 22%;
        font-size: 18px;
    }
    
}

main#service p.header_txt{
    margin: 2.7% 0 3.6%;
    text-align: center;
    font-size: 31px;
    font-weight: 600;
    letter-spacing: 2px;
}

main#service .service_block {
    max-width: 1100px;
    margin: 0 auto 12%;
    display: flex;
    justify-content: center;
    gap: 72px 73px;
    flex-wrap: wrap;
}

main#service .service_block > div{
    width: 30%;
    max-width: 308px;
    padding: 5.7% 0 1.6%;
    background: url(../img/photo/service_block_bg.png) no-repeat top center;
    background-size: 100%;
}

main#service .service_block > div .img_block{
    width: 81px;
    margin: 0 auto 8.5%;
}

main#service .service_block > div h2{
    margin: 0 0 4.8%;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 1px;
}

main#service .service_block > div p{
    margin: 0;
    font-size: 18px;
    text-align: center;
    line-height: 1.4;
}

main#service section#reason .reason__wrap h1.ttl2{
    margin: 0 auto 3.4%;
    padding: 17px 10px 19px;
    font-size: 28px;
    letter-spacing: 3.4px;    
    display: block;
    position: relative;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
}

section#reason .reason__block{
    width: 100%;
    max-width: 1140px;
    margin: 0 auto 4.8%;
    padding: 22px 30px 20px;
    background: linear-gradient(0deg,rgba(242, 247, 245, 1) 0%, rgba(229, 241, 251, 1) 100%);
}
section#reason .reason__block .img_block{
    width: 100%;
    margin: 0 auto;
}

section#reason .reason__block .txt_block{
    margin-left: 23px;
    position: relative;
}
section#reason .reason__block .txt_block p.tag{
    margin: 0;
    padding: 0 24px;
    background: #fe97a9;
    font-size: 18px;
    font-family: tt-commons-pro, sans-serif;
    color: #fff;
    display: inline-block;
    position: absolute;
    top: -55px;
    left: 0;
    letter-spacing: 1.5px;
    border-radius: 5px;
}

section#reason .reason__block .txt_block h2{
    margin: 3.7% 0 1.6%;
    font-size: 31px;
    font-weight: 600;
    text-align: left;
    letter-spacing: 1px;
}
section#reason .reason__block .txt_block p.txt{
    margin: 0;
    line-height: 1.5;
    font-size: 18px;
}

section#reason section#menu{
    margin-bottom: 0;
}

@media screen and (max-width:768px) {
    main#service p.header_txt{
        font-size: 150%;
    }

    main#service .service_block{
        gap: 25px 15px;
    }
    main#service .service_block > div{
        padding: 2.5% 0 1.6%;
        background: url(../img/photo/service_block_bg.png) no-repeat center center;
        background-size: cover;
    }
    main#service .service_block > div h2{
        font-size: 140%;
    }
    main#service .service_block > div p{
        font-size: 120%;
    }

    main#service .service_block > div .img_block{
        width: 45px;
    }

    main#service section#reason .reason__wrap{
        padding: 0 15px 30px;

    }
    main#service section#reason .reason__wrap h1.ttl2 {
        font-size: 177%;
        letter-spacing: 1px;
    }

    section#reason .reason__block{
        padding: 27px 0px 20px;
    }

    section#reason .reason__block .img_block{
        width: 90%;
        height: 290px;
    }
    section#reason .reason__block .img_block img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    section#reason .reason__block .txt_block{
        width: 90%;
        margin: 0 auto;
    }

    section#reason .reason__block .txt_block p.tag {
        padding: 0 3.7%;
        font-size: 120%;
        top: -29%;
        left: 10px;
    }
    section#reason .reason__block .txt_block h2{
        margin: 7% 0 3.3%;
        font-size: 160%;
        line-height: 1.1;
    }
    section#reason .reason__block .txt_block p.txt{
        font-size: 120%;
    }

}


section#about{
    margin: 6.4% 0 9.2%;
    padding: 4% 0 0;
    background: url(../img/photo/studio_bg.png) no-repeat top center;
}

section#about picture{
    margin: 0 auto;
    max-width: 1157px;
    display: block;
}

section#staff .staff__block{
    margin: 3.7% auto 9.3%;
    display: flex;
    justify-content: center;
    column-gap: 26px;
}

section#staff .staff__block > div{
    width: 30%;
    max-width: 360px;
    padding: 3.1% 0 1%;
    border: 1px solid #000;
}

section#staff .staff__block > div .img_block{
    width: 182px;
    margin: 0 auto 13.7%;
    border-radius: 100px;
    border: 1px solid #000;
    overflow: hidden;
}

section#staff .staff__block > div .name{
    margin-bottom: 11%;
    display: flex;
    justify-content: center;
    text-align: center;

}
section#staff .staff__block > div .name span{
    min-width: 180px;
    padding: 10px 10px;
    background: #000;
    color: #fff;
    font-family: tt-commons-pro, sans-serif;
    font-size: 26px;
    display: inline-block;
    line-height: 1;
    letter-spacing: 1px;
}

section#staff .staff__block > div .job{
    margin-bottom: 10px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

section#staff .staff__block > div .txt{
    margin: 0;
    padding: 0 4%;
    font-size: 16px;
    line-height: 1.8;
}

main#studio section#flow{
    margin: 0 auto 4.4%;
}

@media screen and (max-width:768px) {
    section#about picture{
        max-width: 664px;
    }

    section#staff .staff__block{
        width: 96%;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 25px 10px;
    }
    section#staff .staff__block > div{
         width: 48%;
    }
    section#staff .staff__block > div .img_block{
        width: 70%;
        margin: 0 auto 10.7%;
    }

    section#staff .staff__block > div .name{
        margin-bottom: 8%;
    }
    section#staff .staff__block > div .name span{
        min-width: 170px;
        padding: 5px 5px;
        font-size: 180%;
    }

    section#staff .staff__block > div .job{
        font-size: 136%;
    }

    section#staff .staff__block > div .txt{
        font-size: 120%;
    }
}