@charset "utf-8";
/* CSS Document */
/*====================
reset
====================*/
figure{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
line-height: 1;
}
ol{
margin: 0;
padding: 0;
}
div:after, dl:after, ul:after{
content: none;
}
*:focus{
outline: none;
}

/*====================
basic
====================*/
body{
position: relative;
}
.l-container{
-webkit-text-size-adjust: 100%;
background: #fff4f0;
}
.l-container img{
max-width: 100%;
height: auto;
vertical-align: bottom;
}
p.note, ul.note > li{
text-align: left;
text-indent: -1em;
padding-left: 1em;
}
.moveit{
visibility: hidden;
}

/*====================
コンテンツ
====================*/
.isPC{
display: none;
}
#content_wrap{
color: #472b12;
position: relative;
overflow: hidden;
}
#content_wrap > section{
text-align: center;
}

/* ▽ SP ▽================================================================================================================================== */
/*====================
base
====================*/
.inner{
padding: 0 6.5vw;
}
#content_wrap 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;
text-size-adjust: none;
overflow-wrap: break-word;
font-feature-settings: "palt";
font-size: 3.2vw;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
letter-spacing: .05em;
line-height: 1.7;
}
#content_wrap .mincho p,
#content_wrap p.mincho,
#content_wrap div.mincho,
#content_wrap h2.mincho{
font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
font-weight: 500;
text-size-adjust: none;
overflow-wrap: break-word;
font-feature-settings: "palt";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
letter-spacing: .05em;
}
.information,
.information p{
font-size: 2.7vw !important;
}
.ta_left{
text-align: left !important;
}
.ta_right{
text-align: right !important;
}
.ta_center{
text-align: center !important;
}
.tc_pink{
color: #de2368;
}
.marker {
text-decoration: underline;
text-underline-offset: -0.2em;
text-decoration-thickness: 0.5em;
text-decoration-color: rgba(239,138,145,0.25);
text-decoration-skip-ink: none;
font-weight: 900 !important;
}

/*====================
ローディング画面
====================*/
#loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: radial-gradient(at center center, rgb(255, 255, 255, 0.8), transparent 65%) no-repeat center center / 100vw, #fed9c2;
}
#loading img{
width: 35.856vw;
position: absolute;
top: calc(50% - 16vw);
left: calc(50% - 17.928vw);
-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;}
}

/*====================
リンク設定
====================*/
#concept a:hover,
#potential a:hover{
opacity: 0.7 !important;
}
.link_area{
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;
border-bottom: 1px solid #de2368;
color: #de2368;
}
.link_area p{
display: inline-block;
}
.link_area:hover{
border-bottom: 1px solid #de2368;
color: #de2368;
}

/*====================
各エリア見出し
====================*/
#features h3,
#potential h3,
#voice h3{
width: 76.011vw;
margin: 0 auto 5vw;
position: relative;
}
.smds{
margin: 0 auto 3.5vw;
}
#mv{
margin-bottom: -7.5vw;
}

/*====================
コンセプト
====================*/
#concept{
position: relative;
padding: 0 0 27.3vw;
background: url(/products/brand/cacaobeaute/images/concept_base_sp.png) no-repeat center top / cover;
}
.catchcopy{
width: 80.4vw;
margin: 0 auto 9.4vw;
padding: 27.1vw 0 0;
}
.concept_txt{
font-size: 4.3vw;
line-height: 2.1;
margin-bottom: 8.2vw;
}
.ct_mt{
margin-top: 8.7vw;
}
#concept .information{
margin-top: 1.4vw;
}
.deco_concept01{
position: absolute;
width: 47.2vw;
top: -4.1vw;
left: -8.6vw;
}
.deco_concept02{
position: absolute;
width: 45.7vw;
bottom: -19.8vw;
right: -13vw;
}

