@charset "UTF-8";
/* foundation */
/* variable */
/* color */
/* base */
/* bg */
/* primary */
/* secondary */
/* border */
/* grad */
/* error */
/* blank */
/* others */
/* mixin */
/* base */
/* foundation */
body {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
font-family: "Zen Kaku Gothic New", sans-serif;
font-size: 16px;
line-height: 1.75;
color: #2b2b2b;
letter-spacing: 0;
-webkit-font-smoothing: antialiased;
}
main {
flex-grow: 1;
}
ul, li {
list-style: none;
}
::placeholder {
color: #888;
}
*:focus {
outline: none;
}
/**
* Reinstate scrolling for non-JS clients
*/
.simplebar-content-wrapper {
scrollbar-width: auto;
-ms-overflow-style: auto;
}
.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
display: initial;
width: initial;
height: initial;
}
.simplebar-track {
background-color: #edeff4;
border-radius: 2px;
}
.simplebar-track.simplebar-horizontal {
width: 100%;
max-width: 600px;
height: 4px !important;
margin: 0 auto;
}
.simplebar-track.simplebar-horizontal .simplebar-scrollbar.simplebar-visible::before {
top: 0;
height: 4px;
opacity: 1;
}
.simplebar-track.simplebar-vertical {
top: 4px !important;
right: 4px;
width: 4px !important;
height: calc(100% - 8px);
background-color: transparent;
}
.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible::before {
left: 0;
width: 4px !important;
background-color: #d9dbe1;
opacity: 1;
}
.simplebar-track .simplebar-scrollbar::before {
background-color: #97a9c9;
}
/* layout */
/* base */
.l-container {
width: 100%;
padding-right: 20px;
padding-left: 20px;
margin: 0 auto;
}
@media screen and (min-width: 1280px) {
.l-container {
padding-right: 32px;
padding-left: 32px;
}
}
.l-container.--small {
max-width: calc(840px + 20px * 2);
}
@media screen and (min-width: 1280px) {
.l-container.--small {
max-width: calc(840px + 32px * 2);
}
}
.l-container.--medium {
max-width: calc(1120px + 20px * 2);
}
@media screen and (min-width: 1280px) {
.l-container.--medium {
max-width: calc(1120px + 32px * 2);
}
}
.l-container.--large {
max-width: calc(1396px + 20px * 2);
}
@media screen and (min-width: 1280px) {
.l-container.--large {
max-width: calc(1396px + 32px * 2);
}
}
/* base */
.l-main.--2column .l-container, .l-main.--2column .p-breadcrumb__inner, .l-main.--2column .p-footer__inner {
display: grid;
align-items: flex-start;
max-width: 1452px;
}
@media screen and (min-width: 1280px) {
.l-main.--2column .l-container, .l-main.--2column .p-breadcrumb__inner, .l-main.--2column .p-footer__inner {
grid-template-columns: 1fr 280px;
padding-right: 8px;
padding-left: 0;
}
}
@media screen and (min-width: 1280px) {
.l-main.--2column .p-page__main {
padding-right: 32px;
padding-left: 32px;
}
}
.l-main.--2column .p-footer__main-inner {
margin: 0;
}
@media screen and (min-width: 1280px) {
.l-main.--2column .p-breadcrumb__list {
padding: 0 32px;
}
}
/* component */
/* base */
.c-anchor-link {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
padding: 8px 24px;
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: bold;
color: #1760e5;
text-decoration: underline;
background-color: #edeff4;
border-radius: 6px;
}
.c-anchor-link > li::after {
--size: 12px;
display: inline-block;
width: var(--size);
height: var(--size);
margin-left: 8px;
content: "";
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
transform: rotate(90deg);
}
/* base */
.c-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 288px;
height: 52px;
font-weight: bold;
line-height: 1.15;
color: #1760e5;
text-align: center;
letter-spacing: 0.02em;
background-color: #fff;
border: 2px solid #1760e5;
border-radius: 26px;
transition: background-color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
.c-button:hover {
background-color: #c1c9e8;
}
}
.c-button:focus {
box-shadow: 0 0 7px 2px rgba(23, 179, 216, 0.8);
}
.c-button:focus:not(:focus-visible) {
box-shadow: none;
}
.c-button__icon {
--size: 16px;
position: absolute;
top: 50%;
right: 16px;
display: inline-block;
width: var(--size);
height: var(--size);
transform: translateY(-50%);
}
.c-button__icon::after {
display: inline-block;
width: 100%;
height: 100%;
vertical-align: top;
content: "";
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-size: contain;
}
.c-button__icon.--s {
--size: 12px;
right: 10px;
}
.c-button__icon.--prev {
right: auto;
left: 16px;
transform: translateY(-50%) scale(-1);
}
.c-button__icon.--down {
transform: translateY(-50%) rotate(90deg);
}
.c-button.--grad {
z-index: 0;
overflow: hidden;
color: #fff;
background: linear-gradient(94deg, #12a3c4 46.72%, #54c897 73.36%, #f9ce60 100%);
border: none;
transition: all 0.3s;
}
.c-button.--grad span:first-child {
position: relative;
}
.c-button.--grad .c-button__icon::after {
background-image: url('data:image/svg+xml;utf8,');
}
.c-button.--grad::before {
position: absolute;
display: block;
width: 100%;
height: 100%;
content: "";
background: linear-gradient(90deg, #12a3c4 0.45%, #54c897 28.45%, #f9ce60 100%);
opacity: 0;
transition: opacity 0.3s;
}
@media (hover: hover) and (pointer: fine) {
.c-button.--grad:hover::before {
opacity: 1;
}
}
.c-button.--white {
border: none;
}
.c-button.is-button-active {
color: #fff;
background-color: #1760e5;
}
.c-button.is-button-active .c-button__icon {
transform: translateY(-50%) rotate(-90deg);
}
.c-button.is-button-active .c-button__icon::after {
background-image: url('data:image/svg+xml;utf8,');
}
.c-button.is-disabled {
color: #fff;
pointer-events: none;
background: #c8ccd4;
border-color: #c8ccd4;
}
.c-button.is-disabled .c-button__icon {
display: none;
}
/* base */
.c-case-tag {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.c-case-tag > li {
padding: 3px 8px;
font-size: 12px;
line-height: 1;
color: #17b3d8;
border: 1px solid #17b3d8;
border-radius: 11px;
}
.c-case-tag > li::before {
margin-right: 2px;
content: "#";
}
/* base */
.c-cat-button {
position: relative;
display: inline-flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
padding: 4px 8px;
font-size: 14px;
line-height: 1.5;
color: #97bfc9;
cursor: pointer;
background-color: #edf3f4;
border: 1px solid transparent;
border-radius: 6px;
transition: color 0.3s, font-weight 0.3s;
}
@media (hover: hover) and (pointer: fine) {
.c-cat-button:hover {
font-weight: bold;
color: #17b3d8;
}
}
.c-cat-button input {
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
.c-cat-button.is-active {
font-weight: bold;
color: #17b3d8;
background-color: #fff;
border-color: #17b3d8;
}
.c-cat-button.--l {
padding: 4px 40px;
font-size: 18px;
}
.c-cat-button:has(input:checked) {
font-weight: bold;
color: #17b3d8;
background-color: #fff;
border-color: #17b3d8;
}
/* base */
.c-check-list {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
}
.c-check-list > li {
margin-bottom: 4px;
}
.c-check-list > li::before {
--size: 16px;
display: inline-block;
width: var(--size);
height: var(--size);
margin-right: 8px;
margin-bottom: -2px;
content: "";
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-size: contain;
}
/* base */
.c-date {
font-weight: bold;
line-height: 1.5;
color: #888;
letter-spacing: 0.02em;
}
/* base */
.c-form-label {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 28px;
height: 16px;
font-size: 10px;
font-weight: normal;
color: #1760e5;
background-color: #d2e1fb;
border-radius: 2px;
}
.c-form-label.--any {
color: #767676;
background-color: #edeff4;
}
/* base */
.c-icon.--white {
fill: #fff;
}
.c-icon.--primary {
fill: #1760e5;
}
.c-icon.--s {
width: 12px;
height: 12px;
}
.c-icon.--m {
width: 16px;
height: 16px;
}
.c-icon.--up {
transform: rotate(-90deg);
}
.c-icon.--down {
transform: rotate(90deg);
}
/* base */
.c-job-label {
display: inline-block;
padding: 0 8px 2px;
font-size: 14px;
line-height: 1.5;
color: #fff;
background-color: #17b3d8;
}
/* base */
.c-link {
color: #1760e5;
text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
.c-link:hover {
text-decoration: none;
}
}
.c-link__icon {
margin-right: 8px;
margin-bottom: 4px;
margin-left: 8px;
}
.c-link__icon.--up {
transform: rotate(-90deg);
}
/* base */
.c-list li {
padding-bottom: 8px;
padding-left: 14px;
text-indent: -14px;
word-break: break-all;
list-style: inherit;
}
.c-list li::before {
--size: 5px;
display: inline-block;
width: var(--size);
height: var(--size);
margin-right: 8px;
margin-bottom: 4px;
margin-left: 3px;
content: "";
background-color: #97a9c9;
border-radius: 50%;
}
.c-list li:has(ol, ul) {
padding-bottom: 0;
}
.c-list.--flex {
display: flex;
flex-wrap: wrap;
gap: 0 16px;
}
.c-list > li > ul {
padding-top: 8px;
padding-left: 4px;
}
.c-list > li > ul > li::before {
background-color: transparent;
border: 1px solid #97a9c9;
}
.c-list > li > ul > li > ul > li::before {
background-color: #97a9c9;
border-radius: 0;
}
/* base */
.c-media-tag {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.c-media-tag > li {
display: flex;
}
.c-media-tag > li > a {
display: inline-flex;
padding: 3px 8px;
font-size: 12px;
line-height: 1;
color: #6e83c8;
background-color: #edeff4;
border: 1px solid #6e83c8;
border-radius: 11px;
}
.c-media-tag > li > a::before {
display: inline-block;
margin-right: 2px;
content: "#";
}
/* base */
.c-new-label {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 8px 1px;
font-family: "Zen Kaku Gothic New", sans-serif;
font-size: 12px;
font-weight: bold;
color: #17b3d8;
text-transform: uppercase;
background-color: #fff;
border: 1px solid #17b3d8;
border-radius: 2px;
}
.c-new-label.--inline {
margin-left: 8px;
vertical-align: middle;
}
.c-new-label.--absolute {
position: absolute;
top: 0;
left: 0;
}
.c-new-label.--update {
color: #17b3d8;
background-color: #e0f5fc;
border-color: #e0f5fc;
}
/* base */
.c-note {
font-size: 12px;
line-height: 1.5;
color: #888;
}
.c-note.--ast::before {
margin-right: 4px;
content: "※";
}
/* base */
.c-post-cat {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 100px;
height: 22px;
padding: 0 16px;
font-family: "Zen Kaku Gothic New", sans-serif;
font-size: 12px;
font-weight: bold;
color: #fff;
background-color: #17b3d8;
border-radius: 2px;
}
.c-post-cat.--wid-fixed {
width: 126px;
padding: 0 8px;
}
/* base */
.c-products-visual-tag {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.c-products-visual-tag > li {
display: inline-flex;
align-items: center;
justify-content: flex-start;
height: 21px;
padding: 0 8px 0 4px;
font-size: 12px;
font-weight: bold;
line-height: 1.5;
color: #97a9c9;
background-color: #fff;
border: solid 1px #97a9c9;
border-left: 4px solid #97a9c9;
border-radius: 0 2px 2px 0;
}
/* base */
.c-table {
display: block;
width: 100%;
border: 1px solid #d9dbe1;
}
@media screen and (min-width: 769px) {
.c-table {
display: table;
}
}
.c-table.--th-center th {
text-align: center;
}
@media screen and (min-width: 769px) {
.c-table.--th-240 tr:first-child th:first-child {
width: 240px;
}
}
.c-table.--th-240 th {
width: auto;
}
.c-table.--td-vertical-base td {
vertical-align: baseline;
}
.c-table__head {
display: block;
}
.c-table__head.--min-md-only {
display: none;
}
@media screen and (min-width: 769px) {
.c-table__head.--min-md-only {
display: table-header-group;
}
}
@media screen and (min-width: 769px) {
.c-table__head {
display: table-header-group;
}
}
.c-table__head + tbody tr:first-child th:first-child, .c-table__head + tbody tr:first-child td:first-child {
border-top: none;
}
.c-table tbody {
display: contents;
width: 100%;
}
@media screen and (min-width: 769px) {
.c-table tbody {
display: table-row-group;
}
}
.c-table tr:first-child th {
border-top: none;
}
.c-table th, .c-table td {
display: block;
padding: 8px 16px;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.02em;
word-break: break-all;
border-top: 1px solid #d9dbe1;
}
@media screen and (min-width: 769px) {
.c-table th, .c-table td {
display: table-cell;
vertical-align: middle;
border: 1px solid #d9dbe1;
}
}
.c-table tr {
display: block;
width: 100%;
}
@media screen and (min-width: 769px) {
.c-table tr {
display: table-row;
}
}
.c-table th {
background-color: #edeff4;
}
@media screen and (min-width: 769px) {
.c-table th {
width: 150px;
}
}
.c-table a {
color: #1760e5;
text-decoration: underline;
}
.c-table dt {
font-weight: normal;
}
/* base */
.c-tag {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.c-tag > li {
position: relative;
display: inline-flex;
align-items: center;
min-height: 20px;
padding: 0 4px 0 13px;
font-size: 12px;
font-weight: bold;
color: #fff;
background-color: #93b9c6;
border-radius: 2px;
}
.c-tag > li::before {
--size: 5px;
position: absolute;
top: 7px;
left: 4px;
display: inline-block;
width: var(--size);
height: var(--size);
content: "";
background-color: #fff;
border-radius: 50%;
}
/* base */
.c-title-area {
padding-top: 64px;
padding-bottom: 32px;
}
@media screen and (min-width: 769px) {
.c-title-area {
padding-top: 80px;
padding-bottom: 40px;
}
}
.c-title-area.--pb0 {
padding-bottom: 0;
}
.c-title {
position: relative;
font-weight: bold;
line-height: 1.5;
letter-spacing: 0.02em;
word-break: break-all;
}
.c-title.--l {
font-size: 32px;
}
@media screen and (min-width: 769px) {
.c-title.--l {
font-size: 48px;
}
}
.c-title.--m {
font-size: 24px;
}
@media screen and (min-width: 769px) {
.c-title.--m {
font-size: 32px;
}
}
.c-title.--s {
font-size: 20px;
}
@media screen and (min-width: 769px) {
.c-title.--s {
font-size: 24px;
}
}
.c-title.--xs {
font-size: 20px;
}
.c-title.--xxs {
font-size: 18px;
}
.c-title.--primary {
color: #1760e5;
}
.c-title.--secondary {
color: #17b3d8;
}
.c-title.--white {
color: #fff;
}
.c-title.--line-2colors {
padding-bottom: 20px;
}
.c-title.--line-2colors::before, .c-title.--line-2colors::after {
position: absolute;
bottom: 0;
left: 0;
display: inline-block;
height: 4px;
content: "";
border-radius: 2px;
}
.c-title.--line-2colors::before {
width: 100%;
background-color: #97a9c9;
}
.c-title.--line-2colors::after {
width: 112px;
}
.c-title.--line-2colors.--primary::after {
background-color: #1760e5;
}
.c-title.--line-2colors.--secondary::after {
background-color: #17b3d8;
}
.c-title.--line-2colors.--secondary::before {
background-color: #d9dbe1;
}
.c-title.--line-2colors.--white::after {
background-color: #fff;
}
.c-title.--line-2colors.--white::before {
background-color: #d9dbe1;
}
.c-title.--short-line {
display: flex;
flex-direction: column;
gap: 24px;
}
.c-title.--short-line::after {
display: inline-block;
width: 48px;
height: 4px;
content: "";
background-color: #1760e5;
border-radius: 2px;
}
@media screen and (min-width: 769px) {
.c-title.--short-line::after {
width: 64px;
}
}
.c-title.--short-line.--white::after {
background-color: #fff;
}
.c-title.--short-line.--center {
align-items: center;
text-align: center;
}
/* base */
.c-toggle {
display: flex;
gap: 0 !important;
align-items: center;
height: 24px;
padding: 2px;
font-size: 14px;
background-color: #edeff4;
border-radius: 12px;
}
.c-toggle > li > a {
padding: 0 7px;
border-radius: 10px;
}
.c-toggle > li > a.--current {
font-weight: bold;
color: var(--base-white, #fff);
background-color: #1760e5;
}
/* project */
/* base */
.p-accordion__body {
height: 0;
overflow: hidden;
}
.p-accordion__body.is-active {
height: auto;
}
.p-accordion__body-inner {
padding-top: 8px;
padding-bottom: 8px;
}
@media screen and (min-width: 769px) {
.p-accordion__body-inner {
padding-top: 16px;
padding-bottom: 0;
}
}
.p-accordion__body-list-wrap {
padding: 16px 24px;
background-color: #c1c9e8;
}
.p-accordion + .p-products__archive-list {
margin-top: 16px;
}
/* base */
.p-action-box {
padding: 24px;
background-color: #e0f5fc;
border-radius: 6px;
}
@media screen and (min-width: 1280px) {
.p-action-box {
padding: 50px;
}
}
.p-action-box > ol {
display: flex;
flex-direction: column;
gap: 24px;
counter-reset: num;
}
.p-action-box > ol > li {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 1280px) {
.p-action-box > ol > li {
flex-direction: row;
gap: 10px;
align-items: center;
}
}
.p-action-box > ol > li::before {
font-size: 18px;
color: #888;
content: "Form" counter(num);
counter-increment: num;
}
@media screen and (min-width: 769px) {
.p-action-box > ol > li::before {
font-size: 20px;
}
}
/* base */
.p-banner-area {
position: relative;
display: flex;
justify-content: center;
padding: 16px 20px;
background-color: #edeff4;
}
.p-banner-area.--archive {
margin: 0 -20px;
margin-bottom: 40px;
}
@media screen and (min-width: 1172px) {
.p-banner-area.--archive {
margin-right: calc((100vw - 1452px) / -2 - 20px);
margin-left: calc((100vw - 1452px) / -2 - 20px);
}
}
@media screen and (min-width: 1280px) {
.p-banner-area.--archive {
margin-right: -32px;
margin-left: -32px;
}
}
@media screen and (min-width: 1460px) {
.p-banner-area.--archive {
margin-left: calc((100vw - 1452px) / -2 - 32px);
}
}
@media screen and (min-width: 1280px) {
.p-banner-area.--top {
margin: 0 -8px;
}
}
@media screen and (min-width: 1460px) {
.p-banner-area.--top {
margin-right: -8px;
margin-left: calc((100vw - 1452px) / -2 - 8px);
}
}
.p-banner-area__inner {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 335px;
margin: 0 auto;
}
@media screen and (min-width: 769px) {
.p-banner-area__inner {
max-width: 758px;
}
}
@media screen and (min-width: 1280px) {
.p-banner-area__inner {
max-width: 928px;
}
}
@media screen and (min-width: 1460px) {
.p-banner-area__inner {
margin-right: 98px;
}
}
.p-banner-area__inner a {
transition: opacity 0.3s;
}
@media (hover: hover) and (pointer: fine) {
.p-banner-area__inner a:hover {
opacity: 0.6;
}
}
.p-banner-area .slider-prev {
left: -12px;
}
@media screen and (min-width: 1280px) {
.p-banner-area .slider-prev {
left: 0;
}
}
.p-banner-area .slider-next {
right: -12px;
}
@media screen and (min-width: 1280px) {
.p-banner-area .slider-next {
right: 0;
}
}
/* base */
.p-box {
padding: 24px;
background-color: #edeff4;
}
.p-box__title {
padding-bottom: 16px;
border-bottom: 1px solid #1760e5;
}
.p-box__text-area {
margin-top: 16px;
line-height: 1.75;
word-break: break-all;
}
.p-box__list > li:last-child {
padding-bottom: 0;
}
/* base */
.p-breadcrumb {
padding: 16px 0;
margin-top: 64px;
overflow: auto;
background-color: #edeff4;
}
.p-breadcrumb__inner {
padding: 0 20px;
margin: 0 auto;
}
@media screen and (min-width: 1280px) {
.p-breadcrumb__inner {
max-width: 1280px;
padding: 0 32px;
}
}
.p-breadcrumb + .p-breadcrumb {
margin-top: 0;
border-top: 1px solid #c1c9e8;
}
.p-breadcrumb__list {
display: flex;
gap: 8px;
font-size: 12px;
line-height: 1;
color: #1760e5;
}
.p-breadcrumb__list + .p-breadcrumb__list {
margin-top: 16px;
}
.p-breadcrumb__list-item {
display: flex;
flex-shrink: 0;
gap: 8px;
align-items: center;
}
.p-breadcrumb__list-item:not(:last-child)::after {
--size: 12px;
display: inline-block;
width: var(--size);
height: var(--size);
content: "";
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-size: contain;
}
.p-breadcrumb__list-item:last-child {
padding-right: 32px;
}
.p-breadcrumb__child {
display: flex;
flex-shrink: 0;
align-items: center;
}
.p-breadcrumb__child:last-child {
padding-right: 32px;
}
.p-breadcrumb__child p {
display: inline-block;
}
.p-breadcrumb__child p:not(:last-child)::after {
content: "、";
}
.p-breadcrumb a {
text-decoration: underline;
}
.p-breadcrumb a:not([href]) {
font-weight: bold;
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.p-breadcrumb a:hover {
text-decoration: none;
}
}
/* base */
.p-block-num-list {
counter-reset: section;
}
.p-block-num-list__title {
display: flex;
gap: 10px;
padding-top: 32px;
margin-bottom: 16px;
border-bottom: 2px solid #1760e5;
}
@media screen and (min-width: 769px) {
.p-block-num-list__title {
align-items: flex-end;
}
}
.p-block-num-list__title::before {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 40px;
min-height: 40px;
font-size: 20px;
font-weight: bold;
color: #fff;
content: "0" counter(section);
counter-increment: section;
background-color: #1760e5;
border-radius: 2px 2px 0 0;
}
.p-block-num-list__title > span {
padding-bottom: 8px;
}
.p-block-num-list__title.--bg-secondary {
border-color: #17b3d8;
}
.p-block-num-list__title.--bg-secondary::before {
background-color: #17b3d8;
}
.p-block-num-list__title.--bg-yellow {
border-color: #f9ce60;
}
.p-block-num-list__title.--bg-yellow::before {
background-color: #f9ce60;
}
.p-block-num-list__title.--bg-green {
border-color: #9ec718;
}
.p-block-num-list__title.--bg-green::before {
background-color: #9ec718;
}
/* base */
.p-career-data-card {
position: relative;
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
justify-content: center;
min-height: 260px;
padding: 24px;
overflow: hidden;
text-align: center;
letter-spacing: 0.02em;
background-color: #e0f5fc;
border-radius: 6px;
}
@media screen and (min-width: 769px) {
.p-career-data-card {
padding: 24px;
}
}
@media (hover: hover) and (pointer: fine) {
.p-career-data-card:hover .p-career-data-card__deco::before {
opacity: 1;
}
}
.p-career-data-card__deco {
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
display: inline-block;
height: 20px;
padding-top: 2px;
padding-right: 8px;
padding-left: 8px;
overflow: hidden;
font-family: "Zen Kaku Gothic New", sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 1;
color: #fff;
background: linear-gradient(94deg, #12a3c4 46.72%, #54c897 73.36%, #f9ce60 100%);
border-radius: 6px 0;
}
.p-career-data-card__deco > span {
position: relative;
padding-right: 8px;
padding-left: 8px;
}
.p-career-data-card__deco::before {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 100%;
height: 100%;
content: "";
background: linear-gradient(90deg, #12a3c4 0.45%, #54c897 28.45%, #f9ce60 100%);
opacity: 0;
transition: opacity 0.3s;
}
.p-career-data-card__deco::after {
--size: 7px;
position: relative;
display: inline-block;
width: var(--size);
height: var(--size);
margin-bottom: 2px;
content: "";
background-image: url("assets/img/common/icon_arrow_more.svg");
background-repeat: no-repeat;
background-size: contain;
}
.p-career-data-card__desc {
position: absolute;
bottom: -100%;
left: 0;
z-index: 1;
display: flex;
align-items: center;
width: 100%;
height: 100%;
padding: 24px;
font-weight: bold;
color: #fff;
text-align: left;
pointer-events: none;
visibility: hidden;
background: linear-gradient(90deg, #17b3d8 0%, #1ac77c 99.9%);
transition: visibility 0.3s, bottom 0.3s;
}
.p-career-data-card__desc.is-active {
bottom: 0;
pointer-events: auto;
visibility: visible;
}
.p-career-data-card__desc-close-button {
position: absolute;
right: 16px;
bottom: 16px;
width: 16px;
height: 16px;
}
.p-career-data-card__desc-close-button img {
width: 100%;
height: 100%;
vertical-align: super;
object-fit: contain;
}
.p-career-data-card.--blank {
display: none;
}
.p-career-data-card.--row {
gap: 32px;
}
@media screen and (min-width: 1280px) {
.p-career-data-card.--row {
flex-direction: row;
text-align: left;
}
}
.p-career-data-card:first-child {
grid-area: age;
}
.p-career-data-card:nth-child(2) {
grid-area: gender;
}
.p-career-data-card:nth-child(3) {
grid-area: job;
}
.p-career-data-card:nth-child(4) {
grid-area: remote;
}
.p-career-data-card:nth-child(5) {
grid-area: slidework;
}
.p-career-data-card:nth-child(6) {
grid-area: holiday;
}
.p-career-data-card:nth-child(7) {
grid-area: overtime;
}
.p-career-data-card:nth-child(8) {
grid-area: vacation;
}
.p-career-data-card:nth-child(9) {
grid-area: new-career;
}
.p-career-data-card:nth-child(10) {
grid-area: blank;
}
.p-career-data-card:nth-child(13) {
grid-area: blank2;
}
.p-career-data-card:nth-child(11) {
grid-area: return;
}
.p-career-data-card:nth-child(12) {
grid-area: working-year;
}
.p-career-data-card__title {
font-size: 32px;
font-weight: bold;
line-height: 1.5;
}
.p-career-data-card__title span {
display: inline-block;
font-family: "Zen Kaku Gothic New", sans-serif;
font-size: 19px;
vertical-align: super;
}
.p-career-data-card__num {
font-size: 24px;
font-weight: bold;
line-height: 1;
letter-spacing: 0.02em;
}
.p-career-data-card__num span {
display: inline-block;
font-family: "Zen Kaku Gothic New", sans-serif;
font-size: 56px;
}
.p-career-data-card__img {
width: 200px;
}
.p-career-data-card__list {
display: flex;
flex-direction: column;
gap: 32px;
}
.p-career-data-card__list > div {
display: flex;
gap: 24px;
align-items: center;
}
.p-career-data-card__list > div dt {
font-size: 20px;
}
.p-career-data-card__list.--job {
gap: 10px;
}
.p-career-data-card__list.--job > div {
gap: 0;
}
.p-career-data-card__list.--job > div dt, .p-career-data-card__list.--job > div dd {
line-height: 1.5;
}
.p-career-data-card__list.--job > div dt {
width: 120px;
}
.p-career-data-card__list.--job > div dd {
margin-right: 0;
margin-left: auto;
}
.p-career-data-card__data-graph {
max-width: 210px;
max-height: 210px;
pointer-events: none;
}
.p-career-data-card__open-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
}
/* base */
.p-career-mv {
width: 100%;
overflow: hidden;
background-color: #17b3d8;
}
@media screen and (min-width: 1280px) {
.p-career-mv {
max-height: 500px;
aspect-ratio: 1280/500;
}
}
.p-career-mv__container {
position: relative;
display: flex !important;
flex-direction: column;
gap: 32px;
align-items: center;
justify-content: center;
height: 100%;
padding-bottom: 32px !important;
}
@media screen and (min-width: 1280px) {
.p-career-mv__container {
gap: 0;
align-items: flex-start;
}
}
.p-career-mv__img {
max-width: 450px;
}
@media screen and (min-width: 1280px) {
.p-career-mv__img {
position: absolute;
top: -22px;
right: -90px;
width: 747px;
max-width: inherit;
}
}
.p-career-mv__catch, .p-career-mv__lead {
font-weight: bold;
line-height: 1.5;
color: #fff;
letter-spacing: 0.02em;
}
.p-career-mv__catch {
font-size: 32px;
}
@media screen and (min-width: 769px) {
.p-career-mv__catch {
font-size: 40px;
}
}
.p-career-mv__lead {
margin-top: 16px;
font-size: 18px;
}
@media screen and (min-width: 769px) {
.p-career-mv__lead {
margin-top: 32px;
}
}
/* base */
.p-career__strength {
padding-bottom: 64px;
margin-top: 64px;
color: #fff;
background-color: #17b3d8;
}
.p-career__requirements-title-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 128px;
font-size: 32px;
font-weight: bold;
line-height: 1.5;
color: #fff;
letter-spacing: 0.02em;
background-color: #17b3d8;
}
.p-career__text-img-area {
display: grid;
gap: 32px;
}
@media screen and (min-width: 769px) {
.p-career__text-img-area {
grid-template-columns: 352px 1fr;
}
}
.p-career__text-img-area img {
width: 100%;
}
.p-career__data {
display: grid;
grid-template-areas: "age" "gender" "job" "remote" "slidework" "holiday" "overtime" "vacation" "new-career" "blank" "return" "working-year" "blank2";
gap: 32px;
}
@media screen and (min-width: 769px) {
.p-career__data {
grid-template-areas: "age age gender gender gender gender" "job job job job remote remote" "slidework slidework holiday holiday overtime overtime" "vacation vacation new-career new-career new-career new-career" "blank return return working-year working-year blank2";
grid-template-columns: repeat(6, 1fr);
}
}
/* base */
.p-case-card {
line-height: 1.5;
transition: color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
.p-case-card:hover .p-case-card__title {
color: #003391;
}
.p-case-card:hover img {
opacity: 0.6;
}
}
.p-case-card img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
border-radius: 6px;
transition: opacity 0.3s;
}
.p-case-card__title {
margin-top: 16px;
color: #1760e5;
word-break: break-all;
}
.p-case-card__text {
display: -webkit-box;
margin-top: 8px;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.p-case-card__tag-area {
margin-top: 16px;
}
/* base */
.p-case-mv__thumb-and-data {
display: grid;
gap: 32px;
align-items: flex-start;
max-width: 335px;
}
@media screen and (min-width: 769px) {
.p-case-mv__thumb-and-data {
grid-template-columns: 1fr 288px;
max-width: inherit;
}
}
.p-case-mv__thumb-wrap img {
width: 100%;
object-fit: cover;
height: auto;
aspect-ratio: 335/165;
}
@media screen and (min-width: 769px) {
.p-case-mv__thumb-wrap img {
aspect-ratio: 608/300;
}
}
.p-case-mv__data-box {
padding: 16px;
background-color: #edeff4;
}
@media screen and (min-width: 769px) {
.p-case-mv__data-box {
padding: 24px;
}
}
.p-case-mv__data-box > a {
display: block;
color: #1760e5;
text-decoration: underline;
}
.p-case-mv__data-list > li {
padding-bottom: 8px;
word-break: break-all;
}
.p-case-mv__data-list > li:last-child {
padding-bottom: 16px;
}
.p-case-mv__text {
margin-top: 32px;
}
/* base */
.p-case-search {
margin-bottom: 48px;
border: 1px solid #c1c9e8;
border-radius: 6px;
}
.p-case-search__scroll-body {
height: 300px;
overflow: auto;
}
.p-case-search__all-button-area {
display: flex;
justify-content: center;
padding: 24px 24px 0;
}
.p-case-search__main {
display: flex;
flex-direction: column;
gap: 24px;
padding: 0 24px 24px;
margin-top: 24px;
}
.p-case-search__main-inner {
display: grid;
gap: 16px;
}
@media screen and (min-width: 769px) {
.p-case-search__main-inner {
grid-template-columns: 126px 1fr;
gap: 0;
}
}
.p-case-search__title {
padding-bottom: 8px;
text-wrap: nowrap;
border-bottom: 1px solid #c1c9e8;
}
@media screen and (min-width: 769px) {
.p-case-search__title {
padding-right: 16px;
padding-bottom: 0;
border-right: 1px solid #c1c9e8;
border-bottom: none;
}
}
.p-case-search__list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
@media screen and (min-width: 769px) {
.p-case-search__list {
padding-left: 16px;
}
}
/* base */
.p-case__tag-area {
display: flex;
justify-content: flex-end;
}
.p-case__box-area {
display: grid;
gap: 32px 40px;
margin-top: 32px;
}
@media screen and (min-width: 769px) {
.p-case__box-area {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 769px) {
.p-case__box-area:has(> :only-child) .p-box {
grid-column: 1/3;
}
}
@media screen and (min-width: 769px) {
.p-case__box-area:has(> :nth-child(2)) .p-box:first-child {
grid-column: 1/2;
}
}
@media screen and (min-width: 769px) {
.p-case__box-area:has(> :nth-child(2)) .p-box:nth-child(2) {
grid-column: 2/3;
}
}
@media screen and (min-width: 769px) {
.p-case__box-area:has(> :nth-child(3)) .p-box:first-child {
grid-column: 1/2;
}
}
@media screen and (min-width: 769px) {
.p-case__box-area:has(> :nth-child(3)) .p-box:nth-child(2) {
grid-column: 2/3;
}
}
@media screen and (min-width: 769px) {
.p-case__box-area:has(> :nth-child(3)) .p-box:nth-child(3) {
grid-column: 1/3;
}
}
.p-case__img-area {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px 32px;
}
@media screen and (min-width: 769px) {
.p-case__img-area {
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
}
.p-case__img-area img {
width: 100%;
aspect-ratio: 3/2;
object-fit: cover;
}
.p-case__img-caption {
margin-top: 16px;
font-size: 14px;
line-height: 1.5;
word-break: break-all;
}
/* base */
.p-cat-section {
overflow: hidden;
border: 1px solid #c1c9e8;
border-radius: 6px;
}
.p-cat-section__title {
padding: 8px 16px;
background-color: #edeff4;
}
.p-cat-section__main-area {
padding: 8px 16px;
}
.p-cat-section__list {
display: flex;
flex-wrap: wrap;
gap: 8px 24px;
}
.p-cat-section__list > li > a {
font-weight: bold;
}
.p-cat-section__list > li > a::after {
--size: 12px;
display: inline-block;
width: var(--size);
height: var(--size);
margin-left: 8px;
content: "";
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
}
/* base */
.p-company__title-and-table {
display: grid;
}
@media screen and (min-width: 1280px) {
.p-company__title-and-table {
grid-template-columns: 384px 1fr;
gap: 32px;
}
}
@media screen and (min-width: 1280px) {
.p-company__table {
margin-top: 120px;
}
}
.p-company__map-area {
display: grid;
}
.p-company__map-area img, .p-company__map-area iframe {
width: 100%;
height: 400px;
object-fit: contain;
object-position: top;
}
.p-company__map-area.--3column {
gap: 32px;
}
@media screen and (min-width: 769px) {
.p-company__map-area.--3column {
grid-template-columns: repeat(3, 1fr);
}
}
.p-company__map-area.--2column {
gap: 40px;
}
@media screen and (min-width: 769px) {
.p-company__map-area.--2column {
grid-template-columns: repeat(2, 1fr);
}
}
.p-company__map-text-area {
display: flex;
flex-direction: column;
gap: 24px;
}
.p-company__message {
display: grid;
gap: 32px;
}
@media screen and (min-width: 769px) {
.p-company__message {
grid-template-columns: 1fr 240px;
}
}
.p-company__message img {
width: 100%;
}
.p-company__message-text-area {
display: flex;
flex-direction: column;
gap: 24px;
}
.p-company__message-img-area {
display: grid;
grid-template-columns: 120px 1fr;
gap: 16px;
align-items: flex-end;
}
@media screen and (min-width: 769px) {
.p-company__message-img-area {
grid-template-columns: 1fr;
}
}
.p-company__ceo-name {
font-size: 14px;
}
.p-company__environment-top {
display: grid;
gap: 40px;
}
@media screen and (min-width: 769px) {
.p-company__environment-top {
grid-template-columns: 1fr 384px;
}
}
.p-company__environment-top img {
display: none;
}
@media screen and (min-width: 769px) {
.p-company__environment-top img {
display: block;
width: 100%;
}
}
.p-company__environment-bottom {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 40px;
}
/* base */
.p-contact__desc {
line-height: 1.75;
}
.p-contact__section-area {
display: flex;
flex-direction: column;
gap: 32px;
}
/* base */
.p-desc-card__img-area {
display: flex;
justify-content: center;
}
.p-desc-card__img-area > img {
--size: 152px;
width: var(--size);
height: var(--size);
object-fit: contain;
}
.p-desc-card__desc-area {
display: flex;
flex-direction: column;
gap: 18px;
margin-top: 24px;
}
.p-desc-card__desc-area:only-child {
margin-top: 0;
}
.p-desc-card__title {
font-size: 24px;
font-weight: bold;
line-height: 1.5;
text-align: center;
letter-spacing: 0.02em;
}
.p-desc-card__title.--sp-left {
text-align: left;
}
@media screen and (min-width: 769px) {
.p-desc-card__title.--sp-left {
text-align: center;
}
}
.p-desc-card__message-area {
border-left: 4px solid #17b3d8;
}
.p-desc-card__message-title {
display: inline-flex;
padding: 0 24px 0 20px;
font-size: 18px;
font-weight: bold;
line-height: 1.5;
color: #fff;
background-color: #17b3d8;
border-radius: 0 13.5px 13.5px 0;
}
.p-desc-card__message-text {
padding: 10px 16px 8px 20px;
font-weight: bold;
}
/* base */
.p-desc-list.--num {
counter-reset: section;
}
.p-desc-list.--num > li {
counter-reset: child-section;
}
.p-desc-list.--num .p-desc-list__title span::before {
content: counter(section) ". ";
counter-increment: section;
}
.p-desc-list__title {
position: relative;
margin: 64px 0 32px;
}
.p-desc-list__title::after {
position: absolute;
top: 50%;
display: block;
width: 100%;
height: 1px;
content: "";
background-color: #c1c9e8;
transform: translateY(-50%);
}
.p-desc-list__title span {
position: relative;
z-index: 1;
display: inline-block;
padding-right: 16px;
background-color: #fff;
}
.p-desc-list__title.--sp-pr-none::after {
display: none;
}
.p-desc-list__title.--sp-pr-none span {
padding-right: 0;
}
.p-desc-list__child-title {
position: relative;
margin: 48px 0 24px;
}
.p-desc-list__child-title::before {
padding-left: 12px;
content: "";
}
.p-desc-list__child-title.--num::before {
content: counter(section) "." counter(child-section) " ";
counter-increment: child-section;
}
.p-desc-list__child-title::after {
position: absolute;
top: 16px;
left: 0;
display: inline-block;
width: 8px;
height: 2px;
content: "";
background-color: #888;
transform: translateY(-50%);
}
.p-desc-list__text + .p-ol {
margin-top: 16px;
}
.p-desc-list__text.--column {
display: flex;
flex-direction: column;
gap: 28px;
}
/* base */
@media screen and (min-width: 1280px) {
.p-drawer {
display: none;
}
}
.p-drawer__main {
position: fixed;
top: 58px;
left: 0;
z-index: 10;
width: 100%;
height: calc(100% - 58px);
overflow: auto;
color: #fff;
pointer-events: none;
visibility: hidden;
background-color: #1760e5;
opacity: 0;
transition: all 0.5s;
}
.p-drawer__main.is-open {
display: block;
pointer-events: auto;
visibility: visible;
opacity: 1;
}
.p-drawer__main.is-open + .p-drawer__button span {
background-color: #fff;
}
.p-drawer__main.is-open + .p-drawer__button span::before {
top: 0;
transform: rotate(45deg);
}
.p-drawer__main.is-open + .p-drawer__button span::after {
top: 0;
transform: rotate(-45deg);
}
.p-drawer__menu {
display: flex;
flex-direction: column;
gap: 24px;
font-size: 24px;
color: #fff;
}
.p-drawer__button {
position: relative;
z-index: 9;
display: flex;
align-items: center;
width: 40px;
height: 40px;
padding: 13.5px 8px;
}
.p-drawer__button span {
position: relative;
display: block;
width: 100%;
height: 1px;
background-color: #1760e5;
}
.p-drawer__button span::before, .p-drawer__button span::after {
position: absolute;
display: block;
width: 100%;
height: 1px;
content: "";
background-color: #1760e5;
transition: transform 0.3s;
}
.p-drawer__button span::before {
top: -6px;
}
.p-drawer__button span::after {
bottom: -6px;
}
.p-drawer__close-button {
position: absolute;
top: 24px;
right: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 19px;
height: 19px;
}
.p-drawer__close-button::before, .p-drawer__close-button::after {
position: absolute;
top: 50%;
display: block;
width: 100%;
height: 2px;
content: "";
background-color: #898989;
}
.p-drawer__close-button::before {
left: 1px;
transform: rotate(-45deg) translateY(-50%);
}
.p-drawer__close-button::after {
right: 0;
transform: rotate(45deg) translateY(-50%);
}
.p-drawer__nav-search {
padding: 18px 20px;
background-color: #ebebeb;
}
.p-drawer__nav-search form {
position: relative;
height: 40px;
background-color: #fff;
border-radius: 20px;
}
.p-drawer__nav-search .form-text {
display: block;
width: 100%;
height: 100%;
padding: 0 48px 0 16px;
}
.p-drawer__search {
position: absolute;
top: 0;
right: 12px;
display: flex;
align-items: center;
height: 100%;
}
.p-drawer__nav-list {
flex-grow: 1;
font-weight: bold;
}
.p-drawer__nav-content {
height: 0;
overflow: hidden;
}
.p-drawer__nav-content ul {
display: flex;
flex-direction: column;
gap: 16px;
padding: 24px 20px;
background-color: #124db7;
}
.p-drawer__nav-content ul .p-drawer__nav-content-link {
font-weight: normal;
}
.p-drawer__nav-content-link {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 24px;
}
.p-drawer__nav-content-link::after {
--size: 16px;
display: inline-block;
width: var(--size);
height: var(--size);
content: "";
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-size: contain;
}
.p-drawer__nav-content-link.--thin {
padding: 16px 24px;
padding-top: 8px;
padding-bottom: 0;
}
.p-drawer__nav-item.is-open .js-accordion-trigger::after {
background-image: url('data:image/svg+xml;utf8,');
}
.p-drawer__nav-item-head {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 24px;
line-height: 1.5;
}
.p-drawer__nav-item-head.js-accordion-trigger {
--size: 16px;
}
.p-drawer__nav-item-head.js-accordion-trigger::after {
display: inline-block;
width: var(--size);
height: var(--size);
content: "";
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-size: contain;
}
.p-drawer__bottom ul {
display: flex;
flex-wrap: wrap;
gap: 8px 24px;
justify-content: center;
padding: 24px 16px;
font-weight: bold;
border-top: 1px solid #fff;
}
/* base */
.p-faq {
display: flex;
flex-direction: column;
gap: 24px;
margin-top: 32px;
}
.p-faq__item {
overflow: hidden;
border: 1px solid #c1c9e8;
border-radius: 6px;
}
.p-faq__item dt, .p-faq__item dd {
display: flex;
padding: 16px;
}
.p-faq__item dt::before, .p-faq__item dd::before {
display: inline-block;
flex-shrink: 0;
width: 24px;
font-family: "Zen Kaku Gothic New", sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 1.5;
}
.p-faq__item dt {
font-size: 18px;
line-height: 1.5;
background-color: #edeff4;
}
.p-faq__item dt::before {
color: #1760e5;
content: "Q.";
}
.p-faq__item dd {
line-height: 1.75;
}
.p-faq__item dd::before {
color: #17b3d8;
content: "A.";
}
.p-faq__item ul {
padding-left: 1em;
text-indent: -1em;
}
.p-faq__item ul li::before {
content: "・";
}
/* base */
.p-feature-card__img {
width: 100%;
aspect-ratio: 3/2;
object-fit: contain;
}
.p-feature-card__title {
margin-top: 16px;
}
.p-feature-card__text {
margin-top: 16px;
text-align: left;
word-break: break-all;
}
.p-feature-card__table {
margin-top: 16px;
}
.p-feature-card__table th {
text-align: center;
}
/* base */
.p-footer.--en {
padding: 32px 0;
margin: 0;
border-top: 1px solid #c1c9e8;
}
.p-footer.--en .p-footer__nav {
display: flex;
flex-direction: column;
gap: 32px;
align-items: center;
}
@media screen and (min-width: 1280px) {
.p-footer.--en .p-footer__nav {
flex-direction: row;
justify-content: space-between;
}
}
.p-footer__button-area {
padding: 24px;
background-color: #1760e5;
}
.p-footer__button-area ul {
display: grid;
grid-template-columns: repeat(1, 288px);
gap: 16px 24px;
justify-content: center;
margin: 0 auto;
}
@media screen and (min-width: 1280px) {
.p-footer__button-area ul {
grid-template-columns: repeat(2, 288px);
}
}
.p-footer__inner {
padding: 32px 0;
margin: 0 auto;
}
@media screen and (min-width: 1280px) {
.p-footer__inner {
max-width: 1280px;
}
}
.p-footer__main-inner {
padding: 0 20px;
}
@media screen and (min-width: 1280px) {
.p-footer__main-inner {
padding: 0 32px;
}
}
.p-footer__nav {
line-height: 1.5;
}
.p-footer__nav > div {
display: flex;
flex-direction: column;
gap: 32px;
align-items: center;
margin-top: 32px;
}
@media screen and (min-width: 1280px) {
.p-footer__nav > div {
flex-direction: row;
gap: 0;
align-items: flex-start;
justify-content: space-between;
margin-top: 40px;
}
}
.p-footer__nav-list {
display: flex;
flex-wrap: wrap;
gap: 32px;
justify-content: center;
}
@media screen and (min-width: 1280px) {
.p-footer__nav-list {
gap: 0;
justify-content: space-between;
}
}
.p-footer__nav-list.--center {
gap: 32px;
justify-content: center;
}
.p-footer__nav-list > li > a {
font-size: 18px;
font-weight: bold;
color: #1760e5;
transition: color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
.p-footer__nav-list > li > a:hover {
color: #003391;
}
}
.p-footer__nav-list > li > ul {
display: none;
}
@media screen and (min-width: 1280px) {
.p-footer__nav-list > li > ul {
display: flex;
flex-direction: column;
gap: 8px;
padding-left: 18px;
margin-top: 16px;
font-size: 14px;
}
}
.p-footer__nav-list > li > ul a {
transition: color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
.p-footer__nav-list > li > ul a:hover {
color: #1760e5;
}
}
.p-footer__nav-list > li > ul > li > ul {
display: flex;
flex-direction: column;
gap: 8px;
padding-left: 14px;
margin-top: 8px;
}
.p-footer__mark {
display: inline-block;
width: 100px;
height: 100px;
transition: opacity 0.3s;
}
.p-footer__mark img {
width: 100%;
height: 100%;
object-fit: contain;
}
@media (hover: hover) and (pointer: fine) {
.p-footer__mark:hover {
opacity: 0.6;
}
}
.p-footer__bottom {
display: flex;
flex-flow: column wrap;
justify-content: center;
padding-top: 32px;
margin-top: 32px;
font-size: 14px;
border-top: 1px solid #97a9c9;
}
@media screen and (min-width: 1280px) {
.p-footer__bottom {
flex-direction: row;
justify-content: space-between;
}
}
.p-footer__bottom ul {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
justify-content: center;
}
@media screen and (min-width: 1280px) {
.p-footer__bottom ul {
gap: 16px;
justify-content: flex-start;
}
}
.p-footer__bottom ul a {
transition: color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
.p-footer__bottom ul a:hover {
color: #1760e5;
}
}
.p-footer__bottom div {
display: flex;
gap: 16px;
justify-content: center;
margin-top: 16px;
}
@media screen and (min-width: 1280px) {
.p-footer__bottom div {
justify-content: flex-start;
margin-top: 0;
}
}
.p-footer__copy {
display: flex;
justify-content: center;
margin-top: 32px;
font-size: 12px;
line-height: 1.5;
letter-spacing: 0.02em;
}
.p-footer__sns-group li a {
transition: opacity 0.3s;
}
@media (hover: hover) and (pointer: fine) {
.p-footer__sns-group li a:hover {
opacity: 0.6;
}
}
/* base */
.p-form.--sticky {
position: fixed;
top: calc(100dvh - 60px);
left: 50%;
z-index: 10;
width: 100%;
max-width: 300px;
max-height: calc(100% - 60px);
padding: 8px 16px 26px;
line-height: 1.5;
background-color: #d2e1fb;
border-radius: 10px;
transition: top 0.3s;
transform: translateX(-50%);
}
.p-form.--sticky .c-button .wpcf7-form-control {
padding-top: 0 !important;
}
@media screen and (min-width: 1280px) {
.p-form.--sticky {
position: sticky;
top: 80px;
bottom: auto;
left: auto;
height: calc(100vh - 80px);
max-height: 720px;
padding: 16px 16px 26px;
overflow: auto;
transform: none;
}
}
.p-form.--sticky.is-up {
top: calc(100vh - var(--formh));
overflow: auto;
}
.p-form.--sticky.is-up .p-form__up-toggle img {
transform: rotate(90deg);
}
.p-form.--sticky .wpcf7-form-control {
padding: 0;
padding-top: 4px;
border: none;
}
.p-form.--sticky .p-form__up-toggle {
display: block;
width: 16px;
height: 16px;
margin: 0 auto;
}
.p-form.--sticky .p-form__up-toggle img {
width: 100%;
height: 100%;
vertical-align: baseline;
transform: rotate(-90deg);
transform-origin: center;
}
@media screen and (min-width: 1280px) {
.p-form.--sticky .p-form__up-toggle {
display: none;
}
}
.p-form.--sticky .p-form__item-area {
overflow: hidden;
border: 1px solid #dadada;
border-radius: 4px;
}
.p-form.--sticky .p-form__title {
color: #1760e5;
text-align: center;
}
@media screen and (min-width: 1280px) {
.p-form.--sticky .p-form__title {
font-size: 18px;
}
}
.p-form.--sticky .p-form__item {
padding: 8px 16px;
font-size: 14px;
background-color: #fff;
}
.p-form.--sticky .p-form__item + .p-form__item {
border-top: 1px solid #dadada;
}
.p-form.--sticky .p-form__input {
padding: 0;
border: none;
border-radius: 0;
}
.p-form.--sticky .p-form__input input:focus {
box-shadow: 0 0 7px 2px rgba(23, 179, 216, 0.8);
}
.p-form.--sticky .p-form__input input:focus:not(:focus-visible) {
box-shadow: none;
}
.p-form.--sticky .p-form__input.--text input {
width: 100%;
background-color: #fff;
}
.p-form.--sticky .p-form__input.--textarea textarea {
height: 88px;
}
.p-form.--sticky .p-form__input.--check {
margin-top: 0;
}
.p-form.--sticky .p-form__input.--select::after {
top: 8px;
right: 0;
}
.p-form.--sticky .p-form__input.--select .wpcf7-select {
padding: 0;
padding-right: 18px;
}
.p-form.--sticky .p-form__note {
margin-top: 0;
font-size: 12px;
}
.p-form.--sticky .p-form__note .c-link__icon {
margin-bottom: 4px;
}
.p-form.--sticky .p-form__content-area {
margin-top: 16px;
}
.p-form.--sticky .p-form__label {
gap: 4px;
padding: 0;
font-size: 12px;
}
.p-form.--sticky .p-form__button-area {
margin-top: 16px;
}
.p-form.--sticky .p-form__button {
height: 33px;
font-size: 14px;
border-radius: 18px;
}
.p-form__item-child-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.p-form__item-child {
display: grid;
grid-template-columns: 128px 1fr;
gap: 10px;
align-items: center;
}
.p-form__item-child > p {
font-weight: bold;
}
.p-form__button-area {
display: flex;
gap: 24px;
align-items: center;
justify-content: center;
margin-top: 32px;
}
.p-form__button-area .wpcf7-spinner {
display: none;
}
.p-form__button span:first-child, .p-form__button input {
width: 100%;
height: 100%;
}
.p-form__button:has(.is-disabled) {
color: #fff;
pointer-events: none;
background: #c8ccd4;
border-color: #c8ccd4;
}
.p-form__button:has(.is-disabled) .c-button__icon {
display: none;
}
.p-form__label {
display: flex;
gap: 8px;
align-items: center;
padding: 24px 16px 16px 0;
font-size: 18px;
font-weight: bold;
line-height: 1.5;
}
.p-form__input textarea {
width: 100%;
height: 120px;
padding-top: 8px !important;
padding-bottom: 8px !important;
overflow: auto;
resize: none;
}
.p-form__input.--s .wpcf7-list-item-label::before {
margin-right: 8px !important;
}
.p-form__input.--check label, .p-form__input.--radio label {
cursor: pointer;
}
.p-form__input.--check .wpcf7-form-control, .p-form__input.--radio .wpcf7-form-control {
padding: 0;
}
.p-form__input.--check .wpcf7-checkbox, .p-form__input.--radio .wpcf7-checkbox {
display: flex;
flex-direction: column;
}
.p-form__input.--check .wpcf7-checkbox .wpcf7-list-item:has(input[type=checkbox]:focus), .p-form__input.--radio .wpcf7-checkbox .wpcf7-list-item:has(input[type=checkbox]:focus) {
box-shadow: 0 0 7px 2px rgba(23, 179, 216, 0.8);
}
.p-form__input.--check .wpcf7-checkbox .wpcf7-list-item, .p-form__input.--radio .wpcf7-checkbox .wpcf7-list-item {
position: relative;
padding: 16px;
}
.p-form__input.--check .wpcf7-checkbox .wpcf7-list-item input, .p-form__input.--radio .wpcf7-checkbox .wpcf7-list-item input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.p-form__input.--check .wpcf7-checkbox .wpcf7-list-item span, .p-form__input.--radio .wpcf7-checkbox .wpcf7-list-item span {
position: relative;
display: flex;
align-items: center;
}
.p-form__input.--check .wpcf7-checkbox .wpcf7-list-item span::before, .p-form__input.--check .wpcf7-checkbox .wpcf7-list-item span::after, .p-form__input.--radio .wpcf7-checkbox .wpcf7-list-item span::before, .p-form__input.--radio .wpcf7-checkbox .wpcf7-list-item span::after {
display: inline-block;
content: "";
}
.p-form__input.--check .wpcf7-checkbox .wpcf7-list-item span::before, .p-form__input.--radio .wpcf7-checkbox .wpcf7-list-item span::before {
width: 16px;
height: 16px;
}
.p-form__input.--check .wpcf7-checkbox .wpcf7-list-item + .wpcf7-list-item, .p-form__input.--radio .wpcf7-checkbox .wpcf7-list-item + .wpcf7-list-item {
border-top: 1px solid #d9dbe1;
}
.p-form__input.--check .wpcf7-checkbox input:checked + span::before {
background-color: #d2e1fb;
border-color: #1760e5;
}
.p-form__input.--check .wpcf7-checkbox input:checked + span::after {
background-image: url('data:image/svg+xml;utf8,');
}
.p-form__input.--check .wpcf7-checkbox label span::before, .p-form__input.--check .wpcf7-checkbox label span::after {
display: inline-block;
flex-shrink: 0;
width: 16px;
height: 16px;
content: "";
}
.p-form__input.--check .wpcf7-checkbox label span::before {
margin-right: 16px;
background-color: #fff;
border: 1px solid #d9dbe1;
border-radius: 2px;
}
.p-form__input.--check .wpcf7-checkbox label span::after {
position: absolute;
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
}
.p-form__input.--check.--policy-check {
padding: 0 !important;
border: none;
}
.p-form__input.--check.--policy-check .wpcf7-form-control {
border: none !important;
}
.p-form__input.--check.--policy-check .wpcf7-list-item {
padding: 0 !important;
}
.p-form__input.--check.--policy-check .wpcf7-list-item .wpcf7-list-item-label::before {
margin-right: 8px;
}
.p-form__input.--radio .wpcf7-checkbox input:checked + span::before {
background-color: #d2e1fb;
border-color: #1760e5;
}
.p-form__input.--radio .wpcf7-checkbox input:checked + span::after {
background-color: #1760e5;
}
.p-form__input.--radio .wpcf7-checkbox label span {
position: relative;
display: flex;
align-items: center;
}
.p-form__input.--radio .wpcf7-checkbox label span::before, .p-form__input.--radio .wpcf7-checkbox label span::after {
flex-shrink: 0;
border-radius: 50%;
}
.p-form__input.--radio .wpcf7-checkbox label span::before {
margin-right: 16px;
border: 1px solid #d9dbe1;
}
.p-form__input.--radio .wpcf7-checkbox label span::after {
position: absolute;
left: 4px;
width: 8px;
height: 8px;
background-color: #d9dbe1;
}
.p-form__input.--select {
position: relative;
padding: 0;
}
.p-form__input.--select::after {
position: absolute;
top: 24px;
right: 16px;
display: inline-block;
width: 10px;
height: 10px;
pointer-events: none;
content: "";
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-size: contain;
transform: rotate(90deg);
}
.p-form__input.--select .wpcf7-select {
width: 100%;
padding: 16px;
padding-right: 32px;
color: #888;
text-overflow: ellipsis;
white-space: nowrap;
}
.p-form__input.--select .wpcf7-select.is-selected {
color: #2b2b2b;
}
.p-form__input.--confirm {
margin-top: 24px;
pointer-events: none;
}
.p-form__input .wpcf7-form-control {
width: 100%;
padding: 16px;
font-size: 14px;
line-height: 1.5;
border: 1px solid #d9dbe1;
border-radius: 4px;
}
.p-form__input .wpcf7-form-control:focus {
box-shadow: 0 0 7px 2px rgba(23, 179, 216, 0.8);
}
.p-form__input .wpcf7-form-control:focus:not(:focus-visible) {
box-shadow: none;
}
.p-form__input label:focus {
box-shadow: 0 0 7px 2px rgba(23, 179, 216, 0.8);
}
.p-form__input label:focus:not(:focus-visible) {
box-shadow: none;
}
.p-form__input .wpcf7-not-valid {
background-color: #fee8ed;
border-color: #ec5046;
}
.p-form__input .wpcf7-not-valid-tip {
margin-top: 8px;
margin-bottom: -1px;
font-size: 12px;
line-height: 1;
color: #ec5046;
}
.p-form__input .wpcf7-not-valid-tip::before {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 4px;
content: "";
background-image: url("assets/img/common/icon_error.svg");
background-repeat: no-repeat;
background-size: contain;
}
.p-form__input-file {
width: auto;
min-width: 288px;
max-width: inherit;
padding-right: 44px;
padding-left: 24px;
cursor: pointer;
}
.p-form__input-file.is-active {
background-color: #c1c9e8;
}
.p-form__input-file .wpcf7-form-control-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.p-form__input-file .wpcf7-form-control-wrap input[type=file] {
position: relative;
z-index: -1;
}
.p-form__note {
padding: 8px 0;
margin-top: 32px;
font-weight: bold;
letter-spacing: 0.02em;
}
.p-form__note .c-link__icon {
width: 12px;
margin-right: 4px;
margin-bottom: 8px;
margin-left: 2px;
}
.p-form__note.--small {
padding: 0;
margin-top: 8px;
font-size: 12px;
font-weight: normal;
line-height: 1.5;
}
.p-form__input-group {
display: grid;
grid-template-columns: repeat(3, 100px);
gap: 8px;
}
.p-form__input-group .--select:first-child .wpcf7-not-valid-tip {
white-space: nowrap;
}
.p-form__input-group .--select:not(:first-child) .wpcf7-not-valid-tip {
display: none;
}
.p-form #contactPolicyCheckbox {
padding: 0;
border: none;
}
.p-form #contactPolicyCheckbox .wpcf7-list-item {
padding: 0;
}
.wpcf7 form .wpcf7-response-output {
border-color: transparent;
}
.wpcf7-list-item {
margin-left: 0;
}
.wpcf7-list-item input[type=checkbox]:focus + .wpcf7-list-item-label::before {
border-color: #1760e5;
}
/* base */
.p-gdpr {
position: fixed;
bottom: 0;
left: 0;
z-index: 100;
display: none;
width: 100%;
background-color: rgba(23, 96, 229, 0.95);
}
.p-gdpr__outer {
max-width: 1120px;
margin: 0 auto;
}
.p-gdpr__inner {
display: grid;
gap: 32px;
padding: 32px 20px;
}
@media screen and (min-width: 1280px) {
.p-gdpr__inner {
grid-template-columns: 1fr 288px;
}
}
.p-gdpr__col1 {
line-height: 1.75;
color: #fff;
}
.p-gdpr__col1 a {
margin-right: 8px;
font-weight: 400;
color: #fff;
}
.p-gdpr__col2 {
display: flex;
align-items: center;
justify-content: center;
}
.p-gdpr__btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 288px;
height: 52px;
font-weight: bold;
color: #1760e5;
background-color: #fff;
border-radius: 26px;
}
.p-gdpr__btn svg {
position: absolute;
top: 18px;
right: 16px;
display: inline-block;
}
/* base */
.p-grid {
display: grid;
gap: 40px;
counter-reset: item;
}
.p-grid.--recruit .p-grid__item {
padding-top: 64px;
}
@media screen and (min-width: 769px) {
.p-grid.--recruit .p-grid__item {
padding-top: 80px;
}
}
.p-grid__button-area {
margin-top: 32px;
text-align: center;
}
@media screen and (min-width: 769px) {
.p-grid.--2column {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 769px) {
.p-grid.--3column {
grid-template-columns: repeat(3, 1fr);
}
}
.p-grid.--gap-s {
gap: 32px;
}
.p-grid.--align-center {
align-items: center;
}
.p-grid__text-area {
margin-top: 24px;
}
.p-grid__text {
margin-top: 16px;
}
/* base */
.p-header {
position: fixed;
top: 0;
left: 0;
z-index: 100;
display: flex;
align-items: center;
width: 100%;
height: 58px;
padding: 8px 12px 8px 20px;
background-color: #fff;
}
@media screen and (min-width: 1280px) {
.p-header {
display: flex;
align-items: center;
height: 80px;
padding: 0 10px 0 32px;
background-color: #fff;
}
}
.p-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
}
.p-header__inner > div {
display: flex;
gap: 16px;
height: 100%;
}
.p-header__logo-img {
width: 205px;
height: 22px;
object-fit: contain;
transition: opacity 0.3s;
}
@media screen and (min-width: 1280px) {
.p-header__logo-img {
width: 290px;
height: 30px;
}
}
@media (hover: hover) and (pointer: fine) {
.p-header__logo-img:hover {
opacity: 0.6;
}
}
.p-header__nav-search {
display: none;
}
@media screen and (min-width: 1280px) {
.p-header__nav-search {
display: flex;
gap: 16px;
align-items: center;
justify-content: space-between;
height: 100%;
padding-right: 4px;
}
.p-header__nav-search > nav, .p-header__nav-search > nav > ul {
display: flex;
gap: 16px;
align-items: center;
letter-spacing: 0.02em;
}
}
.p-header__nav-inner.--link-group {
display: grid;
grid-template-columns: 584px 288px;
gap: 24px;
}
.p-header__nav-inner > div > a:not(.c-button) {
transition: opacity 0.3s;
}
@media (hover: hover) and (pointer: fine) {
.p-header__nav-inner > div > a:not(.c-button):hover {
opacity: 0.6;
}
}
.p-header__nav-link-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px 0;
font-weight: bold;
color: #fff;
}
.p-header__nav-link-group + .p-header__nav-link-group {
margin-top: 16px;
}
.p-header__nav-link-group a {
transition: opacity 0.3s;
}
.p-header__nav-link-group a:hover {
opacity: 0.6;
}
.p-header__nav-link-group.--column {
grid-template-columns: none;
}
.p-header__nav-link-group.--column ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
margin-top: 16px;
}
.p-header__nav-link-group.--column ul li {
padding-left: 1em;
}
.p-header__nav-item {
display: flex;
}
.p-header__nav-item.is-subNav-open .p-header__nav-content {
pointer-events: auto;
visibility: visible;
opacity: 1;
}
.p-header__nav-item-head {
display: block;
font-size: 14px;
letter-spacing: 0.02em;
transition: color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
.p-header__nav-item-head:hover {
color: #1760e5;
}
}
.p-header__nav-content {
position: absolute;
top: 80px;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
padding: 32px 0;
pointer-events: none;
visibility: hidden;
background-color: #1760e5;
opacity: 0;
transition: visibility 0.5s, opacity 0.5s;
}
.p-header__nav-card-group {
display: grid;
gap: 32px;
width: 100%;
}
.p-header__nav-card-group.--3column {
grid-template-columns: repeat(3, 352px);
}
.p-header__nav-card-group.--4column {
grid-template-columns: repeat(4, 256px);
}
.p-header__nav-card-group li {
text-align: center;
}
.p-header__nav-list {
display: flex;
gap: 16px;
height: 100%;
padding-top: 26px;
}
.p-header__nav-list > li {
display: flex;
align-items: flex-start;
height: 100%;
line-height: 2;
}
.p-header__nav-link {
width: 100%;
font-weight: bold;
color: #fff;
}
.p-header__nav-link.--center {
text-align: center;
}
/* base */
.p-journal__title {
margin-top: 80px;
margin-bottom: 40px;
}
.p-journal__accordion {
overflow: hidden;
border: 1px solid #c1c9e8;
border-radius: 6px;
}
.p-journal__accordion + .p-journal__accordion {
margin-top: 24px;
}
.p-journal__accordion-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 16px;
font-size: 18px;
font-weight: bold;
line-height: 1.5;
color: #1760e5;
background-color: #edeff4;
}
.p-journal__accordion-body {
height: 0;
overflow: hidden;
}
.p-journal__accordion-body-inner {
display: grid;
gap: 8px 16px;
padding: 16px;
}
@media screen and (min-width: 769px) {
.p-journal__accordion-body-inner {
grid-template-columns: repeat(4, 1fr);
}
}
/* base */
.p-link-list {
display: grid;
gap: 32px;
}
@media screen and (min-width: 1280px) {
.p-link-list {
grid-template-columns: repeat(3, 1fr);
}
}
.p-link-list > li {
display: flex;
flex-direction: column;
gap: 16px;
}
.p-link-list__child {
padding-left: 24px;
}
/* base */
.p-maker-footer {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: center;
padding-top: 40px;
}
.p-maker-footer a {
width: 100%;
}
@media screen and (min-width: 769px) {
.p-maker-footer a {
width: calc((100% - 24px) / 2);
}
}
/* base */
.p-maker__cat-title {
position: relative;
margin: 64px 0 32px;
font-size: 24px;
}
.p-maker__cat-title::before {
position: absolute;
top: 50%;
left: 0;
display: inline-block;
width: 100%;
height: 2px;
content: "";
background-color: #c1c9e8;
transform: translateY(-50%);
}
.p-maker__cat-title span {
position: relative;
z-index: 1;
padding-right: 8px;
background-color: #fff;
}
.p-maker__card-area {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px 8px;
}
@media screen and (min-width: 769px) {
.p-maker__card-area {
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
}
.p-maker__card {
padding: 16px;
background-color: #edeff4;
border-radius: 6px;
transition: background-color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
.p-maker__card:hover {
background-color: #d6d9e4;
}
.p-maker__card:hover .p-maker__card-title {
color: #003391;
}
.p-maker__card:hover .p-maker__card-thumbnail {
opacity: 0.6;
}
}
.p-maker__card-thumbnail {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 1/1;
background-color: #fff;
transition: opacity 0.3s;
}
.p-maker__card-thumbnail img {
width: 100%;
height: auto;
object-fit: contain;
}
.p-maker__card-title {
min-height: 56px;
margin-top: 10px;
line-height: 1.5;
letter-spacing: 0.02em;
word-break: break-all;
}
@media screen and (min-width: 769px) {
.p-maker__card-title {
font-weight: bold;
color: #1760e5;
transition: color 0.3s;
}
}
/* base */
.p-media-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px 8px;
}
@media screen and (min-width: 769px) {
.p-media-list {
grid-template-columns: repeat(3, 1fr);
gap: 40px 32px;
}
}
@media screen and (min-width: 1280px) {
.p-media-list.--archive {
margin-bottom: 32px;
}
}
.p-media-list__thumb {
position: relative;
border-radius: 6px;
transition: opacity 0.3s;
}
.p-media-list__thumb img {
width: 100%;
height: 100%;
aspect-ratio: 16/9;
border-radius: 6px;
object-fit: cover;
}
.p-media-list__item {
display: grid;
gap: 16px;
}
@media (hover: hover) and (pointer: fine) {
.p-media-list__item:hover .p-media-list__thumb {
opacity: 0.6;
}
.p-media-list__item:hover .p-media-list__title {
color: #003391;
}
}
@media screen and (min-width: 769px) {
.p-media-list__item.--top {
grid-template-columns: repeat(2, 1fr);
grid-column: 1/4;
gap: 40px;
padding: 32px;
margin-bottom: -16px;
border-bottom: 1px solid #c1c9e8;
}
.p-media-list__item.--top .p-media-list__date-and-cat {
gap: 24px;
justify-content: flex-start;
}
}
.p-media-list__text-area {
display: flex;
flex-direction: column;
gap: 16px;
line-height: 1.5;
}
.p-media-list__date-and-cat {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.p-media-list__title {
display: -webkit-box;
overflow: hidden;
font-weight: bold;
line-height: 1.5;
transition: color 0.3s;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
/* base */
.p-more-card {
position: relative;
display: block;
overflow: hidden;
color: #2b2b2b;
background-color: #fff;
border-radius: 6px;
transition: background-color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
.p-more-card:hover {
background-color: #edeff4;
}
.p-more-card:hover .p-more-card__deco::before {
opacity: 1;
}
.p-more-card:hover .p-more-card__thumb-wrap {
opacity: 0.6;
}
}
.p-more-card.--bg {
background-color: #edeff4;
}
@media (hover: hover) and (pointer: fine) {
.p-more-card.--bg:hover {
background-color: #d6d9e4;
}
}
.p-more-card.--height-full {
height: 100%;
}
.p-more-card.--padding {
padding: 16px 16px 32px;
}
.p-more-card.--padding-16-24 {
padding: 16px 24px;
}
.p-more-card.--icon {
padding: 16px;
}
@media screen and (min-width: 769px) {
.p-more-card.--icon {
padding: 16px 24px;
}
}
.p-more-card.--drawer {
padding: 8px 16px;
}
.p-more-card.--drawer .p-more-card__icon-wrap {
padding: 8px;
--size: 56px;
}
.p-more-card.--job {
padding: 24px;
background-color: #e0f5fc;
border-left: 4px solid #17b3d8;
border-radius: 0 6px 6px 0;
}
@media (hover: hover) and (pointer: fine) {
.p-more-card.--job:hover {
background-color: #c6e5ef;
}
}
.p-more-card.--job .p-more-card__title {
font-size: 20px;
color: #17b3d8;
}
@media screen and (min-width: 769px) {
.p-more-card.--job .p-more-card__title {
font-size: 24px;
}
}
.p-more-card.--banner {
aspect-ratio: 816/192;
}
.p-more-card.--banner img {
width: 100%;
height: 100%;
border-radius: 6px;
object-fit: cover;
}
.p-more-card.--banner > div {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
color: #fff;
text-align: center;
transform: translateX(-50%) translateY(-50%);
}
.p-more-card__img-and-title .p-more-card__img-wrap {
height: 120px;
}
.p-more-card__img-and-title .p-more-card__text-area {
padding: 16px 24px 24px;
margin-top: 0;
text-align: center;
}
.p-more-card__img-and-title.--l .p-more-card__img-wrap {
height: 200px;
}
.p-more-card__img-and-title.--l .p-more-card__text-area {
padding-bottom: 16px;
text-align: left;
}
.p-more-card__header-img-and-title {
display: grid;
grid-template-columns: 160px 1fr;
align-items: center;
height: 72px;
}
@media screen and (min-width: 1280px) {
.p-more-card__header-img-and-title {
grid-template-columns: 1fr;
height: auto;
}
}
.p-more-card__header-img-and-title .p-more-card__img-wrap {
height: 100%;
}
@media screen and (min-width: 1280px) {
.p-more-card__header-img-and-title .p-more-card__img-wrap {
height: 120px;
}
}
.p-more-card__header-img-and-title .p-more-card__text-area {
padding: 16px;
margin-top: 0;
}
@media screen and (min-width: 1280px) {
.p-more-card__header-img-and-title .p-more-card__text-area {
padding-bottom: 24px;
}
}
.p-more-card__img-wrap {
transition: opacity 0.3s;
}
.p-more-card__img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.p-more-card__thumb-wrap {
margin-bottom: 16px;
transition: opacity 0.3s;
}
.p-more-card__thumb-wrap img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}
.p-more-card__deco {
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
display: inline-block;
height: 20px;
padding-top: 2px;
padding-right: 8px;
padding-left: 8px;
overflow: hidden;
font-family: "Zen Kaku Gothic New", sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 1;
color: #fff;
background: linear-gradient(94deg, #12a3c4 46.72%, #54c897 73.36%, #f9ce60 100%);
border-radius: 6px 0;
}
.p-more-card__deco > span {
position: relative;
padding-right: 8px;
padding-left: 8px;
}
.p-more-card__deco::before {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 100%;
height: 100%;
content: "";
background: linear-gradient(90deg, #12a3c4 0.45%, #54c897 28.45%, #f9ce60 100%);
opacity: 0;
transition: opacity 0.3s;
}
.p-more-card__deco::after {
--size: 7px;
position: relative;
display: inline-block;
width: var(--size);
height: var(--size);
margin-bottom: 2px;
content: "";
background-image: url("assets/img/common/icon_arrow_more.svg");
background-repeat: no-repeat;
background-size: contain;
}
.p-more-card__title {
position: relative;
font-size: 20px;
font-weight: bold;
line-height: 1.5;
letter-spacing: 0.02em;
}
.p-more-card__title.--primary {
color: #1760e5;
}
.p-more-card__title.--xs {
font-size: 16px;
}
.p-more-card__title.--s {
font-size: 18px;
}
.p-more-card__title.--l {
font-size: 24px;
}
@media screen and (min-width: 769px) {
.p-more-card__title.--fixedh {
min-height: 56px;
}
}
.p-more-card__sub {
display: block;
margin-bottom: 8px;
font-size: 14px;
line-height: 1.5;
color: #888;
letter-spacing: 0.02em;
}
.p-more-card__text-area {
margin-top: 16px;
}
.p-more-card__flex {
display: flex;
gap: 24px;
align-items: center;
}
.p-more-card__flex.--column {
flex-direction: column;
gap: 8px;
}
.p-more-card__icon-wrap {
--size: 72px;
width: var(--size);
height: var(--size);
padding: 16px;
background-color: #fff;
border-radius: 50%;
}
@media screen and (min-width: 769px) {
.p-more-card__icon-wrap {
--size: 96px;
}
}
.p-more-card__icon-wrap.--header {
--size: 80px;
}
.p-more-card__icon-wrap img {
width: 100%;
height: 100%;
object-fit: contain;
}
.p-more-card__tag-area {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
/* base */
.p-news-category {
display: flex;
justify-content: center;
padding-bottom: 32px;
}
.p-news-category ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* base */
.p-news-list {
width: 100%;
}
.p-news-list__item + .p-news-list__item {
margin-top: 24px;
}
.p-news-list__item > a {
display: grid;
grid-template-areas: "date label" "title title";
grid-template-columns: auto 1fr;
gap: 16px;
align-items: baseline;
padding-bottom: 24px;
line-height: 1.5;
border-bottom: 1px solid #c1c9e8;
transition: opacity 0.3s;
}
@media (hover: hover) and (pointer: fine) {
.p-news-list__item > a:hover {
opacity: 0.6;
}
}
@media screen and (min-width: 769px) {
.p-news-list__item > a {
grid-template-areas: "date label title";
grid-template-columns: auto auto 1fr;
}
}
.p-news-list__date {
grid-area: date;
}
.p-news-list__cat {
grid-area: label;
}
.p-news-list__title {
grid-area: title;
}
/* base */
.p-post__title {
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid #c1c9e8;
}
.p-post__label {
margin-top: -6px;
margin-left: 8px;
}
.p-post__date-and-cat {
display: flex;
gap: 16px;
align-items: center;
justify-content: flex-end;
padding-right: 24px;
padding-bottom: 32px;
}
.p-post__tag-area {
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 40px;
margin-top: 40px;
border-bottom: 1px solid #c1c9e8;
}
/* base */
.p-ol {
display: flex;
flex-direction: column;
counter-reset: section;
}
.p-ol > li {
position: relative;
display: flex;
padding-bottom: 16px;
background-color: #fff;
}
.p-ol > li::before {
margin-right: 5px;
content: "（" counter(section) "）";
counter-increment: section;
}
.p-ol > li:has(ul), .p-ol > li:has(ol) {
padding-bottom: 0;
}
.p-ol__child-list {
margin-top: 16px;
}
.p-ol__child-list > li {
display: flex;
gap: 4px;
margin-left: -20px;
}
.p-child-ol > li {
display: flex;
gap: 4px;
padding-bottom: 16px;
}
.p-child-ol > li:has(ul), .p-child-ol > li:has(ol) {
padding-bottom: 0;
}
.p-child-ol .c-list {
margin-top: 16px;
margin-left: -24px;
}
/* base */
.p-page {
padding-top: 58px;
}
@media screen and (min-width: 1280px) {
.p-page {
padding-top: 80px;
}
}
.p-page.--recruit {
padding-top: calc(58px + 40px);
}
@media screen and (min-width: 1280px) {
.p-page.--recruit {
padding-top: calc(80px + 65px);
padding-right: 0;
}
}
.p-page__button-area {
display: flex;
flex-direction: column;
gap: 16px 24px;
align-items: center;
justify-content: center;
margin-top: 32px;
}
@media screen and (min-width: 769px) {
.p-page__button-area {
flex-direction: row;
}
}
/* base */
.p-page-title {
padding-top: 32px;
padding-bottom: 40px;
word-break: break-all;
}
.p-page-title.--recruit {
padding-top: 80px;
padding-bottom: 40px;
}
.p-page-title__sub {
font-weight: bold;
line-height: 1.75;
color: #888;
}
.p-page-title__sub + .p-page-title__main {
margin-top: 8px;
}
/* base */
.p-pagination {
padding: 32px 0;
}
.p-pagination .wp-pagenavi {
display: flex;
gap: 4px;
justify-content: center;
}
.p-pagination .wp-pagenavi > span, .p-pagination .wp-pagenavi > a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 40px;
font-size: 14px;
font-weight: bold;
}
.p-pagination .wp-pagenavi > span {
color: #1760e5;
background-color: #edeff4;
border-radius: 4px;
}
.p-pagination .wp-pagenavi > a {
color: #97a9c9;
}
.p-pagination .wp-pagenavi .first, .p-pagination .wp-pagenavi .previouspostslink, .p-pagination .wp-pagenavi .nextpostslink, .p-pagination .wp-pagenavi .last {
position: relative;
color: transparent;
}
.p-pagination .wp-pagenavi .first::before, .p-pagination .wp-pagenavi .previouspostslink::before, .p-pagination .wp-pagenavi .nextpostslink::before, .p-pagination .wp-pagenavi .last::before {
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
width: 12px;
height: 12px;
content: "";
background-repeat: no-repeat;
background-size: contain;
transform: translateX(-50%) translateY(-50%);
}
.p-pagination .wp-pagenavi .first::before, .p-pagination .wp-pagenavi .last::before {
background-image: url("assets/img/common/icon_pagination_last.svg");
}
.p-pagination .wp-pagenavi .previouspostslink::before, .p-pagination .wp-pagenavi .nextpostslink::before {
background-image: url("assets/img/common/icon_pagination_next.svg");
}
.p-pagination .wp-pagenavi .first::before, .p-pagination .wp-pagenavi .previouspostslink::before {
transform: translateX(-50%) translateY(-50%) rotate(180deg);
}
/* base */
.p-pickup-bar {
display: grid;
grid-template-columns: 102px 1fr;
align-items: center;
padding-left: 20px;
font-size: 14px;
font-weight: bold;
line-height: 1.5;
background-color: #edeff4;
}
@media screen and (min-width: 769px) {
.p-pickup-bar {
padding: 0 32px;
border-radius: 10px;
}
}
.p-pickup-bar__title {
flex-shrink: 0;
border-right: 1px solid #2b2b2b;
}
.p-pickup-bar__main {
overflow: auto;
}
.p-pickup-bar__inner {
padding: 8px 16px;
}
.p-pickup-bar__inner ul {
display: flex;
flex-wrap: nowrap;
gap: 16px;
align-items: center;
width: max-content;
}
.p-pickup-bar__inner ul li:last-child {
padding-right: 16px;
}
/* base */
.p-products-card-area {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px 8px;
}
@media screen and (min-width: 769px) {
.p-products-card-area {
grid-template-columns: repeat(3, 1fr);
gap: 40px 32px;
}
}
.p-products-card {
position: relative;
line-height: 1.5;
word-break: break-all;
}
@media (hover: hover) and (pointer: fine) {
.p-products-card:hover .p-products-card__title {
color: #003391;
}
.p-products-card:hover .p-products-card__img-area {
background-color: #d6d9e4;
}
.p-products-card:hover .p-products-card__img-area img {
opacity: 0.6;
}
}
.p-products-card__title {
margin-top: 4px;
color: #1760e5;
transition: color 0.3s;
}
.p-products-card__sub {
display: flex;
gap: 2px;
align-items: center;
margin-top: 16px;
font-size: 14px;
font-weight: bold;
color: #888;
}
.p-products-card__sub::before {
display: block;
width: 8px;
height: 2px;
margin-top: 1px;
content: "";
background-color: #888;
border-radius: 1px;
}
.p-products-card__text-area {
margin-top: 4px;
}
.p-products-card__img-area {
display: flex;
align-items: center;
aspect-ratio: 1/1;
padding: 8px;
background-color: #edeff4;
border-radius: 6px;
transition: background-color 0.3s;
}
.p-products-card__img-area img {
width: 100%;
height: 100%;
object-fit: contain;
transition: opacity 0.3s;
}
.p-products-card__tag-area {
margin-top: 16px;
}
/* base */
.p-products__mv {
display: grid;
gap: 40px;
}
@media screen and (min-width: 769px) {
.p-products__mv {
grid-template-columns: 1fr 444px;
}
}
.p-products__thumbnail {
width: 100%;
height: 296px;
padding: 8px;
margin-top: 24px;
background-color: #edeff4;
}
.p-products__thumbnail img {
object-fit: contain;
width: 100%;
height: 100%;
}
.p-products__button-area {
text-align: center;
}
@media screen and (min-width: 769px) {
.p-products__button-area {
margin-top: 42px;
text-align: right;
}
}
.p-products__tag-area {
display: flex;
gap: 8px;
margin-top: 12px;
}
.p-products__list-area {
margin-top: 32px;
}
.p-products__list {
padding: 24px;
background-color: #edeff4;
}
.p-products__card-area {
margin-top: 32px;
}
.p-products__table-area {
display: grid;
gap: 40px;
}
@media screen and (min-width: 769px) {
.p-products__table-area {
grid-template-columns: repeat(2, 1fr);
gap: 16px 40px;
}
}
.p-products__table-area th {
text-align: center;
}
.p-products__table-title {
min-height: 72px;
margin-bottom: 16px;
}
.p-products__lineup-area {
display: grid;
gap: 40px;
}
@media screen and (min-width: 769px) {
.p-products__lineup-area {
grid-template-columns: repeat(2, 1fr);
}
}
.p-products__lineup-area .p-card img {
width: 100%;
object-fit: contain;
aspect-ratio: 444/296;
}
.p-products__contact-area {
margin-top: 48px;
}
.p-products__accordion {
margin: 0 -24px;
}
.p-products__archive {
margin: 32px -20px 0;
margin-top: 32px;
}
@media screen and (min-width: 769px) {
.p-products__archive {
margin-right: 0;
margin-left: 0;
}
}
.p-products__tag-group {
width: 100vw;
overflow: auto;
}
@media screen and (min-width: 769px) {
.p-products__tag-group {
width: auto;
}
}
.p-products__tag-group-inner {
display: flex;
gap: 8px;
width: max-content;
padding: 0 20px;
text-align: center;
}
@media screen and (min-width: 769px) {
.p-products__tag-group-inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 100%;
padding: 0;
}
}
.p-products__tag-group-inner a {
padding: 8px 32px;
font-weight: bold;
line-height: 1.75;
color: #888;
border-radius: 6px 6px 0 0;
}
@media screen and (min-width: 769px) {
.p-products__tag-group-inner a {
padding: 8px;
}
}
.p-products__tag-group-inner a.is-active {
color: #fff;
background-color: #1760e5;
}
.p-products__archive-area {
padding: 24px;
background-color: #edeff4;
border-top: 2px solid #1760e5;
}
@media screen and (min-width: 769px) {
.p-products__archive-area {
margin: 0 -20px;
}
}
@media screen and (min-width: 1280px) {
.p-products__archive-area {
margin: 0;
}
}
.p-products__archive-inner {
margin: 0 auto;
}
.p-products__archive-list {
display: grid;
gap: 8px;
}
@media screen and (min-width: 769px) {
.p-products__archive-list {
grid-template-columns: repeat(3, 1fr);
gap: 16px 8px;
}
}
.p-products__archive-list + .p-products__archive-list {
margin-top: 8px;
}
@media screen and (min-width: 769px) {
.p-products__archive-list + .p-products__archive-list {
margin-top: 0;
}
}
@media screen and (min-width: 769px) {
.p-products__archive-list.--2column {
grid-template-columns: repeat(2, 1fr);
}
}
.p-products__archive-list.--button {
max-width: 880px;
margin-right: auto;
margin-left: auto;
}
.p-products__archive-list-button {
margin: 0 auto;
}
@media screen and (min-width: 769px) {
.p-products__archive-list-button {
margin: 0;
}
}
.p-products__archive-button-group {
display: flex;
flex-direction: column;
gap: 16px 24px;
align-items: center;
justify-content: center;
margin-top: 32px;
}
@media screen and (min-width: 769px) {
.p-products__archive-button-group {
flex-direction: row;
}
}
.p-products__archive-desc {
margin-top: 16px;
margin-bottom: 32px;
}
/* base */
.p-projectstory-card-area {
display: flex;
flex-direction: column;
gap: 16px;
}
.p-projectstory-card a {
display: grid;
grid-template-columns: 100px 1fr;
gap: 24px;
align-items: center;
width: 100%;
}
@media screen and (min-width: 769px) {
.p-projectstory-card a {
grid-template-columns: 180px 1fr;
}
}
.p-projectstory-card a img {
width: 100%;
aspect-ratio: 100/66;
border-radius: 6px;
object-fit: cover;
}
@media screen and (min-width: 769px) {
.p-projectstory-card a img {
height: 120px;
}
}
.p-projectstory-card__text {
margin-top: 4px;
color: #888;
}
/* base */
.p-projectstory-list {
display: flex;
flex-direction: column;
gap: 40px;
}
.p-projectstory-list__item a {
display: grid;
gap: 16px;
align-items: center;
}
@media screen and (min-width: 769px) {
.p-projectstory-list__item a {
grid-template-columns: 444px 1fr;
}
}
@media (hover: hover) and (pointer: fine) {
.p-projectstory-list__item a:hover .p-projectstory-list__title {
color: #003391;
}
.p-projectstory-list__item a:hover img {
opacity: 0.6;
}
}
.p-projectstory-list__item img {
width: 100%;
height: 100%;
border-radius: 6px;
object-fit: cover;
transition: opacity 0.3s;
}
.p-projectstory-list__title {
color: #1760e5;
transition: color 0.3s;
}
.p-projectstory-list__company {
font-size: 18px;
font-weight: bold;
color: #888;
}
@media screen and (min-width: 769px) {
.p-projectstory-list__company {
font-size: 20px;
}
}
.p-projectstory-list__text-area {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 16px;
margin-top: 16px;
}
/* base */
.p-projectstory {
word-break: break-all;
}
.p-projectstory__member-box {
padding: 24px;
background-color: #edeff4;
}
.p-projectstory__title {
padding-bottom: 16px;
border-bottom: 1px solid #1760e5;
}
.p-projectstory__member-list {
display: grid;
gap: 24px;
margin-top: 32px;
}
@media screen and (min-width: 769px) {
.p-projectstory__member-list {
grid-template-columns: repeat(2, 1fr);
gap: 16px 40px;
margin-top: 16px;
}
}
.p-projectstory__member-list-item {
display: grid;
grid-template-columns: 80px 1fr;
gap: 16px;
line-height: 1.5;
background-color: #fff;
}
@media screen and (min-width: 769px) {
.p-projectstory__member-list-item {
grid-template-columns: 120px 1fr;
}
}
.p-projectstory__member-list-item img {
width: 100%;
object-fit: cover;
aspect-ratio: 120/160;
}
.p-projectstory__member-list-item > div {
display: flex;
flex-direction: column;
gap: 8px;
padding-right: 8px;
}
.p-projectstory__member-title {
font-size: 18px;
font-weight: bold;
}
@media screen and (min-width: 769px) {
.p-projectstory__member-title {
font-size: 20px;
}
}
.p-projectstory__member-text {
font-size: 14px;
}
@media screen and (min-width: 769px) {
.p-projectstory__member-text {
font-size: 16px;
}
}
.p-projectstory__member-name {
font-weight: bold;
}
@media screen and (min-width: 769px) {
.p-projectstory__member-name {
font-size: 18px;
}
}
.p-projectstory__section {
display: grid;
gap: 40px;
}
@media screen and (min-width: 769px) {
.p-projectstory__section {
grid-template-columns: repeat(2, 1fr);
}
}
.p-projectstory__section > img {
width: 100%;
aspect-ratio: 444/300;
object-fit: cover;
}
@media screen and (min-width: 769px) {
.p-projectstory__section > img {
max-width: 580px;
}
}
.p-projectstory__section.--reverse > div {
order: 1;
}
/* base */
.p-recruit-header {
position: fixed;
top: 58px;
z-index: 5;
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 100%;
height: 40px;
background-color: #fff;
border-top: 1px solid #17b3d8;
}
@media screen and (min-width: 1280px) {
.p-recruit-header {
top: 80px;
display: flex;
align-items: center;
justify-content: space-between;
height: 65px;
padding: 0 16px;
}
}
.p-recruit-header__top-area {
display: none;
}
@media screen and (min-width: 1280px) {
.p-recruit-header__top-area {
display: block;
font-size: 14px;
font-weight: bold;
color: #1760e5;
}
}
.p-recruit-header__nav-and-button {
display: flex;
gap: 16px;
align-items: center;
}
.p-recruit-header__nav-area {
display: none;
}
@media screen and (min-width: 1280px) {
.p-recruit-header__nav-area {
display: block;
}
}
@media screen and (min-width: 1280px) {
.p-recruit-header__nav-area ul {
display: flex;
gap: 16px;
align-items: center;
font-size: 14px;
}
}
.p-recruit-header__button {
justify-content: flex-start;
width: 100%;
max-width: inherit;
height: 100%;
padding-left: 16px;
font-size: 14px;
border-radius: 0;
}
@media screen and (min-width: 1280px) {
.p-recruit-header__button {
justify-content: center;
width: 177px;
height: 33px;
padding-left: 0;
border-radius: 18px;
}
}
.p-recruit-header__button img {
right: 10px;
width: 12px;
height: 12px;
}
.p-header-accordion {
position: relative;
z-index: 1;
}
@media screen and (min-width: 1280px) {
.p-header-accordion {
display: none;
}
}
.p-header-accordion__trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
padding: 0 16px;
font-size: 14px;
font-weight: bold;
color: #1760e5;
}
.p-header-accordion__trigger img {
width: 12px;
height: 12px;
}
.p-header-accordion__body {
position: absolute;
top: calc(40px - 1px);
left: 0;
width: 100vw;
height: 0;
overflow: hidden;
color: #fff;
background-color: #1760e5;
}
@media screen and (min-width: 1280px) {
.p-header-accordion__body {
display: none;
}
}
.p-header-accordion__body ul {
padding: 24px;
}
.p-header-accordion__body li {
padding-top: 24px;
}
.p-header-accordion__body li:first-child {
padding-top: 0;
}
.p-header-accordion__body li a {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
}
.p-header-accordion__body li a::after {
display: inline-block;
width: 16px;
height: 16px;
content: "";
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-size: contain;
}
.js-accordion-icon img {
vertical-align: baseline;
}
/* base */
.p-recruit-img-button {
display: block;
width: 100%;
max-width: 590px;
margin: 0 auto;
margin-top: 32px;
}
@media (hover: hover) and (pointer: fine) {
.p-recruit-img-button:hover img {
opacity: 0.6;
}
.p-recruit-img-button:hover .p-recruit-img-button__button::before {
opacity: 1;
}
}
.p-recruit-img-button img {
width: 100%;
object-fit: cover;
transition: opacity 0.3s;
}
/* base */
.p-search {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.p-search__body {
position: absolute;
top: 0;
left: 0;
z-index: 100;
display: flex;
gap: 8px;
align-items: center;
justify-content: flex-end;
width: 100%;
height: 58px;
padding: 0 16px;
pointer-events: none;
visibility: hidden;
background-color: #fff;
opacity: 0;
transition: opacity 0.3s, visibility 0.3s;
}
@media screen and (min-width: 1280px) {
.p-search__body {
height: 80px;
}
}
.p-search__body.is-active {
pointer-events: auto;
visibility: visible;
opacity: 1;
}
.p-search__trigger {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 42px;
}
.p-search__input {
position: relative;
height: 40px;
padding-right: 48px;
padding-left: 8px;
background-color: #edeff4;
border: 1px solid transparent;
border-radius: 6px;
}
.p-search__input:has(input:focus) {
padding-left: 32px;
border-color: #1760e5;
box-shadow: 0 0 7px 2px rgba(23, 179, 216, 0.8);
}
.p-search__input:has(.p-search__clear-button.is-visible) {
padding-left: 32px;
border-color: #1760e5;
box-shadow: 0 0 7px 2px rgba(23, 179, 216, 0.8);
}
.p-search__input form {
height: 100%;
}
.p-search__input img {
vertical-align: baseline;
}
.p-search__input.--header {
width: 320px;
}
@media screen and (min-width: 1280px) {
.p-search__input {
font-size: 16px;
}
}
.p-search__input input {
width: 100%;
height: 100%;
}
.p-search__input button {
position: absolute;
top: 7px;
right: 8px;
}
.p-search__close-button {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 8px;
font-size: 12px;
font-weight: bold;
line-height: 1.5;
color: #fff;
background-color: #97a9c9;
border-radius: 6px;
}
@media screen and (min-width: 1280px) {
.p-search__close-button {
height: 32px;
padding: 0 16px;
border-radius: 16px;
}
}
.p-search__clear-button {
--size: 24px;
position: absolute;
top: 7px;
left: 8px;
z-index: 1;
width: var(--size);
height: var(--size);
pointer-events: none;
visibility: hidden;
opacity: 0;
transition: all 0.3s;
}
.p-search__clear-button img {
width: 100%;
object-fit: contain;
}
.p-search__clear-button.is-visible {
pointer-events: auto;
visibility: visible;
opacity: 1;
}
/* base */
.p-search-result {
margin-top: 32px;
}
.p-search-result > li > a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 0;
font-size: 20px;
font-weight: bold;
line-height: 1.5;
color: #1760e5;
border-bottom: 1px solid #c1c9e8;
}
.p-search-result > li > a::after {
--size: 10px;
display: inline-block;
width: var(--size);
height: var(--size);
content: "";
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-size: contain;
}
/* base */
.p-sitemap__bottom {
padding-top: 32px;
margin-top: 32px;
border-top: 1px solid #c1c9e8;
}
.p-sitemap__bottom > ul {
gap: 0 32px !important;
}
/* base */
.p-banner-slider {
--w: 335px;
--gap: 16px;
position: relative;
overflow: hidden;
}
@media screen and (min-width: 769px) {
.p-banner-slider {
width: calc(var(--w) + var(--w) + var(--gap));
}
}
@media screen and (min-width: 1280px) {
.p-banner-slider {
--w: 408px;
}
}
.p-banner-slider .swiper-slide {
width: var(--w);
}
.p-issue-slider {
--w: 288px;
--gap: 16px;
position: relative;
width: var(--w);
overflow: hidden;
}
@media screen and (min-width: 769px) {
.p-issue-slider {
width: calc(var(--w) * 2 + var(--gap));
}
}
@media screen and (min-width: 1280px) {
.p-issue-slider {
width: calc(var(--w) * 3 + var(--gap) * 2);
}
}
.p-issue-slider .swiper-slide {
width: var(--w);
}
.slider-prev, .slider-next {
--size: 24px;
position: absolute;
top: 50%;
display: inline-block;
width: var(--size);
height: var(--size);
cursor: pointer;
}
.slider-prev::after, .slider-next::after {
display: none;
}
.slider-prev::before, .slider-next::before {
display: inline-block;
width: 100%;
height: 100%;
content: "";
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
}
.slider-prev {
left: 6px;
transform: scale(-1, -1) translateY(-50%);
}
@media screen and (min-width: 1280px) {
.slider-prev {
left: 0;
}
}
.slider-next {
right: 6px;
transform: scale(1, -1) translateY(-50%);
}
@media screen and (min-width: 1280px) {
.slider-next {
right: 0;
}
}
/* base */
.p-strength__mv {
aspect-ratio: 375/200;
background-position: center;
background-size: cover;
}
@media screen and (min-width: 769px) {
.p-strength__mv {
aspect-ratio: 1280/300;
}
}
.p-strength__main {
margin-top: 40px;
}
.p-strength__link-area {
display: grid;
gap: 32px;
max-width: 800px;
margin: 0 auto;
margin-top: 80px;
}
@media screen and (min-width: 769px) {
.p-strength__link-area {
grid-template-columns: repeat(2, 1fr);
}
}
.p-strength__reason-img-and-text {
display: grid;
gap: 32px;
align-items: center;
}
@media screen and (min-width: 769px) {
.p-strength__reason-img-and-text {
grid-template-columns: 1fr 352px;
}
}
.p-strength__reason-img-and-text img {
height: 300px;
object-fit: cover;
}
.p-strength__small-container {
max-width: 728px;
margin: 0 auto;
}
.p-strength__reason-box {
padding: 40px 24px;
text-align: center;
background-color: #edeff4;
}
.p-strength__box-area {
display: grid;
gap: 40px;
}
@media screen and (min-width: 769px) {
.p-strength__box-area {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 769px) {
.p-strength__box:first-child {
grid-column: 1/3;
}
}
/* base */
.p-top {
padding-bottom: 64px;
}
.p-top__mv {
margin: 0 -20px;
}
@media screen and (min-width: 769px) {
.p-top__mv {
padding: 0 8px;
margin: 0;
}
}
.p-top__products-title-area {
margin: 80px 0 40px;
}
.p-top__products-list {
display: grid;
gap: 24px;
}
@media screen and (min-width: 769px) {
.p-top__products-list {
grid-template-columns: repeat(2, 1fr);
}
}
.p-top__products-pickup {
margin-top: 64px;
}
.p-top__products-pickup-title {
position: relative;
margin-bottom: 32px;
}
.p-top__products-pickup-title::after {
position: absolute;
top: 50%;
left: 0;
display: inline-block;
width: 100%;
height: 1px;
content: "";
background-color: #c1c9e8;
transform: translateY(-50%);
}
.p-top__products-pickup-title span {
position: relative;
z-index: 1;
padding-right: 16px;
background-color: #fff;
}
.p-top__products-pickup-scroll-area {
padding-bottom: 40px;
margin-right: -20px;
}
@media screen and (min-width: 1280px) {
.p-top__products-pickup-scroll-area {
margin-right: -32px;
}
}
.p-top__products-pickup-list {
display: flex;
gap: 32px;
padding-right: 24px;
margin-right: 32px;
}
.p-top__products-pickup-list > li {
flex-shrink: 0;
width: 240px;
}
.p-top__products-pickup-list > li:last-child {
width: calc(240px + 32px);
padding-right: 32px;
}
.p-top__issue {
position: relative;
display: flex;
justify-content: center;
max-width: 419px;
padding: 0 32px 44px;
margin: 0 auto;
}
@media screen and (min-width: 769px) {
.p-top__issue {
max-width: 774px;
}
}
@media screen and (min-width: 1280px) {
.p-top__issue {
max-width: 1024px;
}
}
.p-top__issue .slider-prev, .p-top__issue .slider-next {
top: calc(50% - 44px);
}
.p-top__issue .slider-prev::before, .p-top__issue .slider-next::before {
background-image: url('data:image/svg+xml;utf8,');
}
.p-top__issue .slider-prev {
left: 0;
}
.p-top__issue .slider-next {
right: 0;
}
.p-top__issue .swiper-pagination {
position: absolute;
}
.p-top__issue .swiper-pagination .swiper-pagination-bullet {
width: 16px;
height: 4px;
margin: 0 2px;
background: #edf3f4;
border-radius: 2px;
opacity: 1;
}
.p-top__issue .swiper-pagination .swiper-pagination-bullet-active {
width: 40px;
height: 4px;
background: #17b3d8;
}
/* base */
.p-top-news {
display: grid;
grid-template-areas: "title" "cat" "main" "button";
gap: 24px 32px;
margin-top: 48px;
}
@media screen and (min-width: 769px) {
.p-top-news {
grid-template: "title main" auto "cat main" auto "button main" 1fr/200px 1fr;
margin-top: 80px;
}
}
.p-top-news__title {
position: relative;
flex-shrink: 0;
grid-area: title;
}
.p-top-news__title span {
position: relative;
z-index: 1;
padding-right: 16px;
font-size: 24px;
font-weight: bold;
letter-spacing: 0.02em;
background-color: #fff;
}
.p-top-news__title::after {
position: absolute;
top: 50%;
left: 0;
display: inline-block;
width: 100%;
height: 1px;
content: "";
background-color: #c1c9e8;
transform: translateY(-50%);
}
.p-top-news__cat {
grid-area: cat;
}
.p-top-news__cat ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.p-top-news__main {
position: relative;
grid-area: main;
}
.p-top-news__tab {
display: none;
}
.p-top-news__tab.is-active {
display: block;
}
.p-top-news__button-area {
grid-area: button;
text-align: right;
}
.p-top-news__button {
max-width: 224px;
height: 33px;
font-size: 14px;
letter-spacing: 0.02em;
}
/* base */
.p-top-card {
position: relative;
display: block;
padding-top: 64px;
}
@media screen and (min-width: 769px) {
.p-top-card {
padding-top: 80px;
}
}
@media screen and (min-width: 769px) {
.p-top-card.--l .p-top-card__img-wrap {
width: 80%;
max-width: inherit;
}
}
.p-top-card.--reverse .p-top-card__img-wrap {
margin-right: 0;
margin-left: auto;
}
.p-top-card.--reverse .p-top-card__text-area {
right: auto;
left: 0;
}
@media (hover: hover) and (pointer: fine) {
.p-top-card__inner:hover .p-top-card__img-wrap {
opacity: 0.6;
}
.p-top-card__inner:hover .p-more-card {
background-color: #edeff4;
}
.p-top-card__inner:hover .p-more-card .p-more-card__deco::before {
opacity: 1;
}
}
.p-top-card__img-wrap {
width: 100%;
max-width: 696px;
max-height: 340px;
aspect-ratio: 696/340;
overflow: hidden;
border-radius: 10px;
transition: opacity 0.3s;
}
.p-top-card__img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.p-top-card__text-area {
padding: 16px 16px 24px;
margin: -24px 24px 0;
background-color: #fff;
border-radius: 6px 6px 6px 0 !important;
}
@media screen and (min-width: 769px) {
.p-top-card__text-area {
position: absolute !important;
right: 0;
bottom: 0;
width: 444px;
padding: 24px 24px 32px;
margin: 0;
}
}
/* base */
.p-top-mv {
position: relative;
height: 675px;
overflow: hidden;
background-color: #244072;
margin-bottom: 40px;
}
@media screen and (min-width: 769px) {
.p-top-mv {
height: calc(100vh - 80px - 37px - 8px);
min-height: 565px;
max-height: 675px;
margin-top: 8px;
border-radius: 6px;
}
}
@media screen and (min-width: 769px) {
.p-top-mv.--en {
height: 400px;
}
}
.p-top-mv.--en .p-top-mv__inner {
height: 100%;
padding: 0 20px;
}
.p-top-mv.--en .p-top-mv__text-area {
justify-content: center;
padding: 0;
}
.p-top-mv__inner {
position: relative;
display: flex;
flex-direction: column;
gap: 32px;
justify-content: space-between;
width: 100%;
height: 100%;
padding: 48px 16px 0;
background-image: url("assets/img/top/pct_mv.jpg");
background-repeat: no-repeat;
background-size: cover;
}
@media screen and (min-width: 769px) {
.p-top-mv__inner {
justify-content: center;
padding-top: 80px;
padding-bottom: 16px;
background-image: url("assets/img/top/pct_mv@pc.jpg");
}
}
.p-top-mv__inner::before {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 100%;
height: 100%;
content: "";
background-color: rgba(2, 36, 98, 0.8);
}
.p-top-mv__text-area {
position: relative;
display: flex;
flex-direction: column;
flex-grow: 1;
align-items: center;
color: #fff;
text-align: center;
}
@media screen and (min-width: 769px) {
.p-top-mv__text-area {
justify-content: center;
}
}
.p-top-mv__catch {
margin-top: auto;
font-size: 32px;
font-weight: bold;
line-height: 1.75;
letter-spacing: 0.02em;
}
.p-top-mv__catch span {
display: inline-block;
}
.p-top-mv__catch span::after {
display: block;
width: 100%;
height: 2px;
content: "";
background-color: #fff;
}
@media screen and (min-width: 769px) {
.p-top-mv__catch {
font-size: 48px;
}
}
@media screen and (min-width: 1280px) {
.p-top-mv__catch {
margin-top: 0;
}
}
.p-top-mv__text {
margin-top: 25px;
font-family: "Zen Kaku Gothic New", sans-serif;
font-size: 20px;
font-weight: bold;
line-height: 2;
letter-spacing: 0.02em;
}
/* base */
.p-top-strength {
padding: 64px 20px 0;
margin: 64px -20px 24px;
background-color: #1760e5;
}
@media screen and (min-width: 1172px) {
.p-top-strength {
margin-right: calc(-20px - (100vw - 1452px) / 2);
margin-left: calc(-20px - (100vw - 1452px) / 2);
}
}
@media screen and (min-width: 1280px) {
.p-top-strength {
height: 480px;
padding: 64px 32px;
margin: 80px -32px 52px;
}
}
@media screen and (min-width: 1460px) {
.p-top-strength {
margin-left: calc((100vw - 1452px) / -2 - 32px);
}
}
.p-top-strength__inner {
display: grid;
gap: 40px;
margin: 0 auto;
}
@media screen and (min-width: 1280px) {
.p-top-strength__inner {
grid-template-columns: 1fr 444px;
}
}
@media screen and (min-width: 1460px) {
.p-top-strength__inner {
max-width: 1124px;
margin-right: 0;
}
}
.p-top-strength__text-area {
display: flex;
flex-direction: column;
gap: 40px;
color: #fff;
}
.p-top-strength__list-area {
margin-bottom: -24px;
}
@media screen and (min-width: 1280px) {
.p-top-strength__list-area {
margin-bottom: 0;
}
}
.p-top-strength__card-list {
display: flex;
flex-direction: column;
gap: 24px;
max-width: 335px;
margin: 0 auto;
counter-reset: section;
}
@media screen and (min-width: 769px) {
.p-top-strength__card-list {
max-width: 444px;
}
}
.p-top-strength__card {
position: relative;
display: flex !important;
align-items: center !important;
height: 96px;
padding: 0 !important;
padding-left: 84px !important;
transition: color 0.3s;
}
@media screen and (min-width: 769px) {
.p-top-strength__card {
height: 140px;
}
}
@media (hover: hover) and (pointer: fine) {
.p-top-strength__card:hover {
color: #fff;
}
.p-top-strength__card:hover .p-top-strength__card-circle {
--size: 1000px;
width: var(--size);
height: var(--size);
clip-path: circle(500px at 0 50%);
}
.p-top-strength__card:hover .p-top-strength__card-circle::before {
background-color: #003391;
opacity: 0.6;
transform: scale(5);
}
}
.p-top-strength__card-circle {
--size: 120px;
position: absolute;
left: 0;
width: var(--size);
height: var(--size);
clip-path: circle(60px at 0 50%);
background-repeat: no-repeat;
background-position: left;
background-size: 444px;
transition: clip-path 0.3s, width 0.3s, height 0.3s;
}
.p-top-strength__card-circle::before {
position: absolute;
top: 0;
left: 0;
z-index: 2;
display: inline-block;
width: 100%;
height: 100%;
content: "";
background-color: #1760e5;
transition: opacity 0.3s;
transform-origin: left;
}
.p-top-strength__card-num {
position: absolute;
top: 50%;
left: 16px;
z-index: 1;
display: inline-block;
font-size: 18px;
font-weight: bold;
color: #fff;
transform: translateY(-50%);
}
.p-top-strength__card-num::before {
content: "0" counter(section);
counter-increment: section;
}
/* base */
.p-reason-card {
display: grid;
gap: 32px;
counter-reset: item;
}
@media screen and (min-width: 769px) {
.p-reason-card {
grid-template-columns: repeat(3, 1fr);
}
}
.p-reason-card__title {
position: relative;
padding-top: 60px;
padding-bottom: 16px;
font-size: 24px;
text-align: center;
}
.p-reason-card__title::before {
position: absolute;
bottom: 0;
left: 50%;
z-index: -1;
font-size: 80px;
font-weight: bold;
line-height: 1.5;
color: #d2e1fb;
letter-spacing: 0.02em;
content: "0" counter(item);
counter-increment: item;
transform: translateX(-50%);
}
.p-reason-card__text-area {
margin-top: 16px;
}
/* base */
.p-voice-card {
margin-bottom: 24px;
}
.p-voice-card::after {
left: 64px;
display: inline-block;
width: 96px;
height: 32px;
margin-left: 64px;
content: "";
background-image: url("assets/img/recruit/deco_triangle.svg");
background-repeat: no-repeat;
background-size: contain;
}
.p-voice-card strong {
color: #1760e5;
}
.p-voice-card__inner {
position: relative;
display: flex;
flex-direction: column;
gap: 16px;
padding: 24px;
background-color: #fff;
border-radius: 10px;
}
.p-voice-card__attribute {
display: flex;
gap: 10px;
align-items: center;
justify-content: flex-end;
}
/* base */
.p-voice {
margin-top: 40px;
counter-reset: section;
}
.p-voice__title {
text-align: center;
}
.p-voice__button-area {
position: absolute;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100px;
background-color: #fff;
border-top: 1px solid #c1c9e8;
}
.p-voice__section {
position: relative;
padding: 72px 24px 100px;
overflow: hidden;
background-color: #e0f5fc;
border-top: 4px solid #17b3d8;
}
.p-voice__section::before {
--size: 120px;
position: absolute;
top: -60px;
left: 50%;
display: inline-flex;
justify-content: center;
width: var(--size);
height: var(--size);
padding-top: 52px;
font-family: "Zen Kaku Gothic New", sans-serif;
font-size: 24px;
font-weight: bold;
color: #fff;
content: "Q" counter(section);
counter-increment: section;
background-color: #17b3d8;
border-radius: 50%;
transform: translateX(-50%);
}
@media screen and (min-width: 769px) {
.p-voice__section::before {
font-size: 32px;
}
}
.p-voice__section + .p-voice__section {
margin-top: 64px;
}
.p-voice__main {
gap: 32px;
margin-top: 32px;
column-count: 1;
}
@media screen and (min-width: 769px) {
.p-voice__main {
column-count: 2;
}
}
.p-voice__item {
margin-bottom: 16px;
break-inside: avoid;
}
.p-voice__section-inner {
height: 424px;
}
/* base */
.p-wysiwyg::before, .p-wysiwyg::after {
display: block;
clear: both;
content: "";
}
.p-wysiwyg p {
margin-top: 36px;
margin-bottom: 36px;
font-size: 16px;
line-height: 1.75;
word-break: break-all;
}
.p-wysiwyg p > img {
margin: 0;
}
.p-wysiwyg strong {
color: #1760e5;
}
.p-wysiwyg a {
display: inline-block;
color: #1760e5;
text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
.p-wysiwyg a:hover {
text-decoration: none;
}
}
.p-wysiwyg a:has(img) .c-link__icon {
visibility: hidden;
opacity: 0;
}
.p-wysiwyg img {
max-width: 100%;
aspect-ratio: 3/2;
margin-top: 36px;
margin-bottom: 36px;
object-fit: contain;
}
.p-wysiwyg img.size-full {
aspect-ratio: inherit;
}
.p-wysiwyg em {
font-style: normal;
}
.p-wysiwyg p:has(> img.aligncenter) {
text-align: center;
}
.p-wysiwyg p:has(> img.alignright) {
text-align: right;
}
.p-wysiwyg blockquote {
position: relative;
padding: 24px;
margin: 24px 0;
clear: both;
background-color: #ddeef2;
border-top: 2px solid #17b3d8;
}
.p-wysiwyg blockquote::before {
--size: 16px;
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: var(--size);
height: var(--size);
content: "";
background-color: #17b3d8;
background-image: url("assets/img/common/icon_blockquote.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 8px;
}
.p-wysiwyg hr {
clear: both;
border-color: #c1c9e8;
}
.p-wysiwyg h1, .p-wysiwyg h2 {
border-color: #c1c9e8;
}
.p-wysiwyg h1, .p-wysiwyg h2, .p-wysiwyg h3 {
margin-top: 36px;
margin-bottom: -18px;
clear: both;
font-size: 24px;
font-weight: bold;
line-height: 1.5;
}
.p-wysiwyg h4 {
margin-top: 36px;
margin-bottom: -18px;
font-size: 20px;
font-weight: bold;
line-height: 1.5;
}
.p-wysiwyg h5 {
margin-top: 36px;
margin-bottom: -18px;
font-size: 18px;
font-weight: bold;
line-height: 1.5;
}
.p-wysiwyg h6 {
margin-top: 36px;
margin-bottom: -18px;
font-size: 16px;
font-weight: bold;
line-height: 1.5;
}
.p-wysiwyg ul > li::before {
--size: 5px;
display: inline-block;
width: var(--size);
height: var(--size);
margin-right: 8px;
margin-bottom: 3px;
margin-left: 3px;
content: "";
background-color: #97a9c9;
border-radius: 50%;
}
.p-wysiwyg > ul, .p-wysiwyg > ol {
padding-bottom: 8px;
margin-top: 36px;
margin-bottom: 36px;
}
.p-wysiwyg > ul li, .p-wysiwyg > ol li {
padding-bottom: 8px;
padding-left: 14px;
text-indent: -14px;
list-style: inherit;
}
.p-wysiwyg > ul li p, .p-wysiwyg > ol li p {
margin: 0;
}
.p-wysiwyg > ul li ul, .p-wysiwyg > ul li ol, .p-wysiwyg > ol li ul, .p-wysiwyg > ol li ol {
margin-top: 8px;
margin-left: 14px;
}
.p-wysiwyg > ul > li:has(ul), .p-wysiwyg > ul > li:has(ol), .p-wysiwyg > ol > li:has(ul), .p-wysiwyg > ol > li:has(ol) {
padding-bottom: 0;
}
.p-wysiwyg > ul > li ul, .p-wysiwyg > ul > li ol, .p-wysiwyg > ol > li ul, .p-wysiwyg > ol > li ol {
padding-top: 8px;
padding-bottom: 0;
padding-left: 4px;
}
.p-wysiwyg > ul > li ul li:has(ul), .p-wysiwyg > ul > li ul li:has(ol), .p-wysiwyg > ul > li ol li:has(ul), .p-wysiwyg > ul > li ol li:has(ol), .p-wysiwyg > ol > li ul li:has(ul), .p-wysiwyg > ol > li ul li:has(ol), .p-wysiwyg > ol > li ol li:has(ul), .p-wysiwyg > ol > li ol li:has(ol) {
padding-bottom: 0;
}
.p-wysiwyg > ul > li ul li::before, .p-wysiwyg > ol > li ul li::before {
background-color: transparent;
border: 1px solid #97a9c9;
}
.p-wysiwyg > ul > li > ul > li > ul > li::before, .p-wysiwyg > ol > li > ul > li > ul > li::before {
background-color: #97a9c9;
border-radius: 0;
}
.p-wysiwyg ol {
padding-left: 1em;
list-style: auto;
}
.p-wysiwyg ol > li, .p-wysiwyg ol ol > li {
padding-left: 0;
text-indent: 0;
list-style: auto;
}
.p-wysiwyg ol ol > li {
margin-left: 16px;
}
.p-wysiwyg table {
width: 100%;
margin-block: 24px;
clear: both;
}
.p-wysiwyg table thead {
background-color: #edeff4;
}
.p-wysiwyg table th, .p-wysiwyg table td {
padding: 8px 16px;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.02em;
word-break: break-all;
border: 1px solid #d9dbe1;
}
@media screen and (min-width: 769px) {
.p-wysiwyg table th, .p-wysiwyg table td {
vertical-align: middle;
border: 1px solid #d9dbe1;
}
}
.p-wysiwyg table tr {
height: auto !important;
}
.p-wysiwyg table th {
font-weight: bold;
background-color: #edeff4;
}
.p-wysiwyg table a {
color: #1760e5;
text-decoration: underline;
}
.p-wysiwyg table dt {
font-weight: normal;
}
.p-wysiwyg table p {
margin: 0;
}
.p-wysiwyg .wp-caption {
width: 100% !important;
}
@media screen and (min-width: 769px) {
.p-wysiwyg .wp-caption {
width: auto !important;
}
}
.p-wysiwyg .alignleft, .p-wysiwyg .alignright {
margin-bottom: 1.5em !important;
}
@media screen and (min-width: 769px) {
.p-wysiwyg .alignleft {
float: left;
margin-right: 32px;
}
}
.p-wysiwyg p:has(.alignleft) {
display: flex;
flex-wrap: wrap;
gap: 0 32px;
}
@media screen and (min-width: 769px) {
.p-wysiwyg p:has(.alignleft) {
display: block;
gap: 0;
}
}
@media screen and (min-width: 769px) {
.p-wysiwyg .alignright {
float: right;
margin-left: 32px;
}
}
.p-wysiwyg .aligncenter {
margin-inline: auto;
text-align: center;
}
.p-wysiwyg .wp-caption-text {
margin: 0;
margin-block: 0.5em 1em;
}
.p-wysiwyg pre {
margin-top: 36px;
margin-bottom: 36px;
white-space: normal;
}
.p-wysiwyg p + p:has(img.alignleft)::before, .p-wysiwyg p + p:has(img.alignright)::before {
display: block;
clear: both;
content: "";
}
.p-wysiwyg h1 + p:has(img.alignleft), .p-wysiwyg h1 + p:has(img.alignright),
.p-wysiwyg h2 + p:has(img.alignleft), .p-wysiwyg h2 + p:has(img.alignright),
.p-wysiwyg h3 + p:has(img.alignleft), .p-wysiwyg h3 + p:has(img.alignright) {
margin-top: 36px;
}
.p-wysiwyg p:has(img.alignleft), .p-wysiwyg p:has(img.alignright) {
margin: 0;
}
.p-wysiwyg p:has(img.alignleft) + p, .p-wysiwyg p:has(img.alignright) + p,
.p-wysiwyg p:has(img.alignleft) + h4, .p-wysiwyg p:has(img.alignright) + h4,
.p-wysiwyg p:has(img.alignleft) + h5, .p-wysiwyg p:has(img.alignright) + h5,
.p-wysiwyg p:has(img.alignleft) + h6, .p-wysiwyg p:has(img.alignright) + h6 {
margin-top: 0;
}
/* base */
.case-alt .p-case-mv__thumb-and-data {
display: block;
max-width: none;
}
@media screen and (min-width: 1280px) {
.case-alt .p-case-mv__thumb-and-data {
display: grid;
}
}
.case-alt .p-wysiwyg p {
margin-top: 0;
}
.case-alt .p-wysiwyg img {
margin: 0;
}
.case-alt .p-wysiwyg h1, .case-alt .p-wysiwyg h2, .case-alt .p-wysiwyg h3, .case-alt .p-wysiwyg h4 {
margin-top: 3em;
margin-bottom: 2em;
}
.case-alt .p-wysiwyg h3, .case-alt .p-wysiwyg h4 {
margin-top: 0;
margin-bottom: 1em;
}
.case-alt .p-wysiwyg b {
color: inherit;
}
.case-alt .p-wysiwyg .p-grid {
display: block;
}
@media screen and (min-width: 1280px) {
.case-alt .p-wysiwyg .p-grid {
display: grid;
}
}
.case-alt .p-wysiwyg .wp-caption-text {
margin-top: 0.5em;
font-size: 85%;
opacity: 0.8;
}
.case-alt .p-wysiwyg .aligncenter {
margin-bottom: 2em;
}
.case-alt .p-wysiwyg .alignright,
.case-alt .p-wysiwyg .alignleft {
margin-bottom: 1em;
}
.case-alt .p-wysiwyg .size-large {
width: 100%;
}
/* utility */
/* base */
.u-ib {
display: inline-block;
}
.u-text-left {
text-align: left;
}
.u-text-center {
text-align: center;
}
.u-text-right {
text-align: right;
}
.u-mt16 {
margin-top: 16px;
}
.u-mt24 {
margin-top: 24px;
}
.u-mt32 {
margin-top: 32px;
}
.u-mt40 {
margin-top: 40px;
}
.u-mt80 {
margin-top: 80px;
}
.u-mb32 {
margin-bottom: 32px;
}
.u-pb0 {
padding-bottom: 0;
}
.u-font18 {
font-size: 18px;
}
.u-video {
width: 100%;
max-width: 560px;
aspect-ratio: 560/315;
}
.u-video iframe {
width: 100%;
height: 100%;
}
.u-font-bold {
font-weight: bold;
}
.u-color-primary {
color: #1760e5;
}
.u-color-sub {
color: #888;
}
.u-md-only {
display: none;
}
@media screen and (min-width: 769px) {
.u-md-only {
display: inline-block;
}
}
.u-lg-only {
display: none;
}
@media screen and (min-width: 1280px) {
.u-lg-only {
display: inline-block;
}
}
@media screen and (min-width: 769px) {
.u-max-md-only {
display: none;
}
}
@media screen and (min-width: 1280px) {
.u-max-lg-only {
display: none;
}
}
.js-field-accordion-trigger {
padding: 0 40px;
}
.current-check {
position: absolute;
top: 0;
left: -50vw;
}
/*# sourceMappingURL=style.css.map */