main{
width: 100%;
}


#Item header{
position: relative;
}


.ItemBody{
}

.ItemBody h3{
display: flex;
flex-direction: column;
gap: 2px;
padding: 16px 16px;
font-size: 18px;
font-weight: 500;
line-height: 24px;
color: rgb(10, 15, 24);
border-bottom: solid 1px #ddd;
/* 下の値段との間は .il の gap が持つ */
margin-bottom: 0;
}

.ItemBody h4 span{
font-weight: normal;
}


.ItemBody .variation .op{
display: flex;
width: 100%;
overflow-y: hidden;
overflow-x: auto;
}

.ItemBody .variation .op dl{
width: 28%;
padding: 10px;
border: solid 1px #ddd;
border-radius: 5px;
margin-right: 10px;
}

.ItemBody .variation .op dl.on{
background: #edf8ff;
box-shadow: inset 0 0 0 .2rem var(--aok-sfs-color-interaction-selected-normal-border, #2162a1);

}

.ItemBody .variation .op dd{
font-size: .8rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.ItemBody .variation .op .price{
text-align: right;
}

.price.normal{
color: #ccc;
text-decoration: line-through;
}




#ItemFooter{
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: rgba(255,255,255,.9);
z-index: 9999;
}

#ItemFooter button{
width: 6%;
}

#ItemFooter button.cart{
width: 80%;
color: #fff;
height: 48px;
border-radius: 4px;
background-color: var(--btn-button-color);
font-size: 1rem;
line-height: 22px;
font-weight: bold;
}

/* 売切れ・会員限定・受付停止のとき。押せないことが分かる色にする */
#ItemFooter button.cart[disabled]{
background-color: #b3aca2;
cursor: not-allowed;
}


/* 定価（販売価格と違うときだけ出る）。安くなっていることが分かるよう取り消し線 */
.priceBox .list{
color: #948c7c;
font-size: .8rem;
}
.priceBox .list .a-price-symbol,
.priceBox .list .a-price-whole{
text-decoration: line-through;
}

.priceBox .sale{
background: #c00;
color: #fff;
font-size: .8rem;
padding: 5px 10px;
border-radius: 4px;
font-weight: bold;
}


.priceBox .discount,
.priceBox .member .a-price-whole{
color: #CC0C39 !important;
font-weight: bold !important;
font-size: 1.8rem !important;
line-height: 1.2858 !important;
}


#variationImgDum{
position: absolute;
top:0;
left: 0;
z-index: 80;
display: none;
width: 100%;
}



#photo{
width: 100vw;
height: 100vh;
background: rgba(255,255,255,.9);
position: fixed;
top:0;
left: 0;
z-index: 70;
display: none;
}


#photo.in{
display: table;
width: 100%;
}

#photoDum {
width: 100%;
position: absolute;
top:0;
left: 0;
z-index: 100;
}

#photoDum .wrap{
width: 100%;
}

#photoDum .slider-thumbnail{
display: none;

}

/* 商品写真のスライダーは、下の静止画（header h2 の1枚目）に重ねて出している。
   写真の縦横比がそろっていない商品（例: 1枚目が正方形で2枚目が横長）だと、
   短い写真の下から静止画が透けて見えてしまう。
   そこで静止画もスライドも正方形の白い枠にそろえ、写真は枠の中に縦横比を保って収める */
#Item header h2 img{
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: contain;
background: #fff;
}

#photoDum .swiper-slide{
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
background: #fff;
overflow: hidden;
}

#photoDum .swiper-slide img{
width: 100%;
height: 100%;
object-fit: contain;
}

#photo.in .wrap{
position: absolute;
top:50%;
left: 50%;
width: 100vw;
transform: translate(-50%, -50%)
}


@media screen and (min-width: 640px) {
  #photo.in .wrap{
    width: 500px;
  }
}


.swiper-slide img{
width: 100%;
}

.slider-thumbnail .swiper-slide {
  opacity: .5;
  transition: opacity .5s;
  width: calc(100% / 5);
}
.slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}

/* 前へ次への矢印カスタマイズ */
.swiper-button-prev,
.swiper-button-next {
  height: 50px;
  width: 50px;
}
/* 前へ次への矢印カスタマイズ */
.swiper-button-prev::after,
.swiper-button-next::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 50px;
  margin: auto;
  width: 50px;
}
/* 前への矢印カスタマイズ */
.swiper-button-prev::after {
  background-image: url(../images/arrow_left_circle.svg);
}
/* 次への矢印カスタマイズ */
.swiper-button-next::after {
  background-image: url(../images/arrow_right_circle.svg);
}
/* 画像サイズ調整 */
.swiper-slide img {
  height: auto;
  width: 100%;
}

