@charset "utf-8";

/* 号外 */
#prj10thpaper{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 80px);
	font-family: 'Noto Serif JP', serif;
}
#prj10thpaper .paper{
	position: relative;
	padding: 5px;
	color: #000000;
}
#prj10thpaper .paper .yokoku{
	position: relative;
	margin: 10px auto 0 auto;
	width: calc(100% + 80px);
	transform: rotate(-2deg) translateX(-40px);
	box-shadow: 0px 0px 18px -2px rgba(0,0,0,0.4);
}
#prj10thpaper .paper .bg{
	position: absolute;
	top:20px;
	left: -12%;
	width: 125%;
	height: 100%;
	background-color: #ffffff;
	transform: rotate(-2deg);
	background-image: url("../img/paper/icon_paper01.png");
	background-repeat: no-repeat;
	background-size: 30%;
	background-position: 50% 15px;
}
#prj10thpaper .paper .bg::after{
	position: absolute;
	top:10px;
	left: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	content: '';
	display: block;
	border: solid 1px #cf9c00;
}
#prj10thpaper .paper .paperInner{
	position: relative;
	z-index: 1;
}
#prj10thpaper .paper .paperInner .txt_paper{
	position: relative;
	margin:80px auto 30px auto;
	width: calc(100% - 140px);
	transform: rotate(-2deg);
}
#prj10thpaper .paper.clear .paperInner .txt_paper{
	margin:80px auto 10% auto;
	transform: translateX(65px) rotate(0);
	width: calc(100% - 90px);
}
#prj10thpaper .paper.clear::after{
	position: absolute;
	top:-24%;
	left: -33px;
	width: 45%;
	height: 190%;
	content: '';
	display: block;
	background-image: url("../img/paper/icon_paper03.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 0;
	z-index: 2;
}
#prj10thpaper .paper .paperInner p{
	position: relative;
	transform: rotate(-2deg);
	padding-bottom: 40px;
}
#prj10thpaper .hintImageArea{
	position: relative;
	margin: 50px auto 0 auto;
}
#prj10thpaper .hintImageArea .hintTtl{
	position: relative;
	margin: 60px auto 10px auto;
	width: calc(100% - 60px);
}
#prj10thpaper .hintImageArea .hintImage{transform: translateX(10px);}

/* form */
.formArea{
	position: relative;
	margin: 0 auto;
	padding: 20px 0;
}
.formArea .inputArea{
	position: relative;
	margin: 0 auto;
}
.inputArea .inputTxt{
	position: relative;
    display: block;
	margin:  10px auto;
	padding: 0 8px;
	border: solid 1px #b3b3b3;
	background-color: #fffdf6;
	border-radius: 5px;
	width: calc(100% - 46px);
	height: 3em;
	font-size: .16rem;
}
button {
    padding: 4px 2.5em;
    display: block;
    margin: 20px auto 0 auto;
    border: none;
    background: #0c3c64;
	color: #ffffff;
	font-weight: 900;
	border-radius: 5px;
	font-size: .14rem;
}
.formArea .inputArea .caution{
	padding: 0;
	text-align: center;
}
/* hint */
.hint{
	position: relative;
	margin: 15px auto 0 auto;
	text-align: center;
	font-weight: 900;
}
.hint dl{
	position: relative;
	margin: 0 auto 50px auto;
	text-align: left;
	font-weight: 500;
}
.hint dl dt{
	position: relative;
	margin: 10px auto 0 auto;
	color: #0c3c64;
	padding: 10px 40px 10px 15px;
	background-color: #77dff9;
	border: solid 1px #77dff9;
	transition: all .3s ease-out;
}
.hint dl dt::after{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 10px;
	content: '\025bc';
	display: block;
	font-size: .10rem;
}
.hint dl dt.disp::after{transform: translateY(-50%) rotate(180deg);}
.hint dl dd{
	position: relative;
	margin: 0 auto;
	padding: 0 15px;
	background-color: #ffffff;
	border-bottom: solid 1px #77dff9;
	border-left: solid 1px #77dff9;
	border-right: solid 1px #77dff9;
	height: 0;
	overflow: hidden;
	transition: all .3s ease-out;
}
.hint dl dd.disp{
	padding: 15px;
	height: auto;
}
#prj10thpaper .bannerTxt{
	position: relative;
	margin: 50px auto 10px auto;
	text-align: center;
	font-weight: 900;
	font-size: .16rem;
}
#prj10thpaper .banner{
	position: relative;
	margin: 0 auto;
	text-align: center;
	font-weight: 900;
	padding: 5px;
	background-color: rgba(255,255,255,.8);
	box-shadow: 0px 0px 18px -2px rgba(0,0,0,0.4);
}
#prj10thpaper .banner .bannerInner{
	position: relative;
	padding: 30px 0;
	border: solid 1px #C6C6C6;
}
#prj10thpaper .banner .bannerInner p{padding: 0 10px;}
#prj10thpaper .banner img{
	width: calc(100% - 40px);
	margin: 10px auto 0 auto;
}

