@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/************************************
** テーブル（Table）
************************************/
/*テーブル */
table {
	margin-bottom: 20px;
	width: 100%;
}

table tr td {
	padding: 5px;
	border: 1px #ccc solid;
	font-size: 13px;
	line-height: 18px;
}

table th {
	padding: 5px;
	border: 1px #ccc solid;
	font-size: 13px;
	line-height: 18px;
}
.post table tr:nth-child(even) {
	background-color: rgba(220,220,220,0.2);
}

#main .post table {
	color: #333;
}

.example table tr td {
	padding: 5px 1px;
	line-height: 1.5em;
}

.example table th {
	padding: 8px 1px;
	line-height: 1.5em;
}
th.grade {
	width:40%;
}

/*テーブル（装飾なし） */
.post .notab table {
	border:none;
	width: initial; /* 初期状態にリセット */
	max-width: initial; /* 初期状態にリセット */
}

.notab table tr td {
	border:none;
	text-align: left;
	vertical-align: top;
}

.notab table th {
	border:none;
}
.post .notab table tr:nth-child(even) {
	background-color: transparent;
}

.article th,
.article td{
  	padding: 5px 15px;
}
table.price-zone td,
table.grade td,
.article .example table td {
	text-align: center;
}
.article .example table {
	font-size: 12px;
}
table.price-zone,
.article table.grade {
	font-size: 12px;
}
td.price {
	font-weight: bold;
	background: #FFFFEA;
}
/************************************
** レビュータイトル
************************************/
.wpcr3_review_title {
	font-size: 30px;
	font-weight: bold;
}

/************************************
** ランキング
************************************/

h3.rank1 {
	background-image: url(https://kuruma-kaitori.crerea.net/wp-content/uploads/2017/06/rank1.png);
	background-position: left;
	background-repeat: no-repeat;
	padding-left: 70px;
}
h3.rank2 {
	background-image: url(https://kuruma-kaitori.crerea.net/wp-content/uploads/2017/06/rank2.png);
	background-position: left;
	background-repeat: no-repeat;
	padding-left: 70px;
}
h3.rank3 {
	background-image: url(https://kuruma-kaitori.crerea.net/wp-content/uploads/2017/06/rank3.png);
	background-position: left;
	background-repeat: no-repeat;
	padding-left: 70px;
}
h3.rank4 {
	background-image: url(https://kuruma-kaitori.crerea.net/wp-content/uploads/2017/06/rank4.png);
	background-position: left;
	background-repeat: no-repeat;
	padding-left: 70px;
}

img.size-full {
	border: 5px solid #eee;
	margin-bottom: 30px;
}
.center {
	text-align:center;
}
.article p.rank-cat {
	font-weight:bold;
	font-size:20px;
	margin-top: 10px;
	margin-bottom:20px;
	}
.article p.nar {
	margin-top: 20px;
	margin-bottom:0px;
	}
p.rank1 {
	background-image: url(https://kuruma-kaitori.crerea.net/wp-content/uploads/2017/06/rank1.png);
	background-position: left;
	background-repeat: no-repeat;
	padding-left: 70px;
	font-size: 24px;
	font-weight: bold;
	line-height: 44px;
}
p.rank2 {
	background-image: url(https://kuruma-kaitori.crerea.net/wp-content/uploads/2017/06/rank2.png);
	background-position: left;
	background-repeat: no-repeat;
	padding-left: 70px;
	font-size: 24px;
	font-weight: bold;
	line-height: 44px;
}
p.rank3 {
	background-image: url(https://kuruma-kaitori.crerea.net/wp-content/uploads/2017/06/rank3.png);
	background-position: left;
	background-repeat: no-repeat;
	padding-left: 70px;
	font-size: 24px;
	font-weight: bold;
	line-height: 44px;
}
.gaiyo {
	border: 1px solid #CCC;
	padding: 20px;
	background-color: #FFFFEA;
}
img.wp-image-5999 {
	border-radius: 8px;         /* CSS3 */
	-moz-border-radius: 8px;    /* Firefox */
	-webkit-border-radius: 8px; /* Safari,Chrome */
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.50);
	-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.50);
	-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.50);
}
a img.wp-image-5999:hover {		
	filter: alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
	opacity: 1;
}

/************************************
** かんたん車査定
************************************/
#assess-form {
	background:#FFF url(images/assess-arrow.png) no-repeat top;
	margin-bottom: 30px;
	margin-top: 0px;
	text-align: center;
	padding: 15px;
	border-radius: 8px;         /* CSS3 */
	-moz-border-radius:  8px;    /* Firefox */
	-webkit-border-radius:  8px;
	border-top-width: 1px;
	border-right-width: 4px;
	border-bottom-width: 4px;
	border-left-width: 4px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FF5811;
	border-right-color: #FF5811;
	border-bottom-color: #FF5811;
	border-left-color: #FF5811;
}
#assess-form #kantan-frame {
	background: #FFF url(images/assess-form-bg.png) no-repeat bottom;
	padding: 15px 15px 6px;
	box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.50);
	-moz-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.50);
	-webkit-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.50);
}
#assess-form img {	
	box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.50);
	-moz-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.50);
	-webkit-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.50);
}
#assess-form p {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 5px;
}
#assess-form p#assess-intro {
	color: #FFF;
	margin-bottom: 25px;
	line-height: 1.2em;
}
.red {
	color: #F00030;
}
.blue {
	color: #39F;
}
.y-bg {
	background: #FF6;
}
img.no-frame {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
@media only screen and (max-width : 880px) {
	#assess-form {
	margin-bottom: 20px;
	padding-right: 10px;
	padding-left: 10px;
	}
}
@media only screen and (max-width : 640px) {
	#assess-form {
	background: #FFFFF6 url(images/assess-arrow.png) no-repeat top;
	margin-bottom: 20px;
	padding: 15px 10px;
	}
	#assess-form #kantan-frame {
	background: #FFFFF6;
	padding: 0px;		
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
	-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
	-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
	}
	#assess-form p {
	font-size: 16px;	
	margin-bottom: 5px;
	}
	#assess-form p#assess-intro {
	margin-bottom: 22px;
  	}
	.gaiyo {
	margin-right: 0px;
	margin-left: 0px;
	}
}

