@charset "UTF-8";
.js-animation {
    transform:translateY(6.1538461538rem);
    opacity:0;
    transition-property:transform,opacity;
    transition-duration:.5s;
    transition-timing-function:ease-in-out;
    transition-delay:0s
}
.top .js-animation {
    transition-delay:.15s
}
.is-display {
    transform:translateY(0);
    opacity:1
}
.header {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    background:linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0.85));
    box-shadow:0px 3px 3px 0px rgba(0,0,0,.1);
    font-family:"M PLUS 1p",sans-serif;
    z-index:10
}
.header__wrapper {
    position:relative;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    width:1200px;
    height:80px;
    margin:0 auto;
    padding:0 40px
}
.header__logo {
    display:block
}
.header__logo--image {
    width:auto;
    width:180px
}
.header__button {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:270px;
    height:64px;
    border-radius:32px;
    background-color:#fc9900;
    transition:.3s ease
}
.header__button--text {
    position:relative;
    padding-left:36px;
    color:#ffffff;
    font-size:22px;
    font-weight:bold;
    transition:color .3s ease
}
.header__button--text::before {
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translate(0, -50%);
    width:36px;
    height:36px;
    background-image:url(../img/icon_giftbox_01.svg);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:100% auto;
    transition: .3s ease
}
.header__button:hover {
    opacity: .7;
    background-color:#fc9900;
}
@media screen and (max-width: 767px) {
    .header__wrapper {
        width:100%;
        height:14.358974359%;
        padding:3.0769230769% 4.1025641026% 3.0769230769%
    }
    .header__logo--image {
        width:17.2307692308rem
    }
    .header__button {
        width:initial;
        height:initial;
        padding:.6153846154rem 1.8461538462rem;
        border-radius:3rem
    }
    .header__button--text {
        padding-left:2.4615384615rem;
        font-size:1.7208333333rem
    }
    .header__button--text::before {
        width:2.4615384615rem;
        height:2.4615384615rem
    }
}
@media screen and (max-width: 767px)and (hover: hover) {
    .header__button:hover {
        background-color:#003c71
    }
    .header__button:hover .header__button--text {
        color:#fff
    }
    .header__button:hover .header__button--text::before {
        filter:brightness(0) saturate(100%) invert(100%) sepia(26%) saturate(23%) hue-rotate(26deg) brightness(104%) contrast(101%)
    }
}
@media screen and (max-width: 767px)and (hover: none) {
    .header__button:hover {
        background-color:#003c71
    }
    .header__button:hover .header__button--text {
        color:#fff
    }
    .header__button:hover .header__button--text::before {
        filter:brightness(0) saturate(100%) invert(100%) sepia(26%) saturate(23%) hue-rotate(26deg) brightness(104%) contrast(101%)
    }
}
.main {
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:1200px;
    margin:0 auto;
    padding-top:80px;
    font-family:"M PLUS 1p",sans-serif;
    letter-spacing:-0.001rem;
    overflow:hidden
}
.sponly {
    display: none;
}
.pconly {
    display: block;
}
@media screen and (max-width: 767px) {
    .main {
        width:100%;
        padding-top:15.3846153846%
    }
    .sponly {
        display: block;
    }
    .pconly {
        display: none;
    }
}
/* 文字装飾・見出しなど */
html {
    font-size:62.5%
}
body {
    font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
    color:#131313;
    letter-spacing:.1em
}
p {
    font-size:2rem;
    line-height:1.8em;
    margin:0 0 16px;
    text-align:justify
}
.section__title {
    font-size:4rem;
    color:#005bab;
    text-align:center;
    margin:80px 0 24px;
    font-weight: 600;
}
.section__title>span {
    position:relative
}
.section__title>span::before {
    content:"/";
    font-size:5rem;
    font-weight:normal;
    color:#00a3e0;
    position:absolute;
    top:-20px;
    left:-40px
}
.section__title>span::after {
    content:"/";
    font-size:5rem;
    font-weight:normal;
    color:#00a3e0;
    position:absolute;
    top:-20px;
    left:-32px
}
a {
    color: #00a3e0;
    text-decoration: none;
}
p.notice {
    font-size: 1.5rem;
    color: #ff002b;
    text-align: center;
}
p.addition {
    font-size:1.4rem;
    text-align:right;
    margin:0;
    color: #949494;
}
@media screen and (max-width: 767px) {
    .section__title {
        font-size: 3.1rem;
        margin: 60px 0 20px;
    }
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーFV-ーーーーーーーーーーーーーーーーーーーーーーー- */
.keyvisual {
    position:relative
}
.keyvisual__image {
    display:block;
    width:auto;
    height:595px
}
@media screen and (max-width: 767px) {
    .keyvisual__image {
        height:56.4102564103%
    }
}
/* ーーーーーーーーーーーーーーーーーーーーーーー導入セクションーーーーーーーーーーーーーーーーーーーーーーー- */
.top {
    position:relative;
    padding:20px 0 60px;
    background-color:#fff3d0
}
.top__title {
    margin-top:40px;
    margin-left:40px;
    color:#ff9b00;
    font-size:40px;
    line-height:48px
}
.top__wrapper {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    margin-top:10px;
    margin-left:40px
}
.top__lead--text {
    margin-top:27px;
    color:#131313;
    font-size:16px;
    line-height:28px
}
.top__lead--text:first-child {
    margin-top:15px
}
.top__image {
    width:auto;
    height:321px
}
@media screen and (max-width: 767px) {
    .top {
        padding:0 0 50px;
        text-align:center
    }
    .top__title {
        margin-top:6.4102564103%;
        margin-left:0;
        margin-right:-2rem;
        font-size:2.8270833333rem;
        line-height:2.8270833333rem
    }
    .top__wrapper {
        flex-direction:column;
        margin-top:2.5641025641%;
        margin-left:0
    }
    .top__lead {
        padding-bottom:6.4102564103%
    }
    .top__lead--text {
        margin-top:6.1538461538%;
        font-size:1.7208333333rem;
        line-height:2.95rem;
        padding-left: 5%;
    }
    .top__lead--text:first-child {
        margin-top:15px
    }
    .top__illust {
        text-align:right
    }
    .top__image {
        width:87.1794871795%;
        height:61.0256410256%
    }
}
/* ーーーーーーーーーーーーーーーーーーーーークーポンエリアーーーーーーーーーーーーーーーーーーーーー */

.coupon__area {
    background-color:#fff3d0;
    padding:24px 0;
    max-width: 800px;
    margin: 0 auto;
}
#coupon .section__title {
    color: #ff9b00;
}
#coupon .section__title>span::before,
#coupon .section__title>span::after{
    color: #ff9b00;
}
.coupon__area .coupon__code {
    font-size:5rem;
    color:#ff9b00;
    text-align:center;
    margin:0;
    padding:0
}
.table__head>h3 {
    font-size:2rem;
    font-weight:bold;
    color:#131313;
    padding-left: 15px;
}
.table__body .table__list {
    font-size:1.6rem;
    color:#131313;
    padding:0 0 0 20px;
    list-style-type:disc;
    list-style-position:inside
}
/* クーポンをクリップボードにコピー */
#js-couponcode.is-active {
    cursor:pointer;
}
@media screen and (max-width: 767px) {
    .coupon__area {
        width: 80%;
        margin: 0 auto;
        padding: 18px 0;
    }
    .coupon__area .coupon__code {
        font-size: 4rem;
    }
    .table__body .table__list {
        padding: 0 15px;
    }
}
/* ーーーーーーーーーーーーーーーーーーーーーーースライドエリアーーーーーーーーーーーーーーーーーーーーーーー- */
.card {
    position:relative;
    padding: 80px 40px;
    background-color:#fc9900;
    text-align:center
}
.card__title {
    display:inline-block;
    color:#ffffff;
    font-size:40px;
    line-height:40px;
    font-weight: 600;
    background: initial;
}
.card__lead {
    margin-top:37px;
    color:#ffffff;
    text-align: center;
}
.card__wrapper {
    display:flex;
    flex-direction:row;
    justify-content:center;
    gap:0 40px
}
.card__swiper {
    margin-top:55px;
    width:528px
}
@media screen and (max-width: 767px) {
    .card {
        padding: 60px 5%;
    }
    .card__title {
        font-size:2.8270833333rem;
        line-height:2.8270833333rem
    }
    .card__lead {
        margin-top:5.1282051282%;
        font-size:1.7208333333rem
    }
    .card__wrapper {
        flex-direction:column;
        gap:10.2564102564% 0
    }
    .card__swiper {
        margin-top:11.1731843575%;
        width:100%
    }
}
.swiper {
    width:100%;
    height:100%;
    border-radius:16px
}
.swiper-slide img {
    display:block;
    width:100%;
    height:100%;
    border-radius:8px;
    -o-object-fit:cover;
    object-fit:cover
}
@media screen and (max-width: 767px) {
    .swiper {
        border-radius:1.9692307692rem
    }
    .swiper-slide img {
        border-radius:.9846153846rem
    }
}
.messageSwiper,.lappingSwiper {
    width:100%;
    height:320px
}
.messageSwiperThumb,.lappingSwiperThumb {
    height:20%;
    box-sizing:border-box;
    padding:10px 0
}
.messageSwiperThumb .swiper-slide,.lappingSwiperThumb .swiper-slide {
    width:25%;
    height:100%;
    cursor:pointer;
    filter:brightness(1) invert(0)
}
.messageSwiperThumb .swiper-slide-thumb-active,.lappingSwiperThumb .swiper-slide-thumb-active {
    filter:brightness(1) invert(0.25)
}
@media screen and (max-width: 767px) {
    .messageSwiper,.lappingSwiper {
        height:60.8938547486%
    }
    .messageSwiperThumb,.lappingSwiperThumb {
        padding:1.2307692308rem 0
    }
}
.message__title,.lapping__title {
    margin-top:5px;
    font-size:24px;
    font-weight:bold;
    color:#ffffff;
}
.message__lead,.lapping__lead {
    font-size:16px;
    line-height:24px;
    color:#ffffff;
}
@media screen and (max-width: 767px) {
    .message,.lapping {
        display:none
    }
}

