/* variables */
:root {
	--outer-width: 55rem;
	--inner-margin: 3rem;
	--main-color: #2288bb;
	--background-color: #F0F0F0;
}

/* CSS */
h1{
	font-size: 3rem;
	margin-bottom: 0.2rem;
	margin-top: 0.3rem;
	font-weight: normal;
}
h2{
	font-size: 2.7rem;
	font-weight: normal;
	margin-top: 2.6rem;
	margin-bottom: 0rem;
	padding-top: 0.5rem;
	padding-bottom: 0.1rem;
	/* border-bottom: 0.2rem #606060 solid; */
}
h3{
	font-size: 1.8rem;
	font-weight: normal;
	padding-top: 0.1rem;
	padding-bottom: 0rem;
	margin-top: 0.1rem;
	margin-bottom: 0.1rem;
	border-bottom: 0.1rem #606060 solid;
}
h4{
	font-size:1.5rem;
	font-weight:normal;
	text-decoration: underline;
	padding-top:0.1rem;
	margin-top:1.5rem;
	margin-bottom:0rem;
}
h5{
	font-size:1.3rem;
	font-weight:normal;
	padding-top:0.1rem;
	margin-top:1.5rem;
	margin-bottom:0rem;
}
table{
	border-collapse: collapse;
	border-top: 0.1em solid;
	border-bottom: 0.1em solid;
	border-color: black;
	margin-bottom: 1rem;
}
tr:nth-child(1){
	border-bottom: 0.05em solid;
	border-color:black;
}
tr:nth-child(even){
	background-color:#dfdfdf;	
}
p{
	margin-top:0.5rem;
	font-size:1.1rem;
	line-height:1.8rem;
	letter-spacing: 0.05rem;
}
img{
	max-width:100%;
	height:auto;
}
a{
	text-decoration:none;
	color: #2288bb;
	word-wrap:break-word;
}
a:hover{
	color:#33aaff;
}
a:visited{
	color:#888888;
}
li{
	font-size:1.1rem;
	margin-top:0.5rem;
}
ol{
	margin-top: 0rem;
}
html{
	background-color: #cccccc;
	height: auto;
}
body{
	font-family: Avenir , "Open Sans", "メイリオ", sans-serif;
	max-width: var(--outer-width);
	margin: auto;
	padding: 3rem 3rem 1rem 3rem;
	background-color: var(--background-color);
}
pre{
	max-width: 100%;
	border-left: solid #808080 0.5rem;
	margin: 0 auto;
	margin-top: 1rem;
	margin-bottom: 2rem;
	padding-left: 1rem;
	border-radius: 5px;
	background-color: #f8f8f8;
	white-space: pre-wrap;       /* Since CSS 2.1 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */

	line-height:1.5rem;
	font-family: Avenir , "Open Sans", "メイリオ", sans-serif;
}
pre p{
	margin: 0rem;
}
todo{
	background-color: red;
	color:white;
}
video{
	max-width: 100%;
	margin: 0 auto;
	display: block;
}
form{
	font-size:1.5rem;
	width: 99%;
}
#toTop{
	font-weight:bold;
	text-align:center;
	border: 0.2em solid black;
	font-size:2rem;
	width:2rem;
	height:auto;
	position:fixed;
	bottom:1rem;
	right:1rem;
	background-color:white;
}