/************************************
** ユーカーパック
************************************/

#assess-form-u {
	background:#FFF url(https://kuruma-kaitori.crerea.net/wp-content/uploads/2019/10/assess-arrow-uc4.png) no-repeat top;
	margin-bottom: 30px;
	margin-top: 0px;
	text-align: center;
	padding: 15px;
	border-radius: 8px;         /* CSS3 */
	-moz-border-radius:  8px;    /* Firefox */
	-webkit-border-radius:  8px;
	border-top-width: 1px;
	border-right-width: 4px;
	border-bottom-width: 4px;
	border-left-width: 4px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #e6006d;
	border-right-color: #e6006d;
	border-bottom-color: #e6006d;
	border-left-color: #e6006d;
}
#assess-form-u #ucar-frame {
	background: #FFF;
	padding: 15px 15px 6px;
}
#assess-form-u img {	
	box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.50);
	-moz-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.50);
	-webkit-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.50);
}
#assess-form-u p {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 5px;
}
#assess-form-u p#assess-intro {
	color: #FFF;
	margin-bottom: 30px;
	line-height: 1.2em;
}

@media only screen and (max-width : 880px) {
	#assess-form-u {
	margin-bottom: 20px;
	padding-right: 10px;
	padding-left: 10px;
	}
}
@media only screen and (max-width : 640px) {
	#assess-form-u {
	background: #FFFFF6 url(https://kuruma-kaitori.crerea.net/wp-content/uploads/2019/10/assess-arrow-uc.png) no-repeat top;
	margin-bottom: 20px;
	padding: 15px 10px;
	}
	#assess-form-u #ucar-frame {
	background: #FFFFF6;
	padding: 0px;
	}
	#assess-form-u p {
	font-size: 16px;	
	margin-bottom: 5px;
	}
	#assess-form-u p#assess-intro {
	margin-bottom: 35px;
  	}
}

/************************************
** カーセンサー
************************************/

