body {
    background-image:
        radial-gradient(at 0% 0%, #E8F1FF, transparent),
        radial-gradient(at 100% 0%, #F0EDFF, transparent),
        radial-gradient(at 100% 100%, #DEF6FF, transparent),
        radial-gradient(at 0% 100%, #ECEFFF, transparent);

    background-image:
        radial-gradient(at 0% 0%, #def6ff, transparent),
        radial-gradient(at 100% 0%, #def6ff, transparent),
        radial-gradient(at 100% 100%, #e79cf4, #e79cf4),
        radial-gradient(at 0% 100%, #def6ff, transparent);
    background-attachment: fixed;
    /*グラデーションを定義*/
    background-size: 200% 300%;
    /*サイズを大きくひきのばす*/
    animation: bggradient 15s linear infinite;
}

@keyframes bggradient {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 50% 100%;
    }

    100% {
        background-position: 50% 0%;
    }
}

.main {
    font-family: "Noto Serif JP", "Noto Sans JP", "Hiragino Kaku Gothic Pro",
        "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",
        sans-serif;
    font-weight: 400;
}

.main p {
    margin: 0;
}

.main a {
    text-decoration: none;
    color: #3c3c3c;
}

.main li {
    list-style: none;
}

.main figure {
    margin: 0;
}

/* フォント選択 */

.Trajan {
    font-family: "trajan-pro-3", serif;
}

.krete {
    font-family: krete, serif;
}



.Nserif {
    font-family: "Noto Serif JP", serif;
}

.Tenor {
    font-family: "Tenor Sans", sans-serif;
}

.Mincho {
    font-family: 游明朝, "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro",
        "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.Gothic {
    font-family: 游ゴシック, YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
        游ゴシック, "Yu Gothic", sans-serif;
}


@media screen and (max-width: 767px) {
    /*767px以下で非表示*/

    .pc-hide {
        display: none;
        /*非表示*/
    }
}

@media screen and (min-width: 768px) {
    /*768px以上で非表示*/

    .sp-hide {
        display: none;
        /*非表示*/
    }
}


.app {
    margin: 0 auto;
    position: relative;
}

.main img {
    width: 100%;
}







/* スタート画面 */

.startpage {
    position: relative;
}


.start_area {
    padding: 40px 0 0;
    text-align: center;
}


.start_area .start_title {
    margin: 0 0 25px;
}

.start_area .start_title h2 {
    width: 200px;
    margin: 0 auto;
}

.start_area .start_title h3 {
    font-size: 48px;
    margin: 48px auto 0;
    letter-spacing: 3px;
    font-weight: 400;
}

.start_area .start_title p {
    font-family: Shippori Mincho, serif;
    margin: 10px 0 0;
    font-size: 20px;

}

.start_area .start_kv {
    max-width: 220px;
    margin: 0 auto 32px;
}


.start_area .start_text {
    font-size: 15px;
    margin: 0 0 25px;
    letter-spacing: 1px;
}

.start_area .startbtn {
    width: 280px;
    margin: 0 auto;
}


.start_area .startbtn .startclick {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
    gap: 0 10px;
    background-image: linear-gradient(143deg, rgba(72, 88, 102, 1), rgba(97, 121, 142, 1) 0%, rgba(89, 83, 98, 1) 57%, rgba(71, 91, 100, 1));
    transition: all .5s cubic-bezier(.39, .1, 0, 1);
}



.start_area .startbtn .startclick figure {
    width: 16px;
    filter: brightness(0) invert(1);
    transition: all .5s cubic-bezier(.39, .1, 0, 1);
}

.start_area .startbtn .startclick img {
    display: block;
}

.start_area .startbtn .startclick p {
    font-family: Shippori Mincho, serif;
    color: #fff;
    font-size: 18px;
    letter-spacing: 1px;
    transition: all .5s cubic-bezier(.39, .1, 0, 1);
}

.start_area .startbtn .startclick:hover {
    background-image: none;
    background-color: #f0f0f0;

}

.start_area .startbtn .startclick:hover figure {
    filter: none;
}

.start_area .startbtn .startclick:hover p {
    color: #2e2b2b;
}


.start_area .start_link {
    margin: 45px 0 0;
    display: flex;
    justify-content: center;
}

.start_area .start_link a {
    display: flex;
    gap: 0 5px;
    border-bottom: 1px solid #333333;
}

.start_area .start_link p {
    font-size: 13px;
}


@media screen and (min-width: 768px) {
    .start_area {
        max-width: 520px;
        margin: 0 auto;
    }


}





/* 問題ゲージ */

.gage_area .inner {
    max-width: 520px;
    margin: 0 auto;
    padding: 0 16px;
}

.gage_area .gage_bar {
    width: 100%;
    margin: 0 0 10px;
}


.gage_area .tensen_1 {
    width: 100%;
    height: 1px;
    background-color: #999899;
}

.gage_area .tensen_2 {
    height: 3px;
    background-color: #999899;
}


.gage_area .gage_text {
    display: flex;
    justify-content: space-between;
}

.gage_area .gage_text p {
    font-size: 13px;
    font-family: krete, serif;
    letter-spacing: 1px;
    font-style: italic;
}

/* クイズ画面 */


.questext {
    text-align: center;
}

.questext p {
    font-family: "trajan-pro-3", serif;
    letter-spacing: 3px;
    font-size: 28px;
    color: #2E2B2B;
}

.questext h2 {
    font-family: Shippori Mincho, serif;
    font-size: 20px;
    margin: 17px 0 0;
    letter-spacing: 1px;
    font-weight: 400;
    line-height: 1.5;
}

.questext span {
    display: block;
    letter-spacing: 1px;
    font-weight: 400;
    font-family: Shippori Mincho, serif;
    font-size: 14px;
    line-height: 1;
    margin: 17px 0 0;
}








/* 戻る次へボタン */

.btn_area {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px 0;
    margin: 150px auto 0;
}

.btn_page {
    max-width: 240px;
    width: 70%;
    display: flex;
    justify-content: center;
    gap: 0 50px;
    margin: 0 auto;
}

.btn_page>div {
    width: 100%;
    padding: 17px 0;
    display: flex;
    position: relative;
    justify-content: center;
}


.btn_page p {
    font-family: krete, serif;
    margin: 0;
    padding: 0;
    font-size: 13px;
    text-align: center;
}

/* 前へ戻るボタン */
.btn_page .prev_btn {
    color: #333;
    border: 1px solid #333;
    cursor: pointer;
}

.btn_page .next_btn {
    color: #fff;
    background-color: #333;
}

.btn_page .next_btn figure {
    width: 10px;
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translate(0, -50%);
    transition: all .3s cubic-bezier(.39, .1, 0, 1);
}

.btn_page .prev_btn figure {
    width: 10px;
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translate(0, -50%);
    transition: all .3s cubic-bezier(.39, .1, 0, 1);
}

/* 次へボタン */
#app .next_btn {
    opacity: 0.5;
}

#app .next_btn.red {
    opacity: 1;
    cursor: pointer;
}

.btn_page .prev_btn:hover figure {
    left: 5%;
}

.btn_page .next_btn.red:hover figure {
    right: 5%;
}


@media screen and (min-width: 768px) {
    .btn_area {
        flex-direction: row-reverse;
    }


}




/* 名前記入画面 */

.name_area {
    padding: 50px 0 0;
}

.namepage {
    padding: 40px 0 0;
}

.name_conts {
    width: 80%;
    margin: 100px auto 0;
}

.name_conts .nameform {
    padding: 15px 20px;
    font-size: 16px;
    width: calc(100% - 40px);
    border: 0;
    border-radius: 3px;
}

.name_conts p {
    margin: 10px 0 0;
    font-size: 15px;
    letter-spacing: 1px;
}

@media screen and (min-width: 768px) {
    .namepage {
        padding: 100px 0 0;
    }

    .name_conts {
        max-width: 520px;
        margin: 100px auto;
    }

}


/* クイズレイアウト */

.quespage {
    padding: 40px 0 80px;
}






.quiz_area {
    position: relative;
    margin: 50px 0 0;
}

.quiz_conts {
    max-width: 520px;
    margin: 60px auto 0;
    padding: 0 20px;
}

.quiz_conts .quiz_ul {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 20px;
    margin: 0;
    padding: 0;
}

.quiz_conts .quiz_ul .class_active {
    padding: 20px 0;
    background-color: #fff;
    list-style: none;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.quiz_conts .quiz_ul .quiz_li figure {
    width: 85px;
    margin: 0 auto;
}


.quiz_conts .quiz_ul .quiz_li p {
    font-size: 13px;
    margin: 10px 0 0;
    text-align: center;
    color: #999899;
}

@media screen and (min-width: 768px) {
    .quiz_conts .quiz_ul .quiz_li p {
        font-size: 16px;
    }
}

.quiz_conts .quiz_ul .quiz_li .check_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background-color: #DBD8D8;
    border-radius: 50%;
    position: absolute;
    top: 12px;
    left: 12px;

}


.quiz_ul .class_active:hover {
    background-color: #fff;
    opacity: .5;
}

.quiz_ul .class_active.block .quiz_li .check_btn::before {
    content: "";
    width: 8px;
    height: 8px;
    background-color: #2E2B2B;
    border-radius: 50%;
}





/* トランジション */

.quespage {
    position: relative;
}

.ques {
    width: 100%;
}

.items-enter-active {
    position: absolute;
    top: 0;
    opacity: 0;
    transition: all .5s;
}

.items-leave-active {
    transition: all .5s;
}

.items-enter-from {
    position: absolute;
    top: 0;
    opacity: 0;
}

.items-enter-to {
    opacity: 1;
}

.items-leave-from {
    position: absolute;
    top: 0;
    opacity: 1;
}

.items-leave-to {
    opacity: 0;
}





/* ローディング画面ページ */
#baseObject {
    background-color: #E9E9E9;
    pointer-events: none;
    opacity: 1;
    z-index: 100;
    /* position: absolute; */
}

/* @keyframes opcity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
} */

#baseObject {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    opacity: 1;
}




.roding_area img {
    width: 100%;
}


.roding_area {
    max-width: 520px;
    margin: 0 auto;
    position: relative;
}

.roding_area .inner {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    position: absolute;
    padding: 70px 0 0;
}


.roding_area .roding_icon {
    width: 48px;
    margin: 0 auto;
}


.roding_area .roding_title {
    text-align: center;
    margin: 0 0 30px;
}

.roding_area figure {
    max-width: 260px;
    width: 70%;
    margin: 0 auto;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    clip-path: circle(50% at 50% 50%);
    clip-path: inset(0 round 160px 160px 0 0);
}

.roding_area .roding_title p {
    font-family: trajan-pro-3, serif;
    font-size: 28px;
    color: #2E2B2B;
    letter-spacing: 3px;
}

.roding_area .roding_title h4 {
    font-family: Shippori Mincho, serif;
    margin: 30px 0 0;
    font-size: 20px;
    letter-spacing: 3px;
    font-weight: 400;
}

.roding_area .slider_wrap {
    margin: 144px 0 0;
}

.slider_items {
    display: flex;
    width: 300%;
    animation: slider 50s infinite linear;
}

.roding_area .slider_items .slider_item {
    max-width: 400px;
}

@keyframes slider {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-10%);
    }

    30% {
        transform: translateX(-20%);
    }

    40% {
        transform: translateX(-30%);
    }

    50% {
        transform: translateX(-40%);
    }

    60% {
        transform: translateX(-50%);
    }

    70% {
        transform: translateX(-60%);
    }
}

.roding_area figure video {
    width: 100%;
    aspect-ratio: auto;
    aspect-ratio: initial;
    object-fit: cover;
}




/* 結果画面ページ */

/* 共通部分 */


.goods_area .inner {
    max-width: 520px;
    margin: 3rem auto 80px;
    padding: 0 5.1282051282vw;
    text-align: center;
}


.material_area .inner {
    max-width: 520px;
    margin: 0 auto 80px;
    padding: 0 5.1282051282vw 0;
}




.meta_area .inner {
    max-width: 520px;
    margin: 0 auto 80px;
    padding: 0 5.1282051282vw 0;
}


.order_area .inner {
    max-width: 520px;
    margin: 0 auto 50px;
    padding: 0 5.1282051282vw;
}


.result_btn_area .inner {
    position: relative;
    max-width: 520px;
    padding: 80px 40px 0;
    margin: 0 auto 130px;
}

.cart_area .inner {
    max-width: 520px;
    margin: 0 auto 50px;
    padding: 0 5.1282051282vw;
}



.result_area .result_title h4 {
    font-size: 20px;
    font-weight: 400;
    font-family: Shippori Mincho, serif;
    margin: 0 0 2rem;
}


.meta_area .meta_title h4 {
    font-size: 20px;
    font-weight: 400;
    font-family: Shippori Mincho, serif;
    margin: 0 0 2rem;
}



.result_area .result_title {
    margin: 70px 0 50px;
    text-align: center;
}



.result_area .result_title p {
    color: #fffcfc;
    font-weight: 400;
    font-size: 44px;
    line-height: 1;
    font-family: Great Vibes, cursive;
    letter-spacing: 0;
    transition-delay: .3s;
}




/* 商品名のセクション */


.goods_area h5 {
    font-size: 20px;
    font-family: trajan-pro-3, serif;
    font-weight: 400;
    margin: 0;
}

.goods_area h4 {
    font-size: 20px;
    font-family: Shippori Mincho, serif;
    margin: 0 0 2rem;
    font-weight: 400;
}

.goods_area img {
    min-height: 240px;
}

.goods_area p {
    font-family: Shippori Mincho, serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 1px;
    margin: 80px 0 0;
}

@media screen and (min-width: 530px) {
    .goods_area p .sp_word_wrap {
        display: none;
    }
}



/* 素材のセクション */


.material_area .material_wrap {
    margin: 0 0 35px;
}

.material_area .material_wrap .material_title {
    margin: 0 0 20px;
}

.material_area .material_wrap .material_title h4 {
    font-size: 24px;
    font-family: trajan-pro-3, serif;
    font-weight: 400;
    text-align: center;
    margin: 0;
}

.material_area .material_wrap .material_title h5 {
    font-size: 13px;
    font-family: Shippori Mincho, serif;
    text-align: center;
    margin: 0;
    font-weight: 400;
}

.material_area .material_wrap .material_box {
    padding: 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    margin: 0 0 4px;
    background-color: #F0F0F0;
}

.material_area .material_box .material_box_img {
    display: flex;
    gap: 0 2px;
    width: 40%;
    flex-wrap: wrap;
}

.material_area .material_box .material_box_img figure {
    width: 31%;

}


.material_area .material_box .material_box_text {
    margin: 0 0 0 14px;
    font-size: 13px;
}


/* metaのセクション */




.meta_area .meta_title {
    position: relative;
    margin: 0 0 50px;
    text-align: center;
    padding: 80px 0 0;
}

.meta_area .meta_title::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    transform: scaleX(0);
    transform-origin: top left;
    background-color: #BFBFBF;
    content: "";
    transition: transform 1s cubic-bezier(.39, .1, 0, 1);
}