button {
appearance: none;
border: 0px;
background: none;
font-family: "Hiragino Sans", "Noto Sans JP", YuGothic, Meiryo, -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Arial, sans-serif;
font-size: inherit;
cursor: pointer;
line-height: 1.5;
}

.bXpWRa {
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
width: 38px;
height: 38px;
position: absolute;
top: 6px;
right: 8px;
}


.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
content: "" !important;
}






.itemNumber{
display: flex;
align-items: center;
/* 行の間は .il の gap だけにする（ここに上下の余白があると gap と足されて広がる） */
margin: 0;
}

.itemNumber dt{
border-radius: 50px;
padding: 5px 20px;
background: #ddd;
font-size: .7rem;
color: #000;
margin-right: 15px;
width: 25%;
text-align: center;
}

.itemNumber dd{
width: 70%;
}
.itemNumber select{
width: 100%;
display: block;
padding: 5px;
border-radius: 20px;
}

/* もとは #Info が class="box" から受けていた左右の余白。
   パーツに分けたので、分かれた5つに同じ余白を持たせる。
   上下の間隔は layout.css の .il の gap が持つので、左右だけでよい */
.il-part[data-item-part="item_price"],
.il-part[data-item-part="item_category"],
.il-part[data-item-part="item_model"],
.il-part[data-item-part="item_quantity"],
.il-part[data-item-part="item_review"],
.il-part[data-item-part="item_join"],
.il-part[data-item-part="item_info"],
.il-part[data-item-part="item_subcategory"] {
  padding: 0 16px;
}


.itemReview{
display: flex;
flex-wrap: wrap;
list-style: none;
width: 100%;
justify-content: space-between;
}

.itemReview li{
width: 49%;
text-align: center;
margin: 5px 0;
}

.itemReview li:nth-of-type(1){
}

.itemReview li a{
display: block;
width: 100%;
border-radius: 30px;
background: var(--btn-button-color);
padding: 10px 20px;
font-size: .7rem;
color: #fff;
}



.section h2{
font-size: 1rem;
padding: 12px 0 8px;
}



/* 上下の余白は .il の gap と見出しの余白が持つので、左右だけ */
#checked,
#customer{
padding: 0 10px;
width: 100%;
}

#checked .product,
#customer .product{
display: flex;
width: 100%;
overflow-y: hidden;
overflow-x: auto;
}

#checked .product .__item,
#customer .product .__item{
width: 32%;
border: solid 1px #ddd;
border-radius: 5px;
margin-right: 10px;
}

#checked .product .__item .title,
#customer .product .__item .title{
font-size: .8rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

#checked .product .__item .fav{
display: none;
}










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

シェア（navigator.share が使えないブラウザで出す小窓）

================================================
*/
#ItemFooter button.share{
min-width: 44px;
height: 44px;
border: 0;
background: none;
cursor: pointer;
}

#sharePanel{
position: fixed;
inset: 0;
z-index: 99950;
display: flex;
align-items: flex-end;
justify-content: center;
background: rgba(30,24,18,.45);
}

#sharePanel .box{
position: relative;
width: 100%;
max-width: 420px;
padding: 20px 20px 24px;
border-radius: 14px 14px 0 0;
background: #fff;
color: #2b2620;
}

@media screen and (min-width: 640px){
  #sharePanel{
  align-items: center;
  }
  #sharePanel .box{
  border-radius: 14px;
  }
}

#sharePanel .ttl{
margin-bottom: 16px;
font-size: .95rem;
font-weight: bold;
text-align: center;
}

#sharePanel .close{
position: absolute;
top: 8px;
right: 8px;
width: 44px;
height: 44px;
border: 0;
background: none;
font-size: 1rem;
color: inherit;
cursor: pointer;
}

#sharePanel .links{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
list-style: none;
}

#sharePanel .links a,
#sharePanel .links button{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 46px;
padding: 6px;
border: 1px solid #e7e2da;
border-radius: 8px;
background: #f6f3ee;
color: inherit;
font: inherit;
font-size: .85rem;
font-weight: bold;
cursor: pointer;
}