#assess-form-carsen {
	background:#FFF url(https://kuruma-kaitori.crerea.net/wp-content/uploads/2020/05/assess-arrow-carsen1.png) no-repeat top;
	margin-bottom: 30px;
	margin-top: 0px;
	text-align: center;
	padding: 15px;
	border-radius: 8px;         /* CSS3 */
	-moz-border-radius:  8px;    /* Firefox */
	-webkit-border-radius:  8px;
	border-top-width: 1px;
	border-right-width: 4px;
	border-bottom-width: 4px;
	border-left-width: 4px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #ff5518;
	border-right-color: #ff5518;
	border-bottom-color: #ff5518;
	border-left-color: #ff5518;
}
#assess-form-carsen #carsen-frame {
	background: #FFF;
	padding: 15px 15px 6px;
}
#assess-form-carsen img {	
	box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.50);
	-moz-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.50);
	-webkit-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.50);
}
#assess-form-carsen p {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 5px;
}
#assess-form-carsen p#assess-intro {
	color: #FFF;
	margin-bottom: 30px;
	line-height: 1.2em;
}

@media only screen and (max-width : 880px) {
	#assess-form-carsen {
	margin-bottom: 20px;
	padding-right: 10px;
	padding-left: 10px;
	}
}
@media only screen and (max-width : 640px) {
	#assess-form-carsen {
	background: #FFFFF6 url(https://kuruma-kaitori.crerea.net/wp-content/uploads/2020/05/assess-arrow-carsen2.png) no-repeat top;
	margin-bottom: 20px;
	padding: 15px 10px;
	}
	#assess-form-carsen #carsen-frame {
	background: #FFFFF6;
	padding: 0px;
	}
	#assess-form-carsen p {
	font-size: 16px;	
	margin-bottom: 5px;
	}
	#assess-form-carsen p#assess-intro {
	margin-bottom: 35px;
  	}
}

/************************************
** 追加CSS
************************************/
.article ul {
	margin-bottom: 0;
}
.graybox {
	padding:15px;
	border:solid 1px #ccc;
	background-color:#f3f3f3;
	margin-bottom:20px;
	line-height: 25px;
}
.framebox {
	padding:15px;
	border:solid 1px #ccc;
	margin-bottom:20px;
	line-height: 25px;
	background-color:#fafafa;
}
img.kanrinin {
	border:none
}
a img:hover {	
	filter: alpha(opacity=85);
	-moz-opacity:0.85;
	-khtml-opacity: 0.85;
	opacity: 0.85;
}

/*吹き出し*/
 * .chat-l,
.chat-r{
	position: relative;
	overflow: hidden;
	margin: 0;
}

.bubble{
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 80%;
	min-height: 60px;
	margin-bottom: 2em;
	padding: 1em;
	border: 1px solid #dde1e1;
	background: #fff;
}

.bubble .bubble-in{
	border-color: #fff;
}

.talker{
	display: block;
	width: 15%;
	height: auto;
	text-align: center;
}

.talker b{
	font-weight: normal;
}

.talker img{
	display: block;
	width: 100px;
	max-width: 100%;
	max-width: none\9;/*IE8への対応*/
	margin: auto;
}

html:not(:target) .talker img{
    max-width: 100%; /*IE9以上への対応*/
}

.chat-l .talker{
	float: left;
	margin-right: 2%;
}

.chat-r .talker{
	float: right;
	margin-left: 2%;
}

.chat-l .bubble{
	float: right;
}

.chat-r .bubble{
	float: left;
}

.bubble .bubble-in:after,
.bubble .bubble-in:before{
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	border: solid transparent;
	content: "";
}

/*吹き出しの微調整*/
.bubble .b-arw20:after,
.bubble .b-arw20:before{ top: 20%; }
.bubble .b-arw30:after,
.bubble .b-arw30:before{ top: 30%; }
.bubble .b-arw40:after,
.bubble .b-arw40:before{ top: 40%; }
.bubble .b-arw60:after,
.bubble .b-arw60:before{ top: 60%; }
.bubble .b-arw70:after,
.bubble .b-arw70:before{ top: 70%; }
.bubble .b-arw80:after,
.bubble .b-arw80:before{ top: 80%; }

.chat-l .bubble .bubble-in:after,
.chat-l .bubble .bubble-in:before{
	right: 100%;
}

.chat-r .bubble div:after,
.chat-r .bubble div:before{
	left: 100%;
}

.chat-l .bubble .bubble-in:after{
	margin-top: -8px;
	border-width: 8px 20px;
	border-color: transparent;
	border-right-color: inherit;
}

.chat-l .bubble .bubble-in:before{
	margin-top: -9px;
	border-width: 9px 21px;
	border-color: transparent;
	border-right-color: #dde1e1;
}

.chat-r .bubble .bubble-in:after{
	margin-top: -8px;
	border-width: 8px 20px;
	border-color: transparent;
	border-left-color: inherit;
}

