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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* ===============================
   トップページ専用デザイン（Cocoon Child）
================================*/

/* タイトル左寄せ＆サイズ調整 */
.site-name-text {
  font-size: 1.8rem !important;
  color: #2a558c !important;
  text-align: left !important;
  margin-left: 30px !important;
  letter-spacing: 1px;
  font-weight: 600;
}

/* サイトキャッチコピーを非表示（不要なら） */
.site-description {
  display: none;
}

/* トップページのサイドバーを非表示 */
.home .sidebar {
  display: none !important;
}

/* メインコンテンツを全幅化 */
.home .main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ヒーローエリアを目立たせる */
.ioi-hero {
  position: relative;
  width: 100%;
  max-width: none;
  background: url('https://ioi-laborconsulting.com/wp-content/uploads/2025/10/スクリーンショット-2025-10-28-175657.png') no-repeat center center/cover;
  padding: 120px 40px;
  color: #fff;
  text-align: center;
  border-radius: 0;
  animation: heroFade 3s ease-in-out;
}

/* ヒーローテキスト */
.ioi-hero h1 {
  font-size: 2.6rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  margin-bottom: 20px;
}

.ioi-hero p {
  font-size: 1.2rem;
  color: #f2f8ff;
  line-height: 1.8;
  text-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* ゆっくりフェードイン */
@keyframes heroFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ===== トップページの余白とタイトル調整 ===== */

/* 「ホーム」のページタイトルボックスを非表示 */
.home .entry-title {
  display: none !important;
}

/* 記事カード風の白いボックス感を薄める（トップだけ） */
.home .article {
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* コンテンツの左右余白を縮める（PC） */
@media (min-width: 1024px){
  .home .entry-content {
    padding: 0 !important;
  }
}

/* ヒーローの上下バランス（高さ・余白）を微調整 */
.ioi-hero {
  padding: 140px 40px 120px !important;  /* 上 右左 下 */
  min-height: 420px;                      /* 必要に応じて 380〜520px で調整 */
}

/* サブ：タイトルを本当に左寄せにしたい場合の保険（Cocoonのヘッダー構造用） */
.header-container,
.header-container-in,
#header-container {
  justify-content: flex-start !important;
  text-align: left !important;
}
.site-name {
  text-align: left !important;
}
/* ===== ヒーローの可読性アップ（オーバーレイ＋文字強化） ===== */
.ioi-hero{
  position: relative;
  overflow: hidden;
  background-position: 70% center !important; /* 右のビルを活かす */
  min-height: 520px;
}
/* ===== ヒーローテキスト（高コントラスト＆クリア） ===== */
.ioi-hero h1 {
  color: #ffffff !important;
  font-size: 2.9rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow:
    0 0 18px rgba(255,255,255,0.75),  /* 白光を強く */
    0 3px 8px rgba(0,0,0,0.55),        /* 下に落ちる黒影 */
    0 0 3px rgba(0,0,0,0.6);           /* 文字エッジの補強 */
}

.ioi-hero p {
  color: #ffffff !important;
  font-size: 1.35rem;
  line-height: 1.9;
  text-shadow:
    0 0 15px rgba(255,255,255,0.65),   /* 白の輝き */
    0 2px 5px rgba(0,0,0,0.6),         /* 黒影を少し濃く */
    0 0 3px rgba(0,0,0,0.45);
}

/* スマホでも見やすく */
@media (max-width: 768px){
  .ioi-hero h1 {
    font-size: 2.2rem;
    text-shadow:
      0 0 14px rgba(255,255,255,0.7),
      0 2px 5px rgba(0,0,0,0.55);
  }
  .ioi-hero p {
    font-size: 1.1rem;
    text-shadow:
      0 0 12px rgba(255,255,255,0.6),
      0 2px 4px rgba(0,0,0,0.55);
  }
}
/* ===== ヘッダー最上部のキャッチフレーズに色帯を付ける（Cocoon想定） ===== */
#header-container .tagline,
#header-container .site-description,
#header-container .site-tagline,
#header .tagline,
#header .site-description,
.header .tagline,
.header .site-description {
  background: #163e72;        /* お好みで #1e5fa8 等に変更可 */
  color: #ffffff !important;
  display: block;
  width: 100%;
  text-align: center;
  padding: 6px 0;
  line-height: 1.6;
  margin: 0;
  position: relative;
  z-index: 1;
}
/* 中のテキストやリンクの色も白に揃える */
#header-container .tagline a,
#header-container .site-description a,
#header .tagline a,
#header .site-description a {
  color: #ffffff !important;
  text-decoration: none;
}
/* 帯を画面幅いっぱいに延ばす */
#header-container .tagline,
#header-container .site-description,
#header-container .site-tagline,
#header .tagline,
#header .site-description {
  /* まずは帯を相対配置に */
  position: relative;
  /* 以下で擬似要素を使い、背景だけを左右に広げる */
}
#header-container .tagline::before,
#header-container .site-description::before,
#header-container .site-tagline::before,
#header .tagline::before,
#header .site-description::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0; bottom: 0;
  width: 100vw;                /* 画面幅いっぱい */
  background: #163e72;         /* 帯の色 */
  z-index: -1;                 /* テキストの背面に */
}
/* ====== サービスカード：横並びグリッド ====== */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 36px;
  margin: 56px 0;
}

