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

/*==============================
リフォームお役立ち情報 SP
==============================*/

img{
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.pc-Only{
	display: none !important;
}

.l-page-guide.l-page-guide-archive .page-guide .l-main .guide-box{
	margin: 0 4%;
  margin-bottom: 20px;
	padding: 10px 4% 10px;
	background: #fff url(/assets/img/common/sp_under_bg_b.png) bottom right no-repeat;
	background-size: 50px;
}


.l-main .guide-box .blog-text > h1{
	margin-block: 60px 40px;
	font-size: 1.625em;
	font-weight: 700;
}
.l-main .guide-box .blog-text > h2{
	margin-block: 60px 40px;
	padding: 0.2em 0.5em;
	border-left: 8px solid #be8f68;
	border-bottom: 1px solid #be8f68;
	font-size: 1.5em;
	font-weight: 700;
}
.l-main .guide-box .blog-text > h3{
	position: relative;
	margin-block: 60px 40px;
	padding: 0.2em 0.5em;
	border-left: 4px solid #e8d8cc;
	font-size: 1.25em;
	font-weight: 700;
}
.l-main .guide-box .blog-text > h3::before{
	content: "";
	position: absolute;
	top: 0;
	left: -4px;
	width: 4px;
	height: 50%;
	background-color: #be8f68;
}
.l-main .guide-box .blog-text > h4{
	position: relative;
	margin-block: 50px 30px;
	padding: 0.2em 0.5em 0.2em calc(0.5em + 4px);
	font-size: 1.125em;
	font-weight: 700;
}
.l-main .guide-box .blog-text > h4::before{
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	width: 8px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: #be8f68;
}
.l-main .guide-box .blog-text > h5{
	margin-block: 50px 30px;
	font-size: 1em;
	font-weight: 700;
}
.l-main .guide-box .blog-text > h6{
	margin-block: 50px 30px;
	font-size: 1em;
	font-weight: 700;
}
.l-main .guide-box .blog-text > p{
	line-height: 1.8 !important;
}
.l-main .guide-box .blog-text p > a:has(img){
	display: block;
	transition: all 0.3s;
}
.l-main .guide-box .blog-text p > a:has(img):hover{
	opacity: 0.7;
}
.l-main .guide-box .blog-text p strong a{
	color: #ff5757 !important;
}
.l-main .guide-box .blog-text > ul,
.l-main .guide-box .blog-text > ol,
.l-main .guide-box .blog-text table ul,
.l-main .guide-box .blog-text table ol{
	padding-left: 1em;
	line-height: 1.8 !important;
}
.l-main .guide-box .blog-text > ul,
.l-main .guide-box .blog-text > ol{
	margin: 20px 0 40px 0;
}
.l-main .guide-box .blog-text > ul li,
.l-main .guide-box .blog-text table ul li{
	list-style: disc outside;
}
.l-main .guide-box .blog-text > ol li,
.l-main .guide-box .blog-text table ol li{
	list-style: decimal outside;
}
.l-main .guide-box .blog-text > ul li:has(> strong:first-child),
.l-main .guide-box .blog-text > ol li:has(> strong:first-child)  {
	margin-top: 1.5em;
}
.l-main .guide-box .blog-text > ul li > strong:first-child,
.l-main .guide-box .blog-text > ol li > strong:first-child {
	display: block;
	margin-bottom: 1em;
}

.l-main .guide-box .blog-text p:has(strong):has(+ table),
.l-main .guide-box .blog-text p:has(strong):has(+ .table-wrapper){
	margin-bottom: 20px !important;
}
.sp-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
.table-wrapper table{
  min-width: 600px;
}
.l-main .guide-box .blog-text > table{
	margin-block: 20px 40px;
}
.l-main .guide-box .blog-text > .table-wrapper{
	margin-block: 20px;
	padding-block: 0px 20px;
}
.l-main .guide-box .blog-text table{
	border-collapse: separate;
	overflow: hidden;

	border: solid #dddddd;
	border-width: 1px 1px 0 1px;
	border-radius: 10px 10px 0 0;
}
.l-main .guide-box .blog-text table tr:first-of-type th{
  padding: 10px;
	background-color: #f3f0eb;
	border-bottom: 1px solid #dddddd;
  font-weight: bold;
}
.l-main .guide-box .blog-text table tr:not(:first-of-type) th:first-child{
  padding: 10px;
	background-color: #f3f0eb;
  font-weight: bold;
}
.l-main .guide-box .blog-text table tr:first-of-type th:not(:first-of-type){
	border-left: 1px solid #dddddd;
}
.l-main .guide-box .blog-text table tr:not(:first-of-type) th{
	border-bottom: 1px solid #dddddd;
}
.l-main .guide-box .blog-text table td{
  padding: 10px;
	border-bottom: 1px solid #dddddd;
}
.l-main .guide-box .blog-text table td:not(:first-child){
	border-left: 1px solid #dddddd;
}

.l-main .guide-box .blog-text blockquote{
  margin: 20px 0 !important;
  position: relative;
  padding: 3rem 2rem;
  border: 1px solid #ebefe9;
	background: #ebefe9;
  z-index: 1;
  border-radius: 5px;
}
.l-main .guide-box .blog-text blockquote:has( + p[style="text-align: right;"]) {
	margin-bottom: 10px !important;
}
.l-main .guide-box .blog-text blockquote:before {
  content: '“';
  font-size: 7rem;
  line-height: .8em;
  font-family: 'Times New Roman', 'ＭＳ Ｐゴシック', sans-serif;
  color: #fff;
  position: absolute;
  left: 10px;
  top: 5px;
  z-index: 2;
}
.l-main .guide-box .blog-text blockquote p{
	margin: 0 !important;
}
.l-main .guide-box .blog-text blockquote + p[style="text-align: right;"] {
	margin-top: 10px !important;
	font-size: 0.875em !important;
}
.l-main .guide-box .blog-text blockquote + p[style="text-align: right;"] a{
	color: #ff5757 !important;
}
.l-main .guide-box .blog-text p:has(.btn-custom){
	display: flex;
  flex-direction: column;
	gap: 0 2%;
	justify-content: center;
}
.l-main .guide-box .blog-text .btn-custom{
  position: relative;
	width: min(100%, 300px);
	background: #ff5757;
	border-radius: 6px;
	color: #fff !important;
	text-align: center;
	display: block;
	font-size: 1.2rem;
  margin-inline: auto;
	padding: 10px 10px 5px;
	text-decoration: none;
	font-weight: bold;
}
.l-main .guide-box .blog-text .btn-custom + .btn-custom{
	margin-top: 20px;
}
.l-main .guide-box .blog-text p .btn-custom + .btn-custom{
	margin-top: 0px;
}
.l-main .guide-box .blog-text .btn-custom::before,
.l-main .guide-box .blog-text .btn-custom::after{
	content: "";
	display: block;
	background: #fff;
	position: absolute;
	right: 15px;
	top: 50%;
	height: 1px;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
.l-main .guide-box .blog-text .btn-custom::before{
	width: 30px;
}
.l-main .guide-box .blog-text .btn-custom::after{
	width: 8px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transform-origin: right bottom;
}
.l-main .guide-box .blog-text .btn-custom:hover::before,
.l-main .guide-box .blog-text .btn-custom:hover::after{
    right: 5px;
}
.l-main .guide-box .blog-text .btn-custom span{
	padding-right: 36px;
}
.l-main .guide-box .blog-text .btn-custom span::before{
    display: inline-block;
    content: '';
    margin-right: 10px;
    height: 40px;
    vertical-align: middle;
}
.l-main .guide-box .blog-text .btn-custom.btn-reserve span::before{
    background: url(/assets/img/common/ic_btn_reserve.png) no-repeat;
    background-size: contain;
    width: 36px;	
}
.l-main .guide-box .blog-text .btn-custom.btn-apply span::before{
    background: url(/assets/img/common/ic_btn_apply.png) no-repeat;
    background-size: contain;
    width: 34px;	
}

/* toc_container */
#toc_container{
	margin-top: 20px;
  padding: 30px !important;
	background-color: #faf6ef !important;
  border: 1px solid #ebe3d2 !important;
	border-radius: 10px !important;
	width: 100% !important;
  box-sizing: border-box;
}
#toc_container .toc_title{
	background: url(../img/guide/ic_toc_title.svg) no-repeat left  center / 30px 30px;
	padding-block: 0.5em !important;
	padding-left: 40px !important;
	text-align: left !important;
	color: #39322b;
}
#toc_container .toc_toggle a{
	color: #ff5757 !important;
}
#toc_container .toc_list{
	list-style: none;
  counter-reset: number;
  padding-left: 0;
}
#toc_container .toc_list li{
	padding-left: 0 !important;
}
#toc_container .toc_list li a{
counter-increment: number;
  position: relative;
	padding-block: 1em !important;
  padding-left: 2.5em !important;

	display: block;
	border-bottom: 1px dashed #ebe3d2 !important;
  font-weight: bold;
	color: #39322b;
}
#toc_container .toc_list li a::before{
  content: counter(number, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1em;
  font-weight: bold;
  color: #ff5757;
}


