@charset "UTF-8";

/**************************************************/
/* base */
/**************************************************/
@media (max-aspect-ratio: 12/7) {
    :root {
        font-size: 1.3333333333vw;
    }
}

@media (min-aspect-ratio: 12/7) {
    :root {
        font-size: 2.2857142857vh;
    }
}

@media (max-width: 767px) {
    :root {
        font-size: 4.4444444444vw;
    }
}

html {
    -webkit-font-smoothing : antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ Pro", "Hiragino Sans", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
    font-size  : 1rem;
    color      : #000;
    margin     : 0;
}

img {
    width       : 100%;
    /* max-width: 100%; */
}

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

#inbox {
    overflow-x: clip;
}

#inbox::after {
    content            : "";
    display            : block;
    position           : fixed;
    inset              : 0;
    background         : url("../img/bg.png") no-repeat;
    background-size    : cover;
    background-position: top;
    z-index            : -1;
}

@media (max-width: 767px) {
    #inbox::after {
        background: none;
    }
}

#inbox>.wrapper {
    display          : -webkit-box;
    display          : -ms-flexbox;
    display          : flex;
    -webkit-box-align: start;
    -ms-flex-align   : start;
    align-items      : flex-start;
    max-width        : 75rem;
    margin           : 0 auto;
}

#inbox>.wrapper>.inner {
    max-width       : 22.5rem;
    background-color: #fff;
    margin          : 0 auto;
}

/* @media (min-width: 768px) {
    #inbox>.wrapper>.inner {
        -webkit-box-shadow: 0 0.1875rem 0.375rem 0 rgba(0, 0, 0, 0.16);
        box-shadow        : 0 0.1875rem 0.375rem 0 rgba(0, 0, 0, 0.16);
    }
} */

.logo {
    max-width: 122px;
    position : absolute;
    top      : 3%;
    left     : 6%;
}

.main__img {
    vertical-align: bottom;
}

.pt2 {
    padding-top: 2%;
}

.pt3 {
    padding-top: 3%;
}

.pt4 {
    padding-top: 4%;
}

.pt5 {
    padding-top: 5%;
}

.pt6 {
    padding-top: 6%;
}

.pt7 {
    padding-top: 7%;
}

.pt8 {
    padding-top: 8%;
}

.pt9 {
    padding-top: 9%;
}

.pt10 {
    padding-top: 10%;
}

.pt11 {
    padding-top: 11%;
}

.pt12 {
    padding-top: 12%;
}

.pt13 {
    padding-top: 13%;
}

.pt14 {
    padding-top: 14%;
}

.pt15 {
    padding-top: 15%;
}

.pt16 {
    padding-top: 16%;
}

.pt17 {
    padding-top: 17%;
}

.pb2 {
    padding-bottom: 2%;
}

.pb3 {
    padding-bottom: 3%;
}

.pb4 {
    padding-bottom: 4%;
}

.pb5 {
    padding-bottom: 5%;
}

.pb6 {
    padding-bottom: 6%;
}

.pb7 {
    padding-bottom: 7%;
}

.pb8 {
    padding-bottom: 8%;
}

.pb9 {
    padding-bottom: 9%;
}

.pb10 {
    padding-bottom: 10%;
}

.pb11 {
    padding-bottom: 11%;
}

.pb12 {
    padding-bottom: 12%;
}

.pb13 {
    padding-bottom: 13%;
}

.pb14 {
    padding-bottom: 14%;
}

.pb15 {
    padding-bottom: 15%;
}

@keyframes updown1 {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
    }
}

.kv,
.story,
.maincast,
#campaign {
    background-color: #fff8fd;
}

/* MOVIE */
.movie {
    position        : relative;
    width           : 100%;
    background-color: #c3e4f1;
}

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

.movie_contents {
    position: absolute;
    top     : 0;
    right   : 0;
    left    : 0;
    margin  : 0 auto;
    width   : 100%;
    height  : 100%;
}

.slide-wrapper {
    width    : 100%;
    max-width: 100%;
    margin   : 0 auto;
}

.slick-list {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  padding-top: 50px;
  margin-top: -50px;
}

.slick-dots {
    bottom: -20px;
}

.slick-dots li button:before {
    color: #b7b7b7;
}

.slick-dots li.slick-active button:before {
    color: #f2f2f2;
}

