@charset "utf-8";
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,700,600,400|Sorts+Mill+Goudy:400");
:root {
	--black: #000000;
	--licorice: #111111;
	--white: #ffffff;
	--black-haze: #f7f7f7;
	--font-base: "Noto Sans JP", sans-serif;
	--font-display: "Sorts Mill Goudy", serif;
	--bg-clear: rgba( 255, 255, 255, 0.85 );
}
*, *::before, *::after {
	box-sizing: border-box;
}
a{
	text-decoration: none;
	color: #222;
}
body {
	font-family: var(--font-base);
	font-weight: 300;
	background: var(--white);
	color: var(--black);
	line-height: 1.6;
  font-size: 16px;
}
img {
	max-width: 100%;
	height: auto;
	display: block;
}
.g-icons{
	position: relative;
	padding-left: 25px !important;
}
.g-icons:before{
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 10;
	width: 20px;
	height: 20px;
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 20px;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	color: #828282;
	vertical-align: middle;

	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;

	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;

	/* Support for IE. */
	font-feature-settings: 'liga';
}

main > section {
	padding: 80px 5%;
}
.section-header {
	text-align: center;
	margin-bottom: 40px;
}
.section-title {
	font-size: clamp(2rem, 5vw, 2.5rem);
	font-family: var(--font-base);
	font-weight: 800;
	margin-bottom: 8px;
}
.section-subtitle {
	font-size: 14px;
	color: #555;
}
.btn{
	margin-top: 20px;
	text-align: center;
}
.btn a{
	display: inline-block;
	background: var(--black);
	color: var(--white) !important;
	padding: 10px 30px;
	border-radius: 2px;
	text-decoration: none;
	letter-spacing: 0.06em;
}

.more-link {
	font-weight: 300;
	font-size: 1rem;
	color: #000;
}
.screen a {
	display: contents;
	text-decoration: none;
}
.valign-text-middle {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.hidden, .hidden * {
	pointer-events: none;
	visibility: hidden;
}
* {
	box-sizing: border-box;
}
.rectangle-5 {
	height: 120px;
	position: relative;
	width: 120px;
}
.weuiarrow-outlined {
	height: 48px;
	position: relative;
	width: 24px;
}

/*************************************************************************************/
/* ===== Header Styles ===== */
.header {
    /*position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
    transition: all 0.3s ease;
	height: 80px;
    z-index: 1000;
	position: relative;
}

.header-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.header_logo {
    display: flex;
    align-items: center;
    gap: 15px;
}
.header_logo img{
	/* Session 1: SVG は viewBox のみで実寸なし → max-height だと高さ0で潰れる。
	   必ず height を固定値で指定すること。
	   2026-05-13: 先方依頼でロゴを小さく（PC 70→50 / SP 40）に縮小。 */
	height: 50px;
	width: auto;
	/* SVG は元々 fill:#fff。明背景でも縁取りが立つよう多重ドロップシャドウ強化。 */
	/*filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.85))
	        drop-shadow(0 0 4px rgba(0, 0, 0, 0.75))
	        drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65));*/
}

/* 2026-05-13: SP（768px以下）はさらに小さく。スマホでロゴが場所を取り過ぎる対策。 */
@media (max-width: 768px) {
	.header-container { height: 64px; padding: 0 14px; }
	.header_logo img { height: 40px; }
}
@media (max-width: 480px) {
	.header-container { height: 58px; }
	.header_logo img { height: 36px; }
}


/* ===== Hamburger Menu ===== */
.hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.hamburger-menu span {
    width: 100%;
    height: 3px;
    /* Session 1: ヒーロー画像（明・暗両方）の上で視認できるよう白＋濃い影。 */
    background-color: var(--white);
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8),
                0 0 2px rgba(0, 0, 0, 0.9),
                0 1px 3px rgba(0, 0, 0, 0.7);
    transition: all 0.3s ease;
}

/* ===== Mobile Navigation ===== */
.mobile-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100vh;
    background-color: var(--white);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    z-index: 1002;
    overflow-y: auto;
}

.mobile-nav.active {
    right: 0;
}

