/* カスタマイズ用CSS */

/* チクタク屋スターキッズ ブランディング調整
   フッターロゴ画像(logofooter.png)が黒文字前提のため、
   コア標準の黒背景フッターを3系と同じ淡いグレー背景に変更する。 */
.ec-footerRole {
  background: #f8f8f8;
  border-top: 1px solid #e8e8e8;
}
.ec-footerRole .ec-footerNavi .ec-footerNavi__link a,
.ec-footerTitle__copyright,
.ec-footerTitle__address {
  color: #333;
}

/* フッターのロゴ・住所(Phase4 UATで3系と突合して発見、2026-08-02)
   logofooter.pngは242x32の小さな画像だが、コアの .ec-footerRole img { width: 100% }
   により横幅いっぱい(約1090px)まで引き伸ばされ、社名ロゴが不鮮明に拡大されていた。
   3系と同じ原寸表示に戻す。住所は3系のフッターにあったが4系では欠落していた。 */
.ec-footerRole .ec-footerTitle__logo img {
  width: auto;
  max-width: 100%;
}
.ec-footerTitle__address {
  font-size: 16px;
}

/* user_data特集ページ用 Bootstrap3互換スタイル(最小限)
   3系のuser_dataページ(43件)はBootstrap3のpanel/グリッドクラスを前提に
   組まれているが、4系にはBootstrap3のCSS自体が存在しない。Bootstrap3を
   まるごとCDN読み込みすると4系標準のBootstrap4(購入導線・TOPページ)と
   クラス名が衝突するリスクが高いため、実際に使われているクラスのみを
   #page_user_data配下にスコープして再現する(影響範囲を最小化)。
   グリッド(row/col-*)は4系のBootstrap4でも同名クラスが機能するため対象外。 */
#page_user_data .panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
#page_user_data .panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
#page_user_data .panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
}
#page_user_data .panel-body {
  padding: 15px;
}
#page_user_data .panel-primary {
  border-color: #337ab7;
}
#page_user_data .panel-primary > .panel-heading {
  color: #fff;
  background-color: #337ab7;
  border-color: #337ab7;
}
#page_user_data .panel-default {
  border-color: #ddd;
}
#page_user_data .panel-default > .panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}
/* アコーディオンの開閉状態。Bootstrap3は`.in`、4系のBootstrap5は`.show`で
   開いた状態を表す。コアには`.collapse:not(.show) { display: none }`があるため、
   `.in`を付けただけでは4系側の規則で隠れたままになる。開いた状態を明示する。 */
#page_user_data .panel-collapse.collapse:not(.in) {
  display: none;
}
#page_user_data .panel-collapse.collapse.in {
  display: block;
}
#page_user_data .text-warning {
  color: #8a6d3b;
}
#page_user_data .img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
#page_user_data .center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#page_user_data .btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
#page_user_data .btn-danger {
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
}
#page_user_data .btn-group,
#page_user_data .btn-group-justified {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
/* ページ見出し。3系は左右16pxのマージンと下線を持ち、本文の左端も揃っていたが、
   4系ではマージンも下線も無く見出しが画面左端に張り付いていた(2026-08-02修正)。 */
#page_user_data .page-heading {
  margin: 0 16px 8px;
  padding: 8px;
  font-size: 16px;
  font-weight: bold;
  border-top: 1px solid #ccc;
  border-bottom: 1px dotted #ccc;
}
@media (min-width: 768px) {
  #page_user_data .page-heading {
    margin: 0 16px 48px;
    padding: 16px 0 12px;
    font-size: 32px;
    border-top: 0 none;
    border-bottom-style: solid;
  }
}

/* 3系の .inner (コンテンツ幅の上限)。user_dataページのラッパに付いている。 */
#page_user_data .inner {
  max-width: 1150px;
  margin-left: auto;
  margin-right: auto;
}

/* グリッドを3系(Bootstrap3)と同じfloatベースに戻す(2026-08-02修正)。
   3系のグリッドはfloatのため、高さの違うパネルが縦方向に詰めて配置される
   (例: message1は左に背の高いパネル、右にはその横に2つのパネルが縦に積まれる)。
   4系(Bootstrap5)の .row はflexboxで、1行に並ぶ要素の高さが揃ってしまうため、
   背の高いパネルの隣に数百px単位の空白ができ、次のパネルがはるか下に送られていた。
   特集ページに限りfloatへ戻すことで3系と同じ流れ方になる。
   購入導線やトップページ(flex前提)には影響しないよう #page_user_data にスコープする。 */
#page_user_data .row {
  display: block;
}
#page_user_data .row:after {
  content: "";
  display: table;
  clear: both;
}
#page_user_data .row > [class*="col-"] {
  float: left;
}
/* 移行元のマークアップには`.row`の中に`.row`が直接入っている箇所が9ページ・
   合計26箇所ある(3系のコンテンツ側の記述ミスだが、3系ではそれなりに描画されている)。
   Bootstrap5の`.row > *`は「行の直下の子」すべてに`width: 100%`と左右16pxのpaddingを
   与えるため、この入れ子`.row`にも適用されてしまい、内側のカラムが前のカラムの
   横に入れず下へ落ちていた(例: tokusyuの「母の日特集」が4番目に並ばず次行へ)。
   3系のBootstrap3には`.row > *`に相当する規則が無いので、入れ子`.row`に対して
   その効果を打ち消し、3系と同じ流れ方に戻す。 */
#page_user_data .row > .row {
  display: contents;
}

/* Bootstrap3のグリッドオフセット。user_dataページ43件のうち34件が
   .col-md-10.col-md-offset-1 で本文を中央寄せしているが、4系(Bootstrap5)には
   この命名のクラスが無く(Bootstrap5は .offset-md-*)、本文が左端に寄っていた。
   なおBootstrap3のmdは992px起点、Bootstrap5は768px起点と異なるため、
   768〜991pxではcol-md-*を全幅に戻して3系と同じ折り返しにする。 */
@media (min-width: 768px) and (max-width: 991px) {
  #page_user_data [class*="col-md-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
}
@media (min-width: 992px) {
  #page_user_data .col-md-offset-1 { margin-left: 8.33333333%; }
  #page_user_data .col-md-offset-2 { margin-left: 16.66666667%; }
  #page_user_data .col-md-offset-3 { margin-left: 25%; }
  #page_user_data .col-md-offset-4 { margin-left: 33.33333333%; }
  #page_user_data .col-md-offset-5 { margin-left: 41.66666667%; }
  #page_user_data .col-md-offset-6 { margin-left: 50%; }
}
#page_user_data .glyphicon {
  font-family: inherit;
}
/* Bootstrap3のglyphicon-checkは「チェックの入った四角(☑)」で、単なるレ点ではない。
   4系が既に読み込んでいるFont Awesomeの同等アイコン(square-check)で置き換える。 */
