/* ========================================
   Codify, Inc. – Corporate site styles
   ======================================== */

/* ========================================
   CSS変数定義（デザイントークン）
   ======================================== */
:root{
  /* ブランドカラー */
  --brand:#055392;
  --brand-600:#054679;
  --brand-700:#033e6c;
  --brand-100:#e7f0f9;
  /* テキストカラー */
  --ink:#0b1520;
  --ink-2:#253040;
  --muted:#6b7a90;
  /* 背景カラー */
  --bg:#ffffff;
  --bg-alt:#f7f9fc;
  /* その他 */
  --border:#e3e8ef;
  --radius:14px;
  --shadow:0 2px 6px rgba(0,0,0,0.06), 0 10px 24px rgba(0,0,0,0.06);
}

/* ========================================
   リセットと基本設定
   ======================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Hiragino Sans', 'ヒラギノ角ゴ ProN', 'Noto Sans JP', 'Yu Gothic', '游ゴシック', Meiryo, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto;}

/* ========================================
   レイアウトユーティリティ
   ======================================== */
/* コンテナ：最大幅を設定し中央配置 */
.inner{max-width:1120px; margin:0 auto; padding:0 20px;}
/* 狭いコンテナ：ページコンテンツ用（ethics.html, privacy.html, about.html） */
.narrow{max-width:840px;}
/* プロジェクト用スタイル：見出しと注釈（ethics.html, privacy.html, about.htmlで使用） */
.prose h1,.prose h2,.prose h3{line-height:1.35}
/* about.htmlのh2「アクセス」の下の余白を調整 */
.prose h2{margin-bottom:0.5rem;}
.prose .note{color:var(--muted); font-size:.95rem; border-left:4px solid var(--border); padding-left:.8rem;}
/* privacy.html、ethics.html用：コンテンツの最後に余白を追加 */
.prose{padding-bottom:48px;}

/* ========================================
   ヘッダー
   ======================================== */
.site-header{
  position:sticky; top:0; z-index:10; background:rgba(255,255,255,.8); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid rgba(0,0,0,.04);
  width:100%;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px; max-width:none; padding:0 20px;}
