:root {
	--pcWidth:				1000px;
	--tbWidth:				 768px;
}

* {
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px; 
}

a { 	
	text-decoration: none; 
}

a:hover {
	text-decoration: underline; 
	color: #000000; 
}

.adminonly {
	background: #FFDDDD;
}

p.toarc {
	margin: 70px 0px 0px 0px;
}

p.toarc a {
	text-decoration: none;
	background: #EEEEEE;
	color: #000000;
	padding: 10px 20px;
	border: solid 1px #888888;
	border-radius: 7px;
}

p.toarc a:hover {
	background: #CCCCCC;
}

.clearfix::after, 
header::after, 
main::after, 
aside::after, 
footer::after,
section::after { 
	content: ""; 
	display: block; 
	clear: both; 
} 

.l { text-align: left; }
.c { text-align: center; }
.r { text-align: right; }

.att { color: #AA0000;}
.opt { color: #777777; }

.tm { margin-top:    1rem; }
.bm { margin-bottom: 1rem; }

img { 
	max-width: 100%; 
	height: auto; 
} 

time {
	font-weight: normal;
	font-style: italic;
	font-size: 100%;
}

blockquote {
	border-radius: 10px;
	border: 1px dotted #DDDDDD;
	background-color: #F8F8F8;
	margin: 20px 20px 20px 20px;
	padding: 20px;
}

html {
	height: 100%;
	box-sizing: border-box;
}

body { 
	position: relative;
	text-align: center; 
	margin: 0px auto; 
	width: 100%;
	color: #222222;
} 

footer { 
	width: 100%; 
} 

footer a {
	text-decoration: underline;
	color: #0000FF;
}

main,
aside {
	margin: 0px auto;
}

main {
	padding: 100px 0px 0px 0px;
}

main.nopad {
	width: 100%;
	padding: 0px;
}

header ul, 
footer ul,
header ol, 
footer ol { 
	list-style-type: none;
} 

#header.moveUp {
	animation: animateUp 0.5s forwards;
}

@keyframes animateUp {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-100px);
	}
}

#header.moveDw{
	animation: animateDw 0.5s forwards;
}
@keyframes animateDw {
	from {
		opacity: 0;
		transform: translateY(-100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#header {
	position: fixed;
	z-index: 10;
	width: 100%;
	height: 60px;
	background: rgba(255, 255, 255, 0.9);
}

#globalCart {
	display: block;
	width:  40px;
	height: 40px;
	background-image: url(/assets/cycle_logo.svg);
	background-size: contain;
	text-indent: -9999px;
	position: absolute;
	left: 10px;
	animation: loadingrotation 2s linear infinite;
	transition-property: filter;
	transition-duration: .5s;
	transition-timing-function: ease;
}

#globalCart a {
	display: block;
	width: 100%;
	height: 100%;
}

#globalCart.setcart {
	animation: cencel;
	background-image: url(/assets/cart_icon.svg);
}

@keyframes loadingrotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

#header * {
	color: #222222;
}

#header nav#globalMenuDv {
	width: var(--pcWidth);
	height: 40px;
	padding: 10px 0px 10px 0px;
	margin: 0px auto;
	position: relative;
}

#header h1.site-title a,
#header  p.site-title a {
	display: block;
	height: 40px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	text-indent: -9999px;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
}

#header h1.site-title a,
#header  p.site-title a {
	width: 315px;
	background-image: url(/assets/logo_artshop_pc.svg);
}


#globalMenu {
	display: block;
	width:  40px;
	height: 40px;
	background-image: url(/assets/menu_navs.svg);
	background-repeat: no-repeat;
	background-size: contain;
	text-indent: -9999px;
	position: absolute;
	right: 10px;
}

#globalMenuDl {
	z-index: 5;
	display: none; 
	opacity: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	min-height: 100vh;
	min-height: calc(var(--vh, 1vh) * 100);
	overflow-x: none;
	overflow-y: auto;
	top: 60px;
	left: 0;
	background: rgba(255, 255, 255, 0.975);
}

