@charset "utf-8";
/* ===================================================================
 style info : リセット及びフォントサイズ
=================================================================== */
/* 
html5doctor.com Reset Stylesheet
v1.4.1 
2010-03-01
Author: Richard Clark - http://richclarkdesign.com
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, .pagenav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	word-break: break-all;
}
body {
	line-height: 1;
	background: #fff;
	color: #111111;
}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, .pagenav, section, summary {
	display: block;
}
ul, ol {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
a {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
ins {
	background-color: #ff9;
	color: #111111;
	text-decoration: none;
}
mark {
	background-color: #ff9;
	color: #111111;
	font-style: italic;
	font-weight: bold;
}
del {
	text-decoration: line-through;
}
abbr[title], dfn[title] {
	border-bottom: 1px dotted #000;
	cursor: help;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 1em 0;
	padding: 0;
}
input, select {
	vertical-align: middle;
}


/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.8.1
*/
body {
	font:13px/1.231 arial, helvetica, clean, sans-serif;
}
select, input, button, textarea, button {
	font:99% arial, helvetica, clean, sans-serif;
}
table {
	font-size:inherit;
	font:100%;
}
pre, code, kbd, samp, tt {
	font-family:monospace;
	line-height:100%;
}

/*----------------------------------------------------
要素
----------------------------------------------------*/
html, body {
	height: 100%;
}
html {
	overflow-y:scroll;
}
img {
	line-height: 0;
	font-size: 0;
	vertical-align: bottom;
}
/*短いページ：背景をページ下まで対応*/
.setting {
	height:100%;
	min-height:100%;
}
body > .setting {
	height:auto;
}
body {
	background:#fff;
	color:#111111;
	font-size: 12px;
	-webkit-text-size-adjust:none;
	font-family:"ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN W6", ArialMT;
}
h1, h2, h3, h4, h5, h6 {
	font-size:14px;
	font-family:"ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN W6", ArialMT;
}
ol {
	margin-left:20px;
}
/*境界線：デザイン*/
hr {
	border: 0;
	background:url(/voi/sp/images/sp/hr_line.gif) repeat-x left center;
	padding:6px 0;
	margin:0;
	height:2px;
}
hr.footline {
	border: 0;
	background:url(/voi/sp/images/sp/hr_line.gif) repeat-x left center;
	padding:0;
	margin:0;
	height:2px;
}
em{
		font-style: normal;
}


/*----------------------------------------------------
ヘッダ・フッタ
----------------------------------------------------*/
.search .brand {
	float:right;
	border-left:#f8bac6 solid 1px;
}
.container {
	width:100%;
}
.title {
	width:100%;
	text-align:left
}
.js-togglecontent {
	display: block;
}
footer{
	font-size:12px;
	background:#bcbcbc;
	padding:7px 0;
	text-align:center;
}
footer p{
	color:#fff;
}

ul#pagelink {
	margin: 10px 0 15px 0;
}
.r-contents ul#pagelink {
	margin-bottom: 30px;
}
ul#pagelink li {
	display: inline;
	line-height: 1.5;
}
ul#pagelink li a {
	margin-right: 5px;
	text-decoration: underline;
}


/* リンク
----------------------------------------------------*/
a { text-decoration:none; }

