@charset "utf-8";
/*--------------------------------------Reset*/
/*fontのrem指定----*/
html{
	font-size: 62.5%; /*ベースを10pxにしています*/
	margin:0;
	padding:0;
}
body{
	margin:0;
	padding:0;
	height:100%;
	background-image: url("img/body_tex.png");
	background-attachment: fixed;
	font-size: 1.4rem; /*14px*/
	font-family: "Yu Gothic", YuGothic, "メイリオ", Meiryo, Osaka, sans-serif;
	font-weight: 500;
	text-align:center;
}
img{
	border:0!important;
}
#wrapper{
	width:100%;
	max-width: 950px;
	margin:0 auto;
	position: relative;
}
main{
	width: 100%;
}
main img{
	width:100%;
	height:auto;
}
div {
    display: block;
}
#header-container {
    position: relative;
    height: 109px;
    margin: 0 auto;
}
#header-container .h-logo {
    position: absolute;
    top: 34px;
    left: 0;
    overflow: hidden;
    width: 278px;
    height: 58px;
    white-space: nowrap;
    text-indent: 100%;
    background: url(../img/logo.jpg) no-repeat;
}
.line{
	width:100%;
    height: 59px;
    white-space: nowrap;
    background-color:#0BB1B4;
	}
.copy {
    height: 59px;
    margin:auto;
	line-height:58px;
    color:#FFFFFF;
	font-size:18px;
	text-align: center;
	}

h1 {
   margin:0;
	padding:0;
	font-family: 'Helvetica Neue','Segoe UI',YuGothicM,YuGothic,Meiryo,sans-serif;
	font-weight:normal;
	font-size:8px;
}

.honbun{ text-align:center;}

.obi{ width:100%;}
/*pagetop*/
.pagetop {
    position: fixed;
    bottom:60px;
    right:50px;
	width:75px;
	height:75px;
}
.pagetop img{
	width:75px!important;
	height:75px!important;
}
.float {
	position:fixed;
	bottom:0;
	right:10px;
	width:190px;
	height:62px;
  animation: float_2979 4s linear infinite;
  transform-origin: 50% 50%;
	z-index:9999;
}
 

@keyframes float_2979 {
  0% { transform: translateY(0) }
  50% { transform: translateY(-8px) }
  100% { transform: translateY(0) }
}
.float02 {
	position:fixed;
	bottom:10px;
	right:180px;
	width:32px;
	height:32px;
  animation: float_2980 3s linear infinite;
  transform-origin: 50% 50%;
	z-index:10000;
}
@keyframes float_2980 {
  0% { transform: translateY(-3px) }
  50% { transform: translateY(5px) }
  100% { transform: translateY(-3px) }
}

.float03 {
	position:fixed;
	bottom:40px;
	right:20px;
	width:24px;
	height:24px;
  animation: float_2981 4s linear infinite;
  transform-origin: 50% 50%;
	z-index:10000;
}
@keyframes float_2981 {
  0% { transform: translateY(0) }
  50% { transform: translateY(8px) }
  99% { transform: translateY(0) }
}
@media screen and (max-width: 640px){
	.pagetop {
			
			position: fixed;
			bottom:80px;
			right:0px;
			width:100px;
			height:100px;
	        z-index:10001;
	}
	.pagetop img{
		width:50px!important;
		height:50px!important;
	}
	/*画面下部固定のボタン*/
	#btnCart{
		width:70%;
		margin: 0 auto;
	}
	.float{
		bottom:30px;
		right:80px;
	}
	.float img{
		width:130%!important;
		height:130%!important;
	}
	.float02 {
		position:fixed;
		bottom:10px;
		right:250px;
		width:32px;
		height:32px;
		animation: float_2980 3s linear infinite;
		transform-origin: 50% 50%;
		z-index:10000;
	}
	.float03 {
		position:fixed;
		bottom:40px;
		right:10px;
		width:24px;
		height:24px;
		animation: float_2981 4s linear infinite;
		transform-origin: 50% 50%;
		z-index:10000;
	}
}

/**/

/*----footer----*/
footer{
	display:block;
	max-width:950px;
	margin:0 auto;
	text-align:left;
	font-size:20px;
	margin-bottom: 100px;
}
@media screen and (max-width: 640px){
	footer{
	margin-bottom:150px!important;
	}
}
footer img{
	display: inline-block;
}
#company{
	display: inline-block;
	width:45%;
	float:left;
}
#company img{
	margin-top:2rem;
	margin-left:2rem;
	float:left;
}
#company p{
	margin-top:5rem;
	float:left;
	color:#3184c3;
}
#company-site{
	margin:1rem  0 1rem 3rem;
	clear:both;
	float:left;

}
#footerBox{
	display:block;
	width:40%;
	margin:0 auto;
	padding:1.5rem;
	font-size:1.5rem;
	text-align:left;
	color:#000;
	float:right;
}
#footerBox ul{
	display: inline-block;
	width:98%;
	margin:0 0 1rem 0 ;
	padding:0;
	text-align:left;
	float:left;
}
#footerBox li{
	display: block;
	text-align:left;
	margin:0;
	padding:1rem 0;
	line-height:100%;
}
#footerBox a{
	padding:0;
	margin:0;
	display: block;
	text-align:left;
	font-size:1.3rem;
	line-height:100%;
}
#footerBox a:hover,
#footerBox a:visited {
	color:#ed1e79;
}
#copyright{
	display:block;
	width:100%;
	margin:1rem auto 0;
	color:#333333;
	text-align:center;
	font-size:1.2rem;
}

.troubles{
	position: relative;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,19a7a9+100 */
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #19a7a9 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ffffff 0%,#19a7a9 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ffffff 0%,#19a7a9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#19a7a9',GradientType=0 ); /* IE6-9 */
}

.swiper-container{
	width:77%!important;
}
#beauty{
	text-align: center;
}
#beauty img{
	width:100%;
	height:auto;
}

ul {
    display: block;
    list-style-type: none;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

footer ul li {
    padding-top: 0px;
    padding-left: 25px;
    padding-bottom: 0px;
    float: left;
    list-style: none;
}

@media screen and (max-width: 640px){
	footer ul li {
    padding-top: 0px;
    padding-left: 25px;
    padding-bottom: 0px;
    float: none;
    list-style: none;
	}}