/* 0: /home/jpnsports/sports-drecome.jp/public_html/css/define.css */

@charset "Shift_JIS";
html {
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

body {
	-webkit-text-size-adjust: 100%;
}

div,
article,
aside,
button,
caption,
dd,
details,
dl,
dt,
figcaption,
figure,
footer,
form,
header,
hgroup,
iframe,
input,
li,
menu,
nav,
section,
select,
submit,
ul,
a,
table,
tr,
td,
textarea {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
button,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
	border: none;
	outline: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	border-spacing: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
textarea {
	display: block;
}

h1,
h2,
h3,
h4,
h5 {
	display: inline;
}

blockquote:after,
blockquote:before,
q:after,
q:before {
	content: '';
	content: none;
}

blockquote,
q {
	quotes: none;
}

body,
input,
select,
button {
/*	font-family: verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Maru Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;	*/
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
button,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
	font-size: 100%;
	font-style: normal;
	font-weight: inherit;
	text-decoration: none;
	line-height: 1.4em;
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
button,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
	margin: 0;
	padding: 0;
}

body {
	font-size: 75%;
}

.strong {
	font-weight: bold;
}

.None {
	display: none!important;
}

.both {
	clear: both;
}

ol,
ul,
dl {
	list-style: none;
}

button,
input,
select,
textarea {
	max-width: 100%;
}

caption,
th {
	text-align: left;
}

a:hover {
	text-decoration: underline;
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
button,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
	vertical-align: baseline;
}

th,
td {
	vertical-align: top;
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

.clearboth {
	clear: both;
}

*:after {
	display: inline;
}

* {
	transition-property: none;
	-webkit-transition-property: none;
	-moz-transition-property: none;
	-o-transition-property: none;
	-ms-transition-property: none;
	transition-duration: 0.2s;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	-o-transition-duration: 0.2s;
	-ms-transition-duration: 0.2s;
	transition-timing-function: ease-out;
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
}

input,
textarea {
	width: 100%;
}

select {
	padding-right: 0;
}

select:after {
	content: "";
	display: block;
	width: 50px;
}

input[type="submit"],
input[type="button"],
input[type="radio"] + label,
input[type="checkbox"] + label {
	cursor: pointer;
}

select {
	cursor: pointer;
}

input:focus,
textarea:focus {
	background-color: #ffc;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
img{
	width: 100%;
	max-width: 100%;
}
#wrapper form {
	width: 100%;
}

center {
	text-align: initial;
}

a {
	cursor : pointer;
	color: var(--main-link-color);
	text-decoration: underline;
}

a:hover {
	color: var(--main-link-hovercolor);
}

strong:before {
	content: "【";
}

strong:after {
	content: "】";
}

em {
	font-weight: bold;
}

input {
	border: 1px solid #ccc;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"] {
	background-repeat: no-repeat;
	background-position: 99% center;
	box-shadow: inset 2px 2px 2px #eee;
	box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
	border-radius: 4px;
}

select::-ms-expand{
	border:none;
}
select {
	border:1px solid #666;
}


input[type="checkbox"],
input[type="radio"] {
	height: inherit;
	line-height: inherit;
	border: none;
	display: inline;
	width: auto;
}

input.hidden,
textarea.hidden {
	display: none;
}

select option:disabled {
	background-color: #ccc!important;
	color: #999!important;
}

select[disabled],
select[disabled]:hover {
	opacity: 0.2!important;
	cursor: default!important;
	border-color: initial!important;
}

select:focus {
	outline-color: #000;
	outline-style: solid;
	outline-width: 2px;
}
input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="tel"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
textarea:disabled{
	background-color: #ddd;
}

fieldset {
	text-align: center;
	border: 2px solid var(--mainthema-background-color);
	padding: 15px 5px 27px;
}
legend{
	padding: 0 5px;
	background-color: #fff;
	font-size: 1.3em;
	font-weight: bold;
	color: var(--mainthema-background-color);
}

button {
	background: none;
}


/* 1: /home/jpnsports/sports-drecome.jp/public_html/css/style.min.css */

@charset "Shift_JIS";

/* 
20150424_S.Kawashima 20141229 
	-- ファイル分割 style.css --
*/

/******************************
▼▼▼以下、編集可能▼▼▼
******************************/

#wrapper {
	margin: 0;
	padding: 0;
	max-width: 100%;
	display: grid;
	min-height: 100vh;
	grid-template-rows: auto 1fr;
	place-items: start center;
	grid-template-columns: 1fr minmax(auto, var(--base_wrap_width)) 1fr;
	grid-template-areas:
		"a header b"
		"a mainwrap b"
		"footer footer footer";
}
#wrapper > * {
	width: 100%;
}

/* 全体 */


html, body {
	font-size: 12px;
	color: var(--main-font-color);
	background-color: #fff;
}

sup{
	font-size: .4em;
	vertical-align: super;
}
font {
    display: inline;
    vertical-align: initial!important;
}
a img {
	transition-property: transform, opacity;
	-webkit-transition-property: transform, opacity;
	-moz-transition-property: transform, opacity;
	-o-transition-property: transform, opacity;
	-ms-transition-property: transform, opacity;
}
a:hover img {
	opacity:0.7;
	transform: scale(1.1);
}


/* header */
	#header {
		grid-area: header;
		margin : 0 auto;
		overflow : hidden;
		margin-bottom:5px;
		padding: 0 5px;
	}
	#HeaderLabel {
		position:fixed;
		left:0;
		right:0;
		width:100%;
		background-color:var(--mainthema-background-color);
		z-index:100;
		padding : 0 10px;
		white-space: nowrap;
		color: var(--mainthema-font-color);
	}
	#HeaderLabel a {
		color : var(--mainthema-link-color);
    }
	#HeaderLabel a:hover {
		color : var(--mainthema-link-hovercolor);
	}
	#HeaderLabel svg {
		fill: var(--mainthema-link-color);
	}
	#HeaderLabel a:hover svg {
		fill: var(--mainthema-link-hovercolor);
	}
	#HeaderLabel .label_txt_1 {
		text-align:left;
		grid-area:sitename;
	}
	#HeaderLabel .label_txt_1 > span {
		/* display:inline-block;	*/
		width:100%;
	}
	#HeaderLabel .label_txt_2 {
		text-align:right;
	}
	#HeaderLabel .label_txt_3{
		grid-area: welcome
		text-align:right;
	}
	#HeaderLabel .label_txt_3 span {
		display : inline-block;
	}
	#HeaderLabel .label_txt_3 span:nth-child(2) {
		margin : 0 5px;
	}
	#HeaderLabel .label_icon_1 {
		grid-area:logo;
	}
	#HeaderLabel .label_menuicon{
		grid-area:menu;
	}
	#HeaderLabel .label_carticon{
		grid-area:cart;
	}
	#HeaderLabel .label_carticon svg {
		grid-area: 1/1/2/2;
	}
	#HeaderLabel .label_carticon .cart_userno{
		font-size: 10px;
		grid-area: 1/1/2/2;
		text-shadow: 1px 1px 0 #f00, -1px 1px 0 #f00, 1px -1px 0 #f00, -1px -1px 0 #f00;
		display: grid;
		width: 100%;
		height: 100%;
		place-items: end center;
		transform: translateY(-7px);
	}
	#HeaderLabel .label_searchicon{
		grid-area:search;
		text-decoration: none;
		font-size: 25px;
	}
	#HeaderLabel .label_txt_3 > span {
		margin: 0 5px;
		white-space: nowrap;
		overflow: hidden;
		display: inline-block;
		max-width:150px;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		margin:2px;
		vertical-align:middle;
	}
	#HeaderLabel .label_txt_3 a {
		position: relative;
	}
	#HeaderLabel .label_txt_3 a > svg {
		width:36px;
		height:36px;
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	#HeaderLabel ul{
		width: 100%;
		max-width: var(--base_wrap_width);
		display: grid;
		margin: 0 auto;
		grid-template-areas: "sitename welcome info";
		grid-template-columns: 1fr auto 70px;
		height: 30px;
		align-items: center;
	}

	#HeaderLabel ul li{
		display:none;
	}
	#HeaderLabel ul li > a {
		position:relative;
		color: var(--mainthema-link-color);
	}
	#HeaderLabel ul li > a >span.num_icon{
/*		position: absolute;
		background-color: #f00;
		width: 20px;
		line-height: 20px;
		text-align: center;
		border-radius: 50%;
		right: 2px;
		top: 2px;	*/
		display: grid;
		color: var(--mainthema-background-color);
		border: 3px solid var(--mainthema-background-color);
		font-weight: bold;
		background-color: white;
		width: 25px;
		height: 25px;
		border-radius: 50%;
		grid-column: 1/2;
		grid-row: 1/3;
		z-index: 2;
		place-items: center;
		transform: translate(12px, -12px);
		box-sizing: border-box;
	}
	#HeaderLabel #spMainMenuBoxBtn > i {
		font-size: 30px;
		transform: translateY(-5px) matrix(1.4, 0, 0, 1, 0, 0);
		grid-area: 1/1/2/2;
	}
	#HeaderLabel #spMainMenuBoxBtn p {
		font-weight: bold;
		font-size: 12px;
		transform: translateY(17px);
		grid-area: 1/1/2/2;
	}
/*
	#HeaderLabel #spMainMenuBoxBtn:before,
	#HeaderLabel #spMainMenuBoxBtn:after,
	#HeaderLabel #spMainMenuBoxBtn > span{
		content:"";
		display:block;
		background-color: #fff;
		width: 80%;
		height: 3px;
		display: block;
		border-radius: 4px;
		position: absolute;
		top: 0px;
		left: 0;
		right: 0;
		bottom: auto;
		margin: auto;
		opacity:1;
	}
	#HeaderLabel #spMainMenuBoxBtn:before {
		transform: translateY(8px) rotate(0deg);
	}
	#HeaderLabel #spMainMenuBoxBtn span {
		transform: translateY(16px) rotate(0deg);
	}
	#HeaderLabel #spMainMenuBoxBtn:after {
		transform: translateY(24px) rotate(0deg);
	}
	#HeaderLabel #spMainMenuBoxBtn p {
		font-weight: bold;
		font-size: 12px;
		transform: translateY(12px);
	}
	#HeaderLabel #spMainMenuBoxBtn.spmenu_on > span {
		opacity:0;
	}
	#HeaderLabel #spMainMenuBoxBtn.spmenu_on:before {
		transform: translate(-1px, 16px) rotate(45deg);
		width: 60%;
	}
	#HeaderLabel #spMainMenuBoxBtn.spmenu_on:after {
		transform: translate(-1px, 16px) rotate(-45deg);
		width: 60%;
	}
	#HeaderLabel #spMainMenuBoxBtn:hover span,
	#HeaderLabel #spMainMenuBoxBtn:hover::before,
	#HeaderLabel #spMainMenuBoxBtn:hover::after {
		background-color: var(--mainthema-link-hovercolor);
	}
*/
	#spMainMenuBox {
		display:none;
		width:100%;
		top:-100%;
		left:0;
		right:0;
		z-index:100;
		background-color:#fff;
		position:fixed;
		box-shadow: 0px 5px 5px #000;
		box-shadow: 0px 5px 5px rgba(0,0,0,0.8);
	}
	#spMainMenuBox .container{
		display:none;
		padding:0;
	}
	#spMainMenuBox ul{
		font-size: 18px;
		width: 100%;
		background-color:#fff;
		overflow:hidden;
   	}
	#spMainMenuBox ul li{
		vertical-align: middle;
		border-bottom: 1px solid #eee;
	}
	#spMainMenuBox ul a {
		position :relative;
		display: block;
		padding: 15px 20px;
		text-decoration:none;
		transition: all 0.2s linear;
		-webkit-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		-o-transition: all 0.2s linear;
		-ms-transition: all 0.2s linear;
		font-weight:bold;
	}
	#spMainMenuBox ul a::after {
		content: "";
		display: block;
		width: 10px;
		height: 10px;
		border-right: 2px solid var(--mainthema-background-color);
		border-top: 2px solid var(--mainthema-background-color);
		transform: rotate(45deg);
		position: absolute;
		right: 10px;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	#spMainMenuBox ul li.active > a {
		background-color: #4682b4;
		padding-left:30px;
		color: #fff;
		font-weight:bold;
	}
	#spMainMenuBox ul li.active > a:after {
		transform: rotate(-135deg);
		right: auto;
		left: 10px;
		border-color:#fff;
	}
	#spMainMenuBox ul li.inactive {
		display : none!important;
	}

	#spMainMenuBox ul li.active > .container{
		display: block;
	}
	#spMainMenuBox ul .num_icon{
		position: absolute;
		top: 0;
		bottom: 0;
		right: 30px;
		left: auto;
		margin: auto;
		color: #fff;
		background-color: #f00;
		height: 25px;
		line-height: 25px;
    		width: 25px;
		text-align: center;
		border-radius: 50%;
	}

	#spMainMenuBox .spmenu_status {
		font-size: 12px;
		padding: 20px 10px;
		border-bottom:1px solid #eee;
	}
	#spMainMenuBox .spmenu_status > a {
		text-decoration: underline;
	}
	#HeaderNavi {
		margin-top:30px;
		overflow : hidden /* 子要素のmargin-topが親要素と重ならないようにするため。 */
	}
	.sp_mainmenu_backwall {
		background-color: rgba(0,0,0,0.5);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		z-index: 100;
	}
@media screen and (max-width: 768px){
	#HeaderLabel {
		padding: 0 10px;
	}
	#HeaderLabel ul{
		grid-template-areas: "menu search logo tmp cart";
		grid-template-columns: 50px 50px auto 50px 50px;
		height:50px;
	}
	#HeaderLabel .tablet_menu {
		display:grid;
		height: 100%;
		place-items:center;
	}
	#HeaderLabel .tablet_menu a{
		display:grid;
		place-items:center;
		height: 100%;
		place-items: center;
		display: grid;
		margin: auto;
		width:100%;
		text-decoration: none;
	}
	#HeaderLabel .tablet_menu a.spmenu_on{
		color: var(--mainthema-link-hovercolor);
	}
	#HeaderLabel .tablet_menu a:spmenu_on::before,
	#HeaderLabel .tablet_menu a:spmenu_on::after{
		border-color: var(--mainthema-link-hovercolor);
	}
	#HeaderLabel .label_userno {
	    grid-area: logo;
	    place-items:end
	}
	#HeaderLabel .label_icon_1 a {
		width: 130px;
		grid-area:1/1/2/2;
	}
	#HeaderLabel .label_icon_1 .open_icon {
		width: 50px;
		grid-area:1/1/2/2;
		z-index: 1;
		transform: translateX(90px);
	}
	#HeaderLabel .label_txt_3 a {
		padding: 0;
		width: 40px;
		height: 40px
	}
	#HeaderLabel ul li > a{
		display: block;
/*		border: 2px solid #fff; */
		border-radius: 5px;
		text-align: center;
	}
	#HeaderNavi {
		margin-top: 50px;
	}
	#HeaderNavi.sp_search_open{
		margin-top: 104px;
	}
	#HeaderNavi #UserNavi{
		position: fixed;
		top: -100px;
		left: 0;
		right: 0;
		z-index: 100;
	}
	#HeaderNavi.sp_search_open #UserNavi{
		top: 50px;
	}
	#wrapper {
		display:block;
	}

}
@media screen and (min-width: 769px){
	#HeaderLabel .pc_menu {
		display: block;
	}
	#spMainMenuBox {
		display : none!important;
	}
}


/* CateFreeMenu */

#CateFreeMenu {
	margin: 10px auto;
	padding: 0 10px;
}


/* MainWrap */

#MainWrap {
	padding: 0 5px;
	display: grid;
	grid-template-areas:
		"bread bread bread"
		"side1 main side2";
/*	grid-template-columns: auto 1fr auto;	*/
/*	gap: 5px 0;	*/
	grid-template-columns: var(--base_left_width) 1fr var(--base_right_width);
	gap: 5px;
	grid-area: mainwrap;
}
#MainWrap.columns_type__1 {
	grid-template-areas: "bread"
						 "main";
	grid-template-columns: 1fr;
}
#MainWrap header {
	color: var(--mainthema-font-color);
}
#MainWrap header a{
	color: var(--mainthema-link-color)
}
#MainWrap header a:hover{
	color: var(--mainthema-link-hovercolor)
}
#MainWrap main{
	grid-area: main;
}
#SideMenuWrap_1{
	grid-area:side1;
/*	margin-right: 5px;	*/
/*	width: var(--base_left_width);	*/
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	align-content: flex-start;
}
#SideMenuWrap_2{
	grid-area:side2;
/*	margin-left: 5px;	*/
/*	width: var(--base_right_width);	*/
}

@media screen and (max-width: 960px){
	#MainWrap {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"bread bread"
			"side1 main"
			"side2 main";
		grid-template-rows: auto auto 1fr;
		grid-template-columns: var(--base_left_width) 1fr;
	}
	#MainWrap.columns_type__1 {
		grid-template-areas: "bread"
							 "main";
		grid-template-columns: 1fr;
	}
/*	#SideMenuWrap_2{
		margin-left: 0;
		margin-right: 5px;
	}	*/
}
@media screen and (max-width: 768px){
	#MainWrap {
		grid-template-columns: 1fr;
		grid-template-areas:
			"bread"
			"main"
			"side1"
			"side2";
	}
}

ul.category_list_menu {
	border: 1px solid #ccc;
	border-top: none;
}


select {
/*
	background-color: #eee;
	background: -ms-linear-gradient(top, #f9f9f9, #ccc);
	background: -moz-linear-gradient(top, #f9f9f9 0%, #ccc);
	background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#ccc));
	background: linear-gradient(to bottom, #f9f9f9, #ccc);
	border-radius: 4px;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
	border: 1px solid #aaa;
	padding: 0 .5em;
*/
	font-size: 18px;
	border-radius: 4px;
	border: 2px solid #0075ff;
	color: #333;
	padding: 0 5px;
}
input,
select {
	height: 40px;
	line-height: 1em;
	overflow: hidden;
}
input:hover{
	border-color: var(--mainthema-background-color)!important;
}
input{ padding:8px; }


/* 基板となるsection記事 */
/*
section > header,
#MainContents > header,
main > header,
nav > header {
*/
#MainWrap header {
	margin: 0;
	background-color: var(--mainthema-background-color);
	border: 1px solid var(--mainthema-background-color);
	color:var(--mainthema-font-color);
	line-height: 25px;
	text-align: center;
	font-weight: bold;
	overflow: hidden;
}

nav > header ~ ul {
	border:1px solid #ccc;
	border-top:none;
}

section > article,
main > article {
	border: 1px solid #ccc;
	padding: 10px;
	overflow: hidden;
}

section > header ~ article,
main > header ~ article {
	border-top: none;
}

/*
main header,main header * {
	color:var(--thema-font-color);
}
*/

/* セクションタイトル */

.sec_tit {
	background-color: #e9e9e9;
	border-bottom: 1px solid #ccc;
	line-height: 2;
	text-align: center;
	width: 100%;
}

#NewsLog dl{
	display: grid;
	grid-template-columns: auto 1fr;
}
/* リスト横並びClass */

ul.Side-by-side li {
	float: left;
	padding-right: 5px;
}

dl.Side-by-side dt,
dl.Side-by-side dd {
	float: left;
	padding-right: 5px;
}

dl.Side-by-side dt {
	clear: left;
}


/* ul・dlタイプ別(クラスで指定可能) */


/*
  クラス：disc_type   ディスク「・」付与
  クラス：square_type スクエア「■」付与
*/

dl.dd-disc_type,
dl.dd-square_type,
dl.dt-disc_type,
dl.dt-square_type,
ul.disc_type,
ul.square_type {
	margin-left: 0.5em;
}

dl.dd-disc_type > dd,
dl.dd-square_type > dd,
dl.dt-disc_type > dt,
dl.dt-square_type > dt,
ul.disc_type > li,
ul.square_type > li {
	padding-left: 1em;
}

dl.dd-disc_type > dd:before,
dl.dt-disc_type > dt:before,
ul.disc_type > li:before {
	content: "・";
	margin-left: -1em;
}

dl.dd-square_type > dd:before,
dl.dt-square_type > dt:before,
ul.square_type > li:before {
	content: "■";
	margin-left: -1em;
}

dl.dt-disc_type > dd,
dl.dt-square_type > dd {
	padding-left: 2em;
}


/* tableタイプ別(クラスで指定可能) */


/* クラス：cell_type_1 カラム1 */

table.cell_type_1 td,
table.cell_type_1 th {
	vertical-align: middle;
}

table.cell_type_2 td,
table.cell_type_2 th {
	vertical-align: bottom;
}

table.t_type_1 td {
	border: 1px dotted #999;
	display: block;
	padding: 10px;
	width: 100%;
}

table.t_type_1 th {
	display: block;
	width: 100%;
}


/**====================
///// Wrap ItemViewType /////
====================**/
/*
.viewcolumn_2 #SideMenuWrap_2 {
	float: inherit;
	margin:0;
	width: 25%;
	padding: 0 4px 0 0;
	clear: left;
}

.viewcolumn_2 #SideMenuWrap_1 {
	width: 25%;
}

.viewcolumn_2 #MainContents {
	width: 75%;
	margin-left: 25%;
}
*/

/******************/
/*
#MainWrap.viewcolumn_1,
#MainWrap.MODEmypage{
	grid-template-columns: 1fr;
	grid-template-areas:
		"bread"
		"main"
		"side1"
		"side2"
}
*/
/*
.viewcolumn_1 #SideMenuWrap_2 {
	width: 100%;
	float: none;
}

.viewcolumn_1 #SideMenuWrap_1 {
	display: none;
}

.viewcolumn_1 #SideMenuWrap_2 {
	display: none;
}

.viewcolumn_1 #MainContents {
	width: 100%;
	margin-left:0;
	margin-right:0;
	float:none;
}
*/

/**====================
///// iframe用 /////
====================**/

.iframe-wrap {
	width: 100%;
	padding: 75% 0 0 0;
	position: relative;
}

.iframe-wrap > iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 0;
}


/**====================
///// ヘッダー /////
====================**/


/*
	.top .card_mark {
			display          : block !important;
	}
	.card_mark img {
			display          : block;
	}
	.card_mark span {
			display          : none;
	}
*/

ul.breadcrumb {
	overflow: hidden;
	display: inline-block;
	vertical-align: middle;
}
.breadcrumb > li {
	float: left;
}

.breadcrumb > li:not(:nth-child(1)):before {
	content: "≫";
	display: inline;
	margin: 0 10px;
}

div.head_breadcrumb {
	grid-area: bread;
	font-size: 1.2em;
}


/**====================
///// 品番検索窓 /////
====================**/


/**** =背景＆アイコン= ****/


/*
		#SearchTop input.SearchForm			{ background-image:url("./img/search_bk.png");
										  background-position-x:98%; }
*/


/**** =余白= ****/


/*
		#SearchTop 						{ margin-top    : 4px;
										  padding       : 5px 10px; }
		#SearchTop .SearchForm,
		#SearchTop .SearchTitle 		{ margin-right  : 5px; }
		#SearchTop .search_button 		{ padding       : 0; }
		#SearchTop select 				{ margin        : 0;
										  padding       : 0; }
*/


/**** =幅・高さ= ****/


/*
		#SearchTop 						{ width         : 100%; }
		#SearchTop .search_button 		{ width         : 60px; }
		#SearchTop input 				{ max-width     : 120px;
										  width         : 40%; }
		#SearchTop .SearchForm			{ line-height   : 1em; 
										  height        : 25px; }
		#SearchTop .SearchTitle			{ line-height   : 25px; }
		#SearchTop .search_button 		{ line-height   : 21px;
										  height        : auto; }
*/


/**** =文字関連= ****/


/*
		#SearchTop .SearchTitle			{ font-weight   :bold; }
		#SearchTop						{ font-size     :13px; }
*/


/**** =フロート関連= ****/


/*
		#SearchTop .SearchForm 			{ float         : left; }
		#SearchTop .SearchTitle 		{ float         : left; }
*/


/**** =その他= ****/


/*
		#SearchTop .SearchForm 			{ display       : block; }
		#SearchTop .SearchTitle 		{ display       : block; }
*/


/**====================
///// サイドメニュー /////
====================**/


/* 左サイドメニュー */

#SideMenuWrap_1 > section,
#SideMenuWrap_1 > nav {
	/* margin-bottom: 5px; */
	width: 100%;
}


/* 右サイドメニュー */

#SideMenuWrap_2 section {
	margin-bottom: 5px;
}


/* クラス：CateMenu */

.CateMenu a {
	/*
		background-image    : url(../img/mark01.gif);
		background-position : left center;
		background-repeat   : no-repeat;
*/
	padding-left: 12px;
	position: relative;
}

.CateMenu li > ul > li > * > a:before {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	background-repeat: no-repeat;
	background-position: -40px -220px;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

.CateMenu li > ul > li:last-child > * > a:before {
	background-position: -60px -220px;
}
.CateMenu li.items_total {
	text-align: right;
	margin-top: 5px;
	line-height: 30px;
	border: none;
}
ul.category_list_menu ul {
	padding-left: 1em;
}


/* クラス：CateMenu > ul */

ul.category_list_menu {
	padding: 5px;
}

.MenuTitle * {
	font-weight: bold;
}

.MenuTitle {
/*	border: 1px solid #ccc;	*/
	padding: 0 10px;
/*	text-align: left;	*/
	width: 100%;
	margin-bottom: 0;
}

.MenuTitle a {
	padding-left: 0;
	color:#fff;
}


/* クラス：SideMenu */

.SideMenu a {
	display: block;
	line-height: 25px;
}


.SideMenu a h1,
.SideMenu a h2,
.SideMenu a h3,
.SideMenu a h4,
.SideMenu a h5 {
	-o-text-overflow: ellipsis;
	/*		display             : block; */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}


/**====================
///// メイン /////
====================**/

#CateFreeComent {
	margin:20px 0;
}

#ItemYahoo{
	clear: both;
	margin: 30px 10px;
}
#ItemExplanation {
	clear: both;
	margin:30px 10px;
}

#ItemPlan {
	color: #f00;
	line-height: 2em;
	text-align: left;
	font-size: 1.2em;
	font-weight: bold;
}

#ItemSubmitBox {
	margin: 40px 0;
	width: 100%;
	display: grid;
	gap: 30px;
}

#ItemSubmitBox > a {
	font-size: 20px;
}
#ItemView .itemview_headmsg {
	grid-area: headmsg;
}
#ItemView .itemview_msg_block {
	border: 2px solid #ccc;
	background-color: cornsilk;
	border-color: brown;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 2px 2px 1px #000;
	margin: 20px 0;
}

#ItemSubmitBox .stock {
	display: inline;
	padding: 0 10px;
}

#ItemTani {
	line-height: 2em;
	text-align: left;
}

#ItemView {
	border: none;
	margin: 0;
	margin-top: 4px;
	position: relative;
}

#ItemView .fixedjq_WhiteSpace_div {
	-moz-transition-property: all;
	-ms-transition-property: all;
	-o-transition-property: all;
	-webkit-transition-property: all;
	transition-property: all;
}

#ItemViewDataWrap{
	display: grid;
	gap: 0 10px;
	margin-bottom: 40px;	
	grid-template-columns: 300px 1fr;
	grid-template-rows: auto auto auto 1fr;
	grid-template-areas: "img maker"
						 "img info"
						 "img color"
						 "img size"
						 "img msg"
						 "headmsg headmsg";
}
.itemview_data__maker {
	grid-area: maker;
	font-size: 1.4em;
	font-weight: bold;
	margin: 10px 0px;
}
.itemview_data__info { grid-area: info; }
.itemview_data__price { grid-area: price; }

