/* =========================================================
   Breakpoints 設計ルール
   =========================================================

   ■ 基本ブレークポイント（サイト全体）
   -----------------------------------------
   - SP  : max-width: 900px
   - PC  : min-width: 901px

   → レイアウトの大枠（ナビ・ヘッダー・カラム構成など）は
     この 900 / 901 を基準に統一する


   ■ 補助ブレークポイント（局所使用）
   -----------------------------------------
   - max-width: 680px
     カードレイアウトの 2列 → 1列 切り替え用

   - min-width: 681px
     PC / Tablet 時のみ高さ揃え等を適用
     （1列表示時は自然高さを優先）


   ■ 方針
   -----------------------------------------
   - 原則：ブレークポイントは増やさない
   - 例外：カードUIなど「段組み調整」に限り 680px を使用
   - 新規追加時は、既存ルールに合わせること

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




/* =========================
   0) Tokens
   ========================= */

/* Font Awesome */
 @import url("https://use.fontawesome.com/releases/v7.1.0/css/all.css");

/* CSS変数（カスタムプロパティ） */
 :root {

  --header-h: 68px;		/* ←調整 */

  --container: 1200px;		/* ←max-width（ここを 1280px に変えるだけで全体が追従） */
  --gutter: 24px;		/* 左右余白 */

}


.clsRed {
  color: #e60012;
}

.clsMk4 {
  background-color: yellow;
  color: black;
}


.dvMemo {
  background-color:#ffff94;
  padding:1em;
  border-radius: 16px;
  font-size:80%;
}




/* ============================================================
   1) Base / Layout
   ============================================================ */

