/*
 * Copyright koyacode
 */

/* ウェブフォントを使用する場合は下記のコメントアウトを外す */
/* @import url("https://fonts.googleapis.com/css2?family=Abel&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&display=swap");

/*********** general ***********/
:root {
  --text-color: #000;
  /* --text-color: #eee; */
  --_color-text: var(--text-color);
  --bg-color: #fff;
  --text-color--reverse: var(--bg-color);
  --bg-color--reverse: var(--text-color);
  /* --bg-color--reverse--hover: #4d5053; */
  --bg-color--reverse--hover: #373a3e;
  --link-color: #1473e6;
  --footer-color: #efeeea;
  --footer-bg-color: #222;
  --footer-child-nav-link-color: #ddd;
  --submit-color: #fff;
  --submit-bg-color: #1473e6;
  --submit-hover-color: #fff;
  --submit-hover-bg-color: #1161c3;

  /* Perfect Fourth */
  --font-size-h1: 4.209rem;
  --font-size-h2: 3.157rem;
  --font-size-h3: 2.369rem;
  --font-size-h4: 1.777rem;
  --font-size-h5: 1.333rem;

  /* フォントファミリーをカスタマイズする場合は下記のコメントアウトを外す */
  /* --font-family: "Sawarabi Mincho", YuMincho, "游明朝", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", Honoka, Meiryo, "メイリオ", serif; */
  --font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body {
  color: var(--text-color, #000);
  /* -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt"; */
  line-height: 1.6;
}
button,
a {
  color: currentColor;
}
@media (hover: hover) and (pointer: fine) {
  .smb-btn:active,
  .smb-btn:focus,
  .smb-btn:hover {
    filter: brightness(107%);
  }
}

/*********** section common ***********/
/* セクションタイトル */
.home .smb-section__title {
  color: var(--wp--preset--color--sm-accent);
  font-weight: 600;
  line-height: 1.3;
  font-family: var(--_global--font-family);
  font-size: 240%;
}

/* セクションタイトルのアンダーバーを削除 */
.home .smb-section__title:after {
  content: none;
}
.home .smb-section__header > * + .smb-section__lede,
.home .smb-section__header > * + .smb-section__lede-wrapper {
  margin: 0;
}
.home .smb-section__lede-wrapper {
  margin: 0;
}
.home figcaption.wp-element-caption {
  text-align: center;
}
/* h3.wp-block-heading {
  margin-bottom: 8px !important;
} */
@media (max-width: 640px) {
  .smb-section__title {
    --_font-size-level: 3;
  }
}

/* 更新前の文字装飾と、PHP生成の工法本文のレイアウトを維持する。 */
.sme-font-size,
.sme-line-height {
  display: inline-block;
}
li > .sme-font-size,
li > .sme-line-height {
  display: inline;
}
/* 画像リンクのinline-block化で増えたベースライン下の余白を戻す。 */
.wp-block-image > a {
  display: inline;
}
#section-message .message__body + .message__body {
  margin-top: 3.6rem;
}
@media (max-width: 639px) {
  .page-id-596 .wp-block-cover__inner-container > p + p {
    margin-top: 3.6rem;
  }
}
.page-id-222 .smb-section__body > p + p,
.page-id-222 .smb-section__body > p + ul,
.page-id-501 .c-entry__content > .wp-block-group > * + *,
#section-business-field .smb-section__body > .wp-block-image,
.section-works .smb-section__body > .worksblk + .worksblk,
.home :is(#section-method, #section-works) .smb-section__body > .wp-block-group,
.home :is(#section-method, #section-works) .smb-section__body > .wp-block-group > .wp-block-buttons + .wp-block-buttons {
  margin-top: 3.6rem;
}
.section-method .smb-section__body > h2 {
  margin-bottom: 1.8rem;
}
.section-method .smb-section__body > h3,
.page-id-222 .smb-section__body > h3 {
  margin-top: 2.7rem;
  margin-bottom: 1.8rem;
}
.section-method .smb-section__body > :is(h2, h3) + *,
.page-id-222 .smb-section__body > h3 + p {
  margin-top: 0;
}
.section-method .smb-section__body > :is(ol, ul) li + li {
  margin-top: 0.6rem;
}
.section-method .smb-section__body > table :is(th, td) {
  border: 1px solid #eee;
  padding: 0.6rem 1.2rem;
}
.section-method .smb-section__body > .method_blk {
  margin-top: 3.6rem;
}

/*********** menu ***********/
/* ロゴ */
.c-site-branding__title .custom-logo {
  width: 294px;
}
/* メニュー */
/* メニューの区切り線 */
.l-1row-header .p-global-nav .c-navbar__item {
  box-sizing: border-box;
  border-left: 1px solid #ccc;
}
.l-1row-header .p-global-nav .c-navbar {
  box-sizing: border-box;
  border-right: 1px solid #ccc;
}
/* メニューアイテム */
.p-global-nav .c-navbar__item > a {
  flex-direction: column-reverse; /* 英字を上に */
  padding-left: 24px;
  padding-right: 24px;
}
/* ホバー時のアンダーライン */
.p-global-nav--hover-extend-underline .c-navbar__item > a:after {
  height: 5px;
}
/* メニューの英字 */
.l-1row-header .p-global-nav .c-navbar__item small {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--wp--preset--color--sm-accent);
  font-weight: bold;
  --_font-size-level: -3;
}

/* ドロワーメニュー */
.c-drawer {
  --_font-size-level: 1;
}

/*********** footer ***********/
footer.l-footer {
  color: var(--footer-color);
  background: var(--footer-bg-color);
  text-align: center;
}
footer a,
footer a:hover,
footer .widget_nav_menu ul a:hover {
  text-decoration: none;
}
/* SNSアイコン */
.sns-icon-wrapper {
  margin-bottom: 2rem;
}
footer.l-footer svg {
  margin: 0 0.28rem;
  font-size: 2rem;
}
footer.l-footer svg.fa-line {
  /* LINEアイコンは大きく見えるためやや小さくする */
  font-size: 1.8rem;
}
/* Copyright */
.c-copyright {
  color: currentColor;
  background-color: transparent;
}
.c-copyright a,
.c-copyright a:hover,
.c-copyright a:visited {
  color: currentColor;
  text-decoration: none;
}
/* Copyright下からウィンドウ最下部までの余白 */
.l-footer .l-footer-widget-area {
  padding-bottom: var(--_padding1);
}

/* --- 1stビュー --- */
#section-hero {
  min-height: 700px;
}
#section-hero .smb-section__title {
  text-shadow: 1px 1px 2px black;
}
/* --- Message --- */
.message__media-text .smb-media-text__title {
  color: var(--wp--preset--color--sm-accent);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  margin: 0.5em 0 10px;
  line-height: 1.4;
}

