@charset "utf-8";
/* CSS Document */
/* ========================================
Reset
======================================== */
.l-container,
.l-container *,
.l-container *::before,
.l-container *::after{
box-sizing: border-box;
}
.l-container h1,
.l-container h2,
.l-container h3,
.l-container h4,
.l-container h5,
.l-container h6,
.l-container p,
.l-container ul,
.l-container ol,
.l-container dl,
.l-container dd,
.l-container figure{
margin: 0;
}
.l-container ul,
.l-container ol{
margin: 0;
padding: 0;
list-style: none;
}
.l-container img{
max-width: 100%;
height: auto;
vertical-align: bottom;
}
.l-container a{
color: inherit;
text-decoration: none;
}
.l-container table{
border-collapse: collapse;
border-spacing: 0;
}

/* ========================================
Accessibility
======================================== */
/* マウス操作時のフォーカス表示を抑制 */
.l-container :focus:not(:focus-visible){
outline: none;
}

/* ========================================
LP Base
======================================== */
.l-container{
-webkit-text-size-adjust: 100%;
}
.l-container figure{
display: block;
}
/* 注釈テキスト */
.l-container p.note,
.l-container ul.note,
.l-container li.note{
text-align: left;
text-indent: -1em;
padding-left: 1em;
}

/*====================
コンテンツ
====================*/
.isPC{
display: none;
}
#content_wrap{
position: relative;
overflow: hidden;
background: #121212;
color: #ffffff;
}
#content_wrap p,
#content_wrap h1 p,
#content_wrap figcaption{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
font-size: 2.9vw;
font-weight: 500;
letter-spacing: .05em;
line-height: 2;
overflow-wrap: break-word;
font-feature-settings: "palt";
-webkit-font-feature-settings: "palt";
}
#content_wrap > section{
text-align: center;
}
.gnav a:hover,
#brand_footer a:hover,
.btn_recipes a:hover{
opacity: 0.7;
}
.img_txt{
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% auto;
font-size: 0 !important;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
transition: opacity,transform;
transition-duration: .48s;
transition-timing-function: ease-out;
transition-delay: .7s;
}

/* ▽ SP ▽================================================================================================================================= */
/*====================
base
====================*/
.txt_left{
text-align: left !important;
}
.txt_right{
text-align: right !important;
}
.txt_center{
text-align: center !important;
}
.txt_mc{
font-family: Shippori Mincho, serif;
font-optical-sizing: auto;
overflow-wrap: break-word;
}
#content_wrap p.information{
font-size: 2.05vw;
}
.annotation{
font-size: 0.55em;
vertical-align: super;
}
.latin{
letter-spacing: 0.08em;
}
.jp_15{
letter-spacing: -0.15em;
}
.jp_40{
letter-spacing: -0.4em;
}

/*====================
ローディング画面
====================*/
#loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: #121212;
}
#loading img{
width: 47.677vw;
position: absolute;
top: calc(50% - 12vw);
left: calc(50% - 23.8385vw);
-webkit-animation:blink 2s ease-in-out infinite alternate;
-moz-animation:blink 2s ease-in-out infinite alternate;
animation:blink 2s ease-in-out infinite alternate;
}
/* 点滅 */
@-webkit-keyframes blink{
0%{opacity:0;}
90%{opacity:1;}
100%{opacity:1;}
}
@-moz-keyframes blink{
0%{opacity:0;}
90%{opacity:1;}
100%{opacity:1;}
}
@keyframes blink{
0%{opacity:0;}
90%{opacity:1;}
100%{opacity:1;}
}

