@charset "utf-8";
/* CSS Document */
/*商品詳細*/


.detailWrap{
    max-width:1200px;
    margin:0 auto;
    padding:30px 20px 60px;
}
.cartLink{
		color: #fff;
  	  text-decoration:none;
	}
	
.deliveryNotice{
    margin:0 0 30px;
    padding:14px 16px;
    border:1px solid #d8e4ec;
    background:#f7fbfe;
    border-radius:8px;
    font-size:14px;
}
.detailGrid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:36px;
    align-items:start;
	margin-bottom: 30px;
}
.galleryMain{
    border:1px solid #e5e5e5;
    border-radius:16px;
    overflow:hidden;
    background:#fafafa;
    aspect-ratio: 1 / 1;
}
.galleryMain img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.noImage{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#999;
    font-size:14px;
}
.thumbList{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}
.thumbItem{
    width:88px;
    height:88px;
    border:1px solid #ddd;
    border-radius:10px;
    overflow:hidden;
    cursor:pointer;
    background:#fff;
}
.thumbItem img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.detailCategory{
    display:inline-block;
    margin:0 0 12px;
    padding:4px 10px;
    font-size:12px;
    border-radius:999px;
    background:#f2f2f2;
}
.detailTitle{
    margin:0 0 14px;
    font-size:32px;
    line-height:1.45;
    font-weight:bold;
}
.detailPriceRange{
    margin:0 0 18px;
    font-size:22px;
    font-weight:bold;
}
.badgeRow{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 18px;
}
.badge{
    display:inline-block;
    padding:5px 10px;
    font-size:12px;
    line-height:1.2;
    border-radius:999px;
    color:#fff;
}
.badgeRecommend{
    background:#d97706;
}
.badgeSoldout{
    background:#b91c1c;
}
.detailText{
    margin:0 0 24px;
    color:#444;
}
.detailBox{
    margin:0 0 24px;
    padding:18px;
    border:1px solid #e5e5e5;
    border-radius:14px;
    background:#f9f7f2;
	max-width: 960px;
	margin: 0 auto 50px;
}
.detailBoxTitle{
    margin:0 0 12px;
    font-size:18px;
    font-weight:bold;
}
.specList{
    display:grid;
    gap:12px;
}
.specItem{
    border:1px solid #ddd;
    border-radius:12px;
    padding:12px 14px;
}
.specItem label{
    display:block;
    cursor:pointer;
}
.specItemTop{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}
.specName{
    font-size:16px;
    font-weight:bold;
}
.specPrice{
    font-size:16px;
    font-weight:bold;
}
.specSub{
    margin-top:6px;
    font-size:13px;
    color:#666;
}
.specSoldout{
    margin-top:8px;
    color:#b91c1c;
    font-size:13px;
    font-weight:bold;
}
.metaTable{
    width:100%;
    border-collapse:collapse;
}
.metaTable th,
.metaTable td{
    padding:10px 0;
    border-bottom:1px solid #eee;
    text-align:left;
    vertical-align:top;
    font-size:14px;
}
.metaTable th{
    width:110px;
    color:#666;
    font-weight:normal;
}
.cartArea{
    margin-top:20px;
}
.qtyRow{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:16px;
}
.qtyRow select{
    padding:8px 10px;
    min-width:90px;
}
.cartBtn{
    display:inline-block;
    width:100%;
    padding:14px 18px;
    border:none;
    border-radius:10px;
    background:#0f766e;
    color:#fff;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
}
.cartBtn:disabled{
    background:#ccc;
    color:#666;
    cursor:not-allowed;
}
.backLink{
    margin-top:30px;
}
.backLink a{
    text-decoration:underline;
}
.cartArea label{
    width:100px;
}
.cartArea select{
	width: 150px;
	border: 1px solid #ddd;
	border-radius: 12px;
}
@media (max-width: 900px){
    .detailGrid{
        grid-template-columns: 1fr;
        gap:24px;
    }
    .detailTitle{
        font-size:26px;
    }
}

/*カート*/
.container{
	max-width:1000px;
	margin:0 auto;
}
.step{
	display:flex;
	gap:8px;
	flex-wrap:wrap;
	margin:0 0 40px;
	padding:0;
	list-style:none;
}
.step li{
	padding:8px 12px;
	border-radius:999px;
	background:#d1c8b3;
	color:#555;
	font-size:14px;
}
.step li.current{
	background:#111827;
	color:#fff;
}
.card{
	background:#fff;
	border:1px solid #ddd;
	border-radius:10px;
	padding:20px;
	margin-bottom:20px;
}
.cart-table{
	width:100%;
	border-collapse:collapse;
	background:#fff;
}
.cart-table th,
.cart-table td{
	border:1px solid #ddd;
	padding:10px;
	text-align:center;
	vertical-align:middle;
}
.cart-table th{
	background:#d1c8b3;
}
.qty-box{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:6px;
}
.qty-box input{
	width:60px;
	padding:2px 6px;
	border: 1px solid #ddd;
	text-align: end;
}
.qty-box button{
	width:30px;
	height:30px;
	cursor:pointer;
	background: #eee;
}
.del_btn a{
	background: #ddd;
	border-radius: 50px;
	padding: 5px 25px;
}
.del_btn a:hover{
	background: #333;
	color: #fff;
}
.btn{
	display:inline-block;
	padding:11px 18px;
	border:none;
	border-radius:6px;
	cursor:pointer;
	text-decoration:none;
	font-size:15px;
}
.btn-light{
	background:#fff;
	border:1px solid #ccc;
	color:#333;
}
.btn-light:hover{
	background:#d1c8b3;
}
.summary p{
	border-bottom: 1px dashed #ddd;
	padding: 15px 15px 10px;
}
.summary a{
	border-bottom: 1px solid #ddd;
	padding: 0 15px;
	
}
.btn-dark{background:#111827;color:#fff;}
.summary p{margin:8px 0;font-size:17px;}
.notice{font-size:13px;color:#b45309;margin-top:8px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-grid .full{grid-column:1 / -1;}
label{display:block;font-weight:700;margin-bottom:6px;}
input[type="text"],input[type="email"],textarea,select{width:100%;padding:10px;border:1px solid #ccc;border-radius:6px;box-sizing:border-box;}
textarea{min-height:120px;resize:vertical;}
.req{color:#dc2626;font-size:12px;margin-left:6px;}
.error-box{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:14px 16px;border-radius:8px;margin-bottom:16px;}
.error-box ul{margin:8px 0 0 20px;}
.help{font-size:13px;color:#666;margin-top:5px;}
.pay-box{display:grid;gap:10px;}
.pay-option{border:1px solid #ddd;border-radius:8px;padding:12px;}
.pay-option strong{display:block;margin-bottom:4px;}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;}
@media (max-width: 720px){
  .form-grid{grid-template-columns:1fr;}
  .cart-table,
  .cart-table thead,
  .cart-table tbody,
  .cart-table tr,
  .cart-table th,
  .cart-table td {
    display: block;
  }

  .cart-table tr {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px;
  }

  .cart-table th {
    display: none;
  }

  .cart-table td {
    text-align: left;
    padding: 6px 10px;
    border: none;
  }

  .cart-table td::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
    margin-bottom: 2px;
    color: #666;
  }
}