body {
  font-size: 1rem;		/* 標準本文 16px相当 */
  line-height: 1.7;		/* 読みやすく */
  margin: 0;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #111111;

  /* 画面高基準の縦並びレイアウト */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body { font-weight: 400; }   /* 本文 */
h1, h2 { font-weight: 600; } /* 見出し */
strong { font-weight: 700; } /* 強調 */

html{
  overflow-y: scroll;		/* 常に縦スクロール領域を確保 → 横ズレ防止 */
  scrollbar-gutter: stable;
  overflow-x: clip;		/* オーバーフロークリップ枠で切取 */
}

/* コンテンツ共通コンテナ */
.l-container{
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  /* padding-left: var(--gutter); */
  /* padding-right: var(--gutter); */
  /* border: solid 1px #cccccc; */
}
@media (max-width: 900px){
  .l-container{
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}


/* メインの最小高さ
@media (min-width: 901px){
  main {
    min-height:500px;
  }
}
*/

/* メインを伸びる領域にして、フッターを下端へ送る */
main{
  flex: 1 0 auto;				/* 本文領域を可変にして、内容が少ないページでもフッターを下へ送る */
  width: 100%;					/* 横幅は常に親幅いっぱい */
}

/* PC：本文が短すぎる場合の最低限の高さは維持 */
@media (min-width: 901px){
  main{
    min-height: 500px;
  }
}



/* 2) box-sizing を全体に */
*, *::before, *::after{
  box-sizing: border-box;
}


sup {
  font-size:70%;
}
sub {
  font-size:70%;
}

/* =========================================================
   Link（サイト共通）
   ========================================================= */

a{
  color: #0070c0;
  text-decoration: none;
  transition: color .15s ease, opacity .15s ease;
}

a:hover{
  text-decoration: underline;
  opacity: 0.85;
}

a:visited{
  /* 必要に応じて指定 */
}



/* 本文リンク（少し目立たせたい場合） */
.c-text-block a{
  text-decoration: underline;
}

a.a-link-arrow:after {
    font-family: "Font Awesome 7 Free";
    content: "\f105";
    font-weight: 700;
    margin-left: 0.5em;
    border:none; text-decoration:none;
    font-size: 70%;
}
a.a-link-pdf::after {
    font-family: "Font Awesome 7 Free";
    content: "\f1c1";
    font-weight: 700;
    margin-left: 0.5em;
    color: #b22222;
}
a.a-link-doc::after {
    font-family: "Font Awesome 7 Free";
    content: "\f1c2";
    font-weight: 700;
    margin-left: 0.5em;
    color: #185abd;
}

a.a-link-arrow::after,
a.a-link-pdf::after,
a.a-link-doc::after {
  display: inline-block;
  vertical-align: baseline;
}

/* 外部リンク */
a[rel~="external"]::after{
  font-family: "Font Awesome 7 Free";
  font-weight: 900;			/* solid は 900 */
  content: "\f08e";
  font-size: .8em;
  margin-left: 4px;
}

/* メール */
a.a-link-mail::after {
    font-family: "Font Awesome 7 Free";
    content: "\f0e0";
    font-weight: 700;
    margin-left: 0.5em;
}



/* ========================================
   Form reset（ブラウザ差異防止）
   ======================================== */

input,
textarea,
select,
button{
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input[type="submit"],
input[type="button"]{
  appearance: none;
}

input,
textarea{
  appearance: none;
  background: #fff;
}

textarea{
  resize: vertical;
}

input[type="checkbox"],
input[type="radio"]{
  appearance: auto;
}


/* ========================================
   テキストブロック（段落間を詰める）
======================================== */

.c-text-block--tight p{
  margin-bottom:0;
}
.c-text-block--tight p + p{
  margin-bottom:0;
  margin-top: 0.5em;		/* ここで行間調整 */
}






/* ============================================================
   2) Header (common)
   ============================================================ */

/* =========================
   Header layout (PC/SP)
   ========================= */

/* 共通：ヘッダー枠 */
.site-header{
  width: 100%;
  position: relative;
}

.site-header__inner{
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
/* 
.site-header__inner{
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}
 */


/* =========================
   2-1) Header (PC)
   ========================= */
@media (min-width: 901px){
  .site-header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 950;		/* ドロワー(910)より上に */
  }

  body{
    padding-top: calc(var(--header-h) + 16px);	/* header 下余白（16px） */
  }
}
@media (max-width: 900px){

  .site-header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 950;
  }

  body{
    padding-top: var(--header-h);
  }

  html.is-nav-open,
  body.is-nav-open{
    overflow: hidden;
  }

}

@media (min-width: 901px){
  .site-search{
    position: relative;
  }
  .site-search::after{
    content: "🔍";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .6;
    pointer-events: none;
  }
}

@media (min-width: 901px){
  /* 左のブランドが膨らみすぎないように上限を設定 */
  .site-header__brand{
    max-width: 320px;   /* ここはロゴサイズ次第で調整 */
    overflow: hidden;
  }

  /* 会社名が長い場合は1行省略（必要なら） */
  .site-header__company-name{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (min-width: 901px){

  .site-header__utils{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;   /* 8px → 4px */
  }

  .site-header__sitemap{ 
    font-size:60%;
    line-height: 1.2;   /* ←追加 */
    color: #111111; text-decoration: none;
  }

  /* 検索フォームは横並び維持 */
  .site-search{
    display: flex;
    align-items: center;
    gap: 8px;
  }

}





/* ============================================================
  3) Global Nav (common)
   ============================================================ */
/* =========================
   Header background gradient
   ========================= */
.site-header{
  background: linear-gradient(
    to bottom,
    #d6dce5 0%,
    #ffffff 100%
  );
}

.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;			  		/* 子要素同士の隙間を一律16px */

  /* 好みで調整 */
  /* padding: 12px 16px; */
  min-height: 64px;
}


/* PC：ヘッダー内側をブラウザ幅いっぱいに */
@media (min-width: 901px){
  .site-header__inner{
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* PC：ヘッダー内側を1200pxぴったりに（左右paddingなし） */
/* 
@media (min-width: 901px){
  .site-header__inner{
    padding-left: 0;
    padding-right: 0;
    /* もし padding: 12px 16px; があるなら → padding: 12px 0; に */
    padding-top: 12px;
    padding-bottom: 12px;
  }
}
 */

/* SP：左右余白はgutterで確保（はみ出し防止にも効く） */
@media (max-width: 900px){
  .site-header__inner{
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}

/* 左：ブランド（ロゴ＋会社名） */
.site-header__brand{
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  min-width: 180px; /* 会社名が長い時の保険 */
}

.site-header__logo{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.site-header__company{
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.site-header__company-name{
  font-size: 0.9em;
  font-weight: 500;
}

.site-header__company-sub{
  font-size: 0.9em;
  opacity: 0.75;
}

/* 中：ナビ領域（PCは横並びメニュー） */
.site-header__nav{
  /* border: solid 2px #f5f5f5; */
  flex: 1 1 auto;
	/* 
	flex-grow: 1;     	伸びる余地があるとき、伸びる比率 = 1
	flex-shrink: 1;		縮む必要があるとき、縮む比率 = 1
	flex-basis: auto;	基本サイズ（初期サイズ）は「width/heightの値」または「内容のサイズ」にする
	*/
  min-width: 0; /* 横幅が詰まっても崩れにくくする */
}
@media (min-width: 901px){
  .site-header__nav{
    display: flex;
    align-items: center;
  }

  .site-header__nav .g-nav{
    width: 100%;
  }
}


/* 右：ユーティリティ（サイトマップ＋検索＋SPボタン） */
.site-header__utils{
  display: flex;
  align-items: center;
  /* gap: 12px; */
  flex: 0 0 auto;
  justify-content: flex-end;
}

/* 検索フォーム（横並び） */
.site-search{
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-search__label{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.site-search__input{
  width: 10em;
  max-width: 16vw;   /* 22vw → 16vw */
  padding: 5px 8px;  /* 6px → 5px */
  font-size: 0.75rem; /* 少しコンパクト */
  border: 1px solid #ccc;
  border-radius: 999px; /* pill型 */
}


/* ========================================
   Header intermediate width adjustment
   会社名とメニューの重なり防止
======================================== */

/* 1100px以下：ブランド幅を少し締める */
/* 
@media (max-width: 1400px){
  .site-header__brand{
    max-width: 260px;
    min-width: 0;
  }

  .site-header__company-name{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
*/

/* 1200px以下：会社名を非表示にして重なり回避 */
@media (max-width: 1200px){
  .site-header__company-name{
    display: none;
  }
}




/* =========================
   Nav Toggle（common） / Header controls (SP)
   ========================= */

.nav-toggle{
  display: none; /* PCでは非表示 */
  position: relative;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(0,0,0,.22);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  flex: 0 0 auto;
}

.nav-toggle__bars{
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
  margin: 0 auto;
}

.nav-toggle__bar{
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: #0070C0; /* ブランドカラー青 */
  transition:
    transform .22s ease,
    opacity .18s ease,
    top .22s ease,
    background-color .22s ease;
}

.nav-toggle__bar:nth-child(1){ top: 0; }
.nav-toggle__bar:nth-child(2){ top: 7px; }
.nav-toggle__bar:nth-child(3){ top: 14px; }

/* 開いている時：× に変化 */
body.is-nav-open .nav-toggle{
  background: rgba(0,112,192,.08);
  border-color: rgba(0,112,192,.35);
}

body.is-nav-open .nav-toggle__bar:nth-child(1){
  top: 7px;
  transform: rotate(45deg);
}

body.is-nav-open .nav-toggle__bar:nth-child(2){
  opacity: 0;
}

body.is-nav-open .nav-toggle__bar:nth-child(3){
  top: 7px;
  transform: rotate(-45deg);
}

/* 2-2) SP時のみ表示 */
@media (max-width: 900px){

  .site-header__sitemap{ display:none; }
  .site-search{ display:none; }

  .nav-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
/* 2-3) SPヘッダーで右端に固定されるよう調整 */
@media (max-width: 900px){

  .site-header__inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .site-header__brand{
    flex: 1 1 auto;
    min-width: 0; /* 会社名が長くても右を押し出さない */
  }

  .site-header__company-name{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .site-header__utils{
    flex: 0 0 auto;
    margin-left: auto;
  }
}




/* =========================
   Nav: base spacing & readability
   ========================= */
.g-nav a{
  line-height: 1.4;
  border-radius: 6px;
}

.g-nav__link,
.g-nav__sub-link,
.g-nav__subsub-link{
  padding: 10px 8px; /* クリックしやすい */
}

/* =========================
   Arrows (▾ / ▶)
   ========================= */
/* 共通：子を持つ項目 */
.g-nav li.has-children > a{
  position: relative;
  padding-right: 32px; /* 矢印の分 */
}


/* 第1階層・第2階層（孫あり含む）：下向き（既定値） */
.g-nav li.has-children > a::after{
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  opacity: 0.7;
}

/* PC：第2階層で孫を持つものだけ ▶ */

/* =========================
   Hover / focus highlight
   ========================= */
.g-nav a:hover,
.g-nav a:focus-visible{
  background: rgba(0,0,0,.06);
  outline: none;
}

/* SP（黒背景想定）：hover色を反転寄りに */

/* =========================
   3-1) Global Nav (PC)
   ========================= */

@media (min-width: 901px){
  /* PCではSP用ドロワー指定を解除し、通常配置に戻す */
  .site-header__nav{
    position: static;
    height: auto;
    width: auto;
    transform: none;
    overflow: visible;
    padding: 0;
    background: transparent;
  }

  .nav-overlay{
    display: none;			/* オーバーレイ非表示 */
  }
}

@media (min-width: 901px){

  /* 1階層：横並び＋均等配分 */
  .g-nav__list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }

  .g-nav__item,
  .g-nav__sub-item{
    position: relative; /* サブメニュー絶対配置の基準 */
    /* background-color:#ffffff; */
  }

  /* ホームだけ固定幅 */
  .g-nav__list > .g-nav__item:first-child{
      /* flex-grow: 0	余白があっても広がらない */
      /* flex-shrink: 0	狭くなる時も縮まない */
      /* flex-basis: 44px	基本サイズは 44px */
    flex: 0 0 44px;
  }

  /* ホーム アイコンの表示位置調整 */
  .g-nav__list > .g-nav__item:first-child .fa-house{
    display: inline-block;
    transform: translateY(3px);
  }

  /* それ以外は均等幅 */
  .g-nav__list > .g-nav__item:not(:first-child){
    flex: 1 1 0;
    min-width: 0;
  }




  /* サブメニューは初期非表示 */
  .g-nav__sub,
  .g-nav__subsub{
    display: none;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    min-width: 220px;

    position: absolute;
    top: 100%;
    left: 0;

    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    z-index: 1000;
  }

  /* 3階層（孫）は「右に」出す */
  .g-nav__subsub{
    top: 0;
    left: 100%;
  }

  /* 表示トリガ：hover + focus-within（Tab操作） */
  .g-nav__item.has-children:hover > .g-nav__sub,
  .g-nav__item.has-children:focus-within > .g-nav__sub{
    display: block;
  }

  .g-nav__sub-item.has-children:hover > .g-nav__subsub,
  .g-nav__sub-item.has-children:focus-within > .g-nav__subsub{
    display: block;
  }

  /* リンクの最低限の見た目（必要なら後で調整） */
  .g-nav a{
    text-decoration: none;
    color: inherit;
    display: block;
    padding: 8px 4px;
    white-space: nowrap;
  }

  .g-nav__sub a,
  .g-nav__subsub a{
    padding: 10px 14px;
  }

  /* hover時の視認性（仮） */
  .g-nav__sub a:hover,
  .g-nav__subsub a:hover{
    background: rgba(0,0,0,.05);
  }





  /* 第1階層リンクを均等幅の中で中央配置 */
  .g-nav__list > .g-nav__item > .g-nav__link{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    text-align: center;
    white-space: nowrap;
  }

  /* ホームアイコンだけ余白を少し詰める */
  .g-nav__list > .g-nav__item:first-child > .g-nav__link{
    padding-left: 0;
    padding-right: 0;
  }




}

@media (min-width: 901px){
  .g-nav__link,
  .g-nav__sub-link,
  .g-nav__subsub-link{
    font-size: 0.9rem;
  }
}

@media (min-width: 901px){
  .g-nav__sub > .g-nav__sub-item.has-children > a::after{
    border-top: none;
    border-left: 6px solid currentColor;
    border-right: none;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
  }
}

@media (min-width: 901px){
  .g-nav__sub,
  .g-nav__subsub{
    padding: 8px;
    border-radius: 10px;
  }

  .g-nav__sub a,
  .g-nav__subsub a{
    padding: 10px 12px;
    border-radius: 8px;
  }

  .g-nav__sub a:hover,
  .g-nav__subsub a:hover{
    background: rgba(0,0,0,.06);
  }
}

@media (min-width: 901px){
  /* 第1階層リンク（均等幅の中で中央配置） */
  .g-nav__list > .g-nav__item > .g-nav__link{
    padding: 8px 12px;
  }

  /* 子を持つ親だけ、矢印分の右余白を足す */
/* 
  .g-nav__list > .g-nav__item.has-children > .g-nav__link{
    padding-right: 24px;
  }
*/
}

@media (min-width: 901px){
  /* 第1階層で子を持つ項目だけ、▼を文字の右に並べる */
  .g-nav__list > .g-nav__item.has-children > .g-nav__link{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    padding-right: 12px; /* 24px → 戻す */
  }

  .g-nav__list > .g-nav__item.has-children > .g-nav__link::after{
    position: static;
    top: auto;
    right: auto;
    transform: none;
    margin-top: 0.05em;
  }
}



/* ========================================
   PCメインメニュー：長い文字列を枠内で省略
   ======================================== */
@media (min-width: 901px){
  .g-nav__list > .g-nav__item{
    min-width: 0;
  }

  .g-nav__list > .g-nav__item > .g-nav__link{
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }
}








/* =========================
   3-2) Global Nav (SP Drawer)
   ========================= */

@media (max-width: 900px){
  /* 初期は閉じる */
  .g-nav__sub,
  .g-nav__subsub{
    display: none;
  }

  /* is-open のときだけ開く */
  .has-children.is-open > .g-nav__sub{
    display: block;
  }
  .g-nav__sub-item.has-children.is-open > .g-nav__subsub{
    display: block;
  }
}

@media (max-width: 900px){
  .site-header__nav .g-nav__list{
    gap: 10px;
  }

  .site-header__nav .g-nav__item > a{
    padding: 14px 14px;
    border-radius: 14px;
  }
}

@media (max-width: 900px){
  /* ドロワー内のリストマーカーを完全に消す */
  .site-header__nav .g-nav__list,
  .site-header__nav .g-nav__sub,
  .site-header__nav .g-nav__subsub{
    list-style: none;
  }

  /* 念のため */
  .site-header__nav .g-nav li{
    list-style: none;
  }
}

@media (max-width: 900px){
  .g-nav li.has-children.is-open > a::after{
    transform: translateY(-50%) rotate(180deg);
  }
}


/* =========================
   4) Active styles (common)
   ========================= */

/* 4) active（is-active）の見え方を“本番用”に整理 */

/* =========================
   Active styles (current / ancestor)
   ========================= */

/* 現在ページ（リンク） */
.g-nav a.is-active{
  font-weight: 700;
  /* color: #c00;                 後でブランド色に置換OK */
  background: rgba(0,112,192,.3); 	/* 現在ページ（リンク）だけ背景 */
}

/* 親・祖先（li側のis-active）：リンクに軽く効かせる */
.g-nav li.is-active > a{
  font-weight: 600;
  /* background: rgba(0,112,192,.3);  */
}


/* PC：第1階層（親）だけ背景なし＋下線（ズレない版） */

/* =========================
   4-1) Active styles (PC)
   ========================= */

@media (min-width: 901px){

  /* 第1階層だけ背景を消す */
  .g-nav__item.is-active > .g-nav__link{
    background: transparent;		/* 親リンク（第1階層）は背景を消す（祖先activeで付いた背景を打ち消す） */
    position: relative;			/* 下線は text-decoration ではなく疑似要素で描画（アイコンでも確実） */
  }

  /* アクティブなナビリンクに下線バーを表示
     ※ text-decoration ではなく疑似要素で制御（位置・太さ調整のため） */
  .g-nav__item.is-active > .g-nav__link::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;         		/* 左右いっぱいに広げる */
    bottom: 1px;		/* 下線位置は微調整 */
    height: 3px;
    background: rgba(0,112,192,.4);
    border-radius: 0; 		/* 丸まり防止 */
  }

  /* 第2階層は背景を維持 */
  .g-nav__sub-item.is-active > .g-nav__sub-link{
    background: rgba(0,112,192,.3);
  }

}

/* =========================
   4-2) Active styles (SP)
   ========================= */

@media (max-width: 900px){

  /* オーバーレイ */
  .nav-overlay{
    position: fixed;
    inset: 0;
    top: var(--header-h); 		 /* オーバーレイもヘッダー下から */
    height: calc(100vh - var(--header-h));
    background: rgba(0,0,0,.6);
    z-index: 900;
  }

  /* ドロワー本体 */
  .site-header__nav{
    position: fixed;
    top: var(--header-h);            /* ヘッダー下から */
    right: 0;
    width: min(86vw, 360px);
    height: calc(100vh - var(--header-h));

    padding: 14px 14px 18px;
    background: linear-gradient(to bottom, rgba(10,30,60,.96), rgba(0,40,80,.96));
    color: #ffffff;

    z-index: 910;

    transform: translateX(100%);
    transition: transform .2s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ドロワー内リンクの色を保証（念のため） */
  .site-header__nav .g-nav a{
    color: inherit;
  }

  body.is-nav-open .site-header__nav{
    transform: translateX(0);
  }

  /* ドロワーが開いている時だけ、オーバーレイ表示 */
  body.is-nav-open .nav-overlay{
    display: block;
  }

  /* 通常リンク */
  .site-header__nav .g-nav a{
    color: rgba(255,255,255,.92);
  }

  /* hover / focus（タップ中も違和感が少ない） */
  .site-header__nav .g-nav a:hover,
  .site-header__nav .g-nav a:focus-visible{
    color: #fff;
    background: rgba(255,255,255,.12);
    outline: none;
  }

  /* active（現在ページ） */
  .site-header__nav .g-nav a.is-active{
    color: #fff;
    background: rgba(255,255,255,.18);
    box-shadow: inset 3px 0 0 rgba(0,112,192,.85); /* 左アクセント */
  }

  /* 祖先active（親・子）は控えめ */
  .site-header__nav .g-nav li.is-active > a{
    background: rgba(255,255,255,.10);
  }
}

@media (max-width: 900px){

  /* 第1階層：縦並び、押しやすく */
  .g-nav__list{
    display: flex;
    flex-direction: column;
    gap: 10px;			/* ← 4px から少し増やす */
    margin: 0;
    padding: 0;
  }

  .g-nav__item > a{
    padding: 12px 12px;
    border-radius: 10px;
  }

  /* 第2・第3階層：インデントして階層感 */
  .g-nav__sub{
    margin: 10px 0 14px;
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,.18);
  }

  .g-nav__sub-item > a{
    padding: 10px 12px;
    border-radius: 10px;
  }

  /* 第2階層の項目同士の間隔 */
  .site-header__nav .g-nav__sub > li + li{
    margin-top: 12px;
  }
  /* 第3階層の項目同士の間隔 */
  .site-header__nav .g-nav__subsub > li + li{
    margin-top: 12px;
  }

  .g-nav__subsub{
    margin: 6px 0 10px;
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,.14);
  }

  .g-nav__subsub-item > a{
    padding: 10px 12px;
    border-radius: 10px;
  }

  /* 開いている枝の見た目（控えめに） */
  .has-children.is-open > a{
    background: rgba(255,255,255,.08);
  }

  /* active（SPは背景で分かりやすく） */
  .g-nav a.is-active{
    color: #fff;
    background: rgba(255,255,255,.18);
  }

  /* a.is-active の背景が上下に広がりすぎないように、角丸を少し強め */
  .g-nav a{
    border-radius: 14px; /* 10px → 14px */
  }
}



/* =========================
   5) Search results page (Google CSE)
   ========================= */

/* Google検索結果の余白 */
.gcse-searchresults-only{
  margin-top: 20px;
}

/* 検索結果タイトル */
.gsc-webResult .gs-title{
  color: #0070c0 !important;  /* ブランド色に */
}

/* スニペット */
.gsc-webResult .gs-snippet{
  font-size: 0.9rem;
  line-height: 1.6;
}

/* 不要な枠線を消す */
.gsc-control-cse{
  border: none !important;
  padding: 0 !important;
}



/* ============================================================
  4) Breadcrumb
   ============================================================ */

.breadcrumb{
  max-width: var(--container);
  margin: 0 auto;

  font-size: 0.7rem;	/* 80%相当（必要なら 0.78〜0.85 で微調整） */
  line-height: 1.8rem;	/* 行間を少しゆったり */
}
.breadcrumb a{
  color: inherit;
  text-decoration: none; /* 下線なし */
}
.breadcrumb__sep{
  margin: 0 6px;
  opacity: .7;
}


/* PC：ヘッダー内側を1200pxぴったりに（左右paddingなし） */
@media (min-width: 901px){
  .breadcrumb{
    padding: 0;
  }
}
/* SP：左右余白はgutterで確保（はみ出し防止にも効く） */
@media (max-width: 900px){
  .breadcrumb{
    padding: 10px var(--gutter) 0; /* （左右gutter復活） */

  /* SPでも表示：1行省略 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}





/* ============================================================
   5) Page Cover (h1 area)
   ============================================================ */

/* =========================
   Page cover (H1 area)
   ========================= */

.page-cover{
  width: 100%;
}

/* SP：ヘッダー下に少し余白 */
@media (max-width: 900px){
  .page-cover{
    margin-top: 16px;
  }
}

.page-cover__inner{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);

  min-height: 126px; 		/* ★希望反映：高さが高すぎるので浅く */

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  /* 見出し位置 */
  padding-top: 24px;
  padding-bottom: 30px; /* 60のままだと高くなるため軽く */

  background: #f5f7fa;
}

.page-cover__title{
  margin: 0;
  color: #333333;
  font-size: 1.5rem; /* 約24pt相当 */
  line-height: 1.25;
}

/* CTAボタン：右下寄せ（ボタンだけ下へ） */
.page-cover__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 50px;
  border-radius: 999px;
  background: #bee1f8;
  color: #333333;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;

  align-self: flex-end; /* ★希望反映 */
}

/* SP：縦積み */
@media (max-width: 900px){
  .page-cover__inner{
    min-height: 0;
    padding-top: 24px;
    padding-bottom: 24px;
    flex-direction: column;
    align-items: flex-start;
  }
  .page-cover__cta{
    align-self: flex-start; /* SPは左寄せの方が自然 */
  }
}





/* ============================================================
   6) Layout Components   （section / container など）
   ============================================================ */

/* =========================
   0) 基本：コンテンツブロック（c-section）
========================= */

.c-section { padding: 12px 0; }
.c-section--sm{ padding: 6px 0; }
.c-section--xs{ padding: 6px 0; }

@media (max-width: 900px){
  .c-section{ padding: 12px 0; }
  .c-section--sm{ padding: 6px 0; }
  .c-section--xs{ padding: 6px 0; }
}


/* =========================
   1) 見出し＋本文（最頻出）
   2  heading + paragraph
========================= */

/* =========================================================
   Text Block（文章の標準余白）
   ========================================================= */

.c-text-block > *{
  margin-top: 0;
}

.c-text-block > * + *{
  margin-top: 1em;
}



/* =========================================================
   Article body（読みやすい本文幅）
   ========================================================= */

.c-article-body{
  max-width: 880px;
  margin: 0 auto;
}

.c-article-body--narrow{
  max-width: 760px;
}

/* 本文内の基本余白 */
.c-article-body .c-text-block > *{
  margin-top: 0;
}

.c-article-body .c-text-block > * + *{
  margin-top: 1em;
}

/* 本文内のリスト */
.c-article-body ul,
.c-article-body ol{
  padding-left: 1.4em;
}

.c-article-body li + li{
  margin-top: 0.35em;
}

/* 本文内の見出しは少しだけ上を広めに */
.c-article-body h2,
.c-article-body h3,
.c-article-body h4{
  margin-top: 1.8em;
}

.c-article-body h2:first-child,
.c-article-body h3:first-child,
.c-article-body h4:first-child{
  margin-top: 0;
}



/* Components（共通）へ移動：ページ見出し（h1相当） */
.c-page-title {
  position: relative;
  margin: 0px 0 0px 0;
  padding: 10px 16px 10px 30px;

  background:#f5f7fa;
  font-size:1.2rem;
  font-weight:600;
}

.c-page-title::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:6px;
  height:100%;

  background:linear-gradient(
    to bottom,
    #afabab 0%,
    #afabab 40%,
    #9dc3e6 40%,
    #9dc3e6 100%
  );
}


/* =========================================================
   Page Title
   ========================================================= */

/*  (green) */
.c-page-title--green{
  position: relative;
}

.c-page-title--green::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background: #00B050; /* 単色 */
}

/*  (orange) */
.c-page-title--orange{
  position: relative;
}

.c-page-title--orange::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background: #FFC000; /* 単色 */
}

/*  (blue) */
.c-page-title--blue{
  position: relative;
}

.c-page-title--blue::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background: #5b9bd5; /* 単色 */
}

.c-page-title__sub{
  display: inline-block;
  font-size: 80%;
  font-weight: normal;
  margin-left: 2em;
}




/* ========================================
   Contact index: page cover centered (no CTA)
   ======================================== */
.c-page-cover-center{
  text-align: center;
}

.c-page-cover-center .l-container{
  background: #f5f7fa;
  padding: 34px 20px;
}

.c-page-cover-center__inner{
  max-width: 900px; /* 読みやすさ：中央ブロックを少し絞る */
  margin: 0 auto;
}

.c-page-cover-center__title{
  margin: 0 0 10px;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.c-page-cover-center__lead{
  margin: 48px 0 0 0;
  font-size: .95rem;
  line-height: 1.8;
  color: #333;
}

@media (max-width: 900px){
  .c-page-cover-center .l-container{
    padding: 26px 14px;
  }
  .c-page-cover-center__title{
    font-size: 1.35rem;
  }
}


/* ========================================
   Underline title (p_aboutus_00 successor)
   ======================================== */
.c-underline-title{
  margin: 24px 0 14px;
  padding: 0 0 .5em;
  border-bottom: 2px solid #0070C0;
  box-sizing: border-box;
  font-size: 1.5rem;
  font-weight: 700;
}
/* 本文サイズ版（旧 p_aboutus_00 相当） */
.c-underline-title--sm{
  font-size: 1.1rem;
  font-weight: 400;
}


.c-underline-title--center{ text-align: center; }
.c-underline-title--left{ text-align: left; }



/* ========================================
   Section heading	 「■付き黒文字」 h3
   ======================================== */
.c-heading-square{
  margin: 24px 0 10px;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.6;
  color: #111;
}

.c-heading-square::before{
  content: "■";
  margin-right: 0.4em;
  color: #111;
}


/* ========================================
   Section heading	h4
   ======================================== */
.c-heading-minor{
  margin: 18px 0 8px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  color: #333;
}



/* =========================================================
   Subpage Panel Title
   第3階層ページ用タイトル
   ========================================================= */

.c-subpage-panel-title{
  display: block;
  max-width: 100%;
  margin: 0 auto;
  padding: 20px 24px;

  background: #ffffff;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
  color: #888;

  box-shadow:
    0 0 6px rgba(0,0,0,.05),   /* 全体のごく薄い影（左・上も出る） */
    6px 6px 10px rgba(0,0,0,.14); /* 右下方向の影 */
}

@media (max-width: 900px){

  .c-subpage-panel-title{
    padding: 16px 18px;
    font-size: 1.6rem;

    box-shadow:
      0 0 5px rgba(0,0,0,.05),
      4px 4px 8px rgba(0,0,0,.14);
  }

}








/* ========================================
   Other contact block
   ======================================== */
.c-other-contact__lead{
  margin: 0 0 14px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
}

.c-contact-box{
  max-width: 780px;         		/* “幅100%ではない” */
  margin: 0 auto;           		/* 中央寄せ */
  background: #eee;
  padding: 10px 16px;
  box-sizing: border-box;
  text-align: center;
}

.c-contact-box__row{
  max-width: 520px;         		/* “幅100%ではない” */
  grid-template-columns: 70px 1fr; 	/* TEL / E-mail の列 */
  gap: 12px;
  align-items: center;

  display: inline-grid;			/* 中央寄せのため inline */
  grid-template-columns: auto 1fr;
  text-align: left;			/* 中のテキストは左寄せ */

  margin-right: 2em;
}
@media (min-width: 901px){
  .c-contact-box__row:last-of-type {
    margin-right: 0;
  }
}

.c-contact-box__label{
  font-weight: 700;
  color: #333;
}

.c-contact-box__value{
  color: #333;
}

/* SP：少し詰める（必要なら） */
@media (max-width: 900px){
  .c-contact-box{
    max-width: 520px;
    padding: 10px 12px;
    text-align: left; /* ← ここを追加！ */
  }
  .c-contact-box__row{
    grid-template-columns: 64px 1fr;
    margin-right: 0;
  }
}




/* ========================================
   Link tabs (seminar index)
  ［セミナー］ページで使用
   ======================================== */

.c-link-tabs{
  margin-top: 24px;
}

/* PC：横並び＋下線 */
.c-link-tabs__list{
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
  display: flex;
  justify-content: center;
  gap: 0;
  /* border-bottom: 6px solid #5b9bd5; */
}

.c-link-tabs__item{
  flex: 0 1 250px;
}

.c-link-tabs__item a{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  color: #333;
  background: #fff;
  border: 1px solid rgba(0,0,0,.35);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

/* 1つ目（現在地） */
.c-link-tabs__item.is-current a{
  background: #5b9bd5;
  color: #fff;
  font-weight: 700;
}

/* 隣接ボーダーが二重に見えにくいように */
.c-link-tabs__item + .c-link-tabs__item a{
  border-left: none;
}

/* hover */
@media (min-width: 901px){
  .c-link-tabs__item a:hover{
    filter: brightness(0.98);
  }
}

/* SP：1列縦並び、下線なし */
@media (max-width: 900px){
  .c-link-tabs__list{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-bottom: 0;
    border-bottom: none;
  }

  .c-link-tabs__item{
    flex: none;
  }

  .c-link-tabs__item + .c-link-tabs__item a{
    border-left: 1px solid rgba(0,0,0,.35);
  }

  .c-link-tabs__item a{
    min-height: 52px;
  }
}


/* =========================================================
   Status Box（終了表示など）
   ========================================================= */

.c-status-box{
  display: inline-block;
  margin: 0 0 0.5em 0;
  padding: 6px 14px;

  text-align: center;
  font-weight: 700;
  color: #e60012;

  background: #ffffff;
  border: 1px solid #aaaaaa;
  border-radius: 999px;

  font-size: 0.9rem;
  line-height: 1.6;
}

/* 幅100%版（ブロック表示） */
.c-status-box--block{
  display: block;
  width: 100%;
  margin: 18px 0;
  padding: 10px 16px;
  font-size: 120%;
  background-color:#f9f9f9;
}
.c-application{
  color: #0070C0;
  background-color: #f0f8ff;
}
.c-application:hover{
  background-color: #e0fffff;
}



/* ============================================================
   Components: Form (common)  ※PPT版（上ラベル／下入力）
   ============================================================ */

.c-form{
  max-width: 860px;   /* PPT寄せ：広すぎない */
  margin: 0 auto;
}

/* 1行（上：ラベル / 下：入力） */
.c-form__row{
  padding: 12px 0;
  display: block;          /* ← gridをやめる */
}
/* SP */
@media (max-width: 900px){
  .c-form__row{
    padding: 10px 0;
  }
}

/* ラベル */
.c-form__label{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  margin: 0 0 8px;         /* ←入力との間 */
}

/* 2列入力（姓名など） */
.c-form__grid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* SP */
@media (max-width: 900px){
  .c-form__grid2{
    grid-template-columns: 1fr;
  }
}

/* 入力 */
.c-form__input,
.c-form__textarea{
  width: 100%;
  border: 1px solid rgba(0,0,0,.28);
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
  box-sizing: border-box;
}

.c-form__textarea{
  min-height: 160px;
}

.c-form__hint{
  margin: 8px 0 0;
  font-size: 0.8rem;
  opacity: .75;
}

/* checkbox群 */
.c-form__checks{
  display: grid;
  gap: 10px;
}
.c-form__check{
  display: flex;
  align-items: center;			/* 縦方向の中央揃え */
  gap: 10px;				/* 左右の間隔に 10px */
  font-size: 0.95rem;
  cursor: pointer;			/* クリック領域の改善 */
  padding:4px 0;
}

/* フォーム系は基本的に型で絞る */
.c-form__check input[type="checkbox"],
.c-form__check input[type="radio"]{
  transform: translateY(1px);
  transform: scale(1.15);		/* チェックボックスを少し大きく */
}

@media (max-width: 900px){
  #soft-other-text{
    display: block;
    width: 100%;
    margin-top: 6px;
  }

}

/* ラジオ（区分）横並び */
/* 
	base + modifier
	<div class="c-form__checks c-form__checks--inline">
 */
.c-form__checks--inline{
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
@media (max-width: 900px){
  /* ラジオ縦並び */
  .c-form__checks--inline{
    flex-direction: column;
    gap: 10px;
  }
}


/* チェックボックス囲み */
.c-form__check-group{
  border: 1px solid #dcdcdc;
  border-radius: 14px;
  padding: 18px 22px;
  background: #f7f7f7;
}


/* （その他）使用ソフト名 */
.c-form__check-other{
  display: grid;
  gap: 8px;
}

.c-form__check-other .c-form__input{
  max-width: 260px;
}



/* 必須バッジ */
.c-form__req{
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.2;
  font-weight: 700;
}

/* invalid 最小（CSSでマーク） */
.c-form__input:invalid,
.c-form__textarea:invalid{
  border: 1px solid #ff3b30;
  background: rgba(255,59,48,.06);
}

/* disabled input（その他OFF時など） */
.c-form__input:disabled,
.c-form__textarea:disabled{
  background: #f0f0f0;
  border-color: rgba(0,0,0,.18);
  color: rgba(0,0,0,.55);
  cursor: not-allowed;
}
.c-form__input:disabled::placeholder{
  color: rgba(0,0,0,.35);
}

/* submit */
.c-form__actions{
  padding-top: 18px;
  text-align: center;
}

.c-form__submit{
  min-width: 200px;
  height: 48px;
  border: none;
  border-radius: 999px;
  background: #0070C0;
  font-weight: 600;
  color: #ffffff;
  font-size:1.2rem;
  cursor: pointer;
}


.c-form__error{
  color:#c62828;
  font-size:1rem;
  margin:6px 0 12px;
  font-weight:bold;
}




/* 郵便番号＋自動入力ボタン（2列） */
.c-form__grid2--zip{
  grid-template-columns: 1fr auto;
  align-items: center;
}

.c-form__zipbtn{
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(0,0,0,.28);
  border-radius: 8px;
  background: #f5f7fa;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.c-form__zipbtn:hover{ filter: brightness(.98); }

/* SP：縦に落とす */
@media (max-width: 900px){
  .c-form__grid2--zip{
    grid-template-columns: 1fr;
  }
  .c-form__zipbtn{ width: 100%; }
}


/* =========================================================
   Form bulk actions
   ========================================================= */

.c-form__bulk{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 14px;
  padding: 10px 12px;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  background: #fafafa;
}

.c-form__bulk-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.c-form__btn-mini{
  appearance: none;
  border: 1px solid #c8ced6;
  border-radius: 999px;
  background: #fff;
  color: #333;
  padding: 6px 14px;
  font-size: 0.85rem;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.c-form__btn-mini:hover{
  background: #f5f7fa;
  border-color: #b8c2cc;
}

.c-form__btn-mini:focus-visible{
  outline: 2px solid #0070c0;
  outline-offset: 2px;
}

.c-form__bulk-count{
  margin: 0;
  font-size: 0.9rem;
  color: #555;
  white-space: nowrap;
}

.c-form__bulk-count span{
  font-weight: 700;
  color: #333;
}

@media (max-width: 900px){
  .c-form__bulk{
    flex-direction: column;
    align-items: flex-start;
  }

  .c-form__bulk-count{
    white-space: normal;
  }
}





/* ============================================================
   Components: Result box (common)
   ============================================================ */

.c-result-box{
  max-width: 640px;
  margin: 40px auto;
  padding: 44px 24px;
  border: 1px solid rgba(0,0,0,.22);
  background: #fff;
  text-align: center;
}

.c-result-box__title{
  margin: 0 0 12px;
  font-size: 1.4rem;
  font-weight: 700;
}

.c-result-box__title::after{
  content: "";
  display: block;
  width: 240px;
  height: 2px;
  background: #0070C0;
  margin: 14px auto 0;
}

.c-result-box__text{
  margin: 16px 0 26px;
}

.c-result-box__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  height: 48px;
  border-radius: 999px;
  background: #0070C0;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

/* =========================
   2) 段落＋箇条書き（notice含む）
   3  notice
========================= */

/* =========================================================
   Note List（＊ / ※ 箇条書き）
   ========================================================= */

.c-note-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-note-list li{
  position: relative;
  padding-left: 1.4em;
  line-height: 1.8;
}

.c-note-list li::before{
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
}

.c-note-list--aster li::before{
  content: "＊";
}


/* =========================
   4  table → 8) Main content
========================= */

/* =========================================================
   Table Scroll / Table
   ========================================================= */

.c-table-scroll{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.c-table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.c-table th,
.c-table td{
  vertical-align: top;
}


/* =========================================================
   Newsletter Table
   /services/nltb_nletter.html
   ========================================================= */

.c-nl-table{
  min-width: 760px;
  margin: 18px 0 0;
  table-layout: fixed;
  font-size: 0.95rem;
  line-height: 1.7;
}

.c-nl-table th,
.c-nl-table td{
  padding: 12px 14px;
  border: 1px solid #d9dee5;
  vertical-align: top;
  background: #fff;
}

.c-nl-table thead th{
  background: #f5f7fa;
  text-align: center;
  font-weight: 700;
  color: #333;
}

.c-nl-table__vol{
  width: 18%;
  white-space: nowrap;
}

.c-nl-table__title{
  width: 57%;
}

.c-nl-table__price{
  width: 25%;
  text-align: right;
  white-space: nowrap;
}

.c-nl-table__price:empty{
  background: #fff;
}

.c-nl-table a[target="_nl"]{
  font-weight: 600;
}

.c-nl-table a[target="_nl"]::after{
  font-family: "Font Awesome 7 Free";
  content: "\f1c1";
  font-weight: 700;
  margin-left: .4em;
  color: #b22222;
  font-size: .9em;
}

@media (max-width: 900px){
  .c-nl-table{
    min-width: 760px;
    font-size: 0.9rem;
  }

  .c-nl-table th,
  .c-nl-table td{
    padding: 10px 12px;
  }
}


/* =========================================================
   Order List
   ニュースレター申込み用チェック一覧
   ========================================================= */

.c-order-list{
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.c-order-item{
  display: grid;
  grid-template-columns: 34px 1fr 140px;
  gap: 12px 16px;
  align-items: start;
  padding: 14px 16px;
  border-bottom: 1px solid #dcdcdc;
  background: #fff;
  cursor: pointer;
}

.c-order-item:last-child{
  border-bottom: none;
}

.c-order-item__check{
  padding-top: 2px;
}

.c-order-item__body{
  min-width: 0;
}

.c-order-item__vol{
  margin: 0 0 4px;
  font-weight: 600;
}

.c-order-item__title{
  margin: 0;
  line-height: 1.7;
  color: #111;
}

.c-order-item__note{
  margin: 6px 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #555;
}

.c-order-item__price{
  text-align: right;
  white-space: nowrap;
  line-height: 1.5;
  font-weight: 600;
}

@media (max-width: 900px){
  .c-order-item{
    grid-template-columns: 28px 1fr;
    gap: 10px 12px;
    padding: 12px 14px;
  }

  .c-order-item__price{
    grid-column: 2;
    text-align: left;
    margin-top: 6px;
  }
}



.c-order-item{
  transition: background .15s ease;
}

.c-order-item:hover{
  background:#f7f9fc;
}

.c-order-item__price{
  color:#2b3d63;
}

.c-order-item input[type="checkbox"]{
  transform: scale(1.15);
}

.c-order-item__vol a{
  /* text-decoration:none; */
}




/* =========================================================
   Technical Brief Table
   /services/nltb_tbrief.html
   ========================================================= */

.c-tb-table{
  width: 100%;
  margin: 18px 0 0;
  table-layout: fixed;
  font-size: 0.95rem;
  line-height: 1.7;
}

.c-tb-table th,
.c-tb-table td{
  padding: 12px 14px;
  border: 1px solid #d9dee5;
  vertical-align: top;
  background: #fff;
}

.c-tb-table thead th{
  background: #f5f7fa;
  text-align: center;
  font-weight: 700;
  color: #333;
}

.c-tb-table__no{
  width: 22%;
  white-space: nowrap;
}

.c-tb-table__title{
  width: 78%;
}

/* PDFリンク */
.c-tb-table__no a{
  font-weight: 600;
}

.c-tb-table__no a::after{
  font-family: "Font Awesome 7 Free";
  content: "\f1c1";
  font-weight: 700;
  margin-left: .4em;
  color: #b22222;
  font-size: .9em;
}

/* Newバッジ */
.c-badge-new{
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ffe8e8;
  color: #c62828;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}

/* SP：1列2行っぽく見せる */
@media (max-width: 900px){

  .c-tb-table,
  .c-tb-table thead,
  .c-tb-table tbody,
  .c-tb-table tr,
  .c-tb-table th,
  .c-tb-table td{
    display: block;
    width: 100%;
  }

  .c-tb-table thead{
    display: none;
  }

  .c-tb-table{
    border-top: 1px solid #d9dee5;
  }

  .c-tb-table tr{
    border-bottom: 1px solid #d9dee5;
    padding: 10px 0;
  }

  .c-tb-table td{
    border: none;
    padding: 4px 0;
  }

  .c-tb-table__no{
    width: 100%;
    font-weight: 700;
  }

  .c-tb-table__title{
    width: 100%;
  }
}


/* Mech D&A　News Letter　登録フォーム  */
.c-tb-checks{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 24px;
}

@media (max-width:900px){
  .c-tb-checks{
    grid-template-columns:1fr;
  }
}

.c-tb-checks .c-form__check{
  align-items:flex-start;		/* チェックボックス上寄せ */
}

.c-tb-checks .c-form__check input{
  margin-top:7px;
}





/* =========================
   5  card grid
========================= */

/* ========================================
   Contact index: 2-column split cards
   ======================================== */
.c-split-cards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
}

@media (max-width: 900px){
  .c-split-cards{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
/* SP：1枚目の下だけ余白を増やす */
@media (max-width: 900px){
  .c-split-card:first-child{
    margin-bottom: 16px; /* 好みで 12〜24px */
  }
}

.c-split-card{
  display: flex;
  flex-direction: column;
  min-height: 120px; 		/* “下寄せ”を安定させる保険（必要なら調整） */
  text-align: center;
}

/* 見出し＋下線（#0070C0） */
.c-split-card__title{
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #0070C0;
  font-size: 1.5rem;
  font-weight: 700;
}

/* 説明文 */
.c-split-card__desc{
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: #333;
}

/* ボタンは下寄せ */
.c-split-card__bottom{
  margin-top: auto;
  padding-top: 18px;
}

/* ボタン（矢印なし） */
.c-split-card__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  background: #bee1f8; /* 既存トーンに合わせ */
  color: #333;
  text-decoration: none;
  font-weight: 600;
}

.c-split-card__button:hover,
.c-split-card__button:focus-visible{
  filter: brightness(0.97);
}



/* =========================================================
   Feature Card Grid
   画像 + タイトル + 説明文のリンクカード
   ========================================================= */

.c-feature-card-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 40px;
  margin-top: 24px;
}

@media (max-width: 900px){
  .c-feature-card-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.c-feature-card{
  display: block;
  padding: 18px 18px 20px;
  background: #fafafa;
  text-decoration: none;
  color: inherit;
}

.c-feature-card:hover{
  background: #f5f5f5;
}

.c-feature-card__head{
  text-align: center;
  margin-bottom: 10px;
}

.c-feature-card__title{
  margin: 0;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
  color: #333;
}

.c-feature-card__sub{
  margin: 2px 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #555;
}

.c-feature-card__media{
  margin-top: 8px;
  text-align: center;
}

.c-feature-card__media img{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid #888;
}

/* 画像下文章 */
.c-feature-card__desc{
  margin: 14px 0 0;
  line-height: 1.8;
  color: #333;
  text-align: center;
}




/* =========================
   6  figure
========================= */

.c-figure{
  margin:20px 0;
}

.c-figure img{
  max-width:100%;
  height:auto;
}

.c-figure figcaption{
  font-size:0.85rem;
  margin-top:6px;
  color:#555;
}



/* =========================================================
   Image Grid
   画像2～4点の並び
<div class="c-image-grid c-image-grid--2">
<div class="c-image-grid c-image-grid--3">
<div class="c-image-grid c-image-grid--4">
   ========================================================= */

.c-image-grid{
  display: grid;
  gap: 24px;
  align-items: start;
}

/* 2点 */
.c-image-grid--2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 3点 */
.c-image-grid--3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 4点 */
.c-image-grid--4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.c-image-grid__item{
  margin: 0;
}

.c-image-grid__item img{
  display: block;
  max-width: 100%;
  height: auto;
}

/* SP：1列 */
@media (max-width: 900px){
  .c-image-grid--2,
  .c-image-grid--3,
  .c-image-grid--4{
    grid-template-columns: 1fr;
  }
}




/* =========================
   7  CTA
========================= */

/* ========================================
   Page bottom CTA (common)
   ======================================== */
.c-bottom-cta{
  /* page-coverに近い薄い面 */
  text-align:center;
  margin-top: 48px;
}

.c-bottom-cta .l-container{
  background:#f5f7fa;
  padding: 28px 20px;
}

.c-bottom-cta__lead{
  margin: 0 0 14px;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #333;
}

/* ボタン（中央寄せ） */
.c-bottom-cta__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: #bee1f8;
  color: #333;
  text-decoration: none;
  font-weight: 600;
}

/* hover（PC） */
@media (min-width: 901px){
  .c-bottom-cta__button:hover{
    filter: brightness(0.98);
  }
}




/* =========================
   8  link list
========================= */


/* =========================
   9  page anchor nav
   9) ページ内リンク（ページアンカー一覧）
========================= */

.c-page-nav__list{
  list-style:none;
  padding:0;
  margin:0;

  display:flex;
  flex-wrap:wrap;
  gap:20px;
}

.c-page-nav__list a{
  text-decoration:none;
}

/* SP */
@media (max-width:900px){
  .c-page-nav__list{
    flex-direction:column;
    gap:10px;
  }
}


/* =========================
   10) 枠付き
========================= */

.c-download-list{
  list-style:none;
  padding:0;
  margin:0;
}

.c-download-list li{
  margin-bottom:10px;
}
.c-download-list li:last-child{
  margin-bottom:0px;
}


.c-download-list a{
  text-decoration:none;
}

/* =========================================================
   Download Box
   ========================================================= */

/* =========================================================
   File Download UI
<div class="c-download-box">
  <a class="c-file-link" href="/seminar/pdf/seminar_schedule.pdf" download>
    <span class="c-file-badge c-file-badge--pdf">PDF</span>
    <span class="c-file-name">セミナー開催予定表</span>
    <span class="c-file-meta">（1.2MB）</span>
  </a>
</div>

<ul class="c-download-list">
  <li>
    <div class="c-download-box">
      <a class="c-file-link" href="/seminar/pdf/seminar_schedule.pdf" download>
        <span class="c-file-badge c-file-badge--pdf">PDF</span>
        <span class="c-file-name">セミナー開催予定表</span>
        <span class="c-file-meta">（1.2MB）</span>
      </a>
    </div>
  </li>
  <li>
    <div class="c-download-box">
      <a class="c-file-link" href="/docs/application_form.docx" download>
        <span class="c-file-badge c-file-badge--word">Word</span>
        <span class="c-file-name">申込書（Word形式）</span>
        <span class="c-file-meta">（48KB）</span>
      </a>
    </div>
  </li>
</ul>
   ========================================================= */

.c-download-box{
  border: 1px solid #cccccc;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 18px 0;
}

.c-download-box a{
  font-weight: 600;
  text-decoration: none;
}

.c-download-box a:hover{
/*  text-decoration: underline; */
}


.c-file-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.c-file-link:hover .c-file-name{
  text-decoration: underline;
}

.c-file-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;

  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

/* 種別ごとの色 */
.c-file-badge--pdf{
  background: #d9534f;
}

.c-file-badge--word{
  background: #2b579a;
}

.c-file-badge--excel{
  background: #217346;
}

.c-file-name{
  font-weight: 500;
  line-height: 1.6;
}

.c-file-meta{
  margin-left: 8px;
  font-size: 0.85rem;
  color: #666;
  font-weight: normal;
}
@media (max-width: 900px){
  .c-file-link {
    display: block;
  }
  .c-file-meta{
    display: block;
    margin-left: 0;
    margin-top: 4px;
  }
}

.c-file-date {
  margin-left: 8px;
  font-size: 0.85rem;
  color: #666;
  font-weight: normal;
}

/* =========================================================
   Notice Box
   ========================================================= */

.c-notice-box{
  background: #fff9e6;
  border: 1px solid #e6d7a3;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 18px 0;
}


/* =========================================================
   Info Box
   ========================================================= */

.c-info-box{
  background: #f5f5f5;
  border: 1px solid #dddddd;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 18px 0;
}


/* =========================================================
   Emphasis Box		2) 強調説明ボックス（ベージュ系）
<div class="c-emphasis-box">
  <p class="c-emphasis-box__title">ご案内</p>
  <p>
    本セミナーはオンラインで開催いたします。視聴URLは前日までにご案内いたします。
  </p>
</div>
   ========================================================= */

.c-emphasis-box{
  background: #eef6fd;
  border: 1px solid #b9d7f0;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 18px 0;
}

.c-emphasis-box__title{
  margin: 0 0 8px;
  font-weight: 700;
  color: #0070c0;
}

.c-emphasis-box > *:last-child{
  margin-bottom: 0;
}

/* =========================================================
   Soft Box	強調説明ボックス（ベージュ系）
   ========================================================= */

.c-soft-box{
  background: #fbf7ef;
  border: 1px solid #d9ccb5;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 18px 0;
}

.c-soft-box__title{
  margin: 0 0 8px;
  font-weight: 700;
  color: #7a5a2f;
}

.c-soft-box > *:last-child{
  margin-bottom: 0;
}

/* =========================================================
   Link Box
   外部リンク・関連リンク用ボックス
   ========================================================= */

.c-link-box{
  background: #eef6fb;
  border: 1px solid #c8ddea;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 18px 0;
}
.c-link-box a:hover{
  color: #1c4f7a;
}

.c-link-box__title{
  margin: 0 0 10px;
  font-weight: 700;
  color: #2a5d85;
}

.c-link-box__list{
  margin: 0;
  padding-left: 1.2em;
}
.c-link-box__list a {
  overflow-wrap: anywhere;		/* 改行だけ許可 */
}

.c-link-box__list li{
  margin: 6px 0;
}

.c-link-box__list a{
  text-decoration: none;
}

.c-link-box__list a:hover{
  text-decoration: underline;
}




/* =========================
   11) 定義リスト（definition list）
========================= */

/* 
.c-def-list{
  margin:0;
}

.c-def-list dt{
  font-weight:600;
  margin-top:14px;
}

.c-def-list dd{
  margin:4px 0 12px 0;
}
*/

/* CSS（2列レイアウト）*/
.c-def-list{
  display:grid;
  grid-template-columns: 200px 1fr;
  gap:0px;
}

.c-def-list dt{
  font-weight:600;
}

.c-def-list dd{
  margin:0;
}

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

  .c-def-list{
    grid-template-columns:1fr;
  }

}


/* =========================
   12) FAQコンポーネント（Freyaサイト用）
========================= */

.c-faq{
  margin:0;
}

.c-faq__item{
  margin-bottom:18px;
}

.c-faq__q{
  font-weight:600;
}

.c-faq__a{
  margin:6px 0 0;
  line-height:1.6;
}



/* =========================
   13) Responsive map
========================= */
.c-map{
  max-width: 720px;     /* PPTっぽく中央に収めたいなら */
  margin: 18px auto 0;  /* 上だけ少し余白 */
}
.c-map iframe{
  width: 100%;
  aspect-ratio: 16 / 9; /* これが一番ラク */
  border: 0;
  display: block;
}



/* =========================================================
   Hover / Interaction
   ========================================================= */

/* ボタン */
.c-form__submit,
.c-split-card__button,
button{
  transition: background-color .15s ease, opacity .15s ease;
}

.c-form__submit:hover,
.c-split-card__button:hover,
button:hover{
  opacity: .9;
}

/* ダウンロードリンク */
.c-file-link{
  transition: opacity .15s ease;
}

.c-file-link:hover{
  opacity: .85;
}


/* =========================================================
   Focus Ring
   ========================================================= */

:focus-visible{
  outline: 2px solid #0070c0;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ボタンなどは少し丸める */
button:focus-visible,
.c-form__submit:focus-visible,
.c-split-card__button:focus-visible{
  outline: 2px solid #0070c0;
  outline-offset: 3px;
}






/* ============================================================
   7) Page Components  （svc-card / faq / notice など）   （ページ専用UI）
   ============================================================ */

/* =========================================================
   業務案内
   /services/
========================================================= */

/* =========================
   services/index.html
   業務案内カード一覧
  （両端ぞろえ・画像余白・画像高さ固定）置換
   ========================= */
.svc-grid{
  margin-top: 20px;

  /* ★両端ぞろえ：左右paddingを消す（このブロック内だけ） */
  padding: 22px 0 40px;

  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
/* SPは通常どおり左右余白を戻す */
@media (max-width: 900px){
  .svc-grid{
    /* padding-left: var(--gutter); */
    /* padding-right: var(--gutter); */
    /* grid-template-columns: 1fr; */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    
  }
}

.svc-card{
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(0,0,0,.22);
  background: #fff;
}

/* ★画像に左右余白（先方希望A） */
.svc-card__media{
  padding: 10px 10px 0; /* 左右余白＋上少し */
}
.svc-card__media img{
  width: 100%;
  height: 140px;           /* ★高さ固定（区切り線位置を揃える） */
  object-fit: contain; /* ← cover → contain */
  display: block;
}

/* タイトル・区切り線・説明は画像と同じ余白に揃える */
.svc-card__title{
  margin: 10px 10px 8px;
  font-size: 0.95rem;
  line-height: 1.3;
  text-align:center;

  min-height: calc(1.3em * 2); /* 2行分確保：区切り線位置が揃いやすい */
}

.svc-card__rule{
  height: 3px;
  background: rgba(0,112,192,.85);
  margin: 0 10px;
}

.svc-card__desc{
  margin: 10px 10px 14px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #111;
}

@media (min-width: 901px){
  .svc-card:hover{
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    transform: translateY(-1px);
    text-decoration: none;
  }
}

/* SP：画像は拡大されがちなので、高さを少し上げるだけに留める */
@media (max-width: 900px){
  .svc-card__media img{
    height: 180px;
  }
}


/* ========================================
   業務案内 > CAEコンサルティング
   /services/cae.html
   ======================================== */

#service-cae-cards{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin-top: 28px;
}

@media (max-width: 900px){
  #service-cae-cards{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px){
  #service-cae-cards{
    grid-template-columns: 1fr;
  }
}

#service-cae-cards .service-cae-card{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#service-cae-cards .service-cae-card__head{
  display: block;
  width: 100%;
  position: relative;
  padding: 14px 18px;
  background: #0070c0;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;

  box-shadow: -8px 8px 8px rgba(240, 200, 170, .45);

  clip-path: polygon(
    0 0,
    calc(100% - 18px) 0,
    100% 50%,
    calc(100% - 18px) 100%,
    0 100%,
    10px 50%
  );
  /* 
  clip-path
  要素のどの部分を表示するかを設定するクリッピング領域を作る。
　領域の内部の部分は表示され、外側の部分は非表示 
	👉 右側が尖った矢印型（▶︎）の六角形
	右側は 100% 50% で尖っている
	左側は 10px 50% で少し凹んでいる
	上下はまっすぐ
	右側の上下は 18px 内側に入っているため、矢印の“根本”が細くなる

	1	0 0	左上	左上の角
	2	calc(100% - 18px) 0	右上手前	右端から 18px 内側の位置
	3	100% 50%	右中央	右端の中央（矢印の先端）
	4	calc(100% - 18px) 100%	右下手前	右端から 18px 内側の下端
	5	0 100%	左下	左下の角
	6	10px 50%	左中央	左端から 10px 内側の中央（左側の凹み）
	*/
}

#service-cae-cards .service-cae-card__head--gray{
  background: #c9ced6;
  color: #333;
}

#service-cae-cards .service-cae-card__head-label{
  display: inline-block;
}


/* 本文ボックスを縦flexに */
#service-cae-cards .service-cae-card__body{
  width: 92%;
  margin-top: 14px;
  padding: 16px 16px 18px;
  background: #f6f6f6;
  border: 1px solid #cccccc;
  box-shadow: 0 4px 10px rgba(0,0,0,.10);
  line-height: 1.8;

  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 上下の両端に配置 */
}

/* PC / Tablet 時だけ高さを揃える
   ※ 680px以下で1列になるため、681px以上のみ適用 */
@media (min-width: 681px){
  #service-cae-cards .service-cae-card__body{
    min-height: 230px;
  }
}

/* note を下寄せ */
#service-cae-cards .service-cae-card__note{
  color: #333;
  margin-top: auto;
  padding-top: 14px;
}

/* 本文ボックス p */
#service-cae-cards .service-cae-card__body p{
  margin: 0;
}

#service-cae-cards .service-cae-card__body p + p{
  margin-top: 14px;
}

