@charset "utf-8";
/*-------------------
   common
-------------------*/
#container {
    overflow: hidden;
}
#container .wrapper {
    font: 3.5vw/1.6 'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
    padding-bottom: 20px;
    text-align: justify;
}
@media screen and (min-width:768px) {
    #container .wrapper {
        font-size: 1vw;
    }
}
#container .wrapper * {
    box-sizing: border-box;
}
#container .flex {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}
#container .secInner {
    padding: 15vw 5vw;
}
@media screen and (min-width:768px) {
    #container .secInner {
        margin: 0 auto;
        max-width: 90%;
        padding: 5vw 0;
        width: 1080px;
    }
}
#container .wrapper h2,
#container .wrapper h3{
    text-align: center;
}
#container .wrapper h2{
    font: 600 6vw/1.5 "Noto Serif JP","YuMincho", "Hiragino Mincho ProN", serif;
}
@media screen and (min-width:768px) {
    #container .wrapper h2{
        font-size: 2vw;
    }
}
#container .wrapper h3{
    font: 5vw/1.5 "Noto Serif JP","YuMincho", "Hiragino Mincho ProN", serif;
}
#container .wrapper p{
    margin: 0;
}
@media screen and (min-width:768px) {
    #container .wrapper p{
    letter-spacing: 0.06em;
}
}
#container .wrapper img{
	display: block;
    margin: 0 auto;
	width: 100% !important
}
#container .wrapper sup{
    font-size: .5em;
    vertical-align: super;
}
@media screen and (min-width:768px) {
    #container .wrapper sup{
        font-size: 0.9vw;
    }
}
#container .wrapper .attention{
    font-size: 2.3vw;
    text-align: right;
}
@media screen and (min-width:768px) {
#container .wrapper .attention{
    font-size: 0.8vw;
}
}
#container .wrapper .br_pc{
        display: none;
    }
    @media screen and (min-width:768px) {
        #container .wrapper .br_pc{
            display: block;
        }
    }
@media screen and (min-width:768px) {
    #container .wrapper .br_sp{
        display: none;
    }
}

.fadein{
    opacity: 0;/*要素を透明化*/
    transform: translate(0,0);/*表示される場所より 80px 下に移動*/
    transition: all 1.5s;/*要素を表示させるまでの時間*/
}
.fadein.scrollin{
    opacity: 1;/*表示される場所に移動*/
    transform: translate(0,0);/*要素を不透明化*/
}
.fadein-left{
    transform: translate(-100px,0);
}
.fadein-right{
    transform: translate(100px,0);
}
.fadein-bottom{
    transform: translate(0,80px);
}

