@charset "utf-8";

/*---------- reset ----------*/
html{font-size:62.5%;height:100%;}
body{margin:0;padding:0;font-size:1.5rem;font-family:YakuHanJP,'Noto Sans CJK JP','Noto Sans JP',sans-serif,"游ゴシック","Yu Gothic",Yu Gothic,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ ゴシック";line-height:1.5;color:#333;height:100%;position:relative;letter-spacing:0.1em;overflow-wrap:break-word;word-wrap:break-word;}
header,main,article,section,nav,footer{display:block;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;font-size:100%;}
textarea{font-family:YakuHanJP,'Noto Sans CJK JP','Noto Sans JP',sans-serif,"游ゴシック","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ ゴシック";}
input{font-family:YakuHanJP,'Noto Sans CJK JP','Noto Sans JP',sans-serif,"游ゴシック","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ ゴシック";line-height:1.5;color:#333;position:relative;letter-spacing:0.1em;overflow-wrap:break-word;word-wrap:break-word;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border: 0;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
em{font-style:normal;font-weight:500;}
ol,ul{list-style: none;}
caption{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:bold;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
input[type="button"],input[type="submit"],input[type="email"]{-webkit-appearance:none;border-radius:0;}
select::-ms-expand{display:none;}

*, *::before, *::after{box-sizing:border-box;}
.cf::after{content:"";clear:both;display:block;}
/*---------- reset end ----------*/


html{visibility:hidden;}
html.wf-active, html.wf-inactive{visibility:visible;}

html[lang="vi"] body, html[lang="vi"] textarea, html[lang="vi"] input{font-family:Arial,'Noto Sans CJK JP','Noto Sans JP',sans-serif;}

#wrapper{overflow:hidden;}

::-webkit-input-placeholder{color:#ccc;}
::-moz-placeholder{color:#ccc;opacity:1;}
:-ms-input-placeholder{color:#ccc;}
input:focus::-webkit-input-placeholder{color:#ccc;}
input:focus:-moz-placeholder{color:#ccc;}
input:focus::-moz-placeholder{color:#ccc;}
.mode{ime-mode:disabled;}
.unmode{ime-mode:active !important;}

a, :visited{
	color:#333;
	text-decoration:underline;
}
a:hover{text-decoration:none;}
a[target="_blank"]{
	padding-right:20px;
	background:url(/img/common/popup.svg) no-repeat center right/14px;
}

img{
	display:block;
	max-width:100%;
	height:auto;
}
p{
	margin-bottom:25px;
	line-height:2.7rem;
}
table{
	width:100%;
	margin-bottom:25px;
}
tr:first-child th{border-top:1px solid #000;}
tr:first-child td{border-top:1px solid #ccc;}
th, td{
	padding:20px;
	line-height:2.4rem;
	vertical-align:top;
}
th{
	width:260px;
	border-bottom:1px solid #000;
	font-weight:bold;
	text-align:left;
	vertical-align:middle;
}
td{border-bottom:1px solid #ccc;}
td *:last-child{margin-bottom:0;}
td li{margin-bottom:5px;}

#form_header{
	padding:14px 20px;
	border-bottom:1px solid #ccc;
}
.logo{
	display:block;
	width:180px;
	margin:auto;
}
#header_wrap.form_header{padding:22px 20px 16px;}
#footer_wrap.form_footer #copyright{
	padding:13px 0;
	text-align:center;
}

#form_footer{
	padding:15px 20px;
	border-top:1px solid #ccc;
}
.return{
	position:relative;
	z-index:1000;
}
.return_btn{
	display:block;
	position:fixed;
	right:20px;
	bottom:20px;
	width:54px;
	height:54px;
	background:#004098;
	border:1px solid #fff;
	text-decoration:none;
	transition:all 0.3s;
}
.return_btn:hover{
	background:#fff;
	border-color:#004098;
}
.return_btn::after{
	content:'';
	display:block;
	position:absolute;
	top:8px;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
	width:13px;
	height:13px;
	border-top:1px solid #fff;
	border-right:1px solid #fff;
	transform:rotate(-45deg);
	transition:border-color 0.3s;
}
.return_btn:hover::after{border-color:#004098;}
.return_txt{display:none;}
.copyright{
	margin-bottom:0;
	line-height:1.5;
	text-align:center;
}
.copyright small{
	display:block;
	margin-top:3px;
	font-size:1.2rem;
	letter-spacing:1.44px;
}

#pankuzu{
	max-width:1140px;
	padding:0 20px;
	margin:auto;
}
#pankuzu ol{
	display:flex;
	padding:0;
	margin:0;
}
#pankuzu li{
	list-style:none;
	padding-top:15px;
	margin:0 15px 15px 0;
	font-size:1.2rem;
	letter-spacing:1.2px;
}
#pankuzu li:not(:last-child){
	padding-right:20px;
	background:url(/img/common/arrow_pankuzu.svg) no-repeat right bottom 5px;
}
#pankuzu a{
	color:#333;
	text-decoration:none;
}
#pankuzu li:last-child a{
	text-decoration:none;
	pointer-events:none;
}
#pankuzu a:hover{text-decoration:underline;}

.ttl_wrap{position:relative;}
.ttl_wrap::before{
	content:'';
	display:block;
	width:100%;
	height:240px;
	background:url(/img/contact/pic_h1.jpg) no-repeat center/cover;;
}
.ttl_area{
	max-width:1140px;
	padding:0 20px;
	margin:-80px auto 60px;
}
.ttl_box{
	position:relative;
	padding-top:95px;
	background:#fff;
}
.ttl_box::before{
	content:'';
	position:absolute;
	top:0;
	left:-50%;
	width:50%;
	height:100%;
	background:#fff;
}
.page_ttl{
	font-size:2.8rem;
	font-weight:bold;
	letter-spacing:3.36px;
}

.content_area{
	max-width:1140px;
	padding:0 20px 120px;
	margin:auto;
}
.content_area > *:first-child{margin-top:0;}
.content_area > *:last-child{margin-bottom:0;}

.step{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	max-width:340px;
	margin:0 auto 55px;
}
.step::before{
	content:'';
	display:block;
	position:absolute;
	z-index:0;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
	width:300px;
	height:2px;
	background:#E4E4E4;
}
.step_number{
	width:60px;
	padding:11px 0 15px;
	background:#E4E4E4;
	border-radius:50%;
	color:#555;
	font-size:1.2rem;
	font-weight:bold;
	letter-spacing:1.2px;
	line-height:1;
	text-align:center;
	position:relative;
}
.step_number.now{
	background:#004098;
	color:#fff;
}
.step_number:not(:last-child){margin:0 80px 0 0;}
.step_number::before{
	content:attr(data-step)'';
	display:block;
	margin-bottom:7px;
	font-size:1.5rem;
	letter-spacing:1.5px;
}

.red{color:#f00;}
.form_table{
	table-layout: fixed;
	width:100%;
	margin-bottom:45px;
}
.required{
	float:right;
	color:#f00;
	font-size:1.3rem;
	letter-spacing:1.3px;
	font-weight:normal;
}
.note{
	margin-bottom:5px;
	font-size:1.2rem;
	letter-spacing:1.2px;
}
td input{
	width:100%;
	padding:16px 20px;
	background:#F5F5F5;
	border:none;
	border-radius:0;
}
td label{
	display:inline-block;
	position:relative;
	padding-left:25px;
}
td input.radio{
	position:absolute;
	top:5px;
	left:0;
	width:16px;
	height:16px;
	padding:0;
}
textarea{
	width:100%;
	min-height:150px;
	padding:16px 20px;
	background:#F5F5F5;
	border:none;
	border-radius:0;
	resize:vertical;
	overflow:auto;
}
#postcode{
	width:100%;
	max-width:400px;
	margin:0 0 20px 10px;
}
#email{margin-bottom:15px;}
.form-group{margin-top:15px;}
#email_confirm,
.user_id{
	margin-bottom:0;
	font-size:2.4rem;
	font-weight:bold;
	letter-spacing:2.4px;
}
.doi{
	margin:40px 0 50px;
	background:#EFF6FC;
}
.doi label{
	position:relative;
	display:block;
	text-align:center;
	padding:36px 0 37px 15px;
	cursor:pointer;
}
.doi input{
	position:absolute;
	top:calc(50% - 7px);
	left:-250px;
	right:0;
	margin:auto;
	cursor:pointer;
}

#form_btn{
	display:flex;
	align-items:center;
	justify-content:center;
}
#form_btn input,
.home_btn{
	display:block;
	width:224px;
	padding:10px 0;
	background:#004098;
	border:2px solid #004098;
	color:#fff;
	font-weight:bold;
	line-height:2;
	text-align:center;
	cursor:pointer;
	transition:background 0.3s, color 0.3s;
}
#form_btn input:hover,
.home_btn:hover{
	background:#fff;
	color:#004098;
}
#form_btn a{
	width:144px;
	padding:10px 0;
	margin-right:20px;
	background:#777;
	border:2px solid #777;
	color:#fff;
	font-weight:bold;
	line-height:2;
	text-align:center;
	text-decoration:none !important;
	transition:background 0.3s, color 0.3s;
}
#form_btn a:hover{
	background:#fff;
	color:#777;
}
.home_btn{
	margin:50px auto 0;
	text-decoration:none !important;
}


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

#pankuzu li{
	font-size:1.1rem;
	letter-spacing:1.1px;
}

