@charset "utf-8";
/**
 * style 
 * (c) FOURDIGIT Inc.
 *
 */
/**
 * 1. import
 */
@import "import/reset.css";
@import "import/util.css";

/**
 * 2. html, body
 */
	body {
		background-color: #ffffff;
		background-image: url(../imgs/space.gif);
		background-repeat: repeat-x;
		background-position: center top;
		-webkit-text-size-adjust: 100%;
	}
@media only screen and (max-width:600px) {
		/* for sp bug */
		.page {
			overflow: hidden;
		}
}
	.page {
		color: #333333;
		font-size: 14px;
		line-height: 1.5;
		letter-spacing: 0.1em;
		font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	}
	
/**
 * 3. HTMLtag, siteCommonClass
 */
/* anchor */
	a {
		background-color: transparent;
		background-image: none;
		background-repeat: no-repeat;
		color: #333333;
		text-decoration: underline;
	}
	a:visited {}
	a:hover {
		color: #333333;
		text-decoration: underline;
	}
	a:active {}

/* heading */
	h1 {
		font-size: 20px; line-height: 20px; font-weight: bold; margin-top: 15px;
	}
	h2 {
		font-size: 18px; line-height: 24px; margin-bottom: 20px; padding-left: 10px; border-left: 5px solid #117fc2;
	}
	h3 {
		display: block; font-weight: bold; margin-top: 30px; margin-bottom: 10px;
	}
@media only screen and (max-width:600px) {
	h1 {
		font-size: 28px; line-height: 38px;
	}
	h2 {
		font-size: 24px; line-height: 34px;
	}
	h2 span {
		display: block; text-indent: -9999px; line-height: 0;
	}
}


/**
 * 4. Layout
 */
 
/**
 * container
 */ 
	body #container {
		text-align: left; clear: both;
	}

/**
 * gHeader
 */	
	body #gHeader {
		margin-bottom: 20px;
	}
	body #gHeader .inner {
		padding: 15px 0; border-bottom: 1px dashed #ccc;
	}
	body #gHeader h1.HdrLogo {
		float: left;
	}
	body #gHeader .HdrClose {
		float: right; margin-top: 10px;
	}

@media only screen and (max-width:600px) {
	body #gHeader h1.HdrLogo {
		float: none;
	}
	body #gHeader .HdrClose {
		display: none;
	}
}

/**
 * gFooter
 */
	body #gFooter .inner {
		padding: 15px 0; border-top: 1px dashed #ccc; text-align: center; font-size: 10px; line-height: 15px; color: #a2a2a2;
	}

/**
 * wrapper
 */	
	.wrapper {
		width: 800px; margin-left: auto; margin-right: auto; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box;
	}
	#container .wrapper {
		position: relative;
	}
	
@media only screen and (max-width:960px) {
	.wrapper {
		width: auto; padding-left: 10px; padding-right: 10px;
	}
}

/**
 * section
 */	
	.section.num01 {
		margin-bottom: 40px;
	}
	
/**
 * remainder
 */	
	#remainder {
		position : fixed; top: 100px; z-index: 200; background-color: rgba(93, 182, 230, 0.9); background: rgba(93, 182, 230, 0.9); color: #ffffff; padding: 20px 30px; margin-left: 650px; text-align: center; color: #fff; font-size: 12px line-height: 18px;
		box-sizing: border-box;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		-ms-box-sizing:border-box;
		-o-box-sizing:border-box;
	}
	#remainder strong {
		font-size: 48px;
	}
@media only screen and (max-width:819px) {
	#remainder {
		width: 20%; margin-left: 75%;
	}
}	
@media only screen and (max-width:767px) {
	#remainder {
		display: none;
	}
	#remainder {
		width: 100%; top: 0; padding: 10px; margin-left: 0; right: 0; font-size: 24px; line-height: 30px; font-weight: bold;
	}
	#remainder strong {
		font-size: 24px; line-height: 30px;
	}
	#remainder br {
		display: none;
	}
}

/**
 * kiyakuBox
 */
	.kiyakuBox {
		font-size: 12px; line-height: 18px; border: 1px solid #cccccc; margin-bottom: 30px; padding: 5px; height: 130px; overflow-y: scroll;
	}