/*====================
メインビジュアル
====================*/
.mv{
width: 100%;
height: 0;
padding-top: 130.3780964797914%;
background: url(/products/brand/cacao-rouge/images/mv_sp.png), #121212;
background-repeat: no-repeat, repeat;
background-position: center, center;
background-size: cover, 100%;
position: relative;
}
.scroll-indicator{
position: absolute;
right: 3vw;
top: calc(100% - 70.6vw);
z-index: 50;
display: flex;
flex-direction: column;
align-items: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.scroll-text{
writing-mode: vertical-rl;
white-space: nowrap;
word-break: keep-all;
color: rgba(255,255,255,.65);
font-size: 2.2vw;
letter-spacing: .2em;
font-weight: 800;
line-height: 1;
display: inline-block;
margin-bottom: 0.5vw;
}
.scroll-line{
display: block;
position: relative;
width: 1px;
height: clamp(36px, 14vw, 180px);
background: rgba(255,255,255,.25);
margin: 0.8vw 0 0;
}
.scroll-line::after{
content: "";
position: absolute;
left: 50%;
top: 0;
width: 0.8vw;
height: 0.8vw;
border-radius: 50%;
background: #fff;
transform: translateX(-50%);
animation: scrollMove 2.5s linear infinite;
}
@keyframes scrollMove{
0%{
top: 0;
opacity: 0;
}
20%{
opacity: 1;
}
80%{
top: calc(100% - 0.8vw);
opacity: 1;
}
100%{
top: calc(100% - 0.8vw);
opacity: 0;
}
}

/*====================
イントロダクション
====================*/
#Introduction{
background: url(/products/brand/cacao-rouge/images/bg.png), #121212;
background-repeat: no-repeat, repeat;
background-position: center, center;
background-size: cover, 100%;
padding: 23.6vw 0 29.7vw;
position: relative;
}
.message{
font-weight: 600;
font-size: 3.62vw;
line-height: 2.28;
letter-spacing: 0.015em;
}
.message:nth-of-type(2){
margin-top: 8vw;
}
.deco_l{
position: absolute;
width: 16.6vw;
left: 6.7vw;
top: 7.6vw;
}
.deco_r{
position: absolute;
width: 20.6vw;
right: 5.6vw;
bottom: 7.7vw;
}

/*====================
特徴
====================*/
#features{
background: url(/products/brand/cacao-rouge/images/base_prod_sp.png), linear-gradient(90deg, #ac0000 13%, #a00806 23%, #930900 37%, #7e0207 55%, #780506 62%, #660106 75%, #510403);
background-repeat: no-repeat, repeat-y;
background-position: center bottom, center;
background-size: 100% auto, auto;
padding: 9.6vw 0 4.5vw;
}
#features .inner{
padding: 0 6.5vw;
}
.features_wrap h2{
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 4vw;
text-align: left;
}
.smds{
font-weight: 700;
font-size: 3.04vw;
color: #121212;
display: flex;
align-items: center;
}
.line{
width: 6.4vw;
height: 1px;
background: #121212;
margin-left: 1vw;
position: relative;
top: 0.2vw;
}
.line::after{
content: "";
width: 0.6vw;
height: 0.6vw;
background: #121212;
border-radius: 100%;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.mds_features{
font-size: 7vw;
font-weight: 400;
margin-left: -0.6vw;
}
.txt_features{
text-align: left;
}
.txt_features + .txt_features{
margin-top: 4vw;
}
.marker{
background: linear-gradient(
transparent 44%,
rgba(18, 18, 18, 0.36) 44%
);
padding-bottom: 0.4vw;
}
.features01_pkg{
width: 86.8319vw;
margin: 6.5vw auto 0 11.5vw;
}
.features02_pic{
width: 80.8345vw;
margin: 10vw auto 9vw;
}
.desgh_box{
position: relative;
padding: 2.3vw;
border: 1px solid #a95c5d;
background: rgba(18, 18, 18, 0.36);
box-sizing: border-box;
margin-top: 5.7vw;
}
#content_wrap .features02_txt{
width: 76vw;
margin: 0 auto;
}
#content_wrap .features02_txt p{
text-align: left;
line-height: 1.9;
}
/* タイトル下ライン */
.desgh_box__divider{
width: 100%;
height: 1px;
margin: 0.9vw 0 2vw;
background: linear-gradient(
90deg,
rgba(169, 92, 93, 0) 0%,
rgba(169, 92, 93, 0.4) 20%,
rgba(255, 255, 255, 0.49) 50%,
rgba(169, 92, 93, 0.4) 80%,
rgba(169, 92, 93, 0) 100%
);
}
/* 上下装飾ライン */
.desgh_box__frame-line::before,
.desgh_box__frame-line::after{
content: "";
position: absolute;
left: 50%;
width: 70%;
height: 1px;
transform: translateX(-50%);
pointer-events: none;
background: linear-gradient(
90deg,
rgba(169, 92, 93, 0) 0%,
rgba(169, 92, 93, 0.4) 20%,
rgba(255, 255, 255, 0.49) 50%,
rgba(169, 92, 93, 0.4) 80%,
rgba(169, 92, 93, 0) 100%
);
}
/* 上 */
.desgh_box__frame-line::before{
top: -1px;
}
/* 下 */
.desgh_box__frame-line::after{
bottom: -1px;
}
.features02_chart{
width: 88.7875vw;
margin: 13.4vw -3.1vw 5vw auto;
display: block;
}

