/* ページ全体にゴシックフォントを適用（iOS対策） */
@supports (-webkit-touch-callout: none) {
  body, h1, h2, h3, h4, h5, h6, p, span, div, li, a, input, button, textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "游ゴシック", "Meiryo", sans-serif !important;
  }
}


    .1kai { color: white; }
    .2kai { color: white; }
    .3kai { color: white; }
    .hidden { display: none; }
    .active-button { background-color: #bdbdbd; }
    .button { background-color: white; }

html {overflow-y: scroll;}/* スクロールバーを常に表示 */

body {
  height: 100%;
  padding: 0;
  font-family:sans-serif;
  font-size: 19px;
  line-height: 150%;
  background-color:;/* 薄いグレーは　#DCDCDC;*/
  margin: 0px;/* 10px;*/
}
@media screen and (max-width:480px) {
 body {
      font-size: 16px;
}}




a {
  color: blue;
  text-decoration: none;
}
a:hover { color: red;}
a:visited { color: blue;}

h1 {
      font-size: 140%;
  padding: 20px !important;
}
@media only screen and (max-width: 500px) {
  h1 {
font-size: 5vw !important;
    padding: 4vw !important;
  }}

h2 {
      font-size: 100%;
}
h4 {
      font-size: 120%;
      padding-top:0.5em;
      padding-bottom:0em;
      line-height: 100%;
      margin: 0;
}

img {
  max-width: 600px;
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;/* センター配置 */
  margin: 0 auto;/* センター配置 */
}
/* 問題内の図版 */
.test1
{max-width:600px; margin-top:50px;}
.test2
{max-width:450px; margin-top:50px;}
.test3
{max-width:300px; margin-top:50px;}



/* 以下矢印対応 */
img[src="parts/ya.png"] {
    width: 50px;
}
.yajirusi {
  margin: 0px 0px 8px 0px;
  font-size: 13px;
  padding: 0;
  text-align: left;
}
.hint {
  display: block;
}
.container img {
  display: block;
  margin: 0 auto;
}


#header {
  background-color: #006DF0;
  color: white;
  text-align: center;
  padding: 0.1px;
  position: relative; /* 相対位置指定 */
}
#header h1 {
  max-width: 1000px;
  margin: 0 auto; /* 中央揃え */
  padding: 20px 0px;
  position: relative; /* 相対位置指定 */
}
#header img {
  width: 60px;
  height: 30px;
  position: absolute; /* 絶対位置指定 */
  top: 50%; /* 上端を親要素の中央に配置 */
  right: 0px; /* 右端に配置 */
  transform: translateY(-50%); /* 垂直方向に中央揃え */
}
@media (min-width: 600px) {
  #header img {
    width: 100px;
    height: 40px;
    right: 10px; /* 右端に配置 */
  }
}
@media (min-width: 1000px) {
  #header img {
    width: 100px;
    height: 40px;
    right: 30px; /* 右端に配置 */
  }
}

    #footer {
      background-color: ;
      color: ;
      height: 100px;
      font-size: 16px;
    }
@media only screen and (max-width: 500px) {
  #footer {
      font-size: 4vw;
  }}
    @media screen and (max-width: 767px) {
      #header, #footer {
        width: 100%;
      }}
    #main {
      max-width: 800px;
      min-height: 100%;
      margin: 0 auto;
      padding: 10px 5px;
    }
@media only screen and (max-width: 600px) {
  #main {
      padding: 5px 5px;
  }}



#panel {
  position: fixed; 
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  background-color: #006DF0;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999; 
}
@media screen and (max-width:600px) {
#panel {
  bottom: 0px !important;
  left: 0; /* 中央に配置する必要がないのでleftを0に変更 */
  transform: none; /* transformを解除 */
  width: 100%;
  border-radius: 0px;
}}

#buttonA, #buttonB {
  background-color: white;
  width: 75px;
  height: 50px;
  color: blue;
  border: 0px;
  border-radius: 5px;
  margin: 10px;
  font-weight:bold;
  font-size:65%;
  padding: 0px;
}
#buttonA {
  margin-right: 5px;
}
#buttonA.active-button, #buttonB.active-button { background-color: #bdbdbd; }

