/* ----------------------------------------

- equipment (hakata7)

  ohori3 equipment.css をベースに hakata7 トーンへ色変換 (2026-05-28):
    warm brown-gray #9c948b → #4c4948 (--colors-main-gray)
    light warm     #cecac5 → #EAE5DA (--colors-beige 相当)
    濃茶 #231f14 / #3a2b18 → #4c4948
    緑系 #8fb19a / #49835b (ECOLOGY) → #4c4948 / #4c4948 (グレー化)
    その他 (#727171 / #4c4948 / #333 / #e3e7e9 / 青 #6ca5b9) はそのまま

---------------------------------------- */
/* pc */
@media screen and (max-width: 750px) {
  /* mobile */
}

/* ----------------------------------------

- display

---------------------------------------- */
@media screen and (min-width: 750px) {
  /* pc */
}

@media screen and (max-width: 750px) {
  /* mobile */
}

.txt_color_01 {
  color: #4c4948 !important;
}

.txt_color_01>span {
  color: #fff;
  background: #4c4948;
  border: none !important;
}

.txt_color_02 {
  color: #4c4948;
}

/* PET */
.pet_recommend2 {
  border: 1px solid #4c4948;
}

/* DESIGNERfS KITCHEN */
.eqKitchen {
  border-left: 6px solid #4c4948;
}

.eqKitchenOption2>span {
  display: block;
  padding: 6px 0 6px 12px;
  color: #fff;
  background: #4c4948;
}

.k-option {
  font-size: 14px !important;
  padding: 3px 20px !important;
  vertical-align: middle !important;
  margin-top: -8px;
}

.k-box {
  display: flex;
  margin-bottom: 20px;
}

.k-chaild_a {
  width: 54%;
}

.k-chaild_b {
  width: 44%;
}

@media screen and (max-width: 767px) {
  .k-option {
    margin-top: -2px;
  }

  .k-box {
    display: block;
    margin-bottom: 20px;
  }

  .k-chaild_a {
    width: 100%;
  }

  .k-chaild_b {
    width: 100%;
  }
}

/* KITCHEN EQUIPMENT */
.eqItemsLead {
  color: #fff;
  background: #4c4948;
}

p.thumb-ido {
  margin-bottom: -14px !important;
  padding-right: 34px;
}

/* BATHROOM EQUIPMENT */
.bath-glay {
  background: #e3e7e9;
  padding: 12px;
  margin-top: 40px;
}

.txt_color_03 {
  color: #4c4948;
}

.bathroom_option {
  border: 1px solid #4c4948;
  padding: 6px 0 6px 12px;
}

.bath-semtitle {
  color: #fff;
  background: #898989;
  padding: 6px 0 6px 12px;
}

/* SANITARY EQUIPMENT */
.txt_blue {
  color: #6ca5b9 !important;
}

/* EQUIPMENT LIST */
.pabbit-box {
  border: 1px solid #333;
  padding: 30px;
  width: 75%;
  margin-left: 40px;
}

.e-list-box {
  display: flex;
}

.e-list-a {
  width: 25%;
}

@media screen and (max-width: 767px) {
  .e-list-box {
    display: block;
  }

  .e-list-a {
    width: 100%;
  }

  .pabbit-box {
    width: 82%;
    margin: 20px auto 0;
  }
}

/* SECURITY */
.security-semtitle {
  color: #fff !important;
  background: #4c4948 !important;
  padding: 12px 0 12px 12px !important;
  margin-bottom: 30px !important;
}

.no-border {
  border: none !important;
}

.key-box {
  border: 1px solid #4c4948 !important;
  padding: 30px !important;
}

/* STRUCTURE */
.structure-semtitle {
  color: #fff !important;
  background: #4c4948 !important;
  padding: 12px 0 12px 12px !important;
  margin-bottom: 30px !important;
}

/* SAFETY CHECK */
.alfa-circle {
  border: 1px solid #333;
  border-radius: 50%;
  background: #fff;
  color: #333;
  padding: 3px 6px;
  text-align: center;
}

.u-line {
  border-bottom: 1px solid #333 !important;
  padding-bottom: 3px !important;
  display: block !important;
  margin-bottom: 12px !important;
}

/* AMENITY */
.amenity-semtitle {
  color: #fff !important;
  background: #4c4948 !important;
  padding: 12px 0 12px 12px !important;
  margin-bottom: 30px !important;
}

