@charset "UTF-8";


/*******************************
   common
 *******************************/

.max-width-box{
	max-width: 768px;
	margin-left: auto;
	margin-right: auto;
}

.vw_max-box{
	width: 100vw;
	margin-left: calc(50% - 50vw);
}





/*Mobile*/
.text_detail{
    font-size: 12px !important;
}
.card-title{
    font-size: 12px;
}
.heading_title{
    font-size: 12px !important;
    font-weight: 400 !important;
}
.reason_title{
    font-size: 20px;
}
p{
  font-family: "Hiragino Kaku Gothic ProN";
    font-style: normal;
    font-weight: 400;
    color: #000000;
}
.router_link{
    display: flex;
    justify-content: center;
    margin-top: 50px;
}
.router_link>a{
    font-size: 10px !important;
    font-family: "Hiragino Kaku Gothic ProN";
    font-style: normal
}
.title-box-item{
    text-align: center;
    font-weight: 600;
}
.image_70 {
    width: 80%;
    height: 80%;
    max-height: 436px;
}
/*PC*/
@media screen and (min-width: 992px) {
    .contentPColumn{
        height: 60px;
    }
    .container_pc{
        max-width: 1280px !important;
    }
    p{
        font-family: "Hiragino Kaku Gothic ProN";
        font-style: normal;
        font-weight: 400;
        color: #000000;
    }
    .image_70 {
        width: 70%;
        height: 70%;
        max-height: 570px;
    }
     /*.box-item {
        flex-direction: column-reverse;
    }
    /*.box-item .text_content {*/
    /*    font-weight: 600;*/
    /*    font-size: 16px!important;*/
    /*    margin-bottom: 12px!important;*/
    /*}*/
    .box-item .card-title {
        font-weight: 300;
        font-size: 14px!important;
    }
    .title-box-item {
        text-align: left;
    }
    .text_detail {
        font-size: 14px !important ;
        font-weight: 500 !important;
    }

    .heading_relight {
        font-size: 24px !important;
        font-weight: 600 !important;
    }
    .back_ground{
        background-color: #FFFFFF !important;
    }
    .text_content{
        font-weight: 600;
        font-size: 16px!important;
        margin-bottom: 12px!important;
    }
    .card-title{
        font-size: 14px !important;
    }
    .heading_reform{
        font-size: 24px !important;
        font-weight: 600 !important;
    }
    .router_link a{
        padding:12px 28px!important;
        font-size: 13px !important;
        font-family: "Hiragino Kaku Gothic ProN"!important;
       width: 220px;
    }
    .box-renovation-example img {
        min-height: 217px;
    }
    .router_link{
        height: 40px;
    }
    .reason_title{
        font-size: 24px!important;
        font-family: "Hiragino Kaku Gothic ProN"!important;
        font-weight: 600 !important;
    }
    .button_R2{
        height: 40px;
        width: 178px;
    }
}
@media screen and (max-width: 678px) {
    .box-renovation-example img {
        min-height: 107px;
    }
    .image_70{
        max-height: 100% !important;
    }
}
@media screen and (max-width:992px){
    .router_link a{
        width: 132px !important;
    }
    .router_paginate a{
        width: 165px !important;
        padding: 10px 18px;
    }

    .contentPColumn{
        height: 50px;
    }
    .button_R2{
        height: 40px;
        width: 190px;
    }



}

.lh-sm1{
    line-height:1.5 !important
}




.rl_contents h3,.rl_contents h4,.rl_contents h5,.rl_contents p,.rl_contents a{
	font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
	font-weight: 300;
	font-style: normal;
	line-height:1.8em;
}

.rl_contents .rl_top{
	background-image: url("https://fashionrenove.jp/image_renovation/renovation/R-2/rl_top.jpg") ;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	white-space: nowrap;
}

.rl_contents .rl_top h2{
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
	font-weight: 300;
	font-style: normal;
	color: #fff;
	line-height:1.8em;
}

.rl_contents .rl_top img{
	width: 40%;
	margin: 3em auto auto;
}


.rl_contents .rl_intro .rl_intro_img{
	position: relative;
	margin:1em auto auto;
}

.rl_contents .rl_intro .rl_intro_img img{
	width: 100%;
	height: auto;
}

.rl_contents .rl_intro .rl_intro_img img.rl_ph02{
	display: none;
}

.showrooms iframe{
    width: 100%;
    height: 300px;
    margin: 30px 0;
}

		
@media screen and (min-width: 768px) {
	.rl_contents .rl_mv{
		display: none;
	}
	
	.rl_contents .rl_top{
		padding: 4em 0 2em;
	}

	.rl_contents .rl_top h2{
		writing-mode: horizontal-tb;
		text-align:center;
	}

	.rl_contents .rl_top img{
		width: 250px;
		height: auto;
		margin: 3em auto auto;
	}

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

	.rl_contents .rl_intro .rl_intro_img{
		width:100%;
		padding-top: 50%;
	}
	.rl_contents .rl_intro .rl_intro_img img.rl_ph01{
		position: absolute;
		width: 50%;		
		top: 0;
        left: 15%;
	}
	.rl_contents .rl_intro .rl_intro_img img.rl_ph02{
        display: block;
		position: absolute;
		margin:auto;
		width: 25%;
		top: 10%;
        right:15%;
	}
	
	  .event-details .card .box-item a {
        font-size: 12px;
        font-family: "Hiragino Kaku Gothic ProN" !important;
    }
    .showrooms iframe{
        height: 500px;
    }
	
}