#sharePanel .links .line{background: #06c755; border-color: #06c755; color: #fff;}
#sharePanel .links .x{background: #000; border-color: #000; color: #fff;}
#sharePanel .links .facebook{background: #1877f2; border-color: #1877f2; color: #fff;}
#sharePanel .links .hatena{background: #00a4de; border-color: #00a4de; color: #fff;}
#sharePanel .links .copy.done{background: var(--btn-button-color, #7c6d5f); border-color: transparent; color: #fff;}

#sharePanel .url{
width: 100%;
margin-top: 12px;
padding: 10px;
border: 1px solid #e7e2da;
border-radius: 6px;
background: #fff;
color: #6b635a;
font-size: .75rem;
}


/* お気に入り（下部バーのハート）。登録済みは .on で塗りつぶす */
#ItemFooter button.fav{
min-width: 44px;
height: 44px;
border: 0;
background: none;
cursor: pointer;
}

#ItemFooter button.fav path{
transition: fill .15s ease, stroke .15s ease;
}

#ItemFooter button.fav.on path{
fill: #e0245e;
stroke: #e0245e;
}


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

同じカテゴリーの人気ランキング（#itemRanking）。item.js が閲覧履歴の上に作る

================================================
*/
#itemRanking{
padding: 0 10px;
width: 100%;
}

#itemRanking .product{
display: flex;
gap: 10px;
width: 100%;
padding: 12px 2px 6px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
}

#itemRanking .__item{
position: relative;
flex: 0 0 32%;
border: solid 1px #ddd;
border-radius: 5px;
background: #fff;
list-style: none;
scroll-snap-align: start;
}

#itemRanking .__item a{
display: block;
color: inherit;
}

#itemRanking .__item header h1 img{
display: block;
aspect-ratio: 1;
object-fit: cover;
border-radius: 5px 5px 0 0;
}

#itemRanking .__item ul{
list-style: none;
padding: 4px 6px 6px;
}

#itemRanking .__item .title{
font-size: .75rem;
line-height: 1.4;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

#itemRanking .__item .price{
margin-top: 2px;
font-size: .8rem;
font-weight: bold;
}

#itemRanking .__item .price em{
font-style: normal;
font-size: .6rem;
font-weight: normal;
}

#itemRanking .__item.out{
opacity: .55;
}

/* 順位の印。1〜3位は金・銀・銅 */
#itemRanking .__item::before{
content: attr(data-rank);
position: absolute;
top: -8px;
left: -4px;
z-index: 1;
min-width: 24px;
height: 24px;
padding: 0 4px;
border-radius: 12px;
background: #8a8178;
color: #fff;
font-size: .75rem;
font-weight: bold;
line-height: 24px;
text-align: center;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

#itemRanking .__item[data-rank="1"]::before{background: #c9a23a;}
#itemRanking .__item[data-rank="2"]::before{background: #9aa0a8;}
#itemRanking .__item[data-rank="3"]::before{background: #a86b40;}

@media screen and (min-width: 640px){
  #itemRanking .__item{
  flex-basis: 23%;
  }
}


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

LINEの友だち追加と新規会員登録（item_join）

================================================
*/
.itemJoin{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
list-style: none;
}

.itemJoin .signup a{
display: block;
border: solid 1px var(--btn-button-color);
border-radius: 30px;
padding: 8px 20px;
font-size: .8rem;
color: var(--btn-button-color);
}


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

商品ごとの情報欄（item_info）
カラーミーの「商品情報」に入れたHTMLがそのまま出るので、
中の写真が枠から出ないようにだけ面倒を見る

================================================
*/
.itemInfo{
padding: 0;
font-size: .85rem;
line-height: 1.8;
}

.itemInfo img{
max-width: 100%;
height: auto;
}


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

カテゴリー・グループの一覧（item_subcategory）

================================================
*/
.itemCategoryList ul.category{
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
margin: 0 0 8px;
}

.itemCategoryList ul.category li a{
display: block;
border: solid 1px #ddd;
border-radius: 30px;
padding: 6px 16px;
font-size: .75rem;
color: #5c5346;
background: #fff;
}

/* グループの一覧はカテゴリーと見分けが付くように薄い色の下地にする */
.itemCategoryList ul.category.grp li a{
background: #f6f3ee;
border-color: #e7e0d5;
}


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

お客様の声（item_reviews）

================================================
*/
/* 見出しは .section h2 の左右の余白が0なので、下の口コミ（左右16px）に合わせる */
#review h2{
padding: 12px 16px 8px;
}

