@charset "utf-8";
/*
サイト上の構成の大枠としてページ内に1度しか出てこないものを記述します。

接頭辞はLayoutの頭文字を取って【l_】とします。

ここで指定するのは以下の様なものと予想されます。
.l_wrap/.l_container/.l_header/
.l_nav/.l_main/.l_contents/.l_footer

モディファイヤを使用する場合は接頭辞【has_】をつけ、各レイアウトの下に記述します。

↓↓↓↓↓↓コメントアウト表記サンプル Comment out sample ↓↓↓↓↓↓
/*----------------------------------------------
	大くくりコメントアウト large part
---------------------------------------------*/

/*  中くくりコメントアウト middle part
------------------------------------- */

/* 小くくりコメントアウト small part */
/*
↑↑↑↑↑↑コメントアウト表記サンプル Comment out sample ↑↑↑↑↑↑
*/
/*----------------------------------------------
	icon.svg非表示
---------------------------------------------*/
.defs {
	display: none;
}

/*----------------------------------------------
	.l_main_area
---------------------------------------------*/
.l_main_area {
	position: relative;
	padding: 30px 0 40px;
	overflow-x: hidden;
	overflow-y: hidden;
}
#top .l_main_area {
	padding-top: 0;
}
.inner .l_main_area {
	background-color: white;
}
@media screen and (max-width: 568px) {
	.l_main_area {
		padding: 15px 0 20px;
	}
}

/*----------------------------------------------
	.l_wrap
---------------------------------------------*/
.l_wrap {
	width: calc(100% - 60px);
	max-width: 1220px;
	margin: 0 auto;
}
.l_wrap.has_narrow {
	max-width: 767px;
}
.l_wrap.has_extra_narrow {
	max-width: 340px;
}
@media screen and (min-width: 1280px) {
	.l_wrap.has_side_cart {
		/* 画面幅全体 - （画面幅半分 - コンテンツ幅半分） - サイドのカート幅 - マージン */
		width: calc(100vw - (50vw - 610px) - 230px - 30px);
		/* 画面幅半分 - コンテンツ幅半分 */
		margin-left: calc(50vw - 610px);
	}
}

@media screen and (max-width: 896px) {
  .l_wrap {
    width: calc(100% - 30px)
  }
}

/*----------------------------------------------
	.l_column_wrap
---------------------------------------------*/
.l_column_wrap {
	display: flex;
	justify-content: space-between;
}
.l_column_wrap:not(:first-child) { margin-top: 20px; }
.l_column_wrap:not(:last-child) { margin-bottom: 20px; }
.l_column_wrap.has_wrap { flex-wrap: wrap; }
.l_column_wrap.has_gap .l_column_wrap_item:not(:first-child) { margin-left: 1em; }
.l_column_wrap.has_gap .l_column_wrap_item:not(:last-child) { margin-right: 1em; }
.l_column_wrap_item.has_flex1 { flex: 1; }
.l_column_wrap_item.has_flex2 { flex: 2; }
.l_column_wrap_item.has_flex3 { flex: 3; }
.l_column_wrap_item.has_flex4 { flex: 4; }

@media screen and (max-width: 896px) {
	.l_column_wrap {
		flex-direction: column;
		margin-top: 0;
	}
	.l_column_wrap.has_reverse_sp {
		flex-direction: column-reverse;
	}
	.l_column_wrap.has_gap .l_column_wrap_item:not(:first-child) { margin-left: 0; }
	.l_column_wrap.has_gap .l_column_wrap_item:not(:last-child) { margin-right: 0; }
	.l_column_wrap_item:not(:first-child) { margin-top: .6em; }
	.l_column_wrap_item:not(:last-child) { margin-bottom: .6em; }
	.l_column_wrap_item.has_flex1 { flex: inherit; }
	.l_column_wrap_item.has_flex2 { flex: inherit; }
	.l_column_wrap_item.has_flex3 { flex: inherit; }
	.l_column_wrap_item.has_flex4 { flex: inherit; }
}

/*----------------------------------------------
	.l_media
---------------------------------------------*/
.l_media:not(:first-child) { margin-top: 1.6em; }
.l_media:not(:last-child) { margin-bottom: 1.6em; }
.l_media_img {
	float: left;
	margin-right: 20px;
}
.l_media.has_right .l_media_img {
	float: right;
	margin-right: inherit;
	margin-left: 20px;
}
@media screen and (max-width: 480px) {
	.l_media_img {
		float: none!important;
		margin-left: 0!important;
	}
}

