@charset "utf-8";
/* CSS Document */
:root {
--bkColor:#000;
--primaryColor:#C4A835;
--secondaryColor:#D5DFE4;
--yellowColor:#FFFBCC;
--whiteColor:#fff;
--shadowColor:rgba(0, 0, 0, 0.3);
}
/*========= ▼reset ===============*/
/* ブラウザのUAスタイルシートのすべてのスタイルを削除します、displayは除く */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {all: unset;display: revert;}
/* box-sizingの優先値 */
*, *::before, *::after {box-sizing: border-box;}
/* リストのスタイル（箇条書き・番号）を削除します */
ol,ul {list-style: none;}
/* 画像がコンテナを超えないようにするため */
img {max-width: 100%;}
/* テーブルのセル間のスペースを削除します */
table {border-collapse: collapse;}
/*========= ▲reset ===============*/
*{box-sizing: border-box;}
a {
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
text-decoration: none;
    color: #333;
}

#beautyItem_2025 {overflow: hidden;font-family:  "Noto Sans JP", sans-serif;font-optical-sizing: auto; font-weight: 400;font-style: normal;line-break: strict;word-wrap: break-word;word-break: break-all!important;line-height: 1.7;color: var(--bkColor);max-width: 2040px;margin: auto;font-feature-settings: "palt";}
#beautyItem_2025 h2 {position: relative;font-family: "Noto Sans JP", sans-serif; word-wrap: break-word;word-break: normal !important;letter-spacing:inherit;background: var(--primaryColor);font-size: clamp(28px, 2.75vw, 44px);color: var(--whiteColor);text-align: center;padding: 0.4em;margin-bottom: 4%;font-weight: 400;}

.font_small {font-size: 80%;}
.font_ss{font-size: 70%;}
.font_sss{font-size: 62%;}
.font_large {font-size: 130%;}
.font_ll{font-size: 155%;}
.line_center {text-align: center;}
.line_right{text-align: right;}
.line_left{text-align: left;}
.font_bold{font-weight: bold;}
.font_red {color: var(--redColor);}
img {width: auto;max-width: 100%;vertical-align: bottom;}
.font_14 { font-size: clamp(11px, 0.9vw, 14px); }
.font_15 { font-size: clamp(12px, 0.95vw, 15px); }
.font_16 { font-size: clamp(13px, 1vw, 16px); }
.font_17 { font-size: clamp(14px, 1.1vw, 17px); }
.font_18 { font-size: clamp(15px, 1.15vw, 18px); }
.font_19 { font-size: clamp(16px, 1.2vw, 19px); }
.font_20 { font-size: clamp(17px, 1.25vw, 20px); }
.font_20 { font-size: clamp(18px, 1.4vw, 22px); }
.font_24 { font-size: clamp(18px, 1.5vw, 24px); }
.font_26 { font-size: clamp(19px, 1.65vw, 26px); }
.font_30 { font-size: clamp(20px, 1.9vw, 30px); }
.font_32 { font-size: clamp(22px, 2vw, 32px); }
.font_36 { font-size: clamp(22px, 2.25vw, 36px); }
.font_38 { font-size: clamp(24px, 2.4vw, 38px); }
.font_42 { font-size: clamp(24px, 2.65vw, 42px); }

#HEADER .global{display: none;}
#CONTENTS, body:not(.noGlobal) #CONTENTS {margin-left: 0;padding: 0;}
#FOOTER{margin-left: 0;}
#PAGEBODY{padding-bottom: 0;}
.includeSCT .item{box-shadow: 2px 5px 10px var(--shadowColor);}
.includeSCT .name{text-align:left;line-height: 1.5;}
.includeSCT .tag{align-content: flex-start;}
#beautyItem_2025 ul.action {display: none;}
#beautyItem_2025 .includeSCT .item{height: auto !important;}/*カードの高さ調節*/
#PAGEBOTTOM .targetTop{z-index: 999;}
#lp-content .includeSCT .item {
height: auto !important;
}
#beautyItem_2025 .includeSCT .kanbai .item::after{
    background: rgba(0, 0, 0, .5);
    position: absolute;
    width: 100%;
    height: 100%;
    content: "完　売";
    top: 0;
    left: 0;
    font-size: 36px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
}
#beautyItem_2025 .includeSCT .kanbai .item:hover{
  transform: none;
}

★在庫なし赤★
#beautyItem_2025 .includeSCT .tag .stockLabel .outStock{
    background: red;
    color: #fff;
}

