@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*                                                        */
/* ● other.css                                           */
/*    共通部品                                            */
/*    ・その他                                            */
/*                                                        */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


/* レスポンシブ 表示ON/OFF */

            /* + + + + + レスポンシブ + + + + +  */
            @include media-query(over-bp-m) {
                .hide-wide {
                  display: none!important;
                }
            }
            @include media-query(under-bp-m) {
                .hide-narrow {
                  display: none!important;
                }
            }


/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   images                                         */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
img{
  max-width: 100%;
  height: auto;
}
    /* googlemap 内の画像は適用外 */
    #GoogleMap img{
      max-width: none;
    }


/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   video                                          */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
video{
  max-width: 100%;
}



/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   DropDown                                       */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ドロップダウン
     ※開閉処理は JSに置き換えたためコメントアウト
--------------------------------------------------- */
.DropDownParent{
  // position: relative;
  
    .DropDownChild{
      // visibility: hidden;
      // opacity: 0;
      // position: absolute;
      // top:    80%;
      // top:   100%;
      // left:    0%;
      // width: 100%;
      // z-index: 5000;
      // -webkit-transition: all .2s;
      //         transition: all .2s;
    }
    html.PcView &:hover .DropDownChild{
      // visibility: visible;
      // opacity: 1;
      // top:   100%;
    }
  }


  

/* 特殊な段落のスタイル定義
--------------------------------------------------- */

/*  - - （FAQ 汎用） - - */
.FaqParagraph{
  background: rgba($base-color, 0.25);
  border: 1px solid #aaa;
  border-radius: 0.5em;
  //font-size: 125%;
  margin: 0 auto 1em;
  transition: all .2s;

    .Question,
    .Answer {
      position: relative;
      padding: 1.5em 1.5em;
      padding-left: 4em;
      @include media-query(under-bp-m) {
        padding: 1em 1em;
        padding-left: 3em;
      }

      &::before {
        position: absolute;
        top:  1.75em;
        left: 2em;
        font-weight: normal;
        font-family: 'Arial';
        transform: scale(1.75);
        transition: all .2s;

        @include media-query(under-bp-m) {
          top:  1em;
          left: 1.5em;
          transform: scale(1.5);
        }

      }
    }
    .Answer {
      @extend .clearfix;
      //padding-bottom: 3.5em;
      &::before {
        content: "A.";
        color: #c99;
      }
      @include media-query(under-bp-m) {
        //padding-bottom: 2em;
      }
    }
    .Question{
      &::before {
        content: "Q.";
        color: $main-color;
      }
      &::after {
        content: "×";
        color: #777;
        background: #aaa;
        position: absolute;
        font-weight: 800;
        font-size: 2.5rem;
        border-radius: 3em;
        line-height: 3rem;
        text-align: center;
        width: 3rem;
        opacity: 0;
        transition: all .2s;
        top: 0.5rem;
        right:  0.5rem;
        @include media-query(under-bp-m) {
          position: static;
          margin-left: 0.5em;
        }
      }
    }

    /* 開閉ボタン・hover */
    &:not(.Active):hover,
    &:not(.Active):focus{
      border-color: #eee;
    }
    .ParagraphHeader{
      cursor: pointer;
      .Heading{
        @include media-query(over-bp-m) {
          padding-right: 1em!important;
        }
        @include media-query(under-bp-m) {
          // padding-right: 4em!important;
        }
        position: relative;
      }

      &:hover::after,
      &:focus::after  {
        //background: $main-color;
        color: #fff;
      }
    }

    &.Active {
      .ParagraphHeader{
        .Heading{

        }
        &:after  {
          opacity: 1;
        }
      }
    }


    /* - - question - - */
     .Question {
      font-weight: bold;
      margin: 0;
      .Heading{
        margin: 0;
        font-weight: 700;
        font-size: $font-size-m;
        @include media-query(under-bp-m) {
          font-size: $font-size-d;
        }
      }
    }
    /* - - answer - - */
     .Answer {
      border-top:  1px dashed #ccc;
      .DefaultText{
        margin: 0;
        font-size: $font-size-d;
        @include media-query(under-bp-m) {
          font-size: $font-size-d;
        }
      }
    }

  }



    
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   開閉コンテンツ（アコーディオン）               */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

  .AccordionParent{
    border-top: 1px solid;
    padding: 2rem 0;
    margin: 2rem auto 0;
    & + .AccordionParent{
      margin-top: 0;
    }
    > .Heading{
      position: relative;
      margin: 0!important;
      font-size: $font-size-d;
      font-weight: 800;
    }
    
    .ToggleButton{
      display: block;
      padding-left: 3.25rem;
      cursor: pointer;
      .Label::after{
        // content: "＋";
        content: "\e81a";
        font-family: 'preset_icon';
        position: absolute;
        left: 0;
        top: calc(50% - 0.75em);
        font-size: 2.0rem;
        line-height:  1.5em;
        height: 1.5em;
        width: 1.5em;
        text-align: center;
        border-radius: 100%;
        vertical-align: middle;
        transform: rotate(0deg);
        transition: all .2s;
        color:  $main-color;
        background:  $base-color;
      }
      html.PcView &:hover .Label::after,
      html.PcView &:focus .Label::after{
        color: #fff;
        background: $main-color;
      }
    }
    .AccordionChild{
      display: none;
      padding: 2.0rem 0rem 2.0rem 5rem;
      @include media-query(under-bp-m) {
        padding: 2.0rem 0rem 2.0rem 2.5rem;
      }
    }
    &.Active {
      .Heading{
        .Label::after{
          transform: rotate(135deg);
          //color: #fff;
          //background: $main-color;
        }
      }
    }
  }






