@charset "UTF-8";
/* CSS Document DIY情報共通スタイル設定*/

/* clearfix
-------------------------------------------------------------------------------- */
.clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
	position:relative;/*for preview*/
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

/* ページレイアウト設定 */
/* 本文部分の設定 */
#Carea {
	width: 1004px;
	text-align: left;
}
/* ------------------------------------------------------------------------------- */
/* 汎用css設定 */
#Carea h2 {
  height: auto;
/*  background-color: transparent;
  background-image: none;
  border: none;
  color: #333;
  margin: 0;
  padding: 0;*/
}
#Carea h3 {
  height: auto;
  background-color: transparent;
  background-image: none;
  border: none;
  color: #333;
  margin: 0;
  padding: 0;
}
#Carea h4 {
  height: auto;
  background-color: transparent;
  background-image: none;
  border: none;
  color: #333;
  margin: 0;
  padding: 0;
}
#Carea h5 {
  height: auto;
  background-color: transparent;
  background-image: none;
  border: none;
  color: #333;
  margin: 0;
  padding: 0;
}
h2 {
	font-size: 1em;
}
h3 {
	font-size: 1.2em;
}
h4 {
	font-size: 1em;
}
h5 {
	font-size: 1em;
}
p {
	margin: 0px;
}

img {
	border: 0;
}
.imgborder {
	border: 1px solid;
	border-color: #333333;
}

.clear {
	clear: both;
}
.boldtext {
	font-weight: bold;
}
/* 汎用css設定-テキスト指定色の設定 */
/* 赤文字 */
.red {
	font-size:0.8em;
	color: #FF0000;
}
.redtext {
	color: #f00;
}
.orangetext {
	color: #ff8000;
}
.buletext {
	color: #000099;
}
.p_right {
	text-align: right;
}
.p_center {
	text-align: center;
}

.totop {
	clear: both;
  width: 510px;
  height: 16px;
	text-align: right;
}

/* ------------------------------------------------------------------------------- */
/* パンくずリスト部分の設定 */
#pankuzu {
	margin: 0;
	padding: 0 0 0 5px;
	list-style-type: none;
	font-size: 10px;
	line-height: 1.8em;
	background-color: #fff;
	text-align: left;
}
#pankuzu ul {
	width:100%;
	margin: 0;
	padding: 0 0 0.5em 0;
}
#pankuzu li {
	display: inline;
	padding: 0;
}
/* ---------------------------------------------------------------- */


/***********************************************
 * レイアウト
 ***********************************************/
#sidebar-diy {
	float: left;
	margin:0 25px;
	width: 200px;
}
#content-column {
	float: right;
	width: 700px; 
	padding:20px 0 0 0 ;
        margin-right:20px;
}
#content-column-max {
	width: 1004px;
}

.block-topic h2.content_title{
     background:#009844;
     padding:5px 10px;
     color:#fff;
     font-weight:both;
     border-bottom:solid 2px #ccc;

}

.block-topic_haisen{
     text-align:center;
}

.block-topic .main-img{
    width:680px;
    text-align:center;
    margin:0 5px 5px 5px;
}

.block-topic .sub-imgarea{
    width:100%;
    position:relative;
    overflow:hidden;
}

.block-topic .sub-imgarea ul{
    position: relative;
    left: 50%;
    float: left;
}

.block-topic li{
    position: relative;
    right:50%;
    float: left;
}

.block-topic .sub-img{
    width:74px;
    height:74px;
    float:left;
    margin-right:20px;
}

.block-topic .block-topic_left .sub-img.last{
    float:left;
    margin-right:0px;
}

.block-topic .sub-img a{
    width:74px;
    height:74px;
    display:block;
}

.block-topic .main-img img{
	max-width: 680px;
	width: auto !important;
	width: 680px;
}

.block-topic .sub-img img{
	max-width: 72px;
	width: auto !important;
	width: 72px;
	max-height: 72px;
	height: auto !important;
	height: 72px;
}

.block-topic .block-topic_right{
     width:700px;
     margin:20px 0 0 0;
}


#content-column h4 {
     border:solid 1px #B2B2B2;
     border-bottom:solid 2px #009844;
     background:#F2F2F2;
     padding:3px 10px;
     margin:15px 0 0 0;
     font-size:14px;

}

