@charset "utf-8";
/* ==================================================
   BAGUS Framework 2.0
=====================================================

Author     : BAGUS Inc.
Version    : 2.0
Updated    : 2026-07
Framework  : Split Layout System

-----------------------------------------------------
Responsive Breakpoints

1921px～        Wide Desktop       (3 columns)
1281px～1920px  Desktop            (2 columns)
1024px～1280px  Split Layout       (1 column)

835px～1023px   Tablet Landscape   (3 columns)
561px～834px    Tablet Portrait    (2 columns)

～560px         Smartphone         (1 column)

================================================== */

:root{--header-height:50px}

/* Header */
#header{width:100%;height:var(--header-height);position:fixed;top:0;left:0;display:flex;justify-content:space-between;align-items:center;padding:0 0 0 20px;color:#fff;background:transparent;transition:color .55s cubic-bezier(.22,.61,.36,1),background-color .55s cubic-bezier(.22,.61,.36,1),box-shadow .55s cubic-bezier(.22,.61,.36,1)}
#header.active{color:#333;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 10px rgba(0,0,0,.06)}
body.menu-open #header{color:#fff;background:transparent;box-shadow:none;z-index:40}

/* Top Link */
#TopLink{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:1;transition:opacity .8s ease,transform .8s ease}
#TopLink a{width:200px;height:200px;display:block;overflow:hidden;white-space:nowrap;text-indent:100%;background:url(../images/TopLink.png) no-repeat center;background-size:200px}
#TopLink.is-hide{opacity:0;transform:translate(-50%,-58%)}

/* Breadcrumb */
#pankuzu{position:absolute;left:0;bottom:30px;height:56px;padding:46px 0 0 10px;color:#fff;font-size:.9rem;opacity:1;transform:translateY(0);transition:opacity .8s ease,transform .8s ease}
#pankuzu a:hover{text-decoration:underline}
#pankuzu.is-hide{opacity:0;transform:translateY(-20px)}
#pankuzu .pankuzu_arrow{padding-left:15px}
#pankuzu .SP{display:inline}

#home{position:absolute;top:52px}
#home a{display:block;width:16px;height:16px;overflow:hidden;white-space:nowrap;text-indent:100%;background:url(../images/home.webp) no-repeat;background-size:16px}
.equal{margin:0 .25em 0 .5em}

/* Hamburger */
#hamburger{width:50px;height:50px;position:relative;margin:0;color:inherit;cursor:pointer;flex:0 0 35px}
#hamburger span{width:22px;height:2px;position:absolute;left:0;background:currentColor;transition:background-color .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1),opacity .55s cubic-bezier(.22,.61,.36,1)}
#hamburger span:nth-child(1){top:13px}
#hamburger span:nth-child(2){top:19px}
#hamburger span:nth-child(3){top:25px}
#hamburger span:nth-child(3)::after{content:"NAVI";position:absolute;top:5px;left:0;color:currentColor;font-size:.6rem;letter-spacing:.05em;transition:color .55s cubic-bezier(.22,.61,.36,1),left .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
#hamburger.active span{background:currentColor}
#hamburger.active span:nth-child(1){width:30%;top:20px;left:6px;transform:rotate(-45deg)}
#hamburger.active span:nth-child(2){opacity:0}
#hamburger.active span:nth-child(3){width:30%;top:20px;left:6px;transform:rotate(45deg)}
#hamburger.active span:nth-child(3)::after{content:"CLOSE";top:5px;left:4px;color:currentColor;transform:rotate(-45deg)}
body.page #hamburger{color:#333}
body.page.menu-open #hamburger{color:#fff}

/* Navigation */
#navi{width:50%;height:100%;position:fixed;top:0;right:-50%;padding:40px;background:#483c32;overflow-y:auto;transition:right .55s cubic-bezier(.22,.61,.36,1)}
#navi.is-open{right:0}
#navi ul{margin:0;padding:0}
#navi>ul>li{border-bottom:1px solid rgba(255,255,255,.08)}
#navi>ul>li>a{display:flex;align-items:center;min-height:60px;color:#fff}
#navi li{margin:0}
#navi a{color:#fff;text-decoration:none}