/* note */
#service-cae-cards .service-cae-card__note{
  color: #333;
  font-size: 85%;
}

@media (min-width: 901px){
  #service-cae-cards .service-cae-card__head:hover{
    filter: brightness(.97);
  }
}


/* ========================================
   業務案内 > CAEコンサルティング
   /services/cae.html
   コンサルティングの流れ
   ======================================== */

.c-step-flow{
  margin-top: 28px;
}

.c-step-flow__head{
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-width: 420px;
  max-width: 100%;
  padding: 12px 28px;
  border-radius: 999px;
  background: #0f63b8;
  color: #fff;
  line-height: 1.4;
  font-weight: 700;
}

.c-step-flow__step{
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
}

.c-step-flow__title{
  font-size: 1.05rem;
  font-weight: 700;
}

.c-step-flow__body{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  margin-top: 18px;
}

.c-step-flow__rail{
  position: relative;
  min-height: 100%;
}

.c-step-flow__rail::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px dotted #d8dde5;
}

.c-step-flow__rail::after{
  font-family: "Font Awesome 7 Free";
  content: "\f103";			/* 下向き */
  font-weight: 700;
  position: absolute;
  left: 50%;
  bottom: -4px;				/* 矢印の位置 */
  transform: translateX(-50%);
  color: #d70000;
  font-size: 1.8rem;
  line-height: 1;
}

