@charset "utf-8";
/* CSS Document */

/*=================================================================
　　　スライドナビ
=================================================================*/

div#slide-nav {
  padding-left: 0;
  list-style: none;
  width: 100%;
  margin-bottom: 0px;
}
div#slide-nav:after {
  content: '\0020';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#pageslide {
  /* These styles MUST be included. Do not change.（必須・変更不可） */
  display: none;
  position: absolute;
  position: fixed;
  top: 0;
  height: 100%;
  z-index: 20;
  /* Specify the width of your pageslide here ■■■変更箇所：ページスライドの幅（領域）■■■ */
  width: 260px;
  padding: 0 20px;
  /* These styles are optional, and describe how the pageslide will look■■■変更箇所：ページスライドの外観 ■■■ */
  background-color: #333;
  color: #fff;
  -webkit-box-shadow: inset 0 0 5px 5px #222;
  -moz-box-shadow: inset 0 0 5px 5px #222;
  box-shadow: inset 0 0 5px 5px #222;
  overflow: scroll;
  padding-top: 0;
  padding-bottom: 0;
  left: 0px;
}

@media only screen and (max-width: 959px) {
  #slide-nav {
    display: none;
  }

  #pageslide {
    width: 200px;
  } /* ■■■ 変更箇所：スライド距離（.js内の「outerWidth」を「outerHeight」に変更） ■■■ */
}

/*=================================================================
　　　スライドナビopenボタン
=================================================================*/

.open {
  display: none;
  width: 45px;
  height: 35px;
  background: #333 url(../img/menu_open.png) no-repeat center center;
  -moz-background-size: 65% auto; /* ★ボケを直す為、大きい画像をフィットさせる★ */
  background-size: 65% auto; /* ★ボケを直す為、大きい画像をフィットさせる★ */
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  box-shadow: inset 0 0 3px #ffffff;
  border: 0;
  text-indent: 100%; /* 「text-indent:-9999px;」動作改善策 */
  white-space: nowrap; /* 「text-indent:-9999px;」動作改善策 */
  overflow: hidden;
}

@media only screen and (max-width: 959px) {
  .open {
    display: block;
  }
}

/*=================================================================
　　　スライドナビcloseボタン
=================================================================*/

/* スライドナビcloseボタン非表示 */
.slide-close {
  display: none;
}

@media only screen and (max-width: 959px) {
  /* スライドナビcloseボタン */
  .slide-close {
    display: block;
    height: 30px;
    width: 40px;
    margin: 7px auto 7px auto;
    background: #777777 url(../img/menu_close.png) no-repeat center center;
    -moz-background-size: 75% auto; /* ★ボケを直す為、大きい画像をフィットさせる★ */
    background-size: 75% auto; /* ★ボケを直す為、大きい画像をフィットさせる★ */
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    box-shadow: inset 0 0 3px #fff;
    border: 0;
    float: left;
    text-indent: 100%; /* 「text-indent:-9999px;」動作改善策 */
    white-space: nowrap; /* 「text-indent:-9999px;」動作改善策 */
    overflow: hidden; /* 「text-indent:-9999px;」動作改善策 */
  }

  .slide-close a {
    display: inline;
    height: 30px;
    width: 40px;
    margin-right: 10px;
    float: left;
    text-indent: 100%; /* 「text-indent:-9999px;」動作改善策 */
    white-space: nowrap; /* 「text-indent:-9999px;」動作改善策 */
    overflow: hidden; /* 「text-indent:-9999px;」動作改善策 */
  }
}

/*=================================================================
　　　menuメイン
=================================================================*/

.menu {
  /* --------- flexbox styles --------- */
  display: flex;
  align-items: start;
  justify-content: center;
  width: 100%;
  position: relative;
  z-index: 17;
}

.menu_box {
  /* --------- flexbox styles --------- */
  align-items: start;
  height: 100%;
  width: 19.5%; /* ■■■ 変更箇所：ボタンサイズ横幅（15.6・19.5・24.4・33.3%） ■■■ */
  margin-right: 1%;
}

.dd-menu_title a {
  float: none;
}

