comparison.scss
$tab: 1024px;
$sp: 767px;
@mixin tb {
@media (max-width: ($tab)) {
@content;
}
}
@mixin sp {
@media (max-width: ($sp)) {
@content;
}
}
// margin padding setting start
.layout__main-single {
// margin setting start
$i: 1;
@while $i < 13 {
// ①繰り返すスタイル
.mb-#{$i * 10} {
margin-bottom: 10px * $i;
@include sp {
margin-bottom: 2% + $i;
}
}
// ②繰り返しの条件
$i: $i+1;
}
$i: 1;
@while $i < 13 {
// ①繰り返すスタイル
.mt-#{$i * 10} {
margin-top: 10px * $i;
@include sp {
margin-top: 2% + $i;
}
}
// ②繰り返しの条件
$i: $i+1;
}
// padding setting start
$i: 1;
@while $i < 13 {
// ①繰り返すスタイル
.pd-#{$i * 10} {
padding: 10px * $i 0;
@include sp {
padding: 2% + $i 0;
}
}
// ②繰り返しの条件
$i: $i+1;
}
// padding-top setting start
$i: 1;
@while $i < 13 {
// ①繰り返すスタイル
.pdt-#{$i * 10} {
padding-top: 10px * $i;
@include sp {
padding-top: 2% + $i;
}
}
// ②繰り返しの条件
$i: $i+1;
}
// padding-bottom setting start
$i: 1;
@while $i < 13 {
// ①繰り返すスタイル
.pdb-#{$i * 10} {
padding-bottom: 10px * $i;
@include sp {
padding-bottom: 2% + $i;
}
}
// ②繰り返しの条件
$i: $i+1;
}
}
.comparison {
&__inner {
max-width: 940px;
padding: 0 50px;
margin: 0 auto;
@include tb {
padding: 0 4%;
}
@include sp {
padding: 0 5.33%;
}
}
}
.comparison-fv {
h2 {
width: 100%;
height: 515px;
@media (max-width:1100px) {
height: 46vw;
}
@include sp {
height: 110vw;
}
img {
object-fit: cover;
width: 100%;
height: 100%;
}
}
}
.comparison-point {
&__top {
padding: 70px 0;
@include tb {
padding: 7% 0;
}
@include sp {
padding: 12.13% 0 10.67%;
}
&__ttl {
text-align: center;
margin-bottom: 40px;
@include tb {
margin-bottom: 4%;
}
@include sp {
margin-bottom: 7.46%;
}
img {
@include tb {
width: 39.36%;
}
@include sp {
width: 74.63%;
}
}
}
&__txt {
font-size: 1.8rem;
line-height: 3.6rem;
font-weight: 700;
letter-spacing: 0;
@include sp {
font-size: 1.5rem;
font-weight: 500;
line-height: 2;
}
strong {
color: #e20000;
}
}
}
&__links {
background-color: #3fb4e5;
box-shadow: 0 0 10px rgba(0, 0, 0, .6);
padding: 30px 0;
@include tb {
padding: 3% 0;
}
@include sp {
padding: 9.33% 0;
}
&__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
&__item {
width: 25.32%;
@include tb {}
@include sp {
width: 49%;
margin-bottom: 0.5%;
}
&:nth-of-type(1) {
margin-left: -10px;
@include tb {
margin-left: -1.06%;
}
}
&:nth-of-type(4n) {
margin-right: -10px;
@include sp {
margin-right: 0;
}
}
&:nth-of-type(2n) {
@include sp {
margin-left: 1%;
}
}
img {
display: block;
}
}
}
}
&__sec {
padding: 170px 0 20px;
@include tb {
padding: 20.5% 0 3%;
}
@include sp {
padding: 26.93% 0 4%;
}
&:nth-of-type(2n + 1) {
background-color: #d9f4ff;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
@media (max-width:1024px) and (min-width:768px) {
margin-top: 4%;
}
@include sp {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
}
&__blk {
max-width: 1004px;
background-color: #3fb4e5;
padding: 20px;
margin: 0 auto;
position: relative;
z-index: 1;
@include tb {
padding: 2%;
margin: 0 4%;
}
@include sp {
padding: 0 0 6%;
margin: 0 4%;
}
&::before {
content: "";
width: 230px;
height: 230px;
background-color: #3fb4e5;
border-radius: 50%;
position: absolute;
top: -115px;
left: 0;
z-index: -1;
@include sp {
width: 34.27vw;
height: 34.27vw;
top: -17vw;
}
}
&::after {
top: -100px;
left: 70px;
}
.comparison__inner {
@include tb {
padding: 0;
}
@include sp {
padding: 0;
}
}
&__ttl {
background-color: #fff;
display: inline-block;
border-left: 6px solid #2079dd;
box-shadow: 0 0 14px rgba(0, 0, 0, .3);
padding: 15px 45px 15px 30px;
position: absolute;
top: -30px;
left: 50px;
@include sp {
padding: 2.67vw 4vw 1.47vw 4.8vw;
top: -3vw;
left: 5vw;
}
img {
@include tb {
height: 4.39vw;
}
@include sp {
height: 7.8vw;
}
}
}
&__cnt {
background-color: #fff;
padding: 60px 30px 90px;
margin: 0 -50px;
@include tb {
padding: 6% 3% 9%;
margin: 0;
}
@include sp {
border: 1.33vw solid #3fb4e5;
padding: 15% 3% 20%;
}
&__compare {
display: flex;
margin-bottom: 50px;
@include tb {}
&__item {
width: 48.94%;
display: flex;
flex-direction: column;
&:nth-of-type(2n) {
margin-left: auto;
.comparison-point__sec__blk__cnt__compare__item__icon {
border-color: #2079dd;
}
.comparison-point__sec__blk__cnt__compare__item__txt {
background-color: #2079dd;
}
}
&__ttl {
text-align: center;
margin-bottom: 20px;
@include sp {
margin-bottom: 2.67vw;
}
img {
@include tb {
height: 2.93vw;
}
@include sp {
height: 4.8vw;
}
}
}
&__icon {
text-align: center;
width: 120px;
height: 120px;
border-radius: 50%;
background-color: #fff;
border: 10px solid #ff8400;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto -80px;
position: relative;
@include tb {
width: 11.71vw;
height: 11.71vw;
}
@include sp {
width: 16vw;
height: 16vw;
border-width: 1.33vw;
margin-bottom: -28%;
}
img {
@include tb {
max-width: 7.8vw;
max-height: 7.8vw;
}
@include sp {
max-width: 10.67vw;
max-height: 10.67vw;
}
}
}
&__txt {
min-height: 128px;
color: #fff;
font-size: 1.6rem;
line-height: 3.2rem;
font-weight: 900;
background-color: #ff8400;
border-radius: 20px;
padding: 90px 30px 30px;
flex-grow: 1;
font-weight: bold;
@include tb {
//padding: 9% 3% 3%;
}
@include sp {
font-size: 1.5rem;
line-height: 1.4;
border-radius: 2.67vw;
text-align: justify;
padding: 30% 6% 12%;
}
}
}
}
&__point {
&__ttl {
text-align: center;
background-color: #3fb4e5;
padding: 24px 0;
margin-bottom: 20px;
position: relative;
@include tb {
padding: 2.4% 0;
margin-bottom: 2%;
}
@include sp {
padding: 3.73vw 0;
padding: 1.4vw 0;
margin-bottom: 5.33vw;
}
img {
@include tb {
height: 3.12vw;
}
@include sp {
margin-left: 19%;
height: 9.47vw;
position: relative;
}
}
&::before {
position: absolute;
bottom: -3px;
left: calc(50% - 276px);
}
&::after {
content: "";
width: 74px;
height: 74px;
background: url(../images/comparison/point_sec_cmn_icon_03_pc.png) no-repeat center / contain;
position: absolute;
top: -15px;
margin-left: 25px;
@include tb {
width: 7.22vw;
height: 7.22vw;
}
@include sp {
width: 9.73vw;
height: 9.73vw;
background-image: url(../images/comparison/point_sec_cmn_icon_03_sp.png);
margin-left: 1%;
}
}
}
&__txt {
font-size: 1.8rem;
line-height: 3.6rem;
font-weight: 700;
letter-spacing: 0;
@include sp {
font-size: 1.5rem;
font-weight: 500;
line-height: 1.9;
}
strong {
color: #e20000;
}
}
}
}
&__case {
max-width: 940px;
background-color: #fff;
border: 10px solid #2079dd;
padding: 30px 30px 30px;
margin: -50px -20px 30px;
@include tb {
border-width: 0.98vw;
padding: 3% 4% 3%;
margin: -5% 3% 3%;
}
@include sp {
width: auto;
padding: 0 5.33% 4%;
margin: -10% 4% 0%;
}
&__ttl {
text-align: center;
margin-top: -4rem;
margin-bottom: 40px;
@include tb {
margin-top: -4%;
margin-bottom: 5%;
}
@include sp {
margin-top: -5%;
margin-bottom: 6%;
}
img {
margin-top: -17px;
@include tb {
width: 72.82%;
margin-top: -1.7%;
}
@include sp {
width: 70.67vw;
margin-top: -6%;
}
}
}
&__flex {
display: flex;
@include sp {
display: block;
}
.comparison-point__sec__blk__case__img {
min-width: 420px;
margin-top: 0;
margin-left: 20px;
@include tb {
min-width: 47.73%;
margin-top: 0;
margin-left: 2%;
}
@include sp {
min-width: auto;
margin-left: 0;
}
}
}
&__txt {
font-size: 1.8rem;
line-height: 3.6rem;
font-weight: 700;
letter-spacing: 0;
@include sp {
font-size: 1.5rem;
font-weight: 500;
line-height: 1.8;
margin-bottom: 6%;
}
strong {
color: #e20000;
}
}
&__img {
margin-top: 20px;
@include tb {
margin-top: 2%;
}
}
&__pic {
text-align: center;
margin-top: 15px;
@include tb {
margin-top: 1.5%;
}
}
}
}
&#point-01 {
.comparison-point__sec__blk {
&::after {
content: "";
width: 91px;
height: 61px;
background: url(../images/comparison-2/li2_icon_07_pc.png) no-repeat center /contain;
background: url(../images/comparison/point_sec_icon_01_pc.png) no-repeat center /contain;
position: absolute;
@include sp {
width: 14.4vw;
height: 9.73vw;
background-image: url(../images/comparison-2/li2_icon_07_sp.png);
top: -14.2vw;
left: 10.3vw;
}
}
&__cnt {
&__point {
&__ttl {
&::before {
content: "";
width: 136px;
height: 117px;
background: url(../images/comparison/point_sec_person_01_pc.png) no-repeat center / contain;
@include tb() {
height: 12vw;
}
@include sp {
width: 25.4vw;
height: 20.9vw;
background-image: url(../images/comparison/point_sec_person_01_sp.png);
left: 2.5%;
}
}
}
}
}
}
}
&#point-02 {
.comparison-point__sec__blk {
&::after {
content: "";
width: 90px;
height: 60px;
background: url(../images/comparison/point_sec_icon_02_pc.png) no-repeat center /contain;
position: absolute;
@include sp {
width: 13.87vw;
height: 9.33vw;
background-image: url(../images/comparison/point_sec_icon_02_sp.png);
top: -13.4vw;
left: 10vw;
}
}
&__cnt {
&__point {
&__ttl {
&::before {
content: "";
width: 202px;
height: 118px;
background: url(../images/comparison/point_sec_person_02_pc.png) no-repeat center / contain;
left: calc(50% - 306px);
@include tb() {
left: calc(50% - 286px);
height: 12vw;
}
@include sp {
width: 20.53vw;
height: 19.53vw;
background-image: url(../images/comparison/point_sec_person_02_sp.png);
bottom: 0;
left: 4%;
}
}
}
}
}
}
}
&#point-03 {
.comparison-point__sec__blk {
&::after {
content: "";
width: 45px;
height: 63px;
background: url(../images/comparison/point_sec_icon_03_pc.png) no-repeat center /contain;
position: absolute;
left: 93px;
@include sp {
width: 18.13vw;
height: 9.73vw;
background-image: url(../images/comparison/point_sec_icon_03_sp.png);
left: 9vw;
top: -14vw;
}
}
&__cnt {
&__point {
&__ttl {
&::before {
content: "";
content: "";
width: 235px;
height: 119px;
background: url(../images/comparison/point_sec_person_03_pc.png) no-repeat center / contain;
left: calc(50% - 360px);
@include tb() {
left: calc(50% - 335px);
height: 12vw;
}
@include sp {
width: 29.8vw;
height: 18.47vw;
background-image: url(../images/comparison/point_sec_person_03_sp.png);
left: -7px;
bottom: 0;
}
}
}
}
}
}
}
&#point-04 {
.comparison-point__sec__blk {
&::after {
content: "";
width: 59px;
height: 63px;
background: url(../images/comparison/point_sec_icon_04_pc.png) no-repeat center /contain;
position: absolute;
left: 86px;
@include sp {
width: 10.4vw;
height: 11.2vw;
background-image: url(../images/comparison/point_sec_icon_04_sp.png);
left: 11.7vw;
top: -15.1vw;
}
}
&__cnt {
&__point {
&__ttl {
&::before {
content: "";
width: 189px;
height: 118px;
background: url(../images/comparison/point_sec_person_04_pc.png) no-repeat center / contain;
left: calc(50% - 320px);
@include tb {
height: 12vw;
}
@include sp {
width: 33.87vw;
height: 19.27vw;
background-image: url(../images/comparison/point_sec_person_04_sp.png);
left: 2%;
bottom: 0;
}
}
}
}
}
}
}
&#point-05 {
.comparison-point__sec__blk {
&::after {
content: "";
width: 61px;
height: 63px;
background: url(../images/comparison/point_sec_icon_05_pc.png) no-repeat center /contain;
position: absolute;
left: 85px;
@include sp {
width: 10.27vw;
height: 10.4vw;
background-image: url(../images/comparison/point_sec_icon_05_sp.png);
left: 12vw;
top: -14.4vw;
}
}
&__cnt {
&__point {
&__ttl {
&::before {
content: "";
width: 182px;
height: 122px;
background: url(../images/comparison/point_sec_person_05_pc.png) no-repeat center / contain;
left: calc(50% - 340px);
@include tb {
left: calc(50% - 300px);
height: 12.5vw;
}
@include sp {
width: 36.2vw;
height: 21.73vw;
background-image: url(../images/comparison/point_sec_person_05_sp.png);
left: -6%;
}
}
}
}
}
}
}
&#point-06 {
.comparison-point__sec__blk {
&::after {
content: "";
width: 68px;
height: 66px;
background: url(../images/comparison/point_sec_icon_06_pc.png) no-repeat center /contain;
position: absolute;
top: -103px;
left: 81px;
@include sp {
width: 12.13vw;
height: 11.6vw;
background-image: url(../images/comparison/point_sec_icon_06_sp.png);
top: -15.4vw;
left: 11vw;
}
}
&__cnt {
&__point {
&__ttl {
&::before {
content: "";
width: 166px;
height: 114px;
background: url(../images/comparison/point_sec_person_06_pc.png) no-repeat center / contain;
left: calc(50% - 300px);
@include tb {
height: 12vw;
}
@include sp {
width: 29.93vw;
height: 20.8vw;
background-image: url(../images/comparison/point_sec_person_06_sp.png);
left: -1%;
bottom: -1%;
}
}
}
}
}
}
}
&#point-07 {
.comparison-point__sec__blk {
&::after {
content: "";
width: 97px;
height: 61px;
background: url(../images/comparison/point_sec_icon_07_pc.png) no-repeat center /contain;
position: absolute;
top: -98px;
left: 67px;
@include sp {
width: 15.33vw;
height: 9.47vw;
background-image: url(../images/comparison/point_sec_icon_07_sp.png);
top: -13.5vw;
left: 10vw;
}
}
&__cnt {
&__point {
&__ttl {
&::before {
content: "";
width: 164px;
height: 108px;
background: url(../images/comparison/point_sec_person_07_pc.png) no-repeat center / contain;
left: calc(50% - 320px);
@include tb {
left: calc(50% - 290px);
height: 12vw;
}
@include sp {
width: 29.13vw;
height: 19.13vw;
background-image: url(../images/comparison/point_sec_person_07_sp.png);
left: -2%;
bottom: 0;
}
}
}
}
}
}
}
&#point-08 {
.comparison-point__sec__blk {
&::after {
content: "";
width: 97px;
height: 61px;
background: url(../images/comparison-2/li2_icon_07_pc.png) no-repeat center /contain;
position: absolute;
top: -98px;
left: 67px;
@include sp {
width: 13.33vw;
height: 9.47vw;
background-image: url(../images/comparison-2/li2_icon_07_sp.png);
top: -13.5vw;
left: 10vw;
}
}
}
}
}
}
.comparison-which {
&__head {
max-width: 1920px;
height: 145px;
margin: 0 auto -44px;
@include tb {
height: 14.5vw;
margin-bottom: -4.4%;
}
@include sp {
height: auto;
margin-bottom: -6.5%;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
&__cnt {
max-width: 1920px;
background: url(../images/comparison/which_bg_01_pc.jpg) no-repeat center / cover;
padding: 50px 0 70px;
margin: 0 auto;
@include tb {
padding: 5% 0 7%;
}
@include sp {
background-image: url(../images/comparison/which_bg_01_sp.jpg);
padding: 10% 0 12%;
}
&__blk {
display: flex;
justify-content: center;
@include sp {
display: block;
margin: 0 5.33%;
}
&__item {
width: 400px;
background-color: #ff8400;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, .7);
padding: 30px;
margin: 0 15px;
position: relative;
@include tb {
margin: 0 1.5%;
}
@include sp {
width: auto;
padding: 7.5% 6% 15%;
margin: 0;
border-radius: 2.67vw;
}
&:nth-of-type(2n) {
width: 490px;
background-color: #162c8b;
@include sp {
width: auto;
margin-top: 7.5%;
}
.comparison-which__cnt__blk__item {
&__list {
@include sp {
padding-bottom: 3%;
}
&__item {
padding: 0px 0 10px 40px;
margin-bottom: 10px;
@include sp {
padding: 0px 0 10px 11%;
}
&::before {
background-color: #2079dd;
}
&::after {
background-color: #3fb4e5;
}
&:nth-last-of-type(2) {
&::after {
@include sp {
width: 70%;
}
}
}
&:nth-last-of-type(3) {
&::after {
@include sp {
width: 70%;
}
}
}
&:nth-last-of-type(4) {
&::after {
@include sp {
width: 85%;
}
}
}
}
}
&__img {
right: -310px;
left: auto;
bottom: -71px;
@media screen and (max-width:1800px) {
width: 270px;
right: -70px;
bottom: 0px;
}
@include tb {
width: 25vw;
right: -5vw;
}
@include sp {
width: 41.07vw;
bottom: -1%;
right: -15px;
}
}
}
}
br {
@include tb {
display: none;
}
}
.display-tb {
display: none;
@include tb {
display: block;
}
}
.hide-tb {
@include tb {
display: none;
}
}
.display-sp {
display: none;
@include sp {
display: block;
}
}
.hide-sp {
@include sp {
display: none;
}
}
&__ttl {
text-align: center;
margin-bottom: 20px;
@include tb {
margin-bottom: 2%;
}
@include sp {
margin-bottom: 5%;
}
}
&__list {
min-height: 312px;
background-color: #fff;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: center;
@include sp {
min-height: auto;
padding: 9% 6% 0%;
}
&__item {
font-size: 1.8rem;
line-height: 3.2rem;
font-weight: 700;
letter-spacing: 0;
padding: 0px 0 20px 40px;
margin-bottom: 20px;
position: relative;
display: flex;
align-items: center;
@include sp {
font-size: 1.4rem;
line-height: 1.5;
padding: 0px 0 20px 11%;
}
&::before {
content: "";
width: 26px;
height: 26px;
background: url(../images/comparison/which_icon_01_pc.png) no-repeat center /16px 15px, #ff8400;
position: absolute;
left: 0;
@include sp {
width: 20px;
height: 20px;
background: url(../images/comparison/which_icon_01_sp.png) no-repeat center /11px 10px, #ff8400;
}
}
&::after {
content: "";
width: 100%;
height: 2px;
background-color: #ffd800;
position: absolute;
left: 0;
bottom: 0;
@include sp {
height: 0.27vw;
}
}
&:nth-last-of-type(1) {
&::after {
content: none;
}
}
&:nth-last-of-type(2) {
&::after {
@include sp {
width: 65%;
}
}
}
&:nth-last-of-type(3) {
&::after {
@include sp {
width: 85%;
}
}
}
}
}
&__img {
position: absolute;
bottom: -77px;
left: -360px;
@media screen and (max-width:1800px) {
bottom: 0;
right: -33px;
left: auto;
width: 290px;
}
@include tb {
width: 30vw;
}
@include sp {
width: 42.8vw;
right: -6%;
}
}
}
}
}
}
.comparison-loan {
padding: 48px 0 70px;
@include tb {
padding: 4.8% 0 7%;
}
@include sp {
padding: 11.87% 0 12.13%;
}
&__ttl {
text-align: center;
margin-bottom: 40px;
@include tb {
margin-bottom: 4%;
}
@include sp {
margin-bottom: 7.46%;
}
img {
@include sp {
width: 92.54%;
}
}
}
&__txt {
font-size: 1.8rem;
line-height: 3.6rem;
letter-spacing: 0;
font-weight: 700;
margin-bottom: 33px;
@include tb {
margin-bottom: 3.3%;
}
@include sp {
font-size: 1.5rem;
font-weight: 500;
line-height: 1.8;
margin-bottom: 5%;
}
strong {
color: #e20000;
}
}
&__img {
text-align: center;
margin: 0 auto;
@include tb {
margin: 0 4%;
}
@include sp {
margin: 0 5.33%;
}
}
}
.comparison-last {
&__main {
max-width: 1920px;
text-align: center;
background: url(../images/comparison/last_bg_pc.jpg) no-repeat center / cover;
margin: 0 auto;
@include tb {
padding: 8.7% 0 4.5%;
}
@include sp {
background-image: url(../images/comparison/last_bg_sp.jpg);
padding: 5.87% 0 4%;
}
&__ttl {
@include sp {
margin: 0 -5%;
}
}
}
&__btm {
text-align: center;
background-color: #2079dd;
padding: 40px 0;
@include tb {
padding: 4% 0;
}
@include sp {
padding: 8% 0 9.33%;
}
&__btn {
text-align: center;
a {
width: 400px;
height: 60px;
color: #fff;
font-size: 1.8rem;
font-weight: 700;
line-height: 3rem;
letter-spacing: 0.2em;
border-radius: 30px;
border: 2px solid #fff;
background-color: #162f8a;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
position: relative;
@include sp {
width: auto;
height: 50px;
font-size: 1.5rem;
border-width: 0.27vw;
}
&::after {
font-family: "Font Awesome 5 Free";
content: "\f105";
color: #fef11d;
font-weight: 700;
position: absolute;
right: 25px;
}
}
}
}
}
.add-voice {
max-width: 850px;
width: 100%;
margin: 4% auto;
&__ttl {
img {
display: block;
margin: 0 auto;
}
}
&__box {
background-color: #f2f2f2;
padding: 4% 2.6%;
@include tb {
padding: 4%;
}
&--pic {
img {
display: block;
margin: 0 auto;
}
}
&--txt {
b {
color: #e93434;
font-weight: 600;
}
}
}
}
.add-works {
img {
display: block;
margin-left: auto;
margin-right: auto;
}
background: #f2f2f2;
&__inner {
max-width: 944px;
width: 100%;
margin: auto;
@include tb {
width: 92%;
}
}
&__ttl {
width: 100%;
height: 105px;
@include tb {
height: 10.5vw;
}
@include sp {
height: 25.3vw;
}
img {
object-fit: cover;
width: 100%;
height: 100%;
}
}
&__box {
background-color: #fff;
&--inner {
padding: 4%;
box-sizing: border-box;
}
}
&__btn {
border: 2px solid #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
width: 400px;
height: 60px;
color: #fff;
font-size: 1.8rem;
font-weight: 700;
line-height: 3rem;
letter-spacing: 0.2em;
border-radius: 30px;
border: 2px solid #fff;
background-color: #162f8a;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
position: relative;
@include sp {
width: auto;
height: 50px;
font-size: 1.5rem;
border-width: 0.27vw;
}
&::after {
font-family: "Font Awesome 5 Free";
content: "\f105";
color: #fef11d;
font-weight: 700;
position: absolute;
right: 25px;
}
}
}
.h-ttl-large {
@media (max-width:767px) {
height: 14vw !important;
}
}
.orig-pdt {
@media (max-width:767px) {
padding: 26% 3% 20%;
}
}
.start {
p {
@media (max-width:480px) {
line-height: 1.8em;
}
.space {
@media (max-width:480px) {
float: right;
/*画像の位置を右下にしたい場合はright*/
height: 9.3em;
/*画像上の余白の高さ*/
}
@media (max-width:430px) {
height: 10.7em;
}
@media (max-width:417px) {
height: 13.7em;
}
@media (max-width:368px) {
height: 15em;
}
@media (max-width:340px) {
height: 16.3em;
}
}
}
img {
float: right;
margin: 0 0 3% 3%;
clear: both;
@include sp {
width: 42%;
}
@media (max-width:480px) {
margin: 3% 0 0 3%;
}
}
}
.moyamoya {
background-color: #dddddd;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
h3 {
img {
display: block;
margin: 0 auto 3%;
}
}
ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
li {
display: block;
box-sizing: border-box;
background-color: #fff;
width: 24%;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
@include sp {
width: 48.5%;
margin-bottom: 3%;
}
p {
padding: 4% 12% 6%;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.8em;
font-weight: bold;
@include tb {
font-size: 2vw;
}
@include sp {
padding: 4% 8% 6%;
font-size: 3.6vw;
}
}
span {
display: block;
margin: 6% 0 0 6%;
}
}
}
}
.main {
margin-top: 6rem;
@include tb {
margin-top: 6%;
}
h3 {
height: 478px;
width: 100%;
@include tb {
height: 46vw;
}
@include sp() {
height: auto;
}
img {
object-fit: cover;
height: 100%;
width: 100%;
}
}
}
.sub {
&__inner {
max-width: 966px;
width: 100%;
margin: auto;
padding: 0 20px;
@include tb {
box-sizing: border-box;
padding: 0 4%;
}
}
h4 {
text-align: center;
img {
display: block;
margin: 0 auto 4%;
}
}
ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
li {
@include tb {
width: 33%;
}
@include sp {
width: 100%;
}
}
}
}
.recommend {
display: none;
}
.recommend2 {
width: 100%;
height: 514px;
@media (max-width:1064px) {
height: 48vw;
}
@include sp {
height: 120vw;
}
img {
object-fit: cover;
width: 100%;
height: 100%;
}
}
.difference_ttl {
padding-left: 20px !important;
padding-right: 20px !important;
@include tb {
padding-left: 0 !important;
padding-right: 0 !important;
width: 92%;
margin: auto;
display: block;
.comparison__inner {
padding: 0;
}
}
@include sp {
width: 88%;
}
h3 img {
display: block;
margin: auto;
}
}
.comparison-point {
.float-right {
@include sp {
display: inline-flex;
flex-wrap: wrap;
}
img {
float: right;
margin: 0 0 0 3%;
display: block;
order: 1;
@include tb {
margin: 0 0 3% 3%;
}
@include sp {
float: none;
width: 100%;
margin: 4% 0 0;
}
}
}
}
.message {
background-size: auto auto;
background-color: rgba(255, 211, 141, 1);
background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(255, 200, 113, 1) 5px, rgba(255, 200, 113, 1) 10px);
&__inner {
max-width: 1024px;
width: 100%;
display: block;
margin: auto;
@media(max-width:1064px) {
width: 92%;
}
@include sp {
width: 88%;
}
h3 {
@include sp {
width: 110%;
margin-left: -6%;
margin-right: -3%;
}
img {
display: block;
margin: 0 auto -4.3rem;
@include tb {
margin: 0 auto -5.3%;
}
@include sp {
margin: 0 auto -14%;
}
}
}
.box {
background-color: #fff;
border-radius: 1rem;
padding: 4%;
box-sizing: border-box;
@include sp {
padding: 16% 4% 4%;
}
img {
display: block;
margin: auto;
}
}
}
}
.none-sp {
@include sp {
display: none;
}
}
.none-pc {
display: none;
@include sp {
display: block;
}
}
.mt-sp-10 {
@include sp {
margin-top: 2%;
}
}