html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 横方向のはみ出しを防止 */
  }
#onetrust-consent-sdk * {
    font-family: ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif !important;
}
html{
    font-size: 16px;
    scroll-behavior: smooth;
}
a, a:active, a:hover, a:link, a:visited{
    color: inherit;
}
picture{
    display: block;
}
/* サイト幅 */
.con{
    margin-right: auto;
    margin-left: auto;
    max-width: 62.5vw;
    @media (max-width: 999px){
        max-width: 87.2vw;
    }
}
.con-notfade{
    margin-right: auto;
    margin-left: auto;
}

.mainbody *{
    font-family: "Zen Maru Gothic", sans-serif;
    font-style: normal;
    color: #111;
    font-weight: 600;
}


/* text */

a:hover{
    text-decoration: none;
}

.txt-regular,.txt-regular *{
    font-weight: 500;
}
.txt-center{
    text-align: center;
}
.txt-left{
    text-align: left;
}
.txt-right{
    text-align: right;
}

.txt-span{
    display: inline-block;
}
strong{
    margin-left: 0!important;
}



/*カラム*/
.container {
    display: flex;
}
.column-auto{
    flex: auto;
}
.column-1 {
    flex: 1;
}
.column-2 {
    flex: 2;
}
.column-2_4 {
    flex: 2.6;
}
.column-3 {
    flex: 3;
    /* メモ：flexプロパティで各カラムの比率を指定しています。
    例えば、左カラムはflex: 1、右カラムはflex: 2とすると、全体の1/3が左カラム、2/3が右カラムになります。
    比率は自由に変更可能です。たとえば、両カラムを1:1にするには両方ともflex: 1に設定します。 */
}

.fleft{
    float: left;
}

.clear{
    clear: both;
}

@media screen and (max-width:1000px){
    .container{
        flex-flow: column;
    }
    .descriptions{
        flex-direction: column-reverse;
    }
    .descriptions-img{
        width: 113%;
        margin-left: -5.6%;
        margin-top: 2.35rem;
    }
}


/* リンク用パーツ */
button{
    font-size: 0.9375rem; /* 15px ÷ 16px = 0.9375rem */
    line-height: 1;    /* 32 ÷ 15 ≈ 2.13 */
    padding: 1.43em 3.6em;
    color: #AA5259;
    border: solid #AA5259 2px;
    border-radius: 50px;
    font-weight: 700;
    background-color: inherit;
}
.sp-button{
    padding: 1.15em 2.6em;
}

.more_link{
    font-size: 0.938rem; /* 18px ÷ 16px = 1.125rem */
    line-height: 1.44;   /* 26 ÷ 18 ≈ 1.44 */
    font-weight: 700;
}
.more_link span{
    position: relative;
    color: #AA5259;
}
.more_link span:after{
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #AA5259;
}
.more_link2{
    font-size: 1.125rem; /* 18px ÷ 16px = 1.125rem */
    line-height: 1.44;   /* 26 ÷ 18 ≈ 1.44 */
    font-weight: 700;
}


/* ホバーアニメーション */
  
  /* 矢印 */
  .arrow-wrap{
    overflow: hidden;
    height: 39.8px;
  }
  .arrow-wrap img{
    transform: translateY(-100%);
    transition: 0.4s ease-in-out;
  }
  .arrow-up:hover .arrow-wrap img{
    transform: translateY(18%);
  }
  /* リンク下線 */
  .more_link:hover span:after{
    animation-name: more_link;
    animation-duration: 0.4s ;
  }
  @keyframes more_link {
    0%{
        width: 0;
    }
    100%{
        width: 100%;
    }
  }
  /* ボタン */
  a button ,a .contact-box ,a .contact-box p{
    transition: 0.4s ease-in-out;
  }
  a:hover button ,a:hover .contact-box{
    background-color: #AA5259;
    color: #fff;
  }
  a:hover .contact-box p{
    color: #fff;
  }


  /*吹き出し*/
.fukidashi{
    width: 31.25vw;
    margin: 0 auto;
    aspect-ratio: 125 / 35;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 1.6vw;
    h2{
        font-size: 2vw;
    }
    @media (max-width: 999px){
        width: 88.25vw;
        aspect-ratio: 125 / 45;
        h2{
            font-size: 5.6vw;
            padding-bottom: 5.8vw;
        }
    }
}


/* 近づいたら表示 */
.con{
    opacity: 0;
    visibility: hidden;
    transition: all 1.2s ease;
}

