@charset "UTF-8";

body {

	font-family: "Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
	margin:0;
	padding:0;
	font-size:100%;
}



/* logoキラキラ ---------------------------------------- */
.reflection-img{
	max-width:1000px;
	height:auto;
	position:relative;
	overflow:hidden;
	margin-bottom:15px;
}
 
.reflection {
	height:100%;
	width:1000px;
	position:absolute;
	top:-180px;
	left:0;
	background-color:#fff;
	opacity:0;
	transform:rotate(45deg);
	animation:reflection 2s ease-in-out infinite;
	-webkit-transform:rotate(45deg);
	-webkit-animation:reflection 2s ease-in-out infinite;
	-moz-transform:rotate(45deg);
	-moz-animation:reflection 2s ease-in-out infinite;
	-ms-transform:rotate(45deg);
	-ms-animation:reflection 2s ease-in-out infinite;
	-o-transform:rotate(45deg);
	-o-animation:reflection 2s ease-in-out infinite;
}
 
@keyframes reflection {
	0% { transform: scale(0) rotate(45deg); opacity: 0; }
	80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { transform: scale(4) rotate(45deg); opacity: 1; }
	100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

@-webkit-keyframes reflection {
	0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
	80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
	100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

@-moz-keyframes reflection {
	0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
	80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
	100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}

@-ms-keyframes reflection {
	0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
	80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
	100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}

@-o-keyframes reflection {
	0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
	80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
	100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}

/* サイト名 */
.logo a{
	text-decoration:none;

}

.logo{
	padding-top:5px;
	padding-left:0px;
	margin:0;
}

.name{
	max-width: 100%;
	height:auto;
}

/* ナビゲーションメニュ */

header nav {
	text-align: center;
	margin-top:20px;
}

header nav ul {
	margin: 0;
	padding: 1em;
	list-style-type: none;
}

header nav ul li {
	display: inline;
	margin-left: 10px;
	font-size:90%;
}

header nav ul li:first-child {
	margin-left: 0;
}

header nav ul li ul {
	display: none;
}

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

a:hover {
	color: #D90000;
}

a, a:hover {
	-o-transition: color 0.25s ease-in;
	-webkit-transition: color 0.25s ease-in;
	-moz-transition: color 0.25s ease-in;
	transition: color 0.25s ease-in;
}



/* トップロゴ・画像 */

.main_top{
	width: 100%;
	height:auto;
	background: url("../images/haikei1.jpg") no-repeat center;
	background-size: cover;
}

.reflection-img{
	text-align:center;
}

.top_logo{
	text-align:center
}	

.logo_1{
	max-width: 100%;
	height:auto;
}

.main_1{
	text-align:center
}

.point1{
	text-align:center
}

.point2{
	text-align:center
}

.point3{
	text-align:center
}

.point3_2{
	text-align:center
}

.img_1{
	max-width: 100%;
	height:auto;
}


.logo_2{
	max-width: 100%;
	height:auto;
}

/* 特徴 */
.content_area{
	width: 100%;
	height:auto;
	background: url("../images/haikei2.jpg") no-repeat center;
	background-size: cover;
}

.point1{
	margin:0;
}

.point2{
	margin:0;
}

.title2{
	font-size:120%;
	font-family:sans-serif;
	color:#FF0461;
	border-left:8px solid #FF0461;
	padding-left:10px;
	margin-left:5px;
	margin_right:5px;	
}

.effect1{
	text-align:center
}

.list{
	margin-bottom:10px;
}




/* 商品詳細 */

.section1{
	text-align : center ;
	margin-bottom: 30px;
}

.table_01{
	width: 70%;
	margin-left:auto;
	margin-right:auto;
	border-collapse: separate;
	border-spacing: 0px;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
}

.table_01 th{
	width:20%;
	padding:4px;
	text-align: left;
	vertical-align: middle;
	color: #444;
	background-color: #feedf3;
	border-left: 3px double #999;
	border-top: 1px solid #fff;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.table_01 td{
	width:50%;
	padding:4px;
	text-align: left;
	background-color: #fafafa;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.text_1{
	text-align: left;
	font-weight:bold;
	padding-left:10px
}




/* ショップボタン */
.banner{
	margin-top:40px;
	margin-bottom:20px
}

.banner ul{
	margin:0;
	padding:0;
	list-style:none
}

.banner li a{
	display:block;
	padding:10px 5px;
	color:#FFF;
	font-size:14px;
	font-weight:bold;
	text-align:center;
	text-decoratio:none
}


.tel{
	text-align:center;
}

.red{
	color:#FF0000;
	font-size:85%;
}



/* ページの上に戻る */

.pagetop {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 30px;
}
.pagetop a {
   	display: block;
   	text-align: center;
    color: #222;
   	font-size: 12px;
   	text-decoration: none;
   	padding: 20px 10px;
}
 
.pagetop a:hover {
    display: block;
   	text-align: center;
   	color: #fff;
   	font-size: 12px;
	text-decoration: none;
	padding:20px 10px;
}



/* コピーライト */
.footer_area{
	background: url("../images/footer_haikei.jpg")no-repeat center;
	background-size: cover;
	width: 100%;
	height:auto;
}

footer{
	padding-top:10px;
	padding-bottom:10px;
	text-align:center;
	color:#333
}


/* ########### 480px 以下 ########### */
@media only screen and (max-width: 480px) {


.reflection-img{
	padding-left:5px;
	padding-right:5px;
}

.logo{
	text-align:center;
}

.top_logo{
	padding-right:30px;
}

.banner .mini-banner li {
	text-align:center;
}

.title2{
	font-size:100%;
}


footer{
	font-size:10px
}

 /* 非表示 */
.top  {
	 background-image: none;
} 

.top_logo{
	display:none;
}

.content{
	 background-image: none;
} 


/* ボックスの上下の間隔 */
.top_img{
	margin:0
}

.text_1{
	font-size:80%;
	text-align: left;
	padding-left:5px
}


 /* 表示 */
.tel_img_2 {
	display: block;
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:10px;
}

 /* 非表示 */
.tel_img  {
	 display: none;
} 



}

/* ########### 599px 以下 ########### */
@media (max-width: 599px) {

.logo{
	text-align:center;
}

header nav {
	text-align: center;
	margin-top:10px;
}

header nav ul li {
	font-size:12px;
	margin-left:3px;
}

.banner .mini-banner li {
	text-align:center;
}

 /* 非表示 */

.top_logo{
	display:none;
}

.content_area{
	 background-image: none;
} 

 /* 表示 */
.tel_img_2 {
	display: block;
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:10px;
}

 /* 非表示 */
.tel_img  {
	 display: none;
} 


}


/* ########### 640pxまで ########### */
@media screen and (max-width:640px){

header nav {
	text-align: center;
	margin-top:10px;
}

header nav ul li {
	font-size:12px;
	margin-left:3px;
}

.banner .mini-banner li {
	text-align:center;
}

 /* 非表示 */
.content_area{
	 background-image: none;
} 

 /* 表示 */
.tel_img_2 {
	display: block;
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:10px;
}

 /* 非表示 */
.tel_img  {
	 display: none;
} 


 



 

}



/* ########### 640px 以上～ 767px 以下 ########### */
@media (min-width: 640px) and (max-width: 767px) {

 header nav {
	text-align: center;
	margin-top:10px;
}

header nav ul li {
	font-size:12px;
	margin-left:3px;
}

 /* 非表示 */


.content_area{
	 background-image: none;
} 

 /* 表示 */
.tel_img {
	display: block;
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
}

 /* 非表示 */
.tel_img_2  {
	 display: none;
} 

}


/* ########### 768px 以上 ########### */
@media (min-width: 768px) {
header:after{
	content:"";
	display:block;
	clear:both
}

.logo{
	float:left;
	width:35%
}

#menu-box{
	float:left;
	width:65%
}

.top_area:after{
	content:"";
	display:block;
	clear:both
}

.top_img{
	float:left;
	width:60%
}

.top_logo{
	float:left;
	width:40%
}

.main_2:after{
	content:"";
	display:block;
	clear:both
}

.point1{
	float:left;
	width:50%
}

.point2{
	float:left;
	width:50%
}

.point3{
	float:left;
	width:50%
}

.point3_2{
	float:left;
	width:50%
}

.effect1{
	float:left;
	width:50%
}

.effect1_2{
	float:left;
	width:50%
}

.banner ul:after{
	content:"";
	display:block;
	clear:both
}

.banner li{
	float:left;
	width:25%
}

 /* 表示 */
.tel_img {
	display: block;
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
}

 /* 非表示 */
.tel_img_2  {
	 display: none;
} 



}


/* ########### 1040px 以上 ########### */
@media (min-width: 1040px) {

/*全体の横幅を固定*/
header,.reflection-img,.top_area,.main_1,.feature,.main_2,.effect,.banner,.tel,.detail,footer{
	width:1000px;
	margin-left:auto;
	margin-right:auto
}

}