@charset "euc-jp";]
html,body{margin:0;padding:0;}
html {overflow: auto;}
body {
	overflow: hidden;
	position: relative;
}
body, div, p, ul, li, a, h1 {margin: 0;padding: 0;}

ul,li,dl,dd,dt{margin:0;padding:0;}
li{list-style:none;}

/*-------------------------------
header部分
--------------------------------*/

div#header {
    margin: 0 auto;
    width: 100%;
border-bottom: solid 6px #003eb1;
margin-bottom:15px;
/*background: linear-gradient(#ffffff, #0058c5);
background-image: url("../../images/index/head_bg_w.png?5");*/
}

div#header div.info{
    position: relative;
    display: flex;
    align-items: center;
    padding: 5px 20px;
}


/*****検索*****/

ul#headNavi {
    /* width: 30%; */
    width: 20%;
    /*margin-left: 33px;*/
}
ul#headNavi li {
    float: left;
    border-left: none;
}
ul#headNavi form {
    position: relative;
}
ul#headNavi li input {
    vertical-align: middle;
    border: solid 1px #000;
    padding: 10px 3px;
border-radius: 50px;
}
ul#headNavi #textaria {
    padding-left: 2%;
}
ul#headNavi #search-button {
    width: 10%;
    position: absolute;
    top: 0%;
    left: 86%;
    padding: 2%;
    border: none;
}


/*****エンブレム*****/
div#header div.info div.emb{width: 12%;margin-right: -60px;}


/*****ナビボタン*****/

div#header div.info .shop{width: 62%;}
div#header div.info .shop li a{
    float: right;
    margin-right: 6px;
    display: inline-block;
    position: relative;
}


/*-------------------------------
SOM
--------------------------------*/
p.som_bn {
  text-align : center;
  margin-bottom:15px;
}


/*-------------------------------
メイン
--------------------------------*/

/*****メインスライダー*****/
div#wrapper{
    margin: 0 auto;
    text-align: left;
    width:auto;
}
.slide {
	overflow-x: hidden;
	margin: 0 -400px;
	padding: 0 400px;
}
@media screen and (max-width: 1079px) {
   .slide {margin:0;padding:0}
   
}
.slide-inner{
margin: 0 auto;
background-color: #fff;
}
.swiper-container {
    width: 720px;
    height: auto;
    overflow: visible;
    z-index: 1;
    padding-bottom: 26px;
}
.swiper-pagination-bullet{width:10px;height:10px;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 5px;}
.swiper-slide {text-align: center;}
.swiper-slide img{width: 720px;}
.swiper-pagination-bullet-active{background-color:#c50018;}
.swiper-button-next, .swiper-button-prev{
	height:100%;
	margin-top:0;
	top:0;
	background-color:#ffffff;
	background-image:none;
	width:460px;
}
.swiper-button-next{
	right:-600px;
	background: -webkit-linear-gradient(right,rgba(255, 255, 255,0.8) 10%,rgba(255,255,255,0));
	background: -moz-linear-gradient(right,rgba(255, 255, 255,0.8) 10%,rgba(255,255,255,0));
	background: linear-gradient(to left,rgba(255, 255, 255,0.8) 10%,rgba(255,255,255,0));
}
.swiper-button-prev{
	left:-600px;
	background: -webkit-linear-gradient(left,rgba(255, 255, 255,0.8) 10%,rgba(255,255,255,0));
	background: -moz-linear-gradient(left,rgba(255, 255, 255,0.8) 10%,rgba(255,255,255,0));
	background: linear-gradient(to right,rgba(255, 255, 255,0.8) 10%,rgba(255,255,255,0.));
}
.slide-container {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 1080px;
}
.font_red{color:#c10000;}
.font_large{font-size:22px;font-weight:bold;}
.font_xxlarge{font-size:34px;}

.header .header_nav:after{display:block;content:"";width:100%;clear:both;}
.header .inner:after{display:block;content:"";width:100%;clear:both;}

.slider li img{
    width: 96%!important;
}

#wrapper .slider a:hover img{opacity:none;}



/*-------------------------------
イベントバナー
--------------------------------*/

div.event{margin: 0 auto; width: 1080px; margin-top: 25px;}

div.event ul li{
    width: calc(92%/4);
    float: left;
    margin-right: 2.6%;
    position: relative;
}
div.event ul li:last-child{margin-right: 0;}
div.event ul li img{
  width: 100%;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .1s ease-in-out;
  transition: .1s ease-in-out;
}
div.event ul li a:hover img{
opacity:0.8;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}



/*-------------------------------
カテゴリ（2階層目用）
--------------------------------*/
#cate{
	width:1080px;
    margin: 0 auto;
    overflow: hidden;
}

#cate h1{
    padding-bottom: 16px;
    text-align: center;
margin-top:50px;
display: flex;
    align-items: center;
}
#cate h1 img{
    width: auto;
    border: none;
}
#cate h1:before,
#cate h1:after {
    content: "";
    height: 15px;
    flex-grow: 1;
    background-color: #0058c5;
}
#cate h1:before {margin-right: 40px;}
#cate h1:after {margin-left: 40px;}

#cate div.cate_item {
    width: 100%!important;
    float: left!important;
    margin-bottom: 30px;
}
#cate div.cate_item ul li{
    width: calc(95%/4);
    float: left;
    margin: 14px 18px 0 0;
}
#cate div.cate_item ul li:nth-child(4){margin-right: 0;}
#cate div.cate_item ul li a{
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    background: #fff;
    box-sizing: border-box;
}
/*== ボタン共通設定 */
#cate div.cate_item ul li a.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
  overflow: hidden;
    /*ボタンの形状*/
  text-decoration: none;
  display: inline-block;
    border: #003eb1 solid 1px;
    padding: 15px 30px;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
}

/*ボタン内spanの形状*/
#cate div.cate_item ul li a.btn span {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
    color: #003eb1;
}

#cate div.cate_item ul li a.btn:hover span{
  color:#fff;
}

/*== 背景が流れる（斜め） */
#cate div.cate_item ul li a.bgskew::before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: -130%;
    /*色や形状*/
  background:#003eb1;
  width:120%;
  height: 100%;
  transform: skewX(-25deg);
}

/*hoverした時のアニメーション*/
#cate div.cate_item ul li a.bgskew:hover::before {
  animation: skewanime .6s forwards;/*アニメーションの名前と速度を定義*/
}

@keyframes skewanime {
  100% {
    left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
  }
}