/*----------------------------------------------
	.l_skelton_box
---------------------------------------------*/
.l_skelton_box:not(:first-child) { margin-top: 1.6em; }
.l_skelton_box:not(:last-child) { margin-bottom: 1.6em; }

.l_skelton_box.has_border:not(:first-child) {
	padding-top: 1.6em;
	border-top: 1px solid #e3e3e3
}

/*----------------------------------------------
	.l_secondary_box
---------------------------------------------*/
.l_secondary_box {
	margin-bottom: 20px;
	padding: 1.6em;
	border-radius: 3px;
	background: #f5f5f5;
	border: 1px solid #e3e3e3;
}

/*----------------------------------------------
	.l_annotation_box
---------------------------------------------*/
.l_annotation_box {
	padding: 1em 1.6em;
	border: 2px solid #d84242;
}

/*----------------------------------------------
	.l_terms_box
---------------------------------------------*/
.l_terms_box {
	padding-top: 1.6em;
	border-top: 1px solid #E3E3E3;
}
.l_terms_box:not(:first-child) { margin-top: 1.6em; }
.l_terms_box:not(:last-child) { margin-bottom: 1.6em; }

/*----------------------------------------------
	.l_header_area
---------------------------------------------*/
/*  .l_head_cont
------------------------------------- */
.l_head_cont {
	padding: 10px 0;
	background-color: #fff;
	/* background-color: #21569f; */
}
.l_head_cont .l_wrap {
	display: flex;
	justify-content: space-between;
  align-items: flex-end;
}
.l_head_logo {
	display: flex;
	align-items: flex-end;
}
.l_head_logo a {
	display: block;
	height: 50px;
	margin-right: 14px;
	line-height: 1;
	/* background-color: #fff; */
}
.l_head_logo a img {
	height: 100%;
	object-fit: contain;
}
.l_head_lead {
	display: inline-block;
	margin-bottom: -.25em;
	color: #333;
	font-weight: normal;
	font-size: 1.1rem;
	line-height: 1.6;
}
.l_head_menu.has_pc_menu {
	display: block;
}
.l_head_menu.has_sp_menu {
	display: none;
}
.l_head_menu > li {
	display: inline-block;
	position: relative;
	text-align: left;
	vertical-align: middle;
}
.l_head_menu > li > .l_menu_link {
	display: flex;
	flex-direction: column;
	text-align: center;
	justify-content: center;
	padding: 0 22px;
	color: #333;
	font-weight: bold;
	line-height: 1;
	cursor: pointer;
	transition: .2s ease;
}
.l_head_menu > li > .l_menu_link:hover {
	opacity: .6;
}
.l_head_menu > li .l_menu_icon {
  margin: auto auto 4px;
  width: 24px;
  height: 24px;
  fill: #366BB3;
}
.l_head_menu > li.has_arrow > .l_menu_link {
	padding-right: 22px;
}
/* .l_head_menu > li.has_arrow > .l_menu_link::after {
	display: block;
	position: absolute;
	top: 0;
	right: 10px;
	bottom: 0;
	transform: rotate(45deg);
	width: 6px;
	height: 6px;
	margin: auto;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	content: '';
} */
.l_menu_box {
	display: none;
	position: absolute;
	transform: translateX(-50%);
	top: 50px;
	left: 50%;
	z-index: 1;
	min-width: 200px;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);
}
.l_menu_box::before {
	position: absolute;
	top: -2px;
	left: 50%;
	z-index: 1;
	transform: translateX(-50%) rotate(45deg) skew(0deg,0deg);
	width: 20px;
	height: 20px;
	box-shadow: 0 0 10px 0 rgba(163,163,163,0.50);
	background-color: #fff;
	content: '';
}
.l_menu_box::after {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background-color: #fff;
	content: '';
}
.l_menu_list {
	position: relative;
	z-index: 3;
	padding: 10px;
}
.l_menu_list > li:not(:last-child) {
	margin-bottom: 5px;
}
.l_menu_btn {
	position: relative;
	z-index: 3;
	padding: 15px;
}
.l_menu_btn > a:not(:last-child) {
	margin-bottom: 10px;
}
@media screen and (max-width: 1100px) {
	/*  .l_head_cont
	------------------------------------- */
	.l_head_logo {
		flex-direction: column;
		align-items: flex-start;
	}
	.l_head_logo a {
		margin: 0 0 5px;
	}
}
@media screen and (max-width: 896px) {
	/*  .l_head_cont
	------------------------------------- */
	.l_head_logo {
		max-width: 30%;
	}
	.l_head_logo a {
		margin: 0;
	}
	.l_head_lead {
		display: none;
	}
	.l_head_menu.has_pc_menu {
		display: none;
	}
	.l_head_menu.has_sp_menu {
		display: flex;
		align-items: center;
	  justify-content: flex-end;
	}
	.l_head_menu > li > .l_menu_link:hover {
		opacity: 1;
	}
	.l_head_menu.has_sp_menu > li {
		margin-left: 10px;
	}
	.l_head_menu.has_sp_menu .l_menu_login {
		display: flex;
		align-items: center;
	}
	.l_head_menu.has_sp_menu .l_menu_login a {
		display: inline-block;
		padding: 0;
		font-size: 1.2rem;
		width: 6em;
		white-space: nowrap;
		overflow: hidden;
	  text-overflow: ellipsis;
	}
	#nav-drawer {
		position: relative;
	}
	/*チェックボックス等は非表示に*/
	.nav-unshown {
		display:none;
	}
	/*アイコンのスペース*/
	#nav-open {
		display: inline-block;
		width: 25px;
		height: 22px;
		vertical-align: middle;
	}
	/*ハンバーガーアイコンをCSSだけで表現*/
	#nav-open span,
	#nav-open span:before,
	#nav-open span:after {
		position: absolute;
		height: 1px;
		width: 25px;
		border-radius: 3px;
		background: #333;
		display: block;
		content: '';
		cursor: pointer;
		transition: all .2s ease;
	}
	#nav-open span:before {
		bottom: -10px;
	}
	#nav-open span:after {
		bottom: -20px;
	}
	/*閉じる用の薄黒カバー*/
	#nav-close {
		display: none;/*はじめは隠しておく*/
		position: fixed;
		z-index: 99;
		top: 0;/*全体に広がるように*/
		left: 0;
		width: 100%;
		height: 100%;
		background: black;
		opacity: 0;
		transition: .3s ease-in-out;
	}
	/*中身*/
	#nav-content {
		overflow: auto;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;/*最前面に*/
		width: calc(100% - 55px);
		max-width: 330px;/*最大幅（調整してください）*/
		height: 100%;
		background: #fff;/*背景色*/
		transition: .3s ease-in-out;/*滑らかに表示*/
		-webkit-transform: translateX(-105%);
		transform: translateX(-105%);/*左に隠しておく*/
	}
	/*チェックが入ったらもろもろ表示*/
	#nav-input:checked ~ #nav-open span {
		background: #fff;
	}
	#nav-input:checked ~ #nav-open span:before {
		transform: rotate(45deg);
    z-index: 999;
	}
	#nav-input:checked ~ #nav-open span:after {
		transform: rotate(-45deg);
		bottom: -10px;
    z-index: 999;
	}
	#nav-input:checked ~ #nav-close {
		display: block;/*カバーを表示*/
		opacity: .5;
	}
	#nav-input:checked ~ #nav-content {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);/*中身を表示（右へスライド）*/
		box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}
	.l_head_menu_main > li > .l_menu_main_link {
		display: block;
		position: relative;
		padding: 1em 1em 1em 35px;
		border-bottom: 1px solid #e3e3e3;
	}
	.l_head_menu_main > li .l_menu_icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
    margin: auto;
    width: 20px;
    height: 20px;
    fill: #366BB3;
	}
}
@media screen and (max-width: 480px) {
	.l_head_menu.has_sp_menu > li {
		margin-left: 5px;
	}
}
/*  .l_head_func
------------------------------------- */
.l_head_func {
	padding: 5px 0;
	background-color: #366BB3;
}
.l_head_func .l_wrap {
	display: flex;
	justify-content: space-between;
}
/* .l_head_search */
.l_head_search {
	display: flex;
	width: calc(100% - 170px);
}
.l_head_search.has_sp {
	display: none;
}
.l_head_search_select {
	position: relative;
}
.l_head_search_select > span {
  display: flex;
/** 20200926  width: 140px; **/
	width: 155px;
	height: 40px;
  padding: .5em 1em;
  border-radius: 1px 0 0 1px;
  background-color: #ffe785;
	color: #333;
  font-weight: bold;
  font-size: 1.4rem;
  line-height: 1.4;
	align-items: center;
	transition: .2s ease;
	cursor: pointer;
}
.l_head_search_select > span:hover {
	background-color: #f7ce5a;
}
.l_head_search_select > span:focus {
  border: none;
  outline: 0;
}
.l_head_search_select > span::after {
	display: block;
	position: absolute;
	top: 0;
	right: 10px;
	bottom: 0;
	transform: rotate(45deg);
	width: 6px;
	height: 6px;
	margin: auto;
	border-right: 2px solid #333;
	border-bottom: 2px solid #333;
	content: '';
}
.l_head_search_form {
	width: calc(100% - 180px);
	height: 40px;
	padding: 0 10px;
	border: none;
	border-radius: 0;
	background-color: #fff;
	font-size: 1.6rem;
	outline: 0;
}
.l_head_search_btn {
	position: relative;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 0 1px 1px 0;
	background-color: #ff9900;
	cursor: pointer;
	transition: .2s ease;
}
.l_head_search_btn.is_empty {
	background-color: #efefef;
	pointer-events: none;
}
.l_head_search_btn .l_search_icon {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 28px;
	height: 28px;
	margin: auto;
	fill: #333;
}
.l_head_search_btn:hover {
	background-color: #ef8400;
}
/* .l_head_cart */
.l_head_cart {
	position: relative;
}
.l_head_cart_btn {
	display: flex;
	position: relative;
	width: 160px;
	height: 40px;
	padding: 6px;
	border-radius: 1px;
	background-color: #efefef;
	align-items: center;
	cursor: pointer;
	transition: all .2s ease;
}
.l_head_cart_btn::after {
	display: block;
	position: absolute;
	top: 0;
	right: 10px;
	bottom: 0;
	transform: rotate(45deg);
	width: 6px;
	height: 6px;
	margin: auto;
	border-right: 2px solid #333;
	border-bottom: 2px solid #333;
	content: '';
}
.l_head_cart_btn:hover {
	background-color: #d5d5d5;
	color: #333;
}
.l_head_cart_mark {
	font-size: 1.2rem;
}
.l_cart_icon {
	transform: translateY(2px);
	width: 34px;
	height: 34px;
	fill: #333;
}
.l_head_cart_num {
	transform: translateY(4px);
	color: #d84242;
	font-weight: bold;
	font-size: 3.2rem;
}
.l_head_cart_num::after {
	display: none;
	font-size: 1.6rem;
	vertical-align: top;
	content: '＋';
}
.l_head_cart_num.over::after {
	display: inline-block;
}
/* .l_head_cart_check */
.l_head_cart_check {
	display: none;
	position: absolute;
	top: 60px;
	right: 0;
	z-index: 2;
	width: calc(100% + 70px);
	box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .3);
}
.l_head_cart_check::before {
	position: absolute;
	top: -2px;
	left: 50%;
	z-index: 2;
	transform: translateX(-50%) rotate(45deg) skew(0deg,0deg);
	width: 40px;
	height: 40px;
	box-shadow: 0 0 10px 0 rgba(163,163,163,0.50);
	background-color: #fff;
	content: '';
}
.l_head_cart_check::after {
  position: absolute;
  top: 0;
	left: 0;
  content: '';
	z-index: 3;
	width: 100%;
	height: 100%;
	background-color: #fff;
}
.l_head_cart_check_box {
	position: relative;
	z-index: 4;
	width: 100%;
	height: 100%;
	padding: 10px;
}
@media screen and (max-width: 896px) {
	/* .l_head_search */
	.l_head_search {
		width: 100%;
	}
	.l_head_search_select > a {
		height: 40px;
	}
	.l_head_search_form {
		width: calc(100% - 180px);
		height: 40px;
	}
	.l_head_search_btn {
		width: 40px;
		height: 40px;
	}
	.l_head_search_btn:hover {
		background-color: #ff9900;
	}
	/* .l_head_cart */
	.l_head_func .l_head_cart {
		display: none;
	}
	.l_menu_cart .l_head_cart_btn {
		width: auto;
		height: 30px;
	  padding: 5px;
	}
	.l_head_cart_btn:hover {
		background-color: #fefefe;
	}
	.l_menu_cart .l_head_cart_btn::after {
		right: 5px;
		transition: all .2s ease;
	}
	.l_menu_cart .l_head_cart_btn.open::after {
		transform: rotate(-135deg);
	}
	.l_menu_cart .l_head_cart .l_cart_icon {
		width: 20px;
		height: 20px;
	}
	.l_menu_cart .l_head_cart_num {
		transform: translateY(0);
		font-size: 2.2rem;
		padding-right: 10px;
	}
	.l_menu_cart .l_head_cart_num::after {
		font-size: 1rem;
	}
	/* .l_head_cart_check */
	.l_menu_cart .l_head_cart_check {
		top: 40px;
		right: -30px;
		width: calc(100% + 105px);
	}
}
@media screen and (max-width: 480px) {
	.l_head_search_select {
	  display: none;
	}
	.l_head_search.has_sp {
		display: block;
	}
	.l_head_search.has_sp .l_head_search_select {
		display: block;
	}
	.l_head_search_select > span {
		width: 100%;
	}
	.l_head_search_form {
		width: calc(100% - 40px);
		border-radius: 1px 0 0 1px;
	}
	.l_head_search_select > span::after {
	  top: 14px;
		bottom: inherit;
	}
	/* .amazonmenu */
	.amazonmenu {
		position: relative;
		top: 0;
	}
	.amazonmenu > ul {
		width: 100%;
		height: auto;
	  padding: 0;
		font-size: 1.4rem;
	}
	.amazonmenu::before {
		content: none;
	}
	.amazonmenu > ul li a {
	  padding: 1em;
		border-bottom: 1px solid #366BB3;
	  line-height: 1;
	}
	.amazonmenu ul {
		font-size: 1.4rem;
	}
	.amazonmenu ul li > div, .amazonmenu ul li > ul {
		position: relative;
		left: inherit;
		width: auto;
		height: auto;
		padding: 0;
		box-shadow: none;
	}
	.amazonmenu ul li > div p, .amazonmenu ul li > ul p {
		display: none;
	}
	.amazonmenu > ul li.hassub.selected::after {
		content: none;
	}
	.amazonmenu > ul li.hassub.selected div.issub > ul > li > a {
		background-color: #eafcff;
	}
	.amazonmenu ul li.hassub div.issub > ul > li > a {
		padding-left: 30px;
	}
	.amazonmenu ul li.hassub div.issub > ul > li > a::before {
		left: 15px;
	}
}

