@charset "utf-8";
/*========= 商品詳細pc ===============*/
/*========= pc（1200px） ===============*/
#detail{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0px 15px;
	background-color: #ffffff;
}
#detail #itemBox{
	display: flex;
	gap: 20px 40px;
	padding: 5px 10px 0px 10px;
	margin: 60px 0px 30px 0px;
}
#detail .openIcon{
	width: 1rem;
	vertical-align: middle;
	margin-right: 5px;
}

/* 商品画像 */
#detail #itemBox div.itemImg {
	margin: 0 auto;
	flex: 0.6;
}
#detail #itemBox div.mainImg {
	border: 1px solid #999999;
}
#detail #itemBox div.mainImg img {
	width: 100%;
	height: auto;
	vertical-align:middle;
}
#detail #itemBox ul.subImg {
	display: flex;
	margin-top: 10px;
}
#detail #itemBox ul.subImg {
	padding: 0;
}
#detail #itemBox ul.subImg li {
	list-style-type: none;
	border: 1px solid #999999;
	margin-right: 2%;
	width: calc(100% / 4);
}
#detail #itemBox ul.subImg li:nth-child(4n) {
	margin-right: 0;
}
#detail #itemBox ul.subImg li img {
	border: 2px solid transparent;
	transition: border .5s;
}
#detail #itemBox ul.subImg img {
	cursor: pointer;
	width: 100%;
	height: auto;
	vertical-align:middle;
}
#detail ul.subImg li.current img {
	border: 2px solid transparent;
	transition: border .5s;
}

/* 商品情報 */
#detail #itemBox div.itemText{
	flex: 1;
	padding: 10px 0px 0px 0px;
}
#detail #itemBox p.catch{
	font-size: 140%;
}
#detail #itemBox p.name{
	font-size: 200%;
	font-weight: bold;
}
#detail #itemBox p.name .subname{
	font-size: 85%;
}
#detail #itemBox p.name .nowrap{
	white-space: nowrap;
}
#detail #itemBox .explanation{
	line-height: 1.8rem;
}
#detail #itemBox p.net{
	font-size: 120%;
	text-align: center;
}
#detail #itemBox .price,
#detail #itemBox .basePrice{
	text-align: right;
	margin-right: 40px;
}
#detail #itemBox .price span{
	font-size: 180%;
	font-weight: bold;
	margin-left: 10px;
}
#detail #itemBox .itemText	hr{
	border-width: 1px 0 0 0;
	margin: 25px 0px 25px 0px;
}

/* 商品詳細 */
#detail #sec2 .detailBox{
	max-width:960px;
	margin: 0 auto;
}
#detail #sec2 .detailBox img{
	vertical-align: bottom;
}
#detail #sec2 .purposes{
	font-size: 0.8rem;
	text-align: right;
	margin: 10px 10px 0px 0px;
}

/* セクション3 */
#detail #sec3{
	max-width:960px;
	margin: 0 auto;
}
#detail table.todokede th.itemName,
#detail table.eiyokino th.itemName,
#detail table.spec th.itemName{
	background: #333333;
	color: #ffffff;
}

/* 届出表示 */
#detail table.todokede,
#detail table.eiyokino{
	border-collapse:collapse;
}
#detail table.todokede td,
#detail table.todokede th,
#detail table.eiyokino td,
#detail table.eiyokino th{
	border:1px solid #cccccc;
	padding:15px;
	line-height: 1.6rem;
}
#detail table.todokede th,
#detail table.eiyokino th{
	width:35%;
	font-weight:normal;
	background:#efefef;
}
#detail table.todokede .allergy th{
	background:#333333;
	color: #ffffff;
}
#detail table.spec .allergy td{
	background:#ffcc99;
	font-weight: bold;
}

/* 商品仕詳 */
#detail table.spec{
	border-collapse:collapse;
}
#detail table.spec td,
#detail table.spec th{
	border:1px solid #cccccc;
	padding:15px;
	line-height: 1.6rem;
}
#detail table.spec th{
	width:35%;
	font-weight:normal;
	background:#efefef;
}
#detail table.spec td .small{
	font-size: 75%;
	vertical-align: top;
}
#detail table.spec .allergy th{
	background:#333333;
	color: #ffffff;
}
#detail table.spec .allergy td{
	background:#ffcc99;
	font-weight: bold;
}
#detail #sec3 .specNotice{
	font-size: 0.85rem;
	line-height: 1.3rem;
	padding: 10px 0px 0px 0px;
}
#detail #sec3 .specNotice span.bold{
	font-weight: bold;
}
#detail #sec3 .notice{
	font-size: 0.85rem;
	line-height: 1.6rem;
	padding: 20px 30px 0px 30px;
}
#detail #sec3 hr.dashed{
	border-top: dashed 1px #999999;
	margin: 10px 0px;
}