/*====================
商品紹介
====================*/
.product_wrap{
padding: 19.2vw 0 0;
}
.catchcopy{
font-size: 4.83vw;
font-weight: 400;
margin-bottom: 7.9vw;
}
.logo_rouge{
width: 56.9755vw;
display: block;
margin: 0 auto;
}
.name{
margin: 3.1vw 0 6.6vw;
}
.pkg{
width: 61.27777vw;
}
.product_Ingredient{
width: 32.5vw;
margin: 2.9vw auto 4.6vw;
text-align: left;
}
#content_wrap .product_Ingredient p{
line-height: 1.8;
}
.product_txt{
text-align: left;
margin-bottom: 7.2vw;
}

/*====================
レビュー
====================*/
#reviwe{
padding: 12.5vw 0 48vw;
position: relative
}
.ttl_review{
margin-bottom: 14.5vw;
position: relative;
}
.mds_review{
width: 80.4433vw;
margin: -2vw auto 1.5vw;
}
.review_wrap .smds{
color: #e12132;
}
.review_wrap .line,
.review_wrap .line::after{
background: #e12132;
}
.reviwe_pic{
width: 27.1188vw;
margin: 2.9vw auto 2.7vw;
}
#content_wrap .reviwe_txt p{
text-align: left;
line-height: 1.7;
}
.reviwe_box .reviwe_txt:nth-of-type(2){
color: #e12132;
font-size: 3.85vw;
text-align: left;
letter-spacing: -0.05em;
line-height: 1.47;
margin: 1vw 0 1.8vw;
}
.review_noimg .reviwe_box{
margin-top: 2.4vw;
}

/* =====================
Swiper基本
===================== */
.review_wrap{
position: relative;
}
.review_wrap .swiper{
padding: 0 9.8vw;
overflow: hidden;
}
.swiper-pagination-bullet,
.swiper-pagination-bullet-active{
background: #e12132;
}
.review_wrap .swiper-button-next,
.review_wrap .swiper-button-prev{
top: -8.5vw;
width: 3.5vw;
height: 3.1vw;
margin: 0;
display: block;
}
.review_wrap .swiper-button-next:after, .review_wrap .swiper-button-prev:after{
font-size: 3vw;
color: #ffffff;
position: absolute;
}
.review_wrap{
position: relative;
}
.review_wrap .swiper-button-prev{
left: 20.8vw;
}
.review_wrap .swiper-button-next{
right: 20.8vw;
}
.swiper-pagination-bullet{
width: 8.6vw;
height: 0.6vw;
border-radius: 0;
}
.review_wrap .swiper-pagination{
z-index: 20;
}
.review_wrap .swiper-button-next,
.review_wrap .swiper-button-prev{
z-index: 20;
}
.review_wrap .swiper-pagination-bullet{
background: #d9d9d9;
opacity: 1;
}
.review_wrap .swiper-pagination-bullet-active{
background: #c1272d;
}
.review_wrap .swiper-pagination{
display: flex;
gap: 1.4vw;
max-width: 47vw;
top: -7.2vw;
left: 50%;
transform: translateX(-50%);
height: 4vw;
}
.review_wrap .swiper-pagination-bullet{
flex: 1;
margin: 0 !important;
height: 0.5vw;
border-radius: 0;
}
.review_wrap .swiper-pagination-bullet-active{
background: #c1272d;
}
.pagetop-indicator{
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
text-decoration: none;
z-index: 50;
padding: 2vw 3vw 2vw 4vw;
right: calc(2.5vw - 3vw);
bottom: calc(4.5vw - 2vw);
}
.pagetop-line{
display: block;
position: relative;
width: 1px;
height: 14vw;
background: rgba(255,255,255,.65);
}
/* 固定ドット */
.pagetop-line::before{
content: "";
position: absolute;
left: 50%;
top: 0;
width: 0.8vw;
height: 0.8vw;
border-radius: 50%;
background: #fff;
transform: translate(-50%, -50%);
}
.pagetop-text{
margin-top: 1vw;
writing-mode: vertical-rl;
white-space: nowrap;
word-break: keep-all;
color: rgba(255,255,255,.85);
font-size: 2.2vw;
letter-spacing: .2em;
font-weight: 800;
line-height: 1;
}
.pagetop-indicator{
opacity: .6;
transition: opacity .4s ease;
}
.pagetop-indicator:hover{
opacity: 1;
}