.itemview_data__info,
.itemview_data__price{
	display: grid;
	grid-template-columns: 100px 1fr;
	place-items: center start;
	gap: 5px 0;
/*	margin: 20px 0;	*/
}
.itemview_data__info > *,
.itemview_data__price > * {
	padding: 5px 0;
	display: flex;
	place-items: center;
}

.itemview_data__price .ItemPriceDsp{ margin:0; }

.itemview_data__img {
	grid-area: img;
	display: grid;
	place-items: start center;
	
}

.itemview_data__price > dd {
	grid-column: 2/3;
}
.itemview_data__img .proper__item_image__autoScroll {
	position: -webkit-sticky;
	position: sticky;
	top: 35px;
	width: 100%;
}


.itemview_data__colorvariation{
	grid-area: color;
	display: grid;
	gap: 5px;
}
.itemview_data__colorvariation .color_variation__title{
	font-size:1.2em;
	font-weight:bold;
}
.itemview_data__colorvariation .color_variation__text span::before{
	content:"▼";
	margin-right:0.2em;
}
.itemview_data__colorvariation .color_variation__ul {
	display: grid;
	grid-template-columns: repeat(auto-fill,50px);
	grid-template-rows: repeat(auto-fill, 50px);
	gap: 5px;
}
.itemview_data__colorvariation .color_variation__ul li .color_variation__a {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 2px;
	border: 1px solid #ccc;
}
.itemview_data__colorvariation .color_variation__ul li p.color_variation__a {
	border-width:3px;
	padding:0;
	border-color:var(--mainthema-background-color);
}

.itemview_data__colorvariation .color_variation__ul img{
	display:block;
}

.itemview_data__itemmsg {
	grid-area: msg;
	margin: 20px 0;
}



@media screen and (max-width: 768px){
	#ItemViewDataWrap {
		grid-template-columns: 1fr;
		grid-template-rows: initial;
		grid-template-areas: "img"
							 "maker"
							 "info"
							 "color"
							 "size"
							 "msg" 
							 "headmsg"; 
		gap:0;
		
	}
	#ItemViewImg{
		margin: 20px 0;
	}
	.itemview_headmsg,
	.itemview_data__itemmsg {
		font-size: 1.2em;
	}
}





#MainContents {
	border: none;
	margin-bottom: 10px;
}

#MainContents > section {
	margin-bottom: 5px;
}

#MainWrap .next_btn_wp {
	font-size: 25px;
	margin: 100px auto 100px auto;
	clear: both;
}
#MainWrap .cancel_btn_wp {
	font-size: 18px;
	margin: 40px 0;
}


/*
#MainWrap .next_btn_wp a,
#MainWrap .next_btn_wp button {
	width:100%;
	padding: 10px 30px;
	min-width: 260px;
}
*/
#MainWrap .next_btn_wp.double_btn {
	min-width: 600px;
}

#MainWrap .next_btn_wp.double_btn a {
	min-width: 49%;
}

#MainWrap .next_btn_wp.double_btn a:first-child {
	float: left;
}

#MainWrap .next_btn_wp.double_btn a:nth-child(2) {
	float: right;
}

/*商品マーク*/
.item_zaikostyle_mark_01{
	display: inline-block;
	background-color: #fff;
	border: 2px solid #fff;
	border-radius: 5px;
	padding: 3px;
	font-weight: bold;
}
.item_zaikostyle_mark_01.mark_01{
	border-color: cornflowerblue;
	color: #fff;
	background: cornflowerblue;
}
.item_zaikostyle_mark_01.mark_02 {
	border-color: purple;
	background: purple;
	color: #fff;
}
.item_zaikostyle_mark_01.mark_03{
	color: #fff;
	border-color: hotpink;
	background-color: hotpink;
}
.item_zaikostyle_mark_01.mark_05{
	border-color: sienna;
	color: #fff;
	background: sienna;
}
.item_zaikostyle_mark_01.mark_06 {
	color: #fff;
	border-color: blueviolet;
	background: blueviolet;
}
.item_zaikostyle_mark_01.mark_07 {
	border-color: coral;
	color: #fff;
	background: coral;
}
.item_zaikostyle_mark_01.mark_08 {
	border-color: teal;
	color: #fff;
	background: teal;
}
.item_zaikostyle_mark_01.mark_00{
	border: none;
	color: #f00;
}
.ItemData_dl {
	display: inline-block;
	font-size: 80%;
}
.ItemData_dl dd{
	margin-left:5px;
}
.ItemData_dl dd,
.Item_dl dd,
.kakaku_dl dd {
/*	float: left;	*/
}

.ItemData_dl dt,
.Item_dl dt,
.kakaku_dl dt {
	overflow: hidden;
}

.ItemList .zaiko_msg {
	margin-top:5px;
}
.ItemList .zaiko_msg .item_zaikostyle_mark_01 {
	margin-right:5px;
}

.ItemList .zaiko_msg > em {
	color:#f00;
}
.ItemHead {
	font-size: 12px;
	margin-bottom: 10px;
}

.itemview_data__info > dd:last-child a,
.page_now,
dd.price2_msg {
	font-weight: bold;
}

.Item_dl:not(.ItemOption) > dt {
	font-weight: bold;
}

.Item_dl:not(.ItemOption) > dt + dd {

}
/*
.Item_dl div {
	display: inline;
}
*/
.Item_dl .optthumb{
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	place-items: center start;
}
.Item_dl .optthumb .optthumb_img{
	display: grid;
	place-items: center;
	border: 1px solid #ccc;
}
.Item_dl .optthumb .optthumb_img img{
	display:block;;
	width:auto;
	max-height:75px;
}
.Item_dl .optthumb.optthumb_view img{
	max-height:2000px;
}
.Item_dl .optthumb.optthumb_view .optthumb_txt{
	margin: 10px 0 5px 0;
}

.Item_dl input,
.Item_dl select {
	width: 100%;
}

.Item_dl:after,
.kakaku_dl:after {
	clear: both;
	content: "";
	display: block;
	height: 0;
	visibility: hidden;
}

.Item_dl.itemview_data__info.item_mark:before {
	content: attr(data-item_mark);
	display: inline-block;
	border: 2px solid #f00;
	color: #f00;
	font-weight: bold;
	padding: 5px;
	margin-bottom: 6px;
	vertical-align: middle;
	float: left;
}

.SortSelect {
    margin: 20px 0;
}
/* ページ送り番号 */
.PageLink {
	display: flex;
	margin: 20px auto;
	border-spacing: 5px 0;
	justify-content: center;
/*	max-width: 450px;	*/
}
.PageLink label {
	float:left;
}
.PageLink a {
	text-decoration-color: var(--mainthema-link-color);
	color : var(--mainthema-link-color);
}
.PageLink a:hover {
	text-decoration-color: var(--mainthema-link-hovercolor);
	color : var(--mainthema-link-hovercolor);
}
.PageLink .page_number span {
	display: block;
	padding: 0 12px;
	line-height: 40px;
	border: 1px solid #000;
	margin: 0 5px;
	text-align:center;
}
.PageLink a.page_number span {
	background-color: var(--mainthema-background-color);
}
.PageLink .page_next,
.PageLink .page_prev {
	width: 80px;
}
.PageLink .page_prev span{
	margin-left:0;
	margin-right:5px;
	padding:0;
}
.PageLink .page_next span{
	margin-right:0;
	margin-left:5px;
	padding:0;
}

.PageLink .page_next > span:after {
	content: ">>";
}

.PageLink .page_prev > span:before {
	content: "<<";
}
@media screen and (max-width: 768px) {
	.PageLink {
		font-size:15px;
	}
	.PageLink .page_now span{
		margin: 0 20px;
		padding: 0 20px;
	}
	.PageLink a.page_number {
		display:none;
	}
	.PageLink a.page_prev,
	.PageLink a.page_next {
		display:table-cell;
	}
}
/*
.SortMenu {
	background-color: #fafafa;
	border-bottom: 1px solid #ccc;
	padding: 2px 5px;
}
*/

.SortMenu dd,
.SortMenu dt {
	float: left;
	margin-left: 5px;
}

.SortMenu dl {
	float: right;
}

.SortMenu dl dd:last-child span:after {
	content: "]";
}

.SortMenu dl dd:nth-child(2) span:before {
	content: "[";
}

.color-variation_link {
	font-weight: bold;
	line-height: 2em;
}

.item_tani {
	display: inline-block;
	font-size: .8em;
	line-height: 2em;
	text-indent: .5em;
}
/*
.kakaku_dl {
	margin: 10px 0;
}
*/
.kakaku_dl dt:after {
	content: ":";
}

.net_msg,
.price2_msg {
	color: #f00;
}

.receive_payment {
	font-size: 1.1em;
	font-weight: bold;
	letter-spacing: .1em;
	line-height: 2.5em;
}

.receive_payment:after {
	content: "≫";
}

.receive_payment:before {
	content: "≪";
}

.zaiko_info {
	text-align: left;
}

.zaiko_info > a {
	background-image: url(./img/information.gif);
	background-position: left center;
	background-repeat: no-repeat;
}

.zaiko_info a {
	color: #f00;
	padding: 0;
}

.Item_dl dt .optthumb:hover {
	position: relative;
}


/* 旧 */


/*	.Item_dl div:hover img {
		width                       : auto!important;
		position                    : absolute;
		bottom                      : 0;
		left                        : 0;
		right                       : 0;
		margin                      : 0 auto;
		-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.3);
		-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.3);
		-o-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.3);
		-ms-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.3);
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.3);
	}	*/


/* 新 */

.Item_dl dt .optthumb {
	display: inline-block;
	width: 50px;
	margin-right: 10px;
	vertical-align: middle;
/*	position: relative; */
	float:left;
	transition: .3s width;
	cursor:pointer;
}
.Item_dl dt .optthumb.optthumb_view {
	display:block;
	float:inherit;
	width:100%;
}


.Item_dl dt .optthumb img {
/*	max-width: 300px;
	max-height: 300px;	*/
	vertical-align: middle;
	margin-left: 10px;
}
/*
.Item_dl dt .optthumb:hover img {
	width: auto!important;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.3);
	-o-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.3);
	-ms-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.3);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.3);
	z-index: 1000;
}
*/
#ItemView .dragandrophandler {
	position: relative;
	display: block;
	border: 2px dotted #0B85A1;
	width: 100%;
	color: #92AAB0;
	margin-bottom: 10px;
	font-size: 200%;
	cursor: pointer;
}

#ItemView .dragandrophandler span {
	display: block;
	width: 100%;
	text-align: center;
	padding: 30px 0;
	font-size: 15px;
}

#dragandrophandler_INPUT {
	opacity: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	left: 0;
	top: 0;
	z-index: 5;
	cursor: pointer;
	font-size: 300px\9;
	/* IE10以下 */
}

#ItemView .dragandrophandler div {
	display: block;
}

#ItemView .progressBar {
	display: block;
	border: 1px solid #ddd;
	border-radius: 5px;
	overflow: hidden;
	margin: 0px 10px 0px 5px;
	vertical-align: middle;
}

#ItemView .progressBar div {
	/*    height: 100%;*/
	color: #fff;
	text-align: right;
	/*    line-height: 22px;*/
	/* same as #progressBar height if we want text middle aligned */
	padding: 4px 15px;
	width: 0;
	background-color: #0ba1b5;
	border-radius: 3px;
}

#ItemView .statusbar {
	display: table;
	border-top: 1px solid #A9CCD1;
	min-height: 25px;
	width: 100%;
	padding: 10px 10px 10px 10px;
}

#ItemView .statusbar > div:first-child {
	display: table-cell;
	width: 60%;
	vertical-align: middle;
}

#ItemView .statusbar > div:first-child:after {
	content: "";
	clear: both;
	display: block;
}

#ItemView .statusbar > div:nth-child(2) {
	display: table-cell;
}

#ItemView .statusbar:nth-child(odd) {
	background: #EBEFF0;
}

#ItemView .filename {
	display: block;
	float: left;
	width: 75%;
	vertical-align: middle;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#ItemView .filesize {
	display: block;
	float: right;
	width: 90px;
	color: #30693D;
	margin-left: 10px;
	margin-right: 5px;
	vertical-align: middle;
}

#ItemView .abort {
	display: block;
	float: right;
	background-color: #A8352F;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	display: inline-block;
	color: #fff;
	font-size: 13px;
	font-weight: normal;
	padding: 4px 15px;
	cursor: pointer;
	vertical-align: middle;
	border: 1px solid #ddd;
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
	#dragandrophandler_INPUT:not(:target) {
		font-size: 300px;
		;
		/* IE10 IE11に適用） */
	}
}

@media screen and (max-width: 768px) {
	#ItemView .statusbar > div {
		display: block!important;
		width: auto!important;
	}
	#ItemView .statusbar {
		display: block;
	}
	#ItemView .filename {
		display: block;
		width: auto;
		float: left;
		max-width: 100%;
	}
	#ItemView .filesize {
		display: block;
		width: auto;
		float: right;
	}
	#ItemView .progressBar {
		margin: 0;
	}
	#ItemView .progressBar div {
		width: 100%;
	}
	/*	#ItemView .abort { display:block;width:auto;float:right;margin-top:10px; } */
	#ItemView .statusbar:after {
		content: "";
		display: block;
		clear: both;
	}
}

/**====================
///// 商品陳列タイプ別css /////
====================**/
.ItemList {
	clear:both;
	margin-top:0;
}
.ItemList .ColumnType > li {
	border-radius: 4px;
	float: left;
	line-height: 1.2em;
	margin-bottom: 10px;
	margin-top: 10px;
	padding: 5px;
	text-align: center;
	width: 32%;
}
/*
.ItemList .ColumnType > li:nth-child(3n + 1) {
	clear: both;
}

.ItemList .ColumnType > li:nth-child(3n + 2) {
	margin-left: 2%;
}

.ItemList .ColumnType > li:nth-child(3n + 3) {
	float: right;
}

.ItemList .SingleType .ItemThumbnail a {
	padding: 10px 20px 10px 10px;
}

.ItemList .SingleType > li {
	border: 1px solid #ccc;
	border-radius: 10px;
	margin-bottom: 10px;
	padding: 5px;
}
.ItemList .SingleType > li:hover {
	border-color: var(--main-link-hovercolor);
}
.ItemList .SingleType > li:hover a {
	color: var(--main-link-hovercolor);
}
*/
.ItemList ul {
	display:grid;
	gap:10px;
	grid-template-columns:1fr;
}
.ItemList ul li {
	position: relative;
}
.ItemList .cookie_delete{
	cursor: pointer;
	position: absolute;
	top: 8px;
	right: 7px;
	color: var(--main-link-color);
	font-size: 11px;
	width: 80px;
	height: 30px;
	border: 1px solid #ccc;
	display: grid;
	place-items: center;
	border-radius: 5px;
	box-shadow: 1px 1px 1px black;
}
.ItemList .cookie_delete:hover{
	color: var(--main-link-hovercolor);
	border-color: var(--main-link-hovercolor);
}

.ItemList ul a {
	display: grid;
	border: 1px solid #ccc;
	border-radius: 10px;
	grid-template-areas: "img item";
	grid-template-columns: min(160px, 30%) 1fr;
	gap: 10px;
	padding:5px;
	text-decoration:none;
	background-color:#fff;
	position:relative;
	overflow:hidden;
}
.ItemList ul a:hover{
	color:initial;
}

.ItemList .ItemSymLabel {
	position: absolute;
	left: -46px;
	top: 13px;
	background-color: #f00;
	color: #fff;
	width: 150px;
	height: 24px;
	display: grid;
	place-items: center;
	transform: rotate(-40deg);
	font-weight: bold;
	box-shadow: 1px 1px 2px rgb(0 0 0 / 50%);
}

.ItemList .ItemThumbnail{
	grid-area:img;
	display:grid;
	place-items:center;
	max-width: 130px;
	margin: auto;
	user-select: none;
}
.ItemList .ItemThumbnail + div{
	grid-area:item;
}
.ItemList .ItemLinkName{
	font-size:18px;
	font-weight:bold;
	margin:0 0 10px 0;
	line-height:1.2em;
	text-decoration: underline;
	word-break: break-word;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
.ItemList .handling_4,
.ItemList .handling_6 {
	color: blue;
	font-weight: bold;
}
.ItemList .z_txt_em {
	color: black;
	font-weight: bold;
}
a:hover .ItemLinkName {
    color: var(--main-link-hovercolor);
}

.ItemPriceDsp{
	margin:15px 0;
	grid-template-columns: auto 1fr;
	display: grid;
	gap: 0 10px
}
.ItemPriceDsp .price_net{
	color: #ff0;
	background-color: #f00;
	border-radius: 5px;
	width: 68px;
	text-align: center;
}
.ItemPriceDsp p:last-child,
.ItemPriceDsp p:not(:first-child) {
	color: #f00;
	font-weight: bold;
	font-size: 1.2em;
	grid-column: 1/3;
}
.ItemPriceDsp p:last-child > span,
.ItemPriceDsp p:not(:first-child) > span {
	font-size:1.3em;
}


.ItemList ul > li > a:hover {
	border-color: var(--main-link-hovercolor);
}

.ItemList .itemlist_delete_form {
	color: #fff;
	font-size: 15px;
	max-width: 700px;
	top: 50px;
	width: 100%;
}

.ItemList .itemlist_delete_form .btn,
.ItemList .itemlist_delete_form form > p {
	text-align: center;
}

.ItemList .itemlist_delete_form .btn > a {
	border: 1px solid #fff;
	display: inline-block;
	line-height: 30px;
	margin: 10px;
	width: 100px;
}

.ItemList .itemlist_delete_form article {
	border: none;
	border-radius: 5px;
	box-shadow: 0 0 10px #fff;
	margin-bottom: 20px;
	padding: 10px;
}


.ItemList a.delete_btn {
	background-color: white;
	display: block;
	font-weight: bold;
	right: 5px;
	position: absolute;
	top: 5px;
	padding-left:10px;
	padding-right: 10px;
}

/*
.ItemList p.new_mark:before {
	background-image: url("upfile/fix/mark30x30.png");
	background-position: 0px -30px;
	content: "新商品";
	display: inline-block;
	height: 18px;
	position: absolute;
	right: 10px;
	text-indent: -9999px;
	top: 10px;
	width: 25px;
}
*/
.ItemLinkName.item_mark:before {
	content: attr(data-item_mark);
	position: absolute;
	right: 10px;
	top: 10px;
	border: 2px solid #f00;
	color: #f00;
	font-weight: bold;
	padding: 2px;
}

.ItemList p.new_pic_mark:after,
.ItemList p.pic_mark:after {
	background-image: url("upfile/fix/mark30x30.png");
	background-position: 0px 0px;
	content: "おすすめ商品";
	display: inline-block;
	height: 18px;
	position: absolute;
	right: 10px;
	text-indent: -9999px;
	top: 10px;
	width: 30px;
}

.ItemList p.new_pic_mark:before {
	background-image: url("upfile/fix/mark30x30.png");
	background-position: 0px -30px;
	content: "新商品";
	display: inline-block;
	height: 18px;
	position: absolute;
	right: 10px;
	right: 50px;
	text-indent: -9999px;
	top: 10px;
	width: 25px;
}
.pager_b_box {
	display: grid;
	grid-template-areas: "prev page next"
						 "prev text next";
	grid-template-columns: 80px 1fr 80px;
	place-items: center;
	background-color: #f6f6f6;
	padding: 10px;
	margin: 10px 0;
}
.pager_b_box .page_b_page {
	grid-area: page;
	font-size: 16px;
}
.pager_b_box .page_b_text {
	grid-area: text;
	display: flex;
	gap: 5px;
	overflow: hidden;
}
.pager_b_box .page_b_prev {
	grid-area: prev;
}
.pager_b_box .page_b_next {
	grid-area: next;
}
.pager_b_box .page_b_prev:before {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border-top: 2px solid var(--main-link-color);
	border-left: 2px solid var(--main-link-color);
	transform: rotate(-45deg) translate(2px ,2px);
	margin-right: 6px;
}
.pager_b_box .page_b_next:after {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border-top: 2px solid var(--main-link-color);
	border-right: 2px solid var(--main-link-color);
	transform: rotate(45deg) translate(-2px ,3px);
	margin-left: 6px;
}
.pager_b_box .page_b_button {
	width: 100%;
	height: 40px;
	border: 1px solid var(--main-link-color);
	display: flex;
	text-decoration: none;
	background-color: white;
	font-weight: bold;
	font-size: 15px;
	border-radius: 5px;
	justify-content: center;
	align-items: center;
}
.pager_b_box .page_b_button:hover,
.pager_b_box .page_b_button:hover:before,
.pager_b_box .page_b_button:hover:after {
	border-color: var(--main-link-hovercolor);
}

/**====================
///// NewsLog /////
====================**/

#NewsLog dl dt {
	float: left;
	width: 90px;
	clear: left;
}

#NewsLog dl dd {
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#NewsLog dl dd * {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/**====================
///// 商品画像itemview /////
====================**/

.ItemImg > a {
	display: block;
	margin-right: 20px;
}

#ItemView .thumb_pic {
	max-width: 35px;
	max-height: 35px;
}
.Item_dl.ItemOption {
	padding-top:20px;
}
.ItemOption dt{
	font-size: 1.2em;
	font-weight: bold;
}
.ItemOption dt.dticon:before{
	content: "\f14b";
	display:inline-block;
	font-family: "Font Awesome 5 Free";
	margin-right:5px;
	font-size:20px;
	text-align:center;
	vertical-align:middle;
}
.ItemOption dt small {
	min-width: 110px;
	color: #f00;
	font-size: 10px;
	float: right;
	text-align: right;
	flex-grow: 1;
}
.ItemOption dd {
	padding: 0;
	display: grid;
	gap: 5px;
}
.ItemOption dd:not(:last-child):after {
	content: "";
	display: block;
	margin: 15px auto 20px;
	width: 90%;
	border-width: 0 0 2px 0;
	border-style: solid;
}
.ItemOption dd .required_alert{
	display: block;
	color: #f00;
	font-weight: bold;
}
.ItemOption dd .opt_checkboxText{
	padding-top: 15px;
	padding-bottom: 15px;
	margin-left: 20px;
}
.ItemOption dd .opt_checkbox{
	display:block;
	border:4px double var(--mainthema-background-color);
	padding:10px;
	margin-top:5px;
}

.ItemOption dt {
	color: var(--mainthema-background-color);
	background-color: rgba(var(--mainthema-background-rgb), 0.2);
	border-left: var(--mainthema-background-color);
	margin-bottom:5px;
	display: -moz-box;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	/* align-items: center; */
	/* height: 40px; */
    padding : 5px;
}
.ItemOption dt:first-child {
    margin-top: 50px;
}

#ItemView .inquiries_in_advance > p{
	font-size: 16px;
	color: #f00;
	font-weight: bold;
	margin-bottom: 20px;
	word-break: keep-all;
}
#ItemView .inquiries_in_advance > a{
	max-width: 400px;
	margin: auto;
}

/**====================
///// SizeList(プロパー) /////
====================**/
/*
#SizeList .ItemOption dt {
	margin-top: 10px;
	background: linear-gradient(transparent 60%, #d6e1ff 40%);
}
*/
#SizeList .ItemOption dt {
	margin: 0;
}
#SizeList .ItemOption dd {
	padding: 5px 10px 40px 10px;
}
#SizeList .ItemOption dd::after {
	content: initial;
}
#SizeList .ItemOption dd a {
	margin: 0;
}
#SizeList .ItemOption .square_cell{
	display:inline-block;
	margin-right: 2em;
}
#SizeList .ItemOption .square_cell label {
	display:inline-block;
}
#SizeList .ItemOption .square_cell input[type="text"]{
	width:50px;
	text-align:right;
}
#SizeList .ItemOption .square_cell input[type="text"] + span {
	margin-left:.5em;
}
#SizeList .Itemsubmit-btn {
	background:to(#2E8B57);
	border:2px solid seagreen!important;
	border-radius:5px;
	box-shadow:4px 4px 4px rgba(0, 0, 0, 0.3);
	color:#fff;
	display:block;
	font-size:16px;
	font-weight:700;
	margin:20px 0;
	padding:10px;
	text-align:center;
	text-shadow:1px 1px #000;
	width:100%;
}

#SizeList .Itemsubmit-btn>span,#SizeList .submit-scroll>span {
	display:block;
	position:relative;
	width:100%;
}

#SizeList .Itemsubmit-btn>span:before {
	bottom:0;
	left:-246px;
	right:0;
	top:0;
}

#SizeList .Itemsubmit-btn>span:before,#SizeList .submit-scroll>span:before {
	background:url("/img/menu_icon.svg") no-repeat 0 -160px !important;
	content:"";
	display:block;
	height:40px;
	margin:auto;
	position:absolute;
	width:40px;
}

#SizeList .submit-scroll {
	-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.3);
	-ms-box-shadow:0 1px 1px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.3);
	-o-box-shadow:0 1px 1px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.3);
	background-color:#2E8B57;
	border:2px solid seagreen !important;
	border-radius:5px;
	bottom:135px;
	box-shadow:0 1px 1px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.3);
	color:#fff;
	display:block;
	font-size:15px;
	font-weight:700;
	padding:5px;
	position:fixed;
	right:20px;
	text-align:center;
	text-shadow:1px 1px #000;
	width:80px;
	z-index:200;
}

#SizeList .submit-scroll>span {
	height:80px;
}

#SizeList .submit-scroll>span:before {
	bottom:0;
	left:0;
	right:0;
}

#SizeList {
	display: grid;
	gap: 30px;
	margin-top: 40px;
	background: #ccc;
	padding: 30px 5px;
}
#SizeList .sizeList__ul {
	border:1px solid #ccc;
	box-shadow: 1px 1px 2px #000;
	background-color: white;
}
/*
#SizeList>ul.table-title>li {
	border-top:1px solid #ccc;
	font-weight:700;
	text-align:center;
	font-size: 1.2em;
}
*/
#SizeList .sizeList__ul > li {
	padding:10px;
}
#SizeList .sizeList_submit{
	display: flex;
	gap: 10px 20px;
	place-items: start;
	border-top: 1px dashed #ccc;
	margin-top: 20px;
	padding-top: 20px;
	flex-wrap: wrap;
}

#SizeList .kazubox{
	display: grid;
	width: 130px;
	grid-template-columns: 40px 1fr 40px;
	grid-template-rows: 24px 40px;
}
#SizeList .cartbox {
	grid-template-rows: minmax(24px, auto) 40px;
	display: grid;
	place-items: center start;
}
#SizeList .cartbox .btn_type_cart {
	font-size: 15px;
	font-weight: bold;
	padding: 0 20px;
	border: 4px solid #a50000;
	border-radius: 5px;
	height: 100%;
	display: flex;
	gap: 3px;
	place-items: center;
	background-color: red;
	color: #fff;
	text-decoration: none;
	cursor:pointer;
}
#SizeList .cartbox .btn_type_cart.disabled {
	filter: grayscale(1);
	opacity: 0.4;
	cursor: initial;
}

