@charset "UTF-8";
/* ---------------------------------------------------------------------
 * コンセプトページ
 * --------------------------------------------------------------------- */

.pages_main_image{height:auto;position: relative}
.pages_main_image .images{width: 100%;height: auto;min-width: 1200px;}
.pages_main_image .inner{position: absolute;left: 0;right: 0;margin: auto;top: 0}

#body_btype{}


#body_btype h2{font-size: 33px;color: #9a8554; letter-spacing: 0.1em;line-height: 1.6; font-weight: normal;margin-bottom: 20px}
#body_btype .copy{font-size: 24px;letter-spacing: 0.1em;line-height: 2em;}
#body_btype section{padding: 80px 0;}

#body_btype .sec1{background: #fffaef}
#body_btype .sec1 dl{margin-top: 40px}
#body_btype .sec1 dt{font-size: 23px;letter-spacing: 0.1em;background: #e6e6e6;padding: 18px 0}
#body_btype .sec1 dd{background: #fff;padding: 40px}

#body_btype .sec1 .bg1{margin-top: 80px;margin-bottom: 50px; margin-left: 0;text-align: left;position: relative}
#body_btype .sec1 .bg1 h3{font-size: 27px;color: #9a8554; letter-spacing: 0.1em;line-height: 1.6; font-weight: normal;margin-top: 20px}
#body_btype .sec1 .bg1 .txt{font-size: 16px;letter-spacing: 0.1em;line-height: 2em;}
#body_btype .sec1 .bg1 .txt_area{position: absolute;top: 50%;transform: translateY(-50%);left: 0;right: 0;margin: auto; text-align: left;box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;padding-left:40%}
#body_btype .sec1 h4{font-size: 22px;letter-spacing: 0.1em;margin-bottom: 30px}
#body_btype span{color: #a3392e}
#body_btype .sec1 .txt{font-size: 18px;text-align: left;line-height: 1.8;margin-top: 20px}

#body_btype .sec1 .bg2{margin-top: 80px;margin-bottom: 50px; margin-right: 0;text-align: right;position: relative}
#body_btype .sec1 .bg2 h3{font-size: 27px;color: #9a8554; letter-spacing: 0.1em;line-height: 1.6; font-weight: normal;margin-bottom: 20px}
#body_btype .sec1 .bg2 .txt{font-size: 16px;letter-spacing: 0.1em;line-height: 2em;}
#body_btype .sec1 .bg2 .txt_area{position: absolute;top: 50%;transform: translateY(-50%);left: 0;right: 0;margin: auto; text-align: left;box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;}

