:root { --site-color-blue:        #307CD3;
--site-color-green:       #48C9D4;
--site-color-orange:      #F2B335;
--site-color-text:        #26262A;
--site-color-muted:       #909090;
--site-color-yellow:      #FFE667;
--site-color-yellow-pale: #CBC9BE;
--site-color-red:         #CE282B;
--site-color-white:       #fff;
--site-color-balloon:     #2597D4;  --color-bg-overview: #23AEF9; --site-color-it-title-bg:  #26B0BD;
--site-color-it-text:      #2C849E;
--site-color-it-point-bg:  #13C5CE;
--site-color-it-figure-bg: #BAF9FF; --site-color-remote-title-bg:   #2270C8;
--site-color-remote-text:       #1464B9;
--site-color-remote-figure-bg:  #BBDBFF;
--site-color-remote-caution-bg: rgba(255, 255, 255, .2); --site-color-auto-title-bg:  #EA9A06;
--site-color-auto-text:      #CE9417;
--site-color-auto-figure-bg: #FFEFCF; --site-color-table-stripe: #F4F8F8; --site-color-footer-bg: #484859; --site-gradient-main:    linear-gradient(112.21deg, #F5FBFF 12.02%, #E7F6FF 80.52%);
--site-gradient-product: radial-gradient(116.76% 98.95% at 50% 57.63%, #165EB1 0%, #143860 100%);
--site-gradient-administration: linear-gradient(to bottom, #00B2CE 0%, #007BB9 100%); --site-font-family-ja: "IBM Plex Sans JP", sans-serif; --site-font-family-en: "Montserrat", sans-serif; --site-font-size-base: 16px;
--site-font-icons: "Material Symbols Outlined"; --site-space-sm: 8px;
--site-space-md: 16px;
--site-space-lg: 32px;
--site-spacing-section: clamp(80px, calc(150 / var(--site-contents-width) * 100vw), 160px); --site-spacing-base: calc(20 / 375 * 100%);  --site-radius-sm: 4px;
--site-radius-md: 10px; --site-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --site-min-width: 375;
--site-max-width: 1440;
--site-contents-width: 1200;
--site-breakpoint-md: 768;
--site-breakpoint-lg: 1200;
--screen-width: --sm;
--screen-width-md: _false;
--screen-width-lg: _false;  
@media (width >= calc(768 / 16 * 1rem)){
--screen-width-md: _true;
--screen-width: --md;
}
@media (width >= calc(1200 / 16 * 1rem)){
--screen-width-lg: _true;  
--screen-width: --lg;
} } *,
::before,
::after {
box-sizing: border-box;
}
:where(:root) {
font-family: var(--site-font-family-ja);
line-height: 1.75;
font-weight: 500;
letter-spacing: 0.05em;
text-spacing-trim: trim-start;
text-autospace: normal;
line-break: strict;
overflow-wrap: anywhere;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scrollbar-gutter: stable;
-webkit-tap-highlight-color: transparent;
scroll-behavior: smooth;
}
:where(body) {
min-block-size: 100dvb;
margin: unset;
background-color: var(--site-color-white);
color: var(--site-color-text);
font-size: clamp(14px, calc(14 / var(--site-min-width) * 100vw), 16px);
} :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: hidden;
} .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{
display: none;
@container style(--screen-width-md: _true){
display: block;
}
}
.u-show-lg{
display: none;
@container style(--screen-width-lg: _true){
.u-show-lg{
display: block;
}
}
}
.u-hide-md{
display: block;
@container style(--screen-width-md: _true){
display: none;
}
}
.u-hide-lg{
display: block;
@container style(--screen-width-lg: _true){
display: none;   
}
} .is-fadeIn{
opacity: 0;
translate: 0 20px;
&.is-show{
animation: c-fadeIn .4s ease-in-out forwards;
}
}
@keyframes c-fadeIn {
from{
opacity: 0;
translate: 0 20px;
}
to{
opacity: 1;
translate: 0 0;
}
}
@keyframes c-popup { 0%{
scale: 0.5;
opacity: 0;
}
40%{
scale: 1.1;
opacity: 1;
}
60%{
scale: 0.95;
opacity: 1;
}
80%{
scale: 1.05;
opacity: 1;
}
100%{
scale: 1;
opacity: 1;
}
} .c-button {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: clamp(10px, calc(14 / var(--site-contents-width) * 100vw), 16px);
.c-button__link {
--site-color-btn: var(--site-color-blue);
--site-color-btn-text: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
max-width: clamp(260px, calc(340 / 375 * 100vw), 380px);
height: clamp(60px, calc(60 / 375 * 100vw), 80px);
border-radius: 100vh;
background-color: var(--site-color-btn);
color: var(--site-color-btn-text);
font-size: clamp(16px, calc(24 / var(--site-contents-width) * 100vw), 24px);
font-family: var(--site-font-family-ja);
font-weight: 600;
text-decoration: none;
transition: 0.3s;
&::after{
display: block;
position: absolute;
right: 5%;
top: 50%;
width: calc(20 / 16 * 1em);
height: calc(20 / 16 * 1em);
background-color: currentColor;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center center;
translate: 0 -50%;
}
@media (hover) {
&:hover {
--site-color-btn: #fff;
--site-color-btn-text: var(--site-color-blue);
border: 2px solid currentColor;
}
} &.is-color-accent {
@media (hover) {
&:hover {
--site-color-btn-text: var(--site-color-orange);
}
}
} &.is-style-frame {
--site-color-btn: #fff;
--site-color-btn-text: var(--site-color-blue);
border: 1px solid var(--site-color-blue);
@media (hover) {
&:hover {
--site-color-btn: var(--site-color-blue);
--site-color-btn-text: #fff;
border: none;
}
}
} &.c-button-table{
&::after{
mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyMSAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHJlY3QgeD0iMC41IiB5PSIwLjUiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxMyIgc3Ryb2tlPSJ3aGl0ZSIvPiA8bGluZSB5MT0iNSIgeDI9IjIwIiB5Mj0iNSIgc3Ryb2tlPSJ3aGl0ZSIvPiA8bGluZSB5MT0iOSIgeDI9IjIwIiB5Mj0iOSIgc3Ryb2tlPSJ3aGl0ZSIvPiA8bGluZSB4MT0iMTQiIHkxPSIxMy43OTMiIHgyPSIxNCIgeTI9IjAuOTk5OTE5IiBzdHJva2U9IndoaXRlIi8+IDxsaW5lIHgxPSI3IiB5MT0iMTMuNzkzIiB4Mj0iNyIgeTI9IjAuOTk5OTE5IiBzdHJva2U9IndoaXRlIi8+IDwvc3ZnPg==);
content: "";
}
}
&.c-button-mail{
&::after{
mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAyMSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPG1hc2sgaWQ9Im1hc2swXzY5XzY1MCIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjIxIiBoZWlnaHQ9IjE1Ij4gPHJlY3Qgd2lkdGg9IjIxIiBoZWlnaHQ9IjE0LjU0NTUiIGZpbGw9IiNEOUQ5RDkiLz4gPC9tYXNrPiA8ZyBtYXNrPSJ1cmwoI21hc2swXzY5XzY1MCkiPiA8cmVjdCB4PSIxLjUiIHk9IjEuMDMwMTUiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMi41MDY1IiBzdHJva2U9IiMyMjVGQzkiLz4gPHBhdGggZD0iTTEuNTU5NTcgMC42OTc2MzJMMTAuNTY4OSA4LjAwNzU3TDE5LjU3ODMgMC42OTc2MzIiIHN0cm9rZT0iIzIyNUZDOSIvPiA8bGluZSB5MT0iLTAuNSIgeDI9IjEwLjE2MTUiIHkyPSItMC41IiB0cmFuc2Zvcm09Im1hdHJpeCgtMC43NTYwMDMgMC42NTQ1NjkgLTAuNjI1Njk4IC0wLjc4MDA2NiA4Ljg0MDgyIDYuNTU0OTMpIiBzdHJva2U9IiMyMjVGQzkiLz4gPGxpbmUgeTE9Ii0wLjUiIHgyPSIxMC4xNjE1IiB5Mj0iLTAuNSIgdHJhbnNmb3JtPSJtYXRyaXgoMC43NTYwMDMgMC42NTQ1NjkgMC42MjU2OTggLTAuNzgwMDY2IDEyLjIwMDIgNi4zNDgzOSkiIHN0cm9rZT0iIzIyNUZDOSIvPiA8L2c+IDwvc3ZnPg==);
content: "";
}
}
&.c-button-cta {
max-width: clamp(300px, calc(360 / var(--site-contents-width) * 100vw), 400px);
height: clamp(60px, calc(80 / var(--site-contents-width) * 100vw), 80px);
}
}
.c-button__sub {
grid-area: sub;
font-size: clamp(14px, calc(13 / var(--site-contents-width) * 100vw), 16px);
line-height: 1.5;
}
.c-button__main {
grid-area: main;
font-size: clamp(18px, calc(22 / var(--site-contents-width) * 100vw), 22px);
line-height: 1.4;
}
} .c-sectionTitle {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(4px, calc(8 / var(--site-contents-width) * 100vw), 12px);
.c-sectionTitle__en {
font-family: var(--site-font-family-en);
font-size: clamp(40px, calc(72 / var(--site-contents-width) * 100vw), 80px);
line-height: 1;
font-weight: 700;
}
.c-sectionTitle__ja {
font-size: clamp(13px, calc(18 / var(--site-contents-width) * 100vw), 20px);
font-weight: 700;
}
@container style(--screen-width-md: _true){
text-align: left;
}
} .c-card {
overflow: clip;
border-radius: clamp(8px, calc(12 / var(--site-contents-width) * 100vw), 12px);
list-style: none;
} .p-fv {
position: relative;
padding-top: var(--site-spacing-section);
background: var(--site-gradient-main); &::after {
display: block;
position: absolute;
left: 50%;
bottom: 0;
width: 100%;
aspect-ratio: 1440 / 130;
background-color: #fff;
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ0MCIgaGVpZ2h0PSIxMzAiIHZpZXdCb3g9IjAgMCAxNDQwIDEzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTQzNy4wMSAyOS42NDRDNjkxLjQ3OCAyOS42NDQgODQxLjI4MSA3OS41ODY0IDk1Ny44NTEgNzkuNTg2NEMxMDc0LjQyIDc5LjU4NjQgMTA3Mi40NCA2Ni41ODA2IDEyMDcuMzYgNjYuNTgwNkMxMjc2Ljk1IDY2LjU4MDcgMTQxMi4yMiA4OC40MzA1IDE0NDAgMTA5LjI0VjEyOS4zNDJIMFYxMDkuMjRDNDcuNSA4Ny45MTAzIDI1Mi45OCAyOS42NDQxIDQzNy4wMSAyOS42NDRaIiBmaWxsPSJ3aGl0ZSIvPiA8cGF0aCBkPSJNMCA0OS42NDM5QzE1MC4zMTEgOC4yMzc3NyAyODIuMDE5IC0xLjgwNDgxIDM3NiAwLjI1MTMxMkM2NDcuNjc4IDYuMjQyNDQgNzgxLjUgNDkuNjQzOSA5ODkuNSA0OS42NDM5QzEwODIgNDkuNjQzOSAxMDgwLjk4IDI1LjM4NDEgMTI2MSAyNC4yMTQyQzEzMjYuOTggMjMuNzg4OCAxNDA0LjA5IDQ3LjE2MjQgMTQ0MCA0OS42NDM5VjEwOS42NDRDMTQxMi4yMiA4OC44MzQ3IDEyNzYuOTUgNjYuOTg0OCAxMjA3LjM2IDY2Ljk4NDdDMTA3Mi40NCA2Ni45ODQ3IDEwNzQuNDIgNzkuOTkwNiA5NTcuODUxIDc5Ljk5MDZDODQxLjI4MSA3OS45OTA2IDY5MS40NzggMzAuMDQ5MiA0MzcuMDEgMzAuMDQ5MkMyNTIuOTggMzAuMDQ5MiA0Ny41MDAyIDg4LjMxNDQgMCAxMDkuNjQ0VjQ5LjY0MzlaIiBmaWxsPSJ3aGl0ZSIvPiA8L3N2Zz4=);
mask-position: center bottom;
mask-repeat: no-repeat;
mask-size: cover;
translate: -50% 0%;
content: "";
}
.p-fv__inner {
display: grid;
place-items: center;
position: relative;
z-index: 1;
width: min(100% - 2 * var(--site-spacing-base), calc(var(--site-contents-width) * 1px));
margin-inline: auto;
padding-bottom: 2%;
z-index: 10;
opacity: 0;
translate: 0 20px;
animation: c-fadeIn .4s .8s ease-in-out forwards;
}
.p-fv__badge {
position: relative;
margin: 0;
padding: 8px 30px;
border-radius: 100vh;
background-color: var(--site-color-balloon);
color: #fff;
font-size: clamp(13px, calc(15 / var(--site-contents-width) * 100vw), 16px);
font-weight: 500;
text-align: center;
line-height: 1.4;
&::after {
display: block;
position: absolute;
left: 50%;
bottom: -10px;
width: 6px;
height: 16px;
background-color: var(--site-color-balloon);
border-radius: 1000px;
translate: -50% 0;
content: "";
} .p-fv__badge-em {
color: var(--site-color-yellow);
font-size: calc(20 / 16 * 1em);
font-weight: 600;
}
}
.p-fv__title {
position: relative;
margin-block: clamp(28px, calc(40 / var(--site-contents-width) * 100vw), 48px) 0;
.p-fv__title__inner{
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(16px, calc(26 / var(--site-contents-width) * 100vw), 30px);
}
.p-fv__title__label{
width: calc(134 / 375 * 100vw);
margin-inline: auto;
margin-top: 20px;
line-height: 0;
@container style(--screen-width-md: _true){
position: absolute;
right: 0;
top: 0;
width: calc(223 / 862 * 100%);
aspect-ratio: 1;
translate: 72% -66.3%;
margin: 0;
}
}
} .p-fv__title-row {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: clamp(16px, calc(26 / var(--site-contents-width) * 100vw), 30px);
} .p-fv__title-img {
max-width: 100%;
height: auto;
}
.p-fv__title-img--01 {
width: clamp(280px, calc(548 / var(--site-contents-width) * 100vw), 548px);
}
.p-fv__title-img--02 {
width: clamp(160px, calc(276 / var(--site-contents-width) * 100vw), 276px);
}
.p-fv__title-img--03 {
width: clamp(280px, calc(537 / var(--site-contents-width) * 100vw), 537px);
}
.p-fv__lead {
margin-block: clamp(24px, calc(36 / var(--site-contents-width) * 100vw), 40px) 0;
color: var(--site-color-text);
font-size: clamp(13px, calc(16 / var(--site-contents-width) * 100vw), 15px);
line-height: 1.5;
@container style(--screen-width-md: _true){
text-align: center;
}
.p-fv__lead__dash{
display: inline-block;
width: 2em;
height: 1px;
margin-inline: .25em;
margin-bottom: .25em;
background-color: currentColor;
vertical-align: middle;
}
}
.p-fv__buttons {
width: 100%;
margin-block: clamp(24px, calc(36 / var(--site-contents-width) * 100vw), 40px) 0;
} .p-fv__visual {
display: flex;
justify-content: space-between;
align-items: flex-end;
position: relative;
gap: clamp(8px, 3vw, 24px);
width: 100%;
padding-inline: 3%;
z-index: 2;
@container style(--screen-width-lg: _true){
padding-inline: min(calc(40px + (100dvi - 1440px)), 40px);
margin-top: max(calc((-500px / 4) / 100vh * 100%), -150px);
max-width: 1440px;
margin-inline: auto;
}
&::before{
display: block;
position: absolute;
left: 50%;
bottom: -1px;
translate: -50% 0;
width: 100vw;
aspect-ratio: 144 / 10;
background: var(--color-bg-overview);
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ0MCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxNDQwIDEwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTQzNy4wMSAwQzY5MS40NzggMCA4NDEuMjgxIDQ5Ljk0MjQgOTU3Ljg1MSA0OS45NDI0QzEwNzQuNDIgNDkuOTQyNCAxMDcyLjQ0IDM2LjkzNjUgMTIwNy4zNiAzNi45MzY1QzEyNzYuOTUgMzYuOTM2NiAxNDEyLjIyIDU4Ljc4NjUgMTQ0MCA3OS41OTU3Vjk5LjY5ODJIMFY3OS41OTU3QzQ3LjUgNTguMjY2MiAyNTIuOTggNC41MDc0OGUtMDUgNDM3LjAxIDBaIiBmaWxsPSIjNThCOEVDIi8+IDwvc3ZnPg==);
mask-position: center bottom;
mask-repeat: no-repeat;
mask-size: cover;
z-index: 2;
content: "";
@container style(--screen-width-lg: _true){
translate: -50% 0;
}
}
}
.p-fv__people {
position: relative;
flex-shrink: 0;
scale: 0.5;
opacity: 0;
transform-origin: center bottom;
animation: c-popup .6s ease-in-out forwards;
&::after{
display: block;
position: absolute;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
content: "";
scale: 0.2;
opacity: 0;
transform-origin: center bottom;
animation: p-fv-mark-up .4s .5s ease-in-out forwards;
}
}
}
@keyframes p-fv-popup {
0%{
scale: .5;
opacity: 0;
}
60%{
scale: 1.1;
opacity: 1;
}
100%{
scale: 1;
opacity: 1;
}
}
@keyframes p-fv-mark-up {
0%{
scale: 0.2;
opacity: 0;
}
50%{
scale: 1.1;
opacity: 1;
}
80%{
scale: 0.95;
opacity: 1;
}
90%{
scale: 1.05;
opacity: 1;
}
100%{
scale: 1;
opacity: 1;
}
} .p-fv__people--01 {
width: clamp(100px, calc(200 / var(--site-contents-width) * 100vw), 224px);
z-index: 3;
@container style(--screen-width: --sm){
top: 10px;
}
@media (min-width: 1600px){
top: -50px;
}
@media (min-width: 2000px){
top: -100px;
}
&::after{
right: 1%;
top: 1%;
width: calc(62 / 224 * 100%);
aspect-ratio: 62 / 82;
background-image: url(//pai-r.com/wp-content/themes/PAI-R/lp/tenko/img/img_people_fv01_mark.svg);
}
}
.p-fv__people--02 {
top: calc(-100vw / 72);
width: clamp(120px, calc(260 / var(--site-contents-width) * 100vw), 285px);
z-index: 1;
@container style(--screen-width: --sm){
top: 9px;
}
&::after{
left: 1%;
top: 1%;
width: calc(49 / 285 * 100%);
aspect-ratio: 49 / 99;
background-image: url(//pai-r.com/wp-content/themes/PAI-R/lp/tenko/img/img_people_fv02_mark.svg);
}
} .p-overview {
--p-overview-flow-no:  #2B617E;
--p-overview-flow-yes: var(--site-color-yellow);
--p-overview-flow-thickness: 8px; --p-overview-flow-stub: clamp(30px, calc(20 / var(--site-contents-width) * 100vw), 36px);
position: relative;
z-index: 10;
.p-overview__bg{
position: relative;
width: 200%;
margin-inline: calc(50% - 100dvi);
border-radius: 0% 0% 100% 100% / 0% 0% 10% 10%;
corner-shape: square square round round;
overflow: hidden;
background-color: var(--color-bg-overview);
z-index: -1;
&::before{
display: block;
position: absolute;
left: 50%;
bottom: 0;
width: 100dvi;
height: 100%;
translate: -50% 0;
background-image: 
url(//pai-r.com/wp-content/themes/PAI-R/lp/tenko/img/bg_chart_left.png),
url(//pai-r.com/wp-content/themes/PAI-R/lp/tenko/img/bg_chart_right.png);
background-repeat: no-repeat;
background-position: left 10%, right bottom;
background-size: calc(500 / var(--site-max-width) * 100vw) auto, calc(949 / var(--site-max-width) * 100vw) auto;
mix-blend-mode: multiply;
z-index: 2;
content: "";
}
@container style(--screen-width-md: _true){
border-radius: 0% 0% 60% 60% / 0% 0% 30% 30%;
}
}
.p-overview__container{
position: relative;
padding-top: clamp(40px, calc(90 / var(--site-max-width) * 100vw), 100px);
color: #fff;
padding-bottom: clamp(228px, calc(289 / var(--site-contents-width) * 100vw), 289px);
width: 100dvi;
margin-inline: calc(50% - 50dvi);
}
.p-overview__inner {
position: relative;
z-index: 10;
width: min(100% - 2 * var(--site-spacing-base), calc(var(--site-contents-width) * 1px));
margin-inline: auto;
.p-overview__flow,.p-overview__result,.p-overview__cards{
opacity: 0;
translate: 0 20px;
}
&.is-show{
.p-overview__flow,.p-overview__result{
animation: c-fadeIn .5s .25s ease-in-out forwards;
}
.p-overview__cards{
animation: c-fadeIn .5s .5s ease-in-out forwards;
}
}
}
.p-overview__title {
margin-block: 0 clamp(40px, calc(56 / var(--site-contents-width) * 100vw), 72px);
text-align: center;
.p-overview__title__en{
width: 100vw;
margin: 0;
margin-left: calc(50% - 50vw);
color: rgba(255, 255, 255, .15);
font-size: clamp(64px, calc(100 / var(--site-contents-width) * 100vw), 130px);
font-family: var(--site-font-family-en);
font-weight: 600;
white-space: nowrap;
line-height: 1;
}
.p-overview__title__ja{
margin: -1.2em 0 1.5em;
font-size: clamp(28px, calc(36 / var(--site-contents-width) * 100vw), 40px);
font-weight: 600;
.p-overview__title__em{
color: var(--site-color-yellow);
font-size: calc(48 / 40 * 1em);
}
}
}
} .p-overview__flow {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto clamp(68PX, calc(80 / var(--site-contents-width) * 100vw), 86px) auto clamp(68px, calc(80 / var(--site-contents-width) * 100vw), 86px);
position: relative;
} .p-overview__question {
display: flex;
align-items: center;
position: relative;
gap: clamp(8px, calc(12 / var(--site-contents-width) * 100vw), 16px);
width: max-content;
z-index: 2;
padding: clamp(10px, calc(14 / var(--site-contents-width) * 100vw), 18px) clamp(16px, calc(24 / var(--site-contents-width) * 100vw), 30px);
border-radius: 8px;
background-color: #fff;
color: var(--site-color-text);
font-size: clamp(13px, calc(18 / var(--site-contents-width) * 100vw), 20px);
font-weight: 500;
line-height: 1.4;
box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}
.p-overview__question--q1 {
grid-column: 1 / 13;
grid-row: 1;
margin-inline: auto;
}
.p-overview__question--q2 {
grid-column: 1 / 9;
grid-row: 3;
margin-inline: auto;
}
.p-overview__question-no {
flex-shrink: 0;
padding-right: clamp(8px, calc(12 / var(--site-contents-width) * 100vw), 16px);
border-right: 1px solid var(--site-color-muted);
color: var(--site-color-text);
font-family: var(--site-font-family-en);
font-size: clamp(15px, calc(24 / var(--site-contents-width) * 100vw), 24px);
font-weight: 600;
line-height: 1;
}
.p-overview__question-text {
margin: 0;
white-space: pre;
} .p-overview__answer {
display: inline-flex;
justify-content: center;
align-items: center;
z-index: 2;
align-self: center;
justify-self: center;
position: relative;
padding: 5px 12px;
border-radius: 999px;
font-family: var(--site-font-family-en);
font-size: clamp(16px, calc(22 / var(--site-contents-width) * 100vw), 26px);
font-weight: 700;
line-height: 1;
z-index: 1;
translate: 0 -.2em;
&.p-overview__answer--q1-no {
grid-column: 4 / 7;
grid-row: 2;
background-color: var(--p-overview-flow-no);
color: #fff;
}
&.p-overview__answer--q1-yes {
grid-column: 7 / 11;
grid-row: 2;
background-color: var(--p-overview-flow-yes);
color: #8B760D;
}
&.p-overview__answer--q2-yes {
grid-column: 2 / 5;
grid-row: 4;
background-color: var(--p-overview-flow-yes);
color: #8B760D;
@container style(--screen-width-md: _true){
grid-column: 3 / 5;
}
}
&.p-overview__answer--q2-no {
grid-column: 4 / 9;
grid-row: 4;
background-color: var(--p-overview-flow-no);
color: #fff;
@container style(--screen-width-md: _true){
grid-column: 4 / 8;
}
}
} .p-overview__line {
z-index: 1;
pointer-events: none; &.p-overview__line--q1-stub {
grid-column: 1 / 13;
grid-row: 2;
justify-self: center;
align-self: start;
width: var(--p-overview-flow-thickness);
height: var(--p-overview-flow-stub);
background-color: var(--p-overview-flow-no);
translate: 50% 0;
} &.p-overview__line--q1-no {
grid-column: 4 / 7;
grid-row: 2 / 4;
justify-self: start;
align-self: stretch;
width: 100%;
margin-top: var(--p-overview-flow-stub);
margin-inline: auto;
border-top:  var(--p-overview-flow-thickness) solid var(--p-overview-flow-no);
border-left: var(--p-overview-flow-thickness) solid var(--p-overview-flow-no);
} &.p-overview__line--q1-yes {
grid-column: 7 / 11;
grid-row: 2 / 5;
justify-self: start;
align-self: stretch;
width: 100%;
margin-top: var(--p-overview-flow-stub);
border-top: var(--p-overview-flow-thickness) solid var(--p-overview-flow-yes);
border-right: var(--p-overview-flow-thickness) solid var(--p-overview-flow-yes);
} &.p-overview__line--q2-stub {
grid-column: 1 / 9;
grid-row: 4;
justify-self: center;
align-self: start;
width: var(--p-overview-flow-thickness);
height: var(--p-overview-flow-stub);
background-color: var(--p-overview-flow-no);
} &.p-overview__line--q2-yes {
grid-column: 3 / 5;
grid-row: 4 / 5;
justify-self: start;
align-self: stretch;
width: 100%;
margin-top: var(--p-overview-flow-stub);
border-top:  var(--p-overview-flow-thickness) solid var(--p-overview-flow-yes);
border-left: var(--p-overview-flow-thickness) solid var(--p-overview-flow-yes);
} &.p-overview__line--q2-no {
grid-column: 5 / 7;
grid-row: 4 / 5;
justify-self: start;
align-self: stretch;
width: 100%;
margin-top: var(--p-overview-flow-stub);
border-top:   var(--p-overview-flow-thickness) solid var(--p-overview-flow-no);
border-right: var(--p-overview-flow-thickness) solid var(--p-overview-flow-no);
}
} .p-overview__cards {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
@container style(--screen-width-md: _true){
grid-template-columns: repeat(3, 1fr);
}
} .p-overview__result{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5%;
margin-bottom: 40px;
@container style(--screen-width-md: _true){
display: none;
}
}
.p-overview__resultBox{
a{
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: 53 / 40;
border-radius: 4px;
font-size: 20px;
font-weight: 600;
text-align: center;
text-decoration: none;
}
&.is-method-it{
background-color: var(--site-color-green);
}
&.is-method-remote{
background-color: var(--site-color-blue);
}
&.is-method-auto{
background-color: var(--site-color-orange);
}
} .p-overviewBlock {
--p-overviewBlock-bg: var(--site-color-it-title-bg);
--p-overviewBlock-title-bg: var(--site-color-it-title-bg);
container: overviewBlock inline-size;
display: flex;
flex-direction: column;
background-color: var(--p-overviewBlock-bg);
color: #fff;
scroll-margin-top: 10px;
&.is-method-it {
--p-overviewBlock-bg: var(--site-color-green);
--p-overviewBlock-title-bg: var(--site-color-it-title-bg);
.p-overviewBlock__text{
strong{
color: var(--site-color-it-text);
}
}
}
&.is-method-remote {
--p-overviewBlock-bg: var(--site-color-blue);
--p-overviewBlock-title-bg: var(--site-color-remote-title-bg);
.p-overviewBlock__text{
strong{
color: var(--site-color-remote-text);
}
}
}
&.is-method-auto {
--p-overviewBlock-bg: var(--site-color-orange);
--p-overviewBlock-title-bg: var(--site-color-auto-title-bg);
.p-overviewBlock__text{
strong{
color: var(--site-color-auto-text);
}
}
}
.p-overviewBlock__header {
padding: clamp(10px, calc(14 / var(--site-contents-width) * 100vw), 18px);
background-color: var(--p-overviewBlock-title-bg);
text-align: center;
}
.p-overviewBlock__label {
font-size: clamp(15px, calc(22 / var(--site-contents-width) * 100vw), 24px);
font-weight: 600;
}
.p-overviewBlock__inner {
display: flex;
flex-direction: column;
gap: 20px;
flex: 1;
padding: 20px 10px;
flex-grow: 1;
}
.p-overviewBlock__titleBlock{
display: flex;
flex-direction: column;
gap: 8px;
flex-grow: 1;
padding-inline: clamp(8px, calc(14 / var(--site-contents-width) * 100vw), 15px);
}
.p-overviewBlock__heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(8px, 1vw, 16px);
flex-grow: 1;
margin: 0;
white-space: nowrap;
}
.p-overviewBlock__title {
margin: 0;
color: #fff;
font-size: clamp(24px, calc(30 / var(--site-contents-width) * 100vw), 36px); line-height: 1;
}
.p-overviewBlock__year {
margin: 0;
color: rgba(255, 255, 255, .7);
font-size: clamp(12px, calc(14 / var(--site-contents-width) * 100vw), 15px);
font-weight: 500;
text-align: right;  
line-height: 1.3;
}
.p-overviewBlock__year-num {
font-family: var(--site-font-family-en);
font-size: clamp(16px, calc(18 / var(--site-contents-width) * 100vw), 20px);
}
.p-overviewBlock__year-small {
font-size: clamp(10px, calc(11 / var(--site-contents-width) * 100vw), 12px);
}
.p-overviewBlock__lead {
margin: 0;
font-size: clamp(15px, calc(16 / var(--site-contents-width) * 100vw), 16px);
font-weight: 500;
line-height: 1.6;
span{
font-size: calc(13 / 16 * 1em);
}
}
.p-overviewBlock__box{
overflow: hidden;
border-radius: 8px;
background-color: #fff;
color: var(--site-color-text);
}
.p-overviewBlock__figure {
line-height: 0;
}
.p-overviewBlock__text {
padding: clamp(15px, calc(20 / var(--site-contents-width) * 100vw), 20px);
font-size: clamp(12px, calc(14 / var(--site-contents-width) * 100vw), 15px);
line-height: 1.7;
}
.p-overviewBlock__more {
display: inline-flex;
align-items: center;
justify-content: center;
gap: clamp(8px, calc(12 / var(--site-contents-width) * 100vw), 16px);
color: #fff;
font-family: var(--site-font-family-en);
font-size: clamp(15px, calc(20 / var(--site-contents-width) * 100vw), 22px);
font-weight: 600;
letter-spacing: 0;
text-decoration: none;
transition: 0.3s;
&::after {
display: block;
width: clamp(14px, calc(18 / var(--site-contents-width) * 100vw), 22px);
height: clamp(14px, calc(18 / var(--site-contents-width) * 100vw), 22px);
background-color: currentColor;
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMyAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTkuOTg1MjQgMTkuMDYwN0MxMC41NzEgMTkuNjQ2NCAxMS41MjA4IDE5LjY0NjQgMTIuMTA2NiAxOS4wNjA3TDIxLjY1MjUgOS41MTQ3MkMyMi4yMzgzIDguOTI4OTMgMjIuMjM4MyA3Ljk3OTE4IDIxLjY1MjUgNy4zOTM0QzIxLjA2NjcgNi44MDc2MSAyMC4xMTcgNi44MDc2MSAxOS41MzEyIDcuMzkzNEwxMS4wNDU5IDE1Ljg3ODdMMi41NjA2MiA3LjM5MzRDMS45NzQ4MyA2LjgwNzYxIDEuMDI1MDggNi44MDc2MSAwLjQzOTI5NyA3LjM5MzRDLTAuMTQ2NDkgNy45NzkxOCAtMC4xNDY0OSA4LjkyODkzIDAuNDM5Mjk3IDkuNTE0NzJMOS45ODUyNCAxOS4wNjA3Wk0xMS4wNDU5IDBMOS41NDU5IDBMOS41NDU5IDE4SDExLjA0NTlIMTIuNTQ1OUwxMi41NDU5IDBMMTEuMDQ1OSAwWiIgZmlsbD0id2hpdGUiLz4gPC9zdmc+);
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
content: "";
transition: 0.3s;
}
@media (hover) {
&:hover {
opacity: 0.8;
&::after {
rotate: 360deg;
}
}
}
}
}
.p-overviewBlock__figure > img {
display: block;
width: 100%;
height: auto;
} .p-overviewCta {
--p-overviewCta-badge-bg: #fff;
position: relative;
z-index: 11;
width: min(100% - 2 * var(--site-spacing-base), calc(var(--site-contents-width) * 1px));
margin-inline: auto;
color: var(--site-color-text);
margin-bottom: clamp( -170px, calc(-150 / var(--site-contents-width) * 100vw), -130px);
translate: 0 -50%;
@container style(--screen-width-md: _true){
}
.p-overviewCta__card {
position: relative;
padding: clamp(36px, calc(48 / var(--site-contents-width) * 100vw), 60px) clamp(20px, calc(40 / var(--site-contents-width) * 100vw), 48px) clamp(20px, calc(40 / var(--site-contents-width) * 100vw), 48px);
border-radius: clamp(16px, calc(24 / var(--site-contents-width) * 100vw), 28px);
background-image: var(--site-gradient-main);
@container style(--screen-width-md: _true){
padding-right: 300px;
}
&.is-show{
.p-overviewCta__badge{
opacity: 0;
scale: .5;
animation: c-popup .5s .5s ease-in-out forwards;
}
}
}
.p-overviewCta__badge {
position: absolute;
left: 50%;
top: 0;
margin: 0;
padding: .7em clamp(24px, calc(32 / var(--site-contents-width) * 100vw), 36px) 0.6em;
border: 3px solid var(--site-color-balloon);
border-radius: 100vh;
background-color: var(--p-overviewCta-badge-bg);
color: var(--site-color-balloon);
font-size: clamp(14px, calc(20 / var(--site-contents-width) * 100vw), 24px);
font-weight: 600;
line-height: 1;
white-space: nowrap;
box-shadow: var(--site-shadow-md);
translate: -50% -80%;
transform-origin: center bottom;
&::after {
display: block;
position: absolute;
left: 50%;
bottom: 0;
width: 1em;
height: 1em;
border-left: 3px solid var(--site-color-balloon);
border-bottom: 3px solid var(--site-color-balloon);
background-color: var(--p-overviewCta-badge-bg);
rotate: -54deg;
translate: -50% 62%;
transform: skewX(-15deg);
content: "";
}
}
.p-overviewCta__body {
display: grid;
grid-template-columns: 1fr;
align-items: center;
gap: clamp(16px, calc(24 / var(--site-contents-width) * 100vw), 32px);
@container style(--screen-width-md: _true){
grid-template-columns: 1fr auto;
}
}
.p-overviewCta__title {
font-size: clamp(16px, calc(24 / var(--site-contents-width) * 100vw), 26px);
line-height: 1.5;
}
.p-overviewCta__title-em {
color: var(--site-color-blue);
font-size: clamp(18px, calc(32 / var(--site-contents-width) * 100vw), 36px);
font-weight: 700;
}
.p-overviewCta__lead {
margin-block: clamp(8px, calc(16 / var(--site-contents-width) * 100vw), 20px) 0;
font-size: clamp(13px, calc(16 / var(--site-contents-width) * 100vw), 18px);
}
.p-overviewCta__buttons {
justify-content: flex-start;
margin-top: 20px;
}
.p-overviewCta__visual {
display: none;
@container style(--screen-width-md: _true){
display: block;
position: absolute;
right: 5%;
bottom: 0;
width: clamp(220px, calc(310 / var(--site-contents-width) * 100vw), 310px);
line-height: 0;
}
}
} .p-methods {
position: relative;
padding-block: var(--site-spacing-section);
background-color: #fff;
color: var(--site-color-text);
.p-methods__inner {
width: min(100% - 2 * var(--site-spacing-base), calc(var(--site-contents-width) * 1px));
margin-inline: auto;
}
.p-methods__title__head {
position: relative;
margin-block: 0 clamp(40px, calc(60 / var(--site-contents-width) * 100vw), 50px);
z-index: 1; &::after {
display: block;
position: absolute;
right: -5%;
bottom: 0;
width: min(calc(120 / var(--site-min-width) * 100vw), 300px);
aspect-ratio: 1 / 1;
background-image: url(//pai-r.com/wp-content/themes/PAI-R/lp/tenko/img/illust_methods.png);
background-repeat: no-repeat;
background-position: right bottom;
background-size: contain;
z-index: 1;
content: "";
@container style(--screen-width-lg: _true){
bottom: -35%;
}
}
}
.p-methods__lead {
margin-block: clamp(12px, calc(16 / var(--site-contents-width) * 100vw), 24px) 0;
color: var(--site-color-text);
font-size: min(calc(13 / var(--site-min-width) * 100vw), 16px);
}
}
.p-methods__title {
--method-title-size-en: min(calc(30 / var(--site-min-width) * 100vw), 64px);
--method-title-size-num: min(calc(72 / var(--site-min-width) * 100vw), 160px);
--method-title-size-jp: min(calc(13 / var(--site-min-width) * 100vw), 20px);
position: relative;
}
.p-methods__title__en {
display: flex;
align-items: baseline;
gap: clamp(6px, calc(10 / var(--site-contents-width) * 100vw), 12px);
font-family: var(--site-font-family-en);
font-size: var(--method-title-size-en);
font-weight: 700;
line-height: 1;
}
.p-methods__title__num {
font-size: var(--method-title-size-num);
line-height: 1;
}
.p-methods__title__jp {
position: absolute;
left: calc(var(--method-title-size-num) * 3 / 5 + clamp(6px, calc(10 / var(--site-contents-width) * 100vw), 12px)); bottom: var(--method-title-size-en);
font-size: var(--method-title-size-jp);
margin-bottom: 2%;
} .p-method {
--site-method-radius: clamp(10px, calc(20 / var(--site-contents-width) * 100vw), 20px);
width: 100vw;
margin-block: clamp(24px, calc(40 / var(--site-contents-width) * 100vw), 56px) 0;
margin-inline: calc(50% - 50vw);
scroll-margin: 40px;
&.is-method-it {
.p-method__container{
background-color: var(--site-color-green);
}
.p-method__header{
background-color: var(--site-color-it-title-bg);
}
.p-method__figure{
background-color: var(--site-color-it-figure-bg);
}
.p-method__heading__sub {
color: var(--site-color-it-text);
}
.p-method__pointBlock__num {
background-color: var(--site-color-it-point-bg);
}
.p-method__pointBlock__title strong {
color: var(--site-color-it-text);
}
}
&.is-method-remote {
.p-method__container{
background-color: var(--site-color-blue);
}
.p-method__header{
background-color: var(--site-color-remote-title-bg);
}
.p-method__figure{
background-color: var(--site-color-remote-figure-bg);
}
.p-method__heading__sub {
color: var(--site-color-remote-text);
}
.p-method__pointBlock__num {
background-color: var(--site-color-remote-text);
}
.p-method__pointBlock__title strong {
color: var(--site-color-remote-text);
}
.p-method__note {
background-color: var(--site-color-remote-caution-bg);
}
}
&.is-method-auto {
.p-method__container{
background-color: var(--site-color-orange);
}
.p-method__header{
background-color: var(--site-color-auto-title-bg);
}
.p-method__figure{
background-color: var(--site-color-auto-figure-bg);
}
.p-method__heading__sub {
color: var(--site-color-auto-text);
}
.p-method__pointBlock__num {
background-color: var(--site-color-auto-text);
}
.p-method__pointBlock__title strong {
color: var(--site-color-auto-text);
}
.p-method__note {
background-color: var(--site-color-auto-title-bg);
}
.p-method__noteText {
display: flex;
align-items: center;
gap: clamp(15px, calc(18 / var(--site-contents-width) * 100vw), 20px);
&::before {
display: block;
width: clamp(36px, calc(46 / var(--site-contents-width) * 100vw), 50px);
flex-shrink: 0;
aspect-ratio: 1;
background-image: url(//pai-r.com/wp-content/themes/PAI-R/lp/tenko/img/icon_caution.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
content: "";
}
}
} &:nth-of-type(odd) {
.p-method__container{
@container style(--screen-width-md: _true){
margin-right: calc(40 / 1440 * 100%);
grid-template-columns: 1fr 80px;
border-radius: 0 var(--site-method-radius) var(--site-method-radius) 0;
translate: calc(80px - 100%) 0;
}
}
.p-method__body {
@container style(--screen-width-md: _true) {
margin-left: auto;
margin-right: 5%;
flex-direction: row-reverse;
order: -1;
}
@media (min-width: 1500px) {
margin-inline: auto;
}
}
}
&:nth-of-type(even) {
.p-method__container{
@container style(--screen-width-md: _true){
margin-left: calc(40 / 1440 * 100%);
grid-template-columns: 80px 1fr;
border-radius: var(--site-method-radius) 0 0 var(--site-method-radius);
translate: calc(100% - 80px) 0;
}
}
.p-method__body {
@container style(--screen-width-md: _true) {
margin-right: auto;
margin-left: 5%;
}
@media (min-width: 1500px) {
margin-inline: auto;
}
}
}
.p-method__container{
position: relative;
display: grid;
grid-template-columns: 1fr;
overflow: hidden;
border-radius: var(--site-method-radius);
color: #fff;
&.is-show{
.p-method__heading__sub{
animation: c-popup .5s .5s ease-in-out forwards;
}
}
@container style(--screen-width: --sm) {
opacity: 0;
translate: -20px 0;
&.is-show{
animation: c-fadeIn .5s ease-in-out forwards;
}
}
@container style(--screen-width-md: _true) {
&.is-show{
translate: 0 0;
transition: .5s;
}
}
}
.p-method__header {
display: flex;
align-items: center;
gap: clamp(8px, calc(12 / var(--site-contents-width) * 100vw), 16px);
margin: 0;
padding: clamp(10px, calc(20 / var(--site-contents-width) * 100vw), 25px) clamp(20px, calc(20 / var(--site-contents-width) * 100vw), 25px);
color: #fff;
font-family: var(--site-font-family-en);
font-size: clamp(14px, calc(18 / var(--site-contents-width) * 100vw), 22px);
letter-spacing: 0;
text-transform: uppercase;
line-height: 1;
.p-method__no{
font-weight: 600;
}
@container style(--screen-width-md: _true) {
writing-mode: vertical-rl;
.p-method__no{
rotate: -90deg;
}
}
}
.p-method__body {
display: flex;
flex-direction: column;
width: calc(335 / 375 * 100%);
max-width: 1140px;
margin-inline: auto;
padding-block: clamp(40px, calc(60 / var(--site-contents-width) * 100vw), 80px);
gap: clamp(20px, calc(40 / var(--site-contents-width) * 100vw), 40px) clamp(20px, calc(60 / var(--site-contents-width) * 100vw), 80px);
@container style(--screen-width-md: _true) {
flex-direction: row;
flex-wrap: wrap;
align-items: end;
}
}
.p-method__figure {
display: flex;
justify-content: center;
align-items: center;
flex-basis: calc(500 / 1140 * 100%);
padding: clamp(30px, calc(40 / 375 * 100vw), 40px);
border-radius: clamp(6px, calc(8 / var(--site-contents-width) * 100vw), 10px);
background-color: #fff;
}
.p-method__desc {
display: contents;
@container style(--screen-width-md: _true){
display: flex;
flex-direction: column;
gap: clamp(20px, calc(40 / var(--site-contents-width) * 100vw), 40px);
flex: 1;
}
}
.p-method__heading {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
line-height: 1;
order: -1;
}
.p-method__heading__sub {
position: relative;
padding: clamp(6px, calc(10 / var(--site-contents-width) * 100vw), 10px) clamp(12px, calc(16 / var(--site-contents-width) * 100vw), 20px);
border-radius: 100vh;
background-color: #fff;
font-size: clamp(13px, calc(14 / var(--site-contents-width) * 100vw), 14px);
font-weight: bold;
opacity: 0;
scale: .5;
&::after{
display: block;
position: absolute;
left: 3em;
bottom: 0;
width: 8px;
height: 10px;
background-color: #fff;
border-radius: 1000px;
translate: 0 75%;
content: "";
}
}
.p-method__heading__main {
margin: 0;
color: #fff;
font-size: clamp(26px, calc(40 / var(--site-contents-width) * 100vw), 40px);
line-height: 1.2;
}
.p-method__points {
display: flex;
flex-direction: column;
gap: 7px;
list-style: none;
}
} .p-method__pointBlock {
display: flex;
align-items: stretch;
background-color: #fff;
color: var(--site-color-text);
padding: 10px;
gap: clamp(16px, calc(20 / var(--site-contents-width) * 100vw), 20px);
}
.p-method__pointBlock__num {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: clamp(34px, calc(45 / var(--site-contents-width) * 100vw), 50px);
padding: clamp(8px, calc(10 / var(--site-contents-width) * 100vw), 12px);
border-radius: 6px;
color: #fff;
font-family: var(--site-font-family-en);
font-size: clamp(22px, calc(26 / var(--site-contents-width) * 100vw), 30px);
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
}
.p-method__pointBlock__num > span {
font-size: clamp(9px, calc(10 / var(--site-contents-width) * 100vw), 11px);
letter-spacing: 0;
text-transform: uppercase;
}
.p-method__pointBlock__texts {
display: flex;
flex-direction: column;
gap: clamp(4px, calc(6 / var(--site-contents-width) * 100vw), 8px);
flex: 1;
}
.p-method__pointBlock__title {
margin: 0;
font-size: clamp(16px, calc(18 / var(--site-contents-width) * 100vw), 20px);
line-height: 1.4;
}
.p-method__pointBlock__text {
margin: 0;
font-size: clamp(12px, calc(14 / var(--site-contents-width) * 100vw), 14px);
font-weight: 400;
line-height: 1.6;
strong{
font-weight: bold;
}
} .p-method__note {
display: flex;
align-items: center;
width: 100%;
gap: clamp(20px, calc(30 / var(--site-contents-width) * 100vw), 40px);
padding: clamp(16px, calc(20 / var(--site-contents-width) * 100vw), 24px);
border-radius: clamp(6px, calc(8 / var(--site-contents-width) * 100vw), 10px);
color: #fff;
@container style(--screen-width: --sm){ 
flex-direction: column;
gap: 8px;
}
}
.p-method__noteLabel {
flex-shrink: 0;
margin: 0;
font-family: var(--site-font-family-en);
font-size: clamp(18px, calc(20 / var(--site-contents-width) * 100vw), 24px);
font-weight: bold;
letter-spacing: 0.05em;
}
.p-method__noteText {
margin: 0;
font-size: clamp(13px, calc(16 / var(--site-contents-width) * 100vw), 16px);
line-height: 1.7;
} .p-compare{
padding-block: clamp(80px, calc(100 / var(--site-contents-width) * 100vw), 120px);
background: var(--site-gradient-main);
}
.p-compare__inner{
display: flex;
flex-direction: column;
gap: clamp(30px, calc(50 / var(--site-contents-width) * 100vw), 60px);
}
.p-compare__head{
padding-inline: var(--site-spacing-base);
.p-compare__notes{
margin-top: 1em;
text-align: center;
}
}
.p-compare__title{
display: grid;
grid-template-columns: 1fr;
text-align: center;
font-weight: bold;
.p-compare__title__en{
font-size: clamp(16px, calc(20 / var(--site-contents-width) * 100vw), 24px);
}
.p-compare__title__ja{
font-size: clamp(32px, calc(40 / var(--site-contents-width) * 100vw), 48px);
}
}
.p-compare__notes{
color: var(--site-color-muted);
font-size: clamp(11px, calc(12 / var(--site-contents-width) * 100vw), 12px);
font-weight: 400;
} .p-compareTableScrollHint{
position: relative;
width: 100%;
margin-inline: auto;
&+.p-compare__notes{
width: clac(100% - var(--site-spacing-base));
max-width: 1200px;
margin-inline: auto;
padding-inline: 20px;
box-sizing: content-box;
} }
.p-compareTableScrollHint__icon{
display: none;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
width: 220px;
height: auto;
pointer-events: none;
opacity: 1;
transform: translate(-50%, -50%);
transition: opacity .3s;
@media (hover: none) and (pointer: coarse){
display: block;
}
.p-compareTableScrollHint.is-scrolled &{
opacity: 0;
}
}
.p-compareTableWrap{
width: 100%;
overflow-x: auto;
overscroll-behavior-x: contain;
&::-webkit-scrollbar{
height: 8px;
}
&::-webkit-scrollbar-thumb {
background-color: var(--site-color-muted);
}
}
.p-compareTable{
display: grid;
grid-template-columns: clamp(150px, calc(200 / var(--site-contents-width) * 100vw), 210px) repeat(3, minmax(260px, 1fr));
grid-template-rows: auto repeat(9, 1fr);
gap: 0 10px;
width: max-content;
max-width: 1200px;
margin-inline: auto;
padding-inline: 20px;
padding-block: 14px;
color: var(--site-color-text);
font-size: clamp(12px, calc(15 / var(--site-contents-width) * 100vw), 16px);
line-height: 1.6;
@container style(--screen-width-lg: _true){
width: 1200px;
padding-inline: 0;
}
.p-compareTable__labels{
display: grid;
grid-row: 1 / -1;
grid-template-rows: subgrid;
padding-right: 10px;
}
.p-compareTable__label{
display: flex;
justify-content: center;
align-items: center;
padding: clamp(8px, calc(12 / var(--site-contents-width) * 100vw), 16px) clamp(4px, calc(8 / var(--site-contents-width) * 100vw), 12px);
border-bottom: 1px solid #E5E5E5;
color: var(--site-color-text);
font-size: clamp(12px, calc(15 / var(--site-contents-width) * 100vw), 16px);
font-weight: 700;
text-align: center;
}
.p-compareTable__card{
display: grid;
grid-row: 1 / -1;
grid-template-rows: subgrid;
border-radius: clamp(8px, calc(12 / var(--site-contents-width) * 100vw), 16px);
background-color: var(--site-color-white);
box-shadow: 0 0 14px rgba(0, 0, 0, .14);
overflow: clip; &.p-compareTable__card--it{
--site-color-card-head: var(--site-color-green);
animation-delay: 0.2s;
}
&.p-compareTable__card--remote{
--site-color-card-head: var(--site-color-blue);
animation-delay: 0.4s;
}
&.p-compareTable__card--auto{
--site-color-card-head: var(--site-color-orange);
animation-delay: 0.6s;
}
}
.p-compareTable__head{
display: flex;
justify-content: center;
align-items: center;
padding: clamp(14px, calc(22 / var(--site-contents-width) * 100vw), 24px) clamp(6px, calc(12 / var(--site-contents-width) * 100vw), 16px);
background-color: var(--site-color-card-head);
color: var(--site-color-white);
font-size: clamp(14px, calc(18 / var(--site-contents-width) * 100vw), 20px);
font-weight: 700;
text-align: center;
}
.p-compareTable__list{
display: grid;
grid-row: 2 / -1;
grid-template-rows: subgrid;
}
.p-compareTable__cell{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 1em .5em;
font-size: 0.93em;
text-align: center;
&:nth-child(odd){
background-color: var(--site-color-table-stripe);
}
strong{
font-weight: 700;
}
}
}  .p-compareTable-badge{
&::before{
content: "";
display: inline-block;
width: 1.25em;
height: 1.25em;
margin-right: .5em;
border-radius: 50%;
background-color: var(--site-color-muted);
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxNiAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTAuNzMyNDIyIDIuNzE5NzNMNi40Njg4IDguODkzNDVMMTUuMjUxOCAwLjczMjU5NCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIi8+IDwvc3ZnPg==);
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
background-size: 65% 65%;
}
} .p-compareTable-bad{
&::before{
content: "";
display: inline-block;
width: 1.25em;
height: 1.25em;
margin-right: .5em;
border-radius: 50%;
background-color: var(--site-color-muted);
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPGxpbmUgeDE9IjQuMjgyMTUiIHkxPSIxMi44MzY5IiB4Mj0iMTIuODM2MSIgeTI9IjQuMjgyODgiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIvPiA8bGluZSB4MT0iNC4yNzA1OCIgeTE9IjQuMjgyNjciIHgyPSIxMi44MjQ2IiB5Mj0iMTIuODM2NyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIi8+IDwvc3ZnPg==);
background-repeat: no-repeat;
background-position: center;
background-size: 80% 80%;
vertical-align: middle;
}
} .p-compareTable-red{
color: var(--site-color-red);
font-weight: 700;
&.p-compareTable-badge,
&.p-compareTable-bad{
&::before{
background-color: var(--site-color-red);
}
}
} .p-compareTable-mark{
color: var(--site-color-red);
font-weight: 700;
text-decoration: underline;
text-decoration-color: var(--site-color-red);
text-underline-offset: 0.15em;
&.p-compareTable-badge,
&.p-compareTable-bad{
&::before{
background-color: var(--site-color-red);
}
}
} .p-compareTable-large{
font-size: calc(18 / 15 * 1em);
font-weight: bold;
} .p-compareTable-note{
display: block;
margin-block-start: 0.4em;
font-size: calc(12 / 15 * 1em);
line-height: 1.5;
} .p-faq {
--p-faq-q-bg: var(--site-color-green);
--p-faq-a-bg: var(--site-color-blue);
padding-block: var(--site-spacing-section);
.p-faq__inner {
display: grid;
grid-template-columns: 1fr;
gap: clamp(40px, calc(50 / var(--site-contents-width) * 100vw), 60px);
width: min(100% - 2 * var(--site-spacing-base), calc(var(--site-contents-width) * 1px));
margin-inline: auto;
@container style(--screen-width-md: _true){
grid-template-columns: 1fr calc(960 / var(--site-contents-width) * 100%);
align-items: start;
}
}
.c-sectionTitle {
align-items: flex-start;
text-align: left;
white-space: nowrap;
}
} .p-faq__item {
display: flex;
flex-direction: column;
gap: clamp(6px, calc(10 / var(--site-contents-width) * 100vw), 10px); &:not(:first-child){
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #E7E7E7;
}
}
.p-faq__question,
.p-faq__answer {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
gap: clamp(18px, calc(28 / var(--site-contents-width) * 100vw), 30px);
margin: 0;
}
.p-faq__question {
align-items: center;
}
.p-faq__label {
display: flex;
justify-content: center;
align-items: center;
position: relative;
flex-shrink: 0;
width: clamp(37px, calc(46 / var(--site-contents-width) * 100vw), 48px);
height: clamp(37px, calc(46 / var(--site-contents-width) * 100vw), 48px);
border-radius: 8px;
color: var(--site-color-white);
font-family: var(--site-font-family-en);
font-size: clamp(24px, calc(30 / var(--site-contents-width) * 100vw), 32px); 
font-weight: 700;
line-height: 1;
&::before{
display: block;
position: absolute;
top: 50%;
width: clamp(12px, calc(14 / var(--site-contents-width) * 100vw), 15px);
aspect-ratio: 1;
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTE1LjI5NzkgMEMxNS4yOTc5IDAgMTAuNDk4NyA0LjIyNjA3IDYuNzA3MTMgNi4xMjA0NEMxLjMzNzg2IDguODAzMDYgMC4wMDA1MjI0NTggOS40OTE4IDAuMDAwNDg1MDYzIDEwLjgwMDhDMC4wMDA0NDc2NjcgMTIuMTA5OCAxLjY4NTY5IDEzLjY4MSA3LjU4MzczIDE0Ljc2MTFDMTIuNzA3OCAxNS42OTk0IDE1LjI5NzkgMTUuMTIxMSAxNS4yOTc5IDE1LjEyMTFWMFoiIGZpbGw9IiM0OEM5RDQiLz4gPC9zdmc+);
mask-repeat: no-repeat;
mask-size: contain;
content: "";
}
&.p-faq__label--q {
background-color: var(--p-faq-q-bg);
&::before{
right: 95%;
background-color: var(--p-faq-q-bg);
}
}
&.p-faq__label--a {
background-color: var(--p-faq-a-bg);
&::before{
left: 95%;
background-color: var(--p-faq-a-bg);
transform: rotateY(180deg);
}
}
}
.p-faq__questionText {
font-size: clamp(14px, calc(17 / var(--site-contents-width) * 100vw), 20px);
font-weight: 700;
line-height: 1.5;
}
.p-faq__answerText {
color: var(--site-color-muted);
font-size: clamp(12px, calc(14 / var(--site-contents-width) * 100vw), 14px);
font-weight: 400;
line-height: 1.75;
} .p-cta {
background-image: var(--site-gradient-main);
color: var(--site-color-text);
.p-cta__inner {
display: grid;
grid-template-columns: 1fr;
width: calc(100% - 2 * var(--site-spacing-base));
margin-inline: auto;
@container style(--screen-width-md: _true){
width: min(100%, calc(var(--site-max-width) * 1px));
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
.p-cta__visual {
order: 2;
line-height: 0;
@container style(--screen-width-md: _true){
order: 1;
width: auto;
max-width: 649px;
margin-left: auto;
margin-right: 0;
}
}
.p-cta__device {
}
.p-cta__body {
align-self: center;
order: 1;
padding-top: 40px;
@container style(--screen-width-md: _true){
order: 2;
max-width: 671px;
margin-right: 3%;
padding-block: clamp(40px, calc(56 / var(--site-contents-width) * 100vw), 80px);
}
}
.p-cta__title {
margin: 0;
font-size: clamp(18px, calc(28 / var(--site-contents-width) * 100vw), 32px);
font-weight: 700;
line-height: 1.5;
text-align: center;
@container style(--screen-width-md: _true){
text-align: left;
}
}
.p-cta__buttons {
margin-top: clamp(20px, calc(28 / var(--site-contents-width) * 100vw), 32px);
@container style(--screen-width-md: _true){
justify-content: flex-start;
}
}
.p-cta__notes {
margin: clamp(20px, calc(24 / var(--site-contents-width) * 100vw), 28px) 0 0;
color: var(--site-color-muted);
font-size: clamp(12px, calc(13 / var(--site-contents-width) * 100vw), 14px);
font-weight: 400;
line-height: 1.75;
}
} .p-product {
position: relative;
color: #fff;
.p-product__inner {
width: min(100% - 2 * var(--site-spacing-base), calc(var(--site-contents-width) * 1px));
margin-inline: auto;
}
.p-product__head {
padding-block: var(--site-spacing-section) 0;
background-color: #fff;
color: var(--site-color-text);
text-align: center;
}
.p-product__headTitle {
margin: 0;
font-size: clamp(14px, calc(24 / var(--site-contents-width) * 100vw), 24px);
font-weight: 700;
line-height: 2;
strong{
font-size: clamp(20px, calc(32 / var(--site-contents-width) * 100vw), 32px);
}
}
.p-product__headTitle-em {
color: var(--site-color-blue);
}
.p-product__headLead {
margin: 0;
color: var(--site-color-text);
font-size: clamp(14px, calc(24 / var(--site-contents-width) * 100vw), 24px);
line-height: 2;
}
.p-product__main {
position: relative;
padding-block: clamp(110px, calc(160 / var(--site-contents-width) * 100vw), 180px) clamp(220px, calc(280 / var(--site-contents-width) * 100vw), 300px);
background-image: var(--site-gradient-product);
&::before {
display: block;
position: absolute;
left: 0;
top: -1px;
width: 100%;
height: clamp(60px, calc(90 / var(--site-contents-width) * 100vw), 110px);
background-color: #fff;
clip-path: polygon(0 0, 100% 0, 50% 100%);
content: "";
}
}
.p-product__title {
margin: 0;
font-size: clamp(18px, calc(36 / var(--site-contents-width) * 100vw), 36px);
font-weight: 700;
line-height: 1.5;
text-align: center;
}
.p-product__title-sm {
font-size: 0.88em;
}
.p-product__title-lg {
font-size: 1.33em;
}
.p-product__visual {
margin-top: clamp(24px, calc(40 / var(--site-contents-width) * 100vw), 56px);
text-align: center;
}
.p-product__image {
width: 100%;
max-width: 714px;
height: auto;
}
.p-product__brand {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(4px, calc(6 / var(--site-contents-width) * 100vw), 8px);
width: 100%;
max-width: 626px;
margin-top: clamp(12px, calc(16 / var(--site-contents-width) * 100vw), 20px);
margin-inline: auto;
}
.p-product__logo {
width: 100%;
max-width: 626px;
height: auto;
}
.p-product__cert {
align-self: flex-end;
margin: 0;
font-size: clamp(11px, calc(12 / var(--site-contents-width) * 100vw), 13px);
font-weight: 400;
}
.p-product__features {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(8px, calc(12 / var(--site-contents-width) * 100vw), 16px);
margin: clamp(32px, calc(48 / var(--site-contents-width) * 100vw), 60px) 0 0;
padding: 0;
list-style: none;
@container style(--screen-width-md: _true){
gap: clamp(5px, calc(14 / var(--site-contents-width) * 100vw), 15px);
} }
.p-product__feature {
display: flex;
flex-direction: column;
position: relative;
padding: clamp(12px, calc(16 / var(--site-contents-width) * 100vw), 20px) clamp(12px, calc(16 / var(--site-contents-width) * 100vw), 24px) clamp(12px, calc(16 / var(--site-contents-width) * 100vw), 20px) clamp(40px, calc(52 / var(--site-contents-width) * 100vw), 60px);
border-radius: clamp(4px, calc(8 / var(--site-contents-width) * 100vw), 10px);
background-color: rgb(255 255 255 / .2); &::before {
display: block;
position: absolute;
left: clamp(12px, calc(14 / var(--site-contents-width) * 100vw), 18px);
top: 50%;
translate: 0 -50%;
width: clamp(20px, calc(30 / var(--site-contents-width) * 100vw), 33px);
height: clamp(20px, calc(30 / var(--site-contents-width) * 100vw), 33px);
border-radius: 50%;
background-color: #fff;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAyNCAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTEuNTc2MTcgNi40NzU1OUw4LjE5NDc3IDEzLjc3NjJMMjEuNjUwOSAxLjU3NjkxIiBzdHJva2U9IiMxNTRDOEIiIHN0cm9rZS13aWR0aD0iNC4yNTczNyIvPiA8L3N2Zz4=");
background-repeat: no-repeat;
background-position: center;
background-size: 70%;
content: "";
}
}
.p-product__featureTitle {
margin: 0;
font-size: clamp(13px, calc(24 / var(--site-contents-width) * 100vw), 24px);
font-weight: 600;
line-height: 1.4;
}
.p-product__featureText {
display: none;
margin: clamp(4px, calc(8 / var(--site-contents-width) * 100vw), 10px) 0 0;
font-size: clamp(13px, calc(17 / var(--site-contents-width) * 100vw), 17px);
line-height: 1.7;
@container style(--screen-width-md: _true){
display: block;
}
}
} .p-productCta {
position: relative;
margin-top: clamp(-200px, calc(-180 / var(--site-contents-width) * 100vw), -150px);
z-index: 2;
.p-productCta__box {
width: min(100% - 2 * var(--site-spacing-base), calc(var(--site-contents-width) * 1px));
margin-inline: auto;
padding: clamp(24px, calc(40 / var(--site-contents-width) * 100vw), 48px) clamp(20px, calc(32 / var(--site-contents-width) * 100vw), 60px);
border-radius: clamp(12px, calc(16 / var(--site-contents-width) * 100vw), 20px);
background-color: #fff;
color: var(--site-color-text);
text-align: left;
box-shadow: 4px 4px 15px rgba(0, 0, 0, .1);
@container style(--screen-width-md: _true){
text-align: center;
}
}
.p-productCta__title {
margin: 0;
font-size: clamp(18px, calc(32 / var(--site-contents-width) * 100vw), 32px);
font-weight: 700;
line-height: 1.5;
}
.p-productCta__lead {
margin: clamp(12px, calc(16 / var(--site-contents-width) * 100vw), 20px) 0 0;
font-size: clamp(13px, calc(16 / var(--site-contents-width) * 100vw), 16px);
line-height: 1.7;
}
.p-productCta__buttons {
margin-top: clamp(20px, calc(28 / var(--site-contents-width) * 100vw), 32px);
}
.p-productCta__notes {
margin: clamp(16px, calc(20 / var(--site-contents-width) * 100vw), 24px) 0 0;
color: var(--site-color-muted);
font-size: clamp(11px, calc(13 / var(--site-contents-width) * 100vw), 13px);
font-weight: 400;
line-height: 1.7;
}
} .p-footer {
background-color: var(--site-color-footer-bg);
color: var(--site-color-white);
.p-footer__notice {
padding: 1em var(--site-spacing-base);
background-color: #DFDFDF;
border-bottom: 1px solid var(--site-color-white);
color: var(--site-color-text);
text-align: center;
}
.p-footer__noticeText {
display: inline-block; font-size: clamp(11px, calc(12 / var(--site-contents-width) * 100vw), 12px);
line-height: 1.7;
text-align: left;
font-weight: 400;
}
.p-footer__main {
padding: 30px var(--site-spacing-base);
text-align: center;
@container style(--screen-width-md: _true){
display: flex;
justify-content: space-between;
align-items: center;
}
}
.p-footer__brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
@container style(--screen-width-md: _true){
flex-direction: row;
gap: 12px;
}
}
.p-footer__logo {
width: clamp(123px, calc(145 / var(--site-contents-width) * 100vw), 145px);
height: auto;
}
.p-footer__company {
margin: 0;
font-size: clamp(12px, calc(14 / var(--site-contents-width) * 100vw), 14px);
font-weight: 400;
}
.p-footer__copyright {
margin: 20px 0 0;
font-size: clamp(11px, calc(12 / var(--site-contents-width) * 100vw), 12px);
font-weight: 400;
}
} .p-supervision{
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: clamp(30px, calc(60 / var(--site-contents-width) * 100vw), 60px);
width: calc(335/ 375 * 100vw);
max-width: 1200px;
margin-inline: auto;
}
.p-supervision__label{
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
flex-basis: 160px;
padding: 10px;
border-radius: clamp(4px, calc(8 / var(--site-contents-width) * 100vw), 8px);
background-image: var(--site-gradient-administration);
color: var(--site-color-white);
font-size: clamp(16px, calc(20 / var(--site-contents-width) * 100vw), 20px);
text-align: center;
letter-spacing: 25%;
}
.p-supervision__inner{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1em;
flex-basis: 80%;
flex-grow: 999;
padding: 20px clamp(20px, calc(40 / var(--site-contents-width) * 100vw), 40px);
border-radius: clamp(4px, calc(8 / var(--site-contents-width) * 100vw), 8px);
background-color: #fff;
}
.p-supervision__text{
flex-grow: 999;
}
.p-supervision__link{
flex-grow: 1;
flex-basis: fit-content;
color: var(--site-color-blue);
font-weight: normal;
} .p-administration{
padding-inline: calc(20 / 375 * 100vw);
padding-block: clamp(50px, calc(80 / var(--site-contents-width) * 100vw), 80px);
background-image: var(--site-gradient-administration);
color: #fff;
}
.p-administration__header{
max-width: 1200px;
margin-inline: auto;
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid rgba(255, 255, 255, .2);
@container style(--screen-width-md: _true){
display: grid;
grid-template-columns: 1fr min(62%, 660px);
&::before{
display: block;
font-size: min(calc(64 / 1400 * 100vw), 64px);
font-family: var(--site-font-family-en);
text-transform: uppercase;
line-height: 1.22;
font-weight: normal;
opacity: .2;
white-space: pre;
content: "Supervised \A by \A Expert";
}
}
}
.p-administration__header__content{
display: grid;
grid-template-areas:
"label logo"
"name logo"
"desc desc"
;
gap: clamp(24px, calc(32 / var(--site-contents-width) * 100vw), 32px) clamp(27px, calc(30 / var(--site-contents-width) * 100vw), 30px);
grid-template-columns: 1fr clamp(80px, calc(200 / var(--site-contents-width) * 100vw), 200px);
@container style(--screen-width-md: _true){
grid-template-areas:
"label logo"
"name logo"
"desc logo"
;
&>*{
max-width: 400px;
}
}
}
.p-administration__label{
grid-area: label;
width: fit-content;
padding: 10px 20px;
border-radius: 4px;
background-color: #fff;
color: #0081A1;
font-size: 1em;
line-height: 1;
}
.p-administration__name{
grid-area: name;
h2{
font-size: clamp(17px, calc(26 / var(--site-contents-width) * 100vw), 26px);
font-weight: 700;
}
p{
display: flex;
align-items: center;
gap: .5em;
font-size: clamp(14px, calc(18 / var(--site-contents-width) * 100vw), 18px);
font-weight: 700;
&::before{
display: block;
width: 1.5em;
height: 2px;
background-color: currentColor;
content: "";
}
}
}
.p-administration__logo{
grid-area: logo;
align-self: start;
padding: clamp(6px, calc(15 / var(--site-contents-width) * 100vw), 15px);
border-radius: 8px;
background-color: #fff;
line-height: 0;
}
.p-administration__description{
grid-area: desc;
font-size: clamp(13px, calc(14 / var(--site-contents-width) * 100vw), 14px);
font-weight: bold;
line-height: 1.7;
}
.p-administration__inner{
max-width: 1200px;
margin-inline: auto;
}
.p-administration__notes{
font-size: clamp(12px, calc(14 / var(--site-contents-width) * 100vw), 14px);
font-weight: normal;
line-height: 1.5;
}
.p-administration__box{
display: grid;
grid-template-columns: 1fr;
gap: clamp(25px, calc(40 / var(--site-contents-width) * 100vw), 40px);
margin-top: clamp(40px, calc(50 / var(--site-contents-width) * 100vw), 50px);
padding: clamp(30px, calc(40 / var(--site-contents-width) * 100vw), 40px) clamp(20px, calc(20 / 375 * 100vw), 30px);
border-radius: 10px;
background-color: #fff;
color: var(--site-color-text);
}
.p-administration__box__title{
font-size: clamp(16px, calc(24 / var(--site-contents-width) * 100vw), 24px);
font-weight: bold;
@container style(--screen-width-md: _true){
text-align: center;
}
}
.p-administration__box__text{
max-width: 1080px;
margin-inline: auto;
font-size: 1em;
line-height: 1.6;
.p-administration__box__notes{
margin-top: 2em;
font-size: clamp(13px, calc(14 / var(--site-contents-width) * 100vw), 14px);
font-weight: normal;
line-height: 1.2;
@container style(--screen-width-md: _true){
text-align: center;
}
}
}
.p-administration__box__btn{
.c-button__link{
--site-color-btn: #F9BB42;
--site-color-btn-text: var(--site-color-text);
max-width: 400px;
height: 60px;
font-size: clamp(14px, calc(18 / var(--site-contents-width) * 100vw), 18px);
@media (hover) {
&:hover{
--site-color-btn: #fff;
--site-color-btn-text: #F9BB42;
}
}
}
}