@charset "euc-jp";
@import url("header_2024.css");

/* itemページのheader*/
header > .posi-rlt  { max-width: 1200px;}

/* ナビプラス */
#naviplus { left: 180px;}

/* 買い物カゴ */
header .cart { right: 80px; width: 98px;}
header .cart::after { display: block;}

@media screen and (max-width:799px) and (min-width:700px){
    header .cart { right: 65px;}
}


/* ハンバーガーボタン(PC・タブレット用) */
#nav-btn { right: 20px;}


/**============================================================================================**/
main { 
    position: relative; 
    max-width: 1200px; font-size: 14px; line-height: 1.5em;}

h2,
h3 { 
    box-sizing: border-box; height: 30px; margin: 0 0 10px; padding: 5px 0 0 10px;
    border-left: solid 5px #004885;
    color: #004885; font-size: 16px; line-height: 1.4em;}
    
.load { max-width: 1000px;}    

/* パンクズリスト */
#pankuzu { overflow-x: visible; margin:0 0 10px; padding: 0;}

#pankuzu > div { display: table; padding: 0;}
#pankuzu > div > * { display: table-cell; vertical-align: top;}

#pankuzu p:nth-of-type(2) { display: none;}

@media screen and (max-width:1024px){
    #pankuzu { padding:5px 0; overflow-x: scroll;}
    #pankuzu div {display: inline-block;}

    #pankuzu > div { display: block; padding: 5px 0 0;}
    #pankuzu p:nth-of-type(1) { display: none;}
    
    #pankuzu .home,
    #pankuzu p:nth-of-type(2) { display: inline;}
}
/**============================================================================================**/

/**============================================================================================**/
/* カラム設定 */
article.lf { width: 58.33%;}
article.rf { width: 39.16%; margin: 0 0 30px}

/*  */
article.lf section { margin: 0 0 30px;}

@media screen and (max-width:699px){
    article.lf section { margin: 0 0 20px;}
    
    article.lf,
    article.rf { float: none; width: 100%;}
}

article.rf + hr.clb { 
    visibility: visible;
    margin: 0 0 30px;
    border: solid #6d6d6d; border-width: 1px 0 0;}

/**============================================================================================**/

/**============================================================================================**/
/* 画像・動画 */
#img .slick-slide img,
#mv .slick-slide img { width: 100%; max-width: 700px; max-height: 700px;}

/* 画像説明・動画説明 */
.item-img p,
.item-mv p {
    display: table; table-layout: fixed;
    box-sizing: border-box; width: 100%; margin: 20px 0; padding: 10px; 
    border-radius: 6px; background: #565656;
    color: #FFF;}
    
.item-img p::before,
.item-mv p::before {
    content: '説明';
	display: table-cell; box-sizing: border-box; width: 40px; padding: 0 10px 0 0;
    border-right: solid 1px #FFF; 
    color: #ff0; vertical-align: top;}

.item-img p span,
.item-mv p span {display: table-cell; padding: 0 0 0 10px;}




/* サムネイル */
.thumbnail-img,
.thumbnail-mv { font-size: 0;}

.thumbnail-img p,
.thumbnail-mv p {
    display: inline-block;
    box-sizing: border-box; width: 60px; margin: 0 10px 10px 0; 
    border: solid 1px #7f7f7f;
    transition: all 0.4s;}
    
.thumbnail-img p:hover,
.thumbnail-mv p:hover {opacity: 0.7;}

.thumbnail-img img,
.thumbnail-mv img { cursor : pointer;}

@media screen and (max-width:999px){
.thumbnail-img p,
.thumbnail-mv p { width: 50px; margin: 0 5px 5px 0;}
}

@media screen and (max-width:699px){
.thumbnail-img,
.thumbnail-mv { display: none;}
}



/* ナビゲーションボタン */
.item-img .prev,
.item-mv .prev,
.item-img .next,
.item-mv .next {
    position: absolute; top: 50%; z-index: 1;
    width: 25px; height: 25px; margin: -13px 0 0;
    text-indent: -9999px; cursor: pointer;}

.item-img .prev,
.item-mv .prev {
    left: 5px;
    background: url("../images/slick-prev.png") no-repeat;
    background-position: center center;}

.item-img .next,
.item-mv .next {
    right: 5px;
    background: url("../images/slick-next.png") no-repeat;
    background-position: center center;}

/* ドットナビゲーションボタン */
ul.slick-dots { margin: 0; font-size: 0; text-align: center;}
ul.slick-dots li {display: inline-block; margin: 0 5px 5px; padding: 0;}
ul.slick-dots button {
    text-indent: -9999px;
    display: block; width:10px; height:10px; margin:0; padding: 0;
	border: none; border-radius: 5px; outline: 0;
	background: #c6c6c6;}
    
.slick-dots li.slick-active button {background: #000;}

/* 動画 */
.item-mv li div { position: relative; overflow: hidden; width:100%; height: 0; padding: 0 0 56.25%; margin:0 0 15px;}
.item-mv iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


/**============================================================================================**/

/**============================================================================================**/
#base-data { margin: 0 0 30px;}

/* ブランド・品名（PC） */
#base-data h1 p:first-child { margin: 0 0 15px; font-size: 16px; line-height: 1.5em;}
#base-data h1 p:last-child { font-size: 14px; font-weight: normal;}

/* ブランド・品名（スマホ） */
#img > strong  { display: none;}


@media screen and (max-width:699px){
    #base-data { margin: 0 0 20px;}

    /* ブランド・品名（PC） */
    #base-data h1 p:first-child { display: none;}
    
    /* ブランド・品名（スマホ） */
    #img > strong { 
        display: block; 
        margin: 0 0 15px; 
        font-size: 14px; line-height: 1.5em;}
}

/**========================================**/
#price { 
    margin: 0 0 30px; padding: 10px;
    border: solid 1px #ccc;}
    
#price .n-price,
#price .sale,
#price .price { color: #ee0000;}

/* ネオプライス価格・（税込） */
#price .n-price { font-size: 18px; font-weight: bold;}
#price .n-price * { font-size: 14px;}


/* セール名・セール価格 */
#price .sale,
#price .price { margin: 0 0 10px; color: #EE0000; font-weight: bold;}

/* セール名 */
#price .sale { font-size: 16px;}

/* セール価格 */
#price .price { font-size: 30px; text-align: right;}
#price .price * {font-size: 0.6em;}

/* セール期間 */
#price .date {margin: 0 0 5px; font-size: 13px;}

/* セール条件 */
#price .terms {color: #000; font-size: 13px;}

/* 獲得予定ポイント */
#price .point {  margin: 10px 0 0;}

/* ショッピングモール */
#price .shoppingmall { margin: 15px 0 0; padding: 15px 0 0; border-top: solid 1px #ccc;}

#price .shoppingmall p {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    position: relative; 
    height: 30px; margin: 10px 0 0; padding: 0 0 0 50px;}
    
#price .shoppingmall p::before {
    content: '';
    position: absolute; top: 0; left: 10px;
    width: 30px; height: 30px;}
    
    
#price .shoppingmall p.rakuten::before { 
    background: url("../images/ec_rakuten.webp");
    background-size: 100% auto;}
    
#price .shoppingmall p.yahoo::before { 
    background: url("../images/ec_yahoo.webp");
    background-size: 100% auto;}
/**========================================**/

/* 送料 */
#postage { margin: 0 0 30px;}
#postage > .dis-ilblk { font-size: 13px;}

#postage > .dis-ilblk strong,
#postage select,
#postage span,
#postage > .dis-ilblk a { display: inline-block; margin: 0 0 15px;}

#postage select { margin: 0 10px 15px; padding: 3px; font-size: 16px;}
#postage span { margin: 0 10px 15px 0; font-size: 14px;}
#postage .soryo {font-weight: bold;}


#postage strong.fs_16 { margin: 0 10px 15px 0; color: #ee0000;}

/**========================================**/
/* 送料について（common/item/2024/postage01.html） */
#postage01 .modal-content { font-size: 14px;}

#con8 strong { display: block;}

#con8 > strong {
    margin: 0 0 20px; padding: 7px;
	background: #004885;
	color: #fff; font-size: 18px; line-height: 1.5em;}

#con8 .asterisk { position: relative; padding: 0 0 0 18px;}
#con8 .asterisk::before { content:'※'; position: absolute; top: 0; left: 0;}

#con8 img { 
    display: inline-block; 
    max-width: none; margin: 0 5px; vertical-align: middle;}

