@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,800;0,900&display=swap');
:root{
    --orangecolor: #ff701e;
    --graycolor: #E0E0E0;
}
*{
    /* border: solid 1px red; */
    /* transition: .2s; */
}
body{
    font-family: Helvetica, Arial, sans-serif;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
　ここから各CSS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 /*ヘッダーここから*/
header{
    width: 100%;
    height: auto;
    display: flex;
    position: fixed;
    top: 0;
    background-color: rgba(255,255,255,0.5);
    z-index: 999;
}
header a:hover{
    opacity: 0.5;
}
header img{
    width: 15vw;
    height: auto;
    margin: 1vw;
    object-fit: contain;
}
header nav{
    margin: 0 0 0 auto;
}
header nav ul{
    display: flex;
    align-items: center;
}
header nav li{
    list-style: none;
    margin-left: 5vw;
    font-size: 2vw;
}
header nav ul .border{
    padding-bottom: 5px;
    position: relative;
}
header nav ul .border::before{
    background: var(--orangecolor);
    content: '';
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: 0;
    margin: auto;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: transform .3s;
}
header nav ul .border:hover::before{
    transform-origin: left top;
    transform: scale(1, 1);
}
header nav li a{
    text-decoration: none;
    color: black;
}
header nav .contact a{
    background-color: black;
    padding:10% 5vw;
    color: white;
    transition: .2s;
}
header nav li a:hover{
    opacity: 0.5;
}
header nav .contact a:hover{
    background-color: var(--orangecolor);
    opacity: 100;
    color: black;
}
header nav ul .naw{
    padding-bottom: 5px;
}
header nav ul .naw a{
    color: var(--orangecolor);
}
/*ヘッダーここまで*/

/*ローディング*/
#loader_wrap {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    top: 0;
    background: #fff;
    z-index: 99999;
    }    
    .loader {
        width: 10vw;
        height: 40vw;
        background: url("../img/loading.png") no-repeat;
        background-size: 100%;
        opacity: 0;
        animation: blink 1.5s infinite linear;
    }
    @keyframes blink {
        50% {
        opacity: 1;
        }
        }
        .loaded {
        opacity: 0;
        visibility: hidden;
        }

