@charset "utf-8";

/************************************************
 共通設定
************************************************ */

body {
    letter-spacing: 0.1em;
}
body{
	background-color: #fff;
	background-image: url(/store/assets/pc/body_background_top.png);
	background-repeat: repeat-x;
	background-position: 0 0;
	font-size: 14px;
	color: #000;
	line-height: 1.4em;
	font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','Osaka',sans-serif;
}

.screen-small{
	display: none;
}


 .youtube-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  width: 100%;
  height: 0;
  overflow: hidden;
}
.youtube-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


h1{
	margin: 0 0 24px 0;
	padding: 0;
	line-height: 1em; 
}


p{
	margin: 20px 0;
	line-height: 1.4em;
}

.body-width,
#container,
#header,
#footer_wrap{
	width: 1000px;
}

.body-width{
	position: relative;
	margin: 0 auto;
	text-align: left;
}

.radius6{
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}
.radius6-top{
	-moz-border-radius: 6px 6px 0 0;
	-webkit-border-radius: 6px 6px 0 0;
	border-radius: 6px 6px 0 0;
}
.radius6-bottom{
	-moz-border-radius: 0 0 6px 6px;
	-webkit-border-radius: 0 0 6px 6px;
	border-radius: 0 0 6px 6px;
}

/* 矢印 */
.arrow{
	position: relative;
	display: inline-block;
	padding-left: 12px;
}
.arrow:before,
.arrow:after{
	display: block;
	content: "";
	position: absolute;
	top: .5em;
	width: 0;
	height: 0;
	margin: -1px 0 0 0;
	border-top-width: 6px;
	border-top-style: solid;
	border-left: 6px solid transparent;
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
}
.arrow:before{
	left: 0;
	border-top-color: #83a400;
}
.arrow:after{
	left: -2px;
	border-top-color: #fff;
}

.area{
	margin: 20px 0 40px 0;
}

.align-right{
	text-align: right;
}

select {
    border: solid 1px #ccc;
}

/*写真*/
.picture {
    border: 1px solid #ccc;
}


/* ==============================================
 フレーム
=============================================== */
/* 全体を包括 */
.frame_outer {
	position: relative;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    z-index: 10;
}

/* コンテンツ */
#container {
    margin: 0 auto;
    padding: 0 0 30px 0;
    width: 1000px;
    background: #fff;
    text-align: left;
}


/* ==============================================
 カラム指定
=============================================== */
/* ヘッダーとフッターの上下
[注意]ブロック移動時はbloc.css内で調整が必要 */
#topcolumn,
#bottomcolumn,
#footerbottomcolumn {
    margin: 0 auto;
    padding: 15px;
    width: 950px;
    background: #fff;
    text-align: left;
}

/* 中央カラム */
.main_column {
    padding: 0 0 20px;
}

/* サイドカラム */
#leftcolumn {
    float: left;
    width: 200px;
}
#rightcolumn {
    float: right;
    width: 20%;
}

/* 1カラム設定 */
#one_maincolumn {
    margin: 0 auto;
    width: 80%;
}

/* 2カラム設定 (メイン部が左) */
#two_maincolumn_left {
    padding-left: 1.5%;
    float: left;
    width: 78%;
}

/* 2カラム設定 (メイン部が右) */
#two_maincolumn_right {
    padding-left: 1.5%;
    width: 78%;
    float: right;
}

/* 3カラム設定 */
#three_maincolumn {
    padding-left: 0.5%;
    width: 59%;
    float: left;
}

/* 下層コンテンツ */
#undercolumn {
    width: 100%;
    margin: 0 0 30px 0;
}


/* ==============================================
 ユーティリティ
=============================================== */
/* フロート回り込み解除
----------------------------------------------- */
.clearfix:after {
    display: block;
    clear: both;
    height: 0px;
    line-height: 0px;
    visibility: hidden;
    content: ".";
}
.clearfix {
    display: block; /* for IE8 */
}
.clear {
    clear: both;
}

/* リンク指定
----------------------------------------------- */

