@charset "UTF-8";

.wrap {
    font-feature-settings: 'palt';
    font-weight: 500;
    --color-red:#c6291d;
    --color-dark-red:#af3333;
    --color-yellow:#f3d700;
    --color-white:#fff;
    color: #000;
    overflow: clip;
}
.wrap img {
    vertical-align: bottom;
    height: auto;
    width: 100%;
}
.font_roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings:"wdth" 100;
}
/* font-size */
@media (min-width: 1200px) {
    .wrap {
		font-size: 1px;
    }
}
@media (max-width: 1199px) and (min-width: 768px) {
    .wrap {
		font-size: calc(100 / 1200 * 1vw);
    }
}
@media (max-width: 767px) {
    .wrap {
        font-size: calc(100 / 750 * 1vw);
	}
}

/* common */
@media (min-width: 768px) {
    [data-disp-only]:not([data-disp-only~='pc']) {
        display: none !important;
    }
    .hover_opacity {
        transition: opacity .3s;
    }
    .hover_opacity:hover {
        opacity: .7;
    }
}
@media (max-width: 767px) {
    [data-disp-only]:not([data-disp-only~='sp']) {
        display: none !important;
    }
}

/* main_content */
.color_red {
    color: var(--color-red);
}
.color_yellow {
    color: var(--color-yellow);
}
.bg_yellow {
    background-color: var(--color-yellow);
}
.bg_orange {
    background-color: #fba601;
}
.section_divider {
    padding-top: 32em;
    position: relative;
}
.section_divider_line {
    position: absolute;
    top: -32em;
    left: 0;
    width: 100%;
    height: 64em;
    display: flex;
    align-items: center;
    gap: 16em;
    z-index: 1;
}
.section_divider_line::before,
.section_divider_line::after {
    content: '';
    display: inline-flex;
    width: 32em;
    height: 100%;
}
.section_divider_line::before {
    background: url(../images/divider_l.png) no-repeat left center / contain;
}
.section_divider_line::after {
    background: url(../images/divider_r.png) no-repeat right center / contain;
}
.section_divider_line_inner {
    flex: 1 1 auto;
    height: 24em;
    background:  url(../images/divider_m.png) repeat-x center center;
    background-size: 56em auto;
    background-repeat: space;
}

.inner {
    max-width: 1152em;
    margin: auto;
}
@media (min-width: 768px) {
}
@media (max-width: 767px) {
    .section_divider_line_inner {
        background-size: auto 100%;
    }
}


/* mv */
.mv {
    max-width: 1920em;
    margin: auto;
}

/* anchor */
.anchor_list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8em;
}
.anchor_link {
    background-color: var(--color-red);
    display: block;
    color: var(--color-white);
    padding-block: 8em;
    box-shadow: 2em 3em 0 0 rgba(51, 51, 51, 0.8);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.14;
    font-weight: var(--bold);
}
.anchor_list a {
    text-decoration: none;
}
@media (min-width: 768px) {
    .anchor_list {
        margin-top: 11em;
    }
    .anchor_link {
        min-width: 138em;
        min-height: 56em;
        border-radius: 6em;
        transition: color .4s, background .4s;
    }
    .anchor_link:hover {
        background-color: var(--color-white);
        color: var(--color-red);
    }
    .anchor_link_txt_inner {
        font-size: 16em;
        line-height: calc(18.59/16);
    }
}
@media (max-width: 767px) {
    .anchor_link {
        min-width: 220em;
        min-height: 80em;
        border-radius: 16em;
    }
    .anchor_link_txt_inner {
        font-size: 28em;
    }
}


