a:hover{
  cursor: pointer!important;
}

ul{
  padding:0;
}

@font-face{
    font-family:"dot";
    src:url('../font/jf-dot-mplus10-webfont.woff') format('woff'),
/*    : url('jf-dot-mplus10-webfont.woff2') format('woff2'),*/
        url('../font/jf-dot-mplus10b-webfont.woff') format('woff');
}

/* ------------------------ loading -------------------------- */
/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  text-align:center;
  color:#333;
}

/* Loading画像中央配置　*/
#splash_text {
  position: absolute;
  top: 50%;
  left: 50%;
    z-index: 999;
  transform: translate(-50%, -50%);
  color: #333;
  width: 100%;
}

/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg{
    height: 2px;
}

/*割れる画面のアニメーション*/
.loader_cover {
    width: 100%;
    height: 50%;
    background-color: #fff;
    transition: all .2s cubic-bezier(.04, .435, .315, .9);
    transform: scaleY(1);
}
/*上の画面*/
.loader_cover-up {
    transform-origin: center top;
}

/*下の画面*/
.loader_cover-down {
    position: absolute;
    bottom: 0;
    transform-origin: center bottom;
}
/*クラス名がついたらY軸方向に0*/
.coveranime {
    transform: scaleY(0);
}



/* ------------------------ button -------------------------- */

.button{
  position: relative;
  overflow: hidden;
  width:220px;
/*  background: #e73a36;*/
  background: #ffc404;
  color:#fff;
  text-align: center;
  text-decoration: none;
/*  border:6px solid #d76c01;*/
  position: relative;
/*  background-image:url("../img/index/member/walkA_lock.gif");*/
  background-size: 60px;
  background-repeat: no-repeat;
  background-position: right -3px;
  padding: 6px 0 10px;
  box-shadow:
    4px 0 #d76c01,
    -4px 0 #d76c01,
    0 4px #d76c01,
    0 -4px #d76c01;
  filter:drop-shadow(0px 4px 0px #0000002e);
}
.button:hover{
  transform:translateY(4px);
  filter:drop-shadow(0px 0px 0px #0000002e);  
  color:#fff;
}

.button p{
  font-family: dot;
  margin: 0;
  font-size:30px;
  line-height: 0.5em;
  filter: drop-shadow(0px 2px 0px #eea600);
  letter-spacing:0.1em;
}

.button span{
  font-family: 'M PLUS 1p', sans-serif;
  font-size: 12px;
  font-weight: bold;
  color:#fff;
  display: block;
  margin-bottom:3px;
  filter:drop-shadow(0px 2px 0px #0000002e);
}


.button:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 25px;
  width: 7px;
  height: 100%;
  background: url(../img/partials/arrow.png) no-repeat center /100% auto;
  filter: drop-shadow(0px 2px 0px #eea600);
}

/* ------------------------ topbar_view -------------------------- */
#topbar{
  top:0;
  left:0;
  width:100%;
  z-index: 100;
  position: -webkit-sticky;
  position: sticky;
/*  box-shadow: 3px 3px 3px hsl(0deg 0% 3.1% / 50%);*/
/*  background: url(../img/index/about/text_bg.png) repeat center / 35%;*/
}

#topbar nav *{
  font-weight: 900;
}

.wrapper{
  width:94%;
  max-width:1280px;
  margin:0 auto;
  overflow: hidden;
  
}

#topbar .wrapper{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height:80px;
  max-width: none;
}

#topbar .wrapper ul{
  display: flex;
/*  background: rgb(255 255 255 / 97%);*/
/*  border-radius: 0px 0 0 81px;*/
}

#topbar .wrapper ul li{
/*  display: flex;*/
  FONT-VARIANT: JIS04;
  text-align: center;
  font-weight: bold;
  font-family: 'M PLUS 1p', sans-serif;
  font-family: 'Poppins', sans-serif;
  margin: 7px 16px 11px;
}

#topbar .wrapper ul li:first-child{
  margin-left:60px;
}

#topbar .wrapper ul li a{
  color:#fff;
  text-decoration: none;
  letter-spacing: 0.04em;
  filter: drop-shadow(1px 1px 2px #aaa);
}
#topbar .wrapper ul li p{
  font-size:14px;
  margin-bottom:-12px;
/*  mix-blend-mode: difference;*/
}
#topbar .wrapper ul li span{
  font-size:10px;
/*  mix-blend-mode: exclusion;*/
}
#topbar .wrapper ul li img{
  width: 20px;
  height: auto;
  margin-bottom:-4px;
}

/* メニュー部分 */
#g_nav_bg{
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(255,255,255,0.4);  
}

.drawer  {
  display: none;
  position: fixed; /* relativeの親要素を基準に配置する */
  top: 0; /* 基準の位置から上0px */
  right: 0; /* 基準の位置から右0px */
  width: 100%; /* メニューの幅 */
  height: 100%; /* メニューの高さ */
  z-index: 1000!important;
/*  animation: gradation 20s infinite;*/
  opacity: 1;
}