a,
a:link,
a:visited{
	color: #0088cc;
	color: #3454a4;
	text-decoration: none;
}
a:hover,
a:link:hover,
a[href]:hover{
	color: #0088cc;
	text-decoration: underline;
}

a:hover img{
	filter: alpha(opacity=70);
  -moz-opacity:0.70;
  opacity:0.70;
}

a.current,
a.current:link,
a.current:visited{
	color: #ff8400;
}


/* フォント
----------------------------------------------- */
h1,
h2,
h3,
h4,
h5 {
    font-size: 100%;
    line-height: 150%;
}
.sale_price {
    color: #f00;
}
.normal_price {
    font-size: 90%;
}
.point {
    color: #f00;
    font-weight: bold;
}
.user_name {
    font-weight: bold;
}
.recommend_level {
    color: #ecbd00;
}

.attention {
    color: #f00;
}
.attentionSt {
    color: #f00;
    font-weight: bold;
}
.st {
    font-weight: bold;
}
.mini {
    font-size: 90%;
}


/* 行揃え
----------------------------------------------- */
.alignC {
    text-align: center;
}
.alignR {
    text-align: right;
}
.alignL {
    text-align: left;
}
.pricetd em {
    font-weight: bold;
}


/* フォーム
----------------------------------------------- */
input[type='text'],
input[type='password'],
.select {
    border: solid 1px #ccc;
    padding: 2px;
}

.box40 {
    width: 40px;
}
.box60 {
    width: 60px;
}
.box100 {
    width: 100px;
}
.box120 {
    width: 120px;
}
.box140 {
    width: 140px;
}
.box145 {
    width: 145px;
}
.box150 {
    width: 150px;
}
.box240 {
    width: 240px;
}
.box300 {
    width: 300px;
}
.box320 {
    width: 320px;
}
.box350 {
    width: 350px;
}
.box380 {
    width: 380px;
}

/* フォームが縦に重なり合う場合に併用する余白 */
.top {
    margin-bottom: 5px;
}

.ng_top {
    margin-bottom: 0 !important;
}


/* パンくず
----------------------------------------------- */
.breadcrumb {
  margin: 0 0 10px 0;
  padding: 0;
  font-size: 12px;
}
.breadcrumb .list{
	margin: 0 0 5px 0;
}
.breadcrumb li{
	position: relative;
  display: inline-block;
  padding-right: 15px;
  margin-right: 5px;
}
.breadcrumb li:before,
.breadcrumb li:after{
	content: "";
	margin: -4px 0 0 0;
	border-width: 4px;
	border-style: solid;
	border-color: transparent;
	position: absolute;
	top: 50%;
}
.breadcrumb li:before{
	right: 0px;
	border-left-color: #000;
}
.breadcrumb li:after{
	right: 1px;
	border-left-color: #fff;
}
.breadcrumb li:last-child{
  padding-right: 0;
  margin-right: 0;
}
.breadcrumb li:last-child:before,
.breadcrumb li:last-child:after{
	border: 0;
}


/* タイトル
----------------------------------------------- */
h1{
	color: #ff8400;
	font-size: 30px;
	margin: 0 0 30px 0;
	padding: 0;
	line-height: 1em;
}

.main_column h2{
	position : relative;
	color: #84a500;
	font-weight: bold;
	font-size: 24px;
	border-bottom: 2px dashed #c1da5e;
	margin: 0 0 30px 0;
	padding: 0;
}
.main_column h2 .sub{
	margin-left: 10px;
	font-size: 14px;
	font-weight: normal;
	color: #000;
	line-height: 1em;
}


@media screen and (max-width: 620px) {
	.main_column h2{
		font-size: 20px;
	}
}

