@charset "UTF-8";

@import url(font.css);

/* Common */
header {
    margin-bottom: 0 !important;
}

#main .mainInner {
    max-width: none !important;
    background-color: #000000;
    color: #fff;
    font-family: NotoSansJP;
    box-sizing: border-box;
}

footer {
    margin-top: 0 !important;
}

#main article h1 {
    padding: 0;
    margin: 0;
    border-bottom: none;
}

.pc {
    display: block;
}

.sp {
    display: none;
}

#gzl a {
    color: #fff;
}

/* godzilla 2001 */

/* MV */
#title {
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: auto;
    /* 高さを指定する or 中身の高さを維持 */
}

/* 背景画像部分はワイドに */
.visual-bg {
    position: relative;
    /* レイヤー基準にする */
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    z-index: 1;
}


/* -- .visual-inner -- */
/* logo_plafig.png */
/* logo_gzl.png */

.visual-inner {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    max-width: 100%;
    z-index: 2;
    /* 前に出す */
}


/* 右上画像 */
.float-image {
    position: absolute;
    top: 10px;
    right: 2vw;
    width: 22%;
    /* 画像サイズを親幅の割合で指定（例：22%で約220px相当） */
    height: auto;
    max-width: 120px;
    /* 画像の実サイズより大きくならないように */
    z-index: 2;
}

/* 左上画像 */
.float-image_left {
    position: absolute;
    top: 10px;
    left: 2vw;
    width: 22%;
    /* 画像サイズを親幅の割合で指定（例：22%で約220px相当） */
    height: auto;
    max-width: 100px;
    /* 画像の実サイズより大きくならないように */
    z-index: 2;
}

.name-inner {
    width: 100%;
}

.name-inner img {
    width: 100%;
    height: auto;
    display: block;
}

#name img {
    width: 100%;
    height: auto;
    display: block;
}


/* エフェクト */
/* ●　最初上にいてスクロールするとするする来て最後に下の方の位置で着地 */

#stopper {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    max-width: 540px;
    display: flex;
    justify-content: center;
    transition: top 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);

    z-index: 3;
}

#stopper.fixed {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

#stopper.stopped {
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

/* #stopperの調整 */
#stopper.stopped {
    top: 58%;
}

/* #stopperの調整 おわり */

#stopper img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}


#name {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 1000px;
    /* 背景と揃えると自然 */
    z-index: 3;
    padding-top: 2vw;
}

/* 中身は PC で1000px、それ以下では縮む */
.name-inner {
    width: 100%;
}

.name-inner img {
    width: 100%;
    height: auto;
    display: block;
}

#name img {
    width: 100%;
    height: auto;
    display: block;
}


.sub_visual {
    margin: 30px auto 70px;
}

.sub_visual img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}


.sub_title picture img {
    display: block;
    margin: 0 auto;
}

.main_slider {
    max-width: 1200px;
    margin: 20px auto 50px;
}

.main_slider picture img {
    display: block;
    margin: 0 auto;
}


#gallery {
    margin-bottom: 100px;
}

.gallery_ul_gzl {
    display: flex;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
}

#gallery_cnt {
    background-color: #0d0d0d;
    padding: 30px 0;

}

figure {
    max-width: 300px;
}


figcaption {
    margin-top: 20px;
    line-height: 1.5;
}

/* #contents */
#contents {
    max-width: 1000px;
    margin: 0 auto;
}

/* point */

.point_box.third {
    background: url(../images/image13.png) no-repeat center top;
    background-size: cover;
    width: 100%;
    max-width: 480px;
    position: relative;
    aspect-ratio: 1 / 1;
}

.bonus_item {
    position: absolute;
    top: clamp(20px, 8vw, 50px);

    left: 0;
    width: 100%;
    text-align: center;
}



.point_content .point_box.third .txt,
.point_content .point_box.fourth .txt {
    padding: 1.2rem 0 0;
    line-height: 1.7;
}

.point_content .point_box.fourth .txt {
    padding: 1.1rem 0 0;
}

.point_box.third .title,
.point_box.fourth .title {
    font-size: 3rem;
    font-weight: bold;
}

