@charset "UTF-8";
/* --------------------------------------------------
 ※※※※※※※※※※※※※※※※※※※※※※※※
 business_creativeページ用
 header/footer/breadcrumb/お問い合わせセクションのみをassets化するための
 最小構成（business_creative本体のCSSはpublic/service/business_creative側で
 引き続き管理しているため、common.scssのheading/hero等は含めない）
 このファイルはsassでコンパイルされています
 ※※※※※※※※※※※※※※※※※※※※※※※※
-------------------------------------------------- */
:root {
  --color-white: #fff;
  --color-white-rgb: 255
    255
    255;
  --color-black: #1f2933;
  --color-black-rgb: 31
    41
    51;
  --color-main-dark: #e71a04;
  --color-main-dark-rgb: 231
    26
    4;
  --color-main-base: #fc670e;
  --color-main-base-rgb: 252
    103
    14;
  --color-main-pale: #fff0e7;
  --color-main-pale-rgb: 255
    240
    231;
  --color-main-text-large: #e74141;
  --color-main-text-large-rgb: 231
    65
    65;
  --color-main2-base: #405480;
  --color-main2-base-rgb: 64
    84
    128;
  --color-main2-pale: #f0f4f7;
  --color-main2-pale-rgb: 240
    244
    247;
  --color-text-default: #011b35;
  --color-text-default-rgb: 1
    27
    53;
  --color-text-pale: #364153;
  --color-text-pale-rgb: 54
    65
    83;
  --color-link: #0053b3;
  --color-link-rgb: 0
    83
    179;
  --color-green-base: #00c9b7;
  --color-green-base-rgb: 0
    201
    183;
  --color-green-pale: #ebf8f7;
  --color-green-pale-rgb: 235
    248
    247;
  --color-yellow-base: #fbb03b;
  --color-yellow-base-rgb: 251
    176
    59;
  --color-gray-base: #7b8794;
  --color-gray-base-rgb: 123
    135
    148;
  --color-gray-light: #929fad;
  --color-gray-light-rgb: 146
    159
    173;
  --color-attention: #df4439;
  --color-attention-rgb: 223
    68
    57;
  --color-op-seminar: #0053b3;
  --color-op-seminar-rgb: 0
    83
    179;
  --color-op-seminar-pale: #eef6ff;
  --color-op-seminar-pale-rgb: 238
    246
    255;
  --color-op-whitepaper: #23a136;
  --color-op-whitepaper-rgb: 35
    161
    54;
  --color-op-whitepaper-pale: #e9f7ea;
  --color-op-whitepaper-pale-rgb: 233
    247
    234;
  --color-op-media: #fc670e;
  --color-op-media-rgb: 252
    103
    14;
  --color-op-media-pale: #fff0e7;
  --color-op-media-pale-rgb: 255
    240
    231;
  --color-case-ticket: #0053b3;
  --color-case-ticket-rgb: 0
    83
    179;
  --color-case-ticket-pale: #eef6ff;
  --color-case-ticket-pale-rgb: 238
    246
    255;
  --color-case-auth: #2cb040;
  --color-case-auth-rgb: 44
    176
    64;
  --color-case-auth-pale: #e5fce9;
  --color-case-auth-pale-rgb: 229
    252
    233;
  --color-case-hr: #fc670e;
  --color-case-hr-rgb: 252
    103
    14;
  --color-case-hr-pale: #fff0e7;
  --color-case-hr-pale-rgb: 255
    240
    231;
  --color-case-nocode: #9c23d3;
  --color-case-nocode-rgb: 156
    35
    211;
  --color-case-nocode-pale: #f7f0fb;
  --color-case-nocode-pale-rgb: 247
    240
    251;
  --color-case-hometown: #d8d802;
  --color-case-hometown-rgb: 216
    216
    2;
  --color-case-hometown-text: #72730c;
  --color-case-hometown-text-rgb: 114
    115
    12;
  --color-case-hometown-pale: #f9f9d9;
  --color-case-hometown-pale-rgb: 249
    249
    217;
  --color-case-game: #ef346f;
  --color-case-game-rgb: 239
    52
    111;
  --color-case-game-text: #cd0440;
  --color-case-game-text-rgb: 205
    4
    64;
  --color-case-game-pale: #fff1f6;
  --color-case-game-pale-rgb: 255
    241
    246;
}

