@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

/*
	font-family: 'Open Sans', sans-serif;
*/

/** reset **/
/* =============================================== */
html, body, div, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre,
address, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset {
	margin: 0; padding: 0; box-sizing: border-box;
}
p { margin-bottom: 1.5rem; }
table {
	border-collapse: collapse; border-spacing: 0;
}
ul, ol { list-style: none; }
a:not(.entry) { text-decoration: none; }
img { border: 0; }
img, input { vertical-align: bottom; }

/** common **/
/* =============================================== */
html {
	font-size: 62.5%;
}
body, input {
	color: #000;
/* "Noto Sans JP",  */
	font: 1.5rem/1.8 Lato, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

a {
	color: #197d8c;
	transition: all 0.3s linear;
}
a:hover {
	color: #555;
	text-decoration: none;
}
a img {
	transition: all 0.3s linear;
}
a:hover img {
	opacity: 0.8;
}

/** headline **/
/* =============================================== */
h1 {
	margin: 0 0 1.5rem;
	font-size: 1.8rem;
}

/** nav **/
/* =============================================== */
#header {
	position: fixed;
 	z-index: 5;
	width: 100%;
  	height: 65px;
	border-bottom: 1px solid #ddd;
	background: #fff;
}
#header ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	-flex-pack:justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
#header ul li {
	display: inline-block;
}
#header ul li a {
	display: block;
	position: relative;
	width: 100%;
	height: 65px;
	text-align: center;
	line-height: 65px;
}
#header ul li a > img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}


/** main **/
/* =============================================== */
article {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	-flex-pack:justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	width: 98%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 130px 0 60px;
}
article > section:first-of-type {
	width: 68.75%; /* 71.416%; */
	padding-right: 2.666%;
	border-right: 1px solid #ddd;
}
article > section:last-of-type {
	width: 25.833%;
}

.entry_list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	-flex-pack:justify;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-ms-flex-wrap:wrap;
	flex-wrap: wrap;
}
.entry_list h2 {
	margin: 0.5rem 0;
	font-size: 2rem;
	font-weight: 500;
}
.entry_list .date {
	color: #aaa;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.2rem;
}
.entry_list .cate {
	display: block;
	position: absolute;
	z-index: 3;
	background: #197d8c;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.2rem;
}
.entry_list .cate a {
	display: block;
	padding: 0.3rem 0.8rem;
	color: #fff;
}
.entry_list .cate a:hover {
	color: #8ed1db;
}
.entry_list > li {
	width: 45%;
	position: relative;
	margin-bottom: 1rem;
}
.entry_list > li:nth-of-type(2n) {
	margin-left: 5%;
}
.entry_list > li > a {
	display: block;
	position: relative;
	width: 100%;
	padding-bottom: 1.5rem;
}
.entry_list > li a {
	color: #232323;
}
.entry_list > li a:hover {
	color: #197d8c;
}
.entry_list .tag {
	display: block;
	position: absolute;
	z-index: 3;
	bottom: 1.5rem;
	right: 0;
}
.entry_list .tag > a {
	color: #aaa;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.2rem;
}

.thumb {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.thumb:before {
	content:"";
	display: block;
	padding-top: 60%;
}
.thumb > div {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #eee;
}
.entry_list > li > a .thumb > div {
	transition: all 0.3s linear;
}
.entry_list > li > a:hover .thumb > div {
	-moz-transform: scale(1.03,1.03);
	-webkit-transform: scale(1.03,1.03);
	-o-transform: scale(1.03,1.03);
	-ms-transform: scale(1.03,1.03);
	transform: scale(1.03,1.03);
/*
	-webkit-filter: blur(3px) brightness(150%);
	-ms-filter: blur(3px) brightness(150%);
	-moz-filter: blur(3px) brightness(150%);
	-o-filter: blur(3px) brightness(150%);
	filter: blur(3px) brightness(150%);
*/
}

.search-area {
	margin: 2rem 0;
}
input[type=text] {
	width: calc(100% - 5rem);
	padding: 0.5rem;
	border: 1px solid #ececec;
	vertical-align: middle;
}
#searchsubmit {
	width: 3rem;
	margin-left: 0.3rem;
	padding: 0.5rem;
	border: 1px solid #ececec;
	font-family: FontAwesome;
	vertical-align: middle;
	cursor: pointer;
}