/*====================
Cacao Beautéの特徴
====================*/
#features{
padding: 13vw 0 25vw;
background:
url(/products/brand/cacaobeaute/images/base01.png) no-repeat -81vw -8vw / 190vw, 
url(/products/brand/cacaobeaute/images/base02.png) no-repeat 19vw 359vw / 190vw, 
url(/products/brand/cacaobeaute/images/base03.png) no-repeat -63vw 619vw / 190vw
}
.mds_txt{
font-size: 4.1vw !important;
margin-bottom: 7.2vw;
}
.smds_txt{
font-size: 3.6vw !important;
font-weight: 600;
margin-bottom: 5.8vw;
position: relative;
}
.box_wh{
background: #ffffff;
border-radius: 2vw;
box-shadow: 0 0 0.6vw rgba(0,0,0,0.06);
padding: 0 4.4vw 4.4vw;
position: relative;
margin-bottom: 6vw;
}
.toprank{
width: 37.029vw;
margin: 0 auto 5vw;
}
.toprank_txt{
text-align: left;
margin-bottom: 5.2vw;
}
.ccc_guide{
width: 72.1vw;
margin: 0 auto 6.5vw;
}
.box_br{
background: #e2d9d1;
border-radius: 2vw;
padding: 3.2vw 4vw;
}
.judge_txt{
font-size: 2.8vw !important;
}
.box_br .smds_txt::before{
content: "";
width: 54vw;
border-bottom: 0.3vw dashed #997b70;
position: absolute;
bottom: -2.4vw;
left: 50%;
transform: translateX(-50%);
}
.quality_wrap{
margin: 16vw 0 13vw;
}
.ingredient_wrap{
margin-bottom: 16.2vw;
}
.ingredient_wrap .smds{
margin-bottom: 6vw;
}
.accordion_ceramide{
margin-bottom: 14.6vw;
}
.accordion_ceramide dt{
position: relative;
margin-bottom: -9.2vw;
}
.accordion_ceramide dt.active{
}
.accordion_ceramide dt:hover{
cursor: pointer;
opacity: 0.7;
}
.accordion_ceramide dd{
display: none;
}
.accordion_ceramide dd .ceramide {
padding: 16.7vw 1vw 4.7vw;
border: none;
background: #fff;
border-radius: 6.6vw;
font-weight: 600;
}
.mds_ceramide{
font-size: 5vw !important;
display: inline-block;
border-bottom: solid 0.8vw #4D311C;
margin-bottom: 3.4vw;
}
.ceramide .smds_txt{
line-height: 1.62 !important;
margin-bottom: 10.8vw;
}
.graph li:last-child{
margin-top: 3.8vw;
}
.guiltfree_wrap{
margin-bottom: 11.2vw;
}
.guiltfree_wrap .smds_txt{
margin-bottom: 2.5vw;
}
.guiltfree_wrap .mds_txt{
margin-bottom: 3vw;
}
.guiltfree{
width: 61.2vw;
margin: 0 auto;
}
.accordion_taste dt{
position: relative;
margin-bottom: -8.5vw;
z-index: 10;
}
.accordion_taste dt.active{
}
.accordion_taste dt:hover{
cursor: pointer;
opacity: 0.7;
}
.accordion_taste dd{
width: 100%;
display: none;
}
.accordion_taste .taste{
width: 100%;
max-width: 76.1vw;
padding: 12.1vw 4.4vw 4.7vw;
margin: 0 auto;
border: none;
background: #fff;
border-radius: 6.6vw;
}

/*====================
味の比較：スクロール
====================*/
.scroll-box {
overflow-x: auto;
padding-bottom: 3vw;
-webkit-overflow-scrolling: touch;
}
.scroll-box div img {
min-width: 140vw;
}
.scroll-box::-webkit-scrollbar {
height: 1.7vw;
}
.scroll-box::-webkit-scrollbar-track {
background: #dddddd;
border-radius: 10vw;
}
.scroll-box::-webkit-scrollbar-thumb {
background: #4D311C;
border-radius: 10vw;
}

