/*
  Skin Name: Auto-Service 若林 スキン
  Description: オートサービス若林のスキンです。
  Skin URI: https://wp-cocoon.com/
  Author: S.Shun7
  Author URI: https://yanchado.com/
  Screenshot URI: 
  Version: 1.0.2
  Priority: 9876
*/
/*以下にスタイルシートを記入してください*/
body { overflow-x: hidden; background-color: #fff; }
.home header .sns-share,.home footer .sns-share,.home footer .sns-follow,.home header .post-date,.home .post-update,.home .author-info{ display: none; }

/************************
全ページ共通
/************************/
.page .sns-share,
.page .sns-follow {
    display: none;
}


/************************
ヘッダーロゴ
/************************/
@media screen and (max-width: 640px) {
	.site-logo-image { width: 200px; }
}
/************************
ヘッダー・グローバルナビ
/************************/
.header-container { background-color: black; padding: 0px; }
.header-container a { color: #fff; }
.header-container .navi { background: black; }
/* .navi{
  border: 0;
  background-color: transparent;
}*/
#navi .navi-in a { color: #fff; font-size: 14px; }
#navi .navi-in>.menu-header .sub-menu { background:black; font-family: 'Kufam', cursive; }
#navi .navi-in a:hover { color: white; background: #00008b;}
.header-container{ color: #fff; }
.header{ background-color:black; }

/** 固定したグローバルメニュースクロール時もサブメニュー **/
.fixed-header .has-sub {
    display: inline-block;
}
.fixed-header .navi-in > ul li:hover > ul  {
    display: block;
}

/*****************************************
  アピールエリア背景色
*****************************************/
.appeal-content { background-color:rgba(255,255,255,0.6); border-radius: 0px; max-width: 1100px; }
.appeal-content .box {
    position: relative;
    margin: 0em 0;
    padding: 30px 20px 7px 20px;
    border: solid 2px #f66610;
    background-color:rgba(255,255,255,0.6);
    text-align: left;
}
.appeal-content .box .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    background: #f66610;
    color: #ffffff;
    font-weight: bold;;
}
.appeal-content .box p { margin: 0; padding: 0; }
.appeal-content .box p span { color: #fff; font-weight: 900; background: red; }
.appeal-content .box .box-tel { font-weight: 900; }
.appeal-content .box img { float: right; }
.appeal-content .box-tel { text-align: center; margin-top: 20px; }
.appeal-content .box-tel img { max-width: 60%; }
/************** 640pxまでの幅の場合に適応される **************/
@media screen and (max-width: 640px) {
	.appeal-content .box p { font-size: 90%; line-height: 133%; }
	.appeal-content .box { margin: 0 -10px; padding: 30px 5px 7px 5px; }
	.appeal-content .box-tel img { max-width: 100%; }
}
/*****************************************
  Top Page 見出し
*****************************************/
.home #main h1{ font-size: 1em; color: #555; letter-spacing: 1px; margin: 1em 0 0em; font-weight: 400; display: flex; align-items: center; }
.home #main h1:before, .home #main h1:after { content: ""; flex-grow: 1; height: 1px; background: #aaa; display: block; }
.home #main h1:before { margin-right: .4em; }
.home #main h1:after { margin-left: .4em; }
.home #main h1 { text-align: center; border-bottom: 0px double #fff; }
.home #main h2 { text-align: center; margin: 0px 0 -10px 0; padding: 20px 10px; background-color: none; border-bottom: none; }



/*****************************************
  各ページ共通
*****************************************/
.page-car-inspection header .sns-share,.home footer .sns-share,.home footer .sns-follow,.home header .post-date,.home .post-update,.home .author-info{ display: none; }
.page-car-inspection .date-tags { display: none; }

.page h1 { text-align: center; border-bottom: 6px double #000; }
.page h2 { text-align: center; border-bottom: 6px double #000; background-color: #fff; padding: 20px 10px 10px 10px; }

.page header .sns-share,.home footer .sns-share,.home footer .sns-follow,.home header .post-date,.home .post-update,.home .author-info{ display: none; }
.page .date-tags { display: none; }


/*****************************************
  会社概要 - プロフィール
*****************************************/
.profile .scrollable-table td { white-space: normal; }
.profile table{
  box-sizing: border-box;
  border-collapse:collapse;
  margin: 0 auto;
  text-align: center;
}
.profile table th,
.profile table td{
  border: 1px solid #999;
  padding: .5em 1em;
}
.profile table th{ background: #eee; }
.profile table td{ text-align: left; }

@media (max-width: 640px) {
    .profile table th,
    .profile table td{
      display: block;
    }
    .profile table td{ text-align: center; }
    .profile table th{ text-align: center; }
}

/*************************************************************
** イメージ全幅 ブロック
*************************************************************/
.full-width {
    margin-left: calc((50vw - 50%) * -1);
    margin-right: calc((50vw - 50%) * -1);
	padding: 0;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #000;
}
.full-width h2 { color: #fff; background-color: #000; text-align: center; margin: 0px; padding: 20px 0 10px 0; }
.full-width p { color: #fff; text-align: center; margin: 0px 0 20px 0; padding: 0; }
/*****************************************
  Top 事業内容
*****************************************/
.full-width .project-wrap {
  display: flex;
  justify-content: center;
  margin: 0px 0 0 0;
  padding: 0px;
	color: #fff;
}
.full-width .project-wrap .pbox { width: 100%; padding: 10px; text-align: left; }
.full-width .project-wrap .pbox h3 { color: #fff; margin: 0px; padding: 0px; text-align: center; border: none; }
.full-width .project-wrap .pbox p { color: #fff; text-align: left; margin: 0px; padding: 0px 10px; border: none; }
.full-width .project-wrap .pbox img { margin: 0px; padding: 0px; }
.full-width .project-wrap .pbox .c-button { margin: 20px 0 20px 0; text-align: center; }
.full-width .project-wrap .pbox .button-2 {
  display: inline-block;
  padding: 0.4em 1.6em;
  color: #fff;
  text-decoration: none;
  user-select: none;
  border: 1px #fff solid;
  transition: 0.4s ease;
}
.full-width .project-wrap .pbox .button-2:hover { color: #fff; background: #333; }

/************** 640pxまでの幅の場合に適応される **************/
@media screen and (max-width: 640px) {
	.full-width { padding: 0 0px 0em; }
	.full-width h2 { padding: 20px 20px 10px; font-size: 20px; }
	.full-width .project-wrap { flex-direction: column; }
	.full-width .project-wrap .pbox p { font-size: 14px; color: #fff; text-align: center; padding: 10px; border: none; }
}
/*****************************************
  Block Box
*****************************************/
.blockbox [  ]
.entry-content .cde { font-size: 150px; }
/*****************************************
  News Block
*****************************************/
.newstop {  }
.newsgrid { padding:0px; display : flex; flex-wrap: wrap; justify-content: space-between; }
.newsgrid .element{ content:""; display: block; width:33%; padding:10px; }

.newsgrid > div {
  overflow:hidden;
  min-width: 0;
  padding: 0em;
  border-bottom: 1px dotted #ccc;
}
.newsgrid > div h3 { font-size: 18px; margin: 0px; padding: 0px; line-height: 100%; border: none; font-weight: bold; }
.newsgrid > div img { float: left; margin: 0 10px 0 0; }
.newsgrid > div a { line-height: 10px; text-decoration: none; text-align: left; font-weight: 900; color: #000; }
.newsgrid > div a:hover { color: red; }
.newsgrid > div p { margin: 5px 0px 0px 0px; padding: 0; line-height: 130%; }
.newsgrid > div .mday { font-size: 12px; margin: 0px 0 5px 0; line-height: 100%; }
.newsgrid > div .fa-rss-square { color: red; }
.newsgrid > div .excer { font-size: 14px; }

/*****************************************
  Info Block
*****************************************/
.infotop {  }
.infogrid { padding:0px; display : flex; flex-wrap: wrap; justify-content: space-between; }
.infogrid .element{ content:""; display: block; width:33%; padding:10px; }

.infogrid > div {
  overflow:hidden;
  min-width: 0;
  padding: 0em;
  border-bottom: 1px dotted #ccc;
}
.infogrid > div h3 { font-size: 18px; margin: 0px; padding: 0px; line-height: 100%; border: none; font-weight: bold; }
.infogrid > div img { float: left; margin: 0 10px 0 0; }
.infogrid > div a { line-height: 10px; text-decoration: none; text-align: left; font-weight: 900; color: #000; }
.infogrid > div a:hover { color: red; }
.infogrid > div p { margin: 5px 0px 0px 0px; padding: 0; line-height: 130%; }
.infogrid > div .mday { font-size: 12px; margin: 0px 0 5px 0; line-height: 100%; }
.infogrid > div .fa-rss-square { color: red; }
.infogrid > div .excer { font-size: 14px; }




/*****************************************
  新車・中古 Block
*****************************************/
.usedcar { padding:0px; display : flex; flex-wrap : wrap;  }
.usedcar > div { padding:0px; margin-bottom:10px; box-sizing:border-box; width:50%; }

.usedcar > div { max-width: 24%; margin-right: 10px; margin-bottom: 10px; }
.usedcar > div a{ color: #333; text-decoration: none; }
.usedcar > div p { font-size: 14px; line-height: 18px; margin: 0px ; padding: 0 5px 5px 5px; text-align: left; }
.usedcar > div .ucnew { color: #ea0000; font-weight: 300; font-family: 'Shrikhand', cursive; }
.usedcar > div .car_neme { margin: 0 0 0px 0; padding-bottom: 0px; font-weight: 600; text-align: left;}
.usedcar > div .ucdate { color: #333; font-size: 12px; }
.usedcar > div .car_price { border-bottom: 1px dotted #ccc; text-align: right; }
.usedcar > div .carprice { font-weight: 900; font-size: 20px; font-family: 'Shrikhand', cursive; color: #ea0000; margin: 0 5px 0 0px; }
/************** 640pxまでの幅の場合に適応される **************/
@media screen and (max-width: 640px) {
	.usedcar > div { max-width: 48%; margin-right: 5px; margin-bottom: 5px; }
}


/*****************************************
  SoldCar Block
*****************************************/
.soldcartop {  }
.soldcargrid { padding:0px; display : flex; flex-wrap: wrap; justify-content: space-between; }
.soldcargrid .element{ content:""; display: block; width:33%; padding:10px; }

.soldcargrid > div {
  overflow:hidden;
  min-width: 0;
  padding: 0em;
  border-bottom: 0px dotted #ccc;
}
.soldcargrid > div h3 { font-size: 18px; margin: 0px 0 0 0; padding: 0px 0 0 0; line-height: 100%; border: none; font-weight: bold; }
.soldcargrid > div img { float: left; margin: 0 10px 0 0; }
.soldcargrid > div a { line-height: 10px; text-decoration: none; text-align: left; font-weight: 900; color: #000; }
.soldcargrid > div a:hover { color: red; }
.soldcargrid > div p { font-size: 18px; font-weight: 900; margin: 5px 0px 0px 0px; padding: 0; line-height: 130%; }
.soldcargrid > div .mday { font-size: 12px; margin: 0px 0 5px 0; line-height: 100%; }
.soldcargrid > div .fa-rss-square { color: red; }
.soldcargrid > div .excer { font-size: 14px; }

/************** 640pxまでの幅の場合に適応される **************/
@media screen and (max-width:640px){
  .infogrid { display:block; }
  .newsgrid { display:block; }
  .soldcargrid { display:block; }
  .infogrid .element{ width:100%; }
  .newsgrid .element{ width:100%; }
  .soldcargrid .element{ width:100%; }
  }


/*************************************************************
** 全幅
*************************************************************/
/** 全幅 上表示 **/
.haikei-top {
    margin-left: calc((50vw - 50%) * -1);
    margin-right: calc((50vw - 50%) * -1);
	padding: 10px 29px 1em;
	background: #333;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background: #000;
    color: #fff;
}
.haikei-top > p,
.haikei-top > div,
.haikei-top > h2,
.haikei-top > h3,
.haikei-top > h4, { margin-left: auto; margin-right: auto; max-width: 1256px; }
.top-content{ max-width: 1256px; margin:0 auto; padding: 0px 10px; }
.haikei-top .newsgrid > div a { line-height: 10px; text-decoration: none; text-align: left; font-weight: 900; color: #fff; }
.haikei-top .newsgrid > div a:hover { color: red; }

/** 全幅 下表示 **/
.haikei-low {
    margin-left: calc((50vw - 50%) * -1);
    margin-right: calc((50vw - 50%) * -1);
	padding: 10px 29px 1em;
	background: #333;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background: #000;
    color: #fff;
}
.haikei-low > p,
.haikei-low > div,
.haikei-low > h2,
.haikei-low > h3,
.haikei-low > h4, { margin-left: auto; margin-right: auto; max-width: 1256px; }
.top-content{ max-width: 1256px; margin:0 auto; padding: 0px 10px; }
.haikei-low .newsgrid > div a { line-height: 10px; text-decoration: none; text-align: left; font-weight: 900; color: #fff; }
.haikei-low .newsgrid > div a:hover { color: red; }

/************** 見出し CSS **************/
.haikei-top h3 { font-size:23px; border-bottom:5px solid #e7e7e7; padding:10px 0; }
.haikei-top h3 { padding-bottom: .5em; border-bottom: 3px double #ccc; }

.haikei-top .top-content > h2 { background: #000; border: none; margin: 10px 0px; padding: 0px; }
.haikei-top .top-content > h2 span{ font-size:80%; }

.haikei-low .top-content > h2 { background: #000; border: none; margin: 10px 0px; padding: 10px 0px 0 0; }
.haikei-low .top-content > h2 span{ font-size:80%; }

@media screen and (max-width: 640px) {
	.haikei-low { padding: 0 0px 0em; }
}



/************************************
** タブ - ブロック
************************************/
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:20px 0;
}
.tab-wrap:after {
  content: '';
  width: 100%;
  height: 3px;
  background: #000;
  display: block;
  order: -1;
}
.tab-label {
  color: #000;
  background: #ccc;
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
  padding: 10px .5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  flex: 1;
}
.tab-label:not(:last-of-type) { margin-right: 5px; }
.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0px;
  margin: 0px;
}
.tab-wrap .tab-content h3 { margin: 0px; padding: 10px 0 5px 10px; border: none; border-bottom: 6px double #000; }
.tab-wrap .tab-content p { margin: 0px; padding: 10px; }
.tab-switch:checked+.tab-label { background: #000; color: #fff; }
.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 15px;
  opacity: 1;
  transition: .5s opacity;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.tab-switch { display: none; }
/************** 640pxまでの幅の場合に適応される **************/
@media screen and (max-width: 640px) {
	.tab-label { font-size: 14px; padding: 5px .5em; }
	.tab-wrap .tab-content {  }
	.tab-wrap .tab-content h3 { margin: 0px; }
	.tab-wrap .tab-content p { padding: 10px 0px; line-height: 133%; }
}/*/*/


/** ボタン CSS **/
.button-6 {
  display: inline-block;
  padding: 5px 20px;
  font-size: ;
  color: #fff;
  text-decoration: none;
  user-select: none;
  background: #e21b1b;
  border: 1px #e21b1b solid;
  border-radius: 3px;
  transition: 0.4s ease;
}

.button-6:hover { color: #e21b1b; background: #fff; }
.fa-arrow-right { margin-left: 0.5em; }

/************** 640pxまでの幅の場合に適応される **************/

/************************************
** STAFF プロフィール
************************************/
.tmm_member .tmm_desc { text-align: left; }

/************************************
** MAP 全幅
************************************/

.haikei-map {
    margin-left: calc((50vw - 50%) * -1);
    margin-right: calc((50vw - 50%) * -1);
	padding: 0;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;    
}

/************************************
** フッター
************************************/
.footer { margin-top: 20px; padding-top: 10px; color: #fff; background-color: #000; }
.navi-footer-in a { color: #fff; }








/***********************************************
  Used-Car Sale Css
***********************************************/
#sale { font-size: 90%; }
#sale h5 { font-size: 18px; margin: 0px; }
#sale p { margin: 0 5px 5px 5px; padding: 5px 0; border-bottom: 1px solid #ccc; clear:both; }
#sale .sfont { font-weight: bold; }
#sale .bfont { color: #DC143C; font-weight: bold; font-size: 180%; margin: 0 5px 0 0; font-family: 'Abril Fatface', cursive; }
#sale table { width: 100%; line-height: 110%; margin: 5px 0 10px 0; clear:both; }
#sale th { white-space: nowrap; padding: 5px 0;}
#sale .fa-check-square { color: #DC143C; margin: 0 5px 0 0; }
.salefoot { text-align: center; }
.salefoot a { color: #fff; }

#sale .carul { margin: 0 5px 5px 5px; padding: 5px 0; border-bottom: 1px solid #ccc; clear:both; }
#sale ul { margin: 0px 0 0px 0px; padding: 0; list-style: none; overflow: hidden; }
#sale li { display: inline; padding: 0; margin: 0 10px 0 0; float: left; }
#sale li .fa-check-square-o { color: #1D9C73; }

#sale .top-soldout { color: #DC143C; font-weight: bold; font-size: 250%; margin: 0 5px 0 0; font-family: 'Abril Fatface', cursive; text-align: center; border: none;}


/*****************************************
  used Block
*****************************************/
.usedtop {  }
.usedgrid { margin:0px; padding:0px; display : flex; flex-wrap: wrap; justify-content: space-between; }
.usedgrid .element{ content:""; display: block; width:33%; margin:0 0 10px 0; padding:0px; }

.usedgrid > div { overflow:hidden; min-width: 0; padding: 0em; }
.usedgrid > div h4 { font-size: 16px; margin: 0px 0 0 0; padding: 0px; line-height: 150%; border: none; font-weight: bold; }
.usedgrid h4 .myear { font-size: 14px; font-weight: 300; }
.usedgrid > div img { float: left; margin: 0 10px 0 0; }
.usedgrid > div a { line-height: 10px; text-decoration: none; text-align: left; font-weight: 900; color: #000; }
.usedgrid > div a:hover { color: red; }
.usedgrid > div p { margin: 5px 0px 0px 0px; padding: 0; line-height: 130%; }
.usedgrid > div .mday { font-size: 12px; margin: 0px 0 5px 0; line-height: 100%; }
.usedgrid > div .fa-rss-square { color: red; }
.usedgrid > div .excer { font-size: 14px; }

.usedgrid > div .car_neme { margin: 0 0 0px 0; padding-bottom: 0px; font-weight: 600; text-align: left;}
.usedgrid > div .ucdate { color: #333; font-size: 12px; }
.usedgrid > div .car_price { border-bottom: 1px dotted #ccc; text-align: right; }
.usedgrid > div .carprice { font-weight: 900; font-size: 20px; font-family: 'Shrikhand', cursive; color: #ea0000; margin: 0 5px 0 0px; }

@media screen and (max-width: 640px) {
.usedgrid .element{ content:""; display: block; width:49%; margin:0 0 10px 0; padding:0px; }
.usedgrid > div h4 { font-size: 14px; margin: 0px 0 0 0; padding: 0px; line-height: 150%; border: none; font-weight: bold; }
.usedgrid h4 .myear { font-size: 12px; font-weight: 300; }
}/*/*/