/*----------------------------------------------
	.l_side_cart_conts
---------------------------------------------*/
.l_side_cart_conts {
	position: absolute;
	top: 0;
	right: 0;
	transform: translateX(0);
	width: 230px;
	height: 100%;
	padding: 20px 15px;
	box-shadow: 0 -3px 5px 0 rgba(0, 0, 0, .2);
	background-color: #fff;
	transition: all .4s ease;
	overflow-y: auto;
}
.l_side_cart_conts .c_cart_check_list {
	height: auto;
}
@media screen and (max-width: 1279px) {
	.l_side_cart_conts {
		transform: translateX(100%);
	}
}

/*----------------------------------------------
	.l_related_prod
---------------------------------------------*/
.l_related_prod {
	padding: 20px 15px;
	background-color: #fff;
	border: 1px solid #e3e3e3;
}
.l_related_prod .c_cart_check_list {
	height: auto;
}

/*----------------------------------------------
	.l_pankuzu_conts
---------------------------------------------*/
.l_pankuzu_conts {
	margin-bottom: 25px;
	font-size: 1.2rem;
}
.l_pankuzu_conts a {
	position: relative;
	margin-right: 1.2em;
}
.l_pankuzu_conts a::after {
	display: inline-block;
	position: absolute;
	top: .4em;
	right: -0.7em;
	transform: rotate(-45deg);
	width: 4px;
	height: 4px;
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
	content: "";
}
@media screen and (max-width: 568px) {
	.l_pankuzu_conts {
		margin-bottom: 10px;
	}
}