.mobile-nav-header {
    display: flex;
    justify-content: flex-end;
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.close-menu {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--black);
}

.mobile-nav-list {
    list-style: none;
    padding: 20px 0;
}

.mobile-nav-list li {
    border-bottom: 1px solid #eee;
}

.mobile-nav-list a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: var(--black);
    font-size: var(--font-size-m);
    transition: background-color 0.3s ease;
}

.mobile-nav-list a:hover {
    background-color: #f5f5f5;
}


/* ===== Footer ===== */
.footer {
    background-color: #f5f5f5;
    padding: 40px 0 24px;
    margin-top: 0;
}

/* DEPRECATED Session1: footer-container (左右2カラム) は廃止
   .site-access (全幅) + .footer-bottom (下部1カラム) 構造へ移行。
   Session 4 で完全削除予定。*/
/*
.footer-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.footer_access_title {
    margin-bottom: 20px;
}

.footer_access_map {
    width: 100%;
    height: 200px;
    background-color: #ddd;
    margin-bottom: 20px;
}
.footer_access_map iframe{
	width: 100%;
	height: 100%;
}


.footer_nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 30px;
	list-style: none;
}
.footer_nav a{
	color: #000;
	text-decoration: none;
}
.footer_nav_item-9 {
    padding: 10px 0;
}
*/

.copyright {
    text-align: center;
    padding-top: 20px;
    margin: 0;
    font-size: 0.85rem;
    color: #555;
    border-top: 1px solid #ddd;
}

/* ===========================================================
   Site Access + Footer-bottom (全ページ共通)
   内部ページでは main.css が読み込まれないため globals.css に正とする。
   レイアウト: 左=住所情報 / 右=地図 の2カラムGrid
   =========================================================== */
.site-access {
    width: 100%;
    padding: 56px 0;
    background: #fff;
    border-top: 1px solid #eee;
}

.site-access__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.site-access__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.site-access__label {
    font-family: 'Sorts Mill Goudy', serif;
    letter-spacing: 0.2em;
    font-size: 0.95rem;
    color: #555;
    margin: 0 0 16px;
}

.site-access__addr {
    font-size: 0.95rem;
    line-height: 2;
    color: #222;
    margin: 0;
    font-style: normal;
}

.site-access__map {
    display: flex;
    flex-direction: column;
}

.site-access__map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.site-access__link {
    text-align: center;
    margin: 12px 0 0;
}

.site-access__link a {
    color: #222;
    text-decoration: underline;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 24px 8px;
    text-align: center;
}

.footer-nav ul {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
}

.footer-nav a {
    color: #222;
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

.footer-nav a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .site-access { padding: 40px 0 32px; }
    .site-access__inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .site-access__info { text-align: center; }
    .site-access__map iframe { height: 240px; }
    .footer-nav ul { gap: 8px 18px; }
    .footer-nav a { font-size: 0.85rem; }
}


/* ===========================================================
   About Page — Session 3
   Gutenberg ブロックパターン（patterns/about-company.php）+ page-about.php 共用スタイル
   クラス名がユニークなため他ページへの影響なし
   =========================================================== */

/* ── ① Catch phrase ── */
.about-catch {
    padding: 80px 24px;
    text-align: center;
    border-bottom: 1px solid #e8e8e8;
}
.about-catch__eyebrow {
    font-family: var(--font-display);
    font-size: 0.82rem;
    letter-spacing: 0.30em;
    color: #aaa;
    margin-bottom: 24px;
}
.about-catch__title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 300 !important;
    letter-spacing: 0.08em;
    line-height: 1.6;
    color: #111;
}

/* ── ② Story ── */
.about-story {
    padding: 80px 24px;
}
/* Gutenberg wp:columns に付与した追加クラス */
.about-story__cols {
    max-width: 1100px;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: center;
}
.about-story__img-col img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
}
.about-story__eyebrow {
    font-family: var(--font-display);
    font-size: 0.82rem;
    letter-spacing: 0.25em;
    color: #aaa;
    margin-bottom: 20px;
}
.about-story__heading {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 400 !important;
    letter-spacing: 0.06em;
    line-height: 1.6;
    margin-bottom: 32px;
    color: #111;
}
.about-story__body {
    font-size: 0.95rem;
    line-height: 2.1;
    color: #444;
    margin-bottom: 20px;
}