/*ホームーメインここから*/
.home-main{
    margin-top: 8%;
}
.home-main .rogo img{
    width: 20%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.home-main .rogo{
    margin-bottom: 0;
}
#eumWhdnveMr1{
    width: 40vw;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.home-main .scroll{
    text-align: center;
    font-size: 2vw;
    color: #707070;
    margin-bottom: 3vw;
    margin-top: 0.1vw;
}
.home-main .solid{
    width: 5vw;
    height: auto;
    border: #707070 solid 0.5px;
    transform: rotate(90deg);
    margin: 0 auto;
}
/*#h2で見出し装飾は一括設定*/
#h2{
    text-align: center;
    margin-top: 10vw;
}
#h2 .midasi{
    font-size: 4vw;
    font-weight: bold;
    margin: 0;
}
#h2 .komidasi{
    font-size: 1vw;
    margin: 0;
}
/*パンくず*/
#pan{
    margin-top: 10vw;
    font-size: 1.5vw;
}
#pan ol{
    display: flex;
    list-style: none;
    padding-left: 0;
    margin-left: 10%;
}
#pan li::after{
    content: ">";
    margin: 0 1vw;
}
#pan li:last-child::after{
    content: none;
}
#pan li a{
    text-decoration: none;
    color: #707070;
}
#pan li a:hover{
    opacity: 0.5;
}
/*moreのボタン一括設定*/
#more-button{
    text-align: right;
    margin: auto 10vw;
}
#more-button a{
    padding: 1% 7%;
    background-color: black;
    border-radius: 100vh;
    text-decoration: none;
    color: white;
    font-size: 2vw;
    transition: .3s;
}
#more-button a:hover{
    background-color: var(--orangecolor);
    color: black;
}
/*ホーム_コンセプト*/
.home-main .concept{
    display: flex;
    justify-content: center;
    align-items: center;
}
.home-main .concept #ewla8VnOsIu1{
    width: 23vw;
    height: auto;
    padding-top: 9vw;
}
.home-main .concept .concept-float{
    margin-left: 5%;
    text-align: left;
    margin-top: 8vh;
}
.home-main .concept .concept-float h3{
    font-size: 3vw;
    font-weight: lighter;
}
.home-main .concept .concept-float p{
    font-size: 1.5vw;
    line-height: 160%;
}
/*ホーム_オレンジ背景の説明のところ*/
.home-main .explanation{
    display: flex;
    background-color: var(--orangecolor);
    color: white;
    padding: 10% 5%;
    margin: 20% 0;
    justify-content: space-between;
}
.home-main .explanation h3{
    font-size: 3vw;
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
}
.home-main .explanation p{
    font-size: 1.5vw;
    line-height: 160%;
    text-align: left;
    width: 80%;
}
.home-main .explanation #ed2GxkVJvi01,
.home-main .explanation #ekhM3ylunap1,
.home-main .explanation #eeSrqfERGYZ1{
    width: 20vw;
    height: auto;
}
.home-main .explanation .web{
    text-align: center;
    flex: 1;
}
.home-main .explanation .design{
    text-align: center;
    flex: 1;
}
.home-main .explanation .illust{
    text-align: center;
    flex: 1;
}
.home-main .explanation .illust p{
    margin: 0 auto;
    line-height: 1.4;
}
.home-main .explanation .design p{
    margin: 0 auto;
    line-height: 1.4;
}
.home-main .explanation .web p{
    margin: 0 auto;
    line-height: 1.4;
}
/*ホーム_ギャラリー*/
.content {
    width: 25vw;
    height: auto;
    margin-left: 1vw;
}
.content img{
    width: 25vw;
    height: auto;
}
.slideshow {
    display: flex;
    padding: 0;
    animation: loop-slide 20s infinite linear 1s both;
}
.slideshow li{
    list-style: none;
}
.wrap{
    display: flex;
}
.wrap {
    display: flex;
    align-items: center;
    height: 25vw;
    overflow: hidden;
    margin: 6% 6%;
}
@keyframes loop-slide{
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-100%);
    }
}
/*ホーム_ニュース*/
.home-main .news dl{
    margin: 3% 20vw;
    text-align: center;
}
.home-main .news dt{
    color: #707070;
    font-size: 1.5vw;
    margin: 1.5vw auto 1vw 0;
    text-align: left;
}
.home-main .news dd{
    font-size: 2vw;
    border-bottom: 1px solid;
    text-align: left;
}
.home-main .news dl a{
    text-decoration: none;
    color: black;
}
.home-main .news dl a:hover{
    opacity: 0.5;
}
.home-main #more-button{
    margin-bottom: 15vw;
}
/*ホーム_ブログ*/
.home-main .blog-flex{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 10% 10%;
    text-align: center;
}
.home-main .blog-flex .note{
    margin-right: 5vw;
}
.home-main .blog-flex img{
    width: 100%;
    height: auto;
}
.home-main .blog-flex span{
    display: block;
    font-size: 1.5vw;
    color: #707070;
    text-align: left;
}
.home-main .blog-flex a{
    text-decoration: none;
}
.home-main .blog-flex a:hover{
    opacity: 0.7;
}
.home-main .blog-flex p{
    margin-top: 1px;
    color: black;
    font-size: 2vw;
    text-align: left;
}

/*ホーム_自己紹介*/
.home-main .home-about{
    background-color: #E0E0E0;
    margin: 10vw 15%;
    padding-bottom: 3vw;
}
.home-main .home-about .flex{
    display: flex;
    justify-content: space-between;
    margin: 0 3vw;
}
.home-main .home-about .ningen img{
    width: 30vw;
    height: auto;
}
.home-main .home-about .ninjin{
    width: 30vw;
}
.home-main .home-about .ninjin img{
    width: 25vw;
    height: auto;
    margin: 2vw 0;
}
.home-main .home-about .ningen p,
.home-main .home-about .ninjin p{
    font-size: 1.5vw;
}
.home-main .home-about .cross{
    display: inline-block;
    color: #707070;
    line-height: 1;
    width: 1vw;
    height: 7vw;
    transform: rotate(45deg);
    background: currentColor;
    margin-top: 8vw;
    position: relative;
}
.home-main .home-about .cross::before{
    width: 100%;
    height: 100%;
    transform: rotate(90deg);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: inherit;
}
.home-about #more-button{
    margin: 3vw;
}
/*ホーム_メインここまで*/

