@charset "utf-8";
/* ===================FV========================= */
.page-main {
  width: 100%;
  min-height:100vh;
  position: relative;
}

.page-main img {
   width:100%;
   min-height:100vh;
   object-fit:cover;
   position: relative;
   z-index: 1;
}

.page-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%; /* 上から50%の位置 */
  left: 50%; /* 左から50%の位置 */
  transform: translate(-50%, -50%); /* 中央寄せの調整 */
  color: #633418;; /* 文字色 */
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  z-index: 2;
}

.page-title .page-en {
 font-size:56px;
 line-height:1.1;
}

.page-title .page-jp {
  font-size:20px;
}

/* ==============for table =============*/
.container {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

.contact-form {
  margin: 100px 0;
}

.contact-note {
  text-align: center;
  color: #633418;
}

li {
  list-style: none;
  text-align: center;
}

#form {
  border-collapse: collapse;
	margin: 1em auto;
}

#form th, #form td {
	border: 1px solid #333;
	padding: 8px;
}

#form th {
	white-space: nowrap;
	background: #F0E4D3;
}

#form td {
	background: #fff;
}

 p.btn {
    	margin-top: 30px;
    	text-align: center;
    }

p.btn input {
	width: 140px;
	height: 45px;
	border: none;
	background-color: #633418;
	color: #fff;
	cursor: pointer;
	margin: 0 10px;
}

/* for title */
.explanatory h2{
  font-size: 24px;
	text-align: center;
  color: #633418;
}

.explanatory p{
  font-size: 18px;
  text-align: center;
  line-height: 2;
  color: #633418;
}

/* for message */
p.msg {
	color: #dd0000;
	margin: 2em;
}
span.msg {
	color: #dd0000;
}

/* for back-button */
form.back {
	margin-top: 2em;
}

.personal-information {
  margin:  80px auto;
  text-align: center;
}


.personal-information h2 {
  text-align: center;
  color: #633418;
}

.personal-information li {
  color: #633418;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-style: normal;
}



/* スマホ用 */
@media only screen and (max-width: 767px) {

	  /* ===========メインビジュアル========= */
  .page-main,
  .page-main img {
    max-width: 100%;
    min-height: auto;
  }

  .page-title .page-en {
    font-size: 42px;
  }

  .page-title .page-jp {
    font-size: 18px;
  }

  .explanatory h2{
  font-size: 20px;
	text-align: center;
}

.explanatory p{
  font-size: 14px;
  line-height: 1.8;
}
  

	/* 投稿フォーム */
	#form {
		margin: 0 auto;
		width: 100%;
	}
  #form input[type="text"],
  #form textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

    #form th, #form td {
    	text-align: left;
		width: 100%;
        display: block;
        padding: 10px 3px;
    }
    p.btn {
    	margin: 0.5em auto;
    	text-align: center;
    }
    p.btn input {
    	width: 9em;
    }
    

	
	/* サンクス */
	p.msg { margin: 1em auto; padding: 1em; }
}


@media screen and (max-width: 440px) {

  /* 洋装 */
  .page-title .page-en {
    font-size: 28px;
  }

  .page-title .page-jp {
    font-size: 14px;
  }


  .explanatory h2{
  font-size: 20px;
	text-align: center;
}

.explanatory p{
  font-size: 14px;
  line-height: 1.8;
}
  

	/* 投稿フォーム */
	#form {
		margin: 0 auto;
		width: 100%;
	}
  #form input[type="text"],
  #form textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #form th, #form td {
    text-align: left;
		width: 100%;
    display: block;
    padding: 10px 3px;
  }

    p.btn {
    	margin: 0.5em auto;
    	text-align: center;
    }
    p.btn input {
    	width: 9em;
    }

    .personal-information h2 {
      font-size: 20px;
    }

  .personal-information li {
    font-size: 14px;
  }
    
  .contact-note {
    font-size: 12px;
  }

  .contact-form {
    text-align: center;
  }

  .contact-form form {
    display: inline-block;
    text-align: left;
  }

}