@charset "UTF-8";
/* ==========================================================================
   ap-design.css  (2026-09-28 デザイン改善・試作)
   - 読み込み: tmp_navi.php の先頭で <link> 1行（全ページのCSSより後に効かせるため）
   - 既存CSS（Reset / Regulation / top.css など）は一切変更しない。上書きのみ。
   - 戻し方: tmp_navi.php の <link> 行を消す（または旧 tmp_navi.php に戻す）だけで元の見た目に戻る
   - 色: 既存の #5f5a50（文字・線）/ #a3a098（グレー）/ #efeeed・#f7f6f4（面）だけを使う
   ========================================================================== */

:root{
	--ap-ink:#5f5a50;
	--ap-ink-deep:#3f3b35;
	--ap-mute:#9c958a;
	--ap-line:#dcd7cf;
	--ap-face:#f7f6f4;
	--ap-face2:#efeeed;
}

/* --------------------------------------------------------------------------
   1. メニュー開閉ボタン（見た目は同じ2本線。押せる範囲を広げ、MENU / CLOSE の文字を添える）
   -------------------------------------------------------------------------- */
header .toggle label::before{
	content:""; position:absolute; top:-14px; right:-12px; bottom:-24px; left:-12px;
}
header .toggle label::after{
	content:"MENU"; position:absolute; top:100%; left:50%; transform:translateX(-50%);
	margin-top:7px; font-family:baskerville-display-pt, serif; font-style:italic;
	font-size:10px; line-height:1; letter-spacing:.15em; color:var(--ap-ink); white-space:nowrap;
}
header input:checked ~ .toggle label::after{ content:"CLOSE"; }
@media screen and (max-width:450px){
	/* スマホ幅はボタンが写真の角に重なり文字が読みにくいため、文字は出さず押せる範囲だけ広げる */
	header .toggle label::after,
	header input:checked ~ .toggle label::after{ content:none; }
}

/* --------------------------------------------------------------------------
   2. メニュー本体（nav.ap-menu）
      開き方は既存と同じ（上から降りてくる / input#toggle:checked）。
      背景を不透明にし、カテゴリーごとに分けた一覧＋導線＋電話を並べる。
   -------------------------------------------------------------------------- */
