/* ============================================================
   SEMCO Theme - Main CSS
   globals.css (Tailwind) → Pure CSS 変換
   ============================================================ */

/* ─── CSS Variables ────────────────────────────────────────── */
:root {
  /* Brand colors */
  --color-primary:        #023A94;
  --color-primary-light:  #70A1D8;
  --color-teal:           #7DA4AF;
  --color-teal-light:     #8BBCC9;
  --color-bg:             #F5F8F9;
  --color-bg-white:       #FFFFFF;
  --color-text:           #000000;
  --color-text-muted:     #636363;
  --color-border:         #BCBCBC;
  --color-error:          #E83819;
  --color-footer-bg:      #023A94;

  /* Typography */
  --font-sans:       'Noto Sans JP', 'Hiragino Sans', 'Meiryo', sans-serif;
  --font-display:    'Jost', 'Inter', Arial, sans-serif;

  /* Spacing */
  --container-max:   1600px;
  --container-pad-sm: 20px;
  --container-pad-md: 40px;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   500ms ease;
}

/* ─── Reset / Base ──────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: -0.02em;
  /* font-feature-settings: "palt" 1; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

/* グローバルノイズテクスチャ */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/noise-texture.svg');
  background-size: 200px 200px;
  background-repeat: repeat;
  opacity: 0.25;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 9999;
}

img, video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}

/* ─── Typography Scale ──────────────────────────────────────── */
.textstyle1 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 180%;
  letter-spacing: 0.05em;
}

.textstyle2 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 180%;
  letter-spacing: 0.05em;
}

/* ─── Layout Utilities ──────────────────────────────────────── */

/* responsive-container: それ以外のページ用（モバイル20px、デスクトップ40px の左右余白） */
.responsive-container {
  padding-left:  var(--container-pad-sm);
  padding-right: var(--container-pad-sm);
}

@media (min-width: 768px) {
  .responsive-container {
    padding-left: 147px;
    padding-right: var(--container-pad-md);
  }
}

/* responsive-container: フロントページ用 */
.home .responsive-container {
  padding-left:  var(--container-pad-sm);
  padding-right: var(--container-pad-sm);
}

@media (min-width: 768px) {
  .home .responsive-container {
    padding-left:  var(--container-pad-md);
    padding-right: var(--container-pad-md);
  }
}

/* responsive-container: ヘッダー用 */
.site-header .responsive-container {
  padding-left:  var(--container-pad-sm);
  padding-right: var(--container-pad-sm);
}

@media (min-width: 768px) {
  .site-header .responsive-container {
    padding-left:  var(--container-pad-md);
    padding-right: var(--container-pad-md);
  }
}

/* responsive-container: ソリューション一覧ページ専用 */
.solution-list-section.responsive-container {
  padding-left:  var(--container-pad-sm);
  padding-right: var(--container-pad-sm);
}

@media (min-width: 768px) {
  .solution-list-section.responsive-container {
    padding-left: 345px;
    padding-right: var(--container-pad-md);
  }
}

/* responsive-container: solution-products-section 専用 */
.solution-products-section .responsive-container {
  padding-left:  var(--container-pad-sm);
  padding-right: var(--container-pad-sm);
}

@media (min-width: 768px) {
  .solution-products-section .responsive-container {
    padding-left:  40px; /* PC: 左パディング（手動調整はここを変更） */
    padding-right: var(--container-pad-md); /* PC: 右パディング */
  }
}

/* responsive-container: ソリューション個別ページ用 */
/* .single-solution .responsive-container {
  padding-left:  var(--container-pad-sm);
  padding-right: var(--container-pad-sm);
}

@media (min-width: 768px) {
  .single-solution .responsive-container {
    padding-left:  var(--container-pad-md);
    padding-right: var(--container-pad-md);
  }
} */

/* 最大幅コンテナ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left:  auto;
  margin-right: auto;
  padding-left:  var(--container-pad-sm);
  padding-right: var(--container-pad-sm);
}

@media (min-width: 768px) {
  .container {
    padding-left:  var(--container-pad-md);
    padding-right: var(--container-pad-md);
  }
}

/* スクロールバー非表示 */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width:    none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ─── Display Utilities ─────────────────────────────────────── */
.hidden         { display: none !important; }
.block          { display: block; }
.flex           { display: flex; }
.grid           { display: grid; }
.inline-flex    { display: inline-flex; }

/* レスポンシブ表示制御 */
.hide-on-mobile  { display: none; }
.hide-on-desktop { display: block; }

@media (min-width: 768px) {
  .hide-on-mobile  { display: block; }
  .hide-on-desktop { display: none; }
}

/* Tailwind互換マージンユーティリティ（CTA section mobile用） */
.mt-50 { margin-top: 200px; }
.mt-60 { margin-top: 240px; }

