@charset "UTF-8";
/* CSS Document */

body { font-family: a-otf-ud-shin-go-pr6n, sans-serif; font-style: normal; font-weight: 300; font-size: 10px; }
.adBlock { width: 72.8rem; height: 9rem; margin: 0 auto 3rem; }
.non-nl a,
.non-nl a:hover { display: initial; }
/* animation */
	.btnNoLink:hover,
	.btnNoLink { cursor: default; }
	.btnText,
	.btnAction { -webkit-transition: all .3s; transition: all .3s; opacity: 1; }
	.btnText:hover,
	.btnAction:hover { opacity: .8; }
	.btnText:hover,
	.btnAction.btnTranslate:hover { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.02); }

#header { padding: 1rem 0; background: url(../img/bgNoiseBlack.png); }
#header h1 { color: #fff; font-size: 3rem; letter-spacing: 1rem; }
#header h1 span:after { content: "・"; }

h3 { margin: 2rem auto; font-size: 1.6rem; line-height: calc(1.6rem*1.8); }
h2 { padding: 1rem 0; }
.inputArea { width: 64rem;font-size: 1.6rem; }
.inputBlock { padding: 2rem 0; /*flex-direction: row;*/ }
.inputBlock div { margin: 0 1rem; }
.inputBlock>div:first-of-type:after { margin-left: 1rem; content: "年"; }

.inputArea a,
.inputArea input { height: 3rem; }
.inputArea a { padding: 0.5rem 5rem; color: #fff; background: #444; border-radius: .3rem; box-shadow: 0 0.4rem 0 0 #222; }
.inputArea input { padding: 0 1rem; border: 0px; }
.inputArea ul li { width: 10rem; }
.inputArea ul li p { color: rgba(72,164,53,1); }
.inputArea .attention { margin: 0 auto 2rem; padding: 0.5rem 1rem 1rem; font-size: 1.4rem; color: #fff; background: #ff0000; border-radius: .3rem; }
.inputArea .attention span { margin: 0 auto .5rem; font-size: 2rem; }

#input_01 h2,
#input_02 h2 { color: #fff; }
#input_01 { background: rgba(255, 138, 2, 0.2); }
#input_01 h2 { background: rgba(255, 138, 2, 1); }
#input_02 { background: rgba(72,164,53, 0.2); }
#input_02 h2 { background: rgba(72,164,53,1); }

#arrow { margin: 1rem auto; font-size: 6rem; }
#arrow div:first-of-type { margin-right: 1rem; color: rgba(72,164,53,1); }
#arrow div:last-of-type { margin-left: 1rem; color: rgba(255, 138, 2, 1); }

#note { padding: 2rem 1rem; font-size: 1.4rem; }
#note ul { width: 60rem; margin: 1rem auto 0; }
#note ul li { margin-bottom: 1rem; list-style: disc; }

/* 1,024px- */
		@media screen and (min-width:900px) {
			
		}
	/* 900px-1,024px */
		@media screen and (min-width:900px) and (max-width:1024px) {
			
		}
	/* 768px-900px */
		@media screen and (min-width:768px) and (max-width:900px) {
			#header h1 { font-size: 4rem; letter-spacing: 1rem; }
			h3 { font-size: 2rem; line-height: calc(2rem*1.8); }
			.inputArea { width: 100%; font-size: 2rem; }
			.inputArea div { font-size: 3rem; }
			.inputArea ul li { width: 15rem; }
			.inputArea a,
			.inputArea input { height: 5rem; }
			.inputArea .attention { adding: 0.5rem 1rem 1rem; font-size: 2rem; }
			#note { font-size: 1.8rem; }
			#note ul { width: 90%; }
		}
	/* 640px-768px */
		@media screen and (min-width:640px) and (max-width:768px) {
			#header h1 { font-size: 4rem; letter-spacing: 1rem; }
			h3 { font-size: 2rem; line-height: calc(2rem*1.8); }
			.inputArea { width: 100%; font-size: 2rem; }
			.inputArea div { font-size: 3rem; }
			.inputArea ul li { width: 15rem; }
			.inputArea a,
			.inputArea input { height: 5rem; }
			.inputArea .attention { adding: 0.5rem 1rem 1rem; font-size: 2rem; }
			#note { font-size: 1.8rem; }
			#note ul { width: 90%; }
		}
	/* 480px-640px */
		@media screen and (min-width:480px) and (max-width:64px) {
			
		}