#con8 li { position: relative; margin: 5px 0; padding: 0 0 0 18px;}
#con8 li::before { content:'・'; position: absolute; top: 0; left: 0;}

#con8 table { margin: 0 0 10px; border-color: #888; border-collapse: collapse;}
#con8 th { font-weight: 400; text-align: left;}
#con8 tr:first-of-type th,
#con8 th:first-of-type { background: #e6e6fa; text-align: center;}

#con8 .dis-ilblk { margin: 5px 15px 5px 0;}


#postage01 a.modal-close { display: none;}

/**========================================**/
/* 在庫表示 */
.SzaikoList {margin: 0 0 20px;}
.SzaikoList p.fw_b { margin: 0 20px; padding: 10px 20px; border: solid 1px #333; font-size: 16px; line-height: 1.0em;}

/* 入荷予定 */
.SzaikoList .dis-tbl > * { display: table-cell; vertical-align: middle;}

/* 在庫状況 */
.SzaikoList .posi-rlt { font-size: 0;}
.SzaikoList .posi-rlt > *:not(.dis-non),
.SzaikoList .posi-rlt > * p { display: inline-block; font-size: 14px; vertical-align: middle;}

/* 在庫状況 MATRIX3 */
.SzaikoList table {
    margin: 5px 0 0;
    border-collapse: collapse;
    font-size: 12px; line-height: 1.3em;}

.httl {color: #FFF;}

/* 表示説明 */
#description div { padding: 8px 0; font-size: 14px; line-height: 1.8em;}


/* アコーディオン
.SzaikoList .accordion { position: relative; margin: 0; padding: 0;}

.SzaikoList label {
	display:inline-block; position: relative;
    font-size: 12px; line-height: 1; text-decoration: underline; cursor: pointer;}

.SzaikoList label:hover {color: #0066cc;}

.SzaikoList #description { 
    display: block; position: absolute; z-index: 1; left: 0;
    width: 100%;
    background: #f0f0f0; }
.SzaikoList #description p {
	overflow-y: hidden; 
	width:auto; max-height: 0; padding:0; border:none;
    font-size: 12px; font-weight:lighter; text-align:left; line-height: 1.5em;
	transition: all 0.5s;}

#display-info:checked ~ label[for="display-info"]::after,
#display-info1:checked ~ label[for="display-info1"]::after {
	content: '×'; 
    position: absolute; top:-3px; right: -22px;
	width:auto; height:auto; border: none;
	color: #4A7A7E; font-size: 16px; font-weight:bold;}

#display-info:checked ~ #description p,
#display-info1:checked ~ #description p { max-height: 150px; padding: 5px 10px; opacity: 1;}
 */
/**========================================**/
/* WEBメモ */
.web-memo {margin: 5px 0 0; color: #FF4000; font-size: 14px;}

/**========================================**/
/* 注意マーク */
#marks { position: relative; padding: 0 0 0 80px; font-size: 0;}
#marks span { 
    position: absolute; top: 10px; left: 0; 
    color: #ee0000; font-size: 12px;}

#marks a {
    display: inline-block; position: relative; 
    margin: 10px 15px 0 0; padding: 0 18px 0 0; 
    vertical-align: top;}
    
#marks a:hover {opacity: 0.7;}
#marks a::after {
    content:''; 
    display: block;  position: absolute; bottom: 0; right: 0;
    width: 15px; height: 15px;
    background: url(../images/icon/plus-icon_w15.gif);}

#marks .load {font-size: 14px; line-height: 1.5em;}


/**========================================**/
/* 商品を選択して下さい（グループ品番用） */
#cartlink select {
    display: block;
    box-sizing: border-box; width: 100%; max-width: 324px; margin: 0 auto 25px; padding: 12px 5px; 
    border-radius: 5px;
    background: #fffcbc; 
    font-size: 16px; }    

