@charset "utf-8";

/***************************************
Ver 2026.02.08-
*************************************** */
:root {
    font-size:clamp(16px, 1.2vw + 12px, 19px);

  /* --- ブランドカラー --- */
  --base-green:   #007f50;   /* 誠実・安定 */
  --base-navy:    #003366;   /* 知的・信頼（HOMEや論理見出し） */
  --base-color:   #0074bf; 
  --accent:       #d45a00;   /* 注目・行動（ステップ番号等） */
  --alert-red:    #c0392c;   /* 警告・規律 */

  /* --- テキスト（可読性重視） --- */
  --text-main:    #444444ee;   
  --text-muted:   #999999;   /* タイムスタンプ・パンくず */
  --text-white:   #ffffffee; 

  /* --- 背景・面 --- */
  --bg-main:#f9f9f9;
  --bg-white:     #ffffff;
  --bg-gray:      #ddd;
  --bg-accent-light:#d45a0033;
  --bg-gray-light:#f6f6f6;
  --bg-gray-light2:#f0f0f0;
  --bg-base-light:#007fbf11; 
  --bg-alert-light: #c0392c22;
  --bg-accent-light:#d45a0011;   /* 注目・行動（ステップ番号等） */




  /* --- 枠線・装飾 --- */
  --border-light: #eeeeee;
  --border-accent:#d45a00;
  --border-main: #ddd;
  --border-dark: #999;

  /* --- 横幅・余白（レスポンシブ対応） --- */
  --width-box:     800px;
  --width-narrow:  650px;
  --width-clip:    420px;
  --width-small:   280px;


  /* --- 挙動 --- */
  --transition-base: all 0.3s ease;


}



header ,
footer { color:var(--text-white); background-color: var(--base-color) !important; }


/*-------------------------------
/*　メイン領域
/*　文字サイズ　行高　色初期化
-----------------------------------*/

/* 全体の基本設定 */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    margin: 0; padding: 0;
    color:var(--text-main); border-color:var(--border-main); background-color:var(--bg-main);
    word-wrap: break-word;
}

section , header , footer{
	position: relative; overflow: hidden;
	display: grid;
	grid-template-columns: 
    [full-start] minmax(8px, 1fr) 
    [main-start] minmax(0, 960px)
	[main-end] minmax(8px, 1fr)
	[full-end];
}

section > * , header > * , footer > * { grid-column: main; }
div.wrap-display , .grid-full{ grid-column: full; }




/*---------------------------------
 文字基本サイズ
 divにremでルートに対する倍率を入れて追従させるか、個別指定
/*---------------------------------*/
body { font-size: 1rem; line-height: 1.8; }
section h2{ font-size: 1.6em; font-weight: 700; }
section h3{ font-size: 1.4em; font-weight: 700; }
section h4{ font-size: 1.2em; font-weight: 700; }
section h5{ font-size: 1.1em; font-weight: 700; }
section p{ font-size: 1em; }
section ul{ font-size: 1em; } section ol{ font-size: 1em; } section li{ font-size: 1em; }
section ul + ul{ font-size: 0.9em; } 
section table{ font-size: 0.9em; } section th{ font-size: 1em; } section td{ font-size: 1em; } section table caption{ font-size: 1em; }
section dl{ font-size: 1.0em; } section dt{ font-size: 1.1em; font-weight: 700; } section dd{ font-size: 0.9em; }


/* 見出しの先 */
section h2 b ,
section h3 b ,
section h4 b ,
section h5 b ,
section th b{ font-size: 70%; display: block; margin-bottom: -0.25em; }
/* 見出しの後 */
section h2 span { font-size: 0.6em; display: block; letter-spacing: 0; }
section h3 span ,
section h4 span ,
section h5 span ,
section th span{ font-size: 70%; display: block; margin-top: -0.25em; }

/*---------------------------------
/*　文、箇条書きの行間基本　適宜上書き
/*---------------------------------*/
section p + p{ margin-top: 0.5em; }
section li + li{ margin-top: 0.5em; }