/* ── ③ Partner ── */
.about-partner {
    padding: 80px 24px;
}
/* Gutenberg がインラインで background-color を設定するため CSS 側では指定不要 */
.about-partner__eyebrow {
    font-family: var(--font-display);
    font-size: 0.82rem;
    letter-spacing: 0.25em;
    color: #aaa;
    margin-bottom: 20px;
}
.about-partner__heading {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 400 !important;
    letter-spacing: 0.08em;
    margin-bottom: 36px;
    color: #111;
}
.about-partner__text {
    font-size: 0.95rem;
    line-height: 2.1;
    color: #444;
}

/* ── ④ Shop（wp:media-text に付与） ──
   wp:media-text は独自のグリッドを持つため display: grid は上書きしない。
   高さ・テキストエリアのパディングのみ調整する。              */
.about-shop.wp-block-media-text {
    min-height: 480px;
}
.about-shop .wp-block-media-text__media img {
    height: 480px;
    object-fit: cover;
}
.about-shop .wp-block-media-text__content {
    padding: 64px 56px;
}
.about-shop__eyebrow {
    font-family: var(--font-display);
    font-size: 0.82rem;
    letter-spacing: 0.25em;
    color: #aaa;
    margin-bottom: 20px;
}
.about-shop__heading {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 400 !important;
    letter-spacing: 0.06em;
    margin-bottom: 24px;
    color: #111;
}
.about-shop__body {
    font-size: 0.92rem;
    line-height: 1.9;
    color: #555;
    margin-bottom: 32px;
}

/* ── ⑤ Company info ── */
.about-info {
    padding: 80px 24px;
    border-top: 1px solid #e8e8e8;
}
.about-info__eyebrow {
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.25em;
    color: #aaa;
    margin-bottom: 20px;
    text-align: center;
}
.about-info__heading {
    font-size: 1.1rem;
    font-weight: 400 !important;
    letter-spacing: 0.10em;
    margin-bottom: 40px;
    text-align: center;
    color: #111;
}
.about-info__table {
    width: 100%;
}
.about-info__row {
    display: grid;
    grid-template-columns: 140px 1fr;
    border-bottom: 1px solid #e8e8e8;
    padding: 18px 0;
}
.about-info__row:first-child {
    border-top: 1px solid #e8e8e8;
}
.about-info__row dt {
    font-size: 0.88rem;
    color: #888;
    letter-spacing: 0.05em;
}
.about-info__row dd {
    font-size: 0.92rem;
    color: #222;
    line-height: 1.7;
}
.about-info__row dd a {
    color: #222;
    text-decoration: none;
}
.about-info__row dd a:hover {
    text-decoration: underline;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .about-story__cols { flex-wrap: wrap !important; } /* wp:columns の flex を折り返す */
    .about-story__img-col img { height: 320px; }
    .about-shop.wp-block-media-text { display: block !important; } /* media-text を縦積みに */
    .about-shop .wp-block-media-text__media img { height: 280px; }
    .about-shop .wp-block-media-text__content { padding: 48px 24px; }
}

@media (max-width: 600px) {
    .about-catch   { padding: 56px 16px; }
    .about-story   { padding: 56px 16px; }
    .about-partner { padding: 56px 16px; }
    .about-info    { padding: 56px 16px; }
    .about-info__row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 14px 0;
    }
    .about-info__row dt {
        font-weight: 600;
        color: #555;
    }
}


/* ===========================================================
   Result Archive — Session 3
   施工事例一覧：カード型グリッド（PC:3列 / タブレット:2列 / モバイル:1列）
   =========================================================== */

.result-archive {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 100px;
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 32px;
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 0 56px;
}

/* ── Card ── */
.result-card {
    background: #fff;
    list-style: none !important; /* Gutenberg/グローバル li 装飾を無効化 */
    margin: 0;
    padding: 0;
}
.result-card::marker { content: ''; }  /* Safari 旧版対策 */
/* 2026-05-13: 詳細ページ廃止に伴い、リンクからギャラリー表示（.result-card__inner）へ移行。
   後方互換のため .result-card__link セレクタも残置。 */
