@charset "UTF-8";
.is_sp {
  display: none;
}

body *{
  box-sizing: border-box;
}

@media screen and (max-width:960px) {
  img{
    max-width: 100%;
  }
  .is_pc {
    display: none;
  }
  .is_sp {
    display: block;
  }
  /* 見出し装飾------------------------------------------------------------------------------ */
  .midashi_slash:before, .midashi_slash:after {
  	height: 3px;
  }
  .midashi_slash:before {
	  left:0;
  	transform: rotate(60deg);
  }
  .midashi_slash:after {
	  right: 0;
  	transform: rotate(120deg);
  }
  /* ハンバーガーメニュー ------------------------------------------------------------------------------*/
  header .inner {
    width: 90%;
    /*display: block;*/
    flex-wrap: nowrap;
  }
  header h1 {
    width: 100%;
  }
  header .logo {
    width: 100%;
  }
  .logo img {
    width: 45%;
  }
  /* ハンバーガーメニュー ------------------------------------------------------------------------------*/
  /*========= ボタンのためのCSS ===============*/
  .openbtn {
    width: 70px;
    right: 0;
  }
  .openbtn span:nth-of-type(1) {
    top: 5px;	
  }
  .openbtn span:nth-of-type(2) {
    top: 15px;
  }
  .openbtn span:nth-of-type(3) {
    top: 25px;
  }
  #contents {
    padding-top: 55px;
  }
  .main{
    background: none;
    padding-top: 0px;
  }
  .main .inner{
    width: 100%;
    margin: 0 auto;
  }
  h2.slider {
    font-size: 1.75em;
  }
  .bnr .inner, .stock .inner, .shop-list .inner  {
    width: 95%;
    margin: 0 auto;
  }
  .bnr {
    padding: 20px 0;
  }
  /* 在庫情報 --------------------------------------------------------------------------------------------*/
  section#stock {
    padding-top: 0;
  }
  section.stock .inner .stock {
    margin-bottom: 0.15em;
    padding-bottom: 200%;
  }
  section#stock h2 {
    margin-bottom: 0;
  }
  section.stock a.push { /*『在庫情報をもっと見る』*/
    font-size: 125%;
  }
  /* 専門店として --------------------------------------------------------------------------------------------*/
  section#pro .youtube {
    width: 100%;
  }
  section#pro .inner ul.pro li { /* 横並び表示 */
    flex-direction: column;
    align-items: center;
    margin: 2em auto;
    
    position: relative;
    padding: 0.5em 1em;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
  }
  section#pro .inner ul.pro li:before,
  section#pro .inner ul.pro li:after {
    content: '';
    position: absolute;
    top: -10px;
    width: 1px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: #fff;
  }
  section#pro .inner ul.pro li:before {
    left: 5px;
  }
  section#pro .inner ul.pro li:after {
    right: 5px;
  }
  section#pro .inner ul.pro li:nth-child(odd) { /* 奇数行のみ左に画像 */
    flex-direction: column;
  }
  section#pro .inner ul.pro li .col h3 {
    font-size: 110%;
    text-align: center;
    margin: 0.25em auto;
    width: fit-content;
  }
  section#pro .inner ul.pro li:nth-child(odd) .col, /* 奇数行のテキストを左詰め➔真ん中へ */
  section#pro .inner ul.pro li:nth-child(even) .col { /* 偶数行のテキストを右詰め➔真ん中へ */
    align-items: center;
  }
  section#pro .inner ul.pro li:nth-child(odd) .col h3:after, /*『▶』➔なくす */
  section#pro .inner ul.pro li:nth-child(even) .col h3:before { /*『◀』➔なくす */
    content: "";
  }
  section#pro .inner ul.pro li:nth-child(odd) .col {
    margin-right: 0;
  }
  section#pro .inner ul.pro li:nth-child(even) .col {
    margin-left: 0;
  }
  section#pro .inner ul.pro li .col p {
    line-height: 1.5em;
    font-size: 98%;
  }
  section#pro .inner ul.pro li .col p:nth-of-type(2) { /* スバル専門店として説明文 */
    margin-block-start: 0;
    margin-block-end: 0;
  }
  section#pro .inner ul.pro li:nth-child(odd) .col h3:after,
  section#pro .inner ul.pro li:nth-child(odd) .col { /* 奇数行の見出しとテキスト全体 */
    margin-right: 0;
  }
  section#pro .inner ul.pro li img { /* イメージ画像 */
    width: 100%;
  }
  section#pro .inner ul.pro li .col a.push { /* 春日部工場LPページリンク */
    margin: 1em auto 0.25em auto;
    border-radius: 10px;
  }
  section#pro .inner ul.pro ul.kuchikomi { /* Google,CSN,Gooクチコミ点数 */
    margin-top: 1em;
  }
  section#pro .inner ul.pro ul.kuchikomi li {
    border: none;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    padding: 0;
  }
  section#pro .inner ul.pro ul.kuchikomi li:before, section#pro .inner ul.pro ul.kuchikomi li:after { /* 枠線なくす */
    background: none;
  } 
  /***/
  /*.shop-block .txt p {
    font-size: 85%;
  }*/
  /*-店舗情報 ----------------------------------------------------------------------------*/
  table.shop tbody tr { /* 店舗情報詳細 */
    font-size: 85%;
  }
  .shop-list .bnr {
    padding: 0 0 60px 0;
  }
  .map iframe {
    height: 300px;
  }
  .shop-list p.shop_logo img { /* お客様、社員、社会に必要とされる企業の創造、の画像 */
    width: 90%;
  }
  /*- footer ----------------------------------------------------------------------------*/
  footer {
    padding: 10px 0 10px 0;
  }
  .footerBnner {
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 1000;
  }
  .footerBnner ul {
    display: flex;
    margin-bottom: 0.15em;
  }
  .footerBnner li {
    width: 48%;
    margin: 0px auto;
  }
  footer .inner div.copy a {
    font-size: 80%;
  }
  /*- ページトップリンク ----------------------------------------------------------------------------*/
  #page-top {
    bottom: 70px;
    z-index: 1000;
  }
  footer .inner div.copy {
    text-align: left;
    margin-left: 5%;
  }
  /*- モーダルウィンドゥ ----------------------------------------------------------------------------*/
  h2#modal1Title  {
    font-size: 115%;
  }
  .remodal h3.midashi_slash {
    padding: 0 1.15em;
    font-size: 110%;
    font-weight: bold;
    width: 100%;
  }
  .remodal h3.midashi_slash:before,
  .remodal h3.midashi_slash:after {
	  top: 50%;
  	width: 15%;
	  height: 3px;
  }
  #modal1Desc p {
    font-size: 70%;
  }
  .remodal a.reserve-btn {
    font-size: 115%;
    padding: 5px;
  }
  /* キャンペーン ------------------------------------------------------------------------------*/
  .campaign h3 {
    font-size: 145%;
  }
  .campaign h4 {
  	font-size: 125%;
  }
  .campaign p {
    padding: 0.25em 0.15em;
  }
}