/* ─── Section Common Styles ─────────────────────────────────── */
.section-subtitle {
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

@media (min-width: 1024px) {
  .section-subtitle { font-size: 14px; }
}

.section-title {
  font-family: var(--font-display);
  font-size:   40px;
  font-weight: 300;
  color:       var(--color-primary);
  line-height: 1.1;
}

@media (min-width: 1024px) {
  .section-title { font-size: 50px; }
}

/* ─── Outline Button ────────────────────────────────────────── */
.btn-outline {
  display:         inline-flex;
  align-items:     center;
  justify-content: space-between;
  width:           193px;
  border-radius:   9999px;
  font-family:     var(--font-display);
  font-size:       16px;
  font-weight:     400;
  padding:         12px 15px;
  transition:      all var(--transition-base);
  text-decoration: none;
  cursor:          pointer;
  border:          1px solid;
  white-space:     nowrap;
}

.btn-outline:hover {
  transform: scale(1.05);
}

.btn-outline__arrow {
  flex-shrink: 0;
  transition:  transform var(--transition-base);
}

.btn-outline:hover .btn-outline__arrow {
  transform: translateX(4px);
}

/* Variants */
.btn-outline--default {
  border-color: #333;
  color:        #333;
}
.btn-outline--default:hover {
  background-color: #333;
  color: #fff;
}

.btn-outline--dark {
  border-color: #000;
  color:        #000;
}
.btn-outline--dark:hover {
  background-color: #000;
  color: #fff;
}

.btn-outline--blue {
  border-color: var(--color-primary);
  color:        var(--color-primary);
}
.btn-outline--blue:hover {
  background-color: var(--color-primary);
  color: #fff;
}

.btn-outline--white {
  border-color: #fff;
  color:        #fff;
}
.btn-outline--white:hover {
  background-color: #fff;
  color: #333;
}

.btn-outline--solid-white {
  background-color: #fff;
  color:            var(--color-primary);
  border:           none;
  box-shadow:       0 4px 16px rgba(0,0,0,0.15);
}
.btn-outline--solid-white:hover {
  background-color: rgba(255,255,255,0.9);
  box-shadow:       0 8px 24px rgba(0,0,0,0.2);
}

/* Size variants */
.btn-outline--sm  { padding: 13px 16px 13px 21px; font-size: 14px; width: auto; gap: 67px; letter-spacing: 0.05em;}
.btn-outline--md  { padding: 12px 24px; font-size: 16px; }
.btn-outline--lg  { padding: 16px 32px; font-size: 18px; }
.btn-outline--xl  { padding: 16px 32px; font-size: 16px; width: 240px; }

/* ─── Page Hero ─────────────────────────────────────────────── */
/* デフォルト: F5F8F9 背景 + #023A94 テキスト + 下ボーダー
   (Next.js PageHero.tsx の backgroundColor デフォルト値に合わせる)
   個別ページで inline style 上書き可能                         */
.page-hero {
  background-color: var(--color-bg);      /* #F5F8F9 */
  padding-top:    156px;
  padding-bottom:  30px;
}

@media (min-width: 1024px) {
  .page-hero {
    padding-top:    196px;
    padding-bottom:  60px;
  }
}

.page-hero__inner {
  padding-left:  var(--container-pad-sm);
  padding-right: var(--container-pad-sm);
}

@media (min-width: 768px) {
  .page-hero__inner {
    padding-left:  var(--container-pad-md);
    padding-right: var(--container-pad-md);
  }
}

.page-hero__subtitle {
  color:          var(--color-primary);   /* #023A94 */
  font-size:      13px;
  font-weight:    400;
  margin-bottom:  4px;
  letter-spacing: 0.05em;
}

@media (min-width: 1024px) {
  .page-hero__subtitle { font-size: 14px; margin-bottom:  8px;}
}

.page-hero__title {
  font-family:    var(--font-display);
  font-size:      40px;
  font-weight:    300;
  color:          var(--color-primary);   /* #023A94 */
  line-height:    1.22;
}

@media (min-width: 1024px) {
  .page-hero__title { font-size: 80px; }
}

.page-hero__divider {
  width:      100%;
  height:     1px;
  background: #fff;
  margin-top: 24px;
}

@media (min-width: 1024px) {
  .page-hero__divider {
    width:      100%;
    height:     1px;
    background: #fff;
    margin-top: 18px;
  }
}

/* ─── Site Layout ───────────────────────────────────────────── */
.site-wrapper {
  min-height: 100vh;
  display:    flex;
  flex-direction: column;
}

.site-main {
  flex: 1;
}

/* ─── Scroll to Top ─────────────────────────────────────────── */
.scroll-to-top {
  display: none !important;
}

.scroll-to-top__btn {
  width:           48px;
  height:          48px;
  border-radius:   50%;
  background:      conic-gradient(var(--color-primary) var(--scroll-percent, 0%), transparent 0%);
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 2px 8px rgba(0,0,0,0.2);
  color:           #fff;
  font-size:       20px;
  transition:      opacity var(--transition-base);
}

/* ─── Noise overlay canvas ──────────────────────────────────── */
#noise-canvas {
  position:       fixed;
  top:            0;
  left:           0;
  width:          100%;
  height:         100%;
  pointer-events: none;
  z-index:        9998;
  opacity:        0.1;
}

/* ─── 英語ページ: 重複する小見出しを非表示（スペース維持） ──── */
.lang-en .section-subtitle,
.lang-en .page-hero__subtitle,
.lang-en .cta-section__subtitle,
.lang-en .solution-timeline-label,
.lang-en .solution-card__subtitle {
  visibility: hidden;
}

/* ボーダー付き inline-flex 見出し内のサブテキスト:
   visibility:hidden だと親の幅にサブ分が残りボーダーが伸びるため、
   幅を潰して完全に除外する */
.lang-en .about-underlined-title__sub,
.lang-en .philosophy-underlined-sub {
  width: 0;
  overflow: hidden;
  visibility: hidden;
}
.lang-en .about-underlined-title,
.lang-en .philosophy-underlined-title {
  gap: 0 !important;
}

/* info-sec-heading: __ja を潰し、線幅を見出しテキストに合わせる */
.lang-en .info-sec-heading__ja {
  width: 0;
  overflow: hidden;
  visibility: hidden;
}
.lang-en .info-sec-heading__row {
  gap: 0;
}
.lang-en .info-sec-heading {
  display: inline-block;
}
.lang-en .info-sec-heading__line {
  width: 100% !important;
}