/* ーーーーーーーーーーーーーーーーーーーーー利用方法エリアーーーーーーーーーーーーーーーーーーーーー */

.flow .section__title {
    color: #ff9b00;
}
.flow .section__title>span::before,
.flow .section__title>span::after{
    color: #ff9b00;
}
.step {
    width:100%;
    height:auto
}
.step .step__box:last-child::after {
    background:none
}
.step .step__box {
    display:flex;
    align-items:center;
    border:#d5d5d5 1px solid;
    margin:0 0 40px;
    padding:16px 40px;
    position:relative
}
.step .step__box::after {
    content:"";
    display:block;
    width:30px;
    height:30px;
    background-image:url("../img/icon_step-arrow.svg");
    background-repeat:no-repeat;
    position:absolute;
    bottom:-32px;
    right:0;
    left:0;
    margin:0 auto
}
.step .step__box .step__number {
    width:80px;
    height:80px;
    background-color:#fff3d0;
    position:absolute;
    top:0;
    left:0;
    font-size:3.5rem;
    font-weight:bold;
    text-align:center;
    color:#ff9b00;
    line-height: 5rem;
}
.step .step__box .step__number>span {
    display:block;
    padding:20px 0 0;
    font-size:1.5rem;
    font-weight:bold;
    text-align:center;
    line-height:.5em;
}
.step .step__box .step__icon {
    flex-basis:200px;
    flex-shrink:0;
    height:auto;
    margin:0 40px 0 40px
}
.step .step__box .step__icon>img {
    width:100%
}
.step .step__box .step__text {
    height:auto;
    flex-grow:1
}
.step .step__box .step__text .step__title {
    font-size:3rem;
    color:#ff9b00;
    margin:0 0 16px;
}
.step .step__box .step__text .step__description {
    font-size:2rem
}
@media screen and (max-width: 767px) {
    .step .step__box {
        display:block;
        width: 90%;
        margin:0 auto 30px;
        padding:16px
    }
    .step .step__box::after {
        display:block;
        width:30px;
        height:30px;
        bottom:-30px;
        right:0;
        left:0
    }
    .step .step__box .step__number {
        width:56px;
        height:56px;
        font-size:2.5rem
    }
    .step .step__box .step__number>span {
        display:block;
        padding:13px 0 0;
        font-size:1rem
    }
    .step .step__box .step__icon {
        width:160px;
        height:auto;
        margin:0 auto
    }
    .step .step__box .step__text .step__title {
        font-size:2rem;
        text-align:center
    }
    .step .step__box .step__text .step__description {
        font-size:1.7rem;
        line-height:1.5em
    }
}