/* requirement */
.section_target_condition {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.section_target {
    position: relative;
}
.section_condition {
    position: relative;
}
.requirement_ttl {
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% 0;
    background: url(../images/requirement_ttl.png) no-repeat center center / contain;
    text-align: center;
    z-index: 2;
    font-weight: 900;
}
.requirement_ttl_s {
    padding-right: 0.2em;
    position: relative;
    top: -0.1em;
}
.requirement_ttl_l {
    color: var(--color-red);
}
.requirement_content {
    background-color: var(--color-white);
    border: solid var(--color-red);
    box-shadow: 2em 3em 4em 0 rgba(0, 0, 0, 0.32);
    border-radius: 32em;
    text-align: center;
    height: 100%;
    position: relative;
}
.requirement_content::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: solid var(--color-yellow);
    pointer-events: none;
}
.target_block_wrap {
    display: flex;
}
.target_subttl {
    color: var(--color-red);
    position: relative;
}
.target_subttl::before {
    content: '';
    display: block;
    position: absolute;
    background: url(../images/icon_check.svg) no-repeat right center / contain;
    top: 0;
    left: 50%;
    translate: -50% 0;
}
.target_img {
    margin-inline: auto;
}
.target_note {
    background-color: #f5f5f5;
    margin-inline: auto;
    position: relative;
    color: #333;
}
[class].target_note_f {
    position: absolute;
    z-index: 2;
}
.target_date_wrap {
    display: flex;
    justify-content: center;
    font-weight: 700;
    align-items: baseline;
    gap: 2em;
    line-height: 1;
    margin-left: 73em;
    margin-bottom: 2em;
}
.odometer-digit {
    margin: auto;
    text-align: center;
    background-color: #333;
    color: var(--color-white);
    line-height: 1;
    margin-inline: 0.05em;
    border-radius: 4px;
}
.odometer-digit-spacer {
    min-width: 1em;
}
.target_date_month .odometer-digit:nth-child(1) {
    display: none;
}
.target_note_in {
    font-weight: 700;
}
.condition_txt {
    font-weight: 700;
}
.target_catch_inner {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.target_catch_txt {
    font-weight: 800;
}
.target_catch_img {
    display: block;
}
.target_catch_note {
    display: block;
    text-align: left;
}
.bnr_line_app {
    display: block;
    box-shadow: 2em 4em 8em rgba(0, 0, 0, 0.5);
    border-radius: 8em;
}
.section_target_note_wrap {
    background-color: #f5f5f5;
    border-radius: 16em;
}
.section_target_note_ttl {
    font-weight: 700;
    line-height: 1;
}
.section_target_note_list > li {
    padding-left: 0.65em;
    text-indent: -0.65em;
}
@media (min-width: 768px) {
    .section_requirement {
        margin-top: 85em;
        padding-top: 79em;
    }
    .section_target_condition {
        gap: 16em;
    }
    .section_target,
    .section_condition {
        padding-top: 27em;
    }
    .section_target {
        flex: 1 1 auto;
    }
    .section_condition {
        width: 395em;
    }
    .requirement_ttl {
        width: 314em;
        height: 62em;
        padding-top: 6em;
    }
    .requirement_ttl_s {
        font-size: 16em;
    }
    .requirement_ttl_l {
        font-size: 24em;
    }
    .requirement_content {
        padding: 57em 0 27em;
        border-width: 6em;
    }
    .requirement_content::before {
        border-width: 2em;
        border-radius: 26em;
    }
    .target_block + .target_block {
        border-left: 1px solid var(--color-red);
    }
    .target_block {
        width: 50%;
    }
    .target_subttl {
        padding-top: 24em;
    }
    .target_subttl::before {
        width: 28em;
        height: 18em;
    }
    .target_subttl_in {
        font-size: 18em;
        line-height: calc(26/18);
    }
    .target_txt {
        margin-top: 7em;
        min-height: 64em;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .target_txt_in {
        font-size: 14em;
        line-height: calc(22/14);
    }
    .target_img {
        width: 301em;
        margin-top: 12em;
    }
    .target_note {
        max-width: 300em;
        margin-top: 16em;
        padding: 8em 8em 5em;
    }
    [class].target_note_f {
        top: -11%;
        left: 4%;
        width: 72em;
    }
    .target_date_year {
        font-size: 24em;
        min-width: calc(80 / 24 * 1em);
    }
    .target_date_month {
        font-size: 24em;
        min-width: calc(40 / 24 * 1em);
    }
    .target_date_label {
        font-size: 16em;
    }
    .target_note_in {
        font-size: 16em;
        line-height: calc(24/16);
    }
    .condition_block {
        padding: 60em 40em 27em;
    }
    .condition_txt_in {
        font-size: 16em;
        line-height: calc(24/16);
    }
    .condition_img {
        margin-top: 12em;
    }
    .target_catch {
        margin-top: 40em;
    }
    .target_catch_inner {
        gap: 32em;
    }
    .target_catch_txt {
        font-size: 42em;
        padding-top: calc(40 / 42 * 1em);
    }
    .target_catch_img {
        width: 478em;
    }
    .target_catch_note {
        margin-top: 13em;
    }
    .target_catch_note_in {
        font-size: 14em;
        line-height: calc(18/14);
    }
    .bnr_line_app {
        margin-top: 22em;
    }
    .section_target_note_wrap {
        margin-top: 8em;
        padding: 16em 18em;
    }
    .section_target_note_ttl_in {
        font-size: 14em;
    }
    .section_target_note_list {
        font-size: 14em;
        line-height: calc(22/14);
        margin-top: calc(12/14 * 1em);
    }
}
@media (max-width: 767px) {
    .section_requirement {
        margin-top: 95em;
        padding-top: 82em;
        padding-inline: 40em;
    }
    .section_target_condition {
        flex-direction: column;
        gap: 32em;
    }
    .section_target,
    .section_condition {
        padding-top: 60em;
    }
    .requirement_ttl {
        width: 625em;
        height: 120em;
        padding-top: 10em;
    }
    .requirement_ttl_s {
        font-size: 32em;
    }
    .requirement_ttl_l {
        font-size: 48em;
    }
    .requirement_content {
        padding: 65em 26em 28em;
        border-width: 12em;
    }
    .requirement_content::before {
        border-width: 4em;
        border-radius: 20em;
    }
    .target_block_wrap {
        flex-direction: column;
    }
    .target_block + .target_block {
        border-top: 1px solid var(--color-red);
        margin-top: 40em;
        padding-top: 48em;
    }
    .target_block {
        padding-top: 35em;
    }
    .target_subttl {
        padding-top: 42em;
    }
    .target_subttl::before {
        width: 50em;
        height: 34em;
    }
    .target_subttl_in {
        font-size: 36em;
        line-height: calc(52/36);
    }
    .target_txt {
        margin-top: 14em;
    }
    .target_txt_in {
        font-size: 28em;
        line-height: calc(44/28);
    }
    .target_img {
        width: 96%;
        width: 100%;
        margin-top: 26em;
    }
    .target_note {
        margin-top: 33em;
        padding: 24em 0em;
    }
    [class].target_note_f {
        top: -7%;
        left: 4%;
        width: 152em;
    }
    .target_date_wrap {
        margin-left: 138em;
        margin-bottom: 12em;
    }
    .target_date_year {
        font-size: 48em;
    }
    .target_date_month {
        font-size: 48em;
    }
    .target_date_label {
        font-size: 32em;
    }
    .target_note_in {
        font-size: 32em;
        line-height: calc(48/32);
    }
    .condition_block {
        padding: 92em 26em 28em;
    }
    .condition_txt_in {
        font-size: 32em;
        line-height: 1.5;
    }
    .condition_img {
        margin-top: 22em;
    }
    .target_catch {
        margin-top: 33em;
    }
    .target_catch_inner {
        flex-direction: column;
        align-items: center;
        gap: 18em;
    }
    .target_catch_txt {
        font-size: 56em;
    }
    .target_catch_note {
        margin-top: 33em;
    }
    .target_catch_note_in {
        font-size: 22em;
        line-height: calc(32/22);
    }
    .target_catch_img {
        width: 639em;
    }
    .bnr_line_app {
        margin-top: 37em;
        border-radius: 16em;
    }
    .section_target_note_wrap {
        margin-top: 18em;
        padding: 32em 44em;
    }
    .section_target_note_ttl_in {
        font-size: 28em;
    }
    .section_target_note_list {
        font-size: 24em;
        line-height: calc(36/24);
        margin-top: calc(16/24 * 1em);
    }
}


/* section_smart */
.section_smart {
    position: relative;
}
.section_smart_ttl {
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    z-index: 2;
}
.section_smart_content {
    background-color: #f0e4c8;
    box-shadow: 4.589em 6.553em 8em 0 rgba(0, 0, 0, 0.32);
}
.section_smart_content_inner {
    background: #f0e4c8 url(../images/smart_bg.jpg) repeat center top;
    background-size: 780em auto;
    display: flex;
}
.section_smart_info {
    text-align: center;
}
.section_smart_info_txt {
    line-height: 1;
    position: relative;
    display: inline-block;
}
.section_smart_info_txt::before,
.section_smart_info_txt::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: url(../images/smart_deco.svg) no-repeat center center / contain;
}
.section_smart_info_txt::before {
    left: 0;
}
.section_smart_info_txt::after {
    right: 0;
    transform: rotateY(-180deg);
}
.section_smart_info_txt_in {
    color: var(--color-red);
    font-weight: 900;
}
.section_smart_link {
    position: relative;
    z-index: 1;
    display: inline-block;
    overflow: hidden;
}
@media (min-width: 768px) {
    .section_banner {
        margin-top: 80em;
        padding-block: 80em 87em;
    }
    .section_smart {
        padding-top: 46em;
    }
    .section_smart_ttl {
        width: 498em;
        height: 94em;
        background: url(../images/smart_ttl_bg.png) no-repeat center center / contain;
    }
    .section_smart_ttl_in {
        font-size: 28em;
    }
    .section_smart_content {
        padding: 8em;
        border-radius: 32em;
    }
    .section_smart_content_inner {
        padding: 71em 32em 32em;
        border: 3em solid var(--color-red);
        border-radius: 26em;
        align-items: flex-end;
    }
    .section_smart_info_txt {
        padding-inline: 37em;
    }
    .section_smart_info_txt::before,
    .section_smart_info_txt::after {
        width: 31em;
        height: 39em;
    }
    .section_smart_info_txt_in {
        font-size: 29.15em;
    }
    .section_smart_info_img {
        margin-top: 10em;
    }
    .section_smart_link_wrap {
        margin-left: 30em;
        position: relative;
        width: 504em;
    }
    .section_smart_link_wrap::before {
        content: '';
        display: block;
        position: absolute;
        bottom: 80%;
        right: 83em;
        width: 150em;
        height: 220em;
        rotate: -10deg;
        background: url(../images/smart_hand.svg) no-repeat center center / contain;
        clip-path: polygon(0 0, 100% 0%, 100% 95%, 0% 83%);
    }
    .section_smart_link {
        border-radius: 10em;
        box-shadow: 5.736em 8.192em 30em 0 rgba(0, 0, 0, 0.2);
    }
}
@media (max-width: 767px) {
    .section_banner {
        margin-top: 80em;
        padding: 79em 40em 88em;
    }
    .section_smart {
        padding-top: 60em;
    }
    .section_smart_ttl {
        width: 622em;
        height: 116em;
        background: url(../images/sp/smart_ttl_bg.png) no-repeat center center / contain;
    }
    .section_smart_ttl_in {
        font-size: 36em;
    }
    .section_smart_content {
        padding: 12em;
        border-radius: 32em;
        position: relative;
        overflow: hidden;
    }
    .section_smart_content_inner {
        padding: 84em 32em 28em;
        flex-direction: column;
        border: 4em solid var(--color-red);
        border-radius: 26em;
    }
    .section_smart_info_txt {
        padding-inline: 40em;
    }
    .section_smart_info_txt::before,
    .section_smart_info_txt::after {
        width: 32em;
        height: 42em;
    }
    .section_smart_info_txt_in {
        font-size: 32em;
    }
    .section_smart_info_img {
        margin-top: 18em;
    }
    .section_smart_link_wrap {
        padding-right: 150em;
        margin-top: 26em;
    }
    .section_smart_link {
        border-radius: 16em;
        box-shadow: 4em 6.928em 16em 0 rgba(0, 0, 0, 0.5);
    }
    .section_smart_content::before {
        content: '';
        display: block;
        position: absolute;
        bottom: -17em;
        right: -8em;
        width: 190em;
        height: 310em;
        rotate: -10deg;
        background: url(../images/smart_hand.svg) no-repeat center center / contain;
    }
}


/* section_coupon */
.section_coupon {
    background-color: #f0e4c8;
    box-shadow: 4.589em 6.553em 8em 0 rgba(0, 0, 0, 0.32);
}
.section_coupon_inner {
    display: flex;
    align-items: center;
}
.section_coupon_ttl {
    color: var(--color-white);
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.section_coupon_ttl_bottom {
    display: flex;
    align-items: flex-end;
}
.section_coupon_ttl_left {
    display: flex;
    flex-direction: column;
}
.section_coupon_content {
    position: relative;
    flex: 1 1 auto;
}
.section_coupon_f {
    position: absolute;
    z-index: 1;
}
.section_coupon_info {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.section_coupon_info::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: url(../images/off30_pop.svg) no-repeat center center / contain;
}
.section_coupon_info_catch {
    position: relative;
    z-index: 1;
    font-weight: 700;
    color: #c62b1e;
}
.section_coupon_info_inner {
    display: flex;
    align-items:end;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.section_coupon_txt {
    position: relative;
    z-index: 1;
}
@media (min-width: 768px) {
    .section_coupon {
        margin-top: 40em;
        padding: 8em;
        border-radius: 32em;
    }
    .section_coupon_inner {
        border: 3em solid var(--color-red);
        border-radius: 26em;
        padding-left: 40em;
        background: var(--color-yellow) url(../images/coupon_bg.jpg) no-repeat center center / cover;
    }
    .section_coupon_ttl {
        width: 499em;
        height: 195em;
        background: url(../images/off30_ttl_bg.png) no-repeat center center / contain;
        gap: 10em;
        padding-bottom: 8em;
    }
    .section_coupon_ttl_left {
        gap: 10em;
    }
    .section_coupon_ttl_bottom {
        gap: 5em;
        padding-left: 10em;
    }
    .section_coupon_ttl_s {
        font-size: 32em;
    }
    .section_coupon_ttl_m {
        font-size: 37.81em;
    }
    .section_coupon_ttl_l {
        font-size: 45.38em;
    }
    .section_coupon_ttl_xl {
        font-size: 98.31em;
    }
    .section_coupon_f {
        width: 165em;
        top: 5.2%;
        left: 5.3%;
    }
    .section_coupon_next {
        font-size: 27.2em;
        line-height: calc(34/27);
        padding-bottom: calc(8 / 27.2 * 1em);
    }
    .section_coupon_off30 {
        width: 333em;
    }
    .section_coupon_txt {
        width: 402em;
    }
    .section_coupon_info {
        padding-block: 60em 65em;
        gap: 7em;
    }
    .section_coupon_info::before {
        width: 493em;
        height: 339em;
    }
    .section_coupon_info_catch {
        font-size: 19.2em;
        line-height: calc(25.6/19.2);
    }
    .section_coupon_info_inner {
        gap: 10em;
    }
}
@media (max-width: 767px) {
    .section_coupon {
        margin-top: 90em;
        padding: 12em;
        border-radius: 32em;
    }
    .section_coupon_inner {
        border: 3em solid var(--color-red);
        border-radius: 26em;
        flex-direction: column;
        background: var(--color-yellow) url(../images/sp/coupon_bg.jpg) no-repeat center center / cover;
    }
    .section_coupon_ttl {
        width: 622em;
        height: 243em;
        background: url(../images/sp/off30_ttl_bg.png) no-repeat center center / contain;
        margin-top: -70em;
        padding-bottom: 11em;
        gap: 12em;
    }
    .section_coupon_ttl_left {
        gap: 10em;
    }
    .section_coupon_ttl_bottom {
        gap: 15em;
    }
    .section_coupon_ttl_s {
        font-size: 40em;
    }
    .section_coupon_ttl_m {
        font-size: 47.27em;
    }
    .section_coupon_ttl_l {
        font-size: 56.72em;
    }
    .section_coupon_ttl_xl {
        font-size: 122.89em;
    }
    .section_coupon_f {
        width: 212em;
        top: 1%;
        left: -7%;
    }
    .section_coupon_next {
        font-size: 34em;
        line-height: calc(42.77/34);
    }
    .section_coupon_off30 {
        width: 412em;
    }
    .section_coupon_txt {
        width: 500em;
    }
    .section_coupon_info {
        padding-block: 60em 59em;
        gap: 12em;
    }
    .section_coupon_info::before {
        width: 615em;
        height: 423em;
        right: auto;
        left: -21em;
    }
    .section_coupon_info_catch {
        font-size: 24em;
        line-height: calc(32/24);
    }
    .section_coupon_info_inner {
        gap: 15em;
    }
}

/* section_other_link */
.section_other_link {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bnr_hajimete_wrap {
    position: relative;
    text-align: center;
}
.bnr_hajimete {
    display: block;
    position: relative;
    box-shadow: 5.736em 8.192em 0 0 rgba(51, 51, 51, 0.8);
    overflow: hidden;
    border-radius: 16em;
}
.bnr_hajimete::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 8em solid var(--color-white);
    border-radius: 16em;
}
.bnr_hajimete_ttl {
    color: var(--color-red);
    background-color: var(--color-white);
    display: inline-block;
    font-weight: 700;
    position: absolute;
    bottom: 100%;
}
.bnr_hajimete_ttl::before,
.bnr_hajimete_ttl::after {
    content: '';
    display: block;
    position: absolute;
    width: 40em;
    height: 100%;
    top: 0;
    transform-origin: 0% 100%;
    background-color: var(--color-white);
}
.bnr_hajimete_ttl::before {
    border-left: solid black;
    left: 0;
    transform: skew(40deg, 0deg);
}
.bnr_hajimete_ttl::after {
    border-right: solid black;
    right: 0;
    transform: skew(-40deg, 0deg);
}
.bnr_hajimete_ttl_in {
    position: relative;
    z-index: 1;
    display: inline-block;
    min-width: 278px;
}
@media (min-width: 768px) {
    .section_other_link {
        margin-top: 78em;
    }
    .bnr_hajimete_wrap {
        width: 536em;
    }
    .bnr_hajimete_ttl {
        left: 44em;
    }
    .bnr_hajimete_ttl::before,
    .bnr_hajimete_ttl::after {
        border-width: 3em;
    }
    .bnr_hajimete_ttl_in {
        font-size: 20.8em;
    }
}
@media (max-width: 767px) {
    .section_other_link {
        flex-direction: column;
        margin-top: 56em;
        gap: 110em;
    }
    .bnr_hajimete_ttl {
        left: 56em;
    }
    .bnr_hajimete_ttl::before,
    .bnr_hajimete_ttl::after {
        border-width: 5em;
    }
    .bnr_hajimete_ttl_in {
        font-size: 26em;
    }
}

/* btn_shop */
.btn_shop {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-dark-red);
    box-shadow: 5.736em 8.192em 0 0 rgba(51, 51, 51, 0.8);
    border: 8em solid var(--color-white);
    text-decoration: none;
    text-align: center;
    color: var(--color-white);
    position: relative;
}
.btn_shop_icon {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.btn_shop_icon svg {
    fill: var(--color-white);
}
.btn_shop:hover {
    background-color: var(--color-white);
    color: var(--color-dark-red);
    border-color: var(--color-dark-red);
}
.btn_shop:hover .btn_shop_icon svg {
    fill: var(--color-dark-red);
}
.btn_shop_inner {
    display: flex;
    flex-direction: column;
}
.btn_shop_txt {
    font-weight: 700;
}
.btn_shop_note_wrap {
    display: flex;
    align-items: center;
    gap: 10em;
    justify-content: center;
}
.btn_campaign_mark {
    width: 98em;
    height: 46em;
    background: url(../images/mark_campign.png) no-repeat center center / contain;
}
@media (min-width: 768px) {
    .btn_shop {
        width: 560em;
        height: 120em;
        border-radius: 60em;
    }
    .btn_shop_txt {
        font-size: 24em;
    }
    .btn_shop_note_txt {
        font-size: 16em;
    }
    .btn_shop_icon {
        width: 20em;
        height: 20em;
        right: 27em;
    }
}
@media (max-width: 767px) {
    .btn_shop {
        width: 660em;
        height: 160em;
        border-radius: 80em;
    }
    .btn_shop_txt {
        font-size: 32em;
    }
    .btn_shop_note_txt {
        font-size: 22em;
    }
    .btn_shop_icon {
        width: 22em;
        height: 25em;
        right: 40em;
    }
}


/* price */
.section_price {
    --color-1day: #e16001;
    --color-2week: #d55478;
    --color-astigmatism: #219f17;
    --color-dual_use: #a84fae;
    --color-color: #2a8dae;
    padding-top: 80em;
    padding-bottom: 87em;
}
.price_ttl_wrap {
    position: relative;
    text-align: center;
    padding-top: 110em;
}
.price_ttl_f {
    width: 441em;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -300em;
}
.price_ttl {
    display: flex;
    color: #c62b1e;
    justify-content: center;
    align-items: center;
    line-height: 1;
    gap: 22em;
}
.price_ttl_left {
    display: flex;
    flex-direction: column;
    gap: 12em;
}
.price_ttl_s {
    font-size: 25.16em;
}
.price_ttl_m {
    font-size: 61.17em;
}
.price_ttl_off40 {
    width: 340em;
}

.section_1day {
    --theme-color: var(--color-1day);
}
.section_2week {
    --theme-color: var(--color-2week);
}
.section_astigmatism {
    --theme-color: var(--color-astigmatism);
}
.section_dual_use {
    --theme-color: var(--color-dual_use);
}
.section_color {
    --theme-color: var(--color-color);
}
.price_anchor_list {
    display: flex;
    justify-content: center;
}
.price_anchor_link {
    display: block;
    font-weight: 900;
    text-decoration: none;
}
.price_anchor_link_circle {
    width: 156em;
    height: 156em;
    background-color: var(--color-white);
    display: flex;
    border-radius: 50%;
    border: 8em solid;
    align-items: center;
    justify-content: center;
    box-shadow: 5.736em 8.192em 0 0 rgba(51, 51, 51, 0.8);
    position: relative;
    z-index: 2;
}
.price_anchor_link_1day .price_anchor_link_circle {
    border-color: var(--color-1day);
}
.price_anchor_link_2week .price_anchor_link_circle {
    border-color: var(--color-2week);
}
.price_anchor_link_astigmatism .price_anchor_link_circle {
    border-color: var(--color-astigmatism);
}
.price_anchor_link_dual_use .price_anchor_link_circle {
    border-color: var(--color-dual_use);
}
.price_anchor_link_color .price_anchor_link_circle {
    border-color: var(--color-color);
}
.price_anchor_link_in {
    font-size: 32em;
}
.price_anchor_link_arrow {
    margin: 16em auto 0;
    width: 64em;
    display: block;
}
.price_anchor_link_arrow svg {
    width: 100%;
    height: auto;
}
.price_anchor_link_1day .price_anchor_link_arrow svg {
    fill: var(--color-1day);
}
.price_anchor_link_2week .price_anchor_link_arrow svg {
    fill: var(--color-2week);
}
.price_anchor_link_astigmatism .price_anchor_link_arrow svg {
    fill: var(--color-astigmatism);
}
.price_anchor_link_dual_use .price_anchor_link_arrow svg {
    fill: var(--color-dual_use);
}
.price_anchor_link_color .price_anchor_link_arrow svg {
    fill: var(--color-color);
}
@media (min-width: 768px) {
    .price_anchor_list {
        gap: 40em;
        margin-top: 24em;
    }
    .price_anchor_link_circle {
        transition: background .4s, color .4s, border-color .4s;
    }
    .price_anchor_link:hover .price_anchor_link_circle {
        border-color: var(--color-white);
        color: var(--color-white);
    }
    .price_anchor_link_1day:hover .price_anchor_link_circle {
        background-color: var(--color-1day);
    }
    .price_anchor_link_2week:hover .price_anchor_link_circle {
        background-color: var(--color-2week);
    }
    .price_anchor_link_astigmatism:hover .price_anchor_link_circle {
        background-color: var(--color-astigmatism);
    }
    .price_anchor_link_dual_use:hover .price_anchor_link_circle {
        background-color: var(--color-dual_use);
    }
    .price_anchor_link_color:hover .price_anchor_link_circle {
        background-color: var(--color-color);
    }

}
@media (max-width: 767px) {
    .price_anchor_list {
        margin-bottom: -10em;
        margin-top: 30em;
    }
    .price_anchor_list > li {
        margin-inline: -8em;
    }
    .price_anchor_list > li:nth-child(even) {
        margin-top: 100em;
    }

}

.section_price_ttl_wrap {
    text-align: center;
    position: relative;
    overflow: hidden;
}
.section_price_ttl_left_arrow,
.section_price_ttl_right_arrow {
    background-color: var(--theme-color);
    width: 50%;
    position: absolute;
    bottom: 41em;
}
.section_price_ttl_left_arrow {
    height: 32em;
    right: calc(50% + 194em);
    transform: skewX(36deg);
}
.section_price_ttl_right_arrow {
    height: 32em;
    left: calc(50% + 194em);
    transform: skewX(-36deg);
}
.section_price_ttl_left_arrow::after,
.section_price_ttl_right_arrow::after {
    content: '';
    display: block;
    width: 30em;
    height: 56em;
    background-color: var(--theme-color);
    position: absolute;
    bottom: 0;
}
.section_price_ttl_left_arrow::after {
    right: 0;
    transform-origin: right bottom;
}
.section_price_ttl_right_arrow::after {
    left: 0;
    transform-origin: left bottom;
}
.section_price_ttl {
    width: 336em;
    height: 146em;
    margin: auto;
}

/* product slider */
.product_swiper_slide {
    width: 316em;
}
.product_swiper_slide a {
    text-decoration: none;
}
.product_slide_inner {
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 66em 24em 55em;
    border-radius: 16em;
    box-shadow: 4.589em 6.553em 8em 0 rgba(0, 0, 0, 0.32);
    position: relative;
    overflow: hidden;
}
.product_slide_inner::before,
.product_slide_inner::after {
    content: '';
    display: block;
    position: absolute;
}
.product_slide_inner::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 42em;
    background-color: var(--theme-color);
}
.product_slide_inner::after {
    top: 9em;
    right: 9em;
    width: 49em;
    height: 55em;
    background: url(../images/icon_kaeru.png) no-repeat center center / contain;
}
.product_category {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    color: var(--color-white);
    font-weight: 700;
}
.product_category_in {
    font-size: 24em;
    line-height: 1.7;
}
.product_price_wrap {
    margin-top: auto;
    position: relative;
}
.product_name {
    font-weight: 700;
}
.product_name_in {
    font-size: 24em;
    line-height: calc(32/24);
}
.product_special_price {
    display: flex;
}
.product_special_price_bg {
    background-color: #c62b1e;
    color: var(--color-white);
    border-radius: 5em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product_special_price_detail {
    color: #c62b1e;
    line-height: 1;
}
.product_special_price_m {
    font-weight: 900;
}
.product_special_price_tax {
    position: absolute;
    top: 104%;
}
.product_tag_list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 4em;
    margin-top: 24em;
}
.product_tag {
    background-color: var(--theme-color);
    color: var(--color-white);
}
.product_tag_in {
    line-height: 1;
}
.product_swiper_note {
    text-align: center;
}
.swiper_control {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8em;
    width: 100%;
    max-width: 660em;
    margin-inline: auto;
    margin-top: 3em;
}
.swiper-pagination {
    position: relative;
}
[class].swiper-pagination-bullet {
    width: 10em;
    height: 10em;
    margin: 0 8em;
    opacity: 1;
    background-color: var(--color-white);
}
[class].swiper-pagination-bullet-active {
    background-color: var(--theme-color);
}
.swiper_toggle_wrap .swiper_pause {
    display: block;
}
.swiper_toggle_wrap .swiper_play {
    display: none;
}
.swiper_toggle_wrap.is-paused .swiper_pause {
    display: none;
}
.swiper_toggle_wrap.is-paused .swiper_play {
    display: block;
}
.swiper_pause,
.swiper_play {
    width: 50em;
    height: 50em;
    border-radius: 100%;
}
.swiper_pause {
    background: url(../images/icon_pause.svg) no-repeat center center / contain;
}
.swiper_play {
    background: url(../images/icon_play.svg) no-repeat center center / contain;
}
.product_swiper_pager {
    display: flex;
    align-items: center;
    gap: 8em;
}
.swiper_button_arrow {
    text-align: center;
    background-color: var(--theme-color);
    color: var(--color-white);
    font-weight: 900;
    cursor: pointer;
    border-radius: 100%;
}
.swiper_button_arrow_in {
    font-size: 32em;
}
@media (min-width: 768px) {
    .section_price_ttl_wrap {
        margin-top: 30em;
    }
    .product_swiper {
        margin-top: 14em;
    }
    .product_slide_inner {
        min-height: 540em;
    }
    .product_tag_list {
        min-height: 60em;
    }
    .product_tag {
        padding: 6em;
    }
    .product_tag_in {
        font-size: 16em;
    }
    .product_name {
        margin-top: 17em;
    }
    .product_special_price {
        align-items: flex-end;
        gap: 8em;
        margin-top: 2em;
    }
    .product_normal_price_in {
        font-size: 16em;
    }
    .product_special_price_bg {
        width: 87em;
        height: 52em;
    }
    .product_special_price_bg_in {
        font-size: 16em;
        line-height: calc(20/16);
    }
    .product_special_price_l {
        font-size: 56em;
    }
    .product_special_price_m {
        font-size: 28em;
    }
    .product_special_price_tax {
        right: 0;
    }
    .product_special_price_tax_in {
        font-size: 16em;
    }
    .product_swiper_note {
        margin-top: 16em;
    }
    .product_swiper_note_in {
        font-size: 16em;
    }
    .swiper_button_arrow {
        width: 72em;
        height: 72em;
        line-height: 72em;
    }
    .swiper_button_arrow:hover {
        background-color: var(--color-white);
        color: var(--theme-color);
    }
}
@media (max-width: 767px) {
    .section_price_ttl_wrap {
        margin-top: 30em;
    }
    .product_swiper {
        margin-top: 20em;
    }
    .product_swiper .swiper-wrapper {
        margin-left: -170em;
    }
    .product_slide_inner {
        min-height: 660em;
    }
    .product_tag_list {
        min-height: 78em;
    }
    .product_tag {
        padding: 8em;
    }
    .product_tag_in {
        font-size: 20em;
    }
    .product_name {
        margin-top: 4em;
        margin-top: 8em;
    }
    .product_special_price {
        flex-direction: column;
        align-items: flex-start;
        gap: 4em;
        padding-bottom: 10em;
    }
    .product_normal_price_in {
        font-size: 20em;
    }
    .product_special_price_bg {
        padding: 6em;
    }
    .product_special_price_bg_in {
        font-size: 24em;
        line-height: 1;
    }
    .product_special_price_l {
        font-size: 72em;
    }
    .product_special_price_m {
        font-size: 40em;
    }
    .product_special_price_tax {
        left: 0;
    }
    .product_special_price_tax_in {
        font-size: 20em;
    }
    .product_swiper_note {
        margin-top: 15em;
    }
    .product_swiper_note_in {
        font-size: 18em;
    }
    .swiper_control {
        margin-top: -2em;
    }
    .swiper_button_arrow {
        width: 80em;
        height: 80em;
        line-height: 80em;
    }
}

/* section_other */
.section_other {
    text-align: center;
    margin-top: 64em;
}
.section_other_ttl_wrap {
    position: relative;
}
.section_other_ttl {
    width: 398em;
    position: relative;
    z-index: 1;
}
.section_other_note {
    position: relative;
    z-index: 1;
}
.section_other_link_list {
    display: flex;
    justify-content: space-between;
}
.other_illust {
    position: absolute;
    left: 0%;
    width: 972em;
}
@media (min-width: 768px) {
    .section_other_ttl {
        margin-left: auto;
        margin-right: 84em;
    }
    .section_other_note {
        margin-top: 37em;
    }
    .section_other_note_in {
        font-size: 14.18em;
        line-height: calc(18/14.18);
    }
    .section_other_link_list {
        margin-top: 15em;
    }
    .other_illust {
        top: 0;
        margin-left: -360em;
    }
}
@media (max-width: 767px) {
    .section_other {
        padding-inline: 40em;
    }
    .section_other_note {
        margin-top: 157em;
    }
    .section_other_note_in {
        font-size: 22em;
        line-height: calc(32/22);
    }
    .section_other_link_list {
        flex-direction: column;
        gap: 27em;
        margin-top: 20em;
    }
    .other_illust {
        top: 40em;
        margin-left: -300em;
    }

}

/* merit */
.merit_ttl_wrap {
    position: relative;
    padding-top: 125em;
}
.merit_ttl {
    background: url(../images/merit_ttl_bg.png) no-repeat center center / contain;
    width: 622em;
    height: 116em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    margin: auto;
}
.merit_ttl_in_l {
    font-size: 71.11em;
}
.merit_ttl_in_m {
    font-size: 64.44em;
}
.merit_f {
    width: 309em;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -340em;
}
.merit_copy_wrap {
    text-align: center;
    color: var(--color-white);
    font-weight: 700;
}
.merit_list {
    display: flex;
    flex-wrap: wrap;
}
.merit_listitem {
    background-color: var(--color-white);
    border-radius: 16em;
    box-shadow: 2.294em 3.277em 4em 0 rgba(0, 0, 0, 0.32);
}
.merit_list_ttl {
    background-color: var(--color-yellow);
    border-radius: 16em 16em 0 0;
    font-weight: 700;
    display: flex;
    align-items: center;
    position: relative;
    padding-bottom: 3em;
}
.merit_list_ttl_in rt {
    margin-bottom: -0.5em;
}
[class].merit_icon {
    position: absolute;
}
@media (min-width: 768px) {
    .section_merit {
        padding-block: 80em;
    }
    .merit_copy_wrap {
        margin-top: 18em;
    }
    .merit_copy_s_in {
        font-size: 24em;
        line-height: calc(32/24);
    }
    .merit_copy_l {
        margin-top: 6em;
    }
    .merit_copy_l_in {
        font-size: 36em;
        line-height: calc(33.28/36);
    }
    .merit_list {
        gap: 40em;
        margin-top: 46em;
    }
    .merit_listitem {
        width: calc(50% - 20em);
    }
    .merit_list_ttl {
        min-height: 112em;
        padding-left: 115em;
    }
    [class].merit_icon {
        width: 98em;
        left: 5em;
        top: -13em;
    }
    .merit_list_ttl_in {
        font-size: 26em;
        line-height: calc(38.4/26);
    }
    .merit_txt_wrap {
        padding: 12em 18em;
    }
    .merit_txt_in {
        font-size: 16em;
        line-height: calc(24/16);
    }
}
@media (max-width: 767px) {
    .section_merit {
        padding: 80em 40em;
    }
    .merit_copy_wrap {
        margin-top: 20em;
    }
    .merit_copy_s_in {
        font-size: 36em;
        line-height: calc(50/36);
    }
    .merit_copy_l {
        margin-top: 10em;
    }
    .merit_copy_l_in {
        font-size: 56em;
        line-height: calc(52/56);
    }
    .merit_list {
        gap: 32em;
        margin-top: 50em;
    }
    .merit_listitem {
        width: 100%;
    }
    .merit_list_ttl {
        min-height: 140em;
        padding-left: 147em;
    }
    [class].merit_icon {
        width: 125em;
        left: 5em;
        top: -17em;
    }
    .merit_list_ttl_in {
        font-size: 32em;
        line-height: calc(48/32);
    }
    .merit_txt_wrap {
        padding: 20em 22em;
    }
    .merit_txt_in {
        font-size: 24em;
        line-height: calc(36/24);
    }

}


/* qa */
.qa_ttl {
    width: 625em;
    height: 120em;
    padding-bottom: 6em;
    background: url(../images/qa_ttl_bg.png) no-repeat center center / contain;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}
.qa_ttl_in {
    letter-spacing: 0.05em;
    font-size: 48em;
}
.qa_list,
.qa_item {
    display: flex;
    flex-direction: column;
}
.qa_question,
.qa_answer {
    display: flex;
}
.qa_question {
    background-color: var(--color-white);
}
.qa_answer {
    background-color: #f5f5f5
}
.qa_question,
.qa_answer {
    padding: 4em;
    border-radius: 16em;
    gap: 24em;
}
.qa_question_icon {
    background-color: #4574b8;
}
.qa_answer_icon {
    background-color: #c62b1e;
}
.qa_question_icon,
.qa_answer_icon {
    width: 64em;
    min-height: 64em;
    border-radius: 16em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.qa_question_icon_in,
.qa_answer_icon_in {
    font-weight: 700;
    color: var(--color-white);
}
.qa_question_txt,
.qa_answer_txt {
    align-self: center;
}
.qa_question_txt_in {
    font-weight: 700;
}
.qa_note_wrap {
    background-color: #f5f5f5;
    margin-top: 80em;
    border-radius: 16em;
    display: flex;
    flex-direction: column;
}
.qa_note_list > li {
    padding-left: 0.5em;
    text-indent: -0.5em;
}

@media (min-width: 768px) {
    .section_qa {
        padding-block: 80em;
    }
    .qa_list {
        gap: 4em;
        margin-top: 28em;
    }
    .qa_question_icon_in,
    .qa_answer_icon_in {
        font-size: 24em;
    }
    .qa_question_txt_in {
        font-size: 20em;
    }
    .qa_answer_txt_in {
        font-size: 16em;
    }
    .qa_note_wrap {
        padding: 23em 32em 28em;
        gap: 6em;
    }
    .qa_note_ttl {
        font-size: 20em;
    }
    .qa_note_list {
        font-size: 16em;
        line-height: calc(24/16);
        margin-top: 0.2em;
        margin-left: 0.8em;
    }
    .qa_note_txt {
        font-size: 16em;
        line-height: calc(24/16);
        margin-top: 0.2em;
        margin-left: 0.8em;
    }
}
@media (max-width: 767px) {
    .section_qa {
        padding: 80em 42em;
    }
    .qa_list {
        gap: 8em;
        margin-top: 28em;
    }
    .qa_question_icon_in,
    .qa_answer_icon_in {
        font-size: 32em;
    }
    .qa_question_txt {
        padding-block: 21em;
    }
    .qa_question_txt,
    .qa_answer_txt {
        padding-right: 24em;
    }
    .qa_question_txt_in {
        font-size: 28em;
        line-height: calc(44/28);
    }
    .qa_answer_txt {
        padding-block: 19em;
    }
    .qa_answer_txt_in {
        font-size: 24em;
        line-height: calc(36/24);
    }
    .qa_note_wrap {
        padding: 18em 28em 26em;
        gap: 12em;
    }
    .qa_note_ttl {
        font-size: 28em;
    }
    .qa_note_list {
        font-size: 24em;
        line-height: calc(36/24);
        margin-top: 0.3em;
    }
    .qa_note_txt {
        font-size: 24em;
        line-height: calc(36/24);
        margin-top: 0.3em;
    }
}


/* footer */
.footer {
    text-align: center;
}
.footer_txt {
    font-weight: 700;
}
.footer_bottom {
    background-color: #e60012;
    color: var(--color-white);
}
.footer_copy {
    margin: auto;
}
@media (min-width: 768px) {
    .footer_top {
        padding-block: 64em;
    }
    .footer_txt {
        font-size: 24em;
        line-height: 1;
    }
    .footer_bottom {
        padding-block: 35em;
    }
    .footer_copy {
        width: 375em;
    }
}
@media (max-width: 767px) {
    .footer_top {
        padding-block: 71em;
    }
    .footer_txt {
        font-size: 28em;
        line-height: calc(42/28);
    }
    .footer_bottom {
        padding-block: 34em 27em;
    }
    .footer_copy {
        width: 469em;
    }
}



/* floating_btn */
.floating_btn_wrap {
    position: fixed;
    right: 0;
    text-align: center;
    z-index: 10;
    transform: translate(100%, 0);
    transition: transform 0.4s;
}
.animation_loaded .floating_btn_wrap {
    transform: translate(0, 0%);
}
.floating_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
    width: 180px;
    height: 80px;
    background-color: var(--color-red);
    border: none;
    cursor: pointer;
    color: var(--color-white);
    transition: background-color 0.3s,border-color 0.3s;
}
.floating_btn_inner {
    display: block;
    position: relative;
    width: 100%;
    padding-left: 40px;
}
.floating_btn_txt_in {
    font-size: 18px;
    line-height: 1.33;
    font-weight: 700;
}
.floating_btn_icon {
    position: absolute;
    top: 50%;
    left: 22px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--color-yellow);
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s, background-color 0.3s;
}
.floating_btn_icon::before,
.floating_btn_icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    height: 2px;
    width: 14px;
    background-color: var(--color-red);
    transform: translate(-50%, -50%);
    transition: background-color 0.3s;
}
.floating_btn_icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}
@media (min-width: 768px) {
    .floating_btn_wrap {
        bottom: 12.875%;
    }
    .floating_btn {
        padding-bottom: 2px;
        box-shadow: 2.868px 4.096px 15px 0px rgba(0, 0, 0, 0.2);
        border: 8px solid var(--color-white);
        border-radius: 40px 0 0 40px;
        border-right: 0;
    }
    .floating_btn_inner {
        transition: color 0.3s;
    }
    .floating_btn:hover {
        border-color: var(--color-red);
        background-color: var(--color-white);
    }
    .floating_btn:hover .floating_btn_inner {
        color: var(--color-red);
    }
    .floating_btn:hover .floating_btn_icon {
        transform: translateY(-50%) rotate(180deg);
    }
}
@media (max-width: 767px) {
    .floating_btn_wrap {
        bottom: 0;
        left: 0;
        right: auto;
        width: 100%;
        background-color: var(--color-white);
        padding: 15em 0;
        display: none;
        opacity: 0;
    }
    .floating_btn_wrap.is_show_floating_btn {
        display: block;
        animation: showFloatingBtnShow forwards 0.4s;
    }
    @keyframes showFloatingBtnShow {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    .floating_btn,
    .floating_btn_inner {
        color: var(--color-white);
    }
    .floating_btn {
        box-shadow: 5.736em 8.192em 30em 0 rgba(0, 0, 0, 0.2);
        width: 486em;
        height: 80em;
        border: none;
        border-radius: 40em;
        margin: 0 auto;
    }
    .floating_btn_inner {
        padding-left: 0;
        margin-top: 0;
    }
    .floating_btn_icon {
        width: 35em;
        height: 35em;
    }
    .floating_btn_icon::before,
    .floating_btn_icon::after {
        width: 20em;
        height: 3em;
    }
    .floating_btn_txt_in {
        font-size: 28em;
    }
}

/* modal */
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes modalFadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}
.modal {
    display: none;
    overscroll-behavior: contain;
}
html {
  scrollbar-gutter: stable;
}
html.is-locked {
  overflow: hidden;
}
.modal.is_open {
    display: block;
}
.modal[aria-hidden="false"] .modal_overlay {
    animation: modalFadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
.modal[aria-hidden="true"] .modal_overlay {
    animation: modalFadeout .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
.modal .modal_container,
.modal .modal_overlay {
    will-change: transform;
}
.modal_overlay {
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal_container {
    width: 100%;
    max-height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
}
.modal_inner {
    max-width: 800px;
    margin: auto;
    position: relative;
    padding: 70em 40em 40em;
}
.modal_print_btn_wrap {
    text-align: center;
    margin-top: 40em;
}
.modal_print_btn {
    margin: auto;
    background-color: var(--color-yellow);
    color: #000;
    font-weight: 700;
    padding: 12em;
    border: 8em solid var(--color-white);
    line-height: 1.5;
    width: 320em;
    border-radius: 36em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20em;
    transition: border .3s, background .3s;
}
.modal_print_btn_in {
    font-size: 20em;
}
.modal_print_btn_icon {
    width: 32em;
    height: 32em;
    background: url(../images/icon_priter.png) no-repeat center center / contain;
}
.bottom_btn_close_modal_wrap {
    position: absolute;
    top: 0;
    right: 0;
}
.btn_close_modal {
    width: 42em;
    height: 42em;
}
.btn_close_modal::before,
.btn_close_modal::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 124%;
    height: 2px;
    background-color: var(--color-white);
}
.btn_close_modal::before {
    rotate: 45deg;
}
.btn_close_modal::after {
    rotate: -45deg;
}
.modal_print_btn:hover {
    background-color: var(--color-white);
    border-color:var(--color-yellow);
}
@media (max-width: 767px) {
    .bottom_btn_close_modal_wrap {
        right: 40em;
    }
}

/* print */
@media print {
    .is_print .header,
    .is_print .footer,
    .is_print .floating_btn_wrap,
    .is_print .main_content,
    .is_print .modal_print_btn_wrap,
    .is_print .bottom_btn_close_modal_wrap {
        display: none;
    }
    .is_print .modal_overlay {
        background-color: var(--color-white);
        position: relative;
        min-width: 720px;
        min-height: 680px;
    }
}

/* animation */
.animation_ready .anim_fadeup {
    opacity: 0;
    transition: opacity 0.5s, transform 0.6s;
}
@media (min-width: 768px) {
    .anim_fadeup[data-reveal="both"] {
        transform: translateY(40em);
    }
}
@media (max-width: 767px) {
    .anim_fadeup {
        transform: translateY(40em);
    }
    .animation_ready .price_ttl_f {
        scale: 0;
        transition: scale 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28);
        transform-origin: 65% 95%;
    }
    .animation_loaded .price_ttl_wrap.is_animated .price_ttl_f {
        scale: 1;
    }
}
.animation_loaded .is_animated.anim_fadeup {
    opacity: 1;
    transform: translateY(0);
}
.animation_ready .price_anchor_link_arrow {
    transform: translateY(-140%);
    transition: transform .6s;
}
.animation_loaded .price_anchor_list.is_animated .price_anchor_link_arrow {
    transform: translateY(0);
}
@keyframes swing {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(4deg); }
    45%  { transform: rotate(-2deg); }
    60%  { transform: rotate(1deg); }
    80%  { transform: rotate(-1deg); }
    100% { transform: rotate(0deg); }
}
@media (max-width: 767px) {
    .animation_ready .section_coupon_info {
        scale: 0;
        transition: scale 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    }
    .animation_ready .section_coupon_f {
        scale: 0;
        transition: scale 0.6s 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
        transform-origin: 80% 95%;
    }
    .animation_loaded .section_coupon_content.is_animated .section_coupon_info {
        scale: 1;
    }
    .animation_loaded .section_coupon_content.is_animated .section_coupon_f {
        scale: 1;
    }
    .animation_ready .section_price_ttl {
        transition: transform .6s, opacity .6s;
        opacity: 0;
        transform: translateY(40em);
    }
    .animation_ready .section_price_ttl_left_arrow {
        translate: -100% 0;
        transition: translate 0.6s;
    }
    .animation_ready .section_price_ttl_right_arrow {
        translate: 100% 0;
        transition: translate 0.6s;
    }
    .animation_loaded .section_price_ttl_wrap.is_animated .section_price_ttl_left_arrow,
    .animation_loaded .section_price_ttl_wrap.is_animated .section_price_ttl_right_arrow {
        translate: 0% 0;
    }
    .animation_loaded .section_price_ttl_wrap.is_animated .section_price_ttl {
        opacity: 1;
        transform: translateY(0);
    }
    .animation_ready .section_other_ttl {
        transition: transform .6s .35s, opacity .6s .35s;
        opacity: 0;
        transform: translateY(40em);
    }
     .animation_ready .other_illust {
        transition: transform .6s, opacity .6s;
        opacity: 0;
        transform:translateX(-200em);
    }
    .animation_loaded .section_other_ttl_wrap.is_animated .section_other_ttl {
        opacity: 1;
        transform: translateY(0);
    }
    .animation_loaded .section_other_ttl_wrap.is_animated .other_illust {
        opacity: 1;
        transform:translateX(0);
    }
    .merit_icon {
        transform-origin: top center;
    }
    .animation_loaded .merit_listitem.is_animated .merit_icon {
        animation: swing 1.8s .3s  alternate;
    }
    .animation_ready .merit_ttl_wrap .merit_f {
        scale: 0;
        transition: scale 0.6s 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
        transform-origin: 55% 92%;
    }
    .animation_loaded .merit_ttl_wrap.is_animated .merit_f {
        scale: 1;
    }
}