@charset "utf-8";
@import url("globals.css");

/* --- 7. 内部ページ用のスタイル --- */
.page-header {
	display: grid;
	place-items: center;
	height: 200px;
	position: relative;
	margin-top: -80px;
}
.page-title {
	font-size: 36px;
	font-weight: 400;
	font-family: 'Zen Old Mincho', serif;
	position: absolute;
	left: 50%;
  top: 50%;
  padding-top: 80px;
	transform: translate(-50%, -50%);
	z-index: 20;
}
.page-header-img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}
.page-header-img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Breadcrumb */
#breadcrumb{
	background-color: #f6f4f4; /* var(--wild-sand) */
	padding: 15px 5%;
	font-size: 14px;
}
#breadcrumb ol{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	justify-content: flex-end;
	width: 97%;
	margin: auto;
}
#breadcrumb ol li:after{
	content: ">";
	display: inline-block;
	vertical-align: middle;
	margin: 0 .5em;
	padding: 0;
	color: #999;
}
#breadcrumb ol li:last-child:after{
	content: "";
	margin-right: 0;
}
#breadcrumb ol li a{
	color: #222222;
	text-decoration: none;
}
.main-content {
	max-width: 900px;
	margin: 0 auto;
	padding: 60px 5%;
}
/* ダミーコンテンツ用のスタイル */
.content-block h2 {
	font-size: 1.8rem;
	font-weight: 600;
	margin-bottom: 1.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid #eee;
}
.content-block p {
	margin-bottom: 1.5rem;
	line-height: 1.8;
}
.content-block img {
	margin: 2rem 0;
}

/* ===== Buttons ===== */
.btn-more,
.btn-more-view{
	text-align: center;
	margin: 2em 0;
}
.btn-more a,
.btn-more-view a{
    display: inline-block;
    transition: all 0.3s ease;
	position: relative;
	padding-right: 60px;
	font-family: 'Zen Old Mincho', serif;
    font-size: 16px;
    font-weight: 500;
    color: #000;
	text-decoration: none;
}

.btn-more a:hover,
.btn-more-view a:hover {
    transform: translateX(5px);
}
.btn-more a:after,
.btn-more-view a:after{
	content: "";
	height: 1px;
	width: 50px;
	background: #000;
	position: absolute;
	right: 0;
	top: 50%;
}

/*コンテンツ用
************************************************************************************/
/*.bg-blur {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -1;
    transition: filter 0.4s;
    filter: blur(0px);
    pointer-events: none;
}
body#page_about{
	background: url('../img/bg/about.jpg') no-repeat center center fixed;
	background-size: cover;
}
body#page_about .bg-blur{
	background: url('../img/bg/about.jpg') no-repeat center center fixed;
	background-size: cover;
}
body#page_service{
	background: url('../img/bg/service.jpg') no-repeat center center fixed;
	background-size: cover;
}
body#page_service .bg-blur{
	background: url('../img/bg/service.jpg') no-repeat center center fixed;
	background-size: cover;
}
body#page_works,
body#page_result{
	background: url('../img/bg/works.jpg') no-repeat center center fixed;
	background-size: cover;
}
body#page_works .bg-blur,
body#page_result .bg-blur{
	background: url('../img/bg/works.jpg') no-repeat center center fixed;
	background-size: cover;
}
body#page_news,
body#page_column{
	background: url('../img/bg/news.jpg') no-repeat center center fixed;
	background-size: cover;
}
body#page_news .bg-blur,
body#page_column .bg-blur{
	background: url('../img/bg/news.jpg') no-repeat center center fixed;
	background-size: cover;
}
body#page_products{
	background: url('../img/bg/products.jpg') no-repeat center center fixed;
	background-size: cover;
}
body#page_products .bg-blur{
	background: url('../img/bg/products.jpg') no-repeat center center fixed;
	background-size: cover;
}
body#page_brand{
	background: url('../img/bg/brand.jpg') no-repeat center center fixed;
	background-size: cover;
}
body#page_brand .bg-blur{
	background: url('../img/bg/brand.jpg') no-repeat center center fixed;
	background-size: cover;
}


body#page_about .post-content h1,
body#page_about .post-content h2,
body#page_about .post-content h3,
body#page_about .post-content h4{
	color: #FFF;
}
body#page_about .post-content h1:before,
body#page_about .post-content h1:after,
body#page_about .post-content h2:before,
body#page_about .post-content h2:after,
body#page_about .post-content h3:before{
	background-color: #FFF;
}
body#page_about .post-content h1.black{
	color: #000;
}
body#page_about .post-content h1.black:before,
body#page_about .post-content h1.black:after{
	background-color: #000;
}*/