/*
Theme Name:     Lightning-child
Description:    Lightningの子テーマ
Author:         user_login2
Template:       lightning

(optional values you can add: Theme URI, Author URI, Version, License, License URI, Tags, Text Domain)
*/




/* -----------------------------
 * 子テーマのディレクトリ構造
 * ----------------------------- */

.tree ul {
	list-style-type: none;
	padding-left: 20px;
	font-family: monospace;
	line-height: 1.5;
}

.tree li::before {
	content: "├─ ";
}

.tree li:last-child::before { 
	content: "└─ ";
}


/* -----------------------------
 * 「制御方法」列を広くする
 * ----------------------------- */

.rest-api-table th:first-child,
.rest-api-table td:first-child {
    width: 190px; /* お好みで調整可能 */
    min-width: 180px;
}




/* -----------------------------
 * スクロール追従するトップへ戻るボタン
 * ----------------------------- */

/* ボタン本体のスタイル */
#scrollTopBtn {
    position: fixed;       /* スクロールしても画面上の同じ位置に固定表示 */
    right: 20px;           /* 画面右端から20px内側に配置 */
    bottom: 40px;          /* 画面下端から20px上に配置 */
    background: #333;      /* ボタンの背景色を濃いグレーに設定 */
    color: #fff;           /* 文字色を白に設定 */
    border: none;          /* 枠線を消す */
    padding: 12px 16px;    /* 上下12px、左右16pxの内側余白を設定 */
    border-radius: 50%;    /* 完全な円形にする */
    font-size: 18px;       /* 文字サイズを18pxに設定 */
    cursor: pointer;       /* ホバー時に手の形のカーソルに変更 */
    z-index: 9999;         /* 他の要素より前面に表示 */
    display: none;         /* 初期状態は非表示（スクロール時にJSで表示切替） */
}

/* ホバー時の見た目 */
#scrollTopBtn:hover {
    opacity: 0.8;          /* ホバー時に少し透明にして押せる感を演出 */
}


 /* -----------------------------
 * 投稿件数表示用のボックススタイル
 * ----------------------------- */

.post-count-box {
    display: inline-block;       /* 横並びの要素と一緒に表示可能、幅は内容に合わせる */
    background: #f5f5f5;        /* 薄いグレー背景 */
    padding: 6px 12px;           /* 内側の上下・左右の余白 */
    border-radius: 4px;           /* 角を丸くする */
    font-weight: bold;            /* 文字を太字に */
    color: #333;                  /* 文字色を濃いグレーに */
}


/* -----------------------------
 * サイト全体の閲覧数表示
 * ----------------------------- */

/* 閲覧数全体を囲むボックス */
.site-total-views {
    display: inline-block;       /* インライン要素として表示、幅は内容に合わせる */
    padding: 2px 8px;            /* 上下2px、左右8pxの内側余白 */
    background-color: #f0f0f0;   /* 薄いグレーの背景色 */
    border-radius: 4px;          /* 角を丸くする */
    font-size: 0.9em;            /* 文字サイズを少し小さめに設定 */
    color: #333;                  /* 文字色をダークグレー */
}


/* -----------------------------
 * ランダム記事リスト用のスタイル
 * 固定ページにショートコードで表示する際に使用
 * ----------------------------- */

/* ulタグ自体のリセット */
.random-posts {
    list-style: none;  /* デフォルトのリストマーカーを消す */
    margin: 0;         /* 外側余白をリセット */
    padding: 0;        /* 内側余白をリセット */
}

/* 各記事アイテムのスタイル */
.random-post-item {
    border: 1px solid #ddd;       /* 薄い枠線 */
    padding: 10px;                /* 内側余白 */
    display: flex;                /* Flexboxで配置 */
    flex-direction: column;       /* 上下方向に並べる */
    align-items: flex-start;      /* 左揃え */
}

/* 記事のサムネイル画像 */
.random-post-item img {
    width: 100%;                  /* 横幅100%でレスポンシブ対応 */
    height: auto;                 /* アスペクト比を維持 */
    object-fit: cover;            /* 枠内に画像を収める */
    margin-bottom: 10px;          /* 画像と本文の間隔 */
}

/* 記事タイトル */
.random-post-item .post-title {
    font-weight: bold;            /* 太字 */
    margin-bottom: 5px;           /* タイトルと抜粋の間隔 */
}

/* 記事抜粋 */
.random-post-item .post-excerpt {
    font-size: 0.9em;             /* 少し小さめの文字サイズ */
    color: #555;                  /* 薄いグレー */
}

/* スマホ用のレスポンシブ調整 */
@media screen and (max-width: 768px) {
    .random-posts {
        grid-template-columns: 1fr !important; /* 1列表示に強制 */
    }
}



/* ---------------------------------
 * 本文の最後に関連記事リンクを自動追加
 * ------------------------------- */