/* ELEVATOR 等の番号バッジ装飾 (hakata6 style.css から移植。hakata7 では移植漏れしていた) */
.eqAmenity_items div:nth-child(1) {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.eqAmenity_items div:nth-child(1) span {
  display: inline-block;
}
.eqAmenity_items div:nth-child(1) > span:nth-child(1) {
  width: 24px;
  height: 24px;
  font-size: 14px;
  box-sizing: border-box;
  padding: 6px;
  line-height: 12px;
  color: #ffffff;
  border: 1px solid #ffffff;
  text-align: center;
  background-color: #4d4d4d;
}
.eqAmenity_items div:nth-child(1) > span:nth-child(2) {
  font-size: 14px;
  line-height: 1.6;
  font-weight: bold;
}
.eqAmenity_items > p:nth-child(2) {
  line-height: 1.8;
  font-size: 14px;
  text-align: justify;
  margin-bottom: 0;
}

.eqAmenity_items>div>span:first-child {
  background: #727171 !important;
}

.amenity-semtitle2 {
  color: #4c4948;
  background: #EAE5DA;
  padding: 12px 0 12px 12px;
  margin-bottom: 30px;
}

/* ECOLOGY & ECONOMY (緑系 → グレー化、2026-05-28) */
.ee-semtitle {
  color: #fff !important;
  background: #4c4948 !important;
  padding: 12px 0 6px 12px !important;
  display: flex !important;
  justify-content: space-between !important;
}

@media screen and (max-width: 767px) {
  .ee-semtitle {
    display: block !important;
    padding: 6px !important;
    text-align: center !important;
  }
}

.ee-semtitle2 {
  color: #4c4948 !important;
  border: 2px solid #4c4948 !important;
  padding: 6px 0 6px 12px !important;
  margin-bottom: 30px !important;
}

/* 旧 .txt-green → グレー化 (緑→ hakata7 main-gray) */
.txt-green {
  color: #4c4948 !important;
}

.ee-semtitle3 {
  color: #4c4948 !important;
  border-left: 12px solid #4c4948 !important;
  padding: 2px 0 2px 12px !important;
  margin-bottom: 30px !important;
}

.position_subtitle {
  width: 80% !important;
  margin: 30px auto !important;
}

img.icon_2 {
  width: 120px !important;
}

@media screen and (max-width: 767px) {
  img.icon_2 {
    width: 50% !important;
  }
}

/* LIFESTYLE with PET の Living/Work Space/Doma 3 セクション (flexBox-c2)
   間の余白を確保。section.bgColorSubTheme01 にスコープし
   /premium/floor-plan/ の div.bgColorSubTheme01 は除外。
   さらにリード文 (p) → 最初の flexBox-c2 (Living) 間にも同じ余白を確保。
   直接子 (>) に限定し、KITCHEN EQUIPMENT 等のグリッド内 flexBox-c2 セルには
   適用しない (グリッド内に余分な margin-top が入り行の上端がずれるため)。 */
section.bgColorSubTheme01 > .flexBox-c2 + .flexBox-c2,
section.bgColorSubTheme01 > p + .flexBox-c2 {
  margin-top: 60px;
}
@media screen and (max-width: 767px) {
  section.bgColorSubTheme01 > .flexBox-c2 + .flexBox-c2,
  section.bgColorSubTheme01 > p + .flexBox-c2 {
    margin-top: 40px;
  }
}

/* equipment 全ページ: 共通フッター (producer by LANDIC) との余白 80px を打ち消し、
   ダーク背景のメインコンテンツとフッターを連続表示 (べた付け)。
   equipment.css は equipment 配下ページのみ条件 load されるため他ページ影響なし */
footer.no_footer_info {
  margin-top: 0 !important;
}

/* KITCHEN EQUIPMENT トップ画像 (P24_25 仕様)。
   SP: 画像 → 備考 → 文言 の縦並び、文言は白文字。
   PC: 文言を画像右上〜中央にオーバーレイ (白背景上のため濃色)、備考は画像下に白文字右寄せ。 */
.ke-top-text {
  color: #fff;
}
@media screen and (min-width: 768px) {
  .ke-top-text {
    position: absolute;
    top: 24%;
    right: 5%;
    width: 42%;
    margin: 0;
    color: #4c4948;
  }
}

/* KITCHEN EQUIPMENT: PC のみ行ごと (1-2 / 5-6) で画像アスペクト比を揃える。
   SP は縦並びのため自然表示で OK。他の行は元画像が同比のため指定不要。 */
@media screen and (min-width: 768px) {
  /* row1 (item1,2): item1 の元画像 (1100x542) に合わせ左右クロップを無くし、
     item2 を同高に揃える (item2 は上下が僅かにトリミングされる) */
  .ke-ar-row1 {
    width: 100%;
    aspect-ratio: 1100 / 542;
    object-fit: cover;
  }
  .ke-ar-row3 {
    width: 100%;
    aspect-ratio: 1100 / 689;
    object-fit: cover;
  }
}

/* タブレット (768-1024px): 「仕様・設備のご案内」3点メニューBOX (border-all)。
   buttonRequest の固定幅 270px が TB の1/3カラム幅を超えてグリッドが溢れ
   View more がはみ出すため、TB ではテキストを縮小し、ボタンを枠内に収める。
   PC (>1024) / SP (<768=1カラム) は影響なし。RECOMMENDED 系 (border-all 無し) も対象外。 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .postContentRow-premium .colBlock-3.border-all > div {
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }
  .postContentRow-premium .colBlock-3.border-all h3 {
    font-size: 18px;
  }
  .postContentRow-premium .colBlock-3.border-all p {
    font-size: 12px;
  }
  /* View more ボタン: セル幅いっぱいに広げ (270px固定をやめる) 整った横長ボタンにする。
     ボタンエリアをセル幅にストレッチし、ボタンを中央・90%幅で配置。 */
  .postContentRow-premium .colBlock-3.border-all .buttonAreaRequest {
    align-self: stretch;
    text-align: center;
  }
  .postContentRow-premium .colBlock-3.border-all .buttonAreaRequest .buttonRequest {
    width: 90% !important;
    max-width: 240px;
    height: 52px;
    line-height: 52px;
    font-size: 14px;
  }
}

