/*
2026/03/12 大規模更新
概要：
    1.#home-div1～3にかけて似た内容が重複して記述されており、
      1つのスタイル更新で複数箇所を更新する必要があり冗長だったため、
      できるだけ共通化するように変更
    2.#home-div1～3が全体的に左に寄っていたため修正
    3.#home-div1のcontentのみ右マージンが小さかったため整列
    4.#home-div2が少しだけ高さが低かったため同じ高さに
    5.#home-div3のスタイルを#home-div1と同様に設定
共通化クラス使用法：
    class="home-div-common"が共通クラスのソースです。
    また、clsss="left-div"で**画像が**左のdivision、
    class="right-div"で右のdivisionになります。
    HTMLでクラス間に空白を空けることで複数指定できます。
    個別設定が必要になった場合は都度IDを使用してください。
    <element class="home-div-common (left-div|right-div)">
        <div class="image">
            <img class= "img1" src="./images/*">
            <img class= "img2" src="./images/*">
        </div>
        <div class="content">
            <h2>...</h2>
            <hr class="line">
            <q>...</q>
            ...
        </div>
    </element>

*/

@charset "UTF-8";

#header{
    /*transition: 0.3s;*/
}
nav *{
    transition: 0.5s;
}
.nav.white{
    background-color: #f0efe6;
}
.nav-letter.green{
    color: #405a5c;
}

#Back{
    object-fit: cover;
    position: fixed;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    top: 0;
    text-align: center;
}

#home-top{
    height: 115vh;
    /*perspective: 400px;*/
    background-color: rgba(0, 0, 0, 0.7);
}
#home-top h1{
    padding-top: 18rem;
    padding-left: 25rem;
    margin-top: 0;
    /*transform: rotateY(30deg);*/
    font-size: 10rem;
    font-weight: bold;
    color: #f0efe6;
}
#home-top q{
    padding-left: 30rem;
    font-size: 2rem;
    font-weight: lighter;
    color: #f0efe6;
}

.homedivCommon{
    height: 115vh;
    margin: 0;
    display: flex;
    justify-content: center;
     .image{
        display: flex;
        position: relative;
        top: 5rem;
        margin: 0;
         img{
            object-fit: cover;
            width: 25vw;
            height: 15vw;
            padding: 0.2rem;
        }
    }
     .content{
        position: relative;
        top: 26rem;
        height: 40rem;
        padding-top: 0;
        margin-right: 7rem;
        color: #f0efe6;
         h2{
            margin: 0;
            font-size: 5rem;
        }
         q{
            font-size: 1.8rem;
        }
         .link-button{
            width: 25rem;
            height: 5rem;
            border-color: #f0efe6;
            border-style: solid;
            box-shadow: none;
            font-size: 1.5rem;
            transition-property: all;
            transition-duration: 100ms;
             a{
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: bold;
                text-decoration: none;
                color: inherit;
                margin-top: auto;
                 svg{
                    width: 2rem;
                    height: 2rem;
                    margin-left: 2%;
                    opacity: 1;
                 }
             }
         }
    }
    &.left-div{
        background-color: #405a5c;
         .image {
             .img1{
                object-position: 0% 50%;
                position: relative;
                top: 20rem;
                left: 12rem;
            }
             .img2{
                position: relative;
                left: -13rem;
                top: 35rem;
            }
        }
         .content{
            left: -4rem;
             .link-button{
                margin-top: 11rem;
                margin-left: 21rem;
                color: #405a5c;
                background-color: #f0efe6;
                fill: #405a5c;
             }
             .link-button:hover{
                background-color: #405a5c;
                color: #f0efe6;
                fill: #f0efe6;
             }
        }
    }
    &.right-div{
        background-color: #5f7e7b;
         .image{
             .img1{
                position: relative;
                top: 30rem;
                left: 21rem;
            }
             .img2{
                position: relative;
                top: 15rem;
                right: 6rem;
            }
        }
         .content{
            left: 15rem;
             .link-button{
                margin-top: 11rem;
                margin-left: 21rem;
                color: #5f7e7b;
                fill: #5f7e7b;
             }
             .link-button:hover{
                background-color: #5f7e7b;
                color: #f0efe6;
                fill: #f0efe6;
             }
        }
    }
}

.line{
    width: 45rem;
    margin: 2rem 0;
}

.space{
    height: 40vh;
}

/*以下機能無し*/
/*
#home-div1{
}
#div1-content{
}
#div1-content h2{
}
#div1-content q{
}
#div1-image{
    
}
#div1-image img{

}
#div1-image1{
}
#div1-image2{
}

#home-div2{
}
#div2-content{
}
#div2-content h2{
}
#div2-content q{
}
#div2-image{
}
#div2-image img{
}
#div2-image1{
}
#div2-image2{
}

#home-div3{
}
#div3-content{
}
#div3-content h2{
}
#div3-content q{
}
#div3-image{
}
#div3-image img{
}
#div3-image1{
}
#div3-image2{
}
*/