@charset "utf-8";	
/**
 * Parts
 */
 	.parts {
		position: relative; width: 440px; padding-left: 200px; margin-bottom: 10px; min-height: 46px; clear: both; zoom: 0;
	}
	.parts:after {  
		content: "."; display: block; height: 0; clear: both; visibility: hidden;  
	}
	.parts .name {
		position: absolute; top: 0; left: 0; width: 175px; height: 100%; min-height: 100%; background: #f2f2f2; float: left; padding: 15px 10px; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box;height: inherit;
	}
	.parts label {
		display: inline-block;
	}
@media only screen and (max-width:600px) {
	.parts {
		width: 100%; padding-left: 0; font-size: 20px; line-height: 28px; margin-bottom: 30px;
	}
	.parts .name {
		position: static; width: 100%; margin-bottom: 20px;
	}
}

/* parts select input default */
	.parts select, .parts input, .parts textarea {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		box-sizing: border-box;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		-ms-box-sizing:border-box;
		-o-box-sizing:border-box;
	}
	.parts select, .parts input {
		font-size: 14px; line-height: 20px; padding: 5px; border: 1px solid #cccccc; outline: 0;
	}
	.parts label:hover {
		color: #117fc2;
	}
	.parts input {
		margin: 5px 5px 5px 0;
	}

@media only screen and (max-width:600px) {
	.parts select, .parts input {
		font-size: 18px; line-height: 22px;
	}
	.parts input,
	.parts input.must {
		width: 100%;
	}
}
	
/* must */
	.parts .must {
		background-color: #fdf2f4;
	}
    .parts .checkb.must input[type='checkbox'] {
    	background-color: #fdf2f4;
    }
	.parts .checkb.must {
		background-image: url(../imgs/icon-check-must.png);
	}
	.parts .radiob.must {
		background-image: url(../imgs/icon-radio-must.png);
	}
	.selectbox.must {
   		background-color: #fdf2f4;
   }
	
