/* Picnic CSS 上書き */

/* ナビゲーションバー調整 */
	nav{
		height:4em;
		padding:0em 0em 0em 0em;
		background:#fff;
		box-shadow:0 0 0.2em rgba(17,17,17,0.2);
		color:#484c7f;
		background-color: rgba(255,255,255,0.8);
		font-weight:bold;

	}
	@media (min-width: 800px) {
		nav { height:4em; }
		.navSIZE { overflow: hidden;height: 4em; }
	}
	@media (max-width: 799px) {
		nav { height:3em; }
		.navSIZE { overflow: hidden;height: 3em; }
	}

/* ナビゲーションバーの文字のマージン */
.brand	{
	margin:0em 0em 0em 0.5em;
	}
.menu	{
	margin:-0.1em 0.5em 0em 0em;
	}


/* ナビゲーションバーの文字の大きさ変更 */
.navFs{	font-size:100%;}
	@media (min-width: 800px) {
		.navFs{font-size:100%;}
	}
	@media (max-width: 799px) {
		.navFs{font-size:120%;}
	}


/* ナビゲーションバーのフォーカス色変更 */
button.pseudo:hover,.pseudo.button:hover,.pseudo[type=submit]:hover,.pseudo.dropimage:hover,
button.pseudo:focus,.pseudo.button:focus,.pseudo[type=submit]:focus,.pseudo.dropimage:focus	{
	/* box-shadow:inset 0 0 0 99em rgba(241,212,212,0.3) */
	box-shadow:inset 0 0 0 99em #fff;
	color:#ff0000;
	}


/* 背景色、文字色、フォント変更 */
body {
	background:#f3f3f3;
	color:#222222;
	font-family: 'Kosugi Maru', sans-serif;
	}

a:hover	{
	color:#ff0000;
	}



/* スライダーボックス調整 */
.SliderDiv {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-top:1.5em;
	margin-bottom:0em;
}
	@media (min-width: 800px) {
		.SliderDiv { width:70%;justify-content: center;margin-bottom:1em; }
	}
	@media (max-width: 799px) {
		.SliderDiv { width:100%;margin-bottom:0em; }
	}



/* メインボックス調整 */
.MainDiv {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-top:0em;
	margin-bottom:0em;
}
	@media (min-width: 800px) {
		.MainDiv { width:70%;justify-content: center; }
	}
	@media (max-width: 799px) {
		.MainDiv { width:100%; }
	}



/* 更新情報-左 */
.MainDivLeft	{
	text-align:center;
}
.MainDivLeftBanner {
	padding:0em 2em 0em 0em;
}
.MainDivLeftBanner img{
	width:100%;
	height:auto;
	margin:0.5em;
}
	@media (min-width: 800px) {
		.MainDivLeftBanner img { width:100%; }
		.MainDivLeftBanner { padding:0em 2em 0em 0em }
	}
	@media (max-width: 799px) {
		.MainDivLeftBanner img { width:75% }
		.MainDivLeftBanner { padding:0em 0em 0em 0em }
	}



/* 更新情報-右 */
.MainDivRight	{
	text-align:center;
}

.MainDivRightBox	{
	background-color:#fff;
	padding:1em 2em 1em 2em;
	border-radius:10px;
	text-align:left;
	}
	@media (min-width: 800px) {
		.MainDivRight { margin:0em 0em 0em 0em }
		.MainDivRightBox { margin:0em 1.5em 1em 0em  }
	}
	@media (max-width: 799px) {
		.MainDivRight { margin:0em 0em 2em 0em }
		.MainDivRightBox { margin:0em 1.5em 0.8em 1.5em;font-size:80%; }
	}
.MainDivRightBoxDay	{
	font-size:90%;
	color:#555;
	}
.MainDivRightBoxText	{
	margin:0em 0em 0em 0.2em;
	}



/* カード */
	@media (min-width: 800px) {
		.card3 { margin:0em 0em 2em 0em }
	}
	@media (max-width: 799px) {
		.card3 { margin:0em 2em 2em 2em }
	}
.card3 img {
	border-radius:10px;
	}
.card3 footer {
	font-size:90%;
	}
.card3_text	{
	font-size:90%;
	}



/* メインコンテンツ調整 */
.maincondiv {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-top:0em;
	margin-bottom:5em;
}
	@media (min-width: 800px) {
		.maincondiv { width:75%;justify-content: center; }
	}
	@media (max-width: 799px) {
		.maincondiv { width:90%; }
	}
