@charset "utf-8";

/* 下層用

(00)共通コンテンツ 
　∟タイトル装飾
　∟商品一覧5列
　∟商品一覧4列
(01)TOP 
(02)一覧 
(03)フォーム（お問い合わせ・会員登録・ハスワードの再発行） 
(04)ログイン

*/

/*------------------------------------------------------------------------------------------------------------------------*/
/* デスクトップレイアウト : 900 px ～ 最大　                                                                                                                                                    */
/* タブレットレイアウト　　 : 601 px ～ 899px以下　 デスクトップレイアウトからスタイルを継承。　   　　　　　　　　　　　　                */
@media only screen and (max-width: 899px) {
}
/* モバイルレイアウト　　 : 600px以下。           タブレットレイアウトからスタイルを継承。　     　　　　　　　　　　　　                 */
@media only screen and (max-width: 600px) {
}
/*------------------------------------------------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------------------------------------------------*/
/* (00)共通コンテンツ                                                                                                       */
/*------------------------------------------------------------------------------------------------------------------------*/
.center {
	text-align: center;
}
/* タイトル装飾1 */
.title1{
	font-size:22px;
	text-align: left;
	position: relative;
	z-index: 0;
	color: #666666;
	background: url('../images/title1_bg.png') no-repeat;
	height: 50px;
	line-height: 50px;
	padding-left: 50px;
	margin: 50px 0 30px 0;
}
.title1+.sub{
	text-align: center;
	color: #B4B4A6;
	font-weight: bold;
	margin: 0 0 20px 0;
}
	.title1 + p {
		margin-bottom: 30px;
	}


@media only screen and (max-width: 600px) {
	.title1{
		font-size:16px;
		background-image: none;
		background-color: #faf2de;
		border-radius: 10px;
		padding: 10px;
		height: auto;
		line-height: 1.5em;
		font-weight: bold;
	}
	.title1::before{
		top: 10px;
	}
	.title1+.sub{
		font-size: 12px;
	}
}
/* タイトル装飾2 */
.title2{
	font-size:22px;
	text-align: left;
	position: relative;
	z-index: 0;
	color: #666666;
	height: 50px;
	line-height: 50px;
	margin: 50px 0 50px 0;
	background: url(../images/h_point.png) no-repeat left center;
	padding: 4px 0 4px 30px;
}
.title2 h2 {
	font-size: 90%;
}
@media only screen and (max-width: 600px) {
.title2 h2 {
	font-size: 80%;
	line-height: 1.5;
}
}

/* タイトル装飾3 */
.title3{
	border-top:solid 2px #ACAC9D;
	position: relative;
	margin: 0 0 20px 0;
	padding: 20px 0 0 0;
}
.title3 h2{
	color:#f0a704;
	font-size: 22px;
}
.title3 h2+.sub{
	color:#B4B4A6;
	font-size: 13px;
	font-weight: bold;
}
@media only screen and (max-width: 600px) {
	.title3{
		position: inherit;
		margin: 0 0 20px 0;
		padding: 20px 0 0 0;
		text-align: center;
	}
	.title3 h2{
		font-size: 16px;
		text-align: center;
	}
	.title3 h2+.sub{
		font-size: 12px;
		text-align: center;
	}
}

/* タイトル装飾4 */
.title4{
	font-size: 30px;
	font-weight: bold;
	color: #666666;
	text-align: center;
	margin: 0 0 40px 0;
}
@media only screen and (max-width: 600px) {
	.title4{
		font-size: 20px;
		font-weight: bold;
		color: #666666;
		text-align: center;
		margin: 0 0 20px 0;
	}
}

