/*=======================================================================*/
/*
form.css
フォーム パーツ系CSS
*/
/*=======================================================================*/

@media (max-width: 768px) {

	label {
		font-size: 0.9em;
		margin-right: 5px;
		display: inline-block;
		margin-bottom: 20px;
		margin-top: 0px;
		position: relative;
	}
	body.confirm label {
		width: 100%;
	}
	
	#mousi_type1,
	#mousi_type2,
	#plan_labels label {
		width: 100%;
	}
	


	/*=======================================================================*/
	/* ラジオボタン */
	/*=======================================================================*/

	.radio-input{
		position: absolute;
		left: -9999px;
		vertical-align: middle;
	}

	.radio-parts{
		margin-top: 0;
		padding-left: 30px;
		position:relative;
		margin-right: 0;
		transition: none !important;
		display: block;
		font-size: 1.1em;
		line-height: 1.8em;
		float: none;
		width: 95%;
	}
	
	/* 個別調整(メルマガ同意) */
	#otokuArea .radio-parts{
		display: inline;
		margin: 0 20px;
	}
	
	/* 商品選択エリアのみ */
	
	#plan_labels .radio-parts {
		width: auto;
		float: left !important;
	}
    
    #campaign_labels .radio-parts {
		width: auto;
		float: left !important;
	}
	

	.radio-parts::before{
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 20px;
		height: 20px;
		border: 2px solid #999;
		border-radius: 50%;
		transition: none !important;
	}

	.radio-input:checked + .radio-parts::before {
	}

	.radio-input:checked + .radio-parts {
	}

	.radio-input + .radio-parts::after {
		background: rgba(234,96,158,0);
		transform: scale(0,0);
		transition: none !important;
	}

	.radio-input:checked + .radio-parts::after {
		content: "";
		display: block;
		position: absolute;
		top: 4px;
		left: 4px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		transform: scale(0.8,0.8);
	}

	/*=======================================================================*/
	/* チェックボックス */
	/*=======================================================================*/

	input[type="checkbox"] {

	}

	.checkbox-input {
		position: absolute;
		left: -9999px;
		vertical-align: middle;
	}

	.checkbox-parts {
		padding-left: 25px;
		position:relative;
		margin-right: 5px;
		transition: .4s;
		vertical-align: middle;
		display: block;
		text-align: left;
		line-height: 1.4em;
	}
	.confirm .checkbox-parts {
		text-align: center;
		display: inline-block;
	}
	.KeizokuChk .checkbox-parts {
	/*	font-size: 1.15em;	*/
	}
	#Tos .checkbox-parts {
	/*	font-size: 1.2em;	*/
	}
	
	#freeChk {
		width: 100%;
		/*border-radius: 5px;*/
	}
	
	#freeChk:before{
		content:" ";
		position:absolute;
		bottom:-12px;
		left:-2px;
		width:0;
		height:0;
		border-width:0 10px 10px 0;
		border-style:solid;
		border-color:transparent;
		border-right-color:#b71c1c;
		z-index: -10;
	}
	#freeChk:after{
		content:" ";
		position:absolute;
		bottom:-12px;
		right:-2px;
		width:0;
		height:0;
		border-width:10px 10px 0 0;
		border-style:solid;
		border-color:transparent;
		border-top-color:#b71c1c;
		z-index: -10;
	}
	
	#freeChk label {
		margin-bottom: 10px;
		margin-top: 10px;
	}
	
	#freeChk .checkbox-parts {
		margin-left: 5px;
	}

	.checkbox-parts::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 15px;
		height: 15px;
		border: 2px solid #999;
		border-radius: 2px;
	}

	.checkbox-input:checked + .checkbox-parts {
	}

	.checkbox-input:checked + .checkbox-parts::before {

	}

	.checkbox-input:checked + .checkbox-parts::after {
		content: "";
		display: block;
		position: absolute;
		top: -5px;
		left: 5px;
		width: 7px;
		height: 14px;
		transform: rotate(40deg);

	}

	/*=======================================================================*/
	/* テキスト・テキストエリア */
	/*=======================================================================*/

	input[type="text"],
	textarea,
	input[type="email"],
	input[type="tel"],
	input[type="password"] {
		padding: 7px 5px;
		border: 2px solid #CCC;
		border-radius: 5px;
		margin: 0 0 5px 0;
		font-size: 1em;
		outline: none;
	}

	textarea {
		min-height: 100px;
		font-size: 1em;
		font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	}
	
	input[type="text"],
	textarea,
	input[type="email"],
	input[type="password"] {
		width: 96%;
	}
	
	input[type="tel"] {
		width: 20%;
	}
	
	.nameSep {
		width: 42% !important;
	}
	
	.post {
		width: 40%;
		margin: -10px 5px 0 0 !important;
	}
	
	.post1 {
		width: 55% !important;
		margin: 0 5px 0 0 !important;
	}
	
	.post2 {
		width: 25% !important;
		margin: 0 0 0 5px !important;
	}
	
	.Ninzu {
		width: 15% !important;
	}
	
	.haisou_free_radio {
		margin-top: -5px !important;
	}
	
	.haisou_free_txt {
		width: 20% !important;
		margin: -10px 10px 5px 10px !important;
	}

	/* フォーカス */

	input {
		transition: all 0.3s;
	}

	input[type="text"]:focus,
	textarea:focus,
	input[type="email"]:focus,
	input[type="tel"]:focus,
	input[type="password"]:focus {
		border: 2px solid #0097A7;
		background: #E0F7FA;
	}

	/* プレースホルダー */

	input::-webkit-input-placeholder {
		color: #ccc;
		font-size: 1em;
	}
	input:-moz-placeholder {
		color: #ccc;
		font-size: 1em;
	}

	input:-ms-input-placeholder {
		color: #ccc;
		font-size: 1em;
	}


	/*=======================================================================*/
	/* セレクトボックス */
	/*=======================================================================*/

	.sBox {
		padding: 5px 10px;
	}
	
	.chosen-container {
	    width: 100% !important;
	}

	.chosen-container-single .chosen-single {
		position: relative;
		display: block;
		overflow: hidden;
		padding: 3px 0 0 8px;
		height: 30px;
		border: 1px solid #aaa;
		border-radius: 5px;
		background-color: #fff;
		background: -webkit-gradient(linear,left top,left bottom,color-stop(20%,#fff),color-stop(50%,#f6f6f6),color-stop(52%,#eee),to(#f4f4f4));
		background: linear-gradient(#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);
		background-clip: padding-box;
		-webkit-box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(0,0,0,.1);
		box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(0,0,0,.1);
		color: #444;
		text-decoration: none;
		white-space: nowrap;
		line-height: 24px;
	}

	.chosen-container-single .chosen-single div b {
		display: block;
		width: 100%;
		height: 100%;
		background: url(chosen-sprite.png) no-repeat 0 5px;
	}

	select {
		margin: -10px 0 0 0;
	}

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

	select:-moz-focusring { 
		color: transparent; 
	}

	label.table {
		display: table;
		float: left;
	}

	.select-wrap{
		position:relative;
		overflow:hidden;
		display:inline-block;
		min-width:20%;
		min-width:12em;
		background-color:#ffffff;
		background-image:-webkit-linear-gradient(top, #ffffff 0%, #dfe0d9 100%);
		background-image:linear-gradient(top, #ffffff 0%, #dfe0d9 100%);
		border:1px solid #c0c0c0;
		color:#333;
		display: table-cell;
	}

	.select-wrap select {
		-webkit-appearance:none;
		-moz-appearance:none;
		appearance:none;
		position:relative;
		z-index:2;
		display:block;
		width: 20%;/* fallback non calc support */
		width:-webkit-calc(100% + 5em);
		width: calc(100% + 5em);
		margin:0;
		padding:5px 20px 5px 10px;
		background:transparent;
		border:0;
		outline:none;
		font-size:16px;
		font-size:1rem;
		line-height:1.5;
	}

	.entypo-down-open-mini:before{
		content: "\f107";
		font-family: FontAwesome;
		position:absolute;
		z-index:1;
		top:50%;
		right:12px;
		right:.32rem;
		margin-top:-8px;
		margin-top:-.5rem;
		font-size:20px;
		font-size:1rem;
		line-height:1;
		color:#333;
	}

	.byear {
		min-width:15%;
		min-width:4em;
	}

	.bmonth {
		min-width:10%;
		min-width:3em;
	}

	.bdate {
		min-width:10%;
		min-width:3em;
	}


	.BlrthLBL {
		margin: 0 0 0 10px;
	}

}