/*-------------------
   mainvisual
-------------------*/
#container .mainvisual{
    background-image: url(/contents/shop/sevenbeauty/img/freepage/prime_ionessence/fv_sp.jpg);
    background-size: cover;
    font-family: "Kozuka Mincho Pr6N", "Hiragino Mincho ProN", "Yu Mincho", serif;
    height: 110vw;
    padding-top: 15vw;
    text-align: center;
}
@media screen and (min-width:768px) {
    #container .mainvisual{
        align-items: center;
        background-image: url(/contents/shop/sevenbeauty/img/freepage/prime_ionessence/fv_pc.jpg);
        display: flex;
        height: 24vw;
        padding-top: 1vw;
    }
}
@media screen and (min-width:768px) {
    .mainvisualInner{
        width: 70%;
    }
}
#container .mainvisual .fv-txtBox{
    margin: 0 auto;
    width: 90%;
}
@media screen and (min-width:768px) {
    #container .mainvisual .fv-txtBox{
        width: 48%;
    }
}
#container .mainvisual .fv-catch{
    font-size: 5vw;
}
@media screen and (min-width:768px) {
    #container .mainvisual .fv-catch{
        font-size: 1.5vw;
    }
}
#container .mainvisual h1{
    color: #00083e;
    font-size: 8.5vw;
    line-height: 10.5vw;
}
@media screen and (min-width:768px) {
    #container .mainvisual h1{
        font-size: 3vw;
        line-height: 3.5vw;
        margin-top: 0.5vw;
    }
}
#container .mainvisual .fv-name{
    color: #62007b;
    font-size: 4vw;
    margin-top: 4vw;
}
@media screen and (min-width:768px) {
    #container .mainvisual .fv-name{
        font-size: 1vw;
        margin-top: 1vw;
}
}
#container .mainvisual .fv-visualBox{
    margin: 2vw auto 0;
    width: 85%;
}
@media screen and (min-width:768px) {
    #container .mainvisual .fv-visualBox{
        margin-top: 0;
        width: 48%;
    }
}
@media screen and (min-width:768px) {
#container .mainvisual .attention{
    margin-top: 0;
}
}
/*-------------------
   features共通
-------------------*/
#container .features .featuresBox{
    align-items: center;
    gap: 8vw;
    justify-content: center;
}
@media screen and (min-width:768px) {
    #container .features .featuresBox{
        gap: 4vw;
        margin-top: 3.8vw;
    }
}
@media screen and (min-width:768px) {
    #container .features .features-textBox{
        width: 40%;
    }
}
#container .features .featuresBox .features-textBox p{
    margin-top: 4vw;
}
@media screen and (min-width:768px) {
    #container .features .featuresBox .features-textBox p{
        margin-top: 0.8vw;
    }
}
@media screen and (min-width:768px) {
    #container .features .features-visualBox{
        width: 40%;
    }
}
/*-------------------
   features-inject（高濃度の成分をピンポイントで導入）
-------------------*/
#container .features-inject{
    background: url(/contents/shop/sevenbeauty/img/freepage/prime_ionessence/features-inject_bg.jpg) no-repeat;
    background-size: cover;
}
#container .features-inject h3{
    margin: 8vw 0 3vw;
}
@media screen and (min-width:768px) {
    #container .features-inject h3{
        font-size: 1.5vw;
        margin: 0 auto 1vw;
    }
}
@media screen and (min-width:768px) {
    #container .features-inject .features-graphBox{
        width: 52%;
    }
}
@media screen and (min-width:768px) {
    #container .features-inject .attention{
        margin-right: 1.5vw;
}
}
/*-------------------
   features-ionization（全ての成分をイオン化済み）
-------------------*/
/*背景テクスチャ位置調整のため*/
#container .features-ionization .titleBox{
    position: relative;
    z-index: 0;
}
/*背景テクスチャ*/
#container .features-ionization .titleBox .texture{
    position: absolute;
    top: -26%;
    width: 28vw;
    z-index: -1;
}
@media screen and (min-width:768px) {
    #container .features-ionization .titleBox .texture{
        left: -4%;
        top: 3%;
        width: 12vw;
    }
}
/*-------------------
   howto（使い方バリエーション）
-------------------*/
#container .howto{
    background: url(/contents/shop/sevenbeauty/img/freepage/prime_ionessence/howto_bg.jpg) no-repeat;
    background-size: cover;
}
#container .howto .howtoBox{
    gap: 3vw;
    margin: 9vw auto 0;
}
@media screen and (min-width:768px) {
    #container .howto .howtoBox{
    align-items: center;
    margin: 4vw auto 0;
    gap: 2vw;
    }
}
@media screen and (min-width:768px) {
    #container .howto .revers{
    flex-direction: row-reverse;
}
}
#container .howto .howto-visualBox{
    margin: 0 auto;
    width: 60%;
}
@media screen and (min-width: 768px) {
    #container .howto .howto-visualBox{
        margin-right: 0;
        width: 35%;
    }
}
/*flexを反対にしたので左の余白を0*/
@media screen and (min-width:768px) {
    #container .howto .revers .howto-visualBox{
        margin-right: auto;
        margin-left: 0;
    }
    }
#container .howto .howto-textBox{
    margin: 0 auto;/*要素を画面中央ぞろえ*/
}
@media screen and (min-width:768px) {
    #container .howto .howto-textBox{
        margin-left: 0;
        width: 43%;
    }
}
/*flexを反対にしたので右の余白を0*/
@media screen and (min-width:768px) {
    #container .howto .revers .howto-textBox{
        margin-right: 0;
        margin-left: auto;
    }
    }
#container .howto .howto-textBox .howto-catch{
    border-bottom: 1px solid #8e5836;
    color: #8e5836;
    margin: 0 auto;
    width: max-content;/*下線の長さをテキストと同じに*/
}
@media screen and (min-width:768px) {
    #container .howto .howto-textBox .howto-catch{
        font-size: 1vw;
        margin-left: 0;
    }
}
#container .howto .howto-textBox h3{
    color: #8e5836;
    font-size: 6vw;
    margin-top: 1vw;
}
@media screen and (min-width:768px) {
    #container .howto .howto-textBox h3{
        font-size: 1.8vw;
        margin-top: 0.5vw;
        text-align: left;
    }
}
#container .howto .howto-textBox .howto-desctxt{
    text-align: center;
    margin-top: 3vw;
}
@media screen and (min-width:768px) {
    #container .howto .howto-textBox .howto-desctxt{
        text-align: justify;
        margin-top: 0.8vw;
    }
}

