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

/* ************************************************************
強制センタリング
************************************************************ */
#product-renewal2022{text-align: center;}


/* ************************************************************
レスポンシブ画像切り替え（基本的なブレイクポイントではpc,mb、イレギュラーな部分だけ02,03等つけていく）
************************************************************ */

.pc1200{display:block;}
.mb1200{display:none;}
.pc1024{display:block;}
.mb1024{display:none;}
.pc768{display:block;}
.mb768{display: none;} 
.pc680{display:block;}
.mb680{display: none;} 
.pc600{display:block;}
.mb600{display: none;} 
.pc480{display:block;}
.mb480{display: none;} 
.pc380{display:block;}
.mb380{display: none;} 

/* ▼▼▼▼▼▼▼▼MaxWidth1024▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 1200px) {
 /* ************** */
.pc1200{display:none;}
.mb1200{display: block;} 
 /* *************** */
	}

/* ▼▼▼▼▼▼▼▼MaxWidth1024▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 1024px) {
 /* ************** */
.pc1024{display:none;}
.mb1024{display: block;} 
 /* *************** */
	}

/* ▼▼▼▼▼▼▼▼MaxWidth768▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 768px) {
 /* ************** */
.pc768{display:none;}
.mb768{display: block;} 
 /* *************** */
	}

/* ▼▼▼▼▼▼▼▼MaxWidth768▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 680px) {
 /* ************** */
.pc680{display:none;}
.mb680{display: block;} 
 /* *************** */
	}

/* ▼▼▼▼▼▼▼▼MaxWidth768▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 600px) {
 /* ************** */
.pc600{display:none;}
.mb600{display: block;} 
 /* *************** */
	}


/* ▼▼▼▼▼▼▼▼MaxWidth768▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 480px) {
 /* ************** */
.pc480{display:none;}
.mb480{display: block;} 
 /* *************** */
	}


/* ▼▼▼▼▼▼▼▼MaxWidth768▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 380px) {
 /* ************** */
.pc380{display:none;}
.mb380{display: block;} 
 /* *************** */
	}


/** --------------------------------------------------
商品ページ共通　MV
-------------------------------------------------- **/
#product-renewal2022 #product-subvisual{
margin:0 auto;
width:100%;
position: relative;
}

#product-renewal2022 #product-subvisual article{
margin:0 auto;
padding: 90px 0;
width:100%;
}

#product-renewal2022 #product-subvisual article .subvisual-bg{
width: 100%;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: -10;
}

#product-renewal2022 #product-subvisual article .subvisual-bg img{width: 100%;}

#product-renewal2022 #product-subvisual article h2{
margin-bottom: 60px;
width:100%;
font-size: 18px;
font-weight: 500;
color: #2d2d27;
line-height: 1.2;
letter-spacing: 0.05em;
position: relative;
}

#product-renewal2022 #product-subvisual article h2::after{
content:"";
display:block;
width:5px;
height:90px;
background:#2d2d27;
position:absolute;
bottom:-110px;
left:50%;
transform: translateX(-50%);
}

#product-renewal2022 #product-subvisual article h2 span{
font-family: 'Outfit', sans-serif;
font-size: 60px;
font-weight: 700;
letter-spacing: 0.1em;
}

#product-renewal2022 #product-subvisual .main-photo{
margin:0 auto 50px;
width:100%;
max-width: 900px;
}

#product-renewal2022 #product-subvisual .sub{
margin:0 auto;
width:100%;
max-width: 750px;
}

/* *********** ******************************** */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
#product-renewal2022 #product-subvisual article{padding: 70px 0;}
#product-renewal2022 #product-subvisual .sub{width:90%;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */
#product-renewal2022 #product-subvisual article{padding:70px 5%;}

#product-renewal2022 #product-subvisual article h2::after{
width:5px;
height:70px;
bottom:-100px;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
#product-renewal2022 #product-subvisual .main-photo{margin:0 auto 40px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
#product-renewal2022 #product-subvisual article{padding:50px 5%;}
#product-renewal2022 #product-subvisual article h2{
margin-bottom: 40px;
font-size: 16px;
}

#product-renewal2022 #product-subvisual article h2 span{font-size: 47px;}
#product-renewal2022 #product-subvisual article h2::after{
height:60px;
bottom:-75px;
}
 /* ---------------------------------- */
}

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

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

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


/** --------------------------------------------------
商品ページ共通　block01　各パーツごとにレスポンシブ
-------------------------------------------------- **/
/****************************************************/
/*タイトルバー*/
/****************************************************/

#product-renewal2022 #block01{
margin:5% auto;
width:100%;
}

#product-renewal2022 #block01 .block01-bar{
margin:0 auto;
width:100%;

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

/*商品名バー　一括指定*/
#product-renewal2022 #block01 .block01-bar p{
margin:0 auto;
width: 100%;
padding: 20px 10px;
letter-spacing: 0.03em;
}

/*ここから個別指定*/
#product-renewal2022 #block01 .block01-bar p:nth-of-type(1){
width:20%;
color: #2d2d27;
background:#ffe233;
position: relative;
}

#product-renewal2022 #block01 .block01-bar p:nth-of-type(2){
width:15%;
font-family: 'Outfit', sans-serif;
font-size: 45px;
font-weight: 700;
letter-spacing: 0.05em;
}

#product-renewal2022 #block01 .block01-bar p:nth-of-type(3){
text-align: left;
width:60%;
color: #2d2d27;
background: #ffe233;
font-size: 18px;
font-weight: 700;
position: relative;
}


/*それぞれの上下ボーダー　共通*/
#product-renewal2022 #block01 .block01-bar p:nth-of-type(1)::before,
#product-renewal2022 #block01 .block01-bar p:nth-of-type(3)::before{
content:"";
display:block;
width:100%;
background:#ffe233;
position:absolute;
left:0;
}