.c-step-flow--last .c-step-flow__rail::after{
  content: none;
}

.c-step-flow__content{
  line-height: 1.8;
}

.c-step-flow__content > *{
  margin-top: 0;
}

.c-step-flow__content > * + *{
  margin-top: 16px;
}

.c-step-flow__content ul{
  margin: 0;
  padding-left: 1.4em;
}

.c-step-flow__content li + li{
  margin-top: 10px;
}

.c-step-flow__box{
  border: 1px solid #bbbbbb;
  background: #fff;
  padding: 12px 16px;
}

.c-step-flow__box p{
  margin: 0;
}

.c-step-flow__box p + p{
  margin-top: 8px;
}

@media (max-width: 900px){
  .c-step-flow__head{
    min-width: 0;
    width: 100%;
    gap: 14px;
    padding: 12px 20px;
  }

  .c-step-flow__title{
    font-size: 1rem;
  }

  .c-step-flow__body{
    grid-template-columns: 32px 1fr;
    gap: 14px;
  }

  .c-step-flow__rail::before{
    border-left-width: 5px;
  }

  .c-step-flow__rail::after{
    font-size: 1.5rem;
  }
}


/* ========================================
   業務案内 > CAEコンサルティング
   /services/cae.html
   技術支援業務実績
   ======================================== */

.c-case-table{
  min-width: 980px; 			/* SP時は横スクロール */
  table-layout: fixed;
  font-size: 0.95rem;
  line-height: 1.65;
}

.c-case-table thead th{
  background: #dbe1ea;
  color: #111;
  font-weight: 700;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid #c9ced6;
  border-bottom: 3px solid #8f8f8f;
}

.c-case-table tbody th{
  background: #dbe1ea;
  font-weight: 700;
  text-align: left;
  padding: 18px 12px;
  border: 1px solid #d0d4da;
  width: 96px;
}

.c-case-table tbody td{
  background: #f3f5f8;
  padding: 14px 12px;
  border: 1px solid #d0d4da;
}

.c-case-table tbody tr + tr th,
.c-case-table tbody tr + tr td{
  border-top-color: #c8ccd2;
}

/* 列幅の目安 */
.c-case-table colgroup col:nth-child(1){ width: 8%; }
.c-case-table colgroup col:nth-child(2){ width: 17%; }
.c-case-table colgroup col:nth-child(3){ width: 23%; }
.c-case-table colgroup col:nth-child(4){ width: 32%; }
.c-case-table colgroup col:nth-child(5){ width: 20%; }







/* ========================================
   業務案内 > 材料計測データサービス
   /services/measurement.html
   ======================================== */

#service-measurement-flow{
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr;
  gap: 24px;
  margin-top: 28px;
  align-items: stretch;
}

@media (max-width: 900px){
  #service-measurement-flow{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

#service-measurement-flow .service-measurement-flow__col{
  border-radius: 20px;
  padding: 10px 12px;
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* 左ブロック */
#service-measurement-flow .service-measurement-flow__col--menu{
  flex-direction: column;
  gap: 26px;
}

#service-measurement-flow .service-measurement-flow__button{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88%;
  min-height: 66px;
  padding: 10px 18px;
  background: #d3d9e2;
  color: #333;
  text-decoration: none;
  font-weight: 700;
  box-shadow: -6px 6px 8px rgba(240, 200, 170, .45);
  position: relative;
}

#service-measurement-flow .service-measurement-flow__button.is-current{
  background: #0070c0;
  color: #fff;
}

#service-measurement-flow .service-measurement-flow__button::after{
  font-family: "Font Awesome 7 Free";
  content: "\f105";
  font-weight: 700;
  color: #ffffff;
  margin-left: 0.7em;
  font-size: 90%;
}

/* 中央ブロック */
#service-measurement-flow .service-measurement-flow__center{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  text-align: center;
}

#service-measurement-flow .service-measurement-flow__text{
  font-size: 1rem;
  line-height: 1.7;
  color: #333;
}

/* 右ブロック */
#service-measurement-flow .service-measurement-flow__box{
  width: 100%;
  padding: 16px 18px;
  border: 2px solid #f1c9b1;
  background: #fff;
  color: #333;
  line-height: 1.8;
  box-sizing: border-box;
}

/* ========================================
   共通フロー矢印（横 / 縦）
   ======================================== */

.c-flow-arrow{
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
}

/* 横向き */
.c-flow-arrow--right{
  width: 66px;
  height: 18px;
}

.c-flow-arrow--right::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 42px;
  border-top: 6px dotted #d7dce3;
  transform: translateY(-50%);
}

.c-flow-arrow--right::after{
  font-family: "Font Awesome 7 Free";
  content: "\f101";
  font-weight: 700;
  color: #d60000;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-56%);
  font-size: 1.6rem;
  line-height: 1;
}

/* 縦向き */
.c-flow-arrow--down{
  width: 18px;
  height: 66px;
}

.c-flow-arrow--down::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  height: 42px;
  border-left: 6px dotted #d7dce3;
  transform: translateX(-50%);
}

.c-flow-arrow--down::after{
  font-family: "Font Awesome 7 Free";
  content: "\f103";
  font-weight: 700;
  color: #d60000;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  font-size: 1.6rem;
  line-height: 1;
}

/* SP：中央フローを縦向きに */
@media (max-width: 900px){
  #service-measurement-flow .service-measurement-flow__col{
    min-height: 0;
  }

  #service-measurement-flow .service-measurement-flow__center{
    flex-direction: column;
    gap: 12px;
  }

  #service-measurement-flow .c-flow-arrow--right{
    width: 18px;
    height: 66px;
  }

  #service-measurement-flow .c-flow-arrow--right::before{
    left: 50%;
    top: 0;
    width: 0;
    height: 42px;
    border-top: none;
    border-left: 6px dotted #d7dce3;
    transform: translateX(-50%);
  }

  #service-measurement-flow .c-flow-arrow--right::after{
    content: "\f103";
    right: auto;
    left: 50%;
    top: auto;
    bottom: 0;
    transform: translateX(-50%);
  }
}


/* ========================================
   業務案内 > 材料計測データサービス
   measurement系 共通
   ======================================== */

/* h2 */
.c-measurement-heading{
  margin: 36px 0 18px;
  padding: 10px 16px 10px 18px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  color: #333;
  background: #F5F7FA;
  border-left: 4px solid #FF8298;
}

/* 2カラム */
.c-spec-block{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 36px;
  align-items: start;
}

