@charaset "UTF-8";

*{
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				}

body {
				font-family: Georgia, 'Hiragino Mincho ProN', 'ＭＳ 明朝', Cinzel , serif;
				margin: 0;
				padding: 0;
				min-width: 320px;
				}


				 @font-face {
				  font-family: 'Noto Serif Japanese';
				  font-style: normal;
				  font-weight: 500;
				  src: url(../../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Medium.woff2),url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Medium.woff),url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Medium.otf) format('opentype');
				  font-display: swap;
				 }


.wf-sawarabimincho { font-family: "Sawarabi Mincho"; }



:hover  {
				-webkit-transition: all 0.3s ease-out;
				-moz-transition: all 0.3s ease-out;
				-o-transition: all 0.3s ease-out;
				}


.bg{
				position: relative;
				background-image: url("../img/bg.jpg");
				background-repeat: no-repeat;
				}


/*ヘッダー*/
.header {
				position: relative;
				top: 0;
				z-index: 100;
				width: 100%;
				margin: 0 auto;
				overflow: hidden;
				height: auto;
				}

.menu {
				padding: 30px 0 0 30px;
				margin: -10px 0 -15px 0;
				width: 100%;
				position: relative;
				float: right;
				}

				.menu img {
							position: relative;
							top: 0px;
							}


.logo {
				float: left;
				width: 30%;
				margin:-10px 30px 0 0;
				text-align: right;
				}

.logo img {
				width: 200px;
				}



/*内容*/

.contents {
				font-family: Sawarabi Mincho;
				font-weight: 100;
				text-shadow: 0 0 10px #76c1ff;
				height: 100%;
				max-width: 800px;
				margin: 0 auto 0;
				overflow: hidden;
				}

.notice {
				padding: 40px 40px 30px 40px;
				margin: 15px;
				border-radius: 10px;
				background-color: #fff;
				box-shadow: 0 0 10px #76c1ff;
				}

				.notice img {
				width: 100%;
				vertical-align: left;
				}

				.notice a:hover {
				opacity: 0.5;
				}

/*キャラクター*/

.chara,.chara1 {
				font-family: 'Sawarabi Mincho','Noto Serif Japanese';
				font-weight: 100;
				text-shadow: 0 0 10px #76c1ff;
				margin: 10px auto -20px;
				/*padding: 30px 30px 0;*/
				background-repeat: no-repeat;
				background-size: contain;
				/*background-position: 30px 30px;
				box-shadow: 0 0 10px #f5c0dd inset,0 0 15px #f5c0dd inset,0 0 30px #f5c0dd inset,0 0 30px #f5c0dd inset,0 0 30px #f5c0dd inset;*/
				border-radius: 10px;
				height: 356px;
				}

			.chara
			{
				background-image: url(../img/chara_bg01.jpg);
				box-shadow: 0 0 10px #f5c0dd,0 0 15px #f5c0dd,0 0 30px #f5c0dd,0 0 30px #f5c0dd;
				margin-bottom: 30px;
			}

			.chara1
			{
				box-shadow: 0 0 10px #fff inset,0 0 15px #fff inset,0 0 30px #fff inset,0 0 30px #fff inset;
				margin-bottom: 30px;
				height: 356px;
			}

					.chara2
					{
						background-image: url(../img/chara_bg02.jpg);
					}

							.chara3
							{
								background-image: url(../img/chara_bg03.jpg);
							}

									.chara4
									{
										background-image: url(../img/chara_bg04.jpg);
									}

											.chara5
											{
												background-image: url(../img/chara_bg05.jpg);
											}





				.chara_in{
								position: relative;
								width: 100%;
								/*height: 356px;*/
								overflow: hidden;
								margin: 0 auto;
								}

								.image,.image1 {
												box-sizing: border-box;
												width: 50%;
												/*height: 430px;*/
												margin-top: 25px;
												}

								.image {
												float: left;
												padding: 0 0 0 30px;
												}

								.image1 {
												float: right;
												padding: 0 0 0 30px;
												}

												.image_in,.image_in2 {
																position: relative;
																float: right;
																width: 100%;
																height: 356px;
																background-size: contain;
																background-repeat: no-repeat;
																background-position: top;
																}

																/*.image a.test {
																display: block;
																height: 100%;
																width:  100%;
																}

																.in {
																position: absolute;
																bottom: -1px;
																}

																.in img {
																				width:100%;
																				vertical-align: bottom;
																				}*/


				.chach,.chach1 {
								position: relative;
								z-index: 999;
								padding: 0;
								display: inline-block;
								font-family: 'Noto Serif Japanese';
								font-weight: 500;
								font-size: 15px;
								/*line-height: 35px;*/
								color: #441970;
								position:relative;
								height:300px;
								-webkit-writing-mode: vertical-rl;
								writing-mode: vertical-rl;
								text-shadow: 0 0 5px #fff, 0 0 5px #fff,0 0 10px #fff,0 0 10px #fff;
								}
								.chach p,.chach1 p {
												-ms-writing-mode: tb-rl;
												margin:0;
												}

												.chach p {
																text-align: left;
																}

												.chach1 p {
																text-align: right;
																}

								.chach > table
								{
									  position:absolute;
									  top:10px;
									  left:60px;
										padding: 0 10px 0 0;
									  display:inline;
									  transform:translate(-70%, 0);
								}

								.chach1 > table
								{
										position:absolute;
										top: 10px;
										right: 60px;
										display:inline;
										transform:translate(100%, 0);
								}


				.info,.info1,.info2 {
								width: 50%;
								overflow: hidden;
								height: auto;
								}

				.info {
								float: right;
								padding: 15px;
								}

				.info1 {
								float: left;
								padding: 15px;
								}

								.info_in {

												}

												.info_in span {
																padding-right: 20px;
																font-size: 35px;
																}

								.info h1,.info1 h1,.info3 h1 {
												font-family: 'Sawarabi Mincho','Noto Serif Japanese';
												font-weight: 500;
												font-size: 50px;
												margin: 0;
												color: #000;
												}

								.info h2,.info1 h2 {
												font-family: 'Sawarabi Mincho','Noto Serif Japanese';
												font-weight: 500;
												font-size: 50px;
												margin: 0;
												color: #441970;
												}

								.info p,.info1 p {
												font-size: 16px;
												margin: 0 0 -10px 0;
												}


								.info table,.info1 table {
													border-radius: 10px;
													background-color: #fff;
													box-shadow: 0 0 10px #fff,0 0 15px #fff,0 0 30px #fff,0 0 30px #fff;
													font-size: 13px;
													margin: 0;
													color: #441970;
												}

								.info td,.info1 td{
													text-align: left;
													padding: 3px 0;
												}


								.text {
												float: left;
												width: 65%;
												font-size: 16px;
												margin-bottom: 15px;
												}

												.text {
																font-weight: 500;
																}


				.reward {
						font-family: 'Sawarabi Mincho','Noto Serif Japanese';
						font-weight: 100;
						}


								.reward h1 {
										font-family: 'Sawarabi Mincho','Noto Serif Japanese';
										font-weight: 100;
										font-size:50px;
										margin-top:0;
										color: #441970;
										text-shadow: 0 0 10px #8360a8;
										}

								.reward p {
										text-align:left;
										font-size: 15px;
										line-height: 25px;
										}

 	@media(max-width:450px){

				.reward h1 {
						margin:0;
						}

				.reward p {
						font-size: 13px;
						line-height: 20px;
						}

	}


