@charset "UTF-8";
/*
 * 基本設計について
 * このプロジェクトは、基本的にPCファーストで設計されています。
 * 詳細は、_global/_breakpoints.scssを参照してください。
 */
/*
 * Foundationレイヤー
 * Reset.cssやNormalize.cssなどを用いたブラウザのデフォルトスタイルの初期化や、
 * プロジェクトにおける基本的なスタイルを定義します。
 * ページの下地としての全体の背景や、基本的なタイポグラフィなどが該当します。
 */
/*
 * リセットCSSについて
 * ブラウザのデフォルトスタイルをリセットします。
 */
/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.min.css */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  min-width: 0;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
}

main {
  display: block;
}

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

dt {
  font-weight: 700;
}

dd {
  margin-left: 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

pre {
  font-family: monospace, monospace;
  font-size: inherit;
}

address {
  font-style: inherit;
}

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

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

b,
strong {
  font-weight: bolder;
}

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

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
  cursor: pointer;
}

button:disabled,
[type='button']:disabled,
[type='reset']:disabled,
[type='submit']:disabled {
  cursor: default;
}

:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

option {
  padding: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}

[type='search'] {
  outline-offset: -2px;
}

[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

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

[type='number'] {
  -moz-appearance: textfield;
}

label[for] {
  cursor: pointer;
}

details {
  display: block;
}

summary {
  display: list-item;
}

[contenteditable]:focus {
  outline: auto;
}

table {
  border-color: inherit;
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: 700;
}

/*
 * フォントについて
 * フォントの定義を行います。
 */
@font-face {
  font-family: 'Noto Serif JP';
  src: url('../../fonts/Noto_Serif_JP/static/NotoSerifJP-Regular.ttf')
    format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif JP';
  src: url('../../fonts/Noto_Serif_JP/static/NotoSerifJP-SemiBold.ttf')
    format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif JP';
  src: url('../../fonts/Noto_Serif_JP/static/NotoSerifJP-Bold.ttf')
    format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/*
 * 変数について
 * プロジェクト全体で使用される変数を定義します。
 */
:root {
  --font-size__base: 16;
  --font-family__base: 'Noto Serif JP', serif;
  --max-width__base: 1920;
  --width__contents: 1288;
  --space-inline__base: 23;
  --space__section--base: 60;
  --width__breakpoint: calc(
    var(--width__contents) + (var(--space-inline__base) * 2)
  );
  --color__main: #19881f;
  --color__text: #282828;
  --color__error: #fc506e;
  --color__error-light: #ffeef1;
  --color__warning: #986522;
  --color__warning-light: #fefcea;
  --color__success: #1fc8c2;
  --color__success-light: #f1fdf9;
  --color__gray-light: #f3f3f3;
  --opacity__hover: 0.7;
  --duration__base: 0.3s;
  --radius__base: 26;
  --height__header: 0;
}
@media (max-width: 767px) {
  :root {
    --width__breakpoint: 390;
    --space-inline__base: 16;
    --max-width__base: 600;
    --space__section--base: 30;
    --radius__base: 13;
  }
}

/*
 * ベースについて
 * 全体の基本的なスタイルを定義します。
 * フォント、色、共通の要素などの基本設定が含まれています。
 */
html {
  --_font-size: var(--font-size__base);
  --_width: var(--width__breakpoint);
  font-size: calc(var(--_font-size) * 1px);
}
@media (max-width: 1334px) {
  html {
    font-size: calc(var(--_font-size) / var(--_width) * 100vw);
  }
}
@media (max-width: 767px) {
  html {
    font-size: calc(var(--_font-size) * 1px);
  }
}
@media (max-width: 390px) {
  html {
    font-size: calc(var(--_font-size) / var(--_width) * 100vw);
  }
}

html {
  scroll-padding-top: calc(
    var(--height__header) / var(--font-size__base) * 1rem
  );
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family__base);
  color: var(--color__text);
  font-size: calc(16 / var(--font-size__base) * 1rem);
  font-weight: 400;
}

img,
svg {
  width: 100%;
  height: auto;
}

a {
  display: inline-block;
}

:focus-visible {
  outline: 2px solid var(--color__main);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  #wpadminbar {
    position: fixed;
  }
}
header {
  margin-top: var(--wp-admin--admin-bar--height, 0);
}

/*
 * JSについて
 * JavaScript連携時に使用するスタイルを定義します。
 */