/*
h2.title {
    margin-bottom: 1em;
    border-top: solid 1px #ebeced;
    color: #555555;
    background-color: #f5f5f5;
    border: solid 1px silver;
    border-top: 0;
    border-right: 0;
    border-left-width: 5px;
    padding: 0 0 0 0.5em;
    line-height: 2.4em; 
    /*
    background: url("../img/background/bg_tit_sub_01.jpg") repeat-x left bottom;
    background-color: #fef3d8;
    *
    font-size: 170%;
}
*

#one_maincolumn .sub_area h3,
#two_maincolumn_right .sub_area h3,
#two_maincolumn_left .sub_area h3,
#three_maincolumn .sub_area h3,
#undercolumn_login .login_area h3,
#undercolumn_shopping h3,
#mypagecolumn h3,
#undercolumn_cart h3 {
    margin: 0 0 10px 0;
    padding: 5px 0 2px;
    color: #555;
    border-bottom: solid 2px #ddd;
    /*
    background: url("../img/background/line_01.gif") repeat-x left bottom;
    *
    font-size: 120%;
}

div#undercolumn_login .login_area h4 {
    padding-left: 15px;
    background: url("../img/icon/ico_arrow_05.gif") no-repeat left;
}
*/


/*  イメージ
----------------------------------------------- */
img.fixed-size{
	background-position: center center;
	background-repeat: no-repeat;
	display: inline-block;
}
img.wrap-border{
	border: 5px solid #e1e9c4;
}
img.cover{
	background-size: cover;
}


/*  ボタン
----------------------------------------------- */
     a.button ,
button.button {
    all: unset;
	position: relative;
	display: inline-block;
	padding: 0 1.5em;
	border-radius: 3px;
	line-height: 2.5em;
	background-clip: padding-box;
	color: #ffffff;	
	background-color: #ffa830;
	cursor: pointer;
}

     a.button:link,
     a.button:visited ,
button.button:link,
button.button:visited {
	color: #fff;
}

     a.button:hover ,
button.button:hover {
	color: #fff;
	text-decoration: none;
	background-color: #f7bd6c;
}

     a.button-green ,
button.button-green {
	background-color: #4aab09;
}

     a.button-green:hover ,
button.button-green:hover {
	background-color: #72c13d;
}

     a.button-silver ,
button.button-silver {
	background-color: #aaaaaa;
}

     a.button-silver:hover ,
button.button-silver:hover {
	background-color: #aaaaaa;
}

     a.button-green2 ,
button.button-green2 {
	z-index: 0;
	border: solid 2px #4aab09;
}

     a.button-green2:after ,
button.button-green2:after {
	content: '';
	position: absolute;
	top: -1px;
	left: -1px;
	width: 100%;
	height: 100%;
	z-index: -1;
	border: solid 1px #bee1a7;
	background-image: -moz-linear-gradient(top, #9dd17a, #4dad0e);
	background-image: -ms-linear-gradient(top, #9dd17a, #4dad0e);
	background-image: -o-linear-gradient(top, #9dd17a, #4dad0e);
	background-image: -webkit-linear-gradient(top, #9dd17a, #4dad0e);
	background-image: linear-gradient(top, #9dd17a, #4dad0e);
}

     a.button-green2:hover ,
button.button-green2:hover {
	background-color: #72c13d;
}

     a.button-left-margin ,
button.button-left-margin {
	margin-left: 1em;
}


/*  アイコン
----------------------------------------------- */
span.icon{
	display: inline-block;
	background-color: #ffa830;
	line-height: 1.4em;
	margin: 0 0 0 10px;
	padding: 0 5px;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}






/* ==============================================
 ヘッダー
=============================================== */
/* レイアウト
----------------------------------------------- */
#header_wrap {
    min-height: 82px;
    /*
    border-top: solid 3px #f90;
    background: url("../img/common/bg_header.gif") repeat-x bottom #fffaf0;
    */
}
#header {
    margin: auto;
    width: 1000px;
}
#logo_area {
    padding-left: 10px;
    float: left;
    width: 390px;
    text-align: left;
}
#header_utility {
    float: right;
    width: 580px;
}

#errorHeader {
    color: #F00;
    font-weight: bold;
    font-size: 12px;
    background-color: #FEB;
    text-align: center;
    padding: 5px;
}