/*========= tablet（959px～700px）===============*/
@media screen and (max-width:959px) {
#detail{
	width: 100%;
	margin: 0 auto;
	font-size: 0.9rem;
}

/* 商品情報 */
#detail #itemBox div.itemImg {
	flex: 0.7;
}
#detail #itemBox p.catch{
	font-size: 100%;
}
#detail #itemBox p.name{
	font-size: 160%;
}
#detail #itemBox p.net{
	font-size: 100%;
}
#detail #itemBox .price span{
	font-size: 160%;
}
#detail #itemBox .itemText hr{
	margin: 15px 0px 15px 0px;
}

/* 商品詳細 */
#detail #sec2 .detailBox{
	width: 100%;
}
#detail #sec2 .detailBox img{
	width: 100%;
}
#detail #sec2 .purposes{
	font-size: 1.6vw;
}

/* セクション3 */
#detail #sec3{
	width: 100%;
}

/* 商品仕詳 */
#detail table.todokede,
#detail table.eiyokino,
#detail table.spec{
	width: 100%;
}
#detail #sec3 .specNotice{
	font-size: 0.8rem;
}
#detail #sec3 .notice{
	font-size: 0.8rem;
}
}

/*========= tablet（699px～520px）===============*/
@media screen and (max-width:699px){
#detail #itemBox{
	display: flex;
	gap: 20px 20px;
	padding: 5px 10px 0px 10px;
}

/* 商品情報 */
#detail #itemBox div.itemImg{
	margin: 0 auto;
	flex: 0.8;
}
#detail #itemBox p.catch{
	font-size: 2vw;
}
#detail #itemBox p.name{
	font-size: 3vw;
}
#detail #itemBox p.explanation{
	font-size: 2vw;
	line-height: 1.4rem;
}
#detail #itemBox p.net{
	font-size: 2.2vw;
}
#detail #itemBox .price span{
	font-size: 150%;
}
#detail #itemBox .item	hr{
	margin: 12px 0px 12px 0px;
}

/* 商品仕詳 */
#detail #sec3 .notice{
	padding: 20px 10px 0px 10px;
}
}

/*========= sp（519px以下）===============*/
@media screen and (max-width:519px){
#detail{
	width: 100%;
	margin: 0 auto;
	padding: 0px 10px;
}
#detail #itemBox{
	display: flex;
	flex-flow: column;
	margin: 30px 0px 20px 0px;
}
#detail #itemBox div.itemImg {
	width: 100%;
}
#detail #itemBox div.itemText{
	display: block;
}
#detail #itemBox p.catch{
	font-size: 3vw;
}
#detail #itemBox p.name{
	font-size: 4.4vw;
}
#detail #itemBox p.explanation{
	font-size: 3vw;
	line-height: 1.8rem;
}
#detail #itemBox p.net{
	font-size: 3.4vw;
}
#detail #itemBox .price span{
	font-size: 150%;
}

/* 届出表示 */
#detail table.todokede,
#detail table.eiyokino{
	width:100%;
}
#detail table.todokede th,
#detail table.todokede td,
#detail table.eiyokino th,
#detail table.eiyokino td{
	width:auto;
	display: block;
	line-height: 1.4rem;
	font-size: 0.8rem;
}
#detail table.todokede th,
#detail table.eiyokino th{
	border-bottom:0;
	padding: 6px;
}
#detail table.todokede td,
#detail table.eiyokino td{
	padding: 10px;
}

/* 商品仕詳 */
#detail table.spec {
	width:100%;
}
#detail table.spec th,
#detail table.spec td {
	width:auto;
	display:block;
	line-height: 1.4rem;
	font-size: 0.85rem;
}
#detail table.spec th {
	border-bottom:0;
	padding: 6px;
}
#detail table.spec td {
	padding: 10px;
}
}