/*
 Theme Name:   GeneratePress Child (小金屋)
 Theme URI:    https://koganeya.co.jp/
 Description:  株式会社小金屋サイト用 GeneratePress 子テーマ（Cocoonからの移行用）
 Author:       株式会社小金屋
 Template:     generatepress
 Version:      1.8.0
 Text Domain:  generatepress-child
*/

/* ==========================================================
   目次
   0. 基本（文字・色）
   1. レイアウト（Cocoonの「全幅＋中央80%」構成を再現）
   2. ヘッダー・グローバルメニュー
   3. 見出し（Cocoonの見出しデザイン）
   4. ボックス・段組み・ボタン（Cocoonブロックの見た目）
   5. トップページ専用
   6. お知らせ・施工記録一覧（WP Show Posts）
   7. 工事関係ページ・表
   8. 商品ページ・WooCommerce
   9. フォーム・マイアカウント
   10. フッター
   11. トップへ戻るボタン
   12. スマホ下部固定メニュー
   ========================================================== */


/* ==========================================================
   0. 基本（文字・色）
   ========================================================== */
body {
  background-color: #ffffff;
  color: #333333;
  font-family: YuGothic, "Yu Gothic", Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 18px;
  line-height: 1.8;
  /* Cocoon子テーマと同じく、ブロックの横幅制限を外す */
  --wp--style--global--content-size: transparent;
}

/* Cocoon設定：スマホの文字サイズ16px */
@media (max-width: 480px) {
  body {
    font-size: 16px;
  }
}

.entry-content > *,
.entry-content p {
  line-height: 1.8;
}
.entry-content p {
  margin-bottom: 1.4em;
}

/* 検索ブロックの下の余白（Cocoonと同じ 1.8em） */
.entry-content .wp-block-search {
  margin-bottom: 1.8em;
}

/* アイキャッチ画像を中央寄せ */
.wp-post-image {
  display: block;
  margin: 0 auto;
}

.body .margin-bottom-zero,
.margin-bottom-zero {
  margin-bottom: 0 !important;
}


/* ==========================================================
   1. レイアウト
   Cocoon：本文エリアは画面いっぱい、各セクション(.contents-group)は幅80%で中央
   ========================================================== */
.site.grid-container {
  max-width: 100%;
}

.page .site-main,
.single .site-main,
.woocommerce-page .site-main {
  margin: 0;
}

.page .inside-article,
.single .inside-article {
  padding: 0;
  background-color: transparent;
}

.page .site-main > article,
.single .site-main > article {
  margin-bottom: 0;
}

.single .product,
.single .post,
.contents-group {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

/* 「全幅」が付いていても .contents-group は80%のまま（GeneratePressの全幅指定より優先） */
.no-sidebar .entry-content .contents-group.alignfull,
.entry-content .contents-group.alignfull {
  width: 80%;
  max-width: 80%;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* GeneratePressがグループの内側に付ける余白（40px／スマホ30px）を無くす
   ※ Cocoonにはこの余白がないため、入れ子のグループで幅と上下の余白がずれていた */
.site-main .wp-block-group__inner-container {
  padding: 0;
  max-width: none;
}

/* 固定ページのタイトルは非表示（Cocoon設定と同じ） */
.page .entry-header {
  display: none;
}
.entry-title {
  text-align: center;
}

/* 投稿ページのタイトル（Cocoonと同じ大きさ・太字） */
.single-post .entry-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .1em;
  margin-bottom: 16px;
}
@media (max-width: 480px) {
  .single-post .entry-title {
    font-size: 20px;
  }
}

/* 投稿ページのアイキャッチ（左上にカテゴリー名） */
.kgn-eyecatch {
  position: relative;
  margin-bottom: 1.8em;
  text-align: center;
}
.kgn-eyecatch img {
  display: block;
  margin: 0 auto;
}
.kgn-cat-label {
  position: absolute;
  top: .6em;
  left: .6em;
  max-width: 70%;
  padding: 1px 5px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 2px;
  background-color: #333333;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.6;
  opacity: .7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 834px) {
  .single .product,
  .single .post,
  .contents-group,
  .no-sidebar .entry-content .contents-group.alignfull,
  .entry-content .contents-group.alignfull {
    width: 95%;
    max-width: 95%;
  }
}


/* ==========================================================
   2. ヘッダー・グローバルメニュー
   ========================================================== */
.site-header .inside-header {
  width: 1480px;
  max-width: 100%;
  margin: 24px auto 0;
  padding: 0;
}
@media (max-width: 1480px) {
  .site-header .inside-header {
    width: 80%;
  }
}

/* ロゴ：幅350px・高さ60pxまで（Cocoon設定） */
.site-header .site-logo .header-image {
  width: 350px;
  max-width: 100%;
  height: auto;
  max-height: 60px;
  object-fit: contain;
  object-position: left center;
}
@media (max-width: 1023px) {
  .site-header .site-logo .header-image {
    object-position: center;
  }
}

/* PCメニュー：高さ60px・幅は文字に合わせる（Cocoon設定「メニュー幅をテキストに合わせる」） */
@media (min-width: 1024px) {
  .main-navigation .main-nav > ul > li {
    text-align: center;
  }
  .main-navigation .main-nav > ul > li > a {
    padding-left: 22.4px;
    padding-right: 22.4px;
    line-height: 60px;
  }
  .main-navigation .main-nav > ul > li.menu-item-has-children > a {
    padding-right: 22.4px;
  }
}

.main-navigation .main-nav ul li a {
  color: #333333;
  font-size: 16px;
  transition: all .3s ease-in-out;
}

/* ホバー時：文字色はそのまま、背景を薄いグレーに */
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li[class*="current-menu-"]:hover > a {
  color: #333333;
  background-color: #f5f8fa;
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  background-color: transparent;
}

/* サブメニュー：幅240px */
.main-navigation ul ul {
  width: 240px;
  background-color: #fafbfc;
  text-align: left;
}
.main-navigation .main-nav ul ul li a {
  padding: 16px;
  line-height: 1.5;
}

/* スマホ・タブレット（1023px以下）：ロゴを中央に。メニューは下部固定バーから開く */
@media (max-width: 1023px) {
  .site-header .inside-header {
    justify-content: center;
  }
  .mobile-menu-control-wrapper {
    display: none !important;
  }
  /* 保険：769〜1023pxでもPC用メニューを隠し、開いたときは縦並びに */
  #site-navigation:not(.toggled) .main-nav {
    display: none;
  }
  #site-navigation.toggled {
    width: 100%;
  }
  #site-navigation.toggled .main-nav > ul {
    display: block;
  }
  #site-navigation.toggled .main-nav ul li {
    float: none;
    width: 100%;
    text-align: left;
  }
  #site-navigation.toggled .main-nav ul li a {
    line-height: 1.5;
    padding: 14px 20px;
  }
  #site-navigation.toggled .main-nav ul ul {
    position: static;
    width: 100%;
    opacity: 1;
    visibility: visible;
    height: auto;
    left: auto;
  }
}


