@charset "UTF-8";

/* ============================================
   Imports
============================================ */
@import url("./layout/header.css");
@import url("./layout/site-footer.css");

@import url("./sections/home/hero.css");
@import url("./sections/feature-hero.css");
@import url("./sections/brand-message-section.css");
@import url("./sections/dx-support-service.css");
@import url("./sections/service-header.css");
@import url("./sections/customer-interview-container.css");
@import url("./sections/interview-section.css");

@import url("./sections/banner-hero.css");

@import url("./pages/about-page.css");
@import url("./pages/about-section-page.css");
@import url("./pages/philosophy-page.css");
@import url("./pages/group-company-page.css");
@import url("./pages/group-company-single.css");
/* 多分不要 */
@import url("./pages/locations-page.css");
@import url("./pages/history-page.css");
@import url("./pages/dx-promotion-page.css");
@import url("./pages/service-group-overview-page.css");
@import url("./pages/customer-voice-page.css");
@import url("./pages/recruitment-mid-career-page.css");
@import url("./pages/error-404.css");
@import url("./pages/contact-page.css");
@import url("./pages/contact-thanks.css");
@import url("./pages/privacy-policy-page.css");

@import url("./pages/single-post-page.css");

@import url("./pages/single-staff-page.css");
@import url("./pages/single-recruit-page.css");

@import url("./pages/single-case-study-page.css");

@import url("./pages/news-page.css");
@import url("./pages/staff-interview-page.css");

@import url("./parts/business-category-nav.css");
@import url("./parts/service-card.css");
@import url("./parts/staff-interview-cards.css");
@import url("./parts/office-tour-card.css");

@import url("./pages/office-tour-page--en.css");

@import url("./parts/circle-arrow-link.css");

@import url("./sections/feature-overview.css");
@import url("./sections/office-tour-hero.css");
@import url("./sections/office-tour-detail.css");
@import url("./sections/office-tour-cards.css");
@import url("./sections/office-tour-showroom.css");

@import url("./pages/recruitment-mid-career-news.css");

@import url("./sections/images-slider-section.css");
@import url("./sections/about-us-section.css");
@import url("./sections/services-about-section.css");

@import url("./sections/customer-voices-section.css");

@import url("./sections/officers-message-section.css");
@import url("./sections/officers-grid-section.css");
/* 多分不要 */

@import url("./parts/global-expansion-links.css");

@import url("./pages/service-section-page.css");

/* ============================================
   Breakpoints

   【定義】
   SP : max-width: 599px   （〜599px）
   TB : 600px〜1199px
   PC : min-width: 1200px  （1200px〜）

   【書き方】
   PC のみ  : .component {}（メディアクエリなし・PC Firstで記述）
   SP + TB  : @media (max-width: 1199px) {}
   SP のみ  : @media (max-width: 599px) {}
   TB のみ  : @media (min-width: 600px) and (max-width: 1199px) {}
   TB + PC  : @media (min-width: 600px) {}

   【注意】
   既存コードには max-width: 768px / max-width: 1023px 等の
   旧境界値が多数混在している。
   新規追加・修正時は必ず上記定義に従うこと。
   旧境界値は Phase 2以降で順次統一する。

============================================ */

/* ============================================
   CSS Custom Properties
   ============================================ */