/* タブレット (768-1024px): kitchen ページ各セクションを SP 寄りの見え方に調整 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* WORKTOP: EN/JP 名称を2行 (block) にし、画像のアスペクト比を揃える。
     2行時は JP 名称の左パディング (pl8) が不要な字下げになるため 0 にする。 */
  .worktop-tb .dspBlock-sp {
    display: block;
    padding-left: 0 !important;
  }
  .worktop-tb .position_rel > img {
    width: 100%;
    aspect-ratio: 1100 / 720;
    object-fit: cover;
  }
  /* 汎用: colBlock グリッド内の各 flexBox-c2 ブロックを縦並び (画像 → 名称 → 文章)。
     グリッド (colBlock-2 等) の列数は維持 = 例 1,2 / 3,4 と横並びのまま。
     KITCHEN EQUIPMENT / EQUIPMENT LIST / IoT機器 などで共用。 */
  .c2Stack-tb > .flexBox-c2 {
    flex-direction: column !important;
  }
  .c2Stack-tb > .flexBox-c2 > div {
    width: 100% !important;
  }
  /* KITCHEN COUNTER SELECT: 縦並び時 (gap50 は column-gap のため縦の余白が出ない)、
     画像ブロックに上余白を確保する。 */
  .counter-tb > .flexItemMain {
    margin-top: 24px;
  }
  /* 汎用: 画像ブロックを 40/50/60% 中央に縮小。キャプション (position_ab / 直下block)
     も一緒に縮むので位置がずれない。下のブロックとの余白も確保 (mb32)。
     flexItemSub2 に付けた場合は flexDirCol-tb の 100% を上書きするため特異度を上げる。 */
  .imgCenter40-tb,
  .imgCenter50-tb,
  .imgCenter60-tb {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 32px;
  }
  .imgCenter40-tb { width: 40% !important; }
  .imgCenter50-tb { width: 50% !important; }
  .imgCenter60-tb { width: 60% !important; }
  .flexBox.flexDirCol-tb > .flexItemSub2.imgCenter40-tb { width: 40% !important; }
  .flexBox.flexDirCol-tb > .flexItemSub2.imgCenter50-tb { width: 50% !important; }
  .flexBox.flexDirCol-tb > .flexItemSub2.imgCenter60-tb { width: 60% !important; }
  /* 浴室換気乾燥暖房機ブロック (colBlock-4): TB では画像を上に50%中央、
     機能テキスト (衣類乾燥/暖房/乾燥) を3列で下に並べる。画像と3列の間に余白 (row-gap)。 */
  .colBlock.bathVent-tb {
    grid-template-columns: 1fr 1fr 1fr !important;
    row-gap: 32px;
  }
  .bathVent-tb > div:first-child {
    grid-column: 1 / -1;
    text-align: center;
  }
  .bathVent-tb > div:first-child img {
    width: 50%;
    margin: 0 auto;
  }
  /* SMART HOME (HomeLink): TB は中央スマホ列を上 full幅へ移動し、左右(ロゴ+機能 / 機能)を
     2カラムに。SP版の主画像を主役化、PC版スマホ・補助画像(spNone)は TB でも非表示。 */
  .colBlock.homelink-tb {
    grid-template-columns: 1fr 1fr !important;
    align-items: start !important;
  }
  .homelink-tb > div:nth-child(2) {
    grid-column: 1 / -1;
    order: -1;
    text-align: center;
    margin-bottom: 24px;
  }
  .homelink-tb .spNone {
    display: none !important;
  }
  .homelink-tb .homelink-sp-img {
    display: block !important;
    width: 70%;
    margin: 0 auto;
  }
  /* 機能項目の縦間隔を広げて「詰まり」を解消 (16px → 28px) */
  .homelink-tb .mt16 {
    margin-top: 28px !important;
  }
}

