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

/* Font */
.vertical,#navi{font-family:"Yu Mincho","Hiragino Mincho ProN",serif}
.vertical span,.page .hero .vertical .sub,.alphabet{font-family:"Marcellus",serif}
.standard-font{font-family:"Noto Sans JP","Yu Gothic","Meiryo",sans-serif;font-weight:500}
.alphabet{font-weight:700}
.semibold{font-weight:600}
.medium,#pankuzu strong{font-weight:500}
.normal{font-weight:400}
.small{font-size:0.8rem}
/* Section */
.label{margin:0 0 16px;color:#9a7b55;font-size:.815rem;letter-spacing:.16em;text-transform:uppercase}
.catch{margin:0 0 32px;font-size:2rem;font-weight:500;line-height:1.6}

/* Bottom Link */
#BottomLink{position:relative;width:180px;height:180px;margin:0 auto 50px}
#BottomLink a{width:100%;height:100%;position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;text-indent:-9999px;z-index:3}
#BottomLink::before{content:"";position:absolute;left:50%;top:50%;width:180px;height:180px;background:url(../images/logo.png) no-repeat center;background-size:contain;transform:translate(-50%,-50%);pointer-events:none}
#BottomLink::after{content:"ホームへ戻る";position:absolute;inset:0;display:flex;justify-content:center;align-items:center;color:#fff;font-size:.9rem;font-weight:500;text-shadow:0 1px 4px rgba(0,0,0,.35);pointer-events:none;z-index:2}

/* Vertical Text (Page Section) */
.vertical{font-size:2.6rem;letter-spacing:.4em;line-height:2;margin:0;display:inline-block;position:relative;white-space:nowrap;word-break:keep-all;writing-mode:vertical-rl;text-orientation:upright}
.vertical .Landscape{font-size:2.6rem;margin-top:0;display:inline-block;opacity:1}
.vertical span{font-size:.8rem;letter-spacing:.15em;margin-top:24px;display:block;opacity:.8}
.content .vertical{margin:80px 0 75px;display:inline-block;position:relative;left:50%;transform:translate(-50%,40px)}
.content .vertical.show{transform:translate(-50%,0)}
.content .vertical::before,.content .vertical::after{content:"";width:1px;height:100%;position:absolute;top:0;background:#eee}
.content .vertical::before{left:0}
.content .vertical::after{right:0}

/* For 5-character vertical headings */
.content .vertical.expansion{margin-top:65px;margin-bottom:75px;padding:.5em 20px 0;letter-spacing:.5em}

/* For 6-character vertical headings */
.content .vertical{padding:.4em 20px 0;letter-spacing:.4em}

/* For 7-character vertical headings */
.content .vertical.compression{margin-top:60px;margin-bottom:75px;padding:.3em 20px 0;letter-spacing:.3em}

/* Hero Title */
.page .hero{position:relative}
.page .hero .vertical{position:absolute;top:auto;right:0;bottom:0;left:auto;margin:0;padding:20px 10px 20px 12px;background:rgba(72,60,50,.5);color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35);line-height:1.2;letter-spacing:.15em;transition:opacity .5s ease,transform .5s ease;transform:translateY(40px);z-index:10}
.page .hero .vertical.show{transform:translateY(0)}
.page .hero .vertical .sub{display:inline-block;margin-top:16px;writing-mode:vertical-rl;text-orientation:sideways;transform:translateX(var(--hero-sub-offset));font-size:.45em;font-weight:400;letter-spacing:.08em;line-height:1;white-space:nowrap;opacity:.9}
.page .hero .vertical.is-hide{opacity:0;transform:translateY(20px);pointer-events:none}

/* ==================================================
   Guide
================================================== */

.guide{width:100%;margin:40px 0 0}
.guide-list{margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;list-style:none}
.guide-list li{min-width:0;display:flex}
.guide-card{width:100%;min-width:0;padding:25px 15px 20px;display:flex;text-decoration:none;color:#333;background:#f8f5f1;border:1px solid #ddd;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:15px;transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s cubic-bezier(.22,1,.36,1),border-color .6s,background-color .6s}
.guide-icon{width:100%;max-width:120px;padding:8px;display:flex;background:#fff;border:1px solid #ddd;border-radius:50%;justify-content:center;align-items:center;transition:transform .6s cubic-bezier(.22,1,.36,1),border-color .6s;aspect-ratio:1}
.guide-icon img{width:100%;height:auto;display:block;border-radius:50%}
.guide-text{font-size:1rem;font-weight:500;line-height:1.5;text-align:center;white-space:nowrap}
.guide-card:hover{color:#333;background:#fff;border-color:#bbb;transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.guide-card:hover .guide-icon{border-color:#5f5f5f;transform:scale(1.04)}

/* Refer (※) */
.refer{position:relative;margin-bottom:0;padding-left:20px;color:#999;text-decoration:underline}
.refer::before{content:"※";position:absolute;left:0;top:0}

/* Square (■) */
.square{position:relative;margin-bottom:0;padding-left:20px;color:#333}
.square::before{content:"■";position:absolute;left:0;top:0}

.red{color:#d45b5b}
.vivid_red{color:#c00}
.verdigris{color:#59946B}
.center{text-align:center}
.underline{text-decoration:underline}
.shorten{font-size:95%;margin-left:-8px;margin-right:-8px}
.heading .shorten,#pankuzu .shorten{font-size:100%;margin-left:-6px;margin-right:-6px;display:inline-block}
.shorten-right{margin-right:-6px}
.shorten-left{margin-left:-6px}

/* R Mark */
.vertical .registered{font-family:Arial,sans-serif;font-size:.3em;margin:0;display:inline-block;line-height:1;letter-spacing:0;vertical-align:baseline;writing-mode:horizontal-tb;transform:translate(8px,-12px)}

/* Check */
.check{position:relative;font-size:1.2rem;font-weight:500;margin-top:40px;padding:40px 0 24px 64px;line-height:1.6}

/* Checklist */
.checklist{margin:75px 0 0;padding:0;border-top:1px solid #e6e0d8;list-style:none}
.checklist li{position:relative;margin:0;padding:40px 0 24px 64px;border-bottom:1px solid #e6e0d8}
.checklist li::before,.check::before{content:"";width:48px;height:48px;position:absolute;left:0;top:32px;background:url(../images/icon_check.png) no-repeat center;background-size:contain}
.checklist h4{font-size:1.2rem;font-weight:500;margin:0;line-height:1.6}
.checklist p{margin:24px 0 12px -64px;line-height:2}

/* Video */
.youtube{width:100%;margin:75px 0 25px;aspect-ratio:16/9}
.youtube iframe{border:0;width:100%;height:100%;display:block}
.youtube-video .refer{margin-bottom:70px}

.content .mp4{margin:75px auto 20px}
.mp4{margin:60px auto}
.mp4 video{width:100%;display:block;background:#000;border-radius:8px;box-shadow:0 15px 35px rgba(0,0,0,.18)}
.IntroductoryVideo .refer{margin-bottom:70px}
#LCD-Display .refer{margin-bottom:70px}

/* Widescreen (Background Color) */
#Survey .widescreen{background:#6f5846;color:#fff;padding-top:60px;padding-bottom:60px}
#Survey .refer{color:#fff}

/* Survey Widescreen */
.full-width .main-text{width:100%;max-width:1000px;margin:0 auto;padding:0}

/* Margin (Space) */
.top_space{margin-top:70px}
.bottom_space{margin-bottom:70px}

/* ==================================================
   Key Points Color
================================================== */

/* Information (Blue Gray) */
.note-info,.note-info .circle li:before{--note-color:#5f8fa8;--note-title:#3f6f87;--note-bg:#f4f9fb;--note-shadow:rgba(95,143,168,.2)}

/* Support (Blue) */
.note-support,.note-support .circle li:before{--note-color:#355CAA;--note-title:#355CAA;--note-bg:#EEF5FF;--note-shadow:rgba(53,92,170,.2)}

/* Related (Warm Beige) */
.note-related,.note-related .circle li:before{--note-color:#8B6B00;--note-title:#5A4402;--note-bg:#F8F5F1;--note-shadow:rgba(139,107,0,.12)}

/* Point (Green) */
.note-point,.note-point .circle li:before{--note-color:#5fa765;--note-title:#3d7f42;--note-bg:#f7fcf7;--note-shadow:rgba(95,167,101,.2)}

/* Caution (Red) */
.note-caution,.note-caution .circle li:before{--note-color:#d45b5b;--note-title:#a83f3f;--note-bg:#fff6f6;--note-shadow:rgba(212,91,91,.2)}

/* Warning (Deep Red) */
.note-warning,.note-warning .circle li:before{--note-color:#c74747;--note-title:#923333;--note-bg:#fff2f2;--note-shadow:rgba(199,71,71,.25)}

/* Notice (Gold) */
.note-notice,.note-notice .circle li:before{--note-color:#d9a600;--note-title:#8a6b00;--note-bg:#fffdf2;--note-shadow:rgba(217,166,0,.2)}

/* Supplement (Purple) */
.note-supplement,.note-supplement .circle li:before{--note-color:#8b82aa;--note-title:#665d87;--note-bg:#f8f7fc;--note-shadow:rgba(139,130,170,.2)}

.circle{margin:20px 0 15px;padding:0}
.circle li{display:block;position:relative;margin:0 0 10px;padding-left:1.2em;line-height:1.8}
.circle li:before{content:"";width:7px;height:7px;position:absolute;left:0;top:.75em;background:#454545;border-radius:50%}

/* ==================================================
   Key Points
================================================== */

.key-points{position:relative;margin:110px 0 70px;padding:5px 20px 0;border:2px solid var(--note-color);background:var(--note-bg);box-shadow:0 4px 12px var(--note-shadow)}
.key-points .subtitle{height:36px;display:inline-block;position:absolute;top:-36px;left:-2px;padding:5px 12px;line-height:26px;color:#fff;background:var(--note-color);border-radius:4px 4px 0 0}
.key-points .circle{margin:10px 0 15px;padding:0}
.key-points .circle li{margin-bottom:10px}
.key-points .circle li:before{background:var(--note-color)}
.key-points .refer{margin:0 0 15px -4px!important}

/* ==================================================
   Table
================================================== */

/* Common */
.table-2col,.table-3col{width:100%;margin:80px 0 20px;border-collapse:collapse;background:#fff}
.table-2col th,.table-2col td,.table-3col th,.table-3col td{padding:18px 20px;text-align:left;vertical-align:middle;border:1px solid #ccc;line-height:1.8}
.table-2col th,.table-3col th{background:#fafafa;font-weight:500}

/* 2 Columns */
.table-2col th{width:155px}
.table-2col td{width:auto}

/* 3 Columns */
.table-3col tbody th{width:105px}
.table-3col td{width:auto}

/* ==================================================
   Information Box
================================================== */

/* Theme */
.related{color:#454545;background:#F6F2E8;box-shadow:0 0 0 5px #8B6B0020}
.related:after{border-color:#8B6B00 #FFF #8B6B00}
.related .box_title{color:#5A4402}
.related a{border:1px solid #D8C89A;color:#5A4402}
.related a:before{border-left:10px solid #8B6B00;transition:all .25s ease}
.related a:hover{background:#FFF7E7;border-color:#B08B2E;box-shadow:0 6px 12px rgba(139,107,0,.12)}

/* Support */
.support{color:#454545;background:#EEF5FF;box-shadow:0 0 0 5px #DCE8FF}
.support:after{border-color:#355CAA #FFF #355CAA}
.support .box_title{color:#355CAA}
.support a{border:1px solid #C9D9F5;color:#2B4B68}
.support a:before{border-left:10px solid #355CAA;transition:all .25s ease}
.support a:hover{background:#DCEBFF;border-color:#7EA7E8;box-shadow:0 6px 12px rgba(53,92,170,.12)}

/* Institute */
.institute{color:#454545;background:#F0F9FC;box-shadow:0 0 0 5px #D8EFF7}
.institute:after{border-color:#60BFE5 #FFF #60BFE5}
.institute .box_title{color:#28799E}
.institute a{border:1px solid #B8DCEB;color:#28799E}
.institute a:before{border-left:10px solid #60BFE5;transition:all .25s ease}
.institute a:hover{background:#E3F5FB;border-color:#60BFE5;box-shadow:0 6px 12px rgba(96,191,229,.12)}

/* Caution */
.caution{color:#454545;background:#FFF4E8;box-shadow:0 0 0 5px #F5DEC5}
.caution:after{border-color:#C66A20 #FFF #C66A20}
.caution .box_title{color:#A65316}
.caution a{border:1px solid #E8C6A8;color:#8F4815}
.caution a:before{border-left:10px solid #C66A20;transition:all .25s ease}
.caution a:hover{background:#FFF9F3;border-color:#D99055;box-shadow:0 6px 12px rgba(198,106,32,.12)}

/* Summary */
.summary{color:#454545;background:#EEF7F3;box-shadow:0 0 0 5px #DCECE5}
.summary:after{border-color:#4F7F6D #FFF #4F7F6D}
.summary .box_title{color:#3F6A5C}
.summary a{border:1px solid #C8DDD4;color:#3F6A5C}
.summary a:before{border-left:10px solid #4F7F6D;transition:all .25s ease}
.summary a:hover{background:#F7FCFA;border-color:#82A999;box-shadow:0 6px 12px rgba(79,127,109,.12)}

/* Warning */
.warning{color:#454545;background:#FFF5F5;box-shadow:0 0 0 5px #F2CACA}
.warning:after{border-color:#C00 #FFF #C00}
.warning .box_title{color:#C00}
.warning a{border:1px solid #E8B3B3;color:#990000}
.warning a:before{border-left:10px solid #C00;transition:all .25s ease}
.warning a:hover{background:#FFF0F0;border-color:#CC6666;box-shadow:0 6px 12px rgba(204,0,0,.12)}

/* Circle Color */
.info_box .circle{margin-left:8px}
.info_box.related .circle li::before{background:#8B6B00}
.info_box.support .circle li::before{background:#355CAA}
.info_box.institute .circle li::before{background:#60BFE5}
.info_box.caution .circle li::before{background:#C66A20}
.info_box.summary .circle li::before{background:#4F7F6D}
.info_box.warning .circle li::before{background:#C00}
.info_box .refer{margin:0 0 20px 4px}

/* Common */
.info_box{margin:80px 5px 25px;position:relative;padding:0 10px;border:dashed 2px #FFF}
.info_box:after{content:"";position:absolute;right:-7px;bottom:-7px;border-width:20px 20px 0 0;border-style:solid}
.box_title{font-size:1.2rem;font-weight:500;margin:15px 0 0 10px;display:flex;align-items:center;gap:.5em}
.info_box ul{margin:0 0 10px;padding:0}
.info_box li{display:block;margin:15px 0 0}
.info_box a{display:block;position:relative;top:0;padding:6px 0 8px 32px;text-decoration:none;background:#FFF;border-radius:6px;transition:all .25s ease}
.info_box a:before{content:"";position:absolute;left:15px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent}
.info_box a:hover{top:-3px;text-decoration:underline}
.info_box a:hover:before{transform:translateY(-50%) translateX(4px)}
.info_box .box_text{margin:15px 10px 10px;line-height:1.8}

/* Icon */
.info_icon{width:36px;height:auto;flex-shrink:0}
.info_icon img{width:100%;height:auto;display:block;border-radius:50%}
.info_icon p{font-size:.85rem;text-align:center;text-decoration:underline}

/* Product Services */
#ProductServices .product_grid{margin:75px auto;display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
#ProductServices .product_card{padding:25px 25px 10px;text-decoration:none;color:inherit;position:relative;overflow:hidden;display:flex;flex-direction:column;background:#fff;border:1px solid #ddd;transition:.35s;box-shadow:0 10px 25px rgba(0,0,0,.06)}
#ProductServices .product_card:hover{transform:translateY(-8px);box-shadow:0 20px 45px rgba(0,0,0,.12)}
#ProductServices .label{font-family:Marcellus,serif;font-size:.75rem;letter-spacing:.2em;margin-bottom:20px;color:#999}
#ProductServices .card_image{overflow:hidden}
#ProductServices .card_image img{width:100%;display:block;transition:transform .6s ease}
#ProductServices .product_card:hover .card_image img{transform:scale(1.05)}
#ProductServices h4{margin-bottom:20px;font-size:1.4rem;font-weight:500}
#ProductServices .description{line-height:2;margin-bottom:auto}
#ProductServices .more{font-size:.9rem;font-weight:500;display:flex;align-self:flex-end;align-items:center;gap:10px}
#ProductServices .arrow{font-size:2rem;display:inline-block;transition:transform .35s}
#ProductServices .product_card:hover .arrow{transform:translateX(8px)}
#ProductServices .widescreen{margin-bottom:25px}

.product_card{cursor:pointer}
.product_card:focus-visible{outline:3px solid #8b6b45;outline-offset:4px}

/* ==================================================
   List
================================================== */

/* Disc */
.disc{position:relative;margin:0;padding-left:20px;list-style-type:disc;list-style-position:outside}
.disc li{line-height:1.8}

/* Two Items */
.two-items{margin:75px 0 65px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.two-items li{margin:0;padding:0;text-align:center}
.two-items p{font-size:.9rem;margin:20px 0 0;line-height:2;text-align:center;text-decoration:underline}

/* Two Items (Images) */
.parallel img{border:1px solid #ddd}

/* Three Items */
.three-items{margin:75px 0 65px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.three-items li{margin:0;padding:0;text-align:center}
.three-items p{font-size:.9rem;margin:20px 0 0;line-height:2;text-align:center;text-decoration:underline}

/* Four Items */
.four-items{margin:75px 0 65px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.four-items li{margin:0;padding:0;text-align:center}
.four-items p{font-size:.9rem;margin:20px 0 0;line-height:2;text-align:center;text-decoration:underline}
.document li:hover img{transform:scale(1.05)}

/* Listr Items (Common) */
.two-items img,.three-items img,.four-items img{width:100%;height:auto;transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s cubic-bezier(.22,1,.36,1);transform:scale(1);box-shadow:0 0 transparent}
.two-items li:hover img,.three-items li img:hover,.four-items li:hover img{transform:scale(1.05);box-shadow:0 16px 36px rgba(60,50,40,.16)}

/* Online */
.device li img:hover,.credit-card li img:hover,.service-section li img:hover{box-shadow:none}

/* Mouse Over (Overlay) */
.mouse-over li{position:relative}
.mouse-over .overlay{position:absolute}
.mouse-over .overlay{width:100%;top:0;left:0;aspect-ratio:1;background:rgba(255,255,255,0);transition:background .6s cubic-bezier(.22,1,.36,1)}
.mouse-over li:hover .overlay{background:rgba(255,255,255,.25)}
.image-shadow img{border-radius:8px;border:1px solid #ddd;transition:transform 0.4s cubic-bezier(.16,1,.3,1),box-shadow 0.4s ease}
.image-shadow img:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 0 8px gray}

/* Numbered List */
.numbered-list{margin-top:50px;counter-reset:number}
.numbered-list li{position:relative;margin-bottom:16px;padding-left:24px}
.numbered-list li:before{counter-increment:number;content:counter(number);width:16px;height:16px;position:absolute;top:7px;left:0;line-height:1.2;font-size:12px;text-align:center;border:1px solid #333;border-radius:50%}

/* Columns 03 Rows 02 / Columns 04 Rows 02 */
.columns03-rows01,.columns03-rows02{grid-template-columns:repeat(3,minmax(0,1fr))}
.columns04-rows02{grid-template-columns:repeat(4,minmax(0,1fr))}
.columns03-rows01,.columns03-rows02,.columns04-rows02{display:grid;gap:15px;margin:65px 0}
.columns03-rows01 li,.columns03-rows02 li,.columns04-rows02 li{position:relative;padding:10px;overflow:hidden;transition:opacity 1.4s cubic-bezier(.16,1,.3,1),transform 1.4s cubic-bezier(.16,1,.3,1)}
.columns03-rows01 li img,.columns03-rows02 li img,.columns04-rows02 li img{width:100%;height:auto;display:block;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.columns03-rows01 li:hover img,.columns03-rows02 li:hover img,.columns04-rows02 li:hover img{transform:scale(1.05)}
.columns03-rows01 li:hover .overlay,.columns03-rows02 li:hover .overlay,.columns04-rows02 li:hover .overlay{background:rgba(255,255,255,.12)}
.columns03-rows01 .overlay,.columns03-rows02 .overlay,.columns04-rows02 .overlay{position:absolute;z-index:10;pointer-events:auto;background:rgba(255,255,255,0);transition:background .8s cubic-bezier(.16,1,.3,1);inset:10px}
.columns03-rows01 .slide-right,.columns03-rows02 .slide-right,.columns04-rows02 .slide-right{transform:translate(80px);opacity:0}
.columns03-rows01 .slide-left,.columns03-rows02 .slide-left,.columns04-rows02 .slide-left{transform:translate(-80px);opacity:0}
.columns03-rows01 li.is-show,.columns03-rows02 li.is-show,.columns04-rows02 li.is-show{opacity:1;transform:translate(0)}

/* Columns 03 Rows 01 */
.columns03-rows01 li{overflow:visible}
.columns03-rows01 li img{filter:drop-shadow(0 0 rgba(255,174,113,0));transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .8s cubic-bezier(.16,1,.3,1)}
.columns03-rows01 li:hover img{filter:drop-shadow(0 0 18px rgba(255,174,113,.65));transform:scale(1.05)}
.columns03-rows01 li:hover .overlay{background:transparent}

/* Columns 03 Rows 02 */
.columns03-rows02 li{overflow:visible}
.columns03-rows02 li img{filter:drop-shadow(0 0 0 rgba(201,162,105,0));transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .8s cubic-bezier(.16,1,.3,1)}
.columns03-rows02 li:hover img{filter:drop-shadow(0 0 18px rgba(201,162,105,.65));transform:scale(1.05)}

/* ==================================================
   Step Section
================================================== */

/* How to use */
.step-section .steps .step-title{margin-top:60px}
.steps{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.step p{margin:15px 0 0}

/* Application (Zoom) */
#application .hover_zoom{padding:20px;border:1px solid #ddd}

/* ==================================================
   Site Info
================================================== */

/* Contact */
#contact ul{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:40px auto}
#contact li.full{grid-column:1 / -1}
#contact a{display:block;padding:14px;background:#b9854b;border-radius:16px;overflow:hidden;transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease,opacity .35s ease;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
#contact a:hover{opacity:.9;transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.10)}
#contact img{width:100%;max-width:300px;height:auto;margin:0 auto;display:block}

/* Salon */
.gallery{margin:40px auto 60px}
.gallery img{transition:transform 0.4s cubic-bezier(.16,1,.3,1),box-shadow 0.4s ease}
.gallery img:hover{transform:translateY(-4px) scale(1.04)}

/* Card */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.card img{margin-bottom:20px}
.card h3{margin:0 0 12px;font-size:1.2rem;font-weight:500}
.card p{margin:0 0 16px}
.link{display:inline-block;border-bottom:1px solid #333;font-size:.9rem}

/* Calendar */
#calendar ul{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:40px 0 0;padding:0}
#calendar ul li{min-width:0}
#calendar ul iframe{width:100%;height:195px;display:block;border:0}
.orange{color:#ffa500}

/* NAP */
.nap,#BAGUS_HAIR{margin:70px auto 40px}
.nap li,#BAGUS_HAIR li{position:relative;padding-left:32px;margin-bottom:15px;line-height:1.8;background-repeat:no-repeat;background-position:left .2em;background-size:24px}
.nap .maps,#BAGUS_HAIR .maps{width:auto;height:100%;margin-bottom:40px;padding:8px 8px 0;border:1px solid #9F9F9F;border-radius:8px;box-shadow:5px 5px 10px #999}
.nap .name small{font-weight:400}
.nap .name{font-weight:500;background-image:url("../images/icon_LitaAqua.webp")}
.nap .address,#BAGUS_HAIR .address{background-image:url("../images/icon_address.webp")}
.nap .phone,#BAGUS_HAIR .phone{background-image:url("../images/icon_phone.webp")}
#salon .nap{margin-bottom:0}

/* BAGUS HAIR for Men */
#BAGUS_HAIR .name{position:relative;display:inline-block;padding-left:32px;font-weight:700}
#BAGUS_HAIR .name::before{content:"";position:absolute;top:50%;left:0;width:24px;height:24px;background:url(../images/logo.png) no-repeat center;background-size:contain;transform:translateY(-50%);animation:symbolHeading 10s linear infinite;pointer-events:none}

/* Footer */
.note{margin-bottom:70px;color:#666;font-size:1.1rem;line-height:2.2;letter-spacing:.08em}
#footerNav{margin-bottom:70px}
#footerNav ul{display:flex;justify-content:center;flex-wrap:wrap;gap:32px}
#footerNav a{color:#444}
#copyright{color:#888;font-size:.85rem}

/* Scroll Button */
#return{position:fixed;right:10px;bottom:10px;width:48px;height:48px;opacity:0;transform:rotateY(270deg)}
#return.show{opacity:1;transform:rotateY(0)}
#return a{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%;overflow:hidden;white-space:nowrap;text-indent:-9999px;z-index:3}
#return::before{content:"";position:absolute;left:50%;top:50%;width:48px;height:48px;background:url(../images/logo.png) no-repeat center;background-size:contain;transform:translate(-50%,-50%);pointer-events:none}
#return::after{content:"TOP";position:absolute;inset:0;display:flex;justify-content:center;align-items:center;color:#fff;font-size:.6rem;font-weight:700;letter-spacing:.05em;text-shadow:0 1px 3px rgba(0,0,0,.35);pointer-events:none;z-index:2}

/* Call to Action (Button) */
.button{margin-top:80px}
.button a{font-size:.95rem;font-weight:500;text-align:center;text-decoration:none;padding:16px 0;display:block;position:relative;border:1px solid #ddd;border-radius:10px;background:#f8f5f1;color:#422119;transition:border-color .35s ease,box-shadow .35s ease,transform .35s ease}
.button a:hover{color:#422119;background:#fff;border-color:#422119;box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-2px);opacity:1}
.button a:hover::after{transform:translate(4px,-50%)}

#contact .button a{background:#f8f5f1}
#contact .button a:hover{background:#fff}

/* NEXT */
.button.next a::after{content:"";position:absolute;right:20px;top:50%;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid currentColor;transform:translateY(-50%);transition:transform .35s ease}
.button.next a:hover::after{transform:translate(5px,-50%)}

/* DOWN */
.button.down a::after{content:"";position:absolute;right:20px;top:50%;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:10px solid currentColor;transform:translateY(-35%);transition:transform .35s ease}
.button.down a:hover::after{transform:translateY(-15%)}

/* UP */
.button.up a::after{content:"";position:absolute;right:20px;top:50%;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid currentColor;transform:translateY(-65%);transition:transform .35s ease}
.button.up a:hover::after{transform:translateY(-85%)}

/* Continuous Button */
.narrow{margin-top:40px}