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

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

/* --- フロントページ用カスタムCSS (ブロックエディター向け) --- */

/* フロントページでヘッダーを非表示にする */
body.home #header-container { 
    display: none;
}

/* --- (1) 固定ナビゲーション関連 --- */
/* この部分は template-frontpage-blocks.php などにナビゲーションを
   記述している場合に有効です */
.front-page-nav {
  position: fixed; /* 画面上部に固定 */
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f8f8f8; /* 背景色 */
  border-bottom: 1px solid #ddd; /* 区切り線 */
  padding: 10px 0;
  text-align: center;
  z-index: 1000; /* 他の要素より手前に表示 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 影（任意）*/
}

.front-page-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* 横並びにする */
  justify-content: center; /* 中央揃え */
  flex-wrap: wrap; /* 幅が足りなければ折り返す */
}

.front-page-nav li {
  margin: 0 15px; /* メニュー間の余白 */
}

.front-page-nav a {
  text-decoration: none;
  color: #333; /* 文字色 */
  font-weight: bold;
}

.front-page-nav a:hover {
  color: #0073aa; /* ホバー時の文字色 */
}

/* 固定ヘッダー分の余白をbodyに確保 */
/* メニューの高さを確認して調整してください */
body {
  padding-top: 40px; /* 固定メニューの高さ分（仮）*/
}
/* WordPress管理バーが表示されている場合の調整 */
body.admin-bar .front-page-nav {
  top: 32px; /* 管理バーの高さ分下げる */
}
/* スマホ表示など画面幅が狭い場合の管理バー調整 */
@media screen and (max-width: 782px) {
  body.admin-bar .front-page-nav {
    top: 46px; /* スマホ表示時の管理バー高さ */
  }
  body {
     /* スマホ時のメニュー高さに応じて padding-top を再調整が必要な場合あり */
     padding-top: 80px; /* スマホ時のメニュー高さを考慮した例（要調整） */
  }
}

/* --- (2) セクション共通スタイル (ブロックエディタ対応) --- */

/* 各セクション用グループブロックに共通で追加するクラス（例: section-block） */
/* ★ブロックエディタで各セクションの「グループ」ブロックを選択し、
     「高度な設定」→「追加CSSクラス」に "section-block" と入力してください */
.section-block {
  padding: 20px 30px;  /* セクションの上下左右の余白 */
  border-bottom: 1px solid #eee; /* セクション間の区切り線が必要な場合 */
}
.section-block:last-of-type { /* 最後のセクションの下線は消す場合 */
    border-bottom: none;
}


/* セクション内のコンテンツ幅を制限する場合 */
/* Cocoon のデフォルト幅設定に合わせるか、必要なら幅制限用のクラスを追加 */
/* 例：グループブロック直下のインナーコンテナを対象にする (Cocoonなどのテーマ構造依存) */
/* この指定が効かない場合は、テーマの構造を確認するか、
       下の .content-limiter のようなカスタムクラスを使う方法を検討してください。*/
.section-block > .wp-block-group__inner-container {
   max-width: 1100px; /* コンテンツの最大幅（例） */
   margin-left: auto;
   margin-right: auto;
}
/* 代替案：グループブロック自体に幅制限用クラスを付ける場合 */
/* ★グループブロックの「追加CSSクラス」に "content-limiter" も追加 */
/*
.content-limiter {
   max-width: 960px;
   margin-left: auto;
   margin-right: auto;
}
*/


/* セクション内の見出し（例：H2ブロック）への共通スタイル */
/* 例：H2ブロックに "section-title" というクラスを追加した場合 */
/* ★セクション見出しの H2 ブロックを選択し、
     「高度な設定」→「追加CSSクラス」に "section-title" と入力 */
.wp-block-heading.section-title {
  text-align: center;
  margin-bottom: 30px; /* 見出しと内容の間の余白 */
  font-size: 2em; /* 見出しサイズ調整 */
}
/* もしクラスを追加しない場合、セクションブロック内の最初のH2などを狙う方法もある */
/*
.section-block h2:first-of-type {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2em;
}
*/


/* --- (3) 特定セクションのスタイル（カスタムクラスで指定） --- */

/* 例：イメージビジュアルセクション */
/* ★イメージビジュアル部分の「グループ」ブロックに "section-vision" クラスを追加 */
.section-vision {
  /* background-color: #eef; */ /* 背景色など */
  text-align: center; /* このセクションだけ中央揃えにする場合 */
  padding-top: 0; /* 上部の余白をなくす場合など */
  padding-bottom: 0; /* 下部の余白をなくす場合など */
  border-bottom: none; /* 区切り線が不要な場合 */
}
/* 例：画像ブロックへのスタイル（もし必要なら）*/
/* .section-vision .wp-block-image img { ... } */


/* 例：お問い合わせセクション */
/* ★お問い合わせ部分の「グループ」ブロックに "section-contact" クラスを追加 */
.section-contact {
  background-color: #f9f9f9; /* 背景色を変えるなど */
}

