@charset "utf-8";

/*===============================================================================
 各ページ　全体のエリア設定
  =============================================================================*/
body{word-break: break-all;}
/*=================== 基本設定 ===================*/
html, body {
    margin: 0;padding: 0;overflow:hidden;
    -webkit-tap-highlight-color: rgba(0,0,0,0);}
a{text-decoration: none;outline: none;}
/*各ページの大きさ、配置、ほかの設定*/
.ms-table{display: table;width: 100%;}
.ms-easing {
    -webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;}
/*左エリアを横幅100%にして画像＋テキストを出す設定*/
.ms-left{width:100%!important;margin-top: 0px;}
/*======================== 　　各ページのレイアウト　　=======================*/
.ms-section{position: relative;}/*ここに　relative */
.nav_back {width:50px;height:100vh;background: rgba(100,0,0,100%);} /*右の　ナビ部分のバック 色はhtmlで上書き */
@media screen and (max-width:450px)
{
.nav_back {width:0px;height:100vh;background: rgba(100,0,0,100%);} /*右の　ナビ部分のバック */
}

/*===============================================================================
 　　　　header
===============================================================================*/
#header{/*height: 60px fixに設定*/
	position: fixed;display:flex;/*元　position: relative;*/
	z-index:9999;
	justify-content: space-between;align-items: center;
	height: 60px;width: 100%;
	background:#222;/*元　#222   色はhtmlで上書きするかも*/
	padding:5px 20px;}

/*headerの画像*/
#header img{height: 50px;}
/*headerの画像 点滅させる　*/
@keyframes fadeInAnime
{
  0%{opacity: 0;}
  100%{opacity: 1;}
}
#header img{
animation-name: fadeInAnime;
animation-duration: 2s;/*点滅の間隔*/
animation-fill-mode: forwards;
animation-iteration-count: infinite;/*ループする　（infiniteを数字にするとその回数点滅）*/
opacity: 0;}

/*headerのメニューの設定*/
#menu li {display:inline-block;margin: 4px 0px 0 5px;}/*元　10px 0*/
#menu li a{text-decoration:none;display:block;font-family: 'Oswald', sans-serif;
	         color: #666;/*色はhtmlで上書きするかも　元　#666*/
	         padding: 5px 10px;}
#menu li.active a{color: tan;}/*色はhtmlで上書きするかも*/

/*========= 450px以下で出現させる　ナビゲーションのためのCSS =====*/
#g-nav{
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position:fixed;z-index: 9999;
  /*ナビのスタート位置と形状*/
	top:60px;/*ナビの出現の位置　headerのサイズ分を下げた　元　top:0;*/
	right: -120%;/*ナビの出現の位置　元　right: -120%;*/
	width:100%;height: 100vh;/*ナビの高さ*/
	background:darkgreen;opacity: 90%;/*元　#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;
	 top:40%;left:50%;transform: translate(-50%,-50%);}
/*リストのレイアウト設定*/
#g-nav li{list-style: none;text-align: center;}
#g-nav li a{
	font-size: 15px;font-family: 'Oswald', sans-serif;
	padding:5px;letter-spacing: 0.1em;
	color: white;/*元　#333*/
	text-decoration: none;display: block;text-transform: uppercase;}

/*=================　ボタンのためのCSS　================*/
.openbtn{
	position:fixed;cursor: pointer;
  z-index: 9999;/*ボタンを最前面に*/
	top:7px;right: 12px;/*元　top:10px;right: 10px*/
  width: 50px;height:50px;}
/*×に変化*/
.openbtn span{
  display: inline-block;position: absolute;
  transition: all .4s;
  left: 14px;height: 3px;
  border-radius: 2px;
	background-color: #666;
  width: 45%;}
.openbtn span:nth-of-type(1) {top:15px;}
.openbtn span:nth-of-type(2) {top:23px;}
.openbtn span:nth-of-type(3) {top:31px;}
.openbtn.active span:nth-of-type(1) {
  top: 18px;left: 18px;width: 40%;      /* × のサイズ width: 40% */
  transform: translateY(6px) rotate(-45deg);}
.openbtn.active span:nth-of-type(2) {opacity: 0;}
.openbtn.active span:nth-of-type(3){
  top: 30px;left: 18px;width: 40%;      /* × のサイズ width: 40% */
  transform: translateY(-6px) rotate(45deg);}

/*＝＝＝　PCと　450px以上では非表示にする　＝＝＝*/
/**/       .openbtn{display: none;}          /**/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*==========================================================================
  CLICK→　と　Nya~nスクロールダウン
==========================================================================*/
/*=============================
    CLICK→
=============================*/
.click{z-index: 1;
  position: fixed;font-family: 'Oswald', sans-serif;
  writing-mode:vertical-rl;/*　縦書き　右から左へ */
  font-size: 10px;/*　CLICK→ のサイズ */
  color:tan;/*　CLICK→ の色 htmlで上書き */
  letter-spacing: 2px;/*　カーニング　 */
  top:100px;right: 8px;/*　topからの位置　rightからの位置　*/
  }