#SizeList .kazubox .sizeList_syoutitle{
	grid-column:1/4;
}
#SizeList .kazubox input[type="number"]{
	height: 100%;
	border-radius:0;
	text-align:right;
	-moz-appearance:textfield;
}
#SizeList .kazubox input[type="number"]::-webkit-inner-spin-button,
#SizeList .kazubox input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
	-moz-appearance:textfield;
}
#SizeList .kazubox a.kazu_btn {
	background:var(--mainthema-background-color);
	display:grid;
	place-items:center;
}
#SizeList .kazubox a.kazu_btn.kazu_btn__stop {
	background-color: #ccc;
	text-decoration: none;
}
#SizeList .kazubox a.kazu_up {
	border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;
}
#SizeList .kazubox a.kazu_down {
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
}
#SizeList .kazubox a.kazu_down:after,
#SizeList .kazubox a.kazu_up:after {
	content: "\f068";
	font-family: 'Font Awesome 5 Free';
	color: #fff;
	font-weight: bold;
	font-size: 16px;
}
#SizeList .kazubox a.kazu_down:after {
	content: "\f068";
}
#SizeList .kazubox a.kazu_up:after {
	content: "\f067";
}
#SizeList .kazubox2{
	display: flex;
	gap: 10px;
	place-items: start center;
	flex-direction: column;
}
#SizeList .kazubox2 > div{
	display: grid;
	place-items: center start;
	gap: 3px;
}
#SizeList .lengthbox{
	display: grid;
	width: 100%;
	grid-template-rows: 24px 40px;
}
#SizeList .lengthbox .length_calc_label{
	display: grid;
	grid-template-columns: 100px 1fr;
	place-items: end start;
	gap: 10px;
}
#SizeList .areabox{
	display: grid;
	width: 100%;
	grid-template-rows: 24px 24px 40px;
	grid-template-columns: 70px 20px 70px 20px 70px;
	align-items: center;
}
#SizeList .areabox label + span{
	text-align: center;
}
#SizeList .areabox .sizeList_syoutitle{
	grid-column: 1/6;
}
#SizeList .areabox .areacalc_t_tate{
	grid-column: 1/3;
}
#SizeList .areabox .areacalc_t_yoko{
	grid-column: 3/5;
}
#SizeList .areabox .areacalc_t_area{
	grid-column: 5/6;
}


#SizeList .item_stock_notification_btn,
#SizeList .item_stock_reservation_btn {
	display: flex;
	width: auto;
	min-width: 120px;
	padding: 0 10px;
	text-align: center;
	height: 30px;
	place-items: center;
	justify-content: center;
	text-decoration: none;
	color: #fff;
	box-shadow: 1px 1px 2px #000;
	border-radius: 5px;
}
#SizeList .item_stock_notification_btn > *,
#SizeList .item_stock_reservation_btn > * {
	line-height:1em;
}
#SizeList .item_stock_notification_btn{
	background-color:darkblue;
}
#SizeList .item_stock_notification_btn:hover{
	background-color:#fff;
	color:darkblue;
}
#SizeList .item_stock_reservation_btn{
	background-color:red;
	font-weight:bold;
}
#SizeList .item_stock_reservation_btn:hover{
	background-color:#fff;
	color:red;
	
}


#SizeList .sizeList__ul > li > input {
	text-align:center;
}
#SizeList select {
	width:100%;
	overflow: hidden;
}

#SizeList .sizeList_itemname{
	display: grid;
	grid-template-columns: 70px 1fr;
	gap: 0 10px;
}
#SizeList .sizeList_itemname img{
	grid-column: 1/2;
	grid-row: 1/5;
}
#SizeList .sizeList_itemname div{
	grid-column: 2/3;
}

#SizeList .sizeList_itemname_th{
	text-align-last: justify; /* Safari非対応 */
	justify: inter-ideograph; /* IE・Edge用 */
	display:inline-block;
	width: 60px;
}
#SizeList .sizeList_itemname_th * span{
	display:inline-block;
	width: calc(100% - 60px);
}

#SizeList.item_mark:before {
	content: attr(data-item_mark);
	display:inline-block;;
	border: 2px solid #f00;
	color: #f00;
	font-weight: bold;
	padding: 3px;
	margin-bottom: 6px;
}
#SizeList .sizelist_zaiko_table{
	table-layout:fixed;
	width:100%;
}
#SizeList .sizelist_zaiko_table th{
	border:1px solid #999;
	background-color:#ccc;
	font-weight:bold;
	text-align:center;
	line-height:2em;;
}
#SizeList .sizelist_zaiko_table td{
	border:1px solid #ccc;
	background-color:#fff;
	width:60px;
	vertical-align:middle;
}
#SizeList .sizeList_syoutitle{
	font-size: 15px;
	font-weight: bold;
	display:flex;
	gap:5px;
	place-items:start;
}
#SizeList .sizeList_syoutitle span{
	font-size:0.7em;
}

#SizeList .sizeList_itemzaiko{
	max-width:400px;
}
#SizeList .sizeList_itemzaiko dl {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto auto;
	grid-auto-flow: column;
	place-items: center;
	border: 1px solid #666;
}
#SizeList .sizeList_itemzaiko dl > dt {
	font-weight: bold;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 10px 0;
	border-left: 1px dotted #ccc;
	border-bottom: 1px dotted #ccc;
}
#SizeList .sizeList_itemzaiko dl > dd {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 10px 0;
	border-left: 1px dotted #ccc;
}
#SizeList .sizeList_itemzaiko dl > dt:nth-child(1),
#SizeList .sizeList_itemzaiko dl > dd:nth-child(1),
#SizeList .sizeList_itemzaiko dl > dd:nth-child(2){
	border-left:none;
}

#SizeList .itemview_msg_block{
/*	grid-area: headmsg;	*/
	margin: 20px 0;
	width: 100%;
}

@media screen and (max-width: 768px) {
	#SizeList .sizeList__ul > li:nth-child(1) > .zaiko {
		display:block;
		margin-top: 15px;
	}
	#SizeList .sizeList__ul > li:nth-child(1) > .zaiko > .zaiko_shop,
	#SizeList .sizeList__ul > li:nth-child(1) > .zaiko > .zaiko_tonya,
	#SizeList .sizeList__ul > li:nth-child(1) > .zaiko > .zaiko_maker {
		display:inline-block;
		margin-right:1em;
	}

}

dl.matrix_dl dt{
	border-left:5px solid #ccc;
	padding-left:5px;
	font-weight:bold;
}
dl.matrix_dl dd{
	margin-left:20px;
}
dl.matrix_dl dt.strong,
dl.matrix_dl dt.strong + dd {
	color:#f00;
}

#Sizelist_scrollJump{
	grid-area: size;
	display: flex;
	gap: 5px 10px;
	flex-wrap: wrap;
	margin: 20px 0;
}
#Sizelist_scrollJump .sizelist_scrolljump_title{
	width: 100%;
	font-weight: bold;
	font-size: 1.2em;
}
#Sizelist_scrollJump .sizelist_scroll_jump_link{
	padding: 0 10px;
	height: 40px;
	border: 1px solid var(--main-link-color);
	display: flex;
	place-items: center;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	text-decoration: none;
}

/**====================
///// view_modeType1 /////
====================**/

.view_modeType1 #ItemViewDataWrap{
	grid-template-columns: 1fr;
	grid-template-areas:  "img"
						  "maker"
						  "info"
						  "price"
						  "color"
						  "size"
						  "msg"
						  "headmsg";
}

/* 仮としてサンプル画像を消してます。 */

.view_modeType1 #ItemPlan {
	background: -moz-linear-gradient(top, #fff 0%, #ddd);
	background: -ms-linear-gradient(top, #fff, #ddd);
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
	background: linear-gradient(to bottom, #fff, #ddd);
	background-color: #ddd;
	border: 1px solid #999;
	border-radius: 4px;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
	float: none;
	line-height: 40px;
	text-indent: 10px;
	width: 100%;
}

.view_modeType1 #SubmitButton1 {
	width: 100%;
}
/*
.view_modeType1 {
	margin: 10px 0!important;
}
*/
.view_modeType1 .ItemImg .main_pic,
.view_modeType1 .ItemOption input[type="text"] {
	max-width: 100%;
}

.view_modeType1 .Item_dl.ItemOption dd,
.view_modeType1 .Item_dl.ItemOption dt{
	float: none;
	width: 100%;
	overflow: visible;
	/* オプションサムネポップアップ用 */
}
/*
.view_modeType1 .Item_dl > dd {
	width: 80%;
}

.view_modeType1 .Item_dl > dt {
	width: 20%;
}
*/

.view_modeType1 .inquiries_in_advance{
	margin-top:80px;
	margin-bottom:90px;
}

.view_modeType1 .itemview_submit{
	font-size: 20px;
}

/**====================
///// view_modeType2 /////
====================**/


/* 仮としてサンプル画像を消してます。 */

.view_modeType2 {
	margin: 20px 0!important;
}

.view_modeType2 #ItemViewImg {
	float: none;
	margin: 0 auto;
	width: 100%
}

.view_modeType2 #ItemSubmitBox,
.view_modeType2 #ItemPlan {
	float: none;
	width: 100%;
}

.view_modeType2 #ItemPlan {
	background-color: #ddd;
	background: -ms-linear-gradient(top, #fff, #ddd);
	background: -moz-linear-gradient(top, #fff 0%, #ddd);
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
	background: linear-gradient(to bottom, #fff, #ddd);
	border-radius: 4px;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
	line-height: 40px;
	text-indent: 10px;
	border: 1px solid #999;
}

.view_modeType2 .Item_dl > dt {
	width: 20%;
}

.view_modeType2 .Item_dl > dd {
	width: 80%;
}

.view_modeType2 .ItemOption dt,
.view_modeType2 .ItemOption dd {
	float: none;
	width: 100%;
	padding-left: 0;
}

.view_modeType2 .ItemOption input[type="text"] {
	max-width: 100%;
}

.view_modeType2 .Item_dl {
	float: none;
	width: 100%;
}

.view_modeType2 .Item_dl input,
.view_modeType2 .Item_dl select {
	height: 40px;
}

.view_modeType2 #SubmitButton1 {
	width: 100%;
}

.view_modeType2 .ItemImg .main_pic {
	max-width: 100%;
}

/**====================
///// view_modeType4 /////
====================**/
.view_modeType4 .Item_dl {
	float: none;
	width: 100%;
}
.view_modeType4 dl.Item_dl.ItemOption{
	margin:0 0 20px 0;
}
.view_modeType4 .Item_dl.ItemOption dd,
.view_modeType4 .Item_dl.ItemOption dt {
	float: none;
	width: 100%;
	overflow: visible;
}
/*
.view_modeType4 .Item_dl.ItemOption dd {
	padding:5px 0;
}
*/
.view_modeType4 .Item_dl input,
.view_modeType4 .Item_dl select {
	display:block;
	height: 40px;
}
@media screen and (max-width: 768px) {
	.view_modeType4 .Item_dl.ItemOption dd {
		border-bottom:2px solid #ccc;
		padding-bottom: 22px;
	}
	.view_modeType4 .Item_dl dt .optthumb {
		display: block;
		float: inherit;
		width: 100%;
	}
	.view_modeType4 #ItemImg {
		width:100%!important;
		position:inherit!important;
	}
}


/**====================
///// input_dl /////
====================**/
.confirm_dl {
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 0 0 4px #ccc;
	width: 100%;
}
.confirm_dl dt{
	margin:10px 10px 0 10px;
	padding-left:5px;
	border-width:0;
	border-left: 5px solid #ccc;
	font-weight:bold;
}
.confirm_dl dd {
	border-bottom: 1px solid #ccc;
	margin: 0 10px 10px 10px;
	padding: 5px 5px 5px 30px;
}

.confirm_dl dd:last-child {
	border: none;
}

.input_dl {
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 0 0 4px #ccc;
	padding: 10px 15px;
	width: 100%;
}

.input_dl dd {
	border-bottom: 1px solid #ccc;
	margin-bottom: 5px;
	padding: 5px;
	width: 100%;
}

.input_dl dd:last-child {
	border: none;
}

.input_dl dt label {
	display: table-cell;
	float: left;
	font-weight: bold;
	margin-right: 20px;
}

.input_dl dt p {
	display: table-cell;
	font-size: 11px;
}

.input_dl dt.required label:after {
	color: #f00;
	content: "※必須";
	margin-left: 10px;
}

.input_dl input {
	font-size: 18px;
	margin-bottom: 10px;
	padding: 8px 8px 8px 4px;
}

.input_dl input ~ p {
	-moz-transition-duration: 0.5s;
	-moz-transition-property: all;
	-ms-transition-duration: 0.5s;
	-ms-transition-property: all;
	-o-transition-duration: 0.5s;
	-o-transition-property: all;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-property: all;
	border: 1px solid #f00;
	clear: both;
	display: block;
	height: 0;
	margin-top: 0;
	overflow: hidden;
	padding: 0 5px 0 3.5em;
	text-align: left;
	text-indent: -3em;
	transition-duration: 0.5s;
	transition-property: all;
	visibility: hidden;
}

.input_dl input ~ p:before {
	content: "注意：";
	display: inline;
	margin-top: 10px;
}

.input_dl input ~ span,
.input_dl > dd > span:first-child {
	display: block;
	float: left;
	font-size: 14px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
}

.input_dl input:focus ~ p {
	color: #f00;
	height: 5.5em;
	margin-bottom: 10px;
	padding: 5px 5px 5px 3.5em;
	visibility: visible;
}

.input_dl input[type="checkbox"] + label {
	margin-bottom: 10px;
}

.input_dl label {
	display: inline;
}

.input_dl select {
	border: 1px solid #999;
	display: block;
	float: left;
	font-size: 18px;
	height: 40px;
	margin-bottom: 10px;
}

.input_dl span.alphabet {
	font-weight: normal;
	margin: 0 10px;
}

.input_dl textarea {
	box-sizing: border-box;
	clear: both;
	display: block;
	margin-bottom: 10px;
	padding: 5px;
	resize: vertical;
}

.input_dl.input_check #pMemName > span {
	font-size: 15px;
	padding-left: 5px;
}

.input_dl.input_check #pMemPw {
	color: #f00;
	font-size: 12px;
}

.input_dl.input_check > dd > p {
	font-size: 15px;
	padding: 5px 10px;
	word-break: break-all;
}

.input_dl.input_check > dt {
	border-bottom: 1px dotted #ccc;
	border-top: 1px solid #ccc;
	padding: 5px 0;
}

.input_dl.input_check > dt > a {
	display: block;
	float: right;
	padding: 0 10px;
}

.input_dl.input_check > dt > label {
	color: #999;
	display: block;
	float: left;
}

.input_dl.input_check > dt:first-child {
	border-top-width: 0px;
}

a.mail_bak {
	float: right;
	margin-top: 20px;
	width: 120px;
}

dl.sign_dl_1 {
	float: left;
	width: 49%;
}

dl.sign_dl_1 dd,
dl.sign_dl_2 dd {
	border: none;
	margin: 0;
	padding: 5px;
}


/*
	dl.sign_dl_2 {
		float                       : right;
		width                       : 49%;
	}
*/

dl.sign_dl_2 {
	width: 100%;
}


/**====================
///// input_ul (cart) /////
====================**/

.input_section{
	margin: 0 auto;
	margin-bottom: 10px;
}
.input_section > header {
	color: #0b2265;
	font-size: 15px;
	background: none;
	border-width: 1px 0;
	padding: 20px 0;
}
.input_section > article {
    border: none;
    padding: 0;
}

.input_ul {
	border: none;
	box-shadow: none;
	padding: 0;
}

.input_ul input {
	font-size: 18px;
	padding: 8px 8px 8px 4px;
	box-sizing: border-box;
	background-color: azure;
}
.input_ul input:placeholder-shown {
	/* background-color: #fff; */
	font-size: 1em;
}

.input_ul input + p {
	-moz-transition-duration: 0.5s;
	-moz-transition-property: all;
	-ms-transition-duration: 0.5s;
	-ms-transition-property: all;
	-o-transition-duration: 0.5s;
	-o-transition-property: all;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-property: all;
	border: 1px solid #f00;
	clear: both;
	display: block;
	height: 0;
	margin-top: 0;
	overflow: hidden;
	padding: 0 5px 0 3.5em;
	text-align: left;
	text-indent: -3em;
	transition-duration: 0.5s;
	transition-property: all;
	visibility: hidden;
}

.input_ul input ~ p:before {
	content: "注意：";
	display: inline;
	margin-top: 10px;
}

.input_ul input:focus ~ p {
	color: #f00;
	height: 5.5em;
	margin-bottom: 10px;
	padding: 5px 5px 5px 3.5em;
	visibility: visible;
}
.input_ul input ~ .precautions {
	max-width: 440px;
	position: relative;
	margin: 20px 0;
	border: 2px solid red;
	color: #f00;
	font-weight: bold;
	padding: 10px 5px;
	place-items: start;
	text-align: center;
	font-size: 1.2em;
	word-break: keep-all;
}
.input_ul input ~ .precautions:before {
	content: "注意事項";
	display: inline;
	grid-area: 1/1/2/2;
	transform: translate(10px, -12px);
	background-color: #fff;
	color: red;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
}

.input_ul input[type="checkbox"] + label {
	margin: 10px;
}

.input_ul > li {
	padding: 5px;
}

/*
.input_ul select {
	border: 1px solid #999;
	display: block;
	font-size: 18px;
	height: 40px;
	padding:0 10px;
}
*/
.input_ul > li {
	border-bottom: 1px solid var(--mainthema-background-color);
	padding: 0;
	display: grid;
	grid-template-columns: min(40%, 250px) 1fr;
	gap: 10px;
	padding: 10px 0;
}

.input_ul li.required label > span:first-child:after {
	content: "※必須";
	color: #f00;
	margin-left: 10px;
}

.input_ul > li > label > input ~ span {
	float: left;
	line-height: 38px;
	margin: 0 10px;
}

.input_ul > li > label > input[name="zip1"],
.input_ul > li > label > input[name="zip2"] {
	float: left;
	width: 100px;
}

.input_ul.ForeignCountries > li > label > input[name="zip2"],
.input_ul.ForeignCountries > li > label > input[name="zip1"] ~ span,
.input_ul.ForeignCountries > li > label > a.addsearch_btn {
	display: none
}

.input_ul.ForeignCountries > li > label > input[name="zip1"] {
	width: 200px;
}


/* new input ul style */

.input_ul li .input_title ~ label .input_title:before {
	content: ""!important;
}

.input_ul li .input_title span {
	font-weight:bold;
	display:block;
}    display: flex;
.input_ul li .input_title{
	place-items: start center;
}

.input_ul li.required .input_title span::after {
	content: "【必須】";
	color: #f00;
}
.input_ul.foreign li.required .input_title span::after {
	content: "【Required】";
	color: #f00;
}
.input_ul li.recommended .input_title span::after {
	content: "【推奨】";
	color: blue;
}
.input_ul.foreign li.recommended .input_title span::after {
	content: "【Recommended】";
	color: blue;
}

.input_ul li .input_title[data-English]::after {
	content:"("attr(data-English)")";
	font-size: 0.9em;
}

.input_ul .input_content {
	grid-column: 2/3;
}
.input_ul .input_colspan {
	grid-column: 1/3;
}

.input_ul .input_content > span ~ input[type="text"],
.input_ul .input_content > span ~ input[type="number"] {
	display: block;
	float: left;
	width: 4em;
}

.input_ul .input_content > span ~ select {
	display: block;
	float: left;
	width: 3em;
}

.input_ul .input_content dt{
	margin: 15px 0 0 0;
	border-left: 6px solid var(--mainthema-background-color);
	padding: 0 5px;
	border-bottom: 1px solid var(--mainthema-background-color);
	display:inline-block;
/*	min-width:300px;	*/
}
.input_ul .input_content dt[data-English]::after {
	content: "("attr(data-English)")";
	margin-left:5px;
}
.input_ul .input_content dt:first-child{
	margin-top:0;
}
.input_ul .input_content dt ~ dd {
	margin-top: 10px;
}
.input_ul .input_content em {
	color:#f00;
	font-weight:bold;
}
.input_ul .input_content li:last-child {
	margin-bottom:0;
}
.input_ul .input_content .questionnaire_list > li {
/*	float:left;	*/
}
#ReportUL {
	overflow:hidden;
	margin-bottom:10px;
}
#ReportUL li {
	float:left;
}


#ReportUL + p {
	font-weight:bold;
	color:#f00;
	margin-left:6px;
}

.input_ul .input_zip{
	display: flex;
	gap: 10px;
}
.input_ul .input_zip input {
	width: 3em;
}
.input_ul .input_zip .zip_format {
  width: 8em;
}

.input_ul .input_zip span + input {
	width: 4em;
}

.input_ul .input_name input[type="text"]{
    width: 250px;
}
.input_ul .input_tel {
	display: grid;
	grid-template-columns: auto 1fr;
	place-items: center;
	gap: 10px;
}
.input_ul .input_tel span {
	color: #999;
}

.input_ul .input_tel > span.CountryTelLandLine,
.input_ul .input_tel > span.CountryTelMobile {
	width: 100px;
}

.input_ul .input_tel > span + p {
	display: table-cell;
}

.ForeignCountries .input_ul .input_zip input {
	width: 100%;
}


.input_ul a.password_eye {
	display: block;
	float: right;
	margin:10px 0;
}
.input_ul .input_content.date {
	display: flex;
	place-items: end;
	gap: 5px;
}

.input_ul .input_content.date .submit_button{
  font-size:initial;
}
.input_ul .input_content.date select{
	text-align:right;
}

.input_ul .input_content .mailcheck_btn {
/*	width:150px;	*/
	width:180px;
	margin:10px 0 0;
}
.input_ul .input_content ul.flex_list {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 10px;
}
/*
.input_ul .input_content .change_button {
	display:inline-block;
	margin : 10px 10px 0 10px;
	border: 4px double var(--main-link-color);
	color: var(--main-link-color);
	background: none;
	padding: 10px;
	cursor: pointer;
	font-weight: bold;
}
.input_ul .input_content .change_button:hover {
	color:var(--main-link-hovercolor);
	border-color:var(--main-link-hovercolor);
}
*/
.input_ul .change_button {
	max-width:200px;
	font-weight:bold;
}
.input_ul .input_colspan .change_button {
	max-width: 300px;
	margin:10px auto;
}

/* エラー項目用 */
.input_ul small.errmsg {
	grid-area: 2/2/3/3;
	background-color: pink;
	padding:5px;
	font-size:11px;
	font-weight:bold;
	display:block;
}
.input_ul input.input_error {
	border-color: #f00;
	background-color: lavenderblush;
}
/**====================
///// infoボタン /////
====================**/

.info_btn {
	display: grid;
	width: 100%;
	grid-template-columns:1fr 1fr;
	gap:10px;
	margin:30px 0;
}

.info_btn a {
	background-color: var(--mainthema-background-color);
	border-radius: 5px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
	color: #fff;
	display: block;;
	font-weight: bold;
	position: relative;
	text-indent: 0px;
	text-shadow: 1px 1px 1px #000;
	width: 100%;
	text-align: left;
	font-size: 16px;
	text-align: center;
	text-decoration:none;
	white-space: nowrap;
	overflow: hidden;
	line-height: 40px;
}

.info_btn .favo_btn a:before,
.info_btn .zaiko_btn a:before {
	background-image: url("/img/menu_icon.svg");
	background-position: -48px 0;
	content: "";
	display: inline-block;
	height: 24px;
	width: 24px;
	margin: 0 5px;
	vertical-align: middle;
}

.info_btn .favo_btn a:before {
	background-position: -48px -320px;
}

.info_btn .favo_btn a.favo_hit {
	color: yellow;
}

.info_btn .favo_btn a.favo_hit:before {
	background-position: -72px -320px;
}

.info_btn .zaiko_btn a:before {
	background-position: -96px -320px;
}


/**====================
///// 会員情報編集 /////
====================**/

#MemberCheck {
	margin-bottom: 5px;
}

.member_edit {
	width: 100%;
	max-width: 600px;
}

.member_edit > .auto-openBox-contents {
	position: relative;
	padding: 35px 10px 10px 10px;
}

.member_edit .input_dl {
	color: #fff;
}

.member_edit .input_dl a {
	color: #FF8C00;
}

.member_edit .input_dl a:hover {
	color: #fff;
}

.member_edit #MemName_text {
	width: 100%;
}

.member_edit #MemFurigan_text {
	width: 100%;
}

.member_edit .check_alert {
	line-height: 20px;
	color: #ff0;
	text-align: center;
	margin-top: 20px;
}

.member_edit #MemAddrChe {
	color: #fff;
	text-decoration: underline;
	float: right;
	display: block;
}

.member_edit .input_del {
	float: right;
}

.modification {
	/*margin                 : 20px 0 10px;*/
	color: #f00;
	text-align: center;
}

.message {
	/*margin                 : 20px 0 10px;*/
	color: #f00;
	text-align: center;
}

.message > p {
	margin-bottom: 10px;
}

#MemberCheck .del_btn {
	float: right;
	clear: both;
	padding: 10px;
}

#DelMember form > p {
	border: 1px solid #ccc;
	padding: 10px;
	width: 100%;
	box-shadow: 0 0 4px #ccc;
	border-radius: 5px;
	box-sizing: border-box;
}

#DelMember form > div {
	text-align: right;
	margin: 10px 0;
}

#DelMember form > div > label {
	display: inline;
}

#DelMember form > a {
	margin: 10px 0;
}


/**====================
///// 会員情報編集2 /////
====================**/

#MyPage{
	display: grid;
	grid-template-areas: "mypagemenu mypagemain";
	grid-template-columns: min(30%, 275px) 1fr;
	gap: 10px;
	align-items: start;
}
#MyPage .mypage_menu {
	grid-area: mypagemenu;
	height: 100%;
}
#MyPage .mypage_menu > ul{
	position: sticky;
	top: 30px;
	border:1px solid #ccc;
	background-color: rgba(var(--mainthema-background-rgb),0.2);
}

#MyPage .mypage_contents {
	grid-area: mypagemain;
	display:grid;
	gap: 10px;
}


.mypage_subtitle {
	text-align: center;
	font-weight: bold;
	font-size: 15px;
}

#MyPage .editmsg {
	color: #0B2265;
	font-size: 15px;
	font-weight: bold;
	margin: 10px;
	overflow: hidden;
	text-align: center;
}

#MyPage .editmsg > p {
	margin-bottom: 10px;
}

#MyPage .editmsg > p.err {
	color: #f00;
}

#MyPage .editmsg > a.editnext {
	padding: 5px 25px;
	float: right;
	display: block;
}

#MyPage .editmsg > a.editprev {
	padding: 5px 25px;
	float: left;
	display: block;
}

#MyPage .errmsg2,
#MyPage .mypage_contents .submit_btn a ~ input[type="submit"] {
/*	display: none;	*/
}

/*
#MyPage .mypage_contents .input_ul .input_content {
	display: block;
	float: right;
	padding: 0;
	width: 55%;
}
#MyPage .mypage_contents .input_ul .input_content.mem_sex label {
    display: inline-block;
}

#MyPage .mypage_contents .input_ul .input_content input,
.input_ul .input_content select {
	margin: 0;
}

*/
/*
	#MyPage .mypage_contents .input_ul .input_content.birthday {
		width            : 100%;
	}
*/


