@charset "utf-8";
/* ============================================================
   accio.css — Accio 向けの差分スタイル
   base.css / style.css（agent テーマ由来）の構造は変えず、
   Accio で新たに使う要素・文言量の違いに合わせた最小限の調整のみ。
   ============================================================ */

/* --- トップ MV：画像キャッチ → テキストキャッチ --- */
.home-mv__catch {
  text-align: left;
  color: #fff;
}
.home-mv__catch span {
  display: block;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.home-mv__catch .home-mv__catch-en {
  font-family: "Kumbh Sans", sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 38px);
  letter-spacing: 0.04em;
  margin-bottom: 0.6em;
}
.home-mv__catch .home-mv__catch-jp {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 48px);
  line-height: 1.5;
}
.home-mv__catch .home-mv__catch-sub {
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 500;
  margin-top: 1.2em;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 767px) {
  /* base.css は left:50%+translate(-50%) で中央寄せしているため、左寄せに直す際は transform も解除する */
  .home-mv__text {
    left: 0;
    width: 100%;
    top: auto;
    bottom: 9%;
    transform: none;
    padding: 0 6%;
    box-sizing: border-box;
    text-align: left;
  }
  .home-mv__catch .home-mv__catch-jp {
    font-size: clamp(22px, 6.4vw, 30px);
  }
  .home-mv__catch .home-mv__catch-en {
    font-size: clamp(16px, 5vw, 22px);
  }
}


/* --- 実績紹介 詳細：案件情報テーブル＋概要 --- */
.works_content .flex-container {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}
@media screen and (max-width: 767px) {
  .works_content .flex-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.works_content .image-container img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.works_content .p-post-article__table {
  width: 100%;
  border-collapse: collapse;
}
.works_content .p-post-article__table th,
.works_content .p-post-article__table td {
  padding: 1.2rem 1rem;
  border-bottom: 1px solid #d5dfeb;
  text-align: left;
  vertical-align: top;
  font-size: 1.5rem;
  line-height: 1.7;
}
.works_content .p-post-article__table th {
  width: 9em;
  color: #1d5fa8;
  font-weight: 700;
  white-space: nowrap;
}
.works_content .p-post-article__textarea {
  margin-top: 2.4rem;
  font-size: 1.5rem;
  line-height: 2;
}
.sub-single__body {
  margin-top: 4rem;
}
.sub-single__body .wp-block-gallery {
  margin-top: 2rem;
}
.sub-single__body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.gallery-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
@media screen and (max-width: 767px) {
  .gallery-wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}
.gallery-wrap .property-slider__img-wrap img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}
.gallery-wrap .property-slider__img-text {
  font-size: 1.3rem;
  margin-top: 0.6rem;
  color: #555;
}
.sub-single__btn-group {
  margin-top: 5rem;
  text-align: center;
}

/* --- 実績紹介 一覧：カテゴリータグの色（旧テーマの種別色を Accio 青へ統一） --- */
.sub-archive__category span,
.home-works__category span {
  background-color: #14325c;
  color: #fff;
}

/* --- お問い合わせ：リード文 --- */
.sub-contact__item-top .c-textA {
  text-align: center;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .sub-contact__item-top .c-textA {
    text-align: left;
  }
}

/* --- 採用情報：応募ボタン --- */
.recruit .p-sec03 .button {
  margin-top: 4rem;
  text-align: center;
}
.recruit .note {
  margin-top: 4rem;
}

/* --- 採用情報：注意書きは青地に、ボタンは文言に合わせて幅を持たせる --- */
.recruit .note {
  background: #1d5fa8;
}
.recruit .p-sec03 .button a {
  min-width: 28rem;
  padding-left: 3rem;
  padding-right: 3rem;
  white-space: nowrap;
}

/* --- お知らせ一覧：カードのタイトルを確実に表示 --- */
.sub-archive-news .c-card__body-bottom {
  margin-top: 1rem;
  padding-top: 0.5rem;
}
.sub-archive-news .c-card__ttl {
  display: block;
  color: #000;
  font-size: 1.6rem;
  line-height: 1.6;
  max-height: none;
  overflow: visible;
  -webkit-line-clamp: unset;
}

/* --- お問い合わせ：リード文の幅 --- */
.sub-contact__item-top {
  max-width: 820px;
  margin: 0 auto;
}

/* ============================================================
   ロゴの4色（ブルー／パープル／グリーン／レッド）をアクセントに使う
   ベースは青のまま。差し色は小さな面積（タグ・番号・下線・アイコン）に限定
   ============================================================ */
:root {
  --accio-blue: #1d5fa8;
  --accio-navy: #14325c;
  --accio-purple: #6b3fa0;
  --accio-green: #82b31a;
  --accio-red: #c8102e;
  --accio-sky: #2f9bd6;
}

