@charset "UTF-8";

/* トップのみ背景は白
---------------------------------------------------------- */
body {
  background-color:#f9f9f9;
}

a,
a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;}

a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
@media screen and (min-width: 768px) {
 body {
 background-repeat: no-repeat;
 background-position: center 631px;
 background-size: 2999px auto; /*画面中央にするために2999pxで設定*/
 background-image: url(https://img.dinos.co.jp/images/v1/top/body_bg.png);
 }
 body.spTop{
   background: none;
 }
 img.eventBg {
  position: absolute;
  top: 631px;
  left: 50%;
  transform: translateX(-50%);
  margin: auto;
 }
}
@media screen and (max-width: 767px) {
body {
    background-color:#eee;
}
}

/* ==========================================================
 clearfix
========================================================== */
.grid-cmn-01:before, .grid-cmn-01:after,
.grid-cmn-02:before, .grid-cmn-02:after,
.grid-cmn-03:before, .grid-cmn-03:after
{
}
.grid-cmn-01:after,
.grid-cmn-02:after,
.grid-cmn-03:after
{
  clear: both;
}
/**画像拡大**/
a img.big {
  transition: all 200ms linear;
}
a:hover img.big {
  transform: scale(1.04);
  -moz-transform: scale(1.04);
  -o-transform: scale(1.04);
  -webkit-transform: scale(1.04);
  transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  -webkit-transition: transform 0.3s ease;
}

/* トップページのみ調整用
---------------------------------------------------------- */
* { box-sizing: border-box; -webkit-box-sizing: border-box;}

h1, h2, h3, h4, h5, h6, strong, em
{ font-size: 100%; font-weight: normal;}
/* sale off rate */
.off_rate {
	font-size: 14px;
	color: #ff0000;
	padding-top: 1px;
	display: inline-block;
}
.saleflug .off_rate,/*値が戻ってこない時のため*/
.saleflug0 .off_rate {
	display: none;
}
.saleflug0 p[class^="cms_data_"] {
	padding-top: 6px;
}
.saleflug1 .price,
.saleflug1 .tax,
.saleflug1 dd .cms_data_price,
.saleflug1 dd .cms_dataprice {
	color: #ff0000;
}
.saleflug1 p[class^="cms_data_"] {
	padding-top: 6px;
}
@media screen and (max-width: 767px) {
dd .off_rate {
		font-size: 2.9vw;
	}
}
/* ==========================================================
 grid
========================================================== */
/* grid-cmn
---------------------------------------------------------- */
.grid-cmn-03 {
	margin-left: -35px;
	display: flex;
	flex-wrap: wrap;
}
  .grid-cmn-03 > .grid-item {
    float:left;
    width: 583px;
    margin: 0 0 35px 35px;
  }
.grid-cmn-03 > .grid-item--width1 {
    width: 275px;
	display: flex;
	flex-direction: column;
}
.grid-cmn-03 > .grid-item a{
	color:#000;
}
.grid-cmn-03 > .grid-item a:first-child{
	flex-grow: 2;
	overflow: hidden;
	height: 100%;
}
@media screen and (min-width: 768px) and (max-width: 1244px) {
  .grid-cmn-03 > .grid-item {
    width: calc(100% - 35px);
  }
  .grid-cmn-03 > .grid-item--width1 {
    width: calc(50% - 35px);
  }
}

/* sp
---------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .grid-cmn-03 {
    margin-left: -3%;
  }
    .grid-cmn-03 > .grid-item {
      width: 100%;
      margin: 0;
      margin: 0 0 3% 3%;
    }
    .grid-cmn-03 > .grid-item--width1 {
      width: calc(50% - 3%);
    }
    .grid-cmn-03 > .grid-item--width2 {
      width: 97%;
}
}  
/* ==========================================================
 section
========================================================== */
/* sec-cmn
---------------------------------------------------------- */
.sec-rank{}
  .sec-rank .box-category-select{
    width: 450px;
    height: 35px;
    margin: 0 auto 30px;
    border:1px solid #e5e5e5;
  }
    .sec-rank .box-category-select .form-category-select{
      width: 470px;
      height: 35px;
      font-size: 16px;
      text-indent : 8px;
      color:#000;
    }
  .sec-rank .rank{
    margin-bottom: 3px;
    padding: 5px 0 0;
    width: 23px;
    height: 23px;
    background: url(https://img.dinos.co.jp/images/common/ico_ranking_bg.png) no-repeat 0 0;
    background-size: 23px auto;
    font-size: 10px;
    line-height: 1.8;
    color:#fff;
    text-align:center;
  }

.sec-carousel{
  padding: 30px 25px;
}
  .sec-carousel .title{
    margin-bottom: 30px;
    font-size: 21px;
    font-weight:bold;
    line-height: 1.43;
    text-align:center;
  }
    .sec-carousel .title .txt{
      display:block;
      font-size: 14px;
      font-weight: normal;
      line-height: 1.43;
    }
  .sec-carousel .inner { position: relative; }
  .sec-carousel .btn{
    width: 341px;
    height: 35px;
    margin: 0 auto;
  }
    .sec-carousel .btn a{
      display:block;
      padding: 5px 0;
      background-color: #fff;
      border: solid 2px #eee;
      font-size: 14px;
      line-height: 1.7;
      text-align:center;
      color:#000;
      border-radius: 18px;
    }
    .sec-carousel .btn a:hover{
      text-decoration:none;
      background-color:#eee;
    }

.box-carousel{
  position:relative;
}
  .box-carousel .slider{
    overflow:hidden;
    margin: 0 0 0 -20px;
  }
  .box-carousel .slider .item {
    width: 145px;
    margin: 0 0 0 20px;
  }
    .box-carousel .slider .item a{
      color:#000;
      outline: none;
      text-decoration: none;
    }
    .box-carousel .slider .item a:hover dl{
      text-decoration: underline;
    }
  .box-carousel .img{
    overflow:hidden;
  }
    .box-carousel .img img{
      border-radius: 5px;
    }
  .box-carousel .text{
    padding: 13px 0 25px;
  }
    .box-carousel .text .ttl{
      font-size: 14px;
      line-height: 1.43;
      color:#333;
    }
    .box-carousel .text .price{
      font-size: 15px;
      line-height: 1.43;
      color:#333;
    }
      .box-carousel .text .price:before{
        content:'';
      }
      .box-carousel .text .price:after{
        content:'';
        font-size: 12px;
        line-height: 1.67;
      }
    .box-carousel .text .star{
      width: 94px;
      margin-bottom: 8px;
      font-size: 16px;
      line-height: 1.3;
      color:#86be24;
    }
      .box-carousel .text .star img{
        width: 100%;
        max-width: 100%;
      } 
  .sec-carousel .btn-left,
  .sec-carousel .btn-right,
  .box-carousel .btn-left,
  .box-carousel .btn-right,
  .box-catalog .btn-left,
  .box-catalog .btn-right {
    position:absolute;
    top: 40px;
    width: 37px;
    height: 73px;
    cursor: pointer;
    text-indent: -9999px;
    overflow: hidden;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 37px 73px;
  }
  .sec-carousel .btn-left,
  .box-carousel .btn-left,
  .box-catalog .btn-left {
    left: -26px;
    background-image: url(https://img.dinos.co.jp/images/v1/top/ico_arrow_left_pc.png);
  }
  
  .sec-carousel .btn-right,
  .box-carousel .btn-right,
  .box-catalog .btn-right {
    right: -26px;
    background-image: url(https://img.dinos.co.jp/images/v1/top/ico_arrow_right_pc.png);
  }
  
  .sec-carousel .slider-btn .btn-left.slick-disabled,
  .box-carousel .slider-btn .btn-left.slick-disabled,
  .box-catalog .btn-left.slick-disabled { background-image: url(https://img.dinos.co.jp/images/v1/top/ico_arrow_left_pc_disabled.png); cursor: default; }
  
  .sec-carousel .slider-btn .btn-right.slick-disabled,
  .box-carousel .slider-btn .btn-right.slick-disabled,
  .box-catalog .btn-right.slick-disabled { background-image: url(https://img.dinos.co.jp/images/v1/top/ico_arrow_right_pc_disabled.png); cursor: default; }
    
.box-carousel .text .link {}
      .box-carousel .text .link a {
        color: #86be24;
      }
    .box-carousel .text .txt{
      font-size: 12px;
      line-height: 1.53;
      color:#333;
    }

.box-rank{}
  .box-rank .slider,
  .box-rank .slider .item {
    /* height: 325px; */
  }
  .box-rank .slider-btn .btn-left,
  .box-rank .slider-btn .btn-right { top: 65px; }

/* sp
---------------------------------------------------------- */
@media screen and (max-width: 767px) {
.sec-cmn-01 {
  padding: 0 0 10px;
}
.sec-carousel{
  padding: 30px 3%;
}
  .sec-carousel .title{
    margin-bottom: 20px;
    font-size: 4.5vw;
    line-height: 1.2;
  }
    .sec-carousel .title .txt{
      font-size: 15px;
      line-height: 1.5;
    }
    .sec-carousel .btn {
      width: auto;
    }
    .sec-carousel .btn a{
      padding: 13px 0;
      border: solid 1px #ddd;
      font-size: 3.2vw;
      line-height: 0.95;
      border-radius: 26px;
    }

.sec-rank{
  margin: 0 -3%;
  padding: 20px 3% 30px;
  border:none !important;
  border-radius: 0 !important;
}
  .sec-rank .box-category-select{
    width: 100%;
    height: 35px;
    margin: 0 auto 20px;
  }
    .sec-rank .box-category-select .form-category-select{
      width: 100%;
      height: 35px;
      font-size: 3.3vw;
    }
	.box-category-select ~ div .box-carousel ~ .btn {
		padding: 0 12px;
	}
 .sec-rank .rank{
	margin-left: 3%;
 }     
.box-carousel-sp{
  margin: 0 0 3%;
}
  .box-carousel-sp .slider{
    height:auto;
    margin: 0;
  }
 .box-carousel-sp .slider .item {
	clear: both;
	width: 100%;
	margin: 0 0 5%;
	overflow: hidden;
 }
 .box-carousel-sp .slider .img{
	float: left;
	width: 37.12%;
 }
 .box-carousel-sp .text{
	float: left;
	width: 62.88%;
    padding: 0 0 0 3%;
 }
    .box-carousel-sp .text .ttl,
    .box-carousel-sp .text .price{
      line-height: 1.4;
    }
				.box-carousel-sp .text .price {
					font-size: 3.2vw;
				}
					.box-carousel-sp .text .ttl {
						font-size: 2.6vw;
					}
      .box-carousel-sp .text .price .fee{
        font-size: 12px;
        line-height: 1.75;
      }
    .box-carousel-sp .text .star{
      width: 40%;
      margin: 3px 0 1px;
    }
    .box-carousel-sp .text .txt{
      font-size: 3.2vw;
      line-height: 1.33;
    }
    
.box-rank{
  margin: 0;
}
  .box-rank .slider{
    height: auto;
    margin: 0;
  }
  .box-rank .slider .item {
    margin: 0;
  }
.box-rank .slider .item dl{
	margin: 0 3%;
}
  .box-rank .slider .text{
    padding: 6px 0 35px;
  }
    .box-rank .slider .text .ttl{
      font-size: 12px;
      line-height: 1.5;
    }
    .box-rank .slider .text .price{
      font-size: 14px;
      line-height: 1.43;
      color:#333;
    }
      .box-rank .slider .text .price .fee{
        font-size: 12px;
        line-height: 1.67;
      }
    .box-rank .slider .text .star{
      margin-bottom: 0;
      width: 94px;
    }
    .box-rank .slider .text .txt{
      display:none;
    }
    .box-rank .slider-btn .btn-left,
    .box-rank .slider-btn .btn-right {
      top: 50%;
      margin-top: -95px;
    }
    .box-rank .slider-btn .btn-left { left: -3%; }
    .box-rank .slider-btn .btn-right { right: -3%; }

.box-recommend{
  margin: 0;
}
  .box-recommend .slider{
    height: auto;
    margin: 0 0 0 -16px;
  }
  .box-recommend .slider .item {
    width: 160px;
    margin: 0 0 0 16px;
    height: auto;
  }
  .box-recommend .slider .text{
    padding: 6px 0 35px;
  }
    .box-recommend .slider .text .ttl{
      font-size: 2vw;
      line-height: 1.5;
    }
    .box-recommend .slider .text .price{
      font-size: 3vw;
      line-height: 1.43;
      color:#333;
    }
      .box-recommend .slider .text .price .fee{
        font-size: 12px;
        line-height: 1.67;
      }
    .box-recommend .slider .text .star{
      margin-bottom: 0;
      width: 94px;
    }
    .box-recommend .slider .text .txt{
      display:none;
    }
    .box-recommend .slider-btn .btn-left,
    .box-recommend .slider-btn .btn-right {
      top: 50%;
      margin-top: -95px;
    }
    .box-recommend .slider-btn .btn-left { left: -15px; }
    .box-recommend .slider-btn .btn-right { right: -15px; }

.box-pop-featured .slider .item:nth-child(n+4),
.box-favorite .slider .item:nth-child(n+4) {
  display: none;
}
.box-catalog .btn-left { left: 0; }
.box-catalog .btn-right { right: 0; }
}
.box-pop-featured .btn {
	margin-top: 8.612%;
 margin-bottom: 3%;
}

/* ==========================================================
 box
========================================================== */
 /* box-fancy
---------------------------------------------------------- */ 
.box-fancy{
}
  .box-fancy a{
    color: #000
  }
  .box-fancy .img {
    position: relative;
    z-index: 1;
    overflow:hidden;
    max-height: 272px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    text-align: center;
	vertical-align: middle;
  }
    .box-fancy .img img{
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;
	  vertical-align: middle;
    }
	.grid-item--width1 .box-fancy .img img {
		width:273px;
	}
	.grid-item--width2 .box-fancy .img img {
		width: 583px;
	}
  .box-fancy .content{
    padding: 17px 17px 5px 20px;
  }
  .box-fancy .text{
    margin-bottom: 17px;
  }
    .box-fancy .text .ttl{
      margin-bottom: 8px;
      font-size: 16px;
      font-weight:bold;
      line-height: 1.375;
    }
    .box-fancy .text .ttl .strong{
      font-size: 20px;
      font-weight:bold;
      line-height: 1.45;
    }
    .box-fancy .text .txt,
    .box-fancy .text .price{
      font-size: 14px;
      line-height: 1.43;
    }
      .box-fancy .text .price:before{
        content:'';
        padding-right: 3px;
      }
      .box-fancy .text .price:after{
        content:'';
        font-size: 12px;
        line-height: 1.67;
        padding-left: 3px;
      }
      .box-fancy .text .price .fee{
        font-size: 12px;
        line-height: 1.67;
      }
  .author{
    position:relative;
    height: 80px;
    padding: 10px 17px 20px 90px;
  }
    .author .thumb{
      position:absolute;
      top: 0;
      left: 20px;
      width: 60px;
      height: 60px;
      border-radius: 35px;
    }
    .author .txt-01{
      font-size: 14px;
      line-height: 1.43;
    }
/* sp
---------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .box-fancy .content{
    padding: 10px 10px 0 10px;
  }
  .box-fancy .img {
    max-height: none;
  }
  .box-fancy .img img{
	  width:auto;
  }
  .box-fancy .text{
    margin-bottom: 0;
  }
    .box-fancy .text .ttl,
    .box-fancy .text .ttl .strong{
      margin-bottom: 5px;
      font-size: 3.4vw;
      line-height: 1.35;
    }
    .box-fancy .text .txt,
    .box-fancy .text .price{
      font-size: 2.5vw;
      line-height: 1.5;
    }
				.box-fancy .text .txt {
					font-size: 2.6vw
				}
      .box-fancy .text .price .fee{
        font-size: 12px;
        line-height: 1.75;
      }
  .grid-item--width1 .author{
    margin-top: 9px;
    height:50px;
    padding: 2% 10px 3.4% 55px;
  }
  .grid-item--width2 .author{
    margin-top: 9px;
    height:50px;
    padding: 3% 10px 3.4% 50px;
  }
    .author .thumb{
      width: 55px;
      height: 55px;
      top: 60%;
      left: 2px;
      margin-top: -29px;
    }
    .author .thumb img{
      width: 70%;
      max-width: 70%;
      min-height: 70% !important;
    }
    .price .txt-01{
      font-size: 12px;
      line-height: 1.5;
    }
    .author .txt-01{
        font-size: 3vw;
	}
	.author .txt-02{
      font-size: 12px;
      line-height: 1.5;
    }
} 
 /* box-login
---------------------------------------------------------- */  
.box-login{
  padding: 0 0 18px 0;
  background-color:#444;
  border-radius: 5px;
}
  .box-login .list-login{
    padding: 13px 0 21px;
    text-align:center;
  }
    .box-login .list-login li{
      display:inline;
      border-left:1px solid #eee;
    }
    .box-login .list-login li:first-child{
      border:none;
    }
      .box-login .list-login li a{
        display:inline-block;
        width: 32%;
        padding: 6px 0;
        font-size: 14px;
        line-height: 2;
        color:#fff;
      }
        .box-login .list-login li a:hover{ text-decoration:underline;}
  .box-login .btn-login{
    width: 163px;
    height: 28px;
    margin: 0 auto;
    background-color:#333;
    border-radius: 14px;
    text-align:center;
  }
    .box-login .btn-login a{
      display:block;
      font-size: 14px;
      line-height: 2;
      color:#fff;
    }
  .mod-logout{
    padding: 19px;
  }
    .mod-logout .text{
      margin: 15px 0 0;
    }
  .mod-login{
  }
  .mod-regis{
    border-top:1px solid #eee;
  }
    .mod-login .text{
      margin-bottom: 8px;
      background: url(https://img.dinos.co.jp/images/v1/common/ico_arrow_04.jpg) no-repeat right center;
      background-size: 14px auto;
      font-size: 14px;
      line-height: 1.43;
    }
      .mod-login .text a{
        color:#000;
      }
    .mod-regis .text{
      font-size: 16px;
      line-height: 1.5;
      letter-spacing: -0.05em;
    }
      .mod-regis .txt{
        color:#cc0000;
        font-weight:bold;
      }
      
  .mod-logout .btn{
    display:block;
    width: 202px;
    height: 35px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 2.5;
    text-align:center;
    border-radius: 17px 18px 18px 17px;
  }
  a.btn-login{
    background-color:#333;
    color:#fff;
  }
  a.btn-login:visited{
    color:#fff;
  }
  .btn-regis{
    background-color: #c5fd5d;
    color:#000;
  }

.box-tv{
  margin: 25px 0 20px;
} 
  .box-tv a {
    display: block;
    overflow: hidden;
  }
 /* box-category
---------------------------------------------------------- */   
.box-category{
  padding: 0;
  background-color:#fff;
  border-radius: 5px;
}
.list-category-03 {
}
  .list-category-03 > li{
    position:relative;
    height: 70px;
    background-color:#eee;
    margin-top: 1px;
  }
  .list-category-03 > li:before{
    content: "";
    position: absolute;
    top: 50%;
    right: -2px;
    z-index: 1000;
    width: 14px;
    height: 20px;
    margin-top: -10px;
    background: url(https://img.dinos.co.jp/images/v1/common/ico_arrow_03@2x.png) no-repeat 0 0;
    background-size: 14px auto;
    opacity: 0;
  }
  .list-category-03 > li.is-hover:before{ opacity: 1; }
  .list-category-03 > li.is-hover.is-hide-arrow:before{ opacity: 0; }
    .list-category-03 > li:nth-last-child(3) {
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    }
    .list-category-03 > li:first-child{
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      margin-top: 0;
    }
    .list-category-03 li a{
      display:block;
      font-size: 13px;
      color:#000;
						padding: 17px 0 17px 10px;
      line-height: 3.3;
      white-space: nowrap;
    }
      .list-category-03 li li a{
        padding: 0;
        font-size: 12px;
        line-height: 2.2;
      }
    .list-category-03 li a:hover{
      color:#669900;
      text-decoration:underline;
    }
      .list-category-03 > li > a > span{
        display:block;
        padding-left: 57px;
      }
/* sp
---------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .box-category{
    padding: 0 0 10px;
    border:1px solid #eee;
  }
    .box-category .title{
      padding: 25px 0 20px;
      font-size: 4.5vw;
      font-weight:bold;
      line-height: 1;
      text-align:center;
    }
		.box-category .nav-global {
			margin-bottom: 0;
		}
		.box-category .nav-global > ul > li {
			border: none;
		}
		.box-category .nav-global li span {
			padding-left: 57px;
		}
		.box-category .nav-global li .btn-accrd {
			height: auto !important;
		}
		.box-category .nav-global li .btn-accrd:after {
				top:55%;
		}

    .list-category-03{
    }
      .list-category-03 > li{
        height: auto;
        margin: 0;
      }
      .list-category-03 > li:nth-child(odd){
        background-color:#f9f9f9 !important;
      }
      .list-category-03 > li:nth-child(even){
        background-color:#fff !important;
      }
			.list-category-03 > li:nth-last-child(3) {
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
			}
			.list-category-03 > li:first-child{
				border-top-left-radius: 0;
				border-top-right-radius: 0;
			}
      .list-category-03 > li:hover .mod-popup{
        display:none;
      }
			.list-category-03 li .btn-accrd {
				padding: 4px 10px;
				font-size: 3.3vw;
				line-height: 3.3;
			}
			.list-category-03 li li a {
				padding: 4px 10px;
				font-size: 3.3vw;
				line-height: 3.3;
			}
			.list-category-03 li .js-accrd-list ul li a {
				padding: 0 25px;
			}
}  
    
 /* box-catalog
---------------------------------------------------------- */ 
.box-catalog{}
  .box-catalog .title{
    padding: 20px 0;
    font-size: 18px;
    font-weight:bold;
    text-align:center;
    line-height: 1.34;
  }
  .box-catalog .content{}
  .box-catalog .slider-wrap { position: relative; }
    .box-catalog .slider{
      width: 332px;
      height: 96px;
      margin: 0 -30px;
    }
      .box-catalog .slider .item {
        float:left;
        width: 71px;
        height: 96px;
        margin: 0 6px;
      }
        .box-catalog .slider .item img{
          width: 100%;
          max-width: 100%;
        }
  .list-catalog{
   }
    .list-catalog li{
      position:relative;
      border-top:1px solid #eee;
    }
    .list-catalog li:first-child{
      border:none;
    }
    .list-catalog li:after{
      content:'';
      position:absolute;
      top: 50%;
      right: 19px;
      width: 14px;
      height: 33px;
      margin-top: -16px;
      background: url(https://img.dinos.co.jp/images/v1/common/ico_arrow_04.jpg) no-repeat 0 0;
      background-size: 14px auto;
    }
      .list-catalog a{
        color:#000;
      }
    .list-catalog .text{
      padding: 20px 40px 20px 20px;
    }
      .list-catalog .text .ttl{
        font-size: 18px;
        font-weight:bold;
        line-height: 1.45;
      }
      .list-catalog .text .txt{
        font-size: 14px;
        line-height: 1.43;
      }
@media screen and (min-width: 768px) {
  .box-catalog .slider .item:nth-child(n+5) {
    display: none;
  }
}
/* sp
---------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .box-catalog{
    border:none;
    border-radius: 0;
    margin: 0 -3%;
  }
    .box-catalog .title{
      padding: 25px 0 20px;
      font-size: 4.5vw;
      line-height: 1.25;
    }
    .box-catalog .content{}
    
    .box-catalog .slider{
      width: auto;
      height: auto;
      margin: 0 0 0 -22px;
    }
      .box-catalog .slider .item {
        width: auto;
        height: auto;
        margin: 0 0 0 22px;
      }
    .box-catalog .slider-btn .btn-left,
    .box-catalog .slider-btn .btn-right {
      top: 50%;
      margin-top: -37px;
    }
      
  .list-catalog{
    padding: 15px 0 27px;
   }
    .list-catalog li{
      padding: 5px 5% 10px;
      border:none;
    }
    .list-catalog li:after{
      display:none;
    }
    .list-catalog a{
      display:table;
      width: 100%;
    }
    .list-catalog .text{
      display:table-cell;
      height: 55px;
      padding: 0;
      border:1px solid #ddd;
      vertical-align:middle;
      text-align:center;
      border-radius: 36px;
    }
      .list-catalog .text .ttl{
        font-size: 3.6vw;
        font-weight:bold;
        line-height: 1.45;
      }
      .list-catalog .text .txt{
        font-size: 2vw;
        line-height: 1.43;
      }
}
 /* box-keyword
---------------------------------------------------------- */ 
.box-keyword{
  padding: 10px 0 25px;
}
  .box-keyword .title{
    padding: 0 18px;
    font-size: 14px;
    font-weight:bold;
    line-height: 2.5;
  }
  .box-keyword .content{
    padding: 0 18px 10px;
  }
  .box-keyword .keyword{
    display:inline-block;
    height: 24px;
    padding: 2px 8px;
    margin: 5px 0;
    background-color:#c5fd5d;
    font-size: 12px;
    line-height: 1.83;
    color:#000;
    border-radius: 14px;
  }
  
  .btn-sub-01{
    text-align:center;
  }
    .btn-sub-01 a{
      font-size: 14px;
      line-height:1.43;
      text-align:center;
      color:#000;
      text-decoration:underline;
    }
    .btn-sub-01 a:hover{
      text-decoration:none;
    }
/* sp
---------------------------------------------------------- */
@media screen and (max-width: 767px) {
.box-keyword{
  padding: 20px 0 30px;
}
  .box-keyword .title{
    padding: 5px 0 10px;
    font-size: 4.5vw;
    line-height: 1.25;
    text-align:center;
  }
  .box-keyword .content{
    padding: 0 20px 23px;
  }
  .box-keyword .keyword{
    height: 26px;
    padding: 0% 5% 8%;
    margin: 10px 0 0;
    font-size: 3.5vw;
    line-height: 2;
    border-radius: 26px;
  }
  
  .btn-sub-01{
  }
    .btn-sub-01 a{
      font-size: 3.3vw;
      line-height:1.33;
    }
}

 /* box-info
---------------------------------------------------------- */ 
.box-info{
  padding-bottom: 19px;
}
  .box-info .title{
    padding: 8px 17px 5px;
    font-size: 14px;
    font-weight:bold;
    line-height: 2.5;
    border-bottom:1px solid #eee;
  }
  .box-info .content{
    padding-bottom: 18px;
  }
  
  .list-info{
  }
    .list-info .date{
      display:block;
    }
      .list-info a { color: #333;}
      .list-info .notice {
        color: #c00;
      }
    .list-info li{
      padding: 17px;
      border-bottom:1px solid #eee;
      font-size: 14px;
      line-height: 1.43;
    }
/* sp
---------------------------------------------------------- */
@media screen and (max-width: 767px) {
.box-info{
  padding-bottom: 30px;
}
  .box-info .title{
    padding: 20px 0 15px;
    font-size: 4.5vw;
    line-height: 1.25;
    border-bottom: none;
    text-align:center;
  }
  .box-info .content{
    padding-bottom: 30px;
  }
    .list-info li{
      padding: 15px 10px;
      border:none;
      font-size: 3.2vw;
      line-height: 1.2;
    }
      .list-info li .date{
        font-size: 15px;
        line-height: 1.4;
      }
    .list-info li:nth-child(even){
      background-color:#fff;
    }
    .list-info li:nth-child(odd){
      background-color:#f9f9f9;
    }
	.list-info img.icon {
		width:auto;
		max-width:100%;
	}
}

 /* box-bnr
---------------------------------------------------------- */ 
.box-bnr{}
  .box-bnr li{
    margin-bottom: 35px;
  }
  .box-bnr li a {
    display: block;
	border-radius: 5px;
	border:1px solid #eee;
  }
    .box-bnr .item{
      border-radius: 5px;
	  overflow: hidden;
	  /**position: relative;**/
    }
      .box-bnr li img{
        border-radius: 5px;
        width: 100%;
        max-width: 100%;
      }
/* sp
---------------------------------------------------------- */
@media screen and (max-width: 767px) {
.box-bnr{
  overflow:hidden;
  margin-left: -3%;
}
  .box-bnr li{
    width: 50%;
    float:left;
    padding-left: 3%;
    margin-bottom: 3%;
  }
}
 /* #newsinf
---------------------------------------------------------- */ 
#newsinf>p{
  display:block;
  margin-bottom: 35px;
  padding: 15px;
  background-color:#fff;
  border:1px solid #eee;
  border-radius: 5px;
  text-align:center;
  font-size: 16px;
  line-height: 1.5;
}
  #newsinf>p a{
    color:#cc0000;
    text-decoration:underline;
	display: block;
	padding: 15px 0 0;
  }
  #newsinf>p a:hover{
    text-decoration:none;
  }
#newsinf>p span{
    display: block;
}
#newsinf > p .alert{
	color: #cc0000;
	font-weight: bold;
}
#newsinf > p > a.alert_bk{
	font-weight: normal;
	color: #333333;
}
/* sp
---------------------------------------------------------- */
@media screen and (max-width: 767px) {
  #newsinf>p {
    margin: 3% 0 0;
    padding: 0 2%;
    background:none;
    border:none;
    text-align:center;
    font-size: 18px;
	font-size: 3.33vw;
    line-height: 1.5;
  }
  #newsinf>p a{
	padding: 3% 0 0;
  }
	#newsinf > p .alert{
		font-weight: normal;
	}

}
  
/* ==========================================================
 module
========================================================== */

/* module slider
---------------------------------------------------------- */
.slider-wrap{
  overflow:hidden;
}
  .slider-wrap .slider{
  }
    .slider-wrap .slider .item {
      float:left;
    }
    
    
/* shop
---------------------------------------------------------- */
.area-shop {
  position: relative;
}
.sec-shop {
  background-color: #eee;
  padding: 0 2.7% 2.7%;
}
  .sec-shop:first-of-type {
    padding: 2.7% 2.7% 0;
    border-radius: 5px;
  }
  .sec-shop .ttl {
    font-size: 21px;
    font-weight: bold;
    margin-bottom: 2.7%;
    text-align: center;
  }
  .sec-shop .btn-cmn-02 {
    margin: 0 auto;
    text-align: center;
  }
    .sec-shop .btn-cmn-02 a {
      display: inline-block;
      width: 223px;
      height: 35px;
      padding: 6px;
      background-color: #fff;
      border: solid 2px #eee;
      color: #000;
      border-radius: 18px;
    }
  .sec-shop .btn-cmn-02 a:hover {
    border-color: #fff;
    background-color: #eee;
    text-decoration: none;
  }
.list-brand {
  overflow: hidden;
  margin: -2.7% 0 0 -2.7%;
  padding-bottom: 4%;
	display: flex;
	flex-wrap: wrap;
}
.list-brand li {
    float: left;
    width: 25%;
    max-width: 25%;
    padding-left: 2.7%;
    margin-top: 2.7%;
	display: flex;
	flex-direction: column;
}
.list-brand li a{
	color:#000;
	border-radius: 5px;
	background-color: #fff;
	flex-grow: 2;
	overflow: hidden;
}
.list-brand li .box-shop {
	width: 100%;
}
      .list-brand li .box-shop .bg {
        overflow:hidden;
		border-radius: 5px 5px 0 0;
       }
        .list-brand li .box-shop .bg img {
          width: 100%;
        }
      .list-brand li .box-shop .content {
        position:relative;
        z-index:2;
       }
        .list-brand li .box-shop .content .img {
          overflow: hidden;
          margin: calc(-11%) 21.87%;
          box-shadow: 0 1px 1px rgba(0,0,0,.2);
          border-radius: 3px;
        }
          .list-brand li .box-shop .content .img img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 3px;
            
          }
        .list-brand li .box-shop .content .txt {
          font-size: 12px;
          color:#333;
          padding: 17% 6.2% 11%;
          letter-spacing: -0.05em;
        }

@media screen and (min-width: 768px) and (max-width: 1204px) {
  .area-shop {
    padding: 250px 20px 0;
  }
}
/* sp
---------------------------------------------------------- */
@media screen and (max-width: 767px) {
.area-shop {
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
}
.sec-shop {
  background-color: #eee;
  padding: 2.7%;
    margin:0 -3%;
}
  .sec-shop .ttl {
    font-size: 4.5vw;
    font-weight: bold;
    margin-bottom: 5%;
    text-align: center;
  }
  .sec-shop .btn-cmn-02 {
    margin: 0 auto;
    text-align: center;
  }
    .sec-shop .btn-cmn-02 a {
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      border-radius: 50px;
      background-color: #fff;
      border: solid 2px #eee;
      color: #000;
      padding: 0 6px 0 6px;
      width: 90%;
      height: 50px;
        line-height: 50px;
        font-size: 3.3vw;
    }
  .sec-shop .btn-cmn-02 a:hover {
    background-color: #eee;
  }
.list-brand {
 margin: -3% 0 0 -3%;
 }
  .list-brand li {
    float: left;
    width: 50%;
    max-width: 50%;
    padding-left: 3%;
    margin-top: 3%;
  }
    .list-brand li:nth-child(2n) {
    }
    .list-brand li .box-shop {
      border-radius: 5px;
      background-color: #fff;
      width: 100%;
    }
      .list-brand li .box-shop .bg {
       }
        .list-brand li .box-shop .bg img {
          width: 100%;
        }
      .list-brand li .box-shop .content {
      }
        .list-brand li .box-shop .content .img {
          box-shadow: 0 1px 1px rgba(0,0,0,.2);
          margin: calc(-12%) 21.87%;
          overflow: hidden;
        }
          .list-brand li .box-shop .content .img img {
            display: block;
            width:auto;
            height:auto;
          }
        .list-brand li .box-shop .content .txt {
          font-size: 3vw;
          padding: 16% 6.2% 6.2%;
        }
}
/* main-slider
---------------------------------------------------------- */
  .main-slider {
    visibility: hidden;
    height: 542px;
  }
  .main-slider .slider {
    position: relative;
    overflow: hidden;
  }
  .main-slider .slider .item {
    position: relative;
  }
    .main-slider .slider .item .image img { width: 100%; }
    .main-slider .slider .item a {
      position: relative;
      display: block;
      color: #333;
      text-decoration: none;
      outline: none;
    }
      .main-slider .slider .item a .inner {
        position: relative;
      }
  
    .main-slider .slider .slick-arrow {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 1;
      overflow: hidden;
      width: 50%;
      background-repeat: no-repeat; 
      border: 0;
      text-indent: -9999px;
      cursor: pointer;
      outline: none;
      -webkit-transition: background-color 0.3s;
      transition: background-color 0.3s;
    }
    .main-slider .slider .slick-arrow:hover { background-color: rgba(0,0,0, 0.5); }
    .main-slider .slider .slick-prev {
      left: -334px;
      background-image: url(https://img.dinos.co.jp/images/v1/top/ico_mainslide_prev.png);
      background-position: right center;
    }
    .main-slider .slider .slick-next {
      right: -335px;
      background-image: url(https://img.dinos.co.jp/images/v1/top/ico_mainslide_next.png);
      background-position: 0 center;
    }
  
    .main-slider .slider .box-caption {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 0 20px 0;
      color: #fff;
      text-align: center;
      background: url(https://img.dinos.co.jp/images/v1/top/bg_caption_pc.png) 0 bottom repeat-x;
      opacity: 0;
      -webkit-transition: opacity 0.4s;
      transition: opacity 0.4s;
      -webkit-transform: translateZ(0);
    }
   .main-slider .slider .box-caption-in {
        position: absolute;
        bottom: 0;
        left: 0;
        padding-bottom: 55px;
        width: 100%;
      }
      .main-slider .slider .box-caption .title {
		width: 100%;
        margin-bottom: 15px;
        font-size: 30px;
        line-height: 1;
        opacity: 0;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        -webkit-transform: translateZ(0);
      }
      .main-slider .slider .box-caption .txt-desc {
        font-size: 16px;
        line-height: 1.5;
        opacity: 0;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        -webkit-transform: translateZ(0);
      }
      .main-slider .slider .box-caption .icon {
        position: absolute;
        bottom: 10px;
        left: 50%;
        z-index: 1;
        display: block;
        width: 35px;
        margin-left: -18px;
        opacity: 0;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        -webkit-transform: translateZ(0);
      }
        .main-slider .slider .box-caption .icon img { width: 100%; }
    .main-slider .slider .box-caption.is-show,
    .main-slider .slider .box-caption .title.is-show,
    .main-slider .slider .box-caption .txt-desc.is-show,
    .main-slider .slider .box-caption .icon.is-show { opacity: 1; }
    .main-slider .slider .item:hover .icon {
      animation: blink 0.3s;
      -webkit-animation: blink 0.3s;
      -moz-animation: blink 0.3s;
    }
    @keyframes blink{
      0% { opacity: 1; }
      100% { opacity: 0.3; }
    }
    @-webkit-keyframes blink{
      0% { opacity: 1; }
      100% { opacity: 0.3; }
    }
    @-moz-keyframes blink{
      0% { opacity: 1; }
      100% { opacity: 0.3; }
    }

    .main-slider .slick-dots {
      overflow: hidden;
      margin: 30px auto 25px;
	  text-align: center;
    }
      .main-slider .slick-dots li {
        width: 72px;
        height: 72px;
        margin-right: 15px;
        overflow: hidden;
		display: inline-block;
      }
      .main-slider .slick-dots li:last-child { margin-right:  0; }
        .main-slider .slick-dots li a {
          position: relative;
          top: 15px;
          left: 15px;
          display: block;
          width: 42px;
          height: 42px;
          overflow: hidden;
          text-align: center;
          cursor: pointer;
          -webkit-transition: all 200ms ease-in;
          -webkit-transform: scale(1); 
          -ms-transition: all 200ms ease-in;
          -ms-transform: scale(1); 
          -moz-transition: all 200ms ease-in;
          -moz-transform: scale(1);
          transition: all 200ms ease-in;
          transform: scale(1);
        }
        .main-slider .slick-dots li a img {
			width: 100%;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
		}
  .main-slider .slider .txt-slide-caption { display: none; }
  .main-slider .list-slide-pager { display: none; }
@media screen and (min-width: 768px) {
  .main-slider {
    min-width: 990px;
  }
	.main-slider .slider {
		height: 446px;		
	}

  .main-slider .slider .item {
    width: 669px;
  }
  .main-slider .slick-dots li a.is-no-ie9:hover,
  .main-slider .slick-dots li.slick-active a.is-no-ie9 {
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.71);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.71);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.71);
    transition: all 200ms ease-in;
    transform: scale(1.71);
  }
	.main-slider figure.image img {
		/**width: 886px;
		height:415px;**/
	}
}
@media screen and (max-width: 767px) {
/* module slider
---------------------------------------------------------- */
.main-slider {
    height: 450px;
    overflow: hidden;
    min-width: auto;
    background-color: #eee;
}
/*html.scrolling .main-slider {
    margin-top:80px; 
    }*/
  .main-slider .slider {
    position: relative;
    overflow: visible;
  }
  
  .main-slider .slider .item {
    position: relative;
    width: auto;
  }
    .main-slider .slider .item .image img { width: 100%; }

  .main-slider .slider .box-caption {
    padding: 80px 20px 45px;
    background: none;
  }
    .main-slider .slider .box-caption-in {
      padding-bottom: 35px;
    }
    .main-slider .slider .box-caption .title {
      line-height: 1.3;
        font-size: 5vw;
        margin-bottom: 0;
    }
    .main-slider .slider .box-caption .txt-desc { display: none; }
    .main-slider .slider .box-caption .icon {
      bottom: -6px;
      width: 44px;
      margin-left: -22px;
    }

  .main-slider .slick-dots {
    width: auto;
    margin: 15px auto 0;
  }
    .main-slider .slick-dots li {
      float: none;
      display: inline-block;
      width: 13.335vw;
      height: 12.268vw;
      margin-right: 0;
      position: relative;
    }
      .main-slider .slick-dots li a {
       width: 52%;
       height: 56.522%;
       top: -1px;
       bottom: 0;
       left: 1px;
       right: 0;
       position: absolute;
       margin: auto;
       border-radius: 50%;
       overflow: hidden;
      }
       .main-slider .slick-dots li a img {
        width: 100%;
        height: 100%;
        border-radius: 0;
       }
      .main-slider .slick-dots li.slick-active a.is-no-ie9 {
        -webkit-transition: all 200ms ease-in;
        -webkit-transform: scale(1.768);
        -ms-transition: all 200ms ease-in;
        -ms-transform: scale(1.768);
        -moz-transition: all 200ms ease-in;
        -moz-transform: scale(1.768);
        transition: all 200ms ease-in;
        transform: scale(1.768);
      }
       /*.main-slider .slick-dots li a.is-no-ie9:hover,
      .main-slider .slick-dots li.slick-active a.is-no-ie9 {
        width: 66px;
        height: 66px;
      }*/
  .main-slider .slider .txt-slide-caption {
    position: relative;
    display: block;
    padding: 25px 15px 0;
    font-size: 2.7vw;
    line-height: 1.4;
    color: #333;
    opacity: 0;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-transform: translateZ(0);
  }
  .main-slider .slider .txt-slide-caption.is-show { opacity: 1; }
    .main-slider .slider .box-caption .icon img { width: 70%; }
}

@media screen and (max-width: 767px) {
	.header-search-wrapper {
		padding: 15px 4.35% 0;
	}
	.header-search-wrapper .btn {
		height: auto;
		margin: 0 2.74% 0;
	}
}

/* ==========================================================
 header トップページ以外はviewportがwidth=device-widthなので調整
========================================================== */
/* sp
---------------------------------------------------------- */
/* ==========================================================
 add
========================================================== */
 /* sp
---------------------------------------------------------- */
/**トップがviewport540pxによるフォント調整**/

/* ==========================================================
 TOP背景画像設定
========================================================== */
@media screen and (max-width: 768px) {
  body { background-image: none !important; }
}
@media screen and (min-width: 768px) {
  .bg-01 {
    background-repeat: repeat;
    background-position: center top;
  }
  .bg-02 {
    background-repeat: no-repeat;
    background-position: center 631px;
    background-size: 2999px auto;
  }
}

/*-------------------------------------------------------------
カタログショップ
（サイトトップにstyle.cssを読み込ませ次第削除予定）
-------------------------------------------------------------*/
.issue{
	padding: 2.7% 0;
	}
.issue .ttl {
 font-size: 21px;
 font-weight: bold;
 text-align: center;
}
.issue ul{
 width: auto;
 overflow: hidden;
 margin: 0 0 0 -2.7%;
	display: flex;
	flex-wrap: wrap;
}
.issue ul li{
	float: left;
 width: 25%;
 max-width: 25%;
 padding-left: 2.7%;
 margin-top: 2.7%;
}
.issue li a {
	display: block;
 font-size: 13px;
 color: #000;
 padding: 17px 0 17px 10px;
	border-radius: 5px;
 background-color: #eee;
 width: 100%;
}
.issue li a span {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
 padding-left: 54px;
}
/*-------------------------------------------------------------
カテゴリ別特集一覧
-------------------------------------------------------------*/
@media screen and (max-width: 767px) {
	.main .issue {
		padding: 3% !important;
		margin: 0 -3%;
	}
	.issue .title {
		font-size: 4.5vw;
		font-weight: bold;
		margin-bottom: 5%;
		text-align: center;
	}
	.issue ul {
		margin: -3% 0 3% -3%;
	}
	.issue ul li {
		padding-left: 3% !important;
		margin-bottom: 0;
		margin-top: 3%;
		width: 50%;
		max-width: 50%;
	}
	.issue li a{
		background-color: #ffffff;
		color:　#000000;
		font-size: 2.89vw;
		line-height: 1.65;
		padding: 17px 5px;
		white-space: normal;
      }
	.issue li a span{
		display:block;
		padding-left: 60px;
		min-height: 45px;
      }
}