/* *********************** */
/* 全体的なレイアウト */
/* *********************** */
html {
    font-size: 62.5%;
    box-sizing: border-box;
}

body {
    font-family: "Zen Antique", serif;
    font-size: 1.4rem;
    font-weight: 600;
    background: #FFF;
    color: #000;
    line-height: 1.4;
}

img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* スクロールバーのカスタマイズ */
body::-webkit-scrollbar {
    width: 12px;
}

body::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* 背景色 */
    border-radius: 10px;
    /* 角を丸く */
}

body::-webkit-scrollbar-thumb {
    background: #888;
    /* つまみ部分の色 */
    border-radius: 10px;
    /* 丸み */
}

body::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* ホバー時の色 */
}



/* *********************** */
/* ヘッダー */
/* *********************** */
header {
    position: relative;
    color: #fff;
}

/* *********************** */
/* サブヘッダー */
/* *********************** */
.sub-header {
    height: calc(100vh/3.5);
    margin-bottom: 25px;
}

.sub-header .header-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* background-image: url(../images/header1.png); */
    background-size: cover;
    /* 画像が要素全体を覆う */
    background-position: center;
    /* 画像が中央に配置 */
    background-repeat: no-repeat;
    /* 画像が繰り返されない */
    position: relative;
    z-index: -2;
}

.sub-header .header-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    filter: brightness(80%);
    z-index: -1;
    /* コンテンツの後ろに配置 */
}

.header-title {
    font-size: 1.9rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2px;
    border-bottom: 1px solid #fff;
    letter-spacing: 1px;
}

/* 横向きの場合 */
@media (orientation: landscape) {
    .sub-header {
        height: 100vh;
    }
}


/* *********************** */
/* ナビゲーションバー */
/* *********************** */
nav {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    position: absolute;
    top: 0;
    z-index: 10
}

/* 画像設定 */
nav img {
    max-height: 65px;
}

/* ロゴ */
nav .logo {
    width: 200px;
}

/* header-link */
.header-link-wrap {
    display: none;
}

/* snsのアイコン */
.sns {
    width: 100px;
    display: flex;
    justify-content: flex-end;
}

.sns a {
    display: block;
    margin-left: 7px;
    text-align: right;
}

.sns img {
    width: 30px;
}

/* ページボタン */
.button-wrap {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}

.button {
    display: block;
    width: 50%;
    padding: 20px;
    border-top: 1px solid #a9a9a9;
    border-right: 1px solid #a9a9a9;
    font-size: 1.6rem;
    transition: background-color 0.3s ease;
}

.button:nth-child(odd) {
    border-left: 1px solid #a9a9a9;
}

.button:active {
    background-color: #999;
}

/* フッター */
footer {
    height: 90px;
    text-align: center;
    border-top: 1px solid #a9a9a9;
}

footer>div {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

footer img {
    width: 180px;
}

.copyright {
    font-size: 1.2rem;
}

/* *********************** */
/* iPad */
/* *********************** */
@media (min-width:600px) {
    .sub-header {
        height: calc(100vh/3.0);
    }

    /* *********************** */
    /* サブヘッダー */
    /* *********************** */
    /* 横向きの場合 */
    @media (orientation: landscape) {
        .sub-header {
            height: 70vh;
        }
    }


    /* *********************** */
    /* ナビゲーションバー */
    /* *********************** */
    nav .logo {
        width: 240px;
    }

    .sns img {
        width: 35px;
    }
}

/* *********************** */
/* PC */
/* *********************** */
@media (min-width:1200px) {
    body {
        font-size: 1.6rem;
    }

    /* *********************** */
    /* ヘッダー */
    /* *********************** */
    .top-header {
        min-height: 200px;
    }

    /* *********************** */
    /* サブヘッダー */
    /* *********************** */
    .sub-header {
        height: 70vh;
        min-height: 200px;
    }

    /* header-link */
    .header-link-wrap {
        display: flex;
        text-align: center;
        font-size: 1.8rem;
    }

    .header-link {
        display: block;
        min-width: 70px;
        margin: 0 15px;
        padding: 0 5px;
        text-shadow: 0 2px 2px #666;
        position: relative;
        /*アンダーラインの位置を決めるための基準 */
    }

    .header-link::after {
        position: absolute;
        left: 0;
        content: '';
        width: 100%;
        height: 2px;
        background: #fff;
        bottom: -1px;
        transform: scale(0, 1);
        transform-origin: right top;
        /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
        transition: transform 0.3s;
        /*変形の時間*/
        /* 下線に影を追加 */
        box-shadow: 0 3px 4px rgba(0, 0, 0, 0.7);
        /* 影の色と透明度を濃く */
    }

    .header-link:hover::after {
        transform: scale(1, 1);
        /*ホバー後、x軸方向に1（相対値）伸長*/
        transform-origin: left top;
        /*左から右に向かう*/
    }

    .header-title {
        font-size: 2.8rem;
        letter-spacing: 2px;
    }

    .button-wrap {
        display: none;
    }
}


/* *********************** */
/* Coming Soon用 */
/* *********************** */
.coming_soon {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 25px;
    color: #626262;
}

@media (min-width: 1200px) {
    .coming_soon {
        line-height: calc(50vh - 140px);
        height: calc(50vh - 140px);
    }
}