/* ロゴ
----------------------------------------------- */
#site_description {
    font-size: 90%;
}
#logo_area h1 {
    width: 378px;
    height: 33px;
}
#logo_area h1 span {
    display: none; /* テキストロゴ非表示 */
}


/* ヘッダーナビ
----------------------------------------------- */
div#header_navi {
    float: right;
    width: 409px;
    height: 38px;
}
div#header_navi ul li {
    display: block;
    float: left;
}
div#header_navi ul li.mypage,
div#header_navi ul li.entry {
    margin-top: 6px;
}


/* ==============================================
 フッター
=============================================== */
#footer_wrap {
    margin: 0 auto;
    background: #fff;
}
#footer {
    margin: auto;
}
#pagetop {
    width: 210px;
    float: right;
    text-align: right;
}
#copyright {
    width: 740px;
    float: left;
    text-align: left;
    font-size: 97%;
}


/* ==============================================
 パーツ
=============================================== */


/* 完了メッセージ
----------------------------------------------- */
div#complete_area {
    margin-bottom: 20px;
}
div#complete_area .message,
div#undercolumn_entry .message {
    margin-bottom: 20px;
    line-height: 150%;
    font-weight: bold;
    font-size: 120%;
}
div#complete_area .shop_information {
    margin-top: 40px;
    padding: 20px 0 0 0;
    border-top: solid 1px #ccc;
}
div#complete_area .shop_information .name {
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 140%;
}


/* Tipsy
----------------------------------------------- */
.tipsy {
    padding: 5px;
    font-size: 10px;
    position: absolute;
    z-index: 100000;
}
.tipsy-inner {
    padding: 5px 8px 4px 8px;
    background-color: black;
    color: white;
    max-width: 200px;
    text-align: center;
}
.tipsy-inner {
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.tipsy-arrow {
    position: absolute;
    background: url('../img/ajax/tipsy.gif') no-repeat top left;
    width: 9px;
    height: 5px;
}
.tipsy-n .tipsy-arrow {
    top: 0;
    left: 50%;
    margin-left: -4px;
}
.tipsy-nw .tipsy-arrow {
    top: 0;
    left: 10px;
}
.tipsy-ne .tipsy-arrow {
    top: 0;
    right: 10px;
}
.tipsy-s .tipsy-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -4px;
    background-position: bottom left;
}
.tipsy-sw .tipsy-arrow {
    bottom: 0;
    left: 10px;
    background-position: bottom left;
}
.tipsy-se .tipsy-arrow {
    bottom: 0;
    right: 10px;
    background-position: bottom left;
}
.tipsy-e .tipsy-arrow {
    top: 50%;
    margin-top: -4px;
    right: 0;
    width: 5px;
    height: 9px;
    background-position: top right;
}
.tipsy-w .tipsy-arrow {
    top: 50%;
    margin-top: -4px;
    left: 0;
    width: 5px;
    height: 9px;
}



/* wordpress
----------------------------------------------- */
.default-style h1,
body.wordpress .main_column #content h1,
body.wordpress .main_column #content .h1{
	clear: both;
}

.default-style h2,
body.wordpress .main_column #content h2,
body.wordpress .main_column #content .h2{
	margin: 1em 0;
	clear: both;
}

.default-style h3,
body.wordpress .main_column #content h3,
body.wordpress .main_column #content .h3{
	background-color:#f5fae1;
	color: #4a5c00;
	font-size: 18px;
	font-weight: bold;
	padding: .2em .5em;
	margin: 1em 0;
	clear: both;
}

.default-style h4,
body.wordpress .main_column #content h4,
body.wordpress .main_column #content .h4{
	color: #4aab09;
	font-size: 16px;
	font-weight: bold;
	margin: 1em 0;
	clear: both;
}

body.wordpress .main_column #content p{
	
}