#page_user_data .glyphicon-check:before {
  content: "\f14a";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 400;
  padding-right: 0.3em;
}
#page_user_data .glyphicon-new-window:before { content: "↗ "; }
#page_user_data table.table_message {
  width: 100%;
  border-collapse: collapse;
}
#page_user_data table.table_message td,
#page_user_data table.table_message th {
  padding: 8px;
  border: 1px solid #ddd;
}

/* --- 特集ページの装飾差分の解消(2026-08-02追加) ---
   43ページで使われているクラスを棚卸しし、Bootstrap3にあって4系に無いものを
   Bootstrap 3.3.6の定義そのままで補完する。
   なお .messagetitle / .box_watch_u / .bnone / .title2 / .line / .noshi / .bg01 /
   .pickup_item といった店舗独自らしき名前のクラスは、**3系のどのCSSにも定義が無く**
   3系でも無装飾で表示されているため、意図的に対象外とした(4系で独自に装飾を
   足すと逆に3系と違う見た目になる)。 */

/* パネルの配色バリエーション */
#page_user_data .panel-info {
  border-color: #bce8f1;
}
#page_user_data .panel-info > .panel-heading {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
#page_user_data .panel-success {
  border-color: #d6e9c6;
}
#page_user_data .panel-success > .panel-heading {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
#page_user_data .panel-group {
  margin-bottom: 20px;
}
#page_user_data .panel-group .panel {
  margin-bottom: 0;
  border-radius: 4px;
}
#page_user_data .panel-group .panel + .panel {
  margin-top: 5px;
}
#page_user_data .panel-group .panel-heading {
  border-bottom: 0;
}
#page_user_data .panel-group .panel-heading + .panel-collapse > .panel-body {
  border-top: 1px solid #ddd;
}

/* テキストの配色・配置 */
#page_user_data .text-center { text-align: center; }
#page_user_data .text-success { color: #3c763d; }
#page_user_data .text-info { color: #31708f; }
#page_user_data .pull-left { float: left !important; }

/* テーブル(19箇所)。罫線が一切無い状態で表として読めなくなっていた */
#page_user_data .table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}
#page_user_data .table > thead > tr > th,
#page_user_data .table > thead > tr > td,
#page_user_data .table > tbody > tr > th,
#page_user_data .table > tbody > tr > td,
#page_user_data .table > tfoot > tr > th,
#page_user_data .table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
#page_user_data .table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}
#page_user_data .table > thead:first-child > tr:first-child > th,
#page_user_data .table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
#page_user_data .table-hover > tbody > tr:hover {
  background-color: #f5f5f5;
}

/* ボタン・囲み・注意書き */
#page_user_data .btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}
#page_user_data .btn-primary:hover {
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}
#page_user_data .well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
}
#page_user_data .alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
#page_user_data .alert > p,
#page_user_data .alert > ul {
  margin-bottom: 0;
}
#page_user_data .alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

/* 3系 style.css の .item_comment(商品バナーの説明文) */
#page_user_data .item_comment {
  margin: 0 0 8px;
}

/* ===== 3系トップページ互換スタイル(2026-08-02追加) =====
   トップページに移植したブロック(tikutakuyaclock / mokutekibetu4 / mokutekibetu / top2)は
   3系のマークアップをそのまま使っているが、3系のテーマCSSとBootstrap3という土台が4系には
   無いため、レイアウトや配色が崩れていた。実際に使われている分だけを再現する。
   トップページ限定の指定は body.front_page(4系も3系と同じクラスが付く)にスコープする。 */

/* ===== コンテンツ幅の統一(2026-08-02) =====
   3系はヘッダー・本文・フッターの全てが .container-fluid.inner
   (max-width 1150px + 左右16pxのpadding)に入り、コンテンツ幅1118pxで統一されていた。
   4系はヘッダー・フッター・各ブロック(.ec-role)が1130px+左右20pxで1090px、
   本文領域(.ec-layoutRole__contents)だけが1150pxでpadding無し、と3種類の幅が混在し、
   本文だけが左右にはみ出して見えていた(user_dataページで見出しがヘッダーより
   左に出ているとの指摘で判明)。3系と同じ1150px + 左右16pxに統一する。 */
.ec-headerRole,
.ec-headerNaviRole,
.ec-categoryNaviRole,
.ec-footerRole .ec-footerRole__inner,
.ec-layoutRole .ec-layoutRole__contents {
  max-width: 1150px;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}
/* 上位で幅とpaddingを持つため、入れ子側は解除する(二重padding防止) */
.ec-layoutRole__contents .ec-role,
.ec-layoutRole__contents .ec-productRole {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* カテゴリナビと本文の間の余白。3系は約45pxあるが4系はほぼ0で、商品詳細ページ等で
   本文がカテゴリナビに密着していた(2026-08-02修正)。 */
.ec-layoutRole .ec-layoutRole__contents {
  padding-top: 40px;
}
/* グリッドのガターも3系(左右16px)に合わせる。4系はBootstrap5既定の12px。 */
.front_page .ec-layoutRole__contents .row,
#page_user_data .ec-layoutRole__contents .row {
  --bs-gutter-x: 2rem;
}

/* 3系 style.css の img { max-width: 100% } 相当。4系(Bootstrap5ベース)には
   この指定が無く、画像が原寸のままカラム幅を突き抜けるため、「まとめオーダー」
   バナー(原寸300x376)が本来の幅より大きく表示され、右隣の説明文と重なっていた。 */
.front_page .ec-layoutRole__contents img,
#page_user_data img {
  max-width: 100%;
  height: auto;
}

/* 上記をページ全体へ拡張(2026-08-06)。24で目的別リストとバナーを下層ページ
   (layout_id=2、84ページ)のcontents_bottomにも置いたことで、同じはみ出しが
   カテゴリーページ・カート・お問い合わせ等でも起きるようになった。実測(幅1280px、
   category_id=34)では mangabanner2.jpg が原寸640pxのまま親カラム557pxを95px
   突き抜け、右隣の説明文に重なっていた。

   3系のグローバル指定と同じく max-width だけを与え、height は指定しない。
   height: auto を書くとHTMLのwidth/height属性(presentational hint)が打ち消される
   ため(11の教訓)。上のトップページ用ルールは検証済みのため据え置き、こちらは
   詳細度1で後ろに置くだけなので既存の指定を上書きしない。 */
img {
  max-width: 100%;
}

/* カテゴリページのバナーを3系と同じ原寸で出す(2026-08-06、26のカテゴリコンテンツ
   移行に伴う対応)。CategoryContentプラグインは説明文を .ec-searchnavRole の中へ
   差し込むため、コアの

     .ec-searchnavRole img { width: 100% }

   が効いてバナーが親幅まで引き伸ばされる。実測(幅1137px、category_id=34)では
   原寸950x475のバナーが1050x525になっていた。3系は950x475のまま(親幅1092)。

   ヘッダーロゴ・フッターロゴ・フリーエリア画像で使ったのと同じ打ち消し方。
   height は指定しない(11の教訓)。コア側は .ec-searchnavRole img でクラス1つ+要素1つ
   のため、確実に勝てるよう祖先クラスを1つ足して詳細度を上げている。 */
