@charset "utf-8";

/* ------------------------------------------------------------

   京の匠　ホーム

------------------------------------------------------------ */
.takumi-home .t-home-lead {
	padding: 1.5em 0;
	font-size: 15px;
	line-height: 1.8;
}
/*掲載会社一覧*/
.takumi-home .tc-list {
	border-top: 1px solid #ddd;
}
.takumi-home .tc-list li {
	border-bottom: 1px solid #ddd;
}
.takumi-home .tc-list li a {
	display: block;
	padding: 20px 0;
}
.takumi-home .tc-list li .tc-list-cont {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
}
.takumi-home .tc-list li .tc-list-cont .tc-pht {
	width: 40%;
}
.takumi-home .tc-list li .tc-list-cont .tc-txt {
	width: 56%;
}

.takumi-home .tc-list li .tc-list-cont .tc-txt h3 {
	position: relative;
	display: inline-block;
	font-size: 15px;
	margin-bottom: .25em;
	color: #008d32;
}
.takumi-home .tc-list li .tc-list-cont .tc-txt .tc-lead {
	font-size: 16px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.takumi-home .tc-list li .tc-list-cont .tc-pht.pht-tate,
.takumi-home .tc-list li:nth-of-type(2) .tc-list-cont .tc-pht,
.takumi-home .tc-list li:nth-of-type(5) .tc-list-cont .tc-pht {
	text-align: center;
	background-color: #f5f5f5;
}
.takumi-home .tc-list li .tc-list-cont .tc-pht.pht-tate img,
.takumi-home .tc-list li:nth-of-type(2) .tc-list-cont .tc-pht img {
	width: 75%;
}

@media screen and (min-width: 40em) {
	.takumi-home .t-home-lead {
	font-size: 18px;
	padding: 40px 0;
	text-align: center;
}

/*掲載会社一覧*/
	.takumi-home .tc-list li a {
	padding: 50px 40px;
}
	.takumi-home .tc-list li .tc-list-cont .tc-txt h3 {
	font-size: 18px;
	margin-bottom: .5em;
}
	.takumi-home .tc-list li .tc-list-cont .tc-txt .tc-lead {
	font-size: 32px;
}
	.takumi-home .tc-list li .tc-list-cont .tc-txt .tc-lead span {
	display: block;
}

}


/* ------------------------------------------------------------

   京の匠　下層

------------------------------------------------------------ */
/*共通*/
.takumi-wrap {
	margin-bottom: 50px;
	padding-top: 15px;
}
.takumi-wrap section {
	margin: 30px 0 30px;
}
/*本文*/
.takumi-wrap .txt {
	line-height: 1.8;
}
.takumi-wrap .txt:not(:last-of-type) {
	padding-bottom: 1em;
}
/*ジャンルタイトル*/
.genre-ttl img {
	width: auto;
	height: 25px;
}

/*京の匠バナー*/
.t-ttlbnr {
	text-align: center;
	background-color: #ccc;
}

/*タイトル*/
.t-ttl {
	padding-top: 20px;
	border-bottom: 1px solid #333;
}
.t-ttl-icon {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
}
.t-ttl-icon h2 {
	background-color: #008d32;
    color: #fff;
	font-size: 15px;
    line-height: 30px;
    text-align: center;
    display: inline-block;
    padding: 0 15px;
	height: 30px;
}
.t-ttl-icon .cate {
	background-color: #333;
    text-align: center;
    display: inline-block;
    padding: 0 15px;
	height: 30px;
}
.t-ttl-icon .cate img {
	height: 15px;
}
.t-ttl .t-lead {
    font-size: 22px;
    padding-top: 10px;
	padding-bottom: 10px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.t-ttl .t-lead span:last-of-type {
    display: block;
}

/*インタビュー*/
.t-interview {
	border: 3px solid #8dc556;
	padding: 20px;
	position: relative;
}
.t-interview::before,
.t-interview::after {
	content: "";
	display: block;
	position: absolute;
	background-color: #8dc556;
	width: 2px;
	height: 40px;
	transform: rotate(45deg);
}
.t-interview::before {
	top: -13px;
	left: 6px;
}
.t-interview::after {
	bottom: -13px;
	right: 6px;
}
.t-interview .int-ttlwrap {
	border-bottom: 2px dotted #8dc556;
	padding-bottom: .5em;
	margin-bottom: 1em;
}
.t-interview .ttl-int {
	font-size: 18px;
	font-weight: bold;
}
.t-interview .t-name {
	font-size: 13px;
	font-weight: bold;
}
.t-interview .t-name dt,
.t-interview .t-name dd {
	display: inline-block;
}
.t-interview .t-name strong {
	font-size: 1.1em;
	padding-left: .5em;
}
.t-interview .txt {
	font-size: 15px;
}
.t-interview .int-phtwrap {
	margin: 20px auto 20px;
}
.t-interview .int-phtwrap .pht-tate {
	width: 70%;
	margin: auto;
}

/*本文*/
.t-article {
	padding: 0 2%;
}
.t-article h3 {
	font-size: 18px;
	padding-bottom: .5em;
}
.t-article h4 {
	font-size: 16px;
	padding-bottom: .5em;
}
.t-article .txt {
	font-size: 15px;
}
.t-article .txt:not(:last-of-type) {
	padding-bottom: 1.5em;
}

/*施工事例*/
.works .t-plist {
	padding: 0 20px;
}
.works li {
	border-bottom: 1px solid #ddd;
	padding: 20px 0;
}
.works li:first-of-type {
	border-top: 1px solid #ddd;
}
.works li figure {
	text-align: center;
	background: #f5f5f5;
	margin-bottom: 0;
}
.works li figure.pht-tate img {
	width: 75%;
}
.works li dt {
	font-size: 16px;
	font-weight: bold;
	padding: 1em 0 .25em;
}
.works li dd {
	font-size: 14px;
	line-height: 1.8;
}

.works-waku {
	border: 5px solid #ebf4e0;
}
.works-waku li {
	border-bottom: 1px solid #ddd;
}
.works-waku li:first-of-type {
	border-top: none;
}
.works-waku li:last-of-type {
	border-bottom: none;
}

/*インタビューの中のWorks*/
.t-interview .works {
    margin: 20px 0 0;
}
.t-interview .works .t-plist {
    padding: 0;
}
.t-interview .works .t-plist li:last-of-type {
    border-bottom: none;
	padding-bottom: 0;
}

/*トピックス*/
.topics {
	border: 3px solid #8dc556;
	border-radius: 0 20px 0 0;
	position: relative;
	padding: 35px 20px 20px;
}
.topics h3 {
	display: inline-block;
	background-color: #008D31;
	padding: 4px 15px 8px;
	position: absolute;
	top: -3px;
	left: -3px;
}
.topics .genre-ttl img {
	height: 20px;
}
.topics .ttl-topics {
	font-weight: bold;
	font-size: 16px;
	padding-bottom: .25em;
}
.topics .ttl-topics2 {
	border-top: 2px dotted #8dc556;
	border-bottom: 2px dotted #8dc556;
	font-weight: bold;
	padding: .5em 0;
	margin-top: 1em;
	margin-bottom: 1em;
}
.topics .txt {
	font-size: 14px;
}
.topics .add {
	font-size: .84em;
}
.topics .topics-img {
	padding: 20px 0 25px;
}
.topics .topics-img figure {
	margin-bottom: 0;
}
.topics .topics-img img:nth-of-type(2) {
	margin-top: 10px;
}
.topics .btn-hp a {
	border: 1px solid #8dc556;
	color: #8dc556;
	font-weight: bold;
	text-align: center;
	padding: .5em 0;
	display: block;
}
.topics .btn_arrow a::after {
	border-top: 1px solid #8dc556;
    border-right: 1px solid #8dc556;
}
.topics .btn-hp a:hover {
	background-color: #8dc556;
	color: #fff;
	opacity: 1;
}
.topics .btn_arrow a:hover::after {
	border-top: 1px solid #fff;
    border-right: 1px solid #fff;
}
/*トピックス写真2点パターン*/
.topics-img2 .topics-img {
	padding-bottom: 0;
}
.topics-img2 .topics-txt {
	padding-top: 10px;
}

/*会社データ*/
.t-data {
	/*border-left: 5px solid #333;
	padding-left: 1em;*/
	background-color: #f5f5f5;
	padding: 20px;
}
.t-data h3 {
	font-size: 17px;
	padding-bottom: 3px;
}
.t-data .t-tel {
	font-size: 15px;
}
.t-data ul {
	font-size: 12px;
}
.t-data ul li {
	padding-top: 1px;
}
.t-data ul li a {
	text-decoration: underline;
}

/*新築・リフォームリンク*/
.t-link li:nth-of-type(2) {
	margin-top: 15px;
}
.t-link a {
	display: block;
    color: #fff;
	border-radius: 5px;
	padding: 20px 0;
	font-weight: bold;
	font-size: 16px;
	text-align: center;
}
.t-link .new-link a {
    background-color: #7fbe25;
	box-shadow: 0 3px #628e23;
}
.t-link .reform-link a {
    background-color: #ee849f;
	box-shadow: 0 3px #c4667d;
}
/*TOPへ戻る*/
.bk-top {
    text-align: center;
	font-size: 15px;
	padding-top: 20px;
	margin-top: 20px;
}
.bk-top a {
	font-weight: bold;
	border: 1px solid #333;
	border-radius: 100px;
	padding: 1.2em 3em;
}
.bk-top a:hover {
	background-color: #333;
	color: #fff;
	border: none;
	opacity: 1;
}

@media screen and (min-width: 40em) {
/*共通*/
	.takumi-wrap {
	padding: 40px 0px 0;
	margin-bottom: 0;
}
	.takumi-inner {
	padding: 0 30px;
	}
	.takumi-wrap section {
	margin: 60px 0px;
}
	.takumi-wrap .txt {
	line-height: 2;
}
/*ジャンルタイトル*/
	.genre-ttl img {
	width: auto;
	height: 35px;
}


/*京の匠バナー*/
	.t-ttlbnr {
}

/*タイトル*/
	.t-ttl {
	padding: 60px 0px 5px;
}
	.t-ttl-icon h2 {
	font-size: 17px;
    line-height: 32px;
	height: 32px;
}
	.t-ttl-icon .cate {
    padding: 0 15px;
	height: 32px;
}
	.t-ttl-icon .cate img {
	height: 17px;
}
	.t-ttl .t-lead {
    font-size: 36px;
}

/*インタビュー*/
	.t-interview {
	padding: 50px;
}
	.t-interview::before,
	.t-interview::after {
	height: 80px;
}
	.t-interview::before {
	top: -23px;
	left: 15px;
}
	.t-interview::after {
	bottom: -23px;
	right: 16px;
}
/* インタビューのgrid指定、当初縦長写真の場合 */
	.t-interview .grid {
	display: grid;
	grid-template-columns: auto 350px;
	grid-template-rows: 100px 1fr;
	column-gap: 50px;
}
	.t-interview .grid .int-ttlwrap {
	grid-row: 1/2;
	grid-column: 1/3;
	border-bottom: 2px dotted #8dc556;
	margin-bottom: 20px;
}
	.t-interview .grid .int-phtwrap {
	grid-row: 2/3;
	grid-column: 2/3;
	align-self: start;
}
	.t-interview .grid .int-txtrap {
	grid-row: 2/3;
	grid-column: 1/3;
}
	.t-interview .ttl-int {
	font-size: 22px;
	padding-bottom: .2em;
}
	.t-interview .t-name {
	font-size: 15px;
}
	.t-interview .int-phtwrap {
	margin: 0;
}
	.t-interview .int-phtwrap .pht-tate {
	width: 100%;
}
/* インタビューのgrid指定、横長写真の場合 */
	.t-interview .grid.grid-yoko {
	grid-template-columns: auto 500px;
}

/*本文*/
/*	.t-article.column2 {
	column-count: 2;
	column-gap: 50px;
}*/
	.t-article h3 {
	font-size: 26px;
	padding-bottom: .75em;
}
	.t-article h4 {
	font-size: 20px;
	padding-top: 1em;
	padding-bottom: .75em;
}
	.t-article {
    padding: 0 80px;
}
	.t-article .txt {
    font-size: 17px;
}

/*施工事例*/
	.works h3::after {
	position: absolute;
	 content: '';
     display: inline-block;
     width: calc(100% - 130px);
     height: 3px;
	 background-color: #008D31;
	 top: 60%;
}
	.works h3 img {
	padding-right: 1em;
}
	.works .t-plist {
     padding: 0 30px;
}
	.works li {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
	padding: 40px 40px;
}
	.works li figure {
	width: 500px;
}
	.works li dl {
	font-size: 1em;
	width: 500px;
	padding-left: 50px;
}
	.works li dt {
	font-size: 20px;
	padding: 1em 0 .25em;
}
	.works li dd {
	font-size: 15px;
	line-height: 1.8;
}
	.works-waku {
	border: 10px solid #ebf4e0;
}
	.works-waku .t-plist {
     padding: 0 50px;
}
	.works-waku .t-plist li {
     padding: 50px 0;
}
/*インタビューの中のWorks*/
	.t-interview .works {
    margin: 60px 0 0;
}


/*トピックス*/
	.topics {
	border-radius: 0 40px 0 0;
	padding: 80px 50px 40px;
}
	.topics h3 {
	padding: 8px 20px 10px;
}
	.topics .genre-ttl img {
	height: 30px;
}
	.topics .ttl-topics {
	font-size: 1.4em;
	padding-bottom: .5em;
}
	.topics .flex {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}
	.topics .topics-img {
	padding: 1em 0;
	width: 400px;
}
	.topics .topics-txt {
	width: 580px;
}
	.topics .topics-txt .txt {
    font-size: 15px;
}

/*トピックス写真2点パターン*/
	.topics-img2 .flex {
	flex-direction: column;
}
	.topics-img2 .topics-txt {
	width: 100%;
}
	.topics-img2 .topics-txt .btn-hp {
	max-width: 800px;
	margin: auto;
}
	.topics-img2 .topics-img {
	width: 100%;
	margin-top: 25px;
}
	.topics-img2 .topics-img figure {
	display: flex;
	column-gap: 6%;
	margin: auto;
	max-width: 800px;
}
	.topics-img2 .topics-img img {
    display: block;
	width: 47%;
}
	.topics-img2 .topics-img img:nth-of-type(2) {
    margin-top: 0;
}

/*会社データ*/
	.t-data {
	/*padding-left: 1.5em;*/
	padding: 40px 50px;
}
	.t-data h3 {
	font-size: 22px;
}
	.t-data .t-tel {
	font-size: 20px;
}
	.t-data ul {
	font-size: 14px;
	padding-top: 5px;
}
	.t-data ul li {
	padding-top: 2px;
}


/*新築・リフォームリンク*/
	.t-link li:nth-of-type(2) {
	margin-top: 20px;
}
	.t-link a {
	max-width: 700px;
	font-size: 22px;
	margin: auto;
	padding: 30px 0;
}
/*TOPへ戻る*/
	.bk-top {
	font-size: 17px;
	padding-top: 50px;
}

}