:root {
  --font-family-jp: "Noto Sans JP", sans-serif;
  --font-family-en: "Outfit", sans-serif;
  --font-family-all: "Outfit", "Noto Sans JP", sans-serif;
  --font-7xl: 72px;
  --font-6xl: 64px;
  --font-5xl: 48px;
  --font-4xl: 36px;
  --font-3xl: 28px;
  --font-2xl: 24px;
  --font-xl: 20px;
  --font-l: 18px;
  --font-m: 16px;
  --font-s: 14px;
  --font-xs: 12px;
  --font-2xs: 11px;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-weight-heavy: 900;
  --line-l: 1.8;
  --line-m: 1.6;
  --line-s: 1.4;
  --line-xs: 1.25;
  --line-none: 1;
  --letter-spacing-s: 0.02em;
  --letter-spacing-m: 0.05em;
  --letter-spacing-l: 0.07em;
  --letter-spacing: var(--letter-spacing-m);
}

:root {
  --padding-s: 16px;
  --padding-m: 24px;
  --padding-l: 40px;
  --pad-container: var(--padding-m);
}
@media screen and (min-width: 769px) {
  :root {
    --pad-container: var(--padding-l);
  }
}

:root {
  --shadow-default: 0 0 24px 0 rgb(31 41 51 / 0.16);
  --shadow-box: 0 4px 24px 0 rgb(31 41 51 / 0.2);
}

:root {
  --trans-default: 0.3s ease;
}

:root {
  --radius-xl: 24px;
  --radius-l: 16px;
  --radius-default: 12px;
  --radius-m: 8px;
  --radius-s: 6px;
}

/* ------------------------------
  footer
------------------------------ */
.footer {
  font-size: var(--font-s);
}
.footer__main {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-block: 40px 60px;
  background: var(--color-main2-base);
  color: var(--color-white);
}
@media screen and (min-width: 769px) {
  .footer__main {
    padding-block: 64px 100px;
  }
}
.footer__inner {
  box-sizing: border-box;
  width: min(100%, 1280px);
  padding-inline: var(--pad-container);
}
@media screen and (min-width: 769px) {
  .footer__inner {
    display: flex;
    gap: 72px 32px;
    flex-wrap: wrap;
  }
}
.footer__col {
  margin-block: 24px 0;
}
@media screen and (min-width: 769px) {
  .footer__col {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-block: 0;
    gap: 48px;
  }
}
.footer__mission {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-block: 0;
  gap: 16px;
}
@media screen and (min-width: 769px) {
  .footer__mission {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }
}
.footer__mission-logo {
  width: 180px;
  max-width: 100%;
  transition: var(--trans-default);
}
@media screen and (min-width: 769px) {
  .footer__mission-logo {
    width: 271px;
  }
}
@media (any-hover: hover) {
  .footer__mission-logo:hover {
    transform: scale(1.05);
  }
}
.footer__mission-logo img {
  width: 100%;
  height: auto;
}
.footer__mission-text {
  font-size: var(--font-s);
  font-weight: var(--font-weight-bold);
}
@media screen and (min-width: 769px) {
  .footer__mission-text {
    font-size: var(--font-l);
  }
}
.footer__copyright {
  display: block;
  padding: 10px 24px;
  background: var(--color-main-base);
  color: var(--color-main2-base);
  font-size: var(--font-s);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-none);
  text-align: center;
}

/* ------------------------------
  footer-badge
------------------------------ */
.footer-badge {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 32px var(--pad-container);
  list-style: none;
  gap: 16px;
}
.footer-badge__link {
  display: flex;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  padding: 4px 6px;
  transition: var(--trans-default);
  border-radius: var(--radius-m);
  outline: transparent solid 0;
  line-height: var(--line-none);
}
@media screen and (min-width: 769px) {
  .footer-badge__link {
    width: 120px;
    height: 120px;
  }
}
.footer-badge__link img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
@media (any-hover: hover) {
  .footer-badge__link:hover {
    outline: solid 3px var(--color-link);
  }
}