#product-renewal2022 #block01 .block01-bar p:nth-of-type(1)::after,
#product-renewal2022 #block01 .block01-bar p:nth-of-type(3)::after{
content:"";
display:block;
width:100%;
height:5px;
background:#ffe233;
position:absolute;
left:0;
}

/*線幅などの変更が必要な時は以下をレスポンシブ*/
#product-renewal2022 #block01 .block01-bar p:nth-of-type(1)::before,
#product-renewal2022 #block01 .block01-bar p:nth-of-type(3)::before{
height:5px;
top:-10px;
}

#product-renewal2022 #block01 .block01-bar p:nth-of-type(1)::after,
#product-renewal2022 #block01 .block01-bar p:nth-of-type(3)::after{
height:5px;
bottom:-10px;
}

/* *********** ******************************** */
@media screen and (max-width: 1400px) {
 /* ---------------------------------- */
/*ここから個別指定*/
#product-renewal2022 #block01 .block01-bar p:nth-of-type(1){width:15%;}

#product-renewal2022 #block01 .block01-bar p:nth-of-type(2){
width:20%;
font-size: 47px;
}

#product-renewal2022 #block01 .block01-bar p:nth-of-type(3){
width:65%;
font-size: 18px;
}

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

/* ******************************************* */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
/*ここから個別指定*/
#product-renewal2022 #block01 .block01-bar p:nth-of-type(1){width:10%;}

#product-renewal2022 #block01 .block01-bar p:nth-of-type(2){
width:25%;
font-size: 40px;
}

#product-renewal2022 #block01 .block01-bar p:nth-of-type(3){
width:65%;
font-size: 16px;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */
#product-renewal2022 #block01 .block01-bar p:nth-of-type(2){font-size: 38px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
/*ここから個別指定*/
#product-renewal2022 #block01 .block01-bar p:nth-of-type(1){width:10%;}

#product-renewal2022 #block01 .block01-bar p:nth-of-type(2){
width:35%;
font-size: 35px;
}

#product-renewal2022 #block01 .block01-bar p:nth-of-type(3){
width:65%;
font-size: 16px;
}

/*線幅などの変更が必要な時は以下をレスポンシブ*/
#product-renewal2022 #block01 .block01-bar p:nth-of-type(1)::before,
#product-renewal2022 #block01 .block01-bar p:nth-of-type(3)::before{
height:3px;
top:-8px;
}

#product-renewal2022 #block01 .block01-bar p:nth-of-type(1)::after,
#product-renewal2022 #block01 .block01-bar p:nth-of-type(3)::after{
height:3px;
bottom:-8px;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
#product-renewal2022 #block01 .block01-bar p:nth-of-type(1){width:7%;}

#product-renewal2022 #block01 .block01-bar p:nth-of-type(2){
width:36%;
font-size: 30px;
}

#product-renewal2022 #block01 .block01-bar p:nth-of-type(3){width:57%;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
#product-renewal2022 #block01 .block01-bar p{padding: 15px 10px;}
#product-renewal2022 #block01 .block01-bar p:nth-of-type(1){width:5%;}

#product-renewal2022 #block01 .block01-bar p:nth-of-type(2){
width:40%;
font-size: 30px;
}

#product-renewal2022 #block01 .block01-bar p:nth-of-type(3){
width:55%;
font-size: 14px;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */
#product-renewal2022 #block01 .block01-bar p:nth-of-type(2){font-size: 26px;}
#product-renewal2022 #block01 .block01-bar p:nth-of-type(3){font-size: 12px;}
 /* ---------------------------------- */
}


/****************************************************/
/*切り抜き写真+テキスト*/
/****************************************************/
#product-renewal2022 #block01 .head{
margin: 5% auto;
width: 100%;
max-width: 1200px;
padding-left: 5%;

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

#product-renewal2022 #block01 .head .kirinuki{
margin: 0 auto;
width: 40%;
padding-right: 5%;
}

#product-renewal2022 #block01 .head .head-text{
text-align: left;
margin: 0 auto;
width: 60%;
line-height: 1.5;
letter-spacing: 0.05em;
}

#product-renewal2022 #block01 .head .head-text h2{
margin-bottom: 40px;
font-size: 35px;
font-weight: 900;
position: relative;
}

#product-renewal2022 #block01 .head .head-text h2::after{
content:"";
display:block;
width:500px;
height: 3px;
background:#2d2d27;
position:absolute;
bottom: -20px;
left:0;
}

#product-renewal2022 #block01 .head .head-text h3{
font-size: 18px;
}

/* *********** ******************************** */
@media screen and (max-width: 1500px) {
 /* ---------------------------------- */
#product-renewal2022 #block01 .head{
margin: 10% auto;
width: 100%;
max-width: 900px;
padding: 0 5%;
}

#product-renewal2022 #block01 .head .kirinuki{width: 55%;}
#product-renewal2022 #block01 .head .head-text{width: 45%;}
#product-renewal2022 #block01 .head .head-text h2{font-size: 26px;}

#product-renewal2022 #block01 .head .head-text h2::after{
height: 2px;
width:100%;
bottom: -20px;
}

#product-renewal2022 #block01 .head .head-text h3{font-size: 14px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
#product-renewal2022 #block01 .head{
margin: 10% auto;
flex-flow: column wrap;
}

#product-renewal2022 #block01 .head .kirinuki{width: 400px;}
#product-renewal2022 #block01 .head .head-text{
text-align: center;
width: 90%;
}

#product-renewal2022 #block01 .head .head-text h2{font-size: 24px;}

#product-renewal2022 #block01 .head .head-text h2::after{
width:90%;
left:50%;
transform: translateX(-50%);
}

#product-renewal2022 #block01 .head .head-text h3{font-size: 13px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
#product-renewal2022 #block01 .head .kirinuki{width: 330px;}
#product-renewal2022 #block01 .head .head-text h2{font-size: 22px;}
#product-renewal2022 #block01 .head .head-text h3{font-size: 12px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
#product-renewal2022 #block01 .head .kirinuki{width: 300px;}
#product-renewal2022 #block01 .head .head-text h2{font-size: 20px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */
#product-renewal2022 #block01 .head .kirinuki{width: 260px;}

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