/* ==========================================================
   3. 見出し（Cocoonの見出し＋小金屋のカスタマイズ）
   ========================================================== */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  line-height: 1.25;
  font-weight: 700;
  margin-bottom: 1.26em;
}

.entry-content h2 {
  font-size: 24px;
  padding: 25px;
  background-color: transparent;
  border-bottom: 1px solid #666666;
  border-radius: 2px;
}

.entry-content h3 {
  font-size: 22px;
  padding: 12px 20px;
  border: none;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.entry-content h4,
.entry-content h5,
.entry-content h6 {
  font-size: 20px;
  padding: 9px 10px;
}
.entry-content h4 {
  border-top: 2px solid #dddddd;
  border-bottom: 2px solid #dddddd;
}
.entry-content h5 {
  border-bottom: 2px solid #dddddd;
}
.entry-content h6 {
  border-bottom: 1px solid #dddddd;
}

.column-wrap h1, .column-wrap h2, .column-wrap h3,
.column-wrap h4, .column-wrap h5, .column-wrap h6 {
  margin-top: 0;
}

/* 背景画像の上に乗る白文字の見出し
   ※「工事紹介」エリアの中だけ白にする（ほかの場所に同じクラスが付いていても白くならないように） */
.top_service_info .topservice-h2,
.top_service_info .topservice-h3 {
  color: #ffffff;
}
.entry-content h2.about-h2,
.work-about h2 {
  border-bottom: 1px solid #ffffff;
}

@media (max-width: 480px) {
  .entry-content h2 {
    font-size: 20px;
    padding: 12px 16px;
  }
  .entry-content h3 {
    font-size: 18px;
    padding: .6em;
  }
  .entry-content h4,
  .entry-content h5,
  .entry-content h6 {
    font-size: 16px;
    padding: .6em;
  }
}


/* ==========================================================
   4. ボックス・段組み・ボタン（Cocoonブロックの見た目）
   ========================================================== */

/* 見出し付きボックス */
.caption-box {
  border: 2px solid #ffffff;
  border-radius: 4px;
  margin-bottom: 20px;
  background-color: transparent;
  overflow: hidden;
}
.caption-box-label {
  padding: .2em .8em;
  background-color: #eeeeee;
  color: #000000;
}
.caption-box-label-text {
  color: #000000;
}
.caption-box-content {
  padding: .4em .8em;
  background-color: transparent;
}
.caption-box-content p {
  color: #ffffff;
}

/* 白抜きボックス */
.blank-box {
  padding: 1em 1.5em;
  border: 3px solid rgb(25, 68, 142);
  border-radius: 4px;
  background-color: transparent;
  background-clip: padding-box;
  color: #ffffff;
}
.blank-box ul,
.blank-box ol {
  margin: 0;
}
.blank-box h6.wp-block-heading {
  border-bottom: 1px solid #dddddd;
  padding-bottom: 9.6px;
  font-weight: bold;
  text-align: center;
  font-size: 20px;
}
.blank-box figure.wp-block-image {
  margin-bottom: 20px;
}

/* 段組み（2列・3列） */
.column-wrap {
  display: flex;
  justify-content: space-between;
  gap: 1%;
  margin: 0;
}
.column-wrap > div {
  width: 49.5%;
  margin: 0;
}
.column-wrap.column-3 > div {
  width: 32.5%;
}
.column-wrap > div > :first-child {
  margin-top: 0;
}
@media (max-width: 834px) {
  .column-wrap {
    flex-direction: column;
    gap: 1.4em;
  }
  .column-wrap > div,
  .column-wrap.column-3 > div {
    width: 100%;
  }
}

/* ボタン */
.btn {
  display: inline-block;
  margin: 0;
  padding: 7px 13px;
  border: 2px solid transparent;
  border-radius: 4px;
  background-color: #333333;
  background-clip: padding-box;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: all .3s ease-in-out;
}
.btn-m {
  padding: 14px 45px;
  font-size: 16px;
}
.btn:hover {
  opacity: .7;
  color: #ffffff;
}
.button-block.aligncenter {
  text-align: center;
}

/* YouTube埋め込み */
.video-container {
  margin-left: auto;
  margin-right: auto;
}


/* ==========================================================
   5. トップページ専用
   ※ 画像URLは相対パスにしてローカル／本番どちらでも表示されるように
   ========================================================== */
.top_service_info {
  background-image: url(/wp-content/uploads/2020/01/AdobeStock_127200375_2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  padding-bottom: 25px;
}
.home .top_service_info {
  margin-bottom: 0;
}

.home .work-about {
  background-image: url(/wp-content/uploads/2020/01/AdobeStock_127200375_2-1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  margin-bottom: 0;
  color: #ffffff;
}

.toppage-access {
  background-image: url(/wp-content/uploads/2020/01/AdobeStock_127200375_2-1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}

.service-column {
  color: #ffffff;
  padding: 5px;
}


/* ==========================================================
   6. お知らせ・施工記録一覧（WP Show Posts）
   ========================================================== */
.wp-show-posts h5 {
  text-align: center;
}
.wp-show-posts .wp-show-posts-inner {
  text-align: right;
}
.wp-show-posts .wp-show-posts-entry-summary p {
  text-align: left;
}

/* 一覧下のページ番号（Cocoonのページ番号ボタンと同じ四角い枠） */
.wpsp-load-more .page-numbers {
  display: inline-block;
  width: 46px;
  height: 46px;
  margin: 0 4px;
  border: 1px solid #dddddd;
  border-radius: 4px;
  color: #333333;
  font-size: 16px;
  line-height: 44px;
  text-align: center;
  text-decoration: none;
}
.wpsp-load-more a.page-numbers:hover {
  background-color: #f5f8fa;
}
.wpsp-load-more .page-numbers.dots {
  opacity: .6;
  background-color: #f5f6f7;
}
@media (max-width: 480px) {
  .wpsp-load-more .page-numbers.dots {
    display: none;
  }
}


/* ==========================================================
   7. 工事関係ページ・表
   ========================================================== */
.anchor-content-list {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

.auto-width {
  width: fit-content;
}

.table_design01 {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  overflow: hidden;
  text-align: center;
}
.table_design01 tr {
  background-color: #e6f1f6;
}
.table_design01 tr:nth-child(even) {
  background-color: #fff;
}
/* ※本番のCSSと同じ指定（td側は元から余白なし） */
.table_design01 th,
.table_design09 td {
  padding: 1em;
}
.table_design01 thead th {
  background-color: #4d9bc1;
  color: #fff;
  font-weight: bold;
  text-align: center;
}
.table_design01 tbody th {
  color: #4d9bc1;
}

@media (max-width: 834px) {
  .table_design01 {
    border-radius: 0;
    text-align: left;
  }
  .table_design01 thead {
    display: none;
  }
  .table_design01 tr {
    background-color: unset;
  }
  .table_design01 th,
  .table_design01 td {
    display: block;
    border: 0;
    border-bottom: 1px solid #4d9bc1;
  }
  .table_design01 tbody th {
    background: #4d9bc1;
    color: #fff;
    text-align: center;
  }
  .table_design01 td::before {
    content: attr(data-label);
    background-color: #e6f1f6;
    font-weight: bold;
    display: inline-block;
    width: 50%;
    min-width: 4em;
    text-align: center;
    margin-right: .5em;
    padding: 4px;
    border-radius: 100vh;
  }
}

/* 普通の表（Cocoonの表デザイン：薄いグレーの罫線・1行おきに薄い背景） */
.entry-content table:not(.table_design01) {
  margin-bottom: 20px;
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.entry-content table:not(.table_design01) th,
.entry-content table:not(.table_design01) td {
  padding: .5em;
}
.entry-content table:not(.table_design01):not(.has-border-color) th,
.entry-content table:not(.table_design01):not(.has-border-color) td {
  border: 1px solid #eeeeee;
}
.entry-content table:not(.table_design01) th {
  background-color: #f5f6f7;
}
.entry-content table:not(.table_design01) tr:nth-of-type(2n+1) {
  background-color: #fafbfc;
}
/* 表ブロックの幅は中身に合わせる（Cocoonと同じ。中央寄せの表は真ん中に） */
.entry-content figure.wp-block-table {
  width: auto;
  max-width: 100%;
  display: block;
}
.entry-content figure.wp-block-table table {
  width: auto;
  margin-right: auto;
}
.entry-content figure.wp-block-table.aligncenter table {
  margin-left: auto;
}
.entry-content figure.wp-block-table.alignright table {
  margin-left: 0;
}
.entry-content figure.wp-block-table.alignwide table,
.entry-content figure.wp-block-table.alignfull table {
  width: 100%;
}

/* 表・画像の下の説明文（小さめ・少し薄く） */
.entry-content figcaption {
  margin: 0;
  font-size: .7em;
  opacity: .8;
  padding: 0 6px;
}
.entry-content figure.wp-block-table.aligncenter figcaption {
  text-align: center;
}

@media (max-width: 834px) {
  .entry-content table:not(.table_design01) th,
  .entry-content table:not(.table_design01) td {
    padding: 3px;
  }
}


/* ==========================================================
   8. 商品ページ・WooCommerce
   ========================================================== */
.woocommerce-page .site-main {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.woocommerce-product-gallery--columns-4 {
  width: 48% !important;
  margin-right: 4%;
}
.woocommerce #content div.product div.images,
.woocommerce #content div.product div.summary,
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.images,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.images,
.woocommerce-page div.product div.summary {
  float: left !important;
  width: 48% !important;
}

.woocommerce ul.products {
  display: flex;
  flex-wrap: wrap;
}
.woocommerce ul.products[class*=columns-] li.product,
.woocommerce-page ul.products[class*=columns-] li.product {
  float: left;
  margin: 0 2.95% 2.992em 0;
  padding: 0;
  position: relative;
  width: 22.05%;
  clear: initial;
}
.woocommerce ul.products[class*=columns-] li.product:nth-child(2n),
.woocommerce-page ul.products[class*=columns-] li.product:nth-child(2n) {
  float: left;
}

/* ページ送りを横並びに */
.woocommerce nav.woocommerce-pagination ul.page-numbers {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  clear: both !important;
  width: 100%;
  text-align: center;
  padding-left: 0;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li {
  display: inline-block !important;
  float: none !important;
  border-right: none !important;
}
.woocommerce nav.woocommerce-pagination ul {
  border: initial;
}

/* 商品検索・カテゴリーのタブ */
.tab-panel-1 { display: block; }
.tab-panel-2 { display: none; }
.page-description:has(#tab-2:checked) .tab-panel-1 { display: none; }
.page-description:has(#tab-2:checked) .tab-panel-2 { display: block; }

.tab-radio { display: none; }

.tab-label-group {
  list-style: none;
  display: flex;
  gap: 3px;
  padding: 0;
  margin: 0;
  font-size: 13px; /* 本番のCocoonタブと同じ */
}
.tab-label {
  margin: 0;
  cursor: pointer;
}
.tab-label label {
  display: block;
  padding: .4em 1.5em;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  background-color: #f2f2f2;
  cursor: pointer;
}
.tab-label-group li:nth-child(1) label {
  background-color: #404453;
  color: #fff;
}
.page-description:has(#tab-2:checked) .tab-label-group li:nth-child(1) label {
  background-color: #f2f2f2;
  color: initial;
}
.page-description:has(#tab-2:checked) .tab-label-group li:nth-child(2) label {
  background-color: #404453;
  color: #fff;
}
.tab-panel-1,
.tab-panel-2 {
  border: 1px solid #cccccc;
  padding: 1.2em;
  margin-bottom: 18px;
  border-radius: 2px;
}
.page-description .wp-block-search__input {
  font-size: inherit;
}
.page-description .wp-block-search__button {
  font-size: 14px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  white-space: nowrap;
}

.wp-block-search__input,
.wp-block-search__button {
  border-radius: 4px;
  border: 1px solid #ccc;
}
.orderby {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ccc;
}

@media (max-width: 834px) {
  .woocommerce-page .site-main,
  .woocommerce .entry-content {
    width: 95%;
  }
  .woocommerce-product-gallery--columns-4 {
    width: 100% !important;
    margin-right: 0;
  }
  .woocommerce #content div.product div.images,
  .woocommerce #content div.product div.summary,
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary,
  .woocommerce-page #content div.product div.images,
  .woocommerce-page #content div.product div.summary,
  .woocommerce-page div.product div.images,
  .woocommerce-page div.product div.summary {
    float: none !important;
    width: 100% !important;
  }
  .woocommerce ul.products[class*=columns-] li.product,
  .woocommerce-page ul.products[class*=columns-] li.product {
    width: 100%;
  }
}


/* ==========================================================
   9. フォーム・マイアカウント
   ========================================================== */
.wpcf7-form-control {
  background-color: #fff !important;
  border-color: #ccc !important;
  width: 100% !important;
  border-radius: 4px !important;
}
.wpcf7-submit {
  background-color: #f5f8fa !important;
  color: #333 !important;
}

.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
  float: none !important;
  width: 100% !important;
}


/* ==========================================================
   10. フッター（Cocoon：上下表示・ロゴなし・中央寄せ）
   ========================================================== */
.site-info {
  margin-top: 24px;
  background-color: #ffffff;
  color: #333333;
  font-size: 14px;
}
.site-info .inside-site-info {
  padding: 8px;
}
.kgn-footer {
  text-align: center;
}
.kgn-copyright {
  display: block;
}

/* パンくずリスト（投稿・固定ページの本文下） */
.kgn-breadcrumbs {
  width: 80%;
  margin: 24px auto 0;
  font-size: 13px;
  color: #666666;
}
.kgn-breadcrumbs a {
  color: #666666;
  text-decoration: none;
}
@media (max-width: 834px) {
  .kgn-breadcrumbs { width: 95%; }
}

/* 投稿ページ下のシェアボタン（Cocoon：3列・ブランドカラー） */
.kgn-share {
  margin: 2em 0;
}
.kgn-share-message {
  text-align: center;
  font-size: 14px;
  margin-bottom: .5em;
}
.kgn-share-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.kgn-share-buttons a,
.kgn-share-buttons button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: none;
  border-radius: 4px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .3s;
}
.kgn-share-buttons a:hover,
.kgn-share-buttons button:hover {
  opacity: .7;
  color: #ffffff;
}
.kgn-share-x      { background-color: #000000; }
.kgn-share-fb     { background-color: #3b5998; }
.kgn-share-hatebu { background-color: #2c6ebd; }
.kgn-share-line   { background-color: #00c300; }
.kgn-share-copy   { background-color: #333333; }


/* ==========================================================
   11. トップへ戻るボタン（PC）
   ========================================================== */
.kgn-go-top {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background-color: #eeeeee;
  color: #333333;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: .6s;
}
.kgn-go-top:hover,
.kgn-go-top:focus {
  background-color: #eeeeee;
  color: #333333;
}
.kgn-go-top.is-visible {
  visibility: visible;
  opacity: 1;
}


/* ==========================================================
   12. スマホ下部固定メニュー（Cocoonの「モバイルボタン」）
   ========================================================== */
.kgn-mobile-bar,
.kgn-search-overlay {
  display: none;
}

@media (max-width: 1023px) {
  .kgn-go-top { display: none; }

  body { padding-bottom: 56px; }

  .kgn-mobile-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom);
    list-style: none;
    background: #ffffff;
    border-top: 1px solid #dddddd;
    z-index: 100;
  }
  .kgn-mobile-bar li {
    flex: 1;
    margin: 0;
  }
  .kgn-mobile-bar a,
  .kgn-mobile-bar button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    padding: 0;
    border: none;
    background: none;
    color: #333333;
    font-size: 11px;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
  }
  .kgn-mobile-bar svg {
    width: 22px;
    height: 22px;
    margin-bottom: 2px;
    fill: currentColor;
  }

  .kgn-search-overlay.is-open {
    display: flex;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .6);
    z-index: 110;
  }
  .kgn-search-overlay .search-form {
    display: flex;
    width: 100%;
    max-width: 480px;
  }
  .kgn-search-overlay .search-field {
    flex: 1;
    background: #fff;
  }
}

/* スマホ：左から出るメニュー（Cocoonのスライドメニューを再現） */
.kgn-drawer,
.kgn-drawer-overlay {
  display: none;
}

@media (max-width: 1023px) {
  .kgn-drawer {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 400px;
    padding: 10px 24px 80px;
    overflow-y: auto;
    background: #ffffff;
    z-index: 130;
    transform: translateX(-100%);
    transition: transform .3s ease-in-out;
  }
  .kgn-drawer-open .kgn-drawer {
    transform: translateX(0);
  }

  .kgn-drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 120;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
  }
  .kgn-drawer-open .kgn-drawer-overlay {
    opacity: 1;
    visibility: visible;
  }
  .kgn-drawer-open {
    overflow: hidden;
  }

  .kgn-drawer-close {
    display: block;
    margin: 0 auto 8px;
    padding: 4px;
    border: none;
    background: none;
    color: #333333;
    cursor: pointer;
  }
  .kgn-drawer-close svg {
    display: block;
    width: 40px;
    height: 40px;
    fill: currentColor;
  }

  .kgn-drawer ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .kgn-drawer .sub-menu {
    padding-left: 20px;
  }
  .kgn-drawer a {
    display: block;
    padding: 6px;
    color: #333333;
    font-size: 17px;
    line-height: 1.6;
    letter-spacing: .08em;
    text-decoration: none;
  }
  .kgn-drawer a:hover {
    background-color: #f5f8fa;
  }
  .kgn-drawer .kgn-menu-home svg {
    display: block;
    width: 21px;
    height: 21px;
  }
}

/* メニューの家アイコン（Cocoonの Font Awesome「fa-home」の代わり） */
.kgn-menu-home svg {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -.15em;
  fill: currentColor;
}


/* ==========================================================
   13. トップページ専用CSS
   ※ 本番ではCocoonの「固定ページごとのカスタムCSS」に書かれていたもの。
     GeneratePressにはその欄がないため、.home を付けてここに移行
   ========================================================== */

/* グレー背景のセクション（ブロック側で色が指定されていても本番と同じ #ddd に） */
.home .top-backcolor-gray {
  background-color: #dddddd !important;
}

/* SDGsのエリア幅 */
.home .sdgs-content-group {
  width: 1000px;
  max-width: 100%;
}
@media (max-width: 1240px) {
  .home .sdgs-content-group {
    width: 100%;
  }
}

/* 「お知らせ」「インスタグラム」の見出し：上線なし・中央 */
.home h4.wp-block-heading {
  border-top: none;
  text-align: center;
}

/* 施工記録一覧のタイトル下線 */
.home .work-log-top h5 {
  border-bottom: 2px solid #666666;
}

.home .pt-cv-view .pt-cv-ifield {
  text-align: center;
}

/* アクセス欄の2列 */
@media (min-width: 1241px) {
  .home .top-access-column-left  { padding: 0 30px 30px 150px; }
  .home .top-access-column-right { padding: 0 30px 10px 30px; }
}
@media (max-width: 1240px) {
  .home .top-access-column-left  { padding: 0 30px 30px 100px; }
  .home .top-access-column-right { padding: 0 30px 10px 30px; }
}
@media (max-width: 1023px) {
  .home .top-access-column-left  { padding: 0 30px 30px 80px; }
}
@media (max-width: 834px) {
  .home .top-access-column-left  { padding: 0 30px 30px 50px; }
}
@media (max-width: 480px) {
  .home .top-access-column-left  { padding: 0 10px 10px 10px; }
  .home .top-access-column-right { padding: 0 10px 10px 10px; }
}

/* ----------------------------------------------------------
   本番のトップスライダー（Smart Sliderを使わない軽い版）
   ページに .image-container のHTMLがあるときだけ動きます
   ---------------------------------------------------------- */
.image-container {
  height: 650px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.image-container .image-wrapper {
  position: relative;
}
.image-container .image {
  width: 100%;
  height: auto;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transition: opacity 3s ease-in-out, transform 3s ease-in-out;
}
.image-container .text {
  position: absolute;
  top: 300px;
  left: 50%;
  bottom: 20px;
  z-index: 2;
  margin: 0;
  padding: 5px;
  color: #ffffff;
  font-size: 32px;
  font-weight: 700;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 3s ease-in-out, transform 3s ease-in-out;
}
@media (max-width: 834px) {
  .image-container .image {
    object-fit: cover;
    width: 100%;
    height: 650px;
  }
  .image-container .text {
    top: 200px;
    width: 80%;
    text-align: center;
  }
}


/* ==========================================================
   14. 固定ページ本文下（お問い合わせ欄・日付・作成者）
   ========================================================== */
.kgn-page-bottom {
  padding-bottom: 24px;
}
.kgn-contact-lead,
.fz-32px {
  font-size: 32px;
}
.kgn-contact-lead,
.bold {
  font-weight: 700;
}
.kgn-contact-tel,
.phone-number a {
  color: #ff0000;
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
}
.kgn-contact-tel svg {
  vertical-align: -3px;
  margin-right: 4px;
}
/* Cocoonのウィジェットをそのまま移した場合の電話アイコン（Font Awesomeの代わり） */
.phone-number .fa-phone {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 4px;
  vertical-align: -3px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z'/%3E%3C/svg%3E") no-repeat center / contain;
}
@media (max-width: 480px) {
  .kgn-contact-lead,
  .fz-32px {
    font-size: 24px;
  }
}

/* 投稿日・更新日（右寄せ・小さめ） */
.kgn-date-tags {
  width: 95%;
  margin: 0 auto;
  text-align: right;
  font-size: 13px;
  color: #333333;
}
.kgn-date-tags span + span {
  margin-left: 8px;
}
.kgn-date-tags svg {
  vertical-align: -2px;
  margin-right: 2px;
}


/* ==========================================================
   15. トップのSmart Slider：本番スライダーと同じ余白にする
   本番は枠の高さ650px固定（画像が低いと下に余白が出る）
   ========================================================== */
@media (min-width: 835px) {
  .home .entry-content > .n2_clear {
    min-height: 650px;
  }
}
.home .entry-content > .n2_clear {
  margin-bottom: 20px;
}


/* ==========================================================
   17. 固定ページタイトル上のサイト内検索（Cocoonの検索ボックス）
   ========================================================== */
/* 本番と同じく画面いっぱいの幅 */
.kgn-above-title {
  width: 100%;
  margin: 0;
}
.kgn-search-box,
.widget-above-page-content-title .search-box {
  position: relative;
  margin: 1em 0 2em;
}
.kgn-search-edit,
.widget-above-page-content-title .search-edit,
.widget-above-page-content-title input[type="search"] {
  width: 100%;
  padding: 11px;
  border: 1px solid #dddddd;
  border-radius: 4px;
  background-color: #ffffff;
  color: #333333;
  font-family: inherit;
  font-size: 16px;
}
.kgn-search-submit,
.widget-above-page-content-title .search-submit {
  position: absolute;
  right: 3px;
  top: calc(50% - 12px);
  padding: 0 8px;
  border: none;
  background-color: transparent;
  color: #dddddd;
  line-height: 1;
  cursor: pointer;
}
.kgn-search-submit:hover,
.kgn-search-submit:focus {
  background-color: transparent;
  color: #999999;
}


/* ==========================================================
   16. Cocoonの色パレット（ブロックで選んだ文字色・背景色・枠線色）
   GeneratePressには無い色名のため、本番と同じ色を定義
   ========================================================== */
.has-amber-color{color:#ffc107 !important}
.has-amber-background-color{background-color:#ffc107 !important}
.has-amber-border-color{border-color:#ffc107 !important}
.has-black-color{color:#000000 !important}
.has-black-background-color{background-color:#000000 !important}
.has-black-border-color{border-color:#000000 !important}
.has-blue-color{color:#0095d9 !important}
.has-blue-background-color{background-color:#0095d9 !important}
.has-blue-border-color{border-color:#0095d9 !important}
.has-brown-color{color:#954e2a !important}
.has-brown-background-color{background-color:#954e2a !important}
.has-brown-border-color{border-color:#954e2a !important}
.has-cocoon-black-color{color:#333333 !important}
.has-cocoon-black-background-color{background-color:#333333 !important}
.has-cocoon-black-border-color{border-color:#333333 !important}
.has-cocoon-white-color{color:#ffffff !important}
.has-cocoon-white-background-color{background-color:#ffffff !important}
.has-cocoon-white-border-color{border-color:#ffffff !important}
.has-cyan-color{color:#00a3af !important}
.has-cyan-background-color{background-color:#00a3af !important}
.has-cyan-border-color{border-color:#00a3af !important}
.has-cyan-bluish-gray-color{color:#abb8c3 !important}
.has-cyan-bluish-gray-background-color{background-color:#abb8c3 !important}
.has-cyan-bluish-gray-border-color{border-color:#abb8c3 !important}
.has-dark-grey-color{color:#666666 !important}
.has-dark-grey-background-color{background-color:#666666 !important}
.has-dark-grey-border-color{border-color:#666666 !important}
.has-deep-color{color:#55295b !important}
.has-deep-background-color{background-color:#55295b !important}
.has-deep-border-color{border-color:#55295b !important}
.has-deep-orange-color{color:#ea5506 !important}
.has-deep-orange-background-color{background-color:#ea5506 !important}
.has-deep-orange-border-color{border-color:#ea5506 !important}
.has-green-color{color:#3eb370 !important}
.has-green-background-color{background-color:#3eb370 !important}
.has-green-border-color{border-color:#3eb370 !important}
.has-grey-color{color:#949495 !important}
.has-grey-background-color{background-color:#949495 !important}
.has-grey-border-color{border-color:#949495 !important}
.has-indigo-color{color:#1e50a2 !important}
.has-indigo-background-color{background-color:#1e50a2 !important}
.has-indigo-border-color{border-color:#1e50a2 !important}
.has-key-color-color{color:#19448e !important}
.has-key-color-background-color{background-color:#19448e !important}
.has-key-color-border-color{border-color:#19448e !important}
.has-light-blue-color{color:#2ca9e1 !important}
.has-light-blue-background-color{background-color:#2ca9e1 !important}
.has-light-blue-border-color{border-color:#2ca9e1 !important}
.has-light-green-color{color:#8bc34a !important}
.has-light-green-background-color{background-color:#8bc34a !important}
.has-light-green-border-color{border-color:#8bc34a !important}
.has-light-green-cyan-color{color:#7bdcb5 !important}
.has-light-green-cyan-background-color{background-color:#7bdcb5 !important}
.has-light-green-cyan-border-color{border-color:#7bdcb5 !important}
.has-light-grey-color{color:#dddddd !important}
.has-light-grey-background-color{background-color:#dddddd !important}
.has-light-grey-border-color{border-color:#dddddd !important}
.has-lime-color{color:#c3d825 !important}
.has-lime-background-color{background-color:#c3d825 !important}
.has-lime-border-color{border-color:#c3d825 !important}
.has-luminous-vivid-amber-color{color:#fcb900 !important}
.has-luminous-vivid-amber-background-color{background-color:#fcb900 !important}
.has-luminous-vivid-amber-border-color{border-color:#fcb900 !important}
.has-luminous-vivid-orange-color{color:#ff6900 !important}
.has-luminous-vivid-orange-background-color{background-color:#ff6900 !important}
.has-luminous-vivid-orange-border-color{border-color:#ff6900 !important}
.has-orange-color{color:#f39800 !important}
.has-orange-background-color{background-color:#f39800 !important}
.has-orange-border-color{border-color:#f39800 !important}
.has-pale-cyan-blue-color{color:#8ed1fc !important}
.has-pale-cyan-blue-background-color{background-color:#8ed1fc !important}
.has-pale-cyan-blue-border-color{border-color:#8ed1fc !important}
.has-pale-pink-color{color:#f78da7 !important}
.has-pale-pink-background-color{background-color:#f78da7 !important}
.has-pale-pink-border-color{border-color:#f78da7 !important}
.has-pink-color{color:#e95295 !important}
.has-pink-background-color{background-color:#e95295 !important}
.has-pink-border-color{border-color:#e95295 !important}
.has-purple-color{color:#884898 !important}
.has-purple-background-color{background-color:#884898 !important}
.has-purple-border-color{border-color:#884898 !important}
.has-red-color{color:#e60033 !important}
.has-red-background-color{background-color:#e60033 !important}
.has-red-border-color{border-color:#e60033 !important}
.has-subtle-light-gray-color{color:#f3f4f5 !important}
.has-subtle-light-gray-background-color{background-color:#f3f4f5 !important}
.has-subtle-light-gray-border-color{border-color:#f3f4f5 !important}
.has-subtle-pale-blue-color{color:#e7f5fe !important}
.has-subtle-pale-blue-background-color{background-color:#e7f5fe !important}
.has-subtle-pale-blue-border-color{border-color:#e7f5fe !important}
.has-subtle-pale-green-color{color:#e9fbe5 !important}
.has-subtle-pale-green-background-color{background-color:#e9fbe5 !important}
.has-subtle-pale-green-border-color{border-color:#e9fbe5 !important}
.has-subtle-pale-pink-color{color:#fcf0ef !important}
.has-subtle-pale-pink-background-color{background-color:#fcf0ef !important}
.has-subtle-pale-pink-border-color{border-color:#fcf0ef !important}
.has-teal-color{color:#007b43 !important}
.has-teal-background-color{background-color:#007b43 !important}
.has-teal-border-color{border-color:#007b43 !important}
.has-very-dark-gray-color{color:#313131 !important}
.has-very-dark-gray-background-color{background-color:#313131 !important}
.has-very-dark-gray-border-color{border-color:#313131 !important}
.has-very-light-gray-color{color:#eee !important}
.has-very-light-gray-background-color{background-color:#eee !important}
.has-very-light-gray-border-color{border-color:#eee !important}
.has-vivid-cyan-blue-color{color:#0693e3 !important}
.has-vivid-cyan-blue-background-color{background-color:#0693e3 !important}
.has-vivid-cyan-blue-border-color{border-color:#0693e3 !important}
.has-vivid-green-cyan-color{color:#00d084 !important}
.has-vivid-green-cyan-background-color{background-color:#00d084 !important}
.has-vivid-green-cyan-border-color{border-color:#00d084 !important}
.has-vivid-purple-color{color:#9b51e0 !important}
.has-vivid-purple-background-color{background-color:#9b51e0 !important}
.has-vivid-purple-border-color{border-color:#9b51e0 !important}
.has-vivid-red-color{color:#cf2e2e !important}
.has-vivid-red-background-color{background-color:#cf2e2e !important}
.has-vivid-red-border-color{border-color:#cf2e2e !important}
.has-watery-blue-color{color:#f3fafe !important}
.has-watery-blue-background-color{background-color:#f3fafe !important}
.has-watery-blue-border-color{border-color:#f3fafe !important}
.has-watery-green-color{color:#ebf8f4 !important}
.has-watery-green-background-color{background-color:#ebf8f4 !important}
.has-watery-green-border-color{border-color:#ebf8f4 !important}
.has-watery-red-color{color:#fdf2f2 !important}
.has-watery-red-background-color{background-color:#fdf2f2 !important}
.has-watery-red-border-color{border-color:#fdf2f2 !important}
.has-watery-yellow-color{color:#fff7cc !important}
.has-watery-yellow-background-color{background-color:#fff7cc !important}
.has-watery-yellow-border-color{border-color:#fff7cc !important}
.has-white-color{color:#ffffff !important}
.has-white-background-color{background-color:#ffffff !important}
.has-white-border-color{border-color:#ffffff !important}
.has-yellow-color{color:#ffd900 !important}
.has-yellow-background-color{background-color:#ffd900 !important}
.has-yellow-border-color{border-color:#ffd900 !important}


/* ==========================================================
   18. 入力欄（Cocoonと同じく白背景・細いグレー枠）
   GeneratePressの標準は薄いグレー背景のため
   ========================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
  padding: 11px;
  border: 1px solid #dddddd;
  border-radius: 4px;
  background-color: #ffffff;
  color: #333333;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
  background-color: #ffffff;
  color: #333333;
  border-color: #bbbbbb;
}

/* 文字色を指定したブロックの中のリンクは、その文字色にする（例：ケモファスト） */
.has-text-color a,
.has-text-color a:hover,
.has-text-color a:visited {
  color: inherit;
}


/* ==========================================================
   19. オンラインストア（ショップページ）
   GeneratePressの外枠の余白・白背景を外し、本番と同じ幅80%に
   ========================================================== */
.woocommerce-shop .inside-article {
  padding: 0;
  background-color: transparent;
}
.woocommerce-shop .woocommerce-products-header {
  padding: 0;
}
.woocommerce-shop .kgn-page-bottom {
  clear: both;
  padding-top: 24px;
}

/* オンラインストア：中央寄せ（GeneratePress本体の「左右余白0」より強く指定） */
.separate-containers.no-sidebar.woocommerce-page .site-main {
  margin-left: auto;
  margin-right: auto;
}


/* ==========================================================
   20. ボタンブロック（「続きを読む」「オプションを選択」など）
   本番（Cocoon）と同じ、角なし・濃いグレーにする
   ========================================================== */
a.wp-block-button__link:not(.has-background),
a.wp-block-button__link:not(.has-background):hover,
a.wp-block-button__link:not(.has-background):focus {
  background-color: #333631;
  color: #ffffff;
}
.wp-block-button__link {
  border-radius: 0;
}


/* ==========================================================
   21. 会社概要ページ専用（本番のページ別CSSを移行）
   ※ 表の線は見やすさのため、今の線を残す
   ========================================================== */
.page-id-12 .company-tbl-group {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}
.page-id-12 .company-tbl {
  margin: 20px auto;
  width: auto;
}
.page-id-12 .company-tbl tr {
  background-color: transparent;
}
.page-id-12 .company-tbl th {
  background-color: transparent;
  padding: 10px;
  text-align: left;
  width: 30%;
}
.page-id-12 .company-tbl td {
  background-color: transparent;
  padding: 10px;
}
.page-id-12 .company-tbl td p {
  margin-bottom: 0;
}
.page-id-12 .enkaku-tbl {
  color: #ffffff;
}
@media (max-width: 640px) {
  .page-id-12 .company-tbl-group {
    width: 100%;
  }
  .page-id-12 .company-tbl {
    width: 95%;
  }
  .page-id-12 .company-tbl th,
  .page-id-12 .company-tbl td {
    display: block;
    width: 100%;
  }
}


/* ==========================================================
   22. 「幅広」ブロックのはみ出しを無くす（Cocoonと同じ）
   GeneratePressは幅広ブロックを左右に40px（スマホ30px）はみ出させるため
   ========================================================== */
.entry-content .alignwide {
  margin-left: 0;
  margin-right: 0;
  width: auto;
  max-width: 100%;
}
/* ※「メディアと文章」の文章側の余白は、本番もWordPress標準（幅の8%）が効いていたので指定しない */


/* ==========================================================
   23. ロゴと本文の間・本文の上下の余白（Cocoonと同じ）
   Cocoon：本文エリアの上 24px（1023px以下は 10px＋10px、834px以下は 10px＋12px）
          本文の上 1文字分、本文の下 3文字分
   ========================================================== */
.site-content {
  margin-top: 24px;
}
@media (max-width: 1023px) {
  .site-content { margin-top: 20px; }
}
@media (max-width: 834px) {
  .site-content { margin-top: 22px; }
}
.page .inside-article .entry-content,
.single .inside-article .entry-content {
  margin-top: 1em;
  margin-bottom: 3em;
}
/* ==========================================================
   Cocoonの文字装飾（エディターのツールバーで付けたもの）
   マーカー・文字色・文字サイズ・取り消し線
   ========================================================== */
/* マーカー（文字の後ろを塗る） */
.marker      { background-color: #ff9; }
.marker-red  { background-color: #ffd0d1; }
.marker-blue { background-color: #a8dafb; }

/* 下線マーカー（文字の下半分だけ塗る） */
.marker-under      { background: linear-gradient(transparent 60%, #ff9 60%); }
.marker-under-red  { background: linear-gradient(transparent 60%, #ffd0d1 60%); }
.marker-under-blue { background: linear-gradient(transparent 60%, #a8dafb 60%); }

/* 文字色・太字 */
.red        { color: #e60033; }
.blue       { color: #0095d9; }
.green      { color: #3eb370; }
.bold-red   { font-weight: 700; color: #e60033; }
.bold-blue  { font-weight: 700; color: #0095d9; }
.bold-green { font-weight: 700; color: #3eb370; }

/* 取り消し線 */
.strike { text-decoration: line-through; }

/* 文字サイズ（fz-32px と bold は前に追加済み） */
.fz-12px { font-size: 12px; }
.fz-13px { font-size: 13px; }
.fz-14px { font-size: 14px; }
.fz-15px { font-size: 15px; }
.fz-16px { font-size: 16px; }
.fz-17px { font-size: 17px; }
.fz-18px { font-size: 18px; }
.fz-19px { font-size: 19px; }
.fz-20px { font-size: 20px; }
.fz-21px { font-size: 21px; }
.fz-22px { font-size: 22px; }
.fz-24px { font-size: 24px; }
.fz-28px { font-size: 28px; }
.fz-36px { font-size: 36px; }
.fz-40px { font-size: 40px; }
.fz-44px { font-size: 44px; }
.fz-48px { font-size: 48px; }

/* 本文中のリスト（Cocoonと同じ余白） */
.entry-content ul,
.entry-content ol {
  padding-left: 26px;
}
.entry-content ul li,
.entry-content ol li {
  margin: .2em;
}
/* ==========================================================
   ブロックの「制約付きレイアウト」：中の要素を中央に置く
   （WordPress標準の動き。GeneratePressでは出力されないため補う）
   ========================================================== */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  margin-left: auto !important;
  margin-right: auto !important;
}
/* 「幅を中身に合わせる」グループの中に「メディアと文章」がある場合は、
   グループを通常の幅に戻す（文字が細く折り返すのを防ぐ） */
.auto-width:has(.wp-block-media-text) {
  width: auto;
}
/* 工事関係ページ：「幅を中身に合わせる」グループの中の「メディアと文章」は
   画像の欄を使わない（画像なし・リストだけを中央に表示） */
.auto-width .wp-block-media-text {
  display: block;
}
.auto-width .wp-block-media-text__media {
  display: none;
}
.auto-width:has(.wp-block-media-text) {
  width: fit-content;
}

/* ==========================================================
   24. 検索結果・カテゴリー一覧（Cocoonの記事カード一覧）
   ========================================================== */
.kgn-archive-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
}
.kgn-archive-title svg {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  fill: currentColor;
}
.kgn-archive-search .kgn-search-box {
  margin: 0 0 2em;
}

.kgn-card-wrap {
  display: block;
  padding: 1.5%;
  color: #333333;
  text-decoration: none;
  transition: all .3s ease-in-out;
}
.kgn-card-wrap:hover {
  background-color: #f5f8fa;
  color: #333333;
}
.kgn-card {
  position: relative;
  height: 100%;
}
.kgn-card::after {
  content: "";
  display: block;
  clear: both;
}
.kgn-card-thumb {
  float: left;
  position: relative;
  width: 320px;
  margin: 3px 0 .4em;
}
.kgn-card-thumb img,
.kgn-card-noimage {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.kgn-card-noimage {
  background-color: #f5f6f7;
}
.kgn-card-thumb .kgn-cat-label {
  top: .24em;
  left: .24em;
  border-color: #eeeeee;
  border-radius: 0;
  background-color: rgba(51, 51, 51, .7);
  font-size: 10px;
  opacity: 1;
}
.kgn-card-content {
  margin-left: 330px;
  padding-bottom: 1.2em;
}
.kgn-card-title {
  display: -webkit-box;
  margin: 0 0 .4em;
  overflow: hidden;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.kgn-card-snippet {
  display: -webkit-box;
  margin: 0 0 .4em;
  overflow: hidden;
  font-size: .8em;
  line-height: 1.3;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.kgn-card-meta {
  position: absolute;
  right: 0;
  bottom: 0;
  line-height: 1;
  text-align: right;
}
.kgn-card-date {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px;
  font-size: .7em;
}
.kgn-card-date svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* 「次のページ」ボタン */
.kgn-pagination-next {
  margin-top: 24px;
}
.kgn-pagination-next-link {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid #dddddd;
  background-color: #f9f9f9;
  color: #333333;
  font-size: 1.2em;
  text-align: center;
  text-decoration: none;
}
.kgn-pagination-next-link:hover {
  background-color: #f5f8fa;
  color: #333333;
}

/* ページ番号 */
.kgn-pagination {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 24px 0;
  clear: both;
}
.kgn-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 0 4px;
  border: 1px solid #dddddd;
  border-radius: 4px;
  color: #333333;
  font-size: 16px;
  text-decoration: none;
}
.kgn-pagination a.page-numbers:hover {
  background-color: #f5f8fa;
}
.kgn-pagination .page-numbers.current {
  background-color: #eeeeee;
}
.kgn-pagination .page-numbers.dots {
  opacity: .6;
  background-color: #f5f6f7;
}
.kgn-pagination svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

@media (max-width: 1240px) {
  .kgn-card-thumb {
    width: 38%;
  }
  .kgn-card-content {
    margin-left: 40%;
  }
}
@media (max-width: 834px) {
  .kgn-card-title {
    font-size: 17px;
  }
  .kgn-card-snippet {
    font-size: 14px;
  }
}
@media (max-width: 480px) {
  .kgn-card-title {
    line-height: 1.3;
  }
  .kgn-card-snippet {
    -webkit-line-clamp: 3;
  }
  .kgn-pagination .page-numbers.dots {
    display: none;
  }
  .kgn-pagination-next-link {
    font-size: 1em;
  }
}