/*----------------------------------------------
	.l_left_conts
---------------------------------------------*/
.l_left_conts {
	width: calc(100% - 230px);
}
.l_left_conts.has_2column {
	display: flex;
	justify-content: space-between;
}
.l_left_conts.has_narrow {
	width: calc(100% - 260px);
}
@media screen and (max-width: 896px) {
	.l_left_conts {
		width: 100%;
		height: 100%;
		margin-bottom: 1em;
	}
	.l_left_conts.has_narrow {
		width: 100%;
	}
	.l_left_conts.has_2column {
		flex-direction: column;
	}
}

/*----------------------------------------------
	.l_left_left_conts
---------------------------------------------*/
.l_left_left_conts {
	width: 40%;
	position: relative;
}
.l_left_left_conts::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	content: '';
}
@media screen and (max-width: 896px) {
	.l_left_left_conts {
		width: 100%;
    height: 60vw;
		margin-bottom: 20px;
	}
}

/*----------------------------------------------
	.l_left_center_conts
---------------------------------------------*/
.l_left_center_conts {
	/*max-width: calc(100% - 640px);*/
	width: calc(60% - 30px);
}
@media screen and (max-width: 896px) {
	.l_left_center_conts {
		width: 100%;
	}
}

/*----------------------------------------------
	.l_right_conts
---------------------------------------------*/
.l_right_conts {
	width: 200px;
}
.l_right_conts.has_narrow {
	width: 240px;
}
.l_right_conts .c_cart_check_list {
	height: auto;
}
@media screen and (max-width: 896px) {
	.l_right_conts {
		width: 100%;
	}
	.l_right_conts.has_narrow {
		width: 100%;
	}
}

