@charset "utf-8";

/* 加工現場研修のLP（/training）。チラシ「こんな間違いしていませんか？」の紙面に合わせ、
   色面で区切らず、罫線と明朝の見出しで読ませる記事の体裁にする。
   黒＝本文と見出し、紺＝強調とボタン、淡い緑＝ラベルと罫、赤＝図面への“赤入れ”だけ。
   チラシのQRコードからの流入が多いため、スマホの指定を先に書き、PCは 769px 以上で上書きする。 */

/* 共通CSSは box-sizing を指定していないため、width:100% に padding と border を足した
   入力欄やボタンがスマホ幅で右にはみ出す。このLPの中だけ border-box に揃える。 */
.p-tr,
.p-tr *,
.p-tr *::before,
.p-tr *::after,
.p-tr__zoom,
.p-tr__zoom * {
  box-sizing: border-box;
}

.p-tr {
  --navy: #163d63;
  --green: #94c2a6;
  --pen: #d33a2c;
  --ink: #1a1a1a;
  --gray: #5a5a5a;
  --rule: #c9c9c9;
  --tint: #eef2f7;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.8;
}

.p-tr section {
  padding: 32px 0;
  border-top: 1px solid var(--rule);
}

.p-tr__fv {
  border-top: none;
}

.p-tr p {
  margin: 0 0 1em;
}

.p-tr p:last-child {
  margin-bottom: 0;
}

.p-tr b {
  font-weight: 700;
}

.p-tr .u-sp {
  display: inline;
}

.p-tr .u-pc {
  display: none;
}

.p-tr .error {
  margin: 6px 0 0;
  color: var(--pen);
  font-size: 13px;
}

/* 共通のリセットが appearance:none を当てていてチェックボックスが消えるため、
   tech.css と同じく UA スタイルシートの値に戻す。 */
.p-tr input[type="checkbox"] {
  -webkit-appearance: revert;
  appearance: revert;
  background: revert;
  border: revert;
  padding: revert;
  margin: revert;
  accent-color: var(--navy);
}

/* 見出しに使う明朝。700 はこのページの Blade が追加で読み込んでいる。 */
.p-tr__h1,
.p-tr__h2,
.p-tr__msay,
.p-tr__quizh,
.p-tr__solveh,
.p-tr__bh,
.p-tr__offerh,
.p-tr__casenums {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
}

/* 紙面の柱。節の頭に置く細い見出し行。
   スマホでは横に並べると左の一行が細く折り返すので、縦に積む。 */
.p-tr__masthead,
.p-tr__runhead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
  text-align: left;
}

