@charset "UTF-8";
/*!
Skin Name: ベーシック - チャコールグレー
Skin URI: https://www.xserver.ne.jp/
Author: XSERVER Inc.
Author URI: https://www.xserver.ne.jp/
Description: ベーシックなブログのデザインスキンです。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.txt
Text Domain: xwrite
*/
:root {
	--key-color: #3b342c;
	--txt-color: #333333;
	--link-color: #666666;
	--background-color: #ddd7d7;
	--headtxt-color: #ffffff;
	--headnav-color: #ffffff;
	--footbg-color: #3b342c;
	--foottxt-color: #ffffff;
}

.contents > .container {
	padding: 40px;
	background: #fff;
	--background-color: #fff;
}

.contents {
	margin: 0;
	background: none;
}

.contents > .adsArea {
	background: #fff;
}

.articleList .articleList__item .article-category .list-label {
	padding: 0;
	background: none;
	font-size: 1.1rem;
	color: #7f8489;
}


.articleList .articleList__item .article-category .list-label:before {
	position: unset;
	display: inline-block;
	width: 10px;
	font-weight: 900;
	text-align: left;
	font-family: "Font Awesome 5 Free";
	content: "\f07b";
}

.articleList .articleList__item .article-category .list-label a {
	color: var(--link-color);
}

.header {
	background-color: transparent;
}

.header .container {
	padding: 0;
	background: #fff;
}

.header .headerImage {
	min-height: 250px;
}

.header .headerImage img {
	width: 100%;
	height: auto;
}

.header .headerInfo {
	display: block;
	padding: 0;
}

.header .siteInfo {
	padding: 60px;
	color: var(--headtxt-color);
	background-color: var(--headbg-color);
}

.header .siteInfo__logo {
	font-size: 4rem;
	line-height: 1.4;
}

.header .siteInfo__logo a {
	color: var(--headtxt-color);
}

.header .headerImage + .siteInfo {
	position: absolute;
	bottom: 100px;
	left: 60px;
	background-color: transparent;
}

.headerDesc {
	background: none;
	color: #fff;
}

.header .gnav {
	background: url(./images/bg_pattern_4x4.png) var(--key-color) repeat 0 0;
	text-align: center;
}

.header .nav__drawers {
	margin: 0 auto;
}

.footer {
	padding: 0;
	background: none;
}

.header-notice {
	margin: 0 auto;
	max-width: calc(100% - 3vw);
}

.side .profile {
	width: auto;
	padding: 0;
	border: none;
}

.mainVisual {
	display: none;
}

.articleHeader__title {
	border-bottom: 1px solid #ccc;
}

.articleHeader__info--type {
	margin: 0 auto 0 0;
}

.contentsHeader {
	padding: 0 0 10px;
	border-top: none;
	border-bottom: 1px solid #ccc;
	background: none;
}

.adsArea .container {
	background: #fff;
}

.breadcrumbs_wrapper .container {
	background: #fff;
}

.page-top-breadcrumbs, .page-bottom-breadcrumbs{
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 40px;
}

.page-top-breadcrumbs:not(.show-background), .page-bottom-breadcrumbs:not(.show-background) {
	background-color: #fff;
}

@media (min-width: 992px) {
	.widgetSearch input {
		font-size: 1.2rem;
	}

	.header {
		font-size: 1.2rem;
	}

	.header .gnav {
		color: #fff;
	}

	.header .gNavList > li:first-child {
		margin-right: 20px;
	}

	.header .gNavList > li {
		margin: 0 20px;
		padding: 13px 0;
		letter-spacing: 2px;
	}
}

@media (max-width: 1260px) {
	.page-top-breadcrumbs, .page-bottom-breadcrumbs{
		max-width: calc(100% - 3vw);
	}
}

@media (max-width: 991.98px) {
	.header-notice {
		max-width: calc(100% - 5vw);
	}

	.header .headerImage {
		min-height: 100px;
	}

	.header .headerInfo {
		display: flex;
		flex-direction: column;
		padding: 0;
		align-items: flex-start;
	}

	.header .siteInfo {
		padding: 20px;
		bottom: auto;
	}

	.header .siteInfo__logo {
		font-size: 2.4rem;
	}

	.header .headerImage + .siteInfo {
		top: 15px;
		left: 15px;
	}

	.headerDesc {
		display: none;
	}

	.contentsHeader__caption {
		font-size: 1.8rem;
	}

	.widget-area .widget {
		padding: 0;
	}

	.footer .container .col {
		padding: 0 40px;
	}

	.page-top-breadcrumbs, .page-bottom-breadcrumbs{
		max-width: calc(100% - 5vw);
	}
}

@media (max-width: 575.98px) {
	.contents > .container {
		padding: 20px;
	}
	.footer .container .col {
		padding: 0 20px;
	}
	.articleHeader__title {
		font-size: 2.2rem;
	}
	.footer .siteNavList {
		margin: 20px 5px 0;
	}

	.page-bottom-breadcrumbs + .footer .siteNavList {
		margin-top: 0;
	}

	.page-top-breadcrumbs, .page-bottom-breadcrumbs{
		padding-left: 20px;
	}
}

@media (min-width: 1200px) {
	.header-notice {
		max-width: 1200px;
	}
}