/*=====================================================================
 スライダーのためのcss(slick)
 ======================================================================*/
  .slider img{
  max-width: 100%;
 }
  @media screen and (min-width:1000px) {
  .slider img{
  max-width: 1440px;
  }
  }
  .slick-prev,
  .slick-next
  {
  width: 30px;/* 左右の(<) (>)ボタンの外を囲むボックスの大きさ*/
  height: 30px;
  }
  .slick-prev:before,
  .slick-next:before
  {
  font-size: 30px;/* 左右の(<) (>)ボタンの大きさ*/
  opacity: .5;/* 左右の(<) (>)ボタンの透明度*/
  color: #555;/* 左右の(<) (>)ボタンの色*/
  }
  .slick-prev
  {
  left: 25px;/* 左の(<)ボタンの位置*/
  z-index: 1;
  }
  .slick-next
  {
  right: 25px;/* 右の(>)ボタンの位置*/
  }
  .slick-dots li button:before
  {
  font-size: 16px;/* スライダー下のドット（● ● ● ●）の大きさ*/
  opacity: .25;
  color: #155882;/* スライダー下のドットの色*/
  }
  .slick-dots li.slick-active button:before {
    color: #f3b71a;
  }

/*=====================================================================
 lightbox
 ======================================================================*/
  .lb-loader,.lightbox{
    text-align:center;line-height:0
  }
  body.lb-disable-scrolling{
    overflow:hidden
  }
  .lightboxOverlay{
    position:absolute;
    top:0;left:0;
    z-index:9999;
    background-color:#000;
    opacity:.8;
    display:none
  }
  .lightbox{
    position:absolute;
    left:0;
    width:100%;
    z-index:10000;
    font-weight:400;
    outline:0
  }
  .lightbox .lb-image{
    display:block;
    height:auto;
    max-width:inherit;
    max-height:none;
    border-radius:3px;
    border:4px solid #fff
  }
  .lightbox a img{
    border:none
  }
  .lb-outerContainer{
    position:relative;
    width:250px;
    height:250px;
    margin:0 auto;
    border-radius:4px;
    background-color:#fff
  }
  .lb-loader,.lb-nav{
    position:absolute;
    left:0
  }
  .lb-outerContainer:after{
    content:"";
    display:table;
    clear:both
  }
  .lb-loader{
    top:43%;
    height:25%;
    width:100%
  }
  .lb-cancel{
    display:block;
    width:32px;
    height:32px;
    margin:0 auto;
    background:url(../img/loading.gif) no-repeat
  }
  .lb-nav{
    top:0;
    height:100%;
    width:100%;
    z-index:10
  }
  .lb-container>.nav{
    left:0
  }
  .lb-nav a{
    outline:0;
    background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)
  }
  .lb-next,.lb-prev{
    height:100%;
    cursor:pointer;
    display:block
  }
  .lb-nav a.lb-prev{
    width:34%;
    left:0;
    float:left;
    background:url(../img/prev.png) left 48% no-repeat;
    opacity:0;
    -webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s
  }
  .lb-nav a.lb-prev:hover{
    opacity:1
  }
  .lb-nav a.lb-next{
    width:64%;
    right:0;
    float:right;
    background:url(../img/next.png) right 48% no-repeat;
    opacity:0;
    -webkit-transition:opacity .6s;
    -moz-transition:opacity .6s;
    -o-transition:opacity .6s;
    transition:opacity .6s
  }
  .lb-nav a.lb-next:hover{
    opacity:1
  }
  .lb-dataContainer{
    margin:0 auto;
    padding-top:5px;
    width:100%;
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px
  }
  .lb-dataContainer:after{
    content:"";
    display:table;
    clear:both
  }
  .lb-data{
    padding:0 4px;
    color:#ccc
  }
  .lb-data .lb-details{
    width:85%;
    float:left;
    text-align:left;
    line-height:1.1em
  }
  .lb-data .lb-caption{
    font-size:13px;
    font-weight:700;
    line-height:1em
  }
  .lb-data .lb-caption a{
    color:#4ae
  }.lb-data .lb-number{
    display:block;
    clear:left;
    padding-bottom:1em;
    font-size:12px;
    color:#999
  }
  .lb-data .lb-close{
    display:block;
    float:right;
    width:30px;
    height:30px;
    background:url(../img/close.png) top right no-repeat;
    text-align:right;outline:0;opacity:.7;
    -webkit-transition:opacity .2s;
    -moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s
  }
  .lb-data .lb-close:hover{cursor:pointer;opacity:1}

/*=====================================================================
 ナビゲーションドロップダウンのためのCSS 
 ======================================================================*/

/*==ナビゲーション全体の設定*/
 nav {
  /*ナビバーの背景色*/
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 5;
}

/*ナビゲーションを横並びに*/
 nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

/*2 階層目以降は横並びにしない*/
 nav ul ul {
  display: block;
}

/*下の階層のul や矢印の基点にするためli にrelative を指定*/
 nav ul li {
  position: relative;
}

/*ナビゲーションのリンク設定*/
 nav ul li a {
  display: block;
  color: #999;
  /*グローバルナビの文字色*/
  padding: 20px 35px;
  transition: all .3s;
}

 nav ul li li a {
  padding: 10px 35px;
}

 nav ul li a:hover {
  color: #c3c3c3;
  /*ボタンの反転色*/
}