.menu a {
  display: block;
  border: 1px solid #ffffff;
  margin-bottom: 2px; /* ★ボタンの下に隙間★ */
  padding-top: 0px; /* ★ボタン内の隙間★ */
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.dd-menu_box-top {
  display: block;
  width: 100%;
}

.dd-menu_box {
  float: left;
  width: 19.5%; /* ■■■ 変更箇所：ボタンサイズ横幅 ■■■ */
  margin-right: 1%;
  position: relative;
}

.dd-menu_title {
  max-height: 0;
  overflow: hidden;
  width: 100%;
}

.ie8 .dd-menu_box-top:hover .dd-menu_title {
  max-height: 200px;
}

.dd-menu_title-top,
.dd-menu_title-top-on {
  cursor: default;
  border: 1px solid #ffffff; /* ★ボタンのボーダーライン★ */
  border-radius: 3px;
  margin-bottom: 2px; /* ★ボタンの下に隙間★ */
  display: block;
  padding-top: 0px; /* ★ボタン内の隙間★ */
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.activate {
  display: none;
  position: absolute;
  cursor: pointer;
  height: 42px; /* ★ボタンのボーダーラインの分、pxを足す★ */
  margin: 0 0 0 -15px;
  opacity: 0;
  width: 100%;
}

.dd-menu_title,
.dd-menu_box-top {
  -webkit-transform: translateZ(1); /* Chrome での index.html 表示不具合改善策（元0→1） */
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

@media only screen and (min-width: 960px) {
  .dd-menu_box-top:hover .dd-menu_title {
    display: block;
    max-height: 500px;
  }

  .dd-menu_title {
    position: absolute;
  }
}

@media only screen and (max-width: 959px) {
  .menu {
    /* --------- flexbox styles --------- */
    flex-direction: column; /* ★「.dd-menu_box」、「.menu_box」を縦並びに★ */
    align-items: center; /* ★「.dd-menu_box」、「.menu_box」を中央寄せに★ */
    position: static;
  }

  .activate:checked ~ .dd-menu_title {
    max-height: 200px;
  }

  .dd-menu_title {
    width: 100%;
  }

  .activate {
    display: block;
    margin: 0 auto;
    width: 82%;
  }

  .dd-menu_box {
    width: 98%; /* ■■■ 変更箇所：799px以下画面でのボタンサイズ横幅 ■■■ */
    float: none;
  }

  .menu_box {
    width: 98%; /* ■■■ 変更箇所：799px以下画面でのボタンサイズ横幅 ■■■ */
    float: none;
  }

  .menu a,
  .dd-menu_box-top {
    float: none;
  }
}

/*=================================================================
　　　Skin
=================================================================*/

.menu a,
.dd-menu_title-top,
.dd-menu_title a {
  border: 1px solid #ffffff; /* ■■■ 変更箇所：ボタンのボーダーライン ■■■ */
  border-radius: 3px; /* ■■■ 変更箇所：角丸 ■■■ */
  -webkit-box-shadow: inset 0 1px 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.31); /* ■■■ 変更箇所：シャドー ■■■ Remove this line if you dont want a dropshadow on your buttons*/
  box-shadow: inset 0 1px 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.31); /* ■■■ 変更箇所：シャドー ■■■ Remove this line if you dont want a dropshadow on your buttons*/

  background: rgb(255, 255, 255);
  background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.49865951742627346) 0%, rgba(255, 255, 255, 0.697459584295612) 30%, rgba(255, 255, 255, 0.7505773672055427) 60%, rgba(255, 255, 255, 0.8519782913165266) 100%);
  background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.49865951742627346) 0%, rgba(255, 255, 255, 0.697459584295612) 30%, rgba(255, 255, 255, 0.7505773672055427) 60%, rgba(255, 255, 255, 0.8519782913165266) 100%);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.49865951742627346) 0%, rgba(255, 255, 255, 0.697459584295612) 30%, rgba(255, 255, 255, 0.7505773672055427) 60%, rgba(255, 255, 255, 0.8519782913165266) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
  /* ■■■ 変更箇所：背景色 ■■■ グラデーション作成は「https://cssgradient.io/」*/

  font-family: TitilliumWeb-Regular, Arial; /* ■■■ 変更箇所：font種類 ■■■ */
  font-size: 1.3rem; /* ■■■ 変更箇所：fontサイズ ■■■ */
  font-weight: normal;
  color: #474747;
  text-align: center;
  letter-spacing: 0.1em;
  text-shadow: 1px 1px 0px #fff;
  padding: 7px; /* ■■■ 変更箇所：ボタンサイズ高さ（fontサイズに依存） ■■■ */
}

