@charset "utf-8";
/*-------------------------------------------*/
/*	メールフォーム
/*-------------------------------------------*/
/* ======================================

	 Reset 

====================================== */
#trust-form{
    width:100%;
    height: auto;
}
#trust-form table{
	width: 100%;
 
}
#trust-form table,
#trust-form table th,
#trust-form table td {
    border: none;  
}
/* reset form element style*/
.contact-form input, 
.contact-formbutton, 
.contact-formselect, 
.contact-formtextarea {
    margin: 0;
    outline: none;  
}
#trust-form input,
#trust-form select {
    vertical-align:middle;
  
}
#trust-form ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#trust-form ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ======================================

	 Trust Form Style

====================================== */
div#trust-form.contact-form table{
	margin-bottom: 2em;
	text-align: center;
}
div#trust-form.contact-form table th {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    text-align: left;
    vertical-align: top;
    font-weight: bold;
}
div#trust-form.contact-form table td {
	padding: 10px 0;
    border-bottom: 1px solid #ccc;
	text-align: left;
    vertical-align: middle;   
}
div#trust-form.contact-form table tr:hover{
	background: #f4f4f4;
}
div#trust-form.contact-form table div{
	padding: 0 10px;
}

div#trust-form.contact-form p.submit-container {
	text-align: center;
}

div#trust-form.contact-form div.submessage {
    font-size: 80%;
    font-weight: normal;
}

div#trust-form.contact-form span.require {
    margin-left:3px;
    color: #e55a3b;
}

div#trust-form.contact-form div.error {
    color: #e55a3b;
}


div#trust-form.contact-form input[type="checkbox"],
div#trust-form.contact-form input[type="radio"] {
    margin-right: 3px;
}
div#trust-form.contact-form label{
	display: block;
	width: 100%;
}

div#trust-form #confirm-button{
	text-align: center;
}

#contact-message {
 padding-top: 40px !important;
 }

/*--------説明文のレスポンシブ改行設定-------*/
/*--------ここから-------*/
p#message-container-input,
p#message-container, 
p#message-container-confirm {
 color: #f5f5f5 !important; /* コンタクトの説明文の文字色 */
 padding-top: 10px !important;
 margin-bottom: 0px !important;
 table-layout: fixed;
 word-break: normal !important;
 word-wrap: break-word !important;
 overflow-wrap: break-word !important;
 }
 
p#message-container-input a,
p#message-container a,
.page-id-62 p#message-container-input-tablet a,
.page-id-62 p#message-containertablet a,
.page-id-62 p#message-container-confirm-smart a {
 color: #fff !important; /* コンタクトの説明文のプライバシーポリシーリンク文字色 */
 }
 
p#message-container-input a:hover,
p#message-container a:hover,
p#message-container-confirm a:hover {
 color: #808080 !important; /* コンタクトの説明文のプライバシーポリシーリンク文字色 */
 }
/*--------ここまで-------*/

.page-id-62 #main #container .content.wide {
 min-height:740px;/*---------- コンテンツが少ない場合指定しておく(増えたら調整か削除)------------*/
 }
 
.page-id-62 #main #container .content.wide {
 padding-bottom:0px;/*---------- メールフォームのcontainer部分のボトムの幅------------*/
 }

/*コンタクトフォーム各項目選択時の色の変化*/
.page-id-62 tr:hover {
 background-color: rgba( 192,210,210,0.2 ) !important;/*コンタクトフォーム選択時の透明度*/
 -webkit-transition: 0.7s;
 -moz-transition: 0.7s;
 -ms-transition: 0.7s;
 -o-transition: 0.7s;
 transition: 0.7s;
 text-decoration:none !important;
 }
  
.page-id-62 td {
 background-color: rgba( 192,210,210,0.3 ) !important;
 margin:0px 0px 0px 0px !important;
 border-collapse: separate !important;
 border: none !important;
 /*padding:10px 0px 10px 40px !important;/* contactの右側のテーブル部分の余白 */
 }
 
.page-id-62 table tr {
 font-size:14px !important;
/*width:180px;/* contactの左側のテーブル部分の幅 */
/*border-bottom: 1px solid #000 !important;*/
}

.page-id-62 .content th {
 /*padding: 9px 24px !important;*/
 background-color: rgba( 192,210,210,0.5 ) !important; /* contactの左側のテーブル部分の色 */
 white-space:nowrap;
 width:180px;/* contactの左側のテーブル部分の幅 */
 }