.brand-logo{display:flex; align-items:center;}
.brand-logo img{max-height:48px; width:auto; height:auto; vertical-align:middle;}
.site-nav{display:flex; align-items:center;}
.site-nav a{margin-left:18px; text-decoration:none; color:var(--ink); font-weight:600;}
.site-nav a:hover{color:var(--brand)}
/* ヘッダーメニューの各アイテムの左に「▶」を追加（ボタン以外） */
.site-nav a:not(.btn)::before{content:'\25B6'; margin-right:6px; color:var(--ink); transform:scale(0.33); display:inline-block;}
.site-nav a:not(.btn):hover::before{color:var(--brand);}
/* ヘッダー内のプライマリボタンは白色テキスト */
.site-nav .btn-primary{color:#fff !important;}
.nav-toggle{display:none;}

/* ========================================
   ボタン
   ======================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1.1rem; border-radius:999px; font-weight:700; border:1px solid var(--border); background:#fff; color:var(--ink);
  text-decoration:none; box-shadow:var(--shadow); transition: all .2s ease;
}
.btn:hover{transform: translateY(-1px);}
/* プライマリボタン：ブランドカラー背景 */
.btn-primary{background:var(--brand); color:#fff; border-color:transparent;}
.btn-primary:hover{background:var(--brand-600);}
/* ゴーストボタン：透明背景、ブランドカラー枠線 */
.btn-ghost{background:transparent; border-color:var(--brand); color:var(--brand);}
.btn-ghost:hover{background:var(--brand-100);}

/* ========================================
   スキップリンク（アクセシビリティ）
   ======================================== */
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip-link:focus{position:static; width:auto; height:auto; padding:.5rem; background:#000; color:#fff;}

/* ========================================
   ヒーローセクション（トップ）
   ======================================== */
.hero{background:linear-gradient(180deg,#ffffff 0%, #f4f8fc 100%); border-bottom:1px solid var(--border);}
/* #topに背景画像をうっすらと表示 */
#top{position:relative;}
#top::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-image:url('../img/01.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; filter:saturate(0.4) brightness(0.9) contrast(1.1); opacity:0.3; z-index:0;}
#top .hero-inner{position:relative; z-index:1;}
.hero-inner{padding:84px 20px;}
.hero .eyebrow{letter-spacing:.1em; text-transform:uppercase; color:var(--brand); font-weight:800;}
.hero h1{font-size: clamp(28px, 4vw, 48px); margin:.3rem 0;}
.hero .lead{font-size: clamp(16px, 2.1vw, 20px); color:var(--ink-2);}
.hero-cta{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap;}

/* ========================================
   セクション共通スタイル
   ======================================== */
.section{padding:72px 0;}
/* 交互の背景色（縞模様） */
.section.alt{background:var(--bg-alt);}
.section-title{font-size: clamp(22px, 2.6vw, 32px); margin:0 0 16px;}

/* ========================================
   カードティッカーアニメーション
   ======================================== */
/* コンテナ：overflow:hiddenでカードの切れを防止
   margin-left:-20px, margin-right:-20px で .inner の padding を相殺
   padding-left:0 で左側の余白をなくす
   padding-right:400px で右側のカードが切れないように余白を確保 */
.cards-ticker{overflow:hidden; margin-top:24px; position:relative; margin-left:-20px; margin-right:-20px; padding-left:0; padding-right:400px;}
/* トラック：アニメーション対象要素 */
.cards-track{display:flex; gap:20px; margin-left:0;}
/* カードセット：複数のカードを含む */
.cards{display:flex; gap:20px; flex-shrink:0;}
/* カード：個々のカード要素 */
.cards article{min-width:320px; max-width:360px; flex:1;}
.card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); height:100%;}
.card h3{margin-top:.2rem; margin-bottom:.4rem;}

/* ティッカーアニメーション：カード1枚分ずつ移動→2秒停止の自然な無限ループ
   カード幅と移動距離はJavaScriptで動的に計算され、CSS変数として設定される */
/* デフォルト値（JavaScriptが読み込まれるまでのフォールバック） */
#services{--card-step:340px; --set-width:1700px;}
#careers{--card-step:340px; --set-width:1360px;}
/* サービスセクション：5枚のカードを15秒で1サイクル */
#services .cards-track{animation:ticker-services 15s infinite; animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}
@keyframes ticker-services{
  /* カード1枚目：移動→停止 */
  0%{transform:translateX(0);}
  6.67%{transform:translateX(calc(var(--card-step) * -1));}
  20%{transform:translateX(calc(var(--card-step) * -1));}
  /* カード2枚目：移動→停止 */
  26.67%{transform:translateX(calc(var(--card-step) * -2));}
  40%{transform:translateX(calc(var(--card-step) * -2));}
  /* カード3枚目：移動→停止 */
  46.67%{transform:translateX(calc(var(--card-step) * -3));}
  60%{transform:translateX(calc(var(--card-step) * -3));}
  /* カード4枚目：移動→停止 */
  66.67%{transform:translateX(calc(var(--card-step) * -4));}
  80%{transform:translateX(calc(var(--card-step) * -4));}
  /* カード5枚目：移動→1セット分移動してループ */
  86.67%{transform:translateX(calc(var(--set-width) * -1));}
  100%{transform:translateX(calc(var(--set-width) * -1));}
}
/* 採用情報セクション：4枚のカードを12秒で1サイクル */
#careers .cards-track{animation:ticker-careers 12s infinite; animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}
@keyframes ticker-careers{
  /* カード1枚目：移動→停止 */
  0%{transform:translateX(0);}
  8.33%{transform:translateX(calc(var(--card-step) * -1));}
  25%{transform:translateX(calc(var(--card-step) * -1));}
  /* カード2枚目：移動→停止 */
  33.33%{transform:translateX(calc(var(--card-step) * -2));}
  50%{transform:translateX(calc(var(--card-step) * -2));}
  /* カード3枚目：移動→停止 */
  58.33%{transform:translateX(calc(var(--card-step) * -3));}
  75%{transform:translateX(calc(var(--card-step) * -3));}
  /* カード4枚目：移動→1セット分移動してループ */
  83.33%{transform:translateX(calc(var(--set-width) * -1));}
  100%{transform:translateX(calc(var(--set-width) * -1));}
}

/* ========================================
   タグ（カード内の技術タグ）
   ======================================== */
.tags{display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:12px 0 0; list-style:none;}
.tags li{border:1px solid var(--border); border-radius:999px; padding:.3rem .6rem; font-size:.9rem; color:var(--muted);}

/* ========================================
   グリッドレイアウト
   ======================================== */
.grid-2{display:grid; grid-template-columns: repeat(2, 1fr); gap:24px; align-items:start;}
/* バリューリスト（企業理念セクション） */
.values{margin: 4px 0 0 0;}
.values li{margin:.4rem 0;}

/* ========================================
   会社概要ページ（about.html）専用スタイル
   ======================================== */
.about-grid-single{display:block; max-width:100%;}
.about-copy{min-width:0; max-width:100%;}
.about-intro{line-height:1.8; font-size:1.05rem; max-width:none; width:100%;}
.about-art img{max-width:120px; max-height:100px; width:auto; height:auto;}
/* 会社情報テーブル */
.info{width:100%; border-collapse:collapse; font-size:.98rem; table-layout:fixed; margin-bottom:48px;}
.info th,.info td{border:1px solid var(--border); padding:.55rem .6rem; text-align:left;}
.info th{white-space:nowrap; background:var(--bg-alt); width:30%;}
.info td{line-height:1.5; word-break:keep-all; width:70%;}
/* アクセス情報 */
.access-info{margin-top:48px;}
.access-text{margin-bottom:24px;}
.access-text h3{margin-top:0; margin-bottom:12px; font-size:1.2rem;}
.access-text ul{list-style:none; padding-left:0;}
.access-text li{margin:.5rem 0; padding-left:1.5em; position:relative;}
.access-text li:before{content:"🚇"; position:absolute; left:0;}
.access-map{margin-top:24px; margin-bottom:48px;}
.access-map iframe{width:100%; border-radius:var(--radius); box-shadow:var(--shadow);}
.map-note{font-size:.85rem; color:var(--muted); margin-top:8px; text-align:center;}

/* ========================================
   テキストユーティリティ
   ======================================== */
.bigger{font-size:1.15rem}
.more{margin-top:12px; display:flex; gap:12px; flex-wrap:wrap;}

/* ========================================
   お問い合わせフォーム
   ======================================== */
.contact-form{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);}
.form-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap:16px;}
.form-grid label{display:flex; flex-direction:column; gap:6px; font-weight:600;}
/* 全幅ラベル（テキストエリアなど） */
.form-grid label.full{grid-column:1/-1;}
input, select, textarea{
  width:100%; border:1px solid var(--border); border-radius:10px; padding:.75rem .9rem; font:inherit; background:#fff; color:var(--ink);
}
textarea{resize:vertical;}
.form-actions{margin-top:12px; display:flex; justify-content:flex-end;}

/* ========================================
   フッター
   ======================================== */
.site-footer{border-top:1px solid var(--border); background:#fff;}
.footer-inner{display:flex; align-items:center; justify-content:center; padding-top:18px; padding-bottom:24px; max-width:none; padding-left:20px; padding-right:20px;}
.footer-nav{display:flex; align-items:center; justify-content:center;}
.footer-nav a{margin-left:14px; color:var(--muted); text-decoration:none;}
.footer-nav a:hover{color:var(--brand);}
/* フッターメニューの各アイテムの左に「▶」を追加 */
.footer-nav a::before{content:'\25B6'; margin-right:6px; color:var(--muted); transform:scale(0.33); display:inline-block;}
.footer-nav a:hover::before{color:var(--brand);}
.copyright{font-size:.9rem; color:var(--brand); padding-bottom:22px; margin-top:12px; text-align:center; display:flex; align-items:center; justify-content:center; gap:4px;}
.copyright-icon{display:inline-block; width:14px; height:14px; vertical-align:baseline;}

/* ========================================
   ページトップへ戻るボタン
   ======================================== */
.back-to-top{
  position: fixed; right: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow); cursor: pointer; display:none;
}
.back-to-top.show{display:block;}

/* ========================================
   レスポンシブデザイン
   ======================================== */
/* タブレット以下（920px以下） */
@media (max-width: 920px){
  .cards article{min-width:280px;}
  .grid-2{grid-template-columns:1fr;}
}
/* 小型モバイル（640px以下） */
@media (max-width: 640px){
  .cards article{min-width:260px;}
}
/* モバイル（720px以下） */
@media (max-width: 720px){
  .hero-inner{padding:64px 20px;}
  .site-nav{display:none;}
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); background:#fff; padding:.4rem .7rem; border-radius:10px;}
  .form-grid{grid-template-columns:1fr;}
  .footer-inner{flex-direction:column; gap:8px; align-items:flex-end;}
  /* モバイルではアニメーションを無効化し、スクロール可能にする */
  .cards-ticker{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .cards-track{animation:none;}
  .cards-track:hover{animation:none;}
}

/* ========================================
   アクセシビリティ：フォーカス表示
   ======================================== */
a, button, input, select, textarea{outline-color: var(--brand); outline-offset: 2px;}

/* ========================================
   お問い合わせフォーム送信結果モーダル
   ======================================== */
.contact-modal{
  position:fixed; top:0; left:0; right:0; bottom:0;
  z-index:9999; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity 0.3s ease, visibility 0.3s ease;
  pointer-events:none;
}
.contact-modal.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
}
.contact-modal-overlay{
  position:absolute; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.6); backdrop-filter:blur(2px);
}
.contact-modal-content{
  position:relative; background:var(--bg); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:32px; max-width:480px; width:90%;
  max-height:90vh; overflow-y:auto; transform:scale(0.95);
  transition:transform 0.3s ease;
}
.contact-modal.is-open .contact-modal-content{
  transform:scale(1);
}
.contact-modal-close{
  position:absolute; top:16px; right:16px; width:32px; height:32px;
  border:none; background:transparent; font-size:24px; line-height:1;
  color:var(--muted); cursor:pointer; padding:0; display:flex;
  align-items:center; justify-content:center; transition:color 0.2s;
}
.contact-modal-close:hover{color:var(--ink);}
.contact-modal-title{
  margin:0 0 16px 0; font-size:24px; font-weight:600; color:var(--ink);
}
.contact-modal.success .contact-modal-title{color:#059669;}
.contact-modal.error .contact-modal-title{color:#dc2626;}
.contact-modal-message{
  margin:0 0 24px 0; color:var(--ink-2); line-height:1.7;
}
.contact-modal-button{
  width:100%; margin:0;
}
@media (max-width:768px){
  .contact-modal-content{padding:24px; width:95%;}
  .contact-modal-title{font-size:20px;}
}