/*----------------------------------------------
	.l_main_conts
---------------------------------------------*/
.l_main_conts.has_main_top {
	position: relative;
}
.l_column_wrap .l_main_conts {
	width: calc(100% - 219px);
}
@media screen and (max-width: 896px) {
	.l_column_wrap .l_main_conts {
		width: 100%;
	}
}
@media screen and (max-width: 568px) {
}

/*----------------------------------------------
	.l_slider
---------------------------------------------*/
.l_slider {
	height: 520px;
}

/*----------------------------------------------
	.l_side_conts
---------------------------------------------*/
.l_side_conts {
	width: 189px;
}
.l_side_ttl {
	padding: .5em .8em;
	background-color: #f6f6f6;
	font-weight: bold;
	font-size: 1.5rem;
}
.l_side_box {
	padding: .8em .8em 20px;
}
.l_side_list.has_side_hide {
	display: none;
}
.l_side_list li {
	padding: 4px 0;
}
.l_side_list > li.second {
	padding-left: 15px;
}
.l_side_more {
	margin-top: 10px;
	color: #4371d0;
	text-align: right;
	cursor: pointer;
}
.l_side_more_arrow {
	padding-left: 13px;
	display: inline-block;
	position: relative;
}
.l_side_more_arrow:hover {
	color: #d84242;
}
.l_side_more_arrow::before {
	position: absolute;
	top: 4px;
	left: 0;
	transform: rotate(-45deg);
	width: 5px;
	height: 5px;
	border-left: 2px solid #333;
	border-bottom: 2px solid #333;
	content: '';
}
.l_side_more_arrow.open::before {
	transform: rotate(135deg);
	top: 7px;
}
@media screen and (max-width: 896px) {
	.l_side_conts {
		display: none;
	}
}

