@charset "UTF-8";

/* CSS Document */

/*----------------------------------------
PC用レイアウト(768px以上スクリーン)
----------------------------------------*/

/* body全体の初期スタイル調整 */

html,
body {
    width: 100%;
}

body {
    font-size: 62.5%;
    /*emの計算をしやすくするための定番設定*/
    font-family: yu-gothic-pr6n, sans-serif;
    font-weight: normal;
    color: #000;
}

@media only screen and (max-width:768px) {

    body {
        width: 100%;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }

}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
}

/*----------------------------------------
全体レイアウト/背景設定(PC)
----------------------------------------*/

/* 全体エリア(全体背景を設定するにはここ) */

.main {
    width: 100%;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

@media only screen and (max-width:768px) {

    .main {
        width: 100%;
        margin: 0%;
    }

}

#main-contents {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}

@media only screen and (max-width:768px) {
    #main-contents {
        width: 100vw;
        margin: 0 auto;
    }
}

/*--------------------------------------
アニメーション：初期設定
--------------------------------------*/

.slide-up,
.slide-up-seq,
.label-anim,
.label-anim-rev,
.label-anim-diagonal,
.slide-right,
.pop-up {
    opacity: 0;
    transform: translateY(5px);
    /* ←ほんの少しだけ下げる（ズレ防止） */
    will-change: opacity, transform;
}

.active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/*--------------------------------------
アニメーション①：slide-up｜下から上に出現
--------------------------------------*/

.slide-up {
    opacity: 0;
    transform: translateY(50px) scaleY(0.7);
    transform-origin: bottom;
    transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease;
}

.slide-up.active {
    opacity: 1;
    transform: translateY(0) scaleY(1);
}

