@charset "utf-8";
/* CSS Document */
*{
	box-sizing:border-box;
	padding:0;
	margin:0;
	word-break:normal;
	word-wrap:break-word;
}
img{
	vertical-align:bottom;
	margin:0;
	padding:0;
	border:0;
	max-width:100%;
}
.clearfix:before,
.clearfix:after{
	display: table;
  	content: " ";
}
.clearfix:after{
	clear: both;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
td,
th {
  padding: 0;
}
table {
  background-color: transparent;
}
table col[class*="col-"] {
  position: static;
  display: table-column;
  float: none;
}
table td[class*="col-"],
table th[class*="col-"] {
  position: static;
  display: table-cell;
  float: none;
}
ul li{
	list-style:circle;
}
h1,h2,h3,h4,h5,h6,p{
	margin:0px;
}

p{
	font-size: 15px;
	font-weight: normal;
}

.article-toc li,.article-table-note li{
  list-style: none!important;
}

.fixedcontainer{
	width:1024px;
	margin:0 auto;
	padding:0px;
}
a{
	color: inherit;
}
a:visited,
a:link,
a:hover,
a:active,
a:focus{
	outline:none;
	text-decoration:none;
}
a:hover{
	opacity:0.8;
	transition:opacity 0.5s ease;
}

.mt-m{
	margin-top: 12px;
}

.red{
	color: #F03C3C;
}
.gray{
	color: #8F8F8F;
}
.bkyellow{
	background-color:#fff100;
}
.bold{
	font-weight:bold;
}
.btline{
	text-decoration:underline;	
}
.underline{
	text-decoration:underline;
}
.text-center{
	text-align:center;
}
.text-left{
	text-align:left;
}
.text-right{
	text-align:right;
}
.visible-sp{
	display:none;
}
.hidden-sp{
	display:block;
}
.visible-xs{
	display:none;
}
.hidden-xs{
	display:block;
}
.visible-500{
	display:none;
}
.hidden-500{
	display:block;
}
.flex{
  display:-webkit-flex;
    display:-webkit-box;
    display:-moz-flex;
    display:-moz-box;
    display:-ms-flexbox;
    display:flex;
    flex-direction:row;
    flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch
}

@media screen and (max-width:650px){
	.flex,
	.flex-change{
		flex-flow: column !important;
	}
	.flex > div{
		width: 100%;
	}
	.flex-padding > *{
		padding: 0 !important;
	}
	.flex-sp{
		flex-flow: row !important;
	}
}
/*-------------header----------------------*/
/* -----------------------------------
   メインビジュアル（アイキャッチ画像）
----------------------------------- */
.article-main-visual {
  margin-top: 24px;
  margin-bottom: 40px;
}

.article-main-visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* PCでもスマホでも美しい16:9の比率を維持 */
  object-fit: cover;    /* 画像が歪まないようにトリミング */
  border-radius: 12px;  /* 通常の画像より少し角丸を大きくしてリッチに */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* 少し強めの影で奥行きを出す */
  margin-bottom: 0;     /* コンテナ側で余白を取るためゼロに */
}

/* -----------------------------------
   リード文（導入段落）
----------------------------------- */
.article-container .article-lead {
  font-size: 1.6rem;/* 通常のテキストより少し大きく */
  font-weight: 500;
  color: #4A5568; /* 通常テキストより少しトーンを変えて視認性を高める */
  line-height: 1.8;
  margin-bottom: 48px;
}

/* -----------------------------------
   モバイル向けレスポンシブ調整（既存のメディアクエリ内に追記）
----------------------------------- */
@media (max-width: 768px) {
  /* 既存のコード... */

  .article-main-visual {
    margin-top: 16px;
    margin-bottom: 32px;
  }
  .article-container {
    margin: 50px auto 0;
  }

  .article-container .article-lead {
    font-size: 1.6rem;
    margin-bottom: 40px;
  }
}
/* -----------------------------------
   変数設定（カラーパレット）
----------------------------------- */
:root {
  --article-primary: #1A202C; /* 見出し用：高級感のあるダークネイビー */
  --article-accent: #D69E2E;  /* 装飾用：夜空に映える落ち着いたゴールド */
  --article-text: #333333;    /* 本文用：真っ黒を避けた読みやすいダークグレー */
  --article-bg: #FFFFFF;      /* 背景色 */
  --article-link: #2B6CB0;    /* リンク色：信頼感のあるブルー */
}

/* -----------------------------------
   記事コンテナ（幅の制御と中央揃え）
----------------------------------- */
.article-container {
  max-width: 800px; /* 視線移動が多すぎない、読みやすい最大幅 */
  margin: 100px auto 0;
  padding: 60px 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--article-text);
  background-color: var(--article-bg);
  line-height: 1.8; /* 英語の長文が読みやすい広めの行間 */
  font-size: 16px;
  letter-spacing: 0.03em;
}

