/* -----------------------------------
   ページ内リンクの固定ヘッダー分ずれ回避
   ----------------------------------- */
.anchor {
    /* マージンとパディングのハックを廃止 */
    padding-top: 0;
    margin-top: 0;

    /* 現代的な解決策：スクロールが止まる位置だけをずらす */
    scroll-margin-top: 50px;}


/* -----------------------------------
   進路別情報へのリンクボックス
   ----------------------------------- */
/* 外側のコンテナ */
.career-container {
    width: 100%;
    padding: 7cqw 0;
    display: flex;
    flex-direction: column;
    gap: 3.75cqw; /* ボックス同士の隙間 */
}

/* 横長ボックスの基本設定 */
.career-box {
    display: flex;
    align-items: center;
    width: 86cqw;
    height: 26.25cqw; /* 画像の比率に合わせた高さ */
    margin: 0 auto;
    background: #fff;
    border: 0.2cqw solid #3F8CD0;/* 水色の枠線 */
    border-radius: 2.0cqw;     /* 角丸 */
    overflow: hidden;         /* 画像の角を枠線に合わせて切り取る */
    text-decoration: none;    /* リンクの下線を消す */
}

/* 左側の画像エリア */
.career-img {
    width: 30.0cqw;           /* 画像の横幅 */
    height: 100%;
}

.career-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* 枠内にきれいに収める */
}

/* 中央のテキスト */
.career-text {
    flex: 1;                  /* 残りの幅をすべて使う */
    padding-left: 4cqw;
}

/* 右側の矢印（Font Awesome アイコン） */
.career-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10cqw;    /* アイコンのクリック/表示エリアを確保 */
    margin-right: 2cqw;
}

.career-arrow::before {
    /* ユーザー指定のプロパティ */
    content: "\f054"; /* fa-chevron-right の Unicode */
    font-family: "Font Awesome 7 Free"; 
    font-weight: 900; /* Solid アイコン用 */
    
    /* スタイル調整 */
    font-size: 4.2cqw;  /* 画面幅に合わせたアイコンサイズ */
    color: #C0C0C0;     /* 枠線と合わせた水色 */
}


/* -----------------------------------
   進路選びのポイントタイトル
   ----------------------------------- */
.point-header {
    display: flex;
    align-items: center;    /* 画像とテキストの上下中央を揃える */
    padding-left: 7cqw;     /* 左端から画像までの距離を指定 */
    width: 100%;
    box-sizing: border-box;
    margin: 5cqw 0;
}

.point-label {
    width: 11.0cqw;           /* 画像の幅を11cqwに指定 */
    height: auto;
    flex-shrink: 0;         /* テキスト量が増えても画像が潰れないように固定 */
}

.point-title {
    /* font-size: 4.2cqw; */      /* テキストのフォントサイズを指定 */
    /* color: #3b74ad; */         /* image_4b5fc0.png に基づいた青色 */
    /* font-weight: bold; */
    /* line-height: 1.4; */       /* 行間を調整して読みやすくする */
    margin-left: 4cqw;      /* 画像とテキストの間の余白（デザインに合わせて微調整可） */
    margin-top: 0;
    margin-bottom: 0;
    letter-spacing: 0.02em; /* 文字間隔を少し広げて読みやすく */
}


/* -----------------------------------
   大学入試の仕組みタイトル
   ----------------------------------- */
.method-header {
    display: flex;
    align-items: center;    /* 画像とテキストの上下中央を揃える */
    padding-left: 7cqw;     /* 左端から画像までの距離を指定 */
    width: 100%;
    box-sizing: border-box;
    margin: 5cqw 0;
}

.method-label {
    width: 15.6cqw;           /* 画像の幅を11cqwに指定 */
    height: auto;
    flex-shrink: 0;         /* テキスト量が増えても画像が潰れないように固定 */
}

.method-title {
    /* font-size: 4.2cqw; */      /* テキストのフォントサイズを指定 */
    /* color: #3b74ad; */         /* image_4b5fc0.png に基づいた青色 */
    /* font-weight: bold; */
    /* line-height: 1.4; */       /* 行間を調整して読みやすくする */
    margin-left: 4cqw;      /* 画像とテキストの間の余白（デザインに合わせて微調整可） */
    margin-top: 0;
    margin-bottom: 0;
    letter-spacing: 0.02em; /* 文字間隔を少し広げて読みやすく */
}