:root {
  /* Font：本文・UI用 */
  --font-base:
    "Noto Sans JP",
    "Helvetica Neue",
    Helvetica,
    Inter,
    sans-serif;

  /* Font：絶対フレーズ専用（「なくてはならない」存在へ）*/
  --font-serif:
    "Noto Serif JP",
    "Source Han Serif",
    serif;

  /* Colors */
  --mega-color-primary: #1e438c;
  --mega-color-secondary: #1260b1;
  --mega-color-text: #292929;
  --mega-color-white: #ffffff;
  --mega-color-gray: #c9c9cb;
  --mega-color-light-gray: #f5f5f5;

  /* Gradients */
  --mega-gradient-primary: linear-gradient(90deg,
      var(--mega-color-primary) 0%,
      var(--mega-color-secondary) 100%);

  /* Spacing */
  --mega-space-xs: 8px;
  --mega-space-sm: 16px;
  --mega-space-md: 24px;
  --mega-space-lg: 40px;
  --mega-space-xl: 60px;
  --mega-space-2xl: 80px;

  /* Header */
  --mega-header-height-pc: 72px;
  --mega-header-height-sp: 72px;

  /* Button */
  --mega-btn-padding-y: 16px;
  --mega-btn-padding-x: 32px;
  --mega-btn-font-size: 14px;

  /* Section Padding */
  --mega-section-padding: clamp(40px, 4vw, 60px);
  --mega-section-padding-pt-pb: clamp(40px, 4vw, 60px);
  --mega-section-padding-pr-pl: clamp(40px, 4vw, 60px);

  /* Section banner-hero */
  --mega-hero-pt: clamp(120px, calc(6.4rem + 5.5vw), 208px);
  --mega-hero-pb: clamp(40px, calc(1.5rem + 5vw), 100px);
  --mega-hero-gap: clamp(32px, calc(1.65rem + 1.75vw), 60px);

  /* ============================================
     Area Colors（領域カラー）
     ブランディングガイド 1-3 カラーガイド／領域カラー に準拠
     
     変数名は「領域の実態」で命名。
     PHPクラス名（acf-helpers.php）と色名が一致しないものに注意。
     
     PHPクラス → 変数の対応
       is-blue   → --mega-area-blue-*    DXサポート
       is-green  → --mega-area-green-*   空間デザイン
       is-pink   → --mega-area-orange-*  採用支援     ※クラス名と色が不一致
       is-yellow → --mega-area-pink-*    クリエイティブ ※クラス名と色が不一致
       is-purple → --mega-area-navy-*    システム開発  ※クラス名と色が不一致
       is-orange → --mega-area-red-*     ソーシャル    ※クラス名と色が不一致
       is-gray   → --mega-area-sky-*     本部          ※クラス名と色が不一致
     
     各変数のサフィックス
       -dark : ラベル文字・アイコン・区切り線など小要素に使用
       -mid  : 補助アクセント・トーン違い
       -pale : 背景・淡い面
  ============================================ */

  /* Blue Area ／ DXサポート ／ PHPクラス: is-blue */
  --mega-area-blue-dark: #4d72af;
  --mega-area-blue-mid: #6f8fcc;
  --mega-area-blue-pale: #e3ecf9;


  /* Green Area ／ 空間デザイン ／ PHPクラス: is-green */
  --mega-area-green-dark: #9cb521;
  --mega-area-green-mid: #b7d27a;
  --mega-area-green-pale: #e8f2d4;


  /* Orange Area ／ 採用支援 ／ PHPクラス: is-pink ※名前不一致 */
  --mega-area-orange-dark: #fc7300;
  --mega-area-orange-mid: #ffb066;
  --mega-area-orange-pale: #ffe4c7;


  /* Pink Area ／ クリエイティブ ／ PHPクラス: is-yellow ※名前不一致 */
  --mega-area-pink-dark: #db6b97;
  --mega-area-pink-mid: #e6a8c0;
  --mega-area-pink-pale: #f7dce7;


  /* Navy Area ／ システム開発 ／ PHPクラス: is-purple ※名前不一致 */
  --mega-area-navy-dark: #2f4a63;
  --mega-area-navy-mid: #4a5f78;
  --mega-area-navy-pale: #e3e7eb;


  /* Red Area ／ ソーシャル ／ PHPクラス: is-orange ※名前不一致 */
  --mega-area-red-dark: #bd3121;
  --mega-area-red-mid: #e27a6a;
  --mega-area-red-pale: #f7d5cf;


  /* Sky Area ／ 本部 ／ PHPクラス: is-gray ※名前不一致 */
  --mega-area-sky-dark: #3a8fb7;
  --mega-area-sky-mid: #6bb0c9;
  --mega-area-sky-pale: #d2e9f2;

  /* ============================================
     Service Page Area Color Aliases
     サービスページの領域カラーエイリアス
     ページクラス名（service-layout.php の page_class）と変数名を対応させる
  ============================================ */
  --mega-service-dx-support: var(--mega-area-blue-mid);
  /* .dx-support         */
  --mega-service-space-design: var(--mega-area-green-mid);
  /* .space-design       */
  --mega-service-recruit: var(--mega-area-orange-mid);
  /* .recruit-support    */
  --mega-service-creative: var(--mega-area-pink-mid);
  /* .creative           */
  --mega-service-system: var(--mega-area-navy-mid);
  /* .system-development */
  --mega-service-social: var(--mega-area-red-mid);
  /* .social             */
  --mega-service-headquarters: var(--mega-area-sky-mid);
  /* .headquarters       */
}