#graph03{
position: relative;
padding: 16.9vw 0 21.2vw;
background: url(/products/brand/cacaobeaute/images/graph03_base_sp.png) no-repeat center top / cover;
margin-bottom: -10vw;
z-index: 100;
}
#graph03 .information{
margin-top: 3.4vw;
}
#guideline{
position: relative;
padding: 24.5vw 0 18.4vw;
background: url(/products/brand/cacaobeaute/images/wave_bottom.svg) no-repeat left -9.6vw bottom -0.3vw / 132vw,
url(/products/brand/cacaobeaute/images/guideline_base_sp.png) no-repeat center center / cover;
}
.guideline_list li:nth-child(2){
margin: 4.1vw 0 11.6vw;
}
.guideline_t img{
width: 72vw;
}
#guideline .information{
margin-top: 3.4vw;
}

/*====================
みなさまの声
====================*/
#voice{
position: relative;
padding: 30.8vw 0 9vw;
background:
url(/products/brand/cacaobeaute/images/base01.png) no-repeat -81vw -8vw / 190vw, 
url(/products/brand/cacaobeaute/images/base04.png) no-repeat right -88vw top 180vw / 190vw
}
.deco_advisor02a{
position: absolute;
width: 51vw;
top: -76.4vw;
right: 1.3vw;
}
.deco_advisor02b{
position: absolute;
width: 51vw;
top: 147.9vw;
left: -10.7vw;
}
.deco_advisor03{
position: absolute;
width: 45.7vw;
bottom: -33.1vw;
right: -0.6vw;
}
.advisor_wrap{
position: relative;
padding: 3.2vw 0 0;
margin-bottom: 22.6vw;
}
.advisor li:nth-child(1){
width: 106.128vw;
margin: 0 0 7.9vw 5.9vw;
}
.advisor li:nth-child(2){
width: 103.781vw;
margin: 0 0 12.5vw -8.9vw;
}
.advisor li:nth-child(3){
width: 77vw;
margin: 0 0 3.4vw 13.8vw;
}
.advisor li:nth-child(4){
width: 109.91vw;
margin: 0 0 0 -6.7vw;
}

/*====================
美の宝庫：カカオの可能性
====================*/
#potential{
padding: 22vw 0 23vw;
background: 
url(/products/brand/cacaobeaute/images/wave_top.svg) no-repeat -13.6vw top / 118vw,
url("/products/brand/cacaobeaute/images/potential_base_sp.png") no-repeat center top 10vw / 122vw,
radial-gradient(at center center, rgb(255, 255, 255, 0.8), transparent 65%), 
#ffdacc;
}
#potential .mds_txt{
margin-bottom: 1.4vw;
}
#potential .information{
margin-bottom: 1.4vw;
}

/*==========================
フロートボタン
==========================*/
.float_box{
position: fixed;
bottom: 3vw;
right: 2vw;
transition: all 0.3s;
z-index: 100;
display: block !important;
}
.float_box div:not(:first-child){
margin-top: 2vw;
}
.btn{
position: relative;
width: 58vw;
height: 11.2vw;
margin: 0 auto;
display: block;
overflow: hidden;
cursor: pointer;
}
.btn img{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
display: block;
-webkit-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.btn:hover img:nth-of-type(2){
opacity: 0;
}

/* ～767px For SP
====================================================*/
@media screen and (max-width: 767px){
.isPC{
display: none;
}
}

/* ▽ PC ▽================================================================================================================================== */
/* 768px～ For PC
====================================================*/
@media screen and (min-width: 768px), print{
/*====================
base
====================*/
.isSP{
display: none;
}
.isPC{
display: block;
}
.l-container{
line-height: 2;
}
#content_wrap{
width: 100%;
}
#content_wrap > section{
text-align: center;
}
.inner{
max-width: 1120px;
padding: 0 40px;
margin: 0 auto;
}
#content_wrap p,
#content_wrap figcaption{
font-size: 16px;
letter-spacing: .07em;
}
#content_wrap .mincho p,
#content_wrap p.mincho,
#content_wrap div.mincho,
#content_wrap h2.mincho{
letter-spacing: .16em;
}
.information,
.information p{
font-size: 11px !important;		
}

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

/*====================
各エリア見出し
====================*/
#features h3,
#potential h3,
#voice h3{
width: 600px;
margin: 0 auto 42px;
}
.smds{
margin: 0 auto 20px;
}
#mv{
margin-bottom: -3.2vw;
}