/****************************************************/
/*BELS ファイブスター*/
/****************************************************/
#product-renewal2022 #block01 .five-star{
margin: 10% auto;
width: 100%;
max-width: 1000px;
border: solid 15px #ffe233;
position: relative;
}

#product-renewal2022 #block01 .five-star .star{
width: 280px;
position: absolute;
top:-110px;
left: 50%;
transform: translateX(-50%);
}

#product-renewal2022 #block01 .five-star h2{
margin: 0 auto;
width: 100%;
padding: 40px;
background: #ffe233;
}

#product-renewal2022 #block01 .five-star .bels{
margin: 5% auto;
width: 90%;

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

/*bels マーク*/
#product-renewal2022 #block01 .five-star .bels p:nth-of-type(1){
margin: 0 auto;
width: 25%;
}

/*bels テキスト*/
#product-renewal2022 #block01 .five-star .bels p:nth-of-type(2){
text-align: left;
margin: 0 auto;
width: 65%;
line-height: 1.3;
font-size: 18px;
font-weight: 700;
}

/*３つのメリット*/
#product-renewal2022 #block01 .five-star ul{
margin: 0 auto 5%;
width: 90%;

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

#product-renewal2022 #block01 .five-star ul li{
margin: 0 auto;
width: 30%;
}

/* *********** ******************************** */
@media screen and (max-width: 1500px) {
 /* ---------------------------------- */
#product-renewal2022 #block01 .five-star{margin: 200px auto;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
#product-renewal2022 #block01 .five-star{
margin: 100px auto;
width: 90%;
max-width: 768px;
}

#product-renewal2022 #block01 .five-star .star{
width: 240px;
top:-90px;
}

#product-renewal2022 #block01 .five-star .bels{
margin: 5% auto;
}

/*bels マーク*/
#product-renewal2022 #block01 .five-star .bels p:nth-of-type(1){
width: 25%;
}

/*bels テキスト*/
#product-renewal2022 #block01 .five-star .bels p:nth-of-type(2){
width: 70%;
font-size: 14px;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
#product-renewal2022 #block01 .five-star{margin: 20% auto;}
#product-renewal2022 #block01 .five-star .star{width: 220px;}

#product-renewal2022 #block01 .five-star .bels{
width: 90%;
flex-flow: column wrap;
}
/*bels マーク*/
#product-renewal2022 #block01 .five-star .bels p:nth-of-type(1){width: 30%;}

/*bels テキスト*/
#product-renewal2022 #block01 .five-star .bels p:nth-of-type(2){
text-align: center;
margin: 20px auto 0;
width: 90%;
font-size: 14px;
}

/*３つのメリット*/
#product-renewal2022 #block01 .five-star ul{
margin: 0 auto;
width: 95%;
}

#product-renewal2022 #block01 .five-star ul li{
margin: 0 auto 5%;
width: 45%;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
#product-renewal2022 #block01 .five-star{margin: 25% auto;}
#product-renewal2022 #block01 .five-star h2{padding: 20px 10px;}
/*bels マーク*/
#product-renewal2022 #block01 .five-star .bels p:nth-of-type(1){width: 50%;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
#product-renewal2022 #block01 .five-star .star{
width: 180px;
top:-75px;
}

/*bels テキスト*/
#product-renewal2022 #block01 .five-star .bels p:nth-of-type(2){
margin: 20px auto 0;
width: 100%;
font-size: 12px;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */
 #product-renewal2022 #block01 .five-star .star{
width: 150px;
top:-60px;
}
/*３つのメリット*/
#product-renewal2022 #block01 .five-star ul{flex-flow: column wrap;}
#product-renewal2022 #block01 .five-star ul li{
margin: 0 auto 10%;
width: 75%;
}
 /* ---------------------------------- */
}





/** --------------------------------------------------
◆ block02◆安心の仕様　h1はズレるため、それぞれclass分けて位置調整
-------------------------------------------------- **/
#product-renewal2022 #block02{
margin: 12% auto;
width: 100%;
max-width: 1000px;
border: solid 7px #ffe233;
position: relative;
}


/***********　h1　各商品ページごとにズレるため、各ページで調整　***************/
#product-renewal2022 #block02 h1{
margin: 0 auto;
padding: 15px 0;
width: 80%;
color: #2d2d27;
font-size: 25px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
background: #ffe233;
border: solid 5px #fff;
border-radius: 100px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}

#product-renewal2022 #block02 h1 span{
font-size: 32px;
font-weight: 900;
color: #cf0000;
}

#product-renewal2022 #block02 .h1-tecoro{top: -4%;}
#product-renewal2022 #block02 .h1-tecoroG{top: -3%;}
#product-renewal2022 #block02 .h1-noppo,
#product-renewal2022 #block02 .h1-conoppo{top: -10%;}

/*それぞれの大枠の横幅は共通なので一括指定*/
#product-renewal2022 #block02 article{
margin: 0 auto;
width: 90%;
position: relative;
}

/***************耐震等級3相当***************/

#product-renewal2022 #block02 article .taisin{
margin: 13% auto 0;
width: 65%;
}

/*flex*/
#product-renewal2022 #block02 article .taisin-flex{
margin: 0 auto;
width: 90%;

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

/*左のテキスト*/
#product-renewal2022 #block02 article .taisin-flex div{
margin: 10% auto;
width: 50%;
}

/*右のイメージ画像*/
#product-renewal2022 #block02 article .taisin-flex .taisin-image{
margin: 0 auto;
width: 35%;
}

#product-renewal2022 #block02 article .taisin-flex div h2{
text-align: left;
margin: 0 auto 30px;
width: 100%;
color: #ff0000;
font-size: 25px;
font-weight: 700;
letter-spacing: 0.05em;
position: relative;
}

