/* ************************************** _

タイトル：layout.css

レイアウト用CSSファイル

_ ************************************** */


/* ログイン
---------------------------------------------------------------------------- */
.login_wrap{
	text-align:center;
	margin-top:90px;
}
.login_wrap input[type="text"]{
	width:400px;
	margin:0 auto 8px auto;
	display:block;
}
.login_wrap input[type="password"]{
	width:400px;
	margin:0 auto 8px auto;
	display:block;
}
.login_wrap p{
	color:#ff1d25;
	font-weight:bold;
}

/* ダッシュボード
---------------------------------------------------------------------------- */
.column4_list{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items:stretch;
	align-content:stretch;
	max-width:980px;
	width:100%;
	overflow:hidden;
}
.column4_list div.rollover{
	flex-basis: 480px;
	max-width:480px;
	height:215px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	border:1px solid #29abe2;
	color:#29abe2;
	font-weight:bold;
	text-align:center;
	background-color: #fff;
	border-radius: 5px;
	margin:0 0 20px 0;
	position: relative;
	-webkit-transition: all .3s;
    transition: all .3s;
}

.column4_list div ul{
	width:100%;
}
.column4_list div ul li{
	display: flex; /* 子要素をflexboxで揃える */
    flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */
	align-content: center;  /* 子要素をflexboxにより中央に配置する */
	height:215px;
	font-weight:bold;
	font-size:22px;
}
.column4_list div ul li p{
	margin-bottom:20px;
}
.column4_list div a{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent:-999px;
}

.column4_list div.rollover:hover {
    filter:alpha(opacity=70);/* IE 6,7*/
    -ms-filter: "alpha(opacity=70)";/* IE 8,9 */
    -moz-opacity:0.7;/* FF , Netscape */
    -khtml-opacity: 0.7;/* Safari 1.x */
    opacity:0.7;
    zoom:1;/*IE*/
}

/* 入力
---------------------------------------------------------------------------- */

ul.side_slide{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	width:100%;
	margin-bottom:30px;
}
ul.side_slide li{
	flex-basis: auto;
	min-width:30px;
	margin:0 20px;
	font-size:24px;
	font-weight:normal;
}
ul.side_slide li:nth-child(2){
	padding-top:5px;
}

ul.upimg{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items:stretch;
	align-content:stretch;
	width:100%;
	margin-bottom:50px;
}
ul.upimg li{
	flex-basis: 23%;
	max-width:23%;
	position:relative;
	margin-bottom:30px;
}
ul.upimg li h5{
	border-bottom:1px solid #ccc;
	margin-bottom:2px;
	padding-left:5px;
	font-weight:normal;
	font-size:30px!important;
}


ul.upimg li img{
	width:auto;
	margin-top:8px;
	pointer-events: none;
	display:block;
}

ul.upimg li canvas{
	margin-bottom:5px;
	width:100%;
}
/*
ul.upimg li label img {
  pointer-events: auto;
}
*/

ul.upimg li label{
	background-image: url(../images/cmn_img/choice_img.png);
	background-size:cover;
	width:216px;
	height:52px;
	margin-top:5px;
}

ul.upimg li label input{
  display:none;
}
ul.upimg li label input{
  cursor:pointer;
}
ul.upimg li .btn-primary{
  margin-top:5px;
}

ul.upimg li button {
    -webkit-appearance: button;
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: buttontext;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    background-color: buttonface;
    box-sizing: border-box;
    margin: 0em;
    font: 400 13.3333px ;
    padding: 4px 6px 0 6px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;
    border-image: initial;
}

ul.upimg li .close{
		position:absolute;
		display:inline-block;
		top:120px;
		right:4px;
		width:40px;
		height:40px;
		border:0;
		background-color:black;
		border-radius:5px;
		margin:0;
		padding:0;
		transform:scale(0.5);
		cursor:pointer;
	}
ul.upimg li .close:before{
		content:"";
		position:absolute;
		display:inline-block;
		top:8px;
		left:17px;
		width:6px;
		height:24px;
		border:0;
		margin:0;
		padding:0;
		background-color:white;
		-moz-transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		transform:rotate(45deg);
	}
ul.upimg li .close:after{
		content:"";
		position:absolute;
		display:inline-block;
		top:8px;
		left:17px;
		width:6px;
		height:24px;
		border:0;
		margin:0;
		padding:0;
		background-color:white;
		-moz-transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		transform:rotate(-45deg);
	}
