/*common
----------------------*/
.pagename{

    font-size: 8rem;
    text-align: center;
    margin-top: 150px;
    padding-top: 4%;
    /*
    position: relative;
    transform: translateX(-50%);
    left: 50%;
    */
}
@media screen and (max-width: 769px) {
    .pagename{
        font-size: 4rem;
        margin-top: 80px;
    }
}

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

.works-main{
    
    background-image: url(../mytheme_v2/img/capybara_pc_removebg.png);
    background-color: rgba(255,255,255,0.9);
    background-blend-mode: lighten;
    background-attachment: fixed;/*背景画像の固定*/
    background-size: 100vh;
    background-position: center;
    display: block;
}
.works1{
    background-color: rgb(200,200,200,0.5);
    margin:5% 15% 5% 15%;

    .works1-img{
        display: flex;
    }

    .works1-img1{
        padding-left: 3%;
        padding-top: 3%;
        width: 65%;
        height: 40%;
        object-fit: cover;
        /*
        max-width: 40rem;
        max-height: 21.5rem;
        object-fit: cover;
        */
    }
    .works1-img-sub{
        /*background-color: black;*/
        padding-left: 4%;
        padding-top: 3%;
    }

    .works1-img2{

        width: 90%;
        height: 48%;
        object-fit: cover;
    }

    .works1-img3{
        
        padding-top: 4%;
        width: 90%;
        height: 50%;
        object-fit: cover;
    }
    .homepage1{
        font-size: 3rem;
        text-decoration: none;
        padding-top: 3%;
        padding-left: 3%;
        color: black;
    }
    .homepage1:hover{
        color: rgb(115, 10, 207);
    }
    .discription1{
        padding-left: 3%;
        padding-bottom: 1%;
    }
}

.works2{
    background-color: rgb(200,200,200,0.5);
    margin:5% 15% 5% 15%;

    .works2-img{
        display: flex;
    }

    .works2-img1{
        padding-left: 3%;
        padding-top: 3%;
        width: 65%;
        height: 40%;
        object-fit: cover;
        /*
        max-width: 40rem;
        max-height: 21.5rem;
        object-fit: cover;
        */
    }
    .works2-img-sub{
        /*background-color: black;*/
        padding-left: 4%;
        padding-top: 3%;
    }

    .works2-img2{

        width: 90%;
        height: 48%;
        object-fit: cover;
    }

    .works2-img3{
        
        padding-top: 4%;
        width: 90%;
        height: 50%;
        object-fit: cover;
    }
    .homepage2{
        font-size: 3rem;
        text-decoration: none;
        padding-top: 3%;
        padding-left: 3%;
        color: black;
    }
    .homepage2:hover{
        color: rgb(115, 10, 207);
    }
    .discription2{
        padding-left: 3%;
        padding-bottom: 1%;
    }
}

.works3{
    background-color: rgb(200,200,200,0.5);
    margin:5% 15% 5% 15%;

    .works3-img{
        display: flex;
    }

    .works3-img1{
        padding-left: 3%;
        padding-top: 3%;
        width: 65%;
        height: 40%;
        object-fit: cover;
        /*
        max-width: 40rem;
        max-height: 21.5rem;
        object-fit: cover;
        */
    }
    .works3-img-sub{
        /*background-color: black;*/
        padding-left: 4%;
        padding-top: 3%;
    }

    .works3-img2{

        width: 90%;
        height: 48%;
        object-fit: cover;
    }

    .works3-img3{
        
        padding-top: 4%;
        width: 90%;
        height: 50%;
        object-fit: cover;
    }
    .homepage3{
        font-size: 3rem;
        text-decoration: none;
        padding-top: 3%;
        padding-left: 3%;
        color: black;
    }
    .homepage3:hover{
        color: rgb(115, 10, 207);
    }
    .discription3{
        padding-left: 3%;
        padding-bottom: 1%;
    }
}
@media screen and (max-width: 769px) {
    .works-main{
        background-size: 100vW;
    }
    .works1, .works2, .works3{
        margin:5% 5% 5% 5%;
        position: relative;
        text-align: center;
    }
    .works1{
        .works1-img{
            display: block;
        }
        .works1-img1{
            padding-left: 0;
            padding-top: 3%;
            width: 90%;
            height: 50%;
            object-fit: cover;
            /*
            max-width: 40rem;
            max-height: 21.5rem;
            object-fit: cover;
            */
        }
        .works1-img-sub{
            /*background-color: black;*/
            padding-left: 5%;
            padding-top: 3%;
            display: flex;
            gap: 5%;
        }
    
        .works1-img2{
    
            width: 45%;
            height: 30%;
            object-fit: cover;
        }
    
        .works1-img3{
            padding-left: 0;
            padding-top: 0;
            width: 45%;
            height: 30%;
            object-fit: cover;
        }
        .homepage1{
            font-size: 2rem;
            text-decoration: none;
            padding-top: 15%;
            padding-left: 0;
            color: black;
        }
        .homepage1:hover{
            color: rgb(115, 10, 207);
        }
        .discription1{
            padding-left: 0;
            padding-bottom: 3%;
            width: 90%;
            margin: auto;
        }
    }
    .works2{
        .works2-img{
            display: block;
        }
        .works2-img1{
            padding-left: 0;
            padding-top: 3%;
            width: 90%;
            height: 50%;
            object-fit: cover;
            /*
            max-width: 40rem;
            max-height: 21.5rem;
            object-fit: cover;
            */
        }
        .works2-img-sub{
            /*background-color: black;*/
            padding-left: 5%;
            padding-top: 3%;
            display: flex;
            gap: 5%;
        }
    
        .works2-img2{
    
            width: 45%;
            height: 30%;
            object-fit: cover;
        }
    
        .works2-img3{
            padding-left: 0;
            padding-top: 0;
            width: 45%;
            height: 30%;
            object-fit: cover;
        }
        .homepage2{
            font-size: 2rem;
            text-decoration: none;
            padding-top: 15%;
            padding-left: 0;
            color: black;
        }
        .homepage2:hover{
            color: rgb(115, 10, 207);
        }
        .discription2{
            padding-left: 0;
            padding-bottom: 3%;
            width: 90%;
            margin: auto;
        }
    }
    .works3{
        .works3-img{
            display: block;
        }
        .works3-img1{
            padding-left: 0;
            padding-top: 3%;
            width: 90%;
            height: 50%;
            object-fit: cover;
            /*
            max-width: 40rem;
            max-height: 21.5rem;
            object-fit: cover;
            */
        }
        .works3-img-sub{
            /*background-color: black;*/
            padding-left: 5%;
            padding-top: 3%;
            display: flex;
            gap: 5%;
        }
    
        .works3-img2{
    
            width: 45%;
            height: 30%;
            object-fit: cover;
        }
    
        .works3-img3{
            padding-left: 0;
            padding-top: 0;
            width: 45%;
            height: 30%;
            object-fit: cover;
        }
        .homepage3{
            font-size: 2rem;
            text-decoration: none;
            padding-top: 15%;
            padding-left: 0;
            color: black;
        }
        .homepage3:hover{
            color: rgb(115, 10, 207);
        }
        .discription3{
            padding-left: 0;
            padding-bottom: 3%;
            width: 90%;
            margin: auto;
        }
    }
}
/*about
-----------------------------*/

