@charset "utf-8";
/* ===================================================
	Base CSS
====================================================== */

@font-face {
font-display: swap;
font-family: 'Radley';
font-style: normal;
font-weight: 400;
src: url('../fonts/radley-v22-latin-regular.woff2') format('woff2');
}

body { min-width: 1500px; min-height: 100vh; background: #cac0b2 url("../img/bg_pattern_01.webp"); background-size: 150px; color: #383333; font-size: 16px; font-weight: normal; line-height: 2; font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; -webkit-text-size-adjust: 100%; position: relative; font-feature-settings: "palt"; letter-spacing: 0.15em; }
body.noscroll{ overflow: hidden;}

input,
select,
textarea { font-size: 16px;}

div { box-sizing: border-box;}

a { color: #383333; text-decoration: none;}
a:hover { color: #383333; text-decoration: underline;}
a:hover img { opacity: 0.75;}

.v_rl{ writing-mode: vertical-rl; font-feature-settings: "palt" 0;}
.ofi { object-fit: cover;}
.br_sp { display: none;}

.en{ font-family: 'Radley';}
.gothic{ font-family:"Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;}

.inner_sm{ width: 80%; max-width: 1000px; margin: 0 auto;}
.inner_md{ width: 90%; max-width: 1200px; margin: 0 auto;}
.inner_lg{ width: 100%; max-width: 1500px; margin: 0 auto;}

@media screen and (max-width: 600px) {
body { min-width: 0;}
.br_sp { display: block;}
.br_pc { display: none !important;}
}

/* ---------------------------------------------------
Common Parts
------------------------------------------------------ */
/* テキストリンクType01（アンダーラインが左から右に出現） */
.cmn_btn_01 { padding: 10px 0; position: relative; }
.cmn_btn_01:hover { text-decoration: none;}
.cmn_btn_01::before { background: #383333; content: ''; width: 100%; height: 1px; position: absolute; left: 0; bottom: 0; margin: auto; transform-origin: right top; transform: scale(0, 1); transition: transform .3s; }
.cmn_btn_01:hover::before { transform-origin: left top; transform: scale(1, 1); }

/* テキストリンクType02（アンダーラインが左から右に消失） */
.cmn_btn_02 { padding: 10px 0; position: relative; }
.cmn_btn_02:hover { text-decoration: none;}
.cmn_btn_02::before,
.cmn_btn_02::after{ content: ''; width: 100%; height: 1px; position: absolute; left: 0; bottom: 0; margin: auto; transform-origin: right top;}
.cmn_btn_02::before { background: #969696; }
.cmn_btn_02::after { background: #383333; transform: scale(0, 1); transition: transform .3s; }
.cmn_btn_02:hover::after { transform-origin: left top; transform: scale(1, 1); }

/* ボタンType03（詳細はこちら） */
.cmn_btn_03{ width: 250px; height: 60px; background: #211e1b; color: #EFEFEF; display: block; font-size: 16px; line-height: 60px; text-align: center; transition: background 0.5s; position: relative;}
.cmn_btn_03::after{ content: ""; position: absolute; top: 0; bottom: 0; right: 40px; display: block; width: 8px; height: 8px; border-right: solid 1px #fff; border-bottom: solid 1px #fff; transform: rotate(-45deg); margin: auto 0;}
.cmn_btn_03:hover{ text-decoration: none; background: #000; color: #EFEFEF;}

/* 画像パララックス */
/*.prx-outer { overflow: hidden; }
.prx-inner { height: 130%; }
.prx-inner img { width: 100%; height: 100%; }*/

/* 共通見出しType01 */
.cmn_tit_01{ display: flex; flex-direction: column; padding: 0 0 30px;}
.cmn_tit_01 span{ display: block;}
.cmn_tit_01 span.ja{ font-size: 40px; line-height: 1.2; padding: 0 0 15px;}
.cmn_tit_01 span.en{ font-size: 26px; line-height: 1; letter-spacing: 0.1em; color: #9c7b5c;}

@media screen and (max-width: 600px) {
.cmn_tit_01{ padding: 0 0 20px;}
.cmn_tit_01 span.ja{ font-size: 38px; line-height: 1.2; padding: 0 0 5px;}
.cmn_tit_01 span.en{ font-size: 19px; line-height: 1;}
}

/* Slick.js Style Overwrite */
.slide_basic.slick-dotted.slick-slider{ margin-bottom: 0 !important; line-height: 0; padding: 0 0 40px;}
.slide_basic .slick-dots{ bottom: 15px !important;}
.slide_basic .slick-dots li{ margin: 0 !important;}
.slide_basic .slick-dots li button:before{ font-size: 8px !important; color: #beb7ab; opacity: 1 !important;}
.slide_basic .slick-dots li.slick-active button:before{ font-size: 10px !important; color: #816e4d;}

@media screen and (max-width: 600px) {
.slide_basic.slick-dotted.slick-slider{ padding: 0 0 30px;}
.slide_basic .slick-dots{ bottom: 5px !important;}
}

/* 下層ページで共通リードブロック */
.cmn_sec_lead{ padding: 90px 0 120px; text-align: center;}
.cmn_sec_lead .copy{ font-size: 28px; line-height: 1.7; letter-spacing: 0.15em; padding: 0 0 30px;}
.cmn_sec_lead .txt_01{ font-size: 17px; line-height: 2; letter-spacing: 0.1em;}
.cmn_sec_lead .lnav{ display: flex; justify-content: space-between; align-items: stretch; margin: 80px 0 0;}
.cmn_sec_lead .lnav li{ width: 30%; position: relative;}
.cmn_sec_lead .lnav li a{ display: flex; justify-content: flex-start; width: 100%; height: 100%; padding: 15px 20px 15px 5px; box-sizing: border-box; font-size: 16px; line-height: 1.4;}
.cmn_sec_lead .lnav li a.cmn_btn_02::before { background: #8a7f75;}
.cmn_sec_lead .lnav li a.cmn_btn_02::after { background: #000;}
.cmn_sec_lead .lnav li::after{ content: ""; display: block; width: 6px; height: 6px; border-bottom: solid 1px #434343; border-right: solid 1px #434343; transform: rotate(45deg); position: absolute; top: 0; bottom: 0; right: 10px; margin: auto 0;}
.cmn_sec_lead .lnav li a:hover{ text-decoration: none;}

@media screen and (max-width: 600px) {
.cmn_sec_lead{ padding: 50px 0 60px; text-align: left;}
.cmn_sec_lead .copy{ font-size: 25px; line-height: 1.5; letter-spacing: 0.15em; padding: 0 0 20px;}
.cmn_sec_lead .txt_01{ font-size: 17px; line-height: 2; letter-spacing: 0.1em; text-align: left;}
.cmn_sec_lead .lnav{ flex-direction: column; margin: 40px 0 0;}
.cmn_sec_lead .lnav li{ width: 100%;}
.cmn_sec_lead .lnav li a{ font-size: 15px; line-height: 1.4;}
}

/* ---------------------------------------------------
Global Header & Global Navigation
------------------------------------------------------ */

.hd_nav,
.gn_nav{ display: flex; align-items: center; margin: 13px 20px 0 0; height: 55px; }
.hd_nav li,
.gn_nav li{ margin: 0 20px;}
.hd_nav li a,
.gn_nav li a{ display: block; text-align: center; line-height: 1.1; font-size: 18px; letter-spacing: 0.1em; color: #EFEFEF; filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.5));}
.hd_nav li a::before,
.gn_nav li a::before { background: #fff;}
.hd_nav li a:hover,
.gn_nav li a:hover{ text-decoration: none;}
.hd_rsrv,
.gn_rsrv{ width: 200px; height: auto; margin: 13px 18px 0 0; }
.hd_rsrv a,
.gn_rsrv a{ width: 100%; height: 55px; color: #EFEFEF; background: #822c25; display: block; font-size: 18px; line-height: 55px; text-align: center; transition: background 0.5s;}
.hd_rsrv a:hover,
.gn_rsrv a:hover{ text-decoration: none; background: #94352d;}
.hd_rsrv a span,
.gn_rsrv a span{ pointer-events: none;}

@media screen and (max-width: 600px) {
#g_header{ justify-content: flex-start;}
.hd_nav,
.hd_rsrv{ display: none; }
}

/* ---------------------------------------------------
Global Header
------------------------------------------------------ */
#g_header{ position: absolute; top: 0; left: 0; width: 100%; z-index: 90; display: flex; justify-content: flex-end;}

@media screen and (max-width: 600px) {
#g_header{ justify-content: flex-start;}
}

/* ---------------------------------------------------
Global Navigation
------------------------------------------------------ */
#gnav { position: fixed; top: 0; left: 0; width: 100%; min-width: 1240px; height: 80px; transition: opacity 0.8s; opacity: 0; z-index: 80; background: #272521; display: flex; justify-content: flex-end;}
#gnav.up.active { opacity: 1; z-index: 100;}
#gnav.down.active { opacity: 0; z-index: -1;}
#gnav .gn_logo{ width: 223px; margin: 20px auto 0 55px;}

@media screen and (max-width: 600px) {
#gnav,
#gnav.up.active{ display: none !important;}
}

/* ---------------------------------------------------
Main Title
------------------------------------------------------ */
.main_tit{ position: relative; width: 100%; height: 650px; display: flex; align-items: center; z-index: 1;}
.main_tit .tit{ display: flex; justify-content: center; align-items: flex-start; flex-direction: row; color: #EFEFEF; width: 70px; margin: 0 auto; padding: 0 40px 0 0; position: relative; z-index: 3;}
.main_tit span{ display: block;}
.main_tit span.ja,
.main_tit span.en{ line-height: 1.4; position: relative; z-index: 3;}
.main_tit span.ja{ font-size: 50px;}
.main_tit span.en{ font-size: 26px; transform: rotate(90deg); transform-origin: left top; position: absolute; top: 0.1em; right: -300px; height: 30px; width: 300px;}
.main_tit .img{ width: 100%; height: 650px; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 2;}

@media screen and (max-width: 600px) {
.main_tit{ height: 300px;}
.main_tit .tit{ display: flex; justify-content: center; align-items: flex-start; flex-direction: row; color: #EFEFEF; width: 40px; margin: 0 auto; padding: 0 20px 0 0; position: relative; z-index: 3;}

.main_tit span.ja{ font-size: 25px;}
.main_tit span.en{ font-size: 16px; transform: rotate(90deg); transform-origin: left top; position: absolute; top: 0.1em; right: -200px; height: 30px; width: 200px;}
.main_tit .img{ height: 300px;}
}

/* ---------------------------------------------------
	BreadCrumb
------------------------------------------------------ */
.breadcrumb{ display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; list-style-type: none; padding: 20px 50px; font-size: 14px; line-height: 1.2;}
.breadcrumb li:nth-child(n+2) a{ padding: 0 0 0 40px; position: relative;}
.breadcrumb li:nth-child(n+2) a::before{ content: ""; display: block; width: 6px; height: 6px; border-bottom: solid 1px #000; border-right: solid 1px #000; transform: rotate(-45deg); position: absolute; top: 0; bottom: 0; left: 14px; margin: auto 0;}

@media screen and (max-width: 600px) {
.breadcrumb{ padding: 20px 5vw; font-size: 12px;}
.breadcrumb li:nth-child(n+2) a::before{ width: 4px; height: 4px;}
}

/* ---------------------------------------------------
Global Footer
------------------------------------------------------ */
.ft_reservation a{ background: url("../img/ft_img_01.webp") no-repeat center center / cover; display: inline-block; width: 100%; height: 600px; overflow: hidden; z-index: 1; position: relative; }
.ft_reservation a,
.ft_reservation a::before { transition: .5s cubic-bezier(0.45, 0, 0.55, 1); }
.ft_reservation a::before { background: inherit; content: ""; display: block; filter: blur(10px) brightness(1.8); position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; z-index: -1; opacity: 0; }
.ft_reservation a:hover { text-decoration: none; }
.ft_reservation a:hover::before { opacity: 1; /*transform: scale(105%);*/ }
.ft_reservation,
.ft_reservation a{ display: flex; justify-content: center; align-items: center; flex-direction: column;}
.ft_reservation a span{ display: block; line-height: 1.1; pointer-events: none;}
.ft_reservation a span.en{ font-size: 34px; color: #9c7b5c; letter-spacing: 0.15em;}
.ft_reservation a span.ja{ font-size: 18px; color: #EFEFEF;/*border-bottom: solid 1px #fff;*/ padding: 25px 0 12px; letter-spacing: 0.1em; position: relative;}
.ft_reservation a span.ja::before,
.ft_reservation a span.ja::after{ content: ''; width: 100%; height: 1px; position: absolute; left: 0; bottom: 0; margin: auto; transform-origin: right top;}
.ft_reservation a span.ja::before { background: #969696; }
.ft_reservation a span.ja::after { background: #fff; transform: scale(0, 1); transition: transform .3s; }
.ft_reservation a:hover span.ja::after { transform-origin: left top; transform: scale(1, 1); }
.ft_box_01{ padding: 70px 0 30px; position: relative;}
.ft_logo{ padding: 0 0 35px; width: 400px;}
.ft_logo img{ width: 100%; height: auto;}
.ft_name{ font-size: 18px;}
.ft_addr{ padding: 0 0 10px; font-size: 18px;}
.ft_tel{ font-size: 22px; display: inline-block;}
.ft_open{ font-size: 16px; display: inline-block; padding: 0 0 0 1em;}
.ft_insta{ position: absolute; top: 150px; right: 0;}
.ft_nav{ position: absolute; top: 70px; right: 0; display: flex; justify-content: flex-end; align-items: flex-start; flex-wrap: wrap; font-size: 18px; font-weight: 700; line-height: 1.1;}
.ft_nav li{ margin: 0 0 0 45px;}
.ft_nav li a{ padding: 10px 0; display: block;}
.ft_nav li a:hover{ text-decoration: none;}
.ft_copyright{ text-align: right; font-size: 12px; color: #383333;}
.ft_box_02{ padding: 40px 0 130px; position: relative; border-top: solid 1px #a19b92;}
.ft_logo_02{ width: 144px; padding: 0 0 30px;}
.ft_logo_02 img{ width: 100%; height: auto;}
.ft_list_02{ width: 60%; display: flex; justify-content: flex-start; flex-wrap: wrap; font-size: 15px;}
.ft_list_02 li{ margin: 0 40px 15px 0; font-size: 15px;}
.ft_list_02 li a{ padding: 0 0 10px;}
.ft_list_02 li a:hover{ text-decoration: none;}
.ft_btn_02{ width: 150px; margin: 50px 0 0;}
.ft_btn_02 a{ font-size: 17px; line-height: 1; padding: 0 20px 10px 0; box-sizing: border-box; display: block; background: url("../img/ico_blank_01.webp") no-repeat right 4px top 2px; background-size: 13px;}
.ft_btn_02 a:hover{ text-decoration: none;}

@media only screen and (max-width: 992px) {
.ft_reservation a{ height: 220px; }
.ft_reservation a span.en{ font-size: 25px;}
.ft_reservation a span.ja{ font-size: 17px; padding: 15px 0 8px;}
.ft_box_01{ padding: 35px 0;}
.ft_logo{ padding: 0 0 15px; width: 250px;}
.ft_name{ font-size: 16px;}
.ft_addr{ padding: 0 0 10px; font-size: 15px;}
.ft_tel{ font-size: 18px; line-height: 1.3;}
.ft_open{ font-size: 12px; padding: 0 0 0 1em;}
.ft_insta{ position: static; margin: 10px 0 20px;}
.ft_insta img{ width: 26px; height: auto;}
.ft_nav{ position: static; justify-content: flex-start; font-size: 18px; line-height: 1.1;}
.ft_nav li{ margin: 0 20px 10px 0;}
.ft_nav li:last-child{ margin: 0 0 10px 0;}
.ft_nav li a{ padding: 0;}
.ft_copyright{ font-size: 10px; padding: 20px 0 0;}
.ft_box_02{ padding: 30px 0 100px;}
.ft_logo_02{ width: 110px; padding: 0 0 20px;}
.ft_list_02{ width: 100%; flex-direction: column; font-size: 15px;}
.ft_list_02 li{ margin: 0 0 3px 0;}
.ft_list_02 li a{ padding: 0 0 3px;}
.ft_btn_02{ position: static; width: 150px; margin: 40px 0 0 0;}
.ft_btn_02 a{ font-size: 16px; line-height: 1; padding: 0 20px 10px 0;}
}

/* ------------------------------
Fixed Button
------------------------------ */
#tripla-app{ z-index: 101 !important;}

#reserve { position: fixed; bottom: 0; left: calc( 100% - 890px ); background: #242529; width: 890px; height: 130px; color: #EFEFEF; z-index: 10; font-size: 14px; }
#reserve #tripla-searching-app > div{ display: flex;}
#reserve .search-widget-search-container-bf1818 { background: #242529; color: #EFEFEF; text-align: left; border-radius: 0; width: auto; box-shadow: none;}
#reserve .input-container-title-db81ec { color: #EFEFEF; text-align: left; margin-bottom: 5px; font-size: 13px; }
#reserve .search-widget-input-34bba0, 
#reserve .search-widget-select-75fb48 { height: 40px !important; }
#reserve .switch-switch-e8f4ca{ width: 30px; height: 15px;}
.switch-checkbox-496f6c:checked+.switch-switch-e8f4ca { background: #837257 !important;}
#reserve .button-btn-f51c1a { padding: 0 !important; line-height: 40px !important; color: #EFEFEF !important; background: #822c25 !important; border: 1px solid #822c25; width: 180px; height: 40px; border-radius: 0; transition: background 0.5s}
#reserve .button-btn-f51c1a:hover { background: #94352d !important; opacity: 1 !important;}
#reserve #reserveBtn,
#reserve #reserveCloseBtn { position: fixed; bottom: 0; left: 0; z-index: 150; width: 100%; height: 60px; background: #0b0e12; display: none; }
#reserve #reserveCloseBtn.on{ z-index: 152;}
#reserve #reserveBtn span, 
#reserve #reserveCloseBtn span { width: 100%; height: 100%; display: flex; flex-wrap: wrap; color: #EFEFEF; font-size: 20px; }
#fixedTel,
#fixedMenu{ display: none;}

@media only screen and (max-width: 992px) {
#reserve { left: 0; width: 100%; height: auto; font-size: 14px; }
#reserve .search-widget-search-container-bf1818 { padding: 30px 25px 80px !important; width: 100% !important; border-radius: 0 !important; min-height: 100vh; display: flex; flex-direction: column; justify-content: center;}
#reserve .input-container-input-container-da40af { margin-left: 0px; }
#reserve .search-widget-button-wrapper-d2b715 { margin-left: 0px; display: block !important; margin-top: 30px; }
#reserve #booking { display: none; }
#reserve #reserveBtn { display: block; left: 150px; width: calc( 100% - 150px ); padding: 0 0 0 20px; box-sizing: border-box;} 
#reserve #reserveBtn::before{ content: ""; background: url("../img/ico_rsrv_01.svg") no-repeat 0 0; background-size: 16px; width: 16px; height: 18px; display: block; position: absolute; top: 0; bottom: 0; left: calc( 50% - 3.5em ); margin: auto 0;}
#reserve #reserveCloseBtn { display: block;}
#reserve #reserveBtn span, 
#reserve #reserveCloseBtn span { justify-content: center; align-items: center; font-size: 16px; }
#reserve #reserveCloseBtn span { box-sizing: border-box; padding: 0 0 0 30px; }
#reserve #reserveCloseBtn span::before,
#reserve #reserveCloseBtn span::after{ content: ""; width: 20px; height: 1px; background: #fff; display: block; position: absolute; top: 50%; left: calc( 50% - 2em ); transform-origin: center center;}
#reserve #reserveCloseBtn span::before{ transform: rotate(45deg);}
#reserve #reserveCloseBtn span::after{ transform: rotate(-45deg);}
#fixedMenu,
#fixedTel{ display: flex; justify-content: center; align-items: center; width: 75px; height: 60px; position: fixed; bottom: 0; background: #37342f; color: #EFEFEF; z-index: 151; text-align: center; border-right: solid 1px #686765;}
#fixedMenu{ left: 0; flex-direction: column;}
#fixedMenu span.bar{ display: block; width: 27px; height: 1px; background: #fff; margin: 3px 0; text-indent: 100%; white-space: nowrap; overflow: hidden;}
#fixedTel{ left: 75px;}
#fixedTel span{ padding: 0 0 0 20px; box-sizing: border-box;}
#fixedTel span::before{ content: ""; background: url("../img/ico_tel_01.svg") no-repeat 0 0; background-size: 12px; width: 12px; height: 12px; display: block; position: absolute; top: 0; bottom: 0; left: calc( 50% - 1.6em ); margin: auto 0;}
}

/* ------------------------------
	Overlay TEL & MENU
	SPでのみ有効。格納され、トグルボタンによりオーバーレイ表示する電話番号とメニュー領域
------------------------------ */
#ovl_tel,
#ovl_menu{ display: none;}

@media only screen and (max-width: 992px) {
#ovl_tel,
#ovl_menu{ display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.5s; position: fixed; top: 0; bottom: 0; right: 0; width: 100%; overflow: auto; box-sizing: border-box; padding: 0 0 60px; z-index: -1; color: #EFEFEF;}
#ovl_tel.on,
#ovl_menu.on{ opacity: 1; z-index: 1000; overflow: auto; visibility: visible;}
#ovl_tel{ background: #37342f;}
#ovl_tel .wrap,
#ovl_menu .wrap{ padding: 60px 0; position: relative;}
#ovl_tel .tit{ font-size: 40px; letter-spacing: 0.1em; text-align: center; padding: 0 0 20px;}
#ovl_tel .name{ font-size: 14px; padding: 20px 0 5px;}
#ovl_tel .tel{ background: #605440; color: #EFEFEF; border-radius: 4px; width: 270px; height: 55px; font-size: 20px; line-height: 55px; text-align: center;}
#ovl_tel .tel .tel-link{ color: #EFEFEF; display: inline-block; /*width: 100%;*/ height: 100%; box-sizing: border-box; padding: 0 0 0 25px; position: relative;}
#ovl_tel .tel .tel-link::before{ content: ""; background: url("../img/ico_tel_02.svg") no-repeat 0 0; background-size: 16px; width: 16px; height: 16px; display: block; position: absolute; top: 0; bottom: 0; left: 0; margin: auto 0;}
#ovl_tel .open{ text-align: center; padding: 30px 0 0; font-size: 16px;}
#ovl_menu{ background: #37342f; display: flex; flex-direction: column;}
#ovl_menu ul{ width: 270px; margin: 0 auto;}
#ovl_menu ul li{ margin: 10px 0;}
#ovl_menu ul li a{ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: 18px; line-height: 1.4; padding: 10px 0; color: #EFEFEF;}
#ovl_menu ul li a .en{ font-size: 20px; line-height: 1.1;}
#ovl_menu ul li a .ja{ font-size: 12px; line-height: 1.1; padding: 5px 0 0;}
#ovl_menu .ol_rsrv{ width: 180px; height: 50px; margin: 30px auto 0; }
#ovl_menu .ol_rsrv a{ width: 100%; height: 100%; background: #822c25; color: #EFEFEF; display: block; font-size: 18px; line-height: 50px; text-align: center; transition: background 0.5s;}
#ovl_menu .ol_rsrv a:hover{ text-decoration: none; background: #94352d; }
#ovl_menu .btn{ width: 200px; margin: 20px auto 60px;}
#ovl_menu .btn a{ width: 100%; height: 55px; line-height: 55px; display: block; border: solid 1px #000; text-align: center;}
#ovl_tel .close,
#ovl_menu .close{ position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; background: #0b0e12; color: #EFEFEF; text-align: center; line-height: 60px; font-size: 16px; box-sizing: border-box; padding: 0 0 0 30px;}
#ovl_tel .close::before,
#ovl_menu .close::before,
#ovl_tel .close::after,
#ovl_menu .close::after{ content: ""; width: 20px; height: 1px; background: #fff; display: block; position: absolute; top: 50%; left: calc( 50% - 2em ); transform-origin: center center;}
#ovl_tel .close::before,
#ovl_menu .close::before{ transform: rotate(45deg);}
#ovl_tel .close::after,
#ovl_menu .close::after{ transform: rotate(-45deg);}
}