@charset "utf-8";
/* =======================================

  Reset

======================================== */
/* notosansjapanese 
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font-style: inherit;
  font-weight: inherit;}
html { overflow-y: scroll;}
img {
  vertical-align: text-bottom;
  outline:none !important;
  height:auto;}
strong { font-weight: bold;}
ol,ul { list-style: none;}
table {
  border-collapse: collapse;
  border-spacing: 0;}
caption, th, td {
  font-weight: normal;
  text-align: left;
  vertical-align: top;}
blockquote:before, blockquote:after,
q:before, q:after { content: " ";}
blockquote, q { quotes: "" " ";}
a:focus { /*\*/ overflow: hidden; /**/}
option { padding-right: 10px;}


/* =======================================

  Common

======================================= */
@font-face {
   font-family: 'Noto Sans JP';
   font-style: normal;
   font-weight: 400;
   src: local("Noto Sans CJK JP"),
        url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans JP';
   font-style: normal;
   font-weight: 700;
   src: local("Noto Sans CJK JP"),
        url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.otf) format('opentype');
}
body {
  position: relative;
  font-size: 14px;
  width: 100%;
  min-width: 960px;
  height: 100%;
  line-height: 1.5;
  font-family: "Noto Sans JP", 'Meiryo UI', 'メイリオ', Meiryo, sans-serif;
  background: #f5f8fb url(../img/common/bg.gif) repeat center top;
  color: #323232;
  letter-spacing: 1px;
  -webkit-text-size-adjust: none;}
a {
  color: #323232;
  text-decoration: underline;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;}
a:visited { text-decoration: underline; color: #323232;}
a:active { text-decoration: underline; color: #77c7dd;}
a:hover { text-decoration: underline; color: #77c7dd;}

::selection { background: #77c7dd; color: #fff;}
::-moz-selection { background: #77c7dd; color: #fff;}

#wrap {
  width: 100%;
  position: relative;}

/* ---------------------------------------
  Sprite Icons
--------------------------------------- */
.icons:before {
  content: " ";
  background: url(../img/common/icons.png) top left no-repeat;}
.ico_fb:before {
  width: 15px;
  height: 13px;
  background-position: 0 2px;
  padding-left: 20px;}

/* 外部リンク */
a.external:after {
  content: " ";
  overflow: hidden;
  background: url(../img/common/icons.png) -205px 1px no-repeat;
  padding-right: 24px;
  vertical-align: middle;}
a.external:hover:after { background: url(../img/common/icons.png) -265px 1px no-repeat;}

/* ---------------------------------------
  btn
--------------------------------------- */
.btn {
  position: relative;
  display: block;
  text-align: center;
  text-decoration: none;
  background: #472d78;
  color: #fff !important;
  text-shadow: rgba(0,0,0,0.1) 1px 1px 1px;}
.btnRed .btn { background: #db322e;}
.btnBlu .btn { background: #6382d1;}
.btnL .btn {
  width: 495px;
  font-size: 20px;
  padding: 14px 20px;
  display: block;
  margin: 15px auto 0 auto;
  border-bottom: 5px solid #e5e5e5;
  clear: both;}
.btn:hover {
  text-decoration: none;
  background: #77c7dd;
  color: #fff;}
.btn:after {
  content: " ";
  display: block;
  width: 6px;
  height: 6px;
  position: absolute;
  right: 8px;
  top: 50%;
  margin-top: -4px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);}
.btnL .btn:after {
  width: 10px;
  height: 10px;
  position: absolute;
  right: 12px;
  top: 50%;
  margin-top: -6px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);}
.btnMail:before {
  content: " ";
  background: url(../img/common/icons.png) -60px -115px no-repeat;
  vertical-align: middle;
  padding-left: 35px;}
/* toggle */
h4.btnToggle {
  position: relative;
  padding: 10px 50px 10px 15px;
  border: 1px solid #e5e5e5;
  background: #f5f8fb;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;}
h4.btnToggle span { font-weight: normal;}
h4.btnToggle:hover { background: #ebf1f7; border-color: #d5d5d5;}
h4.btnToggleDwn:after {
  content: " ";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 15px;
  right: 20px;
  border-right: 3px solid #323232;
  border-bottom: 3px solid #323232;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);}
h4.btnToggleUp:after {
  content: " ";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 20px;
  right: 20px;
  border-right: 3px solid #323232;
  border-top: 3px solid #323232;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);}


/* =======================================

  header

======================================= */
#h1_wrap {
  width: 100%;
  background: #77c7dd;
  height: 25px;}
#index h1, .pages p.h1 {
  width: 960px;
  min-width: 960px;
  margin: 0 auto;
  height: 25px;
  line-height: 25px;
  font-size: 12px;
  color: #fff;}
#header_wrap {
  width: 100%;
  height: 110px;
  background: #fff;}
#header {
  width: 960px;
  min-width: 960px;
  margin: 0 auto;
  background: #fff;
  position: relative;}
#header .logo {
  position: relative;
  display: inline-block;
  top: 10px;
  left: 0;}
#header .top_tel1, #header .top_tel2 {
  position: absolute;
  display: block;
  right: 176px;}
#header .top_tel1 { top: 10px;}
#header .top_tel2 { top: 46px;}
#header .top_btns {
  position: absolute;
  right: 0;
  top: 19px;}
#header .btn {
  width: 176px;
  height: 33px;
  line-height: 33px;
  margin-bottom: 5px;}
#header .btn:hover { background: #77c7dd;}


/* =======================================

  gnavi

======================================= */
#gnavi_wrap {
  width: 100%;
  height: 70px;
  background: #fff url(../img/gnavi/bg.gif) top repeat-x;
  box-shadow:rgba(71, 71, 71, 0.4) 0px 5px 0px 0px;
  -webkit-box-shadow:rgba(71, 71, 71, 0.4) 0px 5px 0px 0px;
  -moz-box-shadow:rgba(71, 71, 71, 0.4) 0px 5px 0px 0px;
  position: relative;
  z-index: 1001;}
.pages #gnavi_wrap {
  box-shadow:none;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;}
#gnavi {
  width: 960px;
  min-width: 960px;
  height: 70px;
  margin: 0 auto;
  position: relative;
  z-index: 1002;
  -moz-box-shadow:0px -1px 0px 1px #ffffff;
  -webkit-box-shadow:0px -1px 0px 1px #ffffff;
  box-shadow:0px -1px 0px 1px #ffffff;}
#gnavi li {
  float: left;
  overflow: hidden;}