p{
	margin-bottom:20px;
	font-size:1.4rem;
	letter-spacing:1.4px;
}
table{margin-bottom:20px;}
th, td{
	padding:14px 15px;
	font-size:1.4rem;
	letter-spacing:1.4px;
}
th{width:220px;}

.ttl_wrap::before{height:190px;}
.ttl_area{margin:-70px auto 50px;}
.ttl_box{padding-top:70px;}
.page_ttl{
	font-size:2.6rem;
	letter-spacing:3.12px;
}

.content_area{padding-bottom:110px;}

.step{
	max-width:300px;
	margin-bottom:50px;
}
.step::before{width:260px;}
.step_number:not(:last-child){margin-right:60px;}

.form_table{margin-bottom:35px;}
#postcode{max-width:300px;}
#email_confirm,
.user_id{
	font-size:2.2rem;
	letter-spacing:2.2px;
}

.doi{margin:35px 0 45px;}
.doi label{padding:26px 0 27px 15px;}
.doi input{
	left:-235px;
}

}


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

body{
	-webkit-text-size-adjust:100%;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	background:#fff;
	width:auto;
	font-size:1.3rem;
}

p{
	margin-bottom:15px;
	font-size:1.3rem;
	letter-spacing:1.3px;
	line-height:2.4rem;
}
ul li:not(:last-child),
ol li:not(:last-child){
	margin-bottom:5px;
}
table{
	margin-bottom:15px;
	border-bottom:1px solid #000;
}
th, td{
	display:list-item;
	list-style:none;
	width:100%;
	font-size:1.3rem;
	letter-spacing:1.3px;
	border-bottom:none;
}
th{border-top:1px solid #000;}
td{border-top:1px solid #ccc;}

#form_header{padding:12px 5px 11px;}
.logo, .logo_img{width:140px;}
#return a{
	right:10px;
	width:46px;
	height:46px;
}
.copyright small{
	font-size:1.1rem;
	letter-spacing:1.32px;
}

#pankuzu{display:none;}

.ttl_wrap::before{height:140px;}
.ttl_area{margin:-60px auto 40px;}
.ttl_box{padding-top:45px;}
.page_ttl{
	font-size:2.4rem;
	letter-spacing:2.88px;
}

.content_area{padding-bottom:100px;}

.step{
	max-width:260px;
	margin-bottom:45px;
}
.step::before{width:220px;}
.step_number:not(:last-child){margin-right:40px;}

.form_table{margin-bottom:20px;}
.note{margin-bottom:10px;}
td input.radio{top:4px;}
#postcode{
	max-width:200px;
	margin-bottom:10px;
}
#email_confirm,
.user_id{
	font-size:2rem;
	letter-spacing:2px;
}
td input,
textarea{
	padding:15px 20px;
}

.doi{margin:30px 0 40px;}
.doi label{padding:18px 0 18px 15px;}
.doi input{left:-220px;}

#form_btn input, .home_btn{
	padding:13px 0;
	font-size:1.3rem;
	letter-spacing:1.3px;
}
#form_btn a{
	padding:13px 0;
	font-size:1.3rem;
	letter-spacing:1.3px;
}

}


/*---------- print ----------*/
@media print{
	body{
		width:1200px;
		transform:scale(1);
		-moz-transform:scale(1);
		-webkit-transform:scale(1);
		transform-origin:0 0;
		zoom:.91;
		margin:auto
	}
	@media all and (-ms-high-contrast:none){
		body{width:1200px}
	}
	@media (-ms-high-contrast:none),(-ms-high-contrast:active){
		body{width:1200px}
	}
	@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm){
		body{
			width:1200px;
			transform:scale(.8);
			-moz-transform:scale(.8);
			-webkit-transform:scale(.8);
			transform-origin:0 0;
			margin:auto
		}
	}
}
/*---------- print end ----------*/