/* アニメーション定義 */
@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(40px) scaleY(0.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

/*--------------------------------------
アニメーション②：slide-up｜下から上に出現（時差あり）
--------------------------------------*/

.slide-up-seq {
    opacity: 0;
    transform: translateY(50px) scaleY(0.7);
    transform-origin: bottom;
    transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease;
}

.slide-up-seq.active {
    opacity: 1;
    transform: translateY(0) scaleY(1);
}

@keyframes slideUpSeq {
    0% {
        opacity: 0;
        transform: translateY(40px) scaleY(0.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

.slide-up-seq:nth-child(1) {
    transition-delay: 0s;
}

.slide-up-seq:nth-child(2) {
    transition-delay: 0.4s;
}

.slide-up-seq:nth-child(3) {
    transition-delay: 0.6s;
}

/*--------------------------------------
アニメーション③：label-anim｜右から左に出現
--------------------------------------*/

.slide-right {
    opacity: 0;
    transform: translateX(50px) scaleX(0.7);
    transform-origin: right;
    transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease;
}

.slide-right.active {
    opacity: 1;
    transform: translateX(0) scaleX(1);
}

/* アニメーション定義 */
@keyframes slideRight {
    0% {
        opacity: 0;
        transform: translateX(40px) scaleX(0.98);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scaleX(1);
    }
}

/*--------------------------------------
アニメーション④：label-anim｜ラベルを左から右に表示
--------------------------------------*/

.label-anim {
    position: relative;
    display: inline-block;
    overflow: hidden;
    opacity: 0;
    transform: translateX(0);
    transition: opacity 0.8s ease, transform 1s ease;
    will-change: opacity, transform;
}

.label-anim.active {
    opacity: 1;
    transform: translateX(0);
}

.label-anim img {
    display: block;
    width: 100%;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.5s ease;
    will-change: clip-path;
}

.label-anim.active img {
    clip-path: inset(0 0 0 0);
}

/*--------------------------------------
アニメーション⑤：label-anim｜ラベルを右から左に表示
--------------------------------------*/

.label-anim-rev {
    position: relative;
    display: inline-block;
    overflow: hidden;
    opacity: 0;
    transform: translateX(0);
    transition: opacity 0.8s ease, transform 1s ease;
    will-change: opacity, transform;
}

.label-anim-rev.active {
    opacity: 1;
    transform: translateX(0);
}

.label-anim-rev img {
    display: block;
    width: 100%;
    clip-path: inset(0 0 0 100%);
    /* ← 左側を隠す → 右から左に表示 */
    transition: clip-path 1.5s ease;
    will-change: clip-path;
}

.label-anim-rev.active img {
    clip-path: inset(0 0 0 0);
}

/*--------------------------------------
アニメーション⑥：label-anim-diagonal｜ラベルを斜め左下から斜め右上にかけて表示
--------------------------------------*/

.label-anim-diagonal {
    position: relative;
    display: inline-block;
    overflow: hidden;
    opacity: 0;
    transform: translate(-30px, 30px);
    transition: opacity 0.8s ease, transform 1s ease;
    will-change: opacity, transform;
}

.label-anim-diagonal.active {
    opacity: 1;
    transform: translate(0, 0);
}

.label-anim-diagonal img {
    display: block;
    width: 100%;
    clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
    transition: clip-path 1.2s ease-in-out;
    will-change: clip-path;
}

.label-anim-diagonal.active img {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/*--------------------------------------
アニメーション⑦：pop-up｜縮小状態から大きくなる
--------------------------------------*/

.pop-up {
    opacity: 0;
    transform: scale(0.5);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.pop-up.active {
    opacity: 1;
    transform: scale(1);
}

/*--------------------------------------
アニメーション⑧：shake-anim｜シェイクモーション
--------------------------------------*/

.shake-anim {
    display: inline-block;
    animation: shake-anim 0.6s ease-in-out infinite;
}

@keyframes shake-anim {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    20% {
        transform: translate(-3px, 3px) rotate(-2deg);
    }

    40% {
        transform: translate(3px, -3px) rotate(2deg);
    }

    60% {
        transform: translate(-3px, 3px) rotate(-2deg);
    }

    80% {
        transform: translate(3px, -3px) rotate(2deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

/*--------------------------------------
アニメーション⑨：bubble｜ふわふわ浮遊
--------------------------------------*/

/* 共通バブル設定 */
.bubble {
    position: absolute;
    width: 100%;
    opacity: 0.8;
    animation: floatLoop 9s ease-in-out infinite;
    will-change: transform, opacity;
}

/* ふわふわ浮遊アニメーション */
@keyframes floatLoop {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.8;
    }

    25% {
        transform: translate(-6px, -10px) scale(1.03);
        opacity: 0.9;
    }

    50% {
        transform: translate(6px, 8px) scale(0.96);
        opacity: 0.75;
    }

    75% {
        transform: translate(-4px, 6px) scale(1.02);
        opacity: 0.85;
    }

    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.8;
    }
}

/*----------------------------------------
下部固定ボタン
----------------------------------------*/

.float-area {
    position: fixed;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    margin: auto;
    right: 0;
    left: 0;
    max-width: 600px;
    z-index: 99999;
    pointer-events: none;
    margin: 0 auto;
}

.float-area.fixed {
    opacity: 1;
    z-index: 100;
    pointer-events: auto;
}

.float-btn-wrap {
    position: relative;
}

.float_btn {
    position: absolute;
    width: 40%;
    top: 8%;
    right: 3.2%;
    transition-duration: .4s;
}

.float_btn:hover {
    transform: scale(1.1);
    opacity: 0.6;
}

.float_btn.anim-box {
    animation: fuwafuwa 1s ease 0s infinite alternate;
    transform-origin: center;
}

@keyframes fuwafuwa {
    from {
        transform: scale(0.9, 0.9);
    }

    to {
        transform: scale(1, 1);
    }
}

/* 完全に非表示にするクラス */
.float-area.hidden {
    opacity: 0;
    pointer-events: none;
}

/*----------------------------------------
FV
----------------------------------------*/

#fv {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.fv-copy01 {
    position: absolute;
    top: 5%;
    left: 50%;
    width: 76%;
    transform: translateX(-50%);

}

.fv-copy02 {
    position: absolute;
    top: 13.5%;
    left: 50%;
    width: 97%;
    transform: translateX(-50%);
}

/*----------------------------------------
CVエリア
----------------------------------------*/

.cv_area {
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.price {
    position: absolute;
    top: 35.58%;
    right: 6%;
    width: 61.6%;
}

/* マスクエリア */
.mask01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: url('../images/special-price.png');
    mask-image: url('../images/special-price.png');
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left top;
    mask-position: left top;
}

/* 光の部分 */
.hikari {
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    animation: kirari 3s ease-in-out infinite;
    opacity: 0.8;
}

/* 光が斜めに通り抜けるアニメーション */
@keyframes kirari {
    0% {
        left: -75%;
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    60% {
        left: 125%;
        opacity: 1;
    }

    100% {
        left: 125%;
        opacity: 0;
    }
}

.cv-btn {
    position: absolute;
    top: 59.58%;
    right: 0.7%;
    transition-duration: .4s;
}

.cv-btn img {
    width: 95%;
}

.cv-btn:hover {
    transform: scale(1.1);
    opacity: 0.6;
}

.cv-btn.anim-box {
    animation: fuwafuwa 1s ease 0s infinite alternate;
    transform-origin: center;
}

@keyframes fuwafuwa {
    from {
        transform: scale(0.9, 0.9);
    }

    to {
        transform: scale(1, 1);
    }
}

/*----------------------------------------
sec01-1
----------------------------------------*/

.sec01-1 {
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.sec01-copy01 {
    position: absolute;
    top: 25.65%;
    left: 50%;
    width: 51%;
    transform: translateX(-50%);
}

.mov_wrap {
    position: absolute;
    bottom: 9%;
    text-align: center;
    margin: auto;
    background: none;
}

video.movie {
    width: 63.5%;
    border-radius: 20px;
}

@media only screen and (max-width:768px) {

    .mov_wrap {
        position: absolute;
        bottom: 10%;
        text-align: center;
        margin: auto;
        background: none;
    }

    video.movie {
        width: 90%;
        border-radius: 10px;
    }

}

/*----------------------------------------
sec01-2
----------------------------------------*/

.sec01-2 {
    position: relative;
}

.sec01-copy02 {
    position: absolute;
    bottom: 17.3%;
    left: 3%;
    width: 16%;
}

/*----------------------------------------
sec02
----------------------------------------*/

.sec02 {
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.sec02-copy01 {
    position: absolute;
    top: 14%;
    left: 50%;
    width: 76%;
    transform: translateX(-50%);
}

.sec02-label {
    position: absolute;
    bottom: 15%;
    left: 50%;
    width: 85%;
    transform: translateX(-50%);
}

.sec02-copy02 {
    position: absolute;
    bottom: 3%;
    left: 50%;
    width: 88%;
    transform: translateX(-50%);
}

/*----------------------------------------
sec03
----------------------------------------*/

.sec03 {
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.sec03-copy01 {
    position: absolute;
    top: 12.7%;
    width: 36%;
}

.sec03-copy02 {
    position: absolute;
    top: 52.6%;
    left: 50%;
    width: 75%;
    transform: translateX(-50%);
}

/*----------------------------------------
sec04
----------------------------------------*/

.sec04 {
    position: relative;
    margin-top: -1px;
}

.sec04-copy01 {
    position: absolute;
    top: 18.3%;
    right: 0.7%;
    width: 12.5%;
}

.sec04-copy02 {
    position: absolute;
    top: 22%;
    right: 12%;
    width: 18.5%;
}

.sec04-product {
    position: absolute;
    bottom: 8%;
    left: 50%;
    width: 26%;
    transform: translateX(-50%);
}

/*----------------------------------------
sec05-1
----------------------------------------*/

.sec05-1 {
    position: relative;
    margin-top: -0.539px;
}

.sec05-top-icon {
    position: absolute;
    bottom: 36%;
    left: 50%;
    width: 92%;
    transform: translateX(-50%);
}

.sec05-bottom-icon {
    position: absolute;
    bottom: 3%;
    left: 50%;
    width: 92%;
    transform: translateX(-50%);
}

/*----------------------------------------
sec05-2
----------------------------------------*/

.sec05-2 {
    position: relative;
}

.sec05-copy01 {
    position: absolute;
    bottom: 70.5%;
    right: 0;
    width: 60%;
}

.sec05-copy02 {
    position: absolute;
    bottom: 56%;
    right: 0;
    width: 48%;
}

.sec05-copy03 {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 33%;
    transform: translateX(-50%);
}

/*----------------------------------------
sec05-3
----------------------------------------*/

.sec05-3 {
    position: relative;
}

.sec05-copy04 {
    position: absolute;
    top: 10.9%;
    left: 50%;
    width: 92%;
    transform: translateX(-50%);
}

.sec05-box {
    position: absolute;
    bottom: 1%;
    left: 3.3%;
    width: 97%;
}

/*----------------------------------------
sec05-4
----------------------------------------*/

.sec05-4 {
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.sec05-copy05 {
    position: absolute;
    top: 20%;
    left: 50%;
    width: 65.8%;
    transform: translateX(-50%);
}

.sec05-copy06 {
    position: absolute;
    top: 45%;
    left: 50%;
    width: 91.5%;
    transform: translateX(-50%);
}

/*----------------------------------------
sec05-5
----------------------------------------*/

.sec05-5 {
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.sec05-copy07 {
    position: absolute;
    top: 6%;
    right: 12%;
    width: 28%;
}

.sec05-copy08 {
    position: absolute;
    top: 12%;
    right: 34%;
    width: 19%;
}

.sec05-img01 {
    position: absolute;
    bottom: 15.55%;
    left: 50%;
    width: 83.9%;
    transform: translateX(-50%);
}

.sec05-img02 {
    position: absolute;
    bottom: 9%;
    left: 50%;
    width: 83.9%;
    transform: translateX(-50%);
}

.sec05-img03 {
    position: absolute;
    bottom: 2.5%;
    left: 50%;
    width: 83.9%;
    transform: translateX(-50%);
}

/*----------------------------------------
sec05-6
----------------------------------------*/

.sec05-6 {
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.sec05-copy09 {
    position: absolute;
    top: 9.5%;
    left: 50%;
    width: 85%;
    transform: translateX(-50%);
}

/*----------------------------------------
sec06
----------------------------------------*/

.sec06 {
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.sec06-popup {
    position: absolute;
    top: 3%;
    left: 50%;
    width: 36%;
    transform: translateX(-50%);
}

.sec06-label {
    position: absolute;
    top: 55.5%;
    left: 50%;
    width: 91%;
    transform: translateX(-50%);
}

/*----------------------------------------
sec07-1
----------------------------------------*/

.sec07-1 {
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.sec07-tit {
    position: absolute;
    top: 3%;
    left: 50%;
    width: 98%;
    transform: translateX(-50%);
}

/*----------------------------------------
sec07-2
----------------------------------------*/

.sec07-2 {
    position: relative;
}

.sec07-icon {
    position: absolute;
    top: 17.3%;
    left: 8.5%;
    width: 62%;
    display: flex;
    gap: 2.5%;
}

.sec07-icon img {
    display: block;
    width: 100%;
    filter: drop-shadow(5px 5px 5px rgba(22, 24, 33, 0.4));
}

.sec07-copy01 {
    position: absolute;
    top: 30%;
    right: 7.5%;
    width: 14%;
}

/*----------------------------------------
sec07-3
----------------------------------------*/

.sec07-3 {
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.arrow {
    position: absolute;
    left: 50%;
    width: 70%;
    top: 40%;
    transform: translateX(-50%);
}

.arrow img {
    animation: arrowFlow 2.5s ease-in-out infinite;
}

/* 上から下へ自然に流れて消えるアニメーション */
@keyframes arrowFlow {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    70% {
        transform: translateY(40px);
        opacity: 1;
    }

    100% {
        transform: translateY(60px);
        opacity: 0;
    }
}

/*----------------------------------------
sec07-4
----------------------------------------*/

.sec07-4 {
    position: relative;
}

.sec07-box {
    position: absolute;
    left: 0;
    width: 96%;
    top: 3%;
    z-index: 10;
}

/*----------------------------------------
sec08-1
----------------------------------------*/

.sec08-1 {
    position: relative;
}

.sec08-deco {
    position: absolute;
    right: 0;
    width: 23%;
    top: -31%;
    z-index: 20;
}

/*----------------------------------------
sec08-2
----------------------------------------*/

.sec08-2 {
    position: relative;
}

.sec08-label01 {
    position: absolute;
    width: 70.3%;
    top: 1.5%;
    right: 0;
    z-index: 20;
}

.sec08-label02 {
    position: absolute;
    width: 70.3%;
    top: 13.4%;
    left: 0;
    z-index: 20;
}

.sec08-label03 {
    position: absolute;
    width: 70.3%;
    top: 28%;
    right: 0;
    z-index: 20;
}

.sec08-label04 {
    position: absolute;
    width: 70.3%;
    top: 40.42%;
    left: 0;
    z-index: 20;
}

.sec08-label05 {
    position: absolute;
    width: 70.3%;
    top: 52.8%;
    right: 0;
    z-index: 20;
}

.sec08-label06 {
    position: absolute;
    width: 70.3%;
    top: 66%;
    left: 0;
    z-index: 20;
}

.sec08-label07 {
    position: absolute;
    width: 70.3%;
    top: 79%;
    right: 0;
    z-index: 20;
}

/* 各バブルの配置と時間差 */
.bubble1 {
    left: 0;
    top: 1.5%;
    width: 50%;
    animation-delay: 0s;
}

.bubble2 {
    right: -7%;
    top: 14.5%;
    width: 51%;
    animation-delay: 1.5s;
}

.bubble3 {
    left: 0;
    top: 28%;
    width: 50%;
    animation-delay: 3s;
}

.bubble4 {
    right: -6%;
    top: 40%;
    width: 53%;
    animation-delay: 4.5s;
}

.bubble5 {
    left: -4%;
    top: 53%;
    width: 53%;
    animation-delay: 6s;
}

.bubble6 {
    right: -6%;
    top: 67%;
    width: 53%;
    animation-delay: 7.5s;
}

.bubble7 {
    left: -4%;
    top: 80%;
    width: 53%;
    animation-delay: 7.5s;
}

/*----------------------------------------
sec08-3
----------------------------------------*/

.sec08-3 {
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.sec08-popup {
    position: absolute;
    left: 50%;
    width: 32%;
    top: -3%;
    transform: translateX(-50%);
}

.sec08-copy01 {
    position: absolute;
    left: 50%;
    width: 67%;
    top: 12%;
    transform: translateX(-50%);
}

.sec08-copy02 {
    position: absolute;
    left: 50%;
    width: 85%;
    top: 13.5%;
    transform: translateX(-50%);
}

.sec08-icon01 {
    position: absolute;
    left: 50%;
    width: 90%;
    top: 57%;
    transform: translateX(-50%);
    filter: drop-shadow(8px 8px 8px rgba(63, 44, 22, 0.3));
}

.sec08-icon02 {
    position: absolute;
    left: 50%;
    width: 90%;
    top: 70.5%;
    transform: translateX(-50%);
    filter: drop-shadow(8px 8px 8px rgba(63, 44, 22, 0.3));
}

.sec08-icon03 {
    position: absolute;
    left: 50%;
    width: 90%;
    top: 84%;
    transform: translateX(-50%);
    filter: drop-shadow(8px 8px 8px rgba(63, 44, 22, 0.3));
}

/*----------------------------------------
sec09
----------------------------------------*/

.sec09 {
    position: relative;
}

.sec09-copy {
    position: absolute;
    width: 84.5%;
    left: 50%;
    top: 9%;
    transform: translateX(-50%);
}

/*----------------------------------------
sec10-1
----------------------------------------*/

.sec10-1 {
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.sec10-img01 {
    position: absolute;
    width: 90%;
    left: 50%;
    top: 23.5%;
    transform: translateX(-50%);
    filter: drop-shadow(8px 8px 8px rgba(22, 24, 33, 0.15));
}

/*----------------------------------------
sec10-2
----------------------------------------*/

.sec10-2 {
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.sec10-box {
    position: absolute;
    width: 90%;
    left: 50%;
    top: 5%;
    display: flex;
    gap: 2.5%;
    transform: translateX(-50%);
}

.sec10-box img {
    display: block;
    width: 100%;
    filter: drop-shadow(5px 5px 5px rgba(22, 24, 33, 0.4));
}

/*----------------------------------------
sec10-3
----------------------------------------*/

.sec10-3 {
    position: relative;
}

.sec10-img02 {
    position: absolute;
    width: 88%;
    bottom: -10%;
    left: 8%;
    z-index: 10;
}

.sec10-deco {
    position: absolute;
    width: 95%;
    bottom: 2.3%;
    left: 50%;
    animation: spin 50s linear infinite;
    mix-blend-mode: color-dodge;
    /* ←覆い焼き（リニア）加算に近い */
    opacity: 0.8;
    /* 調整すると自然になります */
}

@keyframes spin {
    from {
        transform: translateX(-50%) rotate(0deg);
    }

    to {
        transform: translateX(-50%) rotate(360deg);
    }
}

/*----------------------------------------
sec10-4
----------------------------------------*/

.sec10-4 {
    position: relative;
    margin-top: -1px;
}

.sec10-label01 {
    position: absolute;
    width: 34.1%;
    top: 3.49%;
    left: 50%;
    transform: translateX(-50%);
}

.sec10-label02 {
    position: absolute;
    width: 59.6%;
    top: 7.8%;
    left: 50%;
    transform: translateX(-50%);
}

.sec10-copy {
    position: absolute;
    width: 93%;
    top: 21.2%;
    left: 4.7%;
}

.sec10-img03 {
    position: absolute;
    width: 93%;
    top: 32%;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(8px 8px 8px rgba(5, 19, 3, 0.4));
}

.sec10-product {
    position: absolute;
    width: 25%;
    top: 41%;
    left: 39.5%;
}

/*----------------------------------------
sec11-0
----------------------------------------*/

.sec11-0 {
    position: relative;
    margin-top: -1px;
}

.sec11-label01 {
    position: absolute;
    width: 8.45%;
    top: 5%;
    right: 8%;
}

.sec11-label02 {
    position: absolute;
    width: 8.45%;
    top: 6.5%;
    right: 18.57%;
}

.sec11-product {
    position: absolute;
    width: 24%;
    top: 31%;
    right: -0.8%;
    z-index: 10;
}

.sec11-tit {
    position: absolute;
    width: 89%;
    top: 63%;
    left: 50%;
    transform: translateX(-50%);
}

/*----------------------------------------
sec11-1
----------------------------------------*/

.sec11-1 {
    position: relative;
}

.sec11-1-label01 {
    position: absolute;
    width: 73%;
    top: 14.5%;
    left: 50%;
    transform: translateX(-50%);
}

.sec11-1-subtit {
    position: absolute;
    width: 82.4%;
    top: 19.5%;
    left: 50%;
    transform: translateX(-50%);
}

.sec11-1-label02 {
    position: absolute;
    width: 84%;
    top: 86.4%;
    left: 50%;
    transform: translateX(-50%);
}

/*----------------------------------------
sec11-2
----------------------------------------*/

.sec11-2 {
    position: relative;
}

.sec11-2-label01 {
    position: absolute;
    width: 57.5%;
    top: 11.45%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.sec11-2-subtit {
    position: absolute;
    width: 92.5%;
    top: 12.4%;
    left: 50%;
    transform: translateX(-50%);
}

.bubble8 {
    left: 7%;
    top: 52%;
    width: 8%;
    animation-delay: 0s;
}

.bubble9 {
    right: 32%;
    top: 47.5%;
    width: 19%;
    animation-delay: 1.5s;
}

.bubble10 {
    right: 2%;
    top: 29%;
    width: 13%;
    animation-delay: 3s;
}

.sec11-2-label02 {
    position: absolute;
    width: 84%;
    top: 77.5%;
    left: 50%;
    transform: translateX(-50%);
}

/*----------------------------------------
sec11-3
----------------------------------------*/

.sec11-3 {
    position: relative;
}

.sec11-3-label01 {
    position: absolute;
    width: 32%;
    top: 11.3%;
    left: 50%;
    transform: translateX(-50%);
}

.sec11-3-subtit {
    position: absolute;
    width: 95%;
    top: 13%;
    left: 50%;
    transform: translateX(-50%);
}

.sec11-3-label02 {
    position: absolute;
    width: 84%;
    top: 78.9%;
    left: 50%;
    transform: translateX(-50%);
}

/*----------------------------------------
sec12
----------------------------------------*/

.sec12 {
    position: relative;
    margin-top: -1px;
}

.sec12-popup {
    position: absolute;
    width: 25%;
    top: 3%;
    right: 2%;
}

.sec12-copy {
    position: absolute;
    width: 33%;
    top: 11%;
    right: 4%;
}

.sec12-product {
    position: absolute;
    width: 27%;
    top: 28%;
    left: 50%;
    transform: translateX(-50%);
}

.sec12-icon {
    position: absolute;
    width: 84%;
    left: 50%;
    top: 83.5%;
    display: flex;
    gap: 7%;
    transform: translateX(-50%);
}

.sec12-icon img {
    display: block;
    width: 100%;
    filter: drop-shadow(5px 5px 5px rgba(22, 24, 33, 0.5));
}

/*----------------------------------------
sec13
----------------------------------------*/

.sec13 {
    position: relative;
    margin-top: -1px;
}

.sec13-label01 {
    position: absolute;
    width: 8.5%;
    top: 10%;
    left: 22.5%;
}

.sec13-label02 {
    position: absolute;
    width: 8.3%;
    top: 21%;
    left: 12%;
}

.sec13-copy01 {
    position: absolute;
    width: 92%;
    top: 79%;
    left: 50%;
    transform: translateX(-50%);
}

.sec13-copy02 {
    position: absolute;
    width: 50%;
    top: 90%;
    left: 50%;
    transform: translateX(-50%);
}

/*----------------------------------------
sec14
----------------------------------------*/

.sec14_recommend {
    background-image: url(../images/sec14_recommend.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    padding-bottom: 3%;
}

.accordion_wrap01 {
    padding: 23% 4% 0 4%;
    width: 100%;
    margin: 0 auto;
}

/*----------------------------------------
sec15-1
----------------------------------------*/

.sec15-1 {
    position: relative;
    margin-top: -1px;
}

.sec15-label01 {
    position: absolute;
    width: 8.4%;
    top: 4.8%;
    left: 22.8%;
}

.sec15-label02 {
    position: absolute;
    width: 8.35%;
    top: 8.5%;
    left: 12.2%;
}

.sec15-tit {
    position: absolute;
    width: 92%;
    top: 29.8%;
    left: 50%;
    transform: translateX(-50%);
}

.sec15-product {
    position: absolute;
    width: 27%;
    top: 13%;
    right: -5%;
}

.sec15-step01-img {
    position: absolute;
    width: 52%;
    top: 38.2%;
    left: 4.2%;
    z-index: 10;
}

.sec15-step02-img {
    position: absolute;
    width: 52%;
    top: 58%;
    left: 4.2%;
    z-index: 10;
}

.sec15-step03-img {
    position: absolute;
    width: 52%;
    top: 77.9%;
    left: 4.2%;
    z-index: 10;
}

.sec15-step01-tit {
    position: absolute;
    width: 48%;
    top: 38.9%;
    right: 3.8%;
}

.sec15-step02-tit {
    position: absolute;
    width: 50%;
    top: 58.99%;
    right: 1.56%;
}

.sec15-step03-tit {
    position: absolute;
    width: 48%;
    top: 77.95%;
    right: 3.8%;
}

/*----------------------------------------
sec15-2
----------------------------------------*/

.sec15-2 {
    position: relative;
    margin-top: -1px;
}

.sec15-label03 {
    position: absolute;
    width: 68%;
    top: 3.2%;
    left: 50%;
    transform: translateX(-50%);
}

.sec15-box01 {
    position: absolute;
    width: 83%;
    top: 17%;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(7px 7px 7px rgba(22, 24, 33, 0.2));
}

.sec15-box02 {
    position: absolute;
    width: 83%;
    top: 56.3%;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(7px 7px 7px rgba(22, 24, 33, 0.2));
}

/*----------------------------------------
sec16
----------------------------------------*/

.faq {
    background-image: url(../images/sec16_faq.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    padding-bottom: 3%;
}

.accordion_wrap02 {
    padding: 37% 4% 0 4%;
    width: 100%;
    margin: 0 auto;
}

.accordion {
    margin-bottom: 3%;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    /* 閉じている時は全角丸 */
    transition: border-radius 0.3s;
}

.accordion.show {
    border-bottom-left-radius: 0;
    /* 開いた時は下角丸なし */
    border-bottom-right-radius: 0;
}

.accordion__btn {
    position: relative;
    cursor: pointer;
    display: block;
    width: 100%;
    border-radius: 1%;
    /* 閉じている時は全角丸 */
    transition: border-radius 0.3s;
}

.accordion__btn.show {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* + を表す縦横線 */
.accordion__btn::before,
.accordion__btn::after {
    content: '';
    display: inline-block;
    border-radius: 10%;
    width: 4%;
    height: 3px;
    background-color: #fffee4;
    position: absolute;
    right: 3.97%;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s;
}

.accordion__btn::after {
    transform: translateY(-50%) rotate(90deg);
}

.accordion__btn.show::before {
    opacity: 0;
    /* 縦線を消す */
}

.accordion__btn.show::after {
    transform: translateY(-50%) rotate(0deg);
    /* 横線だけにして「-」表示 */
}

.accordion__content {
    display: none;
}

/*----------------------------------------
footer
----------------------------------------*/

.footer {
    background-color: #5b5b5b;
    padding: 2em 0em;
    margin: 0 auto;
    text-align: center;
    font-size: 1.4em;
    color: #fff;
}

.footer_container_fluid {
    width: 100%;
    background: #e3e3e3;
    margin: auto;
}

.footer_container {
    margin-left: auto;
    margin-right: auto;
    width: 750px;
}

.footer_container {
    width: 90%;
    margin: 0 auto;
    text-align: center;
}

.footer_container ul {
    margin: 0;
    padding: 0;
    display: inline-block;
}

.footer_container li {
    list-style: none;
    margin: 0 10px 0 0;
    float: left;
}

.footer_container li:last-child {
    margin: 0;
}

.footer_container li a {
    text-decoration: none;
    font-size: 10px;
    color: #3e3e3e;
}

.copyright {
    width: 100%;
    background: #e3e3e3;
    margin: auto;
    color: #3e3e3e;
    font-size: 10px;
    text-align: center;
}