@charset "UTF-8";

* { 
margin: 0;
padding: 0;
border: 0; 
font-weight: normal;
font-family: ften-mincho-text, serif;
font-family: feffra, noto-sans-cjk-jp, "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "sans-serif";
font-style: normal; 
background-color: transparent;
}

br {
	display: inherit;
}

#main {
	width: 845px;
	background-color: #ffffff;
	border-radius: 20px;
	font-size: 30px;
	margin: 120px auto 40px;
	padding: 10px;
}

#main2 {
	width: 845px;
	background-color: #ffffff;
	border-radius: 20px;
	font-size: 30px;
	margin: 120px auto 40px;
	padding: 10px;
}
.relative {
	position: relative;
}
#green1 {
	color: #3cbedc;
    font-size: 30px;
	font-weight: 900;
	letter-spacing: 5px;
	position: absolute;
	left: 50px;
	top: 90px;
}

#green2 {
	color: #3cbedc;
    font-size: 30px;
	font-weight: 900;
	position: absolute;
  left: 50px;
  top: 150px;
}

#green3 {
	color: #3cbedc;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 5px;
	position: absolute;
  left: 50px;
  top: 220px;
}

#green4 {
	margin: 50px auto 20px;
	color: #3cbedc;
	font-size: 50px;
	font-weight: 200;
	letter-spacing: 5px;
}

#green5 {
	margin: 20px auto;
	color: #3cbedc;
	font-size: 20px;
	font-weight: 200;
	letter-spacing: 10px;
}

.caution {
	margin: 20px auto;
	padding: 0 50px;
	text-align: left;
	font-size: 16px;
}

#boldunderline {
	font-weight: bold;
	text-decoration:underline;
}

#gray {
	margin: 20px;
	text-align: center;
	color: #9a9a9a;
	font-size: 20px;
	font-weight: 700;
}

#gray2 {
	margin: 70px auto 20px;
	text-align: center;
	font-size: 30px;
	color: #9a9a9a;
	font-weight: 700;
}

hr {
	margin: 0 auto;
	width: 750px;
	height: 2px;
	background-color: #9a9a9a;
}

th {
	vertical-align: middle;
}

/* --- フォームエリア --- */
form.contact {
margin: 40px auto;
width: 700px; /* フォームエリアの幅 */
font-size: 15px;
text-align: left;
}
/* --- フォームエリア内の段落 --- */
form.contact p {
line-height: 130%;
}

.attention {
	font-size: 18px;
}

/* --- 段落内の「必須」画像 --- */
form.contact p.attention img {
vertical-align: middle;
}

/* --- テーブル --- */
form.contact table {
width: 100%; /* テーブルの幅 */
background-color: #f9f9f9; /* テーブルの背景色 */
border: 1px #c0c0c0 solid; /* テーブルの境界線 */
}
form.contact #policy table {
	height: 100px;
	width: 700px;
}
/* --- 見出しセル（th） --- */
form.contact th {
width: 140px; /* 見出しセルの幅 */
padding: 10px 8px; /* 見出しセルのパディング（上下、左右） */
background-color: #f5f5f5; /* 見出しセルの背景色 */
border-bottom: 1px #c0c0c0 dotted; /* 見出しセルの下境界線 */
text-align: left;
line-height: 130%;
}
/* --- 見出しセル内の補足テキスト --- */
form.contact th span.supplement {
font-weight: normal;
}
/* --- データセル（td） --- */
form.contact td {
padding: 10px 5px 7px; /* データセルのパディング（上、左右、下） */
background-color: #ffffff; /* データセルの背景色 */
border-bottom: 1px #c0c0c0 dotted; /* データセルの下境界線 */
}
/* --- データセル内の補足テキスト --- */
form.contact td span.supplement {
color: #808080;
}
/* --- 必須項目セル --- */
form.contact td.required {
width: 26px; /* 必須項目セルの幅 */
padding: 0 3px; /* 必須項目セルのパディング（上下、左右） */
background-color: #c4e6fa; /* 必須項目セルの背景色 */
text-align: center;
vertical-align: middle;
}
/* --- 任意項目セル --- */
form.contact td.arbitrary {
background-color: #e0f1fc; /* 任意項目セルの背景色 */
}

