:root {
--color-main: #222;
--color-white: #fff;
--color-gray: #ededed;
--color-gray2: #959eac;
--color-blue: #3295da;
--color-blue2: #3295da;
--color-blue3: #243f64;
--color-blue4: #cce5f6;
--color-blue-stripe: repeating-linear-gradient(-45deg, #3295da, #3295da 15px, #2e8dd7 0, #2e8dd7 30px);
--color-blue-stripe2: repeating-linear-gradient(-45deg, #243f64, #243f64 15px, #213a5c 0, #213a5c 30px);
--color-red: #eb5272;
--color-yellow: #ffd50f;
--color-beige: #fbf5d7;
--font-size13: 1.3rem;
--font-size16: 1.6rem;
--font-size18: 1.8rem;
--font-size20: 2rem;
--font-size22: 2.2rem;
--font-size26: 2.6rem;
--font-size28: 2.8rem;
--font-size30: 3rem;
--font-size32: 3.2rem;
--font-size40: 4rem;
--font-size44: 4.4rem;
--font-size46: 4.6rem;
--font-size48: 4.8rem;
--font-size50: 5rem;
--font-size54: 5.4rem;
--font-size56: 5.6rem;
--font-size60: 6rem;
--font-size70: 7rem;
--font-size80: 8rem;
--font-size90: 9rem;
--font-size100: 10rem;
--font-size210: 21rem;
--font-weight-normal: 700;
--font-weight-bold: 900;
--shadow1: 0 3px 5px 0 rgb(0 0 0 / 0.18);
--shadow2: 0 0 20px 0 rgb(0 0 0 / 0.06);
--padding: 30px;
--width: 1120px;
--width2: 1280px;
@media screen and (max-width: 768px) {
--font-size13: 11px;
--font-size16: 12px;
--font-size18: 14px;
--font-size20: 16px;
--font-size22: 17px;
--font-size26: 18px;
--font-size28: 22px;
--font-size30: 3.4vw;
--font-size32: 3.8vw;
--font-size40: 4.2vw;
--font-size44: 4.4vw;
--font-size46: 4.6vw;
--font-size48: 4.8vw;
--font-size50: 5vw;
--font-size54: 5.4vw;
--font-size56: 5.6vw;
--font-size60: 6vw;
--font-size70: 7vw;
--font-size80: 8vw;
--font-size90: 9vw;
--font-size100: 10vw;
--font-size210: 21vw;
--padding: 15px;
--width: auto;
--width2: auto;
}
}
*,
:before,
:after {
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
min-height: 100vh;
color: var(--color-main);
font-size: var(--font-size18);
font-family: "Poppins", "Zen Kaku Gothic New", sans-serif;
font-weight: 700;
line-height: 1.4;
word-break: break-word;
overflow-wrap: anywhere;
line-break: anywhere;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
}
img {
display: block;
width: 100%;
height: auto;
max-width: none;
}
a {
color: currentColor;
text-decoration: none !important;
transition: all 0.3s ease;
}
.pc {
display: block;
@media screen and (max-width: 768px) {
display: none;
}
}
.sp {
display: none;
@media screen and (max-width: 768px) {
display: block;
}
}
.container {
overflow-x: clip;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 0 20px;
height: 120px;
@media screen and (max-width: 1150px) {
height: 90px;
}
@media screen and (max-width: 768px) {
gap: 5px;
padding: 10px;
height: auto;
}
.logo {
@media screen and (max-width: 1350px) {
width: 350px;
max-width: 80%;
}
}
p {
span {
color: var(--color-blue);
}
@media screen and (max-width: 1350px) {
font-size: var(--font-size13);
}
}
.btn {
margin: 0 0 0 auto;
position: relative;
overflow: hidden;
padding-bottom: 10px;
@media screen and (max-width: 1150px) {
display: none;
}
a {
display: flex;
align-items: center;
gap: 10px;
height: 84px;
padding: 0 15px;
font-size: var(--font-size26);
font-weight: var(--font-weight-bold);
background: var(--color-yellow);
border-radius: 100px;
box-shadow: var(--shadow1);
@media (hover: hover) {
&:hover {
opacity: 0.6;
}
}
&>span {
display: flex;
align-items: center;
padding: 0 10px;
height: 54px;
font-size: var(--font-size18);
background: var(--color-white);
border-radius: 100px;
span {
color: var(--color-red);
}
}
}
}
}
.mv-wrap {
margin: 0 0 80px 0;
padding: 0 0 50px 0;
background: #ededed url(//price-energy.com/wp-content/themes/mytheme/resource/lp-solar/images/mv-wrap.png) no-repeat center bottom;
}
.mv {
.mv-inner {
position: relative;
margin: 0 auto;
width: var(--width);
height: 960px;
@media screen and (max-width: 768px) {
height: auto;
}
h1 {
position: absolute;
left: -80px;
top: 243px;
z-index: 3;
color: #fff;
font-size: 8.8rem;
letter-spacing: -0.05em;
line-height: 1.2;
font-weight: 700;
font-feature-settings: "palt";
.str {
color: var(--color-yellow);
}
@media screen and (max-width: 768px) {
left: 6%;
top: 18%;
font-size: 10vw;
}
}
img {
position: absolute;
inset: 0 auto auto 50%;
width: 1920px;
height: 960px;
translate: -50% 0;
&.sp {
display: none;
}
@media screen and (max-width: 768px) {
position: relative;
inset: auto;
width: 100%;
height: auto;
translate: 0;
&.pc {
display: none;
}
&.sp {
display: block;
}
}
}
}
}
.simu {
position: relative;
margin: -190px auto 80px auto;
width: var(--width);
text-align: center;
background: var(--color-white);
border-radius: 40px;
box-shadow: var(--shadow1);
.kurabete+& {
margin: 0 auto 80px auto;
}
@media screen and (max-width: 768px) {
margin: -10px 20px 80px 20px;
.kurabete+& {
margin: 0 20px 80px 20px;
}
}
.title {
position: relative;
color: var(--color-white);
background: var(--color-blue3);
border-radius: 40px 40px 0 0;
.icon {
position: absolute;
inset: -30px auto auto 100px;
padding: 45px 0 0 0;
width: 160px;
height: 152px;
font-size: var(--font-size30);
line-height: 1.2;
background: url(//price-energy.com/wp-content/themes/mytheme/resource/lp-solar/images/simu-title-icon.png) no-repeat 0 0 / contain;
rotate: -15deg;
@media screen and (max-width: 768px) {
inset: -20px auto auto 20px;
padding: 20px 0 0 0;
width: 70px;
height: 70px;
font-size: 13px;
}
span {
color: var(--color-yellow);
}
}
h2 {
padding: 20px;
font-size: var(--font-size50);
text-align: center;
line-height: 1.3;
span {
display: inline-block;
margin: 0 0 6px 0;
padding: 10px 25px;
color: var(--color-yellow);
font-size: var(--font-size22);
border: var(--color-yellow) 1px solid;
border-radius: 100px;
@media screen and (max-width: 768px) {
font-size: 2.4vw;
}
}
}
}
.simu-content {
padding: 50px;
@media screen and (max-width: 768px) {
padding: 30px;
}
}
}
.mitumori-btn {
margin: 0 auto 80px auto;
width: var(--width);
text-align: center;
background: var(--color-white);
border: var(--color-blue) 4px solid;
border-radius: 40px;
box-shadow: var(--shadow1);
.merit+&,
.step3+& {
margin: 100px auto 80px auto;
}
@media screen and (max-width: 768px) {
max-width: calc(100% - 30px);
}
h2 {
display: grid;
place-items: center;
margin: -40px auto 0 auto;
padding: 0 50px;
width: fit-content;
height: 80px;
color: var(--color-white);
font-size: var(--font-size32);
font-weight: var(--font-weight-bold);
background: var(--color-blue-stripe);
border-radius: 100px;
}
p {
padding: 20px;
font-size: var(--font-size22);
span {
color: var(--color-blue);
}
}
.btn {
padding: 0 50px;
position: relative;
overflow: hidden;
padding-bottom: 10px;
@media screen and (max-width: 768px) {
padding: 0 15px;
}
a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 80px 0 25px;
height: 140px;
font-size: var(--font-size50);
font-weight: var(--font-weight-bold);
background: var(--color-yellow);
border-radius: 100px;
box-shadow: var(--shadow1);
@media screen and (max-width: 768px) {
flex-direction: column;
gap: 5px;
padding: 30px 0 20px 0;
height: auto;
border-radius: 40px;
}
&>span {
display: flex;
align-items: center;
padding: 0 30px;
height: 92px;
color: var(--color-main);
font-size: var(--font-size48);
background: var(--color-white);
border-radius: 100px;
span {
color: var(--color-red);
}
@media screen and (max-width: 768px) {
padding: 8px 20px;
height: auto;
}
}
}
}
ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
padding: 20px 0 40px 0;
list-style: none;
@media screen and (max-width: 768px) {
gap: 5px 20px;
}
li {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--font-size20);
&:before {
content: "";
width: 18px;
height: 19px;
background: url(//price-energy.com/wp-content/themes/mytheme/resource/lp-solar/images/check.png) no-repeat top center;
}
}
}
}
.genkai {
margin: 0 auto 60px auto;
width: var(--width);
text-align: center;
@media screen and (max-width: 768px) {
padding: 0 20px;
}
h2 {
margin: 0 0 40px 0;
color: var(--color-blue3);
font-size: var(--font-size60);
line-height: 1.1;
span {
font-size: var(--font-size40);
}
}
.image {
margin: 0 0 30px 0;
}
p {
margin: 0 0 10px 0;
color: var(--color-blue2);
font-size: var(--font-size32);
}
.text {
color: var(--color-blue3);
font-size: var(--font-size46);
span {
background: linear-gradient(transparent 65%, var(--color-yellow) 65%, var(--color-yellow) 90%, transparent 90%);
}
}
}
.merit {
background: var(--color-blue4);
.title {
position: relative;
padding: 40px 20px;
text-align: center;
background: var(--color-blue);
&:before {
content: "";
display: inline-block;
position: absolute;
inset: 100% auto auto 50%;
width: 230px;
height: 60px;
background: var(--color-blue);
clip-path: polygon(0 0, 100% 0%, 50% 100%);
translate: -50% 0;
@media screen and (max-width: 768px) {
width: 100px;
height: 30px;
}
}
h2 {
color: var(--color-white);
font-size: var(--font-size60);
span {
font-size: var(--font-size40);
border-bottom: currentColor 2px solid;
}
i {
color: var(--color-yellow);
font-style: normal;
}
}
}
.merit-content {
padding: 100px 0;
@media screen and (max-width: 768px) {
padding: 80px 20px;
}
.item {
margin: 0 auto 80px auto;
max-width: var(--width2);
background: var(--color-white);
border-radius: 80px;
box-shadow: var(--shadow1);
@media screen and (max-width: 768px) {
border-radius: 20px;
}
&:last-child {
margin: 0 auto;
}
.item-title {
position: relative;
padding: 30px 30px 30px 300px;
color: var(--color-white);
font-size: var(--font-size48);
background: var(--color-blue-stripe);
border-radius: 80px 80px 0 0;
@media screen and (max-width: 768px) {
border-radius: 20px 20px 0 0;
padding: 20px 20px 20px 90px;
}
.icon {
position: absolute;
inset: 0 auto auto 80px;
padding: 30px 0 0 0;
width: 180px;
height: 212px;
font-size: var(--font-size22);
text-align: center;
line-height: 1;
letter-spacing: 0.3em;
text-indent: 0.3em;
background: url(//price-energy.com/wp-content/themes/mytheme/resource/lp-solar/images/merit-icon.png) no-repeat top center / cover;
@media screen and (max-width: 768px) {
inset: 0 auto auto 15px;
padding: 15px 0 0 0;
width: 60px;
height: 70px;
font-size: 10px;
}
span {
font-size: 100px;
letter-spacing: 0;
text-indent: 0;
@media screen and (max-width: 768px) {
font-size: 30px;
}
}
}
}
.item-body {
padding: 80px;
@media screen and (max-width: 768px) {
padding: 20px;
}
.merit01 & {
text-align: center;
.image:nth-child(1) {
margin: 0 auto;
max-width: 700px;
}
p {
margin: 30px 0;
@media screen and (max-width: 768px) {
text-align: left;
}
}
}
.merit02 & {
.flex {
display: flex;
gap: 30px;
@media screen and (max-width: 768px) {
flex-direction: column;
}
.image {
width: 55%;
@media screen and (max-width: 768px) {
width: 100%;
}
}
.text {
flex: 1;
font-size: var(--font-size20);
line-height: 1.6;
.point {
margin: 40px 0 20px 0;
padding: 5px 0 5px 30px;
font-size: var(--font-size28);
background: url(//price-energy.com/wp-content/themes/mytheme/resource/lp-solar/images/merit02-point.png) no-repeat center left/ 18px;
border-bottom: var(--color-red) 3px solid;
}
}
}
}
.merit03 & {
.copy {
margin: 0 0 50px 0;
font-size: var(--font-size32);
text-align: center;
@media screen and (max-width: 768px) {
text-align: left;
}
span {
color: var(--color-red);
}
}
.flex {
display: flex;
gap: 30px;
@media screen and (max-width: 768px) {
flex-direction: column;
}
.image {
width: 55%;
@media screen and (max-width: 768px) {
width: 100%;
}
}
.text {
flex: 1;
font-size: var(--font-size20);
line-height: 1.6;
}
}
}
.merit04 & {
.box {
&.box02 {
margin: 40px 0 0 0;
}
h3 {
position: relative;
margin: 0 auto;
height: 80px;
max-width: 530px;
color: var(--color-white);
font-size: var(--font-size40);
line-height: 80px;
text-align: center;
background-color: #f7957a;
background-image: radial-gradient(circle, #f58062 1.5px, transparent 1.5px), radial-gradient(circle, #f58062 1.5px, transparent 1.5px);
background-position: 0 0, 6.5px 13px;
background-size: 13px 26px;
border-radius: 100px;
@media screen and (max-width: 768px) {
max-width: 80%;
height: auto;
padding: 15px;
line-height: 1.6;
}
.box02 & {
background-color: #7fca42;
background-image: radial-gradient(circle, #66bf35 1.5px, transparent 1.5px), radial-gradient(circle, #66bf35 1.5px, transparent 1.5px);
}
}
.box-inner {
display: flex;
gap: 40px;
margin: -40px 0 0 0;
padding: 80px 60px;
line-height: 1.8;
background: var(--color-beige);
border-radius: 40px;
@media screen and (max-width: 768px) {
flex-direction: column;
padding: 60px 20px;
}
}
}
}
}
}
.sub {
margin: 0 auto 80px auto;
padding: 120px 0 0 0;
height: 1096px;
text-align: center;
background: url(//price-energy.com/wp-content/themes/mytheme/resource/lp-solar/images/merit-sub.png) no-repeat top center;
@media screen and (max-width: 768px) {
margin: 0 -20px 80px -20px;
padding: 80px 20px 100px 20px;
height: auto;
background: url(//price-energy.com/wp-content/themes/mytheme/resource/lp-solar/images/merit-sub.png) no-repeat top center / cover;
}
h3 {
margin: 0 0 50px 0;
color: var(--color-blue);
font-size: var(--font-size60);
font-weight: var(--font-weight-bold);
span {
font-size: var(--font-size32);
}
}
.copy {
margin: 0 0 50px 0;
font-size: var(--font-size56);
font-weight: var(--font-weight-bold);
line-height: 1;
.red {
color: var(--color-red);
font-size: 200px;
font-weight: var(--font-weight-normal);
@media screen and (max-width: 768px) {
font-size: 20vw;
}
}
.large {
font-size: 140px;
font-weight: var(--font-weight-normal);
@media screen and (max-width: 768px) {
font-size: 15vw;
}
}
}
p {
margin: 0 0 50px 0;
font-size: var(--font-size22);
line-height: 2;
@media screen and (max-width: 768px) {
text-align: left;
}
}
.comment {
color: var(--color-blue);
font-size: var(--font-size32);
}
}
}
}
.fuan {
margin: 0 0 80px 0;
background: url(//price-energy.com/wp-content/themes/mytheme/resource/lp-solar/images/fuan.png) no-repeat center bottom;
.title {
position: relative;
padding: 40px 20px;
text-align: center;
background: var(--color-blue);
&:before {
content: "";
display: inline-block;
position: absolute;
inset: 100% auto auto 50%;
width: 230px;
height: 60px;
background: var(--color-blue);
clip-path: polygon(0 0, 100% 0%, 50% 100%);
translate: -50% 0;
@media screen and (max-width: 768px) {
width: 100px;
height: 30px;
}
}
h2 {
color: var(--color-white);
font-size: var(--font-size56);
span {
font-size: var(--font-size40);
border-bottom: currentColor 2px solid;
}
i {
color: var(--color-yellow);
font-style: normal;
}
}
}
.fuan-content {
margin: 0 auto;
padding: 100px 0 130px 0;
max-width: var(--width);
@media screen and (max-width: 768px) {
padding: 80px 20px;
}
.item {
&:last-child {
margin: 50px 0 0 0;
}
.q {
display: flex;
align-items: center;
gap: 50px;
margin: 0 0 50px 0;
@media screen and (max-width: 768px) {
gap: 30px;
margin: 0 0 20px 0;
}
.illust {
@media screen and (max-width: 768px) {
width: 70px;
height: auto;
}
}
.text {
flex: 1;
position: relative;
padding: 30px;
color: var(--color-blue);
font-size: var(--font-size40);
background: var(--color-white);
border-radius: 20px;
box-shadow: var(--shadow1);
@media screen and (max-width: 768px) {
padding: 15px;
}
&:before {
content: "";
position: absolute;
inset: 50% 100% auto auto;
width: 0;
height: 0;
border-style: solid;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid var(--color-white);
border-left: 0;
translate: 0 -50%;
@media screen and (max-width: 768px) {
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid var(--color-white);
}
}
}
}
.a {
background: var(--color-white);
border-radius: 80px;
box-shadow: var(--shadow1);
@media screen and (max-width: 768px) {
border-radius: 20px;
}
.midasi {
position: relative;
padding: 30px 230px 30px 50px;
color: var(--color-white);
font-size: var(--font-size32);
background: var(--color-blue-stripe2);
border-radius: 80px 80px 0 0;
@media screen and (max-width: 768px) {
padding: 20px 120px 20px 20px;
border-radius: 20px 20px 0 0;
}
.illust {
position: absolute;
inset: auto 30px 0 auto;
img {
display: block;
@media screen and (max-width: 768px) {
width: 80px;
}
}
}
}
p {
padding: 50px;
@media screen and (max-width: 768px) {
padding: 20px;
}
}
}
}
}
}
.doko {
margin: 0 auto 100px auto;
max-width: var(--width2);
h2 {
margin: 0 auto 70px auto;
width: fit-content;
color: var(--color-blue3);
font-size: var(--font-size60);
font-weight: var(--font-weight-bold);
text-align: center;
border-bottom: var(--color-blue) 6px dotted;
}
.doko-list {
display: flex;
gap: 20px;
@media screen and (max-width: 768px) {
flex-direction: column;
gap: 60px;
margin: 0 20px;
}
.item {
flex: 1;
position: relative;
padding: 60px 40px 40px 40px;
background: var(--color-gray);
box-shadow: var(--shadow1);
border-radius: 40px;
@media screen and (max-width: 768px) {
padding: 60px 20px 20px 20px;
}
&:before {
content: "";
position: absolute;
inset: -10px auto auto 50%;
width: 324px;
height: 44px;
background: url(//price-energy.com/wp-content/themes/mytheme/resource/lp-solar/images/doko-image.png) no-repeat center top / contain;
translate: -50% 0;
@media screen and (max-width: 768px) {
max-width: 80%;
}
}
h3 {
color: var(--color-blue3);
font-size: var(--font-size32);
text-align: center;
@media screen and (max-width: 768px) {
font-size: 6vw;
}
span {
color: var(--color-blue);
}
}
.image {
margin: 30px auto;
width: fit-content;
max-width: 70%;
}
p {
position: relative;
margin: 20px 0 0 0;
padding: 0 0 0 20px;
font-size: var(--color-blue3);
line-height: 1.6;
&:before {
content: "";
position: absolute;
inset: 8px auto auto 0;
width: 8px;
height: 8px;
background: var(--color-blue);
border-radius: 50%;
}
}
}
}
}
.nayami {
background: var(--color-gray);
.title {
position: relative;
padding: 40px 20px;
text-align: center;
background: var(--color-blue3);
&:before {
content: "";
display: inline-block;
position: absolute;
inset: 100% auto auto 50%;
width: 230px;
height: 60px;
background: var(--color-blue3);
clip-path: polygon(0 0, 100% 0%, 50% 100%);
translate: -50% 0;
@media screen and (max-width: 768px) {
width: 100px;
height: 30px;
}
}
h2 {
color: var(--color-white);
font-size: var(--font-size60);
span {
font-size: var(--font-size40);
border-bottom: currentColor 2px solid;
}
i {
color: var(--color-yellow);
font-style: normal;
}
}
}
.nayami-content {
padding: 100px 0;
@media screen and (max-width: 768px) {
padding: 80px 20px;
}
.item {
margin: 0 auto 80px auto;
max-width: var(--width2);
background: var(--color-white);
border-radius: 80px;
box-shadow: var(--shadow1);
@media screen and (max-width: 768px) {
border-radius: 20px;
}
&:last-child {
margin: 0 auto;
}
.item-title {
position: relative;
padding: 50px 30px 50px 300px;
color: var(--color-white);
font-size: var(--font-size48);
background: var(--color-blue-stripe2);
border-radius: 80px 80px 0 0;
@media screen and (max-width: 768px) {
border-radius: 20px 20px 0 0;
padding: 20px 20px 20px 90px;
}
.icon {
position: absolute;
inset: 0 auto auto 80px;
padding: 30px 0 0 0;
width: 180px;
height: 212px;
font-size: var(--font-size22);
text-align: center;
line-height: 1;
letter-spacing: 0.3em;
text-indent: 0.3em;
background: url(//price-energy.com/wp-content/themes/mytheme/resource/lp-solar/images/nayami-icon.png) no-repeat top center / contain;
@media screen and (max-width: 768px) {
inset: 0 auto auto 15px;
padding: 15px 0 0 0;
width: 60px;
height: 70px;
font-size: 10px;
}
span {
font-size: 100px;
letter-spacing: 0;
text-indent: 0;
@media screen and (max-width: 768px) {
font-size: 30px;
}
}
}
}
.item-body {
padding: 80px;
@media screen and (max-width: 768px) {
padding: 20px;
}
.item-body-main {
display: flex;
gap: 40px;
@media screen and (max-width: 768px) {
flex-direction: column;
}
.nayami02 & {
flex-direction: row-reverse;
@media screen and (max-width: 768px) {
flex-direction: column;
}
}
.image {
width: 50%;
@media screen and (max-width: 768px) {
width: 100%;
}
}
p {
width: 50%;
line-height: 1.8;
@media screen and (max-width: 768px) {
width: 100%;
}
}
}
.nayami-qa {
margin: 60px 0 0 0;
.nayami-qa-title {
position: relative;
margin: 0 auto;
padding: 20px 50px;
width: fit-content;
color: var(--color-white);
font-size: var(--font-size32);
background: var(--color-blue);
border-radius: 100px;
@media screen and (max-width: 768px) {
padding: 20px;
font-size: 16px;
}
}
.nayami-qa-body {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: start;
gap: 10px;
margin: -40px 0 0 0;
padding: 70px 70px 40px 70px;
background-color: var(--color-white);
background-image: radial-gradient(circle, var(--color-gray) 1.5px, transparent 1.5px), radial-gradient(circle, var(--color-gray) 1.5px, transparent 1.5px);
background-position: 0 0, 6.5px 13px;
background-size: 13px 26px;
border: var(--color-blue) 3px solid;
border-radius: 40px;
@media screen and (max-width: 768px) {
grid-template-columns: repeat(1, 1fr);
padding: 60px 20px 20px 20px;
border-radius: 20px;
}
.nayami-qa-item {
background: var(--color-white);
border: #cacaca 2px solid;
border-radius: 10px;
.nayami-qa-item-q {
position: relative;
padding: 20px 60px 20px 20px;
&:before {
content: "";
position: absolute;
inset: 50% 20px auto auto;
width: 32px;
height: 32px;
background: url(//price-energy.com/wp-content/themes/mytheme/resource/lp-solar/images/plus.png) no-repeat 0 0;
translate: 0 -50%;
}
}
p {
display: none;
position: relative;
padding: 20px;
font-size: 14px;
&:before {
content: "";
position: absolute;
inset: 0 auto auto 20px;
width: calc(100% - 40px);
border-top: #cacaca 2px solid;
}
}
}
}
}
.nayami-point {
display: flex;
justify-content: center;
gap: 10px;
margin: 40px 0 0 0;
@media screen and (max-width: 768px) {
flex-direction: column;
}
p {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 10px;
font-size: var(--font-size28);
border: var(--color-blue) 3px solid;
border-radius: 100px;
@media screen and (max-width: 768px) {
font-size: 4vw;
}
&:before {
content: "";
width: 25px;
height: 25px;
background: url(//price-energy.com/wp-content/themes/mytheme/resource/lp-solar/images/check02.jpg) no-repeat top center;
}
}
}
.table {
margin: 50px 0 0 0;
table {
overflow: clip;
width: 100%;
border-radius: 20px;
thead {
th {
padding: 15px;
color: var(--color-white);
text-align: center;
background: var(--color-blue);
border: var(--color-white) 2px solid;
}
}
tbody {
th {
padding: 15px;
text-align: left;
background: var(--color-blue4);
border: var(--color-white) 2px solid;
}
td {
padding: 15px;
font-weight: normal;
text-align: left;
background: var(--color-blue4);
border: var(--color-white) 2px solid;
}
}
}
}
}
}
}
}
.step3 {
margin: 0 auto 65px auto;
padding: 70px 0;
background: url(//price-energy.com/wp-content/themes/mytheme/resource/lp-solar/images/step3.png) no-repeat center 0 /cover;
@media screen and (max-width: 768px) {
background: var(--color-blue4);
}
.title {
margin: 0 0 40px 0;
text-align: center;
h2 {
color: var(--color-blue3);
font-size: var(--font-size80);
font-weight: var(--font-weight-bold);
span {
font-size: var(--font-size40);
border-bottom: currentColor 2px solid;
}
i {
color: var(--color-red);
font-style: normal;
}
}
}
.step3-content {
display: flex;
gap: 25px;
margin: 0 auto;
width: var(--width2);
@media screen and (max-width: 768px) {
flex-direction: column;
padding: 0 20px;
}
.item {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
&.item01 {
z-index: 2;
}
&.item02 {
z-index: 1;
}
.icon {
position: relative;
margin: 0 auto;
padding: 18px 0 0 0;
width: 120px;
height: 120px;
color: var(--color-white);
text-align: center;
line-height: 1.1;
background: var(--color-blue);
border-radius: 50%;
z-index: 1;
span {
font-size: 20px;
border-bottom: currentColor 2px solid;
}
i {
font-size: 60px;
font-style: normal;
}
}
.item-content {
flex: 1;
position: relative;
margin: -60px 0 0 0;
padding: 100px 40px 40px 40px;
background: var(--color-white);
border-radius: 20px;
&:before {
content: "";
position: absolute;
inset: 50% auto auto 100%;
width: 0;
height: 0;
border-style: solid;
border-top: 35px solid transparent;
border-bottom: 35px solid transparent;
border-left: 35px solid var(--color-red);
border-right: 0;
translate: 0 -50%;
@media screen and (max-width: 768px) {
display: none;
}
}
.item03 &:before {
display: none;
}
h3 {
margin: 0 0 15px 0;
font-size: var(--font-size26);
font-weight: var(--font-weight-bold);
text-align: center;
}
p {
line-height: 1.8;
}
}
}
}
}
.faq {
padding: 80px 0 100px 0;
background: var(--color-gray);
.title {
margin: 0 0 40px 0;
text-align: center;
h2 {
color: var(--color-blue3);
font-size: var(--font-size60);
font-weight: var(--font-weight-bold);
span {
font-size: var(--font-size26);
font-weight: var(--font-weight-normal);
border-bottom: currentColor 2px solid;
}
}
}
.faq-content {
margin: 0 auto;
width: var(--width);
@media screen and (max-width: 768px) {
padding: 0 20px;
}
.item {
margin: 0 0 10px 0;
background: var(--color-white);
border: #cacaca 2px solid;
border-radius: 15px;
.item-q {
position: relative;
padding: 20px 60px 20px 90px;
font-size: var(--font-size26);
@media screen and (max-width: 768px) {
padding: 20px 60px 20px 70px;
}
&:before {
content: "";
position: absolute;
inset: 50% 20px auto auto;
width: 32px;
height: 32px;
background: url(//price-energy.com/wp-content/themes/mytheme/resource/lp-solar/images/plus.png) no-repeat 0 0;
translate: 0 -50%;
}
&:after {
content: "Q";
display: grid;
place-items: center;
position: absolute;
inset: 14px auto auto 20px;
width: 50px;
height: 50px;
color: var(--color-white);
font-size: 32px;
background: var(--color-blue);
border-radius: 50%;
@media screen and (max-width: 768px) {
width: 36px;
height: 36px;
font-size: 20px;
}
}
}
p {
display: none;
position: relative;
padding: 20px 20px 20px 90px;
font-weight: normal;
@media screen and (max-width: 768px) {
padding: 20px 20px 20px 70px;
}
&:before {
content: "";
position: absolute;
inset: 0 auto auto 20px;
width: calc(100% - 40px);
border-top: #cacaca 2px solid;
}
&:after {
content: "A";
display: grid;
place-items: center;
position: absolute;
inset: 14px auto auto 20px;
width: 50px;
height: 50px;
color: var(--color-white);
font-size: 32px;
background: var(--color-blue3);
border-radius: 50%;
@media screen and (max-width: 768px) {
width: 36px;
height: 36px;
font-size: 20px;
}
}
}
}
}
}
.column {
padding: 80px 0 100px 0;
@media screen and (max-width: 768px) {
padding: 80px 0;
}
.title {
margin: 0 0 40px 0;
text-align: center;
h2 {
margin: 0 0 20px 0;
color: var(--color-blue);
font-size: var(--font-size60);
font-weight: var(--font-weight-bold);
span {
font-size: var(--font-size26);
font-weight: var(--font-weight-normal);
border-bottom: currentColor 2px solid;
}
}
}
.column-content {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin: 0 auto;
width: var(--width);
@media screen and (max-width: 768px) {
grid-template-columns: repeat(1, 1fr);
padding: 0 20px;
}
.item {
display: flex;
padding: 30px;
background: #fbf5d7;
border-radius: 40px;
@media screen and (max-width: 768px) {
padding: 20px;
}
.image {
margin: 0 20px 0 0;
width: 180px;
@media screen and (max-width: 768px) {
width: 30%;
}
}
p {
flex: 1;
}
}
}
}
.company {
margin: 0 0 80px 0;
padding: 50px 0 80px 0;
text-align: center;
background: url(//price-energy.com/wp-content/themes/mytheme/resource/lp-solar/images/company.png) no-repeat center top;
.title {
margin: 0 0 40px 0;
text-align: center;
h2 {
margin: 0 0 20px 0;
color: var(--color-white);
font-size: var(--font-size60);
font-weight: var(--font-weight-bold);
span {
font-size: var(--font-size26);
font-weight: var(--font-weight-normal);
border-bottom: currentColor 2px solid;
}
}
.image {
margin: 50px auto;
max-width: 390px;
@media screen and (max-width: 768px) {
max-width: 60%;
}
}
}
.company-content {
margin: 0 auto;
max-width: 900px;
color: var(--color-white);
line-height: 1.8;
@media screen and (max-width: 768px) {
padding: 0 20px;
text-align: left;
}
}
}
.kurabete {
margin: 0 auto 90px auto;
width: var(--width);
text-align: center;
h2 {
margin: 0 0 40px;
height: 149px;
color: var(--color-blue3);
font-size: var(--font-size60);
font-weight: var(--font-weight-bold);
background: url(//price-energy.com/wp-content/themes/mytheme/resource/lp-solar/images/kurabete-illust.png) no-repeat center bottom;
@media screen and (max-width: 768px) {
background: none;
height: auto;
}
}
.kurabete-content {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
@media screen and (max-width: 768px) {
grid-template-columns: repeat(2, 1fr);
padding: 0 20px;
}
.image {
margin: 0 auto;
width: 60px;
}
p {
margin: -40px 0 0 0;
padding: 80px 20px 40px 20px;
font-size: var(--font-size22);
background: var(--color-gray);
border-radius: 40px;
box-shadow: var(--shadow1);
}
}
}
.footer {
position: relative;
padding: 40px var(--padding);
text-align: center;
background: var(--color-blue);
.pagetop a {
display: grid;
place-items: center;
cursor: pointer;
position: fixed;
bottom: 10px;
right: 10px;
width: 80px;
height: 80px;
translate: 0 -50%;
background: var(--color-yellow);
border-radius: 50%;
box-shadow: var(--shadow1);
img {
width: 32px;
}
@media screen and (max-width: 768px) {
width: 40px;
height: 40px;
bottom: 50px;
img {
width: 16px;
}
}
&:hover {
opacity: 0.6;
}
}
.link {
display: flex;
justify-content: center;
gap: 30px;
font-size: var(--font-size16);
a {
display: flex;
align-items: center;
padding: 0 0 0 20px;
color: var(--color-white);
background: url(//price-energy.com/wp-content/themes/mytheme/resource/lp-solar/images/arrow.jpg) no-repeat left center;
}
}
.copyright {
margin: 20px 0 0 0;
color: var(--color-white);
font-size: var(--font-size13);
}
}
.sp-cta {
display: none;
}
@media screen and (max-width: 768px) {
.sp-cta {
position: fixed;
font-size: 18px;
z-index: 999;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
background: var(--color-yellow);
color: #000;
padding: 0.8em 1em;
width: 90%;
box-sizing: border-box;
border-radius: 40px;
overflow: hidden;
}
}
.reflection {
height: 100%;
width: 60px;
position: absolute;
top: -180px;
left: -180px;
background-color: rgba(255, 255, 255, 0.8);
opacity: 0;
transform: rotate(45deg);
animation: reflection 3s ease-in-out infinite;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 3s ease-in-out infinite;
-moz-transform: rotate(45deg);
-moz-animation: reflection 3s ease-in-out infinite;
-ms-transform: rotate(45deg);
-ms-animation: reflection 3s ease-in-out infinite;
-o-transform: rotate(45deg);
-o-animation: reflection 3s ease-in-out infinite;
}
@keyframes reflection {
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}