@charset "UTF-8";
/* =====================================================
  1.0 - Foundation
===================================================== */
/*! Oreset.css v1.0.0 | MIT License | https://github.com/hirosiva/Oreset.css */
/*
  # Global
---------------------------------------------- */
/**
 * Default box-sizing
 */
*,
::before,
::after {
  box-sizing: inherit;
}

/**
 * Resetting margins, paddings, and borders
 */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
main,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
}

/**
 * Resetting HTML5 Elements for older browsers
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
  display: block;
}

/*
  # Document & Sections
---------------------------------------------- */
html {
  overflow-y: scroll;
  box-sizing: border-box;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 4.75rem;
}
@media screen and (min-width: 768px) {
  html {
    scroll-padding-top: 7.5rem;
  }
}

body {
  -webkit-overflow-scrolling: touch;
  min-height: 100%;
  text-rendering: optimizeLegibility;
  font: 1em/1.5 sans-serif;
  font-feature-settings: "pkna";
}

/*
  # Grouping content
---------------------------------------------- */
blockquote,
q {
  quotes: none;
}

blockquote:after,
blockquote:before,
q:after,
q:before {
  content: "";
  content: none;
}

hr {
  overflow: visible;
}

ol,
ul {
  list-style: none;
}

pre {
  font-size: 1em;
  font-family: monospace, monospace;
}

/*
  # Text-level semantics
---------------------------------------------- */
a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:active,
a:hover {
  outline-width: 0;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-size: 1em;
  font-family: monospace, monospace;
}

dfn {
  font-style: italic;
}

mark {
  background-color: #ff0;
  color: #000;
}

small {
  font-size: 0.8em;
}

sub,
sup {
  position: relative;
  vertical-align: baseline;
  font-size: 0.75em;
  line-height: 0;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
  # Embedded content
---------------------------------------------- */
audio,
canvas,
progress,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

img,
video {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

svg:not([fill]) {
  fill: currentColor;
}

svg:not(:root) {
  overflow: hidden;
}

/*
  # Tabular data
---------------------------------------------- */
table {
  border-spacing: 0;
  border-collapse: collapse;
}

/*
  # Forms
---------------------------------------------- */
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
}

button,
select {
  text-transform: none;
}

button,
input {
  overflow: visible;
}

button,
[type=button],
[type=reset],
[type=submit],
[role=button] {
  cursor: pointer;
  -webkit-appearance: button;
}

button:-moz-focusring,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  outline: 1px dotted ButtonText;
}

legend {
  display: table;
  max-width: 100%;
  color: inherit;
  white-space: normal;
}

optgroup {
  font-weight: bold;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
  resize: vertical;
}

[type=checkbox],
[type=radio] {
  padding: 0;
}