@media (max-width: 900px){
  .c-spec-block{
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.c-spec-block__col{
  min-width: 0;
}

/* ラベル */
.c-spec-block__label{
  display: inline-block;
  margin: 0 0 10px;
  padding: 8px 14px;
  background: #cfe57a;
  color: #333;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}

/* 画像 */
.c-spec-block__media{
  padding: 18px;
  background: #f3f5f8;
  text-align: center;
}

.c-spec-block__media img{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* 表 */
.c-spec-block__table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.c-spec-block__table th,
.c-spec-block__table td{
  padding: 12px 14px;
  border: 1px solid #ffffff;
  vertical-align: top;
  line-height: 1.7;
}

.c-spec-block__table th{
  width: 34%;
  background: #4f81bd;
  color: #fff;
  font-weight: 700;
  text-align: left;
}

.c-spec-block__table td{
  background: #dce6f1;
  color: #333;
}




/* =========================================================
   Process Flow
   計測結果 → 同定 → FEM検証
   ========================================================= */

.c-process-flow{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 32px;
  margin-top: 28px;
  align-items: start;
}

@media (max-width: 900px){
  .c-process-flow{
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.c-process-flow__item{
  text-align: center;
}

.c-process-flow__title{
  margin: 0;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
  color: #333;
}

.c-process-flow--center-media .c-process-flow__item{
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 上下に分離 */
}

.c-process-flow--center-media .c-process-flow__media{
  margin-top: auto;
  margin-bottom: auto;
}


.c-process-flow__sub{
  display: inline-block;
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;
  color: #555;
}

.c-process-flow__arrow{
  margin: 10px 0 14px;
  line-height: 1;
}

.c-process-flow__arrow::before{
  content: "···";
  color: #d7dce3;
  letter-spacing: 2px;
  font-size: 2rem;
  vertical-align: middle;
}

.c-process-flow__arrow::after{
  font-family: "Font Awesome 7 Free";
  content: "\f101";
  font-weight: 700;
  margin-left: 8px;
  color: #d70000;
  font-size: 1.9rem;
  vertical-align: middle;
}

.c-process-flow__media{
  text-align: center;
}

.c-process-flow__media img{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* SPでは矢印を縦向きにしてもよい */
@media (max-width: 900px){
  .c-process-flow__arrow::before{
    content: "···";
    display: block;
    letter-spacing: 0;
    line-height: 1;
  }

  .c-process-flow__arrow::after{
    content: "\f103";
    display: block;
    margin: 4px 0 0;
  }
}


/* =========================================================
   Process Flow
   計測結果 → 同定 → FEM検証
   ========================================================= */

.c-process-flow{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 32px;
  margin-top: 28px;
  align-items: start;
}

@media (max-width: 900px){
  .c-process-flow{
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.c-process-flow__item{
  text-align: center;
  height:100%;
}
@media (min-width: 901px){

  .c-process-flow__item{
    padding-right: 20px;
  }

  .c-process-flow__item:not(:last-child){
    border-right: 1px solid #d9d9d9;
  }

}

.c-process-flow__head{
  display: flex;
  align-items: flex-start;	/* 上寄せ */
  justify-content: center;
  gap: 10px;
  min-height: 72px;		/* ← 画像の開始位置を揃える */
  margin-bottom: 14px;
}
@media (max-width: 900px){
  .c-process-flow__head{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    min-height: 0;
  }
}

.c-process-flow__title{
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5;
  color: #333;
}

.c-process-flow__sub{
  display: inline-block;
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;
  color: #555;
}

.c-process-flow__arrow{
  margin: 0;
  line-height: 1;
  flex: 0 0 auto;
}

.c-process-flow__arrow::before{
  content: "···";
  color: #d7dce3;
  letter-spacing: 2px;
  font-size: 2rem;
  vertical-align: middle;
}

.c-process-flow__arrow::after{
  font-family: "Font Awesome 7 Free";
  content: "\f101";
  font-weight: 700;
  margin-left: 8px;
  color: #d70000;
  font-size: 1.9rem;
  vertical-align: middle;
}

/* 最後の列は矢印なし */
.c-process-flow__item--last .c-process-flow__arrow{
  display: none;
}

.c-process-flow__media{
  text-align: center;
}

.c-process-flow__media img{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}


/* SP時の矢印を縦向きにする（SPでは head を縦積みに変え） */
@media (max-width: 900px){
  .c-process-flow__head{
    flex-direction: column;
    gap: 8px;
    min-height: 0;
  }

  .c-process-flow__arrow::before{
    content: "·\A·\A·";
    white-space: pre;
    display: block;
    letter-spacing: 0;
    line-height: .8;
    font-size: 1.4rem;
  }

  .c-process-flow__arrow::after{
    content: "\f103";
    display: block;
    margin: 4px 0 0;
  }
}






/* ========================================
   業務案内 > ソフトウェア正規代理店販売
   /services/software.html
   ======================================== */

#service-software-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
  margin-top: 28px;
  padding: 0 20px;
  background: #f3f3f3;
}

@media (max-width: 900px){
  #service-software-cards{
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    padding: 0 14px;
  }
}

@media (max-width: 680px){
  #service-software-cards{
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 0;
    background: transparent;
  }
}

#service-software-cards .service-software-card{
  padding: 18px 0 0;
}

/* ========================================
   カード本体
======================================== */

.service-software-card{
  display:flex;
  flex-direction:column;
}

.service-software-card__card{
  display: block;
  background: #fff;
  padding: 16px 18px 16px;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.service-software-card__card:hover{
  filter: brightness(.98);
}


/* ========================================
   画像
======================================== */

.service-software-card__media{
  padding: 18px 16px;
  text-align: center;
  margin-bottom: 6px;
}

.service-software-card__media img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border: solid 1px #aaaaaa;
}

/* ========================================
   タイトル
======================================== */

.service-software-card__title{
  margin: 0px 0 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: #333;
}

/* ========================================
   説明
======================================== */

#service-software-cards .service-software-card__desc{
  margin: 18px 0;
  line-height: 1.75;
  color: #333;
}
@media (max-width: 900px){
  #service-software-cards .service-software-card__desc{
    text-align:center;
  }
}


/* ========================================
   以下は旧レイアウト（不要になったため保存）
======================================== */

/*
#service-software-cards .service-software-card__body{
  padding: 12px 6px 0;
}

#service-software-cards .service-software-card__title{
  margin: 0 0 10px;
}

#service-software-cards .service-software-card__title a{
  color: inherit;
  text-decoration: none;
}

#service-software-cards .service-software-card__title a:hover{
  text-decoration: underline;
}

#service-software-cards .service-software-card__media{
  background: #fff;
}

@media (min-width: 901px){
  #service-software-cards .service-software-card__media:hover{
    filter: brightness(.98);
  }
}
*/



/* ========================================
   業務案内 > カーブフィットプログラム販売
   /services/programs.html
   業務案内 > ニュースレター ＆ テクニカルブリーフ
   /services/nltb.html
   ======================================== */
/* Media link list
--------------------------------
画像 + テキストの横並びリンク
programs / newsletter などで使用
-------------------------------- */

.c-media-link-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 60px;
  margin-top: 28px;
  /* align-items: start;   ←追加 */
}

@media (max-width: 900px){
  .c-media-link-grid{
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

/* programs.html のみ */
#programs-links{
  grid-template-areas:
    "item1 item3"
    "item2 item4";
}

#programs-links .item1{ grid-area: item1; }
#programs-links .item2{ grid-area: item2; }
#programs-links .item3{ grid-area: item3; }
#programs-links .item4{ grid-area: item4; }

@media (max-width: 900px){
  #programs-links{
    grid-template-areas:
      "item1"
      "item2"
      "item3"
      "item4";
  }
}


.c-media-link{
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 6px;

  border-top:1px solid #bbbbbb;
  border-bottom:1px solid #bbbbbb;

  text-decoration:none;
  color:inherit;
  background:#fff;
  /* align-self: start;    ←追加 */
}

.c-media-link:hover{
  background:#fafafa;
  text-decoration: none;
}

.c-media-link__media{
  flex:0 0 120px;
}

.c-media-link__media img{
  width:100%;
  height:auto;
  display:block;
  border: solid 1px #cccccc;
  padding: 4px;
}

.c-media-link__body{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.c-media-link__sub{
  font-size:.8rem;
  color:#666;
}

.c-media-link__title{
  font-size:1rem;
  font-weight:500;
  line-height:1.4;
}

/* ＞ 矢印 */

.c-media-link__title::after{
  content:"〉";
  margin-left: 1em;
  font-weight:600;
}








/* ========================================
   業務のご案内 > ソフトウェア正規代理店販売 > Abaqus 正規代理店販売
   https://www.mech-da.co.jp/ver22/services/software_abaqus.html
   ======================================== */
/* =========================================================
   Local Nav
   製品詳細ページ上部ナビ
   ========================================================= */

.c-local-nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0;
  margin-top: 8px;
}

.c-local-nav__link{
  min-width: 120px;
  padding: 10px 18px;
  border-right: 1px solid #bfc7bc;
  background: #e0e8dd;
  color: #333;
  text-align: center;
  text-decoration: none;
  line-height: 1.4;
}
.c-local-nav__link:first-child{
  border-left: 1px solid #bfc7bc;
}
.c-local-nav__link:hover{
  background: #e0e8dd;
}

/* modifier : 薄いグレー背景 */
.c-local-nav__link--gray{
  background: #f5f7fa;
}
.c-local-nav__link--gray:hover{
  background: #f5f7fa;
}

@media (max-width: 900px){
  .c-local-nav{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .c-local-nav__link{
    width: 100%;
    min-width: 0;
    border: 1px solid #bfc7bc;
  }

  .c-local-nav__link:first-child{
    border-left: 1px solid #bfc7bc;
  }
}

.c-local-nav--isactive {
  font-weight: bold;
}

/* =========================================================
   Abaqus Structure Map
   ========================================================= */

.c-abaqus-structure{
  position: relative;
  max-width: 980px;  /* 必要に応じて調整 */
  margin: 30px auto 0;
}

.c-abaqus-structure img{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* 透明リンク */

.c-abaqus-link{
  position: absolute;
  width: 48px;
  height: 48px;
  display: block;
}

.c-abaqus-link::after{
  font-family: "Font Awesome 7 Free";
  content: "\f105";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #d70000;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  padding: 2px 6px;
  background: rgba(255,255,255,.78);
  border-radius: 999px;
  pointer-events: none;
}


/* 位置はあとで微調整 */

.link-standard{
  top: 10%;
  left: 44%;
}

.link-explicit{
  top: 10%;
  left: 73%;
}

.link-isight{
  top: 9.5%;
  right: 4%;
}

.link-tosca{
  top: 41%;
  right: 4%;
}

.link-fesafe{
  top: 71%;
  right: 4%;
}

.link-prepost{
  top: 73%;
  left: 43%;
}




/* ========================================
   業務案内 > ソフトウェア正規代理店販売
   製品詳細ページ 共通
   ======================================== */

/* =========================================================
   Product Heading
   製品詳細ページ用 h3
   ========================================================= */

.c-product-heading{
  width: 50%;
  margin: 36px 0 18px;
  padding: 0 0 8px;
  border-bottom: 1px solid #999999;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
  color: #333;
}

@media (max-width: 900px){
  .c-product-heading{
    width: 100%;
    font-size: 1.35rem;
  }
}

/* =========================================================
   Product Figure Grid
   製品詳細ページ用 画像3列
   ========================================================= */

.c-product-figure-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 32px;
  margin-top: 20px;
  align-items: start;
  grid-auto-rows: minmax(0, auto);   /* Gridの高さ計算のバグ防止設定 */
}

/* 3列（既存） */
.c-product-figure-grid.is-col-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 2列 */
.c-product-figure-grid.is-col-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px){
  .c-product-figure-grid{
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
}


.c-product-figure-grid__item{
  margin: 0;
  text-align: center;
}

.c-product-figure-grid__item img{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.c-product-figure-grid__item figcaption{
  margin-top: 12px;
  line-height: 1.7;
  color: #333;
  text-align: center;
  font-size: 0.8em;
}
@media (max-width: 900px){
  .c-product-figure-grid__item figcaption{
    margin-top: 0 !important;
  }
}

.c-product-figure-grid__item figcaption strong{
  display: inline-block;
  margin-bottom: 4px;
  font-weight: 700;
}



/* 画像：垂直方向中央寄せ */
@media (min-width: 901px){
  .c-product-figure-grid--figure-align .c-product-figure-grid__img-wrap{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .c-product-figure-grid--figure-align .c-product-figure-grid__item figcaption{
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
}

@media (max-width: 900px){
  .c-product-figure-grid--figure-align .c-product-figure-grid__img-wrap{
    min-height: 0 !important;
  }
}
  .c-product-figure-grid--figure-align .c-product-figure-grid__item figcaption{
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
}





/* =========================================================
   Product Split
   左：本文 / 右：figure
   ========================================================= */

.c-product-split{
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 28px 36px;
  margin-top: 20px;
  align-items: start;
}

@media (max-width: 900px){
  .c-product-split{
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.c-product-split__main{
  min-width: 0;
}

.c-product-split__side{
  min-width: 0;
}

.c-product-split__figure{
  margin: 0;
  text-align: center;
}

.c-product-split__figure img{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 24px auto;
}

.c-product-split__figure figcaption{
  margin-top: 10px;
  line-height: 1.7;
  color: #333;
  text-align: center;
}



/* =========================================================
   Product Figure
   製品詳細ページ用 単独figure
   ========================================================= */

.c-product-figure{
  margin: 20px 0 0;
  text-align: center;
}

.c-product-figure img{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.c-product-figure figcaption{
  margin-top: 10px;
  line-height: 1.7;
  color: #333;
  text-align: center;
  font-size: 0.85em;
}

/* =========================================================
   Product Sub Heading (h4)
   製品ページ内小見出し
   ========================================================= */

.c-product-subheading{
  margin: 28px 0 10px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  color: #333;
  position: relative;
  padding-left: 1.2em;
}

.c-product-subheading::before{
  content: "■";
  position: absolute;
  left: 0;
  top: 0;
  color: #333;
  font-size: .9em;
}


/* =========================================================
   Product Compare Grid
   Tosca / Isight などの比較用
   ========================================================= */

.c-compare-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 16px;

  margin-left: auto;
  margin-right: auto;
}

.c-compare-grid__col{
  min-width: 0;
  border: 1px solid #ffffff;
}

.c-compare-grid__head{
  margin: 0;
  padding: 10px 14px;
  background: #d9d9d9;
  color: #333;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
}

.c-compare-grid__body p{
  margin: 0;
  padding: 12px 14px;
  background: #eef1f5;
  color: #333;
  line-height: 1.7;
  border-top: 1px solid #ffffff;
}
@media (max-width: 900px){
  .c-compare-grid__body p{
    line-height: 1em !important;
  }
}

.c-compare-grid__body .is-emphasis{
  color: #e60012;
  font-weight: 500;
}

@media (max-width: 900px){
  .c-compare-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}


/* =========================================================
   Product Info Table
   製品詳細ページ用 2列テーブル
   ========================================================= */

.c-product-info-table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 16px auto 0;  /* 中央寄せ */
  font-size: 1rem;
  line-height: 1.7;
}

.c-product-info-table thead th{
  padding: 10px 14px;
  background: #d9d9d9;
  color: #333;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 500;
  border: 1px solid #ffffff;
}

.c-product-info-table tbody th,
.c-product-info-table tbody td{
  padding: 12px 14px;
  border: 1px solid #ffffff;
  vertical-align: top;
}

.c-product-info-table tbody th{
  /* width: 30%; */
  background: #e7eaee;
  color: #333;
  text-align: left;
  font-weight: 500;
}

.c-product-info-table tbody td{
  background: #eef1f5;
  color: #333;
}

.c-product-info-table{
  min-width: 720px;
}



/* ========================================
   業務のご案内 > カーブフィットプログラム販売
   ======================================== */
.p_programs_def dt:first-of-type,
.p_programs_def dt:first-of-type + dd{
  border-top:1px solid #e0e0e0;
}









/* =========================================================
   産業別シミュレーション事例
   /cases/
========================================================= */
/* ========================================
   産業別シミュレーション事例
   ======================================== */

#case-industry-grid{
  display: grid;

  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    ". item1 item4 ."
    "item2 item1 item4 item5"
    ". item3 item6 .";

  gap: 28px 36px;

  max-width: 980px;
  margin: 40px auto;
  align-items: center;

}

#case-industry-grid .item1{ grid-area: item1; }
#case-industry-grid .item2{ grid-area: item2; }
#case-industry-grid .item3{ grid-area: item3; }
#case-industry-grid .item4{ grid-area: item4; }
#case-industry-grid .item5{ grid-area: item5; }
#case-industry-grid .item6{ grid-area: item6; }

/* 外側ボタンだけ上位置を下げる（PCのみ） */
@media (min-width: 901px){
  #case-industry-grid .item2,
  #case-industry-grid .item5{
    transform: translateY(100px);
  }
}

/* 画像サイズを8割くらいに */
.case-item{
  display: block;
  width: 80%;
  margin: 0 auto;
  position: relative;
}

.case-item img{
  width: 100%;
  height: auto;
  display: block;
}

/* 未完成ラベル */
.case-item__badge{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;

  display: inline-block;
  padding: 4px 10px;

  background: rgba(255,255,255,.82);
  color: #333;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 999px;
}

.case-item.is-coming{
  cursor: default;
  opacity: 0.8;
}


/*SPを2列にする */
@media (max-width: 900px){
  #case-industry-grid{
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "item1 item2"
      "item3 item6"
      "item5 item4";
    gap: 20px 18px;
    max-width: 680px;
  }

  .case-item{
    width: 100%;
  }
}



/*「解析事例はこちら」 */
.case-more-link{
  text-align: right;
  margin-top: 30px;
}

.case-more-link a{
  display: inline-block;
  padding: 12px 20px;
  border: 1px solid #17356b;
  color: #17356b;
  background: rgba(23, 53, 107, 0.08); /* ← 薄い紺 */
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.6;
  transition: background 0.3s ease, color 0.3s ease;
}
.case-more-link a:hover {
  background: #17356b;
  color: #ffffff;
}
.case-more-link .a-link-arrow::after{
  margin-left: 0.45em;
}


@media (max-width: 900px){
  .case-more-link{
    margin-top: 24px;
  }
}




/* =========================================================
   産業別シミュレーション事例 / 下層ページ
   /cases/case_transport.html
   /cases/case_materials.html
========================================================= */

/* ========================================
   case cover
   ======================================== */

.c-case-cover{
  margin: 0 0 48px;
  background: #eef2f6;
}

/* 右の画像の幅を調整 */
.c-case-cover__inner{
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
  align-items: stretch;
}

.c-case-cover__main{
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 34px;
  align-items: start;
  background: #1f4f7d;
  color: #ffffff;
  padding: 26px 32px 34px;
  min-width: 0;
}

.c-case-cover__badge{
  aspect-ratio: 1 / 1;				/* カード全体を正方形 */
  display: grid;
  grid-template-rows: 1fr auto;
  background: #002d73;
  border-radius: 30px;
  overflow: hidden;
}

.c-case-cover__badge-image{
  position: relative;
  overflow: hidden;
}

.c-case-cover__badge-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-case-cover__badge-image::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 28px rgba(255,255,255,.45),
    inset 0 0 8px rgba(255,255,255,.25),
    inset 0 0 2px rgba(0,0,0,.12);
}

.c-case-cover__badge-label{
  padding: 10px 12px 10px 12px;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: #ffffff;
}

.c-case-cover__body{
  min-width: 0;
}

.c-case-cover__title{
  margin: 34px 0 28px;
  color: #ffffff;
  font-size: 1.5rem;
  line-height: 1.35;
  font-weight: 700;
}

.c-case-cover__lead{
  margin: 0 0 18px;
  font-size: 1.05rem;
  line-height: 1.9;
}

.c-case-cover__list{
  margin: 0;
  padding-left: 1.4em;
  line-height: 1.9;
}

.c-case-cover__list li + li{
  margin-top: 8px;
}

.c-case-cover__list a{
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.c-case-cover__visual{
  position: relative;
  min-height: 100%;
  overflow: hidden;
}

/* 白半透明レイヤー */
.c-case-cover__visual::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      to right,
      rgba(255,255,255,.78) 0%,
      rgba(255,255,255,.72) 45%,
      rgba(255,255,255,.64) 100%
    );
}

.c-case-cover__visual img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1100px){
  .c-case-cover__inner{
    grid-template-columns: 1fr;
  }

  .c-case-cover__visual{
    display: none;
  }

  .c-case-cover__main{
    grid-template-columns: 140px 1fr;
  }
}

@media (max-width: 900px){
  .c-case-cover{
    margin-bottom: 34px;
  }

  .c-case-cover__main{
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 22px 16px 26px;
  }

  .c-case-cover__badge{
    width: 150px;
    max-width: 100%;
  }

  .c-case-cover__title{
    margin: 0 0 18px;
    font-size: 1.7rem;
  }

  .c-case-cover__lead{
    font-size: 1rem;
    line-height: 1.8;
  }

  .c-case-cover__list{
    line-height: 1.8;
  }
}

/* ========================================
   case subpage panel title
   ======================================== */

.c-case-stage__head{
  margin-bottom: 34px;
}

.c-subpage-panel-title--case{
  display: block;
  text-align: center;
  line-height: 1.25;
  padding: 14px 20px 12px;
}

.c-subpage-panel-title--case .c-subpage-panel-title__main{
  display: block;
  font-size: 1.95rem;
  font-weight: 700;
  line-height: 1.25;
}

.c-subpage-panel-title--case .c-subpage-panel-title__sub{
  display: block;
  margin-top: 2px;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
}

@media (max-width: 900px){
  .c-case-stage__head{
    margin-bottom: 22px;
  }

  .c-subpage-panel-title--case{
    padding: 12px 14px 10px;
  }

  .c-subpage-panel-title--case .c-subpage-panel-title__main{
    font-size: 1.5rem;
  }

  .c-subpage-panel-title--case .c-subpage-panel-title__sub{
    font-size: .95rem;
  }
}

/* ========================================
   case stage
   ======================================== */

.c-case-stage{
  margin-bottom: 56px;
}

.c-case-stage__grid{
  display: grid;
  gap: 28px;
  align-items: stretch;
}

.c-case-stage--transport .c-case-stage__grid{
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1.2fr) minmax(0, 1fr);
}

