line_03.scss
#page_line-contact {
max-width: 770px;
margin: 4% auto 0;
overflow-x: hidden;
a {
display: block;
}
.line-contact-btn {
max-width: 450px;
margin: 0 auto;
@media screen and (max-width: 767px) {
max-width: 300px;
width: 80%;
}
}
h3 {
@media screen and (max-width: 767px) {
max-width: 300px;
margin: 0 auto;
width: 80%;
min-width: 200px;
}
}
.display_sp {
display: none;
@media screen and (max-width: 767px) {
display: block;
}
}
.line-btn {
a {
max-width: 450px;
width: 100%;
margin: 0 auto;
@media screen and (max-width: 767px) {
width: 90%;
}
}
}
.width-730 {
max-width: 770px;
box-sizing: border-box;
margin: 0 auto;
padding: 0 20px;
@media screen and (max-width: 1024px) {
padding: 0 2%;
}
@media screen and (max-width: 767px) {
padding: 0 4%;
}
}
img {
display: block;
margin: 0 auto;
}
.display-sp {
display: none;
@media screen and (max-width: 767px) {
display: block;
}
}
.section001 {
>h2 {
aspect-ratio: 770/400;
@media screen and (max-width: 767px) {
aspect-ratio: 750/400;
}
}
}
.section002 {
padding: 50px 0;
@media screen and (max-width: 1024px) {
padding: 5% 0;
}
}
.section004 {
padding: 50px 0 0;
@media screen and (max-width: 1024px) {
padding: 5% 0 0;
}
&__inner {
p {
margin: 0 auto 20px;
font-size: 1.8rem;
line-height: 2em;
max-width: 650px;
@media screen and (max-width: 1024px) {
margin: 0 auto 2%;
max-width: 540px;
font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
font-size: 1.4rem;
text-align: center;
}
@media screen and (max-width: 540px) {
font-size: 1.3rem;
}
}
&--ttl {
text-align: center;
font-size: 2.8rem;
font-weight: bold;
margin: 0 0 30px;
width: 100%;
line-height: 1.8em;
@media screen and (max-width: 1024px) {
margin: 0 auto 3%;
}
@media screen and (max-width: 767px) {
line-height: 1.4em;
font-size: 2rem;
}
strong {
color: #04B703;
}
}
}
}
.section006 {
margin-top: 50px;
background-color: #eee;
width: 100%;
max-width: 770px;
height: auto;
@media screen and (max-width: 1024px) {
margin-top: 5%;
}
&__inner {
padding: 50px;
@media screen and (max-width: 1024px) {
padding: 5%;
}
.bottom {
padding-bottom: 50px;
@media screen and (max-width: 1024px) {
padding-bottom: 5%;
}
}
div {
margin: 0 0 20px;
@media screen and (max-width: 1024px) {
margin: 0 0 2%;
}
&:last-of-type {
margin: 0;
}
}
h3 {
text-align: center;
font-size: 2.8rem;
font-weight: bold;
margin: 0 0 30px;
width: 100%;
line-height: 1.8em;
max-width: none;
@media screen and (max-width: 1024px) {
margin: 0 auto 3%;
}
@media screen and (max-width: 767px) {
line-height: 1.4em;
font-size: 2rem;
}
}
}
}
.section007 {
&__inner {
.sec007-ttl {
padding: 50px;
box-sizing: border-box;
@media screen and (max-width: 1024px) {
padding: 5%;
}
}
.bottom {
padding-bottom: 50px;
@media screen and (max-width: 1024px) {
padding-bottom: 5%;
}
}
h3 {
text-align: center;
font-size: 2.8rem;
font-weight: bold;
margin: 60px 0 30px;
width: 100%;
line-height: 1.8em;
max-width: none;
@media screen and (max-width: 1024px) {
margin: 6% auto 3%;
}
@media screen and (max-width: 767px) {
line-height: 1.4em;
font-size: 2rem;
}
}
}
}
.section009 {
margin-top: 50px;
background-color: #eee;
width: 100%;
max-width: 770px;
height: auto;
@media screen and (max-width: 1024px) {
margin-top: 5%;
}
&__inner {
margin-bottom: 50px;
padding: 50px;
@media screen and (max-width: 1024px) {
margin-bottom: 5%;
padding: 5%;
}
.bottom {
padding-bottom: 50px;
@media screen and (max-width: 1024px) {
padding-bottom: 5%;
}
}
div {
margin: 0 0 20px;
@media screen and (max-width: 1024px) {
margin: 0 0 2%;
}
&:last-of-type {
margin: 0;
}
}
h3 {
text-align: center;
font-size: 2.8rem;
font-weight: bold;
margin: 0 0 30px;
width: 100%;
line-height: 1.8em;
max-width: none;
@media screen and (max-width: 1024px) {
margin: 0 auto 3%;
}
@media screen and (max-width: 767px) {
line-height: 1.4em;
font-size: 2rem;
}
strong {
font-size: 3.8rem;
color: #01BA07;
margin: 0 0.4%;
@media screen and (max-width: 767px) {
font-size: 3.8rem;
}
}
}
}
}
.section010 {
&__inner {
.bottom {
padding-bottom: 50px !important;
@media screen and (max-width: 1024px) {
padding-bottom: 5% !important;
}
}
}
}
}
// setting.scss
#page_line-contact {
/*a_span_img_overflow-hidden setting start*/
overflow: hidden;
width: 100%;
max-width: 770px;
margin: 4% auto 0;
strong {
color: #305ea3;
}
a {
&:hover {
opacity: 0.6;
transition: opacity 0.3s ease;
}
}
img {
margin: 0 auto;
display: block;
}
/*txt setting start*/
p {
/*all_font_size*/
font-size: 1.8rem;
letter-spacing: 0.1em;
line-height: 1.4em;
color: #222;
@media screen and (max-width: 770px) {
font-size: 1.4rem;
line-height: 1.4em;
}
}
h3,
h4 {
font-size: 2.4rem;
letter-spacing: 0.1em;
line-height: 1.6em;
color: #000000;
@media screen and (max-width: 770px) {
font-size: 1.4rem;
}
}
.txt-f30 {
font-size: 3rem;
@media screen and (max-width: 770px) {
font-size: 1.8rem;
}
@media screen and (max-width: 480px) {
font-size: 1.6rem;
}
}
.txt-f26 {
font-size: 2.6rem;
@media screen and (max-width: 770px) {
font-size: 1.6rem;
}
@media screen and (max-width: 480px) {
font-size: 1.4rem;
}
}
.txt-f24 {
font-size: 2.4rem;
@media screen and (max-width: 770px) {
font-size: 1.6rem;
}
@media screen and (max-width: 480px) {
font-size: 1.4rem;
}
}
.txt-f22 {
font-size: 2.2rem;
@media screen and (max-width: 770px) {
font-size: 1.6rem;
}
@media screen and (max-width: 480px) {
font-size: 1.4rem;
}
@media screen and (max-width: 360px) {
font-size: 1.2rem;
}
}
.txt-f20 {
font-size: 2rem;
@media screen and (max-width: 770px) {
font-size: 1.8rem;
}
@media screen and (max-width: 480px) {
font-size: 1.6rem;
}
}
.txt-f18 {
font-size: 1.8rem;
@media screen and (max-width: 770px) {
font-size: 1.6rem;
}
@media screen and (max-width: 480px) {
font-size: 1.4rem;
}
}
.txt-f16 {
font-size: 1.6rem;
@media screen and (max-width: 770px) {
font-size: 1.4rem;
}
}
.txt-f14 {
font-size: 1.4rem;
@media screen and (max-width: 770px) {
font-size: 1.2rem;
}
}
.txt-right {
text-align: right;
}
.txt-left {
text-align: left;
}
.txt-center {
text-align: center;
}
.txt-bold {
font-weight: bold;
}
.txt-500 {
font-weight: 500;
}
/*switch setting start*/
.display-sp {
display: none;
@media screen and (max-width: 770px) {
display: block;
}
}
.display-pc {
display: block;
@media screen and (max-width: 770px) {
display: none;
}
}
.display-sp2 {
display: none;
@media screen and (max-width: 480px) {
display: block;
}
}
.display-pc2 {
display: block;
@media screen and (max-width: 480px) {
display: none;
}
}
/*float setting start*/
.float-left {
float: left;
}
.float-left-pc {
float: left;
@media screen and (max-width: 770px) {
float: none;
}
}
.float-right {
float: right;
}
.float-right-pc {
float: right;
@media screen and (max-width: 770px) {
float: none;
}
}
/*bg setting start*/
.bg-fff {
background-color: #fff;
}
.bg-000 {
background-color: #000;
}
/*inner setting start*/
.inner-w1024 {
// 1064-20-20=1024
max-width: 690px;
padding: 0 40px;
box-sizing: border-box;
margin: 0 auto;
@media screen and (max-width: 770px) {
padding: 0 4%;
}
}
/*margin setting start*/
$i: 1;
@while $i < 12 {
// ①繰り返すスタイル
.mb-#{$i * 10} {
margin-bottom: 10px * $i;
@media screen and (max-width: 770px) {
margin-bottom: 1% + $i;
}
}
// ②繰り返しの条件
$i: $i+1;
}
.mt-10 {
margin-top: 10px;
@media screen and (max-width: 770px) {
margin-top: 3%;
}
}
.mt-20 {
margin-top: 20px;
@media screen and (max-width: 770px) {
margin-top: 3%;
}
}
.mt-30 {
margin-top: 30px;
@media screen and (max-width: 770px) {
margin-top: 5%;
}
}
.mt-40 {
margin-top: 40px;
@media screen and (max-width: 770px) {
margin-top: 6%;
}
}
.mt-50 {
margin-top: 50px;
@media screen and (max-width: 770px) {
margin-top: 7%;
}
}
.mt-60 {
margin-top: 60px;
@media screen and (max-width: 770px) {
margin-top: 8%;
}
}
.mt-70 {
margin-top: 70px;
@media screen and (max-width: 770px) {
margin-top: 9%;
}
}
.mt-80 {
margin-top: 80px;
@media screen and (max-width: 770px) {
margin-top: 10%;
}
}
.mt-90 {
margin-top: 90px;
@media screen and (max-width: 770px) {
margin-top: 11%;
}
}
.mt-100 {
margin-top: 100px;
@media screen and (max-width: 770px) {
margin-top: 12%;
}
}
.mt-110 {
margin-top: 110px;
@media screen and (max-width: 770px) {
margin-top: 13%;
}
}
.mt-120 {
margin-top: 120px;
@media screen and (max-width: 770px) {
margin-top: 14%;
}
}
/*padding setting start*/
.pd-10 {
padding: 10px 0;
@media screen and (max-width: 770px) {
padding: 3% 0;
}
}
.pd-20 {
padding: 20px 0;
@media screen and (max-width: 770px) {
padding: 3% 0;
}
}
.pd-30 {
padding: 30px 0;
@media screen and (max-width: 770px) {
padding: 5% 0;
}
}
.pd-40 {
padding: 40px 0;
@media screen and (max-width: 770px) {
padding: 6% 0;
}
}
.pd-50 {
padding: 50px 0;
@media screen and (max-width: 770px) {
padding: 7% 0;
}
}
.pd-60 {
padding: 60px 0;
@media screen and (max-width: 770px) {
padding: 6% 0;
}
}
.pd-70 {
padding: 70px 0;
@media screen and (max-width: 770px) {
padding: 9% 0;
}
}
.pd-80 {
padding: 80px 0;
@media screen and (max-width: 770px) {
padding: 10% 0;
}
}
.pd-90 {
padding: 90px 0;
@media screen and (max-width: 770px) {
padding: 11% 0;
}
}
.pd-100 {
padding: 100px 0;
@media screen and (max-width: 770px) {
padding: 12% 0;
}
}
.pd-110 {
padding: 110px 0;
@media screen and (max-width: 770px) {
padding: 13% 0;
}
}
.pd-120 {
padding: 120px 0;
@media screen and (max-width: 770px) {
padding: 14% 0;
}
}
.pdx-80 {
@media screen and (max-width: 770px) {
padding: 0 8%;
box-sizing: border-box;
}
}
.pdx-100 {
@media screen and (max-width: 770px) {
padding: 0 10%;
box-sizing: border-box;
}
}
.pdx-120 {
@media screen and (max-width: 770px) {
padding: 0 12%;
box-sizing: border-box;
}
}
.pdx-140 {
@media screen and (max-width: 770px) {
padding: 0 14%;
box-sizing: border-box;
}
}
/*padding-top setting start*/
.pdt-10 {
padding-top: 10px;
@media screen and (max-width: 770px) {
padding-top: 3%;
}
}
.pdt-20 {
padding-top: 20px;
@media screen and (max-width: 770px) {
padding-top: 4%;
}
}
.pdt-30 {
padding-top: 30px;
@media screen and (max-width: 770px) {
padding-top: 5%;
}
}
.pdt-40 {
padding-top: 40px;
@media screen and (max-width: 770px) {
padding-top: 6%;
}
}
.pdt-120 {
padding-top: 50px;
@media screen and (max-width: 770px) {
padding-top: 7%;
}
}
.pdt-60 {
padding-top: 60px;
@media screen and (max-width: 770px) {
padding-top: 8%;
}
}
.pdt-70 {
padding-top: 70px;
@media screen and (max-width: 770px) {
padding-top: 9%;
}
}
.pdt-80 {
padding-top: 80px;
@media screen and (max-width: 770px) {
padding-top: 10%;
}
}
.pdt-90 {
padding-top: 90px;
@media screen and (max-width: 770px) {
padding-top: 11%;
}
}
.pdt-100 {
padding-top: 100px;
@media screen and (max-width: 770px) {
padding-top: 12%;
}
}
.pdt-110 {
padding-top: 110px;
@media screen and (max-width: 770px) {
padding-top: 13%;
}
}
.pdt-120 {
padding-top: 120px;
@media screen and (max-width: 770px) {
padding-top: 14%;
}
}
/*padding-bottom setting start*/
.pdb-10 {
padding-bottom: 10px;
@media screen and (max-width: 770px) {
padding-bottom: 3%;
}
}
.pdb-20 {
padding-bottom: 20px;
@media screen and (max-width: 770px) {
padding-bottom: 4%;
}
}
.pdb-30 {
padding-bottom: 30px;
@media screen and (max-width: 770px) {
padding-bottom: 5%;
}
}
.pdb-40 {
padding-bottom: 40px;
@media screen and (max-width: 770px) {
padding-bottom: 6%;
}
}
.pdb-50 {
padding-bottom: 50px;
@media screen and (max-width: 770px) {
padding-bottom: 7%;
}
}
.pdb-60 {
padding-bottom: 60px;
@media screen and (max-width: 770px) {
padding-bottom: 8%;
}
}
.pdb-70 {
padding-bottom: 70px;
@media screen and (max-width: 770px) {
padding-bottom: 9%;
}
}
.pdb-80 {
padding-bottom: 80px;
@media screen and (max-width: 770px) {
padding-bottom: 10%;
}
}
.pdb-90 {
padding-bottom: 90px;
@media screen and (max-width: 770px) {
padding-bottom: 11%;
}
}
.pdb-100 {
padding-bottom: 100px;
@media screen and (max-width: 770px) {
padding-bottom: 12%;
}
}
.pdb-110 {
padding-bottom: 110px;
@media screen and (max-width: 770px) {
padding-bottom: 13%;
}
}
.pdb-120 {
padding-bottom: 120px;
@media screen and (max-width: 770px) {
padding-bottom: 14%;
}
}
}
$main-color: #305ea3;
$sub-color: #ff721d;
#page_line-contact {
.shot {
max-width: 770px;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
padding: 0 20px;
@media screen and (max-width: 770px) {
padding: 0 2%;
}
>.toilet,
.kitchen,
.range,
.wash,
.bath,
.ih,
.stove,
.dish,
.seat {
.cnt {
display: none;
}
}
strong {
font-weight: bold;
}
.btn {
box-sizing: border-box;
background-color: $main-color;
padding: 1%;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 10px;
position: relative;
z-index: 2;
cursor: pointer;
img {
margin: 0 2% 0 0;
@media screen and (max-width: 770px) {
width: 30%;
}
@media screen and (max-width: 480px) {
width: 24%;
}
}
&__txt {
margin-left: 4%;
@media screen and (max-width: 770px) {
margin-left: 0;
}
h3 {
color: #fff;
margin: 0;
display: block;
width: 100%;
}
p {
color: #fff;
}
}
&__ico {
position: relative;
background-color: #fff;
width: 50px;
height: 50px;
border-radius: 50%;
margin-left: auto;
display: block;
margin-right: 2%;
@media screen and (max-width: 770px) {
width: 30px;
height: 30px;
}
@media screen and (max-width: 480px) {
width: 20px;
height: 20px;
}
&::before {
position: absolute;
display: block;
content: "";
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 15px;
height: 3px;
background-color: $main-color;
@media screen and (max-width: 480px) {
width: 10px;
height: 2px;
}
}
&::after {
position: absolute;
display: block;
content: "";
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 3px;
height: 15px;
background-color: $main-color;
@media screen and (max-width: 480px) {
width: 2px;
height: 10px;
}
}
}
}
.btn.opened {
.btn__ico {
&::after {
content: none;
}
}
}
.cnt {
background-color: #dbecf4;
border-radius: 10px 10px 10px 10px;
padding: 20px 20px 30px 20px;
@media screen and (max-width: 770px) {
padding: 3% 3% 4% 3%;
}
.caution {
@media screen and (max-width: 480px) {
font-size: 1.2rem;
}
}
&__layout01 {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
@media screen and (max-width: 770px) {
justify-content: space-around;
}
@media screen and (max-width: 480px) {
justify-content: flex-start;
}
&--item1 {
max-width: 223px;
width: 100%;
margin-right: 11px;
@media screen and (max-width: 770px) {
margin-right: 0;
max-width: none;
}
img {
@media screen and (max-width: 770px) {
width: 37vw;
max-width: 223px;
}
}
}
&--item2 {
max-width: 456px;
width: 100%;
@media screen and (max-width: 770px) {
max-width: none;
}
>p {
width: 100%;
margin-bottom: 12%;
@media screen and (max-width: 770px) {
margin-bottom: 4%;
}
}
ul {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-around;
li {
max-width: 223px;
@media screen and (max-width: 770px) {
width: 49%
}
&:first-of-type {
margin-right: 10px;
@media screen and (max-width: 770px) {
margin-right: 2%;
}
}
img {
margin-bottom: 2%;
}
}
}
}
}
&__layout00 {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
@media screen and (max-width: 770px) {
justify-content: space-around;
}
@media screen and (max-width: 480px) {
justify-content: flex-start;
}
&--item {
max-width: 223px;
width: 100%;
@media screen and (max-width: 770px) {
width: 49%;
}
&:not(:nth-of-type(3n)) {
margin-right: 10px;
@media screen and (max-width: 770px) {
margin-right: 2%;
margin-bottom: 4%;
}
}
&:nth-of-type(2) {
@media screen and (max-width: 770px) {
margin-right: 0;
}
}
img {
margin-bottom: 2%;
}
}
.cnt__layout02--item {
@media screen and (max-width: 770px) {
width: 49%;
max-width: none;
margin-left: 2%;
}
}
}
&__layout02 {
display: flex;
align-items: stretch;
flex-wrap: wrap;
&--item {
&:nth-of-type(1) {
max-width: 223px;
width: 100%;
margin-right: 11px;
@media screen and (max-width: 770px) {
margin-right: 2%;
max-width: none;
width: 28%;
}
img {
margin-bottom: 2%;
}
}
&:nth-of-type(2) {
max-width: 456px;
width: 100%;
background-color: #fff;
box-sizing: border-box;
padding: 6% 3%;
border-radius: 10px;
@media screen and (max-width: 770px) {
max-width: none;
width: 100%;
}
p {
text-align: center;
background: linear-gradient(transparent 70%, #fff1e9 70%);
width: 400px;
margin: 0 auto;
@media screen and (max-width: 770px) {
width: 270px;
line-height: 1.6em;
}
span {
position: relative;
color: #fff;
margin-right: 2%;
z-index: 1;
&::after {
content: "";
display: inline-block;
background-color: $sub-color;
width: 45px;
height: 45px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-52%, -47%);
border-radius: 50%;
z-index: -1;
@media screen and (max-width: 770px) {
width: 30px;
height: 30px;
}
}
}
}
img {}
}
}
}
&__layout03 {
li {
&:not(:last-of-type) {
margin-bottom: 4%;
}
&:nth-of-type(odd) {
@media screen and (max-width: 770px) {
margin-right: 2%;
}
}
&:not(:nth-of-type(odd)) {
@media screen and (max-width: 770px) {
margin-right: 0;
}
}
}
}
&__layout04 {
display: flex;
flex-wrap: wrap;
@media screen and (max-width: 770px) {
justify-content: space-around;
}
@media screen and (max-width: 480px) {
justify-content: flex-start;
}
&--img {
display: flex;
justify-content: space-around;
max-width: 458px;
width: 100%;
margin-right: 10px;
@media screen and (max-width: 770px) {
margin-right: 2%;
max-width: none;
}
img {
max-width: 223px;
width: 100%;
margin: 0 auto;
@media screen and (max-width: 770px) {
width: 49%;
}
&:first-of-type {
margin-right: 11px;
@media screen and (max-width: 770px) {
margin-right: auto;
}
@media screen and (max-width: 480px) {
margin-right: 2%;
}
}
}
}
&--txt {
width: 100%;
@media screen and (max-width: 770px) {
display: flex;
justify-content: center;
}
}
&--item {
&:nth-of-type(1) {
max-width: 458px;
width: 100%;
margin-right: 9px;
@media screen and (max-width: 770px) {
width: 100%;
max-width: none;
margin-bottom: 4%;
margin-right: 0;
}
}
&:nth-of-type(2) {
max-width: 223px;
width: 100%;
@media screen and (max-width: 770px) {
width: 50%;
}
}
img {
margin-bottom: 2%;
}
}
}
.cap {
background-color: #fff;
border-radius: 10px;
box-sizing: border-box;
padding: 3%;
&__ttl {
background: linear-gradient(transparent 70%, #dbecf4 70%);
margin: 0 auto 20px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
@media screen and (max-width: 770px) {
margin: 0 auto 3%;
width: 390px;
}
@media screen and (max-width: 480px) {
width: 260px;
}
span {
position: relative;
background-color: #ff721d;
width: 50px;
height: 50px;
border-radius: 50%;
display: block;
margin-right: 2%;
@media screen and (max-width: 770px) {
width: 30px;
height: 30px;
}
&::after {
content: "注";
display: block;
position: absolute;
color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
&__list {
display: flex;
align-items: center;
justify-content: center;
@media screen and (max-width: 480px) {
flex-wrap: wrap;
}
li {
@media screen and (max-width: 480px) {
width: 49%;
max-width: 148px;
}
&:not(:last-of-type) {
margin-right: 19px;
@media screen and (max-width: 770px) {
margin-right: 2%;
}
@media screen and (max-width: 480px) {
margin-right: 0;
}
}
&:nth-of-type(odd) {
@media screen and (max-width: 480px) {
margin-right: 2%;
}
}
&:nth-of-type(-n + 2) {
@media screen and (max-width: 480px) {
margin-bottom: 2%;
}
}
img {
@media screen and (max-width: 480px) {
margin: 0;
}
}
}
}
&__list2 {
li {
position: relative;
padding-left: 15px;
line-height: 1.4em;
font-size: 1.8rem;
font-weight: bold;
@media screen and (max-width: 770px) {
font-size: 1.4rem;
}
span {
left: 0;
position: absolute;
top: 0;
color: $main-color;
}
}
}
}
}
.toilet {
.cnt {
&__layout00 {
&--item {
&:last-of-type {
@media screen and(max-width: 770px) {
margin: 0 10px;
}
@media screen and(max-width: 480px) {
margin: 0;
}
}
}
}
&__layout01 {
&--item2 {
>p {
max-width: 540px;
margin: 0 auto 4%;
}
}
}
}
}
.kitchen {
strong {
color: $sub-color;
}
.btn {
background-color: $sub-color;
&__ico {
&::before {
background-color: $sub-color;
}
&::after {
background-color: $sub-color !important;
}
}
}
.cnt {
background-color: #ffebdf;
&__layout00 {
&--item {
&:nth-of-type(3) {
@media screen and(max-width: 770px) {
margin: 0 10px;
}
@media screen and(max-width: 750px) {
margin: 0;
}
}
}
}
&__layout00 {
.cnt__layout02--item.display-sp {
@media screen and(max-width: 770px) {
max-width: 223px;
}
}
}
}
}
.range {}
.wash {
strong {
color: $sub-color;
}
.btn {
background-color: $sub-color;
&__ico {
&::before {
background-color: $sub-color;
}
&::after {
background-color: $sub-color !important;
}
}
}
.cnt {
background-color: #ffebdf;
}
}
.bath {
.cap {
&__ttl {
width: 470px;
@media screen and (max-width: 770px) {
width: 390px;
}
@media screen and (max-width: 480px) {
width: 260px;
}
}
}
.cnt {
&__layout00 {
&--item {
&:first-of-type {
@media screen and (max-width: 750px) {
margin-right: 50%;
}
}
&:last-of-type {
@media screen and (max-width: 770px) {
margin: 0 10px;
}
@media screen and (max-width: 750px) {
margin: 0;
}
}
}
}
}
}
.ih {
strong {
color: $sub-color;
}
.btn {
background-color: $sub-color;
&__txt {
h3 {
font-size: 2.3rem;
@media screen and (max-width: 770px) {
font-size: 1.8rem;
}
@media screen and (max-width: 480px) {
font-size: 1.4rem;
line-height: 1.4em;
}
@media screen and (max-width: 370px) {
font-size: 1.2rem;
}
}
p {
@media screen and (max-width: 480px) {
line-height: 1.4em;
}
}
}
&__ico {
&::before {
background-color: $sub-color;
}
&::after {
background-color: $sub-color !important;
}
}
}
.cnt {
background-color: #ffebdf;
&__layout00 {
margin-bottom: 11px;
@media screen and (max-width: 770px) {
margin-bottom: 0;
}
}
}
}
.stove {
.btn {
&__txt {
h3 {
font-size: 2.3rem;
@media screen and (max-width: 770px) {
font-size: 1.8rem;
}
@media screen and (max-width: 480px) {
font-size: 1.4rem;
line-height: 1.4em;
}
@media screen and (max-width: 370px) {
font-size: 1.2rem;
}
}
p {
@media screen and (max-width: 480px) {
line-height: 1.4em;
}
}
}
}
.cnt {
&__layout00 {
&--item {
&:last-of-type {
max-width: none;
width: 100%;
@media screen and (max-width: 770px) {
width: 49%;
max-width: 223px;
}
img {
margin: 0 auto 2% 0;
@media screen and (max-width: 770px) {
margin: 0 auto 2%;
}
}
}
&:nth-of-type(-n + 3) {
margin-bottom: 4%;
}
&:nth-of-type(odd) {
@media screen and (max-width: 770px) {
margin-right: 2%;
}
}
&:not(:nth-of-type(odd)) {
@media screen and (max-width: 770px) {
margin-right: 0;
}
}
}
}
}
}
.dish {
strong {
color: $sub-color;
}
.btn {
background-color: $sub-color;
&__ico {
&::before {
background-color: $sub-color;
}
&::after {
background-color: $sub-color !important;
}
}
}
.cnt {
background-color: #ffebdf;
&__layout00 {
&--item {
&:nth-of-type(-n + 3) {
margin-bottom: 4%;
}
&:nth-of-type(odd) {
@media screen and (max-width: 770px) {
margin-right: 2%;
}
}
&:not(:nth-of-type(odd)) {
@media screen and (max-width: 770px) {
margin-right: 0;
}
}
&:last-of-type {
@media screen and (max-width: 770px) {
margin-bottom: 0;
}
}
}
}
}
.cap {
&__ttl {
margin: 0 auto;
width: 540px;
background: linear-gradient(transparent 70%, #fff1e9 70%);
@media screen and (max-width: 770px) {
width: 390px;
}
@media screen and (max-width: 480px) {
width: 270px;
}
}
}
}
.seat {
.btn {
&__txt {
h3 {
font-size: 2.3rem;
@media screen and (max-width: 770px) {
font-size: 1.8rem;
}
@media screen and (max-width: 480px) {
font-size: 1.4rem;
line-height: 1.4em;
}
@media screen and (max-width: 370px) {
font-size: 1.2rem;
}
span {
font-size: 1.8rem;
letter-spacing: 0;
margin: 0 -5px;
@media screen and (max-width: 770px) {
font-size: 1.4rem;
}
@media screen and (max-width: 480px) {
font-size: 1.2rem;
}
@media screen and (max-width: 370px) {
font-size: 1rem;
}
}
}
p {
@media screen and (max-width: 480px) {
line-height: 1.4em;
}
}
}
}
}
}
}