/*=============================
  Nya~n　スクロールアイコン
==============================*/
/*Nya~nと縦線のグループの配置*/
.scrolldown{z-index: 1;
  position: absolute;
  height:60px;/*Nya~n の サイズに合わせた高さ */
  bottom:20px;right: 10px;/*全体の配置する位置指定 */
  }
/*Nya~n の 棒線に対する距離   サイズ　色 */
.scrolldown h1{
  position: absolute;
  right:5px;top: 0px;/*　棒線に対する距離の指定　*/
  font-size: 15px;/*Nya~nのサイズ*/
  color: tan;/*Nya~nの色 htmlで上書き */
  writing-mode:vertical-rl;/*縦書き　右から左へ */
  }
.scrolldown::after{
  content: "";position: absolute;
  top: 0;
  width: 2px;/*縦線の太さ*/
  height: 35px;/*縦線の長さ*/
  background: #eee;/*縦線の色*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;
  }
@keyframes pathmove{
  0%{height:0;top:0;opacity: 0;}
  30%{height:30px;opacity: 1;}
  100%{height:0;top:50px;opacity: 0;}
  }
/*=================================================================
マルチスクロールナビ 画面右の　●top ●MUSIC ●DTM ●CLOCK ●END の設定
=================================================================*/
/*===== 位置、文字の色、文字のサイズ======*/
.multiscroll-tooltip {
    position: absolute;
    color: tan;/*右の nav 文字の色　htmlで上書き*/
    font-size: 16px;/*右の nav 文字のサイズ*/
    font-family: arial, helvetica, sans-serif;
    top: -2px;
    white-space: nowrap;
    max-width: 220px;}
.multiscroll-tooltip.right {right: 20px;/*文字と○の位置関係*/}
/*.multiscroll-tooltip.left {left: 20px;}/*不要？*/
.ms-responsive .ms-hide{display: none;}
.ms-scrollable {overflow: hidden;position: relative;}
.ms-scroller{overflow: hidden;}
.iScrollIndicator{border: 0 !important;}
/*============　○　● の設定 ===================*/
#multiscroll-nav {
    position: fixed;z-index: 100;
    margin-top: -32px;top: 250px;/*右の nav   nav の位置*/
    opacity: 1;}
#multiscroll-nav.right {right: 10px;}
#multiscroll-nav.left {left: 17px;}
#multiscroll-nav ul{margin: 0;padding: 0;}
#multiscroll-nav li{
    display: block;position:relative;
    width: 14px;height: 13px;margin: 7px 7px 7px 7px;}
#multiscroll-nav li a{
    display: block;position: relative;z-index: 1;
    width: 100%;height: 100%;
    cursor: pointer;text-decoration: none;}

/* ●　の指定　　現在地では○のバックに色を付ける */
#multiscroll-nav li .active span{background: tan;}/*色　htmlで上書き*/
/* ○ の線の色　他　 */
#multiscroll-nav span{
    top: 2px;left: 2px;
    width: 8px;height: 8px;
    border: 1px solid tan;/*右の nav    線の色　元　#000*/
    background: rgba(0, 0, 0, 0);/*元　rgba(0, 0, 0, 0)*/
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;z-index: 1;}

/*==============================================================================
 レスポンシブ
==============================================================================*/

@media screen and (max-width:450px)/*________________________ max-width:450px*/
{
#header{justify-content: center;}
/*headerの画像*/
#header img{height: 50px;}
/*＝＝＝　450px以下で　表示にする　＝＝＝＝＝＝*/
/**/      .openbtn{display: block;}        /**/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*　ボタンのためのCSS　*/
.openbtn{top:7px;right: 12px;}
/*header　のMENU を非表示にする*/
#menu{display: none;}

.click{font-size: 7px;top:100px;right: 16px;}
/*Nya~nと縦線のグループの配置*/
.scrolldown{bottom:10px;right: 10px;}
.scrolldown h1{right:1px;top: 0px;font-size: 15px;}
/*============　○　● の設定 ===================*/
#multiscroll-nav {margin-top: -32px;top: 240px;/*右の nav ○　● の位置*/}
#multiscroll-nav.right {right: 12px;}
#multiscroll-nav.left {left: 17px;}
#multiscroll-nav li{margin: 7px 7px 15px 7px;}
}

@media screen and (max-width:321px)/*________________________ max-width:321px*/
{
.openbtn{top:7px;right: 6px;}
/*ナビゲーション*/
#g-nav ul {top:30%;left:50%;}
.click{font-size: 7px;top:80px;right: 11px;}
.scrolldown{bottom:10px;right: 12px;}
.scrolldown h1{right:1px;top: 0px;font-size: 15px;}
/*============　○　● の設定 ===================*/
#multiscroll-nav {margin-top: -32px;top: 220px;/*右の nav  ○　●の位置*/}
#multiscroll-nav.right {right: 7px;}
#multiscroll-nav.left {left: 17px;}
 }