.c-case-stage__col{
  display: grid;
  gap: 28px;
  align-content: start;
}

.c-case-stage__center{
  align-self: center;
  text-align: center;
}

.c-case-stage__center-title{
  margin: 0 0 14px;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.45;
  color: #111111;
}

.c-case-stage__center img{
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 1100px){
  .c-case-stage--transport .c-case-stage__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .c-case-stage__center{
    grid-column: 1 / -1;				/* Gridの列をまたいで配置 */
    order: -1;
    max-width: 560px;
    margin: 0 auto;
  }
}

@media (max-width: 900px){
  .c-case-stage{
    margin-bottom: 42px;
  }

  .c-case-stage--transport .c-case-stage__grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .c-case-stage__col{
    gap: 18px;
  }

  .c-case-stage__center{
    order: -1;
    max-width: 520px;
  }

  .c-case-stage__center-title{
    font-size: 1.45rem;
    margin-bottom: 10px;
  }
}

/* ========================================
   case topic card
   ======================================== */

.c-case-topic-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #d7dde6;
  border-radius: 32px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.c-case-topic-card__media{
  padding: 18px;
  background: #ffffff;
  text-align: center;
  flex-shrink: 0;					/* 画像エリアは縮まない・本文だけが伸びる */
}

.c-case-topic-card__media img{
  width: 100%;
  height: 180px;					/* 画像の高さ */
  object-fit: cover;
  display: block;
}

.c-case-topic-card__body{
  flex-grow: 1;
  padding: 16px 22px 20px;
  background: #1f4f7d;
  color: #ffffff;
}

.c-case-topic-card__title{
  margin: 0 0 12px;
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
}

.c-case-topic-card__list{
  margin: 0;
  padding-left: 1.1em;
  line-height: 1.85;
  font-size: 0.9rem;
}

.c-case-topic-card__list li + li{
  margin-top: 6px;
}


/* 子階層の ul（2階層目）だけ記号を変更 */
.c-case-topic-card__list ul{
  list-style: none;        /* デフォルトの ● を消す */
  padding-left: 1.2em;     /* 少しインデント */
}

.c-case-topic-card__list ul li{
  position: relative;
}

.c-case-topic-card__list ul li::before{
  content: "›";            /* ＞に近い記号（推奨） */
  position: absolute;
  left: -1em;
  top: 0;
}


.c-case-topic-card__list a{
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  transition: opacity .18s ease;
}

.c-case-topic-card__list a:hover{
  opacity: .75;
}

.c-case-topic-card--tall .c-case-topic-card__media img{
  height: 210px;			/* 画像の高さ（カード大） */
}

@media (max-width: 900px){
  .c-case-topic-card{
    border-radius: 26px;
  }

  .c-case-topic-card__media img,
  .c-case-topic-card--tall .c-case-topic-card__media img{
    height: auto;
  }

  .c-case-topic-card__body{
    padding: 14px 18px 18px;
  }

  .c-case-topic-card__title{
    font-size: 1.2rem;
  }

  .c-case-topic-card__list{
    line-height: 1.75;
  }
}


/* ========================================
   case stage : materials
   ======================================== */

.c-case-stage--materials .c-case-stage__grid--materials{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px){
  .c-case-stage--materials .c-case-stage__grid--materials{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px){
  .c-case-stage--materials .c-case-stage__grid--materials{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}




/* =========================================================
   解析事例 / インデックス
   /cases/analytics.html
========================================================= */

/* ========================================
   analytics cover
   ======================================== */

.c-case-cover--analytics .c-case-cover__inner{
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.6fr);
}

.c-case-cover--analytics .c-case-cover__main{
  min-height: 220px;
  align-items: center;
}

.c-case-cover--analytics .c-case-cover__title{
  margin: 0;
  text-align: center;
  font-size: 2.2rem;
}

.c-case-cover--analytics .c-case-cover__visual{
  background: #e6e6e6;
}

@media (max-width: 900px){
  .c-case-cover--analytics .c-case-cover__main{
    min-height: 160px;
  }

  .c-case-cover--analytics .c-case-cover__title{
    font-size: 1.8rem;
  }
}


/* ========================================
   analytics intro
   ======================================== */

.c-analytics-index-intro{
  margin-bottom: 30px;
}

.c-analytics-index-intro__body{
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.9;
}


/* ========================================
   analytics index cards
   ======================================== */

.c-analytics-index__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.c-analytics-index-card{
  border: 1px solid #d7dde6;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  padding: 24px 24px 22px;
}

.c-analytics-index-card__title{
  margin: 0 0 24px 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1f4f7d;
}

.c-analytics-index-card__meta{
  margin: 0 0 14px;
  font-size: .95rem;
  color: #666666;
}

.c-analytics-index-card__list{
  margin: 0 0 18px;
  padding-left: 1.2em;
  line-height: 1.8;
}

.c-analytics-index-card__list li + li{
  margin-top: 4px;
}

.c-analytics-index-card__action{
  margin: 0;
}

.c-analytics-index-card__link{
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: #1f4f7d;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.c-analytics-index-card__link:hover{
  opacity: .85;
}

@media (max-width: 900px){
  .c-analytics-index__grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .c-analytics-index-card{
    padding: 20px 18px 18px;
    border-radius: 20px;
  }

  .c-analytics-index-card__title{
    font-size: 1.3rem;
  }

  .c-analytics-index-card__list{
    line-height: 1.75;
  }
}





/* =========================================================
   解析事例 / 詳細ページ共通
   /cases/analytics01.html
   /cases/analytics02.html
   /cases/analytics03.html
   /cases/analytics04.html
========================================================= */

/* ========================================
   analytics case
   ======================================== */

.c-analytics-case{
  margin-bottom: 40px;
  font-size: 0.9rem;
}

.c-analytics-case__inner{
  border-top: 1px solid #1f4f7d;
  padding-top: 18px;   				/* ←線の下の余白 */
  display: grid;
  /* grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.25fr); */
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

/* ========================================
   analytics case / left
   ======================================== */

.c-analytics-case__left{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #1f4f7d;
  color: #ffffff;
  padding: 24px 22px 20px;
  min-width: 0;
  /* justify-content: flex-start; */
  height: 100%;
}

.c-analytics-case__header{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  align-items: start;
}

.c-analytics-case__icons{
  display: grid;
  gap: 12px;
  align-content: start;
}

.c-analytics-case__icon{
  border-radius: 16px;
  overflow: hidden;
}

.c-analytics-case__icon img{
  width: 100%;
  height: auto;
  display: block;
}

.c-analytics-case__body{
  min-width: 0;
}

.c-analytics-case__title{
  margin: 0 0 16px;
  color: #ffffff;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.5;
}

.c-analytics-case__list{
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.9;
}

.c-analytics-case__list li + li{
  margin-top: 8px;
}

/* 左列・下・注釈 */
.c-analytics-case__note{
  margin: auto 0 0;			/* ← margin: 18px 0 0; */
  font-size: 0.7rem;
  line-height: 1.6;
  color: rgba(255,255,255,.92);
}



/* 01 ABS樹脂のひずみ速度依存性 */
.c-analytics-case__formula {
  padding: 0; margin: 0;
}
.c-analytics-case__formula img{
  width:380px;
  max-width: 100%;
  height: auto;
  display: block;
  padding: 0; margin: 14px 0;
}

.c-analytics-case__formula-caption{
  margin-top: 8px;
  font-size: .84rem;
  line-height: 1.5;
  color: #ffffff;
  text-align: center;
}


/* ========================================
   analytics case / right
   ======================================== */

.c-analytics-case__right{
  background: #ffffff;
  padding: 18px 18px 16px;
}

.c-analytics-case__media{
  display: grid;
  gap: 14px;
	align-items: start;
}

/* 配置パターンA	上2枚 + 下1枚横断 */
.c-analytics-case__media--type-a{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c-analytics-case__media--type-a .c-analytics-case__figure--wide{
  grid-column: 1 / -1;
}

.c-analytics-case__media--type-a .c-analytics-case__figure--wide img{
  height: auto;
}

.c-analytics-case__media--type-a .c-analytics-case__figure:not(.c-analytics-case__figure--wide){
  align-self: end;
}


/* 配置パターンB	上1枚横断 + 下2枚 */
.c-analytics-case__media--type-b{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end; /* ← これ追加 */
}

.c-analytics-case__media--type-b .c-analytics-case__figure--top{
  grid-column: 1 / -1;
}

.c-analytics-case__media--type-b .c-analytics-case__figure--top img{
  height: auto;
}


/* 配置パターンC	2×2 の4枚並び */
.c-analytics-case__media--type-c{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}


/* 配置パターンD	右側によくある「縦積み3枚」*/
.c-analytics-case__media--type-d{
  grid-template-columns: 1fr;
}

.c-analytics-case__media--type-d .c-analytics-case__figure img{
  height: auto;
}


/* 配置パターンE
1行目：2カラム（左・右）
2行目：ワイド
3行目：ワイド
*/
.c-analytics-case__media--type-e{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c-analytics-case__media--type-e .c-analytics-case__figure--wide{
  grid-column: 1 / -1;
}
@media (max-width: 900px){
  .c-analytics-case__media--type-e{
    grid-template-columns: 1fr;
  }

  .c-analytics-case__media--type-e .c-analytics-case__figure--wide{
    grid-column: auto;
  }
}


/* 配置パターンF
1行目：ワイド
2行目：ワイド
3行目：左にワイド寄り1枚、右に上下2枚
*/
.c-analytics-case__media--type-f{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "wide1 wide1"
    "wide2 wide2"
    "left  top"
    "left  bottom";
  align-items: start;
}

.c-analytics-case__media--type-f .c-analytics-case__figure--wide:nth-of-type(1){
  grid-area: wide1;
}

.c-analytics-case__media--type-f .c-analytics-case__figure--wide:nth-of-type(2){
  grid-area: wide2;
}

.c-analytics-case__media--type-f .c-analytics-case__figure--left-large{
  grid-area: left;
  align-self: center;
}
.c-analytics-case__figure--left-large img{
  display: block;
}

.c-analytics-case__media--type-f .c-analytics-case__figure--stack-top{
  grid-area: top;
}

/* SP で grid-area を強制リセット（!important） */
@media (max-width: 900px){
  .c-analytics-case__media--type-f{
    grid-template-columns: 1fr;			/* grid-template-columns を 1 列にする */
    grid-template-areas: none;
  }

  .c-analytics-case__media--type-f > *{
    grid-area: auto !important; 		/* 各要素の grid-area をリセットする */
  }
}



/* 配置パターンG　欠番 */




/* 配置パターンH
1行目：中央（拡大しない）
2行目：ワイド
3行目：中央（拡大しない）
*/ 
.c-analytics-case__media--type-h{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* type-h 専用：中央画像 */
.c-analytics-case__media--type-h .c-analytics-case__figure--center{
  text-align: center;
}

.c-analytics-case__media--type-h .c-analytics-case__figure--center img{
  width: auto;        /* 拡大しない */
  max-width: 100%;    /* 親幅を超えるときだけ縮小 */
  height: auto;
  display: block;
  margin: 0 auto;
}

/* type-h 専用：中央のワイド画像 */
.c-analytics-case__media--type-h .c-analytics-case__figure--wide img{
  width: 100%;
  height: auto;
}





/* 配置パターンI
1行目：中央
2行目：左右
3行目：ワイド
*/
.c-analytics-case__media--type-i{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* 上：中央だけ full にする */
.c-analytics-case__media--type-i .c-analytics-case__figure--center{
  grid-column: 1 / -1;
  text-align: center;
}

.c-analytics-case__media--type-i .c-analytics-case__figure--center img{
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

/* ❗ここ重要：通常のfigureは何も指定しない */
.c-analytics-case__media--type-i .c-analytics-case__figure{
  /* ← 何も書かない */
}

/* 下：ワイド */
.c-analytics-case__media--type-i .c-analytics-case__figure--wide{
  grid-column: 1 / -1;
}


/* ========================================
   analytics media type-j
   2列 + 共通キャプション
   ======================================== */

.c-analytics-case__media--type-j{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
  align-items: start;
}

.c-analytics-case__media--type-j .c-analytics-case__panel{
  min-width: 0;
  position: relative;
}

/* 左パネル本体には余計な幅減少を入れない */
.c-analytics-case__media--type-j .c-analytics-case__panel--left{
  padding-right: 0;
  border-right: 0;
}

/* 区切り線だけを疑似要素で描画 */
.c-analytics-case__media--type-j .c-analytics-case__panel--left::after{
  content: "";
  position: absolute;
  top: 0;
  right: -11px; /* gap 22px の中央 */
  width: 1px;
  height: 100%;
  background: #bfc7d2;
}

.c-analytics-case__media--type-j .c-analytics-case__panel-title{
  margin: 0 0 14px;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: #222222;
}

.c-analytics-case__media--type-j .c-analytics-case__panel-figure{
  margin: 0 0 18px;
  text-align: center;
}

.c-analytics-case__media--type-j .c-analytics-case__panel-figure img{
  width: 100%;
  height: auto;
  display: block;
}

.c-analytics-case__media--type-j .c-analytics-case__panel-list{
  margin: 0;
  padding-left: 1.15em;
  line-height: 1.8;
}

.c-analytics-case__media--type-j .c-analytics-case__panel-list li + li{
  margin-top: 6px;
}

.c-analytics-case__media--type-j .c-analytics-case__panel-caption{
  grid-column: 1 / -1;
  margin: 4px 0 0;
  text-align: center;
  font-size: .95rem;
  font-weight: bold;
  line-height: 1.6;
  color: #222222;
}

@media (max-width: 900px){
  .c-analytics-case__media--type-j{
    grid-template-columns: 1fr;
  }

  .c-analytics-case__media--type-j .c-analytics-case__panel--left::after{
    display: none;
  }

  .c-analytics-case__media--type-j .c-analytics-case__panel-caption{
    grid-column: auto;
  }
}

/* ========================================
   analytics media type-k
   上：中央（1列分の幅） / 下：左右
   ======================================== */

.c-analytics-case__media--type-k{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* 上段中央：2列をまたぐが、幅は1列分 */
.c-analytics-case__media--type-k .c-analytics-case__figure--center{
  grid-column: 1 / -1;
  width: calc((100% - 16px) / 2);   /* 下段1列分の幅 */
  justify-self: center;
  text-align: center;
}

/* type-k 内の画像はすべて自然比率 */
.c-analytics-case__media--type-k .c-analytics-case__figure img{
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 900px){
  .c-analytics-case__media--type-k{
    grid-template-columns: 1fr;
  }

  .c-analytics-case__media--type-k .c-analytics-case__figure--center{
    grid-column: auto;
    width: 100%;
    justify-self: auto;
  }
}

/* ========================================
   analytics media type-l
   左右（2:3） / 左右（2:3）
   ======================================== */

.c-analytics-case__media--type-l{
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 18px 18px;
  align-items: end;			/* 下寄せ */
}

@media (max-width: 900px){
  .c-analytics-case__media--type-l{
    grid-template-columns: 1fr;
  }
}


/* ========================================
   analytics media type-m
   1段目：中央
   2段目：左右
   3段目：左右
   ＋ 3段目の共通キャプションを横断表示
   ======================================== */

.c-analytics-case__media--type-m{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

/* 1段目：中央（拡大しない） */
.c-analytics-case__media--type-m .c-analytics-case__figure--center{
  grid-column: 1 / -1;
  text-align: center;
}

.c-analytics-case__media--type-m .c-analytics-case__figure--center img{
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 2段目・3段目：通常画像も拡大しない */
.c-analytics-case__media--type-m .c-analytics-case__figure{
  margin: 0;
  min-width: 0;
  text-align: center;
}

.c-analytics-case__media--type-m .c-analytics-case__figure img{
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 3段目の共通キャプション */
.c-analytics-case__media--type-m .c-analytics-case__caption--wide{
  grid-column: 1 / -1;
  margin-top: -4px;
  text-align: center;
}

/* type-m：動画だけ縦中央 */
.c-analytics-case__media--type-m .c-analytics-case__figure--vcenter{
  align-self: stretch;      /* 同じ行の高さまで伸ばす */
  display: flex;
  align-items: center;      /* 垂直中央 */
  justify-content: center;  /* 水平中央 */
  text-align: center;
}

/* SP */
@media (max-width: 900px){
  .c-analytics-case__media--type-m{
    grid-template-columns: 1fr;
  }

  .c-analytics-case__media--type-m .c-analytics-case__figure--center,
  .c-analytics-case__media--type-m .c-analytics-case__caption--wide{
    grid-column: auto;
  }
}



/* ========================================
   analytics case / left media
   ======================================== */

.c-analytics-case__left-media{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
  align-items: start;
}

.c-analytics-case__left-figure{
  margin: 0;
  text-align: center;
}

.c-analytics-case__left-figure img{
  width: 100%;
  height: auto;
  display: block;
}

.c-analytics-case__left-caption{
  margin-top: 8px;
  font-size: .84rem;
  line-height: 1.5;
  color: #ffffff;
  text-align: center;
}

@media (max-width: 900px){
  .c-analytics-case__left-media{
    grid-template-columns: 1fr;
  }
}



/* ========================================
   SP：1列
   ======================================== */
@media (max-width: 900px){
  .c-analytics-case__media{
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
  }

  .c-analytics-case__media > *{
    grid-column: auto !important;
    grid-area: auto !important;
  }

  /* 画像は縮尺維持 */
  .c-analytics-case__figure img{
    width: 100%;
    height: auto;
  }
}



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

   ======================================== */
.c-analytics-case__figure{
  margin: 0;
  	display: flex;
  	flex-direction: column;
}

.c-analytics-case__figure--wide{
  grid-column: 1 / -1;
}


.c-analytics-case__figure img,
.c-analytics-case__figure video{
  width: 100%;
  height: auto;
  display: block;
}

.c-analytics-case__caption{
  margin-top: 8px;
  font-size: .84rem;
  line-height: 1.5;
  color: #444444;
  text-align: center;					/* キャプション中央寄せ */
  background-color: #ffffff;
  font-weight: bold;
}

/* ========================================
   analytics case / responsive
   ======================================== */

@media (max-width: 1100px){
  .c-analytics-case__inner{
    grid-template-columns: minmax(240px, .95fr) minmax(0, 1.15fr);
  }

  .c-analytics-case__header{
    grid-template-columns: 78px 1fr;
    gap: 14px;
  }

  .c-analytics-case__title{
    font-size: 1.3rem;
  }
}

@media (max-width: 900px){
  .c-analytics-case{
    margin-bottom: 28px;
  }

  .c-analytics-case__inner{
    grid-template-columns: 1fr;
  }

  .c-analytics-case__left{
    padding: 18px 16px 16px;
  }

  .c-analytics-case__header{
    grid-template-columns: 70px 1fr;
    gap: 12px;
  }

  .c-analytics-case__title{
    font-size: 1.15rem;
    margin-bottom: 10px;
  }

  .c-analytics-case__list{
    line-height: 1.7;
  }

  .c-analytics-case__note{
    margin-top: 14px;
    font-size: .78rem;
  }

  .c-analytics-case__right{
    padding: 14px 14px 12px;
  }

  .c-analytics-case__media--type-a{
    grid-template-columns: 1fr;
  }

  .c-analytics-case__figure--wide{
    grid-column: auto;
  }

  .c-analytics-case__caption{
    font-size: .8rem;
  }
}

@media (max-width: 900px){
  .c-analytics-case__figure img,
  .c-analytics-case__figure--wide img,
  .c-analytics-case__figure--top img{
    height: auto;
  }
}


@media (max-width: 900px){
  .c-analytics-case__media--type-a,
  .c-analytics-case__media--type-b,
  .c-analytics-case__media--type-c{
    grid-template-columns: 1fr;
  }

  .c-analytics-case__media--type-a .c-analytics-case__figure--wide,
  .c-analytics-case__media--type-b .c-analytics-case__figure--top{
    grid-column: auto;
  }
}


@media (max-width: 900px){
  .c-analytics-case__media--type-b .c-analytics-case__figure--top img{
    height: auto;
  }
}






/* =========================================================
   セミナー
   seminar.html
	- max-width: 1130px
	  セミナーカードの 3列 → 2列 切り替え用
========================================================= */

#seminar-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 28px;
}

@media (max-width: 1130px){
  #seminar-cards{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px){
  #seminar-cards{
    grid-template-columns: 1fr;
  }
}

#seminar-cards .seminar-card{
  border-left: 1px solid #9c9c9c;
  border-right: 1px solid #9c9c9c;
  padding: 0 14px 18px;
  background: #fff;
}

#seminar-cards .seminar-card__head{
  position: relative;
  width: 95%;
  margin: 0 auto 52px;
  padding: 14px 12px 40px;
  background: #deebf7;
  min-height: 190px;
}

#seminar-cards .seminar-card__meta{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  min-height: 24px;
}

#seminar-cards .seminar-card__status{
  display: inline-block;
  padding: 2px 10px;
  background: #fff;
  color: #e60012;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
}

#seminar-cards .seminar-card__type{
  display: inline-block;
  padding: 2px 10px;
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,.35);
  font-size: 0.85rem;
  line-height: 1.3;
  text-align: center;
}

#seminar-cards .seminar-card__code{
  margin: 0 0 6px;
  color: #555;
  font-size: 0.95rem;
  line-height: 1.3;
}

#seminar-cards .seminar-card__title{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.45;
  font-weight: 500;
  color: #333;
  min-height: 4.5em; /* 約3行分 */
}

#seminar-cards .seminar-card__date{
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  width: 90%;
  background: #5b9bd5;
  color: #fff;
  padding: 10px 10px 10px 10px;
  font-size: 0.9rem;
  line-height: 1.55;
  font-weight: 600;
  text-align: center;
}

