.common-container {position:relative;z-index:2;width:min(100%,1480px);margin:0 auto} .common-section-title {position:relative;margin-bottom:28px} .common-title-en {display:flex;align-items:center;gap:16px;margin-bottom:10px;letter-spacing:.28em;font-family:"Cormorant Garamond",Georgia,serif;font-size:14px;font-weight:600;color:var(--site-accent)} .common-title-en::before {display:block;width:45px;height:1px;background:linear-gradient(90deg,var(--site-accent),var(--site-accent-light));content:""} .common-title-main {letter-spacing:.12em;font-size:clamp(34px,3vw,48px);font-weight:500;line-height:1.35;color:var(--site-title)} .common-title-line {display:block;width:38px;height:3px;margin-top:22px;background:linear-gradient(90deg,var(--site-primary-light),var(--site-blue))} .common-section-title.is-center {text-align:center} .common-section-title.is-center .common-title-en {justify-content:center} .common-section-title.is-center .common-title-en::after {display:block;width:45px;height:1px;background:linear-gradient(90deg,var(--site-accent-light),var(--site-accent));content:""} .common-section-title.is-center .common-title-line {margin-right:auto;margin-left:auto} .common-section-title.is-light .common-title-main {color:var(--site-white)} .common-section-title.is-light .common-title-en {color:var(--site-accent-light)} .common-btn {position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:25px;min-width:205px;height:56px;margin-top:38px;padding:0 22px 0 26px;border:1px solid var(--site-primary-light);background:transparent;letter-spacing:.18em;font-size:11px;font-weight:600;color:var(--site-primary);text-decoration:none;overflow:hidden;transition:border-color .35s ease,color .35s ease;max-width: 100%;} .common-btn::before {position:absolute;inset:0;background:linear-gradient(135deg,var(--site-primary),var(--site-primary-light));transform:scaleX(0);transform-origin:right center;transition:transform .42s cubic-bezier(.77,0,.18,1);content:""} .common-btn span {position:relative;z-index:2;white-space:nowrap} .common-btn>i {position:relative;z-index:2;display:block;width:35px;height:1px;background:currentColor;transition:width .35s ease,background .35s ease} .common-btn>i::after {position:absolute;top:-3px;right:0;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);content:""} .common-btn:hover {border-color:var(--site-primary);color:var(--site-white)} .common-btn:hover::before {transform:scaleX(1);transform-origin:left center} .common-btn:hover>i {width:47px;background:var(--site-accent-light)} .common-btn:focus-visible {outline:2px solid var(--site-accent);outline-offset:4px} .common-btn.is-light {border-color:rgba(255,255,255,.45);color:var(--site-white)} .common-btn.is-light::before {background:var(--site-white)} .common-btn.is-light:hover {border-color:var(--site-white);color:var(--site-primary)} /* #indexAbout */ #indexAbout {position:relative;padding:150px 35px;background:linear-gradient(135deg,#FFFFFF 0%,#F5F7F9 52%,#EDF2F5 100%);overflow:hidden;isolation:isolate} #indexAbout::before {position:absolute;top:0;left:0;width:calc(100% - 148px);height:5px;background:linear-gradient(90deg,var(--site-primary),var(--site-blue),var(--site-accent));content:""} #indexAbout::after {position:absolute;right:-180px;bottom:-260px;z-index:-1;width:600px;height:600px;border:1px solid rgba(37,91,135,.1);transform:rotate(34deg);content:""} #indexAbout .about-bg-word {position:absolute;top:18px;right:-20px;z-index:-1;letter-spacing:.04em;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(120px,16vw,290px);font-weight:600;line-height:1;color:rgba(7,27,50,.025);pointer-events:none;width:100%;display:flex;justify-content:flex-end} #indexAbout .about-layout {position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(430px,.85fr);align-items:center} .aboutboox {position:relative} #indexAbout .about-bg-word:before {content:"";position:absolute;width:50vw;height:60vw;left:-28vw;top:-1vw;border:1px solid rgba(212,189,137,.8);background:linear-gradient(145deg,rgba(185,154,93,.92),rgba(212,189,137,.72));background:linear-gradient(145deg,rgb(237 237 237 / 34%),rgb(255 255 255 / 20%));box-shadow:0 0 30px rgba(185,154,93,.16);transform:skewX(-34deg);transform-origin:right bottom} #indexAbout .about-visual {position:relative;z-index:1;min-width:0;padding:0 0 52px 52px} #indexAbout .about-visual::before {position:absolute;bottom:0;left:0;z-index:-1;width:60%;height:72%;background:linear-gradient(145deg,var(--site-primary),var(--site-primary-light));content:""} #indexAbout .about-imgbox {position:relative;height:650px;background:var(--site-primary);overflow:hidden} #indexAbout .about-imgbox::before {position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(3,16,31,.25),transparent 45%),linear-gradient(180deg,transparent 60%,rgba(3,16,31,.24));content:"";pointer-events:none} #indexAbout .about-imgbox::after {position:absolute;inset:18px;z-index:3;border:1px solid rgba(255,255,255,.22);content:"";pointer-events:none} #indexAbout .about-imgbox img {display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,.61,.36,1),filter .8s ease} #indexAbout .about-visual:hover .about-imgbox img {transform:scale(1.035);filter:saturate(1.05)} #indexAbout .about-image-caption {position:absolute;bottom:0;left:0;z-index:5;display:flex;flex-direction:column;justify-content:center;width:285px;height:125px;padding:25px 32px;background:linear-gradient(135deg,var(--site-primary),var(--site-primary-light));box-shadow:18px 18px 45px rgba(3,16,31,.18);color:var(--site-white)} #indexAbout .about-image-caption::before {position:absolute;top:0;left:0;width:70px;height:3px;background:linear-gradient(90deg,var(--site-accent),var(--site-accent-light));content:""} #indexAbout .about-image-caption span {margin-bottom:8px;letter-spacing:.22em;font-size:9px;color:var(--site-accent-light)} #indexAbout .about-image-caption strong {letter-spacing:.08em;font-family:"Cormorant Garamond",Georgia,serif;font-size:21px;font-weight:500} #indexAbout .about-image-mark {position:absolute;top:35px;right:-19px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:13px;padding:18px 10px;background:var(--site-accent);color:var(--site-white)} #indexAbout .about-image-mark i {width:1px;height:42px;background:rgba(255,255,255,.6)} #indexAbout .about-image-mark span {writing-mode:vertical-rl;letter-spacing:.25em;font-family:"Cormorant Garamond",Georgia,serif;font-size:9px} #indexAbout .about-content {position:relative;z-index:3;margin-left:-105px;padding:75px 75px 72px;border-top:4px solid var(--site-primary-light);background:rgba(255,255,255,.97);box-shadow:var(--site-shadow)} #indexAbout .about-content::before {position:absolute;top:-20px;right:42px;width:72px;height:38px;border-top:1px solid var(--site-accent);border-right:1px solid var(--site-accent);content:""} #indexAbout .about-content::after {position:absolute;right:-56px;bottom:-33px;z-index:-1;width:86px;height:86px;border:1px solid rgba(185,154,93,.5);transform:rotate(34deg);content:""} #indexAbout .about-section-no {position:absolute;top:36px;right:45px;display:flex;flex-direction:column;align-items:flex-end;color:rgba(7,27,50,.1)} #indexAbout .about-section-no span {font-family:"Cormorant Garamond",Georgia,serif;font-size:58px;font-weight:500;line-height:.8} #indexAbout .about-section-no small {margin-top:12px;letter-spacing:.28em;font-size:8px;color:var(--site-accent)} #indexAbout .about-lead {margin-bottom:22px;padding-left:18px;border-left:2px solid var(--site-accent);letter-spacing:.1em;font-size:18px;font-weight:500;line-height:1.7;color:var(--site-primary-light)} #indexAbout .about-info {letter-spacing:.045em;font-size:16px;line-height:2;color:var(--site-text)} #indexAbout .about-info p {margin:0 0 18px} #indexAbout .about-info p:last-child {margin-bottom:0} #indexAbout .about-info ul {margin:22px 0 0;padding:0;list-style:none} #indexAbout .about-info li {position:relative;margin-bottom:10px;padding-left:22px} #indexAbout .about-info li::before {position:absolute;top:.9em;left:0;width:9px;height:1px;background:var(--site-accent);content:""} /* #indexProduct */ #indexProduct,#indexProduct * {box-sizing:border-box} #indexProduct {position:relative;padding:150px 35px;background:linear-gradient(145deg,#f7f9fa 0%,#ffffff 48%,#eef3f6 100%);overflow:hidden;isolation:isolate} #indexProduct::before {position:absolute;top:0;right:0;width:100%;height:5px;background:linear-gradient(90deg,var(--site-accent),var(--site-blue),var(--site-primary));content:""} #indexProduct::after {position:absolute;right:-210px;bottom:-360px;z-index:-1;width:650px;height:650px;border:1px solid rgba(37,91,135,.09);transform:rotate(45deg);content:""} #indexProduct .product-bg-word {position:absolute;top:20px;left:-25px;z-index:-1;letter-spacing:.025em;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(120px,16vw,285px);font-weight:600;line-height:1;color:rgba(7,27,50,.025);pointer-events:none} #indexProduct .IntroductionList ul {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0;counter-reset:productCard;list-style:none} #indexProduct .product-heading,#indexProduct .product-item {position:relative;min-width:0;min-height:460px} #indexProduct .product-heading {grid-column:4;grid-row:1;display:flex;flex-direction:column;justify-content:center;padding:55px 48px;background:linear-gradient(145deg,var(--site-primary) 0%,#082541 58%,var(--site-primary-light) 100%);box-shadow:0 28px 65px rgba(3,16,31,.18);color:var(--site-white);overflow:hidden;border:3px solid rgb(28 108 192)} #indexProduct .product-item:nth-child(2) {grid-column:1;grid-row:1} #indexProduct .product-item:nth-child(3) {grid-column:2;grid-row:1} #indexProduct .product-item:nth-child(4) {grid-column:3;grid-row:1} #indexProduct .product-heading::before {position:absolute;right:-95px;bottom:-125px;width:270px;height:270px;border:1px solid rgba(212,189,137,.2);transform:rotate(45deg);content:""} #indexProduct .product-heading::after {position:absolute;top:0;left:0;width:95px;height:4px;background:linear-gradient(90deg,var(--site-accent),var(--site-accent-light));content:""} #indexProduct .product-heading .common-section-title {position:relative;z-index:2;margin-bottom:20px} #indexProduct .product-heading .common-title-main {letter-spacing:.1em} #indexProduct .product-heading-description {position:relative;z-index:2;max-width:300px;margin:0;letter-spacing:.07em;font-size:15px;font-weight:300;line-height:2;color:rgba(255,255,255,.7)} #indexProduct .product-heading .common-btn {z-index:2;align-self:flex-start;margin-top:32px} #indexProduct .product-heading-mark {position:absolute;right:25px;top:25px;display:flex;align-items:center;gap:12px;transform:rotate(270deg);transform-origin:right bottom} #indexProduct .product-heading-mark span {letter-spacing:.28em;font-family:"Cormorant Garamond",Georgia,serif;font-size:8px;color:rgba(255,255,255,.38)} #indexProduct .product-heading-mark i {display:block;width:45px;height:1px;background:var(--site-accent)} #indexProduct .product-item {counter-increment:productCard;background:var(--site-primary);box-shadow:0 22px 50px rgba(3,16,31,.1);overflow:hidden;border:3px solid rgba(212,189,137,.8)} #indexProduct .product-card {position:relative;display:block;width:100%;height:100%;min-height:460px;background:var(--site-primary);color:var(--site-white);text-decoration:none;overflow:hidden} #indexProduct .product-card::before {position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(3,16,31,.05) 25%,rgba(3,16,31,.2) 52%,rgba(3,16,31,.94) 100%),linear-gradient(90deg,rgba(3,16,31,.18),transparent 55%);content:"";transition:background .5s ease} #indexProduct .product-card::after {position:absolute;inset:14px;z-index:4;border:1px solid rgba(255,255,255,0);content:"";pointer-events:none;transition:border-color .4s ease,inset .4s ease} #indexProduct .product-card img {display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.06);transition:transform 1s cubic-bezier(.22,.61,.36,1),filter .7s ease} #indexProduct .product-card:hover img {filter:saturate(1) contrast(1.04);transform:scale(1.065)} #indexProduct .product-card:hover::before {background:linear-gradient(180deg,rgba(3,16,31,.02) 20%,rgba(3,16,31,.13) 48%,rgba(3,16,31,.96) 100%)} #indexProduct .product-card:hover::after {inset:18px;border-color:rgba(212,189,137,.5)} #indexProduct .product-card:focus-visible {outline:3px solid var(--site-accent-light);outline-offset:4px} #indexProduct .product-index {position:absolute;top:28px;left:28px;z-index:5;display:flex;align-items:center;gap:10px;letter-spacing:.12em;font-family:"Cormorant Garamond",Georgia,serif;font-size:14px;color:rgba(255,255,255,.72)} #indexProduct .product-index::before {content:counter(productCard,decimal-leading-zero)} #indexProduct .product-index::after {display:block;width:28px;height:1px;background:var(--site-accent-light);content:""} #indexProduct .product-caption {position:absolute;right:0;bottom:0;left:0;z-index:5;display:block;padding:38px 88px 34px 30px} #indexProduct .product-caption small {display:block;margin-bottom:9px;letter-spacing:.22em;font-family:"Cormorant Garamond",Georgia,serif;font-size:9px;font-weight:500;color:var(--site-accent-light)} #indexProduct .product-caption .h3 {display:-webkit-box;margin:0;letter-spacing:.06em;font-size:clamp(17px,1.4vw,21px);font-weight:500;line-height:1.55;color:var(--site-white);overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2} #indexProduct .product-link-text {display:flex;align-items:center;gap:12px;margin-top:14px;letter-spacing:.2em;font-size:8px;font-weight:600;color:rgba(255,255,255,.65);opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease} #indexProduct .product-link-text i {position:relative;display:block;width:30px;height:1px;background:var(--site-accent-light)} #indexProduct .product-link-text i::after {position:absolute;top:-2px;right:0;width:5px;height:5px;border-top:1px solid var(--site-accent-light);border-right:1px solid var(--site-accent-light);transform:rotate(45deg);content:""} #indexProduct .product-card:hover .product-link-text {opacity:1;transform:translateY(0)} #indexProduct .product-arrow {position:absolute;right:27px;bottom:31px;z-index:6;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.35);border-radius:50%;transition:border-color .4s ease,background .4s ease,transform .4s ease} #indexProduct .product-arrow i {position:relative;display:block;width:17px;height:1px;background:var(--site-white);transition:width .35s ease} #indexProduct .product-arrow i::after {position:absolute;top:-3px;right:0;width:7px;height:7px;border-top:1px solid var(--site-white);border-right:1px solid var(--site-white);transform:rotate(45deg);content:""} #indexProduct .product-card:hover .product-arrow {border-color:var(--site-accent-light);background:var(--site-accent);transform:translateX(3px)} #indexProduct .product-card:hover .product-arrow i {width:21px} /* #indexSlogan */ #indexSlogan,#indexSlogan * {box-sizing:border-box} #indexSlogan {position:relative;display:flex;align-items:center;min-height:570px;padding:105px 35px;background:var(--site-primary);color:var(--site-white);overflow:hidden;isolation:isolate} #indexSlogan::before {position:absolute;top: 36px;right: 36px;bottom: 36px;left: 36px;z-index:5;border:1px solid rgba(255,255,255,.1);content:"";pointer-events:none} #indexSlogan::after {position:absolute;top:0;left:50%;z-index:5;width:1px;height:48px;background:linear-gradient(180deg,var(--site-accent-light),transparent);content:"";pointer-events:none} #indexSlogan .slogan-background {position:absolute;inset:0;z-index:-4;overflow:hidden} #indexSlogan .slogan-background img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.75) contrast(1.08);transform:scale(1.02);transition:transform 8s cubic-bezier(.22,.61,.36,1)} #indexSlogan:hover .slogan-background img {transform:scale(1.075)} #indexSlogan .slogan-overlay {position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(3,16,31,.9) 0%,rgba(3,16,31,.65) 34%,rgba(4,27,49,.48) 50%,rgba(3,16,31,.7) 72%,rgba(3,16,31,.94) 100%),linear-gradient(180deg,rgba(3,16,31,.4),rgba(3,16,31,.78))} #indexSlogan .slogan-overlay::before {position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(37,91,135,.22),transparent 42%),linear-gradient(120deg,transparent 42%,rgba(212,189,137,.08) 50%,transparent 58%);content:""} #indexSlogan .slogan-grid {position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(to bottom,transparent,black 30%,black 70%,transparent);pointer-events:none} #indexSlogan .slogan-content {position:relative;z-index:6;max-width:1020px;margin:0 auto;text-align:center} #indexSlogan .slogan-label {display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:25px;letter-spacing:.32em;font-family:"Cormorant Garamond",Georgia,serif;font-size:11px;font-weight:600;color:var(--site-accent-light)} #indexSlogan .slogan-label span {display:block;width:42px;height:1px;background:linear-gradient(90deg,transparent,var(--site-accent-light))} #indexSlogan .slogan-label span:last-child {background:linear-gradient(90deg,var(--site-accent-light),transparent)} #indexSlogan .slogan-title {letter-spacing:.035em;font-family:"Cormorant Garamond",Georgia,serif;font-size: clamp(40px,5vw,60px);font-weight:600;line-height:1.03;text-shadow:0 8px 30px rgba(0,0,0,.35)} #indexSlogan .slogan-title span {display:block} #indexSlogan .slogan-title span:last-child {margin-top:8px;color:#fff} #indexSlogan .slogan-line {display:flex;align-items:center;justify-content:center;gap:12px;width:180px;margin:32px auto} #indexSlogan .slogan-line i {display:block;width:65px;height:1px;background:linear-gradient(90deg,transparent,rgba(212,189,137,.7))} #indexSlogan .slogan-line i:last-child {background:linear-gradient(90deg,rgba(212,189,137,.7),transparent)} #indexSlogan .slogan-line span {display:block;width:7px;height:7px;border:1px solid var(--site-accent-light);transform:rotate(45deg)} #indexSlogan .slogan-title-tw {letter-spacing:.3em;font-size:20px;font-weight:500;line-height:1.6;color:var(--site-white)} #indexSlogan .slogan-description {margin-top:13px;letter-spacing:.14em;font-size:15px;font-weight:300;line-height:1.9;color:rgba(255,255,255,.72)} #indexSlogan .slogan-side-text {position:absolute;top:50%;right: 25px;z-index:6;letter-spacing:.3em;font-family:"Cormorant Garamond",Georgia,serif;font-size:8px;color:rgba(255,255,255,.4);transform:translate(30%,-50%) rotate(-90deg);white-space:nowrap} #indexSlogan .slogan-side-text::before {position:absolute;top:50%;left:-68px;width:48px;height:1px;background:var(--site-accent);content:""} #indexSlogan .slogan-corner {position:absolute;left:0;bottom:0;z-index:7;width:260px;height:125px;overflow:hidden;pointer-events:none;transform:scaleX(-1)} #indexSlogan .slogan-corner span {position:absolute;display:block;transform:skewX(-34deg);transform-origin:right bottom} #indexSlogan .slogan-corner-small {right:105px;bottom:-52px;width:105px;height:112px;border:1px solid rgba(212,189,137,.65);background:linear-gradient(145deg,rgba(185,154,93,.78),rgba(212,189,137,.48))} #indexSlogan .slogan-corner-large {right:-54px;bottom:-76px;width:195px;height:165px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(226,234,239,.94));box-shadow:-18px -12px 45px rgba(3,16,31,.24)} @keyframes sloganLightMove{0%{transform:translateX(-120%) skewX(-20deg)}100%{transform:translateX(250%) skewX(-20deg)}} #indexSlogan .slogan-content::before {position:absolute;top:-80px;left:-35%;z-index:-1;width:25%;height:420px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent);transform:skewX(-20deg);animation:sloganLightMove 9s ease-in-out infinite;content:"";pointer-events:none} /* #indexNews */ #indexNews,#indexNews * {box-sizing:border-box} #indexNews {position:relative;padding:145px 35px 150px;background:linear-gradient(135deg,#f4f7f9 0%,#fff 43%,#f7f9fa 100%);overflow:hidden;isolation:isolate} #indexNews:before {content:"";position:absolute;width:53vw;height:60vw;right:26vw;top:-1vw;border:1px solid rgba(212,189,137,.8);background:linear-gradient(145deg,rgba(185,154,93,.92),rgba(212,189,137,.72));background:linear-gradient(145deg,rgb(247 247 247 / 75%),rgb(255 255 255 / 48%));box-shadow:0 0 30px rgba(185,154,93,.16);transform:skewX(-34deg);transform-origin:right bottom} #indexNews::after {position:absolute;top:0;right:0;width: 39vw;height:5px;background: linear-gradient(90deg, rgb(185 154 93 / 0%), var(--site-blue), var(--site-primary));content:""} #indexNews .common-container {position:relative;z-index:2;width:min(100%,1420px);margin:0 auto} #indexNews .news-bg-word {position:absolute;right:-35px;bottom:-32px;z-index:-1;letter-spacing:.03em;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(115px,15vw,270px);font-weight:600;line-height:.8;color:rgba(7,27,50,.025);pointer-events:none} #indexNews .news-layout {display:grid;grid-template-columns:minmax(330px,.72fr) minmax(0,1.28fr);align-items: center;gap:100px} #indexNews .news-heading {position:relative;padding: 38px 0 60px 45px;} #indexNews .news-heading::before {position:absolute;top:0;left:0;width:1px;height:130px;background:linear-gradient(180deg,var(--site-accent),rgba(185,154,93,0));content:""} #indexNews .news-heading::after {position:absolute;top:0;left:-5px;width:11px;height:11px;border:1px solid var(--site-accent);background:#fff;transform:rotate(45deg);content:""} #indexNews .common-section-title {margin-bottom:27px} #indexNews .common-title-main a {color:inherit;text-decoration:none;transition:color .35s ease} #indexNews .common-title-main a:hover {color:var(--site-blue)} #indexNews .news-heading-description {max-width:390px;margin:0;letter-spacing:.07em;font-size:15px;line-height:2;color:var(--site-text)} #indexNews .news-view-all {display:inline-flex;align-items:center;gap:22px;margin-top:48px;color:var(--site-primary);text-decoration:none} #indexNews .news-view-circle {position:relative;display:flex;align-items:center;justify-content:center;width:92px;height:92px;border:1px solid rgba(7,27,50,.25);border-radius:50%;background:rgba(255,255,255,.52);transition:border-color .4s ease,background .4s ease,transform .4s ease} #indexNews .news-view-circle::before {position:absolute;inset:9px;border:1px solid rgba(185,154,93,0);border-radius:50%;content:"";transition:border-color .4s ease} #indexNews .news-view-circle i {position:relative;display:block;width:24px;height:1px;background:var(--site-primary);transition:width .35s ease,background .35s ease} #indexNews .news-view-circle i::after {position:absolute;top:-3px;right:0;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);content:""} #indexNews .news-view-text {display:flex;flex-direction:column;gap:5px} #indexNews .news-view-text small {letter-spacing:.22em;font-family:"Cormorant Garamond",Georgia,serif;font-size:9px;font-weight:600;color:var(--site-accent)} #indexNews .news-view-text strong {letter-spacing:.11em;font-size:14px;font-weight:500;color:var(--site-primary)} #indexNews .news-view-all:hover .news-view-circle {border-color:var(--site-primary);background:var(--site-primary);transform:translateX(4px)} #indexNews .news-view-all:hover .news-view-circle::before {border-color:rgba(212,189,137,.48)} #indexNews .news-view-all:hover .news-view-circle i {width:31px;background:var(--site-white);color:var(--site-white)} #indexNews .news-view-all:focus-visible {outline:2px solid var(--site-accent);outline-offset:7px} #indexNews .news-heading-mark {position:absolute;bottom:0;left:45px;display:flex;align-items:center;gap:13px;letter-spacing:.22em;font-family:"Cormorant Garamond",Georgia,serif;font-size:8px;color:rgba(7,27,50,.33)} #indexNews .news-heading-mark i {display:block;width:45px;height:1px;background:linear-gradient(90deg,var(--site-accent),rgba(185,154,93,.15))} #indexNews #newsList {position:relative;background:rgb(255 255 255 / 75%);padding:20px;border-radius:20px;box-shadow:10px 10px 14px rgb(3 16 31 / 8%)} #indexNews .newsItem ul {margin:0;padding:0;counter-reset:newsCard;list-style:none} #indexNews .news-card {position:relative;display:grid;grid-template-columns:250px minmax(0,1fr);align-items:center;gap:42px;min-height:235px;padding: 28px 50px 28px 0;border-bottom:1px solid rgba(7,27,50,.12);counter-increment:newsCard;overflow:hidden} #indexNews .news-card::before {position:absolute;bottom:-1px;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--site-accent),var(--site-blue));content:"";transition:width .65s cubic-bezier(.22,.61,.36,1)} #indexNews .news-card:hover::before {width:100%} #indexNews .nwi-img {position:relative;display:block;width:100%;height:176px;background:var(--site-primary);overflow:hidden} #indexNews .nwi-img::before {position:absolute;inset:0;z-index:2;background:linear-gradient(145deg,rgba(3,16,31,.04),rgba(3,16,31,.28));content:"";transition:background .45s ease} #indexNews .nwi-img::after {position:absolute;inset:10px;z-index:3;border:1px solid rgba(255,255,255,.18);content:"";pointer-events:none} #indexNews .nwi-img img {display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.04);transition:transform .9s cubic-bezier(.22,.61,.36,1),filter .6s ease} #indexNews .news-img-line {position:absolute;right:0;bottom:0;z-index:4;width:58px;height:3px;background:linear-gradient(90deg,var(--site-accent),var(--site-accent-light));transition:width .4s ease} #indexNews .news-card:hover .nwi-img img {filter:saturate(1) contrast(1.03);transform:scale(1.055)} #indexNews .news-card:hover .nwi-img::before {background:linear-gradient(145deg,rgba(3,16,31,0),rgba(3,16,31,.15))} #indexNews .news-card:hover .news-img-line {width:100%} #indexNews .news-content {position:relative;z-index:2;min-width:0;transition:transform .4s ease} #indexNews .news-card:hover .news-content {transform:translateX(6px)} #indexNews .news-meta {display:flex;align-items:center;gap:12px;margin-bottom:14px} #indexNews .news-meta span,#indexNews .news-meta small {letter-spacing:.15em;font-family:"Cormorant Garamond",Georgia,serif;font-size:9px;font-weight:600} #indexNews .news-meta span {color:var(--site-accent)} #indexNews .news-meta small {color:rgba(7,27,50,.4)} #indexNews .news-meta i {display:block;width:24px;height:1px;background:rgba(7,27,50,.2)} #indexNews .h3 {margin:0} #indexNews .h3 a {display:-webkit-box;letter-spacing:.055em;font-size:clamp(18px,1.45vw,23px);font-weight:600;line-height:1.65;color:var(--site-primary);text-decoration:none;overflow:hidden;transition:color .35s ease;-webkit-box-orient:vertical;-webkit-line-clamp:2} #indexNews .news-card:hover .h3 a {color:var(--site-blue)} #indexNews .more {margin:18px 0 0} #indexNews .more a {display:inline-flex;align-items:center;gap:13px;letter-spacing:.2em;font-family:"Cormorant Garamond",Georgia,serif;font-size:9px;font-weight:600;color:rgba(7,27,50,.55);text-decoration:none} #indexNews .more i {position:relative;display:block;width:34px;height:1px;background:var(--site-accent);transition:width .35s ease} #indexNews .more i::after {position:absolute;top:-2px;right:0;width:5px;height:5px;border-top:1px solid var(--site-accent);border-right:1px solid var(--site-accent);transform:rotate(45deg);content:""} #indexNews .more a:hover i {width:48px} #indexNews .more a:focus-visible,.newsWrap .h3 a:focus-visible,.newsWrap .nwi-img:focus-visible {outline:2px solid var(--site-accent);outline-offset:4px} #indexNews .news-index {position:absolute;top:33px;right:5px;letter-spacing:.04em;font-family:"Cormorant Garamond",Georgia,serif;font-size:34px;font-weight:500;line-height:1;color:rgba(7,27,50,.08)} #indexNews .news-index::before {content:counter(newsCard,decimal-leading-zero)} /* @media */ @media screen and (max-width:1470px) { .common-title-main { font-size: clamp(32px,3vw,40px) } #indexAbout,#indexProduct,#indexSlogan { padding: 100px 6VW; } #indexAbout .about-bg-word:before{height: 65vw;} #indexAbout .about-content { padding: 80px 75px 75px; } #indexNews:before{ width: 56vw; right: 21vw; } } #indexNews { padding: 80px 35px 80px; } @media screen and (max-width:1280px) { #indexAbout { padding-right: 28px; padding-left: 28px } #indexAbout .about-layout { grid-template-columns: minmax(0,1.12fr) minmax(400px,.88fr) } #indexAbout .about-imgbox { height: 590px } #indexAbout .about-content { margin-left: -80px; padding: 62px 55px } #indexProduct { padding-right: 28px; padding-left: 28px } #indexProduct .IntroductionList ul { gap: 18px } #indexProduct .product-heading,#indexProduct .product-item,#indexProduct .product-card { min-height: 420px } #indexProduct .product-heading { padding: 42px 34px } #indexProduct .product-caption { padding-right: 75px; padding-left: 24px } #indexProduct .product-arrow { right: 22px; bottom: 27px; width: 42px; height: 42px } #indexNews { padding-right: 28px; padding-left: 28px } #indexNews .news-layout { grid-template-columns: minmax(300px,.68fr) minmax(0,1.32fr); gap: 60px } #indexNews .news-card { grid-template-columns: 220px minmax(0,1fr); gap: 32px; padding-right: 60px } #indexNews .nwi-img { height: 160px } } @media screen and (max-width:1199px) { #indexAbout .about-content { padding: 37px 30px; } #indexProduct { padding-top: 115px; padding-bottom: 115px } #indexProduct .IntroductionList ul { grid-template-columns: repeat(3,minmax(0,1fr)) } #indexProduct .product-heading,#indexProduct .product-item:nth-child(2),#indexProduct .product-item:nth-child(3),#indexProduct .product-item:nth-child(4) { grid-column: auto; grid-row: auto } #indexProduct .product-heading { grid-column: 1/-1; min-height: 320px; padding: 55px } #indexProduct .product-heading-description { max-width: 500px } #indexProduct .product-heading-mark { right: 28px; bottom: 28px } #indexSlogan { min-height: 520px; padding: 95px 28px } #indexSlogan .slogan-title { font-size: 36px; } } @media screen and (max-width:991px) { #indexAbout { padding-top: 110px; padding-bottom: 110px } #indexAbout .about-layout { display: block } #indexAbout .about-visual { padding-left: 38px } #indexAbout .about-imgbox { height: 570px } #indexAbout .about-content { width: calc(100% - 75px); margin: -90px 0 0 auto; padding: 58px 55px } #indexProduct { padding-top: 100px; padding-bottom: 100px } #indexProduct .IntroductionList ul { grid-template-columns: repeat(2,minmax(0,1fr)) } #indexProduct .product-heading { min-height: 300px } #indexProduct .product-item,#indexProduct .product-card { min-height: 450px } #indexSlogan { min-height: 500px; padding: 85px 28px } #indexSlogan .slogan-title { font-size: 52px } #indexSlogan .slogan-side-text { display: none } #indexNews { padding-top: 110px; padding-bottom: 110px } #indexNews .news-layout { display: block } #indexNews .news-heading { min-height: 0; margin-bottom: 70px; padding: 20px 0 0 35px } #indexNews .news-heading-description { max-width: 540px } #indexNews .news-heading-mark { display: none } #indexNews .news-view-all { margin-top: 35px } } @media screen and (max-width:767px) { #indexAbout { padding: 85px 20px } #indexAbout .about-bg-word { top: 35px; font-size: 110px } #indexAbout .about-visual { padding: 0 0 32px 22px } #indexAbout .about-imgbox { height: 440px } #indexAbout .about-imgbox::after { inset: 11px } #indexAbout .about-image-caption { width: 235px; height: 102px; padding: 20px 24px } #indexAbout .about-image-caption strong { font-size: 18px } #indexAbout .about-image-mark { top: 25px; right: -10px } #indexAbout .about-content { width: calc(100% - 18px); margin: -48px 0 0 auto; padding: 45px 32px } #indexAbout .about-section-no { top: 28px; right: 28px } #indexAbout .about-section-no span { font-size: 43px } #indexAbout .about-lead { font-size: 16px } #indexAbout .about-info { font-size: 15px; line-height: 1.9 } .common-title-main { font-size: 34px } .common-btn { height: 52px; margin-top: 30px } #indexProduct { padding: 85px 20px } #indexProduct .product-bg-word { top: 36px; font-size: 105px } #indexProduct .IntroductionList ul { grid-template-columns: 1fr; gap: 18px } #indexProduct .product-heading { min-height: 360px; padding: 42px 32px } #indexProduct .product-heading-description { font-size: 14px; line-height: 1.9 } #indexProduct .product-heading-mark { display: none } #indexProduct .product-item { min-height: 0; aspect-ratio: 4/5 } #indexProduct .product-card { min-height: 0 } #indexProduct .product-link-text { opacity: 1; transform: none } #indexProduct .product-caption { padding: 32px 78px 29px 25px } #indexProduct .product-index { top: 23px; left: 23px } #indexProduct .product-arrow { right: 22px; bottom: 25px } #indexProduct .product-caption small{display: none;} #indexSlogan { min-height: 470px; padding: 75px 25px } #indexSlogan::before { top: 14px; right: 14px; bottom: 14px; left: 14px } #indexSlogan .slogan-background img { object-position: center } #indexSlogan .slogan-label { gap: 12px; margin-bottom: 20px; letter-spacing: .24em; font-size: 9px } #indexSlogan .slogan-label span { width: 25px } #indexSlogan .slogan-title { font-size: clamp(35px,9vw,48px); line-height: 1.08 } #indexSlogan .slogan-line { width: 140px; margin: 25px auto } #indexSlogan .slogan-line i { width: 45px } #indexSlogan .slogan-title-tw { letter-spacing: .2em; font-size: 17px } #indexSlogan .slogan-description { max-width: 440px; margin: 12px auto 0; letter-spacing: .08em; font-size: 13px } #indexSlogan .slogan-corner { width: 185px; height: 85px } #indexSlogan .slogan-corner-small { right: 74px; bottom: -39px; width: 72px; height: 78px } #indexSlogan .slogan-corner-large { right: -43px; bottom: -60px; width: 142px; height: 120px } #indexNews { padding: 85px 20px } #indexNews .news-bg-word { bottom: 0; font-size: 105px } #indexNews .news-heading { margin-bottom: 55px; padding-left: 25px } #indexNews .news-heading-description { font-size: 14px; line-height: 1.9 } #indexNews .news-view-circle { width: 76px; height: 76px } #indexNews .news-card { grid-template-columns: 190px minmax(0,1fr); gap: 24px; min-height: 205px; padding: 24px 43px 24px 0 } #indexNews .nwi-img { height: 145px } #indexNews .news-meta small,#indexNews .news-meta i { display: none } #indexNews .h3 a { font-size: 18px } #indexNews .news-index { top: 28px; font-size: 27px } } @media screen and (max-width:600px) { #indexNews { padding-right: 15px; padding-left: 15px; } #indexNews .news-heading { padding-left: 20px } #indexNews .news-view-text small { display: none } #indexNews .news-card {display: block;padding: 24px 0 30px;} #indexNews .nwi-img { height: auto; aspect-ratio: 16/10 } #indexNews .news-content { padding: 24px 45px 0 3px } #indexNews .news-card:hover .news-content { transform: none } #indexNews .news-index { top: auto; right: 2px; bottom: 33px } #indexNews .h3 a { font-size: 19px } #indexNews .more { margin-top: 14px } } @media screen and (max-width:480px) { #indexAbout,#indexSlogan,#indexProduct,#indexNews { padding: 60px 6vw; } #indexAbout::before { width: calc(100% - 0px); } #indexAbout .about-visual { padding-left: 14px } #indexAbout .about-imgbox { height: 350px } #indexAbout .about-image-caption { position: relative; bottom: auto; left: auto; width: 225px; height: 90px; margin-top: -58px; padding: 17px 20px } #indexAbout .about-image-mark { display: none } #indexAbout .about-content { width: 100%; margin: 18px 0 0; padding: 38px 23px } #indexAbout .about-content::before { right: 20px; } #indexAbout .about-content::after { display: none } #indexAbout .about-section-no { display: none } .common-title-en { gap: 11px; letter-spacing: .22em; font-size: 11px } .common-title-en::before { width: 30px } .common-title-main { font-size: 30px } .common-btn { width: 100%; min-width: 0 } #indexProduct .product-heading { min-height: 350px; padding: 38px 24px } #indexProduct .product-heading .common-btn { width: 100% } #indexProduct .product-item {aspect-ratio: 4/5;} #indexProduct .product-caption .h3 { font-size: 20px } #indexSlogan { min-height: 470px; } #indexSlogan .slogan-label { letter-spacing: .18em } #indexSlogan .slogan-label span { display: none } #indexSlogan .slogan-title {font-size: 29px;} #indexSlogan .slogan-title span:last-child { margin-top: 6px } #indexSlogan .slogan-title-tw { letter-spacing: .14em; font-size: 16px } #indexSlogan .slogan-description { padding: 0 12px; font-size: 12px; line-height: 1.8 } #indexSlogan .slogan-corner { width: 140px; height: 65px } #indexNews .news-heading { margin-bottom: 45px } #indexNews .news-view-all { gap: 15px } #indexNews .news-view-circle { width: 68px; height: 68px } #indexNews .news-view-text strong { font-size: 13px } #indexNews .news-content { padding-right: 38px } #indexNews::after { width: 100% } #indexNews:before {height: 21vw;right: -26vw;top: 11vw;} } @media (prefers-reduced-motion:reduce) { #indexAbout .about-imgbox img,.common-btn,.common-btn::before,.common-btn>i { transition-duration: .01ms!important } #indexProduct .product-card,#indexProduct .product-card::after,#indexProduct .product-card img,#indexProduct .product-link-text,#indexProduct .product-arrow,#indexProduct .product-arrow i { transition-duration: .01ms!important } #indexSlogan .slogan-background img { transition: none } #indexSlogan .slogan-content::before { animation: none } #indexNews .news-card::before,#indexNews .news-content,#indexNews .nwi-img img,#indexNews .news-img-line,#indexNews .news-view-circle,#indexNews .news-view-circle::before,#indexNews .news-view-circle i,#indexNews .more i { transition-duration: .01ms!important } }