@charset "utf-8";
/*-----------------------------------------  form css  ------------------------------------------*/
/** container **/
	body #container {
		background-color: #fff;
		padding: 80px 0 60px;
		color: #333;
	}

/** pankuzuNav **/	
	body #pankuzuNav {
		color: #666;
	}

/** contentTitle **/
	body .contentTitle {
		margin-bottom: 35px;
		color: #333;
	}

/** stepBox **/
	body .stepBox {
		/*display: flex;
		justify-content: flex-end;
		margin-bottom: 40px;*/
		margin-left: auto;
		margin-right: 0;
		width: 300px;
	}
	body .stepBox ul li { float: left; }
	body .stepBox ul li div {
		display: table-cell; width: 120px; height: 120px; vertical-align: middle; -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; -ms-transition: .5s; transition: .5s; z-index: 10; background-color: #44485b;  border-radius: 50%; font-size: 14px; line-height: 24px; text-align: center; color: #fff;
	}
	body .stepBox ul li div {
		width: 70px; height: 70px;
	}
	body .stepBox ul li div.on {
		background-color: #be480a;
	}
	body .stepBox ul li div.off {
		background-color: #ccc;
	}
	body .stepBox ul li div.stepIcon {
		display: table-cell; width: 70px; height: 120px; vertical-align: middle; -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; -ms-transition: .5s; transition: .5s; z-index: 10; background: none;  border-radius: 0; font-size: 40px; line-height: 24px; color: #9ea1af; font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',
 Meiryo, sans-serif;
	}
	body .stepBox ul li div.stepIcon {
		width: 35px; height: 70px; font-size: 20px; line-height: 24px;
	}
	body .stepBox ul li div span {
		display: block;
	}
	body .stepBox ul li div span.sub {
		display: none;
	}

