@charset "utf-8";
/* CSS Document */

/*****************
	setting
******************/

body{
	color:#FFF;
	background-image: url("../img/common/bg01.png");
	font-family: '黎ミンY20 M','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
	margin:0;
	padding:0;
	line-height:1.4;
	font-size:0.9em;
	zoom:1;
	-webkit-text-size-adjust:100%;
	z-index: 0;
	}

a{
	color: #FFF;
	text-decoration: none;
}

.button_na{opacity: 0.5;}

html,body{
	height:100%;
	}
	
li{	list-style:none;}


a:hover img:not(.gn){
opacity: .5;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);	/* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
}
 
a img{
-webkit-transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-ms-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
}

.wrapper{
	min-width: 960px;
	height: auto;
	overflow: hidden;
}

.btn-na{opacity: 0.5}

.bg-image-loop {
	width: 100%;
	height: 1116px;
	position: relative;
	background: url("../img/common/kasumi.png") repeat-x 0 0;
	background-size: auto 100%;
	animation: bg-slider 40s linear infinite;
	margin: 80px 0;
	padding: 0;
}
@keyframes bg-slider {
	from { background-position: 0 0; }
    to { background-position: -911px 0; }
}

/*****************
	header
******************/

.nav{
margin-top: -14px;
width: 100%;
height: 80px;
position:fixed;
background-color: #343434;
opacity: .9;
z-index: 3;
}

.global-navi{
width: 700px;
margin: 0 auto;
}

		.global-navi li{
			float: left;
			margin-left: 15px;
			display: inline-block;
		}


/*****************
	top
******************/

	
#top{
	background-image: url("../img/top/top-image.png");
	height: 900px;
	width: 960px;
	margin: 0 auto;
}


.ad-phrase{
	padding-top: 282px;
	padding-left: 24px;
}

.master-up{
	float:right;
	margin-top: 650px;
	margin-right: 20px;
}

.title-logo{
	margin-top: 70px;
}

/*****************
	information
******************/

#information{
	width: 960px;
	height: auto;
	margin: 0 auto;
}

article{
	color: #232323;
	background-color: #FFF;
	width: 300px;
	height: 300px;
	margin: 20px 10px;
	float:left;
}

article figure{
	margin-left: 0px;
	margin-top: -10px;
	z-index: 1;
}

article header{
	position: relative;
	background-image: url("../img/infor/date_bg.png");
	width: 70px;
	height: 38px;
	margin-top: -40px;
	margin-left: 10px;
	z-index: 2;
	text-align: center;
}

.date b{
	display: inline-block;
	float: left;
	margin-left: 15px;
	margin-top: -5px;
	font-size: 120%;
}

article h4{
	line-height: 30%;
	padding-left: 30px;
}

article a{color:#232323}
article a:hover{color: #a5070e}


/*****************
	information toggle
******************/

#text-wrap {
    width: 50%;
    height: 100%;
    display: block;
    margin: 0 auto;
    padding: 70px;
}
 
.hide-text {
    display: none;
}
  
#text-wrap {
    width: 50%;
    height: 100%;
    display: block;
    margin: 0 auto;
    padding: 70px;
}
 
.hide-text {
    display: none;
}
 
 
button.readmore {
    position: relative;
    height: 80px;
    width: 120px;
    margin: 40px auto;
    display: block;
    background-color: transparent;
    color: #FFF;
    padding-bottom: 40px;
    border: none;
    outline: 0;
    transition: .5s;
    -erbkit-transition: .5s;
}
 
button.readmore::after {
    content: " ";
    position: absolute;
    width: 10px;
    height: 10px;
    border-top: solid 3px #FFF;
    border-right: solid 3px #FFF;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    right: 52px;
    top: 30px;
    transition: .5s;
    -erbkit-transition: .5s;
}
 
button.readmore:hover::after {
    top: 40px;
}
 
.on-click {
    color: transparent!important;
}
 
.on-click {
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
}


