/* root */
:root {
	--bag-color: #617e19;
	--bag2-color: #516a12;
	--shuin-color: #1a93c8;
	--shuin2-color: #1584b4;
	--calendar-color: #0800a5;
	--calendar2-color: #0032a5;
	--pouch-color: #143d5e;
	--pouch2-color: #2d5f88;
	--oshikama-color: #5c1484;
	--oshikama2-color: #55107c;
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝　top　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
h1.title_bag {
	padding: .5em 0 .5em .75em;
	color: var(--bag-color);/*文字色*/
	background: #e7e7e7;/*背景色*/
	border-left: solid 5px var(--bag-color);/*左線*/
	border-bottom: solid 3px #d7d7d7;/*下線*/
	border-top: solid 1px #f4f4f4;
	border-right: solid 1px #f4f4f4;
	margin: 30px 0 10px 0;
	font-size: 20px;
	font-weight: bold;
}

h2.title_bag {
	position: relative;
	padding: .5em .75em .5em 2.5em;
	background-color: var(--bag-color);
	color:#FFF;
	font-size:16px;
	margin:3px 0 0 10px;
	font-weight: bold;
}
h2.title_bag:before {
	margin:0 10px;
	font-family: "Font Awesome 5 Free";
	content: "\f290";
	display: inline-block;
	line-height: 40px;
	position: absolute;
	padding: 0em;
	color: white;
	background: var(--bag-color);
	font-weight: 900;
	width: 40px;
	text-align: center;
	height: 40px;
	line-height: 40px;
	left: -1.35em;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	border-radius: 50%;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.50);
}
h1.title_pouch {
	padding: .5em 0 .5em .75em;
	color: var(--pouch-color);/*文字色*/
	background: #e7e7e7;/*背景色*/
	border-left: solid 5px var(--pouch-color);/*左線*/
	border-bottom: solid 3px #d7d7d7;/*下線*/
	border-top: solid 1px #f4f4f4;
	border-right: solid 1px #f4f4f4;
	margin: 30px 0 10px 0;
	font-size: 20px;
	font-weight: bold;
}

h2.title_pouch {
	position: relative;
	padding: .5em .75em .5em 2.5em;
	background-color: var(--pouch-color);
	color:#FFF;
	font-size:16px;
	margin:3px 0 0 10px;
	font-weight: bold;
}
h2.title_pouch:before {
	margin:0 10px;
	font-family: "Font Awesome 5 Free";
	content: "\f658";
	display: inline-block;
	line-height: 40px;
	position: absolute;
	padding: 0em;
	color: white;
	background: var(--pouch-color);
	font-weight: 900;
	width: 40px;
	text-align: center;
	height: 40px;
	line-height: 40px;
	left: -1.35em;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	border-radius: 50%;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.50);
}

h2.title_shuin {
	position: relative;
	padding: .5em .75em .5em 2.5em;
	background-color: var(--shuin-color);
	color:#FFF;
	font-size:16px;
	margin:3px 0 0 10px;
	font-weight: bold;
}
h2.title_shuin:before {
	margin:0 10px;
	font-family: "Font Awesome 5 Free";
	content: "\f518";
	display: inline-block;
	line-height: 40px;
	position: absolute;
	padding: 0em;
	color: white;
	background: var(--shuin2-color);
	font-weight: 900;
	width: 40px;
	text-align: center;
	height: 40px;
	line-height: 40px;
	left: -1.35em;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	border-radius: 50%;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.50);
}

h2.title_calendar {
	position: relative;
	padding: .5em .75em .5em 2.5em;
	background-color: var(--calendar-color);
	color:#FFF;
	font-size:16px;
	margin:3px 0 0 10px;
	font-weight: bold;
}
h2.title_calendar:before {
	margin:0 10px;
	font-family: "Font Awesome 5 Free";
	content: "\f518";
	display: inline-block;
	line-height: 40px;
	position: absolute;
	padding: 0em;
	color: white;
	background:  var(--calendar2-color);
	font-weight: 900;
	width: 40px;
	text-align: center;
	height: 40px;
	line-height: 40px;
	left: -1.35em;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	border-radius: 50%;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.50);
}

