@charset "UTF-8";
/* CSS Document */
@import url("https://fonts.googleapis.com/earlyaccess/mplus1p.css");

html{-webkit-text-size-adjust: none; height:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

/*body{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size:14px; line-height:12pt; margin:0; background-size: 100%; color: #505050;}*/


body{font-family: "Mplus 1p" sans-serif !important;  font-size:14px; line-height:12pt; margin:0; background-size: 100%; color: #505050;}
body, input, button{-moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased;}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
img{vertical-align: middle; image-rendering: -webkit-optimize-contrast;}

a{text-decoration: none; color: #000;}
button:focus{ outline: none;}

.warpper-slide{width:100%; margin: 0 auto; background: #aadffe;}
.warpper{width:980px; margin: 0 auto;}


/*--------- header ---------*/
header.warpper{ position: relative; min-height: 88px;}
.contact-header{ width: 100%; display: table; height: 30px;}
.contact-header .text-head, .contact-header .text-call, .contact-header .suzuki-tel{ display: table-cell;}
.contact-header .text-head span{font-size: 11px;}

.contact-header .text-head, .contact-header .text-call{ color: #505050; vertical-align: middle; vertical-align: central;}
.contact-header .text-head h1{ font-size: 11px;}
.contact-header .text-call{ text-align: right; font-size: 12px;}
.contact-header .text-call .icon-fb{ text-align: right;}
.contact-header .text-call span.call strong{ font-size: 18px;
    color: #06348b;
    font-weight: 800;     margin: 0 10px 0 5px;}

.suzuki-tel{ width: 170px; position: absolute; top: 0; right: 0; }
.suzuki-tel div{ width: 100%; background: #aadffe; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; padding: 8px 4px; text-align: center;}
.suzuki-tel div strong{ font-size: 16px; line-height: 1.5; display: block;}

.wsmenucontainer h1.logo-head{ width: 280px; float: left;position: relative; z-index: 100;}
.wsmenucontainer h1.logo-head img{ width: 100%;}

.wsmenu-list > li > a span i, .wsmenu-list > li > span i{ display: none;}

.call img{
    position: relative;
    top: -3px;
}

/*--------- main ---------*/
.text-content{ margin: 18px auto 0;}

.bg-breadcrumb{ background: #fcf7d3; border-bottom: 2px solid #fdd78f;}
.breadcrumb{ padding: 8px 0; margin-top: 8px; font-size: 12px;}
.breadcrumb a{ color: #505050;}
.breadcrumb a:hover{ text-decoration: underline;}
.breadcrumb i.icon-home{ color: #52a8fc; font-size: 18px; margin:0 3px 0 0px; top:1px;}
.breadcrumb i{ color: #aaaaaa; font-size: 18px; position:relative; top:2px; margin:0 2px 0 3px;}

.head-title{ padding: 4px 0; margin: 8px auto; width: 100%; text-align: left; color: #303030; font-size: 21px; font-weight: 700; line-height: 1.2; border-bottom:3px solid #a3deea;}
.head-title img{ margin-right: 12px;}
.head-title .line-images{ background: url(../images/line-img.png); height: 12px; width: 100%; display: block; margin: 8px auto 0;}

.animated-arrow .text-menu{ display: none;}


/*--------- footer ---------*/
footer{ text-align: center; width: 100%; color: #777777; padding: 28px 0 0;  font-size: 12px;}
footer .text-footer{ background:#eeeeee; padding: 12px; border-bottom: 2px solid #d2d2d2; text-transform: uppercase;}
footer .menu-footer{ background: url(../images/bg-patten-blue.png); padding: 12px 0; color: #fff; text-align: center; display: flex; flex-wrap: wrap;}
footer .menu-footer .content-footer{ display: flex; flex-wrap: wrap; align-items: center;}
footer .menu-footer .logo-footer{ width: 25%;}
footer .menu-footer .logo-footer img{ max-width:100%;}
footer .menu-footer .list-menu-footer{ width: 75%; padding: 12px;}
footer .menu-footer .list-menu-footer ul{ display: flex; flex-wrap: wrap;}
footer .menu-footer .list-menu-footer ul li{ padding: 5px;}
footer .menu-footer .list-menu-footer ul li i{ color: #60c1f6; font-size: 16px; font-weight: bold; margin-right: 5px;}
footer .menu-footer .list-menu-footer ul li a:hover{ text-decoration: underline;}




/*---------Mobile---------*/
@media (max-width: 872px){
  .wsmenu{ text-align: center;}
  .wsmenu-list{ float: none !important;}
  .wsmenucontainer h1.logo-head{ float: none; margin: auto;}
}

@media (max-width: 768px){
  header.warpper{position: fixed; background: #fff; z-index: 9;}
  main{ padding: 86px 0 50px;}
  .wsmenucontainer h1.logo-head{ padding: 0 12px; float: left; margin:0;}
  .wsmenu-list > li > a span i, .wsmenu-list > li > span i{ display: block; color: #0088d8;}

  .animated-arrow{
    background: #5eb7fb;
    padding: 19px;
    top: 30px;
    right: 0;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    color: #fff;
    font-weight: bold;
    width: 48px;
    text-align: right;
    top: 30px;
  }
  .animated-arrow .text-menu{ display: block; }
  .wsmenucontainer.clearfix.wsoffcanvasopener .animated-arrow span,
  .wsmenucontainer.clearfix.wsoffcanvasopener .animated-arrow span:before,
  .wsmenucontainer.clearfix.wsoffcanvasopener .animated-arrow span:after{ top: 10px;}

  .contact-header{height: auto;}
  .contact-header .text-head{ padding: 0 12px;}
  .contact-header .text-head, .contact-header .text-call, .contact-header .suzuki-tel{ display: block;}
  .contact-header .text-head, .contact-header .text-call{ padding: 4px;}
  .contact-header .text-call{ position: absolute; top: 25px; right: 52px;}
  .contact-header .text-call .call{ display: none;}
  .suzuki-tel{ width: 100%; position:relative;  height: 58px; margin-top: 4px;}
  .suzuki-tel div{ border-radius: 0px; text-align: left; padding: 8px;}
  .suzuki-tel div strong{ float: right; margin: 8px auto;}

  .wsmenu-list{ margin: 1px auto 0 !important;}
  .wsmenu-list > li{ border-left: 4px solid #06348a !important; background: url(../images/bg-patten-blue.png)!important; border-bottom: 2px solid #fff;}
  .wsmenu-list > li > a span{ display: inline-block !important;}
  .wsmenu-list > li > a { color: #2689c2 !important; }

  .text-content{ margin: 10px 5px 0;}

  .breadcrumb{ margin: 0 12px; border-top: 0;}
}

@media( max-width:480px){
  .head-title{ font-size: 14px; line-height: 1;}
  .contact-header .text-head h1{ display: none;}
  .wsmenucontainer h1.logo-head{ margin: 14px 0 0;}

  footer .menu-footer .list-menu-footer ul{ text-align: left;}
  footer .menu-footer .list-menu-footer ul li{ display: inline-block; width: 100%;}
}

@media (min-width: 320px) and (max-width: 780px)
{
		.warpper{width: 100%;}

    footer .menu-footer .logo-footer,
    footer .menu-footer .list-menu-footer{ width: 100%; display: block;}
}

@media (min-width: 781px) and (max-width: 1199px)
{
		.warpper{width: 100%;}
}

@media (min-width: 481px) and (max-width: 780px)
{

}

@media (min-width: 320px) and (max-width: 480px)
{

}