@charset "utf-8";
/* -------------------------------------------------- */
* {
	margin: 0px;
	padding: 0px;
}

html {
	overflow-x: hidden;
	height: 100%;
}

body {
	/*	font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "游ゴシック体", 'Yu Gothic', YuGothic, "ヒラギノ角ゴシック ProN W3", "Hiragino Kaku Gothic ProN W3", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.0em;
	color: #282828;
	line-height: 1.0em;
	letter-spacing: -0.1em;
	/*font-weight: bold;*/
	position: relative;
	background-color: #e1f0ff;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	height: 100%;
	z-index: -1;
	background-image:url("../img/bg.png");
	background-repeat:repeat;
	background-size:100px;
	/*	transform: rotate(.03deg);*/
}
/* ■テンプレ-------------------------------------------------- */
.pointer {
	cursor: pointer;
}

.clearfloat {
	clear: both;
	height: 0;
	font-size: 1px;
	line-height: 10px;
}

.zero {
	height: 0;
	font-size: 1px;
	line-height: 0px;
}

a {
	text-decoration: none;
}

	a:hover {
		color: #5555dd;
		/*text-decoration: underline*/
	}

/*img {
	margin: 0px;
	border: 0px;
	display: block;
	margin: 0px auto;
	padding: 0px;
}*/

.inlineimg {
	display: inline;
	margin: 1.0em 0.5em 0.2em 0.5em;
}

p {
	padding: 30px 30px 30px 30px;
}

/* ■共通-------------------------------------------------- */
#wrapper {
	position: relative;
	padding: 0px 0px 0px 0px;
	text-align: center;
	font-size: 1.9em;
	line-height: 1.6em;
	max-width: 900px;
	background-color: #C30D23;
	/*background-color: #f3e9ff;*/
	/*height: 100%;*/
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc {
	display: block !important;
}

.sp {
	display: none !important;
}

#titlehint {
	margin-top: -160px !important;
	width: 100%
}

.line {
	position: absolute;
	bottom: 13%;
	left: 10%;
	z-index: 3;
	max-width: 150px;
	width: 20vw
}

@media only screen and (max-width: 1000px) {
	.line {
		position: absolute;
		bottom: 11%;
		left: 10%;
		z-index: 3;
		max-width: 150px;
		width: 15vw
	}
}
@media only screen and (max-width: 757px) {
	.line {
		position: absolute;
		bottom: 6%;
		left: 5%;
		z-index: 3;
		max-width: 150px;
		width: 18vw
	}
}


	/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
	@media only screen and (max-width: 757px) {
		.pc {
			display: none !important;
		}

		.sp {
			display: block !important;
		}

		#titlehint {
			margin-top: -80px !important;
			width: 100%
		}

			#titlehint img {
				width: 150px;
				height: 50px;
			}

			#titlehint .txt {
				margin-top: 10px !important;
				height: 40px;
				font-size: 0.9em;
				margin-bottom: 20px
			}
	}



	/* ■開閉-------------------------------------------------- */
	div {
		margin: 0px auto;
	}

	/* ■解説-------------------------------------------------- */
	#titlehint {
		/*height:720px;*/
		overflow-x: hidden;
		text-align: center;
	}

	.sho {
		margin: 100px auto 20px auto;
	}

	.kaisetu {
		margin-bottom: 20px;
		width: 725px;
		height: 184px;
		background-repeat: no-repeat;
		background-position: center top;
	}

	#sns {
		text-align: center;
	}

		#sns img {
			display: inline-block;
			margin: 50px;
		}



	.txt {
		border: 3px solid #767582;
		height: 70px;
		width: 400px;
		padding-left: 20px;
		padding-right: 20px;
		font-size: 40px;
	}

		.txt::placeholder {
			font-size: 0.7em;
			text-align: left;
			color: #d3d3d3;
		}

	.error {
		color: red;
		font-weight: bold;
	}
	/* ■-------------------------------------------------- */


.title {
	width:80%;
	margin-top:50px;
}

.content {
	width:90%;
}

.tabele {
	padding-top:110px;
	margin-top:-80px;
	background-color:white;
	width: 90%;
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
	padding-bottom:20px;
}

.fotter {
	padding: 10px;
	text-align: center;
	background-image: linear-gradient(90deg, rgba(27, 40, 78, 1), rgba(0, 75, 100, 1) 50%, rgba(27, 40, 78, 1));
}

.pcmenu {
	position: fixed;
	top: 0px;
	left: 0px;
	color: #C30D23!important;
	font-size:1.8em;
	font-family:serif;
}
a {
	color: #C30D23 !important;
}
a:hover {
	color: #C30D23 !important;
}
.item {
	margin-top: 30px;
	margin-bottom: 30px;
	margin-left: 10px;
	/*background-color: rgba(255, 40, 78,0.5);*/
	background-color:rgb(255 197 12 / 0.65);
}




