@charset "UTF-8";
@-webkit-keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes scale {
  0% {
    scale: 0;
  }
  100% {
    scale: 1;
  }
}
@keyframes scale {
  0% {
    scale: 0;
  }
  100% {
    scale: 1;
  }
}
@-webkit-keyframes move_k-tori03 {
  0%, 90%, 100% {
    -webkit-transform: translate(-100px, 0);
            transform: translate(-100px, 0);
  }
  50%, 85% {
    -webkit-transform: translate(-35px, 0);
            transform: translate(-35px, 0);
  }
}
@keyframes move_k-tori03 {
  0%, 90%, 100% {
    -webkit-transform: translate(-100px, 0);
            transform: translate(-100px, 0);
  }
  50%, 85% {
    -webkit-transform: translate(-35px, 0);
            transform: translate(-35px, 0);
  }
}
@-webkit-keyframes About-human-stick {
  0% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  20% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  100% {
    rotate: -90deg;
    -webkit-transform-origin: 120px 215px;
            transform-origin: 120px 215px;
  }
}
@keyframes About-human-stick {
  0% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  20% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  100% {
    rotate: -90deg;
    -webkit-transform-origin: 120px 215px;
            transform-origin: 120px 215px;
  }
}
@-webkit-keyframes move_stem {
  0% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes move_stem {
  0% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@-webkit-keyframes move_stemcurve {
  0% {
    -webkit-transform: translate(0, 100px);
            transform: translate(0, 100px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes move_stemcurve {
  0% {
    -webkit-transform: translate(0, 100px);
            transform: translate(0, 100px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@-webkit-keyframes eye-blink {
  0%, 10%, 15%, 30%, 35%, 40%, 60%, 65%, 90%, 95% {
    opacity: 1;
  }
  11%, 14%, 31%, 34%, 36%, 39%, 61%, 64%, 91%, 94% {
    opacity: 0;
  }
}
@keyframes eye-blink {
  0%, 10%, 15%, 30%, 35%, 40%, 60%, 65%, 90%, 95% {
    opacity: 1;
  }
  11%, 14%, 31%, 34%, 36%, 39%, 61%, 64%, 91%, 94% {
    opacity: 0;
  }
}
@-webkit-keyframes moveCar {
  from {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  to {
    -webkit-transform: translateX(-100vw);
            transform: translateX(-100vw);
  }
}
@keyframes moveCar {
  from {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  to {
    -webkit-transform: translateX(-100vw);
            transform: translateX(-100vw);
  }
}
@-webkit-keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50%, 70% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50%, 70% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
/**
 * clamp関数の文字列を返す
 *
 * @param {Number} $size-at-min-width - 最小画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $size-at-max-width - 最大画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $min-width [optional] - 最小画面幅 (デフォルト: $min-width-default)
 * @param {Number} $max-width [optional] - 最大画面幅 (デフォルト: $max-width-default)
 * @return {String} CSS clamp関数を含む計算式
 *
 * @description
 * 画面幅に応じて値が滑らかに変化するレスポンシブな値を生成します。
 * 例えば、フォントサイズやマージン、パディングなどの値を画面幅に応じて
 * 自動的に調整することができます。
 *
 * @example
 *   // フォントサイズを16pxから24pxまで可変させる
 *   font-size: clamp-calc(16px, 24px);
 *
 *   // マージンを2remから4remまで可変させる（画面幅768px～1200px）
 *   margin: clamp-calc(2rem, 4rem, 768px, 1200px);
 *
 * @note
 * - 引数の単位は一貫している必要はありません（px, rem等が混在可能）
 * - 内部で全ての値をpxに変換して計算を行います
 * - 返り値は入力された$size-at-min-widthと同じ単位で返されます
 * - 負の値（マイナスマージンなど）にも対応しています
 *
 * @implementation
 * 1. 入力値を全てpxに変換
 * 2. 線形の傾きを計算
 * 3. y軸との交点を計算
 * 4. 必要に応じて最小値と最大値を入れ替え
 * 5. 元の単位に変換して最終的なclamp関数を構築
 */
/**
 * 与えられた値をピクセル(px)単位に変換する関数
 *
 * @param {Number} $value - 変換したい値（rem または px）
 * @return {Number} 変換後のピクセル値
 *
 * @example
 *   convert-to-px(1.5rem)  // 24px ($base-font-size が 16px の場合)
 *   convert-to-px(20px)    // 20px (そのまま返される)
 *   convert-to-px(2em)     // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - rem単位の場合: $base-font-sizeを基準にしてpxに変換
 * - px単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/**
 * ピクセル(px)単位の値をrem単位に変換する関数
 *
 * @param {Number} $px-value - 変換したい値（px または rem）
 * @return {Number} 変換後のrem値
 *
 * @example
 *   convert-to-rem(16px)   // 1rem ($base-font-size が 16px の場合)
 *   convert-to-rem(24px)   // 1.5rem ($base-font-size が 16px の場合)
 *   convert-to-rem(1.5rem) // 1.5rem (そのまま返される)
 *   convert-to-rem(2em)    // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - px単位の場合: $base-font-sizeを基準にしてremに変換
 * - rem単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @note
 * - レスポンシブデザインに適したrem単位への変換に使用
 * - $base-font-size はグローバルで定義されている必要がある
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/*
 * 補助関数：小数点以下の指定した桁数で四捨五入する関数
 */
/*
 * 補助関数：累乗を計算する関数
 * 引数：$number 底となる数
 *      $exponent 指数（正の整数のみ対応）
 */
:root {
  color-scheme: light dark;
  font-family: "Noto Sans JP", sans-serif;
}
:root .site-body-container {
  max-width: 1200px;
  padding: 0;
}

@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes scale {
  0% {
    scale: 0;
  }
  100% {
    scale: 1;
  }
}
@keyframes move_k-tori03 {
  0%, 90%, 100% {
    -webkit-transform: translate(-100px, 0);
            transform: translate(-100px, 0);
  }
  50%, 85% {
    -webkit-transform: translate(-35px, 0);
            transform: translate(-35px, 0);
  }
}
@keyframes About-human-stick {
  0% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  20% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  100% {
    rotate: -90deg;
    -webkit-transform-origin: 120px 215px;
            transform-origin: 120px 215px;
  }
}
@keyframes move_stem {
  0% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes move_stemcurve {
  0% {
    -webkit-transform: translate(0, 100px);
            transform: translate(0, 100px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes eye-blink {
  0%, 10%, 15%, 30%, 35%, 40%, 60%, 65%, 90%, 95% {
    opacity: 1;
  }
  11%, 14%, 31%, 34%, 36%, 39%, 61%, 64%, 91%, 94% {
    opacity: 0;
  }
}
@keyframes moveCar {
  from {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  to {
    -webkit-transform: translateX(-100vw);
            transform: translateX(-100vw);
  }
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50%, 70% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
/**
 * clamp関数の文字列を返す
 *
 * @param {Number} $size-at-min-width - 最小画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $size-at-max-width - 最大画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $min-width [optional] - 最小画面幅 (デフォルト: $min-width-default)
 * @param {Number} $max-width [optional] - 最大画面幅 (デフォルト: $max-width-default)
 * @return {String} CSS clamp関数を含む計算式
 *
 * @description
 * 画面幅に応じて値が滑らかに変化するレスポンシブな値を生成します。
 * 例えば、フォントサイズやマージン、パディングなどの値を画面幅に応じて
 * 自動的に調整することができます。
 *
 * @example
 *   // フォントサイズを16pxから24pxまで可変させる
 *   font-size: clamp-calc(16px, 24px);
 *
 *   // マージンを2remから4remまで可変させる（画面幅768px～1200px）
 *   margin: clamp-calc(2rem, 4rem, 768px, 1200px);
 *
 * @note
 * - 引数の単位は一貫している必要はありません（px, rem等が混在可能）
 * - 内部で全ての値をpxに変換して計算を行います
 * - 返り値は入力された$size-at-min-widthと同じ単位で返されます
 * - 負の値（マイナスマージンなど）にも対応しています
 *
 * @implementation
 * 1. 入力値を全てpxに変換
 * 2. 線形の傾きを計算
 * 3. y軸との交点を計算
 * 4. 必要に応じて最小値と最大値を入れ替え
 * 5. 元の単位に変換して最終的なclamp関数を構築
 */
/**
 * 与えられた値をピクセル(px)単位に変換する関数
 *
 * @param {Number} $value - 変換したい値（rem または px）
 * @return {Number} 変換後のピクセル値
 *
 * @example
 *   convert-to-px(1.5rem)  // 24px ($base-font-size が 16px の場合)
 *   convert-to-px(20px)    // 20px (そのまま返される)
 *   convert-to-px(2em)     // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - rem単位の場合: $base-font-sizeを基準にしてpxに変換
 * - px単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/**
 * ピクセル(px)単位の値をrem単位に変換する関数
 *
 * @param {Number} $px-value - 変換したい値（px または rem）
 * @return {Number} 変換後のrem値
 *
 * @example
 *   convert-to-rem(16px)   // 1rem ($base-font-size が 16px の場合)
 *   convert-to-rem(24px)   // 1.5rem ($base-font-size が 16px の場合)
 *   convert-to-rem(1.5rem) // 1.5rem (そのまま返される)
 *   convert-to-rem(2em)    // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - px単位の場合: $base-font-sizeを基準にしてremに変換
 * - rem単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @note
 * - レスポンシブデザインに適したrem単位への変換に使用
 * - $base-font-size はグローバルで定義されている必要がある
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/*
 * 補助関数：小数点以下の指定した桁数で四捨五入する関数
 */
/*
 * 補助関数：累乗を計算する関数
 * 引数：$number 底となる数
 *      $exponent 指数（正の整数のみ対応）
 */
.slider-vertical-pc {
  /*
  width: 100%;
  .swiper-wrapper{
      display: flex;
      transition-timing-function: linear !important;
  }
  .swiper-slide{
      height: 100%;
      .wp-block-cover{
          display: none !important;
      }
  }
  img{
      border-radius: global.$border-radius-min;
  }
  @include global.media_size_min('xl') {
      .img{
          max-height: 300px !important;
      }
  }
  @include global.media_size_min('xxxl') {
      .img{
          max-height: none;
      }
  }

   */
  /* CSSアニメーション */
}
.slider-vertical-pc .swiper-wrapper {
  max-width: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  gap: 10px;
}
.slider-vertical-pc .slider {
  -webkit-animation: scroll-left 60s infinite linear 0.5s both;
          animation: scroll-left 60s infinite linear 0.5s both;
  max-width: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}
.slider-vertical-pc .swiper-slide {
  width: 33.3333333333vw; /* 3はスライドの枚数 */
  /* スライドの画像 */
}
.slider-vertical-pc .swiper-slide.wp-block-image img {
  display: block;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100% !important;
}
@media (min-width: 992px) {
  .slider-vertical-pc .swiper-wrapper {
    display: -ms-grid;
    display: grid;
    gap: 10px;
  }
  .slider-vertical-pc .slider {
    display: -ms-grid;
    display: grid;
  }
  .slider-vertical-pc .swiper-slide {
    width: 100%;
    max-width: 360px;
  }
}
@media (min-width: 992px) {
  .slider-vertical-pc.slider-up .slider {
    -webkit-animation: scroll-up 60s infinite linear 0.5s both;
            animation: scroll-up 60s infinite linear 0.5s both;
  }
}
@media (min-width: 992px) {
  .slider-vertical-pc.slider-down .slider {
    -webkit-animation: scroll-down 60s infinite linear 0.5s both;
            animation: scroll-down 60s infinite linear 0.5s both;
  }
}
@-webkit-keyframes scroll-left {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes scroll-left {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@-webkit-keyframes scroll-right {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes scroll-right {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@-webkit-keyframes scroll-up {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@keyframes scroll-up {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@-webkit-keyframes scroll-down {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes scroll-down {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes scale {
  0% {
    scale: 0;
  }
  100% {
    scale: 1;
  }
}
@keyframes move_k-tori03 {
  0%, 90%, 100% {
    -webkit-transform: translate(-100px, 0);
            transform: translate(-100px, 0);
  }
  50%, 85% {
    -webkit-transform: translate(-35px, 0);
            transform: translate(-35px, 0);
  }
}
@keyframes About-human-stick {
  0% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  20% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  100% {
    rotate: -90deg;
    -webkit-transform-origin: 120px 215px;
            transform-origin: 120px 215px;
  }
}
@keyframes move_stem {
  0% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes move_stemcurve {
  0% {
    -webkit-transform: translate(0, 100px);
            transform: translate(0, 100px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes eye-blink {
  0%, 10%, 15%, 30%, 35%, 40%, 60%, 65%, 90%, 95% {
    opacity: 1;
  }
  11%, 14%, 31%, 34%, 36%, 39%, 61%, 64%, 91%, 94% {
    opacity: 0;
  }
}
@keyframes moveCar {
  from {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  to {
    -webkit-transform: translateX(-100vw);
            transform: translateX(-100vw);
  }
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50%, 70% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
/**
 * clamp関数の文字列を返す
 *
 * @param {Number} $size-at-min-width - 最小画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $size-at-max-width - 最大画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $min-width [optional] - 最小画面幅 (デフォルト: $min-width-default)
 * @param {Number} $max-width [optional] - 最大画面幅 (デフォルト: $max-width-default)
 * @return {String} CSS clamp関数を含む計算式
 *
 * @description
 * 画面幅に応じて値が滑らかに変化するレスポンシブな値を生成します。
 * 例えば、フォントサイズやマージン、パディングなどの値を画面幅に応じて
 * 自動的に調整することができます。
 *
 * @example
 *   // フォントサイズを16pxから24pxまで可変させる
 *   font-size: clamp-calc(16px, 24px);
 *
 *   // マージンを2remから4remまで可変させる（画面幅768px～1200px）
 *   margin: clamp-calc(2rem, 4rem, 768px, 1200px);
 *
 * @note
 * - 引数の単位は一貫している必要はありません（px, rem等が混在可能）
 * - 内部で全ての値をpxに変換して計算を行います
 * - 返り値は入力された$size-at-min-widthと同じ単位で返されます
 * - 負の値（マイナスマージンなど）にも対応しています
 *
 * @implementation
 * 1. 入力値を全てpxに変換
 * 2. 線形の傾きを計算
 * 3. y軸との交点を計算
 * 4. 必要に応じて最小値と最大値を入れ替え
 * 5. 元の単位に変換して最終的なclamp関数を構築
 */
/**
 * 与えられた値をピクセル(px)単位に変換する関数
 *
 * @param {Number} $value - 変換したい値（rem または px）
 * @return {Number} 変換後のピクセル値
 *
 * @example
 *   convert-to-px(1.5rem)  // 24px ($base-font-size が 16px の場合)
 *   convert-to-px(20px)    // 20px (そのまま返される)
 *   convert-to-px(2em)     // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - rem単位の場合: $base-font-sizeを基準にしてpxに変換
 * - px単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/**
 * ピクセル(px)単位の値をrem単位に変換する関数
 *
 * @param {Number} $px-value - 変換したい値（px または rem）
 * @return {Number} 変換後のrem値
 *
 * @example
 *   convert-to-rem(16px)   // 1rem ($base-font-size が 16px の場合)
 *   convert-to-rem(24px)   // 1.5rem ($base-font-size が 16px の場合)
 *   convert-to-rem(1.5rem) // 1.5rem (そのまま返される)
 *   convert-to-rem(2em)    // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - px単位の場合: $base-font-sizeを基準にしてremに変換
 * - rem単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @note
 * - レスポンシブデザインに適したrem単位への変換に使用
 * - $base-font-size はグローバルで定義されている必要がある
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/*
 * 補助関数：小数点以下の指定した桁数で四捨五入する関数
 */
/*
 * 補助関数：累乗を計算する関数
 * 引数：$number 底となる数
 *      $exponent 指数（正の整数のみ対応）
 */
.wp-block-buttons {
  font-family: "Noto Sans JP", sans-serif;
}
.wp-block-buttons.is-button-pagelink {
  font-size: clamp(16px, 14.182px + 0.485vw, 20px);
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 10px 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.wp-block-buttons.is-button-pagelink .wp-block-button {
  width: 100%;
}
.wp-block-buttons.is-button-pagelink .wp-block-button__link {
  background-color: transparent;
  color: #04133C;
  border: 1px solid #04133C;
  border-radius: 10px;
  position: relative;
  width: 100%;
}
.wp-block-buttons.is-button-pagelink .wp-block-button__link::after {
  content: none;
}
@media (any-hover: hover) {
  .wp-block-buttons.is-button-pagelink .wp-block-button__link:hover {
    background-color: #04133C;
    color: #ffffff;
    -webkit-filter: none !important;
            filter: none !important;
  }
  .wp-block-buttons.is-button-pagelink .wp-block-button__link:hover::after {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    color: #ffffff;
    font-weight: 600;
    font-size: 1em;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 1rem;
    translate: 0% -50%;
    rotate: 90deg;
  }
}
@media (min-width: 992px) {
  .wp-block-buttons.is-button-pagelink {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .wp-block-buttons.is-button-pagelink .wp-block-button {
    width: 100%;
    max-width: 280px;
  }
}
.wp-block-buttons.is-button-arrow {
  font-size: clamp(16px, 11.909px + 1.091vw, 25px);
}
.wp-block-buttons.is-button-arrow .wp-block-button__link {
  border-radius: 67px;
  position: relative;
  padding-block: clamp(18px, 15.273px + 0.727vw, 24px);
  -webkit-padding-start: clamp(36px, 30.545px + 1.455vw, 48px);
          padding-inline-start: clamp(36px, 30.545px + 1.455vw, 48px);
  -webkit-padding-end: clamp(108px, 91.636px + 4.364vw, 144px);
          padding-inline-end: clamp(108px, 91.636px + 4.364vw, 144px);
  font-size: clamp(18px, 15.273px + 0.727vw, 24px);
  background-color: #ffcc00;
  min-width: 280px;
  max-width: 100%;
}
.wp-block-buttons.is-button-arrow .wp-block-button__link::before {
  font-family: "Font Awesome 6 Free";
  content: "\f105";
  color: #ffffff;
  font-weight: 600;
  border: 2px solid #ffffff;
  border-radius: 50%;
  display: inline-block;
  width: clamp(30px, 25.455px + 1.212vw, 40px);
  height: clamp(30px, 25.455px + 1.212vw, 40px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 50%;
  right: clamp(36px, 30.545px + 1.455vw, 48px);
  translate: 50% -50%;
}
.wp-block-buttons.is-button-arrow .wp-block-button__link::after {
  content: "";
  display: block;
  border-bottom: solid 3px #fff;
  border-radius: 50px;
  width: clamp(52px, 43.818px + 2.182vw, 70px);
  position: absolute;
  top: 50%;
  right: clamp(36px, 30.545px + 1.455vw, 48px);
  translate: 5% -50%;
}
@media (any-hover: hover) {
  .wp-block-buttons.is-button-arrow .wp-block-button__link:hover {
    -webkit-transition: ease-in 0.1s;
    transition: ease-in 0.1s;
    -webkit-padding-start: clamp(72px, 61.091px + 2.909vw, 96px);
            padding-inline-start: clamp(72px, 61.091px + 2.909vw, 96px);
    -webkit-padding-end: clamp(72px, 61.091px + 2.909vw, 96px);
            padding-inline-end: clamp(72px, 61.091px + 2.909vw, 96px);
    background-color: #6330F5;
    color: #ffffff;
    -webkit-filter: none !important;
            filter: none !important;
  }
  .wp-block-buttons.is-button-arrow .wp-block-button__link:hover::before {
    -webkit-transition: ease-in 0.1s;
    transition: ease-in 0.1s;
    width: clamp(41px, 34.636px + 1.697vw, 55px);
    height: clamp(41px, 34.636px + 1.697vw, 55px);
    color: #ffffff;
    border: 2px solid #ffffff;
  }
  .wp-block-buttons.is-button-arrow .wp-block-button__link:hover::after {
    -webkit-transition: ease-in 0.1s;
    transition: ease-in 0.1s;
    width: 0px;
    -webkit-margin-start: clamp(16px, 14.182px + 0.485vw, 20px);
            margin-inline-start: clamp(16px, 14.182px + 0.485vw, 20px);
  }
}
.wp-block-buttons.is-button-square {
  font-size: clamp(16px, 14.182px + 0.485vw, 20px);
  border-radius: 10px;
}
.wp-block-buttons.is-button-square .wp-block-button__link {
  position: relative;
  padding: clamp(16px, 14.182px + 0.485vw, 20px) clamp(22px, 18.364px + 0.97vw, 30px);
  font-size: clamp(16px, 14.182px + 0.485vw, 20px);
  background-color: #FFF3C4;
  border: 3px solid #ffcc00;
  color: #000000;
  border-radius: 10px;
  min-width: 280px;
  max-width: 100%;
}
.wp-block-buttons.is-button-square .wp-block-button__link::after {
  font-family: "Font Awesome 6 Free";
  content: "\f0da";
  color: #ffcc00;
  font-weight: 600;
  font-size: 1em;
  display: inline-block;
  -webkit-margin-start: 2em;
          margin-inline-start: 2em;
}
@media (any-hover: hover) {
  .wp-block-buttons.is-button-square .wp-block-button__link:hover {
    background-color: #DED2FF;
    border: 3px solid #6330F5;
    -webkit-filter: none !important;
            filter: none !important;
  }
  .wp-block-buttons.is-button-square .wp-block-button__link:hover::after {
    color: #6330F5;
  }
}
.wp-block-buttons.is-button-capsule {
  font-size: clamp(16px, 14.182px + 0.485vw, 20px);
  border-radius: 67px;
}
.wp-block-buttons.is-button-capsule .wp-block-button__link {
  position: relative;
  padding: clamp(16px, 15.091px + 0.242vw, 18px) 4rem clamp(16px, 15.091px + 0.242vw, 18px) 2.5rem;
  font-size: clamp(16px, 14.182px + 0.485vw, 20px);
  background-color: #ffffff;
  border: 3px solid #ffcc00;
  color: #000000;
  border-radius: 67px;
  min-width: 280px;
  max-width: 100%;
  text-align: center;
}
.wp-block-buttons.is-button-capsule .wp-block-button__link::after {
  position: absolute;
  right: 2rem;
  top: calc(50% - 11px);
  font-family: "Font Awesome 6 Free";
  content: "\f0da";
  color: #ffffff;
  background-color: #ffcc00;
  border-radius: 50%;
  font-weight: 600;
  font-size: 1.5rem;
  display: inline-block;
  -webkit-margin-start: 0.5em;
          margin-inline-start: 0.5em;
  width: 1.5rem;
  height: 1.5rem;
  text-align: center;
}
@media (any-hover: hover) {
  .wp-block-buttons.is-button-capsule .wp-block-button__link:hover {
    border: 3px solid #6330F5;
    -webkit-filter: none !important;
            filter: none !important;
  }
  .wp-block-buttons.is-button-capsule .wp-block-button__link:hover::after {
    color: #ffffff;
    background-color: #6330F5;
  }
}
.wp-block-buttons.is-button-underline {
  font-size: clamp(16px, 14.182px + 0.485vw, 20px);
}
.wp-block-buttons.is-button-underline .wp-block-button__link {
  position: relative;
  padding: clamp(7px, 5.636px + 0.364vw, 10px);
  font-size: clamp(16px, 14.182px + 0.485vw, 20px);
  color: #000000;
  background-color: transparent;
}
.wp-block-buttons.is-button-underline .wp-block-button__link::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background-color: #ffcc00;
}
.wp-block-buttons.is-button-underline .wp-block-button__link::after {
  font-family: "Font Awesome 6 Free";
  content: "\f105";
  color: #ffcc00;
  font-weight: 600;
  font-size: 1em;
  display: inline-block;
  -webkit-margin-start: 0.5em;
          margin-inline-start: 0.5em;
}
@media (any-hover: hover) {
  .wp-block-buttons.is-button-underline .wp-block-button__link:hover {
    -webkit-filter: none !important;
            filter: none !important;
  }
  .wp-block-buttons.is-button-underline .wp-block-button__link:hover::before {
    background-color: #6330F5;
  }
  .wp-block-buttons.is-button-underline .wp-block-button__link:hover::after {
    color: #6330F5;
  }
}
.wp-block-buttons.is-button-sns a {
  border-radius: 10px;
  min-width: 300px;
}
.wp-block-buttons.is-color-mono .wp-block-button__link {
  background-color: #BEBEBE;
}
@media (any-hover: hover) {
  .wp-block-buttons.is-color-mono .wp-block-button__link:hover, .wp-block-buttons.is-color-mono .wp-block-button__link:active {
    background-color: #ffffff;
    color: #BEBEBE;
    -webkit-filter: none !important;
            filter: none !important;
  }
  .wp-block-buttons.is-color-mono .wp-block-button__link:hover::before, .wp-block-buttons.is-color-mono .wp-block-button__link:active::before {
    color: #BEBEBE;
    border: 2px solid #BEBEBE;
  }
}
.wp-block-buttons.is-color-qa .wp-block-button__link {
  background-color: #89B4E6;
}
@media (any-hover: hover) {
  .wp-block-buttons.is-color-qa .wp-block-button__link:hover {
    background-color: #ffffff;
    color: #89B4E6;
    -webkit-filter: none !important;
            filter: none !important;
  }
  .wp-block-buttons.is-color-qa .wp-block-button__link:hover::before {
    color: #89B4E6;
    border: 2px solid #89B4E6;
  }
}
.wp-block-buttons.domino-button {
  position: fixed;
  right: 0;
  bottom: 10%;
  z-index: 1000;
}
.wp-block-buttons.domino-button .wp-block-button__link {
  border-radius: 50px 0 0 50px;
  -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0;
  background-color: #89B4E6;
}
.wp-block-buttons.domino-button .wp-block-button__link:hover {
  -webkit-filter: none !important;
          filter: none !important;
}
.wp-block-buttons.domino-button .wp-block-button__link::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  -webkit-margin-end: 1em;
          margin-inline-end: 1em;
  background-image: url(../image/domino_icon.png);
  background-position: center center;
  background-color: #ffffff;
  border-radius: 50px;
}
.wp-block-buttons.domino-button .wp-block-button__link::after {
  font-family: "Font Awesome 6 Free";
  content: "\f105";
  display: inline-block;
  color: #ffffff;
  font-weight: 600;
  width: 10px;
  height: 35px;
  font-size: 2rem;
}
@media (min-width: 992px) {
  .wp-block-buttons.domino-button {
    right: 2%;
    bottom: 10%;
  }
  .wp-block-buttons.domino-button .wp-block-button__link {
    border-radius: 67px;
    font-size: 1.125rem;
  }
  .wp-block-buttons.domino-button .wp-block-button__link::after {
    display: none;
  }
}

.entry-button {
  color: #ffffff;
}
.entry-button a, .entry-button .wp-block-button__link {
  border-radius: 67px !important;
  background-color: #04133C !important;
  color: #ffffff;
  -webkit-transition: ease-in 0.1s;
  transition: ease-in 0.1s;
  border: none !important;
  text-align: center;
  font-weight: bold;
  font-size: 1.2rem;
}
.entry-button a:hover, .entry-button .wp-block-button__link:hover {
  background-color: #AACCF3 !important;
  color: #ffffff !important;
  -webkit-filter: none !important;
          filter: none !important;
}

#docsbotai-root {
  position: relative;
  z-index: 1999 !important;
}

@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes scale {
  0% {
    scale: 0;
  }
  100% {
    scale: 1;
  }
}
@keyframes move_k-tori03 {
  0%, 90%, 100% {
    -webkit-transform: translate(-100px, 0);
            transform: translate(-100px, 0);
  }
  50%, 85% {
    -webkit-transform: translate(-35px, 0);
            transform: translate(-35px, 0);
  }
}
@keyframes About-human-stick {
  0% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  20% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  100% {
    rotate: -90deg;
    -webkit-transform-origin: 120px 215px;
            transform-origin: 120px 215px;
  }
}
@keyframes move_stem {
  0% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes move_stemcurve {
  0% {
    -webkit-transform: translate(0, 100px);
            transform: translate(0, 100px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes eye-blink {
  0%, 10%, 15%, 30%, 35%, 40%, 60%, 65%, 90%, 95% {
    opacity: 1;
  }
  11%, 14%, 31%, 34%, 36%, 39%, 61%, 64%, 91%, 94% {
    opacity: 0;
  }
}
@keyframes moveCar {
  from {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  to {
    -webkit-transform: translateX(-100vw);
            transform: translateX(-100vw);
  }
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50%, 70% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
/**
 * clamp関数の文字列を返す
 *
 * @param {Number} $size-at-min-width - 最小画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $size-at-max-width - 最大画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $min-width [optional] - 最小画面幅 (デフォルト: $min-width-default)
 * @param {Number} $max-width [optional] - 最大画面幅 (デフォルト: $max-width-default)
 * @return {String} CSS clamp関数を含む計算式
 *
 * @description
 * 画面幅に応じて値が滑らかに変化するレスポンシブな値を生成します。
 * 例えば、フォントサイズやマージン、パディングなどの値を画面幅に応じて
 * 自動的に調整することができます。
 *
 * @example
 *   // フォントサイズを16pxから24pxまで可変させる
 *   font-size: clamp-calc(16px, 24px);
 *
 *   // マージンを2remから4remまで可変させる（画面幅768px～1200px）
 *   margin: clamp-calc(2rem, 4rem, 768px, 1200px);
 *
 * @note
 * - 引数の単位は一貫している必要はありません（px, rem等が混在可能）
 * - 内部で全ての値をpxに変換して計算を行います
 * - 返り値は入力された$size-at-min-widthと同じ単位で返されます
 * - 負の値（マイナスマージンなど）にも対応しています
 *
 * @implementation
 * 1. 入力値を全てpxに変換
 * 2. 線形の傾きを計算
 * 3. y軸との交点を計算
 * 4. 必要に応じて最小値と最大値を入れ替え
 * 5. 元の単位に変換して最終的なclamp関数を構築
 */
/**
 * 与えられた値をピクセル(px)単位に変換する関数
 *
 * @param {Number} $value - 変換したい値（rem または px）
 * @return {Number} 変換後のピクセル値
 *
 * @example
 *   convert-to-px(1.5rem)  // 24px ($base-font-size が 16px の場合)
 *   convert-to-px(20px)    // 20px (そのまま返される)
 *   convert-to-px(2em)     // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - rem単位の場合: $base-font-sizeを基準にしてpxに変換
 * - px単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/**
 * ピクセル(px)単位の値をrem単位に変換する関数
 *
 * @param {Number} $px-value - 変換したい値（px または rem）
 * @return {Number} 変換後のrem値
 *
 * @example
 *   convert-to-rem(16px)   // 1rem ($base-font-size が 16px の場合)
 *   convert-to-rem(24px)   // 1.5rem ($base-font-size が 16px の場合)
 *   convert-to-rem(1.5rem) // 1.5rem (そのまま返される)
 *   convert-to-rem(2em)    // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - px単位の場合: $base-font-sizeを基準にしてremに変換
 * - rem単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @note
 * - レスポンシブデザインに適したrem単位への変換に使用
 * - $base-font-size はグローバルで定義されている必要がある
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/*
 * 補助関数：小数点以下の指定した桁数で四捨五入する関数
 */
/*
 * 補助関数：累乗を計算する関数
 * 引数：$number 底となる数
 *      $exponent 指数（正の整数のみ対応）
 */
:root {
  font-size: 16px;
}

:is(h2, h3, h4, h5, h6).wp-block-heading {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: bold;
  position: relative;
}

h2.wp-block-heading {
  font-size: clamp(24px, 16.727px + 1.939vw, 40px);
  text-align: center;
  -webkit-padding-after: clamp(12px, 8.364px + 0.97vw, 20px);
          padding-block-end: clamp(12px, 8.364px + 0.97vw, 20px);
}
h2.wp-block-heading::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 63px;
  height: 5px;
  border-radius: 5px;
  translate: -50%;
  background: #04133C;
}
h3.wp-block-heading {
  font-size: clamp(20px, 15.455px + 1.212vw, 30px);
  padding-block: clamp(16px, 14.182px + 0.485vw, 20px);
  -webkit-padding-start: clamp(24px, 16.727px + 1.939vw, 40px);
          padding-inline-start: clamp(24px, 16.727px + 1.939vw, 40px);
  background-color: #ffffff;
}
h3.wp-block-heading::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 100%;
  background: #04133C;
}
h4.wp-block-heading {
  font-size: clamp(18px, 14.818px + 0.848vw, 25px);
  -webkit-padding-after: clamp(12px, 10.182px + 0.485vw, 16px);
          padding-block-end: clamp(12px, 10.182px + 0.485vw, 16px);
  -webkit-margin-after: 2rem;
          margin-block-end: 2rem;
}
h4.wp-block-heading::before, h4.wp-block-heading::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
}
h4.wp-block-heading::before {
  width: 25%;
  background: #04133C;
  z-index: 1;
}
h4.wp-block-heading::after {
  width: 100%;
  background: #d9d9d9;
  z-index: 0;
}
h5.wp-block-heading {
  font-size: clamp(18px, 14.818px + 0.848vw, 25px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75em;
}
h5.wp-block-heading::before {
  content: "";
  width: 1em;
  aspect-ratio: 1/1;
  background-color: #04133C;
}
h6.wp-block-heading {
  font-size: clamp(16px, 12.818px + 0.848vw, 23px);
  -webkit-padding-after: clamp(12px, 10.182px + 0.485vw, 16px);
          padding-block-end: clamp(12px, 10.182px + 0.485vw, 16px);
  display: inline-block;
}
h6.wp-block-heading::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: #d9d9d9;
}
.link-mark a[href$=".pdf"]::before,
.link-mark a[href$=".PDF"]::before {
  content: "\f1c1";
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  padding-right: 0.5em;
}
.link-mark a[href$=".pdf"]:hover::before,
.link-mark a[href$=".PDF"]:hover::before {
  color: #fff;
}
.link-mark a[href$=".doc"]:before,
.link-mark a[href$=".docx"]:before {
  content: "\f1c2";
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  padding-right: 0.5em;
}
.link-mark a[href$=".doc"]:hover::before,
.link-mark a[href$=".docx"]:hover::before {
  color: #fff;
}
.link-mark a[href$=".xls"]:before,
.link-mark a[href$=".xlsx"]:before {
  content: "\f1c3";
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  padding-right: 0.5em;
}
.link-mark a[href$=".xls"]:hover::before,
.link-mark a[href$=".xlsx"]:hover::before {
  color: #fff;
}
.link-mark a[href$=".csv"]:before,
.link-mark a[href$=".tsv"]:before {
  content: "\f6dd";
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  padding-right: 0.5em;
}
.link-mark a[href$=".csv"]:hover::before,
.link-mark a[href$=".tsv"]:hover::before {
  color: #fff;
}

.is-question {
  color: #F5CE30;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  gap: 10px;
  margin-bottom: 2rem;
}
.is-question .title {
  font-size: clamp(32px, 28.364px + 0.97vw, 40px);
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 0;
}
.is-question .before-title {
  font-size: clamp(16px, 14.182px + 0.485vw, 20px);
  color: #F5CE30;
  font-family: montserrat, sans-serif;
  border-bottom: 1px solid #F5CE30;
  line-height: 1.25em;
  margin-bottom: 0;
}

.is-text-point {
  display: inline-block;
  -webkit-margin-end: 0.75rem;
          margin-inline-end: 0.75rem;
  padding: 10px 14px;
  background-color: #F5CE30;
  font-family: montserrat, sans-serif;
  font-size: clamp(16px, 14.182px + 0.485vw, 20px);
  border-radius: 25px;
  color: #ffffff;
  line-height: 1em;
}

.vk_step.is-number-step {
  --number-step-size:55px;
  --number-step-border:10px;
}
.vk_step.is-number-step .vk_step_item {
  padding-left: calc(var(--number-step-size) + 20px);
}
.vk_step.is-number-step .vk_step_item::before {
  background: #ffcc00;
  width: var(--number-step-border);
  top: calc(var(--number-step-size) / 2);
  bottom: calc(-1 * var(--number-step-size) / 2);
  left: calc(var(--number-step-size) / 2 - var(--number-step-border) / 2);
}
.vk_step.is-number-step .vk_step_item_dot {
  background-color: #ffcc00 !important;
  top: 0.5rem !important;
  width: var(--number-step-size) !important;
  height: var(--number-step-size) !important;
  padding-top: calc(var(--number-step-size) / 3) !important;
}
.vk_step.is-number-step .vk_step_item_dot .vk_step_item_dot_num {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(30px, 20.909px + 2.424vw, 50px);
  font-weight: bold;
}
@media (min-width: 992px) {
  .vk_step.is-number-step {
    --number-step-size:75px;
    --number-step-border:10px;
  }
}

.wp-block-vk-blocks-accordion {
  --accordion-trigger-icon:15px;
  font-family: "Noto Sans JP", sans-serif;
  border: none !important;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1607843137);
          box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1607843137);
  border-radius: 15px;
}
.wp-block-vk-blocks-accordion .wp-block-vk-blocks-accordion-trigger {
  font-size: clamp(24px, 21.273px + 0.727vw, 30px);
  font-weight: bold;
  text-align: center;
  padding-right: calc(var(--accordion-trigger-icon) + 1em);
}
.wp-block-vk-blocks-accordion .wp-block-vk-blocks-accordion-trigger p {
  margin: 0 !important;
}
.wp-block-vk-blocks-accordion .vk_accordion-toggle.vk_accordion-toggle-open::after, .wp-block-vk-blocks-accordion .vk_accordion-toggle.vk_accordion-toggle-close::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 600;
  -webkit-transform: none;
          transform: none;
  border: none;
  width: auto;
  height: auto;
  translate: 0 -50%;
  right: var(--accordion-trigger-icon);
}
.wp-block-vk-blocks-accordion .vk_accordion-toggle.vk_accordion-toggle-open {
  border: none !important;
}
.wp-block-vk-blocks-accordion .vk_accordion-toggle.vk_accordion-toggle-open::after {
  content: "\f068";
}
.wp-block-vk-blocks-accordion .vk_accordion-toggle.vk_accordion-toggle-close::after {
  content: "+";
}
.wp-block-vk-blocks-accordion .wp-block-vk-blocks-accordion-target {
  background-color: #ffffff;
  font-size: clamp(14px, 12.182px + 0.485vw, 18px);
}
@media (min-width: 992px) {
  .wp-block-vk-blocks-accordion {
    --accordion-trigger-icon:30px;
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes scale {
  0% {
    scale: 0;
  }
  100% {
    scale: 1;
  }
}
@keyframes move_k-tori03 {
  0%, 90%, 100% {
    -webkit-transform: translate(-100px, 0);
            transform: translate(-100px, 0);
  }
  50%, 85% {
    -webkit-transform: translate(-35px, 0);
            transform: translate(-35px, 0);
  }
}
@keyframes About-human-stick {
  0% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  20% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  100% {
    rotate: -90deg;
    -webkit-transform-origin: 120px 215px;
            transform-origin: 120px 215px;
  }
}
@keyframes move_stem {
  0% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes move_stemcurve {
  0% {
    -webkit-transform: translate(0, 100px);
            transform: translate(0, 100px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes eye-blink {
  0%, 10%, 15%, 30%, 35%, 40%, 60%, 65%, 90%, 95% {
    opacity: 1;
  }
  11%, 14%, 31%, 34%, 36%, 39%, 61%, 64%, 91%, 94% {
    opacity: 0;
  }
}
@keyframes moveCar {
  from {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  to {
    -webkit-transform: translateX(-100vw);
            transform: translateX(-100vw);
  }
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50%, 70% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
/**
 * clamp関数の文字列を返す
 *
 * @param {Number} $size-at-min-width - 最小画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $size-at-max-width - 最大画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $min-width [optional] - 最小画面幅 (デフォルト: $min-width-default)
 * @param {Number} $max-width [optional] - 最大画面幅 (デフォルト: $max-width-default)
 * @return {String} CSS clamp関数を含む計算式
 *
 * @description
 * 画面幅に応じて値が滑らかに変化するレスポンシブな値を生成します。
 * 例えば、フォントサイズやマージン、パディングなどの値を画面幅に応じて
 * 自動的に調整することができます。
 *
 * @example
 *   // フォントサイズを16pxから24pxまで可変させる
 *   font-size: clamp-calc(16px, 24px);
 *
 *   // マージンを2remから4remまで可変させる（画面幅768px～1200px）
 *   margin: clamp-calc(2rem, 4rem, 768px, 1200px);
 *
 * @note
 * - 引数の単位は一貫している必要はありません（px, rem等が混在可能）
 * - 内部で全ての値をpxに変換して計算を行います
 * - 返り値は入力された$size-at-min-widthと同じ単位で返されます
 * - 負の値（マイナスマージンなど）にも対応しています
 *
 * @implementation
 * 1. 入力値を全てpxに変換
 * 2. 線形の傾きを計算
 * 3. y軸との交点を計算
 * 4. 必要に応じて最小値と最大値を入れ替え
 * 5. 元の単位に変換して最終的なclamp関数を構築
 */
/**
 * 与えられた値をピクセル(px)単位に変換する関数
 *
 * @param {Number} $value - 変換したい値（rem または px）
 * @return {Number} 変換後のピクセル値
 *
 * @example
 *   convert-to-px(1.5rem)  // 24px ($base-font-size が 16px の場合)
 *   convert-to-px(20px)    // 20px (そのまま返される)
 *   convert-to-px(2em)     // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - rem単位の場合: $base-font-sizeを基準にしてpxに変換
 * - px単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/**
 * ピクセル(px)単位の値をrem単位に変換する関数
 *
 * @param {Number} $px-value - 変換したい値（px または rem）
 * @return {Number} 変換後のrem値
 *
 * @example
 *   convert-to-rem(16px)   // 1rem ($base-font-size が 16px の場合)
 *   convert-to-rem(24px)   // 1.5rem ($base-font-size が 16px の場合)
 *   convert-to-rem(1.5rem) // 1.5rem (そのまま返される)
 *   convert-to-rem(2em)    // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - px単位の場合: $base-font-sizeを基準にしてremに変換
 * - rem単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @note
 * - レスポンシブデザインに適したrem単位への変換に使用
 * - $base-font-size はグローバルで定義されている必要がある
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/*
 * 補助関数：小数点以下の指定した桁数で四捨五入する関数
 */
/*
 * 補助関数：累乗を計算する関数
 * 引数：$number 底となる数
 *      $exponent 指数（正の整数のみ対応）
 */
.wp-block-table {
  font-size: clamp(16px, 14.182px + 0.485vw, 20px);
}
.wp-block-table thead {
  background-color: #04133C;
  color: #ffffff;
  font-size: clamp(16px, 14.182px + 0.485vw, 20px);
}
.wp-block-table tbody {
  text-align: center;
}
.wp-block-table tbody tr td {
  font-size: clamp(14px, 12.182px + 0.485vw, 18px);
  background-color: #ffffff;
}
.wp-block-table tbody tr td:first-child {
  background-color: #EFEFEF;
  font-weight: bold;
  font-size: clamp(16px, 14.182px + 0.485vw, 20px);
}

@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes scale {
  0% {
    scale: 0;
  }
  100% {
    scale: 1;
  }
}
@keyframes move_k-tori03 {
  0%, 90%, 100% {
    -webkit-transform: translate(-100px, 0);
            transform: translate(-100px, 0);
  }
  50%, 85% {
    -webkit-transform: translate(-35px, 0);
            transform: translate(-35px, 0);
  }
}
@keyframes About-human-stick {
  0% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  20% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  100% {
    rotate: -90deg;
    -webkit-transform-origin: 120px 215px;
            transform-origin: 120px 215px;
  }
}
@keyframes move_stem {
  0% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes move_stemcurve {
  0% {
    -webkit-transform: translate(0, 100px);
            transform: translate(0, 100px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes eye-blink {
  0%, 10%, 15%, 30%, 35%, 40%, 60%, 65%, 90%, 95% {
    opacity: 1;
  }
  11%, 14%, 31%, 34%, 36%, 39%, 61%, 64%, 91%, 94% {
    opacity: 0;
  }
}
@keyframes moveCar {
  from {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  to {
    -webkit-transform: translateX(-100vw);
            transform: translateX(-100vw);
  }
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50%, 70% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
/**
 * clamp関数の文字列を返す
 *
 * @param {Number} $size-at-min-width - 最小画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $size-at-max-width - 最大画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $min-width [optional] - 最小画面幅 (デフォルト: $min-width-default)
 * @param {Number} $max-width [optional] - 最大画面幅 (デフォルト: $max-width-default)
 * @return {String} CSS clamp関数を含む計算式
 *
 * @description
 * 画面幅に応じて値が滑らかに変化するレスポンシブな値を生成します。
 * 例えば、フォントサイズやマージン、パディングなどの値を画面幅に応じて
 * 自動的に調整することができます。
 *
 * @example
 *   // フォントサイズを16pxから24pxまで可変させる
 *   font-size: clamp-calc(16px, 24px);
 *
 *   // マージンを2remから4remまで可変させる（画面幅768px～1200px）
 *   margin: clamp-calc(2rem, 4rem, 768px, 1200px);
 *
 * @note
 * - 引数の単位は一貫している必要はありません（px, rem等が混在可能）
 * - 内部で全ての値をpxに変換して計算を行います
 * - 返り値は入力された$size-at-min-widthと同じ単位で返されます
 * - 負の値（マイナスマージンなど）にも対応しています
 *
 * @implementation
 * 1. 入力値を全てpxに変換
 * 2. 線形の傾きを計算
 * 3. y軸との交点を計算
 * 4. 必要に応じて最小値と最大値を入れ替え
 * 5. 元の単位に変換して最終的なclamp関数を構築
 */
/**
 * 与えられた値をピクセル(px)単位に変換する関数
 *
 * @param {Number} $value - 変換したい値（rem または px）
 * @return {Number} 変換後のピクセル値
 *
 * @example
 *   convert-to-px(1.5rem)  // 24px ($base-font-size が 16px の場合)
 *   convert-to-px(20px)    // 20px (そのまま返される)
 *   convert-to-px(2em)     // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - rem単位の場合: $base-font-sizeを基準にしてpxに変換
 * - px単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/**
 * ピクセル(px)単位の値をrem単位に変換する関数
 *
 * @param {Number} $px-value - 変換したい値（px または rem）
 * @return {Number} 変換後のrem値
 *
 * @example
 *   convert-to-rem(16px)   // 1rem ($base-font-size が 16px の場合)
 *   convert-to-rem(24px)   // 1.5rem ($base-font-size が 16px の場合)
 *   convert-to-rem(1.5rem) // 1.5rem (そのまま返される)
 *   convert-to-rem(2em)    // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - px単位の場合: $base-font-sizeを基準にしてremに変換
 * - rem単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @note
 * - レスポンシブデザインに適したrem単位への変換に使用
 * - $base-font-size はグローバルで定義されている必要がある
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/*
 * 補助関数：小数点以下の指定した桁数で四捨五入する関数
 */
/*
 * 補助関数：累乗を計算する関数
 * 引数：$number 底となる数
 *      $exponent 指数（正の整数のみ対応）
 */
.senior-interview-list .wp-block-post-template {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
  row-gap: 4rem;
}
.senior-interview-list .interview {
  -webkit-margin-before: 0;
          margin-block-start: 0;
}
@media (min-width: 768px) {
  .senior-interview-list .wp-block-post-template {
    -ms-grid-columns: 1fr 4rem 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
  }
}
@media (min-width: 992px) {
  .senior-interview-list .wp-block-post-template {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes scale {
  0% {
    scale: 0;
  }
  100% {
    scale: 1;
  }
}
@keyframes move_k-tori03 {
  0%, 90%, 100% {
    -webkit-transform: translate(-100px, 0);
            transform: translate(-100px, 0);
  }
  50%, 85% {
    -webkit-transform: translate(-35px, 0);
            transform: translate(-35px, 0);
  }
}
@keyframes About-human-stick {
  0% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  20% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  100% {
    rotate: -90deg;
    -webkit-transform-origin: 120px 215px;
            transform-origin: 120px 215px;
  }
}
@keyframes move_stem {
  0% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes move_stemcurve {
  0% {
    -webkit-transform: translate(0, 100px);
            transform: translate(0, 100px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes eye-blink {
  0%, 10%, 15%, 30%, 35%, 40%, 60%, 65%, 90%, 95% {
    opacity: 1;
  }
  11%, 14%, 31%, 34%, 36%, 39%, 61%, 64%, 91%, 94% {
    opacity: 0;
  }
}
@keyframes moveCar {
  from {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  to {
    -webkit-transform: translateX(-100vw);
            transform: translateX(-100vw);
  }
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50%, 70% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
/**
 * clamp関数の文字列を返す
 *
 * @param {Number} $size-at-min-width - 最小画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $size-at-max-width - 最大画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $min-width [optional] - 最小画面幅 (デフォルト: $min-width-default)
 * @param {Number} $max-width [optional] - 最大画面幅 (デフォルト: $max-width-default)
 * @return {String} CSS clamp関数を含む計算式
 *
 * @description
 * 画面幅に応じて値が滑らかに変化するレスポンシブな値を生成します。
 * 例えば、フォントサイズやマージン、パディングなどの値を画面幅に応じて
 * 自動的に調整することができます。
 *
 * @example
 *   // フォントサイズを16pxから24pxまで可変させる
 *   font-size: clamp-calc(16px, 24px);
 *
 *   // マージンを2remから4remまで可変させる（画面幅768px～1200px）
 *   margin: clamp-calc(2rem, 4rem, 768px, 1200px);
 *
 * @note
 * - 引数の単位は一貫している必要はありません（px, rem等が混在可能）
 * - 内部で全ての値をpxに変換して計算を行います
 * - 返り値は入力された$size-at-min-widthと同じ単位で返されます
 * - 負の値（マイナスマージンなど）にも対応しています
 *
 * @implementation
 * 1. 入力値を全てpxに変換
 * 2. 線形の傾きを計算
 * 3. y軸との交点を計算
 * 4. 必要に応じて最小値と最大値を入れ替え
 * 5. 元の単位に変換して最終的なclamp関数を構築
 */
/**
 * 与えられた値をピクセル(px)単位に変換する関数
 *
 * @param {Number} $value - 変換したい値（rem または px）
 * @return {Number} 変換後のピクセル値
 *
 * @example
 *   convert-to-px(1.5rem)  // 24px ($base-font-size が 16px の場合)
 *   convert-to-px(20px)    // 20px (そのまま返される)
 *   convert-to-px(2em)     // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - rem単位の場合: $base-font-sizeを基準にしてpxに変換
 * - px単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/**
 * ピクセル(px)単位の値をrem単位に変換する関数
 *
 * @param {Number} $px-value - 変換したい値（px または rem）
 * @return {Number} 変換後のrem値
 *
 * @example
 *   convert-to-rem(16px)   // 1rem ($base-font-size が 16px の場合)
 *   convert-to-rem(24px)   // 1.5rem ($base-font-size が 16px の場合)
 *   convert-to-rem(1.5rem) // 1.5rem (そのまま返される)
 *   convert-to-rem(2em)    // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - px単位の場合: $base-font-sizeを基準にしてremに変換
 * - rem単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @note
 * - レスポンシブデザインに適したrem単位への変換に使用
 * - $base-font-size はグローバルで定義されている必要がある
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/*
 * 補助関数：小数点以下の指定した桁数で四捨五入する関数
 */
/*
 * 補助関数：累乗を計算する関数
 * 引数：$number 底となる数
 *      $exponent 指数（正の整数のみ対応）
 */
.card-senior-top {
  position: relative;
  --card-icon-width: 40px;
}
.card-senior-top:hover .attachment-post-thumbnail, .card-senior-top:active .attachment-post-thumbnail {
  -webkit-transform: scale(1.05, 1.05);
          transform: scale(1.05, 1.05);
}
.card-senior-top .card-title-container {
  color: #ffffff;
}
.card-senior-top .taxonomy-interview-dept, .card-senior-top .taxonomy-interview-dept a {
  color: #ffffff;
  margin: 0;
  font-weight: bold;
  font-size: clamp(13px, 7.545px + 1.455vw, 25px);
}
.card-senior-top .card-title {
  gap: 10px;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  padding-right: 0;
  min-height: var(--card-icon-width);
  position: relative;
}
.card-senior-top .card-title .name {
  gap: 0;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}
.card-senior-top .card-title .wp-block-post-title {
  font-size: clamp(18px, 14.818px + 0.848vw, 25px);
}
.card-senior-top .card-title .wp-block-post-title, .card-senior-top .card-title .wp-block-post-title .after-title {
  color: #ffffff;
  margin: 0;
  font-weight: bold;
}
.card-senior-top .card-title .wp-block-post-title .after-title {
  font-size: clamp(13px, 7.545px + 1.455vw, 25px);
}
.card-senior-top .card-title .taxonomy-interview-year, .card-senior-top .card-title .taxonomy-interview-year a {
  color: #ffffff;
  margin: 0;
  font-weight: bold;
  font-size: clamp(10px, 6.364px + 0.97vw, 18px);
}
.card-senior-top .wp-block-post-featured-image {
  position: static;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 20px;
  height: clamp(240px, 144.545px + 25.455vw, 450px);
}
.card-senior-top .wp-block-post-featured-image a {
  position: static;
  z-index: 2;
}
.card-senior-top .wp-block-post-featured-image a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}
.card-senior-top .wp-block-post-featured-image a .attachment-post-thumbnail {
  -webkit-transition: ease-in 0.2s;
  transition: ease-in 0.2s;
  width: 100%;
  height: 100%;
}
@media (min-width: 992px) {
  .card-senior-top .card-title {
    gap: 1em;
  }
  .card-senior-top .card-title .name {
    -ms-flex-wrap: no-wrap;
        flex-wrap: no-wrap;
  }
  .card-senior-top .wp-block-post-featured-image a .attachment-post-thumbnail {
    height: 450px;
  }
}

.card-senior {
  position: relative;
  --card-icon-width: 40px;
}
.card-senior:hover .attachment-post-thumbnail, .card-senior:active .attachment-post-thumbnail {
  -webkit-transform: scale(1.05, 1.05);
          transform: scale(1.05, 1.05);
}
.card-senior:hover .card-title::after, .card-senior:active .card-title::after {
  clip-path: circle(50% at 50% 50%);
}
.card-senior .card-title {
  gap: 10px;
  padding-right: var(--card-icon-width);
  min-height: var(--card-icon-width);
  position: relative;
  border-bottom: 1px solid #000000;
}
.card-senior .card-title::after {
  -webkit-transition: ease-in 0.2s;
  transition: ease-in 0.2s;
  font-family: "Font Awesome 6 Free";
  content: "\f0da";
  position: absolute;
  right: 0;
  top: calc(50% - 20px);
  color: #ffffff;
  background-color: #ffcc00;
  clip-path: circle(14px at 50% 50%);
  font-weight: 600;
  font-size: 1.4rem;
  display: -ms-grid;
  display: grid;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
  width: var(--card-icon-width);
  height: var(--card-icon-width);
}
.card-senior .card-title .wp-block-post-title {
  margin-bottom: 0;
  font-size: 30px;
  font-weight: normal;
}
.card-senior .wp-block-post-featured-image {
  position: static;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 20px;
}
.card-senior .wp-block-post-featured-image a {
  position: static;
  z-index: 2;
}
.card-senior .wp-block-post-featured-image a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}
.card-senior .wp-block-post-featured-image a .attachment-post-thumbnail {
  -webkit-transition: ease-in 0.2s;
  transition: ease-in 0.2s;
  height: 180px;
}
.card-senior .taxonomy-interview-year, .card-senior .taxonomy-interview-year a {
  font-weight: bold;
  color: #F5CE30;
  text-decoration: none;
  margin-bottom: 10px;
}
.card-senior .taxonomy-interview-job, .card-senior .taxonomy-interview-job a {
  font-size: 1.2rem;
}
.card-senior .after-title {
  font-size: 1.2rem;
}
@media (min-width: 992px) {
  .card-senior .wp-block-post-featured-image a .attachment-post-thumbnail {
    height: 450px;
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes scale {
  0% {
    scale: 0;
  }
  100% {
    scale: 1;
  }
}
@keyframes move_k-tori03 {
  0%, 90%, 100% {
    -webkit-transform: translate(-100px, 0);
            transform: translate(-100px, 0);
  }
  50%, 85% {
    -webkit-transform: translate(-35px, 0);
            transform: translate(-35px, 0);
  }
}
@keyframes About-human-stick {
  0% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  20% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  100% {
    rotate: -90deg;
    -webkit-transform-origin: 120px 215px;
            transform-origin: 120px 215px;
  }
}
@keyframes move_stem {
  0% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes move_stemcurve {
  0% {
    -webkit-transform: translate(0, 100px);
            transform: translate(0, 100px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes eye-blink {
  0%, 10%, 15%, 30%, 35%, 40%, 60%, 65%, 90%, 95% {
    opacity: 1;
  }
  11%, 14%, 31%, 34%, 36%, 39%, 61%, 64%, 91%, 94% {
    opacity: 0;
  }
}
@keyframes moveCar {
  from {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  to {
    -webkit-transform: translateX(-100vw);
            transform: translateX(-100vw);
  }
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50%, 70% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
/**
 * clamp関数の文字列を返す
 *
 * @param {Number} $size-at-min-width - 最小画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $size-at-max-width - 最大画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $min-width [optional] - 最小画面幅 (デフォルト: $min-width-default)
 * @param {Number} $max-width [optional] - 最大画面幅 (デフォルト: $max-width-default)
 * @return {String} CSS clamp関数を含む計算式
 *
 * @description
 * 画面幅に応じて値が滑らかに変化するレスポンシブな値を生成します。
 * 例えば、フォントサイズやマージン、パディングなどの値を画面幅に応じて
 * 自動的に調整することができます。
 *
 * @example
 *   // フォントサイズを16pxから24pxまで可変させる
 *   font-size: clamp-calc(16px, 24px);
 *
 *   // マージンを2remから4remまで可変させる（画面幅768px～1200px）
 *   margin: clamp-calc(2rem, 4rem, 768px, 1200px);
 *
 * @note
 * - 引数の単位は一貫している必要はありません（px, rem等が混在可能）
 * - 内部で全ての値をpxに変換して計算を行います
 * - 返り値は入力された$size-at-min-widthと同じ単位で返されます
 * - 負の値（マイナスマージンなど）にも対応しています
 *
 * @implementation
 * 1. 入力値を全てpxに変換
 * 2. 線形の傾きを計算
 * 3. y軸との交点を計算
 * 4. 必要に応じて最小値と最大値を入れ替え
 * 5. 元の単位に変換して最終的なclamp関数を構築
 */
/**
 * 与えられた値をピクセル(px)単位に変換する関数
 *
 * @param {Number} $value - 変換したい値（rem または px）
 * @return {Number} 変換後のピクセル値
 *
 * @example
 *   convert-to-px(1.5rem)  // 24px ($base-font-size が 16px の場合)
 *   convert-to-px(20px)    // 20px (そのまま返される)
 *   convert-to-px(2em)     // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - rem単位の場合: $base-font-sizeを基準にしてpxに変換
 * - px単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/**
 * ピクセル(px)単位の値をrem単位に変換する関数
 *
 * @param {Number} $px-value - 変換したい値（px または rem）
 * @return {Number} 変換後のrem値
 *
 * @example
 *   convert-to-rem(16px)   // 1rem ($base-font-size が 16px の場合)
 *   convert-to-rem(24px)   // 1.5rem ($base-font-size が 16px の場合)
 *   convert-to-rem(1.5rem) // 1.5rem (そのまま返される)
 *   convert-to-rem(2em)    // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - px単位の場合: $base-font-sizeを基準にしてremに変換
 * - rem単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @note
 * - レスポンシブデザインに適したrem単位への変換に使用
 * - $base-font-size はグローバルで定義されている必要がある
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/*
 * 補助関数：小数点以下の指定した桁数で四捨五入する関数
 */
/*
 * 補助関数：累乗を計算する関数
 * 引数：$number 底となる数
 *      $exponent 指数（正の整数のみ対応）
 */
.is-animation-active.projectstory-object-01 #k-tori01 {
  -webkit-animation: move_k-tori01 3s linear infinite alternate;
          animation: move_k-tori01 3s linear infinite alternate;
}
@-webkit-keyframes move_k-tori01 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px);
  }
}
@keyframes move_k-tori01 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px);
  }
}
.is-animation-active.projectstory-object-01 #k-tori02 {
  animation: move_k-tori02 3s linear infinite alternate-reverse;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
@-webkit-keyframes move_k-tori02 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 5px);
            transform: translate(0, 5px);
  }
}
@keyframes move_k-tori02 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 5px);
            transform: translate(0, 5px);
  }
}
.is-animation-active.projectstory-object-01 #k-tori03 {
  -webkit-animation: move_k-tori03 7s linear infinite forwards;
          animation: move_k-tori03 7s linear infinite forwards;
}
.is-animation-active.projectstory-object-02 #k-tori {
  -webkit-animation: move_k-tori01 3s linear infinite alternate;
          animation: move_k-tori01 3s linear infinite alternate;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
@keyframes move_k-tori01 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px);
  }
}
.is-animation-active.projectstory-object-02 #k-tori_flower {
  animation: rotate-360 2s linear infinite reverse;
  -webkit-transform-origin: 66.5136px 23.3057px;
          transform-origin: 66.5136px 23.3057px;
}
@-webkit-keyframes move_k-tori_flower {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px);
  }
}
@keyframes move_k-tori_flower {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px);
  }
}
.is-animation-active.projectstory-object-02 #flower {
  -webkit-animation: rotate-360 5s linear infinite;
          animation: rotate-360 5s linear infinite;
  -webkit-transform-origin: 160.2366px 8.3348px;
          transform-origin: 160.2366px 8.3348px;
}
@-webkit-keyframes rotate-360 {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}
@keyframes rotate-360 {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}
.is-animation-active.about-object-01 #stick03 {
  -webkit-animation: About-human-stick 3s linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%) 1 forwards;
          animation: About-human-stick 3s linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%) 1 forwards;
}
.is-animation-active.about-object-01 #line {
  -webkit-animation: opacity_on 1s ease-in 1 both;
          animation: opacity_on 1s ease-in 1 both;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
@-webkit-keyframes opacity_on {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 100%;
  }
}
@keyframes opacity_on {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 100%;
  }
}
.is-animation-active.about-object-01 #miniflower > * {
  -webkit-animation: blink 2.5s infinite alternate both;
          animation: blink 2.5s infinite alternate both;
  -webkit-transform-origin: center;
          transform-origin: center;
}
.is-animation-active.about-object-01 #miniflower > *:nth-child(1) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.is-animation-active.about-object-01 #miniflower > *:nth-child(2) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.is-animation-active.about-object-01 #miniflower > *:nth-child(3) {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
.is-animation-active.about-object-01 #miniflower > *:nth-child(4) {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
.is-animation-active.about-object-01 #miniflower > *:nth-child(5) {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}
.is-animation-active.about-object-01 #miniflower > *:nth-child(6) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.is-animation-active.about-object-01 #miniflower > *:nth-child(7) {
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
}
.is-animation-active.about-object-01 #miniflower > *:nth-child(8) {
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}
.is-animation-active.about-object-01 #miniflower > *:nth-child(9) {
  -webkit-animation-delay: 2.6s;
          animation-delay: 2.6s;
}
.is-animation-active.about-object-01 #miniflower > *:nth-child(10) {
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}
.is-animation-active.about-object-01 :is(#flower01, #flower02, #flower03) {
  -webkit-animation: rotate-360 5s linear infinite, opacity_on 1s ease-in 1 both;
          animation: rotate-360 5s linear infinite, opacity_on 1s ease-in 1 both;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.is-animation-active.about-object-01 #flower01 {
  -webkit-transform-origin: 79.2321px 36.7622px;
          transform-origin: 79.2321px 36.7622px;
  scale: 0.8;
}
.is-animation-active.about-object-01 #flower02 {
  -webkit-transform-origin: 14.745px 73.533px;
          transform-origin: 14.745px 73.533px;
}
.is-animation-active.about-object-01 #flower03 {
  -webkit-transform-origin: 70.6765px 100.6803px;
          transform-origin: 70.6765px 100.6803px;
}
.is-animation-active.about-object-01 #flower-bed #stem-curve {
  -webkit-animation: move_stemcurve 2s 1 both;
          animation: move_stemcurve 2s 1 both;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.is-animation-active.about-object-01 #flower-bed #stem > * {
  -webkit-animation: move_stem 2s 1 both;
          animation: move_stem 2s 1 both;
}
.is-animation-active.about-object-01 #flower-bed #stem > *:nth-child(1) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.is-animation-active.about-object-01 #flower-bed #stem > *:nth-child(2) {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
.is-animation-active.about-object-01 #flower-bed #stem > *:nth-child(3) {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
.is-animation-active.about-object-01 #flower-bed #flower01-2 path {
  -webkit-animation: scale 0.1s linear 1 both;
          animation: scale 0.1s linear 1 both;
  -webkit-transform-origin: 370.571px 286.4943px;
          transform-origin: 370.571px 286.4943px;
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}
.is-animation-active.about-object-01 #flower-bed #flower01-2 circle {
  -webkit-animation: scale 0.1s linear 1 both;
          animation: scale 0.1s linear 1 both;
  -webkit-transform-origin: 370.571px 286.4943px;
          transform-origin: 370.571px 286.4943px;
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}
.is-animation-active.about-object-01 #flower-bed #flower02-2 path {
  -webkit-animation: scale 0.1s linear 1 both;
          animation: scale 0.1s linear 1 both;
  -webkit-transform-origin: 321.3858px 247.3522px;
          transform-origin: 321.3858px 247.3522px;
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}
.is-animation-active.about-object-01 #flower-bed #flower02-2 circle {
  -webkit-animation: scale 0.1s linear 1 both;
          animation: scale 0.1s linear 1 both;
  -webkit-transform-origin: 321.3858px 247.3522px;
          transform-origin: 321.3858px 247.3522px;
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}
.is-animation-active.about-object-01 #flower-bed #flower03-2 path {
  -webkit-animation: scale 0.1s linear 1 both;
          animation: scale 0.1s linear 1 both;
  -webkit-transform-origin: 294.3908px 302.6565px;
          transform-origin: 294.3908px 302.6565px;
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}
.is-animation-active.about-object-01 #flower-bed #flower03-2 circle {
  -webkit-animation: scale 0.1s linear 1 both;
          animation: scale 0.1s linear 1 both;
  -webkit-transform-origin: 294.3908px 302.6565px;
          transform-origin: 294.3908px 302.6565px;
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}
.is-animation-active.about-object-01 #flower-bed #flower04 path {
  -webkit-animation: scale 0.1s linear 1 both;
          animation: scale 0.1s linear 1 both;
  -webkit-transform-origin: 267.7152px 279.0112px;
          transform-origin: 267.7152px 279.0112px;
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}
.is-animation-active.about-object-01 #flower-bed #flower04 circle {
  -webkit-animation: scale 0.1s linear 1 both;
          animation: scale 0.1s linear 1 both;
  -webkit-transform-origin: 267.7152px 279.0112px;
          transform-origin: 267.7152px 279.0112px;
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}
.is-animation-active.about-object-01 #flower-bed #leaf01 {
  -webkit-animation: scale 0.5s linear 1 both;
          animation: scale 0.5s linear 1 both;
  -webkit-transform-origin: 374.4182px 323.5293px;
          transform-origin: 374.4182px 323.5293px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.is-animation-active.about-object-01 #flower-bed #leaf02 {
  -webkit-animation: scale 0.5s linear 1 both;
          animation: scale 0.5s linear 1 both;
  -webkit-transform-origin: 325.7748px 299.0331px;
          transform-origin: 325.7748px 299.0331px;
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}
.is-animation-active.about-object-01 #flower-bed #leaf03 {
  -webkit-animation: scale 0.5s linear 1 both;
          animation: scale 0.5s linear 1 both;
  -webkit-transform-origin: 317.2269px 329.6053px;
          transform-origin: 317.2269px 329.6053px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.is-animation-active.about-object-01 #flower-bed #leaf04 {
  -webkit-animation: scale 0.5s linear 1 both;
          animation: scale 0.5s linear 1 both;
  -webkit-transform-origin: 264.332px 318.1448px;
          transform-origin: 264.332px 318.1448px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.is-animation-active.work-object-01 #human {
  -webkit-animation: move_work-01 2.5s linear infinite alternate;
          animation: move_work-01 2.5s linear infinite alternate;
}
@-webkit-keyframes move_work-01 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px);
  }
}
@keyframes move_work-01 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px);
  }
}
.is-animation-active.work-object-02 #human {
  animation: move_work-02 3.5s linear infinite alternate-reverse;
}
@-webkit-keyframes move_work-02 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 15px);
            transform: translate(0, 15px);
  }
}
@keyframes move_work-02 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 15px);
            transform: translate(0, 15px);
  }
}
.is-animation-active.voice-object-01 #human02 #eye-open {
  -webkit-animation: eye-blink 10s linear infinite;
          animation: eye-blink 10s linear infinite;
}
.is-animation-active.voice-object-01 #flower {
  -webkit-animation: rotate-360 5s linear infinite;
          animation: rotate-360 5s linear infinite;
  -webkit-transform-origin: 35.3636px 10.3365px;
          transform-origin: 35.3636px 10.3365px;
}
.is-animation-active.recruit-object-01 #rear-tire {
  animation: rotate-360 2s infinite linear reverse;
  -webkit-transform-origin: 169.9956px 101.9397px;
          transform-origin: 169.9956px 101.9397px;
}
.is-animation-active.recruit-object-01 #front-tire-2 {
  animation: rotate-360 2s infinite linear reverse;
  -webkit-transform-origin: 25.0285px 101.9397px;
          transform-origin: 25.0285px 101.9397px;
}
.is-animation-active.recruit-object-01 #ear {
  -webkit-animation: rotate-15 2s linear infinite alternate;
          animation: rotate-15 2s linear infinite alternate;
  -webkit-transform-origin: 123.6275px 4.2641px;
          transform-origin: 123.6275px 4.2641px;
}
@-webkit-keyframes rotate-15 {
  0% {
    rotate: -5deg;
  }
  100% {
    rotate: 5deg;
  }
}
@keyframes rotate-15 {
  0% {
    rotate: -5deg;
  }
  100% {
    rotate: 5deg;
  }
}
.is-animation-active.recruit-object-01 #ear-2 {
  display: none;
}
.is-animation-active #flower-box > * {
  -webkit-animation: blink 4s linear infinite both;
          animation: blink 4s linear infinite both;
}
.is-animation-active #flower-box > *:nth-child(16) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.is-animation-active #flower-box > *:nth-child(15) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.is-animation-active #flower-box > *:nth-child(14) {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
.is-animation-active #flower-box > *:nth-child(13) {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
.is-animation-active #flower-box > *:nth-child(12) {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}
.is-animation-active #flower-box > *:nth-child(11) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.is-animation-active #flower-box > *:nth-child(10) {
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
}
.is-animation-active #flower-box > *:nth-child(9) {
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}
.is-animation-active #flower-box > *:nth-child(8) {
  -webkit-animation-delay: 2.6s;
          animation-delay: 2.6s;
}
.is-animation-active #flower-box > *:nth-child(7) {
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}
.is-animation-active #flower-box > *:nth-child(6) {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.is-animation-active #flower-box > *:nth-child(5) {
  -webkit-animation-delay: 3.2s;
          animation-delay: 3.2s;
}
.is-animation-active #flower-box > *:nth-child(4) {
  -webkit-animation-delay: 3.4s;
          animation-delay: 3.4s;
}
.is-animation-active #flower-box > *:nth-child(3) {
  -webkit-animation-delay: 3.6s;
          animation-delay: 3.6s;
}
.is-animation-active #flower-box > *:nth-child(2) {
  -webkit-animation-delay: 3.8s;
          animation-delay: 3.8s;
}
.is-animation-active #flower-box > *:nth-child(1) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}

