@media screen and (max-width:1440px) {
    #parsonality {
        max-width: 79.167vw;
        margin: 0 11% 100px 11%;
    }
}

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

    /*aboutme*/
    #history {
        font-size: 14px;
        line-height: 1.4;
    }

    #parsonality {
        max-width: 1490px;
        margin: 0 5%;
    }

    #reason .flexbox {
        grid-template-columns: repeat(3, 1fr);
    }

    /*works*/
    #scroll_backcircle p {
        font-size: 10px;
    }

    .info_1_detail {
        width: 47%;
        height: 239px;
    }

    #apparel2 #purpose,
    #english #purpose {
        margin: 0 14% 5.208vw 14%;
    }

}

@media screen and (max-width:1279px) {
    p {
        font-size: 14px;
        line-height: 2;
        letter-spacing: 0.02em;
    }
    
    h5 {
        font-size: 18px;
    }
    #parsonality .flexbox {
        flex-wrap: wrap;
        margin-bottom: 42px;
        justify-content: center;
    }

    #parsonality2.flexbox {
        flex-wrap: wrap-reverse;
    }

    #reason {
        margin: 0 3% 100px 3%;
    }

    #reason .flexbox {
        grid-template-columns: repeat(3, 1fr);
    }

    .bold_32px {
        font-size: 1.4rem;
    }
}

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

    #contact a {
        font-size: 32px;
        margin-bottom: 0;
    }

    #aboutme_2 {
        font-size: 16px;
    }

    #history {
        max-width: none;
        margin: 0 10% 52px 10%;
        display: flex;
        justify-content: center;

        flex-wrap: wrap-reverse;

        font-size: 14px;
        line-height: 1.4;
    }

    #history h4 {
        margin-bottom: 16px;
    }

    #history table th,
    table td {
        display: block;
        padding: 0 0 8px 0;
    }

    #history table th {
        text-align: left;
        padding: 0;
    }

    #history img {
        width: 240px;
        height: auto;
        margin: auto;

        margin-bottom: 32px;
    }

    #skill {
        padding: 0 20px;
        margin: auto;
        margin-bottom: 52px;

        font-weight: 350;
        font-size: 14px;
        line-height: 1.7;
    }

    #skill h4 {
        margin-bottom: 16px;
    }

    #skill .flexbox {
        flex-wrap: wrap;
    }

    #designskill.flexbox {
        justify-content: space-between;
    }

    #designskill p:first-child {
        margin-right: 42px;
    }

    #skill .flexbox .mgn_both,
    .mgn_left {
        margin: 0;
    }

    p#cording {
        text-align: left;
    }
    #reason .flexbox {
        max-width: 600px;
    }
    .reason_box {
        width: 149.29px;
        height: 209px;
        border: 3px solid rgba(72, 72, 72, 0.75);
    }

    .reason_box p {
        font-size: 14px;
    }
}

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

    h1 {
        font-size: 32px;
        line-height: 1.15;
    }

    h2 {
        font-size: 8.533vw;
        line-height: 1.15;

        margin-top: 100px;
        margin-bottom: 52px;
    }

    h3 {
        margin-bottom: 32px;
    }

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

    .h4 {
        font-size: 20px;
        line-height: 1.6;
    }

    h5 {
        font-weight: 500;
        font-size: 16px;
        line-height: 1.4;
    }

    h6 {
        font-weight: 400;
        font-size: 14px;
        line-height: 1.4;
    }

    section {
        margin-bottom: 52px;
    }

    #logo_Mo {
        display: inline-block;
        width: 105px;
        margin: 32px 0 0 20px;
    }

    #logo_Mo img {
        width: 100%;
    }

    /*hamburger*/
    .hamburger {
        display: block;
        position: fixed;
        right: 15px;
        background-image: url("../image/hamburger_back.png");
        height: 66px;
        width: 78px;

        z-index: 100;
    }

    .hamburger span {
        display: inline-block;
        transition: all 0.4s;
        position: absolute;
        left: 21px;
        height: 2px;
        border-radius: 1px;
        background: #ADAAAA;
        width: 33px;
    }

    .hamburger span:nth-child(1) {
        top: 21px;
    }

    .hamburger span:nth-child(2) {
        top: 33px;
    }

    .hamburger span:nth-child(3) {
        top: 45px;
    }

    .hamburger.active {
        background: none;
    }

    .hamburger.active span:nth-child(1) {
        top: 39px;
        left: 10px;
        transform: translateY(-6px) rotate(45deg);
        width: 47px;
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        top: 27px;
        left: 10px;
        transform: translateY(6px) rotate(-45deg);
        width: 47px;
    }

    /*globalmenu*/

    #nav_PC {
        display: none;
    }

    #nav_PC.index {
        display: none;
    }

    #nav_Mo {
        display: block;
        width: 100vw;
        position: fixed;
        top: 0;
        z-index: 50;
    }

    #nav_background {
        padding: 20.8vw 5.333vw;
        width: 100vw;
        height: 100vh;

        background: linear-gradient(157.05deg, #F5F3EA 9.78%, #EAE7DC 83.7%);
    }

    #nav_list {
        font-size: 16px;
        line-height: 1.4;
        color: #475950;
        padding: 42px 20px;

        background: rgba(255, 255, 255, 0.63);
        border-radius: 16px;
    }

    .nav_item {
        font-family: 'Aboreto';
        font-style: normal;
        font-weight: 400;
        font-size: 15px;
        line-height: 1.13;

        border-bottom: 1px solid #D9D9D9;
        padding: 24px 0;
    }

    .nav_item:first-child {
        border-top: 1px solid #d9d9d9;
    }

    #nav_works {
        width: fit-content;
        height: fit-content;
        padding: 0;
        margin: 0;
        margin-left: auto;
    }

    #nav_works li {
        margin-bottom: 16px;
    }

    #nav_works li:last-child {
        margin-bottom: 0;
    }

    #nav_works a {
        font-family: "Yu Gothic",
            "Helvetica Neue",
            Arial,
            "Hiragino Kaku Gothic ProN",
            "Hiragino Sans",
            Meiryo,
            sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 15px;
        line-height: 1.6;
    }

    /*--------globalmenu_mobaile*/
    /*footer*/

    footer {
        padding-top: 24px;
    }

    footer ul {
        line-height: 1;

        display: block;
        flex-wrap: wrap;
    }

    footer p {

        font-weight: 400;
    }

    /*--------footer*/
    /*index*/
    .mv {
        margin: 16px auto 100px auto;
    }

    #mv_back {
        background-image: url("../image/top/main_visual_img_backMo.jpg");
        width: 89.867vw;
        height: 145.867vw;
        position: relative;

        border-radius: 28px;
    }

    #mv_img {
        background-image: url("../image/top/main_visual_imgMo.png");
        width: 89.867vw;
        height: 145.867vw;
        /*width: 337px;
        height: 547px;*/
    }

    #HelloMynameis {
        position: absolute;
        min-width: 70.667vw;
        min-height: 22.4vw;
        left: 35%;
        top: 13.333vw;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }

    #HarukaYamamoto svg#move {
        display: none;
    }

    #HarukaYamamoto {
        background-image: url("../image/top/Haruka\ Yamamoto_Mo.png");
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        width: 102.933vw;
        height: 51.467vw;
        left: 50%;
        top: 15%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }

    #mv_text {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        /*top: 334px;*/
        top: auto;
        bottom: 26%;
    }

    #mv_text h2 {
        display: block;
        white-space: nowrap;
    }

    #mv_text p {
        font-family: 'Aboreto';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 1;

        color: rgba(0, 0, 0, 0.5);
    }

    #scroll {
        display: none;
    }

    /*-----------index_main_visual*/
    /*index_works*/
    #works {
        max-width: none;
        padding: 15px;
        margin: 0;
        margin-bottom: 72px;
    }

    #works_title {
        margin-bottom: 52px;
    }

    #works_title h3 {
        margin-bottom: 32px;
    }

    #works_list {
        display: inline-block;
    }

    .works_contents {
        width: 100%;
        margin-bottom: 24px;

    }

    /*-------index_works*/
    /*index_aboutme*/
    #aboutme {
        margin: 0 20px;
        margin-bottom: 72px;
        max-width: none;
        display: inline-block;
    }

    #aboutme_1 img {
        width: 85%;
        margin: auto;
    }

    #aboutme_2 {
        max-width: none;
        font-size: 16px;
        line-height: 1.6;
        letter-spacing: 0.02em;
    }

    #viewmore {
        margin: 48px 0 0 auto;
    }

    #viewmore_line {
        font-size: 20px;
    }

    #contact p {
        margin: 0;
    }

    /*--------index_aboutme*/

    /*index_contact*/
    #contact {
        margin: 0;
        margin-bottom: 72px;
    }

    #back_to_top_index {
        width: 68px;
        height: 33px;
        margin: auto;
    }

    #contact a {
        font-size: 24px;
    }

    #contact p {
        font-weight: 400;
        font-size: 16px;
        line-height: 1.4x;
    }

    /*--------index_contact*/
    /*-------index*/

    /*aboutme*/
    h2.mv.aboutme {
        margin-bottom: 42px;
    }

    #parsonality {
        padding: 0 20px;
        font-size: 14px;
        margin: 0;
        margin-bottom: 52px;
    }

    .parsonality_title {
        font-size: 18px;
        line-height: 1.77;
    }

    .parsonality_detail {
        margin: auto;
        line-height: 1.6;
    }

    #parsonality1 .parsonality_wrap {
        margin: 0 20px;
    }

    #parsonality2 .parsonality_wrap {
        margin: 0 20px;
    }

    #reason {
        padding: 0 20px;
        margin: 0;
        margin-bottom: 72px;
    }

    #reason_english {
        padding-left: 0px;

        margin-bottom: 36px;
        font-size: 20px;
        line-height: 1.6;
    }

    #reason .flexbox {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 0;
    }

    /*-------aboutme*/

    /*back_to_top*/
    #back_to_top {
        margin-bottom: 24px;
    }

    #back_to_top img {
        width: 68px;
        height: 33px;
    }

    /*----------back_to_top*/
    /*to_works*/
    #to_works {
        margin-bottom: 52px;
    }

    #to_works ul {
        row-gap: 24px;
    }

    #to_works li {
        width: 100%;
    }

    /*-----------to_warks*/

    /*works*/
    .bold_h4 {
        font-size: 20px;
        line-height: 1.9;
        text-align: center;
    }

    .bold_32px {
        font-size: 18px;
        line-height: 1.9;
        text-align: start;
    }

    /*works_keyvisual*/
    #kv {
        margin: 42px auto 52px auto;
        width: fit-content;
    }

    #kv h6 {
        width: fit-content;

        padding: 0 22px;
        margin: 0 0 8px 0;

        color: #FFFFFF;
        background: #484848;
        border-radius: 1000px;

        text-align: center;
    }

    #time {
        display: flex;
        flex-wrap: wrap;


        font-weight: 500;
        font-size: 14px;
        line-height: 1.57;
    }

    #mgn_time {
        margin-right: 42px;
    }

    #kv_image {
        width: 89.333vw;
        /*width:355px;*/
        height: 158.179vw;
        /*height: 593.17px;*/
        margin: 16px 0 32px 0;

        position: relative;

        background-image: url("../image/apparel1/apparel1Mo_fv.jpg");
        border-radius: 28px;

    }

    #scroll_backcircle {
        width: 102px;
        height: 39px;

        background-image: url("../image/scrolldowonMo.png");
        background-repeat: no-repeat;
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        -webkit-transform: translate(-50%);
        -ms-transform: translate(-50%);
        bottom: 0px;
    }

    #scroll_backcircle p {
        font-size: 10px;
        line-height: 1.2;
    }

    /*---------works_kv*/
    /*works_purpose*/
    #purpose {
        width: 90%;
    }

    #apparel2 #purpose,
    #english #purpose {
        margin: auto;
        margin-bottom: 32px;
    }

    #purpose p.flexbox {
        text-align: start;
    }

    /*--------works_purpose*/
    /*works_main*/
    #main {
        padding: 0 5.333vw;
        margin: 0;
        margin-bottom: 72px;
    }

    #main #pc_design {
        width: 94.667vw;
        /*width: 335px;*/
        height: auto;
    }

    /*works_design*/
    #design {
        margin: auto;
        width: 100%;
    }

    #design_1 {
        font-weight: 500;
        font-size: 20px;
        line-height: 1.6;
        letter-spacing: -0.02em;

        margin: 32px auto;
    }

    #design_2 {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 32px;
    }

    #design_3 {
        font-weight: 500;
        font-size: 14px;
        line-height: 1.6;

        margin-bottom: 72px;
    }

    #design_3_detail {
        margin: 0px;
        margin-bottom: 16px;
    }

    #design_3_detail .mgn_left {
        margin-left: 16px;
    }

    /*works_detail*/
    #detail {
        padding: 40px 0 16px 0;
        margin-bottom: 72px;
    }

    #detail p {
        font-weight: 500;
        font-size: 14px;
        line-height: 1.6;
    }

    /*works_info*/
    #info_1 {
        /*max-width: 345px;*/
        margin-bottom: 52px;

        text-align: start;
    }

    #info_1 h5 {
        margin-bottom: 16px;
    }

    #info_1 .detail_wrap p {
        font-size: 12px;
        line-height: 2;
    }

    .info_1_detail {
        width: 154px;
        height: 170.74px;

        line-height: 1.6;
    }

    #info_2_detail {
        width: 89.333vw;
        /*width: 335px;*/
    }

    /*works_mobile*/
    #mobile {
        margin-top: 72px;
        height: 581.4px;
    }

    /*---------works_main*/


    /*apparel2*/
    #kv_image.apparel2 {
        background-image: url("../image/apparel2/apparel2Mo_fv.jpg");
        width: 89.333vw;
        height: 158.179vw;
        /*width: 335px;
        height: 593.17px;*/
    }

    /*--------apparel2*/
    /*audio*/
    #kv_image.audio {
        background-image: url("../image/audio/audioMo_fv.jpg");
    }

    /*------audio*/

    /*english*/
    #english #kv {
        margin: 42px 5% 52px 5%;
    }

    #english #kv_image {
        background-image: url("../image/english/englishMo_fv.jpg");
    }

    #info_1 #title.flexbox_center {
        width: 86.667vw;
        /*width: 325px;*/
        height: 121px;

        text-align: center;
    }

    #allow_school {
        width: 49.533vw;
        /*width: 182px;*/
        padding: 0;
        padding-bottom: 24px;
    }

    #allow_student {
        width: 74.667vw;
        /*width: 280px;*/
        padding: 0;
        padding-bottom: 24px;
    }

    #allow_school::before {
        content: url("../image/allow_left_Mo.png");
    }

    #allow_school::after {
        content: url("../image/allow_right_Mo.png");
    }

    #allow_student::before {
        content: url("../image/allow_left_Mo.png");
        left: -25px;
    }

    #allow_student::after {
        content: url("../image/allow_right_Mo.png");
        right: -25px;
    }

    .detail_wrap .h7 {
        font-size: 14px;
    }

    /*------english*/

    /*seikei*/
    #main.banner {
        padding: 0;
    }

    #kv.banner {
        /*width: 355px;*/
        width: 94.667vw;
    }

    #kv_image.seikei {
        background-image: url("../image/seikei/seikeiMo_fv.jpg");
        background-repeat: no-repeat;
        height: 81.067vw;
        /*height: 304px;*/
    }

    h1.banner {
        font-weight: 400;
        font-size: 32px;
        line-height: 1.25;
        /* または125% */
    }

    .banner #design_1 {
        font-size: 14px;
    }

    #main.banner table {
        width: 100%;
        margin: 0 5%;
        font-weight: 500;
        font-size: 14px;
        line-height: 1.57;
    }
        
    .banner .bold_32px {
        letter-spacing: -0.01em;
    }

    .banner th {
        font-size: 14px;
        width: fit-content;
    }

    .banner td {
        padding-bottom: 72px;
        width: 86.667vw;
        /*width: 325px;*/
        display: block;
    }

    #design_2.banner p {
        font-size: 14px;
    }

    /*--------seikei*/

    /*yoga*/
    #kv_image.yoga {
        background-image: url("../image/yoga/yogaMo_fv.jpg");
        background-repeat: no-repeat;
        background-size: contain;
        width: 92vw;
        height: 58.667vw;
        /*width: 345px;
        height: 220px;*/
    }

    /*------------yoga*/
    /*-----works*/

}

@media screen and (max-width:320px) {
    body {
        font-size: 14px;
    }

    #designskill p:first-child {
        margin-right: 14px;
    }

    section#reason {
        padding: 0;
    }

}