html {
scroll-behavior: smooth;
} .page.-pr {
margin-bottom: 120px;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.page.-pr {
margin-bottom: 60px;
}
} .pr-catch {
margin-top: 60px;
text-align: center;
font-size: 18px;
letter-spacing: 0.15em;
}
.pr-list {
margin-top: 80px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 60px 50px;
}
.pr-list li {
padding: 35px 30px;
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--color-white);
border-radius: 15px;
box-shadow: 0 0 3px rgba(247, 234, 218, 1);
}
.pr-logo {
height: 65px;
}
.pr-logo img {
height: 100%;
max-height: 65px;
width: auto;
max-width: 150px;
object-fit: contain;
}
.pr-name {
margin-top: 15px;
text-align: center;
font-size: 25px;
font-weight: var(--font-weight-bold);
}
.pr-text {
margin-top: 25px;
flex: 1;
}
.pr-btn {
margin-top: 25px;
}
.pr-btn .common-button {
background-color: #99797c;
}
.pr-btn .common-button__icon.-other::before,
.pr-btn .common-button .common-button__icon.-other::after {
content: "";
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/product/icon-otherlink.svg) center center /
contain no-repeat;
width: 14px;
height: 14px;
border-radius: inherit;
transition: none;
}
@media screen and (max-width: 767px) {
.pr-catch {
margin-top: 30px;
font-size: 12px;
}
.pr-list {
margin-top: 40px;
grid-template-columns: 1fr;
gap: 30px;
}
.pr-list li {
padding: 35px 20px;
}
.pr-name {
margin-top: 10px;
}
.pr-text {
margin-top: 20px;
}
} :root {
--custom-color-1: #fcf5ec;
--custom-color-2: #e50012;
--custom-color-3: #d0a59a;
} .pr-common-button.-contact:not(.-default) {
background-color: var(--custom-color-2);
}
.pr-common-button.-contact .common-button__icon::before {
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/product/icon-mail.svg) center center / contain
no-repeat;
width: 20px;
height: 16px;
position: absolute;
border-radius: 0;
}
.pr-common-button.-report .common-button__icon::before {
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/product/icon-report.svg) center center / contain
no-repeat;
width: 20px;
height: 25px;
position: absolute;
border-radius: 0;
}
.pr-common-button.-otherlink {
background-color: var(--color-white);
color: var(--color-main);
}
.pr-common-button.-otherlink .common-button__icon::before {
background-color: var(--color-main);
}
.pr-common-button.-otherlink:hover {
color: var(--color-white)!important;
} .pagehero.-pr {
min-height: 616px;
background-color: var(--custom-color-1);
}
.pr-pagehero-fl {
margin-top: 71px;
display: grid;
grid-template-columns: 1fr 330px;
gap: 40px;
}
.pr-pagehero-medal {
margin-bottom: 10px;
padding: 6px 15px 5px 35px;
background-color: var(--custom-color-2);
border-radius: 5px;
width: fit-content;
font-size: 15px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
color: var(--color-white);
position: relative;
}
.pr-pagehero-medal::before {
content: "";
display: block;
width: 16px;
height: 21px;
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/product/icon-medal.svg) no-repeat center center / contain;
position: absolute;
top: 5px;
left: 11px;
}
.pr-pagehero-subtitle {
font-size: 18px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
}
.pr-pagehero-title {
margin-top: 30px;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
line-height: 1.1;
}
.pr-pagehero-logo {
display: block;
width: 98px;
aspect-ratio: 1;
object-fit: contain;
}
.pr-pagehero-btnbox {
margin-top: 80px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 20px 30px;
} .pr-pagehero-btnbox.-app {
flex-wrap: wrap;
gap: 10px 20px;
}
.pr-pagehero-btnbox.-app p {
width: 100%;
font-size: 14px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
}
.pr-pagehero-btnbox.-app a img {
transition: transform 0.3s ease;
}
.pr-pagehero-btnbox.-app a:hover img {
transform: scale(1.2);
}
.pr-pagehero-btnbox.-app a.-applestore img {
max-width: 134px;
}
.pr-pagehero-btnbox.-app a.-googleplay img {
max-width: 166px;
}
.pr-pagehero-img img {
width: 100%;
max-width: 500px;
}
.pr-pagehero-attention {
padding-left: 1rem;
font-size: 12px;
font-weight: var(--font-weight-regular);
letter-spacing: 0.15em;
position: relative;
}
.pr-pagehero-attention::before {
content: "※";
position: absolute;
top: 0;
left: 0;
}
@media screen and (max-width: 767px) {
.pagehero.-product {
min-height: 851px;
}
.pr-pagehero-fl {
margin-top: 50px;
grid-template-columns: 1fr;
gap: 36px;
}
.pr-pagehero-medal {
padding: 6px 10px 5px 30px;
font-size: 12px;
}
.pr-pagehero-medal::before {
top: 4px;
left: 9px;
}
.pr-pagehero-subtitle {
font-size: 12px;
}
.pr-pagehero-title {
margin-top: 20px;
gap: 15px;
}
.pr-pagehero-logo {
width: 65px;
}
.pr-pagehero-btnbox {
margin-top: 56px;
flex-direction: column;
gap: 20px;
}
.pr-pagehero-btnbox.-app {
flex-direction: row;
}
.pr-pagehero-img img {
max-width: 400px;
}
} .pr-onayami {
margin-top: 60px;
padding-bottom: 50px;
}
.pr-onayami-box {
margin-inline: auto;
padding: 50px 40px;
background-color: var(--custom-color-2);
width: min(100% - 100px, 1380px);
border-radius: 20px;
position: relative;
}
.pr-onayami-box::before {
content: "";
display: block;
width: 100%;
aspect-ratio: 345 / 97;
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/product/legacy-system-migration-support/bg.svg)
no-repeat center center / contain;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
position: absolute;
top: auto;
bottom: 0;
left: 0;
z-index: 0;
}
.pr-onayami-box::after {
content: "";
display: block;
width: 0;
height: 0;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-top: 50px solid var(--custom-color-3);
position: absolute;
top: auto;
bottom: -50px;
left: calc(50% - 35px);
}
.pr-onayami-box > * {
position: relative;
z-index: 1;
}
.pr-onayami-title {
text-align: center;
font-size: 30px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
color: var(--color-white);
}
.pr-onayami-list {
margin-top: 30px;
margin-inline: auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px 40px;
}
.pr-onayami-list li {
padding: 30px 20px;
background-color: var(--color-white);
border-radius: 15px;
box-shadow: 0 0 3px rgba(247, 234, 218, 1);
text-align: center;
font-size: 18px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
}
.pr-onayami-list li span {
margin-bottom: 3px;
display: block;
font-size: 12px;
font-weight: var(--font-weight-regular);
} .pr-onayami.-three .pr-onayami-box::before {
aspect-ratio: 1380 / 191;
}
@media screen and (min-width: 768px) { .pr-onayami.-three .pr-onayami-list {
grid-template-columns: repeat(3, 1fr);
gap: 20px 30px;
}
}
@media screen and (max-width: 1060px) { .pr-onayami.-three .pr-onayami-list {
grid-template-columns: 1fr;
width: min(100%, 450px);
gap: 20px 30px;
}
}
@media screen and (max-width: 767px) {
.pr-onayami {
padding-bottom: 41px;
}
.pr-onayami-box {
margin-inline: auto;
padding: 30px 20px;
width: min(100% - 40px, 1380px);
border-radius: 15px;
}
.pr-onayami-box::before {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.pr-onayami-box::after {
border-left-width: 29px;
border-right-width: 28px;
border-top-width: 41px;
bottom: -41px;
}
.pr-onayami-title {
font-size: 24px;
}
.pr-onayami-list {
margin-top: 20px;
grid-template-columns: 1fr;
gap: 10px;
width: min(100%, 450px);
}
.pr-onayami-list li {
padding: 20px 20px;
font-size: 16px;
}
} .pr-point {
padding-bottom: 200px;
background-color: var(--custom-color-1);
}
.pr-point.-default {
margin-top: 60px;
padding: 120px 0;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
}
.pr-point-subtitle {
margin-bottom: -5px;
text-align: center;
font-size: 12px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
}
.pr-point-title {
text-align: center;
font-size: 30px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
}
.pr-point-text {
margin-top: 30px;
margin-bottom: 60px;
text-align: center;
font-size: 16px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
line-height: 2.0;
}
.pr-point-list {
margin-top: 36px;
display: flex;
flex-direction: column;
gap: 120px;
}
.pr-point-list > li {
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
}
.pr-point-fukidashi {
padding: 30px;
background-color: var(--color-white);
border-radius: 15px;
position: relative;
}
.pr-point-fukidashi::after {
content: "";
display: block;
width: 34px;
height: 36px;
background-color: var(--color-white);
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.pr-point-pop {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 124px;
aspect-ratio: 1;
background-color: var(--color-main);
border-radius: 50%;
font-size: 18px;
font-weight: var(--font-weight-bold);
color: var(--color-white);
transform: rotate(15deg);
position: absolute;
top: -25px;
left: auto;
right: -25px;
z-index: 2;
}
.pr-point-pop span {
display: block;
font-size: 24px;
}
.pr-point-pointTitle {
margin-bottom: 20px;
padding-left: 110px;
display: flex;
align-items: center;
min-height: 90px;
font-size: 22px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
position: relative;
}
.pr-point-pointTitle::before {
content: "";
display: block;
width: 90px;
height: 81px;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
}
.pr-point-fukidashi > p {
font-weight: var(--font-weight-regular);
}
.pr-point-two {
display: grid;
grid-template-columns: 124px 1fr;
gap: 20px;
}
.pr-point-two p {
font-weight: var(--font-weight-regular);
line-height: 1.6;
}
.pr-point-plist {
margin-top: 30px;
display: flex;
flex-direction: column;
gap: 8px;
}
.pr-point-plist li {
padding-left: 21px;
font-weight: var(--font-weight-bold);
position: relative;
}
.pr-point-plist li::before {
content: "";
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/product/icon-star.svg) center center / contain
no-repeat;
width: 16px;
height: 15px;
position: absolute;
top: 3px;
left: 0;
}
.pr-point-btn {
margin-top: 30px;
}
@media screen and (min-width: 921px) {
.pr-point-list > li:nth-of-type(2n) {
flex-direction: row-reverse;
}
.pr-point-image {
width: 48%;
}
.pr-point-fukidashi {
width: calc(52% - 5px);
}
.pr-point-list > li:nth-of-type(2n + 1) .pr-point-fukidashi {
margin-left: 34px;
}
.pr-point-list > li:nth-of-type(2n + 1) .pr-point-fukidashi::after {
clip-path: polygon(100% 0, 0 50%, 100% 100%);
left: -34px;
}
.pr-point-list > li:nth-of-type(2n) .pr-point-fukidashi {
margin-right: 34px;
}
.pr-point-list > li:nth-of-type(2n) .pr-point-fukidashi::after {
clip-path: polygon(0 0, 100% 50%, 0 100%);
left: auto;
right: -34px;
}
.pr-point-two img {
margin-inline: auto;
display: block;
width: auto;
height: 100%;
max-height: 180px;
object-fit: contain;
}
}
@media screen and (max-width: 920px) {
.pr-point-list > li {
flex-direction: column-reverse;
gap: 20px;
}
.pr-point-image {
margin-inline: auto;
max-width: 400px;
display: block;
}
.pr-point-fukidashi {
margin-bottom: 41px;
padding: 30px 20px;
margin-inline: auto;
max-width: 600px;
}
.pr-point-fukidashi::after {
width: 43px;
height: 41px;
clip-path: polygon(0 0, 100% 0, 50% 100%);
top: auto;
bottom: -41px;
left: calc(50% - 20px);
}
.pr-point-pop {
width: 90px;
font-size: 14px;
top: -55px;
right: -10px;
}
.pr-point-pop span {
font-size: 18px;
}
}
@media screen and (max-width: 767px) {
.pr-point {
padding-bottom: 80px;
}
.pr-point.-default {
margin-top: 50px;
padding: 50px 0;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.pr-point-subtitle {
font-size: 10px;
}
.pr-point-title {
font-size: 20px;
}
.pr-point-text {
margin-top: 20px;
margin-bottom: 50px;
text-align: left;
font-size: 14px;
}
.pr-point-list {
margin-top: 20px;
gap: 80px;
}
.pr-point-pointTitle {
margin-bottom: 20px;
padding-left: 75px;
min-height: 75px;
font-size: 18px;
}
.pr-point-pointTitle::before {
width: 60px;
height: 55px;
}
.pr-point-two {
grid-template-columns: 1fr;
}
.pr-point-two picture {
order: 2;
}
.pr-point-two img {
margin-inline: auto;
display: block;
max-width: 180px;
}
.pr-point-two p {
order: 1;
}
.pr-point-plist {
gap: 10px;
}
} .pr-pointmore {
margin-top: -60px;
padding: 120px 0;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
background-color: var(--color-white);
}
.pr-pointmore-subtitle {
margin-top: -5px;
text-align: center;
font-size: 18px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
}
.pr-pointmore-title {
text-align: center;
font-size: 30px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
}
.pr-pointmore-text {
margin-top: 30px;
text-align: center;
letter-spacing: 0.15em;
line-height: 2.0;
}
.pr-pointmore-list {
margin-top: 60px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 50px;
}
.pr-pointmore-list dl {
padding: 20px;
background-color: #F7F7F7;
border-radius: 15px;
display: grid;
grid-template-columns: 1fr;
}
.pr-pointmore-list dt {
margin-bottom: 30px;
padding: 8px;
height: fit-content;
background-color: var(--custom-color-2);
text-align: center;
border-radius: 30px;
font-size: 18px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
color: var(--color-white);
}
.pr-pointmore-list dd.pr-pointmore-img {
max-height: 108px;
}
.pr-pointmore-list dd.pr-pointmore-img img {
margin-inline: auto;
display: block;
width: auto;
height: 100%;
max-height: 108px;
object-fit: contain;
}
.pr-pointmore-list dd:not(.pr-pointmore-img) {
margin-top: 15px;
font-size: 14px;
font-weight: var(--font-weight-regular);
}
.pr-pointmore-attention {
margin-top: 10px;
text-align: right;
font-size: 14px;
}
.pr-pointmore .pr-cta2 {
margin-top: 60px;
}
@media screen and (max-width: 900px) {
.pr-pointmore-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 767px) {
.pr-pointmore {
margin-top: -20px;
padding: 60px 0;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.pr-pointmore-subtitle {
font-size: 14px;
}
.pr-pointmore-title {
font-size: 20px;
}
.pr-pointmore-text {
margin-top: 25px;
text-align: left;
}
.pr-pointmore-list {
margin-inline: auto;
margin-top: 30px;
grid-template-columns: 1fr;
gap: 50px;
max-width: 500px;
}
.pr-pointmore-list dl {
grid-template-columns: 1fr;
}
.pr-pointmore-attention {
font-size: 12px;
}
} .pr-price {
margin-bottom: 180px;
}
.pr-price-title {
text-align: center;
font-size: 30px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
}
.pr-price-list {
margin-top: 50px;
margin-inline: auto;
width: min(100% - 100px, 1380px);
display: grid;
}
.pr-price-list.-two {
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
.pr-price-list.-three {
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.pr-price-head {
padding: 20px;
display: grid;
grid-template-columns: 1fr;
gap: 10px;
background-color: var(--custom-color-2);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
text-align: center;
color: var(--color-white);
position: relative;
}
.pr-price-head dt {
font-size: 28px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
}
.pr-price-head dd {
font-size: 14px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
}
.pr-price-cnt {
padding: 20px;
background-color: #F7F7F7;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.pr-price-topLabel {
margin-inline: auto;
padding: 7px 17px 6px 38px;
background-color: var(--custom-color-2);
border-radius: 5px;
width: fit-content;
font-size: 15px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
color: var(--color-white);
position: relative;
}
.pr-price-topLabel::before {
content: "";
display: block;
width: 16px;
height: 21px;
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/product/icon-medal.svg) no-repeat center center / contain;
position: absolute;
top: 7px;
left: 11px;
}
.pr-price-price {
text-align: center;
font-size: 14px;
}
.pr-price-price span {
padding: 0 3px;
display: inline-flex;
font-size: 43px;
font-weight: var(--font-weight-bold);
}
.pr-price-bottomLabel {
text-align: center;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: var(--font-weight-bold);
color: var(--color-main);
}
.pr-price-bottomLabel span {
margin-right: 5px;
padding: 2px 10px;
display: inline-flex;
background-color: var(--color-main);
border-radius: 10px;
font-size: 11px;
color: var(--color-white);
}
.pr-price-option {
margin-top: 20px;
padding: 20px 15px;
display: flex;
flex-direction: column;
gap: 15px;
background-color: var(--color-white);
}
.pr-price-option li {
padding-left: 33px;
min-height: 25px;
display: flex;
align-items: center;
font-size: 12px;
position: relative;
z-index: 0;
}
.pr-price-option li::before,
.pr-price-option li::after {
content: "";
display: block;
width: 25px;
aspect-ratio: 1;
position: absolute;
top: 0;
left: 0;
}
.pr-price-option li::before {
background-color: var(--custom-color-2);
border-radius: 999px;
z-index: 1;
}
.pr-price-option li::after {
background-size: contain;
background-repeat: no-repeat;
z-index: 2;
}
.pr-price-option li[data-icon="1"]::after {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/product/pl-builder/price-icon01.svg);
}
.pr-price-option li[data-icon="2"]::after {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/product/pl-builder/price-icon02.svg);
}
.pr-price-option li[data-icon="3"]::after {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/product/pl-builder/price-icon03.svg);
}
.pr-price-option li[data-icon="4"]::after {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/product/pl-builder/price-icon04.svg);
}
.pr-price-option li[data-icon="5"]::after {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/product/pl-builder/price-icon05.svg);
}
.pr-price-option li[data-icon="6"]::after {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/product/pl-builder/price-icon06.svg);
}
.pr-price-option li span {
font-weight: var(--font-weight-bold);
color: var(--color-main);
}
.pr-price-text {
margin-top: 20px;
font-size: 14px;
font-weight: var(--font-weight-regular);
}
.pr-price-attention {
margin-top: 20px;
margin-inline: auto;
width: min(100% - 100px, 1380px);
}
.pr-price-attention p {
padding-left: 1rem;
margin-left: auto;
width: fit-content;
font-size: 12px;
font-weight: var(--font-weight-regular);
position: relative;
}
.pr-price-attention p::before {
content: "※";
position: absolute;
top: 0;
left: 0;
} .pr-price-list li.-pickup .pr-price-head {
background-color: var(--color-main);
position: relative;
}
.pr-price-list li.-pickup .pr-price-head::before {
content: "おすすめ";
padding: 2px 10px;
width: min(60%, 237px);
text-align: center;
background-color: var(--color-main);
border-radius: 18px;
font-size: 18px;
font-weight: var(--font-weight-bold);
color: var(--color-white);
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
}
.pr-price-list li.-pickup .pr-price-option li::before {
background-color: var(--color-main);
}
@media screen and (max-width: 1600px) {
.pr-price-list.-three {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
}
@media screen and (max-width: 767px) {
.pr-price {
margin-bottom: 80px;
}
.pr-price-title {
font-size: 20px;
}
.pr-price-list {
margin-top: 20px;
width: min(100% - 40px, 500px);
}
.pr-price-list.-two, .pr-price-list.-three {
grid-template-columns: 1fr;
gap: 60px;
}
.pr-price-head {
padding: 15px;
gap: 5px;
}
.pr-price-head dt {
font-size: 20px;
}
.pr-price-head dd {
font-size: 12px;
}
.pr-price-option {
padding: 20px;
gap: 10px;
}
.pr-price-attention {
margin-top: 15px;
width: min(100% - 40px, 1380px);
}
.pr-price-attention p {
margin-left: 0;
} .pr-price-list li.-pickup {
margin-top: 15px;
}
.pr-price-list li.-pickup .pr-price-head::before {
width: min(40%, 133px);
font-size: 16px;
}
} .pr-faq {
margin-top: -60px;
padding-top: 120px;
padding-bottom: 120px;
background-color: var(--custom-color-1);
border-top-left-radius: 60px;
border-top-right-radius: 60px;
}
.pr-faq-title {
font-size: 28px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
}
.pr-faq-list {
margin-top: 25px;
display: flex;
flex-direction: column;
gap: 30px;
}
.pr-faq-list li {
box-shadow: 0 0 3px rgba(247, 234, 218, 1);
background-color: var(--color-white);
border-radius: 999px;
overflow: hidden;
}
.pr-faq-list li.is-open {
border-radius: 40px;
}
.pr-faq-list .ac-title {
padding: 30px 40px;
}
.pr-faq-acTitle {
padding-left: 36px;
font-size: 16px;
position: relative;
}
.pr-faq-acTitle::before {
content: "Q.";
font-size: 20px;
font-weight: var(--font-weight-bold);
color: var(--color-main);
position: absolute;
top: -5px;
left: 0;
}
.pr-faq-cnt {
padding: 15px 76px 30px;
font-weight: var(--font-weight-regular);
position: relative;
}
.pr-faq-btnbox {
padding: 0px 76px 30px;
}
.pr-faq-cnt::before {
content: "A.";
font-size: 20px;
font-weight: var(--font-weight-bold);
color: var(--color-main);
position: absolute;
top: 10px;
left: 42px;
}
.pr-faq-cnt a {
color: var(--color-main);
}
.pr-faq-cnt a:hover {
opacity: 0.6;
}
@media screen and (max-width: 767px) {
.pr-faq {
margin-top: -20px;
padding-top: 60px;
padding-bottom: 60px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.pr-faq-title {
font-size: 24px;
}
.pr-faq-list {
margin-top: 15px;
gap: 20px;
}
.pr-faq-list li,
.pr-faq-list li.is-open {
border-radius: 15px;
}
.pr-faq-list .ac-title {
padding: 15px;
}
.pr-faq-acTitle {
padding-left: 30px;
font-size: 14px;
}
.pr-faq-acTitle::before {
font-size: 18px;
}
.pr-faq-cnt {
padding: 5px 44px 15px;
}
.pr-faq-btnbox {
padding: 0px 44px 15px;
}
.pr-faq-cnt::before {
font-size: 18px;
top: 1px;
left: 15px;
}
} .pr-cta {
margin-top: 120px;
display: grid;
grid-template-columns: 60% 40%;
min-height: 300px;
background-color: var(--custom-color-1);
}
.pr-cta-l {
padding: 50px clamp(50px, calc(13.393vw - 52.857px), 140px);
display: flex;
flex-direction: column;
justify-content: center;
gap: 30px;
}
.pr-cta-subtitle {
font-size: 18px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
}
.pr-cta-title {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
font-size: 36px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
line-height: 1.1;
}
.pr-cta-title img {
display: block;
width: 98px;
aspect-ratio: 1;
object-fit: contain;
}
.pr-cta-r {
padding: 50px 20px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
background-color: var(--custom-color-2);
}
.pr-cta-btnbox {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 20px 30px;
}
.pr-cta .pr-cta-btnbox .pr-common-button.-contact {
background-color: var(--color-white);
color: var(--custom-color-2);
}
.pr-cta .pr-cta-btnbox .pr-common-button.-cta {
background-color: var(--color-main);
}
.pr-cta .pr-cta-btnbox .pr-common-button.-contact:hover {
color: var(--color-white) !important;
} .pr-cta-btnbox.-app {
flex-wrap: wrap;
gap: 10px 20px;
}
.pr-cta-btnbox.-app div {
flex: 0 0 100%;
display: flex;
justify-content: center;
}
.pr-cta-btnbox.-app div p {
width: 320px;
font-size: 14px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
}
.pr-cta-btnbox.-app a img {
transition: transform 0.3s ease;
}
.pr-cta-btnbox.-app a:hover img {
transform: scale(1.2);
}
.pr-cta-btnbox.-app a.-applestore img {
max-width: 134px;
}
.pr-cta-btnbox.-app a.-googleplay img {
max-width: 166px;
}
.pr-cta-attention {
padding-left: 1rem;
font-size: 12px;
font-weight: var(--font-weight-regular);
letter-spacing: 0.15em;
color: var(--color-white);
position: relative;
}
.pr-cta-attention::before {
content: "※";
position: absolute;
top: 0;
left: 0;
}
@media screen and (max-width: 767px) {
.pr-cta {
margin-top: 60px;
grid-template-columns: 1fr;
min-height: auto;
}
.pr-cta-l {
padding: 30px 20px;
justify-content: left;
gap: 25px;
}
.pr-cta-subtitle {
font-size: 12px;
}
.pr-cta-title {
gap: 15px;
font-size: 24px;
}
.pr-cta-title img {
width: 65px;
}
.pr-cta-r {
padding: 30px 20px;
gap: 25px;
}
.pr-cta-btnbox {
flex-direction: column;
gap: 20px;
} .pr-cta-btnbox.-app {
flex-direction: row;
}
.pr-cta-btnbox.-app div p {
width: fit-content;
}
} .pr-cta2 {
margin-top: 120px;
padding: 60px 40px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 40px;
background-color: var(--custom-color-2);
border-radius: 20px;
position: relative;
}
.pr-cta2::before {
content: "";
display: block;
width: 100%;
aspect-ratio: 1380 / 191;
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/product/legacy-system-migration-support/bg.svg)
no-repeat center center / contain;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
position: absolute;
top: auto;
bottom: 0;
left: 0;
z-index: 0;
}
.pr-cta2 > * {
position: relative;
z-index: 1;
}
.pr-cta2-text {
text-align: center;
font-size: 26px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
color: var(--color-white);
}
.pr-cta-btnbox {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
gap: 20px 30px;
}
.pr-cta2 .pr-common-button.-otherlink  {
color: var(--custom-color-2);
}
.pr-cta2 .pr-common-button.-otherlink .common-button__icon::before {
background-color: var(--custom-color-2);
}
@media screen and (max-width: 767px) {
.pr-cta2 {
margin-top: 60px;
padding: 40px;
gap: 30px;
border-radius: 15px;
}
.pr-cta2::before {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.pr-cta2-text {
font-size: 20px;
}
.pr-cta-btnbox {
flex-direction: column;
align-items: center;
gap: 20px;
}
} .pr-info {
margin-top: 120px;
}
.pr-info dl {
padding: 15px 30px;
display: grid;
grid-template-columns: 200px 1fr;
align-items: center;
gap: 20px;
}
.pr-info dl:nth-of-type(2n+1) {
background-color: var(--custom-color-1);
}
.pr-info dt {
font-weight: var(--font-weight-bold);
}
.pr-info dd {
font-weight: var(--font-weight-regular);
}
@media screen and (max-width: 767px) {
.pr-info {
margin-top: 60px;
}
.pr-info dl {
padding: 20px;
grid-template-columns: 100px 1fr;
}
} .pr-subsidyBanner {
margin-top: 60px;
}
.pr-subsidyBanner-fukidashi {
text-align: center;
font-size: 20px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
}
.pr-subsidyBanner-box {
margin-top: 20px;
padding: 30px;
background-color: var(--custom-color-1);
border-radius: 20px;
display: flex;
flex-direction: row;
justify-content: center;
gap: clamp(30px, calc(10.4167vw - 50px), 100px);
}
.legacy-ctaFirst-text {
font-size: 24px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
}
.legacy-ctaFirst-text span {
font-size: clamp(34px, calc(1.1905vw + 24.86px), 42px);
}
.pr-subsidyBanner-btn {
margin-top: 34px;
}
.legacy-ctaFirst-img {
width: clamp(300px, calc(7.4405vw + 242.86px), 350px);
}
.pr-subsidyBanner-attention {
margin-top: 10px;
padding-left: 1rem;
font-size: 12px;
font-weight: var(--font-weight-regular);
letter-spacing: 0.15em;
position: relative;
}
.pr-subsidyBanner-attention::before {
content: "※";
position: absolute;
top: 0;
left: 0;
}
@media screen and (max-width: 767px) {
.pr-subsidyBanner {
margin-top: 50px;
}
.pr-subsidyBanner-fukidashi {
font-size: 18px;
}
.pr-subsidyBanner-box {
margin-inline: auto;
margin-top: 20px;
padding: 30px 20px;
max-width: 500px;
border-radius: 15px;
flex-direction: column;
gap: 50px;
}
.legacy-ctaFirst-text {
font-size: 20px;
}
.legacy-ctaFirst-text span {
font-size: 32px;
}
.pr-subsidyBanner-btn {
margin-top: 20px;
}
.legacy-ctaFirst-img {
width: 100%;
}
.pr-subsidyBanner-attention {
margin-top: 15px;
}
} .pr-subsidy-scroll {
padding-top: 120px;
}
.pr-subsidy {
padding: 60px 30px;
background-color: var(--custom-color-1);
border-radius: 15px;
}
.pr-subsidy-subtitle {
text-align: center;
font-size: 18px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
}
.pr-subsidy-title {
text-align: center;
font-size: 30px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
}
.pr-subsidy-text {
margin-top: 30px;
text-align: center;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
line-height: 2.0;
}
.pr-subsidy-text a {
text-decoration: underline;
text-underline-offset: 2px;
} .pr-subsidy-about {
margin-top: 40px;
padding: 40px;
background-color: var(--color-white);
border-radius: 15px;
}
.pr-subsidy-about-fl {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: clamp(20px, calc(5.9524vw - 25.71px), 60px);
}
.pr-subsidy-about-title {
font-size: 24px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
color: var(--custom-color-2);
}
.pr-subsidy-about-text {
margin-top: 20px;
font-size: 14px;
font-weight: var(--font-weight-regular);
line-height: 1.6;
}
.pr-subsidy-about-img {
width: clamp(300px, calc(7.4405vw + 242.86px), 350px);
}
.pr-subsidy-about-attention {
margin-top: 10px;
padding-left: 1rem;
font-size: 12px;
font-weight: var(--font-weight-regular);
letter-spacing: 0.15em;
position: relative;
}
.pr-subsidy-about-attention::before {
content: "※";
position: absolute;
top: 0;
left: 0;
}
.pr-subsidy-about-btnbox {
margin-top: 40px;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
}
.pr-subsidy-about-btn {
background-color: var(--custom-color-2);
width: fit-content;
gap: 20px;
} .pr-subsidy-example {
margin-top: 60px;
}
.pr-subsidy-example-title {
text-align: center;
font-size: 30px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
}
.pr-subsidy-example-fl {
margin-top: 30px;
display: flex;
flex-direction: row;
justify-content: center;
gap: 40px;
}
.pr-subsidy-about-box {
flex: 1;
border-radius: 15px;
}
.pr-subsidy-example-plan {
padding: 20px;
background-color: var(--custom-color-2);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
text-align: center;
font-size: 28px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
color: var(--color-white);
}
.pr-subsidy-example-cnt {
padding: 20px 35px 40px;
background-color: var(--color-white);
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.pr-subsidy-example-text {
text-align: center;
font-size: 14px;
font-weight: var(--font-weight-regular);
letter-spacing: 0.15em;
}
.pr-subsidy-example-price {
text-align: center;
font-size: 14px;
letter-spacing: 0.15em;
font-weight: var(--color-main);
}
.pr-subsidy-example-price span {
font-size: 43px;
font-weight: var(--font-weight-bold);
}
.pr-subsidy-example-arrow {
margin: 20px auto;
width: 50px;
height: 76px;
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/product/RemoteWorkManager/os-arrow.svg) center center /contain no-repeat;
transform: rotate(90deg);
}
.pr-subsidy-example-saleprice-box {
margin-inline: auto;
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
width: fit-content;
}
.pr-subsidy-example-saleprice-pop {
width: 85px;
aspect-ratio: 1;
background-color: var(--color-main);
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
font-size: 18px;
font-weight: var(--font-weight-bold);
color: var(--color-white);
}
.pr-subsidy-example-saleprice {
font-size: 14px;
font-weight: var(--font-weight-bold);
}
.pr-subsidy-example-saleprice span {
display: inline-block;
font-size: 43px;
font-weight: var(--font-weight-bold);
color: var(--color-main);
}
.pr-subsidy-example-attention {
padding-left: 1rem;
font-size: 12px;
font-weight: var(--font-weight-regular);
position: relative;
}
.pr-subsidy-example-attention:nth-of-type(1) {
margin-top: 20px;
}
.pr-subsidy-example-attention::before {
content: "※";
position: absolute;
top: 0;
left: 0;
}
@media screen and (max-width: 1070px) { .pr-subsidy-example-fl {
margin-inline: auto;
flex-direction: column;
max-width: 500px;
}
}
@media screen and (max-width: 767px) {
.pr-subsidy-scroll {
padding-top: 60px;
}
.pr-subsidy {
padding: 60px 20px;
}
.pr-subsidy-subtitle {
font-size: 14px;
}
.pr-subsidy-title {
font-size: 20px;
}
.pr-subsidy-text {
margin-top: 25px;
text-align: left;
} .pr-subsidy-about {
margin-top: 30px;
margin-inline: auto;
padding: 30px 20px;
max-width: 500px;
}
.pr-subsidy-about-fl {
flex-direction: column;
gap: 60px;
}
.pr-subsidy-about-title {
text-align: center;
font-size: 20px;
}
.pr-subsidy-about-img {
width: 100%;
}
.pr-subsidy-about-attention {
margin-top: 20px;
}
.pr-subsidy-about-btnbox {
margin-top: 20px;
flex-direction: column;
justify-content: left;
gap: 20px;
}
.pr-subsidy-about-btn {
padding-top: 10px;
padding-bottom: 10px;
height: auto;
} .pr-subsidy-example-title {
font-size: 20px;
}
.pr-subsidy-example-fl {
margin-inline: auto;
flex-direction: column;
max-width: 500px;
}
.pr-subsidy-example-plan {
font-size: 20px;
}
.pr-subsidy-example-cnt {
padding: 30px 20px;
}
.pr-subsidy-example-text {
text-align: left;
}
.pr-subsidy-example-price span {
font-size: 28px;
}
.pr-subsidy-example-arrow {
margin: 13px auto;
}
.pr-subsidy-example-saleprice-box {
gap: 10px;
}
.pr-subsidy-example-saleprice-pop {
width: 60px;
font-size: 14px;
}
.pr-subsidy-example-saleprice span {
font-size: 40px;
}
}