/* ------------------------------
  footer-contact-list
------------------------------ */
.footer-contact-list {
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 100%;
  margin-block: 32px 0;
  margin-inline: auto;
  padding: 0;
  list-style: none;
  gap: 12px;
}
@media screen and (min-width: 769px) {
  .footer-contact-list {
    margin-inline: 0;
  }
}
.footer-contact-list__item {
  display: flex;
  gap: 6px;
  flex-direction: column;
  --icon: url("/assets/images/icon/ico_op-contact.svg");
}
.footer-contact-list__item--contact {
  --icon: url("/assets/images/icon/ico_contact.svg");
}
.footer-contact-list__item--whitepaper {
  --icon: url("/assets/images/icon/ico_op-whitepaper.svg");
}
.footer-contact-list__item--tel {
  --icon: url("/assets/images/icon/ico_tel.svg");
}
.footer-contact-list__button {
  display: flex;
  position: relative;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  min-height: 60px;
  margin: 0;
  padding: 8px 26px 8px 62px;
  transition: var(--trans-default);
  border: 1px solid var(--color-white);
  border-radius: 30px;
  outline: transparent solid 0;
  color: var(--color-white);
  font-size: var(--font-m);
  line-height: var(--line-none);
  gap: 4px;
  text-decoration: none;
}
@media (any-hover: hover) {
  .footer-contact-list__button:is(a, button):hover {
    border-color: rgb(var(--color-white-rgb) / 0.4);
    background: var(--color-link);
  }
}
.footer-contact-list__ico {
  display: flex;
  position: absolute;
  top: 50%;
  left: 10px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--color-white);
}
.footer-contact-list__ico::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--color-main2-base);
  mask: var(--icon) no-repeat center/contain;
}
.footer-contact-list__title {
  font-size: var(--font-m);
  font-weight: var(--font-weight-bold);
}
.footer-contact-list__title-sub {
  font-size: var(--font-xs);
}
.footer-contact-list__tel {
  font-size: var(--font-xl);
  font-weight: var(--font-weight-bold);
}
.footer-contact-list__text {
  margin-block: 0;
  margin-inline: 16px;
  font-size: var(--font-s);
  text-align: right;
}

/* ------------------------------
  footer-information
------------------------------ */
.footer-information {
  color: var(--color-white);
}
@media screen and (min-width: 769px) {
  .footer-information {
    min-width: 310px;
  }
}
.footer-information__title {
  margin-block: 0;
  font-size: var(--font-m);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-xs);
}
.footer-information__address {
  margin-block: 8px 0;
  font-size: var(--font-s);
  font-style: normal;
  line-height: var(--line-m);
}
@media screen and (min-width: 769px) {
  .footer-information__address {
    margin-block: 16px 0;
  }
}
.footer-information__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-block: 8px 0;
  font-size: var(--font-s);
  line-height: var(--line-m);
}
.footer-information__code {
  display: inline-flex;
  width: fit-content;
  padding: 6px 8px;
  border-radius: var(--radius-s);
  background: #23325a;
  color: var(--color-white);
  font-size: var(--font-xs);
  line-height: var(--line-none);
}

/* ------------------------------
  footer-nav
------------------------------ */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  justify-content: start;
  margin-block: 48px 0;
  gap: 32px;
}
@media screen and (min-width: 769px) {
  .footer-nav {
    display: flex;
    flex-wrap: wrap;
    margin-block: 0;
    gap: 48px 32px;
  }
}
.footer-nav__box {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footer-nav__item {
  display: flex;
  gap: 8px;
  flex-direction: column;
}
.footer-nav__item:has(.footer-nav-list, + .footer-nav-list) {
  margin-bottom: 16px;
}
.footer-nav__item:last-child {
  margin-bottom: 0;
}
.footer-nav__title {
  margin-block: 0;
  font-size: var(--font-m);
  font-weight: var(--font-weight-bold);
}
.footer-nav__title a {
  display: inline-block;
  transition: var(--trans-default);
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.footer-nav__title a[target=_blank]::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  transition: var(--trans-default);
  background-color: currentcolor;
  vertical-align: -0.3em;
  mask: url("/assets/images/icon/ico_blank.svg") no-repeat center/contain;
}
@media (any-hover: hover) {
  .footer-nav__title a:hover {
    color: var(--color-main-base);
    text-decoration: underline;
  }
}

/* ------------------------------
  footer-nav-list
------------------------------ */
.footer-nav-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (min-width: 769px) {
  .footer-nav-list {
    gap: 4px;
  }
}
.footer-nav-list__link {
  display: inline-block;
  padding: 4px 0;
  transition: var(--trans-default);
  outline: transparent solid 0;
  background: linear-gradient(currentcolor, currentcolor) no-repeat left bottom 3px/0 1px;
  color: var(--color-white);
  text-decoration: none;
}
@media (any-hover: hover) {
  .footer-nav-list__link:hover {
    background-size: 100% 1px;
    color: var(--color-main-base);
  }
}
.footer-nav-list__link[target=_blank]::after {
  mask: url("/assets/images/icon/ico_blank.svg") no-repeat center/contain;
}
.footer-nav-list__link::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-inline: 4px 0;
  background-color: currentcolor;
  vertical-align: -0.2em;
  mask: url("/assets/images/icon/ico_arrow_double_right.svg") no-repeat center/contain;
}