/*========= LoadingのためのCSS ===============*/
.loader-wrap {
	position: fixed;
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100svh;
    background: var(--primaryColor);
    z-index: 999;
}
.loader {
  width: 80px;
  aspect-ratio: 1;
  color: var(--whiteColor);
  position: relative;
  background:
    conic-gradient(from 134deg at top   ,currentColor 92deg,#0000 0) top,
    conic-gradient(from -46deg at bottom,currentColor 92deg,#0000 0) bottom;
  background-size: 100% 50%;
  background-repeat: no-repeat;
}
.loader:before {
  content:'';
  position: absolute;
  inset: 0;
  --g:currentColor 20px,#0000 0 calc(100% - 20px),currentColor 0;
  background:
    linear-gradient( 45deg,var(--g)),
    linear-gradient(-45deg,var(--g));
   animation: l7 1.5s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes l7 {
   33%  {inset:-10px;transform: rotate(0deg)}
   66%  {inset:-10px;transform: rotate(90deg)}
   100% {inset:0    ;transform: rotate(90deg)}
}
/*========= ▲LoadingのためのCSS ===============*/

#beautyItem_2025 section {position: relative;margin: 0 auto;padding: 0;}
#beautyItem_2025 section:not(#sec01){padding: 0 0 6% 0;}
#beautyItem_2025 .sec-inner {position: relative;max-width: 1220px; width: 90%; margin: 0 auto;z-index: 2;}

#beautyItem_2025 h2:after {
    position: absolute;
    top: 100%;
    left: 50%;
    content: "";
    height: 0;
    width: 0;
}

#beautyItem_2025 h2:after {
    border: 25px solid;
    border-color: transparent;
    border-top-color: var(--primaryColor);
    margin-left: -25px;
}
#beautyItem_2025 h2 .fa-solid{
    margin-right: 10px;
}

#sec02{
    background: url("feature_beautyItem_2025/bg01.jpg?$staticlink$") left top;
    background-attachment: fixed;
    background-size: cover;
}



.trouble{
    position: relative;
    background: var(--whiteColor);
    border: 1px solid var(--secondaryColor);
    border-radius: 10px;
    max-width: 1070px;
    margin: 0 auto;
}
.troubleTitle{
    font-size: clamp(19px, 1.75vw, 28px);
    color: var(--fontColor);
    font-weight: 500;
    text-align: center;
    background: var(--secondaryColor);
    border-radius: 10px 10px 0 0;
    padding: 1rem;
}
.troubleSum{
    padding: 2.5rem;
    text-align: left;
    width: 80%;
}
.abImg{
    position: absolute;
    bottom: 15px;
}
.ab01{
    right: 12%;
    width: 11%;
}
.troubleUl{
    margin-left: 2rem;
    font-size: clamp(16px, 1.4vw, 22px);
}
.troubleUl > li {
    margin-bottom: 1rem;
    position: relative;
    padding: 0 0 0 1.8em;
}
.troubleUl > li:last-child{
    margin-bottom: 0;
}
.troubleUl > li::before{
    position: absolute;
    left: 0;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f14a'
}

.fukidashiImg{
    text-align: center;
    margin: 3% auto;
}
#beautyItem_2025 h3 span {
    font-size: clamp(22px, 2vw, 32px);
    font-weight: 500;
    background: var(--whiteColor);
    display: inline-block;
    padding: 5px 20px;
}
#beautyItem_2025 h4 span {
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 500;
    background: var(--whiteColor);
    display: inline-block;
    padding: 5px 20px;
    margin: 2% auto 3%;
}
#beautyItem_2025 h5 span{
    font-size: clamp(13px, 1vw, 16px);
    font-weight: 400;
    background: var(--yellowColor);
    display: inline-block;
    padding: 5px 20px;
    max-width: 1070px;
    margin: auto;
    text-align: left;
}
.proFlex{
    display: flex;
    justify-content: center;
    margin: 5% auto 0;
}
.proFlex > li {
    flex-basis: calc(100% / 4);
    position: relative;
}
.fukidashiImg figure{
    width: 25%;
    margin: auto;
}

#sec03{
    background: url("feature_beautyItem_2025/bg02.jpg?$staticlink$") right top;
    background-attachment: fixed;
    background-size: cover;
}
.ab02{
    right: 12%;
    width: 17%;
}