/*----------------------------------------------
  .l_purchaselist_box
---------------------------------------------*/
.l_purchaselist_box {
	display: flex;
	flex-direction: column;
}
.l_purchaselist_box:not(:first-child) { margin-top: 1em; }
.l_purchaselist_box:not(:last-child) { margin-bottom: 1em; }
.l_purchaselist_box_top {
	padding: 1.6em;
	background: #f5f5f5;
	border: 1px solid #e3e3e3;
}
.l_purchaselist_box_bottom {
	height: 100%;
	padding: 1em 1.6em;
	border-right: 1px solid #e3e3e3;
	border-bottom: 1px solid #e3e3e3;
	border-left: 1px solid #e3e3e3;
}
.l_purchaselist_box_status {
	display: flex;
	align-items: flex-start;
}
@media screen and (max-width: 896px) {
	.l_purchaselist_box_top {
		padding: 10px;
	}
	.l_purchaselist_box_bottom {
		padding: 10px;
	}
	.l_purchaselist_box_status {
		flex-direction: column;
	}
}

/*----------------------------------------------
  .l_footer_area
---------------------------------------------*/
.l_footer_area {
	padding: 30px 0;
	background-color: #f5f5f5;
	color: #333;
}
#top .l_footer_area {
	position: relative;
	padding-top: 50px;
}
#top .l_footer_area::before {
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	height: 20px;
	background-color: white;
	content: "";
}