#globalMenuDl div form {
	width: calc(100% - 20px);
	margin: 0px auto;
	float: none;
	position: static;
}

#globalMenuDl div ul {
	width: calc(100% - 6px);
	padding-top: 40px;
}

#globalMenuDl div ul li {
	display: block;
	text-align: center;
	height: 50px;
}

#globalMenuDl div ul li a {
	display: block;
	width: 100%;
	text-align: center;
	border-bottom: 1px solid #D9D9D9;
}

#globalMenuDl.fadeIn {
	animation: animateFadeIn 0.5s forwards;
}

@keyframes animateFadeIn {
	from {
		opacity: 0.0;
	}
	to {
		opacity: 1.0;
	}
}

#globalMenuDl.fadeOut {
	animation: animateFadeOut 0.5s forwards;
}
@keyframes animateFadeOut {
	from {
		opacity: 1.0;
	}
	to {
		opacity: 0.0;
	}
}

footer {
	background: #EDEDED;
	margin-top: 60px;
}

footer ul {
	margin: 0px auto 10px auto;
}

footer li {
	display: inline;
}

footer #footer-menu li {
	margin: 0px 15px;
}

footer #snsprd-menuB li {
	margin: 0px 5px;
}

#snsprd-menuT a[href*="facebook.com"],
#snsprd-menuB a[href*="facebook.com"],
#snsprd-menuT a[href*="twitter.com"],
#snsprd-menuB a[href*="twitter.com"],
#snsprd-menuT a[href*="x.com"],
#snsprd-menuB a[href*="x.com"],
#snsprd-menuT a[href*="instagram.com"],
#snsprd-menuB a[href*="instagram.com"],
#snsprd-menuT a[href*="youtube.com"],
#snsprd-menuB a[href*="youtube.com"],
#snsprd-menuT a[href*="threads.net"],
#snsprd-menuB a[href*="threads.net"],
#snsprd-menuT a[href*="threads.com"],
#snsprd-menuB a[href*="threads.com"],
#snsprd-menuT a[href*="spotify.com"],
#snsprd-menuB a[href*="spotify.com"] {
	display: inline-block;
	width: 40px;
	height: 40px;
	text-indent: -9999px;
}

#snsprd-menuT a[href*="facebook.com"],
#snsprd-menuB a[href*="facebook.com"] {		background-image: url(/assets/cicon_facebook.svg); 	}

#snsprd-menuT a[href*="twitter.com"],
#snsprd-menuB a[href*="twitter.com"] {		background-image: url(/assets/cicon_xtwitter.svg); 	}

#snsprd-menuT a[href*="x.com"],
#snsprd-menuB a[href*="x.com"] {		background-image: url(/assets/cicon_xtwitter.svg); 	}

#snsprd-menuT a[href*="instagram.com"],
#snsprd-menuB a[href*="instagram.com"] {	background-image: url(/assets/cicon_instagram.svg); 	}

#snsprd-menuT a[href*="youtube.com"],
#snsprd-menuB a[href*="youtube.com"] {		background-image: url(/assets/cicon_youtube.svg); 		}

#snsprd-menuT a[href*="threads.net"],
#snsprd-menuB a[href*="threads.net"],
#snsprd-menuT a[href*="threads.com"],
#snsprd-menuB a[href*="threads.com"] {		background-image: url(/assets/cicon_threads.svg); 		}

#snsprd-menuT a[href*="spotify.com"],
#snsprd-menuB a[href*="spotify.com"] {		background-image: url(/assets/cicon_spotify.svg); 		}

.aCredit {
	width: 100%;
	padding-bottom: 30px;
}

.aCredit div {
	width: 100%;
	text-align: left;
}

.sharesns {
	list-style-type: none;
}

.sharesns li {
	display: inline-block;
	/* float: right; */
	margin: 0px 5px;
}

.sharesns li a[href*="pinterest.jp"],
.sharesns li a[href*="facebook.com"],
.sharesns li a[href*="twitter.com"],
.sharesns li a[href*="x.com"],
.sharesns li a[href*="line.me"],
.sharesns li a[href*="b.hatena.ne.jp"] {
	display: inline-block;
	width: 30px;
	height: 30px;
	text-indent: -9999px;
}

