@charset "utf-8";
/*MADORI
----------------------------------------------- */
.top_sd02 {
  width: 100%;
  padding-top: 0px;
  overflow: hidden;
}
/* 769px */
@media screen and (min-width: 769px) {
  .top_sd02 p {
    font-size: 1.1rem;
    line-height: 1.4;
  }
}
/**************************
CONCEPT
***************************/
.sd02concept {
    position: relative;
}
li.concept_wrap {
    list-style: none;
}
.concept_wrap {
	margin-bottom: 10px;
	position: relative;
    float: left;
    width: 100%;
}
.concept_wrap .img_area_wrap {
	width: 100%;
	float: left;
    height: 100%;
}

/*txt_content*/
.concept_cont {
    width: 44%;
    position: absolute;
    bottom: -5%;
    z-index: 10;
    right: 2%;
}
.concept_txt {
  position: relative;
  overflow: hidden;
}
.concept_inner {
  -webkit-transition: 1.2s;
  -o-transition: 1.2s;
  transition: 1.2s;
    background: #fff;
    padding: 60px 20px 50px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    border-radius: 8px;        /* CSS3 */  
    -webkit-border-radius: 8px;    /* Safari,Google Chrome*/  
    -moz-border-radius: 8px;   /* Firefox */ 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
    margin: 20px;
  -webkit-transform: translateX(4%);
  -ms-transform: translateX(4%);
  transform: translateX(4%);
    opacity: 0.0;
    filter: alpha(opacity=0);
    -moz-opacity: 0.0;
}
.concept_cont.on .concept_inner {
  -webkit-transform: translateX(0) !important;
  -ms-transform: translateX(0) !important;
  transform: translateX(0) !important;
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
}
@media screen and (min-width:769px) and ( max-width:1140px) {
.concept_cont {
    width: 70%;
    position: absolute;
    bottom: -20%;
    z-index: 10;
    right: -3%;
}
}
/* 768px以下用の記述 */
@media screen and (max-width: 768px) {
.concept_sp_back {
    position: absolute;
    width: 100%;
    height: 60%;
    bottom: 0;
    background-image: url(../images/concept_bk.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;	
    z-index: -1;
}
.concept_cont {
    width: 100%;
    position: absolute;
    bottom: 7%;
    z-index: 1;
    right: 0;
}
.concept_inner {
  -webkit-transform: translateY(6%);
  -ms-transform: translateY(6%);
  transform: translateY(6%);
}
.concept_cont.on .concept_inner {
  -webkit-transform: translateY(0) !important;
  -ms-transform: translateY(0) !important;
  transform: translateY(0) !important;
}
}

/*------- slider_back -------*/
.ccpt_img {
    width: 100%;
    height: 840px;
    margin: 0;
    padding: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    flex-wrap:wrap;
    overflow: hidden;
}
.ccpt_img div {
    height: 50%;
}
.ccpt_img div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 768px以下用の記述 */
@media screen and (max-width: 768px) {
.ccpt_img {
    height: 1200px;
}
.ccpt_img div {
    height: 25%;
}
}