.ec-searchnavRole .ec-categoryRole__description img {
  width: auto;
  max-width: 100%;
}

/* 3系 style.css のグローバルリセット相当。これが無いと目的別リンク集に
   ブラウザ既定の黒丸と左インデントが付いてしまう。 */
.front_page .ec-layoutRole__contents ul,
.front_page .ec-layoutRole__contents ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.front_page .ec-layoutRole__contents dl,
.front_page .ec-layoutRole__contents dt,
.front_page .ec-layoutRole__contents dd,
.front_page .ec-layoutRole__contents li {
  margin: 0;
  padding: 0;
}

/* Bootstrap3の p { margin: 0 0 10px } 相当。4系コアは -webkit-margin-before/after: 0 で
   段落の余白を潰しており、縦に並ぶバナー画像が隙間なく密着してしまっていた。 */
.front_page .ec-layoutRole__contents p {
  margin: 0 0 10px;
}

/* Bootstrap3のglyphicon(Glyphicons Halflingsフォント)は4系に存在しない。
   目的別リンク集で使われている glyphicon-forward だけを、4系が既に読み込んでいる
   Font Awesomeの同等アイコンで置き換える(フォント名はv6/v5の両方を候補に挙げる)。 */
.glyphicon-forward:before {
  content: "\f04e";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.8em;
  padding-right: 0.2em;
  vertical-align: 1px;
}

/* 3系のユーティリティクラス(4系には無い) */
.txt_center { text-align: center; }
.img_right,
.txt_right { text-align: right; }
.no-padding { padding: 0 !important; }
.no-margin { margin: 0 !important; }

/* トップページのブロック間の余白(3系 default.css) */
.front_page .ec-layoutRole__contents .row > div {
  padding-bottom: 8px;
}
.front_page .ec-layoutRole__contents .row.no-padding > div {
  padding-bottom: 0;
}

/* 目的別バナーのキャプション。3系は .item_name でグレー(#525263)に指定しており、
   4系では未定義のためリンク色の青のまま表示されていた。 */
.front_page .item_photo {
  display: block;
  margin: 0 0 8px;
  text-align: center;
}
.front_page .item_photo img {
  width: 100%;
}
.front_page .item_name {
  display: block;
  color: #525263;
  font-weight: bold;
  margin: 0 0 8px;
}
.front_page a:hover img {
  opacity: 0.8;
}

/* 「チクタク屋のオリジナル時計」説明エリア(3系 default.css)。
   4系では見出しが左寄せかつ小さいままだった。 */
.front_page .comment_area h4 {
  font-size: 24px;
  margin: 0 0 2px;
}
.front_page .comment_area h5 {
  font-size: 16px;
  margin: 0;
}
.front_page .comment_area p {
  margin: 10px 0 15px;
}
@media (min-width: 768px) {
  .front_page .ec-layoutRole__contents .row {
    padding-bottom: 24px;
  }
  .front_page .comment_area h4 {
    font-size: 32px;
    margin: 0 0 8px;
  }
  .front_page .comment_area h5 {
    font-size: 20px;
  }
  .front_page .comment_area p {
    font-size: 20px;
    margin: 24px 0;
  }
}

/* 新着情報エリア(3系 default.css の #news_area 相当)。
   コアは見出し「NEWS｜新着情報」を一覧の枠外に置き padding-top も 60px あるため、
   右横の送料無料バナーと上端が揃わなかった。3系と同じく見出しを枠内に入れ、
   上の余白を詰めて両カラムの上端を揃える。 */
.front_page .news_contents .ec-newsRole {
  padding-top: 0;
  background: #F8F8F8;
}
.front_page .news_contents .heading01 {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  padding: 16px;
  text-align: left;
}
.front_page .news_contents .ec-newsRole__news {
  border: 0;
  background: #fff;
}
/* 「もっと見る」。3系は青い文字リンクで、コア標準の黒いボタンとは異なる。 */
.front_page #news_readmore {
  display: inline-block;
  margin: 8px 0 16px;
  padding: 0;
  color: #0092C4;
  background: none;
  border: 0;
  font-size: 16px;
  cursor: pointer;
}
.front_page #news_readmore:hover {
  color: #33A8D0;
  text-decoration: none;
}

/* 新着情報の横に並ぶ送料無料バナー(3系 default.css の .txt_bnr) */
.txt_bnr_area {
  padding-left: 16px;
}
.txt_bnr {
  background: #f8f8f8;
  border: 1px solid #D9D9D9;
  font-weight: bold;
  padding: 16px;
  margin: 12px 0 16px;
  text-align: center;
}
.txt_bnr strong {
  color: #DE5D50;
  font-size: 20px;
}
.txt_bnr strong strong {
  font-size: 32px;
}

/* カテゴリナビのドロップダウン。3系は白背景・グレー文字だが、
   4系コアは黒背景・白文字で全く印象が異なっていた。 */
/* 背景は`a`だけでなく`li`にも指定する。コアはサブメニューの開閉を
   `li`の高さのtransitionで行っており、`a`にしか背景が無いと開閉アニメーションの
   途中で背景の抜けた領域ができ、後ろのスライド画像が透けて見えてしまう。 */
.ec-itemNav__nav li ul li,
.ec-itemNav__nav li ul li a {
  background: #fff;
}
.ec-itemNav__nav li ul li a {
  color: #525263;
  border-bottom: 1px solid #E8E8E8;
}
.ec-itemNav__nav > li:hover li:hover > a {
  color: #525263;
  background: rgba(204, 204, 204, 0.1);
}
.ec-itemNav__nav li ul {
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* フッター ピックアップリンク(FAX注文書・包装/熨斗・メッセージサンプル・LINE)
   Phase4 UATで3系フッターとの差分(移行漏れ)として発見、2026-08-02追加 */
.ec-footerPickup {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-bottom: 20px;
}
/* 3系は Bootstrap3 の col-sm-3 col-xs-6 で「768px以上=4列 / 未満=2列」に固定されていた。
   当初 max-width:180px を付けていたが、これがflex-basisより小さくなる幅では1行に入る数が
   増えて列数が崩れ(実測で3列になっていた)、3系よりバナーが小さく見えていた。
   max-widthもflex-basisと同じ値にして列数を固定する(2026-08-05修正)。 */
.ec-footerPickup__item {
  flex: 0 0 calc(25% - 4px);
  max-width: calc(25% - 4px);
}
.ec-footerPickup__item img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 767px) {
  .ec-footerPickup__item {
    flex: 0 0 calc(50% - 4px);
    max-width: calc(50% - 4px);
  }
}

