@charset"utf-8";

/* ウィンドウ背景色の設定 */

body{
/*
	background-color: #fbf9cc;
	background-image: url(../img/bg-stripe01.png);
	background-repeat: repeat-x;
*/
	background: #E3CEF6 url(../img/saidan1.jpg)repeat-x;
}

/* コンテンツ全体枠の設定 */
#wrap{
	width: 798px;
	margin: 40px auto;
	padding: 40px 80px;
	border: #673BF9 1px solid;
	background-color: #fff;
}



/* リンク色の設定 */

a{
	color: #0B3861;
}

a:hover{
	color: #ff705b;
}
/* ページタイトルの設定 */

h1{
	color: #6A0B8A;
	text-align: center;
}

h1 span{
	color: #d0e35b;
}

/* 大見出しの設定 */

h2{
	color: #9C1077;
	border: #94c8b1 1px dotted;
	border-left: #d0e35b 10px solid;
	padding: 5px 20px;
	margin-botom: 0;
}

/* 情報データ見出しの設定 */

dt{
	clear:left;
	float: left;
}

/* リード分領域の設定 */

#lead{
	border-top: #6fbb9a 1px dotted;
	border-bottom: #6fbb9a 1px dotted;
	padding: 15px;
	text-align: center;
	font-size: 12px;
}

/* 「もっと見る」リンクの設定 */

.more{
	text-align: right;
	padding-right: 20px;
/*	background-image: url("../img/icon-arw01.png");
	background-repeat: no-repeat;
	background-position: right center;*/
	clear:left;
}

/* 補足 */

.hosoku{
	font-size: 60%;
	font-weight: normal;
	color: #2793a7;
}

/* 値段 */

.nedan{
	color: #FF0040;
	line-height:3em;	
}

/* フレーム枠の設定 */