img { width: 100%; }



.subcondiv_bg {
	margin-top:3em;
	margin-bottom:5em;
	background-color:#f1d4d4;
	text-align:center;
}
.subcondiv {
	margin-left:auto;
	margin-right:auto;
	padding:10px;
	font-size:80%;
	text-align:center;
}
	@media (min-width: 800px) {
		.subcondiv { width:80%;justify-content: center; }
	}
	@media (max-width: 799px) {
		.subcondiv { width:90%; }
	}

/* 見出し */
h2 {
	color: #010079;
	padding-top:0.1em;
	padding-bottom:0.1em;
	text-align:center;
	background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
	background: repeating-linear-gradient(-45deg, #f0d4d1, #f0d4d1 3px,#f3f3f3 3px, #f3f3f3 7px);
	margin:2em 0em 1em 0em;
	letter-spacing:0.5em;
	font-weight:normal;
}
	@media (min-width: 800px) {
		h2 { font-size:150%; }
	}
	@media (max-width: 799px) {
		h2 { font-size:120%;  }
	}
h3 {
	margin:0em 0em 0.5em 0em;
	padding:0.5em;
	color: #010079;
	text-align:center;
	letter-spacing:0.2em;
	font-size:90%;
	font-weight:normal;	
}


/* スライダー設定 */
.swiper-container {
	width: 100%;
	height: auto;
	}
.swiper-container a{ width:100%; }

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #f3f3f3;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	}


/* カード用の設定 */
.card {
	background: #fff;
	border-radius: 10px;
	padding:0em 0em 0em 0em;
	margin:0em 1em 1em 1em;
	border:0px;
}

.card header{
	padding:0em 0em 0em 0em;
	margin:0em 0em 0em 0em;
}

.card img {
	border-radius: 32px;
	padding:1em 1em 0.5em 1em;
}

.card_text{
	font-size:80%;
	color:#555555;
	margin;0px;
	padding:0px;
	font-weight:normal;
	text-aligh:left;
}

.card footer {
	padding:1em 1.5em 1em 1.5em;
	margin:0em 0em 0em 0em;
	text-align:left;
}






.card_label{
	font-size:70%;
	padding-top:0.2em;
	padding-bottom:0.1em;
	padding-left:2em;
	padding-right:2em;
}
#card_label_cien{ background-color:#f9d276;}
#card_label_site{ background-color:#76ccf9;}


.card_date{
	font-size:60%;
	margin;0px;padding:0px;
	color:#999999;
	font-weight:normal;
}

.card_button {
	display: inline-block;
	text-decoration: none;
	color: #0b3483;
	font-size:80%;
	background-color:#fff;
	border:solid 1px #ddd;
	padding-top:0.2em;
	padding-bottom:0.2em;
	padding-left:1.5em;
	padding-right:1.5em;
	margin:1em 0em 0em 0em;
	border-radius: 4px;
}

.card_button:hover,.card2_button:hover {
	background-color:#e8e8e8;
}

.card2 {
	border-radius: 10px;
	border:2px solid #f3f3f3;
	margin-left:0.5em;
	margin-right:0.5em;
	padding-bottom:0.5em;
}

.card2 img {
	border-radius: 8px 8px 0px 0px;
}
.card2_text {
	font-size:80%;
	color:#555555;
	}
.card2 footer {
	padding-top:0.5em;
	padding-left:0.5em;
	padding-right:0.5em;
	padding-bottom:1em;
	}
.card2_button {
	display: inline-block;
	text-decoration: none;
	color: #0b3483;
	font-size:90%;
	background-color:#fff;
	border:solid 1px #777;
	border-radius: 4px;
	margin:0.2em;
}
	@media (min-width: 800px) {
		.card2_button {  }
	}
	@media (max-width: 799px) {
		.card2 { font-size:90%; }
	}
	@media (min-width: 800px) {
		.card2_button { padding-top:0.2em;padding-bottom:0.2em;padding-left:1.5em;padding-right:1.5em; }
	}
	@media (max-width: 799px) {
		.card2_button { padding-top:0.2em;padding-bottom:0.2em;padding-left:1em;padding-right:1em;}
	}

/* 同人用の見出し */
#djn_ttl {
	padding: 0em 0em 0.5em 0em;
	margin: 0em 0em 0em 0em;
	text-align:center;
	width:100%;
	font-weight:normal;
	}