/* フッターのナビリンクを3系と同じ「常に横並び・中央寄せ」にする(2026-08-05修正)。
   4系コアは .ec-footerNavi__link を768px未満で display:block にし、リンクごとに
   border-bottom を引いた縦1列のリストにする(スマホ向けの作り)。一方3系は
   #footer ul li { display:inline-block; margin:0 8px 8px } をメディアクエリの外に
   置いており、画面幅に関係なく横並び・中央寄せだった。3系の見た目に合わせる。
   下線もコア(768px以上)は text-decoration:underline だが3系は無しなので消す。 */
.ec-footerRole .ec-footerNavi .ec-footerNavi__link {
  display: inline-block;
}
.ec-footerRole .ec-footerNavi .ec-footerNavi__link a {
  display: inline-block;
  border-bottom: none;
  margin: 0 8px 8px;
  padding: 0;
  text-decoration: none;
}
.ec-footerRole .ec-footerNavi .ec-footerNavi__link a:hover {
  text-decoration: underline;
}

/* フッター追加ナビゲーション(注文からお届けまで等のサブリンク) */
.ec-footerNavi--sub {
  margin-top: 0.5em;
}
/* 3系はここにBootstrap3のglyphicon-check(チェックの入った四角)を置いていた。
   単なるレ点ではないため、Font Awesomeの同等アイコンで再現する。 */
.ec-footerNavi--sub .ec-footerNavi__link a:before {
  content: "\f14a";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 400;
  padding-right: 0.4em;
}

/* ヘッダーを3系と同じ4段構成に揃える(3系ヘッダーとの差分として発見、2026-08-02)
   3系は「キャッチコピー(左)+カート(右)」「ロゴ(左)」「商品検索+SNSアイコン(左)+会員ナビ(右)」
   「カテゴリナビ」の4段構成。4系コアは logo ブロックがキャッチコピーとロゴを中央寄せで持ち、
   header ブロックが検索・会員ナビ・カートを1行に押し込む構成のため、カートを logo ブロック側の
   右上へ絶対配置で移し(テンプレート側も対応して移動済み)、中央寄せを左寄せに変更する。
   寸法は3系の実値に合わせている: キャッチコピー16px、ロゴ画像は原寸(872x112)、
   SNSアイコンは原寸(48x48)+右マージン10px、カートは枠線付きで最小幅256px。 */
.ec-headerTitle__copy {
  font-size: 16px;
  margin: 0;
  text-align: left;
  color: #525263;
}
.ec-headerTitle .ec-headerTitle__title {
  text-align: left;
}
.ec-headerRole .ec-headerTitle__title a {
  margin-bottom: 0;
}
/* コアの .ec-headerRole img { width: 100% } を打ち消し、3系と同じ原寸表示にする */
.ec-headerRole .ec-headerTitle__title img {
  width: auto;
  max-width: 100%;
}

/* カート: 3系と同じくキャッチコピーと同じ行の右端に、角丸なしの枠線付き矩形で表示する。
   .ec-headerRole はコアで position: relative のため、そのまま絶対配置の基準にできる。 */
.ec-headerRole .ec-headerRole__cart {
  position: absolute;
  top: 15px;
  right: 20px;
}
.ec-headerRole .ec-cartNavi {
  border: 1px solid #D9D9D9;
  border-radius: 0;
  background: #fff;
  min-width: 256px;
}
/* スマホ幅のヘッダーを3系に合わせる(2026-08-05)。
   3系はPCとスマホでヘッダーの作りが違い、スマホでは
     ・カートは枠も「合計 ¥0」も持たないアイコンだけ(実測 50x44、右端寄り)
     ・ハンバーガーはその右隣(実測 35x44、右端)
     ・会員ナビ(人/ハート/鍵)は display:none で出さない
   となっていた。4系コアはハンバーガーが左端固定で、カートはPC同様の枠付き矩形のまま
   だったため、スマホ幅でのみ3系の形に揃える(PC幅は上の枠付き表示のまま=3系と同じ)。 */
@media (max-width: 767px) {
  /* 3系の実測: カートのアイコンは x=380 y=16 の 30x30。top:8px だと件数バッジ
     (アイコン基準で top:-10px の絶対配置)が画面上端からはみ出すため 16px にする。 */
  .ec-headerRole .ec-headerRole__cart {
    top: 16px;
    right: 75px;
  }
  .ec-headerRole .ec-cartNavi {
    border: none;
    background: transparent;
    min-width: 0;
    padding: 0;
  }
  /* 3系のカートアイコンは30x30。コアは20pxで一回り小さい */
  .ec-headerRole .ec-cartNavi__icon {
    font-size: 30px;
  }
  /* 「合計 ¥0」はスマホでは出さない(3系と同じくアイコンのみ)。件数バッジは残す */
  .ec-headerRole .ec-cartNavi__price {
    display: none;
  }
  /* ハンバーガーを右端へ。コアは left:10px で左端に固定している */
  .ec-headerNavSP {
    left: auto;
    right: 10px;
  }
  /* 会員ナビ(人/ハート/鍵のアイコン)。ドロワー内に同じ導線があり、
     3系のスマホヘッダーでは display:none で出していない。
     コア側が .ec-headerNaviRole .ec-headerNaviRole__nav(クラス2つ)で指定しているため、
     こちらも同じ詳細度以上にしないと打ち消せない。 */
  .ec-headerNaviRole .ec-headerNaviRole__nav {
    display: none;
  }
  /* SNSアイコンを3系と同じく中央寄せにする。
     コアは .ec-headerNaviRole を justify-content:space-between の2カラム
     (__left=33.3% / __right=66.7%)にしており、SNSは左33%の中で左寄せになっていた。
     会員ナビを消して右カラムごと畳み、左カラムを全幅にしてから中央寄せする。
     ここもコアがクラス2つのセレクタなので同じ詳細度に揃えないと効かない。 */
  .ec-headerNaviRole .ec-headerNaviRole__right {
    display: none;
  }
  .ec-headerNaviRole .ec-headerNaviRole__left {
    width: 100%;
  }
  .ec-headerNaviRole .ec-headerNaviRole__sns {
    justify-content: center;
  }
}

.ec-headerRole .ec-cartNavi__price:before {
  content: "合計 ";
  font-size: 12px;
}

/* 商品検索とSNSアイコンを3系と同じく左側に横並びで配置する。
   コアは左33.3%/右66.7%の固定幅配分で、この幅制約があるとSNSアイコンが検索欄の下へ
   折り返されてしまうため、幅指定を解除してflexで並べる。 */
@media (min-width: 768px) {
  .ec-headerNaviRole .ec-headerNaviRole__left {
    width: auto;
    display: flex;
    align-items: center;
  }
  .ec-headerNaviRole .ec-headerNaviRole__right {
    width: auto;
  }
  .ec-headerNaviRole .ec-headerNaviRole__search {
    margin-top: 0;
    margin-right: 20px;
  }
}
.ec-headerNaviRole__sns {
  display: flex;
  align-items: center;
}
.ec-headerNaviRole__sns a {
  display: inline-block;
  margin-right: 10px;
}
.ec-headerNaviRole .ec-headerNaviRole__sns img {
  width: 48px;
  height: 48px;
}
@media (max-width: 767px) {
  .ec-headerNaviRole__sns {
    margin: 0 0 10px;
  }
}

