@charset "UTF-8";

.trouble {
margin-bottom: 60px;
}
.trouble .t-inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.trouble .t-inner .t-card {
flex-basis: 48%;
border: 1px solid #2372c4;
border-radius: 8px;
margin-top: 20px;
overflow: hidden;
}
@media screen and (max-width: 650px) {
.trouble .t-inner .t-card {
flex-basis: 100%;
}
}
.trouble .t-inner .t-card .tt {
margin: 0;
background-color: #2372c4;
color: #fff;
padding: 10px;
font-size: 24px;
display: flex;
align-items: center;
justify-content: flex-start;
}
@media screen and (max-width: 650px) {
.trouble .t-inner .t-card .tt {
font-size: 20px;
}
}
.trouble .t-inner .t-card .t-card-inner {
display: flex;
overflow: hidden;
min-height: 240px;
}
.trouble .t-inner .t-card .t-card-inner .img-wrap {
flex-basis: 40%;
}
.trouble .t-inner .t-card .t-card-inner .img-wrap img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
max-height: 240px;
}
.trouble .t-inner .t-card .t-card-inner .tc-content {
flex-basis: 60%;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.trouble .t-inner .t-card .t-card-inner .tc-content ul {
padding: 10px;
}
.trouble .t-inner .t-card .t-card-inner .tc-content ul li {
display: flex;
font-weight: bold;
font-size: 15px;
margin-bottom: 4px;
}
.trouble .t-inner .t-card .t-card-inner .tc-content ul li img {
width: 32px;
height: 32px;
display: inline-block;
}
@media screen and (max-width: 650px) {
.trouble .t-inner .t-card .t-card-inner .tc-content ul li img {
width: 24px;
height: 24px;
}
}
@media screen and (max-width: 650px) {
.trouble .t-inner .t-card .t-card-inner .tc-content ul li {
font-size: 12px;
}
}
.trouble .t-inner .t-card .t-card-inner .tc-content ul li:last-child {
margin-bottom: 0;
}
.trouble .t-inner .t-card .t-card-inner .tc-content .t-btn {
border: 2px solid #2372c4;
background-color: inherit;
color: #2372c4;
width: 100%;
height: 60px;
align-items: center;
font-size: 12px;
border-radius: 10px;
transition: 0.2s;
}
@media screen and (max-width: 650px) {
.trouble .t-inner .t-card .t-card-inner .tc-content .t-btn {
font-size: 10px;
font-weight: bold;
}
}
.trouble .t-inner .t-card .t-card-inner .tc-content .t-btn::before {
content: "▶";
display: inline;
margin-right: 4px;
}
.trouble .t-inner .t-card .t-card-inner .tc-content .t-btn:hover {
font-size: 14px;
cursor: pointer;
}
@media screen and (max-width: 650px) {
.trouble .t-inner .t-card .t-card-inner .tc-content .t-btn:hover {
font-size: 10px;
font-weight: bold;
}
}
.please-call-me {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 60px;
}
.please-call-me a {
width: 48%;
border-radius: 20px;
height: 120px;
display: flex;
background-color: #e06666;
color: #fff;
font-size: 24px;
align-items: center;
justify-content: center;
font-weight: bold;
pointer-events: initial;
text-align: center;
text-decoration: none;
}
.please-call-me a:hover::before {
animation-name: ring;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.please-call-me a::before {
content: "📞";
display: block;
flex-basis: 10%;
font-size: 64px;
line-height: 64px;
margin-right: 14px;
}
@media screen and (max-width: 650px) {
.please-call-me a::before {
text-decoration: none;
}
}
@media screen and (max-width: 650px) {
.please-call-me a {
width: 80%;
font-size: 20px;
text-decoration: none;
}
}
@keyframes ring {
0% {
rotate: 5deg;
}
20% {
rotate: -5deg;
}
40% {
rotate: 5deg;
}
60% {
rotate: -5deg;
}
80% {
rotate: 0deg;
}
100% {
rotate: 0deg;
}
}
.move {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 650px) {
.move {
justify-content: center;
}
}
.move a {
flex-basis: 19.5%;
font-size: 20px;
font-weight: bold;
color: #fff;
text-align: center;
background-color: #5a9de4;
padding-bottom: 20px;
margin: 4px 1px;
position: relative;
overflow: hidden;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
}
.move a::before {
content: "";
position: absolute;
bottom: 0px;
left: 0;
width: 55%;
height: 30px;
rotate: 15deg;
transform-origin: top left;
background-color: #fff;
}
.move a::after {
content: "";
position: absolute;
bottom: 0px;
right: 0;
width: 55%;
height: 30px;
rotate: -15deg;
transform-origin: top right;
background-color: #fff;
}
@media screen and (max-width: 650px) {
.move a {
font-size: 14px;
line-height: 1em;
border: none;
height: 80px;
flex-basis: 32%;
}
.move a::before, .move a::after {
height: 20px;
width: 60%;
}
}
.strength .card-wrap {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 1rem 5rem;
margin-bottom: 60px;
}
.strength .card-wrap .s-card {
flex-basis: 29%;
border-radius: 10px;
border: 1px solid #00bfff;
overflow: hidden;
background-color: #fff;
}
@media screen and (max-width: 650px) {
.strength .card-wrap .s-card {
flex-basis: 100%;
}
}
.strength .card-wrap .s-card h3 {
margin: 0;
text-align: center;
padding: 1rem;
color: white;
background-color: #00bfff;
}
.strength .card-wrap .s-card .s-card-content {
padding: 1rem;
text-decoration: underline;
}
.strength .card-wrap .s-card .s-card-content .red {
color: red;
}
.maker {
margin-bottom: 60px;
}
.maker .maker-wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 2rem 7rem;
align-items: center;
}
@media screen and (max-width: 650px) {
.maker .maker-wrap {
gap: 2rem 1rem;
}
}
.maker .maker-wrap img {
max-width: 250px;
}
@media screen and (max-width: 650px) {
.maker .maker-wrap img {
width: 30%;
}
}
.cost-summary {
margin-bottom: 60px;
}
.cost-summary .cost-summary-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
}
.cost-summary .cost-summary-wrap .item {
flex-basis: 32%;
margin: 0 2px;
}
@media screen and (max-width: 650px) {
.cost-summary .cost-summary-wrap .item {
flex-basis: 42%;
}
}
.common-trouble {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 30px;
margin-top: 30px;
}
.common-trouble .red {
color: red;
font-weight: bold;
}
.common-trouble .cost {
text-align: right;
}
.common-trouble .big {
font-size: 2.1rem;
}
.common-trouble .left, .common-trouble .right {
flex-basis: 49%;
}
@media screen and (max-width: 650px) {
.common-trouble .left, .common-trouble .right {
flex-basis: 100%;
}
}
.common-trouble .small {
font-weight: normal;
margin-left: 10px;
font-size: 12px;
}
.common-trouble .content {
margin-bottom: 10px;
font-size: 1.6rem;
line-height: 1.6em;
font-weight: bold;
}
.common-trouble .left h3 {
position: relative;
background-color: #fff;
border-radius: 10px;
width: 100%;
font-size: 2rem;
margin-bottom: 10px;
border: 1px solid #00bfff;
color: #00bfff;
padding: 1rem 6rem 1rem;
}
.common-trouble .left h3 img {
position: absolute;
top: 50%;
left: 10px;
transform: translate(0, -50%);
filter: invert(73%) sepia(79%) saturate(4072%) hue-rotate(195deg) brightness(95%) contrast(95%);
margin-right: 4px;
}
.common-trouble .left h3::after {
display: none;
}
.common-trouble .right .img-wrap {
overflow: hidden;
height: 80%;
}
.common-trouble .right .img-wrap img {
height: 100%;
scale: 1.2;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: right;
object-position: right;
}
.common-trouble .right .yellow {
text-align: center;
font-weight: bold;
line-height: 1.13em;
background-color: #ffff8c;
border-radius: 10px;
padding: 10px;
margin: 10px 15px;
text-decoration: underline;
}
.challenge {
text-align: center;
font-size: 2.5rem;
color: gold;
position: relative;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
}
.challenge::before {
content: "";
background-color: #195db9;
position: absolute;
top: 50%;
right: -40px;
width: 40px;
height: 4px;
rotate: -60deg;
}
.challenge::after {
content: "";
background-color: #195db9;
position: absolute;
top: 50%;
left: -40px;
width: 40px;
height: 4px;
rotate: 60deg;
}
.compare {
position: relative;
}
@media screen and (max-width: 650px) {
.compare {
overflow: scroll;
}
}
.compare .red {
color: red;
font-size: 2rem;
}
.compare .red-cir {
font-size: 5rem;
color: red;
font-weight: bold;
}
.compare .blue-x {
font-size: 5rem;
color: #195db9;
font-weight: bold;
}
.compare .green-tri {
font-size: 5rem;
color: green;
font-weight: bold;
}
.compare .blue-box-wrap {
margin: 0 auto;
position: relative;
width: 700px;
display: block;
}
.compare .blue-box-wrap .blue-box {
position: absolute;
top: 60px;
left: 158px;
width: 205px;
height: 653px;
border: 8px solid #195db9;
}
@media screen and (max-width: 650px) {
.compare .blue-box-wrap .blue-box {
left: 158px;
}
}
.compare table {
min-width: 700px;
margin: 0 auto;
font-size: 1.6rem;
line-height: 3rem;
border-spacing: 16px;
border-collapse: separate;
font-weight: bold;
text-align: center;
}
.compare table span {
font-size: 1rem;
}
.compare table thead {
color: #fff;
font-size: 2rem;
}
.compare table thead tr th {
background-color: rgba(204, 204, 204, 0.8);
text-align: center;
padding: 10px 0;
border-radius: 10px;
}
.compare table thead tr th:first-child {
background-color: inherit;
max-width: 125px;
}
.compare table thead tr th:nth-child(2) {
width: 205px;
font-size: 3rem;
border-radius: 10px;
background-color: #195db9;
}
.compare table tbody tr td {
border-bottom: 2px solid #ccc;
}
.compare table tbody tr td:nth-child(2) {
font-weight: 900;
}
.red {
color: red;
font-size: 2rem;
padding: 1rem 0;
}
.payment {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 3rem;
}
.payment .p-box {
flex-basis: 48%;
background-color: #fff;
border-radius: 10px;
overflow: hidden;
border: 1px solid #ccc;
}
.payment .p-box .p-title {
background-color: #ccc;
color: #fff;
font-size: 2rem;
font-weight: bold;
text-align: center;
padding: 0.5rem 0;
display: block;
}
.payment .p-box .methods {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
align-items: center;
padding: 4rem;
gap: 3rem;
}
.payment .p-box .methods img {
max-height: 48px;
min-width: 48px;
max-width: 120px;
}
.payment .p-box.fb-100 {
flex-basis: 100%;
}