@charset "utf-8";
/* CSS Document */
body {
	font-size:10px;
	font-family: 'Noto Sans JP',"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	background: #111;
}
body a { color:#333;}
body a:hover { text-decoration:none;}

.container {
	background:#fff;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}
.container img { width:100%; height: auto;}

.inner { margin: 0 3.4666667%;}

@media (min-width: 641px) {
/* PC用 */
	.container {
		width:750px;
		margin:0 auto;
		overflow: hidden; 
		
		font-size:20px;
	}	
}
@media (max-width: 640px) {
/* SP用 */
}


.scrollanime {
	opacity: 0;
}
.fadeInUp {
	animation-name: fadeInDown;
	animation-delay: 0s;
	animation-duration: 0.75s;
	animation-fill-mode: forwards;
	transform: translateY(50px);
}
@keyframes fadeInDown {
	0% {
		opacity: 0;			
	}
	100% {
		opacity: 1;
		transform: translate(0);
	}
}

.updown {
	transform: translateY(-100px);
}
.downup {
	transform: translateY(100px);
}

.slide-right {
	transform: translateX(200px);
}
.slide-left {
	transform: translateX(-200px);
}


/* header / footer
-------------------------------------------------- */
.header {
	padding:20px 4.673% 0;
	background: url("../images/bg_kv.png") center top no-repeat;
	background-size:100% auto;
}
.header h1 {
	width:14.485%;
	margin:0 0 4.6168%;
}
.header .header--txt {
	margin:-8px 0 14%;
}
@media (min-width: 641px) {
/* PC用 */
}
@media (max-width: 640px) {
/* SP用 */
}


.footer {
	display: flex;
	justify-content: space-between;
	padding:5.9em 4.67% 40%;
	color: #fff;
	background:#000;
	z-index: -1;
}
.footer .inner {
	margin:0;
}
.footer p a { color:#fff;}
@media (min-width: 641px) {
/* PC用 */
}
@media (max-width: 640px) {
/* SP用 */
}

.bottom--banner {
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
}
.bottom--banner img { width:100%; height: auto;}
@media (min-width: 641px) {
/* PC用 */
    .bottom--banner {
        max-width:750px;
        left:50%;
        transform:translateX(-50%);
    }
}

/* buy
-------------------------------------------------- */
.cv {
	margin-bottom:12.5%;
	padding:21px 0 0;
	background:url("../images/bg_cv.png") center top no-repeat;
	background-size:100% auto;
	
	position: relative;
	z-index: 111;
}
.cv .item {
	margin: 0 32% 20px;
}
.cv p {
	margin:0 4.673% 5%;
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.45;
}
.cv .fx {
	position: relative;
	display:flex;
	justify-content: space-between;
	margin:0 4.673% 5%;
	z-index: 1111;
}
.cv .fx div {
	width:49.5%;
}
.cv .fx div div { width:100%;}
@media (min-width: 641px) {
/* PC用 */
}
@media (max-width: 640px) {
/* SP用 */
}

.cv01 {
	padding-top:0;
	background: none;
}
@media (min-width: 641px) {
/* PC用 */
}
@media (max-width: 640px) {
/* SP用 */
}



.buy {
	position:relative;
	margin-bottom: 12.5%;
	z-index: 11;
}
.buy .btn {
	position:absolute;
	bottom:0;
    right: 6.5%;
    width: 61%;	
}
.buy .btn:hover { cursor:pointer;}
.btn--ec {}
.btn--ec img {
	height:100%;
	width:atuo;
}
.btn--ec img:hover { opacity:0.85; cursor: pointer;}
.list--ec {
	position:absolute;
	left:0;
	top:100%;
	z-index: 201;
	
	display:none;
}
.list--ec ul {
	position: relative;
	/*padding:7px 7px 1px;*/
	z-index: 111;
}
.list--ec ul::before {
	content:'';
	border-bottom:10px solid #fff;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	position: absolute;
	left:50%;
	top:-10px;
	margin-left:-5px;
	z-index: 111;
}
.list--ec ul li {
	padding:10px 0.5em;
	text-align: center;
	border-bottom:1px solid #D9D9D9;
	background:#fff;
}
.list--ec ul li:last-of-type { border-bottom:none;}

.btn .refill {
	text-decoration:underline;
	text-align: center;
}
.btn .refill:hover { cursor: pointer;}
.ul--refill {
	width:46%;
	top:2.6em;
	left:50%;
	transform: translateX(-50%);
	z-index: 1111;
}
@media (min-width: 641px) {
/* PC用 */
}
@media (max-width: 640px) {
/* SP用 */
}



/* point
-------------------------------------------------- */
.point {
	position: relative;
	margin-bottom:14.8%;
	z-index: -1;
}
.point p,
.point ul {
	margin:5% 4.673% 5%;
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.55;
}

#item03 p {
	margin-top:-12.5%;
}
#item03 .ul--nose { margin-bottom:12.5%;}
.ul--nose li {
	padding:.4em 0;
	text-align: center;
	border-bottom:1px solid #000;
}

#item02 { margin-bottom:20%;}
#item02 img:last-of-type { margin-top:10%;}

@media (min-width: 641px) {
/* PC用 */
}
@media (max-width: 640px) {
/* SP用 */
}


/* totop
-------------------------------------------------- */
.totop {
	position: relative;
	height:50px;
	margin:15px 0 30px;
	z-index: -1;
}
.totop p {
	position: absolute;
	right:3%;
	bottom:0;
	width:35px;
	height:50px;
	background: url("../images/totop.png") right bottom no-repeat;
	background-size:auto 100%;
}
@media (min-width: 641px) {
/* PC用 */
}
@media (max-width: 640px) {
/* SP用 */
}


/* lineup
-------------------------------------------------- */
.lineup .ttl {
	margin-bottom:3.5%;
}
.ul--lineup {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding:0 4.673% 7.5%;
}
.ul--lineup li {
	width:48%;
}
.ul--lineup li p {
	margin-top:10px;
	margin-bottom: 14px;
	text-align: center;
	font-size:1.2em;
	font-weight: 900;
	line-height: 1.45;
}
.btn--lineup { padding:0 4.673% 4.5%;}
.lineup > p { 
	padding:0 4.673%;
	line-height: 1.45;
}
@media (min-width: 641px) {
/* PC用 */
}
@media (max-width: 640px) {
/* SP用 */
}



/* 
-------------------------------------------------- */
@media (min-width: 641px) {
/* PC用 */
}
@media (max-width: 640px) {
/* SP用 */
}