#product-renewal2022 #block02 article .taisin-flex div h2::after{
content:"";
display:block;
width:100%;
height: 3px;
background:#ffe233;
position:absolute;
bottom: -15px;
left:0;
}

#product-renewal2022 #block02 article .taisin-flex div h2 span{
color: #000;
font-size: 18px;
}

#product-renewal2022 #block02 article .taisin-flex div p{
text-align: justify;
margin: 0 auto;
width: 100%;
font-size: 13px;
line-height: 1.7;
}

/***************コストメンテナンスはなんと1/2***************/
#product-renewal2022 #block02 article .maintenance{
margin: 10% auto 5%;
width: 70%;
}

#product-renewal2022 #block02 article .maintenance-text{
text-align: center;
margin: 0 auto;
width: 100%;
font-size: 13px;
line-height: 1.7;
}

/***************高断熱UA値0.56***************/
#product-renewal2022 #block02 article .UA{
margin: 10% auto 5%;
width: 75%;
}

#product-renewal2022 #block02 article .UA-text{
text-align: center;
margin: 0 auto -15%;
width: 100%;
font-size: 16px;
font-weight: 700;
line-height: 1.7;
}

#product-renewal2022 #block02 article .UA-text span{
font-size: 16px;
font-weight: 700;
line-height: 1.7;
color: #ff0000;
}

#product-renewal2022 #block02 article .UA-bg{
margin: 0 auto;
width: 100%;
}

/*３つのポイントは同じ指定*/
#product-renewal2022 #block02 article .maintenance-point,
#product-renewal2022 #block02 article .UA-point{
margin: 7% auto 10%;
width: 70%;
}

/*間の黄色線*/
#product-renewal2022 #block02 .yellow-line{
margin: 5% auto 0;
width: 80%;
height: 5px;
background: #fcda00;
}

/* ******************************************* */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
#product-renewal2022 #block02{
margin: 150px auto;
width: 90%;
max-width: 768px;
}

#product-renewal2022 #block02 h1{font-size: 22px;}
#product-renewal2022 #block02 h1 span{font-size: 27px;}

/***************耐震等級3相当***************/
#product-renewal2022 #block02 article .taisin{
margin: 18% auto 0;
width: 75%;
}

/*右のイメージ画像*/
#product-renewal2022 #block02 article .taisin-flex .taisin-image{width: 40%;}

#product-renewal2022 #block02 article .taisin-flex div h2{
margin: 0 auto 20px;
font-size: 20px;
}

#product-renewal2022 #block02 article .taisin-flex div h2::after{bottom: -10px;}

#product-renewal2022 #block02 article .taisin-flex div h2 span{font-size: 16px;}
#product-renewal2022 #block02 article .taisin-flex div p{font-size: 11px;}

/***************コストメンテナンスはなんと1/2***************/
#product-renewal2022 #block02 article .maintenance{width: 80%;}
#product-renewal2022 #block02 article .maintenance-text{font-size: 11px;}

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

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
#product-renewal2022 #block02 h1{width: 90%;}

/***************耐震等級3相当***************/
/*flex*/
#product-renewal2022 #block02 article .taisin-flex{width: 95%;}
/*左のテキスト*/
#product-renewal2022 #block02 article .taisin-flex div{width: 50%;}
/*右のイメージ画像*/
#product-renewal2022 #block02 article .taisin-flex .taisin-image{width: 40%;}

#product-renewal2022 #block02 article .taisin-flex div h2{font-size: 18px;}
#product-renewal2022 #block02 article .taisin-flex div h2 span{font-size: 14px;}
#product-renewal2022 #block02 article .taisin-flex div p{font-size: 10px;}

/***************コストメンテナンスはなんと1/2***************/
#product-renewal2022 #block02 article .maintenance-text{font-size: 10px;}

/***************高断熱UA値0.56***************/
#product-renewal2022 #block02 article .UA{margin: 20% auto 5%;}

/*３つのポイントは同じ指定*/
#product-renewal2022 #block02 article .maintenance-point,
#product-renewal2022 #block02 article .UA-point{
margin: 7% auto;
width: 60%;
}

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

/* ******************************************* */
@media screen and (max-width: 680px) {
 /* ---------------------------------- */
#product-renewal2022 #block02 h1{font-size: 20px;}
#product-renewal2022 #block02 h1 span{font-size: 25px;}

/***************耐震等級3相当***************/
/*flex*/
#product-renewal2022 #block02 article .taisin-flex{
width: 90%;
flex-flow: column wrap;
}
/*左のテキスト*/
#product-renewal2022 #block02 article .taisin-flex div{width: 90%;}
/*右のイメージ画像*/
#product-renewal2022 #block02 article .taisin-flex .taisin-image{
width: 70%;
margin-bottom: 10%;
}
#product-renewal2022 #block02 article .taisin-flex div h2{text-align: center;}

/***************コストメンテナンスはなんと1/2***************/
#product-renewal2022 #block02 article .maintenance{width: 90%;}

/***************高断熱UA値0.56***************/
#product-renewal2022 #block02 article .UA-text{
margin: 0 auto -15%;
font-size: 14px;
}

#product-renewal2022 #block02 article .UA-text span{font-size: 14px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
#product-renewal2022 #block02 h1{
width: 95%;
font-size: 18px;
}

#product-renewal2022 #block02 h1 span{font-size: 22px;}

/***************耐震等級3相当***************/
#product-renewal2022 #block02 article .taisin{margin: 20% auto 0;}

/***************コストメンテナンスはなんと1/2***************/
#product-renewal2022 #block02 article .maintenance{margin: 13% auto 7%;}
#product-renewal2022 #block02 article .maintenance-text{
text-align: justify;
width: 80%;
}
#product-renewal2022 #block02 article .maintenance-text br{display: none;}

/*３つのポイントは同じ指定*/
#product-renewal2022 #block02 article .maintenance-point,
#product-renewal2022 #block02 article .UA-point{
margin: 7% auto;
width: 80%;
}

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

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
#product-renewal2022 #block02{margin: 130px auto 100px;}

