@charset "utf-8";
/* ご利用ガイド css */

/* 共通 */
#main .inner-link {
	padding: 1.8rem 4rem;
	text-align: center;
	background: #f2f2f2;
}
#main .inner-link ul {
	display: inline-block;
    margin: 0 auto;
    width: 90%;
    min-width: 810px;
}
#main .inner-link ul.delivery_link {
	width: 60%;
	min-width: 540px;
}
#main .inner-link ul.other_link {
	width: 56%;
	min-width: 504px;
}
#main .inner-link ul.member_link {
	width: 100%;
	min-width: auto;
}
#main .inner-link li { 
	width: auto;
	margin-left: 13%;
}
#main .inner-link ul.member_link li { 
	margin-left: 0;
	width: 25%;
	margin-bottom: 1.8rem;
}
#main .inner-link li:first-child { margin-left: 0; }
#main .inner-link li a {
	font-size: 14px;
	font-size: 1.4rem;
	display: inline;
}
#main .inner-link li a.sankaku-arrow { padding: 0 0 0 11px; }
#main .inner-link li a:hover {
	transition: 0.05s linear;
    -webkit-transition: all 0.05s linear;
    -moz-transition: all 0.05s linear;
    -o-transition: all 0.05s linear;
    -ms-transition: all 0.05s linear;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-ms-filter: “alpha( opacity=50 )”
}
section > ol li .caution, section > p .caution { 
	margin-left: 1em;
	text-indent: -1em;
}
table { max-width: 480px; }
table td { text-align: center !important; }
h4 { margin: 2rem 0 0.5rem; }
p.comment { margin-bottom: 0.5rem; }
#area h3 { margin-bottom: 1.5rem; }
#guide-top.menu-bottom {
	background: #F9F9F7;
    padding: 2rem 2rem 1rem;
	margin-top: 6rem;
	border: none;
	margin-bottom: 0;
}
#guide-top.menu-bottom ul { margin-bottom: 0; }
#guide-top.menu-bottom ul li {
	width: calc(50% - 5px);
	margin-bottom: 10px;
}
#guide-top.menu-bottom ul li:nth-child(even) { margin-left: 10px; }
#main section {
    border-bottom: 1px solid #ccc;
    padding-bottom: 6rem;
	margin-bottom: 4rem;
}
.red a { color: #9d0b0b; }

/* ポイント */
#main .point {
    border: 2px solid #FFD582;
    color: #F8BC44;
    font-weight: bold;
    vertical-align: middle;
    margin-top: 1.5rem;
    margin-bottom: 4rem;
}
#main .point h5 {
    margin: 0;
    padding: 0.8rem;
    border-right: 1px solid #ffcb63;
    vertical-align: middle;
	text-align: center;
}
#main .point p {
    color: #F8BC44;
    margin: 0;
    width: auto;
    padding: 0.8rem;
    text-indent: 0;
    line-height: 2.2rem;
}

/*=========================================
		トップページ
=========================================*/	
#guide-top > ul { margin-bottom: 4rem; }
#guide-top ul li { margin-bottom: 0; }
#guide-top ul li a {
	height: 5.6rem;
	line-height: 5.6rem;
	position: relative;
	display: inline-block;
	padding: 0 0 0 16px;
	color: #1e1e1e;
	vertical-align: middle;
	text-decoration: none;
	font-size: 15px;
}
#guide-top ul li a::before,
#guide-top ul li a::after,
#guide-top ul li ul li a::before,
#guide-top ul li ul li a::after{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
#guide-top ul li a::before{
	right: 20px;
	box-sizing: border-box;
	width: 4px;
	height: 5px;
	border: 5px solid transparent;
	border-left: 6px solid #1e1e1e;
}
#guide-top ul li a img {
	margin: 1.5rem 5px 0 0;
    display: inline;
    float: left;
}
#guide-top ul li ul li a::before { 
	left: 0;
	box-sizing: border-box;
	width: 4px;
	height: 5px;
	border: 4px solid transparent;
	border-left: 5px solid #1e1e1e;
	right: auto;
}
#guide-top ul li ul li a:hover {
	transition: 0.05s linear;
    -webkit-transition: all 0.05s linear;
    -moz-transition: all 0.05s linear;
    -o-transition: all 0.05s linear;
    -ms-transition: all 0.05s linear;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-ms-filter: “alpha( opacity=50 )”
}
#guide-top ul li p {
	margin-left: 18px;
}
#guide-top ul li ul {
	margin-left: 20px;
	padding-top: 2rem;
}
#guide-top ul li ul li {
    float: none;
    display: block;
	margin: 0 0 2rem 0;
	width: 100%;
}
#guide-top ul li ul li a {
    line-height: 1.8rem;
    height: auto;
	display: inline;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: 500;
	padding-left: 10px; 
}
#main section h5 {
    margin-top: 3rem;
    font-size: 16px;
    font-size: 1.6rem;
	margin-bottom: 0.5rem;
}

