@charset "UTF-8";
@import url("grid.css");

body{
	/* [disabled]background-color: #000000; */
	}
	
header{
	background-color: #000000;
	}
	
img {
	max-width: 100%;
	height: auto;/*高さ自動*/
}
a {
	color: #ee0000;
	text-decoration-line: none;
}

a:hover { 
color: #999;
}

nav a {
	color: #FFFFFF;
	text-decoration-line: none;
	background-color: #000000;
}
ul {list-style:none;}

.pankuzu {
width: 90%;
max-width: 1100px;
margin: 20px auto 0;
font-size: 1.2rem;
}


.onlyPc {
display: block;
}

.onlySp {
display: none;
}

.boxTtl .sub {
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.05rem;
vertical-align: middle;
}


/*商品ページリンク*/

p.info_btn a{
	display: flex;
	margin: 0.5em !important;
	width: auto !important;
	font-weight: bold;
	padding: 0.8em 1em;
	border-radius: 5px;
	color: #fff;
	cursor: pointer;
	text-decoration: none; /* 文字の下線を消す */
	justify-content: center;
	align-items: center;
	font-size: 0.9em;
}

.btn_amazon{
background-color: #f79821;
}
.btn_rakuten{
background-color: #ff5f5f; 
}
.btn_yahoo{
background-color: #39c0e0;
}

.btn_carsensor{
background-color: #FF821A;
}
.btn_kurumaerabi{
background-color: #FF1F3F;
}
.btn_google{
background-color: #4285F4;
}

/*商品のお問い合わせプロダクトページ*/
.bn_mat {
	margin: 0.5em !important;
	width: auto !important;
	font-weight: bold;
	padding: 0.8em 1em 0.8em 1em;
	border-radius: 5px;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	justify-content: center;
	align-items: center;
	font-size: 0.9em;
	text-align: center;
}
.bn_bg01{
	background-color: #EE0000;
}

.bn_mat2 {
	margin: 0.5em !important;
	width: auto !important;
	font-weight: bold;
	padding: 0.8em 1em 0.8em 1em;
	border-radius: 5px;
	color: #fff;
	text-decoration: none;
	justify-content: center;
	align-items: center;
	font-size: 0.9em;
	text-align: center;
}
.bn_mat2 .telno{
	font-size: 1.6em;
}
.bn_mat2 .telno a{
	color: #FFFFFF;
}
.bn_bg02{
	background-color: #000;
}



@media screen and (max-width:900px) {
.onlyPc {
display: none;
}
.onlySp {
display: block;
}

 .boxTtl .sub.spblk {
display: block;
}
}

/*ヘッダー
-------------------------------------*/
.logo01 img {
	width: 60%;
	font-size: 2rem;
}

.header {
	display: flex;
	flex-direction: row;
	padding: 2rem 0 0 0;

}
.header-box {
margin-left: auto;
margin-top: 8px;
float: right;
/* [disabled]display: block; */
}
.header .row .col {
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}
.contact-button {
/* [disabled]padding: 1rem; */
/* [disabled]border-color: #000; */
/* [disabled]border-style: solid; */
/* [disabled]border-width: 2px; */
}

nav {
margin-top: 2rem;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

nav ul {
display: flex;
flex-direction: row;
justify-content: space-around;
list-style: none;
margin: 1rem 0 0 0;
}

nav li {
flex: 1 0 auto;
margin-left: 2px;
}
nav li a {
text-decoration: none;
text-align: center;
width: 100%;
display: block;
}
nav a:hover {
background-color: #f7f7f7;
}
nav a {
padding: 0.5rem;
}
.icon-logo a img {
}


@media screen and (min-width: 767px) {
/* PC時はMENUボタンを非表示 */
#open,#close {
display: none !important;
}

#navi {
display: block !important;
}
}



@media screen and (max-width: 767px) {
.header {
flex-direction: column;
width: auto;
margin-bottom: 0px;
}
.header #open,#close {
position: absolute;
top: 20px;
right: 12px;
}
nav ul {
flex-direction: column;
}
.header li {
padding-top: 0;
}

/* スマホ時はMENUボタンを表示 */
#open,#close {
display: block;
width: 50px;
border: none;
position: absolute;
top: 20px;
right: 12px;
}

/* スマホ時はメニューを非表示 */
#navi {
display: none;
}
}