[type=search] {
  outline-offset: -2px;
  -webkit-appearance: textfield;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

/*
  # Interactive & Misc
---------------------------------------------- */
summary {
  display: list-item;
}

template,
[hidden] {
  display: none;
}

/*
  # Accessibility
---------------------------------------------- */
[disabled],
[aria-disabled=true] {
  cursor: not-allowed;
}

[aria-busy=true] {
  cursor: progress;
}

[aria-controls] {
  cursor: pointer;
}

[aria-hidden=false][hidden] {
  display: initial;
}

[aria-hidden=false][hidden]:not(:focus) {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

:focus:not(:focus-visible),
::before:focus:not(:focus-visible),
::after:focus:not(:focus-visible) {
  outline: none;
}

/**
 * Prettier ignore
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
/**
 * Checker
 */
button:not([type]):after {
  content: "警告： このbuttonにはtype属性がありません";
  background-color: red;
  color: #fff;
}

/*
  Base 
-----------------------------------------------------*/
html {
  font-size: 16px;
}

body {
  font-size: 1rem;
  background: #161413;
  color: #EAE8E7;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif;
  letter-spacing: 0.0625rem;
  overflow-wrap: break-word;
}

a {
  transition-property: color, background-color, border;
  transition-duration: 0.3s;
}

/*
  Animation
-----------------------------------------------------*/
@keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
/* =====================================================
  2.0 - Layout
===================================================== */
/*
  Container
-----------------------------------------------------*/
.l-container {
  max-width: 1240px;
  width: calc(100vw - 1.25rem);
  margin: 0 auto;
}
.l-container.-spFull {
  width: 100%;
}

/*
  main
-----------------------------------------------------*/
.l-main {
  padding-bottom: 7.5rem;
  background: #161413;
}
body:not(.page-top) .l-main {
  padding-top: 3.5rem;
}
@media screen and (min-width: 992px) {
  body:not(.page-top) .l-main {
    padding-top: 5rem;
  }
}
@media screen and (min-width: 768px) {
  .page-products .l-main {
    padding-bottom: 5.125rem;
  }
}
.page-privacy .l-main, .page-contact .l-main {
  padding-bottom: 7.5rem;
}
@media screen and (min-width: 768px) {
  .page-privacy .l-main, .page-contact .l-main {
    padding-bottom: 10rem;
  }
}
.page-about .l-main {
  padding-bottom: 6.25rem;
}
@media screen and (min-width: 768px) {
  .page-about .l-main {
    padding-bottom: 15rem;
  }
}
.page-jbg .l-main {
  padding-bottom: 3.5rem;
}
@media screen and (min-width: 768px) {
  .page-jbg .l-main {
    padding-bottom: 5.3125rem;
  }
}

/*
  Spacer
-----------------------------------------------------*/
.l-spacer {
  padding: 6rem 0;
}
@media screen and (min-width: 768px) {
  .l-spacer {
    padding: 11.25rem 0;
  }
}
.l-spacer.-topAbout {
  padding: 6.5625rem 0 8.125rem;
}
@media screen and (min-width: 768px) {
  .l-spacer.-topAbout {
    padding: 8.125rem 0 9.6875rem;
  }
}
.l-spacer.-topProducts {
  padding: 7.5rem 0 4rem;
}
@media screen and (min-width: 768px) {
  .l-spacer.-topProducts {
    padding: 9.375rem 0 5.25rem;
  }
}
.l-spacer.-topCaseStudies {
  padding: 2.875rem 0 4rem;
}
@media screen and (min-width: 768px) {
  .l-spacer.-topCaseStudies {
    padding: 6.25rem 0 5rem;
  }
}
.l-spacer.-topJournal {
  padding: 7.625rem 0 8.125rem;
}
@media screen and (min-width: 768px) {
  .l-spacer.-topJournal {
    padding: 10.8125rem 0 12.5rem;
  }
}
.l-spacer.-topJoinUs {
  padding: 7.5rem 0 4rem;
}
@media screen and (min-width: 768px) {
  .l-spacer.-topJoinUs {
    padding: 9.0625rem 0 5rem;
  }
}
.l-spacer.-topContact {
  padding: 7.5rem 0 4rem;
}
@media screen and (min-width: 768px) {
  .l-spacer.-topContact {
    padding: 10.75rem 0 10rem;
  }
}
.l-spacer.-subContact {
  padding: 7.5rem 0 4rem;
}
@media screen and (min-width: 768px) {
  .l-spacer.-subContact {
    padding: 6.6875rem 0 5rem;
  }
}
.l-spacer.-subCommon {
  padding: 2.625rem 1rem 4.625rem;
}
@media screen and (min-width: 768px) {
  .l-spacer.-subCommon {
    padding: 6.875rem 8.125rem 7.5rem;
  }
}
.l-spacer.-subPhases {
  padding: 2.5rem 0 4.625rem;
}
@media screen and (min-width: 768px) {
  .l-spacer.-subPhases {
    padding: 6.875rem 0 2.3125rem;
  }
}
.l-spacer.-approach {
  padding: 2.5rem 0 2.5rem;
}
@media screen and (min-width: 768px) {
  .l-spacer.-approach {
    padding: 6.875rem 0 4.6875rem;
  }
}
.l-spacer.-subJbg {
  padding: 3.375rem 0 4rem;
}
@media screen and (min-width: 768px) {
  .l-spacer.-subJbg {
    padding: 6rem 0 8.125rem;
  }
}

/* =====================================================
  3.0 - Object
===================================================== */
/*
  3.1 - Component
-----------------------------------------------------*/
.sectionInner {
  border-radius: 0.75rem;
}
.-black .sectionInner {
  background-color: #222222;
}
.-white .sectionInner {
  background-color: #fff;
}
.-red .sectionInner {
  background-color: #C3283A;
}
.-white + .-white .sectionInner {
  border-radius: 0 0 0.75rem 0.75rem;
}
.-white:has(+ .-white) .sectionInner {
  border-radius: 0.75rem 0.75rem 0 0;
  margin-bottom: -0.5px;
}
.-white + .-white:has(+ .-white) .sectionInner {
  border-radius: 0;
  margin-bottom: -0.5px;
}

/*
  Card
*/
.c-card {
  display: flex;
  position: relative;
  flex: 1 1 auto;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.c-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  order: 1;
}
.c-card__thumbnail {
  order: 0;
}
.c-card__image {
  width: 100%;
}

/*
  Button
*/
.c-button {
  display: block;
  background-color: transparent;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
}

/*
  form
*/
.c-form__group {
  display: flex;
  flex-direction: column;
}
.c-form__group + .c-form__group {
  margin-top: 2.75rem;
}
@media screen and (min-width: 768px) {
  .c-form__group + .c-form__group {
    margin-top: 4.375rem;
  }
}
.c-form__label {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.8125rem;
}
@media screen and (min-width: 768px) {
  .c-form__label {
    font-size: 1.125rem;
  }
}
.c-form__error {
  color: #FF0000;
  font-size: 0.75rem;
  margin-top: 0.5rem;
}
@media screen and (min-width: 768px) {
  .c-form__error {
    font-size: 0.875rem;
    margin-top: 1rem;
  }
}

*::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

.c-input {
  font-size: 1rem;
  padding: 0.6875rem;
  background: #F4F4F4;
  border: 1px solid #CCCCCC;
  border-radius: 0.625rem;
}
@media screen and (min-width: 768px) {
  .c-input {
    font-size: 1.125rem;
    padding: 1.5rem 1.5rem;
  }
}

.c-textarea {
  font-size: 1rem;
  padding: 0.6875rem;
  background: #F4F4F4;
  border: 1px solid #CCCCCC;
  border-radius: 0.625rem;
  height: 12.5rem;
}
@media screen and (min-width: 768px) {
  .c-textarea {
    font-size: 1.125rem;
    padding: 1.5rem 1.5rem;
    height: 15rem;
  }
}

.c-selectBox {
  display: inline-block;
  width: 100%;
  appearance: none;
  font-size: 1rem;
  padding: 0.6875rem;
  background: #F4F4F4;
  border: 1px solid #CCCCCC;
  border-radius: 0.625rem;
}
@media screen and (min-width: 768px) {
  .c-selectBox {
    font-size: 1.125rem;
    padding: 1.5rem 1.5rem;
  }
}
.c-selectBox:invalid {
  color: rgba(0, 0, 0, 0.3);
}
.c-selectBox.-selected {
  color: inherit;
}
.c-selectBoxWrap {
  position: relative;
}
.c-selectBoxWrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  right: 0.75rem;
  width: 1.375rem;
  height: 0.5625rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%228.4%22%20viewBox%3D%220%200%2022%208.4%22%3E%3Cpath%20id%3D%22a%22%20data-name%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2%2081%22%20d%3D%22M9.786.927a2%2C2%2C0%2C0%2C1%2C2.428%2C0L17.3%2C4.81A2%2C2%2C0%2C0%2C1%2C16.086%2C8.4H5.914A2%2C2%2C0%2C0%2C1%2C4.7%2C4.81Z%22%20transform%3D%22translate(22%208.4)%20rotate(180)%22%20fill%3D%22%23ccc%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.c-checkbox {
  display: none;
}
@media screen and (min-width: 768px) {
  .c-checkboxWrap {
    cursor: pointer;
  }
}
.c-checkbox__text {
  font-weight: 500;
  position: relative;
  font-size: 1rem;
}
@media screen and (min-width: 768px) {
  .c-checkbox__text {
    font-size: 1.125rem;
  }
}
.c-checkbox__text::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid #CCCCCC;
  border-radius: 0.125rem;
  vertical-align: middle;
  margin-right: 0.5rem;
}
@media screen and (min-width: 768px) {
  .c-checkbox__text::before {
    width: 1.75rem;
    height: 1.75rem;
  }
}
.c-checkbox__text::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 0.75rem;
  height: 0.375rem;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto 0 auto 0.375rem;
  border-bottom: 0.125rem solid #fff;
  border-left: 0.125rem solid #fff;
  transform: rotate(-45deg);
  transition: 0.3s;
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .c-checkbox__text::after {
    width: 1rem;
    height: 0.625rem;
  }
}
.c-checkbox:checked + .c-checkbox__text::before, .c-checkbox:checked + * .c-checkbox__text::before {
  background-color: #222222;
  border-color: #222222;
}
.c-checkbox:checked + .c-checkbox__text::after, .c-checkbox:checked + * .c-checkbox__text::after {
  opacity: 1;
}
.c-checkbox__link {
  color: #222222;
  text-decoration: underline;
  transition: 0.3s;
}
@media screen and (min-width: 768px) {
  .c-checkbox__link:hover {
    opacity: 0.7;
  }
}

/*
  3.2 - Project
-----------------------------------------------------*/
.header {
  height: 3.5rem;
  position: fixed;
  display: flex;
  padding: 0.875rem 1rem;
  gap: 1rem;
  z-index: 1000;
  align-items: center;
}
@media screen and (min-width: 992px) {
  .header {
    height: 5rem;
    padding: 1.3125rem 1.5rem;
    gap: 1.5rem;
  }
}

.header__logo__link {
  width: 1.5rem;
  height: 1.5rem;
}

.header__arrow {
  padding: 0.25rem 1rem;
  border-radius: 50px;
  border: 1px solid #4D4D4D;
  display: flex;
  align-items: center;
  background: #161413;
  box-shadow: 0 0 12px 0 transparent;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}
.header__arrow img {
  display: block;
}
.header__arrow:hover {
  box-shadow: 0 0 12px 0 rgba(77, 77, 77, 0.5);
}

.header__arrow__text {
  pointer-events: none;
  display: flex;
  align-items: center;
  color: #FFF;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5; /* 24px */
  letter-spacing: 0.32px;
  padding-left: 1rem;
  padding-right: 0.375rem;
  gap: 8px;
  position: relative;
}
.header__arrow__text span {
  display: block;
  width: 2px;
  height: 14px;
  background-color: #A8A29E;
}
.header__arrow__text::before {
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
}
.header__arrow__text.--about::before {
  background-color: rgba(234, 232, 231, 0.2);
}
.header__arrow__text.--tech::before {
  background-color: #1699C4;
}
.header__arrow__text.--design::before {
  background-color: #ED630D;
}
.header__arrow__text.--other::before {
  background-color: #25AB4B;
}

