@charset "utf-8";

/*************************************************
  PCの記述開始
*************************************************/

/******************* メイン *******************/
/*======= MV =======*/
    #header {
        width: 100%;
        height: 100vh;
        position: relative;
}

    #header:before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100vw;

        /*背景画像設定*/
            background: url(../images/pc_mv.png) no-repeat center;
            background-position: top;
            background-size: contain;
            animation: fadein 5s ease-out forwards;
    } 
    
        @keyframes fadein {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
    
/*======= MV上のリード文 =======*/
    .read-text {
        writing-mode: vertical-rl;
        font-size: 20px;
        letter-spacing: 0.8em;
        font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN";
    }

    .read-text p {
        margin-top: -75vh;
    }

    /*リード文の行間マージン*/
    .read-text p:first-child {
        margin-left: 40px;
    }

    /*リード文の位置調整*/
    .read-text p:last-child {
        margin-top: -55.4vh;
        margin-left: 15vw;
    }

    #container {
        position: relative;
        z-index: 1;
        background: #fff;
        padding-top: 8vw;
        text-align: center;
    }

/*======= スクロールダウン =======*/    
    /*スクロールダウン全体の場所*/
    .scrolldown1 {
        /*描画位置*/
            position: absolute;
            left: 50%;
            bottom: 30px;

        /*全体の高さ*/
            height: 50px;
    }

    /*Scrollテキストの描写*/
    .scrolldown1 span {
        /*描画位置*/
            position: absolute;
            left: -15px;
            top: -15px;

        /*テキストの形状*/
            color: #333333;
            font-size: 0.7rem;
            letter-spacing: 0.05em;
    }

    /* 線の描写 */
    .scrolldown1::after {
        content: "";
        /*描画位置*/
            position: absolute;
            top: 0;

        /*線の形状*/
            width: 1px;
            height: 30px;
            background: #333333;

        /*線の動き1.4秒かけて動く。永遠にループ*/
            animation: pathmove 1.4s ease-in-out infinite;
            opacity: 0;
    }

        /*高さ・位置・透過が変化して線が上から下に動く*/
        @keyframes pathmove {
          0%{
            height:0;
            top:0;
            opacity: 0;
          }
          30%{
            height:30px;
            opacity: 1;
          }
          100%{
            height:0;
            top:50px;
            opacity: 0;
          }
        }
    
/*======= セクションWorks =======*/
.Works {
    margin-bottom: 140px;
}

.Works-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.Works-list li {
    width: 32%;
    margin-bottom: 20px;
}
    
.Works-list li img {
    border-radius: 10px;
    
}
.Works-list li:nth-child(5) img {
    border: solid 2px #e6e6e6;
}
    
.Works-list li:nth-child(6) img {
    border: solid 2px #e6e6e6;
}

.Works-list li:last-child {
    margin-bottom: 0;
}

/*======= セクションAbout =======*/
.About {
    margin-bottom: 140px;
}

.profile-flexAll {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profile-image img {
    width: 240px;
    height: 240px;
    border-radius: 50%;
}

.profile {
    width: 70%;
    text-align: left;
    font-size: 14px;
    line-height: 2.4em;
}

.profile p:first-child {
    font-size: 22px;
    margin-bottom: 14px;
}

/*======= セクションContact =======*/
.Contact {
    padding-bottom: 200px;
}

.Contact p {
    font-size: 14px;
    margin-bottom: 40px;
}

    /*フォーム*/
    form {
        width: 100%;
        max-width: 1080px;
        margin: 0 auto;
        text-align: left;
        font-size: 14px;
    }

        /*お名前～件名の2カラムエリア*/
            input {
                width: 100%;
                height: 30px;
                margin-top: 10px;
            }

            input,textarea {
                display: block;
                padding: 8px 10px; 
                border: solid 1px #afafaf;
                border-radius: 8px;
                outline:0;
            }

            .form-container01 {
                display: flex;
            }

            .form-inner-container {
                margin-bottom: 30px;
            }

            .left-column {
                flex: 1;
                margin-right: 14px;
            }

            .right-column {
                flex: 1;
                margin-left: 14px;
            }

        /*【必須】*/
            form span {
                background-color: #F45555;
                color: #fff;
                font-size: 10px;
                padding: 3px 4px;
                margin-left: 10px;
                border-radius: 4px;
                vertical-align: middle;
            }
            
        /*お問い合わせ内容の1カラムエリア*/
            textarea {
                width: 100%;
                height: 200px;
                margin-top: 10px;
                resize: none;
                border-radius: 10px;
            }

        /*送信ボタン*/
            #submit {
                text-align: center;
            }
            
            #submit button {
                width: 220px;
                height: 54px;
                margin: 50px auto 0 auto;
                background-color: #F79B82;
                border: none;
                border-radius: 50px;
                text-align: center;
                color: #fff;
                font-size: 16px;
                letter-spacing: 0.1em;
                transition: 0.3s;
            }
            
            #submit button:hover {
                opacity:0.5;
            }