.wpcf7-form {
  max-width: 800px;  /* ← ここで最大幅を指定（例: 600px。好きな値に変更してください） */
  width: 100%;       /* 親要素の幅までは広がるように */
  margin-left: auto;   /* フォームを中央揃えにする */
  margin-right: auto;  /* フォームを中央揃えにする */
}


/* --- 事業者概要セクション (テーブルブロック用) --- */
/* ★事業者概要の「グループ」ブロックに "section-company" クラスを追加 */


/* テーブルブロック全体への基本的なスタイル調整 (任意) */
.section-company .wp-block-table {
  margin-top: 20px; /* テーブルの上部に少し余白 */
  margin-bottom: 0; /* テーブル自体の下余白は不要なら0に */
}

/* テーブル要素へのスタイル */
.section-company .wp-block-table table {
  width: 800px; 
  border: none; /* WordPressコアやテーマのデフォルト枠線をリセット */
  border-collapse: collapse; /* セルのボーダーを結合 */
  border-top: 1px solid #eee; /* テーブル上部に区切り線（dlの時の代わり） */
}

/* テーブルのセル (th, td) への共通スタイル */
.section-company .wp-block-table th,
.section-company .wp-block-table td {
  /* border: none; /* デフォルトのセル枠線をリセット */
  /*border-bottom: 1px solid #eee; /* 各行の下に区切り線 */
  padding: 15px 10px; /* セルの内側余白 (上下を少し広めに) */
  text-align: left; /* 文字を左揃えに */
  vertical-align: top; /* 内容が複数行の場合に上揃えに */
  background-color: transparent; /* 背景色を透明に（テーマによっては色が付くため） */
}

/* 1列目のセル（項目名） - th タグか td タグか不明なため両方指定 */
.section-company .wp-block-table tr th:first-child,
.section-company .wp-block-table tr td:first-child {
  font-weight: bold; /* 太字にする */
  width: 150px; /* 項目名列の幅を固定（以前のdt+ddマージンに近い幅に設定、要調整）*/
  /* vertical-align: middle; */ /* 上下中央揃えにしたい場合 */
}

/* 2列目のセル（内容） - 通常は特に指定不要 */
.section-company .wp-block-table tr td:nth-child(2) {
  /* 必要であればスタイルを追加 */
	  width: 450px; /* 項目名列の幅を固定（以前のdt+ddマージンに近い幅に設定、要調整）*/
}


/* --- スマホ表示など狭い画面での調整 (600px以下) --- */
@media screen and (max-width: 600px) {

	
	
  /* テーブル関連要素をブロック要素に変更して縦積みに */
  .section-company .wp-block-table table,
  .section-company .wp-block-table tbody,
  .section-company .wp-block-table tr,
  .section-company .wp-block-table th,
  .section-company .wp-block-table td {
    display: block;
    width: 100% !important; /* 幅を100%に */
    box-sizing: border-box; /* paddingを含めて幅100% */
  }

  /* 画面幅が狭いときは thead は非表示にする（もし使っていれば） */
  .section-company .wp-block-table thead {
    display: none;
  }

  /* 行 (tr) のスタイル調整 */
  .section-company .wp-block-table tr {
     border-top: 1px solid #eee; /* 各項目の開始を示す線 */
     /* border-bottom: none; */ /* 行自体の下線は不要 */
  }
   .section-company .wp-block-table tr:first-child {
     border-top: none; /* 最初の行はテーブル全体のborder-topに任せる */
   }

  /* セル (th, td) のスタイル調整 */
  .section-company .wp-block-table th,
  .section-company .wp-block-table td {
    border: none; /* セル自体のボーダーは解除 */
    padding: 0; /* パディングを一旦リセット */
    text-align: left; /* 左揃え */
  }

  /* 1列目のセル (項目名) */
  .section-company .wp-block-table tr th:first-child,
  .section-company .wp-block-table tr td:first-child {
    font-weight: bold;
    width: auto !important; /* 幅固定を解除 */
    padding: 15px 0 5px 0; /* 上余白確保、下余白は少なめに */
  }

  /* 2列目のセル (内容) */
  .section-company .wp-block-table tr td:nth-child(2) {
     width: auto !important; /* 幅固定を解除 */
     padding: 0 0 15px 0; /* 上余白なし、下余白を確保 */
     border-bottom: 1px solid #eee; /* 内容の下に区切り線（dlのddの下線に相当）*/
     /* word-break: break-all; */ /* 必要なら長いURLなどを折り返す設定 */
  }

  /* 最後の行の内容セルの下線を消す */
  .section-company .wp-block-table tr:last-child td:nth-child(2) {
     border-bottom: none; 
  }

}



/* フェードイン対象の初期状態 */
.fade-in-target {
  opacity: 0; /* 透明にする */
  transform: translateY(20px); /* 少し下にずらしておく（任意） */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* アニメーション効果 */
}

/* 表示領域に入ったときに付与するクラス */
.fade-in-target.is-visible {
  opacity: 1; /* 不透明度を1（完全表示）にする */
  transform: translateY(0); /* ずらしたのを元に戻す */
}


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

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

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