/* --- METHOD-INTRODUCTION --- */
#section-method .method__more-button {
  max-width: 480px;
  margin: 0 auto;
}
#section-method .method__more-button .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--sm-accent);
  color: #fff !important;
  opacity: 0.75;
}
#section-method .method__more-button .wp-block-button.is-style-outline .wp-block-button__link svg {
  padding-left: 1rem;
}
.wppsac-post-carousel .wppsac-post-image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

/* --- WORKS --- */
#section-works .works__more-button {
  max-width: 480px;
  margin: 0 auto;
}
#section-works .works__more-button .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--sm-accent);
  color: #fff !important;
  opacity: 0.75;
}
#section-works .works__more-button .wp-block-button.is-style-outline .wp-block-button__link svg {
  padding-left: 1rem;
}

/* swiper */
.swiper {
  width: 100%;
  height: 100%;
}
.swiper-wrapper {
  transition-timing-function: linear !important;
}
.swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.swiper-slide img {
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}
.swiper-slide-title {
  font-size: 1rem;
  margin-top: 15px;
}
.swiper-slide  a {
  text-decoration: none;
}


/* ---------------------------------------------------------------- */
/*********** 固定ページ ***********/
/* メニューしたの余白をなくす */
.page .l-contents__inner,
.single .l-contents__inner,
.archive .l-contents__inner {
  margin-top: 0;
}
.page .c-entry__header {
  display: none;
}
/* ケータイの場合は左右の余白を減らす */
@media (max-width: 640px) {
  .smb-section__inner .c-container {
    padding-left: 0;
    padding-right: 0;
  }
}
/* オリジナルデザインのタイトル（パターン） */
.pattern-page-title {
  padding: 40px 0 40px;
  background: #f4f4f4;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.pattern-page-title__inner {
  border-left: 6px solid var(--wp--preset--color--sm-accent);
  border-right: 6px solid var(--wp--preset--color--sm-accent);
  padding: 16px 32px 5px;
  font-weight: bold;
  line-height: 1.2;
  row-gap: 0;
}
.pattern-page-title .pattern-page-title__japanese-title {
  font-size: 1.125rem;
}
.pattern-page-title .pattern-page-title__english-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.1rem;
  text-transform: uppercase;
}
/* 表 */
.c-entry__body table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #ccc;
}
.c-entry__body table th,
.c-entry__body table td {
  border: none;
  border-bottom: 1px solid #ccc;
  padding: 14px 1em;
  text-align: left;
  vertical-align: top;
}
.c-entry__body table th {
  width: 20%;
}
@media (max-width: 640px) {
  .c-entry__body table tr {
    display: flex;
  }
  .c-entry__body form table tr {
    display: initial;
  }
}