/*************************************************
  PCの記述終了
*************************************************/


/*************************************************
  TABの記述開始
*************************************************/
@media screen and (max-width: 960px) {

/******************* メイン *******************/
/*======= MV =======*/
    #header {
        width: 100%;
        height: 100vh;
        position: relative;
}

    #header:before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100vh;

        /*背景画像設定*/
            background: url(../images/pc_mv.png) no-repeat center;
            background-position: top;
            background-size: cover;
            animation: fadein 5s ease-out forwards;
    } 
    
        @keyframes fadein {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
    
/*======= MV上のリード文 =======*/
    .read-text {
        writing-mode: vertical-rl;
        font-size: 20px;
        letter-spacing: 0.8em;
        font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN";
    }

    .read-text p {
        margin-top: -85vh;
    }

    /*リード文の行間マージン*/
    .read-text p:first-child {
        margin-left: 30px;
    }

    /*リード文の位置調整*/
    .read-text p:last-child {
        margin-top: -69.7vh;
        margin-left: 8vw;
    }

    #container {
        position: relative;
        z-index: 1;
        background: #fff;
        padding-top: 8vw;
        text-align: center;
    }

/*======= スクロールダウン =======*/    
    /*スクロールダウン全体の場所*/
    .scrolldown1 {
        /*描画位置*/
            position: absolute;
            left: 50%;
            bottom: 30px;

        /*全体の高さ*/
            height: 50px;
    }

    /*Scrollテキストの描写*/
    .scrolldown1 span {
        /*描画位置*/
            position: absolute;
            left: -15px;
            top: -15px;

        /*テキストの形状*/
            color: #333333;
            font-size: 0.7rem;
            letter-spacing: 0.05em;
    }

    /* 線の描写 */
    .scrolldown1::after {
        content: "";
        /*描画位置*/
            position: absolute;
            top: 0;

        /*線の形状*/
            width: 1px;
            height: 30px;
            background: #333333;

        /*線の動き1.4秒かけて動く。永遠にループ*/
            animation: pathmove 1.4s ease-in-out infinite;
            opacity: 0;
    }

        /*高さ・位置・透過が変化して線が上から下に動く*/
        @keyframes pathmove {
          0%{
            height:0;
            top:0;
            opacity: 0;
          }
          30%{
            height:30px;
            opacity: 1;
          }
          100%{
            height:0;
            top:50px;
            opacity: 0;
          }
        }
    
/*======= セクションWorks =======*/
.Works {
    margin-bottom: 100px;
}

.Works-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.Works-list li {
    width: 32%;
    margin-bottom: 20px;
}
    
.Works-list li img {
    border-radius: 10px;
    
}
.Works-list li:nth-child(6) img {
    border: solid 2px #e6e6e6;
}
    
.Works-list li:nth-child(7) img {
    border: solid 2px #e6e6e6;
}

.Works-list li:last-child {
    margin-bottom: 0;
}

/*======= セクションAbout =======*/
.About {
    margin-bottom: 100px;
}