.p-tr__to,
.p-tr__runhead-l {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.p-tr__brand,
.p-tr__runhead-r {
  flex: 0 0 auto;
  margin: 0;
  color: var(--gray);
  font-size: 11px;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* ---------- 1. ファーストビュー ---------- */
.p-tr__fv {
  padding-top: 24px;
  text-align: center;
}

.p-tr__h1 {
  margin: 0 0 16px;
  font-size: 34px;
  line-height: 1.3;
  letter-spacing: -.01em;
}

/* 疑問符だけ赤。チラシと同じ“赤入れ”の扱い。 */
.p-tr__h1 .q {
  color: var(--pen);
}

.p-tr__sub {
  font-family: 'Noto Serif JP', serif;
  font-size: 16px;
  line-height: 1.8;
}

.p-tr__sub em {
  font-style: normal;
  font-weight: 700;
  border-bottom: 2px solid var(--green);
}

.p-tr__submit button {
  display: block;
  width: 100%;
  padding: 18px 20px;
  border: none;
  background: var(--navy);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.p-tr__submit button:hover {
  opacity: .85;
}

/* ---------- 2. リード文 ---------- */
/* 記事の入り口。ここで読む気になってもらうため、本文より少し大きく組む。
   両端揃えはPCだけ。スマホは1行が20字ほどしかなく、字間が不自然に空く。 */
.p-tr__lead {
  font-size: 16px;
  line-height: 1.95;
}

/* ---------- 共通のセクションラベル ---------- */
.p-tr__label {
  display: inline-block;
  margin-bottom: 20px;
  padding: 3px 14px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}

.p-tr__label--navy {
  background: var(--navy);
}

/* ---------- 3. よくある間違い ---------- */
.p-tr__mlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-tr__mitem {
  position: relative;
  margin-top: 24px;
  padding: 18px 16px 16px;
  border: 1px solid var(--green);
}

.p-tr__mno {
  position: absolute;
  top: -11px;
  left: 12px;
  padding: 1px 10px;
  border: 1px solid var(--green);
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.p-tr__msay {
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 1.45;
}

.p-tr__msay::before {
  content: "×";
  margin-right: .3em;
  color: var(--pen);
  font-weight: 700;
}

.p-tr__mitem p {
  line-height: 1.8;
}

.p-tr__mreal {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
  color: var(--navy);
  font-weight: 700;
  text-align: left;
}

/* ---------- 4. 間違い探し ---------- */
.p-tr__figwrap {
  margin-bottom: 24px;
}

.p-tr__figure {
  display: block;
  position: relative;
  width: 100%;
  padding: 18px 8px 8px;
  border: 1px solid var(--ink);
  background: #fff;
  cursor: zoom-in;
}

.p-tr__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* 図面に押す“赤入れ”のスタンプ。赤を使うのはここと間違いの×印だけ。 */
.p-tr__figtag {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 36px;
  padding: 2px 12px;
  border: 2px solid var(--pen);
  background: rgba(255, 255, 255, .92);
  color: var(--pen);
  font-family: 'Noto Serif JP', serif;
  font-size: 15px;
  font-weight: 500;
  transform: rotate(-8deg);
}

.p-tr__figzoom {
  display: block;
  margin-top: 6px;
  color: var(--gray);
  font-size: 12px;
  text-align: right;
}

.p-tr__quizh {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.45;
}

.p-tr__quizside > p {
  line-height: 1.85;
}

.p-tr__check {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
}

.p-tr__checkt {
  margin-bottom: 8px;
  font-weight: 700;
}

.p-tr__check ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-tr__check li + li {
  margin-top: 6px;
}

/* 指で押せるよう、チェックは行の高さを44px確保する。 */
.p-tr__check label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 44px;
  padding: 6px 0;
  line-height: 1.6;
  cursor: pointer;
}

.p-tr__check input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
}

.p-tr__turn {
  margin-top: 20px;
  text-align: right;
}

.p-tr__turn a {
  display: inline-block;
  padding: 11px 0;
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
}

/* ---------- 5. 本当の問題 ---------- */
.p-tr__h2 {
  margin: 0 0 20px;
  font-size: 23px;
  line-height: 1.5;
}

/* 見出しの中の要点だけ赤にする。ページで一番言いたい一語なので、
   図面の赤入れと同じ赤をここにも使う。 */
.p-tr__h2 .hl {
  color: var(--pen);
}

/* 読ませどころなので、リード文と同じく本文より大きく組む。 */
.p-tr__problemtxt p {
  font-size: 16px;
  line-height: 1.95;
}

/* 本文の脇に置く囲み記事。 */
.p-tr__case {
  margin-top: 24px;
  padding: 16px;
  background: var(--tint);
  font-size: 13px;
}

.p-tr__caset {
  margin-bottom: 8px;
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
}

.p-tr__casenums {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--navy);
}

.p-tr__casenums .n {
  font-size: 24px;
}

.p-tr__casenums .x {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: var(--ink);
}

.p-tr__casenote {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-weight: 700;
}

/* ---------- 6. 解決策 ---------- */
/* スマホでは見出しの横にロゴを置くと見出しが細く折り返すので、ロゴは下の右へ回す。
   PC（769px以上）はチラシと同じく見出しの右に並べる。 */
.p-tr__solvehead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--ink);
  color: #fff;
}

.p-tr__solvek {
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: .06em;
  opacity: .8;
}

.p-tr__solveh {
  margin: 0;
  font-size: 21px;
  line-height: 1.45;
}

.p-tr__solvelogo {
  flex: 0 0 auto;
  align-self: flex-end;
  margin: 0;
}

.p-tr__solvelogo img {
  display: block;
  width: 96px;
  height: auto;
}

.p-tr__solvebody {
  padding: 20px 16px;
  border: 1px solid var(--ink);
  border-top: none;
}

.p-tr__solvebody > p {
  line-height: 1.9;
}