/* 商品一覧 */
.list,
.list5_3,
.list5_2,
.list4_2{
	font-size: 0;
	margin: 0 0 40px 0;
}
.list a:link,
.list5_3 a:link,
.list5_2 a:link,
.list4_2 a:link,
.list3_2 a:link{ color:#333333; text-decoration: none; display:block;}
.list a:visited,
.list5_3 a:visited,
.list5_2 a:visited,
.list4_2 a:visited,
.list3_2 a:visited{ color:#333333; text-decoration: none;}
.list a:hover,
.list5_3 a:hover,
.list5_2 a:hover,
.list4_2 a:hover,
.list3_2 a:hover{ color:#333333; text-decoration: none; opacity: 0.5;}
.list a img:hover,
.list5_3 a img:hover,
.list5_2 a img:hover,
.list4_2 a img:hover,
.list3_2 a img:hover{ opacity: inherit;}

.list div.item{
	margin: 0 10px 0 10px;
	font-size: 13px;
	display:inline-block;
	vertical-align: top;
}
.list div.item .photo,
.list5_3 div.item .photo,
.list5_2 div.item .photo,
.list4_2 div.item .photo{
	margin: 0 0 5px 0;
}
.list div.item .photo img,
.list5_3 div.item .photo img,
.list5_2 div.item .photo img,
.list4_2 div.item .photo img {
	box-shadow: 2px 2px 3px #eee,-2px 2px 3px #eee,2px -2px 3px #eee,-2px -2px 3px #eee;
}
.list div.item .label,
.list5_3 div.item .label,
.list5_2 div.item .label,
.list4_2 div.item .label{
	font-weight:bold;
	overflow: hidden;
	/*_height: 40px;*/
	height: 40px;
	margin: 0 0 5px 0;
}
.list div.item p,
.list5_3 div.item p,
.list5_2 div.item p,
.list4_2 div.item p{
	font-size: 12px;
	width: 100%;
	overflow: hidden;
	/*white-space: nowrap;*/
}
.list div.item .price,
.list5_3 div.item .price,
.list5_2 div.item .price,
.list4_2 div.item .price{
	color:#999999;
	font-weight: bold;
}
.list div.item .price span,
.list5_3 div.item .price span,
.list5_2 div.item .price span,
.list4_2 div.item .price span{
	color:#D23E3E;
	margin: 0;
	font-size: 16px;
	/*white-space: nowrap;*/
}
.list div.item .price span::before,
.list5_3 div.item .price span::before,
.list5_2 div.item .price span::before,
.list4_2 div.item .price span::before{
	/*content: " → ";*/
	color:#999999;
	font-size: 13px;
}
.list div.item .category a:link,
.list5_3 div.item .category a:link,
.list5_2 div.item .category a:link,
.list4_2 div.item .category a:link{ color:#43922B; text-decoration: underline; display:inline;}
.list div.item .category a:visited,
.list5_3 div.item .category a:visited,
.list5_2 div.item .category a:visited,
.list4_2 div.item .category a:visited{ color:#43922B; text-decoration: underline;}
.list div.item .category a:hover,
.list5_3 div.item .category a:hover,
.list5_2 div.item .category a:hover,
.list4_2 div.item .category a:hover{ color:#43922B; text-decoration: none;}

/* 商品一覧　PC5列 */
.list5_3 div.item,
.list5_2 div.item{
	width: calc((100% - 80px) / 5);
	margin: 0 20px 40px 0;
	font-size: 13px;
	display:inline-block;
	vertical-align: top;
}
.list5_3 div.item:nth-child(5n),
.list5_2 div.item:nth-child(5n){
	margin: 0 0 40px 0;
}

/* 商品一覧　PC4列 */
.list4_2 div.item{
	width: calc((100% - 60px) / 4);
	margin: 0 20px 40px 0;
	font-size: 13px;
	display:inline-block;
	vertical-align: top;
}
.list4_2 div.item:nth-child(4n){
	margin: 0 0 40px 0;
}

/* おすすめテキストリンク用　PC4列 */
.osusume_textlink .title2 {
	background: url(../images/title2_bg.png) no-repeat left center;
}
.osusume_textlink .list4_2 {
	margin-top: -30px !important;
}
.osusume_textlink .item {
	margin-bottom: 10px !important;
}

/* 商品一覧　PC3列 */
.list3_2 div.item{
	width: calc((100% - 80px) / 3);
	margin: 0 20px 40px 0;
	font-size: 13px;
	display:inline-block;
	vertical-align: top;
}
.list3_2 div.item:nth-child(3n){
	margin: 0 0 40px 0;
}


@media only screen and (max-width: 600px) {
	.list div.item{
		margin: 0 5px 0 5px;
		font-size: 12px;
	}
	.list div.item .label{
		height: 35px;
	}
}


/* 商品一覧　SP3列 */
@media only screen and (max-width: 600px) {
	.list5_3{
		margin: 0 0 20px 0;
	}
	.list5_3 div.item{
		width: calc((100% - 40px) / 3);
		margin: 0 20px 40px 0;
		font-size: 12px;
	}
	.list5_3 div.item .label{
		height: 35px;
	}
	.list5_3 div.item:nth-child(5n){
		margin: 0 20px 40px 0;
	}
	.list5_3 div.item:nth-child(3n){
		margin: 0 0 40px 0;
	}
}
/* 商品一覧　SP2列 */
@media only screen and (max-width: 600px) {
	.list5_2,
	.list4_2,
	.list3_2{
		margin: 0 0 20px 0;
	}
	.list5_2 div.item,
	.list4_2 div.item{
		width: calc((100% - 20px) / 2);
		margin: 0 20px 40px 0;
		font-size: 12px;
	}
	.list3_2 div.item{
		width: calc((100% - 30px) / 2);
		margin: 0 20px 40px 0;
		font-size: 12px;
/*		height: 220px;*/
	}
	.list5_2 div.item .label,
	.list4_2 div.item .label,
	.list3_2 div.item .label{
/*		height: 35px;*/
		height: inherit;
	}
	.list5_2 div.item:nth-child(5n),
	.list4_2 div.item:nth-child(4n){
		margin: 0 20px 40px 0;
	}
	.list3_2 div.item:nth-child(3n){
		margin: 0 20px 40px 0;
	}
	.list5_2 div.item:nth-child(2n),
	.list4_2 div.item:nth-child(2n),
	.list3_2 div.item:nth-child(2n){
		margin: 0 0 40px 0;
	}
}





/*------------------------------------------------------------------------------------------------------------------------*/
/* (01)TOP                                                                                                                */
/*------------------------------------------------------------------------------------------------------------------------*/
/* 特集バナー */
#features{
	margin:0 0 10px 0;
	font-size: 0;
}
#features li{
	margin:0 0 10px 0;
	display: inline-block;
	font-size: 14px;
	width: calc((100% - 20px) / 2);
}
#features li:nth-child(2n){
	margin-left:20px;
}
#features li a img{
	vertical-align: bottom;
}
@media only screen and (max-width: 600px) {
	#features{
		margin:0 0 20px 0;
	}
}

/* お知らせ */
#news{
	margin:0 0 30px 0;
}
#news dl{
	border-bottom:dashed 1px #999999;
	margin: 10px 0;
	padding: 10px 0;
}
#news dl:last-child{
	border-bottom:none;
}
#news dt{
	display:block;
	width: 100px;
	vertical-align: top;
	font-weight: bold;
}
#news dd{
	display:block;
	width: 100%;
	vertical-align: top;
}
#news dd a:link,
#news dd a:visited{
	color: #000;
}
@media only screen and (max-width: 600px) {
	#news{
		margin:0 0 40px 0;
		font-size: 13px;
	}
	#news div{
		/*max-height: 160px;*/
	}
	#news dt{
		display:block;
		width: 100%;
	}
	#news dd{
		display:block;
		width: 100%;
	}
}

/* おすすめテキストリンクエリア */
.osusume_textlink a {
	padding-left: 15px;
	border-bottom: none;
	background: url(../images/arrow_list01.png) no-repeat center left;
}


/* バナーエリア */
.bana_3 {
	display: flex;
	justify-content: space-between;
}