.menuimg {
	margin-top: 10px;
	margin-bottom: 10px;
	height: 8vw;
	max-height: 80px;
}

header {
	width: 100%;
	/*   height: 100px;*/
	z-index: 100;
}



@media only screen and (max-width: 750px) {
	header {
		width: 100vw;
		height: 20.3333333333vw;
	}
}

header.fixed {
	position: fixed;
}

@media only screen and (max-width: 750px) {
	header.sp-no-fix {
		position: static;
	}
}

header .wrapper {
	position: relative;
	margin: 0 auto;
	text-align: center;
	width: 100%;
	height: auto;
}

header.open .wrapper {
	height: auto;
}

header.open .hdiv {
	max-height: 100vh;
	overflow-y: scroll;
	overflow-x: hidden;
}

header.close .wrapper {
	height: 0px;
}

header.close .hdiv {
	/*    max-height: 0;*/
	overflow-y: hidden;
	overflow-x: hidden;
}

@media only screen and (max-width: 750px) {
	header .wrapper {
		width: 100vw;
	}
}

/*@media only screen and (max-width: 750px) {
  header .wrapper .sns__line {
    width: 9.8666666667vw;
    height: 9.8666666667vw;
    top: 7.7333333333vw;
    left: 86.6666666667vw;
  }
}
*/
.shadow {
}

header .wrapper #menu-btn {
	display: block;
	background: transparent url(../img/menu_btn.png) no-repeat;
	background-size: 100%;
	width: 13vw;
	height: 20vw;
	max-width: 80px;
	max-height: 80px;
	position: absolute;
	right: 3vw;
	top: 3vw;
}

@media only screen and (max-width: 750px) {
	header .wrapper #menu-btn {
		width: 12vw;
	}
}
/*
@media only screen and (max-width: 750px) {*/
header.open {
	/*      background-color:red;
*/
	/*    background: transparent url(../img/common/menu_open_bg.png) no-repeat 0 0;*/
	background-size: 100%;
	/* width: 750px;*/
	/* height: 0;*/

	opacity: 1;
	/*width: 100vw;*/
	height: auto !important;
}

.header__links {
	position: fixed;
	top: 0px;
	left: calc(100% + 20px);
	width: calc(100% + 20px);
}

@keyframes SlideIn {
	0% {
		/*opacity: 0;*/ /*初期状態では透明に*/
		transform: translateX(100%);
		/* left: calc(100% + 20px);*/
	}

	100% {
		/* left: 0px;*/
		/*  opacity: 1;*/
		transform: translateX(0);
	}
}

@keyframes SlideOut {
	0% {
		/*opacity: 0;*/ /*初期状態では透明に*/
		transform: translateX(0);
	}

	99% {
		opacity: 1;
		transform: translateX(100%);
	}

	100% {
		opacity: 1;
		display: none;
		transform: translateX(100%);
	}
}


header.open #menu-btn {
	background: transparent url(../img/close_btn.png) no-repeat;
	background-size: 100%;
}

header.open .header__links {
	/*animation: SlideIn 0.5s 1;*/
	position: static;
	display: block !important;
	width: 100vw;
	padding-top: 50px;
	/*        padding-top: 26.6666666667vw;*/
	background-color: #ffed68;
	/*        background-color: rgba(187, 0, 7, .9);*/
	padding-bottom: 20px;
	box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}

header.close .header__links {
	/*        animation: SlideOut 0.5s 1 forwards;*/
	/* animation: SlideOut 0.5s 1 forwards;*/
	position: static;
	display: block !important;
	width: 100vw;
	padding-top: 50px;
	/*        padding-top: 26.6666666667vw;*/
	background-color:#ffed68;
	padding-bottom: 20px;
	box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}

header.open .hdiv {
	transform: translateX(100%);
	display: block !important;
	animation: SlideIn 0.5s 1 forwards;
}

header.close .hdiv {
	transform: translateX(0);
	display: block !important;
	animation: SlideOut 0.5s 1 forwards;
}
/*header.close .header__links {
    animation: SlideOut 0.5s 1;
    animation-direction: reverse;
    position: static;*/
/*display: block !important;*/
/*display:none;
    width: 100vw;
    padding-top: 50px;*/
/*        padding-top: 26.6666666667vw;*/
/*background-color: #C30D23;
    padding-bottom: 20px;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}*/
header.open .header__links li {
	margin: 0 auto;
	margin-bottom: 10px;
	margin-top: 10px;
	text-align: center;
	margin-left: 0px;
	border-bottom: 1px solid white;
	padding-bottom: 10px;
	padding-top: 10px;
	/*    width: 53.4666666667vw;*/
	/*    height: 8.9333333333vw;*/
	/*    margin-bottom: 4.2666666667vw;*/
}

	header.open .header__links li a {
		position: relative;
		font-size:1.5em;
		font-family:serif;
		text-align: center;
	}
@media only screen and (max-width: 750px) {
	.sp-header-space {
		top: 21.3333333333vw;
	}
}