pg_loan.scss
html,
body {
// font-size: 10px;
}
.tc {
max-width: none;
}
//pxをvwに変換するfunction
@function get_vw($size, $viewport:750) {
$rate: 100 / $viewport;
@return $rate * $size * 1vw;
}
.layout #loan img {
display: block;
margin: 0 auto;
}
#loan {
.mb-0-auto {
margin: 0 auto;
}
& .container {
width: 100%;
max-width: 1024px;
margin: 0 auto;
@media screen and (max-width: 1024px) {
max-width: 97%;
}
@media screen and (max-width: 767px) {
max-width: 94.7%;
}
}
.layout section {
& a {
//display: block;
margin: 0 auto;
}
}
& .clearfix::after {
content: " ";
display: block;
clear: both;
}
&.br_1024 {
display: none;
@media screen and (max-width: 1024px) {
display: block;
}
}
& .br_767 {
display: none;
@media screen and (max-width: 767px) {
display: block;
}
}
& .br_414 {
display: none;
@media screen and (max-width: 414px) {
display: block;
}
}
& .fv {
height: 720px;
background: url(../images/loan/mv_bg_pc.jpg) no-repeat center / cover;
display: flex;
justify-content: center;
align-items: center;
@media screen and (max-width: 1024px) {
height: get_vw(720, 1024);
}
@media screen and (max-width: 767px) {
background-image: url(../images/loan/mv_bg_sp.jpg);
height: get_vw(1000);
margin-bottom: 6.67%;
}
& img {
margin: auto;
@media screen and (max-width: 1024px) {
width: 92%;
}
@media screen and (max-width: 767px) {
width: auto;
}
}
}
& .intro {
padding: 70px 0;
background-color: #bee3ff;
@media screen and (max-width: 767px) {
padding: 50px 0;
}
& img {
width: 100%;
}
&_title {
margin-bottom: 35px;
@media screen and (max-width: 767px) {
margin-bottom: 17px;
}
& img {
width: 803px;
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 80%;
}
@media screen and (max-width: 767px) {
width: 100%;
}
}
}
&_cont {
&_flex {
display: flex;
align-items: flex-start;
justify-content: space-around;
margin-bottom: 10px;
@media screen and (max-width: 767px) {
flex-wrap: wrap;
margin-bottom: 0;
}
&_item {
width: 480px;
@media screen and (max-width: 1024px) {
width: 47%;
}
@media screen and (max-width: 767px) {
width: 100%;
margin-bottom: 20px;
}
&:last-of-type {
width: 485px;
@media screen and (max-width: 1024px) {
width: 47.5%;
}
@media screen and (max-width: 767px) {
width: 100%;
}
}
& img {
margin-bottom: 10px;
}
& p {
font-size: 1.8rem;
font-weight: 700;
line-height: 1.7;
letter-spacing: 0;
@media screen and (max-width: 767px) {
font-size: 1.5rem;
font-weight: 500;
line-height: 1.5;
}
}
}
}
&_txt {
text-align: right;
@media screen and (max-width: 767px) {
display: none;
}
& p {
font-size: 1.5rem;
font-weight: 500;
line-height: 1.75;
letter-spacing: 0;
@media screen and (max-width: 1024px) {
font-size: 1.3rem;
}
}
}
}
}
& .catch {
padding-bottom: 70px;
background-image: url(../images/loan/catch_bg.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
@media screen and (max-width: 1024px) {
padding-bottom: 6.84%;
}
@media screen and (max-width: 767px) {
background-image: url(../images/loan/catch_bg_sp.jpg);
padding-bottom: 10.67%;
position: relative;
}
& .container {
max-width: 944px;
@media screen and (max-width: 1024px) {
max-width: 90%;
}
@media screen and (max-width: 767px) {
max-width: 89.5%;
}
}
& img {
//width: 100%;
}
&_title {
padding: 27px 0;
margin-bottom: 71px;
background-color: #d8323f;
position: relative;
background: url(../images/loan/catch_title_bg_pc.jpg) no-repeat center / cover;
@media screen and (max-width: 1024px) {
padding: 2.64% 0;
margin-bottom: 6.93%;
}
@media screen and (max-width: 767px) {
background-image: url(../images/loan/catch_title_bg_sp.jpg);
padding: 4% 0;
margin-bottom: 9.47%;
}
&::before {
content: "";
position: absolute;
bottom: 5px;
left: 50%;
transform: translate(-50%, 100%);
width: 0;
height: 0;
border-style: solid;
border-width: 41px 53.5px 0 53.5px;
border-color: #d30e1e transparent transparent transparent;
@media screen and (max-width: 1024px) {
border-width: get_vw(41, 1024) get_vw(53.5, 1024) 0 get_vw(53.5, 1024);
}
@media screen and (max-width: 767px) {
border-width: get_vw(41) get_vw(53.5) 0 get_vw(53.5);
}
}
& img {
width: auto;
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 65%;
}
@media screen and (max-width: 767px) {
width: 83%;
}
}
}
&_bnr {
&:first-of-type {
margin-bottom: 15px;
@media screen and (max-width: 767px) {
margin-bottom: 4.44%;
}
}
}
}
& .detail {
padding: 140px 0 70px;
background: url(../images/loan/detail_bg_pc.png) no-repeat top -100px left 0px/1920px 1035px;
background-color: #fff;
@media screen and (max-width: 1024px) {
background-size: get_vw(1920, 1024) get_vw(1035, 1024);
padding: 13.67% 0 6.84%;
}
@media screen and (max-width: 767px) {
background: url(../images/loan/detail_bg_sp.png) no-repeat top left / get_vw(750) get_vw(841);
background-position: top left, -100px 0;
padding: 28% 0 12.33%;
margin-top: -9%;
}
& .container {
max-width: 944px;
@media screen and (max-width: 1024px) {
max-width: 90%;
}
@media screen and (max-width: 767px) {
max-width: 94.7%;
}
}
& img {}
&_title {
margin-bottom: 40px;
@media screen and (max-width: 767px) {
margin-bottom: 6.41%;
}
& img {
width: auto;
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 90%;
}
@media screen and (max-width: 767px) {
width: auto;
height: get_vw(134);
}
}
}
&_cont {
margin-bottom: 40px;
@media screen and (max-width: 767px) {
margin-bottom: 30px;
}
&_flex {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
& img {
width: 460px;
margin-bottom: 40px;
@media screen and (max-width: 1024px) {
width: calc(100%/2.1);
margin-bottom: 15px;
}
@media screen and (max-width: 767px) {
margin-bottom: 5.63%;
}
}
}
&_txt {
text-align: right;
margin-top: -33px;
@media screen and (max-width: 1024px) {
margin-top: 0;
}
@media screen and (max-width: 767px) {
margin-bottom: 6.67%;
}
& p {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.75;
letter-spacing: 0;
@media screen and (max-width: 1024px) {
font-size: 1.3rem;
}
@media screen and (max-width: 767px) {
font-size: get_vw(22);
margin-top: -0.74%;
}
@media screen and (max-width: 480px) {
text-align: right;
line-height: 1.4em;
}
}
}
}
&_bnr {
@media screen and (max-width: 767px) {
max-width: 94.3%;
margin: auto;
}
}
}
& .recommend {
padding: 75px 0;
background-color: #3f88be;
@media screen and (max-width: 767px) {
padding: 50px 0;
}
& img {
width: 100%;
}
&_title {
margin-bottom: 50px;
@media screen and (max-width: 767px) {
margin-bottom: 30px;
}
& img {
width: 900px;
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 87%;
}
@media screen and (max-width: 767px) {
width: 100%;
}
}
}
&_cont {
&_list {
padding: 57px 0;
margin-bottom: 50px;
border-radius: 10px;
background-color: #fff;
@media screen and (max-width: 767px) {
padding: 35px 0;
margin-bottom: 20px;
}
& ul {
width: fit-content;
margin: 0 auto;
& li {
display: flex;
align-items: flex-start;
margin-bottom: 30px;
@media screen and (max-width: 767px) {
margin-bottom: 20px;
}
&:last-of-type {
margin-bottom: 0;
}
& img {
width: 33px;
margin: 3px 20px 0 0;
@media screen and (max-width: 767px) {
width: 20px;
margin: 0 10px 0 0;
}
}
& p {
font-size: 2.8rem;
font-weight: 700;
line-height: normal;
letter-spacing: 0;
@media screen and (max-width: 767px) {
font-size: 1.7rem;
line-height: 1.35;
}
@media screen and (max-width: 414px) {
font-size: 1.5rem;
}
& br:nth-of-type(2) {
@media screen and (max-width: 767px) {
display: none;
}
}
}
}
}
}
&_arrow {
margin-bottom: 30px;
@media screen and (max-width: 767px) {
margin-bottom: -20px;
}
& img {
width: 118px;
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 13%;
}
@media screen and (max-width: 767px) {
width: 20%;
}
}
}
&_img {
& img {
width: 914px;
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 90%;
}
@media screen and (max-width: 767px) {
width: 100%;
}
}
}
}
}
& .reason {
& img {
width: 100%;
}
&_title {
padding: 55px 0;
background-image: url(../images/loan/reason_title_bg.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
@media screen and (max-width: 767px) {
padding: 35px 0;
}
& img {
width: 852px;
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 83%;
}
@media screen and (max-width: 767px) {
width: 80%;
}
}
}
&_cont01 {
padding: 50px 0 70px;
background-color: #bee3ff;
@media screen and (max-width: 767px) {
padding: 35px 0 55px;
}
&_title {
margin-bottom: 30px;
@media screen and (max-width: 767px) {
margin-bottom: 15px;
}
}
&_top {
margin-bottom: 100px;
@media screen and (max-width: 767px) {
margin-bottom: 60px;
}
& img {
margin-bottom: 40px;
@media screen and (max-width: 767px) {
margin-bottom: 30px;
}
}
& p {
font-size: 1.6rem;
color: #333;
font-weight: 700;
line-height: 1.625;
letter-spacing: 0;
width: 97%;
margin: 0 auto;
@media screen and (max-width: 767px) {
font-size: 1.5rem;
}
}
}
&_mid {
margin-bottom: 30px;
&_title {
padding: 15px 0;
margin-bottom: 30px;
background-color: #0084e6;
@media screen and (max-width: 767px) {
margin-bottom: 15px;
}
& img {
width: 739px;
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 73%;
}
@media screen and (max-width: 767px) {
width: 67%;
}
}
}
&_cont {
& p {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.75;
letter-spacing: 0;
width: 90%;
margin: 0 auto 20px;
@media screen and (max-width: 767px) {
font-size: 1.4rem;
width: 95%;
}
& span {
color: #d8323f;
}
}
&_img {
text-align: center;
& img:first-of-type {
width: 935px;
margin: 0 auto 40px;
@media screen and (max-width: 1024px) {
width: 93%;
}
@media screen and (max-width: 767px) {
width: 100%;
margin-bottom: 30px;
}
}
& h5 {
font-size: 2rem;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0;
margin-bottom: 80px;
position: relative;
z-index: 10;
@media screen and (max-width: 1024px) {
font-size: 1.5rem;
}
@media screen and (max-width: 767px) {
font-size: 1.5rem;
margin-bottom: 40px;
}
&::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 30%);
width: 90%;
height: 20px;
background-color: #fa9a00;
z-index: -1;
@media screen and (max-width: 767px) {
width: 97%;
height: 15px;
max-width: 450px;
}
}
& br:nth-of-type(2) {
@media screen and (max-width: 767px) {
display: none;
}
}
}
& img:last-of-type {
width: 704px;
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 70%;
}
@media screen and (max-width: 767px) {
width: 90%;
}
}
}
}
}
&_bottom {
&_title {
padding: 40px 0;
margin-bottom: 70px;
background-color: #d8323f;
position: relative;
@media screen and (max-width: 767px) {
padding: 25px 0;
margin-bottom: 50px;
}
&::before {
content: "";
position: absolute;
bottom: 5px;
left: 50%;
transform: translate(-50%, 100%);
width: 0;
height: 0;
border-style: solid;
border-width: 50px 75px 0 75px;
border-color: #d83240 transparent transparent transparent;
@media screen and (max-width: 767px) {
border-width: 35px 60px 0 60px;
}
}
& img {
width: 880px;
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 85%;
}
}
}
}
}
&_cont02 {
padding: 80px 0 70px;
background-color: #fff;
@media screen and (max-width: 767px) {
padding: 45px 0;
}
&_title {
margin-bottom: 30px;
@media screen and (max-width: 767px) {
margin-bottom: 15px;
}
}
&_flex {
display: flex;
align-items: flex-start;
justify-content: space-between;
@media screen and (max-width: 767px) {
flex-wrap: wrap;
}
&_item {
width: 502px;
@media screen and (max-width: 1024px) {
width: calc(100%/2.05);
}
@media screen and (max-width: 767px) {
width: 100%;
}
&:first-of-type {
@media screen and (max-width: 767px) {
margin-bottom: 20px;
}
}
& img {
margin-bottom: 15px;
}
& p {
font-size: 1.6rem;
color: #333;
font-weight: 700;
line-height: 1.625;
letter-spacing: 0;
width: 95%;
margin: 0 auto;
@media screen and (max-width: 767px) {
font-size: 1.5rem;
width: 100%;
}
& span {
color: #ff0000;
}
}
}
}
}
&_cont03 {
padding: 80px 0 70px;
background-color: #bee3ff;
@media screen and (max-width: 767px) {
padding: 45px 0;
}
&_title {
margin-bottom: 30px;
@media screen and (max-width: 767px) {
margin-bottom: 15px;
}
}
&_top {
display: flex;
align-items: flex-start;
justify-content: space-around;
margin-bottom: 70px;
@media screen and (max-width: 767px) {
flex-wrap: wrap;
flex-direction: column-reverse;
margin-bottom: 35px;
}
& p {
font-size: 1.6rem;
color: #333;
font-weight: 700;
line-height: 1.625;
letter-spacing: 0;
@media screen and (max-width: 767px) {
font-size: 1.5rem;
}
& span {
color: #ff0101;
}
}
& img {
width: 460px;
margin-left: 5%;
@media screen and (max-width: 1024px) {
width: 45%;
margin-left: 3%;
}
@media screen and (max-width: 767px) {
width: 100%;
margin-left: 0;
margin-bottom: 15px;
}
}
}
&_bottom {
&_title {
margin-bottom: 30px;
position: relative;
z-index: 10;
&::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translate(-50%, 30%);
transform: translate(-50%, 30%);
width: 90%;
height: 20px;
background-color: #fa9a00;
z-index: -1;
@media screen and (max-width: 767px) {
width: 97%;
height: 15px;
}
}
& img {
width: 640px;
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 63%;
}
@media screen and (max-width: 767px) {
width: 67%;
}
}
}
&_cont {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 80%;
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 85%;
}
@media screen and (max-width: 767px) {
width: 97%;
}
& img {
width: 71px;
margin-right: 3%;
float: left;
@media screen and (max-width: 1024px) {
width: 10%;
}
@media screen and (max-width: 767px) {
width: 20%;
margin-right: 5%;
}
}
& p {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.625;
letter-spacing: 0;
@media screen and (max-width: 767px) {
font-size: 1.5rem;
}
@media screen and (max-width: 414px) {
font-size: 1.4rem;
}
& span {
color: #d8323f;
}
}
}
}
}
&_cont04 {
padding: 80px 0 70px;
background-color: #fff;
@media screen and (max-width: 767px) {
padding: 45px 0;
}
&_title {
margin-bottom: 30px;
@media screen and (max-width: 767px) {
margin-bottom: 15px;
}
}
&_flex {
display: flex;
align-items: flex-start;
justify-content: space-between;
@media screen and (max-width: 767px) {
flex-wrap: wrap;
}
&_item {
width: 502px;
@media screen and (max-width: 1024px) {
width: calc(100%/2.05);
}
@media screen and (max-width: 767px) {
width: 100%;
}
&:first-of-type {
@media screen and (max-width: 767px) {
margin-bottom: 25px;
}
}
& img {
margin-bottom: 15px;
}
& p {
font-size: 1.6rem;
color: #333;
font-weight: 700;
line-height: 1.625;
letter-spacing: 0;
width: 95%;
margin: 0 auto;
@media screen and (max-width: 767px) {
font-size: 1.5rem;
width: 100%;
}
& span {
color: #ff0000;
}
}
}
}
}
&_cont05 {
padding: 80px 0 70px;
background-color: #bee3ff;
@media screen and (max-width: 767px) {
padding: 45px 0;
}
&_title {
margin-bottom: 30px;
@media screen and (max-width: 767px) {
margin-bottom: 15px;
}
}
&_flex {
display: flex;
align-items: flex-start;
justify-content: space-between;
@media screen and (max-width: 767px) {
flex-wrap: wrap;
}
&_item {
width: 502px;
@media screen and (max-width: 1024px) {
width: calc(100%/2.05);
}
@media screen and (max-width: 767px) {
width: 100%;
}
&:first-of-type {
@media screen and (max-width: 767px) {
margin-bottom: 25px;
}
}
& img {
margin-bottom: 15px;
}
& p {
font-size: 1.6rem;
color: #333;
font-weight: 700;
line-height: 1.625;
letter-spacing: 0;
width: 95%;
margin: 0 auto;
@media screen and (max-width: 767px) {
font-size: 1.5rem;
width: 100%;
}
& span {
color: #ff0000;
}
}
}
}
}
}
& .example {
padding-bottom: 70px;
background-color: #fff;
@media screen and (max-width: 1024px) {
padding-bottom: 12%;
}
& img {
width: 100%;
}
&_title {
padding: 21px 0;
margin-bottom: 50px;
background-color: #00479d;
position: relative;
display: flex;
justify-content: center;
align-items: center;
@media screen and (max-width: 1024px) {
padding: 2.05% 0;
margin-bottom: 4.88%;
}
@media screen and (max-width: 767px) {
padding: 3.6% 0;
margin-bottom: 7.73%;
}
& img {
width: auto;
margin: 0 auto;
@media screen and (max-width: 1024px) {
height: get_vw(38, 1024);
}
@media screen and (max-width: 767px) {
height: get_vw(47);
}
}
&::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 0 20px;
border-color: #00479d transparent transparent transparent;
position: absolute;
bottom: -20px;
@media screen and (max-width: 767px) {
border-width: get_vw(30) get_vw(30) 0 get_vw(30);
bottom: get_vw(-30);
}
}
}
& .container {
max-width: 940px;
@media screen and (max-width: 1024px) {
width: 90%;
}
@media screen and (max-width: 767px) {
width: 94.7%;
max-width: 94.7%;
}
}
&_cont {
&_item {
margin-bottom: 40px;
background: url(../images/loan/example_obi_pc.png) no-repeat top -9% left -5% / 173px 173px, #eee;
border: 1px solid #00479d;
padding: 20px;
@media screen and (max-width: 1024px) {
background-size: get_vw(173, 1024) get_vw(173, 1024);
}
@media screen and (max-width: 767px) {
background: url(../images/loan/example_obi_sp.png) no-repeat top -5% left -3% / 20.4vw 23.07vw, #eee;
padding: 2.82%;
margin-bottom: 30px;
}
&_title {
display: flex;
align-items: center;
justify-content: flex-start;
height: 40px;
padding-left: 20px;
background-color: #fff;
@media screen and (max-width: 767px) {
height: get_vw(60);
padding-left: get_vw(19);
}
& img {
width: auto;
margin: 0 auto;
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 767px) {
height: get_vw(28);
}
}
}
&_top {
width: 95%;
padding: 5px 0;
margin: 0 auto 30px;
position: relative;
z-index: 10;
@media screen and (max-width: 767px) {
width: 100%;
padding: get_vw(15) 0;
margin-bottom: get_vw(29);
}
&::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translate(-50%, 30%);
transform: translate(-50%, 30%);
width: 100%;
height: 4px;
background-color: #00479d;
border-radius: 1px;
z-index: -1;
@media screen and (max-width: 767px) {
height: get_vw(4);
}
}
& img {
width: auto;
margin: 0 auto;
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 767px) {}
}
}
&_mid {
margin-bottom: 30px;
@media screen and (max-width: 767px) {
margin-bottom: get_vw(20);
}
& img {
width: auto;
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 83%;
}
@media screen and (max-width: 767px) {
width: 97%;
}
}
}
&_bottom {
padding: 20px 20px 20px 0;
margin: 0 auto;
background-color: #ffffff;
border-radius: 1px;
position: relative;
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 767px) {
padding: get_vw(20) 0 get_vw(20) 0;
}
&_title {
background-color: #00479d;
padding: 10px 35px;
margin-right: 30px;
min-width: 170px;
@media screen and (max-width: 1024px) {
min-width: 19.7%;
}
@media screen and (max-width: 767px) {
min-width: auto;
display: inline-block;
padding: get_vw(15) get_vw(30);
}
img {
min-width: 102px;
@media screen and (max-width: 1024px) {
min-width: auto;
}
}
}
&_flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0 auto;
@media screen and (max-width: 767px) {
display: block;
}
& img {
@media screen and (max-width: 1024px) {
width: auto;
height: get_vw(19, 1024);
}
@media screen and (max-width: 767px) {
width: auto;
height: get_vw(31);
max-height: 31px;
}
}
& p {
font-size: 1.8rem;
font-weight: 500;
line-height: 1.7;
letter-spacing: 0;
@media screen and (max-width: 1024px) {
font-size: 1.7rem;
width: 75%;
}
@media screen and (max-width: 767px) {
font-size: 1.4rem;
line-height: 1.375;
width: 100%;
padding: get_vw(30);
}
}
}
}
&:nth-of-type(2) {
@media screen and (max-width: 767px) {
margin-bottom: get_vw(50);
}
& .example_cont_item_title {
& img {
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 767px) {}
}
}
& .example_cont_item_top {
& img {
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 767px) {
height: get_vw(140);
}
}
}
}
}
&_btn {
width: 480px;
margin: 0 auto;
text-align: center;
background-color: #d30e1e;
box-shadow: 0 6px #ac000e;
border-radius: 8px;
position: relative;
@media screen and (max-width: 767px) {
width: 94.37%;
}
&::before {
font-family: "FontAwesome";
content: "\f054";
font-weight: 700;
position: absolute;
top: 42%;
right: 6%;
color: #fff;
font-size: 1.2rem;
}
& a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 60px;
font-size: 1.8rem;
color: #fff;
font-weight: 700;
line-height: 1.375;
letter-spacing: 0.3em;
@media screen and (max-width: 767px) {
height: get_vw(100);
font-size: 1.7rem;
font-size: get_vw(28);
}
}
&:hover {
color: #fff;
background-color: #d8323f;
opacity: 1;
a {
color: #fff;
opacity: 1;
}
}
}
}
}
& .voice {
padding-bottom: 240px;
background-color: #f1f3f8;
@media screen and (max-width: 1024px) {
padding-bottom: 24%;
}
@media screen and (max-width: 767px) {
padding-bottom: 30%;
}
& img {}
&_title {
padding: 21px 0;
margin-bottom: 50px;
background-color: #000f36;
display: flex;
justify-content: center;
position: relative;
@media screen and (max-width: 1024px) {
padding: 2.05% 0;
margin-bottom: 4.88%;
}
@media screen and (max-width: 767px) {
padding: 3.47% 0;
margin-bottom: 7.73%;
}
& img {
margin: 0 auto;
@media screen and (max-width: 1024px) {
height: get_vw(37, 1024);
}
@media screen and (max-width: 767px) {
height: get_vw(47);
}
}
&::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 0 20px;
border-color: #000f36 transparent transparent transparent;
position: absolute;
bottom: -20px;
@media screen and (max-width: 767px) {
border-width: get_vw(30) get_vw(30) 0 get_vw(30);
bottom: get_vw(-30);
}
}
}
& .container {
max-width: 940px;
@media screen and (max-width: 1024px) {
max-width: 90%;
}
@media screen and (max-width: 767px) {
max-width: 94.7%;
}
}
&_cont {
padding: 20px;
margin-bottom: 40px;
background: url(../images/loan/voice_obi_pc.png) no-repeat top -9% left -5% / 173px 173px, #fff;
border: 1px solid #000f36;
@media screen and (max-width: 1024px) {
background-size: get_vw(173, 1024) get_vw(173, 1024);
}
@media screen and (max-width: 767px) {
background: url(../images/loan/voice_obi_sp.png) no-repeat top -5% left -3% / 20.4vw 23.07vw, #fff;
padding: 2.82%;
margin-bottom: 7.04%;
}
&_name {
display: flex;
align-items: center;
justify-content: flex-start;
height: 40px;
padding-left: 20px;
background-color: #f1f3f8;
@media screen and (max-width: 767px) {
height: get_vw(60);
padding-left: get_vw(20);
margin-bottom: 3%;
}
img {
margin-left: 0 !important;
@media screen and (max-width: 767px) {
width: auto !important;
height: get_vw(28);
}
}
}
&_top {
padding: 5px 0;
margin: 0 auto 40px;
position: relative;
@media screen and (max-width: 1024px) {
margin-bottom: 4.34%;
}
@media screen and (max-width: 767px) {
//width: 95%;
padding: 0;
margin-bottom: get_vw(20);
}
& img {
margin: 0 auto;
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 767px) {
width: 85%;
}
}
&::after {
content: "";
width: 100%;
height: 4px;
background-color: #000f36;
display: inline-block;
@media screen and (max-width: 767px) {
height: get_vw(4);
}
}
}
&_bottom {
width: 820px;
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 87%;
}
@media screen and (max-width: 767px) {
width: 95%;
}
& p {
font-size: 1.8rem;
font-weight: 500;
line-height: 1.7;
letter-spacing: 0;
@media screen and (max-width: 1024px) {
font-size: 1.7rem;
}
@media screen and (max-width: 767px) {
font-size: 1.5rem;
}
}
&_img {
width: 240px;
margin-left: 5%;
text-align: center;
float: right;
@media screen and (max-width: 1024px) {
width: 30%;
margin-left: 3%;
}
@media screen and (max-width: 767px) {
width: 40%;
}
& img {
margin-bottom: 7px;
}
& p {
font-size: 1.8rem;
font-weight: 700;
line-height: 1.7;
letter-spacing: 0;
@media screen and (max-width: 767px) {
font-size: 1.7rem;
}
}
}
}
}
&_btn {
width: 480px;
margin: 0 auto;
text-align: center;
background-color: #d30e1e;
box-shadow: 0 6px #ac000e;
border-radius: 8px;
position: relative;
@media screen and (max-width: 767px) {
width: 94.37%;
}
&::before {
font-family: "FontAwesome";
content: "\f054";
font-weight: 700;
position: absolute;
top: 42%;
right: 6%;
color: #fff;
font-size: 1.2rem;
}
& a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 60px;
font-size: 1.8rem;
color: #fff;
font-weight: 700;
line-height: 1.375;
letter-spacing: 0.3em;
@media screen and (max-width: 767px) {
height: get_vw(100);
font-size: 1.7rem;
font-size: get_vw(28);
}
}
&:hover {
color: #fff;
background-color: #d8323f;
opacity: 1;
a {
color: #fff;
opacity: 1;
}
}
}
}
& .contact {
padding: 70px 0 100px;
background-image: url(../images/reason/FCR_reason/reason_41_pc.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
@media screen and (max-width: 767px) {
padding: 50px 0;
}
& .container {
max-width: 944px;
@media screen and (max-width: 1024px) {
max-width: 90%;
}
@media screen and (max-width: 767px) {
max-width: 94.7%;
}
}
h3 {
max-width: 940px;
width: 100%;
margin: 0 auto;
}
& img {
width: 100%;
}
&_title {
margin-bottom: 30px;
& img {
width: 100%;
}
}
&_txt {
margin-bottom: 50px;
@media screen and (max-width: 767px) {
margin-bottom: 30px;
}
& p {
font-size: 1.6rem;
color: #333;
font-weight: 700;
line-height: 1.625;
letter-spacing: 0;
@media screen and (max-width: 767px) {
font-size: 1.7rem;
}
& span {
color: #fe0000;
}
}
}
&_bnr {
&:nth-of-type(3) {
margin-bottom: 30px;
@media screen and (max-width: 767px) {
margin-bottom: 20px;
}
}
}
}
}
/* ===== reason.scss start ===== */
#loan {
.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% - 935px) / 2);
bottom: -2px;
z-index: 1;
@media (max-width: 1024px) {
width: 24vw;
right: 4vw;
}
@media (max-width: 767px) {
bottom: -5px;
right: -16px;
width: 44vw;
z-index: 1
}
&__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;
@media (max-width: 1024px) {
height: 42vw;
}
@media (max-width: 767px) {
height: auto;
}
}
}
}
.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% - 1000px) / 2);
bottom: 74px;
@media (max-width: 1024px) {
width: 21vw;
right: 0;
bottom: 10vw;
}
@media (max-width: 767px) {
width: 38vw;
right: -2vw;
bottom: 0;
}
}
}
.is-pc {
display: block;
@media (max-width: 767px) {
display: none;
}
}
.is-sp {
display: none;
@media (max-width: 767px) {
display: block;
}
}
}
/* ===== reason.scss end ===== */