@charset "utf-8";

@media(max-width: 845px) {
    .index-works__flex {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 0;
    }

    .index-works__flex_p {
        width: 100%;
        padding-right: 0;
    }
    .index-works__flex_p p {
        padding-bottom: 2rem;
    }

    .index-works__flex_btn {
        width: 100%;
    }
}

@media(max-width: 768px) {
    /* ハンバーガーメニュー */
    .onoff-btn {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 50%;
    
        background-color: #393831;
        color: #EFEBE0;
        font-size: 1rem;
    
        display: flex;
        justify-content: center;
        align-items: center;
    
        position: fixed;
        top: 2.3rem;
        right: 2rem;
     }
     .global-nav-box {
        width: 100%;
        height: 100%;
        background-color: #393831bb;
        position: fixed;
        top: 0;
        left: 0;
     }
     .onoff-btn {
        z-index: 90;
    }
    .global-nav-box {
        z-index: 80;
    }
    .global-nav__item a:link,
    .global-nav__item a:visited {
        color: #EFEBE0;
    }
    .global-nav {
        flex-direction: column;
        width: 100%;
    }
    .global-nav__item {
        border-bottom: solid 1px #EFEBE0;
        width: 100%;
    }
    .global-nav {
        padding-top: 4.5rem;
        padding-left: 2rem;
    }
    .global-nav__item a {
        font-size: 1em;
    
        display: block;
    
        padding: 1.5em;
    }
    .global-nav__item a:hover {
        text-decoration: none;
    }
    .global-nav__item {
        text-align: left;
        margin-bottom: 1em;
    }
    .global-nav-box {
        left: 100%;
    }
    #menu-switch:checked~.global-nav-box {
        left: 50%;
    }
    .global-nav-box {
        transition: all 0.5s linear;
    }
    
    .global-nav__item::after {
        display: none;
    }
    
    .global-nav-item a {
        padding: 0;
    }
    
    .header-logo {
        margin-bottom: 0;
    }
    /* ハンバーガーメニューここまで */
    .page-header img {
        width:300px;
    }
    .index-about__flex,
    .about-about__flex {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
        padding-bottom: 0;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .index-about__flex img,
    .about-about__flex img {
        min-width: 350px;
        padding-top: 0;
    }
    .index-about__flex_p,
    .about-about__flex_p {
        width: 100%;
        padding-left: 0;
    }
    .index-about__flex_p p {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .index-about__flex_p .viewmore {
        width: 100%;
        padding-right: 0;
    }
    .about-about__flex_p ul {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .about-myprofile__flex_img img,
    .about-skills__flex_img img,
    .contact-contactform__flex_img img {
        min-width: 165px;
    }
    .about-myprofile__flex,
    .about-skills__flex {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
        padding-bottom: 0;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .about-myprofile__flex_img,
    .about-skills__flex_img {
        text-align: center;
        width: 100%;
        padding-top: 0;
        padding-bottom: 4rem;

    }
    .about-myprofile__flex_p {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .flex_list__box_img img {
        min-width: 50px;
    }
    .about-myprofile__flex_list {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .flex_list__box {
        width: 100%;
    }

    .works-website h2 img,
    .works-banner h2 img,
    .works-others h2 img {
        width: 200px;
    }
    
    .contact-contactform__flex {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
        padding-bottom: 0;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .contact-contactform__flex_img {
        text-align: center;
        width: 100%;
    }
    .contact-contactform__flex_p {
        width: 100%;
        padding: 2rem 0;
        justify-content: center;
        align-items: center;
    }
    .contact-box
    .form-dlist {
        flex-direction: column;
        width: 100%;
    }
    
    .form-dlist__term,
    .form-dlist__desc {
        width: 100%;
        padding: 0;
    }
    
    .form-dlist__term {
        margin-bottom: 0.5rem;
    }
    
    .form-dlist__desc {
        margin-bottom: 2rem;
    }
    
    input[type="text"],
    textarea {
        box-sizing: border-box;
    }
    
    input[type="submit"] {
        font-size: inherit;
    }
     .contact-box {
        margin: 0 10%;
     }

     input[type="submit"] {
        width: 80px;
        height: 80px;
        line-height: 80px;
        font-size: 0.75rem;
    }

    .web-azarashi__intro h2 img,
    .web-portfolio__intro h2 img,
    .web-snowfes__intro h2 img,
    .banner-mothersday__intro h2 img,
    .banner-fathersday__intro h2 img,
    .banner-fathersday__intro h2 img,
    .banner-summersale__intro h2 img,
    .banner-wintersale__intro h2 img,
    .banner-blackfriday__intro h2 img,
    .others-italian__intro h2 img,
    .others-businesscard__intro h2 img {
        width: 200px;
        justify-content: center;
        align-items: center;
    }

    .banner-mothersday__flex,
    .banner-fathersday__flex,
    .banner-summersale__flex,
    .banner-wintersale__flex,
    .banner-blackfriday__flex {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .banner-mothersday__img img,
    .banner-fathersday__img img,
    .banner-summersale__img img,
    .banner-wintersale__img img,
    .banner-blackfriday__img img {
        min-width: 250px;
    }
    .banner-mothersday__img,
    .banner-fathersday__img,
    .banner-summersale__img,
    .banner-wintersale__img,
    .banner-blackfriday__img {
        text-align: center;
        width: 100%;
    }
    .banner-mothersday__flex_dl,
    .banner-fathersday__flex_dl,
    .banner-summersale__flex_dl,
    .banner-wintersale__flex_dl,
    .banner-blackfriday__flex_dl {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .index-contact__btn {
        width: 250px;
        height: 71.5px;
        line-height: 71.5px;
    }
    .index-contact__btn a:active {
        width: 250px;
        height: 71.5px;
        line-height: 67.5px;
    }
    .index-contact__btn a:hover {
        width: 250px;
        height: 71.5px;
        line-height: 67.5px;
    }
        
    
    .index-contact__btn a {
        font-size: 0.875rem;
    }
    


}

@media(max-width: 619px) {
.prev-btn,
.next-btn {
    width: 67px;
    height: 67px;
    line-height: 67px;
}
.allview-btn {
    width: 67px;
    height: 67px;
    line-height: 17px;
}
}

@media(max-width: 579px) {
    .index-contact h2 {
        text-align: center;
    }
    .works-website,
    .works-banner,
    .works-others {
        text-align: center;
    }

    .web-azarashi__intro,
    .web-portfolio__intro,
    .web-snowfes__intro,
    .banner-mothersday__intro,
    .banner-fathersday__intro,
    .banner-fathersday__intro,
    .banner-summersale__intro,
    .banner-wintersale__intro,
    .banner-blackfriday__intro,
    .others-italian__intro,
    .others-businesscard__intro {
        text-align: center;
    }

}