@charset "UTF-8";
@import url(../font/NotoSerifCJKjp/load.css);

/*
メインカラー
#222

サブカラー
#222

アクセントカラー
#fda317

黒
#222

グレー
#aaaaaa
#e6e6e6
#f3f3f3
#f9f9f9
*/

html {
	font-size: calc(11px + 1vw);
}

body {
	color: #333;
	line-height: 1.7;
	font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-family: "NotoSerifCJKjp", "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
}

/*==================================================
 汎用クラス
================================================== */
/* 整列
-------------------------------------------------- */
.align-right {
	text-align: right;
}

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

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

/* フォント
-------------------------------------------------- */
.weight-bold {
	font-weight: bold;
}

/* クリア
-------------------------------------------------- */
.clear {
	clear: both;
}

.clearfix:after {
	content: " ";
	display: block;
	clear: both;
}

/* 改行
-------------------------------------------------- */
@media screen and (min-width: 768px) {
	.app-br {
		display: block;
	}
}

@media screen and (max-width: 768px) {
	.app-br {
		display: none;
	}
}


/* 画像トリミング
-------------------------------------------------- */
.trim {
	padding: 100% 0 0;
	display: block;
	overflow: hidden;
	position: relative;
}

.trim-gold {
	padding: 61.80% 0 0;
}

.trim-silver {
	padding: 70.711% 0 0;
}