/*ギャラリーページここから*/
.gallery-main .all{
    margin: 3vw 10%;
}
.gallery-main ul{
    display: flex;
    margin-top: 7vw;
    margin-bottom: 5vw;
    justify-content: center;
}
.gallery-main li{
    list-style: none;
    border-left: #707070 1px solid;
    padding-left: 3%;
    padding-right: 3%;
    font-size: 2vw;
}
.gallery-main li .scroll{
    width: 1vw;
    height: 1vw;
    border-top: black solid 1px;
    border-right: black solid 1px;
    display: inline-block;
    transform: rotate(135deg);
    margin-left: 1vw;
}
html{
    scroll-behavior: smooth;
}
.gallery-main li a{
    text-decoration: none;
    color: black;
}
.gallery-main li a:hover{
    color: var(--orangecolor);
}
.gallery-main li:last-child{
    border-right: #707070 1px solid;
}
.gallery-main .gallery-midasi{
    border-bottom: black 1px solid;
    padding-left: 1vw;
    font-size: 2.5vw;
}
.gallery-main .web,
.gallery-main .graphic,
.gallery-main .illustration,
.gallery-main .others{
    margin-bottom: 5vw;
}
.gallery-main .all .web-grid,
.gallery-main .all .graphic-grid,
.gallery-main .all .illustration-grid,
.gallery-main .all .others-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    font-size: 1.5vw;
    text-align: center;
}
.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: 80%;
    height: auto;
}
.gallery-main .all .web-grid a,
.gallery-main .all .graphic-grid a,
.gallery-main .all .illustration-grid a,
.gallery-main .all .others-grid a{
    text-decoration: none;
    color: black;
}
.gallery-main .all .web-grid a:hover,
.gallery-main .all .graphic-grid a:hover,
.gallery-main .all .illustration-grid a:hover,
.gallery-main .all .others-grid a:hover{
    opacity: 0.5;
}
.top-scroll{
    font-size: 1.5vw;
    color: black;
    text-decoration: none;
}
.gallery-main .all .right{
    text-align: right;
    margin-top: 5vw;
}
.top-scroll .top{
    width: 1vw;
    height: 1vw;
    border-top: black solid 1px;
    border-right: black solid 1px;
    display: inline-block;
    transform: rotate(-45deg);
    margin-left: 1vw;
}
.top-scroll:hover{
    opacity: 0.5;
}
/*ギャラリー子ページ*/
.sub-gallery-main #h2{
    margin-top: 0;
}
.gallery-all{
    margin-top: 4%;
    margin-bottom: 8%;
    font-size: 1.5vw;
    line-height: 160%;
}
.sub-gallery-main #more-button{
    margin-top: 5vw;
}
.gallery-all p img{
    display: block;
    margin: 0 auto;
}
.gallery-all .style{
    /* width: fit-content; */
    width: 70%;
    margin: 0 auto;
    font-size: 2vw;
    line-height: 150%;
}
.gallery-all .style a{
    color: #FF6600;
}
.gallery-all .style a:hover{
    opacity: 0.5;
}
.gallery-all img{
    width: 70%;
}
/*バックボタン一括*/
.back{
    text-align: center;
    margin: 10vw auto;
}
.back a{
    text-decoration: none;
    color: #707070;
    padding-bottom: 0.5vw;
    font-size: 2vw;
}
.back a:hover{
    opacity: 0.5;
}
.back #_x32_{
    width: 2vw;
    transform: rotate(-90deg);
}
/*ギャラリーページここまで*/

