@charset "utf-8";

/* ------------------------------------------------------------ contact */

#fv a img { width: 100px; height: auto;  }
#fv { background: url(../images/index/fv01.png) no-repeat center center; background-size: cover; text-align: center; padding: 50px 0 100px;}
#fv h1 { color: #fff; padding: 50px 0 0; font-family: "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; font-size: 70px; font-weight: 800; }
#fv h1 span { display: block; font-size: 16px; padding: 20px 0 0;}

	#contact {
		padding: 130px 0 130px;
	}

		#contact .c_inner {
			width: 780px;
			margin: 0 auto;
		}
		
		#contact .btn {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		#contact .page_top.btn .back {
			width: 300px;
			margin: 0 auto;
			border: none;
			background: #000;
			color: #fff;
			display: block;
			line-height: 60px;
			text-align: center;
		}

		#contact h2 {
			font-size: 18px;
			text-align: center;
			padding: 0 0 80px;
		}

		#contact h2 span {
			font-size: 40px;
			font-family: "Alte DIN 1451 Mittelschrift";
			letter-spacing: 3px;
			color: #e60077;
			display: block;
			line-height: 160%;
			letter-spacing: 10px;
		}

		#contact h3 {
			font-size: 26px;
			font-family: 'Noto-Sans-JP-Medium';
			text-align: center;
			padding: 0 0 20px;
		}

		#contact p {
			font-size: 16px;
			text-align: center;
			padding: 0 0 65px;
			line-height: 200%;
		}

		#contact table {
			width: 100%;
		}

		#contact th {
			width: 220px;
			text-align: left;
			font-size: 18px;
			font-family: 'Noto-Sans-JP-Medium';
			padding: 0 0 30px;
		}

		#contact th span {
			color: #d60603;
			font-size: 12px;
		}

		#contact td {
			width: calc(100% - 200px);
			text-align: left;
			font-size: 16px;
			padding: 0 0 30px;
		}

		#contact .textarea th {
			vertical-align: top;
		}

		#contact td input[type="text"] {
			width: calc(100% - 30px);
			padding: 10px 15px;
			border: 1px solid #cccccc;
			background: #f5f5f5;
		}

		#contact td textarea {
			width: calc(100% - 30px);
			padding: 10px 15px;
			border: 1px solid #cccccc;
			background: #f5f5f5;
		}

		#contact .submit {
			text-align: center;
			padding: 60px 0 0;
		}

		#contact .submit input[type="submit"] {
			width: 300px;
			margin: 0 auto;
			border: none;
			background: #000;
			color: #fff;
			display: block;
			line-height: 60px;
		}
		
		#contact .privacy td a {
			display: inline-block;
			line-height: 20px;
			color: #2899ca;
			text-decoration: underline;
		}

/* ------------------------------------------------------------ error */

		#contact .caution {
			padding: 0 0 30px;
		}

		#contact .alert span {
			display: block;
			color: #ff0000;
			line-height: 170%;
		}

		#contact .note .btn a {
			display: inline-block;
			width: 280px;
			background: #948d8d;
			line-height: 60px;
			color: #fff;
			margin-right: 60px;
		}

		#contact .confirm .btn {
			padding: 60px 0 0;
		}

		#contact .confirm .btn input[type="submit"] {
			display: inline-block;
			width: 280px;
			background: #000;
			line-height: 60px;
			color: #fff;
			border: none;
			font-weight: 400;
		}

		#contact .page_top { background: #000; width: 300px; margin: 0 auto;}
		.page_top a { color: #fff;  }
		
		
		#contact .note td { border-bottom: 1px solid #ededed; padding: 30px 0 30px;}
		#contact .note th {  border-bottom: 1px solid #ededed; padding: 30px 0 30px;  }
		
		
		
/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 640px) {


#fv a img { width: 80px; height: auto;  }
#fv { background: url(../images/index/fv01.png) no-repeat center center; background-size: cover; text-align: center; padding: 70px 0 50px;}
#fv h1 { color: #fff; padding: 30px 0 0; font-family: "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; font-size: 40px; font-weight: 800; }
#fv h1 span { display: block; font-size: 16px; padding: 15px 0 0;}


/* ------------------------------------------------------------ profile */

/* ------------------------------------------------------------ contact */

	#contact {
		padding: 50px 0 70px;
	}

		#contact .c_inner {
			width: 94%;
		}

		#contact h2 {
			font-size: 14px;
			padding: 0 0 40px;
		}

		#contact h2 span {
			font-size: 30px;
			letter-spacing: 5px;
		}

		#contact h3 {
			font-size: 18px;
			line-height: 160%;
			padding: 0 0 10px;
		}

		#contact p {
			font-size: 13px;
			padding: 0 0 45px;
			line-height: 170%
		}

		#contact th {
			width: 100%;
			display: block;
			font-size: 14px;
			padding: 0 0 10px;
		}

		#contact td {
			width: 100%;
			display: block;
			font-size: 14px;
		}

		#contact td input[type="text"] {
			width: 94%;
			padding: 10px 3%;
		}

		#contact td textarea {
			width: 94%;
			padding: 10px 3%;
		}

		#contact .submit {
			text-align: center;
			padding: 30px 0 0;
		}

		#contact .submit input[type="submit"] {
			width: 240px;
			line-height: 50px;
		}

/* ------------------------------------------------------------ error */
		#contact .note td { border-bottom: 1px solid #ededed; padding: 0 0 20px; }
		#contact .note th { padding: 20px 0 10px; border: none; }
		
		#contact .caution {
			padding: 0 0 20px;
		}

		#contact .note .btn a {
			width: 240px;
			line-height: 50px;
			margin-right: 20px;
		}

		#contact .confirm .btn {
			padding: 40px 0 0;
		}

		#contact .confirm .btn input[type="submit"] {
			width: 240px;
			line-height: 50px;
			margin: 0 auto;
		}

}