/* entry */
.entry .line-top,
.page .line-top {
	position: relative;
	width: 100%;
	margin: 4px 0 2rem;
	border-top: 3px solid #ddd;
}
.entry .line-top::before,
.page .line-top::before {
	content: "";
	display: block;
	position: absolute;
	z-index: 2;
	width: 110px;
	top: -3px;
	left: 0;
	border-top: 3px solid #197d8c;
}
.entry .date {
	color: #197d8c;
	font-size: 2rem;
	font-family: 'Open Sans', sans-serif;
	font-style: italic;
	font-weight: 600;
}
.entry .cate {
	margin-left: 3rem;
	font-size: 1.2rem;
	font-style: italic;
}
.entry .cate a {
	color: #ccc;
}
.entry .cate a:hover {
	color: #197d8c;
}
.entry h2 {
	margin: 4rem 0;
	font-size: 2.7rem;
/*	font-weight: 500;*/
}
.page section:first-of-type h2 {
	margin: 0 0 4rem;
	font-size: 2.7rem;
/*	font-weight: 500;*/
}
.entry_thumb {
	position: relative;
	width: 100%;
	margin-bottom: 5rem;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #eee;
}
.entry_thumb:before {
	content:"";
	display: block;
	margin: -10px;
	padding-top: calc(47% + 20px);
	background: inherit;
	-webkit-filter: blur(6px) brightness(40%);
	-ms-filter: blur(6px) brightness(40%);
	-moz-filter: blur(6px) brightness(40%);
	-o-filter: blur(6px) brightness(40%);
	filter: blur(6px) brightness(40%);
}
.entry_thumb > div {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
.entry_thumb > div > img {
	width: auto;
	max-width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.entry h3 {
	margin: 4rem 0;
	padding-left: 2.2rem;
	border-left: 4px solid #197d8c;
	font-size: 2.2rem;
/*	font-weight: 500;*/
}
.entry h4 {
	position: relative;
	margin: 4rem 0;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #ddd;
	font-size: 2rem;
/*	font-weight: 500;*/
}
.entry h4::before {
	content: "";
	display: block;
	position: absolute;
	z-index: 2;
	width: 55px;
	bottom: -1px;
	left: 0;
	border-top: 1px solid #197d8c;
}
.entry h5 {
	margin: 4rem 0;
	font-size: 1.8rem;
/*	font-weight: 500;*/
}
.entry li {
	list-style: disc;
	margin-left: 2rem;
}

.entry .shareaholic-canvas,
.page .shareaholic-canvas {
	width: 100%;
	margin: 5rem 0;
	padding: 10px 0;
	border-top: 3px solid #ddd;
	border-bottom: 3px solid #ddd;
	text-align: center;
}
.entry .share_button {
	width: 100%;
	margin: 5rem 0;
	padding: 10px 0;
	border-top: 3px solid #ddd;
	border-bottom: 3px solid #ddd;
	text-align: center;
}
.entry .next_link {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	-flex-pack:justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	width: 100%;
	height: 105px;
	margin: 5rem 0;
	padding: 10px 0;
	border-top: 3px solid #ddd;
	border-bottom: 3px solid #ddd;
}
.entry .next_link > div {
	position: relative;
	width: 50%;
}
.entry .next_link > div:first-of-type {
	padding-right: 12px;
	border-right: 1px solid #ddd;
}
.entry .next_link > div:last-of-type {
	padding-left: 12px;
}
.entry .next_link > div > a {
	display: block;
	width: 100%;
	letter-spacing: -4.0rem;
	color: #2a2a2a;
}
.entry .next_link > div > a:hover {
	color: #197d8c;
}
.entry .next_link > div > a > span {
	position: absolute;
	font-size: 1.2rem;
	letter-spacing: normal;
}
.entry .next_link > div:first-of-type > a > span {
	right: 12px;
}
.entry .next_link > div:first-of-type > a > span::before {
	content: "\f104";
	font-family: FontAwesome;
	position: absolute;
	left: -1rem;
}
.entry .next_link > div:last-of-type > a > span {
	left: 12px;
}
.entry .next_link > div:last-of-type > a > span::after {
	content: "\f105";
	font-family: FontAwesome;
	position: absolute;
	right: -1rem;
}
.entry .next_link > div > a > .next_thumb {
	display: inline-block;
	width: 85px;
	height: 85px;
	overflow: hidden;
	background: #eee;
	vertical-align: middle;
}
.entry .next_link > div > a > .next_thumb > img {
	max-width: 85px;
	max-height: 85px;
}
.entry .next_link > div > a > p {
	display: inline-block;
	margin-bottom: 0;
	vertical-align: middle;
	width: calc(100% - 85px);
	letter-spacing: normal;
	font-weight: 600;
}
.entry .next_link > div:first-of-type > a > p {
	padding-left: 1rem;
}
.entry .next_link > div:last-of-type > a > p {
	padding-right: 1rem;
}

blockquote {
	position: relative;
	margin: 2rem 0;
	padding: 1rem 2rem;
	border: 2px solid #ddd;
	font-size: 1.4rem;
}
blockquote > p:last-of-type {
	margin: 0;
}
blockquote::before {
	content: "";
	display: block;
	position: absolute;
	top: 1rem;
	left: -2px;
	width: 2px;
	height: 2rem;
	border-left: 2px solid #197d8c;
}

.side .line-top {
	position: relative;
	width: 100%;
	margin-bottom: 0.5rem;
	border-top: 3px solid #ddd;
}
.side .line-top::before {
	content: "";
	display: block;
	position: absolute;
	z-index: 2;
	width: 50px;
	top: -3px;
	left: 0;
	border-top: 3px solid #197d8c;
}
.side > h2 {
	display: block;
	position: relative;
	margin: -5px 0 2rem;
	color: #197d8c;
	font-size: 1.3rem;
	font-style: italic;
	font-weight: 500;
}
.side > h2 > span {
	padding-right: 1rem;
	background: #fff;
}
.side > h2::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: calc(50% - 1.5px);
	left: 0;
	width: 100%;
	margin-bottom: 0.5rem;
	border-top: 3px solid #ddd;
}
.side .side_thumb {
	display: inline-block;
	width: 70px;
	height: 70px;
	overflow: hidden;
	background: #eee;
	vertical-align: middle;
}
.side .side_thumb > img {
	max-width: 70px;
	max-height: 70px;
}
.side ul {
	margin-bottom: 3rem;
}
.side ul li > a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	-flex-pack:justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	position: relative;
	color: #232323;
}
.side ul li > a:hover {
	color: #197d8c;
}
.side ul li > .cate {
	display: block;
	position: absolute;
	z-index: 3;
	background: #197d8c;
	font-family: 'Open Sans', sans-serif;
	font-size: 1rem;
}
.side ul li > .cate a {
	display: block;
	padding: 0.3rem 0.8rem;
	color: #fff;
}
.side ul li > .cate a:hover {
	color: #8ed1db;
}
.side ul li > a > .info {
	width: calc(100% - 75px);
}
.side ul li > a > .info h2 {
	font-size: 1.5rem;
}
.side ul li > a > .info .date {
	font-size: 1.2rem;
}
.side ul li {
	margin-bottom: 1rem;
}
.side ul li + li {
	padding-top: 1rem;
	border-top: 1px solid #ddd;
}
.side .tags {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	-flex-pack:justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-ms-flex-wrap:wrap;
	flex-wrap: wrap;
	width: 100%;
	border: 2px solid #ddd;
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}
.side .tags li {
	margin: 0;
	padding: 0;
	border-top: none;
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}
.side .tags li > a {
	display: block;
	width: 100%;
	padding: 0.5rem;
	color: #ccc;
	font-size: 1.2rem;
	text-align: center;
}

