/**
 * クリア・初期化
 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/**
 * PDFキャンバス
 */
canvas {
	display: block;
	width: 100%;
	max-width: 100%;
	margin-bottom: 10px;
}

.pagetitle {
 background: rgba(31, 31, 31,1);
color: #fff;
}
.pankuzu {

}
.komidasi {

background: #e0e0e0;
border-radius: 6px 6px 0px 0px;
}
.kiroku {
background: #f8db9b;
}
/**
 * 最下部ナビゲーション
 */
.nav-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  
  background: #f2f2f2;

  padding: 0 0 8px;
}
.nav-item {
  flex: 1;
  text-align: center;
  color: rgba(31, 31, 31, 1);
  padding: 6px 0;
  font-size: 1.2em;
  cursor: pointer;
}
.nav-item.active {
  background: #f8db9b;
  border-radius: 20px;
}
.nav-bar a {
  text-decoration: none;
}
.nav-item .bicon {
    font-size: 16px;
}
.nav-item .btxt {
    font-size: 13px;
    font-weight: 600;
}
.bounce-container {
  display: inline-block;
  transition: transform 6s ease-out;
}

.bounce-container:active {
  transform: scale(7.5);
}
#main {
   /** ナビゲーションボタン分、余白をつくる */
  padding-bottom: 100px;
}		
.sr-only {
  /** スクリーンリーダーユーティリティ。ナビゲーション部分で利用している */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/**
 * コンテンツのレイアウト調整
 */
.content {
  /** 「コンテンツ見出し＋コンテンツ本体」の外側 */
  padding: .5em;
}
.content-wrapper {
  /* コンテンツ見出しの下側＝コンテンツ本体の内側 */
  padding: .5em;
background: #f7f7f7;

}

/**
 * 答え
 */
.answer-example {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
  font-size: .9em;
  color: #E57373;
  margin-left: 8px;
  margin-top: 2px;
  padding-bottom: 4px;
}
.answer-example.show {
  opacity: 1;
  max-height: 600px;
}
.kotae {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
  font-size: .9em;
  color: #E57373;
  margin-left: 8px;
  margin-top: 2px;
  padding-bottom: 4px;
}
.kotae.show {
  opacity: 1;
  max-height: 600px;
}
.kotae.show:before {
    content: "解答例: ";
}
.kotae img {
    max-width: 100%;
}

/**
 * メディアクエリーのサンプル
 */
@media (min-width: 768px) {
}

.pc {
  max-width: 900px;
  margin: 0 auto;
}

.pc aside.nav-bar.bottombar {
    position: fixed;
    top: 0;
    right: 0;
    display: initial;
    align-items: initial;
    width: 72px;
}
.pc .nav-item.bounce-container {
    display: initial;
}
.pc .nav-item {
    display: block;
    height: 80px;
    padding-top: 15px;
}

.pc #pdf-container {
  text-align: center;
}

/**
 * 解答HTMLのclassを極力排除
 */
/* <fieldset class="mt-3"> */
#myToan fieldset {
  margin-top: 1rem !important;
}
#myToan fieldset legend {
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
}
#myToan fieldset label {
  margin-bottom: .5rem;
}

