@charset "UTF-8";

/*=============================================
 
	contact
 
==============================================*/
.contact {
	margin: 0 0 10rem;
}
.contact .secTitBox span {
    height: 40px;
}

.contact .grayArea {
	background: #F5F5F5;
	padding: 5rem 0 4rem;
}
.contact .grayArea .inner,
.contact .formArea .inner {
	width: 830px;
	margin: 0 auto;
}
.contact .conTit {
	font-size: 3.3rem;
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.025em;
	margin: 0 0 3rem;
}
.contact .grayArea p {
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	margin: 0 0 2rem;
}
.contact .grayArea .checkList {
	background: #fff;
	border: solid 1px #E1E1E1;
	padding: 1.5rem 1rem;
	margin: 0 0 3rem;
}
.contact .grayArea .checkList li {
	font-size: 1.6rem;
	line-height: 1.7;
	text-indent: -1em;
	margin: 0 0 3px 1em;
}
.contact .grayArea .checkList li:last-child {
	margin: 0 0 0 1em;
}
.contact .grayArea .checkList li:before {
	content: "・";
}
.contact .grayArea .checkList li a {
	text-decoration: underline;
}
.contact .grayArea .checkList li a:hover {
	text-decoration: none;
}

.contact .grayArea .agree {
	display: table;
	margin: 0 auto;
}
.contact .grayArea .agree li {
	float: left;
	font-size: 2rem;
	font-weight: bold;
	margin: 0 6rem 0 0;
}
.contact .grayArea .agree li:last-child {
	margin: 0;
}
.radio-input {
	margin: 0 10px 0 0;
}
/*.radio-input {
	display: none;
}*/
.radio-input + label {
	padding: 0 0 0 2.8rem;
	position: relative;
}
.radio-input + label::before{
  content: "";
  display: block;
  position: absolute;
  top: 7px;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  border-radius: 50%;
}
.radio-input:checked + label::after{
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #000;
  border-radius: 50%;
}

.contact .formArea {
	padding: 7rem 0;
}
.contact .formArea .conTit {
	margin: 0 0 5rem;
}
.contact .formArea .stepBox {
	display: table;
	margin: 0 auto 7rem;
}
.contact .formArea .stepBox li {
	float: left;
	width: 236px;
	padding: 1rem 0;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	margin: 0 6rem 0 0;
	letter-spacing: 0.1em;
	color: #b3b3b3;
	border-top: solid 1px #b3b3b3;
	border-bottom: solid 1px #b3b3b3;
	position: relative;
}
.en .contact .formArea .stepBox li {
	padding: 2.2rem 0;
}
.en .contact .formArea .stepBox li:nth-child(2) {
	padding: 1rem 0;
}
.contact .formArea .stepBox li:last-child {
	margin: 0;
}
.contact .formArea .stepBox li:before {
	content: "";
	background: url(../images/arr_gray_right_a.png) no-repeat;
	background-size: 100%;
	width: 30px;
	height: 25px;
	position: absolute;
	top: 16px;
	right: -45px;
}
.contact .formArea .stepBox li.now:before {
	background: url(../images/arr_black_right_a.png) no-repeat;
	background-size: 100%;
}
.en .contact .formArea .stepBox li::before {
    top: 30px;
}
.contact .formArea .stepBox li:last-child:before {
	content: none;
}
.contact .formArea .stepBox li span {
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
	display: block;
	margin: 0 0 0.5rem;
}
.contact .formArea .stepBox li.now {
	color: #000;
	border-top: solid 1px #000;
	border-bottom: solid 1px #000;
}
.contact .formArea .titBox {
	margin: 0 0 4rem;
}
.contact .formArea .subTit {
	font-size: 3.3rem;
	font-weight: 300;
	margin: 0 0 1rem;
	letter-spacing: 0.025em;
	text-align: center;
}
.contact .formArea .req {
	color: #FF0000;
	font-size: 1.2rem;
	vertical-align: top;
}
.contact .formArea .contBox {
	margin: 0 0 6rem;
}
.contact .formArea .notice {
	font-size: 1rem;
	letter-spacing: 0.025em;
	text-align: center;
}
.contact .formArea .infoBox .titBox {
    margin: 0 0 5rem;
}
.contact .formArea table,
.contact .formArea table tr,
.contact .formArea table tbody {
	display: inherit;
	width: 100%;
}
.contact .formArea th {
	font-size: 1.8rem;
	letter-spacing: 0.1em;
	margin: 0 0 2rem;
	text-align: center;
	display: block;
	width: 100%;
}
.contact .formArea td {
	display: block;
	width: 100%;
	padding: 0 0 30px;
}
.contact .formArea .itemBox .type {
	padding: 0 0 30px;
}
.contact .formArea td ul {
	margin: 0 auto;
	display: table;
}
.contact .formArea td li {
	font-size: 1.8rem;
	margin: 0 0 1rem;
}
.contact .formArea td li:last-child {
	margin: 0;
}
.contact .formArea td .commentBox {
	width: 100%;
	border: solid 1px #A0A0A0;
	height: 180px;
	padding: 5px;
}
.contact .formArea .itemBox .radio-input + label::before {
	width: 18px;
	height: 18px;
    top: 5px;
}
.contact .formArea .itemBox .radio-input:checked + label::after {
	width: 12px;
	height: 12px;
    top: 8px;
}
.contact .formArea .text-input {
	width: 100%;
	height: 50px;
	border: solid 1px #A0A0A0;
	font-size: 1.5rem;
	text-align: center;
}
.contact .formArea .text-input::placeholder {
	color: #aaa;
}
/* IE */
.contact .formArea .text-input:-ms-input-placeholder {
	color: #aaa;
}
/* Edge */
.contact .formArea .text-input::-ms-input-placeholder {
	color: #aaa;
}
.contact .formArea .infoBox .itemBox dl {
    margin: 0 0 3rem;
}
.contact .formArea .infoBox .itemBox dt {
    margin: 0 0 1rem;
}
.contact .submitArea {
	text-align: center;
	margin: 6rem auto 0;
}
.contact .submitArea .blBtn {
	width: 300px;
	color: #fff;
	font-size: 1.8rem;
	text-align: center;
	font-weight: bold;
	margin: 0 auto;
	background: #2C4A8D url(../images/arr_white_right_a.png) no-repeat right 13px center;
	background-size: 20px auto;
	padding: 20px;
	letter-spacing: 0.1em;
}
.contact .submitArea .blBtn[disabled]{
    background:#DCDCDC;
    cursor:not-allowed;
}
.contact .submitArea .blBtn:hover {
	opacity: 0.8;
}
.en .contact .submitArea .blBtn {
	width: 340px;
}

