@charset "UTF-8";

/* INDEX
-------------------------------------------
1. main layout
2. navigation
3. link style
4. common parts
-------------------------------------------*/


/* 1. main layout
-------------------------------------------*/

@media print{
#wrapper{
position: absolute;
}
}

#header{
margin:0px auto;
padding:15px 0px 0px 0px;
width:100%;
max-width:1080px;
height:85px;
position:relative;
z-index:2;
}


#contents{
margin:0;
padding:20px 0px 5px 0px;
width:100%;
position:relative;
z-index:1;
}

#maincol{
margin:0px auto;
padding:0px;
width:100%;
max-width:1080px;
}

#maincol .top{
border-top:1px #FFFFFF solid;
border-bottom:1px #FFFFFF solid;
position:relative;
}

#brand-list{
  width:100%;
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-wrap: wrap;
  margin:20px 0;
}

#brand-list li{
  width:calc((100% - 20px) / 5);
	position: relative;
}

#brand-list li:first-child{
  width:100%;
}

#brand-list li img{
  width:100%;
}

#original{
  width:100%;
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap:         nowrap;
  margin:20px 0;
}

#original_item{
  width:calc(100% / 6 * 4);
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-wrap: wrap;
  margin-right:3%;
}

#original_item li{
  width:calc((100% - 15px) / 4);
  border:1px solid #999;
  display:table-cell;
}

#original_item li img{
  width:100%;
}

#original_title{
  width:calc(100% / 6 * 2);
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-wrap: wrap;
}

#original_title li{
  width:calc((100% - 5px) / 2);
  border:1px solid #999;
  display:table-cell;
}

#original_title li img{
  width:100%;
}

#list_event_campaign{
  width:100%;
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap:         nowrap;
  margin:20px 0;
}

#list_event{
  width:calc(100% / 6 * 3);
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-wrap: wrap;
  margin-right:3%;
}

#list_event li{
  width:calc((100% - 10px) / 3);
  border:1px solid #999;
  display:table-cell;
}

#list_event li:last-child{
  border:none;
  width:100%;
  text-align:center;
  background:#666;
  margin:0.5em 0 0.5em 0;
}

#list_event li:last-child a{
  padding:0.5em;
  display:block;
  color:#fff;
}

#list_event li img{
  width:100%;
}

#list_campaign{
  width:calc(100% / 6 * 3);
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-wrap: wrap;
}

#list_campaign li{
  width:calc((100% - 10px) / 3);
  border:1px solid #999;
  display:table-cell;
}

#list_campaign li:last-child{
  border:none;
  width:100%;
  text-align:center;
  background:#666;
  margin:0.5em 0 0.5em 0;
}

#list_campaign li:last-child a{
  padding:0.5em;
  display:block;
  color:#fff;
}

#list_campaign li img{
  width:100%;
}



#list_search_title{
  width:100%;
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap:         nowrap;
  margin:20px 0;
}

#list_title{
  width:100%;
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-wrap: wrap;
  margin-right:0px;
}

#list_title li{
  margin-right:5px;
  margin-bottom:5px;
  width:calc((100% - 35px) / 6);
  border:1px solid #999;
  text-align:center;
  padding:0.5em;
}

#list_title li a{
  display:block;
  height:40px;
}

#list_title li img{
  width:100%;
  height:80px;
}

#list_title li:last-child{
  border:none;
  width:100%;
  background:#666;
  margin:0.5em 0 0.5em 0;
}

#list_title li:last-child a{
  height:auto;
  color:#fff;
}




#list_oshirase_media{
  width:100%;
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap:         nowrap;
  margin:20px 0;
}

#list_oshirase{
  width:calc(100% / 2);
  margin-right:3%;
}

#list_oshirase li{
  width:100%;
  text-align:left;
  padding:0.5em 1.5em;
}

#list_media{
  width:calc(100% / 2);
}

#list_media li{
  width:100%;
  text-align:left;
  padding:0.5em 1.5em;
}




#officialsns_mailmaga{
  width:100%;
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap:         nowrap;
  margin:20px 0 0 0;
}

#officialsns{
  width:calc(100% / 5 * 4);
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-wrap: wrap;
  margin-right:3%;
}

#officialsns li{
  width:calc((100% - 15px) / 4);
  text-align:left;
  padding:0.5em;
  font-size:90%;
}

#open-tw{height: 130px;overflow: hidden;transition: height 1s; -webkit-transition: height 1s;}
#open-tw:hover{height: 250px;}

#officialsns li img.officialsns{
  width:30%;
  float:left;
  margin-right:1em;
  margin-bottom:0.5em;
}

.twitter_select   {
    border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    width:100%;
    border:1px #ccc solid;
    background:#fff;
    padding:0.6em 0.6em 0;
    margin-top:0.6em;
    z-index:100;
}