/* --- フォーム部品 --- */
form.contact input,
form.contact select,
form.contact textarea {
margin-bottom: 10px; /* フォーム部品の下マージン */
margin-right: 5px;
}
/* --- フォーム部品のサイズ --- */
/* --- （長めのテキスト入力欄） --- */
#company, #department, #section, #rubi,
#email, #address {
width: 350px; /* フォーム部品の幅 */
border:1px #c0c0c0 solid;
}
/* --- （短めのテキスト入力欄） --- */
#name1, #name2, #name3, #name4, #tel, #zip, #hako, #number, #base, #paper {
width: 140px; /* フォーム部品の幅 */
border:1px #c0c0c0 solid;
}
/* --- （複数行のテキスト入力欄） --- */
#other, #date {
width: 420px; /* フォーム部品の幅 */
height: 10em; /* フォーム部品の高さ */
border:1px #c0c0c0 solid;
}

/* --- ボタン --- */
form.contact p.button {
margin: 20px 0 0; /* ボタンのマージン（上、左右、下） */
text-align: center;
}

#confirmation {
	margin: 30px auto;
	text-align: center;
}

#policy {
	overflow-y: scroll;
	height:100px;
	width:700px;
}

#check {
	margin: 20px;
}

#footer {
	margin: 0 auto;
	min-width: 960px;
	height: 250px;
	background-color: #ffffff;
}

div#footer img {
	margin: 30px;
}

#test {
	border-width: 2px;
	border-style: solid;
}

.trial p {
	font-weight: bold;
}
.trial p span {
	display: inline-block;
	font-weight: normal;
	font-size: 12px;
	padding-left: 18px;
	margin-top: 5px;
	margin-bottom: 10px;
}

.sp {
	display: none;
}

@media screen and (max-width: 768px) {
	
	.sp {
		display: inherit;
	}
	
	body {
		width: 100%;
	}
	
	#main {
		width: 90%;
		border-radius: 10px;
		font-size: 30px;
		margin: 100px auto 40px;
	}
	
	#green1 {
		width: 100%;
		font-size: 20px;
		font-weight: 900;
		letter-spacing: 6px;
		top: 20px;
		left: 50%;
		transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	}
	#green2 {
		width: 100%;
		font-size: 20px;
		font-weight: 900;
		top: 50px;
		left: 50%;
		transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	}
	#green3 {
		font-size: 16px;
		font-weight: 500;
		letter-spacing: 5px;
		top: 100px;
		left: 50%;
		transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	}
	.relative img,
	form.contact td.required,
	form.contact td.arbitrary{
		display: none;
	}
	#gray {
		font-size: 16px;
		margin-top: 180px;
	}
	hr {
		width: 95%;
	}
	/* --- フォームエリア --- */
	form.contact {
		margin-top: 20px;
		width: 100%; /* フォームエリアの幅 */
		font-size: 15px;
	}
	/* --- テーブル --- */
	form.contact table,
	form.contact #policy table{
		width: 100%; /* テーブルの幅 */
	}
	form.contact th,
	form.contact td {
		display: block;
		width: 95%;
		padding: 10px 8px;
	}
	/* --- フォーム部品のサイズ --- */
	/* --- （長めのテキスト入力欄） --- */
	#company, #section, #rubi, #email, #address {
		width: 100%; /* フォーム部品の幅 */
	}
	/* --- （短めのテキスト入力欄） --- */
	#name1, #name2, #name3, #name4, #tel, #zip, #hako, #number, #base, #paper {
		width: 60%; /* フォーム部品の幅 */
	}
	/* --- （複数行のテキスト入力欄） --- */
	#other, #date {
		width: 100%; /* フォーム部品の幅 */
		height: 10em; /* フォーム部品の高さ */
	}
	#policy {
		width: 100%;
	}
	.sp-required {
		padding-left: 30px;
		background-image: url(../images/required1.gif);
		background-repeat: no-repeat;
		background-position: 0 2px;
	}

}