reason.scss
.page-id-11668 {
.breadcrumb {
display: none;
}
}
#reason-page {
.reason-page__mv {
width: 100%;
position: relative;
box-sizing: border-box;
margin-top: 70px;
@media (max-width: 1024px) {
margin-top: 60px;
}
@media (max-width: 767px) {
margin-top: 50px;
}
&__position01 {
position: absolute;
left: 50%;
top: 85px;
width: 100%;
max-width: 1024px;
transform: translateX(-50%);
z-index: 1;
@media (max-width: 1024px) {
top: 9vw;
width: 100%;
max-width: 1024px;
}
@media (max-width: 767px) {
top: 28vw;
left: 0;
transform: none;
width: 100%;
z-index: 2;
}
}
&__position02 {
position: absolute;
right: calc((100% - 980px) / 2);
bottom: -2px;
z-index: 1;
aspect-ratio: 1/1;
@media (max-width: 1024px) {
width: 28vw;
right: 4vw;
}
@media (max-width: 767px) {
bottom: -5px;
right: -16px;
width: 44vw;
z-index: 1;
aspect-ratio: 337/604;
}
&__animation {
display: inline-block;
overflow: hidden;
opacity: 0;
&.fade-in {
animation: poyoyon1 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
opacity: 1;
}
}
@keyframes poyoyon1 {
0% {
transform: translateX(140px);
opacity: 0;
}
50% {
transform: translateX(0);
}
65% {
transform: translateX(30px);
}
100% {
transform: translateX(0);
}
100%,
20% {
opacity: 1;
}
}
}
&__position03 {
position: absolute;
left: calc((100% - 870px) / 2);
top: 190px;
z-index: 1;
@media (max-width: 1024px) {
width: 19vw;
top: 19vw;
left: 6vw;
}
@media (max-width: 767px) {
top: auto;
bottom: 2vw;
left: 5vw;
width: 29vw;
}
&__animation {
display: inline-block;
overflow: hidden;
opacity: 0;
&.fade-in {
animation: poyoyon1 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
opacity: 1;
}
}
@keyframes poyoyon1 {
0% {
transform: translateX(140px);
opacity: 0;
}
50% {
transform: translateX(0);
}
65% {
transform: translateX(30px);
}
100% {
transform: translateX(0);
}
100%,
20% {
opacity: 1;
}
}
}
&__bg {
width: 100%;
img {
width: 100%;
height: 420px;
object-fit: cover;
display: block;
font-family: 'object-fit: cover;' !important;
aspect-ratio: 32/7;
@media (max-width: 1024px) {
height: 42vw;
}
@media (max-width: 767px) {
height: auto;
aspect-ratio: 30/29;
}
}
}
}
.reason-page__top {
padding-bottom: 110px;
background: url(../images/reason/top_bg.png) repeat;
@media (max-width: 1024px) {
padding-bottom: 11%;
}
@media (max-width: 767px) {
padding-bottom: 16%;
background-size: 12px;
}
&__heading {
width: 100%;
background: #d30e1e;
padding: 22px 0 24px;
position: relative;
text-align: center;
@media (max-width: 1024px) {
padding: 2.2% 0 2.4%;
}
@media (max-width: 767px) {
padding: 4% 0;
}
&:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -24px;
border: 24px solid transparent;
border-top: 20px solid #d30e1e;
@media (max-width: 767px) {
margin-left: -18px;
border: 18px solid transparent;
border-top: 15px solid #d30e1e;
}
}
h2 {
max-width: 940px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 6%;
}
}
}
&__sub-heading {
width: 100%;
max-width: 940px;
margin: 0 auto;
padding-top: 54px;
text-align: center;
@media (max-width: 1024px) {
padding: 5.4% 3% 0;
}
@media (max-width: 767px) {
padding: 7.4% 6% 0;
}
}
&__content {
width: 100%;
max-width: 940px;
margin: 40px auto 0;
@media (max-width: 1024px) {
padding: 0 3%;
margin-top: 4%;
}
@media (max-width: 767px) {
padding: 0 6%;
margin-top: 6%;
}
}
&__list {
background: #eeeeee;
border-radius: 10px;
padding: 35px 184px;
@media (max-width: 1024px) {
padding: 3.5% 15%;
}
@media (max-width: 767px) {
padding: 7%;
}
}
&__item {
font-size: 2.4rem;
line-height: 2.2rem;
font-weight: bold;
margin-bottom: 40px;
position: relative;
padding-left: 40px;
letter-spacing: 0;
@media (max-width: 1024px) {
font-size: 2rem;
line-height: 2rem;
margin-bottom: 4%;
padding-left: 7%;
}
@media (max-width: 767px) {
font-size: 1.6rem;
line-height: 2.2rem;
margin-bottom: 6%;
padding-left: 9%;
}
&::before {
content: "";
background: url(../images/reason/top_icon_pc.png) no-repeat;
background-size: contain;
background-position: center;
position: absolute;
top: 0;
left: 0;
width: 28px;
height: 29px;
@media (max-width: 767px) {
content: "";
background: url(../images/reason/top_icon_sp.png) no-repeat;
background-size: contain;
background-position: center;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 21px;
}
}
&:last-child {
margin-bottom: 0;
}
br {
@media (max-width: 475px) {
display: none;
}
}
}
}
.reason-page__contents {
&__heading {
margin-top: -45px;
@media (max-width: 1024px) {
margin-top: -4.5%;
}
@media (max-width: 767px) {
margin-top: -6.5%;
}
img {
width: 100%;
height: 339px;
object-fit: cover;
font-family: "object-fit: cover;" !important;
display: block;
@media (max-width: 1024px) {
height: 33.9vw;
}
@media (max-width: 767px) {
height: auto;
}
}
}
}
.reason-page__reason01 {
background: #faf6f6;
padding-bottom: 100px;
@media (max-width: 1024px) {
padding-bottom: 10%;
}
@media (max-width: 767px) {
padding-bottom: 10%;
}
&__heading {
width: 100%;
max-width: 1024px;
margin: 0 auto 24px;
padding-top: 80px;
@media (max-width: 1024px) {
padding: 8% 3% 0;
}
@media (max-width: 767px) {
padding: 10% 6% 0;
}
}
&__img {
width: 100%;
max-width: 1024px;
margin: 0 auto 35px;
@media (max-width: 1024px) {
padding: 0 3%;
margin-bottom: 3.5%;
}
@media (max-width: 767px) {
padding: 0 6%;
margin-bottom: 5.5%;
}
}
&__text {
max-width: 1024px;
margin: 0 auto 55px;
@media (max-width: 1024px) {
padding: 0 3%;
margin-bottom: 5.5%;
}
@media (max-width: 767px) {
padding: 0 6%;
margin-bottom: 7.5%;
}
p {
padding: 0 20px;
@media (max-width: 1024px) {
padding: 0 2%;
}
@media (max-width: 767px) {
padding: 0 4%;
}
}
}
&__box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
max-width: 1024px;
margin: 0 auto 60px;
@media (max-width: 1024px) {
padding: 0 3%;
margin-bottom: 6%;
}
@media (max-width: 767px) {
display: block;
padding: 0 6%;
margin-bottom: 8%;
}
}
&__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
max-width: 1024px;
margin: 0 auto 20px;
@media (max-width: 1024px) {
padding: 0 3%;
margin-bottom: 2%;
}
@media (max-width: 767px) {
display: block;
padding: 0 6%;
margin-bottom: 4%;
}
}
&__content {
width: calc(50% - 10px);
display: flex;
align-items: center;
flex-direction: column;
margin-right: 20px;
@media (max-width: 1024px) {
margin-right: 2%;
width: calc(50% - 1%);
}
@media (max-width: 767px) {
display: block;
margin-right: 0;
width: 100%;
margin-bottom: 10%;
}
&:nth-child(2n) {
margin-right: 0;
@media (max-width: 767px) {
margin-bottom: 0;
}
}
&__img {
margin-bottom: 15px;
@media (max-width: 1024px) {
margin-bottom: 1.5%;
}
@media (max-width: 767px) {
margin-bottom: 3.5%;
}
}
&__text {
padding: 0 20px;
@media (max-width: 1024px) {
padding: 0 2%;
}
@media (max-width: 767px) {
padding: 0 4%;
}
}
}
&__title {
width: 100%;
max-width: 1024px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 6%;
}
}
&__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row-reverse;
align-items: center;
background: #ffffff;
padding: 30px 40px;
@media (max-width: 1024px) {
padding: 3% 4%;
}
@media (max-width: 767px) {
padding: 6.8% 4%;
display: block;
}
}
&__left {
width: calc(100% - 327px);
@media (max-width: 767px) {
width: 100%;
}
}
&__right {
width: 307px;
margin-left: 20px;
@media (max-width: 767px) {
width: 48%;
margin-left: 4%;
float: right;
}
}
&__btn {
width: 100%;
max-width: 1024px;
margin: 0 auto;
text-align: center;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 10%;
}
}
&__link {
display: block;
}
p {
font-size: 1.6rem;
line-height: 2.6rem;
font-weight: bold;
color: #333333;
letter-spacing: 0;
@media (max-width: 1024px) {
font-size: 1.4rem;
line-height: 2.4rem;
}
@media (max-width: 767px) {
font-size: 1.4rem;
line-height: 2.6rem;
font-weight: 500;
}
span {
color: #e50012;
}
}
.is-margin-bt {
margin-bottom: 65px;
@media (max-width: 1024px) {
margin-bottom: 6.5%;
}
@media (max-width: 767px) {
margin-bottom: 8.5%;
}
}
}
.reason-page__reason02 {
background: #f1f3f8;
padding-bottom: 100px;
@media (max-width: 1024px) {
padding-bottom: 10%;
}
@media (max-width: 767px) {
padding-bottom: 10%;
}
&__heading {
width: 100%;
max-width: 1024px;
margin: 0 auto 24px;
padding-top: 80px;
@media (max-width: 1024px) {
padding: 8% 3% 0;
}
@media (max-width: 767px) {
padding: 10% 6% 0;
}
}
&__text {
max-width: 1024px;
margin: 0 auto 55px;
@media (max-width: 1024px) {
padding: 0 3%;
margin-bottom: 5.5%;
}
@media (max-width: 767px) {
padding: 0 6%;
margin-bottom: 7.5%;
}
p {
padding: 0 20px;
@media (max-width: 1024px) {
padding: 0 2%;
}
@media (max-width: 767px) {
padding: 0 4%;
}
}
}
&__imgbox {
width: 100%;
max-width: 1024px;
margin: 0 auto 60px;
@media (max-width: 1024px) {
padding: 0 3%;
margin-bottom: 6%;
}
@media (max-width: 767px) {
padding: 0 6%;
margin-bottom: 8%;
}
&__inner {
background: #ffffff;
position: relative;
@media (max-width: 767px) {
padding-bottom: 6%;
}
}
&__bg {
text-align: center;
img {
position: relative;
z-index: 1;
}
}
}
&__title {
background: #003566;
text-align: center;
color: #fff;
font-size: 2rem;
line-height: 3.6rem;
font-weight: 600;
padding: 0 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
align-items: center;
justify-content: center;
border: 2px solid #003567;
@media (max-width: 1024px) {
font-size: 1.8rem;
line-height: 3.4rem;
}
@media (max-width: 767px) {
font-size: 1.3rem;
line-height: 1.8rem;
border: none;
padding: 3%;
}
@media (max-width: 475px) {
letter-spacing: 0;
font-size: 1.2rem;
}
}
&__contents {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
font-size: 1.6rem;
line-height: 2.8rem;
font-weight: 500;
background: #fff;
border: 2px solid #003567;
letter-spacing: 0;
@media (max-width: 1024px) {
font-size: 1.4rem;
line-height: 2.6rem;
}
@media (max-width: 767px) {
font-size: 1.2rem;
line-height: 1.6rem;
border: none;
}
@media (max-width: 475px) {
padding: 4%;
font-size: 1.1rem;
}
}
&__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between;
margin-top: -18%;
position: relative;
z-index: 5;
padding: 0 5%;
@media (max-width: 767px) {
margin-top: -21%;
}
}
&__item {
@media (max-width: 767px) {
width: 48.5%;
margin-right: 3%;
justify-content: space-between;
border: 2px solid #003567;
background: #fff;
box-sizing: border-box;
&:nth-child(2n) {
margin-right: 0;
}
&:nth-child(1),
&:nth-child(2) {
margin-bottom: 3%;
}
}
}
&__position01,
&__position02,
&__position03,
&__position04 {
position: absolute;
width: 283px;
@media (max-width: 1024px) {
width: 263px;
}
}
&__position01 {
top: 45px;
left: 60px;
z-index: 2;
}
&__position02 {
top: 45px;
right: 60px;
z-index: 2;
}
&__position03 {
bottom: 60px;
right: 60px;
z-index: 2;
}
&__position04 {
bottom: 60px;
left: 60px;
z-index: 2;
}
&__position05 {
position: absolute;
top: -45px;
left: 460px;
z-index: 2;
@media (max-width: 1024px) {
left: calc(50% - 50px);
width: 20vw;
top: -5vw;
}
@media (max-width: 475px) {
display: none;
}
}
.is-red {
.reason-page__reason02__title {
border: 2px solid #d30e1e;
background: #d30e1e;
}
.reason-page__reason02__contents {
border: 2px solid #d30e1e;
}
}
.is-sp {
.is-red {
border: 2px solid #d30e1e;
.reason-page__reason02__title {
background: #d30e1e;
border: none;
}
.reason-page__reason02__contents {
border: none;
}
}
}
&__box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
max-width: 1024px;
margin: 0 auto 60px;
@media (max-width: 1024px) {
padding: 0 3%;
margin-bottom: 6%;
}
@media (max-width: 767px) {
display: block;
padding: 0 6%;
margin-bottom: 8%;
}
&__img {
width: 460px;
margin-left: 20px;
@media (max-width: 1024px) {
width: 46%;
margin-left: 2%;
}
@media (max-width: 767px) {
margin-left: 0;
width: 100%;
}
}
&__text {
width: calc(100% - 480px);
@media (max-width: 1024px) {
width: calc(100% - 48%);
}
@media (max-width: 767px) {
width: 100%;
padding: 0 4%;
margin-bottom: 7%;
}
}
}
&__btn {
width: 100%;
max-width: 1024px;
margin: 0 auto;
text-align: center;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 10%;
}
}
&__link {
display: block;
}
p {
font-size: 1.6rem;
line-height: 2.6rem;
font-weight: bold;
color: #333333;
letter-spacing: 0;
@media (max-width: 1024px) {
font-size: 1.4rem;
line-height: 2.4rem;
}
@media (max-width: 767px) {
font-size: 1.4rem;
line-height: 2.6rem;
font-weight: 500;
}
span {
color: #e50012;
}
}
}
.reason-page__reason03 {
background: #faf6f6;
padding-bottom: 100px;
@media (max-width: 1024px) {
padding-bottom: 10%;
}
@media (max-width: 767px) {
padding-bottom: 10%;
}
&__heading {
width: 100%;
max-width: 1024px;
margin: 0 auto 24px;
padding-top: 80px;
@media (max-width: 1024px) {
padding: 8% 3% 0;
}
@media (max-width: 767px) {
padding: 10% 6% 0;
}
}
&__box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
max-width: 1024px;
margin: 0 auto 60px;
@media (max-width: 1024px) {
padding: 0 3%;
margin-bottom: 6%;
}
@media (max-width: 767px) {
display: block;
padding: 0 6%;
margin-bottom: 8%;
}
}
&__content {
width: calc(50% - 10px);
display: flex;
align-items: center;
flex-direction: column;
margin-right: 20px;
@media (max-width: 1024px) {
margin-right: 2%;
width: calc(50% - 1%);
}
@media (max-width: 767px) {
display: block;
margin-right: 0;
width: 100%;
margin-bottom: 10%;
}
&:nth-child(2n) {
margin-right: 0;
@media (max-width: 767px) {
margin-bottom: 0;
}
}
&__img {
margin-bottom: 15px;
@media (max-width: 1024px) {
margin-bottom: 1.5%;
}
@media (max-width: 767px) {
margin-bottom: 3.5%;
}
}
&__text {
padding: 0 20px;
@media (max-width: 1024px) {
padding: 0 2%;
}
@media (max-width: 767px) {
padding: 0 4%;
}
}
}
&__title {
width: 100%;
max-width: 1024px;
margin: 0 auto 20px;
@media (max-width: 1024px) {
padding: 0 3%;
margin-bottom: 2%;
}
@media (max-width: 767px) {
padding: 0 6%;
margin-bottom: 4%;
}
}
&__sub-title {
width: 100%;
margin-bottom: 20px;
}
&__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
max-width: 1024px;
margin: 0 auto 60px;
@media (max-width: 1024px) {
padding: 0 3%;
margin-bottom: 6%;
}
@media (max-width: 767px) {
display: block;
padding: 0 6%;
margin-bottom: 8%;
}
}
&__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row-reverse;
align-items: flex-start;
background: #ffffff;
padding: 30px 40px;
margin-bottom: 20px;
@media (max-width: 1024px) {
padding: 3% 4%;
margin-bottom: 2%;
}
@media (max-width: 767px) {
padding: 6.8% 4%;
display: block;
margin-bottom: 4%;
}
&:nth-child(4) {
margin-bottom: 0;
}
}
&__left {
width: calc(100% - 220px);
padding-left: 20px;
@media (max-width: 1024px) {
padding-left: 2%;
}
@media (max-width: 767px) {
width: 100%;
padding-left: 0;
}
p {
font-weight: 500 !important;
}
}
&__right {
width: 200px;
margin-left: 20px;
@media (max-width: 767px) {
width: 48%;
margin-left: 4%;
float: right;
}
}
&__text {
max-width: 1024px;
margin: 0 auto 60px;
@media (max-width: 1024px) {
padding: 0 3%;
margin-bottom: 6%;
}
@media (max-width: 767px) {
padding: 0 6%;
margin-bottom: 8%;
}
p {
background: #fffdf8;
padding: 30px 40px;
font-weight: 500 !important;
@media (max-width: 1024px) {
padding: 3% 4%;
}
@media (max-width: 767px) {
padding: 5% 6%;
}
}
}
&__btn {
width: 100%;
max-width: 1024px;
margin: 0 auto;
text-align: center;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 10%;
}
}
&__link {
display: block;
}
p {
font-size: 1.6rem;
line-height: 2.6rem;
font-weight: bold;
color: #333333;
letter-spacing: 0;
@media (max-width: 1024px) {
font-size: 1.4rem;
line-height: 2.4rem;
}
@media (max-width: 767px) {
font-size: 1.4rem;
line-height: 2.6rem;
font-weight: 500;
}
span {
color: #e50012;
}
}
}
.reason-page__reason04 {
background: #f1f3f8;
padding-bottom: 200px;
@media (max-width: 1024px) {
padding-bottom: 20%;
}
@media (max-width: 767px) {
padding-bottom: 22%;
}
&__heading {
width: 100%;
max-width: 1024px;
margin: 0 auto 24px;
padding-top: 80px;
@media (max-width: 1024px) {
padding: 8% 3% 0;
}
@media (max-width: 767px) {
padding: 10% 6% 0;
}
}
&__box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
max-width: 1024px;
margin: 0 auto 60px;
@media (max-width: 1024px) {
padding: 0 3%;
margin-bottom: 6%;
}
@media (max-width: 767px) {
display: block;
padding: 0 6%;
margin-bottom: 8%;
}
}
&__content {
width: calc(50% - 10px);
display: flex;
align-items: center;
flex-direction: column;
margin-right: 20px;
@media (max-width: 1024px) {
margin-right: 2%;
width: calc(50% - 1%);
}
@media (max-width: 767px) {
display: block;
margin-right: 0;
width: 100%;
margin-bottom: 10%;
}
&:nth-child(2n) {
margin-right: 0;
@media (max-width: 767px) {
margin-bottom: 0;
}
}
&__img {
margin-bottom: 15px;
@media (max-width: 1024px) {
margin-bottom: 1.5%;
}
@media (max-width: 767px) {
margin-bottom: 3.5%;
}
}
&__text {
padding: 0 20px;
@media (max-width: 1024px) {
padding: 0 2%;
}
@media (max-width: 767px) {
padding: 0 4%;
}
}
}
&__btn {
width: 100%;
max-width: 1024px;
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 6%;
}
}
&__link {
width: 100%;
max-width: 480px;
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: 60px;
background: #d30e1e;
-webkit-box-shadow: 0 8px 0 #ac000e;
box-shadow: 0 8px 0 #ac000e;
transition: 0.3s;
font-size: 1.8rem;
line-height: 1.8rem;
font-weight: bold;
color: #fff;
position: relative;
box-sizing: border-box;
letter-spacing: 1px;
border-radius: 12px;
@media (max-width: 1024px) {
font-size: 1.5rem;
line-height: 1.5rem;
height: 60px;
width: 420px;
}
@media (max-width: 767px) {
width: 100%;
border-radius: 7px;
font-size: 1.3rem;
line-height: 1.3rem;
height: 50px;
-webkit-box-shadow: 0 4px 0 #ac000e;
box-shadow: 0 4px 0 #ac000e;
}
&::after {
content: "\f105";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 25px;
color: #fff;
display: block;
text-align: center;
font-size: 2.2rem;
font-family: "FontAwesome";
font-weight: 900;
@media (max-width: 1024px) {
font-size: 2rem;
right: 20px;
}
@media (max-width: 767px) {
font-size: 1.7rem;
right: 10px;
}
}
}
p {
font-size: 1.6rem;
line-height: 2.6rem;
font-weight: bold;
color: #333333;
letter-spacing: 0;
@media (max-width: 1024px) {
font-size: 1.4rem;
line-height: 2.4rem;
}
@media (max-width: 767px) {
font-size: 1.4rem;
line-height: 2.6rem;
font-weight: 500;
}
span {
color: #e50012;
}
}
}
.reason-page__bottom {
position: relative;
background: url(../images/reason/bottom_img_03_pc.jpg) no-repeat;
background-repeat: no-repeat;
background-position: center top;
background-size: auto;
padding-bottom: 75px;
padding-top: 60px;
@media (max-width: 1024px) {
padding-bottom: 10.5%;
padding-top: 6%;
}
@media (max-width: 767px) {
background: url(../images/reason/bottom_img_03_sp.jpg) no-repeat;
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
padding-bottom: 9.5%;
padding-top: 8%;
}
&__heading {
margin-top: -180px;
@media (max-width: 1024px) {
margin-top: -18%;
}
@media (max-width: 767px) {
margin-top: -20%;
}
img {
width: 100%;
height: 140px;
object-fit: cover;
font-family: "object-fit: cover;" !important;
display: block;
@media (max-width: 1024px) {
height: 14vw;
}
@media (max-width: 767px) {
height: auto;
}
}
}
&__sub-heading {
width: 100%;
max-width: 800px;
margin: 0 auto 20px;
padding-top: 25px;
@media (max-width: 1024px) {
padding: 0 3%;
padding-top: 2.5%;
margin-bottom: 2%;
}
@media (max-width: 767px) {
padding: 0 6%;
margin-bottom: 4%;
padding-top: 4.5%;
}
}
&__content {
max-width: 800px;
width: 100%;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 6%;
}
}
&__text {
background: rgba(255, 255, 255, 0.9);
p {
font-size: 1.6rem;
line-height: 2.6rem;
font-weight: bold;
color: #333333;
letter-spacing: 0;
padding: 35px 200px 35px 40px;
@media (max-width: 1024px) {
font-size: 1.4rem;
line-height: 2.4rem;
padding: 3.5% 20% 3.5% 4%;
}
@media (max-width: 767px) {
font-size: 1.4rem;
line-height: 2.6rem;
font-weight: 500;
padding: 6% 7.5% 22% 7.5%;
}
span {
color: #e50012;
}
}
}
&__position {
position: absolute;
}
.position01 {
left: calc((100% - 1005px) / 2);
bottom: 10px;
@media (max-width: 1024px) {
display: none;
}
@media (max-width: 767px) {
display: block;
width: 23vw;
left: 13vw;
bottom: 10vw;
}
}
.position02 {
right: calc((100% - 1075px) / 2);
bottom: 74px;
@media (max-width: 1024px) {
width: 21vw;
right: 0;
bottom: 10vw;
}
@media (max-width: 767px) {
width: 38vw;
right: -2vw;
bottom: -0.4vw;
}
}
}
.is-pc {
display: block;
@media (max-width: 767px) {
display: none;
}
}
.is-sp {
display: none;
@media (max-width: 767px) {
display: block;
}
}
}