/* 同人下部のリンク */
.card_links {
	padding-bottom:1em;
	font-size:90%;
}
	@media (min-width: 800px) {
		.card_links img { width:auto; }
	}
	@media (max-width: 799px) {
		.card_links img { width:80%;height:auto; }
	}
.card_links a:hover {
	color:#ff0000;
	letter-spacing:0.2em;
}



/* フッター */
.body_footer{
	background-color:#484c7f;
	text-align:center;
	padding:2em 0em 2.5em 0em;
	margin:10em 0em 0em 0em;
	color:#ddd;
}
	@media (min-width: 800px) {
		.body_footer { font-size:80%;letter-spacing:0.2em }
	}
	@media (max-width: 799px) {
		.body_footer { font-size:65%;letter-spacing:0em;line-height:150% }
	}



/* ページトップに戻るボタン */
#return-top {
	border-radius: 50%;
	bottom: 10px;
	color: #d66262;
	font-size: 30px;
	height: 50px;
	width: 50px;
	outline: 0;
	position: fixed;
	right: 10px;
	text-align: center;
	padding-left:12px;
	padding-top:9px;
	opacity: 0.8;
}



/* 年齢確認ボックス */
#c-modal_bg {
   	position: fixed;
	top: 0;
	left: 0;
	z-index: 10001;
	width: 100%;
	height: 100%;
	background:rgba(0,0,0,0.9);
	display:none;
}
#c-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 10002;
	transform: translate(-50%, -50%);
	background: #ffffff;
	text-align:center;
	border-radius: 10px;
	font-size:90%;
	display:none;
}
	@media (min-width: 800px) {
		#c-modal { width: 600px;padding:2em 5em 4em 5em; }
	}
	@media (max-width: 799px) {
		#c-modal { width: 90%;padding:1em 3em 3em 3em; }
	}
#c-modal_close {
    padding: 4px 1.2em 5px 1.2em;
    cursor: pointer;
}





/* 同人関係 */
.djn_shop img	{
	width:auto;
	height:auto;
	}

.djn_main_img img {
	border-radius: 10px;
}

.djn_main_txt {
	text-align:left;
	}
	@media (min-width: 800px) {
		.djn_main_img img { margin:0em 0em 2em 0em;padding:0em 0em 0em 0em }
		.djn_main_txt { margin:0em 0em 2em 0em;padding:0em 0em 0em 2em }
		.djn_sub_txt { margin:0em 0em 0em 0em;padding:2em 0em 0em 0em }
	}
	@media (max-width: 799px) {
		.djn_main_img img { margin:0em 0em 0em 0em;padding:0em 1em 0em 1em }
		.djn_main_txt { margin:0.5em 1em 0em 1em;padding:0em 1em 0em 1em }
		.djn_sub_txt { margin:4em 0em 0em 0em;padding:0em 1.5em 0em 1.5em }
	}

.djn_main_txt h4 {
	font-size:130%;
	font-weight:normal;
	padding:0px;
	margin:0em 0em 0em 0em;
	}

.djn_main_txt h4:after {
	content: "";
	display: block;
	height: 4px;
	background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
	background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}
.djn_main_txt h5{
	letter-spacing:0.2em;
	font-weight:normal;
	}
#card_djn_shop {
	padding:0em 0.5em 0.5em 0.5em;
	margin:0px;
	text-align:center;
	}
	@media (min-width: 1000px) {
		#card_djn_shop img { width:100%; }
	}
	@media (max-width: 999px) {
		#card_djn_shop img { width:auto;float:left; }
	}
	@media (max-width: 600px) {
		#card_djn_shop img { width:50%;float:left; }
	}

#card_djn_shop img {
	height:auto;
	}

#djn_main_tbl	{
	font-size:80%;
	font-weight:normal;
	width:100%;
	margin:0em 0em 2em 0em;
	}

.djn_sub_txt{
	text-align:left;
	}
	@media (min-width: 800px) {
		.djn_sub_txt  { font-size:90%; }
	}
	@media (max-width: 799px) {
		.djn_sub_txt  { font-size:80%; }
	}

.djn_sub_txt h5{
	font-size:130%;
	font-weight:normal;
	padding:0px;
	margin:0em 0em 0em 0em;
	}
.djn_sub_txt h5:after {
	content: "";
	display: block;
	height: 4px;
	background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
	background: linear-gradient(to right, rgb(230, 90, 90), transparent);
	}
