@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}






/*
   tasuichi.jp 共通CSS（tk- prefix）
   WordPress 外観 > カスタマイズ > 追加CSS に貼り付ける
   最終更新: 2026-04
    */

/*
   1. CSS変数（アクセントカラー）
      記事ラッパーに系統クラスを1つ追加するだけで色が切り替わる
      例: <div class="tk-article tk-sus">
    */

.tk-article                { --tk-color: #534AB7; --tk-color-bg: #f6f5fd; --tk-color-light: #eeedf9; --tk-color-border: #b0aae0; }
.tk-article.tk-steel       { --tk-color: #534AB7; --tk-color-bg: #f6f5fd; --tk-color-light: #eeedf9; --tk-color-border: #b0aae0; }
.tk-article.tk-ss          { --tk-color: #378ADD; --tk-color-bg: #edf4fd; --tk-color-light: #ddeaf9; --tk-color-border: #94bfe8; }
.tk-article.tk-sus         { --tk-color: #1D9E75; --tk-color-bg: #edf7f3; --tk-color-light: #d5f0e6; --tk-color-border: #7ecfb5; }
.tk-article.tk-ht          { --tk-color: #BA7517; --tk-color-bg: #fdf5e0; --tk-color-light: #faeeda; --tk-color-border: #e8c06a; }
.tk-article.tk-cast        { --tk-color: #D85A30; --tk-color-bg: #fdf0eb; --tk-color-light: #faece7; --tk-color-border: #f0997b; }
.tk-article.tk-surface     { --tk-color: #639922; --tk-color-bg: #f2f7e8; --tk-color-light: #eaf3de; --tk-color-border: #b0cc7a; }
.tk-article.tk-nonferrous  { --tk-color: #2196A8; --tk-color-bg: #e8f6f8; --tk-color-light: #d5eef1; --tk-color-border: #80c8d2; }
.tk-article.tk-precious    { --tk-color: #9C6A17; --tk-color-bg: #f8f2e6; --tk-color-light: #f0e4c8; --tk-color-border: #d4a85a; }
.tk-article.tk-other       { --tk-color: #5a7a8a; --tk-color-bg: #f0f4f6; --tk-color-light: #e0eaee; --tk-color-border: #9ab4c0; }

/* 系統クラス早見表
   tk-steel      : 炭素鋼・合金鋼・工具鋼（S45C SCM SKD SKH）紫
   tk-ss         : SS400・SM400・フェライト系ステンレス         青
   tk-sus        : ステンレス全般・オーステナイト系              緑
   tk-ht         : 熱処理・銅合金・二相系ステンレス              金
   tk-cast       : 鋳鋼・SC材・耐熱鋼・SPCC/SPHC系             橙赤
   tk-surface    : 表面処理・SGD・めっき・窒化                  黄緑
   tk-nonferrous : 非鉄金属（アルミ・Mg・Ti・W）                シアン
   tk-precious   : 貴金属・レアメタル・レアアース               ゴールド
   tk-other      : 材料比較・選び方・測定・工法比較・その他      グレー青
*/


/*
   2. 記事ラッパー
    */

.tk-article {
  max-width: 860px;
  margin: 0 auto;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  color: #333;
  line-height: 1.85;
  font-size: 1.0em;
}


/*
   3. リード文ボックス
    */

.tk-lead {
  background: var(--tk-color-bg);
  border-left: 5px solid var(--tk-color);
  border-radius: 0 6px 6px 0;
  padding: 1em 1.2em;
  margin: 1.2em 0 1.8em;
  font-size: 1.02em;
  line-height: 1.8;
}


/*
   4. 見出し H2 / H3
    */

.tk-h2 {
  font-size: 1.25em;
  font-weight: 700;
  color: #fff;
  background: var(--tk-color);
  padding: 0.45em 1em;
  border-radius: 6px;
  margin: 2.2em 0 0.9em;
  line-height: 1.4;
}

.tk-h3 {
  font-size: 1.05em;
  font-weight: 700;
  color: var(--tk-color);
  border-left: 4px solid var(--tk-color);
  padding-left: 0.65em;
  margin: 1.6em 0 0.6em;
  line-height: 1.4;
}


/*
   5. テーブル
    */

.tk-table-wrap {
  overflow-x: auto;
  margin: 1.2em 0;
}

.tk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.91em;
}

.tk-table th {
  background: var(--tk-color);
  color: #fff;
  padding: 0.55em 0.8em;
  text-align: left;
  font-weight: 600;
  border: 1px solid var(--tk-color);
}

.tk-table td {
  padding: 0.5em 0.8em;
  border: 1px solid #ddd;
  vertical-align: top;
  line-height: 1.65;
}

.tk-table tr:nth-child(even) td {
  background: var(--tk-color-bg);
}

/* セル強調クラス */
.tk-table td.tk-good { color: #1a7a3a; font-weight: 700; }
.tk-table td.tk-bad  { color: #c0392b; font-weight: 700; }
.tk-table td.tk-mid  { color: #b8860b; font-weight: 700; }
.tk-table td.tk-best { background: var(--tk-color-light); font-weight: 700; }


/*
   6. ハイライトボックス（情報・ポイント）
    */

.tk-box {
  background: var(--tk-color-bg);
  border: 1px solid var(--tk-color);
  border-radius: 8px;
  padding: 1em 1.2em;
  margin: 1.2em 0;
}

.tk-box-title {
  font-weight: 700;
  color: var(--tk-color);
  margin-bottom: 0.4em;
  display: block;
}

/* 黄色ハイライト（系統カラーによらず共通） */
.tk-highlight {
  background: #fffbe6;
  border-left: 4px solid #EF9F27;
  border-radius: 0 6px 6px 0;
  padding: 0.9em 1.2em;
  margin: 1.2em 0;
  font-size: 0.96em;
  line-height: 1.75;
}

/* 警告ボックス（赤・系統カラーによらず共通） */
.tk-warn {
  background: #fff5f5;
  border: 1px solid #c0392b;
  border-radius: 8px;
  padding: 1em 1.2em;
  margin: 1.2em 0;
}

.tk-warn-title {
  font-weight: 700;
  color: #c0392b;
  margin-bottom: 0.4em;
  display: block;
}


/*
   7. カードグリッド
    */

.tk-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1em;
  margin: 1.2em 0;
}

.tk-card {
  background: #fff;
  border: 1px solid var(--tk-color-border);
  border-top: 3px solid var(--tk-color);
  border-radius: 8px;
  padding: 0.9em 1em;
}

.tk-card-title {
  font-weight: 700;
  color: var(--tk-color);
  font-size: 0.97em;
  margin: 0 0 0.4em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--tk-color-border);
}

.tk-card p {
  font-size: 0.88em;
  color: #444;
  margin: 0;
  line-height: 1.6;
}


/*
   8. 判断グリッド（Yes / No 2列）
    */

.tk-judge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  margin: 1.2em 0;
}

@media (max-width: 600px) {
  .tk-judge-grid { grid-template-columns: 1fr; }
}

.tk-judge {
  border-radius: 8px;
  padding: 1em 1.1em;
  font-size: 0.92em;
}

.tk-judge-yes {
  border: 1px solid #1D9E75;
  background: #f0faf5;
}

.tk-judge-no {
  border: 1px solid #c0392b;
  background: #fff5f5;
}

.tk-judge-title {
  font-weight: 700;
  margin-bottom: 0.5em;
  font-size: 1.0em;
}

.tk-judge-yes .tk-judge-title { color: #1D9E75; }
.tk-judge-no  .tk-judge-title { color: #c0392b; }

.tk-judge ul { margin: 0; padding-left: 1.2em; }
.tk-judge li { margin-bottom: 0.3em; }


/*
   9. トラブル事例ボックス
    */

.tk-case {
  background: #fffbf0;
  border-left: 5px solid #e0a800;
  border-radius: 0 6px 6px 0;
  padding: 1em 1.2em;
  margin: 1.2em 0;
}

.tk-case-title {
  font-weight: 700;
  color: #b8860b;
  margin-bottom: 0.5em;
  display: block;
}

.tk-case-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0.2em 0.6em;
  font-size: 0.92em;
  margin-bottom: 0.15em;
}

.tk-case-label {
  font-weight: 700;
  color: #666;
}


/*
   10. チェックリスト
    */

.tk-check {
  background: var(--tk-color-bg);
  border-radius: 8px;
  padding: 1em 1.2em;
  margin: 1.2em 0;
}

.tk-check-title {
  font-weight: 700;
  color: var(--tk-color);
  margin-bottom: 0.6em;
  display: block;
}

.tk-check ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.tk-check li {
  padding: 0.25em 0 0.25em 1.7em;
  position: relative;
  font-size: 0.93em;
  line-height: 1.7;
}

.tk-check li::before {
  content: "□";
  position: absolute;
  left: 0;
  color: var(--tk-color);
  font-weight: 700;
}


/*
   11. まとめボックス
    */

.tk-summary {
  background: var(--tk-color);
  color: #fff;
  border-radius: 10px;
  padding: 1.4em 1.6em;
  margin: 2em 0 1em;
}

.tk-summary h3 {
  color: #fff;
  font-size: 1.1em;
  font-weight: 700;
  margin: 0 0 0.8em;
  border: none;
  padding: 0;
}

.tk-summary ul {
  margin: 0;
  padding-left: 1.4em;
}

.tk-summary li {
  margin-bottom: 0.4em;
  line-height: 1.65;
}

/* まとめ（淡色版：白背景に色枠） */
.tk-summary-light {
  background: var(--tk-color-bg);
  border: 1px solid var(--tk-color-border);
  border-radius: 10px;
  padding: 1.4em 1.6em;
  margin: 2em 0 1em;
}

.tk-summary-light h3 {
  color: var(--tk-color);
  font-size: 1.1em;
  font-weight: 700;
  margin: 0 0 0.8em;
  border: none;
  padding: 0;
}

.tk-summary-light ul {
  margin: 0;
  padding-left: 1.4em;
}

.tk-summary-light li {
  margin-bottom: 0.4em;
  line-height: 1.65;
}


/*
   12. 工程フロー
    */

.tk-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3em;
  margin: 1.2em 0;
}

.tk-flow-step {
  background: var(--tk-color);
  color: #fff;
  padding: 0.4em 0.9em;
  border-radius: 4px;
  font-size: 0.87em;
  font-weight: 700;
  white-space: nowrap;
}

.tk-flow-step.tk-step-warn { background: #c0392b; }
.tk-flow-step.tk-step-ok   { background: #1D9E75; }
.tk-flow-step.tk-step-gray { background: #888; }

.tk-flow-arr {
  color: #888;
  font-size: 1.1em;
  padding: 0 0.2em;
}


/*
   13. バッジ（インライン）
    */

.tk-badge {
  display: inline-block;
  background: var(--tk-color);
  color: #fff;
  font-size: 0.78em;
  font-weight: 700;
  padding: 0.1em 0.55em;
  border-radius: 3px;
  margin: 0 0.2em;
  vertical-align: middle;
}

.tk-badge-warn { background: #c0392b; }
.tk-badge-ok   { background: #1D9E75; }
.tk-badge-gray { background: #888; }


/*
   14. SVG・グラフ ラッパー
    */

.tk-svg-wrap {
  overflow-x: auto;
  margin: 1.5em 0;
  text-align: center;
}

.tk-chart-wrap {
  max-width: 600px;
  margin: 1.5em auto;
}

.tk-chart-wide {
  max-width: 780px;
  margin: 1.5em auto;
}


/*
   15. 関連記事ボックス
    */

.tk-related {
  background: #f8f8f8;
  border-radius: 8px;
  padding: 1em 1.4em;
  margin: 2em 0;
  font-size: 0.92em;
}

.tk-related-title {
  font-weight: 700;
  color: #444;
  margin-bottom: 0.6em;
  display: block;
}

.tk-related ul {
  margin: 0;
  padding-left: 1.2em;
}

.tk-related li { margin-bottom: 0.4em; }
.tk-related a  { color: var(--tk-color); }


/*
   16. タグ行（記事末尾）
    */

.tk-tag {
  font-size: 0.85em;
  color: #888;
  margin-top: 2em;
  line-height: 1.8;
}


/*
   17. レスポンシブ補正
    */

@media (max-width: 680px) {
  .tk-cards {
    grid-template-columns: 1fr;
  }
  .tk-h2 {
    font-size: 1.1em;
  }
}