/* -----------------------------------
   見出し (Typography)
----------------------------------- */
.article-container h1 {
  font-size: 3rem;
  color: var(--article-primary);
  line-height: 1.3;
  margin-bottom: 24px;
  font-weight: 700;
}

.article-container h2 {
  font-size: 2.5rem;
  color: var(--article-primary);
  line-height: 1.4;
  margin-top: 56px;
  margin-bottom: 24px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--article-accent); /* ゴールドの下線でセクションを区切る */
}

.article-container h3 {
  font-size:2rem;
  color: var(--article-primary);
  line-height: 1.5;
  margin-top: 40px;
  margin-bottom: 16px;
  font-weight: 600;
}

/* -----------------------------------
   本文・段落
----------------------------------- */
.article-container p {
  margin-top: 0;
  margin-bottom: 24px;
}

/* -----------------------------------
   リンク
----------------------------------- */
.article-container a {
  color: var(--article-link);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity 0.3s ease;
}

.article-container a:hover {
  opacity: 0.7;
}

/* -----------------------------------
   リスト（箇条書き）
----------------------------------- */
.article-container ul, 
.article-container ol {
  margin-top: 0;
  margin-bottom: 28px;
  padding-left: 24px;
}

.article-container li {
  margin-bottom: 10px;
}

/* -----------------------------------
   画像
----------------------------------- */
.article-container img {
  max-width: 100%;
  height: auto;
  border-radius: 8px; /* 少し角を丸めてモダンな印象に */
  margin: 0 auto 32px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* 軽い影で画像を浮き立たせる */
  display: block;
}

/* -----------------------------------
   モバイル向けレスポンシブ調整
----------------------------------- */
@media (max-width: 768px) {
  .article-container {
    margin: 50px auto 0;
    font-size: 15px; /* スマホでは少し文字を小さく */
  }

  .article-container h1 {
    font-size: 2.2rem;
  }

  .article-container h2 {
    font-size: 2.0rem;
    margin-top: 40px;
  }

  .article-container h3 {
    font-size: 1.8rem;
    margin-top: 32px;
  }
}

/* -----------------------------------
   テーブル（表）
----------------------------------- */
/* スマホでの横スクロール用コンテナ */
.article-table-wrapper {
  overflow-x: auto;
  margin-bottom: 32px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 表全体を少し浮かせる */
  background-color: #FFFFFF;
}

.article-container table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px; /* スマホでも列が極端に潰れないように最低幅を設定 */
  text-align: left;
  font-size: 0.95rem;
}

.article-container th,
.article-container td {
  padding: 16px;
  border-bottom: 1px solid #E2E8F0; /* 薄いグレーの区切り線 */
  vertical-align: top; /* 文字を上揃えにして読みやすく */
  font-size: 1.4rem;
}

/* テーブルのヘッダー（一番上の行）および、左端の見出し行 */
.article-container thead th,
.article-container tbody th {
  background-color: #F7FAFC; /* ごく薄い青みグレーで区別 */
  color: var(--article-primary);
  font-weight: 600;
  font-size: 1.4rem;
}

/* 一番上の行は少し文字を小さくしてスッキリ見せる */
.article-container thead th {
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid #CBD5E0; /* ヘッダーの下は少し太い線 */
}

/* 最後の行の下線を消す */
.article-container tr:last-child th,
.article-container tr:last-child td {
  border-bottom: none;
}

/* PC閲覧時、行にマウスを乗せたら少し色を変える（読みやすさ向上） */
@media (hover: hover) {
  .article-container tbody tr:hover {
    background-color: #F8FAFC;
  }
}

/* -----------------------------------
   モバイル向けレスポンシブ調整（既存のメディアクエリ内に追記）
----------------------------------- */
@media (max-width: 768px) {
  /* 既存のコード... */

  .article-table-wrapper {
    margin-bottom: 24px;
    border-radius: 4px; /* スマホでは角丸を少し小さく */
  }

  .article-container th,
  .article-container td {
    padding: 12px; /* スマホでは余白を少し詰める */
  }
}
/* -----------------------------------
   テーブル下の注意書き（注釈）
----------------------------------- */
.article-table-note {
  margin-top: -24px; /* テーブルとの間隔を少し詰める（ラッパーのmarginを相殺） */
  margin-bottom: 32px;
  padding-left: 0;
  list-style: none;
  font-size: 0.85rem; /* 本文より少し小さく */
  color: #718096;     /* 目立ちすぎない落ち着いたグレー */
  line-height: 1.6;
}

.article-table-note li {
  margin-bottom: 4px;
  position: relative;
  padding-left: 14px; /* アスタリスク用の余白 */
  font-size: 1.1rem;
}

/* リストの先頭に自動でアスタリスクを付与 */
.article-table-note li::before {
  content: "*";
  position: absolute;
  left: 0;
  top: 0;
  color: #A0AEC0; /* アスタリスクの色を少し薄くする */
}