.twitter_select p a {
display:block;
}

.twitter_select p img {
  width:20%;
  margin-right:0.6em;
  margin-bottom:0.6em;
  vertical-align: middle;
}

#mailmaga{
  width:calc(100% / 5 * 1);
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-wrap: wrap;
}

#mailmaga li{
  width:calc((100% - 0px) / 1);
  text-align:left;
  padding:0.5em;
  font-size:90%;
  height: 100%;
}

#mailmaga li img{
  width:30%;
  float:left;
  margin-right:1em;
}



#topLeft,#topCenter,#topRight {
float: left;
}

.hline0 {
clear: both;
}

.hline1 {
clear: both;
padding-top:15px;
}

#topLeft {
width: 202px;
margin:0 0px 10px 0px;
padding:0px 9px 5px 5px;
}

#topCenter {
width: 300px;
margin:0 0px 10px 0px;
border-left:1px #ccc solid;
border-right:1px #ccc solid;
padding:0px 9px 5px 9px;
}

#topRight {
width: 300px;
margin:0 0px 10px 0px;
padding:0px 5px 5px 9px;
overflow:hidden;
}

#topLeft ul li{
float: left;
padding:5px 0;
border-bottom:1px #666666 dotted;
width:202px;
font-size:90%;
}

#topCenter ul li,#topRight ul li{
float: left;
padding:5px 0;
border-bottom:1px #666666 dotted;
width:300px;
font-size:90%;
}

#topLeft img.newsimg,#topCenter img.newsimg,#topRight img.newsimg{
float: left;
margin-right:5px;
border:1px #666666 solid;
width:60px;
height:39px;
}

#topLeft img.specialimg{
float: left;
border:1px #666666 solid;
}

#topLeft ul li p,#topLeft ul li em,
#topCenter ul li p,#topCenter ul li em,
#topRight ul li p,#topRight ul li em{
font-size:85%;
}

/* #footer {
width:100%;
clear: both;
background:#f1f1f1;
    margin-top: 2em;
} */

/* 2. navigation
-------------------------------------------*/


/* 3. link style
-------------------------------------------*/
/* a{
overflow:hidden;
}

a:link{
color:#069;
text-decoration:none;
}

a:visited{
color:#069;
text-decoration:none;
}

a:hover{
color:#FF6600;
text-decoration:underline;
}

a:active{
color:#FF6600;
text-decoration:underline;
} */

/* 4. common parts
-------------------------------------------*/
/* 4.1 of header
-------------------------------------------*/
.wrap_head{
background-color:#000066;
}

#logo{
padding:23px 30px 7px 5px;
float:left;
}

#ham-menu{
float:right;
}

#ham-menu ul li{
margin:17px 0px 5px 0px;
border-left:solid 1px #666666;
float:left;
}

#ham-menu ul li a{
padding:10px 20px 10px 20px;
font-size:90%;
color:#333;
display:block;
}

/* 4.2 of content
-------------------------------------------*/

/* .red{
color:#CC0000;
} */

.bline{
border-bottom:dotted 1px #6699FF;
padding-bottom:5px;
margin-bottom:10px;
}

.rline{
border-right:dotted 1px #6699FF;
}

/* 4.3 of footer
-------------------------------------------*/
.go_top{
padding:5px 0px 0px;
text-align:center;
}

.txt_copy{
padding:10px 20px 5px 0px;
text-align:center;
}

#contents #fade {
	position:relative;
	width: 850px;
	height: 350px;
	clear: both;
	margin: 0px auto 10px;
}

#contents #view p {
	bottom: 0px;
	right: 0px;
	position: absolute;
}

#contents .eleventh_img {
	display: none;
}

#contents .otherdays_img {
	display: none;
}

#thumbBtn {
	position:relative;
	margin:0 auto 20px auto;
	width:560px;
}

#thumbBtn li {
	width: 110px;
	height: 38px;
	padding:0;
	margin:2px 0px;
	float:left;
	text-align:right;
	cursor:pointer;
	opacity:1;
	filter:alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
}

#thumbBtn li.active, #thumbBtn li:hover {
	opacity:0.5;
	filter:alpha(opacity=50);
	-ms-filter: "alpha( opacity=50 )";
	width: 107px;
	border-left: solid 3px #ccc;
}

#thumbBtn li img {
	border: solid 0px #ccc;
}

#menu-title {
	position:absolute;
	top:260px;
	left:5px;
	width:120px;
	background:url(../pub/menu-product.jpg) no-repeat;
	padding-top:28px;
}

#menu-title li {
	width: 110px;
	height: 38px;
	padding:2px 0;
	margin:0px;
	float:left;
	text-align:right;
	cursor:pointer;
	opacity:1;
	filter:alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
}