/* ランキング*/
#ranking div.item,
#ac_ranking div.item{
	position:relative;
}
#ranking div.item::before,
#ac_ranking div.item::before{
	content: "";
	position: absolute;
	left:5px;
	top:-20px;
	height: 50px;
	width: 50px;
	z-index: 1;
}
#ranking div.item:nth-child(1)::before,
#ac_ranking div.item:nth-child(1)::before{
	background: url(../images/top/rank1.png) no-repeat center center;
	background-size: 50px;
}
#ranking div.item:nth-child(2)::before,
#ac_ranking div.item:nth-child(2)::before{
	background: url(../images/top/rank2.png) no-repeat center center;
	background-size: 50px;
}
#ranking div.item:nth-child(3)::before,
#ac_ranking div.item:nth-child(3)::before{
	background: url(../images/top/rank3.png) no-repeat center center;
	background-size: 50px;
}
#ranking div.item:nth-child(4)::before,
#ac_ranking div.item:nth-child(4)::before{
	background: url(../images/top/rank4.png) no-repeat center center;
	background-size: 50px;
}
#ranking div.item:nth-child(5)::before,
#ac_ranking div.item:nth-child(5)::before{
	background: url(../images/top/rank5.png) no-repeat center center;
	background-size: 50px;
}
#ranking div.item:nth-child(6)::before{
	background: url(../images/top/rank6.png) no-repeat center center;
	background-size: 50px;
}
#ranking div.item:nth-child(7)::before{
	background: url(../images/top/rank7.png) no-repeat center center;
	background-size: 38px;
}
#ranking div.item:nth-child(8)::before{
	background: url(../images/top/rank8.png) no-repeat center center;
	background-size: 38px;
}
#ranking div.item:nth-child(9)::before{
	background: url(../images/top/rank9.png) no-repeat center center;
	background-size: 38px;
}
#ranking div.item:nth-child(10)::before{
	background: url(../images/top/rank10.png) no-repeat center center;
	background-size: 38px;
}
@media only screen and (max-width: 600px) {
/*	#ranking div.item:nth-child(4),
	#ranking div.item:nth-child(5),
	#ranking div.item:nth-child(6),
	#ranking div.item:nth-child(7),
	#ranking div.item:nth-child(8),
	#ranking div.item:nth-child(9),
	#ranking div.item:nth-child(10){
		display: none;
	}*/
	#ranking div.item::before{
		top:-15px;
		height: 30px;
		width: 30px;
	}
	#ranking div.item:nth-child(1)::before,
	#ranking div.item:nth-child(2)::before,
	#ranking div.item:nth-child(3)::before,
	#ranking div.item:nth-child(4)::before,
	#ranking div.item:nth-child(5)::before,
	#ranking div.item:nth-child(6)::before,
	#ranking div.item:nth-child(7)::before,
	#ranking div.item:nth-child(8)::before,
	#ranking div.item:nth-child(9)::before,
	#ranking div.item:nth-child(10)::before{
		background-size: 30px;
	}
}
/* おすすめ一覧 */
.specialitem{
	margin:0 0 60px 0;
	font-size: 0;
}
.specialitem .title3 .btn{
	position: absolute;
	right:0;
	top:20px;
}
.specialitem .title3 .btn a:link,
.specialitem .title3 .btn a:visited{
	border:solid 1px #f0a704;
	border-radius: 20px;
	background: url(../images/arrow01.png) no-repeat center right 20px #FFFFFF;
	background-size: 10px;
	padding: 8px 40px 8px 20px;
	display: block;
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
}
.specialitem .title3 .btn a:hover{
	opacity:0.5;
}
.specialitem .item{
	background: #FFFFFF;
	padding: 20px;
	display: inline-block;
	vertical-align: top;
	width: calc((100% - 100px) / 2);
	margin: 0 0 20px 0;
}
.specialitem div.item:nth-of-type(2n){
	margin-left:20px;
}
.specialitem .item .photo{
	width: calc(45% - 10px);
	max-width:160px;
	display: inline-block;
	vertical-align: top;
	margin: 0 10px 0 0;
}
.specialitem .item .right-box{
	display: inline-block;
	width: 55%;
}
.specialitem .item .right-box .label{
	font-size: 14px;
	font-weight: bold;
	margin: 0 0 10px 0;
}
.specialitem .item .right-box .label a:link   { color:#333333; text-decoration: none;}
.specialitem .item .right-box .label a:visited{ color:#333333; text-decoration: none;}
.specialitem .item .right-box .label a:hover  { color:#999999; text-decoration: none;}
.specialitem .item .right-box .price1,
.specialitem .item .right-box .price2{
	margin: 0 0 3px 0;
}
.specialitem .item .right-box .price1 dt,
.specialitem .item .right-box .price2 dt{
	font-size: 12px;
	background: #999999;
	color: #FFFFFF;
	border-radius: 5px;
	padding: 3px 6px;
	display: inline-block;
	vertical-align: middle;
	margin: 0 5px 0 0;
}
.specialitem .item .right-box .price1 dd,
.specialitem .item .right-box .price2 dd{
	font-size: 13px;
	font-weight: bold;
	border-radius: 5px;
	padding: 5px;
	display: inline-block;
	vertical-align: middle;
}
.specialitem .item .right-box .price1 dd{
	color:#D23E3E;
}
.specialitem .item .right-box .price{
	color:#999999;
	font-weight: bold;
	margin: 0 0 10px 0;
}
.specialitem .item .right-box .price span{
	color:#D23E3E;
	margin: 0;
	font-size: 14px;
}
.specialitem .item .right-box .price span::before{
	content: " → ";
	color:#999999;
	font-size: 13px;
}
.specialitem .item .right-box p{
	font-size:12px;
}

.specialitem .item .itemdet{
	border-top:solid 1px #ACAC9D;
	margin: 15px 0 0 0;
	padding:15px 0 0 0;
	font-size:13px;
}
@media only screen and (max-width: 600px) {
	.specialitem .title3 .btn{
		position: inherit;
		text-align: center;
	}
	.specialitem .title3 .btn a:link,
	.specialitem .title3 .btn a:visited{
		margin:10px 0 0 0;
		padding: 8px 40px 8px 20px;
		font-size: 13px;
		display: inline-block;
	}
	.specialitem .item{
		display: block;
		width: calc(100% - 40px);
	}
	.specialitem div.item:nth-of-type(2n){
		margin-left:0;
	}
}

/*------------------------------------------------------------------------------------------------------------------------*/
/* (02)一覧                                                                                                                */
/*------------------------------------------------------------------------------------------------------------------------*/
/* タイトル */
.list_title{
	margin:0 0 40px 0;
}
.list_title .mv{
	margin:0 0 20px 0;
	font-size:28px;
	font-weight: bold;
	text-align: left;
	color: #3A8826;
}
.list_title h2{
	margin:0 0 10px 0;
	font-size: 16px;
	font-weight: bold;
	color:#666666;
}
@media only screen and (max-width: 600px) {
	.list_title .mv{
		margin:0 0 20px 0;
	}
	.list_title h2{
		margin:0 0 20px 0;
		font-size: 14px;
	}
}
/* 目次 */
.cate_fly_wrap{
	margin-top:30px;
}

.cate_fly_wrap p {
    font-size: 16px;
    font-weight: bold;
    color: #666666;
}

.cate_fly a {
    padding: 5px 30px;
    background: #eee;
    color: dimgray;
    display: inline-block;
    text-decoration: none;
    border-radius: 5px;
    box-sizing: border-box;
    margin-bottom: 5px;
    margin-right: 10px;
}
	.cate_fly a:hover {
		background: #ccc;
	}

.cate_fly2 a {
    padding: 5px 30px;
    background: #fff;
    color: dimgray;
    display: inline-block;
    text-decoration: none;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    margin-bottom: 5px;
    margin-right: 10px;
}
.cate_fly2 a:hover {
	background: #ccc;
}

/* 詳細ボタン */
p.btn_detail {
	background: #eee;
	text-align: center;
	border-radius: 10px;
	padding: 5px 0;
}

/* カテゴリー */
.list_category{
	margin:0 0 50px 0;
}
.list_category h3{
	color:#3A8826;
	margin:0 0 15px 0;
}
.list_category ul{
	font-size:0;
}
.list_category li{
	display: inline-block;
	margin: 0 10px 10px 0;
}
.list_category li a:link,
.list_category li a:visited{
	border:solid 1px #DFDFD0;
	border-radius: 20px;
	background: url(../images/arrow10.png) no-repeat center left 15px #FFFFFF;
	background-size: 6px;
	padding: 8px 20px 6px 32px;
	display: block;
	text-decoration: none;
	font-size: 13px;
	font-weight: bold;
	color:#E41022;
}
.list_category li a:hover{
	opacity:0.5;
}
@media only screen and (max-width: 600px) {
	.list_category{
		margin:0 0 30px 0;
	}
	.list_category li a:link,
	.list_category li a:visited{
		border-radius: 20px;
		padding: 5px 15px 5px 28px;
		font-size: 12px;
	}
}
/* ソート */
.list_sort{
	margin: 0 0 10px 0;
}
.list_sort li{
	margin: 0 0 10px 0;
	display: inline-block;
	font-size: 13px;
}
.list_sort li::after{
	content:"｜";
	padding: 0 10px;
}
.list_sort li:first-child::before{
	content:"｜";
	padding: 0 10px 0 0;
}
.list_sort li a:link   { color:#333333; text-decoration: none;}
.list_sort li a:visited{ color:#333333; text-decoration: none;}
.list_sort li a:hover  { color:#333333; text-decoration: underline;}
.list_sort li.active a { color:#43922B;}
/* ページャー */
.list_pagenav{
	margin: 0 0 20px 0;
	padding: 10px 20px;
	background: #fff;
	font-size: 0;
	overflow: hidden;
	border-bottom: 1px solid #ccc;
}
.list_pagenav .itemcount{
	display: inline-block;
	font-size: 13px;
}
.list_pagenav .itemcount span{
	font-size: 18px;
	font-weight: bold;
	margin: 0 5px;
}
.list_pagenav .sort{
	display: inline-block;
	float: right;
}
	.list_pagenav .sort select {
		padding: 10px 35px 10px 10px;
		border-radius: 10px;
		border: 1px solid #ccc;
		cursor: pointer;
	}

.list_pagenav .pager{
	display: inline-block;
	font-size: 13px;
	font-weight: bold;
	text-align: right;
	float: right;
	margin: 5px 0 0 0;
}
.list_pagenav .pager li{
	display: inline-block;
	padding: 0 10px;
	vertical-align: middle;
}
.list_pagenav .pager li a:link   { color:#333333; text-decoration: none;}
.list_pagenav .pager li a:visited{ color:#333333; text-decoration: none;}
.list_pagenav .pager li a:hover  { color:#333333; text-decoration: underline;}
.list_pagenav .pager li.active{ color:#43922B;}
.list_pagenav .pager li.prev,
.list_pagenav .pager li.next{
	content: "";
	width: 20px;
	height:11px;
}
.list_pagenav .pager li.prev{
	background: url(../images/arrow04.png) no-repeat center center;
	background-size: 6px;
}
.list_pagenav .pager li.next{
	background: url(../images/arrow05.png) no-repeat center center;
	background-size: 6px;
}
.list_pagenav .pager li.prev a,
.list_pagenav .pager li.next a{
	display: block;
	width: 100%;
	height: 11px;
}
#list ul.pager {
	display: flex;
	justify-content: center;
}
	#list ul.pager li {
		margin-right: 5px;
	}
	#list ul.pager li a {
		display: block;
		width: 40px;
		height: 40px;
		line-height: 40px;
		background: #eee;
		text-align: center;
		border-radius: 10px;
		text-decoration: none;
		color: #333;
		font-weight: bold;
	}
	#list ul.pager li a.active,
	#list ul.pager li a:hover {
		background: #ccc;
	}
#list .member_wari {
	background: #f8d949;
	color: #f00;
	font-size: 12px;
	text-align: center;
	padding: 5px 0;
	border-radius: 10px;
}

@media only screen and (max-width: 600px) {
	.list_pagenav .sort select {
		font-size: 14px;
	}
	.list_pagenav .itemcount{
		font-size: 14px;
	}
	.list_pagenav .itemcount span{
		font-size: 25px;
		margin: 0;
	}
	.list_pagenav .pager{
		font-size: 12px;
		margin: 0;
	}
	.list_pagenav .pager li{
		padding: 0 5px;
	}
	.list_pagenav .pager li.prev,
	.list_pagenav .pager li.next{
		width: 10px;
		height:11px;
	}
	#list .member_wari {
		font-size: 10px;
	}
}

/*NotFound*/
#notfound .sorry .image{
	background: url(../images/img_sorry.png) no-repeat center top;
	background-size: 135px;
	padding: 200px 0 30px 0;
	color: #3A8826;
	font-size: 24px;
	text-align: center;
}
#notfound .sorry p{
	text-align: center;
	font-size: 14px;
}
#notfound .sorry .btn{
	text-align: center;
	font-size: 14px;
}
@media only screen and (max-width: 600px) {
	#notfound .sorry .image{
		background: url(../images/img_sorry.png) no-repeat center top;
		background-size: 100px;
		padding: 150px 0 30px 0;
		font-size: 18px;
	}
	#notfound .sorry .btn a{
		width: calc(100% - 60px);
	}
}