#prj10thpaper .twishare{
	position: relative;
	margin: 80px auto;
	font-weight: 900;
	text-align: center;
	color: #0F2F81;
	background-color: #DBEEF0;
	padding: 30px;
}
#prj10thpaper .twishare img{
	position: relative;
	margin: 10px auto;
	width: calc(100% - 20px);
}


.opmodal{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	display:none;
	overflow-y: auto;
	z-index: 1000;
	transition: all .3s ease-out;
}
.opmodal .btn_closewin{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(248,251,219,0.90);
}
.opmodal .close{top:0;z-index: 1002;}
.opmodal .modalm{
	position: absolute;
	top:50%;
	left: 20px;
	transform: translateY(-50%);
	padding: 60px 30px;
	width: calc(100% - 120px);
	background-color: #ffffff;
	box-shadow: -8px 8px 10px -6px rgba(0,0,0,.4);
	text-align: center;
	z-index: 1001;
}
.opmodal .modalm::after{
	position: absolute;
	top:-20px;
	right: -70px;
	width: 55%;
	height: 100%;
	content: '';
	display: block;
	background-image: url("../img/paper/icon_paper03.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
}
.opmodal .modalm .modalmInner{
	position: relative;
	margin: 0 ;
	width: 75%;
}
.opmodal .modalm img{
	position: relative;
	margin: 0 auto 20px auto;
	width: 30%;
}



/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	/* 号外 */
	#prj10thpaper{width: 960px;}
	#prj10thpaper .paper .yokoku{
		width: calc(100% - 120px);
		transform: rotate(-2deg) translateX(0);
	}
	#prj10thpaper .paper .bg{
		left: 0;
		width: 100%;
		height: 100%;
		background-size: 120px;
	}
	#prj10thpaper .paper.clear .bg{
		left: 130px;
		width: 700px;
	}
	#prj10thpaper .paper.clear .paperInner .txt_paper{
		margin:100px auto 60px auto;
		transform: translateX(80px) rotate(0);
		width: 400px;
	}
	#prj10thpaper .paper.clear::after{
		top:-280px;
		left: 50px;
		width: 280px;
	}
	#prj10thpaper .paper .paperInner{
		width: 540px;
		margin: 0 auto;
	}
	#prj10thpaper .paper.clear .paperInner{
		text-align: center;
		padding-bottom: 30px;
	}
	#prj10thpaper .paper .paperInner .txt_paper{
		margin:100px auto 50px auto;
		width: 200px;
	}
	#prj10thpaper .hintImageArea{
		margin: 70px auto 0 auto;
		width: 500px;
	}
	#prj10thpaper .hintImageArea .hintTtl{
		margin: 80px auto 20px auto;
		width: 340px;
	}

	/* form */
	.inputArea .inputTxt{	width: 560px;}
	/* hint */
	.hint{margin: 25px auto 0 auto;}
	.hint dl{
		margin: 0 auto 70px auto;
		width: 500px;
	}
	#prj10thpaper .bannerTxt{
		margin: 70px auto 15px auto;
		font-size: .18rem;
	}
	#prj10thpaper .banner{width: 600px;}
	#prj10thpaper .banner img{width: 360px;}
	
	#prj10thpaper .twishare{
		margin: 90px auto 70px auto;
		width: 400px;
		padding: 30px;
	}
	#prj10thpaper .twishare img{
		margin: 20px auto 0 auto;
		width: 280px;
	}

	.opmodal .modalm{
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 60px 0;
		width: 600px;
	}
	.opmodal .modalm::after{
		top:-60px;
		right: -90px;
		width: 220px;
		height: 430px;
	}
	.opmodal .modalm .modalmInner{width:600px;}
	.opmodal .modalm img{
		margin: 0 auto 30px auto;
		width: 80px;
	}

}