@charset "UTF-8";
/* CSS Document */
a {
    color:#fff;
    text-decoration: none; 
}
.modaal-wrap a {
    color:#333;
    text-decoration: underline; 
}
header {
    background-color: #000;
}
.sub-page .common-width {
    width: 92%;
    padding-top: 8em;
    margin-bottom: 8em;
}
.shop-slider {
	margin-bottom: 1.25em;
	}
.shop-slider div {
    text-align: center;
	font-size:1.25em;
	}
.shop-slider div span {
 	display: Inline-block;
	width: 0.45em;
	height: 0.45em;
	margin:0 0 0 0.5em;
	border-right: 0.1em solid #fff;
	border-bottom: 0.1em solid #fff;
	transform: rotate(-45deg);
	}
.shop-slider div.active span {
	transform: rotate(45deg);
	margin:0 0 0.2em 0.5em;
	}
.shop-slider ul {
    margin-top:.5em;
	display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 14px;
	}
.shop-slider ul li {
    width: 8em;
    text-align: center;
	line-height:150%;
	padding:0.1em 0 0 0;
    margin: 0 .5em 0;
	border: 1px solid rgba(255,255,255,0.2);
	}
.list {
    margin-bottom: 3em;
}
.list h2 {
    line-height: 1.5;
    text-align: center;
    font-size:1.3em;
    letter-spacing:.025em;
    margin:0 0 1.5em;
    padding-top: 3em;
	border-bottom: 1px solid rgba(255,255,255,0.2);
    font-family: 'Bebas Neue', sans-serif;
}
.list li {
	margin:0 0 1.85em;
    text-align: center;
	}
.list li h4 {
	font-size:1.3em;
	margin:0;
    letter-spacing:.025em;
    line-height: 1.25;
	}
.list li div {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-size:12px;
	line-height:170%;
}
#header.DownMove{
    background-color: rgba(0,0,0,0.8);
    height: 85px;
}

/*-------------------------------------------------------------------------
  768px
---------------------------------------------------------------------------*/
@media screen and (min-width:768px) {
    .list ul {
        display:flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
   .list li {
        width: 48%;
        margin-bottom: 2em;
   }
   
}

/*-------------------------------------------------------------------------
  1024px
---------------------------------------------------------------------------*/
@media screen and (min-width : 1024px) {
    .list li {
       width:23.5%;
       text-align: left;
   }
   .list ul::before{
      content:"";
      display: block;
      width:23.5%;
      order:1;
    }
    .list ul::after{
      content:"";
      display: block;
      width:23.5%;

    }
    
}