/*ブログページここから*/
.blog-main .blog-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 3vw 10%;
}
.blog-main .blog-grid .target span{
    font-size: 1.5vw;
    color: #707070;
    padding-left: 4%;
}
.blog-main .blog-grid .target p{
    font-size: 1.7vw;
    color: black;
    margin-top: 1vw;
    width: 80%;
    padding-left: 4%;
}
.blog-main .blog-grid .target a{
    text-decoration: none;
}
.blog-main .blog-grid .target .zoom-in{
    overflow: hidden;
    margin: 0;
    padding: 0;
    max-width: 90%;
}
.blog-main .blog-grid .target img{
    width: 100%;
    /* transform: scale(1);
    transition: .3s ease-in-out; */
}
/* .blog-main .blog-grid a:hover .target img{
    transform: scale(1.3);
} */
.blog-main .blog-grid .target img{
    transition: .2s ease-in-out;
}
.blog-main .blog-grid .target img:hover{
    transform: scale(1.1);
}
.blog-main ol{
    list-style: none;
}
.blog-main .blog-grid{
    padding: 0;
}
[value="All"]:checked ~ .targets [data-category] {
    display: block;
}
[value="blog"]:checked ~ .targets .target:not([data-category~="blog"]), 
[value="web"]:checked ~ .targets .target:not([data-category~="web"]), 
[value="graphic"]:checked ~ .targets .target:not([data-category~="graphic"]), 
[value="illust"]:checked ~ .targets .target:not([data-category~="illust"]), 
[value="photo"]:checked ~ .targets .target:not([data-category~="photo"]) {
    display: none;
}
input[type="radio"]{
    display: none;
}
.blog-main .filters{
    text-align: center;
    font-size: 2.5vw;
    padding: 0;
}
.blog-main .filters *{
    display: inline-block;
}
.blog-main .filters label{
    padding: 1vw;
    cursor: pointer;
}
.blog-main .filters label:hover{
    background: #333;
    color: #fff;
}
[value="All"]:checked ~ .filters [for="All"], 
[value="Blue"]:checked ~ .filters [for="Blue"], 
[value="Green"]:checked ~ .filters [for="Green"], 
[value="Red"]:checked ~ .filters [for="Red"], 
[value="Square"]:checked ~ .filters [for="Square"], 
[value="Circle"]:checked ~ .filters [for="Circle"] {
    background: #333;
    color: #fff;
}
/* .blog-main .target:hover{
    opacity: 0.5;
} */
/*ブログページここまで*/

/*自己紹介ページここから*/
.about-main .about-flex{
    display: flex;
    margin: 1vw 7%;
}
.about-main .about-ningen{
    width: 50%;
}
.about-main .about-ningen #eCgRSPpOT8o1{
    width: 90%;
}
.about-main .about-ningen .big,
.about-main .about-ninjin .big{
    font-weight: bold;
    font-size: 5vw;
    text-align: right;
    margin: 0;
}
.about-main .about-ningen .small,
.about-main .about-ninjin .small{
    margin: 0;
    font-size: 1.5vw;
    text-align: right;
}
.about-main .about-ninjin{
    width: 50%;
    padding-top: 2vw;
    margin-right: 1.5vw;
}
.about-main .about-ninjin #eiYzSqjCRoD1{
    width: 80%;
    padding-left: 5vw;
}
.about-main .my{
    margin: 1vw 10% 12vw 15%;
}
.about-main .my p,
.about-main .my li{
    font-size: 2vw;
    line-height: 1.5em;
}
.about-main .my ul{
    padding-left: 2vw;
}
#h2 .ningen-midashi{
    text-align: left;
    position: relative;
    display: block;
}
#h2 .ningen-midashi::before{
    content: "ツチダ";
    color: #707070;
    display: block;
    position: absolute;
    font-size: 5vw;
    opacity: 0.3;
    top: 2.5vw;
    left: 4vw;
}
/*自己紹介ページここまで*/