.point_box.fourth {
    position: relative;
    width: 100%;
    max-width: 480px;
    color: #fff;
}


.point_box.fourth .pkg_paragraph {
    position: absolute;
    bottom: clamp(20px, 8vw, 50px);
    left: 0;
    width: 100%;
    text-align: center;

    color: #fff;

    z-index: 2;
    pointer-events: none;
}


.point_content {
    display: flex;
    align-items: stretch;
    /* 高さを揃える */
    gap: 20px;
}



.point_box.first,
.point_box.second {
    height: 430px;
    /* first second 共通の高さ */
}

.point_box.first {
    width: 545px;
    align-items: center;
    display: flex;
    padding: 0 5%;
    border-radius: 20px;
}

.point_box.second {
    width: 430px;
}

/* first li */
/* ポイント●部分 */

.point_box.first {
    list-style: none;
    padding: 4%;
    margin: 0;
    background-color: #b8b8b8;
}

.point_box.first li {
    display: flex;
    align-items: center;
    /* 縦中央揃え */
    gap: 12px;
    /* ●と文字の間隔 */
    margin-bottom: 20px;
    color: #050505;
    font-weight: bold;
}

.point_box.first li:first-child {
    font-size: 2.5rem;
}

.point_box.first li:last-child {
    margin-bottom: 0;
}


.point_box.first li::before {
    content: "";
    width: 50px;
    height: 50px;
    background: #626570;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ポイント●部分  END*/

/* normal */
.normal_title_s_txt p {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
}

.normal_title_s {
    max-width: 900px;

    margin: 0 auto;
}


.normal_txt p {
    padding-top: 23px;
    text-align: left;
}


#spec .right,
#contents_online .right {
    text-align: right;
}

/* online */

#contents_online {
    background-color: #03091a;
}


#contents {
    max-width: 1000px;
    margin: 0 auto;
}

.point_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 70px;
}

.online_section_title {
    background-color: #8fa7c4;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.online_section_title img {
    max-height: 100%;
    width: auto;
    display: block;
}

@media (max-width: 768px) {
    .online_section_title {
        height: 32px;
        padding: 1% 0;
    }
}


#spec {
    padding-bottom: 30px;
    margin: 16px;
}

.online_title_s {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    gap: 16px;
}



/* テキスト */
.online_title_s_txt p {
    font-size: clamp(16px, 4.5vw, 3rem);
    line-height: 1.7;
    font-weight: bold;
}

/* 画像 */
.dorsalfin_parts {
    flex-shrink: 0;
    /* ← 潰れ防止 */
}

.dorsalfin_parts img {
    max-height: clamp(40px, 26vw, 500px);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}





.series_num {
    font-size: 1.8rem;
}

h3 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}


.box {
    max-width: 1000px;
    /* 最大幅だけ制限 */
    width: 100%;
    margin: 0 auto;
    display: block;
    border: aliceblue solid;
    padding: 2%;
    margin-top: 30px;
}


#gzl .box a {
    text-decoration: none;
}

.link {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    /* 画像間の余白 */
    margin: 90px auto 0;
    max-width: 1000px;
    padding: 0 16px;
    /* スマホ時の左右余白 */
}

.link li {
    flex: 1;
    /* 均等幅にする */
    max-width: 450px;
    /* PC時の最大サイズ */
}

.link img {
    width: 100%;
    height: auto;
    display: block;
}

/* スマホ用 */
@media screen and (max-width: 768px) {
    .link {
        flex-direction: column;
        /* 縦並び */
        align-items: center;
    }

    .link li {
        max-width: 100%;
    }
}

.caution {
    max-width: 1000px;
    margin: 50px auto;
}

#gzl .shop {
    display: flex;
    justify-content: center;
    margin: 50px 0;
}

#gzl .shop a {
    padding: 31px 40px 33px;
    color: #FFFFFF;
    background: linear-gradient(0deg, #dc0a0a 0%, #dc0a0a 49%, #f50000 50%, #f50000 100%);
    text-align: center;
    border-radius: 10px;
    font-size: 186%;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
}