@charset "utf-8";

@import
"../../common/css/sass/config"
;
.mod_main {
margin-top: 1.1rem;
@include sc(sp) {
margin-top: 33px;
}
}
.productArea {
padding: 1.2rem 0;
@include sc(sp) {
padding: .5rem 0;
}
.tabs {
display: flex;
justify-content: center;
margin-bottom: .7rem;
@include sc(sp) {
margin-bottom: .4rem;
}
.tab-link {
background: #e8e7e5;
cursor: pointer;
line-height: .5rem;
max-width: 2.6rem;
text-align: center;
width: 100%;
@include sc(sp) {
max-width: 1.62rem;
}
+ .tab-link {
margin-left: .1rem;
}
h3 {
font-size: .18rem;
letter-spacing: .05em;
@include sc(sp) {
font-size: .13rem;
}
}
}
.tab-link.current {
background: #2cb3b3;
color: #fff;
}
}
.tab-content {
display: none;
h2 {
font-size: .24rem;
letter-spacing: .1em;
line-height: 1;
margin-bottom: 44px;
text-align: center;
@include sc(sp) {
font-size: .15rem;
margin-bottom: .3rem;
}
}
.list {
display: flex;
flex-wrap: wrap;
@include sc(sp) {
margin-left: .05rem;
}
.item {
background: #f0efed;
box-sizing: border-box;
padding: .1rem;
width: 2.25rem;
@include sc(sp) {
padding: .1rem .05rem;
position: relative;
width: 31.7%;
}
@media screen and (max-width: 350px) {
width: .88rem;
}
+ .item {
margin: .2rem 0 0 .2rem;
@include sc(sp) {
margin: .05rem 0 0 .05rem;
}
}
&:nth-child(2), &:nth-child(3), &:nth-child(4) {
@include sc(pc) {
margin: 0 0 0 .2rem;
}
}
&:nth-child(5) {
@include sc(pc) {
margin: .2rem 0 0 0;
}
}
&:nth-child(2), &:nth-child(3) {
@include sc(sp) {
margin: 0 0 0 .05rem;
}
}
&:nth-child(4), &:nth-child(7) {
@include sc(sp) {
margin: .05rem 0 0 0;
}
}
a {
align-items: center;
display: flex;
}
.ph {
img {
@media screen and (max-width: 1366px) {
height: .6rem;
width: auto;
}
@include sc(sp) {
height: .3rem;
width: auto;
}
}
}
.cap {
font-size: .18rem;
font-weight: bold;
line-height: 1.6;
letter-spacing: .03em;
text-align: center;
width: calc(100% - 60px);
@media screen and (max-width: 1366px) {
font-size: .17rem;
letter-spacing: 0;
width: calc(100% - .6rem);
}
@include sc(sp) {
font-size: .12rem;
line-height: 1.2;
letter-spacing: -1px;
margin-top: 0;
width: calc(100% - .3rem);
}
@media screen and (max-width: 350px) {
font-size: .08rem;
}
}
}
.item.active {
background: #2cb3b3;
color: #fff;
}
}
}
.tab-content.current {
display: inherit;
}
}
.productArea-bottom {
padding: .3rem 0 .5rem;
@include sc(sp) {
padding: .2rem 0 .3rem;
}
}
.detailArea {
.detail01 {
padding: 1.2rem 0 .8rem;
@include sc(sp) {
padding: .5rem 0;
}
.line {
background: #000;
&:before, &:after {
background: #000;
}
}
.title {
font-size: .36rem;
letter-spacing: .1em;
line-height: 1;
margin: .25rem 0 .28rem;
padding: 0;
text-align: center;
@include sc(sp) {
font-size: .21rem;
letter-spacing: .05em;
margin: .11rem 0 .10rem;
line-height: 1.523;
}
}
.box {
margin-top: .64rem;
@include sc(sp) {
margin-top: .3rem;
}
.l-left {
letter-spacing: .1em;
width: 5.96rem;
@include sc(pc) {
float: left;
}
@include sc(sp) {
width: 100%;
}
.tit {
font-size: .24rem;
line-height: 1.5;
@include sc(sp) {
font-size: .15rem;
line-height: 1.6667;
}
}
.txt {
font-size: .17rem;
line-height: 1.764;
margin-top: .28rem;
text-align: justify;
@include sc(sp) {
font-size: .13rem;
line-height: 1.538;
margin-top: .2rem;
}
}
}
.l-right {
float: right;
position: relative;
@include sc(sp) {
float: none;
margin-top: .3rem;
}
.ph {
height: 3.2rem;
width: 5.7rem;
@include sc(sp) {
height: 1.88rem;
width: 100%;
}
}
.cap {
background: url(//renovation-r.co.jp/s_css/img/product/com_ic01.png);
background-size: cover;
height: 1.45rem;
width: 1.45rem;
position: absolute;
top: -.27rem;
right: -.17rem;
font-size: .23rem;
line-height: 1.3;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #09a4c3;
font-weight: bold;
@include sc(sp) {
font-size: .15rem;
height: .9rem;
width: .9rem;
top: -.18rem;
right: -.1rem;
}
}
}
.mod-btn {
margin-top: .45rem;
width: 2.57rem;
@include sc(sp) {
margin: .25rem auto 0;
width: 100%;
}
}
&:after {
content: '';
clear: both;
display: block;
}
}
}
.detail02 {
padding: .75rem 0;
@include sc(sp) {
padding: .45rem 0;
}
.line {
background: #e8e7e5;
margin: .3rem 0 .45rem;
@include sc(sp) {
margin: .17rem 0 .2rem;
}
&:before, &:after {
background: #e8e7e5;
}
}
.title {
font-size: .36rem;
letter-spacing: .1em;
line-height: 1;
padding: 0;
text-align: center;
margin-top: 0;
@include sc(sp) {
font-size: .21rem;
letter-spacing: .05em;
}
}
.txt {
font-size: .17rem;
letter-spacing: .1em;
line-height: 1.764;
@include sc(sp) {
font-size: .13rem;
line-height: 1.538;
}
}
.example {
border: 3px solid #f2f2f2;
margin-top: .35rem;
padding: .4rem .37rem .6rem;
@include sc(sp) {
margin-top: .25rem;
border: 2px solid #f2f2f2;
padding: .25rem .15rem;
}
.tit {
font-size: .28rem;
line-height: 1;
letter-spacing: .1em;
color: #ee0327;
text-align: center;
@include sc(sp) {
font-size: .17rem;
line-height: 1.47;
letter-spacing: .03em;
}
}
.list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: .45rem;
@include sc(sp) {
margin-top: .2rem;
flex-direction: column;
}
.item {
@include sc(pc) {
width: 48.673%;
}
+ .item {
margin-top: .6rem;
@include sc(sp) {
margin-top: .4rem;
}
}
&:nth-child(2) {
@include sc(pc) {
margin-top: 0;
}
}
.number {
@include font_Aktiv_Bold;
background: url(//renovation-r.co.jp/s_css/img/product/example_tit_bg.jpg);
background-size: cover;
font-size: .28rem;
line-height: .5rem;
letter-spacing: .05em;
color: #fff;
text-transform: uppercase;
text-align: center;
@include sc(sp) {
font-size: .15rem;
line-height: .25rem;
}
}
h4 {
font-size: .24rem;
line-height: 1;
letter-spacing: .1em;
margin: .38rem 0 .25rem;
@include sc(sp) {
font-size: .16rem;
line-height: 1.3125;
margin: .17rem 0 .15rem;
letter-spacing: .02em;
text-align: center;
}
}
.box {
@include sc(pc) {
display: flex;
}
.ph {
max-width: 2.31rem;
margin-right: .2rem;
@include sc(sp) {
max-width: 1.47rem;
margin: 0 auto;
}
img {
width: 100%;
height: auto;
}
}
.txt {
max-width: calc(100% - 2.51rem);
@include sc(sp) {
max-width: 100%;
margin-top: .2rem;
}
}
}
}
}
}
}
.detail03 {
padding: .75rem 0;
@include sc(sp) {
padding: .45rem 0;
}
.line {
background: #e8e7e5;
&:before, &:after {
background: #e8e7e5;
}
}
.title {
font-size: .36rem;
letter-spacing: .1em;
line-height: 1;
margin: .25rem 0 .28rem;
padding: 0;
text-align: center;
@include sc(sp) {
font-size: .21rem;
letter-spacing: .05em;
margin: 0 0 .16rem;
line-height: 1.23;
}
}
.box {
margin: .64rem 0 .9rem;
@include sc(sp) {
margin: .2rem 0 .55rem;
}
.l-left {
letter-spacing: .1em;
width: 5.96rem;
@include sc(pc) {
float: left;
}
@include sc(sp) {
width: 100%;
}
.tit {
font-size: .24rem;
line-height: 1.5;
@include sc(sp) {
font-size: .15rem;
line-height: 1.6667;
}
}
.txt {
font-size: .17rem;
line-height: 1.764;
margin-top: .28rem;
text-align: justify;
@include sc(sp) {
font-size: .13rem;
line-height: 1.538;
margin-top: .1rem;
}
}
.list {
display: flex;
margin-top: .4rem;
@include sc(sp) {
margin-top: .25rem;
}
li {
width: 1.1rem;
@include sc(sp) {
width: 37%;
}
img {
height: auto;
width: 100%;
}
+ li {
margin-left: .15rem;
@include sc(sp) {
margin-left: .1rem;
}
}
&:last-child {
margin-left: .23rem;
width: 2.1rem;
@include sc(sp) {
margin-left: .15rem;
}
}
p {
font-size: .19rem;
line-height: 1.4;
letter-spacing: .1em;
font-weight: bold;
background: #2cb3b3;
color: #fff;
text-align: center;
border-radius: .1rem;
padding: .165rem 0;
position: relative;
@include sc(sp) {
font-size: .11rem;
line-height: 1.36;
padding: .11rem 0;
letter-spacing: 0;
}
&:after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -.1rem;
width: 0;
height: 0;
border-top: .08rem solid transparent;
border-bottom: .08rem solid transparent;
border-right: .13rem solid #2cb3b3;
@include sc(sp) {
left: -.08rem;
border-top: .05rem solid transparent;
border-bottom: .05rem solid transparent;
border-right: .08rem solid #2cb3b3;
}
}
}
}
}
}
.l-right {
float: right;
position: relative;
@include sc(sp) {
float: none;
margin-top: .3rem;
}
.ph {
height: 3.2rem;
width: 5.7rem;
@include sc(sp) {
height: 1.87rem;
width: 100%;
}
}
}
&:after {
content: '';
clear: both;
display: block;
}
}
.text {
font-size: .17rem;
letter-spacing: 1.764;
margin-top: .5rem;
letter-spacing: .1em;
@include sc(sp) {
margin-top: .2rem;
font-size: .13rem;
line-height: 1.538;
}
}
.tbl {
max-width: 9.4rem;
width: 100%;
margin: .4rem auto .5rem;
text-align: center;
font-size: .17rem;
line-height: 1.764;
letter-spacing: .05em;
@include sc(sp) {
overflow-x: scroll;
overflow-y: hidden;
font-size: .12rem;
line-height: 1.416;
margin: .24rem 0 .12rem;
}
.tbl_min {
@include sc(sp) {
min-width: 5.05rem;
margin-bottom: .17rem;
}
}
.row {
display: flex;
justify-content: space-between;
border-top: 1px solid #e6e6e6;
&:last-child {
border-bottom: 1px solid #e6e6e6;
p {
&:nth-child(2) strong {
color: #2cb3b3;
}
&:nth-child(3) strong {
color: #ee0327;
}
}
}
h3 {
font-size: .17rem;
line-height: .59rem;
@include sc(sp) {
line-height: .35rem;
font-size: .12rem;
}
&:nth-child(1) {
width: 2.45rem;
background: #f6f6f6;
@include sc(sp) {
width: 1rem;
}
}
&:nth-child(2) {
background: #2cb3b3;
width: 3.44rem;
color: #fff;
@include sc(sp) {
width: 2rem;
}
}
&:nth-child(3) {
background: #999999;
width: 3.44rem;
color: #fff;
@include sc(sp) {
width: 2rem;
}
}
}
p {
padding: .26rem 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
@include sc(sp) {
padding: .15rem 0;
}
&:nth-child(1) {
background: #f9f9f9;
width: 2.45rem;
@include sc(sp) {
width: 1rem;
}
}
&:nth-child(2) {
background: #e7f8f8;
width: 3.44rem;
@include sc(sp) {
width: 2rem;
}
}
&:nth-child(3) {
background: #f6f6f6;
width: 3.44rem;
@include sc(sp) {
width: 2rem;
}
}
span {
font-size: .3rem;
line-height: 1;
@include sc(sp) {
font-size: .2rem;
}
}
}
}
} ::-webkit-scrollbar {
width: .08rem;
height: .08rem;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 10px #e7e7e7;
margin-top: 20px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #232323;
box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.comment {
font-size: .11rem;
letter-spacing: .1em;
line-height: 1;
}
.mod-btn {
width: 9.4rem;
margin: 0 auto;
line-height: .6rem;
@include sc(sp) {
width: 100%;
margin: .25rem auto 0;
line-height: 1.6667;
}
.point {
background: #2cb3b3;
font-size: .17rem;
letter-spacing: .1em;
display: block;
font-weight: bold;
position: relative;
color: #FFF;
@include sc(sp) {
font-size: .12rem;
padding: .14rem 0;
}
.sub_point {
font-size: .24rem;
line-height: 1;
@include sc(sp) {
font-size: .18rem;
line-height: 1.11;
}
}
}
}
}
}
.specialArea {
padding: .5rem 0 .55rem;
@include sc(sp) {
padding: .4rem 0;
}
.title {
font-size: .36rem;
letter-spacing: .1em;
line-height: 1;
padding: 0;
margin-top: 0;
text-align: center;
@include sc(sp) {
font-size: .21rem;
line-height: 1.523;
letter-spacing: .05em;
}
}
.ph {
width: 3.8rem;
height: 1.37rem;
margin: .4rem auto 0;
position: relative;
box-sizing: border-box;
border: 3px solid #86b990;
@include sc(sp) {
width: 100%;
height: 1.22rem;
margin-top: .3rem;
border: 2px solid #86b990;
}
a {
display: block;
width: 100%;
height: 100%;
}
.btn {
bottom: .28rem;
color: #fff;
font-size: .16rem;
font-weight: bold;
line-height: .27rem;
left: .42rem;
position: absolute;
text-align: center;
width: 1.45rem;
background: #86b990;
@include sc(sp) {
bottom: .21rem;
font-size: .122rem;
line-height: .21rem;
letter-spacing: 0;
left: .325rem;
width: 1.13rem;
}
&:after {
border-left: .07rem solid transparent;
bottom: -0.07rem;
content: "";
height: 0;
left: 0;
position: absolute;
width: 0;
border-top: .07rem solid #86b990;
@include sc(sp) {
border-top: .06rem solid #86b990;
border-left: .06rem solid transparent;
bottom: -0.06rem;
}
}
&:before {
border-right: .07rem solid transparent;
content: "";
height: 0;
position: absolute;
right: 0;
top: -0.07rem;
width: 0;
border-bottom: .07rem solid #86b990;
@include sc(sp) {
border-bottom: .06rem solid #86b990;
border-right: .06rem solid transparent;
top: -0.06rem;
}
}
}
}
}
.contactArea {
padding: 1.45rem 0 .7rem;
@include sc(sp) {
padding: .45rem 0;
}
.info {
.title {
font-size: .36rem;
letter-spacing: .1em;
line-height: 1;
padding: 0;
margin-top: 0;
text-align: center;
@include sc(sp) {
font-size: .21rem;
letter-spacing: .05em;
line-height: 1.523;
}
}
.line {
background: #e8e7e5;
margin: .27rem 0 .5rem;
@include sc(sp) {
margin: .16rem 0 .22rem;
}
&:before, &:after {
background: #e8e7e5;
}
}
.wrap {
display: flex;
justify-content: space-between;
justify-content: center; @include sc(sp) {
flex-direction: column;
}
.item {
background: #2cb3b3;
max-width: 3.77rem;
width: 100%;
color: #fff;
position: relative;
margin: 0 .20rem; @include sc(sp) {
margin: 0; }
&:before {
content: '';
position: absolute;
top: 50%;
left: .47rem;
transform: translateY(-50%);
@include sc(sp) {
left: .27rem;
}
}
+ .item {
@include sc(sp) {
margin-top: .25rem;
}
}
a {
font-size: .18rem;
font-weight: bold;
line-height: 1.667;
text-align: center;
display: block;
box-sizing: border-box;
padding: .15rem .15rem .15rem 1.03rem;
letter-spacing: .05em;
@media screen and (max-width: 1024px) {
font-size: .17rem;
}
@include sc(sp) {
font-size: .16rem;
line-height: 1.625;
letter-spacing: 0;
padding: .12rem .17rem .12rem .77rem;
}
@media screen and (max-width: 350px) {
font-size: .13rem;
padding: .12rem .18rem .12rem .68rem;
}
}
}
.item.com_bt01 {
&:before {
background: url(//renovation-r.co.jp/s_css/img/product/com_bt01.png);
background-size: cover;
height: .45rem;
width: .43rem;
@include sc(sp) {
height: .4rem;
width: .38rem;
}
}
}
.item.com_bt02 {
&:before {
background: url(//renovation-r.co.jp/s_css/img/product/com_bt02.png);
background-size: cover;
height: .5rem;
width: .54rem;
@include sc(sp) {
height: .44rem;
width: .48rem;
}
}
}
.item.com_bt03 {
&:before {
background: url(//renovation-r.co.jp/s_css/img/product/com_bt03.png);
background-size: cover;
height: .5rem;
width: .39rem;
@include sc(sp) {
height: .45rem;
width: .34rem;
}
}
}
}
}
.contact {
box-sizing: border-box;
border: .04rem solid #f2f2f2;
padding: .33rem .45rem .42rem;
text-align: center;
margin-top: .5rem;
background-color: #FFF;
@include sc(sp) {
border: .02rem solid #f2f2f2;
margin-top: .25rem;
padding: .25rem .13rem .27rem;
}
.title {
font-size: .24rem;
line-height: 1.5;
letter-spacing: .05em;
margin: 0;
padding: 0;
@include sc(sp) {
font-size: .15rem;
line-height: 1.6666;
letter-spacing: 0;
}
@media screen and (max-width: 360px) {
font-size: .12rem;
}
}
.box {
align-items: center;
display: flex;
justify-content: center;
margin: .33rem 0 0;
@include sc(sp) {
flex-wrap: wrap;
justify-content: space-between;
margin: .26rem 0 0;
}
.box_item {
background: #999;
color: #fff;
font-size: .18rem;
font-weight: bold;
height: .5rem;
line-height: .5rem;
letter-spacing: .05em;
width: 2.2rem;
@include sc(sp) {
font-size: .13rem;
width: 49%;
}
a {
display: block;
}
+ .box_item {
@include sc(pc) {
margin-left: .1rem;
}
}
&:first-child {
@include sc(pc) {
width: 2.7rem;
}
@include sc(sp) {
line-height: 1.5;
}
a {
@include sc(sp) {
margin-top: .05rem;
}
}
}
}
.box_tel {
margin-left: .24rem;
@include sc(sp) {
margin: .2rem 0 0;
width: 100%;
}
p {
font-weight: bold;
font-size: .14rem;
line-height: 1;
letter-spacing: .05em;
@include sc(sp) {
font-size: .12rem;
}
}
.tel {
@include font_Futura_Bold;
font-size: .5rem;
@include sc(sp) {
cursor: pointer;
font-size: .3rem;
margin-top: .1rem;
}
& a:hover {
opacity: 1;
}
}
}
}
}
}
.contentsArea {
background: #f7f6f5;
&:after  {
background: #f0efed;
}
.mod_w1210 {
position: relative;
z-index: 2;
}
.subtitle {
padding: 0;
text-align: center;
@include sc(pc) {
font-size: .4rem;
}
&:after {
display: none;
}
}
.title {
padding: 0;
text-align: center;
@include sc(pc) {
letter-spacing: .15em;
}
}
}
.bottom_menu_nav {
.menu_nav_list {
flex: 1;
padding: .3rem 0 .06rem;
@include sc(sp) {
padding: .2rem 0;
}
ul {
border: 1px solid #f2f2f2;
display: flex;
padding: .3rem .48rem .3rem .37rem;
flex-wrap: wrap;
background-color: #FFF;
@include sc(sp) {
flex-direction: column;
padding: .2rem;
}
li {
width: 25%;
@include sc(sp) {
width: 100%;
}
+ li {
@include sc(sp) {
margin-top: .05rem;
}
}
span {
display: inline-block;
font-size: .17rem;
line-height: 1.764;
@include sc(sp) {
font-size: .14rem;
line-height: 1.5;
padding: .08rem 0;
}
}
&.active a {
color: #48c0c0;
text-decoration: underline;
}
}
}
.sub_title {
p {
font-size: .20rem;
font-weight: bold;
margin-bottom: .08rem;
letter-spacing: .01rem;
@include sc(sp) {
font-size: .16rem;
}
}
}
}
}
.makerArea .detail01 {
.list {
display: flex;
margin: .54rem auto 0;
flex-wrap: wrap;
justify-content: left;
@include sc(sp) {
max-width: none;
margin-top: .3rem;
}
.item {
padding-right: .1rem;
padding-top: .1rem;
@include sc(sp) {
width: 50%;
box-sizing: border-box;
padding-right: .05rem;
}
&:nth-child(4n) {
padding-right: 0;
}
&:nth-child(2n) {
@include sc(sp) {
padding-right: 0;
padding-left: .05rem;
}
}
&:nth-child(1),
&:nth-child(2),
&:nth-child(3),
&:nth-child(4) {
padding-top: 0;
}
&:nth-child(3),
&:nth-child(4) {
@include sc(sp) {
padding-top: .1rem;
}
}
}
.img	{
width: 100%;
max-width: 2.95rem;
height: auto;
@include sc(sp) {
max-width: none;
}
}
}
}
.productArea .mod_w960 {
padding: 0 .1rem !important;
}
.detailArea .detail01,
.detailArea .detail02,
.detailArea .detail03,
.contactArea,
.productArea-bottom {
background-size: contain;
background-repeat: repeat;
}