/*メイン画像
-------------------------------------*/
.nav-sp {
padding: 0;
margin: 0;
display: block;
clear: both;
}
.tel-box {
text-align: right;
display: block;
clear: both;
}
#mainImg {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	max-width: 1280px;
	padding-top: 0em;
}
#mainImg .mainImg1{
position: relative;
width: 100%;
padding-top: 56.25%;
}
#mainImg .mainImg1 iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
#mainImg .mainImg2 img {
position: absolute;
left: 50%;
max-width: 1280px;
width: 1280px;
height: 642px;
margin-left: -640px;
display: none;
}


/*メインコンテンツ
-------------------------------------*/
main {
	background-color: #FFFFFF;
	padding-bottom: 6rem;
}
section {
	margin: 0rem 0;
	padding: 4rem 0;
}
.gray-back {
background-color: #f4f4f4;
}
.center {
text-align: center;
margin-bottom: 4rem;
}

/*サブコンテンツ
-------------------------------------*/
.Content .inner {
	width: 90%;
	max-width: 1100px;
	margin: 0px auto;
}


/*キャッチコピー
-------------------------------------*/
.catch {
text-align: center;
}

.catch_bg_top {
	margin: 0 auto;
	max-width: 1280px;
	position: relative;
/*background: url('../img/bg_bloc.jpg') center center no-repeat;*/
padding-top: ;
	background-size: cover;
	display: block;
	height: 18rem;
}
.catch_t_top {
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
padding: 1% 3%;
}
.catch_t_top h2 {
	font-weight: bold;
	color: #000000;
	font-size: 4rem;
}

.catch_t h2 {
	font-weight: bold;
	color: #000000;
	font-size: 4rem;
	background-position: 0% 0%;
	padding-top: 1em;
}

.catch_t_top h2 {
  position: relative;
  padding: 1.5rem;
  text-align: center;
}

.catch_t_top h2:before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: '';
  border-radius: 3px;
  background: #FF0000;
}

.under {
border-bottom: 0.4rem solid #000;
padding:0 1rem 1rem 1rem;
}

.catch_bg {
	margin: 0 auto;
	/* [disabled]max-width: 1280px; */
	position: relative;
	background-repeat: repeat;
	background-position: center -1rem;
	/* [disabled]background-size: cover; */
	display: block;
	height: 20rem;
}
.catch_t {
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
padding: 1% 3%;
}

.copy img {
padding: 0px;
margin: 2rem auto;
display: block;
text-align: center;
}


/* NEWS
------------------------------------------------------------*/
.txt-r{
text-align: right;
}
.txt-l{
text-align: left;
}
.icon-logo {
text-align: center;
}
.icon-logo img {
	margin: 3rem 1rem;
	width: 50px;
}

/* 車両紹介
------------------------------------------------------------*/
.car-box h4,
.parts-box h4 {
margin-left: 0.5rem;
padding-left: 0px;
margin-right: 0.5rem;
font-weight: bold;
font-size: 1em;
}
.news-box {
margin-bottom: 2rem;
margin-top: 1rem;
}
.car-box h4 .mainTit,
.parts-box h4 .mainTit {
font-size: small;
margin-right: 0.8em;
}
.car-boxp,
.parts-box p {
padding-left: 0px;
margin-left: 0.5rem;
margin-right: 0.5rem;
}

/* Gallery
------------------------------------------------------------*/
.gallery {
display: inline-block;
}
.gallery li {
float: left;
width: calc(100%/3);
margin: 0;
padding: 0;
line-height: 0;
}

.gallery img {
width: 100%;
height: auto;
margin: 0px;
padding: 0px;
}

/*スタッフ紹介
-------------------------------------*/
.logo02 img {
width: 55%;
}

.stuff-box {
/* [disabled]width: 100%; */ /* 画像の幅調整 */
/* [disabled]margin-bottom: 1em; */
}
.stuff-box p{
margin-left: 1.0rem;
margin-right: 1.0rem;
}
 
.stuff-box .circumscribed-photo-box-hidden {
width: 100%;
position: relative;
}

.stuff-box .mask {
position: absolute;
width: 100%;
height: 0;
padding-top: 100%; /* 画像の高さ調整をした場合は、こちらも同じ値に変更 */
top: 0;
left: 0;
background-color: rgba(0,0,0,0.8);
}

.stuff-box .circumscribed-photo-box1 {
width: 100%;
height: 0;
padding-top: 100%; /* 画像の高さ調整 */
background: url(../img/staff01.jpg) no-repeat center center; /* 画像のURLを指定 */
background-size: cover;
}