@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes scale {
  0% {
    scale: 0;
  }
  100% {
    scale: 1;
  }
}
@keyframes move_k-tori03 {
  0%, 90%, 100% {
    -webkit-transform: translate(-100px, 0);
            transform: translate(-100px, 0);
  }
  50%, 85% {
    -webkit-transform: translate(-35px, 0);
            transform: translate(-35px, 0);
  }
}
@keyframes About-human-stick {
  0% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  20% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  100% {
    rotate: -90deg;
    -webkit-transform-origin: 120px 215px;
            transform-origin: 120px 215px;
  }
}
@keyframes move_stem {
  0% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes move_stemcurve {
  0% {
    -webkit-transform: translate(0, 100px);
            transform: translate(0, 100px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes eye-blink {
  0%, 10%, 15%, 30%, 35%, 40%, 60%, 65%, 90%, 95% {
    opacity: 1;
  }
  11%, 14%, 31%, 34%, 36%, 39%, 61%, 64%, 91%, 94% {
    opacity: 0;
  }
}
@keyframes moveCar {
  from {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  to {
    -webkit-transform: translateX(-100vw);
            transform: translateX(-100vw);
  }
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50%, 70% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
/**
 * clamp関数の文字列を返す
 *
 * @param {Number} $size-at-min-width - 最小画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $size-at-max-width - 最大画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $min-width [optional] - 最小画面幅 (デフォルト: $min-width-default)
 * @param {Number} $max-width [optional] - 最大画面幅 (デフォルト: $max-width-default)
 * @return {String} CSS clamp関数を含む計算式
 *
 * @description
 * 画面幅に応じて値が滑らかに変化するレスポンシブな値を生成します。
 * 例えば、フォントサイズやマージン、パディングなどの値を画面幅に応じて
 * 自動的に調整することができます。
 *
 * @example
 *   // フォントサイズを16pxから24pxまで可変させる
 *   font-size: clamp-calc(16px, 24px);
 *
 *   // マージンを2remから4remまで可変させる（画面幅768px～1200px）
 *   margin: clamp-calc(2rem, 4rem, 768px, 1200px);
 *
 * @note
 * - 引数の単位は一貫している必要はありません（px, rem等が混在可能）
 * - 内部で全ての値をpxに変換して計算を行います
 * - 返り値は入力された$size-at-min-widthと同じ単位で返されます
 * - 負の値（マイナスマージンなど）にも対応しています
 *
 * @implementation
 * 1. 入力値を全てpxに変換
 * 2. 線形の傾きを計算
 * 3. y軸との交点を計算
 * 4. 必要に応じて最小値と最大値を入れ替え
 * 5. 元の単位に変換して最終的なclamp関数を構築
 */
/**
 * 与えられた値をピクセル(px)単位に変換する関数
 *
 * @param {Number} $value - 変換したい値（rem または px）
 * @return {Number} 変換後のピクセル値
 *
 * @example
 *   convert-to-px(1.5rem)  // 24px ($base-font-size が 16px の場合)
 *   convert-to-px(20px)    // 20px (そのまま返される)
 *   convert-to-px(2em)     // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - rem単位の場合: $base-font-sizeを基準にしてpxに変換
 * - px単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/**
 * ピクセル(px)単位の値をrem単位に変換する関数
 *
 * @param {Number} $px-value - 変換したい値（px または rem）
 * @return {Number} 変換後のrem値
 *
 * @example
 *   convert-to-rem(16px)   // 1rem ($base-font-size が 16px の場合)
 *   convert-to-rem(24px)   // 1.5rem ($base-font-size が 16px の場合)
 *   convert-to-rem(1.5rem) // 1.5rem (そのまま返される)
 *   convert-to-rem(2em)    // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - px単位の場合: $base-font-sizeを基準にしてremに変換
 * - rem単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @note
 * - レスポンシブデザインに適したrem単位への変換に使用
 * - $base-font-size はグローバルで定義されている必要がある
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/*
 * 補助関数：小数点以下の指定した桁数で四捨五入する関数
 */
/*
 * 補助関数：累乗を計算する関数
 * 引数：$number 底となる数
 *      $exponent 指数（正の整数のみ対応）
 */
body, html {
  --wp--preset--font-family--system-font: Noto Sans JP, sans-serif ;
  --vk-color-text-body: #000000;
}
@media (min-width: 1400px) {
  body, html {
    --vk-width-container: 1330px;
  }
}
@media (min-width: 1400px) {
  body, html {
    --vk-width-container: 1330px;
  }
}
@media (min-width: 1700px) {
  body, html {
    --vk-width-container: 1530px;
  }
}
body p, html p {
  margin: 0;
}

.main-section {
  margin-bottom: 0 !important;
}

@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes scale {
  0% {
    scale: 0;
  }
  100% {
    scale: 1;
  }
}
@keyframes move_k-tori03 {
  0%, 90%, 100% {
    -webkit-transform: translate(-100px, 0);
            transform: translate(-100px, 0);
  }
  50%, 85% {
    -webkit-transform: translate(-35px, 0);
            transform: translate(-35px, 0);
  }
}
@keyframes About-human-stick {
  0% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  20% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  100% {
    rotate: -90deg;
    -webkit-transform-origin: 120px 215px;
            transform-origin: 120px 215px;
  }
}
@keyframes move_stem {
  0% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes move_stemcurve {
  0% {
    -webkit-transform: translate(0, 100px);
            transform: translate(0, 100px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes eye-blink {
  0%, 10%, 15%, 30%, 35%, 40%, 60%, 65%, 90%, 95% {
    opacity: 1;
  }
  11%, 14%, 31%, 34%, 36%, 39%, 61%, 64%, 91%, 94% {
    opacity: 0;
  }
}
@keyframes moveCar {
  from {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  to {
    -webkit-transform: translateX(-100vw);
            transform: translateX(-100vw);
  }
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50%, 70% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
/**
 * clamp関数の文字列を返す
 *
 * @param {Number} $size-at-min-width - 最小画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $size-at-max-width - 最大画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $min-width [optional] - 最小画面幅 (デフォルト: $min-width-default)
 * @param {Number} $max-width [optional] - 最大画面幅 (デフォルト: $max-width-default)
 * @return {String} CSS clamp関数を含む計算式
 *
 * @description
 * 画面幅に応じて値が滑らかに変化するレスポンシブな値を生成します。
 * 例えば、フォントサイズやマージン、パディングなどの値を画面幅に応じて
 * 自動的に調整することができます。
 *
 * @example
 *   // フォントサイズを16pxから24pxまで可変させる
 *   font-size: clamp-calc(16px, 24px);
 *
 *   // マージンを2remから4remまで可変させる（画面幅768px～1200px）
 *   margin: clamp-calc(2rem, 4rem, 768px, 1200px);
 *
 * @note
 * - 引数の単位は一貫している必要はありません（px, rem等が混在可能）
 * - 内部で全ての値をpxに変換して計算を行います
 * - 返り値は入力された$size-at-min-widthと同じ単位で返されます
 * - 負の値（マイナスマージンなど）にも対応しています
 *
 * @implementation
 * 1. 入力値を全てpxに変換
 * 2. 線形の傾きを計算
 * 3. y軸との交点を計算
 * 4. 必要に応じて最小値と最大値を入れ替え
 * 5. 元の単位に変換して最終的なclamp関数を構築
 */
/**
 * 与えられた値をピクセル(px)単位に変換する関数
 *
 * @param {Number} $value - 変換したい値（rem または px）
 * @return {Number} 変換後のピクセル値
 *
 * @example
 *   convert-to-px(1.5rem)  // 24px ($base-font-size が 16px の場合)
 *   convert-to-px(20px)    // 20px (そのまま返される)
 *   convert-to-px(2em)     // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - rem単位の場合: $base-font-sizeを基準にしてpxに変換
 * - px単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/**
 * ピクセル(px)単位の値をrem単位に変換する関数
 *
 * @param {Number} $px-value - 変換したい値（px または rem）
 * @return {Number} 変換後のrem値
 *
 * @example
 *   convert-to-rem(16px)   // 1rem ($base-font-size が 16px の場合)
 *   convert-to-rem(24px)   // 1.5rem ($base-font-size が 16px の場合)
 *   convert-to-rem(1.5rem) // 1.5rem (そのまま返される)
 *   convert-to-rem(2em)    // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - px単位の場合: $base-font-sizeを基準にしてremに変換
 * - rem単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @note
 * - レスポンシブデザインに適したrem単位への変換に使用
 * - $base-font-size はグローバルで定義されている必要がある
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/*
 * 補助関数：小数点以下の指定した桁数で四捨五入する関数
 */
/*
 * 補助関数：累乗を計算する関数
 * 引数：$number 底となる数
 *      $exponent 指数（正の整数のみ対応）
 */
header.block-site-header {
  background-color: transparent !important;
  height: 70px;
  -webkit-box-shadow: none;
          box-shadow: none;
  position: fixed !important;
  top: 0 !important;
  right: 0;
  left: 0;
  z-index: 9999;
}
header.block-site-header > .wp-block-group {
  max-width: 100% !important;
}
header.block-site-header .site-header-container {
  max-width: none;
  height: 100%;
  padding: 1rem;
  -webkit-padding-after: 0;
          padding-block-end: 0;
}
header.block-site-header .site-header-container .global-nav {
  display: none;
}
header.block-site-header .site-header-logo {
  -ms-flex-line-pack: center;
      align-content: center;
  padding: 0;
  margin: 0;
  position: relative;
  line-height: 1;
}
header.block-site-header .site-header-logo .custom-logo-link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}
header.block-site-header .site-header-logo .custom-logo {
  margin: 0;
  max-width: 113px;
}
header.block-site-header .site-header-logo .site-title {
  color: #BEBEBE;
  font-size: 12px;
  font-family: a-otf-ud-shin-go-pr6n, sans-serif;
  font-weight: 900;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 2px;
}
header.block-site-header .site-header-logo .site-title p {
  margin-bottom: 0;
  line-height: 1;
}
header.block-site-header .vk-mobile-nav {
  width: 100%;
  height: 100%;
  max-width: 100%;
  background-color: rgba(4, 19, 60, 0.5);
  padding: 0;
  border: none;
}
header.block-site-header .vk-mobile-nav .mobile-nav-container {
  display: block;
  background-color: #89B4E6;
  border-radius: 50px 0 0 50px;
  border: 10px solid #000000;
  border-right: none;
  margin-right: 0 !important;
  width: calc(100vw - 150px);
  height: 100vh;
  padding: 60px 0 20px 10px;
  overflow-y: auto;
}
header.block-site-header .vk-mobile-nav ul.mobile-nav {
  display: block;
  font-weight: bold;
  font-size: 1.2rem;
  color: #ffffff;
}
header.block-site-header .vk-mobile-nav ul.mobile-nav .wp-block-navigation-item {
  display: block;
}
header.block-site-header .vk-mobile-nav ul.entry-nav {
  margin-top: 2rem;
  border: none;
  padding-right: 10px;
  gap: 10px;
}
header.block-site-header .vk-mobile-nav ul.entry-nav .entry-button {
  display: block;
  width: 100%;
}
header.block-site-header .vk-mobile-nav ul.entry-nav a {
  display: block;
  width: 100%;
}
@media (min-width: 992px) {
  header.block-site-header {
    background-color: #ffffff !important;
    -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2) !important;
            box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2) !important;
    height: 85px;
  }
  header.block-site-header .site-header-container {
    width: 100%;
    height: 100%;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-padding-after: 1rem;
            padding-block-end: 1rem;
    gap: 0;
  }
  header.block-site-header .site-header-container .global-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  header.block-site-header .site-header-logo .site-title {
    color: #BEBEBE;
    font-size: 12px;
  }
  header.block-site-header .site-header-logo .site-title p {
    margin-bottom: 0;
    line-height: 1;
  }
  header.block-site-header nav.global-nav {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    margin-right: 0 !important;
  }
  header.block-site-header nav.global-nav .menu {
    height: 100%;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  header.block-site-header nav.global-nav .wp-block-navigation__container {
    gap: 0;
  }
  header.block-site-header nav.global-nav .wp-block-navigation-item a {
    padding: 14px 0.9rem;
    font-weight: bold;
  }
  header.block-site-header nav.global-nav .wp-block-navigation-item .wp-block-navigation-item__label {
    font-size: 1rem;
  }
  header.block-site-header nav.global-nav ul.entry-nav {
    gap: 20px;
  }
}
@media (min-width: 1200px) {
  header.block-site-header {
    height: 100px;
  }
  header.block-site-header .site-header-container {
    padding-block: 1.5rem;
    padding-inline: 3.125rem;
  }
  header.block-site-header .site-header-logo .custom-logo {
    max-width: 190px;
  }
  header.block-site-header .site-header-logo .site-title {
    font-size: 20px;
  }
  header.block-site-header nav.global-nav .wp-block-navigation-item a {
    padding: 14px 0.6em;
  }
  header.block-site-header nav.global-nav .wp-block-navigation-item a:hover, header.block-site-header nav.global-nav .wp-block-navigation-item a:active {
    color: #BEBEBE;
  }
  header.block-site-header nav.global-nav .wp-block-navigation-item .wp-block-navigation-item__label {
    font-size: 1.2rem;
  }
}
@media (min-width: 1400px) {
  header.block-site-header .site-header-logo {
    width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0;
  }
  header.block-site-header .site-header-logo .site-title {
    display: block;
    padding-left: 1rem;
  }
  header.block-site-header nav.global-nav .wp-block-navigation-item .wp-block-navigation-item__label {
    font-size: 1.25rem;
  }
}
@media (min-width: 1700px) {
  header.block-site-header nav.global-nav .wp-block-navigation-item a {
    padding: 14px 1.5em;
  }
}

header.mobile-nav-contents {
  display: block;
}
@media (min-width: 992px) {
  header.mobile-nav-contents {
    display: none;
  }
}

div.vk-mobile-nav-menu-btn {
  width: 39px;
  height: 39px;
  top: 20px !important;
  left: auto;
  right: 16px;
  border-radius: 50%;
  border: none;
  -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.35);
          box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.35);
}
div.vk-mobile-nav-menu-btn.menu-open {
  border: none;
}

.page-header {
  --kn-space: 20px;
  margin-top: calc(70px + var(--kn-space)) !important;
  margin-left: var(--kn-space);
  margin-right: var(--kn-space);
  margin-bottom: var(--kn-space) !important;
  border-radius: 30px;
  color: #ffffff !important;
  text-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
}
.page-header:before {
  background-color: rgba(255, 255, 255, 0.3) !important;
}
.page-header .page-header-title {
  display: none;
}
.page-header .page-header-subtext {
  font-family: montserrat, sans-serif;
  font-weight: bold;
  font-size: 60px;
}
@media (min-width: 992px) {
  .page-header {
    --kn-space: 52px;
    margin-top: 130px !important;
    margin-bottom: var(--kn-space) !important;
    margin-left: var(--kn-space);
    margin-right: var(--kn-space);
    height: 230px;
  }
  .page-header .page-header-subtext {
    font-size: 100px;
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes scale {
  0% {
    scale: 0;
  }
  100% {
    scale: 1;
  }
}
@keyframes move_k-tori03 {
  0%, 90%, 100% {
    -webkit-transform: translate(-100px, 0);
            transform: translate(-100px, 0);
  }
  50%, 85% {
    -webkit-transform: translate(-35px, 0);
            transform: translate(-35px, 0);
  }
}
@keyframes About-human-stick {
  0% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  20% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  100% {
    rotate: -90deg;
    -webkit-transform-origin: 120px 215px;
            transform-origin: 120px 215px;
  }
}
@keyframes move_stem {
  0% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes move_stemcurve {
  0% {
    -webkit-transform: translate(0, 100px);
            transform: translate(0, 100px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes eye-blink {
  0%, 10%, 15%, 30%, 35%, 40%, 60%, 65%, 90%, 95% {
    opacity: 1;
  }
  11%, 14%, 31%, 34%, 36%, 39%, 61%, 64%, 91%, 94% {
    opacity: 0;
  }
}
@keyframes moveCar {
  from {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  to {
    -webkit-transform: translateX(-100vw);
            transform: translateX(-100vw);
  }
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50%, 70% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
/**
 * clamp関数の文字列を返す
 *
 * @param {Number} $size-at-min-width - 最小画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $size-at-max-width - 最大画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $min-width [optional] - 最小画面幅 (デフォルト: $min-width-default)
 * @param {Number} $max-width [optional] - 最大画面幅 (デフォルト: $max-width-default)
 * @return {String} CSS clamp関数を含む計算式
 *
 * @description
 * 画面幅に応じて値が滑らかに変化するレスポンシブな値を生成します。
 * 例えば、フォントサイズやマージン、パディングなどの値を画面幅に応じて
 * 自動的に調整することができます。
 *
 * @example
 *   // フォントサイズを16pxから24pxまで可変させる
 *   font-size: clamp-calc(16px, 24px);
 *
 *   // マージンを2remから4remまで可変させる（画面幅768px～1200px）
 *   margin: clamp-calc(2rem, 4rem, 768px, 1200px);
 *
 * @note
 * - 引数の単位は一貫している必要はありません（px, rem等が混在可能）
 * - 内部で全ての値をpxに変換して計算を行います
 * - 返り値は入力された$size-at-min-widthと同じ単位で返されます
 * - 負の値（マイナスマージンなど）にも対応しています
 *
 * @implementation
 * 1. 入力値を全てpxに変換
 * 2. 線形の傾きを計算
 * 3. y軸との交点を計算
 * 4. 必要に応じて最小値と最大値を入れ替え
 * 5. 元の単位に変換して最終的なclamp関数を構築
 */
/**
 * 与えられた値をピクセル(px)単位に変換する関数
 *
 * @param {Number} $value - 変換したい値（rem または px）
 * @return {Number} 変換後のピクセル値
 *
 * @example
 *   convert-to-px(1.5rem)  // 24px ($base-font-size が 16px の場合)
 *   convert-to-px(20px)    // 20px (そのまま返される)
 *   convert-to-px(2em)     // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - rem単位の場合: $base-font-sizeを基準にしてpxに変換
 * - px単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/**
 * ピクセル(px)単位の値をrem単位に変換する関数
 *
 * @param {Number} $px-value - 変換したい値（px または rem）
 * @return {Number} 変換後のrem値
 *
 * @example
 *   convert-to-rem(16px)   // 1rem ($base-font-size が 16px の場合)
 *   convert-to-rem(24px)   // 1.5rem ($base-font-size が 16px の場合)
 *   convert-to-rem(1.5rem) // 1.5rem (そのまま返される)
 *   convert-to-rem(2em)    // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - px単位の場合: $base-font-sizeを基準にしてremに変換
 * - rem単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @note
 * - レスポンシブデザインに適したrem単位への変換に使用
 * - $base-font-size はグローバルで定義されている必要がある
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/*
 * 補助関数：小数点以下の指定した桁数で四捨五入する関数
 */
/*
 * 補助関数：累乗を計算する関数
 * 引数：$number 底となる数
 *      $exponent 指数（正の整数のみ対応）
 */
.site-body-bottom {
  background-color: #ffffff;
  padding-block: 50px;
  color-scheme: light dark;
}
.site-body-bottom .container {
  max-width: 1200px;
  padding: 0;
}
.site-body-bottom .widget.widget_block {
  margin-block: 0;
}
.site-body-bottom .menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.site-body-bottom .menu .menu-item {
  width: 25%;
}
.site-body-bottom .menu .menu-item a {
  font-size: clamp(16px, 15.091px + 0.242vw, 18px);
  font-weight: 900;
  border: none !important;
  padding-left: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: #000000;
}
.site-body-bottom .sub-menu .menu-item {
  width: 100%;
}
.site-body-bottom .sub-menu .menu-item a {
  font-size: clamp(14px, 13.091px + 0.242vw, 16px);
  padding-block: 0.5em;
  font-weight: 500;
}
.site-body-bottom .sub-menu .menu-item a::after {
  content: "next";
  font-family: swiper-icons;
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
  margin-left: 15px;
}
@media (min-width: 768px) {
  .site-body-bottom .menu {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .site-body-bottom .menu .menu-item {
    width: 100%;
  }
}

footer.block-site-footer {
  border-top: 35px solid #04133C;
  background-color: rgba(4, 19, 60, 0.7);
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
  -webkit-margin-before: 0;
          margin-block-start: 0;
}
footer.block-site-footer .site-logo {
  margin-bottom: 2rem;
}
footer.block-site-footer .site-logo .custom-logo {
  width: 270px;
}
footer.block-site-footer .link-konan-corporate {
  font-size: 25px;
  color: #ffffff;
  font-family: montserrat, sans-serif;
}
footer.block-site-footer .link-konan-corporate a {
  color: #ffffff;
}
footer.block-site-footer .link-konan-corporate a:before {
  content: "\f0c1";
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
}
footer.block-site-footer .link-konan-corporate a:hover, footer.block-site-footer .link-konan-corporate a:active {
  color: #BEBEBE;
}
footer.block-site-footer .copylight {
  color: #ffffff;
}
footer.block-site-footer .footer-logo {
  font-size: clamp(20px, 17.727px + 0.606vw, 25px);
  width: 100%;
  max-width: 265px;
}
footer.block-site-footer .footer-site {
  font-size: clamp(20px, 17.727px + 0.606vw, 25px);
  font-weight: 900;
}
footer.block-site-footer .footer-site a {
  text-decoration: none;
  color: #000000;
}
footer.block-site-footer .footer-site a::after {
  content: "\f2d2";
  font-family: "Font Awesome 6 Free";
  -webkit-margin-start: 10px;
          margin-inline-start: 10px;
}

@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes scale {
  0% {
    scale: 0;
  }
  100% {
    scale: 1;
  }
}
@keyframes move_k-tori03 {
  0%, 90%, 100% {
    -webkit-transform: translate(-100px, 0);
            transform: translate(-100px, 0);
  }
  50%, 85% {
    -webkit-transform: translate(-35px, 0);
            transform: translate(-35px, 0);
  }
}
@keyframes About-human-stick {
  0% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  20% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  100% {
    rotate: -90deg;
    -webkit-transform-origin: 120px 215px;
            transform-origin: 120px 215px;
  }
}
@keyframes move_stem {
  0% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes move_stemcurve {
  0% {
    -webkit-transform: translate(0, 100px);
            transform: translate(0, 100px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes eye-blink {
  0%, 10%, 15%, 30%, 35%, 40%, 60%, 65%, 90%, 95% {
    opacity: 1;
  }
  11%, 14%, 31%, 34%, 36%, 39%, 61%, 64%, 91%, 94% {
    opacity: 0;
  }
}
@keyframes moveCar {
  from {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  to {
    -webkit-transform: translateX(-100vw);
            transform: translateX(-100vw);
  }
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50%, 70% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
/**
 * clamp関数の文字列を返す
 *
 * @param {Number} $size-at-min-width - 最小画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $size-at-max-width - 最大画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $min-width [optional] - 最小画面幅 (デフォルト: $min-width-default)
 * @param {Number} $max-width [optional] - 最大画面幅 (デフォルト: $max-width-default)
 * @return {String} CSS clamp関数を含む計算式
 *
 * @description
 * 画面幅に応じて値が滑らかに変化するレスポンシブな値を生成します。
 * 例えば、フォントサイズやマージン、パディングなどの値を画面幅に応じて
 * 自動的に調整することができます。
 *
 * @example
 *   // フォントサイズを16pxから24pxまで可変させる
 *   font-size: clamp-calc(16px, 24px);
 *
 *   // マージンを2remから4remまで可変させる（画面幅768px～1200px）
 *   margin: clamp-calc(2rem, 4rem, 768px, 1200px);
 *
 * @note
 * - 引数の単位は一貫している必要はありません（px, rem等が混在可能）
 * - 内部で全ての値をpxに変換して計算を行います
 * - 返り値は入力された$size-at-min-widthと同じ単位で返されます
 * - 負の値（マイナスマージンなど）にも対応しています
 *
 * @implementation
 * 1. 入力値を全てpxに変換
 * 2. 線形の傾きを計算
 * 3. y軸との交点を計算
 * 4. 必要に応じて最小値と最大値を入れ替え
 * 5. 元の単位に変換して最終的なclamp関数を構築
 */
/**
 * 与えられた値をピクセル(px)単位に変換する関数
 *
 * @param {Number} $value - 変換したい値（rem または px）
 * @return {Number} 変換後のピクセル値
 *
 * @example
 *   convert-to-px(1.5rem)  // 24px ($base-font-size が 16px の場合)
 *   convert-to-px(20px)    // 20px (そのまま返される)
 *   convert-to-px(2em)     // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - rem単位の場合: $base-font-sizeを基準にしてpxに変換
 * - px単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/**
 * ピクセル(px)単位の値をrem単位に変換する関数
 *
 * @param {Number} $px-value - 変換したい値（px または rem）
 * @return {Number} 変換後のrem値
 *
 * @example
 *   convert-to-rem(16px)   // 1rem ($base-font-size が 16px の場合)
 *   convert-to-rem(24px)   // 1.5rem ($base-font-size が 16px の場合)
 *   convert-to-rem(1.5rem) // 1.5rem (そのまま返される)
 *   convert-to-rem(2em)    // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - px単位の場合: $base-font-sizeを基準にしてremに変換
 * - rem単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @note
 * - レスポンシブデザインに適したrem単位への変換に使用
 * - $base-font-size はグローバルで定義されている必要がある
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/*
 * 補助関数：小数点以下の指定した桁数で四捨五入する関数
 */
/*
 * 補助関数：累乗を計算する関数
 * 引数：$number 底となる数
 *      $exponent 指数（正の整数のみ対応）
 */
.breadcrumb {
  display: none !important;
}

.is-fullsize {
  width: 100%;
  max-width: none !important;
}

.page section, .page section.is-layout-constrained {
  -webkit-margin-before: 5.2rem;
          margin-block-start: 5.2rem;
}
.page section.has-background, .page section.is-layout-constrained.has-background {
  -webkit-margin-before: 0;
          margin-block-start: 0;
  padding-top: 5.2rem;
}
.page article, .page article.is-layout-constrained {
  -webkit-margin-before: 3.2rem;
          margin-block-start: 3.2rem;
}
.page .site-body {
  background-color: #F6F7F8;
}

@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes scale {
  0% {
    scale: 0;
  }
  100% {
    scale: 1;
  }
}
@keyframes move_k-tori03 {
  0%, 90%, 100% {
    -webkit-transform: translate(-100px, 0);
            transform: translate(-100px, 0);
  }
  50%, 85% {
    -webkit-transform: translate(-35px, 0);
            transform: translate(-35px, 0);
  }
}
@keyframes About-human-stick {
  0% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  20% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  100% {
    rotate: -90deg;
    -webkit-transform-origin: 120px 215px;
            transform-origin: 120px 215px;
  }
}
@keyframes move_stem {
  0% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes move_stemcurve {
  0% {
    -webkit-transform: translate(0, 100px);
            transform: translate(0, 100px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes eye-blink {
  0%, 10%, 15%, 30%, 35%, 40%, 60%, 65%, 90%, 95% {
    opacity: 1;
  }
  11%, 14%, 31%, 34%, 36%, 39%, 61%, 64%, 91%, 94% {
    opacity: 0;
  }
}
@keyframes moveCar {
  from {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  to {
    -webkit-transform: translateX(-100vw);
            transform: translateX(-100vw);
  }
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50%, 70% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
/**
 * clamp関数の文字列を返す
 *
 * @param {Number} $size-at-min-width - 最小画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $size-at-max-width - 最大画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $min-width [optional] - 最小画面幅 (デフォルト: $min-width-default)
 * @param {Number} $max-width [optional] - 最大画面幅 (デフォルト: $max-width-default)
 * @return {String} CSS clamp関数を含む計算式
 *
 * @description
 * 画面幅に応じて値が滑らかに変化するレスポンシブな値を生成します。
 * 例えば、フォントサイズやマージン、パディングなどの値を画面幅に応じて
 * 自動的に調整することができます。
 *
 * @example
 *   // フォントサイズを16pxから24pxまで可変させる
 *   font-size: clamp-calc(16px, 24px);
 *
 *   // マージンを2remから4remまで可変させる（画面幅768px～1200px）
 *   margin: clamp-calc(2rem, 4rem, 768px, 1200px);
 *
 * @note
 * - 引数の単位は一貫している必要はありません（px, rem等が混在可能）
 * - 内部で全ての値をpxに変換して計算を行います
 * - 返り値は入力された$size-at-min-widthと同じ単位で返されます
 * - 負の値（マイナスマージンなど）にも対応しています
 *
 * @implementation
 * 1. 入力値を全てpxに変換
 * 2. 線形の傾きを計算
 * 3. y軸との交点を計算
 * 4. 必要に応じて最小値と最大値を入れ替え
 * 5. 元の単位に変換して最終的なclamp関数を構築
 */
/**
 * 与えられた値をピクセル(px)単位に変換する関数
 *
 * @param {Number} $value - 変換したい値（rem または px）
 * @return {Number} 変換後のピクセル値
 *
 * @example
 *   convert-to-px(1.5rem)  // 24px ($base-font-size が 16px の場合)
 *   convert-to-px(20px)    // 20px (そのまま返される)
 *   convert-to-px(2em)     // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - rem単位の場合: $base-font-sizeを基準にしてpxに変換
 * - px単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/**
 * ピクセル(px)単位の値をrem単位に変換する関数
 *
 * @param {Number} $px-value - 変換したい値（px または rem）
 * @return {Number} 変換後のrem値
 *
 * @example
 *   convert-to-rem(16px)   // 1rem ($base-font-size が 16px の場合)
 *   convert-to-rem(24px)   // 1.5rem ($base-font-size が 16px の場合)
 *   convert-to-rem(1.5rem) // 1.5rem (そのまま返される)
 *   convert-to-rem(2em)    // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - px単位の場合: $base-font-sizeを基準にしてremに変換
 * - rem単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @note
 * - レスポンシブデザインに適したrem単位への変換に使用
 * - $base-font-size はグローバルで定義されている必要がある
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/*
 * 補助関数：小数点以下の指定した桁数で四捨五入する関数
 */
/*
 * 補助関数：累乗を計算する関数
 * 引数：$number 底となる数
 *      $exponent 指数（正の整数のみ対応）
 */
body.interview-template .wp-site-blocks {
  background: linear-gradient(45deg, #aaccf3, #ffe6bf);
}

main.interview-main {
  --wp--style--global--content-size: calc(var(--vk-width-container) - var(--vk-width-container-padding)* 2);
  padding: 90px 30px 30px;
  position: relative;
  margin-top: 0;
}
@media (min-width: 992px) {
  main.interview-main {
    padding: 0;
    padding-top: 160px;
  }
}

main.interview-main section {
  margin-bottom: 60px;
}
main.interview-main article p {
  margin-bottom: 1rem;
}
@media (min-width: 992px) {
  main.interview-main article {
    margin-bottom: 30px;
  }
}
main.interview-main .interview-container {
  background-color: #ffffff;
  padding: clamp(30px, -24.545px + 14.545vw, 150px) 30px;
  border-radius: clamp(40px, -32.727px + 19.394vw, 200px);
  -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.4);
          box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.4);
}
@media (min-width: 992px) {
  main.interview-main .interview-inner-container {
    --vk-width-container:1230px;
    max-width: calc(var(--vk-width-container) - var(--vk-width-container-padding) * 2);
  }
}
main.interview-main .single-container, main.interview-main .two-container {
  display: -ms-grid;
  display: grid;
  gap: 40px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
main.interview-main .single-container .wp-block-image, main.interview-main .two-container .wp-block-image {
  text-align: center;
}
@media (min-width: 1200px) {
  main.interview-main .single-container.has-img {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}
main.interview-main .two-container {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (min-width: 1200px) {
  main.interview-main .two-container {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}
main.interview-main h2.wp-block-heading {
  color: #ffffff;
  text-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
  font-family: montserrat, sans-serif;
  font-size: 100px;
  padding: 0;
  margin-bottom: 1rem;
}
main.interview-main h2.wp-block-heading::before, main.interview-main h2.wp-block-heading::after {
  content: none;
}
main.interview-main h3.wp-block-heading {
  text-align: left;
  font-weight: 600;
  font-size: clamp(26px, 15.091px + 2.909vw, 50px);
  font-family: "Zen Maru Gothic", sans-serif;
  padding: 0 !important;
  color: #F5CE30;
  line-height: normal;
  letter-spacing: normal;
}
main.interview-main h3.wp-block-heading::before, main.interview-main h3.wp-block-heading::after {
  content: none;
}
main.interview-main h4.wp-block-heading {
  text-align: left;
  font-size: clamp(18px, 15.273px + 0.727vw, 24px);
  font-weight: normal;
  border: none;
  padding: 0;
}
main.interview-main h4::before, main.interview-main h4::after {
  content: none;
}
main.interview-main .h4-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  row-gap: 0.5rem;
  margin-bottom: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
main.interview-main .h4-title h4, main.interview-main .h4-title p {
  margin-bottom: 0;
}
@media (min-width: 992px) {
  main.interview-main .h4-title {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
}
main.interview-main h5.wp-block-heading {
  font-size: clamp(32px, 28.364px + 0.97vw, 40px);
  font-weight: normal;
}
main.interview-main h5.wp-block-heading::before, main.interview-main h5.wp-block-heading::after {
  content: none;
}
main.interview-main .main-message {
  font-size: clamp(21px, 15.091px + 1.576vw, 34px);
  margin-bottom: 3rem;
  line-height: 1.4;
}

main.interview-main .main-box .main-image {
  text-align: center;
}
main.interview-main .main-box .main-image img {
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
  width: 327px;
  aspect-ratio: 11/15;
}
main.interview-main .main-box .profile {
  text-align: right;
  -webkit-box-pack: right;
      -ms-flex-pack: right;
          justify-content: right;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
main.interview-main .main-box .profile .main-join-year {
  font-size: clamp(16px, 14.182px + 0.485vw, 20px);
  margin: 0;
}
main.interview-main .main-box .profile .main-department {
  font-size: clamp(20px, 17.727px + 0.606vw, 25px);
}
main.interview-main .main-box .profile .main-name {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: clamp(10px, 0.909px + 2.424vw, 30px);
}
main.interview-main .main-box .profile .main-name .title {
  font-size: clamp(40px, 35.455px + 1.212vw, 50px);
  font-family: "Noto Serif JP", serif;
}
main.interview-main .main-box .profile .main-name .after-title {
  font-size: clamp(20px, 17.727px + 0.606vw, 25px);
}
@media (min-width: 992px) {
  main.interview-main .main-box .main-image {
    position: relative;
    z-index: 0;
    padding-bottom: 50px;
  }
  main.interview-main .main-box .main-image::before {
    content: "";
    display: block;
    background-image: url(../image/svg/interview_main-image_background.svg);
    position: absolute;
    z-index: -10;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
  }
  main.interview-main .main-box .main-text {
    margin-top: 10px;
  }
  main.interview-main .main-box .profile {
    display: block;
  }
}
@media (min-width: 1200px) {
  main.interview-main .main-box .main-image {
    padding-bottom: 150px;
  }
  main.interview-main .main-box .main-image .wp-block-image {
    text-align: right;
    padding-right: 18%;
  }
  main.interview-main .main-box .main-text {
    margin-top: 80px;
  }
  main.interview-main .main-box .profile {
    text-align: left;
  }
  main.interview-main .main-box .profile .main-name {
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
  }
}
main.interview-main .schedule-box {
  background-color: #FFF0BE;
  border-radius: 50px;
  color: #757575;
  padding: 65px 0 30px;
}
main.interview-main .schedule-box .two-container {
  gap: 0;
  row-gap: 2rem;
}
main.interview-main .schedule-box .schedule-icon-column {
  font-family: montserrat, sans-serif;
  font-size: 26px;
  font-weight: 500;
  text-align: center;
}
main.interview-main .schedule-box .vk_timeline {
  margin: 0 !important;
  padding: 0 10%;
}
main.interview-main .schedule-box .vk_timeline_item {
  --timeline_mark-size: 22px;
  padding: 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: var(--timeline_mark-size) 10px 1fr;
  grid-template-columns: var(--timeline_mark-size) 1fr;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  gap: 10px;
  row-gap: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(16px, 14.182px + 0.485vw, 20px);
  -webkit-padding-after: clamp(24px, 21.273px + 0.727vw, 30px);
          padding-block-end: clamp(24px, 21.273px + 0.727vw, 30px);
}
main.interview-main .schedule-box .vk_timeline_item::before {
  background-color: #F5CE30;
  left: calc(var(--timeline_mark-size) / 2);
  width: 1px;
  bottom: -15px;
  top: calc(var(--timeline_mark-size) / 2);
}
main.interview-main .schedule-box .vk_timeline_item:last-child {
  padding: 0;
}
main.interview-main .schedule-box .vk_timeline_item .vk_timeline_item_style-outlined {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  position: relative;
  top: 5px;
  border: #F5CE30;
  background-color: #F5CE30;
  width: var(--timeline_mark-size);
  height: var(--timeline_mark-size);
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
  -ms-grid-column: 1;
  grid-column: 1;
}
main.interview-main .schedule-box .vk_timeline_item .vk_timeline_item_caption {
  -webkit-box-ordinal-group: 1;
      -ms-flex-order: 0;
          order: 0;
  -ms-flex-preferred-size: 66px;
      flex-basis: 66px;
  margin: 0;
  -ms-grid-row: 1;
  grid-row: 1;
  -ms-grid-column: 2;
  grid-column: 2;
}
main.interview-main .schedule-box .vk_timeline_item .vk_timeline_item_content {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  -ms-grid-row: 2;
  grid-row: 2;
  -ms-grid-column: 2;
  grid-column: 2;
}
main.interview-main .schedule-box .vk_timeline_item .vk_timeline_item_content p {
  margin: 0;
}
@media (min-width: 768px) {
  main.interview-main .schedule-box .vk_timeline {
    padding: 0 0 0 30px;
  }
}
@media (min-width: 992px) {
  main.interview-main .schedule-box {
    padding: 65px 30px;
    border-radius: 78px;
  }
  main.interview-main .schedule-box .vk_timeline_item {
    -ms-grid-columns: 66px clamp(36px, 32.364px + 0.97vw, 44px) 1rem clamp(36px, 32.364px + 0.97vw, 44px) 1fr;
    grid-template-columns: 66px 1rem 1fr;
    gap: clamp(36px, 32.364px + 0.97vw, 44px);
  }
  main.interview-main .schedule-box .vk_timeline_item::before {
    left: 120px;
  }
  main.interview-main .schedule-box .vk_timeline_item .vk_timeline_item_style-outlined, main.interview-main .schedule-box .vk_timeline_item .vk_timeline_item_caption, main.interview-main .schedule-box .vk_timeline_item .vk_timeline_item_content {
    grid-row: auto;
    grid-column: auto;
  }
}
@media (min-width: 1400px) {
  main.interview-main .schedule-box {
    padding: 85px 30px;
  }
  main.interview-main .schedule-box .schedule-icon-column {
    font-size: 50px;
  }
}

.interview-footer {
  background-color: #F6F7F8;
  margin-top: 6.2rem;
  padding: 5.2rem 0;
}
.interview-footer .senior-interview-list {
  margin-bottom: 4rem;
}

/*
.seniors-voice_box {
    background-color: map-get(global.$theme-color, 'page-background-color');
    margin-block-start: global.clamp-calc(120px, 150px);

    .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        max-width: none !important;
    }

    .seniors-voice_inner {
        max-width: 1200px !important;
        padding-block: global.clamp-calc(80px, 100px);
    }

}

 */
@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes scale {
  0% {
    scale: 0;
  }
  100% {
    scale: 1;
  }
}
@keyframes move_k-tori03 {
  0%, 90%, 100% {
    -webkit-transform: translate(-100px, 0);
            transform: translate(-100px, 0);
  }
  50%, 85% {
    -webkit-transform: translate(-35px, 0);
            transform: translate(-35px, 0);
  }
}
@keyframes About-human-stick {
  0% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  20% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  100% {
    rotate: -90deg;
    -webkit-transform-origin: 120px 215px;
            transform-origin: 120px 215px;
  }
}
@keyframes move_stem {
  0% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes move_stemcurve {
  0% {
    -webkit-transform: translate(0, 100px);
            transform: translate(0, 100px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes eye-blink {
  0%, 10%, 15%, 30%, 35%, 40%, 60%, 65%, 90%, 95% {
    opacity: 1;
  }
  11%, 14%, 31%, 34%, 36%, 39%, 61%, 64%, 91%, 94% {
    opacity: 0;
  }
}
@keyframes moveCar {
  from {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  to {
    -webkit-transform: translateX(-100vw);
            transform: translateX(-100vw);
  }
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50%, 70% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
/**
 * clamp関数の文字列を返す
 *
 * @param {Number} $size-at-min-width - 最小画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $size-at-max-width - 最大画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $min-width [optional] - 最小画面幅 (デフォルト: $min-width-default)
 * @param {Number} $max-width [optional] - 最大画面幅 (デフォルト: $max-width-default)
 * @return {String} CSS clamp関数を含む計算式
 *
 * @description
 * 画面幅に応じて値が滑らかに変化するレスポンシブな値を生成します。
 * 例えば、フォントサイズやマージン、パディングなどの値を画面幅に応じて
 * 自動的に調整することができます。
 *
 * @example
 *   // フォントサイズを16pxから24pxまで可変させる
 *   font-size: clamp-calc(16px, 24px);
 *
 *   // マージンを2remから4remまで可変させる（画面幅768px～1200px）
 *   margin: clamp-calc(2rem, 4rem, 768px, 1200px);
 *
 * @note
 * - 引数の単位は一貫している必要はありません（px, rem等が混在可能）
 * - 内部で全ての値をpxに変換して計算を行います
 * - 返り値は入力された$size-at-min-widthと同じ単位で返されます
 * - 負の値（マイナスマージンなど）にも対応しています
 *
 * @implementation
 * 1. 入力値を全てpxに変換
 * 2. 線形の傾きを計算
 * 3. y軸との交点を計算
 * 4. 必要に応じて最小値と最大値を入れ替え
 * 5. 元の単位に変換して最終的なclamp関数を構築
 */
/**
 * 与えられた値をピクセル(px)単位に変換する関数
 *
 * @param {Number} $value - 変換したい値（rem または px）
 * @return {Number} 変換後のピクセル値
 *
 * @example
 *   convert-to-px(1.5rem)  // 24px ($base-font-size が 16px の場合)
 *   convert-to-px(20px)    // 20px (そのまま返される)
 *   convert-to-px(2em)     // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - rem単位の場合: $base-font-sizeを基準にしてpxに変換
 * - px単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/**
 * ピクセル(px)単位の値をrem単位に変換する関数
 *
 * @param {Number} $px-value - 変換したい値（px または rem）
 * @return {Number} 変換後のrem値
 *
 * @example
 *   convert-to-rem(16px)   // 1rem ($base-font-size が 16px の場合)
 *   convert-to-rem(24px)   // 1.5rem ($base-font-size が 16px の場合)
 *   convert-to-rem(1.5rem) // 1.5rem (そのまま返される)
 *   convert-to-rem(2em)    // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - px単位の場合: $base-font-sizeを基準にしてremに変換
 * - rem単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @note
 * - レスポンシブデザインに適したrem単位への変換に使用
 * - $base-font-size はグローバルで定義されている必要がある
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/*
 * 補助関数：小数点以下の指定した桁数で四捨五入する関数
 */
/*
 * 補助関数：累乗を計算する関数
 * 引数：$number 底となる数
 *      $exponent 指数（正の整数のみ対応）
 */
html {
  margin-top: 0 !important;
}

.home {
  --main-box-radius-left: 50rem 0 0 50rem;
  --main-box-radius-right: 0 50rem 50rem 0;
  position: relative;
  background: transparent;
}
.home:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-image: url("../image/top.png");
  background-size: cover;
}
@media (min-width: 992px) {
  .home {
    background-position: center center;
  }
}
.home :is(.is-layout-flow, .is-layout-constrained) > :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
}
.home .site-body {
  padding: 0 !important;
  background-color: transparent;
}
.home .site-body-container {
  padding: 0 !important;
  max-width: none !important;
}
.home .site-header {
  position: absolute;
  top: 0;
  left: 0;
}
.home .page_top_btn {
  display: none;
}
.home h1.wp-block-heading {
  text-align: center;
  font-size: clamp(40px, 36.364px + 0.97vw, 48px);
}
.home h2.wp-block-heading {
  text-align: center;
  font-weight: 800;
  border: none;
  word-wrap: normal;
  font-size: clamp(90px, -5.455px + 25.455vw, 300px);
  font-family: montserrat, sans-serif;
  padding: 0 !important;
  color: #ffffff;
  line-height: 1em !important;
  letter-spacing: 1.8px;
}
.home h2.wp-block-heading::before {
  content: none;
}
.home h3.wp-block-heading {
  text-align: center;
  font-size: clamp(24px, 21.273px + 0.727vw, 30px);
  font-weight: 800;
  border: none;
}
.home h3::after {
  content: none;
}
.home div[class*=-inner] {
  -webkit-padding-before: 2.5rem;
          padding-block-start: 2.5rem;
}
.home .main-visual-box {
  -webkit-margin-before: 70px;
          margin-block-start: 70px;
}
.home .main-visual-box .main-visual-inner {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(60px, 14.545px + 12.121vw, 160px);
  font-weight: 900;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  text-align: center;
  min-height: 10.5em;
  padding: 1rem 0 2rem 0;
  max-width: none;
}
.home .main-visual-box .main-visual-inner .main-message {
  color: #000000;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  -webkit-column-gap: 0;
     -moz-column-gap: 0;
          column-gap: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  height: 9.5em;
  max-width: none;
  text-align: center;
  -webkit-column-count: 1;
     -moz-column-count: 1;
          column-count: 1;
  padding: 0;
}
.home .main-visual-box .news-box {
  background-color: #ffffff !important;
  -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
  border-radius: 67px;
  -webkit-margin-before: 1.5rem;
          margin-block-start: 1.5rem;
  max-width: 80%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: none;
  gap: 0;
  padding-block: 0.5rem;
  padding-inline: 2rem;
}
.home .main-visual-box .news-box .title {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  font-size: clamp(13px, 10.727px + 0.606vw, 18px);
  margin: 0;
  -webkit-margin-after: 0.5rem;
          margin-block-end: 0.5rem;
}
.home .main-visual-box .news-box .time {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  font-size: clamp(13px, 10.727px + 0.606vw, 18px);
  -webkit-margin-after: 0.5rem;
          margin-block-end: 0.5rem;
  -webkit-margin-end: 0.5rem;
          margin-inline-end: 0.5rem;
}
.home .main-visual-box .news-box::before {
  content: "news";
  display: block;
  -webkit-box-ordinal-group: 1;
      -ms-flex-order: 0;
          order: 0;
  text-align: center;
  font-size: clamp(20px, 15.455px + 1.212vw, 30px);
  font-weight: bold;
  -webkit-margin-after: 0.5rem;
          margin-block-end: 0.5rem;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}
@media (min-width: 576px) {
  .home .main-visual-box .main-visual-inner {
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    min-height: 6.5em;
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }
  .home .main-visual-box .main-visual-inner .main-message {
    display: block;
    height: 5.5em;
  }
  .home .main-visual-box .main-visual-inner .main-message p:nth-child(1) {
    text-align: left;
  }
  .home .main-visual-box .main-visual-inner .main-message p:nth-child(2) {
    text-align: right;
  }
  .home .main-visual-box .main-visual-inner .main-message p:nth-child(3) {
    text-align: center;
  }
  .home .main-visual-box .main-visual-inner .main-message p:nth-child(4) {
    text-align: right;
  }
}
@media (min-width: 992px) {
  .home .main-visual-box {
    -webkit-margin-before: 100px;
            margin-block-start: 100px;
    max-width: 900px;
  }
  .home .main-visual-box .news-box {
    max-width: 880px;
    -webkit-margin-after: 0;
            margin-block-end: 0;
  }
  .home .main-visual-box .news-box::before {
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
    margin-inline: 50px;
    display: inline;
    -webkit-margin-after: 0;
            margin-block-end: 0;
  }
  .home .main-visual-box .news-box .title,
  .home .main-visual-box .news-box .time {
    -webkit-margin-after: 0;
            margin-block-end: 0;
  }
  .home .main-visual-box .news-box .title {
    -webkit-margin-end: 0;
            margin-inline-end: 0;
  }
}
.home .projectstory-box {
  position: relative;
}
.home .projectstory-box::before {
  content: "";
  display: block;
  -webkit-padding-before: clamp(300px, 254.545px + 12.121vw, 400px);
          padding-block-start: clamp(300px, 254.545px + 12.121vw, 400px);
  background: rgb(255, 255, 255);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(10%, rgba(242, 243, 245, 0.6026785714)), color-stop(36%, rgb(199, 203, 212)), color-stop(83%, rgb(11, 34, 97)), to(rgb(4, 19, 60)));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(242, 243, 245, 0.6026785714) 10%, rgb(199, 203, 212) 36%, rgb(11, 34, 97) 83%, rgb(4, 19, 60) 100%);
}
.home .projectstory-box .projectstory-inner {
  background-color: #04133C;
  -webkit-padding-after: clamp(0px, 436.364px + -36.364vw, 300px);
          padding-block-end: clamp(0px, 436.364px + -36.364vw, 300px);
  padding-inline: 1.5rem;
}
.home .projectstory-box .projectstory-content {
  width: 100%;
  max-width: none;
  border-radius: 20px;
  padding: 1.5rem;
  -webkit-padding-before: 60px;
          padding-block-start: 60px;
  background-color: #ffffff66;
}
.home .projectstory-box .projectstory-content a :hover {
  opacity: 0.7;
}
.home .projectstory-box .projectstory-content img {
  -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
}
.home .projectstory-box .projectstory-content figcaption {
  color: #ffffff;
  font-size: clamp(16px, 14.182px + 0.485vw, 20px);
  font-weight: 100;
}
.home .projectstory-box h2.wp-block-heading {
  color: #ffffff80;
  font-size: 24cqw;
  font-family: "Noto Sans JP", sans-serif;
  position: absolute;
  top: clamp(150px, 127.273px + 6.061vw, 200px);
  translate: 0% -50%;
  z-index: 1;
}
.home .projectstory-box :is(.projectstory-object-01, .projectstory-object-02) {
  position: absolute;
}
.home .projectstory-box .projectstory-object-01 {
  display: none;
}
.home .projectstory-box .projectstory-object-02 {
  right: 0;
  bottom: 0;
}
.home .projectstory-box .projectstory-object-02 svg,
.home .projectstory-box .projectstory-object-02 img {
  width: clamp(300px, 254.545px + 12.121vw, 400px);
}
@media (min-width: 992px) {
  .home .projectstory-box .projectstory-inner {
    -webkit-padding-after: 0;
            padding-block-end: 0;
  }
  .home .projectstory-box .projectstory-content {
    max-width: 1575px;
    border-radius: 82px;
    text-align: center;
  }
  .home .projectstory-box h2.wp-block-heading {
    font-size: 15.625cqw;
  }
  .home .projectstory-box .projectstory-object-02 img {
    height: auto;
  }
}
@media (min-width: 1400px) {
  .home .projectstory-box .projectstory-object-01 {
    display: block;
    left: 0;
    top: 50%;
    z-index: 10;
  }
  .home .projectstory-box .projectstory-object-01 svg,
  .home .projectstory-box .projectstory-object-01 img {
    width: 300px;
  }
  .home .projectstory-box .projectstory-object-02 img {
    width: 600px;
  }
}
.home .box-around {
  position: relative;
  overflow: hidden;
}
.home .box-around .right-content {
  display: none;
}
.home .box-around .back-swiper-container,
.home .box-around .back-swiper-container .slider-vertical-pc,
.home .box-around .back-swiper-container .swiper {
  width: 100%;
  max-width: none;
}
.home .box-around .slider-vertical-pc {
  background-color: #04133C;
  -webkit-padding-before: 10px;
          padding-block-start: 10px;
  -webkit-padding-after: 10px;
          padding-block-end: 10px;
}
.home .box-around .slider-vertical-pc .swiper-wrapper {
  max-height: 200px;
}
@media (min-width: 992px) {
  .home .box-around .back-swiper-container {
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;
    width: 200px;
    display: -ms-grid;
    display: grid;
    gap: 10px;
  }
  .home .box-around .slider-vertical-pc {
    -webkit-padding-before: 0;
            padding-block-start: 0;
    -webkit-padding-after: 0;
            padding-block-end: 0;
    background-color: transparent;
  }
  .home .box-around .slider-vertical-pc .swiper-wrapper {
    max-height: 1600px;
  }
}
@media (min-width: 1200px) {
  .home .box-around .back-swiper-container {
    width: calc(100vw - 1000px);
  }
}
@media (min-width: 1400px) {
  .home .box-around .back-swiper-container {
    width: calc(100vw - 980px);
    max-width: 740px;
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
  .home .box-around .right-content {
    display: block;
  }
}
.home .about-box {
  position: relative;
  z-index: 10;
}
.home .about-box .about-inner {
  padding-inline: 2.75rem;
  -webkit-padding-after: clamp(300px, 163.636px + 36.364vw, 600px);
          padding-block-end: clamp(300px, 163.636px + 36.364vw, 600px);
}
.home .about-box .about-inner .corner-lefttop,
.home .about-box .about-inner .corner-leftbottom {
  display: none;
}
.home .about-box h2.wp-block-heading {
  color: #BEBEBE;
}
.home .about-box .about-content {
  position: relative;
  z-index: 5;
}
.home .about-box .about-content .about-comment {
  font-size: clamp(13px, 9.818px + 0.848vw, 20px);
  line-height: 30px;
  -webkit-margin-before: 1rem;
          margin-block-start: 1rem;
}
.home .about-box .about-object-01 {
  position: absolute;
  left: 0;
  bottom: -7px;
}
.home .about-box .about-object-01 img,
.home .about-box .about-object-01 svg {
  width: clamp(400px, 263.636px + 36.364vw, 700px);
}
@media (max-width: 991.98px) {
  .home .about-box .about-content {
    display: block;
  }
}
@media (min-width: 992px) {
  .home .about-box::before {
    content: "";
    display: block;
    background-color: #04133C;
    width: 100%;
    height: clamp(50px, 4.545px + 12.121vw, 150px);
    position: relative;
    z-index: 10;
  }
  .home .about-box .about-inner {
    container-type: inline-size;
    position: relative;
    height: 1000px;
    padding: 0;
  }
  .home .about-box .about-inner .corner-lefttop,
  .home .about-box .about-inner .corner-leftbottom {
    display: block;
    height: 50%;
    position: absolute;
    z-index: -1;
    overflow: hidden;
    aspect-ratio: 1/1;
  }
  .home .about-box .about-inner .corner-lefttop::after,
  .home .about-box .about-inner .corner-leftbottom::after {
    content: "";
    width: 200%;
    height: 200%;
    position: absolute;
    border-radius: 50%;
  }
  .home .about-box .about-inner .corner-lefttop {
    top: 0;
    left: 0;
  }
  .home .about-box .about-inner .corner-lefttop::after {
    -webkit-box-shadow: -25cqh -25cqh 0 0 #04133C;
            box-shadow: -25cqh -25cqh 0 0 #04133C;
  }
  .home .about-box .about-inner .corner-leftbottom {
    left: 0;
    bottom: 0;
  }
  .home .about-box .about-inner .corner-leftbottom::after {
    bottom: 0;
    -webkit-box-shadow: -25cqh 25cqh 0 0 #04133C;
            box-shadow: -25cqh 25cqh 0 0 #04133C;
  }
  .home .about-box .about-content {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .home .about-box .about-content .about-text {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
  }
  .home .about-box .about-content .about-text .about-comment {
    width: 100%;
    max-width: 600px;
    -webkit-margin-start: auto;
            margin-inline-start: auto;
    font-size: clamp(16px, 14.182px + 0.485vw, 20px);
  }
}
.home .work-box,
.home .voice-box,
.home .recruit-box {
  position: relative;
}
@media (min-width: 992px) {
  .home .work-box:before,
  .home .voice-box:before,
  .home .recruit-box:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(217, 217, 217, 0.5);
  }
}
.home .work-box {
  z-index: 10;
}
.home .work-box .work-inner {
  background-color: #04133C;
  -webkit-padding-before: clamp(40px, 21.818px + 4.848vw, 80px);
          padding-block-start: clamp(40px, 21.818px + 4.848vw, 80px);
  -webkit-padding-after: clamp(100px, 77.273px + 6.061vw, 150px);
          padding-block-end: clamp(100px, 77.273px + 6.061vw, 150px);
}
.home .work-box .work-content {
  -webkit-margin-before: 3rem;
          margin-block-start: 3rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.home .work-box .work-content figure {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  z-index: 5;
  width: clamp(180px, 114.091px + 17.576vw, 325px);
}
.home .work-box .work-content figure:first-child, .home .work-box .work-content figure:last-child {
  background-color: #ffffff;
  opacity: 0.5;
}
.home .work-box .work-content figure:first-child img, .home .work-box .work-content figure:last-child img {
  visibility: hidden;
}
.home .work-box .work-content figure[class*=_icon][class*=rocket] figcaption::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background-image: url("../image/rocket_icon.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 992px) {
  .home .work-box .work-content figure[class*=_icon][class*=rocket] figcaption::before {
    width: 150px;
    height: 150px;
  }
}
.home .work-box .work-content figure[class*=_icon][class*=factory] figcaption::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background-image: url("../image/factory_icon.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 992px) {
  .home .work-box .work-content figure[class*=_icon][class*=factory] figcaption::before {
    width: 150px;
    height: 150px;
  }
}
.home .work-box .work-content figure[class*=_icon][class*=art] figcaption::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background-image: url("../image/art_icon.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 992px) {
  .home .work-box .work-content figure[class*=_icon][class*=art] figcaption::before {
    width: 150px;
    height: 150px;
  }
}
.home .work-box .work-content figure a:hover {
  opacity: 0.5;
}
.home .work-box .work-content figure img {
  -webkit-filter: brightness(0.5);
          filter: brightness(0.5);
}
.home .work-box .work-content figure figcaption {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  color: #ffffff;
  z-index: 1;
  pointer-events: none;
}
.home .work-box .wp-block-buttons {
  -webkit-margin-before: 2.5rem;
          margin-block-start: 2.5rem;
}
.home .work-box :is(.work-object-01, .work-object-02) {
  position: absolute;
}
.home .work-box .work-object-01 {
  top: 10%;
  left: -15%;
  width: 100%;
}
.home .work-box .work-object-02 {
  right: -15%;
  bottom: 0;
}
.home .work-box .work-object-02 img,
.home .work-box .work-object-02 svg {
  width: clamp(300px, 254.545px + 12.121vw, 400px);
}
@media (min-width: 992px) {
  .home .work-box:before {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, rgba(217, 217, 217, 0.5)));
    background: linear-gradient(transparent 50%, rgba(217, 217, 217, 0.5) 50%);
  }
  .home .work-box .work-inner {
    border-radius: var(--main-box-radius-right);
  }
  .home .work-box h2.wp-block-heading {
    margin: 0 !important;
  }
  .home .work-box .work-content {
    width: 90%;
    max-width: none;
    margin: 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .home .work-box .work-object-01 {
    top: initial;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 600px;
    z-index: 10;
  }
  .home .work-box .work-object-02 {
    right: 0;
    z-index: 10;
  }
}
.home .voice-box {
  z-index: 1;
}
.home .voice-box .voice-inner {
  background-color: #A3C0E2;
  -webkit-padding-before: clamp(40px, 21.818px + 4.848vw, 80px);
          padding-block-start: clamp(40px, 21.818px + 4.848vw, 80px);
  -webkit-padding-after: clamp(50px, 93.636px + -3.636vw, 80px);
          padding-block-end: clamp(50px, 93.636px + -3.636vw, 80px);
}
.home .voice-box .voice-slider {
  -webkit-margin-before: 3rem;
          margin-block-start: 3rem;
  -webkit-margin-start: auto !important;
          margin-inline-start: auto !important;
  -webkit-margin-end: 0 !important;
          margin-inline-end: 0 !important;
  container-type: inline-size;
  border-radius: var(--main-box-radius-left);
  background-color: #04133C;
  border: 10px solid #ffffff;
  border-right: none;
  position: relative;
  height: clamp(340px, 221.818px + 31.515vw, 600px);
}
.home .voice-box .voice-slider .wp-block-vk-blocks-slider {
  position: absolute;
  height: clamp(340px, 221.818px + 31.515vw, 600px);
  top: -50px;
  left: clamp(0px, -38.636px + 10.303vw, 85px);
}
.home .voice-box .voice-slider .wp-block-vk-blocks-slider .swiper-wrapper {
  -webkit-padding-start: 10px;
          padding-inline-start: 10px;
}
.home .voice-box .voice-slider .wp-block-vk-blocks-slider .swiper-wrapper .wp-block-post-featured-image, .home .voice-box .voice-slider .wp-block-vk-blocks-slider .swiper-wrapper .wp-block-post-featured-image img {
  width: clamp(180px, 116.364px + 16.97vw, 320px);
  max-width: 100%;
  border-radius: 10px;
}
.home .voice-box .voice-slider .wp-block-vk-blocks-slider ul.swiper-wrapper {
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}
.home .voice-box .voice-slider .wp-block-vk-blocks-slider .swiper-button-next,
.home .voice-box .voice-slider .wp-block-vk-blocks-slider .swiper-button-prev {
  display: none;
}
.home .voice-box .voice-slider .wp-block-vk-blocks-slider p {
  color: #ffffff;
  margin: 0;
  font-weight: bold;
  font-size: clamp(13px, 7.545px + 1.455vw, 25px);
}
.home .voice-box .voice-slider .wp-block-vk-blocks-slider .voice-join-year {
  font-size: clamp(10px, 6.364px + 0.97vw, 18px);
}
.home .voice-box .voice-object-01 {
  position: absolute;
  left: -10px;
  bottom: -90px;
  width: 100%;
  max-width: 300px;
  z-index: 0;
}
.home .voice-box .wp-block-buttons {
  -webkit-margin-before: 1.5rem;
          margin-block-start: 1.5rem;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  position: relative;
  z-index: 5;
}
@media (min-width: 768px) {
  .home .voice-box .voice-slider .wp-block-vk-blocks-slider .swiper-wrapper {
    -webkit-padding-start: 30px;
            padding-inline-start: 30px;
  }
  .home .voice-box .voice-object-01 {
    max-width: 400px;
  }
}
@media (min-width: 992px) {
  .home .voice-box {
    -webkit-padding-before: clamp(40px, 21.818px + 4.848vw, 80px);
            padding-block-start: clamp(40px, 21.818px + 4.848vw, 80px);
  }
  .home .voice-box .voice-inner {
    border-radius: var(--main-box-radius-left);
  }
  .home .voice-box h2 {
    display: inline-block;
  }
  .home .voice-box .voice-slider {
    border-radius: var(--main-box-radius-left);
  }
  .home .voice-box .voice-slider .wp-block-vk-blocks-slider .swiper-wrapper {
    -webkit-padding-start: 15px;
            padding-inline-start: 15px;
  }
  .home .voice-box .voice-slider .wp-block-vk-blocks-slider .swiper-button-next,
  .home .voice-box .voice-slider .wp-block-vk-blocks-slider .swiper-button-prev {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: transparent;
    color: #ffffff;
    top: calc(50% + 50px);
  }
  .home .voice-box .voice-slider .wp-block-vk-blocks-slider .swiper-button-next::after,
  .home .voice-box .voice-slider .wp-block-vk-blocks-slider .swiper-button-prev::after {
    font-size: 3rem;
  }
  .home .voice-box .voice-slider .wp-block-vk-blocks-slider .swiper-button-prev {
    left: -5px;
  }
  .home .voice-box .voice-slider .wp-block-vk-blocks-slider .swiper-button-next {
    right: 274px;
  }
  .home .voice-box .voice-object-01 {
    left: 0;
    bottom: -80px;
    width: 100%;
    max-width: 450px;
  }
}
@media (min-width: 1200px) {
  .home .voice-box .voice-slider .wp-block-vk-blocks-slider .swiper-wrapper {
    -webkit-padding-start: 25px;
            padding-inline-start: 25px;
  }
  .home .voice-box .voice-slider .wp-block-vk-blocks-slider .swiper-button-prev {
    left: 5px;
  }
  .home .voice-box .voice-slider .wp-block-vk-blocks-slider .swiper-button-next {
    right: 320px;
  }
  .home .voice-box .voice-object-01 {
    max-width: 500px;
  }
}
@media (min-width: 1400px) {
  .home .voice-box .voice-object-01 {
    max-width: 600px;
  }
}
@media (min-width: 1700px) {
  .home .voice-box .voice-object-01 {
    max-width: 800px;
  }
}
.home .recruit-box {
  -webkit-padding-before: clamp(80px, 130.909px + -4.242vw, 115px);
          padding-block-start: clamp(80px, 130.909px + -4.242vw, 115px);
}
.home .recruit-box .recruit-inner {
  background-image: url(../image/cloud.png);
  background-position: right;
  background-repeat: no-repeat;
  border-radius: 35px 35px 0 0;
  background-color: #A3C0E2;
  padding-inline: 2.5rem;
  -webkit-padding-before: 2rem;
          padding-block-start: 2rem;
}
.home .recruit-box .recruit-content {
  max-width: 1200px;
  -webkit-margin-before: 2rem;
          margin-block-start: 2rem;
}
.home .recruit-box h2.wp-block-heading {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  white-space: nowrap;
  max-width: none !important;
}
.home .recruit-box .recruit-object-01 {
  -webkit-margin-before: 50px;
          margin-block-start: 50px;
  -webkit-animation: moveCar 15s linear infinite;
          animation: moveCar 15s linear infinite;
}
.home .recruit-box .recruit-object-01 img,
.home .recruit-box .recruit-object-01 svg {
  max-width: none !important;
}
@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes scale {
  0% {
    scale: 0;
  }
  100% {
    scale: 1;
  }
}
@keyframes move_k-tori03 {
  0%, 90%, 100% {
    -webkit-transform: translate(-100px, 0);
            transform: translate(-100px, 0);
  }
  50%, 85% {
    -webkit-transform: translate(-35px, 0);
            transform: translate(-35px, 0);
  }
}
@keyframes About-human-stick {
  0% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  20% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  100% {
    rotate: -90deg;
    -webkit-transform-origin: 120px 215px;
            transform-origin: 120px 215px;
  }
}
@keyframes move_stem {
  0% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes move_stemcurve {
  0% {
    -webkit-transform: translate(0, 100px);
            transform: translate(0, 100px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes eye-blink {
  0%, 10%, 15%, 30%, 35%, 40%, 60%, 65%, 90%, 95% {
    opacity: 1;
  }
  11%, 14%, 31%, 34%, 36%, 39%, 61%, 64%, 91%, 94% {
    opacity: 0;
  }
}
@keyframes moveCar {
  from {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  to {
    -webkit-transform: translateX(-100vw);
            transform: translateX(-100vw);
  }
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50%, 70% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
/**
 * clamp関数の文字列を返す
 *
 * @param {Number} $size-at-min-width - 最小画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $size-at-max-width - 最大画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $min-width [optional] - 最小画面幅 (デフォルト: $min-width-default)
 * @param {Number} $max-width [optional] - 最大画面幅 (デフォルト: $max-width-default)
 * @return {String} CSS clamp関数を含む計算式
 *
 * @description
 * 画面幅に応じて値が滑らかに変化するレスポンシブな値を生成します。
 * 例えば、フォントサイズやマージン、パディングなどの値を画面幅に応じて
 * 自動的に調整することができます。
 *
 * @example
 *   // フォントサイズを16pxから24pxまで可変させる
 *   font-size: clamp-calc(16px, 24px);
 *
 *   // マージンを2remから4remまで可変させる（画面幅768px～1200px）
 *   margin: clamp-calc(2rem, 4rem, 768px, 1200px);
 *
 * @note
 * - 引数の単位は一貫している必要はありません（px, rem等が混在可能）
 * - 内部で全ての値をpxに変換して計算を行います
 * - 返り値は入力された$size-at-min-widthと同じ単位で返されます
 * - 負の値（マイナスマージンなど）にも対応しています
 *
 * @implementation
 * 1. 入力値を全てpxに変換
 * 2. 線形の傾きを計算
 * 3. y軸との交点を計算
 * 4. 必要に応じて最小値と最大値を入れ替え
 * 5. 元の単位に変換して最終的なclamp関数を構築
 */
/**
 * 与えられた値をピクセル(px)単位に変換する関数
 *
 * @param {Number} $value - 変換したい値（rem または px）
 * @return {Number} 変換後のピクセル値
 *
 * @example
 *   convert-to-px(1.5rem)  // 24px ($base-font-size が 16px の場合)
 *   convert-to-px(20px)    // 20px (そのまま返される)
 *   convert-to-px(2em)     // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - rem単位の場合: $base-font-sizeを基準にしてpxに変換
 * - px単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/**
 * ピクセル(px)単位の値をrem単位に変換する関数
 *
 * @param {Number} $px-value - 変換したい値（px または rem）
 * @return {Number} 変換後のrem値
 *
 * @example
 *   convert-to-rem(16px)   // 1rem ($base-font-size が 16px の場合)
 *   convert-to-rem(24px)   // 1.5rem ($base-font-size が 16px の場合)
 *   convert-to-rem(1.5rem) // 1.5rem (そのまま返される)
 *   convert-to-rem(2em)    // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - px単位の場合: $base-font-sizeを基準にしてremに変換
 * - rem単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @note
 * - レスポンシブデザインに適したrem単位への変換に使用
 * - $base-font-size はグローバルで定義されている必要がある
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/*
 * 補助関数：小数点以下の指定した桁数で四捨五入する関数
 */
/*
 * 補助関数：累乗を計算する関数
 * 引数：$number 底となる数
 *      $exponent 指数（正の整数のみ対応）
 */
.wpcf7-form .entry-form {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
  border-collapse: collapse;
}
.wpcf7-form .entry-form th,
.wpcf7-form .entry-form td {
  border: 1px solid #ddd;
  padding: 12px 15px;
  text-align: left;
  vertical-align: top;
}
.wpcf7-form .entry-form th {
  width: 200px;
  background-color: #f7f7f7;
  font-weight: bold;
  white-space: nowrap;
}
.wpcf7-form .entry-form th .required {
  display: inline-block;
  background-color: #c00;
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 6px;
}
.wpcf7-form .entry-form input[type=text],
.wpcf7-form .entry-form input[type=email],
.wpcf7-form .entry-form input[type=tel],
.wpcf7-form .entry-form input[type=number],
.wpcf7-form .entry-form select,
.wpcf7-form .entry-form textarea {
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.wpcf7-form .entry-form input[name=age] {
  width: 100px;
}
.wpcf7-form .entry-form textarea {
  height: 130px;
  resize: vertical;
}
.wpcf7-form .entry-form .wpcf7-radio,
.wpcf7-form .entry-form .wpcf7-checkbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.wpcf7-form .entry-form .entry-note {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}
@media screen and (max-width: 768px) {
  .wpcf7-form .entry-form {
    width: 80%;
    border: none;
  }
  .wpcf7-form .entry-form table,
  .wpcf7-form .entry-form tbody,
  .wpcf7-form .entry-form tr,
  .wpcf7-form .entry-form th,
  .wpcf7-form .entry-form td {
    display: block;
    width: 100%;
  }
  .wpcf7-form .entry-form tr {
    margin-bottom: 24px;
  }
  .wpcf7-form .entry-form th {
    background-color: transparent;
    border: none;
    padding: 0 0 6px;
    font-size: 15px;
  }
  .wpcf7-form .entry-form td {
    padding: 0 0 12px;
    border: none;
  }
  .wpcf7-form .entry-form input[type=submit] {
    width: 100%;
    padding: 14px;
  }
}
.wpcf7-form input.wpcf7-submit {
  border: none;
  background-color: #999;
  color: #fff;
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.wpcf7-form input.wpcf7-submit.active {
  background-color: #ffcc00;
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
}

.form-birth p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 15px;
}

#autozip {
  display: none !important;
}

@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes scale {
  0% {
    scale: 0;
  }
  100% {
    scale: 1;
  }
}
@keyframes move_k-tori03 {
  0%, 90%, 100% {
    -webkit-transform: translate(-100px, 0);
            transform: translate(-100px, 0);
  }
  50%, 85% {
    -webkit-transform: translate(-35px, 0);
            transform: translate(-35px, 0);
  }
}
@keyframes About-human-stick {
  0% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  20% {
    rotate: 10deg;
    -webkit-transform-origin: 110px 212px;
            transform-origin: 110px 212px;
  }
  100% {
    rotate: -90deg;
    -webkit-transform-origin: 120px 215px;
            transform-origin: 120px 215px;
  }
}
@keyframes move_stem {
  0% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes move_stemcurve {
  0% {
    -webkit-transform: translate(0, 100px);
            transform: translate(0, 100px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}
@keyframes eye-blink {
  0%, 10%, 15%, 30%, 35%, 40%, 60%, 65%, 90%, 95% {
    opacity: 1;
  }
  11%, 14%, 31%, 34%, 36%, 39%, 61%, 64%, 91%, 94% {
    opacity: 0;
  }
}
@keyframes moveCar {
  from {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  to {
    -webkit-transform: translateX(-100vw);
            transform: translateX(-100vw);
  }
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50%, 70% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
/**
 * clamp関数の文字列を返す
 *
 * @param {Number} $size-at-min-width - 最小画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $size-at-max-width - 最大画面幅での要素のサイズ (px|rem|emなど)
 * @param {Number} $min-width [optional] - 最小画面幅 (デフォルト: $min-width-default)
 * @param {Number} $max-width [optional] - 最大画面幅 (デフォルト: $max-width-default)
 * @return {String} CSS clamp関数を含む計算式
 *
 * @description
 * 画面幅に応じて値が滑らかに変化するレスポンシブな値を生成します。
 * 例えば、フォントサイズやマージン、パディングなどの値を画面幅に応じて
 * 自動的に調整することができます。
 *
 * @example
 *   // フォントサイズを16pxから24pxまで可変させる
 *   font-size: clamp-calc(16px, 24px);
 *
 *   // マージンを2remから4remまで可変させる（画面幅768px～1200px）
 *   margin: clamp-calc(2rem, 4rem, 768px, 1200px);
 *
 * @note
 * - 引数の単位は一貫している必要はありません（px, rem等が混在可能）
 * - 内部で全ての値をpxに変換して計算を行います
 * - 返り値は入力された$size-at-min-widthと同じ単位で返されます
 * - 負の値（マイナスマージンなど）にも対応しています
 *
 * @implementation
 * 1. 入力値を全てpxに変換
 * 2. 線形の傾きを計算
 * 3. y軸との交点を計算
 * 4. 必要に応じて最小値と最大値を入れ替え
 * 5. 元の単位に変換して最終的なclamp関数を構築
 */
/**
 * 与えられた値をピクセル(px)単位に変換する関数
 *
 * @param {Number} $value - 変換したい値（rem または px）
 * @return {Number} 変換後のピクセル値
 *
 * @example
 *   convert-to-px(1.5rem)  // 24px ($base-font-size が 16px の場合)
 *   convert-to-px(20px)    // 20px (そのまま返される)
 *   convert-to-px(2em)     // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - rem単位の場合: $base-font-sizeを基準にしてpxに変換
 * - px単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/**
 * ピクセル(px)単位の値をrem単位に変換する関数
 *
 * @param {Number} $px-value - 変換したい値（px または rem）
 * @return {Number} 変換後のrem値
 *
 * @example
 *   convert-to-rem(16px)   // 1rem ($base-font-size が 16px の場合)
 *   convert-to-rem(24px)   // 1.5rem ($base-font-size が 16px の場合)
 *   convert-to-rem(1.5rem) // 1.5rem (そのまま返される)
 *   convert-to-rem(2em)    // 2em (非対応の単位はそのまま返される)
 *
 * @description
 * - px単位の場合: $base-font-sizeを基準にしてremに変換
 * - rem単位の場合: 値をそのまま返す
 * - その他の単位: 変換せずそのまま返す
 *
 * @note
 * - レスポンシブデザインに適したrem単位への変換に使用
 * - $base-font-size はグローバルで定義されている必要がある
 *
 * @throws {Error} $base-font-size が定義されていない場合にエラー
 */
/*
 * 補助関数：小数点以下の指定した桁数で四捨五入する関数
 */
/*
 * 補助関数：累乗を計算する関数
 * 引数：$number 底となる数
 *      $exponent 指数（正の整数のみ対応）
 */
.post-name-projectstory {
  font-family: "Noto Sans JP", sans-serif;
}
.post-name-projectstory .page-header {
  margin-inline: 0;
  -webkit-margin-before: 100px !important;
          margin-block-start: 100px !important;
  -webkit-margin-after: 0 !important;
          margin-block-end: 0 !important;
  background-image: none;
  background-color: #E5F0FB;
  border-radius: 0;
  height: 150px;
  text-shadow: none;
}
.post-name-projectstory .page-header::before {
  content: none;
}
.post-name-projectstory .page-header .page-header-subtext {
  color: #04133C;
}
@media (max-width: 991.98px) {
  .post-name-projectstory .page-header {
    -webkit-margin-before: 0px !important;
            margin-block-start: 0px !important;
    -webkit-padding-before: 75px;
            padding-block-start: 75px;
    height: auto !important;
  }
}
.post-name-projectstory .site-body {
  background-color: #e5f0fb;
  background-image: radial-gradient(circle, #dde9f8 5px, transparent 5px), radial-gradient(circle, #dde9f8 5px, transparent 5px);
  background-position: 0 0, 11.5px 23px;
  background-size: 23px 46px;
  -webkit-padding-before: 0 !important;
          padding-block-start: 0 !important;
  -webkit-padding-after: clamp(100px, 54.545px + 12.121vw, 200px);
          padding-block-end: clamp(100px, 54.545px + 12.121vw, 200px);
}
.post-name-projectstory footer.block-site-footer {
  position: relative;
  z-index: 2;
  background-color: #4f5976;
}
.post-name-projectstory .projectstory-scroll {
  position: fixed;
  bottom: 0;
  left: 50%;
  translate: -50%;
  margin: 0;
  z-index: 1;
}
.post-name-projectstory .projectstory-scroll::after {
  content: "";
  display: block;
  width: 2px;
  height: 65px;
  background-color: #04133C;
  position: absolute;
  left: 50%;
  translate: -50% 0;
}
@media (max-width: 991.98px) {
  .post-name-projectstory .projectstory-scroll {
    display: none;
  }
}
.post-name-projectstory .projectstory-main-area {
  background-color: #E5F0FB;
  -webkit-padding-before: clamp(30px, 18.182px + 3.152vw, 56px);
          padding-block-start: clamp(30px, 18.182px + 3.152vw, 56px);
  -webkit-padding-after: clamp(100px, 54.545px + 12.121vw, 200px);
          padding-block-end: clamp(100px, 54.545px + 12.121vw, 200px);
}
.post-name-projectstory .projectstory-main-area .projectstory-main-box {
  width: 100%;
  max-width: 1200px;
}
.post-name-projectstory .projectstory-main-area .projectstory-main-box .background-round-white {
  background-color: #ffffffbf;
  border-radius: 170px;
  padding: 1.5rem;
  -webkit-margin-before: clamp(30px, 20.909px + 2.424vw, 50px);
          margin-block-start: clamp(30px, 20.909px + 2.424vw, 50px);
  color: #04133C;
}
.post-name-projectstory .projectstory-main-area .projectstory-subtitle {
  color: #757575;
  font-size: clamp(24px, 19px + 1.333vw, 35px);
  font-weight: bold;
  -webkit-margin-after: 0;
          margin-block-end: 0;
}
.post-name-projectstory .projectstory-main-area .projectstory-company {
  color: #757575;
  font-size: clamp(14px, 12.182px + 0.485vw, 18px);
}
.post-name-projectstory .projectstory-main-area .image-toggle-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 400px;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  cursor: pointer;
  max-width: none;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.post-name-projectstory .projectstory-main-area .image-toggle-container .toggle-checkbox {
  display: none;
}
.post-name-projectstory .projectstory-main-area .image-toggle-container .image-wrapper {
  position: absolute;
  top: -200px;
  left: 50%;
  width: 326px;
  height: 234px;
  translate: -50%;
  cursor: pointer;
}
.post-name-projectstory .projectstory-main-area .image-toggle-container .image-wrapper img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  border-radius: 8px;
}
.post-name-projectstory .projectstory-main-area .image-toggle-container .image-wrapper .image1 {
  opacity: 1;
  cursor: pointer;
}
.post-name-projectstory .projectstory-main-area .image-toggle-container .image-wrapper .image2 {
  opacity: 0;
  cursor: pointer;
}
.post-name-projectstory .projectstory-main-area .image-toggle-container .toggle-checkbox:checked ~ .image-wrapper .image1 {
  opacity: 0;
}
.post-name-projectstory .projectstory-main-area .image-toggle-container .toggle-checkbox:checked ~ .image-wrapper .image2 {
  opacity: 1;
}
.post-name-projectstory .projectstory-main-area .image-toggle-container .switch {
  margin-top: 16px;
  position: absolute;
  top: 88.5px;
  left: 50%;
  translate: -50% 50%;
  display: inline-block;
  width: 100px;
  height: 34px;
  cursor: pointer;
  border-radius: 34px;
  -webkit-transition: background-color 0.4s;
  transition: background-color 0.4s;
  -webkit-box-shadow: inset -1px 1px 6px 0px rgba(0, 0, 0, 0.16);
          box-shadow: inset -1px 1px 6px 0px rgba(0, 0, 0, 0.16);
  border: #04133C solid 2px;
  background: linear-gradient(205deg, #344063, #3d496b, #465173, #4f5a7b, #586383, #616c8b, #6a7693, #747f9b);
}
.post-name-projectstory .projectstory-main-area .image-toggle-container .switch::before, .post-name-projectstory .projectstory-main-area .image-toggle-container .switch::after {
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-size: 18px;
}
.post-name-projectstory .projectstory-main-area .image-toggle-container .switch::before {
  content: "Before";
  left: 32px;
}
.post-name-projectstory .projectstory-main-area .image-toggle-container .switch::after {
  content: "After";
  right: 36px;
  opacity: 0;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
.post-name-projectstory .projectstory-main-area .image-toggle-container .switch .slider {
  position: absolute;
  top: 50%;
  left: 0;
  width: 30px;
  height: 30px;
  background-color: #ffffff;
  border-radius: 50%;
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
  translate: 0% -50%;
  z-index: 2;
}
.post-name-projectstory .projectstory-main-area .image-toggle-container .switch .slider::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  -webkit-animation: poyopoyo 2s ease-out infinite;
          animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
  z-index: 1;
}
.post-name-projectstory .projectstory-main-area .image-toggle-container .switch .slider::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #04133C;
  z-index: 3;
}
.post-name-projectstory .projectstory-main-area .image-toggle-container .toggle-checkbox:checked ~ .switch {
  background: linear-gradient(61deg, #d3d9ec, #cfd6e9, #cad3e7, #c6d0e4, #c1cde1, #bccbdf, #b8c8dc, #b3c5d9);
  border: #B9C0C8 solid 2px;
  -webkit-box-shadow: inset 1px 1px 6px 0px rgba(0, 0, 0, 0.16);
          box-shadow: inset 1px 1px 6px 0px rgba(0, 0, 0, 0.16);
}
.post-name-projectstory .projectstory-main-area .image-toggle-container .toggle-checkbox:checked ~ .switch::before {
  opacity: 0;
}
.post-name-projectstory .projectstory-main-area .image-toggle-container .toggle-checkbox:checked ~ .switch::after {
  opacity: 1;
}
.post-name-projectstory .projectstory-main-area .image-toggle-container .toggle-checkbox:checked ~ .switch .slider {
  -webkit-transform: translateX(66px);
          transform: translateX(66px);
}
.post-name-projectstory .projectstory-main-area .image-toggle-container .toggle-checkbox:checked ~ .switch .slider::after {
  content: none;
}
.post-name-projectstory .projectstory-main-area .image-toggle-container .toggle-checkbox:checked ~ .switch .slider::before {
  background: #B9C0C8;
}
.post-name-projectstory .projectstory-main-area .image-toggle-container .slider-bg {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@media (max-width: 991.98px) {
  .post-name-projectstory .projectstory-main-area {
    padding-inline: 2rem;
  }
  .post-name-projectstory .projectstory-main-area .projectstory-main-box .background-round-white {
    border-radius: 35px;
  }
  .post-name-projectstory .projectstory-main-area .image-toggle-container .switch {
    top: 44%;
  }
}
.post-name-projectstory .projectstory-members-area {
  background-color: #C0D3E9;
  position: relative;
  z-index: 2;
}
.post-name-projectstory .projectstory-members-area::before, .post-name-projectstory .projectstory-members-area::after {
  content: "";
  background-image: repeating-linear-gradient(135deg, #9eb3cc, #9eb3cc 9px, transparent 9px, transparent 19px);
  display: block;
  height: 33px;
}
.post-name-projectstory .projectstory-members-area .projectstory-members-box {
  width: 100%;
  max-width: 1200px;
}
.post-name-projectstory .projectstory-members-area .projectstory-members-title {
  font-weight: bold;
  font-size: clamp(24px, 16.727px + 1.939vw, 40px);
  -webkit-margin-before: 2rem;
          margin-block-start: 2rem;
  color: #04133C;
}
.post-name-projectstory .projectstory-members-area .projectstory-members-member {
  -webkit-margin-before: 1.5rem;
          margin-block-start: 1.5rem;
  font-size: clamp(16px, 15.091px + 0.242vw, 18px);
  font-weight: bold;
}
.post-name-projectstory .projectstory-members-area .projectstory-members-member figure {
  background-image: url(../../assets/image/members_bg.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-align: center;
}
.post-name-projectstory .projectstory-members-area .projectstory-members-member .wp-element-caption {
  font-size: clamp(16px, 15.091px + 0.242vw, 18px);
  color: #04133C;
}
@media (max-width: 991.98px) {
  .post-name-projectstory .projectstory-members-area .projectstory-members-box {
    padding-inline: 2rem;
  }
}
.post-name-projectstory .projectstory-comic-area {
  overflow: hidden;
  position: relative;
  z-index: 2;
  -webkit-padding-after: 4rem;
          padding-block-end: 4rem;
}
.post-name-projectstory .projectstory-comic-area .projectstory-comic-box {
  width: 100%;
  max-width: 1000px;
  background-color: #ffffff;
  border-radius: 150px;
  text-align: center;
  padding: 100px;
  -webkit-margin-before: clamp(100px, 9.091px + 24.242vw, 300px);
          margin-block-start: clamp(100px, 9.091px + 24.242vw, 300px);
}
@media (max-width: 991.98px) {
  .post-name-projectstory .projectstory-comic-area {
    padding-inline: 15px;
  }
  .post-name-projectstory .projectstory-comic-area .projectstory-comic-box {
    border-radius: 20px;
    padding: 12px;
  }
}
.post-name-projectstory .projectstory-cooperation-area {
  background-color: #E5F0FB;
  overflow: hidden;
  padding-block: clamp(32px, 23.818px + 2.182vw, 50px);
}
.post-name-projectstory .projectstory-cooperation-area .projectstory-cooperation-title {
  font-size: clamp(20px, 15.455px + 1.212vw, 30px);
  font-weight: bold;
}
.post-name-projectstory .projectstory-cooperation-area .projectstory-cooperation-company {
  font-size: clamp(14px, 12.182px + 0.485vw, 18px);
}
.post-name-projectstory .projectstory-cooperation-area .projectstory-cooperation-box {
  width: 100%;
  max-width: 1000px !important;
}
.post-name-projectstory .projectstory-cooperation-area .projectstory-cooperation-text {
  background-color: #fffdeb;
  padding-block: 2rem;
  padding-inline: 2.5em;
  border-radius: 35px;
  font-weight: 500;
  font-size: clamp(16px, 15.091px + 0.242vw, 18px);
}
.post-name-projectstory .projectstory-cooperation-area .projectstory-cooperation-subtitle {
  color: #B9C0C8;
}
@media (max-width: 991.98px) {
  .post-name-projectstory .projectstory-cooperation-area .projectstory-cooperation-text {
    padding-block: 1rem;
    padding-inline: 1.25rem;
    border-radius: 20px;
  }
}