/* 商品点数 */
#cartlink .post { 
    box-sizing: border-box; max-width: 360px; margin: 40px 0 0; padding: 25px 5px; 
    border: solid 1px #c20005;}
    
#cartlink form .dis-tbl { margin: 0 auto 25px;}
#cartlink form .dis-tbl > * { display: table-cell; vertical-align: middle;}
#cartlink form .dis-tbl > p:nth-of-type(1) {width: 70px;}
#cartlink form .dis-tbl > p:nth-of-type(2) {width: 65px;}
	
#cartlink input[type="text"] {box-sizing: border-box; width: 50px; height: 34px; font-size: 16px;}

#cartlink form a {   
    display: inline-block; box-sizing: border-box; padding: 6px 10px 0;
    border: solid 1px #666; border-radius: 4px;
    color: #666; text-decoration: none; vertical-align:middle;
}
#cartlink .up,
#cartlink .down {height: 34px; font-size: 18px;}

/* カートに入れる */
#cartlink .Scart,
#cartlink input[type="submit"] {
    box-sizing: border-box; max-width: 220px; height: 38px; margin: 0 auto; padding: 11px 0 0;
    border-radius: 5px; background: #c20005;
    color: #fff; font-size: 16px; font-weight: bold; line-height: 1.0em; text-align: center;
    cursor: pointer;
    transition: all 0.4s;}

#cartlink .Scart:hover,
#cartlink input[type="submit"]:hover { opacity: 0.7;}


/* 注文に進む */
#cartlink input[type="submit"] {
    display: block;
    width: 100%; padding: 3px 0 0;
    border: none; outline: none;}

