@charset "utf-8";
/* CSS Document 260311 */
* {margin:0; padding:0;}
#timesale { padding: 0px; margin: 0px; }
#timesale h1 { padding: 0px; margin: 0px; }
#timesale p { padding: 0px; margin: 0px; }
.color-red{ color: #c90027; }
#goods button{ background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; }
#goods a { text-decoration: none; }
#goods a img:hover { opacity:0.5; }
#goods-end .color { color: #3c1d0e; }
/* -------------------------------------------------------------------- 
カウンター
-------------------------------------------------------------------- */
#countdown-text {
margin-right: 10px;
font-size: clamp(1rem, 3vw, 1.8rem);
border: 1px solid #fff;
padding: 2px 8px;
font-weight: bold;
color: #fff;
}
#countdown-timer {
font-weight: bold;
}
/* 表示のガタつきをなくすためのスタイル */
#countdown-timer span {
font-size: clamp(2rem, 5vw, 2.5rem);
display: inline-block;
font-weight: bold;
margin-right: 5px;
color: #fff;
}
/* 単位部分のスタイル修正 */
#countdown-timer .unit {
font-size: clamp(1rem, 3vw, 1.8rem);
font-weight: normal;
margin-right: 10px;
}
/*===============================================
●SP 画面の横幅が640pxまで
===============================================*/
@media only screen and (max-width: 768px) {
.pc { display: none !important; }
.sp { display: block !important; }
#contents { margin-bottom:20px; }
.title-opp { position: relative; }
.title-opp2 { margin-bottom:40px; }
/* -------------------------------------------------------------------- 
終了
-------------------------------------------------------------------- */
#goods-end { padding: 0px; margin: 20px 8px 0px; text-align: center; }
#goods-end h2 { margin: 20px 0px 0px; }
.fontSize24 { font-size: 100%; line-height: 1.5; }
#goods-end .box { width: 100%; }
#goods-end .banner { width: 100%; }
/* -------------------------------------------------------------------- 
商品
-------------------------------------------------------------------- */
#goods{ padding: 0px; margin: 0px 10px; overflow: hidden; }
#goods .topics_item_group { overflow: hidden;}
#goods .topics_item_group_ul_left { overflow: hidden; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #ccc; }
#goods .topics_item_group_ul_right { overflow: hidden; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #ccc; }
#goods .topics_item_group_li_left { width: 47%; float: left; margin: 0px 8px 0px 0px; }
#goods .topics_item_group_li_right { width: 47%; float: left; margin: 0px 0px 0px 8px; }
#goods .topics_item_group_li img { padding:0px; margin:0px; width:100%; }
#goods .infoicon { margin:auto; padding: 8px 0px; }
#goods .copy { color: #333; font-size: 12px; line-height: 1.2; padding-top: 8px; }
#goods .type { background: #eee; color: #000; font-size: 12px; padding: 0px 6px; }
#goods .name_a { color: #333; font-size: 14px; line-height: 1.5; }
#goods .kakakubox { padding:0px 0px 8px; margin: 0px; }
#goods .kakaku_a { color: #A0A0A0; font-size: 12px; text-align: left; }
#goods .kakaku_b { color: #c90027; font-size: 12px; text-align: left; font-weight: bold; line-height: 1.2; }
#goods .kakaku_c { color: #333; font-size: 12px; text-align: left; font-weight: bold; line-height: 1.2; }
#goods .count_area { padding-bottom: 12px; }
#goods .count_area1 { font-size: 12px; }
#goods .count_area2 {
    width: 100%;                    /* 追加 */
    box-sizing: border-box;         /* 追加（推奨） */
    border: 1px solid #ccc;
    font-size: 14px;
    padding: 8px 32px 8px 8px;
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="%23666" d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    border-radius: 0;
}
.fontSize36 { font-size:24px; }
#goods .topics_button { margin: auto; padding: 8px 18px; font-size: 14px; line-height: 1.5; text-align: center; border: 1px solid #ccc; background-color: #fff; width: 100%; }
/* -------------------------------------------------------------------- 
カウンター
-------------------------------------------------------------------- */
#countdown-container {
max-width: 768px;
width: 100%;
margin: auto;
position: absolute;
/*bottom: 5%;*/
top: 0%;
left: 0;
right: 0;
background-color: #853215;
color: #fff;
text-align: center;
padding: 4px 0;
/*z-index: 1000;*/
display: flex; /* PC表示では横並び */
justify-content: center;
align-items: center;
flex-wrap: wrap; /* 子要素の折り返しを許可 */
}
#countdown-container {
flex-direction: column; /* 縦並びに変更 */
}
#countdown-text {
margin-right: 0;
margin-bottom: 1px;
}
}
/*===============================================
●PC 画面の横幅が640px
===============================================*/
@media only screen and (min-width: 768px) {
.pc { display: block !important; }
.sp { display: none !important; }
#contents { margin-bottom:20px; }
.br-pc { display:none; }
.title-opp { position: relative; }
.title-opp2 { margin-bottom:80px; }
/* -------------------------------------------------------------------- 
終了
-------------------------------------------------------------------- */
#goods-end { padding: 0px; margin: 50px 0px 0px; width: 1024px; text-align: center; }
#goods-end h2 { margin: 50px 0px 0px; }
.fontSize24 { font-size: 24px; line-height: 1.5; }
#goods-end .box { width: 100%; display: flex; }
#goods-end .banner { width: 98%; }
/* -------------------------------------------------------------------- 
商品
-------------------------------------------------------------------- */
#goods{ width: 800px; padding: 0px; margin: 0px auto; overflow: hidden; }
#goods .topics_item_group { overflow: hidden; margin-bottom: 80px; }
#goods .topics_item_group_ul_left { float: left; width: 374px; padding: 0px; margin: 0px; text-align: left; color: #333; }
#goods .topics_item_group_ul_right { float: right; width: 374px; padding: 0px; margin: 0px; text-align: left; color: #333; }
#goods .topics_item_group_li_left { width: 47%; float: left; margin: 0px 8px 0px 0px; }
#goods .topics_item_group_li_right { width: 47%; float: left; margin: 0px 0px 0px 8px; }
#goods .topics_item_group_li img { padding:0px; margin:0px; width:100%; }
#goods .infoicon { margin:auto; padding: 8px 0px; }
#goods .copy { color: #333; font-size: 12px; line-height: 1.2; padding-top: 8px; }
#goods .type { background: #eee; color: #000; font-size: 12px; padding: 0px 6px; }
#goods .name_a { color: #333; font-size: 14px; line-height: 1.5; }
#goods .kakakubox { padding:0px 0px 8px; margin: 0px; }
#goods .kakaku_a { color: #A0A0A0; font-size: 12px; text-align: left; }
#goods .kakaku_b { color: #c90027; font-size: 12px; text-align: left; font-weight: bold; line-height: 1.2; }
#goods .kakaku_c { color: #333; font-size: 12px; text-align: left; font-weight: bold; line-height: 1.2; }
#goods .count_area { padding-bottom: 12px; }
#goods .count_area1 { font-size: 14px; }
#goods .count_area2 {
    width: 100%;                    /* 追加 */
    box-sizing: border-box;         /* 追加（推奨） */
    border: 1px solid #ccc;
    font-size: 14px;
    padding: 8px 32px 8px 8px;
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="%23666" d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    border-radius: 0;
}
.fontSize36 { font-size:26px; }
#goods .topics_button { margin: auto; padding: 8px 18px; font-size: 14px; line-height: 1.5; text-align: center; border: 1px solid #ccc; background-color: #fff; width: 100%; }
#goods .topics_button a { display: block; color: #000; }
#goods .topics_button:hover { color: #000; background: #eee; text-decoration:none; }
/* -------------------------------------------------------------------- 
カウンター
-------------------------------------------------------------------- */
#countdown-container {
max-width: 1024px;
width: 100%;
margin: auto;
/*position: absolute;*/
/*bottom: 6%;*/
left: 0;
right: 0;
background-color: #853215;
color: #fff;
text-align: center;
padding: 8px 0;
/*z-index: 1000;*/
display: flex; /* PC表示では横並び */
justify-content: center;
align-items: center;
flex-wrap: wrap; /* 子要素の折り返しを許可 */
}
/*20290909*/
#countdown-container {
max-width: 1024px;
width: 100%;
margin: auto;
position: absolute;
top: 0%;
left: 0;
right: 0;
background-color: #853215;
color: #fff;
text-align: center;
padding: 8px 0;
/*z-index: 1000;*/
display: flex; /* PC表示では横並び */
justify-content: center;
align-items: center;
flex-wrap: wrap; /* 子要素の折り返しを許可 */
}
}