@charset "UTF-8";

/* リセットcss ------------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    background: transparent;
    border: 0;
    font-size: 100%;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, main, section {
    display: block;
}

ul, li {
    list-style: none;
}

a {
    display: block;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

p {
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
}

img {
    height: auto;
    width: 100%;
}

/* リセットcssここまで --------------------------------- */


/* -------------------------------------------
共通スタイル
------------------------------------------- */

body {
    background: #eceeef;
    color: #231651;
    font-family: 'M PLUS Rounded 1c','HiraginoUDSansRStdN-W3','游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic','Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans','ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'Osaka', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: 16px;
    line-height: 24px;
}

.wrap-area {
    margin: 0 auto;
    max-width: 450px;
    min-width: 280px;
}

.contents {
    margin: 0 auto;
    max-width: 450px;
    min-width: 280px;
    padding: 2em 0;
    width: 90%;
}

article {
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.24);
    box-sizing: border-box;
    margin: 50px auto 0 auto;
    padding: 0 1em;
    width: 94%;
}

iframe {
    width: 100%;
}

/* 見出し ------------------------------------- */

/* ブロック区切り見出し */
.section-catch {
    color: #fff;
    font-size: 22px;
    line-height: 26px;
    text-align: center;
}

/* スラッシュ見出し */
.sub-catch {
    display: block;
    font-size: 18px;
    margin: 0 auto;
    text-align: center;
}

/* タグ見出し */
.article-tag {
    padding-bottom: 2em;
    position: relative;
}

.tag {
    background: #fff;
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 32%);
    box-sizing: border-box;
    left: -1.5em;
    letter-spacing: 0.5px;
    line-height: 34px;
    padding: 0 0.5em;
    position: absolute;
    top: -17px;
    white-space: nowrap;
}
/* おすすめ 2行用タグ */
.row2-tag {
    padding-bottom: 4em;
    position: relative;
}

    .row2-tag .tag {
        left: -1.4em;
    }

        .row2-tag .tag:last-child {
            top: 25px;
        }
/* ここ地図 2行用タグ */
.row2-tag-kokochizu {
    color: #00534a;
    padding-bottom: 4em;
    position: relative;
}

    .row2-tag-kokochizu .tag {
        left: -1.4em;
    }

        .row2-tag-kokochizu .tag:last-child {
            top: 25px;
        }


/* 汎用クラス ------------------------------- */

/* 汎用フォント太さ */
.text_bold {
    font-weight: 600;
}

.text_light {
    font-weight: 300;
}

/* 汎用フォント色 */
.text_pink {
    color: #ed2f78;
}

.text_green {
    color: #00a896;
}

.text_dark_green {
    color: #00534a;
}

/* 中央寄せ要素 */
.center {
    display: block;
    margin: 0 auto;
    text-align: center;
}
/* テキストリンク */
.text-link {
    display: inline;
    text-decoration: underline;
}

/* 汎用パディング */
.pt_24 {
    padding-top: 24px;
}

.pt_48 {
    padding-top: 48px;
}

.pt_16 {
    padding-top: 16px;
}

.pb_16 {
    padding-bottom: 16px;
}
.pb_24 {
    padding-bottom: 24px;
}

.p_16 {
    padding: 16px 0;
}

.p_24 {
    padding: 24px 0;
}

.p_30 {
    padding: 30px 0;
}

/* フォントサイズ */
.font14 {
    font-size: 14px;
}

.font16 {
    font-size: 16px;
    line-height: 24px;
}

.font20 {
    font-size: 20px;
}

.attention {
    font-size: 0.7em;
    line-height: 1.4em;
}

.xr_attention {
    font-size: 8px;
    line-height: 1.8em;
}

/* ボタン ------------------------------------- */
.btn-area {
    margin: 0 auto;
    max-width: 280px;
}

/* topへ戻るボタン */
#js-scroll-fadein {
    bottom: 16px;
    cursor: pointer;
    position: fixed;
    right: 16px;
}

.to_top {
    background: #084b83;
    border-radius: 50%;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.24);
    height: 32px;
    position: relative;
    width: 32px;
}

    .to_top::before {
        background: #fff;
        content: '';
        height: 15px;
        left: 15px;
        position: absolute;
        top: 10px;
        width: 3px;
    }

    .to_top::after {
        border-right: 3px solid #fff;
        border-top: 3px solid #fff;
        content: '';
        height: 10px;
        left: 10px;
        position: absolute;
        top: 8px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        width: 10px;
    }

/* アンケートボタン */
#js-questionnaire-fadein {
    bottom: 16px;
    cursor: pointer;
    position: fixed;
    left: 16px;
}

.questionnaire {
    color: #fff;
    background: #084b83;
    border-radius: 25px;
    font-size: 14px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.24);
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 158px;
}

/* 共通：スクロール表示要素のクラス */
.scroll { /* 初期表示 */
    opacity: 0;
    transition: opacity 1.5s;
    visibility: hidden;
}

    .scroll.is-fadein { /* アクティブ後 */
        opacity: 1;
        visibility: visible;
    }

/* 画像 ------------------------------------- */
/* .tag-img {
    position: absolute;
    width: 270px;
    left: -1.5em;
    top: -20px;
} */
/* .youtube {
    height: 180px;
} */

