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

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


/* =========================================================
TOPのメインビジュアルのレスポンシブ変更（PC⇔SPの画像変更）
========================================================= */
/* PC用（デフォルト） */
.appeal {
  background-image: url("http://www.ebikanix.jp/index/wp-content/uploads/2025/09/Top-1-1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  aspect-ratio: 16/9; /* 横長比率で自然に */
}

/* スマホ用（768px以下で切替） */
@media screen and (max-width: 768px) {
  .appeal {
    background-image: url("http://www.ebikanix.jp/index/wp-content/uploads/2025/09/Mask-group-1.jpg");
    aspect-ratio: 3/4; /* 縦長にして見切れ防止 */
  }
}

/* アピールエリアのテキストボックス背景を透明に */
.appeal-content,
.appeal-in {
  background: none !important;
  box-shadow: none !important;
}

/* アピールエリアのタイトルを縦書きに */
.appeal-title {
  writing-mode: vertical-rl;  /* 縦書きにする */
  text-orientation: upright;  /* 文字を立てて表示 */
  font-size: 2.2rem;          /* 大きさは調整 */
  line-height: 1.8;
  color: #fff;                /* 白文字 */
  text-shadow: 0 0 8px rgba(0,0,0,0.5); /* 読みやすく影を追加 */
}

/* サブタイトルも縦書きにしたい場合 */
.appeal-message {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 1.4rem;
  line-height: 1.8;
  color: #fff;
}

.appeal-content {
  display: flex;
  justify-content: flex-end; /* 横位置：右寄せ */
  align-items: center;       /* 縦位置：中央寄せ */
  height: 100%;              /* アピールエリア全体を基準に */
}



/* =========================================================
ギャラリー：手動横スクロール（スナップ付き）
※ 以前の自動ループを上書きして無効化
 単一ギャラリー横スクロール（枠が見切れない版）
========================================================= */

.stk-slide-gallery {
  padding: 0 16px;   /* 左右に余白を確保して枠切れ防止 */
  overflow: hidden;  /* 外側はマスクするだけ */
}

.stk-slide-gallery .wp-block-gallery {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;                      /* カード間の余白 */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;           /* スクロールバーとの間に余白 */
  animation: none !important;
}

/* カード共通設定 */
.stk-slide-gallery .wp-block-gallery > * {
  flex: 0 0 439px;                /* PCの横幅 */
  width: 439px;
  min-height: 318px;
  scroll-snap-align: start;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  background: #fff;
  margin: 0;                      /* WP既定の余白を打ち消し */
  overflow: visible;              /* 枠切れ防止 */
  box-sizing: border-box;
  padding: 24px;
}

/* 内側画像の場合 */
.stk-slide-gallery .wp-block-gallery > .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* ===== レスポンシブ（幅だけ縮小、枠は常に見切れない） ===== */
@media (max-width: 1024px) {
  .stk-slide-gallery .wp-block-gallery > * { flex-basis: 360px; width: 360px; }
}
@media (max-width: 768px) {
  .stk-slide-gallery .wp-block-gallery > * { flex-basis: 320px; width: 320px; }
}
@media (max-width: 576px) {
  .stk-slide-gallery .wp-block-gallery > * { flex-basis: 300px; width: 300px; }
}
@media (max-width: 420px) {
  .stk-slide-gallery .wp-block-gallery > * {
    flex-basis: calc(100vw - 48px);  /* 画面幅から左右余白を引いたサイズ */
    width: calc(100vw - 48px);
  }
}

/* =========================================================
   文字：見出し（h2）の色変更＋下線を追加
   ========================================================= */

/* 画像①の見た目：中央のピンク見出し＋下に細線 */
.entry-content h2.h2 {
  /* テーマの既存装飾を打ち消し */
  border: none !important;
  background: none !important;
  box-shadow: none !important;

  /* ここからデザイン */
  color: #E77E84;           /* 見出し文字色 */
  text-align: center;       /* 中央寄せ */
  font-weight: 600;
  line-height: 1.2;
  display: block;
  width: 45%;
  margin: 1.6em auto 0.6em; /* 上下の余白 */
  position: relative;
}

/* 下に細い横線（文字とは独立して全幅寄りに引く） */
.entry-content h2.h2::after {
  content: "";
  display: block;
  height: 2px;                      /* 線の太さ */
  width: calc(100% - 24px);         /* 左右に少し余白を残す。要調整 */
  margin: .55em auto 0;             /* 文字との間隔 */
  background: currentColor;         /* 見出しと同じ色 */
  opacity: .45;                     /* 少し薄く（画像の雰囲気に） */
  border-radius: 2px;
}

/* ─── レスポンシブ（文字サイズだけ軽く調整） ─── */
@media (max-width: 767px){
  .entry-content h2.h2 { font-size: 1.25rem; }
  .entry-content h2.h2::after { width: calc(100% - 16px); }
}
@media (min-width: 768px) and (max-width: 1023px){
  .entry-content h2.h2 { font-size: 1.5rem; }
}
@media (min-width: 1024px){
  .entry-content h2.h2 { font-size: 1.75rem; }
  .entry-content h2.h2::after { width: calc(100% - 40px); }
}



/* =========================================================
   お問い合わせ：デザイン変更
========================================================= */

/* ===== 入力欄（初期状態） ===== */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #E77E84 !important; /* 枠線色を固定 */
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  margin-bottom: 20px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

/* ===== フォーカス時も同じ色を維持 ===== */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
  border: 2px solid #E77E84 !important; /* フォーカス時も固定 */
  outline: none;                         /* 青枠を消す */
  box-shadow: 0 0 6px rgba(231, 126, 132, 0.4); /* 任意の演出 */
}