a:link { color:#111111; }

a:visited { color:#111111; }


/* 汎用クラス
----------------------------------------------------*/

.area { padding: 0 5px;}

.ac {	text-align: center;}
.ar {	text-align: right;}

.f_l { float: left;}
.f_r { float: right;}


/* clearfix */
.cfx:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

.cfx { display:inline-block; }

/*\*/
* html .cfx { height:1%; }

.cfx { display:block; }


/* ページTOP */
.topagetop {
	margin: 0 10px 15px 0;
	text-align: right;
}

.topagetop a {
	padding: 5px 0 5px 20px;
	background: url(/voi/sp/webshop/other/mailmagazine/img/b_pagetop.png) no-repeat left center;
	background-size: 14px 14px;
		-moz-background-size: 14px 14px;
		-webkit-background-size: 14px 14px;
	text-decoration: underline;
}


/* タイトル
----------------------------------------------------*/

.container header {
		margin: 8px 0;
}

.container header h2 {
		display: table;
		height: 40px;
}

.container header span,
.container header em {
		display: table-cell;
		vertical-align: middle;
}

.container header span {
		width: 69px;
}
.container header em {
		font-size: 14px;
}

/* ページタイトル
----------------------------------------------------*/
.pagettl {
		margin-bottom: 10px;
}

.pagettl h3 {
		margin-bottom: 5px;
		font-size: 15px;
		color: #444;
}

.pagettl h3 em {
		display: block;		
		color: #53a418;
		font-size: 25px;
}

.pagettl .mainimg {
	background: -moz-linear-gradient(left, #ecfce1 0%, #ecfce1 50%, #d9f9c3 52%, #d9f9c3 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ecfce1), color-stop(50%,#ecfce1), color-stop(52%,#d9f9c3), color-stop(100%,#d9f9c3)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #ecfce1 0%,#ecfce1 50%,#d9f9c3 52%,#d9f9c3 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #ecfce1 0%,#ecfce1 50%,#d9f9c3 52%,#d9f9c3 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #ecfce1 0%,#ecfce1 50%,#d9f9c3 52%,#d9f9c3 100%); /* IE10+ */
	background: linear-gradient(to right, #ecfce1 0%,#ecfce1 50%,#d9f9c3 52%,#d9f9c3 100%); /* W3C */
	font-weight: bold;
}

/* 商品ボタン
----------------------------------------------------*/
.btn-item ul {
	display: table;
	width: 100%;
	margin-bottom: 16px;
}

.btn-item li {
	display: table-cell;
	width: 50%;
}

.btn-item .itemarea {
	box-sizing: border-box;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
	border: solid 1px #c9c9c9;
	border-radius: 6px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(234,234,234,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%);
	font-weight: bold;
}

	.btn-item li:nth-child(odd) .itemarea {
		margin-right: 5px;
	}
	.btn-item li:nth-child(even) .itemarea {
		margin-left: 5px;
	}


.btn-item li a {
	display:inline-block;
	width:100%;
	box-sizing: border-box;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
	border: solid 1px #fff;
	border-radius: 6px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
}

	
.btn-item li .item-img {
	text-align: center;
	padding: 10px 0;
}

.btn-item li .item-txt {
	position: relative;
	padding-left: 10px;
	margin-bottom: 7px;
	font-size: 14px;
	color: #444;
}
.btn-item li .item-txt span {
	display: block;
	font-size: 10px;
}

.btn-item li .item-txt:after {
	content: "";
	position: absolute;
	top: 0px;
	right: 5px;
	display: block;
	width: 10px;
	height: 100%;
	background: #76cc3e url(/voi/webshop/nagamaki_t/img/arrow_white.png)no-repeat 50% 50%;
	background-size: 7px 10px;
		-moz-background-size: 7px 10px;
		-webkit-background-size: 7px 10px;
}


/* ポイント
----------------------------------------------------*/
h3.pointttl {
	font-size: 14px;
	color: #326b00;
	margin-bottom: 12px;
}

h3.pointttl em {
	font-size: 20px;
}

.point {
	display: table;
	width: 100%;
	height: 42px;
	padding: 3px 0;
	margin: 25px 0 15px;
	background: #d9f9c3;
}

.point .ico_num,
.point .txt {
	display: table-cell;
	vertical-align: middle;
}

.point .ico_num {
	width: 72px;
}
.point .ico_num img {
	position: relative;
	top: -7px;
	left: 10px
}

.point .txt {
	font-size: 17px;
	padding-right: 5px;
}
.point .txt-attr {
	color: #e1387f;
}

.point-img,
.bnr-pumpus {
	width: 310px;
	margin: 0 auto;
}
.bnr-pumpus {
		margin: 30px auto 30px auto;
}

.point-img li {
		margin-bottom: 15px;
}

.bnr-pumpus li {
		margin-bottom: 20px;
}

.point-img li:last-child,
.bnr-pumpus li:last-child {
		margin-bottom: 0;
}

/* ポイント4 */
.point4-txt {
	margin: 0 10px 10px;
	box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	border: 1px solid #f493bc;
}

.point4-txt p {
	padding: 10px;
	color: #e1387f;
}

/* ポイント5 */
.point5-txt {
	font-size: 11px;
}

.point5-txt .lead {
	margin-bottom: 5px;
	font-size: 14px;
	color: #e1387f;
}

/* すべての〜をみる
	 ラクチンシリーズ
----------------------------------------------------*/

.btnarea a {
	position: relative;
	display: table;
	width: 100%;
	height: 54px;
	margin: 0 0 10px;
	border: solid 1px #dfdfdf;
	border-radius: 6px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
	font-weight: bold;
}

.btnarea a:after {
	content: "";
	position: absolute;
	top: 0px;
	right: 5px;
	display: block;
	width: 10px;
	height: 100%;
	background: url(/voi/webshop/nagamaki_t/img/arrow_black.png)no-repeat 50% 50%;
	background-size: 7px 10px;
		-moz-background-size: 7px 10px;
		-webkit-background-size: 7px 10px;
}

.btn-all a {
	background: -moz-linear-gradient(top, rgba(236,252,225,1) 0%, rgba(207,247,179,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(207,247,179,1)));
	background: -webkit-linear-gradient(top, rgba(236,252,225,1) 0%,rgba(207,247,179,1) 100%);
	background: -o-linear-gradient(top, rgba(236,252,225,1) 0%,rgba(207,247,179,1) 100%);
	background: linear-gradient(to bottom, rgba(236,252,225,1) 0%,rgba(207,247,179,1) 100%);
}

.btn-rakuchin a {
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(236,235,235,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(236,235,235,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(236,235,235,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(236,235,235,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(236,235,235,1) 100%);
}

.btn-all span,
.btn-all em {
		display: table-cell;
		vertical-align: middle;
}

.btn-all span {
	width: 70px;
	padding-left: 5px; 
}

.btn-all em {
		padding-right: 10px;
		font-size: 17px;
		color: #444;
}

.btn-rakuchin .logo-raluchin,
.btn-rakuchin .img-raluchin {
	display: table-cell;
	vertical-align: middle;
}

.btn-rakuchin .logo-raluchin {
		width: 122px;
		padding-left: 12px;
}

.btn-rakuchin .img-raluchin {
		padding-right: 10px;
}

/* ページの先頭へ
----------------------------------------------------*/
.topagetop {
	margin: 20px 10px 15px 0;
	text-align: right;
}

.topagetop a {
	position: relative;
	padding: 2px 0 2px 20px;
	text-decoration: underline;
}

.topagetop a:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0px;
	display: block;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	background: url(/voi/sp/images/tlmtop/common/icon_parts_sprites.png) no-repeat 0px -180px;
	background-size: 50px 350px;
		-moz-background-size: 50px 350px;
		-webkit-background-size: 50px 350px;
}



/* フリックあり
----------------------------------------------------*/

.index-flick .point {
	margin: 30px 0 15px;
}
 
#viewport {
	width: 310px;
	margin: 0 auto;
	overflow: hidden; /* はみ出た部分は表示しない */
}

/* 画像枚数 */
.point-img .flipsnap,
.point-img4 .flipsnap {
	width: 1240px;
}
.point-img2 .flipsnap,
.point-img3 .flipsnap {
	width: 620px;
}

#viewport .flipsnap li {
	width: 310px;
	float: left;
	margin-bottom:0;
}

/* フリックナビ */
#viewport .pointer {
	height: 8px;
	margin: 15px auto 0;
	text-align: center;
}

/* フリックナビ数 */
.point-img .pointer,
.point-img4 .pointer {
	width: 198px;
}
.point-img2 .pointer,
.point-img3 .pointer {
	width: 90px;
}

#viewport .pointer span {
	width: 40px;
	height: 8px;
	float: left;
	margin-bottom:0;
	margin-right: 5px;
}

#viewport .pointer span:last-child {
	margin-right: 0;
}

#viewport .pointer span {
	width: 40px;
	height: 8px;
	display: block;
	background: -moz-linear-gradient(top, rgba(221,221,221,1) 0%, rgba(235,235,235,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(221,221,221,1)), color-stop(100%,rgba(235,235,235,1)));
	background: -webkit-linear-gradient(top, rgba(221,221,221,1) 0%,rgba(235,235,235,1) 100%);
	background: -o-linear-gradient(top, rgba(221,221,221,1) 0%,rgba(235,235,235,1) 100%);
	background: linear-gradient(to bottom, rgba(221,221,221,1) 0%,rgba(235,235,235,1) 100%);
	border: 1px solid #ddd;
	border-radius: 6px;
		-moz-border-radius: 6px;
}