.result-card__link,
.result-card__link:hover,
.result-card__link:focus,
.result-card__link:visited,
.result-card__inner {
    display: block;
    text-decoration: none !important;
    color: inherit;
    border-bottom: 0 !important;
}
/* 子要素の下線・色も継承で固定（globals の a 装飾に勝つ） */
.result-card__link *,
.result-card__inner * {
    text-decoration: none !important;
    border-bottom: 0 !important;
}
.result-card__img-wrap {
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: #f0f0f0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.4s ease;
}
.result-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.result-card__link:hover .result-card__img-wrap,
.result-card__inner:hover .result-card__img-wrap {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}
.result-card__link:hover .result-card__img-wrap img,
.result-card__inner:hover .result-card__img-wrap img {
    transform: scale(1.04);
}
.result-card__body {
    padding: 18px 2px 0;
}
/* タイトル・本文・日付：グローバル p 余白に勝つよう margin/padding を明示リセット */
.result-card__title,
.result-card__excerpt,
.result-card__date {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5;
}
.result-card__title {
    font-size: 0.96rem;
    font-weight: 600;
    color: #111;
    letter-spacing: 0.02em;
    margin-bottom: 6px !important;
}
.result-card__excerpt {
    font-size: 0.84rem;
    color: #666;
    line-height: 1.7;
    margin-bottom: 8px !important;
}
.result-card__date {
    font-size: 0.78rem;
    color: #bbb;
    letter-spacing: 0.04em;
}

.result-archive__empty {
    text-align: center;
    color: #888;
    padding: 40px 0;
}

.result-pagination {
    text-align: center;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .result-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
}
@media (max-width: 600px) {
    .result-archive { padding: 32px 16px 64px; }
    .result-grid { grid-template-columns: 1fr; gap: 32px; }
}


/* ===========================================================
   Result Single — Session 3
   施工事例個別ページ：縦スクロール統一動線
   =========================================================== */

.result-single {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px 100px;
}

/* パンくず（テンプレート上部） */
.result-single__breadcrumb {
    font-size: 0.82rem;
    color: #888;
    padding: 24px 0 0;
    letter-spacing: 0.02em;
}
.result-single__breadcrumb a { color: #888; text-decoration: none; }
.result-single__breadcrumb a:hover { text-decoration: underline; }
.result-single__breadcrumb #breadcrumb {
    background: transparent;
    padding: 0;
}
.result-single__breadcrumb #breadcrumb ol {
    justify-content: flex-start;
    width: 100%;
}

/* タイトル + 日付 */
.result-single__header {
    text-align: center;
    padding: 40px 0 48px;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 56px;
}
.result-single__title {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #111;
    margin-bottom: 12px;
}
.result-single__date {
    font-size: 0.82rem;
    color: #bbb;
    letter-spacing: 0.06em;
}

/* メイン写真 */
.result-single__hero {
    margin-bottom: 64px;
}
.result-single__hero-img {
    width: 100%;
    height: clamp(280px, 50vw, 560px);
    object-fit: cover;
    display: block;
}

/* セクション共通見出し */
.result-single__section-heading {
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.20em;
    color: #888;
    border-left: 3px solid #222;
    padding-left: 14px;
    margin-bottom: 28px;
    line-height: 1.5;
}

/* テキストセクション共通 */
.result-single__overview,
.result-single__brands {
    margin-bottom: 64px;
}
.result-single__text {
    font-size: 0.95rem;
    line-height: 2.1;
    color: #333;
}
.result-single__text p { margin-bottom: 1em; }

