@charset "UTF-8";

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

	/* ------------------------------------------------------------ */
	/* 基本、レイアウト指定 */
	/* ------------------------------------------------------------ */
	* html body {
		background: url(null) fixed;
	}

	body {
		margin: 0 auto;
		padding: 0;
		color: #656565;
		overflow-x: hidden;
	}

	html {
		width: 100%;
		overflow-x: hidden;
	}

	/* ------------------------------------------------------------ */
	/* リンク色 */
	/* ------------------------------------------------------------ */
	a:link {
		color: #0145A4;
		text-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: 100%;
	}

	header h2 {
		margin: 0 auto 20px;
		width: 96%;
		text-align: center;
	}

	header h2 img {
		width: 100%;
	}

	header h3 {
		margin: 0 auto;
		font-size: 15px;
		width: 98%;
		clear: both;
		font-weight: normal;
	}

	/*header h4 {
		padding: 1% 0;
		text-indent: -9999px;
		background: url(../img/title_form_07.png) center center no-repeat;
		background-size: cover;
	}
	*/

	header .box {
		margin-bottom: 20px;
		padding: 15px;
		border: 1px solid #d2d2d2;
		background-color: #fcf6dc;
	}

	header ul {
		margin: 0 auto 15px;
		width: 100%;
	}
	header ul li{
		margin-bottom:20px;
		float:left;
		width:33%;
	}

	header ul li.flow_01_off img{
		width:100%;
	}
	header ul li.flow_01_on img{
		width:100%;
	}
	header ul li.flow_02_off img{
		width:100%;
	}
	header ul li.flow_02_on img{
		width:100%;
	}
	header ul li.flow_03_off img{
		width:100%;
	}
	header ul li.flow_03_on img{
		width:100%;
	}
	header ul li.flow_04_off img{
		width:100%;
	}
	header ul li.flow_04_on img{
		width:100%;
	}
	/*
	header ul li.flow_01_off {
		padding: 2% 0;
		width: 100%;
		text-indent: -9999px;
		background: url(../img/sp_flow_01_off.png) center center no-repeat;
		background-size: auto 100%;
		display: none;
	}

	header ul li.flow_01_on {
		padding: 2% 0;
		width: 100%;
		text-indent: -9999px;
		background: url(../img/sp_flow_01_on.png) center center no-repeat;
		background-size: auto 100%;
	}

	header ul li.flow_02_off {
		padding: 2% 0;
		width: 100%;
		text-indent: -9999px;
		background: url(../img/sp_flow_02_off.png) center center no-repeat;
		background-size: auto 100%;
		display: none;
	}

	header ul li.flow_02_on {
		padding: 2% 0;
		width: 100%;
		text-indent: -9999px;
		background: url(../img/sp_flow_02_on.png) center center no-repeat;
		background-size: auto 100%;
	}

	header ul li.flow_03_off {
		padding: 2% 0;
		width: 100%;
		text-indent: -9999px;
		background: url(../img/sp_flow_03_off.png) center center no-repeat;
		background-size: auto 100%;
		display: none;
	}

	header ul li.flow_03_on {
		padding: 2% 0;
		width: 100%;
		text-indent: -9999px;
		background: url(../img/sp_flow_03_on.png) center center no-repeat;
		background-size: auto 100%;
	}

	header ul li.flow_04_off {
		padding: 2% 0;
		width: 100%;
		text-indent: -9999px;
		background: url(../img/sp_flow_04_off.png) center center no-repeat;
		background-size: auto 100%;
		display: none;

	}

	header ul li.flow_04_on {
		padding: 2% 0;
		width: 100%;
		text-indent: -9999px;
		background: url(../img/sp_flow_04_on.png) center center no-repeat;
		background-size: auto 100%;

	}
	*/

	/* ------------------------------------------------------------ */
	/* コンテンツ */
	/* ------------------------------------------------------------ */
	section {
		margin: 0 auto;
		padding: 0;
		width: 100%;
	}

	/* ------------------------------------------------------------ */
	/* フォーム部分 */
	/* ------------------------------------------------------------ */
section.form h4 {
		margin-bottom: 10px;
		/*padding: 1% 0;
		text-indent: -9999px;
		background: url(../img/title_form_03.png) center center no-repeat;
		background-size: cover;*/
	}


	/* -----------　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:120%;
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
		margin-bottom:20px;
		}


	/* -----------　アコーティオン用　------------- */
	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:120%;
		height:auto;
    padding: 5px 15px;
		margin-bottom:20px;
		}
	span.mark{ display:block; float:left;}