/*ニュースページここから*/
.news-main dl{
    display: block;
    margin: 3vw 20vw 10vw 20vw;
}
.news-main dt{
    margin-left: 2vw;
    border-bottom: black solid 1px;
}
.news-main dt .day{
    color: #707070;
    font-size: 1.5vw;
    margin-bottom: 0;
}
.news-main dt .title{
    margin-top: 0;
    margin-bottom: 0;
    font-size: 2vw;
}
.news-main dt a{
    color: black;
    text-decoration: none;
}
.news-main dt .title:hover{
    color: #FF6600;
}
.news-main dd{
    font-size: 1.5vw;
    /* border-bottom: 0.1vw black solid; */
    /* margin-bottom: 5vw; */
    margin-top: 1vw;
    line-height: 1.5em;
}
/*ニュース子ページ*/
.sub-news-main #h2{
    margin-top: 0;
}
#sub-news{
    margin: 0 20%;
}
#sub-news h1{
    font-size: 2vw;
    margin-top: 5%;
    border-bottom: #707070 1px solid;
}
#sub-news p{
    margin-top: 4%;
    margin-bottom: 8%;
    font-size: 1.5vw;
    line-height: 160%;
}
/*ニュースページここまで*/

/*問合せページここから*/
.contact-main .contact-content{
    display: block;
    width: 50%;
    height: auto;
    font-size: 1.5vw;
    margin: 5vw auto 5vw auto;
    line-height: 140%;

}
.contact-main #form dl{
    width: fit-content;
    margin: auto;
}
.contact-main dt{
    font-size: 1.5vw;
    margin-top: 2vw;
}
.contact-main dt .required{
    color: #FF6600;
}
.contact-main dd{
    margin-top: 1vw;
}
.contact-main dd input{
    width: 30vw;
    font-size: 1.5vw;
}
.contact-main dd textarea{
    width: 30vw;
    height: 15vw;
    font-size: 1.5vw;
}
.contact-main #form_submit{
    background-color: black;
    color: white;
    display: block;
    border: none;
    padding: 1vw 4vw;
    border-radius: 100vh;
    width: fit-content;
    margin: 5vw auto 10vw auto;
    font-size: 1.5vw;
}
#form_submit:hover{
    background-color: #FF6600;
    cursor: pointer;
}
/*サンクスページ*/
.thanks-main .thanks{
    font-size: 2vw;
    text-align: center;
    margin-top: 5vw;
    margin-bottom: 10vw;
}
.thanks-main #h2 .midasi{
    margin-top: 30vw;
}
/*問合せページここまで*/

/*フェードアニメーション（jsと連動）*/
/* .js-scroll {
    opacity: 0;
    transition-duration: 500ms;
    transition-property: opacity, transform;
}
.is-animated {
    transform: translate(0, 50px);
} */

/*右側の固定文字*/
.right-navi{
    width: 50px;
    position: fixed;
    z-index: 100;
    right: 1%;
    top: 13%;
}
.right-navi p{
    font-size: 4vw;
    font-weight: bold;
    transform: rotate(90deg)
}
/*左側の固定インスタリンク*/
.left-navi{
    width: 5vw;
    position: fixed;
    z-index: 100;
    left: 1%;
    top: 30%;
}
.left-navi img{
    width: 100%;
    height: auto;
    display: flex;
    margin-bottom: 10px;
}
.left-navi a:hover{
    opacity: 0.5;
}

/*フッターここから*/
footer{
    width: 100%;
    position: relative;
    height: fit-content;
}
footer .insta {
    display: flex;
    position: absolute;
    right: 5%;
}
footer .insta img{
    width: 3%;
}
footer img{
    width: 18%;
    object-fit: contain;
}
footer a:hover{
    opacity: 0.5;
}
footer .footer-flex{
    display: flex;
    position: absolute;
    z-index: 100;
    bottom: 2rem;
    left: 1%;
}
.footer-flex ul{
    display: flex;
    list-style: none;
}
.footer-flex li a{
    text-decoration: none;
    margin-left: 3vw;
    color: white;
    font-size: 2vw;
}
.footer-flex li a:hover{
    opacity: 0.5;
}
footer .small{
    position: absolute;
    bottom: .5rem;
    width: 100%;
    text-align: center;
    /* right: 0; */
    /* left: 0; */
    margin: 0 auto;
    z-index: 100;
    color: white;
    font-size: 15px;
    /* left: 40vw; */
}
footer #eGQ3YKTUeM51{
    bottom: 0;
    z-index: 0;
}
/*フッターここまで*/