.about-main{
    padding: 5% 15% 5% 15%;
    display: flex;
    .ryo{
        padding-left: 10%;
    }
    .comment{
        padding-left: 5%;
        padding-top: 3%;
        padding-right: 5%;
    }
}
.about-108{
    text-align: center;
    h5{
        font-size: 4rem;
    }
}
.about-img2{
    margin-top: 3%;
    padding-right: 10%;
    padding-left: 10%;
    padding-top: 3%;
    padding-bottom: 3%;
    background-color: #F7EF66;
    display: flex;
    flex-wrap: wrap;

    /*display: grid;
    gap: 1%;
    grid-template-columns: 1.5fr 1fr 1fr 3fr;
    grid-template-rows: 180px 100px 80px 120px auto;
    */
}
.welcome-img{
    
    object-fit: cover;
    border-radius: 10px;
    border: 3px solid #ccc;
    flex-grow: 1;
    margin: 0.5%;
    max-height: 200px;
    filter: grayscale();
    
}
.welcome-img:hover{
    filter:none;
}
@media screen and (max-width: 769px) {
    .about-main{
        display: block;
        position: relative;
        padding: 0;
        text-align: center;
        .ryo{
            margin: auto;
            padding-top: 10%;
            padding-left: 0;
            width: 40%;
        }
        .comment{
            margin: auto;
            width: 90%;
            padding-left: 0;
            padding-top: 10%;
            padding-right: 0;
        }
    }
    .about-108{
        padding-top: 20%;
        h5{
            font-size: 3rem;
        }
    }
    .welcome-img{
        width: 90%;
    }
}
/*contact
-----------------------------*/
.contact-main{
    text-align: center;
}


/*スマホContact Form 7カスタマイズ*/
@media screen and (max-width: 769px) {
    .inquiry th,.inquiry td {
    display:block!important;
    width:100%!important;
    border-top:none!important;
    -webkit-box-sizing:border-box!important;
    -moz-box-sizing:border-box!important;
    box-sizing:border-box!important;
    }
    .inquiry tr:first-child th{
    border-top:1px solid #d7d7d7!important;
    }
    /* 必須・任意のサイズ調整 */
    .inquiry .haveto,.inquiry .any {
    font-size:10px;
}}
/*Contact Form 7カスタマイズ*/
    .inquiry{

        margin: auto;
        padding-top: 3%;
    }

    /*見出し欄*/
    .inquiry th{
    text-align:left;
    font-size:14px;
    color:#444;
    padding-right:5px;
    padding-left: 10px;
    width:30%;
    background:#f7f7f7;
    border:solid 1px #d7d7d7;
    }
    /*通常欄*/
    .inquiry td{
    font-size:13px;
    border:solid 1px #d7d7d7;
    margin: auto;
    }
    /*横の行とテーブル全体*/
    .entry-content .inquiry tr,.entry-content table{
    border:solid 1px #d7d7d7;
    }
    /*必須の調整*/
    .haveto{
    font-size:7px;
    padding:5px;
    background:#ff9393;
    color:#fff;
    border-radius:2px;
    margin-right:5px;
    position:relative;
    bottom:1px;
    }
    /*任意の調整*/
    .any{
    font-size:7px;
    padding:5px;
    background:#93c9ff;
    color:#fff;
    border-radius:2px;
    margin-right:5px;
    position:relative;
    bottom:1px;
    }
    /*ラジオボタンを縦並び指定*/
    .verticallist .wpcf7-list-item{
    display:block;
    }
    /*送信ボタンのデザイン変更*//*
    #formbtn{
    display: block;
    padding:15px;
    width:350px;
    background:#ffaa56;
    color:#fff;
    font-size:18px;
    font-weight:bold;
    border-radius:2px;
    margin:25px auto 0;
    }
    /*送信ボタンマウスホバー時*//*
    #formbtn:hover{
    background:#fff;
    color:#ffaa56;
    border:2px solid #ffaa56;
    }*/
    #formbtn{
        display: block;
        margin:25px auto 0;
        }
    .spam{
        padding-top: 1%;
        text-align: center;
    }