#product-renewal2022 #block02 h1{
font-size: 16px;
line-height: 1.3;
}

/***********　h1　各商品ページごとにズレるため、各ページで調整　***************/
#product-renewal2022 #block02 .h1-tecoro{top: -4%;}
#product-renewal2022 #block02 .h1-tecoroG{top: -3%;}
#product-renewal2022 #block02 .h1-noppo,
#product-renewal2022 #block02 .h1-conoppo{top: -9%;}

#product-renewal2022 #block02 h1 span{font-size: 20px;}

/***************耐震等級3相当***************/
#product-renewal2022 #block02 article .taisin{
margin: 25% auto 0;
width: 95%;
}
/*右のイメージ画像*/
#product-renewal2022 #block02 article .taisin-flex .taisin-image{width: 90%;}

/*３つのポイントは同じ指定*/
#product-renewal2022 #block02 article .maintenance-point,
#product-renewal2022 #block02 article .UA-point{width: 95%;}

/***************高断熱UA値0.56***************/
#product-renewal2022 #block02 article .UA-text{
margin: 0 auto -10%;
font-size: 12px;
}

#product-renewal2022 #block02 article .UA-text span{font-size: 12px;}

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

/* ******************************************* */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */
/***************耐震等級3相当***************/
#product-renewal2022 #block02 article .taisin{margin: 30% auto 0;}
#product-renewal2022 #block02 article .taisin-flex div h2{line-height: 1.5;}
 /* ---------------------------------- */
}


/** --------------------------------------------------
商品ページ共通
-------------------------------------------------- **/
/****************************************************/
/*タイトルバー　line up*/
#product-renewal2022 #block03{
margin:5% auto;
width:100%;
}

#product-renewal2022 #block03 .lineup-bar{
margin:0 auto;
width:100%;

display: flex;
justify-content: center;
align-items: stretch;
flex-flow: row nowrap;
position: relative;
}

/*商品名バー　一括指定*/
#product-renewal2022 #block03 .lineup-bar p{
margin: auto;
width: 100%;
letter-spacing: 0.03em;
}

/*ここから個別指定*/
#product-renewal2022 #block03 .lineup-bar p:nth-of-type(1){
text-align: right;
width:60%;
padding: 20px 20px 20px 0 ;
color: #2d2d27;
background:#ffe233;
font-size: 18px;
font-weight: 700;
position: relative;
}

#product-renewal2022 #block03 .lineup-bar p:nth-of-type(2){
width:15%;
font-family: 'Bebas Neue', cursive;
font-size: 45px;
font-weight: 700;
letter-spacing: 0.05em;
}

#product-renewal2022 #block03 .lineup-bar p:nth-of-type(3){
width:20%;
padding: 22px 0px;
background: #ffe233;
position: relative;
}


/*それぞれの上下ボーダー　共通*/
#product-renewal2022 #block03 .lineup-bar::before{
content:"";
display:block;
width:100%;
background:#ffe233;
position:absolute;
left:0;
}

#product-renewal2022 #block03 .lineup-bar::after{
content:"";
display:block;
width:100%;
height:5px;
background:#ffe233;
position:absolute;
left:0;
}

/*線幅などの変更が必要な時は以下をレスポンシブ*/
#product-renewal2022 #block03 .lineup-bar::before{
height:5px;
top:-8px;
}

#product-renewal2022 #block03 .lineup-bar::after{
height:5px;
bottom:-8px;
}

/* *********** ******************************** */
@media screen and (max-width: 1400px) {
 /* ---------------------------------- */
/*ここから個別指定*/
#product-renewal2022 #block03 .lineup-bar p:nth-of-type(1){
font-size: 18px;
width:65%;
}

#product-renewal2022 #block03 .lineup-bar p:nth-of-type(2){
width:20%;
font-size: 47px;
}

#product-renewal2022 #block03 .lineup-bar p:nth-of-type(3){width:15%;}

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

/* ******************************************* */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
/*ここから個別指定*/
#product-renewal2022 #block03 .lineup-bar p:nth-of-type(1){
width:65%;
font-size: 16px;
}

#product-renewal2022 #block03 .lineup-bar p:nth-of-type(2){
width:25%;
font-size: 40px;
}

#product-renewal2022 #block03 .lineup-bar p:nth-of-type(3){width:10%;}

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

/* ******************************************* */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */
#product-renewal2022 #block03 .lineup-bar p:nth-of-type(2){font-size: 38px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
/*ここから個別指定*/
#product-renewal2022 #block03 .lineup-bar p:nth-of-type(1){
width:65%;
font-size: 16px;
padding: 15px 15px 20px 0 ;
}

#product-renewal2022 #block03 .lineup-bar p:nth-of-type(2){
width:35%;
font-size: 35px;
}

#product-renewal2022 #block03 .lineup-bar p:nth-of-type(3){
width:10%;
padding: 20px 0px;
}

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

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
#product-renewal2022 #block03 .lineup-bar p{padding: 10px 10px;}
#product-renewal2022 #block03 .lineup-bar p:nth-of-type(1){
width:57%;
padding: 10px 10px 20px 0 ;
}

#product-renewal2022 #block03 .lineup-bar p:nth-of-type(2){
width:36%;
font-size: 32px;
}

#product-renewal2022 #block03 .lineup-bar p:nth-of-type(3){
width:7%;
padding: 16px 0px;
}

/*線幅などの変更が必要な時は以下をレスポンシブ*/
#product-renewal2022 #block03 .lineup-bar::before{
height:3px;
top:-2px;
}

#product-renewal2022 #block03 .lineup-bar::after{
height:3px;
bottom:-2px;
}

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

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
#product-renewal2022 #block03 .lineup-bar p:nth-of-type(1){
width:55%;
font-size: 14px;
}