/*====================
コンセプト
====================*/
#concept {
padding: 0 0 156px;
background: url(/products/brand/cacaobeaute/images/concept_base_pc.png) no-repeat center center / cover;
min-height: calc(100vw * 0.55783); /* 縦横比 2035/3648 ≈ 0.55783 */
width: 100vw;
margin: 0 0 -32px 0;
}
.catchcopy{
width: 464px;
margin: 0 auto 54px;
padding: 108px 0 0;
}
.concept_txt{
font-size: 20px;
line-height: 2;
margin-bottom: 31px;
}
.ct_mt{
margin-top: 40px;
}
#concept .information{
margin-top: 3px;
}
.bnr_jelly{
width: 410px;
margin: 0 auto;
}
.deco_concept01{
width: 301px;
top: 5.1vw;
left: calc(50% - 621px);
}
.deco_concept02{
width: 325.5px;
bottom: 14.5vw;
right: calc(50% - 594px);
}

/*====================
Cacao Beautéの特徴
====================*/
#features{
padding: 0 0 225px;
background: 
url(/products/brand/cacaobeaute/images/base01.png) no-repeat left calc(50% - 392px) top -72px / 1524px, 
url(/products/brand/cacaobeaute/images/base02.png) no-repeat right calc(50% - 960px) top 1080px / 1474px, 
url(/products/brand/cacaobeaute/images/base03.png) no-repeat left calc(50% - 562px) top 2000px / 1916px
}
.mds_txt{
font-size: 22px !important;
margin-bottom: 29px;
}
.pic_features{
width: 558px;
margin: 0 auto;
}
.smds_txt{
font-size: 18px !important;
margin-bottom: 53px;
}
.box_wh{
border-radius: 12px;
padding: 0 30px 30px;
margin-bottom: 20px;
}
.toprank{
width: 185px;
margin: 0 auto 24px;
}
.toprank_txt{
text-align: center;
margin-bottom: 25px;
}
.ccc{
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.ccc_guide{
max-width: 34.99%;
margin: 0 0 0 2.3%;
}
.ccc_comment{
max-width: 57.1%;
}
.box_br{
background: #e2d9d1;
border-radius: 12px;
padding: 22px 20px 18px;
}
.box_br .smds_txt{
margin-bottom: 30px;
}
.judge_txt{
font-size: 14px !important;
}
.box_br .smds_txt::before{
content: "";
width: 254px;
border-bottom: 1px dashed #997b70;
bottom: -12px;
transform: translateX(-50%);
}
.quality_wrap{
margin: 79px 0 64px;
}
.quality_wrap .information{
width: 890px;
margin: 0 auto;
}
.ingredient_wrap{
margin-bottom: 131px;
}
.ingredient_wrap .smds{
margin-bottom: 52px;
}
.accordion_ceramide{
margin-bottom: 78px;
}
.accordion_ceramide dt{
margin-bottom: -49px;
}
.accordion_ceramide dd .ceramide {
padding: 70px 45px 44px;
border-radius: 30px;
}
.mds_ceramide{
font-size: 20px !important;
border-bottom: solid 3px #4D311C;
margin-bottom: 20px;
}
.ceramide .smds_txt{
line-height: 1.35 !important;
margin-bottom: 50px;
}
.graph{
display: flex;
}
.graph li:last-child{
margin-top: 0;
}
.graph li img{
width: 86%;
}
.guiltfree_wrap{
margin-bottom: 68px;
}
.guiltfree_wrap .smds_txt{
margin-bottom: 10px;
text-align: left;
}
.guiltfree_list{
display: flex;
justify-content: end;
align-items: center;
max-width: 910px;
margin: 0 auto;
}
.guiltfree_wrap .mds_txt{
margin-bottom: 0;
}
.guiltfree{
width: 310px;
margin: 0;
}
.accordion_taste dt{
margin-bottom: -55px;
}
.accordion_taste dt.active{
}
.accordion_taste dd{
width: 100%;
}
.accordion_taste .taste{
width: 100%;
max-width: none;
padding: 97px 0 0px;
margin: 0 auto;
border-radius: 30px;
}

/*====================
味の比較：スクロール
====================*/
.scroll-box {
overflow-x: hidden;
padding-bottom: 0;
}
.scroll-box div img {
min-width: auto;
max-width: 992px;
width: 96%;
}
#graph03 {
padding: 104px 0 106px;
background: url(/products/brand/cacaobeaute/images/graph03_base_pc.png) no-repeat center center / cover;
min-height: calc(100vw * 0.45942); /* 縦横比 1676/3648 ≈ 0.45942 */
width: 100vw;
margin-bottom: -156px;
}
#graph03 .information{
margin-top: 15px;
}
#guideline{
padding: 168px 0 234px;
background: 
url(/products/brand/cacaobeaute/images/wave_bottom.svg) no-repeat left -177px bottom -1px / 128%, 
url(/products/brand/cacaobeaute/images/guideline_base_pc.png) no-repeat center center / cover;
min-height: calc(100vw * 0.37434); /* 縦横比 925/2471 ≈ 0.37434 */
}
.guideline_list{
justify-content: space-around;
display: flex;
margin-bottom: 55px;
}
.guideline_list li{
width: 44.6%;
}
.guideline_list li:nth-child(2){
margin: 0;
}
.guideline_t img{
width: 470px;
margin: 0 auto;
}
#guideline .information{
margin-top: 15px;
}

