/* ============================================================
   2026-10 リニューアルで足したスタイル。
   元の CSS（index.css / stylesheet.css / index_responsive.css）は書き換えず、
   このファイルを最後に読み込んで、足りない分だけを上書きする。
   ============================================================ */

/* ----- Service の見出し（白い帯） ----- */
.service_head { padding-top: 3.90625vw; padding-bottom: 1.5625vw; }
.service_head .ttl { margin-bottom: 0; }

/* ----- Service: 3つの事業を、カード3枚の横並びで見せる ----- */
.entertainment.biz3 { padding-top: 2.34375vw; padding-bottom: 3.515625vw; }
.entertainment.biz3 .content .service-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.34375vw; margin-bottom: 0; align-items: stretch;
}
.entertainment.biz3 .content .service-card.biz_card {
  display: flex; flex-direction: column; padding: 2.03125vw 2.03125vw 1.875vw; background: #fff;
}

/* パターンA: 黄色い帯に白いカード（元の Works の帯の色） */
.biz3--yellow { background-color: #FDEE6F; }
.biz3--yellow .service-card.biz_card { border-color: #fff; }
/* パターンB: 白い背景に、枠のあるカード（元の Service に近い） */
.biz3--white { background-color: #fff; }
.biz3--white .service-card.biz_card { border: 0.78125vw solid #F4F4F4; }

.biz_no {
  font-family: "Lexend", sans-serif; font-weight: 700; font-size: 1.09375vw; line-height: 1;
  letter-spacing: 0.08em; color: #FBD50F; margin: 0 0 0.625vw;
}
.biz_name {
  font-family: "Lexend", sans-serif; font-weight: 700; font-size: 1.875vw; line-height: 1.2;
  color: #000; margin: 0 0 0.9375vw; letter-spacing: 0.01em;
}
.biz_lead {
  font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: 1.015625vw; line-height: 1.6;
  letter-spacing: 0.02em; color: #1c1c1c; margin: 0 0 1.25vw; white-space: nowrap;
}

/* 03 のひとことの改行は、スマホのときだけ効かせる（2026-10-14） */
.biz_lead_br { display: none; }

/* 01・02: バナーのカード（元の Works のカードと同じ、絵＋名前＋矢印） */
.biz_items { display: flex; flex-direction: column; gap: 0.9375vw; }
.biz_item { display: block; text-decoration: none; color: inherit; }
.biz_item_img { aspect-ratio: 430 / 240; border-radius: 1.09375vw; overflow: hidden; background: #F4F4F4; box-shadow: 0 0 0 1px #EDEDED; }
.biz_item_img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.biz_item_ttl { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 0.625vw; min-height: 24px; }
.biz_item_ttl p {
  margin: 0; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: 1.015625vw; line-height: 1.5;
  letter-spacing: 0.04em; color: #000; text-align: left;
}
.biz_item_arrow { width: 1.875vw; height: 1.875vw; min-width: 20px; min-height: 20px; flex: 0 0 auto; transition: transform 0.2s ease; }
a.biz_item:hover .biz_item_arrow { transform: translateX(4px); }
a.biz_item:hover .biz_item_img img { transform: scale(1.03); }
.biz_item_img img { transition: transform 0.4s ease; }
.biz_item.is-soon { cursor: default; }
.soon_tag {
  flex: 0 0 auto; padding: 0 0.78125vw; border-radius: 100px; white-space: nowrap;
  font-family: "Lexend", sans-serif; font-size: 11px; font-weight: 500; line-height: 20px; letter-spacing: 0.04em;
  color: #1c1c1c; background: #fff; border: 1px solid lightgray;
}

/* 03: やっていることの一覧（元の Service のアイコンを使う） */
.biz_menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 0.9375vw; flex: 1; }
.biz_menu li {
  display: flex; align-items: center; gap: 1.25vw; padding: 1.171875vw 1.09375vw; border-radius: 1.09375vw; background: #F4F4F4; flex: 1;
}
.biz_menu li img { width: 4.375vw; height: 4.375vw; flex: 0 0 auto; }
.biz_menu_en { font-family: "Lexend", sans-serif; font-weight: 700; font-size: 1.328125vw; line-height: 1.3; color: #000; margin: 0; }
.biz_menu_ja { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: 0.9375vw; line-height: 1.5; color: #1c1c1c; margin: 0; letter-spacing: 0.04em; }
/* 03 の相談リンク: 01・02 のバナー下の「名前 ›」と同じ形（テキスト＋丸い矢印、右寄せ） */
.biz_cta { display: flex; justify-content: space-between; align-items: center; gap: 0.5vw; padding-top: 0.9375vw; color: #1c1c1c; text-decoration: none; }
.biz_cta span { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; font-size: 0.859375vw; letter-spacing: 0.04em; white-space: nowrap; }
.biz_cta_arrow { width: 1.875vw; height: 1.875vw; min-width: 20px; min-height: 20px; flex: 0 0 auto; transition: transform 0.2s ease; }
.biz_cta:hover .biz_cta_arrow { transform: translateX(4px); }

/* ----- 画面が狭いとき（元の Service と同じ切り替え幅） ----- */
@media screen and (max-width: 1300px) {
  .entertainment.biz3 .content .service-cards { grid-template-columns: 1fr; max-width: 520px; gap: 24px; }
  .entertainment.biz3 .content .service-card.biz_card { padding: 32px 28px; }
  .biz_no { font-size: 14px; margin-bottom: 8px; }
  .biz_name { font-size: 26px; margin-bottom: 10px; }
  .biz_lead { font-size: 15px; margin-bottom: 20px; min-height: 0; }
  .biz_items { gap: 16px; }
  .biz_item_img { border-radius: 14px; }
  .biz_item_ttl { margin-top: 8px; }
  .biz_item_ttl p { font-size: 14px; }
  .biz_item_arrow { width: 24px; height: 24px; }
  .biz_menu { gap: 8px; }
  .biz_menu li { gap: 14px; padding: 10px 14px; border-radius: 14px; }
  .biz_menu li img { width: 52px; height: 52px; }
  .biz_menu_en { font-size: 17px; }
  .biz_menu_ja { font-size: 13px; }
  .biz_cta { padding-top: 16px; gap: 8px; }
  .biz_cta span { font-size: 13px; }
  .biz_cta_arrow { width: 24px; height: 24px; }
  .biz3--white .service-card.biz_card { border-width: 10px; }
}

/* ----- スマホ: 元の Service と同じく、カードを横にスワイプする ----- */
@media (max-width: 700px) {
  .service_head { padding-bottom: 8px !important; }
  .entertainment.biz3 { padding-top: 24px !important; padding-bottom: 32px !important; }
  .entertainment.biz3 .content .service-cards { max-width: none; gap: 14px; }
  .entertainment.biz3 .content .service-card.biz_card { flex: 0 0 290px; width: 290px; padding: 24px 20px; }
  .biz_name { font-size: 24px; }
  /* スマホはカードが狭いので、ひとことを折り返す。03 は読点で2行に分ける（2026-10-14） */
  .biz_lead { white-space: normal; }
  .biz_lead_br { display: inline; }
  .biz_cta span { font-size: 12px; }
  .biz_cta_arrow { width: 24px; height: 24px; }
}

/* ----- About: 会社概要の「事業内容」（3つの事業） ----- */
.company .company_content .biz_about p span { color: #F2B705; }
.company .company_content .biz_about .biz_about_sub { padding-left: 1.5625vw; border-left: 0.234375vw solid #FBD50F; }
.company .company_content .biz_about .biz_about_sub span { color: #1c1c1c; }
.company .company_content .biz_about .biz_about_eg { display: block; margin-top: 0.3125vw; font-size: 1.015625vw; line-height: 1.6; color: #666; }
@media (max-width: 700px) {
  .company .company_content .biz_about .biz_about_sub { padding-left: 14px; border-left-width: 3px; }
  .company .company_content .biz_about .biz_about_eg { font-size: 13px; margin-top: 4px; }
}

/* ----- 英語の帯: 画像（pop.svg）が途中で切れているため、文字で流す（2026-10-14） ----- */
.pop .pop-marquee__row .pop_text {
  display: block; flex-shrink: 0; white-space: nowrap;
  font-family: "Lexend", sans-serif; font-weight: 600; font-size: 7.1vw; line-height: 7.8125vw; letter-spacing: 0.01em;
  color: rgba(251, 213, 15, 0.4);
}
.pop .pop-marquee__row .pop_sep { margin: 0 0.6em; }
/* 文と文の間隔は区切りの「・」でとる。行どうしの継ぎ目と同じ間隔にして、ループで跳ねないようにする */
.pop .pop-marquee__row { gap: 0; }
@media (max-width: 700px) {
  .pop .pop-marquee__row .pop_text { font-size: 45px; line-height: 50px; }
}

/* ===== ヘッダーの JOY（2026-10-16）。About us の開くメニューと同じ見た目を使う ===== */
.header_container .joy_wrapper .joy_link { cursor: default; }
.header_container .joy_vector {
  top: 1px;
  position: relative;
  margin-left: 0.78125vw;
  font-size: 1.09375vw;
  transition: transform 0.3s ease;
}
.header_container .joy_wrapper:hover .joy_vector { transform: rotate(180deg); }
.header_container .joy_wrapper .aboutus_accordion { width: 11.5vw; }