.is-active {
    opacity: 1;
    visibility: visible;
  }

/* 回転なし */
.fade-up {
  opacity: 0;
  transform: translate(0%, 5%);
  transition: opacity 0.8s ease var(--delay, 0s), 
              transform 0.8s ease var(--delay, 0s);
}
.fade-up.is-visible {
  opacity: 1;
  transform: translate(0%, 0%);
}

.fade-up-bounce {
    opacity: 0;
    transform: translateY(5%) scaleY(1) scaleX(1);
    transition: opacity 0.8s ease var(--delay, 0s), 
                transform 0.8s ease var(--delay, 0s);
}
 
.fade-up-bounce.is-visible {
    opacity: 1;
    transform: translateY(0%) scaleY(1) scaleX(1);
    animation: squashStretch 0.5s ease-in-out forwards;
    animation-delay: 1s;
}
 
@keyframes squashStretch {
    0% {
        transform: translateY(0%) scaleY(1) scaleX(1) rotate(0deg);
    }
    50% {
        transform: translateY(0%) scaleY(1.4) scaleX(1.4) rotate(-10deg);
    }
    100% {
        transform: translateY(0%) scaleY(1) scaleX(1) rotate(0deg);
    }
}


/* 表示制御 */

@media (min-width: 1000px){
    .sp-only,.sp-br{
        display: none!important;
    }
}

@media (max-width: 999px){
    .pc-only,.pc-br{
        display: none!important;
    }
}



/* 
 * FV
 */
header{
    position: absolute;
    top: 0;
    left: 0;
    .header-bg{
        pointer-events: none;
        user-select: none;
  -webkit-user-drag: none;
    }
    .logo{
        width: 10vw;
        margin: 0 auto;
        position: absolute;
        top: 3.75vw;
        left: 5.875vw;
        @media (max-width: 999px){
            width: 17.6vw;
            top: 5.6vw;
            left: 5.6vw;
        }
    }
}

.fv{
    aspect-ratio: 16 / 9;
    height: auto;
    width: 100%;
    background-color: #784591!important;
    background: url("../img/000-fv-bg.webp");
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    .main-pkg,.hi_chew-pkg,img:not(.main-pkg img,.hi_chew-pkg img){
        position: absolute;
    }
    
    .fv-copy{
        width: 27vw;
        top: 11.68vw;
        left: 16.49vw;
    }
    .hamigaki-icon{
        width: 12.11vw;
        top: 12.5vw;
        left: 44.1vw;
        z-index: 3;
    }
    .logo-hi-chew{
        width: 29vw;
        top: 23.25vw;
        left: 25.625vw;
    }
    .feature-1{
        width: 8.61vw;
        top: 37.5vw;
        left: 22.875vw;
    }
    .feature-2{
        width: 8.61vw;
        top: 37.5vw;
        left: 32.3125vw;
    }
    .feature-3{
        width: 8.61vw;
        top: 37.5vw;
        left: 41.6875vw;
    }
    .main-pkg{
        width: 21vw;
        top: 1vw;
        left: 53.5vw;
        transform: rotate(11deg);
    }
    .caution{
        width: 11.66vw;
        top: 30.5vw;
        left: 70vw;
    }
    .caution-2{
        width: 9.66vw;
        top: 41.3vw;
        left: 70vw;
    }
    .hi_chew-pkg{
        width: 13.88vw;
        top: 10.4375vw;
        left: 27.5vw;
        transform: rotate(-21deg);
    }
    @media (max-width: 999px){
        background: url("../img/000-fv-bg-sp.webp");
        background-size: calc(100vw + 3px) auto;
        background-position: 50% 0%;
        background-repeat: no-repeat;
        aspect-ratio: 0.57;
        .fv-copy{
            width: 43.47vw;
            top: 10.88vw;
            left: 31.65vw;
        }
        .hamigaki-icon{
            width: 28.8vw;
            top: 34.27vw;
            left: 65.92vw;
            z-index: 3;
        }
        .logo-hi-chew{
            width: 63.2vw;
            top: 33.41vw;
            left: 5.2vw;
        }
        .feature-1{
            width: 24.37vw;
            top: 69.6vw;
            left: 18.24vw;
        }
        .feature-2{
            width: 24.37vw;
            top: 118.24vw;
            left: 16.43vw;
        }
        .feature-3{
            width: 24.37vw;
            top: 93.07vw;
            left: 3.47vw;
        }
        .main-pkg{
            width: 48vw;
            top: 61.92vw;
            left: 36vw;
            transform: rotate(13.5deg);
        }
        .caution{
            width: 29vw;
            top: 124.13vw;
            left: 68.73vw;
        }
        .caution-2{
            width: 30vw;
            top: 153.93vw;
            left: 63.73vw;
        }
        .hi_chew-pkg{
            width: 37vw;
            top: 5vw;
            left: 42.03vw;
            transform: rotate(8deg);
        }
    }
}

