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

/* ========================================
 * 1. 共通 (カスタムプロパティ・グローバル設定)
 * ======================================== */

:root {
  /* カラー */
  --look-primary:         #8e0f16;  /* メインカラー（ダークレッド） */
  --vender-text-light:    #565656;
  --vender-link:          #1044BC;
  --vender-white:         #fff;

  /* フォントサイズ */
  --vender-font-base:     16px;
  --vender-font-sm:       14px;
  --vender-font-h1:       25px;
  --vender-font-h2:       20px;
  --vender-font-tel:      22px;

  /* 余白 */
  --vender-spacing-xs:    5px;
  --vender-spacing-sm:    10px;
  --vender-spacing-md:    15px;
  --vender-spacing-lg:    25px;
  --vender-spacing-xl:    30px;

  /* 評価（星） */
  --vender-star-color:    #f5a623;
  --vender-star-empty:    #ddd;

  /* CTA ボタン */
  --vender-cta-tel-bg:    #cf2e2e;
  --vender-cta-line-bg:   #00d084;

  /* 料金エリア背景 */
  --vender-charge-bg:     #f7f7f7;
  --vender-charge-label-bg: #949495;

  /* セクション見出し */
  --vender-section-heading-bg: #f1f1f1;

  /* 市区町村フィルタ */
  --vender-city-link-bg:     #f0f4ff;
  --vender-city-link-border: #b3c6e6;

  /* 沿線・駅 */
  --look-station-bg:         #fff8e1;
  --look-station-border:     #e6c97a;
  --look-station-accent:     #f57c00;

  /* TOPページ デザイン (モック準拠) */
  --look-top-primary:        #c8182a;  /* TOPメインカラー（鮮やかレッド） */
  --look-top-primary-dark:   #9a0f1f;
  --look-top-primary-soft:   #ffe9eb;
  --look-top-accent:         #c28a3a;  /* アクセント（オレンジブラウン） */
  --look-top-accent-soft:    #e8d5a8;
  --look-top-text:           #222;
  --look-top-text-sub:       #666;
  --look-top-border:         #e5e5e5;

  /* TOPページ タイポ・スペース */
  --look-top-fs-sm:          13px;
  --look-top-fs-md:          14px;
  --look-top-fs-lg:          16px;
  --look-top-fs-xl:          18px;
  --look-top-fs-2xl:         22px;
  --look-top-lh-base:        1.7;
  --look-top-sp-2:           8px;
  --look-top-sp-3:           12px;
  --look-top-sp-4:           16px;
  --look-top-sp-5:           24px;
  --look-top-sp-6:           32px;
  --look-top-sp-7:           48px;
  --look-top-radius-md:      8px;

}


/* ========================================
 * 2. 部品 (再利用可能なコンポーネント)
 * ======================================== */

/************************************
** 沿線・駅検索 (.look-station-search)
************************************/

.look-station-search {
  margin: var(--vender-spacing-lg) 0;
  padding: var(--vender-spacing-md);
  background: var(--look-station-bg);
  border-radius: 8px;
}

.look-station-search-label {
  font-weight: 700;
  margin: 0 0 var(--vender-spacing-sm);
}

.look-station-group {
  margin-bottom: var(--vender-spacing-md);
}

.look-station-group-title {
  font-size: var(--vender-font-sm);
  font-weight: 700;
  color: var(--look-station-accent);
  margin: 0 0 var(--vender-spacing-xs);
  padding: 0;
}

.look-station-line {
  border: 1px solid var(--look-station-border);
  border-radius: 4px;
  margin-bottom: 4px;
  background: var(--vender-white);
}

.look-station-line-header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--vender-font-sm);
  text-align: left;
  gap: 6px;
}

.look-station-line-header:hover {
  background: #fff3cd;
}

.look-station-line-name {
  font-weight: 700;
}

.look-station-line-count {
  color: var(--vender-text-light);
  font-size: 12px;
}