/*====================
みなさまの声
====================*/
#voice{
padding: 39px 0 60px;
background:
url(/products/brand/cacaobeaute/images/base01.png) no-repeat left calc(50% - 522px) top -72px / 1524px, 
url(/products/brand/cacaobeaute/images/base04.png) no-repeat right calc(50% - 632px) top 8px / 1808px
}
.inner2{
max-width: 1120px;
padding: 0 40px;
margin: 0 auto;
}
.advisor_wrap{
padding: 4px 0 0;
margin-bottom: 17px;
}
.advisor{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.advisor li:nth-child(1){
max-width: 48.483%;
width: 100%;
margin: 0;
order: 2;
}
.advisor li:nth-child(2){
max-width: 47.411%;
width: 100%;
margin: 58px 0 0 2px;
order: 1;
}
.advisor li:nth-child(3){
max-width: 44.35%;
margin: -40px 0 -13px 29.6%;
order: 3;
}
.advisor li:nth-child(4){
max-width: 59.465%;
margin: 0 0 0 29.4%;
order: 4;
}
.deco_advisor01{
position: absolute;
max-width: 17.7%;
width: 100%;
top: -22.9%;
left: calc(50% - 37.1%);
}
.deco_advisor02a{
max-width: 27.5%;
width: 100%;
top: -42.2%;
right: calc(50% - 54.5%);
}
.deco_advisor02b{
max-width: 27.6%;
width: 100%;
top: 46.5%;
left: calc(50% - 52.6%);
}
.deco_advisor03{
max-width: 26.4%;
width: 100%;
bottom: -3.7%;
right: calc(50% - 55.8%);
}

/*====================
美の宝庫：カカオの可能性
====================*/
#potential{
padding: 162px 0 107px;
background: 
url(/products/brand/cacaobeaute/images/wave_top.svg) no-repeat center top / 110%,
url("/products/brand/cacaobeaute/images/potential_base_pc.png") no-repeat center top 134px / 1383px,
radial-gradient(at center center, rgb(255, 255, 255, 0.8), transparent 65%), 
#ffdacc
}
#potential .mds_txt{
margin-bottom: 67px;
}
#potential .information{
margin-bottom: 7px;
}

/*==========================
フロートボタン
==========================*/
.float_box{
bottom: 20px;
right: 20px;
}
.float_box div:not(:first-child){
margin-top: 8px;
}
.btn {
width: 258px;
height: 50px;
}
}

/* ウィンドウ幅が3648px以上の場合の背景処理*/
@media (min-width: 3648px) {
#concept,
#graph03{
background-size: 100% auto; /* 横幅をビューポートに合わせ、縦は比率を維持 */
}
}
/* ウィンドウ幅が2471px以上の場合の背景処理*/
@media (min-width: 2471px) {
#guideline{
background-size: 100% auto; /* 横幅をビューポートに合わせ、縦は比率を維持 */
}
}