@keyframes gradation{
  0% {
/*      background-color: #f18e53;*/
      background-color: rgb(241 142 83 / 80%);
  }
  14% {
/*      background-color: #d95086;*/
      background-color: rgb(217 80 134 / 80%);
  }
  28% {
/*      background-color: #9365aa;*/
      background-color: rgb(147 101 170 / 80%);
  }
  42% {
/*      background-color: #7690c9;*/
      background-color: rgb(118 144 201 / 80%);
  }
  56% {
/*      background-color: #23abba;*/
      background-color: rgb(35 171 186 / 80%);
  }
  70% {
/*      background-color: #6abc81;*/
      background-color: rgb(106 188 129 / 80%);
  }
  84% {
/*      background-color: #c7db53;*/
      background-color: rgb(199 219 83 / 80%);
  }
  98% {
/*      background-color: #fac315;*/
      background-color: rgb(250 195 21 / 80%);
  }
  100% {
/*      background-color: #f18e53;*/
      background-color: rgb(241 142 83 / 80%);
  }
}

.drawer .nav_box{
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  max-width: 320px;
  width: 90%;
  height: 500px;
  box-shadow: 4px 0 #222, -4px 0 #222, 0 4px #222, 0 -4px #222;
  filter: drop-shadow(0px 4px 0px #0000002e);
  padding-top:20px;
  background-color: #fff; /* メニューの背景色 */
}
/* ボタン部分 */
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  box-sizing: border-box;
  -webkit-transition: ease .5s;
  transition: ease .5s; /* ボタンの動作を0.5秒かけて動かす */
}
.menu-trigger {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px; /* ボタンの幅 */
  height: 40px; /* ボタンの高さ 幅とそろえたら正方形になる */
  background-color: #fff;
  z-index: 102; /* .drawer に設定したよりも大きい数字 */
  text-align: center;
  filter: drop-shadow(2px 2px 0px #999999);
}
.menu-trigger span {
  position: absolute;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 20px; /* 線の幅 */
  height: 3px; /* 線の太さ */
  background-color: #555; /* 線の色 */
  border-radius: 1px; /* 線の角を少し丸める */
}
.menu-trigger span:nth-of-type(1) {
  top: 35%; /* 1本目の線の位置 */
}
.menu-trigger span:nth-of-type(2) {
  top: 50%; /* 2本目の線の位置 */
}
.menu-trigger span:nth-of-type(3) {
  top: 65%; /* 3本目の線の位置 */
}

/* ドロワーメニューをOPENにしたとき */
/* メニュー部分 */
.drawer.action,
.drawer.action ul{
  -webkit-transform: translateX(0);
  transform: translateX(0); /* 元の位置に戻す */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.nav_box ul li{
  display: flex;
  justify-content:center;
}

.nav_box ul li a{
  padding:8px 0;
  display: flex;
  color: #222;
  text-decoration: none;
  width: 90%;
  margin: auto;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  font-family: 'M PLUS 1p', sans-serif;
  font-family: 'Poppins', sans-serif;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.nav_box ul li:last-of-type a{
  border-bottom: 0px solid #ddd;
}

.nav_box ul li p{
  margin-bottom:-5px;
  font-size:1.2em;
  letter-spacing: 0.1em;
  margin-top: -3px;
}
.nav_box ul li span{
  font-size:0.7em;  
}

.nav_box ul li .sp_nav_img{

}

.nav_box ul li .sp_nav_img img{
  width: 20px;
  height: auto;
}

/* ボタン部分 */
#g_nav_close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px; /* ボタンの幅 */
  height: 40px; /* ボタンの高さ 幅とそろえたら正方形になる */
  z-index: 102; /* .drawer に設定したよりも大きい数字 */
  text-align: center;
}

#g_nav_close span {
  position: absolute;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 20px; /* 線の幅 */
  height: 3px; /* 線の太さ */
  background-color: #555; /* 線の色 */
  border-radius: 1px; /* 線の角を少し丸める */
}
/* ハンバーガーボタンを「×」に変える */
/* 1本目 */
#g_nav_close span:nth-of-type(1) {
  top: 50%;
  -webkit-transform: translate(-50%,-50%) rotate(45deg);
  transform: translate(-50%,-50%) rotate(45deg); /* 45度傾ける */
}
/* 2本目 */
#g_nav_close span:nth-of-type(2) {
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  opacity: 0; /* 透明にする */
}
/* 3本目 */
#g_nav_close span:nth-of-type(3) { 
  top: 50%;
  -webkit-transform: translate(-50%,-50%) rotate(-45deg);
  transform: translate(-50%,-50%) rotate(-45deg);
}


/* ------------------------ footer_view -------------------------- */
#footer{
  width: 100%;
  color:#fff;
  background: #4b4949;
}