/* ーーーーーーーーーーーーーーーーーーーーーCTAエリアーーーーーーーーーーーーーーーーーーーーー */

.cta {
    display:flex;
    gap:20px;
    justify-content:center;
    align-items:flex-end;
    margin:80px 0
}
.cta .cta__box {
    text-align:center;
    position:relative
}
.cta .cta__box .cta__button {
    display:inline-block;
    text-decoration:none;
    font-size:2rem;
    font-weight:bold;
    padding:16px 32px;
    text-align:center;
    transition:all .3s ease;
    width: 30%;
    min-width: 350px;
    border-radius: 8px;
}
/* 終了ボタン */
.cta .cta__box .cta__button.cta__button--primary {
    color:#fff;
    padding:16px 32px;
    border:2px solid #aaa;
    background:linear-gradient(270deg, #877a8b 0%, #827f8a 25%, #7b8091 51%, #b6c0c3 100%);
    background-position:1% 50%;
    background-size:200% auto;
    transition:all .2s ease-out
}
/* 詳しくはこちらボタン */
.cta .cta__box .cta__button.cta__button--secondary {
    color:#00a3e0;
    border:2px solid #00a3e0;
    background-color:rgba(0,0,0,0);
    background-repeat:no-repeat;
    background-size:16px;
    background-position:right 4px center
}
.cta .cta__box .cta__button.cta__button--secondary:hover {
    background-color:#00a3e0;
    color: #ffffff;
}
/* 申し込みボタン */
.cta .cta__box .cta__button--couponcode {
    position:relative;
    display:inline-block;
    background-color:#e30606;
    border:solid .2rem #e30606;
    color:#ffffff;
    font-size:2rem;
    font-weight:bold
}
.cta .cta__box .cta__button--couponcode:hover {
    background-color:#ffffff;
    color: #e30606;
}
.cta .cta__box .cta__button--couponcode span:before{
    content:"";
    position:absolute;
    left:40px;
    top:50%;
    transform:translate(0, -50%);
    width:36px;
    height:36px;
    background-color:#ffffff; /* 通常色 */
    mask-image:url(../img/icon_giftbox_01.svg);
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
    -webkit-mask-image:url(../img/icon_giftbox_01.svg);
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
    transition:background-color .3s ease;
}
.cta .cta__box .cta__button--couponcode:hover span:before{
    background-color:#e30606;
  }
  @media screen and (max-width: 767px) {
    .cta {
        display: block;
        margin: 50px 0;
    }
    .cta .cta__box {
        margin-bottom: 30px;
    }
  }
/* ーーーーーーーーーーーーーーーーーーーーーN-NOSEについてエリアーーーーーーーーーーーーーーーーーーーーー */

#n-nose {
    position:relative;
    margin-top: 50px;
}
#n-nose::before {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#e3f6ff;
    z-index:-1
}
#n-nose .section__inner {
    width: 94%;
    height: auto;
    margin: 0 auto;
}
#n-nose .section__inner .section__description.n-nose {
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.5em;
}
#n-nose .section__inner .section__description.n-nose>strong {
    color: #00a3e0;
    background: none;
}
.kit {
    width:400px;
    height:auto;
    margin:0 auto 16px
}
.kit>img {
    width:100%
}
.feature {
    width:100%;
    height:auto
}
.feature .feature__box {
    width:100%;
    height:auto;
    margin:0 0 30px;
    border:#00a3e0 1px solid;
    background-color:#fff
}
.feature .feature__box .feature__head {
    width:100%;
    height:80px;
    display:flex;
    align-items:center;
    background-color:#00a3e0
}
.feature .feature__box .feature__head .feature__number {
    width:80px;
    height:80px;
    background-color:#00a3e0;
    font-size:3.5rem;
    font-weight:bold;
    text-align:center;
    color:#fff;
    line-height: 5rem;
}
.feature .feature__box .feature__head .feature__number>span {
    display:block;
    padding:20px 0 0;
    font-size:1.5rem;
    font-weight:bold;
    text-align:center;
    line-height:.5em;
    color:#e3f6ff
}
.feature .feature__box .feature__head .feature__title {
    padding:24px 0 0
}
.feature .feature__box .feature__head .feature__title>h3 {
    font-size:2.5rem;
    font-weight:bold;
    color:#fff228;
    line-height:.7em
}
.feature .feature__box .feature__head .feature__title>p {
    font-size:2rem;
    color:#fff
}
.feature .feature__box .feature__body {
    padding:16px
}
.feature .feature__box .feature__body div:last-child {
    margin-bottom:0
}
.feature .feature__box .feature__body .feature__title02 {
    font-size:2.2rem;
    font-weight:bold;
    color:#00a3e0;
    margin:15px 0;
    padding:0 0 0 16px;
    border-left:#00a3e0 4px solid
}
.feature .feature__box .feature__body .feature__illust {
    width:60%;
    height:auto;
    margin:16px auto
}
.feature .feature__box .feature__body .feature__illust>img {
    width:100%
}
.feature .feature__box .feature__body .feature__illust02 {
    width:100%;
    height:auto;
    margin:16px auto
}
.feature .feature__box .feature__body .feature__illust02>img {
    width:100%
}
.feature .feature__box .feature__body .feature__list {
    display:flex;
    gap:16px;
    justify-content:center
}
.feature .feature__box .feature__body .feature__list .feature__list--item {
    width:160px;
    height:auto;
    font-size:1.5rem;
    font-weight:bold;
    text-align:center
}
.feature .feature__box .feature__body .feature__list .feature__list--item>img {
    width:100%;
    display:inline-block;
    margin:0 0 8px
}
.feature__cancer-wrap {
    width:886px;
    height:717px;
    margin:0 auto;
    padding:16px 40px;
    background-image:url("../img/explanation_03.jpg");
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    position:relative;
    display:flex;
    align-content:center;
    align-items:center
}
.feature__cancer-wrap .feature__cancer {
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    justify-content:center
}
.feature__cancer-wrap .feature__cancer>li {
    font-size:1.7rem;
    font-weight:bold;
    color:#fff;
    margin:0;
    padding:8px 16px;
    background-color:rgba(4,32,97,.85);
    border:1px solid #fff;
    border-radius:40px
}
.feature__cancer-wrap .feature__cancer>li>span {
    color:#e3f6ff
}
.feature__cancer-wrap .note-list {
    font-size:1.5rem;
    text-align:right;
    color:#fff;
    margin:16px 0 0;
    position:absolute;
    bottom:16px;
    right:8px
}
.feature__cancer-wrap .note-list>span {
    padding:4px;
    border-radius:4px;
    background-color:rgba(4,32,97,.35)
}
@media screen and (max-width: 767px) {
    #n-nose .section__inner .section__description.n-nose {
        font-size: 2.2rem;
    }
    .kit {
        width:240px;
        height:auto;
        margin:0 auto 16px
    }
    .kit>img {
        width:100%
    }
    .feature .feature__box .feature__head {
        width:100%;
        height:56px
    }
    .feature .feature__box .feature__head .feature__number {
        width:56px;
        height:56px;
        font-size:2.5rem
    }
    .feature .feature__box .feature__head .feature__number>span {
        display:block;
        padding:14px 0 0;
        font-size:1rem
    }
    .feature .feature__box .feature__head .feature__title {
        padding:16px 0 0
    }
    .feature .feature__box .feature__head .feature__title>h3 {
        font-size:2rem;
        line-height:1em
    }
    .feature .feature__box .feature__head .feature__title>p {
        font-size:1.5rem
    }
    .feature .feature__box .feature__body {
        padding:16px
    }
    .feature .feature__box .feature__body div:last-child {
        margin-bottom:0
    }
    .feature .feature__box .feature__body h4:first-child {
        margin-top:0
    }
    .feature .feature__box .feature__body .feature__title02 {
        font-size:2rem;
        margin:32px 0 8px
    }
    .feature .feature__box .feature__body .feature__illust {
        width:100%;
        margin:32px auto
    }
    .feature .feature__box .feature__body .feature__illust02 {
        width:100%;
        margin:32px auto
    }
    .feature .feature__box .feature__body .feature__list {
        flex-wrap:wrap
    }
    .feature .feature__box .feature__body .feature__list .feature__list--item {
        width:100px;
        font-size:1.2rem
    }
    .feature__cancer-wrap {
        width:100%;
        height:auto;
        padding:16px 16px 100px 16px;
        background-image:url("../img/explanation_03.jpg");
        background-repeat:no-repeat;
        background-position:center;
        background-size:cover
    }
    .feature__cancer-wrap .feature__cancer {
        gap:8px
    }
    .feature__cancer-wrap .feature__cancer>li {
        font-size:1.3rem
    }
    .feature__cancer-wrap .feature__cancer>li>span {
        padding:0 4px 0 0
    }
    .feature__cancer-wrap .note-list {
        font-size:1.2rem;
        line-height:2em
    }
}
/* ーーーーーーーーーーーーーーーーーーーーーメカニズム　エリアーーーーーーーーーーーーーーーーーーーーー */

