@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,800;0,900&display=swap');

@media screen and (min-width:428px) {
    .hamburger{
        display: none;
    }
}
@media screen and (max-width:428px) {
    /*ハンバーガー*/
    header .pc-menu,
    #menu-btn-check{
        display: none;
    }
    header .hamburger .menu-btn{
        position: fixed;
        top: 0;
        right: 0;
        display: flex;
        height: 13vw;
        width: 13vw;
        justify-content: center;
        align-items: center;
        z-index: 90;
        background-color: black;
        }
    header .hamburger .menu-btn span,
    header .hamburger .menu-btn span::before,
    header .hamburger .menu-btn span::after{
        content: "";
        display: block;
        height: 0.5vw;
        width: 6vw;
        border-radius: 3px;
        background-color: #ffffff;
        position: absolute;
        }
    header .hamburger .menu-btn span::before{
        bottom: 1.5vw;
    }
    header .hamburger .menu-btn span::after{
        top: 1.5vw;
    }
    #menu-btn-check:checked ~ .menu-btn span{
        background-color: rgba(255, 255, 255, 0);
    }
    #menu-btn-check:checked ~ .menu-btn span::before{
        bottom: 0;
        transform: rotate(45deg);
    }
    #menu-btn-check:checked ~ .menu-btn span::after{
        top: 0;
        transform: rotate(-45deg);
    }
    .hamburger .sp-menu{
        width: 80%;
        height: 80%;
        position: fixed;
        top: 0;
        left: 100%;
        z-index: 80;
        background-color: #E0E0E0;
        transition: all 0.5s;
        font-size: 8vw;
        font-weight: bold;
    }
    #menu-btn-check:checked ~ .sp-menu{
        left: 20%;
    }
    .hamburger .sp-menu ul{
        padding-top: 5vh;
    }
    .hamburger .sp-menu li{
        border-bottom: solid 1px #FF6600;
        list-style: none;
        margin-bottom: 3vw;
    }
    .hamburger .sp-menu .sp-logo{
        border: none;
    }
    .hamburger .sp-menu .contact{
        border: none;
        margin-top: 10vw;
    }
    .hamburger .sp-menu .contact a{
        background-color: black;
        padding: 3vw 10vw;
        color: #ffffff;
    }
    .hamburger .sp-menu .sp-logo img{
        width: 50vw;
    }
    .hamburger .sp-menu li a{
        text-decoration: none;
        color: black;
    }
    .hamburger .sp-menu .naw a{
        color: #FF6600;
    }
    .hamburger .sp-menu li a:hover{
        opacity: 100;
    }
    .hamburger .sp-menu li a:active{
        opacity: 0.5;
    }
    /*トップページ*/
    /*右側のとこ*/
    .right-navi{
        width: 8vw;
        right: 0.1vw;
        top: 30vw;
    }
    .right-navi p{
        font-size: 8vw;
    }
    /*左側のとこ*/
    .left-navi{
        width: 9vw;
    }
    /*#h2で見出し装飾は一括設定*/
    #h2 .midasi{
        font-size: 10vw;
    }
    #h2 .komidasi{
        font-size: 4vw;
    }
    /*パンくず*/
    #pan{
        font-size: 3vw;
    }
    /*moreのボタン一括設定*/
    #more-button a{
        font-size: 5vw;
        padding-left: 7vw;
        padding-right: 7vw;
    }
        
    header img{
        display: none;
    }
    .home-main .rogo img{
        width: 50vw;
    }
    #eumWhdnveMr1{
        width: 70vw;
    }
    .home-main .scroll,
    .home-main .solid{
        display: none;
    }
    /*ホーム_コンセプト*/
    .home-main .concept{
        display: block;
        text-align: center;
    }
    .home-main .concept #ewla8VnOsIu1{
        width: 50vw;
        height: auto;
    }
    .home-main .concept .concept-float{
        text-align: center;
        margin-top: 0;
    }
    .home-main .concept .concept-float h3{
        font-size: 7vw;
        margin-top: 5vw;
        margin-bottom: 5vw;
    }
    .home-main .concept .concept-float p{
        font-size: 4vw;
        text-align: left;
        width: fit-content;
        margin: 0 auto;
        width: 70%;
    }
    /*ホーム_オレンジ背景の説明のところ*/
    .home-main .explanation{
        display: block;
    }
    .home-main .design,
    .home-main .web,
    .home-main .illust{
        /* display: flex; */
        width: fit-content;
        margin: auto;
    }
    .home-main .design{
        margin-top: 2vw;
        margin-bottom: 2vw;
    }
    .home-main .web #ed2GxkVJvi01,
    .home-main .design #ekhM3ylunap1,
    .home-main .illust #eeSrqfERGYZ1{
        width: 55vw;
    }
    .home-main .web p,
    .home-main .design p,
    .home-main .illust p{
        width: 70%;
        font-size: 4vw;
    }
    .home-main .web div,
    .home-main .design div,
    .home-main .illust div{
        margin: 0 3vw;
    }
    .home-main .design h3,
    .home-main .web h3,
    .home-main .illust h3{
        font-size: 10vw;
        margin-bottom: 2vw;
        margin-top: 2vw;
    }
    .home-main .design{
        flex-direction: row-reverse;
    }
    /*ホーム_ギャラリー*/
    .content {
        width: 50vw;
        height: auto;
    }
    .content img{
        width: 50vw;
        height: auto;
    }
    .wrap{
        height: 50vw;
        margin-left: 0;
        margin-right: 0;
    }
    /*ホーム_ニュース*/
    .home-main .news dl{
        margin: 15vw 10vw;
    }
    .home-main .news dt{
        font-size: 4vw;
        padding-left: 5vw;
    }
    .home-main .news dd{
        font-size: 4vw;
    }
    /*ホーム_ブログ*/
    .home-main .blog-flex{
        grid-template-columns: 1fr;
        margin: 20% 20%;
    }
    .home-main .blog-flex .note{
        margin-bottom: 5vw;
    }
    .home-main .blog-flex img{
        width: 100%;
        height: auto;
    }
    .home-main .blog-flex p{
        font-size: 4vw;
    }
    .home-main .blog-flex span{
        font-size: 3vw;
    }
    .home-main .blog-flex .note{
        margin-right: 0;
    }
    
    /*ホーム_自己紹介*/
    .home-main .home-about .flex{
        display: block;
    }
    .home-main .home-about .cross{
        height: 15vw;
    }
    .home-main .home-about .span-center{
        width: fit-content;
        margin: auto;
    }
    .home-main .home-about .ningen img{
        width: 50vw;
    }
    .home-main .home-about .ningen p,