.profile-flexAll {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profile-image img {
    width: 240px;
    height: 240px;
    border-radius: 50%;
}

.profile {
    width: 67%;
    text-align: left;
    font-size: 14px;
    line-height: 2.4em;
}

.profile p:first-child {
    font-size: 22px;
    margin-bottom: 14px;
}

/*======= セクションContact =======*/
.Contact {
    padding-bottom: 0;
}

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

    /*フォーム*/
    form {
        width: 100%;
        max-width: 1080px;
        margin: 0 auto;
        text-align: left;
        font-size: 14px;
    }

        /*お名前～件名の2カラムエリア*/
            input {
                width: 100%;
                height: 30px;
                margin-top: 10px;
            }

            input,textarea {
                display: block;
                padding: 8px 10px; 
                border: solid 1px #afafaf;
                border-radius: 8px;
                outline:0;
            }

            .form-container01 {
                display: flex;
            }

            .form-inner-container {
                margin-bottom: 30px;
            }

            .left-column {
                flex: 1;
                margin-right: 10px;
            }

            .right-column {
                flex: 1;
                margin-left: 10px;
            }

        /*【必須】*/
            form span {
                background-color: #F45555;
                color: #fff;
                font-size: 10px;
                padding: 3px 4px;
                margin-left: 10px;
                border-radius: 4px;
                vertical-align: middle;
            }
            
        /*お問い合わせ内容の1カラムエリア*/
            textarea {
                width: 100%;
                height: 200px;
                margin-top: 10px;
                resize: none;
                border-radius: 10px;
            }

        /*送信ボタン*/
            #submit {
                text-align: center;
            }
            
            #submit button {
                width: 220px;
                height: 54px;
                margin: 50px auto;
                background-color: #F79B82;
                border: none;
                border-radius: 50px;
                text-align: center;
                color: #fff;
                font-size: 16px;
                letter-spacing: 0.1em;
                transition: 0.3s;
            }
            
            #submit button:hover {
                opacity:0.5;
            }

}

/*************************************************
  TABの記述終了
*************************************************/

/*************************************************
  SPの記述開始
*************************************************/
@media screen and (max-width:768px) {

/*======= MV =======*/
#header,
#header:before {
    height: 90vh;
}

#header:before {
    /*背景画像設定*/
        background: url(../images/sp_mv.png) no-repeat center;
        background-position: top;
        background-size: contain;
    } 

.read-text {
        font-size: 18px;
        letter-spacing: 0.6em;
        font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN";
}

.read-text p {
    margin-top: -70vh;
}

/*リード文の行間マージン*/
.read-text p:first-child {
    margin-left: 20px;
}

/*リード文の位置調整*/
.read-text p:last-child {
    margin-top: -55vh;
    margin-left: 8vw;
}

/*======= セクションWorks =======*/
.Works {
    margin-bottom: 80px;
}

.Works-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: column;
}

.Works-list li {
    width: 100%;
    margin-bottom: 20px;
}

/*======= セクションAbout =======*/
.About {
    margin-bottom: 80px;
}

.profile-flexAll {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

.profile-image img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.profile {
    width: 99%;
    text-align: left;
    font-size: 16px;
    line-height: 2.4em;
}

.profile p:first-child {
    font-size: 22px;
    margin: 26px 0 14px 0;
    text-align: center;
}

/*======= セクションContact =======*/
.Contact p {
    font-size: 16px;
    margin-bottom: 30px;
    line-height: 2.4em;
}

/*お名前～件名の2カラムエリア*/
            input {
                width: 100%;
                height: 30px;
                margin-top: 10px;
            }

            input,textarea {
                display: block;
                padding: 8px 10px; 
                border: solid 1px #afafaf;
                border-radius: 8px;
                outline:0;
            }

            .form-container01 {
                display: flex;
                flex-direction: column;
            }
            
            .form-inner-container {
                margin-bottom: 30px;
                font-size: 16px;
            }

            .left-column {
                flex: 1;
                margin-right: 0;
            }

            .right-column {
                flex: 1;
                margin-left: 0;
            }
            
            .form-container02 {
                font-size: 16px;
            }
            
            /*【必須】*/
            form span {
                background-color: #F45555;
                color: #fff;
                font-size: 14px;
                padding: 3px 4px;
                margin-left: 10px;
                border-radius: 4px;
                vertical-align: top;
            }
            
            /*お問い合わせ内容の1カラムエリア*/
            textarea {
                width: 100%;
                height: 400px;
                margin-top: 10px;
                resize: none;
                border-radius: 10px;
            }

            /*送信ボタン*/
            #submit {
                text-align: center;
            }
            
            #submit button {
                width: 260px;
                height: 54px;
                margin: 40px auto 0 auto;
                background-color: #F79B82;
                border: none;
                border-radius: 50px;
                text-align: center;
                color: #fff;
                font-size: 18px;
                letter-spacing: 0.1em;
            }
            
}

/*************************************************
  SPの記述終了
*************************************************/