#gnavi li a {
  display: block;
  width: 160px;
  height: 43px;
  padding-top: 27px;
  background: transparent url(../img/gnavi/gnavi.png) no-repeat;
  text-decoration: none;
  font-size: 15px;
  font-weight: bolder;
  line-height: 1.3;
  text-align: center;
  text-indent: 0;
  position: relative;}
#gnavi li.service a {
  display: block;
  width: 120px;
  height: 43px;
  padding-top: 27px;
  background: transparent url(../img/gnavi/gnavi.png) no-repeat;
  text-decoration: none;
  font-size: 15px !important;
  font-weight: bolder;
  line-height: 1.3;
  text-align: center;
  text-indent: 0;
  position: relative;}
#gnavi li.g1 a, #gnavi li.g6 > a, #gnavi li.sg2 a {
  height: 52px;
  padding-top: 18px;}
#gnavi li a:hover {
  color: #fff;
  text-shadow: rgba(0,0,0,0.1) 1px 1px 1px;}
#gnavi li.g1 a { background-position: 0px -70px;} #gnavi li.g1:hover >a, #gnavi li.g1 a:hover { background-position: 0px 0px;}
#gnavi li.g2 a { background-position: -160px -70px;} #gnavi li.g2:hover >a, #gnavi li.g2 a:hover { background-position: -160px 0px;}
#gnavi li.g3 a { background-position: -320px -70px;} #gnavi li.g3:hover >a, #gnavi li.g3 a:hover { background-position: -320px 0px;}
#gnavi li.g4 a { background-position: -480px -70px;} #gnavi li.g4:hover >a, #gnavi li.g4 a:hover { background-position: -480px 0px;}
#gnavi li.g5 a { background-position: -640px -70px;} #gnavi li.g5:hover >a, #gnavi li.g5 a:hover { background-position: -640px 0px;}
#gnavi li.g6 a { background-position: -800px -70px;} #gnavi li.g6:hover >a, #gnavi li.g6 a:hover { background-position: -800px 0px;}
#gnavi .g1 .gnavi_2nd li a{
  padding-top: 30px;
  height: 38px;
}
/* ---------------------------------------
  gnavi_1st
--------------------------------------- */
li.gnavi_1st > a:after {
  content: " ";
  display: block;
  width: 6px;
  height: 6px;
  position: absolute;
  bottom: 8px;
  left: 77px;
  border-right: 2px solid #323232;
  border-bottom: 2px solid #323232;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);}
li.gnavi_1st:hover > a { color: #fff;}
li.gnavi_1st:hover > a:after {
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;}
ul.gnavi_2nd {
  visibility: hidden;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
  z-index: 1999;}
li.gnavi_1st ul.gnavi_2nd {
  position: absolute;
  top: 60px;
  box-shadow:rgba(71, 71, 71, 0.2) 0px 5px 0px 0px;
  -webkit-box-shadow:rgba(71, 71, 71, 0.2) 0px 5px 0px 0px;
  -moz-box-shadow:rgba(71, 71, 71, 0.2) 0px 5px 0px 0px;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;}
li.g3 ul.gnavi_2nd { left: 240px; width: 320px;}
li.g4 ul.gnavi_2nd { left: 0; }
li.g6 ul.gnavi_2nd { right: 0; width: 480px;}
li.gnavi_1st:hover ul.gnavi_2nd {
  top: 70px;
  visibility: visible;
  filter: alpha(opacity=95);
  -moz-opacity: 0.95;
  opacity: 0.95;}
li.gnavi_1st ul.gnavi_2nd > li { float: left;}
li.g4 ul.gnavi_2nd li a { font-size: 14px !important;}


/* =======================================

  .pages mainimg

======================================= */
#mi_wrap {
  width: 100%;
  height: 140px;
  background: #eceff2 url(../img/common/mi_nk.jpg) center top no-repeat;}
.sns #mi_wrap { background-image: url(../img/common/mi_sns.jpg);}
.newcar #mi_wrap { background-image: url(../img/common/mi_newcar.jpg);}
.chuko #mi_wrap { background-image: url(../img/common/mi_chuko.jpg);}
.service #mi_wrap { background-image: url(../img/common/mi_service.jpg);}
.campaign #mi_wrap { background-image: url(../img/common/mi_campaign.jpg);}
.tjsj #mi_wrap { background-image: url(../img/common/mi_tjsj.jpg);}
#mainimg {
  width: 900px;
  min-width: 900px;
  padding-left: 60px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  position: relative;}
#mainimg h1 {
  display: inline-block;
  position: relative;
  font-size: 26px;
  font-weight: bolder;
  padding: 18px 0 20px 80px;
  margin: 45px auto 0 auto;
  text-shadow: rgba(0,0,0,0.1) 1px 1px 1px;
  letter-spacing: 10px;}
