@charset "utf-8";
/* ============================================================================
   hpb_compat.css  ―  ホームページビルダー編集画面 互換レイヤー
   ----------------------------------------------------------------------------
   目的：
     style.css が使用している Flexbox / Grid をHPBの編集画面が解釈できず、
     ページ上部（h1・ヘッダー）やh2見出し枠（sec-header）が崩れて
     編集しづらくなる問題を解消する。

   仕組み（プログレッシブ・エンハンスメント）：
     ① このファイルの「通常の記述」＝ Flex非対応環境（＝HPB編集画面）向けの
        float / inline-block だけで組んだ代替レイアウト。
     ② ＠supports (display:flex) の中 ＝ Flex対応環境（＝実ブラウザ）向けに
        style.css 本来の指定をそのまま復元。
     HPBは ＠supports（CSS3条件付きルール）を解釈しないためブロックごと無視し、
     ①だけを読む。実ブラウザは①を読んだ後②で上書きするため、表示は従来と同一。

   使い方：
     style.css の <link> の「直後」に読み込む（後勝ちのため順序が重要）。
       <link rel="stylesheet" href="../../css/style.css">
       <link rel="stylesheet" href="../../css/hpb_compat.css">

   注意：
     style.css は一切変更していない。不要になればこの1行を外すだけで元に戻る。
   ========================================================================== */



/* ---------------------------------------------------------------------------
   0. ページ全体の骨格（図3：ページ上部が縦積みになる主因）
      style.css:
        #header       { display:flex; align-items:center; flex-wrap:wrap; }
        #pgroup ul    { display:flex; }
        #contentsArea { display:flex; align-items:flex-start; gap:20px; }
      → Flex非対応だと
         ・ロゴ／ヘッダーナビ／製品タブが縦に積まれる
         ・製品タブ・パンくずの li が1行1個ずつ縦に並ぶ
         ・左サイドメニューと本文が上下に分かれる
      → 代替：昔ながらの float 2カラムで組み直す。
--------------------------------------------------------------------------- */
#header {
  display: block;
  overflow: hidden;          /* floatの回り込み解除 */
}
#header > p {                /* ロゴ */
  float: left;
}
#header > #pgroup {          /* 製品タブ＋パンくず（flex-wrapで2行目に来ていた帯） */
  clear: both;
}

#pgroup ul {
  display: block;
}
#pgroup ul li {
  display: inline-block;
  vertical-align: middle;
}
/* --- パンくず（ptrack）の縦位置 -----------------------------------------
   style.css は
     #pgroup ul.ptrack     { height:19px; align-items:center; }
     #pgroup ul.ptrack li  { display:flex; align-items:center; }
     #pgroup ul.ptrack li img { display:block; }
   の3つで縦中央を作っている。Flex非対応だと align-items が無視され、
   さらに img が display:block のままなので矢印が単独の行に落ちる。
   li ごとに高さが違うため「矢印・Homeボタン・リンク文字」が3段にばらける。

   高さに依存しない方式に置き換える：
     ・行の高さを 19px に固定（line-height）
     ・li はすべて同じ高さ＋上揃え → 段差が出ない
     ・中身（画像・文字）は行の中央に置く
   これなら矢印画像の実寸が何pxでも1行に揃う。 */
#pgroup ul.ptrack {
  height: auto;
  min-height: 19px;
  line-height: 19px;
}
#pgroup ul.ptrack li {
  display: inline-block;
  vertical-align: top;      /* 全 li を上揃えにして段差をなくす */
  height: 19px;
  line-height: 19px;
  white-space: nowrap;
}
#pgroup ul.ptrack li img {
  display: inline-block;    /* display:block を打ち消す（矢印の改行防止） */
  vertical-align: middle;   /* 19px の行の中央に置く */
}
#pgroup ul.ptrack li a,
#pgroup ul.ptrack li span {
  display: inline-block;
  vertical-align: middle;
  line-height: 19px;
}