.page-id-62 table {
 /*border: 1px solid #ccc !important;*/
 border-collapse: separate !important;
 border-spacing: 0 !important;
 border:1px solid #666 !important;
 -webkit-border-radius:6px !important;
 -moz-border-radius:6px !important;
 border-radius:6px !important; 
 overflow: hidden !important;
 min-height:200px;
}

.page-id-62 .content table th, .page-id-62 .content table td {
 /* border: 1px solid #ccc !important;/* コンタクトの全体のテーブルボーダー */
 padding: 5px 0px 5px 0px !important;
 /*vertical-align:top !important;*/
 border-bottom: 1px solid #666 !important;
 }
 
.page-id-62 .content table thead th + th,
.page-id-62 .content table tbody td {
 border-left: 1px solid #666 !important;
}

.page-id-62 .content table tbody tr:last-child th,
.page-id-62 .content table tbody tr:last-child td {
 border-bottom: none !important;
}
 
.page-id-62 .subject .content {
 margin:5px 5px 0px 5px !important;
 padding:0px 0px 0px 0px !important;
 float:left !important; /* ※印をサブジェクト文章に横並びにする */
 color: #282828 !important;
 font-size: 14px;
 }
 
.page-id-62 .require {
 /*margin:5px 0px 0px 0px !important;*//* ※印マークを使用の場合の時解除 */
 /*padding:0px 0px 0px 0px !important;*//* ※印マークを使用の場合の時解除 */
 margin-right: 3px;/* 必須マークを使用の場合の時解除 */
 padding: 5px 5px 5px 5px;/* 必須マークを使用の場合の時解除 */
 float:left !important; /* ※印をサブジェクト文章に横並びにする */
 color: #f5f5f5 !important;
 background: rgba( 192,10,10,0.2 );
 border-radius: 3px;
 }
 
.error{
 color:#FF0000 !important;
 font-weight:bold;
 }

/* input&テキストエリアの設定 plain.cssの169行目 */
 
.page-id-62 input[type="text"] {
 /*width: 100% !important;  /* 名前、メール、件名などの幅 */
 /*padding-right:0px !important;*/
}
 
.page-id-62 textarea {  
 resize: vertical; /* テキストエリアの横幅を広げられなくする */ 
 /*width: 100% !important;  /* 本文入力欄の幅 */
 min-height: 230px;  /* 本文入力欄の高さ */
}

.page-id-62 textarea {
 /*padding:5px 10px;*/
 border:1px solid #ccc;
 font-size:16px;/* 16px以上に設定しないとiPhoneのテキストエリアが自動で拡大する */
 -webkit-transition: 1s;
 -moz-transition: 1s;
 -o-transition: 1s;
 transition:1s;
}

.page-id-62 textarea:focus {
 border:1px solid #0066cc;
 background-color:#222222;
 opacity: 0.6; /* テキストエリアの透明度 */
 color:#ffffff;
}

/*			form
/*-------------------------------------------*/

.page-id-62 .content form table {
 margin-top:15px;/* 説明文とテーブルの隙間 */
 }
 
.page-id-62 .content form input[type=text],
.page-id-62 .content form input[type=email] {
 position:relative;
 overflow:hidden;
 padding:5px 5px 5px 5px;/*-----インプット&テキストエリアの中の文字に対しての周りの余白-----*/
 margin:5px 0px 5px 0px;
 width:70%;
 }
 
.page-id-62 .content form textarea {
 position:relative;
 overflow:hidden;
 padding:5px 5px 5px 5px;/*-----インプット&テキストエリアの中の文字に対しての周りの余白-----*/
 margin:5px 0px 5px 0px;
 width:98%;
 }
 
.content form input[type=radio] {
 width:auto;
 }
 
.content form input[type=checkbox] {
 width:auto;
 }
/*-------------------------------------------*/

p.submit-container {
 border-radius: 5px !important;        /* CSS3草案 */  
 -webkit-border-radius: 5px !important;    /* Safari,Google Chrome用 */  
 -moz-border-radius: 5px !important;   /* Firefox用 */
 margin-right: -5px !important;
 float:right !important;/* 確認、戻る、送信ボタンの位置 */
 }

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
 -webkit-box-sizing: content-box;
 -webkit-appearance: button;
 appearance: button;
 border:1px solid #666 !important;
 box-sizing: border-box;
 cursor: pointer;
 background-color: rgba( 192,210,210,0.3 ) !important;
 border-radius: 5px !important;        /* CSS3草案 */  
 -webkit-border-radius: 5px !important;    /* Safari,Google Chrome用 */  
 -moz-border-radius: 5px !important;
}

