@charset "utf-8";
/*===========================================================*/
/*	MENUが×に padding:0px 15px 0;font-size: 16px;*/
/*===========================================================*/
.openbtn{font-family: 'Oswald', sans-serif;font-weight: bold;
letter-spacing: 0.1em;position:fixed;z-index: 9999;
top:0;right:0;cursor: pointer;
border-left:2px solid #333;
width: 70px;height:60px;}
/*ボタン内側*/
.openbtn span{
display: inline-block;
transition: all .4s;/*アニメーションの設定*/
position: absolute;}
.openbtn span:nth-of-type(1),.openbtn span:nth-of-type(3) {
height: 2px;background: #333;width:30%;opacity: 0;top:22px;left:20px;}
/*「MENU」の位置、サイズ、色*/
.openbtn span:nth-of-type(2) {
top:18px;left:15px;text-transform: uppercase;color: #333;font-size: 16px;;}
.openbtn span:nth-of-type(3) {top:35px;}
/*線が回転して「 × 」になる*/
.openbtn.active span:nth-of-type(1),
.openbtn.active span:nth-of-type(3) {opacity:1;}
/*「 × 」 の配置*/
.openbtn.active span:nth-of-type(1) {
top: 28px;left: 25px;transform: translateY(6px) rotate(-45deg);}
.openbtn.active span:nth-of-type(2) {opacity:0;}
.openbtn.active span:nth-of-type(3){
top: 40px;left: 25px;transform: translateY(-6px) rotate(45deg);}

/*===========================================================*/
/* [MENU] クリックしたら内容が下から上に出現 */
/*===========================================================*/
#g-nav{
position:fixed;z-index: 999;text-align: center;
bottom:-150%;/*元　-120*/
width:100%;
height: 100vh;/*ナビの高さ*/
background:#eb6100;transition: all 0.6s;}
/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{bottom: 0;}

/*ナビゲーションの縦スクロール*/
#g-nav #g-nav-list{
/*ナビの数が増えた場合縦スクロール*/
position: fixed;z-index: 999;
width: 100%;
height: 100vh;/*表示する高さ*/
overflow: auto;-webkit-overflow-scrolling: touch;}

/*ナビゲーション*/
#g-nav ul {
position: absolute;z-index: 999;
top:35%;/*本体画面の表示の位置を考慮する*/
left:50%;width: 200px;
transform: translate(-50%,-50%);}

/*内部のリストのレイアウト設定*/
/*文字　「TOP」「NEWS/ARCHIVE」「ABOUT US」「CANTACT/JOIN」*/
.moji a{font-family: 'Oswald', sans-serif;
color:white;
display: block;text-transform: uppercase;
text-decoration: none;border-bottom: 1px solid white;
font-size: 17px;margin:20px auto -2px;
letter-spacing: 0.1em;}
.moji a:hover{color:yellow;}
#g-nav li{list-style: none;text-align: center;}

/*文字　「TOPに戻る」「新着情報／過去の記事」「私たちについて」「ご意見等／加入のご案内」
ul p{color:#333;font-weight: bold;padding-top: 5px;font-size: 14px;}*/

/*文字　「その他の情報」
#g-nav-list h2{color:#333;
  font-size: 17px;line-height: 20px;margin-top: 20px;}*/

/*==============  ボタン 「　カテゴリー　」  ============================*/
ul.accordion-area-gnavi{
  list-style: none;
  width: 100%;height: 36px;}
/*アコーディオンの枠の色と太さ*/
.accordion-area-gnavi section
{width:100%;
  background: darkgreen;border: 1px solid white;
  margin:40px auto 0;padding: 2px}
/*アコーディオンタイトル*/
.title-gnavi{
  position: relative;/*+マークの位置基準とするためrelative指定*/
  cursor: pointer;color:white;
  font-family: 'Oswald', sans-serif;
  text-align: center;outline: none;
  font-size: 15px;line-height: 32px;
  padding: 1% 3% 1% 3%;
  transition: all .5s ease;}

