tc_estimate-point.scss
.estimate-point {
/*overflow: hidden;*/
section {
box-sizing: border-box;
}
p {
font-size: 1.6rem;
font-weight: bold;
line-height: 1.625em;
color: #333;
@media screen and (max-width:767px) {
font-size: 1.6rem;
}
/*@media screen and (max-width:480px) {
font-size: 1.4rem;
letter-spacing: 0em;
}*/
}
.font-white {
color: #fff;
max-width: 944px;
display: block;
margin: 0 auto;
}
.font-black {
color: #333;
max-width: 944px;
display: block;
margin: 0 auto;
}
span {
color: #333;
}
strong {
color: #f15a24;
font-weight: normal;
}
img {
display: block;
margin: 0 auto;
}
a {
text-decoration: none;
display: block;
transition: 0.3s ease;
margin: 0 auto;
&:hover {
opacity: 0.7;
}
}
.display-pc {
display: block;
@media screen and (max-width:767px) {
display: none;
}
}
.display-pc2 {
display: block;
@media screen and (max-width:1064px) {
display: none;
}
}
.display-sp {
display: none;
@media screen and (max-width:767px) {
display: block;
}
}
.display-pc-sp {
display: block;
@media screen and (max-width:1064px) {
display: none;
}
@media screen and (max-width:767px) {
display: block;
}
}
.display-tb {
display: none;
@media screen and (max-width:1064px) {
display: block;
}
}
}
#estimate-point {
.estimate-point {
&__inner {
max-width: 1064px;
margin: 0 auto;
box-sizing: border-box;
padding: 0 20px;
@media screen and (max-width:1064px) {
padding: 0 3.76%;
}
@media screen and (max-width:767px) {
padding: 0 5.33%;
max-width: 640px;
}
&--cnt01 {
box-sizing: border-box;
padding: 0 10px;
margin-bottom: 40px;
@media screen and (max-width:1064px) {
padding: 0 1%;
margin-bottom: 4%;
}
@media screen and (max-width:767px) {
padding: 0 5%;
}
>li {
float: left;
width: 300px;
padding-bottom: 60px;
@media screen and (max-width:1064px) {
width: 32%;
padding-bottom: 6%;
}
@media screen and (max-width:767px) {
float: none;
width: 100%;
}
&:not(:last-of-type) {
margin-right: 32px;
@media screen and (max-width:1064px) {
margin-right: 2%;
}
@media screen and (max-width:767px) {
margin-right: auto;
}
}
}
}
&--cnt02 {
>h4 {
margin-bottom: 40px;
@media screen and (max-width:1064px) {
margin-bottom: 4%;
}
@media screen and (max-width:767px) {
margin-bottom: 8%;
}
}
>img {
margin-bottom: 80px;
@media screen and (max-width:1064px) {
margin-bottom: 8%;
}
@media screen and (max-width:767px) {
margin-bottom: 5%;
}
}
>h5 {
margin-bottom: 40px;
@media screen and (max-width:1064px) {
margin-bottom: 4%;
}
@media screen and (max-width:767px) {
margin-bottom: 2%;
}
}
>p {
margin-bottom: 80px;
@media screen and (max-width:1064px) {
margin-bottom: 8%;
}
@media screen and (max-width:767px) {
padding-top: 2%;
margin-bottom: 10%;
}
}
}
&--btn {
width: 512px;
height: 80px;
margin: 0 auto;
border-radius: 40px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #fff;
border: 1px solid #222;
color: #222;
letter-spacing: 0.08em;
position: relative;
@media screen and (max-width:767px) {
max-width: 512px;
width: 80%;
}
@media screen and (max-width:480px) {
height: 40px;
}
&:hover {
opacity: 1;
&::before {
background-color: #c03f22;
transition: 0.15s linear all;
}
}
&::before {
content: "";
background-color: #222;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
position: absolute;
top: 0;
right: -1px;
transition: 0.2s linear all;
width: 40px;
height: 80px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
@media screen and (max-width:480px) {
width: 20px;
height: 40px;
}
}
&::after {
content: "\f0da";
font-family: "Font Awesome 5 Free";
font-size: 1.6rem;
font-weight: 600;
display: block;
position: absolute;
right: 14px;
margin: auto;
color: #fff;
@media screen and (max-width:480px) {
right: 6px;
}
}
>span {
color: #111;
font-size: 1.4rem;
letter-spacing: 0.08em;
}
}
}
}
}
#estimate-point {
.estimate-point-bg01 {
height: 610px;
background-image: url(../images/estimate-point/tc_estimate-point_bg01_pc.jpg);
display: flex;
justify-content: center;
align-items: flex-end;
@media screen and (max-width:1064px) {
height: 57.33vw;
}
@media screen and (max-width:767px) {
height: 104.93vw;
background-image: url(../images/estimate-point/tc_estimate-point_bg01_sp.jpg);
background-position: left bottom;
background-size: contain;
}
}
.estimate-point-bg02 {
background-image: url(../images/estimate-point/tc_estimate-point_bg02_pc.jpg);
@media screen and (max-width:767px) {
background-image: url(../images/estimate-point/tc_estimate-point_bg02_sp.jpg);
}
}
}
#estimate-point {
.section001 {
&__inner {
max-width: 1107px;
padding: 0 20px;
@media screen and (max-width:767px) {
max-width: inherit;
padding: 0;
}
h2 {
img {
@media screen and (max-width:767px) {
width: 101%;
margin-right: -1%;
}
}
}
}
}
.section002 {
background-color: #eeeeee;
padding: 70px 0 54px;
@media screen and (max-width:1064px) {
padding: 7% 0 8%;
}
@media screen and (max-width:767px) {
padding: 10.93% 0 13.33%;
}
&__inner {
p {
color: #333;
margin-bottom: 80px;
@media screen and (max-width:1064px) {
margin-bottom: 8%;
}
@media screen and (max-width:767px) {
font-weight: 500;
margin-bottom: 11%;
}
}
}
}
.section003 {
background-color: #000f36;
position: relative;
&::before {
content: "";
position: absolute;
top: 0;
height: 73px;
display: block;
width: 100%;
background-color: #eeeeee;
@media screen and (max-width:1064px) {}
}
&::after {
content: "";
position: absolute;
bottom: 0;
height: 72px;
display: block;
width: 100%;
background-color: #eeeeee;
@media screen and (max-width:1064px) {
height: 260px;
}
}
&__inner {
&--cnt {
background-color: #f1f3f8;
box-sizing: border-box;
padding: 50px 40px 55px;
position: relative;
z-index: 1;
border-radius: 5px;
@media screen and (max-width:1064px) {
padding: 5% 2% 0;
}
@media screen and (max-width:767px) {
padding: 13.07% 5.33% 12.54%;
margin: 0 -5.9%;
}
>ul {
width: 680px;
@media screen and (max-width:1064px) {
width: 100%;
}
>li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100px;
line-height: 1.5em;
font-weight: 700;
box-sizing: border-box;
padding: 25px 20px 25px 90px;
position: relative;
background-color: #000f36;
color: #fff;
font-size: 2.8rem;
border-radius: 50px;
letter-spacing: 0;
@media screen and (max-width:1064px) {
margin-bottom: 2%;
padding: 25px 40px 25px 90px;
}
@media screen and (max-width:767px) {
//height: 120px;
font-size: 2.4rem;
border-radius: 60px;
padding: 25px 40px 25px 70px;
padding: 3.88% 5% 3.88% 20.06%;
}
@media screen and (max-width:480px) {
font-size: 1.6rem;
height: auto;
padding: 3.88% 5% 3.88% 20.06%;
}
&::after {
content: "？";
position: absolute;
left: 25px;
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 25px;
display: block;
color: #000f36;
background-color: #fff;
font-size: 4rem;
text-align: center;
top: 0;
bottom: 0;
margin: auto;
font-weight: bold;
@media screen and (max-width:767px) {
font-size: 3rem;
left: 10%;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 20px;
}
@media screen and (max-width:480px) {
font-size: 2rem;
left: 30px;
width: 25px;
height: 25px;
line-height: 1;
}
}
&:not(:nth-of-type(3)) {
margin-bottom: 20px;
@media screen and (max-width:1064px) {
margin-bottom: 2%;
}
}
}
}
>img {
position: absolute;
bottom: 0;
right: 0;
@media screen and (max-width:1064px) {
position: static;
}
@media screen and (max-width:767px) {
width: 24%;
position: absolute;
right: 7%;
bottom: -34%;
}
@media screen and (max-width:480px) {
width: 36.06%;
position: absolute;
right: 1%;
bottom: -72%;
}
}
}
}
}
.section004 {
padding: 84px 0 90px;
background-color: #eeeeee;
@media screen and (max-width:1064px) {
padding: 8% 0 9%;
}
@media screen and (max-width:767px) {
background-color: #f1f3f8;
padding: 0% 0 17.16%;
}
&__inner {
p {
color: #333;
margin-bottom: 90px;
@media screen and (max-width:1064px) {
margin-bottom: 9%;
}
@media screen and (max-width:767px) {
width: 62.16%;
font-weight: 500;
margin-bottom: 11.49%;
margin-left: 0;
}
}
}
}
.section005 {
position: relative;
padding-bottom: 42px;
background-size: cover;
@media screen and (max-width:767px) {
padding-bottom: 5.87%;
}
&::before {
content: "";
position: absolute;
top: 0;
height: 50px;
display: block;
width: 100%;
background-color: #eee;
@media screen and (max-width:630px) {
height: 9vw;
}
}
img {
z-index: 1;
position: relative;
}
}
.section006 {
padding: 73px 0 93px;
background-color: #f1f3f8;
@media screen and (max-width:1064px) {
padding: 7% 0 11%;
}
@media screen and (max-width:767px) {
padding: 10.93% 0 18.53%;
}
p {
margin-bottom: 70px;
@media screen and (max-width:1064px) {
margin-bottom: 10%;
}
@media screen and (max-width:767px) {
font-weight: 500;
}
}
a {
max-width: 944px;
}
}
.section007 {
position: relative;
padding-bottom: 20px;
background-size: cover;
@media screen and (max-width:767px) {
padding-bottom: 8%;
}
&::before {
content: "";
position: absolute;
top: 0;
height: 50px;
display: block;
width: 100%;
background-color: #f1f3f8;
@media screen and (max-width:767px) {
height: 80px;
}
@media screen and (max-width:630px) {
height: 13vw;
}
}
&__inner {
h2 {
margin-bottom: 0;
}
}
img {
z-index: 1;
position: relative;
}
}
.section008 {
background-color: #f1f3f8;
padding: 86px 0 52px;
@media screen and (max-width:1064px) {
padding: 9% 0 14%;
}
@media screen and (max-width:767px) {
background-color: #eeeeee;
padding: 12.4% 0 10.13%;
}
&__inner {
>p {
@media screen and (max-width:767px) {
font-weight: 500;
}
&:nth-of-type(1) {
margin-bottom: 30px;
@media screen and (max-width:1064px) {
margin-bottom: 8%;
}
@media screen and (max-width:767px) {
margin-bottom: 12%;
}
}
&:nth-of-type(2) {
margin-bottom: 0px;
@media screen and (max-width:1064px) {
margin-bottom: 0%;
}
@media screen and (max-width:767px) {
margin-bottom: 7%;
}
}
}
>img {
margin-bottom: 90px;
@media screen and (max-width:1064px) {
margin-bottom: 9%;
}
@media screen and (max-width:767px) {
margin-bottom: 14.93%;
}
}
&--cnt {
max-width: 770px;
margin: 0 auto 80px;
@media screen and (max-width:1064px) {
margin-bottom: 8%;
}
@media screen and (max-width:767px) {
margin-bottom: 6%;
}
iframe {
width: 100%;
height: 430px;
@media screen and (max-width:480px) {
height: 215px;
}
}
}
a {
max-width: 770px;
}
}
}
.section009 {
padding: 43px 0 53px;
@media screen and (max-width:767px) {
padding: 7.2% 0;
}
&__inner {
h2 {
margin-bottom: 0;
}
}
}
.section010 {
background-color: #eeeeee;
padding: 90px 0 0;
@media screen and (max-width:1064px) {
padding: 9% 0 0;
}
@media screen and (max-width:767px) {
padding: 7.33% 0 9.07%;
}
&__inner {
&__h3 {
position: relative;
margin-bottom: 30px;
@media screen and (max-width:1064px) {
margin-bottom: 3%;
}
@media screen and (max-width:767px) {
margin-bottom: 6%;
}
&::before {
content: "";
width: 100%;
height: 6px;
background-color: #d30e1e;
display: block;
position: absolute;
bottom: 26px;
@media screen and (max-width:767px) {
height: 0.8vw;
bottom: 3.47vw;
}
}
>img {
position: relative;
@media screen and (max-width:767px) {
width: 33.43%;
}
}
}
&--name {
padding: 20px 0;
box-sizing: border-box;
@media screen and (max-width:767px) {
padding: 6% 0;
}
span {
display: block;
text-align: center;
font-weight: bold;
&:nth-of-type(1) {
color: #d8323f;
font-size: 2.4rem;
margin-bottom: 10px;
@media screen and (max-width:480px) {
font-size: 1.9rem;
letter-spacing: 0.05em;
}
}
&:nth-of-type(2) {
color: #333333;
font-size: 3rem;
@media screen and (max-width:480px) {
font-size: 2.6rem;
}
}
}
}
&--cnt01 {
@media screen and (max-width:1064px) {
display: flex;
flex-wrap: wrap;
}
>li {
width: 240px;
float: left;
margin-bottom: 90px;
@media screen and (max-width:1064px) {
margin-bottom: 4%;
width: 49%;
}
@media screen and (max-width:767px) {
margin-bottom: 8%;
}
&:nth-of-type(even) {
@media screen and (max-width:1064px) {
margin-left: 2%;
}
}
&:not(:nth-of-type(4)) {
margin-right: 15px;
@media screen and (max-width:1064px) {
margin-right: auto;
}
}
&:nth-of-type(3) {
@media screen and (max-width:768px) {
clear: left;
}
}
.section010__inner--name {
@media screen and (max-width:1064px) {
float: right;
width: 50%;
}
@media screen and (max-width:768px) {
float: none;
width: 100%;
}
}
img {
@media screen and (max-width:1064px) {
float: left;
width: 46%;
margin-right: 4%;
}
@media screen and (max-width:768px) {
float: none;
width: auto;
margin-right: auto;
}
}
p {
color: #333;
@media screen and (max-width:1064px) {
float: right;
width: 50%;
}
@media screen and (max-width:768px) {
float: none;
width: 100%;
font-weight: 500;
}
}
}
&.center {
max-width: fit-content;
margin: 0 auto;
}
}
&--cnt02 {
>li {
width: 194px;
float: left;
margin-bottom: 90px;
@media screen and (max-width:1064px) {
margin-bottom: 9%;
width: 49%;
}
@media screen and (max-width:768px) {
width: 48%;
margin-bottom: 8%;
}
&:not(:nth-of-type(5)) {
margin-right: 13.5px;
@media screen and (max-width:1064px) {
margin-right: auto;
}
@media screen and (max-width:768px) {}
}
&:nth-of-type(even) {
@media screen and (max-width:1064px) {
margin-left: 2%;
}
@media screen and (max-width:768px) {
margin-left: 4%;
}
}
&:nth-of-type(3),
&:nth-of-type(5) {
@media screen and (max-width:768px) {
clear: left;
}
}
img {
margin-bottom: 20px;
@media screen and (max-width:1064px) {
float: left;
width: 46%;
margin-right: 4%;
}
@media screen and (max-width:768px) {
margin-bottom: 4%;
float: none;
width: auto;
margin-right: auto;
}
}
p {
color: #333;
@media screen and (max-width:1064px) {
float: right;
width: 50%;
}
@media screen and (max-width:768px) {
float: none;
width: 100%;
font-weight: 500;
}
}
}
}
}
}
.section011 {
padding: 55px 0 61px;
background-color: #000f36;
@media screen and (max-width:1064px) {
padding: 7% 0 10%;
}
@media screen and (max-width:767px) {
padding: 13.73% 0 12.39%;
}
&__inner {
h3 {
width: 500px;
height: 100px;
background-color: #fff;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 25px;
position: relative;
@media screen and (max-width:767px) {
width: 106%;
height: auto;
padding: 5.22% 0;
margin: 0 -2.99% 12.84%;
border-radius: 100px;
}
img {
@media screen and (max-width:767px) {
width: 81.49%;
}
}
&::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 15px 8px 0 8px;
border-color: #fff transparent transparent transparent;
position: absolute;
bottom: -15px;
}
}
&--cnt {
>li {
float: left;
width: 500px;
@media screen and (max-width:1064px) {
width: 49%;
}
@media screen and (max-width:767px) {
width: 100%;
}
&:nth-of-type(1) {
margin-right: 24px;
@media screen and (max-width:1064px) {
margin-right: 2%;
}
@media screen and (max-width:767px) {
margin-right: auto;
margin-bottom: 5.97%;
}
}
a {
max-width: 500px;
}
}
}
}
}
.section012 {
position: relative;
background: #f1f3f8;
padding-bottom: 80px;
@media screen and (max-width:1064px) {
padding-bottom: 8%;
}
@media screen and (max-width:767px) {
padding-bottom: 13.33%;
}
&::before {
content: "";
position: absolute;
top: 0;
height: 55px;
display: block;
width: 100%;
/* background-color: #000f36; */
top: -1px;
@media screen and (max-width:1064px) {}
@media screen and (max-width:767px) {
height: 14vw;
}
@media screen and (max-width:630px) {
height: 18vw;
}
}
&__inner {
position: relative;
h3 {
width: 838px;
height: 147px;
background-color: #fff;
border-radius: 80px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 57px;
position: relative;
@media screen and (max-width:1064px) {
width: 85.16%;
margin-bottom: 5.79%;
}
@media screen and (max-width:767px) {
width: 106%;
height: auto;
margin: 0 -2.99% 16.27%;
padding: 7.46% 6.72%;
border-radius: 150px;
}
img {
@media screen and (max-width:1064px) {
width: 80%;
}
}
&::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 28px 16px 0 16px;
border-color: #fff transparent transparent transparent;
position: absolute;
bottom: -28px;
}
}
>img {
margin-bottom: 60px;
@media screen and (max-width:1064px) {
width: 80%;
margin-bottom: 6%;
}
@media screen and (max-width:767px) {
width: 100%;
}
}
&--cnt {
>li {
width: 330px;
float: left;
margin-bottom: 40px;
@media screen and (max-width:1064px) {
width: 49%;
margin-bottom: 4%;
}
&:not(:nth-of-type(3n)) {
margin-right: 17px;
@media screen and (max-width:1064px) {
margin-right: auto;
}
}
&:nth-of-type(even) {
@media screen and (max-width:1064px) {
margin-left: 2%;
}
}
>div {
iframe {
width: 100%;
height: 185px;
margin-bottom: 20px;
@media screen and (max-width:1064px) {
margin-bottom: 2%;
}
@media screen and (max-width:767px) {
margin-bottom: 4%;
height: 90px;
}
}
}
>span {
display: block;
font-size: 1.6rem;
color: #333333;
text-align: center;
background-color: #fff;
width: 90%;
margin: 0 auto;
border-radius: 17px;
height: 36px;
line-height: 36px;
font-weight: 700;
@media screen and (max-width:767px) {
letter-spacing: 0;
font-size: 1.4rem;
width: 100%;
}
@media screen and (max-width:400px) {
font-size: 1.3rem;
height: 28px;
line-height: 28px;
}
@media screen and (max-width:374px) {
font-size: 1.2rem;
height: 24px;
line-height: 24px;
}
}
}
}
}
}
.section013 {
background-color: #d30e1e;
padding: 55px 0 60px;
@media screen and (max-width:767px) {
padding: 4.27% 0 5.87%;
}
}
.section014 {
background-color: #eeeeee;
padding: 40px 0 100px;
@media screen and (max-width:1064px) {
padding: 4% 0 10%;
}
@media screen and (max-width:767px) {
padding: 6% 0 15.07%;
}
&__inner {
&--cnt {
li {
background-color: #fff;
border-radius: 10px;
box-sizing: border-box;
padding: 50px 40px 60px;
margin-bottom: 40px;
@media screen and (max-width:1064px) {
padding: 5% 4% 6%;
margin-bottom: 4%;
}
@media screen and (max-width:767px) {
padding: 8.21% 5.67% 11.94%;
}
div {
&:nth-of-type(1) {
text-align: center;
margin-bottom: 50px;
@media screen and (max-width:1064px) {
margin-bottom: 5%;
}
.section014-star {
color: #ffd800;
font-size: 2.4rem;
font-weight: bold;
padding-right: 10px;
letter-spacing: 0;
@media screen and (max-width:767px) {
display: inline-block;
padding-right: 0;
margin-bottom: 2%;
margin-right: 15px;
}
@media screen and (max-width:480px) {
font-size: 1.8rem;
}
}
.section014-name {
font-weight: bold;
font-size: 2.4rem;
letter-spacing: 0;
@media screen and (max-width:767px) {
display: inline-block;
}
@media screen and (max-width:480px) {
font-size: 1.8rem;
}
}
}
&:nth-of-type(2) {
p {
text-align: left;
@media screen and (max-width:767px) {
font-weight: 500;
}
}
}
}
}
}
}
}
.section015 {
background: #fff;
padding: 132px 0 128px;
@media screen and (max-width:1064px) {
padding: 12.41% 0 12.03%;
}
@media screen and (max-width:767px) {
padding: 13.33% 0 18.67%;
}
&__inner {
>img {
margin-bottom: 75px;
@media screen and (max-width:1064px) {
margin-bottom: 7%;
}
@media screen and (max-width:767px) {
margin-bottom: 9.25%;
}
}
a {
//max-width: 944px;
}
}
}
}