@charset "utf-8"; 
/* CSS Document */
.topimg{ margin-bottom:10px;}
#main{ padding:30px 0; width:70%; height:100%; float:left; text-align:left;}
#sub{ padding:30px 0; width:30%; height:100%; float:right; text-align:left;}

#main section{ margin-bottom:9px; position:relative;}
#main section#snsbox{ margin-bottom:0; background:#DDDDDD;}
#main h2,#sub h2{ margin-bottom:10px; padding:10px; background:#ffffff; color:#333333; text-align:center; font-weight:bold; font-size:1.2em;}
#main h2 span,#sub h2 span{ color:#CCCCCC;}
#main .container{ padding: 0 10px;}
#main .container article{ margin:0 2% 20px 0; padding:10px; width:15%; float:left; position:relative; word-break:break-all; text-align:left; box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);}
#main .container article:nth-child(6n){ margin:0 0 20px 0;}
#main .container article a{ display:block;}
#main article .img{ position:relative;}
#main article .img .officon{ padding:2px; position:absolute; bottom:2px; right:2px; background:#FF0004; color:#FFFFFF;}
#main article .cat{ line-height:1.4; font-weight:normal; font-size:10px; white-space: nowrap; overflow: hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis;}
#main article .name{ height:44px; text-align:left; line-height:1.4; font-weight:normal; font-size:10px; color:#000000; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis;}
/*Multiline text with ellipsis*/
#main article .name{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
#main article .pricebox{ text-align:left;}
#main article .price{ color: #ED5B14;}
#main .morelink-re{ position:absolute; top:5px; right:20px;}
#main .morelink-re img{ width:30px; height:30px;}
#main .morelink{ position:absolute; top:5px; right:5px;}
#main .morelink a{ padding:5px; display:block; text-align:center; background:#FFFFFF; color:#000000; font-weight:bold;}

#topcategory li{ margin:0 1% 20px 1%; width:23%; float:left; box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; behavior: url(border-radius.htc); text-align:center;}
#topcategory li a{ color:#000; font-weight:bold;}
#topcategory li .img{ padding:10px 10px 0 10px;}
#topcategory li .txt{ padding:10px; text-align:center;}

#sub section#topics { margin-bottom:0;}
#topics h2{ margin-bottom:0;}
#topics .container{ margin:0;}
#topics .container article{ margin:0; padding:10px; border-bottom:1px solid #CCC;}
#topics .container article:last-child{ border-bottom:none;}
#topics a{ display:block; color:#333;}
#topics a:hover{ color:#999;}
#topics .img{ width:20%; float:left;}
#topics .txt{ padding-left:10px; width:80%; float:right;}
#topics .txt h4{ margin-bottom:10px;}

#sub section{ margin-left:20px; margin-bottom:20px; position:relative;}

#infomation .container div{ padding:2px 0;}
#infomation .date{ margin-right:5px;}
/*#infomation h2{ color:#333333; text-align:center; font-weight:bold; font-size:1.2em;}*/
#infomation h2{ color:#707070; text-align:center; font-weight:nomal; font-size:19px;}
#ranking a{ display:block;}
#ranking .rankbox{ margin-bottom:10px; padding:5px; position:relative; background:#f8f8f7;}
#ranking .rank{ width:20px; float:left;}
#ranking .img{ margin-right:10px; width:50px; float:left;}

#snsbox h2{ margin-bottom:20px;}
#snsbox li{ width:25%; float:left; text-align:center;}
#snsbox li a{ display:block;}
#snsbox li img{ width:30px; height:30px;}

#topimg li{ margin:0 1% 10px 1%; box-shadow: 1px 1px 5px #999;}

#pickup{ width:100%;}
#pickup li{ margin:0 1% 10px 1%; width:48%; float:left; box-shadow: 1px 1px 5px #999;}

@media only screen and (max-width:1060px){
#main{ margin:0 auto; width:100%; float:none;}
#sub{ margin:0 auto; width:100%; float:none;}
#sub section{ margin-left:0;}
#infomation .container{ padding:0 2% 10px;}
#ranking .container{ padding:0 2%;}
#sub section#snsbox{ margin-bottom:0; background:#DDDDDD;}
#snsbox .container{ margin-bottom:0;}
#snsbox h2{ margin-bottom:0;}
#snsbox li a{ padding:20px 0;}
}
@media only screen and (max-width:909px){
#main{ padding:0;}
#sub{ padding:0;}
#topics{ font-size:88%;}
}
@media only screen and (max-width:599px){
#main article .pricebox{ font-size:80%;}
#pickup .pickupbtn .img{ margin:0 auto; width:40px;}
#pickup .pickupbtn .slick-center .img{ width:50px;}
#main .container article{ width:32%;}
#main .container article:nth-child(3n){ margin:0 0 20px 0;}

#topcategory li{ margin:0 2% 20px 0; width:32%; float:left; border:1px solid #CCC; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; behavior: url(border-radius.htc); text-align:center;}
#topcategory li:nth-child(3n){ margin:0 0 20px 0;}
#topcategory li .txt{ font-size:80%;}

#topcategory div.button {
  margin-top:17px;
  display: block;
  width: 100vw;
  height: 65px;
  text-align: center;
  padding: 0 4vw;
}