/* checkbox */
	.parts input[type='checkbox'] {
		filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; position: absolute; z-index: 9999; width: auto;
	}
	 .parts .checkb {
	 	background-color: #ffffff; background-image: url(../imgs/icon-check.png); background-repeat: no-repeat; background-position: left top; background-size: 25px 27px; /*height: 24px;*/ padding: 2px 0 0 30px; margin: 10px 7px 5px 0; line-height: 26px; /*display: block;*/ cursor: pointer;}
	.parts.parts_checkbox .checkb {
		/*width:inherit;*/
	}
	.parts .checkb input[type="checkbox"]:checked {
		background-image: url(../imgs/icon-check_on.png);
	}
	.parts .checkb.c_on {
		background-image: url(../imgs/icon-check_on.png);
	}
	
/* radio */
	.parts input[type='radio']{
		filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; position: absolute;
	}
	.parts .radiob {
	 	background-color: #ffffff; background-image: url(../imgs/icon-radio.png); background-repeat: no-repeat; background-position: left top; background-size: 20px 20px; width: 24px; height: 23px; padding: 0 0 0 32px; margin: 10px 12px 6px 0; line-height: 23px; /*display: block;*/ cursor: pointer; overflow: hidden;
	}
	.parts .radiob input[type="radio"]:checked {
		background-image: url(../imgs/icon-radio_on.png);
	}
	.parts .radiob.c_on {
		background-image: url(../imgs/icon-radio_on.png);
	}
	
/* parts_addressset */
	.parts.parts_addressset .radiob,
	.parts.parts_radio .radiob {
		width: auto;
	}
/* parts_radio */
	/*.parts.parts_radio .radiob {
		width: 80px;
	}*/
@media only screen and (max-width:600px) {
	.parts .checkb {
		margin-top: 0;
	}
	.parts .radiob {
		margin-top: 0;
	}
	.parts.parts_radio .radiob {
		width: auto;
	}
	.parts .radiob input {
		width: auto;
	}
}
	
/* select */  
   .selectbox {
   		width: 100%; height: 30px; line-height: 30px; padding: 0 0 5px 5px; overflow: hidden; background-image: url(../imgs/icon-select.png); background-repeat: no-repeat; background-position: right 50%; /*background-size: 15px; 15px;*/ border: 1px solid #ccc; border-radius: 5px; margin: 5px 5px 5px 0;
   		box-sizing: border-box;
   		-webkit-box-sizing:border-box;
   		-moz-box-sizing:border-box;
   		-ms-box-sizing:border-box;
   		-o-box-sizing:border-box;
   } 
   .selectbox select {
   		background: transparent; width: 130%; border: 0; border-radius: 0; height: 30px; -webkit-appearance: none;
   }
/* parts_addressset select */
   .parts_addressset .selectbox {
   		width: 190px; float: right;
   }
/* parts_yyyymmdd select */
   .parts_yyyymmdd .selectbox {
   		width: 20%; float: left; display: block;
   }
   .parts_yyyymmdd span {
   		width: 8%; padding: 8px 0 0 2px; height: 12px; float: left; display: block;
   }
/* parts_select select */
   .parts_select .selectbox {
   		width: 60%; float: left;
   }  
@media only screen and (max-width:599px) {
	.parts_addressset .selectbox {
   		width: 100%; float: none;
   }
}   
   
/* textarea */
	.parts textarea {
		border: 1px solid #ccc; height: 60px; width: 100%;
	}
	
/* parts_addressset */
	.parts_addressset .inner {
		zoom: 1;
	}
	.parts_addressset .inner:after {  
		content: "."; display: block; height: 0; clear: both; visibility: hidden;  
	}
	.parts_addressset .inner span	{
		/*font-size: 14px;*/ display: block; width: 150px; text-align: right; margin-left: 5px;	margin-right: 5px; text-align: left; float: left; padding-top: 10px;
	}
	.parts_addressset .inner span.text {
		width: 400px; font-size: 11px; text-align: left;
	}

@media only screen and (max-width:600px) {
	.parts_addressset .inner span {
		width: 100%; margin-left: 0; margin-right: 0; float: none;
	}
	.parts_addressset .inner span.text {
		width: 100%;
	}
}


/* jusho_forkokugai */
	.parts .forkokugai {
		display: none;
	}
	.parts .forkokugai input {
		width: 190px; float: right;
	}
@media only screen and (max-width:599px) {
	.parts .forkokugai input {
		width: 100%; float: none;
	}
}
/* jusho_forkokunai */
	.parts .forkokunai input {
		width: 190px; float: right;
	}
@media only screen and (max-width:599px) {
	.parts .forkokunai input {
		width: 100%; float: none;
	}
}
/* parts_mailset */
	.parts.parts_mailset input.second {
		float: left;
	}
	.parts.parts_mailset span.cap {
		height: 30px; display: inline-block; padding-top: 10px;
	}
@media only screen and (max-width:599px) {
	.parts.parts_mailset span.cap {
		float: right; text-align: left; width: 100%; height: auto;
	}
}

	
/* caution */
	.parts .caution {
		display: none; position: absolute; left: 30%; top: -30px; z-index: 100; background-color: #000000; color: #ffffff; padding: 4px 8px;
	}
	.parts .caution:after, .parts .caution:before {
		top: 100%; left: 15%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;
	}
	.parts .caution:after {
		border-color: rgba(136, 183, 213, 0); border-top-color: #000000; border-width: 5px; margin-left: -5px;
	}
/* caution animation */
	.parts .caution.active {
		display: block;
		animation: animation06 0.4s 1;
		-moz-animation: animation06 0.4s 1;
		-o-animation: animation06 0.4s 1;
		-webkit-animation: animation06 0.4s 1;
		opacity: 0.9;
	}
	@keyframes animation06 {
		0%   { transform: translateY(10px); opacity: 0; }
  		100%  { transform: translateY(-5px); opacity:0.9; }
	}
	@-webkit-keyframes animation06 {
		0%   { -webkit-transform: translateY(10px); opacity: 0; }
  		100%  { -webkit-transform: translateY(-5px); opacity:0.9; }
	}
	@-o-keyframes animation06 {
		0%   { transform: translateY(10px); opacity: 0; }
  		100%  { transform: translateY(-5px); opacity:0.9; }
	}
	@-moz-keyframes animation06 {
		0%   { transform: translateY(10px); opacity: 0; }
  		100%  { transform: translateY(-5px); opacity:0.9; }
	}
	
@media only screen and (max-width:600px) {
	.parts .caution {
		font-size: 12px; left: 0; top: 35px;
	}
}

/* guide */
	.parts .guide {
		display: none; position: absolute; right: -5%; top: 100px; z-index: 250; background-color: #000000; color: #ffffff; padding: 10px; width: 240px; height: 200px; overflow-y: scroll; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; border-radius: 5px; font-weight: bold;
	}
	.parts .guide a {
		color: #ffffff; font-size: 12px; line-height: 18px; text-decoration: none; opacity: 1;
      animation-duration: 0.5s;
      animation-name: fade-in;
      -moz-animation-duration: 0.5s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 0.5s;
      -webkit-animation-name: fade-in;
	}
/* guide animation */
	@keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }
      1% {
        display: block;
        opacity: 0;
      }
      100% {
        display: block;
        opacity: 1;
      }
    }
    @-moz-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }
      1% {
        display: block;
        opacity: 0;
      }
      100% {
        display: block;
        opacity: 1;
      }
    }
    @-webkit-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }
      1% {
        display: block;
        opacity: 0;
      }
      100% {
        display: block;
        opacity: 1;
      }
    }
    
