@charset "UTF-8";
/* =====
 * COMMON（リセット＋汎用スタイル）
=================================================================== */
/* ===== WEB FONTS（自己ホスト。Google Fonts はクライアント環境で読めないケースがあったため assets/fonts/ から配信）=====
 * Jost 400/500/600/700・Noto Sans JP 400/500/700 の使用ウェイトのみ。woff2 優先、woff は旧ブラウザ向け */
@font-face {font-family: "Jost";font-style: normal;font-weight: 400;font-display: swap;src: url("../fonts/Jost/Jost-400-Book.woff2") format("woff2"), url("../fonts/Jost/Jost-400-Book.woff") format("woff");}
@font-face {font-family: "Jost";font-style: normal;font-weight: 500;font-display: swap;src: url("../fonts/Jost/Jost-500-Medium.woff2") format("woff2"), url("../fonts/Jost/Jost-500-Medium.woff") format("woff");}
@font-face {font-family: "Jost";font-style: normal;font-weight: 600;font-display: swap;src: url("../fonts/Jost/Jost-600-Semi.woff2") format("woff2"), url("../fonts/Jost/Jost-600-Semi.woff") format("woff");}
@font-face {font-family: "Jost";font-style: normal;font-weight: 700;font-display: swap;src: url("../fonts/Jost/Jost-700-Bold.woff2") format("woff2"), url("../fonts/Jost/Jost-700-Bold.woff") format("woff");}
@font-face {font-family: "Noto Sans JP";font-style: normal;font-weight: 400;font-display: swap;src: url("../fonts/NotoSansJP/NotoSansJP-Regular.woff2") format("woff2"), url("../fonts/NotoSansJP/NotoSansJP-Regular.woff") format("woff");}
@font-face {font-family: "Noto Sans JP";font-style: normal;font-weight: 500;font-display: swap;src: url("../fonts/NotoSansJP/NotoSansJP-Medium.woff2") format("woff2"), url("../fonts/NotoSansJP/NotoSansJP-Medium.woff") format("woff");}
@font-face {font-family: "Noto Sans JP";font-style: normal;font-weight: 700;font-display: swap;src: url("../fonts/NotoSansJP/NotoSansJP-Bold.woff2") format("woff2"), url("../fonts/NotoSansJP/NotoSansJP-Bold.woff") format("woff");}