.sharesns a[href*="pinterest.jp"] {	background-image: url(/assets/cicon_pinterest.svg); }
.sharesns a[href*="facebook.com"] {	background-image: url(/assets/cicon_facebook.svg); }
.sharesns a[href*="twitter.com"] {	background-image: url(/assets/cicon_xtwitter.svg); }
.sharesns a[href*="x.com"] {		background-image: url(/assets/cicon_xtwitter.svg); }
.sharesns a[href*="line.me"] {		background-image: url(/assets/cicon_line.svg); }
.sharesns a[href*="b.hatena.ne.jp"] {	background-image: url(/assets/cicon_hatebu.svg); }

#topTopBtn {
	position: fixed;
	bottom: 10px;
	right: 10px;
	width: 50px;
	height: 50px;
	text-indent: -9999px;
	background-image: url(/assets/pagetop_n.svg);
}

#topTopBtn:hover {
	background-image: url(/assets/pagetop_h.svg);
}

#topTopBtn:focus,
button:focus {
	outline: none;
}

#topTopBtn.show {
	animation: show .25s linear 0s;
}

#topTopBtn.hide {
	animation: hide .01s linear 0s;
}

#topicspath {
	text-align: left;
	margin: 0px 0px 40px 0px;
}

#topicspath {
	color: #888888;
}

#topicspath a {
	color: #444444;
}

h1.page-title {
	padding: 0 0 5px 0;
	border-bottom: 1px dotted #AAAAAA;
}

h1.h1_l {
	margin: 30px 0px 50px 0px;
}

h1.h1_n {
	margin: 30px 0px 20px 0px;
}

h1.page-title,
h1.page-title * {
	font-size: 175%;
}

.h2idxv {
	margin: 50px 0px 40px 0px;
	padding: 0px 0px 3px 0px;
	color: #444444;
	border-bottom: 1px dotted #AAAAAA;
	text-align: center;
	padding-left: 1rem;
	font-size: 150%;
}

.h2idxd {
	height: 0px;
	margin: 0px; 0px 0px 0px;
	text-indent: -9999px;
}

ul.imglst {
	list-style-type: none;
	margin: 10px 0px 20px 0px;
}

ul.imglst li {
	display: inline-block;
	background-color: #F8F8F8;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	aspect-ratio: 1;
	text-indent: -9999px;
	width: 192px;
	margin: 0px 5px 5px 0px;
}

ul.imglst li a {
	display: block;
	width: 100%;
	height: 100%;
}


.arcsec,
.autsec,
.grpsec {
	width: var(--tbWidth);
	margin: 20px auto;
}

.arcsec {
	background-repeat: no-repeat;
	background-size: 150px auto;
	background-position: left top;
}

.arcsec h2,
.arcsec time,
.arcsec p {
	display: block;
	margin-left: 170px;
	text-align: left;
}

.arcsec h2 {
	
}

.arcsec p {
	color: #666666;
	font-size: 90%;
	margin-top: 5px;
}

.arcsec h2 a,
h3.idxsec a {
	font-size: 150%;
}

.autsec {
	background-repeat: no-repeat;
	background-size: 200px auto;
	background-position: left top;
}

.autsec p,
.autsec blockquote {
	text-align: left;
}

.autsec p {
	margin-left: 220px;
}

.autsec blockquote {
	margin: 20px 20px 20px 240px;
}

.grpsec h2 {
	margin: 20px auto;
	font-size: 125%;
}


.imgprd {
	list-style-type: none;
	width: calc(100% - 20px);
	margin: 0px 10px;
}

.imgprd li {
	background-color: #F8F8F8;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	width: calc((100% / 3) - 5px - 5px);
	aspect-ratio: 1;
	margin: 5px;
	float: left;
}

.imgprd li a {
	text-decoration: none;
	display: table;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(255, 255, 255, 0.75);
	opacity: 0;
}

