@charset "utf-8";
html{
font-size: 100%;
color: #464646;
}
.fb-dermal img{
width: auto !important;
max-width: 100%;
height: auto;
}

a,
a:link{
text-decoration: none;
}
a:hover{
text-decoration: underline;
text-underline-offset: 6px;
}
.link-em{
color: #FF4C4C;
font-weight: bold;
}
.link-em a,
.link-em a:link{
color: #FF4C4C;
font-weight: bold;
text-decoration: underline;
text-underline-offset: 6px;
}

.sp-br{display: none;}

.line--block{display: block;}
em{font-weight: bold;}

.m--btm0{margin-bottom: 0px !important;}
.m--btm5{margin-bottom: 5px !important;}
.m--btm10{margin-bottom: 10px !important;}
.m--btm20{margin-bottom: 20px !important;}
.m--btm30{margin-bottom: 30px !important;}
.m--btm40{margin-bottom: 40px !important;}
.m--btm60{margin-bottom: 60px !important;}

main{
width: 100%;
margin: 0 auto;
padding: 0;
font-size: 16px;
line-height: 2;
}
section.fb-dermal{
max-width: 100%;
padding: 80px 16px;
background: url(../images/fibro/dermal/dermal-bg.webp) repeat-y;
background-size: contain;
}
section .contentWrap{
max-width: 1000px;
margin: 0 auto;
padding: 72px 0;
background: #fff;
}
.contentBox{
width: 90%;
max-width: 755px;
margin: 0 auto 60px;
}
.content{
max-width: 700px;
margin: 0 auto 60px;
}
.content:last-of-type{
margin-bottom: 0;
}

/* 見出し */
.fb-dermal h1,
.fb-dermal h2{
font-size: clamp(1.5rem, 1.368rem + 0.56vw, 1.875rem);
line-height: 1.5;
margin-bottom: 40px;
text-align: center;
}
.fb-dermal h3{
font-size: 20px;
line-height: 1.5;
}
.index{
font-weight: bold;
}
.deco--icon{
display: grid;
grid-template-columns: auto auto;
column-gap: 20px;
justify-content: center;
justify-items: start;
align-items: center;
}
.deco--icon::before{
content: "";
display: inline-block;
width: 37px;
height: 39px;
background: url(../images/fibro/dermal/renacell-greenicon.webp) no-repeat;
background-size: 100%;
}

.deco--grid{
display: grid;
grid-template-columns: auto auto auto;
column-gap: 8px;
justify-content: center;
justify-items: start;
align-items: center;
}

.deco--underline::after{
content: "";
display: block;
width: 100%;
height: 3px;
background: url(../images/fibro/bg_line.webp) no-repeat;
background-size: 100%;
}
.deco--underline--brown::after{
content: "";
display: block;
width: 100%;
height: 3px;
background: url(../images/fibro/bg_line02.webp) no-repeat;
background-size: 100%;
}
.deco--rcgreen{
color: #83CAB9;
}
.deco--rcbrown{
color: #AD5F00;
}
.deco--txt--center{
text-align: center;
}

.cmnt p{
margin-bottom: 8px;
}

.cmnt--num{
padding: 3px 7px;
margin-right: 8px;
background: #83CAB9;
border-radius: 100%;
font-weight: bold;
color: #fff;
}


.dermalImg.--normal{
margin: 0 auto;
text-align: center;
}
.dermalImg.--list{
display: grid;
grid-template-columns: auto auto;
column-gap: 60px;
justify-content: center;
align-items: center;
}
.dermalImg.--grid{
display: grid;
grid-template-columns: auto 81px auto;
column-gap: 24px;
justify-content: center;
align-items: center;
}


.supplementBox{
margin: 0 auto;
padding: 35px 32px;
border: 1px solid #D5AE7F;
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
}
.supplementBox h3{
margin-bottom: 20px;
font-size: 18px;
line-height: 1.5;
text-align: center;
}
.supplementBox.--bg--white{
background: #fff;
}
.supplementBox.--bg--brown{
background: #FFFCF7;
}