.p-tr__flow {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.p-tr__flow li {
  position: relative;
  padding: 12px 14px;
  border: 1px solid var(--navy);
  text-align: center;
}

.p-tr__flow li + li {
  margin-top: 22px;
}

/* 工程のつながりを示す矢印。スマホは縦並びなので下向き。 */
.p-tr__flow li + li::before {
  content: "▼";
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--green);
  font-size: 11px;
}

.p-tr__flow .s {
  display: block;
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

.p-tr__flow .d {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.p-tr__flow .t {
  display: block;
  color: var(--gray);
  font-size: 13px;
  line-height: 1.5;
}

.p-tr__menu {
  margin: 20px 0 0;
  font-size: 13px;
}

.p-tr__menut {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}

.p-tr__chip {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 2px 10px;
  border: 1px solid var(--green);
}

.p-tr__menunote {
  display: block;
  margin-top: 4px;
  color: var(--gray);
  font-size: 12px;
}

/* ---------- 7. メリット ---------- */
.p-tr__blist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-tr__bitem {
  padding-top: 14px;
  border-top: 3px solid var(--green);
}

.p-tr__bitem + .p-tr__bitem {
  margin-top: 26px;
}

.p-tr__bno {
  display: block;
  color: var(--gray);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}

.p-tr__bh {
  margin: 4px 0 8px;
  font-size: 19px;
  line-height: 1.45;
}

.p-tr__bitem p {
  line-height: 1.85;
}

/* ---------- 8. 特典とフォーム ---------- */
.p-tr__offer {
  margin-bottom: 28px;
  padding: 18px 16px;
  border: 2px dashed var(--ink);
}

.p-tr__offerlbl {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 12px;
  background: var(--green);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}

.p-tr__offerh {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.45;
}

/* 共通のリセットが list-style を消しているため、ここだけ戻す。 */
.p-tr__offer ul {
  margin: 0;
  padding-left: 1.2em;
  list-style: disc;
}

.p-tr__offer li {
  margin-top: 4px;
  list-style: disc;
}

.p-tr__offernote {
  margin: 10px 0 0;
  color: var(--gray);
  font-size: 12px;
}

.p-tr__formerr {
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid var(--pen);
  color: var(--pen);
  font-size: 14px;
}

.p-tr__fld {
  margin-bottom: 18px;
}

.p-tr__fld > label,
.p-tr__flabel {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
}

.p-tr__req,
.p-tr__opt {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

.p-tr__req {
  background: var(--navy);
  color: #fff;
}

.p-tr__opt {
  background: #e3e7eb;
  color: var(--gray);
}

.p-tr__fld input[type="text"],
.p-tr__fld input[type="email"],
.p-tr__fld input[type="tel"],
.p-tr__fld textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #b9c2cb;
  background: #fff;
  /* スマホで入力欄に触れた時に画面が拡大されないよう、16px を下回らせない */
  font-size: 16px;
  line-height: 1.6;
}

.p-tr__fld input:focus,
.p-tr__fld textarea:focus {
  border-color: var(--navy);
  outline: none;
}

.p-tr__note {
  margin: 6px 0 0;
  color: var(--gray);
  font-size: 12px;
  line-height: 1.6;
}

.p-tr__fields-check {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 指で押せるよう44pxを確保する。 */
.p-tr__fields-check label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 14px;
  cursor: pointer;
}

.p-tr__fields-check input {
  width: 18px;
  height: 18px;
}

.p-tr__privacy {
  margin-bottom: 20px;
  padding: 14px;
  background: var(--tint);
}

/* 指で押せるよう44pxを確保する。 */
.p-tr__privacy label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  cursor: pointer;
}

.p-tr__privacy input {
  width: 18px;
  height: 18px;
}

/* label の中のリンクは、仕様上クリックしてもチェックは切り替わらないので
   押しやすいだけ広げてよい。 */
.p-tr__privacy a {
  display: inline-block;
  padding: 11px 2px;
  color: var(--navy);
  text-decoration: underline;
}

.p-tr__submit {
  margin: 24px 0 0;
}

.p-tr__dl {
  margin-top: 20px;
  font-size: 14px;
  text-align: center;
}

.p-tr__dl a {
  display: inline-block;
  padding: 12px 8px;
  color: var(--navy);
  text-decoration: underline;
}

/* ---------- 9. 追伸・主催 ---------- */
.p-tr__ps p {
  line-height: 1.9;
}

.p-tr__ps b {
  color: var(--navy);
}

.p-tr__host {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  color: var(--gray);
  font-size: 12px;
  text-align: left;
}

/* ---------- 図面の拡大 ---------- */
.p-tr__zoom {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 1000;
  inset: 0;
  padding: 16px;
  background: rgba(0, 0, 0, .85);
  cursor: zoom-out;
}

.p-tr__zoom[hidden] {
  display: none;
}

.p-tr__zoom img {
  max-width: 100%;
  max-height: 100%;
  background: #fff;
}

.p-tr__zoomclose {
  position: absolute;
  top: 10px;
  right: 16px;
  color: #fff;
  font-size: 32px;
  line-height: 1;
}

/* ---------- PC ---------- */
@media screen and (min-width: 769px) {
  .p-tr {
    font-size: 16px;
  }

  .p-tr section {
    padding: 48px 0;
  }

  .p-tr .u-sp {
    display: none;
  }

  .p-tr .u-pc {
    display: inline;
  }

  /* 両端揃えはPCだけ。スマホは1行が20字ほどしかなく、字間が不自然に空く。 */
  .p-tr__lead,
  .p-tr__mitem p,
  .p-tr__quizside > p,
  .p-tr__problemtxt p,
  .p-tr__solvebody > p,
  .p-tr__bitem p,
  .p-tr__ps p {
    text-align: justify;
  }


  .p-tr__masthead,
  .p-tr__runhead {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 28px;
  }

  .p-tr__to,
  .p-tr__runhead-l {
    font-size: 15px;
  }

  .p-tr__brand,
  .p-tr__runhead-r {
    font-size: 12px;
  }

  .p-tr__fv {
    padding-top: 36px;
  }

  .p-tr__h1 {
    font-size: 60px;
    line-height: 1.2;
  }

  .p-tr__sub {
    font-size: 22px;
  }

  .p-tr__lead {
    font-size: 19px;
    line-height: 2;
  }

  .p-tr__submit button {
    width: auto;
    min-width: 420px;
    margin: 0 auto;
    font-size: 19px;
  }

  .p-tr__submit {
    text-align: center;
  }

  /* 間違い3つとメリット3つは横に並べる（スマホでは縦に積む） */
  .p-tr__mlist,
  .p-tr__blist {
    display: flex;
    gap: 24px;
  }

  .p-tr__mitem,
  .p-tr__bitem {
    flex: 1;
    margin-top: 24px;
  }

  .p-tr__bitem + .p-tr__bitem {
    margin-top: 24px;
  }

  .p-tr__msay {
    font-size: 21px;
  }

  .p-tr__quizbody {
    display: flex;
    align-items: flex-start;
    gap: 32px;
  }

  .p-tr__figwrap {
    flex: 0 0 60%;
    margin-bottom: 0;
  }

  .p-tr__quizside {
    flex: 1;
  }

  .p-tr__quizh {
    font-size: 26px;
  }

  .p-tr__h2 {
    font-size: 32px;
  }

  .p-tr__problembody {
    display: flex;
    gap: 32px;
  }

  .p-tr__problemtxt {
    flex: 1.3;
  }

  /* 脇に囲み記事が入るぶん、リード文（19px）より少しだけ落とす。 */
  .p-tr__problemtxt p {
    font-size: 18px;
    line-height: 2;
  }

  .p-tr__case {
    flex: 1;
    margin-top: 0;
  }

  .p-tr__solvehead {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 28px;
  }

  .p-tr__solvelogo {
    align-self: auto;
  }

  .p-tr__solveh {
    font-size: 28px;
  }

  .p-tr__solvelogo img {
    width: 140px;
  }

  .p-tr__solvebody {
    padding: 28px;
  }

  /* 4ステップはPCだけ横並び。矢印も右向きに変える。 */
  .p-tr__flow {
    display: flex;
    gap: 26px;
  }

  .p-tr__flow li {
    flex: 1;
  }

  .p-tr__flow li + li {
    margin-top: 0;
  }

  .p-tr__flow li + li::before {
    content: "▶";
    top: 50%;
    left: -19px;
    transform: translateY(-50%);
  }

  .p-tr__offer {
    padding: 28px;
  }

  .p-tr__offerh {
    font-size: 24px;
  }
}