/* ------------------------------
  header
------------------------------ */
.header {
  position: sticky;
  z-index: 100;
  top: 0;
  width: 100%;
  background-color: var(--color-white);
  color: var(--color-text-default);
}
.header__inner {
  display: flex;
  position: relative;
  z-index: 2000;
  box-sizing: border-box;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
}
.header__inner:has(.header__contents.is-open) {
  background-color: var(--color-white);
}
@media screen and (min-width: 769px) {
  .header__inner {
    margin: 0 auto;
    padding: 12px 24px;
    gap: 8px 32px;
  }
}
.header__logo, .header__nav {
  position: relative;
  z-index: 2001;
}
.header__logo {
  width: 110px;
  margin-right: auto;
}
.header__logo img {
  width: 100%;
}
@media screen and (min-width: 769px) {
  .header__logo {
    position: absolute;
    top: 18px;
    width: 130px;
  }
}
@media (any-hover: hover) {
  .header__logo {
    transition: var(--trans-default);
  }
  .header__logo:hover {
    opacity: 0.7;
  }
}
@media screen and (max-width: 768.9px) {
  .header__nav {
    display: flex;
    gap: 12px;
  }
}
.header__contact {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 0;
}
.header__contact::before {
  content: "";
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background-color: var(--color-black);
  mask: url("/assets/images/icon/ico_mail.svg") center/contain no-repeat;
}
.header__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 4px;
  background: var(--color-black);
  font-size: 0;
  appearance: none;
}
.header__menu::before {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: auto;
  background-color: var(--color-white);
  mask: url("/assets/images/icon/ico_menu.svg") no-repeat center/contain;
}
@media screen and (max-width: 768.9px) {
  .header__contents {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 56px;
    right: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    padding: 0 24px 80px;
    overflow-y: auto;
    background: var(--color-white);
  }
  .header__contents.is-open {
    display: block;
  }
}
@media screen and (min-width: 769px) {
  .header__contents {
    display: block !important;
    margin-left: auto;
  }
}

/* ------------------------------
  ly-content
------------------------------ */
.ly-content {
  padding: 60px 24px;
  background-color: var(--color-white);
}
@media screen and (min-width: 769px) {
  .ly-content {
    padding-block: 80px;
  }
}
.ly-content__inner {
  max-width: 1200px;
  margin-inline: auto;
}

/* ------------------------------
  nav
------------------------------ */
.nav {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 80px;
  font-size: var(--font-m);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  gap: 16px;
}
@media screen and (min-width: 769px) {
  .nav {
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 auto;
    padding-bottom: 0;
    font-size: var(--font-xs);
    gap: 8px 24px;
  }
}
.nav__list {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 100%;
  margin-block: 0;
  padding-left: 0;
  list-style: none;
}
@media screen and (min-width: 769px) {
  .nav__list {
    flex-direction: row;
    gap: 16px;
    width: fit-content;
  }
}
.nav__title {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-block: 16px;
  border: 0;
  border-bottom: 1px solid var(--color-gray-light);
  background-color: transparent;
  color: var(--color-text-default);
  font-family: var(--font-family-all);
  font-size: var(--font-m);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-s);
  text-align: start;
  text-decoration: none;
  gap: 4px;
}
.nav__title::after {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-color: var(--color-text-default);
  mask: url("/assets/images/icon/ico_arrow_right.svg") no-repeat center/contain;
}
@media screen and (min-width: 769px) {
  .nav__title {
    padding-block: 0;
    border-bottom: 0;
    font-size: var(--font-xs);
  }
  .nav__title::after {
    content: none;
  }
}
@media (any-hover: hover) {
  .nav__title {
    transition: var(--trans-default);
  }
  .nav__title:hover {
    color: var(--color-link);
  }
}
.nav__toggle .nav__title {
  position: relative;
  padding-inline: 0 16px;
}
.nav__toggle .nav__title::before, .nav__toggle .nav__title::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  margin: auto 0;
  transition: var(--trans-default);
  background-color: var(--color-text-default);
  mask-repeat: no-repeat;
  mask-size: cover;
}
.nav__toggle .nav__title::before {
  opacity: 1;
  mask-image: url("/assets/images/icon/ico_plus.svg");
}
.nav__toggle .nav__title::after {
  rotate: -90deg;
  opacity: 0;
  mask-image: url("/assets/images/icon/ico_minus.svg");
}
.nav__toggle .nav__title.is-open {
  padding-bottom: 12px;
  border-bottom: none;
}
.nav__toggle .nav__title.is-open::before {
  rotate: 90deg;
  opacity: 0;
}
.nav__toggle .nav__title.is-open::after {
  rotate: 0deg;
  opacity: 1;
}
@media screen and (min-width: 769px) {
  .nav__toggle .nav__title.is-open {
    padding-bottom: 0;
  }
  .nav__toggle .nav__title::before, .nav__toggle .nav__title::after {
    top: -2px;
    width: 16px;
    height: 16px;
  }
}
@media (any-hover: hover) {
  .nav__toggle .nav__title:hover::before, .nav__toggle .nav__title:hover::after {
    background-color: var(--color-link);
  }
}
.nav__cv {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .nav__cv {
    flex-direction: row-reverse;
    width: fit-content;
  }
}

