@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*固定ページの日付非表示化*/
.post-2 .date-tags {
display: none;
}

/*******アピールエリアのオーバーレイ書き換え*****/
/* アピールエリアの基準 */
.appeal.adt-not-singular {
  position: relative;
  z-index: 0; /* 基準レイヤーを0にしておく */
}

/* オーバーレイ */
.appeal.adt-not-singular::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(to right, rgba(23,112,61,1), rgba(52,168,83,0.7), rgba(0,0,0,0));
  z-index: 1; /* 背景の上にくる */
  pointer-events: none;
}

/* テキストや検索窓を前面に */
.appeal.adt-not-singular > * {
  position: relative;
  z-index: 2; /* オーバーレイより前に */
}

/* Cocoonデフォルトのオーバーレイ打ち消し */
.appeal-content {
  background: none !important;
  margin: 0 !important;
}

/* メッセージテキストの調整 */
.appeal-title{
  font-size: 2rem;   /* お好みで調整 */
  color: #fff;       /* 白文字 */
  text-align: left !important;
}


/*******検索フォームの調整*****/
input.search-edit {
  border: solid 1px #efefef;
}

input.search-edit::placeholder {
  color: #A8A8A8;
}

.search-submit {
  top: 0;
  right: 0;
  width: 50px;
  height: 100%;
  color: #fff;
  background-color: #FF9900; /* ボタンの背景色 */
  border-radius: 0 3px 3px 0;
}


/*******ヘッダーエリアの色調整*****/
/* ヘッダー背景色 */
#header-container.header-container {
  background-color: #FFFFFF !important;
}

#header-container.header-container .header-container-in,
#header-container.header-container .header-container-in * {
  background-color: #FFFFFF !important; 
  color: #222222;
}

/*******記事のアイキャッチを中央寄せに*****/
.eye-catch-wrap {
  display:block !important; 
  text-align:center;
}

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

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

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

/************************************
** 固定ページの日付非表示
************************************/
.post-3 .date-tags,
.post-8 .date-tags
{
display: none;
}

/************************************
**固定ページのアイキャッチ画像非表示
************************************/
.page .eye-catch {
  display: none;
}

/************************************
** TOP
************************************/
/* ===== Hero Section（wrap内バージョン） ===== */
.hero {
  background: #FCFDFD; /* 必要に応じて#fafafaなどに変更可 */
  padding: 80px 0;
}

.hero-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
  padding: 0 60px; /* ← 左右に余白を追加 */
}

.hero-text {
  flex: 1 1 440px;
}

.catchcopy {
  font-size: 2rem;
  line-height: 1.5;
  font-weight: 700;
  color: #222;
}

.subtext {
  font-size: 1.1rem;
  color: #666;
  margin-top: 12px;
}

.highlight-green {
  color: #2b8d63;
  font-weight: 800;
}

.highlight-orange {
  color: #f7931a;
  font-weight: 800;
}

.hero-btn {
  display: inline-block;
  background: #2b8d63;
  color: #fff !important;
  padding: 12px 32px;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  margin-top: 25px;
  transition: 0.2s;
}

.hero-btn:hover {
  opacity: 0.85;
}

.hero-image {
  flex: 1 1 440px;
  text-align: center;
}

.hero-image img {
  max-width: 100%;
  height: auto;
}

/* ===== スマホ対応 ===== */
@media (max-width: 1024px) {
  .hero-content {
    padding: 0 40px;
  }
}

@media screen and (max-width: 768px) {
  .hero {
    padding: 60px 0 40px;
  }
  .hero-content {
    flex-direction: column;
    text-align: center;
    padding: 0 20px;
	}
  .hero-text {
    order: 2;
  }
  .hero-image {
    order: 1;
  }
}

/* ===== サービスセクション ===== */
.service-section {
max-width: 960px;
margin: 0 auto;
padding: 0 16px;
box-sizing: border-box;
}

.service-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 16px 0;
  color: #333;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.service-card {
  background: #fff;
  border: 2px solid #5FB368;
  border-radius: 12px;
  padding: 20px;
  text-align: center; /* アイコン＆見出し中央寄せ */
}

.service-card p {
  text-align: left; /* 本文のみ左寄せ */
  margin: 0;
  line-height: 1.7;
  color: #333;
}

/* アイコン */
.service-card .icon {
  width: 120px;
  height: 120px;
  object-fit: contain;
  display: block;
  margin: 0 auto 12px auto; /* 確実に中央寄せ */
}

/* 見出し */
.service-card .heading {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  background-color: #5FB368;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
  text-align: center;
}

/* ===== 下段ワイド（業務設計・フロー改善） ===== */
.service-card.service-wide {
  grid-column: 1 / -1;
  text-align: left; /* 全体は左寄せに戻す */
}

