/*
 * 参考
 * https://github.com/Andy-set-studio/modern-css-reset/blob/master/src/reset.css
*/

/* Box sizing rules */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default margin */

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ul {
    margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Set core root defaults */

html:focus-within {
    scroll-behavior: smooth;
}

/* Set core body defaults */

body {
    line-height: 1.5;
    min-height: 100vh;
    text-rendering: optimizeSpeed;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto;
}

/* Make images easier to work with */

img,
picture {
    display: block;
    max-width: 100%;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
    font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */

/*****************************************
 * 数値から単位を取り除く
 * 参考
 * https://css-tricks.com/snippets/sass/
******************************************/

/*****************************************
 * px→remの計算
 * 参考
 * https://webdou.net/sass-rem/
 * Sassではmath.div関数の使用が推奨のため、スラッシュ(/)演算子から変更
******************************************/

/*****************************************
 * vwの計算
 * 参考
 * https://webdou.net/sass-vw/
 * Sassではmath.div関数の使用が推奨のため、スラッシュ(/)演算子から変更
******************************************/

html {
    font-size: 16px;
}

body {
    color: #000;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s;
}

.br-sp {
    display: block;
}

.forPC {
    display: none;
}

main {
    overflow: hidden;
    position: relative;
}

ruby {
    display: inline-flex;
    flex-direction: column-reverse;
    align-items: center;
    vertical-align: bottom;
    line-height: 1;
    margin: 0 0.1em;
}

rt {
    display: block;
    text-align: center;
    color: #fff;
    text-shadow: 1.5px 2px 0 #006ab3;
    font-size: 6px;
    font-weight: bold;
    margin-bottom: -8px;
    letter-spacing: 0.1em;
}

ruby span {
    display: block;
    line-height: normal !important;
}

.header {
    /* background: #01214b; */
    background-image: linear-gradient(0deg, #006ebb 18%, #00aeeb 95%);
    /* height: 13.1578947368vw; */
    height: 16vw;
    top: 0;
    z-index: 999;
}

.header__inner {
    align-items: center;
    display: flex;
    /* height: inherit; */
    height: 100%;
    /* padding: 0 1.8421052632vw; */
    padding: 0 4px;
}

main {
    /* background: url(../img/img_bg_sp.png) no-repeat bottom center/contain; */
    /* background: url(../img/img_bg.jpg) no-repeat bottom center/cover;
    height: auto; */
    position: relative;
}
.contents {
    background: url(../img/img_bg-sp.jpg) no-repeat top center/100%;
    height: auto;
    position: relative;
}

.bg {
    position: relative;
}

.contents {
    padding-top: 30px;
}

.lead {
    margin-bottom: 9.2105263158vw;
    margin-top: 0;
    position: relative;
}

.lead__imgBox {
    width: 95%;
    margin: 0 auto 20px;
}

.lead__img {
    width: 54.1%;
    object-fit: contain;
    height: auto;
    margin: 0 auto;
}

.lead__movie {
    width: 90%;
    margin: 20px auto 0;
}

iframe {
    aspect-ratio: 16 / 9;
    width: 100% !important;
    height: auto !important;
}

.gallery {
    position: relative;
}

.gallery__inner {
    margin-inline: auto;
    /* max-width: 89.4736842105vw; */
    width: 100%;
}

.gallery__content {
    display: grid;
    grid-template-areas: 'A A' 'B C' 'D E';
    grid-template-columns: repeat(2, 1fr);
}
.gallery__image.--spUniTitle {
    width: 75%;
    margin: 0 auto;
}

.gallery__img.--spUniLead {
    width: 100%;
    object-fit: contain;
    height: auto;
    margin: 0 auto;
}

.gallery__img.--txt {
    width: 90%;
    margin: 0 auto;
}

.gallery__image.--uniform {
    margin: 0;
    width: 100%;
}

.gallery__imgBox.--sp {
    margin-top: 30px;
}

.gallery__image.--giveawayTitle {
    width: 80%;
    margin: 0 auto;
}

.gallery__image.--giveawayDate {
    width: 65%;
    margin: 0 auto;
}

.gallery__image.--giveaway {
    width: 90%;
    margin: 0 auto;
}

.gallery__text.pl_listMemo02 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.gridA {
    grid-area: A;
}

.gridB {
    grid-area: B;
}

.gridC {
    grid-area: C;
}

.gridD {
    grid-area: D;
}

.gridE {
    grid-area: E;
}

.gallery__title {
    margin-bottom: 2.6315789474vw;
}

.gallery__title__img img {
    height: auto;
    margin-inline: auto;
    max-width: 89.4736842105vw;
    width: 100%;
}

.gallery__item img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.gallery-text__img {
    height: 100%;
    margin-inline: auto;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 89.4736842105vw;
}

.giveaway__bg {
    background: url(../img/img_bg-sp.jpg) no-repeat top center/100%;
    height: auto;
    position: relative;
    padding-top: 50px;
}

.gallery__image.--giveawayAnnotation {
    width: 90%;
    margin: 20px auto 0;
}

.footer {
    background: #fff;
    padding: 10.7894736842vw 0 10vw;
    text-align: center;
}

.footer__official {
    margin-bottom: 9.2105263158vw;
}

.footer__logo {
    margin-bottom: 6.3157894737vw;
}

.header__logo {
    display: inline-block;
    /* max-width: 9.4736842105vw; */
    /* width: 100%; */
    width: auto;
    height: 80%;
    padding: 0;
}

.header__logo img {
    height: 100%;
    /* width: 100%; */
    width: auto;
    -o-object-fit: cover;
    object-fit: contain;
}

.footer__logo {
    display: inline-block;
    max-width: 29.2105263158vw;
    width: 100%;
}

.footer__logo img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.lead__text,
.gallery__text {
    color: #fff;
    font-feature-settings: 'halt';
    font-size: 3.9473684211vw;
    font-weight: 700;
    letter-spacing: 0.05em;
    /* line-height: 1.6666666667; */
    line-height: 2;
    text-align: center;
    text-shadow: 1px 1px #000;
}

.lead__text {
    text-shadow: 0.4vw 0.4vw 0 #006ab3;
    line-height: 2.345;
}

.lead__text.--ruby {
    display: flex;
    justify-content: center;
    align-items: center;
}

.lead__text.lead__text--aranami {
    /* font-size: 6.3157894737vw; */
    font-size: 4.7vw;
    font-weight: 900;
    margin-right: 0.3947368421vw;
    paint-order: stroke;
}
.lead__text.lead__text--uniform {
    font-size: 4.7vw;
    margin-right: 0.3947368421vw;
    font-weight: 900;
}

.lead__text span,
.gallery__text .gallery__text--title {
    font-size: 6.5789473684vw;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.5;
}

.gallery__text {
    text-shadow:
        0px 0px 10px #003fcc,
        0px 0px 10px #003fcc;
}

.gallery__text .gallery__text--title {
    letter-spacing: 0;
}

/* .gallery__text {
    color: #fff;
    font-size: 3.1578947368vw;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.6666666667;
    text-align: center;
}

.gallery__text span {
    font-size: 2.6315789474vw;
} */

.gallery__button__text {
    font-size: 3.6842105263vw;
    font-weight: 700;
    margin-bottom: 0.3947368421vw;
}

.footer__link {
    color: #1b65d1;
    display: inline-block;
    font-feature-settings: 'palt';
    font-size: 3.9473684211vw;
    letter-spacing: 0.05em;
    line-height: 6.5789473684vw;
    text-decoration: underline;
    text-underline-offset: 0.5263157895vw;
    transition: all 0.3s ease-out;
}

.footer__copyright {
    font-size: 2.6315789474vw;
    letter-spacing: 0.05em;
}

.bg {
    bottom: 0;
    content: '';
    position: absolute;
    width: 100%;
    z-index: -1;
}

.bg__image {
    height: 100%;
    width: 100%;
}

.bg__image img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center bottom;
    object-position: center bottom;
}

/* ボタン
-------------------------------------------------- */

.button {
    align-items: center;
    background: #0365f9;
    border-radius: 5.2631578947vw;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 3.9473684211vw;
    justify-content: center;
    letter-spacing: 0.05em;
    line-height: 1;
    margin-inline: auto;
    max-width: 76.3157894737vw;
    min-height: 10.5263157895vw;
    overflow: hidden;
    position: relative;
    text-align: center;
    transition: all 0.3s ease-out;
    width: 100%;
}

.button > img {
    height: 100%;
    max-width: 53.1578947368vw;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.arrow {
    content: '';
    height: 3.1578947368vw;
    position: absolute;
    right: 4.4736842105vw;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    width: 1.8421052632vw;
}

.arrow img {
    height: 100%;
    width: 100%;
}

.button:hover {
    opacity: 1;
}

.button:hover .arrow {
    right: 3.8157894737vw;
}

/* 追従ボタン
-------------------------------------------------- */

.floating-button {
    /* position: absolute; */
    position: fixed;
    /* right: 4.6052631579vw; */
    /* top: 83.5526315789vw; */
    /* right: 2vw; */
    /* bottom: 2vw; */
    right: 0;
    bottom: 0;
    transition: opacity 0.3s ease-out;
    z-index: 50;
    width: 34.6vw;
}

.floating-button__link {
    align-items: center;
    background: #0365f9;
    border-radius: 50%;
    box-shadow:
        0px 7px 9px rgba(33, 24, 21, 0.35),
        0px 0px 0px rgba(0, 0, 0, 0);
    display: flex;
    height: 23.1578947368vw;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: animation 0.3s ease-out;
    width: 23.1578947368vw;
}

.floating-button__link p {
    color: #fff;
    font-size: 2.6315789474vw;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.floating-button__link p span {
    font-size: 3.2894736842vw;
    line-height: 1.12;
}

.floating-button__link p .number {
    font-size: 3.9473684211vw;
    position: relative;
    top: 0.3947368421vw;
}

.loader {
    /* background: #01214b; */
		background-image: linear-gradient(0deg, #006ebb 18%, #00aeeb 95%);
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 1000;
}

.loader__logo {
    /* aspect-ratio: 72/74; */
    /* clip-path: inset(0% 100% 0% 0%); */
    clip-path: inset(0% 0% 100% 0%);
    left: 50%;
    max-width: 36.3157894737vw;
    min-width: 27.6315789474vw;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30vw;
    z-index: 1005;
}

.loader__logo img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.kv {
    position: relative;
    z-index: 1;
}

.kv__image {
    position: relative;
    width: 100%;
    z-index: -2;
}

.kv__image img {
    height: 100%;
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.kv__title {
    content: '';
    left: 50%;
    max-width: 84.7368421053vw;
    position: absolute;
    top: 39.4736842105vw;
    transform: translateX(-50%);
    width: 100%;
    z-index: 1;
}

.kv__title img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.u-mb40 {
    margin-bottom: 5.2631578947vw;
}

.u-mb50 {
    margin-bottom: 3.2894736842vw;
}

.u-mb60 {
    margin-bottom: 3.9473684211vw;
}

.u-mb70 {
    margin-bottom: 4.6052631579vw;
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media screen and (min-width: 768px) {
    html {
        font-size: 1.5384615385vw;
    }

    a:hover {
        opacity: 0.8;
    }

    .br-sp,
    .forSP {
        display: none !important;
    }

    .forPC {
        display: block;
    }

    .header {
        height: 5.9523809524vw;
    }

    .header__inner {
        /* padding: 0 2.2023809524vw; */
        padding: 0 6px;
    }

    /* main {
        background: url(../img/img_bg.jpg) no-repeat bottom center/cover;
        height: auto;
    } */
    .contents {
        background: url(../img/img_bg.jpg) no-repeat top center/100%;
        height: auto;
        padding-top: 4.86vw;
    }

    .lead {
        /* margin-bottom: 5.3571428571vw; */
        /* margin-top: 25.5952380952vw; */
        /* margin-top: 4.86vw; */
        margin-bottom: 4.167vw;
    }

    .lead__imgBox {
        width: 50vw;
        max-width: 720px;
        margin-bottom: 40px;
    }

    .lead__img {
        width: 86%;
    }

    rt {
        font-size: 0.6vw;
        margin-bottom: -0.8vw;
    }

    .lead__text.--ruby span {
        letter-spacing: 0.1em;
    }

    .gallery__inner {
        max-width: 64.2857142857vw;
        padding: 0 2.380952381vw;
    }

    .gallery__content {
        grid-template-areas: 'A B C' 'A D E';
        grid-template-columns: 2fr 1fr 1fr;
    }

    .gallery__title {
        margin-bottom: 1.25rem;
    }

    .gallery__title__img img {
        max-width: 42.5vw;
    }

    /* .gallery__text {
        margin-bottom: 2.9761904762vw;
    } */

    .gallery-text__img {
        width: 33.3333333333vw;
    }

    .footer {
        padding: 2.9761904762vw 0 4.5833333333vw;
    }

    .footer__official {
        margin-bottom: 2.619047619vw;
    }

    .footer__logo {
        margin-bottom: 2.619047619vw;
    }

    /* .header__logo {
        max-width: 4.2857142857vw;
    } */

    .footer__logo {
        max-width: 10.3571428571vw;
    }

    .lead__text {
        /* font-size: 1.4285714286vw; */
        font-size: 1.765vw;
        line-height: 2.333;
        text-shadow: 0.16vw 0.16vw 0 #006ab3;
    }
    .lead__text + .lead__text {
        margin-top: 8px;
    }

    .lead__text.lead__text--aranami {
        font-size: 3.2738095238vw;
        margin-right: 0.3571428571vw;
    }

    .lead__text span {
        /* font-size: 2.380952381vw; */
        font-size: 3.68vw;
        line-height: 1.25;
    }

    .lead__movie {
        margin-top: 5.14vw;
        width: 55.735vw;
        max-width: 760px;
    }

    .gallery__image {
        display: grid;
        place-content: center;
    }

    .gallery__image.--spUniTitle {
        width: 67.794vw;
        max-width: 100%;
    }

    .gallery__image.--giveawayTitle {
        width: 50%;
    }

    .gallery__image.--giveaway,
    .gallery__image.--giveawayAnnotation {
        width: 70%;
        margin: 0 auto;
    }

    .gallery__image.--giveawayAnnotation {
        margin-top: 12px;
    }

    .gallery__text {
        /* font-size: 1.0714285714vw; */
        font-size: 1.471vw;
        /* line-height: 1.5; */
        line-height: 2.25;
    }

    .gallery__text + .gallery__text {
        margin-top: 1.471vw;
    }

    .gallery__text .gallery__text--title {
        font-size: 2.941vw;
    }

    .gallery__text span {
        font-size: 0.7142857143vw;
    }

    .gallery__image.--spUniTitle {
        margin-bottom: 1vw;
    }

    .gallery__img.--spUniLead {
        width: 60%;
    }

    .gallery__image.--uniform {
        width: 90.221vw;
        max-width: 100%;
        display: grid;
        place-content: center;
    }

    .gallery__img + .gallery__image.--uniform {
        margin-top: 20px;
    }

    .gallery__text + .gallery__image {
        margin-top: 2.206vw;
    }

    .gallery__button {
        width: 55%;
        margin: 0 auto;
    }

    .gallery__button__text {
        font-size: 0.9523809524vw;
        margin-bottom: 0.1785714286vw;
    }

    .gallery__link {
        display: grid;
        place-content: center;
    }

    .giveaway__bg {
        background: none;
    }

    .footer__link {
        font-size: 1.1904761905vw;
    }

    .footer__copyright {
        font-size: 0.8333333333vw;
    }

    .button {
        border-radius: 1.7857142857vw;
        font-size: 1.4285714286vw;
        max-width: 23.8095238095vw;
        min-height: 3.5714285714vw;
    }

    .button > img {
        max-width: 13.3333333333vw;
    }

    .arrow {
        height: 0.9523809524vw;
        right: 1.6666666667vw;
        width: 0.4761904762vw;
    }

    .button:hover .arrow {
        right: 1.369047619vw;
    }

    .floating-button {
        /* right: 11.9047619048vw; */
        /* top: 59.5238095238vw; */
        width: 13.544vw;
        right: 1vw;
        bottom: 0;
    }

    .floating-button__link {
        height: 10.4761904762vw;
        width: 10.4761904762vw;
    }

    .floating-button__link p {
        font-size: 1.1904761905vw;
    }

    .floating-button__link p span {
        font-size: 1.4880952381vw;
    }

    .floating-button__link p .number {
        font-size: 1.7857142857vw;
        top: 0.1785714286vw;
    }

    .loader__logo {
        max-width: 10.9523809524vw;
        min-width: 8.3333333333vw;
    }

    .kv__title {
        max-width: 53.2142857143vw;
        top: 39.5833333333vw;
    }

    .u-mb40 {
        margin-bottom: 2.380952381vw;
    }

    .u-mb50 {
        margin-bottom: 2.9761904762vw;
    }

    .u-mb60 {
        margin-bottom: 3.5714285714vw;
    }

    .u-mb70 {
        margin-bottom: 4.1666666667vw;
    }
}

@media (min-width: 1040px) {
    html {
        font-size: 16px;
    }
}

@media (max-width: 375px) {
    html {
        font-size: 4.2666666667vw;
    }
}

.pl_listMemo02 > li {
    font-size: 2.6vw;
    text-align: left;
    display: block;
    position: relative;
    padding-left: 1.5em;
}
.pl_listMemo02 > li .pl_listMark01 {
    position: absolute;
    top: 0;
    left: 0;
}

@media screen and (min-width: 768px) {
    .pl_listMemo02 > li {
        font-size: 1vw;
    }
    .pl_listMemo02 > li .pl_listMark01 {
        top: 4px;
    }
}