/*
	#MyPage .mypage_contents .input_ul .input_title {
		display          : block;
		float            : left;
		line-height      : 40px;
		margin           : 0;
		padding          : 0;
		width            : 44%;
		font-size        : 12px;
		font-weight      : bold;
	}
*/
/*
#MyPage .mypage_contents .input_ul > li {
	margin: 0 10px;
	padding: 10px;
	overflow: hidden;
}

#MyPage .mypage_contents .input_ul > li > label {
	margin-bottom: 10px;
}

#MyPage .mypage_contents .input_ul > li > label:last-child {
	margin-bottom: 0;
}

#MyPage .mypage_contents .input_ul .input_title ~ label .input_title {
	text-align: right;
	font-weight: normal;
}
*/
#MyPage .mypage_contents .submit_btn > a {
	padding: 10px;
	/*		width            : 300px;	*/
}

#MyPage .mypage_contents .submit_btn a > span {
	font-size: 20px;
}

#MyPage .mypage_menu .menu_title {
	border-bottom: 1px solid var(--mainthema-background-color);
	border-top: 1px solid #fff;
}

#MyPage .mypage_menu .menu_title p {
	position: relative;
	/*		text-indent      : 1em; */
}

#MyPage .mypage_menu .menu_title p > a {
	display: block;
	font-size: 15px;
	/*		line-height      : 50px; */
	padding: 8px 0;
	text-align: center;
}

#MyPage .mypage_menu .menu_title p > a > span {
	display: block;
	font-size: 12px;
	color: var(--mainthema-background-color);
}

#MyPage .mypage_menu .menu_title p > a > .alert_icon {
	border-radius: 50%;
	bottom: 0;
	color: #f00;
	display: block;
	font-weight: bold;
	height: 25px;
	line-height: 25px;
	margin: auto;
	padding: 0;
	position: absolute;
	right: 10px;
	text-align: center;
	text-indent: 0;
	top: 0;
	vertical-align: middle;
}

#MyPage .mypage_menu .menu_title p > a > .alert_icon:before {
	content: "";
	position: absolute;
	background-image: url("/img/menu_icon.svg");
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
	display: block;
	top: 0;
	bottom: 0;
	left: -20px;
	margin: auto 0;
	-webkit-animation: blink 1.5s ease-in-out infinite alternate;
	-moz-animation: blink 1.5s ease-in-out infinite alternate;
	animation: blink 1.5s ease-in-out infinite alternate;
}

#MyPage .mypage_menu .menu_title p > a > .err_cnt:before {
	background-position: -20px -280px;
}

#MyPage .mypage_menu .menu_title p > a > .new_msg:before {
	background-position: 0px -300px;
}

#MyPage .mypage_menu .menu_title p > a:hover {
	background-color: rgba(var(--mainthema-background-rgb),0.2);
	text-decoration: none;
	color:var(--main-link-color)
}


/*
	#MyPage .input_ul .input_content > span {
		float            : left;
		line-height      : 40px;
		padding          : 0 10px;
	}
	#MyPage .input_ul .input_content > span ~ input[type="text"],
	#MyPage .input_ul .input_content > span ~ input[type="number"] {
		display          : block;
		float            : left;
		width            : 4em;
	}
	.input_ul .input_content.zip input {
		float            : left;
		width            : 3em;
	}
	.input_ul .input_content.zip span + input: {
		width            : 4em;
	}
*/

/*
#MyPage .input_ul .input_content.zip input:last-child {
	width: 4em;
}
*/

/* 以前の必須文字を消す用 */
/*
#MyPage .input_ul li label > span:after {
	content: ""!important;
	display: none!important;
}
*/
/*
#MyPage .input_ul.foreign .input_content.zip input {
	float: none;
	width: 100%;
}
*/

#MyPage h2{
	font-size: 22px;
	font-weight: bold;
	color: #333;
	display: block;
	border-left: 8px solid #333;
	padding-left: 8px;
}

/* マイページトップ */
.mypageItemList > p:first-child {
	/*	#MyPageNotice > p,
	#MyPageFavoItems > p:first-child,
	#MyPageBuyHistory > p:first-child { */
	font-size: 15px;
	font-weight: bold;
	border-left: 10px solid var(--mainthema-background-color);
	text-indent: 10px;
	background-color: rgba(var(--mainthema-background-rgb),0.1);
	line-height: 2em;
	margin-bottom: 10px;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}

#MyPageNotice .u_notice .u_notice-head {
	display: inline-block;
	padding: 3px 0;
}

#MyPageNotice .u_notice .u_notice-head.important_notice {
	color: #f00;
}

.MODEmypage #MyPageNotice,
.MODEmypage .mypageItemList {
	padding: 10px;
	border: 1px solid #ccc;
	display: grid;
	gap: 10px;
}

.mypage_top #MyPageNotice .u_notice .u_notice-head > p:first-child {
	width: 150px;
	float: left;
	position: relative;
}

.mypage_top #MyPageNotice .u_notice .u_notice-head > p:nth-child(2) {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	display: block;
	text-decoration: underline;
}

#MyPage .noitem_msg{
	color: #f00;
	font-size: 15px;
	font-weight: bold;
	margin: 20px;
	text-align: center;
}

@media screen and (max-width: 768px) {
	#MyPage {
		grid-template-areas: "mypagemain"
							 "mypagemenu";
		grid-template-columns: 1fr;
	}
/*	#MyPage .mypage_menu {
		float: none;
		width: 100%;
	}
	#MyPage .mypage_contents {
		float: none;
		width: 100%;
		margin-bottom: 20px;
	}
	#MyPage .mypage_contents .submit_btn > a {
		width: 100%;
	}
/*
	#MyPage .mypage_contents .input_ul .input_title {
		width: 100%;
	}
	#MyPage .input_ul {
		padding: 0;
	}
	#MyPage .input_ul .input_content > span {
		padding: 0 2px;
	}
	#MyPage .mypage_contents .input_ul .input_content {
		width: 100%;
	}
	#MyPage .mypage_menu .menu_title.menu- p > a {
		background-color: inherit;
	}
*/
/*	.input_ul li .input_title {
		float:inherit;
		width : 100%;
		border-bottom: 1px dashed var(--mainthema-background-color);
		padding: 10px 0 20px 0;
	}
	.input_ul li .input_content {
		margin: 20px 0 20px 0;
		border-left: 6px solid var(--mainthema-background-color);
		padding-left: 20px;
	}
	#ShipTypeUL li, #ReportUL li {
		float:inherit;
	}
*/
	.input_ul > li{
		grid-template-columns: 1fr;
		padding: 0;
		gap: 0;
		border-bottom:none;
	}
	.input_ul li:last-child{
		border-width: 1px;
	}
	.input_ul li .input_content {
		grid-column: auto;
		padding: 20px 0;
	}
	.input_ul li .input_title{
		background-color: bisque;
		font-size: 1.15em;
		padding: 20px 5px;
		border-bottom: 1px dashed var(--mainthema-background-color);
		border-top: 1px solid var(--mainthema-background-color);
	}
	
}


/**====================
///// フッター /////
====================**/
#footer{
	grid-area: footer;
	padding-bottom: 120px;
}

#footer a:link {
	color: #fff;
}

#footer a:visited {
	color: #fff;
}

#footer a:active {
	color: #fff;
}

#footer a:hover {
	color: #FF8C00;
}

#footer {
	clear: both;
	background-color: var(--mainthema-background-color);
	color: #fff;
}

#foot_inner {
	display: grid;
	place-items: center;
	text-align: center;
	gap: 30px;
	padding-top: 30px;
}

#foot_inner ul{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: center;
	font-size: 14px;
}

#footer .copyright{
	/* margin-top: 60px; */
}

/*

footer dl dd a,
footer dl dt {
}



footer {
	text-align: center;
}

footer dl dt,
footer dl dt a {
	font-weight: bold;
}

.copyright {
	text-align: center;
}



footer dl dd,
footer dl dt {
	float: left;
}


footer dl dd span:after {
	content: "|";
}

footer dl dd:last-child span:after {
	display: none;
}
*/

/**** =その他= ****/

#FooterHiddenTEXT {
	display: none;
	overflow: hidden;
	width: 0px;
	height: 0px;
}


/**====================
///// footer fixed menu /////
====================**/

#FooterFixedMenu {
	background-color: rgba(0, 0, 0, 0.8);
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 600;
	height: 60px;
	overflow: hidden;
	table-layout: fixed;
}

#FooterFixedMenu td > a {
	width: 100%;
	height: 100%;
	display: block;
}


/*
	#FooterFixedMenu .pc_phone{
		font-size:11px;
		height: 60px;
		padding: 0 10px;
	}
*/


/*
	#FooterFixedMenu .pc_phone a > p:first-child {
		font-size: 2em;
		line-height: 1.8em;
	}
*/

#FooterFixedMenu .smart_footerBtn {
	height: 100%;
	padding: 10px 0;
}

#FooterFixedMenu .footerBtn_image_icon > a {
	border-right: 2px solid #fff;
}

#FooterFixedMenu .smart_footerBtn > a.disabled {
	opacity: 0.3;
}

#FooterFixedMenu .smart_footerBtn.page_up > a {
	border: none;
}

#FooterFixedMenu .footerBtn_image_icon > a > span {
	font-size: 15px;
	font-weight: bold;
	color: #fff;
	display: block;
	width: 42px;
	height: 42px;
	margin: auto;
	background-image: url("/img/menu_icon.svg");
	background-repeat: no-repeat;
}

#FooterFixedMenu .footerBtn_image_icon.smart_favorite > a > span {
	background-position: -42px -344px !important;
}

#FooterFixedMenu .footerBtn_image_icon.smart_qa > a > span {
	background-position: -84px -344px !important;
}

#FooterFixedMenu .footerBtn_image_icon.smart_home > a > span {
	background-position: 0px -386px !important;
}

#FooterFixedMenu .footerBtn_image_icon.smart_search > a > span {
	background-position: -42px -386px !important;
}

#FooterFixedMenu .footerBtn_image_icon.smart_login > a > span {
	background-position: -84px -386px !important;
}

#FooterFixedMenu .footerBtn_image_icon.smart_logout > a > span {
	background-position: -126px -386px !important;
}

#FooterFixedMenu .footerBtn_image_icon.smart_phone > a > span {
	background-position: -84px -428px !important;
}

#FooterFixedMenu .footerBtn_image_icon.page_up > a > span {
	background-position: 0 -428px !important;
}

#FooterFixedMenu .footerBtn_image_icon.page_down > a > span {
	background-position: -42px -428px !important;
}

@media screen and (min-width: 769px) {
	#FooterFixedMenu .scroll_info {
		width: 60px;
	}
	#FooterFixedMenu td:not(.pc_footerBtn) {
		display: none;
	}
}

@media screen and (max-width: 768px) {
	#FooterFixedMenu td:not(.tablet_footerBtn) {
		display: none;
	}
	#FooterFixedMenu td {
		width: auto!important;
	}
}

@media screen and (max-width: 480px) {
	#FooterFixedMenu td:not(.smart_footerBtn) {
		display: none;
	}
}


/**====================
///// alphabet_popup /////
====================**/

.alphabet_popup {
	display: block;
	position: absolute;
	border: 1px solid #ccc;
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6);
	padding: 10px;
	background-color: lightgoldenrodyellow;
}


/**====================
///// ZipChe /////
====================**/

a.addsearch_btn {
	width: 130px;
/*	float: left;
	margin-left: 10px;	*/
/*	display: block;
	margin:0 20px;
	text-align: center;
	line-height: 36px;
	border: 2px solid var(--mainthema-background-color);
	border-radius: 5px;
	background-color: #fff;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);	*/
}

a.addsearch_btn > .zip_err {
	position: absolute;
	font-weight: normal;
	color: #f00;
	z-index: 100;
	border: 1px solid #ccc;
	border-radius: 5px;
	background-color: cornsilk;
	padding: 10px;
	margin-top: 10px;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}


/**====================
///// KiyakuBox /////
====================**/

#KiyakuBox {
	max-width: 800px;
	width: 100%;
}

#KiyakuBox .box-title {
	text-align: center;
	font-weight: bold;
	font-size: 25px;
	margin-bottom: 10px;
}

#KiyakuBox > .auto-openBox-contents > header {
	margin: 0;
	font-size: 15px;
	margin-bottom: 10px;
	padding: 0;
}

#KiyakuBox > .auto-openBox-contents > article > p {
	text-align: center;
}

#KiyakuBox > .auto-openBox-contents > article > p:last-child {
	text-align: right;
}

#KiyakuBox #kiyaku_html {
	height: 400px;
	overflow-x: hidden;
	overflow-y: scroll;
	margin: 10px;
	border: 1px solid #fff;
	padding: 10px;
	background-color: #fff;
	color: #333;
}

#KiyakuBox #kiyaku_html::-webkit-scrollbar {
	/* スクロールバー全体 */
	width: 15px;
}

#KiyakuBox #kiyaku_html::-webkit-scrollbar-thumb {
	/* スクロールバーのある部分 */
	background: #999;
	border-radius: 5px;
	height: 50px;
}

#KiyakuBox #kiyaku_html::-webkit-scrollbar-track-piece:start {
	/* スクロールバーが表示されてない部分（前） */
	background: #ccc;
}

#KiyakuBox #kiyaku_html::-webkit-scrollbar-track-piece:end {
	/* スクロールバーが表示されてない部分（後ろ） */
	background: #ccc;
}

#KiyakuBox #kiyaku_html .signature {
	margin-top: 10px;
	box-shadow: 0 0 4px #ccc;
	border: 1px solid #ccc;
	padding: 20px;
}

#KiyakuBox #kiyaku_html .signature > p:first-child {
	font-weight: bold;
}

#KiyakuBox #kiyaku_html .signature label {
	display: block;
	margin-bottom: 10px;
}

#KiyakuBox #kiyaku_html .signature label > span {
	color: #f00;
	font-weight: bold;
	display: block;
}

#KiyakuBox #kiyaku_html .signature label > input {
	width: 100%;
}

#KiyakuBox #kiyaku_html .btn_type_4.cancel {
	background-color: var(--mainthema-background-color);
	background: linear-gradient(to bottom, #888, #666);
	background: -ms-linear-gradient(top, #888, #666);
	background: -moz-linear-gradient(top, #888 0%, #666);
	background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#666));
}


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


/******************** レスポンシブ ********************/


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

@media screen and (max-width: 960px) {
	/* =950px以下の場合= */
	/* 2カラム */
	/**====================
	///// 各種大枠 /////
	====================**/

	/**====================
	///// sideMenu /////
	====================**/
	/* サイド２ */
/*	#SideMenuWrap_2 {
		padding-left: 0;
		padding-right: 4px;
		width: 25%;
		clear: left;
	}
	#SideMenuWrap_1 {
		width: 25%;
	}
	#MainContents {
		float: right;
		width: 75%;
	}
*/
	ul.category_list_menu ul {
		padding-left: 1.5em;
	}
}

@media screen and (max-width: 768px) {
	/* =768px以下の場合= */
	/* 1カラム */
	/* ページ全体 */
	#SideMenuWrap_1,
	#SideMenuWrap_2,
	#MainContents {
		margin: 0 0 10px;
		padding: 0;
	}
	section > header,
	main > header {
		padding: 5px;
	}
	/**====================
///// ヘッダー /////
====================**/
	/* スマホ自動拡大機能回避用 */
	input,
	textarea,
	select {
		font-size: 16px;
	}
	/* 品番検索 */
	/*		#SearchTop .SearchForm, */
	.marquee {
		margin: 0 5px 0 0;
	}
	/*
		#SearchTop .SearchTitle {
				display            : none;
		}
		#SearchTop .Search {
				margin-top         : 5px;
		}
		#SearchTop .Search {
				margin-top         : 5px;
		}
*/
	/* カテゴリーメニュー */
	ul.category_list_menu > li {
		background-color: #fff;
		border: 1px solid #ccc;
		margin-top: -1px;
	}
	ul.category_list_menu > li a {
		background-image: none;
		display: block;
		font-weight: bold;
		padding: 8px 15px;
	}
	#SearchTop > form > input,
	#SearchTop > form > select,
	#SearchTop > form > a,
	#SearchTop > form > p {
		display: none !important;
	}
	/**====================
///// メイン /////
====================**/
	#ItemSubmitBox {
		float: none;
		width: 100%;
	}
	#ItemPlan,
	#ItemTani {
/*		background: -moz-linear-gradient(top, #fff 0%, #ddd);
		background: -ms-linear-gradient(top, #fff, #ddd);
		background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
		background: linear-gradient(to bottom, #fff, #ddd);
		background-color: #ddd;
		border: 1px solid #999;
		border-radius: 4px;
		box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
		line-height: 40px;
		text-indent: 10px;	*/
	}
	#MainContents,
	#SideMenuWrap_1,
	#SideMenuWrap_2 {
		padding-left: 0!important;
		padding-right: 0!important;
		min-width: inherit;
		width: 100%!important;
		float:none!important;
	}
/*	#SubmitButton1,
	.view_modeType1 .Item_dl > dd,
	.view_modeType1 .Item_dl > dt,
	.view_modeType2 .Item_dl > dd,
	.view_modeType2 .Item_dl > dt {
		width: 100%;
	}	*/
	#SubmitButton1 span {
		font-size: 16px;
	}
	.ItemImg > a {
		margin: inherit;
	}
	.Item_dl {
		float: none;
		margin-top: 0;
		text-align: left;
		width: 100%!important;
	}
	.Item_dl > dd:last-child {
		border-bottom: none;
	}
/*	.Item_dl > dt {
		float: none;
		width: 100%;
	}	*/
	.Item_dl > dt + dd {
		float: none;
		margin: 0;
		width: 100%;
	}
	.Item_dl input,
	.Item_dl select {
		height: 3em;
		width: 100%;
	}
	.Item_dl ~ .Item_dl {
		border-top: none;
	}
	div.head_breadcrumb {
		border: none;
		line-height: 25px;
		padding: 0;
	}
	.Item_dl:not(.ItemOption) > dt + dd {
		width:100%;
	}
	#MainWrap .next_btn_wp.double_btn {
		min-width: 100%;
	}
	#MainWrap .next_btn_wp.double_btn a {
		float: none!important;
		margin-bottom: 20px;
	}
	
	.view_modeType4 #ItemViewImg,
	.view_modeType4 #ItemViewDataWrap {
		width: 100%;
		float:none;
		overflow: inherit;
		height:auto;
    }

/**====================
///// input_dl /////
====================**/
	dl.input_dl {
		padding: 0;
		border: none;
		box-shadow: none;
		width: 100%;
		float: none;
	}
	.input_dl.input_check > dt:first-child {
		border-top-width: 1px;
	}
	
/**====================
///// infoボタン /////
====================**/
	.info_btn a {
		font-size: 18px;
	}
}

@media screen and (max-width: 480px) {
	.UserMenu br {
		display: inherit;
	}
	/**====================
	///// infoボタン /////
	====================**/
	.info_btn {
		padding-top: 20px;
	}
	.info_btn > * {
		display: block;
		width: 100%;
	}
	.info_btn a {
		width: 100%;
	}
}

section.bill_check {
	float: left;
	width: 49%;
}

section.ship_check {
	float: right;
	width: 49%;
}

section.c_Check_info {
	margin-bottom: 10px;
	overflow:hidden;
}

section.c_Check_info dl {
	padding: 10px 10px 0 10px;
}

section.c_Check_info dt {
	float: left;
	width: 100%;
	font-weight: bold;
	clear: both;
}

section.c_Check_info dd {
	float: left;
	margin-bottom: 10px;
	padding-left: 20px;
	min-width: 300px;
}

section.bill_check dt:nth-last-child(2),
section.bill_check dd:nth-last-child(1) {
	font-size: 18px;
	font-weight: bold;
	color: #f00;
}


/* =990px以下の場合= */


/*		cgiのheadへ
@media screen and (max-width: 990px){
  section.c_Check_info 					{ float            : inherit;
										  width            : 100%; }
}
*/




/*****************************************************************************************
******************************************************************************************
		▼FreeHTML用.css▼
******************************************************************************************
*****************************************************************************************/


/* フリーページ専用 */

.FreeHTML h5 {
	font-weight: bold;
	text-align: center;
}

.FreeHTML section {
	margin: 0;
	padding: 20px;
	box-shadow: 0 0 4px #ccc;
	border: 1px solid #ccc;
}

.FreeHTML table {
	width: 100%;
}

.FreeHTML tr {
	padding: 5px 0;
	display: block;
}

.FreeHTML th {
	width: 120px;
	font-weight: bold;
	text-shadow: none;
}

.FreeHTML a {
	text-decoration: underline;
}

.FreeHTML p {
	margin-bottom: 10px;
}

.FreeHTML p:last-child {
	margin-bottom: 0;
}


/* 会社概要 */

#COMPANY.FreeHTML .se_3 ul {
	margin-bottom: 10px;
	margin-left: 10px;
}


/*****************************************************************************************
******************************************************************************************
		▼freepage用.css▼
******************************************************************************************
*****************************************************************************************/

.return_wrap {
	display: table;
	margin: 0 auto;
}

.return_wrap .return_back,
.return_wrap .return_index {
	float: left;
	width: 120px;
	margin: 0 10px;
}


/*	article.free_page							{ margin           : 10px 10px 20px 10px; } */


/* notapplicable.html */

.notapplicable .search_hint {
	margin-bottom: 10px;
}

.free_search a.re_search {
	display: inline-block;
	/* IE用 */
	*display: inline;
	*zoom: 1;
}

.search_hint ul {
	margin: 10px 10px 10px 20px;
	list-style: disc outside;
}

.search_hint ul li {
	margin-bottom: 10px;
}

.search_hint ul dt {
	font-weight: bold;
}

.search_hint ul dd {
	margin-left: 1em;
}


/* error_page */

.free_page.error_page {
	padding: 50px 0;
	border: none;
}

.free_page.error_page p {
	text-align: center;
	margin: 40px 0;
}


/* noitem.html */

.free_page.noitem p {
	text-align: center;
	margin: 40px 0;
}


/* amount0.html */

.free_page.amount0 p {
	text-align: center;
	margin: 40px 0;
}


/* mem_msg */

.free_page.mem_msg p {
	text-align: center;
	margin: 40px 0;
}

@media screen and (max-width: 768px) {
	.free_search .return_back,
	.free_search .return_index {
		float: none;
		width: 100%;
	}
	.free_search return_wrap {
		display: inline-block;
	}
	#head_label p > span {
		display: none;
	}
	#SideMenuWrap_1 #SlideImg {
		display: none
	}
}

#ErrMem > div {
	width: 100%;
	max-width: 48%;
	padding: 20px 0;
}

#ErrMem > div:first-child {
	float: right;
}

#ErrMem > div:last-child {
	float: left;
}

#ErrMem > div > p {
	text-align: center;
	font-size: 14px;
	font-weight: bold;
}

#ErrMem .btn_type_NewMem {
	padding: 10px;
	line-height: 2em;
	font-size: 11px;
}

#ErrMem .btn_type_NewMem > span {
	font-size: 18px;
}

@media screen and (max-width: 768px) {
	#ErrMem > div {
		float: none;
		max-width: 100%;
	}
	#ErrMem > div:first-child {
		border-bottom: 1px solid #ccc;
	}
}


/***  chamo css  ***/


/*
	@media screen and (max-width: 768px){
		#chamo-waiting {
			bottom:70px!important;
		}
	}
*/

#HeaderNavi .user_nav_01_2 a.alert_bell{
	font-weight:bold;
	position:relative;
}
#HeaderNavi .user_nav_01_2 a.alert_bell > span{
	background-color:#ff0;
	margin-left: 5px;
}
#HeaderNavi .user_nav_01_2 a.alert_bell > span:before {
	content: "new";
	position: absolute;
	top: 0;
	left: 0;
}
#HeaderNavi .user_nav_01_2 a.alert_bell:before {
	content: "";
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin: 5px;
	display: inline-block;
	animation: hurueru 1s linear infinite;
/*	animation: hurueru2 0.5s linear infinite alternate;	*/
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%20%5B%20%3C!ENTITY%20ns_flows%20%22http%3A%2F%2Fns.adobe.com%2FFlows%2F1.0%2F%22%3E%20%3C!ENTITY%20ns_svg%20%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3C!ENTITY%20ns_xlink%20%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%5D%3E%3Csvg%20version%3D%221.1%22%20xmlns%3D%22%26ns_svg%3B%22%20xmlns%3Axlink%3D%22%26ns_xlink%3B%22%20width%3D%2250%22%20height%3D%2258%22%20viewBox%3D%220%20-0.614%2050%2058%22%20enable-background%3D%22new%200%20-0.614%2050%2058%22%20xml%3Aspace%3D%22preserve%22%3E%3Cdefs%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23ffa500%22%20d%3D%22M16.873%2C48.645L16.873%2C48.645c0%2C4.488%2C3.639%2C8.127%2C8.127%2C8.127s8.127-3.639%2C8.127-8.127l0%2C0H16.873z%22%2F%3E%3Cpath%20fill%3D%22%23ffa500%22%20d%3D%22M43.624%2C29.238H5.049c-0.362%2C1.358-0.789%2C2.85-1.239%2C4.362h41.379%20C44.621%2C32.088%2C44.082%2C30.597%2C43.624%2C29.238z%20M42.261%2C23.888c0-10.146-4.765-15.19-11.492-18.675C28.972%2C1.24%2C26.685%2C0%2C24.194%2C0%20c-2.49%2C0-4.777%2C1.24-6.574%2C5.213C10.894%2C8.697%2C6.128%2C13.742%2C6.128%2C23.888c0%2C0.244-0.03%2C0.56-0.084%2C0.931h36.323%20C42.298%2C24.447%2C42.261%2C24.132%2C42.261%2C23.888z%20M46.899%2C38.02H2.455C1.151%2C42.168%2C0%2C45.573%2C0%2C45.573h50%20C50%2C45.573%2C48.546%2C42.168%2C46.899%2C38.02z%22%2F%3E%3C%2Fsvg%3E');
}
@keyframes hurueru {
    0% {transform: rotate(0deg);}
    68% {transform: rotate(0deg);}
    72% {transform: rotate(20deg);}
    76% {transform: rotate(0deg);}
    80% {transform: rotate(-20deg);}
    94% {transform: rotate(0deg);}
    88% {transform: rotate(20deg);}
    92% {transform: rotate(0deg);}
    96% {transform: rotate(-20deg);}
    100% {transform: rotate(0deg);}
}
@keyframes hurueru2 {
    0% {transform: rotate(25deg);}
    20% {transform: rotate(20deg);}
    30% {transform: rotate(15deg);}
    70% {transform: rotate(-15deg);}
    80% {transform: rotate(-20deg);}
    100% {transform: rotate(-25deg);}
}



.side_cart_block .side_cart_block_list{
	border-bottom: 1px solid #ccc;
	margin-bottom: 5px;
	padding-bottom: 5px
}
.side_cart_block .side_cart_block_shoukei{
	text-align:center
}
.side_cart_block ul ~ .side_cart_block_shoukei{
	text-align: right;
	font-weight: bold;
	color: red;
	font-size: 1.5em;
}
.side_cart_block_btn{
	display: grid;
	place-items: center;
	width: 100%;
	text-align: center;
	min-height: 40px;
	text-decoration: none;
	border: 2px solid var(--mainthema-background-color);
	color: var(--mainthema-background-color);
	font-weight: bold;
	margin-top: 10px;
	box-shadow: 1px 1px 2px #000;
	font-size: 1.5em;
	transition-property: border, color;
	-webkit-transition-property: border, color;
	-moz-transition-property: border, color;
	-o-transition-property: border, color;
	-ms-transition-property: border, color;
}
.side_cart_block_btn span{
	transition-property: letter-spacing;
	-webkit-transition-property: letter-spacing;
	-moz-transition-property: letter-spacing;
	-o-transition-property: letter-spacing;
	-ms-transition-property: letter-spacing;
}
.side_cart_block_btn:hover {
	color: var(--main-link-hovercolor);
	border-color: var(--main-link-hovercolor);
}
.side_cart_block_btn:hover span{
	letter-spacing: 0.1em;
}
.side_cart_block .side_cart_block_list li a {
	font-weight:bold;
}
.side_cart_block .side_cart_block_list li:last-child {
	display: grid;
	grid-template-columns: 1fr auto auto;
	place-items: center end;
	gap: 5px;
}
.side_cart_block .side_cart_block_list li:last-child span:last-child {
	font-weight:bold;
	color: red;
}