#topcategory div.button:last-child {
   margin-bottom:22px;
}

#topcategory div.button a {
  display: table-cell;
  width: 92vw;
  height: 65px;
  text-align: center;
  margin: 0 auto;
  vertical-align: middle;
  background-color: #f1f1f1;;
}


#topcategory div.button a {
	color:black;
	text-decoration: none;
}
}
/* SP UI改善に伴うCSS追記部分 20240307 */
.toppage {
    width: 95%;
    max-width: 1000px;
    margin: 0 auto;
	color: #707070;
}
.toppage a {
    text-decoration: none;
	color: #707070;
}
.toppage h2 {
    width: 100%;
    margin: 30px auto 0;
    border-top: 1px solid black;
    text-align: center;
    padding: 30px 0 30px 0;
	font-weight: nomal;
	font-size: 19px;
}
.toppage hr{
	width: 75%;
	margin: 0 auto;
}
.toppage .list_button {
    border: solid 1px #000000;
    padding: 10px 0;
    display: block;
    text-align: center;
    width: 75%;
    margin: auto;
    margin-bottom: 10px;
}
.toppage .search img {
    width: 70%;
    height: auto;
}

/* 20240730 齋藤 */
.toppage .check li {
    width: 100%;
    display: inline-block;
    margin:0.65rem 0 0 0;
    padding-top:8px;
    border-top:dotted 1px black;
  }
.toppage .check li img {
    width: 2.6rem;
    height: auto;
    /* width: 60%; */
    float: left;
    margin-right: 1.3rem;
    margin-left: 1.1rem;
}

.toppage .check li p {
    min-width:17rem;
    display: inline-block;
    line-height: 2.6rem;
    vertical-align: middle;
   font-size:1.1rem;
}

.toppage .check li.arc{
   text-align:center;
}

.toppage .check li.arc a p{
   text-decoration:underline;
}


.toppage .button-cnt {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-bottom:3px;
}
.toppage .button-cnt .column3 {
    width: calc(33.33% - 20px);
    margin: 0 5px 10px;
    box-sizing: border-box;
    text-align: center;
/*	border-right: 1px solid black;*/
}
.toppage .button-cnt .column3:last-child {
    border-right: none;
}
.toppage .button-cnt .column3 p {
    margin-top: 0px;
    margin-bottom: 3px;
	font-weight: bolder;
}
.toppage .column3 img {
    width: 45%;
}
.toppage .specials {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.toppage .specials img {
	width: 100%;
}
.toppage .specials .sp_item {
	text-align:center;
	margin-bottom:10px
}
.toppage .specials p {
	margin-top: 5px;
    margin-bottom: 5px;
}
.toppage .sp_item {
    width: calc(50% - 20px);
    margin-bottom: 10px;
    box-sizing: border-box;
}
.toppage .gov_discount {
	text-align:center;
	margin-top: 10px;
	margin-bottom: 10px;
}
.toppage .gov_discount img{
	width: 58%;
}
.toppage .gov_discount p{
	margin-top: 10px;
	margin-bottom: 5px;
	font-size: 1em;
	white-space: nowrap;
}
.toppage .pick {
	text-align:center;
}
.toppage .pick div {
	padding-bottom: 30px;
}
.toppage .pick img {
	width: 90%;
}
.toppage .snslist {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
	padding-bottom: 10px;
}
.toppage .snslist h2 {
    width: 100%;
    text-align: center;
}
.toppage .snslist a {
    width: 15%;
    height: auto;
    margin-right: 3%;
	margin-left: 3%;
    display: inline-block;
    text-align: center;
}
.toppage .snslist img {
	width: 100%;
}
.toppage .usinfo {
	font-size:0.68rem;
	border:solid 1px;
	padding:0.3rem 0.5rem 0.3rem 0.5rem;
	margin-top:0.3rem;
	margin-bottom:0.3rem;
}

.toppage .mail-caution {
    text-align: center;
}
.toppage .mail-caution a {
	display: inline-block;
}
.toppage .mail-caution img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.toppage .eventbanner {
	margin:15px 7px 10px 7px;
}
.toppage .eventbanner img {
	padding:0 2px 0 2px 0;
	width:100%;
}

.newitem .container {
    width: 100%;
	margin-left:1.3%;
}

.newitem .container article {
    margin: 0 2% 20px 0;
    /* display: flex; */
    padding: 9px 20px;
    width: 31%;
    height: 182px;
    float: left;
    position: relative;
    word-break: break-all;
    text-align: left;
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
}
.newitem .container article:nth-child(6n){ 
	margin:0 0 20px 0;
}
.newitem .container article a{ 
	display:block;
}
.newitem article .img{
	position:relative;
}
.newitem article .img .officon{
	padding:2px; position:absolute; bottom:2px; right:2px; background:#FF0004; color:#FFFFFF;
}
.newitem article .cat{
	line-height:1.4; font-weight:normal; font-size:10px; white-space: nowrap; overflow: hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis;
}
.newitem article .name{
	height:44px; text-align:left; line-height:1.4; font-weight:normal; font-size:10px; color:#000000; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis;
}
.newitem article .name{
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
}
.newitem article .pricebox{
	text-align:left;
}
.newitem article .price{
	color: #ED5B14;
	font-size: 11px;
}