/* common ページ TB 専用要素は既定 (PC/SP) では非表示。TB メディア内で表示する。
   .kaburi-desc-tb = かぶり厚の全幅説明文 (TB専用) / .brTb = ラベル内 TB専用改行 */
.kaburi-desc-tb,
.brTb {
  display: none;
}

/* タブレット (768-1024px): common ページ (ID 2702) 専用 TB 調整 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* AUTOMATIC LOCKING: security03.png の w960 固定が TB 幅を超えるため content 幅に収める。
     padding (pt24等) ごと枠内に収めるため border-box。SP は w100p-sp が担うので影響なし。 */
  .imgFull-tb {
    width: 100% !important;
    box-sizing: border-box;
  }
  /* flexDirCol-tb で縦並びにした際、gap50 (column-gap のみ) では縦余白が出ないので、
     2 番目以降の要素に上余白を確保する汎用ユーティリティ (ELEVATOR 画像下 / 換気 画像上 等)。 */
  .mt24-tb {
    margin-top: 24px !important;
  }
  /* カメラ付き集合インターホン (security04-06): c2Stack-tb 縦並び時、画像の縦横比が
     不揃い (04/06=portrait, 05=near square) なので、多数派 2200/2556 に cover で統一。
     各 flexBox-c2 セル先頭 div の img のみ対象 (※参考写真キャプションは下に残す)。 */
  .intercomAr-tb > .flexBox-c2 > div:first-child img {
    width: 100%;
    aspect-ratio: 2200 / 2556;
    object-fit: cover;
  }
  /* ELEVATOR 2-4: 各ラベル(eqAmenity バッジ)の高さを 2 行分にそろえ、下の画像の上辺を
     そろえる。3 のラベルは brTb で「マルチビーム / ドアセンサー」の 2 行に改行。 */
  .brTb {
    display: inline;
  }
  .elevLabel-tb .eqAmenity_items > div:nth-child(1) {
    min-height: 42px;
  }
  /* STRUCTURE「充分なかぶり厚」(TB): 説明文を全幅 1 カラムで上に出し、その下に画像 2 カラム。
     PC/SP は不変 (左カラム内の kaburi-desc-pcsp を表示・kaburi-desc-tb を非表示)。
     structure01 (横長) と structure02 (縦長) は比率が大きく異なるため各カラムは独立フロー、
     上辺のみそろえる。右カラムは画像→ラベルの順 (order) にし、「image」は画像右下にオーバーレイ。 */
  .kaburi-desc-tb {
    display: block;
  }
  .kaburi-tb .kaburi-desc-pcsp {
    display: none;
  }
  .kaburi-tb {
    align-items: flex-start;
  }
  .kaburi-tb > .flexItemSub {
    display: flex;
    flex-direction: column;
  }
  .kaburi-tb > .flexItemSub > div {
    order: -1;             /* structure02 画像をラベルより上へ */
    margin-top: 0 !important;
    position: relative;    /* キャプション overlay の基準 */
  }
  .kaburi-tb > .flexItemSub > div img {
    width: 100% !important;  /* 列幅いっぱい (w65p 上書き) */
  }
  .kaburi-tb > .flexItemSub > div > p.remarks {
    position: absolute;
    right: 10px;
    bottom: 8px;
    width: auto !important;
    margin: 0 !important;
    color: rgba(0, 0, 0, .5) !important;  /* 白背景の図版上で可読に */
  }
  .kaburi-tb > .flexItemSub > p.eqDecoSquare {
    margin-top: 16px;      /* 画像とラベルの間 */
  }
  /* 床/壁の遮音性能: TB は 2 表を縦並びにして、横幅不足による表画像の横つぶれを解消。
     2 表とも h172 (元画像は H=400 で同一) なので文字サイズが揃い、tal で左揃え。表間に区切り線。 */
  .soundproof-tb {
    flex-direction: column !important;
  }
  .soundproof-tb > div + div {
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid rgba(255, 255, 255, .25);
  }
  /* ELECTRICALLY OPERATED THUMB TURN: 詰まり感を緩和。左の扉画像を 60% 中央 + 上余白で軽く、
     右の機能 3 ブロック間に余白を足し、見出しの不自然な改行 (brNoneTb) を TB で解除。 */
  .brNoneTb {
    display: none;
  }
  .flexBox.flexDirCol-tb.flexBox-c2 > div.thumbImg-tb {
    width: 60% !important;
    margin: 24px auto 0 !important;
  }
  .thumbInfo-tb > p.dspFlex:not(:first-child) {
    margin-top: 20px !important;
  }
}