/*------------------------------------------------------------------------------------------------------------------------*/
/* (03)フォーム（お問い合わせ・会員登録・ハスワードの再発行）                                                                      */
/*------------------------------------------------------------------------------------------------------------------------*/
#form .step1,
#form .step2,
#form .step3{
	margin: 0 0 50px 0;
	font-size: 0;
}
#form .step1 li,
#form .step2 li,
#form .step3 li{
	display: inline-block;
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
	padding: 10px 0;
	width: calc((100% - 80px) / 3);
	text-align: center;
	background: #DAD8D5;
	margin: 0 40px 0 0;
	position: relative;
	vertical-align: middle;
}
#form .step1 li:nth-child(1),
#form .step2 li:nth-child(2),
#form .step3 li:nth-child(3){
	background: #398626;
}
#form .step1 li::after,
#form .step2 li::after,
#form .step3 li::after{
	content: "";
	background: url(../images/arrow09.png) no-repeat center center;
	background-size: 10px;
	width: 40px;
	height: 18px;
	position: absolute;
	right: -40px;
	top: calc(50% - 9px);
}
#form .step1 li:last-child,
#form .step2 li:last-child,
#form .step3 li:last-child{
	margin: 0;
}
#form .step1 li:last-child::after,
#form .step2 li:last-child::after,
#form .step3 li:last-child::after{
	content: "";
	background:none;
	width: 0;
	height: 0;
	position: inherit;
	right: 0;
	top: 0;
}
@media only screen and (max-width: 600px) {
	#form .step1,
	#form .step2,
	#form .step3{
		margin: 0 0 30px 0;
	}
	#form .step1 li,
	#form .step2 li,
	#form .step3 li{
		font-size: 13px;
		padding: 10px 0;
		width: calc((100% - 40px) / 3);
		margin: 0 20px 0 0;
	}
	#form .step1 li::after,
	#form .step2 li::after,
	#form .step3 li::after{
		background: url(../images/arrow09.png) no-repeat center center;
		background-size: 8px;
		width: 20px;
		right: -20px;
	}
}
/*お客様情報*/
#form section{
	background: #FFFFFF;
	margin: 0 0 50px 0;
	padding: 0 0 20px 0;
	font-size: 14px;
}
#form h3{
	background: #ACAC9D;
	color:#FFFFFF;
	font-size: 22px;
	font-weight: bold;
	margin:0 0 20px 0;
	padding: 10px;
	text-align: center;
}
#form table{
	margin:0 20px 40px 20px;
	width: calc(100% - 40px);
	border-top:solid 1px #CCCCCC;
}
#form table tr{
	border-bottom:solid 1px #CCCCCC;
}
#form table th{
	background: #F6F5F3;
	width: 200px;
	padding:15px 15px;
	vertical-align: top;
}
#form table td{
	padding:10px 15px;
	vertical-align: top;
}
#form table span.hissu{
	background: #FF8000;
	border-radius: 2px;
	font-size: 11px;
	font-weight: normal;
	padding: 2px 4px;
	margin: 0 0 0 5px;
	color:#FFFFFF;
	line-height: 100%;
}
#form table th span.hissu{
	float: right;
	padding:5px 4px;
}
#form table span.small{
	font-size:12px;
}
#form table td input[type="text"]{
	width:100%;
}
#form table td p{
	margin:5px 0 0 0;
}
#form table.confirm th,
#form table.confirm td{
	padding:10px;
}
#form .policy{
	overflow:auto;
	height: 200px;
	border:solid 4px #CCCCCC;
	border-radius: 3px;
	margin:0 20px 20px 20px;
	padding: 20px;
}
#form .policy h4,
#form .policy dl{
	margin:0 0 20px 0;
}
#form .policy dt{
	color:#FF2626;
}
#form .policy dd{
	margin:0 0 20px 10px;
}
#form p.btn{
	text-align:center;
	font-size: 16px;
	margin:30px 20px 20px 20px;
	padding:0 0 20px 0;
}
#form p.btn input{
	width:350px;
	padding:20px 0;
}
#form p.btn input.btn_gry01{
	width:150px;
	padding:20px 0;
}
#form p.btn button.btn_gry01{
	width:150px;
	padding:20px 0;
}
#form p.btn+p{
	border-top:solid 1px #ACAC9D;
	padding: 20px 0 0 0;
}
@media only screen and (max-width: 600px) {
	#form h3{
		font-size: 14px;
		margin: 0 0 10px 0;
		padding: 10px;
	}
	#form table{
		margin:0 10px 40px 10px;
		width: calc(100% - 20px);
		border-top:solid 1px #CCCCCC;
	}
	#form table tr{
		border-bottom:solid 1px #CCCCCC;
	}
	#form table th{
		width: calc(100% - 20px);
		padding:10px;
		display:block;
	}
	#form table td{
		padding:10px 0 20px 0;
		width: calc(100% - 20px);
		display:block;
	}
	#form table span.hissu{
		font-size: 11px;
		padding: 2px 4px;
	}
	#form table th span.hissu{
		float: none;
		padding:2px 4px;
	}
	#form table span.small{
		font-size:10px;
	}
	#form table td input[type="text"]{
		width:100%;
	}
	#form .policy{
		margin:0 10px 20px 10px;
		padding: 10px;
	}
	#form p.btn{
		font-size: 14px;
		margin:30px 10px 10px 10px;
		padding:0 0 30px 0;
	}
	#form p.btn input{
		width:100%;
		padding:15px 0;
	}
	#form p.btn input.btn_gry01{
		width:100%;
		margin: 0 0 20px 0;
		padding:15px 0;
	}
	#form p.btn button.btn_gry01{
		width:100%;
		margin: 0 0 20px 0;
		padding:15px 0;
	}
}
/*完了画面*/
#form .thankyou{
	padding:50px 20px;
}
#form .thankyou .image{
	background: url(../images/img_thankyou.png) no-repeat center top;
	background-size: 135px;
	padding: 160px 0 30px 0;
	color: #3A8826;
	font-size: 24px;
	text-align: center;
}
#form .thankyou p{
	text-align: center;
	font-size: 14px;
}
#form .thankyou .btn{
	text-align: center;
	font-size: 14px;
}
@media only screen and (max-width: 600px) {
	#form .thankyou{
		padding:20px 20px;
	}
	#form .thankyou .image{
		background: url(../images/img_thankyou.png) no-repeat center top;
		background-size: 100px;
		padding: 130px 0 30px 0;
		font-size: 18px;
	}
	#form .thankyou .btn a{
		width: calc(100% - 60px);
	}
}

