@charset "UTF-8";

:root {
    --color-black: #000;
    --color-white: #fff;
    --color-white08: #ffffffcc;
    --color-primary: #ef6908;
    --color-primary_m: #f4791b;
    --color-primary_l: #fff6ef;
    --color-gray: #f7f7f7;
}

/* html {
    overflow-x: hidden;
} */

.inner {
    max-width: calc(430px - 40px);
    margin: 0 auto;
    padding: 0 20px;
}

.inner_max {
    max-width: 430px;
    margin: 0 auto;
    padding: 0;
}

.l-contents img {
    max-width: 100%;
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

.l-contents a {
    cursor: pointer;
    transition: all 0.3s ease-out;
}

.l-contents summary {
    display: block;
    list-style: none;
}

.l-contents summary::-webkit-details-marker {
    display:none;
}

.elm_anchor {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding-right: calc(32px + 19px);
    background: url("/denki/assets/img/merit/denkiapp/arrow_anchor.png") no-repeat right center;
    background-size: 19px auto;
    color: var(--color-primary);
    font-size: 16px;
    font-weight: bold;
    line-height: calc(23 / 16);
    text-align: center;
    letter-spacing: 0.08em;
}

.elm_bg_primary {
    background: var(--color-primary);
}

.elm_bg_wh {
    background: var(--color-white);
}

.elm_sec-title {
    width: fit-content;
    margin: 0 auto 40px;
    padding-bottom: 25px;
    background: url("/denki/assets/img/merit/denkiapp/bg_title_line_orange.png") no-repeat center bottom;
    background-size: 202px auto;
    color: var(--color-primary);
    font-size: 30px;
    font-weight: bold;
    line-height: calc(50 / 30);
    text-align: center;
    letter-spacing: -0.01em;
}

.elm_sec-title--sub {
    margin-inline: auto;
    padding-bottom: 28px;
    background-image: url("/denki/assets/img/merit/denkiapp/bg_title_line_white.png");
    color: var(--color-white);
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: 0.06em;
}

.elm_sec-title--sub.is-inverse {
    background-image: url("/denki/assets/img/merit/denkiapp/bg_title_line_orange.png");
    color: var(--color-primary);
}

.elm_acd-head {
    display: grid;
    place-content: center;
    height: 80px;
    border-radius: 22px;
    background: var(--color-white);
    cursor: pointer;
}

.elm_acd-head-title {
    position: relative;
    padding: 0 40px 0 10px;
    color: var(--color-primary);
    font-size: 17px;
    font-weight: bold;
    line-height: calc(28 / 18);
    text-align: center;
}

.elm_acd_icon {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    width: 18px;
    height: 18px;
    background: url("/denki/assets/img/merit/denkiapp/arrow_accordion.png") no-repeat center center;
    background-size: contain;
    transform: translateY(-50%);
}

.elm_acd[open] .elm_acd_icon {
    transform: translateY(-50%) rotate(180deg);
}

.elm_acd[open] .elm_body {
    margin-top: 35px;
}

/* #mv */
#mv {
    position: relative;
}

/* #fixbtn */
#mod_fixbtn {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--color-white08);
    text-align: center;
    z-index: 10;
    transition: all 0.3s ease-out;
}

#mod_fixbtn.is-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
}

#mod_fixbtn .inner_max {
    padding-top: 1em;
    padding-bottom: 1em;
}

.elm_fixbtn-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(calc(50% - 5px),183px));
    gap: 10px;
}

.elm_fixbtn-anchor {
    margin-top: 10px;
}

/* #mvbtn */
#mod_mvbtn {
    background-color: var(--color-white);
    text-align: center;
    margin-top: -10px;
    z-index: 10;
    transition: all 0.3s ease-out;
}

#mod_mvbtn .inner_max {
    padding-bottom: 50px;
}

/* #catch */
#sec_catch {
    background: var(--color-primary_m);
}

/* #function */
#sec_function {
    padding: 40px 0 clamp(88px, 0.036rem * 1.6 + 24.29vw, 105px);
}

#sec_function .mod_secImg:not(:nth-last-child(1 of .mod_secImg)) {
    margin-bottom: clamp(45px, -2.973rem * 1.6 + 25.71vw, 63px);
}

/* #recommend */
#sec_recommend {
    padding: 40px 0 clamp(40px,  -5.536rem * 1.6 + 35.71vw, 65px);
    background: linear-gradient(0deg, #ffcfaa 0%, #ffa057 86.21%, #ff7812 100%);
}

.sec_recommend-inner {
    background: url("/denki/assets/img/merit/denkiapp/bg_recommend02.png") no-repeat center 542px / 552px auto;
}

#sec_recommend .inner {
    background: url("/denki/assets/img/merit/denkiapp/bg_recommend01.png") no-repeat center 85px / 430px auto;
}

#sec_recommend .mod_secImg:not(:nth-last-child(1 of .mod_secImg)) {
    margin-bottom: 30px;
}

#sec_recommend .elm_sec-title--sub {
    margin-bottom: 295px;
}

/* #use */
#sec_use {
    padding: clamp(40px, -3.607rem * 1.6 + 27.14vw, 59px) 0 clamp(40px,  -4.259rem * 1.6 + 31.43vw, 67px);
}

#sec_use .elm_sec-title--sub {
    margin-bottom: 55px;
}

#sec_use .mod_secImg:not(:nth-last-child(1 of .mod_secImg)) {
    margin-bottom: 44px;
}

/* #easy */
#sec_easy {
    padding: clamp(40px, 0.682rem * 1.6 + 9.09vw, 50px) 0;
    background: var(--color-primary_l);
}


#sec_easy .elm_sec-title--sub {
    margin-bottom: 30px;
}

/* #start */
#sec_start {
    padding: clamp(40px, -2.643rem * 1.6 + 22.86vw, 50px) 0 clamp(40px, -4.893rem * 1.6 + 32.86vw, 50px);
    background: var(--color-primary);
}

/* #step */
#sec_step {
    padding-top: clamp(50px, 0.216rem * 1.6 + 14.55vw, 66px);
}

#sec_step .mod_secImg:not(:nth-last-child(1 of .mod_secImg)) {
    margin-bottom: 32px;
}

.sec_step-box {
    padding: 40px 20px 20px;
    border-radius: 16px;
    background: var(--color-gray);
}

@media screen and (min-width: 769px) {
    #sec_step {
        padding-bottom: 40px;
    }
}

@import url('/denki/assets/css/merit/plan.css');