/*********** 会社情報 ***********/


/*********** 工事経歴書 ***********/


/*********** 一覧ページ共通 ***********/
.archive .p-archive .c-entries {
  --entries--item-width: 50%;
}
@media (min-width: 1024px) {
  .archive .p-archive .c-entries {
      --entries--item-width: 25%;
  }
}
.c-entry-summary__title {
  --_font-size-level: 0;
}
.archive .p-archive .c-entries .c-entry-summary__meta {
  display: none;
}


/*********** 所有機械一覧 ***********/
.machine-item {
  background: #f4f4f4;
  gap: 0;
  align-items: center !important;
  padding-bottom: 20px;
}
.machine-item__title {
  margin: 20px 0 15px !important;
  line-height: 1.1;
}
.machine-item__img {
  margin-bottom: 1rem !important;
  width: 92%;
}
.machine-item__table.wp-block-table {
  width: 92%;
}
.machine-item__table.wp-block-table > table {
  margin: 0 auto;
  border: 1px solid #ccc;
}
.machine-item__table.wp-block-table > table th,
.machine-item__table.wp-block-table > table td {
  border-bottom: 1px solid #ccc;
  padding: 18px 1em 14px 2em;
  text-align: left;
  vertical-align: top;
}
.machine-item__table.wp-block-table > table td {
  border: 1px solid #ccc;
  text-align: center;
  padding: 0.3em 0.3em;
}
.machine-item__table.wp-block-table > table tr:last-child > td {
  text-align: right;
}
.machine-item__table tr:not(:last-child) td {
  box-sizing: border-box;
  flex: 1; /* 各列を均等にする */
}
.machine-item__table tr:not(:last-child) td:first-child {
  flex-grow: 1.5;
}
.machine-item__table tr:not(:last-child) td:nth-child(2) {
  flex-grow: 2;
}

/*********** 施工事例一覧 ***********/


/*********** 施工事例個別 ***********/
.works__date {
  font-size: 90%;
  font-weight: normal;
  padding: 0;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
}
.works__description p {
  margin: 0 0 30px;
}
.works__img img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  width: 100% !important;
  height: 100%;
  background: #f4f4f4;
  text-align: center;
}

/*********** 工法紹介一覧 ***********/
.c-entry__header {
  margin-left: calc(-1* var(--_container-margin-left));
  margin-right: calc(-1* var(--_container-margin-right));
  max-width: initial;
}

/*********** 工法紹介個別 ***********/
.method__date {
  font-size: 100%;
  font-weight: bold;
  border-bottom: 1px solid #2689c8;
  padding: 0 25px 0.2em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
}
.method__description p {
  margin: 0 25px 30px;
}
.method__img img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  width: 100% !important;
  height: 100%;
  background: #f4f4f4;
  text-align: center;
}


/*********** プライバシーポリシー ***********/
.page .smb-section .smb-section__body > h3 {
  border-bottom: 1px solid #2689c8;
  padding: 0 25px 0.2em;
}