@media (width >= 769px) and (width <= 1185px) {
  .nav {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-end;
  }
  .nav__list {
    gap: 16px;
  }
}
/* ------------------------------
  nav-button
------------------------------ */
.nav-button {
  display: flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border: 2px solid var(--color-black);
  border-radius: 50px;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}
.nav-button::after {
  content: "";
  width: 16px;
  height: 16px;
  margin: auto 0;
  mask: url("/assets/images/icon/ico_arrow_right.svg") no-repeat center/contain;
  background-color: var(--color-black);
}
@media screen and (min-width: 769px) {
  .nav-button {
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
  }
  .nav-button::after {
    content: none;
  }
}
@media (any-hover: hover) {
  .nav-button {
    transition: var(--trans-default);
  }
}

.nav-button-primary {
  background: var(--color-black);
  color: var(--color-white);
}
.nav-button-primary::after {
  background-color: var(--color-white);
}
@media (any-hover: hover) {
  .nav-button-primary:hover {
    border: 2px solid var(--color-gray-base);
    background: var(--color-gray-base);
  }
}

.nav-button-secondary {
  background: var(--color-white);
  color: var(--color-text-default);
}
@media (any-hover: hover) {
  .nav-button-secondary:hover {
    border: 2px solid var(--color-gray-base);
    background: var(--color-gray-base);
    color: var(--color-white);
  }
}

/* ------------------------------
  nav-menu
------------------------------ */
.nav-menu {
  display: none;
}
@media screen and (min-width: 769px) {
  .nav-menu {
    position: absolute;
    z-index: 2;
    top: 100%;
    right: 0;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
  }
}
.nav-menu__inner {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  border-bottom: 1px solid var(--color-gray-light);
}
@media screen and (min-width: 769px) {
  .nav-menu__inner {
    flex-direction: row;
    padding: 32px;
    border-bottom: 0;
    border-radius: 0 0 8px 8px;
    background: var(--color-white);
    box-shadow: var(--shadow-default);
  }
}
@media screen and (min-width: 769px) {
  .nav-menu__h1 {
    display: flex;
    flex-direction: column;
    margin-right: auto;
    font-size: 40px;
    font-weight: var(--font-weight-bold);
  }
  .nav-menu__h1 span {
    color: var(--color-gray-base);
    font-size: var(--font-m);
  }
}
@media screen and (min-width: 769px) {
  .nav-menu__h2 {
    margin-bottom: 12px;
    margin-block: 0;
    font-size: var(--font-m);
    font-weight: var(--font-weight-bold);
  }
}
.nav-menu__block {
  display: flex;
  flex-direction: column;
  padding-bottom: 4px;
}
@media screen and (min-width: 769px) {
  .nav-menu__block {
    flex-direction: row;
    gap: 64px;
  }
}
.nav-menu__list {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-left: 0;
  list-style: none;
}
@media screen and (min-width: 769px) {
  .nav-menu__list {
    min-width: 260px;
  }
}
@media screen and (min-width: 769px) {
  .nav-menu__item {
    border-bottom: 1px solid var(--color-gray-light);
  }
}
.nav-menu__link {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 4px 12px 16px;
  color: var(--color-text-default);
  font-size: var(--font-s);
  text-decoration: none;
}
.nav-menu__link::after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: var(--color-text-default);
  mask: url("/assets/images/icon/ico_arrow_right.svg") no-repeat center/contain;
}
@media screen and (min-width: 769px) {
  .nav-menu__link {
    padding: 16px 0;
    font-size: var(--font-m);
  }
  .nav-menu__item:first-child .nav-menu__link {
    padding-top: 0;
  }
  .nav-menu__link::after {
    width: 24px;
    height: 24px;
  }
}
@media (any-hover: hover) {
  .nav-menu__link {
    transition: var(--trans-default);
  }
  .nav-menu__link::after {
    transition: var(--trans-default);
  }
  .nav-menu__link:hover {
    color: var(--color-link);
  }
  .nav-menu__link:hover::after {
    transform: translateX(4px);
    background-color: var(--color-link);
  }
}
.nav-menu__child-list {
  padding-left: 0;
  list-style: none;
}
.nav-menu__child-link {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 4px 12px 16px;
  color: var(--color-text-default);
  font-size: var(--font-s);
  text-decoration: none;
}
.nav-menu__child-link::after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: var(--color-text-default);
  mask: url("/assets/images/icon/ico_arrow_right.svg") no-repeat center/contain;
}
@media (any-hover: hover) {
  .nav-menu__child-link {
    transition: var(--trans-default);
  }
  .nav-menu__child-link::after {
    transition: var(--trans-default);
  }
  .nav-menu__child-link:hover {
    color: var(--color-link);
  }
  .nav-menu__child-link:hover::after {
    transform: translateX(4px);
    background-color: var(--color-link);
  }
}

