@charset "UTF-8";
/********************************************************************************

page-blog.css　ブログ用css

********************************************************************************/
/*============================================================
 全体共通
*============================================================*/
/* 共通
---------------------------------------- */
body #main-contents {
	padding-bottom: 196px;
}
body.cta-blog-bottom-close #main-contents {
	padding-bottom: 112px;
}

/* 画面分割
---------------------------------------- */
.partition {
	gap: 48px;
}
.partition > .main {
	width: calc(100% - 388px);
}
.partition > .main .inner {
	padding: 0;
}
.partition > .main > h2 {
	font-size: 36px;
	margin-bottom: 48px;
}
.partition > .sidebar {
	width: 340px;
	padding: 48px 8px 8px;
}
.partition > .sidebar .banner {
	background: var(--common-color-background3);
	color: #fff;
	padding: 16px 8px 4px 16px;
	margin-bottom: 32px;
}
.partition > .sidebar .banner .heading {
	gap: 8px;
	margin-bottom: 12px;
}
.partition > .sidebar .banner .heading .logo {
	width: 48px;
}
.partition > .sidebar .banner .heading .title {
	width: calc(100% - 56px);
}
.partition > .sidebar .banner .tel {
	margin-bottom: 4px;
}
.partition > .sidebar .banner .tel .number {
	gap: 4px;
}
.partition > .sidebar .banner .tel .number a {
	font-size: 36px;
	display: block;
	line-height: 1;
}
.partition > .sidebar .banner .tel > p {
	text-align: center;
	font-size: 12px;
}
.partition > .sidebar .banner .reserve {
	width: 180px;
	margin: 0 0 0 auto;
}
.partition > .sidebar .banner .reserve a {
	display: block;
	font-size: 12px;
	text-align: right;
	padding: 3px 46px 3px 16px;
	transition: all .3s;
}
.partition > .sidebar .banner .reserve a:hover {
	opacity: 0.7;
}
.partition > .sidebar .banner .reserve a:before {
	background: url(../images/common/icon-link-arrow-white.svg) no-repeat center center / contain
}
.partition > .sidebar .category {
	padding: 0 16px;
	margin-bottom: 48px;
}
.partition > .sidebar .category .title {
	line-height: 1;
	font-weight: 500;
	padding-bottom: 24px;
	color: var(--common-color-main);
	border-bottom: 1px solid var(--common-color-main);
	margin-bottom: 16px;
}
.partition > .sidebar .category ul {
	gap: 8px;
}
.partition > .sidebar .category ul li a {
	background: var(--common-color-main);
	color: #fff;
	font-size: 10px;
	padding: 8px 16px;
	line-height: 1;
	transition: all .3s;
}
.partition > .sidebar .category ul li a:hover {
	opacity: 0.7;
}
.partition > .sidebar .recommend {
	padding: 0 16px;
}
.partition > .sidebar .recommend > .title {
	color: var(--common-color-main);
	border-bottom: 1px solid var(--common-color-main);
	font-size: 14px;
	line-height: 1.4;
	padding-bottom: 12px;
	margin-bottom: 24px;
	font-weight: bold;
}
.partition > .sidebar .recommend > .title span {
	font-size: 20px;
}
.partition > .sidebar .recommend > .list .item {
	padding-left: 32px;
	gap: 16px;
	position: relative;
	margin-bottom: 24px;
	transition: all .3s;
}
.partition > .sidebar .recommend > .list .item:hover {
	opacity: 0.7;
}
.partition > .sidebar .recommend > .list .item:last-child {
	margin-bottom: 0;
}
.partition > .sidebar .recommend > .list .item:before {
	display: none;
}
.partition > .sidebar .recommend > .list .item:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 16px;
	height: 24px;
	background-size: contain;
	background-repeat: no-repeat;
}
.partition > .sidebar .recommend > .list .item:nth-child(1):after {
	background-image: url(../images/blog/recommend-rank-no-1.svg);
}
.partition > .sidebar .recommend > .list .item:nth-child(2):after {
	background-image: url(../images/blog/recommend-rank-no-2.svg);
}
.partition > .sidebar .recommend > .list .item:nth-child(3):after {
	background-image: url(../images/blog/recommend-rank-no-3.svg);
}
.partition > .sidebar .recommend > .list .item:nth-child(4):after {
	background-image: url(../images/blog/recommend-rank-no-4.svg);
}
.partition > .sidebar .recommend > .list .item:nth-child(5):after {
	background-image: url(../images/blog/recommend-rank-no-5.svg);
}
.partition > .sidebar .recommend > .list .item .image {
	width: 56px;
	height: 56px;
	overflow: hidden;
}
.partition > .sidebar .recommend > .list .item .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.partition > .sidebar .recommend > .list .item .info {
	width: calc(100% - 72px);
}
.partition > .sidebar .recommend > .list .item .info .title {
	font-size: 14px;
	color: var(--common-color-main);
	font-weight: 600;
	margin-bottom: 8px;
	-webkit-line-clamp: 3;
}
.partition > .sidebar .recommend > .list .item .info .excerpt {
	font-size: 12px;
	color: #B4B4B4;
	-webkit-line-clamp: 2;
}
.partition > .sidebar .recommend > .list .item .info .tag {
	display: none;
}

