.wp-block-navigation__responsive-container-open svg {
  width: 32px !important; /* ← 好きな長さに */
  height: auto !important;
}

.wp-block-button__link:hover {
  background-color: var(--wp--preset--color--custom-color-4);
  color: var(--wp--preset--color--custom-color-1);
}

/* ヘッダーメニュー用 */
.fade-in-header {
  opacity: 0;
  animation: fadeInText 1.5s ease forwards;
  animation-delay: 1s; /* 好みで調整 */
}

/* アニメーション定義（変更なし） */
@keyframes fadeInText {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInCover {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ナビゲーションリンクのホバーアニメーション */
.nav-anim a {
  transition: all 0.3s ease;
  display: inline-block; /* 動きを滑らかにするため */
}

.nav-anim a:hover {
  color: var(--wp--preset--color--main-color-3) !important;
  transform: translateY(-3px); /* ふわっと浮く */
}


/* ----------------------------------
   テキスト用：早めに表示
   ---------------------------------- */
.fade-in-text {
  opacity: 0;
  animation: fadeInText 1.5s ease forwards;
  animation-delay: 0.5s;
}

/* ----------------------------------
   カバー画像用：遅めに表示
   ---------------------------------- */

/* 重要：親ブロック自体は常に表示させておく */
.wp-block-cover.fade-in-cover {
  opacity: 1 !important; /* 初期値を1にする */
}

/* 背景画像だけを遅れてフェードイン */
.wp-block-cover.fade-in-cover .wp-block-cover__image-background {
  opacity: 0;
  animation: fadeInCover 2s ease forwards;
  animation-delay: 2s;
}

/* オーバーレイは常に表示（または薄く） */
.wp-block-cover.fade-in-cover .wp-block-cover__background {
  opacity: 1; /* もしくは好みの透明度 */
}


/* ----------------------------------
   pcとspの画像の入れ替え
   ---------------------------------- */

.pc-img { display: block; }
.sp-img { display: none; }

@media only screen and (max-width: 600px) {
  .pc-img { display: none !important; }
  .sp-img { display: block; }
}

/* ----------------------------------
   見出しの下線
   ---------------------------------- */
.heading-2::after {
  content: "";
  width: 60px;
  height: 3px;
  background: #8fa998;
  display: block;
  border-radius: 2px;
  margin-inline: auto;
}


/* ----------------------------------
   aboutアニメーション
   ---------------------------------- */

.fade-up-about {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up-about.show  {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.fade-up-about.delay-1.show { transition-delay: 0.3s; }
.fade-up-about.delay-2.show { transition-delay: 0.6s; }
.fade-up-about.delay-3.show { transition-delay: 0.9s; }
.fade-up-about.delay-4.show { transition-delay: 1.2s; }
.fade-up-about.delay-5.show { transition-delay: 1.5s; }
.fade-up-about.delay-6.show { transition-delay: 1.8s; }

/* Aboutセクション専用のカラム */
@media (min-width: 601px) {
  .about-columns {
    flex-wrap: nowrap !important;
  }
}

.about-columns {
  display: flex;
  align-items: stretch !important;
}

.about-image {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  flex: 1;
}

.about {
  position: relative;
  z-index: 2;
}

.about-overlay {
  position: relative;
  right: 0;
  margin-left: auto;
  width: 70%;
  z-index: 1;
}

.wp-block-group.about-overlay {
    margin-top: -100px !important;
}

/* PC・タブレットでは背景画像を表示、モバイルでは非表示 */
@media (max-width: 600px) {
  .about-image {
    display: none;
  }
}

/* モバイルでは通常の画像を表示、PCでは非表示 */
.about-image-sp {
  display: none;
}

@media (max-width: 600px) {
  .about-image-sp {
    display: block;
    width: 80%;
    max-width: 300px;
    margin: 20px auto 0;
    height: auto;
  }
}

.about-cover {
  position: relative;
  overflow: visible;
  width: 100%;
}

.leaf-img {
  position: absolute;
  right: -220px;
  top: -70px;
  width: 500px; /* 大きさ調整 */
  z-index: 10;   /* 画像の上に重ねる */
}

@media (min-width: 601px) and (max-width: 900px) {
  .leaf-img {
    width: 400px;
    right: -210px;
    top: -55px;
  }
}

@media (max-width: 600px) {
  .leaf-img {
    width: 350px;      /* ← 好きなサイズに調整 */
    right: -200px;     /* ← 位置も少し内側に寄せると自然 */
    top: -40px;       /* ← 上に重ねる量も調整可能 */
  }
}

.about-cover2 {
  position: relative;
  overflow: visible;
  width: 100%;
}

.leaf-img2 {
  position: absolute;
  left: -80px;
  bottom: -140px;
  width: 450px; /* 大きさ調整 */
  z-index: 10;   /* 画像の上に重ねる */
}

@media (min-width: 601px) and (max-width: 900px) {
  .leaf-img2 {
    width: 400px;
    left: -80px;
    bottom: -140px;
  }
}

@media (max-width: 600px) {
  .leaf-img2 {
    width: 350px;
    left: -80px;
    bottom: -140px;
  }
}

/* 横スクロールを完全に消す */
html, body {
  overflow-x: hidden;
}

/* スマホだけ gap を小さくする */
@media (max-width: 1080px) and (min-width: 601px) {
  .about-columns.wp-block-columns {
    row-gap: 20px !important;
    column-gap: 20px !important;
    gap: 20px !important;
  }
}


/* ----------------------------------
   workセクション
   ---------------------------------- */

/* PC：2列 × 2行 */
.work-grid {
  display: grid;
  grid-template-columns: repeat( 2, 1fr);
  column-gap: 50px;
  row-gap: 60px;
  max-width: 900px; /* 好きな幅に調整 */
}

.work-grid img {
  height: 300px; /* 好きな高さに調整 */
  width: 100%;
  object-fit: cover;
}


/* タブレット：2列 */
@media (max-width: 781px) and (min-width: 601px) {
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマホ：1列 × 6行 */
@media (max-width: 600px) {
  .work-grid {
    grid-template-columns: 1fr;
  }
}

/* workアニメーション */
/* 初期状態（非表示） */
.work-grid .work-card {
  opacity: 0;
  transform: translateY(20px) scale(1);
  border-radius: 0;
  transition: 
    opacity 0.8s ease,
    transform 0.4s ease,
    box-shadow 0.4s ease,
    border-radius 0.4s ease;
}

/* 表示状態（スクロールでクラスが付く） */
.work-grid .work-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ホバーアニメーション */
.work-grid .work-card:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  border-radius: 20px;
  transform: translateY(0) scale(1.05);
}

/* タイトルのアニメーション */
/* .work-title {
  opacity: 0;
  transform: translateY(20px);
  transition: 
    opacity 0.8s ease,
    transform 0.6s ease;
} */

/* 表示状態（スクロールでクラスが付く） */
/* .work-title.is-visible {
  opacity: 1;
  transform: translateY(0);
} */

.work {
  position: relative;
}

.leaf-img7 {
  width: 300px;
}

.work-cover {
  position: absolute;
  right: 0px;
  bottom: -80px;
}

.work-card {
  position: relative;
}

/* 葉っぱの飾り */
.work-card1::after {
  content: "";
  position: absolute;
  top: -40px;   /* 少しはみ出させると可愛い */
  left: -40px;
  width: 200px;
  height: 100px;
  background-image: url('../img/leaf1.png');
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(-15deg);
  pointer-events: none; /* 編集画面で邪魔しない */
}

.work-card2::after {
  content: "";
  position: absolute;
  top: -20px;   /* 少しはみ出させると可愛い */
  right: -40px;
  width: 200px;
  height: 100px;
  background-image: url('../img/leaf2.png');
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(30deg);
  pointer-events: none; /* 編集画面で邪魔しない */
}

.work-card3::after {
  content: "";
  position: absolute;
  top: -20px;   /* 少しはみ出させると可愛い */
  right: -40px;
  width: 200px;
  height: 100px;
  background-image: url('../img/leaf4.png');
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(20deg);
  pointer-events: none; /* 編集画面で邪魔しない */
}

.work-card4::after {
  content: "";
  position: absolute;
  bottom: -50px;   /* 少しはみ出させると可愛い */
  left: -80px;
  width: 240px;
  height: 120px;
  background-image: url('../img/leaf5.png');
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(60deg);
  pointer-events: none; /* 編集画面で邪魔しない */
}

.work-card5::after {
  content: "";
  position: absolute;
  bottom: -80px;   /* 少しはみ出させると可愛い */
  left: -20px;
  width: 200px;
  height: 100px;
  background-image: url('../img/leaf6.png');
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(-10deg);
  pointer-events: none; /* 編集画面で邪魔しない */
}

.work-card6::after {
  content: "";
  position: absolute;
  bottom: -80px;   /* 少しはみ出させると可愛い */
  right: -20px;
  width: 220px;
  height: 110px;
  background-image: url('../img/leaf7.png');
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(10deg);
  pointer-events: none; /* 編集画面で邪魔しない */
}


/* ----------------------------------
   メッセージ
   ---------------------------------- */

/* 初期状態（message-block1〜3 すべて） */
.message-block1,
.message-block2,
.message-block3,
.message-block4 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 表示状態 */
.message-block1.is-visible,
.message-block2.is-visible,
.message-block3.is-visible,
.message-block4.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 遅延 */
.message-block1.is-visible { transition-delay: 0.5s; }
.message-block2.is-visible { transition-delay: 1s; }
.message-block3.is-visible { transition-delay: 1.5s; }
.message-block4.is-visible { transition-delay: 2s; }


.message-overlay {
  position: relative;
  left: 0;
  margin-right: auto;
  margin-top: -200px !important;
  width: 70%;
  z-index: 1;
}

@media (min-width: 601px) {
  .message-columns {
    flex-wrap: nowrap !important;
  }
}

.message-image {
  position: relative;
  z-index: 5;
}

@media (min-width: 728px) {
  .message-image {
    aspect-ratio: 3 / 4;
    width: 100%;
    max-width: 400px; /* 好きな値に調整 */
    height: auto;
  }

  .message-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ← 縦長を維持しつつ綺麗に収まる */
  }
}

@media (min-width: 601px) and (max-width: 727.99999px) {
  .message-image {
    aspect-ratio: 9 / 16;
    width: 90%;
    max-width: 360px;
    margin: 0 auto;
  }

  .message-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ← 縦長を維持しつつ綺麗に収まる */
  }

  .message-columns {
    gap: 30px !important; /* ← これが効きます */
  }

  .message-overlay {
    margin-top: -200px !important;
  }
}

@media (max-width: 600px) {
  .message-image {
    aspect-ratio: auto !important;
    width: 80%;
    max-width: 300px;
    margin: 20px auto 0;
  }

  .message-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
  }

  .message-overlay {
    margin-top: -150px !important;
  }
}

/* スマホ（600px以下）では画像を下にする */
@media (max-width: 600px) {
  .message-columns {
    display: flex;
    flex-direction: column;
  }

  .message-image-column {
    order: 2; /* ← 画像を下へ */
  }

  .message-text-column {
    order: 1; /* ← 文章を上へ */
  }
}

.message-cover1 {
  position: relative;
  overflow: visible;
  width: 100%;
}

.leaf-img3 {
  position: absolute;
  left: -120px;
  bottom: -150px;
  width: 350px; /* 大きさ調整 */
  z-index: 10;   /* 画像の上に重ねる */
}

@media (min-width: 601px) and (max-width: 900px) {
  .leaf-img3 {
    width: 275px;
    left: -80px;
    bottom: -80px;
  }
}

@media (max-width: 600px) {
  .leaf-img3 {
    width: 200px;
    left: -45px;
    bottom: -40px;
  }
}

.message-cover2 {
  position: relative;
  overflow: visible;
  width: 100%;
}

.leaf-img4 {
  position: absolute;
  right: -100px;
  top: -120px;
  width: 350px; /* 大きさ調整 */
  z-index: 10;   /* 画像の上に重ねる */
}

@media (min-width: 601px) and (max-width: 900px) {
  .leaf-img4 {
    width: 300px;
  }
}

@media (max-width: 600px) {
  .leaf-img4 {
    width: 250px;      /* ← 好きなサイズに調整 */
    right: -100px;     /* ← 位置も少し内側に寄せると自然 */
    top: -100px;       /* ← 上に重ねる量も調整可能 */
  }
}



/* ----------------------------------
   コンタクト
   ---------------------------------- */

.smf-item:has([data-validations*="required"]) .smf-item__label {
	display: flex;
	align-items: center;;
	gap: 0.75rem;

	&::after {
		content: "必須";
		font-size: 0.8em;
		color: #fff;
		padding-top: 2px;
    padding-bottom: 3px;
    padding-inline: 8px;
		background: #e60033;
		border-radius: 4px;
	}
}

.contact-title,
.contact-block {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.contact-title.is-visible,
.contact-block.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.contact-title.is-visible {
  transition-delay: 0.3s;
}

.contact-block.is-visible {
  transition-delay: 0.6s;
}

@media (max-width: 768px) {
  /* 横並びレイアウトを完全に解除 */
  .smf-form .smf-item {
    display: block !important;
  }

  /* ラベルをスマホ幅に */
  .smf-form .smf-item__label {
    width: 100% !important;
    margin-bottom: 8px !important;
  }

  /* 入力欄をスマホ幅に */
  .smf-form .smf-item__col {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    padding-right: 0 !important;
  }
}

.contact {
  margin-right: 80px;
  margin-left: 80px;
}

@media (min-width: 601px) and (max-width: 900px) {
  .contact {
    margin-right: 40px;
    margin-left: 40px;
  }
}

@media (max-width: 600px) {
  .contact {
    margin-right: 0px;
    margin-left: 0px;
  }
}


.contact-block1 {
  position: relative;
}

.leaf-img5 {
  position: absolute;
  right: 0;
  top: 0;
  width: 220px;
}

.leaf-img6 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 220px;
}

.contact.has-global-padding {
  padding-left: 60px;
  padding-right: 60px;
}

@media (min-width: 601px) and (max-width: 900px) {
  .leaf-img5 {
    width: 190px;
  }

  .leaf-img6 {
    width: 190px;
  }
}

@media (max-width: 600px) {
 .contact.has-global-padding {
    padding-left: 16px;
    padding-right: 16px;
  }

  .leaf-img5 {
    width: 160px !important;
  }

  .leaf-img5 {
    width: 160px;
  }

  .leaf-img6 {
    width: 190px;
  }   /* ← 好きなサイズに調整 */    /* ← 上に重ねる量も調整可能 */
}



/* ----------------------------------
   価格ページ
   ---------------------------------- */

.price-image1 {
  width: 150px;
}

.price-image2 {
    width: 200px;
}

.price-image3 {
    width: 120px;
}

/* スマホ（〜768px）だけ適用 */
@media (max-width: 768px) {
  .price-image1{
    width: 120px !important;
  }

  .price-image2 {
    width: 130px !important;
  }

  .price-image3 {
    width: 1
  }

   .price-image3 {
    width: 100px;
  }
}