.nk #mainimg h1 { margin-top: 35px;}
#mainimg h1.w2 { letter-spacing: 2px;}
#mainimg h1:before { background: transparent url(../img/common/icons.png) -90px -200px no-repeat;}
.sns #mainimg h1:before { background-position: -90px -200px;}
.newcar #mainimg h1:before { background-position: -180px -350px;}
.chuko #mainimg h1:before { background-position: -270px -200px;}
.service #mainimg h1:before { background-position: -180px -200px;}
.campaign #mainimg h1:before { background-position: -270px -350px;}
.tjsj #mainimg h1:before { background-position: 0px -350px;}


/* =======================================

  content

======================================= */
#content {
  width: 960px;
  min-width: 960px;
  margin: 30px auto 60px auto;
  position: relative;}
#content .box {
  background: #fff;
  border-bottom: 5px solid #e5e5e5;
  position: relative;}
#content #main .box { margin-bottom: 30px;}
#content #main .box:last-child { margin-bottom: 0;}
.pages #content #main .box {
  padding-bottom: 40px;
  margin-bottom: 0;}

/*  icon
--------------------------------------- */
.box h2:before, #mainimg h1:before {
  content: " ";
  height: 70px;
  width: 70px;
  display: inline-block;
  background: #472d78 url(../img/common/icons.png) -90px -200px no-repeat;
  position: absolute;
  top: 0;
  left: 0;}