/* cta吸着
---------------------------------------- */
#cta-blog-bottom {
	display: none;
	background: var(--common-color-background3);
	color: #fff;
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 999;
}
#cta-blog-bottom .close {
	cursor: pointer;
	position: absolute;
	top: -48px;
	right: 0;
	width: 48px;
	height: 48px;
	background: rgba(19,18,17,0.4);
	text-align: center;
	padding: 16px 0;
	margin: 0 0 0 auto;
}
#cta-blog-bottom .inner {
	max-width: 1408px;
}
#cta-blog-bottom .block {
	padding: 20px 0;
	gap: 30px;
}
#cta-blog-bottom .block .text {
	width: calc(100% - 473px);
}
#cta-blog-bottom .block .contact {
	width: 443px;
	gap: 20px;
}
#cta-blog-bottom .block .contact .parts-btn {
	margin: 0;
}
#cta-blog-bottom .block .contact .tel.forPC {
	display: block;
}
#cta-blog-bottom .block .contact .tel > a {
	font-size: 24px;
	font-weight: 600;
	display: block;
	text-align: center;
	line-height: 1.5;
}
#cta-blog-bottom .block .contact .tel p {
	font-size: 10px;
	text-align: center;
	font-family: var(--common-font-family-lato);
}

/*######################################################################
 一覧
######################################################################*/
/*============================================================
 メインビジュアル
*============================================================*/
#page-blog-list #mainvisual {
}

/*============================================================
 セクション共通
*============================================================*/
#page-blog-list .section {
}


/*######################################################################
 詳細
######################################################################*/
/*============================================================
 メインビジュアル
*============================================================*/
#page-blog #mainvisual {
}

/*============================================================
 セクション共通
*============================================================*/
#page-blog .section {
    margin-bottom: 0;
}

/*============================================================
 オススメ記事
*============================================================*/
#page-blog #sec-recommend .block .label {
	width: 240px;
	font-size: 14px;
	line-height: 1.3;
	font-weight: bold;
	background: var(--common-color-main);
	color: #fff;
	margin-bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 6px;
}
#page-blog #sec-recommend .block .label span {
	font-size: 20px;
}
#page-blog #sec-recommend .block .link {
	width: calc(100% - 240px);
	background: #F5F3F1;
	line-height: 1.6;
	display: block;
	padding: 14px;
}
#page-blog #sec-recommend .block .link:hover {
	text-decoration: underline;
}

/*============================================================
 アイキャッチ
*============================================================*/
#page-blog #sec-eyecatch {
	margin-bottom: 40px;
}

/*============================================================
 この記事で理解できること
*============================================================*/
#page-blog #sec-understand {
	background: var(--common-color-background2);
	padding: 32px 40px;
	margin-bottom: 48px;
} 
#page-blog #sec-understand .title {
	text-align: center;
	font-size: 24px;
	font-weight: 500;
	margin-bottom: 24px;
	color: var(--common-color-main);
}
#page-blog #sec-understand ol {
	background: rgba(255,255,255,0.7);
	padding: 24px 32px;
}
#page-blog #sec-understand ol li {
	font-size: 20px;
	margin-bottom: 8px;
	font-weight: 500;
}
#page-blog #sec-understand ol li:last-child {
	margin-bottom: 0;
}

