@charset "UTF-8";

@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanmp.min.css');
@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanjp.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;600;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=EB+Garamond:wght@400;500;600;700;800&family=Public+Sans:wght@100;200;300;400;500;600;700;800;900&family=Oswald:wght@200;300;400;500;600&family=Allura&display=swap');

:root {
--main_color: #0093a2;
--request_color: #0093a2;--request_bk: linear-gradient(to bottom,#8bcecc 10%,#0093a2);--request_bk_hover: linear-gradient(to bottom,#0093a2 10%,#8bcecc);
--reservation_color: #987942;--reservation_bk: linear-gradient(to bottom,#987942, #cca756);--reservation_bk_hover: linear-gradient(to bottom,#cca756,#987942);
}

html,body{font-family: YakuHanMP, "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;}
sup{vertical-align: 0.8em;font-size: 0.5em;}
sub{font-size: 0.5em;}
img{-ms-interpolation-mode:bicubic;}
.goth{font-family: YakuHanJP, 'Public Sans', 'Noto Sans JP', sans-serif;}
.min{font-family: YakuHanMP, 'Noto Serif JP',serif;}
.tx_l{text-align: left!important;}
.tx_r{text-align: right;}
.tx_c{text-align: center;}
.note a{color:#000;word-break: break-all;}
.note a:hover{text-decoration: underline;}
article *{font-weight: 400;}
article{overflow: hidden;}

@media screen and (min-width: 769px) {
html{font-size: 20px;}
body{font-size: 20px;line-height: 1.5;}
.sp{display: none!important;}
.wrap1024{max-width: 51.2em;margin: 0 auto;}
.wrap1280{max-width: 64em;margin: 0 auto;}
.wrap1400{max-width: 70em;margin: 0 auto;}
.note{font-size: 0.65em;}
article{margin-top: 82px;}
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
html,body{font-size: 1.7vw;}
}

/* 文字アニメーション */
.text_ani{animation: 0.7s fadeInLeft 0s forwards;}

/* キャプション類 */
.cap_w,.cap_wb,.cap_b,.cap_bw,.cap_l{font-size: 0.65em;position: absolute;right: 0.7em;bottom: 0.7em;z-index: 1;line-height: 1.4;text-align: right;}
.cap_w{color: #fff;}
.cap_wb{color: #fff;text-shadow: 0px 0px 0.15em rgba(0,0,0,0.7),0px 0px 0.15em rgba(0,0,0,0.7),0px 0px 0.15em rgba(0,0,0,0.7),0px 0px 0.15em rgba(0,0,0,0.7),0px 0px 0.15em rgba(0,0,0,0.7),0px 0px 0.15em rgba(0,0,0,0.7),0px 0px 0.15em rgba(0,0,0,0.7);text-align: right;}
.cap_b{color: #000;}
.cap_bw{text-shadow: 0px 0px 0.15em rgba(255,255,255,0.9),0px 0px 0.15em rgba(255,255,255,0.9),0px 0px 0.15em rgba(255,255,255,0.9),0px 0px 0.15em rgba(255,255,255,0.9),0px 0px 0.15em rgba(255,255,255,0.9),0px 0px 0.15em rgba(255,255,255,0.9);}
.cap_o{font-size: 0.65em;margin-top: 7px;text-align: right;position: static;}
.cap_ol{font-size: 0.65em;margin-top: 7px;position: static;}
.cap_oc{font-size: 0.65em;margin-top: 7px;position: static;text-align: center;}
.cap_l{right: auto;left: 1em;text-align: left;}

@media screen and (max-width: 768px) {
html{font-size: 4vw;}
body{font-size: 4vw;line-height:1.5;}
.pc{display: none!important;}
.wrap1024{max-width: 100%;padding: 0 4vw;}
.wrap1280{max-width: 100%;padding: 0 4vw;}
.note{font-size: 2.8vw;}
article{margin-top: 55px;}

/* キャプション類 */
.cap_w,.cap_wb,.cap_b,.cap_bw,.cap_l,.cap_o,.cap_ol,.cap_oc,.cap_l{font-size: 2.8vw;line-height: 1.3;}
}

/*||||||||||||||||| ヘッダー＆メニュー |||||||||||||||||*/

header{background: rgba(255,255,255,0.9);position: fixed;width: 100%; top: 0;z-index: 1000;left: 0;height: 82px;padding: 0 15px;}
header .header_wrap{display: flex;justify-content: space-between;max-width: 1920px;margin: 0 auto;align-items: center;flex-wrap: wrap;}
.h_active header{box-shadow: 0 0 5px rgba(0,0,0,0.3);}

header h1{padding: 10px 0 0 0;z-index: 1;pointer-events: painted;}
header h1 img{width: 380px;}
header h1 a{display: inline-block;}
header h1 a:hover img{opacity: 0.6;}

/* PC用右上ボタン */
.pc_header_menu_r{display: flex;justify-content: flex-end;margin: 10px 60px 0 0;z-index: 1;pointer-events: painted;display: none;}
.pc_header_menu_r li{width: 170px;margin-left: 1%;}
.pc_header_menu_r li::before{content: "";display: block; width: calc(100% - 12px);height: calc(100% - 12px);border: 1px solid #fff;position: absolute;top:0;bottom:0;left:0;right: 0;margin: auto;z-index: 1;pointer-events: none;}
/*資料請求・来場予約ボタン*/
a.re_roleover{display: block;text-align: center;box-sizing: border-box;padding:8px 0;color:#fff;font-size:15px;overflow: hidden;position: relative;transition: .3s;letter-spacing: 0.15em;font-weight: 600;}
a.re_roleover::before{content: "";position: absolute;top: 0;left: 0;z-index: -1; width: 150%;height: 100%;transform-origin: right top;transform: skewX(-30deg) scale(0, 1);transition: transform .3s;background: #fff;}
a.re_roleover::after{content: "";position: absolute; z-index: -2;top: 0;left: 0;width: 100%;height: 100%;display: block;}
.pc_header_menu_r a.re_roleover span{display: block;border-top: 1px solid #fff;width: calc(100% - 18px);margin: 0 auto;font-size: 13px;letter-spacing: 0.1em;}

.reservation_btn a{border:1px solid var(--reservation_color);border-image: var(--reservation_bk);border-image-slice: 1;}
.reservation_btn a::after{content: "";background: var(--reservation_bk);}

.request_btn a{border:1px solid var(--request_color);border-image: var(--request_bk);border-image-slice: 1;}
.request_btn a::after{content: "";background: var(--request_bk);}

/* メニュー */
.menu_wrap{width: 400px;font-size: 20px;opacity: 0;pointer-events: none;background: rgba(255,255,255,0.9);position: fixed;right: 0;transition: 0.3s all;z-index: 11000;overflow-y: auto;box-shadow: 0 4px 5px rgba(0,0,0,0.3);padding: 0 1em 0.5em;height: calc(100% - 82px);top: 82px;border-top: 1px solid #ccc;}
.h_active .menu_wrap{pointer-events: painted;opacity: 1;}
.menu_wrap .menu{display: flex;flex-wrap: wrap;}
.menu_wrap .menu > *{width: 100%;display: flex;align-items: flex-end; border-bottom: solid 1px #ccc;padding: 0.7em 0.5em;}
.menu_wrap .menu > *::after{content: "";width: 0.3em;height: 0.3em;display: block;border-right: 2px solid #555;border-top: 2px solid #555;transform: rotate(45deg);position: absolute;right: 1em;top: 0;bottom: 0;margin: auto 0;}
.menu_wrap .menu > * > *{line-height: 1.3;transition: 0.3s all;}
.menu_wrap .menu > * > i{font-size: 0.7em;color: #000;}
.menu_wrap .menu > * > span{font-size: 0.6em;color: #333;margin-left: 1em;}
.menu a.menu_request{background: var(--request_bk);justify-content: center;margin-top: 0.5em;padding: 0.4em 0.1em;}
.menu a.menu_request:hover{background: var(--request_bk_hover);}
.menu a.menu_request::after{border-right-color: #fff;border-top-color: #fff;}
.menu a.menu_request i{color: #fff;text-align: center;}
.menu a.menu_request i::after{content: "間取りや、最新情報をお届けします";display: block;font-size: 0.8em;margin-top: 0.2em;}
.menu a.menu_request span{display: none;}

.menu a.menu_reservation{background: var(--reservation_bk);justify-content: center;margin-top: 0.5em;padding: 0.4em 0.1em;border-bottom: none;}
.menu a.menu_reservation:hover{background: var(--reservation_bk_hover);}
.menu a.menu_reservation::after{border-right-color: #fff;border-top-color: #fff;}
.menu a.menu_reservation i{color: #fff;text-align: center;}
.menu a.menu_reservation i::after{content: "予約制にてご案内いたします";display: block;font-size: 0.8em;margin-top: 0.2em;}
.menu a.menu_reservation span{display: none;}


/* セレクトページ */
#top .menu a[href$="./"],
#position .menu a[href$="./position/"],
#location .menu a[href$="./location/"],
#access .menu a[href$="./access/"],
#town_planning .menu a[href$="./town_planning/"],
#plan .menu a[href$="./plan/"],
#model_house .menu a[href$="./model_house/"],
#quality .menu a[href$="./quality/"],
#map .menu a[href$="./map/"],
#outline .menu a[href$="./outline/"]
{pointer-events: none;}
#top .menu a[href$="./"] *,
#position .menu a[href$="./position/"] *,
#location .menu a[href$="./location/"] *,
#access .menu a[href$="./access/"] *,
#town_planning .menu a[href$="./town_planning/"] *,
#plan .menu a[href$="./plan/"] *,
#model_house .menu a[href$="./model_house/"], *
#quality .menu a[href$="./quality/"] *,
#map .menu a[href$="./map/"] *,
#outline .menu a[href$="./outline/"] *
{color: #750000;}

/* 非公開 */
.menu_wrap .menu > a[href$="./quality/"]{pointer-events: none;}
.menu_wrap .menu > a[href$="./quality/"] *{opacity: 0.2;}
.menu_wrap .menu > a[href$="./quality/"]::after{opacity: 0.2;}


@media screen and (min-width: 769px){
header.fixed{box-shadow:0px 0px 5px rgba(0,0,0,0.3);}
.hb_menu{position: absolute;top: 30px;width: 30px;height: 23px;right: 5px;z-index: 990;transition: all 0.3s;cursor: pointer;display: block;pointer-events: painted;}
.hb_menu span{display: block;height: 1px;width: 100%;position: absolute;top:0;bottom: 0;left: 0;margin: auto 0;}
.hb_menu span i{display: block;height: 100%;width: 100%;transition: all 0.3s;background: #000;border-radius: 3px;}
.hb_menu span::before,
.hb_menu span::after{content:"";position: absolute;left: 0; display: block;height: 100%;width: 100%;background: #000;transition: all 0.3s;border-radius: 3px;}
.hb_menu span::before{top:-11px;}
.hb_menu span::after{bottom:-11px;}

.h_active .hb_menu span::before{transform:rotate(-135deg);top:0;right:0;}
.h_active .hb_menu span::after{transform:rotate(135deg);bottom:0;right:0;width: 100%;}
.h_active .hb_menu span i{display: none;}

a.re_roleover:hover::before{content: "";transform-origin: right top;transform: skewX(-30deg) scale(1, 1);}
.reservation_btn a:hover{color: var(--reservation_color);}
.pc_header_menu_r .reservation_btn a:hover span{border-top-color: var(--reservation_color);}
.request_btn a:hover{color: var(--request_color);}
.pc_header_menu_r .request_btn a:hover span{border-top-color: var(--request_color);}

.menu_wrap{transform: translateX(3%);}
.h_active .menu_wrap{transform: translateX(0%);}
}


/*||||||||||||||||| スマホ版メニュー（全ページ共通） |||||||||||||||||*/
/* 固定メニュー */
@media screen and (max-width: 768px) {

header{height: 55px;padding: 0;}
header.fixed{box-shadow:0px 0px 5px 1px #d3d3d3;}

header .header_wrap{display: block;pointer-events: none;}

header h1{padding: 8px 10px 0;z-index: 100;}
header h1 a{pointer-events: painted;}
header h1 img{width: 250px;}

.pc_header_menu_r{display: none;}

.h_active .menu{transform: translateY(0%);pointer-events: painted;opacity: 1;}

/* メニュー */
.menu_wrap{width: 100%;font-size: 5.3vw;height: calc(100% - 110px);position: fixed;top: 55px;transform: translateY(-3%);}
.menu_wrap .menu{width: 100%;margin: 0 auto;}
.h_active .menu_wrap{transform: translateY(0%);}

/*ハンバーガーメニュー*/
.hb_menu{position: absolute;top: 5px;width: 30px;height: 32px;right: 15px;z-index: 990;transition: all 0.3s;cursor: pointer;display: block;pointer-events: painted;}
.hb_menu::after{content: "MENU";position: absolute;bottom: -1.3em;font-size: 10px;display: block;width: 40px;text-align: center;left: -5px;}
.hb_menu span{display: block;height: 1px;width: 30px;position: absolute;top:0;bottom: 0;left: 0;margin: auto 0;}
.hb_menu span i{display: block;height: 1px;width: 100%;transition: all 0.3s;background: #000;border-radius: 3px;}
.hb_menu span::before,
.hb_menu span::after{content:"";position: absolute;left: 0; display: block;height: 1px;width: 100%;background: #000;transition: all 0.3s;border-radius: 3px;}
.hb_menu span::before{top:-9px;}
.hb_menu span::after{bottom:-9px;}

.h_active .hb_menu span::before{transform:rotate(-135deg);top:0;right:0;}
.h_active .hb_menu span::after{transform:rotate(135deg);bottom:0;right:0;width: 100%;}
.h_active .hb_menu span i{display: none;}
.h_active .hb_menu::after{content: "CLOSE";}
}


/*||||||||||||||||| フッター（全ページ共通） |||||||||||||||||*/
footer{padding: 0 0 50px;}

footer .footer_re_btn{display: flex;justify-content: center;max-width: 1130px;gap: 0 4%;margin: 80px auto 0;}
footer .footer_re_btn li{width: 44%;max-width: 550px;}
footer .footer_re_btn li::before{content: "";display: block;width: calc(100% - 12px);height: calc(100% - 12px);border: 1px solid #fff;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;z-index: 1;pointer-events: none;}
footer .footer_re_btn a{font-size: 24px;padding: 20px 0 18px;line-height: 1.2;display: block;letter-spacing: 0.1em;color: #fff;}
footer .footer_re_btn a span{font-size: 0.7em;letter-spacing: 0.1em;color: #fff;font-weight: 500;}

footer .footer_note{margin-top: 80px;padding: 0;padding: 40px 0;background: #f7f7f7;}
footer .footer_note_wrap{max-width: 1024px;margin-inline: auto;}
footer .footer_note p{padding-left: 1em;text-indent: -1em;}

footer .footer_support{margin-top: 80px;}
footer .footer_note + .footer_support{margin-top: 0;}
footer .footer_support_item{display: flex;justify-content: space-between;flex-wrap: wrap;align-items:center;gap: 50px 20px;}

footer .support{background: #f0f0e1;padding: 45px 0;width: 100%;}
footer .support_item{display: flex;justify-content: center;align-items: center;gap: 0 40px;flex-direction: column;}
footer .support_item > dt{font-size: 15px;width: auto;}
footer .foot_tel{font-size: 46px;display: inline-block;line-height: 1;margin-top: 7px;letter-spacing: 0.07em;}
footer .foot_tel::before{content:"";background: url("../img/freedial_logo.svg") no-repeat center center/contain;display: inline-block;width: 1.07em;height: 1.03em;vertical-align: -0.1em;margin-right: 0.3em;}
footer .support_item dd{font-size: 14px;width: auto;margin-top: 0.5em;}

footer .footer_btn{display: flex;justify-content:center;gap: 0 30px;width: 100%;}
footer .footer_btn a{display: flex;background: #004c80;width: 270px;justify-content:center;align-items:center;color:#fff;font-size: 17px;height: 65px;transition: 0.3s all;font-weight: 600;}
footer .footer_btn a::before{content: "";display: block; width: calc(100% - 12px);height: calc(100% - 12px);border: 1px solid #fff;position: absolute;top:0;bottom:0;left:0;right: 0;margin: auto;z-index: 1;pointer-events: none;}

footer .f_logo{text-align: center;width: 100%;}
footer .f_logo img{width: 297px;display: inline;}
footer .f_logo a{color: #000;transition: 0.3s all;display: inline-block;}
footer .f_logo a::before{content: '＜販売代理＞';display: inline-block;font-size: 14px;vertical-align: 0.7em;margin-right: 0.5em;}

footer .copyright{font-size: 13px;width: 100%;text-align: center;margin-top: 40px;}

@media only screen and (min-width: 769px) {
footer .footer_re_btn a:hover{background: none;}
footer .reservation_btn a:hover span{color: var(--reservation_color);}
footer .request_btn a:hover span{color: var(--request_color);}
footer .footer_btn a:hover{opacity: 0.7;}
footer .f_logo a:hover{opacity: 0.7;}
}

@media only screen and (min-width: 769px) and (max-width: 1100px) {
footer .footer_re_btn a span{font-size: 1.45vw;}
}

/* @media only screen and (max-width: 1450px) {
footer .footer_btn{order: 1;width: 100%;}
footer .support{order: 2;}
footer .f_logo{order: 3;}
footer .copyright{order: 4;}
}

@media only screen and (max-width: 880px) {
footer .footer_re_btn a span{font-size: 1.4vw;}

footer .footer_support_item{justify-content: center;}
} */

@media only screen and (max-width: 768px) {
footer{padding: 0 0 5vw;}

footer .footer_re_btn{flex-wrap: wrap; gap: 3vw 0;margin-top: 7vw;}
footer .footer_re_btn li{width: 100%;}
footer .footer_re_btn a{font-size: 4.5vw;padding: 3vw 0;}
footer .footer_re_btn a span{font-size: 0.6em;}

footer .footer_note{margin-top: 7vw;padding: 6vw 4vw;}

footer .footer_support{width: 100%;margin-top: 7vw;}
footer .footer_note + .footer_support{margin-top: 0;}
footer .footer_support_item{gap: 7vw 0;}

footer .support{padding: 7vw 0;width: 100%;}
footer .support_item{flex-wrap: wrap;gap: 2vw 0;}
footer .support_item > dt{font-size: 3.5vw;}
footer .foot_tel{font-size: 11vw;display: inline-block;text-align: right;line-height: 1;margin-top: 1vw;}
footer .support_item dd{font-size: 3.3vw;}

footer .footer_btn{justify-content:space-between;gap: 0;padding: 0 4vw;}
footer .footer_btn a{width: 49%;margin: 0;font-size: 3.5vw;height: 13vw;}

footer .f_logo img{width: 60vw;}
footer .f_logo a::before{font-size: 3vw;}

footer .copyright{font-size: 3vw;margin-top: 7vw;}

/* SP版フットメニュー */
.footmenu{background: var(--main_color);display: flex;position: fixed;bottom: 0;left: 0;width: 100%;z-index: 1000000;}
.footmenu a{text-align: center;color: #fff;flex: 1;padding: 5px 0;}
.footmenu a::after{content: "";width: 1px;height: calc(100% - 10px);position: absolute;right: 0;top: 5px;display: block;background: #fff;}
.footmenu a img{width: 22px;}
.footmenu a p{margin-top: 5px;line-height: 1;font-size: 9px;height: 2em;display: flex;justify-content: center;align-items: center;}
.footmenu a:last-of-type::after{display: none;}
.footmenu a.fm_reserve{background: linear-gradient(to right,#192348,#2b3d7e);}
.footmenu a.fm_request{}

}

/* トップへ戻るボタン */
a#page_top{text-decoration: none;background: #fff;border-radius: 50px;box-shadow:2px 2px 5px 1px #c9c9c9;width: 60px;height: 60px;position: fixed;right: 30px;bottom: 150px;box-sizing: border-box;display: block;display: flex;justify-content:center;align-items:center;opacity: 0.9;z-index: 20;}
a#page_top::before{font-family: "Font Awesome 5 Free";content: '\f106';font-size: 22px;color: #555;font-weight: 900;}

@media only screen and (max-width: 768px) {
a#page_top{width: 40px;height: 40px;right: 10px;bottom: 100px;z-index: 100000;}
}


/*||||||||||||||||| 下層ページ共通 |||||||||||||||||*/
.layer main{overflow: hidden;}
.layer main .page_tit{line-height: 1;position: absolute;left: 3%;top: 3%;z-index: 1;}
.layer main .page_tit i{font-weight: 300;font-family: "EB Garamond", serif;color: #fff;display: inline-block;opacity: 0;margin: 0 0.05em;font-size: 6em;}
.layer_rich_main figure{height: 25em;}
.layer_rich_main figure::after{content: "";display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
.layer_rich_main figure img{width: auto;height: 100%;left: 50%;transform: translateX(-50%);max-width: none;}
.layer_main{background: var(--main_color);height: 5em;display: flex;justify-content: center;align-items: center;}
.layer_main .page_tit{width: 100%;text-align: center;position: static!important;}
.layer_main .page_tit i{font-size: 3em!important;}

.contents_tit{text-align: center;}
.contents_tit i{display: block;width: 100%;animation-name: fadeInDown;color: rgba(95,80,70,0.2);line-height: 1;font-size: 6em;letter-spacing: 0.1em;padding-left: 0.1em;}
.contents_tit span{font-size: 1.6em;letter-spacing: 0.1em;display: block;animation-name: fadeInUp;z-index: 1;padding-left: 0.1em;}
.contents_tit i + span{margin-top: -1.5em;}
.contents_tit + *{margin-top: 2em;}
.contents_tit + p{margin-top: 0.8em;font-size: 0.9em;text-align: center;line-height: 1.9;animation-name: fadeInUp;}

.item_tit small{color: #333;font-family: "EB Garamond", serif;display: block;font-size: 0.9em;margin-bottom: 0.1em;}
.item_tit span{font-size: 1.2em;line-height: 1.2;display: block;}
.item_tit + p{font-size: 0.8em;margin-top: 0.7em;}

.layer section{padding: 3.5em 0 0;animation-name: fadeInUp;}

@media only screen and (min-width: 1921px) {
.layer_rich_main figure img{width: 100%;height: auto;top: 50%;left: 0;transform: translateY(-50%) translateX(0);max-width: none;}
}

@media only screen and (max-width: 768px) {
.layer main .page_tit i{font-size: 2.5em;}
.layer main .page_tit{left: 5%;top: 5%;z-index: 1;}
.layer_rich_main figure{height: 60vw;}
.layer_main .page_tit i{font-size: 2.5em!important;}

.contents_tit{padding-bottom: 0.4em;}
.contents_tit i{font-size: 3em;}
.contents_tit span{font-size: 1.2em;line-height: 1.2}
.contents_tit + *{margin-top: 1.5em;}
.contents_tit + p{font-size: 0.85em;line-height: 1.7;text-align: left;;}

.item_tit small{font-size: 0.9em;margin-bottom: 0.2em;}
.item_tit span{font-size: 1em;line-height: 1.3;}
.item_tit + p{font-size: 0.8em;margin-top: 0.5em;}

.layer section{padding: 2.5em 0 0;}
.layer section:nth-of-type(even){padding-bottom: 40px;}

.swipe_img{overflow-x: scroll;}
.swipe_img img{max-width: none;height: 100%;width: auto;}
.swipe{background-color: rgba(239,239,239,1);padding: 10px 0;text-align: center;margin: 2vw auto 0; width: 55vw;transition: 0.2s all;position: absolute;left: 0;right: 0;top: 50%;transform: translateY(-50%);z-index: 2;border: 2px solid #fff;}
.swipe span{font-size: 3.5vw;}
.swipe span::before{content: "";display: inline-block;width: 1.8em;height: 1.5em;background: url("../img/swipe_i.svg") no-repeat center center/contain;vertical-align: -0.4em;margin-right: 2vw;}
.swipe.hide{opacity: 0;}

/* アコーディオン */
.ac_wrap{display: none;}
.ac_btn.active{transform: rotate(45deg);}

}