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

/*=========================================== 
スマホ向けのレイアウトの指定：～768px 
===========================================*/
@media only screen and (min-width: 0px) {

body{
	overflow-x: hidden;
}
	
#container{
	width:100%;
	margin:0 auto;
	overflow: hidden;
}

#wrapper{
	width:100%;
	margin:0 auto;
	padding: 0 0 40px 0;
}

/*メインビジュアル*/
.mv{
	background: url(../images/contact_mv.jpg) no-repeat top center;
	background-size: cover;
}

/*コンテンツ*/
.contents{
	width: 90%;
	margin: 40px auto 0;
  text-align: center;
}
  
.contents h2.heading{
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: bold;
  color: rgb(26,128,92);
	text-align: center;
	letter-spacing: 0.20em;
  margin-bottom: 40px;
  display: inline-block;
}

/*下線をつける*/
.contents h2.heading::after{
  content: " ";
  display: block;
  border-bottom: 3px solid rgb(228,216,80);
  width: 80%;
  margin: 20px auto 0;
}
.contents p {
    text-align: center;
}
.explain{
	margin: 0 auto 20px;
	font-size: 16px;
	text-align: center;
	line-height: 1.5;
	letter-spacing: 0.06em;
}
  
  .explain .text{
    margin-bottom: 20px;
  }

  .explain .text-2{
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 18px;
    font-size: 1.8rem;
  }

/*コンテンツ > 表*/
.form{
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	background: rgb(255,255,255);
}

.form_table{
	width: 100%;
	margin: 0 auto;
	padding: 0 0 32px 0;
}

.form_table .formItems{
	margin: 0 auto;
}

.form_table .label{
	box-sizing: border-box;
	width: 90%;
	margin: 0 auto;
	padding: 0 0 10px 0;
  color: rgb(26,128,92);
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.06em;
	display: block;
}
span.small {
    font-size: 12px;
    line-height: 0.5;
}
.form_table .required{
	width: 32px;
	height: 16px;
	margin: 0 0 0 10px;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 16px;
	color: rgb(255,255,255);
	background: rgb(26,128,92);
	border-radius: 2px;
	display: inline-block;
}

.form_table .any{
	width: 32px;
	height: 16px;
	margin: 0 0 0 10px;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 16px;
	color: rgb(255,255,255);
	background: rgb(180,180,180);
	border-radius: 2px;
	display: inline-block;
}

.form_table .content{	
	box-sizing: border-box;
	width: 90%;
	margin: 0 auto;
	font-size: 16px;
	display: block;
  text-align: left;
}

.form_table input,
.form_table textarea{
	box-sizing: border-box;
	width: 100%;
	padding: 2px 4px;
	font-size: 16px;
	background: none;
	background: rgba(255,255,255,0.3);
	border: 1px solid rgb(180,180,180);
	border-radius: 2px;
  word-break: break-all;
}
input[type="radio"] {
  max-width: 16px!important;
  margin: 0 auto 5px!important;
}
span.mwform-radio-field.horizontal-item {display: inline;}

label {white-space: nowrap;}
.form_table select{
    font-size: 16px;
}
.mw_wp_form .horizontal-item + .horizontal-item {
  margin-left: 0!important;
}
.mw_wp_form .horizontal-item{
	margin-right: 10px;
}
hr.line{
	width: 90%;
	margin: 32px auto 0;
	border: solid rgb(215,215,215);
	border-width: 1px 0 0 0;
}

.form_table .text {	
	width: 90%;
	margin: 0 auto;
    padding: 10px 0 0 0;
    font-size: 12px;
    text-align: center;
    line-height: 1.5;
}

/* Webkit */
::-webkit-input-placeholder {
	color: rgb(200,200,200);
	opacity: 1;
}
/* Firefox 18 以前 */
:-moz-placeholder {
	color: rgb(200,200,200);
}
/* Firefox 19 以降 */
::-moz-placeholder {
	color: rgb(200,200,200);
/* Firefox 19 以降のデフォルトでは */
/* color ではなく opacity で色合いを調整しているため */
/* 文字色を指定する場合、opacity を 1 にする必要がある */
	opacity: 1;
}
/* IE 10 以降 */
:-ms-input-placeholder {
	color: rgb(200,200,200);
}
/* CSS4では以下のような名前の擬似クラスになるらしい */
/* おそらく今のところ対応ブラウザはない */
:placeholder-shown {
	color: rgb(200,200,200);
}

.form_btn .btn{
	width: 100%;
	max-width: 72px;
	height: 36px;
	margin: 20px auto 0;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	line-height: 36px;
	letter-spacing: 0.23em;
	color: rgb(255,255,255);
	background: rgb(26,128,92);
	border: none;
	border-radius: 3px;
	display: block;
}

.form_btn .back{
	color: rgb(200,200,200);
	background: rgb(255,255,255);
	border: 1px solid rgb(200,200,200);
}


/*コンテンツ > 表 （可変部分）*/
.form_table .formItems_8{
	margin: 0 auto;
}

.form_table .formItems_1 .content,
.form_table .formItems_5 .content,
.form_table .formItems_6 .content{
	text-align: center;
}

.form_table .formItems_5 label{
	margin: 0 16px 0 0;
	line-height: 1.5;
	white-space: nowrap;
}
.formItems{
  padding: 20px 20px 10px;
  }

.formItems.formItems_1.clearfix {
    border: none;
}
  
.formItems.formItems_6 p.content {
    margin: 5px auto;
}
}


/*=========================================== 
PC向けのレイアウトの指定：768px〜
===========================================*/
@media only screen and (min-width: 769px) {

#container{
	width:100vw;
}

#wrapper{
	padding: 0 0 80px 0;
}

/*コンテンツ*/
.contents{
	width: auto;
	max-width: 940px;
	padding: 0 10px;
}
  
.contents h2.heading{
	font-size: 36px;
	font-size: 3.6rem;
  margin-bottom: 60px;
}

/*下線をつける*/
.contents h2.heading::after{
  content: " ";
  display: block;
  border-bottom: 3px solid rgb(228,216,80);
  width: 80%;
  margin: 20px auto 0;
}
}


/*=========================================== 
PC向けのレイアウトの指定：960px〜
===========================================*/
@media only screen and (min-width: 961px) {

/*コンテンツ > 表*/
.form_table{
	box-sizing: border-box;
	max-width: 940px;
	padding: 32px 38px;
}

.form_table .label{
	box-sizing: content-box;
	width: 230px;
	margin: 0 20px 0 0;
	text-align: left;
	float: left;
}

.form_table .content{
	box-sizing: content-box;
	width: 100%;
	max-width: 570px;
	margin: 0;
	padding: 0 0 0 0;
	float: right;
}

.form_table input,
.form_table textarea{
	width: 100%;
	max-width: 570px;
}
.formItems{border-top: solid 2px rgb(196,196,196);}

.form_table .formItems_5 .content{	
	text-align: left;
}

hr.line{
	width: auto;
}

.form_table .text {
	width: auto;
    padding: 0 0 0 290px;
    text-align: left;
    clear: both;
}

.form_btn .btn:hover{
	box-sizing: border-box;
	color: rgb(26,128,92);
	background: rgb(255,255,255);
	border: 1px solid rgb(26,128,92);
}

.form_btn .back:hover{
	color: rgb(255,255,255);
	background: rgb(200,200,200);
}


/*コンテンツ > 表 （可変部分）*/
.form_table .formItems_1 .content,
.form_table .formItems_5 .content,
.form_table .formItems_6 .content{
	text-align: left;
}
}