reason.scss
.page-id-1604 {
.footer {
.section-cta {
padding: 80px 0 !important;
@media (max-width: 1024px) {
padding: 8% 0 !important;
}
@media (max-width: 767px) {
padding: 11% 0 !important;
}
&__heading {
display: none !important;
}
&__contents {
margin: 0 auto !important;
}
}
}
}
#reason-page {
* {
box-sizing: border-box;
}
.is-pc {
display: block;
@media (max-width: 767px) {
display: none;
}
}
.is-sp {
display: none;
@media (max-width: 767px) {
display: block;
}
}
.display_pc {
@media (max-width: 767px) {
display: none;
}
}
.display_sp {
display: none;
@media (max-width: 767px) {
display: block;
}
}
#anc_01,
#anc_02,
#anc_03,
#anc_04,
#anc_05,
#anc_06,
#anc_07 {
transform: translateY(-30px);
@media (max-width: 1024px) {
transform: translateY(-10px);
}
@media (max-width: 767px) {
transform: translateY(0);
}
}
.reason-page__mv {
width: 100%;
position: relative;
box-sizing: border-box;
margin-top: 70px;
z-index: 1;
@media (max-width: 1024px) {
margin-top: 70px;
}
@media (max-width: 767px) {
margin-top: 50px;
}
&__banner {
width: 100%;
position: relative;
&__default {
width: 100%;
opacity: 0;
img {
width: 100%;
height: 701px;
object-fit: cover;
display: block;
font-family: 'object-fit: cover;' !important;
@media (max-width: 1024px) {
height: 70vw;
}
@media (max-width: 767px) {
height: auto;
}
}
}
&__position-img-01 {
position: absolute;
left: 50%;
top: 100px;
width: 100%;
max-width: 1024px;
transform: translateX(-50%);
z-index: 1;
@media (max-width: 1024px) {
width: 100%;
top: 10vw;
max-width: 1024px;
}
@media (max-width: 767px) {
left: 0;
top: 12vw;
transform: none;
width: 100%;
}
img {
display: inline-block;
width: 100%;
}
&__animation {
display: inline-block;
overflow: hidden;
opacity: 0;
&__inner {
display: inline-block;
opacity: 0;
}
}
}
&.fade-in {
.reason-page__mv__banner__default {
opacity: 1;
transition: opacity 0.5s;
}
.reason-page__mv__banner__position-img-01__animation {
animation-name: slideTextX100;
animation-duration: 2s;
animation-delay: 0.4s;
animation-fill-mode: forwards;
opacity: 0;
}
.reason-page__mv__banner__position-img-01__animation__inner {
animation-name: slideTextX-100;
animation-duration: 2s;
animation-delay: 0.4s;
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__top {
background: #f6f9e9;
padding-bottom: 40px;
position: relative;
z-index: 2;
@media (max-width: 1024px) {
padding-bottom: 6%;
}
@media (max-width: 767px) {
padding-bottom: 8%;
}
&__heading {
width: 100%;
background: #fff;
padding: 35px 0 36px;
position: relative;
@media (max-width: 1024px) {
padding: 4% 0 4%;
}
@media (max-width: 767px) {
padding: 6% 0 6%;
}
&:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -24px;
border: 24px solid transparent;
border-top: 20px solid #fff;
@media (max-width: 767px) {
margin-left: -18px;
border: 10px solid transparent;
border-top: 12px solid #fff;
}
}
h2 {
width: 100%;
max-width: 940px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 6%;
}
}
}
&__wrapper {
padding: 65px 0 40px;
width: 100%;
max-width: 940px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 7% 3% 4%;
}
@media (max-width: 767px) {
padding: 10% 6% 6%;
}
}
&__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
&__item {
width: calc(50% - 10px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: 20px;
margin-bottom: 40px;
&:nth-child(2n) {
margin-right: 0;
@media (max-width: 767px) {
flex-direction: row-reverse;
.reason-page__top__text {
margin-left: 0;
margin-right: 3.5%;
&:before {
transform: rotate(180deg);
width: 15px;
height: 30px;
right: -15px;
left: auto;
}
}
}
}
&:nth-child(3),
&:nth-child(4) {
margin-bottom: 0;
@media (max-width: 767px) {
margin-bottom: 0;
}
}
&:nth-child(3) {
@media (max-width: 767px) {
margin-bottom: 8%;
}
}
&:nth-child(4) {
@media (max-width: 767px) {
margin-bottom: 0;
}
}
@media (max-width: 1024px) {
width: calc(50% - 1%);
margin-right: 2%;
margin-bottom: 4%;
}
@media (max-width: 767px) {
width: 100%;
margin-right: 0;
margin-bottom: 8%;
}
}
&__img {
width: 140px;
@media (max-width: 1024px) {
width: 14vw;
}
@media (max-width: 767px) {
width: 30%;
max-width: 200px;
}
}
&__text {
width: calc(100% - 140px);
height: 140px;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 15px;
padding: 20px 30px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-top: 40px;
@media (max-width: 1024px) {
width: calc(100% - 14vw);
padding: 3% 4.5%;
height: auto;
margin-top: 6%;
}
@media (max-width: 767px) {
width: 66.5%;
height: auto;
border-radius: 10px;
margin-top: 0;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
margin-left: 3.5%;
}
&:before {
content: "";
width: 20px;
height: 40px;
background: url(../images/reason/top_img_05_pc.png) no-repeat center;
position: absolute;
top: 15%;
left: -20px;
background-size: contain;
@media (max-width: 767px) {
width: 15px;
height: 30px;
left: -15px;
}
}
p {
font-size: 1.8rem;
line-height: 3.2rem;
font-weight: bold;
color: #262626;
letter-spacing: 1px;
@media (max-width: 1024px) {
font-size: 1.5rem;
line-height: 2.6rem;
letter-spacing: 0;
}
@media (max-width: 767px) {
font-size: 1.3rem;
line-height: 2.3rem;
}
span {
color: #f08524;
}
}
}
&__sub-heading {
position: relative;
h3 {
width: 100%;
max-width: 958px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 4%;
}
}
}
}
.reason-page__greeting {
width: 100%;
padding-bottom: 90px;
background: #fef6eb;
@media (max-width: 1024px) {
padding-bottom: 9%;
}
@media (max-width: 767px) {
padding-bottom: 11%;
}
&__bg {
width: 100%;
background: url(../images/reason/greeting_bg_img_01_pc.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: auto;
padding-top: 70px;
@media (max-width: 1024px) {
background: url(../images/reason/greeting_bg_img_01_tb.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: auto;
padding-top: 7%;
}
@media (max-width: 767px) {
background: url(../images/reason/greeting_bg_img_01_sp.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
padding-top: 9%;
}
}
&__heading {
width: 100%;
img {
width: 100%;
height: 480px;
object-fit: cover;
font-family: "object-fit: cover;" !important;
display: block;
@media (max-width: 1024px) {
height: 48vw;
}
@media (max-width: 767px) {
height: auto;
}
}
}
&__contents {
width: 100%;
max-width: 940px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 6%;
}
}
&__title {
width: 100%;
max-width: 940px;
margin: 0 auto 70px;
@media (max-width: 1024px) {
margin: 0 auto 7%;
padding: 0 3%;
}
@media (max-width: 767px) {
margin: 0 auto 9%;
padding: 0;
}
}
&__box {
width: 100%;
padding: 55px 40px;
background: #fff;
border-radius: 20px;
@media (max-width: 1024px) {
padding: 7% 5%;
border-radius: 20px;
}
@media (max-width: 767px) {
padding: 6%;
border-radius: 15px;
}
p {
font-size: 1.8rem;
line-height: 3.6rem;
color: #6a3906;
font-weight: 500;
@media (max-width: 1024px) {
font-size: 1.5rem;
line-height: 2.9rem;
}
@media (max-width: 767px) {
font-size: 1.4rem;
line-height: 2.6rem;
}
span {
color: #ff9c21;
}
}
}
}
.reason-page__policy {
width: 100%;
margin-bottom: 40px;
background: #fef6eb;
@media (max-width: 1024px) {
margin-bottom: 4%;
}
@media (max-width: 767px) {
margin-bottom: 6%;
}
&__heading {
width: 100%;
img {
width: 100%;
height: 720px;
object-fit: cover;
font-family: "object-fit: cover;" !important;
display: block;
@media (max-width: 1024px) {
height: 72vw;
}
@media (max-width: 767px) {
height: auto;
}
}
}
&__contents {
width: 100%;
max-width: 940px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 6%;
}
}
&__title {
width: 100%;
max-width: 940px;
margin: 0 auto 40px;
@media (max-width: 1024px) {
margin: 0 auto 4%;
padding: 0 3%;
}
@media (max-width: 767px) {
margin: 0 auto 6%;
padding: 0;
}
}
}
.reason-page__button {
width: 100%;
padding-bottom: 20px;
background: #ecf1d6;
@media (max-width: 1024px) {
padding-bottom: 2%;
}
@media (max-width: 767px) {
padding-bottom: 4%;
background: url(../images/reason/button_bg_img_01_sp.png);
background-repeat: no-repeat;
background-position: center bottom -50px;
background-size: contain;
background-color: #ecf1d6;
}
&__heading {
width: 100%;
margin-bottom: 50px;
@media (max-width: 1024px) {
margin-bottom: 5%;
}
@media (max-width: 767px) {
margin-bottom: 7%;
}
img {
width: 100%;
height: 328px;
object-fit: cover;
font-family: "object-fit: cover;" !important;
display: block;
@media (max-width: 1024px) {
height: 32vw;
}
@media (max-width: 767px) {
height: auto;
}
}
}
&__contents {
width: 100%;
max-width: 940px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 6%;
}
}
&__list {
width: 100%;
&__item {
width: 100%;
margin-bottom: 25px;
@media (max-width: 1024px) {
margin-bottom: 3%;
}
@media (max-width: 767px) {
margin-bottom: 5%;
}
&__link {
display: block;
img {
display: block;
}
}
}
}
}
.reason-page__reason01 {
width: 100%;
box-sizing: border-box;
background: #fef6eb;
&__top {
padding: 180px 0 70px;
background: url(../images/reason/reason01_bg_img_01_pc.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: auto;
@media (max-width: 1024px) {
padding: 18% 0 7%;
background: url(../images/reason/reason01_bg_img_01_tb.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
}
@media (max-width: 767px) {
padding: 20% 0 9%;
background: url(../images/reason/reason01_bg_img_01_sp.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
}
}
&__bottom {
padding: 90px 0 70px;
background: url(../images/reason/reason01_bg_img_02_pc.png);
background-repeat: no-repeat;
background-position: left calc((100% - 10px) / 2) top 140px;
background-size: auto;
@media (max-width: 1024px) {
padding: 9% 0 7%;
background: none;
}
@media (max-width: 767px) {
padding: 11% 0 9%;
}
}
&__heading {
width: 100%;
box-sizing: border-box;
margin: 0 0 50px;
@media (max-width: 1024px) {
margin: 0 0 5%;
}
@media (max-width: 767px) {
margin: 0 0 6%;
}
img {
width: 100%;
height: 351px;
object-fit: cover;
display: block;
font-family: 'object-fit: cover;' !important;
@media (max-width: 1024px) {
height: 35vw;
}
@media (max-width: 767px) {
height: auto;
}
}
}
&__contents {
width: 100%;
}
&__sub-heading {
width: 100%;
max-width: 940px;
margin: 0 auto 50px;
@media (max-width: 1024px) {
padding: 0 3%;
margin: 0 auto 5%;
}
@media (max-width: 767px) {
padding: 0 6%;
margin: 0 auto 8%;
}
}
&__text {
width: 100%;
max-width: 940px;
margin: 0 auto 60px;
box-sizing: border-box;
font-size: 1.8rem;
line-height: 3.6rem;
color: #313131;
@media (max-width: 1024px) {
font-size: 1.6rem;
margin: 0 auto 6%;
line-height: 3rem;
padding: 0 3%;
}
@media (max-width: 767px) {
margin: 0 auto 7%;
font-size: 1.4rem;
padding: 0 6%;
line-height: 2.6rem;
}
.color-change {
color: #f08524;
}
}
&__img {
width: 100%;
max-width: 943px;
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%;
}
img {
display: block;
}
}
&__banner {
width: 100%;
box-sizing: border-box;
padding: 60px 0 60px;
background: #ebc696;
@media (max-width: 1024px) {
padding: 6% 0 6%;
}
@media (max-width: 767px) {
padding: 8% 0 8%;
}
&__inner {
width: 100%;
max-width: 958px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 3%;
}
}
&__link {
display: block;
}
}
&__prize {
width: 100%;
max-width: 940px;
margin: 0 auto 6%;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 6%;
}
&__ttl {
border-radius: 25px 25px 0 0;
text-align: center;
// border: 1px solid #f08524;
padding: 15px;
background: #eea74d;
box-sizing: border-box;
@media (max-width: 1024px) {
border-radius: 20px 20px 0 0;
padding: 10px;
}
@media (max-width: 767px) {
padding: 6px;
border-radius: 12px 12px 0 0;
}
h3 {
color: #fff;
font-size: 2.2rem;
font-weight: bold;
line-height: 3.6rem;
position: relative;
display: inline-block;
@media (max-width: 1024px) {
font-size: 1.8rem;
line-height: 3.2rem;
}
@media (max-width: 767px) {
font-size: 1.5rem;
line-height: 3rem;
}
}
}
&__wrapper {
border: 1px solid #eea74d;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: left;
padding: 40px 120px;
background: #fff;
border-radius: 0 0 25px 25px;
@media (max-width: 1024px) {
padding: 5% 6%;
border-radius: 0 0 20px 20px;
}
@media (max-width: 767px) {
padding: 6% 6%;
border-radius: 0 0 12px 12px;
}
}
&__list {
margin-right: 50px;
width: calc(50% - 25px);
@media (max-width: 767px) {
margin-right: 2%;
width: 49%;
}
&:last-child {
margin-right: 0;
}
li {
font-size: 1.6rem;
font-weight: 500;
line-height: 3.6rem;
letter-spacing: 0;
margin-bottom: 5px;
color: #434343;
padding-left: 2.8%;
position: relative;
@media (max-width: 1024px) {
font-size: 1.5rem;
line-height: 3.0rem;
}
@media (max-width: 767px) {
/*font-size: 1.4rem;
line-height: 2.6rem;
margin-bottom: 1%;*/
font-size: 1.1rem;
line-height: 1.6em;
padding-left: 5%;
margin-bottom: 6%;
padding-left: 5%;
letter-spacing: -0.8px;
}
&:before {
content: "";
position: absolute;
top: 1em;
left: 0;
border-radius: 50%;
width: 4px;
height: 4px;
background-color: #000;
@media (max-width: 767px) {
width: 0.3em;
height: 0.3em;
top: 0.6em;
}
}
}
}
}
}
.reason-page__reason02 {
width: 100%;
box-sizing: border-box;
background: #f7faf4;
padding-bottom: 60px;
@media (max-width: 1024px) {
padding: 0 0 6%;
}
@media (max-width: 767px) {
padding: 0 0 7%;
}
&__top {
padding: 180px 0 30px;
background: url(../images/reason/reason02_img_07_pc.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: auto;
@media (max-width: 1024px) {
padding: 18% 0 3%;
background: url(../images/reason/reason02_img_07_pc.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
}
@media (max-width: 767px) {
padding: 20% 0 4%;
background: url(../images/reason/reason02_img_07_sp.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
}
}
&__bottom {
padding: 0 0 30px;
background: url(../images/reason/reason02_img_08_pc.png);
background-repeat: no-repeat;
background-position: left calc((100% - 10px) / 2) top 60px;
background-size: auto;
@media (max-width: 1024px) {
padding: 0 0 3%;
background: none;
}
@media (max-width: 767px) {
padding: 0 0 4%;
}
}
&__heading {
width: 100%;
box-sizing: border-box;
margin: 0 0 50px;
@media (max-width: 1024px) {
margin: 0 0 5%;
}
@media (max-width: 767px) {
margin: 0 0 6%;
}
img {
width: 100%;
height: 329px;
object-fit: cover;
display: block;
font-family: 'object-fit: cover;' !important;
@media (max-width: 1024px) {
height: 33vw;
}
@media (max-width: 767px) {
height: auto;
}
}
}
&__contents {
width: 100%;
}
&__sub-heading {
width: 100%;
max-width: 940px;
margin: 0 auto 50px;
@media (max-width: 1024px) {
padding: 0 3%;
margin: 0 auto 5%;
}
@media (max-width: 767px) {
padding: 0 6%;
margin: 0 auto 8%;
}
}
&__text {
width: 100%;
max-width: 940px;
margin: 0 auto 60px;
box-sizing: border-box;
font-size: 1.8rem;
line-height: 3.6rem;
color: #313131;
@media (max-width: 1024px) {
font-size: 1.6rem;
margin: 0 auto 6%;
line-height: 3rem;
padding: 0 3%;
}
@media (max-width: 767px) {
margin: 0 auto 7%;
font-size: 1.4rem;
padding: 0 6%;
line-height: 2.6rem;
}
.color-change {
color: #f08524;
}
}
&__img {
width: 100%;
max-width: 942px;
margin: 0 auto 60px;
@media (max-width: 1024px) {
margin: 0 auto 6%;
padding: 0 3%;
}
@media (max-width: 767px) {
margin: 0 auto 7%;
padding: 0 6%;
}
img {
display: block;
}
}
&__banner {
width: 100%;
box-sizing: border-box;
padding: 60px 0 60px;
background: #e6eddc;
@media (max-width: 1024px) {
padding: 6% 0 6%;
}
@media (max-width: 767px) {
padding: 8% 0 8%;
}
&__inner {
width: 100%;
max-width: 958px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 3%;
}
}
&__link {
display: block;
}
}
}
.reason-page__reason03 {
width: 100%;
box-sizing: border-box;
background: #fef6eb;
&__top {
padding: 180px 0 30px;
background: url(../images/reason/reason03_img_06_pc.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: auto;
@media (max-width: 1024px) {
padding: 18% 0 3%;
background: url(../images/reason/reason03_img_06_pc.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
}
@media (max-width: 767px) {
padding: 20% 0 5%;
background: url(../images/reason/reason03_img_06_sp.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
}
}
&__bottom {}
&__heading {
width: 100%;
box-sizing: border-box;
margin: 0 0 50px;
@media (max-width: 1024px) {
margin: 0 0 5%;
}
@media (max-width: 767px) {
margin: 0 0 6%;
}
img {
width: 100%;
height: 372px;
object-fit: cover;
display: block;
font-family: 'object-fit: cover;' !important;
@media (max-width: 1024px) {
height: 37vw;
}
@media (max-width: 767px) {
height: auto;
}
}
}
&__contents {
width: 100%;
}
&__sub-heading {
width: 100%;
max-width: 940px;
margin: 0 auto 50px;
@media (max-width: 1024px) {
padding: 0 3%;
margin: 0 auto 5%;
}
@media (max-width: 767px) {
padding: 0 6%;
margin: 0 auto 8%;
}
}
&__text {
width: 100%;
max-width: 940px;
margin: 0 auto 60px;
box-sizing: border-box;
font-size: 1.8rem;
line-height: 3.6rem;
color: #313131;
@media (max-width: 1024px) {
font-size: 1.6rem;
margin: 0 auto 6%;
line-height: 3rem;
padding: 0 3%;
}
@media (max-width: 767px) {
margin: 0 auto 7%;
font-size: 1.4rem;
padding: 0 6%;
line-height: 2.6rem;
}
.color-change {
color: #f08524;
}
}
&__img {
width: 100%;
max-width: 940px;
margin: 0 auto;
padding: 0 0 60px 0;
box-sizing: border-box;
@media (max-width: 1024px) {
margin: 0 auto;
padding: 0 3% 6% 3%;
}
@media (max-width: 767px) {
margin: 0 auto;
padding: 0 6% 7% 6%;
}
img {
display: block;
}
}
&__banner {
width: 100%;
box-sizing: border-box;
padding: 60px 0 60px;
background: #e6eddc;
@media (max-width: 1024px) {
padding: 6% 0 6%;
}
@media (max-width: 767px) {
padding: 8% 0 8%;
}
&__inner {
width: 100%;
max-width: 958px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 3%;
}
}
&__link {
display: block;
}
}
}
.reason-page__reason04 {
width: 100%;
box-sizing: border-box;
background: #f7faf4;
&__top {
padding: 180px 0 30px;
background: url(../images/reason/reason04_img_09_pc.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: auto;
@media (max-width: 1024px) {
padding: 18% 0 3%;
background: url(../images/reason/reason04_img_09_pc.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
}
@media (max-width: 767px) {
padding: 20% 0 4%;
background: url(../images/reason/reason04_img_09_sp.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
}
}
&__bottom {
padding: 90px 0 10px;
background: url(../images/reason/reason04_img_11_pc.png);
background-repeat: no-repeat;
background-position: left calc((100% - 10px) / 2) bottom 70px;
background-size: auto;
@media (max-width: 1024px) {
padding: 9% 0 1%;
background: none;
}
@media (max-width: 767px) {
padding: 11% 0 2%;
}
}
&__heading {
width: 100%;
box-sizing: border-box;
margin: 0 0 50px;
@media (max-width: 1024px) {
margin: 0 0 5%;
}
@media (max-width: 767px) {
margin: 0 0 6%;
}
img {
width: 100%;
height: 397px;
object-fit: cover;
display: block;
font-family: 'object-fit: cover;' !important;
@media (max-width: 1024px) {
height: 39vw;
}
@media (max-width: 767px) {
height: auto;
}
}
}
&__contents {
width: 100%;
}
&__sub-heading {
width: 100%;
max-width: 940px;
margin: 0 auto 50px;
@media (max-width: 1024px) {
padding: 0 3%;
margin: 0 auto 5%;
}
@media (max-width: 767px) {
padding: 0 6%;
margin: 0 auto 8%;
}
}
&__text {
width: 100%;
max-width: 940px;
margin: 0 auto 60px;
box-sizing: border-box;
font-size: 1.8rem;
line-height: 3.6rem;
color: #313131;
@media (max-width: 1024px) {
font-size: 1.6rem;
margin: 0 auto 6%;
line-height: 3rem;
padding: 0 3%;
}
@media (max-width: 767px) {
margin: 0 auto 7%;
font-size: 1.4rem;
padding: 0 6%;
line-height: 2.6rem;
}
.color-change {
color: #f08524;
}
}
&__img {
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 7%;
padding: 0 6%;
}
img {
display: block;
}
}
&__banner {
width: 100%;
box-sizing: border-box;
padding: 60px 0 60px;
background: #e6eddc;
@media (max-width: 1024px) {
padding: 6% 0 6%;
}
@media (max-width: 767px) {
padding: 8% 0 8%;
}
&__inner {
width: 100%;
max-width: 958px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 3%;
}
}
&__link {
display: block;
}
}
&__list {
width: 100%;
max-width: 940px;
margin: 0 auto;
padding: 0 0 60px 0;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@media (max-width: 1024px) {
margin: 0 auto;
padding: 0 3% 6% 3%;
}
@media (max-width: 767px) {
margin: 0 auto;
padding: 0 6% 7% 6%;
}
&__item {
width: 33.3%;
&:nth-child(2) {
margin: 0 20px;
@media (max-width: 1024px) {
margin: 0 2%;
}
@media (max-width: 767px) {
margin: 0 3%;
}
}
&__img {
width: 100%;
}
&__text {
width: 100%;
text-align: center;
color: #6a3906;
font-size: 1.8rem;
line-height: 3.2rem;
font-weight: bold;
margin-top: 20px;
@media (max-width: 1024px) {
font-size: 1.6rem;
line-height: 2.5rem;
margin-top: 3%;
}
@media (max-width: 767px) {
font-size: 1.3rem;
line-height: 1.9rem;
letter-spacing: 0.5px;
margin-top: 5%;
}
}
}
}
}
.reason-page__reason05 {
width: 100%;
box-sizing: border-box;
background: #fef6eb;
padding-bottom: 60px;
@media (max-width: 1024px) {
padding-bottom: 6%;
}
@media (max-width: 767px) {
padding-bottom: 7%;
}
&__top {
padding: 180px 0 30px;
background: url(../images/reason/reason05_img_08_pc.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: auto;
@media (max-width: 1024px) {
padding: 18% 0 3%;
background: url(../images/reason/reason05_img_08_pc.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
}
@media (max-width: 767px) {
padding: 20% 0 5%;
background: url(../images/reason/reason05_img_08_sp.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
}
}
&__bottom {
background-repeat: no-repeat;
background-position: left calc((100% - 10px) / 2) top 140px;
background-size: auto;
padding-bottom: 40px;
@media (max-width: 1024px) {
background: none;
padding-bottom: 4%;
}
@media (max-width: 767px) {
padding-bottom: 6%;
}
}
&__heading {
width: 100%;
box-sizing: border-box;
img {
width: 100%;
height: 381px;
object-fit: cover;
display: block;
font-family: 'object-fit: cover;' !important;
@media (max-width: 1024px) {
height: 38vw;
}
@media (max-width: 767px) {
height: auto;
}
}
}
&__contents {
width: 100%;
}
&__sub-heading {
width: 100%;
max-width: 940px;
margin: 0 auto 50px;
@media (max-width: 1024px) {
padding: 0 3%;
margin: 0 auto 5%;
}
@media (max-width: 767px) {
padding: 0 6%;
margin: 0 auto 8%;
}
}
&__text {
width: 100%;
max-width: 940px;
margin: 0 auto 60px;
box-sizing: border-box;
font-size: 1.8rem;
line-height: 3.6rem;
color: #313131;
@media (max-width: 1024px) {
font-size: 1.6rem;
margin: 0 auto 6%;
line-height: 3rem;
padding: 0 3%;
}
@media (max-width: 767px) {
margin: 0 auto 7%;
font-size: 1.4rem;
padding: 0 6%;
line-height: 2.6rem;
}
.color-change {
color: #f08524;
}
}
&__img {
width: 100%;
max-width: 940px;
margin: 0 auto;
padding: 0 0 40px 0;
box-sizing: border-box;
@media (max-width: 1024px) {
margin: 0 auto;
padding: 0 3% 4% 3%;
}
@media (max-width: 767px) {
margin: 0 auto;
padding: 0 6% 6% 6%;
}
img {
display: block;
}
}
&__img02 {
width: 100%;
max-width: 940px;
margin: 0 auto;
padding: 0 0 60px 0;
box-sizing: border-box;
@media (max-width: 1024px) {
margin: 0 auto;
padding: 0 3% 6% 3%;
}
@media (max-width: 767px) {
margin: 0 auto;
padding: 0 6% 7% 6%;
}
img {
display: block;
}
}
&__banner {
width: 100%;
box-sizing: border-box;
padding: 60px 0 60px;
background: #ebc696;
@media (max-width: 1024px) {
padding: 6% 0 6%;
}
@media (max-width: 767px) {
padding: 8% 0 8%;
}
&__inner {
width: 100%;
max-width: 958px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 3%;
}
}
&__link {
display: block;
}
}
}
.reason-page__reason06 {
width: 100%;
box-sizing: border-box;
background: #f7faf4;
&__top {
padding: 130px 0 20px;
background: url(../images/reason/reason06_img_08_pc.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: auto;
@media (max-width: 1024px) {
padding: 13% 0 3%;
background: url(../images/reason/reason06_img_08_pc.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
}
@media (max-width: 767px) {
padding: 15% 0 4%;
background: url(../images/reason/reason06_img_08_sp.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
}
}
&__middle {
padding: 0 0 30px;
background: url(../images/reason/reason06_img_09_pc.png);
background-repeat: no-repeat;
background-position: left calc((100% - 10px) / 2) top 400px;
background-size: auto;
@media (max-width: 1024px) {
padding: 0 0 3%;
background: none;
}
@media (max-width: 767px) {
padding: 0 0 4%;
}
}
&__bottom {
background: url(../images/reason/reason06_img_11_pc.png);
background-repeat: no-repeat;
background-position: left calc((100% - 10px) / 2) bottom 200px;
background-size: auto;
@media (max-width: 767px) {
background: none;
}
}
&__heading {
width: 100%;
box-sizing: border-box;
margin: 0 0 50px;
@media (max-width: 1024px) {
margin: 0 0 5%;
}
@media (max-width: 767px) {
margin: 0 0 6%;
}
img {
width: 100%;
height: 384px;
object-fit: cover;
display: block;
font-family: 'object-fit: cover;' !important;
@media (max-width: 1024px) {
height: 38vw;
}
@media (max-width: 767px) {
height: auto;
}
}
}
&__contents {
width: 100%;
}
&__sub-heading {
width: 100%;
max-width: 940px;
margin: 0 auto 50px;
@media (max-width: 1024px) {
padding: 0 3%;
margin: 0 auto 5%;
}
@media (max-width: 767px) {
padding: 0 6%;
margin: 0 auto 8%;
}
}
&__text {
width: 100%;
max-width: 940px;
margin: 0 auto 60px;
box-sizing: border-box;
font-size: 1.8rem;
line-height: 4rem;
color: #313131;
@media (max-width: 1024px) {
font-size: 1.6rem;
margin: 0 auto 6%;
line-height: 3rem;
padding: 0 3%;
}
@media (max-width: 767px) {
margin: 0 auto 7%;
font-size: 1.4rem;
padding: 0 6%;
line-height: 2.6rem;
}
.color-change {
color: #f08524;
}
&__img {
float: left;
margin-right: 65px;
@media (max-width: 1024px) {
margin-right: 6%;
}
@media (max-width: 767px) {
float: inherit;
margin-right: 0;
}
}
}
&__img {
width: 100%;
max-width: 940px;
margin: 0 auto;
padding-bottom: 60px;
@media (max-width: 1024px) {
margin: 0 auto;
padding: 0 3% 7%;
}
@media (max-width: 767px) {
margin: 0 auto;
padding: 0 6% 8%;
}
img {
display: block;
}
}
&__banner {
width: 100%;
box-sizing: border-box;
padding: 60px 0 60px;
background: #e6eddc;
@media (max-width: 1024px) {
padding: 6% 0 6%;
}
@media (max-width: 767px) {
padding: 8% 0 8%;
}
&__inner {
width: 100%;
max-width: 958px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 3%;
}
}
&__link {
display: block;
}
}
&__list {
width: 100%;
max-width: 940px;
margin: 0 auto;
padding: 0 0 60px 0;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@media (max-width: 1024px) {
margin: 0 auto;
padding: 0 3% 6% 3%;
}
@media (max-width: 767px) {
margin: 0 auto;
padding: 0 6% 7% 6%;
}
&__item {
width: 33.3%;
&:nth-child(2) {
margin: 0 20px;
@media (max-width: 1024px) {
margin: 0 2%;
}
@media (max-width: 767px) {
margin: 0 3%;
}
}
&__img {
width: 100%;
}
&__text {
width: 100%;
text-align: center;
color: #6a3906;
font-size: 1.8rem;
line-height: 3.2rem;
font-weight: 500;
margin-top: 20px;
@media (max-width: 1024px) {
font-size: 1.6rem;
line-height: 2.5rem;
margin-top: 3%;
}
@media (max-width: 767px) {
font-size: 1.3rem;
line-height: 1.9rem;
margin-top: 5%;
}
}
}
}
}
.reason-page__reason07 {
width: 100%;
box-sizing: border-box;
background: #fef6eb;
&__top {
padding: 180px 0 20px;
background: url(../images/reason/reason07_img_06_pc.jpg), url(../images/reason/reason07_img_07_pc.png);
background-repeat: no-repeat, no-repeat;
background-position: center top, right calc((100% - 10px) / 2) bottom 100px;
background-size: auto, auto;
@media (max-width: 1024px) {
padding: 18% 0 3%;
background: url(../images/reason/reason07_img_06_pc.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
}
@media (max-width: 767px) {
padding: 20% 0 4%;
background: url(../images/reason/reason07_img_06_sp.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
}
}
&__bottom {}
&__heading {
width: 100%;
box-sizing: border-box;
margin: 0 0 50px;
@media (max-width: 1024px) {
margin: 0 0 5%;
}
@media (max-width: 767px) {
margin: 0 0 6%;
}
img {
width: 100%;
height: 305px;
object-fit: cover;
display: block;
font-family: 'object-fit: cover;' !important;
@media (max-width: 1024px) {
height: 30vw;
}
@media (max-width: 767px) {
height: auto;
}
}
}
&__contents {
width: 100%;
}
&__sub-heading {
width: 100%;
max-width: 940px;
margin: 0 auto 50px;
@media (max-width: 1024px) {
padding: 0 3%;
margin: 0 auto 5%;
}
@media (max-width: 767px) {
padding: 0 6%;
margin: 0 auto 8%;
}
}
&__text {
width: 100%;
max-width: 940px;
margin: 0 auto 60px;
box-sizing: border-box;
font-size: 1.8rem;
line-height: 3.6rem;
color: #313131;
@media (max-width: 1024px) {
font-size: 1.6rem;
margin: 0 auto 6%;
line-height: 3rem;
padding: 0 3%;
}
@media (max-width: 767px) {
margin: 0 auto 7%;
font-size: 1.4rem;
padding: 0 6%;
line-height: 2.6rem;
}
.color-change {
color: #f08524;
}
}
&__img {
width: 100%;
max-width: 940px;
margin: 0 auto;
padding: 0 0 80px 0;
box-sizing: border-box;
@media (max-width: 1024px) {
margin: 0 auto;
padding: 0 3% 8% 3%;
}
@media (max-width: 767px) {
margin: 0 auto;
padding: 0 6% 10% 6%;
}
img {
display: block;
}
}
&__img02 {
width: 100%;
max-width: 940px;
margin: 0 auto;
padding: 0 0 60px 0;
box-sizing: border-box;
@media (max-width: 1024px) {
margin: 0 auto;
padding: 0 3% 6% 3%;
}
@media (max-width: 767px) {
margin: 0 auto;
padding: 0 6% 7% 6%;
}
img {
display: block;
}
}
&__banner {
width: 100%;
box-sizing: border-box;
padding: 60px 0 60px;
background: #ebc696;
@media (max-width: 1024px) {
padding: 6% 0 6%;
}
@media (max-width: 767px) {
padding: 8% 0 8%;
}
&__inner {
width: 100%;
max-width: 958px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 3%;
}
}
&__link {
display: block;
}
}
}
.reason-page__reason08 {
width: 100%;
box-sizing: border-box;
background: #e8efc9;
&__top {
padding: 40px 0 40px;
background: url(../images/reason/reason08_img_06_pc.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: auto;
@media (max-width: 1024px) {
padding: 4% 0 4%;
background: url(../images/reason/reason08_img_06_pc.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
}
@media (max-width: 767px) {
padding: 4% 0 5%;
background: url(../images/reason/reason08_img_06_sp.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
}
}
&__heading {
width: 100%;
box-sizing: border-box;
max-width: 1059px;
margin: 0 auto 50px;
@media (max-width: 1024px) {
margin: 0 0 5%;
}
@media (max-width: 767px) {
margin: 0 0 6%;
}
img {
width: 100%;
height: 322px;
object-fit: cover;
display: block;
font-family: 'object-fit: cover;' !important;
@media (max-width: 1024px) {
height: 32vw;
}
@media (max-width: 767px) {
height: auto;
}
}
}
&__contents {
width: 100%;
}
&__link-wrap {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
max-width: 640px;
margin: 0 auto;
@media (max-width: 1024px) {
padding: 0 3%;
}
@media (max-width: 767px) {
padding: 0 6%;
}
&__link {
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;
width: 100%;
max-width: 640px;
height: 60px;
box-sizing: border-box;
background: #cfdb99;
border-radius: 10px;
color: #573a18;
font-size: 1.8rem;
line-height: 1.8rem;
font-weight: bold;
position: relative;
@media screen and (max-width: 1024px) {
height: 50px;
max-width: 550px;
font-size: 1.6rem;
line-height: 1.6rem;
}
@media screen and (max-width: 767px) {
width: 100%;
max-width: 450px;
height: 40px;
font-size: 1.4rem;
line-height: 1.4rem;
border-radius: 5px;
}
@media (max-width: 375px) {
font-size: 1.3rem;
letter-spacing: 0;
}
&::after {
content: "\f138";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 70px;
color: #573a18;
display: block;
text-align: center;
font-size: 2rem;
font-family: "Font Awesome 5 Free";
font-weight: 900;
@media screen and (max-width: 1024px) {
font-size: 1.8rem;
right: 40px;
}
@media screen and (max-width: 767px) {
font-size: 1.6rem;
right: 20px;
}
}
}
}
&__list {
width: 100%;
max-width: 940px;
margin: 0 auto 60px;
box-sizing: border-box;
@media (max-width: 1024px) {
margin: 0 auto 6%;
padding: 0 3%;
}
@media (max-width: 767px) {
margin: 0 auto 7%;
padding: 0 6%;
}
&__item {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 30px;
@media (max-width: 1024px) {
margin-bottom: 3%;
}
@media (max-width: 767px) {
margin-bottom: 6%;
}
&__img {
width: 220px;
margin-right: 20px;
@media (max-width: 1024px) {
width: 25%;
margin-right: 3%;
}
@media (max-width: 767px) {
width: 37%;
margin-right: 3%;
}
}
&__text-wrap {
width: calc(100% - 240px);
background: #FFF;
border-radius: 20px;
padding: 25px 30px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-between;
@media (max-width: 1024px) {
width: 72%;
border-radius: 15px;
padding: 3% 4%;
}
@media (max-width: 767px) {
width: 60%;
border-radius: 10px;
padding: 4.5% 5.5%;
}
&__text {
font-size: 1.8rem;
line-height: 3.6rem;
color: #6a3906;
font-weight: bold;
margin-bottom: 15px;
width: 100%;
@media (max-width: 1024px) {
font-size: 1.6rem;
line-height: 3rem;
margin-bottom: 2%;
}
@media (max-width: 767px) {
font-size: 1.3rem;
line-height: 1.8rem;
margin-bottom: 3%;
}
.color-change {
color: #f08524;
}
}
&__name {
font-size: 1.6rem;
line-height: 3.6rem;
color: #f08524;
width: 100%;
text-align: right;
font-weight: bold;
@media (max-width: 1024px) {
font-size: 1.6rem;
line-height: 3rem;
}
@media (max-width: 767px) {
font-size: 1.3rem;
line-height: 1.8rem;
}
}
}
&:nth-child(2n) {
.reason-page__reason08__list__item__img {
margin-right: 0;
margin-left: 20px;
@media (max-width: 1024px) {
margin-left: 3%;
}
@media (max-width: 767px) {
margin-left: 3%;
}
}
}
}
}
}
.reason-page__reason09 {
width: 100%;
box-sizing: border-box;
background: #FFF;
&__top {
padding: 0 0 20px;
@media (max-width: 1024px) {
padding: 0 0 3%;
}
@media (max-width: 767px) {
padding: 0 0 4%;
}
}
&__heading {
width: 100%;
box-sizing: border-box;
margin: 0 0 50px;
@media (max-width: 1024px) {
margin: 0 0 5%;
}
@media (max-width: 767px) {
margin: 0 0 6%;
}
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;
}
}
}
&__contents {
width: 100%;
}
&__text {
width: 100%;
max-width: 940px;
margin: 0 auto 60px;
box-sizing: border-box;
font-size: 1.8rem;
line-height: 3.6rem;
color: #313131;
@media (max-width: 1024px) {
font-size: 1.6rem;
margin: 0 auto 6%;
line-height: 3rem;
padding: 0 3%;
}
@media (max-width: 767px) {
margin: 0 auto 7%;
font-size: 1.4rem;
padding: 0 6%;
line-height: 2.6rem;
}
.color-change {
color: #f08524;
}
}
&__img {
width: 100%;
max-width: 940px;
margin: 0 auto;
padding: 0 0 40px 0;
box-sizing: border-box;
@media (max-width: 1024px) {
margin: 0 auto;
padding: 0 3% 4% 3%;
}
@media (max-width: 767px) {
margin: 0 auto;
padding: 0 6% 6% 6%;
}
img {
display: block;
}
}
&__img02 {
width: 100%;
max-width: 940px;
margin: 0 auto;
padding: 0 0 60px 0;
box-sizing: border-box;
@media (max-width: 1024px) {
margin: 0 auto;
padding: 0 3% 6% 3%;
}
@media (max-width: 767px) {
margin: 0 auto;
padding: 0 6% 7% 6%;
}
img {
display: block;
}
}
}
}