@charset "UTF-8";
/* CSS Document */
html {
	font-size:62.5%;
	scroll-behavior: smooth;
}
body {
	font-size:2rem;
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
	font-weight: bold;
	color:#1a1a1a;
	letter-spacing: 0.05em;
	margin: 0;
}
@media screen and (max-width: 480px) {
	body {
	font-size:1.6rem;
	letter-spacing: 0em;
}
}
*,
*::before,
*::after{
    box-sizing: border-box;
}
/* Remove list styles (bullets/numbers) */
ol, ul {
    list-style: none;
}

/* For images to not be able to exceed their container */
img {
    max-width: 100%;
}

/* removes spacing between cells in tables */
table{
    border-collapse: collapse;
}


a {
	/*color:#0064b4;*/
	cursor: pointer;
}
a:hover {
	opacity: 0.7;
}

header {
	width: 100%;
}
h1 {
	margin: 50px auto 100px;
	text-align: center;
}
@media screen and (max-width: 480px) {
	h1 {
	margin: 30px auto 70px;
	text-align: center;
}
	h1 img{
	width: 70%;
		height: auto;
}
}
h2 {
	background: #0f82c4;
	color:#fff;
	font-size:4.4rem;
	font-weight: bold;
	padding: 35px 0;
	text-align: center;
	margin-bottom: 80px;
}
@media screen and (max-width: 480px) {
	h2 {
	background: #0f82c4;
	color:#fff;
	font-size:3.5rem;
	font-weight: bold;
	padding: 35px 0;
	text-align: center;
	margin-bottom: 80px;
}
}

.form_box {
	width: 60%;
	margin: 0 auto;
	padding-bottom: 30px;
	margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
	.form_box {
width: 80%;
	}
}
@media screen and (max-width: 480px) {
	.form_box {
width: 96%;
	}
}
.u_line {
	border-bottom: 2px solid #a6dbf8;
}
.form_box div {
	width: 100%;
	padding: 10px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	align-items:center;
}

iframe {
	width: 100%;
	height: 600px;
	margin-bottom: 30px;
}
@media screen and (max-width: 480px) {
	iframe {
	width: 100%;
	height: 450px;
}
}

h3 {
	width: 100%;
	font-size:inherit;
	border-bottom: 2px solid #a6dbf8;
	position: relative;
	padding:0 0 10px 25px;
}
h3:before {
	position: absolute;
	content:"■";
	color:#0f82c4;
	left:0;
}
.komoku {
	width: 25%;
}
@media screen and (max-width: 480px) {
	.komoku {
	width: 33%;
}
}

.komoku_ninzu {
	display: inline-block;
	margin-right: 20px;
}
input::-webkit-input-placeholder {
    color:   #777;
	font-size: 2rem;
	font-weight: bold;
}
@media screen and (max-width: 480px) {
	input::-webkit-input-placeholder {
	font-size: 1.6rem;
}
}
.text,
select{
	width: 60%;
	border: 1px #999 solid;
	height: 60px;
	padding: 10px;
	margin-right: 20px;
}
@media screen and (max-width: 480px) {
	.text,
	select{
	width: 53%;
	height: 40px;
	padding: 5px;
	margin-right: 10px;
}
}
/*選択項目の矢印部分*/
select {
	 -webkit-appearance: none;
  appearance: none; /* デフォルトのスタイルを無効 */
}
select::-ms-expand {
  display: none; /* デフォルトのスタイルを無効(IE用) */
}
select {
  background:url("../images/arrow.png")no-repeat;
  background-position: right center;

}
@media screen and (max-width: 480px) {
	select{
	background-size: 38px auto;
}
}
.number {
	width: 10%;
	border: 1px #999 solid;
	height: 60px;
	padding: 10px;
	margin-right: 10px;
}
@media screen and (max-width: 480px) {
	.number {
	width: 15%;
	height: 40px;
	padding: 5px;
}
}
.nin {
	margin-right: 40px;
}
.icon {
	width: 66px;
	height: 66px;
	background: #a6dbf8;
	display: flex;
	align-items:center;
	justify-content:center;
	padding: 5px;
	border-radius: 8px;
}
@media screen and (max-width: 480px) {
	.icon {
	width: 40px;
	height: 40px;
	background: #a6dbf8;
	display: flex;
	align-items:center;
	justify-content:center;
	padding: 5px;
	border-radius: 8px;
}
.icon img{
	width: 96%;
	height: auto;
}
}

button.reserve {
	display: block;
	width: 300px;
	background: #0f82c4;
	color:#fff;
	font-size:4.4rem;
	font-weight: bold;
	padding: 25px 0;
	text-align: center;
	border-radius: 8px;
	border:none;
	margin: 50px auto;
}
button.totop {
	display: block;
	width: 600px;
	background: #0f82c4;
	color:#fff;
	font-size:4.4rem;
	font-weight: bold;
	padding: 25px 0;
	text-align: center;
	border-radius: 8px;
	border:none;
	margin: 50px auto;
}
@media screen and (max-width: 480px) {
	button.reserve{
	font-size:3.5rem;
}
	button.totop{
	width: 94%;
	font-size:3.5rem;
}
}

button.reserve:hover,
button.totop:hover{
    background: #00b0da;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1, #00a1d0), color-stop(0, #00bedf));
    background: -webkit-linear-gradient(#00bedf, #00a1d0);
}

.thanks_info {
	width: 50%;
	padding: 30px;
	background: #a6dbf8;
	margin: 80px auto 120px;
	text-align: center;
} 
@media screen and (max-width: 768px) {
	.thanks_info {
	width: 70%;
} 
}
@media screen and (max-width: 480px) {
	.thanks_info {
	width: 90%;
	margin: 80px auto 100px;
	} 
}
.error-form {
    border-color: darkred!important;
}
.copy {
	text-align: center;
	font-size: 1.4rem;
}