#product-renewal2022 #block03 .lineup-bar p:nth-of-type(2){
width:40%;
font-size: 30px;
}

#product-renewal2022 #block03 .lineup-bar p:nth-of-type(3){width:5%;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */
#product-renewal2022 #block03 .lineup-bar p:nth-of-type(1){font-size: 12px;}
#product-renewal2022 #block03 .lineup-bar p:nth-of-type(2){font-size: 26px;}
#product-renewal2022 #block03 .lineup-bar p:nth-of-type(3){
padding: 13px 0px;
}
 /* ---------------------------------- */
}






/* ************************************************************
tecoro　プランタイトル
************************************************************ */

/*プランタイトル　平屋*/
#product-renewal2022 #block03 .title-hiraya{
margin: 10% auto 0;
width: 100%;
max-width: 300px;
}

/*プランタイトル　２階建て*/
#product-renewal2022 #block03 .title-2stories{
margin: 10% auto 0;
width: 100%;
max-width: 360px;
}

#product-renewal2022 #block03 .plan-text{
margin: 50px auto;
width: 100%;
font-size: 14px;
line-height: 1.7;
letter-spacing: 0.05em;
}

/* ******************************************* */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
/*プランタイトル　平屋*/
#product-renewal2022 #block03 .title-hiraya{max-width: 250px;}
/*プランタイトル　２階建て*/
#product-renewal2022 #block03 .title-2stories{max-width: 310px;}

#product-renewal2022 #block03 .plan-text{
margin: 40px auto;
font-size: 12px;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
/*プランタイトル　平屋*/
#product-renewal2022 #block03 .title-hiraya{margin: 15% auto 0;}
#product-renewal2022 #block03 .plan-text{font-size: 11px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
#product-renewal2022 #block03 .plan-text{font-size: 10px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
#product-renewal2022 #block03 .title-hiraya{max-width: 220px;}
/*プランタイトル　２階建て*/
#product-renewal2022 #block03 .title-2stories{max-width: 280px;}
 /* ---------------------------------- */
}


/* ************************************************************
tecoro　縦並びレイアウトcss
************************************************************ */
#product-renewal2022 #block03 .tate-layout{
margin: 10% auto;
width: 80%;
max-width: 900px;

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

#product-renewal2022 #block03 .tate-layout ul{
margin: 0 auto;
width: 45%;
padding: 5%;
position: relative;
}

/*線指定*/
/*１つめと３つめ右線*/
#product-renewal2022 #block03 .tate-layout ul:nth-of-type(2n-1)::before{
content:"";
display:block;
width:4px;
height: 80%;
background:#ffe233;
position:absolute;
top: 7%;
right:-5%;
}

/*１つめと２つめ下線*/
#product-renewal2022 #block03 .tate-layout ul:nth-of-type(-n+2)::after{
content:"";
display:block;
width:80%;
height: 4px;
background:#ffe233;
position:absolute;
bottom: 10px;
left:50%;
transform: translateX(-50%);
}

#product-renewal2022 #block03 .tate-layout ul li{
margin: 0 auto;
width: 100%;
}

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

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
#product-renewal2022 #block03 .tate-layout{
margin: 15% auto;
align-items: flex-start;
flex-flow: column wrap;
}

#product-renewal2022 #block03 .tate-layout ul{
margin: 0 auto 30%;
width: 100%;
padding: 0 15%;
}

#product-renewal2022 #block03 .tate-layout ul:last-of-type{margin-bottom: 15%;}

/*一旦線消す*/
#product-renewal2022 #block03 .tate-layout ul:nth-of-type(2n-1)::before{display:none;}
#product-renewal2022 #block03 .tate-layout ul:nth-of-type(-n+2)::after{display:none;}

/*１〜３つめの下線のみ*/
#product-renewal2022 #block03 .tate-layout ul:nth-of-type(-n+3)::after{
content:"";
display:block;
width:70%;
height: 4px;
background:#ffe233;
position:absolute;
bottom: -10%;
left:50%;
transform: translateX(-50%);
}
/* ---------------------------------- */
}



/* ************************************************************
tecoro、tecoroG　横並びレイアウトcss
************************************************************ */
#product-renewal2022 #block03 .yoko-layout{
margin: 10% auto;
width: 80%;
max-width: 900px;
}

#product-renewal2022 #block03 .yoko-layout ul{
margin: 15% auto;
width: 100%;

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

/*一旦全部に下線を適用*/
#product-renewal2022 #block03 .yoko-layout ul::after{
content:"";
display:block;
width:100%;
height: 4px;
background:#ffe233;
position:absolute;
bottom: -25%;
left:50%;
transform: translateX(-50%);
}

/*一番最後の下線だけ打ち消す*/
#product-renewal2022 #block03 .yoko-layout ul:last-of-type::after{display:none;}


#product-renewal2022 #block03 .yoko-layout li:nth-of-type(1){
margin: 0 auto;
width: 40%;
}

#product-renewal2022 #block03 .yoko-layout li:nth-of-type(2){
margin: 0 auto;
width: 60%;
}

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
#product-renewal2022 #block03 .yoko-layout{
margin: 10% auto;
width: 100%;
}

#product-renewal2022 #block03 .yoko-layout ul{
width: 100%;
padding: 0 15%;
align-items: center;
flex-flow: column wrap;
}

#product-renewal2022 #block03 .yoko-layout li:nth-of-type(1){
margin-bottom: 5%;
width: 100%;
}

#product-renewal2022 #block03 .yoko-layout li:nth-of-type(2){width: 100%;}
 /* ---------------------------------- */
}



/* ************************************************************
noppo、conoppo レイアウトcss
************************************************************ */
#product-renewal2022 #block03 .noppo-product{
margin: 5% auto;
width: 100%;
max-width: 900px;
}

/*プラン写真*/
#product-renewal2022 #block03 .noppo-product .noppo-plan,
#product-renewal2022 #block03 .noppo-product .conoppo-plan{
margin: 10% auto;
width: 80%;
}