/* 商品検索: 3系は「白背景・角丸なし・1px #ccc枠のセレクト」+「下線のみのキーワード欄」。
   4系コアは黒背景のセレクトとグレー背景の丸いキーワード欄なので、3系の見た目に合わせる。 */
@media (min-width: 768px) {
  .ec-headerNaviRole .ec-headerNaviRole__search {
    width: 460px;
  }
  .ec-headerSearch .ec-headerSearch__category {
    width: 40%;
  }
  .ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
    background: #fff;
    color: #525263;
    border: 1px solid #ccc;
    border-radius: 0;
  }
  .ec-headerSearch .ec-headerSearch__category .ec-select select {
    height: 50px;
    max-width: none;
    padding: 0.5em 24px 0.5em 1em;
    font-size: 16px;
    color: #525263;
  }
  .ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search:before {
    top: 1.4em;
    border-top-color: #525263;
  }
  .ec-headerSearch .ec-headerSearch__keyword {
    float: left;
    width: 59%;
    margin-left: 1%;
    height: 50px;
    padding: 0 50px 0 1em;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
  }
  .ec-headerSearch .ec-headerSearch__keyword input[type=search] {
    height: 50px;
    padding: 0.5em 0;
    font-size: 16px;
  }
}

/* カテゴリナビ: 3系は上下に区切り線(#D9D9D9)があり、検索行との間隔も20pxと狭い。
   また項目はinline-blockで中央寄せに折り返す(4系コアはfloat: leftのため2行目が左寄せになる)。 */
@media (min-width: 768px) {
  .ec-headerNaviRole {
    padding-bottom: 20px;
  }
  .ec-categoryNaviRole .ec-itemNav {
    border-top: 1px solid #D9D9D9;
    border-bottom: 1px solid #D9D9D9;
  }
  .ec-itemNav__nav > li {
    float: none;
    display: inline-block;
  }
}

/* 「新着 オーダー時計」ギャラリーの掲載管理に使っているタグ(tag_id=4)は、
   3系では専用プラグインのテーブルで管理していた内部的な選定フラグであり、
   商品詳細ページに表示されるものではなかった。4系はコアが商品タグを
   商品詳細に出すため、この選定用タグだけ非表示にする(他のタグは影響しない)。 */
.ec-productRole__tags .ec-productRole__tag.tag_4 {
  display: none;
}

/* 「新着 オーダー時計」ギャラリーブロック(3系の有料プラグインを内製で再現、2026-08-02)
   3系はBootstrap3の .page-header / .text-warning と、ul.row + li.col-sm-2.col-xs-4 の
   グリッドだけで組まれていた(専用CSSは持っていない)。4系にはBootstrap3が無いため、
   使用されている分のクラスのみをここで再現する(グリッドは下部の定義を共用)。 */
.ec-role .item_gallary,
.item_gallary {
  margin-bottom: 20px;
}
.item_gallary ul.row {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  /* 下の li の左右paddingを打ち消して、ブロック全体の幅を3系と揃える */
  margin-left: -15px;
  margin-right: -15px;
}
/* 画像の間に余白を入れる(2026-08-04、クライアント指摘)。
   3系はBootstrap3の .col-xs-* と .col-sm-* が持つ左右15pxのpaddingで画像間に
   30pxの間隔ができていたが、下部で再現している4系向けの同名クラスは
   幅(flex/width/max-width)だけを定義しておりpaddingを持たないため、画像が
   隙間なく密着して並んでいた。.col-* 側にpaddingを足すとTOPページの他ブロックや
   user_dataページの既存レイアウト(col-sm-3.col-xs-6等)の幅計算に影響するため、
   このギャラリー内にスコープして与える。縦方向は3系と同じく間隔なし。
   ★コメント内でクラス名をスラッシュ連結して書かないこと。アスタリスクとスラッシュが
   隣り合うとコメントの終了記号になってしまい、コメントが途中で切れて直後のルールが
   まるごと無効化される(2026-08-06に発覚。実際この余白指定は効いていなかった)。 */
.item_gallary ul.row > li {
  padding-left: 15px;
  padding-right: 15px;
}
.item_gallary .item_photo {
  display: block;
}
.item_gallary .item_photo img {
  width: 100%;
  height: auto;
}
h2.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eee;
  font-size: 24px;
}
h2.page-header .text-warning {
  color: #8a6d3b;
}

/* 新着情報ブロック冒頭のバナー画像(3系にあり4系で欠落していた、2026-08-02) */
.ec-newsRole__banner {
  text-align: center;
  margin-bottom: 20px;
}
.ec-newsRole__banner img {
  max-width: 100%;
  height: auto;
}

/* Bootstrap3の col-xs-* と col-sm-* のグリッド再現(Phase4 UATでTOPページの画像
   2カラムが崩れているのを発見して追加、2026-08-02)。4系標準のBootstrap4には
   col-xs-*という命名のクラスが存在しない(xsは接頭辞なしのcol-*が相当)ため、
   3系由来のTOPページブロック・user_dataページで幅として機能していなかった。
   Bootstrap3のモバイルファースト設計(xsをベースにsmで上書き)をそのまま
   再現する必要がある: col-sm-3.col-xs-6のような組み合わせが複数箇所にあり、
   767px以下は2カラム(xs)・768px以上は4カラム(sm)というレスポンシブ切替を
   意図している。col-xs-*を単純に常時適用すると、コアBootstrap4のcol-sm-*
   (メディアクエリ内)より読み込み順で後になり768px以上でも誤って勝って
   しまうため、col-sm-*もこちらで再定義してcol-xs-*より後(メディアクエリ内)
   に置き、Bootstrap3と同じ優先順位関係を再現する。 */