h2.title_oshikama {
	position: relative;
	padding: .5em .75em .5em 2.5em;
	background-color: var(--oshikama-color);
	color:#FFF;
	font-size:16px;
	margin:3px 0 0 10px;
	font-weight: bold;
}
h2.title_oshikama:before {
	margin:0 10px;
	font-family: "Font Awesome 5 Free";
	content: "\f518";
	display: inline-block;
	line-height: 40px;
	position: absolute;
	padding: 0em;
	color: white;
	background:  var(--oshikama2-color);
	font-weight: 900;
	width: 40px;
	text-align: center;
	height: 40px;
	line-height: 40px;
	left: -1.35em;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	border-radius: 50%;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.50);
}
h1.title_oshikama {
	padding: .5em 0 .5em .75em;
	color: var(--oshikama-color);/*文字色*/
	background: #e7e7e7;/*背景色*/
	border-left: solid 5px var(--oshikama-color);/*左線*/
	border-bottom: solid 3px #d7d7d7;/*下線*/
	border-top: solid 1px #f4f4f4;
	border-right: solid 1px #f4f4f4;
	margin: 30px 0 10px 0;
	font-size: 20px;
	font-weight: bold;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝　bonji-bag　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.order {
	background:#f3f3f3;
}

.bag_shohinareab {
	background:#e9edfc;
	padding:0px 15px;
}
.bag_shohinareac {
	background:#cce7d1;
	padding:0px 15px;
}

.bag_image {
	max-width:450px;
	margin:3px auto;
	/*margin-right:auto;*/
	/*margin-left:auto;*/
	/*padding-top:50px;*/
}
.bg_gray {
	background:#f3f3f3;
	padding:1.5em 0;
	margin:0;
}
.bg_gray2 {
	background:#a6a6a6;
	padding:1.5em 0;
	margin:0;
}
.bg_gray3 {
	background:#b5b5b5;
	padding:1.5em 0;
	margin:0;
}
.bg_gray4 {
	background:#eeeeee;
	padding:1.5em 0;
	margin:0;
}
.bag_p {
	text-align:center;
	font-size:1.2rem;
	background:#cc0000;
	color:#fff;
	padding:6px;
	margin-bottom:5px;
}
.bag_p2b {
	background:#e9edfc;
	text-align:center;
	border-top:solid 1px #333;
	border-bottom:solid 1px #333;
	margin:5px 0px;
}
.bag_p2c {
	background:#cce7d1;
	text-align:center;
	border-top:solid 1px #333;
	border-bottom:solid 1px #333;
	margin:5px 0px;
}
.bn_hover a:hover {
	opacity:0.6;
}
.bag_select {
/*	color:#c00;*/
/*	margin-bottom:3px;*/
	margin:0 0 3px 0;
	padding: 5px 10px;
	font-size: 1.1em;
	font-weight: bold;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
/*	background:#e08e0e;*/
	background:#7ca626;
	color:#fff;
}
.pouch_select {
/*	color:#c00;*/
/*	margin-bottom:3px;*/
	margin:0 0 3px 0;
	padding: 5px 10px;
	font-size: 1.1em;
	font-weight: bold;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	background:#b0a016;
	color:#fff;
}


.bag_bonjitext {
	display:inline;
	color:#333;
}
.bag_bonjitextsub {
	padding:5px 0 0 10px;
	font-size:0.9em;
}
.text9 {
	font-size:0.9em;
}
.text8 {
	font-size:0.8em;
}

.bag_title {
/*	padding: 1rem 2rem;*/
	padding: 10px 15px;
	color: #fff;
/*	background-image: -webkit-gradient(linear, left top, right top, from(#f83600), to(#f9d423));*/
/*	background-image: -webkit-linear-gradient(left, #f83600 0%, #f9d423 100%);*/
/*	background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%);*/
	background-image: -webkit-gradient(linear, left top, right top, from(#0d0d7b), to(#3d3dc0));
	background-image: -webkit-linear-gradient(left, #0d0d7b 0%, #3d3dc0 100%);
	background-image: linear-gradient(to right, #0d0d7b 0%, #3d3dc0 100%);
}

table.bag_table {
	border-collapse: collapse;
	width: 100%;
	margin-left:auto;
	margin-right:auto;
	margin-top:15px;
}
table.bag_table th,
table.bag_table td {	/*買い物カゴ表の項目名部のBG*/
	padding: 5px;
	border: 1px solid #000066;	/*★★★強めの濃-C75614*/
}
table.bag_table th {
	background-color: #C5ED9C;	/*★★★薄-FFC165*/
	text-align: center;
	width: 25%;
}
@media screen and (max-width: 600px) {/*400pxから500pxへ：なんで400pxにしてたか忘れた…大丈夫なら600pxぐらいに */
	table.bag_table {
		width:100%;
	}
	table.bag_table td {
		display: block;
	}
	table.bag_table th {
		display: block;
		border-top: 1px solid #000066;	/*★★★強めの濃-C75614*/
		border-bottom: none;
		width: 100%;
	}
}

.shopping_btn_bag {
	display: inline-block;
	padding: 10px 15px;
	border: 1px solid var(--bag-color);
	border-radius: 5px;
	text-decoration: none;
	background-color: var(--bag-color);
	background: -moz-linear-gradient(top, #617e19 0%, #85a633 100%);
	background: -webkit-linear-gradient(top, #617e19 0%,#85a633 100%);
	background: linear-gradient(to bottom, #617e19 0%,#85a633 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#617e19', endColorstr='#85a633',GradientType=0 );
	font-weight: bold;
	color: #FFF;
}

table.shuin_table {
	border-collapse: collapse;
	width: 100%;
	margin-left:auto;
	margin-right:auto;
	margin-top:15px;
}
table.shuin_table th,
table.shuin_table td {	/*買い物カゴ表の項目名部のBG*/
	padding: 5px;
	border: 1px solid #000066;	/*★★★強めの濃-C75614*/
}
table.shuin_table th {
	background-color: #a9e7f0;	/*★★★薄-FFC165*/
	text-align: center;
	width: 25%;
}
@media screen and (max-width: 600px) {/*400pxから500pxへ：なんで400pxにしてたか忘れた…大丈夫なら600pxぐらいに */
	table.shuin_table {
		width:100%;
	}
	table.shuin_table td {
		display: block;
	}
	table.shuin_table th {
		display: block;
		border-top: 1px solid #000066;	/*★★★強めの濃-C75614*/
		border-bottom: none;
		width: 100%;
	}
}

.shopping_btn_shuin {
	display: inline-block;
	padding: 10px 15px;
	border: 1px solid var(--shuin-color);
	border-radius: 5px;
	text-decoration: none;
	background-color: var(--shuin-color);
	background: -moz-linear-gradient(top, #19717e 0%, #3381a6 100%);
	background: -webkit-linear-gradient(top, #19717e 0%,#3381a6 100%);
	background: linear-gradient(to bottom, #19717e 0%,#3381a6 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19717e', endColorstr='#3381a6',GradientType=0 );
	font-weight: bold;
	color: #FFF;
}


table.pouch_table {
	border-collapse: collapse;
	width: 100%;
	margin-left:auto;
	margin-right:auto;
	margin-top:15px;
}
table.pouch_table th,
table.pouch_table td {	/*買い物カゴ表の項目名部のBG*/
	padding: 5px;
	border: 1px solid #000066;	/*★★★強めの濃-C75614*/
}
table.pouch_table th {
	background-color: #9ccced;	/*★★★薄-FFC165*/
	text-align: center;
	width: 25%;
}
@media screen and (max-width: 600px) {/*400pxから500pxへ：なんで400pxにしてたか忘れた…大丈夫なら600pxぐらいに */
	table.pouch_table {
		width:100%;
	}
	table.pouch_table td {
		display: block;
	}
	table.pouch_table th {
		display: block;
		border-top: 1px solid #000066;	/*★★★強めの濃-C75614*/
		border-bottom: none;
		width: 100%;
	}
}

.shopping_btn_pouch {
	display: inline-block;
	padding: 10px 15px;
	border: 1px solid var(--pouch-color);
	border-radius: 5px;
	text-decoration: none;
	background-color: var(--pouch-color);
	background: -moz-linear-gradient(top, #123d5d 0%, #3361a6 100%);
	background: -webkit-linear-gradient(top, #123d5d 0%,#3361a6 100%);
	background: linear-gradient(to bottom, #123d5d 0%,#3361a6 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#123d5d', endColorstr='#3361a6',GradientType=0 );
	font-weight: bold;
	color: #FFF;
}



h3.bonji_title {
	padding: .5em 0 .5em .5em;
	border-left: 7px solid var(--bag-color);
	margin: 3px 0;
	font-size: 1.1em;
	font-weight: bold;
	color: var(--bag-color);
}

.bonji_sub {
	margin:3px 10px;
	padding: 3px 5px;
	font-size: 0.9em;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	background:#e7f3bd;
	color:var(--bag-color);
}

/*=========================================================*/
.radio-img {
width:41px;
height:41px;
vertical-align:middle;
}
.sample-radio {
display:none;
}

.sample-radio:checked + label::before {
    box-sizing: border-box;
}
.sample-radio + label img:hover {
padding:0.2em;
border: 1px solid red;
}
.sample-radio:checked + label img {
width:41px;
height:41px;
padding:0.2em;
border: 2px solid red;
}

.color_select_bag_color {
display:flex;
flex-flow:row wrap;
align-items:center;
width:100%;
}
.color_select_bag_color div {
margin:0.3em;
}

#radiobox {
    display: flex;
    margin-bottom: 0.5rem;
    padding: 1rem 0.5rem;
}

.radio-area input[type=radio] {
    position: absolute;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.radio-area label {
    cursor: pointer;
    padding: 1rem;
margin-right:0.5rem;
    color: #fff;
    background-color: #6a94b7;
    transition: .5s;
border-radius:0.5rem;
}

.radio-area input[type=radio]:checked+label {
    background-color: #3079b5;
}


.bonji_radio {
	display:flex;
		padding:0.5rem;
	flex-flow:row wrap;
	align-items:center;
}
.bonji_radio > div {
	width:20%;
	text-align:center;
}
.bonji_radio div img {
	width:70px;
}
.bonji_shosai {
	border:solid 1px red;
	margin:0.5em;
	padding:0.5em;
}

.oshikama_notice {
	border:solid 1px red;
	margin:0.3em;
	padding:0.5em;
	font-size: 0.9rem;
}

/*==============*/