/*旧５－２－６*/
@charset "utf-8";

/*メニューボタンデザイン*/
.menu-item {
  list-style: none;
  display: inline-block;
  padding: 10px;
}

.menu-item2{
  padding: 10px;
  text-align:  center;
}

.menu-item:last-child{
  margin-right: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

.btn {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 0.7;
  position: relative;
  display: inline-block;
  padding: 1rem 2rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

/*影付きボタン　ここから*/
a.btn-border {
  border: 2px solid #000;
  border-radius: 0;
  background: #fff;
  -webkit-box-shadow: 4px 4px 0 #000;
  box-shadow: 4px 4px 0 #000;
}

a.btn-border:hover {
  -webkit-box-shadow: -4px -4px 0 #000;
  box-shadow: -4px -4px 0 #000;
}
/*影付きボタン　ここまで*/

a.btn--red.btn--cubic {
  color:#fff;
  background-color:#df000c;
  border-bottom: 5px solid #9f000c;
}

a.btn--red.btn--cubic:hover {
  margin-top: 3px;
  border-bottom: 2px solid #9f000c;
}

a.btn--radius {
  border-radius: 100vh;
}

.fa-position-right {
  position: absolute;
  top: calc(50% - .5em);
  right: 1rem;
}
/*メニューボタンデザイン　ここまで*/


/* ハンバーガーボタン */
@media screen and (max-width: 768px) {
.nav {
    display: none; /*768px以下で使用 */
  }
.design03 {
    text-align: center;
  }
.design04 {
    display: inline-block;
  }
.design05 {
    margin: auto;
  }
}

@media screen and (min-width: 768px) {
  .openbtn4 {
    display: none; /*768px以上で使用 */
  }
  .design02 {
    display: none; /*768px以上で使用 */
  }
}


/*==================================================
　5-2-6 MENUがCLOSEに
===================================*/
/*ボタン外側　※レイアウトによってpositionや形状は適宜変更*/
.openbtn4{
  position: fixed; /*ボタン内側の基点となるためrelativeを指定*/
  z-index: 9999; /*ボタンを最前面に*/
  top: 10px;
  right: 10px;
  background:#fff;
  cursor: pointer;
  width: 50px;
  height:50px;
  border-width: 2px;     /*============ここから====================*/
  border-style: solid;   /*       メニューボタン外枠仕様            */
  border-color: #000;
  border-radius: 5px;    /*============ここまで====================*/

}

/*ボタン内側*/
.openbtn4 span{
  display: inline-block;
  transition: all .4s; /*アニメーションの設定*/
  position: absolute;
  left: 14px;
  height: 2px;
  border-radius: 5px;
  background: #000;
  width: 45%;
}

.openbtn4 span:nth-of-type(1) {
  top:13px;
}

.openbtn4 span:nth-of-type(2) {
  top:19px;
}

.openbtn4 span:nth-of-type(3) {
  top:25px;
}

.openbtn4 span:nth-of-type(3)::after {
  content:"Menu"; /*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top:5px;
  left:-2px;
  color: #000;
  font-size: 0.6rem;
  text-transform: uppercase;
}

/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/

.openbtn4.active span:nth-of-type(1) {
  top: 14px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 30%;
}

.openbtn4.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn4.active span:nth-of-type(3){
  top: 26px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 30%;
}

.openbtn4.active span:nth-of-type(3)::after {
  content:"Close";/*3つ目の要素のafterにClose表示を指定*/
  transform: translateY(0) rotate(-45deg);
  top:5px;
  left:4px;
}

/*========= レイアウトのためのCSS ===============*/

.btn-block{
  width:200px;
  padding: 30px;
}


/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
  position:fixed; /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  z-index: 999;
  top:0; /*ナビのスタート位置と形状*/
  right: -120%;
  width:30%;
  height: 100vh; /*ナビの高さ*/
  background:#999;
  transition: all 0.6s; /*動き*/
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
  right: 0;
}

/*ナビゲーションの縦スクロール(数が増えた場合縦スクロール)*/
#g-nav.panelactive #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;
	white-space: nowrap;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#g-nav li{
  list-style: none;
  text-align: center;
}

#g-nav li a{
  color: #333;
  text-decoration: none;
  padding:10px;
  display: block;
	font-size: 120%;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;
}