/*-------------------
   features-quality（防腐剤不使用・低価格・高品質）
-------------------*/
/*背景テクスチャ位置調整のため*/
#container .features-quality .titleBox{
    position: relative;
    z-index: 0;
    margin-top: 0;
}
/*背景テクスチャ*/
#container .features-quality .titleBox .texture{
    position: absolute;
    top: -32%;
    width: 28vw;
    z-index: -1;
}
@media screen and (min-width:768px) {
    #container .features-quality .titleBox .texture{
        width: 12vw;
    }
}
@media screen and (min-width:768px) {
#container .features-quality .featuresBox{
    margin-top: 2.5vw;
}
}
#container .features-quality  .features-textBox{
    margin: 7vw auto 0;
    width: 90%;
}
@media screen and (min-width:768px) {
    #container .features-quality  .features-textBox{
        margin: 0;
        width: 37%;
    }
}
@media screen and (min-width:768px) {
    #container .features-quality  .features-visualBox{
    width: 42%;
}
}
/*-------------------
   dualInfusion（ダブル導入）
-------------------*/
#container .dualInfusion{
    background: url(/contents/shop/sevenbeauty/img/freepage/prime_ionessence/dualInfusion_bg.jpg) no-repeat;
    background-size: cover;
}
#container .dualInfusion .secInner{
    padding-bottom: 5vw;
}
/*内側の半透明背景*/
#container .dualInfusion .whiteBox{
    background-color: rgba(255, 255, 255, 0.70);
    margin-top: 8vw;
    padding: 8vw 5vw;
}
@media screen and (min-width:768px) {
    #container .dualInfusion .whiteBox{
    margin-top: 2vw;
    padding: 4vw 10vw;
}
}
/*h3グラデーション背景*/
#container .dualInfusion h3{
    background: linear-gradient(225deg, #e8d3ee 10%, #faf1f6 30%, #bbe8f7 80%, #ead4ed 100%);
    border-radius: 50px;
    color: #62007b;
    margin: 0 auto 5vw;
    padding: 1vw 0;
    width: 90%;
}
@media screen and (min-width:768px) {
    #container .dualInfusion h3{
        font-size: 1.8vw;
        margin-bottom: 2vw;
        padding: 0.5vw 0;
        width: 100%;
}
}
/*ダブル導入手順*/
#container .dualInfusion .step{
    margin-bottom: 10vw;
}
@media screen and (min-width:768px) {
    #container .dualInfusion .step{
    margin-bottom: 5vw;
}
}
#container .dualInfusion .step-image{
    margin-top: 5vw;
}
@media screen and (min-width:768px) {
    #container .dualInfusion .step-image{
        margin: 2vw auto 0;
        width: 90%;
}
}
/*組み合わせによる効果*/
#container .dualInfusion .resultsBox{
    gap: 4vw;
    justify-content: center;
}
@media screen and (min-width:768px) {
    #container .dualInfusion .resultsBox{
        gap: 1vw;
    }
}
#container .dualInfusion .results li{
    width: calc(94%/2);
}
@media screen and (min-width:768px) {
        #container .dualInfusion .results li{
            width: calc(90%/3);
    }
}
/*-------------------
   lineup
-------------------*/
#container .lineup h2{
    font-size: 8vw;
    line-height: 6vw;
}
@media screen and (min-width:768px) {
    #container .lineup h2{
   font-size: 2.5vw;
   line-height: 2vw;
}
}
#container .lineup h2 span{
    font-size: 3.8vw;/*カタカナのフォントサイズ指定*/
}
@media screen and (min-width:768px) {
    #container .lineup h2 span{
    font-size: 1vw;/*カタカナのフォントサイズ指定*/
    }
}
#container .lineup .lineupBox{
    gap: 10vw 6vw;
    justify-content: center;
    margin: 10vw auto 0;
}
@media screen and (min-width:768px) {
    #container .lineup .lineupBox{
    gap: 1vw;
    margin-top: 3vw;
}
}
#container .lineup .item-catch{
    color: #62007b;
    font: 4.5vw "Noto Serif JP","YuMincho", "Hiragino Mincho ProN", serif;
    margin: 2vw auto;
}
@media screen and (min-width:768px) {
    #container .lineup .item-catch{
        font-size: 1vw;
        margin-top: 1vw;
        margin-bottom: 0.3vw;
}
}
@media screen and (min-width:768px) {
    #container .lineup .item-catch sup{
        font-size: 0.5vw;
    }
}
@media screen and (min-width:768px) {
    #container .lineup .item-name{
        font-size: 0.8vw;
}
}
#container .lineup li{
    text-align: center;
    width: calc(90%/2);
}
@media screen and (min-width:768px) {
    #container .lineup li{
    width: calc(94%/4);
}
}
@media screen and (min-width:768px) {
#container .lineup li img{
    width: 80%;
}
}
@media screen and (min-width:768px) {
    #container .lineup .attention{
        margin-top: 1vw;
    }
}
/*-------------------
   Related-feature（関連特集）
-------------------*/
#container .related-features{
    background-color: #f1efee;
}
#container .related-featuresInner{
    padding: 10vw 5vw 13vw;/*このセクションのみ余白調節のため*/
}
@media screen and (min-width:768px) {
    #container .related-featuresInner{
    padding-top: 2vw;
    padding-bottom: 3vw;
    }
}
#container .related-features h2{
    margin-bottom: 3vw;
}
@media screen and (min-width:768px) {
    #container .related-features h2{
    margin-bottom: 2vw;
}
}
#container .related-features .bannerBox{
    gap: 3vw;
}
@media screen and (min-width:768px) {
    #container .related-features .bannerBox{
        gap: 1vw;
        max-width: 1080px;
    }
}
@media screen and (min-width:768px) {
    #container .related-features .bannerBox li{
        width: calc(98%/2);
    
    }
}