/*****************************************************************************************
******************************************************************************************
		▼categorypage用.css▼
******************************************************************************************
*****************************************************************************************/
	#LowerCategoryItems {
		margin: 30px 0;
		display: grid;
		gap: 20px;
	}
	#LowerCategoryItems h2 {
		font-size: 20px;
		font-weight: bold;
		grid-area: cate;
		border-bottom: 2px solid var(--main-font-color);
		display: grid;
		grid-template-columns: 1fr 20px;
		place-items: center;
	}
	#LowerCategoryItems h2::after {
		content: "";
		width: 0;
		height: 0;
		border-left: 6px solid transparent;
		border-right: 18px solid transparent;
		border-bottom: 10px solid var(--main-font-color);
		transform: translate(5px, 11px);
	}
	#LowerCategoryItems .lower_category_block {
		border: 1px solid #ccc;
		box-shadow: 1px 1px 2px black;
		padding: 10px;
		border-radius: 10px;
		display: grid;
		grid-template-areas: "cate more""items items";
		grid-template-columns: auto 1fr;
		gap: 10px 0;
	}
	#LowerCategoryItems .lower_category_content {
		grid-area: items;
	}
	#LowerCategoryItems .lower_category_table {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 5px;
	}
	#LowerCategoryItems .lower_category_item_link {
		display: grid;
		grid-template-rows: 100px 1fr;
		text-decoration: none;
	}
	#LowerCategoryItems .lower_category_item_no{
		display: grid;
		place-items: start center;
		word-break: break-all;
	}
	#LowerCategoryItems .lower_category_item_price{
		display: flex;
		text-decoration: none;
		color: red;
		font-weight: bold;
		justify-content: center;
		align-items: baseline;
		gap: 2px;
	}
	#LowerCategoryItems .lower_category_item_price span{
		font-size: 18px;
	}
	#LowerCategoryItems .lower_category_item_image {
		display: grid;
		place-items: center;
		overflow: hidden;
		position: relative;
	}
	#LowerCategoryItems .lower_category_item_image img {
		display: block;
	    max-width: min(100px, calc(120vw / 6));
		width: auto;
		margin: 0 auto;
	}
	#LowerCategoryItems .lower_category_item_image.simulation_bar::after {
		content: "simulation";
		position: absolute;
		left: -51px;
		top: 12px;
		background-color: #f00;
		color: #fff;
		width: 150px;
		height: 18px;
		display: grid;
		place-items: center;
		transform: rotate(-40deg);
		font-weight: bold;
		box-shadow: 1px 1px 2px rgb(0 0 0 / 50%);
		font-size: 10px;
	}
	#LowerCategoryItems .lower_category_more{
		display: grid;
		place-items: center end;
		grid-area: more;
	}
	#LowerCategoryItems .lower_category_more a{
		display: grid;
		place-items: center;
		height: 30px;
		font-size: 1.2em;
		text-decoration: none;
		font-weight: bold;
		grid-template-columns: 1fr 18px;
	}
	#LowerCategoryItems .lower_category_more a::after {
		content: "";
		width: 6px;
		height: 6px;
		border-top: 2px solid var(--main-link-color);
		border-right: 2px solid var(--main-link-color);
		transform: rotate(45deg) translate(-2px, 2px);
	}
	#LowerCategoryItems .lower_category_more a:hover::after {
		border-color: var(--main-link-hovercolor);
	}
	@media screen and (max-width: 768px){
		#LowerCategoryItems .lower_category_table {
			display: flex;
			overflow-x: auto;
			gap: 10px;
		}
		#LowerCategoryItems .lower_category_item_link{
			min-width: 110px;
		}
		#LowerCategoryItems .lower_category_item_image{
			border:1px solid  #ccc;
		}
		#LowerCategoryItems .lower_category_item_image img{
			width: 100px;
		}
	}

/*****************************************************************************************
******************************************************************************************
		▼categorysearch用.css▼
******************************************************************************************
*****************************************************************************************/

	#CategoryPageSearch .filter_search_box{
		display: grid;
		place-items: center;
	}
	#CategoryPageSearch .filter_search_box_title{
		font-size: 18px;
		font-weight: bold;
	}
	#CategoryPageSearch .filter_search_box_contents{
		display: grid;
		gap: 2px 5px;
		grid-template-columns: repeat(2, 1fr);
		width: 100%;
		background-color: #f6f6f6;
		padding: 10px;
	}
	#CategoryPageSearch .filter_search_btn{
		display: grid;
		place-items: center;
		width: 100%;
		height: 50px;
		border: 1px solid #ccc;
		text-decoration: none;
		font-size: 13px;
		font-weight: bold;
		background-color:#fff;
	}
	#CategoryPageSearch .filter_search_btn span {
		display: grid;
		place-items: center;
		gap: 5px;
		grid-template-columns: auto 1fr;
	}
	#CategoryPageSearch .filter_search_btn:hover {
		border-color: var(--main-link-hovercolor);
	}
	#CategoryPageSearch .filter_search_btn.filter_btn_active {
		border-color: var(--main-link-color);
		border-width: 3px;
		color: var(--main-link-color);
	}
	#CategoryPageSearch .filter_search_btn.filter_btn_active span:before{
		content: "";
		width: 6px;
		height: 10px;
		border-bottom: 3px solid var(--main-link-color);
		border-right: 3px solid var(--main-link-color);
		transform: rotate(45deg) translate(-1px, -2px);
	}
	#CategoryPageSearch .filter_search_box_contents_2,
	#CategoryPageSearch .filter_search_box_contents_3{
		grid-template-columns: 1fr;
	}
	#CategoryPageSearch .filter_search_iconarrow span:before {
		content: "";
		width: 0;
		height: 0;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-left: 10px solid var(--main-link-color);
	}
	#CategoryPageSearch .filter_search_iconarrow:hover span:before {
		border-left-color: var(--main-link-hovercolor);
	}
	#CategoryPageSearch .filter_search_iconarrow.filter_search_iconarrow_open span:before {
		transform: rotate(90deg) translate(1px,1px);
	}
	#CategoryPageSearch .filter_search_box_btnlist {
		display: none;
		flex-wrap: wrap;
		gap: 5px 10px;
		margin-top: 10px;
	}
	#CategoryPageSearch .filter_search_iconarrow_open + .filter_search_box_btnlist {
		display: flex;
	}
	#CategoryPageSearch .filter_search_box_btnlist a {
		padding: 5px 10px;
		border: 1px solid var(--main-link-color);
		text-decoration: none;
		background-color: white;
		display: flex;
		place-items: center;
		line-height: 20px;
	}
	#CategoryPageSearch .filter_search_box_btnlist a:hover,
	#CategoryPageSearch .filter_search_box_btnlist a.active{
		color: var(--main-link-hovercolor);
		border-color: var(--main-link-hovercolor);
	}
	#CategoryPageSearch .filter_search_box_btnlist a.active:before {
		content: "";
		width: 2px;
		height: 0;
		display: block;
		border-top: 4px solid transparent;
		border-bottom: 4px solid transparent;
		border-left: 8px solid var(--main-link-hovercolor);
	}
	#CategoryPageSearch .filter_search_btn.filter_disabled {
		color: #ccc;
		border-color: #ccc;
		cursor: default;
	}
	#CategoryPageSearch .filter_search_btn.filter_disabled span:before {
		border-left-color: #ccc;
	}
	#CategoryPageSearch .filter_search_fuzzy{
		width: 100%;
		display: flex;
		gap: 5px;
		margin-bottom: 10px;
	}
	#CategoryPageSearch .filter_search_fuzzy input[type="text"]{
		line-height: 1.2em;
		height: auto;
		padding: 5px;
		box-shadow: 1px 1px 1px black inset;
		max-width: 100px;
		width: 100%;
	}
	#CategoryPageSearch .filter_search_fuzzy button{
		border: 1px solid var(--main-link-color);
		color: var(--main-link-color);
		width: 50px;
		background-color: white;
		border-radius: 5px;
		cursor: pointer;
	}
	@media screen and (max-width: 768px){
		#CategoryPageSearch .filter_search_iconarrow_open + .filter_search_box_btnlist {
			display: grid;
			gap: 0;
		}
		#CategoryPageSearch .filter_search_box_btnlist a {
			padding: 16px 10px;
			border:none;
			text-decoration: underline;
		}
		#CategoryPageSearch .filter_search_box_btnlist a:not(:last-child) {
			border-bottom: 1px dotted #ccc;
		}
	}
/*****************************************************************************************
******************************************************************************************
		▼sortボタン用.css▼
******************************************************************************************
*****************************************************************************************/

	#ItemSortBox {
		display: grid;
		place-items: center start;
		grid-template-columns: 1fr auto;
		margin: 10px 0;
		background-color: #f6f6f6;
		padding: 10px;
	}
	#ItemSortBox .itemsort_title{
		font-size: 20px;
		font-weight: bold;
	}
	#ItemSortBox .itemsort_buttonwrap{
		display: flex;
	}
	#ItemSortBox .itemsort_button {
		padding: 0 5px;
		display: grid;
		grid-template-columns: 18px 1fr 16px;
		justify-content: center;
		font-size: 14px;
		border: 2px solid var(--main-link-color);
		background-color: white;
		border-radius: 5px;
		color: var(--main-link-color);
		cursor: pointer;
		place-items: center;
		gap: 2px;
		margin-left: 10px;
	}
	#ItemSortBox .itemsort_button span {
		line-height: 30px;
		grid-area: 1/2/2/3;
	}
	#ItemSortBox .itemsort_button:after {
		content: "";
		display: block;
		width: 5px;
		height: 5px;
		border-bottom: 2px solid var(--main-link-color);
		border-right: 2px solid var(--main-link-color);
		transform: rotate(45deg) translate(-2px ,-1px);
		grid-area: 1/3/2/4;
	}
	#ItemSortBox .itemsort_button:hover {
		border-color: var(--main-link-hovercolor);
		color: var(--main-link-hovercolor);
	}
	#ItemSortBox .itemsort_button:hover::after {
		border-color: var(--main-link-hovercolor);
	}
	#ItemSortButton .fa-long-arrow-alt-up {
		grid-area: 1/1/2/2;
		transform: translate(-3px, -2px);
		font-size: 14px;
		transition-property: transform;
		-webkit-transition-property: transform;
		-moz-transition-property: transform;
		-o-transition-property: transform;
		-ms-transition-property: transform;
	}
	#ItemSortButton .fa-long-arrow-alt-down {
		grid-area: 1/1/2/2;
		transform: translate(3px, 2px);
		font-size: 14px;
		transition-property: transform;
		-webkit-transition-property: transform;
		-moz-transition-property: transform;
		-o-transition-property: transform;
		-ms-transition-property: transform;
	}
	#ItemSortButton:hover .fa-long-arrow-alt-up {
		transform: translate(-3px, -4px);
	}
	#ItemSortButton:hover .fa-long-arrow-alt-down {
		transform: translate(3px, 4px);
	}
	#ItemSortList,
	#ItemDspList {
		display: none;
	}
	#ItemSortList.itemsort_list_open,
	#ItemDspList.itemsort_list_open {
		display: block;
	}
	#ItemSortList.itemsort_list_open .itemsort_list_bg,
	#ItemDspList.itemsort_list_open .itemsort_list_bg{
		display: block;
		opacity: 0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
	}
	#ItemSortBox .itemsort_list_ul {
		position: absolute;
		margin-top: 35px;
		margin-left: -100px;
		padding: 5px;
		border: 1px solid #ccc;
		box-shadow: 1px 1px 2px black;
		background-color: white;
		border-radius: 5px;
		z-index: 10;
	}
	#ItemSortBox .itemsort_list_ul a {
		font-size: 14px;
		line-height: 30px;
		display: grid;
		grid-template-columns: 17px 1fr;
		place-items: center start;
		padding: 0 10px;
		text-decoration: none;
		border-radius: 5px;
	}
	#ItemSortBox .itemsort_list_ul a::before {
		content: "";
	}
	#ItemSortBox .itemsort_list_ul a.sort_selected::before {
		width: 6px;
		height: 10px;
		border-bottom: 3px solid var(--main-link-color);
		border-right: 3px solid var(--main-link-color);
		transform: rotate(45deg) translate(-2px, -2px);
	}
	#ItemSortBox .itemsort_list_ul a:hover {
		background-color: var(--main-link-hovercolor);
		color: white;
	}
	#ItemSortBox .itemsort_list_ul a:hover::before {
		border-color: white;
	}
	@media screen and (max-width: 960px){
		#ItemSortBox .itemsort_list_ul{
			margin-left: -160px;
		}
	}
	
	@media screen and (max-width: 768px){
		#ItemSortBox .itemsort_buttonwrap{
			display: grid;
			grid-template-columns: 1fr auto;
			gap: 5px 0;
			place-items: start end;
		}
		#ItemSortBox .itemsort_button{
			font-size: 16px;
			font-size: 16px;
			grid-column: 1/2;
			margin: 0;
		}
		#ItemSortBox .itemsort_button span {
			line-height: 35px;
		}
		#ItemSortList, #ItemDspList{
			grid-column: 2/3;
		}
		#ItemSortBox .itemsort_list_ul{
			right: 0;
			margin-left:0;
			margin-right: 40px;
		}
	}
	
/*****************************************************************************************
******************************************************************************************
		▼検索ボックス.css▼
******************************************************************************************
*****************************************************************************************/
	#headerSearchBox .serch_box_wrap {
		display: flex;
		border-radius: 3px;
		overflow: hidden;
		background-color: white;
		place-items: center;
		height: 50px;
	}
	#headerSearchBox .serch_box_wrap .search_select {
		flex: 0 1 auto;
		padding: 0 10px;
		box-sizing: border-box;
		display: grid;
	}
	#headerSearchBox .serch_box_wrap .search_keyword {
		flex: 1 1 70%;
		border: none;
		border-width: 0 1px 0 1px;
		border-color: var(--mainthema-background-color);
		border-style: solid;
		box-sizing: border-box;
		height: 40px;
	}
	#headerSearchBox select[name="ct"],
	#MakerListOpen {
		display: block:;
		font-size: 1em;
		background-color: white;
		border: 1px solid black;
		width: 100%;
		grid-area: 1/1/2/2;
		border-radius: 4px;
		height: 40px;
		text-decoration:none;
	}
	#headerSearchBox input[name="keyword"] {
		width: 100%;
		border: none;
		height: 100%;
	}
	#headerSearchBox input[name="keyword"]:read-only {
		background-color: lightgray;
	}
	#headerSearchBox .search_button {
		background: none;
		height: 100%;
		font-size: 1.55em;
		cursor: pointer;
		flex: 0 0 50px;
		color: var(--main-link-color);
	}
	#headerSearchBox .search_button:hover {
		color: var(--main-link-hovercolor);
	}
	#MakerListOpen {
		display: flex;
		gap: 10px;
		place-items: center start;
		cursor: pointer;
		color: var(--main-link-color);
		border: none;
	}
	#MakerListOpen span {
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 100%;
		max-width: 100px;
		line-height: 20px;
	}
	#MakerListOpen::after {
		content: "";
		border-style: solid;
		border-width: 5px;
		border-color: transparent;
		border-top: 5px solid var(--main-link-color);
		border-bottom-width: 0;
		width: 0;
		height: 0;
		font-size: 0;
		line-height: 0;
	}
	#MakerListOpen:hover{
		color: var(--main-link-hovercolor);
	}
	#MakerListOpen:hover::after{
		border-top-color: var(--main-link-hovercolor);
	}
	#headerSearchBox #MakerListOpen ~ select[name=ct] {
		display: none;
	}
	@media screen and (max-width: 768px){
		#HeaderNavi #UserNavi {
			position: fixed;
			top: -200px;
			left: 0;
			right: 0;
			z-index: 1000;
			padding: 0px 4px 4px 4px;
		}
		#headerSearchBox .serch_box_wrap {
			display: grid;
			grid-template-columns: 1fr 50px;
			grid-template-rows: 60px 60px;
			grid-template-areas: "maker maker""keyword button";
			padding: 10px;
			margin: 0;
			height: auto;
		    place-items: center start;
		}
		#headerSearchBox .serch_box_wrap .search_select {
			grid-area: maker;
			border: 1px solid #ccc;
			padding: 0 10px;
		}
		#headerSearchBox .serch_box_wrap .search_keyword {
			width: 100%;
			height: 50px;
			border: 1px solid #ccc;
			grid-area: keyword;
		}
		#headerSearchBox .search_button {
			width: 100%;
			height: 50px;
			border: 1px solid #ccc;
			border-left: none;
			grid-area: button;
		}
		#MakerListOpen span{
			max-width: 100%;
		}
		#MakerListOpen::before {
			content: "メーカー選択：";
			white-space: nowrap;
		}
	}



/* 2: /home/jpnsports/sports-drecome.jp/public_html/css/design_type.css */

@charset "Shift_JIS";

/*
20150424_S.kawashima
	-- ファイル分割 --
*/


/******************************
▼▼▼全共通type別css▼▼▼
******************************/


.btnwrap_simple__flex{
	display: flex;
	justify-content: center;
	gap: 20px;
}

/**====================
///// ボタン関連 /////
====================**/

#SubmitButton1 {
	display: block;
	width: 160px;
	background-color: #666;
	margin: 10px auto;
	padding: 2px;
	border: 2px outset #999;
	/* 曲線 */
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

#SubmitButton1 span {
	display: block;
	padding: 10px 0;
	text-align: center;
	border: 1px solid #fff;
	font-weight: bold;
	text-shadow: 0 -1px 1px #333, -1px 0 1px #333, 1px 0 1px #000;
	color: #fff;
	/* 曲線 */
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}


/**** =sold out用？= ****/

#SubmitButton1.SubmitDisabled {
	background-color: #f00;
	border-color: #c00;
}


/**** =マウスオン時の変更点= ****/

a#SubmitButton1:hover {
	text-decoration: none;
	background-color: #555;
	border-color: #888;
}

a#SubmitButton1:hover span {
	padding-top: 9px;
	padding-bottom: 11px;
	padding-right: 2px;
	text-shadow: 0 -1px 1px #333, -1px 0 1px #333, 1px 2px 1px #000;
}


/**** =クリック時の変更点= ****/

a#SubmitButton1:active {
	background-color: #444;
}

a#SubmitButton1:active span {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 0;
	text-shadow: 0 -1px 0 #333, -1px 1px 1px #333, 1px 0 1px #000;
}


/**====================
///// ボタンタイプ /////
====================**/


/* ===== btn_type_1 ===== */

a.btn_type_1 {
	display: block;
	background-color: #eee;
	border: 2px solid #999;
	border-radius: 4px;
	padding: 5px;
	text-align: center;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
	/* アニメーション */
	transition-property: background-color, color;
	-webkit-transition-property: background-color, color;
	-moz-transition-property: background-color, color;
	-o-transition-property: background-color, color;
	-ms-transition-property: background-color, color;
	text-decoration: none;
}

a.btn_type_1 > span {
	vertical: middle;
}

a.btn_type_1:hover {
	text-decoration: none;
	background-color: #aaa;
	border-color: #777;
	color: #fff;
}


/* ===== btn_type_2 ===== */

a.btn_type_2 {
	background: #0b2265;
	border: 5px solid #0b2265;
	border-radius: 10px;
	color: #fff;
	display: block;
	line-height: 60px;
	position: relative;
	text-align: center;
	text-decoration: none;
	width: 240px;
	z-index: 2;
	font-weight: bold;
	font-size: 20px;
	/* アニメーション */
	transition-property: all;
	-webkit-transition-property: all;
	-moz-transition-property: all;
	-o-transition-property: all;
	-ms-transition-property: all;
	text-decoration: none;
}

a.btn_type_2:hover {
	background: none;
	border: 5px solid #0b2265;
	color: #0b2265;
	text-decoration: none;
	box-shadow: 0 0 5px 0 #00f;
	letter-spacing: .2em;
}

a.btn_type_2:after,
a.btn_type_2:before {
	background: #0b2265;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	width: 50%;
	/* アニメーション */
	transition-property: all;
	-webkit-transition-property: all;
	-moz-transition-property: all;
	-o-transition-property: all;
	-ms-transition-property: all;
}

a.btn_type_2:after {
	left: 0;
	top: 0;
	z-index: -1;
}

a.btn_type_2:before {
	right: 0;
	top: 0;
	z-index: -1;
}

a.btn_type_2:hover:after,
a.btn_type_2:hover:before {
	width: 10px;
	background-color: #0b2265;
}


/* ===== btn_type_3 ===== */

