@charset "UTF-8";

/* モバイルレイアウト : 480 px およびそれ以下. */
/*==========TOP==========*/
/*-----headerImg-----*/
#headerImg{
	margin: 0px auto;
	padding: 0 0 4% 0;
}

/*-----slide-----*/
.slider{
	margin: 0px auto;
	height: auto;
	padding-top: 2.2%;
}
.slider::before{
	content: "";
	background: url("../images/top/slide_bg2.png") repeat-x;
	background-size: contain;
	z-index: 200;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 1.65% 0;
}
.slider::after{
	content: "";
	background: url("../images/top/slide_bg2.png") repeat-x;
	background-size: contain;
	z-index: 200;
	display: block;
	position: absolute;
	bottom: -5.5%;
	left: 0;
	width: 100%;
	padding: 1.65% 0;
}
.slider div{
	position: relative;
}
.slider img{
	width: 100%;
	height: auto;
}
.slider div p{
	position: absolute;
	line-height: 1.5em;
	font-size: 60%;
}
.slider div p big{ /*スライドのキャッチコピー*/
	display: block;
	font-size: 130%;
	margin-bottom: 0.5em;
	line-height: 1.2em;
}
.slider div.slide01 p{ /*スライド1枚目の文字位置*/
	top: 10.5%;
	left: 9.5%;
	width: 55%;
	color: #FFF;
}
.slider div.slide02 p{ /*スライド2枚目の文字位置*/
	top: 17.5%;
	right: 7.0%;
	width: auto;
	color: #333;
	color: #FFF;
}
.slider div.slide03 p{ /*スライド3枚目の文字位置*/
	top: 36.5%;
	right: 6.5%;
	width: auto;
	max-width: 50%;
	color: #FFF;
}
.slider div.slide04 p{ /*スライド4枚目の文字位置*/
	top: 36.5%;
	right: 6.5%;
	width: auto;
	max-width: 50%;
	color: #FFF;
}

/*-----Products-----*/
#products ul{
	list-style-type: none;
	letter-spacing: -0.4em;
	margin: 0px 0;
}
#products ul li{
	display: inline-block;
	width: 47%;
	vertical-align: top;
	letter-spacing: normal;
	padding: 1.5%;
	text-align: center;
}
#products ul li a{
	text-decoration:none;
}
#products ul li p{
	margin: 5px 0;
	font-size: 95%;
}
#products hr{
	width: 97%;
	margin: 2% auto;
}
#products .btn{
	max-width: 100%;
	font-size: 120%;
	padding: 1.5% 0;
}

/*-----Information-----*/
#info{
	background: #f2f2f2;
    z-index: -100;
}

#info .info_bar{
    max-height: 25rem;
    overflow: scroll;
    
}
/*#info .info_bar::-webkit-scrollbar{
    width: 10px;
   
}

#info .info_bar::-webkit-scrollbar-track{background:#dddddd;}
#info .info_bar::-webkit-scrollbar-thumb{background:#aaaaaa;border-radius: 10px}*/

#info .contents{
	padding: 0;
}
#info .news{
	background: #fff;
	width: 92%;
	padding: 4%;
}
#info .news dl{
	list-style-type: none;
	margin: 0;
	letter-spacing: -0,4em;
}
#info .news dl dt{
	display: block;
	width: 98%;
	padding: 0.4em 0;
	vertical-align: top;
	letter-spacing: normal;
	margin 0;
}
#info .news dl dd{
	display: block;
	width: 98%;
	vertical-align: top;
	letter-spacing: normal;
	padding 0;
	margin: 0 0 1em 0;
}
#info .news dl dd a{
	text-decoration: none;
}
#info .news dl dd a:hover{
	text-decoration: underline;
}
#info .news dl dd.new:before{
	content: "";
	background: url("../images/info/icon_new.png") no-repeat;
	background-size: contain;
	display: inline-block;
	height: 15px;
	width: 40px;
	margin-right: 5px;
	vertical-align: middle;
}
/*タブボタン*/
.disnon {
	display: none;
}

.tabNews{
	position: relative;
	width: 100%;
	margin: 1px 0 0 0;
}
.tabNews ul{
	min-width: 80%;
	list-style-type: none;
	margin: 0 auto;
	text-align: center;
	display: table;
}
.tabNews li{
	position: relative;
	z-index: 100;
	display: table-cell;
	padding: 2%;
	background: #none;
	text-align: center;
	cursor: pointer;
	letter-spacing: normal;
	font-size: 90%;
	line-height: 1.2;
}
.tabNews li.select{
	background: #fff;
}
.tabNews li a{
	display: block;
	text-decoration: none;
}

