/* =========================================================================
KGT 2026 メインスタイル
数値は現行サイト（旧テーマ kgt）の表示を実測した値に合わせている（raw/computed-styles.json）
========================================================================= */
:root {
--kgt-accent: #b4a28c; /* 差し色（ベージュ） */
--kgt-text: #333;
--kgt-heading: #141414;
--kgt-sub: #444;
--kgt-muted: #999;
--kgt-line: #e7e7e7;
--kgt-container: 940px;
}
/* ---- 基本 ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: #fff;
color: var(--kgt-text);
font-family: "Open Sans"; /* 旧テーマと同じ指定（日本語は OS 標準の書体で表示される） */
font-size: 13px;
line-height: 24px;
}
a { color: var(--kgt-accent); text-decoration: none; transition: color .2s ease-in-out; }
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--kgt-heading); font-weight: 600; }
h1 { font-size: 20px; line-height: 38px; }
h2 { font-size: 22px; line-height: 30px; }
h3 { font-size: 18px; line-height: 26px; }
h4 { font-size: 16px; line-height: 24px; }
h5 { font-size: 15px; line-height: 22px; }
h6 { font-size: 14px; line-height: 20px; }
p { margin: 0 0 13px; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.kgt-icon { display: inline-block; line-height: 0; }
.kgt-icon svg { width: 100%; height: 100%; }
.kgt-icon svg:not([fill="none"]) { fill: currentColor; }
.container { width: var(--kgt-container); margin: 0 auto; position: relative; }
.container::after, .blog-article::after, .recent_news dl::after, .kgt-row::after, .content::after { content: ""; display: table; clear: both; }
.viewport { position: relative; overflow-x: hidden; }
/* ---- ヘッダー（PC） ---- */
.header_wrapper { position: relative; z-index: 32; }
#header { position: relative; height: 110px; z-index: 10000; }
#logo { float: left; width: 100px; height: 110px; }
#logo a { display: block; }
#logo img { display: block; width: 100px; height: 100px; margin-top: 5px; }
#navigation { float: right; height: 110px; }
#navigation .menu { list-style: none; display: flex; }
#navigation .menu > li { padding: 0 15px; margin-right: 5px; text-align: center; }
#navigation .menu > li > a {
display: block;
margin-top: 45px;
padding: 0 12px; /* 旧テーマのリンク幅（文字幅＋約24px）に合わせる */
font-size: 14px;
line-height: 55px;
color: #4f4f4f;
transition: color .4s;
}
#navigation .menu > li > a:hover,
#navigation .menu > li.current-menu-item > a,
#navigation .menu > li.current_page_item > a { color: var(--kgt-accent); }
.mobile_small_menu { display: none; }
.menu-small { display: none; }
/* ---- スライダー（トップ） ---- */
#slider-fixed { padding-top: 45px; background: #fff; }
.kgt-slider { position: relative; overflow: hidden; border-radius: 2px; }
.kgt-slider .slides { list-style: none; position: relative; }
.kgt-slider .slides li { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.kgt-slider .slides li:first-child { position: relative; } /* 1枚目で高さを決める */
.kgt-slider .slides li.is-active { opacity: 1; z-index: 2; }
.kgt-slider .slides img { display: block; width: 100%; height: auto; }
.kgt-slider .flex-prev,
.kgt-slider .flex-next {
position: absolute; top: 0; bottom: 0; z-index: 10;
width: 50px;
background: rgba(255, 255, 255, .1) center / 22px 44px no-repeat;
opacity: 0;
transition: all .3s;
}
.kgt-slider .flex-prev { left: -36px; border-radius: 0 8px 8px 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 44'%3E%3Cpath d='M20 2L2 22l18 20' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E"); }
.kgt-slider .flex-next { right: -36px; border-radius: 8px 0 0 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 44'%3E%3Cpath d='M2 2l18 20L2 42' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E"); }
.kgt-slider:hover .flex-prev { left: 0; opacity: .8; }
.kgt-slider:hover .flex-next { right: 0; opacity: .8; }
.kgt-slider .flex-prev:hover, .kgt-slider .flex-next:hover { opacity: 1; background-color: rgba(255, 255, 255, .2); }
@media (max-width: 860px) { /* スマホ・タブレットでは矢印を常に表示（旧テーマと同じ） */
.kgt-slider .flex-prev { left: 0; opacity: 1; }
.kgt-slider .flex-next { right: 0; opacity: 1; }
}
/* ---- 本文エリア ---- */
.top_wrapper { position: relative; z-index: 1; }
#content { position: relative; z-index: 9; padding: 85px 0 10px; background: #fff; }
#content.sidebar_right,
#content.has-header { padding-top: 60px; }
#content.is-flush { padding: 0; }
/* ---- セクション型の固定ページ（旧 WPBakery から変換した本文） ----
本文の書き方:
…
1つのまとまり（下に 85px の余白）
…
上下に余白のあるまとまり（Profile）
見出し
大文字の見出し＋「線・□・線」の飾り
…
自由見出し（文字サイズ等は style で指定）
細い区切り線
空白
------------------------------------------------------------------------ */
.kgt-row { margin-bottom: 85px; }
.kgt-row:last-child { margin-bottom: 0; }
.kgt-row--section { margin-bottom: 0; padding: 70px 0 80px; }
.kgt-row > * { margin-bottom: 35px; }
.kgt-row > *:last-child { margin-bottom: 0; }
.kgt-row > p:last-child { margin-bottom: 0; }
.section-title {
position: relative;
margin-top: -10px;
font-size: 20px;
font-weight: 700;
line-height: 38px;
letter-spacing: 1.5px;
text-transform: uppercase;
text-align: center;
color: var(--kgt-heading);
}
.section-title::before,
.section-title::after { content: ""; position: absolute; left: 50%; pointer-events: none; }
.section-title::before { /* 左右の線（各 90px、中央に 28px の間） */
bottom: -11px; margin-left: -104px; width: 208px; height: 1px; /* 見出しの下端から 10px（複数行の見出しでも文字に重ならない） */
background: linear-gradient(to right, #ccc 0 90px, transparent 90px 118px, #ccc 118px 208px);
}
.section-title::after { /* 中央の小さな四角 */
bottom: -17px; margin-left: -6px; width: 12px; height: 12px; border: 1px solid #ddd; background: #fff;
}
.kgt-row > .section-title:not(:last-child) { margin-bottom: 35px; }
.kgt-heading { font-size: 22px; line-height: 30px; color: var(--kgt-heading); } /* 文字サイズ等は本文の style 属性で指定 */
.kgt-heading a { color: var(--kgt-heading); transition: all .2s ease-in-out; }
.kgt-separator { display: block; height: 1px; margin: 30px 0 0; border: 0; background: #e1e1e1; }
.kgt-row > .kgt-heading { margin-bottom: 0; } /* 自由見出しの下は余白なし（旧と同じ） */
.kgt-space { display: block; }
.kgt-text p:last-child { margin-bottom: 0; }
.img-circle { border-radius: 500px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 0 20px 10px 0; }
.alignright { float: right; margin: 0 0 10px 20px; }
/* ---- トップの NEWS 一覧 ---- */
.recent_news { text-align: center; }
.recent_news dl { margin: 0 0 15px; }
.recent_news dl:last-child { margin-bottom: 0; }
/* アイキャッチは 64×64（スマホは 56×56。480px 以下の調整を参照）。文字の左余白＝画像の幅＋間隔 14px */
.recent_news dt { float: left; width: 64px; height: 64px; overflow: hidden; text-align: left; }
.recent_news dt img { width: 100%; height: 100%; object-fit: cover; } /* 縦横比を保ったまま枠いっぱいに表示（はみ出しは切る） */
.recent_news dd { margin: 0 0 0 78px; line-height: 20px; }
.recent_news h5 { font-size: 15px; font-weight: 600; line-height: 22px; overflow-wrap: anywhere; } /* 空白の無い長い英字・URL も枠内で折り返す */
.recent_news h5 a { color: var(--kgt-heading); transition: .4s; }
.recent_news h5 a:hover { color: var(--kgt-accent); }
.recent_news .date { font-size: 13px; line-height: 20px; }
.recent_news p { margin: 13px 0; line-height: 20px; }
/* ---- ページ上部の見出し帯（記事詳細・通常の固定ページ・検索・404） ---- */
.header_page { position: relative; height: 80px; color: var(--kgt-sub); }
/* タイトルとパンくずは横に並べる。長いタイトルはパンくずに重ならず、残りの幅の中で省略表示になる */
.header_page .container { display: flex; align-items: center; height: 100%; }
.header_page h1 { flex: 1 1 auto; min-width: 0; margin-right: 20px; font-size: 24px; font-weight: 600; line-height: 80px; text-transform: uppercase; color: var(--kgt-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumbss { flex: 0 1 auto; min-width: 0; max-width: 50%; margin-left: auto; }
.breadcrumbss ul { list-style: none; display: flex; }
.breadcrumbss li { padding-left: 15px; font-size: 12px; line-height: 24px; color: var(--kgt-sub); white-space: nowrap; }
.breadcrumbss li.home a { font-weight: 700; color: var(--kgt-sub); }
.breadcrumbss li.active { position: relative; flex: 0 1 auto; min-width: 0; padding-left: 27px; overflow: hidden; text-overflow: ellipsis; }
.breadcrumbss li.active::before { content: "/"; position: absolute; left: 11px; font-size: 11px; }
.breadcrumbss li.active a, .breadcrumbss li.active span { color: var(--kgt-sub); }
/* 記事詳細: パンくずだけの帯（左寄せ・全幅）。この下に記事タイトル（h1）が来る */
.header_page--crumb-only { height: auto; padding-top: 28px; }
.header_page--crumb-only .container { display: block; }
.header_page--crumb-only .breadcrumbss { max-width: 100%; margin-left: 0; }
.header_page--crumb-only .breadcrumbss li { padding-left: 0; }
.header_page--crumb-only .breadcrumbss li.active { padding-left: 14px; }
.header_page--crumb-only .breadcrumbss li.active::before { left: 3px; }
.header_page--crumb-only + #content.sidebar_right { padding-top: 24px; }
/* ---- 記事（Blog 一覧・記事詳細） ---- */
.blog-article { margin-bottom: 50px; position: relative; z-index: 2; }
.blog-article .content { padding-top: 20px; }
.blog-article h1 { font-size: 20px; font-weight: 100; line-height: 30px; color: var(--kgt-sub); }
.blog-article h1 a { color: var(--kgt-sub); }
/* 記事詳細のタイトル（ページの h1）。長いタイトルも全文表示し、自然に折り返す */
.blog-article h1.entry-title { margin-bottom: 8px; font-size: 24px; font-weight: 600; line-height: 1.5; color: var(--kgt-sub); overflow-wrap: anywhere; }
.blog-article .info { list-style: none; float: left; width: 100%; margin: 0 0 15px; font-size: 12px; line-height: 20px; color: var(--kgt-muted); }
.blog-article .info li { float: left; margin-right: 18px; }
.blog-article .info .kgt-icon { float: left; width: 15px; height: 20px; margin-right: 7px; padding: 2px 0; color: var(--kgt-muted); }
.blog-article .text { margin-top: 10px; }
.blog-article .text p { margin: 13px 0 0; }
.btn-bt {
display: inline-block;
float: left;
margin-top: 20px;
padding: 10px 32px;
border-radius: 3px;
background: rgba(180, 162, 140, .83);
color: #fff;
font-weight: 500;
text-align: center;
transition: background .3s;
}
.btn-bt:hover { background: var(--kgt-accent); color: #fff; }
/* 共有（アイコンにマウスを乗せる・タップすると開く） */
.shares_container { position: relative; float: right; }
.shares {
list-style: none;
float: left;
margin: 26px 20px 13px 0;
padding: 10px 15px;
background: #f5f5f5;
opacity: 0; visibility: hidden; transform: translateX(10px);
transition: all .3s;
}
.shares li { float: left; padding-right: 15px; line-height: 24px; }
.shares li:last-child { padding-right: 0; }
.shares li a { display: inline-block; width: 14px; height: 14px; color: #555; vertical-align: middle; }
.shares li a:hover { color: var(--kgt-accent); }
.shares li .kgt-icon { width: 14px; height: 14px; }
.share_link { float: right; margin: 35px 10px 0 0; }
.share_link button { display: block; width: 24px; height: 20px; padding-right: 4px; color: #555; }
.share_link .kgt-icon { width: 20px; height: 20px; }
.shares_container:hover .shares,
.shares_container.is-open .shares,
.shares_container:focus-within .shares { opacity: 1; visibility: visible; transform: none; }
/* ページ送り */
.pagination { clear: both; padding: 20px 0; font-size: 12px; line-height: 20px; }
.pagination span, .pagination a {
float: left; margin: 2px 5px 2px 0; padding: 6px 9px 5px;
background: #f5f5f5; color: var(--kgt-sub);
}
.pagination .current { background: var(--kgt-accent); color: #fff; }
.pagination a:hover { background: var(--kgt-accent); color: #fff; }
/* ---- 記事詳細のレイアウト（本文 670px ＋ 余白 50px ＋ サイドバー 220px ＝ 940px） ---- */
#content.sidebar_right #blog { display: flex; align-items: flex-start; }
.span9 { display: flow-root; width: 670px; flex: none; }
.sidebar { display: flow-root; width: 220px; margin-left: 50px; flex: none; }
.span9 .blog-article { margin-bottom: 20px; }
/* 一覧ページ（本文＋サイドバー）：上余白と記事間の余白は、サイドバー追加前の一覧と同じにする（アーカイブ・Blog 共通） */
#content.sidebar_right.kgt-archive, #content.sidebar_right.kgt-blog { padding-top: 85px; }
.span9 .alternate-style, .span9.kgt-blog-list .blog-article { margin-bottom: 50px; }
.blog-article .text img { margin: 0; }
/* サイドバーのウィジェット */
.widget { float: left; width: 100%; margin-bottom: 35px; }
.widget_search .search-form { margin-bottom: 20px; }
.widget-title { float: left; width: 100%; margin-bottom: 24px; font-size: 15px; font-weight: 400; line-height: 20px; letter-spacing: 1px; text-transform: uppercase; color: var(--kgt-sub); }
.widget ul { list-style: none; }
.widget li { position: relative; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--kgt-line); }
.widget li::after { /* 右端の「›」 */
content: ""; position: absolute; right: 2px; top: 50%; width: 5px; height: 5px; margin-top: -3px;
border-top: 1px solid #333; border-right: 1px solid #333; transform: rotate(45deg);
}
.widget li a { color: var(--kgt-text); }
.widget li a:hover { color: var(--kgt-accent); }
/* アーカイブページのサイドバー：「アーカイブ」ウィジェットの年別の折りたたみ（details/summary） */
.widget .kgt-archive-year { padding: 0; }
.widget .kgt-archive-year::after { display: none; } /* 年の行の「›」は summary 側に付ける */
.kgt-archive-year summary { position: relative; display: block; padding: 10px 14px 10px 0; cursor: pointer; list-style: none; color: var(--kgt-text); }
.kgt-archive-year summary::-webkit-details-marker { display: none; }
.kgt-archive-year summary::after { /* 閉じているときは「›」、開いているときは「⌄」 */
content: ""; position: absolute; right: 2px; top: 50%; width: 5px; height: 5px; margin-top: -3px;
border-top: 1px solid #333; border-right: 1px solid #333; transform: rotate(45deg); transition: transform .2s ease-in-out;
}
.kgt-archive-year details[open] > summary::after { margin-top: -5px; transform: rotate(135deg); }
.kgt-archive-year summary:hover { color: var(--kgt-accent); }
.kgt-archive-year summary:focus-visible, .kgt-archive-months a:focus-visible { outline: 2px solid var(--kgt-accent); outline-offset: 2px; }
.widget .kgt-archive-months { margin: 0 0 4px; padding: 0 0 0 14px; }
.widget .kgt-archive-months li:last-child { border-bottom: 0; }
.widget_search .search-form, .search_field .search-form { position: relative; }
.widget_search input[type="text"] {
width: 100%; height: 40px; padding: 4px 34px 4px 10px;
border: 1px solid var(--kgt-line); border-radius: 6px;
font: 13px/20px Arial, sans-serif; color: #000; background: #fff;
}
.widget_search button { position: absolute; right: 12px; top: 12px; width: 16px; height: 16px; color: #bbb; }
.widget_search button span { display: none; }
.widget_search button .kgt-icon { width: 16px; height: 16px; }
/* 前後の記事ナビ（画面の左右端） */
.nav-growpop a { position: fixed; top: 50%; margin-top: -28px; z-index: 9999; color: #fff; }
.nav-growpop .prev { left: 0; }
.nav-growpop .next { right: 0; }
.nav-growpop .icon-wrap {
position: relative; z-index: 100; display: block;
width: 27px; height: 56px; padding: 18px 8px;
background: var(--kgt-accent);
}
.nav-growpop .icon-wrap .kgt-icon { width: 11px; height: 20px; }
.nav-growpop a div {
position: absolute; top: -4px; width: 260px; min-height: 65px;
padding: 23px 74px 10px 20px;
background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .08);
opacity: 0; visibility: hidden;
transition: all .3s ease;
}
.nav-growpop .prev div { left: -260px; text-align: right; }
.nav-growpop .next div { right: -260px; text-align: left; padding: 23px 20px 10px 74px; }
.nav-growpop a:hover div { opacity: 1; visibility: visible; }
.nav-growpop .prev:hover div { left: 27px; }
.nav-growpop .next:hover div { right: 27px; }
.nav-growpop h3 { padding-bottom: 10px; font-size: 16px; font-weight: 400; line-height: 19.2px; color: #222; }
.nav-growpop a div img { position: absolute; top: 10px; width: 49px; height: 49px; object-fit: cover; }
.nav-growpop .prev div img { right: 12px; }
.nav-growpop .next div img { left: 12px; }
/* ---- 一覧ページ（カテゴリー・月別・投稿者・検索） ---- */
.alternate-style .media { width: 440px; max-width: 100%; }
.alternate-style .media img { display: block; width: 440px; max-width: 100%; height: auto; }
.alternate-style .content { padding-top: 0; margin-left: 20px; max-width: 640px; }
.alternate-style.kgt-no-media .content { margin-left: 0; } /* アイキャッチを出さない一覧では、画像のぶんの左余白もなくす */
.alternate-style h1 { font-size: 20px; font-weight: 600; line-height: 36px; color: var(--kgt-heading); }
.alternate-style h1 a { color: var(--kgt-heading); }
.alternate-style .info { margin-bottom: 10px; }
.kgt-no-results { margin-bottom: 20px; }
/* ---- 通常の固定ページ（Thankyou など） ---- */
#blog.fullwidth::before { content: ""; display: table; } /* 本文先頭の余白を枠の内側に収める（旧テーマと同じ） */
.entry-content p { margin: 13px 0; }
/* ---- 404 ---- */
.not_found { display: flow-root; width: 600px; max-width: 100%; margin: 0 auto 100px; text-align: center; }
.not_found_number { font: 700 220px/200px Arial, Helvetica, sans-serif; color: #ececec; letter-spacing: -6px; }
.not_found p { margin: 20px 0 16px; font-size: 16px; line-height: 28px; }
.search_field .search-form { display: flex; width: 400px; max-width: 100%; margin: 56px auto 20px; }
.search_field input[type="text"] {
flex: 1; min-width: 0; height: 50px; padding: 0 20px;
border: 1px solid #ddd; border-right: 0; border-radius: 3px 0 0 3px;
font: 13px Arial, sans-serif; color: #000;
}
.search_field button { width: 105px; height: 50px; border-radius: 0 3px 3px 0; background: #c0b29c; color: #fff; font: 13px Arial, sans-serif; }
.search_field button .kgt-icon { display: none; }
/* ---- ページ先頭へ戻る ---- */
.scrollup {
position: fixed; right: 100px; bottom: 50px; z-index: 50;
width: 50px; height: 50px; border-radius: 6px;
background: rgba(34, 34, 34, .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M2 10l8-8 8 8' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 18px 11px no-repeat;
text-indent: -9999px; overflow: hidden;
opacity: 0; visibility: hidden; transition: .4s;
}
.scrollup.is-visible { opacity: 1; visibility: visible; }
.scrollup:hover { background-color: rgba(34, 34, 34, .8); }
/* ---- フッター ---- */
.footer_wrapper { position: relative; z-index: 1; }
#footer { border-top: 1px solid var(--kgt-line); color: #6b6b6b; background: #fff; }
#footer .ff { padding: 52px 0; text-align: center; }
/* ---- Work のギャラリー（130×130 の正方形を隙間 1px で並べる） ---- */
.kgt-gallery { margin-bottom: 35px; }
.wpb_image_grid_ul { list-style: none; }
.wpb_image_grid_ul::after { content: ""; display: table; clear: both; }
.wpb_image_grid_ul li { float: left; width: 130px; height: 130px; margin: 0 1px 1px 0; }
.wpb_image_grid_ul a { display: block; }
.wpb_image_grid_ul img { display: block; width: 130px; height: 130px; object-fit: cover; }
/* ---- ライトボックス（Work の拡大表示） ---- */
.kgt-lb { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .8); }
.kgt-lb[hidden] { display: none; }
.kgt-lb__box { position: relative; padding: 8px 8px 40px; border-radius: 6px; background: #fff; max-width: calc(100vw - 40px); }
.kgt-lb__title { position: absolute; left: 10px; top: -26px; color: #fff; font-size: 18px; line-height: 22px; }
.kgt-lb__img { display: block; max-width: calc(100vw - 56px); max-height: calc(100vh - 140px); width: auto; height: auto; }
.kgt-lb__nav { position: absolute; top: 8px; bottom: 40px; width: 50%; opacity: 0; transition: opacity .2s; }
.kgt-lb__nav:hover { opacity: 1; }
.kgt-lb__nav--prev { left: 8px; }
.kgt-lb__nav--next { right: 8px; }
.kgt-lb__nav span { position: absolute; top: 50%; width: 26px; height: 28px; margin-top: -14px; border-radius: 3px; background: #fff; color: #333; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.kgt-lb__nav--prev span { left: 0; }
.kgt-lb__nav--next span { right: 0; }
.kgt-lb__bar { position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; align-items: center; gap: 4px; height: 24px; }
.kgt-lb__btn { width: 22px; height: 22px; border: 1px solid #ccc; border-radius: 50%; color: #555; font-size: 9px; line-height: 20px; text-align: center; }
.kgt-lb__btn--play { width: 24px; height: 24px; font-size: 10px; }
.kgt-lb__count { margin-left: 8px; font: italic 11px Georgia, serif; color: #555; }
.kgt-lb__close { margin-left: auto; }
/* =========================================================================
画面幅ごとの調整（旧テーマと同じ区切り: 980px / 768px / 480px）
========================================================================= */
@media (max-width: 979px) {
:root { --kgt-container: 724px; }
#navigation { display: none; }
#logo { float: right; }
.mobile_small_menu {
display: block; position: absolute; left: 0; top: 45px;
width: 21px; height: 26px; color: #333;
}
.mobile_small_menu .kgt-icon { width: 21px; height: 26px; }
.menu-small:not([hidden]) { display: block; position: relative; z-index: 100000; background: #fff; }
#mobile-menu { list-style: none; padding: 20px 0; }
#mobile-menu li a {
display: block; margin: 8px auto; padding-left: 12%;
font-size: 14px; font-weight: 500; line-height: 24px; text-transform: uppercase; color: #555;
}
#content.sidebar_right #blog { display: block; }
.span9 { width: auto; margin-bottom: 40px; }
/* 旧 WPBakery の列の内側余白（左右 15px）を再現。スマホ幅では本文が 270px になる */
.kgt-sections > .kgt-row, .kgt-blog-list { padding-left: 15px; padding-right: 15px; }
.sidebar { width: auto; margin-left: 0; }
.kgt-blog .sidebar { padding-left: 15px; padding-right: 15px; } /* Blog：サイドバーも一覧と同じ左右余白にそろえる */
}
@media (max-width: 767px) {
:root { --kgt-container: auto; }
.container { max-width: 420px; width: 87%; }
/* 旧テーマではこの幅で本文の枠が回り込み配置になり、直後の空白（kgt-space）が本文に重なる。同じ挙動にする */
.kgt-text { float: left; width: 100%; }
}
@media (max-width: 480px) {
.container { max-width: 300px; width: auto; margin: 0 37.5px; }
@supports (width: min(1px, 2px)) { .container { width: min(300px, calc(100% - 75px)); margin: 0 auto; } }
#logo, #logo img { width: 50px; }
#logo img { height: 50px; margin-top: 30px; }
.header_page:not(.header_page--crumb-only) .breadcrumbss { display: none; } /* 見出し帯のパンくずはスマホで非表示（旧テーマと同じ）。記事詳細は 1 行で表示 */
.blog-article h1.entry-title { font-size: 20px; }
.recent_news dt { width: 56px; height: 56px; } /* トップの NEWS のアイキャッチ。文字の左余白＝56px＋間隔 12px */
.recent_news dd { margin-left: 68px; }
.scrollup { right: 20px; bottom: 20px; }
}