.imgprd li a:hover {
	opacity: 1;
}

.imgprd li a p {
	display: table-cell;
	vertical-align: middle;
}

.imgprd li a p strong {
	font-size: 125%;
}

.sjpy {
	font-size: 85%;
}

.awksec {
	margin-top: 20px;
}


.awksec #image {
	width: var(--tbWidth);
	aspect-ratio: 4 / 3;
	margin: 0px auto 10px auto;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	text-indent: -9999px;
}

.awksec #thumb {
	list-style-type: none;
}

.awksec #thumb li {
	display: inline-block;
	width: 100px;
	aspect-ratio: 1 / 1;
	margin: 0px 10px 10px 10px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	text-indent: -9999px;
	background-color: #F8F8F8;
	border: 2px solid #AAAAAA;
}

.awksec #thumb li:hover {
	background-color: #888888;
	border: 2px solid #888888;
}

.awksec div.halfl {
	width: 65%;
	float: left;
}

.awksec div.halfr {
	width: calc(35% - 30px);
	margin-left: 15px;
	padding-left: 14px;
	border-left: 1px dotted #AAAAAA;
	float: left;
}

.awksec div.halfl dl,
.awksec div.halfr dl {
	text-align: left;
	margin: 20px 0px 30px 0px;
}

.awksec div.halfl dt,
.awksec div.halfr dt {
	color: #666666;
	background: #FAFAFA;
	padding-left: 1rem;
}

.awksec div.halfl dd,
.awksec div.halfr dd {
	padding: 5px 5px 5px 3rem;
	margin-bottom: 15px;
}

.awksec div.halfl dd.large,
.awksec div.halfr dd.large {
	font-size: 150%;
}

.awksec div.halfl dd.large > span.sjpy,
.awksec div.halfr dd.large > span.sjpy {
	font-size: 65%;
}

.awksec div.halfr dd:nth-of-type(1) {
	padding-left: 0px !important;
	height: 200px;
	background-repeat: no-repeat;
	background-size: auto calc(200px - 5.0rem);
	background-position: center bottom;
	position: relative;
}

form#topcart {
	margin: 40px 0px 20px 0px;
}

form#topcart input[type="submit"] {
	padding: 1.0em 2.0em;
	border-style: none; /* for safari */
	background-color: #224488;
	color: #FFFFFF;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

form#topcart input[type="submit"][disabled] {
	background-color: #BBBBBB;
}


hr.non {
	border-width: 2px 0 0 0;
	border-style: dotted;
	border-color: #F0F0F0;
	margin: 40px 20px;
}

hr.eoc {
	display: block;
	position: relative;
	overflow: visible;
	text-align: center;
	border-width: 2px 0 0 0;
	border-style: dotted;
	border-color: #CCCCCC;
	height: 1em;
	line-height: 1.25em;
	margin: 50px 20px 40px 20px;
}

hr.eoc:after {
	position: absolute;
	width: 3rem;
	top: -0.75em;
	left: calc(50% - 1.5rem);
	display: inline-block;
	/* content: '🖼️'; */ 
	color: #888888;
	background: #FFFFFF;
	margin: 0px auto;
	text-align: center;
}

dl.notfnd {
	margin: 20px 20px;
	padding: 20px 20px;
	border: 1px dotted #AAA;
	border-radius: 15px 0 15px 0;
	background: #F8F8F8;
}


dl.notfnd dt {
	font-weight: bold;
	margin-top: 20px;
}

dl.notfnd dt:nth-of-type(1) {
	margin-top: 0px;
}

dl.notfnd dd {
	padding-left: 2rem;
}


#cform { 
	width: var(--tbWidth);
	margin: 20px auto;
	text-align: left;
}

/*
#cform .inqhead {
	text-align: center;
	background: #FFAAAA;
	border: 1px solid #FF6666;
	color: #000000;
	padding: 5px 0px;
}
*/

#cform dt { 
	background: #F8F8F8;
	padding: 5px 0px 5px 10px; 
	margin-bottom: 5px; 
	border-left: double 4px #EEEEEE;
} 

