/*body {
  letter-spacing: 0.05em;
} */
  .btn {
    display: inline-block;
    padding: 13px 20px;
    color: #fff;
    text-decoration: none;
    position: relative;
    background: transparent; 
    border: 1px solid #e1e1e1;
    font: 12px/1.2 "Oswald", sans-serif;
    letter-spacing: 0.4em;
    text-align: center;
    text-indent: 2px;
    text-transform: uppercase;
    transition: color 0.1s linear 0.05s;
  
    &::before {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 1px;
      background: #e1e1e1;
      z-index: 1;
      opacity: 0;
      transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0.2s;
    }
  
    &::after {
      transition:border 0.1s linear 0.05s;
    }
  
    .btn-inner {
      position: relative;
      z-index: 2;
    }
  
    &:hover {
      color: #373737;
      transition: color 0.1s linear 0s;
  
      &::before {
        top: 0;
        height: 100%;
        opacity: 1;
        transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0s;
      }
  
      &::after {
        border-color: #373737;
        transition:border 0.1s linear 0s;
      }
    }
  }
  
  .slideshow { 
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 500px; /*100vh;*/
    z-index: 1;

    .slogan {
      position: absolute;
      top: 130px;
      left: 0;
      padding: 20px 70px 20px 40px;  
      line-height: 40px;
      background-color: #63AC29;
      opacity: 50%;
      color:#63AC29;
      font-family:"M PLUS 1p", serif;
      font-size: 40px;
      z-index: 3;
      letter-spacing:0.08em;
    }
    .slogan span{ font-size: 28px;}
    .moji {
      position: absolute;
      top:130px;
      left: 0;
      padding: 20px 70px 20px 40px;  
      line-height:40px;
      background-color:transparent;
      color: #fff;
      font-family:"M PLUS 1p", serif;
      font-size: 40px;
      z-index: 4;
      font-weight: 300;
      letter-spacing:0.08em;
    }
    .moji span{ font-size: 28px;}
    .slogan-e {
      position: absolute;
      top:250px;
      left: 10px;
      padding: 0px 40px;  
      line-height: 35px;
      color: #fff;
      font-family:"M PLUS 1p", serif;
      font-size: 18px;
      z-index: 4;
      font-weight: 300;
      letter-spacing:0.08em;
    }
    @media screen and (max-width:768px) {
      .slogan{line-height: 35px;font-size:18px;letter-spacing: 0;}
      .slogan span{font-size:16px;}
      .moji{ 
        font-size:24px;
        padding:20px 15px;
        letter-spacing:0.0em;
      }
      .moji span{font-size:16px;}
      .slogan-e{
        top:240px;
        line-height: 30px;
        padding: 0px 15px;
      }
    }
    .slideshow-inner { 
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  
    .slides { 
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
  
    .slide { 
      display: none;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      opacity: 0;
      transition: opacity 0.3s ease;
  
      &.is-active {
        display: block;
      }
  
      &.is-loaded{
        opacity: 1;
      }
  
      .caption { 
        padding-top: 380px;
      }
  
      .image-container { 
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: center;
        z-index: 1;
        background-size: cover;
        image-rendering: optimizeQuality;
  
        &::before { 
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0,0,0,0.2); /*rgba(0,0,0,0.5);*/
        }
      }
  
      .image {
        width: 100%;
        width: 100%;
        object-fit: cover;
        height: 100%;
      }
  
      .slide-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        color: #fff;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
      }
  
      .title { 
        margin: 0 auto 15px;
        max-width: 1000px;
        /*font: 300 50px/1.2 "Oswald", sans-serif;
        letter-spacing: 0.35em;*/
        text-transform: uppercase;
        /*z-index: 3;*/
      }
  
      .text {
        margin: 0 auto;
        max-width: 1000px;
        font-size: 18px;
        line-height: 1.4;
      }
  
      .btn {
        margin: 15px 0 0;
        border-color: #fff;
  
        &::before {
          background:#fff
        }
      }
    }
  
    /*
    .pagination { 
      position: absolute;
      bottom: 35px;
      left: 0;
      width: 100%;
      height: 12px;
      cursor: default;
      z-index: 2;
      text-align: center;
  
      .item { 
        display: inline-block;
        padding: 15px 5px;
        position: relative;
        width: 46px;
        height: 32px;
        cursor: pointer;
        text-indent: -999em;
        z-index: 1;
  
        + .page {
          margin-left: -2px;
        }
  
        &::before {
          content: "";
          display: block;
          position: absolute;
          top: 15px;
          left: 5px;
          width: 36px;
          height: 2px;
          background: rgba(255, 255, 255, 0.5);
          transition: background 0.2s ease;
        }
  
        &::after {
          width: 0;
          background: #fff;
          z-index: 2;
          transition: width 0.2s ease;
        }
  
        &:hover::before,
        &.is-active::before {
          background-color: #fff;
        }
      }
    }
  */

.pagination {
  position: absolute;
  bottom: 35px;
  left: 0;
  width: 100%;
  height: 12px;
  cursor: default;
  z-index: 2;
  text-align: center;

  .item {
    display: inline-block;
    padding: 15px 5px;
    position: relative;
    width: 46px;
    height: 32px;
    cursor: pointer;
    text-indent: -999em; /* 文字を隠す場合*/
    z-index: 1;

    /* 隣接する item にマージン*/
    & + .item {
      margin-left: -2px;
    }

    /* 背景トラック */
    &::before {
      content: "";
      display: block;
      position: absolute;
      top: 15px;
      left: 5px;
      width: 36px;
      height: 2px;
      background: rgba(255, 255, 255, 0.5);
      transition: background 0.2s ease;
      z-index: 1;
    }

    /* 前景の塗り（アニメーションの対象）*/
    &::after {
      content: "";
      display: block;
      position: absolute;
      top: 15px;
      left: 5px;
      width: 0;               /* 初期は0で、.is-active で伸ばす */
      height: 2px;
      background: #fff;
      z-index: 2;
      transition: width 0.2s ease;
    }

    &:hover::before,
    &.is-active::before {
      background-color: #fff;
    }

    &.is-active::after {
      width: 36px;            /* ここでバー全長に */
    }
  }
}








    
    .arrows {
      .arrow {
        margin: -33px 0 0;padding: 20px;position: absolute;top: 50%;cursor: pointer;z-index: 3;
      }
  
      .prev {
        left: 30px;
  
        &:hover .svg {
          left: -10px;
        }
      }
  
      .next {
        right: 30px;
  
        &:hover .svg {
          left: 10px;
        }
      }
  
      .svg {
        position: relative;
        left: 0;
        width: 14px;
        height: 26px;
        fill: #fff;
        transition: left 0.2s ease;
      }
    }
  }