#audioButton, #speedButton {
  background: none;
  border: none;
  cursor: pointer;
}
/* ズームボタン */
#zoom-button {
  background-color: gray;
  width: 60px;
  height: 50px;
  color: white;
  border: 0px;
  border-radius: 5px;
  font-weight:;  
  font-size:60%;
  padding: 0px;
  margin-left: 150px;
}
/* ボタンのサイズ */
#panel button img {
  width: 35px;
  height: 35px;
}







@media (max-width: 599px) {
  #buttonA, #buttonB {
    width: 18vw;
    height: 12vw !imporatant;
    font-size: 2.5vw;
  }
  #zoom-button {
    width: 15vw;
    height: 12vw !imporatant;
	font-size: 2.5vw;
	      margin-left: 40vw;
  }

  #panel button img {
    width: 8vw;
    height: 8vw;
  }
#buttonA {
  margin-left: 5vw;
}
#buttonA {
  margin-right: 2vw;
}
}



@media (max-width: 360px) {
  #zoom-button {
	      margin-left: 45vw;
  }
}











/* ポップアップの文字のサイズ */
#speedPopup label {
  width: 60px;
  height: 25px;
  font-weight: bold;
      font-size: 80%;
}
.popup {
  display: none;
}


/* 再生速度のポップアップ */
#speedPopup {
  display: none;
  background-color: #ccc;
  width: 45px;
  height: 345px;
  padding: 25px 30px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
line-height: 50% !important;
/* 水平，垂直位置 */
  position: fixed; /* 要素を固定位置に設定します。 */
  left: 50%; /* 水平方向のセンターに配置します。 */
  top: 50%; /* 垂直方向のセンターに配置します。 */
  transform: translate(-50%, -50%); /* センターからの位置を調整します。 */
  transform: translate(calc(-50% - 100px), calc(-50% + 50vh - 320px)); /* 詳細な位置調整 */
}
@media screen and (max-width:480px) {
#speedPopup {
  transform: translate(calc(-50% - 100px), calc(-50% + 50vh - 330px)); /* 詳細な位置調整 */
}}