/* 関連リンク全体のボックス */
.related-links {
    margin-bottom: 15px;        /* 下の余白 */
    border-left: 5px solid #0073aa; /* 左側にLightningブルーのライン */
	padding:25px 20px;
    border-radius: 6px;         /* 角丸 */
    background: #f9f9ff;        /* 淡いブルー背景 */
    font-size: 1em;             /* フォントサイズ */
}

.related-links h3 { /** 見出しタイトル **/
  font-size: 1.2rem; /** 文字サイズ **/
  margin-bottom: 15px; /** 下余白 **/
  color: #0073aa; /** タイトルカラー **/
  font-weight: 700; /** 太字 **/
}

/* リスト全体 */
.related-links ul { /** 黒丸を削除 **/
  list-style: none; /** デフォルトのdiscを無効化 **/
  margin: 0;
  padding: 0;
}

.related-links li { /** 各項目のレイアウト調整 **/
  margin-bottom: 8px; /** 行間を少し広く **/
  padding-left: 1.6em; /** 左側に余白（・用） **/
  position: relative; /** 疑似要素位置の基準 **/
}

.related-links li::before {
  content: "・"; /** カスタムのドットを追加 **/
  position: absolute; /** 行頭に固定配置 **/
  top: 0.15em;               /* ← これを追加：ドットを少し下げる */
  left: 0; /** 左端に寄せる **/
  color: #0073aa; /** WordPressブルー（統一） **/
  font-size: 1.2em; /** やや大きく見せる（任意） **/
  line-height: 1; /** バランス調整 **/
}

/* 各関連記事アイテム */
.related-links li {
    margin: 8px 0;              /* 上下の間隔 */
    border-bottom: 1px dashed #ccc; /* 各項目の下に点線 */
}

/* リンク装飾 */
.related-links li a {
    text-decoration: none;      /* 下線なし */
    color: #0073aa;             /* Lightningブルー */
}

.related-links li a:hover {
    text-decoration: underline; /* ホバー時に下線表示 */
}

/* -----------------------------
 * スマホ向け調整
 * ----------------------------- */
@media screen and (max-width: 768px) {
    .related-links {
        font-size: 1em;       /* スマホでも読みやすいサイズ */
    }
}




/* ------------------------------------------------
 * 「この記事を読んだ人はこちらも読んでいます」デザイン
 * --------------------------------------------- */

.related-category-box { /** ブロック全体 **/
  margin: 40px 0; /** 本文との間に余白 **/
  padding: 20px; /** 内側余白 **/
  background: #f9f9ff; /** 淡いブルー背景 **/
  border-left: 5px solid #0073aa; /** 左線をWordPressブルーに **/
  border-radius: 8px; /** 角を丸く **/
}

.related-category-box h3 { /** 見出しタイトル **/
  font-size: 1.2rem; /** 文字サイズ **/
  margin-bottom: 15px; /** 下余白 **/
  color: #0073aa; /** タイトルカラー **/
  font-weight: 700; /** 太字 **/
}

.related-category-box ul { /** 記事リスト全体 **/
  list-style: none; /** 「・」を削除 **/
  margin: 0; /** 余白リセット **/
  padding: 0; /** 内側余白リセット **/
}

.related-category-box li { /** 各リスト要素 **/
  margin-bottom: 10px; /** 下余白 **/
  border-bottom: 1px dashed #ccc; /* 各項目の下に点線 */
  text-indent: -1em; /** ← 1文字分戻す（行頭をそろえる） **/
  padding-left: 1.2em; /** ← マーカー分の余白を確保 **/
  position: relative; /** 擬似要素配置の基準 **/
}

.related-category-box li a { /** リンクデザイン **/
  text-decoration: none; /** 下線削除 **/
  color: #0073aa; /** 通常文字色 **/
  transition: color 0.3s; /** ホバー時の変化を滑らかに **/
}

.related-category-box li::before {
  content: "・"; /** カスタムの「・」 **/
  color: #0073aa; /** WordPressブルー **/
  font-weight: bold;
  position: relative; /** 行内で自然に配置 **/
  left: 0; /** 水平方向の調整不要 **/
}
    



/* ------------------------------------------
 * サイドバーに最近の投稿（サムネ付き）を表示する
 * ------------------------------------------ */

/* ウィジェット全体 */
.recent-posts-widget {
    display: flex;                  /* フレックスボックスで配置 */
    flex-direction: column;         /* 投稿ごとに縦積み */
    gap: 10px;                      /* 投稿間の間隔 */
}

/* 各投稿アイテム */
.recent-post-item {
    display: flex;                  /* 画像とタイトルを横並び */
    align-items: flex-start;        /* タイトルを画像の上部と揃える */
    /* align-items: center;         タイトルを画像の中央に揃える場合はこちら */
    gap: 10px;                      /* 画像とタイトル間の間隔 */
    flex-wrap: wrap;                /* 幅が狭い場合は改行 */
}