/* セクション英字見出し：青→紫のグラデーション文字 */
.c-titA .en,
.l-page-cover__ttl {
  background: linear-gradient(90deg, var(--accio-navy) 0%, var(--accio-blue) 55%, var(--accio-purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accio-blue);
}
.l-page-cover__ttl {
  background: linear-gradient(90deg, #ffffff 0%, #dbe8f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.l-page-cover__ttl span {
  -webkit-text-fill-color: #fff;
}

/* 見出し（和文）の下に4色のバー */
.c-heading01_center {
  position: relative;
  padding-bottom: 1.6rem;
}
.c-heading01_center::after {
  content: "";
  display: block;
  width: 9.6rem;
  height: 4px;
  margin: 1.4rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accio-blue) 0 25%, var(--accio-purple) 25% 50%, var(--accio-green) 50% 75%, var(--accio-red) 75% 100%);
}
.stay .c-heading01_center::after {
  display: none;
}

/* 実績カテゴリーのタグ色（スラッグ別） */
.sub-archive__category span,
.home-works__category span,
.sub-single__category span {
  background-color: var(--accio-navy);
  color: #fff;
}
.sub-archive__category .event-planning,  .home-works__category .event-planning  { background-color: var(--accio-blue); }
.sub-archive__category .venue-setup,     .home-works__category .venue-setup     { background-color: var(--accio-green); }
.sub-archive__category .stage-operation, .home-works__category .stage-operation { background-color: var(--accio-purple); }
.sub-archive__category .tv-art,          .home-works__category .tv-art          { background-color: var(--accio-red); }
.sub-archive__category .space-design,    .home-works__category .space-design    { background-color: var(--accio-sky); }
.sub-archive__category .signage,         .home-works__category .signage         { background-color: var(--accio-navy); }

/* 事業内容ページ：01〜06 の番号を4色でローテーション */
.p-sec02-contents .contentsWrap:nth-of-type(4n+1) .p-sec02-contents__titArea .num { color: var(--accio-blue); }
.p-sec02-contents .contentsWrap:nth-of-type(4n+2) .p-sec02-contents__titArea .num { color: var(--accio-purple); }
.p-sec02-contents .contentsWrap:nth-of-type(4n+3) .p-sec02-contents__titArea .num { color: var(--accio-green); }
.p-sec02-contents .contentsWrap:nth-of-type(4n+4) .p-sec02-contents__titArea .num { color: var(--accio-red); }

/* トップ事業カード：見出し帯の左に差し色ライン */
.p-service-contents__box--02 .boxItem .textArea .titArea .tit {
  border-left: 5px solid var(--accio-blue);
  padding-left: 1.2rem;
}
.p-service-contents__box--02 .boxItem:nth-child(2) .textArea .titArea .tit { border-color: var(--accio-purple); }
.p-service-contents__box--02 .boxItem:nth-child(3) .textArea .titArea .tit { border-color: var(--accio-green); }
.p-service-contents__box--02 .boxItem:nth-child(4) .textArea .titArea .tit { border-color: var(--accio-red); }
.p-service-contents__box--02 .boxItem:nth-child(5) .textArea .titArea .tit { border-color: var(--accio-sky); }
.p-service-contents__box--02 .boxItem:nth-child(6) .textArea .titArea .tit { border-color: var(--accio-navy); }