/*==矢印の設定*/
/*2 階層目を持つli の矢印の設定*/
 nav ul li.has-child::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 25px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  transform: rotate(135deg);
}


/*== 2・3 階層目の共通設定 */
/*下の階層を持っているul の指定*/
 nav li.has-child ul {
  /*絶対配置で位置を指定*/
  position: absolute;
  left: 0;
  top: 62px;
  z-index: 4;
  /*形状を指定*/
  background-color: rgba(168, 162, 162, 0.9);
  /*ドロップダウンメニューの背景色*/
  width: 200px;
  /*はじめは非表示*/
  visibility: hidden;
  opacity: 0;
  /*アニメーション設定*/
  transition: all .3s;
}

/*hover したら表示*/
 nav li.has-child:hover>ul,
 nav li.has-child ul li:hover>ul,
 nav li.has-child:active>ul,
 nav li.has-child ul li:active>ul {
  visibility: visible;
  opacity: 1;
}

/*ナビゲーションa タグの形状*/
 nav li.has-child ul li a {
  color: #555;
  font-size: 18px;
  border-bottom: solid 1px rgba(255, 255, 255, 0.6);
}

 nav li.has-child ul li:last-child>a {
  border-bottom: none;
}

 nav li.has-child ul li a:hover,
 nav li.has-child ul li a:active {
  color: #f3b71a;
  /*ドロップダウンメニューのhover 時の背景色*/
}


/*==768px 以下の形状*/
@media screen and (max-width:768px) {
 nav {
    padding: 0;
  }

 nav ul {
    display: block;
  }

 nav li.has-child ul,
 nav li.has-child ul ul {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    visibility: visible;
    /*JS で制御するため一旦表示*/
    opacity: 1;
    /*JS で制御するため一旦表示*/
    display: none;
    /*JS のslidetoggle で表示させるため非表示に*/
    transition: none;
    /*JS で制御するためCSS のアニメーションを切る*/
  }

 nav ul li a {
    border-bottom: 1px solid #ccc;
  }

  /*矢印の位置と向き*/
 nav ul li.has-child::before {
    left: 20px;
  }

 nav ul ul li.has-child::before {
    transform: rotate(135deg);
    left: 20px;
  }

 nav ul li.has-child.active::before {
    transform: rotate(-45deg);
  }
}

/* ============================================================
  ハンバーガーボタン
   ============================================================*/
  .hamburger {
    display: block;
    position: fixed;
    z-index: 3;
    right: 13px;
    top: 16px;
    width: 52px;
    height: 52px;
    cursor: pointer;
    text-align: center;
    font-size: 0;
  }

  .hamburger span {
    display: block;
    position: absolute;
    width: 40px;
    height: 2px;
    left: 6px;
    background: #fff;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }

  .hamburger span:nth-child(1) {
    top: 10px;
  }

  .hamburger span:nth-child(2) {
    top: 20px;
  }

  .hamburger span:nth-child(3) {
    top: 30px;
  }

  /* ナビ開いてる時のボタン */
  .hamburger.active span:nth-child(1) {
    top: 16px;
    left: 6px;
    background: #fff;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  .hamburger.active span:nth-child(2),
  .hamburger.active span:nth-child(3) {
    top: 16px;
    background: #fff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
  }

.globalMenuSp {
    position: fixed;
    z-index: 2;
    top: 0;
    right: 0;
    color: #fff;
    background: rgba(255, 255, 255, 0.6);
    text-align: center;
    width: 50%;
    height: 100%;
    opacity: 0;
    transition: opacity .6s ease, visibility .6s ease;
    pointer-events: none;
  }

.globalMenuSp ul {
    margin: 0 auto;
    padding: 0;
    padding: 40px 0 ;
    border-radius: 0 0 25px 25px;
    width: 100%;
    background-color: #155882;
    border: 3px solid #fff;
  }

.globalMenuSp ul li {
    list-style-type: none;
    padding: 10px 0;
    width: 100%;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0.2em;
    transition: .4s all;
    border-bottom: 1px solid #fff;
  }

  .globalMenuSp ul li img {
    max-width: 40px;
  }

.globalMenuSp ul li:last-child {
    margin-bottom: 0;
    border-bottom: none;
  }

.globalMenuSp ul ul {
  text-align: center;
  padding: 10px 0;
  border: none;
}

.globalMenuSp ul ul li {
  font-size: 16px;
  padding:0;
  margin: 0;
  border-bottom: none;
}

.globalMenuSp ul ul li a:hover {
    color: #739BB4;
  }

.globalMenuSp ul li a {
    display: block;
    color: #fff;
    padding: 5px 0;
    text-decoration: none;
  }

.globalMenuSp ul li a:hover {
    color: #f3b71a;
  }

  /* このクラスを、jQuery で付与・削除する */
.globalMenuSp.active {
    opacity: 100;
    pointer-events: auto;
  }

  /* intro */
  .hamburger.intro2 span {
    background-color: #fafafa;
  }

  .hamburger.intro1 span {
    background-color: #555;
  }

  .globalMenuSp-img img {
    max-width: 50%;
  }


  @media screen and (max-width: 400px) {
  .hamburger {
    top: 10px;
    width: 52px;
    height: 52px;
  }


   .globalMenuSp {
      width: 100%;
    }

    .hamburger span {
      width: 30px;
    }


  }