/* -----------------------------
1.共通
2.ヘッダー
3.MV
4.サービス
5.会社案内
6.フッター

その他
00.アニメーション

下層ページ
7.サービス（事業紹介）
8.会社案内
9.お問い合わせ
10.その他

-------------------------------- */

/* ------------------------------------------------------------------------- */
/* 1.共通
/* ------------------------------------------------------------------------- */
/* Google fontの読み込み */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Zen+Kaku+Gothic+Antique:wght@400;500;700&display=swap");

/* スクロールの動き */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 83px;
}

body {
  font-family: "Zen Kaku Gothic Antique", "Lato", sans-serif;
  background-color: #f8f7f4;
}

/* 下層ページ h1デフォルトに */
.my-h1-target h1 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* h2見出し */
.smb-section__title::after {
  display: none;
}
.smb-section__title:not(.mv .smb-section__title) {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-size: 80px;
  line-height: 1;
  background: linear-gradient(95deg, #37ab8d 2.48%, #d6d245 99.23%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.smb-section__subtitle {
  font-weight: 400 !important;
  font-size: 18px !important;
}

/* WPのh2見出し */
:where(.is-layout-constrained, .is-layout-flow) > :where(h2:not([class*="is-style-"]), h2.is-style-default):not(.privacy-policy h2.wp-block-heading) {
  background-color: transparent !important;
  border-left: none !important;
}

/* h3見出し */
h3.wp-block-heading:not(.privacy-policy h3.wp-block-heading) {
  font-weight: 500;
  border-left: 2px solid #5bb47d;
  padding-left: 10px;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}
.border-none {
  border: none !important;
}

/* パンくずリスト、上に余白を追加 */
body:not(.home) .l-contents {
  padding-top: 5.30769rem;
  padding-top: calc(var(--_space, 1.76923rem) * 3);
}

/* 下層 */
body .l-contents {
  padding-top: 0 !important;
}
.sp-br_show br {
  display: none;
}

/* 下層共通のMV */
.mv-sub .smb-section__title {
  color: #333;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: currentcolor !important;
}

/* サービス hover 下線 */
:root :where(.smb-btn-wrapper.is-style-snow-monkey-143806) .smb-btn {
  --smb-btn--color: var(--wp--preset--color--sm-accent);
}

/* ------------------------------------------------------------------------- */
/* 2.ヘッダー 
/* ------------------------------------------------------------------------- */
.l-1row-header .p-global-nav .c-navbar__item {
  align-items: center;
}
.p-global-nav .c-navbar__item > a {
  font-weight: 500;
}
.l-1row-header .p-global-nav .c-navbar__item:last-child a {
  background-color: #238b21;
  border: solid 2px #238b21;
  color: #fff;
  border-radius: 99px;
  width: 55px;
  height: 55px;
}
.l-1row-header .p-global-nav .c-navbar__item:last-child a::before {
  display: none;
}
.c-navbar__item .svg-inline--fa {
  font-size: 23px;
}
/* ホバー */
.l-1row-header .p-global-nav .c-navbar__item:last-child a:hover {
  color: #238b21;
  background-color: #f8f7f3;
}

/* ハンバーガー */
.c-drawer-close-zone {
  background: #000;
  opacity: 0.6;
}
.c-drawer {
  background-color: #f8f7f3;
}
.c-drawer__inner {
  padding-top: 60px;
}
.c-drawer__item:first-child {
  border-top: solid 1px #dadada;
}
.c-drawer__item {
  border-bottom: solid 1px #dadada;
  padding: 0 !important;
}
.c-drawer a {
  color: #333;
  padding: 18px 10px;
}

/* 矢印の余白 */
.c-drawer__item a {
  position: relative;
  padding-right: 40px;
}
/* 矢印を作成 */
.c-drawer__item a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 8px;
  height: 8px;
  border-top: 1px solid #238b21;
  border-right: 1px solid #238b21;
  transform: translateY(-50%) rotate(45deg);
}

/* ------------------------------------------------------------------------- */
/* 3.MV 
/* ------------------------------------------------------------------------- */
.mv {
  /* max-height: 580px; */
  border-radius: 8px;
  overflow: visible !important;
}
.mv .smb-section__title {
  position: absolute;
  top: -100px;
  left: 50px;
}
.mv .smb-section__title span {
  font-size: 52px !important;
}
.mv .smb-section__inner,
.mv .smb-section__inner > .c-container {
  position: static;
}
.smb-section-with-bgimage__bgimage img {
  border-radius: 8px;
}