.header__menu {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
  display: flex;
}
.header__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header__fixed {
  position: sticky;
  padding: 0.875rem 1rem;
  display: flex;
  align-items: center;
  z-index: 2001;
  width: 100%;
}
@media screen and (min-width: 992px) {
  .header__fixed {
    padding: 1.3125rem 1.5rem;
    max-width: 840px;
  }
}

.header__logo {
  width: 7.375rem;
}

.header__close {
  width: 1.125rem;
  margin-left: auto;
}
@media screen and (min-width: 992px) {
  .header__close {
    width: 22px;
  }
}

.header__nav {
  width: 100%;
  background: #161413;
}
@media screen and (min-width: 992px) {
  .header__nav {
    width: fit-content;
    max-width: 840px;
    height: 100vh;
    overflow-y: auto;
  }
}

.header__list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1.5rem 1.25rem;
}
@media screen and (min-width: 992px) {
  .header__list {
    gap: 4rem;
    padding: 3.5rem 3.5625rem;
  }
}

.header__list__item {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.header__list__category {
  padding: 0.375rem 1.25rem 0.5rem 2.375rem;
  color: #EAE8E7;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.4; /* 28px */
  letter-spacing: 0.4px;
  border-radius: 1.875rem;
  position: relative;
  text-decoration: none;
  width: fit-content;
  box-shadow: 0 0 12px 0 transparent;
  transition: box-shadow 0.3s ease;
}
.header__list__category::before {
  position: absolute;
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  left: 1.375rem;
  border-radius: 50%;
}
@media screen and (min-width: 992px) {
  .header__list__category {
    padding: 0.375rem 1.75rem 0.375rem 2.375rem;
    font-size: 18px;
    letter-spacing: 0.36px;
  }
}
.header__list__category.--tech {
  border: 1px solid rgba(22, 153, 196, 0.5);
}
.header__list__category.--tech::before {
  background-color: #1699C4;
}
.header__list__category.--tech.is-active {
  background-color: rgba(22, 153, 196, 0.5);
}
.header__list__category.--tech:hover {
  box-shadow: 0 0 12px 0 rgba(22, 153, 196, 0.5);
}
.header__list__category.--design {
  border: 1px solid rgba(237, 99, 13, 0.5);
}
.header__list__category.--design::before {
  background-color: #ED630D;
}
.header__list__category.--design.is-active {
  background-color: rgba(237, 99, 13, 0.5);
}
.header__list__category.--design:hover {
  box-shadow: 0 0 12px 0 rgba(237, 99, 13, 0.5);
}
.header__list__category.--other {
  border: 1px solid rgba(37, 171, 75, 0.5);
}
.header__list__category.--other::before {
  background-color: #25AB4B;
}
.header__list__category.--other.is-active {
  background-color: rgba(37, 171, 75, 0.5);
}
.header__list__category.--other:hover {
  box-shadow: 0 0 12px 0 rgba(37, 171, 75, 0.5);
}
.header__list__category.--about {
  border: 1px solid rgba(234, 232, 231, 0.2);
}
.header__list__category.--about::before {
  background-color: #EAE8E7;
}
.header__list__category.--about.is-active {
  background-color: rgba(234, 232, 231, 0.2);
}
.header__list__category.--about:hover {
  box-shadow: 0 0 12px 0 rgba(234, 232, 231, 0.2);
}

.header__list__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 0.5rem;
}
@media screen and (min-width: 992px) {
  .header__list__tags {
    gap: 0.625rem;
  }
}

.header__list__tags__item {
  padding: 0.25rem 1rem;
  border-radius: 2.625rem;
  color: #EAE8E7;
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.26px;
  text-decoration: none;
  transition: box-shadow 0.3s, background-color 0.3s ease; /* 追加：背景色をふわっと変える */
  box-shadow: 0 0 12px 0 transparent;
}
@media screen and (min-width: 992px) {
  .header__list__tags__item {
    padding: 0.625rem 0.875rem;
    font-size: 0.75rem;
    letter-spacing: 0.24px;
    line-height: 1.2;
  }
}

/* 各タグのアクティブ時の背景色指定 */
.header__list__tags.--tech .header__list__tags__item {
  border: 1px solid rgba(22, 153, 196, 0.5);
}
.header__list__tags.--tech .header__list__tags__item.is-active {
  background-color: rgba(22, 153, 196, 0.5);
}
.header__list__tags.--tech .header__list__tags__item:hover {
  box-shadow: 0 0 12px 0 rgba(22, 153, 196, 0.5);
}

.header__list__tags.--design .header__list__tags__item {
  border: 1px solid rgba(237, 99, 13, 0.5);
}
.header__list__tags.--design .header__list__tags__item.is-active {
  background-color: rgba(237, 99, 13, 0.5);
}
.header__list__tags.--design .header__list__tags__item:hover {
  box-shadow: 0 0 12px 0 rgba(237, 99, 13, 0.5);
}

.header__list__tags.--other .header__list__tags__item {
  border: 1px solid rgba(37, 171, 75, 0.5);
}
.header__list__tags.--other .header__list__tags__item.is-active {
  background-color: rgba(37, 171, 75, 0.5);
}
.header__list__tags.--other .header__list__tags__item:hover {
  box-shadow: 0 0 12px 0 rgba(37, 171, 75, 0.5);
}

.header__list__tags.--about .header__list__tags__item {
  border: 1px solid rgba(234, 232, 231, 0.2);
}
.header__list__tags.--about .header__list__tags__item.is-active {
  background-color: rgba(234, 232, 231, 0.2);
}
.header__list__tags.--about .header__list__tags__item:hover {
  box-shadow: 0 0 12px 0 rgba(234, 232, 231, 0.2);
}

.header__list__tags.--tech .header__list__tags__item {
  border: 1px solid rgba(22, 153, 196, 0.5);
}

.header__list__tags.--design .header__list__tags__item {
  border: 1px solid rgba(237, 99, 13, 0.5);
}

.header__list__tags.--other .header__list__tags__item {
  border: 1px solid rgba(37, 171, 75, 0.5);
}

.header__list__tags.--about .header__list__tags__item {
  border: 1px solid rgba(234, 232, 231, 0.2);
}