#blogTitle{
	color: #2288bb;
	font-size: 3rem;
	margin-bottom:0.2rem;
}
#preArticle, #pre-article{
	display:inline-block;
	width:90%;
	text-align:center;
	background-color: #e0e0e0;
	border: 0.1em solid #808080;
	margin:auto;
	margin-top:1rem;
	margin-bottom:2rem;
}
articles{
	text-align: left;
}
article{
	border-top: 0.1em solid;
}
#articleCategory{
	margin-top: 1rem;
	font-size:0.9rem;
}
categoryName{
	margin-right:0.5rem;
}
#categories{
	line-height:2rem;
	margin-top:0rem;
	margin-bottom:2rem;
}
#categories-title{
	width:100%;
	text-align:center;
	background-color:#cccccc
}
#categories ul{
	padding-left:0rem;
	border:0rem;
}
.category-ll{
	margin:0em 0.1em 0.1em 0rem;
	text-indent:1rem;
	background-color:#e8e8e8;
}
.category-lr{
	margin:0em 0em 0.1em 0rem;
	text-indent:1rem;
	background-color:#e8e8e8;
}
.topCategory{
	border-bottom:solid 0.1rem;
}
#footer{
	border-top: 0.1em solid;
	clear:both;
	width:100%;
}
#new{
	padding-top:1rem;
	text-align:left;
	float:left;
	font-size:1.2rem;
}
#old{
	padding-top:1rem;
	text-align:right;
	float:right;
	font-size:1.2rem;
}
.smafont{
	-webkit-text-size-adjust: 200%;
	-moz-text-size-adjust: 200%;
	-ms-text-size-adjust: 200%;
	-o-test-size-adjust: 200%;
	text-size-adjust: 200%;
}
.citation{
	margin-top:0.5rem;
	font-size:1rem;
	line-height:1.8rem;
	margin-left:1rem;
	background-color:white;
}
.indentAll{
	margin-top:0rem;
	padding-left:1rem;
	text-indent:0rem;
}
.textDiv{
	max-width:90%;
	height:auto;
	display:inline-block;
	text-align:left;
}
.imageCenter{
	height:auto;
	text-align:center;
	margin-bottom:2rem;
}
.imageDiv{
	max-width:90%;
	height:auto;
	display:inline-block;
	text-align:center;
	background-color:white;
	padding: 0.6rem;
	border: 0.4em #e8e8e8 solid;
	border-radius: 0.3rem;
}
.innerImages{
	max-width:95%;
	height:auto;
	display:inline-block;
	text-align:center;
}
.singleImage{
	max-width:100%;
	height:auto;
	display:inline-block;
	text-align:center;
	background-color:white
}
.imageStyle{
	display:block;
}
.imageText{
	font-size:0.8rem;
	margin-top: 0.3rem;
}
.leftDiv{
	max-width:49%;
	height:auto;
	float:left;
}
.rightDiv{
	max-width:49%;
	height:auto;
	float:right;
}
.leftDivOnPC{
	width:49%;
	height:auto;
	float:left;
}
.rightDivOnPC{
	width:49%;
	height:auto;
	float:right;
}
.clear{
	clear:both;
}
.video{
	position:relative;
	overflow:hidden;
	height:0;
	margin-top:1rem;
	padding-bottom:60%;
}
.video iframe{
	position:absolute;
	width:99%;
	height:99%;
	margin:0 auto;
	top:0;
}
.ad-border-pc{
	border: 0.4em #a8a8a8 solid;
	margin-top:2rem;
}
.rakuten-pc{
	text-align:center;
	padding-bottom:0.5rem;
}
.ad-border-smp{
	display:none;
}
.ad-string{
	font-size:1.2rem;
	margin-top:0.5rem;
	width:inherit;
	text-align:center;
}
.align-right {
	text-align:right;
}
.align-left{
	text-align:left;
}
.align-center{
	text-align:center;
}
.center-table{
	text-align:center;
}
.w100{width: 100%;}

/*custom radio button
	radio の id と label の for を一致させる必要がある。
*/
.my-radio {
	display: none; 
}
.my-radio-label {
	margin: 0.1rem; 
	padding: 0 0.5em 0 0.5rem;
	border: 1px solid #9cb5c2;
	border-radius: 0.3rem;
	color: #B0B0B0;
	text-align: center;
}
.my-radio:checked + label {
	background: #2288bb;
	color: #ffffff; 
}

/*new image div*/
.image{
	text-align: center;
	margin: auto;
	width: fit-content;
	border-radius: 0.3rem;
	border:0.4em #e8e8e8 solid;
	background-color: white; 
	padding: 0.6rem; 
}
.image-text{
	font-size:0.8rem;
	margin: 0.3rem;
	text-indent: 0rem;
}
.align-left-position-center{
	margin: auto;
	width: fit-content;
}
.align-left-position-center p{
	margin-bottom: 0rem;
	margin-top: 0rem;
}
input {
	font-size: 1.5rem;
}
select {
	font-size: 1.5rem;
}
ul {
	padding-left: 1.5rem;
}
.toc-ul {
	padding-left: 2rem;
}
.toc {
	list-style: none;
}
th{
	font-weight: normal;
	text-align: center;
	padding: 0.4rem;
}
td{
	padding: 0.4rem;
}