/* ▽ PC ▽================================================================================================================================= */
/* 768px～ For PC
====================================================*/
@media screen and (min-width: 768px), print{
.isSP{
display: none;
}
.isPC{
display: block;
}
#content_wrap p.information{
font-size: 13px;
}

/*====================
ローディング画面
====================*/
#loading img{
width: 335px;
top: calc(50% - 100px);
left: calc(50% - 170px);
}

/*====================
コンテンツ
====================*/
#content_wrap p,
#content_wrap h1 p,
#content_wrap figcaption{
font-size: 18px;
letter-spacing: 0.02em;
}
#content_wrap .inner{
width: 100%;
max-width: 1400px;
padding: 0 clamp(16px, 4vw, 60px);
margin: 0 auto;
}

/*====================
メインビジュアル
====================*/
.mv{
padding-top: 47%;
background: url(/products/brand/cacao-rouge/images/mv_pc.png);
background-repeat: no-repeat;
background-position: calc(50% - 30px), center;
background-size: cover;
}
.scroll-indicator{
right: 14px;
top: calc(50% - -109px);
}
.scroll-text{
font-size: 12px;
margin-bottom: 0;
}
.scroll-line{
height: 70px;
margin: 6px auto 0;
}
.scroll-line::after{
width: 6px;
height: 6px;
}
@keyframes scrollMove{
0%{
top: 0;
opacity: 0;
}
20%{
opacity: 1;
}
80%{
top: calc(100% - 6px);
opacity: 1;
}
100%{
top: calc(100% - 6px);
opacity: 0;
}
}

/*====================
イントロダクション
====================*/
#Introduction{
background-size: cover, 100%;
padding: 136px 0 106px;
}
.message{
font-size: 24px;
}
.message:nth-of-type(2){
margin-top: 52px;
}
.deco_l{
width: 161px;
left: calc(50% - 506px);
top: 59px;
}
.deco_r{
width: 200px;
right: calc(50% - 534px);
bottom: 51px;
}

/*====================
特徴
====================*/
#features{
padding: 125px 0 22px;
}
#features{
background:
url(/products/brand/cacao-rouge/images/base_prod_pc.png),
linear-gradient(
90deg,
#ac0000 13%,
#a00806 23%,
#930900 37%,
#7e0207 55%,
#780506 62%,
#660106 75%,
#510403
);
background-repeat: no-repeat, no-repeat;
background-position: center bottom -78px, center;
background-size: 1541px auto, auto;
padding: 125px 0 22px;
}
.features_wrap h2{
margin-bottom: 23px;
}
.smds{
font-size: 18px;
}
.line{
width: 44px;
height: 1px;
margin-left: 8px;
top: 1px;
}
.line::after{
width: 4px;
height: 4px;
}
.mds_features{
font-size: 44px;
margin-left: -3px;
}
.txt_features + .txt_features{
margin-top: 25px;
}
.features{
display:flex;
justify-content:space-between;
}
.features01_left{
flex: 1 1 620px;
max-width: 612px;
min-width: 0;
}
.features01_right{
flex: 1 1 666px;
max-width: 666px;
min-width: 0;
}
.features01_pkg{
width: 100%;
max-width: 666px;
margin: 37px 0 0;
transform: translateX(clamp(0px, 9.4vw, 150px));
}
.features02{
gap: clamp(32px, 5vw, 80px);
}
.features02_right{
flex: 1 1 620px;
max-width: 612px;
min-width: 0;
}
.features02_left{
flex: 1 1 506px;
max-width: 506px;
min-width: 0;
}
.features02_pic{
width: 100%;
max-width: 506px;
margin: 45px 0 0;
}
.desgh_box{
padding: 14px;
margin-top: 38px;
}
.desgh_box__divider{
margin: 6px 0 13px;
}
#content_wrap .features02_txt{
max-width: 470px;
margin: 0 auto;
width: 100%;
}
.features02_chart{
max-width: 906px;
width: 100%;
margin: 120px auto 0;
}

/*====================
商品紹介
====================*/
.product_wrap{
padding: 149px 0 0;
}
.catchcopy{
font-size: 30px;
font-weight: 400;
margin-bottom: 43px;
}
.logo_rouge{
width: 100%;
max-width: 739px;
}
.name{
margin: 18px 0 76px;
}
.pkg_wrap{
position: relative;
}
#content_wrap .pkg{
max-width: 470px;
width: 100%;
}
.product_Ingredient{
width: 210px;
margin: 0;
position: absolute;
bottom: 7px;
right: calc(50% - 464px);
}
.product_txt{
max-width: 960px;
margin: 55px auto 77px;
}
.prod_info{
max-width: 960px;
margin: 0 auto;
}