/* ============================================
   common
   ============================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.6;
  color: var(--mega-color-text);
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font-family: inherit;
  color: inherit;
}

a {
  color: var(--mega-color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 24px;
  line-height: 1.2;
  font-weight: 700;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

p {
  margin: 0 0 16px;
}

/* 絶対フレーズが入る要素に適用 */
.absolute-phrase {
  font-family: var(--font-serif);
  font-weight: 400;
  /* Regular */
}

/* ============================================
   site-header
   @import url("./layout/header.css");
   ============================================ */

/* ============================================
   hero-section
   @import url("./sections/home/hero.css");
   ============================================ */

/* site-main */
.site-main {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 80px);
  background-color: #f2f4f8;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

@media (min-width: 768px) {
  .container {
    padding: 0 16px;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 0 16px;
  }
}

.page-header {
  display: flex;
  align-items: center;
  padding: var(--mega-section-padding);
}

.page-title {
  margin: 0;
}

.posts-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.post-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .post-item {
    flex-direction: row;
    gap: 24px;
  }
}

.post-thumbnail {
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .post-thumbnail {
    width: 300px;
  }
}

.post-thumbnail img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.post-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.services-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) {
  .services-grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px;
  }
}

@media (min-width: 1200px) {
  .services-grid {
    gap: 60px;
  }
}

@media (max-width: 640px) {
  .services-grid {
    gap: 16px;
  }
}

.entry-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.entry-content {
  display: flex;
  flex-direction: column;
}

.page-content {
  display: flex;
  flex-direction: column;
}

.section {
  display: flex;
  flex-direction: column;
  padding: var(--mega-section-padding);
}

@media (min-width: 768px) {
  .section {
    padding: var(--mega-section-padding);
  }
}

@media (max-width: 640px) {
  .section {
    padding: var(--mega-section-padding);
  }
}

.section-title {
  margin: 0 0 40px;
  font-size: 36px;
  font-weight: 700;
  text-align: center;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 28px;
    margin: 0 0 24px;
  }
}

@media (max-width: 640px) {
  .section-title {
    font-size: 24px;
    margin: 0 0 16px;
  }
}

.section-cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

@media (min-width: 768px) {
  .section-cta {
    margin-top: 24px;
  }
}

@media (max-width: 640px) {
  .section-cta {
    margin-top: 16px;
  }
}

@media (min-width: 768px) {
  .section-cta .button {
    padding: 10px 24px;
    font-size: 14px;
  }
}

@media (max-width: 640px) {
  .section-cta .button {
    padding: 8px 20px;
    font-size: 13px;
  }
}

.post-navigation {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .post-navigation {
    flex-direction: row;
    justify-content: space-between;
  }
}

.page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* /site-main */

/* ============================================
   Pages
   ============================================ */

/* ページヘッダー直下の余白（全ページ共通） */
.banner-hero+* {
  margin-top: var(--mega-hero-gap);
}

/* ============================================
   about-page
   @import url("./pages/about-page.css");
   ============================================ */

/* ============================================
   about-section-page
   
   ※ about-common
   
   @import url("./pages/about-section-page.css");
   ============================================ */