/*------------------------------------------------------------------------------------------------------------------------*/
/* (04)ログイン                                                                                                            */
/*------------------------------------------------------------------------------------------------------------------------*/
#login{
	text-align: center;
}
#login section{
	background: #FFFFFF;
	margin: 0 0 100px 0;
	padding: 50px 0;
}
#login section table{
	max-width: 400px;
	width: 100%;
	margin: 0 auto 20px auto;
}
#login section table th,
#login section table td{
	padding: 10px;
}
#login section table th{
	width: 70px;
}
#login section table td{
	text-align: left;
}
#login section table td input{
	width: calc(100% - 10px);
}
#login .entry h3{
	font-size: 20px;
	margin: 0 0 30px 0;
}
@media only screen and (max-width: 600px) {
	#login section{
		margin: 0 0 50px 0;
		padding: 20px 0;
	}
}

/*------------------------------------------------------------------------------------------------------------------------*/
/* (05)ガイド　                                                                                                            */
/*------------------------------------------------------------------------------------------------------------------------*/
#guide section{
	margin: 0;
	padding: 60px 0 0 0;
}
#guide section:first-of-type{
	padding:0;
}
#guide section h3{
	font-size: 22px;
	font-weight: bold;
	color:#398726;
	background: #E3E2DD;
	margin: 0 0 30px 0;
	padding: 15px 20px;
}
#guide section .image{
	border:solid 1px #CCCCCC;
	background: #FFFFFF;
}
#guide section .image img{
	vertical-align: bottom;
}
#guide section h4{
	font-size: 16px;
	font-weight: bold;
	color:#666666;
	margin: 0 0 10px 0;
}
#guide section h4.note{
	font-size: 16px;
	font-weight: bold;
	color:#666666;
	margin: 0 0 10px 0;
	padding: 6px 40px;
	background: #0082AE;
	border-radius: 30px;
	display: inline-block;
	color: #FFFFFF;
}
#guide section ul{
	margin:	0 0 0 40px;
}
#guide section ul li{
	text-indent: -1rem;
}
#guide section table{
	border:solid 1px #CCCCCC;
}
#guide section table th{
	padding:10px;
	background: #EEEEEE;
	border:solid 1px #CCCCCC;
}
#guide section table td{
	padding:10px;
	background: #FFFFFF;
	border:solid 1px #CCCCCC;
}
#guide section .box{
	background:#FFFFFF;
	padding: 20px;
	border: solid 2px #E3E2DD;
}

