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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* ========== Astraっぽい共通プリセット ========== */
:root{
  --container: 1200px;
  --pad-x: clamp(16px, 4vw, 28px);
  --gap: clamp(16px, 2.8vw, 28px);
  --card-br: 14px;
  --card-bd: #e7edf3;
  --muted: #f6f8fb;
  --accent: #e25400; /* 以前のサイトのオレンジ見出しを継承 */
}

/* コンテナ幅と段落・見出しのニュートラルな感じ（Astra寄せ） */
.phq-container{ max-width: var(--container); margin-inline:auto; padding-inline: var(--pad-x); }
.entry-content h1{ font-size: clamp(36px, 5.2vw, 56px); line-height:1.1; margin:.1em 0 .4em; }
.entry-content h2{ font-size: clamp(26px, 3.2vw, 34px); line-height:1.25; margin: .6em 0 .4em; }
.entry-content h3{ font-size: clamp(18px, 2.2vw, 22px); line-height:1.3; margin:.6em 0 .35em; color: var(--accent); }
.entry-content p{ margin: 0 0 1em; line-height: 1.9; color:#111; }

/* セクション間余白（Astraは素直に縦リズム） */
.section{ margin: clamp(28px, 6vw, 72px) 0; }
.section-muted{ background: var(--muted); padding: clamp(22px,4vw,48px) 0; }

/* ボタン（Astraのシンプル＋角小さめ） */
.phq-cta{
  display:inline-block; background:#0ea5ff; color:#003047;
  padding:12px 20px; border-radius:999px; font-weight:700;
  box-shadow:0 4px 10px rgba(0,0,0,.08); transition:.15s;
  text-decoration:none;
}
.phq-cta:hover{ transform:translateY(-1px); opacity:.95; }

/* ========== ヒーロー（2カラム→1カラム） ========== */
.phq-hero{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--gap);
  /* 彩度・明度を上げて薄める： */
  background:
    linear-gradient(135deg, #7b4dff, #4a8aff);
  color:#fff;
  border-radius: var(--card-br); padding: clamp(28px,5vw,64px);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}
.phq-hero img{ width:100%; height:auto; border-radius:12px; display:block; }



/* ========== サービス：カード 3→2→1 ========== */
.phq-services{ display:grid; gap: var(--gap); grid-template-columns: repeat(3, minmax(0,1fr)); }
.phq-card{
  background:#fff; border:1px solid var(--card-bd); border-radius: var(--card-br);
  padding: clamp(16px,2.2vw,24px);
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease;
}
.phq-card:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.08); }
.phq-thumb{
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
  border-radius:10px; margin: 0 0 10px;
}

/* ========== About：左右2カラム ========== */
.phq-about{ display:grid; gap: var(--gap); grid-template-columns: 1fr 1fr; align-items:center; }
.phq-about img{ width:100%; border-radius:12px; display:block }

/* ========== Values（SDGs等）：3→2→1（Astra風カード） ========== */
.phq-values .phq-grid{ display:grid; gap: var(--gap); grid-template-columns: repeat(3, minmax(0,1fr)); }
.phq-values .phq-tile{
  background:#fff; border:1px solid var(--card-bd); border-radius: var(--card-br);
  padding: clamp(16px,2.2vw,24px); box-shadow: 0 6px 16px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease;
}
.phq-values .phq-tile:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.08); }

/* ========== FAQ（details/summaryをAstraのUIに） ========== */
.phq-faq details{
  background:#fff; border:1px solid #e6ebf1; border-radius:12px;
  padding:14px 18px;
}
.phq-faq details+details{ margin-top:12px; }
.phq-faq summary{ cursor:pointer; font-weight:700; }

/* ========== レスポンシブ ========== */
@media (max-width: 1024px){
  .phq-hero{ grid-template-columns: 1fr; }
  .phq-services{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .phq-values .phq-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px){
  .phq-services, .phq-values .phq-grid{ grid-template-columns: 1fr; }
}


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

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

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