/* ===== 送信ボタン ===== */
.wpcf7 input[type="submit"] {
  background: #E77E84;
  border: none;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  width: 45%;
  padding: 12px 30px;
  border-radius: 30px;
  cursor: pointer;
  display: block;
  margin: 20px auto;
  box-shadow: 0 4px 0 #c95f65;
  transition: all 0.2s ease;
}
.wpcf7 input[type="submit"]:hover {
  background: #c95f65;
  box-shadow: 0 2px 0 #a94449;
  transform: translateY(2px);
}

/* ===== エラーメッセージ（必要なら） ===== */
.wpcf7 .wpcf7-not-valid-tip { color: #d93025 !important; }
.wpcf7 .wpcf7-not-valid { border-color: #d93025 !important; }

/* ===== ここからが超重要：必須マークを確実に固定（最後に置く） ===== */
/* テーマ側の .required { color:red; } 等を上書きするためにスコープ＋!important で固定 */
.entry-content .wpcf7 .wpcf7-form label .required,
.wpcf7 .wpcf7-form label .required,
.wpcf7 form.wpcf7-form label .required {
  color: #E77E84 !important;
  font-weight: 700;
  font-size: 13px;
  margin-left: 4px;
}

/* リンク色やホバー状態の影響も遮断 */
.entry-content .wpcf7 .wpcf7-form label .required:hover,
.entry-content .wpcf7 .wpcf7-form label .required:focus,
.wpcf7 .wpcf7-form label .required:hover,
.wpcf7 .wpcf7-form label .required:focus {
  color: #E77E84 !important;
}


/* =========================================================
   トップページ：デザイン変更
========================================================= */

/* ── トップページだけ、ヘッダーを最上段に重ねる ── */
.home .header-container,
.front-page .header-container {
  position: absolute;   /* 流れから外して上に重ねる */
  top: 0; left: 0; right: 0;
  z-index: 1000;        /* ヒーローより手前に */
  background: transparent !important; /* 透明 */
  box-shadow: none !important;
  border: none !important;
}

/* グローバルナビも透過（必要なら） */
.home .navi, .home .navi-in, .home .global-nav,
.front-page .navi, .front-page .navi-in, .front-page .global-nav {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}





/* =========================================================
   初期設定：いらない文字消す
========================================================= */



/* 全ページで非表示にする */
.entry-title,
.date-tags,
.author-info {
    display: none;
}



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

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

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


/* =========================================================
   FAQ（アコーディオン形式）：色味のカスタマイズのみ
   ========================================================= */

/* 1. 質問部分（Q）：背景色、文字色、枠線の色 */
.is-style-accordion .faq-question {
  background-color: #E77E84 !important; /* 指定のピンク系背景 */
  color: #fff !important;               /* 質問文の文字色（白） */
  border-color: #E77E84 !important;      /* 枠線の色 */
}

/* 2. ラベル（Q）：文字色 */
.is-style-accordion .faq-question-label.faq-item-label {
  color: #fff !important;               /* Qラベルの文字色（白） */
  background: transparent !important;
}

/* 3. 回答エリア（A）：枠線の色 */
.is-style-accordion .faq-answer {
  border-color: #E77E84 !important;      /* 回答エリアを囲む枠線の色 */
}

/* 4. ラベル（A）：文字色 */
.is-style-accordion .faq-answer-label.faq-item-label {
  color: #E77E84 !important;            /* Aラベルの文字色（ピンク） */
  background: transparent !important;
}