/* 使用ブランドリスト（フォールバック表示用） */
.result-single__brand-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 24px;
}
.result-single__brand-list-item {
    position: relative;
    padding-left: 14px;
    font-size: 0.9rem;
    line-height: 1.9;
}
.result-single__brand-list-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.95em;
    width: 6px;
    height: 1px;
    background: #888;
}
.result-single__brand-list-item a {
    color: #222;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}
.result-single__brand-list-item a:hover {
    border-bottom-color: #222;
}
.result-single__brand-note {
    font-size: 0.85rem;
    color: #666;
    margin-top: 8px;
}
.result-single__brand-note a {
    color: #222;
    text-decoration: underline;
}
@media (max-width: 600px) {
    .result-single__brand-list { grid-template-columns: 1fr; }
}

/* ギャラリー */
.result-single__gallery {
    margin-bottom: 72px;
}
.result-single__gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.result-single__gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.result-single__gallery-cap {
    font-size: 0.78rem;
    color: #999;
    padding: 6px 4px 0;
    line-height: 1.5;
}

/* CTA */
.result-single__cta {
    text-align: center;
    padding: 64px 24px;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 56px;
}
.result-single__cta-lead {
    font-size: 1.0rem;
    color: #333;
    letter-spacing: 0.06em;
    margin-bottom: 28px;
}
.result-single__cta-btn {
    display: inline-block;
    background: #111;
    color: #fff;
    text-decoration: none;
    font-size: 0.88rem;
    letter-spacing: 0.10em;
    padding: 14px 40px;
    border-radius: 2px;
    transition: background 0.2s ease;
}
.result-single__cta-btn:hover { background: #333; color: #fff; }

/* 一覧に戻る */
.result-single__back { text-align: center; }
.result-single__back a {
    font-size: 0.85rem;
    color: #888;
    text-decoration: none;
    letter-spacing: 0.04em;
}
.result-single__back a:hover { text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .result-single__gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .result-single { padding: 0 16px 64px; }
    .result-single__cta { padding: 48px 16px; }
    .result-single__gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
}


/* ===========================================================
   Works Catch (固定ページ「施工例一覧」ヘッダー領域) — Session 4
   about-catch と同等のセンター大見出し + eyebrow パターン
   =========================================================== */

.works-catch {
    padding: 80px 24px;
    text-align: center;
    border-bottom: 1px solid #e8e8e8;
}
.works-catch__eyebrow {
    font-family: var(--font-display);
    font-size: 0.82rem;
    letter-spacing: 0.30em;
    color: #aaa;
    margin-bottom: 24px !important;
}
.works-catch__title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 300 !important;
    letter-spacing: 0.08em;
    line-height: 1.6;
    color: #111;
    margin: 0 !important;
}
.works-catch__lead {
    max-width: 680px;
    margin: 32px auto 0 !important;
    font-size: 0.94rem;
    line-height: 2.0;
    color: #555;
}

@media (max-width: 600px) {
    .works-catch { padding: 56px 16px; }
}


/* ===========================================================
   Works Shortcode Wrapper — Session 4
   固定ページ内 [myphp file='work-result'] 出力用
   archive/result.php と同じ .result-grid / .result-card を流用しつつ、
   ラッパー固有の余白と「VIEW ALL」ボタンのみここで定義
   =========================================================== */

.works-shortcode {
    max-width: 1200px;
    margin: 24px auto 0;
    padding: 0 24px 80px;
}

/* Gutenberg / WP デフォルトの ul 装飾を完全に打ち消す（固定ページ内対策） */
.works-shortcode ul.result-grid,
.uagb-container-inner-blocks-wrap ul.result-grid {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin: 0 0 56px !important;
}
.works-shortcode ul.result-grid > li.result-card,
.uagb-container-inner-blocks-wrap ul.result-grid > li.result-card {
    list-style: none !important;
    background: transparent;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

/* 「VIEW ALL」ボタン — shinc 風のシンプルな枠線ボタン */
.works-shortcode__more {
    text-align: center;
    margin-top: 24px;
}
.works-shortcode__more-link,
.works-shortcode__more-link:link,
.works-shortcode__more-link:visited {
    display: inline-block;
    font-size: 0.85rem;
    color: #000 !important;
    text-decoration: none !important;
    letter-spacing: 0.20em;
    padding: 14px 36px;
    border: 1px solid #222;
    background: transparent;
    transition: background 0.25s ease, color 0.25s ease, letter-spacing 0.25s ease;
}
.works-shortcode__more-link:hover {
    background: #222;
    color: #fff !important;
    text-decoration: none !important;
    letter-spacing: 0.24em;
}
.works-shortcode__more-link span {
    margin-left: 6px;
    display: inline-block;
    transition: transform 0.25s ease;
}
.works-shortcode__more-link:hover span {
    transform: translateX(4px);
}

.works-shortcode__empty {
    text-align: center;
    color: #888;
    padding: 40px 0;
}

@media (max-width: 600px) {
    .works-shortcode { padding: 0 16px 56px; }
    .works-shortcode__more-link { padding: 12px 28px; letter-spacing: 0.16em; }
}

/* 旧 .menu-list#result スタイル（page.css）が固定ページ内では出力されないので
   干渉なし。仮に過去テンプレートが残っていても新クラス名と完全に分離される。 */


/* ===========================================================
   News / Column Single Page Title — Session 4
   旧ターコイズ #5bd0db のタイトル下線をニュートラルな細線に差し替え
   page.css の指定を上書き（より具体的なセレクタ + !important）
   =========================================================== */

article #post-single-page header.post-data {
    margin-bottom: 0 !important;
    padding: 8px 0 0;
}
article #post-single-page header.post-data h1.post-title {
    font-family: var(--font-base);
    font-size: clamp(1.3rem, 2.4vw, 1.7rem) !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em;
    line-height: 1.6;
    color: #111;
    padding: 0 0 24px 0 !important;
    margin: 0 0 0 0;
    border-bottom: 1px solid #e8e8e8;
}
/* 旧ターコイズの太い線を完全消去 */
article #post-single-page header.post-data h1.post-title:before {
    content: none !important;
    background: none !important;
    height: 0 !important;
    width: 0 !important;
}
article #post-single-page header.post-data .date {
    margin: 18px 0 0 !important;
    padding: 0;
    text-align: right;
    font-size: 0.85rem;
    color: #999;
    letter-spacing: 0.04em;
}
article #post-single-page header.post-data .date .g-icons,
article #post-single-page header.post-data .date .g-icons:before {
    color: #999;
    background: transparent !important;
}
/* カテゴリーバッジ：ターコイズ → ダークグレー */
article #post-single-page header.post-data ul.category li {
    background: #222 !important;
    color: #fff !important;
    border-radius: 2px;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    padding: 0.35em 0.9em !important;
}
article #post-single-page header.post-data ul.category li a {
    color: #fff !important;
}