/* -----------------------------------
   進路サポートの2×2のグリッド
   ----------------------------------- */
/* グリッドコンテナ */
.support-grid {
  display: flex;
  flex-wrap: wrap;       /* 折り返しを許可 */
  gap: 2.4cqw;           /* 指定の間隔 */
  width: 90cqw;          /* 43.8*2 + 2.4 = 90cqw */
  margin: 5cqw auto;     /* 横中央配置 */
  justify-content: center;
}

/* 各矩形（サポートボックス） */
.support-item {
  width: 43.8cqw;        /* 指定の幅 */
  height: 53.0cqw;       /* 指定の高さ */
  background: #F2F2F2;        /* Lightgrey */
  /* background: transparent; */ /* 背景を透明にする場合 */
  /* border: 1px solid #aecde9; */ /* 水色の枠線 */
  border-radius: 2.0cqw;
  
  display: flex;
  flex-direction: column;
  align-items: center;    /* 横中央揃え */
  /* justify-content: center; */ /* 縦中央揃え */
  box-sizing: border-box;
  padding-top: 4cqw;
}

/* イラストのサイズ調整 */
.support-illust {
  width: 15.8cqw;          /* 箱に収まる適切なサイズ */
  height: auto;
  margin-bottom: 2cqw;   /* テキストとの間隔 */
}


/* -----------------------------------
   指定校推薦の説明ボックス
   ----------------------------------- */
.yellow-info-box {
  width: 86cqw;                       /* 指定の幅 */
  background-color: rgba(253, 253, 150, 0.5); /* 指定の黄色（透明度50%） */
  padding: 5cqw;                      /* 上下左右すべての余白を5cqwに指定 */
  margin: 5cqw auto;                  /* 前後の余白と横中央寄せ */
  /*  border-radius: 10px; */         /* 角丸（任意） */
  box-sizing: border-box;             /* 余白を含めて幅86cqwにする設定 */
}


/* -----------------------------------
   成績 110 番なら（では）バナー
   ----------------------------------- */
/* バナーの外枠 */
.banner-box {
    position: relative;
    width: 86cqw;           /* 指定の幅 */
    height: 36cqw;          /* 指定の高さ */
    margin: 5cqw auto;      /* 前後の余白と中央寄せ */
    /* border-radius: 2.0cqw; */   /* 角丸 */
    border: 0.2cqw solid #afeeee; /* 薄い枠線を入れると背景に馴染みます */
    overflow: hidden;       /* 斜線がはみ出さないように */
    box-sizing: border-box;
}

/* 中央のイラスト */
.banner-illust {
    position: absolute;
    top: 6.7cqw;            /* 指定の上端からの距離 */
    left: 50%;
    transform: translateX(-50%); /* 横中央揃え */
    width: 56.25cqw;        /* 指定の幅 */
    height: auto;
}

/* 下部のテキスト */
.banner-text {
    position: absolute;
    top: 17.0cqw;           /* 上端からの位置調整 */
    left: 0;
    width: 100%;
    text-align: center;     /* 横中央揃え */
    font-size: 4.2cqw;      /* バナー内の適切な文字サイズ */
    font-weight: bold;
    color: #808080;         /* 濃い目のグレー */
    line-height: 1.4;
    margin: 0;
}


/* ---------------------------------------------
   受験方式判断ポイントと比較表（ゼブラ配色版）
   --------------------------------------------- */
.examList {
  border-collapse: separate; 
  border-spacing: 0;
  border-radius: 2cqw;
  border: 0.3cqw solid #418FD6; /* 青 */
  overflow: hidden;
  width: 100%;
  table-layout: fixed;
}

/* 見出し（th）の設定 */
.examList th {
  border-bottom: 0.2cqw solid #418FD6;
  border-right: 0.2cqw solid #418FD6;
  background-color: #ffffff; /* 見出し背景：白 */
  color: #000000;           /* 文字色：黒 */
  font-size: 4.2cqw;
  height: 10.1cqw; 
  line-height: 1.2;
  vertical-align: middle;
}

/* 内容の行（td）の共通設定 */
.examList td {
  border-bottom: 0.2cqw solid #418FD6;
  border-right: 0.2cqw solid #418FD6;
  padding: 0 1cqw;
  font-size: 4.2cqw;
  height: 10.1cqw; 
  line-height: 1.2;
  vertical-align: middle;
}