/* 下段だけアイコンと見出し横並び */
.service-card.service-wide .icon {
  display: inline-block;
  width: 48px;
  height: 48px;
  margin: 0 8px 0 0;
  vertical-align: middle;
}
.service-card.service-wide .heading {
  display: block;             /* ← inline-block → block に変更 */
  text-align: center;         /* ← これで中央寄せが有効化される */
  margin: 8px auto 0 auto;    /* ← 自動中央揃え */
  width: fit-content;         /* ← 幅を内容に合わせる（中央寄せしやすく） */
}

/* 下段本文 */
.service-card.service-wide p {
  margin-top: 8px;
  text-align: left;
}

/* 下段（業務設計・フロー改善）アイコン＋見出しセット中央寄せ */
.service-card.service-wide .heading-wrap {
  text-align: center;           /* 全体中央 */
  margin-bottom: 12px;
}

.service-card.service-wide .icon,
.service-card.service-wide .heading {
  display: inline-block;
  vertical-align: middle;
}

/* アイコンサイズ調整（任意） */
.service-card.service-wide .icon {
  width: 120px;   /* 大きくしたければここを調整 */
  height: 120px;
  margin: 0 0 0 8px;
}


/* ===== スマホ対応 ===== */
@media (max-width: 900px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
}


/* =====プロフセクション ===== */
.profile-section {
  background: #f9fdf9;
  border-radius: 12px;
  padding: 32px 24px;
  margin: 48px 0;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.profile-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 20px;
  text-align: left;
}

.profile-content {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.profile-content img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.profile-text {
  flex: 1;
  color: #333;
  line-height: 1.8;
  font-size: 1rem;
}

/* スマホ表示 */
@media (max-width: 768px) {
  .profile-content {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .profile-text {
    text-align: left;
  }
}



/* ===== 事例紹介セクション ===== */
.case-section {
  margin: 64px auto;
  max-width: 960px;
  padding: 0 16px;
}

.case-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 24px;
}

.case-card {
  background: #fff;
  border: 2px solid #5FB368;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 420px; /* 一番高いカードに合わせて調整 */
}

.case-label {
  display: inline-block;
  background: #5FB368;
  color: #fff;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.case-summary {
  font-weight: 500;
  margin-bottom: 16px;
}

.case-before, .case-after {
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.case-before {
  border: 2px solid #58a4e6;
  background: #f7fbff;
}
.case-after {
  border: 2px solid #e6a458;
  background: #fffaf7;
}

.case-tag {
  font-weight: 700;
  margin-bottom: 4px;
}

.case-tag.before { color: #007acc; }
.case-tag.after { color: #d97a00; }

/* Swiper本体 */
.case-swiper {
  overflow: visible; /* ← 必須。枠外を見せる */
}

.swiper-slide {
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0.6;
  transform: scale(0.95);
  display: flex;
  height: auto !important; /* ← Swiperが書き換える高さ指定を無効化 */
}

.swiper-slide-active {
  opacity: 1;
  transform: scale(1);
}


/* 矢印ボタン */
.swiper-button-prev,
.swiper-button-next {
  color: #5FB368; /* 緑で見やすく */
}

/* ページネーション */
.swiper-pagination-bullet-active {
  background: #5FB368;
}


/* ===== お問い合わせセクション ===== */
.contact-section {
  margin: 64px auto;
  text-align: center;
  max-width: 960px;

}

.contact-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 24px;
  text-align: left;
}

.contact-lead {
  font-size: 1rem;
  color: #333;
  margin-bottom: 24px;
  line-height: 1.7;
  text-align: left ;
}

.contact-wrapper {
  max-width: 960px;   /* ← 横幅を制限 */
  margin: 0 auto;     /* ← 中央寄せ */
  text-align: left;   /* ← 中のラベルは左寄せ */
}

.contact-wrapper form {
  width: 100%;
}

.wpcf7 input,
.wpcf7 textarea {
  width: 100%;
  box-sizing: border-box;
}

/*ブログセクション*/
/* ===== ブログセクション ===== */
.blog-section {
  max-width: 1080px;
  margin: 64px auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.blog-section .section-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 32px;
  text-align: left;
}

/* カード全体 */
.blog-section .new-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}

/* 1カード */
.blog-section .new-list article {
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-section .new-list article:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* アイキャッチ */
.blog-section .new-list img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-bottom: 1px solid #eee;
}

/* タイトル */
.blog-section .new-list .entry-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #222;
  padding: 12px 16px 0 16px;
  line-height: 1.5;
}

/* 抜粋 */
.blog-section .new-list .entry-snippet {
  font-size: 0.95rem;
  color: #555;
  padding: 0 16px 16px 16px;
  line-height: 1.6;
}