/* ===== VARIABLES ===== */
:root {--new: #fd6a37;--green: #386046;--green-light: #53966b;--green-pale: #f6f9f7;--green-mist: #e1e9e4;--orange: #e26d45;--ink: #424040;--ink-footer: #383838;--rule: rgba(36, 38, 34, .3);--font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;--font-en: "Jost", "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;--side-width: 18.4375em;--header-height: 0em;--filter-white: brightness(0) invert(1);--filter-green: brightness(0) saturate(100%) invert(3%) sepia(86%) saturate(2182%) hue-rotate(132deg) brightness(390%) contrast(56%);--container: min(69.125em, calc(100% - var(--side-width) - 6.1875em));}

/* ===== RESET ===== */
*,
*::before,
*::after {box-sizing: border-box;}
html {font-size: 100%;scroll-behavior: smooth;-webkit-text-size-adjust: 100%;}
body {margin: 0;overflow-x: hidden;background: #fff;color: var(--ink);font-family: var(--font-jp);font-size: 100%;line-height: 1.8;word-break: auto-phrase;-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;}
h1, h2, h3, h4, h5, h6 {margin: 0;font-size: 100%;font-weight: 700;line-height: 1.5;text-wrap: balance;}
p, ul, ol, li, dl, dd, figure {margin: 0 0 1em;padding: 0;}
ul, ol {list-style: none;}
* > *:last-child {margin-bottom: 0;}
a {color: inherit;text-decoration: none;}
img {display: block;width: 100%;height: auto;border: 0;}
button {margin: 0;padding: 0;border: 0;background: none;color: inherit;font: inherit;cursor: pointer;}
input {margin: 0;font: inherit;}
fieldset {margin: 0;padding: 0;border: 0;min-width: 0;}
legend {padding: 0;}
i {font-style: normal;}
small {font-size: 75%;}
time {display: inline-block;}

/* ===== LAYOUT :: ALL DEVICE ===== */
#Contents {position: relative;}
#Contents [id] {scroll-margin-top: var(--header-height);}
#Contents br.sp,
#Contents br.pc,
#Contents .sp {display: none;}
/* コンテンツ幅：左サイドバー分を除いた列の中央に置く（背景はブロックが全幅で持つ） */
.container {width: var(--container);margin-left: calc(var(--side-width) + (100% - var(--side-width) - var(--container)) / 2);}

/* 見出し共通（英字 h2 212.5% ＋ 日本語サブ p 118.75%） */
#Main .block header h2 {color: var(--green);font-family: var(--font-en);font-size: 212.5%;line-height: 1.2;letter-spacing: .1em;text-align: center;}
#Main .block header h2 + p {margin-top: .6875em;font-size: 118.75%;font-weight: 500;line-height: 1.2;letter-spacing: .1em;text-align: center;}
#Main .block header h2 + p + p {margin-top: 1.7143em;font-size: 87.5%;font-weight: 500;line-height: 1.5;letter-spacing: .1em;text-align: center;}

/* 下層ページの #Billboard（英字ラベル＋英文タイトル＋日本語サブ画像。背景はページCSSで指定） */
#Billboard {height: 25.0625em;background: var(--green-pale) no-repeat center top / cover;}
#Billboard .container {padding-top: 8.3125em;}
#Billboard h1 {color: #39604a;font-family: var(--font-en);font-size: 281.25%;font-weight: 500;letter-spacing: .05em;line-height: 1.2;text-wrap: nowrap;}
#Billboard h1 small {display: block;margin-bottom: .5em;color: var(--ink);font-size: 50%;letter-spacing: .1em;line-height: 1.2;}
#Billboard .container > p {margin: .875em 0 0;}
#Billboard .container > p img {width: 21.7188em;}

/* ボタン共通：緑の角丸長方形＋右端に丸矢印アイコン（icon_arrow_01.svg を ::after の背景に置き、色は filter で変える。矢印の抜きから地色が見える） */
.btn::after,
#GlobalHeader nav ul.main > li > a::after,
#SearchPanel > div > ul li a::after {content: "";display: block;flex: none;background: url("../img/common/icon_arrow_01.svg") center / contain no-repeat;filter: var(--filter-white);}
.btn {position: relative;display: inline-flex;align-items: center;gap: 1.125em;height: 2.78125em;padding: 0 2.125em 0 2.75em;border-radius: .375em;background: var(--green);color: #fff;white-space: nowrap;}
.btn span {font-size: 118.75%;font-weight: 700;letter-spacing: .1em;line-height: 1;}
.btn::after {width: 1.40625em;height: 1.40625em;}
.btn-area {text-align: center;}

@media (hover: hover) {
  [data-animation~="float"] {transition: transform ease 300ms, box-shadow ease 300ms;}
  [data-animation~="float"]:hover,
  [data-animation~="float"]:focus-visible {transform: translateY(-5px);box-shadow: 0 5px 10px rgba(0, 0, 0, .18);}

  [data-animation~="orange"] {transition: background-color ease 300ms, color ease 300ms;}
  [data-animation~="orange"]:hover,
  [data-animation~="orange"]:focus-visible {background-color: var(--orange)!important;color: #fff!important;}

  [data-animation~="green"] {transition: background-color ease 300ms, color ease 300ms;}
  [data-animation~="green"]:hover,
  [data-animation~="green"]:focus-visible {background-color: var(--green)!important;color: #fff!important;}
  [data-animation~="green"]:hover::after,
  [data-animation~="green"]:focus-visible::after{border-color: #fff;}

  [data-animation~="green-light"] {transition: background-color ease 300ms, color ease 300ms;}
  [data-animation~="green-light"]:hover,
  [data-animation~="green-light"]:focus-visible {background-color: var(--green-light)!important;color: #fff!important;}

  [data-animation~="ink"] {transition: background-color ease 300ms, color ease 300ms;}
  [data-animation~="ink"]:hover,
  [data-animation~="ink"]:focus-visible {background-color: var(--ink)!important;color: #fff!important;}

  [data-animation~="img"] *:has(img) {overflow: hidden;}
  [data-animation~="img"] img {transition: transform ease 600ms;}
  [data-animation~="img"]:hover img {transform: scale(1.04);}
}

/* ===== GLOBAL HEADER（左固定サイドバー）===== */
#GlobalHeader {position: fixed;top: 3.0625em;left: 0;z-index: 100;width: var(--side-width);border-radius: 0 .25em .25em 0;background: #fff;box-shadow: 0 .3125em 1.125em rgba(0, 0, 0, .15);}
#GlobalHeader .site-title {margin: 0;padding: 2.375em 0 1.5625em;font-size: 100%;line-height: 1;text-align: center;}
#GlobalHeader .site-title a {display: flex;flex-direction: column;align-items: center;color: var(--green-light);}
#GlobalHeader .site-title img {width: 6.53125em;margin-bottom: 1.125em;}
#GlobalHeader .site-title span[lang="en"] {font-family: var(--font-en);font-size: 100%;font-weight: 500;letter-spacing: .1em;}
#GlobalHeader .site-title span:last-child {margin-top: .375em;font-size: 180%;font-weight: 700;letter-spacing: .1em;}
#GlobalHeader nav ul {margin: 0;}
#GlobalHeader nav ul li {position: relative;margin: 0;border-top: 1px solid var(--rule);}
#GlobalHeader nav ul.sub li:last-child {border-bottom: 1px solid var(--rule);}
#GlobalHeader nav ul.main > li > a {display: flex;align-items: center;gap: 1em;height: 5.5625em;padding: 0 2.25em 0 3.375em;color: var(--green);}
#GlobalHeader nav ul.main > li > a span {font-size: 143.75%;font-weight: 700;letter-spacing: .1em;line-height: 1;}
#GlobalHeader nav ul.main > li > a img {flex: none;width: 2.8125em;}
#GlobalHeader nav ul.main > li > a::after {width: 1.625em;height: 1.625em;margin-left: auto;filter: var(--filter-green);}
#GlobalHeader nav ul.sub li a {display: flex;align-items: center;justify-content: space-between;height: 3.5625em;padding: 0 3.125em 0 3.6875em;}
#GlobalHeader nav ul.sub li a span {font-size: 118.75%;font-weight: 500;letter-spacing: .1em;line-height: 1;}
#GlobalHeader nav ul.sub li a::after {content: "";width: .45em;height: .45em;border-top: 1.5px solid var(--green);border-right: 1.5px solid var(--green);transform: rotate(45deg);}
/* 買いたい のフライアウト（PCで hover／focus 時に右へ展開） */
#GlobalHeader nav ul.main > li > ul {position: absolute;top: .5625em;left: 100%;z-index: 1;width: 13.28125em;padding: 1.25em 0 .875em;border-radius: .5em;background: #fff;box-shadow: 0 .5em 1.5em rgba(0, 0, 0, .12);}
#GlobalHeader nav ul.main > li > ul {visibility: hidden;opacity: 0;transition: opacity ease 200ms, visibility ease 200ms;}
#GlobalHeader nav ul.main > li:hover > ul,
#GlobalHeader nav ul.main > li:focus-within > ul {visibility: visible;opacity: 1;}
#GlobalHeader nav ul.main > li > ul::before {content: attr(data-title);display: block;margin: 0 0 .5em 1.25em;color: #39604a;font-size: 106.25%;font-weight: 700;letter-spacing: .08em;line-height: 1.5;}
#GlobalHeader nav ul.main > li > ul li {margin: 0 1.1875em 0 1.25em;border-top: 0;}
#GlobalHeader nav ul.main > li > ul li + li {border-top: 1px solid var(--rule);}
#GlobalHeader nav ul.main > li > ul li a {display: flex;align-items: center;gap: .75em;height: 2.71875em;padding: 0 .4375em 0 .375em;letter-spacing: .01em;}
#GlobalHeader nav ul.main > li > ul li a img {flex: none;width: 1.5625em;}
#GlobalHeader nav ul.main > li > ul li a::after {content: "";width: .45em;height: .45em;margin-left: auto;border-top: 1.5px solid var(--green);border-right: 1.5px solid var(--green);transform: rotate(45deg);}
/* 物件検索／メニュー ボタン */
#GlobalHeader .btn-area {display: flex;gap: .75em;margin: 0;padding: 1.75em 2em 1.6875em;}
#GlobalHeader .btn-area > * {display: flex;flex-direction: column;align-items: center;justify-content: flex-end;width: 6.84375em;height: 6.09375em;padding-bottom: 1.125em;border: 1.5px solid var(--green);border-radius: .375em;background: #fff;color: var(--ink);font-weight: 700;letter-spacing: .1em;line-height: 1.25;cursor: pointer;}
#GlobalHeader .btn-area img {width: 1.75em;margin-bottom: 1em;}
#GlobalHeader .btn-area .menu-icon span {display: block;width: 1.65625em;height: 2.5px;margin-bottom: .5em;background: var(--green);}
#GlobalHeader .btn-area .menu-icon span:nth-of-type(3) {margin-bottom: 1.125em;}

/* 下限に達したら absolute（top は JS が #PageTop の位置から算出） */
#GlobalHeader.stopped {position: absolute;}

/* READ MORE（白枠の小ボタン。data-icon="more" で付与） */
a[data-icon="more"] {display: inline-flex;align-items: center;justify-content: space-between;width: 12.5938em;height: 2.5938em;padding: 0 1.25em 0 1.625em;border: 1.5px solid var(--green);border-radius: .375em;background: #fff;color: var(--green);font-family: var(--font-en);font-size: 87.5%;font-weight: 500;letter-spacing: .01em;}
a[data-icon="more"]::after {content: "";width: .5em;height: .5em;border-top: 1.5px solid #39604a;border-right: 1.5px solid #39604a;transform: rotate(45deg);}

/* 下層 #Billboard：写真全面＋白文字センター（data-type="photo"） */
#Billboard[data-type="photo"] {position: relative;background-position: center;}
#Billboard[data-type="photo"]::before {content: "";position: absolute;inset: 0;background: rgba(0, 0, 0, .3);}
#Billboard[data-type="photo"] .container {position: relative;display: flex;align-items: center;justify-content: center;height: 100%;padding-top: 0;}
#Billboard[data-type="photo"] h1 {color: #fff;font-family: var(--font-jp);font-size: 131.25%;font-weight: 700;letter-spacing: .1em;line-height: 1.2;text-align: center;text-wrap: balance;}
#Billboard[data-type="photo"] h1 span[lang="en"] {display: block;margin-bottom: .35em;font-family: var(--font-en);font-size: 152.38%;letter-spacing: .1em;}

/* 下層 #Billboard：緑帯＋パンくず＋白文字センター（data-type="bar"。物件一覧など） */
#Billboard[data-type="bar"] {height: 15.6875em;background-color: var(--green);background-position: center top;text-align: center;}
#Billboard[data-type="bar"] .container {padding-top: 3.0625em;}
#Billboard[data-type="bar"] nav ol {display: flex;gap: .5em;margin: 0;color: #fff;font-size: 75%;font-weight: 500;letter-spacing: .08em;line-height: 1;text-align: left;}
#Billboard[data-type="bar"] nav ol li {margin: 0;}
#Billboard[data-type="bar"] nav ol li + li::before {content: ">";margin-right: .5em;}
#Billboard[data-type="bar"] nav ol a {color: #fff;}
#Billboard[data-type="bar"] h1,
#Billboard[data-type="bar"] .title {margin-top: 2em;color: #fff;font-family: var(--font-jp);font-size: 187.5%;font-weight: 700;letter-spacing: .1em;line-height: 1;text-wrap: balance;}
#Billboard[data-type="bar"] h1 span[lang="en"],
#Billboard[data-type="bar"] .title span[lang="en"] {display: block;margin-top: .875em;font-family: var(--font-en);font-size: 53.33%;letter-spacing: .1em;opacity: .8;}
#Billboard[data-type="bar"] .container > p {margin: 1.875em 0 0;color: #fff;letter-spacing: .1em;line-height: 1;}

/* ===== NAVIGATION PANEL（物件検索／メニューのモーダル。data-panel-open で開く）===== */
.navigation-panel {position: fixed;inset: 0;z-index: 200;display: flex;align-items: center;justify-content: center;padding: 2.5em;background: rgba(18, 28, 23, .58);}
.navigation-panel {visibility: hidden;opacity: 0;transition: opacity 220ms ease, visibility 220ms ease;}
.navigation-panel.is-open {visibility: visible;opacity: 1;}
.navigation-panel > div {position: relative;width: min(56.25em, calc(100vw - 5em));max-height: calc(100vh - 5em);padding: 2.875em 3.4375em 3.25em;border-radius: 1.125em;background: #fff;box-shadow: 0 .75em 3.125em rgba(0, 0, 0, .22);overflow: auto;}
.navigation-panel > div {transform: translateY(.9375em);transition: transform 220ms ease;}
.navigation-panel.is-open > div {transform: none;}
.navigation-panel > div > button {position: absolute;top: 1.125em;right: 1.25em;padding: .375em 1em;border: 1px solid var(--green);border-radius: 100em;background: #fff;color: var(--green);font-size: 87.5%;font-weight: 700;letter-spacing: .1em;}
.navigation-panel > div > header {text-align: center;}
.navigation-panel > div > header p {margin: 0;color: var(--green);font-family: var(--font-en);font-size: 81.25%;font-weight: 700;letter-spacing: .18em;line-height: 1.2;}
.navigation-panel > div > header h2 {margin-top: .2em;font-size: 150%;letter-spacing: .1em;line-height: 1.2;}
body.panel-open {overflow: hidden;}
/* 物件検索パネル */
/* 物件検索パネルの「買いたい」は form（種別 checkbox name="type[]" → /property/ へ GET。トップの SEARCH と同じ仕組み） */
#SearchPanel form {margin-top: 2.1875em;padding: 1.875em;border: 1.5px solid var(--green);border-radius: 1em;}
#SearchPanel form h3 {display: flex;align-items: center;gap: .875em;margin-bottom: 1.375em;}
#SearchPanel form h3 img {width: 2em;}
#SearchPanel form h3 span {font-size: 125%;letter-spacing: .1em;line-height: 1;}
#SearchPanel form h3 small {color: var(--green);font-size: 87.5%;font-weight: 700;letter-spacing: .05em;line-height: 1;}
#SearchPanel form legend {position: absolute;width: 1px;height: 1px;overflow: hidden;clip-path: inset(50%);}
#SearchPanel form ul {display: flex;gap: .75em;margin: 0;}
#SearchPanel form ul li {flex: 1;margin: 0;}
#SearchPanel form ul li label {position: relative;display: flex;flex-direction: column;align-items: center;height: 8.5em;padding-top: 1.25em;border: 1.5px solid var(--ink);border-radius: .375em;background: #fff;color: var(--green);cursor: pointer;}   /* 2026-09-29 改修：トップの SEARCH（#Main .block-index-01 form label）と同じアイコン付きタイルに統一。パネル幅に合わせて縮小 */
#SearchPanel form ul li label img {width: auto;height: 3.5em;}
#SearchPanel form ul li label span {margin-top: .875em;font-size: 112.5%;font-weight: 700;letter-spacing: .1em;line-height: 1;}
#SearchPanel form ul li label input {position: absolute;inset: 0;width: 100%;height: 100%;margin: 0;opacity: 0;cursor: pointer;}
#SearchPanel form ul li label:has(:checked) {border-color: var(--green);background: var(--green);color: #fff;}
#SearchPanel form ul li label:has(:checked) img {filter: brightness(0) invert(1);}
#SearchPanel form ul li label:has(:focus-visible) {outline: 2px solid var(--orange);outline-offset: 2px;}
#SearchPanel > div > ul {display: flex;gap: .875em;margin: 1.25em 0 0;}
#SearchPanel > div > ul li {flex: 1;margin: 0;}
#SearchPanel > div > ul li a {position: relative;display: flex;align-items: center;gap: .75em;padding: 1.125em 3em 1.125em 1.25em;border: 1.5px solid var(--green);border-radius: .75em;}
#SearchPanel > div > ul li a img {width: auto;height: 1.75em;}
#SearchPanel > div > ul li a span {font-size: 112.5%;font-weight: 700;letter-spacing: .08em;line-height: 1;}
#SearchPanel > div > ul li a small {color: var(--green);font-size: 87.5%;font-weight: 700;letter-spacing: .05em;line-height: 1;}
#SearchPanel > div > ul li a::after {position: absolute;top: 50%;right: 1em;width: 1.5em;height: 1.5em;margin-top: -.75em;filter: var(--filter-green);}
/* グローバルメニュー（PC：デザイン GlobalMenu.psd 基準。3カラム×2段・段ごとに高さ揃え／SP：アコーディオン）2026-09-29 再構築
 * パネルは共通の .navigation-panel をベースに、幅・余白・見出し・閉じるボタンだけ #GlobalMenu で上書き（物件検索パネルは従来どおり） */
#GlobalMenu > div {width: min(69.0625em, calc(100vw - 5em));padding: 2.5em 1.53125em 2.875em;}
#GlobalMenu > div > button {top: 1.75em;right: 1.75em;display: flex;align-items: center;justify-content: center;gap: .5em;width: 6.5em;height: 2.39em;padding: 0;border-width: 1.5px;font-family: var(--font-en);font-weight: 500;line-height: 1;}   /* font-size 87.5%＝14px 基準 */
#GlobalMenu > div > button::before {content: "×";font-size: 128.5%;font-weight: 400;line-height: 1;}
#GlobalMenu > div > header p {font-size: 212.5%;letter-spacing: .1em;line-height: 1;}
#GlobalMenu > div > header h2 {margin-top: .5em;color: var(--ink);font-size: 118.75%;font-weight: 500;letter-spacing: .1em;line-height: 1;}
#GlobalMenu nav {display: grid;grid-template-columns: repeat(3, 1fr);gap: 1.53125em 1.03125em;margin-top: 2.25em;}
#GlobalMenu nav section {padding: .96875em .90625em .9375em;border-radius: .4375em;background: var(--green-pale);}
#GlobalMenu nav section h3 {display: flex;align-items: center;gap: .71875em;min-height: 2.28125em;margin: 0 0 .875em;}
#GlobalMenu nav section h3 img {flex: none;width: 2.625em;height: 2.28125em;object-fit: contain;}
#GlobalMenu nav section h3 span {display: block;font-size: 106.25%;font-weight: 700;letter-spacing: .1em;line-height: 1.2;}
#GlobalMenu nav section h3 small {display: block;margin-top: .15em;color: var(--green);font-family: var(--font-en);font-size: 82.35%;font-weight: 500;letter-spacing: .1em;line-height: 1.1;}
#GlobalMenu nav section ul {margin: 0;}
#GlobalMenu nav section ul li {margin: 0;}
#GlobalMenu nav section ul li + li {margin-top: .1875em;}
#GlobalMenu nav section ul li a {display: flex;align-items: center;justify-content: space-between;height: 2.643em;padding: 0 1.07em 0 1.14em;border: 1px solid #e3e3e3;border-radius: .357em;background: #fff;font-size: 87.5%;font-weight: 500;letter-spacing: .1em;line-height: 1;transition: color ease 300ms, border-color ease 300ms;}   /* font-size 87.5%＝14px 基準 */
#GlobalMenu nav section ul li a[lang="en"] {font-family: var(--font-en);}
#GlobalMenu nav section ul li a:hover {border-color: var(--green);color: var(--green);}
#GlobalMenu nav section ul li a::after {content: "";flex: none;width: .43em;height: .43em;margin-right: .15em;border-top: 1.5px solid var(--green);border-right: 1.5px solid var(--green);transform: rotate(45deg);}
/* SP 固定ナビ（PC 非表示） */
#FixedNavigation {display: none;}

/* ===== RELATED LINKS（全ページ共通ブロック）===== */
/* block-common-01：RELATED LINKS */
#Main .block-common-01 {padding: 4.4375em 0 3.375em;}
#Main .block-common-01 header {margin-bottom: .9375em;}
#Main .block-common-01 .container > div {position: relative;padding: 0 1.375em;}
#Main .block-common-01 .swiper {padding: 0.5em 0;}
#Main .block-common-01 .swiper-wrapper {margin: 0;}
#Main .block-common-01 .swiper-slide {margin: 0;}
#Main .block-common-01 .swiper-slide a {display: block;border-radius: .375em;overflow: hidden;}
#Main .block-common-01 .swiper-button-prev,
#Main .block-common-01 .swiper-button-next {top: 50%;z-index: 2;width: 2.28125em;height: 2.28125em;margin-top: -3em;padding: 1.5px;border-radius: 50%;background: var(--green);}
#Main .block-common-01 .swiper-button-prev {left: 0;}
#Main .block-common-01 .swiper-button-next {right: 0;}
#Main .block-common-01 .swiper-button-prev::after,
#Main .block-common-01 .swiper-button-next::after {content: "";width: 100%;height: 100%;background: url("../img/common/icon_arrow_01.svg") center / contain no-repeat;filter: var(--filter-white);}
#Main .block-common-01 .swiper-button-prev::after {transform: scaleX(-1);}
#Main .block-common-01 .swiper-pagination {position: static;display: flex;justify-content: center;gap: 1.46875em;margin-top: 2.5625em;line-height: 0;}
#Main .block-common-01 .swiper-pagination .swiper-pagination-bullet {width: .8125em;height: .8125em;margin: 0;background: #9ec1b7;opacity: 1;}
#Main .block-common-01 .swiper-pagination .swiper-pagination-bullet-active {background: var(--green);}

/* ===== CONTACT AREA（共通CTA）===== */
#Contact {padding: 1.75em 0 2.75em;background: var(--green-mist);}
#Contact .container {display: flex;gap: 1.1875em;justify-content: center;padding: 0 1.375em;}
#Contact section {flex: 1;padding: 1.75em 2em 2em;border-radius: .375em;background: #fff;text-align: center;}
#Contact section h2 {display: flex;align-items: center;justify-content: center;gap: .75em;}
#Contact section h2 span {font-size: 118.75%;letter-spacing: .1em;line-height: 1.2;}
#Contact section[data-type="tel"] h2 {color: var(--green);}
#Contact section h2 img {width: auto;height: 2.5em;}
#Contact section[data-type="web"] h2 img {height: 1.375em;}
#Contact section[data-type="tel"] p {margin: .6em 0 0;}
#Contact section[data-type="tel"] p span {display: block;font-size: 118.75%;font-weight: 700;letter-spacing: .08em;line-height: 1.2;}
#Contact section[data-type="tel"] p a {display: block;margin-top: .25em;color: var(--green);font-family: var(--font-en);font-size: 262.5%;font-weight: 600;letter-spacing: .1em;line-height: 1;white-space: nowrap;}   /* Web フォント未読込時（幅広の代替フォント）でも1行に保つ */
#Contact section[data-type="tel"] p small {display: block;margin-top: .75em;font-size: 87.5%;font-weight: 500;line-height: 1.3;white-space: nowrap;}
#Contact section[data-type="web"] .btn-area {margin: 1.4375em 0 0;}
#Contact section[data-type="web"] .btn {height: 3.25em;padding: 0 2.25em 0 1.3125em;background: var(--orange);}
#Contact section[data-type="web"] .btn-area + p {margin-top: .875em;}
#Contact section[data-type="web"] .btn-area + p span {font-size: 87.5%;font-weight: 500;line-height: 1.3;}

/* ===== PAGE TOP ===== */
#PageTop {height: 3.53125em;margin: 0;background: var(--ink-footer);}
#PageTop a {display: flex;align-items: center;justify-content: center;height: 100%;color: #fff;}
#PageTop a::after {content: "";width: .75em;height: .75em;margin-top: .5em;border-top: 1.5px solid #fff;border-left: 1.5px solid #fff;transform: rotate(45deg);}

/* ===== GLOBAL FOOTER（全幅・1200px中央）===== */
#GlobalFooter {padding: 3.0625em 0 1.1875em;background: #f2f2f2;color: var(--ink-footer);}
#GlobalFooter > div {display: flex;width: min(75em, calc(100% - 6em));margin: 0 auto;}
#GlobalFooter header {position: relative;width: 21.25em;padding-right: 2em;}
#GlobalFooter header::after {content: "";position: absolute;top: 0;right: 0;width: 1px;height: 19.8125em;background: #333;}
#GlobalFooter header .site-title {margin: 0;font-size: 100%;}
#GlobalFooter header .site-title a {display: block;width: 16.84375em;}
#GlobalFooter header address {margin-top: 1.8125em;font-style: normal;line-height: 1.3125;letter-spacing: .06em;}
#GlobalFooter header address p {margin: 0 0 1.25em;}
#GlobalFooter header address p span {display: block;}
#GlobalFooter header address p span[lang="en"],
#GlobalFooter header address p a {font-family: var(--font-en);font-size: 106.25%;letter-spacing: .07em;}
#GlobalFooter header .sns {display: flex;align-items: center;gap: .5625em;margin: 2.25em 0;}
#GlobalFooter header .sns li {margin: 0;}
#GlobalFooter header .sns li:first-child {margin-right: .1875em;font-family: var(--font-en);font-size: 87.5%;font-weight: 500;letter-spacing: .05em;color: #333;}
#GlobalFooter header .sns li a {display: block;width: 2.40625em;}
#GlobalFooter nav {display: flex;padding-left: 4.375em;}
#GlobalFooter nav section {margin: 0;}
#GlobalFooter nav section:nth-of-type(1) {width: 15.9375em;}
#GlobalFooter nav section:nth-of-type(2) {width: 18.125em;}
#GlobalFooter nav section:nth-of-type(3) {flex: 1;}
#GlobalFooter nav section h2 {display: flex;align-items: center;gap: .5em;margin: .375em 0 0;font-family: var(--font-en);font-size: 100%;font-weight: 600;letter-spacing: .2em;line-height: 2.0625;}
#GlobalFooter nav section h2::after {content: "";width: 5.5625em;height: 2px;margin-left: .1em;background: var(--ink-footer);}
#GlobalFooter nav section ul {margin: 2.5625em 0 0;line-height: 2.0625;letter-spacing: .08em;}
#GlobalFooter nav section ul li {margin: 0;}
#GlobalFooter nav section ul li a {display: inline-block;font-weight: 500;white-space: nowrap;}
#GlobalFooter nav section ul li a::before {content: "・";}
#GlobalFooter nav section:nth-of-type(1) ul {display: flex;flex-wrap: wrap;margin-top: .5em;}
#GlobalFooter nav section:nth-of-type(1) ul > li {width: 7.5em;}
#GlobalFooter nav section:nth-of-type(1) ul > li:last-child {width: 100%;}
#GlobalFooter nav section:nth-of-type(1) > ul > li > a {font-weight: 700;letter-spacing: .01em;}
#GlobalFooter nav section:nth-of-type(1) > ul > li > a::before {content: none;}
#GlobalFooter nav section:nth-of-type(1) ul ul {margin: 1em 0;}
#GlobalFooter > p {position: relative;margin: .5em 0 0;padding-top: 1.4375em;border-top: 2px solid rgba(56, 56, 56, .3);line-height: 1;text-align: center;}
#GlobalFooter > p small,
#GlobalFooter > p a span {font-family: var(--font-en);font-size: 75%;letter-spacing: .2em;line-height: 1;}
#GlobalFooter > p a {position: absolute;top: 1.4375em;right: 1.5625em;display: flex;align-items: center;gap: .5em;}
#GlobalFooter > p a img {width: .53125em;}

/* ===== ANIMATION ===== */
.js #Contents {opacity: 0;transition: opacity 400ms ease;animation: forceReveal 0ms linear 3s forwards;}
.js #Contents.staging {opacity: 1;animation: none;}
@keyframes forceReveal {to {opacity: 1;}}
.js .observe.fadeIn {opacity: 0;transform: translateY(1.875em);transition: opacity ease 800ms, transform cubic-bezier(.2, .72, .25, 1) 800ms;}
.js .observe.appear {opacity: 0;transition: opacity ease 800ms;}
.js .observe.append {opacity: 1;transform: none;}

/* ===== LAYOUT :: PC ===== */
@media (width >= 769px) {
  #Contents br.pc {display: inherit !important;}
}

/* ===== LAYOUT :: TAB（769〜1263px は PC レイアウトを比例縮小）===== */
@media (769px <= width <= 1263px) {
  body {font-size: 1.266825vw;}
}

/* ===== LAYOUT :: SP ===== */
/* SP 基準（ワイヤー SP.png 幅390 を実測 2026-09-17）：body 3.6vw（=14.04px@390 ≒ ワイヤーの本文 14px）。
 * 主要比率：本文 100%（14px）／注記・日付 92.9%（13px）／小ラベル 85.7%（12px）／ボタン文字 107%（15px）／カード見出し 135%（19px）／
 * リスト見出し 142.5%（20px）／ブロック見出し h2 171%（24px）／電話番号 228%（32px）。余白：コンテナ左右 20px（1.43em）、ブロック上下 42〜46px（3〜3.25em）、見出し→本文 32px（2.29em） */
@media (width < 769px) {
  :root {--side-width: 0em;}
  body {font-size: 3.6vw;}
  #Contents br.sp,
  #Contents .sp {display: inherit !important;}
  #Contents .pc {display: none !important;}
  #Main .block header h2 {font-size: 171%;letter-spacing: .08em;}
  #Main .block header h2 + p {margin-top: .5em;font-size: 100%;}
  #Main .block header h2 + p + p {margin-top: 1.25em;font-size: 100%;line-height: 1.6;letter-spacing: .04em;}
  .btn {gap: .75em;height: 3.5em;padding: 0 1.5em 0 2.25em;}
  .btn span {font-size: 107%;letter-spacing: .08em;}
  .btn::after {width: 1.5em;height: 1.5em;}
  #Billboard {height: auto;padding: 2.5em 0 2.25em;background-size: cover;}
  #Billboard[data-type="photo"] {min-height: 10em;}
  #Billboard[data-type="bar"] {height: auto;padding: 1.25em 0 1.75em;}
  #Billboard[data-type="bar"] nav ol {flex-wrap: wrap;row-gap: .5em;font-size: 85.7%;line-height: 1.3;}
  #Billboard[data-type="bar"] h1,
  #Billboard[data-type="bar"] .title {margin-top: 1.25em;font-size: 142.5%;}
  #Billboard[data-type="bar"] .container {padding-top: 0;}
  #Billboard[data-type="bar"] .container > p {margin-top: 1.25em;font-size: 100%;line-height: 1.6;}
  #Billboard[data-type="photo"] h1 {font-size: 112.5%;}
  #Billboard .container {padding-top: 0;}
  #Billboard h1 {font-size: 175%;text-wrap: balance;}
  #Billboard .container > p img {width: 16em;}
  .container {width: calc(100% - 2.86em);margin: 0 auto;}
  body {padding-bottom: 6em;}
  /* ヘッダー：上部に静的配置、ロゴのみ（既存仕様）。ナビ・ボタンは非表示、導線は下部固定ナビとメニューモーダルへ */
  /* ワイヤー SP.png：ロゴ 28px → 「エールの仲介」18px 太字 → 「YELL PRODUCE」12px を左寄せ横並び、高さ 58px */
  #GlobalHeader {position: relative;top: auto;width: 100%;border-radius: 0;box-shadow: none;}
  #GlobalHeader .site-title {display: flex;align-items: center;justify-content: flex-start;height: 4.15em;padding: 0 2em;}
  #GlobalHeader .site-title a {flex-direction: row;align-items: center;gap: .625em;}
  #GlobalHeader .site-title img {width: 2em;margin: 0;}
  #GlobalHeader .site-title span[lang="en"] {order: 3;margin-left: .25em;font-size: 85.7%;}
  #GlobalHeader .site-title span:last-child {order: 2;margin: 0;font-size: 128.5%;}
  #GlobalHeader nav,
  #GlobalHeader .btn-area {display: none;}
  /* 下部固定ナビ（ワイヤー ボトムナビ.png：高さ 84px、線アイコン 28px＋ラベル 11px 太字、中央 MENU は 56px の丸ボタン（上に 11px はみ出す・白リング）。開いている間は丸が × になる） */
  #FixedNavigation {position: fixed;right: 0;bottom: 0;left: 0;z-index: 300;display: block;height: 6em;border-top: 1px solid #ddd;background: #fff;}
  #FixedNavigation ul {display: flex;height: 100%;margin: 0;}
  #FixedNavigation ul li {position: relative;flex: 1;margin: 0;}
  #FixedNavigation ul li a,
  #FixedNavigation ul li button {display: flex;flex-direction: column;align-items: center;justify-content: flex-end;gap: .71em;width: 100%;height: 100%;padding-bottom: 1.29em;background: none;color: var(--ink);font-size: 78.6%;font-weight: 700;letter-spacing: .02em;line-height: 1.45;}
  #FixedNavigation ul li a::before {content: "";display: block;width: 2.5em;height: 2.5em;background: center / contain no-repeat;filter: var(--filter-green);}
  #FixedNavigation ul li a[data-icon="home"]::before {background-image: url("../img/common/icon_nav_home.svg");}
  #FixedNavigation ul li a[data-icon="new"]::before {background-image: url("../img/common/icon_nav_new.svg");}
  #FixedNavigation ul li a[data-icon="tel"]::before {background-image: url("../img/common/icon_nav_tel.svg");}
  #FixedNavigation ul li a[data-icon="mail"]::before {background-image: url("../img/common/icon_nav_mail.svg");}
  /* MENU 丸ボタン：円と3本線は li 基準の absolute（ラベルの行高やフォント差で位置がずれないよう、ボタンの flex 配置に依存させない）。円 4em＝56px、上端は固定ナビより .79em＝11px 上 */
  #FixedNavigation ul li:has(button) {--circle: 4em;--pop: .79em;}
  #FixedNavigation ul li:has(button)::before {content: "";position: absolute;top: calc(var(--pop) * -1);left: 50%;z-index: 1;width: var(--circle);height: var(--circle);margin-left: calc(var(--circle) / -2);border: 3px solid #fff;border-radius: 50%;background: var(--green);box-shadow: 0 0 0 1px #ddd, 0 .25em .75em rgba(0, 0, 0, .15);pointer-events: none;}
  #FixedNavigation ul li button {position: static;font-family: var(--font-en);font-size: 85.7%;letter-spacing: .04em;}
  #FixedNavigation ul li button span {position: absolute;top: calc(1.41em - 1.5px);left: 50%;z-index: 2;width: 2.17em;height: 3px;margin-left: -1.085em;border-radius: 2px;background: #fff;transition: transform 200ms ease, opacity 200ms ease;}   /* 円の中心＝li 上端から 2em−.79em＝1.21em（14px 基準）＝1.41em（ボタンの 12px 基準）。線幅 26px、間隔 8px */
  #FixedNavigation ul li button span:nth-of-type(1) {transform: translateY(-.67em);}
  #FixedNavigation ul li button span:nth-of-type(3) {transform: translateY(.67em);}
  #FixedNavigation ul li button[aria-expanded="true"] span:nth-of-type(1) {transform: rotate(45deg);}
  #FixedNavigation ul li button[aria-expanded="true"] span:nth-of-type(2) {opacity: 0;}
  #FixedNavigation ul li button[aria-expanded="true"] span:nth-of-type(3) {transform: rotate(-45deg);}
  /* モーダル：下から出るシート（ワイヤー メニュー_買いたい開き／閉じ.png：シートは左右 16px・上角丸 20px、下端は固定ナビの上端、閉じるは固定ナビの MENU（×）。上余白 30px、ラベル 12px＋見出し 24px、その下 50px にリスト） */
  .navigation-panel {align-items: flex-end;padding: 4em 1.14em 6em;background: rgba(0, 0, 0, .45);}
  .navigation-panel > div {width: 100%;max-height: 100%;padding: 2.14em 1.14em 2.14em;border-radius: 1.43em 1.43em 0 0;box-shadow: 0 -.25em 1.5em rgba(0, 0, 0, .18);}
  .navigation-panel > div > button {display: none;}   /* 閉じるは固定ナビの × */
  .navigation-panel > div > header p {font-size: 85.7%;letter-spacing: .1em;}
  .navigation-panel > div > header h2 {margin-top: .25em;font-size: 171%;letter-spacing: .12em;}
  #SearchPanel form {margin-top: 2.14em;padding: 1.43em;border-radius: .857em;}
  #SearchPanel form h3 {margin-bottom: 1.14em;}
  #SearchPanel form h3 span {font-size: 114%;}
  #SearchPanel form h3 small {font-size: 85.7%;}
  #SearchPanel form ul {flex-wrap: wrap;gap: .857em;}
  #SearchPanel form ul li {flex: none;width: calc((100% - .857em) / 2);}
  #SearchPanel form ul li label {height: 6.43em;padding-top: .857em;border-radius: .43em;}   /* トップ SP のタイルと同寸 */
  #SearchPanel form ul li label img {height: 2.57em;}
  #SearchPanel form ul li label span {margin-top: .71em;font-size: 100%;}
  #SearchPanel > div > ul {display: block;margin-top: .857em;}
  #SearchPanel > div > ul li + li {margin-top: .857em;}
  #SearchPanel > div > ul li a {padding: 1em 3em 1em 1.14em;border-radius: .857em;}
  #SearchPanel > div > ul li a span {font-size: 114%;}
  #SearchPanel > div > ul li a small {font-size: 85.7%;}
  /* グローバルメニュー（SP）：枠付きリスト（行 56px・見出し 16px 太字・左にアイコン・右に ＋／−）、開いた項目の子リストは淡灰地（行 54px・15px・右チェブロン）
   * PC の #GlobalMenu 上書き（幅・余白・閉じるボタン・見出し・カード）を SP の値に戻す。アイコンは PC と共通の緑＋オレンジ（2026-09-29） */
  #GlobalMenu > div {width: 100%;padding: 2.14em 1.14em 2.14em;}
  #GlobalMenu > div > button {display: none;}
  #GlobalMenu > div > header p {font-size: 85.7%;letter-spacing: .1em;line-height: 1.2;}
  #GlobalMenu > div > header h2 {margin-top: .25em;font-size: 171%;font-weight: 700;letter-spacing: .12em;line-height: 1.2;}
  #GlobalMenu nav {display: block;margin-top: 3.57em;border: 1px solid #ddd;border-radius: .57em;overflow: hidden;}
  #GlobalMenu nav section {width: 100%;padding: 0;border: 0;border-radius: 0;background: none;}
  #GlobalMenu nav section + section {border-top: 1px solid #ddd;}
  #GlobalMenu nav section h3 {gap: 1.14em;height: 4em;min-height: 0;margin: 0;padding: 0 1.43em;border-bottom: 0;font-size: 114%;letter-spacing: .04em;cursor: pointer;}
  #GlobalMenu nav section h3 img {width: 1.43em;height: 1.43em;}
  #GlobalMenu nav section h3 span {font-size: 100%;letter-spacing: .04em;}
  #GlobalMenu nav section h3 small {display: none;}   /* 英字ラベル（BUY 等）は SP では非表示 */
  #GlobalMenu nav section h3::after {content: "";position: relative;width: .86em;height: .86em;margin-left: auto;border: 0;background: linear-gradient(var(--ink), var(--ink)) center / 100% 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 100% no-repeat;transform: none;transition: none;}
  #GlobalMenu nav section.is-open h3::after {background: linear-gradient(var(--ink), var(--ink)) center / 100% 1.5px no-repeat;transform: none;}
  #GlobalMenu nav section ul {height: 0;padding: 0;background: #f5f5f5;overflow: hidden;}
  #GlobalMenu nav section ul {transition: height 280ms ease;}
  #GlobalMenu nav section.is-open ul {padding: 0;}
  #GlobalMenu nav section ul li {margin: 0;border-top: 1px solid #ddd;}
  #GlobalMenu nav section ul li + li {margin: 0;}
  #GlobalMenu nav section ul li a {height: 3.86em;padding: 0 1.43em;border: 0;border-radius: 0;background: none;font-size: 107%;font-weight: 500;letter-spacing: .02em;color: var(--green);}
  #GlobalMenu nav section ul li a::after {width: .5em;height: .5em;margin-right: 0;border-color: #999;}
  /* RELATED LINKS：SP は 1.12枚センター表示・ドットのみ（既存仕様） */
  #Main .block-common-01 {padding: 3em 0 3.25em;background: #f2f2f2;overflow: hidden;}   /* .swiper を overflow: visible にして両隣を見せるぶんはブロック内でクリップ（ページの横はみ出しを防ぐ） */
  #Main .block-common-01 header {margin-bottom: 2.29em;}
  #Main .block-common-01 .container > div {padding: 0;}
  #Main .block-common-01 .swiper {overflow: visible;}
  #Main .block-common-01 .swiper-button-prev,
  #Main .block-common-01 .swiper-button-next {display: none;}
  #Main .block-common-01 .swiper-pagination {gap: .5em;margin-top: 1.71em;}
  #Main .block-common-01 .swiper-pagination .swiper-pagination-bullet {width: .5em;height: .5em;}
  /* お問い合わせ帯（ワイヤー：カード 1列、見出し 19px、電話番号 32px、ボタン高さ 36px） */
  #Contact {padding: 1.43em 0 2.29em;}
  #Contact .container {display: block;}
  #Contact section {width: 100%;margin-bottom: 1.14em;padding: 1.43em 1.43em 1.71em;}
  #Contact section h2 span {font-size: 125%;letter-spacing: .06em;white-space: nowrap;}
  #Contact section h2 img {height: 2.14em;}
  #Contact section[data-type="web"] h2 img {height: 1.25em;}
  #Contact section[data-type="tel"] p span {font-size: 100%;}
  #Contact section[data-type="tel"] p a {font-size: 228%;}
  #Contact section[data-type="web"] .btn-area {margin-top: 1.14em;}
  #Contact section[data-type="web"] .btn {height: 3.5em;}
  #Contact section[data-type="web"] .btn-area + p span {font-size: 85.7%;}
  /* ページトップ */
  #PageTop {height: 3.57em;}
  /* フッター（既存仕様）：ロゴ中央・住所と SEARCH／CONTENTS 列は非表示・Y's GROUP のみ・PRIVACY をコピーライトの上に。
   * ワイヤー：Y's GROUP は見出し左右に罫線＋社名を中央揃え（13px・行ピッチ 31px）、PRIVACY 帯 → コピーライト枠 */
  #GlobalFooter {padding: 1.71em 0 0;background: #fff;}
  #GlobalFooter > div {display: block;width: calc(100% - 2.86em);}
  #GlobalFooter header {width: auto;padding-right: 0;text-align: center;}
  #GlobalFooter header::after {display: none;}
  #GlobalFooter header .site-title a {width: 9em;margin: 0 auto;}
  #GlobalFooter header address {display: none;}
  #GlobalFooter header .sns {justify-content: center;gap: .5em;margin: 1.43em 0 2.29em;}
  #GlobalFooter header .sns li:first-child {font-size: 85.7%;}
  #GlobalFooter header .sns li a {width: 2.29em;}
  #GlobalFooter nav {display: block;padding-left: 0;}
  #GlobalFooter nav section:nth-of-type(1),
  #GlobalFooter nav section:nth-of-type(2) {display: none;}
  #GlobalFooter nav section h2 {justify-content: center;gap: 1.14em;margin: 0;font-size: 142.5%;font-weight: 500;letter-spacing: .2em;line-height: 1.5;}
  #GlobalFooter nav section h2::before,
  #GlobalFooter nav section h2::after {content: "";flex: 1;width: auto;height: 1px;margin: 0;background: #bdbdbd;}
  #GlobalFooter nav section ul {margin-top: 1.14em;font-size: 92.9%;line-height: 2.4;text-align: center;}
  #GlobalFooter nav section ul li a::before {content: none;}
  #GlobalFooter > p {display: flex;flex-direction: column-reverse;align-items: stretch;gap: 0;margin-top: 2.29em;padding: 0;border-top: 0;}
  #GlobalFooter > p a {position: static;justify-content: center;padding: 1.43em;background: #f2f2f2;transform: none;}
  #GlobalFooter > p a span,
  #GlobalFooter > p small {font-size: 85.7%;letter-spacing: .05em;line-height: 1.5;}
  #GlobalFooter > p small {display: block;margin: 0;padding: 1.29em 1em;border: 1px solid #dcdcdc;text-align: center;}
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  * {animation: none !important;transition: none !important;scroll-behavior: auto !important;}
  .observe {opacity: 1 !important;transform: none !important;}
  #Contents {opacity: 1 !important;}
}