.mechanism {
    width:100%;
    height:auto;
    margin:80px 0 0
}
.mechanism .mechanism__title {
    font-size:3rem;
    font-weight:bold;
    color:#00a3e0;
    text-align:center;
    margin:0 0 16px
}
.mechanism .mechanism__title::after {
    content:"";
    display:block;
    width:80px;
    height:1px;
    margin:16px auto 0;
    background-color:#00a3e0
}
.mechanism .mechanism__wrap {
    padding-bottom: 20px;
}
.mechanism .mechanism__wrap .mechanism__description {
    text-align:center
}
.mechanism .mechanism__wrap .mechanism__senchu {
    width:120px;
    height:auto;
    margin:0 0 0 16px
}
.mechanism .mechanism__wrap .mechanism__senchu>img {
    width:100%
}
.mechanism .mechanism__column {
    width:100%;
    height:auto;
    margin:-16px 0 0;
    padding:16px;
    background-color:#fff
}
.mechanism .mechanism__column>p {
    font-size:1.5rem;
    margin:0
}
@media screen and (max-width: 767px) {
    .mechanism {
        width:100%;
        height:auto;
        margin:40px 0 0
    }
    .mechanism .mechanism__title {
        font-size:2.5rem
    }
    .mechanism .mechanism__title::after {
        margin:8px auto 0
    }
    .mechanism .mechanism__wrap {
        display:block
    }
    .mechanism .mechanism__wrap .mechanism__description {
        line-height:1.5em
    }
    .mechanism .mechanism__wrap .mechanism__senchu {
        width:80px;
        height:auto;
        margin:0 auto 8px
    }
    .mechanism .mechanism__wrap .mechanism__senchu>img {
        width:100%
    }
}
/* ギフトセット */
.giftset {
    position:relative;
    padding:40px 40px 140px;
    background-color:#fff;
    background-image:url(../img/giftset_bg.png);
    background-repeat:no-repeat;
    background-position:top;
    background-size:contain
}
.giftset__bottom {
    padding:0 40px 85px;
    background-color:#e6f7ff
}
.giftset__wrapper {
    position:relative;
    padding:40px 40px 60px 560px;
    background-image:url(../img/bg_cta.png);
    background-size:50%;
    border-radius:32px;
    color:#fff
}
.giftset__image {
    position:absolute;
    left:-40px;
    display:flex;
    justify-content:center;
    width:568px;
    height:320px;
    background-color:#f5f7f8;
    border-top-right-radius:24px;
    border-bottom-right-radius:24px
}
.giftset__image--image {
    width:427px;
    height:320px
}
.giftset__title {
    font-size:32px;
    line-height:32px;
    font-weight:bold
}
.giftset__set {
    display:flex;
    flex-direction:row;
    align-items:center;
    margin-top:15px;
    padding:8px 15px;
    border:solid 1px #fff;
    border-radius:10px;
    font-size:14px;
    line-height:24px
}
.giftset__set--title {
    flex-shrink:0
}
.giftset__set--items {
    padding-left:15px
}
.giftset__price {
    display:flex;
    flex-direction:row;
    align-items:flex-end;
    margin-top:20px
}
.giftset__price--title {
    font-size:16px
}
.giftset__price--items {
    padding:0 8px 0 3px;
    font-weight:bold;
    color:#fff700;
    font-size:40px;
    line-height:44px;
    background:linear-gradient(transparent 70%, #005BAB 30%)
}
.giftset__price--yen {
    font-size:24px;
    line-height:28px
}
.giftset__note {
    margin-top:40px;
    display:flex;
    flex-direction:column;
    gap:5px 0;
    font-size:14px;
    line-height:24px
}
.giftset__note--item {
    text-indent:-1em;
    padding-left:1em
}
.giftset__price--title .off {
    color: #ff8282;
    font-size:2.2rem;
}
.giftset__button {
    position:absolute;
    left:50%;
    bottom:-40px;
    transform:translate(-50%, 0);
    display:flex;
    justify-content:center;
    align-items:center;
    width:432px;
    height:80px;
    border-radius:40px;
    background-color:#e30808;
    border:solid 3px #fff;
    transition:background-color .3s ease
}
.giftset__button--text {
    position:relative;
    padding-left:40px;
    font-size:32px;
    font-weight:bold;
    color:#fff
}
.giftset__button--text::before {
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translate(0, -50%);
    width:36px;
    height:36px;
    background-image:url(../img/icon_giftbox_01.svg);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:100% auto;
    filter:brightness(0) saturate(100%) invert(100%) sepia(26%) saturate(23%) hue-rotate(26deg) brightness(104%) contrast(101%)
}
.giftset__button:hover {
    background-color:#00aeeb
}
@media screen and (max-width: 767px) {
    .giftset {
        padding:100px 4.1025641026% 30.7692307692%
    }
    .giftset__bottom {
        padding:30.7692307692% 4.1025641026% 20.5128205128%;
        background-color:#e6f7ff
    }
    .giftset__wrapper {
        padding:34.9162011173% 4.469273743% 18.4357541899%;
        background-size:50%;
        border-radius:1.9692307692rem
    }
    .giftset__image {
        left:-9.8159509202%;
        top:-14.7239263804rem;
        width:104.9079754601%;
        height:29.7423312883rem;
        border-top-right-radius:2.9538461538rem;
        border-bottom-right-radius:2.9538461538rem
    }
    .giftset__image--image {
        width:75%;
        height:100%
    }
    .giftset__title {
        margin-top:4.9079754601%;
        font-size:3.9333333333rem;
        line-height:3.9333333333rem
    }
    .giftset__set {
        flex-direction:column;
        align-items:flex-start;
        margin-top:4.9079754601%;
        padding:2.4539877301% 4.9079754601%;
        border-radius:1.2307692308rem;
        font-size:1.7208333333rem;
        line-height:2.95rem
    }
    .giftset__set--items {
        padding-left:0
    }
    .giftset__price {
        margin-top:6.1349693252%;
        justify-content:center
    }
    .giftset__price--title {
        font-size:1.9666666667rem;
        text-align: right;
    }

    .giftset__price--items {
        padding:0 2.4539877301% 0 .9202453988%;
        font-size:4.9166666667rem;
        line-height:5.4083333333rem
    }
    .giftset__price--yen {
        font-size:2.95rem;
        line-height:3.4416666667rem
    }
    .giftset__note {
        margin-top:6.1349693252%;
        gap:1.2307692308rem 0;
        font-size:1.5979166667rem;
        line-height:2.8270833333rem
    }
    .giftset__button {
        left:50%;
        bottom:-40px;
        width:91.061452514%;
        height:initial;
        padding:4.469273743% 0;
        border-radius:4.9230769231rem
    }
    .giftset__button--text {
        padding-left:4.9230769231rem;
        font-size:2.95rem
    }
    .giftset__button--text::before {
        width:4.4307692308rem;
        height:4.4307692308rem
    }
}
@media screen and (max-width: 767px)and (hover: hover) {
    .giftset__button:hover {
        background-color:#00aeeb
    }
}
@media screen and (max-width: 767px)and (hover: none) {
    .giftset__button:hover {
        background-color:#00aeeb
    }
}