/*230522追加　ここから*/
.douganew{
	display: flex;
	flex-flow: row wrap;
}
.douganew li{
	width:50%;
	padding:1%;
	box-sizing: border-box;
	margin-bottom:20px;
}
.douganew li video{
	
}
/*230522追加　ここまで*/


@media only screen and (max-width: 600px) {
	#guide{
		font-size:12px;
	}
	#guide section{
		margin:0;
		padding: 30px 0 0 0;
		font-size: 12px;
	}
	#guide section h3{
		font-size: 16px;
		margin: 0 0 10px 0;
		padding: 10px 15px;
	}
	#guide section h4{
		font-size: 14px;
	}
	#guide section ul{
		margin:	0 0 0 20px;
	}
	#guide section ul li{
		text-indent: -1rem;
	}
	/*230522追加　ここから*/
	.douganew li{
		width:100%;
	}
	/*230522追加　ここまで*/
}


/*のし・包装紙*/
#guide ul.wrapping{
	font-size: 0;
	margin: 0;
}
#guide ul.wrapping li{
	font-size: 12px;
	display: inline-block;
	width: calc(((100% - 60px) / 4) - 12px);
	margin: 0 20px 20px 0;
	padding: 5px 5px 8px 5px;
	border: solid 1px #CCCCCC;
	background: #FFFFFF;
	text-align: center;
	vertical-align: top;
	text-indent: inherit;
}
#guide ul.wrapping li:nth-child(4n){
	margin: 0 0 20px 0;
}
#guide ul.wrapping li img{
	width: 100%;
	margin: 0 0 5px 0;
}
#guide ul.wrapping li .title{
	font-size: 14px;
	font-weight: bold;
	margin: 0 0 5px 0;
}
@media only screen and (max-width: 600px) {
	#guide ul.wrapping li{
		font-size: 11px;
		width: calc(((100% - 10px) / 2) - 12px);
		margin: 0 10px 20px 0;
		border: solid 1px #CCCCCC;
	}
	#guide ul.wrapping li:nth-child(2n){
		margin: 0 0 20px 0;
	}
	#guide ul.wrapping li .title{
		font-size: 12px;
	}
}

