@charset "UTF-8";

/* コラム(読み物)_インナーブロック */
.inner800{
    max-width:800px;
    margin:0em auto;
}

/* --- アコーディオン目次 全体 ----------- */
.toc {
  background: #f5f7f9;
  border: 1px solid #d8dfe5;
  border-radius: 6px;
  padding: 0;
  margin: 3em 0;
}

/* チェックボックスは非表示 */
.toc input[type="checkbox"] {
  display: none;
}

/* --- 見出し部分（クリックエリア） --- */
.toc-title {
  display: block;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 1rem;
  color: #333;
  background: #eef2f5;
  border-bottom: 1px solid #d8dfe5;
  position: relative;
  user-select: none;
}

/* ▼マーク */
.toc-title::after {
  content: "▼";
  position: absolute;
  right: 16px;
  transition: transform 0.25s ease;
  font-size: 0.9rem;
}

/* 開いたときは ▲ に反転 */
.toc input[type="checkbox"]:checked + .toc-title::after {
  transform: rotate(-180deg);
}

/* --- 内容 --- */
.toc-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  padding: 0 16px;
  font-size:1em;
}

/* チェックが入ったら開く */
.toc input[type="checkbox"]:checked ~ .toc-content {
  max-height: 1500px; /* 十分大きければOK */
  padding-bottom: 12px;
}

/* リスト基本設定 */
.toc-content ol {
  margin: 0;
  padding: 0 0 0 1.2em;
  line-height: 1.7;
  font-size: 0.95rem;
}

.toc-content li {
  margin: 0.3em 0;
}

/* 小項目 */
.toc-content ol ol {
  padding-left: 1.2em;
  margin-top: 0.3em;
  font-size: 0.9rem;
}

/* リンク */
.toc-content a {
  display: block;
  padding: 6px 4px;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #e6e8eb;
  font-weight:normal;
}

/* 最後のリンクは境界線なし */
.toc-content li.last-child > a {
  border-bottom: none;
}

.toc-content a:hover {
  font-weight:bold;
}
/* ----------- ----------- */


/* コラム_テキスト装飾 */
#column section{
  margin:0 0 2em;
}
#column h1,
#column h2,
#column h3,
#column h4,
#column p{
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  text-align:left;
  line-height:1.6;
  color:#1F1F1F;
  margin:1em 0;
}

#column h1{
  font-size:1.5em;
}
#column h2{
  font-size:1.3em;
  padding-left:1em;
  border-left:0.5em solid #ccc;
}
#column h3,
#column h4{
  font-size:1.1em;
  margin:2em 0 0.5em;
}
#column p{
  margin:0 0 0.8em 0;
  color:#444;
  font-size:1em;
  line-height:1.7;
}

#column strong{
  font-weight: bold; 
  background: none;
  color:#1F1F1F;
}


#column ul.dot-list strong,
#column ol.number-list strong { 
  font-size:1em;
}

#column ul.dot-list,
#column ol.number-list { 
  font-size:1em;
  margin-bottom:1em;
}

#column ul.dot-list {
    margin:0.5em 0;
    padding:0 0 0 1.5em;
    list-style-type:disc;
}

/*リスト（数字）*/
#column ol.number-list { 
    counter-reset: item;
    list-style-type: number;
    margin:0.5em 0;
    padding:0 0 0 1.5em;
  }

#column hr{
  margin:2.5em 0;
  border: none;
  border-top: 1px dotted #999;
}

/* [ #column .columnlist_コラムリスト ] ---------- */

.columnlist {
  width: 100%; 
  margin: 2em 0;
}
.column-row { 
  padding:0.5em;
  border-top: 1px solid #ddd;
}
.columnlist > :last-child { 
  border-bottom: 1px solid #ddd;
}

.columnlist span { 
  color:#999; 
  font-size:0.8em;
  display:block;
}

.columnlist a {color:#3c4043;}

.columnlist .text {
  padding-bottom: 3px; /* テキストと下線の間隔 */
  font-size: 1em;
  font-weight:normal;
  background-image: linear-gradient(#3c4043, #3c4043);
  background-repeat: no-repeat;
  background-position: bottom right; /* 下線の初期位置 */
  background-size: 0 1px; /* 下線のサイズ（横幅、高さ） */
  transition: background-size 0.3s;
}

.columnlist .text:hover {
  background-position: bottom left; /* 下線のホバー時位置 */
  background-size: 100% 1px; /* 下線の横幅を100%にする */
}

/* --------- */



.column-img{
  max-width:600px;
  width:100%;
  margin:2em auto;
  display:flex;
  align-items:center;
  flex-direction:column;
}
.column-img .img-caption{
  font-size:0.8em;
  text-align:center;
  color:#666;
}

.column-hosoku{
  background:#ededed;
  padding:0.5em 1em;
  margin:2em 0;
  font-size:0.9em;
  color:#535353;
}


/* コラムトップに戻るボタン */
.column-back{
    display: flex;
    justify-content: center;
    align-items: center;
    padding:3em 0;
}

.column-back a{
  display: block;
  max-width: 400px;
  width:100%;
  margin-left:1em;
  margin-right:1em;
  box-sizing: border-box;
  border: 1px solid #535353;
  padding: 0.5em 1em;
  text-align: center;
  color: #535353;
  font-size:0.85em;
  font-weight:normal;
  background-image: linear-gradient(#535353, #535353);
  background-repeat: no-repeat;
  background-position: bottom right; /* 下線の初期位置 */
  background-size: 0 1px; /* 下線のサイズ（横幅、高さ） */
  transition: background-size 0.3s;
}
.column-back a:hover{
  background-position: bottom left; /* 下線のホバー時位置 */
  background-size: 100% 3px; /* 下線の横幅を100%にする */
}

/* ------------- */