.service-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}

/* 画像：線画っぽいトーン＋青系ドゥオトーン */
.service-card .thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.service-card .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%) contrast(140%) brightness(105%);
  transform: scale(1.02);
}
/* 青みのハイライトを重ねて“線画×ビジネス”の統一感を出す */
.service-card .thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(30,136,229,.18), rgba(22,62,114,.10));
  mix-blend-mode: screen;           /* 写真に青系の光をのせる */
  pointer-events: none;
}

/* テキスト */
.service-card .body { padding: 18px 18px 10px; }
.service-card h3 {
  font-size: 1.15rem; color: #163e72; margin: 6px 0 8px;
}
.service-card p {
  color: #334; line-height: 1.7; font-size: .95rem;
  min-height: 4.6em;                /* 2〜3行で高さを揃える */
}

/* ボタン */
.service-card .btn {
  display: inline-block; margin: 14px 0 18px;
  padding: 8px 18px; border-radius: 999px;
  border: 1px solid #163e72; color: #163e72;
  text-decoration: none; font-size: .9rem;
  transition: .2s ease;
}
.service-card .btn:hover { background:#163e72; color:#fff; }
/* ====== 私たちの思いセクション ====== */
.our-message {
  background: #f7f8fa;
  padding: 80px 8%;
  text-align: center;
  border-radius: 12px;
  margin: 80px auto;
  max-width: 1000px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.our-message h2 {
  font-size: 1.8rem;
  color: #163e72;
  margin-bottom: 1.5em;
  position: relative;
  display: inline-block;
}

/* タイトル下に細いライン */
.our-message h2::after {
  content: "";
  display: block;
  width: 60%;
  height: 2px;
  background-color: #163e72;
  margin: 0.5em auto 0;
  opacity: 0.4;
}

.our-message p {
  font-size: 1.05rem;
  color: #333;
  line-height: 1.9;
  letter-spacing: 0.03em;
  max-width: 800px;
  margin: 0 auto;
}
/* 目次ボックスを非表示にする */
.toc, .toc-content {
  display: none !important;
}
/* ===== 画像が切れないように調整（contain＋余白） ===== */
.service-card .thumb{
  /* 画像の表示領域を固定高さに（PC） */
  height: 220px;               /* お好みで 200–260px くらい */
  padding: 16px 18px;          /* 枠と画像の間に余白 */
  background: #fff;            /* 透過PNGでも白で綺麗に */
  overflow: hidden;
  position: relative;
}

/* モバイル時は少し低めでOK */
@media (max-width: 600px){
  .service-card .thumb{ height: 180px; padding: 12px 14px; }
}

/* 画像は切らずに全体表示・中央寄せ */
.service-card .thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;          /* ← cover から contain に変更 */
  object-position: center;
  transform: none;              /* 以前の scale をオフ */
  filter: grayscale(100%) contrast(130%) brightness(108%);
  transition: filter .3s ease;
}

/* ホバー時のエフェクトは薄めに（任意） */
.service-card:hover .thumb img{
  filter: grayscale(60%) contrast(120%) brightness(110%);
}

/* 画像上の薄い被せをオフ（線画が見づらい場合） */
.service-card .thumb::after{ display: none; }
/* ===== PCでサイト幅を広げる（Cocoon の wrap を上書き）===== */
@media (min-width: 1100px){
  /* ベースのコンテナを広げる */
  .wrap,
  #content .content-in.wrap {
    max-width: 1280px !important;   /* 好みで 1200 / 1280 / 1360 などに調整 */
  }

  /* ヒーローやカードなど、内側でも wrap を使っている要素の保険 */
  .ioi-hero .wrap,
  .our-message .wrap,
  .service-grid,
  .entry-content .wrap {
    max-width: 1280px !important;
  }
}
/* --- 応急処置：ホーム配下の「切れ」を強制的に止める --- */

/* 1) クリッピング無効化＆高さ固定の解除（共通ラッパをまとめて安全側に） */
.home, .home body,
.home #wrapper, .home #container, .home main,
.home .container, .home .wrap, .home #content,
.home .site, .home .l-contents, .home .l-main,
.home .section, .home .entry, .home .contents,
.home #appeal {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* 2) ヒーローは前面=1、背景レイヤーは0。後続は必ず上（=2）に出す */
.home #appeal { position: relative !important; z-index: 1 !important; }
.home #appeal::before,
.home #appeal::after { z-index: 0 !important; }

/* 3) ヒーロー直後以降を必ず前面＆通常フローへ（背面化/重なり対策） */
.home #appeal + section,
.home #appeal + div,
.home #appeal + * {
  position: relative !important;
  z-index: 2 !important;
  clear: both !important;
  transform: none !important;         /* 背面送りの原因になりがちなので無効化 */
}

/* 4) 予期せぬクリップ系の無効化（テーマで使われがち） */
.home * {
  clip-path: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

/* 5) iOS Safariの文字拡大＆レイアウトズレ緩和 */
html { -webkit-text-size-adjust: 100%; }