a.btn_type_3 {
	display: block;
	font-size: 15px;
	background: -moz-linear-gradient(top, #BFD9E5, #3D95B7 50%, #0080B3 50%, #0099CC);
	background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5, #3D95B7), color-stop(0.5, #0080B3), to(#0099CC));
	color: #fff!important;
	border-radius: 100px;
	border: 1px solid #0099CC;
	-moz-box-shadow: 1px 1px 1px rgba(000, 000, 000, 0.3), inset 0px 0px 3px rgba(255, 255, 255, 0.5);
	-webkit-box-shadow: 1px 1px 1px rgba(000, 000, 000, 0.3), inset 0px 0px 3px rgba(255, 255, 255, 0.5);
	text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
	width: 100px;
	padding: 10px;
	margin: 20px auto;
	text-align: center;
	letter-spacing: .5em;
	text-indent: .5em;
	text-decoration: none;
	text-decoration: none;
}


/* ===== btn_type_4 ===== */

.btn_type_4 {
	display: grid;
	place-items: center;
	font-size:20px;
	line-height:initial;
	width: 100%;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	cursor: pointer;
	background-color: #0b2265;
	background: linear-gradient(to bottom, #89c, #0b2265);
	background: -ms-linear-gradient(top, #89c, #0b2265);
	background: -moz-linear-gradient(top, #89c 0%, #0b2265);
	background: -webkit-gradient(linear, left top, left bottom, from(#89c), to(#0b2265));
	color: #fff!important;
	text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
	font-weight: bold;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
	transition-property: all;
	-webkit-transition-property: all;
	-moz-transition-property: all;
	-o-transition-property: all;
	-ms-transition-property: all;
	text-decoration: none;
	padding: 10px;
}

.btn_type_4:hover {
	text-decoration: none;
	color: #fff;
	background-color: #89c;
	background: linear-gradient(to bottom, #89c, #cdf);
	background: -ms-linear-gradient(top, #89c, #cdf);
	background: -moz-linear-gradient(top, #89c 0%, #cdf);
	background: -webkit-gradient(linear, left top, left bottom, from(#89c), to(#cdf));
}

.btn_type_4 > span:first-child {
	text-shadow: 1px 2px #000;
}

.btn_type_4 > span:nth-child(2) {
	font-size: 12px;
}

.btn_type_4.disabled {
	background-color: #ccc;
	background: linear-gradient(to bottom, #eee, #ccc);
	background: -ms-linear-gradient(top, #eee, #ccc);
	background: -moz-linear-gradient(top, #eee 0%, #ccc);
	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
	box-shadow: none;
}

.btn_type_4.disabled span {
	text-shadow: none;
	color: #999;
}


/* ===== btn_type_5 ===== */

.btn_type_5 {
	display: grid;
	place-items: center;
	font-size:20px;
	line-height:initial;
	width: 100%;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	cursor: pointer;
	background-color: #AF0000;
	background: linear-gradient(to bottom, #FF6161, #AF0000);
	background: -ms-linear-gradient(top, #FF6161, #AF0000);
	background: -moz-linear-gradient(top, #FF6161 0%, #AF0000);
	background: -webkit-gradient(linear, left top, left bottom, from(#FF6161), to(#AF0000));
	color: #fff!important;
	text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
	font-weight: bold;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
	transition-property: all;
	-webkit-transition-property: all;
	-moz-transition-property: all;
	-o-transition-property: all;
	-ms-transition-property: all;
	text-decoration: none;
	padding: 10px;
}

.btn_type_5:hover {
	text-decoration: none;
	color: #fff;
	background-color: #C88;
	background: linear-gradient(to bottom, #C88, #FCC);
	background: -ms-linear-gradient(top, #C88, #FCC);
	background: -moz-linear-gradient(top, #C88 0%, #FCC);
	background: -webkit-gradient(linear, left top, left bottom, from(#C88), to(#FCC));
}

.btn_type_5 > span:first-child {
	text-shadow: 1px 2px #000;
}

.btn_type_5 > span:nth-child(2) {
	font-size: 12px;
}

.btn_type_5.disabled {
	background-color: #ccc;
	background: linear-gradient(to bottom, #eee, #ccc);
	background: -ms-linear-gradient(top, #eee, #ccc);
	background: -moz-linear-gradient(top, #eee 0%, #ccc);
	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
	box-shadow: none;
	cursor: default;
}

.btn_type_5.disabled span {
	text-shadow: none;
	color: #999;
}
.btn_type_5.disabled:before {
	content: attr(data-disabled);
	font-size: 0.6em;
	line-height: 2em;
	color: #f00;
	text-shadow: none;
	display:block;
}


/* ===== btn_type_6 ===== */

.btn_type_6 {
	display: block;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	margin: 5px auto;
	cursor: pointer;
	/* 背景 */
	background-color: #8e8e8e;
	background: linear-gradient(to bottom, #8e8e8e, #5a5a5a);
	background: -ms-linear-gradient(top, #8e8e8e, #5a5a5a);
	background: -moz-linear-gradient(top, #8e8e8e 0%, #5a5a5a);
	background: -webkit-gradient(linear, left top, left bottom, from(#8e8e8e), to(#5a5a5a));
	/* 文字 */
	color: #fff!important;
	text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
	text-align: center;
	font-weight: bold;
	padding: 10px;
	/* 枠影 */
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
	/* アニメーション */
	transition-property: all;
	-webkit-transition-property: all;
	-moz-transition-property: all;
	-o-transition-property: all;
	-ms-transition-property: all;
	text-decoration: none;
}

.btn_type_6:hover {
	text-decoration: none;
	color: #fff;
	background-color: #8e8e8e;
	background: linear-gradient(to bottom, #8e8e8e, #efefef);
	background: -ms-linear-gradient(top, #8e8e8e, #efefef);
	background: -moz-linear-gradient(top, #8e8e8e 0%, #efefef);
	background: -webkit-gradient(linear, left top, left bottom, from(#8e8e8e), to(#efefef));
}

.btn_type_6 > span {
	display: block;
}

.btn_type_6 > span:first-child {
	text-shadow: 1px 2px #000;
}

.btn_type_6 > span:last-child {
	font-size: 12px;
	line-height: 1.5em;
	padding: 5px 0;
}

/* ===== btn_type_NewMem ===== */

.btn_type_NewMem {
	display: block;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	margin: 5px auto;
	/* 背景 */
	background-color: #AF0000;
	background: linear-gradient(to bottom, #FF6161, #AF0000);
	background: -ms-linear-gradient(top, #FF6161, #AF0000);
	background: -moz-linear-gradient(top, #FF6161 0%, #AF0000);
	background: -webkit-gradient(linear, left top, left bottom, from(#FF6161), to(#AF0000));
	/* 文字 */
	color: #fff!important;
	text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
	text-align: center;
	font-weight: bold;
	/* 枠影 */
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
	/* アニメーション */
	transition-property: all;
	-webkit-transition-property: all;
	-moz-transition-property: all;
	-o-transition-property: all;
	-ms-transition-property: all;
	text-decoration: none;
}

.btn_type_NewMem:hover {
	text-decoration: none;
	color: #fff;
	background-color: #C88;
	background: linear-gradient(to bottom, #C88, #FCC);
	background: -ms-linear-gradient(top, #C88, #FCC);
	background: -moz-linear-gradient(top, #C88 0%, #FCC);
	background: -webkit-gradient(linear, left top, left bottom, from(#C88), to(#FCC));
}


/* ===== btn_type_simple ===== */

.btn_type_simple {
	border:1px solid #000;
	background:none;
	padding:10px 20px;
	display:grid;
	place-items: center;
	cursor:pointer;
	min-width: 100px;
	text-decoration: none;
	user-select: none;
}
.btn_type_simple:hover {
	color: var(--main-link-hovercolor);
	border-color: var(--main-link-hovercolor);
	text-decoration: none;
}


@media screen and (max-width: 768px) {
	/* =768px以下の場合= */
	/* 1カラム */
	#SubmitButton1 {
		width: 100%;
	}
}

/* ===== btn_type_simple2 ===== */
.btn_type_simple2 {
	display: grid;
	grid-template-areas:"icon text";
	grid-template-columns: auto 1fr;
	place-items:center;
	border: 2px solid var(--mainthema-background-color);
	border-radius: 6px;
	width: 100%;
	text-align: center;
	text-decoration: none!important;
	color: var(--mainthema-background-color);
	font-weight: bold;
	box-shadow: 2px 2px 1px #000;
	cursor: pointer;
	transition-property: border, background-color, color;
	-webkit-transition-property: border, background-color, color;
	-moz-transition-property: border, background-color, color;
	-o-transition-property: border, background-color, color;
	-ms-transition-property: border, background-color, color;
}
.btn_type_simple2 span{
	width: 100%;
	line-height: 36px;
	grid-area: text;
}

.btn_type_simple2 > i {
	border-right: 1px dashed var(--mainthema-background-color);
	line-height:26px;
	font-size:20px;
	width:40px;
	grid-area: icon;
}
.btn_type_simple2:hover {
	border-color: var(--main-link-hovercolor);
	color: var(--main-link-hovercolor);
}
.btn_type_simple2:hover i {
	border-right: 1px dashed var(--main-link-hovercolor);
}
.btn_type_simple2 span > i {
	margin-left: 10px;
}

/* ===== btn_type_simple2_strong ===== */
.btn_type_simple2_strong {
	display: grid;
	grid-template-areas:"icon text";
	grid-template-columns: auto 1fr;
	place-items:center;
	border: 2px solid #f00;
	border-radius: 6px;
	width: 100%;
	text-align: center;
	text-decoration: none!important;
	color: #f00;
	font-weight: bold;
	transition-property: border, background-color, color;
	-webkit-transition-property: border, background-color, color;
	-moz-transition-property: border, background-color, color;
	-o-transition-property: border, background-color, color;
	-ms-transition-property: border, background-color, color;
}
.btn_type_simple2_strong span{
	width: 100%;
	line-height: 36px;
	grid-area: text;
}

.btn_type_simple2_strong > i {
	border-right: 1px dashed var(--mainthema-background-color);
	line-height:26px;
	font-size:20px;
	width:40px;
	grid-area: icon;
}
.btn_type_simple2_strong:hover {
	border-color: var(--main-link-hovercolor);
	color: #fff;
	background-color: #f00;
}
.btn_type_simple2_strong span > i {
	margin-left: 10px;
}

/* ===== btn_type_flat1 ===== */
.btn_type_flat1 {
	width: 100%;
	display: block;
    cursor: pointer;
	text-align: center;
	text-decoration: none!important;
	margin: auto;
	background-color: #8799cd;
	color: var(--mainthema-link-color);
	border-radius: 10px;
	padding: 15px 5px;
	position:relative;
	transition-property: background-color;
	-webkit-transition-property: background-color;
	-moz-transition-property: background-color;
	-o-transition-property: background-color;
	-ms-transition-property: background-color;
}
.btn_type_flat1 span {
	display: block;
	line-height: 1.4em;
}
.btn_type_flat1 span:nth-child(1) {
	font-size: 1.2em;
	font-weight:bold;
	text-shadow: 2px 2px 2px #000;
	letter-spacing: 0;
	transition-property: letter-spacing;
	-webkit-transition-property: letter-spacing;
	-moz-transition-property: letter-spacing;
	-o-transition-property: letter-spacing;
	-ms-transition-property: letter-spacing;
}
.btn_type_flat1 span:nth-child(2) {
    font-size: 0.7em;
}
.btn_type_flat1 i {
	padding: 0 10px;
}
.btn_type_flat1:before {
	content: "";
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
	border: 5px solid rgba(0,0,0,0.3);
	border-radius: 10px;
}
.btn_type_flat1:hover {
	color:#fff;
	background-color:rgba(var(--mainthema-background-rgb), 0.5);
}
.btn_type_flat1:hover span:nth-child(1) {
	letter-spacing:2px;
}

/* ===== btn_type_flat1_strong ===== */
.btn_type_flat1_strong {
	display: block;
    cursor: pointer;
	width: 100%;
	text-align: center;
	text-decoration: none!important;
	margin: auto;
	background-color: #f00;
	color: #fff;
	border-radius: 10px;
	padding: 15px 5px;
	position:relative;
	transition-property: background-color;
	-webkit-transition-property: background-color;
	-moz-transition-property: background-color;
	-o-transition-property: background-color;
	-ms-transition-property: background-color;
}
.btn_type_flat1_strong span {
	display: block;
	line-height: 1.4em;
}
.btn_type_flat1_strong span:nth-child(1) {
	font-size: 1.2em;
	font-weight:bold;
	text-shadow: 2px 2px 2px #000;
	letter-spacing: 0;
	transition-property: letter-spacing;
	-webkit-transition-property: letter-spacing;
	-moz-transition-property: letter-spacing;
	-o-transition-property: letter-spacing;
	-ms-transition-property: letter-spacing;
}
.btn_type_flat1_strong span:nth-child(2) {
    font-size: 0.7em;
}
.btn_type_flat1_strong i {
	padding: 0 10px;
}
.btn_type_flat1_strong:not(.disabled):before {
	content: "";
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
	border: 5px solid rgba(0,0,0,0.3);
	border-radius: 10px;
}
.btn_type_flat1_strong.disabled {
	background-color:#ccc;
	cursor:initial;
}
.btn_type_flat1_strong.disabled span{
	text-shadow:none;
}
.btn_type_flat1_strong.disabled:before {
	content: attr(data-disabled);
	font-size: 0.6em;
	line-height: 2em;
	color: #f00;
	display: block;
}
.btn_type_flat1_strong:hover:not(.disabled) {
	color:#fff;
	background-color:rgba(255,0,0,0.5);
}
.btn_type_flat1_strong:hover:not(.disabled) span:nth-child(1) {
	letter-spacing:2px;
}



/* 3: /home/jpnsports/sports-drecome.jp/public_html/css/input_label.css */

/**====================
///// チェックボックスタイプ /////
====================**/

/* ===== Checkbox_type1 =====
	/**** =input= ****/
		input[type="checkbox"].Checkbox_type1 					{ display             : none; }
	/**** =label= ****/
		input[type="checkbox"].Checkbox_type1 + label 			{ cursor              : pointer;
																  display             : block;
																  padding-left        : 25px;
																  position            : relative; }
	/**** =span= ****/
		input[type="checkbox"].Checkbox_type1 + label > span 	{ -moz-user-select    : none;
																  -ms-user-select     : none;
																  -webkit-user-select : none;
																  width               : auto!important;
																  text-indent         : 0 !important;
																  line-height         : 1.2em;
																  user-select         : none;
																  border-bottom       : 2px solid #fff;
																/* アニメーション */
																  transition-property                : border-color;
																  -webkit-transition-property        : border-color;
																  -moz-transition-property           : border-color;
																  -o-transition-property             : border-color;
																  -ms-transition-property            : border-color; }
	/**** =before(枠)= ****/
		input[type="checkbox"].Checkbox_type1 + label:before 	{ content             : "";
																  display             : block;
																  box-sizing          : border-box;
																/* サイズ */
																  width               : 14px; 
																  height              : 14px;
																/* ポジション */
																  position            : absolute;
																  top                 : 50%;
																  left                : 5px;
																  margin-top          : -7px;
																/* 枠 */
																  border-color        : #ccc;
																  border-style        : solid;
																  border-width        : 2px; 
																/* 背景 */
																  background-color    : #fff;
																/* アニメーション */
																  transition-property                : border-color,background-color;
																  -webkit-transition-property        : border-color,background-color;
																  -moz-transition-property           : border-color,background-color;
																  -o-transition-property             : border-color,background-color;
																  -ms-transition-property            : border-color,background-color; }
	/**** =after(マーク)= ****/
		input[type="checkbox"].Checkbox_type1 + label:after 	{ content             : "";
																  display             : block;
																/* サイズ */
																  width               : 4px;
																  height              : 10px;
																/* ポジション */
																  position            : absolute;
																  top                 : 50%;
																  left                : 9px;
																  margin-top          : -10px;
																/* 初期値非表示 */
																  visibility          : hidden;
																/* マーク */
																  border-color        : #0b2265;
																  border-style        : solid;
																  border-width        : 0 3px 3px 0;
																  transform           : rotate(45deg);
																  -webkit-transform   : rotate(45deg);
																  -o-transform        : rotate(45deg);
																  -ms-transform       : rotate(45deg);
																  -moz-transform      : rotate(45deg); }
	/**** =before(枠)：hover= ****/
		input[type="checkbox"].Checkbox_type1 + label:hover:before 
																{ background-color    : #eee;
																  border-color        : #89a; }
	/**** =after(マーク)：checked= ****/
		input[type="checkbox"].Checkbox_type1[type="checkbox"]:checked + label:after 
																{ visibility          : visible; }
	/**** =before(枠)：hover= ****/
		input[type="checkbox"].Checkbox_type1 + label:hover > span 
																{ border-color        : #f00; }
		input[type="checkbox"].Checkbox_type1:focus + label > span 
																{ border-color        : #f00; }




/**====================
///// ラジオボタンタイプ /////
====================**/
/* ===== radio_type1 =====
	/**** =input= ****/
		input[type="radio"].radio_type1							{ display             : none; }
	/**** =label= ****/
		input[type="radio"].radio_type1 + label					{ cursor              : pointer;
																  display             : table;
																  padding-left        : 25px!important;
																  position            : relative;
																  margin              : 10px; }
	/**** =span= ****/
		input[type="radio"].radio_type1 + label > span			{ -moz-user-select    : none;
																  -ms-user-select     : none;
																  -webkit-user-select : none;
																  line-height         : 1.2em;
																  text-indent         : 0 !important;
																  user-select         : none;
																  border-bottom              : 2px solid #fff;
																/* アニメーション */
																  transition-property                : border-color;
																  -webkit-transition-property        : border-color;
																  -moz-transition-property           : border-color;
																  -o-transition-property             : border-color;
																  -ms-transition-property            : border-color; } 
	/**** =before(枠)= ****/
		input[type="radio"].radio_type1 + label:before			{ content             : "";
																  display             : block;
																  box-sizing          : border-box;
																/* サイズ */
																  width               : 15px; 
																  height              : 15px;
																/* ポジション */
																  position            : absolute;
																  top                 : 50%;
																  left                : 5px;
																  margin-top          : -7px;
																/* 枠 */
																  border-color        : #ccc;
																  border-style        : solid;
																  border-width        : 2px; 
																  border-radius       : 50%;
																/* アニメーション */
																  transition-property                : border-color,background-color;
																  -webkit-transition-property        : border-color,background-color;
																  -moz-transition-property           : border-color,background-color;
																  -o-transition-property             : border-color,background-color;
																  -ms-transition-property            : border-color,background-color; }
	/**** =after(マーク)= ****/
		input[type="radio"].radio_type1 + label:after			{ content             : "";
																  display             : block;
																  box-sizing          : border-box;
																/* サイズ */
																  width               : 7px;
																  height              : 7px;
																/* ポジション */
																  position            : absolute;
																  top                 : 50%;
																  left                : 9px;
																  margin-top          : -3px;
																/* マーク */
																  border              : 2px solid #0b2265;
																  background-color    : #0b2265; 
																  border-radius       : 50%; 
																/* 初期非表示 */
																  visibility          : hidden; }

	/**** =before(枠)：hover= ****/
		input[type="radio"].radio_type1 + label:hover:before,
		input[type="radio"].radio_type1:focus + label:before	{ background-color    : #eee;
																  border-color        : #89a; }
	/**** =after(マーク)：checked= ****/
		input[type="radio"].radio_type1:checked + label:after	{ visibility          : visible; }
	/**** =span(内容)：hover= ****/
		input[type="radio"].radio_type1 + label:hover > span,
		input[type="radio"].radio_type1:focus + label > span	{ border-color       : #f00; }



/**====================
///// ラジオボタンタイプ(labelにclassを設定するタイプ) /////
///// 使用例：
/////      <label class="radio_type1"><input type="radio" name="radio1" value="1" /><span>使用例1</span></label>
/////      <label class="radio_type1"><input type="radio" name="radio1" value="2" /><span>使用例2</span></label>
====================**/
/* ===== radio_type1 =====
	/**** =input= ****/
		label.radio_type1 input[type="radio"]					{ display             : none; }
	/**** =label= ****/
		label.radio_type1										{ cursor              : pointer;
																  display             : table;
																  padding             : 0 5px 0 25px;
																  position            : relative; }
	/**** =span= ****/
		label.radio_type1 > span								{ padding             : 0;
																  -moz-user-select    : none;
																  -ms-user-select     : none;
																  -webkit-user-select : none;
																  line-height         : 1.2em;
																  text-indent         : 0 !important;
																  user-select         : none;
																  border-bottom       : 2px solid rgba(255, 0, 0, 0);
																  line-height: 36px;
																  padding: 0 5px;
																/* アニメーション */
																  transition-property                : border-color;
																  -webkit-transition-property        : border-color;
																  -moz-transition-property           : border-color;
																  -o-transition-property             : border-color;
																  -ms-transition-property            : border-color; } 
	/**** =before(枠)= ****/
		label.radio_type1 > span:before								{ content             : "";
																  display             : block;
																  box-sizing          : border-box;
																/* サイズ */
																  width               : 15px; 
																  height              : 15px;
																/* ポジション */
																  position            : absolute;
																  top                 : 50%;
																  left                : 5px;
																  margin-top          : -8px;
																/* 枠 */
																  border-color        : #ccc;
																  border-style        : solid;
																  border-width        : 2px; 
																  border-radius       : 50%;
																/* アニメーション */
																  transition-property                : border-color,background-color;
																  -webkit-transition-property        : border-color,background-color;
																  -moz-transition-property           : border-color,background-color;
																  -o-transition-property             : border-color,background-color;
																  -ms-transition-property            : border-color,background-color; }
	/**** =after(マーク)= ****/
		label.radio_type1 > span:after							{ content             : ""!important;
																  display             : block!important;
																  box-sizing          : border-box;
																/* サイズ */
																  width               : 7px;
																  height              : 7px;
																/* ポジション */
																  position            : absolute;
																  top                 : 50%;
																  left                : 9px;
																  margin-top          : -4px;
																/* マーク */
																  border              : 2px solid #0b2265;
																  background-color    : #0b2265; 
																  border-radius       : 50%; 
																/* 初期非表示 */
																  visibility          : hidden; }

	/**** =before(枠)：hover= ****/
		label.radio_type1 input[type="radio"]:not([disabled]):hover + span:before,
		label.radio_type1 input[type="radio"]:not([disabled]):focus + span:before
																{ background-color    : #eee;
																  border-color        : #89a; }
	/**** =after(マーク)：checked= ****/
		label.radio_type1 input[type="radio"]:checked + span:after
																{ visibility          : visible; }
	/**** =span(内容)：hover= ****/
		label.radio_type1 input[type="radio"]:hover + span,
		label.radio_type1 input[type="radio"]:focus + span	{ border-color            : #f00; }
	/**** =img ****/
		label.radio_type1 img 									{ width               : auto;
																  height              : auto;
																  vertical-align      : middle; }
	/**** =disabled ****/
		label.radio_type1 input[type="radio"][disabled] + span  { color               : #ccc;
																  text-decoration     : none; }


/**====================
///// ラジオボタンタイプ(labelにclassを設定するタイプ) /////
///// 使用例：
/////      <label class="radio_type0"><input type="radio" name="radio1" value="1" /><span>使用例1</span></label>
/////      <label class="radio_type0"><input type="radio" name="radio1" value="2" /><span>使用例2</span></label>
====================**/
/* ===== radio_type0 =====
	/**** =input= ****/
		label.radio_type0 input[type="radio"]					{ display             : none; }
	/**** =label= ****/
		label.radio_type0										{ cursor              : pointer;
																  display             : table;
																  padding             : 0 5px 0 25px;
																  position            : relative; }
	/**** =span= ****/
		label.radio_type0 > span								{ padding             : 0;
																  -moz-user-select    : none;
																  -ms-user-select     : none;
																  -webkit-user-select : none;
																  line-height         : 1.2em;
																  text-indent         : 0 !important;
																  user-select         : none;
																  border-bottom       : 2px solid rgba(255, 0, 0, 0);
																/* アニメーション */
																  transition-property                : border-color;
																  -webkit-transition-property        : border-color;
																  -moz-transition-property           : border-color;
																  -o-transition-property             : border-color;
																  -ms-transition-property            : border-color; } 
	/**** =before(枠)= ****/
		label.radio_type0 > span:before							{ content             : "";
																  display             : block;
																/* サイズ */
																  width               : 1em; 
																  height              : 1em;
																/* ポジション */
																  position            : absolute;
																  top                 : 0;
																  bottom              : 0;
																  left                : 0;
																  margin              : auto;
																/* 枠 */
																  border-color        : #ccc;
																  border-style        : solid;
																  border-width        : 2px; 
																  border-radius       : 50%;
																/* アニメーション */
																  transition-property                : border-color,background-color;
																  -webkit-transition-property        : border-color,background-color;
																  -moz-transition-property           : border-color,background-color;
																  -o-transition-property             : border-color,background-color;
																  -ms-transition-property            : border-color,background-color; }
	/**** =after(マーク)= ****/
		label.radio_type0 > span:after							{ content             : "";
																  display             : block;
																/* サイズ */
																  width               : 1em; 
																  height              : 1em;
																/* ポジション */
																  position            : absolute;
																  top                 : 0;
																  bottom              : 0;
																  left                : 0;
																  margin              : auto;
																/* 枠 */
																  border-color        : #ccc;
																  border-style        : solid;
																  border-width        : 2px; 
																  border-radius       : 50%; }
										
										
										

	/**** =before(枠)：hover= ****/
		label.radio_type0 input[type="radio"]:not([disabled]):hover + span:before,
		label.radio_type0 input[type="radio"]:not([disabled]):focus + span:before
																{ background-color    : #eee;
																  border-color        : #89a; }
	/**** =after(マーク)：checked= ****/
		label.radio_type0 input[type="radio"]:checked + span:after
																{ visibility          : visible; }
	/**** =span(内容)：hover= ****/
		label.radio_type0 input[type="radio"]:hover + span,
		label.radio_type0 input[type="radio"]:focus + span	{ border-color            : #f00; }
	/**** =img ****/
		label.radio_type0 img 									{ width               : auto;
																  height              : auto;
																  vertical-align      : middle; }
	/**** =disabled ****/
		label.radio_type0 input[type="radio"][disabled] + span  { color               : #ccc;
																  text-decoration     : none; }

/* ===== radio_type2 =====
	/**** =input= ****/
		label.radio_type2 input[type="radio"]					{ display             : none; }
	/**** =label= ****/
		label.radio_type2										{ cursor              : pointer;
																  display             : table;
																  padding-left        : 25px!important;
																  position            : relative;
																  margin              : 10px; }
	/**** =span= ****/
		label.radio_type2 > span								{ padding             : 0;
																  display             : inline-block;
																  -moz-user-select    : none;
																  -ms-user-select     : none;
																  -webkit-user-select : none;
																  line-height         : 1.2em;
																  text-indent         : 0 !important;
																  user-select         : none;
																  border-bottom       : 2px solid rgba(255, 0, 0, 0);;
																/* アニメーション */
																  transition-property                : border-color;
																  -webkit-transition-property        : border-color;
																  -moz-transition-property           : border-color;
																  -o-transition-property             : border-color;
																  -ms-transition-property            : border-color; } 
	/**** =before(枠)= ****/
		label.radio_type2 > span:before							{ content             : "";
																  display             : block;
																  box-sizing          : border-box;
																/* サイズ */
																  width               : 15px; 
																  height              : 15px;
																/* ポジション */
																  position            : absolute;
																  top                 : 50%;
																  left                : 5px;
																  margin-top          : -9px;
																/* 枠 */
																  border-color        : #ccc;
																  border-style        : solid;
																  border-width        : 2px; 
																  border-radius       : 50%;
																/* アニメーション */
																  transition-property                : border-color,background-color;
																  -webkit-transition-property        : border-color,background-color;
																  -moz-transition-property           : border-color,background-color;
																  -o-transition-property             : border-color,background-color;
																  -ms-transition-property            : border-color,background-color; }
	/**** =after(マーク)= ****/
		label.radio_type2 > span:after									{ content             : "";
																  display             : block;
																  box-sizing          : border-box;
																/* サイズ */
																  width               : 15px;
																  height              : 15px;
																/* ポジション */
																  position            : absolute;
																  top                 : 50%;
																  left                : 5px;
																  margin-top          : -9px;
																/* マーク */
																  border              : 2px solid #ccc;
																  background-color    : #f00; 
																  border-radius       : 50%; 
																/* 初期非表示 */
																  visibility          : hidden; }

	/**** =before(枠)：hover= ****/
		label.radio_type2 span:hover:before,
		label.radio_type2 input[type="radio"]:focus + span:before
																{ background-color    : #eee;
																  border-color        : #89a; }
	/**** =after(マーク)：checked= ****/
		label.radio_type2 input[type="radio"]:checked + span:after
																{ visibility          : visible; }
	/**** =span(内容)：hover= ****/
		label.radio_type2 input[type="radio"]:hover + span,
		label.radio_type2 input[type="radio"]:focus + span	{ border-color        : #f00; }
	/**** =img ****/
		label.radio_type2 img 									{ width               : auto;
																  height              : auto;
																  vertical-align      : middle; }





/**====================
///// チェックボックス(labelにclassを設定するタイプ) ver.2 /////
///// 使用例：
/////      <label class="Checkbox_type1"><input type="checkbox" name="check" value="1" /><span>使用例1</span></label>
====================**/
	/**** =input= ****/
		label.Checkbox_type1 input[type="checkbox"] 			{ display             : none; }
	/**** =label= ****/
		label.Checkbox_type1		 							{ cursor              : pointer;
																  /* padding-left        : 1.2em; */
																  position            : relative; }
	/**** =span= ****/
		label.Checkbox_type1 > span 							{ -moz-user-select    : none;
																  -ms-user-select     : none;
																  -webkit-user-select : none;
																  width               : auto!important;
																  text-indent         : 0 !important;
																  line-height         : 1.2em;
																  user-select         : none;
																  line-height: 36px;
																  padding: 0 5px;
																/* アニメーション */
																  transition-property                : border-color;
																  -webkit-transition-property        : border-color;
																  -moz-transition-property           : border-color;
																  -o-transition-property             : border-color;
																  -ms-transition-property            : border-color; }
	/**** =before(枠)= ****/
		label.Checkbox_type1 > span:before 						{ content             : "\f0c8";
																  display             : inline-block;
																  font-weight         : normal;
																  font-family         : 'Font Awesome 5 Free';
																  width               : 1.2em; }
	/**** =before：hover= ****/
		label.Checkbox_type1:hover span
																{ /*color               : #333;*/ }
	/**** =checked= ****/
		label.Checkbox_type1 [type="checkbox"]:checked + span
																{ background          : -moz-linear-gradient(transparent 65%, #ffd700 65%);
																  background          : -webkit-linear-gradient(transparent 65%, #ffd700 65%);
																  background          : linear-gradient(transparent 65%, #ffd700 65%); }
		label.Checkbox_type1 [type="checkbox"]:checked + span:before
																{ content             : "\f14a"; }
	/**** =before(枠)：hover= ****/
		label.Checkbox_type1:hover > span,
		label.Checkbox_type1:focus > span
																{  }
																
	/**** =disabled= ****/
		label.Checkbox_type1 > input[disabled] + span			{ color               : #ccc;
																  border-bottom       : 2px solid rgba(255, 0, 0, 0)!important; }
																  
		label.Checkbox_type1 > input[disabled] + span:before	{ border-color        : #eee;
																  background-color    : rgba(255, 0, 0, 0)!important; }
																  
		label.Checkbox_type1 > input[disabled] + span:after		{ visibility          : hidden!important; }



/**====================
///// 数字inputタイプ(labelにclassを設定するタイプ) /////
///// 使用例：
/////      <label class="numberbox_type1"><input type="text" name="text1" value="1" /><span>使用例1</span></label>
====================**/

	label.numberbox_type1							{ display: inline-block;
													  width : 80px;
													  position: relative; }
	label.numberbox_type1 input[type="text"]		{ display: block;
													  width: 60px; }
	label.numberbox_type1 i.far						{ font-size: 20px;
													  display: block;
													  position: absolute; }
	label.numberbox_type1 i.number_up				{ cursor: pointer;
													  font-size: 20px;
													  display: block;
													  position: absolute;
													  top: 0;
													  right: 0; }
	label.numberbox_type1 i.number_down				{ cursor: pointer;
													  font-size: 20px;
													  display: block;
													  position: absolute;
													  bottom: 0;
													  right: 0; }

/**====================
///// ラジオボタンタイプ(labelにclassを設定するタイプ) 最新(簡易版) /////
///// 使用例：
/////      <label class="radio_type_def"><input type="radio" name="radio1" value="1" /><span>使用例1</span></label>
/////      <label class="radio_type_def"><input type="radio" name="radio1" value="2" /><span>使用例2</span></label>
====================**/
	label.radio_type_def							{ cursor: pointer; }
	label.radio_type_def input[type="radio"]		{ display: none; }
	label.radio_type_def span						{ display: grid;
													  min-height: 30px;
													  place-items: center start;
													  grid-template-columns: 24px 1fr;
													  padding: 5px 10px 5px 0;
													  border: 1px solid #0075ff;
													  font-weight: bold; }
	label.radio_type_def span::before				{ content: "";
													  width: 12px;
													  height: 12px;
													  border: 1px solid #666;
													  display: block;
													  justify-items: center;
													  align-items: center;
													  margin-left: 6px;
													  border-radius: 50px;
													  box-sizing: border-box; }
	label.radio_type_def input[type="radio"]:checked ~ span 		{ border-color: #0075ff;
																	  background-color: lemonchiffon;
																	  color: #333; }
	label.radio_type_def input[type="radio"]:checked ~ span:before 	{ background-color: #fff;
																	  border-color: #0075ff;
																	  border-width: 4px; }
	label.radio_type_def input[type="radio"][disabled] ~ span 		{ border-color: #ccc!important;
																	  color: #ccc!important; }
	label.radio_type_def input[type="radio"][disabled] ~ span:before { color:#ccc!important; }

/**====================
///// チェックボックス(labelにclassを設定するタイプ) 最新(簡易版) /////
///// 使用例：
/////      <label class="checkbox_type_def"><input type="checkbox" name="check1" value="1" /><span>使用例1</span></label>
====================**/
	label.checkbox_type_def							{ cursor: pointer; }
	label.checkbox_type_def input[type="checkbox"]		{ display: none; }
	label.checkbox_type_def span					{ display: grid;
													  min-height: 30px;
													  place-items: center start;
													  grid-template-columns: 24px 1fr;
													  padding: 5px 10px 5px 0;
													  border: 1px solid #0075ff;
													  font-weight: bold; }
	label.checkbox_type_def span::before			{ content: "\f0c8";
													  font-family: 'Font Awesome 5 Free';
													  text-align: center;
													  width: 100%;
													  font-weight: normal; }
	label.checkbox_type_def input[type="checkbox"]:checked ~ span 			{ border-color: #0075ff;
																		  background-color: lemonchiffon;
																		  color: #333; }
	label.checkbox_type_def input[type="checkbox"]:checked ~ span:before 	{ content: "\f14a"; }
	label.checkbox_type_def input[type="checkbox"][disabled] ~ span 		{ border-color: #ccc!important;
																		  color: #ccc!important; }
	label.checkbox_type_def input[type="checkbox"][disabled] ~ span:before { color:#ccc!important; }


/**====================
///// 電話番号用input(labelにclassを設定しdata-telnumを設定するタイプ) /////
///// 使用例：
/////      <label class="input_type_tel" data-telnum="+33-"><input type="tel" name="tel" value="" /></label>
====================**/
	label.input_type_tel[data-telnum]{
		display: grid;
		grid-template-columns: auto 1fr;
	}
	label.input_type_tel[data-telnum]::before {
		content: attr(data-telnum);
		height: 100%;
		display: grid;
		place-items: center;
		box-shadow: inset 2px 2px 2px #eee;
		box-shadow: inset 2px 2px 2px rgb(0 0 0 / 10%);
		border-radius: 4px;
		border: 1px solid #ccc;
		border-right: none;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		box-sizing: border-box;
		padding: 5px;
	}
	label.input_type_tel[data-telnum] > input {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-left: none;
		box-shadow: inset 0px 2px 2px #eee;
		box-shadow: inset 0px 2px 2px rgb(0 0 0 / 10%);
	}	
	label.input_type_tel[data-telnum]:hover::before {
		border-color: black;
	}
	
	.select_type_def {
		position: relative;
		display: inline-block;
	}
	.select_type_def:before {
		content: "\f078";
		font-family: 'Font Awesome 5 Free';
		width: 30px;
		display: grid;
		place-items: center;
		position: absolute;
		top: 8px;
		bottom: 8px;
		right: 0;
		border-left: 1px solid #0075ff;
		color: #0075ff;
		font-weight: bold;
		pointer-events: none;
	}
	.select_type_def select {
		-webkit-appearance: none;
		appearance: none;
		padding-right: 35px;
		min-width: 80px;
	}


/* 4: /home/jpnsports/sports-drecome.jp/public_html/css/ui/jquery-ui.tabs.css */

/*!
 * jQuery UI Tabs 1.9.2
 * http://jqueryui.com
 *
 * Copyright 2012 jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Tabs#theming
 */

/* border險ｭ螳?*/
.ui-tabs .ui-tabs-nav li				{ border                : 1px solid #ccc; }
.ui-tabs .ui-tabs-panel					{ border                : 1px solid #ccc; }
.ui-tabs .ui-tabs-nav li:last-child		{ border-right          : 1px solid #ccc; }



.ui-tabs 								{ position              : relative;
										  padding               : .2em; zoom: 1; } 
/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav 					{ display               : table;
										  width                 : 100%; }
.ui-tabs .ui-tabs-nav li 				{ position              : relative;
										  top                   : 0;
										  border-right          : 0;
										  white-space           : nowrap;
										  display               : table-cell;
										  text-align            : center;
										  border-radius         : 5px 5px 0 0;
										  padding               : 5px 0;
										/* 繧ｰ繝ｩ繝??繧ｷ繝ｧ繝ｳ */
										  background            : #ffffff; /* Old browsers */
										  background            : -moz-linear-gradient(top, #ffffff 0%, #e9e9e9 100%); /* FF3.6+ */
										  background            : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e9e9e9)); /* Chrome,Safari4+ */
										  background            : -webkit-linear-gradient(top, #ffffff 0%,#e9e9e9 100%); /* Chrome10+,Safari5.1+ */
										  background            : -o-linear-gradient(top, #ffffff 0%,#e9e9e9 100%); /* Opera 11.10+ */
										  background            : -ms-linear-gradient(top, #ffffff 0%,#e9e9e9 100%); /* IE10+ */
										  background            : linear-gradient(to bottom, #ffffff 0%,#e9e9e9 100%); /* W3C */
										  filter                : progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9e9e9',GradientType=0 ); /* IE6-9 */  }
.ui-tabs .ui-tabs-nav li a 				{ display               : block;
										  width                 : 100%; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active { border-bottom         : 0;
										  background            : none; }
.ui-tabs .ui-tabs-panel 				{ display               :  block;
										  border-top            : 0;
										  padding               : 1em 1.4em;
										  background            : none; }


/* 5: /home/jpnsports/sports-drecome.jp/public_html/css/ui/jquery-ui.accordion.css */

/*!
 * jQuery UI Accordion 1.9.2
 * http://jqueryui.com
 *
 * Copyright 2012 jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Accordion#theming
 */

.ui-accordion-header a							{ display             : block;
												  line-height         : 25px;
												  height              : 25px; }

.MenuTitle.ui-accordion-header					{ position            : relative; }

.MenuTitle.ui-accordion-header:before			{ content             : "";
												  position            : absolute;
												  right               : .5em;
												  top                 : 50%;
												  margin-top          : -8px;
												  width               : 16px;
												  height              : 16px;
												  background-image    : url(/img/menu_icon.svg);
												  background-position : 0px -200px; }

.MenuTitle.ui-accordion-header-active:before	{ background-position : -20px -200px; }


@media screen and (max-width: 768px){ /* =768px莉･荳九?蝣ｴ蜷? */ /* 1繧ｫ繝ｩ繝? */
	
	.ui-accordion-header a 						{ line-height         : inherit;
												  height              : inherit; }
}

/* 6: /home/jpnsports/sports-drecome.jp/public_html/css/Compulsion-NoticePopup.css */

@charset "Shift_JIS";
body.notice_popup_open {
	overflow: hidden;
	height: 100vh;
}
body.notice_popup_open *{
	z-index: 1!important;;
}
.noticePopup_wrapper_block {
	position:fixed;
	width:100%;
	top:0;
	bottom:0;
	right:0;
	left:0;
	background-color:rgba(0,0,0,0.6);
	z-index: 10000000!important;
	display : none;
	opacity : 0;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	place-items: center;
	-moz-transition-property       : opacity;
	-ms-transition-property        : opacity;
	-o-transition-property         : opacity;
	-webkit-transition-property    : opacity;
	transition-property            : opacity;
}
.noticePopup_wrapper_block.open {
	display:grid;
}
.noticePopup_wrapper_block > .popup_notice_box{
	display: grid;
	background-color: rgba(256,256,256,0.7);
	width: 100%;
	max-width: 900px;
	max-height: 90vh;
	box-shadow: 1px 1px 2px #000;
	grid-template-rows: auto 1fr auto;
	padding: 30px;
	gap:10px;
}
.noticePopup_wrapper_block .popup_title {
	font-size: 20px;
	font-weight: bold;
	color: #f00;
	border-bottom: 3px solid #f00;
	display: flex;
	place-items: end;
	gap: 8px;
}
.noticePopup_wrapper_block .popup_title > i {
	font-size: 1.6em;
}

.noticePopup_wrapper_block .popup_content{
	display: grid;
	grid-template-rows: auto auto 1fr;
	overflow: hidden;
	gap:10px;
	position: relative;
}
.noticePopup_wrapper_block .notice_date{
	text-align:right;
	}
.noticePopup_wrapper_block .notice_title{
	padding: 5px;
	background-color: white;
	border-bottom: 2px solid #ccc;
	font-weight: bold;
}
.noticePopup_wrapper_block .notice_content{
	overflow-y: scroll;
	padding: 10px;
	border: 1px solid #000;
	background: #fff;
	line-height: 18px;
}
.noticePopup_wrapper_block .notice_close {
	display: block;
	position: absolute;
	right: 5px;
	top: 5px;
	background-color: #333;
	color: #fff;
	line-height: 25px;
	padding-left: 5px;
	text-decoration:none;
	box-shadow: 1px 1px 2px #000;
	-moz-transition-property       : background;
	-ms-transition-property        : background;
	-o-transition-property         : background;
	-webkit-transition-property    : background;
	transition-property            : background;
}
.noticePopup_wrapper_block .notice_close:hover {
	background-color:#999;
}
.noticePopup_wrapper_block .notice_close:before {
	content: "×";
	float: right;
	width: 20px;
	text-align: center;
}
.noticePopup_wrapper_block .popup_cookiecheck{
	display: grid;
	place-items: end;
}
.noticePopup_wrapper_block .popup_cookiecheck label{
	line-height:2.5em;
	cursor: pointer;
}
.noticePopup_wrapper_block .popup_buttonwrap{
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr 1fr;
	place-items: center;
}
.noticePopup_wrapper_block .popup_buttonwrap a{
	width: 100%;
	max-width: 350px;
	height: 50px;
	display: flex;
	gap:5px;
	place-items: center;
	justify-content: center;
	border: 1px solid black;
	text-decoration: none;
	color: white;
	text-shadow: 0px 0px 2px black;
	font-weight: bold;
	box-shadow: 1px 1px 2px black;
}
.noticePopup_wrapper_block .popup_buttonwrap a > i{
	font-size: 1.4em;
}

.noticePopup_wrapper_block .popup_buttonwrap a:last-child{
	background-color: var(--mainthema-background-color);
}
.noticePopup_wrapper_block .popup_buttonwrap a:first-child{
	background-color: red;
}
.noticePopup_wrapper_block .popup_buttonwrap a.notice_close_disabled{
	background-color: darkgray;
	color: lightgray;
	border-color: gray;
	text-shadow: none;
	cursor: auto;
}

.noticePopup_wrapper_block .popup_content:after {
	content: "\f103";
	font-family: 'Font Awesome 5 Free';
	font-weight: bold;
	font-size: 30px;
	display: inline-block;
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1em;
	transform: translateY(0px) scaleX(2);
	opacity: 1;
	animation: notice_popup___downarrow_animation 1s infinite ease;
}
.noticePopup_wrapper_block .popup_content.scroll_end:after {
	animation:none;
	opacity: 0;
}

@keyframes notice_popup___downarrow_animation{
	0%   { opacity: 0;	transform: translateY(-20px) scaleX(2); }
	100% { opacity: 1;	transform: translateY(  0px) scaleX(2); }
}

/* 7: /home/jpnsports/sports-drecome.jp/public_html/java/system/plug-in/auto-openbox/style2.1.css */

@charset "Shift_JIS";

/* 
20150512 kawashima
jQuery auto-openBox用
 */


#fixedWall {
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: fixed;
	background-color: rgba(255,255,255,0.5);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 0;
	z-index: 150;
	cursor : pointer;
/* animation */
	transition-property: opacity;
	-webkit-transition-property:opacity;
	-moz-transition-property: opacity;
	-o-transition-property: opacity;
	-ms-transition-property: opacity;
	transition-duration: 0.2s;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	-o-transition-duration: 0.2s;
	-ms-transition-duration: 0.2s;
	transition-timing-function: ease;
	-webkit-transition-timing-function: ease;
	-moz-transition-timing-function: ease;
	-o-transition-timing-function: ease;
	-ms-transition-timing-function: ease;
}
#fixedWall + .auto-openBox{
	z-index: 150;
}
.auto-openBox {
	display: none;
	opacity : 1;
	position: fixed;
	left: 0;
	right : 0;
	max-width:550px;
	width : 100%;
	max-height:100%;
	margin : auto;
	background: white;
	border: 2px solid black;
	box-shadow: 1px 1px 2px black;
	overflow: auto;
/* animation */
	transition-property: opacity,top;
	-webkit-transition-property:opacity,top;
	-moz-transition-property: opacity,top;
	-o-transition-property: opacity,top;
	-ms-transition-property: opacity,top;
	transition-duration: 0.2s;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	-o-transition-duration: 0.2s;
	-ms-transition-duration: 0.2s;
	transition-timing-function: ease;
	-webkit-transition-timing-function: ease;
	-moz-transition-timing-function: ease;
	-o-transition-timing-function: ease;
	-ms-transition-timing-function: ease;
}
.auto-openBox > div.innerwrap {
	position : relative;
	overflow: hidden;
	padding : 30px 20px;
}
.auto-openBox > div.innerwrap > a.auto-openBox_close {
	display: block;
	width: 35px;
	height: 35px;
	position: absolute;
	top: 0;
	right: 0;
	transition-property: background-color;
	-webkit-transition-property:background-color;
	-moz-transition-property: background-color;
	-o-transition-property: background-color;
	-ms-transition-property: background-color;
	transition-duration: 0.2s;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	-o-transition-duration: 0.2s;
	-ms-transition-duration: 0.2s;
	transition-timing-function: ease;
	-webkit-transition-timing-function: ease;
	-moz-transition-timing-function: ease;
	-o-transition-timing-function: ease;
	-ms-transition-timing-function: ease;
}
.auto-openBox > div.innerwrap > a.auto-openBox_close::before {
	content: "";
	display: block;
	border-left: 4px solid black;
	width: 25px;
	height: 25px;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	top: 13px;
	right: -6px;
	position: absolute;
}
.auto-openBox > div.innerwrap > a.auto-openBox_close::after {
	content: "";
	display: block;
	border-left: 4px solid black;
	width: 25px;
	height: 25px;
	transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	top: -5px;
	right: -6px;
	position: absolute;
}


/* 8: /home/jpnsports/sports-drecome.jp/public_html/java/customize/fotorama-4.6.4/fotorama.css */

/*!
 * Fotorama 4.6.4 | http://fotorama.io/license/
 */
.fotorama__arr:focus:after,.fotorama__fullscreen-icon:focus:after,.fotorama__html,.fotorama__img,.fotorama__nav__frame:focus .fotorama__dot:after,.fotorama__nav__frame:focus .fotorama__thumb:after,.fotorama__stage__frame,.fotorama__stage__shaft,.fotorama__video iframe{position:absolute;width:100%;height:100%;top:0;right:0;left:0;bottom:0}.fotorama--fullscreen,.fotorama__img{max-width:99999px!important;max-height:99999px!important;min-width:0!important;min-height:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important}.fotorama__wrap .fotorama__grab{cursor:move;cursor:-webkit-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}.fotorama__grabbing *{cursor:move;cursor:-webkit-grabbing;cursor:-o-grabbing;cursor:-ms-grabbing;cursor:grabbing}.fotorama__spinner{position:absolute!important;top:50%!important;left:50%!important}.fotorama__wrap--css3 .fotorama__arr,.fotorama__wrap--css3 .fotorama__fullscreen-icon,.fotorama__wrap--css3 .fotorama__nav__shaft,.fotorama__wrap--css3 .fotorama__stage__shaft,.fotorama__wrap--css3 .fotorama__thumb-border,.fotorama__wrap--css3 .fotorama__video-close,.fotorama__wrap--css3 .fotorama__video-play{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.fotorama__caption,.fotorama__nav:after,.fotorama__nav:before,.fotorama__stage:after,.fotorama__stage:before,.fotorama__wrap--css3 .fotorama__html,.fotorama__wrap--css3 .fotorama__nav,.fotorama__wrap--css3 .fotorama__spinner,.fotorama__wrap--css3 .fotorama__stage,.fotorama__wrap--css3 .fotorama__stage .fotorama__img,.fotorama__wrap--css3 .fotorama__stage__frame{-webkit-transform:translateZ(0);transform:translateZ(0)}.fotorama__arr:focus,.fotorama__fullscreen-icon:focus,.fotorama__nav__frame{outline:0}.fotorama__arr:focus:after,.fotorama__fullscreen-icon:focus:after,.fotorama__nav__frame:focus .fotorama__dot:after,.fotorama__nav__frame:focus .fotorama__thumb:after{content:'';border-radius:inherit;background-color:rgba(0,175,234,.5)}.fotorama__wrap--video .fotorama__stage,.fotorama__wrap--video .fotorama__stage__frame--video,.fotorama__wrap--video .fotorama__stage__frame--video .fotorama__html,.fotorama__wrap--video .fotorama__stage__frame--video .fotorama__img,.fotorama__wrap--video .fotorama__stage__shaft{-webkit-transform:none!important;transform:none!important}.fotorama__wrap--css3 .fotorama__nav__shaft,.fotorama__wrap--css3 .fotorama__stage__shaft,.fotorama__wrap--css3 .fotorama__thumb-border{transition-property:-webkit-transform,width;transition-property:transform,width;transition-timing-function:cubic-bezier(0.1,0,.25,1);transition-duration:0ms}.fotorama__arr,.fotorama__fullscreen-icon,.fotorama__no-select,.fotorama__video-close,.fotorama__video-play,.fotorama__wrap{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fotorama__select{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.fotorama__nav,.fotorama__nav__frame{margin:auto;padding:0}.fotorama__caption__wrap,.fotorama__nav__frame,.fotorama__nav__shaft{-moz-box-orient:vertical;display:inline-block;vertical-align:middle;*display:inline;*zoom:1}.fotorama__nav__frame,.fotorama__thumb-border{box-sizing:content-box}.fotorama__caption__wrap{box-sizing:border-box}.fotorama--hidden,.fotorama__load{position:absolute;left:-99999px;top:-99999px;z-index:-1}.fotorama__arr,.fotorama__fullscreen-icon,.fotorama__nav,.fotorama__nav__frame,.fotorama__nav__shaft,.fotorama__stage__frame,.fotorama__stage__shaft,.fotorama__video-close,.fotorama__video-play{-webkit-tap-highlight-color:transparent}.fotorama__arr,.fotorama__fullscreen-icon,.fotorama__video-close,.fotorama__video-play{background:url(fotorama.png) no-repeat}@media (-webkit-min-device-pixel-ratio:1.5),(min-resolution:2dppx){.fotorama__arr,.fotorama__fullscreen-icon,.fotorama__video-close,.fotorama__video-play{background:url(fotorama@2x.png) 0 0/96px 160px no-repeat}}.fotorama__thumb{background-color:#7f7f7f;background-color:rgba(127,127,127,.2)}@media print{.fotorama__arr,.fotorama__fullscreen-icon,.fotorama__thumb-border,.fotorama__video-close,.fotorama__video-play{background:none!important}}.fotorama{min-width:1px;overflow:hidden}.fotorama:not(.fotorama--unobtrusive)>*:not(:first-child){display:none}.fullscreen{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;background:#000}.fotorama--fullscreen{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;float:none!important;z-index:2147483647!important;background:#000;width:100%!important;height:100%!important;margin:0!important}.fotorama--fullscreen .fotorama__nav,.fotorama--fullscreen .fotorama__stage{background:#fff}.fotorama__wrap{-webkit-text-size-adjust:100%;position:relative;direction:ltr;z-index:0}.fotorama__wrap--rtl .fotorama__stage__frame{direction:rtl}.fotorama__nav,.fotorama__stage{overflow:hidden;position:relative;max-width:100%}.fotorama__wrap--pan-y{-ms-touch-action:pan-y}.fotorama__wrap .fotorama__pointer{cursor:pointer}.fotorama__wrap--slide .fotorama__stage__frame{opacity:1!important}.fotorama__stage__frame{overflow:hidden}.fotorama__stage__frame.fotorama__active{z-index:8}.fotorama__wrap--fade .fotorama__stage__frame{display:none}.fotorama__wrap--fade .fotorama__fade-front,.fotorama__wrap--fade .fotorama__fade-rear,.fotorama__wrap--fade .fotorama__stage__frame.fotorama__active{display:block;left:0;top:0}.fotorama__wrap--fade .fotorama__fade-front{z-index:8}.fotorama__wrap--fade .fotorama__fade-rear{z-index:7}.fotorama__wrap--fade .fotorama__fade-rear.fotorama__active{z-index:9}.fotorama__wrap--fade .fotorama__stage .fotorama__shadow{display:none}.fotorama__img{-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;border:none!important}.fotorama__error .fotorama__img,.fotorama__loaded .fotorama__img{-ms-filter:"alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1}.fotorama--fullscreen .fotorama__loaded--full .fotorama__img,.fotorama__img--full{display:none}.fotorama--fullscreen .fotorama__loaded--full .fotorama__img--full{display:block}.fotorama__wrap--only-active .fotorama__nav,.fotorama__wrap--only-active .fotorama__stage{max-width:99999px!important}.fotorama__wrap--only-active .fotorama__stage__frame{visibility:hidden}.fotorama__wrap--only-active .fotorama__stage__frame.fotorama__active{visibility:visible}.fotorama__nav{font-size:0;line-height:0;text-align:center;display:none;white-space:nowrap;z-index:5}.fotorama__nav__shaft{position:relative;left:0;top:0;text-align:left}.fotorama__nav__frame{position:relative;cursor:pointer}.fotorama__nav--dots{display:block}.fotorama__nav--dots .fotorama__nav__frame{width:18px;height:30px}.fotorama__nav--dots .fotorama__nav__frame--thumb,.fotorama__nav--dots .fotorama__thumb-border{display:none}.fotorama__nav--thumbs{display:block}.fotorama__nav--thumbs .fotorama__nav__frame{padding-left:0!important}.fotorama__nav--thumbs .fotorama__nav__frame:last-child{padding-right:0!important}.fotorama__nav--thumbs .fotorama__nav__frame--dot{display:none}.fotorama__dot{display:block;width:4px;height:4px;position:relative;top:12px;left:6px;border-radius:6px;border:1px solid #7f7f7f}.fotorama__nav__frame:focus .fotorama__dot:after{padding:1px;top:-1px;left:-1px}.fotorama__nav__frame.fotorama__active .fotorama__dot{width:0;height:0;border-width:3px}.fotorama__nav__frame.fotorama__active .fotorama__dot:after{padding:3px;top:-3px;left:-3px}.fotorama__thumb{overflow:hidden;position:relative;width:100%;height:100%}.fotorama__nav__frame:focus .fotorama__thumb{z-index:2}.fotorama__thumb-border{position:absolute;z-index:9;top:0;left:0;border-style:solid;border-color:#00afea;background-image:linear-gradient(to bottom right,rgba(255,255,255,.25),rgba(64,64,64,.1))}.fotorama__caption{position:absolute;z-index:12;bottom:0;left:0;right:0;font-size:14px;line-height:1.5;color:#000}.fotorama__caption a{text-decoration:none;color:#000;border-bottom:1px solid;border-color:rgba(0,0,0,.5)}.fotorama__caption a:hover{color:#333;border-color:rgba(51,51,51,.5)}.fotorama__wrap--rtl .fotorama__caption{left:auto;right:0}.fotorama__wrap--no-captions .fotorama__caption,.fotorama__wrap--video .fotorama__caption{display:none}.fotorama__caption__wrap{/*background-color:#fff;background-color:rgba(255,255,255,.7);*/padding:5px 10px}@-webkit-keyframes spinner{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.fotorama__wrap--css3 .fotorama__spinner{-webkit-animation:spinner 24s infinite linear;animation:spinner 24s infinite linear}.fotorama__wrap--css3 .fotorama__html,.fotorama__wrap--css3 .fotorama__stage .fotorama__img{transition-property:opacity;transition-timing-function:linear;transition-duration:.3s}.fotorama__wrap--video .fotorama__stage__frame--video .fotorama__html,.fotorama__wrap--video .fotorama__stage__frame--video .fotorama__img{-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0}.fotorama__select{cursor:auto}.fotorama__video{top:32px;right:0;bottom:0;left:0;position:absolute;z-index:10}@-moz-document url-prefix(){.fotorama__active{box-shadow:0 0 0 transparent}}.fotorama__arr,.fotorama__fullscreen-icon,.fotorama__video-close,.fotorama__video-play{position:absolute;z-index:11;cursor:pointer}.fotorama__arr{position:absolute;width:32px;height:32px;top:50%;margin-top:-16px}.fotorama__arr--prev{left:2px;background-position:0 0}.fotorama__arr--next{right:2px;background-position:-32px 0}.fotorama__arr--disabled{pointer-events:none;cursor:default;*display:none;opacity:.1}.fotorama__fullscreen-icon{width:32px;height:32px;top:2px;right:2px;background-position:0 -32px;z-index:20}.fotorama__arr:focus,.fotorama__fullscreen-icon:focus{border-radius:50%}.fotorama--fullscreen .fotorama__fullscreen-icon{background-position:-32px -32px}.fotorama__video-play{width:96px;height:96px;left:50%;top:50%;margin-left:-48px;margin-top:-48px;background-position:0 -64px;opacity:0}.fotorama__wrap--css2 .fotorama__video-play,.fotorama__wrap--video .fotorama__stage .fotorama__video-play{display:none}.fotorama__error .fotorama__video-play,.fotorama__loaded .fotorama__video-play,.fotorama__nav__frame .fotorama__video-play{opacity:1;display:block}.fotorama__nav__frame .fotorama__video-play{width:32px;height:32px;margin-left:-16px;margin-top:-16px;background-position:-64px -32px}.fotorama__video-close{width:32px;height:32px;top:0;right:0;background-position:-64px 0;z-index:20;opacity:0}.fotorama__wrap--css2 .fotorama__video-close{display:none}.fotorama__wrap--css3 .fotorama__video-close{-webkit-transform:translate3d(32px,-32px,0);transform:translate3d(32px,-32px,0)}.fotorama__wrap--video .fotorama__video-close{display:block;opacity:1}.fotorama__wrap--css3.fotorama__wrap--video .fotorama__video-close{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.fotorama__wrap--no-controls.fotorama__wrap--toggle-arrows .fotorama__arr,.fotorama__wrap--no-controls.fotorama__wrap--toggle-arrows .fotorama__fullscreen-icon{opacity:0}.fotorama__wrap--no-controls.fotorama__wrap--toggle-arrows .fotorama__arr:focus,.fotorama__wrap--no-controls.fotorama__wrap--toggle-arrows .fotorama__fullscreen-icon:focus{opacity:1}.fotorama__wrap--video .fotorama__arr,.fotorama__wrap--video .fotorama__fullscreen-icon{opacity:0!important}.fotorama__wrap--css2.fotorama__wrap--no-controls.fotorama__wrap--toggle-arrows .fotorama__arr,.fotorama__wrap--css2.fotorama__wrap--no-controls.fotorama__wrap--toggle-arrows .fotorama__fullscreen-icon{display:none}.fotorama__wrap--css2.fotorama__wrap--no-controls.fotorama__wrap--toggle-arrows .fotorama__arr:focus,.fotorama__wrap--css2.fotorama__wrap--no-controls.fotorama__wrap--toggle-arrows .fotorama__fullscreen-icon:focus{display:block}.fotorama__wrap--css2.fotorama__wrap--video .fotorama__arr,.fotorama__wrap--css2.fotorama__wrap--video .fotorama__fullscreen-icon{display:none!important}.fotorama__wrap--css3.fotorama__wrap--no-controls.fotorama__wrap--slide.fotorama__wrap--toggle-arrows .fotorama__fullscreen-icon:not(:focus){-webkit-transform:translate3d(32px,-32px,0);transform:translate3d(32px,-32px,0)}.fotorama__wrap--css3.fotorama__wrap--no-controls.fotorama__wrap--slide.fotorama__wrap--toggle-arrows .fotorama__arr--prev:not(:focus){-webkit-transform:translate3d(-48px,0,0);transform:translate3d(-48px,0,0)}.fotorama__wrap--css3.fotorama__wrap--no-controls.fotorama__wrap--slide.fotorama__wrap--toggle-arrows .fotorama__arr--next:not(:focus){-webkit-transform:translate3d(48px,0,0);transform:translate3d(48px,0,0)}.fotorama__wrap--css3.fotorama__wrap--video .fotorama__fullscreen-icon{-webkit-transform:translate3d(32px,-32px,0)!important;transform:translate3d(32px,-32px,0)!important}.fotorama__wrap--css3.fotorama__wrap--video .fotorama__arr--prev{-webkit-transform:translate3d(-48px,0,0)!important;transform:translate3d(-48px,0,0)!important}.fotorama__wrap--css3.fotorama__wrap--video .fotorama__arr--next{-webkit-transform:translate3d(48px,0,0)!important;transform:translate3d(48px,0,0)!important}.fotorama__wrap--css3 .fotorama__arr:not(:focus),.fotorama__wrap--css3 .fotorama__fullscreen-icon:not(:focus),.fotorama__wrap--css3 .fotorama__video-close:not(:focus),.fotorama__wrap--css3 .fotorama__video-play:not(:focus){transition-property:-webkit-transform,opacity;transition-property:transform,opacity;transition-duration:.3s}.fotorama__nav:after,.fotorama__nav:before,.fotorama__stage:after,.fotorama__stage:before{content:"";display:block;position:absolute;text-decoration:none;top:0;bottom:0;width:10px;height:auto;z-index:10;pointer-events:none;background-repeat:no-repeat;background-size:1px 100%,5px 100%}.fotorama__nav:before,.fotorama__stage:before{background-image:linear-gradient(transparent,rgba(0,0,0,.2) 25%,rgba(0,0,0,.3) 75%,transparent),radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.4),transparent);background-position:0 0,0 0;left:-10px}.fotorama__nav.fotorama__shadows--left:before,.fotorama__stage.fotorama__shadows--left:before{left:0}.fotorama__nav:after,.fotorama__stage:after{background-image:linear-gradient(transparent,rgba(0,0,0,.2) 25%,rgba(0,0,0,.3) 75%,transparent),radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.4),transparent);background-position:100% 0,100% 0;right:-10px}.fotorama__nav.fotorama__shadows--right:after,.fotorama__stage.fotorama__shadows--right:after{right:0}.fotorama--fullscreen .fotorama__nav:after,.fotorama--fullscreen .fotorama__nav:before,.fotorama--fullscreen .fotorama__stage:after,.fotorama--fullscreen .fotorama__stage:before,.fotorama__wrap--fade .fotorama__stage:after,.fotorama__wrap--fade .fotorama__stage:before,.fotorama__wrap--no-shadows .fotorama__nav:after,.fotorama__wrap--no-shadows .fotorama__nav:before,.fotorama__wrap--no-shadows .fotorama__stage:after,.fotorama__wrap--no-shadows .fotorama__stage:before{display:none}.fotorama__nav-wrap{overflow:hidden;}

/* 9: /home/jpnsports/sports-drecome.jp/public_html/css/memberlogin.css */

@charset "Shift_JIS";
/* 
20150424_S.Kawashima 20141229 
	-- ファイル分割 --
20211118_S.Kawashima 20141229 

*/


/*****************************************************************************************
******************************************************************************************
		▼FixedLoginForm▼
******************************************************************************************
*****************************************************************************************/


#FixedLoginForm,
#FixedLogoutForm,
#FixedPwCForm {
	max-width     : 500px;
}

#FixedLoginForm .login_form_wrap{
	display: grid;
	gap:10px;
}

#FixedLoginForm .login_form_btns{
	display: grid;
	gap:10px;
}

#FixedLoginForm .login_form_btns a{
	height: 50px;
}

#FixedLoginForm .id_keep{
	text-align:right;
	font-size:1.2em;
}
#FixedLoginForm .id_keep label{
	padding: 5px 0;
	display:inline-block;
}

/*
#FixedLoginForm a.newmember {
	background-color: #AF0000;
	background    : linear-gradient(to bottom, #FF6161, #AF0000);
	background    : -ms-linear-gradient(top, #FF6161, #AF0000);
	background    : -moz-linear-gradient(top,#FF6161 0%,#AF0000);
	background    : -webkit-gradient(linear, left top, left bottom, from(#FF6161), to(#AF0000));
}
#FixedLoginForm a.newmember:hover,
#FixedLoginForm a.pw_forget:hover {
	color         : #fff;
}
#FixedLoginForm a.pw_forget {
	color         : #ff8c00;
	clear         : both;
	float         : left;
	line-height   : 25px;
}

#FixedLogoutForm p{
	margin        : 30px 0;
	text-align    : center;
}
#FixedLogoutForm a > span:before,
#FixedLogoutForm a > span:after{
	content       : "-";
	display       : inline;
	margin        : 0 5px;
}
*/


/* 10: /home/jpnsports/sports-drecome.jp/public_html/java/customize/plug-in/pattern_error/style.css */

@charset "Shift_JIS";
input[type="text"].input_pattern_jq + div.input_pattern_errtxt {
	background-color: #f00;
	border-radius: 10px;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6) z-index: 1000;
	color: #fff;
	display: none;
	font-weight: bold;
	margin-top: 5px;
	max-width: 100%;
	opacity: 0;
	padding: 10px;
}

input[type="text"].input_pattern_jq.input_pattern_err {
	border: 1px solid #f00;
	box-shadow: 0 0 2px #f00;
}

input[type="text"].input_pattern_jq.input_pattern_err + div.input_pattern_errtxt {
	display: block;
}

/* 12: /home/jpnsports/sports-drecome.jp/public_html/css/head.css */

*** chamoと言語選択の互換性問題の応急処置 ***/

body {
  min-width: inherit!important;
}

#google_translate_element img {
  width: auto;
}


/* 検索ウィンドウの幅をcontentのブロック幅と合わせる用のスタイル */

#HeaderNavi .header_ul_1 {
  display: grid;
  grid-template-columns: auto 1fr;
  place-items: center end;
  margin: 10px 0;
}

#HeaderNavi .header_ul_2 {
	display: flex;
	background-color: var(--mainthema-background-color);
	width:100%;
	padding:4px;
	justify-content: space-between;
}
#HeaderNavi .header_ul_2>li {
	display: grid;
	flex-grow: 0;
	align-items: center;
}
#HeaderNavi .header_ul_2>li.item_search {
	flex-grow: 2;
	max-width: 700px;
}

/* ロゴ画像ロール */

#HeaderNavi .logo_link {
  display: grid;
  margin: auto 0;
  margin-right: 20px;
  position: relative;
  width: 280px;
  height: 56px;
  overflow: hidden;
}

#HeaderNavi .logo_link .logo_img1, #HeaderNavi .logo_link .logo_img2 {
  width: 280px;
  display: block;
  grid-area: 1/1/2/2;
  width: 100%;
  transition-property: transform, opacity;
}

#HeaderNavi .logo_link:hover .logo_img1 {
  opacity: 0;
  transform: translateY(40px);
}

#HeaderNavi .logo_link .logo_img2 {
  opacity: 0;
  transform: translateY(-40px);
}

#HeaderNavi .logo_link:hover .logo_img2 {
  opacity: 1;
  transform: translateY(0);
}


/* ユーザーナビ_01 */

#HeaderNavi .user_nav_01 {
	display: grid;
	grid-template-columns: auto 1fr;
	place-items: center end;
	grid-template-areas: "cc cc"
						 "aa bb";
	max-width: 600px;
	gap: 8px 0;
	float:right;
	margin-bottom: 8px;
}
#HeaderNavi .user_nav_01 .user_nav_01_0 {
	display: none;
}
#HeaderNavi .user_nav_01 .user_nav_01_1 {
	grid-area: aa;
}
#HeaderNavi .user_nav_01 .user_nav_01_2 {
	grid-area: bb;
}
#HeaderNavi .user_nav_01 .user_nav_01_3 {
	grid-area: cc;
}
#HeaderNavi .user_nav_01 .user_nav_01_1:after {
	content: "：";
	display: inline-block;
}
#HeaderNavi .user_nav_text{
	font-size: 0.8em;
	text-align:right;
	clear:both;
	border-top: 1px solid #ccc;
}
/* メーカー選択 */
/*
#MakerSelectMenu {
  height: 35px;
  line-height: 35px;
  padding-left: 10px;
}
*/
#SearchFormTop .text_label{
	display: grid;
	border: 1px solid #666;
	position: relative;
	grid-template-columns: 1fr 50px;
	border-radius: 10px;
	overflow: hidden;
	grid-template-rows: 50px;
	background-color: white;
}
#SearchFormTop .text_label input[name=keyword]{
	height: 100%;
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	background: none;
	border: none;
	box-shadow: none;
	outline: none;
	padding: 0 10px;
	width: 100%;
}
#SearchFormTop .text_label input[name=keyword]:focus~.MakerListPopUpMenuOpen {
	display: none;
}
#SearchFormTop .text_label .search_button{
	display: grid;
	place-items: center;
	height: 100%;
	width: 50px;
	color: var(--mainthema-background-color);
	text-decoration: none!important;
	cursor: pointer;
	background: none;
}
#SearchFormTop .text_label .search_button::before{
	content: "";
	display: block;
	grid-area: 1/1/2/2;
	width: 100%;
	height: 30px;
	border-left: 2px solid var(--mainthema-background-color);
}
#SearchFormTop .text_label .search_button:hover {
	color: var(--main-link-hovercolor);
}
#SearchFormTop .text_label .search_button i{
	font-size: 20px;
	text-align: center;
	display: block;
	grid-area: 1/1/2/2;
}
	
	
/* ユーザーメニュー */

#HeaderNavi .header_ul_2 .user_menu {
  height: 55px;
  flex: 0 0 80px;
  position: relative;
}

#HeaderNavi .header_ul_2 .user_menu>a {
  display: grid;
  place-items: center;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  text-decoration: none;
  border-radius: 5px;
  border: 2px solid transparent;
  transition: border 0.1s linear;
  -webkit-transition: border 0.1s linear;
  -moz-transition: border 0.1s linear;
  -o-transition: border 0.1s linear;
  -ms-transition: border 0.1s linear;
}

#HeaderNavi .header_ul_2 .user_menu>a:hover {
  border-color: var(--mainthema-link-hovercolor);
}

#HeaderNavi .header_ul_2 .user_menu svg {
  width: 35px;
  height: 35px;
  grid-column: 1/2;
  grid-row:1/2;
  margin: auto;
  fill: var(--mainthema-link-color);
  transition: fill 0.1s linear;
  -webkit-transition: fill 0.1s linear;
  -moz-transition: fill 0.1s linear;
  -o-transition: fill 0.1s linear;
  -ms-transition: fill 0.1s linear;
  z-index: 1;
}

#HeaderNavi .header_ul_2 .user_menu a:hover svg {
  fill: var(--mainthema-link-hovercolor);
}

#HeaderNavi .header_ul_2 .user_menu>a span {
  font-size: 11px;
  grid-column: 1/2;
  grid-row:2/3;
  color: var(--mainthema-link-color);
  white-space: nowrap;
  transition: color 0.1s linear;
  -webkit-transition: color 0.1s linear;
  -moz-transition: color 0.1s linear;
  -o-transition: color 0.1s linear;
  -ms-transition: color 0.1s linear;
}

#HeaderNavi .header_ul_2 .user_menu>a:hover span {
  color: var(--mainthema-link-hovercolor);
}

#HeaderNavi .header_ul_2 .user_menu>a span.num_icon {
	display: grid;
	color: var(--mainthema-background-color);
	border: 3px solid var(--mainthema-background-color);
	font-weight: bold;
	background-color: white;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	grid-column: 1/2;
	grid-row: 1/3;
	z-index: 2;
	place-items: center;
	transform: translate(16px, -16px);
	box-sizing: border-box;
}
#HeaderNavi .header_ul_2 .user_menu>a span.bell_icon {
  grid-column: 1/2;
  grid-row: 1/3;
  font-size: 20px;
  color: yellow;
  text-shadow: 0 1px 0 #f00, 1px 0 0 #f00, 0 -1px 0 #f00, -1px 0 0 #f00, -1px -1px 0 #f00, 1px -1px 0 #f00, -1px 1px 0 #f00, 1px 1px 0 #f00;
  z-index: 2;
  transform: translate(24px, -20px);
  display:grid;
  place-items:center;
}
#HeaderNavi .header_ul_2 .user_menu>a span.bell_icon:after {
  content: "未読あり";
  font-size: 10px;
  line-height: initial;
}
#HeaderNavi .user_nav_01_2 a {
  color: #f00;
}

@media screen and (max-width: 990px) {
  #HeaderNavi .header_ul_2 .item_search {}
}

@media screen and (max-width: 768px) {
  #HeaderNavi .header_ul_1 {
    place-items: center;
    margin: 0;
  }
  #HeaderNavi .header_ul_2 .user_menu{
    display: none;
  }
  #HeaderNavi .user_nav_01 {
    grid-template-areas: "dd"
    					 "aa"
    					 "bb"
    					 "cc";
    max-width: 100%;
    float: initial;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
  }
  #HeaderNavi .user_nav_01 .user_nav_01_0 {
    display: block;
    grid-area: dd;
    padding: 20px 0;
    font-size: 1.2em;
    font-weight: bold;
  }
  #HeaderNavi .user_nav_01 .user_nav_01_2 {
    padding-bottom:20px;
    border-bottom: 1px dashed #ccc;
  }
  #HeaderNavi .user_nav_01 .user_nav_01_3 {
    padding-top: 20px;
  }
  #HeaderNavi .user_nav_01 .user_nav_01_1:after {
    content: "";
  }
  #HeaderNavi .user_nav_01 .user_nav_01_0 > a {
      text-decoration: none;
  }
  #HeaderNavi .user_nav_01 .user_nav_01_0 > a:before {
      content: "\f007";
      font-family: 'Font Awesome 5 Free';
      font-weight: normal;
      font-size: 1.4em;
      margin: 0 5px;
  }
  #HeaderNavi .user_nav_text{
    border:none;
    text-align: center;
    margin-bottom: 20px;
  }
  #HeaderNavi .header_ul_1>li {
    margin: 0 0;
    display: block;
  }
  #HeaderNavi .logo_link {
    width: auto;
    height: auto;
    margin: 0;
    display: none;
  }
  #HeaderNavi .logo_link .logo_img1 {
    width: 100%;
    opacity: 1!important;
    position: initial;
  }
  #HeaderNavi .logo_link .logo_img2 {
    display: none;
  }
  #HeaderNavi .user_nav_01 li {
    text-align: center;
    margin: 0;
    width: 100%;
  }
  #HeaderLabel.hideClass {
    transform: translateY(-60px);
  }
  #HeaderLabel {
    transition: 0.5s;
    user-select: none;
  }
}

/* 13: /home/jpnsports/sports-drecome.jp/public_html/java/system/plug-in/makerlist/style.css */

@charset "Shift_JIS";
.search_div .MakerListPopUpMenuOpen {
	position: absolute;
	right: 60px;
	top: 0;
	bottom: 0;
	margin: auto;
	font-size: 11px;
	font-weight: bold;
	background-color: #fff;
	height: 33px;
	border-style: solid;
	border-color: var(--mainthema-background-color);
	border-radius: 4px;
	border-width: 1px;
	padding-left: 10px;
	cursor: pointer;
	color: var(--mainthema-background-color);
	text-decoration: underline;
	display: grid;
	place-items: center;
	grid-template-columns: auto 30px;
}
.search_div .MakerListPopUpMenuOpen:hover {
	border-color: var(--main-link-hovercolor);
	color: var(--main-link-hovercolor);
}
.search_div .MakerListPopUpMenuOpen span.MakerListPopUpMenuOpen_arrowicon{
	width: 0;
	height: 0;
	border-right: 7px solid transparent;
	border-top: 12px solid var(--mainthema-background-color);
	border-left: 7px solid transparent;
	display: block;
}
.MakerListPopUpMenuOpen:hover span.MakerListPopUpMenuOpen_arrowicon{
	border-top-color: var(--main-link-hovercolor);
}

#MakerListPopUpMenu {
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: #fff;
	background-color: rgba(255, 255, 255, 0.7);
	overflow-y: scroll;
	margin: auto;
	z-index: 1000000!important;;
}
#MakerListPopUpMenu > .makerlist_close_btn {
	opacity:0;
	width: 50px;
	height: 50px;
	display: block;
	text-align: center;
	background-color: black;
	position: fixed;
	right: 20px;
	top: 20px;
	border: 2px solid #fff;
	cursor: pointer;
}
#MakerListPopUpMenu.open .makerlist_close_btn::before,
#MakerListPopUpMenu.open .makerlist_close_btn::after {
	content: "";
	display: block;
	width: 80%;
	height: 4px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background-color: #fff;
}
#MakerListPopUpMenu.open .makerlist_close_btn::before {
	transform: rotate(45deg);
}
#MakerListPopUpMenu.open .makerlist_close_btn::after {
	transform: rotate(-45deg);
}
#MakerListPopUpMenu.open .makerlist_close_btn:hover {
	border-color:dodgerblue;
}
#MakerListPopUpMenu.open .makerlist_close_btn:hover::before,
#MakerListPopUpMenu.open .makerlist_close_btn:hover::after {
	background-color:dodgerblue;
}

#MakerListPopUpMenu > p.makerlist_popupmenu_title {
	position: relative;
	line-height: 50px;
	margin-left: 135%;
	margin-top: 90px;
	width: 100%;
	height: 50px;
}

#MakerListPopUpMenu > p.makerlist_popupmenu_title > span.bg {
	display: block;
}
#MakerListPopUpMenu > p.makerlist_popupmenu_title > span.bg:before {
	display: block;
	content:"";
	border-left: 35px solid transparent;
	border-top: 50px solid #000;
	border-width: 50px;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}
#MakerListPopUpMenu > p.makerlist_popupmenu_title > span.bg:after {
	content: "";
	display: block;
	border-left: 35px solid transparent;
	border-top: 50px solid rgba(0, 0, 0, 0.6);
	border-width: 50px;
	position: absolute;
	left: -22px;
	right: 0;
	top: -8px;
	bottom: 0;
	width: 100%;
}

#MakerListPopUpMenu > p.makerlist_popupmenu_title > span.text {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	font-size: 24px;
	font-style: oblique;
	font-weight: bold;
	text-indent: 50px;
}

#MakerListPopUpMenu > ul.makerlist_content {
	background-color: #fff;
	border: 2px solid #000;
	margin: 20px;
	padding: 20px;
	margin-bottom: 50%;
}

#MakerListPopUpMenu > ul.makerlist_content ul {
	display: grid;
	gap: 10px 5px;
	margin: 20px 0;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}


#MakerListPopUpMenu .wrap_line {
	margin-bottom: 20px;
	overflow: hidden;
}

#MakerListPopUpMenu .daiwrap_title {
	border-bottom: 1px solid #666;
	color: #666;
	font-size: 20px;
	font-weight: bold;
	background-color: var(--mainthema-background-color);
	color: var(--mainthema-font-color);
	padding: 3px 5px;
}

#MakerListPopUpMenu .chuwrap_line {
	float: left;
	margin: 0 10px;
	width: 320px;
}

#MakerListPopUpMenu .chuwrap_title {
	background-color: #fff;
	display: inline-block;
	font-size: 15px;
	font-weight: bold;
	margin-left: 10px;
	margin-top: 5px;
	padding: 0 5px;
}