#speedSelect {
  margin-top: 5px;
}
.speed-option {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.speed-option label {
  cursor: pointer;
}
.speed-option input {
  display: none; /* チェックボックスは非表示に */
}
.speed-option input:checked + label {
  color: red; /* 選択されているものは再生速度を赤く */
}

/*■スラッシュ部分に反映（spanで指定）*/
.slashb, .slash2{
    color: blue;
    font-weight:bold;
  letter-spacing: -3px; /*フォント横幅詰め*/
}
.kagi, .slash, .kagi2, .slash2, span.bracketsb{
    color: red;
    font-weight:bold;
  letter-spacing: -3px; /*フォント横幅詰め*/
}
@media screen and (max-width:480px) {
.kagi, .slash, .slashb, .kagi2, .slash2, span.bracketsb{
  letter-spacing: -1px; /*フォント横幅詰め*/
}}
.slash, .slashb, .slash2 {
       font-size: 20px !important;
}
@-moz-document url-prefix() {/*ファイヤーフォック用*/
    .slash, .slashb, .slash2 {
        margin-left: 2px;
        margin-right: 2px;
    }
}


/*■コメント部分に反映（divで指定）*/
.kome{
margin-top: 10px;	
    margin-bottom: 10px;	
line-height: 150%;	
  font-size: 90%;
  	color:red;
  font-weight:normal !important;
  letter-spacing: -0px; /*フォント横幅詰めなし*/
}
.kome2{
margin-top: 10px;	
    margin-bottom: 10px;	
line-height: 150%;	
  font-size: 90%;
  	color:red;
  font-weight:normal !important;
  letter-spacing: -0px; /*フォント横幅詰めなし*/
}
/*コメント部分は太字にしない*/
.kome2 .kagi2, .kome .kagi {
    font-weight: normal;
    letter-spacing: normal;
}


/* ■iphone,ipad,androidで鬱陶しい規定の辞書などを表示させないため */
/* https://blog.universe-web.jp/6218/ */
/* https://developer.mozilla.org/ja/docs/Web/CSS/user-select */
/* iPhoneサファリ対策  */
_::-webkit-full-page-media, _:future, :root 
body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
/* iPhoneサファリ対策  */
_::-webkit-full-page-media, _:future, :root 
img {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
}
/* android端末対策 */
@media screen and (min-width: 1px) and (max-width: 979px) {
body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
}


/* ■新機能　オンマウス辞書 */
.mouse { /* 補足説明するテキストのスタイル */
  position: relative;
  cursor: pointer;
  padding: 0px;
  font-size: px;
  color: #006400;
  left: 0%;
  right: 0%;
}
.description { /* ツールチップのスタイル */
  line-height : 120%;
  width: 120px; /* 横幅 */
  position: absolute;
  left: 50%;/* 55pxで単語の左に揃える，right:-35px;で単語の右に揃える */
  bottom: 100%; /* 動きなしは100%，動き最大は0% */
  transform: translateX(-50%);
  margin-bottom: 8px; /* テキストとの距離 */
  padding: 10px 2px;
  border-radius: 3px; /* 角の丸み */
  background-color: #666;
  font-size: 80%;
  color: #fff;
  text-align: center;
  visibility: hidden; /* ツールチップを非表示に */
  opacity: 0; /* 不透明度を0％に */
  z-index: 1;
  transition: 0.5s all; /* マウスオーバー時のアニメーション速度 */
}
@media screen and (max-width:480px) {
.description {
width: 80px;
right:-48px;/* left:35px;でセンター，left:40px;で単語の左に揃える，right:-35px;で単語の右に揃える */
}}
.mouse:hover .description { /* マウスオーバー時のスタイル */
  bottom: 100%; /* Y軸の位置 */
  visibility: visible; /* ツールチップを表示 */
  opacity: 0.8; /* 不透明度を80％に */
}

/* 辞書と文法解説のポップアップを上げる（スマートフォン＋タブレット） */
@media screen and (max-width: 767px) {
  .description {
    margin-bottom: 30px !important;
  }
  .description2 {
    margin-bottom: 40px !important;
  }
}


/* ■新機能　文法ポップアップ */
.mouse2 { /* 補足説明するテキストのスタイル */
  position: relative;
  cursor: pointer;
  font-size: px;
  color: #006400;
  left: 0%;
  right: 0%;
  background: linear-gradient(transparent 0%, #c2d4f2 0%);
  padding: 0px 5px 0px 5px;
  bottom: 0px;
  border-radius: 5px;
  white-space: nowrap;/* 改行禁止 */
  overflow: hidden !importnt;
}
.description2 { /* ツールチップのスタイル */
  line-height : 120%;
  width: 190px; /* 元は190 */
  position: absolute;
  left: 0px;
  bottom: 100%; /* 動きなしは100%，動き最大は0% */
  margin-bottom: 8px; /* テキストとの距離 */
  padding: 8px 2px 6px 6px;
  border-radius: 3px; /* 角の丸み */
  background-color: #5593BC;
  font-size: 14px;
  color: #fff;
  text-align: ;
  visibility: hidden; /* ツールチップを非表示に */
  opacity: 0; /* 不透明度を0％に */
  z-index: 1;
  transition: 0.5s all; /* マウスオーバー時のアニメーション速度 */
  overflow: hidden; /* 溢れた部分を非表示にする */
  word-wrap: break-word; /* 長い単語を強制的に改行（アイフォン用） */
  word-break: break-all; /* 単語の途中で改行を許可（アイフォン用） */
  white-space: normal; /* 必要に応じて改行（アイフォン用） */
}


.description2 a {
  color: #FFEFCF;
	word-break:keep-all;
        font-weight:bold;
	border-bottom: dotted 2px ;
}
.description2 a:hover {
	color:red;
}
.mouse2:hover .description2 { /* マウスオーバー時のスタイル */
  bottom: 100%; /* Y軸の位置 */
  visibility: visible; /* ツールチップを表示 */
  opacity: 1; /* 不透明度を70％に */
}
.description2 b { /* 見出しの太字部分 */
  color: #FFEFCF;
	word-break:keep-all;
font-weight:bold;
}

/* アイフォンで改行されない不具合に対応 */
.description, .description2 {
    white-space: pre-wrap; 
}


/* ■メモ機能 */
    #trail-canvas {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1; /* テキストの下に描画 */
    }
    #zoom-button {
        position: fixed;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2; /* キャンバスの上 */
    }
@media screen and (max-width:360px) {
    #zoom-button {
        transform: translateX(-85%);
    }
}

/* キャンバスの上に表示（ルビ訳，文法解説，使い方ポップアップの画像 */
    a, span.mouse2, span.mouse, .popup-img, #header {
        z-index: 2;
    }


/* 以下を優先させると余分なスクリールバーでないが，点描位置がディスプレイ右端ほどずれる 
body, html {
    margin: 0;
    padding: 0;
    --overflow: hidden;--コメントアウト
}
#trail-canvas {
    --position: fixed;--コメントアウト
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
*/