.stuff-box .circumscribed-photo-box2 {
width: 100%;
height: 0;
padding-top: 100%; /* 画像の高さ調整 */
background: url(../img/staff02.jpg) no-repeat center center; /* 画像のURLを指定 */
background-size: cover;
}
.stuff-box .circumscribed-photo-box3 {
width: 100%;
height: 0;
padding-top: 100%; /* 画像の高さ調整 */
background: url(../img/staff03.jpg) no-repeat center center; /* 画像のURLを指定 */
background-size: cover;
}
.stuff-box .circumscribed-photo-box4 {
width: 100%;
height: 0;
padding-top: 100%; /* 画像の高さ調整 */
background: url(../img/staff04.jpg) no-repeat center center; /* 画像のURLを指定 */
background-size: cover;
}
.stuff-box .circumscribed-photo-box5 {
width: 100%;
height: 0;
padding-top: 100%; /* 画像の高さ調整 */
background: url(../img/staff05.jpg) no-repeat center center; /* 画像のURLを指定 */
background-size: cover;
}
.stuff-box .circumscribed-photo-box6 {
width: 100%;
height: 0;
padding-top: 100%; /* 画像の高さ調整 */
background: url(../img/staff06.jpg) no-repeat center center; /* 画像のURLを指定 */
background-size: cover;
}


.stuff-box .mask {
position: absolute;
width: 100%;
height: 0;
padding-top: 100%; /* 画像の高さ調整をした場合は、こちらも同じ値に変更 */
top: 0;
left: 0;
background-color: rgba(0,0,0,0.8);
}

.stuff-box .mask-text {
position: absolute;
width: 100%;
top: 50%;
left: 0;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
font-size: 1em;
color: #fff;
padding: 15px;
text-align: left;
}
.stuff-box .mouse-over-mask {
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 2.0s ease;
}
.stuff-box:hover .mouse-over-mask {
opacity: 1;
}


/*申し込みの流れ
-------------------------------------*/
.flow.row {
margin-bottom: 3rem;
}

/*フッター
-------------------------------------*/
footer {
	padding: 4rem 0 6rem;
}
footer h4 {
border-bottom: 3px solid #ccc;
}

/*お問い合わせ
-------------------------------------*/
.contact-box {
border: 1px solid #ccc;
text-align: center;
padding: 2rem 0;
}
.table {
margin: 4rem 0;
}
.table th {
width: 250px;
}
.logo02 img {
width: 385px;
}
/*コピーライト
-------------------------------------*/
.copyright {
	text-align: center;
	padding: 1rem 0;
	/* [disabled]color: #FFFFFF; */
}
.copyright a {
color: #fff;
text-decoration: none;
display: inline;
}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
position: fixed;
bottom: 15px;
right: 15px;
}
#pagetop a {
	display: block;
	background-color: #FF0000;
	color: #fff;
	width: 50px;
	padding: 10px 5px;
	text-align: center;
}
#pagetop a:hover {
background: #666;
}

/* 幅768px以下の表示
-------------------------------------*/
@media screen and (max-width: 767px) {


.container{
margin: 0rem auto 0;
padding: 0;
position: relative;
display: block;
}
nav{
margin-top: 0rem;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

section {
	margin: 0rem 0;
	padding: 3rem 0;
}

.tel-box {
display: none;
text-align: center;
clear: both;
}

.pankuzu {
font-size: 3.5vw;
}
/*ヘッダー
-------------------------------------*/
.logo01 img {
width: 25%;
margin-left: 0.5em;
}


.gallery li {
float: none;
width: 100%;
}

/*メイン画像
-------------------------------------*/
#mainImg {
	padding-top: 0em;
}
#mainImg {
position: relative;
overflow: hidden;
width: 100%;
/*height: 502px;*/
}
#mainImg .mainImg1 {
display: none;
}

#mainImg .mainImg2 img {
position: absolute;
left: 50%;
max-width: 1000px;
width: 1000px;
height: 650px;
margin-left: -502px;
display: block;
}

/*キャッチコピー
-------------------------------------*/
.catch_bg {
	position: relative;
	/*
background:url('../img/bg_bloc.jpg') center center no-repeat;
*/
	width: 100%;
	background-size: cover;
	height: 14rem;
}

.catch h2 {
font-size: 3rem;
}

/* NEWS
------------------------------------------------------------*/
.txt-r{
text-align: center;
}
.txt-l{
text-align: center;
}

/*お問い合わせ
-------------------------------------*/
.logo02 img {
	width: 80%;
	padding-bottom: 0px;
}

.table th {
width: 100%;
display: block;
}
.table td {
display: block;
}
}