input[type="submit"]:hover,
input[type="button"]:hover {
 color: #808080 !important; /* 送信ボタンの文字色 */ 
 background-color: rgba( 192,210,210,0.9 ) !important;
}

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}

input[type="submit"]::focus,
input[type="button"]::focus {
 outline-offset: -2px;
}

/* お問い合わせ内容セレクトボタン */ 
.page-id-62 select {
 width: 50%; /* お問い合わせ内容のセレクト部分の横の長さにより変更 */
 padding: 3px 0px 2px 8px; /* お問い合わせ内容のセレクト部分内の文字から周りの余白 */
 margin:5px 0px 5px 0px !important;/* お問い合わせ内容のセレクト部分外の周りの余白 */
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 border: 1px solid #999;
 background: #eee;
 box-sizing: content-box;
 background: url(arrow01.png) right 50% no-repeat, -webkit-linear-gradient(top, #fff 0%,#efebe1 100%);
 background: url(arrow01.png) right 50% no-repeat, linear-gradient(to bottom, #fff 0%,#efebe1 100%);
 background-size: 20px, 100%;
 font-size: 14px;
}

/*IE10以降に適用されるCSSハック（一応）*/
@media all and (-ms-high-contrast:none){
 .page-id-62 select {
 width: 50%;/* お問い合わせ内容の長さにより変更 */ 
 padding: 3px 3px 2px 5px; /* お問い合わせ内容のセレクト部分内の文字から周りの余白 */
 margin:5px 0px 5px 0px !important;/* お問い合わせ内容のセレクト部分外の周りの余白 */
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 border: 1px solid #999;
 background: #eee;
 box-sizing: content-box;
 background-size: 20px, 100%;
 font-size: 14px;
 } 
}
 
/*IE11だけに適用されるCSSハック*/
@media all and (-ms-high-contrast:none){
 *::-ms-backdrop, .page-id-62 select {
 width: 50%;/* お問い合わせ内容の長さにより変更 */ 
 padding: 3px 3px 2px 5px; /* お問い合わせ内容のセレクト部分内の文字から周りの余白 */
 margin:5px 0px 5px 0px !important;/* お問い合わせ内容のセレクト部分外の周りの余白 */
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 border: 1px solid #999;
 background: #eee;
 box-sizing: content-box;
 background-size: 20px, 100%;
 font-size: 14px;
  }
 
table {
	/*border: none !important;*/
	/*border-collapse: separate;*/
	/*border-spacing: 0;*/
	/*border-radius: 6px;*/
}
}

/*スマホのみ*/
@media screen and (max-width: 480px) {
.page-id-62 td {
padding: 10px 0px 10px 0px !important;
}

.page-id-62 select {
 font-size: 16px;
}

.page-id-62 .content form input[type=text],
.page-id-62 .content form input[type=email] {
 position:relative;
 overflow:hidden;
 padding:5px 5px 5px 5px;/*-----インプット&テキストエリアの中の文字に対しての周りの余白-----*/
 margin:5px 0px 5px 0px;
 width:96% !important;
 }
 
.page-id-62 .content form textarea {
 position:relative;
 overflow:hidden;
 padding:5px 5px 5px 5px;/*-----インプット&テキストエリアの中の文字に対しての周りの余白-----*/
 margin:5px 0px 5px 0px;
 width:96% !important;
 }

.page-id-62 .subject .content {
 margin:5px 5px 5px 2px !important;
 }
 
 .require {
 /*margin:7px 0px 3px 0px !important;*//* ※印マークを使用の場合の時解除 */
 }
 
 .error {
 margin-left:2px !important;
 }


.page-id-62 .content table tbody tr:last-child td {
 border-top: 1px solid #666 !important;
 }
}

/* 追加  */
/* @media (max-width: 949px)  */
/*------------------------------------------------------------------------------------------------*/
/*    縮小して949px以下（1px小さく設定）になった場合の設定 (PCで縮小した場合やiPadの縦画面やスマホに対応させる)
/*------------------------------------------------------------------------------------------------*/
@media (max-width: 949px) { 
.page-id-62 table {
 /*border: 1px solid #ccc !important;*/
 border-collapse: separate !important;
 border-spacing: 0 !important;
 border:1px solid #666 !important;
 -webkit-border-radius:6px !important;
 -moz-border-radius:6px !important;
 border-radius:6px !important; 
 overflow: hidden !important;
}

.page-id-62 .content table th, .page-id-62 .content table td {
 padding: 5px 5px 5px 0px !important;
 margin: 0px 0px 0px 0px !important;
 /*vertical-align:top !important;*/
 border-bottom: 1px solid #666 !important;
 }
 
.page-id-62 .content table thead th + th {
	border-left: 0px solid #666 !important;
}

.page-id-62 .content table tbody tr:last-child th,
.page-id-62 .content table tbody tr:last-child td {
	border-bottom: none !important;
}

.page-id-62 span.content　{
 /*valign: middle !important;*/
}

.page-id-62 .content form input[type=text],
.page-id-62 .content form input[type=email] {
 position:relative;
 overflow:hidden;
 padding:5px 5px 5px 5px;/*-----インプット&テキストエリアの中の文字に対しての周りの余白-----*/
 margin:5px 0px 5px 0px;
 width:70%;
 }
 
.page-id-62 .content form textarea {
 position:relative;
 overflow:hidden;
 padding:5px 5px 5px 5px;/*-----インプット&テキストエリアの中の文字に対しての周りの余白-----*/
 margin:5px 0px 5px 0px;
 width:98%;
 }
}

/*テーブル場1列に変わる瞬間*/
@media screen and (max-width: 600px) {
div#trust-form table{
		margin: 2em auto;
		border: 1px solid #ccc;
		border-bottom-width: 0;			
	}
	div#trust-form table th,
	div#trust-form table td{
		padding: 0;
		float: left;
		clear: both;
		width: 100%;
	}
	div#trust-form table th{
		background-color: #f4f4f4;
	}
	div#trust-form table ul li{
		line-height: 3.5em;
	}
	div#trust-form.contact-form table tr:hover{
	background: #fff;
}