/*プラン間取り*/
#product-renewal2022 #block03 .noppo-product .noppo-floor,
#product-renewal2022 #block03 .noppo-product .conoppo-floor{
margin: 0 auto;
width: 100%;
}


/******カラーバリエーション*******/
#product-renewal2022 #block03 .noppo-product article 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 .noppo-product article .variation{
margin: 0 auto;
width: 80%;

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

#product-renewal2022 #block03 .noppo-product article .variation li{
margin: 5% auto;
width: 45%;
}

/* ******************************************* */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
#product-renewal2022 #block03 .noppo-product{
margin: 5% auto;
width: 100%;
}

/*プラン写真*/
#product-renewal2022 #block03 .noppo-product .noppo-plan,
#product-renewal2022 #block03 .noppo-product .conoppo-plan{
margin: 10% auto;
width: 50%;
}

/*プラン間取り*/
#product-renewal2022 #block03 .noppo-product .noppo-floor,
#product-renewal2022 #block03 .noppo-product .conoppo-floor{width: 95%;}


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

#product-renewal2022 #block03 .noppo-product article .variation{width: 70%;}

#product-renewal2022 #block03 .noppo-product article .variation li{
margin: 3% auto;
width: 45%;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
/*プラン写真*/
#product-renewal2022 #block03 .noppo-product .noppo-plan,
#product-renewal2022 #block03 .noppo-product .conoppo-plan{
margin: 10% auto;
width: 70%;
}

/*プラン間取り*/
#product-renewal2022 #block03 .noppo-product .noppo-floor,
#product-renewal2022 #block03 .noppo-product .conoppo-floor{width: 70%;}


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

#product-renewal2022 #block03 .noppo-product article .variation{width: 80%;}

/*一旦全部に下線を適用*/
#product-renewal2022 #block03 .yoko-layout ul::after{
width: 70%;
bottom: -2%;
}

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

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
/******カラーバリエーション*******/
#product-renewal2022 #block03 .noppo-product article h2{font-size: 17px;}
 /* ---------------------------------- */
}



/* ************************************************************
block04 spec
************************************************************ */
#product-renewal2022 #block04{
margin:5% auto 0;
width:100%;
}

/*タイトルバー　spec*/
#product-renewal2022 #block04 .spec-bar{
margin:0 auto;
width:100%;

display: flex;
justify-content: center;
align-items: stretch;
flex-flow: row nowrap;
position: relative;
}

/*商品名バー　一括指定*/
#product-renewal2022 #block04 .spec-bar p{
margin: auto;
width: 100%;
letter-spacing: 0.03em;
}

/*ここから個別指定*/
#product-renewal2022 #block04 .spec-bar p:nth-of-type(1){
width:20%;
padding: 40px 0px;
background: #ffe233;
position: relative;
}

#product-renewal2022 #block04 .spec-bar p:nth-of-type(2){
width:7%;
font-family: 'Bebas Neue', cursive;
font-size: 45px;
font-weight: 700;
letter-spacing: 0.05em;
}

#product-renewal2022 #block04 .spec-bar p:nth-of-type(3){
text-align: left;
width:63%;
padding: 20px 0 20px 20px ;
color: #2d2d27;
background:#ffe233;
font-size: 18px;
line-height: 1.5;
font-weight: 700;
position: relative;
}

#product-renewal2022 #block04 .spec-bar p:nth-of-type(3) span{
display: inline-block;
font-size: 12px;
line-height: 1.5;
}

/*それぞれの上下ボーダー　共通*/
#product-renewal2022 #block04 .spec-bar::before{
content:"";
display:block;
width:100%;
background:#ffe233;
position:absolute;
left:0;
}

#product-renewal2022 #block04 .spec-bar::after{
content:"";
display:block;
width:100%;
height:5px;
background:#ffe233;
position:absolute;
left:0;
}

/*線幅などの変更が必要な時は以下をレスポンシブ*/
#product-renewal2022 #block04 .spec-bar::before{
height:5px;
top:-8px;
}

#product-renewal2022 #block04 .spec-bar::after{
height:5px;
bottom:-8px;
}

/* *********** ******************************** */
@media screen and (max-width: 1400px) {
 /* ---------------------------------- */
/*ここから個別指定*/
#product-renewal2022 #block04 .spec-bar p:nth-of-type(1){width:15%;}

#product-renewal2022 #block04 .spec-bar p:nth-of-type(2){
width:20%;
font-size: 47px;
}

#product-renewal2022 #block04 .spec-bar p:nth-of-type(3){
font-size: 18px;
width:65%;
}

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

/* ******************************************* */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
/*ここから個別指定*/
#product-renewal2022 #block04 .spec-bar p:nth-of-type(2){font-size: 40px;}
#product-renewal2022 #block04 .spec-bar p:nth-of-type(3){font-size: 16px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */
#product-renewal2022 #block04 .spec-bar p:nth-of-type(1){padding: 48px 0px;}
#product-renewal2022 #block04 .spec-bar p:nth-of-type(2){font-size: 38px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
/*ここから個別指定*/
#product-renewal2022 #block04 .spec-bar p:nth-of-type(2){font-size: 35px;}
#product-renewal2022 #block04 .spec-bar p:nth-of-type(3){font-size: 16px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
#product-renewal2022 #block04 .spec-bar p:nth-of-type(1){width:10%;}

#product-renewal2022 #block04 .spec-bar p:nth-of-type(2){
width:20%;
font-size: 32px;
}

#product-renewal2022 #block04 .spec-bar p:nth-of-type(3){
padding: 20px 0 20px 10px ;
width:70%;
}

#product-renewal2022 #block04 .spec-bar p:nth-of-type(3) span{font-size: 10px;}