header nav.ap-menu{
	display:block; background-color:var(--ap-face);
	height:100vh; height:100dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
	visibility:hidden; transition:top .35s ease-in-out, visibility 0s linear .35s;
}
header input:checked ~ nav.ap-menu{ visibility:visible; transition:top .35s ease-in-out, visibility 0s; }
html:has(header #toggle:checked), body:has(header #toggle:checked){ overflow:hidden; }

header nav.ap-menu ul{ list-style:none; margin:0; padding:0; }
header nav.ap-menu ul li{ text-align:left; margin:0; transition:none; }
header nav.ap-menu ul li a{
	font-family:source-han-sans-japanese, sans-serif; font-style:normal; font-weight:400;
	text-transform:none; letter-spacing:.08em; font-size:15px; line-height:1.5; color:var(--ap-ink-deep);
}
header nav.ap-menu ul li a::before,
header nav.ap-menu ul li a::after{ content:none; display:none; margin:0; }

.ap-menu_inner{ box-sizing:border-box; max-width:1100px; margin:0 auto; padding:132px 50px 80px; }

/* 導線（カタログ・相談）: いちばん上に2つ並べる */
header nav.ap-menu .ap-menu_cta{
	display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:640px; margin:0 auto 64px;
}
header nav.ap-menu .ap-menu_cta li a{
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
	box-sizing:border-box; min-height:84px; padding:14px 10px; text-align:center;
	border:1px solid var(--ap-ink); color:var(--ap-ink); font-size:14px; letter-spacing:.1em;
	transition:background .25s ease, color .25s ease;
}
header nav.ap-menu .ap-menu_cta li:first-child a{ background:var(--ap-ink); color:#fff; }
header nav.ap-menu .ap-menu_cta li a:hover{ background:var(--ap-ink-deep); color:#fff; opacity:1; }
.ap-menu_cta_en{
	font-family:baskerville-display-pt, serif; font-style:italic; font-size:11px; letter-spacing:.2em; opacity:.75;
}

/* カテゴリー（3つ）: PCは3列、スマホは縦に */
.ap-menu_groups{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 56px; }
.ap-menu_group{ margin:0 0 40px; }
.ap-menu_label{
	margin:0; padding:0 0 12px; border-bottom:1px solid var(--ap-ink);
	font-family:ten-mincho-text, serif; font-size:13px; line-height:1.4; letter-spacing:.2em; color:var(--ap-ink);
}
header nav.ap-menu .ap-menu_list li a{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	min-height:54px; padding:8px 2px; box-sizing:border-box; border-bottom:1px solid var(--ap-line);
}
header nav.ap-menu .ap-menu_list li a:hover{ opacity:.6; }
header nav.ap-menu .ap-menu_list li a[aria-current="page"]{ color:var(--ap-ink); }
header nav.ap-menu .ap-menu_list li a[aria-current="page"] .ap-menu_ja{ border-bottom:1px solid var(--ap-ink); }
.ap-menu_en{
	flex:none; font-family:baskerville-display-pt, serif; font-style:italic; font-size:11px;
	letter-spacing:.14em; color:var(--ap-mute); text-transform:uppercase;
}

/* 電話・その他 */
.ap-menu_foot{ margin:16px auto 0; max-width:640px; text-align:center; }
.ap-menu_tel{ display:block; padding:22px 10px; border-top:1px solid var(--ap-line); border-bottom:1px solid var(--ap-line); color:var(--ap-ink); }
.ap-menu_tel_label{ display:block; font-size:12px; letter-spacing:.12em; margin-bottom:6px; color:var(--ap-mute); }
.ap-menu_tel_num{ display:block; font-size:22px; letter-spacing:.14em; line-height:1.3; }
header nav.ap-menu .ap-menu_sub{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px 28px; margin-top:22px; }
header nav.ap-menu .ap-menu_sub li a{ font-size:12px; letter-spacing:.12em; color:var(--ap-ink); }

/* 2026-09-28 修正：PCより狭い幅（タブレット・大きめのスマホ・横向き）でも1列にする。
   以前は450px以下だけ1列だったため、その間の幅で3列が詰まり、文字が縦に折り返していた。
   PCより狭い幅では英字の添え字を外して日本語だけにし、右端に「›」を置いてタップできることを示す。 */
@media screen and (max-width:1023px){
	.ap-menu_groups{ display:block; max-width:560px; margin:0 auto; }
	header nav.ap-menu .ap-menu_cta{ max-width:560px; }
	.ap-menu_foot{ max-width:560px; }
	.ap-menu_group{ margin-bottom:36px; }
	.ap-menu_en{ display:none; }
	header nav.ap-menu .ap-menu_list li a{ min-height:56px; padding:8px 4px; font-size:15px; }
	header nav.ap-menu .ap-menu_list li a::after{
		content:""; display:block; flex:none; width:7px; height:7px; margin-right:4px;
		border-top:1px solid var(--ap-mute); border-right:1px solid var(--ap-mute); transform:rotate(45deg);
	}
	.ap-menu_label{ font-size:12px; letter-spacing:.24em; padding-bottom:10px; }
}
/* スマホ幅 */
@media screen and (max-width:450px){
	.ap-menu_inner{ padding:76px 24px 56px; }
	header nav.ap-menu .ap-menu_cta{ gap:10px; margin-bottom:40px; }
	header nav.ap-menu .ap-menu_cta li a{ min-height:76px; font-size:13px; letter-spacing:.06em; }
	.ap-menu_groups{ display:block; }
	.ap-menu_group{ margin-bottom:34px; }
	header nav.ap-menu .ap-menu_list li a{ min-height:52px; }
	.ap-menu_tel_num{ font-size:20px; }
}

/* --------------------------------------------------------------------------
   3. 共通の見出し（英字＋日本語の二段）
      <h2>WORKS<span class="ap-ja">施工事例</span></h2>
   -------------------------------------------------------------------------- */
.ap-ja{
	display:block; margin-top:16px;
	font-family:source-han-sans-japanese, sans-serif; font-style:normal; font-weight:400;
	text-transform:none; font-size:13px; line-height:1.5; letter-spacing:.24em; color:var(--ap-mute);
}
.ap-ja::before{
	content:""; display:block; width:28px; height:1px; margin:0 auto 14px; background:currentColor; opacity:.6;
}
@media screen and (max-width:450px){
	.ap-ja{ margin-top:10px; font-size:11px; letter-spacing:.2em; }
	.ap-ja::before{ width:20px; margin-bottom:10px; }
}

/* --------------------------------------------------------------------------
   4. トップページ（main.ap-home の中だけ）
      セクションの上下余白を広げ、1セクション＝1カテゴリーとして区切る
   -------------------------------------------------------------------------- */
.ap-home .mv{ margin-bottom:150px; }
.ap-home .works,
.ap-home .topics{ margin-bottom:0; padding:0 0 150px; }
.ap-home .about{ margin-bottom:0; padding-bottom:150px; }
.ap-home .about_txt h2 .ap-ja{ color:#fff; opacity:.85; }
.ap-home .about_txt h2 .ap-ja::before{ margin-left:0; }
.ap-home .ap-promise{ padding:80px 24px; margin-bottom:150px; }
.ap-home .voice{ margin-bottom:0; padding:120px 0; }
.ap-home .ap-cta{ margin:150px auto; }
.ap-home .instagram{ padding-bottom:40px; }

.ap-home .works h2,
.ap-home .topics h2,
.ap-home .voice h2,
.ap-home .instagram h2{ margin-bottom:48px; }

/* リード文: 行間を広げ、見出しと一覧の間に余白を */
.ap-home .works > p,
.ap-home .voice > p{ font-size:14px; line-height:2.2; letter-spacing:.06em; margin:0 auto 24px; }

/* 一覧: 写真と文字の間をあけ、行数の多いタイトルも読みやすく */
.ap-home .works ul li a .works_ph,
.ap-home .voice ul li a .voice_ph{ margin-bottom:18px; }
.ap-home .works ul li a .works_txt_ttl,
.ap-home .voice ul li a .voice_txt_ttl{ font-size:1.6rem; line-height:1.8; }

/* 一覧へのボタン: 塗りつぶし → 細線（控えめに） */
.ap-home .btn a:not(.ap-textlink){
	background:transparent; color:var(--ap-ink); border:1px solid var(--ap-ink);
	min-width:240px; box-sizing:border-box; padding:16px 40px; font-size:1.5rem;
	transition:background .25s ease, color .25s ease;
}
.ap-home .btn a:not(.ap-textlink):hover{ background:var(--ap-ink); color:#fff; opacity:1; }
.ap-home .ap-btnrow{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:16px 36px; }
.ap-home .btn a.ap-textlink{
	display:inline-block; background:none; padding:0 0 4px; min-width:0; width:auto;
	font-family:source-han-sans-japanese, sans-serif; font-style:normal; text-transform:none;
	font-size:13px; line-height:1.5; letter-spacing:.14em; color:var(--ap-ink); border-bottom:1px solid var(--ap-ink);
}
.ap-home .btn a.ap-textlink::before,
.ap-home .btn a.ap-textlink::after{ content:none; }
.ap-home .ap-textlink:hover{ opacity:.6; }

/* 2026-09-28 修正：PCより狭い幅（タブレット・大きめのスマホ・横向き）でも1列にする。
   以前は450px以下だけ1列だったため、その間の幅で3列が詰まり、文字が縦に折り返していた。
   PCより狭い幅では英字の添え字を外して日本語だけにし、右端に「›」を置いてタップできることを示す。 */
@media screen and (max-width:1023px){
	.ap-menu_groups{ display:block; max-width:560px; margin:0 auto; }
	header nav.ap-menu .ap-menu_cta{ max-width:560px; }
	.ap-menu_foot{ max-width:560px; }
	.ap-menu_group{ margin-bottom:36px; }
	.ap-menu_en{ display:none; }
	header nav.ap-menu .ap-menu_list li a{ min-height:56px; padding:8px 4px; font-size:15px; }
	header nav.ap-menu .ap-menu_list li a::after{
		content:""; display:block; flex:none; width:7px; height:7px; margin-right:4px;
		border-top:1px solid var(--ap-mute); border-right:1px solid var(--ap-mute); transform:rotate(45deg);
	}
	.ap-menu_label{ font-size:12px; letter-spacing:.24em; padding-bottom:10px; }
}
/* スマホ幅 */
@media screen and (max-width:450px){
	.ap-home .mv{ margin-bottom:72px; }
	.ap-home .works,
	.ap-home .topics{ padding-bottom:88px; }
	.ap-home .about{ padding-bottom:88px; }
	.ap-home .ap-promise{ padding:52px 24px; margin-bottom:88px; }
	.ap-home .voice{ padding:72px 0; }
	.ap-home .ap-cta{ margin:88px 24px; }

	.ap-home .works h2,
	.ap-home .topics h2,
	.ap-home .voice h2,
	.ap-home .instagram h2{ margin-bottom:30px; }
	.ap-home .about_txt{ padding:44px 24px; }
	.ap-home .about_txt h2{ margin-bottom:28px; }
	.ap-home .about_txt h2 .ap-ja::before{ margin-left:auto; }

	/* リード文は左揃えにして、PC用の改行を外す（390px幅で不自然な折り返しになるため） */
	.ap-home .works > p,
	.ap-home .voice > p{ text-align:left !important; font-size:13px; line-height:2.1; padding:0 24px; margin-bottom:8px; }
	.ap-home .works > p br,
	.ap-home .voice > p br{ display:none; }

	.ap-home .works ul li,
	.ap-home .voice ul li{ margin:0 24px 36px; }
	.ap-home .works ul li:last-of-type,
	.ap-home .voice ul li:last-of-type{ margin:0 24px; }
	.ap-home .works ul,
	.ap-home .voice ul{ margin-bottom:36px; }
	.ap-home .topics ul{ margin:0 24px 32px; }
	.ap-home .topics ul li{ margin-bottom:24px; }

	.ap-home .works ul li a .works_txt_ttl,
	.ap-home .voice ul li a .voice_txt_ttl{ font-size:1.5rem; }

	.ap-home .btn a:not(.ap-textlink){ min-width:0; width:calc(100vw - 48px); max-width:340px; padding:15px 20px; font-size:1.3rem; }
	.ap-home .ap-btnrow{ flex-direction:column; gap:22px; }
}

/* --------------------------------------------------------------------------
   2026-09-28 追加：スマホ・タブレットのヘッダー（代表の指示。参考サイトの「帯＋一言＋社名＋MENU」の構成を、御社の色・ロゴで）
   PCより狭い幅だけ。上部に帯を敷き、左に一言と社名ロゴ、右に三本線と「MENU」。
   -------------------------------------------------------------------------- */
header .h_catch{ display:none; }
@media screen and (max-width:1023px){
	header::before{
		content:""; position:fixed; top:0; left:0; right:0; height:60px; z-index:997;
		background:rgba(236,233,228,.96); border-bottom:1px solid rgba(95,90,80,.12);
		-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
	}
	header .h_logo{ display:none; }
	header .h_catch{
		display:block; position:fixed; top:12px; left:18px; z-index:999; margin:0;
		font-family:ten-mincho-text, serif; font-size:10px; line-height:1; letter-spacing:.18em; color:#5f5a50;
	}
	header .h_catch a{ color:inherit; text-decoration:none; }
	header .h_logo_txt{ top:28px; left:18px; }
	header .h_logo_txt img{ width:150px; }
	header .toggle{ top:15px; right:18px; }
	header .toggle label{ width:26px; height:14px; }
	header .toggle label span{ height:1px; }
	header input:checked ~ .toggle span:first-of-type{ top:6px; }
	header input:checked ~ .toggle span:last-of-type{ bottom:7px; }
	header .toggle label::after{
		content:"MENU"; position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:8px;
		font-family:baskerville-display-pt, serif; font-style:normal; font-size:10px; line-height:1;
		letter-spacing:.16em; color:#5f5a50; white-space:nowrap;
	}
	header input:checked ~ .toggle label::after{ content:"CLOSE"; }
	/* メニューを開いたときも帯とロゴはそのまま上に見せる */
	header nav.ap-menu{ z-index:996; }
	.ap-menu_inner{ padding-top:100px; }
}

/* 2026-09-28 追加：PCのヘッダーもスマホと同じ構成に（代表の指示）。
   上部に帯、左に一言と社名ロゴ、右に電話番号（トップ以外）と三本線＋MENU。 */
@media screen and (min-width:1024px){
	header::before{
		content:""; position:fixed; top:0; left:0; right:0; height:84px; z-index:997;
		background:rgba(236,233,228,.96); border-bottom:1px solid rgba(95,90,80,.12);
		-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
	}
	header .h_logo{ display:none; }
	header .h_catch{
		display:block; position:fixed; top:20px; left:40px; z-index:999; margin:0;
		font-family:ten-mincho-text, serif; font-size:12px; line-height:1; letter-spacing:.2em; color:#5f5a50;
	}
	header .h_catch a{ color:inherit; text-decoration:none; }
	header .h_logo_txt{ top:40px; left:40px; }
	header .h_logo_txt img{ width:220px; }
	header .toggle{ top:26px; right:40px; }
	header a.h_tel{ top:34px; right:104px; }
	header nav.ap-menu{ z-index:996; }
	.ap-menu_inner{ padding-top:140px; }
}

/* 2026-09-28 修正：ヘッダーの帯で各ページの上端（写真・英字の見出し）が隠れていたため、
   全ページの中身を帯の高さ分だけ下げる（以前のトップページだけの調整は廃止）。 */
body{ padding-top:84px; }
@media screen and (max-width:1023px){
	body{ padding-top:60px; }
}