/* スクロールボタン */
.mv-scroll {
  position: absolute;
  top: -100px;
  right: 50px;
}
.mv-scroll a {
  font-size: 20px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: #fff;
  border: solid 20px #f8f7f3;
  display: grid;
  place-items: center;
  z-index: 3;
}
/* スクロールのアニメーション */
.mv-scroll a {
  transition:
    box-shadow 0.3s ease-in-out,
    transform 0.3s ease;
}
.mv-scroll a:hover {
  background-color: #f8f7f3;
  transition: 0.3s;
  transform: scale(1.1);
}

/* アニメーション英字 */
.mv-title_en {
  font-family: "Lato", sans-serif;
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  font-size: 96px;
  white-space: nowrap;
  overflow: hidden;
  line-height: 0.75;

  --width: 100%;
  width: var(--width);
}

.mv-title_en span {
  display: inline-block;
  text-shadow: var(--width) 0 0 currentColor;
  animation-name: scrollingText;
  animation-duration: 45s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes scrollingText {
  0% {
    translate: 0 0;
  }
  100% {
    translate: calc(var(--width) * -1) 0;
  }
}

/* ------------------------------------------------------------------------- */
/* 4.サービス
/* ------------------------------------------------------------------------- */
.service .smb-section__background {
  border-radius: 60px;
}
.service-card:nth-child(2) {
  margin-top: 32px;
}
.service-card:last-child {
  margin-top: 64px;
}
.service-card .smb-items__item {
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
}
.service-card .wp-block-image img {
  border-radius: 8px 8px 0px 0px;
}

.service-box {
  padding: 0 24px 32px !important;
}
.service-box p {
  padding-top: 16px;
  margin-top: 0 !important;
}

/* ------------------------------------------------------------------------- */
/* 5.会社案内 
/* ------------------------------------------------------------------------- */
.company {
  padding-bottom: 0 !important;
}
.company .smb-items__banner__title {
  position: relative;
  padding-bottom: 12px;
}
.company .smb-items__banner__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 40px;
  height: 1.5px;
  background-color: #fff;
}
.company-item span {
  font-weight: 500;
}
/* アニメーション */
.company-item .smb-items__banner__figure > img {
  transition: all 0.3s;
}
.company-item:hover .smb-items__banner__figure > img {
  transform: scale(1.2);
}

/* ------------------------------------------------------------------------- */
/* 6.フッター 
/* ------------------------------------------------------------------------- */
.l-footer {
  font-weight: 500;
}
.l-footer {
  border-top: none !important;
}
footer.l-footer--default .c-copyright {
  display: none;
}
.footer-content {
  z-index: 3;
}

/* ------------------------------------------------------------------------- */
/* 00.アニメーション
/* ------------------------------------------------------------------------- */
/*--------------- */
/* タイトル
/* -------------- */
/*  ヘッダー全体を「枠」にする */
.smb-section__header,
.mv-sp {
  overflow: hidden; /* はみ出た中身を隠す */
  display: block;
}

