/***********************************************************************
topボタンここから
**********************************************************************/
.hd_right {
	float: right;
	font-size: 20px;
}
.contact_btn {
	display: block;
	width: 236px;
	height: 50px;
	background: #d51e00;
	text-decoration: none;
	transition: ease-in 0.1s;
	color: #FFFFFF;
	font-weight: bold;
	text-align: center;
	line-height: 45px;
}
.contact_btn a {
	color: #FFF5F5;
}
.contact_btn a hover {
}
.tel {
	display: block;
	width: 250px;
	height: 50px;
	text-align: center;
}
.tel a {
	font-size: 23px;
}
/***********************************************************************
gnaviここから
**********************************************************************/
#header.flat-menu nav ul.nav-main li > a:hover, #header.flat-menu nav ul.nav-main li.dropdown:hover a {
	color: #FFF;
	background-color: #0088cc!important;
}
.active-page {
	background-color: #0088cc;
	color: #FFF;
}
.color-white {
	color: #FFF;
}
/***********************************************************************
スライダーここから
**********************************************************************/


.black {
	color: #000000;
}
.red {
	color: #E50000;
}
.red_bold {
	color: #E50000;
	font-weight: bold;
}
.yellow {
	color: #0088cc;
}
.blue {
	color: #3a4ff5;
}
/***********************************************************************
お知らせここから
**********************************************************************/
.info-list li {
	font-size: 16px;
	list-style-type: none;
	border-bottom: 1px solid #CCC;
	padding: 10px 35px 10px;
}
.info-list li span {
	margin-right: 100px;
}
.left_h2 {
	text-align: left;
	margin-top: 30px;
	margin-left: 30px;
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 40px;
	letter-spacing: 0px;
}
.push-top {
	text-align: left;
	margin-top: 30px;
	font-size: 30px;
	margin-bottom: 40px;
}
.point1 {
	width: 100px;
	height: 30px;
	margin: 15px auto;
	border: 1px solid #0088cc;
	color: #0088cc;
	text-align: center;
	background: white;
}
.point2 {
	width: 100px;
	height: 30px;
	margin: -10px auto 15px;
	border: 1px solid #0088cc;
	color: #0088cc;
	text-align: center;
	background: white;
}
.point3 {
	width: 100px;
	height: 30px;
	margin-bottom: 20px;
	border: 1px solid #0088cc;
	color: #0088cc;
	text-align: center;
	background: white;
}
.num {
	font-size: 20px;
	font-weight: bold;
}
.white_square1, .white_square2, .white_square3, .white_square4 {
	width: 200px;
	height: 200px;
	padding: 60px 15px;
	text-align: center;
	color: black;
	background: white;
	margin: 0 auto;
}
.white_square1 {
	background-image: url(../img/point1.png)
}
.white_square2 {
	background-image: url(../img/point2.png)
}
.white_square3 {
	background-image: url(../img/point3.png)
}
.white_square4 {
	background-image: url(../img/point4.png)
}
.white_square1 p, .white_square2 p, .white_square3 p, .white_square4 p {
	line-height: 40px;
	vertical-align: middle;
	color: black;
	font-size: 20px;
	font-weight: bold;
}
.white_harf1 {
	width: 200px;
	height: 150px;
	padding: 25px 15px;
	color: black;
	background: white;
	border: 1px solid #637275;
	margin: 0 auto;
}
.white_harf2 {
	width: 200px;
	height: 150px;
	padding: 25px 15px;
	text-align: center;
	color: black;
	background: white;
	border: 1px solid #08bfc5;
	margin: 0 auto;
}
.white_harf3 {
	width: 200px;
	height: 150px;
	padding: 25px 15px;
	text-align: center;
	color: black;
	background: white;
	border: 1px solid #f6635e;
	margin: 0 auto;
}
.white_harf4 {
	width: 200px;
	height: 150px;
	padding: 25px 15px;
	text-align: center;
	color: black;
	background: white;
	border: 1px solid #bca403;
	margin: 0 auto;
}
.white_harf1 p, .white_harf2 p, .white_harf3 p, .white_harf4 p {
	vertical-align: middle;
	color: black;
	font-size: 18px;
}
.top_margin {
	margin-top: 50px;
	margin-bottom: 50px;
}
.top_margin90 {
	margin-top: 90px;
	margin-bottom: 50px;
}
/***********************************************************************
悩みここから
**********************************************************************/