.apply{
    text-align:center;
}
/***********************************************
 * ブロック
 ***********************************************/
.block {margin: 0 0 10px;}
 
#sidebar-diy img {vertical-align: top;}
#sidebar-diy li {padding:0 0 5px 0;}
#sidebar-diy h3 {
	color: #009844;
	padding: 0 0 5px 10px;
	background: url(https://www.amon.jp/img/icon/arrow_right_red.gif) left 0.4em no-repeat;
}

/*-------- サイドバー コンテンツボタン --------*/
#diycont-btn {padding: 30px 0 20px 0;}

/*-------- サイドバー キャンペーンバナー --------*/
#cp-bn {padding: 0 0 10px 0;}

/*-------- サイドバー キャンペーンバナー --------*/
#recommend-contents-bn {padding: 0 0 10px 0;}

/*-------- サイドバー DIYクラブ --------*/
#diyclub-block {padding: 0 0 10px 0;}

/*-------- サイドバー その他バナー --------*/
#other-bn {padding: 20px 0;}

#diyclub-block p {
  margin:0;
  padding: 0;
}

#diyclub-wrap {
	border-left: 1px #999999 solid;
	border-right: 1px #999999 solid;
	padding: 0px 10px;
  margin: 0px;
	width: 218px;
}
#diyclub-wrap-bottom {
	width:240px;
	height:10px;
	margin-bottom: 10px;
	background-image: url(https://www.amon.jp/diy/img/background/bgbt_bloc_diyclub.gif);
	background-repeat: no-repeat;
}  
#diyclub-wrap-bottom hr { display:none; }


/* DIYナビ
-------------------------------------------------------------*/
#sidebar-diy2 {
  margin:0;
  padding:0
  width:240px;
  background-image:url( https://www.amon.jp/diy/img/tpl/product.gif);
  background-repeat:no-repeat;
  padding-top:20px;
   font: "メイリオ", Meiryo, Osaka, sans-serif;
}

#sidebar-diy2 h2{
  margin-bottom:20px;
}

#sidebar-diy2 .accordion2 {
  width:240px;
  font:12px Verdana,Arial;
  color:#033;
}
#sidebar-diy2 .accordion2 h2{
  margin:0 0 20px 0;
  padding:0;
}
#sidebar-diy2 .accordion2 dt {
  width:240px;
  height:96px;
  padding:6px 0 6px 3px;
  font-weight:bold;
  margin-top:5px;
  cursor:pointer;
}

#sidebar-diy2 .accordion2 dd {
  overflow:hidden;
  background:#fff
}

#sidebar-diy2 ul{
  margin:0;
  padding:0;
  margin-left:10px;
}

#Carea #sidebar-diy2 a:visited{
	color:#009ECB;
}

#Carea #sidebar-diy2 a{
  text-decoration:none;
}

#Carea #sidebar-diy2 a:hover{
	color:#F36;
}





#Carea #sidebar-diy2 .accordion2 ul li{
    background: url(https://www.amon.jp/diy/img/liststyle.gif) no-repeat;
    padding-left:20px;
}


#sidebar-diy2 .accordion2 li{
  height:auto;
  margin-top:10px;
  padding-bottom:10px;
  border-bottom:dotted 1px #3E3A39;
  font-size:12px;
  color:#009AE3;
}

#sidebar-diy2 a {
  color:#009AE3;
  text-decoration: none;
}

#accordion a:hover{
  color:#F30;
}

#sidebar-diy2 li span {
  float:right;
  color:#009AE3;
  clear:both;
  font-size:12px;
  height:auto;
  padding-bottom:10px;
}

#sidebar-diy2{
  float:left;
  width:240px;
  height:auto;
  margin-left:20px;
}

#other-bn li{
  margin-bottom:15px;
  border-bottom:dotted 1px #3E3A39;
}

#other-bn li img{
  margin-right:10px;
}


/* 手順
-------------------------------------------------------------*/
.pager_area{
    padding:5px 8px;
    background:#009844;
}

.pager_list,.pager2_list{
    margin:5px 0;
}