body.is-overlay-open {
  overflow-y: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

.js-mv.is-hidden {
  visibility: hidden;
}

/*
 * Layoutレイヤー
 * ページを構成するヘッダーやメインのコンテンツエリア、サイドバーやフッターといった
 * プロジェクト共通のコンテナーブロックのスタイルを定義します。
 * 基本的には、ページ単位で唯一の存在である要素となるため、
 * IDセレクタを採用することも可能です。
 * IDセレクタを避ける場合は、l-* プレフィックスをつけた命名を採用します。
 * クラス名例：l-header, l-main, l-sidebar, l-footer
 */
.l-page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100svh;
}

.l-page__header {
  position: relative;
  z-index: 10;
}

.l-page__content {
  padding-top: calc(var(--height__header) * 1px);
}

.l-inner {
  --_max-width: var(--width__contents, 1200);
  --_padding-inline: var(--space-inline__base, 25);
  --_padding-right: var(--_padding-inline);
  --_padding-left: var(--_padding-inline);
  max-width: calc(
    var(--_max-width) * 1px + (var(--_padding-right) + var(--_padding-left)) *
      1rem / var(--font-size__base, 16)
  );
  margin-inline: auto;
  padding-right: calc(
    var(--_padding-right) * 1rem / var(--font-size__base, 16)
  );
  padding-left: calc(var(--_padding-left) * 1rem / var(--font-size__base, 16));
}

.l-inner.l-inner--fluid {
  max-width: calc(
    var(--_max-width) * 1rem / var(--font-size__base, 16) +
      (var(--_padding-right) + var(--_padding-left)) * 1rem /
      var(--font-size__base, 16)
  );
}

@media (max-width: 767px) {
  .l-inner.l-inner--600 {
    --_max-width: var(--max-width__base);
  }
}

.l-grid {
  --_max-width: 1280;
  --_min-width__column: 300;
  --_column-gap: 40;
  --_row-gap: 30;
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(calc(var(--_min-width__column) * 1px), 1fr)
  );
  column-gap: calc(var(--_column-gap) / var(--_max-width) * 100%);
  row-gap: min(
    var(--_row-gap) / var(--_max-width) * 100vw,
    var(--_row-gap) * 1px
  );
}

.l-container--sidebar {
  display: grid;
  grid-template-columns: 1fr calc(300rem / var(--font-size__base));
  column-gap: calc(32rem / var(--font-size__base));
}
@media (max-width: 767px) {
  .l-container--sidebar {
    grid-template-columns: unset;
    row-gap: calc(32rem / var(--font-size__base));
  }
}

.l-2-columns {
  --_row-gap__grid: 60;
  --_width__left: 400;
  --_width__right: 830;
  --_column-gap: 40;
  --_width__total: calc(
    var(--_width__left) + var(--_column-gap) + var(--_width__right)
  );
  display: grid;
  row-gap: min(
    var(--_row-gap__grid) / var(--_width__total) * 100vw,
    var(--_row-gap__grid) * 1px
  );
}

.l-2-columns__item {
  display: flex;
  column-gap: calc(var(--_column-gap) / var(--_width__total) * 100%);
}

.l-2-columns__left {
  width: calc(var(--_width__left) / var(--_width__total) * 100%);
}

.l-2-columns__right {
  width: calc(var(--_width__right) / var(--_width__total) * 100%);
}

@media (max-width: 767px) {
  .l-2-columns {
    --_row-gap__grid: 40;
    --_row-gap: 20;
    --_width__total: var(--width__contents);
  }
  .l-2-columns__item {
    --_width__left: 100%;
    --_width__right: 100%;
    flex-direction: column;
    row-gap: min(
      var(--_row-gap) / var(--_width__total) * 100vw,
      var(--_row-gap) * 1px
    );
  }
}
.l-2-columns--zigzag .l-2-columns__item:nth-of-type(even) {
  flex-direction: row-reverse;
}

@media (max-width: 767px) {
  .l-2-columns--zigzag .l-2-columns__item:nth-of-type(even) {
    flex-direction: column-reverse;
  }
}
.l-2-columns-grid {
  --_width--left: 519;
  --_width--right: 688.5;
  --_column-gap: 80.5;
  --_width--total: calc(
    var(--_width--left) + var(--_column-gap) + var(--_width--right)
  );
  display: grid;
  grid-template-columns: calc(
      var(--_width--left) / var(--_width--total) * 100%
    ) calc(var(--_width--right) / var(--_width--total) * 100%);
  column-gap: calc(var(--_column-gap) / var(--_width--total) * 100%);
  align-items: center;
}

