[mn="1000"]{ --ttlClru_default: var(--secttlclr); &.btn_full{ .taste .btn{ width: 100%; border-radius: 50px; } } ._ittl{ .h4{ color: var(--ttlClru_default); } } ._subttl { text-align: var(--ttlalign); } .txtbx~.txtbx { margin-top: 30px; } ._content { margin: 0; } ._imgobj { text-align: center; margin: 15px 0; } .taste { margin: 15px 0; display: flex; flex-wrap: wrap; gap: 15px; justify-content: var(--secalign); } .ttlbx { margin: 0 0 45px; border-left: 9px solid var(--clr01); padding-left: 21px; text-align: left; font-family: var(--ft-t1); .h4 { text-align: inherit; } } } [mn="8021"] { padding: 6px 0; line-height: 1; z-index: 5; --secbgclr: var(--clr01x, #fff); /* --secftclr: #fff; */ /* border-bottom: 3px solid var(--clr01); */ } [mn="8021"] .mediabx a { --bgclr: var(--clr01, #fff); --bghovclr: var(--clr02, transparent); --iconclr: var(--clr01x, #fff); border-radius: 50%; padding: 6px } [mn="8021"] .mediabx .unit { margin: 0 0 0 9px } [mn="8021"] .searchbx { position: relative; width: 150px; } [mn="8021"] .searchbx input { margin: 0; padding: 6px 9px 6px 30px; width: 100%; border-radius: 50px; border: 2px solid #ccc; font-size: inherit; } [mn="8021"] .searchbx i { position: absolute; left: 9px; top: 50%; translate: 0 -50%; color: #ccc; width: 12px; } [mn="8021"] .logo { margin: 0 0 } [mn="8021"] .logo img { max-height: 65px } [mn="8021"] .logo ._imgobj img { max-height: 21px } [mn="4051"] .list:nth-child(2n + 2) { margin-top: 60px; } /* ======================= */ nav { line-height: 1; ._imgobj{ margin: 0; } .addedmenu{ a:not(.btn){ padding: 0 !important; } img{ max-height: 60px; } } } nav :is(ul, li) { list-style: none; list-style-type: none; margin: 0; padding: 0; display: inline-flex; /* justify-content: center; */ align-items: center; flex-wrap: wrap; } nav a { display: inline-flex; justify-content: center; align-items: center; font-family: var(--ft-nav); /* font-size: 110%; */ /* text-transform: uppercase; */ text-decoration: none; color: inherit; } nav a:hover, nav a.active { color: var(--clr01) } nav>ul>li { /* margin: 0 12px 0 0; padding: 0 12px 0 0; */ position: relative } @media (max-width: 767px) { nav>ul>li>ul { padding: 0 0 0 12px } nav>ul>li>ul li { width: 100%; font-size: 80%; } nav>ul>li>ul li~li { border-top: 1px solid #eee } nav>ul>li>ul a { text-transform: initial; width: 100%; justify-content: flex-start; } } @media (min-width: 767px) { nav>ul{ gap: 30px; } nav>ul>li>a { padding: 0; margin: 0; } nav>ul>li>a.active, nav>ul>li>a:hover { /* background-color: var(--clr01); */ color: var(--clr02) } nav>ul>li>ul { position: absolute; bottom: -15px; right: 50%; translate: 50% 100%; scale: 1 0; /* display: none; */ min-width: 250px; background-color: rgba(0, 0, 0, .8); color: #fff; border: 1px solid #eee; padding: 9px; transition: .6s all .3s ease; display: block; transform-origin: top; } nav>ul>li:hover>ul { transition: .6s all ease; scale: 1 1; } nav>ul>li>ul a { text-transform: initial; width: 100%; justify-content: flex-start; padding: 6px; } nav>ul>li>ul a:hover, nav>ul>li>ul a:active { background-color: var(--clr01); color: #fff; } nav>ul>li>ul li { width: 100%; justify-content: flex-start; } nav>ul>li>ul li~li { /* margin-top: 9px; */ } } @media (min-width: 767px) { /* nav > ul > li::after { content: ''; display: block; right: 0; top: 50%; translate: 0 -50%; height: 12px; width: 2px; background-color: #999; position: absolute; } nav > ul > li:last-child::after { display: none; } */ } .dekstopnav .main>* { padding: 3px 0 } .dekstopnav .navbx { margin: 0 0; font-size: 120%; flex: 1 0 0; padding-left: 30px; } .mobilenav .mediabx a { --bgclr: transparent; --iconclr: #fff; --iconhovclr: #fff; padding: 0; } .mobilenav { position: fixed; height: 100vh; background-color: rgba(0 0 0 / 50%); z-index: 50; padding: 0 0 0 0; width: 100% !important; display: block; translate: -101% 0; opacity: 0; transition: .6s all .3s ease; } .mobilestickbx { position: fixed; top: 0; left: 0; padding: 8px 15px; width: 100% !important; z-index: 50; border-bottom: 1px solid #ccc; background-color: var(--clr01x, #fff); min-height: 65px; display: flex; justify-content: center; align-items: center; text-align: center; line-height: 1; } .mobilestickbx img { max-height: 50px; max-width: calc(100% - 45px); } .mobilestickbx ._imgobj { display: none } .mobilenav nav a { flex: 0 0 100%; width: 100%; justify-content: flex-start; color: inherit; text-decoration: none; padding: 6px 0; font-size: 150%; } .mobilenav.active { translate: 0 0; opacity: 1; transition: .3s all ease; } .mobilenavw { transition: .3s all cubic-bezier(0.075, 0.82, 0.165, 1); height: 100vh; background-color: #fff; width: calc(100% - 90px) !important; display: block; overflow: hidden; overflow-y: auto; translate: -101% 0; opacity: 0; max-width: 400px; } .mobilenav.active .mobilenavw { transition: .9s all .3s cubic-bezier(0.075, 0.82, 0.165, 1); translate: 0 0; opacity: 1; } .mobilenav nav { padding: 90px 24px 15px; } .mobilenav .infobx { padding: 0 24px 60px; } .mobilenav .infow { border-top: 1px solid #ccc; padding: 21px 0 0; } .mobilenav nav :is(ul, li) { margin: 0 } .mobilenav nav>ul>li { flex: 0 0 100%; } .mobilenav nav a { flex: 0 0 100%; width: 100%; justify-content: flex-start; color: inherit; text-decoration: none; } .mobilenav .mediabx .unit { margin: 0 6px 6px 0 } /* ===================== */ .menuburger { --square: 35px; --height: 3px; --top: 9px; --vpadding: 15px; --bgclr: #555; --radius: 5px; position: fixed; width: var(--square) !important; height: var(--square); top: var(--vpadding); left: calc(var(--vpadding) + 9px); transition-duration: 0.5s; display: flex; justify-content: center; align-items: center; z-index: 55; scale: 0.7; } .menuburger .icon { --bgclr: var(--clr01, #fff); transition-duration: 0.5s; position: relative; height: var(--height); width: var(--square); top: 0; background-color: var(--bgclr); border-radius: var(--radius) } .menuburger .icon:before { transition-duration: 0.5s; position: absolute; width: var(--square); height: var(--height); background-color: var(--bgclr); content: ""; top: calc(-1 * var(--top)); border-radius: var(--radius) } .menuburger .icon:after { transition-duration: 0.5s; position: absolute; width: calc(var(--square) / 2); height: var(--height); background-color: var(--bgclr); content: ""; top: var(--top); border-radius: var(--radius) } .menuburger.open .icon { transition-duration: 0.5s; transform: rotateZ(180deg); --bgclr: var(--clr01) } .menuburger.open .icon:before { transform: rotateZ(45deg) scaleX(0.75) translate(var(--top), -6px); } .menuburger.open .icon:after { width: var(--square); transform: rotateZ(-45deg) scaleX(0.75) translate(var(--top), 6px); } .mobilestickbxp, .dekstickbx { width: 100% !important; } .dekstickbx { padding: 9px 0; position: fixed; left: 0; top: 0; z-index: 10; background-color: var(--clr01x, #fff); border-bottom: 1px solid #eee; transition: 2s all cubic-bezier(0.075, 0.82, 0.165, 1); translate: 0 -101%; /* color: #fff */ } body.scrolled .dekstickbx { translate: 0 0; } .dekstickbx .logo img { max-height: 45px; } .dekstickbx .logo ._imgobj img { max-height: 15px; } @media (max-width: 767px) { .dekstickbx, [mn="8021"] { display: none; } } @media (min-width: 767px) { .menuburger, .mobilestickbxp, .mobilestickbx, .mobilenav { display: none !important; } }[mn="4400"]{ --count: var(--count_default, 4); @media (width <= 991px) { --count: var(--count_991, 3); } @media (width <= 767px) { --count: var(--count_767, 3); } @media (width <= 575px) { --count: var(--count_575, 2); } .index { text-align: center; line-height: 1; padding: 15px 9px; flex: 0 0 calc(100% / var(--count)); max-width: calc(100% / var(--count)); .bimgw{ width: 75px; } .index-w { max-width: 100%; margin: 0 auto; } } .ttl { padding: 9px 0 6px; color: var(--clr03); font-family: var(--ft-t2); /* font-size: 250%; */ /* &::after{ content: ''; width: 60px; height: 4px; margin: 0 auto; display: block; margin: 15px auto 0; background-color: #fff; } */ } .num { margin: 9px auto 0; font-size: 300%; font-family: var(--ft-t1); } } [mn="2100"] { --anime_direction: initial; font-family: var(--ft-t1); } [mn="2100"] .marquee { position: relative; /* overflow: hidden; */ /* --offset: 17px; */ --offset: 20vw; --move-initial: calc(-25% + var(--offset)); --move-final: calc(-50% + var(--offset)); font-size: 6vw; ._imgobj { margin: 0; } & img { /* margin: 6px 0; padding: 0 25px; */ /* filter: drop-shadow(-4px 4px 3px rgba(0, 0, 0, .23)); */ max-width: 50vw; max-height: 120px; } .marquee__inner { --time: 12s; white-space: nowrap; width: fit-content; display: flex; position: relative; transform: translate3d(var(--move-initial), 0, 0); animation: marquee var(--time) linear infinite; align-items: center; flex-wrap: nowrap; gap: 50px; &:hover{ animation-play-state: paused; } } } [mn="2100"] .marquee__inner:nth-child(odd) { animation-direction: var(--anime_direction); } /* .marquee span { padding: 0 2vw; } */ [mn="2100"] .marquee:hover .marquee__inner { /* animation-play-state: running; */ } @keyframes marquee { 0% { transform: translate3d(var(--move-initial), 0, 0); } 100% { transform: translate3d(var(--move-final), 0, 0); } } /* [mn="2100"] .item { text-align: center; font-size: 90%; } [mn="2100"] .profilebx .bimgw { --bw: 69px; } [mn="2100"] .profilebx .bimg { border-radius: 50% } [mn="2100"] .rate .bimgw { --bw: 100%; } [mn="2100"] .rate .bimg { --bpt: 15px; background-image: url(src/star-5.png); margin: 0 0 12px; } [mn="2100"] .ttl { line-height: 1.1; margin: 0 0 9px; font-family: var(--ft-t1); font-size: 80%; } [mn="2100"] .swiper-slide { width: auto; } [mn="2100"] .swiper { overflow: visible; } [mn="2100"] .swiper img { max-height: 60px; } [mn="2100"] .swiper-wrapper { align-items: center; } [mn="2100"] .swiper-pagination { position: relative; margin: 15px 0 0; } [mn="2100"] .swiper-button-next, [mn="2100"] .swiper-button-prev { aspect-ratio: 1 / 1 !important; background-color: var(--clr01); width: 40px; height: auto; border-radius: 50%; } [mn="2100"] .swiper-button-next:after, [mn="2100"] .swiper-button-prev:after { color: #fff; font-size: 15px; } [mn="2100"] .swiper-pagination-bullet-active { background-color: var(--clr01); } [mn="2100"] .swiper-wrapper{ transition-timing-function: linear; } @media only screen and (max-width: 767px) { } */ [mn="4303"] .itm { margin: 0 -3px; gap: 15px 0; .itm-l > * { } .itm-l, .itm-r { flex: 0 0 50%; max-width: 50%; padding: 0 3px; @media(width<767px){ flex: 0 0 100%; max-width: 100%; } } } [mn="4303"] .iconbx .icon-l img { max-height: 30px; margin: 3px 0 0; } [mn="4303"] .iconbx { --div: 45px; } [mn="4303"] .title { font-family: var(--ft-t1); font-size: 120%; margin: 0 0 15px; } @media only screen and (max-width: 767px) { } [mn="4304"] .imgbx { line-height: 0; * { margin: 0; } img{ width: 100%; } } [mn="4304"] .iframebx { height: 70vh; cursor: pointer; background-attachment: fixed; .playbtnbx{ position: absolute; left: 50%; top: 50%; translate: -50% -50%; gap: 15px; text-align: center; .btnplay { /* background-image: url(src/play_button.png); */ content: url(src/4304_play_button_2.png); transition: .6s all ease; max-width: 100%; width: 150px; } ._ittl{ width: auto; margin: 0!important; } .h4{ color: #fff; font-size: 150%; } } } .licht4304.licht{ .contbx > .contbx-w{ padding: 0; } .contbx { aspect-ratio: 16/9; } .contm { background-color: #fff; } } [mn="8232"] { margin-top: auto; border-bottom: 9px solid var(--clr02); & .main { } & a { color: inherit; text-decoration: none; } .mediabx { --a-pd: 6px; --iconclr: var(--clr01x, #fff); --iconhovclr: var(--clr01x, #fff); --bgclr: var(--clr01, transparent); --bghovclr: var(--clr02, #fff); --mediaborder: 2px solid var(--bgclr); --mediahovborder: 2px solid var(--clr02, #fff); --square: 35px; --mediaborderradius: 50%; margin: 9px 0; @media(width<767px){ width: 100%; max-width: 100%; & > * { justify-content: center; } } } .contactinfo, .sitemap { & :is(ul) { list-style-type: none; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 0; & ul { display: block; font-size: 90% } & > li { flex: 0 0 50%; max-width: 50% } @media (width <= 767px) { & > li { flex: 0 0 100%; max-width: 100% } } } } .contactinfo { & :is(ul) { justify-content: flex-start; margin: 0 -21px; & li { margin: 9px 0 0; padding: 0 21px } } } .bottomwrap { padding: 21px 0 0; } .logo-loc { margin: 30px 0 ; text-align: center; } .mediabx { --iconclr: var(--clr02, #fff); --iconhovclr: var(--clr01x, #fff); --bgclr: var(--clr02x, #000); --bghovclr: var(--clr01, #fff); /* --mediaborder: 2px solid #fff; */ /* --mediahovborder: 2px solid var(--clr02, #fff); */ --mediaborderradius: 50%; } .footericonic{ ._imgobj{ margin: 60px 0; } } } [mn="8232"] .ttl { line-height: 1; margin: 0 0 12px; font-family: var(--ft-t2); font-size: 120%; } @media (max-width: 991px) { [mn="8232"] .empty { display: none; } } @media (max-width: 767px) { [mn="8232"] .newsletterbx { width: 250px; margin: 0 auto; } [mn="8232"] .newsletterbx, [mn="8232"] { text-align: center } } @media (min-width: 767px) { [mn="8232"] .imagelink { text-align: right } } [mn="2014"] { min-height: 450px; z-index: 1; overflow: hidden; /* aspect-ratio: 16 / 4.5; */ --ttlsize: 350%; --secftclr: #fff; --secttlclr: #fff; @media(width<=767px){ min-height: 200px; } .h4 { margin: 0; position: relative; &::before{ display: none; } } .contentbx { margin: 0; position: relative; z-index: 1; max-width: 100%; /* font-weight: bold; */ /* padding: 30px 60px 30px 0; */ & > * { flex-direction: column; } ._ittl{ margin: 0 0 3px; } } .ttldecor-btm::before { content: ''; z-index: -1; display: block; width: 100%; height: 9px; background-color: var(--clr01); background-image: linear-gradient(90deg, var(--clr01) 0%, var(--clr02) 50%, var(--clr03) 100%); bottom: 0; right: 0; opacity: 1; /* clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0% 100%); */ } .sectionbg{ &::after{ content: ''; display: block; position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,.3); } } } [mn="1009"]{ .groupbx{ font-size: 120%; .group-{ & ~ &{ margin-top: 60px; } } } .barbx{ .barw{ width: 100%; height: 15px; border-radius: 50px; background-color: var(--clr03); display: block; } .bar-{ background-color: var(--clr01); height: 100%; width: 0; top: 0; left: 0; transition: .6s all .9s ease; border-radius: 50px; } .percentbx{ background-color: var(--clr01); color: #fff; position: absolute; right: 0; bottom: 100%; translate: 50% -9px; font-size: 70%; font-family: var(--ft1); line-height: 1; padding: 9px; border-radius: 3px; &::after{ content: ''; display: block; position: absolute; left: 50%; bottom: 0; translate: -50% 50%; aspect-ratio: 1; width: 9px; clip-path: polygon(100% 0, 0% 100%, 100% 100%); background-color: var(--clr01); rotate: 45deg; } } } .title{ font-size: 130%; margin: 0 0 30px; } ._subttl { font-family: var(--ft-t2); color: #888 /* font-size: 160%; */ } .btn { margin: 0 0 9px; } .taste a:not(.btn) { font-family: var(--ft-t3); color: var(--clr03); } ._imgobj{ img{ position: sticky; top: 90px; } } .themebx{ --div: 90px; .theme-{ &.theme-l{ flex: 0 0 var(--div); max-width: var(--div); padding-right: 21px; } &.theme-r{ flex: 0 0 calc(100% - var(--div)); max-width: calc(100% - var(--div)); } } ._secttl{ /* writing-mode: sideways-lr; */ writing-mode: sideways-rl; margin: 0; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 15px; line-height: 1; background-image: var(--cus-grad-to-down); color: #fff; font-size: 150%; } } } /* =================== */ /* =================== */ [mn="1009"] .iconlistbx { --flex: 50%; margin: 30px 0; /* border-top: 1px solid #eee; */ /* border-left: 1px solid #eee; */ line-height: 1; gap: 15px 0; @media(width<575px){ --flex: 100%; } ._imgobj{ margin: 0; } .num{ line-height: 1; font-variant-numeric: tabular-nums; font-size: 230%; font-family: var(--ft-t1); & span{ font-variant-numeric: tabular-nums; } } .iconbx { --div: 65px; flex: 0 0 var(--flex); max-width: var(--flex); background-color: transparent; padding: 0 15px 0 0; line-height: 1.3; .icon-l{ flex: 0 0 var(--div); max-width: var(--div); } .icon-r { flex: 0 0 calc(100% - var(--div)); max-width: calc(100% - var(--div)); text-align: left; padding-left: 15px; } .iconw { padding: 9px; border-radius: 9px; background-color: #fff; border: 1px solid #ccc; } & img { max-height: 45px; } ._content{ margin: 9px 0 0; font-size: 85%; } } } /* =================== */ /* =================== */ [mn="1009"].dsg_1 { .row{ flex-direction: row-reverse; } } [mn="3503"] { [data-bgid] { transition: .6s all ease-in; &.show { opacity: 1; clip-path: polygon(50% 0%, 100% 0, 100% 34%, 100% 62%, 100% 100%, 50% 100%, 0 100%, 0 57%, 0 34%, 0 0); } &:not(.show) { opacity: 0; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } } .itm { flex: 0 0 100%; max-width: 100%; padding: 90px 30px 30px; background-color: rgba(0, 0, 0, .3); transition: .6s all ease; &:hover { background-color: rgba(0, 0, 0, .65); .c_mask { background-image: var(--cus-grad-to-down) !important; } } .blogicon { .bimgw { --bw: 90px; margin: 0; } .c_mask { background-image: linear-gradient(90deg, #fff 0%, #fff 100%); transition: .6s all ease; } } } a { text-decoration: none; } .itm>div { height: 100%; padding: 0; color: #fff } .btn { min-width: auto; padding: 0; color: var(--clr01); background-color: transparent; border: 0 } .infobx { transition: all ease-in-out .4s; width: 100%; flex: 1 0 0; } ._subttl { margin: 6px 0 0; } div.add { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 90%; opacity: 0; transition: all ease-in-out .4s; z-index: 3; color: #fff } ._content { font-size: 90%; height: 0px; overflow: clip; transition: .3s all ease; @media(width<=991px) { height: auto; } } .swiper-slide:hover { ._content { height: auto; } } .itm { min-height: 70svh; &>* { cursor: pointer; } } .itm>*:hover div.add { opacity: 1; } .itm>*>* { flex-direction: column } .date { font-size: 80%; } .bimg-w { background-color: #000; } } [mn="3503"] .mySwiper { margin: 0 -1px; .swiper-wrapper { display: flex; } .swiper-slide { height: auto; border-right: 1px solid #fff; } .swiper-slide>* { cursor: pointer; display: flex; width: 100%; } .swiper-pagination { position: relative; margin: 15px 0 0; } .swiper-button-next, .swiper-button-prev { aspect-ratio: 1 / 1 !important; background-color: var(--clr01); width: 25px; height: auto; border-radius: 50%; } .swiper-button-next:after, .swiper-button-prev:after { color: #fff; font-size: 15px; } .swiper-pagination-bullet-active { background-color: var(--clr01); } } @media only screen and (max-width: 767px) {} @media screen and (max-width: 575px) {} .licht3503 .infobx { line-height: 1; text-align: center; background-color: #fff; position: sticky; top: 0; padding: 15px 0; z-index: 10; } .licht3503 .infobx>*~* { margin: 6px 0 0; }[mn="4006"] { .divbx{ --div: 210px; .div-{ &.div-l{ } &.div-r{ padding-left: 35px; } @media(width<=991px){ flex: 0 0 100%; max-width: 100%; &.div-r{ padding-left: 0; } &.div-l{ display: none; } } } } .btnnavbx{ padding: 15px; border-radius: 15px; border: 1px solid #eee; .btnnavw{ gap: 6px; } .btn{ --btnclr: var(--clr03x, #000); --btnclrhov: var(--clr03x, #fff); --btnbgclr: var(--clr02x, #eee); width: 100%; overflow: clip; border-radius: 50px; justify-content: flex-start; &::after, &::before{ transform: skew(0deg); } &::before{ display: none; } } .bimgbx{ width: 21px; } } .infobx{ & ~ & { padding-top: 30px; margin-top: 30px; border-top: 1px solid #ccc; } ._content{ & > ul{ display: flex; list-style: none; flex-wrap: wrap; padding: 0; & > li{ flex: 0 0 50%; max-width: 50%; padding: 0 15px 15px 0; @media(width<=991px){ flex: 0 0 100%; max-width: 100%; } } } } } .amenities.categorylistbx { --listset-count: 3; text-align: center; @media(width<991px){ --listset-count: 1; } .categorybx{ padding: 21px; border: 1px solid #ccc; border-radius: 15px; cursor: pointer; .bimgbx{ .bimgw{ width: 90px; border-radius: 50%; padding: 18px; background: linear-gradient(90deg, var(--clr01) 0%, var(--clr02) 50%, var(--clr03) 100%); overflow: clip; } } } } } .licht4006.licht { } /* <div></div> */[mn="7309"]:has(.post_list) { min-height: 100svh; .searchmessage{ font-size: 120%; font-family: var(--ft-t2); } } [mn="7309"]:has(.post_list) .bannerbx { --secttlclr: #fff; color: var(--secttlclr); .bannerw { padding: 30px 30px; border-radius: 15px; min-height: 200px; } ._secttlbx { margin: 0; } } [mn="7309"]:has(.post_list) .groupbx { padding-top: 30px; .mySwiper { .swiper-slide { display: flex; flex-wrap: wrap; } .swiper-slide>* { cursor: pointer; width: 100%; } .swiper-pagination { position: relative; margin: 15px 0 0; } .mySwiper { overflow: visible; width: 100%; padding-bottom: 30px; } .swiper-button-next, .swiper-button-prev { --swiper-navigation-sides-offset: -15px; aspect-ratio: 1 / 1 !important; background-color: var(--clr01); width: 21px; height: auto; border-radius: 50%; translate: 0 0; } .swiper-button-next:after, .swiper-button-prev:after { color: #fff; font-size: 9px; } .swiper-pagination-bullet-active { background-color: var(--clr01); } } .bimgbx { .bimgw { border-radius: 15px; } .bimg { padding-top: 42%; } } .infobx{ line-height: 1.2; position: absolute; z-index: 3; bottom: 0; left: 0; padding: 21px 9px 9px; color: #fff; font-family: var(--ft-t2); font-size: 120%; background-image: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); } } [mn="7309"]:has(.post_list) .filterbx { z-index: 100; font-family: var(--ft-t2); margin: 45px 0 21px; border-bottom: 4px solid transparent; /* Essential for border-image to work */ border-image: linear-gradient(90deg, var(--clr01) 0%, var(--clr02) 50%, var(--clr03) 100%) 1; /* '1' is the border-image-slice value, indicating a single border region */ input, .filtername{ height: 60px; padding: 9px; margin: 0; background-color: #fff; border: 0; } .dropbx{ flex: 0 0 150px; max-width: 150px; .filtername{ cursor: pointer; padding-right: 21px; i.con{ position: absolute; right: 0; top: 50%; translate: 0 calc(-50% - 3px); } } .optionbx{ line-height: 1.1; position: absolute; bottom: 0; right: 0; translate: 0 100%; &:not(.active){ display: none; pointer-events: none; } .optionw{ width: 200px; max-height: 350px; overflow: clip; overflow-y: auto; border: 1px solid #ccc; background-color: #fff; border-radius: 15px; } .option{ width: 100%; padding: 12px; cursor: pointer; & ~ &{ border-top: 1px solid #ddd; } &:hover{ background-color: var(--clr01); color: #fff; } &.active{ background-color: var(--clr02); color: #fff; } } } } .suchbx{ flex: 1 0 0; input{ padding-left: 30px; width: 100%; } i{ position: absolute; left: 0; top: 50%; translate: 0 -50%; cursor: pointer; height: 100%; display: flex; align-items: center; } } } [mn="7309"]:has(.post_list) .listdispbx { min-height: 500px; .categorylistbx{ --listset-count: 4; line-height: 1; @media(width<=991px){ --listset-count: 3; } @media(width<=575px){ --listset-count: 2; } .btn_view{ position: absolute; aspect-ratio: 1; width: 30px; display: flex; align-items: center; justify-content: center; z-index: 10; pointer-events: none; border: 2px solid #fff; border-radius: 50%; background-color: var(--clr03); right: 15px; transition: .1s all ease; bottom: 15px; font-size: 80%; translate: 100px 0; opacity: 0; } .categorybx[listid]{ overflow: clip; border-radius: 15px; box-shadow: 0px 4px 6px rgba(0, 0, 0, .25); cursor: pointer; .bimgbx{ filter: grayscale(1); transition: .2s all ease; } &:hover{ .bimgbx{ filter: grayscale(0); } .btn_view{ opacity: 1; translate: 0 0; } } } .categoryw{ border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-image: linear-gradient(90deg, var(--clr01) 0%, var(--clr02) 50%, var(--clr03) 100%) 1; border-radius: 15px; padding: 15px; } .brand{ font-family: var(--ft-t1); text-align: center; font-size: 150%; border-top: 3px solid var(--clr02); margin-top: 6px; padding: 6px 0 21px; } .divbx{ --div: 30px; line-height: 1; font-family: var(--ft-t2); @media(width<=767px){ --div: 23px; } & ~ & { margin-top: 6px; } .div-{ &.div-l{ padding-right: 9px; } } .icon{ aspect-ratio: 1; width: 100%; background-color: #aaa; &.category{ -webkit-mask-image: url(_src/7309_category.png); mask-image: url(_src/7309_category.png); } &.location{ -webkit-mask-image: url(_src/7309_location.png); mask-image: url(_src/7309_location.png); } } } } } /* ======================================================== */ /* ======================================================== */ [mn="7309"]:has(.post_detail){ min-height: 100svh; .the_content{ margin: 15px 0; padding: 21px; background-color: #ddd; border-radius: 15px; } .backbtn{ margin: 30px 0; } .title{ font-size: 200%; padding: 0 0 9px; margin: 0 0 30px; border-bottom: 4px solid transparent; border-image: linear-gradient(90deg, var(--clr01) 0%, var(--clr02) 50%, var(--clr03) 100%) 1; &.minor_ttl{ font-size: 14px; border-bottom: 0; padding: 0; margin: 0 0 9px; } } .mediabx{ --bgclr: #ddd; --bghovclr: var(--clr02); --a-pd: 9px; --mediaborderradius: 50%; --iconclr: #000; } .galbxmain{ margin-top: 35px; line-height: 0; .galbx.categorylistbx{ --listset-count: 4; @media(width<=767px){ --listset-count: 3; } } .categorybx{ overflow: clip; border-radius: 15px; } } .imgbx{ padding: 15px; border-radius: 15px; border: 1px solid #ccc; } .infobx:has(.divbx){ margin-bottom: 25px; & > * ~ *{ margin-top: 25px !important; } } .btnbx{ margin: 25px 0 0; .btn{ &::after, &::before{ transform: skew(0deg); border-radius: 50px; } } } .divbx{ --div: 45px; line-height: 1; font-family: var(--ft-t2); font-size: 35px; @media(width<=767px){ --div: 45px; } @media(width<=575px){ --div: 35px; font-size: 23px; } & ~ & { margin-top: 6px; } .div-{ &.div-l{ padding-right: 12px; } } .icon{ aspect-ratio: 1; width: 100%; background-color: #777; &.category{ -webkit-mask-image: url(_src/7309_category.png); mask-image: url(_src/7309_category.png); } &.location{ -webkit-mask-image: url(_src/7309_location.png); mask-image: url(_src/7309_location.png); } &.time{ -webkit-mask-image: url(_src/7309_time.png); mask-image: url(_src/7309_time.png); } &.phone{ -webkit-mask-image: url(_src/7309_phone.png); mask-image: url(_src/7309_phone.png); } } } } /* ======================================================== */ /* ======================================================== */ .licht7309{ .title{ font-size: 200%; padding: 0 0 15px; margin: 0 0 15px; border-bottom: 4px solid transparent; border-image: linear-gradient(90deg, var(--clr01) 0%, var(--clr02) 50%, var(--clr03) 100%) 1; } .mediabx{ --bgclr: #ddd; --bghovclr: var(--clr02); --a-pd: 9px; --mediaborderradius: 50%; --iconclr: #000; &:has(a){ margin: 9px 0; padding: 9px 0; border-bottom: 1px solid #ccc; } } .galbxmain{ margin-top: 30px; line-height: 0; .galbx.categorylistbx{ --listset-count: 3; } .categorybx{ overflow: clip; border-radius: 15px; } } .imgbx{ padding: 15px; border-radius: 15px; border: 1px solid #ccc; } .infobx:has(.divbx){ padding: 15px; border-radius: 15px; border: 1px solid #ccc; margin-bottom: 21px; } .divbx{ --div: 30px; line-height: 1; font-family: var(--ft-t2); @media(width<=767px){ --div: 23px; } & ~ & { margin-top: 6px; } .div-{ &.div-l{ padding-right: 9px; } } .icon{ aspect-ratio: 1; width: 100%; background-color: #aaa; &.category{ -webkit-mask-image: url(_src/7309_category.png); mask-image: url(_src/7309_category.png); } &.location{ -webkit-mask-image: url(_src/7309_location.png); mask-image: url(_src/7309_location.png); } } } } body:has( [mn="7309"] .post_detail ){ [mn="1000"]{ display: none; } }[mn="7311"]:has(.post_list) { min-height: 100svh; .searchmessage{ font-size: 120%; font-family: var(--ft-t2); } } [mn="7311"]:has(.post_list) .bannerbx { --secttlclr: #fff; color: var(--secttlclr); .bannerw { padding: 30px 30px; border-radius: 15px; min-height: 200px; } ._secttlbx { margin: 0; } } [mn="7311"]:has(.post_list) .groupbx { padding-top: 30px; .mySwiper { .swiper-slide { display: flex; flex-wrap: wrap; } .swiper-slide>* { cursor: pointer; width: 100%; } .swiper-pagination { position: relative; margin: 15px 0 0; } .mySwiper { overflow: visible; width: 100%; padding-bottom: 30px; } .swiper-button-next, .swiper-button-prev { --swiper-navigation-sides-offset: -15px; aspect-ratio: 1 / 1 !important; background-color: var(--clr01); width: 21px; height: auto; border-radius: 50%; translate: 0 0; } .swiper-button-next:after, .swiper-button-prev:after { color: #fff; font-size: 9px; } .swiper-pagination-bullet-active { background-color: var(--clr01); } } .bimgbx { .bimgw { border-radius: 15px; } .bimg { padding-top: 42%; } } .infobx{ line-height: 1.2; position: absolute; z-index: 3; bottom: 0; left: 0; padding: 21px 9px 9px; color: #fff; font-family: var(--ft-t2); font-size: 120%; background-image: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); } } [mn="7311"]:has(.post_list) .filterbx { z-index: 100; font-family: var(--ft-t2); margin: 45px 0 21px; border-bottom: 4px solid transparent; /* Essential for border-image to work */ border-image: linear-gradient(90deg, var(--clr01) 0%, var(--clr02) 50%, var(--clr03) 100%) 1; /* '1' is the border-image-slice value, indicating a single border region */ input, .filtername{ height: 60px; padding: 9px; margin: 0; background-color: #fff; border: 0; } .dropbx{ flex: 0 0 150px; max-width: 150px; .filtername{ cursor: pointer; padding-right: 21px; i.con{ position: absolute; right: 0; top: 50%; translate: 0 calc(-50% - 3px); } } .optionbx{ line-height: 1.1; position: absolute; bottom: 0; right: 0; translate: 0 100%; &:not(.active){ display: none; pointer-events: none; } .optionw{ width: 200px; max-height: 350px; overflow: clip; overflow-y: auto; border: 1px solid #ccc; background-color: #fff; border-radius: 15px; } .option{ width: 100%; padding: 12px; cursor: pointer; & ~ &{ border-top: 1px solid #ddd; } &:hover{ background-color: var(--clr01); color: #fff; } &.active{ background-color: var(--clr02); color: #fff; } } } } .suchbx{ flex: 1 0 0; input{ padding-left: 30px; width: 100%; } i{ position: absolute; left: 0; top: 50%; translate: 0 -50%; cursor: pointer; height: 100%; display: flex; align-items: center; } } } [mn="7311"]:has(.post_list) .listdispbx { min-height: 500px; .categorylistbx{ --listset-count: 4; line-height: 1; @media(width<=991px){ --listset-count: 3; } @media(width<=575px){ --listset-count: 2; } .btn_view{ position: absolute; aspect-ratio: 1; width: 30px; display: flex; align-items: center; justify-content: center; z-index: 10; pointer-events: none; border: 2px solid #fff; border-radius: 50%; background-color: var(--clr03); right: 15px; transition: .1s all ease; top: 50%; font-size: 80%; translate: 100px -50%; opacity: 0; } .categorybx[listid]{ overflow: clip; border-radius: 15px; box-shadow: 0px 4px 6px rgba(0, 0, 0, .25); cursor: pointer; &:hover{ .btn_view{ opacity: 1; translate: 0 -50%; } } } .categoryw{ /* border-bottom: 6px solid transparent; border-top: 6px solid transparent; */ border-image: linear-gradient(90deg, var(--clr01) 0%, var(--clr02) 50%, var(--clr03) 100%) 1; border-radius: 15px; padding: 50% 15px 15px; @media(width<767px){ padding: 60% 6px 6px; } } .infobxmain{ background-color: #fff; padding: 12px; border-radius: 15px; .infopiecebx{ padding: 9px 0 0; .infopiece-:not(:last-child){ padding-right: 6px; margin-right: 6px; border-right: 2px solid #000; } } } .brand{ font-family: var(--ft-t1); font-size: 120%; } .brand_logo{ position: absolute; top: 0; left: 50%; translate: -50% calc(-100% - 15px); width: 95px; max-width: 50%; } .divbx{ --div: 30px; line-height: 1; font-family: var(--ft-t2); @media(width<=767px){ --div: 23px; } & ~ & { margin-top: 6px; } .div-{ &.div-l{ padding-right: 9px; } } .icon{ aspect-ratio: 1; width: 100%; background-color: #aaa; &.category{ -webkit-mask-image: url(_src/7311_category.png); mask-image: url(_src/7311_category.png); } &.location{ -webkit-mask-image: url(_src/7311_location.png); mask-image: url(_src/7311_location.png); } } } } } [mn="7311"]:has(.post_detail){ min-height: 100svh; .the_content{ margin: 15px 0; padding: 21px; background-color: #ddd; border-radius: 15px; } .backbtn{ margin: 30px 0; } .title{ font-size: 200%; padding: 0 0 9px; margin: 0 0 30px; border-bottom: 4px solid transparent; border-image: linear-gradient(90deg, var(--clr01) 0%, var(--clr02) 50%, var(--clr03) 100%) 1; &.minor_ttl{ font-size: 14px; border-bottom: 0; padding: 0; margin: 0 0 9px; } } .mediabx{ --bgclr: #ddd; --bghovclr: var(--clr02); --a-pd: 9px; --mediaborderradius: 50%; --iconclr: #000; } .galbxmain{ margin-top: 35px; line-height: 0; .galbx.categorylistbx{ --listset-count: 4; @media(width<=767px){ --listset-count: 3; } } .categorybx{ overflow: clip; border-radius: 15px; } } .imgbx{ padding: 15px; border-radius: 15px; border: 1px solid #ccc; } .infobx:has(.divbx){ margin-bottom: 25px; & > * ~ *{ margin-top: 25px !important; } } .btnbx{ margin: 25px 0 0; .btn{ &::after, &::before{ transform: skew(0deg); border-radius: 50px; } } } .divbx{ --div: 45px; line-height: 1; font-family: var(--ft-t2); font-size: 35px; @media(width<=767px){ --div: 45px; } & ~ & { margin-top: 6px; } .div-{ &.div-l{ padding-right: 12px; } } .icon{ aspect-ratio: 1; width: 100%; background-color: #777; &.category{ -webkit-mask-image: url(_src/7311_category.png); mask-image: url(_src/7311_category.png); } &.location{ -webkit-mask-image: url(_src/7311_location.png); mask-image: url(_src/7311_location.png); } &.time{ -webkit-mask-image: url(_src/7311_time.png); mask-image: url(_src/7311_time.png); } &.phone{ -webkit-mask-image: url(_src/7311_phone.png); mask-image: url(_src/7311_phone.png); } &.type{ -webkit-mask-image: url(_src/7311_type.png); mask-image: url(_src/7311_type.png); } } } } .licht7311{ .title{ font-size: 200%; padding: 0 0 15px; margin: 0 0 15px; border-bottom: 4px solid transparent; border-image: linear-gradient(90deg, var(--clr01) 0%, var(--clr02) 50%, var(--clr03) 100%) 1; } .mediabx{ --bgclr: #ddd; --bghovclr: var(--clr02); --a-pd: 9px; --mediaborderradius: 50%; --iconclr: #000; &:has(a){ margin: 9px 0; padding: 9px 0; border-bottom: 1px solid #ccc; } } .galbxmain{ margin-top: 30px; line-height: 0; .galbx.categorylistbx{ --listset-count: 3; } .categorybx{ overflow: clip; border-radius: 15px; } } .imgbx{ padding: 15px; border-radius: 15px; border: 1px solid #ccc; } .infobx:has(.divbx){ padding: 15px; border-radius: 15px; border: 1px solid #ccc; margin-bottom: 21px; } .infopiecebx{ padding: 9px 0; line-height: 1; font-family: var(--ft-t2); .infopiece-:not(:last-child){ padding-right: 6px; margin-right: 6px; border-right: 2px solid #000; } } .divbx{ --div: 30px; line-height: 1; font-family: var(--ft-t2); @media(width<=767px){ --div: 23px; } & ~ & { margin-top: 6px; } .div-{ &.div-l{ padding-right: 9px; } } .icon{ aspect-ratio: 1; width: 100%; background-color: #aaa; &.category{ -webkit-mask-image: url(_src/7311_category.png); mask-image: url(_src/7311_category.png); } &.location{ -webkit-mask-image: url(_src/7311_location.png); mask-image: url(_src/7311_location.png); } } } } /* ============================== */ /* ============================== */ [mn="7311"].no_groupbx{ .groupbx{ display: none; } }[mn="1202"]{ .contentbx { border-radius: 0; padding: 60px 45px; border-radius: 15px; min-height: 710px; } a:not(.btn) { font-family: var(--ft-t3); color: var(--clr01) } ._ittl .h4{ color: inherit; } @media (max-width: 767px) { .contentbx { padding: 60px 15px; } } } [mn="3506"] { --secttlmarg_default: 0 0 60px; overflow: clip; .bimgbx{ width: 1000px; max-width: 100%; .bimgw { width: 450px; border-radius: 50%; } } .title { line-height: 1.1; font-family: var(--ft-t1); } ._subttl{ margin: 9px 0 0; font-size: 70%; color: #6e6e6e; } ._link{ margin: 21px 0 0; } .contbx { padding: 15px; } .itemlbl { top: auto; left: 15px; bottom: 0; translate: 0 50%; color: #fff; background-color: var(--clr02); border: 0; font-family: var(--ft-t1); font-size: 80%; padding: 9px 15px; } .desc { font-size: 80%; } .ellipsis { --line: 3; } .title i { color: var(--clr02); position: absolute; right: 9px; top: 15px; font-size: 150%; } .mySwiper { overflow: visible; width: 100%; text-align: center; .swiper-button-next, .swiper-button-prev { --swiper-navigation-sides-offset: -15px; aspect-ratio: 1 / 1 !important; background-color: var(--clr01); width: 40px; height: auto; border-radius: 50%; } .swiper-button-next:after, .swiper-button-prev:after { color: #fff; font-size: 15px; } .swiper-pagination-bullet-active { background-color: var(--clr01); } .swiper-slide{ transition: .6s all cubic-bezier(0.075, 0.82, 0.165, 1); &.swiper-slide-active{ scale: 1.15; } &:not(.swiper-slide-active){ scale: .85; } } .swiper-pagination { position: relative; margin: 15px 0 0; } .swiper_cus_nav{ margin-top: 60px; } } } @media only screen and (max-width: 767px) {} .licht3506 ._content>ol { padding: 0; margin: 0 0 15px; width: 100%; list-style-type: none; } .licht3506 ._content>ol :is(strong:nth-child(1), b:nth-child(1)) { font-family: var(--ft-t1); color: var(--clr01) } .licht3506 ._content>ol>li~li { margin-top: 9px; padding-top: 9px; border-top: 2px solid #000; } /* ====================== */ [mn="3506"] .swiper-wrapper.tmp-4 { --tmpCount_default: 1; --count: 1; padding: 0; .btn { --btnborderclr: #fff; } .swiper-slide { .tmp { transition: .6s all ease; padding: 0; scale: .9; opacity: .5; pointer-events: none; } &.swiper-slide-active { .tmp { scale: 1; opacity: 1; pointer-events: all; } } } }