@charset "UTF-8";

.residenceclubtxt{border: 1px solid #E0D1C0;padding: 30px;max-width: 1020px;margin: 0 auto 40px;line-height: 2.4;background: rgba(255,255,255,0.90);font-size: 18px;text-align: center;}

.planver{background-image: url("../imgs/bg_plan.jpg");background-size: cover;}

.wrap_torikago{max-width:500px; padding: 60px 0;margin: 0 auto 40px;}
.txt_explain{font-size: 16px;margin-bottom: 30px;text-align: center;}
.torikago_top{margin:0 0 5px;font-size: 14px;}
.torikago_bottom{margin:10px 0 0;font-size: 14px;position: relative;padding: 0 0 0 56px;}
.torikago_bottom::before{content: "";display: block;background: #EBEBEB;border: 1px solid #666;width: 50px;height: 18px;position: absolute;left:0;}
.torikago{max-width:500px; margin: 0 auto;}
.sbr{aspect-ratio: 750 / 734;}
.torikago svg{height: 100%; width: auto;}

.plan_tabs{max-width: 1020px;margin: 0 auto;display: flex;justify-content: center;position: relative;background: }
.plan_tabs::after{display: block;content: "";width: 100%;height: 7px;background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));position: absolute;bottom: -7px;}
.plan_tabs li{background: #FFF;}
.plan_tabs li a{width: 240px;display:block;padding: 8px 0;text-align: center;font-family: "EB Garamond";font-size: 20px;transition: background 0.3s ease-in-out;}
.plan_tabs li a::first-letter{font-size: 1.5rem;}
.plan_tabs .plan_tab01{border-top: 1px solid #92aeb0;border-left: 1px solid #92aeb0;}
.plan_tabs .plan_tab01 a{color: #628C8F;}
.plan_tabs .plan_tab01.active{background: #92aeb0;}
.plan_tabs .plan_tab01.active a{color: #FFF;pointer-events: none;}
.plan_tabs .plan_tab01 a:hover{color: #FFF;background: #92aeb0;}
.plan_tabs .plan_tab02{border-top: 1px solid #C4B796;border-left: 1px solid #C4B796;}
.plan_tabs .plan_tab02 a{color: #AA9A75;}
.plan_tabs .plan_tab02.cs a{opacity: 1;pointer-events: none;background-color: #F9F8FD;color: hsla(0,0%,73%,1.00);}
.plan_tabs .plan_tab02.active{background: #AA9A75;}
.plan_tabs .plan_tab02.active a{color: #FFF;pointer-events: none;}
.plan_tabs .plan_tab02 a:hover{color: #FFF;background: #C4B796;}
.plan_tabs .plan_tab03{border-top: 1px solid #cfada6;border-left: 1px solid #cfada6;border-right: 1px solid #cfada6;}
.plan_tabs .plan_tab03 a{color: #AB837B;}
.plan_tabs .plan_tab03.active{background: #AB837B;}
.plan_tabs .plan_tab03.active a{color: #FFF;pointer-events: none;}
.plan_tabs .plan_tab03 a:hover{color: #FFF;background: #cfada6;}

.plan_list01{max-width:1020px;margin: 50px auto 0;display: flex;justify-content: center;flex-wrap: wrap;padding-bottom: 60px}
.plan_box{width: 40%;margin-left: 6%;margin-bottom: 4%;}
.plan_box:first-child{margin-left: 0;}
.plan_box:nth-child(3){margin-left: 0;}
.plan_box a{width: 100%;display: block;display: flex;background: #FFF;filter: drop-shadow(0px 5px 7px rgba(0,0,0,0.6));flex-wrap: wrap;position: relative;transition: background 0.3s ease-in-out , filter 0.3s ease-in-out;}
.plan_box a:hover{filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.6));}
.pb_ttl{font-size: 14px;text-align: center;width: 22%;color: #FFF;padding: 12px 0;margin: -3px 0 0 -3px;font-family: "EB garamond";letter-spacing: 0.05em;line-height: 1.0;transition: background 0.3s ease-in-out;}
.pb_ttl::first-letter{font-size: 2.8em;}
.pb_txt01{width: 69%;margin: 0 0 0 2%;font-size: 24px;text-align: right;padding-top: 15px;font-family: "EB garamond";letter-spacing: 0.05em;}
.pb_txt01::first-letter{font-size: 1.5em;}
.pb_txt02{width: 95%;text-align: center;padding: 6px 0 10px;font-size: 14px;}
.pb_txt03{position: absolute;font-family: "EB garamond";font-size: 12px;bottom:10px;right: 4%;line-height: 1;padding-right: 1.3em}
.pb_txt03::after{content: "▼";transform: rotate(-90deg);display: block;position: absolute;top:0;right: 0;}

.color1 .pb_ttl{background:#92aeb0;}
.color1 .pb_txt01{border-bottom: 1px solid #92aeb0;}
.color1 .pb_txt03{color: #92aeb0;}
.color1 .plan_box a:hover{background: #92aeb0;color: #FFF;}
.color1 a:hover .pb_ttl{background:#FFF;color: #92aeb0;}
.color1 a:hover .pb_txt01{border-bottom: 1px solid #FFF;}
.color1 a:hover .pb_txt03{color: #FFF;}

.color2 .pb_ttl{background:#AA9A75;}
.color2 .pb_txt01{border-bottom: 1px solid #AA9A75;}
.color2 .pb_txt03{color: #AA9A75;}
.color2 .plan_box a:hover{background: #AA9A75;color: #FFF;}
.color2 a:hover .pb_ttl{background:#FFF;color: #AA9A75;}
.color2 a:hover .pb_txt01{border-bottom: 1px solid #FFF;}
.color2 a:hover .pb_txt03{color: #FFF;}

.color3 .pb_ttl{background:#AB837B;}
.color3 .pb_txt01{border-bottom: 1px solid #AB837B;}
.color3 .pb_txt03{color: #AB837B;}
.color3 .plan_box a:hover{background: #AB837B;color: #FFF;}
.color3 a:hover .pb_ttl{background:#FFF;color: #AB837B;}
.color3 a:hover .pb_txt01{border-bottom: 1px solid #FFF;}
.color3 a:hover .pb_txt03{color: #FFF;}

.casbee{max-width: 300px;margin: 0 auto;padding-bottom: 100px;}

/* 間取り詳細 */

.plan_d_ttl{font-family: "EB garamond";font-size: 24px;letter-spacing: 0.15em;text-align: center;padding: 180px 0 0 0;}

.plan_d_wrap{display: flex;justify-content: space-between;max-width: 1020px; margin: 0 auto;align-items: flex-start;position: relative;background: #FFF;}
.plan_d_ttltype{width: 35%;display: flex;justify-content: space-between;flex-wrap: wrap;padding: 15px;color: #FFF;align-items: center;}
.plan_d_detail{width: 65%;}
.pd_txt01{width: 40%;text-align: center;border-right: 1px solid #FFF;font-family: "EB Garamond";font-size: 20px;}
.pd_txt01::first-letter{font-size: 2.5em;}
.pd_txt02{width: 60%;text-align: center;font-family: "EB Garamond";font-size: 16px;}
.pd_txt03{width: 100%;text-align: center;font-size: 16px;margin: 15px 0 0 0;}
.pd_txt04{position: absolute;left:25px;top:180px;font-size: 14px;line-height: 1.8;}
.pd_txt05{position: absolute;left:25px;top:250px;font-size: 12px;line-height: 1.8;border-top: 1px solid #CCC;width: 30%;padding-top: 15px;}
.pd_hanrei{position: absolute;left:25px;bottom:25px;font-size: 14px;line-height: 1.8;display: flex;}
.pd_hanrei01{background: #f2e4cf;border:1px solid #ccc;width: 50px;height: 16px;margin: 4px 4px 0 0;}
.pd_hanrei02{background: #d2dad0;border:1px solid #ccc;width: 50px;height: 16px;margin: 4px 4px 0 14px;}
.pd_img{padding: 25px 20%;}
.pd_img_n{position: absolute;right: 40px;bottom: 40px;width: 50px;}
.pd_img_n img{width: 100%;}

.color1 .plan_d_ttltype{background:#92aeb0;}
.color2 .plan_d_ttltype{background:#AA9A75;}
.color3 .plan_d_ttltype{background:#AB837B;}

.pd_status{position: absolute;width: 20%;left:65px;top:44%}
.pd_status_ttl{text-align: center;font-family: "EB garamond";position: relative;font-size: 14px;}
.pd_status_ttl::before{width: 24%;height: 1px;background: #CCC;display: block;content: "";top:46%;position: absolute;}
.pd_status_ttl::after{width: 24%;height: 1px;background: #CCC;display: block;content: "";top:46%;position: absolute;right: 0}
.pd_status_txt{font-size: 12px;margin: 10px 0 3px 0;}
.pd_status_txt2{font-size: 12px;margin: 10px 0 -6px 0;}

.plan_d_padding{padding-bottom: 100px;}

.btn_planbtns_back{max-width: 360px;margin: 50px auto 0;}
.btn_planbtns_back a{width: 100%;display: block;background: rgba(139,140,133,1.00);padding: 15px 0;text-align: center;color: #FFF;position: relative;transition: opacity 0.3s ease-in-out;}
.btn_planbtns_back a:hover{opacity: 0.8;}
.btn_planbtns_back a::before{content: "<";position: absolute;top:12%;left: 5%;transform: scale(0.5 , 1);font-size: 30px;line-height: 1;transition: left 0.3s ease-in-out;}
.btn_planbtns_back a:hover::before{left: 4%;}

@media screen and (min-width: 768px) {


}

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

.residenceclubtxt{border: 1px solid #E0D1C0;padding: 30px 5%;max-width: 1020px;margin: 0 5% 50px;line-height: 2.4;background: rgba(255,255,255,0.90);font-size: 3.6vw;text-align: center;}
    
.planver{background-image: url("../imgs/bg_plan.jpg");background-size: cover;}

.wrap_torikago{max-width:500px; padding: 40px 0;margin: 0 8% 40px;}
.txt_explain{font-size: 3vw;margin-bottom: 30px;text-align: center;}
.torikago_top{margin:0 0 5px;font-size: 3vw;}
.torikago_bottom{margin:10px 0 0;font-size: 10px;position: relative;padding: 0 0 0 45px;}
.torikago_bottom::before{content: "";display: block;background: #EBEBEB;border: 1px solid #666;width: 40px;height: 12px;position: absolute;left:0;}
.torikago{max-width:500px; margin: 0 auto;}
.sbr{aspect-ratio: 750 / 734;}
.torikago svg{height: 100%; width: auto;}

.plan_tabs{max-width: 1020px;margin: 0 5%;display: flex;justify-content: center;position: relative;background: }
.plan_tabs::after{display: block;content: "";width: 100%;height: 7px;background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));position: absolute;bottom: -7px;}
.plan_tabs li{background: #FFF;width: 30%;}
.plan_tabs li a{width: 100%;display:block;padding: 4px 0;text-align: center;font-family: "EB Garamond";font-size: 4vw;transition: background 0.3s ease-in-out;}

.plan_list01{max-width:1020px;margin: 40px auto 0;display: flex;justify-content: center;flex-wrap: wrap;padding-bottom: 60px}
.plan_box{width: 80%;margin-left: 0;margin-bottom: 10%;}
.plan_box:first-child{margin-left: 0;}
.plan_box:nth-child(3){margin-left: 0;}
.plan_box a{width: 100%;display: block;display: flex;background: #FFF;filter: drop-shadow(0px 5px 7px rgba(0,0,0,0.6));flex-wrap: wrap;position: relative;transition: background 0.3s ease-in-out , filter 0.3s ease-in-out;}
.plan_box a:hover{filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.6));}
.pb_ttl{font-size: 3vw;text-align: center;width: 22%;color: #FFF;padding: 3% 0;margin: -2% 0 0 -2%;font-family: "EB garamond";letter-spacing: 0.05em;line-height: 1.0;transition: background 0.3s ease-in-out;}
.pb_ttl::first-letter{font-size: 2.8em;}
.pb_txt01{width: 72%;margin: 0 0 0 2%;font-size: 5vw;text-align: right;padding-top: 4%;font-family: "EB garamond";letter-spacing: 0.05em;}
.pb_txt01::first-letter{font-size: 1.5em;}
.pb_txt02{width: 95%;text-align: center;padding: 1.2% 0 2.4%;font-size: 3.2vw;}
.pb_txt03{position: absolute;font-family: "EB garamond";font-size: 3vw;bottom:10%;right: 4%;line-height: 1;padding-right: 1.3em}
.pb_txt03::after{content: "▼";transform: rotate(-90deg);display: block;position: absolute;top:0;right: 0;}


.casbee{max-width: 300px;margin: 0 15%;padding-bottom: 80px;}

/* 間取り詳細 */

.plan_d_ttl{font-family: "EB garamond";font-size: 24px;letter-spacing: 0.15em;text-align: center;padding: 90px 0 0 0;}

.plan_d_wrap{display: flex;justify-content: space-between;max-width: 1020px; margin: 0 5%;align-items: flex-start;position: relative;background: #FFF;flex-wrap: wrap;}
.plan_d_ttltype{width: 100%;display: flex;justify-content: space-between;flex-wrap: wrap;padding: 3%;color: #FFF;align-items: center;}
.plan_d_detail{width: 100%;padding-bottom: 170%;}
.pd_txt01{width: 24%;text-align: center;border-right: 1px solid #FFF;font-family: "EB Garamond";font-size: 4vw;padding: 2% 0;}
.pd_txt01::first-letter{font-size: 2.5em;}
.pd_txt02{width: 38%;text-align: center;border-right: 1px solid #FFF;font-family: "EB Garamond";font-size: 3.5vw;text-align: left;padding-left: 5%;}
.pd_txt03{width: 38%;text-align: center;font-size: 3vw;margin: 0 0 0 0;text-align: left;padding-left: 5%;}
.pd_txt04{position: static;left:25px;top:180px;font-size: 3vw;line-height: 1.8;width: 90%;margin: 10px 5%;}
.pd_txt05{position: static;left:25px;top:250px;font-size: 2.8vw;line-height: 1.4;border-top: 1px solid #CCC;width: 90%;padding-top: 15px;margin: 10px 5%;}
.pd_hanrei{position: absolute;left:5%;bottom:39%;font-size: 10px;line-height: 1.8;display: flex;}
.pd_hanrei01{background: #f2e4cf;border:1px solid #666;width: 40px;height: 12px;margin: 4px 4px 0 0;}
.pd_hanrei02{background: #d2dad0;border:1px solid #666;width: 40px;height: 12px;margin: 4px 4px 0 14px;}
.pd_img{padding:0 5% 45px;}
.pd_img_n{position: absolute;right: 5%;bottom: 39%;width: 15%;}
.pd_img_n img{width: 100%;}

.pd_status{position: absolute;width: 78%;left:11%;top:auto;bottom: 0;}
.pd_status_ttl{text-align: center;font-family: "EB garamond";position: relative;font-size: 4vw;}
.pd_status_ttl::before{width: 24%;height: 1px;background: #CCC;display: block;content: "";top:46%;position: absolute;}
.pd_status_ttl::after{width: 24%;height: 1px;background: #CCC;display: block;content: "";top:46%;position: absolute;right: 0}
.pd_status_txt{font-size: 10px;margin: 5% 0 3px 0;}
.pd_status_txt2{font-size: 10px;margin: 5% 0 -2% 0;}

.plan_d_padding{padding-bottom: 40px;}

.btn_planbtns{max-width: auto; width: 100%;}
.btn_planbtns_back a{width: 80%;display: block;background: rgba(139,140,133,1.00);padding: 10px 0;text-align: center;color: #FFF;position: relative;transition: opacity 0.3s ease-in-out;font-size: 4vw;margin: 0 auto;}
.btn_planbtns_back a:hover{opacity: 0.8;}
.btn_planbtns_back a::before{content: "<";position: absolute;top:8%;left: 5%;transform: scale(0.5 , 1);font-size: 8vw;line-height: 1;transition: left 0.3s ease-in-out;}
.btn_planbtns_back a:hover::before{left: 4%;}

}