/** inputArea **/
	body #inputArea {
		background-color: #f9f9f9;
		padding: 4px;
		font-size: 16px;
	}
	body #inputArea > p{
		padding: 1.3rem 1rem .5rem;
		color: #707070;
	}
	body #inputArea dl {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 5px; width: 100%; background-color: #f2f2f2; clear: both;
	}
	body #inputArea dl dt,
	body #inputArea dl dd {
		box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box;
		position: relative;
	}
	body #inputArea dl dt { 
		width: 25%; /*float: left;*/ padding: 16px;
	}
	body #inputArea dl dd { 
		width: 75%; /*float: right;*/ background-color: #fff; padding: 16px; 
	}
	body #inputArea dl dd label{ 
		line-height: 1.8;
	}
	body #inputArea dl dd label:has(input[type="checkbox"][name^="form[AD_EXTEND"]),
	body #inputArea dl:not(.kibou) dd label:has(input[type="radio"]:not([name^="form[AD_SEX]"]):not([class="AD_IMAGE_CHARACTER-sel"])){
		display: flex;
		align-items: baseline;
		line-height: 1.4;
		margin-bottom: .3rem;
	}
		body #inputArea dl dd input { 
		border-width: 1px;
		box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box;
	}
	#selected_bukken{
		font-weight: bold;
	}
	#inputArea dl dd input, #inputArea dl select{
		padding: 9px 10px;
		font-size: 16px;
		margin-bottom: 0.5em;
		border-width: 1px;
	}
	/** senior input font-size **/
	form.senior #inputArea dl dd input, form.senior #inputArea dl select{
		font-size: 160%;
		margin-bottom: 0.5em;
	}
　
	body #inputArea dl dd ul li { 
		font-size: 12px; line-height: 18px; float: left; width: 50%; margin-bottom: 5px;
	}
	body #inputArea dl dd .orangeTxt {
		margin-bottom: 5px;
	}
	body #inputArea .required-mark{
		display: block;
		background-color: #fe3e20;
		color: #fff;
		border-radius: 5px;
		font-size: 10px;
		font-weight: normal;
		width: fit-content;
		padding: 1px 4px;
	}
	body #inputArea dl dt span, body #inputArea dl dd span {
		display: inline-block;
		color: #4a4a4a;
		font-size: 12px;
		line-height: 1.6;
		font-weight: normal;
	}
	body #inputArea dl dd .pref_bukkens label span {
		color: #ea5404;
		margin-left: .5em;
	}
	body #inputArea dl dt span.orangeTxt{
		color: #ea5404;
	} 
	body #inputArea dl dd p.description {
		margin-bottom: 1rem;
	}
	
	body #inputArea dl dd textarea {
		box-sizing: border-box;
		border: 1px solid #4a4a4a;
		width: 100%;
		height: 8rem;
		padding: 9px 10px;
		font-family: inherit;
	}

	/** kibou only reserve **/
	body #inputArea dl.kibou dd strong{
		font-weight: bold;
	}
	body #inputArea dl.kibou dd span{
		font-size: inherit;
		font-weight: inherit;
	}
	body #inputArea dl.kibou dd .txtred{
		color: #ea5404;
	}

  /** KIBOU only form-introduction reserve **/
  body #inputArea dl.kibou input#KIBOU {
    width: 100%;
  }

	/*
	body #inputArea dl.kibou dd div.inner {
		margin-bottom: 5px;
	}
	body #inputArea dl.kibou dd div.inner br {
		display: none;
	}
	*/
	/** address **/
	body #inputArea dl.address input {
		width: 100%;
	}
	/** tel **/
	body #inputArea dl.tel input {
		width: 14%;
	}
	/** mail **/
	body #inputArea dl.email input {
		width: 100%;
	}
	body #inputArea dl.email dd br {
		display: none;
	}

  /** BUKKEN only form-introduction mail **/
  body #inputArea input#BUKKEN {
    width: 100%;
  }


	/** name&furikana **/
	body #inputArea dl.name dd div,
	body #inputArea dl.furikana dd div {
		float: left;
		margin-right: 20px;
		margin-bottom: 5px;
	}
	body #inputArea dl.name dd div span,
	body #inputArea dl.furikana dd div span{
		display: block;
		font-size: 12px;
	}
	body #inputArea dl.birth dd select + select{
		margin-left: 1rem;
	}

	body #inputArea #AD_NINZU{
		width: 8em;
	}
	body #inputArea #AD_NINCHI_ETC{
		margin-left: 1rem;
		width: 15rem;
	}
  body #inputArea #about{
		position:absolute;
    left:-9999px;
    top: -9999px;
	}
	body #inputArea hr{
		margin: 32px 2rem;
	}

	body #inputArea .btn-privacypolicy a{
		display: block;
		background: transparent linear-gradient(180deg, #FFF4E9 0%, #FFD7B8 100%) 0% 0% no-repeat padding-box;
		border: 1px solid #FF0000;
		border-radius: 5px;
		margin: 1rem 20px;
		padding: 12px;
		text-align: center;
		color: #1C1C1C;
		font-weight: bold;
		text-decoration: none;
	}
	body #inputArea .btn-privacypolicy a:hover{
		opacity: .8;
	}

	body #inputArea .area-agree{
		background: transparent 0% 0% no-repeat padding-box;
		border-radius: 3px;
		margin: 1rem 20px;
		padding: 12px;
	}
	body #inputArea .area-agree.invalid{
		background-color: #FFDCDC;
	}
	body #inputArea .area-agree .required-mark{
		display: inline-block;
	}
	body #inputArea .area-agree input{
		margin-left: 2rem;
	}

	body #inputArea #requiredmessage{
		background: #FF0000 0% 0% no-repeat padding-box;
		padding: 1rem 2rem;
		color: #fff;
		margin: 3rem auto;
		text-align: center;;
	}
	#requiredmessage span.output{
		color: #FCF756;
	}
	body #inputArea span.toomuch{
		font-size: .875rem;
	}

	body #inputArea .submitBox{
		margin: 4rem auto;
	}

	body #inputArea :valid{
		/*background-color: inherit;*/
	}
	body #inputArea :invalid{
		background-color: #FFE8E8 !important;
	}
	.error-text{
		cursor: pointer;
		text-decoration: underline;
		text-underline-offset: 3px;
	}


	
  /** osusume **/
 /* 
  body #osusume-bukken{
    margin-top: 60px;
  }
  */
  body #osusume-bukken h3{
    margin-bottom: 1em;
    font-size: 125%;
    text-align: center;
  }
  body #osusume-bukken h3 span{
    display: inline-block;
    margin-right:1em;
  }
  body #osusume-bukken .osusume{
		display: flex;
    align-items: center;
	}
  body #osusume-bukken .osusume > div{
		margin: 10px auto;
	}
  body #osusume-bukken .osusume > div:nth-child(2){
    margin-left: 10px;
	margin-right: 10px;
	flex-shrink: 0;
  }
  body #osusume-bukken .osusume > div:nth-child(3){
    flex-grow: 1;
  }
  body #osusume-bukken .osusume > div:nth-child(3) p:nth-child(1){
	font-weight:bold;
  }
  body #osusume-bukken .osusume > div:nth-child(3) p:nth-child(2){
	font-size:12px;
  }
  body #osusume-bukken .osusume > div:nth-child(3) p:nth-child(3){
	font-size:12px;
  }
  body #osusume-bukken .osusume img{
		/*width: 130px;*/
    height: 90px;
	}

	/** ext add item **/
	/** senior eventform **/
	form.senior #inputArea dl.sanka input{
		width: 10%;
	}
	form.senior #inputArea dl.mail input{
		width:100%;
	}
	form.senior #inputArea dl.mail dd br{
		display: inline;
	}
	
	/** submitBox **/
	body .submitBox {
		width: 60%; margin: 0 auto;
	}
	body .submitBox.skip_enq_confirm {
		width: 45%;
	}
	body .submitBox ul,
	body .submitBox p {
		width: 100%;
		background-color: #303340; padding: 20px; border-radius: 5px; -webkit-border-radius: 5px; margin: 0 auto 20px; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box;
	}
	body .submitBox ul li {
		width: 49%; float: left;
	}
	body .submitBox.skip_enq_confirm ul li {
		width: 100%;
	}
	body .submitBox ul li a {
		width: 100%; padding: 10px;
	}
	body .submitBox ul li:first-child {
		margin-right: 2%;
	}
	
	body .contactBox {
		width: 70%; margin: 0 auto 20px; padding: 10px; text-align: center; border: 1px dotted #be480a; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box;
	}
	
	body .errorTip {
		position: absolute; color: #ff0000; bottom: -20px; left: 7%; z-index: 1000; box-shadow: 5px 8px 12px 5px rgba(0,0,0,0.3); font-size: 12px;
	}
	body .errorTip span {
		position: relative; border: 1px solid #d1d1d1; padding: 11px 10px 10px 40px; background: #fff url(../imgs/icon-required.gif) no-repeat 10px 50%; border-radius: 3px; -webkit-border-radius: 3px;
	}
	body .errorTip span:after, body .errorTip span:before {
		bottom: 100%; left: 15%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;
	}

	body .errorTip span:after {
		border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 10px; margin-left: -10px;
	}
	body .errorTip span:before {
		border-color: rgba(209, 209, 209, 0); border-bottom-color: #d1d1d1; border-width: 11px; margin-left: -11px;
	}

	

	/********  @media Area  ********/