/*****************
	concept
******************/

#content{
	width: 100%;
	height: auto;
	margin: 0 auto 0;
	background: url("../img/common/bg02.png");
	padding-top: 100px;
	text-align: center;
}

#content h1{
	background-image: url("../img/contents/h1_contents.png") ;
	width: 325px;
	height: 90px;
	margin: 0 auto 0;
	margin-top: -130px;
	margin-bottom: 50px;
	text-indent: -9999px;
}

.intro{
	margin-bottom: 60px;
	line-height: 50%;
}

.sec01{
	width:960px;
	height: 380px;
	margin: 0 auto 0;
	padding-left: 0px;
}

.sec01 li{
			float: left;
			display: inline-block;
			height: 300px;
			box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}

.y-float{
	margin-top: -20px;
}

#concept h2{
	font-size: 200%;
	line-height: 50%;
}

#concept h3{
	font-size: 150%;
	line-height: 30%;
}


#concept section{padding-bottom: 40px;}

#concept em{
	font-style: normal;
	color:#FFE400;
}

.sec02{
	width:960px;
	height: 380px;
	margin: 0 auto 0;
	padding-left: 0px;
}

.sec02 li{
			float: left;
			margin-left: 15px;
			display: inline-block;
			height: 300px;
}

.sec02 img{
	filter: drop-shadow(0 0 5px rgba(0, 0, 0, .5));
		}

.sec03{
	width:960px;
	height: 700px;
	margin: 0 auto 0;
	padding-bottom: 100px;
}

.sec03 img{
	filter: drop-shadow(0 0 5px rgba(0, 0, 0, .5));
		}


.content_caution{
	line-height: 50%;
	padding-top: 30px;
	margin-bottom: 80px;
}

.content_caution h4{
	width: 500px;
	margin: 0 auto 0;
	border-bottom: medium dotted #FFF;
	line-height: 250%;
	font-weight: bold;
	font-size: 120%;
}



/*****************
	shops
******************/

#shops{
	width: 100%;
	height: 2500px;
	margin: 0 auto 0;
	background: url("../img/common/texture03.png");
	padding-top: 20px;
	padding-bottom: 200px;
	text-align: center;
}

#shops h1{
	background-image: url("../img/shops/h1_shops.png") ;
	width: 325px;
	height: 90px;
	margin: 0 auto 0;
	margin-top: -50px;
	text-indent: -9999px;
}


#shops h2{
	width: 200px;
	margin: 0 auto 0;
	border-bottom: thick dotted #FFF;
	margin-top: 30px;
}

#shops section{
	width: 900px;
	margin: 0 auto 0;
}

.tokuten{
	margin: 40px 0 0 0;

}

.tokuten li{
			float: left;
			margin-right: 30px;
			margin-left: 15px;
			margin-bottom: 200px;
			display: inline-block;
			height: 601px;
}

.tokuten-sample img{
		filter: drop-shadow(0 0 5px rgba(0, 0, 0, .5));
}

.tokuten-intro h3{
	clear: both;
	width: 300px;
	height: 30px;
	background-color: #343434;
	border-radius:20px;
	margin: 0 auto 0;
	line-height: 2;
	margin-top: 5px;
}

.tokuten-intro p{
	line-height: 50%;
}

.shoplink{
	width: 150px;
	height: 30px;
	margin: 0 auto 0;
	border: thin;
	line-height: 2.0;
	border: thin solid #FFF;
}

.shoplink a:hover{
	text-decoration-line: underline;
}

.shoplink span{
	color: #FFF;
}

.shoplist-wrapper{
	clear: both;
}

.shoplist-wrapper h4{
	margin-top: -20px;
}

.shoplist{
	height: 200px;
	padding-top: 30px;
}



.tokuten{
	margin-bottom: 100px;
}