.page-id-62 .content table thead th + th,
.page-id-62 .content table tbody td {
	border-left: 0px solid #666 !important;
}

.page-id-62 .content form input[type=text],
.page-id-62 .content form input[type=email] {
 position:relative;
 overflow:hidden;
 padding:5px 5px 5px 5px;/*-----インプット&テキストエリアの中の文字に対しての周りの余白-----*/
 margin:5px 0px 5px 0px;
 width:98%;
 }
 
.page-id-62 .content form textarea {
 position:relative;
 overflow:hidden;
 padding:5px 5px 5px 5px;/*-----インプット&テキストエリアの中の文字に対しての周りの余白-----*/
 margin:5px 0px 5px 0px;
 width:98%;
 }
}

@media (min-width: 860px) {  
.page-id-62 p#message-container-input-tablet,
.page-id-62 p#message-container-tablet, 
.page-id-62 p#message-container-confirm-tablet {
 display:none !important;
 }
}

@media screen and (max-width: 859px) { 
p#message-container-input, 
p#message-container, 
p#message-container-confirm {
 display:none !important;
 }
 
.page-id-62 p#message-container-input-tablet, 
.page-id-62 p#message-container-tablet, 
.page-id-62 p#message-container-confirm-tablet {
 color: #f5f5f5 !important; /* コンタクトの説明文の文字色 */
 padding-top:10px !important;
 margin-bottom:0px !important;
 table-layout:fixed;
 word-break: normal !important;
 word-wrap : break-word !important;
 overflow-wrap : break-word !important;
 }
}
  
@media (min-width: 521px) {  
.page-id-62 p#message-container-input-smart, 
.page-id-62 p#message-container-smart, 
.page-id-62 p#message-container-confirm-smart {
 display:none !important;
 }
}
  
@media screen and (max-width: 520px) { 

p#message-container-input, 
p#message-container, 
p#message-container-confirm {
 display:none !important;
 }
 
.page-id-62 p#message-container-input-tablet, 
.page-id-62 p#message-container-tablet, 
.page-id-62 p#message-container-confirm-tablet {
 display:none !important;
 }
 
.page-id-62 p#message-container-input-smart, 
.page-id-62 p#message-container-smart, 
.page-id-62 p#message-container-confirm-smart {
 color: #f5f5f5 !important; /* コンタクトの説明文の文字色 */
 padding-top:10px !important;
 margin-bottom:0px !important;
 table-layout:fixed;
 word-break: normal !important;
 word-wrap : break-word !important;
 overflow-wrap : break-word !important;
 }
}