/*
 * Objectレイヤー
 * OOCSSのコンセプトを元に、プロジェクトにおける繰り返されるビジュアルパターンを
 * すべてObjectと定義します。
 * さらに次の3つのレイヤーに分けられます：Component、Project、Utility
 */
/*
 * Componentレイヤー
 * 再利用できるパターンとして、小さな単位のモジュールを定義します。
 * 出来る限り、最低限の機能を持ったものとして定義されるべきであり、
 * それ自体が固有の幅や色などの特色を持つことは避けるのが望ましいです。
 * クラス名は、c-* プレフィックスを使用します。
 * クラス名例：c-button, c-title, c-text,
 * 状態管理：JavaScript連携時は is-* プレフィックスを使用します（例：c-button.is-active）
 */
.c-title {
  font-size: calc(40 / var(--font-size__base) * 1rem);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
@media (max-width: 767px) {
  .c-title {
    font-size: calc(32 / var(--font-size__base) * 1rem);
  }
}

.c-title::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color__text);
  margin-inline: calc(50% - 50vw);
  margin-top: calc(7 / var(--font-size__base) * 1rem);
}

.c-title--jp {
  font-size: calc(29 / var(--font-size__base) * 1rem);
  line-height: 1.1034482759;
}
@media (max-width: 767px) {
  .c-title--jp {
    font-size: calc(26 / var(--font-size__base) * 1rem);
  }
}

.c-title--jp::after {
  margin-top: calc(15 / var(--font-size__base) * 1rem);
}

.c-icon-button {
  --_width: 199;
  --_color__main-default: var(--color__main);
  --_color__sub-default: #fff;
  --_color__main: var(--_color__main-default);
  --_color__sub: var(--_color__sub-default);
  --_duration: var(--duration__base);
  display: grid;
  grid-template-columns: calc(23 / var(--font-size__base) * 1rem) auto;
  align-items: center;
  justify-content: center;
  column-gap: calc(10 / var(--font-size__base) * 1rem);
  width: calc(var(--_width) / var(--font-size__base) * 1rem);
  color: var(--_color__sub);
  font-size: calc(16 / var(--font-size__base) * 1rem);
  font-weight: 700;
  background-color: var(--_color__main);
  border-width: 1px;
  border-style: solid;
  border-color: var(--_color__main);
  border-radius: 9999px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2));
  transform: translateZ(0);
  transition:
    color var(--_duration),
    background-color var(--_duration),
    border-color var(--_duration),
    filter var(--_duration);
  touch-action: manipulation;
  padding-block: calc(16 / var(--font-size__base) * 1rem);
  padding-inline: calc(16 / var(--font-size__base) * 1rem);
}
@media (any-hover: hover) {
  .c-icon-button:hover {
    color: var(--_color__main);
    background-color: var(--_color__sub);
    filter: unset;
  }
  .c-icon-button:hover .c-icon-button__icon path {
    stroke: var(--_color__main);
  }
}
.c-icon-button:focus-visible {
  color: var(--_color__main);
  background-color: var(--_color__sub);
  filter: unset;
}
.c-icon-button:focus-visible .c-icon-button__icon path {
  stroke: var(--_color__main);
}

.c-icon-button__icon {
  aspect-ratio: 23/18;
}
.c-icon-button__icon path {
  stroke: var(--_color__sub);
  transition: stroke var(--_duration);
}

.c-icon-button--large {
  --_width: 300;
}

.c-icon-button--invert {
  --_color__main: var(--_color__sub-default);
  --_color__sub: var(--_color__main-default);
  border-color: var(--_color__main);
}

.c-icon-button--sub {
  --_color__main-default: var(--color__sub);
  --_color__sub-default: white;
}

.c-hr {
  width: 100%;
  height: 1px;
  background-color: var(--color__text);
}

.c-hamburger {
  --_width__hamburger: 50;
  --_height__hamburger: 50;
  --_color__hamburger-line: var(--color__text);
  --_spacing__hamburger-line: 9;
  --_width__hamburger-line: 30;
  --_height__hamburger-line: 2;
  position: relative;
  width: calc(var(--_width__hamburger, 50) / 16 * 1rem);
  height: calc(var(--_height__hamburger, 40) / 16 * 1rem);
}