#body_btype .sec2{background: #f2ebec;padding: 80px 0}
#body_btype .sec2 h2{font-size: 33px;color: #a3392e; letter-spacing: 0.1em;line-height: 1.6; font-weight: normal;margin-bottom: 20px}
#body_btype .sec2 .teian img{width: 100%;height: auto}
#body_btype .sec2 .teian li{width: 24%;margin-top: 40px;position: relative}
#body_btype .sec2 .teian li .arrow{width: 45px;position: absolute;top: 24%;right: -30px;z-index: 2}
#body_btype .sec2 .teian li p{margin-top: 15px}
#body_btype .sec3 img{width: 100%;height: auto;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
@media screen and (max-width: 767px) {/*スマホ設定*/
#body_btype h2{font-size: 20px;}
#body_btype .copy{font-size: 15px;}
#body_btype section{padding: 60px 0;}
#body_btype .sec1 dt{font-size: 18px;line-height: 1.8}
#body_btype .sec1 dd{padding: 20px}
#body_btype .sec1 .bg1 .photo img,
#body_btype .sec1 .bg2 .photo img{width: 100%!important}
#body_btype .sec1 .bg1 .txt_area,
#body_btype .sec1 .bg2 .txt_area{position: static;top: 0;left: 0; transform: translateY(0%);padding-left:0%}
#body_btype .sec1 .bg1 h3{font-size: 20px;}
#body_btype .sec1 .bg2 h3{font-size: 20px;margin-top: 20px}
#body_btype .sec1 .bg1 .txt,
#body_btype .sec1 .bg2 .txt{font-size: 14px;}
#body_btype .sec1 h4{line-height: 1.8;font-size:18px;}
#body_btype .sec1 .arrow{width: 30%;margin: 0 auto; text-align: center}
#body_btype .sec1 .arrow img{width: 30%;transform: rotate(90deg);}
#body_btype .sec1 .bg1 .txt,
#body_btype .sec1 .txt{font-size: 14px;}
#body_btype .sec1 .bg2{margin-top: 60px;margin-bottom: 20px; }

#body_btype .sec2{background: #f2ebec;padding: 60px 0}
#body_btype .sec2 h2{font-size: 20px;}
#body_btype .sec2 .teian{width: 100%;margin: auto;}
#body_btype .sec2 .teian li{width: 100%;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;display: -webkit-flex;flex-wrap: wrap;-webkit-flex-wrap:wrap;align-items: center;justify-content: space-between;-webkit-justify-content: space-between;}
#body_btype .sec2 .teian li img{width: 48%}
#body_btype .sec2 .teian li p{width: 48%;margin-top: 0px;}
#body_btype .sec2 .teian li .arrow{left: 0;right: 0;margin: auto;top: 102%}
#body_btype .sec2 .teian li .arrow img{width: 60%;transform: rotate(90deg);}


}
.content_area {margin-top: 80px;}
.content_area img {width: 100%;height: auto}
.tab-container {  display: flex;  flex-wrap: wrap;  }
.tab-container.con1{border-bottom: 14px solid #b07575}
.tab-container.con2{border-bottom: 14px solid #6d85a0}
.tab-container.con3{border-bottom: 14px solid #719882}
.tab {    width: 33.3333%;  opacity: 0.5;  cursor: pointer;}
.tab.active {  opacity: 1}
.content-container{background: #fff;padding: 80px 0}
.content {  display: none; /*必須*/}
.content.show {  display: block; /*必須*/}
.content li{width: 45%;text-align: left}
.content dt{font-size: 18px;line-height: 1.8}
.content dd{margin-top: 20px}
.content dd p{margin-top: 12px;}
.content1 h4{color: #b07575;font-size: 30px;padding: 50px 0}
.content2 h4{color: #6d85a0;font-size: 30px;padding: 50px 0}
.content3 h4{color: #719882;font-size: 30px;padding: 50px 0}
/*===============================================================================
===============================================================================*/
@media screen and (max-width: 767px) {/*スマホ設定*/
.tab-container{width: 100%;margin: auto}
.tab img {width: auto;height: 70px!important;object-fit: cover}
.content-container{background: #fff;padding: 40px 0}
.content1 h4,
.content2 h4,
.content3 h4{font-size: 20px;line-height: 1.7;padding: 20px 0}
.content li{width: 100%;text-align: left}
.content li:nth-child(2){margin-top: 30px}
.content dt{font-size: 15px;line-height: 1.8}
#body_btype .sec3 li.col3{width: 80%;margin: 12px auto}
}


@media print{
.body_area_inner{width: 96%;margin: auto}
#body_btype img{max-width: 100%;height: auto}

}

@media screen{
/****************************************
effect-fade
*****************************************/
.effect-fade {opacity : 0;transform : translate(0, 45px);transform : translate(0, 50px);  transition : all 1500ms;}
.effect-fade.effect-scroll {opacity : 1;transform : translate(0, 0);}

.an4-fadeleft {opacity : 0;transform : translateX(150px);transition : all 1500ms;}
.an4-fadeleft.effect-scroll {opacity : 1;transform : translate(0, 0);}

.an5-faderight {opacity : 0;transform : translateX(-150px);transition : all 1500ms;}
.an5-faderight.effect-scroll {opacity : 1;transform : translate(0, 0);}
}