@charset "utf-8";

@media screen and (max-width : 768px){
/*------------------------------------------------------------------------------------------
*
*
    /webcatalog/interior/design/
    Responsive / SP
*
*
------------------------------------------------------------------------------------------ */

/* -----------------------------------
    #section_design
----------------------------------- */
#section_design {
    margin-bottom: 20px;
}


/* -----------------------------------
    #section_design_gallery
----------------------------------- */
#section_design_gallery{
    margin: 0 0 20px 0;
}


/* -----------------------------------
    #section_color
----------------------------------- */
#section_color{
    margin: 0 0 40px 0;
}

#section_color .color_slider{
    margin: 0 auto 15px auto;
}

#section_color .color_slider .slider_inner{
    padding: 0 15px;
}

#section_color .color_slider .pic{
    margin: 0;
    line-height: 0;
    position: relative;
}

#section_color .color_slider .pic span{
    font-size: 14px;
    color: #fff;
    position: absolute;
    bottom: 15px;
    right: 10px;
}

#section_color .color_slider .col_left{
    border-bottom: 2px solid #fff;
}

#section_color .color_slider .col_right .pic{
    margin: 0 0 10px 0;
}

#section_color .color_slider .col_right .caption{
    height: 70px;
    font-size: 12px;
    line-height: 1.4em;
    text-align: left;
}

#section_color .color_slider .col_right .caption.empty{
    height: 0;
    margin: 0;
}

#section_color .color_slider .col_right .type{
    text-align: center;
}

#section_color .color_slider .col_right .type h4{
    margin: 0 0 5px 0;
    font-size: 18px;
    letter-spacing: 0;
}

#section_color .color_slider .col_right .type h4 .small{
    font-size: 14px;
}

#section_color .color_slider .col_right .type p{
    font-size: 13px;
    line-height: 1.5em;
}

	

/* ------------------------------
    .slider_set
------------------------------ */

.slider_set .section_column{
	line-height:1em !important;
	padding:0;
}
.slider_set .section_column .col_right{
	line-height:1.5em;
	padding:0 15px;
}
.slider_set_inner{
	position:relative;
}
.slider_set .img_slider div{
	margin:0 0 10px 0;
}

.slider_set h6 {
	font-weight: bold;
	padding-bottom: 0.5em;
}
	
	
/* ------------------------------
    movie
------------------------------ */
	#section_movie .modal_mov_open {
		width: auto;
		margin: 0 15px;
	}
	
    .modal_mov_open {
        position: relative;
        cursor: pointer;
        line-height: 0;
    }
    
    .modal_mov_open.play_btn::after {
        content:"";
        width: 100%;
        height: 100%;
        
        position: absolute;
        top: 0;
        left: 0;
        
        background: url(/auto-archive/civic/4door/2020/common/image_common/movie_play.png) center center no-repeat rgba(0, 0, 0, .5);
        background-size: auto 50%;
        transition: background .2s ease-out;
    }
    
    .modal_mov_open.play_btn:hover::after {
        background-color: rgba(0, 0, 0, 0);
    }
  	
	#section_movie .caution {
		font-size: 10px;
		text-align: right;
		margin: 5px 10px;
	}
	
	.sup2{
    margin: 0 2px;
    padding: 0 !important;
    font-size: 60%;
    text-indent: 0 !important;
    line-height: 1em;
    display: inline-block;
    vertical-align: text-top;
    position: relative;
    top: -1px;
}

}