#footer .copyright{
  text-align: center;
  display: block;
  font-size: 12px;
}

/* ------------------------ footer_view -------------------------- */
.pagination{
  align-items: center;
}

.pagination li.page-item{
  margin:0px 8px;
}

.pagination li.page-item a.page-link{
  /* font-size:1rem; */
  background:transparent;
  border:0;
  border-radius: 55px;
  padding: 5px 12px;
}

.pagination li.page-item.active a.page-link{
  background:#fff;
}





/* page_footer - - - - - - - - - - - - - - - - - - - - - - - - - */

#page_footer{

}

#page_footer h2 {
  font-size: 60px;
  margin-bottom: 42px;
  padding: 18px 0px 22px 42px;
  font-weight: bold;
  font-family: 'M PLUS 1p', sans-serif;
  font-family: 'Poppins', sans-serif;
  transform: rotate(355deg);
  background-image: url(../img/index/flag.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
  display: flex;
  align-items: center;
}

#page_footer h2 span{
  font-size:18px;
}

#page_footer .member{
  background:url("../img/index/bg/sky_border.png") repeat-x top / 900px;
  /* background: url("../img/index/bg/ground_border01.png") repeat-x #93e2ee; */
  background-color: #93e2ee;
  padding-top:140px;
}

#page_footer .member .member_bg{
  display: flex;
  align-items: flex-end;
  background: url("../img/partials/footer_ground_01.png") repeat-x bottom / 800px;
  background-position: 0 100%;
  background-size: 620px auto auto;
}
#page_footer .member ul{
  width: 100%;
  max-width: 900px;
  margin:0 auto;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
}

#page_footer .member ul li{

}

#page_footer .member ul li a img{
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s;
  width: 100px;
}

#page_footer .member ul li a img:hover{
  animation: jump-animation 0.5s linear infinite;
}

@keyframes jump-animation {
    0%, 100% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(-5px);
    }
    40% {
        transform: translateY(0px);
    }
}

#page_footer .member .btn_area{
  background:url('../img/partials/footer_ground_02.png') repeat-x top / 800px;
  background-color:#a4eb91;
  height:48px;
}

#page_footer .member .btn_area a{
  margin:0 10px;
}


#page_footer .btn_area{
  width:100%; display: flex;justify-content: center;
}

#page_footer #first_view {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#page_footer .row img{
  border: 3px solid #fff;
  border-radius: 3px;
}

/* ------------------------ goods_view -------------------------- */

#page_footer #goods{
  padding:50px 0;
  background: #a0e249;
  background-image:url('../img/index/bg/ground_border03.png');
  background-repeat:repeat-x;
  background-position: 0 0%;
}

#page_footer #goods .menu{
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

#page_footer #goods .menu .category{
  display: block; 
  font-size:12x;
  color:#898989;
}

#page_footer #goods .menu .name{
  font-size: 17px;
  display: block;
  color:#363636;
  font-weight: bold;
}

/* ------------------------ special_view -------------------------- */

#page_footer #special{
  padding:50px 0;
  background:
    url('../img/index/bg/ground/bottom.png') no-repeat 0 -70% / 100%,
    url('../img/index/bg/ground/01.png') repeat-x 0 0 / 100%,
    url('../img/index/bg/ground/pattern.png') repeat 0 0 / 100%,
    #3e1806;
}

#page_footer #special .menu{
  width: 100%;
  max-width:1080px;
  margin:0 auto;
}




@media screen and (max-width: 959px) {
  /* 画面幅が 959px 以下の場合に適用されるスタイル */
  .member h2{
    font-size:40px!important;
  }
  #topbar .wrapper ul li{
    margin:7px 6px 11px; 
  }
  #page_footer .member ul li a img{
    width: 80px;
  }
  #page_footer #special{
    padding: 20px 0;
    background:
      url(../img/index/bg/ground/bottom.png) no-repeat 0 -300% / 250%,
      url(../img/index/bg/ground/01.png) repeat-x 0 0 / 250%,
      url(../img/index/bg/ground/pattern.png) repeat 0 0 / 250%, #3E1806;
  }
  #page_footer .member .member_bg{
    background: url(../img/partials/footer_ground_01.png) repeat-x bottom / 600px;
  }
  #page_footer .member{
    background: url(../img/index/bg/sky_border.png) repeat-x top / 450px,#93e2ee;
    padding-top: 60px;
  }
  #page_footer .member .btn_area {
    background: url(../img/partials/footer_ground_02.png) repeat-x 0 calc(100%)/ 700px,#a4eb91;
  }
  #page_footer .member .member_bg {
    background: url(../img/partials/footer_ground_01.png) repeat-x 0 calc(101%)/ 600px;
  }
}
@media screen and (max-width: 480px) {
  /* 480px以下に適用されるCSS（スマホ用） */
  #page_footer .member ul li a img{
    width: 50px;
  }
}