/* Scrollable ウィンドウ幅が狭いときに横スクロール
--------------------------------------------------- */
.Scrollable {
  margin: 1em auto;

  /* スクロールバー装飾（firefox） */
  scrollbar-width: thin;  // 細さ(幅・高さ両方に適用)
  scrollbar-color: $main-color rgba(0,0,0,0.25); // つまみの色 軌道の色

  /* スクロールバー装飾（webkit系） */
  &::-webkit-scrollbar{
    height: 4px;
    margin-top: 5px;
  }
  &::-webkit-scrollbar-track{ // 軌道
    background: rgba(0,0,0,0.25);
  }
  &::-webkit-scrollbar-thumb { // つまみ
    background: $main-color;
  }
  /* アイコン */
  .ScrollableIcon{
    position: absolute;
    top: 40%;
    left: 175px;
    z-index: 10;
    padding: 28px 25px;
    border-radius: 100%;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.25);
    display: inline-block;
    img{
      width: 60px;
    }
    @include media-query(over-bp-m) {
      display: none!important;
    }
  }


  @include media-query(under-bp-m) {
      &:not(.Vertical){
        overflow-x: auto;
      }
      position: relative;
      margin-bottom: 1em;

      &:hover .ScrollableIcon{
        display: none;
      }

      /* 画像用の処理 */
      &:not(.Vertical) > img {
        width: 200vw;
        max-width: initial;
      }
      /* Table用の処理 */
      &:not(.Vertical)  > table {
        width: 660px; /* ここはスクロール対象の最大幅（デフォ値）を入れる */
        margin-bottom: 0!important;
        th{
          white-space: nowrap;
        }
      }
    }

  // 縦スクロールに対応
  &.Vertical{
    margin: 2.5rem auto;
    max-height: 65rem;
    @include media-query(under-bp-m) {
      max-height: 50vh;
    }
    overflow-y: auto;
    border: 1px solid $main-color;
    padding: 0;
    > table{
      margin: 0;
    }
  }
}




