@charset "UTF-8";

/* ==========================================================================
 header・footer 共通スタイル
 https://www.diners.co.jp/ja/entry_form/lp/web/css/style.css をリバースエンジニアリングし、
 header・footer に必要なルールのみ抽出して追加したもの
 LP 本体(gold.css)に影響しないよう、リセットは .siteTop / .siteBottom 配下に限定する
========================================================================== */

:root {
    --header-size: 70px;
    --side-padding: 40px;
}

@media screen and (max-width: 800px) {
    :root {
        --side-padding: 30px;
    }
}

@media screen and (max-width: 560px) {
    :root {
        --side-padding: 20px;
    }
}

html,
body {
    height: auto;
    position: relative;
}

html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #000;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Noto Sans", "Noto Sans CJK JP", "Roboto", Meiryo, sans-serif;
    letter-spacing: .05em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.siteTop,
.siteTop *,
.siteTop *::before,
.siteTop *::after,
.siteBottom,
.siteBottom *,
.siteBottom *::before,
.siteBottom *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.siteTop :where(a),
.siteBottom :where(a) {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.siteTop :where(img),
.siteBottom :where(img) {
    display: block;
    width: 100%;
    height: auto;
    border: none;
}

.siteTop :where(ul),
.siteBottom :where(ul) {
    list-style: none;
}

/* 参照元では祖先の div.wrapper から継承する値。wrapper を持たないため .siteTop / .siteBottom 自身にも与える */
:where(.siteTop, .siteBottom),
.siteTop :where(div, p, ul, li),
.siteBottom :where(div, p, ul, li) {
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.75;
    -webkit-font-feature-settings: "palt";
    -moz-font-feature-settings: "palt";
    font-feature-settings: "palt";
}

@media screen and (max-width: 560px) {
    :where(.siteTop, .siteBottom),
    .siteTop :where(div, p, ul, li),
    .siteBottom :where(div, p, ul, li) {
        font-size: 1.4rem;
    }
}

.siteBottom :where(p) {
    text-align: justify;
}

/* header */

.siteTop {
    width: 100%;
    height: var(--header-size);
    position: relative;
    z-index: 100;
    background-color: #fff;
}

.siteTop_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: calc(1040px + var(--side-padding) * 2);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--side-padding);
    position: relative;
    z-index: 1;
}

.siteTop :where(h1) {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1;
}

.logo {
    flex: 0 0 auto;
    width: 131px;
}

.group {
    width: 198px;
}

@media screen and (max-width: 800px) {
    .logo {
        width: 126px;
    }

    .group {
        width: 190px;
    }
}

@media screen and (max-width: 560px) {
    .logo {
        width: 125px;
    }

    .group {
        width: 120px;
    }
}

/* footer */

.siteBottom {
    width: 100%;
    padding: 40px var(--side-padding) 20px;
    position: relative;
    background-color: #000;
    color: #fff;
}

@media screen and (max-width: 560px) {
    .siteBottom {
        padding-bottom: calc(20px + constant(safe-area-inset-bottom));
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
}

.adjWrap {
    display: block;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 1;
}

.linkBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1em;
}

.linkList {
    flex: 0 0 auto;
}

.linkList_item {
    font-size: 1.4rem;
}

.linkList_item a {
    display: inline-block;
    padding-right: 1.2em;
    position: relative;
    font-size: 1.4rem;
    line-height: 1;
    text-decoration: underline;
}

.linkList_item a::after {
    content: "＞";
    position: absolute;
    right: 0;
}

.copy {
    font-size: 1.2rem;
}

.symbols {
    font-family: system-ui, "Droid Sans", Roboto, "Hiragino Kaku Gothic ProN", Verdana, sans-serif;
}

@media (hover: hover) and (pointer: fine) {
    .linkList_item a:hover {
        opacity: .45;
    }
}

@media screen and (max-width: 800px) {
    .linkBox {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .linkList {
        order: 2;
    }

    .copy {
        text-align: center;
    }
}

@media screen and (max-width: 560px) {
    .copy {
        font-size: 1rem;
        line-height: 1.4;
    }
}

/* 改行制御 */

.-resizeShow {
    display: none;
}

@media screen and (max-width: 800px) {
    .-resizeShow {
        display: inline;
    }
}