/* ============================================
   philosophy-page
   @import url("./pages/philosophy-page.css");
   ============================================ */

/* ========================================
   No Companies Message
======================================== */
.no-companies {
  text-align: center;
  padding: 60px 20px;
}

.no-companies p {
  font-size: 1.125rem;
  color: #666;
}

/* ========================================
   group-company-single
   多分不要
   @import url("./pages/group-company-single.css");
======================================== */

/* ============================================
   locations-page
   @import url("./pages/locations-page.css");
   ============================================ */

/* ============================================
   history-page
   @import url("./pages/history-page.css");
   ============================================ */

/* ============================================
   dx-promotion-page
   @import url("./pages/dx-promotion-page.css");
   ============================================ */

/* ===================================
   Section
     feature-hero
     office-tour-hero
   
   @import url("./sections/feature-hero.css");
   =================================== */

/* ===================================
   brand-message-section
   @import url("./sections/brand-message-section.css");
   =================================== */

/* ===================================
   Section
     dx-support-service
   @import url("./sections/dx-support-service.css");
   =================================== */

/* ===================================
   Section
     service-header
   @import url("./sections/service-header.css");
   =================================== */

/* ===================================
   Section interview-section
     customer-interview-container
     dx-support-customer-interview
   @import url("./sections/customer-interview-container.css");
   =================================== */

/* ===================================
   Section interview-section
     staff-container
     dx-support-staff
   @import url("./sections/interview-section.css");
   =================================== */

/* ===================================
   service-group-overview-page
   @import url("./pages/service-group-overview-page.css");
   =================================== */

/* ===================================
   Interview customer-voice-page
   @import url("./pages/customer-voice-page.css");
   =================================== */

/* ===================================
   Interview recruitment-mid-career-page
   @import url("./pages/recruitment-mid-career-page.css");
   =================================== */

/* ===================================
   Page error-404
   @import url("./pages/error-404.css");
   =================================== */

/* ===================================
   contact-page
   @import url("./pages/contact-page.css");
   =================================== */

/* ===================================
   contact-page
   @import url("./pages/contact-thanks.css");
   =================================== */

/* ===================================
   privacy-policy-page
   @import url("./pages/privacy-policy-page.css");
   =================================== */

/* ===================================
   single-post-page
   @import url("./pages/single-post-page.css");
   =================================== */

/* ===================================
   single-staff-page
   @import url("./pages/single-staff-page.css");
   =================================== */

/* ===================================
   single-recruit-page
   @import url("./pages/single-recruit-page.css");
   =================================== */

/* ===================================
   single-case-study-page
   @import url("./pages/single-case-study-page.css");
   =================================== */

/* ===================================
   site-footer
   @import url("./layout/site-footer.css");
   =================================== */


/* ===================================
   banner-hero
   @import url("./sections/banner-hero.css");
   =================================== */

/* ===================================
   news-page
   @import url("./pages/news-page.css");
   =================================== */

/* ===================================
   staff-interview-page 
   @import url("./pages/staff-interview-page.css");
   =================================== */

/* ===================================
   group-company-page
   @import url("./pages/group-company-page.css");
   =================================== */

/* ===================================
   Parts
     business-category-nav
   @import url("./parts/business-category-nav.css");
   =================================== */

/* ===================================
   Parts
     service-card
   @import url("./parts/service-card.css");
   =================================== */

/* ===================================
   Parts
     staff-interview-cards
   @import url("./parts/staff-interview-cards.css");
   =================================== */

/* ===================================
   Parts
     office-tour-card
   @import url("./parts/office-tour-card.css");
   =================================== */

/* ===================================
   Page En
     office-tour-page--en
   @import url("./pages/office-tour-page--en.css");
   =================================== */

/* ===================================
   Parts
     circle-arrow-link
   @import url("./parts/circle-arrow-link.css");
   =================================== */

/* ===================================
   Section
     feature-overview
   @import url("./sections/feature-overview.css");
   =================================== */