.shoplist li{
	float: left;
	width: 200px;
	height: 40px;
	margin-left: -15px;
	margin-right: 20px;
	margin-bottom: 10px;
	font-size: 100%;
	line-height: 280%;
	color: #FFF;
	border: thin solid #FFF;
	-webkit-transition: opacity 1s ease-out;
	-moz-transition: opacity 1s ease-out;
	-ms-transition: opacity 1s ease-out;
	transition: opacity 1s ease-out;
}

.shoplist li:hover{
	opacity: .5;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);	/* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
}

.shoplist b{
	font-size: 120%;
	font-weight: 100;
}


/*****************
	gallery
******************/

#gallery{
	width: 960px;
	height: 700px;
	margin: 0 auto;
	padding: 20px 10px;
}

#gallery ul{
	display: block;
	margin-left: -25px;
}

#gallery li{
	float: left;
	padding-right: 10px;
	padding-bottom: 20px;
}


/*****************
	special
******************/

#special{
	width: 100%;
	height: auto;
	margin: 0 auto 0;
	background: url("../img/common/bg02.png");
	padding-top: 20px;
	padding-bottom: 180px;
	text-align: center;
}

#special p{
	line-height: 50%;
}

#special h1{
	background-image: url("../img/special/h1_special.png") ;
	width: 325px;
	height: 90px;
	margin: 0 auto 0;
	margin-top: -50px;
	text-indent: -9999px;
}

#special h2{
	width: 200px;
	margin: 0 auto 0;
	border-bottom: thick dotted #FFF;
	margin-top: 30px;
}

#special h4{
	width: 200px;
	height: 30px;
	background-color: #505050;
	border-radius:20px;
	line-height: 240%;
	margin: 0 auto 0;
	margin-bottom: 10px;
}

#special h3{
	width: 100px;
	height: 30px;
	font-size: 100%;
	background-color: #505050;
	line-height: 240%;
	margin: 0 auto 0;
	margin-bottom: 30px;
	margin-top: 30px;
}

.campaign a{
	font-weight: bold;
	text-decoration: underline;
}

.campaign a:hover{
	color: #ffb450;
	text-decoration: underline;
}

.campaign-image{
	margin-top: 30px;
	filter: drop-shadow(0 0 5px rgba(0, 0, 0, .5));
}

.ci-en{
	width: 160px;
	margin: 30px auto 0;
	padding-top: 20px;
	border-top: thin dashed;
	margin-bottom: 50px; 
}

.trial{
		margin-top: 30px;
}

.trial_image{
	margin-bottom: 30px;
}

.trial ul{
	margin-left: -36px;
}

.trial a:hover{
	text-decoration: underline;
	color: #8C0003;
}

.tw-icon{
	margin-top: 30px;
}

.tw-icon ul{
	display: inline-block;
	margin-left: -30px;
}


.tw-icon li{
	float: left;
	padding-right: 10px;
	padding-bottom: 20px;

}

.tw-dl{
	width: 200px;
	height: 40px;
	background-color: #FFF;
	margin: 0 auto 0;
	line-height: 280%;
	margin-top: 10px;
	font-weight: bold;
}

.tw-dl a{
	color: #303030;
	}

.tw-dl a:hover{
	color: #ffb450;
	text-decoration: underline;
	}


/*****************
	spec
******************/

#spec{
	background: url("../img/spec/spec_bg.png");
	background-size: cover;
	height: 1157px;
	padding-top: 50px;
}

#spec h1{
	background-image: url("../img/spec/h1_spec.png");
	width: 325px;
	height: 90px;
	margin: 0 auto 0;
	margin-top: -80px;
	text-indent: -9999px;
}

.spec-contain{
	text-align: center;
	color: #232323;
	line-height: 50%;
	padding-top: 100px;
	font-weight: 600;
}

.spec-contain small{
	display: inline-block;
	margin-top: 10px;
}

footer{
	width: 480px;
	margin: 100px auto;
	text-align: center;
	color: #232323;
}

.brand-logo{
	margin-bottom: 10px;
}

footer small{font-size: 90%;}