/* --- 行の背景色を交互に変える設定 --- */

/* 奇数行（1, 3行目...）を薄い青に */
.examList tbody tr:nth-of-type(odd) td {
  background-color: #e0f7fa; 
}

/* 偶数行（2, 4行目...）を白に */
.examList tbody tr:nth-of-type(even) td {
  background-color: #ffffff;
}

/* 右端と最下行の余計な線を消す */
.examList th:last-child,
.examList td:last-child {
  border-right: none;
}
.examList tr:last-child td {
  border-bottom: none;
}


/* ----------------------------------------------------
   （短大）受験方式判断ポイント・受験サポート　バナー
   ---------------------------------------------------- */
/* バナーの外枠 */
.banner-box-coll {
    position: relative;
    width: 86cqw;           /* 指定の幅 */
    height: 27cqw;          /* 指定の高さ */
    margin: 5cqw auto;      /* 前後の余白と中央寄せ */
    /* border-radius: 2.0cqw; */   /* 角丸 */
    border: 0.2cqw solid #fdfd96; /* 薄い枠線を入れると背景に馴染みます */
    overflow: hidden;       /* 斜線がはみ出さないように */
    box-sizing: border-box;
}

/* 内部のテキスト */
.banner-text-coll {
    position: absolute;
    top: 3.8cqw;           /* 上端からの位置調整 */
    left: 0;
    width: 100%;
    text-align: center;     /* 横中央揃え */
    font-size: 5.8cqw;      /* バナー内の適切な文字サイズ */
    /* font-weight: bold; */
    color: #000000;         /* 黒 */
    line-height: 1.7;
    margin: 0;
}


/* -----------------------------------
   学部タイトルデザイン
   ----------------------------------- */
/* 学部ごとの色定義クラス（ここを切り替える） */
/* （水色）4大：文学部,経済学部・経営学部,工学部,医学部・歯学部,家政学部
   短大：幼児教育・保育系,社会福祉系,情報・デザイン系
   専門学校：保育・幼児教育系,美容・ファッション系,ペット・動物系 */
