html{
	font-family: YuGothic,'Yu Gothic','メイリオ', Meiryo,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
	scroll-behavior: smooth;
}
body{}
a{text-decoration: none;}
li{list-style-type: none;}
@media (prefers-color-scheme: dark){}
	/* ローディング画面 */
	#loading {
	  width: 100vw;
	  height: 100vh;
	  transition: all 1s;
	  background-color: #00dd8d;
		position: fixed;
	  top: 0;
	  left: 0;
	  z-index: 9999;
	}
	.load_logo{
		position:absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		margin:0 auto;
		font-weight:bold;
		font-size:36px;
		color:#fff;
	  /* animation: logo 1.0s infinite ease-in-out; */
	}
	.load_logo span:first-child{animation: logo 1.0s infinite ease-in-out;}
	.load_logo span:nth-child(2){animation: logo 1.0s infinite ease-in-out;animation-delay:.1s;}
	.load_logo span:nth-child(3){animation: logo 1.0s infinite ease-in-out;animation-delay:.2s;}
	.load_logo span:nth-child(4){animation: logo 1.0s infinite ease-in-out;animation-delay:.3s;}
	.load_logo span:nth-child(5){animation: logo 1.0s infinite ease-in-out;animation-delay:.4s;}
	.load_logo span:nth-child(6){animation: logo 1.0s infinite ease-in-out;animation-delay:.5s;}
	.load_logo span:nth-child(7){animation: logo 1.0s infinite ease-in-out;animation-delay:.6s;}
	.load_logo span:nth-child(8){animation: logo 1.0s infinite ease-in-out;animation-delay:.7s;}
	.load_logo span:nth-child(9){animation: logo 1.0s infinite ease-in-out;animation-delay:.8s;}
	.load_logo span:last-child{animation: logo 1.0s infinite ease-in-out;animation-delay:.9s;}
	.loaded {
  opacity: 0;
  visibility: hidden;
}
	/* ローディングアニメーション */
	@keyframes logo {
	  0% {opacity:0;}
		40% {opacity:1;}
	}
/*----*/
.container{
	background:#fefefe;
}
.header h1{
	font-size:21px;
	text-align:center;
	font-style:italic;
	border-bottom:2px solid #333;
	padding:5px;
}
h2.midashi{
	width:94%;
	max-width:1400px;
	font-size: 19px;
	margin:20px auto 0;
	padding:5px 0;
	border-bottom:1px solid #333;
}
@media(min-width: 768px) {
	.header h1{font-size:25px;}
}
.twitter_btn{
	width:90%;
	margin:1em auto;
	text-align: right;
	display: flex;
}
.twitter_btn a{
	display: block;
}
/*--item-grid--*/
.item-wrapper {
	width:100%;
	max-width:1400px;
	margin:20px auto;
	padding-bottom: 10px;
	background:#fff;
	filter:drop-shadow(0 1px 3px #0004);
  display: grid;
	/* grid-template-rows: 1fr 1fr 24px 24px 30px; */
	/* grid-template-columns:50% 1fr; */
	grid-template-areas:
		"video"
		"midashi"
		"img"
		"title"
		"circle"
		"author"
		"cart";
	gap: 10px 15px;
	align-items: center;
}
@media(min-width: 768px) {
  .item-wrapper {
		/* grid-template-rows:1fr 24px 24px 30px; */
		grid-template-columns:50% 1fr;
		grid-template-areas:
			"video midashi"
	    "video img"
	    "video title"
			"video circle"
			"video author"
			"video cart";
  }
}
.item-midashi {
	grid-area:midashi;
	width:94%;
	font-size:19px;
	margin:0 auto;
	padding:8px 0;
	border-bottom:1px solid #333;
}
.item-video {
	grid-area:video;
	width: 100%;
  height:100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background:#ccc;
}
.item-video video{
	width:100%;
	max-width:720px;
	height:auto;
}
.item-img {
	grid-area:img;
	width:100%;
	max-width:320px;
	/* max-height:375px; */
	height:auto;
	margin:0 auto;
	background:#fcc;
	display:flex;
}
.item-img img{
	width:100%;height:auto;
}
.item-title {
	grid-area:title;
	position:relative;
}
.item-title a{
	display: block;
	font-weight:bold;
  font-size: 18px;
	color:#333;
}
.item-title a:before{
	content:"";
	width:24px;
	height:24px;
	margin:4px;
	transform: translateY(6px);
	display: inline-block;
	background-image:url(../img/icon_cachinko.svg);
	background-size: contain;
	position:relative;
	top:0;left:0;
}
@media(min-width: 768px) {
	.item-title a{font-size: 22px;}
}
.item-circle {
	grid-area:circle;
	position: relative;
}
.item-circle a{
  font-size: 16px;
	color:#333;
}
.item-circle:before{
	content:"サークル:";
	width:;
	margin:4px;
	font-size:13px;
	display: inline-block;
	background-size: contain;
	position:relative;
	top:0;left:0;
}
@media(min-width: 768px) {
	.item-circle a{font-size: 20px;}
}
.item-author {
	grid-area:author;
	position: relative;
}
.item-author a{
  font-size: 16px;
	color:#333;
}
.item-author:before{
	content:"作家:";
	width:;
	margin:4px;
	font-size:13px;
	display: inline-block;
	background-size: contain;
	position:relative;
	top:0;left:0;
}
@media(min-width: 768px) {
	.item-author a{font-size: 20px;}
}
.item-cart {
	grid-area:cart;
	text-align:center;
}
.item-cart a{
	color:#333;
	font-weight:bold;
  font-size: 20px;
	line-height:30px;
	display:block;
	margin:0 5px;
	border-radius:15px;
	border:1px #333 solid;
	box-sizing: border-box;
}
@media(min-width: 768px) {
	.item-cart a{font-size: 23px;line-height:40px;}
}
.card-wrapper{
	max-width:1400px;
	margin:20px auto;
	display: grid;
  grid-template-columns: repeat(auto-fill, 100%);
  justify-content: space-between;
	background:#fff;
	filter:drop-shadow(0 1px 3px #0004);
}
@media(min-width: 768px) {
	.card-wrapper{
	  grid-template-columns: repeat(auto-fill, calc(32%));
	}
}
.item-card{
	width:100%;
	margin:0 auto 40px;
	padding-bottom: 20px;
	position: relative;
	display: grid;
	grid-template-rows:;
	grid-template-columns:;
	grid-template-areas:
		"title"
		"video"
		"circle"
		"author"
		"cart";
	gap: 4px 10px;
	align-items: baseline;
}
.item-card:after{
	content: attr(data-text)"";
	position: absolute;
	left:4px;bottom:0;
	font-size:12px;
	color:#666;
}
/*----*/


.footer{
	max-width:1400px;
  margin:20px auto;
}
.link_mini{
  color: #000;
}
.link_mini a{
  font-size: 14px;
  line-height: 16px;
  border: solid 1px #000;
  border-radius: 30px;
  padding: 5px 10px;
  display: inline-block;
  margin: 5px 3px;
	color:#333;
}

.copyright {
    width: 100%;
    padding: 20px 0;
    color: #666;
    font-size: 10px;
    text-align: center;
    display: block;
	}
/*----*/
/*----*/
/*----*/