body.wordpress .main_column #content a,
body.wordpress .main_column #content a:link,
body.wordpress .main_column #content a:visited{
	color: #0088cc;
	text-decoration: none;
}
body.wordpress .main_column #content a:hover,
body.wordpress .main_column #content a:link:hover,
body.wordpress .main_column #content a[href]:hover{
	color: #3454a4;
	text-decoration: underline;
}

body.wordpress .main_column #content a.current,
body.wordpress .main_column #content a.current:link,
body.wordpress .main_column #content a.current:visited{
	color: #ff8400;
}

body.wordpress .main_column #content a.button,
body.wordpress .main_column #content a.button:link,
body.wordpress .main_column #content a.button:visited{
	color: #fff;
}
body.wordpress .main_column #content a.button:hover,
body.wordpress .main_column #content a.button:link:hover,
body.wordpress .main_column #content a.button[href]:hover{
	color: #fff;
	text-decoration: none;
}

body.wordpress .main_column #content a.button-green,
body.wordpress .main_column #content a.button-green:link,
body.wordpress .main_column #content a.button-green:visited{
	background-color: #4aab09;
}
body.wordpress .main_column #content a.button-green:hover,
body.wordpress .main_column #content a.button-green:link:hover,
body.wordpress .main_column #content a.button-green[href]:hover{
	background-color: #72c13d;
}

body.wordpress .main_column #content hr{
	
}

body.wordpress .main_column #content dl{
	
}

body.wordpress .main_column #content dt{
	
}

body.wordpress .main_column #content dd{
	
}

.default-style ul,
body.wordpress .main_column #content ul{
	margin: 1em 0;
	padding: 0;
	list-style: none;
}

.default-style ul ul,
body.wordpress .main_column #content ul ul{
	margin: .5em 0 .5em 2em;
}

.default-style ul li,
body.wordpress .main_column #content ul li{
	position: relative;
	padding-left: 12px;
	display: block;
	margin: .5em 0;
	list-style: none;
}

.default-style ul li:before,
.default-style ul li:after,
body.wordpress .main_column #content ul li:before,
body.wordpress .main_column #content ul li:after{
	display: block;
	content: "";
	position: absolute;
	top: .5em;
	width: 0;
	height: 0;
	margin: -2px 0 0 0;
	border-top-width: 6px;
	border-top-style: solid;
	border-left: 6px solid transparent;
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
}
.default-style ul li:before,
body.wordpress .main_column #content ul li:before{
	left: 0;
	border-top-color: #c5dd69;
}
.default-style ul li:after,
body.wordpress .main_column #content ul li:after{
	left: -2px;
	border-top-color: #fff;
}

.default-style ol,
body.wordpress .main_column #content ol{
	counter-reset: number;
	list-style: none;
	margin: 1em 0;
	padding: 0;
}
.default-style ol ol,
body.wordpress .main_column #content ol ol{
	margin: .5em 0 .5em 2em;
}
.default-style ol li,
body.wordpress .main_column #content ol li{
	list-style: none;
	margin: .5em 0;
}
.default-style ol li:before,
body.wordpress .main_column #content ol li:before{
	counter-increment: number;
	content: counter(number);
	display: inline-block;
	background: #b9d15a;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	color: #fff;
	text-align: center;
	line-height: 1.5;
	margin: 0 .5em 0 0;
}

body.wordpress .main_column #content table,
body.wordpress .main_column #content th,
body.wordpress .main_column #content td{
	border: solid 1px #aeaeae;
}

body.wordpress .main_column #content table{
	border-right: 0;
	border-bottom: 0;
}

body.wordpress .main_column #content th,
body.wordpress .main_column #content td{
	border-left: 0;
	border-top: 0;
}

body.wordpress .main_column #content table{
}

body.wordpress .main_column #content caption{
	
}

body.wordpress .main_column #content thead{
	
}

body.wordpress .main_column #content tbody{
	
}

body.wordpress .main_column #content tfoot{
	
}

body.wordpress .main_column #content tr{
	
}

body.wordpress .main_column #content th,
body.wordpress .main_column #content td{
	padding: .5em;
}

body.wordpress .main_column #content th{
	background-color: #f5fae1;
	white-space: nowrap;
}