/*********** お問い合わせ ***********/
/* --- 現行サイトから丸ごとコピー BEGIN --- */
/* Contact
----------------------------------*/
.contact form {
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 100%;
}
.contact form table {
  line-height: 2;
}
.contact form table caption {
  text-align: left;
}
.contact form input[type="text"],
.contact form input[type="email"] {
  width: 60%;
  line-height: 2;
  border: 1px solid #ddd;
  margin-bottom: 0.5em;
}
.contact form textarea {
  width: 80%;
  line-height: 2;
  border: 1px solid #ddd;
  margin-bottom: 0.5em;
}
.contact form select {
  width: 60%;
  height: 2em;
  line-height: 2;
  border: 1px solid #ddd;
  margin-bottom: 0.5em;
}
.contact form .mwform-zip-field input[type="text"],
.contact form .mwform-tel-field input[type="text"] {
  width: 15%;
}
.contact form input.confirmtosubmit {
  display: block;
  width: 30%;
  margin: 2em auto 0;
  font-size: 100%;
  color: #2089cc;
  border: 2px solid #2089cc;
  background: #fff;
  padding: 0.9em 0;
}
.contact form input.confirmtosubmit:hover {
  background: #2089cc;
  color: #fff;
}
/* --- 現行サイトから丸ごとコピー END --- */

/* reCAPTCHA v3ロゴ非表示 */
body:not(.page-id-711, .page-id-723) .grecaptcha-badge {
  visibility: hidden;
}

/* --- お問い合わせ --- */
/* ボタン */
#section-contact-contact-form .smf-button-control {
  flex-grow: 1;
}
#section-contact-contact-form .smf-action .smf-button-control__control {
  width: 100%;
  color: #fff;
  /* background-color: #e8913b; */
  background-color: var(--wp--preset--color--sm-accent);
  /* background-color: #feb86d; */
  background-image: none;
  border: none;
}
/* 必須 */
/* Snow Monkey Formsの説明欄を必須の表示に使用する */
#section-contact-contact-form .smf-item__description {
  display: inline-block;
  background: #989898;
  padding: 1px 6px;
  color: #fff;
  margin-left: 4px;
  margin-top: 0;
  line-height: 1.5;
}
#section-contact-contact-form .smf-item__label {
  display: inline-block;
}
#section-contact-contact-form .contact-form {
  width: 80%;
  margin: 0 auto;
  padding-bottom: 10px;
  padding-bottom: 10px;
}
@media (max-width: 640px) {
  #section-contact-contact-form .contact-form {
    width: 100%;
  }
}
#section-contact-contact-form .contact-form__fullname {
  width: 100%;
  margin-bottom: 10px;
}
#section-contact-contact-form .contact-form__email {
  width: 100%;
  margin-bottom: 10px;
}
#section-contact-contact-form .contact-form__message {
  width: 100%;
  margin-bottom: 10px;
}
#section-contact-contact-form .contact-form + .smf-action {
  width: 80%;
  margin: 0 auto;
  display: flex;
}
@media (max-width: 640px) {
  #section-contact-contact-form .contact-form + .smf-action {
    width: 100%;
  }
}
/* 確認画面 */
#section-contact-contact-form .smf-placeholder {
  margin-bottom: 10px;
}
#section-contact-contact-form .smf-button-control:last-of-type {
  flex-grow: 2;
}
#section-contact-contact-form .snow-monkey-form[data-screen="confirm"] .smf-item__label__text {
  font-weight: bold;
}