.c-hamburger__line {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: block;
  transition:
    top 0.3s,
    rotate 0.3s,
    opacity 0.3s;
  width: calc(var(--_width__hamburger-line, 20) * 1px);
  height: calc(var(--_height__hamburger-line, 2) * 1px);
  background-color: var(--_color__hamburger-line, currentColor);
}

.c-hamburger__line:nth-of-type(1) {
  top: calc(50% - var(--_spacing__hamburger-line, 7) * 1px);
}

.c-hamburger__line:nth-of-type(3) {
  top: calc(50% + var(--_spacing__hamburger-line, 7) * 1px);
}

.c-hamburger[aria-expanded='true'] .c-hamburger__line:nth-of-type(1) {
  top: 50%;
  rotate: 45deg;
}

.c-hamburger[aria-expanded='true'] .c-hamburger__line:nth-of-type(2) {
  opacity: 0;
}

.c-hamburger[aria-expanded='true'] .c-hamburger__line:nth-of-type(3) {
  top: 50%;
  rotate: -45deg;
}

.c-button {
  --_max-width: 199;
  --_color__main-default: var(--color__main);
  --_color__sub-default: #fff;
  --_color__main: var(--_color__main-default);
  --_color__sub: var(--_color__sub-default);
  --_duration: var(--duration__base);
  display: grid;
  place-items: center;
  max-width: calc(var(--_max-width) / var(--font-size__base) * 1rem);
  width: 100%;
  color: var(--_color__sub);
  font-size: calc(16 / var(--font-size__base) * 1rem);
  font-weight: 700;
  background-color: var(--_color__main);
  border-width: 1px;
  border-style: solid;
  border-color: var(--_color__main);
  border-radius: 9999px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2));
  transform: translateZ(0);
  transition:
    color var(--_duration),
    background-color var(--_duration),
    border-color var(--_duration),
    filter var(--_duration);
  touch-action: manipulation;
  padding-block: calc(8 / var(--font-size__base) * 1rem);
  padding-inline: calc(8 / var(--font-size__base) * 1rem);
}
@media (any-hover: hover) {
  .c-button:hover {
    color: var(--_color__main);
    background-color: var(--_color__sub);
    filter: unset;
  }
}
.c-button:focus-visible {
  color: var(--_color__main);
  background-color: var(--_color__sub);
  filter: unset;
}

.c-button--invert {
  --_color__main: var(--_color__sub-default);
  --_color__sub: var(--_color__main-default);
  border-color: var(--_color__main);
}

.c-button--sub {
  --_color__main-default: var(--color__sub);
  --_color__sub-default: white;
}

/*
 * Projectレイヤー
 * プロジェクト固有のパターンであり、いくつかのComponentと、
 * それに該当しない要素によって構成されるものを定義します。
 * 記事一覧や、ユーザープロフィール、画像ギャラリーなど
 * コンテンツを構成する要素などが該当します。
 * クラス名は、p-* プレフィックスを使用します。
 * クラス名例：p-articles, p-profile, p-gallery
 */
.p-text-box__inner {
  --_max-width: 1114;
}

.p-text-box__title {
  font-size: calc(40 / var(--font-size__base) * 1rem);
  font-weight: 700;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .p-text-box__title {
    text-align: center;
    font-size: calc(32 / var(--font-size__base) * 1rem);
  }
}

.p-text-box__sub-title {
  font-size: calc(30 / var(--font-size__base) * 1rem);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.08em;
  padding-top: calc(118 / var(--font-size__base) * 1rem);
}
@media (max-width: 767px) {
  .p-text-box__sub-title {
    font-size: calc(22 / var(--font-size__base) * 1rem);
    padding-top: calc(50 / var(--font-size__base) * 1rem);
  }
}

.p-text-box__text {
  padding-top: calc(80 / var(--font-size__base) * 1rem);
}
@media (max-width: 767px) {
  .p-text-box__text {
    padding-top: calc(30 / var(--font-size__base) * 1rem);
  }
}

.p-text-box__text p {
  line-height: 2.2;
  letter-spacing: 0.08em;
}

.p-text-box__text p:not(:first-child) {
  padding-top: 2.2em;
}

@media (min-width: 768px) {
  .p-text-box--right .p-text-box__inner {
    --_max-width: 1184;
  }
}
.p-text-box--right .p-text-box__sub-title {
  font-size: calc(32 / var(--font-size__base) * 1rem);
}
@media (max-width: 767px) {
  .p-text-box--right .p-text-box__sub-title {
    font-size: calc(22 / var(--font-size__base) * 1rem);
  }
}
.p-text-box--right .p-text-box__content {
  width: fit-content;
  margin-left: auto;
}
@media (max-width: 767px) {
  .p-text-box--right .p-text-box__content {
    margin-left: 0;
  }
}
.p-text-box--right .p-text-box__text p {
  line-height: 2;
}

