/*
Theme Name: CSG_2026 Phase2
Description: csg_2026p1をベースにしたPhase2版。レスポンシブCSS刷新（viewport修正・流動グリッド化）、商品詳細ページへの関連商品表示、query_posts()のWP_Query置換を実施。
Version: 2026p2
*/

@charset "utf-8";
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/* ============================================================
   Phase2: レスポンシブ方針
   ------------------------------------------------------------
   ベース（無条件のルール）＝モバイルを含む全画面幅で成立する流動レイアウト。
   商品グリッドはCSS Grid(auto-fill/minmax)で列数を自動決定するため、
   従来のように画面幅ごとに列数を手書きする必要がない。
   記事＋サイドバーの2カラムはFlexboxのwrapで、狭い画面では自然に縦積みになる。
   min-width:1140px のブロックだけが「デスクトップ専用の固定2カラム」を追加する。
   ============================================================ */

/* tags
---------------------------------------------------- */
html,body { margin:0; padding: 0; color: #151515; background:#fff; font-family:'Noto Sans Japanese','メイリオ',sans-serif; font-size: 16px; line-height: 1.8em;}
a:link,a:visited { color:#242424;}
a:hover,a:active { color:#aaaaaa; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
a:hover img{ opacity:0.8; filter:alpha(opacity=80); -ms-filter: "alpha( opacity=80 )"; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
p {}
img { border-style: none; vertical-align: bottom; max-width: 100%; height: auto;}
h1,h2,h3,h4,h5,h6,p,ul,dl,dt,dd { margin: 0; padding: 0; list-style: none; font-weight: normal; clear:both;}
*{ box-sizing: border-box; }

#wrap{ width:100%; margin: 0 auto; overflow-x: hidden;}

div.inner{ width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 16px;}
@media screen and (min-width: 768px){
	div.inner{ padding: 0 24px;}
}
@media screen and (min-width: 1140px){
	div.inner{ padding: 0;}
}


/* header
---------------------------------------------------- */
header#globalHeader{ margin-bottom: 20px;}
header#globalHeader .inner{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: 16px;}
header#globalHeader h1{ margin: 0; max-width: 200px;}
header#globalHeader h1 img{ display: block; width: 100%; height: auto;}
header#globalHeader div#headerLanguage{ font-size: 14px; text-align: right;}
header#globalHeader div#headerLanguage a{ display: inline-flex; align-items: center; text-decoration: none;}
header#globalHeader div#headerLanguage i{ color: #a60000; margin-right: 8px;}
header#globalHeader div#headerLanguage span{ display: block; font-size: 11px; color: #888;}
@media screen and (min-width: 1140px){
	header#globalHeader{ margin-bottom: 30px;}
	header#globalHeader h1{ max-width: none;}
	header#globalHeader div#headerLanguage{ font-size: 16px;}
}

header#globalHeader nav#globalMenu{ width: 100%; background: #242424;}
header#globalHeader nav#globalMenu div#menuBtn{ color: #fff; text-align: center; padding: 16px 0; font-size: 15px; cursor: pointer;}
header#globalHeader nav#globalMenu div#menuBtn i{ margin-right: 12px;}
header#globalHeader nav#globalMenu ul{ display: none;}
header#globalHeader nav#globalMenu ul li a{ display: block; padding: 16px 12px; color: #fff; text-decoration: none; font-size: 15px; border-top: 1px dotted #656565;}
header#globalHeader nav#globalMenu ul li a:active{ background: #454545;}
@media screen and (min-width: 1140px){
	header#globalHeader nav#globalMenu div#menuBtn{ display: none;}
	header#globalHeader nav#globalMenu ul{ display: flex; flex-wrap: wrap;}
	header#globalHeader nav#globalMenu ul li{ border-left: 1px dotted #656565;}
	header#globalHeader nav#globalMenu ul li a{ padding: 10px 8px; font-size: 14px; border-top: none;}
	header#globalHeader nav#globalMenu ul li:last-child{ border-right: 1px dotted #656565;}
	header#globalHeader nav#globalMenu ul li a:hover{ background: #656565;}
}


/* footer
---------------------------------------------------- */
footer#globalFooter{ clear: both; background: #242424; color: #fff; padding: 24px 0 20px 0; text-align: center;}
footer#globalFooter a{ color: #fff;}
footer#globalFooter a:hover{ color: #656565;}
footer#globalFooter div#footerAddress{ margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #353535;}
footer#globalFooter div#footerAddress p{ font-size: 14px;}
footer#globalFooter div#footerCopyright{ font-size: 11px;}
@media screen and (min-width: 1140px){
	footer#globalFooter{ text-align: right;}
	footer#globalFooter div#footerAddress p{ font-size: 15px;}
}


/* main
---------------------------------------------------- */
main{ width: 100%; overflow: hidden;}

article{ width: 100%; margin-bottom: 30px;}
aside{ width: 100%;}
@media screen and (min-width: 1140px){
	main .inner{ display: flex; align-items: flex-start; gap: 40px;}
	article{ width: 800px; flex: 0 0 800px; margin-bottom: 40px;}
	aside{ width: 300px; flex: 0 0 300px;}
}
section{ clear: both;}
section h1 i{ margin-right: 10px;}

aside div.sidebox{ margin-bottom: 24px;}
aside div.sidebox h1{ font-size: 16px; border-bottom: 2px solid #242424; padding: 0 8px 8px 8px;}
aside div#sideCart a{ display: block; text-decoration: none; font-weight: 600; background: #a60000; color: #fff; text-align: center; line-height: 56px; font-size: 17px; border-radius: 3px;}
aside div#sideCart a:hover{ background: #ff0000;}
aside div#sideSerch dl{ width: 100%; margin: 0 auto;}
aside div#sideSerch dl dt{ font-size: 13px; margin-top: 0.5em;}
aside div#sideSerch dl dd select,
aside div#sideSerch dl dd input#kw{ width: 100%; padding: 0.6em; background: #faffbd; border: none; font-size: 16px; line-height: 1.4; min-height: 44px;}
aside div#sideSerch div.serchBtn{ margin-top: 20px;}
aside div#sideSerch div.serchBtn input{ display: block; margin: 0 auto; width: 100%; min-height: 44px; background: #242424; color: #fff; border: none; cursor: pointer; font-size: 16px;}
aside div#sideSerch div.clearBtn{ text-align: center; margin-top: 8px;}

aside div#sideBrand{ overflow: hidden; margin-bottom: 24px;}
aside div#sideBrand ul li a{ display: block; border-bottom: 1px dotted #656565; padding: 12px 5px; text-decoration: none;}


/* 商品グリッド共通（トップの各セクション・アーカイブ・関連商品で共有）
---------------------------------------------------- */
section#homespCon ul.itemList,
section#homeWithDefects ul.itemList,
section#homeRec ul.itemList,
section#relatedItems ul.itemList,
section#itemIndex ul#itemList{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 16px 20px;
}
@media screen and (min-width: 600px){
	section#homespCon ul.itemList,
	section#homeWithDefects ul.itemList,
	section#homeRec ul.itemList,
	section#relatedItems ul.itemList,
	section#itemIndex ul#itemList{
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 24px 30px;
	}
}
@media screen and (min-width: 1140px){
	section#homespCon ul.itemList,
	section#homeWithDefects ul.itemList,
	section#homeRec ul.itemList,
	section#relatedItems ul.itemList,
	section#itemIndex ul#itemList{
		grid-template-columns: repeat(3, 240px);
		gap: 40px;
	}
}

section#homespCon ul.itemList li div.imgBox,
section#homeWithDefects ul.itemList li div.imgBox,
section#homeRec ul.itemList li div.imgBox,
section#relatedItems ul.itemList li div.imgBox,
section#itemIndex ul#itemList li div.imgBox,
ul.slider li div.imgBox{
	width: 100%; aspect-ratio: 3 / 2; margin-bottom: 10px; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	position: relative; background: #f5f5f5;
}
section#homespCon ul.itemList li div.imgBox img,
section#homeWithDefects ul.itemList li div.imgBox img,
section#homeRec ul.itemList li div.imgBox img,
section#relatedItems ul.itemList li div.imgBox img,
section#itemIndex ul#itemList li div.imgBox img,
ul.slider li div.imgBox img{
	width: 100%; height: 100%; object-fit: cover;
}
section#homespCon ul.itemList li div.imgBox .deliverystatus,
section#homeWithDefects ul.itemList li div.imgBox .deliverystatus,
section#homeRec ul.itemList li div.imgBox .deliverystatus,
section#relatedItems ul.itemList li div.imgBox .deliverystatus,
section#itemIndex ul#itemList li div.imgBox .deliverystatus,
ul.slider li div.imgBox .deliverystatus{
	position: absolute; top: 0; left: 0; margin: 0; color: #fff; background: #a60000;
	font-size: 13px; font-weight: bold; line-height: 1; padding: 6px 10px;
}

section#homespCon ul.itemList li div.contBox,
section#homeWithDefects ul.itemList li div.contBox,
section#homeRec ul.itemList li div.contBox,
section#relatedItems ul.itemList li div.contBox,
section#itemIndex ul#itemList li div.contBox{ font-size: 12px; overflow: hidden;}
section#homespCon ul.itemList li div.contBox h3,
section#homeWithDefects ul.itemList li div.contBox h3,
section#homeRec ul.itemList li div.contBox h3,
section#relatedItems ul.itemList li div.contBox h3,
section#itemIndex ul#itemList li div.contBox h3{ font-size: 14px; line-height: 1.4; height: 2.8em; overflow: hidden; margin-top: 4px;}
section#homespCon ul.itemList li div.contBox div.part span,
section#homeWithDefects ul.itemList li div.contBox div.part span,
section#homeRec ul.itemList li div.contBox div.part span,
section#relatedItems ul.itemList li div.contBox div.part span,
section#itemIndex ul#itemList li div.contBox div.part span{ background: #333; color: #fff; border-radius: 3px; padding: 2px 6px;}
section#homespCon ul.itemList li div.contBox div.price,
section#homeWithDefects ul.itemList li div.contBox div.price,
section#homeRec ul.itemList li div.contBox div.price,
section#relatedItems ul.itemList li div.contBox div.price,
section#itemIndex ul#itemList li div.contBox div.price{ text-align: right; margin-top: 4px;}
section#homespCon ul.itemList li div.contBox div.price span,
section#homeWithDefects ul.itemList li div.contBox div.price span,
section#homeRec ul.itemList li div.contBox div.price span,
section#relatedItems ul.itemList li div.contBox div.price span,
section#itemIndex ul#itemList li div.contBox div.price span{ font-size: 20px; font-weight: 600; color: #f30000;}
section#homespCon ul.itemList li div.contBox div.price span.priceT,
section#homeWithDefects ul.itemList li div.contBox div.price span.priceT,
section#homeRec ul.itemList li div.contBox div.price span.priceT,
section#relatedItems ul.itemList li div.contBox div.price span.priceT,
section#itemIndex ul#itemList li div.contBox div.price span.priceT{ color: #333; font-size: 14px; font-weight: normal; text-decoration: line-through;}
@media screen and (min-width: 1140px){
	section#homespCon ul.itemList li div.contBox div.price span,
	section#homeWithDefects ul.itemList li div.contBox div.price span,
	section#homeRec ul.itemList li div.contBox div.price span,
	section#relatedItems ul.itemList li div.contBox div.price span,
	section#itemIndex ul#itemList li div.contBox div.price span{ font-size: 24px;}
}


/* home
---------------------------------------------------- */
section#homeTop{ background: #f0f0f0; padding: 10px; margin-bottom: 24px;}
section#homeTop h1{ text-align: center; padding-bottom: 10px; font-size: 16px;}
section#homeTop img{ width: 100%; height: auto;}
section#homeTop p{ text-align: right; font-size: 13px;}

div#homeCampaign{ margin-bottom: 24px; text-align: center;}
div#homeCampaign p{ margin-top: 15px;}

section#homeInfo,
section#homeInstantDelivery,
section#homespCon,
section#homeWithDefects,
section#homeRec{ margin-bottom: 40px; overflow: hidden;}
section#homeInfo h2,
section#homeInstantDelivery h2,
section#homespCon h2,
section#homeWithDefects h2,
section#homeRec h2,
section#relatedItems h2{ border-top: 1px solid #242424; border-bottom: 1px solid #242424; padding: 10px 0; text-align: center; margin-bottom: 24px; font-size: 18px;}
section#homeInfo p{ margin: 0.5em 1em;}
section#homeInfo p.signature{ text-align: right;}

section#homeInfo div.more,
section#homeInstantDelivery div.more,
section#homespCon + div.more,
section#homeWithDefects div.more,
section#homeRec div.more{ margin-top: 24px;}
section#homeInfo div.more a,
section#homeInstantDelivery div.more a,
section#homeWithDefects div.more a,
section#homeRec div.more a{ display: block; background: #242424; max-width: 360px; margin: 0 auto; padding: 14px 0; text-decoration: none; font-size: 16px; color: #fff; text-align: center;}
section#homeInfo div.more a:hover,
section#homeInstantDelivery div.more a:hover,
section#homeWithDefects div.more a:hover,
section#homeRec div.more a:hover{ background: #454545;}

ul.slider li{ padding: 5px;}
ul.slider li div.contBox h3{ font-size: 14px; line-height: 1.4; height: 2.8em; overflow: hidden;}
ul.slider li div.contBox div.part{ font-size: 12px;}
ul.slider li div.contBox div.part span{ background: #333; color: #fff; border-radius: 3px; padding: 2px 6px;}
ul.slider li div.contBox div.price{ text-align: right;}
ul.slider li div.contBox div.price span{ font-size: 20px; font-weight: 600; color: #f30000;}
ul.slider li div.contBox div.price span.priceT{ color: #333; font-size: 14px; font-weight: normal; text-decoration: line-through;}
.slick-track { display: flex; }
.slick-slide { height: auto !important; }


/* 関連商品（Phase2で新設）
---------------------------------------------------- */
section#relatedItems{ margin-top: 40px; margin-bottom: 20px; overflow: hidden;}


/* single
---------------------------------------------------- */
main#single article section#mainCont{ margin-bottom: 30px; overflow: hidden;}
main#single h1{ margin-bottom: 1em; font-size: 20px; font-weight: bold;}
div#wpCont{ font-size: 16px;}
div#wpCont h2{ background: #f1f1f1; font-size: 16px; font-weight: 400; padding: 8px 10px; margin: 14px 0;}
div#wpCont h3{ border-bottom: 1px dotted #444; font-weight: bold; font-size: 15px;}
div#wpCont p{ margin: 1em 0;}
div#wpCont img{ max-width: 100%; height: auto; margin-bottom: 5px;}
div#wpCont iframe{ max-width: 100%; max-height: 450px;}
div#wpCont table{ width: 100%; font-size: 13px;}
div#wpCont table th{ padding: 10px 0; width: 30%; font-size: 12px;}
div#wpCont table td{ padding: 10px 0; }
div#wpCont ul{ list-style: disc; padding-left: 1.5em;}
div#wpCont ul li::marker{ color: #222;}
div#wpCont ul ul li::marker{ color: #aaa;}

main#single article section#mainCont div.infoBtn{ text-align: center;}
main#single article section#mainCont .deliverystatus span{ background: #333; color: #fff; border-radius: 3px; padding: 2px 6px;}

/* 商品詳細（新レイアウト：画像＋購入ボックスをFlexboxで並べ、狭い画面では縦積み）
---------------------------------------------------- */
main#singleADV header#contentHeader{ border-bottom: 1px dotted #aaa; padding-bottom: 10px;}
main#singleADV header#contentHeader h1{ font-size: 20px; font-weight: bold;}
main#singleADV header#contentHeader p{ font-size: 13px; color: #666; margin-top: 6px;}
main#singleADV header#contentHeader .deliverystatus span{ background: #a60000; color: #fff; border-radius: 3px; padding: 2px 6px;}

main#singleADV article section#mainCont h1{ margin: 10px 0; font-size: 13px; text-align: right; color: #666;}

main#single div.itemCartArea,
main#singleADV div.itemCartArea{ display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 24px;}

main#single div.itemImage,
main#singleADV div.itemImage{ width: 100%;}
main#single div.itemImage img,
main#singleADV div.itemImage img{ width: 100%; height: auto;}
main#single div.itemOutline,
main#singleADV div.itemOutline{ width: 100%;}
@media screen and (min-width: 700px){
	main#single div.itemImage,
	main#singleADV div.itemImage{ flex: 1 1 55%; min-width: 280px;}
	main#single div.itemOutline,
	main#singleADV div.itemOutline{ flex: 1 1 38%; min-width: 260px;}
}

main#single div.itemOutline div.price,
main#singleADV div.itemOutline div.price{ margin-top: 20px; text-align: right;}
main#single div.itemOutline div.price span,
main#singleADV div.itemOutline div.price span{ font-size: 34px; font-weight: 600;}
main#single div.itemOutline div.price span.priceT,
main#singleADV div.itemOutline div.price span.priceT{ font-size: 15px; font-weight: normal; text-decoration: line-through;}
main#single div.itemOutline div.price span#normalPrice,
main#singleADV div.itemOutline div.price span#normalPrice{ color: #333; font-size: 1em; font-weight: normal; text-decoration: line-through;}
main#single div.itemOutline div.price span#discountArrow,
main#singleADV div.itemOutline div.price span#discountArrow{ color: #333; font-size: 1em; font-weight: normal;}
main#single div.itemOutline div.more,
main#singleADV div.itemOutline div.more{ text-align: center; margin-top: 24px; font-size: 18px;}
main#single div.itemOutline div.more form,
main#singleADV div.itemOutline div.more form{ text-align: left;}
main#single div.itemOutline div.more form label,
main#singleADV div.itemOutline div.more form label{ display: block; font-size: 14px; line-height: 1.3em; font-weight: bold; margin-top: 0.75em;}
main#single div.itemOutline div.more form select,
main#singleADV div.itemOutline div.more form select{ display: block; width: 100%; font-size: 16px; margin: 0.5em 0 1em 0; padding: 0.6em; min-height: 44px;}
main#singleADV div.itemOutline div.more form .cartButtomBox select{ display: inline-block; width: 50%;}
main#single div.itemOutline table,
main#singleADV div.itemOutline table{ width: 100%;}
main#single div.itemOutline table th,
main#singleADV div.itemOutline table th{ width: 30%; text-align: center; font-size: 11px; color: #fff; background: #242424;}
main#single div.itemOutline table td,
main#singleADV div.itemOutline table td{ padding: 8px 5px; font-size: 14px;}
main#single div.infoBtn,
main#singleADV div.infoBtn{ text-align: center; margin-top: 10px;}
main#single div.infobox1,
main#singleADV div.infobox1{ border: 1px #a60000 solid; padding: 1em; margin-bottom: 1em; font-size: 14px;}
main#single div.infobox1 p,
main#singleADV div.infobox1 p{ margin: 0.25em;}

main#singleADV article section#mainCont div#itemImageBox{ clear: both; overflow: hidden; background: #f5f5f5; margin-bottom: 24px;}

article section#subCont{ margin-top: 24px; text-align: center;}
article section#subCont div.more a{ display: block; background: #242424; max-width: 480px; margin: 0 auto; padding: 12px 0; font-weight: bold; text-decoration: none; font-size: 15px; color: #fff;}
article section#subCont div.more a:hover{ background: #454545;}

.gallery{ width: 100%; overflow: hidden;}
.gallery br{ display: none;}
.gallery-item{ display: inline-block; margin: 1%;}
.gallery-icon{ text-align: center;}
.gallery-icon img{ width: 100%; height: auto;}
.gallery-caption{ color: #222; font-size: 12px; margin: 0 0 10px; text-align: center;}
.gallery-columns-1 .gallery-item{ width: 100%;}
.gallery-columns-2 .gallery-item{ width: 48%;}
.gallery-columns-3 .gallery-item{ width: 31.33333%;}
.gallery-columns-4 .gallery-item{ width: 23%;}
.gallery-columns-5 .gallery-item{ width: 18%;}


/* ホイール用テーブル
-----------------------------------------------------*/
a.specs{ display: block; text-decoration: none; font-weight: 600; background: #a60000; color: #fff; text-align: center; line-height: 56px; font-size: 17px; border-radius: 3px; margin-bottom: 20px;}
a.specs:hover{ background: #ff0000;}

table.wheel-spec-table{ width: 100%; font-size: 13px;}
table.wheel-spec-table th{ font-weight: bold; background-color: #454545; color: #fff;}
table.wheel-spec-table th,
table.wheel-spec-table td{ padding: 0.5em 0.25em; text-align: center;}
table.wheel-spec-table tr:nth-child(odd) td{ background-color: #f1f1f1;}
table.wheel-spec-table .cartButtomBox select{ font-size: 14px;}
table.wheel-spec-table .cartButtomBox input{ font-size: 14px; margin-top: 5px;}
table.wheel-spec-table span.teika{ text-decoration: line-through;}
table.wheel-spec-table span.baika{ font-weight: bold; font-size: 1.25em;}
.wheel-spec-table-wrap{ width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;}


/* カートボタン
-----------------------------------------------------*/
.itemBox{ margin-top: 20px;}
.cartHosyoBox{ text-align: left; font-size: 15px; line-height: 1.5em; border: 1px solid #454545; padding: 0.75em; margin-bottom: 20px;}
.cartHosyoBox .title{ font-weight: bold;}
.cartHosyoBox p{ margin: 0.5em 0;}
.cartHosyoBox li{ padding: 0.5em 0;}
.cartHosyoBox label{ cursor: pointer;}
.cartButtomBox{ font-size: 16px;}
.cartButtomBox input{ display: block; width: 100%; margin: 0 auto; cursor: pointer; color: #fff; background: #a60000; border: none; border-radius: 3px; padding: 0.75em 1.5em; font-weight: bold; font-size: 17px; min-height: 48px;}
.cartButtomBox input:hover{ background: #ff0000;}
.cartButtomBox select{ font-size: 16px;}

/* お問合せ＆送料確認ボタン
-----------------------------------------------------*/
.infoButtomBox{ text-align: center;}
.infoButtomBox input{ display: inline-block; cursor: pointer; color: #fff; background: #242424; border-radius: 3px; border: none; padding: 0.5em 1.5em; font-size: 16px; min-height: 44px;}
.infoButtomBox input:hover{ background: #ff0000;}
.infoButtomBox select{ font-size: 16px;}


/* 送料改版
-----------------------------------------------------*/
div.infoadd,
div.priceCaution{ border: 1px solid #fc0; border-radius: 2px; padding: 0.5em 0.75em; font-size: 14px; line-height: 1.5em;}
div.infoadd p,
div.priceCaution p{ margin: 0.25em 0;}


/* achive
---------------------------------------------------- */
section#itemIndex h1{ border-left: 5px solid #242424; border-bottom: 1px dotted #242424; padding: 10px; margin-bottom: 24px; font-size: 20px;}
section#itemIndex div.pageNation{ margin: 24px 0; overflow-x: auto;}

section#campaignInfo{ border: 1px solid #e5e5e5; padding: 20px; border-radius: 3px;}
section#campaignInfo h2{ margin-bottom: 0.5em;}
section#campaignInfo p{ margin: 0.5em 0 0 0;}
section#campaignInfo div.more{ margin-top: 24px;}
section#campaignInfo div.more a{ display: block; background: #242424; max-width: 360px; margin: 0 auto; padding: 12px 0; text-decoration: none; font-size: 16px; color: #fff; text-align: center;}
section#campaignInfo div.more a:hover{ background: #454545;}