@charset  "UTF-8";

html {
    font-size: 100%;
}
body {
    color: #2b2a27;
    font-family: "Helvetica Neue", "Arial", "Hiragino Sans", "Meiryo", sans-serif;

}
img {
    min-width: 100%;
}
ul {
    list-style: none;
}
a {
    color: #2b2a27;
}


/* =====================
メインビジュアル（画面一杯の画像表示）
=======================*/
#main-visual img {
    /* 全画面表示 */
    width: 100%;
    height: 100vh;
    /* トリミング
    アスペクト比を維持したまま、コンテンツを埋めるように拡大縮小。
    アスペクト比に合わない場合は、オブジェクトが切り取られる*/
    object-fit: cover;
    /* 横は中央、縦をトップで配置 */
    object-position: center top;
    /* 画像下の余白80 */
    margin-bottom: 80px;
}


/* =====================
テキスト（タイトル）
=======================*/
.text {
    /* 全体をセンタリング */
    text-align: center;
    /* 内側余白　上下0　左右20 */
    padding: 0 20px;
    /* 外側　下余白80 */
    margin-bottom: 80px;
}
.text .site-ttl {
    /* サイトタイトルの下余白20 */
    margin-bottom: 20px;
}


/* =====================
３枚の横並び画像
=======================*/
.flex {
    /* 横並び */
    display: flex;
    margin-bottom: 60px;
}
.flex li {
    /* widthの値を三等分。
    割り切れない数で均等に配置したい場合などに便利。*/
    width: calc(100%/3);
}
.flex li img {
    /* 幅を収める？ */
    width: 100%;
    /* 高さを500に固定 */
    height: 500px;
    /* 高さを固定したまま、画面幅に合わせて画像を伸縮
    （※IEでは正しく動作しない） */
    object-fit: cover;
    /*　画像の下にできる隙間を消す。*/
    vertical-align: bottom;
}


/* =====================
ボタン部分
=======================*/
.text .btn {
    /* aタグに幅と高さを持たせる */
    display: inline-block;
    /* 囲む　#2b2a27 */
    border: solid 1px #2b2a27;
    /* フォント　0.875rem */
    font-size: 0.875rem;
    /* ボタンサイズを調整。上下18、左右60 */
    padding: 18px 60px;
    /* リンクの下線消す */
    text-decoration: none;
}


/* =====================
フッター
=======================*/
#footer {
    font-size: 0.75rem;
    padding: 20px;
    text-align: center;
}

#footer .sns {
    /* 横並び */
    display: flex;
    /* センタリング（display:flexでtext-align効かなくなった */
    justify-content: center;
    /* フッター下の余白20 */
    margin-bottom: 20px;
}

#footer .sns li {
    /* snsの間の余白を10 */
    margin: 0 10px;
}


/* =====================
レスポンシブ
=======================*/
@media screen and (max-width: 834px) {
    .flex {
        /* ３枚横並び部分を縦並びに */
        flex-direction: column;
    }
    .flex li {
        /* 幅の調整 */
        width: 100%;
    }
}