@charset "UTF-8";

#cpb_beautykey {
margin: 0 auto;
font-size: 16px;
font-family: Noto Sans JP;
}

.block_container {
max-width: 1040px;
width: 100%;
margin: 0 auto;
}
@media screen and (max-width: 1039px) {
.block_container {
padding: 0 4vw;
}
}

.txt-red {
color: #c8102e;
}

.txt-marker {
background:linear-gradient(transparent 70%, rgba(211, 43, 132, 0.4) 70%);
}


/***************************************

メインビジュアル

****************************************/

.mv_area {
width: 100%;
margin-bottom: 40px;
}

.mv_area h1 {
margin: 0;
padding: 0;
text-align: center;
}

@media screen and (max-width: 1039px) {
.mv_area {
margin-bottom: 11.76vw;
}

.mv_area .block_container {
padding: 0;
}
}

/***************************************

メインビジュアル下　概要 overview

****************************************/
.overview {

}

.overview_area {
position: relative;
padding: 40px 20px;
text-align: center;
background-color: #f8f8f8;
font-size: 20px;
}

.overview_area::before {
position: absolute;
content: "";
display: block;
background-image: url(/img/cpb_beautykey/overview_bg_left.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 100%;
max-width: 90px;
aspect-ratio: 99 / 109;
top:-20px;
left: 0;
}

.overview_area::after {
position: absolute;
content: "";
display: block;
background-image: url(/img/cpb_beautykey/overview_bg_right.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 100%;
max-width: 156px;
aspect-ratio: 156 / 94;
top:-20px;
right: 0;
}

.overview_area__day {
font-size: 26px;
background-color: #fff;
padding: 10px 40px;
width: fit-content;
margin-inline: auto;
margin-bottom: 20px;
line-height: 1.8;
}

.overview_area__read {
font-size: 26px;
}

.overview_area__chance {
font-size: 26px;
}

.overview_area__txt {
margin-bottom: 20px;
}

.id-linkage {
margin-bottom: 90px;
}

.id-linkage .block-id-linkage-modal-btn>span {
text-decoration: underline 1px;
text-underline-offset: 8px;
}


@media screen and (max-width: 1039px) {
.overview .block_container {
padding: 0;
}
.overview_area::before {
max-width: 14.11vw;
}
.overview_area::after {
max-width: 23.52vw;
}
.overview_area {
font-size: 3.764vw;
padding: 11.76vw 4.7vw 4.7vw;
}
.overview_area__day {
width: 100%;
font-size: 4.235vw;
font-weight: bold;
padding: 4vw 2.35vw;
font-feature-settings: "palt";
}
.overview_area__read {
font-size: 4.235vw;
margin-bottom: 10px;
}
.overview_area__chance {
font-size: 4.235vw;
}

.block-id-linkage {
margin-top: 11.76vw;
}
.id-linkage {
margin-bottom: 11.76vw;
}
.block-id-linkage-btn a {
font-size: 4.235vw;
}

}


/***************************************

おすすめ商品はこちら products

****************************************/
.products {
position: relative;
margin-bottom: 90px;
padding: 90px 0;
background: linear-gradient(180deg, rgba(226, 227, 231, 1) 0%, rgba(200, 203, 210, 1) 100%);
}

.products::before {
position: absolute;
content: "";
display: block;
background-image: url(/img/cpb_beautykey/products_bg1.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 100%;
max-width: 432px;
aspect-ratio: 432 / 494;
top:20px;
left: 0;
}
.products::after {
position: absolute;
content: "";
display: block;
background-image: url(/img/cpb_beautykey/products_bg3.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 100%;
max-width: 451px;
aspect-ratio: 451 / 603;
right:0;
bottom: 30px;
z-index: 1;
}

.products_inner {
position: relative;
z-index: 10;
}

.products_inner::before {
position: absolute;
content: "";
display: block;
background-image: url(/img/cpb_beautykey/products_bg2.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 100%;
max-width: 191px;
aspect-ratio: 191 / 216;
left: 0;
bottom: 20%;
}

.products_title {
position: relative;
text-align: center;
background-image: url(/img/cpb_beautykey/products_title_blue-bg.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 640px;
height: 95px;
margin: 0 auto 50px;
background-color: transparent;
}

.products_title span {
position: absolute;
top: calc(50% - 7px);
left: 50%;
transform: translate(-50%, -50%);
color: #FFF;
font-size: 20px;
margin: 0;
}

.products_contents__wrap {
max-width: 900px;
margin: auto;
}

.products_contents__list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 60px;
margin-bottom: 60px;
}

.products_contents__list li {
max-width: 420px;
width: 100%;
background-color: rgba(255, 255, 255, 0.7);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
}

.products_contents__list li a {
padding: 40px 50px;
width: 100%;
display: inline-block;
}

.products_txtbox {
font-size: 16px;
text-align: center;
margin-top: 10px;
font-feature-settings: "palt";
}

.products_name {
font-size: 18px;
font-weight: 600;
}

.products_price {

}

.products_txt {
margin-top: 10px;
text-align: left;
}

.products_txtbox small {
display: block;
text-align: left;
margin-top: 10px;
}

.products_txtbox small + small {
margin-top: 2px;
}

/* btn */
.btn-area {
text-align: center;
}

.block-id-linkage-btn {
margin-bottom: 60px;
}

.btn_txt {
font-size: 20px;
margin-bottom: 10px;
}

.btn_linktxt {
font-size: 22px;
}

.btn_linktxt a {
text-decoration: underline 1px;
text-underline-offset: 8px;
}


@media screen and (max-width: 1039px) {
.products {
padding:11.76vw 0;
margin-bottom: 0;
}
.products_title {
width: calc(345 / 375 * 100vw);
height: 100%;
aspect-ratio: 640 / 95;
margin-bottom: 7.05vw;
}
.products_title span {
font-size: 4.25vw;
}

.products::before {
width: 50%;
top: 0px;
}
.products::after {
width: 50%;
}
.products_inner::before {
width: 30%;
}

.products_contents__list {
margin: 0 4.7vw 11.76vw;
gap: 30px;
}

.products_contents__list li {
max-width: none;
text-align: center;
}

.products_contents__list li a {
padding: 7.05vw;
}
.products_txtbox {
font-size: 3.764vw;
text-align: center;
}
.products_name {
font-size: 4.235vw;
}


.block-id-linkage-btn {
margin-bottom: 7.05vw;
}
.btn_txt {
font-size: 3.76vw;
}
.btn_linktxt {
font-size: 4.235vw;
}

}