/* ===================================
   Section
     office-tour-hero
   @import url("./sections/office-tour-hero.css");
   =================================== */

/* ===================================
   Section
     office-tour-detail
   @import url("./sections/office-tour-detail.css");
   =================================== */

/* ===================================
   Section
     office-tour-cards
   @import url("./sections/office-tour-cards.css");
   =================================== */

/* ===================================
   Section
     office-tour-showroom
   @import url("./sections/office-tour-showroom.css");
   =================================== */

/* ===================================
   Pages
     recruitment-mid-career-news
   @import url("./pages/recruitment-mid-career-news.css");
   =================================== */

/* ===================================
   Section
     images-slider-section
   @import url("./sections/images-slider-section.css");
   =================================== */

/* ===================================
   Section
     about-section
   @import url("./sections/about-section.css");
   =================================== */

/* ===================================
   Section
     services-about-section
   @import url("./sections/services-about-section.css");
   =================================== */

/* ===================================
   Section
     customer-voices-section
   @import url("./sections/customer-voices-section.css");
   =================================== */

/* ===================================
   Section
     section.officers-message-section
   @import url("./sections/officers-message-section.css");
   =================================== */

/* ===================================
   Section
     officers-grid-section
   @import url("./sections/officers-grid-section.css");
   =================================== */

/* add */

/* ===================================
   Parts
     global-expansion-links
   @import url("./parts/global-expansion-links.css");
   =================================== */

/* ============================================
   Page
     service-section-page
   @import url("./pages/service-section-page.css");
   ============================================ */


/* dx */
.dx-challenge-section ul {
  margin-bottom: 1rem;
  margin-left: 1rem;
}

.dx-footerInner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.dx-footerInner .date {
  margin: 1rem 0;
}

/* ==========================================
   Columns Layout

   PC
   cols--2 : 2 columns
   cols--3 : 3 columns
   cols--4 : 4 columns
   cols--5 : 5 columns

   TB
   2/3/4 → 2 columns
   5     → 3 columns

   SP
   all → 1 column
========================================== */

/* check用 */
.cols-flex>*,
.cols-grid>* {
    /*background-color: antiquewhite;
    height: 100px;*/
}
/* /check用 */


/* ==========================================
   Columns Base
========================================== */

.cols-flex,
.cols-grid {
    --cols: 1;
    --gap: clamp(16px, 2vw, 40px);
}

.cols--2 {
    --cols: 2;
}

.cols--3 {
    --cols: 3;
}

.cols--4 {
    --cols: 4;
}

.cols--5 {
    --cols: 5;
}


/* ==========================================
   Columns Flex
========================================== */

.cols-flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--gap);
}

.cols-flex>* {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
}

/* TB */
@media (max-width: 1199px) {

    .cols-flex.cols--2,
    .cols-flex.cols--3,
    .cols-flex.cols--4 {
        --cols: 2;
    }

    .cols-flex.cols--5 {
        --cols: 3;
    }
}

/* SP */
@media (max-width: 599px) {

    .cols-flex.cols--2,
    .cols-flex.cols--3,
    .cols-flex.cols--4,
    .cols-flex.cols--5 {
        --cols: 1;
    }
}

/* ==========================================
   Columns Grid
========================================== */

.cols-grid {
    display: grid;
    gap: var(--gap);

    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}

/* TB */
@media (max-width: 1199px) {

    .cols-grid.cols--2,
    .cols-grid.cols--3,
    .cols-grid.cols--4 {
        --cols: 2;
    }

    .cols-grid.cols--5 {
        --cols: 3;
    }
}

/* SP */
@media (max-width: 599px) {

    .cols-grid.cols--2,
    .cols-grid.cols--3,
    .cols-grid.cols--4,
    .cols-grid.cols--5 {
        --cols: 1;
    }
}


/* brの処理－まとめ用 */
.br-tb-sp-only,
.hero-break--mobile {
  display: none;
}

@media (max-width: 1199px) {
  .br-tb-sp-only,
  .hero-break--mobile {
    display: block;
  }
}