.radio-btns {
	display: table;
	margin: 0 auto;
}
/* ラジオボタンを隠す */
.radio-btns input[type=radio].radio-btns__item{
	display: none;
}
.radio-btns label {
	display: block;
	margin: 0 0 1rem;
}
/* spanの左側にボタンを配置するスペースを作る */
.radio-btns .radio-btns__item + span {
	padding-left: 2em;
	display: inline-block;
	position: relative;
	font-size: 1.8rem;
}
/* 各パーツを作成 */
.radio-btns .radio-btns__item + span::after,
.radio-btns .radio-btns__item + span::before {
  content: "";
  display: block;
  position: absolute;
  border: 1px solid #000;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
}
/* after上書き */
.radio-btns .radio-btns__item + span::after{
	opacity: 0;
  width: 14px;
  height: 14px;
  top: 3px;
  left: 3px;
  border: none;
  background: #000;
}
/*
  checked状態
  文字のcolorとボタンのopacityを変更
*/
.radio-btns .radio-btns__item:checked + span {
  color: #000;
}
.radio-btns .radio-btns__item:checked + span::after {
  opacity: 1;
}








/*
	conf
================================*/
.contact .conf {
	padding: 2rem 0 7rem;
}
.contact .txt {
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	margin: 0 0 3rem;
}
.contact .confBox {
	border: solid 1px #A0A0A0;
	border-bottom: none;
}
.contact .confBox .req {
	color: #C80000;
	vertical-align: inherit;
	font-size: 1.5rem;
}
.contact .confBox table {
	display: table;
	width: 100%;
	border-bottom: none;
}
.contact .confBox th {
	display: table-cell;
	vertical-align: middle;
	background: #E1E1E1;
	font-size: 1.5rem;
	font-weight: 500;
	width: 270px;
	padding: 26px;
	text-align: center;
	border-right: solid 1px #A0A0A0;
	border-bottom: solid 1px #A0A0A0;
	word-break: break-word;
	line-height: 1.4;
}
.contact .confBox td {
	display: table-cell;
	vertical-align: middle;
	font-size: 1.6rem;
	padding: 26px;
	line-height: 1.7;
	border-bottom: solid 1px #A0A0A0;
	width: auto;
	word-break: break-word;
}
.contact .conf .submitArea {
	display: table;
	margin: 6rem auto 0;
}
.contact .submitArea .wtBtn {
	float: left;
	width: 300px;
	color: #2C4A8D;
	font-size: 1.8rem;
	text-align: center;
	font-weight: bold;
	margin: 0 4rem 0 0;
	background: #fff url(../images/arr_blue_left_a.png) no-repeat left 13px center;
	background-size: 20px auto;
	padding: 18px;
	letter-spacing: 0.1em;
	border: solid 2px #2C4A8D;
}
.contact .conf .submitArea .blBtn:hover,
.contact .submitArea .wtBtn:hover {
	opacity: 0.8;
}
.en .contact .conf .submitArea .wtBtn {
	width: 360px;
	padding: 18px 10px 18px 32px;
}
.contact .conf .submitArea .blBtn {
	float: left;
	margin: 0;
}