.djn_sub_txt p{
	margin-bottom:3em;
	font-weight:normal;
	}
.djn_sub_txt h6{
	font-size:110%;
	margin:0px;padding:0px;
	}
.djn_sub_txt p img{
	width:auto;
	}
.djn_sub_smlcg {
	padding:1em 0em 0em 0em;
	}
.djn_sub_smlcg img {
	}
	@media (min-width: 800px) {
		.djn_sub_smlcg img { border-radius: 0px; }
	}
	@media (max-width: 799px) {
		.djn_sub_smlcg img { width:100%;float:left; }
	}
.djn_link img {
	margin:0px;padding:0px;
	}
	@media (min-width: 800px) {
		.djn_link img  { width:75%; }
	}
	@media (max-width: 799px) {
		.djn_link img  { width:75% }
	}
.djn_link{
	margin:0em 0px 0px 0px;
	padding:2em 0px 0px 0px;
	text-align:center;
	}

.djn_smp img{
	width:auto;
	margin:0px;padding:0px;
	}
	@media (min-width: 800px) {
		.djn_smp img  { width:auto; }
	}
	@media (max-width: 799px) {
		.djn_smp img  { width:100%; }
	}
.djn_smp {
	text-align:center;
	margin:0em 0px 0px 0px;
	padding:2em 0px 0px 0px;
	}
.djn_smp2 img{
	width:100;
	margin:0px;padding:0px;
	box-shadow: 0 2px 5px #ccc;
	border-radius: 10px;
	}
.djn_smp2 {
	text-align:center;
	margin:0em 0px 0px 0px;
	padding:2em 2em 0em 0px;
	}

.djn_smp_txt {
	margin:0em 0px 0px 0px;
	padding:2em 0px 0px 0px;
	text-align:left;
	}
.djn_smp_txt h6 {
	font-size:90%;
	}
.djn_chara img{
	width:auto;
	margin:0px;padding:0px;
	box-shadow: 0 2px 5px #ccc;
	border-radius: 10px;
	}
.djn_chara{
	text-align:center;
	margin:0em 0px 0px 0px;
	padding:2em 0px 0px 0px;
	}
.djn_smpcg_txt {
	font-size:80%;
	line-height:130%;
	}
.djn_smpcg_txt img {
	width:auto;
	}

	@media (min-width: 800px) {
		.djn_mv  { width:480px;height:360px }
	}
	@media (max-width: 799px) {
		.djn_mv  { width:auto;height:auto; }
	}
.djn_smpcg_txt2 {
	font-size:80%;
	line-height:130%;
	}
.djn_smpcg_txt2 img {
	width:100%;
	}



/* 画像切り替え */
	@media (min-width: 800px) {
		.pc  { display:block !important; }
		.sp  { display:none !important; }
	}
	@media (max-width: 799px) {
		.pc  { display:none !important; }
		.sp  { display:block !important; }
	}


/* トップ用のバナー */
.djn_bnr_top img {
	box-shadow: 0 2px 5px #ccc;
}
	@media (min-width: 800px) {
		.djn_bnr_top img  { width:auto; }
	}
	@media (max-width: 799px) {
		.djn_bnr_top img  { width:90%; }
	}
.djn_bnr_top {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-top:1em;
	margin-bottom:0em;
	width:80%;
	z-index:100;
}
.djn_bnr_top2 img {
}
	@media (min-width: 1200px) {
		.djn_bnr_top2 img  { width:30%; }
	}
	@media (max-width: 1199px) {
		.djn_bnr_top2 img  { width:40%; }
	}
	@media (max-width: 999px) {
		.djn_bnr_top2 img  { width:50%; }
	}
	@media (max-width: 799px) {
		.djn_bnr_top2 img  { width:60%; }
	}
	@media (max-width: 599px) {
		.djn_bnr_top2 img  { width:80%; }
	}
.djn_bnr_top2 {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-top:1em;
	margin-bottom:0em;
	width:15%;
	z-index:100;
}



/* ローディング用 */
#loadwrap	{
	position: absolute;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	background:#f0d4d1;
	z-index: 10001;
	}

#loader2,
#loader2:before,
#loader2:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
#loader2 {
  color: #ffffff;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
#loader2:before,
#loader2:after {
  content: '';
  position: absolute;
  top: 0;
}
#loader2:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
#loader2:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}



/* メインコンテンツをちょっと消しとく */
.hidden {
	display: none;
	}