/* --- 2024年度受講申し込み --- */
/* ボタン */
#section-application-application-form .smf-button-control {
  flex-grow: 1;
}
#section-application-application-form .smf-action .smf-button-control__control {
  width: 100%;
  color: #fff;
  background-color: #ff8b2e;
  background-image: none;
  border: none;
}
#section-application-application-form .smf-action .smf-button-control__control:hover {
  filter: brightness(107%);
}
/* 必須 */
/* Snow Monkey Formsの説明欄を必須の表示に使用する */
#section-application-application-form .smf-item__description {
  display: inline-block;
  background: #989898;
  padding: 1px 6px;
  color: #fff;
  margin-left: 4px;
  margin-top: 0;
  line-height: 1.5;
}
#section-application-application-form .smf-item__label {
  display: inline-block;
}
#section-application-application-form .application-form {
  width: 80%;
  margin: 0 auto;
  padding-bottom: 10px;
  padding-bottom: 10px;
}
@media (max-width: 640px) {
  #section-application-application-form .application-form {
    width: 100%;
  }
}
#section-application-application-form .application-form__family-name,
#section-application-application-form .application-form__first-name {
  width: 100%;
  margin-bottom: 10px;
}
#section-application-application-form .application-form__date {
  width: 100%;
  margin-bottom: 10px;
}
#section-application-application-form .application-form__branch {
  width: 100%;
  margin-bottom: 10px;
}
#section-application-application-form .application-form__email {
  width: 100%;
  margin-bottom: 10px;
}
#section-application-application-form .application-form__tel {
  width: 100%;
  margin-bottom: 10px;
}
#section-application-application-form .application-form__introducer {
  width: 100%;
  margin-bottom: 10px;
}
#section-application-application-form .application-form__message {
  width: 100%;
  margin-bottom: 10px;
}
#section-application-application-form .application-form + .smf-action {
  width: 80%;
  margin: 0 auto;
  display: flex;
}
@media (max-width: 640px) {
  #section-application-application-form .application-form + .smf-action {
    width: 100%;
  }
}
/* 確認画面 */
#section-application-application-form .smf-placeholder {
  margin-bottom: 10px;
}
#section-application-application-form .smf-button-control:last-of-type {
  flex-grow: 2;
}
#section-application-application-form .snow-monkey-form[data-screen="confirm"] .smf-item__label__text {
  font-weight: bold;
}

.event-form__button .smb-btn,
.apply-form__button .smb-btn {
  width: 100%;
  color: #fff;
  /* background-color: #e8913b; */
  background-color: #ff8b2e;
  /* background-color: #feb86d; */
  background-image: none;
  border: none;
}
.event-form__button .smb-btn:hover,
.apply-form__button .smb-btn:hover {
  /* background-color: #df6436; */
  filter: brightness(107%);
}
/* --- 2024年度受講申し込み --- */
#section-apply-form {
  background-color: #eef9dd;
}
.apply-form {
  width: 60%;
  margin: 0 auto;
  padding-bottom: 10px;
  padding-bottom: 10px;
}
@media (max-width: 640px) {
  .apply-form {
    width: 100%;
  }
}
.apply-form__fullname {
  width: 100%;
  margin-bottom: 10px;
}
.apply-form__email {
  width: 100%;
  margin-bottom: 10px;
}
.apply-form__message {
  width: 100%;
  margin-bottom: 10px;
}
.apply-form + .smf-action {
  width: 60%;
  margin: 0 auto;
  display: flex;
}
@media (max-width: 640px) {
  .apply-form + .smf-action {
    width: 100%;
  }
}
/* 確認画面 */
.smf-placeholder {
  margin-bottom: 10px;
}
.smf-button-control:last-of-type {
  flex-grow: 2;
}

/* --- イベント開催決定！ --- */
.event-form {
  width: 60%;
  margin: 0 auto;
  padding-bottom: 10px;
  padding-bottom: 10px;
}
@media (max-width: 640px) {
  .event-form {
    width: 100%;
  }
}
.event-form__fullname {
  width: 100%;
  margin-bottom: 10px;
}
.event-form__email {
  width: 100%;
  margin-bottom: 10px;
}
.event-form__message {
  width: 100%;
  margin-bottom: 10px;
}
.event-form + .smf-action {
  width: 60%;
  margin: 0 auto;
  display: flex;
}
@media (max-width: 640px) {
  .event-form + .smf-action {
    width: 100%;
  }
}
.event-form .smf-item {
  margin-bottom: 20px;
}
.smf-button-control {
  flex-grow: 1;
}
.smf-action .smf-button-control__control {
  width: 100%;
}
.smf-placeholder[data-name="checkboxes-trial"],
.smf-placeholder[data-name="checkboxes-mini-seminar"],
.smf-placeholder[data-name="checkboxes-orientation"] {
  margin-top: 10px;
}
#section-event-form {
  background-color: #eef9dd;
}
#section-event-form h3 {
  /* margin-top: 20px; */
  /* margin-bottom: 4px; */
  background: var(--text-color);
  color: #fff;
  /* padding-left: 0.6rem; */
}
/* #section-event-form p {
  margin-top: 4px;
} */
#section-event-form .snow-monkey-form[data-screen="confirm"] p {
  display: none;
}

/*********** プライバシーポリシー ***********/