/* Accordion */
.accordion{width:100%;min-height:60px;padding:0;display:flex;justify-content:space-between;align-items:center;background:none;border:none;color:#fff;font-size:1rem;cursor:pointer}
.submenu{max-height:0;margin:0;padding:0 0 12px;overflow:hidden;opacity:0;transition:max-height .8s cubic-bezier(.22,.61,.36,1),opacity .6s ease}
.submenu.open{max-height:900px;opacity:1}
.submenu li{margin:0}
.submenu a{position:relative;display:block;padding:12px 0 12px 22px;color:#ddd;font-size:.92rem}
.submenu a::before{content:">";position:absolute;left:0;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.65);font-size:.95rem}
.icon{position:relative;width:14px;height:14px;flex:none}
.icon::before,
.icon::after{content:"";position:absolute;top:50%;left:50%;width:14px;height:2px;background:#fff;transition:transform .35s ease}
.icon::before{transform:translate(-50%,-50%)}
.icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.accordion.active .icon::after{transform:translate(-50%,-50%) rotate(0deg)}

/* Layout */
#layout{min-height:100svh}
#left{width:50%;height:100vh;position:fixed;top:0;left:0;overflow:hidden;isolation:isolate}
#right{width:50%;margin-left:50%;overflow-x:hidden}

/* Media */
.video,.image,#left img{width:100%;height:100%;position:absolute;top:0;left:0;object-fit:cover}
#overlay{width:100%;height:100%;position:absolute;top:0;left:0;background:rgba(66,33,25,.40);pointer-events:none}

/* Hero */
.hero{height:100%;margin:0;position:relative}
.hero img{width:100%;height:100%;display:block;object-fit:cover}
#transparent{display:block;position:absolute;z-index:3;background:url(../images/transparent.webp) 50%/contain no-repeat;inset:0}

/* Content */
.content{max-width:1080px;margin:0 auto;padding:0 40px}
.coming-soon,#set-purchase #TopLink{display:none}

/* Widescreen / Main Image */
.widescreen,#contact .widescreen img,.widescreen a img{width:50vw;max-width:none;margin-top:80px;margin-bottom:80px;margin-left:calc(50% - 25vw)}
.widescreen>*{width:100%;height:auto;display:block}
.widescreen a img{margin-top:0;margin-bottom:0}

.main_image{margin:70px auto;overflow:hidden}
.main_image img{transition:transform .6s cubic-bezier(.22,1,.36,1)}
@media (hover:hover) and (pointer:fine){[data-animate]:hover .main_image img{transform:scale(1.03)}}

.widescreen .SP,#contact .widescreen .SP,.content .main_image .SP{display:none}

.below-image .main_image{margin-bottom:20px}
.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;z-index:10}

/* ProductServices */
#ProductServices .main_image{margin-bottom:0}

/* Online Services */
#OnlineServices .main_image{margin:0}
#OnlineServices .refer{margin-bottom:70px}
#OnlineServices .button{margin-top:40px}

/* Google Reviews (Image) */
#reviews .widescreen{margin-top:45px;margin-bottom:50px}

/* Review Widget */
#google-review{margin:50px auto 80px}

/* Footer */
#footer{margin-top:80px;padding:120px 40px 50px;background:var(--color-footer);text-align:center}

/* Bottom Navigation */
#BottomNavi{position:fixed;left:0;bottom:env(safe-area-inset-bottom);width:100%;display:none;margin:0;padding:0;opacity:1;transform:translateY(0);transition:opacity .45s ease,transform .45s ease}
#BottomNavi li{flex:1}
#BottomNavi a{display:block}
#BottomNavi img{width:100%;height:auto;display:block}
#BottomNavi.is-hide{opacity:0;transform:translateY(100%)}

/* Letter Spacing */
.lr{margin:0 .25em}
.space_left{margin-left:.25em}
.space_left05{margin-left:.5em}
.space_right{margin-right:.25em}
.space_right05{margin-right:.5em}
.spacing05{letter-spacing:.5em}
.manual-block .space_right{margin-right:.25em!important}

/*----------------------------------------
    Layer
----------------------------------------*/

/* Hero */
.video,.image,#right .hero .vertical{z-index:0}
#transparent,.overlay{z-index:1}
#left,#TopLink,#pankuzu{z-index:2}

/* Button */
#return{z-index:5}

/* Layout */
#header{z-index:10}
#BottomNavi,.grecaptcha-badge{z-index:15}
#navi{z-index:20}

/* Menu */
#hamburger{z-index:41}