.p-table__inner {
  --_max-width: 760;
}

.p-table__content {
  display: grid;
  row-gap: 0;
}
@media (max-width: 767px) {
  .p-table__content {
    row-gap: calc(15 / var(--font-size__base) * 1rem);
  }
}

.p-table__item {
  display: grid;
  grid-template-columns: calc(152 / var(--font-size__base) * 1rem) 1fr;
  column-gap: calc(51 / var(--font-size__base) * 1rem);
}
@media (max-width: 767px) {
  .p-table__item {
    grid-template-columns: calc(88 / var(--font-size__base) * 1rem) 1fr;
    column-gap: calc(20 / var(--font-size__base) * 1rem);
  }
}

.p-table__label {
  font-size: calc(20 / var(--font-size__base) * 1rem);
  font-weight: 600;
  line-height: 1.94;
  letter-spacing: 0.08em;
  text-align: right;
}
@media (max-width: 767px) {
  .p-table__label {
    font-size: calc(16 / var(--font-size__base) * 1rem);
    letter-spacing: 0.05em;
    line-height: 1.8;
  }
}

.p-table__value {
  font-size: calc(18 / var(--font-size__base) * 1rem);
  line-height: 2.16;
  letter-spacing: 0.08em;
}
@media (max-width: 767px) {
  .p-table__value {
    font-size: calc(16 / var(--font-size__base) * 1rem);
    letter-spacing: 0.05em;
    line-height: 1.8;
  }
}

.p-table--profile .p-table__value {
  line-height: 2.2222222222;
  letter-spacing: unset;
}
@media (max-width: 767px) {
  .p-table--profile .p-table__value {
    line-height: 1.8;
  }
}

.p-mv {
  --_height__bottom: 42;
  height: calc(940 / var(--font-size__base) * 1rem);
  max-height: calc(
    100svh - var(--height__header) / var(--font-size__base) * 1rem -
      var(--wp-admin--admin-bar--height, 0)
  );
}
@media (max-width: 767px) {
  .p-mv {
    --_height__bottom: 60;
  }
}

.p-mv__bg-container {
  position: fixed;
  z-index: -1;
  top: calc(
    var(--height__header) * 1px + var(--wp-admin--admin-bar--height, 0)
  );
  left: 0;
  width: 100%;
  height: calc(100% - var(--_height__bottom) / var(--font-size__base) * 1rem);
  padding-inline: calc(
    var(--space-inline__base) / var(--font-size__base) * 1rem
  );
}

.p-mv__bg {
  width: 100%;
  height: 100%;
  background-image: url('../images/front-page/mv-bg.webp');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}

.p-mv__inner {
  --_padding-inline: 103;
  position: absolute;
  inset: 0;
  max-width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  padding-top: calc(
    var(--height__header) * 1px + var(--wp-admin--admin-bar--height, 0)
  );
  padding-bottom: calc(var(--_height__bottom) / var(--font-size__base) * 1rem);
}
@media (max-width: 767px) {
  .p-mv__inner {
    --_padding-inline: 40;
  }
}

.p-mv__title {
  font-size: calc(70 / var(--font-size__base) * 1rem);
  font-weight: 700;
  line-height: 1.5285714286;
  letter-spacing: 0.12em;
  color: #fff;
  filter: drop-shadow(
    0 calc(4 / var(--font-size__base) * 1rem)
      calc(4 / var(--font-size__base) * 1rem) rgba(0, 0, 0, 0.25)
  );
}
@media (max-width: 767px) {
  .p-mv__title {
    font-size: calc(38 / var(--font-size__base) * 1rem);
  }
}