@media only screen and (max-width:960px) {
	.parts .guide {
		right: 0; top: 100px;
	}
}
@media only screen and (max-width:600px) {
	.parts .guide {
		top: 200px; width: 100%;
	}
}

/* parts_nameset */
	.parts_nameset span {
		/*font-size: 14px;*/ display: inline-block; width: 35px; text-align: right; margin-left: 5px; margin-right: 5px;
	}
	.parts_nameset input {
		width: 120px;
	}
@media only screen and (max-width:600px) {
	.parts_nameset span {
		width: 20%; text-align: left;
	}
	.parts_nameset input {
		width: 100%;
	}
}


/* hidden */
	div#hidden_area{
		display : none; margin-top: 30px; margin-left: 10px;
	}

/* debug */
	div#debug_area {
		display: none; margin-top: 30px; margin-left: 10px;
	}
	div#stat_area {
		border: 1px solid #444; width: 640px; padding: 5px; margin-bottom: 10px; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box;
	}
	div#result_area {
		border: 1px solid #444; width: 640px; height: 320px; padding: 5px; margin-bottom: 10px; overflow: scroll; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box;
	}
@media only screen and (max-width:600px) {
	div#stat_area,
	div#result_area {
		width: 100%;
	}
}
/* err icon */
	span.err {
		width: auto; height: auto; float: right; color: #fff; font-size: 10px; background-color: #de002d; padding: 1px 3px; margin: 0;
	}

/* btnSubmit */
	.btnSubmit {
		font-size: 16px; line-height: 22px; letter-spacing: 2px; text-align: center; margin-bottom: 40px; clear: both;
	}
	.btnSubmit a,
	.btnSubmit input[type=button] {
		background-color: #117fc2; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; padding: 20px 25px 20px 50px; color: #fff; text-decoration: none; border: none; cursor: pointer; background: transparent url(../imgs/icon-next.png) no-repeat 8% 50%; display: inline-block;
	}
	.btnSubmit a span {
		display: none;
	}
	.btnSubmit a span.txt02 {
		display: block;
	}
	.btnSubmit a span.txt01 {
		display: none;
	}
	.btnSubmit a.yet span.txt01 {
		display: block;
	}
	.btnSubmit a.yet span.txt02 {
		display: none;
	}
	.btnSubmit a.yet {
		background-color: #999999; cursor: default;
	}	
@media only screen and (max-width:599px) {
	.btnSubmit {
		font-size: 12px; line-height: 20px;
	}
}

/* confirm */
	#confirm .selectbox {
		width: auto; background-image: none; border: 0; border-radius: 0; margin: 5px 5px 5px 0;
	}
	#confirm .parts_addressset .inner {
		padding-top: 10px;
	}
	#confirm .parts_addressset .inner span {
		padding-top: 0;
	}
	#confirm .parts {
		padding-top: 20px;
	}
@media only screen and (max-width:599px) {
	#confirm .parts_addressset .inner span {
		color: #999999;
	}
}