/* ------------------------------
  button-mixin
------------------------------ */
/* ------------------------------
  button-ghost-light
  白系背景用
------------------------------ */
.button-ghost-light {
  display: flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  width: fit-content;
  min-width: min(280px, 100%);
  max-width: 100%;
  min-height: 60px;
  padding: 12px 46px 12px 24px;
  transition: border-color var(--trans-default), background-color var(--trans-default), background-position var(--trans-default), color var(--trans-default);
  border: 3px solid;
  border-radius: 99px;
  font-size: var(--font-m);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-xs);
  text-decoration: none;
  background-origin: border-box;
}
@media screen and (min-width: 769px) {
  .button-ghost-light {
    width: fit-content;
    min-width: min(230px, 100%);
    min-height: 64px;
    padding: 18px 54px 18px 30px;
    font-size: var(--font-l);
  }
}
@media (any-hover: hover) {
  .button-ghost-light:hover::after {
    margin-right: -6px;
  }
}
.button-ghost-light[target=_blank]::after {
  mask: url("/assets/images/icon/ico_blank.svg") no-repeat center/contain;
}
.button-ghost-light::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  transition: margin var(--trans-default), background-color var(--trans-default);
  mask: url("/assets/images/icon/ico_arrow_double_right.svg") no-repeat center/contain;
}
@media screen and (min-width: 769px) {
  .button-ghost-light::after {
    right: 16px;
  }
}
.button-ghost-light {
  border-color: var(--color-text-default);
  background-color: rgb(var(--color-white-rgb) / 0.5);
  background-position: 100% center;
  background-size: 400% 100%;
  color: var(--color-text-default);
}
@media (any-hover: hover) {
  .button-ghost-light:hover {
    border-color: var(--color-link);
    background-color: var(--color-white);
    background-position: 0% center;
    color: var(--color-link);
  }
  .button-ghost-light:hover::after {
    background-color: var(--color-link);
  }
}
.button-ghost-light::after {
  background-color: var(--color-text-default);
}