/* ■スクロールバー非表示 */
::-webkit-scrollbar {
    display: none;
}
/* スクロール自体はできる */
.element {
    overflow: auto; /* または overflow-y: auto; overflow-x: auto; */
}


/* ■使い方ポップアップ */
.popup {
  line-height:130%;
  display: none; /* 最初は非表示 */
  position: fixed; /* ページの上に固定 */
  top: 50%; /* 上端を画面の中央に */
  left: 50%; /* 左端を画面の中央に */
  transform: translate(-50%, -50%); /* 中央揃え */
  background-color: white;
  width: 80%;
  height: 80%;
  max-width: 700px;
  max-height: 600px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 影を追加 */
  z-index: 9999; /* 最前面に表示 */
  max-height: calc(100vh - 40px); /* ビューポートの高さから上下のパディングを引いた値 */
  overflow-y: auto; /* スクロール可能に */
}
/* スクロールバー非表示 */
.popup::-webkit-scrollbar {
  display: none;
}
/* バックドロップのスタイル */
.backdrop {
  display: none; /* 最初は非表示 */
  position: fixed; /* ページの上に固定 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* グレーの透明アミ */
  z-index: 9998; /* ポップアップより後ろ */
}
/* 文章のスタイル */
.popup-content {
  margin-top: 20px;
}
/* ポップアップが開いた時のスタイル */
.popup.active,
.backdrop.active {
  display: block;
}
ul {
    margin:  0;             /* デフォルト指定上書き */
    padding: 10px 0px 10px 25px;           /* デフォルト指定上書き */
}
li {
list-style-type: circle;
}
.popup img {
      display: block;
      margin: 0 auto; /* 水平方向にセンター配置 */
      border-radius: 5px; /* 丸い角の半径を指定 */
      margin: 0px auto; /* 上下に10ピクセルずつ余白を追加 */
}

/* イタリック */
i {
    font-family: "Times New Roman", Times, serif;
}
/* ルビ訳，英文法のポップアップやルビに，イタリック・太字を適用しない*/
.description,.description2,.description3, rt {
    font-family: arial !important;/* for iOS */
	font-weight: normal;
}


/*■画像をフェードイン*/
.fadeIn{
animation-name:fadeInAnime;
animation-duration:10s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/*■英文とルビ訳■*/
div#content {
  line-height: 220% !important;
}
ruby {
  display: inline-table;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  font-size:  !important;/* ルビの下の空き  指定しない*/
  line-height: 100% !important; /* 重要　単語とルビの間  */
  margin-bottom: ;/* ルビの下の空き  指定しない*/
}
.kuro {
  color: black;
  line-height: 100% !important; /* 重要 元は120 */
}
rt {
  display: block;
  text-align: left;
  font-size: 0.75em  !important; 
  color: #008800;
  height: 0%;/* 不要 */
  margin: 0;/* 不要 */
  padding: 0em;/* 不要 */
  border: none;/* 不要 */
  font: inherit;/* 不要 */
  /*display: table-header-group;指定するとルビ下付き(ファイヤーフォックスでは右に付いてしまう)。アイフォンではこれを無効にする */
  font-weight: normal !important; /*bold,normal */
  text-align: left;/* ルビ訳の配置。元はcenter */
  ruby-position: under;
  line-height: 140% !important;
}
ruby.kuro>rt {
  line-height: 170% !important;
  white-space: normal;/* 入れないとiPhoneで改行されない  */
}


/* ■ワードのようにきれいに表示(ガイドのポップアップのみ。本体には入れないこと)  */
div#popup-content.popup-content p{
  text-align: justify !important;
}

/* ■改行しない */
span.mouse {
    white-space: nowrap;
}

/* ■戻る */
.back-to-top {
    text-align: right; /* 右寄せ */
    margin: 10px;      /* 必要に応じて余白を調整 */
}
.back-to-top a {
    text-decoration: none; /* 下線を消す */
    font-size: 16px;       /* テキストサイズを調整 */
    font-weight: bold;     /* 必要に応じて強調 */
}
.back-to-top a:hover {
    color: red;
}





/* ■学習方法　画像ボタン */
img.popup-img{
    width: 80px !important;
}
@media only screen and (max-width: 500px) {
img.popup-img{
 width: 14vw !important;
  }}