/* ショッピングローン */
#loan { margin: 30px 0 0;}
#loan input[type="submit"] {
    display: block;
    width: 100%; max-width: 330px; height: 0; margin: 0; padding: 54.54% 0 0;
    background: url("../images/shoppingLoan_w330.webp") no-repeat;
    background-size: 100% auto;
    border: none; outline: none;}


/* ヒッチメンバーは代金引換がご利用できません。（23100004、23100005用） */
#cartlink .asterisk {position: relative; margin: 25px 0 0; padding: 0 0 0 20px; font-size: 12px; font-weight: bold;}
#cartlink .asterisk:before {content:'※'; position: absolute; top: 0; left: 4px;}

/* SOREXヒッチメンバー納期について */
#cartlink .info-srx {
	margin: 0 0 20px; 
	font-size:14px; line-height:1.5em;}

#cartlink .info-srx strong {font-size:16px; line-height: 1.8em;}

#cartlink .info-srx .dis-tbl_tab { margin: 5px 0 0;}
#cartlink .info-srx .dis-tbl_tab > * { display: table-cell;vertical-align: middle;}
#cartlink .info-srx .dis-tbl_tab p {
    width: 28px; padding: 0 5px; 
    background: #FF0004; 
    color:#FFF; font-weight:bold; text-align: center;}
    
#cartlink .info-srx .dis-tbl_tab li { position: relative; padding: 2px 0 2px 25px;}
#cartlink .info-srx .dis-tbl_tab li::before {
    content: '';
    display: block; position: absolute; top: 6px; left: 10px;
    width: 8px; height: 8px;
    background: #000;}


/* 地域や条件によりご注文を承ることが出来ない場合がございます。（23900003 トレーラー用） */
/* この商品は一般のお客様への販売を行っておりません。（23900004 業販専用商品用） */
#cartlink .info-trailer,
#cartlink .info-retailer { padding:15px 5px; border:solid #ee0000 2px; line-height: 1.8em;}

#cartlink .info-trailer a,
#cartlink .info-retailer a { display: inline-block; position: relative; margin: 0 0 0 16px;}

#cartlink .info-trailer a::before,
#cartlink .info-retailer a::before {
	position:absolute; top: 7px; left: -13px;
	width:0; height:0;
	border-style: solid; border-width: 6px 0 6px 9px;
	border-color: transparent transparent transparent #ee0000;
	content:'';}

/**========================================**/
/* この商品のバリエーション */
#variation .dis-ilblk { min-width: 240px; padding: 10px; background: #eee; }
#variation .dis-ilblk > strong { display: block; padding: 5px 0 3px 5px; border-left: solid 8px #000; font-size: 16px;}
#variation .dis-ilblk > p { margin: 10px 0 0; font-size: 14px; font-weight: bold;}

#variation li { margin: 10px 0 0; padding: 0 5px 5px;}
#variation li:nth-of-type(1) { margin: 5px 0 0;}
#variation a { display: block; position: relative; padding: 0 0 0 0px;}

/**============================================================================================**/

/**============================================================================================**/
/* 商品情報 */
/*
#item-info > .posi-rlt a { 
    display: block; position: absolute; top: 0; right: 0;
    box-sizing: border-box; width: 180px; height: 30px; padding: 8px 0 0; 
    border: solid 1px #000; border-radius: 3px;
    font-size: 12px; line-height: 1.0em; text-align: center; text-decoration: none;}

#item-info > .posi-rlt a:hover { border-color: #0066cc;}
*/
#item-info > .posi-rlt div { 
    position: absolute; top: 9px; left: 110px;
    font-size: 12px; line-height: 1.0em;}

#item-info > .posi-rlt a { 
    display: inline-block;
    margin: 0 20px 0 0;
    font-size: 12px; line-height: 1.0em;}
    
@media screen and (max-width:499px){
    #item-info > .posi-rlt div { position: static;}
    #item-info > .posi-rlt a { margin: 0 20px 10px 0;}
}




/**============================================================================================**/
/* ヒッチメンバー 共通 */
#compatible h4,
#specification h4 { margin: 0 0 10px;}

#compatible table,
#specification table { width: 100%; max-width: 620px;}

#compatible td,
#specification td{padding: 5px; border-bottom: #b7b7b7 1px dashed;}

/**========================================**/
/* ヒッチメンバー　[適合車種] */
#compatible td:first-child {width: 120px;}

/**========================================**/
/* ヒッチメンバー 　[ヒッチメンバーの仕様] */
#specification td:first-child {width: 185px;}

/**========================================**/
/* ヒッチメンバー 　[注意事項] */
#notes {
    display: table; table-layout: fixed;
    box-sizing: border-box; width: 100%; max-width: 600px; margin: 30px 0; padding: 10px;
    border: solid 2px #FF0004; }