#contentsArea {
  display: block;
  overflow: hidden;
}
#contentsArea > aside {      /* 左サイドメニュー 198px */
  float: left;
}
#contentsArea > #product {   /* 本文 768px */
  float: right;
}

/* ---------------------------------------------------------------------------
   1. ページタイトル h1（図3：ページ上部の崩れ）
      style.css: display:flex; flex-direction:column; align-items:center;
                 justify-content:center;
      → Flex非対応だと子spanの中央揃えが効かず、78pxの枠から溢れる。
      → 代替：ブロック＋text-align:center。子spanは元々 inline-block / block
        なので、これだけで「中央揃えの2行」になる。
--------------------------------------------------------------------------- */
h1.page-title,
h1.page-title.page-title-stacked,
h1.page-title.page-title-long {
  display: block;
  text-align: center;
  /* Flex時の justify-content:center（縦中央）の代替。
     78px枠の中でおおよそ中央に見えるよう上に少し余白を置く。 */
  padding-top: 14px;
  box-sizing: border-box;
}


/* ---------------------------------------------------------------------------
   2. セクション見出し枠 sec-header（図4：青いバーが別行に落ちる）
      style.css: .sec-header{display:flex} .sec-header-bar{width:8px;flex-shrink:0}
                 .sec-header-title{flex:1; display:flex; align-items:center}
      → Flex非対応だと bar と title がどちらもブロック要素のため縦に積まれ、
        青バーが見出しの上の行に表示される（＝「行が変わって見える」の正体）。
      → 代替：bar を float:left、title を overflow:hidden で横並びにする。
--------------------------------------------------------------------------- */
.sec-header {
  display: block;
  overflow: hidden;          /* floatの回り込み解除（clearfix代わり） */
}

.sec-header-bar {
  float: left;
  width: 8px;
  height: 30px;              /* min-height だけだと旧エンジンで潰れるため */
}

.sec-header-title,
.camera-category-heading .sec-header-title {
  display: block;
  overflow: hidden;          /* floatの隣に回り込ませ、残り幅いっぱいに広げる */
  min-height: 30px;
  padding-top: 4px;          /* align-items:center（縦中央）の代替 */
  box-sizing: border-box;
}


/* ---------------------------------------------------------------------------
   3. 目次ナビ section-nav
      style.css: display:flex; justify-content:center; flex-wrap:wrap;
      → 子の li は元々 display:inline のため、中央揃えだけ補えばよい。
--------------------------------------------------------------------------- */
.section-nav {
  display: block;
  text-align: center;
}


/* ---------------------------------------------------------------------------
   4. ヘッダー周り（図3：ページ上部の崩れ）
      .header-nav / .search / ul.gmenu1 / ul.lang1
--------------------------------------------------------------------------- */
.header-nav {
  display: block;
  float: right;
  text-align: right;
}

.search {
  display: block;
  text-align: right;
}
.search > * {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;          /* gap:4px の代替 */
}

ul.gmenu1,
ul.lang1 {
  display: block;
}
ul.gmenu1 li,
ul.lang1 li {
  display: inline-block;
  vertical-align: middle;
}

#pgroup ul.ptrack li {
  display: inline-block;
  vertical-align: middle;
}


/* ---------------------------------------------------------------------------
   5. フッター gmenu2
      style.css 側が display:flex !important のため、こちらも !important で上書き。
--------------------------------------------------------------------------- */
footer#footer .gmenu2 {
  display: block !important;
  text-align: center;
}
footer#footer .gmenu2 li {
  display: inline-block;
  vertical-align: middle;
}