.meta_area .meta_title p {
    color: #fffcfc;
    font-weight: 400;
    font-size: 44px;
    line-height: 1;
    font-family: Great Vibes, cursive;
    letter-spacing: 0;
    transition-delay: .3s;
}



.meta_area .meta_box {
    margin: 0 0 40px;
}

.meta_area .meta_box .meta_name {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

.meta_area .meta_box .meta_indicator {
    padding: 26px 0 0;
    position: relative;
    margin: 0 10px;
}

.meta_area .meta_indicator::before {
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    background-color: #999899;
}

.meta_area .meta_indicator .indicator_point {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #999899;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.meta_area .meta_indicator .indicator_point:nth-child(1) {
    left: 0;
}

.meta_area .meta_indicator .indicator_point:nth-child(2) {
    left: 25%;
}

.meta_area .meta_indicator .indicator_point:nth-child(3) {
    left: 50%;
}

.meta_area .meta_indicator .indicator_point:nth-child(4) {
    left: 75%;
}

.meta_area .meta_indicator .indicator_point:nth-child(5) {
    left: 100%;
}

.meta_area .meta_indicator .indicator_point_on {
    width: 12px;
    height: 12px;
    background-color: #2E2B2B;
}

/* ORDERのセクション */



.order_area h2 {
    margin: 0 0 40px;
    font-weight: 400;
    font-size: 34px;
    line-height: 1.6428571429;
    font-family: trajan-pro-3, serif;
    letter-spacing: 0;
}

.order_area .order_wrap {
    position: relative;
    padding: 20px 0 0;
    margin: 0 0 40px;
}

.order_area .order_wrap::before {
    width: 100%;
    height: 1px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: top left;
    background-color: #999899;
    content: "";
    transition: transform 1s cubic-bezier(.39, .1, 0, 1);
}

.order_area .order_wrap::after {
    width: 44px;
    height: 5px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: top left;
    background-color: #999899;
    content: "";
    transition: transform 1s cubic-bezier(.39, .1, 0, 1);
}

.order_area .order_lead {
    display: flex;
    justify-content: space-between;
    margin: 0 0 40px;
    transform: translateY(2.5641025641vw);
    color: #2e2b2b;
    font-style: italic;
    font-weight: 300;
    font-size: 13px;
    line-height: 1.0666666667;
    font-family: krete, serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: 0;
    transition: transform 1s cubic-bezier(.39, .1, 0, 1), opacity 1s cubic-bezier(.39, .1, 0, 1);
}

.order_area .order_lead span {
    font-size: 13px;
    line-height: 1.2307692308;
}

.order_area .order_img {
    position: relative;
    margin: 0 0 20px;
    opacity: 0;
    transform: translateY(1.5625vw);
}

.order_area .order_img p {
    font-family: Great Vibes, cursive;
    position: absolute;
    right: 0;
    bottom: -5%;
    color: #fffcfc;
    font-weight: 400;
    font-size: 50px;
    line-height: 1;
    letter-spacing: 0;
    transform: translateY(calc(2.5641vw + 100%));
    transition-delay: .3s;
}

.order_area .order_detail {
    padding: 0 2.0512820513vw;
    opacity: 0;
    transform: translateY(1.5625vw);
}

.order_area .order_detail h3 {
    margin: 0 0 10px;
    color: #2e2b2b;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.8;
    font-family: Shippori Mincho, serif;
    letter-spacing: 0;
}

.order_area .order_detail p {
    font-weight: 400;
    font-size: 13px;
    line-height: 2;
    font-family: "Noto Serif JP", serif;
    letter-spacing: 0;
}

.order_area .order_guide {
    display: flex;
    justify-content: flex-end;
    margin-top: 6.1538461538vw;
}

.order_area .order_guide a {
    display: inline-block;
    position: relative;
    margin-bottom: 1.0256410256vw;
    padding-right: 4.6153846154vw;
    padding-bottom: 0.5128205128vw;
    border-bottom: 1px solid #2e2b2b;
    color: #2e2b2b;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.6923076923;
    letter-spacing: .08em;
    transition: all .3s cubic-bezier(.39, .1, 0, 1);
}

.order_area .order_guide a:hover {
    opacity: .5;
}

.order_area .order_guide a::before {
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    aspect-ratio: 8/10;
    width: 10px;
    background: url(https://d2w53g1q050m78.cloudfront.net/notebarnet/uploads/assets/images/common/icon-arw.svg) 50%/contain no-repeat;
    content: "";
    transform: translate(0, -50%);
    transition: all .3s cubic-bezier(.39, .1, 0, 1);
}

.order_area .order_guide a:hover::before {
    right: -5px;
}



/* cart_area */


.cart_area h2 {
    margin: 0 0 50px;
    color: #2e2b2b;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.8;
    font-family: Shippori Mincho, serif;
    letter-spacing: 0;
    text-align: center;
    padding: 80px 0 0;
    position: relative;
}

.cart_area h2::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    transform: scaleX(0);
    transform-origin: top left;
    background-color: #BFBFBF;
    content: "";
    transition: transform 1s cubic-bezier(.39, .1, 0, 1);
}

.cart_area .cart_wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 20px;
}