#notes > p,
#notes > a { display: table-cell; vertical-align: middle;}

#notes > p {
	width:90px; margin:0; padding:5px;
	border-radius:5px; background:#FF0004; 
	color:#FFF; font-size:20px; font-weight:bold; text-align:center;}

#notes > a {
	padding:5px 5px 5px 15px; margin:0;
	color:#FF0004; font-size:18px; font-weight:bold; line-height:1.3em; 
	text-decoration:underline;}

@media screen and (max-width:599px){
    #notes > a {font-size:14px; }
}

/* 注意事項 colorbox */
#notes-cb {
    max-width: 700px; margin:0 auto; padding:5px; 
    border: solid 2px #FF0000; 
    font-size: 14px; line-height: 1.6em;}

#notes-cb li {position: relative; margin: 15px 0; padding: 0 0 0 18px;}
#notes-cb li::before {content:'・'; position: absolute; top: 0; left: 0;}

#notes-cb strong {color:#FF0000; font-size:18px; line-height:1.5em;}

/**============================================================================================**/
/* colorbox.js(ヒッチメンバー) */

#srx-modal2,
#tug-modal2,
#tug-modal3,
#tug-modal9 {font-size: 14px; line-height: 1.5em;}
/**========================================**/
/* ヒッチメンバー形状 */
#tug-modal1 { width: 100%; max-width: 680px;}

#tug-modal1 .tug-modal1 {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;}

#tug-modal1 p { width: 320px; margin: 0 0 10px;}
#cboxLoadedContent #tug-modal1 img {max-width: none;}

/**========================================**/
/* 牽引クラス */
#srx-modal2,
#tug-modal2 {max-width: 660px;}

#srx-modal2 strong,
#tug-modal2 strong {color: #dd0000; font-weight: 600;}

#srx-modal2 table,
#tug-modal2 table { 
    width: 100%; margin: 10px 0; 
    border-color: #ccc; border-collapse: collapse;
    text-align: center;}

#srx-modal2 th,
#tug-modal2 th {background:#ebebeb;}

@media screen and (max-width:699px){
    #srx-modal2,
    #tug-modal2 {width: 100%;}
}
/**========================================**/
/* ハーネス形状 */
#tug-modal3 > div > p { margin:0 auto 5px; padding:5px; background:#FFD17D; font-size: 16px; line-height: 1.3em;}

#tug-modal3 ul {
    display: table; table-layout: fixed;
    box-sizing: border-box; width: 100%; max-width: 700px; margin: 0 0 20px; 
    border-collapse: collapse;}

#tug-modal3 li { display: table-row;}

#tug-modal3 li p {
    display: table-cell;
    padding: 4px; border: solid #333 1px;}

#tug-modal3 li p:nth-of-type(1) {width: 210px;}

#tug-modal3 .posi-rlt {padding: 0 0 0 210px;}
#tug-modal3 .posi-rlt img { position: absolute; top: 0; left: 0;}
#tug-modal3 .posi-rlt .p_5 { background:#EAEAEA;}
#tug-modal3 .posi-rlt strong { 
    display: block; 
    margin: 0 0 10px; padding: 5px; 
    background:#B00004; 
    color:#FFF;}
    
#tug-modal3 .posi-rlt .asterisk {position: relative; padding: 0 0 0 18px;}
#tug-modal3 .posi-rlt .asterisk::before {content:'※'; position: absolute; top: 0; left: 0;}
    
@media screen and (max-width:599px){
    #tug-modal3 ul,
    #tug-modal3 li,
    #tug-modal3 li p { display: block;  border: none;}

    #tug-modal3 li { margin: 10px 0 0; padding: 0 0 5px; border-bottom: solid #333 1px;}

    #tug-modal3 .posi-rlt {padding:5px; background:#EAEAEA;}
    #tug-modal3 .posi-rlt .p_5 { padding:0; background:none;}
    #tug-modal3 .posi-rlt  img {position: static; margin: 10px 0 0;}
}
/**========================================**/
/* 標準ボールマウントと方向 */
#srx-modal3 {max-width: 700px; font-size: 14px; line-height: 1.5em;}
#srx-modal3 > div > strong {
    display: block;
    margin:0 0 5px; padding: 5px 0; 
    background: #038D8A; 
    color:#FFF; font-size:16px; text-align: center;}

#srx-modal3 p:not(.m-b25) * { display: inline-block}

#srx-modal3 hr { width: 90%; margin: 15px auto;}

