@charset "UTF-8";
/* =====================================================
   training_normal.html 専用（style_2.css）
   - 重複を整理
   - 余白/文字組み/カード/表/FAQを整えて見やすく
   ===================================================== */

/* --------
   Design tokens
-------- */
:root{
  --tn-bg: #faf7ef;
  --tn-surface: #ffffff;
  --tn-text: #222;
  --tn-muted: rgba(0,0,0,.65);
  --tn-border: rgba(0,0,0,.10);
  --tn-shadow: 0 10px 30px rgba(0,0,0,.07);

  --tn-accent: #f3a11a;   /* オレンジ系 */
  --tn-accent-2: #f6d95a; /* 見出しライン */
  --tn-danger: #C8002D;

  --tn-radius: 14px;
  --tn-radius-sm: 10px;

  --tn-max: 1000px;
}



/* --------
   Layout
-------- */
.training-wrap{
  max-width: var(--tn-max);
  margin: 0 auto;
  padding: 34px 20px 70px;
  color: var(--tn-text);
}

.training-wrap a{
  color: inherit;
  text-decoration: none;
}
.training-wrap a:hover{
  text-decoration: underline;
}

/* --------
   Hero
-------- */
.training-hero{
  background: var(--tn-surface);
  border: 1px solid var(--tn-border);
  border-radius: var(--tn-radius);
  box-shadow: var(--tn-shadow);
  padding: 24px 22px;
}

.training-hero__label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px 5px;
  border-radius: 999px;
  background: var(--tn-accent);
  color: #fff;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 1.5rem;
}

.training-hero h2{
  margin: 14px 0 10px;
  font-size: 30px;
  line-height: 1.35;
  letter-spacing: .02em;
}

.training-hero .lead{
  margin: 10px 0 0;
  line-height: 1.9;
}

.training-hero .points{
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.training-hero .points li{
  padding: 12px 14px;
  border-radius: var(--tn-radius-sm);
  background: #fffaf0;
  border: 1px dashed rgba(243,161,26,.45);
  font-weight: 800;
  color: #a55a00;
}

/* 強調ボックス */
.callout{
  font-size: 1.25rem;
  margin-top: 16px;
  color: var(--tn-danger);
  font-weight: 800;
  line-height: 1.8;
}

/* 注釈 */
.note{
  margin-top: 12px;
    color: var(--tn-text);
  font-size: 14px;
  line-height: 1.8;
}

/* --------
   TOC
-------- */
.training-toc{
  margin-top: 18px;
  padding: 18px 18px;
  border-radius: var(--tn-radius);
  background: #fff7d6;
  border: 1px solid rgba(0,0,0,.08);
}

.training-toc__title{
  margin: 0 0 12px;
  font-weight: 900;
  text-align: center;
  letter-spacing: .08em;
}

.training-toc ul{
  margin: 0;
  padding-left: 18px;
}

.training-toc li{
  margin: 6px 0;
  font-size: .92rem;
}

.training-toc a{
  display: block;
  padding: 8px 0;
  border-bottom: 1px dotted rgba(0,0,0,.25);
}

/* --------
   Section card
-------- */
.training-section{
  margin-top: 22px;
  padding: 22px 20px;
  border-radius: var(--tn-radius);
  background: var(--tn-surface);
  border: 1px solid var(--tn-border);
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
}

.training-section h3{
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 1.4;
  padding-left: 12px;
  border-left: 6px solid var(--tn-accent-2);
  letter-spacing: .02em;
}

.training-section h4{
  margin: 18px 0 10px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 900;
}

.training-section p {
  line-height: 1.9;
  margin: 0;
}

.training-section li{
  line-height: 1.9;
}

/* ページ内リンクのズレ対策（固定ヘッダー想定） */
.anchor{
  scroll-margin-top: 120px;
}

/* --------
   Lists
-------- */
/* 既存HTMLで <ul class="dash"> を使っている想定 */
ul.dash{
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

ul.dash li{
    font-size: .85rem;
  position: relative;
  padding-left: 18px;
}

ul.dash li::before{
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--tn-accent);
  font-weight: 900;
}

/* 受講料リスト */
.fee-list{
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.fee-list li{
  background: #fafafa;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--tn-radius-sm);
  padding: 12px 14px;
}
.fee-list li strong {
    color: var(--tn-danger);
}

/* --------
   Place blocks
-------- */
.place-block{
  background: #fafafa;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--tn-radius-sm);
  padding: 14px 14px;
  margin-top: 12px;
}

.place-block h4{
  margin: 0 0 8px;
}

/* --------
   Table (Curriculum)
-------- */
.table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--tn-radius-sm);
  border: 1px solid rgba(0,0,0,.10);
}

table.curriculum{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 740px; /* 横スクロール可にして崩れを防ぐ */
  background: #fff;
}

table.curriculum th,
table.curriculum td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  vertical-align: top;
  line-height: 1.75;
  font-size: .85rem;
}

table.curriculum th{
  width: 160px;
  background: #fff7d6;
  font-weight: 900;
  border-right: 1px solid rgba(0,0,0,.08);
}

table.curriculum td:nth-child(2) {
    border-right: 1px solid rgba(0,0,0,.08);
}

table.curriculum tr:last-child th,
table.curriculum tr:last-child td{
  border-bottom: none;
}

/* --------
   FAQ（HTML側は <dl class="faq">）
-------- */
dl.faq{
  margin: 0;
}

dl.faq dt{
        color: #00537B;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--tn-radius-sm);
  background: #f7f7f7;
  border: 1px solid rgba(0,0,0,.08);
  font-weight: 900;
}

dl.faq dd{
  font-size: .9rem;
  margin: 8px 0 0;
  padding: 0 2px 4px 2px;
  color: var(--tn-text);
  line-height: 1.9;
}

dl.faq dd + dt{
  margin-top: 16px;
}

/* メール/電話リンク */
.training-wrap a[href^="mailto:"],
.training-wrap a[href^="tel:"]{
  color: #0b57d0;
  text-decoration: underline;
}




/* 3枚横並び（レスポンシブ対応） */
.gallery {
  max-width: 814px;
  margin: 30px auto;
  padding: 0 16px;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

/* 白フレーム + 影 */
.photo {
  margin: 0;
  background: #fff;
  padding: 8px;                 /* 白フレームの太さ */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* 画面が狭い時は2列→1列に */
@media (max-width: 900px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}






/* --------
   Responsive
-------- */
@media (max-width: 599px){
  .training-wrap{
    padding: 22px 14px 56px;
  }

  .training-hero{
    padding: 18px 14px;
  }

  .training-hero h2{
    font-size: 22px;
  }

  .training-section{
    padding: 18px 14px;
  }

  .training-toc{
    padding: 14px;
  }
}