#viewport .pointer span.current {
	background: -moz-linear-gradient(top, rgba(170,237,122,1) 0%, rgba(190,241,154,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(170,237,122,1)), color-stop(100%,rgba(190,241,154,1)));
	background: -webkit-linear-gradient(top, rgba(170,237,122,1) 0%,rgba(190,241,154,1) 100%);
	background: -o-linear-gradient(top, rgba(170,237,122,1) 0%,rgba(190,241,154,1) 100%);
	background: linear-gradient(to bottom, rgba(170,237,122,1) 0%,rgba(190,241,154,1) 100%);
	border: 1px solid #9aea61;
	border-radius: 6px;
		-moz-border-radius: 6px;
}

/* 戻る、もっと見る */
.controls {
	margin-top: 20px;
	text-align: center;
}
.controls button {
	position: relative;
	width: 105px;
	height: 40px;
	padding: 0;
	margin: 0 10px;
	border: 1px solid #c9c9c9;
	border-radius: 6px;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(236,235,235,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(236,235,235,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(236,235,235,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(236,235,235,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(236,235,235,1) 100%);
	cursor: pointer;
}

.controls button.prev:after {
	content: "";
	position: absolute;
	top: 0px;
	left: 5px;
	display: block;
	width: 10px;
	height: 100%;
	background: url(/voi/webshop/nagamaki_t/img/arrow_black2.png)no-repeat 50% 50%;
	background-size: 7px 10px;
		-moz-background-size: 7px 10px;
		-webkit-background-size: 7px 10px;
}

.controls button.next:after {
	content: "";
	position: absolute;
	top: 0px;
	right: 5px;
	display: block;
	width: 10px;
	height: 100%;
	background: url(/voi/webshop/nagamaki_t/img/arrow_black.png)no-repeat 50% 50%;
	background-size: 7px 10px;
		-moz-background-size: 7px 10px;
		-webkit-background-size: 7px 10px;
}

.controls button[disabled] {
	background-color: #fff !important;
}

/* アコーディオンあり
----------------------------------------------------*/
.index-slide .point {
	position: relative;
	cursor: pointer;
	height: 64px;
	margin: 0;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #8de050;
}

/* 開閉アイコン */
.index-slide .point em {
	padding-right: 25px;
	background: url(/voi/webshop/nagamaki_t/img/icon_close.png)no-repeat right center;
	background-size: 23px 16px;
		-moz-background-size: 23px 16px;
		-webkit-background-size: 23px 16px;
}

.index-slide .point.open em {
	background-image: url(/voi/webshop/nagamaki_t/img/icon_open.png);
}

.index-slide .point .ico_num {
	width: 58px;
}

.index-slide .point .ico_num img {
	top: 0px;
	left: 10px
}

.index-slide .slidearea {
	display: none;
	padding: 14px 0;
}

.boxlink p {
	position: relative;
	display: block;
	padding: 17px 30px 16px 10px;
}

.index-slide .point5-txt {
	padding: 0px 10px 0;
}

.index-slide .bnr-pumpus {
		margin: 15px auto 30px auto;
}


/* margin padding
----------------------------------------------------*/
.pt0 { padding-top:0px !important;	}
.pt05 { padding-top:5px !important;	}
.pt1 { padding-top:10px !important;	}
.pt15 { padding-top:15px !important;	}
.pt2 { padding-top:20px !important;	}
.pt25 { padding-top:25px !important;	}
.pt3 { padding-top:30px !important;	}
.pt35 { padding-top:35px !important;	}
.pt4 { padding-top:40px !important;	}
.mt0 { margin-top:0px !important;	}
.mt05 { margin-top:5px !important;	}
.mt1 { margin-top:10px !important;	}
.mt15 { margin-top:15px !important;	}
.mt2 { margin-top:20px !important;	}
.mt25 { margin-top:25px !important;	}
.mt3 { margin-top:30px !important;	}
.mt35 { margin-top:35px !important;	}
.mt4 { margin-top:40px !important;	}

.pb0 { padding-bottom:0px !important;	}
.pb05 { padding-bottom:5px !important;	}
.pb1 { padding-bottom:10px !important;	}
.pb15 { padding-bottom:15px !important;	}
.pb2 { padding-bottom:20px !important;	}
.pb25 { padding-bottom:25px !important;	}
.pb3 { padding-bottom:30px !important;	}
.pb35 { padding-bottom:35px !important;	}
.pb4 { padding-bottom:40px !important;	}
.mb0 { margin-bottom:0px !important;	}
.mb05 { margin-bottom:5px !important;	}
.mb1 { margin-bottom:10px !important;	}
.mb15 { margin-bottom:15px !important;	}
.mb2 { margin-bottom:20px !important;	}
.mb25 { margin-bottom:25px !important;	}
.mb3 { margin-bottom:30px !important;	}
.mb35 { margin-bottom:35px !important;	}
.mb4 { margin-bottom:40px !important;	}