body.is-fixed {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.p-footer__copyright {
  color: #A8A29E;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2; /* 24px */
  letter-spacing: 0.24px;
  text-align: right;
  padding: 1rem 1.25rem;
  background-color: #161413;
}
@media screen and (min-width: 992px) {
  .p-footer__copyright {
    text-align: center;
    padding: 1rem 0;
  }
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  position: relative;
}
.card:hover .card__title {
  opacity: 0.8;
}
@media screen and (min-width: 992px) {
  .card {
    min-height: 15.875rem;
  }
}

.card__link {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.card__title {
  font-family: "Shippori Antique B1", sans-serif;
  color: #EAE8E7;
  font-size: 2.25rem;
  letter-spacing: 0.72px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.96px;
  display: -webkit-box; /* 必須 */
  -webkit-box-orient: vertical; /* 必須 */
  -webkit-line-clamp: 3; /* 行数を制限 */
  overflow: hidden; /* はみ出た部分を非表示 */
  transition: opacity 0.3s ease;
}
@media screen and (min-width: 992px) {
  .card__title {
    font-size: 3rem;
    letter-spacing: 0.96px;
  }
}

.card__bottom {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-direction: column;
  margin-top: auto;
  padding-top: 1.5rem;
}
@media screen and (min-width: 992px) {
  .card__bottom {
    gap: 1.5rem;
    flex-direction: row;
    align-items: flex-end;
  }
}

.card__tags {
  margin-right: auto;
  flex-shrink: 0;
  width: 11.6875rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  position: relative;
  z-index: 2;
}

.card__tags__item {
  padding: 0.625rem 0.875rem;
  color: #EAE8E7;
  text-shadow: 0 0 70.273px rgba(0, 0, 0, 0.25);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.24px;
  border-radius: 1.875rem;
  text-align: center;
  position: relative;
  box-shadow: 0 0 12px 0 transparent;
  transition: box-shadow 0.3s ease;
  text-decoration: none;
}
.card__tags__item.--main {
  padding: 0.625rem 0.875rem 0.625rem 1.5rem;
}
.card__tags__item.--main::before {
  position: absolute;
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: #EAE8E7;
  top: 50%;
  transform: translateY(-50%);
  left: 0.75rem;
}
.card__tags__item.--tech {
  background-color: #1699C4;
}
.card__tags__item.--tech:hover {
  box-shadow: 0 0 12px 0 #1699c4;
}
.card__tags__item.--design {
  background-color: #ED630D;
}
.card__tags__item.--design:hover {
  box-shadow: 0 0 12px 0 #ed630d;
}
.card__tags__item.--other {
  background-color: #25AB4B;
}
.card__tags__item.--other:hover {
  box-shadow: 0 0 12px 0 #25ab4b;
}
.card__tags__item.--about {
  background-color: rgba(234, 232, 231, 0.2);
}
.card__tags__item.--about:hover {
  box-shadow: 0 0 12px 0 rgba(234, 232, 231, 0.5);
}

.card__text {
  overflow: hidden;
  color: #a8a29e;
  text-overflow: ellipsis;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6; /* 20.8px */
  letter-spacing: 0.26px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  word-break: break-all;
  overflow-wrap: anywhere;
}

.card__text__title {
  color: #FFF;
  font-family: "Shippori Antique B1", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4; /* 44.8px */
  letter-spacing: 0.48px;
  margin-bottom: 0.5rem;
  word-break: break-all;
  overflow-wrap: anywhere;
}
@media screen and (min-width: 992px) {
  .card__text__title {
    font-size: 2rem;
    letter-spacing: 0.64px;
    margin-bottom: 0.625rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
}

/*
  More Button
*/
.p-button {
  position: relative;
  padding: 0.25rem 0;
  background-color: transparent;
  color: #222222;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  border: 1px solid #222222;
  border-radius: 50px;
  width: auto;
  min-width: 124px;
  margin: 0 auto;
  display: inline-block;
  transition: color 0.2s, border-color 0.2s;
}
@media screen and (min-width: 768px) {
  .p-button {
    font-size: 1rem;
    min-width: 160px;
    padding: 0.5rem 0;
  }
}
.p-button.-large {
  font-size: 1rem;
  min-width: 186px;
  padding: 0.75rem 0;
}
@media screen and (min-width: 768px) {
  .p-button.-large {
    font-size: 1.25rem;
    min-width: 320px;
    padding: 1rem 0;
  }
}
@media screen and (min-width: 768px) {
  .p-button.-topLarge {
    font-size: 1.25rem;
    min-width: 320px;
    padding: 1rem 0;
  }
}
.p-button.-type2 {
  min-width: 230px;
  padding: 0.375rem 0;
  font-size: 0.75rem;
}
@media screen and (min-width: 768px) {
  .p-button.-type2 {
    font-size: 1.25rem;
    min-width: 400px;
    padding: 1rem 0;
  }
}
.p-button.-transparent {
  border-color: #161413;
  mix-blend-mode: screen;
  transform: translate3d(0, 0, 0); /* Safari対応 */
}
.p-button.-transparent .p-button__text {
  color: #161413;
}
.p-button.-transparent .p-button__text::before, .p-button.-transparent .p-button__text::after {
  background-color: #161413;
}
.p-button.-transparent::before {
  background-color: #161413;
}
.p-button.-transparent:hover, .p-button.-transparent:focus {
  background-color: #000000;
}
.p-button.-transparent:hover .p-button__text, .p-button.-transparent:focus .p-button__text {
  color: #161413;
}
@media screen and (min-width: 1200px) {
  .p-button.-xl-transparent {
    border-color: #161413;
    mix-blend-mode: screen;
    transform: translate3d(0, 0, 0); /* Safari対応 */
  }
  .p-button.-xl-transparent .p-button__text {
    color: #161413;
  }
  .p-button.-xl-transparent .p-button__text::before, .p-button.-xl-transparent .p-button__text::after {
    background-color: #161413;
  }
  .p-button.-xl-transparent::before {
    background-color: #161413;
  }
  .p-button.-xl-transparent:hover, .p-button.-xl-transparent:focus {
    background-color: #000000;
  }
  .p-button.-xl-transparent:hover .p-button__text, .p-button.-xl-transparent:focus .p-button__text {
    color: #161413;
  }
}
.p-button__text {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #222222;
  z-index: 1;
  padding: 0 0.9375rem;
}
.p-button::before {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50px;
  margin: auto 0;
  content: "";
  width: 0;
  height: 100%;
  transition: all 0.2s;
  opacity: 0;
  z-index: 10;
  mix-blend-mode: difference;
  transform: translate3d(0, 0, 0); /* Safari対応 */
  background-color: #fff;
}
.p-button:hover, .p-button:focus {
  color: #161413;
  border-color: transparent;
}
.p-button:hover::before, .p-button:focus::before {
  width: 100%;
  opacity: 1;
}

.p-button__text {
  display: flex;
  justify-content: center;
  align-items: center;
}
.p-button__text::before, .p-button__text::after {
  content: "";
  position: absolute;
  background-color: #222222;
  transition: all 0.2s;
}
.p-button__text::before {
  right: -18px;
  width: 32px;
  height: 2px;
}
.p-button__text::after {
  right: -24px;
  width: 8px;
  height: 2px;
  transform: translateX(-50%);
}

.p-button:hover .p-button__text::before {
  right: -22px;
}
.p-button:hover .p-button__text::after {
  rotate: 24deg;
  right: -26px;
}

.p-pageHeading__intro {
  margin-bottom: 0.625rem;
  text-align: center;
  font-family: "Shippori Antique B1", sans-serif;
  font-weight: bold;
  font-size: 0.9375rem;
  font-weight: bold;
  line-height: 1.2;
  color: #fff;
}
@media screen and (min-width: 768px) {
  .p-pageHeading__intro {
    font-size: 2.25rem;
    margin-bottom: 1.875rem;
  }
}
.p-pageHeading__title {
  font-family: "Shippori Antique B1", sans-serif;
  font-weight: bold;
  margin-bottom: 0.0625rem;
  text-align: center;
  font-size: 2.5rem;
  letter-spacing: 0.125rem;
  color: #fff;
}
@media screen and (min-width: 768px) {
  .p-pageHeading__title {
    font-size: 3.75rem;
  }
}
.p-pageHeading__title.-black {
  color: #212121;
}
.p-pageHeading__title small {
  font-size: 0.6667em;
}
.p-pageHeading__title small.-letterspace01 {
  margin: 0 0.5em;
}
@media screen and (min-width: 768px) {
  .p-pageHeading__title small.-letterspace01 {
    margin: 0 0.4em;
  }
}
.p-pageHeading__title small.-letterspace02 {
  margin-right: 0.3em;
}
@media screen and (min-width: 768px) {
  .p-pageHeading__title small.-letterspace02 {
    margin-right: 0.4em;
  }
}

.p-join {
  margin-top: 2.5rem;
}
@media screen and (min-width: 768px) {
  .p-join {
    margin-top: 5rem;
  }
}

.p-join__contents {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.p-join__title {
  color: #fff;
  font-family: "Shippori Antique B1", sans-serif;
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}
@media screen and (min-width: 768px) {
  .p-join__title {
    font-size: 3rem;
    margin-bottom: 1.5rem;
  }
}

.p-join__wrapper {
  background-color: #fff;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  gap: 2.5rem;
}
@media screen and (min-width: 768px) {
  .p-join__wrapper {
    padding: 3.75rem;
    border-radius: 10px;
    gap: 5rem;
  }
}

.p-join__list__item {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #ccc;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 992px) {
  .p-join__list__item {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

.p-join__list__item__btn {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}

@media screen and (min-width: 992px) {
  .p-join__list__item .-type3 {
    margin-left: auto;
    margin-right: 20px;
  }
}

.p-join__category {
  display: flex;
  margin-bottom: 1.5rem;
  gap: 0.75rem;
  flex-direction: column;
}
.p-join__category dl {
  display: flex;
  align-items: center;
}
.p-join__category dd {
  display: flex;
  word-break: break-word;
}
.p-join__category dd span + span {
  margin-left: 0.5rem;
}
@media screen and (min-width: 768px) {
  .p-join__category {
    flex-direction: row;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }
}
@media screen and (min-width: 992px) {
  .p-join__category {
    margin-bottom: 0;
  }
}

.p-join__category__group {
  display: flex;
  gap: 0.75rem;
  flex-direction: column;
  flex-shrink: 0;
}
@media screen and (min-width: 768px) {
  .p-join__category__group {
    flex-direction: row;
    gap: 1.5rem;
  }
}

.p-join__occupation {
  color: #222;
  font-style: normal;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 0.5rem;
  font-family: "Shippori Antique B1", sans-serif;
}
@media screen and (min-width: 768px) {
  .p-join__occupation {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
}

.p-join__list__item__category {
  font-weight: 500;
  line-height: 1.5;
  font-size: 1.25rem;
  margin-bottom: 0.375rem;
}
@media screen and (min-width: 768px) {
  .p-join__list__item__category {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
  }
}

.p-join__category {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
}
.p-join__category span {
  padding: 0.25rem 1rem;
  border-radius: 900px;
  border: 1px solid #ccc;
  display: block;
}

.p-join__caution {
  color: rgba(34, 34, 34, 0.5);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  margin-top: -1.75rem;
}
@media screen and (min-width: 768px) {
  .p-join__caution {
    text-align: right;
    margin-top: -3.5rem;
  }
}

.p-join__filter {
  display: flex;
  gap: 1.25rem;
  flex-direction: column;
  padding-top: 2rem;
}
@media screen and (min-width: 768px) {
  .p-join__filter {
    justify-content: center;
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    gap: 2.5rem;
    padding-top: 2.5rem;
  }
}

.p-join__filter__group {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .p-join__filter__group {
    width: calc((100% - 80px) / 3);
  }
}

.p-join__filter__caption {
  margin-top: 0.5rem;
  font-size: 0.75rem;
}
.p-join__filter__caption small {
  font: inherit;
}

.p-join__label {
  color: #fff;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.9px;
  margin-bottom: 0.5rem;
}

.p-join__select {
  padding: 1.5rem;
  border-radius: 10px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("/img/triangle.svg");
  background-repeat: no-repeat;
  background-position: right 1.5rem center;
  background-size: 1.375rem 0.75rem;
  padding-right: 1.875rem;
}

select:has(option:checked[value=""]) {
  color: #aaa;
}

.p-join__actively {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 1rem;
  border-radius: 900px;
  background: linear-gradient(165deg, rgba(255, 0, 13, 0.1) 9.21%, rgba(255, 85, 0, 0.1) 89.6%), #fff;
  margin-bottom: 1rem;
  display: inline-flex;
  /* (オプション) 背景がテキストサイズに合わない場合は調整 */
}
.p-join__actively img {
  width: 0.875rem;
}
.p-join__actively span {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  background: linear-gradient(180deg, #ff000d 0%, #ff5500 100%);
  -webkit-background-clip: text; /* SafariなどのWebKit系ブラウザ用 */
  background-clip: text;
  color: transparent;
}

/* ここから詳細ページ */
.p-join__intro {
  color: #fff;
}

.p-join__categorylist {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
@media screen and (min-width: 768px) {
  .p-join__categorylist {
    gap: 1rem;
  }
}

.p-join__categorylist > li > a {
  /* .p-join__category span */
  padding: 0.25rem 1rem;
  border-radius: 900px;
  border: 1px solid #ccc;
  display: block;
  color: #ccc;
  text-decoration: none;
}

.p-join__intro__message {
  margin-top: 1.875rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .p-join__intro__message {
    margin-top: 3.75rem;
    font-size: 1.25rem;
    text-align: center;
  }
}

.p-join__intro__btn {
  margin-top: 2.5rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-join__intro__btn {
    margin-top: 4.375rem;
  }
}

.p-join__btn, .p-join__btn--back, .p-join__btn--apply {
  display: inline-flex;
  justify-content: center;
  background: #fff;
  color: #222222;
  font-weight: 700;
  min-width: 15rem;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.05em;
  border: 0.125rem solid #fff;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.4);
}
@media screen and (min-width: 768px) {
  .p-join__btn, .p-join__btn--back, .p-join__btn--apply {
    min-width: 20rem;
    font-size: 1.25rem;
  }
}
.p-join__btn:hover, .p-join__btn--back:hover, .p-join__btn--apply:hover {
  background: #222222;
  color: #fff;
}

.p-join__btn--apply {
  background: #C3283A;
  color: #fff;
  border-color: #C3283A;
}
.p-join__btn--apply:hover {
  background: #fff;
  color: #C3283A;
}

.p-join__btn--back {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.p-join__btn--back:hover {
  background: #fff;
  color: #222222;
}

.p-join__article__contents {
  margin-bottom: 2.5rem;
  font-family: "Shippori Antique B1", sans-serif;
  font-size: 1.125rem;
  word-break: normal;
}
@media screen and (min-width: 768px) {
  .p-join__article__contents {
    margin-bottom: 5rem;
    font-size: 1.75rem;
  }
}

.p-join__article__field {
  /* margin-top: pxToRem(40px); */
}
@media screen and (min-width: 768px) {
  .p-join__article__field {
    /* margin-top: pxToRem(80px); */
  }
}

.p-join__field__group {
  padding-bottom: 0.75rem;
  border-bottom: 0.0625rem solid #DDD;
}
@media screen and (min-width: 768px) {
  .p-join__field__group {
    display: flex;
    align-items: flex-start;
    padding-bottom: 1.5rem;
  }
}
.p-join__field__group + .p-join__field__group {
  margin-top: 0.75rem;
}
@media screen and (min-width: 768px) {
  .p-join__field__group + .p-join__field__group {
    margin-top: 1.5rem;
  }
}

.p-join__field__head {
  flex-shrink: 0;
  margin: 0 0 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .p-join__field__head {
    margin: 0 calc(5rem - 2em) 0 0;
    min-width: 6em;
    font-size: 1rem;
  }
}

.p-join__field__body {
  font-size: 0.875rem;
  line-height: 1.6;
  word-break: normal;
}
@media screen and (min-width: 768px) {
  .p-join__field__body {
    font-size: 1rem;
  }
}
.p-join__field__body p {
  padding-left: 1em;
  text-indent: -1em;
}

.p-join__field__address {
  font-style: normal;
}

.p-join__flow {
  color: #fff;
}
@media screen and (min-width: 768px) {
  .p-join__flow {
    padding-top: 2.5rem;
  }
}

.p-join__flow__title {
  margin-bottom: 1.25rem;
  color: #fff;
  font-family: "Shippori Antique B1", sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-join__flow__title {
    margin-bottom: 2.5rem;
    font-size: 3.125rem;
  }
}

.p-join__flow__list {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
}
@media screen and (min-width: 992px) {
  .p-join__flow__list {
    flex-direction: row;
    gap: 2rem;
  }
}
.p-join__flow__list > li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1/1;
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-join__flow__list > li {
    max-width: 24.5rem;
  }
}
@media screen and (min-width: 992px) {
  .p-join__flow__list > li {
    width: calc(33.3333333333% - 2rem);
  }
}
.p-join__flow__list > li::before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22400%22%20viewBox%3D%220%200%20400%20400%22%3E%20%3Cpath%20id%3D%22p_49863%22%20data-name%3D%22p%2049863%22%20d%3D%22M200%2C0C334.811.8%2C400%2C89.543%2C400%2C200S333.848%2C399.6%2C200%2C400C61.479%2C400.253%2C0%2C310.457%2C0%2C200S64.9.286%2C200%2C0Z%22%20transform%3D%22translate(0)%22%20fill%3D%22rgba(255%2C255%2C255%2C1)%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.1;
  pointer-events: none;
}

.p-join__flow__step {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 5.625rem;
  height: 5.625rem;
  color: #2B153E;
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  line-height: 1;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22400%22%20viewBox%3D%220%200%20400%20400%22%3E%20%3Cpath%20id%3D%22p_49863%22%20data-name%3D%22p%2049863%22%20d%3D%22M200%2C0C334.811.8%2C400%2C89.543%2C400%2C200S333.848%2C399.6%2C200%2C400C61.479%2C400.253%2C0%2C310.457%2C0%2C200S64.9.286%2C200%2C0Z%22%20transform%3D%22translate(0)%22%20fill%3D%22rgba(255%2C255%2C255%2C1)%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (min-width: 992px) {
  .p-join__flow__step {
    width: 5rem;
    height: 5rem;
    font-size: 0.875rem;
  }
}
.p-join__flow__step em {
  display: block;
  font-style: normal;
  font-size: 2.5rem;
}
@media screen and (min-width: 992px) {
  .p-join__flow__step em {
    font-size: 2rem;
  }
}

.p-join__flow__inner {
  text-align: center;
}

.p-join__flow__inner__title {
  margin: 0 0 0.75rem;
  font-family: "Shippori Antique B1", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .p-join__flow__inner__title {
    font-size: 2rem;
  }
}

.p-join__flow__inner__text {
  font-size: 1rem;
  line-height: 1.6;
}
@media screen and (min-width: 992px) {
  .p-join__flow__inner__text {
    min-height: 3lh; /* 3行分 */
    font-size: 1rem;
  }
}

.p-join__flow__btn {
  padding: 3.75rem 0;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-join__flow__btn {
    padding: 7.5rem 0 5rem;
  }
}

.p-join__flow__btn__back {
  margin-top: 2.5rem;
}

.p-join__notfound {
  margin-top: 1.5rem;
}
.p-join__notfound.--white {
  margin-top: 0;
  color: #fff;
  display: none;
  text-align: center;
}
.p-join__notfound.--white a {
  color: #fff;
}

.p-join__btns {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  .p-join__btns {
    flex-direction: row;
    gap: 2rem;
  }
}

.p-join__back {
  margin-top: 3.75rem;
}

.p-join__wrapper {
  color: #222;
}

.jbg__about__title {
  color: #EAE8E7;
  font-family: "Shippori Antique B1", sans-serif;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4; /* 78.4px */
  letter-spacing: 0.72px;
  margin-bottom: 1.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  word-break: break-all;
  overflow-wrap: anywhere;
}
@media screen and (min-width: 992px) {
  .jbg__about__title {
    letter-spacing: 1.12px;
    margin-top: 1.25rem;
    margin-bottom: 6.25rem;
    padding-left: 3rem;
    font-size: 3.5rem;
  }
}

.contents__wrapper {
  display: flex;
  padding-left: 1rem;
  padding-right: 1rem;
  flex-direction: column;
  gap: 3.125rem;
  padding-bottom: 4rem;
}
@media (min-width: 1440px) {
  .contents__wrapper {
    gap: 15.2976190476vw;
    padding-bottom: 9.5625rem;
    padding-left: 3rem;
    flex-direction: row;
    position: relative;
  }
}

.contents__sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex-shrink: 0;
}
@media (min-width: 1440px) {
  .contents__sidebar {
    width: 184px;
    flex-shrink: 0;
    position: absolute;
  }
}

.contents__update__date {
  color: #a8a29e;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2; /* 26px */
  letter-spacing: 0.26px;
}

.contents__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
@media (min-width: 1440px) {
  .contents__tags {
    width: 11.6875rem;
  }
}

.contents__tags__item {
  padding: 0.625rem 0.875rem;
  color: #EAE8E7;
  text-shadow: 0 0 70.273px rgba(0, 0, 0, 0.25);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.24px;
  border-radius: 1.875rem;
  background: rgba(234, 232, 231, 0.2);
  text-align: center;
  text-decoration: none;
}
.contents__tags__item.--tech {
  background-color: #1699C4;
}
.contents__tags__item.--design {
  background-color: #ED630D;
}
.contents__tags__item.--other {
  background-color: #25AB4B;
}
.contents__tags__item.--main {
  padding: 0.625rem 0.875rem 0.625rem 1.5rem;
  position: relative;
}
.contents__tags__item.--main::before {
  position: absolute;
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: #EAE8E7;
  top: 50%;
  transform: translateY(-50%);
  left: 0.75rem;
}

.contents__wrapper__item {
  width: 100%;
}
.contents__wrapper__item p {
  color: #EAE8E7;
  font-size: 1rem;
  font-style: normal;
  font-weight: 300;
  line-height: 2; /* 32px */
  letter-spacing: 0.32px;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.contents__wrapper__item p + p {
  margin-top: 2.5rem;
}
.contents__wrapper__item figure,
.contents__wrapper__item .wp-block-image figure {
  margin: 2.5rem 0;
}
.contents__wrapper__item figure figcaption,
.contents__wrapper__item .wp-block-image figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.75rem;
}
.contents__wrapper__item figure.aligncenter,
.contents__wrapper__item .wp-block-image figure.aligncenter {
  text-align: center;
}
.contents__wrapper__item blockquote {
  margin: 2.5rem 0;
  padding: 1.875rem;
  border-radius: 0.5rem;
  background: rgba(234, 232, 231, 0.08);
}
@media screen and (min-width: 992px) {
  .contents__wrapper__item blockquote {
    margin: 2.5rem 0;
  }
}
.contents__wrapper__item strong {
  font-weight: 700;
  color: #EAE8E7;
  font-size: 1rem;
  font-style: normal;
  line-height: 2; /* 32px */
  letter-spacing: 0.32px;
}
.contents__wrapper__item a {
  color: #EAE8E7;
}
.contents__wrapper__item h1 {
  margin: 2.5rem 0 1rem;
  color: #EAE8E7;
  font-family: "Shippori Antique B1", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4; /* 50.4px */
  letter-spacing: 0.48px;
}
@media screen and (min-width: 992px) {
  .contents__wrapper__item h1 {
    margin: 6.5rem 0 3rem;
    font-size: 2.25rem;
    letter-spacing: 0.72px;
  }
}
.contents__wrapper__item h2 {
  margin: 2.5rem 0 1rem;
  color: #EAE8E7;
  font-family: "Shippori Antique B1", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4; /* 50.4px */
  letter-spacing: 0.48px;
}
@media screen and (min-width: 992px) {
  .contents__wrapper__item h2 {
    margin: 6.5rem 0 3rem;
    font-size: 2.25rem;
    letter-spacing: 0.72px;
  }
}
.contents__wrapper__item h3, .contents__wrapper__item h4, .contents__wrapper__item h5, .contents__wrapper__item h6 {
  color: #EAE8E7;
  font-family: "Shippori Antique B1", sans-serif;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4; /* 33.6px */
  letter-spacing: 0.48px;
  margin: 3rem 0 2rem;
}
@media screen and (min-width: 992px) {
  .contents__wrapper__item h3, .contents__wrapper__item h4, .contents__wrapper__item h5, .contents__wrapper__item h6 {
    font-size: 1.5rem;
  }
}
.contents__wrapper__item > :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}
.contents__wrapper__item hgroup:has(h1, h2) {
  margin-top: 2.5rem;
}
@media screen and (min-width: 992px) {
  .contents__wrapper__item hgroup:has(h1, h2) {
    margin-top: 6.5rem;
  }
}
.contents__wrapper__item hgroup > :is(h1, h2) {
  margin-top: 0;
}
.contents__wrapper__item ul {
  margin-top: 32px;
  font-size: 13px;
  color: #EAE8E7;
  list-style: disc;
  list-style-position: outside;
  padding-left: 1em;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.26px;
}
.contents__wrapper__item ol {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 1em;
  font-size: 16px;
  letter-spacing: 0.32px;
  line-height: 2;
  font-weight: 400;
  margin-top: 8px;
}
.contents__wrapper__item li + li {
  margin-top: 32px;
}
@media screen and (min-width: 992px) {
  .contents__wrapper__item {
    max-width: 44.25rem;
    margin: 0 auto;
  }
}
.contents__wrapper__item pre {
  margin: 2.5rem 0;
  overscroll-behavior-x: none;
}
@media screen and (min-width: 992px) {
  .contents__wrapper__item pre {
    margin: 2rem 0;
  }
}
.contents__wrapper__item pre code {
  border-radius: 8px;
  white-space: pre;
}
@media screen and (min-width: 992px) {
  .contents__wrapper__item .wp-block-table .has-fixed-layout {
    width: auto;
  }
}
@media screen and (min-width: 992px) {
  .contents__wrapper__item .wp-block-table .has-fixed-layout td, .contents__wrapper__item .wp-block-table .has-fixed-layout th {
    word-break: normal;
  }
}

.contents__wrapper__item p > code {
  padding: 0.35rem 0.5rem;
  background: rgba(234, 232, 231, 0.08);
  border-radius: 4px;
  line-height: 2;
  font-size: 0.8125rem;
  letter-spacing: 0.26px;
}

.contents__wrapper__item__title {
  color: #EAE8E7;
  font-family: "Shippori Antique B1", sans-serif;
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4; /* 56px */
  letter-spacing: 0.8px;
  margin-bottom: 3.5rem;
}

.contents__wrapper__item__text {
  width: 42.3214285714vw;
  color: #EAE8E7;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.4; /* 41.4px */
  letter-spacing: 0.36px;
}

.contents__wrapper__item__text + .contents__wrapper__item__text {
  margin-top: 3.5rem;
}

.contents__others__top {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 992px) {
  .contents__others__top {
    flex-direction: row;
  }
}

.contents__others__top__video {
  width: 100%;
  aspect-ratio: 375/142;
}
.contents__others__top__video iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (min-width: 992px) {
  .contents__others__top__video {
    width: 50%;
    aspect-ratio: 259/145;
  }
}

.contents__others__top .contents__others__item {
  width: 100%;
}
@media screen and (min-width: 992px) {
  .contents__others__top .contents__others__item {
    width: 25%;
  }
}

.contents__others__item {
  border-radius: 8px 8px 0 0;
  position: relative;
  text-decoration: none;
}
.contents__others__item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  /* ▼ デフォルト（スマホ・タブレット）：左上の光のみ ▼ */
  background: radial-gradient(circle at top left, #AAAAAA 0%, #444444 40%, transparent 80%);
  /* マスク設定（共通） */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  /* ▼ lg以上：左上 ＋ 右下の光 ▼ */
}
@media screen and (min-width: 992px) {
  .contents__others__item::before {
    background: radial-gradient(circle at top left, #AAAAAA 0%, #444444 40%, transparent 80%), radial-gradient(circle at bottom right, #AAAAAA 0%, #444444 5%, transparent 10%);
  }
}
.contents__others__item:last-child {
  border-radius: 8px 0 0 0;
}
.contents__others__item:last-child::before {
  /* デフォルト（スマホ・タブレット）：左上の光 */
  background: radial-gradient(circle at top left, #AAAAAA 0%, #444444 40%, transparent 80%);
  /* lg以上：左上の光 ＋ 右上の光 ＋ 右下の光 */
}
@media screen and (min-width: 992px) {
  .contents__others__item:last-child::before {
    background: radial-gradient(circle at top left, #AAAAAA 0%, #444444 40%, transparent 80%), radial-gradient(circle at bottom right, #AAAAAA 0%, #444444 5%, transparent 60%);
  }
}

.contents__tags {
  margin-right: auto;
  flex-shrink: 0;
}

.contents__others__bottom {
  display: flex;
  flex-wrap: wrap;
}

.contents__others__bottom .contents__others__item {
  width: 100%;
}
@media screen and (min-width: 992px) {
  .contents__others__bottom .contents__others__item {
    width: 33.3333333333%;
  }
}

.l-main {
  padding-bottom: 0;
}

.contents__main__item.--fixed {
  width: 100%;
}
@media screen and (min-width: 992px) {
  .contents__main__item.--fixed {
    width: 50% !important;
    aspect-ratio: 16/9;
  }
}

.contents__main__item.--fixed:has(.--about) {
  background-image: url("/img/about-bg-sp.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
}
@media screen and (min-width: 992px) {
  .contents__main__item.--fixed:has(.--about) {
    background-image: url("/img/about-bg.png");
    background-size: cover;
  }
}

.contents__main__wrapper__top {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 992px) {
  .contents__main__wrapper__top {
    flex-direction: row;
  }
}
@media screen and (min-width: 992px) {
  .contents__main__wrapper__top.--reverse {
    flex-direction: row-reverse;
  }
}

.contents__main__wrapper__top .contents__main__item {
  width: 100%;
}
@media screen and (min-width: 992px) {
  .contents__main__wrapper__top .contents__main__item {
    width: 25%;
  }
}

.contents__main__wrapper__bottom {
  display: flex;
  flex-wrap: wrap;
}

.contents__main__wrapper__bottom .contents__main__item {
  width: 100%;
}
@media screen and (min-width: 992px) {
  .contents__main__wrapper__bottom .contents__main__item {
    width: 33.3333333333%;
  }
}

.contents__main__item {
  border-radius: 8px 8px 0 0;
  position: relative;
  text-decoration: none;
  box-shadow: 0 0 40px 0 transparent;
  transition: box-shadow 0.3s ease;
}
.contents__main__item:hover {
  box-shadow: 0 0 40px 0 rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}
.contents__main__item:hover::before {
  padding: 1px 0 1px 1px;
  background: linear-gradient(296.56deg, #444444 45.92%, #AAAAAA 88.89%) !important;
}
.contents__main__item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px 0 1px 1px;
  /* 背景：左上と右上に円形グラデーションを配置 */
  background: radial-gradient(circle at top left, #AAAAAA 0%, #444444 40%, transparent 80%), radial-gradient(circle at bottom right, #AAAAAA 0%, #444444 5%, transparent 10%);
  /* マスク：padding分（＝線の太さ）だけ残して中をくり抜く */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.contents__main__wrapper > :last-child > .contents__main__item:last-child::before {
  padding: 1px;
  /* デフォルト（スマホ・タブレット）：左上の光 */
  background: radial-gradient(circle at top left, #AAAAAA 0%, rgba(68, 68, 68, 0.7) 40%, transparent 80%);
  /* lg以上：左上の光 ＋ 右上の光 ＋ 右下の光 */
}
@media screen and (min-width: 992px) {
  .contents__main__wrapper > :last-child > .contents__main__item:last-child::before {
    background: radial-gradient(circle at top left, #AAAAAA 0%, rgba(68, 68, 68, 0.7) 40%, transparent 80%), radial-gradient(circle at bottom right, #AAAAAA 0%, rgba(68, 68, 68, 0.7) 5%, transparent 60%);
  }
}

.contents__main__wrapper__top__video {
  width: 50%;
  aspect-ratio: 259/145;
}
.contents__main__wrapper__top__video iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.form__wrapper {
  width: 100%;
}
.form__wrapper input[type=text] {
  width: 100%;
}
.form__wrapper input[type=email] {
  width: 100%;
}
.form__wrapper textarea {
  width: 100%;
}

.wpcf7-not-valid-tip {
  color: #dc3232;
  font-size: 1em;
  font-weight: normal;
  display: block;
}

.c-form {
  color: #222222;
}

.p-pageHeading {
  padding-top: 2rem;
  padding-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  .p-pageHeading {
    padding-top: 2.5rem;
    padding-bottom: 2rem;
  }
}

.p-pageHeading__stepNav {
  margin-top: 0 !important;
}

.p-stepNav {
  display: flex;
  justify-content: center;
}
.p-stepNav__itemWrap {
  position: relative;
  display: flex;
  align-items: top;
  gap: 0.125rem;
  opacity: 0.4;
  font-size: 1rem;
}
.p-stepNav__itemWrap.-active {
  opacity: 1;
}
.p-stepNav__itemWrap + .p-stepNav__itemWrap::before {
  content: "";
  display: block;
  width: 4.5625rem;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  margin-top: 0.5625rem;
  transition: width 0.3s;
}
@media screen and (min-width: 768px) {
  .p-stepNav__itemWrap + .p-stepNav__itemWrap::before {
    width: 11.125rem;
  }
}
.p-stepNav__item {
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.53125rem;
  font-size: 0.875rem;
  line-height: 1rem;
}
@media screen and (min-width: 768px) {
  .p-stepNav__item {
    gap: 0.75rem;
  }
}
.-active:not(:has(~ .-active)) .p-stepNav__item {
  font-size: 1rem;
}
.p-stepNav__item::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20id%3D%22p%22%20data-name%3D%22p%2049851%22%20d%3D%22M10%2C0c7.279%2C0%2C10%2C4.477%2C10%2C10S16.58%2C20%2C10%2C20%2C0%2C15.523%2C0%2C10%2C2.721%2C0%2C10%2C0Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transform: scale(70%);
}
.-active:not(:has(~ .-active)) .p-stepNav__item::before {
  transform: scale(100%);
}

/*
  Main
*/
.p-main {
  padding-top: 3rem;
  background-color: #fafafa;
}
@media screen and (min-width: 768px) {
  .p-main {
    padding-top: 4.5rem;
  }
}
@media screen and (min-width: 992px) {
  .p-main {
    padding-top: 5rem;
  }
}

.p-main__title {
  color: #EAE8E7;
  font-family: "Shippori Antique B1", sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4; /* 78.4px */
  font-size: 2.25rem;
  letter-spacing: 0.72px;
  padding-left: 1rem;
  margin-top: 1rem;
}
@media screen and (min-width: 992px) {
  .p-main__title {
    padding-left: 3.3125rem;
    margin-top: 2.5rem;
    letter-spacing: 1.12px;
    font-size: 3.5rem;
  }
}
.p-main__title:is(hgroup) p {
  font-size: 50%;
}
.p-main__title:is(hgroup) h1 {
  font: inherit;
}

.l-container {
  width: calc(100vw - 2rem);
}

/*
  3.2 - Utility
-----------------------------------------------------*/
/*
  Break
*/
.u-break {
  display: block;
}

@media screen and (min-width: 768px) {
  .spOnly {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .pcOnly {
    display: none;
  }
}

.u-text-bg-video {
  color: transparent !important;
  background-image: url("/img/background.gif") !important;
  background-clip: text !important;
  background-size: contain !important;
}

.u-title-policy {
  font-size: 1.125rem;
}

.u-text-policy {
  font-size: 1.125rem;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

.u-text-center {
  text-align: center;
}

.u-align-center {
  align-items: center;
  display: flex;
}

.u-textTransformReset {
  text-transform: initial;
}

/*
  wbr
*/
@media screen and (min-width: 0) {
  .u-wbr.-xxs {
    display: inline-block;
  }
  .u-wbr.-xxsHard {
    display: block;
  }
  .u-wbr.-xxsReset {
    display: inline;
  }
}
@media screen and (min-width: 360px) {
  .u-wbr.-xs {
    display: inline-block;
  }
  .u-wbr.-xsHard {
    display: block;
  }
  .u-wbr.-xsReset {
    display: inline;
  }
}
@media screen and (min-width: 576px) {
  .u-wbr.-sm {
    display: inline-block;
  }
  .u-wbr.-smHard {
    display: block;
  }
  .u-wbr.-smReset {
    display: inline;
  }
}
@media screen and (min-width: 768px) {
  .u-wbr.-md {
    display: inline-block;
  }
  .u-wbr.-mdHard {
    display: block;
  }
  .u-wbr.-mdReset {
    display: inline;
  }
}
@media screen and (min-width: 992px) {
  .u-wbr.-lg {
    display: inline-block;
  }
  .u-wbr.-lgHard {
    display: block;
  }
  .u-wbr.-lgReset {
    display: inline;
  }
}
@media screen and (min-width: 1200px) {
  .u-wbr.-xl {
    display: inline-block;
  }
  .u-wbr.-xlHard {
    display: block;
  }
  .u-wbr.-xlReset {
    display: inline;
  }
}
@media screen and (min-width: 1400px) {
  .u-wbr.-xxl {
    display: inline-block;
  }
  .u-wbr.-xxlHard {
    display: block;
  }
  .u-wbr.-xxlReset {
    display: inline;
  }
}

/*
  Visually Hidden
*/
.u-visuallyHidden:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
  clip-path: inset(50%);
}

.u-dash {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  width: 20px;
  height: 1px;
  background: #A7A7A7;
}
@media screen and (min-width: 768px) {
  .u-dash {
    margin-right: 20px;
    width: 32px;
  }
}