.frame{
	margin: 20px 0;
	padding:35px 30px 30px 30px;
	background-image: url("../img/ver_menu5_7off.gif");
	background-repeat: repeat-x;
	background:  linear-gradient(#DBFAFF, #BCA9F5);
}

/* ボックス */

.box{
    background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
    background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
    border: 1px solid #ccc;
    border-top: 4px solid #0B0B3B;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
    margin: 2em;
    padding: 0 1em;
	text-align: right;
}

.block:after{
	content: "";
	display: block;
	clear: both;
}

.block1{
	float: left;
	margin-left: 50px;
}

.block2{
	float: right;
	margin-right: 50px;
}

/* 写真とデータの設定 */

.ph{
	float: left;
	margin-right: 30px;
}

.data{
	float: left;
	width: 388px;
	background: linear-gradient(-135deg, #E3F8FC, #FFFFFF);
}

.opa.img{
	 opacity: 0.5;
 	filter: alpha(opacity=50);
 	-moz-opacity: 0.5;
}

/* 表組の設定 */

table.entryForm{
	width: 100%;
	border: #f6bb9e 2px solid;
}

.entryForm th,.entryForm td{
	padding: 5px 10px;
	border: #6bb9e 1px solid;
	border-collapse: collapse;
}

.entryForm th{
	width: 10em;
	background-color: #ffeeee;
	text-align: left;
	vertical-align: top;
}

/* 入力フォームの設定 */

.entryForm textarea{
	width: 600px;
	height: 100px;
	padding: 5px;
	border: #ccc 1px solid;
}

.entryForm input[type="text"],input[type="email"]{
	width: 400px;
	padding: 5px;
	border: #ccc 1px solid;
}

.entryForm input:focus,
.entryForm textarea:focus{
	backgroundcolor: #ffffee;
}

/* カーソル形状 */

label,
input[type="radio"],
input[type="checkbox"],
input[type="reset"],
input[type="submit"]{
	cursor: pointer;
}

/* ラジオボタン */

input[type="radio"]{
    width: 20px;
    height: 20px;
    vertical-align: middle;
	margin-right: 10px;
}


/*Radio Check*/
label.radio, label.radio_text, label.checkbox, label.checkbox_text {
	position      : relative;
	cursor        : pointer;
	display       : inline-block;
	overflow      : hidden;
	box-sizing    : border-box;
}
label.radio {
	width         : 18px;
	height        : 18px;
	border        : 1px solid #666666;
	border-radius : 100%;
}
label.radio_text {
	min-height   : calc(18px + 5px);
	margin-right : calc(18px + 5px);
	padding-left : calc(18px + 5px);
	line-height  : calc(18px + 5px);
}
label.checkbox {
	width      : 20px;
	height     : 20px;
	border     : 1px solid #B3B3B3;
	background : #fff;
}
label.checkbox_text {
	padding-left : calc(20px + 5px);
	line-height  : 20px;
}
/** before after **/
label.radio:before, label.radio_text:before, label.checkbox_text:before,
label.checkbox:after, label.radio_text:after, label.checkbox_text:after{
	content  : '';
	position : absolute;
	box-sizing : border-box;
}
label.radio:before, label.radio_text:before{
	border-radius    : 100%;
}
label.radio:before, label.checkbox:after{
	top              : 0px;
	bottom           : 0px;
	left             : 0px;
	right            : 0px;
	margin           : auto;
}
label.checkbox:after, label.checkbox_text:after{
	transform         : rotate(45deg);
	-webkit-transform : rotate(45deg);
	-moz-transform    : rotate(45deg);
	border-right      : 3px solid #f33feb;
	border-bottom     : 3px solid #f33feb;
	top               : calc(50% - (((17px / 12 ) * 5) / 2));
	display           : block;
	margin-top        : calc(((17px / 12 ) * 5) * -1);
	width             : calc(((17px / 12 ) * 5));
	height            : 17px;
	z-index           : 1;
}
label.radio_text:before, label.radio_text:after{
	top              : 0px;
	bottom           : 0px;
	margin-top       : auto;
	margin-bottom    : auto;
}
label.radio:before {
	display          : block;
	width            : 10px;
	height           : 10px;
	z-index          : 1;
	background-color : #f141ed; 
}
label.radio_text:before {
	width         : 18px;
	height        : 18px;
	border        : 1px solid #666666;
	left          : 0px;
	z-index       : 3;
}
label.checkbox_text:before {
	width    : 20px;
	height   : 20px;
	left     : 0px;
	top      : 0;
	border   : 1px solid #B3B3B3;
	z-index  : 3;
	box-sizing: border-box;
}
label.radio_text:after {
	width            : 10px;
	height           : 10px;
	border-radius    : 100%;
	left             : calc(((18px/2) - (10px) / 2));
	background-color : #f141ed;
	z-index          : 1;
}
label.checkbox_text:after {
	left : calc((20px / 2) - (((17px / 12 ) * 5) / 2));
}
/** input **/
label.radio input[type="radio"], label.radio_text input[type="radio"], label.checkbox input[type="checkbox"], label.checkbox_text input[type="checkbox"]{
	-moz-appearance: none;
	-webkit-appearance: none;
	position   : absolute;
	z-index    : 2;
	margin     : 0px;
	width      : 20px;
	height     : 20px;
	box-sizing    : border-box;
	outline       : none;
}
label.radio input[type="radio"], label.radio_text input[type="radio"]{
	left       : calc(18px * -1);
	width      : 18px;
	height     : 18px;
	top           : 0px;
	bottom        : 0px;
	margin-top    : auto;
	margin-bottom : auto;
	border-radius : 100%;
}
label.checkbox input[type="checkbox"], label.checkbox_text input[type="checkbox"]{
	left       : calc(20px * -1);
	padding    : 0;
}
label.radio input[type="radio"] {
	display    : block;
	box-shadow : 18px 0px #FFF;
}
label.radio_text input[type="radio"] {
	box-shadow : 18px 0px #FFF;
}
label.checkbox input[type="checkbox"] {
	box-shadow : 20px 0px #FFF;
}
label.checkbox_text input[type="checkbox"] {
	display    : block;
	box-shadow : 20px 0px #FFF;
}
/** checked forcus */
label.checkbox_text input[type="checkbox"]:checked,
label.checkbox input[type="checkbox"]:checked,
label.radio_text input[type="radio"]:checked,
label.radio input[type="radio"]:checked{
	box-shadow : none;
}
label.checkbox_text input[type="checkbox"]:checked:focus,
label.checkbox input[type="checkbox"]:checked:focus{
	opacity: 0.1;
}
label.radio_text input[type="radio"]:focus,
label.radio input[type="radio"]:focus{
	opacity: 0.2;
}

label.checkbox_text input[type="checkbox"]:checked:focus {
	box-shadow : 20px 0px #666;
}
label.checkbox_text input[type="checkbox"]:focus {
	box-shadow : 20px 0px #EEE;
}
label.checkbox input[type="checkbox"]:checked:focus {
	box-shadow : 20px 0px #666;
}
label.checkbox input[type="checkbox"]:focus {
	box-shadow : 20px 0px #EEE;
}
label.radio_text input[type="radio"]:focus {
	box-shadow : 18px 0px #FFF;
}
label.radio input[type="radio"]:focus {
	box-shadow : 18px 0px #FFF;
}




/* インプットの設定 */

.price{
	border:0;
	padding:10px;
	font-size:1.3em;
	font-family:Arial, sans-serif;
	color:#aaa;
	border:solid 1px #ccc;
	margin:0 0 20px;
	width:300px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
	-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
	box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
	text-align: right;
}

/* ボタンの設定 */

.btns{
	margin: 30p;
	text-align: center;
}

.btns input{
	width: 100px;
}

.btn input{
	width: 100px;
}

.btn{
	width: 100px;
	margin:  10px;
	padding: 10px;
	font-size: 16px;
	border: none;
}

/* ボタンにマウスが乗った時 */

.btn:hover{
	opacity: 0.7;
}

/* ボタンを押した時 */

.btn:active{
	color: #fff;
}

/* ボタンの役割に合わせて色分け */

.btn-clear{
	background-color: #ccc;
	-webkit-border-radius: 20px;
}
.btn-send{
	background-color: #f6bb9e;
	-webkit-border-radius: 20px;
}