/* ---------------------------------------------------------------------------
   6. 後払い案内行 bottom-info-row ／ 追従ボタン floating-container
--------------------------------------------------------------------------- */
.bottom-info-row {
  display: block;
  text-align: center;
}
.bottom-info-row > .bottom-info-main,
.bottom-info-row > .bottom-info-contact {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.bottom-info-row > .bottom-info-gap {
  display: none;
}

.bottom-info-contact {
  white-space: nowrap;
}

.bottom-info-contact .bottom-info-btn,
.bottom-info-contact .bottom-info-tel {
  display: inline-block;
  vertical-align: middle;
}

.guideline-note {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.guideline-note > * {
  display: table-cell;
  vertical-align: middle;
}

.guideline-note > a,
.guideline-note > figure {
  width: 220px;
  padding-right: 1.5em;
}

.guideline-note > p {
  width: auto;
}

.guideline-note > :only-child {
  display: block;
  width: auto;
  padding-right: 0;
}

.floating-container {
  display: block;
  text-align: center;
}


/* ============================================================================
   ▼ ここから下は Flex対応環境（実ブラウザ）専用。
     style.css 本来の指定を復元し、上の代替レイアウトを完全に打ち消す。
     HPBは ＠supports を解釈しないため、このブロックを丸ごと無視する。
   ========================================================================== */
@supports (display: flex) {

  /* 0. ページ全体の骨格 */
  #header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    overflow: visible;
  }
  #header > p {
    float: none;
  }
  #header > #pgroup {
    clear: none;
  }
  #pgroup ul {
    display: flex;
  }
  #pgroup ul li {
    display: list-item;
    vertical-align: baseline;
  }
  #pgroup ul li > img,
  #pgroup ul li > a,
  #pgroup ul li > span,
  #pgroup ul li > a > img {
    vertical-align: baseline;
  }
  #pgroup ul.ptrack {
    height: 19px;
    min-height: 0;
    line-height: normal;
  }
  #pgroup ul.ptrack li {
    display: flex;
    align-items: center;
    vertical-align: baseline;
    height: auto;
    line-height: normal;
    white-space: normal;
  }
  #pgroup ul.ptrack li img {
    display: block;
    vertical-align: baseline;
  }
  #pgroup ul.ptrack li a,
  #pgroup ul.ptrack li span {
    display: inline;
    vertical-align: baseline;
    line-height: normal;
  }
  #contentsArea {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    overflow: visible;
  }
  #contentsArea > aside {
    float: none;
  }
  #contentsArea > #product {
    float: none;
  }

  /* 1. ページタイトル h1 */
  h1.page-title,
  h1.page-title.page-title-stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 0;
  }
  h1.page-title.page-title-long {
    display: flex;
    padding-top: 0;
  }

  /* 2. セクション見出し枠 */
  .sec-header {
    display: flex;
    overflow: visible;
  }
  .sec-header-bar {
    float: none;
    width: 8px;
    height: auto;
    min-height: 30px;
    flex-shrink: 0;
  }
  .sec-header-title,
  .camera-category-heading .sec-header-title {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: visible;
    padding-top: 0;
  }

  /* 3. 目次ナビ */
  .section-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: left;
  }

  /* 4. ヘッダー周り */
  .header-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    float: none;
    text-align: left;
  }
  .search {
    display: flex;
    align-items: center;
    gap: 4px;
    text-align: left;
  }
  .search > * {
    display: block;
    vertical-align: baseline;
    margin-left: 0;
  }
  ul.gmenu1 {
    display: flex;
    align-items: center;
  }
  ul.lang1 {
    display: flex;
    align-items: center;
  }
  ul.gmenu1 li {
    display: list-item;
  }
  ul.lang1 li {
    display: flex;
    align-items: center;
  }
  #pgroup ul.ptrack li {
    display: flex;
    align-items: center;
  }

  /* 5. フッター gmenu2 */
  footer#footer .gmenu2 {
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: left;
  }
  footer#footer .gmenu2 li {
    display: list-item;
  }

  /* 6. 後払い案内行／追従ボタン */
  .bottom-info-row {
    display: flex;
    align-items: center;
    text-align: left;
  }
  .bottom-info-row > div {
    display: block;
    vertical-align: baseline;
  }
  .floating-container {
    display: flex;
    justify-content: center;
    text-align: left;
  }
}