.trim img,
.trim img.horizontal {
	width: auto;
	max-width: none;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.trim img.vertical {
	width: 100%;
	height: auto;
}

/*==================================================
 タグ
================================================== */
/* img
-------------------------------------------------- */
img {
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
}

/* a
-------------------------------------------------- */
a {
	color: #6e2b07;
	text-decoration: none;
	transition: All 0.4s ease;
}

a:hover {
	color: #26b99a;
	text-decoration: underline;
}

a img {
	transition: All 0.4s ease;
}

a:hover > img:only-child {
	opacity: .8;
}

@media screen and (min-width: 768px) {
	a[href^="tel:"] {
		color: inherit;
		text-decoration: none;
		pointer-events: none;
	}
}


/*==================================================
 テーブル
================================================== */
/* スタイル1
-------------------------------------------------- */
.styled-table01 {
	width: 100%;
	margin: 20px 0;
	line-height: 1.7;
}

.styled-table01:first-child {
	margin-top: 0;
}

.styled-table01 th,
.styled-table01 td {
	padding: 12px;
	vertical-align: top;
	border: 1px solid #ddd;
	background: #fff;
}

.styled-table01 th {
	width: 35%;
	font-weight: normal;
	background: #f7f7f7;
}

.styled-table01 thead th {
	background: #e6e6e6;
}

.styled-table01 caption {
	text-align: center;
	font-size: 20px;
}

/* リスト
-------------------------------------------------- */
.styled-list01 li {
	margin: 0 0 4px;
	padding: 0 0 0 20px;
	background: url(../images/common/icon_arrow04.png) left center no-repeat;
}

/* その他オプション
-------------------------------------------------- */
/* セルの横幅を均等にする
------------------------- */
.cell-width-fix {
	table-layout: fixed;
}

.cell-width-fix th,
.cell-width-fix td {
	width: auto;
}


/* セルの横幅を指定しない
------------------------- */
.cell-width-fazzy th,
.cell-width-fazzy td {
	width: auto;
}


/* 縦向き
------------------------- */
.direction-vertical,
.direction-vertical thead,
.direction-vertical tbody,
.direction-vertical tfoot,
.direction-vertical tr,
.direction-vertical th,
.direction-vertical td {
	width: auto;
	display: block;
}


/* 大きいサイズのテーブルはスマホではスクロールさせる
------------------------- */
@media screen and (max-width: 768px) {
	.scroll-table-wrap {
		overflow-x: scroll;
	}

	.scroll-table-wrap table {
		width: 700px;
		margin: 0;
	}
}

/*==================================================
 dl
================================================== */
.styled-dl01 {
	margin: 0 0 3em;
}

.styled-dl01:last-child {
	margin-bottom: 0;
}

.styled-dl01 dt {
	margin: 0 0 .7em;
	font-size: 1.3rem;
}

.styled-dl01 dd {
	margin: 0 0 1.5em;
	padding: 0 0 1.5em;
	border-bottom: 1px dotted #ddd;
}

/*==================================================
 パンくずリスト
================================================== */
.breadcrumbs-list {
	height: 25px;
	line-height: 25px;
	margin: 0 0 16px;
	font-size: 0;
	letter-spacing: 0;
	overflow: hidden;
	white-space: nowrap;
}

.breadcrumbs-list li {
	font-size: 14px;
	display: inline;
}

.breadcrumbs-list a {
	background: url(../images/common/icon_arrow03.png) right center no-repeat;
	margin: 0 7px 0 0;
	padding: 0 10px 0 0;
}

/*==================================================
 ページネーション
================================================== */
.pagenation {
	margin: 0 0 20px;
	text-align: center;
	color: #999;
	font-size: 0;
	letter-spacing: 0;
}

.pagenation li {
	width: 26px;
	margin: 0 2px;
	line-height: 30px;
	color: #999;
	font-size: 13px;
	background: #aaa;
	display: inline-block;
}

.pagenation li > * {
	color: #fff;
	text-decoration: none;
	display: block;
}

.pagenation li:hover,
.pagenation li.current {
	background: #222;
}

/*==================================================
 ヘッダー
================================================== */
.page-header {
	border-top: 4px solid #222;
}

/* ロゴ
-------------------------------------------------- */
.header-logo {
	padding: 16px;
	text-align: center;
}

/* メインビジュアル
-------------------------------------------------- */
.header-main-visual {
	padding: 1rem 8px;
	line-height: 1.4;
	text-align: center;
	color: #fff;
	background: url(../images/common/header_visual_bg.jpg) center / cover;
}

.header-main-visual p:not(:last-child) {
	margin-bottom: 1rem;
}

.header-main-visual .big {
	line-height: 1.2;
	font-size: 1.5rem;
	font-weight: bold;
}

.header-main-visual .visual-btn {
	margin: 0 auto;
	padding: 1em 2em;
	color: #fff;
	border: 1px solid #fff;
	background: #222;
	display: table;
}

/* サブビジュアル
-------------------------------------------------- */
.header-sub-visual {
	padding: 60px 8px;
	line-height: 1.2;
	text-align: center;
	color: #fff;
	font-size: 1.5em;
	font-weight: bold;
	background: url(../images/common/header_visual_bg.jpg) center / cover;
}


/*==================================================
 フッター
================================================== */
.page-top {
	padding: .5rem;
	text-align: center;
	background: #eee;
}

.footer-inner {
	padding: 1rem .5rem;
	background: #919191;
}

/* 問い合わせ
-------------------------------------------------- */
.footer-contacts {
	padding: .5rem;
}

.footer-contacts li:not(:last-child) {
	margin: 0 0 .5rem;
}

.footer-contacts a {
	padding: .4em;
	text-align: center;
	color: #222;
	font-size: 1.2em;
	border: 1px solid #222;
	background: url(../images/common/icon_arrow01.png) left 4px center no-repeat;
	display: block;
}

/* ロゴ
-------------------------------------------------- */
.footer-logo {
	margin: 0 0 1rem;
	text-align: center;
}

/* ナビ
-------------------------------------------------- */
.footer-nav {
	margin: 0 0 16px;
}

.footer-nav ul {
	display: flex;
	flex-wrap: wrap;
}

.footer-nav li {
	width: calc((100% - 8px) / 2);
	margin: 0 8px 0 0;
	padding: 0 0 0 15px;
	border-bottom: 1px dotted #fff;
	background: url(../images/common/icon_arrow03_white.png) left center no-repeat;
	box-sizing: border-box;
}

.footer-nav li:nth-child(2n) {
	margin-right: 0;
}

.footer-nav a {
	height: 40px;
	line-height: 1.2;
	color: #fff;
	display: flex;
	align-items: center;
}

/* コピーライト
-------------------------------------------------- */
.footer-copyright {
	padding: .4em;
	line-height: 1.2;
	color: #fff;
	font-size: .9em;
	text-align: center;
	display: block;
}

.footer-copyright a {
	color: inherit;
}

/*==================================================
 サイドバー
================================================== */
/* メニュー
-------------------------------------------------- */
.side-toggle-btn {
	position: fixed;
	top: 30px;
	left: 0;
	pointer-events: none;
	opacity: 0;
	transition: All 0.4s ease;
}

.side-toggle-btn.view {
	pointer-events: auto;
	opacity: 1;
}

@media screen and (min-width: 768px) {
	.side-toggle-btn {
		display: none;
	}
}


/*==================================================
 コンテンツ
================================================== */
.page-body {
	padding: 8px;
}

.page-body-main {
}

/* セクション
-------------------------------------------------- */
.section {
	margin: 0 0 32px;
}

.section-content:after {
	content: " ";
	display: block;
	clear: both;
}

.section-content ~ .section-content {
	margin-top: 2em;
}

.section-footer {
	padding: 24px 0 0;
	clear: both;
}

/* 見出し
------------------------- */
/* 01 */
.styled-title01 {
	margin: 0 0 1em;
	padding: .5em;
	line-height: 1.2;
	text-align: center;
	font-size: 1.3rem;
	border-radius: 16px;
	background: #eee;
}

.styled-title01 span {
	font-size: 1.7rem;
	display: block;
}

/* 02 */
.styled-title02 {
	margin: 0 0 1em;
	padding: .5em;
	line-height: 1.2;
	text-align: center;
	font-size: 1.3rem;
	border: 1px solid #222;
}

/* 03 */
.styled-title03 {
	margin: 0 0 1em;
	padding: .5em;
	line-height: 1.2;
	font-size: 1.3rem;
	border-left: 4px solid #222;
}

/* 04 */
.styled-title04 {
	margin: 0 0 1em;
	padding: .5em;
	text-align: center;
	line-height: 1.2;
	color: #fff;
	font-size: 1.3rem;
}

.styled-title04 span {
	padding: .2em;
	font-size: .7em;
	display: block;
}

/* 05 */
.styled-title05 {
	margin: 0 0 1em;
	padding: .5em;
	text-align: center;
	line-height: 1.2;
	font-size: 1.3rem;
	border-bottom: 2px solid #222;
}

/* 06 */
.styled-title06 {
	margin: 0 0 1em;
	padding: .5em;
	text-align: center;
	line-height: 1.2;
	font-size: 1.3rem;
}

.styled-title06 span {
	font-size: .7em;
	display: block;
}

/* 記事アイキャッチ
------------------------- */
.section-eyecatch-right {
	max-width: 40%;
	margin: 0 0 8px 8px;
	float: right;
}

.section-eyecatch-left {
	max-width: 40%;
	margin: 0 8px 8px 0;
	float: left;
}

.section-eyecatch-center {
	margin: 0 auto 8px;
	display: block;
}

/* 記事情報
------------------------- */
.post-info-wrap {
	margin: 0 0 16px;
	overflow: hidden;
}

.post-info-wrap .post-info-item {
	margin: 0 15px 0 0;
	padding: 0 0 0 20px;
	background: left top 4px no-repeat;
	float: left;
}

.post-info-wrap .post-info-item-date {
	background-image: url(../images/common/icon_calendar.png);
}

.post-info-wrap .post-info-item-tag {
	background-image: url(../images/common/icon_tag.png);
}

/* タグリスト */
.post-tag-list {
	overflow: hidden;
}

.post-tag-list li {
	margin: 0 5px 0 0;
	float: left;
}

.post-tag-list li:not(:last-child):after {
	content: ',';
}

/* SNSシェアボタン
------------------------- */
.share-btn-list {
	margin: 0 0 16px;
	text-align: right;
	font-size: 0;
	letter-spacing: 0;
	overflow: hidden;
}

.share-btn-list li {
	margin: 0 0 0 8px;
	vertical-align: top;
	display: inline-block;
}

/* 詳細ページ用　前後の記事
------------------------- */
.prev-next-post {
	overflow: hidden;
}

.prev-next-post .prev-post,
.prev-next-post .next-post {
	margin: 0 0 8px;
	border: 1px solid #e6e6e6;
	box-sizing: border-box;
}

.prev-next-post a {
	padding: 0 20px;
	line-height: 40px;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
	overflow: hidden;
}

.prev-next-post .prev-post a {
	padding-left: 47px;
	background: url(../images/common/icon_arrow02.png) left 20px center no-repeat;
}

.prev-next-post .next-post a {
	padding-right: 47px;
	background: url(../images/common/icon_arrow01.png) right 20px center no-repeat;
}

.prev-next-post a:hover {
	text-decoration: none;
	background-color: #fafafa;
}

/* その他
-------------------------------------------------- */
/* 投稿日 */
.post-date {
	margin: 0 0 15px;
	padding: 1px 0 0 12px;
	font-size: 13px;
	background: url(../images/common/icon_arrow03.png) left center no-repeat;
	display: block;
}

/* テキストボタン */
.text-btn {
}

.text-btn a {
	padding: 1em .5em;
	line-height: 1.4;
	text-align: center;
	color: #fff;
	font-size: 1.1em;
	letter-spacing: 0;
	background:
		url(../images/common/icon_arrow01_white.png) right 8px center no-repeat,
		linear-gradient(#2f2f2f, #222)
	;
	box-shadow: 0 2px 2px rgba(0,0,0,.2);
	display: block;
}



/*==================================================
 記事リスト
================================================== */
/* 01
-------------------------------------------------- */
.styped-post-list01 li {
	width: 100%;
	line-height: 40px;
	white-space: nowrap;
	text-overflow: ellipsis;
	border-bottom: 1px solid #e6e6e6;
	overflow: hidden;
}

.styped-post-list01 span {
	margin-right: 8px;
}

/* 02
-------------------------------------------------- */
.styped-post-list02 {
	display: flex;
	flex-wrap: wrap;
}

.styped-post-list02 li {
	width: calc((100% -  8px) / 2);
	margin: 0 8px 8px 0;
}

.styped-post-list02 li:nth-child(2n) {
	margin-right: 0;
}


/*==================================================
 サイトマップ
================================================== */
.sitemap-list li:not(:last-child) {
	border-bottom: 1px solid #aaa;
}

.sitemap-list p {
	padding: .3em 0 0 20px;
	font-size: 1.1em;
	font-weight: bold;
	background: url(../images/common/icon_arrow01.png) left 5px center no-repeat;
}

.sitemap-list ul {
	padding: 0 0 0 1em;
}

.sitemap-list a {
	padding: 0 0 0 20px;
	line-height: 45px;
	color: inherit;
	background: url(../images/common/icon_arrow01.png) left 5px center no-repeat;
	display: block;
}

/*==================================================
 いい家　リード
================================================== */
.iiie-lead-secttion {
	padding: 16px;
	line-height: 2;
	text-align: center;
	background: url(../images/iiie/iiie01-bg.jpg) center / cover;
}

.iiie-lead-secttion .lead-catch {
	margin: 0 0 2em;
	font-weight: bold;
}

/*==================================================
 家の形背景
================================================== */
.house-area {
	margin-top: 57px;
	background: #eee;
	position: relative;
}

.house-area:before {
	content: '';
	border: 0 solid #fff;
	border-width: 0 calc((100vw - 16px) / 2) 25px;
	border-bottom-color: #eee;
	background: #f09;
	display: block;
	position: absolute;
	top: -25px;
	left: 0;
}

/*==================================================
 youtube iframe
================================================== */
.youtube-wrap {
}

.youtube-inner {
	position: relative;
	padding: 0 0 62.5%;
}

.youtube-wrap iframe {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

/*==================================================
 チェックリスト
================================================== */
.check-list li {
	padding: .2em 0 .2em 18px;
	border-bottom: 1px dashed #dfdfdf;
	position: relative;
}

.check-list li:after {
	content: '';
	width: 8px;
	height: 8px;
	border: 1px solid #dfdfdf;
	display: block;
	position: absolute;
	top: .6em;
	left: 0;
}

/*==================================================
 方針リスト
================================================== */
.guideline-list dt {
	font-size: 1.2rem;
	font-weight: bold;
}

.guideline-list dd:not(:last-child) {
	margin: 0 0 2em;
}

/*==================================================
 企画型住宅「育つ家」
================================================== */
/* リード
-------------------------------------------------- */
.sodatsu-lead {
	margin: 0 0 32px;
	padding: 2em 1em;
	line-height: 2;
	text-align: center;
	font-size: 1.2rem;
	background: url(../images/sodatsu/sodatsu-bg.jpg) center / cover;
}

/*==================================================
 会社概要
================================================== */
/* 会社沿革
-------------------------------------------------- */
.history-list dt {
	margin: ;
	font-size: 1.2;
	font-weight: bold;
}

.history-list dd {
	margin: 0 0 .75em;
	padding: 0 0 .75em;
	border-bottom: 1px dashed #ccc;
}