.side .toc_widget_list {
	position: relative;
	margin: 2rem 0;
	font-size: 1.2rem;
	background: #f7f7f7;
}
.side .toc_widget_list::before {
	content: "目次";
	display: block;
	position: relative;
	margin: 0 0 2rem 0;
	padding: 2rem 0 0 1rem;
	color: #197d8c;
	font-size: 1.3rem;
	font-style: italic;
	font-weight: 500;
}
.side .toc_widget_list ul {
	margin: 0;
	background: #f7f7f7;
}
.side .toc_widget_list li {
	margin: 0 0 0 1rem;
	padding: 0.3rem;
	border: none;
}
.side .toc_widget_list li a {
	display: block;
}
.side .current {
	font-weight: bold;
	background: #eee;
}

.hightlighter {
	padding: 1rem;
	/*border: 1px solid #ececec;*/
	background-color: #f7f7f7;
}
.entry .result {
	padding: 1rem;
	margin-bottom: 2rem;
	/*border: 1px solid #ececec;*/
	background-color: #f7f7f7;
	font-size: 1.3rem;
}
.entry .result > .str {
	display: block;
	border-bottom: 1px solid #ececec;
}

.relatedposts {
	width: 100%;
	padding: 3rem 0;
	background: #f7f7f7;
}
.relatedposts h3 {
	text-align: center;
}
.relatedposts > ul {
	width: 98%;
	max-width: 1200px;
	margin: 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	-flex-pack:justify;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}