/**========================================**/
/* 標準ボールマウントと方向 colorbox */
#srx-modal4 {max-width: 700px; font-size: 14px; line-height: 1.5em;}
#srx-modal4 > div > strong {
    display: block;
    margin:0 0 5px; padding:5px; 
    background:#015CA7; 
    color:#FFF; font-size:16px;}

#srx-modal4 table {width: 100%; margin: 5px 0 10px; border-color: #ccc; border-collapse: collapse;}
#srx-modal4 th { width: 115px; background:#dcdcdc; font-weight: lighter; text-align: center;}
#srx-modal4 td { font-size: 12px;}

#srx-modal4 .asterisk { position: relative; padding: 0 0 0 18px;}
#srx-modal4 .asterisk::before {content:'※'; position: absolute; top: 0; left: 0;}
/**========================================**/
/* 必要加工内容 */
#tug-modal9 table {
    max-width: 660px; margin: 0 auto 15px; 
    border-color: #999; border-collapse: collapse;}

#tug-modal9 .asterisk {
    position: relative; 
    box-sizing: border-box; max-width: 410px; margin: 0 auto; padding: 0 0 0 18px;}
#tug-modal9 .asterisk::before {content:'※'; position: absolute; top: 0; left: 0;}

/**========================================**/
/* 標準ボールマウント */
#tug-modal10 table {
    width: 100%; margin: 0 0 10px; 
    border-color: #999; border-collapse: collapse;
    font-size: 14px; line-height: 1.5em;}
    
#tug-modal10 th { 
    width: 115px; 
    background:#dcdcdc; 
    font-weight: lighter; text-align: center;}

/**========================================**/
/* セット内容と材質 詳しくはこちら */
#srx-modal1,
#srx-modal0,
#tug-modal4 { max-width: 850px; font-size: 0;}

#srx-modal1 > div > *,
#srx-modal0 > div > *,
#tug-modal4 > div > * {
    display: inline-block;
    box-sizing: border-box; width: 50%; padding: 10px 5px; 
    font-size: 13px; line-height: 1.3em; vertical-align: top;}

#srx-modal1 table,
#srx-modal0 table,
#tug-modal4 table {width: 100%; margin: 0 auto; border-color: #ccc; border-collapse: collapse;}

#srx-modal1 th,
#srx-modal0 th,
#tug-modal4 th { background:#dfdfdf; font-weight: lighter;}

#srx-modal1 th[colspan="2"],
#srx-modal0 th[colspan="2"],
#tug-modal4 th[colspan="2"] { background:#ccc; font-weight: lighter; text-align: center;}

#srx-modal1 td,
#srx-modal0 td,
#tug-modal4 td { background:#ffffd6; font-weight: 600;}

#srx-modal1 td[colspan="2"],
#srx-modal0 td[colspan="2"],
#tug-modal4 td[colspan="2"] { background:#fff; text-align: center;}

@media screen and (max-width:599px){
    #srx-modal1 > div > *,
    #srx-modal0 > div > *,
    #tug-modal4 > div > * { width: 100%; max-width: 400px; margin: 0 auto;}
}
/**============================================================================================**/

/**============================================================================================**/
/* お役立ち情報 */
#related-info,
#related-banner { margin: 20px 0 0;}
#related-info ul {padding: 0 5px;}
#related-info li {margin:0 0 10px; font-weight: bold;}

#related-banner p:not(:last-child) { margin: 0 0 20px;}

/**============================================================================================**/

/**============================================================================================**/
/* 商品レビュー */
#review h2 + a,
#review h3 + a {
    position: absolute; top: 5px; left: 140px;
    font-size: 12px;
}

#review div.m-b20 {padding: 0 0 20px; border-bottom: dotted #ccc 2px;}
#review img {vertical-align:top;}
#review input[type="image"] { display:none;}
#review label {display: inline; text-decoration: underline; cursor: pointer;}
#review label:hover {color: #0066cc;}
	
#review .fs_14 {color: #8B8B8B;}

/* レビューを書く */	
#review a#write { display: none; margin: 0 30px 15px; padding: 0 0 0 25px; line-height: 1.0em;}
#review a#write:before {
    content: url(../images/icon/icon-pencil.png);
    position: absolute; bottom: -3px; left: 0;}	

/* レビューを全て見る */
#review a#more-reed {
    margin: 0 0 15px; padding: 10px 15px 10px 34px; border: solid #cdcdcd 1px; border-radius: 3px;
    line-height: 1.0em; text-decoration: none;}	
#review a#more-reed:before {
    content: url(../images/icon/icon-callout.png);
    position: absolute; top: 7px; left: 6px;}	

#review .ta_c.m-t40 { text-align: left;}
#review .ta_c.m-t40 a#write { margin: 0 0px 15px;}

/**============================================================================================**/