/* フッター ------------------------------------- */
footer {
    background: #00a896;
    font-weight: 300;
}

.footer-title {
    color: #fff;
    padding: 1em 0;
    text-align: center;
}

.project {
    background: #fff;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    margin: 0 auto;
    padding: 1em;
    width: 80%;
}

.associate {
    font-size: 12px;
    line-height: 18px;
    padding-top: 2em;
}

.copy {
    color: #fff;
    font-size: 8px;
    line-height: 12px;
    padding: 30px 1em 56px;
    text-align: center;
}
.bunner-area {
    margin: 0 auto;
    width: 86%;
}




/* -------------------------------------------
以下コンテンツ
------------------------------------------- */

/* メイン ------------------------------------- */
main {
    background-image: url(./../img/lp_bg_001@2x.png);
    background-position: center;
    background-size: cover;
    padding: 20px 0 16px 0;
}

    main h1 {
        text-align: center;
    }

.main-logo {
    width: 200px;
}

.main-area {
    margin: 200px auto 0 auto;
    width: 90%;
}

.main-catch {
    font-weight: 600;
    letter-spacing: 0.4px;
    text-align: center;
}
/* ジャンプリンクボタン */
.mainbtn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 24px;
}

.mainbtn__item {
    width: 50%;
}
/* メインここまで ------------------------------------- */



/* VRイベント ------------------------------------- */
.event {
    background: #ffba49;
}

/* アコーディオンボタン */
.accbtn {
    display: flex;
    margin: 1em 0 0;
}

.accbtn__item {
    cursor: pointer;
    width: 50%;
}

/* アコーディオン内容 */
#accAbout, #spotOpen {
    display: none; /* 初期非表示 */
}

.acc {
    color: #00a896;
    font-family: 'HiraginoUDSansRStdN';
    padding-bottom: 1em;
}

.acc__item {
    border: 2px solid #00a896;
    border-radius: 8px;
    margin-top: 1em;
    padding: 0.4em 0.5em;
}

.acc__item--title {
    border-bottom: 1px dotted #00a896;
    color: #00a896;
    font-size: 14px;
}

.acc-detail {
    font-weight: 300;
    margin-top: 1em;
}

    .acc-detail dt {
        font-size: 14px;
        line-height: 20px;
    }

    .acc-detail dd {
        font-size: 12px;
        line-height: 20px;
    }

.spot-map {
    padding-top: 1em;
}

/* XRボタン */
.xrbtn {
    display: flex;
    justify-content: space-between;
}

.xrbtn__item {
    position: relative;
    width: 49%;
}

.benefit-img {
    max-width: 66px;
    position: absolute;
    right: -15px;
    top: -20px;
}

/* 現地限定特典 */
.xr_subtitle {
    font-size: 14px;
    line-height: 20px;
    margin: 35px 0 1em 0;
    text-align: center;
}

.limited-detail {
    border: 0.5px solid #e4007f;
    padding: 0.5em 0.7em;
    position: relative;
}

    .limited-detail:after {
        border: 3px solid #fbd8eb;
        /* 2重線 */
        content: '';
        height: calc(100% - 6px);
        left: 0;
        position: absolute;
        top: 0;
        width: calc(100% - 6px);
    }

.limited-detail__title {
    color: #e4007f;
    font-size: 12px;
    line-height: 16px;
    padding-bottom: 8px;
    position: relative;
    text-align: center;
}

    .limited-detail__title::after {
        border-bottom: 2px dotted #fbd8eb;
        bottom: 0;
        /* 下線 */
        content: '';
        left: -0.5em;
        position: absolute;
        width: 105%;
    }

/* VRイベントここまで ------------------------------------- */



/* お台場のおうちコンテンツ ------------------------------------- */
.odaiba {
    background: #3fa9f5;
}

.link-btn:first-child {
    margin-top: 1em;
}

.link-btn:last-child {
    padding-bottom: 1em;
}

/* お台場のおうちコンテンツここまで ------------------------------------- */




/* 現地を楽しむためのサポート ------------------------------------- */
.support h3 {
    color: #231651;
}

.green_style {
    background: linear-gradient(to bottom, #00d3c7, #00a896);
    border-radius: 24px;
    padding: 4px;
    margin: 24px auto 0 auto;
}

.bg_white {
    background: #fff;
    border-radius: 20px;
    padding: 0 1em;
}

.bg_clear_white {
    background: rgba(255, 255, 255, 0.6);
    padding: 1em;
}

.btn-3d {
    margin: 0 auto;
    width: 180px;
}

.coupon-img {
    max-width: 200px;
}


/* 現地を楽しむためのサポートここまで ------------------------------------- */

/* デジタル決済 ------------------------------------- */
.payment h3 {
    color: #231651;
}

.pink_style {
    background: linear-gradient(to bottom, #fb25a0, #f61067);
    border-radius: 24px;
    padding: 4px;
    margin: 24px auto 0 auto;
}
/* デジタル決済ここまで ------------------------------------- */

/* -------------------------------------------
以下レスポンシブ
------------------------------------------- */

/* 5sなど */
@media (max-width: 320px) {
    .row2-tag {
        font-size: 16px;
    }
}
/* Galaxy Foldなど */
@media (min-width: 280px) and (max-width: 319px) {
    article {
        width: 90%;
    }
}