/* 方法解説 */
.how-to ol li {
	position: relative;
	display: inline-block;
	color: #1e1e1e;
	vertical-align: middle;
	text-decoration: none;
	font-size: 15px;
	width: calc(50% - 32px);
	float: left;
	border: 1px solid #ccc;
	padding: 15px;	
	margin-bottom: 3rem;
	margin-right: 32px;
}
.how-to ol li::before,
.how-to ol li::after {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.how-to ol li::after{
    right: -36px;
    left: auto;
    box-sizing: border-box;
    width: 4px;
    height: 5px;
    border: 11px solid transparent;
    border-left: 14px solid #1e1e1e;
}
.how-to ol li:last-child::after, #order_wrap ol li:last-child::before { display: none; }
.how-to ol {
	list-style: none;
}
.how-to .t-14 { line-height: 2.2rem; }
.how-to li:last-child { margin-bottom: 0; }
.how-to li .caution { 
	margin-top: 1rem;
	line-height: 2.2rem;
}
.how-to li div p:first-child { padding-right: 10px; }
.how-to li .img_wrap {
	width: 100%;
	margin: 1.5rem auto 0;
	max-width: 395px;
}
.how-to li .img_wrap.long { 
	width: 75.334%;
	 max-width: 338px
}
.how-to li .img_wrap img {
	width: 100%;
	height: auto;
}
.how-to .step {
	font-weight: bold;
	line-height: 4.6rem;
	font-size: 46px;
	font-size: 4.6rem;
	color: #4C4C4C;
}


/*=========================================
		ご注文について
=========================================*/	
/* ご注文方法 */
#order_wrap { margin-top: 4rem; }
#order_wrap ol li {
	height: 374px;
}

/* お支払い方法 */
.ttl-mark:before { height: 2.2rem; }
#pay_wrap p img { margin-top: 1rem; }
#pay_wrap .caution { 
	margin-left: 1em;
	text-indent: -1em;
	width: 100%;
}
#pay_wrap .card-logo { margin: 0.5rem 0 1rem; }
#pay_wrap .card-logo li {
	float: left;
	display: inline-block;
	margin-left: 15px;
}
#pay_wrap .card-logo li:first-of-type { margin-left: 0; }	
#pay_wrap p a { display: inline; }


/*=========================================
		配送について
=========================================*/	
.tab_wrap .delivery_link:before, .tab_wrap .delivery_link:after { left: 50.3%; }
.tab_wrap .delivery_link { width: 498px; }
.tab_wrap .delivery_link li { margin-left: 10.041%; }

/* 配送方法について */
#delivery_wrap { margin-top: 4rem; }
#delivery_wrap ul li {
	margin-left: 1em;
	text-indent: -1em;
	margin-top: 2rem;
}
#delivery_wrap ul li:first-child { margin-top: 0; }
#delivery_wrap ul li .caution { margin-left: 1em; }