/*書体*/
#guide ul.font{
	font-size: 0;
	margin: 0;
}
#guide ul.font li{
	font-size: 16px;
	display: inline-block;
	width: calc((100% - 60px) / 2);
	margin: 0 60px 20px 0;
	vertical-align: top;
	text-indent: inherit;
}
#guide ul.font li .title{
	font-weight: bold;
	color: #666666;
	margin: 0 0 5px 0;
}
#guide ul.font li:nth-child(2n){
	margin: 0 0 20px 0;
}
#guide ul.font li .image{
	background: #FFFFFF;
	padding: 20px 10px 20px 10px;
	text-align: center;
}
@media only screen and (max-width: 600px) {
	#guide ul.font li{
		font-size: 14px;
		display: block;
		width: 100%;
		margin: 0 0 20px 0;
	}
	#guide ul.font li .title{
		font-weight: bold;
	}
	#guide ul.font li .image{
		background: #FFFFFF;
		padding: 10px 5px 10px 5px;
	}
}

/*ロゴ*/
#guide ul.logo{
	font-size: 0;
	margin: 0;
}
#guide ul.logo li{
	font-size: 14px;
	display: inline-block;
	width: calc((100% - 60px) / 2);
	margin: 0 60px 20px 0;
	vertical-align: top;
	text-indent: inherit;
}
#guide ul.logo li .title{
	font-weight: bold;
	color: #666666;
	margin: 0 0 5px 0;
	padding: 5px 0 5px 40px;
	line-height: 120%;
	font-size: 16px;
}
#guide ul.logo li:nth-child(1) .title{
	background: url(../images/contents/img_logo01.png) no-repeat center left;
	background-size: 27px;
}
#guide ul.logo li:nth-child(2) .title{
	background: url(../images/contents/img_logo02.png) no-repeat center left;
	background-size: 27px;
}
#guide ul.logo li .title span{
	font-size:14px;
}
#guide ul.logo li:nth-child(2n){
	margin: 0 0 20px 0;
}
#guide ul.logo li .image{
	background: #FFFFFF;
	margin: 0 0 5px 0;
	padding: 20px 10px 20px 10px;
	text-align: center;
}
@media only screen and (max-width: 600px) {
	#guide ul.logo li{
		font-size: 12px;
		display: block;
		width: 100%;
		margin: 0 0 20px 0;
	}
	#guide ul.logo li .title{
		font-size: 14px;
	}
	#guide ul.logo li .image{
		background: #FFFFFF;
		padding: 10px 5px 10px 5px;
	}
}

/*ご利用ガイド*/
#guide section.guide{
	margin:0 ;
	padding: 60px 0 0 0;
}
#guide section.guide:first-of-type{
	padding: 0;
}
/*
#guide section.guide h3{
	font-size: 22px;
	font-weight: bold;
	color:#666666;
	background: #FFFFFF;
	margin: 0 0 30px 0;
	padding: 15px 20px;
}
*/
#guide section.guide h4{
	font-size: 16px;
	font-weight: bold;
	color:#398626;
	margin: 0 0 5px 0;
}
#guide ul.module-section{
	font-size: 0;
	margin: 0 0 55px 0;
}
#guide ul.module-section li{
	font-size: 14px;
	font-weight: bold;
	background: url(../images/arrow03.png) no-repeat center left 20px #FFFFFF;
	background-size: 6px;
	display: inline-block;
	width: calc(((100% - 20px) / 3) - 2px);
	margin: 0 10px 10px 0;
	border:solid 1px #DFDFD0;
	border-radius: 20px;
	text-decoration: none;
	vertical-align: top;
}
#guide ul.module-section li:nth-child(3n){
	margin-right:0;
}
#guide ul.module-section li a:link,
#guide ul.module-section li a:visited{
	display:block;
	padding: 8px 10px 8px 40px;
	color: #444444;
	text-decoration: none;
}
#guide ul.module-section li:hover{
	opacity:0.5;
}
#guide section.guide .flowtitle{
	background: #DFDFD0;
	border-radius: 20px;
	margin: 0 0 20px 0;
	padding: 8px 20px;
	color: #666666;
	font-size: 16px;
	font-weight: bold;
	display: inline-block;
}
@media only screen and (max-width: 600px) {
	#guide section.guide{
		margin:0;
		padding: 30px 0 0 0;
		font-size: 12px;
	}
	#guide section.guide h3{
		font-size: 16px;
		margin: 0 0 10px 0;
		padding: 10px 15px;
	}
	#guide section.guide h4{
		font-size: 14px;
	}
	#guide ul.module-section{
		font-size: 0;
		margin: 0 0 25px 0;
	}
	#guide ul.module-section li{
		font-size: 12px;
		font-weight: bold;
		background: url(../images/arrow03.png) no-repeat center left 20px #FFFFFF;
		background-size: 6px;
		display: inline-block;
		width: calc(((100% - 10px) / 2) - 2px);
		margin: 0 5px 5px 0;
		border:solid 1px #DFDFD0;
		border-radius: 20px;
		text-decoration: none;
		vertical-align: top;
	}
	#guide ul.module-section li:nth-child(3n){
		margin-right:5px;
	}
	#guide ul.module-section li:nth-child(2n){
		margin-right:0;
	}
	#guide section.guide .flowtitle{
		padding: 5px 10px;
		font-size: 14px;
	}
}

