@charset "UTF-8";

/* 2026-10-19: これまで css/import.css の最後に直接書いていた指定（@import 以外の部分）をこのファイルに移した。
   ASP のページ（common/meta.asp・index.asp）は import.css を使わず、import.css の @import 9本とこのファイルを版数付きで直接読む。
   import.css（入稿ガイド dataguide/*.html 等が読む）からもこのファイルを @import しているので、どちらでも同じ指定が効く。
   ※下のコメントで「import.css」とあるのは、移す前の場所のこと。 */

.fas, .far, .fab, .fa {
  font-family: "Font Awesome 5 Free" !important;
}

.fas {
  font-weight: 900 !important;
}

/* SEO対応 2026-10-16: 商品・一覧・404 の見出しを h2 から h1 に、ヘッダーのサイト名の帯を h1 から p にした。
   見た目を変えないよう、h2・h1 のタグ名で書かれた指定（base.css・base_sp.css）と同じものをここに書く。
   ※当時は base.css 等が @import で版数なし・30日キャッシュだったため、版数付きで読み込むファイルに書いた（2026-10-19 からは base.css 等も版数付き）。対象は class="h2like"（h1 にした見出し）と p.caption（ヘッダーの帯）だけ。
   ※フリーページ（page/）は管理画面の本文や base.css に h2.page_番号 の指定（非表示など）が多数あるため h2 のまま。 */
@media screen and (min-width:740px) and (max-width: 5000px) {
#header p.caption {
    font-size: 10px;
    padding: 2px 13px;
    color: #666666;
    font-weight: normal;
    width: 1000px;
    margin: 0 auto;
}
#contents h1.h2like {
    font-size: 18px;
    color: #60483a;
    font-weight: 500;
    margin: 0 0 20px 0;
}
.sub h1.h2like {
    margin-bottom: 10px;
}
}
@media screen and (min-width:0px) and (max-width: 739px) {
#header p.caption {
    font-weight: bold;
}
#contents h1.h2like {
    font-size: 20px;
    color: #60483a;
    font-weight: 500;
    margin: 0 0 20px 0;
    font-family: 'Noto Sans Japanese';
}
}

/* 表示速度（CLS）対応 2026-10-16: トップのスライダー・カルーセルが動き出す前と後で高さが変わり、下の内容がずれていたのを防ぐ。
   どれも「動き出した後の大きさ」を、動き出す前だけ前もって確保する。動き出すと ul は .bx-wrapper の中に移るので、
   #topMain・#topItem の直下にある間（動き出す前）だけ効き、動き出した後の見た目は変わらない。
   ・#topMain（スライダー）: 動き出すまで高さ0で、読み込み完了時に PC では318px、スマホでは約143px 急に現れて下を押し下げていた
     （本番の CLS：PC 約0.17・スマホ約0.17）。PC は最小幅1200px のため高さは一定の318px、スマホはスライド画像（1000×290）の
     高さ（幅の29%）＋操作部分の23.5px。
     ※#topMain 自体に縦横比などを付けると、中の余白の扱いが変わって下の内容が23px 上がるため、直下の ul に付ける。
   ・#topItem（名入れグッズの商品カルーセル）: 動き出す前は商品が縦に全部並び（約4,400px）、読み込み完了時に1列（110px）に縮んでいた。 */
#topItem > ul.bxslider {
    max-height: 110px;
    overflow: hidden;
}
@media screen and (min-width:740px) and (max-width: 5000px) {
#topMain > ul.bxslider {
    height: 318px;
}
}
@media screen and (min-width:0px) and (max-width: 739px) {
#topMain > ul.bxslider {
    height: 0;
    padding-bottom: calc(29% + 23.5px);
}
}