#seminar-cards .seminar-card__date::after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 0;
  border-color: #4b83b2 transparent transparent transparent;
}


.seminar-card__date-line{
  display: inline-block;
}

.seminar-card__date-day,
.seminar-card__date-time{
  display: inline-block;
  white-space: nowrap;
}

.seminar-card__date-note{
  display: inline-block;
}



#seminar-cards .seminar-card__body{
  width: 80%;
  margin: 0 auto;
}

#seminar-cards .seminar-card__desc{
  margin: 0 0 18px;
  color: #333;
  line-height: 1.8;
  font-size: 0.98rem;
}

#seminar-cards .seminar-card__note{
  margin: 0 0 18px;
  color: #7a7a7a;
  font-size: 0.9rem;
  line-height: 1.8;
}

#seminar-cards .seminar-card__actions{
  margin: 0;
  text-align: center;
}

#seminar-cards .seminar-card__button{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  padding: 0 20px;
  background: #7f7f7f;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  position: relative;
}

#seminar-cards .seminar-card__button::after{
  content: "＞";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #7f7f7f;
  font-size: 0.85rem;
  line-height: 1;
  font-weight: 700;
}

@media (min-width: 901px){
  #seminar-cards .seminar-card__button:hover{
    filter: brightness(.96);
  }
}


/* ========================================
   セミナー募集案内
   seminar_recruitment_*.html
   ======================================== */

/* 上部の水色情報枠 */
.c-seminar-head{
  width: 100%;
  background: #deebf7;
  padding: 18px 20px;
  box-sizing: border-box;
}

.c-seminar-head__meta{
  display: flex;
  justify-content: flex-star;		/* 左寄せ */
  /* justify-content: flex-end; */
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  min-height: 24px;
}

.c-seminar-head__status{
  display: inline-block;
  padding: 2px 10px;
  background: #fff;
  color: #e60012;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
}

.c-seminar-head__type{
  display: inline-block;
  padding: 2px 10px;
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,.35);
  font-size: 0.85rem;
  line-height: 1.3;
  text-align: center;
}

.c-seminar-head__code{
  margin: 0 0 6px;
  color: #555;
  font-size: 0.95rem;
  line-height: 1.3;
}

.c-seminar-head__title{
  margin: 0 0 14px;
  font-size: 1.3rem;
  line-height: 1.5;
  font-weight: 500;
  color: #333;
}

.c-seminar-head__date{
  margin: 0 0 8px;
  color: #333;
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 600;
}

.c-seminar-head__capacity{
  margin: 0;
  color: #333;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* 説明文 */
.c-seminar-desc{
  margin: 0 0 18px;
  color: #333;
  line-height: 1.8;
  font-size: 1rem;
}

/* 備考 */
.c-seminar-note{
  margin: 0 0 18px;
  color: #7a7a7a;
  font-size: 0.7rem;
  line-height: 1.8;
}

/* 青の点線区切り */
.c-divider-dotted{
  width: 100%;
  border-top: 2px dotted #0070C0;
}

/* 申込みボタンの幅だけ少し広め */
.c-seminar-apply{
  text-align: center;
}

.c-seminar-apply .c-split-card__button{
  min-width: 280px;
}









/* =========================================================
   会社概要
   /aboutus/
========================================================= */
/* ========================================
   会社概要
   ======================================== */
/* ■会社概要：index.html */

/* 
→c-underline-title に移行

.p_aboutus_00 {
  margin: 0; padding: 0 0 0.5em var(--gutter);
  border-bottom: solid 2px #0070C0;
  box-sizing: border-box;
  /* width: 100%; ←消す */
}
 */

/* ========================================
   会社概要 > 会社概要
   ======================================== */

/* ■company.html 見出し */
→コンポーネントに移行


/* ■company.html 定義テーブル */

/* 会社概要：定義テーブル（行ズレ対策版） */
.p_aboutus_def{
  border-top:1px solid #e0e0e0;
}

.p_aboutus_def dt,
.p_aboutus_def dd{
  padding:14px 0;
  border-bottom:1px solid #e0e0e0;
}

/* dt：セルは伸ばす（=行の高さに合わせる）＋文字は中央 */
.p_aboutus_def dt{
  font-weight:600;
  text-align:left;
  padding-left: 1em; 
  display:flex;
  align-items:center;      /* 縦中央 */
  justify-content:start;  /* 横左寄せ */
  /* align-self:center; ← これは入れない（Grid のデフォルトは セルが縦に stretch される） */
}

.p_aboutus_def dd{
  margin:0;
  padding-left: 1em; 
  line-height:1.7;
}



/* ========================================
   会社概要 > 主要取引実績
   ======================================== */

/* =========================
   clients.html（主要取引実績）
   ========================= */

/* PC：6列、SP：1列 */
.clients-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

@media (max-width: 900px){
  .clients-grid{
    grid-template-columns: 1fr;
    gap: 0px;
  }
}

/* 1列の中に最大3ブロック入る想定：block側では余白を作らない */
.clients-block + .clients-block{
  margin-top: 0;
}

/* 見出しピル */
.clients-pill{
  display: block;      /* inline-block → block */
  width: 100%;         /* 列幅いっぱい */
  padding: 10px 14px;
  border-radius: 999px;
  background: #7F7F7F;
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.2;
  text-align: center;
}

/* リスト（丸なし・余白最小） */
.clients-list{
  list-style: none;
  margin: 12px 0 18px 0.5rem;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1.7;
}

.clients-list li{
  margin: 0;
}

.clients-col:last-child .clients-list{ 
  margin-bottom: 0; 
}




/* ============================================================
   8) Main content   （本文共通ルール）
   ============================================================ */

h2{}
h3{}
c{}
ul{}
ol{}
table{}

ul.ul0 {
  margin-top:0; margin-bottom:0;
}
ol.ol0 {
  margin-top:0; margin-bottom:0;
}


/* =========================
   Main content: table (minimum)
   ========================= */
table{ width: 100%; border-collapse: collapse; }
th, td{ vertical-align: top; }

/* =========================
   PAGE: about
   Tables (temporary: t-*)
   ========================= */
/* .t-table-01{} */
/* .t-table-02{} */



/* ============================================================
   9) Footer
    ============================================================ */

/* ============================================================ */
.site-footer{
  width: 100%;
  background: linear-gradient(to bottom, #ffffff 0%, #d6dce5 100%);
  font-size: 0.75rem;
  margin-top:48px;
  flex-shrink: 0;					/* フッターが縮まないように固定 */
}

/* 中身：container揃え（既存OK） */
.site-footer__inner{
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);

  /* 見た目 */
  text-align: center;
  padding-top: 18px;
  padding-bottom: 18px;
}

/* 1段目：フッターメニュー */
.site-footer__nav-list{
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0; /* 「｜」区切りにするため gap は使わない */
}

.site-footer__nav-list a{
  color: #111;
  text-decoration: none;
}

.site-footer__nav-list a:hover,
.site-footer__nav-list a:focus-visible{
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

/* 2段目・3段目 */
.site-footer__corp{
  margin-top: 2px;   /* 4 → 2 */
  line-height: 1.3;
}

.site-footer__company{
  font-weight: normal;
  letter-spacing: .02em;
  line-height: 1.3;
}

.site-footer__copy{
  margin-top: 4px;
  font-size: 90%;
  opacity: .8;
}

/* フッターリンクを「｜」区切りにする */
.site-footer__nav-list li{
  position: relative;
  padding: 0 0px;
}

.site-footer__nav-list li:not(:last-child)::after{
  content: "｜";
  margin: 0 4px;   /* ←左右均等 文字  [4px]｜[4px] 文字 */
  opacity: .6;
}

/* SP：1段目リンクを少し詰める */

/* =========================
   6-2) Footer (SP)
   ========================= */

@media (max-width: 900px){
  .site-footer__inner{
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .site-footer__nav-list{
  }
  .site-footer__nav-list a{
    font-size: 0.9rem;
  }
}




/* ============================================================
   10) invalid CSS
    ============================================================ */
/* 未入力・不正 */
input:invalid,
textarea:invalid{
  border-color: #d33;
  background: rgba(255, 0, 0, .04);
}

/* フォーカス中は見やすく */
input:focus,
textarea:focus{
  outline: none;
  border-color: rgba(0,112,192,.8);
  box-shadow: 0 0 0 3px rgba(0,112,192,.15);
}

/* ========================================
   Contact form: minimal invalid styles
   ======================================== */
#contact-form input:invalid,
#contact-form textarea:invalid{
  border-color: #d33;
  background: rgba(255, 0, 0, .04);
}

#contact-form input:focus,
#contact-form textarea:focus{
  outline: none;
  border-color: rgba(0,112,192,.8);
  box-shadow: 0 0 0 3px rgba(0,112,192,.15);
}


