@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.box1-green{
	margin: 2em auto; /* ボックスの余白 */
	background: #eef8f3; /* ボックス背景色 */
	border-radius:4px; /* ボックス角丸 */
	max-width:600px; /* ボックス横幅 */
	padding: 3.5em 2em 1.5em; /* ボックス内側余白 */
	position:relative; /* 配置に関するもの(ここを基準に) */
}
.box1-green .box-title {
	background: #58be89; /* タイトル背景色 */
	color: #fff; /* タイトル文字色 */
	font-weight: bold; /* タイトル文字の太さ */
	font-size: 20px;/* タイトル文字の大きさ */
	padding: 5px;/* タイトル周りの余白 */
	text-align: center;	/* タイトル中央寄せ */
	border-radius: 4px 4px 0px 0px;	/* タイトル角丸 */
	position:absolute;	/* 配置に関するもの(ここを動かす) */
	top:0;	/*上から(0px)に配置 */
	left:0; /*左から(0px)に配置 */
	width:100%;/*横幅最大幅 */
}
.box1-green p {
	margin: 0;/* 文字の余白リセット */
	padding: 0; /* 文字の内側余白リセット*/
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* SVG共通設定 */
.henna-card-icon,
.henna-icon {
  fill: currentColor;
  color: var(--henna-primary); /* または #d97706 などに固定 */
}

.henna-btn-line {
  background: #06c755; /* LINEグリーン */
  color: white;
}

.henna-btn-line:hover {
  background: #04ad4e;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(6, 199, 85, 0.3);
  text-decoration: none;
}

.henna-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  justify-content: flex-start;
}

.henna-card-icon-img {
  width: 48px;
  height: 48px;
  object-fit: contain; /* 画像比率を保ったまま整える */
  display: block;
  margin-top: 0;
  margin-bottom: 12px;
}

/* ギャラリースタイル */
.gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: 0; /* 角を直角に */
  cursor: pointer;
}

.gallery-card img {
  display: block;
  width: 100%;
  height: 200px; /* 高さを統一 */
  object-fit: contain; /* トリミングせず縮小 */
  margin: 0 auto;
  transition: transform 0.3s ease;
}

.gallery-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gallery-info h3 {
  margin: 0;
  font-size: 1.1em;
}

.gallery-info p {
  margin: 4px 0 0;
  font-size: 14px;
}

.gallery-card:hover img {
  transform: scale(1.03);
}

.gallery-card:hover .gallery-info {
  opacity: 1;
  visibility: visible;
}

/* Swiper 調整 */
.swiper {
  padding-bottom: 40px;
  margin: 24px 0;
}

.swiper-slide {
  width: 260px;
  flex-shrink: 0;
}

.swiper-pagination-bullet-active {
  background: var(--henna-accent);
}

/* ホバー時に他カードを薄く */
@media only screen and (min-width: 1025px) {
  .gallery-area:hover .gallery-card:not(:hover) {
    opacity: 0.3;
    transition: opacity 0.3s ease;
  }
}

/* ナビゲーション非表示 */
.swiper-button-prev,
.swiper-button-next {
  display: none !important;
}

/* 20250729
このファイルの内容をCocoonの追加CSSまたはstyle.cssに追加してください
*/

/* レスポンシブ対応の追加スタイル */
@media (max-width: 768px) {
  .pulb-title {
    font-size: 2rem !important;
  }

  .pulb-section-title {
    font-size: 1.5rem !important;
  }

  .pulb-grid {
    grid-template-columns: 1fr !important;
  }

  .pulb-problem-grid,
  .pulb-diagnosis-grid,
  .pulb-testimonial-grid,
  .pulb-process-grid,
  .pulb-pricing-grid {
    grid-template-columns: 1fr !important;
  }

  .pulb-btn-primary,
  .pulb-btn-secondary {
    width: 100%;
    justify-content: center;
    margin-bottom: 16px;
  }

  .pulb-hero {
    padding: 40px 0 !important;
  }

  .pulb-section {
    padding: 40px 0 !important;
  }
}

/* Cocoon固有のスタイル調整 */
.pulb-landing .entry-content {
  padding: 0 !important;
}

.pulb-landing .article {
  padding: 0 !important;
}

.pulb-landing .main {
  padding: 0 !important;
}

/* 画像の最適化 */
.pulb-landing img {
  max-width: 100%;
  height: auto;
}

/* フォントの調整（日本語フォント対応） */
.pulb-landing {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,
    sans-serif;
}

/* アニメーション効果 */
.pulb-problem-card,
.pulb-diagnosis-card,
.pulb-testimonial-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pulb-problem-card:hover,
.pulb-testimonial-card:hover {
  transform: translateY(-5px);
}

.pulb-diagnosis-card:hover {
  transform: translateY(-3px);
}

/* スクロール時のアニメーション */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pulb-section {
  animation: fadeInUp 0.6s ease-out;
}