ul.upimg li .close:hover{
		background-color:red;
	}
ul.upimg li p{
		font-size:30px!important;
	}

.attention_wrap{
	width:100%;
	padding:10px 20px 0 20px;
}
.attention_wrap p{
	color: #FF0000 !important;
}

/* インラインフレーム用
---------------------------------------------------------------------------- */
.popupframewrap{
	padding:0 40px 100px 40px;
	min-height:600px;
	overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* ポップアップ
---------------------------------------------------------------------------- */

ul.popup_shinkibtn{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items:stretch;
	align-content:stretch;
	width:100%;
}
ul.popup_shinkibtn li{
	flex-basis: auto;
	max-width:auto;
	padding:0 2px;
	height:auto!important;
}
ul.popup_shinkibtn li input{
	width:100%;
}

ul.popup_shinkibtn2{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items:stretch;
	align-content:stretch;
	width:250px;
	margin:0 auto 45px auto;
}
ul.popup_shinkibtn2 li{
	flex-basis: 100%;
	max-width:100%;
	padding:0 2px;
	height:auto!important;
}
ul.popup_shinkibtn2 li input{
	width:100%;
}


.popaup_ketteibtn{
	position: fixed;
	bottom:20px;
	width: 100%;
	text-align: center;
	margin-left:-40px;
	z-index:9999;
}

/*IE ハック 決定ボタンのpadding*/
.ie_pdbtm{
	padding-bottom: 100px\9; /* IE10以下 */
}
@media all and (-ms-high-contrast: none){
  .ie_pdbtm{
    padding-bottom: 100px; /* IE10以上 */
  }
}

/* 見積もり編集画面
---------------------------------------------------------------------------- */
#swaipe_wrap{
  width: 980px;
  margin:0 auto 0;
	background-color:#fff;
}
.slide-item{
  width:100%;
}
#swaipe_wrap li{
  padding:20px 20px 40px 20px;
}
#thumbnail-list{
  width: 980px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap:wrap;
}
.thumbnail-item{
  flex: 0 1 23%;
	box-sizing: border-box;
  position:relative;
	background-color: #29ABE2;
	color:#fff;
	text-align:center;
	cursor: pointer;
	padding:5px 0;
}
.thumbnail-current{
	background-color: #fff;
	color:#29ABE2;
}


.mitsumori_credit{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items:stretch;
	align-content:stretch;
	width:100%;
}
.mitsumori_credit div{
	flex-basis: 47.5%;
	max-width: 47.5%;
	padding:20px;
	text-align:center;
}
.mitsumori_credit div.plan1{
	background-color:#effbff;
}
.mitsumori_credit div.plan1 h3{
	background-color:#00bfff;
	color:#fff;
	text-align:center;
	padding:10px;
	font-weight:bold;
	margin-bottom:10px;
}
.mitsumori_credit div.plan2{
	background-color:#fffdef;
}
.mitsumori_credit div.plan2 h3{
	background-color:#ffc000;
	color:#fff;
	text-align:center;
	padding:10px;
	font-weight:bold;
	margin-bottom:10px;
}

.mitsumori_credit table{
	width:100%;
	text-align:left;
}
.mitsumori_credit table th{
	width:40%;
	padding:3px 5px;
}
.mitsumori_credit table td{
	width:60%;
	text-align:right;
	padding:3px 5px;
}
/*7段組みtable 見積もりトータル */
.mitumori_carname{
	background-color: #fff;
	padding:1px 20px 10px 20px;
	margin-bottom:10px;
}
.mitumori_carname p{
	font-weight:bold;
	margin-bottom:0px;
}
table.mitumori_total{
	width:100%;
	text-align:center;
	margin-top:-10px;
}
table.mitumori_total th{
	padding:0 5px;
	vertical-align: bottom;
	width:23.5%;
	font-size:70%;
}
table.mitumori_total th:nth-child(2) , table.mitumori_total th:nth-child(4) , table.mitumori_total th:nth-child(6){
	width:2%;
}
table.mitumori_total td{
	padding:0 5px 0 5px ;
	vertical-align: top;
	text-align:right;
	border-radius: 5px;
}
table.mitumori_total td.wakunone{
	border:none;
}

table.mitumori_total td input[type="text"] , table.mitumori_total td input[type="number"]{
	text-align:right;
	width:100%;
	padding: 5px 10px;
}