#menu-title li.active, #menu-title li:hover {
	opacity:0.5;
	filter:alpha(opacity=50);
	-ms-filter: "alpha( opacity=50 )";
	width: 107px;
	border-left: solid 3px #ccc;
}

/*サーチボックス*/
/* .p-header__search {
    margin-left: auto;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-shrink: 10;
    -ms-flex-negative: 10;
    flex-shrink: 10;
    height: 100%;
} */
/* .p-searchform__select {
    font-family: 'Noto Sans Japanese', sans-serif;
    height: 100%;
    border: 1px solid #505050;
    border-radius: 3px 0 0 3px;
    font-size:80%;
} */
/* .p-searchform__text {
    font-family: 'Noto Sans Japanese', sans-serif;
    background: #fff;
    -webkit-box-flex: 10; */
    /* -webkit-flex-grow: 10; */
    /* -ms-flex-positive: 10; */
    /* flex-grow: 10; */
    /* border: 0;
    border-top: 1px solid #505050;
    border-right: 0;
    border-bottom: 1px solid #505050;
    border-left: 0;
    height: 100%;
    padding-left: 0.5em;
} */
/* .p-searchform__submit {
    font-family: 'Noto Sans Japanese', sans-serif;
    background: #505050;
    border: 0;
    color: #fff;
    width: 60px;
    font-size: 1em;
    border-top: 1px solid #505050;
    border-right: 1px solid #505050;
    border-bottom: 1px solid #505050;
    border-left: 0;
    border-radius: 0 3px 3px 0;
    height: 100%;
} */

/*
@media screen and (max-width: 768px) {

  .p-searchform__submit {
      font-family: 'Noto Sans Japanese', sans-serif;
      background: #505050;
      border: 0;
      color: #fff;
      max-width: 60px;
      font-size: 1em;
      border-top: 1px solid #505050;
      border-right: 1px solid #505050;
      border-bottom: 1px solid #505050;
      border-left: 0;
      border-radius: 0 3px 3px 0;
      height: 100%;
      width: 100%;
}*/

/*プレースフォルダ*/
/* .focus{
} */

/* .searchbox{
position:relative;
width:100%;
max-width: 380px;
height:30px;
padding: 0 1em;
margin-top:20px;
float:right;
} */

.searchsubmit{
margin:6px 10px 0 8px;
float:left;
}

/* .searchstock{
margin:12px 10px 0 3px;
} */

.searchstock input{
vertical-align:middle;
}



.att_topic{
position:relative;
margin:-5px auto 5px;
padding:7px 7px;
width:914px;
background:#F9CEC6;
border:2px solid #E7421F;
font-weight:bold;
color:#c00;
}

/* ▼表示領域が1000px未満の場合 */
@media screen and (max-width: 1000px) {

#logo{
    padding:30px 20px 7px 5px;
}
#logo img {
    width: 100px;
}

}





/* brand
-------------------------------------------*/

.itemname {
	position: absolute;
	text-align:center;
	color:#fff;
	height: 0px;
  width:100%;
	left: 0;
	bottom:0;
	z-index: 2;
	overflow: hidden;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
}

.itemname p {
  padding:0.5em;
}

#brand-list li:hover .itemname {
	height: 50px;
  width:100%;
}




.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    background-image: url(/pub/top_image/arrow-left.png);
    left: 10px;
    right: auto;
    width: 50px;
    height: 50px;
    background-size: contain;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-image: url(/pub/top_image/arrow-right.png);
    right: 10px;
    left: auto;
    width: 50px;
    height: 50px;
    background-size: contain;
}
    .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        color:#000;
        opacity: 1;
        background: rgba(255,255,255,1);
        border:1px solid #666;
        border-radius: 0%;
    }
    .swiper-pagination-bullet-active {
        color:#fff;
        background: #191c4e;
    }


/* ▼表示領域が1080px以上の場合 */
@media screen and (min-width: 1080px) {
.swiper-button-prev {
  left: calc(50% - 560px);
  right: auto;
}

.swiper-button-next {
  right: calc(50% - 560px);
  left: auto;
}
}
/* ▼表示領域が1079px未満の場合 */
@media screen and (max-width: 1079px) {
.swiper-button-prev {
  left: 0%;
  right: auto;
  display:none;
}

.swiper-button-next {
  right: 0%;
  left: auto;
  display:none;
}
}

/* baseから
-------------------------------------------*/
#sid {
    display: none;
}

/* メインコンテンツ
-------------------------------------------*/
#inner {
    width: 100%;
    max-width: 1080px;
    margin:0 auto;
    /* padding:10px; */
}


.pixel {
    font-family:'Noto Sans Japanese', sans-serif;
    font-size:110%;
    font-weight:bold;
    padding-bottom:0.5em;
}