/* 会社概要「3つの強み」の番号 */
.stay-area-grid:nth-of-type(1) .stay-num { color: #9fd1ff; }
.stay-area-grid:nth-of-type(2) .stay-num { color: #c9a6ff; }
.stay-area-grid:nth-of-type(3) .stay-num { color: #bfe27a; }

/* 代表挨拶：写真＋文章の2カラム1ブロック */
.greeting-grid--single {
  align-items: start;
}
.greeting-grid--single img {
  position: sticky;
  top: 12rem;
}
.greeting-sign {
  display: block;
  text-align: right;
  font-weight: 700;
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  .greeting-grid--single img {
    position: static;
  }
}

/* --- linect ヘッダー：常時 半透明白（スクロールで変化させない） --- */
.header,
.header.scrolled {
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 8px 8px 16px 0 rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: none;
}
.header__tel {
  font-size: 2.6rem;
  letter-spacing: 0.02em;
}
.header__logo img {
  width: 100%;
  height: auto;
}
/* linect フッターCTA：14インチ級（〜1500px）でカラム落ちしないよう、文字サイズを画面幅に追従させる */
.footer_top .footer_flex .tel span {
  font-size: clamp(30px, 3.4vw, 55px);
}
.footer_top .footer_flex .tel_text .text02 {
  display: inline-block;
  margin-top: 0.8rem;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.6;
}
.footer_top .mail_text .text02 {
  font-size: clamp(22px, 2.3vw, 40px);
  white-space: nowrap;
}
.footer_top .mail_text .text02 span {
  font-size: clamp(30px, 3.3vw, 56px);
}
.footer_top .footer_flex .mail {
  font-size: clamp(20px, 2vw, 32px);
}
@media screen and (max-width: 767px) {
  .footer_top .mail_text .text02 {
    white-space: normal;
  }
}

/* CTA帯の下：横一列の Google マップ（所在地確定まで那覇市の仮表示） */
.right__map--wide {
  width: 100%;
  height: 26vw;
  min-height: 260px;
  max-height: 420px;
  line-height: 0;
}
.right__map--wide iframe {
  width: 100%;
  height: 100%;
  display: block;
}
.footer__details-note {
  font-size: 1.2rem;
  font-weight: 400;
  margin-left: 0.4em;
}

/* --- 実績詳細：カテゴリタグを一覧と同じ塗りタグに、「一覧へ戻る」をピル型ボタンに --- */
.sub-single .catArea .sub-archive__category span,
.sub-single .catArea .sub-archive__category a span {
  display: inline-block;
  background-color: var(--accio-navy);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.3em 1.2em;
  font-size: 1.3rem;
  line-height: 1.4;
}
.sub-single .catArea .event-planning  { background-color: var(--accio-blue) !important; }
.sub-single .catArea .venue-setup     { background-color: var(--accio-green) !important; }
.sub-single .catArea .stage-operation { background-color: var(--accio-purple) !important; }
.sub-single .catArea .tv-art          { background-color: var(--accio-red) !important; }
.sub-single .catArea .space-design    { background-color: var(--accio-sky) !important; }
.sub-single .catArea .signage         { background-color: var(--accio-navy) !important; }
.sub-single .catArea {
  align-items: center;
  gap: 1.2rem;
}
.sub-single__btn-group .btn.-color {
  display: inline-block;
  width: auto;
  min-width: 24rem;
  padding: 1.6rem 4rem;
  border-radius: 50px;
  background: var(--accio-navy);
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
  overflow: visible;
}
.sub-single__btn-group .btn.-color::before,
.sub-single__btn-group .btn.-color::after {
  display: none;
}
.sub-single__btn-group .btn.-color:hover {
  background: var(--accio-blue);
}

/* --- お知らせのカテゴリタグ（トップ）：ピル型 --- */
.home-news__category {
  border-radius: 999px;
}

/* --- トップ：リンクカード（会社概要／採用情報）の文字を読みやすく（下側にグラデ） --- */
.company-links .service_menu_item__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(20, 50, 92, 0.65) 100%);
  pointer-events: none;
}
.company-links .service_menu_item__img {
  position: relative;
}

/* --- トップ About：巨大英字が写真に大きく重ならないよう、少し小さく・重なりを浅く --- */
.p-about .en {
  font-size: 8vw;
  margin-bottom: -3vw;
}
@media screen and (max-width: 767px) {
  .p-about .en {
    font-size: 14vw;
    margin-bottom: 2vw;
  }
}

/* --- 実績カテゴリタグ：外側の枠線・白余白をやめ、色つきピル1つにする（一覧・トップ・詳細で共通） --- */
.sub-archive__category,
.sub-single .catArea .sub-archive__category {
  border: none;
  padding: 0;
  min-width: 0;
  background: transparent;
  display: inline-flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.sub-archive__category span,
.home-works__category span,
.sub-single .catArea .sub-archive__category span {
  display: inline-block;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.35em 1.3em;
  font-size: 1.2rem;
  line-height: 1.4;
  font-weight: 500;
}
.home-works__category {
  border: none;
  padding: 0;
}

/* --- トップ事業カード：画像の高さを抑えてスクロール量を減らす --- */
.p-service-contents__box--02 .boxItem .imageArea img {
  height: 42rem;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .p-service-contents__box--02 .boxItem .imageArea img {
    height: 26rem;
  }
}

/* --- 実績紹介 一覧カード：シャドウなし（フラットに） --- */
.sub-archive__link,
.sub-archive__link:hover,
.c-card,
.c-card_link {
  box-shadow: none !important;
}


/* --- SP 下部固定バー：フッターが隠れないよう余白を確保、仮番号の注記は小さく --- */
@media screen and (max-width: 767px) {
  .footer {
    padding-bottom: 7rem;
  }
  .sp_cta a {
    font-size: 14px;
    padding-left: 44px;
    padding-right: 6px;
    white-space: nowrap;
  }
  .sp_cta a::before {
    left: 1.6rem;
  }
  .sp_cta__note {
    font-size: 10px;
    margin-left: 2px;
  }
}

/* --- SP 調整：CTAバナー画像・事業カードの画像高さ・フッターCTAの文字 --- */
@media screen and (max-width: 767px) {
  .bnr img {
    width: 100%;
    height: auto;
    border-radius: 12px;
  }
  .p-service-contents__box--02 .boxItem .imageArea img {
    height: 40rem;
  }
  .footer_top .mail_text .text02 {
    font-size: 5.4vw;
    line-height: 1.5;
  }
  .footer_top .mail_text .text02 span {
    font-size: 8vw;
  }
}

/* --- 会社概要：署名を1行で --- */
.greeting-sign {
  white-space: nowrap;
  font-size: clamp(12px, 3.6vw, 16px);
}