/*アイコンの＋と×*/
.title-gnavi::before,.title-gnavi::after{
  position: absolute;content:'';width: 15px;height: 2px;background-color: white;}
.title-gnavi::before{top:48%;left: 15px;transform: rotate(0deg);}
.title-gnavi::after{top:48%;left: 15px;transform: rotate(90deg);}
/*　closeというクラスがついたら形状変化　*/
.title-gnavi.close::before{transform: rotate(45deg);}
.title-gnavi.close::after{transform: rotate(-45deg);}
.box-gnavi{
  display: none;/*はじめは非表示*/
  background: white;text-align: left;
  margin:0 3% 3% 3%;
  padding: 3% 5% 3% 5%;}
/*hover*/
.accordion-area-gnavi li:hover{background: #66FF66;}
.accordion-area-gnavi ul:hover{color:white;}

/*==============  ボタン 「　その他の情報　」  ============================*/
.other_enter{color:white;background: #FF367F;}
.btn_download{
  position: relative;display: inline-block;
  font-family: 'Oswald', sans-serif;
  text-align: center;outline: none;
  width:100%;height: 36px;
  font-size: 15px;line-height: 32px;
  margin: 15px 0 0 0;
}
.btn_download span {
  display: block;position: absolute;
  width: 100%;height: 100%;
  border: 1px solid white;
  transform-style: preserve-3d;transition: 0.5s;}

.rotatefront:hover span:nth-child(1) {
  transform: rotateX(-90deg);}
.rotatefront span:nth-child(2) {
  background: darkgreen;color: yellow;
  transform: rotateX(90deg);
  transform-origin: 0 50%  -25px;}
.rotatefront:hover span:nth-child(2) {
  transform: rotateX(0deg);}


@media screen and (max-width:767px)
{
.moji{font-size: 17px;margin:20px auto -2px;}
#g-nav li a{padding:0px;letter-spacing: 0.1em;}
#g-nav-list h2{font-size: 15px;margin-top: 20px;line-height: 19px;}
}

@media screen and (max-width:540px)
{
.moji{font-size: 17px;margin:20px auto -2px;}
#g-nav li a{padding:0px;letter-spacing: 0.1em;}
#g-nav-list h2{font-size: 15px;margin-top: 20px;line-height: 19px;}
}

@media screen and (max-width:420px)
{
.moji{font-size: 17px;margin:5px auto -2px;}
/*ナビゲーション*/
#g-nav ul{top:45%;left:50%;}
#g-nav li a{padding:0px;letter-spacing: 0.1em;}
#g-nav-list h2{font-size: 15px;margin-top:15px;line-height: 19px;}
/*アコーディオン全体*/
.accordion-area{
list-style: none;
width: 100%;max-width: 300px;height: 50px;
margin:170px auto 0;}  /*その他の情報とのアキ*/
}

@media screen and (max-width:315px)/*  295pxあたりで調整　 */
{
.moji{font-size: 15px;margin:5px auto -2px;}
/*ナビゲーション*/
#g-nav ul{top:45%;left:50%;}
#g-nav li a{padding:0px;letter-spacing: 0.1em;}
#g-nav-list h2{font-size: 15px;margin-top:5px;line-height: 19px;}
}

/*-------------------------------------------------------------レスポンシブ*/
@media screen and (max-width:767px) {
/*「MENU」の位置、サイズ、色*/
.openbtn{width: 60px;height:60px;}
/*ボタン内側*/
.openbtn span:nth-of-type(3) {height: 2px;width:30%;top:22px;left:20px;}
/*「MENU」の位置、サイズ、色*/
.openbtn span:nth-of-type(2) {top:18px;left:8px;font-size: 16px;}
.openbtn span:nth-of-type(3) {top:35px;}
/* 「 × 」 の配置*/
.openbtn.active span:nth-of-type(1) {top: 28px;left: 20px;}
.openbtn.active span:nth-of-type(3){top: 40px;left: 20px;}
}