@charset "UTF-8";

body{
max-width: 800px;
padding: 0;
margin: 0 auto;
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

nav{
text-align: center;
margin:0 0 0.5em 0;
}
nav a{
text-decoration: none;
font-size: 1em;/*文字サイズ*/
}

a {
  color:#FF8C00;
  font-size: 1.15em;/*文字サイズ*/
  font-weight: bold;
}
a:hover {
  background: #FFFFCC;/*背景色*/
}
a:visited {
  color:#00CED1;
}

h1{
margin:0.5em 0 0 0
}

h2.en {
  position: relative;
  color: #333;
  margin: 0.5em 4% ;
}
h2.en:before {
  content: "";
  position: absolute;
  background: #91E9E9;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  top: 50%;
  /* border: dashed 1px white; */
  left: -15px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}

h3.double {
  color: #202124;/*文字色*/
  border-bottom: double 6px #91E9E9;
  margin: 1.5em 2% 0.5em 2% ;
  padding: 0.5em 0.5em 0 0.5em;/*上下 左右の余白*/
}

h4.dot {
  color: #202124;/*文字色*/
  margin: 1em 2% 0.5em 2% ;
  /*線の種類（点線）px 線色*/
  border-bottom: dotted 5px #91E9E9;
  padding: 0.5em 3em 0 0.5em;/*上下 左右の余白*/
  display:inline-block;
}

h5.fuki {
  color: #202124;/*文字色*/
font-size: 1em;/*文字サイズ*/
  margin: 0.5em 0 1em 2% ;
  position: relative;
  padding: 0.6em;
  background: #CFF5F5;
  border-radius: 0.6em;/*角丸*/
  display:inline-block;
}
h5.fuki:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 20px;
  border: 8px solid transparent;
  border-top: 15px solid #CFF5F5;
  width: 0;
  height: 0;
}

p.txt{ 
 color : #3D4144 ;
 padding : 0.2em 2% 0.7em 3% ;
 margin: 0 ;
}
p.point {
 padding : 0.2em 2% 0.7em 3% ;
 margin: 0 ;
  background-color:#FFE668;
}
p.last{ 
 margin: 0 2% 7em 3% ;
}

div.box1 {
    border: solid 2px #FFE668;/*線*/
    background-color:#FFFFD8;
    border-radius: 10px;/*角の丸み*/
    margin : 0.2em 2%;
    padding : 1em 0.5em 0.2em 0;
    max-width: 500px;
}
.box1 .Link{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.btn {
  position: relative;
  display: inline-block;
  padding: 0.5em 0.7em;
  text-decoration: none;
  color: #FFF;
  background: #FFB624;/*背景色*/
  border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
  border-radius: 5px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
}
.btn:active {
  border-bottom: solid 2px #fd9535;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
.btn:hover{
   background-color: #FFE668;
}
.btn:visited {
  color: #FFF;
}

div.scrl {
  width: 80%;
  height: 14em;
 overflow: scroll;
  margin : 0.2em 2.5% ;
}

a.new{
font-size: 1em;/*文字サイズ*/
}

span.point {
  background-color:#FFE668;
}
span.ore {
  color:#FFC02A;
}

table {
 border: 0;
 color: #202124;
}
table td {/*table内のtdに対して*/
  padding: 1em 0.5em;
}

ul, ol {
  padding: 0;
}
ul li {
  color : #3D4144 ;
  position: relative;
  list-style-type: none!important;/*ポチ消す*/
  padding: 0.2em 3%;
  vertical-align: middle;
}
ul li:before{ 
  display:inline-block; 
  vertical-align: middle;
  /*以下丸つくる*/
  content:'';
  width:1em;
  height: 1em;
  background: #FFC02A;
  border-radius: 50%;
  margin-right: 0.3em;
}

summary {
  position: relative;
  display: block; /* 矢印を消す */
  padding: 10px 10px 10px 30px; /* アイコンの余白を開ける */
  cursor: pointer; /* カーソルをポインターに */
  background-color: #FFFFD8;
  border-radius: 0.6em;/*角丸*/
  margin : 0.5em 2.5% ;
  display:inline-block;
}
summary:hover {
  background-color: #CFF5F5;
}
summary::-webkit-details-marker {
  display: none;　/* 矢印を消す */
}

/* 疑似要素でアイコンを表示 */
summary:before,
summary:after {
  content: "";
  margin: auto 0 auto 10px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
summary:before {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background-color: #00CED1;
}
summary:after {
  left: 6px;
  width: 5px;
  height: 5px;
  border: 4px solid transparent;
  border-left: 5px solid #fff;
  box-sizing: border-box;
  transition: .1s;
}

/* オープン時のスタイル */
details[open] summary {
  background-color: #FFFFD8;
}
details[open] summary:after {
  transform: rotate(90deg); /* アイコンを回転 */
  left: 4px; /* 位置を調整 */
  top: 5px; /* 位置を調整 */
}

/* 上に戻るボタン */
.pagetop {
	color: #fff;
	background-color: rgba(0,0,0,0.3);
	text-decoration: none;
	display: none;
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	font-size: 1.5rem;
	width: 3.3rem;
	height: 3.3rem;
	line-height: 3.3rem;
	border-radius: 3.3rem;
	text-align: center;
	cursor: pointer;
}

.pagetop:hover {
	color: #fff !important;
	background-color: #00CCCC;
	text-decoration: none;
}