.cart_area .cart_box {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cart_area .cart_conts {
    font-weight: 400;
    font-size: 13px;
    line-height: 2;
    font-family: "Noto Serif JP", serif;
    letter-spacing: 0;
    padding: 10px 0;
}


.cart_area .cart_btn_wrap {
    margin: auto 0 0;
    display: block;
    padding: 9px 10px;
    padding: clamp(9px, 5%, 16px) 10px;
    font-size: 10px;
    font-size: clamp(10px, 1px + 1.42vw, 11px);
    text-align: center;
    letter-spacing: 1px;
    background-image: linear-gradient(143deg, rgba(72, 88, 102, 1), rgba(97, 121, 142, 1) 0%, rgba(89, 83, 98, 1) 57%, rgba(71, 91, 100, 1));
    position: relative;
}

.cart_area .cart_btn_wrap::before {
    display: block;
    position: absolute;
    top: 50%;
    right: 5%;
    aspect-ratio: 8 / 10;
    width: 8px;
    background: url(https://d2w53g1q050m78.cloudfront.net/notebarnet/uploads/assets/images/common/icon-arw.svg) 50% / contain no-repeat;
    content: "";
    transform: translate(0, -50%);
    filter: brightness(0) invert(1);
    transition: all .5s cubic-bezier(.39, .1, 0, 1);
}

.cart_area .cart_btn_wrap .cart_btn_box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 10px;
    color: #fff;
    transition: all .5s cubic-bezier(.39, .1, 0, 1);
}

.cart_area .cart_btn_wrap .cart_btn_box img {
    width: 13px;
    filter: brightness(0) invert(1);
    display: block;
    position: absolute;
    left: 5%;
}

.cart_area .cart_wrap a:hover .cart_btn_box {
    opacity: .5;
}

.cart_area .cart_wrap a:hover .cart_btn_wrap::before {
    opacity: .5;
}


.result_btn_area .result_btn {
    margin: 0 auto;
    max-width: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #2e2b2b;
    color: #2e2b2b;
    font-weight: 400;
    letter-spacing: 1px;
    font-size: 13px;
    padding: 17px 0;
}

.result_btn_area .result_btn.again_btn {
    transition: all .3s cubic-bezier(.39, .1, 0, 1);
}

.result_btn_area .result_btn.again_btn:hover {
    opacity: .5;
}


.result_btn_area .result_btn.keep_btn {
    margin: 20px auto 0;
    position: relative;
}



.result_btn_area .result_btn.keep_btn::before {
    display: block;
    position: absolute;
    top: 50%;
    right: 3%;
    aspect-ratio: 8/10;
    width: 10px;
    background: url(https://d2w53g1q050m78.cloudfront.net/notebarnet/uploads/assets/images/common/icon-arw.svg) 50%/contain no-repeat;
    content: "";
    transform: translate(0, -50%);
}


.result_btn_area .float_box {
    display: none;
}


@media screen and (min-width: 768px) {
    .result_btn_area .float_box {
        position: relative;
        max-width: 380px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        padding: 17px 0;
        color: #2e2b2b;
        font-weight: 400;
        letter-spacing: 1px;
        font-size: 13px;
        background-image: linear-gradient(143deg, rgba(72, 88, 102, 1), rgba(97, 121, 142, 1) 0%, rgba(89, 83, 98, 1) 57%, rgba(71, 91, 100, 1));
    }

    .result_btn_area .float_box .float_text {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 10px;
        padding: 0 5% 0 0;
        color: #fff;
        transition: all .5s cubic-bezier(.39, .1, 0, 1);
    }

    .result_btn_area .float_box .float_text img {
        width: 16px;
        filter: brightness(0) invert(1);
    }





    .result_btn_area .float_box::before {
        display: block;
        position: absolute;
        top: 50%;
        right: 5%;
        aspect-ratio: 8/10;
        width: 10px;
        background: url(https://d2w53g1q050m78.cloudfront.net/notebarnet/uploads/assets/images/common/icon-arw.svg) 50%/contain no-repeat;
        content: "";
        transform: translate(0, -50%);
        filter: brightness(0) invert(1);
        transition: all .5s cubic-bezier(.39, .1, 0, 1);
    }


    .result_btn_area .float_box:hover .float_text {
        opacity: .5;
    }


    .result_btn_area .float_box:hover:hover::before {
        opacity: .5;
    }

}






/* 商品ページ移動のセクション */

.float_area {
    width: 80%;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 10px);
    z-index: 10;
}

.float_area a {
    display: block;
    padding: 20px 10px;
    font-size: 11px;
    text-align: center;
    letter-spacing: 1px;
    background-image: linear-gradient(143deg, rgba(72, 88, 102, 1), rgba(97, 121, 142, 1) 0%, rgba(89, 83, 98, 1) 57%, rgba(71, 91, 100, 1));

}



.float_area a .float_text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 10px;
    padding: 0 5% 0 0;
    color: #fff;
    transition: all .5s cubic-bezier(.39, .1, 0, 1);
}

.float_area a .float_text img {
    width: 16px;
    filter: brightness(0) invert(1);
}





.float_area a::before {
    display: block;
    position: absolute;
    top: 50%;
    right: 5%;
    aspect-ratio: 8/10;
    width: 10px;
    background: url(https://d2w53g1q050m78.cloudfront.net/notebarnet/uploads/assets/images/common/icon-arw.svg) 50%/contain no-repeat;
    content: "";
    transform: translate(0, -50%);
    filter: brightness(0) invert(1);
    transition: all .5s cubic-bezier(.39, .1, 0, 1);
}


.float_area a:hover .float_text {
    opacity: .5;
}


.float_area a:hover:hover::before {
    opacity: .5;
}



@media screen and (min-width: 768px) {
    .float_area {
        width: 145px;
        height: 145px;
        left: auto;
        right: 30px;
        bottom: 20px;
        transform: translate(0, 0);
    }

    .float_area a {
        width: 100%;
        height: 100%;
        position: relative;
        padding: 0;
        border-radius: 50%;
        font-size: 12px;
        box-shadow: 10px 20px 20px 0px rgba(0, 0, 0, 0.2);
        transition: all .5s cubic-bezier(.39, .1, 0, 1);
    }

    .float_area a:hover {
        background-image: none;
        background-color: #f0f0f0;
    }

    .float_area a .float_text {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 10px;
        padding: 0 5% 0 0;
    }

    .float_area a .float_text img {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all .5s cubic-bezier(.39, .1, 0, 1);
    }

    .float_area a:hover .float_text img {
        filter: none;
    }


    .float_area a .float_text p {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .float_area a:hover .float_text {
        opacity: 1;
        color: #2e2b2b;
    }

    .float_area a::before {
        position: absolute;
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all .5s cubic-bezier(.39, .1, 0, 1);
    }


    .float_area a:hover:hover::before {
        opacity: 1;
        left: 55%;
        filter: none;
    }


}



/* フェードjscss */

/* 通常のフェードイン */
.fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.5s, transform 1s;
}

.fade.active {
    opacity: 1;
    transform: translateY(0px);
}

.order_img p.fade {
    opacity: 0;
    transform: translateY(calc(2.5641vw + 100%));
}

.order_img p.fade.active {
    transform: translateY(0px);
    opacity: 1;
}

/* 横線 */

.scale.active::before {
    transform: scale(1);
}

.scale.active::after {
    transform: scale(1);
}


/* 特定スクロール非表示  */
#To_top {
    opacity: 1;
    pointer-events: initial;
    transition: opacity 1s, transform;
}

#To_top.Lastactive {
    opacity: 0;
    pointer-events: none;
}


/* 240719 エラーメッセージ */
.error {
    color: #A63839;
    margin: 0 0 50px;
}

.error h3 {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
}

.error h3 span {
    border: 1px solid;
    padding: 1px 30px;
}

.error p {
    font-size: 13px;
    line-height: 1.8;
}

/* 241015 エラーメッセージ */

.error_2 {
    color: #A63839;
    margin: 0 0 50px;
}

.error_2 h3 {
    border: 1px solid;
    padding: 1px 15px;
}

.error_2 h3 span {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
}

.error_2 p {
    font-size: 13px;
    line-height: 1.8;
}

.goods_area h4.goods_text {
    margin: 80px 0 0;
    font-family: Shippori Mincho, serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 1px;
    margin: 80px 0 0;
}
