@charset "utf-8";

html,body,main,article,aside,nav,section,
header,footer,
h1,h2,h3,h4,h5,h6,
p,img,ul,ol,li
dialog,figure,blockquote,figcaption,
table,tr,th,td,
dl,dt,dd {
	margin: 0;
	padding: 0;
}	

body {
	line-height: 1.6;
	letter-spacing: 0.05em;
	font-size: 100%;
	font-family: "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Arial, sans-serif;
	color: #333333;
	background-color: #ffffff;
}	

h1,h2,h3,h4,h5,h6,
p,ul,ol,dl,table,img,fieldset,figure {
	margin-bottom: 24px;
}

ul, ol {
	padding-left: 36px;
}

li {
	margin-bottom: 24px;
}

table {
	border-left: 1px solid #999999;
	border-bottom: 1px solid #999999;
}

th,td {
	border-top: 1px solid #999999;
	border-right: 1px solid #999999;
	padding: 6px 12px;
}

dt, th {
	font-weight: bold;
}

dd {
	margin-left: 24px;
	margin-bottom: 12px;
}

pre {
	overflow: scroll;
}

pre code {
	display: block;
	color: #cccccc;
	background-color: #333333;
}

img{
	vertical-align: middle;
	max-width: 100%;
	height: auto;
}

a {
	color: #3366cc;
	text-decoration: none;
}

a:hover {
	opacity: 0.8;
	color: #3f3f3f;
	background-color: #f3f3f3;
}

strong {
	background-color: #d9e9ff;	
}

/* ----------------------------------------------------- #container  */

.all {
	position: relative;
	max-width: 1980px;
	margin: 0 auto;
	padding: 0 3%;
}

/* ----------------------------------------------------- #header */

#website-header {
	margin-bottom: 24px;
}

#website-header h1 {
	margin: 0;
	padding: 0;
}

#website-header h1 a:hover {
	opacity: 1;
}

/* ------------------------------------------------------ #nav */

#website-nav {
	margin-bottom: 24px;
}

#website-nav ul {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	padding: 0;
}

#website-nav ul li a {
	display: block;
	padding: 3px 24px;
	margin: 0 6px;
	border: 1px dashed #999999;
	border-radius: 12px;
}

/* ------------------------------------------------------ #main */

#website-main {
	margin-bottom: 24px;
}

/* ------------------------------------------------------ #footer */

#website-ad {
	margin-bottom: 24px;
	border-bottom: 6px solid #cccccc;
}

#website-footer ul {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#website-footer ul li a {
	display: block;
	padding: 0 24px;
}

#website-footer p a {
	text-decoration: none;
}

/*-------------------------------------------------------------------------- post --- */

.post-date {
	display: block;
	margin-bottom: 24px;
}

.post-gad {
	margin: 24px 0;
}

.post h2 {
	margin-top: 72px;
	padding-bottom: 12px;
	border-bottom: 6px solid #0033ff;
}

.post h3 {
	margin-top: 48px;
	border-left: 6px solid #0033ff;
	padding-left: 6px;
}

.post footer {
	border-top: 3px double #333333;
	padding-top: 24px;
}

.post footer dl {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.post footer dl dt::after {
	content: "：";
}

/* -------------------------------------------------------------------- post-list --- */

.post-list ul {
	list-style-type: none;
	padding-left: 0;
}

.post-list ul li img {
	margin-bottom: 0;
}

/* ---------------------------------------------------------- 有効class */

.font-weight-bold {
	font-weight: bold;
}

.font-color-black {
	color: #000000;
}

.font-color-blue {
	color: blue;
}

.font-color-green {
	color: green;
}

.font-color-red {
	color: red;
}

.margin-l-0 {
	margin-left: 0;
}

.text-align-center {
	text-align: center;
}

.text-align-right {
	text-align: right;
}

.waku1 {
	background-color: #ffffff;
	color:#000000;
}

.waku2 {
	background-color: #000000;
	color:#ffffff;
}

.waku3 {
	background-color: #f00;
	color:#ffffff;
}

.waku4 {
	background-color: #0000ff;
	color:#ffffff;
}

.waku5 {
	background-color: #ffff00;
	color:#000000;
}

.waku6 {
	background-color: #00ff00;
	color:#ffffff;
}

.waku7 {
	background-color: #ff9900;
	color:#ffffff;
}

.waku8 {
	background-color: #ff00ff;
	color:#ffffff;
}

/* ----------------------------------------------------------- 601px以上 */
@media screen and (min-width : 601px){

.post-list ul {
	display: flex;
	flex-wrap: wrap;
	width: 49%;
}

}

/* ---------------------------------------------------------- 961px以上 */
@media screen and (min-width : 961px){

.post-list ul {
	width: 24%;
}

}