.col-xs-1 { flex: 0 0 8.333333%; width: 8.333333%; max-width: 8.333333%; }
.col-xs-2 { flex: 0 0 16.666667%; width: 16.666667%; max-width: 16.666667%; }
.col-xs-3 { flex: 0 0 25%; width: 25%; max-width: 25%; }
.col-xs-4 { flex: 0 0 33.333333%; width: 33.333333%; max-width: 33.333333%; }
.col-xs-5 { flex: 0 0 41.666667%; width: 41.666667%; max-width: 41.666667%; }
.col-xs-6 { flex: 0 0 50%; width: 50%; max-width: 50%; }
.col-xs-7 { flex: 0 0 58.333333%; width: 58.333333%; max-width: 58.333333%; }
.col-xs-8 { flex: 0 0 66.666667%; width: 66.666667%; max-width: 66.666667%; }
.col-xs-9 { flex: 0 0 75%; width: 75%; max-width: 75%; }
.col-xs-10 { flex: 0 0 83.333333%; width: 83.333333%; max-width: 83.333333%; }
.col-xs-11 { flex: 0 0 91.666667%; width: 91.666667%; max-width: 91.666667%; }
.col-xs-12 { flex: 0 0 100%; width: 100%; max-width: 100%; }
@media (min-width: 768px) {
  .col-sm-1 { flex: 0 0 8.333333%; width: 8.333333%; max-width: 8.333333%; }
  .col-sm-2 { flex: 0 0 16.666667%; width: 16.666667%; max-width: 16.666667%; }
  .col-sm-3 { flex: 0 0 25%; width: 25%; max-width: 25%; }
  .col-sm-4 { flex: 0 0 33.333333%; width: 33.333333%; max-width: 33.333333%; }
  .col-sm-5 { flex: 0 0 41.666667%; width: 41.666667%; max-width: 41.666667%; }
  .col-sm-6 { flex: 0 0 50%; width: 50%; max-width: 50%; }
  .col-sm-7 { flex: 0 0 58.333333%; width: 58.333333%; max-width: 58.333333%; }
  .col-sm-8 { flex: 0 0 66.666667%; width: 66.666667%; max-width: 66.666667%; }
  .col-sm-9 { flex: 0 0 75%; width: 75%; max-width: 75%; }
  .col-sm-10 { flex: 0 0 83.333333%; width: 83.333333%; max-width: 83.333333%; }
  .col-sm-11 { flex: 0 0 91.666667%; width: 91.666667%; max-width: 91.666667%; }
  .col-sm-12 { flex: 0 0 100%; width: 100%; max-width: 100%; }
}
/* スマホのドロワーメニューを3系に合わせる(2026-08-05、「ハンバーガーがちがう」との指摘)。
   3系の実測: right:0(右からスライドイン) / 幅260px / 背景#f6f6f6 /
     検索エリア背景#ebebeb / 会員リンク 14px・normal・色#525263・区切り線#e8e8e8 /
     カテゴリ 16px・bold
   4系コア: left:0(左からスライドイン) / 背景black / 会員リンク 16px・bold・白文字・背景black
   検索エリアの背景(#ebebeb)は両系とも同じ値だったので触っていない。
   項目の並び(検索→会員リンク→カテゴリ)はブロック配置(section=11)側で調整する
   (25_apply_drawer_block_order.sql)。 */
.ec-drawerRole {
  left: auto;
  right: 0;
  /* 閉じた状態を右の画面外へ。開いた状態(.is_active)のtranslateX(0)はコアのまま使う */
  transform: translateX(300px);
  background: #f6f6f6;
}
.ec-drawerRole .ec-headerLinkArea {
  background: transparent;
}
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__list {
  border-top: 1px solid #e8e8e8;
}
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__item {
  color: #525263;
  font-size: 14px;
  font-weight: normal;
  border-bottom: 1px solid #e8e8e8;
  padding: 12px 10px;
}
/* 3系のカテゴリは第1階層・第2階層とも太字(16px/700)。4系コアは第1階層が normal、
   第2階層も normal だった */
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li a {
  font-weight: bold;
}
/* ドロワー内の検索フォームとカテゴリの配色を3系に合わせる(2026-08-06、
   「色を3系にそろえて」「黒のバックグラウンド使わないで」との指摘)。
   3系の実測(幅500px・退職祝いカテゴリのページ):
     カテゴリ選択(select) 背景#fff / 文字#555 / 枠1px solid #ccc / 角丸3px / 高さ50px
     キーワード欄        背景は透明(親の#ebebebが透ける) / 下線1px solid #ccc / 高さ50px
     カテゴリ項目        文字#525263 / 区切り線#e8e8e8 / 第2階層も背景は透明
   4系コアの実測:
     .ec-select_search  背景black / 白文字 / 角丸10px 10px 0 0  ← 黒背景をやめる
     キーワード欄        背景#f6f6f6 / 高さ36px
     カテゴリ項目        文字black / 区切り線#ccc / 第2階層の背景#fff
   詳細度に注意。コアは
     .ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search  (クラス4つ)
     .ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li a        (クラス3+要素4)
   と書いているため、最初 .ec-drawerRole .ec-headerSearch .ec-select_search (クラス3つ)や
   li li a (要素3つ)で上書きしようとして負けた。コアと同じ形にセレクタを合わせている
   (同詳細度ならcustomize.cssが後に読まれるので勝つ)。この配色対応での詳細度負けは
   これで3回目なので、以後はコアのセレクタを先に確認すること。
   ヘッダー内の同ブロックには影響させたくないので、いずれも .ec-drawerRole 配下に限定。 */
.ec-drawerRole .ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
  background: transparent;
  border-radius: 0;
  /* コアは黒背景に合わせて白文字にしている。中のselectには別途#555を当てているが、
     継承で白が漏れる箇所が出ないよう親側も3系の色にしておく */
  color: #555;
}
/* コアはselectの右端の▼を::beforeの三角で描いており、黒背景に載せる前提の色になっている。
   背景を白にすると見えなくなるため、3系と同じ文字色に合わせる */
.ec-drawerRole .ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search::before {
  border-top-color: #555;
  right: 1em;
}
.ec-drawerRole .ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search select {
  background-color: #fff;
  color: #555;
  border: 1px solid #ccc;
  border-radius: 3px;
  height: 50px;
  /* 左は3系と同じ16px。右は▼の描画領域が要るのでコアの24pxを残す */
  padding: 8px 24px 8px 16px;
}
.ec-drawerRole .ec-headerSearch__keyword {
  background: transparent;
  height: 50px;
  /* コアは黒いselectと繋げるため下側に角丸10pxを持たせている。3系は角丸なしの
     下線だけなので、下線が丸まって見えないよう打ち消す */
  border-radius: 0;
}
.ec-drawerRole .ec-headerSearch__keyword .ec-input input {
  height: 48px;
  color: #555;
}
/* 第1階層は4系コアが#f8f8f8をわずかに敷いている。3系は背景を持たずドロワーの#f6f6f6が
   そのまま見えるので透明にする */
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li a {
  color: #525263;
  border-bottom-color: #e8e8e8;
  background: transparent;
}
/* 4系コアは第2階層を白背景・normal、第3階層以降も白背景・黒文字にしているが、3系は
   階層を問わず背景なし(ドロワーの#f6f6f6が透ける)・#525263・boldで統一されていた */
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li a,
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li ul li a {
  background: transparent;
  color: #525263;
  font-weight: bold;
  border-bottom-color: #e8e8e8;
}
/* 閉じるボタンもドロワーの左隣(=右寄り)へ移し、3系の見た目に寄せる。
   3系はハンバーガーボタン自体が×に変形する方式(.drawer-open .nav-trigger の
   3本線を回転させて描く)で、背景も枠も持たない線だけの×だった。4系は別要素
   (.ec-drawerRoleClose)を白い丸で出す構造のため完全一致はできないが、
   丸を角丸なしにして色を3系と同じ#525263に合わせる。背景の白は残す
   (3系はヘッダー内の白地に置かれるが4系はコンテンツ上に浮くため、
   透明にすると商品画像と重なって見えなくなる)。 */