/* @media 1199px */
	@media only screen and (max-width:1199px) {
		body #container {
			padding: 20px 0 60px;
		}
	}
/* @media 960px */
	@media only screen and (max-width: 960px) {
		/*
		body #inputArea dl.name dd div, body #inputArea dl.furikana dd div{
			width: calc(50% - 20px);
		}
		body #inputArea dl.name dd input, body #inputArea dl.furikana dd input{
			width: 100%;
		}
		*/
	}
/* @media 900px */
	@media only screen and (max-width:900px) {
		body .stepBox ul li div {
			width: 70px; height: 70px;
		}
		body .stepBox ul li div.stepIcon {
			width: 35px; height: 70px; font-size: 20px; line-height: 24px;
		}
		body .stepBox ul li div span {
			display: none;
		}
		body .stepBox ul li div span.sub {
			display: block;
		}
	}
/* @media 768px */
	@media only screen and (max-width:768px) {		
		/*body #inputArea dl {
			font-size: 12px; line-height: 18px;
		}*/
		body #inputArea dl dd ul li { 
			float: none; width: 100%;
			 letter-spacing: 0;
		}
		/*
		body #inputArea dl.kibou dd div.inner select {
			width: auto;
		}
		body #inputArea dl.kibou dd div.inner br {
			display: block;
		}
		*/
		body #inputArea dl.name dd div,
		body #inputArea dl.furikana dd div {
			float: none;
			margin-right: 0;
		}

		body #inputArea dl.name dd div, body #inputArea dl.furikana dd div{
			width: auto;
		}
	}

	