/* ↓↓↓青背景フッター用↓↓↓ */
.l_footer_area.has_blue {
	background-color: #366BB3;
}
.l_footer_area.has_blue .l_footer_ttl,
.l_footer_area.has_blue .l_footer_link a,
.l_footer_area.has_blue .l_footer_company_info,
.l_footer_area.has_blue .l_footer_company_name,
.l_footer_area.has_blue .holiday-string {
	color: white;
}
#top .l_footer_area.has_blue::before {
	content: none;
}
/* ↑↑↑青背景フッター用↑↑↑ */


.l_footer_area .l_wrap {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.l_footer_left {
	display: flex;
}
.l_footer_box {
	padding-right: 20px;
}
.l_footer_box:not(:first-child) {
	padding-left: 20px;
	border-left: 1px solid #374C6a;
}

/* ↓↓↓青背景フッター用↓↓↓ */
.l_footer_area.has_blue .l_footer_box:not(:first-child) {
	border-left: 1px solid white;
}
/* ↑↑↑青背景フッター用↑↑↑ */

.l_footer_ttl {
	margin-bottom: 10px;
	font-weight: bold;
}
.l_footer_link a {
	color: #333;
	font-size: 1.2rem;
	transition: all .2s ease;
}
.l_footer_link a:hover {
	opacity: .6;
}
.l_footer_link.has_2cloumn {
	columns: 2;
}
/* .l_footer_right {
	text-align: right;
} */
.l_footer_calendar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 20px;
}
.l_footer_company_info {
	display: flex;
	justify-content: space-between;
}
.l_footer_company_name {
	text-align: right;
}
.l_footer_bnr {
	display: inline-block;
	width: 124px;
	margin-bottom: 15px;
	/* background-color: #fff; */
}
@media screen and (max-width: 896px) {
	.l_footer_area {
		padding: 20px 0;
	}
	.l_footer_area .l_wrap,
	.l_footer_left {
		flex-direction: column;
	}
	.l_footer_area .l_wrap {
		align-items: inherit;
	}
	.l_footer_box {
		padding-right: 0;
	}
	.l_footer_box:not(:first-child) {
		padding-left: 0;
		border-left: none;
	}
	.l_footer_box:not(:last-child) {
		margin-bottom: 20px;
		padding-bottom: 20px;
		padding-left: 0;
		border-bottom: 1px solid #374C6a;
		border-left: none;
	}
	.l_footer_bnr {
		margin: 20px 0 0;
	}
	.l_footer_calendar {
		margin-top: 20px;
	}
}
@media screen and (max-width: 480px) {
	.l_footer_calendar {
		flex-direction: column;
		margin-top: 20px;
	}
	.l_footer_calendar > .c_calendar {
		margin-bottom: 20px;
	}
	.l_footer_company_info {
		flex-direction: column;
	}
	.l_footer_company_name {
		text-align: center;
	}
	.l_footer_right {
		text-align: center;
	}
}

/*----------------------------------------------
  .l_copyright
---------------------------------------------*/
.l_copyright {
	margin-top: 10px;
	font-size: 1.2rem;
}
@media screen and (max-width: 896px) {
	.l_copyright {
		text-align: center;
	}
}

/*----------------------------------------------
  .l_pagetop
---------------------------------------------*/

/*----------------------------------------------
	.l_address_lists
---------------------------------------------*/
.l_address_list {
	margin-bottom: 20px;
}

/*----------------------------------------------
	.l_add_btn
---------------------------------------------*/
.l_add_btn {
  margin-top: 20px;
	margin-bottom: 40px;
}
@media screen and (max-width: 896px) {
	.l_add_btn {
	  margin-top: 10px;
		margin-bottom: 20px;
	}
}

/*----------------------------------------------
	.l_control_btns
---------------------------------------------*/
.l_control_btns {
	display: flex;
	margin-top: 40px;
}
.l_control_btn:nth-child(1) {
	flex: 1;
	margin-right: 1em;
}
.l_control_btn:nth-child(2) {
	flex: 3;
}
@media screen and (max-width: 896px) {
	.l_control_btns {
		margin-top: 20px;
	}
}

