reason.scss
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;300;400;500;600;700;800;900&display=swap');
#reason-page {
.reason-page__heading {
width: 100%;
max-width: 940px;
margin: 0 auto 60px;
@media (max-width: 1024px) {
margin: 0 auto 6%;
padding: 0 3%;
}
@media (max-width: 767px) {
margin: 0 auto 8%;
padding: 0 6%;
}
&__left {
position: relative;
z-index: 2;
width: 100%;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 900;
color: #031f4d;
font-size: 3.8rem;
line-height: 4.2rem;
@media (max-width: 1024px) {
font-size: 3.7vw;
line-height: 4.2vw;
}
@media (max-width: 767px) {
font-size: 5.8vw;
line-height: 7vw;
}
&__size {
font-weight: 500;
font-size: 2.8rem;
@media (max-width: 1024px) {
font-size: 2.7vw;
}
@media (max-width: 767px) {
font-size: 4.2vw;
}
}
.small {
font-size: 2.8rem;
@media (max-width: 1024px) {
font-size: 2.7vw;
}
@media (max-width: 767px) {
font-size: 4.2vw;
}
}
}
&__right {
position: relative;
z-index: 1;
width: 100%;
text-align: right;
font-size: 8rem;
line-height: 5.5rem;
border-bottom: 20px solid #dae4f3;
color: #dae4f3;
font-weight: 800;
font-family: 'Montserrat', sans-serif;
margin-top: -72px;
@media (max-width: 1024px) {
font-size: 8vw;
line-height: 5.5vw;
border-bottom: 2vw solid #dae4f3;
margin-top: -7vw;
}
@media (max-width: 767px) {
font-size: 7.2vw;
line-height: 4.9vw;
border-bottom: 2.5vw solid #dae4f3;
margin-top: -7.5vw;
}
}
&.white {
.reason-page__heading__right {
border-bottom: 20px solid #fff;
color: #fff;
@media (max-width: 1024px) {
border-bottom: 2vw solid #fff;
}
@media (max-width: 767px) {
border-bottom: 2.5vw solid #fff;
}
}
}
}
.reason-page__mv {
width: 100%;
position: relative;
box-sizing: border-box;
z-index: 7;
@media (max-width: 1024px) {}
@media (max-width: 767px) {}
&__banner {
width: 100%;
position: relative;
z-index: 1;
&__default {
width: 100%;
img {
width: 100%;
height: 600px;
object-fit: cover;
display: block;
font-family: 'object-fit: cover;' !important;
@media (max-width: 1024px) {
height: 60vw;
}
@media (max-width: 767px) {
height: auto;
}
}
&__animation {
display: block;
overflow: hidden;
opacity: 0;
&__inner {
display: block;
opacity: 0;
}
}
}
&.fade-in {
.reason-page__mv__banner__default__animation {
animation-name: slideTextX100;
animation-duration: 1.5s;
animation-fill-mode: forwards;
opacity: 0;
}
.reason-page__mv__banner__default__animation__inner {
animation-name: slideTextX-100;
animation-duration: 1.5s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes slideTextX100 {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideTextX-100 {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
}
}
}
.reason-page__sec01 {
width: 100%;
background-color: #fff;
padding: 80px 0;
@media (max-width: 1024px) {
padding: 8% 0;
}
@media (max-width: 767px) {
padding: 10% 0;
}
&__heading {
width: 100%;
max-width: 948px;
margin: 0 auto 50px;
@media (max-width: 1024px) {
margin: 0 auto 5%;
padding: 0 3%;
}
@media (max-width: 767px) {
margin: 0 auto 7%;
padding: 0 6%;
}
img {
display: block;
}
}
&__contents {
width: 100%;
max-width: 944px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 6%;
}
}
&__img {
width: 100%;
margin: 0 0 50px;
@media (max-width: 1024px) {
margin: 0 0 5%;
}
@media (max-width: 767px) {
margin: 0 0 7%;
}
img {
display: block;
}
}
&__text {
font-size: 1.6rem;
line-height: 3.2rem;
color: #111111;
font-weight: 400;
width: 100%;
margin: 0 0 50px;
letter-spacing: 0.01em;
span {
color: #d85724;
font-weight: bold;
}
@media (max-width: 1024px) {
margin: 0 0 5%;
font-size: 1.5rem;
line-height: 2.8rem;
}
@media (max-width: 767px) {
margin: 0 0 7%;
font-size: 1.4rem;
line-height: 2.4rem;
}
}
&__button {
width: 100%;
max-width: 944px;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
@media (max-width: 1024px) {
box-sizing: border-box;
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 0 0 26%;
}
&__link {
width: 100%;
max-width: 400px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 80px;
background: #fff;
font-size: 1.6rem;
line-height: 1.6rem;
font-weight: 400;
color: #031f4d;
border: 1px solid #031f4d;
position: relative;
box-sizing: border-box;
letter-spacing: 1px;
@media (max-width: 1024px) {
font-size: 1.4rem;
line-height: 1.4rem;
height: 70px;
width: 350px;
}
@media (max-width: 767px) {
width: 100%;
font-size: 1.3rem;
line-height: 1.3rem;
height: 50px;
}
&:after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -25px;
width: 50px;
height: 1px;
background-color: #031f4d;
display: block;
z-index: 1;
@media (max-width: 1024px) {
left: -20px;
width: 40px;
}
@media (max-width: 767px) {
left: -25px;
width: 50px;
}
}
}
}
}
.reason-page__sec02 {
width: 100%;
background-color: #dae4f3;
padding: 80px 0;
@media (max-width: 1024px) {
padding: 8% 0;
}
@media (max-width: 767px) {
padding: 10% 0;
}
&__heading {
width: 100%;
max-width: 948px;
margin: 0 auto 50px;
@media (max-width: 1024px) {
margin: 0 auto 5%;
padding: 0 3%;
}
@media (max-width: 767px) {
margin: 0 auto 7%;
padding: 0 6%;
}
img {
display: block;
}
}
&__contents {
width: 100%;
max-width: 944px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 6%;
}
}
&__img {
width: 100%;
margin: 0 0 50px;
@media (max-width: 1024px) {
margin: 0 0 5%;
}
@media (max-width: 767px) {
margin: 0 0 7%;
}
img {
display: block;
}
}
&__text {
font-size: 1.6rem;
line-height: 3.2rem;
color: #111111;
font-weight: 400;
width: 100%;
margin: 0 0 50px;
letter-spacing: 0.01em;
span {
color: #d85724;
font-weight: bold;
}
@media (max-width: 1024px) {
margin: 0 0 5%;
font-size: 1.5rem;
line-height: 2.8rem;
}
@media (max-width: 767px) {
margin: 0 0 7%;
font-size: 1.4rem;
line-height: 2.4rem;
}
}
&__button {
width: 100%;
max-width: 944px;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
@media (max-width: 1024px) {
box-sizing: border-box;
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 0 0 26%;
}
&__link {
width: 100%;
max-width: 400px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 80px;
background: #fff;
font-size: 1.6rem;
line-height: 1.6rem;
font-weight: 400;
color: #031f4d;
border: 1px solid #031f4d;
position: relative;
box-sizing: border-box;
letter-spacing: 1px;
@media (max-width: 1024px) {
font-size: 1.4rem;
line-height: 1.4rem;
height: 70px;
width: 350px;
}
@media (max-width: 767px) {
width: 100%;
font-size: 1.3rem;
line-height: 1.3rem;
height: 50px;
}
&:after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -25px;
width: 50px;
height: 1px;
background-color: #031f4d;
display: block;
z-index: 1;
@media (max-width: 1024px) {
left: -20px;
width: 40px;
}
@media (max-width: 767px) {
left: -25px;
width: 50px;
}
}
}
}
}
.reason-page__sec03 {
width: 100%;
background-color: #fff;
padding: 80px 0;
@media (max-width: 1024px) {
padding: 8% 0;
}
@media (max-width: 767px) {
padding: 10% 0;
}
&__heading {
width: 100%;
max-width: 948px;
margin: 0 auto 50px;
@media (max-width: 1024px) {
margin: 0 auto 5%;
padding: 0 3%;
}
@media (max-width: 767px) {
margin: 0 auto 7%;
padding: 0 6%;
}
img {
display: block;
}
}
&__contents {
width: 100%;
max-width: 944px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 6%;
}
}
&__img {
width: 100%;
margin: 0 0 50px;
@media (max-width: 1024px) {
margin: 0 0 5%;
}
@media (max-width: 767px) {
margin: 0 0 7%;
}
img {
display: block;
}
}
&__text {
font-size: 1.6rem;
line-height: 3.2rem;
color: #111111;
font-weight: 400;
width: 100%;
margin: 0 0 50px;
span {
color: #d85724;
font-weight: bold;
}
@media (max-width: 1024px) {
margin: 0 0 5%;
font-size: 1.5rem;
line-height: 2.8rem;
}
@media (max-width: 767px) {
margin: 0 0 7%;
font-size: 1.4rem;
line-height: 2.4rem;
}
}
&__button {
width: 100%;
max-width: 944px;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
@media (max-width: 1024px) {
box-sizing: border-box;
padding: 0 3%;
width: 49%;
}
@media (max-width: 767px) {
padding: 0 0 0 26%;
width: 100%;
&:not(:last-of-type) {
margin-bottom: 4%;
}
}
&__flex {
display: flex;
align-items: center;
justify-content: space-around;
@media (max-width: 767px) {
display: initial;
}
}
&__link {
width: 100%;
max-width: 400px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 80px;
background: #fff;
font-size: 1.6rem;
line-height: 1.6rem;
font-weight: 400;
color: #031f4d;
border: 1px solid #031f4d;
position: relative;
box-sizing: border-box;
letter-spacing: 1px;
@media (max-width: 1024px) {
font-size: 1.4rem;
line-height: 1.4rem;
height: 70px;
width: 350px;
}
@media (max-width: 767px) {
width: 100%;
font-size: 1.3rem;
line-height: 1.3rem;
height: 50px;
}
&:after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -25px;
width: 50px;
height: 1px;
background-color: #031f4d;
display: block;
z-index: 1;
@media (max-width: 1024px) {
left: -20px;
width: 40px;
}
@media (max-width: 767px) {
left: -25px;
width: 50px;
}
}
}
}
}
.reason-page__sec04 {
width: 100%;
background-color: #dae4f3;
padding: 80px 0;
@media (max-width: 1024px) {
padding: 8% 0;
}
@media (max-width: 767px) {
padding: 10% 0;
}
&__heading {
width: 100%;
max-width: 948px;
margin: 0 auto 50px;
@media (max-width: 1024px) {
margin: 0 auto 5%;
padding: 0 3%;
}
@media (max-width: 767px) {
margin: 0 auto 7%;
padding: 0 6%;
}
img {
display: block;
}
}
&__contents {
width: 100%;
max-width: 944px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 6%;
}
}
&__img {
width: 100%;
margin: 0 0 50px;
@media (max-width: 1024px) {
margin: 0 0 5%;
}
@media (max-width: 767px) {
margin: 0 0 7%;
}
img {
display: block;
}
}
&__text {
font-size: 1.6rem;
line-height: 3.2rem;
color: #111111;
font-weight: 400;
width: 100%;
margin: 0 0 50px;
span {
color: #d85724;
font-weight: bold;
}
@media (max-width: 1024px) {
margin: 0 0 5%;
font-size: 1.5rem;
line-height: 2.8rem;
}
@media (max-width: 767px) {
margin: 0 0 7%;
font-size: 1.4rem;
line-height: 2.4rem;
}
}
&__button {
width: 100%;
max-width: 944px;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
@media (max-width: 1024px) {
box-sizing: border-box;
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 0 0 26%;
}
&__link {
width: 100%;
max-width: 400px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 80px;
background: #fff;
font-size: 1.6rem;
line-height: 1.6rem;
font-weight: 400;
color: #031f4d;
border: 1px solid #031f4d;
position: relative;
box-sizing: border-box;
letter-spacing: 1px;
@media (max-width: 1024px) {
font-size: 1.4rem;
line-height: 1.4rem;
height: 70px;
width: 350px;
}
@media (max-width: 767px) {
width: 100%;
font-size: 1.3rem;
line-height: 1.3rem;
height: 50px;
}
&:after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -25px;
width: 50px;
height: 1px;
background-color: #031f4d;
display: block;
z-index: 1;
@media (max-width: 1024px) {
left: -20px;
width: 40px;
}
@media (max-width: 767px) {
left: -25px;
width: 50px;
}
}
}
}
}
.reason-page__sec05 {
width: 100%;
background-color: #fff;
padding: 80px 0;
@media (max-width: 1024px) {
padding: 8% 0;
}
@media (max-width: 767px) {
padding: 10% 0;
}
&__banner {
width: 100%;
position: relative;
z-index: 1;
margin-bottom: 50px;
@media (max-width: 1024px) {
margin-bottom: 5%;
}
@media (max-width: 767px) {
margin-bottom: 7%;
}
&__default {
width: 100%;
img {
width: 100%;
height: 600px;
object-fit: cover;
display: block;
font-family: 'object-fit: cover;' !important;
@media (max-width: 1024px) {
height: 60vw;
}
@media (max-width: 767px) {
height: auto;
}
}
&__animation {
display: block;
overflow: hidden;
opacity: 0;
&__inner {
display: block;
opacity: 0;
}
}
}
&.fade-in {
.reason-page__mv__banner__default__animation {
animation-name: slideTextX100;
animation-duration: 1.5s;
animation-fill-mode: forwards;
opacity: 0;
}
.reason-page__mv__banner__default__animation__inner {
animation-name: slideTextX-100;
animation-duration: 1.5s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes slideTextX100 {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideTextX-100 {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
}
}
&__heading {
width: 100%;
max-width: 948px;
margin: 0 auto 50px;
@media (max-width: 1024px) {
margin: 0 auto 5%;
padding: 0 3%;
}
@media (max-width: 767px) {
margin: 0 auto 7%;
padding: 0 6%;
}
img {
display: block;
}
}
&__contents {
width: 100%;
max-width: 944px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 6%;
}
}
&__img {
width: 100%;
margin: 0 0 50px;
@media (max-width: 1024px) {
margin: 0 0 5%;
}
@media (max-width: 767px) {
margin: 0 0 7%;
}
img {
display: block;
}
}
&__text {
font-size: 1.6rem;
line-height: 3.2rem;
color: #111111;
font-weight: 400;
width: 100%;
margin: 0 0 50px;
span {
color: #d85724;
font-weight: bold;
}
&.margin-0 {
margin-bottom: 0 !important;
}
@media (max-width: 1024px) {
margin: 0 0 5%;
font-size: 1.5rem;
line-height: 2.8rem;
}
@media (max-width: 767px) {
margin: 0 0 7%;
font-size: 1.4rem;
line-height: 2.4rem;
}
}
&__button {
width: 100%;
max-width: 944px;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
@media (max-width: 1024px) {
box-sizing: border-box;
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 0 0 26%;
}
&__link {
width: 100%;
max-width: 400px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 80px;
background: #fff;
font-size: 1.6rem;
line-height: 1.6rem;
font-weight: 400;
color: #031f4d;
border: 1px solid #031f4d;
position: relative;
box-sizing: border-box;
letter-spacing: 1px;
@media (max-width: 1024px) {
font-size: 1.4rem;
line-height: 1.4rem;
height: 70px;
width: 350px;
}
@media (max-width: 767px) {
width: 100%;
font-size: 1.3rem;
line-height: 1.3rem;
height: 50px;
}
&:after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -25px;
width: 50px;
height: 1px;
background-color: #031f4d;
display: block;
z-index: 1;
@media (max-width: 1024px) {
left: -20px;
width: 40px;
}
@media (max-width: 767px) {
left: -25px;
width: 50px;
}
}
}
}
}
}