@charset "utf-8";
/*---------------------------------------------------
　基本
---------------------------------------------------*/

* {
margin: 0;
padding: 0;
}

html {
overflow-y: scroll;
overflow-x: hidden;
}

html,body {
height: 100%;
font-size:15px;

br{letter-spacing:normal;}
}

body {
font-size: 110%;
line-height: 1.7;
text-align: justify;
text-justify: inter-ideograph;
word-break: break-all;
font-family: 'Arial', 'メイリオ', 'Meiryo', 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
color:#444;
}

/*---------------------------------------------------
　リンク
---------------------------------------------------*/

a{padding:0 7px;}
a,a:link,a:active,a:visited{color:#666;text-decoration:none;border-bottom:solid 2px #ccc;}
a:hover{text-decoration:none;color:#ff0066;border-bottom:solid 2px #ccc;}

.navi{
font-size: 90%;
margin: 30px auto 30px auto;
text-align:center;
}

/*---------------------------------------------------
　後書き
---------------------------------------------------*/

.atogaki {
color:#666;
margin: 30px auto 20px auto;
padding: 25px 8% 25px 8%;
border: 1px solid #999;
font-size: 90%;
text-align:left;
border-radius:17px 17px 17px 17px;
		-webkit-border-radius:17px 17px 17px 17px;
		-moz-border-radius:17px 17px 17px 17px;
}

/*---------------------------------------------------
　見出し
---------------------------------------------------*/

h1 {
color:#999;
font-size:150%;
font-family: 'Noto Serif JP', serif;
font-weight:bold;
text-align:center;
margin-top:10px;
margin-bottom:40px;
padding:30px 20px;
border-bottom:solid 1px #999;
}

h2 {
font-size:105%;
font-family: 'arial narrow', sans-serif;
font-weight:bold;
line-height: 30px;
border-bottom: dashed 1px #ccc;
padding-bottom: 15px;
margin-bottom: 15px;
}

/*---------------------------------------------------
　リスト
---------------------------------------------------*/

.title-box {
  width: 60%;
  margin: 0 auto;
}

ol.title {
  counter-reset:list;
  list-style-type:none;
  font-family: 'arial narrow', sans-serif;
  padding:0;
}
ol.title li{
  position:relative;
  padding: 0 0 0 20px;
  margin: 7px 0 7px 0px;
  font-weight: bold;
  font-size: 90%;
  line-height: 30px;
  border-bottom: dashed 1px #ccc;
}
ol.title li:before{
  counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #ccc;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


/*---------------------------------------------------
　■レスポンシブPC用
---------------------------------------------------*/

/*レスポンシブPC用　記事部分*/

#contents article{
	padding: 10px 21% 50px 21%;
	position:relative;
	top:0px;
	left:0px;
	z-index: 1;
}

/*---------------------------------------------------
　レスポンシブ タブレット用　
---------------------------------------------------*/
@media screen and (max-width:780px){

/*レスポンシブ スマホ用記事部分*/
#contents article{
	font-size: 90%;
	padding: 10px 13% 20px 13%;
}

h1 {
	font-size: 135%;
}

h2 {
font-size: 110%;
}

}

/*---------------------------------------------------
　レスポンシブ スマホ用　
---------------------------------------------------*/
@media screen and (max-width:470px){

/*レスポンシブ スマホ用記事部分*/
#contents article{
	font-size: 86%;
	padding: 10px 20px 20px 20px;
}

h1 {
	font-size: 130%;
}

h2 {
font-size:100%;
}

}