/**============================================================================================**/
/* 過去の問い合わせ Q&A */
#qa h2,
#qa h3,
#qa h2 + a,
#qa h3 + a { display: inline-block; vertical-align: middle;}

#qa h2,
#qa h3 { margin: 0 20px 10px 0;}

#qa h2 + a,
#qa h3 + a { margin: 0 0 10px; font-size: 12px;}

/**============================================================================================**/

/**============================================================================================**/
/* slick用css */
/* 共通 ***************************************************************************************/
#related-item,
#recommend { margin: 0 0 50px;}

#item-grp .Krdslider,
#related-item .Krdslider,
#recommend .Krdslider {margin:20px auto; padding: 0 30px;}

#item-grp .slick-list,
#related-item .slick-list,
#recommend .slick-list {box-sizing: border-box; width: 100%;}

#item-grp .box,
#related-item .box,
#recommend .box {margin: 0 10px; word-break: break-all;}

#item-grp .box img,
#related-item .box img,
#recommend .box img { display: block; width: auto; margin: 0 auto 5px;}

#item-grp .box a,
#related-item .box a,
#recommend .box a {text-decoration: none;}

#item-grp .box a:hover,
#related-item .box a:hover,
#recommend .box a:hover {text-decoration: underline;}

@media screen and (max-width:1024px){
    #item-grp .Krdslider,
    #related-item .Krdslider,
    #recommend .Krdslider {margin:20px auto; padding: 0 0px;}
}

@media screen and (max-width:1024px){
    #item-grp .slick-list,
    #related-item .slick-list,
    #recommend .slick-list {margin:0; padding: 0 8.33% 0 0;}
}

@media screen and (max-width:859px){
    #item-grp .slick-list,
    #related-item .slick-list,
    #recommend .slick-list {margin:0; padding: 0 10% 0 0;}
}

@media screen and (max-width:719px){
    #item-grp .slick-list,
    #related-item .slick-list,
    #recommend .slick-list{padding: 0 12.5% 0 0;}
}

@media screen and (max-width:579px){
    #item-grp .slick-list,
    #related-item .slick-list,
    #recommend .slick-list{padding: 0 16.66% 0 0;}
}

@media screen and (max-width:439px){
    #item-grp .slick-list,
    #related-item .slick-list,
    #recommend .slick-list{padding: 0 25% 0 0;}
}


/* ナビゲーションボタン */
.slick-prev{
    left: 0;
    background: url(../images/icon/slick-arrow_left.png);
}
.slick-next{
     right:0;
    background: url(../images/icon/slick-arrow_right.png);
}

.slick-prev,
.slick-next {
    position: absolute; top: 50%; z-index: 1;
    width: 30px; height: 30px; margin-top: -15px;
    text-indent: -9999px;
}

/* ドットナビゲーションボタン */
ul.slick-dots {margin: 10px 0 0; text-align: center;}
ul.slick-dots li {display: inline-block; margin: 0 5px 5px; padding: 0;}
ul.slick-dots button {
    text-indent: -9999px;
    display: block; width:10px; height:10px; margin:0; padding: 0;
	border: none; border-radius: 5px; outline: 0;
	background: #999;
	}

.slick-dots li.slick-active button {background: #000;}


/**========================================**/

/* 関連商品・おすすめ商品 */
#related-item .box,
#recommend .box {color: #FF0004; font-size: 14px;}

#related-item .box a,
#recommend .box a {display: block; margin: 0 0 5px;}
/**============================================================================================**/
/**============================================================================================**/
/**============================================================================================**/
/* LastUp2024.03.05_kimata */
/**============================================================================================**/
/* 24.01.24 後日削除予定 */
p.title { display: none;}
/**============================================================================================**/

/**============================================================================================**/
#mb-nav { 
    display: block; right: auto; bottom: 20px;
    padding: 0 0 0 1220px;}

/* PC用アイコン */
#mb-nav a {
    display: block; position: relative;
    box-sizing: border-box; width: 160px; height: 30px; margin: 10px 0 0; padding: 8px 0 0 43px;
    border-radius: 4px;
    background: #004885;
    color: #fff; font-size: 14px; line-height: 1.0em;}

#mb-nav a::before {
    content: ''; 
    display: inline-block; position: absolute; top: 50%; left: 10px;
    width: 22px; height: 22px;
    transform: translateY(-50%);}    

#mb-nav a.qa::before { background: url("../images/mail-btn_wh.png");}        /* お問い合わせ */
#mb-nav a.top::before { background: url("../images/top-btn_wh.png");}        /* ページトップへ */
#mb-nav a.cart::before { background: url("../images/cart_btn_wh.png");}      /* カートボタンへ */

