/* がくげいアプリ 統一 CSS  gg_yoko.css*/
/* 【注意】@charset は必ず冒頭で使う */
@charset "utf-8";
/* 【注意】必ず冒頭でimport。 notosansjpはjapaneseに比べ字詰め可能 */

/*css でwebフォントのurlの指定は ../や../font/が効かなかったので、同じフォルダにいれてパス指定を省略した*/
@font-face {
  font-family: "Noto_Sans"; /*ゴシック*/
  src:
    url("NotoSansJP_Regular_webY.woff") format('woff');
}
@font-face {
  font-family: "Noto_Serif";  /*明朝*/
  src:
    url("NotoSerifJP_Medium_webY.woff") format('woff');
}

html {
  -ms-touch-action:manipulation;/*1 IE10以上やEdgeでダブルタップによる拡大を無効化する*/
  touch-action:manipulation;/*2 IE10以上やEdgeでダブルタップによる拡大を無効化する*/
  -webkit-touch-callout: none;/*iOS 上で長押しされたとき、Safari はそのリンクに関する情報を表示する。それを無効にする*/
}

/*★★iPadに対応させるための設定★★*/
/*bodyではフォーカスが外れず画面全体が青くなった。要素を限定すること*/
body, div, img, #page {
	touch-action: manipulation; /*すべてのパンやズームのジェスチャーを扱うことを無効に*/
}
/*★★iPadに対応させるための設定　ここまで★★*/

body {
	background-color: #ffffff; /*#ffffdd*/
	background-repeat: no-repeat;
	background-attachment: fixed;
  font-family: 'Noto_Serif';
  white-space: pre-wrap;
  overflow-x: hidden;
  overflow-y: hidden;
}



/*object-fitは★IE非対応。absoluteでは関係ないみたい*/
/*#page {
  object-fit: none;
}*/

/*ルビ*/
/* data-rubyは<fireFoxでは効かない 2018_0614 */
[data-ruby] {
	position: relative;
}
[data-ruby]::before {
	content: attr(data-ruby);
	position: absolute;
	top: -0.6em;
	text-align: center;
	left: 0px;
	right: 0px;
	margin: -2px;
	font-size: 0.45em;
  white-space: nowrap;
}
rt { /*音声読み上げで使用されることを考えて用意 未確認*/
	display: none;
}

/*空白半角、全角の幅を表示する*/
span.w {
	margin-right:1em;
}

svg {
  cursor: default;
}

.go {
  font-family: "Noto_Sans";
}

#呼び出しカバー {
  position: absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%;
  background-color: #CCF8F8;
  opacity: 1;
}

#呼び出し時計 { /*アニメーションgif*/
  position: absolute;
  top:45%;
  left:45%;
  width:8vmin;
  height:8vmin;
}
#音補助待ち文 {
  position: absolute;
  background-color: white;
  /*padding:6px;*/
  border-radius:8px;
  opacity:0.9;
}

#音補助背景 { /*窓枠部品*/
  position: absolute;
  background-color: #278FFF/*dodgerblue*/;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.3;
}

#音補助プレイボタン { /*窓枠部品*/
  position:absolute;
  left:47%;
  top:47%;
  width:11vmin;
  height:11vmin;
}

#章menu戻btn { /*窓枠部品*/
  position:absolute;
  left:30%;
  bottom: 10%;
  width:11vmin;
  height:11vmin;
}

#音補助待ち時計 { /*窓枠部品*/
  position:absolute;
  left:30%;
  bottom: 30%;
  width:8vmin;
  height:8vmin;
}

/*複雑なCSSのanimationで、部品中に子部品を持つ時、子部品の幅、高さが親枠と同じになるように*/
.Jr {
  width: 100%; height: 100%;
}

.白 {
  color:white;
}