body.wordpress .main_column #content td{
	
}

body.wordpress .main_column #content article{
	margin: 0 0 2em 0;
}

body.wordpress .main_column #content .entry-meta{
	text-align: right;
}

body.wordpress .main_column #content .entry-content{
	margin: 0 0 1em 0;
}

body.wordpress .main_column #content.content-list .entry-title a{
	color: #fff;
	background-color: #aac932;
	display: block;
	padding: .2em .5em;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}
body.wordpress .main_column #content.content-list .entry-title a:hover{
	position: relative;
	top: 1px;
	left: 1px;
}


/* ボタン
----------------------------------------------- */
.btn_area {
    margin-top: 10px;
    width: 100%;
    text-align: center;
    clear: both;
}
.btn_area ul,
.default-style .btn_area ul{
	list-style: none;
}
.btn_area li, 
.default-style .btn_area li{
    padding-right: 10px;
    display: inline-block;
}
.btn_area li:before,
.btn_area li:after,
.default-style .btn_area li:before,
.default-style .btn_area li:after {
	border: 0;
}

	
	
/********************************************************
	ブロック、挨拶
********************************************************/
.block-greeting{
	
}
.block-greeting .message{
}
.block-greeting .box-youtube{
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	max-width: 100%;
	text-align: center;
}
.block-greeting .box-youtube iframe{
	width: 360px;
	max-width: 100%;
	height: 240px;
	margin: 0 auto;
}

@media screen and (min-width: 620px) {

	.block-greeting{
		/* margin-bottom: 0; */
	}

	.block-greeting .message{
		float: left;
		width: 520px;
		margin: 0;
	}

	.block-greeting .box-youtube{
		float: right;
		width: 200px;
	}
	.block-greeting .box-youtube iframe{
		height: 140px;
	}
}
	
/********************************************************
	ブロック、使い方
********************************************************/
.block-usage-images{
	
}

.block-usage-images .demo-images{
	margin-top: 0;
}

@media screen and (min-width: 620px) {

	.block-usage-images{
		margin-top: 0;
	}
}

	
/********************************************************
	ブロック、ランキング
********************************************************/
.block-ranking{
}
.block-ranking .item-box{
	border-bottom: solid 1px #aaa;
	padding: 1em 0 0 0;
	margin: 1em 0;
}
.block-ranking .item-box .rank{
	font-size: 1.4em;
	color: #5ca928;
	margin-right: .5em;
}

.block-ranking .image{
	float: left;
	width: 100px;
}

.block-ranking .info{
	text-align: center;
}

.block-ranking .info .sale_price,
.block-ranking .info .button-box{
	margin: 0 1em;
}

@media screen and (min-width: 620px) {
	
	.block-ranking .info{
		text-align: right;
	}

}


/********************************************************
	クレジットカード決済 個人情報取り扱いに関する同意
********************************************************/

.consent-box {

    margin: 0 0 30px 0;

    .consent-text {
        box-sizing: border-box;
        border: 1px solid #999;
        padding: 1em;
        margin: 1em auto;
        font-family: sans-serif;
        font-size: 14px;
        background-color: #fff;
        line-height: 1.8;
        margin-bottom: 1em;
        max-height: 140px;
        overflow: auto;
    }

    .consent-check {
        display: block;
        font-size: 14px;
        margin: 30px 0 0 0;
        text-align: center;
    }
}

@media screen and (min-width: 620px) {
    .consent-box {
        .consent-title {
            br {
                display: none;
            }
        }
    }
}


/********************************************************
	メインフッター
********************************************************/
.main-fotter-navi{
	border: solid 1px #84a500;
	margin-top: 20px;
}
.main-fotter-navi h2{
	background-color: #84a500;
	color: #fff;
	border: 0;
	margin: 0;
	padding: 5px 15px;
}
.main-fotter-navi ul{
	margin: 20px;
}

@media screen and (max-width: 620px) {
	.main-fotter-navi h2{
		font-size: 20px;
	}
}