/*トップボタン*/
.top_buttom {
				position: fixed;
				bottom: 20px;
				right: 20px;
				background-color: #5199bc;
				border-radius: 35px;
				font-family: Cinzel;
				font-size: 14px;
				width: 70px;
				height: 70px;
				text-align: center;
				z-index: 10;
				}

.top_buttom a {
				display: block;
				padding: 25px 0;
				text-decoration: none;
				color: #fff;
				}

.top_buttom:hover {
				background-color: #000;
				box-shadow: 0 0 10px #76c1ff;
				}


/*フッター*/
.footer {
				text-align: center;
				font-family: Cinzel;
				font-size: 10px;
				border-top: solid 1px #d1e1e8;
				padding: 15px;
				}

				.footer p {
								margin: -5px 0 0 0;
								}

/*//////////////////////////////////////////////////////*/

				@media(max-width:900px){


				}


				@media(max-width:790px){

					.menu {
									width: 100%;
									text-align: center;
									padding: 0 10px;
									margin: -30px auto 0 auto;
									}

					.logo {
									float: none;
									width: 100%;
									text-align: center;
									margin: 25px 0 -20px 0;
									padding: 20px 0 0 0;
									}

									.logo img {
													width: 200px;
													}

					.chara,.chara1 {
						height: auto;
						background-size: auto;
									}

					.image,.info,.image1,.info1 {
									float: none;
									width: 100%;
									}

									.info,.info1 {
													margin-top: -100px;
													}

													.image1 {
													padding: 0 0 0 30px;
																	}

									.image_in2 {
										height: 280px;
													}


									.image_in2 img {
										height: 100%;
													}


								.info h1,.info1 h1 {
												font-size: 35px;
												}

				}



				@media(max-width:600px){

					.image_in2 {
						height: 200px;
									}

				}



				@media(max-width:460px){

					.notice {
						padding: 15px 15px 15px 15px;
									}

									/*.image,.image1 {
													padding-left: 15px;
													}*/

									.chach,.chach1 {
													font-size: 14px;
												}

												.info,.info1 {
																padding-top: 0;
																}

						.image_in2 {
							height: 150px;
										}

				}


				@media(max-width:450px){

					.image_in {
						height: 230px;
					}

				}




				@media(max-width:320px){


					.chach > table {
							top:0;
							left:40px;
					}

					.image_in {
						height: 230px;
					}

					.image_in2 {
						height: 100px;
					}

				}