.ec-drawerRoleClose {
  left: auto;
  right: 270px;
  border-radius: 0;
  color: #525263;
}

/* 商品詳細ページの基準フォントサイズを3系に合わせる(2026-08-05、文字が大きいとの指摘)。
   4系コアは .ec-productRole { font-size: 16px } を基準にしているが、3系は body の
   14px をそのまま継承していた。実測での差分:
     商品コード / 加算ポイント / オプションのラベル / 数量 / 商品説明 / ボタン
       … 3系=14px、4系=16px
     商品名(32px) / 価格(28px) … 両系とも固有指定で同値のため影響しない
   商品説明とフリーエリア(.ec-productRole__description)、その中のBootstrap3パネルの
   本文も継承で14pxになり、3系と一致する(パネルの見出しは3系同様16pxを別途指定済み)。
   user_data特集ページは #page_user_data が既に14px継承で3系と一致しており対象外。
   .ec-productRole は商品詳細ページ専用のクラスなので他ページには影響しない。 */
.ec-productRole {
  font-size: 14px;
}

/* 商品詳細の購入導線ボタンの配色を3系に合わせる(2026-08-05、店舗判断)。
   3系はBootstrap3のボタン配色で「ご購入手続きへ=btn-danger(赤)」「お気に入りに追加=
   btn-info(水色)」「商品についてのお問い合わせ=btn-success(緑)」だった。4系コアは
   お気に入り・お問い合わせがともに ec-blockBtn--cancel(紺)で3系と異なっていたため、
   3系のBootstrap3の色をそのまま与える。id経由のセレクタなのでコアの定義に勝つ。
   購入ボタン(ec-blockBtn--action)は4系でも赤系のため触っていない。
   並び順(購入→お気に入り→お問い合わせ)とオプションの位置は
   Customize\EventListener\ProductLayoutEvent と ContactExtra 側で調整している。 */
#favorite.ec-blockBtn--cancel {
  background-color: #5bc0de;
  border-color: #46b8da;
  color: #fff;
}
#favorite.ec-blockBtn--cancel:hover {
  background-color: #31b0d5;
  border-color: #269abc;
  color: #fff;
}
#favorite.ec-blockBtn--cancel[disabled] {
  background-color: #5bc0de;
  border-color: #46b8da;
  opacity: 0.65;
}
#contact_product .ec-blockBtn--cancel {
  background-color: #5cb85c;
  border-color: #4cae4c;
  color: #fff;
}
#contact_product .ec-blockBtn--cancel:hover {
  background-color: #449d44;
  border-color: #398439;
  color: #fff;
}

/* 商品詳細の「加算ポイント」表示(2026-08-05追加、商品196で3系と比較した際の指摘対応)。
   3系はポイントプラグインが価格の下に class="text-primary"(Bootstrap3の青 #337ab7)で
   出していた。4系はポイント付与自体はコアが行うが商品詳細に表示が無いため、
   Customize\EventListener\ProductPointEvent が同じ位置へ挿入する。 */
.ec-productRole__point {
  color: #337ab7;
  margin-bottom: 8px;
}
.ec-productRole__pointUnit {
  font-size: 0.85em;
  margin-left: 0.1em;
}

/* ここから: 商品詳細のフリーエリア/商品説明向けスコープ (2026-08-04 追加)
   商品ごとのフリーエリア(dtb_product.free_area)から include される
   Block/freeareainfo1〜4・free5〜7 は3系のBootstrap3マークアップ
   (panel/table/img-responsive/col-md-*)をそのまま使っている。
   上の #page_user_data 向け定義と同じ内容を、コアの detail.twig が
   free_area と商品説明を出力するラッパ .ec-productRole__description
   にもスコープして適用する(他の購入導線には影響させない)。 */