#content #sns h2:before,
.red #main h2:before { background: #db322e url(../img/common/icons.png) -90px -200px no-repeat;}
.org #main h2:before { background: #ef9c1a url(../img/common/icons.png) -180px -350px no-repeat;}
#content .ylw h2:before,
.ylw #main h2:before { background: #dcdf03 url(../img/common/icons.png) -270px -200px no-repeat;}
.grn #main h2:before { background: #6aca35 url(../img/common/icons.png) -180px -200px no-repeat;}
.tqb #main h2:before { background: #1abecd url(../img/common/icons.png) -270px -350px no-repeat;}
#content #tjsj h2:before,
.blu #main h2:before { background: #6382d1 url(../img/common/icons.png) 0px -350px no-repeat;}
#content #tjsj h2:before { background-position: 0px -350px;}
#content #blog h2:before { background-position: -90px -350px;}
#content #sinchaku h2:before { background: #472d78 url(../img/common/icons.png) 0 -200px no-repeat !important;}
#mainimg h1:before { background-color: transparent !important;}
#main h2:before { background: #472d78 url(../img/common/icons.png) -90px -200px no-repeat;}

/*  #main style
--------------------------------------- */
#content h2 {
  color: #4d4d4d;
  font-size: 24px;
  margin: 0 0 20px 0;
  padding: 16px 20px 0 90px;
  min-height: 50px;
  position: relative;
  clear: both;
  height: 100%;}
#content h2 span { padding: 0 3px;}
#content h2 span,
.txtline span { background: linear-gradient(transparent 60%, #f5fcc5 40%);}
#content #sns h2 span { background: linear-gradient(transparent 60%, #fcd1d1 40%);}
#content #tjsj h2 span,
.blu #main h2 span { background: linear-gradient(transparent 60%, #d3dcf3 40%);}
#main h3 {
  margin: 15px 0 0 0;
  padding: 10px 20px;
  background: #f9ffde;
  clear: both;
  height: 100%;}
#main h3:before {
  content: " ";
  background: url(../img/common/icons.png) 0px -38px no-repeat;
  vertical-align: middle;
  padding-left: 25px;}
#main #sns h3 { background: #fff0f0;}
#main h4 {
  margin: 25px 20px 0 20px;
  font-weight: bolder;
  font-size: 15px;
  height: 100%;}
#main p {
  margin: 10px 20px 0 20px;
  height: 100%;}
#main p.btnL {
  margin: 0 auto;
  height: 100%;}
#main img.imgleft {
  float: left;
  margin: 0 20px 20px 20px;}
#main img.imgright {
  float: right;
  margin: 0 20px 20px 20px;}
#main img.imgcenter {
  display: block;
  margin: 0 auto 20px auto;}
hr {
  clear: both;
  margin: 20px 20px 0 20px;
  height: 0;
  border: none;
  border-top: 1px dotted #e5e5e5;}

/*  table
--------------------------------------- */
#main table.table {
  margin: 10px 20px 0 20px;
  width: 620px;
  table-layout: fixed;
  border-top: 1px solid #e5e5e5;}
#main table.linktable { font-size: 12px;}
#main table.table th { font-weight: bolder;}
#main table.table tr { border-bottom: 1px solid #e5e5e5;}
#main table.table th,
#main table.table td {
  padding: 10px 15px;
  vertical-align: middle;}
#main table.table2 {
  table-layout: auto;
  border-top: 1px solid #e5e5e5;
  border-left: 1px dotted #e5e5e5;}
#main table.table2 th {
  background: #f5f8fb;
  font-weight: bolder;}
#main table.table2 thead th {
  text-align: center;
  font-size: 18px;}
#main table thead th span { font-weight: normal;}
#main table.table2 th, #main table.table2 td {
  padding: 10px 6px 10px 10px;
  border-right: 1px dotted #e5e5e5;}

/*  list
--------------------------------------- */
.pages #main ul, .pages #main dl {
  margin: 10px 20px 0 20px;
  height: 100%;}
.pages #main ul.icon, .pages #main dl.icon { margin: 10px 20px 0 45px;}
.pages #main dl dt {
  margin-top: 15px;
  font-weight: bold;}
.pages #main ul li { margin-bottom: 5px;}
.pages #main ul.icon li, .pages #main dl.icon dt { text-indent: -25px;}
.pages #main ul.icon li:before, .pages #main dl.icon dt:before {
  content: " ";
  background: url(../img/common/icons.png) 0px 0px no-repeat;
  vertical-align: middle;
  padding-left: 25px;}
#main .table ul, #main .table dl { margin: 0;}
#main .table ul.icon, #main .table dl.icon { margin: 0 0 0 25px;}

/* ---------------------------------------
  side
--------------------------------------- */
#side {
  width: 260px;
  float: right;}