/*
* 商品説明
*/
.section010{
    aspect-ratio: 160 / 162.5;
    background: url(../img/010-bg.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    margin-top: -22.8125vw;
    padding-top: 23.875vw;
    position: relative;
    z-index: 2;
    
    .container{
        gap: 3.325vw;
        .section010-col{
            max-width: 25.6vw;
        }
        p,h2{
            color: #fff;
        }
        h2{
            font-size: 2.75vw;
        }
        p{
            font-size: 1.5vw;
            margin-top: 2.375vw;
            line-height: 1.7;
        }
    }

    .section010-cloud{
        margin-top: 4.375vw;
        picture{
            margin: 0 auto;
        }
        .cloud-1{
            width: 51vw;
            position: relative;
            z-index: 1;
        }
        .cloud-2{
            margin-top: -11.4375vw;
            width: 66.7vw;
        }
    }
    @media (max-width: 999px){
        background: url(../img/010-bg-sp.webp);
        background-size: calc(100vw + 3px) auto;
        background-position: 50% 0%;
        background-repeat: no-repeat;
        aspect-ratio: 0.2088;
        margin-top: -16.53vw;
        overflow: clip;
        .container{
            .section010-col{
                max-width: 100%;
                picture{
                    text-align: right;
                    margin-top: 2vw;
                }
                img{
                    width: 97%;
                }
            }
            h2{
                font-size: 7.4vw;
                margin-top: 2.8vw;
                line-height: 1.7;
                letter-spacing: 0.01em;
                width: 105%;
            }
            p{
                text-align: center;
                font-size: 4.2vw;
                margin-top: 0;
            }
        }
        .section010-cloud{
            margin-top: 3.375vw;
            .cloud-1{
                width: 121.6vw;
                margin-left: -10.8vw;
                margin-top: 9vw;
            }
            .cloud-2{
                width: 100vw;
                margin-top: -21.4vw;
            }
        }
    }
}


/*
* 特徴
*/
.feature{
    background: url(../img/020-feature-bg.webp);
    background-repeat: no-repeat;
    background-size: 100%;
        background-position: 0vw -9vw;
    margin-top: -8.375vw;
    padding-top: 13.625vw;
    padding-bottom: 17.5vw;
    position: relative;
    z-index: 1;
    .fukidashi{
        background: url(../img/020-feature-fukidashi.webp);
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .container{
        .text{
            max-width: 27.2vw;
        }
        .heading{
            display: flex;
            align-items: flex-end;
            *{
                color: #3F2282;
            }
            .number{
                font-size: 11.875vw;
                line-height: 1;
                width: 6.6875vw;
            }
            h3{
                font-size: 2vw;
            }
        }
        .description{
            margin-top: 2.125vw;
            width: 25.875vw;
            font-size: 1.35vw;
            letter-spacing: 0.03vw;
        }
        .description-2{
            width: 19.5vw;
            font-size: 0.95vw;
            margin-top: 1.3125vw;
            margin-left: 1em;
            font-family: "Noto Sans JP", sans-serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
        }
        .description-2::before{
            content: "※";
            margin-left: -1em;
        }
    }

    .feature-1{
        margin-top: 3.625vw;
        margin-left: 25.25vw;
        gap: 0.5vw;
        picture{
            max-width: 45.2vw;
            order: 2;
        }
    }
    .feature-2{
        margin-top: 2.76vw;
        margin-left: 18vw;
        gap: 3.575vw;
        picture{
            max-width: 26.5vw;
        }
    }
    .feature-3{
        margin-top: 3vw;
        margin-left: 25.25vw;
        gap: 1.0625vw;
        picture{
            max-width: 44.1vw;
            order: 2;
        }
    }
    @media (max-width: 999px){
        background: url(../img/020-feature-bg-sp.webp);
        background-size: calc(100vw + 3px) auto;
        background-repeat: no-repeat;
        background-position: 50% 7.7%;
        aspect-ratio: 0.1508;
        margin-top: -5vw;
        padding-top: 24vw;
        padding-bottom: 0;
        overflow: clip;
        .fukidashi{
            background: url(../img/020-feature-fukidashi-sp.webp);
            background-size: 100%;
            background-repeat: no-repeat;
        }
        .container{
            max-width: 87.2vw;
            margin: 0px auto;
            picture{
                margin-top: 6vw;
            }
            .text{
                max-width: none;
                .heading{
                    .number{
                        font-size: 26.67vw;
                        width: 12.8vw;
                        margin-left: 4vw;
                    }
                    h3{
                        font-size: 5.6vw;
                        margin-left: 4.5vw;
                        line-height: 1.8;
                    }
                }
                .description{
                    width: 100%;
                    font-size: 4.5vw;
                    margin-top: 5.2vw;
                    line-height: 2;
                }
                .description-2{
                    width: 100%;
                    font-size: 4vw;
                    margin-top: 5vw;
                    line-height: 1.8;
                }
            }
        }
        .feature-1{
            margin-top: 16vw;
            picture{
                max-width: none;
                width: 111vw;
                margin-left: -12vw;
            }
        }
        .feature-2{
            margin-top: 27.5vw;
            picture{
                max-width: none;
                width: 100%;
            }
        }
        .feature-3{
            margin-top: 27.5vw;
            picture{
                max-width: none;
                width: 111vw;
                margin-left: -12vw;
                margin-top: 9vw;
            }
        }
    }
}


/*
* 概要
*/
.property{
    aspect-ratio: 400 / 477.8;
    background: url(../img/030-property-bg.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    margin-top: -8.375vw;
    padding-top: 9.3vw;
    position: relative;
    z-index: 2;
    
    .fukidashi{
        background: url(../img/030-property-fukidashi.webp);
        background-size: 100%;
        background-repeat: no-repeat;
        h2{
            color: #1D4294;
        }
    }

    .property-box{
        width: 75vw;
        background-color: #fff;
        margin: 2vw auto 0;
        border-radius: 3.125vw;
        padding-top: 8.4vw;
        padding-bottom: 4.7vw;
        h3{
            font-size: 1.75vw;
        }
        p{
            font-size: 1.375vw;
            line-height: 1.8;
        }
        .component{
            width: 52.5vw;
            margin: 0 auto;
            gap: 3.5vw;
            justify-content: space-between;
            .component-img{
                max-width: 15.6vw;
                img{
                    width: 100%;
                }
            }
            .component-text{
                max-width: 33.375vw;
                display: flex;
                flex-direction: column;
                align-items: center;
                h3{
                    display: inline;
                    padding: 0.125vw 4.5vw 0.4vw;
                    border-radius: 100vw;
                    color: #fff;
                    background-color: #1D4294;
                }
                p{
                    margin-top: 1.875vw;
                }
                .component-sub{
                    margin-top: 4.5vw;
                }
            }
        }
        .caution{
            width: 62.5vw;
            margin: 4.125vw auto 0;
            padding: 1.44vw 0vw 3.75vw;
            background: #F4F4FB;
            border: solid 2px #1D4294;
            border-radius: 1.875vw;
            display: flex;
            flex-direction: column;
            align-items: center;
            div{
                max-width: 51.5vw;
                margin-top: 1.3125vw;
            }
            h3{
                color: #1D4294;
            }
            p{
                margin-left: 1em;
                color: #1D4294;
            }
            p:first-child{
                color: #9B002D;
            }
            p::before{
                content: "●";
                margin-left: -1em;
            }
        }
    }
    @media (max-width: 999px){
        background: url(../img/030-property-bg-sp.webp);
        background-size: calc(100vw + 3px) auto;
        background-position: 50% 0%;
        aspect-ratio: 0.1499;
        background-repeat: no-repeat;
        padding-top: 39vw;
        .fukidashi{
            background: url(../img/030-property-fukidashi-sp.webp);
            background-size: 100%;
            background-repeat: no-repeat;
            padding-bottom: 1vw;
        }
        .property-box{
            margin-top: 19vw;
            width: 96vw;
            border-radius: 6.5vw;
            padding-top: 15vw;
            padding-bottom: 20vw;
            h3{
                font-size: 5.75vw;
            }
            .component{
                width: 85.5vw;
                .component-img{
                    max-width: none;
                    width: 52.5vw;
                    margin: 0 auto;
                }
                .component-text{
                    max-width: none;
                    margin-top: 10.9vw;
                    h3{
                        padding: 2.8vw 21vw 2.1vw;
                    }
                    p{
                        font-size: 4.5vw;
                        line-height: 2.35;
                        margin-top: 9vw;
                    }
                    .component-sub{
                        margin-top: 17.5vw;
                    }
                    .component-sub-p{
                        margin-top: 2vw;
                        font-size: 5.8vw;
                    }
                }
            }

            .caution{
                width: 92vw;
                margin-top: 19.5vw;
                border-radius: 8vw;
                padding-top: 2vw;
                padding-bottom: 16vw;
                h3{
                    padding-top: 4.3vw;
                    font-size: 7vw;
                }
                div{
                    max-width: none;
                    width: 81vw;
                    margin-top: 5vw;
                }
                p{
                    font-size: 4.5vw;
                    line-height: 2;
                }
            }
        }
    }
}


/*
* 購入ボタン
*/
.buy{
    background: url(../img/040-buy-bg.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0vw -0vw;
    margin-top: -8.375vw;
    padding-top: 13.625vw;
    padding-bottom: 8vw;
    position: relative;
    z-index: 1;
    text-align: center;
    
    .logo{
        width: 50vw;
    }

    .fukidashi{
        background: url(../img/040-buy-fukidashi.webp);
        background-size: 100%;
        background-repeat: no-repeat;
        padding-bottom: 2.4vw;
        margin-top: 4.6875vw;
        h2{
            color: #3F2282;
        }
    }

    .container{
        margin-top: 2.8125vw;
        justify-content: center;
        gap: 8.375vw;
        .box{
            width: 26.875vw;
            max-width: 26.875vw;
            height: 5.75vw;
            max-height: 5.75vw;
            background-color: #fff;
            border: solid 0.25vw #784592;
            border-radius: 1.125vw;
            box-shadow: 0px 1.125vw 0px #784592;
            transition: 0.2s ease-in-out;
        }
        a{
            transition: 0.2s ease-in-out;
        }
        a:hover{
            margin-top: 1vw;
            margin-bottom: -1vw;
            .box{
                box-shadow: 0px 0vw 0px #784592;
            }
            
        }
        .box-1{
            img{
                width: 18vw;
                margin-top: 0.75vw;
            }
        }
        .box-2{
            img{
                width: 15vw;
                margin-top: 1vw;
            }
        }
    }
    @media (max-width: 999px){
        background: url(../img/040-buy-bg-sp.webp);
        background-size: calc(100vw + 3px) auto;
        background-position: 50% 0%;
        background-repeat: no-repeat;
        aspect-ratio: 0.45;
        margin-top: -3.375vw;
        padding-top: 25.625vw;
        .logo{
            width: 85vw;
        }
        .fukidashi{
            background: url(../img/040-buy-fukidashi-sp.webp);
            background-size: 100%;
            background-repeat: no-repeat;
            padding-bottom: 0vw;
            margin-top: 17vw;
        }
        .container{
            margin-top: 24.3vw;
            gap: 25.375vw;
            .box{
                margin: 0 auto;
                max-width: none;
                max-height: none;
                width: 86.5vw;
                height: 18.75vw;
                border: solid 1vw #784592;
                border-radius: 3vw;
                box-shadow: 0px 3vw 0px #784592;
            }
            a:hover{
                margin-top: 3vw;
                margin-bottom: -3vw;
                .box{
                    box-shadow: 0px 0vw 0px #784592;
                }
            }
            .box-1{
                img{
                    width: 57vw;
                    margin-top: 1.75vw;
                }
            }
            .box-2{
                img{
                    width: 50vw;
                    margin-top: 3vw;
                }
            }
        }
    }
}


/*
* フッター
*/
.foot{
    background: linear-gradient(
        135deg,
        #1d4293 0%,
        #1b4696 21.6%,
        #0584cd 78.2%,
        #0093da 100%
    );
    padding-top: 4.0625vw;
    padding-bottom: 4.625vw;
    .text{
        width: 33.5625vw;
        margin: 0 auto;
    }
    .button{
        width: 43.625vw;
        margin: 0.9vw auto 0;
        img{
            border-radius: 2.0625vw;
        }
    }
    @media (max-width: 999px){
        padding: 21.5vw 0 31vw;
          background: linear-gradient(
            to right,
            #1d4293 0%,
            #1b4696 21.6%,
            #0584cd 78.2%,
            #0093da 100%
        );
        .text {
            width: 88.5625vw;
        }
        .button{
            margin-top: 13vw;
            width: 90vw;    
            img{
                border-radius: 6vw;
            }
        }
    }
}