#MakerListPopUpMenu a.maker_link {
	display: grid;
	height: 80px;
	color: var(--main-link-color);
	border: 1px solid var(--main-link-color);
	grid-template-columns: 1fr;
	grid-template-rows: 50px 1fr;
	place-items: center;
}

#MakerListPopUpMenu a.maker_link span {
	font-size: 12px;
	line-height: 1em;
}
#MakerListPopUpMenu a.maker_link img {
	width: auto;
	height: 80%;
	display: block;
}
#MakerListPopUpMenu a.maker_link img ~ span{
	margin-top:0;
}

#MakerListPopUpMenu a.maker_link:hover {
	border-width: 2px;
	border-color: var(--main-link-hovercolor);
	color: var(--main-link-hovercolor);
}
#MakerListPopUpMenu a.maker_link:hover span {
	line-height: 25px;
}
.CateMenuTitle a.MakerListPopUpMenuOpen:after {
	content: "≫";
	display: block;
	float: right;
}

/* open-close animation*/
#MakerListPopUpMenu {
	width: 100%;
	overflow-x: hidden;
}
#MakerListPopUpMenu.open {
	animation-name: makerlistopen1;
	animation-duration: 0.3s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-delay: 0s;
	-ms-animation-name: makerlistopen1;
	-ms-animation-duration: 0.3s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: 1;
	-ms-animation-fill-mode: forwards;
	-ms-animation-delay: 0s;
	z-index: 1000000!important;
}
#MakerListPopUpMenu.open .makerlist_popupmenu_title {
	animation-name: makerlistopen2;
	animation-duration: 0.3s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-delay: 0.2s;
	-ms-animation-name: makerlistopen2;
	-ms-animation-duration: 0.3s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: 1;
	-ms-animation-fill-mode: forwards;
	-ms-animation-delay: 0.2s;
}
#MakerListPopUpMenu.open .makerlist_close_btn {
	animation-name: makerlistopen3;
	animation-duration: 0.3s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-delay: 0.2s;
	-ms-animation-name: makerlistopen3;
	-ms-animation-duration: 0.3s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: 1;
	-ms-animation-fill-mode: forwards;
	-ms-animation-delay: 0.2s;
}
#MakerListPopUpMenu.open .makerlist_scrollup_btn {
	width: 60px;
	height: 60px;
	display: grid;
	place-items: center;
	text-align: center;
	position: fixed;
	right: 40px;
	bottom: 20px;
	cursor: pointer;
	font-size: 50px;
	color: var(--main-link-color);
	background-color: white;
	border: 2px solid var(--main-link-color);
	border-radius: 50%;
	text-decoration: none;
}
@keyframes makerlistopen1 {
  0% {
    height: 0%
  }
  100% {
    height: 100%;
  }
}
@keyframes makerlistopen2 {
  0% {
    margin-left: 135%
  }
  100% {
    margin-left: 35%;
  }
}
@keyframes makerlistopen2 {
  0% {
    margin-left: 135%
  }
  100% {
    margin-left: 35%;
  }
}
@keyframes makerlistopen3 {
  0% {
    opacity: 0;
    top: -100px;
  }
  100% {
    opacity: 1;
    top : 20px;
  }
}
-ms-@keyframes makerlistopen1 {
  0% {
    height: 0%
  }
  100% {
    height: 100%;
  }
}
-ms-@keyframes makerlistopen2 {
  0% {
    margin-left: 135%
  }
  100% {
    margin-left: 35%;
  }
}
-ms-@keyframes makerlistopen3 {
  0% {
    opacity: 0;
    top: -100px;
  }
  100% {
    opacity: 1;
    top : 20px;
  }
}
#MakerListPopUpMenu.close {
	animation-name: makerlistclose1;
	animation-duration: 0.3s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-delay: 0.2s;
	-ms-animation-name: makerlistclose1;
	-ms-animation-duration: 0.3s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: 1;
	-ms-animation-fill-mode: forwards;
	-ms-animation-delay: 0.2s;
}
#MakerListPopUpMenu.close .makerlist_popupmenu_title {
	animation-name: makerlistclose2;
	animation-duration: 0.3s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-delay: 0s;
	-ms-animation-name: makerlistclose2;
	-ms-animation-duration: 0.3s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: 1;
	-ms-animation-fill-mode: forwards;
	animation-delay: 0s;
}
#MakerListPopUpMenu.close .makerlist_close_btn {
	animation-name: makerlistclose3;
	animation-duration: 0.3s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-delay: 0s;
	-ms-animation-name: makerlistclose3;
	-ms-animation-duration: 0.3s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: 1;
	-ms-animation-fill-mode: forwards;
	animation-delay: 0s;
}
@keyframes makerlistclose1 {
  0% {
    height: 100%;
  }
  100% {
    height: 0%;
  }
}
@keyframes makerlistclose2 {
  0% {
    margin-left: 35%;
  }
  100% {
    margin-left: 135%;
  }
}
@keyframes makerlistclose3 {
  0% {
    opacity: 1;
    top: 20px;
  }
  100% {
    opacity: 0;
    top : -100px;
  }
}
-ms-@keyframes makerlistclose1 {
  0% {
    height: 100%;
  }
  100% {
    height: 0%;
  }
}
-ms-@keyframes makerlistclose2 {
  0% {
    margin-left: 35%;
  }
  100% {
    margin-left: 135%;
  }
}
-ms-@keyframes makerlistclose3 {
  0% {
    opacity: 1;
    top: 20px;
  }
  100% {
    opacity: 0;
    top : -100px;
  }
}
#MakerListPopUpMenu > ul.makerlist_content ul.makerlist_headtab{
	display: grid;
	gap: 10px 5px;
	margin-top: 20px;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	margin-bottom: 20px;
}
#MakerListPopUpMenu > ul.makerlist_content ul.makerlist_headtab li{
	height: 50px;
}
#MakerListPopUpMenu > ul.makerlist_content ul.makerlist_headtab li a {
	display: grid;
	font-size: 16px;
	border: 2px solid var(--mainthema-background-color);
	background-color: #fff;
	color: var(--mainthema-background-color);
	font-weight: bold;
	transition: .4s;
	border-radius: 4px;
	height: 100%;
	place-items: center;
}
#MakerListPopUpMenu > ul.makerlist_content ul.makerlist_headtab li a:hover {
	background-color: #0b2265;
	color: #fff;
}

#MakerListPopUpMenu > ul.makerlist_content .makerlist_scroll_up {
	display: none;
	float: right;
	line-height: 26px;
	position: relative;
	font-size:16px;
}
#MakerListPopUpMenu > ul.makerlist_content .makerlist_scroll_up:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 8px 16px 8px;
	border-color: transparent transparent var(--main-link-color) transparent;
	vertical-align: middle;
	position: absolute;
	left: -18px;
	top: 0;
	bottom: 0;
	margin: auto;
}
#MakerListPopUpMenu > ul.makerlist_content .makerlist_scroll_up:hover:before {
	color: var(--main-link-hovercolor);
	border-bottom-color: var(--main-link-hovercolor);
}
@media screen and (max-width: 768px) {
	#MakerListPopUpMenu > ul.makerlist_content {
		margin:20px 0 50% 0;
	}
	#MakerListPopUpMenu a.maker_link {
		font-size:16px;
	}
}