span.indentTxt{	 display:block;
padding-left: 1em;
}

	/* -----------　アコーティオン用　------------- */
	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 h4.come {
		margin-bottom: 10px;
		padding: 1% 0;
		text-indent: -9999px;
		background: url(../img/title_form_08.png) center center no-repeat;
		background-size: cover;
	}

	section.form table {
		margin-bottom: 40px;
		width: 100%;
		border-top: 1px solid #d2d2d2;
	}

	section.form table th {
		padding: 10px 2%;
		width: 98%;
		color: #433f39;
		height: 30px;
		font-size: 18px;
		text-align: left;
		line-height: 30px;
		font-weight: normal;
		vertical-align: middle;
		display: inline-block;
		background-color:#D8E6F1;
		border-bottom: 1px solid #d2d2d2;
	}

	section.form table th img {
		margin: 0 0 8px 15px;
	}

	section.form table td {
		padding: 10px 2%;
		width: 98%;
		font-size: 15px;
		line-height: 1.8em;
		vertical-align: middle;
		position: relative;
		display: block;
		padding-bottom: 22px;
		border-bottom: 1px solid #d2d2d2;
	}

	section.form table td img {
		top: -3px;
		position: relative;
	}

	section.form table td span {
		font-size: 15px;
		display: block;
	}

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

	section.form table td p {
		color: #ed0000;
		font-size: 12px;
		font-weight: bold;
		line-height: 16px;
	}

	section.form label input[type=text] {
		margin: 5px 0;
		padding: 0 8px;
		height: 38px;
		border: 1px solid #d1d1d1;
		background: #fedbdb;
		border-radius: 5px;
	}

	section.form label .picker_date_text {
		margin: 0 10px 0 0!important;
		width: 100px;
	}

	section.form label {
		height: 38px;
		font-size: 16px;
		line-height: 16px;
		margin-bottom: 5px;
	}

	section.form label .w60 {
		width: 60px;
	}

	section.form label .w100 {
		width: 100px;
	}

	section.form label .w150 {
		width: 60%;
	}

	section.form label .w220 {
		width: 90%;
	}

	section.form label .w240 {
		width: 240px;
	}

	section.form label .w300 {
		width: 90%;
	}

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

	section.form select {
		padding: 0 2%;
		width: 96%;
		height: 40px;
		font-size: 16px;
		border-radius: 5px;
		border: 1px solid #d1d1d1;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		background: #fedbdb url(../img/select_arrow.png) no-repeat 97%;
		margin-bottom:5px;
	}

	section.form select.first {
		margin-bottom: 12px;
	}

	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: 14px;
		box-sizing: border-box;
		-webkit-transition: background-color 0.4s 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 20px 10px 16px;
		border-radius: 8px;
		vertical-align: middle;
		cursor: pointer;
	}


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

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

	span.radio{ float: left;}

	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: -30%;
		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;
	}

	.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: 80%;
		height: 58px;
		border: none;
		cursor: pointer;
		background-size: 100% 58px;
		background-repeat: no-repeat;
		margin: 0 auto 8px;
	}

	#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: 90%;
		border: 1px solid #bbb;
		margin: 0 auto 20px auto;
		padding: 15px;
		background: #ffffcc;
	}

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

	img.calendarButton {
		height: 34px;
		width: 160px;
		margin: 5px 0 0 0;
	}

	header h4.complete01 {
		padding: 1% 0;
		text-indent: -9999px;
		background: url(../img/title_form_11.png) center center no-repeat;
		background-size: cover;
	}

	header h4.complete02 {
		padding: 1% 0;
		text-indent: -9999px;
		background: url(../img/title_form_12.png) center center no-repeat;
		background-size: cover;
	}

	.confirm #tripMonth {
		display: inline;
	}

	.confirm #tripMonthDate {
		display: inline;
	}

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

	.confirm #firstName {
		display: inline;
	}

	.pc-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: 10px 5px;
		font-size: 12px;
		text-align: center;
		border: 5px solid #FFF;
		/*	background-color:#fedbdb;*/
		background-color: #ffffff;
	}

	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;
	text-decoration:underline;
}
	/* ------------------------------------------------------------ */
	/* 個人情報の取り扱い部分 */
	/* ------------------------------------------------------------ */
	section.privacy {
		margin-bottom: 20px;
		padding: 2%;
		width: 96%;
		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: 10px 5px;
		font-size: 12px;
		text-align: center;
		border: 5px solid #FFF;
		/*	background-color:#fedbdb;*/
		background-color: #ffffff;
	}

	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;
		}

}