/* 企画相談の特設ページ（consult.php）専用。クラスはすべて cs_ で始める */

.cs_wrap {
  --cs-red: #EA3700;
  --cs-blue: #2DB0E7;
  --cs-green: #23B195;
  --cs-yellow: #F7AC00;
  --cs-ink: #222;
  --cs-sub: #666;
  --cs-line: #EAEAEA;
  --cs-bg: #FFF8F2;
  color: var(--cs-ink);
  font-family: 'Noto Sans JP', "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  line-height: 1.8;
  overflow: hidden;
}
.cs_wrap *, .cs_wrap *::before, .cs_wrap *::after { box-sizing: border-box; }
.cs_wrap b { font-weight: 700; }

.cs_inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}
.cs_center { text-align: center; }
.cs_pc { display: inline; }
@media (max-width: 768px) {
  .cs_inner { padding: 0 16px; }
  .cs_pc { display: none; }
}

/* ---------- 共通パーツ ---------- */
.cs_sec { padding: 96px 0; }
@media (max-width: 768px) { .cs_sec { padding: 64px 0; } }

.cs_title {
  margin: 0 0 40px;
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
}
.cs_title small {
  display: block;
  margin-bottom: 4px;
  color: var(--cs-red);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
@media (max-width: 768px) { .cs_title { font-size: 24px; margin-bottom: 28px; } }

.cs_lead {
  max-width: 760px;
  margin: -16px auto 40px;
  text-align: center;
  color: var(--cs-sub);
}
@media (max-width: 768px) { .cs_lead { text-align: left; margin-top: -8px; } }

.cs_note {
  margin-top: 20px;
  color: var(--cs-sub);
  font-size: 12px;
}

.cs_btn {
  display: inline-block;
  padding: 18px 36px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, background .2s;
  cursor: pointer;
  border: 0;
}
.cs_btn:hover { transform: translateY(-2px); }
.cs_btn_main {
  background: var(--cs-red);
  color: #fff !important;
  box-shadow: 0 6px 0 #B32A00;
}
.cs_btn_main:hover { box-shadow: 0 8px 0 #B32A00; }
.cs_btn_sub {
  background: #fff;
  color: var(--cs-ink) !important;
  border: 2px solid var(--cs-ink);
}
.cs_btn_line {
  margin-top: 32px;
  background: #fff;
  color: var(--cs-red) !important;
  border: 2px solid var(--cs-red);
}
.cs_btn[disabled] { opacity: .6; pointer-events: none; }

/* ---------- ファーストビュー ---------- */
.cs_mv {
  position: relative;
  padding: 40px 0 96px;
  background: var(--cs-bg);
}
.cs_pankuzu {
  position: relative;
  z-index: 1;
  justify-content: flex-start;
  margin: 0 0 48px;
  padding: 0;
  list-style: none;
}
.cs_pankuzu .pankuzu_item,
.cs_pankuzu .pankuzu_link { color: var(--cs-sub); }
.cs_mv_label {
  display: inline-block;
  margin: 0 0 16px;
  padding: 4px 16px;
  border-radius: 999px;
  background: var(--cs-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.cs_mv_title {
  margin: 0 0 24px;
  font-size: 56px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .02em;
}
.cs_mv_text {
  max-width: 640px;
  margin: 0 0 36px;
  font-size: 16px;
}
.cs_mv_btns { display: flex; flex-wrap: wrap; gap: 16px; }
.cs_mv_points {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.cs_mv_points li { position: relative; padding-left: 26px; }
.cs_mv_points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--cs-green);
}
.cs_mv_points li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 5px;
  height: 9px;
  margin-top: -6px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* カプセル（CSS だけで描く） */
.cs_mv_capsules {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
  pointer-events: none;
}
.cs_capsule {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,.85) 0 50%, var(--c) 50% 100%);
  box-shadow: inset -10px -12px 0 rgba(0,0,0,.08), 0 10px 24px rgba(0,0,0,.08);
  border: 3px solid #fff;
  animation: cs_float 6s ease-in-out infinite;
}
.cs_capsule::after {
  content: "";
  position: absolute;
  left: 18%;
  top: 14%;
  width: 22%;
  height: 14%;
  border-radius: 50%;
  background: #fff;
  opacity: .9;
}
.cs_capsule.c1 { --c: var(--cs-red);    width: 200px; height: 200px; top: 60px;  right: 12%; }
.cs_capsule.c2 { --c: var(--cs-blue);   width: 130px; height: 130px; top: 250px; right: 34%; animation-delay: -1.5s; }
.cs_capsule.c3 { --c: var(--cs-yellow); width: 110px; height: 110px; top: 300px; right: 4%;  animation-delay: -3s; }
.cs_capsule.c4 { --c: var(--cs-green);  width: 80px;  height: 80px;  top: 40px;  right: 44%; animation-delay: -4.5s; }
.cs_capsule.c5 { --c: var(--cs-red);    width: 60px;  height: 60px;  top: 440px; right: 22%; animation-delay: -2.2s; opacity: .7; }
@keyframes cs_float {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-14px) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) { .cs_capsule { animation: none; } }

