@charset "utf-8"; 

 @keyframes scroll {
    0% {transform:translateY(0);}
    100% {transform:translateY(50%);}
 }

.sub-hero {position:relative; height:100vh; overflow:hidden; color:#fff; text-align:center;} 
.sub-hero .image {position:relative; height:100vh; overflow:hidden;} 
.sub-hero .image img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} 
.sub-hero .scroll {position:absolute; bottom:60px; left:50%; width:100px; margin-left:-50px; text-align:center; z-index:10; animation:scroll 1s linear infinite alternate;}

/* about */
.about-text {display:flex; justify-content:center; align-items:center; overflow:hidden; min-height:clamp(240px, calc(530 / var(--inner) * 100vw ), 530px); margin-bottom:var(--space-120); padding:var(--space-80) 0; background:#000; color:#fff; font-family:var(--font-serif); font-size:clamp(18px, calc(36 / var(--inner) * 100vw ), 36px); font-weight:800; line-height:1.5em; text-align:center;}

.about-service {margin-bottom:var(--space-110);}
.about-service .items {display:grid; grid-template-columns:repeat(3, 1fr); gap:30px;}
.about-service .item {position:relative; overflow:hidden; border-radius:var(--border-radius-24);}
.about-service .item .image {aspect-ratio:448/517;}
.about-service .item .image img {display:block; width:100%; height:100%; object-fit:cover; transition:.4s;}
.about-service .item .content {position:absolute; top:0; left:0; width:100%; padding:clamp(40px, calc(50 / var(--inner) * 100vw ), 50px) clamp(20px, calc(48 / var(--inner) * 100vw ), 48px); color:#fff; font-size:clamp(18px, calc(36 / var(--inner) * 100vw ), 36px); font-weight:800; line-height:1.5em;}
.about-service .item .content .title {margin-bottom:var(--space-15); font-size:clamp(12px, calc(18 / var(--inner) * 100vw ), 18px); font-weight:100; line-height:1.3em;}
.about-service .item .content .text {font-size:clamp(18px, calc(28 / var(--inner) * 100vw ), 28px); font-weight:600; line-height:1.3em;}
.about-service .item:hover .image img {filter:blur(20px);}

.about-products  {margin-bottom:var(--space-120);}
.about-products .heading {margin-bottom:var(--space-100); font-size:clamp(18px, calc(36 / var(--inner) * 100vw ), 36px); font-weight:100; line-height:1.3em;}
.about-products .items {display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(30px, calc(70 / var(--inner) * 100vw ), 70px) clamp(20px, calc(40 / var(--inner) * 100vw ), 40px);}
.about-products .item {position:relative; overflow:hidden; border-radius:var(--border-radius-24);}
.about-products .item .image {aspect-ratio:680/626;}
.about-products .item .image img {display:block; width:100%; height:100%; object-fit:cover; transition:.4s;}
.about-products .item .content {position:absolute; left:0; bottom:0; width:100%; padding:clamp(20px, calc(50 / var(--inner) * 100vw ), 50px); color:#fff; font-size:clamp(18px, calc(36 / var(--inner) * 100vw ), 36px); font-weight:800; line-height:1.5em;}
.about-products .item .content .title {margin-bottom:var(--space-20); font-size:clamp(18px, calc(36 / var(--inner) * 100vw ), 36px); font-weight:700; line-height:1.3em;}
.about-products .item .content .text {font-size:clamp(14px, calc(22 / var(--inner) * 100vw ), 22px); font-weight:200; line-height:1.5em;}

.about-download {display:flex; justify-content:center; align-items:center; min-height:clamp(450px, calc(783 / var(--inner) * 100vw ), 783px); padding:var(--space-80) 0; background:url(/html/images/sub/about-download.jpg) no-repeat center center / cover; text-align:center; color:#fff;}
.about-download .content {display:flex; flex-direction:column; align-items:center; gap:clamp(20px, calc(65 / var(--inner) * 100vw ), 65px); margin-bottom:clamp(30px, calc(60 / var(--inner) * 100vw ), 60px);}
.about-download .content h3 {font-size:clamp(30px, calc(58 / var(--inner) * 100vw ), 58px); font-weight:400; line-height:1.3em;}
.about-download .content p {font-size:clamp(14px, calc(22 / var(--inner) * 100vw ), 22px); font-weight:200; line-height:1.5em;}
.about-download .button {display:inline-flex; justify-content:center; align-items:center; width:clamp(220px, calc(395 / var(--inner) * 100vw ), 395px); height:clamp(48px, calc(82 / var(--inner) * 100vw ), 82px); gap:clamp(16px, calc(23 / var(--inner) * 100vw ), 23px); background:#fff; color:#000; font-size:clamp(15px, calc(24 / var(--inner) * 100vw ), 24px); font-weight:700; line-height:1.3em;}
.about-download .button img {width:clamp(14px, calc(23 / var(--inner) * 100vw ), 23px);}

/* contact */
.contact-hero {position:relative; margin-top:var(--header-height); height:clamp(340px, calc(628 / var(--inner) * 100vw ), 628px); overflow:hidden; color:#fff; text-align:center;} 
.contact-hero .image img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} 
.contact-hero .content {position:absolute; top:50%; left:50%; width:100%; transform:translate(-50%, -50%); z-index:10;}
.contact-hero .content h2 {margin-bottom:clamp(20px, calc(50 / var(--inner) * 100vw ), 50px); font-size:clamp(25px, calc(60 / var(--inner) * 100vw ), 60px); font-weight:600; line-height:1.33em;}
.contact-hero .content p {font-size:clamp(15px, calc(30 / var(--inner) * 100vw ), 30px); line-height:1.33em;}

.contact-directions {padding:clamp(50px, calc(100 / var(--inner) * 100vw ), 100px) 0 clamp(50px, calc(130 / var(--inner) * 100vw ), 130px);}

.direction-wrap {display:flex; gap:var(--space-40);}

.direction-tabs {width:clamp(250px, calc(377 / var(--inner) * 100vw ), 377px);}
.direction-tabs button {display:flex; align-items:center; justify-content:center; width:100%; height:clamp(56px, calc(92 / var(--inner) * 100vw ), 92px); border:1px solid #000; margin-bottom:-1px; background:#fff; cursor:pointer; font-size:clamp(15px, calc(24 / var(--inner) * 100vw ), 24px); font-weight:600; line-height:1.3em; letter-spacing:-.025em; text-align:center;}
.direction-tabs button.active {background:#000; color:#fff;}

.direction-contents {flex:1 1 auto; min-width:0; width:1%;}
.direction-content {display:none;}
.direction-content.active {display:block;}

.direction-info-content .info {display:grid; gap:var(--space-20); margin-bottom:clamp(20px, calc(50 / var(--inner) * 100vw ), 50px); font-size:clamp(14px, calc(20 / var(--inner) * 100vw ), 20px); line-height:1.5em; letter-spacing:-.025em;}
.direction-info-content .info dl {display:flex;}
.direction-info-content .info dt {width:6em; font-weight:700;}
.direction-info-content .info dd {flex:1 1 auto; min-width:0; width:1%;}
.direction-info-content .map iframe {display:block; aspect-ratio:984/556; width:100%; height:auto;}

.direction-accordion {display:none;}

.accordion-title {display:flex; align-items:center; justify-content:space-between; width:100%; height:clamp(56px, calc(92 / var(--inner) * 100vw ), 92px); padding:0 clamp(20px, calc(30 / var(--inner) * 100vw ), 30px); border:1px solid #000; margin-bottom:-1px; background:#fff; cursor:pointer; font-size:clamp(15px, calc(24 / var(--inner) * 100vw ), 24px); font-weight:600; line-height:1.3em; letter-spacing:-.025em; text-align:center;}
.accordion-title svg {vertical-align:middle; width:22px; height:auto;}
.accordion-content {display:none; padding:clamp(20px, calc(40 / var(--inner) * 100vw ), 40px) 0;}
.accordion-item.active .accordion-title {background:#000; color:#fff;}
.accordion-item.active .accordion-title svg {-webkit-transform:scaleY(-1); transform:scaleY(-1);}
.accordion-item.active .accordion-title svg path {fill:#fff;}

.contact-form {padding:clamp(50px, calc(100 / var(--inner) * 100vw ), 100px) 0 clamp(75px, calc(130 / var(--inner) * 100vw ), 160px); background:#f8f8f8;}
.contact-form .form-wrap {max-width:648px; margin:0 auto;}
.contact-form h2 {margin-bottom:clamp(25px, calc(60 / var(--inner) * 100vw ), 60px); font-size:clamp(21px, calc(42 / var(--inner) * 100vw ), 42px); font-weight:700; line-height:1.3em; text-align:center;}
.contact-form .form-group {margin-bottom:clamp(25px, calc(60 / var(--inner) * 100vw ), 60px);}
.contact-form .form-group label {display:block; margin-bottom:clamp(8px, calc(10 / var(--inner) * 100vw ), 10px); color:#333333; font-size:clamp(15px, calc(24 / var(--inner) * 100vw ), 24px); line-height:1.5em;}
.contact-form .form-group .input {display:block; width:100%; height:clamp(45px, calc(63 / var(--inner) * 100vw ), 63px); border-radius:var(--border-radius-10); background:#fff; border:1px solid #d8d8d8; padding:clamp(10px, calc(16 / var(--inner) * 100vw ), 16px); font-size:clamp(15px, calc(24 / var(--inner) * 100vw ), 24px);}
.contact-form .form-group textarea.input {height:clamp(160px, calc(320 / var(--inner) * 100vw ), 320px);} 
.contact-form .form-agree {position:relative; padding-left:clamp(34px, calc(50 / var(--inner) * 100vw ), 50px); margin-top:clamp(25px, calc(40 / var(--inner) * 100vw ), 40px); font-size:clamp(13px, calc(20 / var(--inner) * 100vw ), 20px); line-height:1.5em;}
.contact-form .form-agree input[type="checkbox"] {position:absolute; top:-.15em; left:0; width:clamp(24px, calc(34 / var(--inner) * 100vw ), 34px); height:clamp(24px, calc(34 / var(--inner) * 100vw ), 34px);}
.contact-form .form-agree a {color:#3c85e9;}
.contact-form .form-agree a:hover {text-decoration:underline;}
.contact-form .form-button {margin-top:clamp(30px, calc(60 / var(--inner) * 100vw ), 60px); text-align:center;}

.privacy-popup {padding:var(--space-30);}
.privacy-popup .title {font-size:clamp(16px, calc(20 / var(--inner) * 100vw ), 20px); font-weight:700; line-height:1.3em;}
.privacy-popup .content {margin-top:clamp(16px, calc(24 / var(--inner) * 100vw ), 24px); font-size:clamp(12px, calc(14 / var(--inner) * 100vw ), 14px);line-height:1.5em;}
.privacy-popup .content p {margin-bottom:1rem;}