/*
	thanks
================================*/
.contact .thanks {
	padding: 2rem 0 7rem;
}
.contact .thanks .thanksTit {
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.025em;
	margin: 0 0 3rem;
	font-size: 3rem;
}
.contact .thanks p {
	font-size: 1.9rem;
	text-align: center;
	line-height: 1.8;
}
.contact .thanks .submitArea {
	display: table;
	margin: 6rem auto 0;
}













@media screen and (max-width: 768px) {
	
.contact {
	margin: 0 0 6rem;
}
.contact .grayArea {
	background: #F5F5F5;
	padding: 3rem 4% 4rem;
}
.contact .grayArea .inner,
.contact .formArea .inner {
	width: 100%;
	margin: 0 auto;
}
.contact .conTit {
	font-size: 2.4rem;
	line-height: 1.5;
	margin: 0 0 3rem;
}
.contact .grayArea p {
	font-size: 1.6rem;
	line-height: 1.5;
	margin: 0 0 2rem;
}
.contact .grayArea .checkList {
	padding: 1.5rem 1.5rem 1.5rem 1rem;
	margin: 0 0 3rem;
}
.contact .grayArea .checkList li {
	font-size: 1.4rem;
	line-height: 1.6;
	text-indent: -1em;
	margin: 0 0 3px 1em;
}
.contact .grayArea .checkList li a {
	text-decoration: underline;
}
.contact .grayArea .checkList li a:hover {
	text-decoration: underline;
}	
.contact input[type="checkbox"] {
	border: solid 1px #000;
}	

.contact .grayArea .agree {
	display: table;
	margin: 0 auto;
}
.contact .grayArea .agree li {
	float: left;
	font-size: 1.6rem;
	margin: 0 5rem 0 0;
}
.radio-input + label {
	padding: 0 0 0 2.6rem;
}
.radio-input + label::before{
  top: 6px;
  left: 0;
  width: 16px;
  height: 16px;
}
.radio-input:checked + label::after{
  top: 9px;
  left: 3px;
  width: 10px;
  height: 10px;
}

.contact .formArea {
	padding: 2rem 4% 0;
}
.contact .formArea .conTit {
	margin: 0 0 3rem;
}
.contact .formArea .stepBox {
	display: table;
	margin: 0 auto 5rem;
}
.contact .formArea .stepBox li {
	float: left;
	width: 95px;
	padding: 1rem 0;
	font-size: 1.2rem;
	margin: 0 3rem 0 0;
	position: relative;
}
.contact .formArea .stepBox li:before {
	content: "";
	background: url(../images/arr_gray_right_a.png) no-repeat;
	background-size: 100%;
	width: 16px;
	height: 15px;
	position: absolute;
	top: 20px;
	right: -25px;
}
.contact .formArea .stepBox li.now:before {
	background: url(../images/arr_black_right_a.png) no-repeat;
	background-size: 100%;
}
.contact .formArea .stepBox li:last-child:before {
	content: none;
}
.en .contact .formArea .stepBox li {
    padding: 1rem 0;
}
.en .contact .formArea .stepBox li:last-child {
    padding: 1.7rem 0;
}
.en .contact .formArea .stepBox li::before {
    top: 25px;
}
.contact .formArea .stepBox li span {
	font-size: 0.9rem;
	margin: 0 0 0.5rem;
}
.contact .formArea .titBox {
	margin: 0 0 4rem;
}
.contact .formArea .subTit {
	font-size: 2.4rem;
	margin: 0 0 1rem;
}
.contact .formArea .req {
	color: #FF0000;
	font-size: 1.2rem;
	vertical-align: top;
}
.contact .formArea .contBox {
	margin: 0 0 4rem;
}
.contact .formArea .notice {
	font-size: 1rem;
}
.contact .formArea .infoBox .titBox {
    margin: 0 0 3rem;
}
.contact .formArea .itemBox dl {
	margin: 0 0 5rem;
}
.contact .formArea tr {
	display: block;
	width: 100%;
}
/*.contact .formArea table, .contact .formArea table tr, .contact .formArea table tbody {
	display: block;
}*/
.contact .formArea th {
	font-size: 1.6rem;
	margin: 0 0 1rem;
}
.contact .formArea td {
    padding: 0 0 20px;
}
.contact .formArea .type {
    padding: 0 0 30px;
}
.contact .formArea td ul {
	margin: 0 auto;
	display: table;
}
.contact .formArea td li {
	font-size: 1.5rem;
	margin: 0 0 1rem;
}
.contact .formArea td li input[type="radio"] {
	border-radius: 50%;
	border: solid 1px #000;
}
.contact .formArea td .commentBox {
	width: 100%;
	height: 160px;
	padding: 4px;
}
.contact .formArea .itemBox .radio-input + label::before {
	width: 16px;
	height: 16px;
    top: 3px;
}
.contact .formArea .itemBox .radio-input:checked + label::after {
	width: 10px;
	height: 10px;
    top: 6px;
}
.contact .formArea .text-input {
	width: 100%;
	height: 50px;
	font-size: 1.4rem;
}
.contact .formArea .infoBox .itemBox dl {
    margin: 0 0 3rem;
}
.contact .formArea .infoBox .itemBox dt {
    margin: 0 0 1rem;
}
.contact .submitArea {
	text-align: center;
	margin: 3rem auto 0;
}
.contact .submitArea .blBtn {
	width: 300px;
	font-size: 1.6rem;
	margin: 0 auto;
	background: #2C4A8D url(../images/arr_white_right_a.png) no-repeat right 13px center;
	background-size: 20px auto;
	padding: 20px;
	float: none;
}
.contact .submitArea .blBtn:hover {
	opacity: 1;
}
.en .contact .submitArea .blBtn {
	width: 340px;
}

/*
	conf
================================*/
.contact .txt {
	font-size: 1.6rem;
	line-height: 1.5;
	margin: 0 0 3rem;
}
.contact .confBox {
	border: solid 1px #A0A0A0;
	border-bottom: none;
}
.contact .confBox .req {
	font-size: 1.5rem;
}
.contact .confBox table {
	display: block;
	width: 100%;
	border-bottom: none;
}
.contact .confBox th {
	display: block;
	width: 100%;
	font-size: 1.5rem;
	padding: 20px;
	text-align: center;
	border-right: none;
	margin: 0;
}
.contact .confBox td {
	display: block;
	width: 100%;
	font-size: 1.5rem;
	padding: 20px;
	line-height: 1.5;
}
.contact .conf .submitArea {
	display: table;
	margin: 5rem auto 0;
	display:-webkit-box;
  	display: -webkit-flex;
  	display:-ms-flexbox;
  	display: flex;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.contact .submitArea .wtBtn {
	float: none;
	width: 260px;
	font-size: 1.6rem;
	margin: 2rem auto 0;
	background: #fff url(../images/arr_blue_left_a.png) no-repeat left 13px center;
	background-size: 20px auto;
	padding: 18px;
	border: solid 2px #2C4A8D;
	order: 2;
}
.contact .submitArea .wtBtn:hover {
	opacity: 1;
}
.contact .conf .submitArea .blBtn {
	float: none;
	margin: 0 auto;
	order: 1;
}


/*
	thanks
================================*/
.contact .thanks .thanksTit {
	margin: 0 0 2rem;
	font-size: 2rem;
}
.contact .thanks p {
	font-size: 1.4rem;
	line-height: 1.6;
}
.contact .thanks .submitArea {
	display: table;
	margin: 5rem auto 0;
}
.contact .thanks .submitArea .wtBtn {
	display: block;
	margin: 0;
}		
	
}