@charset "UTF-8";

@import url(base.css);
@import url(textsettings.css);
@media all and (min-width:769px) {

	/* ------------------------------------------------------------ */
	/* 基本、レイアウト指定 */
	/* ------------------------------------------------------------ */

	* html body { background: url(null) fixed; }
	body { margin: 0; padding: 0; 
	}
	html { overflow-x: hidden;
  background: url(/plusguardform/img/bg-main.png);
  position: relative;
  z-index: 1;
    -webkit-box-shadow: 0px -2px 10px 0px rgba(0,0,0,0.3) inset;
	box-shadow: 0px -2px 10px 0px rgba(0,0,0,0.3) inset;
}

	/* ------------------------------------------------------------ */
	/* リンク色 */
	/* ------------------------------------------------------------ */

	a:link { color: #0145A4; ext-decoration: none;}
	a:visited { color: #0145A4; text-decoration: none;}
	a:hover { color: #0145A4; text-decoration: underline;}
	a:active { color: #0145A4; text-decoration: none;}

	/* ------------------------------------------------------------ */
	/* ヘッダー */
	/* ------------------------------------------------------------ */

	header { margin: 0 auto; padding: 20px 0; width: 1000px;}
	header h2 { margin-bottom: 20px; font-size:15px;}
	header h2 img { width:400px; margin-right:50px;}
	header h3 { margin-bottom: 10px; font-size: 12px; font-weight: normal;}
	header ul li { margin-bottom: 20px; float: left;}
	header .box { margin-bottom: 20px; padding: 15px; border: 1px solid #d2d2d2; background-color: #fcf6dc;}

	/* ------------------------------------------------------------ */
	/* コンテンツ */
	/* ------------------------------------------------------------ */
	
	section {	margin: 0 auto; width: 1000px;}

	/* ------------------------------------------------------------ */
	/* フォーム部分 */
	/* ------------------------------------------------------------ */
	section.form h4 { margin-bottom: 20px;}

	/* -----------　ttl_同行者情報　アコーティオン用　------------- */
	section.form.travel_companions h3.infoTitle,
	h4.infoTitle{
			background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #fd7813), color-stop(0.00, #f39800));
			background: -webkit-linear-gradient(top, #f39800 0%, #fd7813 100%);
			background: -moz-linear-gradient(top, #f39800 0%, #fd7813 100%);
			background: -o-linear-gradient(top, #f39800 0%, #fd7813 100%);
			background: -ms-linear-gradient(top, #f39800 0%, #fd7813 100%);
			background: linear-gradient(top, #f39800 0%, #fd7813 100%);
		color:#FFF;
		font-size:20px;
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
		margin-bottom:20px;
		}
	section.form.travel_companions h3.infoTitle:not(:target){ background: #f39800\9; /* IE9 */ }
	h4.infoTitle:not(:target){ background: #f39800\9; /* IE9 */ }


	/* -----------　アコーティオン用　------------- */
	section.form.travel_companions h3.infoTitle{
		cursor:pointer;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		}

	/* -----------　ttl_ダイビング付帯の商品------------- */
	section.main_traveler h4.licenceTitle,
	section.travel_companions h4.licenceTitle,
	section.confirm h4.licenceTitle{
			background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #256945), color-stop(0.00, #4D814D));
			background: -webkit-linear-gradient(top, #4D814D 0%, #256945 100%);
			background: -moz-linear-gradient(top, #4D814D 0%, #256945 100%);
			background: -o-linear-gradient(top, #4D814D 0%, #256945 100%);
			background: -ms-linear-gradient(top, #4D814D 0%, #256945 100%);
			background: linear-gradient(top, #4D814D 0%, #256945 100%);
		color:#FFF;
		font-size:20px;
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
		margin-bottom:20px;
		}
	section.form h4.licenceTitle:not(:target){ background: #256945\9; /* IE9 */ }

	/* -----------　アコーティオン用　------------- */
	section.main_traveler h4.licenceTitle,
	section.travel_companions h4.licenceTitle{
		cursor:pointer;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		}


	section.form table { margin-bottom: 40px; width: 100%; border-top: 1px solid #d2d2d2;}
	section.form table th {
		padding: 20px 25px;
		width: 170px;
		color: #433f39;
		font-size: 13px;
		text-align: center;
		line-height: 15px;
		font-weight: normal;
		vertical-align: middle;
		background-color: #D8E6F1;
		position: relative;
		border-bottom: 1px solid #d2d2d2;
	}
	section.form .licence-form table th{ background-color: #D2EAC7 !important;}
	section.form .licence-form table { display: none; }
	section.form .licence-form table td.style01 { width: 792px;}

	section.form table th img { position: absolute; display: block; left: 84px;}
	section.form table th img.mark01 { position: absolute; display: block; left: 55px;}

	section.form table td {
		padding: 20px 25px;
		font-size: 14px;
		line-height: 1.5em;
		vertical-align: middle;
		position: relative;
		border-bottom: 1px solid #d2d2d2;
		background-color:#ffffff;
	}

	section.form table td img { top: -3px; position: relative;}
	section.form table td span { font-size: 12px; }
	section.form table td p { color: #ed0000; font-size: 12px; font-weight: bold; line-height: 16px;}

	section.form.confirm table td span { font-size: 14px;}

	section.form label input[type=text] { margin: 5px 0; padding: 0 8px; height: 28px; border: 1px solid #d1d1d1; background: #fedbdb; border-radius: 5px; font-size:18px;}
	section.form label .picker_date_text { margin: 0 10px 0 0!important; width: 100px;}

	section.form label .w60 { width: 60px;}
	section.form label .w100 { width: 100px;}
	section.form label .w150 { width: 150px;}
	section.form label .w220 { width: 220px;}
	section.form label .w240 { width: 240px;}
	section.form label .w300 { width: 300px;}

	section.form textarea { width: 730px; height: 100px;}

	section.form select {
		margin-right: 10px;
		padding: 0 8px;
		width: 200px;
		height: 30px;
		font-size: 14px;
		border-radius: 5px;
		border: 1px solid #d1d1d1;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		text-indent: 0.01px;
		text-overflow: '';
		background: #fedbdb url(../img/select_arrow.png) no-repeat 97%;
	}

	section.form select.come { margin-top: 8px;}

	select::-ms-expand { display: none;}

	input[type=checkbox],
	input[type=radio] {
		display: none;
	}

	.checkbox {
		box-sizing: border-box;
		-webkit-transition: background-color 0.2s linear;
		transition: background-color 0.2s linear;
		position: relative;
		display: inline-block;
		margin: 0 0 0 0;
		padding: 10px 10px 10px 40px;
		border-radius: 8px;
		vertical-align: middle;
		cursor: pointer;
	}

	.checkbox:hover { background-color: #fcf6dc;}
	.checkbox:hover:after { border-color: #f54242;}
	span.check:after {
		-webkit-transition: border-color 0.2s linear;
		transition: border-color 0.2s linear;
		position: absolute;
		top: 50%;
		left: 10px;
		display: block;
		margin-top: -14px;
		width: 22px;
		height: 22px;
		border: 2px solid #bbb;
		border-radius: 6px;
		content: '';
	}

	span.check:before {
		-webkit-transition: opacity 0.2s linear;
		transition: opacity 0.2s linear;
		position: absolute;
		top: 50%;
		left: 17px;
		display: block;
		margin-top: -14px;
		width: 8px;
		height: 16px;
		border-right: 4px solid #f54242;
		border-bottom: 4px solid #f54242;
		content: '';
		opacity: 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	input[type=checkbox]:checked + span.check:before {
		opacity: 1;
	}

	.checkboxpp {
		color: #333333;
		font-size: 16px;
		box-sizing: border-box;
		-webkit-transition: background-color 0.2s linear;
		transition: background-color 0.2s linear;
		position: relative;
		display: inline-block;
		margin: 0 0 0 0;
		padding: 10px 10px 10px 40px;
		border-radius: 8px;
		vertical-align: middle;
		cursor: pointer;
	}

	.checkboxpp:hover { background-color: #fcf6dc;}
	.checkboxpp:hover:after { border-color: #f54242;}
	.checkboxpp:after {
		-webkit-transition: border-color 0.2s linear;
		transition: border-color 0.2s linear;
		position: absolute;
		top: 50%;
		left: 10px;
		display: block;
		margin-top: -14px;
		width: 22px;
		height: 22px;
		border: 2px solid #333333;
		border-radius: 6px;
		content: '';
	}

	.checkboxpp:before {
		-webkit-transition: opacity 0.2s linear;
		transition: opacity 0.2s linear;
		position: absolute;
		top: 50%;
		left: 17px;
		display: block;
		margin-top: -14px;
		width: 8px;
		height: 16px;
		border-right: 4px solid #f54242;
		border-bottom: 4px solid #f54242;
		content: '';
		opacity: 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	input[type=checkbox]:checked + .checkboxpp:before { opacity: 1; }

	.radio {
		box-sizing: border-box;
		-webkit-transition: background-color 0.2s linear;
		transition: background-color 0.2s linear;
		position: relative;
		display: inline-block;
		margin: 0 0 0 0;
		padding: 10px 10px 10px 16px;
		border-radius: 8px;
		vertical-align: middle;
		cursor: pointer;
	}

	.radio:hover {
		background-color: #fcf6dc;
	}

	.radio:hover:after {
		border-color: #f54242;
	}

	span.radio:after {
		-webkit-transition: border-color 0.2s linear;
		transition: border-color 0.2s linear;
		position: absolute;
		top: 50%;
		left: -6px;
		display: block;
		margin-top: -14px;
		width: 22px;
		height: 22px;
		border: 2px solid #bbb;
		border-radius: 12px;
		content: '';
	}

	span.radio:before {
		-webkit-transition: opacity 0.2s linear;
		transition: opacity 0.2s linear;
		position: absolute;
		top: 50%;
		left: 0;
		display: block;
		margin-top: -8px;
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background-color: #3e3e3e;
		content: '';
		opacity: 0;
	}

	input[type=radio]:checked + span.radio:before {
		opacity: 1;
	}


	.balloon {
		display: none;
		margin-bottom: 10px;
		padding: 2px 5px;
		color: #FFF;
		width: auto;
		font-size: 13px;
		text-align: center;
		top: -20px;
		position: absolute;
		background: #f67283;
		border-radius: 5px;
		z-index: 100;
	}

	.balloon:after {
		content: '';
		position: absolute;
		border-top: 10px solid #f67283;
		border-right: 5px solid transparent;
		border-left: 5px solid transparent;
		bottom: -9px;
		left: 10px;
	}

	.balloon2 {
		margin-bottom: 10px;
		padding: 2px 5px;
		color: #FFF;
		width: auto;
		font-size: 13px;
		text-align: center;
		top: -20px;
		position: absolute;
		background: #f67283;
		border-radius: 5px;
		z-index: 100;
	}

	.balloon2:after {
		content: '';
		position: absolute;
		border-top: 10px solid #f67283;
		border-right: 5px solid transparent;
		border-left: 5px solid transparent;
		bottom: -9px;
		left: 10px;
	}
	.validate-ok {
		background-color: #fff !important;
	}

	.validate-error {
		background-color: #fedbdb !important;
	}

	.radio.validate-ok:hover {
		background-color: #fcf6dc !important;
	}

	.radio.validate-ok:hover:after {
		border-color: #f54242 !important;
	}

	.radio.validate-error:hover {
		background-color: #fcf6dc !important;
	}

	.radio.validate-error:hover:after {
		border-color: #f54242 !important;
	}

	.sendbtn { margin-bottom: 20px; text-align: center;}

	.sendbtn input {
		width: 312px;
		height: 58px;
		border: none;
		cursor: pointer;
		background-repeat: no-repeat;
	}

	#djconfirm { background-image: url(../img/djconfirm.png);}
	#confirm { background-image: url(../img/form_btn_01.png);}
	#back { background-image: url(../img/form_btn_02.png);}
	#commit { background-image: url(../img/form_btn_03.png);}

	#error_info {
		display: none;
		width: 600px;
		border: 1px solid #bbb;
		margin: 50px auto 20px auto;
		padding: 15px;
		background: #ffffcc;
	}

	#error_info li {
		color: #cc0000;
		font-size: 16px;
		margin: 5px 0;
		padding-left: 20px;
		background: url(../img/bullet_error.gif) no-repeat;
		background-position: left center;
	}

	.confirm #area { margin-right: 20px;}
	.confirm #comeDate1 { margin-right: 20px;}
	.confirm #comeDate2 { margin-right: 20px;}

	.confirm #lastName {margin-right: 20px; }

	.sp-only { display: none !important;}

	/* ------------------------------------------------------------ */
	/* トラベルプラスカード共済利用規約 */
	/* ------------------------------------------------------------ */
	section.form .ppbox {
		margin-bottom: 15px;
		padding: 20px;
		height: 120px;
		font-size: 12px;
		overflow: scroll;
		background-color: #FFF;
	}

	section.form .text {
		margin-bottom: 10px;
		font-size: 12px;
	}

	section.form .fix {
		padding: 20px;
		font-size: 12px;
		text-align: center;
		border: 5px solid #FFF;
		background-color: #fedbdb;
	}

	section.form .fix p {
		margin-bottom: 10px;
		font-size: 14px;
		color: #ed0000;
	}

.linkPDF{ padding-bottom:20px;}
.linkPDF a{ background: url(../img/link_blank.png) no-repeat right center;
  padding-right:15px;
}




	/* ------------------------------------------------------------ */
	/* 個人情報の取り扱い部分 */
	/* ------------------------------------------------------------ */
	section.privacy {
		margin-bottom: 30px;
		padding: 20px;
		width: 960px;
		background-color: #f4f4f4;
	}

	section.privacy h4 {
		margin-bottom: 10px;
		color: #0f3381;
		font-size: 16px;
		text-align: center;
	}

	section.privacy .ppbox {
		margin-bottom: 15px;
		padding: 20px;
		height: 120px;
		font-size: 12px;
		overflow: scroll;
		background-color: #FFF;
	}

	section.privacy .text {
		margin-bottom: 10px;
		font-size: 12px;
	}

	section.privacy .fix {
		padding: 20px;
		font-size: 12px;
		text-align: center;
		border: 5px solid #FFF;
		background-color: #fedbdb;
	}

	section.privacy .fix p {
		margin-bottom: 10px;
		font-size: 14px;
		color: #ed0000;
	}




	/* ------------------------------------------------------------ */
	/* 登録完了画面 */
	/* ------------------------------------------------------------ */

	h4.completeTitle{
			background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #2F74B1), color-stop(0.00, #4A84FF));
			background: -webkit-linear-gradient(top, #4A84FF 0%, #2F74B1 100%);
			background: -moz-linear-gradient(top, #4A84FF 0%, #2F74B1 100%);
			background: -o-linear-gradient(top, #4A84FF 0%, #2F74B1 100%);
			background: -ms-linear-gradient(top, #4A84FF 0%, #2F74B1 100%);
			background: linear-gradient(top, #4A84FF 0%, #2F74B1 100%);
		color:#FFF;
		font-size:20px;
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
		}

h4.completeTitle:not(:target)  
 { background: #3C7BD6\9; /* IE9 */ }



}