/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   SearchBox                                      */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* 検索ボックス
--------------------------------------------------- */
.SearchBox{
  margin: 0 1em;
  position: relative;
  font-size: 1.4rem;
  .FormItem{
    width: 20rem;
    margin: 0;
    input[type="text"]{
      transition: background 0.2s;
      background: none;
      border: 1px solid;
      color: #fff;
      border-radius: 3em;
      padding: 0.375em 1.5em 0.375em 0.5em;
      box-shadow: none;
      &:focus{
        background: rgba(255,255,255,0.2);
      }
    }
  }
  .ButtonItem{
    .Button{
      position: absolute;
      right: 1em;
      top: 50%;
      margin: 0;
      width: 1em;
      margin-top: -0.5em;
      line-height: 1em;
      font-size: 1.4rem;
      width: 1em;
      height: 1em;
      border: none!important;
    }
  }
}




/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   FontsizeChangeBox                              */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* 文字サイズ可変ボックス
--------------------------------------------------- */
.FontsizeChangeBox{
  display: flex;
  font-size: 1.2rem;
  align-items: center;
  margin-left: 3rem;
  &,
  & *{
    line-height: 1;
  }
  .FontSizeChanger{
    display: flex;
    list-style: none;

    li{
      margin-left: 0.5rem;
      a{
        font-size: 1.2rem;
        border: 1px solid $main-color;
        background: #fff;
        padding: 0.4em 0.75em;
        &.Active{
          color: #fff;
          background: $main-color;
          border-color: $main-color;
        }
      }
    }
  }
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   MessageBox                                     */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* MessageBox（汎用メッセージ：NotFound,システム警告・エラーなど）
--------------------------------------------------- */
.MessageBox,
%MessageBox{
  padding: 25px 25px;
  margin: 1em auto;
  width: 75%;
  text-align: center;
  background: rgba(255,255,255,0.05);
  // border: 2px solid;
  border-radius: 10px;
  position: relative;
    .Heading{
      margin: 0 0 1em;
      line-height: 1.75;
      font-size: 100%;
      .Label{
        margin-top: 20px;
        display: block;
      }
      .Icon{
        display: block;
        &::before{
          font-size: 175%;

        }
      }
    }
    .DefaultText{
      text-align: center;
      line-height: 2;
      margin: 0;
    }
  
    @include media-query(under-bp-m) {
        width: 90%;
        .Heading {
          .Icon{
            padding-top: 1.5em;
          }
          .Label:first-child{
            margin-top: 20px;
          }
        }
    }

    /* options */
    &.Caution{
      color: #222;
      color: inherit;
      background: #f5f47a;
    }
    
  }



  


/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   LinkBox                                        */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* LinkBox（未使用）
--------------------------------------------------- */
.LinkBox{
  padding: 2.5rem;
  margin: 5rem auto;
  background-color: $base-color;
}









/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   iframeBox                                      */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* iframeBox （iframeをレスポンシブ対応で埋め込む）
--------------------------------------------------- */
.iframeBox {
  &:not(.Square){
    @include aspect-ratio(9/16);
  }
  &.Square{
    @include aspect-ratio(1/1);
  }
}
 


/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   AccessColumnGroup                              */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* AccessColumnGroup（交通アクセスの段組み表示専用）
--------------------------------------------------- */
.AccessColumnGroup{

  .ColumnGroup{
    .Column{
      background: rgba($base-color, 1);
      @include media-query(under-bp-m) {
        margin-bottom: 0.5rem;
      }

      > .inner{
        padding: 2.0rem;
        overflow: hidden;

        .Heading{
          text-align: center;
          font-weight: 700;
          font-size: $font-size-l;
          padding-bottom: 0.5em;
          margin-bottom: 0.5em;
          display: flex;
          flex-direction: column;
          @include media-query(under-bp-m) {
            font-size: $font-size-m;
          }
          .Icon{
            font-size: 300%;
            margin-right: 0;
            opacity: 0.35;
            color: lighten($main-color, 15%);
          }
          .Label{
          }
        }
        ul{
          li{
            font-size: 87.5%;
            line-height: 1.5;
            margin-bottom: 0.75em;
          }
        }
      }
    }
  }

}




/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   IllustMap                                      */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* IllustMap （GO AROUND のイラストマップ）
--------------------------------------------------- */
.IllustMap{

  .Image{
    a{
      @extend .hvr-childimg-zoom;
    }
  }
}