#sec04{
    background: url("feature_beautyItem_2025/bg03.jpg?$staticlink$") left top;
    background-attachment: fixed;
    background-size: cover;
}
.ab03{
    right: 12%;
    width: 11%;
}

a.linkBtn{
    display: block;
    background: var(--primaryColor);
    box-shadow: 0px 3px 6px var(--shadowColor);
    padding: 1.5rem;
    font-size: clamp(18px, 1.5vw, 24px);
    color: var(--whiteColor);
    max-width: 630px;
    transition: all .5s;
    margin: auto;
    border-radius: 10px;
}
.btnArea{
    margin: 6% auto;
}

a.linkBtn .fa-solid{
    margin-left: 10px;
}
.bnrArea{
    margin-top: 10%;
}
.bnrArea h6{
    text-align: center;
    font-size: clamp(23px, 2.4vw, 38px);
    margin-bottom: 2em;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    background: var(--yellowColor);
    padding: .5rem;
}
.bnrArea h6::before,
.bnrArea h6::after{
    content: "";
    background: var(--bkColor);
    height: 1px;
    flex-grow: 1;
}
.bnrArea h6::before{
    margin-right: 15px;
}
.bnrArea h6::after{
    margin-left: 15px;
}

a.bnrBtn{
    display: inline-block;
    box-shadow: 0px 3px 6px var(--shadowColor);
    transition: all .5s;
    margin: auto;
    border-radius: 10px;
    max-width: 630px;
    overflow: hidden;
}



@media (any-hover: hover) {
/*:hover はここに書く*/
.includeSCT .item:hover{transform:translateY(-5px);box-shadow: 2px 10px 20px var(--shadowColor);}
    
    
    a.linkBtn:hover{
        transform: translateY(-5px);
        box-shadow: 0px 6px 12px var(--shadowColor);
    }
    a.bnrBtn:hover{
        transform: translateY(-5px);
        box-shadow: 0px 6px 12px var(--shadowColor);
    }
    
}

/************************************************************/@media screen and (max-width: 1279px) {
  #HEADER .global{display: block;}
}

/************************************************************/@media screen and (max-width: 1024) {

_::-webkit-full-page-media, _:future, :root #sec02{
background-attachment: initial!important;
}
_::-webkit-full-page-media, _:future, :root #sec03{
background-attachment: initial!important;
}
_::-webkit-full-page-media, _:future, :root #sec04{
background-attachment: initial!important;
}






}

/************************************************************/@media screen and (max-width: 820px) {

    .troubleUl > li{
        margin-bottom: 0.5rem;
    }
    .proFlex{
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .proFlex > li{
        flex-basis: calc(100% / 3);
    }
    
.pad-cam {display: block !important;}
.pad-pc {display: block !important;}
.pc-cam {display: none !important;}
.sp-cam {display: none !important;}
}
/************************************************************/@media screen and (max-width: 768px) {

}
/************************************************************/@media screen and (max-width: 700px) {

    #beautyItem_2025 h2{
        margin-bottom: 6%;
    }
    #beautyItem_2025 h2:after{
        border: 15px solid transparent;
        margin-left: -15px;
        border-top-color: var(--primaryColor);
    }
    .troubleSum{
        padding: 1rem 0.3rem;
        width: 85%;
    }
    .troubleUl{
        margin-left: 1rem;
    }
    .ab01{
        right: 2%;
        width: 18%;
    }
    .fukidashiImg figure{
        width: 45%;
    }
    .proFlex > li{
        flex-basis: calc(100% / 2);
    }
    .proFlex{
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .ab02{
        right: 0;
        width: 25%;
        top: 40%;
    }
    .ab03{
        right: 2%;
        width: 18%;
    }
    #sec02{
        background: url(feature_beautyItem_2025/bg01_sp.jpg?$staticlink$) left top;
        background-attachment: scroll;
        background-size: cover;
    }
    #sec03{
        background: url(feature_beautyItem_2025/bg02_sp.jpg?$staticlink$) right top;
        background-attachment: scroll;
        background-size: cover;
    }
    #sec04{
        background: url(feature_beautyItem_2025/bg03_sp.jpg?$staticlink$) left top;
        background-attachment: scroll;
        background-size: cover;
    }
    
    
.pad-sp {display: block !important;}
.pc-cam {display: none !important;}
.sp-cam {display: block !important;}
.pad-cam {display: none !important;}
.pad-pc {display: none !important;}
}