.ec-productRole__description .panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.ec-productRole__description .panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.ec-productRole__description .panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
}
.ec-productRole__description .panel-body {
  padding: 15px;
}
.ec-productRole__description .panel-primary {
  border-color: #337ab7;
}
.ec-productRole__description .panel-primary > .panel-heading {
  color: #fff;
  background-color: #337ab7;
  border-color: #337ab7;
}
.ec-productRole__description .panel-default {
  border-color: #ddd;
}
.ec-productRole__description .panel-default > .panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}
.ec-productRole__description .panel-collapse.collapse:not(.in) {
  display: none;
}
.ec-productRole__description .panel-collapse.collapse.in {
  display: block;
}
.ec-productRole__description .text-warning {
  color: #8a6d3b;
}
.ec-productRole__description .img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
.ec-productRole__description .center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.ec-productRole__description .btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.ec-productRole__description .btn-danger {
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
}
.ec-productRole__description .btn-group,
.ec-productRole__description .btn-group-justified {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ec-productRole__description .page-heading {
  margin: 0 16px 8px;
  padding: 8px;
  font-size: 16px;
  font-weight: bold;
  border-top: 1px solid #ccc;
  border-bottom: 1px dotted #ccc;
}
@media (min-width: 768px) {
  .ec-productRole__description .page-heading {
    margin: 0 16px 48px;
    padding: 16px 0 12px;
    font-size: 32px;
    border-top: 0 none;
    border-bottom-style: solid;
  }
}
.ec-productRole__description .inner {
  max-width: 1150px;
  margin-left: auto;
  margin-right: auto;
}
.ec-productRole__description .row {
  display: block;
}
.ec-productRole__description .row:after {
  content: "";
  display: table;
  clear: both;
}
.ec-productRole__description .row > [class*="col-"] {
  float: left;
}
.ec-productRole__description .row > .row {
  display: contents;
}
/* .row を経由しない .col-* に、Bootstrap3相当の左右15pxのpaddingを与える
   (2026-08-06、free5の画像が3系より26px大きかった件)。
   Bootstrap3は .col-* 自体がpaddingを持つが、Bootstrap5は .row > * に付けるため、
   row で囲まれていない col には効かない。free5.twig は
     <div class="col-md-6"><div class="panel panel-info">…
   と row なしで2カラムを組んでいるため、3系より枠が30px広くなり、中の
   eibunmessage.jpg / japanmessage.jpg(603x63・幅指定なし)が max-width:100% で
   3系の393pxに対し419pxまで伸びていた。
   :not(.row) で親がrowのcolを除外しているのは、そちらにはBootstrap5のgutter由来の
   paddingが既に効いており、足すと二重になるため。グローバルな col-xs-* や col-sm-* に
   paddingを足すとTOPページやuser_dataページの幅計算に影響するので(上部の
   .item_gallary の対応と同じ理由)、フリーエリア内にスコープしている。
   1つ目のセレクタ(直下)が必要なのは、`A B > C` の B は A の子孫でなければならず、
   free5のように col の親が .ec-productRole__description 自身の場合は
   `:not(.row) > [class*="col-"]` だけではマッチしないため。
   ★コメント内でクラス名をスラッシュ連結して書かないこと。アスタリスクとスラッシュが
   隣り合うとコメントの終了記号になり、コメントが途中で切れて直後のルールが無効化される。
   実際それでこのルールが一度効かなかった(上の .item_gallary と .col-xs-1 も同じ理由で
   壊れていた)。 */
.ec-productRole__description > [class*="col-"],
.ec-productRole__description :not(.row) > [class*="col-"] {
  padding-left: 15px;
  padding-right: 15px;
}
/* 3系は素の<table>のtdをpadding 0にリセットしていたが、4系はブラウザ既定の1pxが残り
   左右で2px広がる。.table と .table_message は下部で3系同様のpaddingを別途与えている
   ため除外する。 */
.ec-productRole__description table:not(.table):not(.table_message) > tbody > tr > td,
.ec-productRole__description table:not(.table):not(.table_message) > tbody > tr > th,
.ec-productRole__description table:not(.table):not(.table_message) > tr > td,
.ec-productRole__description table:not(.table):not(.table_message) > tr > th {
  padding: 0;
}
@media (min-width: 768px) and (max-width: 991px) {
  .ec-productRole__description [class*="col-md-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
}
@media (min-width: 992px) {
  .ec-productRole__description .col-md-offset-1 { margin-left: 8.33333333%; }
  .ec-productRole__description .col-md-offset-2 { margin-left: 16.66666667%; }
  .ec-productRole__description .col-md-offset-3 { margin-left: 25%; }
  .ec-productRole__description .col-md-offset-4 { margin-left: 33.33333333%; }
  .ec-productRole__description .col-md-offset-5 { margin-left: 41.66666667%; }
  .ec-productRole__description .col-md-offset-6 { margin-left: 50%; }
}
.ec-productRole__description .glyphicon {
  font-family: inherit;
}
.ec-productRole__description .glyphicon-check:before {
  content: "\f14a";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 400;
  padding-right: 0.3em;
}
.ec-productRole__description .glyphicon-new-window:before { content: "↗ "; }
.ec-productRole__description table.table_message {
  width: 100%;
  border-collapse: collapse;
}
.ec-productRole__description table.table_message td,
.ec-productRole__description table.table_message th {
  padding: 8px;
  border: 1px solid #ddd;
}
.ec-productRole__description .panel-info {
  border-color: #bce8f1;
}
.ec-productRole__description .panel-info > .panel-heading {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.ec-productRole__description .panel-success {
  border-color: #d6e9c6;
}
.ec-productRole__description .panel-success > .panel-heading {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.ec-productRole__description .panel-group {
  margin-bottom: 20px;
}
.ec-productRole__description .panel-group .panel {
  margin-bottom: 0;
  border-radius: 4px;
}
.ec-productRole__description .panel-group .panel + .panel {
  margin-top: 5px;
}
.ec-productRole__description .panel-group .panel-heading {
  border-bottom: 0;
}
.ec-productRole__description .panel-group .panel-heading + .panel-collapse > .panel-body {
  border-top: 1px solid #ddd;
}
.ec-productRole__description .text-center { text-align: center; }
.ec-productRole__description .text-success { color: #3c763d; }
.ec-productRole__description .text-info { color: #31708f; }
.ec-productRole__description .pull-left { float: left !important; }
.ec-productRole__description .table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}
.ec-productRole__description .table > thead > tr > th,
.ec-productRole__description .table > thead > tr > td,
.ec-productRole__description .table > tbody > tr > th,
.ec-productRole__description .table > tbody > tr > td,
.ec-productRole__description .table > tfoot > tr > th,
.ec-productRole__description .table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
.ec-productRole__description .table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}
.ec-productRole__description .table > thead:first-child > tr:first-child > th,
.ec-productRole__description .table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
.ec-productRole__description .table-hover > tbody > tr:hover {
  background-color: #f5f5f5;
}
.ec-productRole__description .btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}
.ec-productRole__description .btn-primary:hover {
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}
.ec-productRole__description .well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
}
.ec-productRole__description .alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.ec-productRole__description .alert > p,
.ec-productRole__description .alert > ul {
  margin-bottom: 0;
}
.ec-productRole__description .alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.ec-productRole__description .item_comment {
  margin: 0 0 8px;
}
.ec-productRole__description .ec-layoutRole__contents .row {
  --bs-gutter-x: 2rem;
}
/* フリーエリア内の画像サイズを3系に合わせる(2026-08-06、「ボタン画像のサイズを3系に
   合わせて」との指摘)。
   コアの `.ec-productRole img { width: 100% }` は商品メイン画像を親幅いっぱいに広げる
   ためのルールだが、フリーエリアの説明画像にも効いてしまい、元画像より拡大されていた。
   実測(幅500px・商品196):
     text-soushin.gif(属性なし・元230x79)      3系=230x79    4系=421x145
     LINEのja.png(height="36"・元232x72)        3系=116x36    4系=421x131
     syasinerabu.jpg(width="360"・元672x342)   3系=360x183   4系=451x230
   3系はwidth/heightをCSSで指定せず、HTMLのwidth/height属性とブラウザ既定に任せていた
   (属性なしなら元サイズ、height属性だけなら幅は比率で算出)。同じ挙動にするため
   width:auto でコアの width:100% を打ち消す。
   height は指定しない。`height: auto` を書くとHTMLのheight属性(presentational hintで
   最も優先度が低い)を上書きしてしまい、LINEボタンの height="36" が効かなくなる
   (もともとここに height:auto を書いていたのが縦横比の崩れの原因でもあった)。
   max-width:100% は3系と同じく残す(親幅を超える画像はスマホで縮小させる)。
   .ec-productRole__description 配下限定なので商品メイン画像・サムネイルには影響しない。 */
.ec-productRole__description img {
  max-width: 100%;
  width: auto;
}
/* ここまで: フリーエリア向けスコープ */

/* ===== 休業案内バナー(2026-08-12追加) =====
   Block/yasumi.twig を section=3(ヘッダー)の最下部に置いている。ここは
   .ec-headerRole / .ec-categoryNaviRole のような幅の指定を持つ親が無く、
   <header> 直下にそのまま出るため、このブロック自身で幅を揃える必要がある。
   値は上の「コンテンツ幅の統一」と同じ 1150px + 左右16px(実効1118px)。
   3系も同じ .container-fluid.inner の中にバナーを置いていたので見え方は一致する。
   画像は原寸1009x66pxで、狭い画面では上の `img { max-width: 100% }` が効いて縮む。 */
.ec-yasumiRole {
  max-width: 1150px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
  text-align: center;
}