.chat-r .bubble .bubble-in:before{
	margin-top: -9px;
	border-width: 9px 21px;
	border-color: transparent;
	border-left-color: #dde1e1;
}

.bubble p:first-child{
	margin-top: 0;
}

/*吹き出し 会話者が複数人の場合*/
.together .talker,
.together .bubble{
	width: 100%;
}

.together .talker b{
	display: inline-block;
	text-align: center;
}

.together.chat-l .talker,
.together.chat-r .talker{
	float: none;
	margin: 0 0 20px;
}

.together.chat-l .talker{
	text-align: left;
}

.together.chat-r .talker{
	text-align: right;
}

.together.chat-l .bubble,
.together.chat-r .bubble{
	float: none;
}

.together .bubble .bubble-in:after,
.together .bubble .bubble-in:before{
	top: auto;
	bottom: 100%;
}

.together.chat-l .bubble .bubble-in:after,
.together.chat-l .bubble .bubble-in:before{
	right: auto;
	left: 10%;
}

.together.chat-r .bubble .bubble-in:after,
.together.chat-r .bubble .bubble-in:before{
	right: 10%;
	left: auto;
}

.together.chat-l .bubble .bubble-in:after{
	margin-top: -20px;
	margin-left: -8px;
	border-width: 20px 8px;
	border-color: transparent;
	border-bottom-color: inherit;
}

.together.chat-l .bubble .bubble-in:before{
	margin-top: -21px;
	margin-left: -9px;
	border-width: 21px 9px;
	border-color: transparent;
	border-bottom-color: #dde1e1;
}

.together.chat-r .bubble .bubble-in:after{
	border-width: 20px 8px;
	margin-top: -20px;
	margin-right: -8px;
	border-color: transparent;
	border-bottom-color: inherit;
}

.together.chat-r .bubble .bubble-in:before{
	margin-top: -21px;
	margin-right: -9px;
	border-width: 21px 9px;
	border-color: transparent;
	border-bottom-color: #dde1e1;
}

.bubble-in p:last-child{
	margin-bottom: 0;
}

/*-------------------------------------------------------
  吹き出し
-------------------------------------------------------*/
/*吹き出しサイズ調整*/
.bubble{
	margin-top: 25px;
	width: auto;
	min-height: 30px;
	padding: 5px 10px 5px 10px;
	border: 0px solid #ccc;
}
/*吹き出し位置調整*/
.chat-l .bubble{
	float: left;
	margin-left: -10px;
}
.chat-r .bubble{
	float: right;
	margin-right: -10px;
}
/*吹き出ししっぽ*/
.chat-l .bubble .bubble-in:after{
	top: 0px;
	margin-top: 0px;
	margin-right: -5px;
	border-width: 5px 7px;
	border-color: transparent;
	border-top-color: inherit;
	border-right-color: inherit;
}
.chat-l .bubble .bubble-in:before{
	top: 0px;
	margin-top: 0px;
	margin-right: -6px;
	border-width: 6px 8px;
	border-color: transparent;
	border-top-color: inherit;
	border-right-color: inherit;
}
.chat-r .bubble .bubble-in:after{
	top: 0px;
	margin-top: 0px;
	margin-left: -5px;
	border-width: 5px 7px;
	border-color: transparent;
	border-top-color: inherit;
	border-left-color: inherit;
}
.chat-r .bubble .bubble-in:before{
	top: 0px;
	margin-top: 0px;
	margin-left: -6px;
	border-width: 6px 8px;
	border-color: transparent;
	border-top-color: inherit;
	border-left-color: inherit;
}