/* ------------------------------
  button-primary
------------------------------ */
.button-primary {
  display: flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  width: fit-content;
  min-width: min(280px, 100%);
  max-width: 100%;
  min-height: 60px;
  padding: 12px 46px 12px 24px;
  transition: border-color var(--trans-default), background-color var(--trans-default), background-position var(--trans-default), color var(--trans-default);
  border: 3px solid;
  border-radius: 99px;
  font-size: var(--font-m);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-xs);
  text-decoration: none;
  background-origin: border-box;
}
@media screen and (min-width: 769px) {
  .button-primary {
    width: fit-content;
    min-width: min(230px, 100%);
    min-height: 64px;
    padding: 18px 54px 18px 30px;
    font-size: var(--font-l);
  }
}
@media (any-hover: hover) {
  .button-primary:hover::after {
    margin-right: -6px;
  }
}
.button-primary[target=_blank]::after {
  mask: url("/assets/images/icon/ico_blank.svg") no-repeat center/contain;
}
.button-primary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  transition: margin var(--trans-default), background-color var(--trans-default);
  mask: url("/assets/images/icon/ico_arrow_double_right.svg") no-repeat center/contain;
}
@media screen and (min-width: 769px) {
  .button-primary::after {
    right: 16px;
  }
}
.button-primary {
  border-color: transparent;
  background-image: linear-gradient(90deg, var(--color-white) 0%, var(--color-white) 25%, var(--color-main-dark) 75%, var(--color-main-base) 100%);
  background-position: 100% center;
  background-size: 400% 100%;
  color: var(--color-white);
}
@media (any-hover: hover) {
  .button-primary:hover {
    border-color: var(--color-main-dark);
    background-position: 0% center;
    color: var(--color-main-dark);
  }
  .button-primary:hover::after {
    background-color: var(--color-main-dark);
  }
}
.button-primary::after {
  background-color: var(--color-white);
}

/* ------------------------------
  button-secondary
------------------------------ */
.button-secondary {
  display: flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  width: fit-content;
  min-width: min(280px, 100%);
  max-width: 100%;
  min-height: 60px;
  padding: 12px 46px 12px 24px;
  transition: border-color var(--trans-default), background-color var(--trans-default), background-position var(--trans-default), color var(--trans-default);
  border: 3px solid;
  border-radius: 99px;
  font-size: var(--font-m);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-xs);
  text-decoration: none;
  background-origin: border-box;
}
@media screen and (min-width: 769px) {
  .button-secondary {
    width: fit-content;
    min-width: min(230px, 100%);
    min-height: 64px;
    padding: 18px 54px 18px 30px;
    font-size: var(--font-l);
  }
}
@media (any-hover: hover) {
  .button-secondary:hover::after {
    margin-right: -6px;
  }
}
.button-secondary[target=_blank]::after {
  mask: url("/assets/images/icon/ico_blank.svg") no-repeat center/contain;
}
.button-secondary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  transition: margin var(--trans-default), background-color var(--trans-default);
  mask: url("/assets/images/icon/ico_arrow_double_right.svg") no-repeat center/contain;
}
@media screen and (min-width: 769px) {
  .button-secondary::after {
    right: 16px;
  }
}
.button-secondary {
  border-color: transparent;
  background-image: linear-gradient(90deg, var(--color-main2-pale) 0%, var(--color-main2-pale) 25%, var(--color-text-default) 75%, var(--color-main2-base) 100%);
  background-position: 100% center;
  background-size: 400% 100%;
  color: var(--color-white);
}
@media (any-hover: hover) {
  .button-secondary:hover {
    border-color: var(--color-link);
    background-position: 0% center;
    color: var(--color-link);
  }
  .button-secondary:hover::after {
    background-color: var(--color-link);
  }
}
.button-secondary::after {
  background-color: var(--color-white);
}

/* ------------------------------
  button-header
------------------------------ */
.button-header {
  width: 100%;
}
@media screen and (min-width: 769px) {
  .button-header {
    width: fit-content;
    min-width: auto;
    min-height: 36px;
    padding: 6px 16px;
    font-size: var(--font-s);
  }
  .button-header::after {
    content: none;
  }
}

/* ------------------------------
  breadcrumb
------------------------------ */
.breadcrumb {
  padding: 8px 16px;
  overflow-x: auto;
  background-color: var(--color-main2-base);
}
@media screen and (min-width: 769px) {
  .breadcrumb {
    padding-inline: 40px;
  }
}
.breadcrumb__list {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-block: 0;
  padding-left: 0;
  list-style: none;
}
.breadcrumb__list::after {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
@media screen and (min-width: 769px) {
  .breadcrumb__list::after {
    width: 40px;
  }
}
.breadcrumb__item {
  display: flex;
  align-items: center;
  color: var(--color-white);
  font-size: var(--font-s);
  line-height: var(--line-s);
  white-space: nowrap;
  gap: 4px;
}
.breadcrumb__item:not(:last-child)::after {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-color: var(--color-white);
  mask: url("/assets/images/icon/ico_chevron_arrow_right.svg") no-repeat center/contain;
}
.breadcrumb__link {
  color: var(--color-white);
  text-decoration: underline;
}
@media (any-hover: hover) {
  .breadcrumb__link:hover {
    text-decoration: none;
  }
}

/* ------------------------------
  contact
------------------------------ */
.contact {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-block: 48px;
  background: var(--color-main2-pale);
}
@media screen and (min-width: 769px) {
  .contact {
    padding-block: 48px 60px;
  }
}
.contact__inner {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  width: min(100%, 1280px);
  padding-inline: var(--pad-container);
  gap: 48px;
}
.contact__message {
  margin-block: 0;
  font-size: var(--font-xl);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-s);
  text-align: center;
}
@media screen and (min-width: 769px) {
  .contact__message {
    font-size: var(--font-4xl);
  }
}