.look-station-line-arrow {
  margin-left: auto;
  font-size: 10px;
  color: var(--vender-text-light);
  transition: transform 0.2s;
}

.look-station-line-header[aria-expanded="true"] .look-station-line-arrow {
  transform: rotate(180deg);
}

.look-station-line-body {
  padding: 0 12px 8px;
}

.look-station-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.look-station-link {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--look-station-border);
  border-radius: 4px;
  background: var(--look-station-bg);
  color: #333;
  font-size: var(--vender-font-sm);
  text-decoration: none;
  transition: background 0.15s;
}

.look-station-link:hover {
  background: #ffe082;
  color: #333;
}

.look-station-link-count {
  font-size: 12px;
  color: var(--vender-text-light);
}


/* ========================================
 * 3. ページ (ページ固有のスタイル)
 * ======================================== */

/* 旧 .vender-detail / .vender-card 系のページスタイルは削除済み
   (新デザインは template-parts/vender-detail/ + assets/css/detail.css に移行) */
/************************************
** TOPページ (モック準拠)
************************************/

/* セクション共通 — eyebrow / title / lead */
.look-top .section-eyebrow {
	text-align: center;
	font-size: var(--look-top-fs-sm);
	color: var(--look-top-accent);
	margin-bottom: var(--look-top-sp-2);
	line-height: 1;
}
.look-top .section-eyebrow.en {
	font-weight: 500;
	letter-spacing: 0.1em;
}
.look-top .section-eyebrow img {
	display: inline-block;
	width: auto;
	height: 24px;
	vertical-align: middle;
}
.look-top .section-eyebrow--icon img {
	height: 28px;
}
.look-top .section-title {
	text-align: center;
	font-size: var(--look-top-fs-2xl);
	margin-bottom: var(--look-top-sp-4);
	font-weight: 700;
	line-height: 1.4;
}
.look-top .section-lead {
	text-align: center;
	color: var(--look-top-text-sub);
	font-size: var(--look-top-fs-sm);
	margin-bottom: var(--look-top-sp-6);
	line-height: var(--look-top-lh-base);
}

/* 3つの特徴 */
.look-top .features-three {
	padding: var(--look-top-sp-7) 0;
}
.look-top .features-three__grid {
	display: grid;
	gap: var(--look-top-sp-5);
	grid-template-columns: 1fr;
}
.look-top .features-three__item h3 {
	font-size: var(--look-top-fs-lg);
	color: var(--look-top-primary);
	margin-bottom: var(--look-top-sp-2);
	font-weight: 700;
}
.look-top .features-three__item p {
	font-size: var(--look-top-fs-sm);
	color: var(--look-top-text-sub);
	line-height: var(--look-top-lh-base);
}

/* ご利用の流れ */
.look-top .how-to {
	padding: var(--look-top-sp-7) 0;
}
.look-top .how-to__list {
	display: grid;
	gap: var(--look-top-sp-3);
	grid-template-columns: repeat(3, 1fr);
	max-width: 800px;
	margin: 0 auto;
	list-style: none;
	padding: 0;
}
.look-top .how-to__step {
	background: #fff;
	border: 1px solid var(--look-top-accent-soft);
	border-radius: var(--look-top-radius-md);
	padding: var(--look-top-sp-5) var(--look-top-sp-4);
	text-align: center;
}
.look-top .how-to__num {
	color: var(--look-top-primary);
	font-weight: 700;
	margin: 0;
}
.look-top .how-to__name {
	font-weight: 700;
	font-size: var(--look-top-fs-lg);
	margin: var(--look-top-sp-2) 0;
}
.look-top .how-to__icon {
	margin: var(--look-top-sp-2) 0;
}
.look-top .how-to__icon img {
	display: inline-block;
	width: auto;
	height: 48px;
	vertical-align: middle;
}
.look-top .how-to__desc {
	font-size: var(--look-top-fs-sm);
	color: var(--look-top-text-sub);
	margin: 0;
}

