@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;
}

.pt3 {
    padding-top: 3%;
}

.pt5 {
    padding-top: 5%;
}

.pt6 {
    padding-top: 6%;
}

.pt7 {
    padding-top: 7%;
}

.pt8 {
    padding-top: 8%;
}

.pt10 {
    padding-top: 10%;
}

.pb4 {
    padding-bottom: 4%;
}

.pb7 {
    padding-bottom: 7%;
}

.pb9 {
    padding-bottom: 9%;
}

.pb10 {
    padding-bottom: 10%;
}

.pb12 {
    padding-bottom: 12%;
}

#inbox {
    overflow-x: clip;
}

#inbox::after {
    content            : "";
    display            : block;
    position           : fixed;
    inset              : 0;
    background         : url("../img/bg.jpg");
    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; */
    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);
    }
} */

.main__img {
    vertical-align: bottom;
}

.sp_none {
    display: none;
}

@media (min-width: 768px) {
    .sp_none {
        display: block;
    }

    .pc_none {
        display: none;
    }
}

/* リード */
#read .contents_inner {
    padding: 3% 0 4%;
}

#read .button_oubo {
    padding: 2% 0 1%;
}

/* 賞品 */
#present .contents_inner {
    padding: 4%;
}

/* 応募方法 */
#apply .contents_inner {
    padding: 4%;
}

#apply .button_oubo {
    padding: 6% 0 1%;
}

/* スタンプミッション紹介 */
#stamp .contents_inner {
    padding: 4% 9%;
}

/* 先着数量限定グッズ付き製品販売！ */
#product {
    background-color: #E36B8A;
    margin          : 4% 0;
}

#product .contents_inner {
    padding: 2% 3% 3%;
}

.product_box {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-between;
    padding        : 3% 0 0;
}

.product_box img {
    width  : 48%;
    padding: 0 0 2%;
}

/* 応募規約 */
#kiyaku .contents_inner {
    padding: 4% 0;
}

.main__kiyaku_box {
    position: relative;
}

.main__kiyaku {
    width          : 80%;
    height         : 50%;
    position       : absolute;
    overflow-y     : scroll;
    top            : 5%;
    right          : 0;
    left           : 0;
    margin         : 0 auto;
    font-size      : 14px;
}

.main__kiyaku>* {
    word-wrap     : break-word;
    letter-spacing: 0;
}

.main__kiyaku h5 {
    font-size  : 14px;
    font-weight: normal;
    margin     : 0;
    padding-top: 3%;
    line-height: 1.5;
}

.main__kiyaku h5:first-child {
    padding-top: 0;
}

.main__kiyaku p {
    margin: 0.8% 0 0 0;
}

.main__kiyaku a {
    text-decoration: underline;
    color          : #000;
}

.indent_step {
    padding-left: 4em !important;
    text-indent : -4em !important;
}

.main__kiyaku ul,
.main__kiyaku ol {
    padding-left: 1em;
    text-indent : -1em;
}

#kiyaku .button_oubo {
    padding: 6% 0 1%;
}

/* お問い合わせ */
#contact .contents_inner {
    padding: 4% 0 0;
}

.menu {
    position: relative;
}

.button04 {
    position: absolute;
    top     : 7%;
    left    : 16%;
    width   : 67%;
    height  : 5%;
}

.button05 {
    position: absolute;
    top     : 15%;
    left    : 16%;
    width   : 67%;
    height  : 5%;
}

.button06 {
    position: absolute;
    top     : 23%;
    left    : 16%;
    width   : 67%;
    height  : 5%;
}

.button07 {
    position: absolute;
    top     : 31%;
    left    : 16%;
    width   : 67%;
    height  : 9%;
}

.button08 {
    position: absolute;
    top     : 43%;
    left    : 16%;
    width   : 67%;
    height  : 5%;
}

.button09 {
    position: absolute;
    top     : 52%;
    left    : 16%;
    width   : 67%;
    height  : 5%;
}

#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: center;
    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;
}