/* ヘッダーの中にある要素（サブタイトルとタイトル）の初期状態 */
.smb-section__header .smb-section__subtitle,
.smb-section__header .smb-section__title,
.mv-sp .mv-sp-title {
  opacity: 0;
  transform: translateY(100px); /* 100%だと枠の高さに依存するのでpx指定が安定します */
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

/* 少しだけ時間差（ディレイ）をつけて高級感を出す場合 */
.smb-section__header .smb-section__title,
.mv-sp .mv-sp-title {
  transition-delay: 0.1s;
}

/* 親のヘッダーに is-animated がついた時の状態 */
.smb-section__header.is-animated .smb-section__subtitle,
.smb-section__header.is-animated .smb-section__title,
.mv-sp.is-animated .mv-sp-title {
  opacity: 1;
  transform: translateY(0);
}

/*--------------- */
/* ヘッダー・フッターのナビ
/* -------------- */
.p-global-nav .c-navbar__item > a,
.wp-block-navigation .wp-block-navigation-item__content {
  padding-bottom: 15px;
  position: relative;
}
.p-global-nav .c-navbar__item > a::before,
.wp-block-navigation .wp-block-navigation-item__content::before {
  background: #238b21;
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform 0.3s;
}
.p-global-nav .c-navbar__item > a:hover::before,
.wp-block-navigation .wp-block-navigation-item__content:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

/*--------------- */
/* サービス・会社案内
/* -------------- */
/* コンテンツ（カード・バナー）の初期状態 */
.service-card,
.company-item {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 1.2s ease-out,
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
  margin-right: -1px !important;
}

/* 親セクションが animated になったら表示 */
.is-animated .service-card,
.is-animated .company-item {
  opacity: 1;
  transform: translateY(0);
}

/* デザイナーのこだわり：左から順にリズムよく出す（0.2秒ずつズラす） */
.is-animated .service-card:nth-child(1),
.is-animated .company-item:nth-child(1) {
  transition-delay: 0.2s;
}

.is-animated .service-card:nth-child(2),
.is-animated .company-item:nth-child(2) {
  transition-delay: 0.4s;
}

.is-animated .service-card:nth-child(3),
.is-animated .company-item:nth-child(3) {
  transition-delay: 0.6s;
}

/*--------------- */
/* MVセクション全体
/* -------------- */
.mv.smb-section-with-bgimage {
  opacity: 0;
  transform: translateY(40px);
  /* transitionの時間を1.8sに延ばして、よりゆったり動かします */
  transition:
    opacity 1.8s ease-out,
    transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* アニメーション実行時 */
.mv.smb-section-with-bgimage.is-animated {
  opacity: 1;
  transform: translateY(0);
}

/* もしタイトルが「ポン」と先に動いてしまう場合は、以下で標準をリセットします */
.mv.is-animated .smb-section__header,
.mv.is-animated .smb-section__title {
  animation: none !important;
  transform: none !important;
}

/*--------------- */
/* フェードイン
/* -------------- */
.fade-up {
  opacity: 0 !important;
  transform: translateY(60px) !important;
  transition:
    opacity 1.5s ease-out,
    transform 1.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: opacity, transform;
}

.fade-up.is-animated {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
/* ------------------------------------------------------------------------- */
/* 7.サービス（事業紹介）
/* ------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------- */
/* 8.会社案内
/* ------------------------------------------------------------------------- */
.company-title h3.wp-block-heading {
  border: none !important;
  padding: 0;
  padding: var(--entry-content-h3-padding) !important;
}
.company-title h3.wp-block-heading::after {
  content: " ";
  position: absolute;
  display: block;
  border-bottom: 2px solid #5bb47d;
  bottom: -10px;
  width: 38px;
}
.company-title_border .wp-block-heading {
  border: none !important;
  padding-left: 0 !important;
}


/* ------------------------------------------------------------------------- */
/* 9.お問い合わせ
/* ------------------------------------------------------------------------- */
/* 必須ラベル */
.smf-item:has([data-validations~="required"]) .smf-item__label__text::before {
  content: "必須";
  display: inline-block;
  padding: 5px 6px;
  color: #fff;
  background-color: #e46a39;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  margin-right: 1.5em;
  border-radius: 4px;
}

/* すべての入力欄とテキストエリアを横幅100%にする */
.smf-form .smf-text-control__control,
.smf-form .smf-textarea-control__control,
.smf-form .smf-select-control__control {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* ラジオボタン */
.smf-radio-buttons-control__control .smf-label:not(:last-child) {
  margin-bottom: 10px;
}

textarea {
  resize: none;
}

/* プレースホルダー */
.smf-form input::placeholder,
.smf-form textarea::placeholder {
  font-size: 14px;
  color: #a0a0a0;
  opacity: 1;
}
.smf-form input:-ms-input-placeholder,
.smf-form textarea:-ms-input-placeholder {
  color: #a0a0a0;
}

/* ボタン */
.smf-action .smf-button-control__control {
  font-size: 16px;
  background-color: #238b21;
  background-image: none;
  color: #fff;
  font-weight: bold;
  display: inline-block;
  min-width: 260px;
  padding: 1em;
  position: relative;
  transition: all 0.2s ease;
  border-radius: 99px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.smf-action .smf-button-control__control:hover {
  background-color: #ffffff;
  color: #238b21;
  border: 1px solid #238b21;

  box-shadow: 0 6px 15px rgba(21, 50, 105, 0.2);
}

/* 確認画面 */
.smf-action .smf-button-control button[data-action="back"] {
  color: #333;
  background-color: white;
  border:none;
}

/* 完了画面 */
.smf-focus-point {
  top: -9999px;
}
.smb-section:has([data-screen="complete"]) .smb-section__header {
    display: none !important;
}


/* ------------------------------------------------------------------------- */
/* 10.その他
/* ------------------------------------------------------------------------- */
.privacy-policy h2.wp-block-heading {
  background-color: #fff;
}

/* 404エラー */
.page-id-915 .l-contents__inner {
  display: block;
}
.page-id-915 .c-entry__title,
.page-id-915 .p-breadcrumbs-wrapper,
.page-id-915 .l-contents__sidebar {
  display: none;
}

/* reCAPTCHA */
.grecaptcha-badge {
    visibility: hidden;
}