.p-mv__bottom {
  position: fixed;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(var(--_height__bottom) / var(--font-size__base) * 1rem);
  display: grid;
  place-items: center;
  font-size: calc(15 / var(--font-size__base) * 1rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.11em;
  text-align: center;
  background-color: #fff;
}
@media (max-width: 767px) {
  .p-mv__bottom {
    font-size: calc(12 / var(--font-size__base) * 1rem);
    line-height: 1.5;
  }
}

.p-home__mv {
  padding-bottom: 40svh;
}
@media (max-width: 767px) {
  .p-home__mv {
    padding-bottom: 30svh;
  }
}

.p-home__vision {
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding-top: calc(280 / var(--font-size__base) * 1rem);
  padding-bottom: calc(322 / var(--font-size__base) * 1rem);
}
@media (max-width: 767px) {
  .p-home__vision {
    padding-top: calc(100 / var(--font-size__base) * 1rem);
    padding-bottom: calc(100 / var(--font-size__base) * 1rem);
  }
}
.p-home__vision .p-text-box--right {
  padding-top: calc(188 / var(--font-size__base) * 1rem);
}
@media (max-width: 767px) {
  .p-home__vision .p-text-box--right {
    padding-top: calc(60 / var(--font-size__base) * 1rem);
  }
}

.p-home__vision-image {
  background-color: #fff;
  padding-bottom: calc(202 / var(--font-size__base) * 1rem);
}
@media (max-width: 767px) {
  .p-home__vision-image {
    padding-bottom: calc(60 / var(--font-size__base) * 1rem);
  }
}

.p-home__about-us {
  background-color: #fff;
  padding-top: calc(100 / var(--font-size__base) * 1rem);
}
@media (max-width: 767px) {
  .p-home__about-us {
    padding-top: calc(40 / var(--font-size__base) * 1rem);
  }
}
.p-home__about-us .p-table {
  padding-top: calc(67 / var(--font-size__base) * 1rem);
  padding-left: calc(20 / var(--font-size__base) * 1rem);
}
@media (max-width: 767px) {
  .p-home__about-us .p-table {
    padding-top: calc(30 / var(--font-size__base) * 1rem);
    padding-left: 0;
  }
}

.p-home__profile {
  background-color: #fff;
  padding-top: calc(172 / var(--font-size__base) * 1rem);
}
@media (max-width: 767px) {
  .p-home__profile {
    padding-top: calc(100 / var(--font-size__base) * 1rem);
  }
}
.p-home__profile .p-table {
  padding-top: calc(100 / var(--font-size__base) * 1rem);
  padding-left: calc(20 / var(--font-size__base) * 1rem);
}
@media (max-width: 767px) {
  .p-home__profile .p-table {
    padding-top: calc(30 / var(--font-size__base) * 1rem);
    padding-left: 0;
  }
}

.p-home__logo {
  background-color: #fff;
  padding-top: calc(265 / var(--font-size__base) * 1rem);
}
@media (max-width: 767px) {
  .p-home__logo {
    padding-top: calc(100 / var(--font-size__base) * 1rem);
  }
}

.p-home__advisor {
  background-color: #fff;
}

.p-header {
  --_z-index__header-items: 100;
  --_z-index__header-drawer: 99;
  position: fixed;
  top: 0;
  width: 100%;
  padding-top: calc(46 / var(--font-size__base) * 1rem);
  padding-bottom: calc(10 / var(--font-size__base) * 1rem);
}
@media (max-width: 767px) {
  .p-header {
    padding-top: calc(10 / var(--font-size__base) * 1rem);
    padding-bottom: calc(10 / var(--font-size__base) * 1rem);
  }
}

.p-header__inner {
  max-width: 100%;
  --_padding-left: 71;
  display: grid;
  grid-template-columns: calc(295 / var(--font-size__base) * 1rem) 1fr;
  align-items: center;
  column-gap: 10px;
}
@media (max-width: 767px) {
  .p-header__inner {
    --_padding-left: var(--space-inline__base);
    grid-template-columns: 1fr calc(50 / var(--font-size__base) * 1rem);
  }
}

.p-header__left {
  position: relative;
  z-index: var(--_z-index__header-items);
  padding-block: calc(10 / var(--font-size__base) * 1rem);
}

@media (max-width: 767px) {
  .p-header__logo-image {
    max-width: calc(251 / var(--font-size__base) * 1rem);
  }
}

.p-header__cath-phrase {
  font-size: calc(14 / var(--font-size__base) * 1rem);
  font-weight: 700;
  padding-top: calc(5 / var(--font-size__base) * 1rem);
}
@media (max-width: 767px) {
  .p-header__cath-phrase {
    font-size: calc(12 / var(--font-size__base) * 1rem);
  }
}

.p-header__right {
  height: 100%;
}
@media (max-width: 767px) {
  .p-header__right {
    display: grid;
    place-items: center;
  }
}

.p-header__menu {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  column-gap: calc(43 / var(--font-size__base) * 1rem);
}

.p-header__links {
  height: 100%;
  display: flex;
  align-items: center;
  column-gap: calc(16 / var(--font-size__base) * 1rem);
}

.p-header__link-item {
  height: 100%;
  display: grid;
  place-items: center;
}

.p-header__link {
  height: 100%;
  display: grid;
  place-items: center;
  padding-inline: calc(20 / var(--font-size__base) * 1rem);
  font-size: calc(14 / var(--font-size__base) * 1rem);
  font-weight: 700;
}

.p-header__buttons {
  display: flex;
  align-items: center;
}

@media (max-width: 767px) {
  .p-header__hamburger {
    z-index: var(--_z-index__header-items);
    justify-self: end;
  }
}
.p-full-image__inner {
  max-width: 100%;
}

.p-footer {
  background-color: #fff;
  padding-top: calc(81 / var(--font-size__base) * 1rem);
}
@media (max-width: 767px) {
  .p-footer {
    padding-top: calc(60 / var(--font-size__base) * 1rem);
  }
}

.p-footer__inner {
  padding-top: calc(81 / var(--font-size__base) * 1rem);
  padding-bottom: calc(48 / var(--font-size__base) * 1rem);
}
@media (max-width: 767px) {
  .p-footer__inner {
    padding-block: calc(20 / var(--font-size__base) * 1rem);
  }
}

.p-footer__copyright {
  font-size: calc(12 / var(--font-size__base) * 1rem);
  line-height: 2;
  letter-spacing: 0.08em;
  text-align: center;
}

.p-drawer {
  --_duration: var(--duration__base);
  position: fixed;
  z-index: var(--_z-index--header-drawer, 99);
  inset: 0;
  padding-block: calc(45 / var(--font-size__base) * 1rem);
  transition: visibility var(--_duration);
  visibility: hidden;
}

.p-drawer__backdrop {
  position: fixed;
  z-index: 1;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
  transition:
    opacity var(--_duration),
    visibility var(--_duration);
  opacity: 0;
  visibility: hidden;
}

.p-drawer__content {
  overflow-y: auto;
  position: fixed;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
  padding-block: calc(45 / var(--font-size__base) * 1rem);
  transition:
    opacity var(--_duration),
    visibility var(--_duration);
  opacity: 0;
  visibility: hidden;
  display: grid;
  place-items: center;
}

.p-drawer__nav {
  display: grid;
  justify-content: center;
  row-gap: calc(50 / var(--font-size__base) * 1rem);
}

.p-drawer__links {
  display: grid;
  row-gap: calc(10 / var(--font-size__base) * 1rem);
  text-align: center;
}

.p-drawer__link {
  display: block;
  font-size: calc(20 / var(--font-size__base) * 1rem);
  padding-block: 1em;
}

.p-drawer__buttons {
  display: grid;
  justify-content: center;
  row-gap: calc(15 / var(--font-size__base) * 1rem);
}

.p-drawer__button {
  min-width: calc(200 / var(--font-size__base) * 1rem);
}

/* 開いた時 */
.p-drawer.is-visible .p-drawer__backdrop {
  opacity: 1;
  visibility: visible;
}

.p-drawer.is-visible .p-drawer__content {
  opacity: 1;
  visibility: visible;
}

.p-cta {
  background-color: var(--color__gray-light);
  padding-block: calc(178 / var(--font-size__base) * 1rem);
}
@media (max-width: 767px) {
  .p-cta {
    padding-block: calc(100 / var(--font-size__base) * 1rem);
  }
}

.p-cta__inner {
  --_width--left: 638;
  --_width--right: 609;
  --_column-gap: 41;
}
@media (max-width: 767px) {
  .p-cta__inner {
    grid-template-columns: 1fr;
  }
}

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

.p-cta__title {
  font-size: calc(40 / var(--font-size__base) * 1rem);
  font-weight: 700;
  line-height: 1.5;
}

.p-cta__right {
  text-align: center;
}
@media (max-width: 767px) {
  .p-cta__right {
    padding-top: calc(40 / var(--font-size__base) * 1rem);
  }
}

.p-cta__text {
  line-height: 2;
  letter-spacing: 0.08em;
}

.p-cta__button {
  display: flex;
  justify-content: center;
  padding-top: calc(65 / var(--font-size__base) * 1rem);
}
@media (max-width: 767px) {
  .p-cta__button {
    padding-top: calc(50 / var(--font-size__base) * 1rem);
  }
}

.p-business-card {
  padding-top: calc(94 / var(--font-size__base) * 1rem);
  padding-bottom: calc(87 / var(--font-size__base) * 1rem);
}
@media (max-width: 767px) {
  .p-business-card {
    padding-top: calc(60 / var(--font-size__base) * 1rem);
    padding-bottom: calc(60 / var(--font-size__base) * 1rem);
  }
}

.p-business-card__content {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding-block: calc(81 / var(--font-size__base) * 1rem);
}
@media (max-width: 767px) {
  .p-business-card__content {
    grid-template-columns: 1fr;
    padding-block: calc(40 / var(--font-size__base) * 1rem);
  }
}

.p-business-card__left {
  text-align: center;
  padding-bottom: calc(7 / var(--font-size__base) * 1rem);
}

.p-business-card__title {
  font-size: calc(40 / var(--font-size__base) * 1rem);
  font-weight: 700;
  line-height: 1.5;
}

.p-business-card__name {
  color: #000;
  line-height: 2.01;
  padding-top: calc(23 / var(--font-size__base) * 1rem);
}

.p-business-card__name-jp {
  font-size: calc(20 / var(--font-size__base) * 1rem);
  font-weight: 700;
  letter-spacing: 0.31em;
  padding-top: calc(32 / var(--font-size__base) * 1rem);
}
@media (max-width: 767px) {
  .p-business-card__name-jp {
    padding-top: calc(20 / var(--font-size__base) * 1rem);
  }
}

.p-business-card__name-en {
  font-size: calc(14 / var(--font-size__base) * 1rem);
  letter-spacing: 0.31em;
  padding-top: calc(15 / var(--font-size__base) * 1rem);
}

.p-business-card__right {
  padding-right: calc(167.5 / var(--font-size__base) * 1rem);
}
@media (max-width: 767px) {
  .p-business-card__right {
    padding-top: calc(40 / var(--font-size__base) * 1rem);
    padding-inline: calc(
      var(--space-inline__base) / var(--font-size__base) * 1rem
    );
  }
}

.p-business-card__profile {
  font-size: calc(16 / var(--font-size__base) * 1rem);
  line-height: 2;
  letter-spacing: 0.08em;
}

.p-business-card__profile p:not(:first-child) {
  padding-top: 2em;
}

/*
 * Utilityレイヤー
 * ComponentとProjectレイヤーのObjectのモディファイアで解決することが
 * 難しい・適切では無い、わずかなスタイルの調整のための便利クラスなどを定義します。
 * clearfixテクニックのためのルールセットが定義されているヘルパークラスも、
 * このレイヤーに含めます。
 * クラス名は、u-* プレフィックスを使用します。
 * クラス名例：u-clearfix, u-margin-bottom-small, u-text-center
 */
.u-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.u-padding-top--section {
  padding-top: calc(
    var(--space__section--base) * 1rem / var(--font-size__base)
  );
}

.u-padding-bottom--section {
  padding-bottom: calc(
    var(--space__section--base) * 1rem / var(--font-size__base)
  );
}

/* PCでのみ表示 */
@media (max-width: 767px) {
  .u-only--pc {
    display: none;
  }
}
/* スマホでのみ表示 */
@media (min-width: 768px) {
  .u-only--sp {
    display: none;
  }
}
.u-hover--opacity {
  transition: opacity var(--duration__base);
}
@media (any-hover: hover) {
  .u-hover--opacity:hover {
    opacity: var(--opacity__hover);
  }
}
.u-hover--opacity:focus-visible {
  opacity: var(--opacity__hover);
}

.u-hover--drop-shadow {
  transition: filter var(--duration__base);
}
@media (any-hover: hover) {
  .u-hover--drop-shadow:hover {
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2));
    transform: translateZ(0);
  }
}
.u-hover--drop-shadow:focus-visible {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2));
  transform: translateZ(0);
}

.u-font-weight--100 {
  font-weight: 100;
}

.u-font-weight--200 {
  font-weight: 200;
}

.u-font-weight--300 {
  font-weight: 300;
}

.u-font-weight--400 {
  font-weight: 400;
}

.u-font-weight--500 {
  font-weight: 500;
}

.u-font-weight--600 {
  font-weight: 600;
}

.u-font-weight--700 {
  font-weight: 700;
}

.u-font-weight--800 {
  font-weight: 800;
}

.u-font-weight--900 {
  font-weight: 900;
}

.u-br {
  display: inline-block;
}

.u-bg--brown {
  background-color: var(--color__brown);
}

.u-bg--orange {
  background-color: var(--color__orange);
}