@charset "UTF-8";
/* CSS Document */

/* ************************************************************
bar
************************************************************ */

#product-renewal2022 #product-ber{
margin: 0 auto;
width: 100%;
}

#product-renewal2022 #product-ber .bar{
margin: 0 auto;
padding-top: 180px;
width: 100%;
height: 800px;

background-image: url( "../img/natural/natural-bar@2x.jpg");
background-size:cover;
background-repeat: no-repeat;
background-position:center;
}

#product-renewal2022 #product-ber .bar h2{
text-align: center!important;
margin:0 auto;
width: 100%;
color: #fff;
font-size: 200px;
font-family: 'Bebas Neue', cursive;
opacity: .8;
position: relative;
}

#product-renewal2022 #product-ber .bar h2::after{
content:"";
display:block;
width:300px;
height:10px;
background:#fff;
position:absolute;
bottom:-30px;
left:50%;
transform: translateX(-50%);
}

#product-renewal2022 #product-ber .bar h3{
text-align: center!important;

margin:80px auto 0;
width: 100%;
font-size: 37px;
font-weight: 600;
color: #fff;
}

#product-renewal2022 #product-ber .bar p{
text-align: center!important;

margin-top: 30px;
width: 100%;
font-size: 13px;
line-height: 2;
letter-spacing: 0.05em;
color: #fff;
}

/* ******************************************* */
@media screen and (max-width: 1500px) {
 /* ---------------------------------- */
#product-renewal2022 #product-ber .bar{height: 700px;}
#product-renewal2022 #product-ber .bar h2{font-size: 150px;}
#product-renewal2022 #product-ber .bar h2::after{width:200px;}

#product-renewal2022 #product-ber .bar h3{
margin-top: 70px;
font-size: 30px;
}

#product-renewal2022 #product-ber .bar p{font-size: 12px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
#product-renewal2022 #product-ber .bar{
height: 600px;
padding-top: 150px;
}

#product-renewal2022 #product-ber .bar h2{font-size: 130px;}
#product-renewal2022 #product-ber .bar h2::after{width:200px;}
#product-renewal2022 #product-ber .bar h3{font-size: 25px;}
#product-renewal2022 #product-ber .bar p{font-size: 11px;}
 /* ---------------------------------- */
}


/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
#product-renewal2022 #product-ber .bar{
height: 500px;
padding-top: 110px;
}

#product-renewal2022 #product-ber .bar h2{font-size: 115px;}

#product-renewal2022 #product-ber .bar h2::after{
width:150px;
height: 7px;
}

#product-renewal2022 #product-ber .bar h3{font-size: 23px;}
#product-renewal2022 #product-ber .bar p{font-size: 10px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
#product-renewal2022 #product-ber .bar{
padding-top: 70px;
height: 400px;
}

#product-renewal2022 #product-ber .bar h2{font-size: 90px;}

#product-renewal2022 #product-ber .bar h2::after{
width:100px;
height: 5px;
}

#product-renewal2022 #product-ber .bar h3{
margin-top: 60px;
font-size: 20px;
}

#product-renewal2022 #product-ber .bar p{margin-top: 15px;}

 /* ---------------------------------- */
}

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

 /* ---------------------------------- */
}



/* ************************************************************
ファイブスターまで
************************************************************ */

#product-renewal2022 #block01 .block01-bar p:nth-of-type(1){
color: #fff;
background:#6f4f40;
}

#product-renewal2022 #block01 .block01-bar p:nth-of-type(3){
line-height: 1.5;
color: #fff;
background: #6f4f40;
}

/*それぞれの上下ボーダー　共通*/
#product-renewal2022 #block01 .block01-bar p:nth-of-type(1)::before,
#product-renewal2022 #block01 .block01-bar p:nth-of-type(3)::before{background:#6f4f40;}

#product-renewal2022 #block01 .block01-bar p:nth-of-type(1)::after,
#product-renewal2022 #block01 .block01-bar p:nth-of-type(3)::after{background:#6f4f40;}


#product-renewal2022 #block01 .head .kirinuki{width: 65%;}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
#product-renewal2022 #block01 .head .kirinuki{
width: 90%;
padding-right: 0;
padding-left: 5%;
}

 /* ---------------------------------- */
}





/* ************************************************************
◆ block03◆　LINE UP
************************************************************ */
#product-renewal2022 article{
margin: 0 auto;
width: 80%;
max-width: 900px;
}

#product-renewal2022 .natural-plan ul{margin-bottom: 180px;}

#product-renewal2022 .natural-plan ul li:nth-of-type(1){
margin: 0 auto 5%;
width: 100%;
font-size: 20px;
font-weight: 500;
padding: 7px 0 10px;
color: #fff;
letter-spacing: 0.03em;
background: #2d2d27;
position: relative;
}

#product-renewal2022 .natural-plan ul li:nth-of-type(1)::after{
   content:"";
   display:block;
   width:100%;
   height:4px;
   background-color:#6f4f40;
   position:absolute;
   bottom:0;
   left:0;
}

#product-renewal2022 .natural-plan ul li:nth-of-type(2){margin: 0 auto 10%;}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
#product-renewal2022 .natural-plan ul li:nth-of-type(1){
margin: 0 auto 5%;
font-size: 16px;
padding: 7px 0 10px;
}
 /* ---------------------------------- */
}



/* ************************************************************
noppo、conoppo レイアウトcss
************************************************************ */

/******カラーバリエーション*******/
#product-renewal2022 #block03 .color h2{
margin: 10% auto 0;
width: 100%;
padding: 10px;
color: #000;
background: #ffe233;
border-radius: 100px;
font-size: 25px;
font-weight: 700;
}

#product-renewal2022 #block03 .color .variation{
margin: 0 auto 15%;
width: 90%;

display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
}

#product-renewal2022 #block03 .color .variation li{
margin: 5% auto;
width: 30%;
}


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

/******カラーバリエーション*******/
#product-renewal2022 #block03 .color h2{
margin: 10% auto 0;
width: 80%;
font-size: 20px;
}

#product-renewal2022 #block03 .color .variation{
margin: 0 auto 25%;
width: 80%;
}

#product-renewal2022 #block03 .color .variation li{margin: 3% auto;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */
#product-renewal2022 #block03 .color .variation{width: 90%;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
#product-renewal2022 #block03 .color .variation{width: 100%;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
#product-renewal2022 #block03 .natural-plan li:nth-of-type(4){margin-bottom: 10%;}

/******カラーバリエーション*******/
#product-renewal2022 #block03 .color h2{
margin: 15% auto 0;
width: 80%;
padding: 5px;
font-size: 20px;
}

#product-renewal2022 #block03 .color .variation li{width: 45%;}

#product-renewal2022 #block03 .color .variation{width: 90%;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
/******カラーバリエーション*******/
#product-renewal2022 #block03 .color h2{font-size: 17px;}
#product-renewal2022 #block03 .color .variation{margin: 0 auto 35%;}
#product-renewal2022 #block03 .color .variation{width: 100%;}
 /* ---------------------------------- */
}