/* ------------------------------
  contact-list
------------------------------ */
.contact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  width: min(100%, 1200px);
  margin-block: 0;
  margin-inline: 0;
  padding: 0;
  list-style: none;
  gap: 24px;
}
@media screen and (min-width: 769px) {
  .contact-list {
    gap: 40px 24px;
  }
}
.contact-list__item {
  display: contents;
  --main: var(--color-op-seminar);
  --bg: var(--color-op-seminar-pale);
  --icon: url("/assets/images/icon/ico_op-seminar.svg");
}
.contact-list__item--whitepaper {
  --main: var(--color-op-whitepaper);
  --bg: var(--color-op-whitepaper-pale);
  --icon: url("/assets/images/icon/ico_op-whitepaper.svg");
}
.contact-list__item--media {
  --main: var(--color-op-media);
  --bg: var(--color-op-media-pale);
  --icon: url("/assets/images/icon/ico_op-media.svg");
}
.contact-list__item--contact {
  --main: var(--color-op-media);
  --bg: var(--color-op-media-pale);
  --icon: url("/assets/images/icon/ico_contact.svg");
}
.contact-list__link {
  display: grid;
  position: relative;
  grid-template-rows: auto 1fr;
  padding: 0 0 20px;
  overflow: hidden;
  transition: var(--trans-default);
  border-radius: var(--radius-default);
  outline: transparent solid 0;
  background: var(--color-white);
  box-shadow: var(--shadow-box);
  color: var(--color-text-default);
  gap: 0;
  text-decoration: none;
}
@media screen and (min-width: 769px) {
  .contact-list__link {
    grid-row: span 4;
    grid-template-rows: subgrid;
  }
}
@media (any-hover: hover) {
  .contact-list__link:hover {
    outline: solid 3px var(--color-link);
  }
}
.contact-list__category {
  display: flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  min-height: 60px;
  padding: 5px 24px 5px 82px;
  color: var(--main);
  font-size: var(--font-s);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-xs);
}
.contact-list__category::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
  height: 60px;
  border-bottom-right-radius: var(--radius-default);
  background-color: var(--main);
}
.contact-list__category::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 23px;
  width: 24px;
  height: 24px;
  background-color: var(--color-white);
  mask: var(--icon) no-repeat center/contain;
}
.contact-list__title {
  margin: 16px 24px 0;
  font-size: var(--font-xl);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-m);
}
.contact-list__text {
  margin: 16px 24px 0;
  font-size: var(--font-xs);
  line-height: var(--line-l);
}
.contact-list__button {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 24px auto 0;
  padding: 4px 8px 4px 16px;
  transition: var(--trans-default);
  border-radius: 99px;
  background: var(--bg);
  color: var(--color-text-default);
  font-size: var(--font-s);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-xs);
  gap: 8px;
}
@media (any-hover: hover) {
  .contact-list__link:hover .contact-list__button {
    background: var(--main);
    color: var(--color-white);
  }
  .contact-list__link:hover .contact-list__button::after {
    background-color: var(--color-white);
  }
}
.contact-list__button::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  transition: var(--trans-default);
  background-color: var(--main);
  mask: url("/assets/images/icon/ico_arrow_double_right.svg") no-repeat center/contain;
}
.contact-list__link[target=_blank] .contact-list__button::after {
  mask: url("/assets/images/icon/ico_blank.svg") no-repeat center/contain;
}

.only-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  pointer-events: none;
}

@media screen and (max-width: 768.9px) {
  .is-onlyPC {
    display: none !important;
  }
}

@media screen and (min-width: 769px) {
  .is-onlySP {
    display: none !important;
  }
}

body {
  font-family: var(--font-family-all);
}
.is-fixed body {
  position: fixed;
  width: 100%;
}