/*-----Store-----*/
#store ul{
	list-style-type: none;
	letter-spacing: -0.4em;
	margin: 0;
}
#store ul li{
	display: inline-block;
	width: 20%;
	vertical-align: top;
	letter-spacing: normal;
	padding: 1.5% 2.5%;
	text-align: center;
}
#store ul li a{
	text-decoration:none;
}
#store ul li p{
	margin: 5px 0;
	font-size: 95%;
}


/* タブレットレイアウト : 481 px ～ 768 px。モバイルレイアウトからスタイルを継承。 */

@media only screen and (min-width: 481px) {
/*==========TOP==========*/
/*-----slide-----*/
.slider{
	margin: 0px auto;
	height: auto;
}
.slider div p{
	font-size: 80%;
}
.slider div p big{ /*スライドのキャッチコピー*/
	font-size: 150%;
	margin-bottom: 0.5em;
}
.slider div.slide01 p{ /*スライド1枚目の文字位置*/
	top: 15.5%;
	left: 8.5%;
}
.slider div.slide02 p{ /*スライド2枚目の文字位置*/
	top: 25.5%;
	right: 8.0%;
}
.slider div.slide03 p{ /*スライド3枚目の文字位置*/
	top: 36.5%;
	right: 6.0%;
}
.slider div.slide04 p{ /*スライド4枚目の文字位置*/
	top: 36.5%;
	right: 6.0%;
}
}

/* デスクトップレイアウト : 769 px ～最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media only screen and (min-width: 769px) {
/*==========TOP==========*/
/*-----slide-----*/
.slider{
	margin: 0px auto;
	height: auto;
}
.slider div p{
	position: absolute;
	line-height: 1.7em;
	font-size: 100%;
}
.slider div p big{ /*スライドのキャッチコピー*/
	font-size: 220%;
	margin-bottom: 0.8em;
}
.slider div.slide01 p{ /*スライド1枚目の文字位置*/
	top: 36.5%;
	left: 8.5%;
	width: auto;
	max-width: 60%;
}
.slider div.slide02 p{ /*スライド2枚目の文字位置*/
	top: 36.5%;
	right: 12.5%;
	width: auto;
}
.slider div.slide03 p{ /*スライド3枚目の文字位置*/
	top: 36.5%;
	right: 16.5%;
	width: auto;
	max-width: 50%;
}
.slider div.slide04 p{ /*スライド4枚目の文字位置*/
	top: 36.5%;
	right: 16.5%;
	width: auto;
	max-width: 50%;
}

/*-----Products-----*/
#products ul{
	list-style-type: none;
	letter-spacing: -0.4em;
	margin: 0px 0;
}
#products ul li{
	display: inline-block;
	width: 22%;
	vertical-align: top;
	letter-spacing: normal;
	padding: 1.5%;
	text-align: center;
}
#products ul li p{
	margin: 5px 0;
	font-size: 95%;
}
#products hr{
	width: 97%;
	margin: 2% auto;
}
#products .btn{
	max-width: 100%;
	font-size: 120%;
	padding: 1.5% 0;
}

/*-----Information-----*/
#info .news dl dt{
	display: inline-block;
	width: 10%;
	padding: 0.4em 0;
}
#info .news dl dd{
	display: inline-block;
	width: 80%;
	padding: 0.4em 0;
	margin: 0;
}
.tabNews ul{
	min-width: 40%;
}
#info .news dl dd img{
	height: 18px;
}
/*タブボタン*/
.tabNews li{
	font-size: 100%;
}

/*-----Store-----*/
#store ul li{
	/*width: 10%;
	padding: 1.5% 7.5%;*/
}
    
    .one_third{
    width: 40%!important;
}
}


/*9/11追加*/

.main_shop{
   width:20%!important;
    text-align: center;
    margin: 0 auto;
    display:inline;
    
}
@media screen  and (max-width:768px){
    .main_shop{
   width:45%!important;
    text-align: center;
    margin: 0 auto;
    display:inline;
    
}
}


.main_shop img{
    width: 80%;
    margin: 0 auto;
}

.contents .shopping_detail{
    font-size: 80%;
    text-align: center;
    
}

@media screen and (max-width:480px){
 .contents .shopping_detail{
    font-size: 80%;
    text-align: left;
}
}

.mall_shop{
    width:10%;
    padding: 1.5% auto;
    text-align: center;
    margin: 0 auto;
    display: inline;
    margin: 0 auto;
}

.mall_shop img{
    width: 80%;
}

@media screen and (max-with:768px){
    .agent_brand{
    width: 45%!important;
}
}

@media screen and (min-width:769px){
        .agent_brand{
    width: 20%!important;
}
}