@media (max-width: 1024px) {
  .cs_mv_capsules { width: 100%; opacity: .35; }
}
@media (max-width: 768px) {
  .cs_mv { padding: 24px 0 64px; }
  .cs_pankuzu { margin-bottom: 28px; }
  .cs_mv_title { font-size: 34px; }
  .cs_mv_text { font-size: 15px; }
  .cs_mv_btns .cs_btn { width: 100%; }
  .cs_capsule.c1 { width: 120px; height: 120px; top: 20px; right: -20px; }
  .cs_capsule.c2 { width: 80px; height: 80px; top: 200px; right: 10%; }
  .cs_capsule.c3, .cs_capsule.c4, .cs_capsule.c5 { display: none; }
}

/* ---------- お悩み ---------- */
.cs_worry_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.cs_worry_list li {
  position: relative;
  padding: 18px 20px 18px 56px;
  border-radius: 12px;
  background: #F6F6F6;
}
.cs_worry_list li::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border: 2px solid var(--cs-red);
  border-radius: 4px;
  background: #fff;
}
.cs_worry_list li::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 50%;
  width: 6px;
  height: 11px;
  margin-top: -8px;
  border: solid var(--cs-red);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.cs_worry_answer {
  margin: 48px 0 0;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
}
.cs_worry_answer b {
  background: linear-gradient(transparent 60%, rgba(247, 172, 0, .4) 60%);
}
@media (max-width: 768px) {
  .cs_worry_list { grid-template-columns: 1fr; gap: 10px; }
  .cs_worry_answer { font-size: 19px; }
}

/* ---------- 伴走の流れ ---------- */
.cs_flow { background: var(--cs-bg); }
.cs_flow_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.cs_flow_item {
  padding: 28px 24px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
}
.cs_flow_num {
  margin: 0;
  color: var(--cs-red);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}