/*----------------------------------------------
	.l_form_box
---------------------------------------------*/
.l_form_box {
  border-top: 1px solid #e3e3e3;
	padding: 1.6em 0;
}
.l_address_lists {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.l_address_lists.list_view {
	flex-direction: column;
}
.l_address_list {
	width: 49%;
}
.l_address_lists.list_view .c_address_list_btn {
	float: left;
	margin-right: 1em;
}
.l_address_lists.list_view .l_address_list {
	width: 100%;
}
/* @media screen and (max-width: 896px) {
	.l_form_box {
		border-top: none;
	}
} */

/*----------------------------------------------
	.l_form_credit_card_info_box
---------------------------------------------*/
.l_form_credit_card_info_box {
	display: flex;
	margin-bottom: 1.6em;
	justify-content: space-between;
}
.l_form_credit_card_info_box_item {
	width: 49%;
}
@media screen and (max-width: 896px) {
	.l_form_credit_card_info_box {
		flex-direction: column;
	}
	.l_form_credit_card_info_box_item {
		width: 100%;
	}
	.l_form_credit_card_info_box_item:nth-child(1) {
		margin-bottom: 1.6em;
	}
}

/*----------------------------------------------
	.l_form_expiration_date_and_security_code_box
---------------------------------------------*/
.l_form_expiration_date_and_security_code_box {
	display: flex;
	margin-bottom: 1.6em;
}
.l_form_expiration_date_and_security_code_box_item.is_security_code {
	margin-left: 20px;
}

/*----------------------------------------------
	.l_form_postal_code_box
---------------------------------------------*/
.l_form_postal_code_box {
	display: flex;
}

/*----------------------------------------------
	書類（印刷ページ）関係
---------------------------------------------*/
/*  .l_document_tbl
------------------------------------- */
.l_document_tbl {
	margin-top: 30px;
}
#quotation .l_document_tbl {	
	margin-bottom: 10px;	
}

/*  .l_document_remarks
------------------------------------- */
.l_document_remarks {
	margin-top: 36px;
}

/*  .l_document_summary
------------------------------------- */
.l_document_summary {
	display: flex;
	justify-content: space-between;
}
.l_document_summary:not(:first-child) { margin-top: 30px; }
.l_document_summary:not(:last-child) { margin-bottom: 30px; }
.l_document_summary_item1,
.l_document_summary_item2 {
	width: 42%;
}
.l_document_summary_item2 > img {
	width: 50%;
}
#quotation .l_document_summary_item2 > img {	
	width: 50%;	
}
.l_document_summary_item1 {
	display: flex;
	flex-direction: column;
}
.l_document_summary_total_price {
	margin-top: auto;
}
@media screen and (max-width: 896px) {
	.l_document_summary {
		flex-direction: column;
	}
	.l_document_summary_item1,
	.l_document_summary_item2 {
		width: 100%;
	}
	.l_document_summary_item2 {
		margin-top: 2em;
	}
	.l_document_summary_total_price {
		margin-top: 2em;
	}
  #quotation .l_document_summary_item2 > img {	
    width: 50%;	
  }
}


/*  .l_lst_annotation
------------------------------------- */
.l_lst_annotation {
	padding: .6em;
}

/*----------------------------------------------
	ログイン関係
---------------------------------------------*/
.l_login_box {
	margin-bottom: 1.4em;
	padding: 1.4em;
	border: 1px solid #E3E3E3;
}
.l_login_box_privacy_policy {
	margin-top: 1em;
	margin-bottom: 1.4em;
	padding: 1em;
	border: 1px solid #E3E3E3;
}
.l_login_box_privacy_policy_txt {
	margin-bottom: 1.4em;
}
.l_login_box_privacy_policy_btn {
	text-align: center;
}

/*----------------------------------------------
	マイリスト
---------------------------------------------*/
.l_mylist_header {
	display: flex;
	margin: 1em 0;
	padding-top: 2em;
	border-top: 1px solid #E3E3E3;
	justify-content: space-between;
}
/*----------------------------------------------	
	注文履歴	
---------------------------------------------*/	
.l_purchaselist_header {	
	display: flex;	
	margin: 1em 0;	
	padding-top: 2em;	
	border-top: 1px solid #E3E3E3;	
	justify-content: flex-start;	
  align-items: flex-end;	
}	
@media screen and (max-width: 568px) {	
	.l_purchaselist_header {	
		display: block;	
		margin: 1em 0;	
		padding-top: 2em;	
		border-top: 1px solid #E3E3E3;	
		justify-content: space-between;	
	}	
  .l_purchaselist_header_box{	
    margin-bottom: 10px;	
  }	
}