/*よくある質問*/
#guide #faq dl{
	margin: 0;
	padding: 10px 10px;
	background: url(../images/contents/icn_q.png) no-repeat left 20px top 20px;
	background-size: 24px;
	border-top:solid 2px #E3E2DD;
}
#guide #faq dl:last-child{
	border-bottom:solid 2px #E3E2DD;
}
#guide #faq dt{
	background: url(../images/contents/icn_plus.png) no-repeat right 10px top 13px;
	background-size: 20px;
	padding: 12px 40px 10px 50px;
	color: #666666;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
}
#guide #faq dt:hover{
	opacity: 0.5;
}
#guide #faq dd{
	display: none;
}
#guide #faq dd{
	background: url(../images/contents/icn_a.png) no-repeat left 10px top 10px;
	background-size: 24px;
	padding: 10px 50px;
}
#guide #faq dt.active{
	background: url(../images/contents/icn_minus.png) no-repeat right 10px top 13px;
	background-size: 20px;
}
@media only screen and (max-width: 600px) {
	#guide #faq dl{
		padding: 5px 5px;
		background: url(../images/contents/icn_q.png) no-repeat left 10px top 17px;
		background-size: 14px;
	}
	#guide #faq dt{
		background: url(../images/contents/icn_plus.png) no-repeat right 10px top 13px;
		background-size: 10px;
		padding: 10px 40px 10px 30px;
		font-size: 14px;
	}
	#guide #faq dd{
		background: url(../images/contents/icn_a.png) no-repeat left 5px top 10px;
		background-size: 14px;
		padding: 5px 30px;
	}
	#guide #faq dt.active{
		background: url(../images/contents/icn_minus.png) no-repeat right 10px top 13px;
		background-size: 12px;
	}
}

/*リンク*/
#guide .link dl{
	border-top: solid 2px #E3E2DD;
	padding: 20px 0;
}
#guide .link dl:last-child{
	border-bottom: solid 2px #E3E2DD;
}
#guide .link dt{
	font-size: 16px;
	font-weight: bold;
	margin: 0 0 5px 0;
}
#guide .link dt a:link   { text-decoration: none;}
#guide .link dt a:visited{ text-decoration: none;}
#guide .link dt a:hover  { text-decoration: underline;}
@media only screen and (max-width: 600px) {
	#guide .link dl{
		padding: 10px 0;
	}
	#guide .link dt{
		font-size: 14px;
		margin: 0;
	}
}

/*サイトマップ*/
#guide .sitemap1{
	margin: 0 0 40px 0;
	font-size: 0;
}
#guide .sitemap1 a:link   { color:#333333; text-decoration: none;}
#guide .sitemap1 a:visited{ color:#333333; text-decoration: none;}
#guide .sitemap1 a:hover  { color:#999999; text-decoration: none;}
#guide .sitemap1 ul{
	display:inline-block;
	width: calc(50% - 40px);
	margin: 0 20px 0 20px;
	vertical-align: top;
}
#guide .sitemap1 li{
	background: url(../images/arrow_list01.png) left center no-repeat;
	background-size: 12px;
	margin: 0 0 10px 0;
	padding: 2px 0 2px 20px;
	font-size: 14px;
	font-weight: bold;
}
#guide .sitemap2{
	margin: 0 0 40px 0;
	font-size: 0;
}
#guide .sitemap2 a:link   { color:#333333; text-decoration: none;}
#guide .sitemap2 a:visited{ color:#333333; text-decoration: none;}
#guide .sitemap2 a:hover  { color:#999999; text-decoration: none;}
#guide .sitemap2>ul{
	margin: 0 20px 0 20px;
}
#guide .sitemap2>ul>li{
	margin:	0 0 25px 0;
}
#guide .sitemap2>ul>li>a{
	background: url(../images/arrow_list01.png) left center no-repeat;
	background-size: 12px;
	margin: 0;
	padding: 2px 0 2px 20px;
	font-size: 14px;
	font-weight: bold;
}
#guide .sitemap2>ul>li>ul{
	padding: 10px 0 0 20px;
	font-size: 14px;
}
#guide .sitemap2>ul>li>ul>li{
	margin: 0 20px 0 0;
	font-size: 14px;
	display: inline-block;
}

#guide .sitemap1 h3,
#guide .sitemap2 h3{
	background: #faf2de;
	margin: 0 0 20px 0;
	padding: 5px 20px;
	font-size: 16px;
	color:#333;
}
@media only screen and (max-width: 600px) {
	#guide .sitemap1 ul{
		display:block;
		width: calc(100% - 20px);
		margin: 0 0 0 20px;
	}
	#guide .sitemap1 li{
		background: url(../images/arrow_list01.png) left center no-repeat;
		background-size: 9px;
		margin: 0 0 10px 0;
		padding: 2px 0 2px 20px;
	}
	#guide .sitemap2>ul>li>a{
		background: url(../images/arrow_list01.png) left center no-repeat;
		background-size: 9px;
		margin: 0;
		padding: 2px 0 2px 20px;
		font-size: 14px;
		font-weight: bold;
	}
}

/*サイトマップ*/
#guide .mitsumori{
	background: url(../images/contents/img_mitsumori_arrow.png) no-repeat bottom center;
	margin: 0 0 30px 0;
	padding: 0 0 66px 0;
}
#guide .mitsumori:first-of-type{
	padding: 0 0 66px 0;
}
#guide .mitsumori:last-of-type{
	padding: 0 0 0 0;
	background: none;
}
@media only screen and (max-width: 600px) {
	#guide .mitsumori{
		background: url(../images/contents/img_mitsumori_arrow.png) no-repeat bottom center;
		background-size: 28px;
		margin: 0 0 20px 0;
		padding: 0 0 28px 0;
	}
	#guide .mitsumori:first-of-type{
		padding: 0 0 28px 0;
	}
}
/*エラーメッセージ*/
#error{
	padding: 10px 0 20px 0;
	text-align: left;
}
#error p{
	background: url(../images/icn_error01.png) no-repeat left center;
	background-size: 40px;
	margin: 0 0 10px 0;
	padding: 10px 0 10px 50px;
	font-size: 16px;
	font-weight: bold;
	color:#666666;
}
#error .box{
	padding:20px;
	border:solid 5px #FF4C4C;
	background: #FFE5DF;
}
#error dl{
	color: #FF4C4C;
	padding: 5px 0;
}
#error dl dt,
#error dl dd{
	display: inline-block;
	vertical-align: top;
	font-size: 14px;
}
#error dl dt{
	font-weight: bold;
}