/* 配送料について */
#charge_wrap { margin-top: 6rem; }
#charge_wrap table { max-width: 210px; }
#charge_wrap p.caution:before { text-indent: 0; }

/* お届けまでにかかる日数 */
#days_wrap { margin-top: 6rem; }
#days_wrap ul { margin-top: 4rem; }
#days_wrap ul li {
	margin-left: 1em;
	text-indent: -1em;
	margin-top: 2rem;
}
#days_wrap ul li:first-child { margin-top: 0; }
#days_wrap ul li .caution { margin-left: 1em; }


/*=========================================
		会員について
=========================================*/	
/* 会員登録について */
#register_wrap { margin-top: 4rem; }
#register_wrap #tokuten_wrap {
    background: #f2f2f2;
    padding: 2rem;
    width: 80%;
    margin: 1.5rem auto 3rem;
	text-align:  center;
}
#register_wrap #tokuten_wrap h4 {
	margin: 0 0 1rem 0;	
}
#register_wrap #tokuten_wrap .inner {
	text-align: left;
	border-top: 1px solid #ccc;
	padding-top: 1.5rem;
}
#register_wrap #tokuten_wrap ul {
	width: 64%;
	margin: 0 auto;
}
#register_wrap #tokuten_wrap ul li { 
	margin: 1.7rem 0;
	list-style: disc
}
#main #register_wrap .point {
	width: 80%;
	margin: 0 auto;
}
#main #register_wrap .point .td > p { 
	padding-top: 1.5rem;
	text-align: center;
}
#register_wrap .btn_wrap { 
	margin: 0 auto 2rem;
}
#register_wrap .btn-border a { padding: 10px 0; }
#register_wrap .btn-border a:after { display: none; }

/* 会員登録方法 */
#how-register_wrap ol li {
	height: 427px;
}

/* 会員登録ができない場合 */
#no-register_wrap ul li { 
	margin: 0.7rem 0 0.7rem 2rem;
	list-style: disc;
	line-height: 2.6rem;
}
#no-register_wrap .t-18 { 
	border: 1px solid #9d0b0b;
	padding: 0.5rem 1rem;
	margin-top: 0.7rem;
}

/* ログインができない場合 */
#no-login_wrap ul li {
	margin: 0.7rem 0 0.7rem 2rem;
	list-style: disc;
	line-height: 2.6rem;
}
#no-login_wrap ul li a { text-decoration: underline; }
#no-login_wrap .double-arrow {
	position: relative;
    padding: 0 0 0 14px;
    display: inline;
}
#no-login_wrap .double-arrow::before, #no-login_wrap .double-arrow::after {
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
#no-login_wrap .double-arrow::before, #no-login_wrap .double-arrow::after {
	width: 5px;
    height: 5px;
    border-top: 1px solid #9d0b0b;
    border-right: 1px solid #9d0b0b;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#no-login_wrap .double-arrow::after { margin-left: 5px; }

/* パスワードをお忘れの場合 */
#reminder_wrap ol li { height: 371px; }

/* 会員登録の変更 */
#userdit-basic_wrap ul li {
	margin: 0.7rem 0 0.7rem 2rem;
	list-style: disc;
	line-height: 2.6rem;
}

/* ログイン情報の変更 */
#userdit-login_wrap ul li {
	margin: 0.7rem 0 0.7rem 2rem;
	list-style: disc;
	line-height: 2.6rem;
}

/* 購入・配送履歴について */
#cart_wrap .double-arrow{
	position: relative;
    padding: 0 0 0 14px;
    display: inline;
}
#cart_wrap .double-arrow::before, #cart_wrap .double-arrow::after {
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
#cart_wrap .double-arrow::before, #cart_wrap .double-arrow::after {
	width: 5px;
    height: 5px;
    border-top: 1px solid #1e1e1e;
    border-right: 1px solid #1e1e1e;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#cart_wrap .double-arrow::after { margin-left: 5px; }

/* 退会の申し込みについて */
#exit_wrap ul li {
	margin: 0.7rem 0 0.7rem 2rem;
	list-style: disc;
	line-height: 2.6rem;
}