.faculty_lblue	{ --faculty-bg-color: #afeeee; }

/* （黄色）4大：外国語学部,教育学部,農学部,薬学部,芸術学部
   短大：食物・栄養系,医療・看護系,芸術（美術・音楽）系
   専門学校：医療・看護／医療事務系,観光・サービス・ホテル系,ブライダル・ウエディング系 */
.faculty_yellow	{ --faculty-bg-color: #fdfd96; }

/* （ピンク）4大：法学部,理学部,看護学部・医療系学部,獣医学部,スポーツ学部
   短大：家政・被服・ライフデザイン系,ビジネス・観光系
   専門学校：IT・デザイン系,公務員・ビジネス系,調理・製菓・食系 */
.faculty_pink	{ --faculty-bg-color: #ffd1dc; }

/* ヘッダー全体（突起を含むコンテナ） */
.faculty-header {
  width: 100cqw;
  /* 全体の高さは 長方形 48.4 + 突起 6.25 = 54.65cqw */
  height: calc(48.4cqw + 6.25cqw);
  position: relative;
  box-sizing: border-box;
  margin-bottom: 5cqw; /* 必要に応じて下の余白を調整 */
}

/* 長方形部分（メインコンテンツエリア） */
.header-rectangle {
  width: 100cqw;
  height: 48.4cqw;
  /* 色定義クラスで指定された変数を使用 */
  background-color: var(--faculty-bg-color); 
  position: relative;
  z-index: 1; /* 画像を突起の上に表示するため */
}

/* 下部の突起部分（疑似要素） */
.header-rectangle::after {
  content: "";
  position: absolute;
  /* 長方形の下端中央に配置 */
  bottom: -6.25cqw; /* 突起の高さ分下にずらす */
  left: 50%;
  transform: translateX(-50%);
  
  /* 指定のサイズ */
  width: 8.6cqw; /* 突起の幅 */
  height: 6.25cqw; /* 突起の高さ */
  
  /* 長方形と同じ背景色を使用 */
  background-color: var(--faculty-bg-color);
  
  /* CSSで下向き三角形を作成 */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: -1; /* 画像の下に配置 */
}

/* 【画像1】左上の学部ID */
.illust-faculty-id {
  position: absolute;
  /* 指定の位置 */
  top: 6cqw;
  left: 7cqw;
  /* 指定の幅 */
  width: 15.6cqw;
  height: auto; /* 比率を維持 */
}

/* 【画像2】中央の学部名 */
.illust-faculty-main {
  position: absolute;
  /* 指定の位置（上端から） */
  top: 15.6cqw;
  /* 横中央揃え */
  left: 50%;
  transform: translateX(-50%);
  /* 指定の幅 */
  width: 90cqw;
  height: auto; /* 比率を維持 */
}

/* 【画像2】中央の学部名（短大：家政・被服・ライフデザイン系）
   ここだけ位置がちがうので、専用のクラスを設置 */
.illust-faculty-main-coll_kasei {
  position: absolute;
  /* 指定の位置（上端から） */
  top: 12.5cqw;
  /* 横中央揃え */
  left: 50%;
  transform: translateX(-50%);
  /* 指定の幅 */
  width: 90cqw;
  height: auto; /* 比率を維持 */
}


/* -------------------------------------------------
   色つきの太い下線（文章は改行しないで<span>で囲む）
   ------------------------------------------------- */
/* 色（#D7EEFF）つきの太い下線（少し下線が文字と重なる） */
.colorful-underline {
    position: relative;
    display: inline-block;
}
.colorful-underline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.12em; /* 文字の下端より少し下に配置 */
    height: 0.7em;  /* 下線の太さ */
    background: #D7EEFF;
    mix-blend-mode: multiply; /* ← 文字の下に自然に馴染む */
}

/* 学部紹介内の色つきの下線（学部毎に色が変わる） */
/* 学部タイトルデザインの学部ごとの色定義クラスを利用 */
.faculty-colorful-underline {
    position: relative;
    display: inline-block;
}
.faculty-colorful-underline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.30em; /* 文字の下端より少し上に配置 */
    height: 0.4em;  /* 下線の太さ */
    background-color: var(--faculty-bg-color); /* 色定義クラスで指定された変数を使用 */
    mix-blend-mode: multiply; /* ← 文字の下に自然に馴染む */
}


/* -----------------------------------
   写真の角を丸く
   ----------------------------------- */
.img-rounded {
    border-radius: 3cqw;
}


/* -----------------------------------
   薄い斜線のパターン
   ----------------------------------- */
/* 進路ごとの色定義クラス（ここを切り替える） */
.diagonal-color-univ	{ --diagonal-color: rgba(224, 247, 250, 0.2); } /* 4大（水色(#e0f7fa) 不透明度20%） */
.diagonal-color-univ-b	{ --diagonal-color: rgba(224, 247, 250, 1.0); } /* バナー用 4大（水色(#e0f7fa) 不透明度100%） */
.diagonal-color-coll	{ --diagonal-color: rgba(253, 253, 150, 0.2); } /* 短大（黄色(#fdfd96) 不透明度20%） */
.diagonal-color-coll-b	{ --diagonal-color: rgba(253, 253, 150, 1.0); } /* バナー用 短大（黄色(#fdfd96) 不透明度100%） */
.diagonal-color-ptc	{ --diagonal-color: rgba(255, 209, 220, 0.2); } /* 専門学校（ピンク(#ffd1dc) 不透明度20%） */
.diagonal-color-ptc-b	{ --diagonal-color: rgba(255, 209, 220, 1.0); } /* バナー用 専門学校（ピンク(#ffd1dc) 不透明度100%） */

.bg_diagonal {
  background-color: #ffffff; /* ベースとなる背景色（非常に薄いグレーや白） */
  /* 斜線パターン */
  background-image: repeating-linear-gradient(
    -45deg,          /* 斜線の角度（45度なら右上がり、-45度なら右下がり） */
    transparent,
    transparent 10px, /* 透明な部分の幅（5px） */
    var(--diagonal-color) 10px, /* 斜線の色（変数を適用）と開始位置 */
    var(--diagonal-color) 20px  /* 斜線の色（変数を適用）と終了位置：差のpxが線の太さになる */
  );
  
  /* パターンのサイズを固定（画面幅に応じて線が太くならないようにpx指定がおすすめ） */
  /* background-size: 20px 20px; */
}


/* -----------------------------------
    Font Awesome（文頭にアイコン）
   ----------------------------------- */
/* Icon Name ： check - ----------------------------- */
/* アイコン用クラスの定義 */
.fa-check-before-text {
    /* <span>自体を非表示にするか、インラインブロック要素として扱う */
    display: inline-block;
    vertical-align: 0%; /* テキストとの縦位置を合わせる */
}

.fa-check-before-text::before {
    /* 1. checkアイコンの Unicode を指定 */
    content: "\f00c"; 
    /* 2. Font Awesome のフォントとウェイトを指定 (Solidアイコン用) */
    font-family: "Font Awesome 7 Free"; 
    font-weight: 900; 
    /* 3. アイコンのスタイル調整 */
    color: #000000; /* 黒 */
/*    font-size: 1em; */ /* フォントサイズは別に指定 */
    margin-right: 2cqw; /* テキストとの間に隙間を空ける */
}


/* -----------------------------------------------------------
   リンク案内
   ----------------------------------------------------------- */
/* リンク案内のタイトル */
.l_title {
	display: flex;               /* Flexboxを有効化 */
	justify-content: center;    /* 水平方向に中央揃え */
	margin:0 auto; /* 横方向の中央揃え */
}


/* リンク案内のBOX */
.l_box {
	display: flex;               /* Flexboxを有効化 */
	justify-content: center;    /* 水平方向に中央揃え */
	align-items: center;        /* 垂直方向に中央揃え */
	width:84cqw;
	height:11cqw;
	margin:0 auto; /* 横方向の中央揃え */
	line-height:11cqw;
	background:#418FD6;
	color:#fff;
	border-radius:5.5cqw;
	text-align:center;
}

.l_box a {
	text-decoration:underline;
}


/* -----------------------------------
   インデックスリスト
   ----------------------------------- */
/* 白背景、右に矢印 */
.indexList	{
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #ddd; /* リストの上に薄い線 */
}

.indexList li	{
  display: flex;
  align-items: center;              /* 縦中央揃え */
  justify-content: space-between;   /* テキストとアイコンを両端に配置 */
  padding: 3.4cqw 2cqw 3.4cqw 4cqw ;	    /* 上 | 右 | 下 | 左 */
  border-bottom: 1px solid #ddd; /* 下線 */
}
	
.indexList a {
  text-decoration: none; /* 下線を消す */
  /* color: #000000; */	 /* 色指定を別classで指定するため削除 */
  font-weight: 500; /* 500=Medium */
  font-size: 4.2cqw;	 /* フォントサイズ */
  letter-spacing: -0.05em; /* 文字間隔 */
  flex: 1;               /* アイコンを右に寄せるためリンクを広げる */}

/* 色指定専用のクラス */
.idx-black a { color: #000000; } /* 黒 */
.idx-blue a  { color: #418FD6; } /* 青 */

/* 子要素（学部名など）のインデント調整 */
.indexList li.idx-child a {
    padding-left: 6cqw; /* 左側に余白を設ける */
}

.indexList li::after {
  /* Font Awesome アイコン (fa-chevron-right) の表示に必要なプロパティ */
  content: "\f054"; /* fa-chevron-right の Unicode */
  font-family: "Font Awesome 7 Free"; 
  font-weight: 900; /* Solid アイコン用 */

  /* スタイルの適用 */
  color: #C0C0C0; /* アイコンの色 */
  font-size: 3.8cqw; /* アイコンサイズ */
  
  /* Flexbox内での調整 */
  margin-left: 2cqw; /* リンクテキストとの間隔を確保 */
  flex-shrink: 0; /* アイコンが縮まないように固定 */
}


/* --------------------------------------------------------------
   「遷移元ページに戻るボタン」を追加
   -------------------------------------------------------------- */
/* ボタン全体を囲むコンテナ */
.floating-buttons-left {
	position: fixed;
	left: 5cqw; /* 左端から30px */
	bottom: 17cqw; /* 既存のpagetopと同じ高さ */
	z-index: 1000; /* 他の要素の上に表示 */
	display: flex; /* ボタンを横並びにする */
	flex-direction: column; /* ボタンを縦に並べる（既存のpagetopと縦位置を合わせるため） */
	gap: 3cqw; /* ボタン間の間隔 */
}

/* 個別ボタンの設定 */
.floating-buttons-left p {
	margin: 0; /* pタグのデフォルトマージンをリセット */
}