#cform dd { 
	padding: 5px 0px 5px 30px; 
	margin-bottom: 15px; 
	line-height: 150%; 
} 

#cform dd p {
	color: #222222;
	font-weight: bold;
	font-size: 125%;
}

#cform dd div {
	text-align: center;
	padding: 7px 0px 15px 0px;
}

#cform span { font-size: 80%; }

#cform input, 
#cform textarea, 
#cform select { 
	padding: 4px;
	border: 1px solid #444444;
	margin-bottom: 3px;
}

#cform input[type="text"],
#cform input[type="mail"],
#cform input[type="number"],
#cform select,
#cform textarea { padding: 5px; }

#cform textarea { 
	width: calc(100% - 10px);
	height: 150px; 
}

#cform .rem_a { width: 15rem; }
#cform .rem_b { width: 31rem; }
#cform .rem_c { width: 25rem; }
#cform .rem_d { width:  5rem; }
#cform .rem_e { width: calc(100% - 10px); }

#cform button[type="button"],
#cform button[type="submit"] {
	border: none;
	width: calc(100% - 2px);
	height: 50px;
	border-radius: 3px;
	border: 1px solid #095596;
	background: #1a66a7;
	color: #FFFFFF;
	font-size: 16px;
}

#cform button[type="button"]:active,
#cform button[type="submit"]:active {
	border: 1px solid #023867;
	background: #023867;
}

input:invalid,
select:invalid,
textarea:invalid {
	background: #FFCCCC;
}

#cform button[type="button"][disabled],
#cform button[type="submit"][disabled] {
	border: 1px solid #CCCCCC;
	background: #DDDDDD !important;
	color: #888888 !important;
	cursor: not-allowed !important;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media (min-width: 1000px) { 
	main {
		width: calc(var(--pcWidth) - 20px);
	}
	
	ul.imglst li:nth-of-type(5n) {
		margin: 0px 0px 5px 0px;
	}
	
	aside,
	.wtpad {
		width: var(--pcWidth);
		margin: 0px auto;
	}
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media (max-width: 999px) { 
	#header {
		width: calc(100% - 20px);
		padding: 0px 10px;
	}
	
	#header nav#globalMenuDv {
		width: 100%;
	}
	
	#globalMenuDl div {
		width: 100%;
	}
	
	main {
		width: calc(100% - 20px);
		padding: 100px 0px 0px 0px;
	}
	
	ul.imglst {
		text-align: center;
	}
	
	aside,
	.wtpad {
		width: calc(100% - 20px);
		padding: 0px 10px;
	}
	
	.awksec #image {
		width: 100%;
	}
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media (max-width: 767px) { 
	#header h1.site-title a,
	#header  p.site-title a {
		width: 205px;
		background-image: url(/assets/logo_artshop_sp.svg);
	}
	
	section.fedlist p {
		width: calc(100% / 1);
	}
	
	.arcsec,
	.autsec,
	.grpsec {
		width: 100%;
		margin: 20px auto;
	}
	
	#cform { 
		width: 100%;
	}
	
	#cform input[type="text"],
	#cform input[type="mail"],
	#cform input[type="number"],
	#cform select,
	#cform textarea { width: calc(100% - 20px); }
	
	.autsec {
		background-size: 150px auto;
	}
	
	.autsec p {
		margin-left: 160px;
	}
		
	.autsec blockquote {
		margin: 10px 10px 10px 170px;
		padding: 10px;
	}
	
	.awksec div.halfl,
	.awksec div.halfr {
		width: 100%;
		float: none;
		margin: 0;
		padding: 0;
		border: 0;
	}

}

@media (min-width: 661px) { 
	footer {
		padding: 20px 0px;
	}
}

@media (max-width: 660px) { 
	
	.imgprd li {
		width: calc((100% / 2) - 5px - 5px);
	}
	
	footer {
		padding: 20px 0px 60px 0px;
	}
	
	.aCredit div {
		width: 100%;
	}
	
	.sharesns li {
		margin-top: 7px;
	/*	float: left; */
	}
}