/*---------------------------------
 文字強調 適宜上書き
/*---------------------------------*/
section strong { font-weight: bold; color: var(--base-color); }
section em { font-style: normal; font-weight: bold; background: linear-gradient(transparent 60%, #fff3e0 60%); }
section b { font-weight: bold; }
section .warning { color: var(--alert-red); }
section .accent { font-weight: bold; color: var(--accent-red);  border-bottom: 1px dotted var(--accent-red); }

/*---------------------------------
 テキストリンク
/*---------------------------------*/
section a { color:var(--base-color); text-decoration: underline; transition: opacity 0.2s; }
section a[target="_blank"] { color:var(--alert-red); }
section a[target="_blank"]::after { content: " ⧉"; font-size: 75%; text-decoration: none; display: inline-block; vertical-align: top; }
section a:hover { opacity: 0.7; text-decoration: none; }

/*---------------------------------
/*　こまごま
/*---------------------------------*/
.strike{ text-decoration: line-through; }

span.tips{ font-size:80%; color:var(--text-muted); }

.width-narrow{ max-width: var(--width-narrow); margin-left: auto; margin-right: auto; }
.width-clip{ max-width:var(--width-clip); margin-left: auto; margin-right: auto;}
.width-small{ max-width:var(--width-small);margin-left: auto; margin-right: auto; }


/* 文中の仕切り線 */
.br::before{
	position: relative; content: ''; display: block; margin-top:-0.25em; padding-top:0.75em;
	border-top:1px dotted;  margin-left: -99px; margin-right: -99px; }



/*---------------------------------
/*　画像
/*---------------------------------*/

picture, img { display: block; max-width: 100%; height: auto; margin-left: auto; margin-right: auto; }
picture{ text-align: center; margin: 2em auto; } 
picture + picture{ margin-top: 0; } 

/* flex columnで画像の縦幅を揃える */
.img-align-height picture{ aspect-ratio: 4 / 3; max-height: 240px; overflow: hidden; padding:2em; }
.img-align-height img{ width: 100%; height:100%; object-fit: cover; margin-top: 1em;  }


/*---------------------------------
/*　TABEL
/*---------------------------------*/
/* 横スクロール */
.table-scroll{ overflow:auto;}
/* htmlに貼る
@media screen and (max-width: 420px) {.table-scroll table#table1 { display:block; white-space:nowrap; padding-bottom: 8px; } }
*/

p + table{ margin-top: 2em;}

table{
    margin-top: 1.5em;
	font-family:sans-serif;	text-align:left;
	width:fit-content; min-width:300px; overflow: auto; box-sizing:border-box;
	border-collapse:collapse; font-variant-numeric: tabular-nums; border-spacing:0;
}
@media screen and (max-width: 420px) { table { font-size:90%; } }
table:not(:last-child){ margin-bottom: 1.5em; }

caption{ text-align:left; line-height:1.5; padding-bottom:0.25em; }
caption.pre{ white-space:nowrap; text-overflow: ellipsis; }
th , td{ border:1px solid var(--border-dark) ;  box-sizing: border-box; vertical-align: middle; }
th{ padding:0.5em 0.5em; background-color:var(--bg-gray); white-space:nowrap; }
th.wrap{ white-space:normal !important; }
th[scope='row']{ width:auto; }
th[scope='col']{ width:auto; text-align:center; }

.table-col-center td{ text-align:center; }
.table-col-price td{ text-align:right; }
td{ padding:0.5em 0.5em; }

/*　縦文字にするセル */
th.cell-tatemoji ,
td.cell-tatemoji{ padding: 0; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; }

/*　注釈（小さくする） */
td.tips{ font-size: 80%; color: var(--text-muted); text-align: left; }
/*　セル内の注釈 折り返す */
td b.tips{ display: block; font-size: 80%; font-weight: normal; }

/*　table枠外の注釈（直下） */
table + p.tips{ margin-top: -1.25em !important; font-size: 0.7em; color: var(--text-muted); }
table + ul.tips{ margin-top: -1.25em !important; font-size: 0.7em; color: var(--text-muted); }
table + ul.tips li + li{ margin-top: 0 !important; line-height: 1.4; }




/*---------------------------------
/*　LIST
/*---------------------------------*/
ul{ margin:1em 0 1em 1.15em; padding: 0; }
ol{ margin:1em 0 1em 1.15em; padding: 0; }
li{ line-height: 1.6;}

/* リストマークなし（マーク分を左詰め）*/
.list-0 ,.ListMark_non{ list-style-type: none; margin-left: 0; }

/* リストマークをアルファベット（使用頻度高） */
.list-a{ list-style:upper-alpha; }
.list-a li::before { content:"" ; margin-right: 0.3vw; }
.list-a li::marker{ font-size: 90%; }

.list-icon{ list-style-type:none; }
.list-icon li{ margin-left:-16px; }
.list-icon li i{ display: inline-block; margin-right: 0.75rem; }

/* リストの中のリスト */
li ul , li ol{ margin-top: 0.5em; }
li ul li + li , li ol li + li{ margin-top:0.2em; }


/* リストをラベルにして並べる */
.list-label{ position:relative; font-size: 0.9em; display: flex; flex-wrap: wrap; gap: 1em; list-style: none; margin: 0 auto; padding: 0;  }
.list-label + .list-label{ margin-top: 1em; }
.list-label li{ list-style: none; line-height: 1; padding: 0.5em 0.75em; margin: 0; border: 1px solid var(--border-color); }



/*---------------------------------
/*　DL
/*---------------------------------*/

dt{ line-height: 1; margin-bottom: 0.75em;  }
dd{ margin-left: 0.2em; }
dd + dt{ margin-top: 2em; }
dd + dd{ margin-top: 0.5em; }

.boxset-dl dl{
    border: 1px solid var(--border-main); border-radius: 0.5em;
    padding: 1.5em; margin: 1.75em auto;
}
.boxset-dl dt{ color: var(--base-color); }



/*--------------------------------------
ページヘッダー
ピックパス　見出し　タイムスタンプ　概要説明　ショートカットリンク
---------------------------------------- */
.pagetop{ box-sizing: border-box; overflow: hidden; }
.pagetop picture{ margin: 0 auto;}
.pagetop picture img{ margin: 0 auto; }

.pagetop h1{ font-size: 1em; letter-spacing: 0.05em; font-weight: normal; }

.topic-path { font-size: 0.8em; margin:0.5em 0; }
.topic-path ol {
    display:flex; flex-wrap:wrap; align-items: center; padding:0; margin:0; list-style-type:none;
    color:var(--text-main); 
}
.topic-path li { display: flex; align-items: center; margin: 0; line-height: 1; }
.topic-path li:not(:first-child)::before { content: ">"; margin: 0 0.6em; color: #ccc; }
.topic-path li a { color:inherit; text-decoration: none; }
.topic-path li a:hover { text-decoration: underline; }
.topic-path li:last-child { display: none; }

.topic-path li:first-child a {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0 ; text-decoration: none; padding: 0.3em 0.5em;
}
.topic-path li:first-child a::before {
  content: "HOME";
  font-family: 'Verdana', 'Arial', sans-serif; 
  font-size:0.75rem; font-weight: bold; letter-spacing: 0.05em;
  border: 1px solid var(--text-main); border-radius: 2px; padding: 0.1em 0.4em; transition: all 0.2s ease;
}
.topic-path li:first-child a:hover::before { background-color: var(--text-main); color:var(--text-white); }


/* タイムスタンプ全体のコンテナ */
.time-stamp { font-size: 0.8em; margin-top: 1em; margin-bottom: 2em; }
.time-stamp ~ *:last-child{ margin-bottom: calc( 3em + 1vw ); } /* タイムスタンプの後に何かある場合は下マージンをつける */
.time-stamp:last-child{ margin-bottom:calc( 3em + 2vw ) } /* タイムスタンプの後に何もないときは下マージンを大きくとる */
.time-stamp ul { margin: 0; padding: 0; list-style: none; text-align: right; }
.time-stamp li { display: block; color:var(--text-muted); line-height: 1.4; }
.time-stamp li:first-child::before { content: "update : "; text-transform: uppercase; font-size: 60%; letter-spacing: 0.05em; margin-right: 0.3em; }
.time-stamp li:nth-child(2) { font-size: 0.75em; color: #bbb; }
.time-stamp li:nth-child(2)::before { content: ""; text-transform: uppercase; font-size: 0.9em; margin-right: 0.3em; }


/* ---------------------------
セクション基本設定
 <section class="sec-common">
------------------------------*/
.sec-common{ padding-bottom: 3em; padding-top:4em; }
.pagetop + .sec-common{ padding-top:calc( 4em + 2vw);}


.sec-common h2{
    color: var(--text-main); line-height: 1.5; letter-spacing: 0.1em; text-align: left; 
    border-bottom: 3px solid var(--base-color); padding-bottom: 0.2em; margin:0; /* 下マージンはつけない */
}
.sec-common h3{
    position: relative; margin: 2em 0 0; /* 下マージンはつけない */
    color: var(--text-main); letter-spacing: 0.08em; text-align: left;
    border-left: 0.3em solid var(--base-color); padding-left: 0.4em;
}
.sec-common h2 + h3{ margin-top: 1.5em; }
.sec-common h2 + p ,
.sec-common h3 + p{ margin-top: 2em; }

.sec-common h3.br{ margin-top: 4em;}
.sec-common h3.br::before{
    position:absolute; content: ""; top:-2.5em; left:0; width: 100%;
    border-top: 1px dotted var(--text-main);
}  

.sec-common h4{
    position: relative; margin: 1.5em 0 0; /* 下マージンはつけない */
    color: var(--text-main); letter-spacing: 0.08em; text-align: left;
}



/* ---------------------------
 グリッド基本 
------------------------------*/
.wrap-grid{ display: grid; grid-template-columns: 1fr; gap: calc( 0.25em + 1vw ); margin: 2em 0; }
@media (min-width: 499px) { .wrap-grid { grid-template-columns: 1fr 1fr; } }
.wrap-grid-image-text { display: grid; gap: calc( 0.25em + 1vw ); align-items: flex-start; margin-bottom: 3em; }
@media (min-width: 499px) { .wrap-grid-image-text { grid-template-columns: 1fr 2fr; } }


/* ---------------------------
 フレックス
 とにかく並べる
------------------------------*/
.wrap-flex{ display: flex; flex-wrap: wrap; gap:1.5em; margin: 2em auto; }
.wrap-flex *{ flex:1;}

/* ---------------------------
 ボックスを縦カラム化（ボタンや画像の位置を揃える）
------------------------------*/
.set-col{ display: flex; flex-direction: column; }
.set-col >:last-child{ margin-top: auto; margin-bottom: 0;}

/* ---------------------------
 フレックスやグリッドのボックス
------------------------------*/
.box-item { font-size: 0.9em; color: var(--text-main); }
.wrap-grid .box-item{ border: 1px solid var(--border-main); padding: 1.5em; border-radius: 0.3em; }

.box-item h4:first-child ,
.box-item h3:first-child { color: var(--base-color); margin: 0 0 1em; }

.box-item p + p{ margin-top: 0.25em; }

.box-item picture:not(:last-child){ margin-bottom: 1.5em; }

/* ボックス下部にボタンを設置 */
.box-item .btn{ width: 100%; margin-top: auto; margin-bottom: 0; } /* flex-column で下詰めする設定 */
.box-item .btn a {
    display: block; text-align: center; padding: 1em; margin-top: 1em; border-radius: 4px; 
    color:var(--text-white); line-height: 1; background: var(--base-color);
    text-decoration: none; font-weight: bold;
}


/* ---------------------------
ボックス
------------------------------*/
.boxset1{
    background: var(--bg-gray-light); border-radius: 0.5em; box-shadow: 1px 1px 5px #66666699;
    padding: 1.75em; margin: 1.75em auto;
}
.boxset1 h3 { color: var(--base-color); margin: 0 0 0.5em; }
.boxset1 h4:first-child { margin-top: 0; }

.boxset2{
    font-size: 0.95em;
    border: 1px solid var(--border-main); background-color: var(--bg-gray-light);
    padding: 1em; margin: 1.5em auto; overflow: hidden;
    width:100%; /* 原因不明のインライン化の暫定対処 */
}
.boxset2 h4{ font-size: 1.0em; overflow: hidden; }


.boxset2 h4:first-child ,
.boxset2 h3:first-child { 
    font-size: 1.1em; border: none; margin: 0 -0.5em 0.75em; padding: 0.25em 0.5em; overflow: hidden;
    background-color: var(--bg-gray);
}


/* ボックスに追加するバリエーション */
.boxset2.type0{ border: none; background:none; }
.boxset2.type-small { font-size: 95%; padding: 1em; }
.boxset2.type-gray { filter: grayscale(100%); }
.boxset2.type-warning { border-top-color: var(--alert-red) !important; background-color: var(--bg-gray-light) !important; }
.boxset2.type-warning h4:first-child ,
.boxset2.type-warning h3:first-child { color: var(--alert-red); border-color: var(--alert-red); }

.boxset2.type1 { border-top: 4px solid var(--base-color); background-color: var(--bg-gray-light); }
.boxset2.type2 { border-top: 4px solid var(--alert-red); }
.boxset2.type2 h3 { color: var(--text-main); border-color: var(--text-main); }
.boxset2.type3 { box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.boxset2.type3 h3 { color: #444; }


/* 汎用ボックス色付き */
.boxset2.type-repo-1{ /* ベースカラー */
    border-color: var(--base-color); background-color: var(--bg-base-light); border-radius: 3px; }
.boxset2.type-repo-1 h3 ,
.boxset2.type-repo-1 h4{ background-color:var(--bg-gray-light); }

.boxset2.type-repo-2{ /* 警告色系 */
    border-color: var(--alert-red); background-color: var(--bg-alert-light); border-radius: 3px;
}
.boxset2.type-repo-3{ /* ベースカラー枠太 */
    border-color: var(--base-color); background-color: var(--bg-base-light); border-radius: 3px; border-width: calc( 4px + 0.1vw );
}


/* 汎用ボックステキストセット */
.boxset2.type-repo-1 h3, .boxset2.type-repo-1 h4{ color: var(--text-white); background-color: var(--base-color); }
.boxset2.type-repo-2 h3, .boxset2.type-repo-2 h4{ color:var(--text-white); background-color:var(--alert-red); }
.boxset2.type-repo-3 h3, .boxset2.type-repo-3 h4{ color: var(--text-white); background-color: var(--base-color); }



/* 算数解法解説用 */
.boxset2.type-math-1{ /* 問題 */
    border: calc( 4px + 0.1vw ) solid var(--base-green); background-color:#f5f5dc;
    width: fit-content; margin-inline: auto; margin-block: 2em 1.5em;
}
.boxset2.type-math-2{ /* 答え */
    border-color: var(--accent); background-color: var(--bg-accent-light); border-radius: 3px; border-width: 3px; font-weight: 700;
    width: fit-content; margin-inline: auto; min-width: var(--width-small); text-align: center;
}
.boxset2.type-math-3{ /* 説明 */
    border-color: var(--base-color); background-color: var(--bg-base-light); border-radius: 3px;
}
.boxset2.type-math-4{ /* 説明2 */
    border-color: var(--accent); background-color: var(--bg-accent-light); border-radius: 3px; 
}


/* グリッドやフレックスを内包するボックス */
.boxset-wrap-grid{
      background: var(--bg-gray-light); border: 1px solid var(--border-main); border-radius: 4px;
      padding: 1.5em;  margin-bottom: 2em;
}


/* 見出し直下の上マージン制御   */
/* ボックス汎用設定の最後に書く */
h2 + .boxset1 ,
h2 + .boxset2
h3 + .boxset1 ,
h3 + .boxset2{ margin-top: 1.5em; }

/* ボックスカラーセット   */
/* ボックス汎用設定の最後に書く */
.box-colorset-1{ border-color: var(--base-color) !important; background-color: var(--bg-base-light) !important; }
.box-colorset-2{ border-color: var(--accent) !important; }
.box-colorset-warning{ border-color: var(--alert-red) !important; background-color: var(--alert-red-light) !important; }





/* ---------------------------
 インデックスページ用　ナビグリッド
<div class="grid-nav-list">
------------------------------*/
.grid-nav-list{ display:block; grid-template-columns: 1fr; gap: calc( 0.25em + 1vw ); margin: 2em 0; }
@media (min-width: 699px) { .grid-nav-list { display: grid; grid-template-columns: 1fr 1fr; } }



/*----------------------------------------------------
/*　リンクボタン2
    リストをボタン化してFLEXで並べる
    隠しテキスト付
<nav class="linkbtn2">
<ul>
<li class="color-box-blue"><a href="info/index.html">リンクアンカー</a><b><i class="fa-solid fa-square-caret-right"></i>表示テキスト<i class="fa-solid fa-arrow-up-right-from-square"></i></b></li>
</ul>
</nav>
/*---------------------------------*/

.link-list2{ font-size: 0.85em; padding: 2px; margin:2em auto; display: flex; align-items: center; }
.link-list2 ul{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding: 0; }
.link-list2 li{ line-height: 1; margin:0; padding:0; border: 1px solid currentColor; border-radius: 4px; overflow: hidden; }
.link-list2 a { display: block; color: currentColor; text-decoration: none; padding:calc( 0.4em + 0.3vw ) calc( 0.5em + 0.2vw); min-width: 5em; }



/*---------------------------------
/*　改変履歴
/*---------------------------------*/

section.sec_updatelog{
	font-size: 0.85em; margin: 0; padding: 2em; background-color: var(--bg-gray);
}
section.sec_updatelog h2{
	font-size:1.1em; line-height:1.75; position: relative; text-align: center;
	padding: 1.5em 12px; margin: 0 ; border: 2px dotted dimgray;
}
.sec_updatelog ul{ list-style:none; margin-top:1em ; margin-bottom:1em ; margin-left:0; padding-left:0.5em; }
.sec_updatelog ul li{ line-height:1.75; border-bottom:1px dotted #a0a0a0; padding-top:0.75em; padding-bottom:0.75em; }
.sec_updatelog ul li > span{ margin-right:0.75em;}




/*-----------------------------
ページ下部に設置するナビ
-----------------------------*/
.sub-footer-grid{ font-size: 0.9em; margin-top: 2em; border-top: 1px dotted var(--border-main); }
.sub-footer-grid ul { display: grid; grid-template-columns: 1fr 1fr; gap:0 1em; align-items: end; margin: 2em auto; }
.sub-footer-grid li{
    display: block; border-radius: 0.3em; padding: 0;
    font-size: 1em; font-weight: bold; line-height: 1.4; list-style: none; 
    text-align: center; text-decoration: none;
}
.sub-footer-grid li a{ display: block; padding: 1.5em 0.5em; color: currentColor; text-decoration: none; }
.sub-footer-grid ul li:nth-child(1){ background-color:var(--base-color); color:var(--text-white); border: 1px solid var(--base-color); }
.sub-footer-grid ul li:nth-child(2){ color: var(--base-color); border: 1px solid var(--base-color); }
.sub-footer-grid ul li:nth-child(3){
    grid-column: 1 / -1; padding: 0.5em; margin-top: 0;
    font-size: 0.9em; color: var(--text-main); font-weight: normal; text-decoration:underline;
}
/* スマホでは縦に積む */
@media (max-width: 599px) { .sub-footer-grid ul { grid-template-columns: 1fr; gap: 1em; } }


/*---------------------------------
 トークアイコン付きボックス
<div class="boxset-talk">

-----------------------------------*/
.boxset-talk{
	margin: 2em 0; border-radius: 16px 4px 4px 16px;
	padding: 1em 1em 1em calc( 2.5em + 10vw ) ; 
	min-height: 5em;
	border-width:calc( 1px + 0.2vw ); border-style: solid;
	display: flex; flex-direction: column; justify-content: center;
	background-image: url(../images/talkD.webp) ;
	background-repeat: no-repeat;
	background-position: center left;
	background-size:calc( 2em + 10vw );
	background-color: #fffcf5; border-color:#666655 ; /* yellow */
}

.boxset-talk + .boxset-talk{ margin-top: -1em; }

@media screen and (max-width: 600px) {
	.boxset-talk { display: block; font-size: 88%; background-size:100px; background-position: left 0.75em; padding:0.75em; }
	.boxset-talk p{ display:inline-block;}
	.boxset-talk P:first-child::before {  float: left; content: ''; width: 5.5em; height:5.75em; }
	.boxset-talk ul { margin-left:60px; }
}
/*****************************/
/*  talk
/*****************************/

.wrap_talk p::before{ border-color:transparent; }
.wrap_talk p { background-color: #ccc; color: #484848; }


.wrap_talk{ clear:both; margin:2rem -0.5vw ; padding:1rem 0; overflow:auto; }
.wrap_talk hr{ clear:both; border:none; }

/* トークボックス 共通 */
.wrap_talk .boxE ,
.wrap_talk .boxC ,
.wrap_talk .boxB ,
.wrap_talk .boxA {
	display: flex; align-items: center;
	clear:both; margin-bottom:calc( 0.5em + 0.25vw );
}

 /* 丸アイコン 共通 */
.wrap_talk .boxC:after ,
.wrap_talk .boxB:after ,
.wrap_talk .boxE::before ,
.wrap_talk .boxA::before {
	content:''; display:inline-block;
	width:calc( 48px + 1vw ); min-width:48px; height:calc( 48px + 1vw );
	vertical-align:top; border-radius:50%; background-size:cover; background-repeat:no-repeat;
}
/* ふきだしの三角 共通 */
.wrap_talk p::before ,
.wrap_talk p::after { content: ''; position:absolute; top:8px; border: 12px solid transparent; }


/* ふきだしの本体 共通 */
.wrap_talk p { 
	position:relative;
	font-family:"Sawarabi Gothic"; font-size:calc( 0.8em + 0.2vw );
	padding: 0.75em !important; line-height: 140%;
	margin: 0; border-radius:10px;
}


/* 左のトークボックス */
.wrap_talk .boxE ,
.wrap_talk .boxA { margin-right: 36px ; }
.wrap_talk .boxA:before { background-image:url(../images/talkA2.webp); }
.wrap_talk .boxE:before { background-image:url(../images/talkE1.webp); }

.wrap_talk .iconA1:before { background-image:url(../images/talkA.webp); }
.wrap_talk .iconA3:before { background-image:url(../images/talkA3.webp); }

.wrap_talk .boxE p:before ,
.wrap_talk .boxA p:before { left:-20px; border-right-color:PaleGreen; border-width: 12px; border-style: solid; }
.wrap_talk .boxE p ,
.wrap_talk .boxA p { margin-left: 10px; background-color:PaleGreen; }


/* 右のトークボックス */
.wrap_talk .boxC ,
.wrap_talk .boxB { float:right; margin-left:48px; }
.wrap_talk .boxB:after{ background-image:url(../images/talkB1.webp); }
.wrap_talk .boxC:after{ background-image:url(../images/talkC.webp); }
.wrap_talk .boxC p:after ,
.wrap_talk .boxB p:after { right:-20px; border-left-color:rgb(232,198,63); border-width: 12px; border-style: solid; }
.wrap_talk .boxC p ,
.wrap_talk .boxB p { margin-right: 10px; background-color:rgb(232,198,63); }




/*---------------------------------
 志願倍率一覧のページ
<div class="shigan">
<table>
-----------------------------------*/
.shigan{ overflow: auto; }
.shigan tr:nth-child(n+3) td{ font-size: 80%;}
.shigan th{ font-weight: normal; }
.shigan td{ text-align: center; }
.shigan tr:nth-child(2n) td{ background-color: #fafaff; }
.shigan ul { display: flex; flex-wrap: nowrap; justify-content: center; align-items: baseline; list-style:none; margin: 0; padding: 0; }
.shigan ul li:nth-child(2)  { font-size: 60%; }
.shigan ul li + li::before { content: "/"; }

@media screen and (max-width: 420px) {.shigan table { display:block; white-space:nowrap; padding-bottom: 8px; } }

/*---------------------------------
 学校一覧一覧のページ
<div class="table-scroll">
<table id="table2" class="table-col-center table-school-list">
-----------------------------------*/

.table-school-list{ font-size: 0.85em; }

.table-school-list th{ color: var(--text-body); font-weight: normal; }
.table-school-list th a{ color: currentColor; }

/*--------------------------------------
/*--------------------------------------
/*--------------------------------------
/*--------------------------------------
/*--------------------------------------
/* 汎用設計の後に書く */

/*---------------------------------
 背景色
/*---------------------------------*/
.bg-gray{ background-color: var(--bg-gray);}
.bg-gray-light{ background-color: var(--bg-gray-light);}

.bg-warning{ background-color: var(--alert-red);}
.bg-warning-light{ background-color: var(--bg-alert-light);}
.bg-base-light{ background-color: var(--bg-base-light);}
.bg-accent-light{ background-color: var(--bg-accent-light);}