//---------------------------------------------------------------------------
// >>> TABLE OF CONTENTS:
//---------------------------------------------------------------------------
// # Include netimpress variables
// # Include all of Bootstrap
// # Heading
// # Contents
//   - メインビジュアル
//   - 
//   - ローカル情報
//   - 営業エリア



//---------------------------------------------------------------------------
// Include netimpress variables
// !!! Do NOT edit !!!
//---------------------------------------------------------------------------
@import "./variable";

//---------------------------------------------------------------------------
// Include all of Bootstrap
// !!! Do NOT edit !!!
//---------------------------------------------------------------------------
@import "../module/bootstrap/scss/functions";
@import "../module/bootstrap/scss/variables";
@import "../module/bootstrap/scss/mixins";
@import "../module/bootstrap/scss/utilities";


//---------------------------------------------------------------------------
// Heading
//---------------------------------------------------------------------------


//---------------------------------------------------------------------------
// Contents
//---------------------------------------------------------------------------

---------------------------------------------------------------------

body {
  overflow-x: hidden;
}
//--------------
// パンくず
//--------------
.breadcrumb-cont{
    position: relative;
  }
#breadcrumb{
  position: relative;
  @include media-breakpoint-up(sm) {  
    position: absolute;
    color: $white;
    font-size: 14px;
    padding: 5px 4vw;
    width: 100%;
    a {
      color: $white;
      text-decoration: underline;
    }
    .breadcrumb-item::before{
      color: $white;
    }
  }
}
  //--------------
  // メインビジュアル
  //--------------
  
  .mv-bg {
    @include media-breakpoint-down(sm) {
    display: block;
    background: url(../images/city-area-bil-bg.webp) bottom right no-repeat $primary;
    background-size: 120% auto;
    padding: 3rem 0 .5rem 0 !important;
      }
    @include media-breakpoint-up(sm) {
      display: block;
      background: url(../images/city-area-bil-bg.webp) top center no-repeat;
      background-size: cover;
      padding: 140px 0 10px 0;
      } 
  }
  .mv-bg{
    h1
    {
      text-shadow: #2a2a2a 0 3px 4px;
      @include media-breakpoint-up(sm) {
        font-size: 60px;
      }
    }
    p
    {
      text-shadow: #2a2a2a 0 3px 4px;
      @include media-breakpoint-up(sm) {
        font-size: 30px;
      }
    }
    .mv-plan{
      width: 65vw;
    }
    .hashtag{
      font-size: .9em;
      @include media-breakpoint-up(sm) {
        font-size: 1.1em;
      }
    }
  }


// mv下のボタン

.home-mvbutton-txt {
  p {
    color: $yellow-300;
  }

  @include media-breakpoint-up(md) {
    clip-path: none;
  }
}

.home-mvbutton-bt ul li {
  list-style: none;
}

.home-mvbutton ul li a {
  padding: 1em 2em;
}

//--------------
// イントロ
//--------------


//-------------
// ローカル情報
//--------------
div.alignfull.local {
  @include media-breakpoint-up(lg) {
    position: relative;
    &:before {
      content: "";
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      background-image: url(../images/shoppingmall.jpg);
      border-radius: 50%;
      display: block;
      width: 537px;
      aspect-ratio: 1 / 1;
      margin: auto 0;
      position: absolute;
      top: 0;
      bottom: 0;
      right: ( 537px / 4 ) * -1;
      opacity: 0.8;
    }
  }
}

//-------------
// 営業エリア
//--------------
.alignfull[data-label="Area"] {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  $areaList: isesaki, ota, takasaki, maebashi, kawagoe, kumagaya, tokorozawa;
  @each $area in $areaList {
      &.#{$area} {
        @include media-breakpoint-down(lg) {
          background-image: url(../images/#{$area}-local-image-780w.jpg);
        }
        @include media-breakpoint-up(lg) {
          background-image: url(../images/#{$area}-local-image-1920w.jpg);
        }
      }
  }
}

#single-area-peripheral .area-list-wrap {
  background-color: rgba( $white, 0.85 );
  border-radius: 1rem;
}
.area-list,
.train-list,
.station-list {
  margin: $spacer;
  padding-left: 0;
  list-style: none;
  max-height: 150px;
  overflow-y: scroll;

 ul.train-list.list-unstyled{
  height: 150px !important;
 }

  li {
    display: inline-block;
    &:after {
      content: "　|　";
    }
  }
}
#city-area-peripheral > div > ul > li{
  margin: $spacer;
  padding-left: 0;
  list-style: none;
}
.station-list {
  padding-top: $spacer;
}

// 対応エリア

/*
.area-list{
    background: url(../images/city-area-bg1.webp) bottom right no-repeat; 
    background-size: auto;
    padding-bottom: 70px;
}
.train-list{
  background: url(../images/city-area-bg2.webp) bottom right no-repeat; 
  background-size: auto;
  padding-bottom: 70px;
}*/


/* メモホチキス */
.hochi-box-b {
  position: relative;
  margin: 0em auto 2em;
  padding: 35px 20px 15px;
  background-color: #fff; /* ボックス背景色 */
  color: #555555; /* 文章色 */
  box-shadow: 1px 1px 2px #ccc; /* 影 */
  height: 240px;
 }
 .hochi-box-b::before, 
 .hochi-box-b::after {
  position: absolute;
  content: '';
  top: 15px;
  width: 30px;
  border: 1.5px solid #C0C0C0; /*ホチキス*/
  border-radius: 20px;
  box-shadow: 0 -1px 2px #555;
 }
 .hochi-box-b::before { left: 80px;}
 .hochi-box-b::after { right: 80px;}