/* 運転代行LOOKの特徴 */
.look-top .features-grid {
	padding: var(--look-top-sp-7) 0;
}
.look-top .features-grid__grid {
	display: grid;
	gap: var(--look-top-sp-5);
	grid-template-columns: 1fr;
}
.look-top .features-grid__grid h3 {
	font-weight: 700;
	color: var(--look-top-text);
	margin-bottom: var(--look-top-sp-2);
	font-size: var(--look-top-fs-lg);
}
.look-top .features-grid__grid p {
	font-size: var(--look-top-fs-sm);
	color: var(--look-top-text-sub);
	line-height: var(--look-top-lh-base);
}

/* 情報ブロック (料金相場 / タクシー比較 / 注意点 共通) */
.look-top .info-block {
	padding: var(--look-top-sp-6) 0;
}
.look-top .info-block__inner {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}
.look-top .info-block p {
	font-size: var(--look-top-fs-sm);
	line-height: var(--look-top-lh-base);
	margin-bottom: var(--look-top-sp-2);
}
.look-top .info-block .primary {
	color: var(--look-top-primary);
	background: transparent;
	padding: 0;
	border: none;
	border-radius: 0;
}
.look-top .info-block .link {
	color: var(--look-top-primary);
	text-decoration: underline;
	font-weight: 700;
}
.look-top .bullet-list {
	text-align: left;
	display: inline-block;
	font-size: var(--look-top-fs-sm);
	margin: var(--look-top-sp-2) 0;
	list-style: none;
	padding: 0;
}
.look-top .bullet-list li::before {
	content: "・";
	color: var(--look-top-primary);
}

/* 情報ブロック 3 カラムグループ (料金相場 / タクシー比較 / 注意点) */
.look-top .info-block-group {
	padding: var(--look-top-sp-6) 0;
}
.look-top .info-block-group__inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--look-top-sp-5);
	align-items: start;
}
.look-top .info-block-group .info-block { padding: 0; }
.look-top .info-block-group .info-block__inner { max-width: none; }
@media (max-width: 768px) {
	.look-top .info-block-group__inner { grid-template-columns: 1fr; }
}

/* ボトムCTA (ロゴ + ボタン画像) */
.look-top .cta-bottom {
	padding: var(--look-top-sp-7) 0;
	text-align: center;
}
.look-top .cta-bottom__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--look-top-sp-5);
}
.look-top .cta-bottom__logo {
	height: 36px;
	width: auto;
}
.look-top .cta-bottom__btn--img {
	display: block;
	max-width: 520px;
	width: 100%;
	transition: transform 0.1s;
}
.look-top .cta-bottom__btn--img img {
	display: block;
	width: 100%;
	height: auto;
}
.look-top .cta-bottom__btn--img:hover {
	transform: translateY(1px);
}
.look-top .cta-bottom__btn--img:active {
	transform: translateY(2px);
}


/* ========================================
 * 4. レスポンシブ (全メディアクエリ一括定義)
 * ======================================== */

@media screen and (max-width: 480px) {
  /* 沿線・駅検索 */
  .look-station-search {
    padding: var(--vender-spacing-sm);
  }

  .look-station-line-header {
    padding: 6px 10px;
    font-size: 13px;
  }
}


/* ========================================
 * PC版レイアウト (min-width: 835px)
 * ======================================== */

@media screen and (min-width: 835px) {

  /* SP/PC 表示切替 */
  .look-pc-only { display: block !important; }
  .look-sp-only { display: none !important; }
}


/* TOPページ — PC: 3カラム化 */
@media screen and (min-width: 1024px) {
  .look-top .features-three__grid,
  .look-top .features-grid__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .look-top .how-to__list {
    gap: var(--look-top-sp-4);
  }
  .look-top .section-title {
    font-size: 28px;
  }
  .look-top .cta-bottom__logo {
    height: 48px;
  }
}