@charset "UTF-8";

/* ==========================================================================
   0. すべての要素の一括指定・初期化
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


button {
    font-size: inherit;     /* 文字サイズを引き継ぐ */
    color: inherit;         /* 文字色を引き継ぐ */
    font-family: inherit;   /* フォントを引き継ぐ */
    font-weight: normal;    /* 勝手に太字になるのを防ぐ（通常の太さに） */
    background: transparent;/* グレーの背景色を透明に */
    border: none;           /* 立体的な枠線を消す */
    cursor: pointer;        /* クリック可能なカーソルに変更 */
}


h1, h2, h3, h4, h5, h6 {
    font-size: inherit;   /* 周りの文字サイズに合わせる */
    font-weight: inherit; /* 周りの太さに合わせる */
    margin: 0;         /* 余白をゼロにする */
}

small{
    font-size: inherit;     /* 文字サイズを引き継ぐ */
}


a{
    color: inherit;         /* 文字色を引き継ぐ */
    text-decoration: none;
}


img{
  max-width: 100%;     /* 親要素からはみ出さないように設定 */
  height: auto;
  object-fit: contain; /* 縦横比を維持して枠内に収める */
  display: block;      /* 下部の不要な隙間を削除 */
}


/* ==========================================================================
   1. Flexboxレイアウト設定
   ========================================================================== */

/* 子要素を横一列に並べる*/
.flex            { display: flex; }

/* 折り返して並べる */
.flex-wrap       { display: flex; flex-wrap: wrap; }

/* 縦一列に並べる */
.flex-column     { display: flex;  flex-direction: column; }

/* 縦一列で、上下の中心線を揃える */
.flex-column-justify { display: flex; flex-direction: column; justify-content:center;}

/* 縦一列で、上下左右の中心線を揃える */
.flex-column-center { display: flex; flex-direction: column; justify-content:center; align-items: center;}

/* 空きスペースを埋めるように要素を横に伸ばす */
.flex-grow       { flex-grow: 1;}

/* 横並びで、上下の中心線を揃える */
.flex-align-center { display: flex; align-items: center; }

/* 完全に真ん中（上下左右の中央）に配置する */
.flex-center     { display: flex; justify-content: center; align-items: center; }

/* 左右の両端に寄せ、間の要素を均等に分ける */
.flex-between    { display: flex; justify-content: space-between; }

/* 左右の両端に広げつつ、同時に上下の中心線もきれいに揃える */
.flex-between-center { display: flex; justify-content: space-between; align-items: center; }

/* 要素の左右に均等なスペースを空ける */
.flex-around { display: flex; justify-content: space-around; align-items: flex-start;}

/* 要素の左右に均等なスペースを空けつつ、同時に上下の中心線も揃える */
.flex-around-center  { display: flex; justify-content: space-around; align-items: center; }

/* 横並びにした要素と要素の「間」だけに指定した隙間（初期値10px）を作る */
.flex-gap        { display: flex; gap: var(--gap, 10px); }


/* ==========================================================================
   2. フォント設定
   ========================================================================== */

/* ========== 2-1. サイズ ========== */

.fz-2xl { font-size: 28px; } /* 【超々大】カタログタイトル */
.fz-xl  { font-size: 22px; } /* 【超大】カタログタイトル */
.fz-lg  { font-size: 18px; } /* 【大】サブヘッダー見出し */
.fz-mdl { font-size: 15px; } /* 【中】小見出し */
.fz-md  { font-size: 13px; } /* 【中】基本テキスト */
.fz-mds { font-size: 12px; } /* 【中】補足見出し */
.fz-sm  { font-size: 11px; } /* 【小】補足テキスト */
.fz-xs  { font-size: 10px; } /* 【極小】 */
.fz-2xs { font-size: 9px;  } /* 【超極小】 */