.slick-dotted.slick-slider {
    margin-bottom: 0;
}

.movie_item01 {
    width           : 78%;
    background-color: #fff;
    border          : 2px solid #f9a0ee;
    border-radius   : 10px;
    margin          : 0 auto;
}

.movie_item02 {
    width           : 78%;
    background-color: #fff;
    border          : 2px solid #abe7f4;
    border-radius   : 10px;
    margin          : 0 auto;
}

.movie_item03 {
    width           : 78%;
    background-color: #fff;
    border          : 2px solid #8fffd7;
    border-radius   : 10px;
    margin          : 0 auto;
}

.movie_item04 {
    width           : 78%;
    position        : relative;
    background-color: #fff;
    background-clip : padding-box;
    border          : 2px solid transparent;
    border-radius   : 10px;
    margin          : 0 auto;
}

.movie_item04::before {
    content      : '';
    position     : absolute;
    top          : -2px;
    bottom       : -2px;
    left         : -2px;
    right        : -2px;
    z-index      : -1;
    background   : linear-gradient(45deg, #f6c8dc, #fdfbeb, #c5e3f7);
    border-radius: 10px;
}

.making {
    position: relative;
}

.making_img {
    position: absolute;
    width   : 80%;
    top     : -1rem;
    left    : 0;
    right   : 0;
    margin  : 0 auto;
    z-index : 100;
}

.vertical-video {
    width       : 100%;
    max-width   : 85%;
    aspect-ratio: 9 / 16;
    margin      : 0 auto 5%;
    max-height: 650px;
    overflow: hidden;   /* 縦にはみ出た余白をカット */
    position: relative;
}

.vertical-video02 {
    width       : 100%;
    max-width   : 85%;
    aspect-ratio: 9 / 16;
    margin      : 10% auto 5%;
    max-height: 650px;
    overflow: hidden;   /* 縦にはみ出た余白をカット */
    position: relative;
}

.vertical-video .instagram-media,
.vertical-video02 .instagram-media,
.vertical-video iframe,
.vertical-video02 iframe {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

/* GOODS */
.goods {
    background-image:
        url('../img/bg_goods.png');
    background-color   : #c3e3f1;
    background-size    : cover;
    background-position: top;
}

.button01 {
    display : inline-block;
    position: relative;
    z-index : 9999;
}

/* footer */
footer {
    background-color: #0a3d4f;
}

.sns_box {
    display        : flex;
    width          : 33%;
    justify-content: space-between;
    margin         : 0 auto;
    position       : absolute;
    right          : 0;
    left           : 0;
    margin         : 0 auto;
    z-index        : 999;
}

.float-button__wrap {
    position : fixed;
    max-width: 22.5rem;
    z-index  : 100;
    bottom   : 0;
}

.float-button__wrap img {
    max-width: 100%;
    height   : auto;
}

.float-button__flex {
    display: flex;
}

#inbox>.wrapper>.sidebar {
    position: sticky;
    top     : 0;
    width   : 26.25rem;
    height  : 100vh;
}

@media (max-width: 767px) {
    #inbox>.wrapper>.sidebar {
        display: none;
    }
}

/* #inbox>.wrapper>.sidebar .body {
    padding           : 1.625rem 0;
    height            : calc(100vh - 5.625rem);
    -webkit-box-sizing: border-box;
    box-sizing        : border-box;
    overflow          : hidden;
} */

#inbox>.wrapper>.sidebar .body .l-spnav-content {
    width         : -webkit-fit-content;
    width         : -moz-fit-content;
    width         : fit-content;
    min-width     : 21.25rem;
    margin-inline : auto;
    padding-bottom: 0;
}

#inbox>.wrapper>.sidebar>.inner {
    background-size: 75rem auto;
    height         : 100%;
}

#inbox>.wrapper>.sidebar.-left .l-spnav-content,
#inbox>.wrapper>.sidebar.-right .l-spnav-content {
    display        : flex;
    justify-content: end;
    align-items    : center;
    height         : 100vh;
}

.l-spnav-content {
    padding              : 0 2rem;
    -webkit-box-sizing   : border-box;
    box-sizing           : border-box;
    height               : 100%;
    min-height           : 43.75rem;
    display              : -webkit-box;
    display              : -ms-flexbox;
    display              : flex;
    -webkit-box-orient   : vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction   : column;
    flex-direction       : column;
}