/*諸費用　下取り　table  */
.sitadori_wrap{
	width:980px;
	position:relative;
	height:60px;
}
.sitadori_wrap p{
	position:absolute;
	top:0;
	left:120px;
}
ul.sitadori_slide{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	width:700px;
	margin-bottom:30px;
	position:absolute;
	top:-18px;
	right:0px;
}
ul.sitadori_slide li{
	flex-basis: auto;
	min-width:30px;
	margin:0;
	font-size:24px;
	font-weight:normal;
	text-align:center;
}

ul.sitadori_slide li:nth-child(2){
	line-height:1.2;
}

table.sitadori_table{
	max-width:980px;
	width:100%;
	margin-bottom:20px;
	
}
table.sitadori_table td{
	padding:0 5px;
	
}
table.sitadori_table td:nth-of-type(1){
	text-align:left;
}
table.sitadori_table td:nth-of-type(2){
	text-align:center;
}
table.sitadori_table td:nth-of-type(3){
	text-align:right;
}


ul.creditdetailbtn_wrap{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items:stretch;
	align-content:stretch;
	width:100%;
	margin:50px 0 0 0;
}
ul.creditdetailbtn_wrap li{
	flex-basis: 30%;
	max-width:30%;
}

/* 在庫車
---------------------------------------------------------------------------- */
.zaiko_topbar{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items:center;
	align-content:stretch;
	width:100%;
	margin-bottom:25px;
	padding-bottom:30px;
	border-bottom:3px solid #29ABE2;
}
.zaiko_topbar li.icon-wrap{
	flex-basis: 12.7%;
	max-width: 12.7%;
}
.zaiko_topbar li.conditions-wrap{
	flex-basis: 23%;
	max-width: 23%;
}
.zaiko_topbar li.syasyu-wrap{
	flex-basis: 23%;
	max-width: 23%;
}
.zaiko_topbar li.tenpo-wrap{
	flex-basis: 23%;
	max-width: 23%;
}
.zaiko_topbar li.shinki-wrap{
	flex-basis: 12%;
	max-width: 12%;
}

.icon-choice{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items:stretch;
	align-content:stretch;
	width:100%;
}
.icon-choice div{
	flex-basis: 48%;
	max-width: 48%;
}
.icon-choice div img{
	width: 100%;
	opacity:0.5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha( opacity=50 )";
	background: #fff;
}

.icon-choice div a:hover img{
	opacity:80;
	filter: alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
	background: #fff;
}

.icon-choice div.active img{
	opacity:100;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
	background: #fff;
}
.conditions-choice{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items:stretch;
	align-content:stretch;
	width:100%;
	text-align:center;
}
.conditions-choice div{
	flex-basis: 31%;
	max-width: 31%;
}
.conditions-choice ul{
	font-size:70%;
}


ul.card_wrap{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content:flex-start;
	align-items:stretch;
	align-content:stretch;
	width:940px;
}
ul.card_wrap li{
	flex-basis: 32%;
	max-width: 32%;
	/*margin-bottom:20px;*/
	margin:0 0.6% 20px 0.6%;
	background-color:#f2f2f2;
	padding:15px 10px;
	position:relative;
}
ul.card_wrap li p{
	border-bottom:1px solid #ccc;
	line-height:1.3;
	padding:2px 0 5px 0;
	margin-bottom:3px;
}
ul.card_wrap li .card_img{
	margin-bottom:5px;
	border-bottom:none;
	position:relative;
}

ul.card_wrap li .card_img button{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	cursor: pointer;
}
ul.card_wrap li .card_img img{
	width:100%;
}
ul.card_wrap li .syoudancyu_card , ul.card_wrap li .baiyakuzumi_card{
	position:absolute;
	top:25px;
	right:25px;
}
ul.card_wrap li .syoudancyu_card span{
	padding: 3px 8px;
	background-color:#FFFD00;
	font-weight:bold;
}
ul.card_wrap li .baiyakuzumi_card span{
	padding: 3px 8px;
	background-color:#BCBCBC;
	font-weight:bold;
}
ul.card_wrap li .card_wrap_btn{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items:stretch;
	align-content:stretch;
	width:100%;
	margin-top:12px;
}
ul.card_wrap li .card_wrap_btn div{
	flex-basis: 55px;
	max-width: 55px;
	margin:0 10px;
}
ul.card_wrap li .card_wrap_btn div.mitsu{
	flex-basis: 90px;
	max-width: 90px;
}