/*=========================================
		その他
=========================================*/	
.tab_wrap .other_link:before, .tab_wrap .other_link:after { right: 20.3%; }
.tab_wrap .other_link { width: 646px; }
.tab_wrap .other_link li { margin-left: 7.74%; }

/* 会員登録について */
#member_wrap { margin-top: 4rem; }

/* 販売条件 */
#conditions_wrap { margin-top: 6rem; }

/* 返品・交換について */
#change_wrap { margin-top: 6rem; }
#change_wrap ul li {
	margin-left: 1em;
	text-indent: -1em;
	margin-top: 2rem;
}
#change_wrap ul li:first-child { margin-top: 0; }

/* 納品書兼領収書について */
#receipt_wrap { margin-top: 6rem; }

@media screen and (max-width: 999px) {
	#guide-top ul.menu li ul li a { border: none !important; }
	.page-menu ul li a {
		border-top: 3px solid #f2f2f2 !important;
	}
	
	/* 下層共通 */	
	#guide-top.menu-bottom ul li:nth-child(even) { margin-left: 0 !important; }
	#guide-top.menu-bottom { 
		margin-top: 3.5rem;
		padding: 1rem;
	}
	#guide-top.menu-bottom ul li { 
		margin-bottom: 0 !important;
		width: 100%;
	}
	#guide-top.menu-bottom ul li a {
		height: 4.8rem;
		line-height: 4.4rem;
	}
	#guide-top.menu-bottom ul li a img { margin-top: 1rem; }
	#guide-top.menu-bottom ul li a {
		border-top: none !important;
	}
	#guide-top.menu-bottom ul li:first-child a {
		border-top: 3px solid #f2f2f2 !important;
	}
	
	/* 会員登録について */
	#main .inner-link ul.member_link .col:nth-child(3n+1){ margin-left: 0; }
	#register_wrap #tokuten_wrap, #main #register_wrap .point { width: 100%; }
	
	/* 会員登録方法 */
	#how-register_wrap ol li { height: 475px; }
	
}

@media screen and (max-width: 999px) and (min-width: 480px) {
	#guide-top ul.menu > li:nth-child(even) {
		margin-left: 20px !important;
	}
	#guide-top.menu-bottom ul.menu > li:nth-child(even) { margin-left: 0 !important; }
	
	/* ページ内リンク */
	#main .inner-link ul {
		width: 100%;
		min-width: auto;
	}
	#main .inner-link ul.delivery_link {
		width: 75%;
		min-width: auto;
	}
	#main .inner-link ul.other_link {
		width: 69%;
		min-width: auto;
	}
	#main .inner-link li { margin-left: 6%; }
	#main .inner-link .arrow:before, .arrow:after { top: 3px; }
	
	/* ご注文方法 */
	#order_wrap #order li { height: 387px; }
	
	/* 会員登録について */
	#main .inner-link ul.member_link .col {
		width: calc(32.95% - 5px);
		margin-left: 10px;
	}	
}