.--flow--outerframe{
border: solid 4px #D2B096;
}
.--flow--inlineframe{
margin: 14px;
padding: 60px 26px;
border: solid 2px #D2B096;
}
.flowBox li{
margin: 0 auto 24px;
position: relative;
}
.flowBox li:nth-child(1){
padding-bottom: 16px;
}
.flowBox li:nth-child(3),
.flowBox li:nth-child(4),
.flowBox li:nth-child(6){
margin-bottom: 16px;
}
.flowBox li:last-child{
margin-bottom: 0;
}
.flowBox li::after{
content: "";
display: block;
width: 28px;
height: 28px;
background: url(../images/fibro/dermal/icon_arrow.webp) no-repeat;
background-size: contain;
position: relative;
left: 100px;
}
.flowBox li:nth-child(1):after{
top: 16px;
}
.flowBox li:nth-child(3):after,
.flowBox li:nth-child(4):after,
.flowBox li:nth-child(6):after{
top: -16px;
}

.flowBox li:last-child::after{
display: none;
}
.flow--title{
display: grid;
grid-template-columns: auto auto;
column-gap: 16px;
justify-content: start;
justify-items: center;
align-items: center;
margin-bottom: 24px;
font-size: 24px;
font-weight: bold;
color: #B07C55;
line-height: 1.2;
}
.flow--title::before{
content: "";
display: inline-block;
width: 36px;
height: 36px;
}
.flow--title.--first::before{
background: url(../images/fibro/dermal/icon_counseling.webp) no-repeat;
background-size: contain;
}
.flow--title.--second::before{
background: url(../images/fibro/dermal/icon_collection.webp) no-repeat;
background-size: contain;
}
.flow--title.--third::before{
background: url(../images/fibro/dermal/icon_culture.webp) no-repeat;
background-size: contain;
}
.flow--title.--fourth::before{
background: url(../images/fibro/dermal/icon_treatment.webp) no-repeat;
background-size: contain;
}
.flow--title.--fifth::before{
background: url(../images/fibro/dermal/icon_afterfollow.webp) no-repeat;
background-size: contain;
}
.flow--title.--sixth::before{
background: url(../images/fibro/dermal/icon_addition.webp) no-repeat;
background-size: contain;
}
.under-line_brown{
display: inline !important;
background: linear-gradient(transparent 50%, #F8EEE7 30%);
}

.flow--grid{
display: grid;
grid-template-columns: auto auto;
column-gap: 0px;
}

.recommend--wrap{
margin: 24px auto;
padding: 24px 16px 16px;
border: 1px dashed #B07C55;
border-radius: 5px;
position: relative;
}
.recommend--mark{
width: 97px;
height: 30px;
background: #B07C55;
border-radius: 100px;
text-align: center;
font-size: 18px;
line-height: 1;
font-weight: bold;
color: #fff;
display: grid;
grid-template-columns: auto auto;
column-gap: 11px;
justify-content: center;
align-items: center;
position: absolute;
left: 16px;
top: -16px;
}
.recommend--mark::before{
content: "";
display: inline-block;
width: 12px;
height: 12px;
background: #fff;
border-radius: 100px;
}
.arrow--supplement{
display: inline-block;
color: #B07C55;
font-weight: bold;
position: relative;
left: 140px;
top: 10px;
}

.detailsBox{
max-width: 755px;
font-size: 14px;
line-height: 1.5;
}
.detailsBox tbody tr th,
.detailsBox tbody tr td{
border: 2px solid #fff;
font-size: 14px;
}
.detailsBox tbody tr th{
width: 200px;
background: #F2E6D8;
text-align: center;
}
.detailsBox tbody tr td{
padding: 16px 20px;
background: #FFFCF7;
text-align: left;
font-weight: normal;
}

.deco--list li{
display: grid;
grid-template-columns: 8px auto;
gap: 8px;
justify-content: start;
align-items: start;
}
.deco--list li::before{
content: "";
display: inline-block;
width: 8px;
height: 8px;
border: 1px solid #2f2f2f;
border-radius: 100px;
background: #EDEDED;
}
.supplement--list.deco--list li{
margin-bottom: 10px;
}
.supplement--list.deco--list li:last-child{
margin-bottom: 0;
}
.supplement--list.deco--list li::before{
margin-top: 10px;
}
.detailsBox--list.deco--list li{
margin-bottom: 4px;
}
.detailsBox--list.deco--list li:last-child{
margin-bottom: 0;
}
.detailsBox--list.deco--list li::before{
margin-top: 5px;
}

@media screen and (min-width:769px) and (max-width:899px){
.flow--grid{
display: grid;
grid-template-columns: none;
grid-template-rows: auto auto;
row-gap: 20px;
justify-items: center;
}
}
@media screen and (min-width:431px) and (max-width:768px){
.cmnt--num{
padding: 6px 7px;
}
.flow--grid{
display: grid;
grid-template-columns: none;
grid-template-rows: auto auto;
row-gap: 20px;
justify-items: center;
}
.detailsBox{
width: 100%;
font-size: 14px;
line-height: 1.5;
}
.detailsBox tbody tr{
display: grid;
grid-template-rows: auto auto;
row-gap: 2px;
}
.detailsBox tbody tr th,
.detailsBox tbody tr td{
width: auto;
padding: 16px 20px;
}
}

@media screen and (max-width:430px){
.pc-br{display: none;}
.sp-br{display: block;}
.m--btm40,.m--btm60{margin-bottom: 40px !important;}

.cmnt--num{
padding: 6px 7px;
}

section.fb-dermal{
margin: 0 auto;
padding: 48px 16px !important;
}
section .contentWrap{
margin: 0 auto;
padding: 30px 0;
}
.contentBox{
margin: 0 auto 40px;
padding: 0 16px;
}
.contentBox.--skinmechanismaging{
margin: 0 auto;
}
.content{
width: 100%;
margin-bottom: 30px;
}
.content:last-of-type{
margin-bottom: 0;
}
.fb-dermal h1{
font-size: 26px;
}
.fb-dermal h2{
font-size: 22px;
}
.fb-dermal h3{
font-size: 18px;
}

.deco--icon{
display: grid;
grid-template-columns: none;
grid-template-rows: auto auto;
column-gap: 20px;
justify-content: center;
justify-items: center;
align-items: center;
margin: 0 auto 24px;
}

.flowBox li{
padding-bottom: 24px;
}
.flowBox li:nth-child(3),
.flowBox li:nth-child(4),
.flowBox li:nth-child(6){
padding: 0 !important;
}
.flowBox li::after{
left: calc(50% - 28px);
top: 24px;
}
.flowBox li:last-child{
margin-bottom: 0px;
padding-bottom: 0px;
}

.--flow .supplementBox h3 {
font-size: 16px;
}
.--flow .supplementBox h3 .line--block{
margin-bottom: 5px;
}
.--flow .supplementBox h3 .font--small{
font-size: 14px;
}

.detailsBox{
width: 100%;
font-size: 14px;
line-height: 1.5;
}
.detailsBox tbody tr{
display: grid;
grid-template-rows: auto auto;
row-gap: 2px;
}
.detailsBox tbody tr th,
.detailsBox tbody tr td{
width: auto;
padding: 16px 20px;
}

.recommend--mark{
font-size: 16px;
}
.--flow--inlineframe{
margin: 6px;
padding: 32px 10px;
border: solid 2px #D2B096;
}
.flow--grid{
display: grid;
grid-template-columns: none;
grid-template-rows: auto auto;
row-gap: 0px;
justify-items: center;
}
.flow--title{
font-size: 20px;
line-height: 1.5;
}
.flow--title::before{
width: 30px;
height: 30px;
}

.flowBox li.--arrow--supplement--on::after{
content: "";
display: block;
width: 28px;
height: 28px;
background: url(../images/fibro/dermal/icon_arrow.webp) no-repeat;
background-size: contain;
position: relative;
left: 50px;
}
.arrow--supplement{
display: inline-block;
left: 80px;
top: 12px;
}

.recommend--wrap{
margin: 40px auto 0;
}

}