@charset "UTF-8";

 *,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
:where(
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ol,
ul,
li 
){
margin: 0;
}
ul,
ol {
padding: 0;
list-style: none;
}
img {
max-width: 100%;
height: auto;
vertical-align: top;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
padding: 0;
border: none;
background: transparent;
}
iframe{
display: block;
width: 100%;
border: none;
}
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
:where([id]) {
scroll-margin-top: 6.5rem;
}
body {
font-family: var(--wp--preset--font-family--sans-ja);
font-size: var(--wp--preset--font-size--default);
line-height: 1.8;
letter-spacing: 0;
color: var(--wp--preset--color--black);
background-color: var(--wp--preset--color--white);
font-weight: 500;
overflow-x: clip;
overflow-wrap: anywhere;
-webkit-font-smoothing: antialiased;
}
:not(a) > img {
pointer-events: none;
}
::selection {
background-color: var(--wp--preset--color--blue);
color: var(--wp--preset--color--white);
}
a,
button {
text-decoration: none;
color: inherit;
transition: opacity 0.3s;
}
a:hover,
button:hover {
opacity: 0.7;
cursor: pointer;
}
@media screen and (width < 768px) {
a:hover,
button:hover {
opacity: 1;
}
}
.l-inner {
width: 100%;
max-width: calc(var(--wp--style--global--content-size) + var(--wp--preset--spacing--40) * 2);
margin-right: auto;
margin-left: auto;
padding-right: var(--wp--preset--spacing--40);
padding-left: var(--wp--preset--spacing--40);
}
@media screen and (width < 1080px) {
.l-inner {
max-width: 900px;
}
}
@media screen and (width < 768px) {
.l-inner {
max-width: none;
padding-right: 24px;
padding-left: 24px;
}
}
.l-inner-narrow {
max-width: calc(60rem + var(--wp--preset--spacing--40) * 2);
}
.l-inner--article {
max-width: calc(var(--wp--custom--layout--content-size-article) + var(--wp--preset--spacing--40) * 2);
}
@media screen and (width < 768px) {
.l-inner--article {
max-width: none;
}
}
@media screen and (width >= 768px) and (width < 1080px) {
.l-inner--keepWide {
max-width: calc(var(--wp--style--global--content-size) + var(--wp--preset--spacing--40) * 2);
}
}
.l-inner--faq {
max-width: calc(60rem + var(--wp--preset--spacing--40) * 2);
}
@media screen and (width < 768px) {
.l-inner--faq {
max-width: none;
}
}
.l-cardList {
display: grid;
grid-template-columns: repeat(attr(data-grid-columns-pc type(<integer>), 3), 1fr);
gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--24);
}
@media screen and (width < 768px) {
.l-cardList {
grid-template-columns: repeat(attr(data-grid-columns-sp type(<integer>), 1), 1fr);
gap: 0;
}
}
@supports not (grid-template-columns: repeat(attr(data-grid-columns-pc type(<integer>), 3), 1fr)) {
.l-cardList {
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr))
}
} .c-sectionTitle {
overflow: clip;
}
.c-sectionTitle__sub {
position: relative;
display: block;
width: fit-content; color: var(--wp--preset--color--blue);
font-family: var(--wp--preset--font-family--sans-en);
font-size: clamp(3.125rem, 2.345rem + 3.2vw, 5rem);
font-weight: 300;
line-height: 1;
} .c-sectionTitle__main {
margin-top: var(--wp--preset--spacing--24);
margin-bottom: 0;
font-size: var(--wp--preset--font-size--default);
font-weight: 700;
line-height: 1;
} .c-sectionTitle--center {
text-align: center;
}
.c-sectionTitle--center .c-sectionTitle__sub {
margin-inline: auto;
}
.c-sectionTitle--center .c-sectionTitle__sub::before {
left: 50%;
translate: -50% 0;
} .c-sectionTitle--subMv .c-sectionTitle__main {
font-size: var(--wp--preset--font-size--md);
}
.c-sectionTitle--subMv .c-sectionTitle__sub {
font-size: clamp(3.125rem, 2.138rem + 4.05vw, 5.5rem);
} .c-sectionTitle--error .c-sectionTitle__main {
font-size: 1rem;
}
.c-sectionTitle--error .c-sectionTitle__sub {
font-size: clamp(2.875rem, 1.784rem + 4.48vw, 5.5rem);
} :where(.js-enabled) .c-sectionTitle .c-sectionTitle__sub,
:where(.js-enabled) .c-sectionTitle .c-sectionTitle__main,
.c-sectionTitle.is-sectionTitle-ready .c-sectionTitle__sub,
.c-sectionTitle.is-sectionTitle-ready .c-sectionTitle__main {
opacity: 0;
translate: var(--wp--preset--spacing--32) 0;
}
.c-sectionTitle.is-sectionTitle-visible .c-sectionTitle__sub {
background: linear-gradient(90deg, var(--wp--preset--color--blue) 65%, #a0a0a0 75%, var(--wp--preset--color--yellow) 85%);
background-size: 200% 100%;
background-clip: text;
color: transparent;
animation: c-sectionTitle-fade-in 0.6s ease-in-out forwards, c-sectionTitle-sweep 0.6s linear 0s forwards;
}
.c-sectionTitle.is-sectionTitle-visible .c-sectionTitle__sub::before {
animation: c-sectionTitle-dot 0.6s ease-in-out backwards;
}
.c-sectionTitle--center.is-sectionTitle-visible .c-sectionTitle__sub::before {
animation: c-sectionTitle-dot-center 0.6s ease-in-out backwards;
}
.c-sectionTitle.is-sectionTitle-visible .c-sectionTitle__main {
animation: c-sectionTitle-fade-in 0.6s ease-in-out forwards;
}
@keyframes c-sectionTitle-fade-in {
100% {
opacity: 1;
translate: 0;
}
}
@keyframes c-sectionTitle-sweep {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
@keyframes c-sectionTitle-dot {
0% {
opacity: 0;
translate: 0.3em 0;
}
100% {
opacity: 1;
translate: 0 0;
}
}
@keyframes c-sectionTitle-dot-center {
0% {
opacity: 0;
translate: calc(-50% + 0.3em) 0;
}
100% {
opacity: 1;
translate: -50% 0;
}
}
@keyframes c-sectionTitle-gradient {
0% {
background-position: 0% 50%;
color: transparent;
}
99% {
background-position: 100% 50%;
color: transparent;
}
100% {
background-position: 100% 50%;
color: var(--wp--preset--color--blue);
}
}
@media (prefers-reduced-motion: reduce) {
.c-sectionTitle .c-sectionTitle__sub,
.c-sectionTitle .c-sectionTitle__main {
opacity: 1;
translate: 0;
animation: none;
}
.c-sectionTitle.is-sectionTitle-visible .c-sectionTitle__sub {
background: none;
color: var(--wp--preset--color--blue);
animation: none;
}
.c-sectionTitle.is-sectionTitle-visible .c-sectionTitle__main {
animation: none;
}
.c-sectionTitle.is-sectionTitle-visible .c-sectionTitle__sub::before {
opacity: 1;
translate: 0 0;
animation: none;
}
.c-sectionTitle--center.is-sectionTitle-visible .c-sectionTitle__sub::before {
translate: -50% 0;
}
} .c-sectionTitle--white .c-sectionTitle__sub,
.c-sectionTitle--white .c-sectionTitle__main {
color: var(--wp--preset--color--white);
}
.c-sectionTitle--white.is-sectionTitle-visible .c-sectionTitle__sub {
background: linear-gradient(90deg, var(--wp--preset--color--white) 25%, var(--wp--preset--color--yellow) 50%, var(--wp--preset--color--white) 75%);
background-size: 200% 100%;
background-clip: text;
color: transparent;
animation: c-sectionTitle-fade-in 0.6s ease-in-out forwards, c-sectionTitle-shine 0.5s linear 0s forwards;
}
@keyframes c-sectionTitle-shine {
0% {
background-position: 0% 50%;
color: transparent;
}
99% {
background-position: 100% 50%;
color: transparent;
}
100% {
background-position: 100% 50%;
color: var(--wp--preset--color--white);
}
}
@media (prefers-reduced-motion: reduce) {
.c-sectionTitle--white .c-sectionTitle__sub,
.c-sectionTitle--white .c-sectionTitle__main {
background: none;
color: var(--wp--preset--color--white);
}
.c-sectionTitle--white.is-sectionTitle-visible .c-sectionTitle__sub {
background: none;
color: var(--wp--preset--color--white);
animation: none;
}
} .c-productTitle {
display: flex;
flex-direction: column;
align-items: center;
color: var(--wp--preset--color--black);
text-align: center;
}
.c-productTitle__main {
font-size: var(--wp--preset--font-size--xxl-plus);
font-weight: 500;
line-height: 1.6;
}
.c-productTitle__accent {
display: inline-block;
color: var(--wp--preset--color--blue);
font-weight: 500;
} .c-btn-wrap{
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--24);
justify-content: center;
&.is-align-left{
justify-content: flex-start;
}
&.is-align-right{
justify-content: flex-end;
}
&.is-vertical-top{
align-items: flex-start;
}
&.is-vertical-center{
align-items: center;
}
&.is-vertical-bottom{
align-items: flex-end;
}
}
.c-btn {
display: inline-grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: var(--wp--preset--spacing--24);
background-color: var(--wp--preset--color--black);
min-width: 15rem;
padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--12) var(--wp--preset--spacing--12) var(--wp--preset--spacing--32);
border-radius: 4.375rem;
transition: background-color 400ms ease-in-out;
background-image: none;
}
@media (any-hover: hover) {
.c-btn:hover {
opacity: 1;
}
.c-btn:hover .c-arrow {
opacity: 1;
}
.c-btn:hover .c-arrow::before {
translate: 300% -50%;
}
.c-btn:hover .c-arrow::after {
translate: -50% -50%;
}
.c-btn:hover {
background-color: var(--wp--preset--color--blue);
}
}
.c-btn__text {
font-size: var(--wp--preset--font-size--default);
font-weight: bold;
line-height: 1.2;
color: var(--wp--preset--color--white);
display: block;
text-align: left;
transition: color 0.3s ease-in-out;
} .c-btn--sm {
min-height: 3.5rem;
padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--8) var(--wp--preset--spacing--8) var(--wp--preset--spacing--32);
}
.c-btn--sm .c-btn__text {
font-size: 0.9375rem;
line-height: 1.4;
} .c-btn--white {
background-color: var(--wp--preset--color--white);
}
@media (any-hover: hover) {
.c-btn--white:hover {
background-color: var(--wp--preset--color--black);
}
.c-btn--white:hover .c-btn__text {
color: var(--wp--preset--color--white);
}
}
.c-btn--white .c-btn__text {
color: var(--wp--preset--color--black);
}
.c-btn--white .c-btn__icon {
background-color: var(--wp--preset--color--black);
} .c-btn--border {
border: 0.0625rem solid var(--wp--preset--color--gray);
} .c-btn--reverse {
grid-template-columns: auto 1fr;
padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--64) var(--wp--preset--spacing--12) var(--wp--preset--spacing--12);
}
.c-btn--reverse .c-btn__icon {
order: -1;
scale: -1 1;
}
.c-btn--reverse .c-btn__text {
text-align: center;
}
.c-arrow {
width: 2.5rem;
height: auto;
aspect-ratio: 1;
border-radius: 50%;
border: 0.0625rem solid var(--wp--preset--color--skyblue);
display: block;
position: relative;
overflow: clip;
transition: background-color 0.4s ease-in-out, border-color 0.4s ease-in-out;
}
@media screen and (width < 768px) {
.c-arrow {
width: 2rem;
}
}
.c-arrow::before, .c-arrow::after {
content: "";
display: block;
width: 0.625rem;
height: auto;
aspect-ratio: 1;
mask: url(//test.pai-r.com/wp-content/themes/PAI-R/img/common/icon_arrow.svg) no-repeat center/contain;
background-color: var(--wp--preset--color--white);
position: absolute;
top: 50%;
left: 50%;
transition: translate 400ms ease-in-out;
}
@media screen and (width < 768px) {
.c-arrow::before, .c-arrow::after {
width: 0.5rem;
}
}
.c-arrow::before {
translate: -50% -50%;
}
.c-arrow::after {
translate: -300% -50%;
}
.c-arrow--sm {
width: 1.5rem;
}
@media screen and (width < 768px) {
.c-arrow--sm {
width: 1.25rem;
}
}
.c-arrow--sm::before, .c-arrow--sm::after {
width: 0.5rem;
}
.c-arrow--filled {
background-color: var(--wp--preset--color--skyblue);
border-color: var(--wp--preset--color--skyblue);
}
.c-arrow--filled::before, .c-arrow--filled::after {
background-color: var(--wp--preset--color--blue);
}
.c-arrow--filledDark {
border-color: var(--wp--preset--color--black);
background-color: var(--wp--preset--color--black);
}
.c-arrow--filledDark::before, .c-arrow--filledDark::after {
background-color: var(--wp--preset--color--white);
}
.c-arrow--blank::before, .c-arrow--blank::after {
width: 0.8375rem;
aspect-ratio: 13.4/10.664;
mask-image: url(//test.pai-r.com/wp-content/themes/PAI-R/img/common/icon_blank.svg);
}
@media screen and (width < 768px) {
.c-arrow--blank::before, .c-arrow--blank::after {
width: 0.6875rem;
}
}
.c-newsList .c-newsList__item:first-child .c-newsList__link {
border-top: 1px solid var(--wp--preset--color--gray);
}
.c-newsList .c-newsList__link {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
align-items: center;
padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--8);
border-bottom: 1px solid var(--wp--preset--color--gray);
}
@media screen and (width < 768px) {
.c-newsList .c-newsList__link {
gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--24);
padding: var(--wp--preset--spacing--16) 0;
}
}
.c-newsList .c-newsList__link::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
display: block;
width: 100%;
height: 1px;
background-color: var(--wp--preset--color--blue);
transform-origin: left center;
scale: 0 1;
transition: scale 0.4s ease-in-out;
}
@media (any-hover: hover) {
.c-newsList .c-newsList__link:hover {
opacity: 1;
}
.c-newsList .c-newsList__link:hover .c-newsList__title {
color: var(--wp--preset--color--blue);
}
.c-newsList .c-newsList__link:hover::after {
scale: 1 1;
}
.c-newsList .c-newsList__link:hover .c-arrow {
opacity: 1;
}
.c-newsList .c-newsList__link:hover .c-arrow::before {
translate: 300% -50%;
}
.c-newsList .c-newsList__link:hover .c-arrow::after {
translate: -50% -50%;
}
}
.c-newsList .c-newsList__meta {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--wp--preset--spacing--12);
width: fit-content;
white-space: nowrap;
}
.c-newsList .c-newsList__date {
color: var(--wp--preset--color--blue);
font-family: var(--wp--preset--font-family--sans-en);
font-size: var(--wp--preset--font-size--base);
font-weight: 500;
line-height: 1;
}
.c-newsList .c-newsList__categories {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
@media screen and (width < 768px) {
.c-newsList .c-newsList__categories {
gap: 4px;
}
}
.c-newsList .c-newsList__category {
display: block;
color: var(--wp--preset--color--darkgray);
font-size: clamp(0.75rem, 0.698rem + 0.21vw, 0.875rem);
font-weight: 700;
line-height: 1;
}
.c-newsList .c-newsList__title {
grid-column: 1;
font-size: var(--wp--preset--font-size--default);
font-weight: 500;
line-height: 1.6;
transition: color 0.4s ease-in-out;
}
.c-newsList .c-newsList__arrow {
grid-column: 2;
grid-row: 1/3;
}
.c-relatedPost {
margin-top: var(--wp--preset--spacing--24);
margin-bottom: var(--wp--preset--spacing--24);
}
.c-relatedPost__label {
width: fit-content;
margin: 0 0 var(--wp--preset--spacing--8);
padding: var(--wp--preset--spacing--8) 0.75rem;
border-radius: 0.25rem;
background-color: var(--wp--preset--color--blue);
color: var(--wp--preset--color--white);
font-size: var(--wp--preset--font-size--sm);
line-height: 1;
}
.c-relatedPost__list {
margin: 0;
padding: 0;
list-style: none;
}
.c-relatedPost__item + .c-relatedPost__item {
margin-top: var(--wp--preset--spacing--4);
} .c-postCard {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--16);
height: 100%;
padding-bottom: var(--wp--preset--spacing--16);
border-bottom: 0.0625rem solid var(--wp--preset--color--gray);
position: relative;
}
@media screen and (width < 768px) {
.c-postCard {
padding-top: var(--wp--preset--spacing--24);
display: grid;
grid-template-columns: 10.3125rem 1fr;
align-items: flex-start;
}
}
.c-postCard::after {
content: "";
display: block;
width: 100%;
height: 1px;
background-color: var(--wp--preset--color--blue);
position: absolute;
bottom: -1px;
left: 0;
scale: 0 1;
transition: scale 0.4s ease-in-out;
transform-origin: left center;
}
@media (any-hover: hover) {
.c-postCard:hover {
opacity: 1;
}
.c-postCard:hover .c-arrow {
opacity: 1;
background-color: var(--wp--preset--color--blue);
border-color: var(--wp--preset--color--blue);
}
.c-postCard:hover .c-arrow::before {
translate: 300% -50%;
background-color: var(--wp--preset--color--white);
}
.c-postCard:hover .c-arrow::after {
translate: -50% -50%;
background-color: var(--wp--preset--color--white);
}
.c-postCard:hover::after {
scale: 1 1;
}
.c-postCard:hover .c-postCard__img img {
scale: 1.05;
}
.c-postCard:hover .c-postCard__title {
color: var(--wp--preset--color--blue);
}
}
.c-postCard__img {
width: 100%;
position: relative;
overflow: clip;
border-radius: var(--wp--preset--spacing--8);
}
.c-postCard__img img {
width: 100%;
height: auto;
object-fit: cover;
aspect-ratio: 300/168;
transition: scale 0.4s ease-in-out;
}
.c-postCard__body {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.c-postCard__date {
font-size: var(--wp--preset--font-size--base);
font-weight: 500;
line-height: 1;
font-family: var(--wp--preset--font-family--sans-en);
color: var(--wp--preset--color--blue);
}
.c-postCard__title {
font-weight: 500;
line-height: 1.6;
margin-top: var(--wp--preset--spacing--12);
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
flex-grow: 1;
transition: color 0.3s ease-in-out;
font-size: var(--wp--preset--font-size--default);
}
@media screen and (width < 768px) {
.c-postCard__title {
margin-top: 8px;
}
}
.c-postCard__info {
margin-top: var(--wp--preset--spacing--16);
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
@media screen and (width < 768px) {
.c-postCard__info {
margin-top: 8px;
}
}
.c-postCard__arrow {
margin-left: auto;
flex-shrink: 0;
}
.c-postCard--case .c-postCard__body {
padding-right: 8px;
padding-left: 8px;
}
.c-postCard__company {
color: var(--wp--preset--color--blue);
font-size: clamp(0.688rem, 0.584rem + 0.43vw, 0.938rem);
font-weight: 500;
line-height: 1.4;
}
.c-postCard__companySuffix {
font-size: 0.85em;
}
.c-postCard__hashTags {
display: flex;
flex-wrap: wrap;
gap: 8px 0.75rem;
color: var(--wp--preset--color--darkgray);
font-size: var(--wp--preset--font-size--sm);
font-weight: 700;
line-height: 1;
}
@media screen and (width < 768px) {
.c-postCard__hashTags {
font-size: 0.75rem;
}
}
.c-postCard__hashTag {
display: flex;
gap: 0.25rem;
}
.c-postCard__hashTag::before {
content: "#";
} .c-clientCard {
height: 100%;
}
.c-clientCard__link {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--16);
height: 100%;
color: inherit;
}
@media screen and (width < 768px) {
.c-clientCard__link {
gap: var(--wp--preset--spacing--8);
}
}
@media (any-hover: hover) {
.c-clientCard__link--active:hover {
opacity: 1;
}
.c-clientCard__link--active:hover .c-clientCard__img {
transform: scale(1.05);
}
.c-clientCard__link--active:hover .c-arrow {
opacity: 1;
}
.c-clientCard__link--active:hover .c-arrow::before {
translate: 300% -50%;
}
.c-clientCard__link--active:hover .c-arrow::after {
translate: -50% -50%;
}
}
.c-clientCard__logo {
overflow: clip;
width: 100%;
aspect-ratio: 480/320;
border: 0.0625rem solid var(--wp--preset--color--gray);
border-radius: 0.5rem;
}
@media screen and (width < 768px) {
.c-clientCard__logo {
border-radius: 0.25rem;
}
}
.c-clientCard__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease-in-out;
}
.c-clientCard__body {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--24);
}
.c-clientCard__head {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--8);
padding-right: var(--wp--preset--spacing--8);
padding-left: var(--wp--preset--spacing--8);
}
@media screen and (width < 768px) {
.c-clientCard__head {
padding-right: 4px;
padding-left: 4px;
}
}
.c-clientCard__categories {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 0.75rem;
align-items: center;
}
.c-clientCard__category {
display: flex;
gap: 0.25rem;
align-items: center;
color: var(--wp--preset--color--darkgray);
font-size: var(--wp--preset--font-size--sm);
font-weight: 700;
line-height: 1;
}
@media screen and (width < 768px) {
.c-clientCard__category {
font-size: 0.75rem;
}
}
.c-clientCard__btn {
display: flex;
gap: var(--wp--preset--spacing--8);
justify-content: space-between;
align-items: center;
padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--12) var(--wp--preset--spacing--12) var(--wp--preset--spacing--24);
border: 0.0625rem solid var(--wp--preset--color--gray);
border-radius: 4.375rem;
background-color: var(--wp--preset--color--white);
}
.c-clientCard__btnText {
font-size: var(--wp--preset--font-size--sm);
font-weight: 700;
line-height: 1;
}
@media screen and (width < 768px) {
.c-clientCard__btnText {
font-size: 0.75rem;
}
}
.c-clientCard__btnArrow {
flex-shrink: 0;
} .c-interviewCard {
display: grid;
grid-template-columns: minmax(0, 480fr) minmax(0, 736fr);
grid-template-areas: "image body";
gap: var(--wp--preset--spacing--32);
width: 100%;
}
@media screen and (width < 768px) {
.c-interviewCard {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "image person" "summary summary" "actions actions";
gap: var(--wp--preset--spacing--12);
align-items: center;
}
}
.c-interviewCard__body {
display: grid;
grid-template-areas: "summary" "person" "actions";
grid-area: body;
gap: var(--wp--preset--spacing--8);
}
@media screen and (width < 768px) {
.c-interviewCard__body {
display: contents;
}
}
.c-interviewCard__image {
grid-area: image;
overflow: clip;
aspect-ratio: 16/9;
border: 0.0625rem solid var(--wp--preset--color--gray);
border-radius: var(--wp--preset--spacing--8);
}
.c-interviewCard__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media screen and (width < 768px) {
.c-interviewCard__image {
border: 0;
}
}
.c-interviewCard__summary {
display: grid;
grid-area: summary;
gap: var(--wp--preset--spacing--8);
padding-right: var(--wp--preset--spacing--8);
padding-left: var(--wp--preset--spacing--8);
}
@media screen and (width < 768px) {
.c-interviewCard__summary {
padding-right: 0;
padding-left: 0;
}
}
.c-interviewCard__date {
color: var(--wp--preset--color--blue);
font-family: var(--wp--preset--font-family--sans-en);
font-size: var(--wp--preset--font-size--base);
font-weight: 500;
line-height: 1;
}
.c-interviewCard__title {
font-size: 1.5rem;
font-weight: 500;
line-height: 1.6;
}
@media screen and (width < 768px) {
.c-interviewCard__title {
display: -webkit-box;
overflow: hidden;
font-size: var(--wp--preset--font-size--sm);
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}
.c-interviewCard__person {
display: grid;
grid-area: person;
gap: var(--wp--preset--spacing--4);
align-self: start;
padding-right: var(--wp--preset--spacing--8);
padding-left: var(--wp--preset--spacing--8);
color: var(--wp--preset--color--blue);
}
@media screen and (width < 768px) {
.c-interviewCard__person {
gap: var(--wp--preset--spacing--8);
align-self: center;
padding-right: 0;
padding-left: 0;
}
}
.c-interviewCard__affiliation {
display: grid;
gap: var(--wp--preset--spacing--4);
font-size: var(--wp--preset--font-size--sm);
line-height: 1.4;
}
@media screen and (width < 768px) {
.c-interviewCard__affiliation {
gap: 0.125rem;
font-size: var(--wp--preset--font-size--xs);
}
}
.c-interviewCard__role {
display: block;
}
.c-interviewCard__name {
font-size: var(--wp--preset--font-size--md);
line-height: 1;
}
.c-interviewCard__actions {
display: grid;
grid-template-columns: repeat(2, 12.5rem);
grid-area: actions;
gap: var(--wp--preset--spacing--16);
margin-top: var(--wp--preset--spacing--8);
}
@media screen and (width < 768px) {
.c-interviewCard__actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--wp--preset--spacing--8);
margin-top: 0;
}
}
.c-interviewCard__button {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--wp--preset--spacing--8);
align-items: center;
min-height: 3rem;
padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--24);
border: 0.0625rem solid var(--wp--preset--color--gray);
border-radius: 4.375rem;
background-color: var(--wp--preset--color--white);
transition: all 0.3s ease-in-out;
}
@media screen and (width < 768px) {
.c-interviewCard__button {
min-height: 2.25rem;
padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
}
}
@media (any-hover: hover) {
.c-interviewCard__button:hover {
opacity: 1;
background-color: var(--wp--preset--color--blue);
color: var(--wp--preset--color--white);
}
}
.c-interviewCard__buttonText {
font-size: var(--wp--preset--font-size--sm);
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
@media screen and (width < 768px) {
.c-interviewCard__buttonText {
font-size: var(--wp--preset--font-size--xs);
}
}
.c-interviewCard__buttonMeta {
display: grid;
grid-template-columns: auto 0.8125rem;
gap: var(--wp--preset--spacing--4);
align-items: center;
font-size: 0.8125rem;
line-height: 1;
white-space: nowrap;
}
@media screen and (width < 768px) {
.c-interviewCard__buttonMeta {
font-size: var(--wp--preset--font-size--xs);
}
}
.c-interviewCard__externalIcon {
display: block;
mask: url(//test.pai-r.com/wp-content/themes/PAI-R/img/common/icon_blank.svg) no-repeat center/contain;
width: 0.8125rem;
height: 0.6875rem;
background-color: currentcolor;
} .c-interviewCardCompact {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--12);
}
@media screen and (width >= 768px) {
@supports (grid-template-rows: subgrid) {
.c-interviewCardCompact {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}
}
}
@media screen and (width < 768px) {
.c-interviewCardCompact {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "img person" "summary summary" "actions actions";
align-items: center;
}
}
.c-interviewCardCompact__img {
overflow: clip;
aspect-ratio: 16/9;
border: 0.0625rem solid var(--wp--preset--color--gray);
border-radius: var(--wp--preset--spacing--8);
}
.c-interviewCardCompact__img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media screen and (width < 768px) {
.c-interviewCardCompact__img {
grid-area: img;
border: 0;
}
}
.c-interviewCardCompact__body {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--8);
}
@media screen and (width >= 768px) {
@supports (grid-template-rows: subgrid) {
.c-interviewCardCompact__body {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
}
}
}
@media screen and (width < 768px) {
.c-interviewCardCompact__body {
display: contents;
}
}
.c-interviewCardCompact__summary {
display: flex;
flex-direction: column;
gap: 0.375rem;
padding-right: var(--wp--preset--spacing--8);
padding-left: var(--wp--preset--spacing--8);
}
@media screen and (width < 768px) {
.c-interviewCardCompact__summary {
grid-area: summary;
gap: 8px;
padding-right: 0;
padding-left: 0;
}
}
.c-interviewCardCompact__date {
color: var(--wp--preset--color--blue);
font-family: var(--wp--preset--font-family--sans-en);
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
line-height: 1;
}
.c-interviewCardCompact__title {
font-size: 1.125rem;
font-weight: 500;
line-height: 1.6;
}
@media screen and (width < 768px) {
.c-interviewCardCompact__title {
font-size: 0.9375rem;
}
}
.c-interviewCardCompact__person {
display: grid;
gap: var(--wp--preset--spacing--4);
padding-right: var(--wp--preset--spacing--8);
padding-left: var(--wp--preset--spacing--8);
color: var(--wp--preset--color--blue);
}
@media screen and (width < 768px) {
.c-interviewCardCompact__person {
grid-area: person;
gap: 8px;
align-self: center;
padding-right: 0;
padding-left: 0;
}
}
.c-interviewCardCompact__affiliation {
display: grid;
gap: 0.125rem;
font-size: var(--wp--preset--font-size--xs);
line-height: 1.4;
}
.c-interviewCardCompact__role {
display: block;
}
.c-interviewCardCompact__name {
font-size: 1rem;
line-height: 1;
}
.c-interviewCardCompact__actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--wp--preset--spacing--8);
margin-top: var(--wp--preset--spacing--8);
}
@media screen and (width < 768px) {
.c-interviewCardCompact__actions {
grid-area: actions;
margin-top: 0;
}
}
.c-interviewCardCompact__button {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--wp--preset--spacing--8);
align-items: center;
min-height: 2.25rem;
padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
border: 0.0625rem solid var(--wp--preset--color--gray);
border-radius: 4.375rem;
background-color: var(--wp--preset--color--white);
transition: all 0.3s ease-in-out;
}
@media (any-hover: hover) {
.c-interviewCardCompact__button:hover {
background-color: var(--wp--preset--color--blue);
color: var(--wp--preset--color--white);
opacity: 1;
}
}
.c-interviewCardCompact__buttonText {
font-size: var(--wp--preset--font-size--xs);
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
.c-interviewCardCompact__buttonMeta {
display: grid;
grid-template-columns: auto 0.8125rem;
gap: var(--wp--preset--spacing--4);
align-items: center;
font-size: var(--wp--preset--font-size--xs);
line-height: 1;
white-space: nowrap;
}
.c-interviewCardCompact__externalIcon {
display: block;
mask: url(//test.pai-r.com/wp-content/themes/PAI-R/img/common/icon_blank.svg) no-repeat center/contain;
width: 0.8125rem;
height: 0.6875rem;
background-color: currentcolor;
}
.c-tagList {
display: flex;
flex-wrap: wrap;
gap: 0.375rem var(--wp--preset--spacing--12);
}
.c-tagList__tag {
font-size: var(--wp--preset--font-size--sm);
font-weight: bold;
line-height: 1.2;
color: var(--wp--preset--color--darkgray);
display: flex;
align-items: flex-start;
gap: var(--wp--preset--spacing--4);
}
@media screen and (width < 768px) {
.c-tagList__tag {
font-size: 0.75rem;
}
}
.c-tagList__tag::before {
content: "#";
display: block;
flex-shrink: 0;
}
.c-category {
display: flex;
align-items: center;
width: fit-content;
padding: 0.5625rem 0.75rem 0.5rem;
border: 0.0625rem solid var(--wp--preset--color--blue);
border-radius: 6.1875rem;
background-color: var(--wp--preset--color--white);
color: var(--wp--preset--color--blue);
font-family: var(--wp--preset--font-family--sans-ja);
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: background-color 400ms ease-in-out, color 400ms ease-in-out;
}
.c-category.is-active, .c-category[aria-current=page] {
background-color: var(--wp--preset--color--blue);
color: var(--wp--preset--color--white);
}
@media screen and (width < 768px) {
.c-category {
padding: 0.5rem 0.75rem 0.4375rem;
font-size: 0.9375rem;
}
}
@media (any-hover: hover) {
.c-category:hover {
background-color: var(--wp--preset--color--blue);
color: var(--wp--preset--color--white);
opacity: 1;
}
}
.c-search {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
width: 100%;
height: clamp(3rem, 2.584rem + 1.71vw, 4rem);
min-width: 0;
padding: 0.5rem 0.875rem 0.5rem 1rem;
border: 0.0625rem solid var(--wp--preset--color--gray);
border-radius: 0.25rem;
background-color: var(--wp--preset--color--white);
}
.c-search:focus-within {
outline: 0.125rem solid var(--wp--preset--color--blue);
outline-offset: 0.125rem;
}
.c-search .c-search__input {
width: 100%;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
font-family: var(--wp--preset--font-family--sans-ja);
font-size: var(--wp--preset--font-size--default);
font-weight: 500;
line-height: 1.6;
outline: 0;
}
.c-search .c-search__input::placeholder {
color: #b0bcc2;
opacity: 1;
}
.c-search .c-search__button {
display: grid;
flex-shrink: 0;
place-items: center;
width: clamp(1.5rem, 1.292rem + 0.85vw, 2rem);
aspect-ratio: 1;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.c-search .c-search__icon {
display: block;
width: 100%;
height: auto;
}
.c-filterPanel {
border-top: 0.0625rem solid var(--wp--preset--color--black);
border-bottom: 0.0625rem solid var(--wp--preset--color--black);
}
.c-filterPanel--plain .c-filterPanel__content {
gap: clamp(1.25rem, 1.146rem + 0.43vw, 1.5rem);
}
.c-filterPanel__trigger {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1rem;
align-items: center;
width: 100%;
padding: 1rem;
border: 0;
border-bottom: 0.0625rem dotted transparent;
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
}
.c-filterPanel__trigger[aria-expanded=true] {
background-image: linear-gradient(to left, var(--wp--preset--color--black) 1px, transparent 1px);
background-size: 0.25rem 0.0625rem;
background-repeat: repeat-x;
background-position: bottom;
}
@media screen and (width < 768px) {
.c-filterPanel__trigger {
padding: 1rem 0.5rem;
}
}
@media (any-hover: hover) {
.c-filterPanel__trigger:hover {
opacity: 1;
}
.c-filterPanel__trigger:hover .c-filterPanel__toggleIcon {
background-color: var(--wp--preset--color--blue);
}
.c-filterPanel__trigger:hover .c-filterPanel__toggleIcon::before, 
.c-filterPanel__trigger:hover .c-filterPanel__toggleIcon::after {
background-color: var(--wp--preset--color--white);
}
}
.c-filterPanel__trigger--static {
cursor: default;
background-image: linear-gradient(to left, var(--wp--preset--color--black) 1px, transparent 1px);
background-size: 0.25rem 0.0625rem;
background-repeat: repeat-x;
background-position: bottom;
}
.c-filterPanel__heading {
display: flex;
gap: 0.75rem;
align-items: center;
min-width: 0;
}
.c-filterPanel__headingEn {
font-family: var(--wp--preset--font-family--sans-en);
font-size: var(--wp--preset--font-size--md);
font-weight: 500;
line-height: 1;
}
.c-filterPanel__headingJa {
color: var(--wp--preset--color--darkgray);
margin-top: 0.125rem;
font-size: clamp(0.813rem, 0.787rem + 0.11vw, 0.875rem);
font-weight: 500;
line-height: 1;
}
.c-filterPanel__toggleIcon {
position: relative;
display: block;
width: clamp(1.188rem, 1.084rem + 0.43vw, 1.438rem);
aspect-ratio: 1;
border: 0.0625rem solid var(--wp--preset--color--blue);
border-radius: 50%;
transition: background-color 400ms ease-in-out;
}
.c-filterPanel__toggleIcon::before, .c-filterPanel__toggleIcon::after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: clamp(0.563rem, 0.511rem + 0.21vw, 0.688rem);
height: 1px;
background-color: var(--wp--preset--color--blue);
translate: -50% -50%;
border-radius: 0.0625rem;
transition: rotate 400ms ease-in-out, background-color 400ms ease-in-out;
}
.c-filterPanel__toggleIcon::after {
rotate: 90deg;
}
.c-filterPanel__trigger[aria-expanded=true] .c-filterPanel__toggleIcon::after {
rotate: 0deg;
}
.c-filterPanel__body {
overflow: hidden;
}
.c-filterPanel__content {
display: grid;
gap: 1.25rem;
padding: 1.5rem 1rem;
}
@media screen and (width < 768px) {
.c-filterPanel__content {
padding: 1.25rem 0.5rem;
}
}
.c-filterPanel__row {
display: grid;
grid-template-columns: 9.375rem minmax(0, 1fr);
gap: 1rem;
align-items: flex-start;
}
@media screen and (width < 768px) {
.c-filterPanel__row {
grid-template-columns: minmax(0, 1fr);
gap: 0.5rem;
align-items: start;
}
}
.c-filterPanel__row:has(.c-search) {
align-items: center;
}
.c-filterPanel__rowLabel {
font-size: clamp(0.875rem, 0.849rem + 0.11vw, 0.938rem);
font-weight: 500;
line-height: 1.6;
margin-top: 0.25rem;
}
@media screen and (width < 768px) {
.c-filterPanel__rowLabel {
margin-top: 0;
}
}
.c-filterPanel__categories {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.375rem;
min-width: 0;
}
.c-filterPanel__categoryItem.is-hidden {
display: none;
}
.c-filterPanel__categoryItem--more {
display: flex;
}
.c-filterPanel__moreButton {
display: grid;
grid-template-columns: auto auto;
gap: 0.25rem;
align-items: center;
padding: 0.5625rem 0.75rem 0.5rem;
border: 0.0625rem solid var(--wp--preset--color--black);
border-radius: 6.1875rem;
background-color: var(--wp--preset--color--black);
color: var(--wp--preset--color--white);
font-family: var(--wp--preset--font-family--sans-ja);
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
@media (any-hover: hover) {
.c-filterPanel__moreButton:hover {
opacity: 1;
background-color: #fff;
color: var(--wp--preset--color--black);
}
.c-filterPanel__moreButton:hover .c-filterPanel__moreIcon::before,
.c-filterPanel__moreButton:hover .c-filterPanel__moreIcon::after {
background-color: var(--wp--preset--color--black);
}
}
.c-filterPanel__moreIcon {
position: relative;
display: block;
width: 0.6875rem;
height: 0.6875rem;
aspect-ratio: 1;
}
.c-filterPanel__moreIcon::before, .c-filterPanel__moreIcon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background-color: var(--wp--preset--color--white);
translate: -50% -50%;
transition: background-color 0.3s ease-in-out;
}
.c-filterPanel__moreIcon::before {
width: 100%;
height: 1px;
}
.c-filterPanel__moreIcon::after {
width: 1px;
height: 100%;
}
.c-filterPanel__checkInput {
position: absolute;
overflow: hidden;
width: 0.0625rem;
height: 0.0625rem;
clip-path: inset(50%);
white-space: nowrap;
}
.c-filterPanel__categoryItem:has(.c-filterPanel__checkInput:focus-visible) {
border-radius: 6.1875rem;
outline: 0.125rem solid var(--wp--preset--color--blue);
outline-offset: 0.125rem;
}
.c-filterPanel__subHeading {
padding-bottom: 0.5rem;
border-bottom: 0.0625rem dotted var(--wp--preset--color--gray);
color: var(--wp--preset--color--blue);
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
line-height: 1;
}
.c-filterPanel__checks {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
min-width: 0;
}
.c-filterPanel__checkItem {
display: flex;
gap: 0.375rem;
align-items: center;
color: var(--wp--preset--color--blue);
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
line-height: 1;
cursor: pointer;
}
.c-filterPanel__checkItem:has(.c-filterPanel__checkInput:focus-visible) {
outline: 0.125rem solid var(--wp--preset--color--blue);
outline-offset: 0.125rem;
}
.c-filterPanel__checkBox {
position: relative;
display: block;
width: 1.5rem;
aspect-ratio: 1;
border: 0.0625rem solid var(--wp--preset--color--blue);
border-radius: 0.25rem;
background-color: var(--wp--preset--color--white);
transition: background-color 400ms ease-in-out;
}
.c-filterPanel__checkBox::after {
content: "";
position: absolute;
inset: 0;
width: 0.75rem;
height: 0.5625rem;
margin: auto;
mask: url(//test.pai-r.com/wp-content/themes/PAI-R/img/common/icon_check.svg) no-repeat center/contain;
background-color: var(--wp--preset--color--white);
opacity: 0;
transition: opacity 400ms ease-in-out;
}
.c-filterPanel__checkInput:checked + .c-filterPanel__checkBox {
background-color: var(--wp--preset--color--blue);
}
.c-filterPanel__checkInput:checked + .c-filterPanel__checkBox::after {
opacity: 1;
}
.c-breadcrumb {
display: flex;
justify-content: flex-end;
position: relative;
padding-inline: 2rem;
font-size: var(--wp--preset--font-size--sm);
line-height: 1.2;
z-index: 3;
}
@media screen and (width < 768px) {
.c-breadcrumb {
padding-inline: 1.5rem;
font-size: 0.75rem;
}
}
.c-breadcrumb__list {
display: flex;
gap: 0.375rem;
align-items: center;
overflow-x: auto;
max-width: 100%;
padding: 0.25rem;
scrollbar-width: none;
-ms-overflow-style: none;
}
.c-breadcrumb__list::-webkit-scrollbar {
display: none;
}
.c-breadcrumb__item {
display: flex;
flex-shrink: 0;
gap: 0.25rem;
align-items: center;
white-space: nowrap;
}
.c-breadcrumb__item + .c-breadcrumb__item::before {
content: "";
flex-shrink: 0;
mask: url(//test.pai-r.com/wp-content/themes/PAI-R/img/common/icon_arrow.svg) no-repeat center center/contain;
width: 0.5rem;
height: 0.5rem;
background-color: var(--wp--preset--color--darkgray);
}
.c-breadcrumb__link {
color: var(--wp--preset--color--darkgray);
display: inline;
background-image: linear-gradient(90deg, var(--wp--preset--color--darkgray), var(--wp--preset--color--darkgray));
background-position: left calc(100% - 0.15em);
background-repeat: no-repeat;
background-size: 100% 1px;
text-decoration: none;
transition: background-position 0s, background-size 0.3s;
}
@media (any-hover: hover) {
.c-breadcrumb__link:hover {
opacity: 1;
background-position: right calc(100% - 0.15em);
background-size: 0 1px;
transition: background-position 0s, background-size 0.3s;
}
}
.c-pager__list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: clamp(0.25rem, 0.146rem + 0.43vw, 0.5rem);
}
.c-pager .page-numbers {
display: flex;
align-items: center;
justify-content: center;
width: clamp(2.5rem, 2.292rem + 0.85vw, 3rem);
aspect-ratio: 1;
border: 0.0625rem solid var(--wp--preset--color--gray);
border-radius: 50%;
font-family: var(--wp--preset--font-family--sans-en);
font-size: 1rem;
font-weight: 500;
line-height: 1;
transition: background-color 0.4s ease-in-out, border-color 0.4s ease-in-out, color 0.4s ease-in-out;
}
.c-pager .page-numbers.current {
border-color: var(--wp--preset--color--black);
background-color: var(--wp--preset--color--black);
color: var(--wp--preset--color--white);
}
.c-pager .page-numbers.dots {
width: auto;
border: none;
border-radius: 0;
} .c-pager .page-numbers.prev,
.c-pager .page-numbers.next {
position: relative;
overflow: clip;
font-size: 0;
}
.c-pager .page-numbers.prev::before,
.c-pager .page-numbers.prev::after,
.c-pager .page-numbers.next::before,
.c-pager .page-numbers.next::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 0.625rem;
aspect-ratio: 1;
mask: url(//test.pai-r.com/wp-content/themes/PAI-R/img/common/icon_arrow.svg) no-repeat center/contain;
background-color: var(--wp--preset--color--black);
transition: translate 400ms ease-in-out, background-color 0.4s ease-in-out;
}
.c-pager .page-numbers.prev::before,
.c-pager .page-numbers.next::before {
translate: -50% -50%;
}
.c-pager .page-numbers.prev::after,
.c-pager .page-numbers.next::after {
translate: -400% -50%;
}
.c-pager .page-numbers.prev::before,
.c-pager .page-numbers.prev::after {
scale: -1 1;
}
.c-pager .page-numbers.prev {
margin-right: clamp(0.25rem, -0.062rem + 1.28vw, 1rem);
}
.c-pager .page-numbers.next {
margin-left: clamp(0.25rem, -0.062rem + 1.28vw, 1rem);
} @media (any-hover: hover) {
.c-pager a.page-numbers:hover {
opacity: 1;
border-color: var(--wp--preset--color--black);
background-color: var(--wp--preset--color--black);
color: var(--wp--preset--color--white);
}
.c-pager a.page-numbers.prev:hover::before,
.c-pager a.page-numbers.next:hover::before {
translate: 400% -50%;
}
.c-pager a.page-numbers.prev:hover::after,
.c-pager a.page-numbers.next:hover::after {
translate: -50% -50%;
}
.c-pager a.page-numbers:hover::before,
.c-pager a.page-numbers:hover::after {
background-color: var(--wp--preset--color--white);
}
}
.c-links {
padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--64);
background-color: var(--wp--preset--color--lightblue);
}
@media screen and (width < 768px) {
.c-links {
padding: 1.5rem;
}
}
.c-links__text {
font-size: var(--wp--preset--font-size--default);
font-weight: bold;
line-height: 1.8;
text-align: center;
}
.c-links__list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: var(--wp--preset--spacing--16);
margin-top: var(--wp--preset--spacing--24);
}
@media screen and (width < 768px) {
.c-links__list {
flex-direction: column;
justify-content: stretch;
}
}
.c-tabLinks {
display: flex;
gap: 0.625rem;
border-bottom: 0.125rem solid var(--wp--preset--color--blue);
}
@media screen and (width < 768px) {
.c-tabLinks {
gap: 8px;
}
}
.c-tabLinks__tab {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
padding: var(--wp--preset--spacing--24) 0.625rem var(--wp--preset--spacing--16);
border: 0.125rem solid var(--wp--preset--color--gray);
border-bottom: none;
border-radius: 0.5rem 0.5rem 0 0;
background-color: var(--wp--preset--color--white);
color: var(--wp--preset--color--darkgray);
font-size: var(--wp--preset--font-size--default);
font-weight: 500;
line-height: 1.4;
text-align: center;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
@media screen and (width < 768px) {
.c-tabLinks__tab {
padding: 0.75rem 0.125rem 0.625rem;
}
}
@media (any-hover: hover) {
.c-tabLinks__tab:hover {
opacity: 1;
color: var(--wp--preset--color--blue);
background-color: var(--wp--preset--color--lightblue);
}
}
.c-tabLinks__tab--active {
margin-bottom: -0.125rem;
border-color: var(--wp--preset--color--blue);
border-bottom: 0.125rem solid var(--wp--preset--color--white);
color: var(--wp--preset--color--blue);
font-weight: bold;
}
@media screen and (width < 768px) {
.c-tabLinks__tab--active {
font-weight: 500;
}
}
.c-sideNav {
padding-block: var(--wp--preset--spacing--12);
border-top: 0.0625rem solid var(--wp--preset--color--black);
border-bottom: 0.0625rem solid var(--wp--preset--color--black);
}
@media screen and (width < 768px) {
.c-sideNav {
padding-block: 4px;
}
}
.c-sideNav__item + .c-sideNav__item {
position: relative;
}
.c-sideNav__item + .c-sideNav__item::before {
content: "";
position: absolute;
top: 0;
left: var(--wp--preset--spacing--16);
width: calc(100% - var(--wp--preset--spacing--16));
height: 0.0625rem;
background-image: linear-gradient(to right, var(--wp--preset--color--blue) 1px, transparent 1px);
background-position: left top;
background-repeat: repeat-x;
background-size: 0.1875rem 0.0625rem;
}
.c-sideNav__link {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wp--preset--spacing--8);
padding-block: var(--wp--preset--spacing--12);
padding-left: var(--wp--preset--spacing--16);
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
line-height: 1.4;
}
@media (any-hover: hover) {
.c-sideNav__link:hover {
opacity: 1;
}
.c-sideNav__link:hover .c-arrow {
opacity: 1;
}
.c-sideNav__link:hover .c-arrow::before {
translate: 300% -50%;
}
.c-sideNav__link:hover .c-arrow::after {
translate: -50% -50%;
}
}
.c-sideNav__link.is-active {
font-weight: 700;
color: var(--wp--preset--color--blue);
}
.c-sideNav__link.is-active::before {
content: "";
position: absolute;
top: 50%;
left: 0.25rem;
translate: 0 -50%;
width: 0.375rem;
height: auto;
aspect-ratio: 1;
border-radius: 50%;
background-color: var(--wp--preset--color--blue);
}
@media screen and (width < 768px) {
.c-sideNav__link.is-active::before {
content: none;
}
}
.c-sideNav__arrow {
flex-shrink: 0;
width: 1rem;
}
.c-sideNav__arrow::before, .c-sideNav__arrow::after {
width: 0.375rem;
}
.c-sideNavSp {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 90;
padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--24) var(--wp--preset--spacing--8);
border-radius: 0.5rem;
box-shadow: 0 -0.0625rem 0.75rem color-mix(in srgb, var(--wp--preset--color--blue) 25%, transparent);
background-color: var(--wp--preset--color--white);
transition: translate 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.c-sideNavSp::after {
content: "";
position: absolute;
right: var(--wp--preset--spacing--24);
bottom: var(--wp--preset--spacing--8);
left: var(--wp--preset--spacing--24);
height: 0.0625rem;
background-color: var(--wp--preset--color--black);
}
@media screen and (width >= 768px) {
.c-sideNavSp {
display: none;
}
}
.c-sideNavSp.is-hidden {
opacity: 0;
pointer-events: none;
translate: 0 100%;
} .c-sideNavSp__toggle {
position: relative;
display: flex;
gap: var(--wp--preset--spacing--8);
justify-content: space-between;
align-items: center;
width: 100%;
padding-block: var(--wp--preset--spacing--16);
padding-inline: var(--wp--preset--spacing--8);
text-align: left;
}
.c-sideNavSp__toggle::before, .c-sideNavSp__toggle::after {
content: "";
position: absolute;
right: 0;
left: 0;
height: 0.0625rem;
background-color: var(--wp--preset--color--black);
}
.c-sideNavSp__toggle::before {
top: 0;
}
.c-sideNavSp__toggle::after {
bottom: 0;
}
.c-sideNavSp__label {
font-size: var(--wp--preset--font-size--lg);
font-weight: 500;
line-height: 1;
}
.c-sideNavSp__icon {
position: relative;
flex-shrink: 0;
width: 1.1875rem;
height: 1.1875rem;
border: 0.0625rem solid var(--wp--preset--color--blue);
border-radius: 50%;
transition: background-color 0.3s ease-in-out;
}
.c-sideNavSp__icon::before, .c-sideNavSp__icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background-color: var(--wp--preset--color--blue);
translate: -50% -50%;
transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.c-sideNavSp__icon::before {
width: 0.5625rem;
height: 0.09375rem;
}
.c-sideNavSp__icon::after {
width: 0.09375rem;
height: 0.5625rem;
}
.c-sideNavSp.is-open .c-sideNavSp__icon {
background-color: var(--wp--preset--color--blue);
}
.c-sideNavSp.is-open .c-sideNavSp__icon::before {
background-color: var(--wp--preset--color--white);
}
.c-sideNavSp.is-open .c-sideNavSp__icon::after {
opacity: 0;
} .c-sideNavSp__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease-in-out;
}
.c-sideNavSp.is-open .c-sideNavSp__panel {
grid-template-rows: 1fr;
}
.c-sideNavSp__inner {
overflow: clip;
min-height: 0;
}
.c-sideNavSp__list {
padding-block: var(--wp--preset--spacing--8);
padding-inline: var(--wp--preset--spacing--8);
}
.c-sideNavSp__item + .c-sideNavSp__item {
position: relative;
}
.c-sideNavSp__item + .c-sideNavSp__item::before {
content: "";
position: absolute;
top: 0;
left: var(--wp--preset--spacing--8);
width: calc(100% - var(--wp--preset--spacing--16));
height: 0.0625rem;
background-image: linear-gradient(to right, var(--wp--preset--color--blue) 0.0625rem, transparent 0.0625rem);
background-size: 0.1875rem 0.0625rem;
background-repeat: repeat-x;
}
.c-sideNavSp__link {
position: relative;
display: flex;
gap: var(--wp--preset--spacing--8);
justify-content: space-between;
align-items: center;
padding-left: var(--wp--preset--spacing--8);
padding-block: var(--wp--preset--spacing--8);
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
line-height: 1.4;
}
.c-sideNavSp__link.is-active {
color: var(--wp--preset--color--blue);
font-weight: 700;
}
.c-sideNavSp__link.is-active::before {
content: "";
position: absolute;
top: 50%;
left: -0.25rem;
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
background-color: var(--wp--preset--color--blue);
translate: 0 -50%;
}
.c-sideNavSp__arrow {
flex-shrink: 0;
width: 1rem;
rotate: 90deg;
}
.c-sideNavSp__arrow::before, .c-sideNavSp__arrow::after {
width: 0.375rem;
}
.c-sideTab__list {
display: grid;
gap: 0.25rem;
}
@media screen and (width < 768px) {
.c-sideTab__list {
display: flex;
justify-content: center;
width: 100%;
}
}
@media screen and (width < 768px) {
.c-sideTab__item {
flex: 1;
max-width: 10.5625rem;
}
}
.c-sideTab__link {
display: flex;
justify-content: center;
align-items: center;
padding: 1rem 1.25rem;
border: 0.0625rem solid var(--wp--preset--color--black);
border-right: 0;
border-radius: 0.5rem 0 0 0.5rem;
background-color: var(--wp--preset--color--black);
color: var(--wp--preset--color--white);
writing-mode: vertical-rl;
font-feature-settings: "vkrn" 1, "vrt2" 1;
font-size: 0.9375rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.2em;
transition: background-color 400ms ease-in-out, color 400ms ease-in-out;
}
@media screen and (width < 768px) {
.c-sideTab__link {
width: 100%;
padding: 0.75rem 1rem;
border: 0.0625rem solid var(--wp--preset--color--black);
border-bottom: 0;
border-radius: 0.5rem 0.5rem 0 0;
writing-mode: horizontal-tb;
text-orientation: mixed;
font-feature-settings: normal;
letter-spacing: 0;
white-space: nowrap;
}
}
@media (any-hover: hover) {
.c-sideTab__link:hover {
border-color: var(--wp--preset--color--blue);
background-color: var(--wp--preset--color--blue);
color: var(--wp--preset--color--white);
opacity: 1;
}
} .c-sideTab__link--white {
background-color: var(--wp--preset--color--white);
color: var(--wp--preset--color--black);
}
@media screen and (width < 768px) {
.c-sideTab__link--white {
border: 0.0625rem solid var(--wp--preset--color--black);
border-bottom: 0;
}
}
.c-clientsSlider {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--12);
margin-inline: calc(50% - 50vw);
}
.c-clientsSlider__row {
--clients-slide-width: var(--clients-slide-width-pc, 9.25rem);
--clients-slide-gap: var(--clients-slide-gap-pc, 0.75rem);
--clients-slide-duration: 5.3s;
display: flex;
overflow: hidden;
}
@media screen and (width < 768px) {
.c-clientsSlider__row {
--clients-slide-width: var(--clients-slide-width-sp, 7.5rem);
--clients-slide-gap: var(--clients-slide-gap-sp, 0.5rem);
}
}
.c-clientsSlider__list {
display: flex;
flex-shrink: 0;
gap: var(--clients-slide-gap);
padding-right: var(--clients-slide-gap);
animation: c-clientsSlider-scroll calc(var(--clients-count, 12) * var(--clients-slide-duration)) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.c-clientsSlider__list {
animation-play-state: paused;
}
}
.c-clientsSlider__item {
flex-shrink: 0;
width: var(--clients-slide-width);
}
.c-clientsSlider__item img {
display: block;
width: 100%;
height: auto;
}
.c-clientsSlider__row--stop {
justify-content: center;
}
.c-clientsSlider__row--stop .c-clientsSlider__list {
flex-shrink: 1;
max-width: 100%;
padding-right: 0;
animation: none;
}
@media screen and (width < 768px) {
.c-clientsSlider__row--stop .c-clientsSlider__list {
flex-wrap: wrap;
justify-content: center;
}
}
@keyframes c-clientsSlider-scroll {
from {
translate: 0 0;
}
to {
translate: -100% 0;
}
} .c-msgBox {
position: relative;
display: grid;
grid-template-columns: minmax(0, 605fr) minmax(0, 501fr);
gap: var(--wp--preset--spacing--12);
align-items: center;
padding: 3.5rem 3.125rem 3.5rem var(--wp--preset--spacing--80);
}
@media screen and (width < 1080px) {
.c-msgBox {
grid-template-columns: minmax(0, 1fr);
}
}
@media screen and (width < 768px) {
.c-msgBox {
padding: 2rem 1.5rem;
}
}
.c-msgBox__body {
position: relative;
z-index: 2;
}
.c-msgBox__title {
font-size: clamp(1.25rem, 0.73rem + 2.13vw, 2.5rem);
font-weight: 500;
line-height: 1.6;
}
.c-msgBox__title strong {
color: var(--wp--preset--color--blue);
}
.c-msgBox__text {
margin-top: var(--wp--preset--spacing--24);
font-size: var(--wp--preset--font-size--default);
font-weight: 500;
line-height: 1.8;
}
@media screen and (width < 768px) {
.c-msgBox__text {
margin-top: 0.75rem;
}
}
.c-msgBox__figure {
position: relative;
z-index: 2;
}
@media screen and (width < 1080px) {
.c-msgBox__figure {
order: -1;
width: 100%;
max-width: 31.25rem;
margin-inline: auto;
}
}
.c-msgBox__img,
.c-msgBox__device {
width: 100%;
height: 100%;
aspect-ratio: 501/429;
object-fit: cover;
}
.c-msgBox__device {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.c-msgBox__bg {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.c-msgBox__bg img {
width: 100%;
height: 100%;
object-fit: cover;
} .c-msgBox__deco {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.c-msgBox__decoSvg {
width: 100%;
height: 100%;
}
.c-msgBox__decoMask {
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.c-msgBox__deco.is-active .c-msgBox__decoMask {
animation: c-msgBox-draw 1.6s ease-in-out forwards;
}
@keyframes c-msgBox-draw {
from {
stroke-dashoffset: 1;
}
to {
stroke-dashoffset: 0.0035;
}
}
@media (prefers-reduced-motion: reduce) {
.c-msgBox__deco.is-active .c-msgBox__decoMask {
stroke-dashoffset: 0.0035;
animation: none;
}
}
.c-cta-text {
margin-top: 3.5rem;
}
@media screen and (width < 768px) {
.c-cta-text {
margin-top: var(--wp--preset--spacing--40);
}
}
.c-cta-text__inner {
position: relative;
overflow: hidden;
padding: var(--wp--preset--spacing--48);
border-radius: var(--wp--preset--spacing--8);
background-color: var(--wp--preset--color--lightblue);
}
@media screen and (width < 768px) {
.c-cta-text__inner {
padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--24);
}
}
.c-cta-text__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 21.5rem;
grid-template-areas: "logo  image" "title image" "list  list" "desc  desc" "btn   btn";
column-gap: 1.5rem;
}
@media screen and (width < 768px) {
.c-cta-text__grid {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "logo" "title" "image" "list" "desc" "btn";
column-gap: 0;
}
}
.c-cta-text__logo {
grid-area: logo;
margin-top: 0;
}
.c-cta-text__logo img {
display: block;
width: 15.9375rem;
margin-inline: 0;
border-radius: 0;
}
@media screen and (width < 768px) {
.c-cta-text__logo img {
width: 14.625rem;
margin: 0 auto;
}
}
.c-cta-text__title {
grid-area: title;
margin-top: 0;
}
.c-cta-text__title-sub {
margin-top: 1.25rem;
color: var(--wp--preset--color--blue);
font-size: 0.9375rem;
line-height: 1.4;
}
@media screen and (width < 768px) {
.c-cta-text__title-sub {
text-align: center;
}
}
.c-cta-text__title-main {
margin-top: var(--wp--preset--spacing--40);
font-size: var(--wp--preset--font-size--md);
font-weight: 700;
line-height: 1.8;
}
@media screen and (width < 768px) {
.c-cta-text__title-main {
margin-top: var(--wp--preset--spacing--24);
font-size: var(--wp--preset--font-size--md);
text-align: center;
}
}
.c-cta-text__list {
grid-area: list;
margin-top: var(--wp--preset--spacing--24);
padding-left: var(--wp--preset--spacing--4);
}
.c-cta-text__list-item {
position: relative;
padding-left: var(--wp--preset--spacing--24);
font-size: 0.9375rem;
line-height: 1.6;
}
.c-cta-text__list-item::before {
content: "";
position: absolute;
top: 0.25rem;
left: 0;
width: 1rem;
height: 1rem;
border-radius: 0;
background: url(//test.pai-r.com/wp-content/themes/PAI-R/img/common/icon_check2.svg) no-repeat center/contain;
}
.c-cta-text__desc {
grid-area: desc;
margin-top: var(--wp--preset--spacing--32);
font-size: 0.9375rem;
line-height: 1.8;
}
@media screen and (width < 768px) {
.c-cta-text__desc {
margin-top: var(--wp--preset--spacing--24);
}
}
.c-cta-text__image {
grid-area: image;
align-self: center;
width: 21.5rem;
margin: 0;
}
@media screen and (width < 768px) {
.c-cta-text__image {
justify-self: center;
width: 17.9375rem;
margin-top: var(--wp--preset--spacing--24);
}
}
.c-cta-text__image img {
width: 100%;
height: auto;
border-radius: 0;
}
.c-cta-text__btn-wrap {
grid-area: btn;
margin-top: var(--wp--preset--spacing--24);
}
.c-cta-text__btn {
display: inline-grid;
background-image: none;
text-decoration: none;
}
.cta-banner-container {
margin-top: 3.5rem;
}
@media screen and (width < 768px) {
.cta-banner-container {
margin-top: var(--wp--preset--spacing--40);
}
}
.cta-banner {
display: grid;
grid-template-columns: min(40%, 13.75rem) auto;
column-gap: var(--wp--preset--spacing--24);
align-items: center;
}
@media screen and (width < 768px) {
.cta-banner {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--wp--preset--spacing--12);
}
}
.cta-banner-heading a {
display: block;
background-image: none;
text-decoration: none;
}
.cta-banner-heading__img {
width: 100%;
height: auto;
margin-top: 0;
border-radius: var(--wp--preset--spacing--8);
}
.cta-banner-body__catch {
font-size: 1.125rem;
font-weight: 700;
line-height: 1.4;
}
@media screen and (width < 768px) {
.cta-banner-body__catch {
display: none;
}
}
.cta-banner-body__sentence {
margin-top: var(--wp--preset--spacing--8);
font-size: var(--wp--preset--font-size--sm);
line-height: 1.6;
}
@media screen and (width < 768px) {
.cta-banner-body__sentence {
margin-top: 0;
}
}
.cta-banner-body__link {
margin-top: var(--wp--preset--spacing--8);
line-height: 1.4;
text-align: right;
}
.cta-banner-body__link a {
display: inline-flex;
gap: var(--wp--preset--spacing--8);
align-items: center;
background-image: none;
font-size: 0.9375rem;
line-height: 1.6;
}
@media screen and (width < 768px) {
.cta-banner-body__link a {
font-size: 0.75rem;
}
}
@media (any-hover: hover) {
.cta-banner-body__link a:hover .c-arrow {
opacity: 1;
}
.cta-banner-body__link a:hover .c-arrow::before {
translate: 300% -50%;
}
.cta-banner-body__link a:hover .c-arrow::after {
translate: -50% -50%;
}
}
.cta-banner-body__linkText {
display: inline;
background-image: linear-gradient(90deg, var(--wp--preset--color--blue), var(--wp--preset--color--blue));
background-position: left calc(100% - 0.15em);
background-repeat: no-repeat;
background-size: 100% 1px;
text-decoration: none;
transition: background-position 0s, background-size 0.3s;
}
@media (any-hover: hover) {
.cta-banner-body__link a:hover .cta-banner-body__linkText {
background-position: right calc(100% - 0.15em);
background-size: 0 1px;
transition: background-position 0s, background-size 0.3s;
}
}
.p-clients {
overflow-x: clip;
margin-block: var(--wp--preset--spacing--120);
}
@media screen and (width < 768px) {
.p-clients {
display: grid;
grid-template-columns: 100%;
margin-block: var(--wp--preset--spacing--64) var(--wp--preset--spacing--80);
}
}
.p-clients__head {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
gap: var(--wp--preset--spacing--16);
align-items: flex-start;
}
@media screen and (width < 768px) {
.p-clients__head {
display: contents;
}
}
.p-clients__title {
margin-top: 0.75rem;
font-size: clamp(1.75rem, 1.438rem + 1.28vw, 2.5rem);
font-weight: 500;
line-height: 1;
}
@media screen and (width < 768px) {
.p-clients__title {
margin-top: 0;
padding-inline: 1.5rem;
line-height: 1.6;
text-align: center;
}
}
@media screen and (width < 768px) {
.p-clients__btn {
order: 1;
margin-top: 1.5rem;
padding-inline: 1.5rem;
text-align: center;
}
}
.p-clients .c-clientsSlider {
margin-top: var(--wp--preset--spacing--40);
}
@media screen and (width < 768px) {
.p-clients .c-clientsSlider {
margin-top: 1rem;
}
} @media screen and (width < 768px) {
.p-clients--line {
position: relative;
padding-top: 3rem;
}
}
.p-clients--line .p-clients__head {
padding-top: var(--wp--preset--spacing--64);
}
.p-clients--line .p-clients__head::before {
content: "";
position: absolute;
top: 0;
left: 50%;
display: block;
width: calc(100% - 5rem);
height: 1px;
background-image: linear-gradient(to right, var(--wp--preset--color--blue) 1px, transparent 1px);
background-position: left bottom;
background-size: 0.1875rem 0.0625rem;
background-repeat: repeat-x;
translate: -50% 0;
}
@media screen and (width < 768px) {
.p-clients--line .p-clients__head::before {
width: calc(100% - 3rem);
}
} .p-clients--company {
margin-block: 0;
padding-bottom: var(--wp--preset--spacing--160);
background-color: var(--wp--preset--color--white);
position: relative;
z-index: 1;
}
@media screen and (width < 768px) {
.p-clients--company .p-clients__title {
text-align: left;
}
}
.p-footer {
position: relative;
overflow: clip;
margin-top: clamp(5rem, 1.882rem + 12.79vw, 12.5rem);
padding-block: var(--wp--preset--spacing--80) 6.6875rem;
color: var(--wp--preset--color--white);
}
@media screen and (width < 768px) {
.p-footer {
padding-block: 4rem 2rem;
}
}
.p-footer::before {
content: "";
position: absolute;
top: -0.0625rem;
left: 0;
z-index: 1;
width: 100%;
height: 6.875rem;
background-color: var(--wp--preset--color--white);
clip-path: shape(from 0 0, line to 100% 0, line to 100% 100%, curve to 0 100% with 50% -6.5625rem, close);
}
@media screen and (width < 768px) {
.p-footer::before {
height: 1.8125rem;
clip-path: shape(from 0 0, line to 100% 0, line to 100% 100%, curve to 0 100% with 50% -1.5rem, close);
}
}
.p-footer__media {
position: absolute;
inset: -100vh 0 0;
z-index: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: clip;
}
.p-footer__screen {
position: sticky;
bottom: 0;
flex-shrink: 0;
overflow: hidden;
height: 100vh;
background-color: var(--wp--preset--color--lightblue);
}
@media screen and (width < 768px) {
.p-footer__screen {
height: calc(100vh + 6.25rem);
}
}
.p-footer__video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
.p-footer__video {
display: none;
}
}
.p-footer__mask {
position: absolute;
inset: 0;
background-color: rgba(1, 39, 56, 0.7);
}
.p-footer__top {
position: relative;
display: flex;
justify-content: center;
margin-bottom: var(--wp--preset--spacing--80);
}
@media screen and (width < 768px) {
.p-footer__top {
margin-bottom: 3rem;
}
}
.p-footer__scrollTop {
position: absolute;
top: 3.1875rem;
right: 5rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
padding: 0;
background-color: transparent;
cursor: pointer;
}
@media screen and (width < 768px) {
.p-footer__scrollTop {
top: 0;
right: 1.5rem;
width: 3rem;
height: 3rem;
}
}
@media (any-hover: hover) {
.p-footer__scrollTop:hover {
opacity: 1;
}
.p-footer__scrollTop:hover::before {
rotate: 180deg;
}
}
.p-footer__scrollTop::before {
content: "";
position: absolute;
inset: 0;
background: url(//test.pai-r.com/wp-content/themes/PAI-R/img/common/pagetop.png) no-repeat center/contain;
display: block;
transition: rotate 0.2s ease-in-out;
}
.p-footer__scrollTop::after {
content: "";
width: 0.625rem;
height: 0.625rem;
background-color: var(--wp--preset--color--white);
mask: url(//test.pai-r.com/wp-content/themes/PAI-R/img/common/icon_arrow.svg) no-repeat center/contain;
display: block;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
rotate: -90deg;
}
@media screen and (width < 768px) {
.p-footer__scrollTop::after {
width: 0.5rem;
height: 0.5rem;
}
}
.p-footer__brand {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--wp--preset--spacing--32);
}
.p-footer__logoLink {
display: block;
}
@media (any-hover: hover) {
.p-footer__logoLink:hover {
opacity: 1;
}
}
.p-footer__logo {
width: clamp(8.688rem, 6.115rem + 10.55vw, 14.875rem);
height: auto;
}
.p-footer__brandName {
font-size: var(--wp--preset--font-size--sm);
line-height: 1.6;
text-align: center;
}
.p-footer__inner {
position: relative;
}
.p-footer__main {
display: grid;
grid-template-columns: auto auto;
grid-template-areas: "info nav" "info certs";
justify-content: space-between;
gap: 0 var(--wp--preset--spacing--32);
align-items: start;
}
@media screen and (width < 1080px) {
.p-footer__main {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "nav" "info" "certs";
gap: 3rem;
}
}
.p-footer__info {
grid-area: info;
}
@media screen and (width < 1080px) {
.p-footer__info {
width: 100%;
}
}
.p-footer__office:nth-child(n+2) {
margin-top: 3.5rem;
}
@media screen and (width < 768px) {
.p-footer__office:nth-child(n+2) {
margin-top: 2rem;
}
}
.p-footer__officeTitle {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--8);
margin: 0;
font-size: var(--wp--preset--font-size--md);
font-weight: 700;
line-height: 1;
color: var(--wp--preset--color--white);
}
.p-footer__officeIcon {
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
background: url(//test.pai-r.com/wp-content/themes/PAI-R/img/common/icon_location.svg) no-repeat center/contain;
margin-top: -0.125rem;
}
.p-footer__officeAddress {
font-size: var(--wp--preset--font-size--sm);
line-height: 1.6;
margin-top: var(--wp--preset--spacing--16);
}
.p-footer__officeMap {
margin-top: var(--wp--preset--spacing--8);
display: inline-flex;
align-items: center;
justify-content: center;
padding-block: var(--wp--preset--spacing--4) 0.125rem;
padding-inline: 0.625rem;
border: 0.0625rem solid var(--wp--preset--color--white);
border-radius: 2.5rem;
font-family: var(--wp--preset--font-family--sans-en);
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
line-height: 1.6;
color: var(--wp--preset--color--white);
align-self: flex-start;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
@media (any-hover: hover) {
.p-footer__officeMap:hover {
opacity: 1;
background-color: var(--wp--preset--color--white);
color: var(--wp--preset--color--black);
}
}
.p-footer__contact {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--16);
margin-top: var(--wp--preset--spacing--32);
}
.p-footer__contactItem {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--8);
}
.p-footer__contactLabel {
font-size: var(--wp--preset--font-size--default);
font-weight: 700;
line-height: 1.6;
}
.p-footer__contactTel {
font-size: var(--wp--preset--font-size--sm);
line-height: 1.6;
}
.p-footer__contactHours {
font-size: var(--wp--preset--font-size--sm);
font-weight: 700;
line-height: 1.6;
}
.p-footer__portalBtn {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: var(--wp--preset--spacing--24);
padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--12) var(--wp--preset--spacing--12) var(--wp--preset--spacing--32);
border: 1px solid var(--wp--preset--color--white);
border-radius: 4.375rem;
color: var(--wp--preset--color--white);
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
align-self: flex-start;
margin-top: 3.5rem;
}
@media screen and (width < 1080px) {
.p-footer__portalBtn {
display: flex;
width: fit-content;
margin-inline: auto;
}
}
@media screen and (width < 768px) {
.p-footer__portalBtn {
min-width: 21.375rem;
}
}
@media (any-hover: hover) {
.p-footer__portalBtn:hover {
opacity: 1;
background-color: var(--wp--preset--color--white);
color: var(--wp--preset--color--blue);
}
.p-footer__portalBtn:hover .c-arrow {
opacity: 1;
}
.p-footer__portalBtn:hover .c-arrow::before {
translate: 300% -50%;
}
.p-footer__portalBtn:hover .c-arrow::after {
translate: -50% -50%;
}
}
.p-footer__portalBtnText {
font-size: var(--wp--preset--font-size--default);
font-weight: 700;
line-height: 1;
}
.p-footer__nav {
grid-area: nav;
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-areas: "company support contact" "company media   contact";
gap: var(--wp--preset--spacing--64) 5.5rem;
align-items: start;
}
@media screen and (width < 1080px) {
.p-footer__nav {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: none;
}
}
@media screen and (width < 768px) {
.p-footer__nav {
gap: 2rem;
}
}
.p-footer__navGroup {
display: contents;
}
@media screen and (width < 1080px) {
.p-footer__navGroup {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--64);
}
}
.p-footer__navCol--company {
grid-area: company;
}
.p-footer__navCol--support {
grid-area: support;
}
.p-footer__navCol--media {
grid-area: media;
}
.p-footer__navCol--contact {
grid-area: contact;
}
.p-footer__navCol {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--64);
margin: 0;
padding: 0;
list-style: none;
}
.p-footer__navItem {
display: flex;
align-items: flex-start;
flex-direction: column;
gap: var(--wp--preset--spacing--24);
}
.p-footer__navLink {
display: inline-block;
font-size: var(--wp--preset--font-size--md);
font-weight: 700;
line-height: 1;
color: var(--wp--preset--color--white);
transition: opacity 0.2s ease-in-out;
display: inline;
background-image: linear-gradient(90deg, var(--wp--preset--color--white), var(--wp--preset--color--white));
background-position: right bottom;
background-repeat: no-repeat;
background-size: 0 1px;
text-decoration: none;
transition: background-size 0.3s;
}
@media screen and (width < 768px) {
.p-footer__navLink {
line-height: 1.2;
}
}
@media (any-hover: hover) {
.p-footer__navLink:is(a):hover {
opacity: 1;
background-position: left bottom;
background-size: 100% 1px;
transition: background-size 0.3s;
}
}
.p-footer__navSub {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--8);
margin: 0;
padding: 0;
list-style: none;
opacity: 0.8;
}
@media screen and (width < 768px) {
.p-footer__navSub {
gap: 0.75rem;
}
}
.p-footer__navSubItem {
font-size: 0;
}
.p-footer__navSubLink {
font-size: var(--wp--preset--font-size--sm);
line-height: 1.6;
color: var(--wp--preset--color--white);
transition: opacity 0.2s ease-in-out;
display: inline;
background-image: linear-gradient(90deg, var(--wp--preset--color--white), var(--wp--preset--color--white));
background-position: right bottom;
background-repeat: no-repeat;
background-size: 0 1px;
text-decoration: none;
transition: background-size 0.3s;
}
@media (any-hover: hover) {
.p-footer__navSubLink:hover {
opacity: 1;
background-position: left bottom;
background-size: 100% 1px;
transition: background-size 0.3s;
}
}
.p-footer__certs {
grid-area: certs;
width: fit-content;
display: flex;
align-items: flex-start;
gap: var(--wp--preset--spacing--16);
padding: var(--wp--preset--spacing--16);
border: 1px solid var(--wp--preset--color--white);
margin-top: 3.5rem;
margin-left: auto;
}
@media screen and (width < 1080px) {
.p-footer__certs {
justify-self: center;
margin: 0 auto;
}
}
.p-footer__certImg {
display: block;
height: auto;
}
@media screen and (width < 768px) {
.p-footer__certImg {
width: 2.875rem;
}
}
.p-footer__certImg--jqa {
width: clamp(2.875rem, 2.069rem + 3.3vw, 4.813rem);
}
.p-footer__certImg--jqa2 {
width: clamp(2.875rem, 2.069rem + 3.3vw, 4.813rem);
}
.p-footer__certImg--isms {
width: clamp(2.875rem, 2.173rem + 2.88vw, 4.563rem);
}
.p-footer__bottom {
margin-top: var(--wp--preset--spacing--64);
padding-top: var(--wp--preset--spacing--32);
border-top: 1px solid rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wp--preset--spacing--32);
}
@media screen and (width < 1080px) {
.p-footer__bottom {
flex-direction: column-reverse;
}
}
.p-footer__copyright {
flex-shrink: 0;
font-family: var(--wp--preset--font-family--sans-en);
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
line-height: 1.6;
color: var(--wp--preset--color--white);
}
.p-footer__legal {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--32);
margin: 0;
padding: 0;
list-style: none;
}
@media screen and (width < 1080px) {
.p-footer__legal {
justify-content: center;
}
}
@media screen and (width < 768px) {
.p-footer__legal {
gap: 1.5rem 8px;
}
}
.p-footer__legalItem {
font-size: 0;
}
.p-footer__legalLink {
font-size: 0.9375rem;
line-height: 1;
color: var(--wp--preset--color--white);
transition: opacity 0.2s ease-in-out;
display: inline;
background-image: linear-gradient(90deg, var(--wp--preset--color--white), var(--wp--preset--color--white));
background-position: right bottom;
background-repeat: no-repeat;
background-size: 0 1px;
font-size: var(--wp--preset--font-size--xs);
text-decoration: none;
transition: background-size 0.3s;
}
@media (any-hover: hover) {
.p-footer__legalLink:hover {
opacity: 1;
background-position: left bottom;
background-size: 100% 1px;
transition: background-size 0.3s;
}
}
.p-header {
--p-header-height: 5rem;
position: sticky;
top: 0;
z-index: 100;
height: var(--p-header-height);
border-bottom: 1px solid var(--wp--preset--color--gray);
transition: border-bottom-color 0.3s ease-in-out;
container-type: inline-size;
}
@media screen and (width < 768px) {
.p-header {
--p-header-height: 3.4375rem;
}
}
.p-header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: color-mix(in srgb, var(--wp--preset--color--white) 80%, transparent);
-webkit-backdrop-filter: blur(1.5625rem);
backdrop-filter: blur(1.5625rem);
}
@media screen and (width < 1080px) {
.p-header::after {
content: "";
position: fixed;
inset: var(--p-header-height) 0 0;
z-index: -1;
background-color: color-mix(in srgb, var(--wp--preset--color--white) 80%, transparent);
-webkit-backdrop-filter: blur(1.5625rem);
backdrop-filter: blur(1.5625rem);
visibility: hidden;
clip-path: inset(0 0 100% 0);
transition: clip-path 0.3s ease, visibility 0.3s;
}
}
@media screen and (width < 1080px) {
.p-header.is-menu-open::after {
visibility: visible;
clip-path: inset(0);
}
}
.p-header__inner {
display: flex;
align-items: center;
height: 100%;
padding-left: var(--wp--preset--spacing--32);
}
@media screen and (width < 768px) {
.p-header__inner {
padding-left: 1rem;
}
}
.p-header__logo {
display: inline-flex;
flex-shrink: 0;
width: clamp(6.875rem, 5.732rem + 4.69vw, 9.625rem);
}
@media (any-hover: hover) {
.p-header__logo:hover {
opacity: 1;
}
}
.p-header__logo img {
width: 100%;
height: auto;
transition: filter 0.3s ease-in-out;
}
.p-header__nav {
display: flex;
align-items: center;
height: 100%;
margin-left: auto;
}
@media screen and (width < 1080px) {
.p-header__nav {
position: fixed;
inset: var(--p-header-height) 0 auto;
z-index: 99;
flex-direction: column;
align-items: stretch;
gap: 0;
height: calc(100vh - var(--p-header-height));
height: calc(100dvh - var(--p-header-height));
margin-left: 0;
padding: var(--wp--preset--spacing--32) 0 calc(var(--wp--preset--spacing--32) + env(safe-area-inset-bottom));
visibility: hidden;
overflow-y: auto;
overscroll-behavior: contain;
pointer-events: none;
clip-path: inset(0 0 100% 0);
transition: clip-path 0.3s ease, visibility 0.3s;
}
}
.p-header__navList {
display: flex;
height: 100%;
align-items: stretch;
margin: 0;
padding: 0;
list-style: none;
}
@media screen and (width < 1080px) {
.p-header__navList {
flex-direction: column;
height: auto;
}
}
.p-header__navItem {
position: relative;
display: flex;
align-items: center;
}
.p-header__navItem::before {
content: "";
position: absolute;
top: 2.0625rem;
left: 0;
width: 0.0625rem;
background: url(//test.pai-r.com/wp-content/themes/PAI-R/img/common/header_dot_line.svg) repeat-y left top;
height: 2.9375rem;
}
@media screen and (width < 1080px) {
.p-header__navItem::before {
width: 100%;
height: 0.0625rem;
top: auto;
bottom: 0;
background: url(//test.pai-r.com/wp-content/themes/PAI-R/img/common/header_dot_line_sp.svg) repeat-x left top;
}
}
.p-header__navLink {
display: inline-flex;
align-items: center;
height: 100%; font-size: min(calc(15px / var(--wp--style--global--content-size) * 100cqi),15px);
padding-inline: 0.9em;
position: relative;
}
@media screen and (width < 1080px) {
.p-header__navLink {
display: flex;
justify-content: space-between;
width: 100%;
padding-block: 24px;
padding-inline: 24px;
gap: var(--wp--preset--spacing--16);
font-size: 1rem;
}
}
@media (any-hover: hover) {
.p-header__navLink:hover {
opacity: 1;
}
.p-header__navLink:hover::before {
scale: 1 1;
}
.p-header__navLink:hover .p-header__navText {
color: var(--wp--preset--color--blue);
}
}
.p-header__navLink::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background-color: var(--wp--preset--color--blue);
scale: 0 1;
transition: scale 0.2s ease-in-out;
}
.p-header__navArrow {
display: none;
}
@media screen and (width < 1080px) {
.p-header__navArrow {
flex-shrink: 0;
width: 1rem;
height: 1rem;
background-color: var(--wp--preset--color--black);
border-radius: 50%;
display: block;
position: relative;
}
}
.p-header__navArrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
mask: url(//test.pai-r.com/wp-content/themes/PAI-R/img/common/icon_arrow.svg) no-repeat center/contain;
background-color: var(--wp--preset--color--white);
transition: background-color 0.2s ease-in-out;
}
.p-header__navText {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--wp--preset--spacing--8);
font-weight: 700;
letter-spacing: 0.08em;
transition: color 0.2s ease-in-out;
white-space: nowrap;
}
@media screen and (width < 1080px) {
.p-header__navText {
flex-direction: row;
align-items: baseline;
gap: var(--wp--preset--spacing--16);
}
}
.p-header__navText:has(.p-header__navSub) {
padding-top: 1.125rem;
}
@media screen and (width < 1080px) {
.p-header__navText:has(.p-header__navSub) {
padding-top: 0;
}
}
.p-header__navLabel {
display: block;
line-height: 1;
}
.p-header__navSub {
display: block;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0;
line-height: 1;
color: var(--wp--preset--color--blue);
}
@media screen and (width < 1080px) {
.p-header__navSub {
font-size: var(--wp--preset--font-size--sm);
}
}
.p-header__cta {
display: flex;
height: 100%;
margin-left: var(--wp--preset--spacing--8);
}
@media screen and (width < 1080px) {
.p-header__cta {
flex-direction: column;
gap: var(--wp--preset--spacing--8);
height: auto;
margin-left: 0;
margin-top: var(--wp--preset--spacing--32);
padding-inline: var(--wp--preset--spacing--32);
}
}
@media screen and (width >= 768px) and (width < 1080px) {
.p-header__cta {
padding-inline: var(--wp--preset--spacing--32);
}
}
.p-header__ctaLink {
display: inline-flex;
align-items: center;
justify-content: center;
padding-inline: 1.5em; font-size: min(calc(15px / var(--wp--style--global--content-size) * 100cqi),15px);
font-weight: 700;
letter-spacing: 0.08em;
border: 1px solid var(--wp--preset--color--white);
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
white-space: nowrap;
}
.p-header__ctaLink + .p-header__ctaLink {
margin-left: -1px;
}
@media screen and (width < 1080px) {
.p-header__ctaLink {
width: 100%;
height: 4rem;
border-radius: 0.125rem;
font-size: 1rem;
}
.p-header__ctaLink + .p-header__ctaLink {
margin-left: 0;
}
}
.p-header__ctaLink--recruit {
background-color: var(--wp--preset--color--lightblue);
color: var(--wp--preset--color--blue);
}
@media (any-hover: hover) {
.p-header__ctaLink--recruit:hover {
opacity: 1;
background-color: var(--wp--preset--color--blue);
color: var(--wp--preset--color--white);
}
}
.p-header__ctaLink--primary {
background-color: var(--wp--preset--color--blue);
color: var(--wp--preset--color--white);
}
@media (any-hover: hover) {
.p-header__ctaLink--primary:hover {
opacity: 1;
background-color: var(--wp--preset--color--lightblue);
color: var(--wp--preset--color--blue);
}
}
.p-header__menuBtn {
--p-header-menuBtn-line: 2px;
--p-header-menuBtn-gap: 0.375rem;
display: none;
}
@media screen and (width < 1080px) {
.p-header__menuBtn {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--p-header-menuBtn-gap);
width: var(--p-header-height);
height: var(--p-header-height);
margin-left: auto;
padding: 0;
background-color: var(--wp--preset--color--blue);
border: 1px solid var(--wp--preset--color--white);
isolation: isolate;
cursor: pointer;
}
}
.p-header__menuBtnLine {
display: block;
width: 1.25rem;
height: var(--p-header-menuBtn-line);
background-color: var(--wp--preset--color--white);
border-radius: calc(var(--p-header-menuBtn-line) / 2);
transition: transform 0.2s, opacity 0.2s, visibility 0.2s;
}
@media screen and (width < 1080px) {
.p-header.is-menu-open .p-header__nav {
visibility: visible;
pointer-events: auto;
clip-path: inset(0);
}
}
.p-header.is-menu-open .p-header__menuBtnLine:nth-child(1) {
transform: translateY(calc(var(--p-header-menuBtn-line) + var(--p-header-menuBtn-gap))) rotate(45deg);
}
.p-header.is-menu-open .p-header__menuBtnLine:nth-child(2) {
visibility: hidden;
width: 0;
opacity: 0;
transform: scaleX(0);
}
.p-header.is-menu-open .p-header__menuBtnLine:nth-child(3) {
transform: translateY(calc((var(--p-header-menuBtn-line) + var(--p-header-menuBtn-gap)) * -1)) rotate(-45deg);
}
html:has(body.is-nav-open) {
overflow: hidden;
}
body.is-nav-open {
overflow: hidden;
}
.p-header.is-menu-open {
position: fixed;
top: 0;
right: 0;
left: 0;
}
.p-header.is-menu-open + main {
padding-top: 5rem;
}
@media screen and (width < 768px) {
.p-header.is-menu-open + main {
padding-top: 3.4375rem;
}
}
.p-header__scrim {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: -1;
height: 7.375rem;
background-image: linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--black) 38%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--black) 38%, transparent) 68%, transparent 100%);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-in-out;
}
@media screen and (width < 768px) {
.p-header__scrim {
height: 4.1875rem;
background-image: linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--black) 38%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--black) 38%, transparent) 82%, transparent 100%);
}
} :where(.js-enabled) .p-header--onDark:not(.is-menu-open) {
border-bottom-color: color-mix(in srgb, var(--wp--preset--color--white) 30%, transparent);
}
:where(.js-enabled) .p-header--onDark::before {
background-color: transparent; -webkit-backdrop-filter: none;
backdrop-filter: none;
}
@media screen and (width < 1080px) {
:where(.js-enabled) .p-header--onDark::after {
inset: 0;
}
}
:where(.js-enabled) .p-header--onDark:not(.is-menu-open) .p-header__logo img {
filter: brightness(0) invert(1);
}
:where(.js-enabled) .p-header--onDark:not(.is-menu-open) .p-header__navItem::before {
opacity: 0.5;
filter: brightness(0) invert(1);
}
:where(.js-enabled) .p-header--onDark:not(.is-menu-open) .p-header__navText,
:where(.js-enabled) .p-header--onDark:not(.is-menu-open) .p-header__navSub {
color: var(--wp--preset--color--white);
}
:where(.js-enabled) .p-header--onDark:not(.is-menu-open) .p-header__navLink::before {
background-color: var(--wp--preset--color--white);
}
@media (any-hover: hover) {
:where(.js-enabled) .p-header--onDark:not(.is-menu-open) .p-header__navLink:hover .p-header__navText {
color: var(--wp--preset--color--white);
}
}
:where(.js-enabled) .p-header--onDark:not(.is-menu-open) .p-header__scrim {
opacity: 1;
}
.p-subMv {
position: relative;
padding: var(--wp--preset--spacing--24) 0 6.8125rem;
overflow: hidden;
}
@media screen and (width < 768px) {
.p-subMv {
padding: 1.5rem 0 3rem;
}
}
.p-subMv::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
height: 12.5rem;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--wp--preset--color--white));
pointer-events: none;
}
@media screen and (width < 768px) {
.p-subMv::after {
height: 6rem;
}
}
.p-subMv__deco {
position: absolute;
top: -12rem;
right: 5.75rem;
display: grid;
place-items: center;
width: 43.4375rem;
height: 45.125rem;
pointer-events: none;
}
@media screen and (width < 768px) {
.p-subMv__deco {
top: -5.8125rem;
right: -2.625rem;
width: 19.6875rem;
height: 20.4375rem;
}
}
.p-subMv__decoSvg {
width: 35.9375rem;
height: 33.0625rem;
overflow: visible;
rotate: -110.21deg;
}
@media screen and (width < 768px) {
.p-subMv__decoSvg {
width: 16.25rem;
height: 15rem;
}
}
.p-subMv__decoLine {
fill: none;
stroke-width: 1;
stroke-dasharray: 1;
stroke-dashoffset: 0.0035;
animation: p-subMv-draw 1s ease-in-out both;
}
@media screen and (width < 768px) {
.p-subMv__decoLine {
stroke-width: 2.6;
stroke-dashoffset: 0.008;
}
}
.p-subMv__decoLine--yellow {
stroke: url(#submv-grad-yellow);
}
.p-subMv__decoLine--blue {
stroke: url(#submv-grad-blue);
}
.p-subMv__decoDot {
offset-distance: 100%;
offset-rotate: 0deg;
animation: p-subMv-move 1s ease-in-out both;
}
@media screen and (width < 768px) {
.p-subMv__decoDot {
r: 4;
--p-submv-dot-gap: 0.8%;
}
}
.p-subMv__decoDot--yellow {
offset-path: path("M1 6.9939 C1 138.076 27.4561 256.723 70.2067 342.582 C112.972 428.471 171.96 481.402 236.965 481.402 C301.971 481.402 360.958 428.471 403.724 342.582 C446.474 256.723 472.931 138.076 472.931 6.9939");
}
.p-subMv__decoDot--blue {
offset-path: path("M574.732 523.638 C574.732 392.556 548.276 273.908 505.525 188.05 C462.759 102.16 403.772 49.2293 338.767 49.2293 C273.761 49.2293 214.774 102.16 172.008 188.05 C129.257 273.908 102.801 392.556 102.801 523.638");
}
@keyframes p-subMv-draw {
from {
stroke-dashoffset: 1;
}
}
@keyframes p-subMv-move {
from {
offset-distance: var(--p-submv-dot-gap, 0.35%);
}
}
@media (prefers-reduced-motion: reduce) {
.p-subMv__decoLine,
.p-subMv__decoDot {
animation: none;
}
}
.p-subMv__inner {
position: relative;
z-index: 2;
}
.p-subMv__title {
margin-top: 3.625rem;
}
@media screen and (width < 768px) {
.p-subMv__title {
margin-top: var(--wp--preset--spacing--24);
}
}
.p-subMvProduct {
position: relative;
overflow: hidden;
padding-top: var(--wp--preset--spacing--24);
padding-bottom: 5.8125rem;
}
@media screen and (width < 768px) {
.p-subMvProduct {
padding-bottom: 4.8125rem;
}
} .p-subMvProduct__deco {
position: absolute;
pointer-events: none;
}
.p-subMvProduct__deco--ellipse {
top: -7.6875rem;
right: calc(50% - 51.15625rem);
width: 60.875rem;
height: 55.2915rem;
}
@media screen and (width >= 768px) and (width < 1080px) {
.p-subMvProduct__deco--ellipse {
right: calc(50% - 32.15625rem);
}
}
@media screen and (width < 768px) {
.p-subMvProduct__deco--ellipse {
top: -5.645625rem;
right: calc(50% - 20.15625rem);
width: 38.35125rem;
height: 34.833125rem;
}
}
.p-subMvProduct__decoSvg {
overflow: visible;
width: 100%;
height: 100%;
}
.p-subMvProduct__decoLine {
fill: none;
stroke-dasharray: 1;
stroke-dashoffset: 0.0035;
stroke-width: 1;
animation: p-subMvProduct-draw 1.6s ease-in-out both;
}
@media screen and (width < 768px) {
.p-subMvProduct__decoLine {
stroke-width: 1.6;
}
}
.p-subMvProduct__decoLine--yellow {
stroke: url(#submv2-grad-yellow);
}
.p-subMvProduct__decoLine--blue {
stroke: url(#submv2-grad-blue);
}
.p-subMvProduct__decoDot {
offset-distance: 100%;
offset-rotate: 0deg;
animation: p-subMvProduct-move 1.6s ease-in-out both;
}
.p-subMvProduct__decoDot--yellow {
offset-path: path("M628.532 735.589 A385.795 219.161 28.26 0 0 787.574 525.807 A385.795 219.161 28.26 0 0 458.34 237.961 A385.795 219.161 28.26 0 0 108.156 280.627 A385.795 219.161 28.26 0 0 234.083 593.245");
}
.p-subMvProduct__decoDot--blue {
offset-path: path("M119.727 611.972 A410.145 262.384 -32.69 0 0 426.193 746.63 A410.145 262.384 -32.69 0 0 813.882 475.555 A410.145 262.384 -32.69 0 0 765.875 160.18 A410.145 262.384 -32.69 0 0 346.182 221.004");
}
@keyframes p-subMvProduct-draw {
from {
stroke-dashoffset: 1;
}
}
@keyframes p-subMvProduct-move {
from {
offset-distance: 0.35%;
}
}
@media (prefers-reduced-motion: reduce) {
.p-subMvProduct__decoLine,
.p-subMvProduct__decoDot {
animation: none;
}
} .p-subMvProduct__breadcrumb {
position: relative;
z-index: 2;
}
.p-subMvProduct__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: attr(data-mvCol) auto;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
}
@media screen and (width < 1080px) {
.p-subMvProduct__inner {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--40);
align-items: stretch;
}
}
.p-subMvProduct__body {
display: grid;
gap: var(--wp--preset--spacing--24);
padding-top: 5.1875rem;
}
@media screen and (width < 1080px) {
.p-subMvProduct__body {
padding-top: 0;
}
}
.p-subMvProduct__label {
font-size: var(--wp--preset--font-size--md);
font-weight: 700;
line-height: 1;
}
.p-subMvProduct__titles {
display: grid;
}
@media screen and (width < 768px) {
.p-subMvProduct__titles {
margin-top: -0.5rem;
}
}
.p-subMvProduct__title {
color: var(--wp--preset--color--blue);
font-size: var(--wp--preset--font-size--xxl);
font-weight: 500;
line-height: 1.6;
}
.p-subMvProduct__subTitle {
font-size: var(--wp--preset--font-size--xl-plus);
font-weight: 500;
line-height: 1.6;
}
.p-subMvProduct__text {
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
line-height: 1.8;
}
.p-subMvProduct__btn {
width: 19.5rem;
}
@media screen and (width < 1080px) {
.p-subMvProduct__btn {
justify-self: center;
width: auto;
}
}
.p-subMvProduct__figure {
justify-self: end;
width: 33.75rem;
margin-top: 3.32rem;
margin-right: 3.21875rem;
}
@media screen and (width < 1080px) {
.p-subMvProduct__figure {
order: -1;
align-self: center;
margin-right: 0;
}
}
@media screen and (width < 768px) {
.p-subMvProduct__figure {
width: 21.2625rem;
margin-top: 0.535625rem;
margin-left: -0.520625rem;
}
}
.p-subMvProduct__img {
width: 100%;
height: auto;
}
.p-subMvProduct__sideTab {
position: fixed;
top: 17rem;
right: 0;
z-index: 90;
}
@media screen and (width < 768px) {
.p-subMvProduct__sideTab {
top: auto;
right: auto;
bottom: 0;
left: 0;
width: 100%;
padding-inline: var(--wp--preset--spacing--24);
translate: none;
}
}
.p-subMvAlkillernex {
position: relative;
overflow-x: clip;
padding-top: var(--wp--preset--spacing--24);
padding-bottom: 9.9375rem;
}
@media screen and (width < 768px) {
.p-subMvAlkillernex {
padding-bottom: 4rem;
}
} .p-subMvAlkillernex__breadcrumb {
position: relative;
z-index: 2;
}
.p-subMvAlkillernex__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr auto;
align-items: start;
}
@media screen and (width < 1080px) {
.p-subMvAlkillernex__inner {
display: flex;
flex-direction: column;
gap: 2.88625rem;
align-items: stretch;
}
}
.p-subMvAlkillernex__body {
display: grid;
gap: var(--wp--preset--spacing--24);
padding-top: 5.125rem;
}
@media screen and (width < 1080px) {
.p-subMvAlkillernex__body {
padding-top: 0;
}
}
@media screen and (width < 768px) {
.p-subMvAlkillernex__body {
gap: var(--wp--preset--spacing--16);
}
}
.p-subMvAlkillernex__label {
font-size: var(--wp--preset--font-size--md);
font-weight: 700;
line-height: 1;
}
.p-subMvAlkillernex__titles {
display: grid;
margin-top: -0.3125rem;
}
@media screen and (width < 768px) {
.p-subMvAlkillernex__titles {
margin-top: -0.5rem;
}
}
.p-subMvAlkillernex__title {
color: var(--wp--preset--color--blue);
font-size: var(--wp--preset--font-size--xxl);
font-weight: 500;
line-height: 1.6;
}
.p-subMvAlkillernex__subTitle {
font-size: var(--wp--preset--font-size--xxl);
font-weight: 500;
line-height: 1.6;
}
.p-subMvAlkillernex__text {
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
line-height: 1.8;
}
.p-subMvAlkillernex__btn {
width: 19.5rem;
}
@media screen and (width < 1080px) {
.p-subMvAlkillernex__btn {
justify-self: center;
width: auto;
}
}
.p-subMvAlkillernex__figure {
justify-self: end;
width: 41.375rem;
margin-top: 4.9565625rem;
}
@media screen and (width < 1080px) {
.p-subMvAlkillernex__figure {
order: -1;
margin-inline: auto;
}
}
@media screen and (width < 768px) {
.p-subMvAlkillernex__figure {
width: 20.43725rem;
margin-top: 2.29rem;
}
}
.p-subMvAlkillernex__img {
width: 100%;
height: auto;
}
.p-subMvAlkillernex__sideTab {
position: fixed;
top: 17rem;
right: 0;
z-index: 90;
}
@media screen and (width < 768px) {
.p-subMvAlkillernex__sideTab {
top: auto;
right: auto;
bottom: 0;
left: 0;
width: 100%;
padding-inline: 1.5rem;
translate: none;
}
}
@media screen and (width < 768px) {
main:has(.p-subMvAlkillernex__sideTab) {
padding-bottom: 3.5rem;
}
} .p-subMvAlkillernex .p-subMv__deco {
top: -17.0625rem;
right: calc(50% - 48.9375rem);
width: 62.375rem;
height: 64.875rem;
}
@media screen and (width >= 768px) and (width < 1080px) {
.p-subMvAlkillernex .p-subMv__deco {
right: calc(50% - 29.9375rem);
}
}
@media screen and (width < 768px) {
.p-subMvAlkillernex .p-subMv__deco {
top: -8.04375rem;
right: calc(50% - 15.25rem);
width: 31.5625rem;
height: 32.75rem;
}
}
.p-subMvAlkillernex .p-subMv__decoSvg {
width: 51.625rem;
height: 47.4375rem;
}
@media screen and (width < 768px) {
.p-subMvAlkillernex .p-subMv__decoSvg {
width: 26.0625rem;
height: 24rem;
}
}
.p-subMvAlkillernex .p-subMv__decoLine {
stroke-dashoffset: 0.0039;
stroke-width: 0.7;
}
@media screen and (width < 768px) {
.p-subMvAlkillernex .p-subMv__decoLine {
stroke-dashoffset: 0.0039;
stroke-width: 1.38;
}
}
.p-subMvAlkillernex .p-subMv__decoDot {
--p-submv-dot-gap: 0.39%;
}
@media screen and (width < 768px) {
.p-subMvAlkillernex .p-subMv__decoDot {
--p-submv-dot-gap: 0.39%;
r: 2;
}
}
.p-download {
margin-block: var(--wp--preset--spacing--120) 0;
}
.p-download__inner {
max-width: calc(60rem + var(--wp--preset--spacing--40) * 2);
}
.p-download__lead {
margin-top: var(--wp--preset--spacing--24);
font-size: var(--wp--preset--font-size--md);
font-weight: 500;
line-height: 1.8;
text-align: center;
}
.p-download__form {
width: 100%;
}
.p-archiveCta {
margin-top: var(--wp--preset--spacing--80);
}
.p-archiveCta__card {
padding: var(--wp--preset--spacing--48);
border-radius: var(--wp--preset--spacing--8);
background-color: var(--wp--preset--color--lightgray);
}
.p-archiveCta__heading {
font-size: var(--wp--preset--font-size--xl-plus);
font-weight: 500;
line-height: 1;
letter-spacing: 0.09375rem;
}
.p-archiveCta__line {
position: relative;
height: 0.125rem;
margin-top: var(--wp--preset--spacing--12);
margin-left: 1rem;
border-radius: 0.0625rem;
background-color: var(--wp--preset--color--gray);
}
.p-archiveCta__line::before, .p-archiveCta__line::after {
content: "";
position: absolute;
top: 0;
width: 0.25rem;
height: 0.125rem;
border-radius: 0.0625rem;
}
.p-archiveCta__line::before {
left: -1rem;
background-color: var(--wp--preset--color--brightblue);
}
.p-archiveCta__line::after {
left: -0.5rem;
background-color: var(--wp--preset--color--yellow);
}
.p-archiveCta__body {
display: flex;
align-items: center;
gap: 5rem;
margin-top: var(--wp--preset--spacing--32);
}
@media screen and (width < 768px) {
.p-archiveCta__body {
flex-direction: column;
gap: 1.5rem;
}
}
.p-archiveCta__content {
flex: 1;
min-width: 0;
}
.p-archiveCta__label {
color: var(--wp--preset--color--blue);
font-size: var(--wp--preset--font-size--sm);
font-weight: 700;
line-height: 1;
}
@media screen and (width < 768px) {
.p-archiveCta__label {
font-size: var(--wp--preset--font-size--xs);
text-align: center;
}
}
.p-archiveCta__title {
margin-top: var(--wp--preset--spacing--16);
font-size: var(--wp--preset--font-size--xl-plus);
font-weight: 500;
line-height: 1;
}
@media screen and (width < 768px) {
.p-archiveCta__title {
text-align: center;
}
}
.p-archiveCta__text {
margin-top: var(--wp--preset--spacing--16);
line-height: 2;
}
.p-archiveCta__btn {
margin-top: var(--wp--preset--spacing--16);
}
@media screen and (width < 768px) {
.p-archiveCta__btn {
display: grid;
width: fit-content;
margin-inline: auto;
}
}
.p-archiveCta__figure {
flex-shrink: 0;
width: clamp(18.313rem, 16.571rem + 7.14vw, 22.5rem);
}
@media screen and (width < 768px) {
.p-archiveCta__figure {
order: -1;
margin-inline: auto;
}
}
.p-archiveCta__img {
width: 100%;
height: auto;
}
.p-archiveEmpty {
margin-top: 8rem;
margin-bottom: 9rem;
text-align: center;
}
@media screen and (width < 768px) {
.p-archiveEmpty {
margin-top: 5.5rem;
margin-bottom: 5.5rem;
}
}
.p-archiveEmpty__title {
color: var(--wp--preset--color--blue);
font-size: var(--wp--preset--font-size--xxl-plus);
line-height: 1.6;
}
.p-archiveEmpty__text {
margin-top: var(--wp--preset--spacing--24);
line-height: 1.6;
}
@media screen and (width < 768px) {
.p-archiveEmpty__text {
margin-top: 8px;
}
}
.p-archiveEmpty__link {
margin-top: var(--wp--preset--spacing--32);
}
.p-archiveEmpty__link .c-btn__text {
text-align: center;
}
.p-recruit {
position: relative;
overflow: clip;
padding: clamp(5rem, 2.921rem + 8.53vw, 10rem) 0 clamp(3.5rem, 1.837rem + 6.82vw, 7.5rem);
}
.p-recruit--top {
padding-top: 5rem;
}
.p-recruit__deco {
position: absolute;
inset: 0;
z-index: 0;
container-type: size;
pointer-events: none;
}
.p-recruit__deco::before, .p-recruit__deco::after {
content: "";
position: absolute;
right: 0;
left: 0;
z-index: 1;
height: 7.8125rem;
pointer-events: none;
}
.p-recruit__deco::before {
top: 0;
background: linear-gradient(to bottom, var(--wp--preset--color--white), rgba(255, 255, 255, 0));
}
.p-recruit__deco::after {
bottom: 0;
background: linear-gradient(to top, var(--wp--preset--color--white), rgba(255, 255, 255, 0));
}
@media screen and (width < 768px) {
.p-recruit__deco::after {
content: none;
}
}
.p-recruit__decoRings {
position: absolute;
}
.p-recruit__decoRings--pc {
top: -46.890875rem;
left: calc(50% - 46.2638125rem);
width: 125.9375rem;
height: 135.9375rem;
}
@media screen and (width < 768px) {
.p-recruit__decoRings--pc {
display: none;
}
}
.p-recruit__decoRings--sp {
--p-recruit-unit: min(calc(100cqw / 390), calc(100cqh / 677));
top: 50%;
left: 50%;
display: none;
width: calc(390 * var(--p-recruit-unit));
height: calc(677 * var(--p-recruit-unit));
translate: -50% -50%;
}
@media screen and (width < 768px) {
.p-recruit__decoRings--sp {
display: block;
}
}
.p-recruit__decoRing {
position: absolute;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ccircle cx='500' cy='500' r='499.5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-size: 100% 100%;
transform: rotate(0deg);
transform-origin: center;
backface-visibility: hidden;
}
.p-recruit__decoRing--pc1 {
top: -0.366125rem;
left: -47.5926875rem;
width: 134.9535rem;
height: 134.9535rem;
background: conic-gradient(from 90deg, #018fcd 0deg, rgba(1, 143, 205, 0) 86.4deg, rgba(1, 143, 205, 0) 179.64deg, #018fcd 180deg, rgba(1, 143, 205, 0) 266.4deg, rgba(1, 143, 205, 0) 360deg);
}
.p-recruit__decoRing--pc2 {
top: 16.157rem;
left: 38.5445rem;
width: 134.9535rem;
height: 134.9535rem;
background: conic-gradient(from 270deg, #f6ab01 0deg, rgba(246, 171, 1, 0) 86.4deg, rgba(246, 171, 1, 0) 179.64deg, #f6ab01 180deg, rgba(246, 171, 1, 0) 266.4deg, rgba(246, 171, 1, 0) 360deg);
}
.p-recruit__decoRing--pc3 {
top: -37.0106875rem;
left: 6.95575rem;
width: 134.9535rem;
height: 134.9535rem;
background: conic-gradient(from 195deg, #018fcd 0deg, rgba(1, 143, 205, 0) 86.4deg, rgba(1, 143, 205, 0) 179.64deg, #018fcd 180deg, rgba(1, 143, 205, 0) 266.4deg, rgba(1, 143, 205, 0) 360deg);
}
.p-recruit__decoRing--pc4 {
top: 48.5695rem;
left: -16.478375rem;
width: 134.9535rem;
height: 134.9535rem;
background: conic-gradient(from 0deg, #f6ab01 0deg, rgba(246, 171, 1, 0) 86.4deg, rgba(246, 171, 1, 0) 179.64deg, #f6ab01 180deg, rgba(246, 171, 1, 0) 266.4deg, rgba(246, 171, 1, 0) 360deg);
}
.p-recruit__decoRing--sp1 {
top: calc(25.621 * var(--p-recruit-unit));
left: calc(-392.986 * var(--p-recruit-unit));
width: calc(754.638 * var(--p-recruit-unit));
height: calc(754.638 * var(--p-recruit-unit));
background: conic-gradient(from 90deg, #018fcd 0deg, rgba(1, 143, 205, 0) 86.4deg, rgba(1, 143, 205, 0) 179.64deg, #018fcd 180deg, rgba(1, 143, 205, 0) 266.4deg, rgba(1, 143, 205, 0) 360deg);
}
.p-recruit__decoRing--sp2 {
top: calc(25.745 * var(--p-recruit-unit));
left: calc(27.348 * var(--p-recruit-unit));
width: calc(754.638 * var(--p-recruit-unit));
height: calc(754.638 * var(--p-recruit-unit));
background: conic-gradient(from 270deg, #f6ab01 0deg, rgba(246, 171, 1, 0) 86.4deg, rgba(246, 171, 1, 0) 179.64deg, #f6ab01 180deg, rgba(246, 171, 1, 0) 266.4deg, rgba(246, 171, 1, 0) 360deg);
}
.p-recruit__decoRing--sp3 {
top: calc(-177.427 * var(--p-recruit-unit));
left: calc(-128.272 * var(--p-recruit-unit));
width: calc(754.638 * var(--p-recruit-unit));
height: calc(754.638 * var(--p-recruit-unit));
background: conic-gradient(from 195deg, #018fcd 0deg, rgba(1, 143, 205, 0) 86.4deg, rgba(1, 143, 205, 0) 179.64deg, #018fcd 180deg, rgba(1, 143, 205, 0) 266.4deg, rgba(1, 143, 205, 0) 360deg);
}
.p-recruit__decoRing--sp4 {
top: calc(228.793 * var(--p-recruit-unit));
left: calc(-237.366 * var(--p-recruit-unit));
width: calc(754.638 * var(--p-recruit-unit));
height: calc(754.638 * var(--p-recruit-unit));
background: conic-gradient(from 15deg, #f6ab01 0deg, rgba(246, 171, 1, 0) 86.4deg, rgba(246, 171, 1, 0) 179.64deg, #f6ab01 180deg, rgba(246, 171, 1, 0) 266.4deg, rgba(246, 171, 1, 0) 360deg);
}
.p-recruit__decoRing--blue {
--p-recruit-ring-duration: 4s;
}
.p-recruit__decoRing--yellow {
--p-recruit-ring-duration: 5.333s;
}
.p-recruit.is-inview .p-recruit__decoRing {
will-change: transform;
animation: p-recruit-rotate-ring var(--p-recruit-ring-duration) linear infinite;
}
@keyframes p-recruit-rotate-ring {
from {
transform: rotate(0deg);
}
to {
transform: rotate(179deg);
}
}
@media (prefers-reduced-motion: reduce) {
.p-recruit__decoRing {
transform: none;
animation: none;
}
}
.p-recruit__inner {
position: relative;
z-index: 1;
}
@media screen and (width < 768px) {
.p-recruit__inner {
display: flex;
flex-direction: column;
align-items: center;
}
}
.p-recruit__title {
margin-bottom: 2.015625rem;
}
@media screen and (width < 768px) {
.p-recruit__title {
margin-bottom: 4rem;
text-align: center;
}
.p-recruit__title .c-sectionTitle__sub {
margin-inline: auto;
}
.p-recruit__title .c-sectionTitle__sub::before {
left: 50%;
translate: -50% 0;
}
}
.p-recruit__row {
display: flex;
gap: 5.84375rem;
align-items: center;
}
@media screen and (width < 768px) {
.p-recruit__row {
flex-direction: column;
gap: 0;
align-items: center;
width: 100%;
}
}
.p-recruit__body {
display: flex;
flex: 0 1 30.5rem;
flex-direction: column;
gap: var(--wp--preset--spacing--32);
align-items: center;
min-width: 27.5rem;
}
@media screen and (width < 768px) {
.p-recruit__body {
flex: none;
width: 100%;
min-width: 0;
}
}
.p-recruit__logo {
display: block;
width: 100%;
aspect-ratio: 1148/141;
object-fit: contain;
}
@media screen and (width < 768px) {
.p-recruit__logo {
max-width: 21.375rem;
margin-inline: auto;
}
}
.p-recruit__text {
display: flex;
flex-direction: column;
gap: 3rem;
align-items: center;
}
@media screen and (width < 768px) {
.p-recruit__text {
gap: var(--wp--preset--spacing--32);
}
}
.p-recruit__copy {
max-width: 27.5rem;
font-family: var(--wp--preset--font-family--sans-ja);
font-feature-settings: "palt";
font-size: var(--wp--preset--font-size--md);
font-weight: 700;
line-height: 1.6;
text-align: center;
}
.p-recruit__btn {
gap: 0;
width: 15rem;
min-width: 0;
}
.p-recruit__btn .c-btn__text {
line-height: 1.4;
}
.p-recruit__photos {
position: relative;
order: -1;
flex: 0 1 35.8125rem;
aspect-ratio: 573/408;
}
@media screen and (width < 768px) {
.p-recruit__photos {
order: 0;
flex: none;
width: 100%;
height: 10.0625rem;
max-width: 21.4375rem;
aspect-ratio: auto;
margin-top: 2.625rem;
}
}
.p-recruit__photo {
position: absolute;
border-radius: 0.5rem;
box-shadow: 1.125rem 1.125rem 2.125rem -0.625rem rgba(10, 153, 216, 0.16);
backface-visibility: hidden;
will-change: transform;
}
@media screen and (width < 768px) {
.p-recruit__photo {
border-radius: 0.25rem;
box-shadow: 0.625rem 0.625rem 1.5rem -0.625rem rgba(10, 153, 216, 0.16);
}
}
.p-recruit__photo--a {
top: 20.098%;
left: 5.9337%;
width: 37.6963%;
aspect-ratio: 1;
}
@media screen and (width < 768px) {
.p-recruit__photo--a {
top: 1.1875rem;
left: 15rem;
width: 6.4375rem;
height: 6.4375rem;
}
}
.p-recruit__photo--b {
top: 0;
left: 51.8325%;
width: 28.6213%;
aspect-ratio: 1;
}
@media screen and (width < 768px) {
.p-recruit__photo--b {
top: 0;
left: 0;
width: 4.6875rem;
height: 4.6875rem;
}
}
.p-recruit__photo--c {
top: 50.2451%;
left: 64.5724%;
width: 35.4276%;
aspect-ratio: 1;
}
@media screen and (width < 768px) {
.p-recruit__photo--c {
top: 4.25rem;
left: 6.875rem;
width: 5.8125rem;
height: 5.8125rem;
}
}
.p-recruit__photoReveal {
display: block;
overflow: clip;
width: 100%;
height: 100%;
border-radius: inherit;
background-color: var(--wp--preset--color--lightgray);
}
.p-recruit__photoImg {
display: block;
width: 100%;
height: 100%;
}
:where(.p-wysiwyg) {
line-height: 1.8;
}
:where(.p-wysiwyg) > :first-child {
margin-top: 0;
}
:where(.p-wysiwyg) h2 {
position: relative;
margin-top: var(--wp--preset--spacing--80);
padding-bottom: var(--wp--preset--spacing--18);
font-size: var(--wp--preset--font-size--xl);
font-weight: 500;
line-height: 1.6;
&.is-style-nostyle{
padding: 0;
background: none;
border: none;
&::before,&::after{
display: none;
}
}
}
:where(.p-wysiwyg) h2::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.125rem;
border-radius: 0.0625rem;
background: linear-gradient(to right, var(--wp--preset--color--brightblue) 0 0.25rem, transparent 0.25rem 0.5rem, var(--wp--preset--color--yellow) 0.5rem 0.75rem, transparent 0.75rem 1rem, var(--wp--preset--color--gray) 1rem 100%);
}
:where(.p-wysiwyg) h3 {
margin-top: var(--wp--preset--spacing--64);
margin-bottom: var(--wp--preset--spacing--32);
font-size: var(--wp--preset--font-size--lg);
font-weight: 500;
line-height: 1.6;
}
:where(.p-wysiwyg) h4 {
margin-top: var(--wp--preset--spacing--48);
margin-bottom: var(--wp--preset--spacing--24);
font-size: var(--wp--preset--font-size--lg);
font-weight: 500;
line-height: 1.6;
}
:where(.p-wysiwyg) p,
:where(.p-wysiwyg) ul,
:where(.p-wysiwyg) ol,
:where(.p-wysiwyg) table,
:where(.p-wysiwyg) blockquote,
:where(.p-wysiwyg) figure,
:where(.p-wysiwyg) img {
margin-top: var(--wp--preset--spacing--32);
}
:where(.p-wysiwyg) :is(td, th) :where(p, ul, ol, table, blockquote, figure, img) {
margin-top: var(--wp--preset--spacing--16);
}
:where(.p-wysiwyg) :where(blockquote, figure, td, th) > :first-child {
margin-top: 0;
}
:where(.p-wysiwyg) a {
color: var(--wp--preset--color--blue);
display: inline;
background-image: linear-gradient(90deg, var(--wp--preset--color--blue), var(--wp--preset--color--blue));
background-position: left calc(100% - 0.15em);
background-repeat: no-repeat;
background-size: 100% 1px;
text-decoration: none;
transition: background-position 0s, background-size 0.3s;
}
@media (any-hover: hover) {
:where(.p-wysiwyg) a:hover {
opacity: 1;
background-position: right calc(100% - 0.15em);
background-size: 0 1px;
transition: background-position 0s, background-size 0.3s;
}
}
:where(.p-wysiwyg) strong,
:where(.p-wysiwyg) b {
font-weight: 700;
}
:where(.p-wysiwyg) img {
height: auto;
max-width: 100%;
}
:where(.p-wysiwyg) figcaption {
margin-top: var(--wp--preset--spacing--16);
font-size: var(--wp--preset--font-size--sm);
line-height: 1.6;
}
:where(.p-wysiwyg) li + li,
:where(.p-wysiwyg) li > ul,
:where(.p-wysiwyg) li > ol {
margin-top: var(--wp--preset--spacing--8);
}
:where(.p-wysiwyg) blockquote {
position: relative;
padding: var(--wp--preset--spacing--32);
border: 0.125rem solid var(--wp--preset--color--gray);
border-radius: var(--wp--preset--spacing--8);
}
@media screen and (width < 768px) {
:where(.p-wysiwyg) blockquote {
padding: 1.5rem 1rem;
}
}
:where(.p-wysiwyg) blockquote::before {
content: "";
position: absolute;
top: 0.8125rem;
left: 0.8125rem;
width: 1.25rem;
height: 0.9375rem;
background: url(//test.pai-r.com/wp-content/themes/PAI-R/img/common/icon_quote.svg) no-repeat center/contain;
scale: -1 1;
}
:where(.p-wysiwyg) table {
width: 100%;
border-collapse: collapse;
}
:where(.p-wysiwyg) th {
padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
border: 0.0625rem solid var(--wp--preset--color--gray);
background-color: var(--wp--preset--color--black);
color: var(--wp--preset--color--white);
font-weight: 700;
line-height: 1.6;
text-align: left;
}
:where(.p-wysiwyg) td {
padding: var(--wp--preset--spacing--24);
border: 0.0625rem solid var(--wp--preset--color--gray);
background-color: var(--wp--preset--color--white);
font-size: var(--wp--preset--font-size--sm);
line-height: 1.6;
vertical-align: baseline;
}
.p-wysiwyg__tableWrap {
overflow-x: auto;
margin-top: var(--wp--preset--spacing--32);
}
.p-wysiwyg__tableWrap table {
margin-top: 0;
} .c-overflowTableWrap{
width: 100vw;
margin-left: calc(50% - 50vw);
padding-inline: 20px;
>.c-overflowTable{
max-width: 960px;
width: max-content;
margin-inline: auto;
}
table{
table-layout: fixed;
}
}
.faq-box {
margin-top: var(--wp--preset--spacing--32);
}
.faq-box__item + :where(.faq-box__item) {
margin-top: var(--wp--preset--spacing--40);
}
.faq-box__head {
position: relative;
min-height: 2rem;
margin-top: 0;
padding-left: var(--wp--preset--spacing--48);
font-size: var(--wp--preset--font-size--default);
font-weight: 500;
line-height: 1.8;
}
@media screen and (width < 768px) {
.faq-box__head {
min-height: 1.75rem;
padding-left: 2.5rem;
}
}
.faq-box__head::before {
content: "Q";
position: absolute;
top: 0;
left: 0;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 0.25rem;
background-color: var(--wp--preset--color--blue);
color: var(--wp--preset--color--white);
font-family: var(--wp--preset--font-family--sans-en);
font-size: var(--wp--preset--font-size--base);
font-weight: 500;
}
@media screen and (width < 768px) {
.faq-box__head::before {
width: 1.75rem;
height: 1.75rem;
}
}
.faq-box__body {
position: relative;
margin-top: var(--wp--preset--spacing--24);
padding-left: var(--wp--preset--spacing--48);
}
@media screen and (width < 768px) {
.faq-box__body {
padding-left: 2.5rem;
}
}
.faq-box__body::before {
content: "A";
position: absolute;
top: 0;
left: 0;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 0.25rem;
background-color: var(--wp--preset--color--skyblue);
color: var(--wp--preset--color--blue);
font-family: var(--wp--preset--font-family--sans-en);
font-size: var(--wp--preset--font-size--base);
font-weight: 500;
}
@media screen and (width < 768px) {
.faq-box__body::before {
width: 1.75rem;
height: 1.75rem;
}
}
.faq-box__body :where(p, ul, ol, table, blockquote, figure, img) {
margin-top: var(--wp--preset--spacing--16);
}
.faq-box__body > :where(:first-child),
.faq-box__body :where(p, ul, ol, table, blockquote, figure, img):where(:first-child) {
margin-top: 0;
}
.faq-box__body > :where(:last-child) {
margin-bottom: 0;
}
.list-primary:where(ul) :where(li) {
position: relative;
padding-left: 1.75rem;
}
.list-primary:where(ul) :where(li)::before {
content: "";
position: absolute;
top: 0.75rem;
left: 0.6875rem;
width: 0.25rem;
height: 0.25rem;
border-radius: 50%;
background-color: var(--wp--preset--color--black);
}
.c-box-primary {
margin-top: var(--wp--preset--spacing--32);
padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
border: 0.0625rem solid var(--wp--preset--color--gray);
}
@media screen and (width < 768px) {
.c-box-primary {
padding: 1rem;
}
}
.c-box-primary :where(p, ul, ol, table, blockquote, figure, img) {
margin-top: var(--wp--preset--spacing--16);
}
.c-box-primary > :where(:first-child),
.c-box-primary :where(p, ul, ol, table, blockquote, figure, img):where(:first-child) {
margin-top: 0;
}
.c-box-primary > :where(:last-child) {
margin-bottom: 0;
}
.c-box-secondary {
margin-top: var(--wp--preset--spacing--32);
padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24) var(--wp--preset--spacing--24);
background-color: #f9f9f9;
}
@media screen and (width < 768px) {
.c-box-secondary {
margin-top: 1.5rem;
}
}
.c-box-secondary__title {
display: flex;
gap: 0.375rem;
align-items: center;
color: var(--wp--preset--color--blue);
font-family: var(--wp--preset--font-family--sans-en);
font-size: 1.1875rem;
font-weight: 500;
line-height: 1.8;
}
.c-box-secondary__title::before {
content: "";
flex-shrink: 0;
width: 1rem;
height: 1rem;
background: url(//test.pai-r.com/wp-content/themes/PAI-R/img/common/icon_check2.svg) no-repeat center/contain;
}
.c-box-secondary__body {
margin-top: 0.375rem;
}
.c-box-secondary__body :where(p, ul, ol, table, blockquote, figure, img) {
margin-top: var(--wp--preset--spacing--16);
}
.c-box-secondary__body > :where(:first-child),
.c-box-secondary__body :where(p, ul, ol, table, blockquote, figure, img):where(:first-child) {
margin-top: 0;
}
.c-box-secondary__body > :where(:last-child) {
margin-bottom: 0;
}
.c-table-wrapper {
margin-top: var(--wp--preset--spacing--32);
}
.c-table-caption {
font-weight: 700;
}
.c-table-caption + :where(.p-wysiwyg__tableWrap),
.c-table-caption + * > :where(.p-wysiwyg__tableWrap) {
margin-top: var(--wp--preset--spacing--8);
}
:where(.p-wysiwyg, .editor-styles-wrapper) .sm {
font-size: var(--wp--preset--font-size--sm);
}
@media screen and (width < 768px) {
:where(.p-wysiwyg, .editor-styles-wrapper) .sm {
font-size: var(--wp--preset--font-size--xs);
}
}
:where(.p-wysiwyg, .editor-styles-wrapper) .bd {
font-weight: 700;
}
:where(.p-wysiwyg, .editor-styles-wrapper) .ct {
text-align: center;
}
:where(.p-wysiwyg, .editor-styles-wrapper) .red {
color: var(--wp--preset--color--red);
}
@media screen and (width < 768px) {
:where(.p-wysiwyg, .editor-styles-wrapper) .pc {
display: none;
}
}
.u-desktop {
display: block;
}
@media screen and (width < 768px) {
.u-desktop {
display: none;
}
}
.u-mobile {
display: none;
}
@media screen and (width < 768px) {
.u-mobile {
display: block;
}
}
.u-text-color-strong {
color: var(--wp--preset--color--caution);
}
.u-text-color-note {
color: #afafaf;
}
.u-text-size-small {
font-size: 0.9em;
}
.u-show-sm {
display: none;
}
@media screen and (width < 768px) {
.u-show-sm {
display: inline;
}
}
.p-achievement-logo {
max-width: 1900px;
margin-inline:auto;overflow: hidden
}
.p-achievement-logo .logo img {
width: 150px;
margin: -5px auto 0
}
@media screen and (width>=992px) {
.p-achievement-logo .logo img {
width: 160px;
margin-top: -15px
}
}
.p-achievement-logo__wrapper {
--slide-duration: 30s;
--side-vol: 33;
--side-cols: calc(var(--side-vol) / 3);
width: clamp(calc(180px * calc(var(--side-cols) * 2)), calc((180 * calc(var(--side-cols) * 2)) / 414 * 100vw), calc(200px * calc(var(--side-cols) * 2)));
display: flex;
&.animationstart {
& .p-achievement-logo__group {
animation: slide var(--slide-duration) linear 0s infinite normal none running
}
}
}
.p-achievement-logo__group {
grid-template-columns: repeat(var(--side-cols),clamp(180px, calc(180 / 414 * 100vw), 200px));
width: clamp(calc(180px * var(--side-cols)), calc((180 * var(--side-cols)) / 414 * 100vw), calc(200px * var(--side-cols)));
grid-template-rows: repeat(3,auto);
grid-auto-flow: column;
display: grid
}
@keyframes slide {
0% {
translate: 0
}
to {
translate: -100%
}
} .underPageTable th {
width: 15rem;
padding: var(--wp--preset--spacing--24);
font-size: var(--wp--preset--font-size--default);
vertical-align: top;
}
.underPageTable td {
padding: var(--wp--preset--spacing--24);
}
.underPageTable td > :first-child {
margin-top: 0;
}
.underPageTable p {
margin-top: var(--wp--preset--spacing--16);
}
@media screen and (width < 768px) {
.underPageTable p {
margin-top: 1.25rem;
}
}
.underPageTable .c-btn {
padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--12) var(--wp--preset--spacing--8) var(--wp--preset--spacing--32);
}
@media screen and (width < 768px) {
.underPageTable .c-btn {
min-width: 12.5rem;
}
}
@media screen and (width < 768px) {
.underPageTable {
display: block;
border: 0.0625rem solid var(--wp--preset--color--gray);
}
.underPageTable tbody,
.underPageTable tr {
display: block;
}
.underPageTable th,
.underPageTable td {
display: block;
width: 100%;
min-width: 0;
border: none;
}
.underPageTable th {
padding: 0.8125rem 1.25rem;
}
.underPageTable td {
padding: 1.5rem 1.25rem 1.25rem;
font-size: 0.9375rem;
}
}
.p-underPage__inner {
max-width: calc(60rem + var(--wp--preset--spacing--40) * 2);
}
.p-underPage td > :first-child {
margin-top: 0;
}
.p-underPage td img {
width: 16.0625rem;
max-width: 100%;
}
.p-underPage .c-btn {
margin-top: var(--wp--preset--spacing--8);
}
.p-underPage__anchorNav {
margin-bottom: var(--wp--preset--spacing--48);
}
.p-underPage__anchorList {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
gap: var(--wp--preset--spacing--16);
}
.p-underPage__anchorLink {
height: 100%;
display: flex;
gap: var(--wp--preset--spacing--12);
align-items: center;
justify-content: space-between;
padding-bottom: var(--wp--preset--spacing--12);
font-size: var(--wp--preset--font-size--sm);
line-height: 1.4;
background-image: radial-gradient(circle, var(--wp--preset--color--blue) 0.03125rem, transparent 0.03125rem);
background-position: left bottom;
background-repeat: repeat-x;
background-size: 0.25rem 0.0625rem;
}
.p-underPage__anchorLink .c-arrow {
flex-shrink: 0;
rotate: 90deg;
}
@media (any-hover: hover) {
.p-underPage__anchorLink:hover {
opacity: 1;
}
.p-underPage__anchorLink:hover .c-arrow {
opacity: 1;
}
.p-underPage__anchorLink:hover .c-arrow::before {
translate: 300% -50%;
}
.p-underPage__anchorLink:hover .c-arrow::after {
translate: -50% -50%;
}
} .p-contact__inner {
max-width: calc(53.75rem + var(--wp--preset--spacing--40) * 2);
margin-inline: auto;
}.entry-content.wp-block-post-content{
padding: 0;
} :where(.wp-block-post-content) a{
color: var(--wp--preset--color--blue);
display: inline;
background-image: linear-gradient(90deg, var(--wp--preset--color--blue), var(--wp--preset--color--blue));
background-position: left calc(100% - 0.15em);
background-repeat: no-repeat;
background-size: 100% 1px;
text-decoration: none;
transition: background-position 0s, background-size 0.3s;
}
@media (any-hover: hover) {
:where(.wp-block-post-content) a:hover {
opacity: 1;
background-position: right calc(100% - 0.15em);
background-size: 0 1px;
}
} .wp-block-heading{
margin-top: var(--wp--preset--spacing--64);
margin-bottom: var(--wp--preset--spacing--32);
&:is(h2){
position: relative;
margin-top: var(--wp--preset--spacing--80);
margin-bottom: var(--wp--preset--spacing--32);
padding-bottom: var(--wp--preset--spacing--18);
&::after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.125rem;
border-radius: 0.0625rem;
background: linear-gradient(to right, var(--wp--preset--color--brightblue) 0 0.25rem, transparent 0.25rem 0.5rem, var(--wp--preset--color--yellow) 0.5rem 0.75rem, transparent 0.75rem 1rem, var(--wp--preset--color--gray) 1rem 100%);
}
}
&.is-style-nostyle{
padding: 0;
background: none;
border: none;
&::before,&::after{
display: none;
}
}
&:is(h3){
margin-top: var(--wp--preset--spacing--64);
margin-bottom: var(--wp--preset--spacing--32);
}
&:is(h4){
margin-top: var(--wp--preset--spacing--48);
margin-bottom: var(--wp--preset--spacing--24);
}
} .is-layout-constrained > .alignleft,
.is-layout-constrained > .alignright{
margin-top: 0;
}
.wp-block-image :where(figcaption){
margin-bottom: 0;
font-size: var(--wp--preset--font-size--sm);
} .wp-block-list{
padding-left: 1em;
&:is(ul){
list-style-type: disc;
}
&:is(ol){
list-style-type: decimal;
}
} .wp-block-button{
.wp-block-button__link {
display: inline-grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto;
align-items: center;
gap: var(--wp--preset--spacing--24);
background-color: var(--wp--preset--color--black);
background-image: none;
min-width: 15rem;
padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--12) var(--wp--preset--spacing--12) var(--wp--preset--spacing--32);
border-radius: 4.375rem;
transition: background-color 400ms ease-in-out;
font-size: var(--wp--preset--font-size--default);
font-weight: bold;
line-height: 1.2;
text-align: left;
transition: color 0.3s ease-in-out;
&::before{
grid-column: 2;
grid-row: 1;
width: 2.5rem;
height: auto;
aspect-ratio: 1;
border-radius: 50%;
border: 0.0625rem solid var(--wp--preset--color--skyblue);
display: block;
position: relative;
overflow: clip;
aspect-ratio: 1;
content: "";
}
&::after{
grid-column: 2;
grid-row: 1;
width: 2.5rem;
height: auto;
aspect-ratio: 1;
border-radius: 50%;
display: block;
position: relative;
background-color: white;
overflow: clip;
aspect-ratio: 1;
mask-image: url(//test.pai-r.com/wp-content/themes/PAI-R/img/common/icon_arrow.svg), url(//test.pai-r.com/wp-content/themes/PAI-R/img/common/icon_arrow.svg);
mask-repeat: no-repeat;
mask-size: 0.625rem auto;
mask-position: center center, -100% center;
transition: mask-position 400ms ease-in-out;
content: "";
}
@media (hover){
&:hover{
background-color: var(--wp--preset--color--blue);
opacity: 1;
&::after{
mask-position: 200% center, center center;
}
}
}
&.has-white-background-color{
&::before{
background-color: var(--wp--preset--color--black);
}
@media (hover){
&:hover{
background-color: var(--wp--preset--color--black) !important;
color: var(--wp--preset--color--white) !important;
}
}
}
} &.is-style-back{
.wp-block-button__link{
grid-template-columns: auto 1fr;
padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--64) var(--wp--preset--spacing--12) var(--wp--preset--spacing--12);
text-align: center;
&::before,&::after{
grid-column: 1;
rotate: 180deg;
}
}
}
}.p-interviewArchive__list {
display: grid;
gap: var(--wp--preset--spacing--48);
}
.p-interviewArchive__empty {
font-size: var(--wp--preset--font-size--default);
}