.home-main .home-about .ninjin p{
    font-size: 4vw;
}
.home-main .home-about .ninjin img{
    width: 40vw;
}
.home-main .home-about .ninjin{
    margin-bottom: 10vw;
    width: 100%;
}
.home-main .home-about .ningen{
    padding-top: 5%;
}
.home-about #more-button{
    margin-bottom: 5vw;
}
footer nav{
    display: none;
}
footer .footer-flex img{
    width: 30vw;
}

/*ギャラリーページ*/
.gallery-main li a{
    font-size: 4vw;
    display: flex;
    flex-flow: column;
}
.gallery-main li .scroll{
    margin: auto;
}
.gallery-main ul{
    padding: 0;
}
.web .right .top-scroll,
.graphic .right .top-scroll,
.illustration .right .top-scroll,
.others .right .top-scroll{
    font-size: 4vw;
}
.top-scroll .top{
    width: 2vw;
    height: 2vw;
}
.gallery-main .all .web-grid,
.gallery-main .all .graphic-grid,
.gallery-main .all .illustration-grid,
.gallery-main .all .others-grid{
    grid-template-columns: 1fr;
    font-size: 4vw;
}
.gallery-main .all .gallery-midasi{
    font-size: 5.5vw;
}
.gallery-main .all .web-grid img,
.gallery-main .all .graphic-grid img,
.gallery-main .all .illustration-grid img,
.gallery-main .all .others-grid img{
    width: 90%;
    height: auto;
}
.sub-gallery-main #h2 .midasi{
    font-size: 6vw;
    margin: 8vw auto;
}
.gallery-all .style{
    font-size: 4vw;
}
.sub-gallery-main .gallery-all #more-button{
    margin-top: 8vw;
    margin-bottom: 8vw;
}
.back a{
    font-size: 4vw;
}
.back #_x32_{
    width: 4vw;
    height: 4vw;
}

/*ブログページ*/
.blog-main .blog-grid{
    grid-template-columns: 1fr 1fr;
    margin: 3vw 10% 3vw 15%;
}
.blog-main .blog-grid .target span{
    font-size: 3vw;
}
.blog-main .blog-grid .target p{
    font-size: 4vw;
}
.blog-main .blog-grid .target img{
    transform: none;
    transition: none;
}
.blog-main .blog-grid a:hover img{
    transform: none;
}
.blog-main .blog-grid a:active{
    opacity: 0.5;
}
.blog-main .blog-grid .target p{
    margin-top: 0;
}
.blog-main .filters{
    font-size: 4vw;
}
/*自己紹介ページ*/
.about-main .about-flex{
    display: block;
}
.about-main .about-ningen{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.about-main .about-ningen .big,
.about-main .about-ninjin .big{
    font-size: 10vw;
}
.about-main .about-ningen .small,
.about-main .about-ninjin .small{
    font-size: 3vw;
}
.about-main .about-ninjin{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
#h2 .ningen-midashi{
    font-size: 8vw;
}
.about-main .my p,
.about-main .my li{
    font-size: 4vw;
}
#h2 .ningen-midashi::before{
    font-size: 8vw;
    top: 5vw;
}
/*ニュース*/
.news-main dt .day{
    font-size: 3vw;
}
.news-main dt .title{
    font-size: 4vw;
}
.news-main dt{
    margin-left: auto;
    margin-right: auto;
}
#sub-news h1{
    font-size: 4vw;
    margin-top: 8vw;
}
#sub-news p{
    font-size: 4vw;
}
/*サンクス*/
.thanks-main #h2 .midasi{
    font-size: 6.5vw;
    margin-top: 30vw;
}
.thanks-main .thanks{
    font-size: 4vw;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}
/*問合せ*/
.contact-main .contact-content{
    font-size: 4vw;
    width: 70%;
}
.contact-main dt{
    font-size: 4vw;
    margin-top: 5vw;
}
.contact-main dd{
    margin-left: 3vw;
}
.contact-main dd input{
    font-size: 4vw;
    width: 50vw;
}
.contact-main dd textarea{
    width: 50vw;
    height: 40vw;
}
.contact-main #form_submit{
    font-size: 4vw;
    padding: 2.5vw 15vw;
}

footer .small{
    font-size: 3vw;
}
}