/*線幅などの変更が必要な時は以下をレスポンシブ*/
#product-renewal2022 #block04 .spec-bar::before{height:3px;}
#product-renewal2022 #block04 .spec-bar::after{height:3px;}

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

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
#product-renewal2022 #block04 .spec-bar p:nth-of-type(2){font-size: 30px;}
#product-renewal2022 #block04 .spec-bar p:nth-of-type(3) span{font-size: 10px;}

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

/* ******************************************* */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */
#product-renewal2022 #block04 .spec-bar p:nth-of-type(1){padding: 46px 0px;}
#product-renewal2022 #block04 .spec-bar p:nth-of-type(2){font-size: 26px;}
#product-renewal2022 #block04 .spec-bar p:nth-of-type(3){
font-size: 14px;
}
 /* ---------------------------------- */
}


/*仕様一覧*/
#product-renewal2022 #block04 .spec-list{
margin: 10% auto 5%;
width: 100%;
max-width: 900px;
text-align: justify;

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

#product-renewal2022 #block04 .spec-list::after{
content:"";
display:block;
width:100%;
height:7px;
background-color:#ffe233;
position:absolute;
bottom: -60px;
left:50%;
transform: translateX(-50%);
}

#product-renewal2022 #block04 .spec-list:last-of-type::after{display: none;}

#product-renewal2022 #block04 .spec-list article{
margin: 5% auto 10%;
width: 40%;
position: relative;
}

#product-renewal2022 #block04 .spec-list article h2{
margin: 0 auto;
width: 100%;
}

#product-renewal2022 #block04 .spec-list article h3{
text-align: left;
margin: 10px auto 30px;
width: 100%;
font-size: 20px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.03em;
position: relative;
}

#product-renewal2022 #block04 .spec-list article h3 span{font-size: 17px;}

#product-renewal2022 #block04 .spec-list article h3::after{
content:"";
display:block;
width:100%;
height:3px;
background-color:#ffe233;
position:absolute;
bottom: -15px;
left:0;
}


/*テキストなど*/
#product-renewal2022 #block04 .spec-text{
margin: 0 auto;
width: 100%;
line-height: 1.3;
font-size: 14px;
}

#product-renewal2022 #block04 .spec-detail{
margin: 10% 0 5%;
width: 100%;
padding: 2%;
font-size: 12px;
line-height: 1.2;
background: rgba(255,226,51,0.5);
}


/*シルエット*/
#product-renewal2022 #block04 .silhouette01{
width: 130px;
position: absolute;
top: -30px;
right: -50px;
}

#product-renewal2022 #block04 .silhouette02{
width: 130px;
position: absolute;
top: -30px;
right: -50px;
}

#product-renewal2022 #block04 .silhouette03{
width: 130px;
position: absolute;
top: -30px;
right: -50px;
}

#product-renewal2022 #block04 .silhouette04{
width: 80px;
position: absolute;
top: -30px;
right: -50px;
}

/* ******************************************* */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
#product-renewal2022 #block04 .spec-list{width: 90%;}
#product-renewal2022 #block04 .spec-list::after{width:90%;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */
#product-renewal2022 #block04 .spec-list{width: 80%;}
#product-renewal2022 #block04 .spec-list::after{bottom: -50px;}
#product-renewal2022 #block04 .spec-list article h3{
margin: 10px auto 20px;
font-size: 17px;
}

#product-renewal2022 #block04 .spec-list article h3::after{bottom: -10px;}
#product-renewal2022 #block04 .spec-list article h3 span{font-size: 14px;}
#product-renewal2022 #block04 .spec-list article .spec-text{font-size: 10px;}

/*シルエット*/
#product-renewal2022 #block04 .silhouette01{
width: 100px;
top: -10px;
right: -30px;
}

#product-renewal2022 #block04 .silhouette02{
width: 100px;
top: -30px;
right: -30px;
}

#product-renewal2022 #block04 .silhouette03{
width: 90px;
top: -30px;
right: -30px;
}

#product-renewal2022 #block04 .silhouette04{
width: 70px;
top: -30px;
right: -30px;
}


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

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
#product-renewal2022 #block04 .spec-list{margin: 15% auto 5%;}
#product-renewal2022 #block04 .spec-list article{margin: 10% auto;}

/*シルエット*/
#product-renewal2022 #block04 .silhouette01{
width: 80px;
right: -30px;
}

#product-renewal2022 #block04 .silhouette02{
width: 80px;
right: -30px;
}

#product-renewal2022 #block04 .silhouette03{
width: 70px;
right: -30px;
}

#product-renewal2022 #block04 .silhouette04{
width: 60px;
right: -30px;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
#product-renewal2022 #block04 .spec-list{
margin: 15% auto;
flex-flow: column wrap;
}

#product-renewal2022 #block04 .spec-list article{
margin: 5% auto 20%;
width: 85%;
}

#product-renewal2022 #block04 .spec-list article:last-of-type{margin-bottom: 5%;}

#product-renewal2022 #block04 .spec-list article h3{font-size: 20px;}
#product-renewal2022 #block04 .spec-list article:nth-of-type(1) h3 br,
#product-renewal2022 #block04 .spec-list article:nth-of-type(2) h3 br,
#product-renewal2022 #block04 .spec-list article:nth-of-type(3) h3 br{display: none;}
#product-renewal2022 #block04 .spec-list article h3::after{bottom: -10px;}
#product-renewal2022 #block04 .spec-list article h3 span{
padding-left: 5px;
font-size: 16px;
}
#product-renewal2022 #block04 .spec-list article .spec-text{font-size: 11px;}
#product-renewal2022 #block04 .spec-detail{font-size: 13px;}



/*シルエット*/
#product-renewal2022 #block04 .silhouette01{
width: 120px;
right: -25px;
}

#product-renewal2022 #block04 .silhouette02{
width: 120px;
right: -25px;
}

#product-renewal2022 #block04 .silhouette03{
width: 90px;
right: -25px;
}

#product-renewal2022 #block04 .silhouette04{
width: 75px;
right: -25px;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
#product-renewal2022 #block04 .spec-detail{font-size: 12px;}

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

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

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