@media screen and (max-width: 480px) {
	#guide-top ul.menu { margin-bottom: 0; }
	#guide-top ul.menu li {
		width: 100%;
		display: block;
		margin-bottom: 2rem;
	}	
	#main .inner-link { 
		text-align: left;
		padding: 1.8rem 1.8rem 0;
	}
	#main .inner-link ul {
		display: inline-block;
		margin: 0 auto;
		width: 100%;
		min-width: auto;
	}
	#main .inner-link li, #main .inner-link ul.member_link li {
		width: 100%;
		margin-left: 0;
		margin-bottom: 1.8rem;
	}
	#main .inner-link li a.sankaku-arrow {
		padding: 0 0 0 11px;
		line-height: 1.8rem;
		font-size: 14px;
		font-size: 1.4rem;
	}
	#main .inner-link li a.sankaku-arrow::before { top: 5px; }
	.how-to ol li::after {
		right: 0;
		left: 0;
		top: inherit;
		bottom: -36px;
		box-sizing: border-box;
		width: 4px;
		height: 5px;
		border: 11px solid transparent;
		border-top: 14px solid #1e1e1e;
	}
	.how-to ol li { 
		margin-bottom: 3.2rem;
		margin-right: 0;
		width: 100%;
		height: auto;
		float: none;
	}
	#main section {
		padding-bottom: 4rem;
		margin-bottom: 2rem;
	}
	
	/* ご注文方法 */
	#order_wrap ol li { height: auto; }
	
	/* ご注文のキャンセル方法 */
	#order-cancel_wrap h5 { margin-top: 2rem; }
	
	/* お支払い方法 */
	#pay_wrap h5 { margin-top: 2rem; }
	#pay_wrap .mt-30 { margin-top: 2rem !important; }
	
	/* 会員登録について */
	#register_wrap .btn_wrap.col-1 { width: 80%; }
	#register_wrap .btn-border a { padding: 5px 0; }
	#how-register_wrap ol li { height: auto; }
	
	/* パスワードをお忘れの場合 */
	#reminder_wrap ol li { height: auto; }
}

@media screen and (max-width: 960px) {
	.tab_wrap.sp { display: none; }	
	.tab_wrap .tab { padding: 0 10px; }
	.tab_wrap .inner-link li .arrow:before, .tab_wrap .inner-link li .arrow:after {
		vertical-align: middle;
		bottom: 0;
	}
	.tab_wrap .inner-link li .arrow:after{ 
		top: 3px !important;
		left: 7px;
	}
	.tab_wrap .inner-link{ width: auto; }
	.tab_wrap .inner-link li .arrow:after { top: 1px !important; }
	
	/* お支払い方法 */
	#pay_wrap table.default th {
		font-size: 14px;
		font-size: 1.4rem;
	}
	#pay_wrap table.default td {
		font-size: 11px;
		font-size: 1.1rem;
	}
	#pay_wrap table.default th, #pay_wrap table.default td { padding: 0.5rem 3px; }
}

@media screen and (max-width: 468px) {
	.tab_wrap.sp { display: block; }
	.tab_wrap ul { margin-top: 8px; }
	.tab_wrap ul:first-child { margin-top: 0; }
	.tab_wrap .inner-link { 
		padding: 10px 15px;
		height: 146px;
	}
	.tab_wrap .inner-link.delivery_link { height: 115px; }
	.tab_wrap .inner-link ul { 
		width: auto;
		left: 15px;
	}
	.tab_wrap .inner-link li { 
		width: 100%;
		margin-left: 0 !important;
		text-align: left;
		line-height: 1.8rem;
	}
	.tab_wrap .inner-link li a {
		font-size: 12px;
		font-size: 1.2rem;
	}


	/*=========================================
			ご注文について
	=========================================*/
	.tab_wrap .order_link:before, .tab_wrap .order_link:after { left: 27%; }	
	#order_wrap #order li.next {
		line-height: inherit;
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
		height: auto;
		width: auto;
		margin: 0 auto 0.3rem;
		max-width: 12px;
	}
	#order_wrap #order li .img_wrap { width: 100%; }


	/*=========================================
			配送について
	=========================================*/
	.tab_wrap .delivery_link:before, .tab_wrap .delivery_link:after	{ left: 73.4%; }
	#delivery_wrap { margin-top: 4rem; }
	#charge_wrap, #days_wrap { margin-top: 4rem; }
	
	
	/*=========================================
			その他
	=========================================*/
	.tab_wrap .other_link:before, .tab_wrap .other_link:after { left: 27%; }	
	#member_wrap { margin-top: 4rem; }
	#conditions_wrap, #change_wrap, #receipt_wrap { margin-top: 4rem; }
}


/* IE11用ハック */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	#main .inner-link li a.sankaku-arrow { padding-top: 7px; }
	#main .inner-link { padding-bottom: 1rem; }
}