/* @media 320px */
	@media only screen and (max-width:600px) {
		body .stepBox {
			width: 200px;
		}
		body .stepBox ul li div {
			margin-bottom: 5px;
		}
		body .stepBox ul li div {
			width: 45px; height: 45px; font-size: 10px;
		}
		body .stepBox ul li div.stepIcon {
			width: 18px; height: 45px; font-size: 12px; line-height: 24px;
		}
		body .stepBox ul li div span {
			display: none;
		}
		body .stepBox ul li div span.sub {
			display: block;
		}
		
		body #inputArea .rdo-wrap label { 
			margin-bottom: .5em;
			display: inline-block;;
		}
		body #inputArea dl{ 
			display: block;
		}
			body #inputArea dl dt { 
			width: 100%; float: none;
		}

		body #inputArea .required-mark{
			display: inline-block;
			margin-left: .5rem;
		}
		body #inputArea dl dd { 
			width: 100%; float: none; padding: 15px;
		}
		body #inputArea dl dd select {
			width: 100%;
		}
		body #inputArea dl dd #day1 select,
		body #inputArea dl dd #day2 select {
			width: calc(33% - 2.5rem);
		}
		body #inputArea dl dd select#AD_BIRTHDAY_Y,body #inputArea dl dd select#AD_BIRTHDAY_M,body #inputArea dl dd select#AD_BIRTHDAY_D{
			width: calc(33% - 2rem);
		}
		body #inputArea dl.birth dd select {
			/*width: calc(100% - 28px);*/
			width: 23%;
		}
		body #inputArea dl.birth dd select + select{
			margin-left: 0;
		}
		
		body #inputArea dl.mail dd br {
			display: block;
		}
		body #inputArea dl.mail dd input {
			width: 100%;
			margin-bottom: 5px;
		}
		body #inputArea dl.tel input {
			width: 25%;
		}
		body #inputArea #AD_NINCHI_ETC{
			margin-left: 0;
			width: 100%;
		}
		/** senior input tel width **/
		form.senior #inputArea dl.tel input{ 
			width: 25%;
		}
		body #inputArea dl.name dd input,
		body #inputArea dl.furikana dd input,
		body #inputArea input#AD_AREA_2 {
			width: 100%;
		}
    body #osusume-bukken .osusume img{
      width: 100px;
      height: auto;
    }
    body #osusume-bukken h3 span{
      display: block;
      margin-right: 0;
    }

		
		/** ext add item **/
		/** senior eventform sanka **/
		body #inputArea dl.sanka input {
			width: 15%;
		}
		body .submitBox {
			width: 100% !important;
		}
		body .submitBox p,
		body .submitBox ul li {
			width: 100%; float: none;
		}
		body .submitBox ul li:first-child {
			margin-right: 0;
			margin-bottom: 5px;
		}
		
		body .contactBox {
			width: 100%; font-size: 10px; line-height: 15px;
		}
		body .contactBox strong {
			font-size: 12px; line-height: 18px;
		}
	}
	
	/** btn **/
	.btn input {
		width: 100%; padding: 10px; background: -moz-linear-gradient(top, #fff, #F1F1F1 1%, #F1F1F1 50%, #DFDFDF 99%, #ccc);  
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #F1F1F1), color-stop(0.5, #F1F1F1), color-stop(0.99, #DFDFDF), to(#ccc));  
    -moz-box-shadow: 1px 1px 2px #E7E7E7;  
    -webkit-box-shadow: 1px 1px 2px #E7E7E7;  color: #fff;
	font-size: 18px;
	}
	.btn.Yellow input { 
	text-align: center;
	background: rgb(224,159,0);
	background: -moz-linear-gradient(top,  rgba(224,159,0,1) 1%, rgba(211,131,0,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(224,159,0,1)), color-stop(100%,rgba(211,131,0,1)));
	background: -webkit-linear-gradient(top,  rgba(224,159,0,1) 1%,rgba(211,131,0,1) 100%);
	background: -o-linear-gradient(top,  rgba(224,159,0,1) 1%,rgba(211,131,0,1) 100%);
	background: -ms-linear-gradient(top,  rgba(224,159,0,1) 1%,rgba(211,131,0,1) 100%);
	background: linear-gradient(to bottom,  rgba(224,159,0,1) 1%,rgba(211,131,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e09f00', endColorstr='#d38300',GradientType=0 );
	border-top: 1px solid #ebbd00;
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
}
	.btn.Gray input { 
	text-align: center;
	background: rgb(111,111,111);
	background: -moz-linear-gradient(top,  rgba(111,111,111,1) 0%, rgba(93,93,93,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(111,111,111,1)), color-stop(100%,rgba(93,93,93,1)));
	background: -webkit-linear-gradient(top,  rgba(111,111,111,1) 0%,rgba(93,93,93,1) 100%);
	background: -o-linear-gradient(top,  rgba(111,111,111,1) 0%,rgba(93,93,93,1) 100%);
	background: -ms-linear-gradient(top,  rgba(111,111,111,1) 0%,rgba(93,93,93,1) 100%);
	background: linear-gradient(to bottom,  rgba(111,111,111,1) 0%,rgba(93,93,93,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6f6f6f', endColorstr='#5d5d5d',GradientType=0 );
	border-top: 1px solid #959595;
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
}