/*-------------------------------------------------------
  吹き出し
-------------------------------------------------------*/
/*吹き出しサイズ調整*/
.bubble{
	margin-top: 25px;
	width: auto;
	max-width: 80%;
	min-height: 30px;
	padding: 5px 10px 5px 10px;
	border: 0px solid #ccc;
}
/*吹き出し位置調整*/
.chat-l .bubble{
	float: left;
	margin-left: -10px;
}
.chat-r .bubble{
	float: right;
	margin-right: -10px;
}
/*吹き出ししっぽ*/
.chat-l .bubble .bubble-in:after{
	top: 0px;
	margin-top: 0px;
	margin-right: -5px;
	border-width: 5px 7px;
	border-color: transparent;
	border-top-color: inherit;
	border-right-color: inherit;
}
.chat-l .bubble .bubble-in:before{
	top: 0px;
	margin-top: 0px;
	margin-right: -6px;
	border-width: 6px 8px;
	border-color: transparent;
	border-top-color: inherit;
	border-right-color: inherit;
}
.chat-r .bubble .bubble-in:after{
	top: 0px;
	margin-top: 0px;
	margin-left: -5px;
	border-width: 5px 7px;
	border-color: transparent;
	border-top-color: inherit;
	border-left-color: inherit;
}
.chat-r .bubble .bubble-in:before{
	top: 0px;
	margin-top: 0px;
	margin-left: -6px;
	border-width: 6px 8px;
	border-color: transparent;
	border-top-color: inherit;
	border-left-color: inherit;
}



/*-------------------------------------------------------
  吹き出し
-------------------------------------------------------*/
/*吹き出しサイズ調整*/
.bubble{
 margin-top: 25px;
 width: auto;
 min-height: 30px;
 padding: 10px 15px 10px 15px;
 border: 0px solid #ccc;
}
/*吹き出し位置調整*/
.chat-l .bubble{
 float: left;
 margin-left: -10px;
}
.chat-r .bubble{
 float: right;
 margin-right: -10px;
}
/*吹き出ししっぽ*/
.chat-l .bubble .bubble-in:after{
 top: 0px;
 margin-top: 0px;
 margin-right: -5px;
 border-width: 5px 7px;
 border-color: transparent;
 border-top-color: inherit;
 border-right-color: inherit;
}
.chat-l .bubble .bubble-in:before{
 top: 0px;
 margin-top: 0px;
 margin-right: -6px;
 border-width: 6px 8px;
 border-color: transparent;
 border-top-color: inherit;
 border-right-color: inherit;
}
.chat-r .bubble .bubble-in:after{
 top: 0px;
 margin-top: 0px;
 margin-left: -5px;
 border-width: 5px 7px;
 border-color: transparent;
 border-top-color: inherit;
 border-left-color: inherit;
}
.chat-r .bubble .bubble-in:before{
 top: 0px;
 margin-top: 0px;
 margin-left: -6px;
 border-width: 6px 8px;
 border-color: transparent;
 border-top-color: inherit;
 border-left-color: inherit;
}

@media only screen and (max-width : 1200px){
 .bubble{
 width: auto;
 max-width: 78%;
 }
 .talker{
 width: 20%;
 }
}

table.price-zone tr td, table.grade tr td {
	font-size: 14px;
}

table.price-zone th, table.grade th {
	font-size: 14px;
}



/*Contact Form 7カスタマイズ*/
/*スマホContact Form 7カスタマイズ*/
@media(max-width:500px){
.inquiry th,.inquiry td {
 display:block!important;
 width:100%!important;
 border-top:none!important;
 -webkit-box-sizing:border-box!important;
 -moz-box-sizing:border-box!important;
 box-sizing:border-box!important;
}
.inquiry tr:first-child th{
 border-top:1px solid #d7d7d7!important;
}
/* 必須・任意のサイズ調整 */	
.inquiry .haveto,.inquiry .any {	
font-size:10px;
}}
table.inquiry {
	margin-bottom:20px;
}	
/*見出し欄*/
.inquiry th{
 text-align:left;
 font-size:14px;
 color:#444;
 padding-right:5px;
 width:30%;
 background:#f7f7f7;
 border:solid 1px #d7d7d7;
}
/*通常欄*/
.inquiry td{
 font-size:13px;
 border:solid 1px #d7d7d7;	
}
/*横の行とテーブル全体*/
.entry-content .inquiry tr,.entry-content table{
 border:solid 1px #d7d7d7;	
}
/*必須の調整*/
.haveto{
 font-size:7px;
 padding:5px;
 background:#e50909;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*任意の調整*/
.any{
 font-size:7px;
 padding:5px;
 background:#666;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item{
 display:block;
}
/*送信ボタンのデザイン変更*/
#formbtn{
 display: block;
 padding:10px;
 width:280px;
 background:#e50909;
 color:#fff;
 font-size:22px;
 font-weight:bold;	 
 border-radius:2px;
 margin:25px auto 0;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover{
 background:#fff;
 color:#ffaa56;
 border:2px solid #ffaa56;
}





/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}