.page_no{
     width:131px;
     background:#8FC320;
     float:left;
     margin-right:7px;
     text-align:center;
     line-height:170%;
     color:#fff;

}

.page_no.last{
     width:131px;
     float:right;
     margin-right:0;
}

.page_no a{
     display:block;
     background:#fff;
     text-decoration:none;
}

#centercol .page_no a:link{
     text-decoration:none;
}

.page_no a:hover{
     background:#8FC320;
     color:#fff;
     text-decoration:underline;
}

.gallery_listarea{
    margin-bottom:20px;
}

.gallery_list{
    width:680px;
    padding:0 0 0 0;
    margin:0 0 20px 0;
}

.gallery_list p{
    width:400px;
    margin:0;
    float:right;
	margin-top:10px;
}

.gallery_list img{
	max-width: 240px;
	width: auto !important;
	width: 240px;
	float:left;
	margin-top:10px;
}

.gallery_list .title{
    border-bottom:solid #8CC63F 2px;
    margin:0 0 5px 0;
    float:none;
    width:680px;
}



.gallery_kanren_listarea{
    margin-bottom:20px;
}

.gallery_kanren_list{
    width:210px;
    margin:0 10px;
    float:left;
    word-break: break-all;/* ie用 */
}

.gallery_kanren_list p{
    width:210px;
    margin:0;
    float:right;
	margin-top:10px;
}

.gallery_kanren_list img{
	max-width: 210px;
	width: auto !important;
	width: 210px;
  vertical-align: text-bottom;
}


.gallery_kanren_list .title{
    border-bottom:solid #8CC63F 2px;
    margin:0 0 5px 0;
    float:none;
    width:210px;
}


/*車種別一覧ページ用css
-----------------------------------------------------------------------*/
.car_list{
     width:210px;
     margin:0 10px;
     float:left;
     word-break: break-all;/* ie用 */
}

.car_listarea{
     padding-bottom:20px;
}

.car_list .car_listimg{
     width:210px; 
     border:solid 1px #ccc;
     margin-bottom:10px;
     text-align:center;
	 margin-top:15px;

}

.car_list .car_listimg img{
	max-width: 210px;
	width: auto !important;
	width: 210px;
        vertical-align: text-bottom;
}

ul.car_category li{
    position: none;
    right:0;
}
ul.car_category li a{
    width:162px;
    float:left;
    background:url("https://www.amon.jp/diy/img/arrow_down.gif") no-repeat;
    background-position:0 50%;
    padding-left:20px;
    display:block;
    border-left:solid 3px #009844;
}

p.title{
    /*border-bottom:solid #8CC63F 2px;
    margin:0 0 5px 0;*/
	border-left:solid 5px #009844; 
    padding:0 0 0 5px ;
    margin-bottom:5px;
	vertical-align:middle;
	height:35px;
	display:table-cell;
}

/*ネタ帳　トップ
-----------------------------------------------------------------------*/
.neta_category{
    padding:4px 10px 0 10px;
    margin-bottom:10px;
    background:#009844;
}

.neta_category h3{
    float:left;
}

.neta_category a{
    float:right;
}

.diy_listarea .diy_list{
    width:210px;
    height:auto;
    margin:0 10px 10px 10px; 
    float:left;
}

.diy_listarea .diy_list.right{
    float:right;
}

.diy_listarea .diy_list img{
	max-width: 210px;
	width: auto !important;
	width: 210px;
}

.diy_listarea .diy_list .diy_listimg{
    width:210px;
    border:solid 1px #ccc;
    float:left;
    text-align:center;
	margin-top:15px;
	margin-bottom:10px;
	height:140px;
}

.diy_listarea .diy_list p{
    width: 210px;
}

.diy_listarea .diy_list .diy_title{
    border-left:solid 5px #009844; 
    padding:0 0 0 5px ;
    margin-bottom:5px;
	vertical-align:middle;
	height:35px;
	display:table-cell;
}



/* test */

#content-column4 {
	float: right;
	width: 700px; 
	padding:20px 0 0 0 ;
        margin-right:20px;
}

#content-column2 {
    width: 750px;
    float: left;
    height: auto;
    margin-left: 10px;
    padding:0;
}