/* .guide-card */
.guide-card {
  margin: 20px 0 40px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.guide-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.guide-card__link {
  display: flex;
	align-items: flex-start;
	gap: 16px;
  background: #fff;
  padding: 20px;
  color: inherit;
  text-decoration: none;
}

.guide-card__thumb {
	width: min(35%, 150px);
	aspect-ratio: 1 / 1;
  background: #f5f5f5;
  flex-shrink: 0;
}

.guide-card__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

.guide-card__body {
  flex-grow: 1;
}

.guide-card__title {
  margin: 0 0 0.5em 0;
  font-weight: bold;
  font-size: 1.05rem;
  color: #333;
}

.guide-card__excerpt {
  margin: 0;
  font-size: 0.85rem;
  color: #666;
}




/* .guide-card */
.guide-card {
  margin: 2em 0;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.guide-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.guide-card__link {
  display: flex;
	align-items: flex-start;
	gap: 16px;
  background: #fff;
  padding: 10px;
  color: inherit;
  text-decoration: none;
}

.guide-card__thumb {
  width: 30%;
	aspect-ratio: 1 / 1;
  flex-shrink: 0;
}
.guide-card__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

.guide-card__body {
}

.guide-card__title {
  margin: 0 0 0.5em 0;
  font-weight: bold;
  font-size: min(3.75vw, 1.1rem);
  color: #333;
}

.guide-card__excerpt {
  margin: 0;
  font-size: min(2.4vw, 0.825rem);
	line-height: 1.6;
  color: #666;
}
.guide-under-btn-area{
	margin-top: 40px;
	margin-bottom: 40px;
}
.guide-under-btn-area .btn-guide-back {
	display: grid;
	align-items: center;
	width: min(100%, 360px);
	padding: 0;
	height: 60px;
	font-size: 1.125em;
	color: #fff;
	text-decoration: none;
	border-radius: calc(infinity * 1px);
  background: url(/assets/img/guide/guide_btn.png) no-repeat 0 0 / 100% 100%;
}
.guide-under-btn-area .btn-guide-back:hover,
.guide-under-btn-area .btn-guide-back:active {
	color: #a79376 !important;
  background: url(/assets/img/guide/guide_btn_o.png) no-repeat 0 0 / 100% 100%;
}

/* article-info */
.l-main .article-info {
  clear: both;
  margin-block: 40px 20px;
}
.l-main .article-info p {
  margin: 0;
}
.l-main .article-info .subtitle p {
	display: inline-block;
	background-color: #a79376;
	padding: 0.3em 1em 0.1em;
	min-width: 190px;
	text-align: center;
	color: #ffffff;
	line-height: 1.4em;
	box-sizing: border-box;
}
.l-main .article-info .box {
  border: 2px #a79376 solid;
  margin-bottom: 10px;
  padding: 20px;
}
.l-main .article-info .photo {
  margin: 0 auto 20px;
}
.l-main .article-info .photo {
  width: 200px;
}
.l-main .article-info .photo img {
  width: 100%;
}
.l-main .article-info .name-box {
  border-left: 4px solid #fd5756;
  padding-left: 10px;
  line-height: 1;
  color: #8c7c64;
  margin-bottom: 15px;
}
.l-main .article-info .position {
  font-size: 0.75em; /* 12px */
  display: block;
  margin-bottom: 8px;
}
.l-main .article-info .name {
  font-size: 1em;
}
.l-main .article-info .profile {
  font-size: 0.75em; /* 12px */
  line-height: 1.6;
}
.l-main .article-info .article-info-memo {
  font-size: 0.75em; /* 12px */
}
.l-main .article-info a {
	color: #000;
}