@charset "utf-8";
/* CSS Document */
/* reset
---------------------------------------------------- */
body	{ font-size:16px; font-size:1.6rem; }
html	{ font-size:62.5%; }
.categorybox-fix	{ position: sticky; top: 100px; left: 0; padding: 0 0 40px; }
@media (max-width: 767px) { 
	html	{ font-size:50%; }
	.categorybox-fix	{ position: static; display: -webkit-flex; display: flex;  flex-wrap: wrap; justify-content: space-between; font-size:16px; }
	.categorybox-fix > p	{ width: 100%; }
	.categorybox-fix > dl	{ width: 100%; }
	.txtbox > p	{ font-size:16px; }

}



ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}
a {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

ins {
	background-color:#ff9;
	color:#333;
	text-decoration:none;
}

mark {
	background-color:#ff9;
	color:#333;
	font-style:italic;
	font-weight:bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom:1px dotted #333;
	cursor:help;
}

table {
	border-collapse:collapse;
}

hr {
 display:block;
 height:1px;
 border:0;
 border-top:1px solid #cccccc;
 margin:1em 0;
 padding:0;
}

input, select {vertical-align:middle;}

a:focus {outline:none;}
a:hover{
 text-decoration: none;
 transition: all .3s;
}
a,
a::before,
a::after {
	-webkit-transition: all .3s;
	transition: all .3s;
}
.clearfix:after {
	content: "."; 
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {min-height: 1px;}
* html .clearfix {height: 1px;}

.responsible_img{
 width: 100%;
 max-width:auto;
 display: inline-block;
 margin-left: auto;
 margin-right: auto;
}

*, *::before, *::after {
    box-sizing: border-box;
}
.row{
 display: -ms-flexbox;
 display: flex;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
 margin-right: -35px;
 margin-left: -35px;
}
.inner{
 max-width: 750px;
 margin-left: auto;
 margin-right: auto;
}
.row2{
 display: -ms-flexbox;
 display: flex;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
 margin-right: -15px;
 margin-left: -15px;
}
.row .col-6{
 width: 100%;
 position: relative;
-ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
 padding-left: 35px;
 padding-right: 35px;
 margin-bottom: 70px;
 margin-left: auto;
 margin-right: auto;
}
.row2 .col-6{
 width: 100%;
 position: relative;
-ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
 padding-left: 15px;
 padding-right: 15px;
 margin-bottom: 30px;
 margin-left: auto;
 margin-right: auto;
}
.row .col-6:last-child{margin-bottom: 35px;}
.row2 .col-6:last-child{margin-bottom: 15px;}

/* 画面サイズが993px以上の場合に適用 */
@media only screen and (min-width: 993px) {
 .row .col-6{
  position: relative;
-ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
 }
 .row2 .col-6{
  position: relative;
-ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
 }
}

.table{
 width: 100%;
 border-left: 1px solid #b4b4b4;
 border-top: 1px solid #b4b4b4;
}
.table td, .table th{
 border-top:none;
 text-align: left;
 padding: .5rem;
 padding: 1em;
 border-bottom: 1px solid #b4b4b4;
 border-right: 1px solid #b4b4b4;
 line-height: 1.4;
}
.table th{background: #e5edf6;}
.txt_pink{color: #ff00ff;}

/* 画面サイズが768px以上の場合に適用 */
@media (min-width: 768px) {
 .table th {width: 25%;display: table-cell; text-align: left;}
 .table td {display: table-cell;}
}
/* 画面サイズが767px以下の場合に適用 */
@media only screen and (max-width: 767px) {
 .table th {width: 100%;display: block; text-align: left;}
 .table td {width: 100%;display: block;}
}
/* -------------------------
commom
------------------------- */
h2.h2_ttl{
 font-size: 7.3rem;
 background:url(../images/h2_car_care_support.jpg);
 background-size: cover;
 color: #fff;
 height: 400px;
 display:-webkit-box;/*--- Androidブラウザ用 ---*/
 display:-ms-flexbox;/*--- IE10 ---*/
 display: -webkit-flex; /* Safari */
 display: flex;
 -webkit-box-pack:justify;/*--- Androidブラウザ用 ---*/
 -ms-flex-pack:justify;/*--- IE10 ---*/ 
 -webkit-justify-content: center; /* Safari */
 justify-content:center;
 -webkit-align-items: center; /* Safari */
 align-items:center;
 -ms-flex-wrap:wrap;/*--- IE10用 ---*/ 
 -webkit-flex-wrap: wrap; /* Safari */
 flex-wrap:wrap;
 text-align: center;
 margin-bottom: 50px;
}
h2.h2_ttl span.jp{
 margin-top: 15px;
 display: block;
 font-size: .5em;
}
.pankuzu{
 max-width: 1030px;
 margin-left: auto;
 margin-right: auto;
 padding: 30px 15px;
}
.pankuzu .slash{padding: 0px 15px;}
.contents{
 max-width: 1000px;
 margin-left: auto;
 margin-right: auto;
 padding: 0px;
 display:-webkit-box;/*--- Androidブラウザ用 ---*/
 display:-ms-flexbox;/*--- IE10 ---*/
 display: -webkit-flex; /* Safari */
 display: flex;
 -webkit-box-pack:justify;/*--- Androidブラウザ用 ---*/
 -ms-flex-pack:justify;/*--- IE10 ---*/ 
 -webkit-justify-content: center; /* Safari */
 justify-content:center;
 -ms-flex-wrap:wrap;/*--- IE10用 ---*/ 
 -webkit-flex-wrap: wrap; /* Safari */
 flex-wrap:wrap;
 -webkit-box-direction:reverse;/*--- Androidブラウザ用 ---*/ 
 -ms-flex-direction: reverse;/*--- IE10用 ---*/ 
 -webkit-flex-direction: row-reverse; /* Safari */
 flex-direction:row-reverse;
}
.categorybox{width: 25%;}
.contentsbox{width: 75%;}

.categorybox .ttl{font-weight: bold;}
.categorybox dl{margin-top: 30px;}
.categorybox dl dt{
 margin-bottom: 15px;
 font-weight: bold;
}
.categorybox dl dd{
 border-left:1px solid #000;
 padding-left: 15px;
 line-height: 1.6;
}
.categorybox dl dd a{
 text-decoration: none;
 color: #000;
}
.contents .title{
 line-height: 32px;
 font-size: 3.6rem;
 background: url("../images/title_icon.png") no-repeat center left;
 padding-left: 35px;
 margin-bottom: 1em;
 width: 100%;
}
.contents .title span{font-size: .8em;}
.contentsbox .ttl01{
 font-size: 2.4rem;
 font-weight: bold;
 margin-bottom: 30px;
}
.contentsbox .ul01 li{
 padding: 5px 0px;
 font-weight: bold;
 font-size: 1.8rem;
}
.contentsbox .ul01 li:before{
 content: "■";
 font-size: 3rem;
 margin-right: 8px;
 color: #ffd900; 
}

/* 画面サイズが992px以下の場合に適用 */
@media only screen and (max-width: 992px) {
 h2.h2_ttl{
  height: 200px;
  font-size: 5rem;
  margin-bottom: 20px;
 }
 .contents {padding: 0;}
 .categorybox{width: 100%;}
 .contentsbox{
  width: 100%;
  margin-bottom: 50px;
 }
 .contents .title{font-size: 2.4rem;}
}
.mb15{margin-bottom: 15px;}
.mb30{margin-bottom: 30px;}
.mb50{margin-bottom: 50px;}
.title01 {
 position: relative;
 padding: 1rem 0px;
 border-bottom: 3px solid #004aa6;
 font-size: 2.4rem;
 margin-bottom: 20px;
}
.title01:before {
 position: absolute;
 bottom: -3px;
 left: 0;
 width: 90%;
 height: 3px;
 content: '';
 background: #ffd900;
}
.title02{
 border-left:8px solid #004aa6;
 background: #ffd900;
 padding:8px 15px;
 font-size: 2.4rem;
 font-weight: bold;
 margin-bottom: 1.5em;
}
.txtbox01{
 line-height: 1.6;
 font-size: 1.8rem;
 font-weight: 600;
}
.txt01{
 background: #ffe44d;
 color: #004ea2;
 font-size: 2.4rem;
 font-weight: bold;
 padding: 25px 15px;
	border-radius:50px;		/* CSS3草案 */
	-webkit-border-radius:50px;	/* Safari,Google Chrome用 */
	-moz-border-radius:50px;	/* Firefox用 */
 text-align: center;
 line-height: 1.2;
}
.txt02{
 font-weight: bold;
 text-align: center;
 line-height: 1.6;
}
.txt03{
 font-weight: bold;
 line-height: 1.6;
}

.btn01{text-align: right;}
.btn01 a{
 display: inline-block;
 padding: 15px 20px;
 background: #ffd900;
 color: #000;
 text-decoration: none;
 line-height: 1;
}
.btn01 a:after{
 content: url("../images/arrow.png");
 margin-left: 8px;
}
.btn01 a:hover{background:#ffec80;}

/* 画面サイズが992px以下の場合に適用 */
@media only screen and (max-width: 992px) {
 .txt02{text-align: left;}
}



.oil_ttl{
 width: 100%;
 text-align: center;
 margin-bottom: 30px;
}
.oil_ttl span{
 background: #ffe44d;
 color: #004ea2;
 font-weight: bold;
	border-radius:8px;		/* CSS3草案 */
	-webkit-border-radius:8px;	/* Safari,Google Chrome用 */
	-moz-border-radius:8px;	/* Firefox用 */
 display: inline-block;
 margin-left: auto;
 margin-right: auto;
 padding: 15px;
 font-size: 2.4rem;
}
.work{
 display:-webkit-box;/*--- Androidブラウザ用 ---*/
 display:-ms-flexbox;/*--- IE10 ---*/
 display: -webkit-flex; /* Safari */
 display: flex;
 -webkit-box-pack:justify;/*--- Androidブラウザ用 ---*/
 -ms-flex-pack:justify;/*--- IE10 ---*/ 
 -webkit-justify-content: center; /* Safari */
 justify-content:center;
 -ms-flex-wrap:wrap;/*--- IE10用 ---*/ 
 -webkit-flex-wrap: wrap; /* Safari */
 flex-wrap:wrap;
 margin-bottom: 50px;
}
.work dl{
 width: 31.3%;
 margin: 1%;
	border-radius:8px;		/* CSS3草案 */
	-webkit-border-radius:8px;	/* Safari,Google Chrome用 */
	-moz-border-radius:8px;	/* Firefox用 */
 text-align: center;
 font-weight: bold;
}
.work dl dt{
 padding: 15px;
 color: #004ea2;
 font-size: 2.4rem;
}
.work dl dd{
 padding: 15px;
 line-height: 1.6;
 font-size: 1.8rem;
 display:-webkit-box;/*--- Androidブラウザ用 ---*/
 display:-ms-flexbox;/*--- IE10 ---*/
 display: -webkit-flex; /* Safari */
 display: flex;
 -webkit-box-pack:justify;/*--- Androidブラウザ用 ---*/
 -ms-flex-pack:justify;/*--- IE10 ---*/ 
 -webkit-justify-content: center; /* Safari */
 justify-content:center;
 -webkit-align-items: center; /* Safari */
 align-items:center;
 -ms-flex-wrap:wrap;/*--- IE10用 ---*/ 
 -webkit-flex-wrap: wrap; /* Safari */
 flex-wrap:wrap;
}
.work dl:nth-child(odd){border: 3px solid #ffec80;}
.work dl:nth-child(odd) dt{background: #ffec80;}
.work dl:nth-child(even){border: 3px solid #ece4ce;}
.work dl:nth-child(even) dt{background: #ece4ce;}

@media (max-width: 767px) { 
	.work dl	{ width: 48%; }
	.work dl dt, 
	.work dl dd	{ padding: 5px; }
	.txt01	{ font-size: 2rem; }
	.row,
	.row2	{  margin-right: 0; margin-left: 0; }
	.row .col-6, 
	.row2 .col-6	{ padding-right: 0; padding-left: 0; }
}