/*******************************
    コンテンツ
 *******************************/

.container *{
	font-family: fot-tsukuaoldmin-pr6n, sans-serif !important;
	font-weight: 300;
	font-style: normal;
}


.object-fit-cover{
	object-fit: cover;
}

.btn-custom-full-width {
 	width: 100%; 
	background-color: #d0921d;
	padding: 0.5em 1em;
	font-size: 1em;
    text-align: center;
	color: #ffffff;
}



div.rl_layer{
		background-color: rgba(227,215,215,0.5)
}

.rl_ec p{
	text-shadow: 0 0 3px #ffffff;
}


.event-details .card .box-item a {
    width: 23%;
    padding: 4px 4px 2px 5px;
    margin-right: 7px;
    background-color: #000000;
    border-radius: 3px;
}


.rl_ec div[class*="inner"] {
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
	
}
.rl_ec div[class*="placeholder"] {
	height: auto;
	padding-top: 100%;
}
.rl_ec div.rl_ec01_inner{
    background-image: url("../images/relightlabel/eyecatch01.jpg");
    background-position: right center;
}
.rl_ec div.rl_ec02_inner{
	background-image: url("../images/relightlabel/eyecatch02.jpg") ;
    background-position: left center;
}
.rl_ec div.rl_ec03_inner{
	background-image: url("../images/relightlabel/eyecatch03.jpg") ;
    background-position: right center;
}
.rl_ec div.rl_ec04_inner{
	background-image: url("../images/relightlabel/eyecatch04.jpg") ;
    background-position: left center;
}
.rl_ec div[class*="inner"] p{
	margin-top: 60%;
}

.carousel-control-prev,
.carousel-control-next {
    background-color: rgba(128, 128, 128, 0.7); /* グレーの半透明 */
    border-radius: 50%; /* 必要であればボタンを丸くする */
    width: 44px; /* ボタンの幅 (デフォルト値) */
    height: 44px; /* ボタンの高さ (デフォルト値) */
    /* その他の位置調整などは既存のCSSを残す */
    z-index: 100;
    top: 50%;
    transform: translateY(-50%);
    left: -10px; /* 必要に応じて調整 */
    right: -10px; /* 必要に応じて調整 */
}
.carousel-control-next {
    left: auto; /* nextボタンのleftをリセット */
    right: -10px; /* rightを再度設定 */
}

.carousel-indicators [data-bs-target] {
    background-color: #ccc;
    opacity: 0.7;
    width: 30px; 
    height: 3px; 
    border-radius: 0; 
}

.carousel-indicators .active {
    background-color: #888;
    opacity: 1;
}


@media (min-width: 768px) { 
    .rl_ec div[class*="inner"] {
        background-size: 50% auto; 
    }
	.rl_ec div.rl_ec01_inner,
	.rl_ec div.rl_ec03_inner{
		background-position: right center;
	}
	.rl_ec div.rl_ec02_inner{
		background-position: left center;
	}
	.rl_ec div[class*="placeholder"] {
        height: auto; 
		padding-top: 55%;
    }
	.rl_ec div[class*="inner"] p{
		margin-top: 0;
		padding-top: 0;
		font-size: 1.2em;
		line-height: 1.7em;
	}
	
    .carousel-control-prev {
        left: -70px; /* PCではさらに外側に (適宜調整) */
    }
    .carousel-control-next {
        right: -70px; /* PCではさらに外側に (適宜調整) */
    }
	
	
}

.rl_ec div[class*="content"] {
    width: 100%; 
}




.rl_staff_01::after{
	content: "";
	position: absolute;
	bottom:0;
	right: 0;
	width: 25%;
	height: 100%;
	background-image: url("../images/relightlabel/staff_nishikawa.png") ;
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: contain;
}
.rl_staff_02::after{
	content: "";
	position: absolute;
	bottom:0;
	left: 0;
	width: 25%;
	height: 100%;
	background-image: url("../images/relightlabel/staff_oishi.png") ;
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: contain;
}


.p-custom-r20{
	margin-right: 30%;
}
.p-custom-l20{
	margin-left: 30%;
}

.map-btn{
	font-size: 0.6em;
	padding: 0.2em 0.5em;
	background-color: #eeeeee;
	color: #333333;
} 

@media screen and (min-width: 768px) {
	
	.w-md-75 {
    width: 75% !important;
	}
	.w-md-50 {
		width: 50% !important;
	}

	
	.border-md-end{
		border-right: 1px solid #999999;
	}
}




.video-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.ratio video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
}

.video-content-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.video-content-overlay p {
  font-size: 4vw;
  text-shadow: 1px 1px 20px #000;
  color: #fff;
  margin: 0;
}

.video-content-overlay small {
  font-size: 2.5vw;
}

.video-pattern {
  width: 100%;
  height: 100%;
  background: url("../images/relightlabel/video_pattern.png") ;
	background-position: center center;
	background-repeat: repeat;
	background-size:auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}