/*============================================================
 監修
*============================================================*/
#page-blog #sec-writer {
	margin: 80px 0;
}
#page-blog #sec-writer .block {
	gap: 16px;
	padding: 16px 24px;
	background: var(--common-color-background1);
}
#page-blog #sec-writer .block .image {
	width: 96px;
}
#page-blog #sec-writer .block .image img {
	border-radius: 50%;
	overflow: hidden;
}
#page-blog #sec-writer .block .info {
	width: calc(100% - 112px);
}
#page-blog #sec-writer .block .info .label {
	font-size: 12px;
	color: #898989;
	line-height: 1;
	margin-bottom: 8px;
}
#page-blog #sec-writer .block .info .name {
	margin-bottom: 8px;
	font-weight: 600;
}
#page-blog #sec-writer .block .info .text {
	font-size: 12px;
}

/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 Tablet
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 1127px) {
	/*============================================================
	 全体共通
	*============================================================*/
	.partition {
		gap: 64px;
	}
	.partition > .main {
		width: 100%;
	}
	.partition > .main > h2 {
		font-size: 32px;
		margin-bottom: 32px;
	}
	
	.partition > .sidebar {
		width: 100%;
		padding: 0;
	}
	
	.partition > .sidebar .banner .heading {
		justify-content: center;
	}
	.partition > .sidebar .banner .heading .title {
		width: initial;
	}
	.partition > .sidebar .banner .tel .number {
		justify-content: center;
	}
	
	#cta-blog-bottom .inner {
		padding: 0 16px;
	}
	#cta-blog-bottom .block {
		gap: 16px;
	}
	#cta-blog-bottom .block .text {
		width: calc(100% - 460px);
	}
	#cta-blog-bottom .block .text img.forPC {
		display: none;
	}
	#cta-blog-bottom .block .text img.forSP {
		display: block;
		margin: 0 auto;
	}

    /*######################################################################
     一覧
    ######################################################################*/
    /*============================================================
     メインビジュアル
    *============================================================*/
    #page-blog-list #mainvisual {
    }


    /*######################################################################
     詳細
    ######################################################################*/
    /*============================================================
     メインビジュアル
    *============================================================*/
    #page-blog #mainvisual {
    }
	

}



/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 SP
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 767px) {
	body #main-contents {
		padding-bottom: 270px;
	}
	body.cta-blog-bottom-close #main-contents {
		padding-bottom: 64px;
	}
	
	.partition > .main > h2 {
		font-size: 28px;
		margin-bottom: 24px;
	}
	
	#cta-blog-bottom {
		padding: 24px 0;
	}
	#cta-blog-bottom .close {
		width: 40px;
		height: 40px;
		top: -40px;
		padding: 12px 0;
	}
	#cta-blog-bottom .block {
		padding: 0;
		margin-bottom: 16px;
	}
	#cta-blog-bottom .block .text {
		width: 100%;
	}
	#cta-blog-bottom .block .text img.forSP {
		display: block;
	}
	#cta-blog-bottom .block .contact {
		width: 100%;
		gap: 16px;
		justify-content: center;
	}
	#cta-blog-bottom .block .contact .parts-btn {
		width: 202px;
	}
	#cta-blog-bottom .block .contact .parts-btn > * {
		font-size: 14px;
	}
	#cta-blog-bottom .block .contact .tel.forPC {
		display: none;
	}
	#cta-blog-bottom .block .contact .tel .parts-btn {
		width: 140px;
	}
	#cta-blog-bottom .schedule {
		font-size: 12px;
		line-height: 1;
		text-align: center;
	}
	
	
    /*######################################################################
     一覧
    ######################################################################*/
    /*============================================================
     メインビジュアル
    *============================================================*/
    #page-blog-list #mainvisual {
    }


    /*######################################################################
     詳細
    ######################################################################*/
    /*============================================================
     メインビジュアル
    *============================================================*/
    #page-blog #mainvisual {
    }
	#page-blog #sec-recommend .block .label {
		width: 140px;
	}
	#page-blog #sec-recommend .block .label span {
		font-size: 18px;
	}
	#page-blog #sec-recommend .block .link {
		width: calc(100% - 140px);
	}
	
	#page-blog #sec-understand {
		padding: 24px 16px;
	}
	#page-blog #sec-understand .title {
		font-size: 18px;
		margin-bottom: 16px;
	}
	#page-blog #sec-understand ol {
		padding: 24px 16px;
	}
	#page-blog #sec-understand ol li {
		font-size: 14px;
	}
	
	#page-blog #sec-writer .block .image {
		margin: 0 auto;
	}
	#page-blog #sec-writer .block .info {
		width: 100%;
	}
	#page-blog #sec-writer .block .info .label {
		text-align: center;
	}
	#page-blog #sec-writer .block .info .name {
		text-align: center;
	}

}