@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:wght@100..900&display=swap"); :root { --site-color-baseblue: #eaf4fd;
--site-color-basegreen: #edffc3;
--site-color-baseorange: #ffe9ce;
--site-color-bgblue: #288aeb;
--site-color-bggreen: #b9ef3d;
--site-color-bgorange: #f28e04;
--site-color-black: #000e20;
--site-color-blue: #136ffc;
--site-color-orange: #EE7800;
--site-color-bluegray: #d7e1f1;
--site-color-darkgray: #707070;
--site-color-gray: #d9d9d9;
--site-color-borderGray: #b6b7ba; --site-color-lightblue: #e4f1f8;
--site-color-lightbluegray: #e8ecf6; --site-color-palebluegray: #eaeff3; --site-color-tagblue: #d0dff6;
--site-color-taggreen: #d9f0a4;
--site-color-tagorange: #fad4a4;
--site-color-textgreen: #719f08;
--site-color-textorange: #cd7700;
--site-color-white: #fff;
--site-color-text: var(--site-color-black);  --site-gradient-trouble: linear-gradient(to bottom, #091d39, #6088bf); --site-font-family-ja: "Noto Sans JP", sans-serif;
--site-font-family-en: "Roboto", sans-serif;
--site-font-family-avenir: avenir-lt-pro, sans-serif;  --site-font-size-3xl: clamp(
40px,
calc((76 - 40) / var(--site-fluid-span) * var(--site-fluid-vw) + 40px),
76px
); --site-font-size-2xl: clamp(
36px,
calc((60 - 36) / var(--site-fluid-span) * var(--site-fluid-vw) + 36px),
60px
); --site-font-size-xl: clamp(
24px,
calc((40 - 24) / var(--site-fluid-span) * var(--site-fluid-vw) + 24px),
40px
); --site-font-size-lg: clamp(
20px,
calc((32 - 20) / var(--site-fluid-span) * var(--site-fluid-vw) + 20px),
32px
); --site-font-size-md: clamp(
18px,
calc((26 - 18) / var(--site-fluid-span) * var(--site-fluid-vw) + 18px),
26px
); --site-font-size-base: clamp(
13px,
calc((16 - 13) / var(--site-fluid-span) * var(--site-fluid-vw) + 13px),
16px
); --site-font-size-sm: clamp(
13px,
calc((15 - 13) / var(--site-fluid-span) * var(--site-fluid-vw) + 13px),
15px
); --site-font-size-xs: clamp(
11px,
calc((12 - 11) / var(--site-fluid-span) * var(--site-fluid-vw) + 11px),
12px
);  --site-space-section: clamp(
80px,
calc((100 - 80) / var(--site-fluid-span) * var(--site-fluid-vw) + 80px),
100px
); --site-space-side: clamp(
20px,
calc((40 - 20) / var(--site-fluid-span) * var(--site-fluid-vw) + 20px),
40px
); --site-space-xl: clamp(
40px,
calc((64 - 40) / var(--site-fluid-span) * var(--site-fluid-vw) + 40px),
64px
); --site-space-lg: clamp(
24px,
calc((40 - 24) / var(--site-fluid-span) * var(--site-fluid-vw) + 24px),
40px
); --site-space-md: clamp(
16px,
calc((24 - 16) / var(--site-fluid-span) * var(--site-fluid-vw) + 16px),
24px
); --site-space-sm: clamp(
8px,
calc((16 - 8) / var(--site-fluid-span) * var(--site-fluid-vw) + 8px),
16px
); --site-space-xs: clamp(
4px,
calc((8 - 4) / var(--site-fluid-span) * var(--site-fluid-vw) + 4px),
8px
);  --site-radius-sm: 15px; --site-radius-md: 16px; --site-radius-lg: 32px; --site-radius-full: 100vh;  --site-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
--site-shadow-glow: 0 0 30px 10px rgb(39 179 255 / 0.5);  --site-min-width: 375; --site-max-width: 1366; --site-contents-width: 1200;  --site-breakpoint-md: 768;
--site-breakpoint-lg: 1200; --site-fluid-span: calc(var(--site-max-width) - var(--site-min-width));
--site-fluid-vw: calc(100vw - var(--site-min-width) * 1px);
}  :where(:root) {
scrollbar-gutter: stable;
scroll-behavior: smooth;
} :where(body) {
margin: unset;
overflow-x: clip;
} @scope (.mTag) {
:where(:scope),
:where(:scope)::before,
:where(:scope)::after,
*,
::before,
::after {
box-sizing: border-box;
}
:where(:scope) {
min-block-size: 100dvb;
background-color: var(--site-color-white);
color: var(--site-color-text);
font-family: var(--site-font-family-ja);
font-size: var(--site-font-size-base);
line-height: 2;
font-weight: 400;
letter-spacing: 0.05em;
text-spacing-trim: trim-start;
text-autospace: no-autospace; line-break: strict;
overflow-wrap: anywhere;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
} @scope (.mTag) {
:where(em:lang(ja)) {
font-weight: bolder;
}
:where(:is(i, cite, em, dfn, var):lang(ja)) {
font-style: unset;
}
:where(pre) {
text-spacing-trim: space-all;
}
img {
max-width: 100%;
height: auto;
}
figure {
margin: 0;
}
a{
color: inherit;
text-underline-offset: 2px;
@media (hover) {
&:hover {
text-decoration: none;
}
}
&:not([class]){
transition: opacity .2s;
@media (hover) {
&:hover {
opacity: .7;
}
}
}
}
:where(p,h1,h2,h3,h4,h5,h6){
margin: 0;
}
:where(h1,h2,h3,h4,h5,h6,strong){
font-weight: 600;
}
ul,ol,dl{
margin: 0;
padding: 0;
list-style: none;
}
main{
overflow: clip;
}
iframe{
width: 100%;
height: auto;
border: none;
}
} .u-dib{
display: inline-block;
}
.u-text-bold{
font-weight: bold;
}
.u-visuallyHidden{
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
white-space: nowrap;
} .u-show-md{
@media (width < calc(768 / 16 * 1rem)) {
display: none;
}
}
.u-show-lg{
@media (width < calc(1200 / 16 * 1rem)) {
display: none;
}
}
.u-hide-md{
@media (width >= calc(768 / 16 * 1rem)) {
display: none;
}
}
.u-hide-lg{
@media (width >= calc(1200 / 16 * 1rem)) {
display: none;
}
}  .c-button{
display: grid;
grid-template-columns: 1fr;
align-items: center;
gap: 15px 12px;
@media (width >= calc(768 / 16 * 1rem)) {
display: flex;
flex-wrap: wrap;
}
.c-button__link{
--c-button-color: var(--site-color-orange);
display: inline-flex;
justify-content: center;
align-items: center;
padding: 1em 20px;
border: 1px solid var(--c-button-color); border-radius: var(--site-radius-sm);
background-color: var(--c-button-color);
color: var(--site-color-white);
font-size: var(--site-font-size-sm);
font-weight: 700;
line-height: 1.2; text-decoration: none;
transition: .2s;
@media (hover) {
&:hover{
background-color: var(--site-color-white);
color: var(--c-button-color);
}
} &.is-color-black {
--c-button-color: var(--site-color-black);
} &.is-style-frame {
background-color: var(--site-color-white);
color: var(--c-button-color);
@media (hover) {
&:hover{
background-color: var(--c-button-color);
color: var(--site-color-white);
}
}
} &.is-style-cta{
padding: 1.35em 45px;
font-size: 1.15em;
}
}
} .c-textLink{
display: inline-flex;
align-items: center;
gap: 0.75em;
color: var(--site-color-orange);
font-size: var(--site-font-size-sm);
font-weight: 700;
text-decoration: none;
transition: opacity .2s;
@media (hover) {
&:hover {
text-decoration: underline;
}
}
&::after {
width: 0.5em;
height: 0.5em;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
content: "";
}
} .c-sectionTitle{
--c-sectionTitle-font-size: var(--site-font-size-xl); font-size: var(--c-sectionTitle-font-size);
font-weight: 700;
line-height: 1.5;
&.is-color-white {
color: var(--site-color-white);
}
} .c-label{
display: block;
padding: 0.5em 1em;
border: 1px solid;
border-radius: var(--site-radius-full);
text-align: center;
} .c-tag{
display: inline-block;
padding: 0.2em 1em;
border-radius: 0.4em;
} .c-role{
display: flex;
align-items: center;
border-radius: var(--site-radius-full);
} .l-section{
padding-block: var(--site-space-section);
padding-inline: var(--site-space-side);
}
.l-inner{
max-width: calc(var(--site-contents-width) * 1px);
margin-inline: auto;
} .p-fv{ --p-fv-image-width: 1237;
--p-fv-image-height: 720;
--p-fv-image-visible: 686;
--p-fv-design-width: 1366; --p-fv-image-offset: calc((var(--p-fv-image-visible) - var(--p-fv-design-width) / 2) * 1px); --p-fv-padding-top: 20px; display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"visual"
"title"
"text"
"button";
padding-block: var(--p-fv-padding-top) 50px;
@media (width >= calc(768 / 16 * 1rem)) {
grid-template-areas: none;
align-content: center;
position: relative;
min-block-size: min(
var(--p-fv-image-height) * 1px,
(50vw + var(--p-fv-image-offset)) * var(--p-fv-image-height) / var(--p-fv-image-visible)
); padding-block: var(--site-space-section);
overflow: clip;
} .l-inner,
.p-fv__content {
display: contents;
@media (width >= calc(768 / 16 * 1rem)) {
display: block;
}
}
.l-inner {
@media (width >= calc(768 / 16 * 1rem)) {
width: 100%; }
}
.p-fv__content {
@media (width >= calc(768 / 16 * 1rem)) {
position: relative;
z-index: 1; max-width: 50%;
}
} .p-fv__product {
grid-area: visual;
align-self: start;
position: relative;
z-index: 1;
}
.p-fv__productLabel {
color: var(--site-color-darkgray);
font-size: var(--site-font-size-base);
font-weight: 700;
line-height: 1.5;
}
.p-fv__productName {
display: flex;
gap: .25em;
align-items: end;
margin-top: clamp(
9px,
calc((17 - 9) / var(--site-fluid-span) * var(--site-fluid-vw) + 9px),
17px
); font-family: var(--site-font-family-avenir);
font-size: clamp(
24px,
calc((32 - 24) / var(--site-fluid-span) * var(--site-fluid-vw) + 24px),
32px
);
font-weight: 800;
line-height: 1.2; img {
display: inline-block;
width: auto;
height: calc(61em / 60);
vertical-align: top;
}
span{
display: inline-block;
margin-bottom: 0.25em;
font-weight: normal;
font-size: var(--site-font-size-base);
color: var(--site-color-darkgray);
}
}
.p-fv__title {
grid-area: title;
margin-top: clamp(
30px,
calc((36 - 30) / var(--site-fluid-span) * var(--site-fluid-vw) + 30px),
36px
); font-size: clamp(
24px,
calc((40 - 24) / var(--site-fluid-span) * var(--site-fluid-vw) + 24px),
40px
);
font-weight: 700;
line-height: 1.8;
word-break: keep-all; text-wrap: balance;
}
.p-fv__text {
grid-area: text;
margin-top: var(--site-space-md);
}
.c-button {
grid-area: button;
margin-top: clamp(
20px,
calc((50 - 20) / var(--site-fluid-span) * var(--site-fluid-vw) + 20px),
50px
);
}
.p-fv__image {
position: relative;
grid-area: visual;
margin-top: calc(var(--p-fv-padding-top) * -1); margin-inline: calc(var(--site-space-side) * -1); @media (width >= calc(768 / 16 * 1rem)) {
grid-area: auto; position: absolute;
top: 0;
left: calc(50% - var(--p-fv-image-offset));
width: min(
var(--p-fv-image-width) * 1px,
(50% + var(--p-fv-image-offset)) * var(--p-fv-image-width) / var(--p-fv-image-visible)
); margin: 0;
}
img {
display: block; width: 100%;
}
} .p-fv__image__device {
position: absolute;
top: 22.03%; left: 5.47%; width: 109.13%; z-index: 1;
@media (width >= calc(768 / 16 * 1rem)) {
top: 7.22%; left: 2.43%; width: 72.43%; }
} .p-fv__image__date {
position: absolute;
top: 25.2%; left: 5.76%; width: 18.67%; @media (width >= calc(768 / 16 * 1rem)) {
top: 7.22%; left: 3.15%; width: 11.8%; }
&::after{
display: block;
position: absolute;
left:0;
top: 0;
width: 100%;
height: 100%;
background-image: url(//pai-r.com/wp-content/themes/PAI-R/lp/mtag/img/label_date_circle.svg);
background-repeat: no-repeat;
background-size: contain;
content: ""; }
}
}
@keyframes rotate {
from{
rotate: 0deg
}
to{
rotate: -360deg;
}
} .p-fv__content{
opacity: 0;
transform: translateX(30px);
animation: fadeUp .8s .4s ease-out forwards;
} .p-fv__image__date{
opacity: 0;
transform: translateY(30px);
animation: fadeUp .8s .4s ease-out forwards;
@media (width >= calc(1024 / 16 * 1rem)) {
animation-name: fadeLeft;
animation-delay: .8s;
}
} .p-trouble{
--p-trouble-fluid-span: calc(1200 - var(--site-min-width)); --p-trouble-itemTitle-height: 60px; --p-trouble-image-gap: clamp(
20px,
calc((26 - 20) / var(--p-trouble-fluid-span) * var(--site-fluid-vw) + 20px),
26px
); --p-trouble-image-size: clamp(
220px,
calc((260 - 220) / var(--p-trouble-fluid-span) * var(--site-fluid-vw) + 220px),
260px
); background-image: var(--site-gradient-trouble);
color: var(--site-color-white);
text-align: center;
.c-sectionTitle {
--c-sectionTitle-font-size: clamp(
24px,
calc((44 - 24) / var(--p-trouble-fluid-span) * var(--site-fluid-vw) + 24px),
44px
);
}
.p-trouble__slider {
position: relative;
max-width: 500px; margin-top: clamp(
30px,
calc((60 - 30) / var(--p-trouble-fluid-span) * var(--site-fluid-vw) + 30px),
60px
); 
margin-inline: auto;
@media (width >= calc(1024 / 16 * 1rem)) {
max-width: none;
}
} .p-trouble__list {
display: flex;
gap: 20px; overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
@media (width >= calc(1024 / 16 * 1rem)) {
display: grid;
grid-template-columns: repeat(3, 1fr);
max-width: 1100px; margin-inline: auto;
gap: clamp(
24px,
calc((40 - 24) / (1200 - 1024) * (100vw - 1024px) + 24px),
40px
); overflow: visible;
}
}
.p-trouble__item {
display: flex;
flex: 0 0 100%;
flex-direction: column;
align-items: center;
scroll-snap-align: center;
scroll-snap-stop: always;  &.is-bubble-left {
--p-trouble-bubble-top: 26%;
--p-trouble-bubble-left: -10%;
--p-trouble-bubble-radius: 20px 20px 0 20px;
@media (width >= calc(1024 / 16 * 1rem)) {
--p-trouble-bubble-top: 28.5%;
--p-trouble-bubble-left: -19%;
}
}
&.is-bubble-rightBottom {
--p-trouble-bubble-top: 69.5%;
--p-trouble-bubble-left: 57%;
--p-trouble-bubble-radius: 0 20px 20px 20px;
}
&.is-bubble-rightTop {
--p-trouble-bubble-top: 14.5%;
--p-trouble-bubble-left: 67.5%;
--p-trouble-bubble-radius: 20px 20px 20px 0;
}
} .p-trouble__itemTitle {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
min-block-size: var(--p-trouble-itemTitle-height);
padding: 8px 16px;
border-radius: var(--site-radius-sm);
background-color: var(--site-color-white);
color: var(--site-color-text);
font-size: 18px; font-weight: 700;
line-height: 1.5;
@media (width >= calc(1024 / 16 * 1rem)) {
flex-direction: column;
max-width: 320px; padding-block: 11px;
}
} .p-trouble__itemTitleMain {
@media (width >= calc(1024 / 16 * 1rem)) {
font-size: clamp(
18px,
calc((24 - 18) / var(--p-trouble-fluid-span) * var(--site-fluid-vw) + 18px),
24px
);
}
}
.p-trouble__image {
position: relative;
width: var(--p-trouble-image-size);
margin-top: var(--p-trouble-image-gap);
img {
display: block;
width: 100%;
}
}
.p-trouble__bubble {
position: absolute;
top: var(--p-trouble-bubble-top);
left: var(--p-trouble-bubble-left);
width: max-content;
padding: 0.75em 1.5em;
border-radius: var(--p-trouble-bubble-radius);
background-color: var(--site-color-bgblue);
box-shadow: var(--site-shadow-md);
font-size: clamp(
11px,
calc((13 - 11) / var(--p-trouble-fluid-span) * var(--site-fluid-vw) + 11px),
13px
);
font-weight: 700;
line-height: 1.6;
}
.p-trouble__text {
margin-top: 20px; 
font-size: var(--site-font-size-base); font-weight: 700;
line-height: 1.8;
word-break: keep-all; } .p-trouble__controls {
@media (width >= calc(1024 / 16 * 1rem)) {
display: none;
}
} .p-trouble__arrow {
position: absolute;
top: calc(var(--p-trouble-itemTitle-height) + var(--p-trouble-image-gap) + var(--p-trouble-image-size) / 2);
width: 40px;
height: 40px;
padding: 0;
border: 0;
background-color: transparent;
transform: translateY(-50%);
cursor: pointer;
&::before {
position: absolute;
inset: 0;
width: 12px;
height: 12px;
margin: auto;
border-top: 2px solid var(--site-color-white);
border-left: 2px solid var(--site-color-white);
content: "";
}
&.is-prev {
left: calc(var(--site-space-side) * -1);
&::before {
transform: translateX(2px) rotate(-45deg);
}
}
&.is-next {
right: calc(var(--site-space-side) * -1);
&::before {
transform: translateX(-2px) rotate(135deg);
}
}
}
.p-trouble__dots {
display: flex;
justify-content: center;
margin-top: 24px; }
.p-trouble__dot {
width: 24px; height: 24px;
padding: 0;
border: 0;
background-color: transparent;
cursor: pointer;
&::before {
display: block;
width: 10px;
height: 10px;
margin: auto;
border-radius: 50%;
background-color: color-mix(in srgb, var(--site-color-black) 30%, transparent);
content: "";
}
&[aria-current="true"]::before {
background-color: var(--site-color-black);
}
}
} .p-compare{
background-color: var(--site-color-bluegray); .p-compare__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 30px 40px; @media (width >= calc(1024 / 16 * 1rem)) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.p-compare__lead {
text-align: center;
@media (width >= calc(1024 / 16 * 1rem)) {
align-self: center;
padding-inline-start: 40px; text-align: start;
}
}
.p-compare__leadText {
margin-top: clamp(
15px,
calc((30 - 15) / var(--site-fluid-span) * var(--site-fluid-vw) + 15px),
30px
);
font-size: clamp(
13px,
calc((18 - 13) / var(--site-fluid-span) * var(--site-fluid-vw) + 13px),
18px
);
}
.p-compare__case {
display: flex;
flex-direction: column;
} .p-compare__caseTitle {
position: relative;
padding-inline-start: calc(0.65em + 0.7em); font-size: clamp(
15px,
calc((20 - 15) / var(--site-fluid-span) * var(--site-fluid-vw) + 15px),
20px
);
font-weight: 700;
line-height: 1.5;
&::before {
position: absolute;
top: calc((1lh - 0.65em) / 2); left: 0;
width: 0.65em; height: 0.65em;
background-color: var(--site-color-black);
content: "";
}
} .p-compare__figure {
display: grid;
flex-grow: 1;
grid-template-rows: 1fr auto;
gap: 20px; margin-top: 15px;
padding: 20px 20px 22px;
border-radius: var(--site-radius-sm);
background-color: var(--site-color-white);
@media (width >= calc(1024 / 16 * 1rem)) {
grid-template-rows: minmax(180px, 1fr) auto; padding: 30px 30px 25px;
}
}
.p-compare__image {
display: grid;
place-items: center;
img {
display: block;
}
}
.p-compare__caption {
font-size: var(--site-font-size-base);
font-weight: 700;
line-height: 1.5;
text-align: center;
word-break: keep-all; }
} .p-product{
padding-top: clamp(
80px,
calc((120 - 80) / var(--site-fluid-span) * var(--site-fluid-vw) + 80px),
120px
); padding-bottom: 0;  .p-product__catch,
.p-product__function {
margin-inline: calc(var(--site-space-side) * -1);
}  .p-product__intro {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"head"
"image"
"texts";
@media (width >= calc(1024 / 16 * 1rem)) {
grid-template-columns: minmax(0, 600fr) minmax(0, 480fr);
grid-template-areas: "image body";
align-items: center;
gap: 0 clamp(
40px,
calc((120 - 40) / var(--site-fluid-span) * var(--site-fluid-vw) + 40px),
120px
); }
}
.p-product__introBody {
display: contents;
@media (width >= calc(1024 / 16 * 1rem)) {
display: block;
grid-area: body;
margin-top: 22px; }
}
.p-product__introImage {
grid-area: image;
width: 100%;
max-width: 600px; margin-top: 32px; margin-inline: auto;
@media (width >= calc(1024 / 16 * 1rem)) {
margin-top: 0;
}
img {
display: block;
width: 100%;
aspect-ratio: 335 / 250; border-radius: 20px; object-fit: cover;
@media (width >= calc(1024 / 16 * 1rem)) {
aspect-ratio: auto;
border-radius: 0; }
}
}
.p-product__introHead {
grid-area: head;
@media (width >= calc(1024 / 16 * 1rem)) {
position: relative;
padding-bottom: 26px;
border-bottom: 1px solid var(--site-color-borderGray);
}
&.is-show{
animation-name: fadeRight;
animation-duration: .3s;
.p-product__introName{
img{
transform: translateY(0);
transition: .5s;
transition-delay: .4s;
}
span{
opacity: 1;
transition: 0.2s;
transition-delay: 1s;
}
}
&+.product__introTexts{
animation: fadeDown .4s .8s ease-out forwards;
}
}
}
.p-product__introLabel {
color: var(--site-color-darkgray);
font-size: var(--site-font-size-base);
font-weight: 700;
line-height: 1.5;
}
.p-product__introName {
display: flex;
align-items: end;
gap: .25em;
margin-top: clamp(
20px,
calc((26 - 20) / var(--site-fluid-span) * var(--site-fluid-vw) + 20px),
26px
); font-family: var(--site-font-family-avenir);
font-size: var(--site-font-size-2xl);
font-weight: 800;
line-height: 1.2; img {
display: inline-block;
width: auto;
height: calc(61em / 60);
vertical-align: top;
}
span{
display: inline-block;
margin-bottom: .25em;
color: var(--site-color-darkgray);
font-size: clamp(
16px,
calc((20 - 16) / var(--site-fluid-span) * var(--site-fluid-vw) + 16px),
20px
);
font-weight: normal;
opacity: 0;
}
overflow: hidden;
img{
transform: translateY(120%);
}
}
.product__introTexts{
grid-area: texts;
opacity: 0;
transform: translateY(-20px);
}
.p-product__introCatch {
margin-top: clamp(
20px,
calc((29 - 20) / var(--site-fluid-span) * var(--site-fluid-vw) + 20px),
29px
); font-size: var(--site-font-size-lg);
font-weight: 700;
line-height: 1.875;
}
.p-product__introText {
margin-top: 15px;
font-size: var(--site-font-size-base);
}
.c-button {
margin-top: var(--site-space-lg);
}  .p-product__features {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
max-width: 500px; margin-top: 60px;
margin-inline: auto;
@media (width >= calc(1024 / 16 * 1rem)) {
grid-template-columns: minmax(0, 500fr) minmax(0, 680fr);
grid-template-rows: 220px 220px; gap: 20px;
max-width: none;
}
}
.p-product__feature {
display: grid;
border-radius: var(--site-radius-sm);
background-color: var(--site-color-lightbluegray);
overflow: clip;
.p-product__featureBody {
padding: 25px 25px 0;
@media (width >= calc(1024 / 16 * 1rem)) {
padding: 40px 50px 0;
}
}
.p-product__featureImage {
align-self: end;
margin-top: 16px; picture {
display: contents;
}
img {
display: block;
width: 100%;
}
}
&.is-feature01 {
@media (width >= calc(1024 / 16 * 1rem)) {
grid-row: 1 / 3;
grid-template-rows: minmax(0, 1fr) auto; }
} &.is-feature02,
&.is-feature03 {
@media (width >= calc(1024 / 16 * 1rem)) {
grid-template-columns: minmax(0, 390fr) minmax(0, 290fr); grid-template-rows: minmax(0, 1fr); align-items: center;
column-gap: 1em; }
.p-product__featureBody {
@media (width >= calc(1024 / 16 * 1rem)) {
grid-row: 1;
grid-column: 2;
padding: 0 clamp(
16px,
calc((40 - 16) / (1366 - 1024) * (100vw - 1024px) + 16px),
40px
) 0 0; }
}
.p-product__featureImage {
@media (width >= calc(1024 / 16 * 1rem)) {
grid-row: 1;
grid-column: 1;
align-self: stretch;
margin-top: 0;
}
img {
@media (width >= calc(1024 / 16 * 1rem)) {
height: 100%;
object-fit: cover;
object-position: 0 50%;
}
}
}
} &.is-feature03 {
@media (width < calc(1024 / 16 * 1rem)) {
grid-template-columns: minmax(0, 1fr) minmax(0, 200px); }
.p-product__featureBody {
@media (width < calc(1024 / 16 * 1rem)) {
grid-row: 1;
grid-column: 1 / 3;
position: relative;
z-index: 1;
width: 55%; padding-right: 0; padding-bottom: 25px;
}
} .p-product__featureText {
@media (width < calc(1024 / 16 * 1rem)) {
padding-right: 20px;
}
}
.p-product__featureImage {
@media (width < calc(1024 / 16 * 1rem)) {
grid-row: 1;
grid-column: 2 / 3;
margin-top: 40px;
}
}
}
}
.p-product__featureTitle {
font-size: var(--site-font-size-md);
font-weight: 700;
line-height: 1.5;
}
.p-product__featureEm {
color: var(--site-color-blue);
}
.p-product__featureText {
margin-top: 15px;
font-size: var(--site-font-size-base);
line-height: 2;
}
.p-product__note {
margin-top: 25px;
color: var(--site-color-darkgray);
font-size: var(--site-font-size-xs);
line-height: 1.75;
@media (width >= calc(1200 / 16 * 1rem)) {
text-align: end;
}
}  .p-product__catch {
display: grid;
position: relative;
margin-top: clamp(
80px,
calc((120 - 80) / var(--site-fluid-span) * var(--site-fluid-vw) + 80px),
120px
); 
@media (width >= calc(1024 / 16 * 1rem)) {
align-items: center;
min-block-size: 720px; 
}
}
.p-product__catchImage {
img {
display: block;
width: 100%;
height: 240px;
object-fit: cover;
object-position: 20% 50%; @media (width >= calc(1024 / 16 * 1rem)) {
height: 100%;
object-position: 50% 50%;
}
}
@media (width >= calc(1024 / 16 * 1rem)) {
position: absolute;
inset: 0;
}
} .p-product__catchInner {
@media (width >= calc(1024 / 16 * 1rem)) {
display: flex;
justify-content: flex-end;
position: relative;
width: 100%;
max-width: calc(1254px + var(--site-space-side) * 2); margin-inline: auto;
padding-inline: var(--site-space-side);
}
}
.p-product__catchBox {
position: relative;
padding: 30px var(--site-space-side) 27px;
background-color: color-mix(in srgb, var(--site-color-gray) 25%, var(--site-color-white)); @media (width >= calc(1024 / 16 * 1rem)) {
width: 500px;
padding: 32px 50px; border-radius: 40px;
background-color: var(--site-color-white);
&.is-show{ }
}
}
.p-product__catchTitle {
font-size: clamp(
24px,
calc((32 - 24) / var(--site-fluid-span) * var(--site-fluid-vw) + 24px),
32px
); 
font-weight: 700;
line-height: 1.75;
}
.p-product__catchEm {
color: var(--site-color-blue);
}
.p-product__catchText {
margin-top: clamp(
16px,
calc((30 - 16) / var(--site-fluid-span) * var(--site-fluid-vw) + 16px),
30px
);
font-size: clamp(
13px,
calc((18 - 13) / var(--site-fluid-span) * var(--site-fluid-vw) + 13px),
18px
);
line-height: 1.9;
}  .p-product__merit {
display: grid;
gap: 20px 35px; padding-top: clamp(
50px,
calc((100 - 50) / var(--site-fluid-span) * var(--site-fluid-vw) + 50px),
100px
);
@media (width >= calc(1200 / 16 * 1rem)) {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
}
}
.p-product__meritHead {
text-align: center;
@media (width >= calc(1200 / 16 * 1rem)) {
max-width: 300px;
text-align: start;
}
}
.p-product__meritTitle {
font-size: clamp(
24px,
calc((32 - 24) / var(--site-fluid-span) * var(--site-fluid-vw) + 24px),
32px
);
font-weight: 700;
line-height: 1.5;
}
.p-product__meritText {
margin-top: clamp(
15px,
calc((40 - 15) / var(--site-fluid-span) * var(--site-fluid-vw) + 15px),
40px
);
} .p-product__meritScroll {
margin-inline: calc(var(--site-space-side) * -1);
padding: 10px var(--site-space-side) 20px; overflow-x: auto;
@media (width >= calc(1200 / 16 * 1rem)) {
margin-inline: 0;
padding: 0;
overflow: visible;
}
} .p-product__meritTable {
display: grid;
grid-template-columns:
calc(142em / 13) calc(288em / 13) calc(60em / 13) calc(290em / 13) calc(20em / 13);
grid-template-rows:
calc(33em / 13) calc(17em / 13) calc(23em / 13)
calc(65em / 13) calc(15em / 13) calc(65em / 13) calc(15em / 13) calc(65em / 13)
calc(17em / 13); width: max-content;
margin-inline: auto;
font-size: clamp(
10px,
calc((13 - 10) / var(--site-fluid-span) * var(--site-fluid-vw) + 10px),
13px
); 
&.is-show{
.p-product__meritGroup{
animation: fadeRight .5s ease-out forwards;
&.is-before{
animation-delay: .1s;
}
&.is-after{
animation-delay: .4s;
}
}
}
} .p-product__meritGroup {
display: grid;
grid-template-rows: subgrid;
grid-row: 1 / 10;
position: relative;
z-index: 1; opacity: 0;
transform: translateY(20px);
&.is-before {
grid-column: 2;
}
&.is-after {
grid-column: 4;
.p-product__meritLabel {
background-color: var(--site-color-black);
color: var(--site-color-white);
}
}
} .p-product__meritLabel {
grid-row: 1;
padding-block: 0;
border-color: var(--site-color-black);
background-color: var(--site-color-white);
font-weight: 700;
line-height: calc(31em / 13);
letter-spacing: 0.2em;
} .p-product__meritRole {
--p-product-role-bg: var(--site-color-blue);
--p-product-role-color: var(--site-color-white);
grid-column: 1 / -1;
position: relative;
padding-inline-start: calc(22em / 13);
background-color: var(--p-product-role-bg);
color: var(--p-product-role-color);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.2em;
&.is-driver {
grid-row: 4;
}
&.is-manager {
--p-product-role-bg: var(--site-color-bgorange);
--p-product-role-color: var(--site-color-text); grid-row: 6;
}
&.is-general {
--p-product-role-bg: var(--site-color-bggreen);
--p-product-role-color: var(--site-color-text);
grid-row: 8;
} &::after {
position: absolute;
top: 50%;
left: calc((142 + 288 + (60 - 33) / 2) * 1em / 13);
width: calc(33em / 13);
height: calc(32em / 13);
background-image: url(//pai-r.com/wp-content/themes/PAI-R/lp/mtag/img/arrow_merit.svg);
background-repeat: no-repeat;
background-size: contain;
transform: translateY(-50%);
content: "";
}
} .p-product__meritList {
display: grid;
grid-template-rows: subgrid;
grid-row: 3 / 10;
border-radius: calc(10em / 13);
background-color: var(--site-color-white);
box-shadow: var(--site-shadow-md);
}
.p-product__meritItem {
--p-product-merit-em: var(--site-color-blue);
align-content: center; position: relative;
line-height: 2;
text-align: center;
&:nth-child(1) { grid-row: 2; }
&:nth-child(2) { grid-row: 4; }
&:nth-child(3) { grid-row: 6; } & + &::before {
position: absolute;
top: calc(-7.5em / 13);
inset-inline: calc(20em / 13);
border-top: 1px dashed var(--site-color-gray);
content: "";
}
&.is-manager {
--p-product-merit-em: var(--site-color-bgorange);
}
&.is-general {
--p-product-merit-em: var(--site-color-textgreen);
}
}
.p-product__meritEm {
color: var(--p-product-merit-em);
font-size: calc(20em / 13); line-height: 1.5;
}  .p-product__value {
padding-top: clamp(
50px,
calc((100 - 50) / var(--site-fluid-span) * var(--site-fluid-vw) + 50px),
100px
);
}
.p-product__valueTitle {
font-size: clamp(
24px,
calc((32 - 24) / var(--site-fluid-span) * var(--site-fluid-vw) + 24px),
32px
); font-weight: 700;
line-height: 1.5;
text-align: center;
} .p-product__valueList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(
12px,
calc((20 - 12) / var(--site-fluid-span) * var(--site-fluid-vw) + 12px),
20px
);
margin-top: var(--site-space-lg);
@media (width >= calc(1024 / 16 * 1rem)) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
&.is-show{
animation-name: fadeRight;
.p-product__valueItem{
animation: fadeRight .6s ease-out forwards;
&:nth-child(2){
animation-delay: .1s;
}
&:nth-child(3){
animation-delay: .2s;
}
&:nth-child(4){
animation-delay: .3s;
}
}
}
}
.p-product__valueItem {
display: grid;
place-items: center;
min-block-size: clamp(
80px,
calc((118 - 80) / var(--site-fluid-span) * var(--site-fluid-vw) + 80px),
118px
); padding: 12px 10px;
border-radius: var(--site-radius-sm);
background-color: var(--site-color-palebluegray);
font-size: clamp(
14px,
calc((20 - 14) / var(--site-fluid-span) * var(--site-fluid-vw) + 14px),
20px
);
font-weight: 500;
line-height: 1.9;
text-align: center;
opacity: 0;
transform: translateY(20px);
} .p-product__functions{
padding-top: clamp(
50px,
calc((80 - 50) / var(--site-fluid-span) * var(--site-fluid-vw) + 50px),
80px
);
} .p-product__function {
--p-product-function-fill: var(--site-color-bgblue);
--p-product-function-bg: var(--site-color-baseblue);
--p-product-function-num: var(--site-color-blue);
--p-product-function-tag-bg: var(--site-color-tagblue);
--p-product-function-tag-color: var(--site-color-darkgray);
--p-product-function-gutter: clamp(
40px,
calc((118 - 40) / var(--site-fluid-span) * var(--site-fluid-vw) + 40px),
118px
); display: grid;
background-color: var(--p-product-function-fill);
@media (width >= calc(1024 / 16 * 1rem)) {
grid-template-columns: repeat(2, minmax(0, 1fr));
} .p-product__functionImage {
display: flex;
justify-content: center;  overflow: clip;
@media (width >= calc(1024 / 16 * 1rem)) {
justify-content: flex-end;
}
img {
display: block;
width: 100%;
max-width: 683px; height: auto; object-fit: cover;
@media (width >= calc(1024 / 16 * 1rem)) {
width: min(683px, 100%); height: 100%;
object-position: 50% 100%; }
}
} .p-product__functionBody {
display: flex;
align-items: center;
padding: 35px var(--site-space-side) 30px;
background-color: var(--p-product-function-bg);
@media (width >= calc(1024 / 16 * 1rem)) {
justify-content: flex-start;
padding: 50px var(--site-space-side) 50px 0; }
}
.p-product__functionContent {
width: 100%;
@media (width >= calc(1024 / 16 * 1rem)) {
max-width: calc(var(--site-contents-width) * 1px / 2);
padding-inline-start: var(--p-product-function-gutter);
}
}
&.is-color-blue{
.p-product__functionContent{
&.is-show{  }
}
} &.is-color-green {
--p-product-function-fill: var(--site-color-bggreen);
--p-product-function-bg: var(--site-color-basegreen);
--p-product-function-num: var(--site-color-textgreen);
--p-product-function-tag-bg: var(--site-color-taggreen);
--p-product-function-tag-color: var(--site-color-textgreen);
.p-product__functionImage {
background-image: url(//pai-r.com/wp-content/themes/PAI-R/lp/mtag/img/img_function02_l.webp);
background-repeat: no-repeat;
background-size: auto 100%;
@media (width >= calc(1024 / 16 * 1rem)) {
grid-row: 1;
grid-column: 2;
justify-content: flex-start;
}
}
.p-product__functionBody {
@media (width >= calc(1024 / 16 * 1rem)) {
grid-row: 1;
grid-column: 1;
justify-content: flex-end;
padding-inline: var(--site-space-side) 0;
}
}
.p-product__functionContent {
@media (width >= calc(1024 / 16 * 1rem)) {
padding-inline: 0 var(--p-product-function-gutter);
}
&.is-show{ }
}
}
&.is-color-orange {
--p-product-function-fill: var(--site-color-bgorange);
--p-product-function-bg: var(--site-color-baseorange);
--p-product-function-num: var(--site-color-textorange);
--p-product-function-tag-bg: var(--site-color-tagorange);
--p-product-function-tag-color: var(--site-color-textorange); .p-product__functionSub img {
width: 100%;
}
.p-product__functionContent{
&.is-show{ }
}
}
}
.p-product__functionHead {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 20px;
}
.p-product__functionLabel {
font-size: var(--site-font-size-base); 
font-weight: 700;
}
.p-product__functionNum {
color: var(--p-product-function-num);
}
.p-product__functionTags{
display: flex;
gap: 8px;
} .p-product__functionTag {
background-color: var(--p-product-function-tag-bg);
color: var(--p-product-function-tag-color);
font-size: clamp(
12px,
calc((14 - 12) / var(--site-fluid-span) * var(--site-fluid-vw) + 12px),
14px
); 
line-height: 1.8;
}
.p-product__functionTitle {
margin-top: clamp(
19px,
calc((28 - 19) / var(--site-fluid-span) * var(--site-fluid-vw) + 19px),
28px
);
font-size: var(--site-font-size-lg);
font-weight: 700;
line-height: 1.6875;
}
.p-product__functionText {
margin-top: clamp(
10px,
calc((20 - 10) / var(--site-fluid-span) * var(--site-fluid-vw) + 10px),
20px
);
font-size: var(--site-font-size-base);
letter-spacing: 0.02em; } .p-product__functionPhrase {
@media (width >= calc(1024 / 16 * 1rem)) {
display: inline-block;
}
}
.p-product__functionSub {
margin-top: 32px; 
img {
display: block;
}
}
.p-product__functionBox {
margin-top: 32px;
padding: 15px 25px 20px;
border-radius: var(--site-radius-sm);
background-color: var(--site-color-white);
}
.p-product__functionBoxTitle {
font-size: var(--site-font-size-base);
font-weight: 500;
}
.p-product__functionBoxText {
margin-top: 4px;
color: var(--site-color-darkgray);
font-size: clamp(
12px,
calc((14 - 12) / var(--site-fluid-span) * var(--site-fluid-vw) + 12px),
14px
); 
line-height: 1.85;
}
} .p-application{
text-align: center;
.c-sectionTitle {
line-height: 1.9;
} .p-application__list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 36px 60px; margin-top: 40px; 
@media (width >= calc(768 / 16 * 1rem)) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.p-application__item{
&:nth-child(2),
&:nth-child(3){
opacity: 0;
transform: translateY(20px);
}
}
&.is-show{
.p-application__item{
&:nth-child(2){
animation: fadeUp .6s .3s ease-out forwards;
}
&:nth-child(3){
animation: fadeUp .6s .6s ease-out forwards;
}
}
}
} .p-application__role {
--p-application-role-bg: var(--site-color-blue);
--p-application-role-color: var(--site-color-white);
justify-content: center;
height: clamp(
36px,
calc((44 - 36) / var(--site-fluid-span) * var(--site-fluid-vw) + 36px),
44px
);
background-color: var(--p-application-role-bg);
color: var(--p-application-role-color);
font-size: clamp(
15px,
calc((18 - 15) / var(--site-fluid-span) * var(--site-fluid-vw) + 15px),
18px
); 
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.3em;
&.is-manager {
--p-application-role-bg: var(--site-color-bgorange);
--p-application-role-color: var(--site-color-text);
}
&.is-general {
--p-application-role-bg: var(--site-color-bggreen);
--p-application-role-color: var(--site-color-text);
}
} .p-application__image {
display: flex;
justify-content: center;
align-items: flex-end;
height: clamp(
167px,
calc((255 - 167) / var(--site-fluid-span) * var(--site-fluid-vw) + 167px),
255px
); margin-top: 6px; img {
display: block;
width: auto;
max-height: 100%;
} &.is-phone img {
max-height: clamp(
160px,
calc((210 - 160) / var(--site-fluid-span) * var(--site-fluid-vw) + 160px),
210px
);
}
}
.p-application__name {
margin-top: 8px; padding-bottom: clamp(
14px,
calc((19 - 14) / var(--site-fluid-span) * var(--site-fluid-vw) + 14px),
19px
); border-bottom: 1px dashed var(--site-color-gray);
font-size: clamp(
15px,
calc((18 - 15) / var(--site-fluid-span) * var(--site-fluid-vw) + 15px),
18px
); font-weight: 700;
letter-spacing: 0.1em;
}
.p-application__text {
padding: 9px 30px 0; color: var(--site-color-darkgray);
font-size: var(--site-font-size-sm); 
line-height: 1.65;
letter-spacing: 0.15em;
@media (width >= calc(768 / 16 * 1rem)) {
line-height: 2;
letter-spacing: 0.2em;
}
}
.p-application__note {
margin-top: clamp(
40px,
calc((60 - 40) / var(--site-fluid-span) * var(--site-fluid-vw) + 40px),
60px
); 
font-size: clamp(
18px,
calc((24 - 18) / var(--site-fluid-span) * var(--site-fluid-vw) + 18px),
24px
); 
font-weight: 700;
line-height: 1.65;
}
} .p-plan{
background-color: var(--site-color-bgblue);
text-align: center; .p-plan__list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 20px 40px;
margin-top: clamp(
30px,
calc((60 - 30) / var(--site-fluid-span) * var(--site-fluid-vw) + 30px),
60px
);
@media (width >= calc(1024 / 16 * 1rem)) { grid-template-columns: repeat(2, 1fr);
justify-content: center;
}
}
.p-plan__card {
--p-plan-accent: var(--site-color-darkgray); --p-plan-name-color: var(--site-color-text);
--p-plan-item-bg: var(--site-color-lightbluegray);
padding: clamp(
25px,
calc((40 - 25) / var(--site-fluid-span) * var(--site-fluid-vw) + 25px),
40px
) clamp(
20px,
calc((50 - 20) / var(--site-fluid-span) * var(--site-fluid-vw) + 20px),
50px
) clamp(
20px,
calc((40 - 20) / var(--site-fluid-span) * var(--site-fluid-vw) + 30px),
40px
); 
border-radius: 20px;
background-color: var(--site-color-white);
box-shadow: var(--site-shadow-md); @media (width >= calc(1024 / 16 * 1rem)) {
display: grid;
grid-row: span 5;
grid-template-rows: subgrid;
row-gap: 0;
}
&.is-standard {
--p-plan-accent: var(--site-color-blue);
--p-plan-name-color: var(--site-color-blue);
--p-plan-item-bg: var(--site-color-white);
order: -1; padding-bottom: clamp(
30px,
calc((44 - 30) / var(--site-fluid-span) * var(--site-fluid-vw) + 30px),
44px
); 
background-color: var(--site-color-lightblue);
box-shadow: var(--site-shadow-glow); 
@media (width >= calc(1024 / 16 * 1rem)) {
order: 0;
&.is-show{
animation-delay: .3s;
}
}
}
}
.p-plan__head {
padding-bottom: clamp(
18px,
calc((24 - 18) / var(--site-fluid-span) * var(--site-fluid-vw) + 18px),
24px
);
border-bottom: 1px solid var(--site-color-borderGray);
}
.p-plan__name {
color: var(--p-plan-name-color);
font-family: var(--site-font-family-en);
font-size: clamp(
26px,
calc((44 - 26) / var(--site-fluid-span) * var(--site-fluid-vw) + 26px),
44px
); 
font-weight: 700;
line-height: 1.2;
letter-spacing: 0;
}
.p-plan__nameJa {
margin-top: 13px;
font-size: var(--site-font-size-base);
line-height: 1.5;
}
.p-plan__body {
padding-top: clamp(
15px,
calc((26 - 15) / var(--site-fluid-span) * var(--site-fluid-vw) + 15px),
26px
);
@media (width >= calc(1024 / 16 * 1rem)) {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
row-gap: 0;
}
}
.p-plan__catch {
font-size: clamp(
14px,
calc((22 - 14) / var(--site-fluid-span) * var(--site-fluid-vw) + 14px),
22px
);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0; @media (width >= calc(1024 / 16 * 1rem)) {
align-self: start;
}
}
.p-plan__catchEm {
color: var(--site-color-blue);
}
.p-plan__lead {
margin-top: clamp(
5px,
calc((12 - 5) / var(--site-fluid-span) * var(--site-fluid-vw) + 5px),
12px
); 
font-size: clamp(
12px,
calc((14 - 12) / var(--site-fluid-span) * var(--site-fluid-vw) + 12px),
14px
); 
line-height: 1.5;
}
.p-plan__features {
display: grid;
gap: clamp(
5px,
calc((7 - 5) / var(--site-fluid-span) * var(--site-fluid-vw) + 5px),
7px
);
margin-top: clamp(
20px,
calc((24 - 20) / var(--site-fluid-span) * var(--site-fluid-vw) + 20px),
24px
);
} .p-plan__feature {
display: grid;
grid-template-columns: auto minmax(0, 1fr) 50px;
align-items: center;
gap: clamp(
13px,
calc((15 - 13) / var(--site-fluid-span) * var(--site-fluid-vw) + 13px),
15px
);
min-block-size: clamp(
34px,
calc((50 - 34) / var(--site-fluid-span) * var(--site-fluid-vw) + 34px),
50px
);
padding-inline: clamp(
12px,
calc((18 - 12) / var(--site-fluid-span) * var(--site-fluid-vw) + 12px),
18px
) clamp(
12px,
calc((24 - 12) / var(--site-fluid-span) * var(--site-fluid-vw) + 12px),
24px
);
border-radius: 4px;
background-color: var(--p-plan-item-bg);
font-size: var(--site-font-size-base); 
line-height: 1.5;
text-align: start; &::before {
width: 21px;
height: 20px;
background-color: var(--p-plan-accent);
mask-image: var(--p-plan-icon);
mask-repeat: no-repeat;
mask-position: center;
mask-size: auto; content: "";
}
&.is-alert {
--p-plan-icon: url("data:image/svg+xml,%3Csvg width='17' height='20' viewBox='0 0 17 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.3877 1C8.71764 0.995852 9.00603 1.26691 9.01172 1.60938L9.02344 2.33789L9.7207 2.5498C11.7396 3.16463 13.0437 5.05097 12.96 7.16992C12.8687 9.47081 13.603 12.4006 15.4473 14.1484C15.7874 14.4709 15.8413 14.7137 15.7568 14.9854C15.7257 15.0854 15.6449 15.2227 15.5283 15.3262C15.4182 15.4238 15.3232 15.4521 15.252 15.4521L1.5625 15.4551C1.48592 15.4551 1.38473 15.4243 1.27246 15.3301C1.18457 15.2562 1.11673 15.1647 1.07422 15.0811L1.04004 15.001C0.948977 14.7248 1.00346 14.4703 1.34375 14.1494C3.21431 12.3856 3.91663 9.44497 3.83398 7.12988C3.75905 5.03084 5.0678 3.16092 7.07227 2.5498L7.7666 2.33789L7.78027 1.61133C7.78657 1.2648 8.05606 1.00439 8.3877 1Z' stroke='black' stroke-width='2'/%3E%3Cpath d='M9.06836 18.5088C8.85431 18.601 8.62049 18.6523 8.37793 18.6523C8.13426 18.6523 7.89922 18.6013 7.68457 18.5088H9.06836Z' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}
&.is-handle {
--p-plan-icon: url("data:image/svg+xml,%3Csvg width='19' height='20' viewBox='0 0 19 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.4642 9.625C18.4642 14.8698 14.3614 19.125 9.29179 19.125C4.22224 19.125 0.125 14.8698 0.125 9.625C0.125 4.38021 4.22786 0.125 9.29741 0.125C14.367 0.125 18.4698 4.37439 18.4698 9.625H18.4642ZM16.2217 7.95435C16.4015 7.9951 16.5252 7.66912 16.4802 7.50613C15.5416 4.17647 12.5741 1.90043 9.26369 1.91207C5.9533 1.92371 3.00262 4.22886 2.09774 7.56434C2.07526 7.65165 2.14271 7.86121 2.21015 7.9136C2.27759 7.96599 2.43496 7.96599 2.54175 7.94271C4.12107 7.5527 5.66667 7.26164 7.28533 7.08701C10.4102 6.74939 13.1979 7.27328 16.2217 7.96017V7.95435ZM8.01035 16.6336C8.33633 16.0049 8.44312 15.3006 8.43188 14.5729C8.4094 12.6811 7.38649 11.0512 5.72849 10.2828C4.34026 9.63664 2.36752 9.43873 2.26635 10.9289C2.05278 14.1771 6.77388 18.9969 8.00473 16.6336H8.01035ZM16.469 10.9115C16.4184 10.2886 15.9913 9.86366 15.3562 9.8171C13.8049 9.70067 12.22 10.4167 11.2477 11.7206C10.2754 13.0245 10.0224 14.9746 10.6688 16.5172C11.7816 19.1774 16.7331 14.1771 16.4634 10.9115H16.469Z' fill='black' stroke='black' stroke-width='0.25'/%3E%3C/svg%3E");
}
&.is-table {
--p-plan-icon: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5343 1H3.2048C1.98712 1 1 1.98712 1 3.2048V13.5343C1 14.752 1.98712 15.7391 3.2048 15.7391H13.5343C14.752 15.7391 15.7391 14.752 15.7391 13.5343V3.2048C15.7391 1.98712 14.752 1 13.5343 1Z' stroke='black' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M1 6.42285H15.7391' stroke='black' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M15.7391 11.0752H1' stroke='black' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M6.73242 1V15.7391' stroke='black' stroke-width='2' stroke-miterlimit='10'/%3E%3C/svg%3E");
}
&.is-graph {
--p-plan-icon: url("data:image/svg+xml,%3Csvg width='19' height='16' viewBox='0 0 19 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.70703 9.92786L8.26304 5.16337L12.0942 9.16699L16.8746 4.16699' stroke='black' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M1 0V14.0942H18.4819' stroke='black' stroke-width='2' stroke-miterlimit='10'/%3E%3C/svg%3E");
}
&.is-phone { --p-plan-icon: url("data:image/svg+xml,%3Csvg width='13' height='20' viewBox='4.4 0.05 15.85 24.56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.88334 24.5649C6.20863 24.5649 5.63147 24.3233 5.16811 23.8472C4.6943 23.3722 4.45508 22.7974 4.45508 22.1366V2.5178C4.45508 1.85586 4.69547 1.27986 5.17043 0.803735C5.6454 0.328767 6.2214 0.0883789 6.88334 0.0883789H17.7832C18.444 0.0883789 19.0211 0.328767 19.4961 0.803735C19.9455 1.25432 20.1755 1.77573 20.201 2.39819V22.2458C20.1766 22.8787 19.9525 23.3932 19.4961 23.8495C19.0328 24.3257 18.4579 24.5649 17.7832 24.5649H6.88334ZM6.86011 21.1437C6.86011 21.7035 7.3165 22.1599 7.87624 22.1599H16.7915C17.3512 22.1599 17.8076 21.7035 17.8076 21.1437V19.1916H10.6331L10.596 19.187L6.86011 19.1916V21.1437ZM7.87624 2.49341C7.3165 2.49341 6.86011 2.9498 6.86011 3.50954V17.0595H10.3823L10.4264 17.0664L17.8064 17.0595V3.50954C17.8064 2.9498 17.35 2.49341 16.7903 2.49341H7.87624Z' fill='black'/%3E%3C/svg%3E");
}
&.is-sns {
--p-plan-icon: url("data:image/svg+xml,%3Csvg width='21' height='19' viewBox='0 0 21 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.40026 8.09739C7.02905 8.09739 7.53879 7.58765 7.53879 6.95885C7.53879 6.33005 7.02905 5.82031 6.40026 5.82031C5.77146 5.82031 5.26172 6.33005 5.26172 6.95885C5.26172 7.58765 5.77146 8.09739 6.40026 8.09739Z' fill='black'/%3E%3Cpath d='M13.8456 8.09739C14.4744 8.09739 14.9841 7.58765 14.9841 6.95885C14.9841 6.33005 14.4744 5.82031 13.8456 5.82031C13.2168 5.82031 12.707 6.33005 12.707 6.95885C12.707 7.58765 13.2168 8.09739 13.8456 8.09739Z' fill='black'/%3E%3Cpath d='M10.1229 8.09739C10.7517 8.09739 11.2614 7.58765 11.2614 6.95885C11.2614 6.33005 10.7517 5.82031 10.1229 5.82031C9.49411 5.82031 8.98438 6.33005 8.98438 6.95885C8.98438 7.58765 9.49411 8.09739 10.1229 8.09739Z' fill='black'/%3E%3Cpath d='M17.3086 1H2.93944C1.87157 1 1 1.87157 1 2.93944V16.6333L4.94169 12.9114H17.3086C18.3764 12.9114 19.248 12.0399 19.248 10.972V2.93944C19.248 1.87157 18.3764 1 17.3086 1Z' stroke='black' stroke-width='2' stroke-miterlimit='10'/%3E%3C/svg%3E");
}
} .p-plan__status {
justify-self: center; &.is-included {
color: var(--p-plan-accent);
font-size: clamp(
18px,
calc((24 - 18) / var(--site-fluid-span) * var(--site-fluid-vw) + 18px),
24px
);
line-height: 1;
}
&.is-excluded {
width: 8px;
height: 2px;
background-color: var(--p-plan-accent);
}
&.is-option {
color: var(--p-plan-accent);
font-size: 0.9em;
}
} .p-plan__notes {
margin-top: 20px;
color: var(--site-color-darkgray);
font-size: var(--site-font-size-xs);
line-height: 2;
text-align: start;
li{
padding-left: 1.25em;
text-indent: -1.25em;
}
}
.p-plan__price {
margin-top: clamp(
39px,
calc((46 - 39) / var(--site-fluid-span) * var(--site-fluid-vw) + 39px),
46px
);
color: var(--site-color-white);
font-size: clamp(
16px,
calc((20 - 16) / var(--site-fluid-span) * var(--site-fluid-vw) + 16px),
20px
);
font-weight: 700;
line-height: 1.9;
}
.p-plan__note {
margin-top: clamp(
10px,
calc((15 - 10) / var(--site-fluid-span) * var(--site-fluid-vw) + 10px),
15px
);
color: color-mix(in srgb, var(--site-color-white) 70%, transparent);
font-size: var(--site-font-size-xs);
line-height: 1.6;
}
} .p-faq{
--p-faq-duration: 0.3s;
interpolate-size: allow-keywords; .p-faq__list {
margin-top: clamp(
30px,
calc((40 - 30) / var(--site-fluid-span) * var(--site-fluid-vw) + 30px),
40px
);
border-top: 1px solid var(--site-color-borderGray);
} .p-faq__item {
padding-bottom: 0;
border-bottom: 1px solid var(--site-color-borderGray);
transition: padding-bottom 0s var(--p-faq-duration); &[open] {
padding-bottom: 35px; transition-delay: 0s; } &::details-content {
block-size: 0;
overflow-y: clip;
transition:
block-size var(--p-faq-duration),
content-visibility var(--p-faq-duration) allow-discrete;
}
&[open]::details-content {
block-size: auto;
}
} .p-faq__question {
display: flex;
justify-content: space-between;
align-items: center;
gap: clamp(
12px,
calc((20 - 12) / var(--site-fluid-span) * var(--site-fluid-vw) + 12px),
20px
);
font-size: clamp(
13px,
calc((18 - 13) / var(--site-fluid-span) * var(--site-fluid-vw) + 13px),
18px
);
padding-block: 35px; font-weight: 700;
line-height: 1.5;
list-style: none;
transition: padding-bottom 0s var(--p-faq-duration); cursor: pointer;
&::-webkit-details-marker {
display: none;
} &::after {
--p-faq-icon-size: clamp(
15px,
calc((20 - 15) / var(--site-fluid-span) * var(--site-fluid-vw) + 15px),
20px
);
flex-shrink: 0;
width: var(--p-faq-icon-size);
height: var(--p-faq-icon-size);
background-image:
linear-gradient(var(--site-color-blue), var(--site-color-blue)),
linear-gradient(var(--site-color-blue), var(--site-color-blue));
background-repeat: no-repeat;
background-position: center;
background-size: 100% 2px, 2px 100%;
transition: background-size var(--p-faq-duration);
content: "";
}
} .p-faq__item[open] .p-faq__question {
padding-bottom: 0;
transition-delay: 0s; &::after {
background-size: 100% 2px, 2px 0;
}
} .p-faq__answer {
padding-top: 25px; }
.p-faq__answerText {
color: var(--site-color-darkgray);
font-size: clamp(
12px,
calc((14 - 12) / var(--site-fluid-span) * var(--site-fluid-vw) + 12px),
14px
);
line-height: 1.9;
padding-right: 3em;
padding-left: 1.25em;
text-indent: -1.25em;
&::before{
margin-right: .25em;
content: "A.";
}
}
}  .p-option{
padding-top: clamp(
40px,
calc((70 - 40) / var(--site-fluid-span) * var(--site-fluid-vw) + 40px),
70px
);
padding-bottom: 40px;
background-image: url(//pai-r.com/wp-content/themes/PAI-R/lp/mtag/img/bg_nex_sp.webp);
background-position: center bottom;
background-size: cover;
overflow: clip;
@media (width >= calc(1024 / 16 * 1rem)) {
padding-bottom: 0; background-image: url(//pai-r.com/wp-content/themes/PAI-R/lp/mtag/img/bg_nex_pc.webp);
}
.c-sectionTitle {
--c-sectionTitle-font-size: clamp(
18px,
calc((32 - 18) / var(--site-fluid-span) * var(--site-fluid-vw) + 18px),
32px
);
line-height: 1.875;
} .p-option__content {
display: grid;
grid-template-columns: minmax(0, 1fr);
margin-top: 10px;
@media (width >= calc(1024 / 16 * 1rem)) {
grid-template-columns: minmax(0, 1fr) 440px; 
margin-top: 0; align-items: center;
}
} .p-option__image {
margin-inline: calc(var(--site-space-side) * -1);
@media (width >= calc(1024 / 16 * 1rem)) {
align-self: end;
width: min(889px, 889 / 1366 * 100vw); 
margin-inline: calc(min(73px, 73 / 1366 * 100vw) * -1) 0; } img {
--p-option-product-w: min(100% - var(--site-space-side) * 2, 640px);
display: block;
width: calc(var(--p-option-product-w) * 889 / 640);
max-width: none;
margin-left: calc((100% - var(--p-option-product-w)) / 2 - var(--p-option-product-w) * 80 / 640);
@media (width >= calc(1024 / 16 * 1rem)) {
width: 100%;
margin-left: 0;
}
}
}
.p-option__body {
position: relative;
z-index: 1; margin-top: 10px; @media (width >= calc(1024 / 16 * 1rem)) {
margin-top: 0;
padding-block: 40px; }
}
.p-option__text {
font-size: var(--site-font-size-base);
line-height: 1.8;
@media (width >= calc(1024 / 16 * 1rem)) {
line-height: 2.3;
}
}
.p-option__features {
margin-top: 10px;
color: var(--site-color-darkgray);
font-size: var(--site-font-size-base);
line-height: 2;
}
.c-button {
margin-top: 30px;
}
}  .p-faq{
&+.p-cta{
padding-top: 0;
}
} .p-cta{ --p-cta-image-width: 1599;
--p-cta-image-height: 643;
--p-cta-image-visible: 800;
--p-cta-design-width: 1366;
--p-cta-image-offset: calc((var(--p-cta-image-visible) - var(--p-cta-design-width) / 2) * 1px);
display: grid;
grid-template-areas:
"head"
"image"
"content";
position: relative;
@media (width >= calc(1200 / 16 * 1rem)) {
display: block;
padding-bottom: 20px;
overflow: clip; } .l-inner {
display: contents;
@media (width >= calc(1200 / 16 * 1rem)) {
display: block;
}
}
.p-cta__head {
grid-area: head;
padding-top: clamp(
20px,
calc((96 - 20) / var(--site-fluid-span) * var(--site-fluid-vw) + 20px),
96px
); text-align: center;
&+.p-cta__content{
margin-top: 130px;
}
}
.p-cta__title {
margin-inline: calc(var(--site-space-side) * -1); font-family: var(--site-font-family-avenir);
font-size: var(--site-font-size-3xl);
font-weight: 700;
line-height: 0;
letter-spacing: 0;
@media (width >= calc(1200 / 16 * 1rem)) {
margin-inline: 0;
} img {
display: inline-block;
width: auto;
height: calc(77em / 76);
vertical-align: top;
}
overflow: hidden;
span{
display: block;
transform: translateY(100%);
transition: .4s;
}
&.is-show{
span{
transform: translateY(0);
}
&+.p-cta__titleJa{
transition: .5s;
transition-delay: .4s;
opacity: 1;
}
}
}
.p-cta__titleJa {
margin-top: clamp(
10px,
calc((25 - 10) / var(--site-fluid-span) * var(--site-fluid-vw) + 10px),
25px
); font-size: clamp(
13px,
calc((20 - 13) / var(--site-fluid-span) * var(--site-fluid-vw) + 13px),
20px
); font-weight: 700;
opacity: 0;
} .p-cta__content {
grid-area: content;
margin-top: 40px; @media (width >= calc(1200 / 16 * 1rem)) {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
min-block-size: min(
var(--p-cta-image-height) * 1px,
(50vw + var(--p-cta-image-offset)) * var(--p-cta-image-height) / var(--p-cta-image-visible)
); padding-inline-start: 40px;
}
}
.p-cta__catch {
font-size: var(--site-font-size-xl);
font-weight: 700;
line-height: 1.5;
}
.p-cta__text {
margin-top: clamp(
20px,
calc((30 - 20) / var(--site-fluid-span) * var(--site-fluid-vw) + 20px),
30px
);
line-height: 2;
} .c-button {
margin-top: 40px;
} .c-textLink {
display: flex;
width: fit-content;
margin: 10px auto 0;
@media (width >= calc(1200 / 16 * 1rem)) {
margin: 20px 0 0;
}
} .p-cta__image {
grid-area: image;
margin-top: clamp(
100px,
calc((130 - 100) / var(--site-fluid-span) * var(--site-fluid-vw) + 100px),
130px
); margin-inline: calc(var(--site-space-side) * -1); @media (width >= calc(1200 / 16 * 1rem)) {
position: absolute;
bottom: 20px;
left: calc(50% - var(--p-cta-image-offset));
width: min(
var(--p-cta-image-width) * 1px,
(50vw + var(--p-cta-image-offset)) * var(--p-cta-image-width) / var(--p-cta-image-visible)
); margin: 0;
}
img {
display: block;
width: 100%;
}
}
}
.p-form{
background-color: var(--site-color-baseblue);
.c-sectionTitle{
text-align: center;
}
.p-form__lead{
text-align: center;
margin-top: 1em;
margin-bottom: var(--site-space-xl);
}
.p-form__content{
border-radius: clamp(
20px,
calc((30 - 20) / var(--site-fluid-span) * var(--site-fluid-vw) + 20px),
30px);
line-height: 0;
overflow: hidden;
}
} .l-footer{
color: var(--site-color-white);
font-weight: 400;  a {
text-decoration: none;
} .l-footer__notes {
padding: 15px var(--site-space-side);
background-color: var(--site-color-gray);
color: var(--site-color-darkgray);
font-size: var(--site-font-size-xs);
line-height: 1.75;
@media (width >= calc(768 / 16 * 1rem)) {
padding-block: 20px;
text-align: center;
}
} .l-footer__main {
display: grid;
grid-template-areas:
"logo"
"nav"
"subNav"
"copy";
padding: 55px var(--site-space-side) 25px;
background-color: var(--site-color-black);
@media (width >= calc(768 / 16 * 1rem)) {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"logo nav"
"subNav subNav"
"copy copy";
padding-top: 70px;
padding-inline: max(var(--site-space-side), (100% - var(--site-contents-width) * 1px) / 2); }
}
.l-footer__logo {
grid-area: logo;
width: clamp(
145px,
calc((145 - 157) / var(--site-fluid-span) * var(--site-fluid-vw) + 157px),
157px
); img {
display: block;
width: 100%;
}
}
.l-footer__nav {
grid-area: nav;
margin-top: 32px; font-size: 15px; line-height: 1.75;
@media (width >= calc(768 / 16 * 1rem)) {
margin-top: 0;
}
nav {
display: grid;
gap: 8px;
@media (width >= calc(768 / 16 * 1rem)) {
grid-template-columns: repeat(2, auto);
gap: 0 50px; 
}
}
}
.l-footer__navChild {
margin-top: 6px;
padding-inline-start: 7px; }
.l-footer__subNav {
grid-area: subNav;
margin-top: clamp(
45px,
calc((60 - 45) / var(--site-fluid-span) * var(--site-fluid-vw) + 45px),
60px
); 
font-size: 13px; line-height: 1.75;
}
.l-footer__subNav__menu {
display: flex;
flex-wrap: wrap;
gap: 6px 25px; 
}
.c-copyright {
grid-area: copy;
margin-top: clamp(
40px,
calc((45 - 40) / var(--site-fluid-span) * var(--site-fluid-vw) + 40px),
45px
); 
font-size: 13px; }
} .is-fadeIn{
opacity: 0;
transform: translateY(20px);
&.is-show{
animation: fadeUp .6s ease-out forwards;
}
}
@keyframes fadeUp{
from{
opacity: 0;
transform: translateY(20px);
}
to{
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeDown{
from{
opacity: 0;
transform: translateY(-20px);
}
to{
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeRight{
from{
opacity: 0;
transform: translateX(-20px);
}
to{
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeLeft{
from{
opacity: 0;
transform: translateX(20px);
}
to{
opacity: 1;
transform: translateX(0);
}
} @scope (.mTag) {
.thanks{
padding-bottom: var(--site-space-section);
}
}