:root {
--brand-blue: #046ECF;
--badge-blue: #0F7CBA;
--btn-blue: #0474DB;
}
main {
margin-top: 118px;
@media screen and (max-width: 768px) {
margin-top: 74px;
}
}
.inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 10px;
}
.sec-price-intro {
background-color: #F8F8F8;
padding-bottom: 100px;
@media screen and (max-width: 768px) {
padding-bottom: 50px;
}
.page-header {
background: #F8F8F8;
p, div {
color: #363840;
}
.page-header__inner {
padding-top: 0;
background: url(//olga-legal.com/wp-content/themes/olga/files/images/price/bg_arch.webp) center center / cover no-repeat;
@media screen and (max-width: 768px) {
background: url(//olga-legal.com/wp-content/themes/olga/files/images/price/bg_arch_sp.webp) center -30% / cover no-repeat;
}
}
.page-header__heading {
margin-top: 40px;
text-align: center;
}
.page-header__title__en {
color: #53657F;
justify-content: center;
margin-bottom: 16px;
&::before {
background-color: #53657F;
}
}
.page-header__title {
color: #046ECF;
font-size: 38px;
line-height: 1;
margin-bottom: 24px;
@media screen and (max-width: 768px) {
font-size: 28px;
}
.large {
font-size: 42px;
@media screen and (max-width: 768px) {
font-size: 32px;
}
}
}
.page-header__description {
display: grid;
gap: 10px;
text-align: center;
@media screen and (max-width: 768px) {
gap: 4px;
font-size: 15px;
}
}
.discount-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 16px;
@media screen and (max-width: 768px) {
display: block;
}
}
.badge-outline {
display: inline-block;
padding: 3px 8px;
background: #fff;
border: 2px solid var(--badge-blue);
border-radius: 0;
color: var(--badge-blue);
font-weight: 700;
line-height: 1.8;
white-space: nowrap;
@media screen and (max-width: 768px) {
margin: 0 1px;
padding: 2px 6px;
font-size: 15px;
}
}
.cta-wrap {
display: flex;
justify-content: center;
margin-top: 30px;
} .btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 16px 24px 16px 16px;
background: var(--btn-blue);
color: #fff;
font-weight: 700;
line-height: 1;
text-decoration: none;
border-radius: 50vh;
font-size: 18px;
@media screen and (max-width: 768px) {
font-size: 15px;
}
} .btn-primary .btn-badge {
display: inline-grid;
place-items: center;
padding: 8px 16px;
background: #fff;
color: var(--btn-blue);
border-radius: 50vh;
font-weight: 700;
line-height: 1;
flex: 0 0 auto;
}
.btn-primary .btn-label {
white-space: nowrap;
}
}
.fee-type {
padding: 0 40px;
@media screen and (max-width: 768px) {
padding: 0 10px;
}
.fee-type__text--wrap {
margin: auto;
background: url(//olga-legal.com/wp-content/themes/olga/files/images/price/bg_intro.webp) center center / cover no-repeat;
padding: 80px 0  164px 0;
border-radius: 10px;
margin-bottom: -134px;
max-width: 1440px;
@media screen and (max-width: 1080px) {
padding: 30px 16px 100px;
margin-bottom: -76px;
}
}
.fee-type__text {
display: flex;
gap: 40px;
align-items: center;
color: #fff;
@media screen and (max-width: 1080px) {
flex-direction: column;
gap: 8px;
text-align: left;
align-items: flex-start;
}
.fee-type__title {
font-size: 32px;
font-weight: 700;
line-height: 1.8;
@media screen and (max-width: 768px) {
font-size: 24px;
}
}
.fee-type__description {
display: flex;
align-items: center;
gap: 8px;
font-size: 20px;
font-weight: 500;
@media screen and (max-width: 768px) {
display: block;
font-size: 17px;
}
.bk_square {
padding: 4px 6px;
font-weight: 700;
@media screen and (max-width: 768px) {
padding: 2px 3px;
margin: 0 2px;
}
&.setup {
background-color: #017FF2;
}
&.monthly {
background-color: #13A6F0;
}
}
}
}
.fee-type__grid {
display: grid;
gap: 40px;
grid-template-columns: 1fr 1fr;
position: relative;
@media screen and (max-width: 768px) {
gap: 20px;
grid-template-columns: 1fr;
}
.fee-type-plus {
position: absolute;
bottom: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
background-color: #2E3D53;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
@media screen and (max-width: 768px) {
width: 35px;
height: 35px;
transform: translate(-50%, 50%);
}
img {
width: 24px;
height: 24px;
@media screen and (max-width: 768px) {
width: 10px;
height: 10px;
}
}
}
}
.fee-type__item {
background-color: #fff;
padding: 24px 20px;
border-radius: 10px;
border: 1px solid #F0F1F1;
@media screen and (max-width: 768px) {
padding: 12px 10px;
}
&.setup-fee {
.fee-type__item-title__wrap {
background: url(//olga-legal.com/wp-content/themes/olga/files/images/price/bg_setup.webp) center center / cover no-repeat;
}
}
&.monthly-fee {
.fee-type__item-title__wrap {
background: url(//olga-legal.com/wp-content/themes/olga/files/images/price/bg_monthly.webp) center center / cover no-repeat;
}
.fee-type__item-info:hover {
background-color: #13A6F0;
border: 2px solid #13A6F0;
svg.icon-info path {
fill: #fff;
}
}
.fee-type__item-title__wrap h3 {
color: #0F92BA;
}
svg.icon-info path {
fill: #0F92BA;
}
.fee-type__tooltip {
right: 0;
left: auto;
@media screen and (max-width: 768px) {
left: 50%;
right: auto;
transform: translateX(-50%);
}
}
svg.icon-tooltip {
circle {
fill: #13A6F0;
}
path.border {
fill: #13A6F0;
}
} 
} 
}
.fee-type__item-title__wrap {
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
height: 216px;
margin-bottom: 20px;
@media screen and (max-width: 768px) {
height: 126px;
margin-bottom: 10px;
}
h3 {
font-weight: 700;
font-size: 44px;
line-height: 1.8;
color: #0474DB;
text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff,
1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff,
2px 1px 0 #fff, 1px 2px 0 #fff, -1px 2px 0 #fff, -2px 1px 0 #fff,
2px -1px 0 #fff, 1px -2px 0 #fff, -1px -2px 0 #fff, -2px -1px 0 #fff,
2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff, 3px 0 0 #fff, -3px 0 0 #fff,
3px 1px 0 #fff, 1px 3px 0 #fff, -1px 3px 0 #fff, -3px 1px 0 #fff,
3px -1px 0 #fff, 1px -3px 0 #fff, -1px -3px 0 #fff, -3px -1px 0 #fff,
3px 2px 0 #fff, 2px 3px 0 #fff, -2px 3px 0 #fff, -3px 2px 0 #fff,
3px -2px 0 #fff, 2px -3px 0 #fff, -2px -3px 0 #fff, -3px -2px 0 #fff,
3px 3px 0 #fff, -3px 3px 0 #fff, 3px -3px 0 #fff, -3px -3px 0 #fff;
@media screen and (max-width: 768px) {
font-size: 26px;          
}
}
}
.fee-type__item-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
cursor: pointer;
position: relative;
@media screen and (max-width: 768px) {
font-size: 13px;
position: relative;
}
.fee-type__item-info {
border-radius: 4px;
background-color: #ECF0F2;
border: 2px solid #D8DCDE;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
@media screen and (max-width: 768px) {
padding: 8px;
}
svg.icon-info {
@media screen and (max-width: 768px) {
width: 12px;
height: 12px;
}
}
&:hover {
background-color: #0280F3;
border: 2px solid #1694FF;
color: #fff;
svg.icon-info path {
fill: #fff;
}
}
}
}
.fee-type__caption {
margin-top: 30px;
font-size: 14px;
color: #777;
font-weight: 400;
@media screen and (max-width: 768px) {
font-size: 13px;
margin-top: 24px;
}
}
}
}
.fee-type__item-info {
position: relative;
display: flex;
align-items: center;
gap: 8px;
outline: none;
@media screen and (max-width: 768px) {
position: static;
}
&:focus-visible {
box-shadow: 0 0 0 3px rgba(2,128,243,.25);
border-radius: 8px;
} .fee-type__tooltip {
position: absolute;
left: 0;
top: calc(100% + 12px);
z-index: 20;
width: min(520px, 90vw);
max-width: min(520px, calc(100vw - 32px));
background: #fff;
color: #333;
border-radius: 12px;
padding: 16px 20px;
box-shadow: 4px 4px 14px rgba(208,208,208,.3);
border: 2px solid transparent;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
@media screen and (max-width: 768px) {
padding: 12px 16px;
left: 50%;
transform: translateX(-50%);
}
}
.fee-type__tooltip-title {
display: flex;
align-items: center;
font-weight: 500;
margin-bottom: 12px;
.icon {
width: 20px;
height: 20px;
margin-right: 8px;
vertical-align: middle;
}
}
.fee-type__tooltip-desc {
margin: 0;
line-height: 1.7;
font-size: 16px;
font-weight: 400;
white-space: pre-line;
@media screen and (max-width: 768px) {
font-size: 14px;
}
}
&:hover .fee-type__tooltip,
&:focus-within .fee-type__tooltip,
&.is-open .fee-type__tooltip {
opacity: 1;
visibility: visible;
transform: translateY(0);
@media screen and (max-width: 768px) {
transform: translateX(-50%);
}
}
&.tooltip--up {
.fee-type__tooltip {
top: auto;
bottom: calc(100% + 12px);
&::before {
top: auto;
bottom: -8px;
}
}
}
}
.sec-price-explain {
padding: 80px 0;
background: url(//olga-legal.com/wp-content/themes/olga/files/images/price/bg_explain.webp) center center / cover no-repeat;
@media screen and (max-width: 768px) {
padding: 60px 0;
}
.explain-heading {
color: #fff; 
margin-bottom: 40px;
@media screen and (max-width: 768px) {
margin-bottom: 30px;
}
}
.explain-heading__title {
font-size: 32px;
text-align: center;
margin-bottom: 32px;
@media screen and (max-width: 768px) {
font-size: 24px;
margin-bottom: 16px;
}
h2 {
display: block;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
}
.bk_square {
font-size: 28px;
padding: 0 8px;
background: #21B8D0; background: linear-gradient(90deg, #21B8D0 0%, #5ECCEB 100%);
@media screen and (max-width: 768px) {
font-size: 22px;
}
}
}
.explain-heading__description {
text-align: center;
font-weight: 500;
@media screen and (max-width: 768px) {
font-size: 15px;
}
}
.explain-content {
margin-bottom: 60px;
@media screen and (max-width: 768px) {
margin-bottom: 30px;
}
h3 {
padding: 14px;
background-color: #0474DB;
color: #fff;
font-size: 28px;
border-radius: 10px;
text-align: center;
margin-bottom: 30px;
@media screen and (max-width: 768px) {
padding: 12px;
font-size: 22px;
margin-bottom: 16px;
}
}
.explain-content__img {
picture {
display: block;
width: 100%;
height: auto;
}
&.flex {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
@media screen and (max-width: 768px) {
flex-direction: column;
} 
}
}
} 
}
.sec-price-flow {
padding: 84px 0 120px 0;
background: url(//olga-legal.com/wp-content/themes/olga/files/images/price/bg_flow.webp) center center / cover no-repeat;
@media screen and (max-width: 768px) {
padding: 60px 0;
background: url(//olga-legal.com/wp-content/themes/olga/files/images/price/bg_flow_sp.webp) center center / cover no-repeat;
} 
.price-flow__title {
text-align: center;
font-size: 32px;
margin-bottom: 40px;
@media screen and (max-width: 768px) {
font-size: 24px;
margin-bottom: 22px;
} 
}
.price-flow-content {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
flex-wrap: nowrap;
@media screen and (max-width: 768px) {
flex-direction: column;
gap: 0;
} 
.price-flow-content__item {
position: relative;
text-align: center;
padding: 20px 0;
width: 196px;
@media screen and (max-width: 768px) {
display: flex;
justify-content: left;
align-items: center;
width: 100%;
gap: 24px;
padding: 0;
margin-bottom: -8px;
}
.price-flow-content__item-circle {
margin: auto;
position: relative;
width: 130px;
height: 130px;
border-radius: 50%;
background-color: #F1F9FE;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
@media screen and (max-width: 1080px) {
margin: 0;
width: 100px;
height: 100px;
}
@media screen and (max-width: 768px) {
width: 80px;
height: 80px;
}
.price-flow-content__item-number {
position: absolute;
right: 0;
top: 0;
color: #ABB3B8;
font-size: 25px;
@media screen and (max-width: 1080px) {
font-size: 15px;
}
}
img {
width: 50px;
max-width: 100%;
height: auto;
@media screen and (max-width: 768px) {
width: 32px;
height: 32px;
}
}
}
h3 {
text-align: center;
font-size: 20px;
color: #363840;
@media screen and (max-width: 1080px) {
font-size: 17px;
}
}
}
}
.price-flow-content__arrow {
width: 24px;
height: auto;
@media screen and (max-width: 768px) {
transform: rotate(90deg);
}
}
}
.price-contact {
background: url(//olga-legal.com/wp-content/themes/olga/files/images/price/bg_form.webp) center center / cover no-repeat;
padding: 80px 16px 100px;
h2 {
color: #fff;
text-align: center;
margin-bottom: 40px;
font-size: 32px;
@media screen and (max-width: 768px) {
font-size: 24px;
}
}
.price-contact-form {
background-color: #fff;
max-width: 800px;
padding: 40px;
border-radius: 10px;
@media screen and (max-width: 768px) {
padding: 20px;
}
}
}