/* サムネイル画像 */
.recent-post-thumb-img {
    border-radius: 4px;             /* 角を丸くする */
}

/* 大きい画像の場合（幅100%） */
.recent-post-thumb-img.large {
    flex-basis: 100%;               /* 幅を100%に */
    display: block;                 /* ブロック表示に */
}

/* 投稿アイテム全体が大きい場合は縦並びに */
.recent-post-item.large {
    flex-direction: column;         /* 画像の下にタイトル */
    align-items: flex-start;        /* 左揃え */
}

/* 画像が150px以上ならタイトルを画像下に配置 */
.recent-post-thumb-img.large + .recent-post-title {
    flex-basis: 100%;               /* タイトルを上に */
    margin-top: 5px;                /* 画像との間隔 */
}

/* タイトルリンク */
.recent-post-title {
    font-size: 14px;                /* フォントサイズ */
    color: #333;                    /* 文字色 */
    text-decoration: none;          /* 下線なし */
    flex: 1;                        /* 横幅をできるだけ使う */
}

/* ホバー時のタイトルリンク */
.recent-post-title:hover {
    text-decoration: underline;     /* 下線を表示 */
}


/* -----------------------------
　Contact Form 7 完全統一スタイル（スマホ対応）
----------------------------- */

/* 基本入力欄（テキスト・メール・電話・住所など） */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 textarea {
    width: 100%;
    max-width: 500px;
    padding: 0.5em 0.6em;
    margin-bottom: 1em;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff9e6;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s ease;
}

/* フォーカス時の色変更 */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 textarea:focus {
    border-color: #f90;
}

/* テキストエリア */
.wpcf7 textarea {
    min-height: 120px;
    resize: vertical;
}

/* 番地・建物名などの横幅調整（スマホ対応） */
.wpcf7 input#addr,
.wpcf7 input#addr2 {
    max-width: 100%;
}

/* 送信ボタン */
.wpcf7 input[type="submit"] {
    background-color: #f90;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 15px 30px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 1em;
}
.wpcf7 input[type="submit"]:hover {
    background-color: #e07b00;
}

/* 必須マーク */
.wpcf7 .waku10 {
    color: #fff !important;
    background-color: #f00 !important;
    font-size: 80% !important;
    padding: 0 5px !important;
    margin-left: 5px !important;
    border-radius: 2px;
}

/* ラジオボタン・チェックボックス */
.wpcf7 input[type="radio"],
.wpcf7 input[type="checkbox"] {
    transform: scale(1.3);
    margin-right: 10px;
    vertical-align: middle;
}

/* ラベル調整 */
.wpcf7 span.wpcf7-list-item-label {
    line-height: 1.8em;
}

/* レスポンシブ調整 */
@media screen and (max-width: 600px) {
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="tel"],
    .wpcf7 input[type="url"],
    .wpcf7 textarea,
    .wpcf7 input[type="submit"] {
        width: 100%;
        font-size: 0.95em;
    }

    .wpcf7 input#addr,
    .wpcf7 input#addr2 {
        max-width: 100%;
    }

    .wpcf7 .waku10 {
        font-size: 75% !important;
        padding: 0 4px !important;
    }
}

/* -----------------------------
	input number
----------------------------- */

input[type="number"] {
  width: 100px !important; /* ← 任意の長さに変更 */
}


/* -----------------------------------
 * Contact Form 7 数値入力＋計算フォーム用
 * ----------------------------------- */

/* 数値入力欄の横幅を調整 */
.number-short { /* フィールドの幅を狭く設定 */
  width: 80px; /* 横幅80px */
  text-align: right; /* 右寄せで数字を見やすく */
}

/* 合計金額枠 */
.waku1_ccc { /* 合計金額全体のボックス */
  border: 1px solid #ccc; /* 枠線を薄いグレーに */
  padding: 10px; /* 内側余白を確保 */
  margin-top: 15px; /* 上余白を設定 */
  background: #fafafa; /* 薄いグレー背景 */
}

/* 強調テキスト */
.color-f00 { /* 赤文字強調 */
  color: #e60000; /* 濃い赤で注意を引く */
}



* -----------------------------
	waku 枠　box ボックス
----------------------------- */

.waku1{
	margin: 20px 0 30px;
	padding: 15px 15px 20px 25px;
	border: solid 1px #ccc;
	overflow: hidden;
}

/* -------------------------
*   汎用
---------------------------- */

img {
	margin:0;
	padding:0;
	border-style:none;
	-webkit-backface-visibility: hidden;
}

.clear {
    clear:both;
}

.floatL{
	float:left;
	margin-right: 15px;
}

.floatL img {
	margin:0;
	padding:0;
}