/* ========================================
   Contact form
   ======================================== */

#contact-form{
  max-width: 760px;
  margin: 0 auto;
}

/* フォーム1行 */
#contact-form .c-form-row{
  margin-bottom: 22px;
}

/* ラベル */
#contact-form .c-form-label{
  margin-bottom: 6px;
  font-weight: 600;
}

/* 必須バッジ */
#contact-form .c-form-label__req{
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: .75rem;
  color: #fff;
  background: #e60012;
  border-radius: 3px;
}

/* 姓名2カラム */
#contact-form .c-form-grid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 900px){
  #contact-form .c-form-grid2{
    grid-template-columns: 1fr;
  }
}

/* 入力共通 */
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form textarea{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: .9rem;
  box-sizing: border-box;
}

/* textarea */
#contact-form textarea{
  min-height: 160px;
  resize: vertical;
}

/* checkbox */
#contact-form .c-form-checks{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#contact-form .c-form-check{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .9rem;
}

/* submit */
#contact-form .c-form-actions{
  text-align: center;
  margin-top: 32px;
}

#contact-form input[type="submit"]{
  min-width: 200px;
  height: 48px;
  border: none;
  border-radius: 999px;
  background: #0070C0;
  font-weight: 600;
  color: #ffffff;
  font-size:1.2rem;
  cursor: pointer;
}

#contact-form input[type="submit"]:hover{
  opacity: .9;
}

/* invalid */
#contact-form input:invalid,
#contact-form textarea:invalid{
  border-color: #d33;
  background: rgba(255,0,0,.04);
}

#contact-form input:focus,
#contact-form textarea:focus{
  outline: none;
  border-color: rgba(0,112,192,.8);
  box-shadow: 0 0 0 3px rgba(0,112,192,.15);
}





/* ============================================================
   11) Utilities / Debug
    ============================================================ */

/* =========
/* JS動作確認用の最小CSS */
========= */

/* 現在地リンクだけ目立たせる */
/* 
.g-nav a.is-active{
  color: red;
  font-weight: bold;
}
*/

/* 親（li）の is-active は、背景じゃなく枠や下線にする */
.g-nav li.is-active{
  outline: 1px dashed #999; /* 色は何でもOK。確認用 */
  background: transparent;
}

/* 1) CSS（最低限）：「開いた」状態の表示 */



/* =========================
   Utility
   ========================= */

@media (min-width: 901px){
  .is-sp-only{ display:none !important; }
}
@media (max-width: 900px){
  .is-pc-only{ display:none!important; }
}

@media (min-width: 901px){
  .u-left-center { text-align: left; }
  .u-center-left { text-align: center; }
}
@media (max-width: 900px){
  .u-left-center { text-align: center; }
  .u-center-left { text-align: left; }
}




/* =========================================================
   Anchor Offset
   固定ヘッダー分だけページ内リンク位置を下げる
   ========================================================= */

.c-anchor-target{
  scroll-margin-top: 90px;
}


/* =========================================================
   Back to Top
<div class="c-back-to-top">
  <a href="#top" class="c-back-to-top__link">ページ先頭へ戻る</a>
</div>
   ========================================================= */

.c-back-to-top{
  margin: 32px 0 0;
  text-align: right;
}

.c-back-to-top__link{
  display: inline-block;
  text-decoration: none;
}

.c-back-to-top__link::after{
  font-family: "Font Awesome 7 Free";
  content: "\f106";
  font-weight: 700;
  margin-left: .4em;
}


/* =========================================================
   Utility : margin / padding reset
   margin:0 padding:0 のユーティリティクラス
   ========================================================= */

.u-m0{
  margin:0 !important;
}

.u-p0{
  padding:0 !important;
}

.u-mp0{
  margin:0 !important;
  padding:0 !important;
}

.u-mt0{margin-top:0 !important;}
.u-mb0{margin-bottom:0 !important;}
.u-pt0{padding-top:0 !important;}
.u-pb0{padding-bottom:0 !important;}


/* =========================================================
   Utility : spacing helper
   | class | 意味	|
   | ----- | ----- 	|
   | u-mt1 | 上余白 小	|
   | u-mt2 | 上余白 中	|
   | u-mt3 | 上余白 大	|
   | u-mb2 | 下余白 中	|
   | u-mb3 | 下余白 大	|
   ========================================================= */

.u-mt1{margin-top:0.5rem !important;}
.u-mt2{margin-top:1rem !important;}
.u-mt3{margin-top:1.5rem !important;}
.u-mt4{margin-top:2rem !important;}

.u-mb1{margin-bottom:0.5rem !important;}
.u-mb2{margin-bottom:1rem !important;}
.u-mb3{margin-bottom:1.5rem !important;}
.u-mb4{margin-bottom:2rem !important;}

/* =========================================================
   画像中央
   caption中央
   CTA中央
   ========================================================= */

.u-center{text-align:center !important;}



/* =========================================================
   PDF Link
   ========================================================= */

a[href$=".pdf"]{
  font-weight:600;
}

/* 
a[href$=".pdf"]::after{
  font-family:"Font Awesome 7 Free";
  content:"\f1c1";   /* pdf icon */
  font-weight:700;
  margin-left:.4em;
  color:#b22222;
  font-size:.9em;
}
 */






/* =========================
   Home（トップページ）
========================= */

/* ----------------------------------------
  Home News
---------------------------------------- */

.home-news {
  padding: 80px 0;
}

/* 更新情報（テキスト型） */
.home-news__updates {
  border-top: 1px solid #d9d9d9;
  margin-bottom: 56px;
  margin-top: 24px;
}

.home-news__row {
  display: grid;
  grid-template-columns: 160px 120px 1fr;
  gap: 24px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid #d9d9d9;
}

.home-news__date,
.home-news__category,
.home-news__body {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
}

.home-news__date time {
  display: inline-block;
}

.home-news__category {
  white-space: nowrap;
}

.home-news__body {
  min-width: 0;
}
.home-news__body > .home-news__title {
  margin: 0;
  font-size: 1rem;     /* ← 100%より明示的 */
  font-weight: 400;    /* ← normalより明示的 */
  line-height: 1.8;    /* ← 任意（読みやすさ） */
}
.home-news__body .uNewsDetail {
  font-size:85%;
}


.home-news__category{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.5em;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.home-news__category--seminar{
  background: #8cc63f;
  color: #ffffff;
}

.home-news__category--notice{
  background: #5b9bd5;
  color: #ffffff;
}

.home-news__category--material{
  background: #f4a460;
  color: #ffffff;
}

.home-news__category--program{
  background: #006400;
  color: #ffffff;
}

/* セミナー情報（カード型） */
.home-news__seminar {
  margin-top: 0;
}

.home-news__subheading {
  margin: 32px 0 20px 0;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
  color: #222;
}

.home-news__subheading span {
  display: inline-block;
  margin-left: 12px;
  font-size: 0.95rem;
  color: #666;
}

.home-news__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.home-news-card {
  border: 1px solid #e3e3e3;
  background: #fff;
  padding: 24px 22px;
  height: 100%;
}

.home-news-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  font-size: 0.9rem;
  color: #666;
}

.home-news-card__tag {
  display: inline-block;
  padding: 3px 10px;
  background: #17356b;
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.4;
  border-radius: 2px;
}

.home-news-card__title {
  margin: 0 0 12px;
  font-size: 1.15rem;
  line-height: 1.6;
  color: #222;
}

.home-news-card__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #555;
}

/* SP */
@media (max-width: 768px) {
  .home-news {
    padding: 56px 0;
  }

  .home-news__updates {
    margin-bottom: 40px;
  }

  .home-news__row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 0;
  }

  .home-news__date,
  .home-news__category,
  .home-news__body {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .home-news__subheading {
    font-size: 1.25rem;
    margin-bottom: 18px;
  }

  .home-news__subheading span {
    margin-left: 8px;
    font-size: 0.9rem;
  }

  .home-news__cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .home-news-card {
    padding: 20px 16px;
  }
}



/* ----------------------------------------
  Home News - heading / more link
---------------------------------------- */

.home-news__heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin: 32px 0 20px 0;
}

.home-news__heading .home-news__subheading {
  margin: 0 0 0 0;
}

.home-news__heading-link {
  margin: 0 0 4px 0;
  flex-shrink: 0;
}

.home-news__heading-link a,
.home-news__more a {
  display: inline-block;
  color: #17356b;
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.6;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.home-news__heading-link a::after,
.home-news__more a::after {
  content: " →";
}

.home-news__heading-link a:hover,
.home-news__more a:hover {
  border-bottom-color: #17356b;
}

.home-news__more {
  margin: 20px 0 0 0;
  text-align: right;
}

/* SP */
@media (max-width: 768px) {
  .home-news__heading {
    display: block;
    margin: 32px 0 20px 0;
  }

  .home-news__heading-link {
    margin: 8px 0 0 0;
  }

  .home-news__more {
    margin: 16px 0 0 0;
    text-align: left;
  }
}







/* ----------------------------------------
  Home Hero
1枚目
	home-hero__slide--intro
	導入専用
	背景色ベース＋中央寄せ文字用
2～6枚目
	home-hero__slide--split
	中身はすべて同じ構造
	左が文章、右が画像

---------------------------------------- */

.home-hero {
  position: relative;
  width: 100%;
  margin: 24px 0 0 0;
  overflow: hidden;
  background: #ffffff;
}

.home-hero__slider {
  position: relative;
  width: 100%;
  min-height: 640px;
}

/* フェードの速さ・質感 */
/* transition: opacity 0.4s ease, visibility 0.4s ease;	ややキビキビ */
/* transition: opacity 0.6s ease, visibility 0.6s ease;	標準 */
/* transition: opacity 0.8s ease, visibility 0.8s ease;	ややゆっくり */
/* transition: opacity 1s ease, visibility 1s ease;	かなりゆっくり */
.home-hero__slide {
  position: absolute;
  inset: 0 0 0 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.home-hero__slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

/* --------------------
  slide 01 : intro
-------------------- */
/* =========================
   Home Hero - slide01（中央配置・最大幅制御）
========================= */

.home-hero__slide--intro {
  background: #012060; 				/* 外側の余白を受ける色 */
}

/* 画像を中央に配置するラッパー */
.home-hero__intro-image {
  display: flex;
  justify-content: center; 			/* 横中央 */
  align-items: center;     			/* 縦中央 */
  width: 100%;
  min-height: 640px;       			/* スライドの基準高さ */
  padding: 0 0 0 0;
}

/* 実際の画像 */
.home-hero__intro-image img {
  display: block;
  width: 100%;
  max-width: var(--container); 			/*これ以上広がらない */
  height: auto;
}

/* --------------------
  slide 02-06 : split
-------------------- */

.home-hero__slide--split {
  background: #ffffff;
}

.home-hero__slide--split .l-container {
  height: 100%;
}

.home-hero__split {
  display: grid;
  grid-template-columns: 410px 1fr; 	/* 左：410px / 右：残り（約790px） */
  align-items: stretch;
  gap: 40px;
  min-height: 510px; 			/* 右画像の高さ基準に合わせる */
  padding: 60px 0 60px 0;
}

.home-hero__content {
  padding: 0 0 0 0;
}
.home-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 上：テキスト / 下：ボタン */
}

.home-hero__label {
  display: inline-block;
  margin: 0 0 20px 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #17356b;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.home-hero__title {
  margin: 0 0 24px 0;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.4;
  font-weight: 500;
  color: #222222;
}

.home-hero__text {
  margin: 0 0 28px 0;
  font-size: 1rem;
  line-height: 2;
  color: #333333;
}

/* CTA（念のため） */
.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 0 0 0 0; /* 下寄せの邪魔をしない */
}

.home-hero__link {
  display: inline-block;
  padding: 12px 20px;
  border: 1px solid #17356b;
  color: #17356b;
  background: rgba(23, 53, 107, 0.08); /* ← 薄い紺 */
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.6;
  transition: background 0.3s ease, color 0.3s ease;
}

.home-hero__link:hover {
  background: #17356b;
  color: #ffffff;
}
.home-hero__link .a-link-arrow::after{
  margin-left: 0.45em;
}

.home-hero__link--secondary {
  border: 1px solid #c9d3e6;
  color: #333333;
}

.home-hero__link--secondary:hover {
  background: #f3f6fb;
  color: #222222;
}

.home-hero__image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.home-hero__image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* --------------------
  controls
-------------------- */

.home-hero__controls {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 5;
  display: flex;
  gap: 8px;
}

.home-hero__prev,
.home-hero__next {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(23, 53, 107, 0.85);
  color: #ffffff;
  padding: 10px 14px 10px 14px;
  font-size: 0.85rem;
  line-height: 1.4;
  cursor: pointer;
}

.home-hero__prev:hover,
.home-hero__next:hover {
  background: rgba(10, 25, 52, 0.95);
}

/* --------------------
  tablet
-------------------- */

@media (max-width: 1024px) {
  .home-hero__slider {
    min-height: 560px;
  }

  .home-hero__intro-image {
    min-height: 560px;
  }

  .home-hero__split {
    grid-template-columns: 1fr 44%;
    gap: 28px;
    min-height: 560px;
    padding: 48px 0 48px 0;
  }

  .home-hero__title {
    margin: 0 0 20px 0;
  }

  .home-hero__text {
    margin: 0 0 24px 0;
  }
}

/* --------------------
  SP
-------------------- */

@media (max-width: 900px) {
  .home-hero__slider {
    min-height: auto;
  }

  .home-hero__slide {
    position: absolute;
  }

  .home-hero__slide.is-active {
    position: relative;
  }


  .home-hero__intro-image {
    min-height: 420px;
  }

  .home-hero__split {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: auto;
    padding: 40px 0 56px 0;
  }

  .home-hero__content {
    order: 1;
  }

  .home-hero__image {
    order: 2;
  }

  .home-hero__label {
    margin: 0 0 16px 0;
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .home-hero__title {
    margin: 0 0 16px 0;
    font-size: 1.6rem;
    line-height: 1.5;
  }

  .home-hero__text {
    margin: 0 0 20px 0;
    font-size: 0.95rem;
    line-height: 1.8;
  }

  .home-hero__actions {
    gap: 10px 10px;
  }

  .home-hero__link {
    width: 100%;
    padding: 12px 16px 12px 16px;
    text-align: center;
    font-size: 0.9rem;
  }

  .home-hero__controls {
    right: 16px;
    bottom: 16px;
  }

  .home-hero__prev,
  .home-hero__next {
    padding: 8px 12px 8px 12px;
    font-size: 0.8rem;
  }
}



/* ========================================
   Top page / SP overflow fix
   トップページだけ横にはみ出してページ全体が広がる現象を抑止
   - Home Hero 周辺の要素を画面幅内に収める
   - 画像のはみ出しを防ぐ
   - 応急的に body の横スクロールも抑止
======================================== */
@media (max-width: 900px){
  .home-hero,
  .home-hero__slider,
  .home-hero__slide,
  .home-hero__split,
  .home-hero__content,
  .home-hero__image{
    min-width: 0;			/* Hero内の各要素を「画面幅以上に広がらない」ように（必要に応じて縮めてよい） */
    max-width: 100%;			/* 親要素の幅を超えて広がらない */
  }

  .home-hero__image img{
    display: block;			/* 画像下の不要な隙間や、inline要素特有の扱いを避ける */
    max-width: 100%;			/* 画像が親要素より大きくならないように */
    height: auto;			/* 横幅に合わせて高さを自然比率で調整 */
  }

  body{
    overflow-x: hidden;			/* body の横方向のはみ出しを見えなくする */
  }
}




/* --------------------
  arrows（左右ナビ）
-------------------- */

.home-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  border: none;
  background: rgba(0, 0, 0, 0.25);
  color: #ffffff;

  font-size: 1.4rem;
  line-height: 1;

  cursor: pointer;
  transition: background 0.3s ease, opacity 0.3s ease;
}

.home-hero__arrow--prev {
  left: 16px;
}

.home-hero__arrow--next {
  right: 16px;
}

.home-hero__arrow:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* --------------------
  dots（下部ナビ）
-------------------- */

.home-hero__dots {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 5;

  display: flex;
  gap: 8px;
}

.home-hero__dot {
  width: 14px;				/* ドットサイズ */
  height: 14px;				/* ドットサイズ */
  padding: 0 0 0 0;
  box-sizing: border-box;
 
  border-radius: 50%;
  border: 1px solid rgba(23, 53, 107, 0.35);

  background: rgba(255, 255, 255, 0.65);
  cursor: pointer;

  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.home-hero__dot.is-active {
  background: #17356b;
  border-color: #17356b;
  transform: scale(1.2);		/* active時の強調率 */
}

.home-hero__dot:hover {
  background: rgba(23, 53, 107, 0.45);
  border-color: rgba(23, 53, 107, 0.6);
}


/* --------------------
  SP調整
-------------------- */

@media (max-width: 768px) {

  .home-hero__arrow {
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
  }

  .home-hero__arrow--prev {
    left: 8px;
  }

  .home-hero__arrow--next {
    right: 8px;
  }

  .home-hero__dots {
    bottom: 12px;
    gap: 6px;
  }

  .home-hero__dot {
    width: 8px;
    height: 8px;
  }
}