.nayami {
	width: 100%;
	color: white;
	font-size: 24px;
	text-align: left;
	border-radius: 10px;
	padding: 50px 0;
	margin: 0 auto;
	background-image: url(../img/background.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	list-style: none;
}
.nayami li {
	list-style-image: url(../img/check_box.png);
	list-style-position: inside;
	　　　　　line-height: 60px;
	margin-left: 300px;
	margin-top: 30px;
}
.bold {
	font-weight: bold
}
.red_bold {
	color: #D32106;
	font-weight: bold;
}
/*----------------------------------------------------
  table ここから
----------------------------------------------------*/
table {
	border-collapse: separate;
	border-spacing: 3px 3px;
	width: 95%;
	margin: auto;
}
td, th, tr {
	vertical-align: middle;
	margin: 10px;
	color: black;
}
td, th {
	border: 1px #808080 solid;
	padding: 1%;
}
.ripiroboteiki, .tokucho {
	height: 100px;
	background: #ffffff;
	width: 100px;
	text-align: center;
}
.reflection {
	height: 100%;
	width: 30px;
	position: absolute;
	top: -180px;
	left: 0;
	background-color: #fff;
	opacity: 0;
	transform: rotate(45deg);
	animation: reflection 10s ease-in-out infinite;
	-webkit-transform: rotate(45deg);
	-webkit-animation: reflection 2.5s ease-in-out infinite;
	-moz-transform: rotate(45deg);
	-moz-animation: reflection 2.5s ease-in-out infinite;
	-ms-transform: rotate(45deg);
	-ms-animation: reflection 2.5s ease-in-out infinite;
	-o-transform: rotate(45deg);
	-o-animation: reflection 2.5s ease-in-out infinite;
}
.other {
	width: 200px;
	height: 55px;
	background: #000000;
	color: #ffffff;
	max-height: 55px;
	text-align: center;
}
.other2 {
	background: #000000;
	color: #ffffff;
	text-align: center;
}
.ryokin_left {
	width: 600px;
	height: 55px;
	background: #999999;
	color: #ffffff;
	max-height: 55px;
	text-align: center;
}
.ryokin_right {
	width: 200px;
	height: 55px;
	background: #999999;
	color: #ffffff;
	max-height: 55px;
	text-align: center;
}
.table_01 {
	background: #999999;
	width: 170px;
	height: 45px;
	color: #ffffff;
	text-align: center;
}
.table_02, .table_06 {
	background: #ffffff;
	text-align: center;
}
.table_03, .table_03 td, .table_03 th {
	border-collapse: collapse;
	border: 1px solid #333;
}
.table_03 td, .table_03 th {
	height: 55px;
}
.ryokin {
	font-size: 20px;
}
.butsuryu, .butsuryu2 {
	height: 50px;
	background: #ffffff;
	width: 170px;
}
.table_04, .table_07 {
	background: #ffffff;
	font-weight: bold;
}
.table_05 {
	background: #999999;
	color: #ffffff;
}
.table_06, .table_07, .butsuryu2, .tokucho {
	border: 1px #808080 solid;
	padding: 15px;
}
.back_blue {
	background: #0088cc;
	width: 200px;
	height: 55px;
	color: #ffffff;
	max-height: 55px;
	text-align: center;
}
.back_white {
	border: none;
}
.table-striped {
	border-spacing: 0px;
}
.table-striped th, .table-striped td {
	border: none;
}
.table-striped tr {
	border-bottom: 1px solid #ddd;
}
.table_g {
	background: #c2c2c4;
	color: #ffffff;
	text-align: center;
}
.table_g2 {
	background: #999999;
	color: #ffffff;
}
.table_w {
	background: #ffffff;
	text-align: center;
}
.table_w img {
	max-width: 100%;
}
.size20 {
	font-size: 20px;
	color: black;
}
.text_left{
	text-align: left;
}
.left50{
	margin-left: 50px;
}
/*----------------------------------------------------
  buttonここから
----------------------------------------------------*/ 
.square_btn1 {
	display: inline-block;
	position: relative;
	padding: 0.7em 1.4em;
	text-decoration: none;
	background: #99e58c;/*ボタン色*/
	color: #FFF;
	border-bottom: solid 5px #4c9a3f;/*ボタン色より暗めに*/
	border-right: solid 5px #65c755;/*ボタン色より暗めに*/
	margin: 30px;
	width: 300px;
	font-size: 20px;
}
.square_btn2 {
	display: inline-block;
	position: relative;
	padding: 0.7em 1.4em;
	text-decoration: none;
	background: #20bff1;/*ボタン色*/
	color: #FFF;
	border-bottom: solid 5px #36528c;/*ボタン色より暗めに*/
	border-right: solid 5px #5375bd;/*ボタン色より暗めに*/
	margin: 30px;
	width: 300px;
	font-size: 20px;
}
.square_btn3 {
	display: inline-block;
	position: relative;
	padding: 0.7em 3em;
	text-decoration: none;
	background: #f16640;/*ボタン色*/
	color: #FFF;
	border-bottom: solid 5px #a23f25;/*ボタン色より暗めに*/
	border-right: solid 5px #d35330;/*ボタン色より暗めに*/
	margin: 30px;
	width: 700px;
	font-size: 20px;
}
.square_btn1:before, .square_btn2:before, .square_btn3:before {
	content: " ";
	position: absolute;
	bottom: -5px;
	left: -1px;
	width: 0;
	height: 0;
	border-width: 0 6px 6px 0px;
	border-style: solid;
	border-color: transparent;
	border-bottom-color: #FFF;
}
.square_btn1:after, .square_btn2:after, .square_btn3:after {
	content: " ";
	position: absolute;
	top: -1px;
	right: -5px;
	width: 0;
	height: 0;
	border-width: 0px 6px 6px 0px;
	border-style: solid;
	border-color: #FFF;
	border-bottom-color: transparent;
}
.square_btn1:active, .square_btn2:active, .square_btn3:active { /*ボタンを押したとき*/
	border: none;
	-ms-transform: translate(6px, 6px);
	-webkit-transform: translate(6px, 6px);
	transform: translate(6px, 6px);
}
.square_btn1:active:after, .square_btn1:active:before, .square_btn2:active:after, .square_btn2:active:before, .square_btn3:active:after, .square_btn3:active:before {
	content: none;/*ボタンを押すと線が消える*/
}
.square_btn a:hover {
	filter: alpha(opacity=80);
	opacity: 0.8;
	color: #FFF;
}
.blue_button {
	border: solid 1px #0088cc;
	padding: 5px 20px;
	color: #0088CC;
	text-align: center;
}
/* -------------------- */
/* ▼メニューバーの装飾 */
/* -------------------- */
ul.ddmenu {
	margin: 0px;               /* メニューバー外側の余白(ゼロ) */
	padding: 0px 0px 0px 15px; /* メニューバー内側の余白(左に15px) */
	background-color: white; /* バーの背景色 */
}
/* -------------------------- */
/* ▼メインメニュー項目の装飾 */
/* -------------------------- */
ul.ddmenu li {
	width: 200px;           /* メニュー項目の横幅 */
	display: inline-block;  /* ★1:横並びに配置する */
	list-style-type: none;  /* ★2:リストの先頭記号を消す */
	position: relative;     /* ★3:サブメニュー表示の基準位置にする */
}
ul.ddmenu a {
	background-color: white; /* メニュー項目の背景色*/
	color: black;              /* メニュー項目の文字色 */
	line-height: 50px;         /* メニュー項目のリンクの高さ */
	text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
	text-decoration: none;     /* メニュー項目の装飾(下線を消す) */
	font-weight: bold;         /* 太字にする */
	display: block;            /* ★4:項目内全域をリンク可能にする */
	font-size: 30px;
	border: 1px solid #d5d5d5;
}
ul.ddmenu a:hover {
	opacity: 0.7; /* メニュー項目にマウスが載ったときの背景色 */
}
/* ▼サブメニューは、とりあえず非表示にしておく */
ul.ddmenu ul {
	display: none;         /* ★5:非表示にする */
}
/* -------------------- */
/* ▼サブメニューの装飾 */
/* -------------------- */
ul.ddmenu ul {
	display: none;       /* ★1:標準では非表示にする */
	margin: 0px;         /* ★2:サブメニュー外側の余白(ゼロ) */
	padding: 0px;        /* ★3:サブメニュー内側の余白(ゼロ) */
	position: absolute;  /* ★4:絶対配置にする */
}
/* ---------------------------------- */
/* ▼サブメニューがある場合に開く処理 */   /* ※サブメニューが1階層しか存在しない場合の記述 */
/* ---------------------------------- */
ul.ddmenu li:hover ul {
	display: block;      /* ★5:マウスポインタが載っている項目の内部にあるリストを表示する */
}
/* ------------------------ */
/* ▼サブメニュー項目の装飾 */
/* ------------------------ */
ul.ddmenu ul li {   /* ※A */
	width: 200px;               /* サブメニュー1項目の横幅 */
	border-top: 1px solid #D5D5D5; /* 項目上側の枠線(ピンク色で1pxの実線) */
}
ul.ddmenu ul li a {   /* ※B */
	line-height: 50px;   /* サブメニュー1項目の高さ */
	text-align: left;    /* 文字列の配置(左寄せ) */
	padding-left: 5px;   /* 文字列前方の余白(5px) */
	font-weight: normal; /* 太字にはしない */
}
ul.ddmenu ul li a:hover {   /* ※C */
	background-color: #0088cc; /* サブメニュー項目にマウスが載ったときの背景色 */
	color: white;            /* サブメニュー項目にマウスが載ったときの文字色 */
}
/***********************************************************************
結果ここから
**********************************************************************/
.kekka_blue {
	font-size: 20px;
	color: #009AFF;
}
.cart_left1 {
	text-align: left;
}
.cart_left {
	text-align: left;
}
.cart_left2 {
	text-align: left;
	margin-bottom: 30px;
}
.orange {
	color: #FF4A00;
}
.API {
	background-color: #bd0711;
	color: #FFFFFF;
	margin-left: 10px;
	padding: 3px;
}
.reason-first {
	box-sizing: border-box;
	border: 2px solid #DFDFDF;
	border-radius: 8px;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.04);
	margin-top: 10px;
	min-height: 100px;
	position: relative;
	text-align: center;
	z-index: 1;
}
.reason-midashi1 {
	background-color: #000000;
	color: #FFF;
	text-align: center;
	width: 200px;
	height: 50px;
	padding-top: 12px;
}