#mb-nav a:hover { opacity: 0.8; color: #fff;}

/* AIチャットボット */
#chatbot button {
    display: block; position: relative; 
    width: 160px; margin: 10px 0 0; padding: 8px 0;
    border: none; border-radius: 4px; outline: none;
    background: #004885;
    color: #fff; font-size: 14px; line-height: 1.0em; text-align: center;
    cursor: pointer;
    transition: all 0.4s;}

#chatbot button:hover { opacity: 0.8;}

#chatbot button::before { 
    content: ''; 
    display: block;
    width: 110px; height: 49px; margin: 0 auto 10px;
    background: url("../../zz/common/chatbot_wh.webp");
    background-size: 100% auto;}    


/* チャット用iframe */
#chatbotContainer { display: none; position: fixed; right: 20px; bottom: 20px; z-index: 1000;}

#chatbotIframe { 
    box-sizing: border-box; width: 800px; height: 600px; 
    border: solid 1px #ccc;}

/* 閉じるボタン */
/* 閉じるボタン */
.chatbot-close-btn {
    display: block; position: absolute; top: 18px; right: 10px; z-index: 1002;
    box-sizing: border-box; width: 32px; height: 32px; padding: 3px;
    border: solid 1px #fff;
    background: transparent;
    cursor: pointer;}

.chatbot-close-btn::before,
.chatbot-close-btn::after {
    content: '';
    display: block; position: absolute; top: 50%; left: 50%;
    width: 20px; height: 3px;
    background: #fff; }
.chatbot-close-btn::before {
    transform: translateX(-50%) translateY(-1px) rotate(45deg);
    -webkit-transform: translateX(-50%) translateY(-1px) rotate(45deg); }
.chatbot-close-btn::after {
    transform: translateX(-50%) translateY(-1px) rotate(-45deg);
    -webkit-transform: translateX(-50%) translateY(-1px) rotate(-45deg); }

.chatbot-close-btn:hover { opacity: 0.5;}

@media screen and (max-width:849px){
    #chatbotIframe { width: 90vw;}
}

@media screen and (max-width:699px){
    #chatbotContainer { 
        right: 0; bottom: 0;
        width: 100vw; height: 100%;}
    
    #chatbotIframe { width: 100vw; height: 100%;}
}

/**========================================**/
/* 買物カゴ */
#mb-nav .cart-link { display: none;}

@media screen and (max-width:1599px){
    #mb-nav { right: 0; padding: 0;}

    #mb-nav a,
    #chatbot { border-radius: 4px 0 0 4px;}
}

@media screen and (max-width:699px){
    #mb-nav {
        display: table; bottom: 0;
        text-align: center;}

    #mb-nav > *,
    #mb-nav a,
    #mb-nav .cart-link { 
        display: table-cell; 
        width: auto; padding: 0 2px;
        border: solid #fff; border-width: 0 1px 0 0; border-radius: 0; 
        background: none;
        font-size: 12px; line-height: 1.4em; vertical-align: middle;}

    /* AIチャットボット */
    #chatbot { width: 81px; padding: 0 15px;}
    #chatbot button {
        width: 111px; height: auto; margin: 0;
        border-width: 0;
        background: none;}

    #chatbot button::before { width: 81px; height: 36px; margin: 4px auto 0;}

    #chatbot span { display: none;}

    /* ページトップへ */
    #mb-nav a.top span { display: none;}
    
    #mb-nav a.top::before {
        position: static;
        width: 8px; height: 8px; margin: 5px 15px 0 0;
        border: solid #fff; border-width: 3px 0 0 3px;
        background: none;
        vertical-align: middle;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);}
    
    #mb-nav a.top::after {
        content: 'TOP';
        display: inline-block;}

    /* 買物カゴ */
     #mb-nav a.cart-link { border-left: none;}
     
    /* 買物カゴ・カートボタンへ */
    #mb-nav a.cart-link::before,
    #mb-nav a.cart::before { display: none;}

    /* 買物カゴ・メニューボタン */
    #mb-nav a.cart-link,
    #mb-nav .dis-non { width: 51px;}
}

@media screen and (max-width:399px){
    /* AIチャットボット */
    #chatbot,
    #chatbot button { width: 72px;}
    #chatbot button::before { width: 72px; height: 32px;}
}

@media screen and (max-width:349px){
    /* AIチャットボット */
    #chatbot { padding: 0 5px;}
    
    /* 買物カゴ・メニューボタン */
    #mb-nav a.cart-link,
    #mb-nav .dis-non  { width: 45px;}

    /* ページトップへ */
    #mb-nav a.top::before {margin: 5px 6px 0 0;}
}

/* LastUp2025.09.09_kimata */