@charset "utf-8";

body{font-family: 'Noto Sans Japanese', sans-serif;}
/*.wf-sawarabimincho { font-family: "Sawarabi Mincho"; font-family: 'Sawarabi Mincho'; }*/
.blue_txt{color:#0060a4; font-weight:bold;border-bottom:solid 1px;border-top:solid 1px;}

.orange_txt{color: #ff6600;font-weight:bold;}

.s_txt{font-size:80%;}

.fa a{
  text-decoration: none;
  color:#999;
  padding:0;
  margin:0;
}

video {
  width: 100%;
  max-width: 600px;
}

#backtotop {
	position: fixed;
	right: 0px;
	bottom: 0px;
	z-index: 9000;
	width: 40px;
	height: 40px;
    text-align: center;
  }

#backtotop a {
	color: #fff;
	width: 40px;
	height: 40px;
	text-decoration: none;
	display: block;
	line-height: 40px;
}

html {
    max-width: 600px;
    margin: 0 auto;
}

h1, #books{
    margin:0;
}

#books label{
    margin:auto;
}

/*画像の最大幅*/
img{
    width:100%; 
    max-width:600px; 
    height:auto;
}

/*ヘッダーの上の空白をなくす*/
div#langbtn{
    top:0px;
}

.textgr{text-align: center; padding:0 15px; }

/*あとがきだけ左揃え*/
.textgr2{text-align: left; padding:0 20px;}

#langbtn{
    max-width: 600px; 
    position:fixed; 
    width:100vw; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    background-color: #fff; 
    padding:10px 0;
}

/* === ラジオボタンは非表示 ================== */
#langbtn input[type="radio"]{
  display    : none;
}
  
/* === 各ラジオボタンのラベルをボタンに変更 == */
#langbtn label{
  display    : inline-block;
  border     : 1px solid #ccc;
  box-shadow : 2px 2px #999;
  padding    : 2px 6px;
}
  
/* === 選択されている言語のラベル色を変更 ==== */
#langbtn input[type="radio"]:checked + label {
  color:#fff;
  background : #0060a4;
}




button {
  font-size:50%;
  background-color: transparent;
  border: none;
  /* width: 40px; */
  /*float: left;*/
  padding: 10px;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

#stop_btn{
  font-size: 70%;
}



.divlink{
  position:relative;
  width:100%;
  height:100px;
  background-color:#fffbb6;
  border-radius:10px;
}

.divlink .link{
text-decoration: none;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.txt_middle{
  text-decoration: none;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width:90%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

#page_copyright p{
  color:black;
}


.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 700,
  'GRAD' 200,
  'opsz' 48
}





/*まずはお決まりのボックスサイズ算出をborer-boxに */
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 100%;/*rem算出をしやすくするために*/
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  display: inline-block;
  padding: 1rem 4rem;
  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: 1rem;
  border:5px double white;
}


a.btn--orange {
  color: #fff;
  background-color: #eb6100;
}

a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}

a.btn--blue {
  color: #fff;
  background-color: #0060a4;
}

a.btn--blue:hover {
  color: #fff;
  background: #0060a4;
}

a.btn-c {
  font-size: 1rem;
  padding: 1.5rem 2rem 1.5rem 2rem;
}

a.btn-c i.fa {
  margin-right: 1rem;
}


.highlighter-jiro {
  text-decoration:underline;
  text-decoration-color:yellow;
  text-decoration-thickness:5px;
}


.highlighter-haha {
	text-decoration:underline;
  text-decoration-color:#ffb8ff;
  text-decoration-thickness:5px;
}