/* ---------------------------------------------------------------- */
/*********** 投稿一覧ページ ***********/


/*********** 投稿個別ページ ***********/
/* 投稿者名を非表示 */
.c-entry__meta .c-meta__item--author {
  display: none;
}
/* 更新日を非表示 */
.c-entry__meta .c-meta__item--modified {
  display: none;
}

/* ---------------------------------------------------------------- */
/*********** animation ***********/
/* 下からふわっと表示 */
.fadeup--800ms,
.fadeup--1500ms,
.fadeup--2000ms {
  opacity: 0;
  transform: translateY(40px);
}
.fadeup--800ms.is-animated {
  animation: fadeup--40px 0.8s 1 cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.fadeup--1500ms.is-animated {
  animation: fadeup--40px 1.5s 1 ease forwards;
}
.fadeup--2000ms.is-animated {
  animation: fadeup--40px 2s 1 ease forwards;
}
.fadeup--3000ms {
  opacity: 0;
  transform: translateY(30px);
}
.fadeup--3000ms.is-animated {
  animation: fadeup--30px 3s 1 ease forwards;
}
@keyframes fadeup--40px {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes fadeup--30px {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}
/* 下から1文字ずつ表示 */
.fadeup-char {
  display: flex;
  overflow: hidden;
  --transition-delay: 0.05s;
}
.fadeup-char span {
  transform: translateY(85%);
  display: block;
}
.fadeup-char.is-animated span {
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transform: translateY(0);
}
/*** 各文字のアニメーション遅延時間 ***/
.fadeup-char span:nth-child(1) {
  /* animation-delay: 0s; */
  transition-delay: 0s;
}
.upfadeup-chardown span:nth-child(2) {
  /* animation-delay: calc(var(--transition-delay)*1); */
  transition-delay: calc(var(--transition-delay) * 1);
}
.fadeup-char span:nth-child(3) {
  /* animation-delay: calc(var(--transition-delay)*2); */
  transition-delay: calc(var(--transition-delay) * 2);
}
.fadeup-char span:nth-child(4) {
  /* animation-delay: calc(var(--transition-delay)*3); */
  transition-delay: calc(var(--transition-delay) * 3);
}
.fadeup-char span:nth-child(5) {
  /* animation-delay: calc(var(--transition-delay)*4); */
  transition-delay: calc(var(--transition-delay) * 4);
}
.fadeup-char span:nth-child(6) {
  /* animation-delay: calc(var(--transition-delay)*5); */
  transition-delay: calc(var(--transition-delay) * 5);
}
.fadeup-char span:nth-child(7) {
  /* animation-delay: calc(var(--transition-delay)*6); */
  transition-delay: calc(var(--transition-delay) * 6);
}
.fadeup-char span:nth-child(8) {
  /* animation-delay: calc(var(--transition-delay)*7); */
  transition-delay: calc(var(--transition-delay) * 7);
}
.fadeup-char span:nth-child(9) {
  /* animation-delay: calc(var(--transition-delay)*8); */
  transition-delay: calc(var(--transition-delay) * 8);
}
.fadeup-char span:nth-child(10) {
  /* animation-delay: calc(var(--transition-delay)*9); */
  transition-delay: calc(var(--transition-delay) * 9);
}
.fadeup-char span:nth-child(11) {
  /* animation-delay: calc(var(--transition-delay)*10); */
  transition-delay: calc(var(--transition-delay) * 10);
}
.fadeup-char span:nth-child(12) {
  /* animation-delay: calc(var(--transition-delay)*11); */
  transition-delay: calc(var(--transition-delay) * 11);
}
.fadeup-char span:nth-child(13) {
  /* animation-delay: calc(var(--transition-delay)*12); */
  transition-delay: calc(var(--transition-delay) * 12);
}
.fadeup-char span:nth-child(14) {
  /* animation-delay: calc(var(--transition-delay)*13); */
  transition-delay: calc(var(--transition-delay) * 13);
}
.fadeup-char span:nth-child(15) {
  /* animation-delay: calc(var(--transition-delay)*14); */
  transition-delay: calc(var(--transition-delay) * 14);
}
.fadeup-char span:nth-child(16) {
  /* animation-delay: calc(var(--transition-delay)*15); */
  transition-delay: calc(var(--transition-delay) * 15);
}
/* 背景を左から右に塗る */
.bg-fill-horizontal,
.bg-fill-horizontal-reverse {
  position: relative;
  /* エディタで指定した背景色を一旦打ち消して透明にする */
  background-color: transparent;
}
.bg-fill-horizontal.is-animated:before,
.bg-fill-horizontal-reverse.is-animated:before {
  animation: bg-fill-horizontal 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  /* background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%); */
  /* エディタで指定した背景色を使用 */
  /* background-color: var(--smb-media-text--background-color); */
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.bg-fill-horizontal.is-animated:before {
  left: 0;
  transform-origin: left center;
}
.bg-fill-horizontal-reverse.is-animated:before {
  right: 0;
  transform-origin: right center;
}
.smb-media-text.bg-fill-horizontal.is-animated:before,
.smb-media-text.bg-fill-horizontal-reverse.is-animated:before {
  /* エディタで指定した背景色を使用 */
  background-color: var(--smb-media-text--background-color);
}
@keyframes bg-fill-horizontal {
  0% {
    opacity: 0;
    transform: scaleX(0) translateX(-5%);
  }
  30% {
    transform: scaleX(1) translateX(0);
  }
  100% {
    transform: scaleX(1) translateX(0);
  }
  30%,
  100% {
    opacity: 1;
  }
}
.smb-section.bg-fill-horizontal .smb-section__background,
.smb-section.bg-fill-horizontal-reverse .smb-section__background {
  /* Yはエディタで指定した位置を使用する。Xはエディタで指定した位置がマイナスをとる場合があるため-100%から開始する */
  transform: var(--smb-section--background-transform) translateX(-100%) scaleX(0);
}
.smb-section.bg-fill-horizontal.is-animated .smb-section__background,
.smb-section.bg-fill-horizontal-reverse.is-animated .smb-section__background {
  /* animation: bg-fill-horizontal--smb-section__background 0.6s 1 cubic-bezier(.07,.92,.49,1) forwards; */
  animation: bg-fill-horizontal--smb-section__background 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.smb-section.bg-fill-horizontal.is-animated .smb-section__background {
  transform-origin: top left;
}
.smb-section.bg-fill-horizontal-reverse.is-animated .smb-section__background {
  transform-origin: top right;
}
@keyframes bg-fill-horizontal--smb-section__background {
  from {
    transform: var(--smb-section--background-transform) scaleX(0);
  }
  to {
    transform: var(--smb-section--background-transform) scaleX(100%);
  }
}

/* 文字を左から右に表示 */
#section-hero h2 {
  transition: background-color 0.5s ease; /* 背景色変更のアニメーション */
  background-color: transparent; /* 初期背景色 */
}

/* 黒背景から透明に変化するアニメーション */
@keyframes fillAndFade {
  0% {
    background-color: transparent;
  }
  50% {
    background-color: black;
  }
  100% {
    background-color: transparent;
  }
}
/* アニメーションが適用された状態 */
.background-animated {
  animation: fillAndFade 2s forwards; /* 2秒間実行し、終了時点のスタイルを保持 */
}

/* ボタンホバーでキラリと光らせる */
a.button--shiny {
  overflow: hidden;
}
a.button--shiny:hover:before {
  position: absolute;
  content: "";
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: shiny-btn1 1.5s ease-in-out 0s;
}
.wp-block-snow-monkey-blocks-btn.button--shiny {
  overflow: hidden;
}
.wp-block-snow-monkey-blocks-btn.button--shiny:hover .smb-btn:before {
  position: absolute;
  content: "";
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: shiny-btn1 1.5s ease-in-out 0s;
}
@keyframes shiny-btn1 {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  41% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}
/* 背景を左から塗りつぶし */
.bg-animation {
  display: inline-block;
  padding: 4px 20px;
  position: relative;
}
.bg-animation,
.bg-animation:after {
  /* アニメーションの開始タイミング */
  animation-iteration-count: var(--iterations, 1); /* 再生される回数 */
  animation-duration: var(--duration, 800ms); /* 完了するまでの所要時間 */
  animation-fill-mode: both; /* 実行の前後 */
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1); /* タイミングの指定 */
}
.bg-animation-delay1,
.bg-animation-delay1:after {
  animation-delay: var(--animation-delay1, 0); /* アニメーションの開始タイミング */
}
.bg-animation-delay2,
.bg-animation-delay2:after {
  animation-delay: var(--animation-delay2, 1s); /* アニメーションの開始タイミング */
}
.bg-animation-delay3,
.bg-animation-delay3:after {
  animation-delay: var(--animation-delay3, 2s); /* アニメーションの開始タイミング */
}
.bg-animation.is-animated {
  --animation-delay: var(--delay, 0);
  --animation-delay1: var(--delay, 0);
  --animation-delay2: var(--delay, 280ms);
  --animation-delay3: var(--delay, 560ms);

  --animation-duration: var(--duration, 400ms);
  --animation-iterations: var(--iterations, 1);
  position: relative;
  animation-name: clip-text;
  white-space: nowrap;
}
.bg-animation.is-animated:after {
  content: "";
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #252525;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  animation-name: text-revealer;
}

@keyframes clip-text {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes text-revealer {
  0%,
  50% {
    transform-origin: 0 50%;
  }
  60%,
  100% {
    transform-origin: 100% 50%;
  }
  60% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

/* 色が敷かれてから画像を表示する */
.section-img-color-fill-reveal *:has(img):before {
  content: "";
  display: inline-block;
  width: 0;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background: #fff;
}
.section-img-color-fill-reveal *:has(img):before {
  left: 0;
  transform-origin: left center;
}
.section-img-color-fill-reveal.smb-section-break-the-grid--right *:has(img):before {
  right: 0;
  left: auto;
  transform-origin: right center;
}
.section-img-color-fill-reveal.is-animated *:has(> img):before {
  animation: section-img-color-fill-reveal__color-fill forwards 0.8s 1 ease 0.1s normal;
}
.section-img-color-fill-reveal.smb-section-break-the-grid--right.is-animated *:has(> img):before {
  animation: section-img-color-fill-reveal__color-fill-reverse forwards 0.8s 1 ease 0.1s normal;
}
.section-img-color-fill-reveal img {
  opacity: 0;
  /* transform: scale(1.1); */
}
.section-img-color-fill-reveal.is-animated img {
  /* animation: section-img-color-fill-reveal__img forwards 0.8s 1 ease 0.4s normal; */
  animation: section-img-color-fill-reveal__img forwards 0.8s 1 ease 0.05s normal;
}
.section-img-color-fill-reveal.smb-section-break-the-grid--right.is-animated img {
  /* animation: section-img-color-fill-reveal__img forwards 0.8s 1 ease 0.4s normal; */
  animation: section-img-color-fill-reveal__img forwards 0.8s 1 ease 0.05s normal;
}
@keyframes section-img-color-fill-reveal__color-fill {
  0% {
    left: 0;
    width: 0;
  }
  50% {
    left: 0;
    width: 100%;
  }
  51% {
    left: 0;
    width: 100%;
  }
  68% {
    left: 0;
    width: 100%;
  }
  100% {
    left: 100%;
    width: 0;
  }
}
@keyframes section-img-color-fill-reveal__img {
  0% {
    opacity: 0;
    /* transform: scale(1.1); */
  }
  50% {
    opacity: 0;
    /* transform: scale(1.1); */
  }
  100% {
    opacity: 1;
    /* transform: scale(1); */
  }
}
@keyframes section-img-color-fill-reveal__color-fill-reverse {
  0% {
    right: 0;
    width: 0;
  }
  50% {
    right: 0;
    width: 100%;
  }
  51% {
    right: 0;
    width: 100%;
  }
  68% {
    right: 0;
    width: 100%;
  }
  100% {
    right: 100%;
    width: 0;
  }
}

/* 文字を左から右に表示 */
.show-horizontal {
  clip-path: inset(0 100% 0 0);
  display: inline-block;
  transition: 0.8s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
.show-horizontal.is-animated {
  clip-path: inset(0);
}
.show-horizontal__title .smb-media-text__title,
.show-horizontal__title .smb-section__title {
  clip-path: inset(0 100% 0 0);
  display: inline-block;
  transition: 0.8s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
.show-horizontal__title.is-animated .smb-media-text__title,
.show-horizontal__title.is-animated .smb-section__title {
  clip-path: inset(0);
}