.section_area { padding: 5vw 0; } section .titbox { margin-bottom: 34px; } section .titbox .subTitle {font-size: 48px;text-transform: uppercase;display: block;line-height: 1;color: #c1b399;font-weight: 300;} section .titbox .title {font-size: 28px;display: block;line-height: 1;letter-spacing: 9px;color: #c1b399;font-weight: 400;margin-top: 24px;} section .titbox p {line-height: 2;letter-spacing: 1.2px;font-size: 1.2rem;} section .more_btn {display: inline-flex;align-items: center;justify-content: center;text-decoration: none;padding: 15px 20px;border: 1px solid rgba(211,203,184,0.5);border-radius: 50px;position: relative;background: transparent;overflow: visible;transition: all 0.4s ease;flex-direction: row;gap: 5px;font-weight: 400;width: 170px;} section .more_btn .line-svg { position: absolute; top: -1px; left: -1px; width: 100%; height: 100%; pointer-events: none; overflow: visible; } section .more_btn .line-rect { width: 100%; height: 100%; fill: transparent; stroke: var(--secondary); stroke-width: 0.8px; rx: 32px; ry: 32px; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 0.8s cubic-bezier(0.25,0.46,0.45,0.94); } section .more_btn span {color: var(--secondary);font-weight: 400;font-size: 15px;letter-spacing: 0.5px;z-index: 2;} section .more_btn .arrow { width: 16px; height: 16px; margin-left: 10px; transition: transform 0.3s ease; fill: var(--secondary); stroke: var(--secondary); z-index: 2; } section .more_btn:hover { background-color: var(--secondary); } section .more_btn:hover span { color: var(--primary); } section .more_btn:hover .line-rect { stroke-dashoffset: 0; } section .more_btn:hover .arrow { transform: translate(3px,-3px); fill: var(--primary); } section .more_btn:active { transform: scale(0.97); } /* divider */ #wrap .brand-divider {position: absolute;top: 617px;left: 50%;transform: translate(-50%,-50%);width: 100%;z-index: 10;} /* catalogArea */ #catalogArea {padding: 50px 0 90px;overflow: hidden;position: relative;z-index: 10;} #catalogArea .brand-marquee {width: 100%;padding: 10px 0;border-bottom: 1px solid rgb(200 192 171 / 40%);margin-bottom: 100px;} #catalogArea .marquee-inner { display: flex; white-space: nowrap; animation: marquee 40s linear infinite; } #catalogArea .marquee-inner span {font-size: 4rem;font-weight: 200;letter-spacing: 0.08em;color: var(--secondary);margin-right: 50px;} @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } #catalogArea .catalogList {display: flex;justify-content: space-between;align-items: flex-start;gap: 110px;width: min(87vw, 1440px);margin: 0 auto;} #catalogArea .item * { color: var(--secondary);} #catalogArea .item {flex: 1;position: relative;} #catalogArea .card-num {font-size: 30px;letter-spacing: 0.2em;writing-mode: vertical-rl;position: absolute;font-weight: 300;left: 6px;top: -20px;z-index: 20;} #catalogArea .card-img-mask {width: 100%;aspect-ratio: 1 / 1;overflow: hidden;background: #000;position: relative;} #catalogArea .item .card-img-mask{border-radius: 0 180px 0 0;} #catalogArea .item:nth-child(2) .card-img-mask{border-radius: 180px 180px 0 0;} #catalogArea .item:nth-child(3) .card-img-mask {border-radius: 0 0 180px 0;} #catalogArea .item .card-img-mask img {width: 100%;height: 100%;object-fit: cover;transition: transform 1s var(--ease-elegant);} #catalogArea .item .card-img-mask:after {position: absolute;bottom: 0;left: 0;z-index: 1;content: "";width: 100%;height: 40%;display: block;background: linear-gradient(to bottom, rgb(0 0 0 / 0%), #0b1317);pointer-events: none;opacity: .9;} #catalogArea .item:hover img { transform: scale(1.1); } #catalogArea .card-text { margin-top: -15px; margin-left: 15px; z-index: 10; position: relative; } #catalogArea .card-text .title {font-size: 1.6rem;margin-bottom: 5px;letter-spacing: 0.4em;display: flex;align-items: center;gap: 10px;font-weight: 300;} #catalogArea .card-text .title svg { fill: #fff; width: 20px; height: 20px; margin: 0 5px; } #catalogArea .item:hover svg{ transform: translate(3px,-3px); } #catalogArea .card-text .arrow {color: var(--secondary);font-size: 0.9rem;transition: transform 0.3s;display: flex;flex-direction: column;justify-content: center;align-items: center;} #catalogArea .item:hover .arrow { transform: translate(3px,-3px); } #catalogArea .card-text p {font-size: 1.1rem;display: inline-block;letter-spacing: 2px;border-bottom: 1px solid var(--secondary);font-weight: 300;} /* aboutArea */ #aboutArea {padding: 160px 0;position: relative;background: url(/images/01/img-ab-bg.png) 50% 50% no-repeat;background-size: cover;overflow: hidden;perspective: 1000px;z-index: 20;} #aboutArea .about-container {max-width: 1400px;margin: 0 auto;padding: 0 var(--container-px);display: flex;align-items: center;justify-content: center;position: relative;z-index: 2;} #aboutArea .about-img-left {width: 25%;overflow: hidden;background: #000;box-shadow: 0 30px 100px rgba(0,0,0,0.5);position: absolute;left: -80px;top: 150px;} #aboutArea .about-img-right {width: 37%;overflow: hidden;position: absolute;right: -18%;top: -80px;} #aboutArea .parallax-inner { transition: transform 0.2s cubic-bezier(0.165,0.84,0.44,1); will-change: transform; } #aboutArea .about-img-left img { width: 100%; aspect-ratio: 3/4; object-fit: cover; filter: grayscale(0.2) brightness(0.9); } #aboutArea .about-img-right img {width: 100%;object-fit: cover;} #aboutArea .about-content {width: min(81vw, 510px);text-align: center;} #aboutArea .about-content *{text-align: center;} #aboutArea .about-content .pageh1 {font-size: 2rem;display: block;line-height: 1.8;letter-spacing: 9px;font-weight: 400;margin-bottom: 25px;word-spacing: 100vw;color: var(--secondary);} #aboutArea article * {color: #d6cebe;line-height: 2;letter-spacing: 1.2px;font-size: 1.2rem;text-align: center;} #aboutArea .about-tag { color: var(--gold); font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: 25px; letter-spacing: 0.2em; } #aboutArea .about-heading { font-family: var(--font-serif); font-size: clamp(1.8rem,3vw,2.5rem); line-height: 1.5; margin-bottom: 15px; letter-spacing: 0.1em; } #aboutArea .about-subheading {font-size: 1.1rem;letter-spacing: 0.2em;margin-bottom: 25px;font-weight: 300;} #aboutArea .about-desc {font-size: 1.05rem;line-height: 2.2;color: rgba(255,255,255,0.6);text-align: justify;text-align-last: center;margin-bottom: 40px;} #aboutArea .view-more-btn { display: inline-block; color: #fff; text-decoration: none; font-size: 0.85rem; letter-spacing: 0.2em; padding-bottom: 5px; border-bottom: 1px solid var(--gold); transition: 0.3s; } #aboutArea .reveal-left { opacity: 0; transform: translateX(-80px); transition: 1.8s var(--ease-elegant); } #aboutArea .reveal-right { opacity: 0; transform: translateX(80px); transition: 1.8s var(--ease-elegant); } #aboutArea .reveal-up { opacity: 0; transform: translateY(40px); transition: 1.5s var(--ease-elegant); } #aboutArea .active { opacity: 1; transform: none; } /* product_area */ #product_area {padding: 9vw 0 4vw 0;position: relative;background: url(/images/01/img-p-bg.jpg);z-index: 10;} #product_area .workframe {display: grid;align-items: start;grid-template-columns: 23% 75%;justify-content: space-between;width: min(88vw, var(--width-xxl));} #product_area .more_btn a { border-bottom: 1px solid #c1b399; } #product_area .more_btn a font { color: #c1b399; } #product_area .more_btn a svg { fill: #c1b399; } #product_area .tit_box { display: flex; flex-direction: column; align-items: center; } #product_area .topBox .titbox *,#linkArea .titbox * { color: var(--primary); } #product_area .topBox {margin-top: 120px;} #product_area .titbox p { margin-top: 20px; } #product_area .more_btn:hover { background-color: var(--primary); } #product_area .more_btn { border: 1px solid rgb(19 29 35); } #product_area .more_btn span,#product_area .more_btn svg { color: var(--primary); fill: var(--primary); } #product_area .more_btn:hover span { color: var(--secondary); } #product_area .more_btn:hover .arrow { fill: var(--secondary); } #product_list{margin: 0 auto;position: relative;width: 100%;} #product_list .btn{padding: 0;display: flex;flex-direction: row;justify-content: flex-end;gap: 160px;} #product_list .btn:after{content:'';position:absolute;bottom: -20px;width: 120px;height: 1px;background: #c1b399;top: 50%;right: 7%;transform: translate(-50%, -50%);opacity: .5;} #product_list .btn a:not(.morebtnn) {width: 60px;text-align: center;aspect-ratio: 1/1;line-height: 60px;border-radius: 50px;font-family: "Cormorant",serif;color: #c1b399;} #product_list .btn a:not(.morebtnn) img { height: 24px; } #product_list .btn a#product_next img { transform: scaleX(-1); } #product_list .btn a.morebtnn { background: #ababab; writing-mode: vertical-lr; width: 73px; display: flex; align-items: center; color: white; padding: 60px 0; border-radius: 50px; } #product_list .btn a:hover {background: #c1b399;color: #000000;} #product_list li {margin: 0 30px;position: relative;} #product_list ul li { transition: margin-top 0.5s ease-in-out } #product_list li a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; } #product_list li img {aspect-ratio: 3/3.8;width: 100%;height: 100%;object-fit: cover;transition: transform 1s var(--ease-elegant);} #product_list li:hover img { transform: scale(1.1); } #product_list li .img_box { position: relative; overflow: hidden; border-radius: 0 60px 0 60px; } #product_list li .img_box:after { position: absolute; bottom: 0; left: 0; z-index: 1; content: ""; width: 100%; height: 40%; display: block; background: linear-gradient(to bottom,rgb(0 0 0/0%),#0b1317); pointer-events: none; opacity: .9; } #product_list li .info_box { margin: -60px 0 0; padding: 0 0 0 30px; display: flex; align-items: flex-start; gap: 50px; flex-direction: column; z-index: 10; position: relative; } #product_list li .text { margin-left: 30px; color: #929292; font-size: .9rem; letter-spacing: 1px; } #product_list li .info_box::after {content: "";width: 1px;height: 57%;display: block;background: #debc77;position: absolute;bottom: 70px;left: 30px;} #product_list li .info_box .h3 {-webkit-line-clamp: 2;height: auto;text-align: center;color: #fff;font-size: 1.4rem;letter-spacing: 2px;font-weight: 400;} #product_list li .text .txtp {-webkit-line-clamp: 2;height: auto;font-size: 1.1rem;} #product_list li .info_box p.tt { color: #4b4c4c; font-size: 15px; -webkit-line-clamp: 2; height: 51px; margin-top: 10px; } #product_list li .info_box .price_box {display: flex;align-items: baseline;gap: 15px;margin: 10px 0 20px;} #product_list li .info_box .price_box ins {text-decoration: none;font-size: 1em;color: var(--primary);font-family: "Arimo",sans-serif;} #product_list li .info_box .price_box del { color: #a5a4a4; font-family: "Arimo",sans-serif; font-size: 14px; } #product_list li .info_box [data-action="buy"] {padding: 1em .8em;position: relative;border: 1px solid var(--primary);font-size: .9em;color: var(--primary);z-index: 11;display: flex;align-items: center;justify-content: center;gap: 15px;width: 100%;} #product_list li:hover .info_box [data-action="buy"] { color: var(--secondary); background-color: var(--primary); } #product_list li .info_box button:hover { background: #2c404d; } #product_list li .info_box button svg { width: 20px; height: 20px; fill: white; } #product_area .slogan { width: min(90%,1310px); margin: 70px auto 20px; display: grid; grid-template-columns: 65% 35%; align-items: center; justify-items: start; } #product_area .slogan h1,#product_area .slogan h2 { font-size: 22px; font-weight: 400; letter-spacing: .5px; } #product_area .btnBox {margin-left: auto;margin-right: 26%;margin-top: 100px;display: flex;justify-content: space-between;display: none;} #product_area .btnBox .Ptxt { text-transform: uppercase; display: block; line-height: 1; color: #c1b399; font-weight: 400; letter-spacing: 61px; font-size: 3.2rem; } /* photo_area */ #photo_area .item_row { padding: 4% 6%; border: 2px var(--g_100) solid; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } #photo_area .item_row .img_box img { width: 100px; aspect-ratio: 1/1; } #photo_area .item_row .info_box { margin-left: 6%; width: 1%; flex: 1 1 auto; } #photo_area .item_row .info_box h3 { margin-bottom: .5em; max-height: 3.2em; height: auto; -webkit-line-clamp: 2; } #photo_area .item_row .info_box font { padding: .5em 1em; background: var(--primary); border-radius: 2em; display: inline-block; line-height: 1; font-weight: 300; font-size: .9em; color: white; } /* linkArea */ #linkArea {padding: 70px 0 0;position: relative;} #linkArea:after {content: '';width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: url(/images/01/img-p-bg.jpg);background-position: bottom;background-repeat: no-repeat;background-size: cover;z-index: -20;} #linkArea .titbox { z-index: 20; position: relative; width: 80%; margin-left: 170px; display: grid; grid-template-columns: 21% 39% 350px; align-items: end; margin-bottom: 50px; } #linkArea .titbox .subTitle { } #linkArea .titbox .title { margin-top: 0; } #linkArea .dessert-grid {margin: 0 auto;display: flex;z-index: 20;position: relative;width: 88vw;margin-left: 0;} #linkArea .dessert-item { position: relative; overflow: hidden; background: #000; } #linkArea .large { flex: 1.2; } #linkArea .dessert-sub-grid {flex: 1;display: grid;grid-template-columns: 1fr 1fr;} #linkArea .item-img-box {width: 100%;position: relative;overflow: hidden;} #linkArea .item-img-box:after {position: absolute;top: 0;left: 0;z-index: 0;content: "";width: 100%;height: 40%;display: block;background: linear-gradient(to top,rgb(0 0 0/0%),#0b1317);pointer-events: none;opacity: .7;} #linkArea .item-img-box img {width: 100%;height: 100%;aspect-ratio: 4 / 3;object-position: 50% 60%;object-fit: cover;transition: transform 1.5s var(--ease-elegant),opacity 0.6s;opacity: 0.85;} #linkArea .dessert-item:hover img { transform: scale(1.1); opacity: 1; } #linkArea .item-overlay {position: absolute;inset: 0;padding: 25px;display: flex;flex-direction: row;justify-content: space-between;/* pointer-events: none; */z-index: 10;/* align-items: flex-start; */} #linkArea .label {color: #fff;font-size: 1.4rem;letter-spacing: 0.2em;text-shadow: 0 2px 10px rgba(0,0,0,0.3);} #linkArea .circle-arrow {width: 40px;height: 40px;border: 1px solid rgba(255,255,255,0.5);border-radius: 50%;display: flex;align-items: center;justify-content: center;align-self: flex-end;color: #fff;transition: all 0.4s;} #linkArea .circle-arrow svg { width: 20px; height: 20px; fill: #fff; } #linkArea .dessert-item:hover .circle-arrow { background: var(--secondary); border-color: var(--secondary); } #linkArea .dessert-item:hover .circle-arrow svg { fill: var(--primary); } #linkArea .reveal-up { opacity: 0; transform: translateY(40px); transition: 1.2s var(--ease-elegant); } #linkArea .reveal-up.active { opacity: 1; transform: translateY(0); } #linkArea .reveal-up a{ z-index: 10; } @media screen and (min-width: 1161px){ #photo_area .item_row:hover { border-color: var(--primary); } } @media screen and (max-width: 1660px){ #product_area .topBox { margin-right: 5%; } section .titbox .subTitle { font-size: 40px; } section .titbox .title { font-size: 24px; letter-spacing: 7px; } section .titbox p { font-size: 1rem; } } @media screen and (max-width: 1440px){ #product_list li { margin: 0 30px; } } @media screen and (max-width: 1400px){ #product_area .btnBox { margin-right: 10%; } #catalogArea { padding: 30px 0 60px; } #catalogArea .marquee-inner span { font-size: 2rem; } } @media screen and (min-width: 1281px){ #product_list ul .slick-slide:nth-child(2n) {margin-top: 90px;} #product_list ul.is-shifted .slick-slide:nth-child(2n) { margin-top: 50px } #linkArea .dessert-sub-grid { display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(2,1fr); } #linkArea .dessert-item.large { grid-column: 1/2; grid-row: 1/3; } #linkArea .dessert-sub-grid > .dessert-item:first-child { grid-column: 1/span 2; grid-row: 1/span 2; } } @media screen and (max-width: 1280px){ #product_list { width: 100%; } #product_area .topBox { margin: auto auto 60px 30px; } #product_area .btnBox { margin-right: auto; justify-content: center; margin-top: 20px; } #product_area .btnBox .Ptxt { display: none; } #product_list .btn:after { left: 50%; right: auto; } section .titbox .title { } section .titbox .subTitle { font-size: 32px; } #product_area .workframe { display: flex; flex-direction: column; } #product_list li .info_box .h3 { font-size: 1.2rem; } .section_area .list_box { margin-top: 70px; } #catalogArea .catalogList { gap: 80px; } #linkArea .dessert-grid { flex-direction: column; } } @media screen and (max-width: 1024px){ #product_area .slogan { grid-template-columns: 1fr; gap: 25px; width: min(90%,860px); } #aboutArea .about-container { flex-direction: column; gap: 80px; } #aboutArea .about-content { } .webBox .wrapper_lines { display: none; } #product_area .topBox { margin: auto auto 60px 0; } #aboutArea .about-content .pageh1 { font-size: 1.4rem; letter-spacing: 6px; } #linkArea .titbox { width: 90%; margin: auto; margin-bottom: 50px; display: flex; flex-direction: column; align-items: center; gap: 20px; } #linkArea .titbox * { text-align: center; } #linkArea .dessert-grid { width: 90%; margin: auto; } #linkArea { padding: 80px 0; } #linkArea .dessert-sub-grid { grid-template-columns: 1fr; gap: 30px; } } @media screen and (max-width: 980px){ #product_area {padding: 18vw 0 9vw 0;} #product_list .btn { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; } #product_list .btn a.morebtnn { writing-mode: unset; height: 73px; padding: 0 60px; width: auto; } #catalogArea .catalogList { gap: 90px; display: flex; flex-direction: column; align-items: center; width: 79vw; } #catalogArea .card-text .title { font-size: 1.3rem; } #catalogArea .card-num { font-size: 1.2rem; } #aboutArea { padding: 60px 0 70px 0; } } @media screen and (max-width: 640px){ section .titbox .title {} #photo_area .item_row .img_box { width: 100%; } #photo_area .item_row .img_box img { width: 100%; aspect-ratio: 1/1; } #photo_area .item_row .info_box { margin: .5em 0 0; width: 100%; } #product_list li .info_box .h3 { font-size: 20px; } #product_list {} #product_list .btn a:not(.morebtnn) img { height: 18px; } #product_list .btn { margin-top: 30px; } #product_list .btn a.morebtnn { height: 53px; padding: 0 30px; font-size: 14px; } #product_list .btn a:not(.morebtnn) { width: 53px; line-height: 53px; } #product_area .slogan h1,#product_area .slogan h2 { font-size: 18px; } #aboutArea .reveal-left,#aboutArea .about-img-right { display: none; } section .titbox { margin-bottom: 20px; } }