.relatedposts > ul li {
	width: 19%;
	font-size: 1.3rem;
}
.relatedposts > ul li + li {
	margin-left: 1%;
}
.relatedposts > ul li a {
	color: #232323;
	font-weight: bold;
}
.relatedposts > ul li a:hover {
	color: #197d8c;
}
.relatedposts > ul li > a .thumb > div {
	transition: all 0.3s linear;
}
.relatedposts > ul li > a:hover .thumb > div {
	-moz-transform: scale(1.03,1.03);
	-webkit-transform: scale(1.03,1.03);
	-o-transform: scale(1.03,1.03);
	-ms-transform: scale(1.03,1.03);
	transform: scale(1.03,1.03);
}
.relatedposts ul li p {
	margin: 1rem 0;
}

table {
	width: 100%;
	font-size: 1.4rem;
}
th, td {
	padding: 0.5rem 1rem;
	border-top: 1px solid #ececec;
	border-bottom: 1px solid #ececec;
}
th {
	background-color: #f9f9f9;
	text-align: left;
}
th:last-of-type,
td:last-of-type {
/*	display: none;*/
}

/* pagination */
.pagination {
    margin: 4rem 0 0;
}
.pagination:after, .pagination ul:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.pagination ul {
    margin: 0;
}
.pagination li {
    float: left;
    list-style: none outside none;
    margin-left: 3px;
	padding: 0;
	border: none !important;
}
.pagination li:first-child {
    margin-left: 0;
}
.pagination li.active {
    background-color: #197d8c;
    color: #fff;
    padding: .8rem 1.5rem !important;
}
.pagination li a {
  border: 1px solid #197d8c;
    background: transparent;
    color: #197d8c;
    display: block;
    padding: .8rem 1.5rem !important;
    text-decoration: none !important;
}
.pagination li a:hover {
    background-color: #197d8c;
    color: #fff !important;
    opacity: 0.8;
    transition-duration: 500ms;
    transition-property: all;
    transition-timing-function: ease;
}


#pageTop {
	position: fixed;
	z-index: 2;
	right: 2rem;
	bottom: 3.5rem;
	width: 40px;
	height: 40px;
	background: #197d8c url(./img/page_top_arrow.png) center no-repeat;
	cursor: pointer;
	opacity: 0;
	transition: all 0.3s ease-in-out;
}
#pageTop:hover {
	background: #3aa0af url(./img/page_top_arrow.png) center -2px no-repeat;
}

#footer {
	height: 3.5rem;
	text-align: center;
	font-size: 1.3rem;
	line-height: 3.5rem;
}

/** respond **/
/* =============================================== */
@media (max-width: 1200px) {
}
@media (max-width: 1000px) {
}
@media (max-width: 768px) {

html {
	font-size: 58%;
}

}
@media (max-width: 560px) {

html {
	font-size: 54%;
}
#header {
  	height: 45px;
}
#header ul li a {
	height: 45px;
	line-height: 45px;
}
#header ul li a > img {
	width: 95%;
	height: auto;
}
article {
	display: block;
	width: 97%;
}
article > section:first-of-type {
	width: 100%;
	padding-right:0;
	border-right: 0px solid #ddd;
}
article > section:last-of-type {
	width: 100%;
}

.entry_list > li {
	width: 47.5%;
	position: relative;
	margin-bottom: 1rem;
}
.entry_list > li:nth-of-type(2n) {
	margin-left: 5%;
}

.entry .next_link {
	display: block;
	height: auto;
	margin: 5rem 0;
	padding: 10px 0;
	border-top: 3px solid #ddd;
}
.entry .next_link > div {
	display: block;
	position: relative;
	width: 100%;
}
.entry .next_link > div:first-of-type {
	padding: 0 12px 10px 0;
	border-right: none;
}
.entry .next_link > div:last-of-type {
	padding: 10px 0 0 12px;
	border-top: 3px solid #ddd;
}

}
@media (max-width: 400px) {
}