/* マイナスアイコン
---------------------------------------------------------------------------- */
.mainasu {
	margin: auto;
	width: 39px;
}
.mainasu input[type="checkbox"] {
display: none;
}

.mainasu label {
  display: block;
  box-sizing: border-box;
  text-align: center;
  /*border: 2px solid #78bd78;*/
  border-radius: 3px;
  height: 39px;
  font-size: 18px;
  line-height: 39px;
  font-weight: bold;
  background: #eee;
  /*box-shadow: 1px 1px 2px #999;*/
  transition: .3s;
}
 
.mainasu label span:after{
  content        : "△";
  color          : #ccc;
}
.mainasu #mainasu_check:checked + label {
  background     : #E22959;
  box-shadow     : none;
}
.mainasu #mainasu_check:checked + label span:after {
  content        : "▲";
  color          : #fff;
}

ul.if_mainasu{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items:stretch;
	align-content:stretch;
	width:210px;
	margin:0 auto 4px auto;
}
ul.if_mainasu li:nth-child(1){
	flex-basis: 46px;
	max-width: 46px;
	margin-right:4px;
}
ul.if_mainasu li:nth-child(2){
	flex-basis: 160px;
	max-width: 160px;
}

.ClearBtn{
	width:218px;
	margin:0 auto 4px auto;
}
.ClearBtn input[type="button"]{
    display: inline-block;
	width:70px;
	height:60px;
    text-decoration: none;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100;Black+3D */
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
    color: #FFF;
    border-bottom: solid 4px #333;
    border-radius: 3px;
	font-size:20px;
}

.ClearBtn input[type="button"]:active {/*ボタンを押したとき*/
    -ms-transform: translateY(2px);
    -webkit-transform: translateY(2px);
    transform: translateY(2px);/*下に動く*/
    border-bottom: none;/*線を消す*/
}

/* クレジット切り替え
---------------------------------------------------------------------------- */
.arrow{
    position: relative;
    display: inline-block;
    padding: 0 0 0 0;
	margin:0 10px 5px 5px;
    color: #fff;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
	
}
.arrow::before,
.arrow::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.credit_yaji{
    left: 3px;
    width: 37px;
    height: 2px;
    background: #fff;
}

.credit_yaji::before{
    left: 30px;
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.credit_yaji::after{
    left: 0px;
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.kirikaebtn {
  display: inline-block;
  width: 200px;
  height: 50px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
	border-radius: 25px;
	cursor: pointer;
	margin: 0;
}
.kirikaebtn::before,
.kirikaebtn::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.kirikaebtn,
.kirikaebtn::before,
.kirikaebtn::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.kirikaebtn {
  background-color: #8DE229;
  color: #fff;
}
.kirikaebtn:hover {
  background-color: #a9ea5d;
}

.kirikaebtn_wrap{
	text-align:center;
	width:200px;
	margin:20px auto 0 auto
}
.kirikaebtn_wrap a {
  color:
	  #fff!important;
}
.kirikaebtn_wrap a:hover {
  color:
	  #fff!important;
	text-decoration: none;
}


/* ページャー  */
.pager .pagination {
  text-align: center;
	margin:15px 0;
}

.pager .pagination li {
  display: inline;
  margin: 0 5px;
  padding: 0;
  display: inline-block;
  background:#fff;
  width: 50px;
  height: 50px;
  text-align: center;
  position: relative;
}


.pager .pagination li a{
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display:table;
  color: #2AABE4;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
  border:1px solid #2AABE4;
  border-radius: 50px;
}

.pager .pagination li.pre a , .pager .pagination li.next a{
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display:table;
  color: #2AABE4;
  border:none!important;
	font-size:200%;
	line-height:1.0;
}
.pager .pagination li.saisyo a , .pager .pagination li.saigo a{
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display:table;
  color: #2AABE4;
	font-size:200%;
	line-height:1.0;
}

.pager .pagination li a span{
  display:table-cell;
  vertical-align:middle;
}
.pager .pagination li.pre a span , .pager .pagination li.next a span{
  display:table-cell;
  vertical-align:top;
}
.pager .pagination li.saisyo a span , .pager .pagination li.saigo a span{
  display:table-cell;
  vertical-align:top;
}

.pager .pagination li a:hover,
.pager .pagination li a.active{
  color: #fff;
  background: #2AABE4;
  border-radius: 50px;
}