smile-support.scss
/********************************************
// ↓ smile-support.scss
********************************************/
#smile-support-page {
width: 100%;
max-width: 770px;
margin: 0 auto;
.smile-support-page__mv {
height: 500px;
@media (max-width: 770px) {
height: 65vw;
}
&__banner {
width: 100%;
position: relative;
margin-bottom: 70px;
@media (max-width: 767px) {
margin-bottom: 9%;
}
img {
display: block;
}
}
}
.smile-support-page__top {
width: 100%;
&__contents {
width: 100%;
box-sizing: border-box;
padding: 0 30px;
@media (max-width: 767px) {
padding: 0 6%;
}
}
&__heading {
width: 100%;
position: relative;
margin-bottom: 50px;
@media (max-width: 767px) {
margin-bottom: 6%;
}
img {
display: block;
}
}
&__text {
font-size: 1.6rem;
line-height: 3.2rem;
color: #6a3906;
font-weight: 500;
margin-bottom: 30px;
span {
color: #ff9c21;
font-weight: bold;
}
@media (max-width: 767px) {
font-size: 1.3rem;
line-height: 2.4rem;
margin-bottom: 5%;
}
}
&__img {
margin-bottom: 40px;
@media (max-width: 767px) {
margin-bottom: 6%;
}
img {
display: block;
}
}
}
.smile-support-page__sec01 {
width: 100%;
&__contents {
width: 100%;
box-sizing: border-box;
padding: 0 30px;
@media (max-width: 767px) {
padding: 0 6%;
}
}
&__heading {
width: 100%;
position: relative;
margin-bottom: 80px;
@media (max-width: 767px) {
margin-bottom: 10%;
}
img {
display: block;
}
}
&__list {
width: 100%;
&__item {
width: 100%;
border: 4px solid #6a3906;
border-radius: 30px;
margin-bottom: 75px;
@media (max-width: 767px) {
border: 2px solid #6a3906;
border-radius: 20px;
margin-bottom: 10%;
}
&__title {
transform: translateY(-40px);
width: 100%;
@media (max-width: 767px) {
transform: translateY(-5vw);
}
img {
display: block;
}
}
&__text {
font-size: 1.8rem;
line-height: 3.2rem;
color: #6a3906;
font-weight: bold;
margin-bottom: 20px;
margin-top: -20px;
text-align: center;
padding: 0 36px;
@media (max-width: 767px) {
font-size: 1.3rem;
line-height: 2.4rem;
margin-bottom: 4%;
margin-top: -3vw;
padding: 0 6%;
br {
display: none;
}
}
}
&__img {
width: 100%;
position: relative;
padding: 0 36px;
margin-bottom: 35px;
@media (max-width: 767px) {
margin-bottom: 6%;
padding: 0 6%;
}
img {
display: block;
position: relative;
z-index: 1;
}
&__position {
position: absolute;
z-index: 2;
left: 30px;
bottom: -10px;
@media (max-width: 767px) {
left: 4vw;
bottom: -2vw;
width: 21vw;
}
img {
display: inline-block;
position: relative;
z-index: 2;
}
}
}
&:nth-child(2n) {
.smile-support-page__sec01__list__item__img__position {
right: 30px;
left: auto;
@media (max-width: 767px) {
right: 4vw;
}
}
}
&:nth-child(2) {
.smile-support-page__sec01__list__item__img__position {
@media (max-width: 767px) {
width: 16vw;
}
}
}
&:nth-child(3) {
.smile-support-page__sec01__list__item__img__position {
@media (max-width: 767px) {
width: 13vw;
}
}
}
&:nth-child(4) {
.smile-support-page__sec01__list__item__img__position {
@media (max-width: 767px) {
width: 15vw;
}
}
}
&:nth-child(5) {
.smile-support-page__sec01__list__item__img__position {
@media (max-width: 767px) {
width: 12vw;
}
}
}
&:nth-child(6) {
.smile-support-page__sec01__list__item__img__position {
@media (max-width: 767px) {
width: 13vw;
}
}
}
&:nth-child(7) {
.smile-support-page__sec01__list__item__img__position {
@media (max-width: 767px) {
width: 13vw;
}
}
}
&:nth-child(8) {
.smile-support-page__sec01__list__item__img__position {
@media (max-width: 767px) {
width: 11vw;
}
}
}
&:nth-child(9) {
.smile-support-page__sec01__list__item__img__position {
@media (max-width: 767px) {
width: 12vw;
}
}
}
}
}
}
.smile-support-page__cta {
width: 100%;
background: #f2e9db;
margin-bottom: 70px;
padding-bottom: 40px;
@media (max-width: 767px) {
margin-bottom: 9%;
padding-bottom: 6%;
}
&__contents {
width: 100%;
box-sizing: border-box;
padding: 0 30px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
@media (max-width: 767px) {
padding: 0 6%;
}
}
.smile-support-page__cta__left {
width: 380px;
margin-right: 15px;
@media (max-width: 767px) {
width: 100%;
margin-right: 0;
}
&__tel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
height: 120px;
background: #e99f23;
border-radius: 15px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
@media (max-width: 767px) {
height: 80px;
border-radius: 10px;
}
&__number {
color: #FFF;
font-size: 4rem;
line-height: 4rem;
letter-spacing: 0.5px;
position: relative;
padding-left: 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-weight: bold;
@media (max-width: 767px) {
font-size: 3rem;
line-height: 3rem;
}
@media (max-width: 375px) {
font-size: 2.6rem;
line-height: 2.6rem;
}
&:before {
content: "";
position: absolute;
margin-right: 3px;
top: 8px;
left: -13px;
width: 46px;
height: 30px;
display: inline-block;
background: url(../images/top/cta_icon_02_pc.png) no-repeat center;
background-size: contain;
@media (max-width: 767px) {
width: 34px;
height: 22px;
left: -5px;
top: 5px;
}
@media (max-width: 375px) {
width: 30px;
height: 20px;
left: 0px;
top: 3px;
}
}
&__text {
font-size: 1.4rem;
line-height: 1.8rem;
letter-spacing: 0;
font-weight: 500;
margin: 5px 0;
@media (max-width: 767px) {
font-size: 1.2rem;
line-height: 1.4rem;
margin: 3px 0;
}
@media (max-width: 360px) {
font-size: 1.1rem;
letter-spacing: -0.5px;
}
}
}
}
}
.smile-support-page__cta__right {
width: calc(100% - 395px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
@media (max-width: 767px) {
width: 100%;
}
&__link {
width: calc(50% - 6px);
height: 100%;
margin-right: 12px;
background: #097c25;
color: #fff;
border-radius: 15px;
font-weight: bold;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
font-size: 1.8rem;
line-height: 2.2rem;
flex-direction: column;
position: relative;
height: 120px;
letter-spacing: 0.5px;
border: 2px solid #fff;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
&:nth-child(2) {
margin-right: 0;
}
@media (max-width: 767px) {
width: 100%;
height: 45px;
margin-top: 8%;
font-size: 1.4rem;
line-height: 1.7rem;
margin-right: 0;
border-radius: 10px;
border: 1px solid #fff;
br {
display: none;
}
}
span {
width: 100%;
height: 52px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
@media (max-width: 767px) {
height: auto;
}
}
&:before {
display: block;
content: "\f0e0";
color: #fff;
text-align: center;
font-size: 2.3rem;
line-height: 3rem;
font-family: "Font Awesome 5 Free";
font-weight: 400;
margin-bottom: 5px;
@media (max-width: 767px) {
position: absolute;
font-size: 1.8rem;
left: 50px;
transform: translateY(-50%);
top: 50%;
}
@media (max-width: 425px) {
left: 30px;
}
}
&:nth-child(2) {
background: #00b900;
&:before {
content: '';
background: url(../images/top/cta_icon_01_pc.png) no-repeat center;
background-size: contain;
width: 27px;
height: 29px;
@media (max-width: 767px) {
width: 22px;
height: 21px;
left: 45px;
}
@media (max-width: 425px) {
left: 25px;
}
}
@media (max-width: 767px) {
margin-top: 5%;
}
}
}
}
&__heading {
width: 100%;
position: relative;
margin-bottom: 20px;
@media (max-width: 767px) {
margin-bottom: 3%;
}
img {
display: block;
}
}
}
.smile-support-page__sec02 {
width: 100%;
margin-bottom: 60px;
@media (max-width: 767px) {
margin-bottom: 8%;
}
&__contents {
width: 100%;
box-sizing: border-box;
padding: 0 30px;
@media (max-width: 767px) {
padding: 0 6%;
}
}
&__heading {
width: 100%;
position: relative;
margin-bottom: 80px;
@media (max-width: 767px) {
margin-bottom: 10%;
}
img {
display: block;
}
}
&__inner {
width: 100%;
display: table;
border-radius: 30px 30px 0 0;
overflow: hidden;
@media (max-width: 767px) {
border-radius: 20px 20px 0 0;
}
&:nth-child(2) {
border-radius: 0 0 30px 30px;
margin-top: 3px;
@media (max-width: 767px) {
border-radius: 0 0 20px 20px;
}
.smile-support-page__sec02__left {
background: #ffe1e6 !important;
}
.smile-support-page__sec02__right {
background: #ef8686 !important;
}
}
}
&__left {
width: calc(100% - 100px);
padding: 55px 30px;
background: #d9f7ff;
display: table-cell;
vertical-align: middle;
@media (max-width: 767px) {
width: 85%;
padding: 7% 4%;
}
}
&__right {
width: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
background: #4f90db;
height: 100%;
@media (max-width: 767px) {
width: 15%;
padding: 0 2.5%;
}
img {
display: inline-block;
}
}
&__list {
width: 100%;
&__item {
width: 100%;
border-radius: 25px;
margin-bottom: 60px;
background: #fff;
@media (max-width: 767px) {
border-radius: 25px;
margin-bottom: 12%;
}
&__title {
transform: translateY(-40px);
width: 100%;
@media (max-width: 767px) {
transform: translateY(-5vw);
}
img {
display: block;
}
}
&__box {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
padding: 0 30px 30px;
margin-top: -10px;
@media (max-width: 767px) {
padding: 0 6% 6%;
margin-top: -2vw;
}
}
&__text {
font-size: 2rem;
line-height: 3.6rem;
color: #6a3906;
font-weight: bold;
width: calc(100% - 220px);
@media (max-width: 767px) {
font-size: 1.3rem;
line-height: 2.1rem;
width: 57%;
}
@media (max-width: 767px) {
font-size: 1.2rem;
line-height: 1.8rem;
}
}
&__img {
width: 196px;
margin-left: 24px;
position: relative;
@media (max-width: 767px) {
width: 41%;
margin-left: 2%;
}
img {
display: block;
position: relative;
z-index: 1;
}
&__position {
position: absolute;
z-index: 2;
left: 30px;
bottom: -10px;
@media (max-width: 767px) {
left: 4vw;
bottom: -2vw;
width: 21vw;
}
img {
display: inline-block;
position: relative;
z-index: 2;
}
}
}
&:last-child {
margin-bottom: 0;
}
}
}
}
}