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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.pcnone {display:none;}
a.banner:hover { opacity: 0.7;}

/* ===== スコープ ===== */
.aoi-wrap{ --aoi:#86b93b; --aoi-dark:#6ea12b;
  --slate-50:#f8fafc; --slate-200:#e2e8f0; --slate-300:#cbd5e1; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155; --slate-800:#1f2937;
  --radius-xl:20px; --radius-2xl:24px; --shadow-soft:0 10px 30px rgba(0,0,0,.12);
  --md:768px; --lg:1024px;
  color:var(--slate-800);
}
.aoi-wrap *{ box-sizing:border-box }

/* コンテナ / セクション */
.aoi-container{ max-width:88rem; margin:0 auto; padding:0 clamp(16px,2vw,32px); }
.aoi-section{ padding:64px 0 }
@media (min-width:768px){ .aoi-section{ padding:96px 0 } }
.aoi-bg{ background:#fff } .aoi-bg-alt{ background:var(--slate-50) }

/* 見出し */
.aoi-wrap .aoi-title{ font-size:clamp(24px,2.6vw,32px); font-weight:700; margin:0 0 8px; border:none !important;}
.aoi-wrap .aoi-sub{ color:var(--slate-600); margin:0 0 40px; }
.aoi-wrap .aoi-title.kagi::before{ content:""; display:inline-block !important; width:.65rem !important; height:1.2rem !important; background:var(--aoi) !important; margin-right:.5rem !important; border-radius:2px !important; bottom:0.3em;}

.aoi-wrap h2.aoi-title {padding:0 0 0 1rem !important; margin:0 !important;}
.aoi-wrap h3.aoi-title {padding:0 !important; margin:0 0 8px !important; background-color:#fff !important;}
.aoi-wrap h3.aoi-title::before{border:none !important;}
/* グリッド */
.aoi-grid{ display:grid; gap:24px }
@media (min-width:768px){ .aoi-grid.md-2{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .aoi-grid.lg-3{ grid-template-columns:repeat(3,1fr) } }

/* カード/要素 */
.aoi-card, .aoi-wrap .wpcf7-form{ background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-2xl); padding:24px }
.aoi-elev, .aoi-wrap .wpcf7-form{ border:none; box-shadow:var(--shadow-soft) }
.aoi-list{ margin:0; padding-left:1.25rem; color:var(--slate-700); line-height:1.7 }
.aoi-badge{ display:grid; place-items:center; width:40px; height:40px; border-radius:999px; background:var(--aoi); color:#fff; font-weight:700 }

/* ボタン */
.aoi-wrap .wpcf7-submit{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:12px 20px; border-radius:16px; border:1px solid transparent; font-weight:700; cursor:pointer; transition:.2s }
.aoi-wrap .wpcf7-submit{ background:var(--aoi); color:#fff }
.aoi-wrap .wpcf7-submit:hover{ background:var(--aoi-dark) }

/* 画像帯（Aboutで使用・任意） */
.aoi-img-fit{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius-2xl) }

/* 定義リスト（会社概要） */
.aoi-dl{ display:grid; grid-template-columns:2fr 5fr; column-gap:16px; row-gap:10px; font-size:14.5px }
.aoi-dl dt{ color:var(--slate-600);  }
.aoi-dl dd{ margin:0; color:var(--slate-800); font-weight:600 }

/* お問い合わせフォーム */
.aoi-field{ width:100% }
.aoi-label{ display:block; font-size:14px; font-weight:600; margin:0 0 6px }
.aoi-wrap .wpcf7-text, .aoi-wrap .wpcf7-textarea{
  width:100%; border:1px solid var(--slate-300); border-radius:16px; padding:10px 14px; background:#fff;
  transition:border-color .15s, box-shadow .15s; font-size:16px;
}
.aoi-wrap .wpcf7-textarea{ min-height:140px; resize:vertical }
.aoi-wrap .wpcf7-text:focus, .aoi-wrap .wpcf7-textarea:focus{ outline:none; border-color:var(--aoi); box-shadow:0 0 0 3px rgba(134,185,59,.22) }
.aoi-note{ font-size:12px; color:var(--slate-500); margin-top:8px }

/* 音なしフェード（JSなし簡易） */
@keyframes aoiFadeUp{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.aoi-fade, .aoi-wrap .wpcf7-form{ animation:aoiFadeUp .6s ease both }

/* レスポンシブ2カラム（About/Contactで使用） */
.aoi-2col{ display:grid; gap:32px }
@media (min-width:1024px){ .aoi-2col{ grid-template-columns:1fr 1fr } }

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
.header-site-logo-image {height:60px !important;}
.pcnone {display:inline;}

}