/* -----------------------------------
   モバイル向けレスポンシブ調整（既存のメディアクエリ内に追記）
----------------------------------- */
@media (max-width: 768px) {
  /* 既存のコード... */

  .article-table-note {
    margin-top: -16px; /* スマホ用に余白を調整 */
    font-size: 0.8rem;
  }
}
/* -----------------------------------
   LP誘導エリア（CTAボックス）
----------------------------------- */
.article-cta-box {
  margin: 48px 0;
  padding: 40px 32px;
  background-color: #F8FAFC; /* ごく薄い青みグレーで記事本文と区別 */
  border: 1px solid #E2E8F0; /* 繊細な枠線 */
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); /* 軽い影で浮かせる */
}

.article-cta-box h4 {
  font-size: 2rem;
  color: var(--article-primary);
  margin-top: 0;
  margin-bottom: 12px;
  font-weight: 700;
}

.article-cta-box p {
  font-size: 1.4rem;
  color: #4A5568;
  margin-bottom: 24px;
  line-height: 1.6;
}

/* -----------------------------------
   予約ボタン（CTAボタン）
----------------------------------- */
.article-btn {
  display: inline-block;
  background-color: var(--article-accent); /* ゴールド系のアクセントカラー */
  color: #FFFFFF; /* ボタンの文字は白 */
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: none;
  padding: 16px 32px;
  border-radius: 50px; /* 丸みを持たせてクリックしやすく */
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(214, 158, 46, 0.3); /* ゴールドの淡い影 */
}

.article-btn:hover {
  background-color: #B7791F; /* ホバー時に少し濃いゴールドへ */
  color: #FFFFFF; /* ホバー時も文字色は白をキープ（既存のaタグスタイルを上書き） */
  transform: translateY(-2px); /* ふわっと少し浮き上がる動き */
  box-shadow: 0 6px 12px rgba(214, 158, 46, 0.4);
  opacity: 1;
}

/* -----------------------------------
   ボタン下のマイクロコピー（限定感の演出）
----------------------------------- */
.article-cta-note {
  display: block;
  margin-top: 12px;
  font-size: 1.2rem;
  color: #E53E3E; /* 注意を引く落ち着いた赤 */
  font-weight: 500;
}

/* -----------------------------------
   モバイル向けレスポンシブ調整（既存のメディアクエリ内に追記）
----------------------------------- */
@media (max-width: 768px) {
  /* 既存のコード... */

  .article-cta-box {
    margin: 40px 0;
    padding: 32px 20px;
  }

  .article-cta-box h4 {
    font-size: 1.25rem;
  }

  .article-btn {
    display: block; /* スマホでは横幅いっぱいのボタンに */
    width: 100%;
    box-sizing: border-box;
    padding: 16px 24px;
  }
}
/* -----------------------------------
   目次 (Table of Contents)
----------------------------------- */
.article-toc {
  background-color: #F7FAFC; /* ごく薄い青みグレー */
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 24px 32px;
  margin-bottom: 48px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.article-toc .toc-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--article-primary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

/* 目次アイコンの代わりになるシンプルな装飾 */
.article-toc .toc-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 20px;
  background-color: var(--article-accent); /* ゴールドのアクセント */
  margin-right: 12px;
  border-radius: 2px;
}

.article-toc ul {
  list-style: none; /* デフォルトの黒丸を消す */
  padding-left: 0;
  margin: 0;
}

.article-toc li {
  margin-bottom: 12px;
  border-bottom: 1px dashed #CBD5E0; /* リンク間に薄い破線を引いて読みやすく */
  padding-bottom: 8px;
}

.article-toc li:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.article-toc a {
  color: #2D3748; /* 通常のリンク色(青)ではなく、落ち着いたグレーに */
  text-decoration: none;
  font-weight: 500;
  display: block; /* クリックできる範囲を広げる */
  transition: color 0.2s ease;
}

.article-toc a:hover {
  color: var(--article-accent); /* ホバー時にゴールドへ */
}

/* -----------------------------------
   モバイル向けレスポンシブ調整（既存のメディアクエリ内に追記）
----------------------------------- */
@media (max-width: 768px) {
  /* 既存のコード... */

  .article-toc {
    padding: 20px;
    margin-bottom: 40px;
  }

  .article-toc .toc-title {
    font-size: 1.8rem;
    margin-bottom: 12px;
  }

  .article-toc li {
    font-size: 1.6rem;
  }
}
/* -----------------------------------
   スムーズスクロールと固定ヘッダー対策
----------------------------------- */
html {
  /* ① 瞬間移動ではなく、スムーズにスクロールさせる */
  scroll-behavior: smooth;
  
  /* ② 固定ヘッダーの高さ分（100px）、着地位置を下にずらす */
  scroll-padding-top: 150px; 
}