.cs_flow_title {
  margin: 10px 0 16px;
  font-size: 18px;
  font-weight: 700;
}
.cs_flow_role { margin: 0; font-size: 14px; }
.cs_flow_role dt {
  display: inline-block;
  margin-top: 10px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--cs-sub);
}
.cs_flow_role dt:nth-of-type(2) { background: var(--cs-red); }
.cs_flow_role dd { margin: 4px 0 0; }
@media (max-width: 1024px) { .cs_flow_list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .cs_flow_list { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- 3つの領域 ---------- */
.cs_field_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cs_field_item {
  --c: var(--cs-red);
  padding: 32px 28px;
  border-top: 6px solid var(--c);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
}
.cs_field_item.f2 { --c: var(--cs-blue); }
.cs_field_item.f3 { --c: var(--cs-green); }
.cs_field_tag {
  margin: 0;
  color: var(--c);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
}
.cs_field_title {
  margin: 4px 0 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}
.cs_field_title span { font-size: 14px; color: var(--cs-sub); }
.cs_field_text { margin: 0 0 20px; font-size: 14px; }
@media (max-width: 1024px) { .cs_field_list { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; } }

/* ---------- 相談例 ---------- */
.cs_example { background: #F6F6F6; }
.cs_example_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cs_example_item {
  padding: 28px 24px;
  border-radius: 16px;
  background: #fff;
}
.cs_example_q {
  position: relative;
  margin: 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--cs-bg);
  font-weight: 700;
}
.cs_example_arrow {
  margin: 8px 0;
  text-align: center;
  color: var(--cs-red);
  font-size: 22px;
  font-weight: 900;
}
.cs_example_a { margin: 0; font-size: 14px; }
.cs_example_a b { color: var(--cs-red); }
@media (max-width: 1024px) { .cs_example_list { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; } }

/* ---------- 数字 ---------- */
.cs_number_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cs-line);
  border: 1px solid var(--cs-line);
}
.cs_number_list li {
  padding: 32px 16px;
  text-align: center;
  background: #fff;
}
.cs_number_val {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.cs_number_val span {
  margin: 0 2px;
  color: var(--cs-red);
  font-size: 44px;
  font-weight: 900;
}
.cs_number_label { margin: 6px 0 0; color: var(--cs-sub); font-size: 13px; }
@media (max-width: 768px) {
  .cs_number_list { grid-template-columns: repeat(2, 1fr); }
  .cs_number_list li { padding: 22px 8px; }
  .cs_number_val { font-size: 14px; }
  .cs_number_val span { font-size: 30px; }
}

/* ---------- 制作事例 ---------- */
.cs_case { background: var(--cs-bg); }
.cs_case_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs_case_link {
  display: block;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  color: var(--cs-ink);
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.cs_case_link:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.cs_case_pic {
  aspect-ratio: 4 / 3;
  background: #EAEAEA center / cover no-repeat;
}
.cs_case_body { padding: 16px 20px 20px; }
.cs_case_client { margin: 0 0 4px; color: var(--cs-red); font-size: 12px; font-weight: 700; }
.cs_case_title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.6; }
@media (max-width: 1024px) { .cs_case_list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .cs_case_list { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- FAQ ---------- */
.cs_faq_list { max-width: 840px; margin: 0 auto; }
.cs_faq_item {
  border-bottom: 1px solid var(--cs-line);
}
.cs_faq_item summary {
  position: relative;
  padding: 22px 48px 22px 40px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.cs_faq_item summary::-webkit-details-marker { display: none; }
.cs_faq_item summary::before {
  content: "Q";
  position: absolute;
  left: 4px;
  top: 20px;
  color: var(--cs-red);
  font-size: 20px;
  font-weight: 900;
}
.cs_faq_item summary::after {
  content: "+";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cs-red);
  font-size: 24px;
  font-weight: 400;
}
.cs_faq_item[open] summary::after { content: "−"; }
.cs_faq_item p {
  position: relative;
  margin: 0;
  padding: 0 16px 24px 40px;
  color: #444;
}
.cs_faq_item p::before {
  content: "A";
  position: absolute;
  left: 4px;
  top: -4px;
  color: var(--cs-blue);
  font-size: 20px;
  font-weight: 900;
}

/* ---------- フォーム ---------- */
.cs_form { background: var(--cs-bg); }
.cs_form_box {
  max-width: 840px;
  margin: 0 auto;
  padding: 48px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
.cs_fs {
  margin: 0 0 28px;
  padding: 0;
  border: 0;
}
.cs_fs legend, .cs_field label {
  display: block;
  margin-bottom: 10px;
  padding: 0;
  font-weight: 700;
}
.cs_fs legend small { color: var(--cs-sub); font-weight: 400; font-size: 12px; }
.cs_chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cs_chips label { position: relative; margin: 0; cursor: pointer; }
.cs_chips input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.cs_chips span {
  display: inline-block;
  padding: 8px 18px;
  border: 2px solid var(--cs-line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  transition: background .15s, border-color .15s, color .15s;
}
.cs_chips label:hover span { border-color: var(--cs-red); }
.cs_chips input:checked + span {
  border-color: var(--cs-red);
  background: var(--cs-red);
  color: #fff;
}
.cs_chips input:focus-visible + span { outline: 3px solid rgba(234, 55, 0, .35); outline-offset: 2px; }

.cs_field { margin: 0 0 24px; flex: 1; }
.cs_field_row { display: flex; gap: 24px; }
.cs_must, .cs_opt {
  display: inline-block;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: 2px;
}
.cs_must { background: var(--cs-red); color: #fff; }
.cs_opt  { background: #EAEAEA; color: var(--cs-sub); }
.cs_input, .cs_textarea {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--cs-line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 16px;
  color: var(--cs-ink);
}
.cs_input:focus, .cs_textarea:focus { outline: none; border-color: var(--cs-blue); }
.cs_input.is-error { border-color: var(--cs-red); background: #FFF4F0; }
.cs_textarea { resize: vertical; min-height: 120px; }
.cs_error {
  display: none;
  margin: 6px 0 0;
  color: var(--cs-red);
  font-size: 13px;
  font-weight: 700;
}
.cs_error.is-show { display: block; }
.cs_agree {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  cursor: pointer;
}
.cs_agree input { width: 18px; height: 18px; accent-color: var(--cs-red); }
.cs_agree + .cs_error { text-align: center; }
.cs_submit { margin-top: 28px; min-width: 320px; }
.cs_form_tel { margin: 20px 0 0; text-align: center; color: var(--cs-sub); font-size: 14px; }
.cs_form_tel a { color: var(--cs-ink); font-weight: 700; font-size: 18px; }
@media (max-width: 768px) {
  .cs_form_box { padding: 28px 16px; border-radius: 16px; }
  .cs_field_row { flex-direction: column; gap: 0; }
  .cs_submit { min-width: 0; width: 100%; }
}

.cs_field_more {
  display: inline-block;
  margin-top: 20px;
  color: var(--c) !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}
.cs_field_more::after { content: " →"; }

.cs_sp { display: none; }
@media (max-width: 768px) { .cs_sp { display: inline; } }

.cs_mv_kw {
  display: block;
  margin-bottom: 12px;
  color: var(--cs-red);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .04em;
}
@media (max-width: 768px) { .cs_mv_kw { font-size: 16px; margin-bottom: 8px; } }

/* 3つの領域のカード内の商品 */
.cs_field_item { display: flex; flex-direction: column; }
.cs_field_more { align-self: flex-start; margin-top: 12px; }
.cs_field_more:first-of-type { margin-top: auto; padding-top: 16px; }
.cs_mini_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.cs_mini_link {
  display: block;
  color: var(--cs-ink) !important;
  text-decoration: none;
}
.cs_mini_pic {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: #F6F6F6 center / cover no-repeat;
  transition: opacity .2s;
}
.cs_mini_link:hover .cs_mini_pic { opacity: .8; }
.cs_mini_name {
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* 目的・カテゴリーから探す */
.cs_search_sub {
  margin: 40px 0 16px;
  padding-left: 14px;
  border-left: 4px solid var(--cs-red);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}
.cs_search_sub:first-of-type { margin-top: 0; }
.cs_obj_list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs_obj_link {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid var(--cs-line);
  border-radius: 999px;
  background: #fff;
  color: var(--cs-ink) !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.cs_obj_link::before { content: "# "; color: var(--cs-red); }
.cs_obj_link:hover { border-color: var(--cs-red); color: var(--cs-red) !important; }
.cs_cat_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs_cat_link {
  display: block;
  height: 100%;
  border: 1px solid var(--cs-line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  color: var(--cs-ink) !important;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.cs_cat_link:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.cs_cat_pic {
  display: block;
  aspect-ratio: 4 / 3;
  background: #F6F6F6 center / cover no-repeat;
}
.cs_cat_name {
  display: block;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
@media (max-width: 1024px) { .cs_cat_list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
  .cs_cat_list { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cs_obj_link { padding: 8px 14px; font-size: 13px; }
}

/* サイト共通ヘッダーは position: fixed・透過・白文字（高さ 134px / 960px 以下 96px）。
   他のページは暗いメインビジュアルの上に載るので、ここもヘッダーの裏だけ暗い帯を敷き、FV はその下から始める */
.cs_mv {
  padding-top: 174px;
  background: linear-gradient(to bottom, #222 0, #222 134px, var(--cs-bg) 134px);
}
.cs_mv_capsules { top: 134px; }
@media only screen and (max-width: 960px) {
  .cs_mv {
    padding-top: 120px;
    background: linear-gradient(to bottom, #222 0, #222 96px, var(--cs-bg) 96px);
  }
  .cs_mv_capsules { top: 96px; }
}