.font-normal { font-weight: normal; }
.font-bold   { font-weight: bold; }
.font-price   {color:#FF00FF; font-weight: bold; }


/* ========== 2-2. 色 ========== */

.fc-black  { color: #000000; } /* 漆黒 */
.fc-main   { color: #666666; } /* 基本テキスト色 */
.fc-sub    { color: #333333; } /* 補助テキスト色 */
.fc-orange { color: #ff9933; } /* アクセントオレンジ */
.fc-white  { color: #FFFFFF; } /* 白 */
.fc-red{color:#990000;}/*赤*/
.fc-red_dark{color:#C00000;}/*暗い赤*/
.fc-blue-link{color:#0006FF;}/*リンク用青#0044CC*/


/* ==========================================================================
   3. 全体の共通設定
   ========================================================================== */


/* ========== レイアウト ========== */

body {
    font-family: "Meiryo", "メイリオ", sans-serif;
    font-size: 13px;
    color: #666666;
    background-color: #EFEFE8; /* 画面全体の背景色（グレー） */
    min-height: 100vh; /* ★ height: 100% から min-height: 100vh に変更（画面ぴったりに固定） */
    display: flex;
    flex-direction: column;
}

/* 枠組みとフッター最下部固定を管理するコンテナ */
.site-wrapper {
    width: 900px; /* PC表示の幅を900pxに完全固定 */
    margin: 0 auto; /* 画面中央に配置 */
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #C0C0C0;
    border-right: 1px solid #C0C0C0;
    flex-grow: 1;   /* flex-grow: 1 で縦いっぱいに引き伸ばす */
}

/* 枠組みとフッター最下部固定を管理するコンテナ-item用 */
.site-wrapper-item {
    width: 800px;
    margin: 0 auto; /* 画面中央に配置 */
    background-color: #FFFFFF;
    display: flex;
    flex-grow: 1;   /* flex-grow: 1 で縦いっぱいに引き伸ばす */
    flex-direction: column;
}

/* ヘッダーとコンテンツの左右にのみ固定の余白（20px）を設定 */
.main-header,
.page-container {
    padding-left: 20px;
    padding-right: 20px;
}

.page-container {
    flex: 1; /* 中間コンテナを縦いっぱいに広げてフッターを最下部に押し出す */
    padding-top: 20px;    
    padding-bottom: 30px;
}


#form1 {
    display: flex;/* フォームも縦いっぱいに広げる */
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
}

/* 上下のオレンジライン */
.main-top-line,
.main-footer {
    height: 10px;
    background-color: #F79647;
    width: 100%;
    flex-shrink: 0;
}

.main-footer {
    margin-top: 3%;

}

/* ========== レイアウト・大枠 ========== */

.sub-container{
    padding: 0 20px;/*横幅をすこし詰めたレイアウト*/
}


.text-indent {
    padding-left: 1em;   /* ① 全体を文字1つ分右にずらす */
    text-indent: -1em;  /* ② 1行目の「※」だけを文字1つ分左に戻す */
}


/* ========== 共通の実行ボタン ========== */
.submit-btn {
    width: 100px;
    height: 25px;
    margin-top: 20px; /* % 指定から固定値に変更して崩れを防止 */
    color: #333333;
    background-color: #bdcee2;
    border: 1px solid #999999;
    border-radius: 5px;
    cursor: pointer;
}

.submit-btn:hover{
    opacity: 0.7;
    background-color:#FFFFFF;
} 


/* ========== 各ページのサブタイトル ========== */

.sub-title h2 {
  white-space: nowrap;
  border-right: 1px dotted #B5B5B5; /* 右側の縦点線 */
  padding-right: 14px;              /* 文字と点線の隙間 */
  margin-right: 14px;               /* 点線と右側文章の隙間 */
  line-height: 1.6;                /* 点線の高さ */
}


/* ========== 境界線の共通設定 ========== */

/* コンテンツ間の区切り線 */
hr.border-contents {
    width:100%;
    margin-top: 30px;   /* % 指定から固定値に変更して崩れを防止 */
    margin-bottom: 20px;
}

.border-dashed {
    width:100%;
    margin-top: 10px;   /* % 指定から固定値に変更して崩れを防止 */
    margin-bottom: 10px;
    border: none;
    border-top:1px #999999 dashed;
}


/* コンテンツ間の区切り線（角丸・太め） */
.border-round {
    margin-top: 10px;    /* % 指定から固定値に変更して崩れを防止 */
    margin-bottom: 20px;
    border: none;
    border-top: 6px solid #F3F3F3;
    border-radius: 10px;
    width: 100%;
}


/* 横棒つきの区切り線 */
.bordered-line {
    display: flex;
    align-items: center; 
    justify-content: center; 
    white-space: nowrap; 
    margin-bottom: 15px;
}

.bordered-line::before, 
.bordered-line::after {
    content: "";
    border-top: 1px solid #000000;
    flex-grow: 1; /* 線を自動で左右に伸ばす */
}

.bordered-line::before { margin-right: 10px; }
.bordered-line::after  { margin-left: 10px; }


/* ==========================================================================
   4. ヘッダーエリア
   ========================================================================== */

.main-header {
    padding-top: 15px;
    padding-bottom: 15px;
}

.logo {
    height: 60px;
    width: auto;
    object-fit: contain;
    display: block;
}

.header-right {
    text-align: right;
    line-height: 2.0em;
}


.login-input {
    border: 1px solid #CCCCCC;
    padding: 4px;
    width: 60px;
}

.login-btn {
    background-color: #FF9933;
    border: none;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
}

/* --- ホーム戻るリンク --- */
.link_home {
width:100%;
height:60px;
position: absolute;
top: 20px; 
left: 0px;
display:block;
cursor:pointer;
z-index:0;/*100*/
}

@media (hover: hover) {/* マウスホバーができるデバイス（PCなど）にだけ適用 */
.login-btn:hover {opacity: 0.7;}
}


/* ========== ログイン済みの表示 ========== */

#btnLogout{
    z-index:60;
    width:130px;
    height:55px;
    background-color:#F3F3F3;
    border-radius:10px;
}



/* ========== ヘッダーのメニューバー ========== */

.header-nav ul{
list-style:none;
width: 100%;
background-color: #F9F9F9;/**/
border-block: 1px solid #CCCCCC; /* 上下に細かいグレーの線 */
}

.header-nav li{
border-right: 1px dotted #CCCCCC; /* 細かいグレーの点線 */
border-bottom: 1px solid #808080; /* グレーの下線 */
/*padding: 6px 22px;*/

margin-bottom: -1px;/*線を完全に重ねる*/
text-align: center;
line-height: 2.5;
white-space: nowrap; /* 改行防止 */
width: 10%;
}

@media (hover: hover) {/* マウスホバーができるデバイス（PCなど）にだけ適用 */
 .header-nav li:hover {color: #0006FF;}
}


/* ==========================================================================
   5. 在庫確認
   ========================================================================== */

/* --- 検索条件 --- */
.stock-box {
    background-color: #d2e4f3;
    padding: 3% 5% 10%;/*上　左右　下*/
    box-sizing: border-box;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #90add0;
}

.stock-box ol {
    list-style: decimal inside;
}

.stock-box li {
    padding-top: 4px;
    padding-bottom: 4px;
}

#body_body_txtCode1,
#body_body_txtCode2,
#body_body_txtCode3,
#body_body_txtCode4,
#body_body_txtCode5,
#body_body_txtCode6
{
    width:100px;
}


/* ==========================================================================
   6. 在庫確認-サムネイル
   ========================================================================== */

.stock-thumb{
    width: 100%;
    border-bottom: 1px dotted #CFCFCF;
    padding-bottom: 3%;
    margin-bottom: 3%;
}

.stock-thumb input{
    width: 100px;/*商品画像*/
    height: 100px;
    border: 1px solid #999999;
}


.stock-thumb-spec {
    width: 180px;
    padding-left: 2%;
    margin-right: 5%;
}

.stock-thumb-price {
    width: 120px;
    margin-top: 4%;
    border-bottom: 1px solid #CFCFCF;
}


/* ==========================================================================
   7. 在庫確認-現在の在庫数 
   ========================================================================== */

#item-stock {
min-height:130px;
color:#333333;
padding:4%;
margin-top:4%;
margin-bottom:1%;
border:1px #999999 solid;
border-radius: 10px;
}


#item-stock-title > span {
font-size:120%;
font-weight:bold;
}

.zaiko{
margin-top:3%;
height:35px;
font-weight:bold;
}

.Excellent_10000{color:#0032aa;}
.Fine_9000{color:#00545e;}
.Fine_8000{color:#00545e;}
.Fine_7000{color:#00545e;}
.Fine_6000{color:#00545e;}
.Fine_5000{color:#00545e;}
.Good_5000{color:#00545e;}
.Good_4000{color:#5a7800;}
.Good_3000{color:#5a7800;}
.Good_2000{color:#5a7800;}
.Good_1000{color:#5a7800;}
.Good5000{color:#00545e;}
.Good4000{color:#5a7800;}
.Good3000{color:#5a7800;}
.Good2000{color:#5a7800;}
.Good1000{color:#5a7800;}
.NotGood_900{color:#dc5a00;}
.NotGood_800{color:#dc5a00;}
.NotGood_700{color:#dc5a00;}
.NotGood_600{color:#dc5a00;}
.NotGood_500{color:#dc5a00;}
.NotGood_400{color:#dc5a00;}
.NotGood_300{color:#dc5a00;}
.NotGood_200{color:#dc5a00;}
.NotGood_100{color:#dc5a00;}
.NotGood_0{color:#dc5a00;}
.SoldOut{color:#8c0000;}
.Call{color:#545252;}
.Foods{color:#545252;}

.subtext{
margin-top:3%;
font-weight:normal;
font-size:small;
height:auto;
line-height:normal;
}

/*追記のテキスト*/
.stock-sub {
margin-top:2%;
font-weight:normal;
font-size:small;
color:#333333;
}



/* ==========================================================================
   8. コンテンツコンテナ & サブヘッダー
   ========================================================================== */

/* --- 表紙画像 --- */
div.img_top { 
	width:350px;
	height:370px;
	margin-right:20px;
}

/*別のカタログに切り替えるボタン*/
.switch-btn {
    background: #FFFFFF;
    border: 1px solid #666666;
    border-radius: 20px;
    padding: 4px 22px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

.switch-btn:hover {
    /*background: #EEEEEE;*/
    color: #0006FF;
}

.catalog-title {
    margin-bottom: 10px;
}


/* ==========================================================================
   9. メニューボタンスタイル
   ========================================================================== */

.menu-container {
    flex: 1;/*余ったスペースを使い切る*/
}

.menu-btn {
    width: 100%;
    background: #EEEEEE;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s; /* 文字色の変化をなめらかに */
}

/* ホバー時に背景色を変える */
.menu-btn:hover {
    background: #F4F4F4;
}

/* ボタン内のアイコン共通設定 */
.menu-btn::before {
    content: "";
    flex-shrink: 0;
    background-image: var(--normal-img);
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}

/* 右端の「▼」マークを自動追従・配置 */
.menu-btn > span:last-of-type {
    margin-left: auto;
    font-size: 10px;
    color: #666666;
    transition: color 0.2s; /* 文字色の変化をなめらかに */
}

/* ホバー時にアイコン画像を切り替える */
.menu-btn:hover::before {
    background-image: var(--hover-img);
}

/* span（ボタン名と▼）をオレンジ化 */
.menu-btn:hover span {
    color: #FF9900 !important;
}

/* --- 大枠ボタン（商品検索・在庫確認） --- */
.menu-btn-large {
    height: 80px;
    padding: 0 10px;         /* 左右の余白 */
    margin-bottom: 15px;     /* ボタン同士の上下の間隔 */
}

.menu-btn-large::before {
    width: 54px;              
    height: 54px;
}

.menu-btn-large > span:first-of-type {
    width: 75px;
    flex-shrink: 0;
    transition: color 0.2s;  /* 文字色の変化をなめらかに */
}

.menu-btn-large > p {
    line-height: 1.5;
}

/* --- 下部3列グリッドコンテナ --- */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px 12px;          /* 上下の行間を15px、左右の間を12pxに設定 */
    margin-top: 20px;        /* 上の大枠ボタンとの間隔 */
}

.menu-btn-small {
    height: 54px;
    padding: 0 8px;
    white-space: nowrap;
}

.menu-btn-small::before {
    width: 38px;
    height: 38px;             
}

.menu-btn-small > span:first-of-type {
    font-weight: normal;
    color: #666666;
    transition: color 0.2s;  /* 文字色の変化をなめらかに */
}


/* ==========================================================================
   10. カタログ選択エリア & ネコイラスト
   ========================================================================== */

.catalog-wrapper {
    width: 480px;
    margin-top: 40px; 
}

.catalog-link-box {/* 各カタログのサムネイルのレイアウト枠 */
    margin-top: 20px;
}

/* 各カタログのサムネイル */
.catalog-link {
    text-align: center;
    width: 140px;
    transition: opacity 0.3s ease;/* マウスが離れる時も滑らかにするため、通常状態に指定 */
}

.catalog-link:hover {
    opacity: 0.7;
}

.catalog-link img {
    width: 120px;
    height: auto;
    display: block;
    margin: 0 auto 4px;
}


/* 「選択中」 */
.is-selected {
    display: grid; /* グリッドを起動 */
}

.is-selected > * {
    grid-area: 1 / 1; /* 中にある要素をすべて同じマス（1行目の1列目）に重ねる */
}

.is-selected div{
    background-color: #FFFFFF;
}



/* ネコイラスト付きのボックス */
.box-char {
    position: relative;
    width: 260px;
    border-radius: 10px;
    padding: 20px 15px;
    padding-right: 80px;
    border: 1px solid #999999;
    background-color: #FFFFFF;
    margin-top: 50px;
}

.box-char .bordered-line {
    margin-bottom: 10px;
}


/* ボックスからはみ出す猫のイラスト配置 */
.box-char img {
    position: absolute;
    bottom: -20px;
    right: -15px;
    width: 76px;
    height: auto;
}


/* ログイン状態による表示切り替えのデフォルト設定
.log_on {
    display: none;
} */


/* 特価品のバナー */
.sale{
    position: relative;
}

.sale img{
    margin-top: 3%;
    margin-bottom: 3%;
}

.sale a{
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    z-index: 10;
}

.sale:hover{
    opacity: 0.6;
}


/*トップ画面下_イメージイラスト*/
#img-people{
    width:70%;
    margin-left:auto;
    margin-right:auto;
    margin-top:8%;
    margin-bottom:5%;
}

#img-people img {
    width: 100%;
    height: auto;
}


/* ==========================================================================
   11. 商品検索
   ========================================================================== */

/* ========== 11-1. 左側・検索条件の入力 ========== */

/* --- 検索条件を画面内に固定 --- */
.sticky-top {
    position: relative;/*親*/
    width: 160px;
    flex-shrink: 0;/*widthの設定をキープ*/
}

.sticky {
    position: sticky;/*子*/
    top: 1.5em;
}

/* --- タイトル(検索条件) --- */
.search-tab {
    letter-spacing: 0.1em;
    padding: 4%;
    color: #FFFFFF;
    background-color: #538dd5;
    border-radius: 8px 8px 0 0;
}

.bt-reset{
    cursor:pointer;
}

/* --- 基本のbox --- */
.search-box {
    background-color: #d2e4f3;
    padding: 3% 5% 10%;/*上　左右　下*/
    box-sizing: border-box;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #90add0;
}

/* --- 基本のbox内の装飾 --- */
.search-ttl{
    width: 100%;
    border-left: 4px #538dd5 solid;
    padding-left:3%;
    margin-bottom:6%;
    font-weight:bold;
    margin-top:3%;
}

div.img_search { 
    width:80px;
    height:113px;
    margin-bottom:10px;
}


/* --- 入力フォーム --- */
.search-input{
    width: 100%;
    height: 30px;
    /*padding: 5% 0 2% 2%;*/
    border: 1px solid #999999;
    background-color: #FFFFFF;
    cursor: pointer;
    position: relative;
    padding-left: 2%;
}

#body_body_pagePanel .search-input {
    width: 50%;/* 横幅50%の調整用クラス */
}

#body_body_PricePanel .search-input {
    width: 38%;/* 横幅38%の調整用クラス */
    text-align: right;
}


/* --- ページ検索の入力欄 --- */
.input_page{
    width:70px;
    height:25px;
    margin-bottom: 16px;
}

/* --- 検索ボタン --- */
.search-btn {
    border: 1px solid #999999;
    background-color: #BDCEE2;
    width: 100px;
    height: 25px;
    border-radius: 5px;
    cursor: pointer;
    margin: 10% 0;
}

.search-btn:hover {
    opacity: 0.7;
    background-color: #FFFFFF;
}

/* --- カテゴリの入力欄 --- */
.search_category {
    position: relative;
}

/* カテゴリ未選択の表示（通常は非表示） */
#none_category {
    display: none;
    color: #999999;
}

/* 選択中を示すアイコン */
#ic_category {
    display: none;
    float: left;
    margin-right: 2%;
}


/*コード・品名の入力欄*/
#body_body_KeywordPanel{
    text-align: center;
}


/* 価格帯の入力欄 ASP.NET 自動設定の上書き */
#body_body_PricePanel{
    width: 100%;
    text-align: center;
}

#body_body_PricePanel div{
    white-space: nowrap;
}

/* ほかの条件を指定 */
.search-chk {
    width: 100%;
    padding: 4%;
    line-height: 1.8;
    background-color: #fff;
    border: 1px solid #90add0;
    border-radius: 5px;
}

/* 関連リンク */
#link_others {
    color: #333;
}

.link-title {
    margin-top: 10%;
    /* font-size: 1rem; 文字の大きさは元の標準サイズを維持 */
    /*font-weight: normal;*/
}

#link_others a {
    color: #475ed3;
    text-decoration: underline;
    /*cursor: pointer;*/
}

.box_etclink {
    padding: 2%;
    background-color: #fff;
    border-bottom: 1px dashed #cbcbcb;
    font-size: small;
}

.box_etclink img {
    width: 10px;
    height: 10px;
    margin-right: 4px;
}




/*社名*/
#customer{
font-size:90%;
line-height:1.8em;
margin-top:50px;
}

#customer a{
text-decoration:underline;
color:#475ed3;
}


/* ========== 11-2. 右側・検索結果の表示スペース ========== */

/* --- 並び順を変更 --- */
#search-sort{
    text-align:right;
}

/* --- 最初の表示画像 --- */
.img_first_screen{
    width: 100%;
    height:auto;
    margin-bottom: 2%;
}


/* ==========================================================================
   12. 商品検索-カテゴリのモーダル表示
   ========================================================================== */

/* ASP.NET ラジオボタンリストのレイアウト */
#body_body_optCategory {
  display: flex;
  flex-direction: column;
}

#body_body_optCategory ul {
  padding-left: 0;
  margin: 0;
}

#body_body_optCategory li {
  list-style: none;
}

/* モーダル本体（外側の背景：画面全体を覆う） */
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  
  /* 初期状態は非表示 */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* モーダル表示時（activeクラス付与時） */
.modal-container.active {
  visibility: visible;
  opacity: 1;
}


/* ★モーダル枠：中央の白いコンテンツエリアを基準に配置★ */
.modal-body {
  width: 90%;
  max-width: 240px;
  box-sizing: border-box;

  position: absolute;
  top: 50%;                     /* 画面の上から50%の位置 */
  transform: translateY(-50%);  /* 綺麗な上下中央にする */
  
  left: calc(50% - 450px + 195px); 
  /* 
    【解説】
    1. 「50%」で一度画面の真ん中に。
    2. そこから白いエリアの左端（-450px）まで戻します（※全体の幅が900px想定）。
    3. 検索条件エリアの幅（+210px）を進めることで、右隣に並びます。
  */
}

/* モーダルを閉じるボタン */
.modal-close {
  width: 100%;
  padding: 8px 12px;
  font-size: medium;
  color: #fff;
  background-color: #4a7dff;
  border: 3px solid #4a7dff;
  border-radius: 10px 10px 0 0;
  text-align: right;
  cursor: pointer;
  box-sizing: border-box;
}

/* モーダル内のコンテンツ（ラジオボタン側） */
.modal-content {
  width: 100%;
  padding: 12px;
  line-height: 1.5;
  text-align: left;
  background: #fff;
  border: 3px solid #4a7dff;
  border-radius: 0 0 10px 10px;
  box-sizing: border-box;
  white-space: nowrap;
}


/* ==========================================================================
   13. 商品検索-サムネイル
   ========================================================================== */

.item-thumb{
width: 150px;
border-bottom:1px #CDCDCD solid;
}

/* --- 基本box --- */
.item-img{
display: grid;
width: 140px;
margin-left: auto;
margin-right: auto;
}

/* --- 画像 --- */
.item-img input{
grid-area: 1 / 1;
place-self: stretch;/*上下100%*/
width: 100%;
height: 100%;
}

/* --- アイコン --- */
.item-ic{
grid-area: 1 / 1; 
place-self: end end;
gap:4px;
}

.ic-sold { 
grid-area: 1 / 1;
color:#F00;
text-align:center;
font-size:x-small;
width:100%;
height:100%;
background-color: #FFFFFF;
opacity: 0.7;
}

.ic-sold span{
font-size:small;
}

/* --- 商品名 --- */
.item-name{
line-height: 1.4;
height: 2.8em;
letter-spacing: 0.1em; 

overflow: hidden; 
display: -webkit-box; 
-webkit-box-orient: vertical; 
-webkit-line-clamp: 2;/*2行で見切れるように制限。高さも固定です*/

}

.border-item {
width:100%;
margin-top:1%;
border: none;
border-top:1px #CDCDCD dashed;
}

/* --- 価格 --- */
.item-price{
height: 25px;/*20px*/
}

.item-info{
gap:4px;
}


/* ==========================================================================
   14. 商品検索-カタログ誌面
   ========================================================================== */

.box-book{
    width:100%;
    height:auto;
    text-align:center;
    margin-top:6%;
}

.box-book img{
    width:40%;
    border:1px #999 solid;
    cursor:pointer;
}

.box-book-page{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    margin-top:2%;
}

#page-left{
    padding-right:18%;/*位置の微調整*/
}

.this-page{
    height: 30px;
    margin-top: 6%;
}



/* ==========================================================================
   15. 各コンテンツ
   ========================================================================== */

/* ========== 15-1. 注文書 ========== */

.order-img{width: 280px;}
.order-ic{
    width: 24px;
    height: auto;
    margin-right: 8px;
    flex-shrink: 0;
}


/* ========== 15-2. お知らせ ========== */

.info-box>div{
    border: 1px solid #999999; /* 1pxの枠線を四方に設定 */
    background-color: #FFFFFF; /* 背景色で枠線のダブりを消す */
    margin-left: -1px;        /* 1pxずつ左に重ねて、隣り合う線のダブりを相殺 */
}

/* 一番左端の要素だけは重ねる必要がないのでリセット */
.info-box>div:first-child {
    margin-left: 0;
}

.info-box dfn{
    background-color: #EEEEEE;
    line-height: 30px;
    text-align: center;
    font-style: normal;              /* dfn本来の斜体を標準に戻す */
    border-bottom: 1px solid #999999; /* 見出しと中身の区切り線 */
}

.info-box>div>span {
    padding: 10px; /* 内側余白を設定 */
}

/* 画像エリアを可変にし、画面幅が狭まっても他の固定幅を潰さない設定 */
.image{
    flex-basis: 300px; /* 初期幅を持たせつつ、余白に合わせて伸縮 */
}

/* 画像が枠線からはみ出さず、縦横比を維持して綺麗に収まる設定 */
.image img{
    max-width: 100%;
    height: auto;
    display: block;
}

/* 画像列以外は固定幅にする */
.day{width:70px; flex-shrink: 0;}
.page{width:70px; flex-shrink: 0;}
.itemname{width:200px; flex-shrink: 0;}


/* ========== 15-3. 包装について ========== */

/* 包装・発送の説明ボックス全体 */
.paper-box {
    /*background-color: #f9f9f9;*/
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    overflow: hidden; /* 角丸を子要素にも適用させる */
    margin-bottom: 30px;
}

/* 左側のグレーの見出しラベル部分 */
.paper-box h3 {
    width: 140px;
    background-color: #EEEEEE;
    border-right: 1px solid #CCCCCC;
    flex-shrink: 0;
    padding: 15px 10px;
    margin-right: 10px;
}

.price-retail {
    font-size: 15px;
    color: #666666;
    margin-left: 5px;
}


/* 包装紙のサムネイル */
.thumb-box {
    text-align: center;
    /*width: 150px;*/
}

.thumb-box img {
    width: 150px;
    height: auto;
    display: block;
    margin: 6px auto 8px;
}


/* ========== 15-4. 各種の資料 ========== */

.list-link{
    display: grid;
    grid-template-columns: auto 1fr;/* 2列のグリッドを作る*/
    align-items: center;
}

.list-ic{grid-column: 1; grid-row: 1;}/* 1列目・1行目に配置 */
.list-title{grid-column: 2; grid-row: 1; margin-left: 7px;}
.list-text {margin-left: 18px;}


/* ========== 15-5. 商品動画 ========== */

#box_video{
    width:100%;
    height:100%;
    background-color:#000000;
    display: flex;
    justify-content:center;
    align-items:center;
}

#box_video video{
    max-height: 96vh;
    max-width: 96vw;
}



/*動画サムネイル*/
.movie-thumb {
    background-color:#F2F2F2;
    width:170px;
    height:150px;
    border: 1px solid #999999;
    cursor:pointer;
    text-decoration:none;
    text-align:center;
    border-radius: 5px;
    padding: 8px;
    margin-bottom: 10px;
}


.movie-thumb img {
    width:100%;
    border: solid 1px #999999;
    border-radius: 5px;
}


.movie-thumb span {
text-align:left;
}



/* ==========================================================================
   16. 商品情報
   ========================================================================== */


/* ========== 16-1. 画像・在庫数・スペック ========== */

.item-box{
    padding: 0;/*リセット*/
}

#item-title {
    position: relative;
    width: 100%;
    height: 43px;
    line-height: 43px;
    margin: 20px 0 3%;
    background-color: #ffe3c8;
    border: 1px solid #cccccc;
    border-left: 5px solid #f79646;
}

#item-title p {
    /*font-size: 150%;*/
    font-weight: bold;
    padding-left: 2%;
}

.bt-item-close {
    position: absolute;
    top: 0;
    right: 2%;
    font-size: small;
    cursor: pointer;
}

.bt-item-close:hover {
    color: #0006ff;
}

/*商品画像*/
#ItemImage{
	width:400px;
	height:auto;
	border: solid 1px #999999;
}


.item-stock-title span{
    font-weight: bold;
}

/*商品スペック*/
.item-spec-price {
	height:30px;
    line-height: 30px;
	margin-bottom:7%;
}

#item-price {
    margin-left: 8px;
}

.print-inc{/*プリント代込　初期設定*/
    display: none;
}


/*セールスポイント*/
#item-point{
    line-height: 1.8em;
    margin-bottom: 7%;
}


/*臨時注意文*/
#extra-text {
    height:auto;
    display:flex;
    align-items:center;
    font-weight:bold;
    color:#ff0000;
    line-height: 2.1; 
    margin-bottom: 6%;
}


/* 商品スペック_table */
.spec-table {
    width: 360px;/*100%*/
    border-top: 1px solid #ccc;
    border-collapse: collapse; /* 枠線の重複を防ぐ */
}

.spec-table th, 
.spec-table td {
    padding: 5px 0;
    border-bottom: 1px solid #ccc;
    text-align: left;
}

.spec-table th {
    font-weight: bold;
    width: 30%; /* 左側（見出し）の幅 */
}

.spec-table td {
    padding-left: 10px; /* 見出しとの間の少しの隙間 */
}


/* ========== 16-2. 関連商品のご提案 ========== */

.related-box{
    padding-top: 2.5%;
    padding-bottom: 6%;
}

#related-item {
    position: relative;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}


.swiper-container {
    width: 668px;/*668*/
    height: 255px;
}

.swiper-pagination{
    top: 270px;
}

/*
.swiper-button-prev,.swiper-button-next {
    height:60px;
    width:50px;
    top:20px;
}
*/

/* ========== 16-3. 名入れの推奨例 ========== */

/* 名入れの推奨例 */
#NairePanel,#NairePanelODG,#NairePanelLaser {
    width:100%;
    margin-bottom:8%;
}

.name-img-box{
    width:200px;
}

/*名入れサムネイル画像*/
.name-img-thum {
    width:60px;
    height:60px;
}

.name-img-thum img{
    border: 1px solid #666666;
    width:80%;
}

/*名入れ画像*/
#ItemImageNaire,#ItemImageNaireOGD,#ItemImageNaireLaser{
border: #999999 solid 1px;
width: 140px;
height:140px;
}


/* ========== 16-4. 商品動画 ========== */

.mv-box video {
    width: 50%;
    aspect-ratio:16/9; 
    padding-right:4%;
}

.mv-button > div{
    align-items: center;
}

.mv-button img{
    width:50px;
    height:auto;
}

.down-qr{
    width:180px;
    height: 40px;
    margin-top:6%;
    border-radius: 20px;
    color:#333;
    border:1px #666 solid;
    cursor:pointer;
    transition: background-color 0.2s ease; /* ホバー時の変化を滑らかに */
}

.down-qr:hover{
   background-color:#ccc;
}


/* ========== 16-5. 小見出し ========== */

/* 小見出し */
.item-subttl,
.naire-subttl {
    height: 28px;
    line-height: 28px;
    border-bottom: 1px #FF9933 solid;
    margin-top: 6%;
    margin-bottom: 3%;
}

/* 文字の前にCSSで四角形を挿入する */
.item-subttl::before,
.naire-subttl::before {
    content: "";        /* 空の要素を作る */
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #FF9933;
    margin-right: 8px;  /* ■ と 文字の間の余白 */
    margin-bottom: 2px; /*微調整*/
    flex-shrink: 0;     /* 改行時に四角形がつぶれるのを防ぐ */
}

.item-subttl span,
.naire-subttl span {
    font-weight: bold;
}

.item-subttl a,
.naire-subttl a {
    font-weight: normal;
}

/* 関連リンク（ツリー表示部分など）
.item-subttl-tree {
  font-size: small;
  font-weight: bold;
  color: #0044cc;
  cursor: pointer;
  text-decoration: underline;
  margin-top: 10px;
}
 */

/* ========== 16-6. footer ========== */
#item-footer{
text-align:right;
height:80px;
width:800px;
margin-top:70px;
margin-left:auto;
margin-right:auto; 
background-color:#ffe3c8;
padding-left:2%;
padding-right:2%;
position: absolute;
bottom: 0;
right:0;
}

#item-footer div{
font-size:small;
width:200px;
margin-left:auto;/*←右寄せにするため*/
/*float:right;*/
/*padding-top:33px;*/
/*padding-right:25px;*/
cursor:pointer;
}

#item-footer div:hover {/*マウスをのせたとき*/
color:#0006ff;
}

#item-footer img{
margin-left:5px;
display:block;
float:right;
line-height:-10px;
}


/* ==========================================================================
   17. 画像ダウンロード_見直し版
   ========================================================================== */

/*商品コードの入力*/
.input-down {
    height: auto;/*100px*/
    padding: 2% 4%;
    background-color: #f4f4f4;
}

.input-down div {
    margin-top: 2%;
}


/*案内書の検索結果の表示*/
.box-down{
    text-align: center;
    margin-bottom: 6%;
}

/*ライセンス商品の専用表示*/
.license-box{
    height: 200px;
}


/*注意書き*/
.down-read p {
    margin-top: 2%;
    font-weight: bold;
}

.down-read ul {
    font-size: 80%;
    margin-left: 2%;
}



/* ========== 17-1. 見出し ========== */

.ttl-down {
    border-bottom: 1px #f79646 solid;
    margin-top: 1.5%;
    margin-bottom: 1.5%;
    display: inline-block;
    width: 100%;
}

.ttl-down h4 {
    width: 126px;
    height: 40px;
    color: #FFF;
    margin-right: 1%;
    text-align: center;
    line-height: 40px;
    float: left;
    background-color: #f79646;
    letter-spacing: 2px;
}

.ttl-down div {
    line-height: 40px;
    white-space: nowrap;
}

.link-down-info{/*画像データについて*/
    float:right;
    text-align:right;
    font-weight:normal;
    font-size:small;
    text-decoration:underline;
}


/* ========== 17-2. 案内書 ========== */

.img-pdf{
width:100px;
height:70px;
padding-top:5px;
padding-left:3px;
margin-bottom:8%;
background-image: url(/img/img_pdf.jpg);
background-size:cover;
}


/* ========== 検索結果テーブル ========== */

#body_body_TableResult {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}


/* ========== 17-3. サムネイル ========== */

.thum-down {
    width: auto;/*100%*/
    margin-bottom: 30%;
}



/* ==========================================================================
   18. カタログ切替　モーダルウィンドウ
   ========================================================================== */

.modal{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index:100;
}

.modal_content{
    background: #FFFFFF;
    /*padding: 40px;*/
    padding: 40px 40px 40px 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border: 1px #999 solid;
	border-radius: 10px;
}


.modal_content>img{/*閉じるボタン*/
    display: block;
    margin-left: auto;
    margin-top: -20px;/*-15px*/
    margin-right: -15px;
    width: 20px;
    height: auto;
}

.modal_bg{
    background: rgba(255,255,255,0.0);
    inset: 0;	/*上下左右　0*/
    position: absolute;
}


/* ==========================================================================
   19. ハテナマークのアイコン･ツールチップ
   ========================================================================== */

/* ハテナマークのアイコン */
.help-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  color: #666666;
  font-weight: bold;
  font-size: 11px;
  background-color: #FFFFFF;
  border: solid 1px #666666;
  border-radius: 50%;
  cursor: pointer;
}


/* ========== ツールチップ（共通デザイン） ========== */

/* 全体の配置 */
.tooltip-1,
.tooltip-2 {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.tooltip-1 > div,
.tooltip-2 > div {
  cursor: pointer;
}

/* 吹き出し本体（共通） */
.tooltip-1 > span,
.tooltip-2 > span {
  position: absolute;
  right: -5px;        /* 横位置をpxで指定 */
  display: block;
  padding: .5em 1em;
  color: #333333;
  white-space: nowrap;
  background-color: #FFFFFF;
  border: solid 1px #333333;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 三角の部分（共通） */
.tooltip-1 > span::before,
.tooltip-2 > span::before {
  position: absolute;
  top: -5px;               /* 半分だけ上に飛び出させる */
  right: 80px;              /* 横位置調整 */
  width: 8px;
  height: 8px;
  content: '';
  background-color: #FFFFFF;  /* 吹き出し本体と同じ白 */
  border-top: solid 1px #333333;  /* 上側と左側だけに枠線をつける */
  border-left: solid 1px #333333;
  transform: rotate(45deg);    /* 45度回転させて「▲」の形にする */
}


/* ========== ツールチップ01（個別設定：ホバーで表示） ========== */

.tooltip-1 > span {
  top: 50px;          /* 縦位置をpxで指定 */
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s;
}

/* ホバー時に表示 */
.tooltip-1:hover > span {
  visibility: visible;
  opacity: 1;
}


/* ========== ツールチップ02（個別設定：常時表示・低階層） ========== */

.tooltip-2 > span {
  top: 26px;          /* 縦位置をpxで指定 */
  z-index: 50;        /* tooltip-1より下階層にする */
}


/* ==========================================================================
   20. 表示・非表示のまとめ
   ========================================================================== */

.choice-catalog{display:none;}/*カタログ選択中_初期表示*/




/* ==========================================================================
   99. レスポンシブ対応（タブレット・スマホ向け）
   ========================================================================== */

/*あとで考える*/