#review .__review{
border-top: solid 1px #eee;
padding: 14px 16px;
}

#review .__review header{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}

#review .__review .star{
width: 80px;
height: auto;
}

/* 星5つの評価。カラーミーの星画像（star_XX.png）は星10個の絵で、評価5でも半分しか塗られない。
   そこで item.js が画像を .stars に差し替え、--star（0〜5）の割合だけ金色を重ねる。
   星の字はページの文字コードに左右されないよう \2605 で書く */
#review .__review .stars{
position: relative;
display: inline-block;
font-size: 15px;
line-height: 1;
letter-spacing: 1px;
color: #ddd;
white-space: nowrap;
}

#review .__review .stars::before{
content: "\2605\2605\2605\2605\2605";
}

#review .__review .stars::after{
content: "\2605\2605\2605\2605\2605";
position: absolute;
top: 0;
left: 0;
width: calc(var(--star, 0) / 5 * 100%);
overflow: hidden;
color: #f2a33a;
}

#review .__review .poster{
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
font-size: .7rem;
color: #948c7c;
}

#review .__review .ttl{
font-weight: bold;
font-size: .9rem;
margin: 8px 0 4px;
}

#review .__review .photo img{
max-width: 120px;
height: auto;
}

#review .__review .comment{
font-size: .85rem;
line-height: 1.8;
white-space: pre-line;
}

/* ショップからの返信。お客様の声と取り違えないよう一段下げる */
#review .__review .reply{
margin: 10px 0 0 12px;
padding: 10px 12px;
border-radius: 8px;
background: #f6f3ee;
font-size: .8rem;
line-height: 1.7;
}

#review .__review .reply .ttl{
margin: 0 0 4px;
font-size: .75rem;
}

#review .more{
padding: 12px 16px 0;
text-align: center;
}

#review .more a{
font-size: .8rem;
text-decoration: underline;
color: #5c5346;
}


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

カテゴリー紹介（item_catintro）
中身は app.sayakobo.jp の取得口が返すHTMLで、クラス名も向こうが決めている

================================================
*/
.category_viewer{
padding: 10px;
}

.category_viewer h2{
padding: 0 0 10px;
}

.category_viewer h2 img{
width: 100%;
height: auto;
border-radius: 8px;
}

.category_viewer ul{
display: flex;
flex-wrap: wrap;
gap: 10px;
list-style: none;
}

.category_viewer li{
width: calc(33.333% - 7px);
}

.category_viewer li a{
display: block;
font-size: .75rem;
text-align: center;
color: #5c5346;
}

/* 商品写真は背景画像で入ってくる（取得口の作り） */
.category_viewer li a span{
display: block;
width: 100%;
aspect-ratio: 1 / 1;
margin-bottom: 4px;
border: solid 1px #eee;
border-radius: 5px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}



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

この商品が出てくる動画（item_video）
「最近チェックした商品」と同じ横スクロールのカード。
サムネイルは16:9なので、そこだけ形を変える

================================================
*/
#itemVideo{
padding: 0 10px;
width: 100%;
}

/* 横に続きがある印（js.js が .hasScrollHint を付ける）の置き場。ぼかしは背景の白に合わせる */
#itemVideo .scrollBox{
position: relative;
}
#itemVideo .scrollBox.hasScrollHint{
--hint-bg: #fff;
}

#itemVideo .product{
display: flex;
width: 100%;
overflow-y: hidden;
overflow-x: auto;
}

/* 動画のカードは縦長（ショートの 9:16）が基本。横に2枚半ほど見えるので、続きがあることも分かる */
#itemVideo .__item{
flex: 0 0 36%;
border: solid 1px #ddd;
border-radius: 5px;
margin-right: 10px;
overflow: hidden;
}

/* 商品カードの画像枠は h1::before の padding-top:100% で正方形を作っている。
   動画は 16:9 なので、その割合だけ差し替える（画像は絶対配置のまま枠いっぱいに） */
#itemVideo .__item header h1::before{
padding-top: 177.78%;
}

#itemVideo .__item img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* 動画の題名は商品名より長い。2行で切る
   （line-clamp は商品カードの display に負けるので、高さでも止める） */
#itemVideo .__item .title{
/* 余白は padding ではなく margin で取る。overflow:hidden は padding の外側で切るので、
   padding に置くと3行目の頭が下の余白にのぞく */
padding: 0;
margin: 6px 8px;
font-size: .8rem;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
max-height: calc(1.4em * 2);
overflow: hidden;
}