/*====================
レビュー
====================*/
#reviwe{
padding: 50px 0 65px;
}
.mds_review{
width: 100%;
margin: -12px auto 8px;
max-width: 515px;
}
.ttl_review{
margin-bottom: 75px;
}
.review_wrap .swiper{
padding: 0 clamp(16px, 10vw, 100px);
}
.review_wrap .swiper-wrapper{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 70px 96px;
}
.review_wrap .swiper-button-prev,
.review_wrap .swiper-button-next,
.review_wrap .swiper-pagination{
display: none;
}
.reviwe_pic{
width: 150px;
margin: 19px auto 15px;
}
.reviwe_box .reviwe_txt:nth-of-type(2){
font-size: 24px;
margin: 7px 0 16px;
}
#content_wrap .reviwe_txt p{
line-height: 1.6;
font-size: 16px;
}
.review_noimg .reviwe_box{
margin-top: 12px;
}
/* カード */
.review_wrap .swiper-slide{
position: relative;
}
/* 縦ライン */
.review_wrap .swiper-slide:not(:nth-child(3n))::after{
content: "";
position: absolute;
top: 0;
right: -48px; /* gap:96px の半分 */
width: 1px;
height: 100%;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(255,255,255,0.05) 15%,
rgba(255, 255, 255, 0.35) 50%,
rgba(255,255,255,0.05) 85%,
transparent 100%
);
}
/* 横ライン */
.review_wrap .swiper-slide:nth-child(-n+3)::before{
content: "";
position: absolute;
bottom: -35px; /* gap:70px の半分 */
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(
to right,
transparent 0%,
rgba(255,255,255,0.05) 15%,
rgba(255, 255, 255, 0.35) 50%,
rgba(255,255,255,0.05) 85%,
transparent 100%
);
}
.pagetop-indicator{
padding: 18px;
right: calc(14px - 18px);
bottom: calc(25px - 18px);
}
.pagetop-line{
width: 1px;
height: 70px;
}
/* 固定ドット */
.pagetop-line::before{
width: 6px;
height: 6px;
}
.pagetop-text{
font-size: 12px;
}
}


/* Tablet ====================================================== */
@media (min-width: 768px) and (max-width: 1200px){
.review_wrap .swiper-wrapper{
grid-template-columns: repeat(2, 1fr);
gap: 60px 80px;
}
.review_wrap .swiper-slide{
position: relative;
}
/* PC用の線をリセット */
.review_wrap .swiper-slide::before,
.review_wrap .swiper-slide::after{
content:none;
}
/* 横線（1行目・2行目の下） */
.review_wrap .swiper-slide:nth-child(-n+4)::before{
content:"";
position:absolute;
bottom:-30px;
left:0;
width:100%;
height:1px;
background:linear-gradient(
to right,
transparent 0%,
rgba(255,255,255,0.05) 15%,
rgba(255, 255, 255, 0.35) 50%,
rgba(255,255,255,0.05) 85%,
transparent 100%
);
}
/* 縦線（Review01・03のみ） */
.review_wrap .swiper-slide::after{
display:none !important;
}
.review_wrap .swiper-slide:nth-child(1)::after,
.review_wrap .swiper-slide:nth-child(3)::after{
display:block !important;
content:"";
position:absolute;
top:20px;
right:-40px;
width:1px;
height:calc(100% - 40px);
background:linear-gradient(
to bottom,
transparent 0%,
rgba(255,255,255,0.05) 15%,
rgba(255, 255, 255, 0.35) 50%,
rgba(255,255,255,0.05) 85%,
transparent 100%
);
}
.mv{
padding-top:50%;
}
}


@media (min-width: 1400px){
/*.mv{
padding-top: 49%;
}*/
}


/* SP */
@media (max-width: 767px){
.review_wrap .swiper-wrapper{
display: flex;
}
}


@media screen and (min-width:768px) and ( max-width:991px){
#content_wrap .pkg{
max-width: 380px;
width: 100%;
}
.product_txt{
margin: 35px auto 77px;
}
.product_Ingredient{
right: calc(50% - 410px);
}
}