/* 本文上部のアイキャッチ：角丸を控えめに */
article #post-single-page .post-content .eyecatch-img img {
    border-radius: 0 !important;
    margin-bottom: 16px;
}


/* ===========================================================
   非表示設定 — Session 3
   商品案内・ブログコラムをメニューから非表示（削除しない・復活可能）
   解除方法: 下記ブロックをコメントアウトするだけ
   =========================================================== */

/* =============================================================
   Session 3: 商品案内・ブログコラム メニュー非表示
   -------------------------------------------------------------
   方針: <li class="nav-hidden"> を付与した行のみ非表示。
   復活時はテンプレート側の class="nav-hidden" を削除すれば
   そのまま表示に戻る。後方互換として :has() ベースのルールも残す。
   ============================================================= */

/* class ベース（推奨） */
.nav-hidden {
    display: none !important;
}

/* :has() ベース（後方互換 / クラス付け忘れ対策） */
.mobile-nav-list li:has(> a[href="/products"]),
.mobile-nav-list li:has(> a[href="/column"]),
.footer-nav ul li:has(> a[href="/products"]),
.footer-nav ul li:has(> a[href="/column"]) {
    display: none;
}

/* ── ページトップへ戻るボタン（全ページ共通） ── */
#page-top-btn {
    position: fixed;
    bottom: 32px;
    right: 28px;
    width: 48px;
    height: 48px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 8000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.2s ease;
    color: #555;
}
#page-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#page-top-btn:hover {
    background: #111;
    border-color: #111;
    color: #fff;
}
@media (max-width: 600px) {
    #page-top-btn {
        bottom: 20px;
        right: 16px;
        width: 42px;
        height: 42px;
    }
}