/***********************************************************************

ブラウザの幅が768px以上

**********************************************************************/
@media only screen and (min-width: 768px) {
 .outerTbl th, .outerTbl td, {
 padding: 10px;
 border: 1px solid #cccccc;
}
.outerTbl th {
	width: 70px;
}
.ryokin_left th {
	width: 210px;
}
.ryokin_left th {
	width: 70px;
}
.custom {
	width: 100%;
}
}
/***********************************************************************
partnerここから
**********************************************************************/
.partner {
	text-align: center;
}
.partner img {
	padding: 30px;
}
.callcenter_midashi {
	font-weight: bold;
	color: black;
	margin-left: 25px;
	border-left: 5px solid #0088cc;
	padding-left: 5px;
}

/***********************************************************************

ブラウザの幅が767px以下

**********************************************************************/

@media only screen and (max-width: 767px) {
.outerTbl {
	display: block;
}
.outerTbl tr, .outerTbl th, .outerTbl td {
	display: block;
}
.outerTbl tr {
	border-bottom: 1px solid #cccccc;
}
.outerTbl tr:first-child {
	border-top: 1px solid #cccccc;
}
.outerTbl th, .outerTbl td {
	padding: 5px;
}
.square_btn1, .square_btn2, .square_btn3 {
	margin: 15px auto;
	width: 80%
}
.square_btn1 a, .square_btn2 a, .square_btn3 a {
	color: #FFFFFF;
}
.square_btn1 a:hover, .square_btn2 a:hover, .square_btn3 a:hover {
	filter: alpha(opacity=80);
	opacity: 0.8;
}
}
/***********************************************************************
右下問い合わせ　ここから
**********************************************************************/
#page-top {
	position: fixed;
	bottom: 80px;
	right: 4px;
	width: 200px;
	height: 100px;
	background-color: #d51e00;
	z-index: 100000;
	border-radius: 4px;
	padding: 15px 10px 10px;
	border: solid 2px #ffffff;
	transition: opacity 0.2s ease 0s;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
	line-height: normal;
}
#page-top:hover {
	opacity: 0.8;
	text-decoration: none;
}
#page-top span {
	display: block;
	color: #ffffff;
	font-weight: 700;
}
#page-top img {
	margin-top: 4px;
	height: 40px;
	text-align: center;
}

