@charset "UTF-8";
.yellow{color:#fff100}
.strong{font-weight:700}
:root{box-sizing:border-box;cursor:default}
*,::after,::before{box-sizing:inherit}
.pc{display:none!important}
.sp{display:inline-block!important}
.flex_pc{display:none!important}
.flex_sp{display:inline-flex!important}
@media screen and (min-width: 568px) {
.pc{display:inline-block!important}
.sp{display:none!important}
.flex_pc{display:inline-flex!important}
.flex_sp{display:none!important}
}
body{font-family: 游ゴシック体,Yu Gothic,YuGothic,sans-serif;font-size:100%}
img{max-width:100%;max-height:100%}
.cf::after{content:"";display:block;clear:both}
@media screen and (min-width: 568px) {
#wrapper{min-width:1000px;overflow:hidden}
}
.container{margin:auto;width:95%}
@media screen and (min-width: 568px) {
.container{width:1000px}
}
.title{display:flex;flex-flow:column;justify-content:center;align-items:center;width:auto;letter-spacing:3px;font-size:20px}
@media screen and (min-width: 568px) {
.title{font-size:30px}
}
.sub_title{margin:17px 0;letter-spacing:1px;line-height:1.8;text-align:center;font-size:17px;font-weight:700}
@media screen and (min-width: 568px) {
.sub_title{margin:20px 0 40px;font-size:20px}
}
#keyvisual{padding:10px 0;background:#231815}
@media screen and (min-width: 568px) {
#keyvisual{padding:0 0 20px}
}

/* 
#kv_top{position:relative;background:#231815}
@media screen and (min-width: 568px) {
#kv_top{max-width: 1100px;width: 100%;}
}
#kv_top .btn_download_box{position:fixed;top:0;width:1000px;z-index:500}
#kv_top .btn_download_box .btn_download{}
@media screen and (min-width: 568px) {
#kv_top .btn_download_box{right: 0;}
#kv_top .btn_download_box .btn_download{position:absolute;right:0;margin-top:0;width:200px;height:80px}
} 
*/

/* 
.kv_main_cc{position:relative;z-index:2000}
@media screen and (min-width: 568px) {
.kv_main_cc{float:right;margin-right:673px;margin-bottom:0;padding:0;width:100vw;background:#fff}
}
@media screen and (min-width: 569px) and (max-width: 1024px) {
.kv_main_cc{margin-right:573px;}
}
.kv_main_cc .kv_main_cc_inner{margin:auto;width:293px;text-align:left;padding:16px 35px;background:#fff}
@media screen and (min-width: 568px) {
.kv_main_cc .kv_main_cc_inner{float:right;margin:0;padding:16px 0 30px;width:457px;text-align:left}
}
*/
.kv_main_cc .kv_main_cc_inner h1{margin-bottom:10px;line-height:1.5;text-align:left;font-size:15px}
@media screen and (min-width: 568px) {
.kv_main_cc .kv_main_cc_inner h1{margin-bottom:10px;font-size:25px; line-height: 1.8;}
}

.kv_main_cc .kv_main_cc_inner p{position:relative;text-align:left;font-size:10px;font-weight:700;text-indent: -0.4em; padding-left: 0em;}
@media screen and (min-width: 568px) {
.kv_main_cc .kv_main_cc_inner p{font-size:15px;line-height: 1.6;text-indent: -0.4em; padding-left: 0em;}
}
.kv_main_cc .kv_main_cc_inner p:not(:last-of-type){margin-bottom:5px;line-height: 1.8;}
@media screen and (min-width: 568px) {
.kv_main_cc .kv_main_cc_inner p:not(:last-of-type){margin-bottom:5px}
} 

.logo_hdr{margin-bottom:10px;width:90px;height:auto}
@media screen and (min-width: 568px) {
.logo_hdr{width:181px;height:auto}
}
.kv_sub_cc{color:#fff;background:#231815;height:-webkit-fill-available;}
/* @media screen and (min-width: 568px) {
.kv_sub_cc{float:right;margin-top:20px;margin-right:830px}
}
@media screen and (min-width: 569px) and (max-width: 1024px) {
.kv_sub_cc{margin-right:680px}
.kv_main_cc .kv_main_cc_inner{width:407px;}
}
.kv_sub_cc .kv_sub_cc_inner{position:relative;display:flex;flex-flow:column;justify-content:space-between;padding-right:0;width:100%;height:100%}
@media screen and (min-width: 568px) {
.kv_sub_cc .kv_sub_cc_inner{padding-right:14px;width:338px}
}
@media screen and (max-width: 567px) {
.kv_sub_cc .spFlex{display: flex;margin: 0 auto;align-items: flex-end;}
.kv_sub_cc .spFlex picture{max-width: 300px;margin-bottom: 10px;}
}
@media screen and (min-width: 568px) {
.kv_sub_cc .spFlex{height: 290px;}
}


.kv_sub_cc .kv_sub_cc_inner .line_bottom{margin-bottom:3px;padding-bottom:3px;line-height:1;border-bottom:1px solid #fff}
@media screen and (min-width: 568px) {
.kv_sub_cc .kv_sub_cc_inner .line_bottom{margin-bottom:12px;padding-bottom:11px;font-size:14px}
}
.kv_sub_cc .kv_sub_cc_inner p{line-height:1.6;}
@media screen and (min-width: 568px) {
.kv_sub_cc .kv_sub_cc_inner p{font-size:14px; line-height: 1.8;margin-bottom: 5px;}
}
@media screen and (min-width: 568px) {
.kv_sub_cc .kv_sub_cc_inner{width:300px}
} */
.kv_bg{margin-top:-26px;z-index:0}
@media screen and (min-width: 568px) {
.kv_bg{position:absolute;top:0;left:355px;margin:0;max-width:inherit;width:1200px;height:auto}
}
.btn_download{}
/* @media screen and (min-width: 568px) {
.btn_download{width: 305px; margin: 2px 0 0-8px;}
} */
.pic_3house{}
@media screen and (min-width: 568px) {
.pic_3house{vertical-align:text-bottom}
}
.btn_watch{display:flex;flex-flow:column;align-items:center;justify-content:center;margin: 1rem auto 0;padding:11px 0;width:80%;letter-spacing:2px;font-weight:700;font-size:15px;color:#fff;background:#231815;border: 2px #ae9458 solid;}
@media screen and (min-width: 568px) {
.btn_watch{display:flex;flex-flow:row;align-items:center;justify-content:center;padding:19px 0;width:677px;font-size:22px;border: 5px #ae9458 solid;position: relative;
}
}
.btn_watch::before{content:"";display:inline-block;width:14px;height:10px;background:url(../img/icon_arrow_w_down.png) center/14px 10px no-repeat;position: absolute;right:14%;}
@media screen and (min-width: 568px) {
.btn_watch::before{content:"";display:inline-block;width:28px;height:19px;background:url(../img/icon_arrow_w_down.png) center/28px 19px no-repeat;position: absolute;right:110px;}
}

/* #kv_bottom{margin:auto;padding:10px 0} */
@media screen and (min-width: 568px) {
#kv_bottom{margin:0 auto 10px;width:100%}
}
#kv_bottom .kv_slider{position:relative;display:flex;flex-flow:row}
#kv_bottom .kv_slider::before{content:"";position:absolute;top:0;bottom:0;left:0;width:56px;height:100%;background:#000;opacity:.6;z-index:300}
@media screen and (min-width: 568px) {
#kv_bottom .kv_slider::before{width:195px}
}
#kv_bottom .kv_slider::after{content:"";position:absolute;top:0;bottom:0;right:0;width:56px;height:100%;background:#000;opacity:.6;z-index:300}
@media screen and (min-width: 568px) {
#kv_bottom .kv_slider::after{width:195px}
}
#kv_bottom .kv_slider li{position:relative;padding:15px 10px;background:#fff}
#kv_bottom .kv_slider li p{width:100%;height:130px}
@media screen and (min-width: 568px) {
#kv_bottom .kv_slider li {padding: 20px 10px;}
#kv_bottom .kv_slider li p{height:200px}
}
.kv_slider_item_01 > p{background:url(../img/kv_slider_pic_01.jpg) center/cover no-repeat}
.kv_slider_item_02 > p{background:url(../img/kv_slider_pic_02.jpg) center/cover no-repeat}
.kv_slider_item_03 > p{background:url(../img/kv_slider_pic_03.jpg) center/cover no-repeat}
.kv_slider_item_04 > p{background:url(../img/kv_slider_pic_04.jpg) center/cover no-repeat}
.kv_slider_item_05 > p{background:url(../img/kv_slider_pic_05.jpg) center/cover no-repeat}
.kv_slider_item_06 > p{background:url(../img/kv_slider_pic_06.jpg) center/cover no-repeat}
.kv_slider_item_07 > p{background:url(../img/kv_slider_pic_07.jpg) center/cover no-repeat}
.kv_slider_item_08 > p{background:url(../img/kv_slider_pic_08.jpg) center/cover no-repeat}
.kv_slider_item_09 > p{background:url(../img/kv_slider_pic_09.jpg) center/cover no-repeat}
.kv_slider_item_10 > p{background:url(../img/kv_slider_pic_10.jpg) center/cover no-repeat}
.kv_slider_item_11 > p{background:url(../img/kv_slider_pic_11.jpg) center/cover no-repeat}
.kv_slider_item_12 > p{background:url(../img/kv_slider_pic_12.jpg) center/cover no-repeat}
.prev-arrow{position:absolute;top:0;bottom:0;margin:auto;left:125px;background:url(../img/icon_arrow_left_white.png) center/46px 84px no-repeat;width:46px;height:84px;z-index:2000;cursor:pointer}
.next-arrow{position:absolute;top:0;bottom:0;margin:auto;right:125px;background:url(../img/icon_arrow_right_white.png) center/46px 84px no-repeat;width:46px;height:84px;z-index:2000;cursor:pointer}
#concept{padding:30px 0;background:#e5e5e5}
@media screen and (min-width: 568px) {
#concept{padding:50px 0}
}
#concept_container{background-color: #fff;padding: 45px;}
.concept_content{text-align:center}
.concept_main_pic{margin-bottom:23px}
@media screen and (min-width: 568px) {
.concept_main_pic{margin-bottom:20px;width:585px;height:auto}
}
.concept_txt{line-height:1.8;text-align:center;font-size:11px}
@media screen and (min-width: 568px) {
.concept_txt{font-size:15px}
}

#works_container {margin-bottom: 50px;}
#works{padding:30px 0 0;}
/* @media screen and (min-width: 568px) {
#works{padding:50px 0}
} */
#works .title::after{background:#fff}
@media screen and (min-width: 568px) {
#works .title::after{content:""}
}
#works .sub_title{line-height:1.6;margin-bottom: 20px;}
.worls_txt_01{margin-bottom:25px;text-align:center;line-height:1.6;font-size:13px;font-weight:lighter}
@media screen and (min-width: 568px) {
.worls_txt_01{margin-bottom:50px;font-size:20px}
}

.works_content{max-width: 1230px;margin: auto;}
.works_content .data{text-align: center;font-weight: bold;line-height:1.6;font-size: 10px;}
@media screen and (min-width: 568px) {
.works_content .data{font-size: 15px;}
.works_content_item{float:left;width:48%}
.works_content_item:last-of-type{float:right}
}
.works_content_item h3{letter-spacing:2px;text-align: center;font-size:13px;font-weight:700;margin: 15px 0 5px;}
@media screen and (min-width: 568px) {
.works_content_item h3{font-size:15px;margin:30px 0 20px;
}
}
.works_content_item h3 .number{font-size:13px;color: #ae9458;display: block;padding-bottom: 10px;}
@media screen and (min-width: 568px) {
.works_content_item h3 .number{font-size:18px;margin-bottom: 15px;padding-bottom: 0;}
}
.works_content_item h3 .small{margin-leftfont-size:11px;font-weight:400}
@media screen and (min-width: 568px) {
.works_content_item h3 .small{font-size:17px}
}
.works_content_item .txt{margin:15px 0 17px;line-height:1.6;font-size:11px}
@media screen and (min-width: 568px) {
.works_content_item .txt{font-size:15px;margin-bottom: 30px;}
}

.madori_list .madori_01 {margin-top: 0;}
.madori_list div .madori01_style{display: block;background-color: #e5e5e5; padding: 10px;margin-bottom: 20px;}
.madori_list div .btn{display:flex;align-items:center;justify-content:center;margin:24px 0;padding:15px 0;color:#000;font-weight:normal;letter-spacing:1px;border: none;box-shadow: none;text-decoration: underline;}
.flexBox {display: flex;position: relative;}
.flexBox:before {transform:translate(-50%,0);position: absolute;left: 50%;bottom: 2px;content:"";display:inline-block;margin-right:10px;width:100px;height:11px;background:url(../img/icon_arrow_right_03.png) center/100px 11px no-repeat;}
.flexBox figure {width: 50%;text-align: center;}
.flexBox figure img {margin-bottom: 5px;}
.case_button {font-size: 12px;font-weight: bold;color: #000;}
@media screen and (min-width: 568px) {
.madori_list .madori_01 {margin: 58px 0 0;}
.madori_list div .madori01_style{padding: 20px;}
.madori_list div .btn{padding:0;letter-spacing:0;font-size:20px;width: 100%;position: relative;}
.flexBox {}
.flexBox:before {width:140px;height:12px;background:url(../img/icon_arrow_right_03.png) center/140px 12px no-repeat;}
.case_button {font-size: 15px;}
.modal_case_list .flexBox figure {font-size: 20px;font-weight: bold;}
}
/* .madori_list div .btn:before{content:"";display:inline-block;margin-right:10px;width:21px;height:21px;background:url(../img/icon_tri_02.png) center/21px 21px no-repeat}
@media screen and (min-width: 568px) {
.madori_list div .btn:before{width:20px;height:28px;background:url(../img/icon_tri_03.png) center/20px 28px no-repeat;position: absolute;right:40px;}
} */
#modal_list_box02{display:none;position:fixed;top:0;left:0;right:0;bottom:0;margin:auto;width:83%;height:90%;z-index:9999}
#modal_list_box02 .modaal-content-container {
    padding: 10px;
}
.madori {background-color: #e5e5e5;padding: 30px 0;margin: -10px;}
.madori h3 {font-size: 20px;font-weight: bold; color: #ae9458; text-align: center;padding-bottom: 30px;
}


@media screen and (min-width: 568px) {
.case_list{margin:auto;max-width:1400px}
}
.case{display:flex;align-items:center;padding:25px 0}
@media screen and (min-width: 568px) {
.case{display:inline-flex;float:left;width:50%;height:378px;padding:56px 0}
}
.case .case_button{width: 128px;height: 125px;position:relative;display:inline-flex;flex-flow:column;align-items:center;justify-content:center;margin:auto;padding-top:10px;background:#fff;box-shadow:0px 0px 3px 1px #ae9458;border-radius: 100px;
 }
@media screen and (min-width: 568px) {
.case .case_button{width:200px;height:200px;}
}
.case .case_button h3{color:#ae9458;text-align:center;letter-spacing:1px;font-size:15px;margin: 10px 0;}
@media screen and (min-width: 568px) {
.case .case_button h3{font-size:25px;margin: 12px 0;}
}
.case .case_button h3 .short{letter-spacing:0}
.case .case_button p{font-size: 10px;display:inline-flex;flex-flow:column;align-items:center;justify-content:center;color:#ae9458;letter-spacing:1px;font-weight: bold;line-height: 1.4;text-align: center;

}
.case .case_button p:last-of-type{font-size:10px;color: #000;line-height: 1;margin-bottom: 15px;}
@media screen and (min-width: 568px) {
.case .case_button p{font-size: 15px;}
.case .case_button p:last-of-type{font-size:16px;}
}
.case .case_button p:last-of-type::after{content:"";display:inline-block;width:75px;height:10px;background:url(../img/icon_arrow_right_white_02.png) center/75px 10px no-repeat}
@media screen and (min-width: 568px) {
.case .case_button p:last-of-type::after{width:121px;height:18px;background:url(../img/icon_arrow_right_white_02.png) center/121px 18px no-repeat}
}
.case_01{background:url(../img/work_item_01_bg.png) center/cover no-repeat}
@media screen and (min-width: 568px) {
.case_01{background:url(../img/work_item_01_bg.png) center/cover no-repeat}
}
.case_02{background:url(../img/work_item_02_bg.png) center/cover no-repeat}
@media screen and (min-width: 568px) {
.case_02{background:url(../img/work_item_02_bg.png) center/cover no-repeat}
}
.case_03{background:url(../img/work_item_03_bg.png) center/cover no-repeat}
@media screen and (min-width: 568px) {
.case_03{background:url(../img/work_item_03_bg.png) center/cover no-repeat}
}
.case_04{background:url(../img/work_item_04_bg.png) center/cover no-repeat}
@media screen and (min-width: 568px) {
.case_04{background:url(../img/work_item_04_bg.png) center/cover no-repeat}
}
#modal{display:none}
.leftRoll{position:absolute;top:50%;left:-30px;}
.leftRoll{background:url(../img/icon_arrow_left_white.png) center/23px 42px no-repeat;width:23px;height:42px;}
@media screen and (min-width: 568px) {
.leftRoll{left:-10%; transform: translate(0, -50%);}
.leftRoll{background:url(../img/icon_arrow_left_white.png) center/46px 84px no-repeat;width:46px;height:84px;}
}

.rightRoll{position:absolute;top:50%;right:-30px;}
.rightRoll{background:url(../img/icon_arrow_right_white.png) center/23px 42px no-repeat;width:23px;height:42px;}
@media screen and (min-width: 568px) {
.rightRoll{right:-10%; transform: translate(0, -50%);}
.rightRoll{background:url(../img/icon_arrow_right_white.png) center/46px 84px no-repeat;width:46px;height:84px;}
}

#modal_list_box{display:none;position:fixed;top:0;left:0;right:0;bottom:0;margin:auto;width:83%;height:90%;z-index:9999}
.modal_case_list{height:100%}
.modal_case_item{display:none;padding:10px 12px;line-height:1.2;height:100%;font-size:12px;color:#362e2b}
.case_pic{margin-bottom:20px;height:auto;text-align: center;font-size: 10px;font-weight: bold;}
.case_pic:first-of-type{margin-bottom:10px}
@media screen and (min-width: 568px) {
.case_pic{float:left;width:340px;font-size: 20px;}
.case_pic:first-of-type{margin-right:40px}
}


@media screen and (max-width: 567px) {
.modal_case_item .spFlex {display: flex;flex-direction: column-reverse;}
.modal_case_item .flexBox {flex-direction: column;}
.modal_case_item .flexBox figure {width: 100%;font-weight: bold; display: flex;flex-direction: column-reverse;}
.modal_case_item .flexBox figure img {margin: 5px 0 15px;}
.modal_case_item .flexBox::before {display: none;}
}

.closeBtn{cursor: pointer; position: absolute;left: 50%; bottom: -50px; width: 100%;padding:8px 0;color:#fff;font-weight:700;letter-spacing:1px;border: 2px #ae9458 solid;background-color: #000;transform: translate(-50%,0);}
@media screen and (min-width: 568px) {
.closeBtn{bottom: -80px; width: 76%;padding:15px 0;}
}

.inner_case h3{margin:10px 0;letter-spacing:2px;font-weight:700;font-size:13px}
@media screen and (min-width: 568px) {
.inner_case h3{margin-bottom:10px;font-size:20px}
}
@media screen and (min-width: 568px) {
.inner_case h3 .area{margin-left:20px}
}
.inner_case .inner_case_txt{line-height:1.8}
@media screen and (min-width: 568px) {
.inner_case .inner_case_txt{font-size:15px;text-align: left;margin-bottom: 25px;
}
}
.inner_case .inner_case_txt01{width: 230px;font-size: 10px;font-weight: bold;background-color: #e5e5e5;color:#ae9458;text-align: center;padding: 5px 0;margin: 0 auto;}
.inner_case .inner_case_txt02{font-size: 13px;font-weight: bold;text-align: center;}
.inner_case .inner_case_txt03{font-size: 13px;text-align: center;margin: 15px 0 20px;}
.inner_case h3{font-size: 13px;font-weight: bold;color:#ae9458;text-align: center
}
.inner_pic {margin: 0 auto; max-width: 720px;}
@media screen and (min-width: 568px) {
.inner_case .inner_case_txt01{font-size: 15px;}
.inner_case .inner_case_txt02{font-size: 18px;}
.inner_case .inner_case_txt03{font-size: 18px;}
.inner_case h3{font-size: 20px;}
}

.download{padding:16px 0;background:#fff}
@media screen and (min-width: 568px) {
.download{padding:30px 0}
}
.download:last-of-type{padding:17px 0 25px}
@media screen and (min-width: 568px) {
.download:last-of-type{padding:0}
}
.download_container{margin:auto;padding:14px 0;text-align:center;background:url(../img/download_bg.png)}
@media screen and (min-width: 568px) {
.download_container{padding:30px 0 0;max-width:1000px;width:100%}
}
.download_container h3{display:none}
@media screen and (min-width: 568px) {
.download_container h3{display:inline-block;text-align:center;display:inline-block;margin-bottom:32px;padding:0 35px;text-align:center;font-size:26px;color:#fff;background:url(../img/download_title_left.png) bottom left/27px 22px no-repeat,url(../img/download_title_right.png) bottom right 5px/27px 22px no-repeat}
}
.download_container p{display:flex;justify-content:center;margin-bottom:7px;padding:15px 10px;line-height:1.6;font-size:13px;font-weight:700;background-color: #fff;text-align:center;}
@media screen and (min-width: 568px) {
.download_container p{margin-right:13px;margin-bottom:0;padding:40px 10px 30px 15px;letter-spacing:1.2px;font-size:25px;min-width:320px;text-align: left;}
}
@media screen and (min-width: 568px) {
.download_container .download_pic{width:600px;height:200px}
}
.download_container .btn_download{width:85%;min-width:272px}
@media screen and (min-width: 568px) {
.download_container .btn_download{width:76%;margin:0 auto;}
}
.download_content{margin:auto;width:80%;min-width:272px}
@media screen and (min-width: 568px) {
.download_content{margin-bottom:5px;display:flex;flex-flow:row;width:920px}
}
#merit{padding:30px 0 40px;background:url(../img/merit_bg.png) center/cover no-repeat}
@media screen and (min-width: 568px) {
#merit{background:url(../img/sp_merit_bg.png) center/cover no-repeat;border-top: 2px #ae9458 solid;border-bottom: 2px #ae9458 solid;margin: 100px 0;}
}
.merit_list{margin:auto;width:80%}
@media screen and (min-width: 568px) {
.merit_list{display:flex;flex-flow:row;width:100%;justify-content:space-between}
}
.merit_list li{margin-bottom: 40px;}
@media screen and (min-width: 568px) {
.merit_list li{width:31%; margin-bottom: 0;}
}
.merit_list li h3{letter-spacing:1.2px;text-align:center;padding:10px 0;font-size:15px;color:#231815;}
@media screen and (min-width: 568px) {
.merit_list li h3{padding:20px 0;font-size:20px;margin: 0;}
}
.merit_list li h3 .num{margin-right:5px;padding:2px 3px;background:#fff100}
.merit_list li p{line-height:1.6;font-size:11px;line-height:1.6;font-size:11px}
.merit_list li .num {font-size: 15px;border: 1px #000 solid;border-radius: 30px;width: 31px;height: 31px;text-align: center;line-height: 30px;margin: 0 auto 20px;}
@media screen and (min-width: 568px) {
.merit_list li .num {font-size: 30px;border: 2px #000 solid;border-radius: 30px;width: 62px;height: 62px;line-height: 60px;margin: 0 auto 20px;}
.merit_list li p{font-size:15px}
}
.merit_item_pic{display:block;margin:auto;width:auto;height:75px}
#qa{padding:30px 0;background:#e5e5e5}
@media screen and (min-width: 568px) {
#qa{padding:68px 0 92px}
}
.qa_item{position:relative;margin-left:15px;background:#fff}
.qa_item:not(:last-of-type){margin-bottom:23px}
@media screen and (min-width: 568px) {
.qa_item:not(:last-of-type){margin-bottom:32px}
}
.qa_item h3{display:flex;align-items:center;padding:0 33px;line-height:1.6;font-size:12px;width:100%;background-color: #fff;color:#000;min-height:50px;cursor:pointer}
@media screen and (min-width: 568px) {
.qa_item h3{padding:0 60px;font-size:15px;height:60px;}
}
.qa_item h3 .qa_arrow{content:"";display:inline-block;position:absolute;top:14px;margin:auto;right:10px;min-width:22px;min-height:22px;border:1px solid #ae9458;background:#fff;transition:.3s}
@media screen and (min-width: 568px) {
.qa_item h3 .qa_arrow{right:16px;width:37px;height:37px;border:2px #ae9458 solid;}
}
.qa_item h3 .qa_arrow .qa_arrow_icon{display:inline-block;position:absolute;top:-5px;bottom:0;left:0;right:0;margin:auto;content:"";width:10px;height:10px;border:2px solid;border-color:transparent transparent #ae9458 #ae9458;border-radius:1px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:.3s;-o-transition:.3s;transition:.3s}
@media screen and (min-width: 568px) {
.qa_item h3 .qa_arrow .qa_arrow_icon{width:15px;height:15px}
}
.qa_item h3::before{content:"Q";position:absolute;top:10px;left:-17px;display:inline-flex;align-items:center;justify-content:center;margin:auto;width:25px;height:25px;font-size:21px;background:#fff;color:#000;border: 3px solid #ae9458;}
@media screen and (min-width: 568px) {
.qa_item h3::before{margin-right:16px;width:40px;height:40px;font-size:27px}
}
.qa_item_txt{display:none;padding:15px 12px 29px;line-height:1.8;font-size:11px}
@media screen and (min-width: 568px) {
.qa_item_txt{padding:15px 60px 25px;font-size:14px}
}
.qa_item_txt .answer{margin-right:3px;font-size:27px;font-weight:700;letter-spacing:2px;color:#231815;vertical-align:text-bottom;line-height:.6}
@media screen and (min-width: 568px) {
.qa_item_txt .answer{margin-right:3px;font-size:27px;letter-spacing:2px}
}
.qa_item_txt a{color:#231815;border-bottom:1px solid #231815}
#area{padding:30px 0;background:#f6f6f6}
@media screen and (min-width: 568px) {
#area{padding:40px 0;}
}
.area_content{padding:27px 0;}
@media screen and (min-width: 568px) {
}
.area_main_map{display:block;margin:0 auto 24px;width:80%;height:auto}
@media screen and (min-width: 568px) {
.area_main_map{margin:0 auto 50px;width:717px}
}
.area_content .box {background-color: #fff;text-align: center;padding: 15px 5px;}
.area_content .box p {line-height: 2;font-size: 10px;}
@media screen and (min-width: 568px) {
.area_content .box {max-width: 1000px;padding: 30px;}
.area_content .box p {line-height: 2;font-size: 15px;}
}

#line{padding:34px 0 8px}
@media screen and (min-width: 568px) {
#line{padding:60px 0}
}
#line .line_title{display:flex;flex-flow:column;justify-content:center;align-items:center}
@media screen and (min-width: 568px) {
#line .line_title{align-items:flex-start}
}
#line .line_title .line_logo{display:block;width:161px;height:auto}
@media screen and (min-width: 568px) {
#line .line_title .line_logo{width:114px}
}
#line .sub_line_title{display:block;margin:26px 0;letter-spacing:1px;line-height:1.6;font-size:18px;}
@media screen and (min-width: 568px) {
#line .sub_line_title{margin:20px 0;font-size:20px}
}

#line .leftSide{width: 100%;}
#line .rightSide{width: 100%;display: flex;flex-direction: column;}
#line .snsArea {position:relative;}
#line .snsArea h3 {text-align: center;margin: 0 auto;}
#line .snsArea .leftSide .submit_friend{background-color: #d22d6a;padding: 10px 0;margin-top: 15px;}
#line .snsArea .rightSide .submit_friend{background-color: #405887;padding: 10px 0;margin-top: 15px;}
#line .submit_friend{margin-bottom: 25px;font-size: 13px;position: relative;
}
@media screen and (min-width: 568px) {
#line_container{position:relative; display: flex;justify-content: space-between;margin-bottom: 50px;}
#line .leftSide{width: 48%;}
#line .rightSide{width: 48%;align-items: flex-end;}
#line .snsArea {display: flex;justify-content: space-between;}
#line .snsArea h3 {text-align: center;margin: 0 auto;}
#line .snsArea .leftSide .submit_friend{padding: 20px 0;margin-top: 15px;}
#line .snsArea .rightSide .submit_friend{padding: 20px 0;margin-top: 15px;}
#line .submit_friend{margin-bottom: 0;font-size: 20px;}
}
@media screen and (max-width: 567px) {
#line_container{width: 80%;}
#line .snsArea {width: 80%;}
}


.line_content{letter-spacing:1px;font-size:12px}
@media screen and (min-width: 568px) {
.line_content{font-size:15px;line-height: 1.6;margin-bottom: 5px;}
}
.line_content p:not(:last-of-type){line-height:1.8;margin-bottom:20px}
#line_container .rightSide {flex-direction: column-reverse;}
.submit_friend{display:flex;align-items:center;justify-content:center;margin-top:24px;padding:15px 0;color:#fff;font-weight:700;letter-spacing:1px;background:#1fc100}
@media screen and (min-width: 568px) {
.submit_friend{padding:20px 0;letter-spacing:2px;font-size:20px;width: 100%;position: relative;
}
}
.submit_friend::before{content:"";display:inline-block;margin-right:10px;width:10px;height:10px;background:url(../img/icon_tri_02.png) center/10px 10px no-repeat;position: absolute;right:8%;}
@media screen and (min-width: 568px) {
.submit_friend::before{width:20px;height:28px;background:url(../img/icon_tri_02.png) center/20px 28px no-repeat;position: absolute;right:40px;}
}
footer{display:flex;flex-flow:column;align-items:center;justify-content:center;padding:20px 0;background:#231815;}
@media screen and (min-width: 568px) {
footer{margin-top:60px;padding:48px 0}
}
footer .link {margin-bottom: 15px;}
footer .link a {color: #fff;font-size: 10px;text-decoration: underline;}
footer .copyright{width: 95%;margin: 0 auto;text-align: center;
}
@media screen and (min-width: 568px) {
footer .link a {font-size: 15px;}
footer .copyright{width: 100%;align-items:inherit;justify-content:inherit;letter-spacing:1px;font-size:10px;color:#fff;flex-flow:row;font-size:14px;}
}
footer .copyright span{display:inline-block}
.logo_footer{margin-bottom:15px;width:108px;height:30px}
@media screen and (min-width: 568px) {
.logo_footer{margin-bottom:33px;width:208px;height:59px}
}
.back_top{display:inline-block;position:absolute;right:15px;bottom:15px;color:#000;border:1px solid #737373;background:#fff;padding:4px 8px;border-radius:5px;letter-spacing:1.2px;font-size:12px}
@media screen and (min-width: 568px) {
.hover:hover{box-shadow:0 0 8px #000;transition:.3s}
}
.active .qa_arrow{transform:rotate(180deg);transition:.3s}
.open{display:block!important}
@media screen and (min-width: 568px) {
.hover_02:hover{opacity:.8;transition:.3s}
}


/* -----｜-----｜-----｜-----｜-----
PC top_area 20201020 追加
-----｜-----｜-----｜-----｜----- */
section.top_area{
    display: flex;
    justify-content: space-between;
    height: 650px;
}
.flex_top_area{
    display: flex;
    flex-direction: column;
    width: 40%;
}
.top_area_img {
    background-image: url(../img/kv_bg.png);
    width: 60%;
    background-repeat: no-repeat;
    background-size: cover;
}
a.btn_download.hover.pc {
    position: absolute;
    top: 0;
    right: 0;
    width: 198px;
}
.kv_main_cc {
    position: relative;
    background-color: #fff;
    height: 100%;
}
.kv_main_cc_inner{
    position: absolute;
    margin: 2.5rem 0px;
    padding-left: 0.5rem;
    width: 400px;
    right: 0;
}
.kv_main_cc_inner p {
    display: block!important;
}
.kv_sub_cc{
    position: relative;
    background-color: #231815;
    height: 100%;
}
.kv_sub_cc_inner{
    position: absolute;
    margin: 2.5rem 0px;
    width: 400px;
    right: 0;
}
.txtSide {
    line-height: 2.5;
    padding-bottom: 1rem;
}


/* -----｜-----｜-----｜-----｜-----
SP top_area 20201020 追加
-----｜-----｜-----｜-----｜----- */
@media screen and (max-width: 567px) {

    section.top_area {
        display: flex;
        flex-direction: column;
    }
    .logo_hdr {
        margin-bottom: 1rem;
        width: 230px;
    }

    .flex_top_area,
    .top_area_img{
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .kv_main_cc {
        position: unset;
        background-color: #fff;
        height: 100%;
        text-align: center;
        border-bottom: 3px solid #000;
    }
    .kv_main_cc_inner{
        position: unset;
        margin: 1.5rem 0px;
        padding-left: 0!important;
        width: 100%;
    }
    .kv_main_cc_inner p{
        display: none!important;
    }
    .kv_sub_cc{
        position: unset;
        background-color: #231815;
        height: 100%;
        text-align: center;
    }
    .kv_sub_cc_inner{
        position: unset;
        margin: 2.5rem 0px;
        padding-left: 0!important;
        width: 100%;
    }
    .txtSide {
        line-height: 2;
        padding: 0 2.5rem 1rem;
        text-align: left;
        font-size: 0.8rem;
    }
    .kv_main_cc .kv_main_cc_inner h1{
        text-align: center;
        font-size: 20px;
    }
    #keyvisual{
        margin-top: 4rem;
    }
    a.btn_watch.scroll_button.hover_02 {
        margin: 1.5rem auto 1rem;
        padding: 1rem;
    }

}
/* -----｜-----｜-----｜-----｜-----
PC cta_area 20201020 追加
-----｜-----｜-----｜-----｜----- */

section.cta_area{
    background-color: #fff;
    margin: 0 auto 2rem;
}
.more_cta {
    background: url(../img/more_cta.jpg) no-repeat;
    text-align: center;
    background-size: cover;
    padding: 2rem;
    max-width: 1000px;
    margin: 2rem auto;
}
.more_cta h2 {
    font-size: 20px;
    color: #fff;
    letter-spacing: 1px;
}
.more_cta h2::before{
    content: url(../img/h2_before.png);
    padding-right: 1rem;
}
.more_cta h2::after{
    content: url(../img/h2_after.png);
    padding-left: 1rem;
}
.felex_more_cta{
    display: flex;
    justify-content: center;
    margin: 2rem auto 1rem;;
}
.felex_more_cta_item{
    background-color: #E5E5E5;
    padding: 1.3rem;
    margin-right: .5rem;
    text-align: left;
    line-height: 1.5;
}
.felex_more_cta_item p {
    font-size: 20px;
    font-weight: bold;
}

section.cta_area a:hover{
    opacity: 0.7;
    transition: 0.3s;
}

.sns_btn{
    display: flex;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
    border: 5px solid #AE9458;
    align-items: center;
    font-weight: bold;
    padding: 1rem;
}
.sns_btn p {
    margin-right: 3rem;
}
.sns_btn img {
    margin: 0 .5rem;
    border-radius: 55%;
    box-shadow: 2px 5px 10px grey;
}
.sns_btn img:hover{
    opacity: 0.7;
    transition: 0.3s;
}

/* -----｜-----｜-----｜-----｜-----
SP cta_area 20201020 追加
-----｜-----｜-----｜-----｜----- */

@media screen and (max-width: 567px) {

    .more_cta {
        width: 100%;
        padding: 1rem;
        margin: 30px auto;
    }
    .more_cta h2 {
        position: relative;
        line-height: 1.5;
    }
    .more_cta h2::before{
        position: absolute;
        top: 2.2rem;
        left: 0;
    }
    .more_cta h2::after{
        position: absolute;
        top: 2.2rem;
        right: 0;
    }
    .felex_more_cta {
        display: flex;
        margin: 1rem auto 1rem;
        flex-direction: column;
    }
    .felex_more_cta_item{
        margin: 0 0 1rem;
        padding: 1rem;
    }
    .felex_more_cta_item p {
        font-size: 0.77rem;
        font-weight: bold;
        text-align: center;
    }
    a.cta_btn {
        width: 100%;
        padding: 1.2rem;
        font-size: 20px;
    }
    a.cta_btn::before{
        content: '';
        position: absolute;
        top: 5px;
        left: 2rem;
        display: inline-block;
        width: 50px;
        height: 50px;
        background-image: url(../img/icon_free.png);
        background-size: contain;
    }
    a.cta_btn::after {
        right: 3rem;
    }
    .sns_btn {
        max-width: 100%!important;
        margin: 0 1rem;
    }
    .sns_btn p {
        margin-right: 0;
        font-size: 0.9rem;
    }
    .sns_btn a:last-child {
        border-left: 1px solid #828282;
        margin-left: 0.5rem;
        padding-left: 0.25rem;
    }
}


/* -----｜-----｜-----｜-----｜-----
PC free_house_cta 20201021 追加
-----｜-----｜-----｜-----｜----- */
section.free_house_cta {
    width: 100%;
    text-align: center;
    background: #000;
    padding: 2rem 00;
    margin-bottom: 100px;
}
section.free_house_cta a:hover{
opacity: 0.7;
transition: 0.3s;
}
/* -----｜-----｜-----｜-----｜-----
SP free_house_cta 20201021 追加
-----｜-----｜-----｜-----｜----- */
@media screen and (max-width: 567px) {
    section.free_house_cta {
        padding: 1rem;
        margin-bottom: 50px;
    }
}


/* -----｜-----｜-----｜-----｜-----
以下調整 20201021 追加
-----｜-----｜-----｜-----｜----- */
@media screen and (min-width: 568px) {
    #concept_container{margin: 0 auto;width: 914px;}
}



@media screen and (max-width: 1026px) {
    .txtSide {
        line-height: 1.5;
    }
    .kv_sub_cc_inner {
        padding-left: 1rem;
    }
    .more_cta {
        width: 100%;
    }
    .sns_btn{
        max-width: 60%;
    }
}


@media screen and (max-width: 567px) {
    .submit_friend{
        padding: 10px 0;
    }
    .container{
        width: 100%;
    }

    #concept_container{
        padding: 2rem 1rem;
        margin: 0 1rem;
    }
    #concept {
        padding: 1rem 0;
        background: #e5e5e5;
    }

    #works_container{
        margin-bottom: 20px;
    }
    #works .sub_title {
        line-height: 1.6;
        margin: 1rem 1rem 20px;
    }
    .works_content_item {
        margin: 1rem;
    }
    .madori_list div .btn{
        margin: 0;
    }
    .madori_list div .madori01_style{
        margin-bottom: 0;
    }

    .concept_txt{
        letter-spacing: -1px;
    }

    #merit {
        padding: 30px 0 0px;
        background: url(../img/sp_merit_bg.png) center/cover no-repeat;
        border-top: 2px solid #AE9458;
        border-bottom: 2px solid #AE9458;
        margin-bottom: 30px;
    }

    #qa {
        padding: 30px 1rem;
    }
    .qa_item h3 {
        padding: 0 40px 0 33px;
    }
    .qa_item h3::before {
        top: 7px;
        width: 35px;
        height: 35px;
    }

    #line .submit_friend,
    #line .snsArea .leftSide .submit_friend,
    #line .snsArea .rightSide .submit_friend{
        height: 40px!important;
    }
    #line .sub_line_title{
        font-size: 16px;
        text-align: center;
        margin: 1rem 0 0.5rem;
    }
    .line_content {
        letter-spacing: 1px;
        font-size: 12px;
        line-height: 1.5;
        text-align: center;
    }
    #line .snsArea h3 {
        font-size: 14px;
    }
}