.floatR{
	float:right;
	margin-left: 15px
}

.floatR img {
	margin:0;
	padding:0;
}

.center{
	text-align:center;
}

.right{
	text-align:right;
}

.left{
	text-align:left;
}

.underline {
    text-decoration:underline;
}

strong {
	font-weight:bold;
}

em {
	font-weight:bold;
}

.font-bold {
	font-weight:bold;
}

.font-normal {
	font-weight:normal;
}

.double_line {
	display: inline-block;
	padding-bottom:1px;
	border-bottom: 5px double #f90;
}

.indent1{
	text-indent: 1em;
}

hr.fef {
	margin:0 auto 20px;
	border: 1px solid #f5ab18;
	width:96%;
}


/* -----------------------------
 * 投稿日、更新日、投稿者名を非表示にする
 * ----------------------------- */

.entry-meta-item-date, .entry-meta-item-updated, .entry-meta .author {
    display: none;
}


/* -----------------------------
 * サイドバーの投稿日を消す
 * ----------------------------- */

.vk_post_date {
    display: none;
}



/* -----------------------------
 * テーブル1
 * ----------------------------- */

/* テーブル全体を横スクロール可能に */
.table-wrapper {
    overflow-x: auto;
    margin: 20px 0;
}

/* テーブルデザイン */
.rest-api-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.2em !important;
    min-width: 700px; /* 横スクロール発生の目安 */
	table-layout: fixed; /* 列幅を制御 */
}

/* ヘッダー */
.rest-api-table thead th {
    background-color: #6c5ce7; /* 薄めの紫 */
    color: #fff;
    padding: 10px;
    text-align: left;
    position: sticky; /* スクロール時にヘッダー固定 */
    top: 0;
    z-index: 2;
}

.rest-api-table th {
    text-align: left;
}


/* ボディのセル */
.rest-api-table tbody td {
    border: 1px solid #ddd;
    padding: 10px;
    vertical-align: top;
}

/* 行のホバー効果 */
.rest-api-table tbody tr:hover {
    background-color: #f5f5f5;
}

/* リストのスタイル調整 */
.rest-api-table ul {
    margin: 0;
    padding-left: 20px;
}

.rest-api-table ul li {
    list-style-type: disc;
}

/* コードブロックのスタイル */
.rest-api-table pre {
    background-color: #f0f0f0;
    padding: 8px;
    overflow-x: auto;
    border-radius: 4px;
}

/* レスポンシブ対応（狭い画面用） */
@media (max-width: 600px) {
    .rest-api-table {
        font-size: 13px;
    }
}





/* -----------------------------
　テーブル2 table　スマホスクロール
----------------------------- */

/* 共通スタイル */
.scroll {
  overflow-x: auto;
  margin-bottom: 1.5em;
}

/* 表デザイン */
.tbl-r07 {
  border-collapse: collapse;
  width: 95%;
  min-width: 600px;
}

.tbl-r07 th,
.tbl-r07 td {
  border: 1px solid #ccc;
  padding: 10px 14px;
  vertical-align: top;
  font-size:0.9em !important;
}

/* ヘッダー */
.tbl-r07 thead th {
  background: #f5f5f5;
  text-align: center;
}

/* tbody の左列（用語）だけ左寄せ */
.tbl-r07 tbody th[scope="row"] {
  text-align: left;
  background: #fafafa;
  white-space: nowrap;
}

/* 交互の行に薄い背景色 */
.tbl-r07 tbody tr:nth-child(even) {
  background: #fcfcfc;
}


@media only screen and (max-width: 768px) {
  .scroll {
    overflow-x: auto!important;
  }

  .tbl-r07 {
    min-width: 640px!important;
    margin: 0 10px 50px!important;
    padding:10px 20px!important;
    border-bottom: solid 1px #ccc!important;
  }

  .tbl-r07 thead th {
    padding:10px 20px!important;
    text-align:center !important;
    border-bottom: solid 1px #ccc!important;
  }

  /*  tbody 内の左列は左寄せ */
  .tbl-r07 tbody th[scope="row"] {
    padding:10px 20px!important;
    text-align:left !important;
    border-bottom: solid 1px #ccc!important;
  }

  .tbl-r07 td {
    padding:10px 20px!important;
    text-align:left !important;
    border-bottom: solid 1px #ccc!important;
  }
}



/* スクロール可能なコンテナ */
.table-scroll-container {
  overflow-x: auto;
  margin-bottom: 1.5em;
}

/* テーブル全体のスタイル */
.responsive-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 700px; /* 横幅が狭い端末でもスクロールできるように */
}

/* セルの共通スタイル */
.responsive-table th,
.responsive-table td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
  background-color: #fff;
}

/* ヘッダー部分を強調 */
.responsive-table thead th {
  background-color: #f2f2f2;
  font-weight: bold;
}