@charset "utf-8";

/* ===================================================================
CSS information
 file name  :  detail.css
 style info :  
=================================================================== */

/* ************************************************ 
 *	商品説明用 ul li 2022-04-03 oda
 *	safari対応版 2022-04-04
* ************************************************ */
.item-ex {
	margin-block-start:0;
	margin-block-end:0;
	margin-bottom:0 !important;
	padding-left: 5%;
	padding-right: 3%;
	line-height:1.25;
}
.item-ex li {
	list-style-type: none;
	text-indent:-1em;
	padding-bottom:0.35em;
}
.item-ex li::before {
	content: '\30FB';	/* '・' */
}

/* ************************************************ 
 *	容量選択テーブル追加処理2021-02-05 oda
 *	改良2022-12-31 2023-01-03 2023-03-20 oda
 * ************************************************ */
.table4-3 {
	width:100%;
}
.table4-3 td {
    border: 1px solid #595959;
	border-radius:5px;
	padding: 3px;
	text-align:center;
}
.table4-3 td a {
    display: block;
    width: 100%;
	height: 100%;
}
.table4-3 tr {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.table4-3 td a:hover {
    background-color:#ffccff;
}
@media screen and (max-width: 560px) {
.table4-3 tr {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}
}

.container4-3 {
/*	width:100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;*/
	display: flex;
	flex-wrap: wrap;
}
.container4-3 div {
	padding: 1px;
}
/*
@media screen and (max-width: 560px) {
.container4-3 {
	width:100%;
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
}
}*/

/* ************************************************ 
 *	容量選択テーブル用ボタン追加 2022-12-31 oda
 * ************************************************ */
.btn-ex {
/*  font-size: 1.6rem; */
/*  font-weight: 700; */
/*  line-height: 1.5; */
  position: relative;
  display: inline-block;
  padding: 2px;
  white-space: nowrap; /* safari対応 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
/*  color: #212529; */
  border-radius: 0.5rem;
  border: 1px solid #000000;
  width: calc(100% - 6px);
}
a.btn-ex {
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
a.btn-ex--select {
  color: #000;
  background-color: #e8e8e8;
  border-bottom: 5px solid #000000;
}

a.btn-ex--select:hover {
  margin-top: 3px;
  color: #000;
  background: #fff20a;
  border-bottom: 2px solid #000000;
  text-decoration: none;
}

.btn-ex--on {
  margin-top: 3px;
  color: #000;
  background: #ff80ff;
  border-bottom: 2px solid #000000;
}

/* ************************************************ 
 *	SOLD OUT追加処理2019-10-12 oda
 * ************************************************ */
.button--disabled2 {
    background: #bdbdbd;
    color: #fff;
}
.button--large2 {
    font-size: xx-large;
    font-weight: bold;
    padding: 20px 0;
    width: 100%;
    margin: 0 0 10px;
}
.button2 {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    border: none;
    display: inline-block;
}

/* ************************************************ 
 *	商品詳細ページ
 * ************************************************ */

div.detail {margin:10px 0;}

div.detail_img {width:100%;text-align:center;}

/* ------------------------------------- 
 *	商品のスペック表
 * ------------------------------------- */

table.spec {
	background:#CCC;/*商品価格表-罫線の色*/
	width:100%;
}

table.spec th {
	background:#EFEFEF;/*商品価格表右側セルの背景色*/
	border: 2px solid #fff;
	padding:5px;
	width:100px;
	color:#333;/*商品価格表右側セルの文字色*/
	font-weight:normal;
	text-align:left;
}

table.spec td {
	background:#FFF;/*商品価格表左側セルの背景色*/
	border: 2px solid #fff;
	padding:5px;
}

table.spec table.num td {padding:0px;}

table.spec td.sales {
	color:#CC0000;/*商品価格表-販売価格の文字色*/
	font-weight:bolder;
}

/* 「カートに入れる」ボタン */
div.cart_in {
	text-align:right;
	margin-top:10px;
}
div.cart_in img {
	width:132px;
	height:34px;
}

/* 商品の説明 */
div.explain {margin:10px 0;}

/* 「この商品について問い合わせる」等のボタン */
div.etc {
	text-align:center;
	margin-top:10px;
}
div.etc img {
margin:5px;
	}
	

/* 特定商取引法に基づく表記（返品など）ボタン */
p#sk_link_other {
	text-align:right;
	margin-top:10px;
}

p#sk_link_other a {
	font-size:12px;
}


/* 会員価格の表示 商品詳細用 */
.regular_price_detail {
	padding:0px 0px 2px;
	text-decoration:line-through;
}

.price_detail {
	padding:0px;
}

.discount_rate_detail {
	padding:2px 0px 0px;
	color:#ff0000;
}

/* ------------------------------------- 
 *	トラックバック
 * ------------------------------------- */

div.tb {margin-bottom:20px;}

div.tb div.title {
	color:#8F826C;
	font-size:14px;
	background:url(https://img.shop-pro.jp/tmpl_img/17/arrow.gif) no-repeat;
	background-position:left;
	border-bottom:2px dotted #8F826C;
	padding-left:15px;
	margin-bottom:10px;
}

/*ベージュの背景色エリア*/
div.area_bg {
	background:#F6F1E6;
	margin:0px 10px 0px 10px;
}

/*トラックバック本文レイアウト*/
div.tb div.tb_area {
	padding:10px 15px 15px 15px;
}

div.tb div.tb_area span {
	font-size:10px;
	color:#8F826C;
	margin-right:30px; 
}

div.tb div.tb_area p.tb_title {
	border-top:1px dotted #8F826C;
	font-weight:bolder;
	padding:5px 0;
}

/* ------------------------------------- 
 *	商品一覧・検索結果・詳細ページ共通
 * ------------------------------------- */

/* カテゴリーの名前（背景：薄オレンジ） */
.category_title {
	background:#FFD5AC url(https://img.shop-pro.jp/tmpl_img/17/category_title.gif) no-repeat;
	background-position:6px;
	color:#333; /*商品カテゴリー名・商品名文字色(商品詳細・商品一覧結果共通)*/
	font-weight:bolder;
	padding:10px 20px;
}