@media only screen and (max-width: 767px) {
#page-top {
	width: 30%;
	height: auto;
	padding: 2px 10px 10px;
}
}
}
}
.img-big {
	display: block;
	height: auto;
}

@media (max-width: 767px) {
.img-big {
	max-width: 100%;
}
}
/***********************************************************************
動画　ここから
**********************************************************************/
.iframe_res {
	position: relative;
	width: calc(100% - 10px);
	margin: 15px auto;
}
.iframe_res2 {
	height: 0;
	padding-bottom: 56.25%;
}
iframe {
	position: absolute;
	top: 0;
	left: 0;
}
/***********************************************************************
faq　ここから
**********************************************************************/
.Q, .A {
	width: 30px;
	height: 30px;
}
/***********************************************************************
point　ここから
**********************************************************************/
.point_img {
	width: 60px;
	height: 60px;
	float: left;
	margin-right: 30px;
}
.point3_div {
	margin-left: 90px;
	margin-bottom: 35px;
	margin-top: 50px;
}
.point4_div {
	margin: 50px 15px 0;
}
/***********************************************************************
how to tab　ここから
**********************************************************************/
.tab_wrap {
	max-width: 1100px;
	margin: 80px auto;
    text-align: center;
}
input[type="radio"] {
	display: none;
}
.tab_area {
	font-size: 0;
	margin: 0 20px;
	border-bottom: 1px solid #ccc;
}
.tab_area label {
	width: 250px;
	margin: 0 15px;
	display: inline-block;
	padding: 12px 0;
	color: black;

	text-align: center;
	font-size: 20px;
	cursor: pointer;
	transition: ease 0.2s opacity;
	border:1px solid #ccc;
	border-radius: 5px 5px 0 0;
}
.tab_area label:hover {
	opacity: 0.5;
}

.panel_area {
	background: #fff;
}
.tab_panel {
	width: 100%;
	padding: 80px 0;
	display: none;
}
.tab_panel p {
	font-size: 14px;
	letter-spacing: 1px;
	text-align: center;
}
#tab1:checked ~ .tab_area .tab1_label {
	background: #dff3fd;;

}
#tab1:checked ~ .panel_area #panel1 {
	display: block;
}
#tab2:checked ~ .tab_area .tab2_label {
	background: #dff3fd;;

}
#tab2:checked ~ .panel_area #panel2 {
	display: block;
}
#tab3:checked ~ .tab_area .tab3_label {
	background: #dff3fd;;

}
#tab3:checked ~ .panel_area #panel3 {
	display: block;
}
.size16{
	text-align:left;
	font-size:16px;
}