#index #side { float: left;}
#side ul#s_ban { line-height: 1.0;}
#side ul#s_ban li a {
  display: block;
  border-bottom: 5px solid #e5e5e5;
  margin-bottom: 25px;}
.sban_fb {
  margin-top: 25px;
  display: block;
  border-bottom: 5px solid #e5e5e5;}

/* ---------------------------------------
  main
--------------------------------------- */
#main {
  width: 660px;
  float: left;}
#index #main { float: right;}


/* =======================================

  ぱんくず

======================================= */
#tp_wrap {
  background: #e5e5e5;
  width: 100%;
  height: 40px;}
#topicpath {
  width: 960px;
  min-width: 960px;
  margin: 0 auto;
  font-size: 12px;
  height: 40px;
  line-height: 40px;
  overflow: hidden;}
#topicpath li {
  float: left;
  position: relative;
  display: block;
  height: 40px;
  line-height: 40px;
  padding-right: 26px;}
#topicpath li:after {
  content: " ";
  display: block;
  width: 9px;
  height: 9px;
  position: absolute;
  right: 12px;
  top: 50%;
  margin-top: -5px;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);}
#topicpath li:last-child:after { content: none;}


/* =======================================

  pageTop

======================================= */
#pageTop {
  z-index: 99999;
  font-size: 12px;
  padding-left: 10px;
  width: 100px;
  height: 40px;
  line-height: 40px;
  background: #474747;
  text-decoration: none;
  font-weight: bold;
  color: #fff;
  text-align: center;
  filter: alpha(opacity=90);
  opacity: 0.9;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;}
#pageTop:before {
  content: " ";
  display: inline-block;
  width: 6px;
  height: 6px;
  position: relative;
  left: -10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);}
#pageTop:hover { background: #77c7dd;}


/* =======================================

  btminfo

======================================= */
#btminfo_wrap {
  width: 100%;
  background: #fff;
  padding-bottom: 20px;}
#btminfo {
  width: 960px;
  min-width: 960px;
  margin: 20px auto 0 auto;
  position: relative;}
#btminfo .bi_left {
  width: 480px;
  float: left;}
#btminfo .bi_right {
  width: 480px;
  float: right;}
#btminfo img {
  float: left;
  margin-right: 10px;}
#btminfo p.add {
  font-size: 12px;
  margin-top: 5px;}
#btminfo p a {
  display: inline;
  font-size: 11px;
  background: #472d78;
  height: 17px;
  line-height: 17px;
  padding: 0 20px 0 10px;
  margin: 0 0 0 5px;
  color: #fff;}
#btminfo p a:hover { background: #77c7dd;}


/* =======================================

  footer

======================================= */
#footer_wrap {
  width: 100%;
  height: 150px;
  background: #4b4a4a url(../img/common/f_bg.png) 0px 68px repeat-x;
  position: relative;
  overflow: hidden;}
#footer {
  width: 960px;
  min-width: 960px;
  height: 150px;
  margin: 0 auto;
  color: #fff;
  font-size: 12px;
  position: relative;}
#footer a {
  color: #fff;
  text-decoration: none;}
#footer a:hover { color: #7d7d7d;}

/* ---------------------------------------
  f_car
--------------------------------------- */
#f_car1, #f_car2, #f_car3 {
  position: absolute;
  bottom: 35px;}
#f_car1 {right: -80px;}
#f_car2 {right: -700px;}
#f_car3 {right: -2000px;}

/* ---------------------------------------
  #fnavi
--------------------------------------- */
#fnavi {
  position: absolute;
  top: 15px;}
#fnavi li {
  float: left;
  margin-right: 12px;}
#fnavi li:after {
  content: "|";
  margin-left: 12px;
  color: #ddd;}
#fnavi li.last:after { content: none;}
#copy {
  position: absolute;
  bottom: 8px;
  right: 0;
  text-align: right;}

#ET4D{
  z-index: 11500;
  position: fixed;
  top:240px;
  right: 0;
}
#ET4D img{
  height: 130px;
}
#ET4D:hover{
  opacity: 0.5;
}

/* =======================================

  ClearFix

======================================= */
/* For modern browsers */
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;}
.clearfix:after { clear: both;}
/* For IE 6/7 only */
.clearfix { *zoom: 1;}

.text_center{
  text-align: center;
}
.mt30{
  margin-top: 30px;
}
.mb30{
  margin-bottom:30px;
}