@charset "utf-8";
   *,
::before,
::after {
box-sizing: border-box;
border-style: solid;
border-width: 0;
}   html {
line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }   body {
margin: 0;
} main {
display: block;
}  p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
margin: 0;
}  h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
margin: 0;
}  ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}  dt {
font-weight: bold;
}
dd {
margin-left: 0;
}   hr {
box-sizing: content-box; height: 0; overflow: visible; border-top-width: 1px;
margin: 0;
clear: both;
color: inherit;
} pre {
font-family: monospace, monospace; font-size: inherit; }
address {
font-style: inherit;
}   a {
background-color: transparent;
text-decoration: none;
color: inherit;
} abbr[title] {
text-decoration: underline dotted; } b,
strong {
font-weight: bolder;
} code,
kbd,
samp {
font-family: monospace, monospace; font-size: inherit; } small {
font-size: 80%;
} sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}   svg,
img,
embed,
object,
iframe {
vertical-align: bottom;
}   button,
input,
optgroup,
select,
textarea {
-webkit-appearance: none; appearance: none;
vertical-align: middle;
color: inherit;
font: inherit;
background: transparent;
padding: 0;
margin: 0;
border-radius: 0;
text-align: inherit;
text-transform: inherit; } [type=checkbox] {
-webkit-appearance: checkbox;
appearance: checkbox;
}
[type=radio] {
-webkit-appearance: radio;
appearance: radio;
} button,
[type=button],
[type=reset],
[type=submit] {
cursor: pointer;
}
button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
cursor: default;
} :-moz-focusring {
outline: auto;
}
select:disabled {
opacity: inherit;
} option {
padding: 0;
} fieldset {
margin: 0;
padding: 0;
min-width: 0;
}
legend {
padding: 0;
} progress {
vertical-align: baseline;
} textarea {
overflow: auto;
} [type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
} [type=search] {
outline-offset: -2px; } [type=search]::-webkit-search-decoration {
-webkit-appearance: none;
} ::-webkit-file-upload-button {
-webkit-appearance: button; font: inherit; } label[for] {
cursor: pointer;
}   details {
display: block;
} summary {
display: list-item;
} [contenteditable]:focus {
outline: auto;
}   table {
border-color: inherit; border-collapse: collapse;
}
caption {
text-align: left;
}
td,
th {
vertical-align: top;
padding: 0;
}
th {
text-align: left;
font-weight: bold;
} :root {
--transition: .2s ease-in;
--color-main: #263238;
--color-yellow: #e5f30a;
--color-green: #a9f309;
--color-background: #f1f1f1;
--header-height-sp: 50px;
--header-height-pc: 80px;
--font-en: 'Open Sans', sans-serif;
--font-icon: 'Material Icons';
--content-width-small: 800px;
--content-width-middle: 1260px;
} html {
font-size: 62.5%;
}
body {
line-height: 1.5;
background: var(--color-background);
color: var(--color-main);
font-size: 1.6rem;
font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
img {
max-width: 100%;
height: auto;
vertical-align: top;
pointer-events: none; }
a {
transition: var(--transition);
} .c-content {
margin-top: calc(-1 * var(--header-height-sp));
overflow-x: clip;
}
@media screen and (min-width: 992px) {
.c-content {
margin-top: calc(-1 * var(--header-height-pc));
}
} .c-content__section {
position: relative;
padding: 45px 0;
}
.c-content__sectionArea {
max-width: 560px;
margin-right: auto;
margin-left: auto;
padding-right: 20px;
padding-left: 20px;
}
.c-content__sectionHead + .c-content__sectionBody {
padding: 30px 0 0;
}
.c-content__sectionBodyItem {
padding: 30px 0 0;
}
.c-content__sectionBodyItemContent {
padding: 20px 0 0;
}
@media screen and (min-width: 768px) {
.c-content__section {
padding: 90px 0;
}
.c-content__sectionArea {
max-width: var(--content-width-middle);
padding-right: 30px;
padding-left: 30px;
}
.c-content__area--small {
max-width: var(--content-width-small);
margin-right: auto;
margin-left: auto;
}
}
@media screen and (min-width: 992px) {
.c-content__section {
padding: 120px 0;
}
.c-content__sectionHead + .c-content__sectionBody {
padding: 80px 0 0;
}
.c-content__sectionBodyItem {
padding: 80px 0 0;
}
.c-content__sectionBodyItemContent {
padding: 30px 0 0;
}
} .c-button-primary {
position: relative;
display: inline-block;
width: 100%;
max-width: 400px;
padding: 25px 30px;
background: var(--color-main);
color: var(--color-yellow);
font-size: 1.8rem;
font-weight: 500;
text-align: center;
transition: var(--transition);
}
.c-button-primary::before {
content: "";
position: absolute;
right: 20px;
top: 50%;
width: 10px;
height: 10px;
border-top: solid 2px currentColor;
border-right: solid 2px currentColor;
transform: translateY(-50%) rotate(45deg);
}
.c-button-primary__en {
font-size: 2.0rem;
}
@media screen and (min-width: 768px) {
.c-button-primary {
max-width: 480px;
}
}
@media screen and (min-width: 992px) {
.c-button-primary {
max-width: 560px;
padding: 30px;
font-size: 2.0rem;
}
.c-button-primary__en {
font-size: 2.4rem;
}
}
@media (hover: hover) {
.c-button-primary:hover {
background: #515B60;
}
} .c-background-primary {
background: #fff;
}
.c-background-secondary {
background: #898989;
}
.c-background-tertiary {
background: #e3e4e4;
} .c-font-en {
line-height: 1.1;
font-family: var(--font-en);
} .c-grid {
display: flex;
flex-wrap: wrap;
}
.c-grid + .c-grid { margin-top: 0; }
.c-grid.-row-10-xs { margin: -10px 0 0 -10px; }
.c-grid.-row-20-xs { margin: -20px 0 0 -20px; }
.c-grid.-row-30-xs { margin: -30px 0 0 -30px; }
.c-grid.-row-40-xs { margin: -40px 0 0 -40px; }
.c-grid.-row-center-xs { justify-content: center; }
.c-grid.-row-10-xs > .c-grid__item { padding: 10px 0 0 10px; }
.c-grid.-row-20-xs > .c-grid__item { padding: 20px 0 0 20px; }
.c-grid.-row-30-xs > .c-grid__item { padding: 30px 0 0 30px; }
.c-grid.-row-40-xs > .c-grid__item { padding: 40px 0 0 40px; }
.c-grid__item.-col-12-xs { width: 100%; }
.c-grid__item.-col-11-xs { width: 91.666%; }
.c-grid__item.-col-10-xs { width: 83.333%; }
.c-grid__item.-col-9-xs  { width: 75%; }
.c-grid__item.-col-8-xs  { width: 66.666%; }
.c-grid__item.-col-7-xs  { width: 58.333%; }
.c-grid__item.-col-6-xs  { width: 50%; }
.c-grid__item.-col-5-xs  { width: 41.666%; }
.c-grid__item.-col-4-xs  { width: 33.333%; }
.c-grid__item.-col-3-xs  { width: 25%; }
.c-grid__item.-col-2-xs  { width: 16.666%; }
.c-grid__item.-col-1-xs  { width: 8.333%; }
.c-grid__item.-col-center-xs  { align-self: center; }
@media screen and (min-width: 576px) {
.c-grid.-row-10-sm { margin: -10px 0 0 -10px; }
.c-grid.-row-20-sm { margin: -20px 0 0 -20px; }
.c-grid.-row-30-sm { margin: -30px 0 0 -30px; }
.c-grid.-row-40-sm { margin: -40px 0 0 -40px; }
.c-grid.-row-center-sm { justify-content: center; }
.c-grid.-row-reverse-sm { flex-direction: row-reverse; }
.c-grid.-row-10-sm > .c-grid__item { padding: 10px 0 0 10px; }
.c-grid.-row-20-sm > .c-grid__item { padding: 20px 0 0 20px; }
.c-grid.-row-30-sm > .c-grid__item { padding: 30px 0 0 30px; }
.c-grid.-row-40-sm > .c-grid__item { padding: 40px 0 0 40px; }
.c-grid__item.-col-12-sm { width: 100%; }
.c-grid__item.-col-11-sm { width: 91.666%; }
.c-grid__item.-col-10-sm { width: 83.333%; }
.c-grid__item.-col-9-sm  { width: 75%; }
.c-grid__item.-col-8-sm  { width: 66.666%; }
.c-grid__item.-col-7-sm  { width: 58.333%; }
.c-grid__item.-col-6-sm  { width: 50%; }
.c-grid__item.-col-5-sm  { width: 41.666%; }
.c-grid__item.-col-4-sm  { width: 33.333%; }
.c-grid__item.-col-3-sm  { width: 25%; }
.c-grid__item.-col-2-sm  { width: 16.666%; }
.c-grid__item.-col-1-sm  { width: 8.333%; }
.c-grid__item.-col-center-sm  { align-self: center; }
}
@media screen and (min-width: 768px) {
.c-grid.-row-10-md { margin: -10px 0 0 -10px; }
.c-grid.-row-20-md { margin: -20px 0 0 -20px; }
.c-grid.-row-30-md { margin: -30px 0 0 -30px; }
.c-grid.-row-40-md { margin: -40px 0 0 -40px; }
.c-grid.-row-center-md { justify-content: center; }
.c-grid.-row-reverse-md { flex-direction: row-reverse; }
.c-grid.-row-10-md > .c-grid__item { padding: 10px 0 0 10px; }
.c-grid.-row-20-md > .c-grid__item { padding: 20px 0 0 20px; }
.c-grid.-row-30-md > .c-grid__item { padding: 30px 0 0 30px; }
.c-grid.-row-40-md > .c-grid__item { padding: 40px 0 0 40px; }
.c-grid__item.-col-12-md { width: 100%; }
.c-grid__item.-col-11-md { width: 91.666%; }
.c-grid__item.-col-10-md { width: 83.333%; }
.c-grid__item.-col-9-md  { width: 75%; }
.c-grid__item.-col-8-md  { width: 66.666%; }
.c-grid__item.-col-7-md  { width: 58.333%; }
.c-grid__item.-col-6-md  { width: 50%; }
.c-grid__item.-col-5-md  { width: 41.666%; }
.c-grid__item.-col-4-md  { width: 33.333%; }
.c-grid__item.-col-3-md  { width: 25%; }
.c-grid__item.-col-2-md  { width: 16.666%; }
.c-grid__item.-col-1-md  { width: 8.333%; }
.c-grid__item.-col-auto-md  { width: auto; }
}
@media screen and (min-width: 992px) {
.c-grid.-row-10-lg { margin: -10px 0 0 -10px; }
.c-grid.-row-15-lg { margin: -15px 0 0 -15px; }
.c-grid.-row-20-lg { margin: -20px 0 0 -20px; }
.c-grid.-row-30-lg { margin: -30px 0 0 -30px; }
.c-grid.-row-40-lg { margin: -40px 0 0 -40px; }
.c-grid.-row-60-lg { margin: -60px 0 0 -60px; }
.c-grid.-row-80-lg { margin: -80px 0 0 -80px; }
.c-grid.-row-center-lg { justify-content: center; }
.c-grid.-row-10-lg > .c-grid__item { padding: 10px 0 0 10px; }
.c-grid.-row-15-lg > .c-grid__item { padding: 15px 0 0 15px; }
.c-grid.-row-20-lg > .c-grid__item { padding: 20px 0 0 20px; }
.c-grid.-row-30-lg > .c-grid__item { padding: 30px 0 0 30px; }
.c-grid.-row-40-lg > .c-grid__item { padding: 40px 0 0 40px; }
.c-grid.-row-60-lg > .c-grid__item { padding: 60px 0 0 60px; }
.c-grid.-row-80-lg > .c-grid__item { padding: 80px 0 0 80px; }
.c-grid__item.-col-12-lg { width: 100%; }
.c-grid__item.-col-11-lg { width: 91.666%; }
.c-grid__item.-col-10-lg { width: 83.333%; }
.c-grid__item.-col-9-lg  { width: 75%; }
.c-grid__item.-col-8-lg  { width: 66.666%; }
.c-grid__item.-col-7-lg  { width: 58.333%; }
.c-grid__item.-col-6-lg  { width: 50%; }
.c-grid__item.-col-5-lg  { width: 41.666%; }
.c-grid__item.-col-4-lg  { width: 33.333%; }
.c-grid__item.-col-3-lg  { width: 25%; }
.c-grid__item.-col-2-lg  { width: 16.666%; }
.c-grid__item.-col-1-lg  { width: 8.333%; }
}
@media screen and (min-width: 1200px) {
.c-grid.-row-10-xl { margin: -10px 0 0 -10px; }
.c-grid.-row-20-xl { margin: -20px 0 0 -20px; }
.c-grid.-row-30-xl { margin: -30px 0 0 -30px; }
.c-grid.-row-40-xl { margin: -40px 0 0 -40px; }
.c-grid.-row-60-xl { margin: -60px 0 0 -60px; }
.c-grid.-row-80-xl { margin: -80px 0 0 -80px; }
.c-grid.-row-center-xl { justify-content: center; }
.c-grid.-row-10-xl > .c-grid__item { padding: 10px 0 0 10px; }
.c-grid.-row-20-xl > .c-grid__item { padding: 20px 0 0 20px; }
.c-grid.-row-30-xl > .c-grid__item { padding: 30px 0 0 30px; }
.c-grid.-row-40-xl > .c-grid__item { padding: 40px 0 0 40px; }
.c-grid.-row-60-xl > .c-grid__item { padding: 60px 0 0 60px; }
.c-grid.-row-80-xl > .c-grid__item { padding: 80px 0 0 80px; }
.c-grid__item.-col-12-xl { width: 100%; }
.c-grid__item.-col-11-xl { width: 91.666%; }
.c-grid__item.-col-10-xl { width: 83.333%; }
.c-grid__item.-col-9-xl  { width: 75%; }
.c-grid__item.-col-8-xl  { width: 66.666%; }
.c-grid__item.-col-7-xl  { width: 58.333%; }
.c-grid__item.-col-6-xl  { width: 50%; }
.c-grid__item.-col-5-xl  { width: 41.666%; }
.c-grid__item.-col-4-xl  { width: 33.333%; }
.c-grid__item.-col-3-xl  { width: 25%; }
.c-grid__item.-col-2-xl  { width: 16.666%; }
.c-grid__item.-col-1-xl  { width: 8.333%; }
}
@media screen and (min-width: 1400px) {
.c-grid.-row-10-xxl { margin: -10px 0 0 -10px; }
.c-grid.-row-20-xxl { margin: -20px 0 0 -20px; }
.c-grid.-row-30-xxl { margin: -30px 0 0 -30px; }
.c-grid.-row-40-xxl { margin: -40px 0 0 -40px; }
.c-grid.-row-10-xxl > .c-grid__item { padding: 10px 0 0 10px; }
.c-grid.-row-20-xxl > .c-grid__item { padding: 20px 0 0 20px; }
.c-grid.-row-30-xxl > .c-grid__item { padding: 30px 0 0 30px; }
.c-grid.-row-40-xxl > .c-grid__item { padding: 40px 0 0 40px; }
.c-grid__item.-col-12-xxl { width: 100%; }
.c-grid__item.-col-11-xxl { width: 91.666%; }
.c-grid__item.-col-10-xxl { width: 83.333%; }
.c-grid__item.-col-9-xxl  { width: 75%; }
.c-grid__item.-col-8-xxl  { width: 66.666%; }
.c-grid__item.-col-7-xxl  { width: 58.333%; }
.c-grid__item.-col-6-xxl  { width: 50%; }
.c-grid__item.-col-5-xxl  { width: 41.666%; }
.c-grid__item.-col-4-xxl  { width: 33.333%; }
.c-grid__item.-col-3-xxl  { width: 25%; }
.c-grid__item.-col-2-xxl  { width: 16.666%; }
.c-grid__item.-col-1-xxl  { width: 8.333%; }
} .c-text-box {
line-height: 1.8;
}
.c-text-box > p + p {
padding-top: 1.5em;
} .u-hide-xs,
.u-hide-sm,
.u-hide-md,
.u-hide-lg,
.u-hide-xl {
display: block;
}
@media screen and (min-width: 576px) {
.u-hide-sm {
display: none;
}
}
@media screen and (min-width: 768px) {
.u-hide-md {
display: none;
}
}
@media screen and (min-width: 992px) {
.u-hide-lg {
display: none;
}
}
@media screen and (min-width: 1200px) {
.u-hide-xl {
display: none;
}
}
@media screen and (min-width: 1400px) {
.u-hide-xxl {
display: none;
}
} .u-show-sm,
.u-show-md,
.u-show-lg,
.u-show-xl,
.u-show-xxl {
display: none;
}
@media screen and (min-width: 576px) {
.u-show-sm {
display: block;
}
}
@media screen and (min-width: 768px) {
.u-show-md {
display: block;
}
}
@media screen and (min-width: 992px) {
.u-show-lg {
display: block;
}
}
@media screen and (min-width: 1200px) {
.u-show-xl {
display: block;
}
}
@media screen and (min-width: 1400px) {
.u-show-xxl {
display: block;
}
} .u-padding-top-20-xs { padding-top: 20px; }
.u-padding-top-30-xs { padding-top: 30px; }
.u-padding-top-40-xs { padding-top: 40px; }
@media screen and (min-width: 992px) {
.u-padding-top-30-lg { padding-top: 30px; }
.u-padding-top-40-lg { padding-top: 40px; }
.u-padding-top-50-lg { padding-top: 50px; }
.u-padding-top-60-lg { padding-top: 60px; }
} .u-align-center-xs {
text-align: center;
}
@media screen and (min-width: 576px) {
.u-align-center-sm {
text-align: center;
}
}
@media screen and (min-width: 768px) {
.u-align-center-md {
text-align: center;
}
}
@media screen and (min-width: 992px) {
.u-align-center-lg {
text-align: center;
}
}
@media screen and (min-width: 1200px) {
.u-align-center-xl {
text-align: center;
}
}
@media screen and (min-width: 1400px) {
.u-align-center-xxl {
text-align: center;
}
} .u-align-right-xs {
text-align: right;
}
@media screen and (min-width: 576px) {
.u-align-right-sm {
text-align: right;
}
}
@media screen and (min-width: 768px) {
.u-align-right-md {
text-align: right;
}
}
@media screen and (min-width: 992px) {
.u-align-right-lg {
text-align: right;
}
}
@media screen and (min-width: 1200px) {
.u-align-right-xl {
text-align: right;
}
}
@media screen and (min-width: 1400px) {
.u-align-right-xxl {
text-align: right;
}
} .u-align-left-xs {
text-align: left;
}
@media screen and (min-width: 576px) {
.u-align-left-sm {
text-align: left;
}
}
@media screen and (min-width: 768px) {
.u-align-left-md {
text-align: left;
}
}
@media screen and (min-width: 992px) {
.u-align-left-lg {
text-align: left;
}
}
@media screen and (min-width: 1200px) {
.u-align-left-xl {
text-align: left;
}
}
@media screen and (min-width: 1400px) {
.u-align-left-xxl {
text-align: left;
}
} .u-text-color-accent {
color: var(--color-green);
}
.u-text-color-notice {
color: #898989;
} .u-text-size-xsmall {
font-size: 1.3rem;
}
.u-text-size-small {
font-size: 1.4rem;
} [data-page*=home] .c-title-primary {
margin: 0 0 3em;
line-height: 1.3;
color: var(--color-main);
}
[data-page*=home] .c-title-primary__small {
display: block;
}
[data-page*=home] .c-title-primary__large {
display: block;
font-weight: 500;
font-size: 2.4rem;
}
@media screen and (min-width: 768px) {
[data-page*=home] .c-title-primary__small {
font-size: 2.0rem;
}
[data-page*=home] .c-title-primary__large {
font-size: 3.8rem;
}
}
@media screen and (min-width: 992px) {
[data-page*=home] .c-title-primary__small {
font-size: 3.0rem;
}
[data-page*=home] .c-title-primary__large {
font-size: 5.0rem;
}
} body:not([data-page*=home]) .c-title-primary {
display: flex;
flex-direction: column;
text-align: center;
line-height: 1.3;
color: var(--color-main);
}
body:not([data-page*=home]) .c-title-primary__en {
font-size: 2.8rem;
font-weight: 300;
}
body:not([data-page*=home]) .c-title-primary__ja {
padding: .75em 0 0;
font-size: 1.4rem;
}
@media screen and (min-width: 768px) {
body:not([data-page*=home]) .c-title-primary__en {
font-size: 4.6rem;
}
body:not([data-page*=home]) .c-title-primary__ja {
font-size: 1.6rem;
}
}
@media screen and (min-width: 992px) {
body:not([data-page*=home]) .c-title-primary__en {
font-size: 6.4rem;
}
body:not([data-page*=home]) .c-title-primary__ja {
font-size: 2.0rem;
}
} [data-page*=home] .c-title-secondary {
margin: 0 0 3em;
}
[data-page*=home] .c-title-secondary__en {
display: block;
font-size: 30px;
font-weight: 300;
}
[data-page*=home] .c-title-secondary__ja {
display: block;
margin: .25em 0 0;
font-size: 1.4rem;
}
@media screen and (min-width: 768px) {
[data-page*=home] .c-title-secondary__en {
font-size: 6.0rem;
}
[data-page*=home] .c-title-secondary__ja {
font-size: 1.6rem;
}
}
@media screen and (min-width: 992px) {
[data-page*=home] .c-title-secondary__en {
font-size: 9.0rem;
}
[data-page*=home] .c-title-secondary__ja {
font-size: 1.8rem;
}
} body:not([data-page*=home]) .c-title-secondary {
line-height: 1.3;
font-size: 2.2rem;
font-weight: 700;
}
@media screen and (min-width: 768px) {
body:not([data-page*=home]) .c-title-secondary {
font-size: 3.2rem;
}
}
@media screen and (min-width: 992px) {
body:not([data-page*=home]) .c-title-secondary {
font-size: 4.0rem;
}
} [data-page*=home] .c-title-tertiary {
margin: 0 auto 2em;
width: -moz-fit-content;
width: fit-content;
border-bottom: solid 1px currentColor;
font-size: 1.8rem;
font-weight: 400;
}
@media screen and (min-width: 768px) {
[data-page*=home] .c-title-tertiary {
font-size: 2.4rem;
}
}
@media screen and (min-width: 992px) {
[data-page*=home] .c-title-tertiary {
font-size: 2.8rem;
}
} .c-list-disc > li {
text-indent: -1em;
padding-left: 1em;
}
.c-list-disc > li::before {
content: "・";
} .js-titleEffect .js-titleEffectElem {
opacity: 0;
}
.js-titleEffect.is-on .js-titleEffectElem:nth-of-type(1) {
animation: titleFadeIn .75s ease-out 0s 1 forwards;
}
.js-titleEffect.is-on .js-titleEffectElem:nth-of-type(2) {
animation: titleFadeIn .75s ease-out .5s 1 forwards;
}
@keyframes titleFadeIn {
0% {
opacity: 0; 
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translateX(0);
}
} .js-imgEffect {
position: relative;
opacity: 0;
}
.js-imgEffect::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
background: #fff;
transform-origin: right;
transition: .2s;
}
.js-imgEffect.is-on {
animation: effectImg 1s ease-out .2s forwards;
}
.js-imgEffect.is-on::before {
animation: effectCoat 1s ease-out .5s forwards;
}
@keyframes effectImg {
0% {
opacity: 1;
transform: translateX(-50%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes effectCoat {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
} @keyframes fadeInTop {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
} .p-header {
position: relative;
z-index: 999;
}
.p-header-site__link {
display: flex;
align-items: flex-end;
width: fit-content;
}
.p-header-site__logo img {
width: 120px;
}
.p-header-site__name {
padding: 0 0 0 10px;
font-weight: 400;
}
body[data-page*=home] .js-header {
opacity: 0;
visibility: hidden;
}
body[data-visited="true"] .js-header {
opacity: 1 !important;
visibility: visible !important;
}
@media screen and (max-width: 991px) {
.p-header {
height: var(--header-height-sp);
}
.p-header-content {
padding: 20px 10px 10px 20px;
}
.p-global-menu-container {
max-width: 400px;
margin: 0 auto;
}
.p-header-menu {
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 80px 30px;
background: var(--color-main);
overflow-y: scroll;
opacity: 0;
visibility: hidden;
transition: opacity .3s, visibility .3s;
}
.p-header-site {
position: absolute;
top: 20px;
left: 20px;
z-index: 9999;
}
.p-header-site__name {
font-size: 1.4rem;
}
.p-header-entry {
padding: 30px 0 0;
}
.p-header-entry__buttonLink {
display: block;
max-width: 400px;
margin: 0 auto;
padding: 15px 20px;
border: solid 1px var(--color-yellow);
color: var(--color-yellow);
font-weight: 600;
font-size: 2.6rem;
text-align: center;
}
body[data-drawer="true"] .p-header-menu {
opacity: 1;
visibility: visible;
}
[data-drawer="true"] .p-header-site {
position: fixed;
}
[data-drawer="true"] .p-header-site__logo img {
filter: invert(100%);
}
[data-drawer="true"] .p-header-site__name {
color: #fff;
}
}
@media screen and (min-width: 992px) {
.p-header {
position: sticky;
top: 0;
left: 0;
height: var(--header-height-pc);
background: rgba(255,255,255,.6);
box-shadow: 0 3px 6px rgba(102,102,102,.1);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.p-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
padding: 20px 140px 20px 20px;
}
.p-header-content {
width: fit-content;
}
.p-header-site__logo img {
width: 140px;
}
.p-header-entry {
position: absolute;
right: 0;
top: 0;
width: 110px;
height: 100%;
}
.p-header-entry__buttonLink {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 80px;
background: var(--color-main);
color: var(--color-yellow);
font-size: 1.8rem;
font-weight: 500;
text-align: center;
}
.p-header-entry__buttonLink::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
opacity: 0;
transition: opacity var(--transition);
}
}
@media screen and (min-width: 1200px) {
.p-header__inner {
padding-right: 180px;
}
.p-header-entry {
width: 140px;
}
}
@media (hover: hover) {
.p-header-entry__buttonLink:hover::before {
opacity: .2;
}
} @media screen and (max-width: 991px) {
.p-global-menu__item + .p-global-menu__item {
margin-top: 1.5em;
}
.p-global-menu__link {
display: flex;
flex-direction: column;
width: fit-content;
}
.p-global-menu__link-ja {
color: #fff;
font-size: 1.3rem;
}
.p-global-menu__link-en {
color: var(--color-yellow);
font-weight: 500;
font-size: 2.4rem;
letter-spacing: 1px;
}
.p-global-menu__child {
padding: 5px 0 0 20px;
}
.p-global-menu__childLink {
position: relative;
display: inline-block;
padding: 5px 5px 5px 20px;
}
.p-global-menu__childLink::before {
content: "\e5c8";
position: absolute;
left: 0;
top: 10px;
color: #fff;
font-size: 1.4rem;
font-weight: normal;
font-family: var(--font-icon);
}
.p-global-menu__childLink--noLink {
pointer-events: none;
opacity: .3;
}
.p-global-menu__childLink-ja {
color: #fff;
font-size: 1.4rem;
}
.p-global-menu__childLink--noLink .p-global-menu__childLink-ja {
font-size: .75em;
}
}
@media screen and (min-width: 992px) {
.p-global-menu {
display: flex;
justify-content: flex-end;
}
.p-global-menu__item {
position: relative;
}
.p-global-menu__item + .p-global-menu__item {
margin-left: 3em;
}
.p-global-menu__link {
display: flex;
flex-direction: column;
width: fit-content;
padding: 5px 0;
}
.p-global-menu__link-ja {
display: none;
}
.p-global-menu__link-en {
font-weight: 500;
font-size: 1.8rem;
transition: var(--transition);
}
.p-global-menu__childArea {
position: absolute;
z-index: 9999;
top: 35px;
left: -20px;
width: max-content;
padding: 15px 10px;
background: var(--color-main);
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: visibility .2s, opacity .2s;
}
.p-global-menu__child {
display: grid;
grid-template-columns: repeat(1,1fr);
gap: 10px;
}
.p-global-menu__childLink {
padding: 5px;
color: #fff;
font-size: 1.5rem;
}
.p-global-menu__childLink--noLink {
pointer-events: none;
opacity: .3;
font-size: 1.2rem;
}
.p-global-menu__item:hover .p-global-menu__childArea {
opacity: 1;
visibility: visible;
}
}
@media (hover:hover) {
.p-global-menu__link:hover .p-global-menu__link-en {
color: #d7d7d7;
}
.p-global-menu__childLink:hover {
opacity: .8;
}
} .p-drawer-button {
position: fixed;
top: 10px;
right: 10px;
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background: var(--color-yellow);
border: none;
border-radius: 100%;
color: #fff;
cursor: pointer;
-webkit-appearance: button;
appearance: button;
}
.p-drawer-button__bar {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 20px;
height: 8px;
transition: .6s;
}
.p-drawer-button__barItem {
width: 100%;
height: 2px;
background: var(--color-main);
opacity: 1;
transition: .3s ease-out;
}
body[data-drawer="true"] .p-drawer-button__bar {
transform: rotate(180deg);
}
body[data-drawer="true"] .p-drawer-button__barItem:nth-child(1) {
transform: translateY(3px);
}
body[data-drawer="true"] .p-drawer-button__barItem:nth-child(2) {
transform: translateY(-3px);
}
.p-drawer-button__text {
position: relative;
top: 8px;
font-size: 1.2rem;
}
@media screen and (min-width: 992px) {
.p-drawer-button {
display: none;
}
} .p-footer {
position: relative;
padding: 20px;
background: var(--color-main);
color: #fff;
}
.p-footer-pagetop {
position: absolute;
top: 20px;
right: 20px;
width: 36px;
height: 36px;
}
.p-footer-pagetop__link {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border: solid 1px currentColor;
opacity: .5;
cursor: pointer;
}
.p-footer-pagetop__link .material-icons {
position: relative;
top: 0;
font-size: 1.6rem;
transition: var(--transition);
}
.p-footer-site__link {
display: block;
width: fit-content;
}
.p-footer-site__link-inner {
display: flex;
align-items: flex-end;
}
.p-footer-site__link-logo {
width: 30px;
}
.p-footer-site__link-text {
position: relative;
padding: 0 18px 0 10px;
font-size: 1.4rem;
font-weight: 500;
}
.p-footer-site__link-text::before,
.p-footer-site__link-text::after {
content: "";
position: absolute;
width: 10px;
height: 8px;
border-color: currentColor;
border-style: solid;
}
.p-footer-site__link-text::before {
right: 0;
bottom: 3px;
border-width: 0 0 1px 1px;
}
.p-footer-site__link-text::after {
right: -3px;
bottom: 6px;
background: var(--color-main);
border-width: 1px;
}
.p-footer-copy {
padding: 2em 0 0;
}
.p-footer-copy__ltd {
font-size: 1.4rem;
}
.p-footer-copy__warning {
padding: .5em 0 0;
font-size: 1.1rem;
}
@media screen and (min-width: 992px) {
.p-footer {
padding: 40px 20px 20px;
}
.p-footer__inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.p-footer-site {
height: 100%;
}
.p-footer-site__link-logo {
width: 40px;
}
.p-footer-site__link-text {
font-size: 1.5rem;
}
.p-footer-copy {
padding: 30px 0 0;
text-align: right;
}
}
@media (hover: hover) {
.p-footer-site__link:hover {
opacity: .7;
}
.p-footer-pagetop__link:hover .material-icons {
top: -3px;
}
} .p-hero {
position: relative;
display: flex;
align-items: center;
height: calc(100vh - 120px);
max-height: 640px;
min-height: 560px;
}
.p-hero__area {
width: 100%;
margin: 0 auto;
padding-right: 20px;
padding-left: 20px;
}
.p-hero-head {
position: relative;
z-index: 2;
padding-top: 20px;
}
.p-hero-head__title {
margin: 0 -15px;
line-height: 1.4;
color: #111;
font-weight: 700;
font-size: 30px;
text-align: center;
letter-spacing: 1px;
}
.p-hero-head__titleItem {
display: block;
}
.p-hero-image {
width: 100vw;
margin: 0 calc(50% - 50vw);
text-align: center;
}
.p-hero-image img {
height: 220px;
object-fit: cover;
}
.p-hero-svg {
max-height: 480px;
}
.p-hero-svg .st0 {
fill:var(--color-yellow);
fill-opacity: 0;
animation: fadeInTopInColor 5s ease-in 0s forwards;
}
.p-hero-svg .st1 {
fill: none;
stroke: #263238;
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
@keyframes fadeInTopInColor {
0%   { fill-opacity: 0; }
80%  { fill-opacity: 0; }
100% { fill-opacity: 1; }
}
.p-hero-catch {
position: relative;
z-index: 1;
margin: -20px -10px 0;
font-size: 40px;
font-weight: 600;
color: transparent;
-webkit-text-stroke: 1px var(--color-green);
text-stroke: 1px var(--color-green);
text-align: center;
}
.p-hero-scroll {
padding: 30px 0;
text-align: center;
}
.p-hero-scroll__link {
position: relative;
padding: 0 0 50px;
background: #fff;
font-size: 14px;
}
.p-hero-scroll__icon {
position: absolute;
bottom: 0;
left: calc(50% - 20px);
width: 40px;
height: 40px;
border: solid 1px #b2b7b9;
border-radius: 50%;
background: #fff;
text-align: center;
}
.p-hero-scroll__icon .material-icons {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
animation: scroll-arrow-move 1s ease-in infinite;
}
.p-hero-scroll__link:hover {
color: #263238;
}
.js-heroCatch,
.js-heroTitleItem,
.js-heroTitleItem span,
.js-heroScroll
{
opacity: 0;
visibility: hidden;
}
.js-heroTitleItem span
{
display: inline-block;
}
body[data-visited="true"] .js-heroCatch,
body[data-visited="true"] .js-heroTitleItem,
body[data-visited="true"] .js-heroTitleItem span,
body[data-visited="true"] .js-heroScroll
{
opacity: 1;
visibility: visible;
}
@media screen and (max-width: 374px) {
.p-hero-head__title {
font-size: 24px;
}
}
@media screen and (min-width: 576px) {
.p-hero-head__titleItem {
display: inline-block;
}
}
@media screen and (min-width: 768px) {
.p-hero {
height: 100vh;
max-height: 720px;
}
.p-hero__area {
max-width: none;
padding-right: 30px;
padding-left: 30px;
}
.p-hero-head__title {
font-size: 46px;
letter-spacing: 2px;
}
.p-hero-head__title-square {
margin-right: .25em;
}
.p-hero-head__title-double {
margin: 0 .1em;
}
.p-hero-head__title-circle {
margin-left: .25em;
}
.p-hero-catch {
margin: -40px 0 0;
font-size: 80px;
}
}
@media screen and (min-width: 992px) {
.p-hero {
max-height: none;
min-height: 640px;
}
.p-hero-head {
padding-top: 0;
}
.p-hero-head__title {
font-size: 56px;
}
.p-hero-catch {
margin: -60px 0 0;
font-size: 110px;
}
.p-hero-scroll {
position: absolute;
right: 10px;
top: 50%;
padding: 0;
transform: rotate(90deg);
}
.p-hero-scroll__link {
padding: 0;
font-size: 16px;
}
.p-hero-scroll__icon {
right: -50px;
bottom: calc(50% - 20px);
left: auto;
transform: rotate(-90deg);
}
}
@media screen and (min-width: 1200px) {
.p-hero {
min-height: 720px;
padding: 0 0 80px;
}
.p-hero-head {
margin-top: -20px;
}
.p-hero-head__title {
font-size: 70px;
}
.p-hero-catch {
font-size: 120px;
}
}
@media screen and (min-width: 1400px) {
.p-hero {
min-height: 820px;
}
.p-hero-svg {
max-height: 720px;
}
}
@media screen and (min-width: 1600px) {
.p-hero-head__title {
font-size: 70px;
}
}
@keyframes scroll-arrow-move {
0% { top: 50%; }
50% { top: 70%; }
100% { top: 50%; }
} .p-mission {
display: flex;
align-items: center;
min-height: 44vh;
background: url(/img/about/recruit/bg-mission.webp) 50% 0 / cover;
}
.p-mission__head {
margin: 0 auto 2em;
padding: .3em 3em .75em;
width: fit-content;
background: var(--color-main);
}
.p-mission__headTitle {
border-bottom: solid 1px currentColor;
color: #fff;
font-size: 1.8rem;
font-weight: 400;
}
.p-mission__catch {
line-height: 1.4;
color: #fff;
font-size: 24px;
font-weight: 500;
}
.p-mission__catchLarge {
font-size: 1.4em;
}
.p-mission__message {
margin: 1em 0 0;
color: #fff;
font-size: 28px;
font-weight: 500;
text-align: center;
}
@media screen and (min-width: 768px) {
.p-mission__headTitle {
font-size: 2.4rem;
}
.p-mission__catch {
font-size: 32px;
}
.p-mission__message {
font-size: 42px;
}
}
@media screen and (min-width: 992px) {
.p-mission__headTitle {
font-size: 2.8rem;
}
.p-mission__catch {
font-size: 50px;
}
.p-mission__message {
font-size: 56px;
}
}
@media screen and (min-width: 1200px) {
.p-mission {
min-height: 800px;
}
.p-mission__message {
font-size: 70px;
}
} .p-value {
}
.p-value::before {
content: "";
position: absolute;
z-index: -1;
top: 50px;
right: 10px;
width: 100%;
height: 16vw;
max-height: 80px;
background: url(/img/about/recruit/txt-VALUE.png) no-repeat 100% 0 / contain;
}
.p-value__area {
padding-right: 20px;
padding-left: 20px;
}
.p-value-list__item + .p-value-list__item {
margin-top: 40px;
}
.p-value-card__body {
position: relative;
z-index: 1;
}
.p-value-card__body::before {
position: absolute;
z-index: -1;
bottom: -20px;
line-height: 1.1;
color: #fff;
font-family: var(--font-en);
font-size: 14vw;
font-weight: 600;
opacity: .6;
}
.p-value-card__body--txtSpontaneity::before {
content: "Spontaneity";
right: 0;
}
.p-value-card__body--txtSpeedy::before {
content: "Speedy";
right: 0;
}
.p-value-card__body--txtFlexibly::before {
content: "Flexibly";
right: 0;
}
.p-value-card__bodyTitle {
position: relative;
margin: 0 0 1em;
padding: 40px 0 0;
font-size: 2.2rem;
font-weight: 500;
}
.p-value-card__bodyTitle::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: -10px;
width: 100%;
height: calc(100% - 10px);
background-size: contain;
background-position: 0 0;
background-repeat: no-repeat;
}
.p-value-card__bodyTitle--num-01::before { background-image: url(/img/about/recruit/txt-value-num-01.png); }
.p-value-card__bodyTitle--num-02::before { background-image: url(/img/about/recruit/txt-value-num-02.png); }
.p-value-card__bodyTitle--num-03::before { background-image: url(/img/about/recruit/txt-value-num-03.png); }
.p-value-card__bodySentence {
line-height: 1.8;
}
.p-value-card__image {
position: relative;
margin-top: 30px;
}
.p-value-list__item:nth-child(2n+1) .p-value-card__image {
left: -20px;
}
.p-value-list__item:nth-child(2n) .p-value-card__image {
right: -20px;
text-align: right;
}
@media screen and (min-width: 576px) {
.p-value-card__body::before {
font-size: 8.0rem;
}
}
@media screen and (min-width: 768px) {
.p-value {
}
.p-value::before {
top: 80px;
max-height: 160px;
}
.p-value__area {
padding-right: 30px;
padding-left: 30px;
}
.p-value-list__item + .p-value-list__item {
margin-top: 80px;
}
.p-value-card {
display: flex;
width: calc(100vw - 60px);
}
.p-value-list__item:nth-child(2n+1) .p-value-card {
flex-direction: row-reverse;
margin-left: -30px;
}
.p-value-list__item:nth-child(2n) .p-value-card {
margin-right: -30px;
}
.p-value-card__body {
display: flex;
flex-direction: column;
justify-content: center;
flex-shrink: 0;
width: calc(50% + 30px);
}
.p-value-list__item:nth-child(2n+1) .p-value-card__body {
padding: 0 0 0 4%;
}
.p-value-list__item:nth-child(2n) .p-value-card__body {
padding: 0 4% 0 0;
}
.p-value-card__body::before {
bottom: -40px;
}
.p-value-card__body--txt-spontaneity::before {
right: -30px;
}
.p-value-card__bodyTitle {
font-size: 3.0rem;
}
.p-value-card__image {
align-self: center;
margin-top: 0;
}
.p-value-list__item:nth-child(2n+1) .p-value-card__image {
left: -30px;
}
.p-value-list__item:nth-child(2n) .p-value-card__image {
right: -30px;
}
}
@media screen and (min-width: 992px) {
.p-value {
}
.p-value::before {
top: 100px;
max-height: 194px;
}
.p-value-card__body::before {
font-size: 11.0rem;
}
.p-value-card__bodyTitle {
padding: 80px 0 0;
font-size: 4.2rem;
}
.p-value-card__bodyTitle::before {
height: calc(100% - 30px);
left: -20px;
}
.p-value-card__bodySentence {
line-height: 2.4;
}
}
@media screen and (min-width: 1200px) {
.p-value-card__body {
width: calc(60% + 30px);
}
.p-value-list__item:nth-child(2n+1) .p-value-card__body {
padding: 0 8%;
}
.p-value-list__item:nth-child(2n) .p-value-card__body {
padding: 0 8%;
}
.p-value-card__body::before {
font-size: 14.0rem;
bottom: -30px;
}
.p-value-card__bodyTitle::before {
left: -60px;
}
} .p-data {
z-index: 1;
}
.p-data::before {
position: absolute;
z-index: -1;
font-family: var(--font-en);
font-weight: 500;
}
.p-data-list__inner {
background: #f9f9f9;
height: 100%;
} [data-page*=home] .p-data::before {
content: "";
top: 20px;
right: 10px;
width: 100%;
height: 16vw;
max-height: 80px;
background: url(/img/about/recruit/txt-DATA.png) no-repeat 100% 0 / contain;
}
@media screen and (min-width: 768px) {
[data-page*=home] .p-data::before {
max-height: 160px;
}
}
@media screen and (min-width: 992px) {
[data-page*=home] .p-data::before {
max-height: 190px;
}
}
@media screen and (min-width: 1600px) {
[data-page*=home] .p-data::before {
transform: rotate(90deg);
top: 250px;
right: -200px;
width: 635px;
}
} [data-page*=development] .p-data::before {
content: "DATA";
top: 30px;
left: 20px;
color: #fff;
font-size: 8.0rem;
opacity: .5;
}
@media screen and (min-width: 768px) {
[data-page*=development] .p-data::before {
top: 0;
font-size: 14.0rem;
}
}
@media screen and (min-width: 992px) {
[data-page*=development] .p-data::before {
font-size: 22.0rem;
}
}
@media screen and (min-width: 1600px) {
[data-page*=development] .p-data::before {
top: 60px;
left: 18vw;
font-size: 25.0rem;
transform-origin: top left;
transform: rotate(90deg);
}
} [data-page*=support] .p-data::before {
content: "DATA";
top: 30px;
left: 20px;
color: #fff;
font-size: 8.0rem;
opacity: .5;
}
@media screen and (min-width: 768px) {
[data-page*=support] .p-data::before {
top: 0;
font-size: 14.0rem;
}
}
@media screen and (min-width: 992px) {
[data-page*=support] .p-data::before {
font-size: 22.0rem;
}
}
@media screen and (min-width: 1600px) {
[data-page*=support] .p-data::before {
top: calc(50% - 320px);
left: 18vw;
font-size: 25.0rem;
transform-origin: top left;
transform: rotate(90deg);
}
} .p-jobs {}
.p-jobs::before {
content: "";
position: absolute;
z-index: -1;
top: 60px;
right: 10px;
width: 100%;
height: 16vw;
max-height: 80px;
background: url(/img/about/recruit/txt-JOBS.png) no-repeat 100% 0 / contain;
}
.p-jobs-list__item {
position: relative;
border-bottom: solid 1px #dcddde;
}
.p-jobs-list__link {
position: relative;
display: block;
padding: 15px 0 15px 5px;
background: transparent;
transition: var(--transition);
}
.p-jobs-list__link--invalid {
pointer-events: none;
}
.p-jobs-list__link::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 50px;
height: 4px;
background: var(--color-green);
}
.p-jobs-list__title-en {
font-size: 2.2rem;
}
.p-jobs-list__title {
margin-top: .25em;
}
.p-jobs-list__more {
position: absolute;
right: 0;
bottom: 0;
width: 120px;
padding: 5px 10px 5px 3px;
background: var(--color-yellow);
color: var(--color-main);
font-weight: 500;
font-size: 1.3rem;
text-align: center;
transition: var(--transition);
}
.p-jobs-list__more::before {
content: "View More";
}
.p-jobs-list__more::after {
content: "";
position: absolute;
right: 15px;
top: calc(50% - 3px);
width: 6px;
height: 6px;
border-top: solid 1px currentColor;
border-right: solid 1px currentColor;
transform: rotate(45deg);
}
@media screen and (min-width: 768px) {
.p-jobs::before {
right: auto;
left: 10px;
max-height: 160px;
background-position: 0 0;
}
.p-jobs-title {
padding: 0 0 0 calc(50% + 20px);
}
}
@media screen and (min-width: 992px) {
.p-jobs::before {
max-height: 190px;
left: 4vw;
}
.p-jobs-list__link {
padding: 20px 0 20px 5px;
}
.p-jobs-list__link::before {
width: 80px;
}
.p-jobs-list__title-en {
font-size: 4.2rem;
}
.p-jobs-list__title {
font-size: 1.8rem;
}
.p-jobs-list__more {
width: 160px;
font-size: 1.6rem;
}
}
@media (hover: hover) {
.p-jobs-list__link:hover {
background: #e9e9e9;
}
.p-jobs-list__link:hover .p-jobs-list__more {
background: #d7d7d7;
}
}  .p-member-slide-container {
width: 100vw;
margin: 0 calc(50% - 50vw);
}
.swiper-slide.p-member-list__item {
padding: 0 10px;
} .p-member-list-container {
width: 90vw;
margin: 0 calc(50% - 45vw);
}
.p-member-list:not(.swiper-wrapper) {
display: grid;
}
.p-member-list:not(.swiper-wrapper)[data-grid-column*="xs-1"] {
grid-template-columns: repeat(1,1fr);
}
.p-member-list:not(.swiper-wrapper)[data-grid-gap*="xs-20"] {
gap: 20px;
}
.p-member-list__item {
height: auto; }
.p-member-card {
position: relative;
max-width: 376px;
height: 100%;
margin: 0 auto;
background: #696969;
}
.p-member-card__head {
position: relative;
}
.p-member-card__headComment {
position: absolute;
bottom: 20px;
left: 0;
display: flex;
flex-direction: column;
transition: opacity .5s;
}
.p-member-card__headComment > span {
align-self: flex-start;
padding: 4px 10px;
background: var(--color-yellow);
font-size: 1.9rem;
font-weight: 500;
}
.p-member-card__headComment > span + span {
margin-top: 3px;
}
.p-member-card__body {
padding: 15px 20px;
color: #fff;
}
.p-member-card__bodyDepartment {
line-height: 1.5;
}
.p-member-card__bodyDepartment > span {
display: block;
font-size: .9em;
opacity: .4;
}
.p-member-card__comment {
position: absolute;
right: 15px;
bottom: 15px;
left: 15px;
padding: 1em;
background: var(--color-yellow);
line-height: 1.7;
font-size: 1.5rem;
opacity: 0;
transition: opacity .5s;
} .js-member-slide-message .swiper-slide-active .p-member-card__headComment {
opacity: 0;
transition-delay: 3.5s;
}
.js-member-slide-message .swiper-slide-active .p-member-card__comment {
opacity: 1;
transition-delay: 3.5s;
}
@media screen and (min-width: 576px) {
.p-member-list:not(.swiper-wrapper)[data-grid-column*="sm-2"] {
grid-template-columns: repeat(2,1fr);
}
.p-member-card__headComment > span {
font-size: 1.9rem;
}
}
@media screen and (min-width: 768px) { .js-member-slide-message .swiper-slide-active .p-member-card__headComment {
opacity: 0;
transition-delay: 2s;
}
.js-member-slide-message .swiper-slide-active .p-member-card__comment {
opacity: 1;
transition-delay: 2s;
}
}
@media screen and (min-width: 992px) {
.p-member-list:not(.swiper-wrapper)[data-grid-column*="lg-4"] {
grid-template-columns: repeat(4,1fr);
}
}
@media screen and (min-width: 1200px) {
.p-member-card__headComment > span {
font-size: 1.9rem;
}
}
@media screen and (min-width: 1400px) {
.p-member-list:not(.swiper-wrapper)[data-grid-gap*="xl-40"] {
gap: 40px;
}
.p-member-card__comment {
font-size: 1.5rem;
}
} [data-page*=home] .p-member {
position: relative;
padding: 60px 0 0;
}
[data-page*=home] .p-member::before {
content: "";
position: absolute;
z-index: -1;
top: 30px;
right: calc(50% - 50vw - 5px);
width: 100vw;
height: 16vw;
max-height: 80px;
background: url(/img/about/recruit/txt-MEMBER.png) no-repeat 100% 0 / contain;
}
@media screen and (min-width: 768px) {
[data-page*=home] .p-member {
padding: 90px 0 0;
}
[data-page*=home] .p-member::before {
max-height: 160px;
top: 60px;
right: calc(50% - 50vw - 20px);
}
}
@media screen and (min-width: 992px) {
[data-page*=home] .p-member::before {
top: 40px;
max-height: 190px;
}
} [data-page*=support] .p-member__area {
max-width: 950px;
}
[data-page*=support] .p-member__deco {
position: absolute;
}
[data-page*=support] .p-member__deco--member {
position: absolute;
top: 60px;
right: -10px;
z-index: -1;
color: #fff;
font-size: 7.0rem;
font-weight: 500;
}
[data-page*=support] .p-member__deco--member::before {
content: "MEMBER";
}
[data-page*=support] .p-member-work {
height: 100%;
padding: 30px 20px;
background: #fff;
}
[data-page*=support] .p-member-work__head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
justify-content: center;
text-align: center;
}
[data-page*=support] .p-member-work__headImage {
width: 40%;
}
[data-page*=support] .p-member-work__headTitle {
width: 100%;
font-weight: 700;
}
[data-page*=support] .p-member-work__headTitleYears {
font-weight: 400;
font-size: .8em;
}
[data-page*=support] .p-member-work__body {
padding: 20px 0 0;
}
[data-page*=support] .p-member-work__bodyItem {
padding: 0 0 20px;
}
[data-page*=support] .p-member-work__bodyItem + .p-member-work__bodyItem {
border-top: solid 1px #b3b3b3;
padding-top: 20px;
}
[data-page*=support] .p-member-work__bodyItem:last-child {
padding-bottom: 0;
}
[data-page*=support] .p-member-work__bodyItemTitle {
padding: 0 0 .5em;
font-weight: 700;
}
[data-page*=support] .p-member-work__bodyItemComment {
line-height: 1.8;
font-size: 1.5rem;
}
[data-page*=support] .p-member-work__bodyItemComment > p + p {
padding-top: 1.5em;
}
@media screen and (min-width: 768px) {
[data-page*=support] .p-member__deco--member {
top: 20px;
font-size: 14rem;
}
[data-page*=support] .p-member-work__headImage {
width: 40%;
}
[data-page*=support] .p-member-work__headTitle {
width: calc(100% - 40% - 10px);
}
}
@media screen and (min-width: 992px) {
[data-page*=support] .p-member__deco--member {
font-size: 18rem;
}
[data-page*=support] .p-member-work {
padding: 40px 30px;
}
[data-page*=support] .p-member-work__headTitle {
font-size: 2.0rem;
}
[data-page*=support] .p-member-work__body {
padding: 30px 0 0;
}
[data-page*=support] .p-member-work__bodyItem {
padding: 0 0 30px;
}
[data-page*=support] .p-member-work__bodyItemTitle {
font-size: 2.0rem;
}
[data-page*=support] .p-member-work__bodyItem + .p-member-work__bodyItem {
padding-top: 30px;
}
[data-page*=support] .p-member-work__bodyItemComment {
min-height: 340px;
font-size: 1.6rem;
}
}
@media screen and (min-width: 1400px) {
[data-page*=support] .p-member__deco--member {
top: 60px;
font-size: 22rem;
transform: translateX(100%) rotate(90deg);
transform-origin: top left;
}
} .p-office {
padding: 60px 0 0;
}
.p-office-card__body {
margin: 20px 0 0;
}
.p-office-card__bodyTitle {
font-weight: 500;
font-size: 1.8rem;
}
.p-office-card__bodyAddress {
margin: 1em 0 0;
}
.p-office-card__bodyButton {
margin: .25em 0 0;
}
.p-office-card__bodyTraffic {
margin: 1em 0 0;
}
.p-office-buttonMap {
position: relative;
display: inline-block;
padding: 5px 10px 5px 30px;
background: var(--color-yellow);
font-weight: 600;
}
.p-office-buttonMap::before {
content: "";
position: absolute;
top: calc(50% - 10px);
left: 10px;
width: 15px;
height: 18px;
background: url(/img/about/recruit/ico-map.svg) no-repeat 0 0 / contain;
transition: .2s;
}
@media screen and (min-width: 768px) {
.p-office {
padding: 90px 0 0;
}
}
@media screen and (min-width: 992px) {
.p-office-card__bodyTitle {
font-size: 2.6rem;
}
}
@media (hover: hover) {
.p-office-buttonMap:hover {
color: #263238;
background: #d7d7d7;
}
.p-office-buttonMap:hover::before {
top: calc(50% - 13px);
}
} .p-guideline {
}
.p-guideline .c-title-secondary {
color: #fff;
}
.p-guideline-detail__table {
width: 100%;
color: #fff;
font-size: 1.4rem;
}
.p-guideline-detail__table th,
.p-guideline-detail__table td {
display: block;
}
.p-guideline-detail__table th {
font-weight: 500;
padding: 10px 0;
border-top: solid 1px currentColor;
border-bottom: solid 1px currentColor;
}
.p-guideline-detail__table td {
padding: 15px 0 30px;
}
@media screen and (min-width: 768px) {
.p-guideline-detail__table th,
.p-guideline-detail__table td {
display: table-cell;
padding: 25px 0;
}
.p-guideline-detail__table th {
width: 28%;
border: none;
text-align: left;
}
.p-guideline-detail__table tr {
border-bottom: solid 1px currentColor;
}
}
@media screen and (min-width: 992px) {
.p-guideline-detail__table {
font-size: 1.5rem;
}
}
@media screen and (min-width: 1200px) {} .p-meeting {
position: relative;
}
.p-meeting__image {
text-align: center;
}
.p-meeting__message {
padding: 10px 20px 0;
font-size: 2.6rem;
font-weight: 500;
text-align: center;
}
.js-meetingEffect {
transform: translateX(0);
opacity: 0;
}
.js-meetingEffect.is-on {
animation: meetingScroll 1s linear 0s forwards;
}
@keyframes meetingScroll {
0% {
transform: translateX(100%);
opacity: 1;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@media screen and (min-width: 768px) {
.p-meeting__message {
font-size: 3.6rem;
}
}
@media screen and (min-width: 992px) {
.p-meeting__message {
font-size: 5.0rem;
}
}
@media screen and (min-width: 1400px) {
.p-meeting__message {
font-size: 6.6rem;
}
} .p-entry {
padding-bottom: 100px;
}
.p-entry-contact {
max-width: 480px;
margin: 40px auto 0;
}
.p-entry-contact__sentence {
margin: .75em 0 0;
}
@media screen and (min-width: 768px) {
.p-entry-contact {
max-width: 800px;
}
}
@media screen and (min-width: 992px) {
.p-entry {
padding-bottom: 160px;
}
} .p-mainvisual {
position: relative;
padding: 80px 0 40px;
text-align: center;
}
.p-mainvisual::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background: #fff;
transform-origin: right;
transition: .2s;
animation: mainVisual .5s ease-out .5s forwards;
}
@keyframes mainVisual {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
@media screen and (min-width: 992px) {
.p-mainvisual {
padding: 120px 0 60px;
}
}  [data-page*=development] .p-about-container {
display: grid;
gap: 20px;
grid-template-columns: repeat(1,1fr);
}
[data-page*=development] .p-about-container__body {
padding: 20px 0 0;
font-size: 1.5rem;
}
[data-page*=development] .p-about-container__bodyPrimary p,
[data-page*=development] .p-about-container__bodySecondary p {
line-height: 1.8;
}
[data-page*=development] .p-about-container__bodyPrimary p + p {
padding-top: 1.5em;
}
[data-page*=development] .p-about-container__bodyCatch {
padding: 30px 0 0;
font-size: 3.2rem;
font-weight: 500;
}
[data-page*=development] .p-about-container__bodySecondary {
padding: 30px 0 0;
}
[data-page*=development] .p-about-container__bodySecondarySentence {
padding: 20px 0 0;
}
[data-page*=development] .p-about__imagePrimary {
position: absolute;
right: 0;
top: 0;
z-index: -1;
opacity: .1;
width: min(480px, 100%);
}
[data-page*=development] .p-about__imageSecondary {
margin: 0 0 -45px;
padding: 30px 30px 0 0;
width: min(480px, 100%);
}
@media screen and (min-width: 768px) {
[data-page*=development] .p-about-container__body {
font-size: 1.6rem;
}
[data-page*=development] .p-about-container__bodyCatch {
font-size: 4.8rem;
}
[data-page*=development] .p-about__imageSecondary {
margin: 0 0 -90px;
}
}
@media screen and (min-width: 992px) {
[data-page*=development] .p-about-container__bodyCatch {
padding: 50px 0 0;
font-size: 6.6rem;
}
[data-page*=development] .p-about-container__bodySecondary {
padding: 10% 0 0 min(47%,550px);
}
[data-page*=development] .p-about__imagePrimary {
opacity: 1;
top: 40px;
width: min(763px, 50%);
}
[data-page*=development] .p-about__imageSecondary {
position: absolute;
left: 0;
bottom: 0;
margin: 0;
width: min(calc(550px + 30px), 47%);
}
}
@media screen and (min-width: 1400px) {
[data-page*=development] .p-about-container__bodySecondary {
padding: 12% 0 0 40%;
}
}
@media screen and (min-width: 1600px) {
[data-page*=development] .p-about-container__bodySecondary {
padding: 12% 0 0 34%;
}
} [data-page*=marketing] .p-about-container {
display: grid;
gap: 20px;
grid-template-columns: repeat(1,1fr);
}
[data-page*=marketing] .p-about-container__body {
padding: 20px 0 0;
font-size: 1.5rem;
}
[data-page*=marketing] .p-about-container__bodyPrimary p,
[data-page*=marketing] .p-about-container__bodySecondary p {
line-height: 1.8;
}
[data-page*=marketing] .p-about-container__bodyPrimary p + p {
padding-top: 1.5em;
}
[data-page*=marketing] .p-about-container__bodyCatch {
padding: 30px 0 0;
font-size: 3.2rem;
font-weight: 500;
}
[data-page*=marketing] .p-about-container__bodySecondary {
padding: 30px 0 0;
}
[data-page*=marketing] .p-about-container__bodySecondary p + p {
padding-top: 1.5em;
}
[data-page*=marketing] .p-about__imagePrimary {
position: absolute;
right: 0;
top: 16%;
z-index: -1;
opacity: .1;
width: min(480px, 100%);
}
@media screen and (min-width: 768px) {
[data-page*=marketing] .p-about__area {
max-width: 1500px;
}
[data-page*=marketing] .p-about-container__body {
font-size: 1.6rem;
}
[data-page*=marketing] .p-about-container__bodyCatch {
font-size: 4.8rem;
}
}
@media screen and (min-width: 992px) {
[data-page*=marketing] .p-about-container {
gap: 0;
}
[data-page*=marketing] .p-about-container__bodyCatch {
padding: 50px 0 0;
font-size: 6.2rem;
}
[data-page*=marketing] .p-about-container__bodySecondary {
padding: 50px 0 0;
}
[data-page*=marketing] .p-about-container__bodyPrimary {
width: 64%;
}
[data-page*=marketing] .p-about__imagePrimary {
top: 40px;
opacity: .3;
transform: none;
width: min(763px, 44%);
}
}
@media screen and (min-width: 1200px) {
body[data-page*=marketing] .c-title-secondary {
font-size: 3.4rem;
}
[data-page*=marketing] .p-about-container {
grid-template-columns: auto 48%;
}
[data-page*=marketing] .p-about-container__bodyPrimary {
width: 100%;
}
[data-page*=marketing] .p-about__imagePrimary {
top: 120px;
opacity: 1;
}
}
@media screen and (min-width: 1400px) {
body[data-page*=marketing] .c-title-secondary {
font-size: 4.0rem;
}
[data-page*=marketing] .p-about-container { }
} [data-page*="support"] .p-about {
background: url(/img/about/recruit/customer-support/bg-about.webp) no-repeat 50% 50% / cover;
}
[data-page*="support"] .p-about__title {
padding: 0 20px;
text-align: center;
}
[data-page*="support"] .p-about__title img {
width: 320px;
}
[data-page*="support"] .p-about-mission {
position: relative;
padding: 20px 30px;
}
[data-page*="support"] .p-about-mission::before,
[data-page*="support"] .p-about-mission::after {
content: "";
position: absolute;
width: 30px;
height: 30px;
border-color: var(--color-yellow);
border-style: solid;
}
[data-page*="support"] .p-about-mission::before {
top: 0;
left: 0;
border-width: 5px 0 0 5px;
}
[data-page*="support"] .p-about-mission::after {
bottom: 0;
right: 0;
border-width: 0 5px 5px 0;
}
[data-page*="support"] .p-about-mission__list {
display: grid;
gap: .5em;
}
[data-page*="support"] .p-about-mission__listItem {
position: relative;
counter-increment: mission-list;
padding: 0 0 0 1.5em;
font-weight: 700;
}
[data-page*="support"] .p-about-mission__listItem::before {
content: counter(mission-list);
position: absolute;
left: 0;
}
@media screen and (min-width: 576px) {
[data-page*="support"] .p-about-mission {
width: fit-content;
margin: 0 auto;
}
}
@media screen and (min-width: 768px) {
[data-page*="support"] .p-about-mission__listItem {
font-size: 2.2rem;
}
}
@media screen and (min-width: 992px) {
[data-page*="support"] .p-about__title img {
width: 460px;
}
[data-page*="support"] .p-about-mission {
padding: 50px 60px;
}
[data-page*="support"] .p-about-mission::before,
[data-page*="support"] .p-about-mission::after {
width: 60px;
height: 60px;
}
[data-page*="support"] .p-about-mission::before {
border-width: 15px 0 0 15px;
}
[data-page*="support"] .p-about-mission::after {
border-width: 0 15px 15px 0;
}
[data-page*="support"] .p-about-mission__listItem {
font-size: 3.4rem;
}
}
@media screen and (min-width: 1200px){
[data-page*="support"] .p-about {
background-attachment: fixed;
}
} [data-page*="corporate"] .p-about {
background: url(/img/about/recruit/corporate/bg-about.webp) no-repeat 50% 50% / cover;
}
@media (hover: hover){
[data-page*="corporate"] .p-about {
background-attachment: fixed;
}
} .p-category-card__bodyTitle {
position: relative;
z-index: 1;
line-height: 1.4;
padding: 40px 0 0;
font-weight: 500;
font-size: 2.2rem;
}
.p-category-card__bodyTitle::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: -10px;
width: 100%;
height: calc(100% - 10px);
max-height: 64px;
background-size: contain;
background-position: 0 0;
background-repeat: no-repeat;
}
.p-category-card__bodyTitle--num01::before { background-image: url(/img/about/recruit/txt-num-01.svg); }
.p-category-card__bodyTitle--num02::before { background-image: url(/img/about/recruit/txt-num-02.svg); }
.p-category-card__bodyTitle--num03::before { background-image: url(/img/about/recruit/txt-num-03.svg); }
.p-category-card__bodyTitle--num04::before { background-image: url(/img/about/recruit/txt-num-04.svg); }
.p-category-card__bodyTitle--num05::before { background-image: url(/img/about/recruit/txt-num-05.svg); }
@media screen and (min-width: 768px) {
.p-category-card__bodyTitle {
font-size: 2.4rem;
}
}
@media screen and (min-width: 992px) {
.p-category-card__bodyTitle {
padding: 60px 0 0;
font-size: 3.0rem;
}
.p-category-card__bodyTitle::before {
height: calc(100% - 20px);
}
} [data-page*=development] .p-category-list {
display: grid;
gap: 40px;
grid-template-columns: repeat(1,1fr);
}
[data-page*=development] .p-category-card {
display: grid;
gap: 20px;
grid-template-columns: repeat(1,1fr);
}
[data-page*=development] .p-category-card__body {
position: relative;
z-index: 1;
}
[data-page*=development] .p-category-card__body::before {
content: "";
position: absolute;
z-index: -1;
right: 0;
top: 25px;
width: 100%;
height: 30px;
background-size: contain;
background-position: 100% 0;
background-repeat: no-repeat;
}
[data-page*=development] .p-category-card__body--development::before { background-image: url(/img/about/recruit/development/txt-category-development.png); }
[data-page*=development] .p-category-card__body--infrastructure::before { background-image: url(/img/about/recruit/development/txt-category-infrastructure.png); }
[data-page*=development] .p-category-card__body--qa::before { background-image: url(/img/about/recruit/development/txt-category-qa.png); }
[data-page*=development] .p-category-card__body--designer::before { background-image: url(/img/about/recruit/development/txt-category-designer.png); }
[data-page*=development] .p-category-card__bodySentence {
padding: 1em 0 0;
line-height: 1.8;
}
@media screen and (min-width: 768px) {
[data-page*=development] .p-category-list {
gap: 80px;
}
[data-page*=development] .p-category-list__item:nth-child(2n+1) .p-category-card__body {
order: 2;
}
[data-page*=development] .p-category-list__item:nth-child(2n+1) .p-category-card__image {
order: 1;
}
[data-page*=development] .p-category-card {
gap: 4%;
grid-template-columns: 50% auto;
}
[data-page*=development] .p-category-card__body::before {
height: 80px;
top: calc(100% - 30px);
}
}
@media screen and (min-width: 1200px) {
[data-page*=development] .p-category-card__body::before {
top: calc(100% - 60px);
height: 100px;
}
[data-page*=development] .p-category-list__item:nth-child(2n+1) .p-category-card__body::before {
right: auto;
left: 0;
}
}
@media screen and (min-width: 1400px) {
[data-page*=development] .p-category-card__body::before {
top: calc(100% - 70px);
height: 110px;
width: 640px;
}
}
@media screen and (min-width: 1800px) {
[data-page*=development] .p-category-card__body::before {
top: calc(100% - 90px);
height: 140px;
width: 840px;
}
} [data-page*=marketing] .p-category__deco--team {
position: absolute;
top: 20px;
left: calc(100% - 10px);
z-index: -1;
color: #fff;
font-size: 7.0rem;
font-weight: 500;
opacity: .4;
transform: rotate(90deg);
transform-origin: left top;
}
[data-page*=marketing] .p-category__deco--team::before {
content: "TEAM";
}
[data-page*=marketing] .p-category-list {
display: grid;
gap: 40px;
grid-template-columns: repeat(1,1fr);
}
[data-page*=marketing] .p-category-card {
display: grid;
gap: 20px;
grid-template-columns: repeat(1,1fr);
}
[data-page*=marketing] .p-category-card__body {
position: relative;
z-index: 1;
}
[data-page*=marketing] .p-category-card__body::before {
content: "";
position: absolute;
z-index: -1;
right: 0;
top: 25px;
width: 100%;
height: 30px;
background-size: contain;
background-position: 100% 0;
background-repeat: no-repeat;
}
[data-page*=marketing] .p-category-card__body--web::before { background-image: url(/img/about/recruit/sales-marketing/txt-category-web.png); }
[data-page*=marketing] .p-category-card__body--partner::before { background-image: url(/img/about/recruit/sales-marketing/txt-category-partner.png); }
[data-page*=marketing] .p-category-card__body--assistant::before { background-image: url(/img/about/recruit/sales-marketing/txt-category-assistant.png); }
[data-page*=marketing] .p-category-card__bodySentence {
padding: 1em 0 0;
line-height: 1.8;
}
@media screen and (min-width: 768px) {
[data-page*=marketing] .p-category__deco--team {
left: 90px;
opacity: 1;
font-size: 8.0rem;
}
[data-page*=marketing] .p-category-list {
gap: 80px;
}
[data-page*=marketing] .p-category-list__item:nth-child(2n+1) .p-category-card__body {
order: 2;
}
[data-page*=marketing] .p-category-list__item:nth-child(2n+1) .p-category-card__image {
order: 1;
}
[data-page*=marketing] .p-category-card {
gap: 4%;
grid-template-columns: 50% auto;
}
[data-page*=marketing] .p-category-card__body::before {
height: 80px;
top: calc(100% - 60px);
}
}
@media screen and (min-width: 992px) {
[data-page*=marketing] .p-category__deco--team {
left: 140px;
font-size: 13.0rem;
}
}
@media screen and (min-width: 1200px) {
[data-page*=marketing] .p-category-card__body::before {
top: calc(100% - 80px);
height: 100px;
}
[data-page*=marketing] .p-category-list__item:nth-child(2n+1) .p-category-card__body::before {
right: auto;
left: 0;
}
}
@media screen and (min-width: 1400px) {
[data-page*=marketing] .p-category__deco--team {
left: 200px;
font-size: 20.0rem;
}
[data-page*=marketing] .p-category-card__body::before {
top: calc(100% - 90px);
height: 130px;
width: 640px;
}
}
@media screen and (min-width: 1800px) {
[data-page*=marketing] .p-category__deco--team {
left: 260px;
font-size: 24.0rem;
}
[data-page*=marketing] .p-category-card__body::before {
top: calc(100% - 90px);
height: 140px;
width: 840px;
}
} [data-page*=support] .p-category__area {
max-width: 1500px;
}
[data-page*=support] .p-category-text-box {
position: relative;
z-index: 1;
}
[data-page*=support] .p-category-list {
position: relative;
display: grid;
gap: 40px;
grid-template-columns: repeat(1,1fr);
max-width: 320px;
margin: 0 auto;
}
[data-page*=support] .p-category-list::before,
[data-page*=support] .p-category-list::after {
content: "";
position: absolute;
}
[data-page*=support] .p-category-list::before {
top: -30px;
left: 25%;
width: 240px;
height: 56px;
background: url(/img/about/recruit/customer-support/txt-category-telephone.png) no-repeat 0 0 / contain;
}
[data-page*=support] .p-category-list::after {
bottom: -40px;
right: -15px;
width: 240px;
height: 35px;
background: url(/img/about/recruit/customer-support/txt-category-product-delivery.png) no-repeat 0 0 / contain;
}
[data-page*=support] .p-category-card {
display: grid;
gap: 20px;
grid-template-columns: repeat(1,1fr);
}
@media screen and (min-width: 576px) {
[data-page*=support] .p-category-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: normal;
max-width: none;
margin: -30px 0 0 -30px;
}
[data-page*=support] .p-category-list::before {
top: -10px;
left: calc(100% - 240px);
}
[data-page*=support] .p-category-list__item {
width: 50%;
padding: 30px 0 0 30px;
}
}
@media screen and (min-width: 768px) {
[data-page*=support] .p-category-list::after {
bottom: -70px;
right: -15px;
width: 400px;
height: 60px;
}
}
@media screen and (min-width: 992px) {
[data-page*=support] .p-category-list::before {
top: -160px;
left: 0;
width: 400px;
height: 90px;
}
[data-page*=support] .p-category-list::after {
bottom: -100px;
width: 580px;
height: 85px;
}
[data-page*=support] .p-category-list__item {
width: 33.3333%;
}
[data-page*=support] .p-category-card__bodyTitle {
min-height: 150px;
}
}
@media screen and (min-width: 1400px) {
[data-page*=support] .p-category-list::before {
top: -180px;
width: 645px;
height: 144px;
}
[data-page*=support] .p-category-list::after {
bottom: -115px;
right: -3vw;
width: 840px;
height: 120px;
}
}
@media screen and (min-width: 1500px) {
[data-page*=support] .p-category-card__bodyTitle {
min-height: auto;
}
}
@media screen and (min-width: 1600px) {
[data-page*=support] .p-category-list::before {
left: -3vw;
}
} [data-page*=corporate] .p-category-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
max-width: 400px;
margin: 0 auto;
}
[data-page*=corporate] .p-category-card {
display: grid;
gap: 20px;
grid-template-columns: repeat(1,1fr);
}
[data-page*=corporate] .p-category-card__bodySentence {
padding: 1em 0 0;
line-height: 1.8;
}
@media screen and (min-width: 576px) {
[data-page*=corporate] .p-category__area {
max-width: 1500px;
}
[data-page*=corporate] .p-category-list {
max-width: none;
gap: 30px;
}
[data-page*=corporate] .p-category-list__item {
width: calc(50% - 15px);
}
}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 992px) {
[data-page*=corporate] .p-category-list__item {
width: calc(33.33333% - 30px);
}
}
@media screen and (min-width: 1200px) {
[data-page*=corporate] .p-category-list {
column-gap: 60px;
row-gap: 80px;
}
[data-page*=corporate] .p-category-list__item {
width: calc(33.33333% - 50px);
}
}  [data-page*=development] .p-culture-list {
display: grid;
gap: 40px;
grid-template-columns: repeat(1,1fr);
max-width: 320px;
margin: 0 auto;
}
[data-page*=development] .p-culture-list__item {
position: relative;
height: 0;
padding-top: 100%;
border-radius: 100%;
background: #fff;
}
[data-page*=development] .p-culture-list__container {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
padding: 30px 10px;
text-align: center;
transform: translate(-50%, -50%);
}
[data-page*=development] .p-culture-list__containerHead {
font-size: 2.2rem;
}
[data-page*=development] .p-culture-list__containerBody {
padding: 1em 0 0;
}
[data-page*=development] .p-culture-project {
position: relative;
padding: 60px 0 0;
}
[data-page*=development] .p-culture-project__title {
font-size: 2.0rem;
text-align: center;
}
[data-page*=development] .p-culture-project__chart {
padding: 20px 0 0;
text-align: center;
}
[data-page*=development] .p-culture-project__chartSentence {
margin: 0 auto 1em;
text-align: left;
}
[data-page*=development] .p-culture-project__deco {
position: absolute;
z-index: -1;
color: #e9e9e9;
font-weight: 500;
}
[data-page*=development] .p-culture-project__deco--TEAM {
top: 40px;
left: -15px;
font-size: 6.0rem;
}
[data-page*=development] .p-culture-project__deco--TEAM::before {
content: "TEAM";
}
[data-page*=development] .p-culture-project__deco--PROJECT {
bottom: -4.2rem;
right: 20px;
font-size: 4.0rem;
}
[data-page*=development] .p-culture-project__deco--PROJECT::before {
content: "PROJECT";
}
@media screen and (min-width: 576px) {
[data-page*=development] .p-culture-list {
gap: 60px;
grid-template-columns: repeat(2,1fr);
max-width: 640px;
}
[data-page*=development] .p-culture-project__chartSentence {
width: fit-content;
}
}
@media screen and (min-width: 768px) {
[data-page*=development] .p-culture-project__deco--TEAM {
top: 0;
left: -25px;
font-size: 10.0rem;
}
[data-page*=development] .p-culture-project__deco--PROJECT {
bottom: -8rem;
right: -25px;
font-size: 9rem;
}
}
@media screen and (min-width: 992px) {
[data-page*=development] .p-culture-list {
gap: 120px;
max-width: 760px;
}
[data-page*=development] .p-culture-list__containerHead {
font-size: 3.4rem;
}
[data-page*=development] .p-culture-list__containerBody {
font-size: 1.8rem;
}
[data-page*=development] .p-culture-project {
padding: 120px 0 0;
}
[data-page*=development] .p-culture-project__title {
font-size: 2.4rem;
}
[data-page*=development] .p-culture-project__chartSentence {
margin: 0 auto 2em;
}
[data-page*=development] .p-culture-project__deco--TEAM {
top: -10px;
left: -30px;
font-size: 16.0rem;
}
[data-page*=development] .p-culture-project__deco--PROJECT {
bottom: -12rem;
right: -30px;
font-size: 14.0rem;
}
}
@media screen and (min-width: 1200px) {
[data-page*=development] .p-culture-list {
max-width: 840px;
}
[data-page*=development] .p-culture-project__deco--TEAM {
left: -4vw;
}
[data-page*=development] .p-culture-project__deco--PROJECT {
bottom: auto;
top: 110px;
right: -4vw;
}
}
@media screen and (min-width: 1400px) {
[data-page*=development] .p-culture-project__deco--TEAM {
top: 20px;
left: -8vw;
}
}
@media screen and (min-width: 1600px) {
[data-page*=development] .p-culture-project__deco--TEAM {
font-size: 18.0rem;
left: -12vw;
}
[data-page*=development] .p-culture-project__deco--PROJECT {
top: 60px;
right: -14vw;
font-size: 18.0rem;
}
} [data-page*="marketing"] .p-culture {
background: url(/img/about/recruit/sales-marketing/bg-culture.webp) no-repeat 50% 50% / cover;
}
[data-page*="marketing"] .p-culture-lead {
width: fit-content;
margin-right: auto;
margin-left: auto;
}
[data-page*=marketing] .p-culture-list {
display: grid;
gap: 40px;
grid-template-columns: repeat(1,1fr);
max-width: 280px;
margin: 0 auto;
}
[data-page*=marketing] .p-culture-list__item {
position: relative;
height: 0;
padding-top: 100%;
border-radius: 100%;
background: var(--color-background);
box-shadow: 0 0 10px rgba(0,0,0,.1);
}
[data-page*=marketing] .p-culture-list__container {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
padding: 30px 10px;
text-align: center;
transform: translate(-50%, -50%);
}
[data-page*=marketing] .p-culture-list__containerHead {
font-size: 2.2rem;
}
[data-page*=marketing] .p-culture-list__containerBody {
padding: 1em 0 0;
}
@media screen and (min-width: 576px) {
[data-page*=marketing] .p-culture-list {
grid-template-columns: repeat(2,1fr);
max-width: 640px;
}
[data-page*=marketing] .p-culture-list__item--last {
transform: translateX(calc(50% + 20px));
}
}
@media screen and (min-width: 992px) {
[data-page*=marketing] .p-culture-list {
grid-template-columns: repeat(3,1fr);
max-width: 960px;
}
[data-page*=marketing] .p-culture-list__item--last {
transform: none;
}
[data-page*=marketing] .p-culture-list__container {
top: 16%;
transform: translate(-50%, 0);
}
[data-page*=marketing] .p-culture-list__containerHead {
font-size: 2.6rem;
}
}
@media screen and (min-width: 1200px) {
[data-page*=marketing] .p-culture-list {
max-width: none;
}
[data-page*=marketing] .p-culture-list__container {
top: 20%;
}
[data-page*=marketing] .p-culture-list__containerHead {
font-size: 3.0rem;
}
[data-page*=marketing] .p-culture-list__containerBody {
font-size: 1.8rem;
}
}
@media screen and (min-width: 1400px) {
[data-page*=marketing] .p-culture-list__container {
top: 24%;
}
[data-page*=marketing] .p-culture-list__containerHead {
font-size: 3.4rem;
}
}
@media (hover: hover) {
[data-page*="marketing"] .p-culture {
background-attachment: fixed;
}
} [data-page*="corporate"] .p-culture {
background: url(/img/about/recruit/corporate/bg-culture.webp) no-repeat 50% 50% / cover;
}
[data-page*=corporate] .p-culture-list {
display: grid;
gap: 40px;
grid-template-columns: repeat(1,1fr);
max-width: 280px;
margin: 0 auto;
}
[data-page*=corporate] .p-culture-list__item {
position: relative;
height: 0;
padding-top: 100%;
border-radius: 100%;
background: var(--color-background);
box-shadow: 0 0 10px rgba(0,0,0,.1);
}
[data-page*=corporate] .p-culture-list__container {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
padding: 30px 10px;
text-align: center;
transform: translate(-50%, -50%);
}
[data-page*=corporate] .p-culture-list__containerHead {
font-size: 2.2rem;
}
[data-page*=corporate] .p-culture-list__containerBody {
padding: 1em 0 0;
line-height: 1.8;
}
[data-page*=corporate] .p-culture-sentence {
padding: 30px 0 0;
font-weight: 500;
}
@media screen and (min-width: 576px) {
[data-page*=corporate] .p-culture-list {
grid-template-columns: repeat(2,1fr);
max-width: 640px;
}
}
@media screen and (min-width: 768px) {
[data-page*=corporate] .p-culture-sentence {
font-size: 1.8rem;
}
[data-page*=corporate] .p-culture-sentence {
padding: 50px 0 0;
}
}
@media screen and (min-width: 992px) {
[data-page*=corporate] .p-culture-list {
gap: 80px;
max-width: 840px;
}
[data-page*=corporate] .p-culture-list__containerHead {
font-size: 2.8rem;
}
[data-page*=corporate] .p-culture-sentence {
padding: 80px 0 0;
}
}
@media screen and (min-width: 1200px) {
[data-page*=corporate] .p-culture-list__containerHead {
font-size: 3.4rem;
}
[data-page*=corporate] .p-culture-list__containerBody {
font-size: 1.8rem;
}
}
@media (hover: hover) {
[data-page*="corporate"] .p-culture {
background-attachment: fixed;
}
} .p-product__sectionHeadSentence {
line-height: 1.8;
margin: 0 auto;
padding: 30px 0 0;
}
.p-product__sectionHeadSentence p + p {
padding-top: 1em;
}
.p-product-content {
max-width: 400px;
margin: 0 auto;
}
.p-product-content__imageSecondary {
padding: 40px 0 0;
}
.p-product-content__image + .p-product-content__item {
padding-top: 40px;
}
.p-product-content__item + .p-product-content__item {
padding-top: 40px;
}
.p-product-content__title {
padding: .5em;
background: var(--color-yellow);
font-size: 1.8rem;
letter-spacing: 1px;
text-align: center;
}
.p-product-content__body {
padding: 40px 0 0;
}
.p-product-content__listItem {
position: relative;
min-height: 50px;
}
.p-product-content__listItem + .p-product-content__listItem {
margin-top: 30px;
}
.p-product-content__listIcon {
position: absolute;
bottom: 0;
left: calc(100% - 64px);
width: 64px;
height: 64px;
background-repeat: no-repeat;
background-size: contain;
cursor: pointer; }
.p-product-content__listIcon::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: contain;
opacity: 0;
transition: opacity var(--transition);
}
.p-product-content__listIcon--design {
background-image: url(/img/about/recruit/development/ico-product-design.png);
}
.p-product-content__listIcon--design::after {
background-image: url(/img/about/recruit/development/ico-product-design-on.png);
}
.p-product-content__listIcon--qa {
background-image: url(/img/about/recruit/development/ico-product-qa.png);
}
.p-product-content__listIcon--qa::after {
background-image: url(/img/about/recruit/development/ico-product-qa-on.png);
}
.p-product-content__listIcon--app {
background-image: url(/img/about/recruit/development/ico-product-app.png);
}
.p-product-content__listIcon--app::after {
background-image: url(/img/about/recruit/development/ico-product-app-on.png);
}
.p-product-content__listIcon--web {
background-image: url(/img/about/recruit/development/ico-product-web.png);
}
.p-product-content__listIcon--web::after {
background-image: url(/img/about/recruit/development/ico-product-web-on.png);
}
.p-product-content__listIcon--infra {
background-image: url(/img/about/recruit/development/ico-product-infra.png);
}
.p-product-content__listIcon--infra::after {
background-image: url(/img/about/recruit/development/ico-product-infra-on.png);
}
.p-product-content__listHead {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
padding: 0 75px .25em 0;
line-height: 1.3;
font-weight: 500;
}
.p-product-content__listHead::before {
content: "";
position: absolute;
bottom: -5px;
left: 0;
right: 20px;
height: 2px;
background: var(--color-yellow);
}
.p-product-content__listBody {
position: absolute;
z-index: 2;
top: 100%;
left: 0;
visibility: hidden;
opacity: 0;
padding: 1em;
background: var(--color-yellow);
font-size: 1.4rem;
transition: opacity .2s;
}
.p-product-content__listBody::before {
content: "";
position: absolute;
left: 50%;
top: -10px;
width: 0;
height: 0;
border-width: 0 10px 10px 10px;
border-color: transparent transparent var(--color-yellow) transparent;
border-style: solid;
} .p-product-content__listIcon:hover::after {
opacity: 1;
}
.p-product-content__listIcon:hover ~ .p-product-content__listBody {
opacity: 1;
visibility: visible;
}
@media screen and (min-width: 768px) {
.p-product__sectionHeadSentence {
width: fit-content;
}
.p-product-content {
position: relative;
max-width: 1080px;
}
.p-product-content__image {
display: flex;
flex-direction: column-reverse;
width: 60%;
margin: 0 auto;
}
.p-product-content__imagePrimary {
padding: 32% 0 0;
}
.p-product-content__imageSecondary {
}
.p-product-content__item {
position: absolute;
}
.p-product-content__item + .p-product-content__item {
padding-top: 0;
}
.p-product-content__image + .p-product-content__item {
padding-top: 0;
}
.p-product-content__item--primary {
top: 18%;
left: 0;
width: 34%;
padding: 0;
}
.p-product-content__item--secondary {
top: 18%;
right: 0;
width: 34%;
padding: 0;
z-index: 1;
}
.p-product-content__item--tertiary {
display: flex;
flex-direction: column-reverse;
bottom: 8%;
left: 50%;
width: 100%;
transform: translateX(-50%);
}
.p-product-content__list--2column {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.p-product-content__list--2column .p-product-content__listItem {
width: 34%;
}
.p-product-content__item--primary .p-product-content__listHead {
padding-left: 75px;
padding-right: 0;
}
.p-product-content__item--primary .p-product-content__listHead::before {
left: 20px;
right: 0;
}
.p-product-content__item--primary .p-product-content__listIcon {
left: 0;
}
.p-product-content__item--tertiary .p-product-content__title {
position: absolute;
bottom: 1.8vw;
left: 50%;
width: 28%;
transform: translateX(-50%);
}
.p-product-content__item--tertiary .p-product-content__listItem:nth-child(2n+1) .p-product-content__listHead {
padding-right: 0;
padding-left: 75px;
}
.p-product-content__item--tertiary .p-product-content__listItem:nth-child(2n+1) .p-product-content__listHead::before {
left: 20px;
right: 0;
}
.p-product-content__item--tertiary .p-product-content__listItem:nth-child(2n+1) .p-product-content__listIcon {
left: 0;
}
}
@media screen and (min-width: 992px) {
.p-product__sectionHeadSentence {
}
.p-product-content__body {
padding: 60px 0 0;
}
.p-product-content__imagePrimary {
padding: 16% 0 0;
}
.p-product-content__item--primary {
top: 0;
}
.p-product-content__item--secondary {
top: 0;
}
.p-product-content__item--tertiary {
bottom: 12%;
}
.p-product-content__title {
font-size: 2.4rem;
}
.p-product-content__listItem + .p-product-content__listItem {
margin-top: 50px;
}
.p-product-content__listHead {
padding-right: 90px;
font-size: 1.8rem;
}
.p-product-content__listHead::before {
height: 4px;
}
.p-product-content__listBody {
font-size: 1.6rem;
}
.p-product-content__listIcon {
width: 88px;
height: 88px;
left: calc(100% - 88px);
}
.p-product-content__item--primary .p-product-content__listHead {
padding-left: 90px;
}
.p-product-content__item--tertiary .p-product-content__listItem:nth-child(2n+1) .p-product-content__listHead {
padding-left: 90px;
}
}
@media screen and (min-width: 1200px) {
.p-product__sectionHeadSentence {
}
.p-product-content__title {
font-size: 2.8rem;
}
.p-product-content__body {
padding: 80px 0 0;
}
.p-product-content__listItem + .p-product-content__listItem {
margin-top: 65px;
}
.p-product-content__listHead {
padding-right: 120px;
}
.p-product-content__listHead::before {
right: 50px;
}
.p-product-content__listIcon {
width: 107px;
height: 107px;
left: calc(100% - 107px);
}
.p-product-content__item--primary .p-product-content__listHead::before {
left: 50px;
}
.p-product-content__item--tertiary .p-product-content__title {
bottom: 14px;
}
.p-product-content__item--tertiary .p-product-content__listItem:nth-child(2n+1) .p-product-content__listHead::before {
left: 50px;
}
.p-product-content__item--primary .p-product-content__listHead {
padding-left: 120px;
}
.p-product-content__item--tertiary .p-product-content__listItem:nth-child(2n+1) .p-product-content__listHead {
padding-left: 120px;
}
} .p-schedule {
z-index: 1;
}
.p-schedule-content {
width: fit-content;
margin: 0 auto;
}
.p-schedule__deco--schedule {
position: absolute;
top: 60px;
left: -10px;
z-index: -1;
color: #f6f6f6;
font-size: 7.0rem;
font-weight: 500;
opacity: .5;
}
.p-schedule__deco--schedule::before {
content: "SCHEDULE";
}
@media screen and (min-width: 768px) {
.p-schedule__deco--schedule {
top: 90px;
left: 10px;
font-size: 11.0rem;
}
}
@media screen and (min-width: 992px) {
.p-schedule__deco--schedule {
top: 160px;
font-size: 14.0rem;
}
}
@media screen and (min-width: 1200px) {
.p-schedule__deco--schedule {
top: 300px;
left: 160px;
transform: rotate(90deg);
transform-origin: left top;
}
}
@media screen and (min-width: 1400px) {
.p-schedule__deco--schedule {
top: 160px;
left: 220px;
font-size: 18.0rem;
}
} .p-career {} [data-page*=development] .p-career-content {
position: relative;
z-index: 1;
margin: 30px 0 0;
}
[data-page*=development] .p-career__sectionHeadSentence {
line-height: 1.8;
max-width: 640px;
margin: 0 auto;
padding: 30px 0 0;
}
[data-page*=development] .p-career-content__figure {
overflow-x: scroll;
text-align: center;
}
[data-page*=development] .p-career-content__figureContent {
width: 640px;
}
[data-page*=development] .p-career-content__deco {
position: absolute;
z-index: -1;
width: 100%;
height: 25px;
background-size: contain;
background-repeat: no-repeat;
}
[data-page*=development] .p-career-content__deco--professional {
left: -10px;
top: -40px;
background-image: url(/img/about/recruit/development/txt-career-professional.png);
}
[data-page*=development] .p-career-content__deco--management {
right: -10px;
top: -25px;
background-position: 100% 0;
background-image: url(/img/about/recruit/development/txt-career-management.png);
}
[data-page*=development] .p-career-content__deco--leader {
left: -10px;
bottom: -35px;
background-image: url(/img/about/recruit/development/txt-career-leader.png);
}
[data-page*=development] .p-career-content__deco--basic {
right: 0;
background-position: 100% 0;
background-image: url(/img/about/recruit/development/txt-career-basic.png);
}
@media screen and (min-width: 768px) {
[data-page*=development] .p-career-content__figure {
overflow-x: visible;
}
[data-page*=development] .p-career-content__figureContent {
width: auto;
}
[data-page*=development] .p-career-content__deco {
height: 60px;
}
[data-page*=development] .p-career-content__deco--professional {
top: -50px;
left: -20px;
}
[data-page*=development] .p-career-content__deco--management {
top: -60px;
right: -25px;
}
[data-page*=development] .p-career-content__deco--leader {
bottom: -70px;
}
}
@media screen and (min-width: 992px) {
[data-page*=development] .p-career-content__deco--professional {
top: -80px;
}
[data-page*=development] .p-career-content__deco--management {
top: -60px;
}
}
@media screen and (min-width: 1200px) {
[data-page*=development] .p-career-content__deco {
height: 100px;
}
[data-page*=development] .p-career-content__deco--management {
top: -100px;
}
[data-page*=development] .p-career-content__deco--professional {
top: -120px;
}
[data-page*=development] .p-career-content__deco--leader {
bottom: -100px;
}
}
@media screen and (min-width: 1400px) {
[data-page*=development] .p-career-content__deco--professional {
left: -120px;
}
[data-page*=development] .p-career-content__deco--management {
right: -100px;
}
[data-page*=development] .p-career-content__deco--basic {
right: -100px;
}
} [data-page*="support"] .p-career__title {
position: relative;
z-index: 2;
}
[data-page*="support"] .p-career-content {
position: relative;
z-index: 1;
height: 48vw;
max-height: 690px;
}
[data-page*="support"] .p-career-content::before {
content: "";
position: absolute;
z-index: -1;
top: -8vw;
left: 0;
width: 100%;
height: 100%;
background: url(/img/about/recruit/customer-support/bg-career.png) no-repeat 50% 50% / contain;
}
[data-page*="support"] .p-career-content__body {
width: fit-content;
line-height: 1.7;
margin: 0 auto;
font-size: 1.8rem;
}
@media screen and (min-width: 768px) {
[data-page*="support"] .p-career-content::before {
top: -5vw;
}
}
@media screen and (min-width: 992px) {
[data-page*="support"] .p-career-content::before {
top: -100px;
}
[data-page*="support"] .p-career-content__body {
font-size: 2.0rem;
}
}
@media screen and (min-width: 1200px) {
[data-page*="support"] .p-career-content__body {
font-size: 2.4rem;
}
} .p-personality {
background-size: cover;
background-repeat: no-repeat;
}
.p-personality-content {
position: relative;
width: fit-content;
padding: 20px 30px;
}
.p-personality-content::before,
.p-personality-content::after {
content: "";
position: absolute;
width: 30px;
height: 30px;
border-color: var(--color-yellow);
border-style: solid;
}
.p-personality-content::before {
top: 0;
left: 0;
border-width: 5px 0 0 5px;
}
.p-personality-content::after {
bottom: 0;
right: 0;
border-width: 0 5px 5px 0;
}
.p-personality-content__list {
display: grid;
gap: .5em;
}
.p-personality-content__listItem {
position: relative;
counter-increment: mission-list;
padding: 0 0 0 1.5em;
font-weight: 700;
}
.p-personality-content__listItem::before {
content: counter(mission-list);
position: absolute;
left: 0;
}
@media screen and (min-width: 768px) {
.p-personality-content__listItem {
font-size: 2.2rem;
}
}
@media screen and (min-width: 992px) {
.p-personality-content {
padding: 50px 60px;
}
.p-personality-content::before,
.p-personality-content::after {
width: 60px;
height: 60px;
}
.p-personality-content::before {
border-width: 15px 0 0 15px;
}
.p-personality-content::after {
border-width: 0 15px 15px 0;
}
.p-personality-content__listItem {
font-size: 3.4rem;
}
}
@media (hover: hover){
.p-personality {
background-attachment: fixed;
}
} [data-page*="marketing"] .p-personality {
background-image: url(/img/about/recruit/sales-marketing/bg-personality.webp);
background-position: 50% 0;
}
[data-page*="marketing"] .p-personality-content {
margin: 0 auto;
}
[data-page*="marketing"] .p-personality-content__catch {
font-size: 1.7rem;
font-weight: 500;
}
[data-page*="marketing"] .p-personality-sentence {
width: fit-content;
margin: 0 auto;
padding: 30px 0 0;
}
@media screen and (min-width: 768px) {
[data-page*="marketing"] .p-personality-content__catch {
font-size: 2.4rem;
}
}
@media screen and (min-width: 992px) {
[data-page*="marketing"] .p-personality-content__catch {
font-size: 2.8rem;
}
[data-page*="marketing"] .p-personality-sentence {
padding: 60px 0 0;
font-size: 1.8rem;
}
}
@media screen and (min-width: 1200px) {
[data-page*="marketing"] .p-personality-content__catch {
font-size: 3.2rem;
}
[data-page*="marketing"] .p-personality-sentence {
font-size: 2.0rem;
}
} [data-page*="support"] .p-personality-content {
margin: 2% auto 8%;
}
[data-page*="support"] .p-personality {
background-image: url(/img/about/recruit/customer-support/bg-personality.webp);
background-position: 50% 50%;
} .p-flow {
padding-bottom: 100px;
}
.p-flow-section {
position: relative;
}
.p-flow-section + .p-flow-section {
margin-top: 30px;
}
.p-flow-section::before {
position: absolute;
right: -10px;
top: -5px;
white-space: nowrap;
color: #f1f1f1;
font-family: var(--font-en);
font-size: 2.6rem;
font-weight: 500;
}
.p-flow-section--mid::before {
content: "Mid-career";
}
.p-flow-section--new::before {
content: "New graduate";
}
.p-flow-section__title {
width: fit-content;
padding: .25em 1em;
text-align: center;
font-size: 1.6rem;
}
.p-flow-section__title--mid {
background: var(--color-yellow);
}
.p-flow-section__title--new {
background: var(--color-green);
}
.p-flow-section__figure {
overflow-x: scroll;
text-align: center;
}
.p-flow-section__figureContent {
width: 800px;
}
@media screen and (min-width: 768px) {
.p-flow-section::before {
top: -40px;
font-size: 5.6rem;
}
.p-flow-section + .p-flow-section {
margin-top: 50px;
}
.p-flow-section__title {
font-size: 2.0rem;
}
.p-flow-section__figureContent {
width: 960px;
}
}
@media screen and (min-width: 992px) {
.p-flow {
padding-bottom: 160px;
}
.p-flow-section {
width: fit-content;
margin: 0 auto;
}
.p-flow-section::before {
top: -96px;
font-size: 9.6rem;
}
.p-flow-section + .p-flow-section {
margin-top: 80px;
}
.p-flow-section__figure {
overflow-x: auto;
}
.p-flow-section__figureContent {
width: auto;
}
}
@media screen and (min-width: 1400px) {
.p-flow-section::before {
content: none;
}
.p-flow__deco {
position: absolute;
color: #f1f1f1;
font-size: 9.6rem;
font-weight: 500;
transform: rotate(90deg);
transform-origin: top left;
}
.p-flow__deco::before {
}
.p-flow__deco--new {
top: 30%;
left: 150px;
}
.p-flow__deco--new::before {
content: "New graduate";
}
.p-flow__deco--mid {
top: 4%;
right: -480px;
}
.p-flow__deco--mid::before {
content: "Mid-career";
}
.p-flow__deco--mid {}
}
@media screen and (min-width: 1600px) {
.p-flow__deco {
font-size: 14.0rem;
}
.p-flow__deco--mid {
right: -640px;
}
.p-flow__deco--new {
left: 220px;
}
} [data-page*="support"] .p-flow__deco--new::before {
content: none;
} [data-page*=entry] .p-form {
padding-top: 100px;
}
[data-page*=entry] .p-form-content {
padding: 40px 20px;
}
@media screen and (min-width: 768px) {
[data-page*=entry] .p-form-content {
padding: 80px 60px;
}
}
@media screen and (min-width: 992px) {
[data-page*=entry] .p-form {
padding-top: 160px;
}
} .c-entry-external {
padding: 60px 0 0;
}
.c-entry-external__content {
padding: 20px 0 0;
}
.c-entry-external__button {
max-width: 400px;
margin: 0 auto;
}
.c-entry-external__buttonLink {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding: 10px 30px 10px 20px;
background: #fff;
border: solid 2px #dcddde;
transition: var(--transition);
}
.c-entry-external__buttonLink::before,
.c-entry-external__buttonLink::after {
content: "";
position: absolute;
width: 10px;
height: 8px;
border-color: #dcddde;
border-style: solid;
}
.c-entry-external__buttonLink::before {
right: 13px;
bottom: 13px;
border-width: 0 0 1px 1px;
}
.c-entry-external__buttonLink::after {
right: 10px;
bottom: 16px;
border-width: 1px;
}
.c-entry-external__buttonLogo {
width: 80px;
}
.c-entry-external__buttonText {
width: 100%;
font-size: 1.4rem;
font-weight: 500;
text-align: center;
}
@media screen and (min-width: 768px) {
.c-entry-external__button {
max-width: 480px;
}
.c-entry-external__buttonLink {
justify-content: flex-start;
padding: 15px 30px 15px 20px;
}
.c-entry-external__buttonLink::before {
bottom: calc(50% - 3px);
transform: translateY(50%);
}
.c-entry-external__buttonLink::after {
bottom: 50%;
transform: translateY(50%);
}
.c-entry-external__buttonLogo {
width: 128px;
}
.c-entry-external__buttonText {
width: calc(100% - 128px);
padding: 0 0 0 20px;
font-size: 1.6rem;
text-align: left;
}
}
@media screen and (min-width: 992px) {
.c-entry-external {
padding: 80px 0 0;
}
.c-entry-external__content {
padding: 30px 0 0;
}
.c-entry-external__button {
max-width: 560px;
}
.c-entry-external__buttonText {
font-size: 1.8rem;
}
}
@media (hover: hover) {
.c-entry-external__buttonLink:hover {
border-color: var(--color-green);
}
.c-entry-external__buttonLink:hover::before,
.c-entry-external__buttonLink:hover::after {
border-color: var(--color-green);
}
}