.menu a:hover,
.dd-menu_title-top:hover,
.menu_box-on a,
.dd-menu_title-top-on,
.dd-menu_title a:hover,
.dd-menu_title-on a {
  border: 1px solid #ffffff; /* ■■■ 変更箇所：DDownボタンのボーダーライン ■■■ */
  border-radius: 3px; /* ■■■ 変更箇所：角丸 ■■■ */
  -webkit-box-shadow: inset 0 1px 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.31); /* ■■■ 変更箇所：シャドー ■■■ Remove this line if you dont want a dropshadow on your buttons*/
  box-shadow: inset 0 1px 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.31); /* ■■■ 変更箇所：シャドー ■■■ Remove this line if you dont want a dropshadow on your buttons*/

  background: rgb(113, 113, 113);
  background: -moz-linear-gradient(0deg, rgba(113, 113, 113, 0.7035189075630253) 0%, rgba(113, 113, 113, 0.7455357142857143) 20%, rgba(139, 139, 139, 0.7511379551820728) 50%, rgba(139, 139, 139, 0.7455357142857143) 100%);
  background: -webkit-linear-gradient(0deg, rgba(113, 113, 113, 0.7035189075630253) 0%, rgba(113, 113, 113, 0.7455357142857143) 20%, rgba(139, 139, 139, 0.7511379551820728) 50%, rgba(139, 139, 139, 0.7455357142857143) 100%);
  background: linear-gradient(0deg, rgba(113, 113, 113, 0.7035189075630253) 0%, rgba(113, 113, 113, 0.7455357142857143) 20%, rgba(139, 139, 139, 0.7511379551820728) 50%, rgba(139, 139, 139, 0.7455357142857143) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#717171",endColorstr="#8b8b8b",GradientType=1);
  /* ■■■ 変更箇所：背景色 ■■■ グラデーション作成は「https://cssgradient.io/」*/

  font-family: TitilliumWeb-Regular, Arial; /* ■■■ 変更箇所：font種類 ■■■ */
  font-size: 1.3rem; /* ■■■ 変更箇所：fontサイズ ■■■ */
  font-weight: normal;
  color: #fff;
  text-align: center;
  letter-spacing: 0.1em;
  text-shadow: 1px 1px 0px #474747;
  padding: 7px; /* ■■■ 変更箇所：ボタンサイズ高さ（fontサイズに依存） ■■■ */
}

@media only screen and (max-width: 959px) {
  .menu {
    background: #333;
  } /* ■■■ 変更箇所：スライドナビボタンの背景色 ■■■ */

  :checked ~ .dd-menu_title-top {
    background: rgb(113, 113, 113);
    background: -moz-linear-gradient(0deg, rgba(113, 113, 113, 0.7035189075630253) 0%, rgba(113, 113, 113, 0.7455357142857143) 20%, rgba(139, 139, 139, 0.7511379551820728) 50%, rgba(139, 139, 139, 0.7455357142857143) 100%);
    background: -webkit-linear-gradient(0deg, rgba(113, 113, 113, 0.7035189075630253) 0%, rgba(113, 113, 113, 0.7455357142857143) 20%, rgba(139, 139, 139, 0.7511379551820728) 50%, rgba(139, 139, 139, 0.7455357142857143) 100%);
    background: linear-gradient(0deg, rgba(113, 113, 113, 0.7035189075630253) 0%, rgba(113, 113, 113, 0.7455357142857143) 20%, rgba(139, 139, 139, 0.7511379551820728) 50%, rgba(139, 139, 139, 0.7455357142857143) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#717171",endColorstr="#8b8b8b",GradientType=1);
    /* ■■■ 変更箇所：背景色 ■■■ グラデーション作成は「https://cssgradient.io/」*/

    color: #fff;
    text-shadow: 1px 1px 0px #474747;
  }

  .dd-menu_title {
    background: none;
  }

  .dd-menu_box-top a {
    background: rgb(199, 199, 199);
    background: -moz-linear-gradient(0deg, rgba(199, 199, 199, 0.6502976190476191) 0%, rgba(199, 199, 199, 0.7483368347338936) 20%, rgba(199, 199, 199, 0.7483368347338936) 50%, rgba(199, 199, 199, 0.7455357142857143) 100%);
    background: -webkit-linear-gradient(0deg, rgba(199, 199, 199, 0.6502976190476191) 0%, rgba(199, 199, 199, 0.7483368347338936) 20%, rgba(199, 199, 199, 0.7483368347338936) 50%, rgba(199, 199, 199, 0.7455357142857143) 100%);
    background: linear-gradient(0deg, rgba(199, 199, 199, 0.6502976190476191) 0%, rgba(199, 199, 199, 0.7483368347338936) 20%, rgba(199, 199, 199, 0.7483368347338936) 50%, rgba(199, 199, 199, 0.7455357142857143) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c7c7c7",endColorstr="#c7c7c7",GradientType=1);
    /* ■■■ 変更箇所：背景色 ■■■ グラデーション作成は「https://cssgradient.io/」*/
  }
}

/* IE */

.ie8 .dd-menu_box-top:hover .dd-menu_title {
  display: block;
}
.ie8 .dd-menu_title {
  position: absolute;
}