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

/*     WQHD 2560px
----------------------------------------*/
@media screen and (max-width:2560px){



}

/*     Desktop 1920px
----------------------------------------*/
@media screen and (max-width:1920px){

/* Vertical (Heading) */
.content .vertical,.page .hero .vertical,.page .hero .vertical .Landscape{font-size:2rem}

/* Flow (Content h3) */
.lead .flow{font-size:1.8rem}

/* Guide */
.guide-list{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Image List */
.two-items,.three-items,.four-items{gap:32px}

}

/*     Desktop 1440px
----------------------------------------*/
@media screen and (max-width:1440px){

/* Vertical (Heading) */
.content .vertical,.page .hero .vertical,.page .hero .vertical .Landscape{font-size:1.8rem}

/* Top Link */
#TopLink a{width:175px;height:175px;background-size:175px}

/* Flow (Content h3) */
.lead .flow{font-size:1.6rem}

/* Product Services */
#ProductServices .product_grid{grid-template-columns:1fr}

}

/*     Desktop 1280px
----------------------------------------*/
@media screen and (max-width:1280px){

/* Heading h1(Privacy) */
.heading .PC{display:none}

/* Vertical (Heading) */
.content .vertical,.page .hero .vertical,.page .hero .vertical .Landscape{font-size:1.6rem}

/* Top Link */
#TopLink a{width:150px;height:150px;background-size:150px}

/* Contact */
#contact ul{grid-template-columns:1fr}
#contact li.full{grid-column:auto}

/* Flow (Headline) */
.flow{font-size:1.3rem;padding-left:48px}
.flow::before{top:18px;width:32px;height:32px}

/* Flow (Content h3) */
.lead .flow{font-size:1.4rem}

/* NAP */
#salon .first,#salon .second{display:block}

/* Image List */
.two-items,.three-items,.four-items{max-width:550px;grid-template-columns:1fr}

/* Three Items (Image List) */
.device,.credit-card{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Four Items (Image List) */
.document{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}

/* Application */
.steps{grid-template-columns:1fr;gap:24px}

/* Delivery */
#Shortest .two-items{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Two Items (Images) */
.parallel{grid-template-columns:repeat(2,minmax(0,1fr))}

}

/*     Tablet 1023px
----------------------------------------*/
@media screen and (max-width:1023px){

/* Header */
body.page #hamburger{color:#fff}
body.page #header.active #hamburger{color:#333}
body.page.menu-open #hamburger{color:#fff}

/* Menu Open */
body.menu-open .heading{opacity:0;pointer-events:none}
body.menu-open #header.active #hamburger{color:#fff}

/* Heading */
.heading{transition:opacity .35s ease}

/* Heading h1(Privacy) */
.heading .PC{display:inline}

/* Navigation */
#navi{right:-100%;width:100%}

/* Layout */
#left{width:100%;height:100svh;position:relative}
#right{width:100%;margin-left:0}

/* Hero */
.hero{height:100%;overflow:hidden}
#TopLink,.hero .vertical,#pankuzu{z-index:5}

/* Vertical (Heading) */
.content .vertical,.page .hero .vertical,.page .hero .vertical .Landscape{font-size:2rem}

/* Page Description */
#description{margin:40px 0}

/* Section */
.content{padding:0 24px}

/* Top Link */
#TopLink a{width:200px;height:200px;background-size:200px}

/* Guide */
.guide{margin-top:25px}
.guide-list{grid-template-columns:repeat(6,minmax(0,1fr))}

/* Widescreen */
.widescreen,#contact .widescreen img{width:calc(100% + 48px);margin-left:-24px;margin-right:-24px}
.widescreen a img{width:calc(100% + 12px);margin-left:-6px;margin-right:-6px}

/* Typography */
.catch{font-size:28px}

/* Contact */
#contact ul{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
#contact li.full{grid-column:1 / -1}

/* Card */
.card-list{grid-template-columns:1fr}

/* Flow (Headline) */
.flow{font-size:1.4rem;padding-left:56px}
.flow::before{top:16px;width:40px;height:40px}

/* Flow (Content h3) */
.lead .flow{font-size:1.8rem}

/* NAP */
#salon .first,#salon .second{display:inline}

/* Product Services */
#ProductServices .product_grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
#ProductServices .product_card{padding:20px 24px 10px}

/* Online Services / Continuous Button */
#OnlineServices .button,.narrow{margin-top:28px}

/* Image List */
.two-items,.four-items{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}

/* Three Items (Image List) */
.three-items{max-width:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}

/* Application */
.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}

}

/*     Tablet 834px
----------------------------------------*/
@media screen and (max-width:834px){

/* Heading h1(Privacy) */
.heading .PC{display:none}

}

/*     Breakpoint 640px
----------------------------------------*/
@media screen and (max-width:640px){

/* Guide */
.guide-list{grid-template-columns:repeat(4,minmax(0,1fr))}

/* NAP */
#salon .first{display:block}

/* Product Services */
#ProductServices .product_grid{grid-template-columns:1fr}

/* Image List */
.two-items,.three-items,.four-items{grid-template-columns:1fr}
.credit-card{grid-template-columns:repeat(3,minmax(0,1fr))}
.device img,.document img{width:90%}

/* Application */
.steps{grid-template-columns:1fr;gap:24px}

/* Delivery */
#Shortest .two-items{grid-template-columns:1fr;gap:80px}

/* Two Items (Images) */
.parallel{grid-template-columns:repeat(2,minmax(0,1fr))}

}

/*     Smartphone 560px
----------------------------------------*/
@media screen and (max-width:560px){

/* Guide Navi (Hamburger) */
#navi .SP{display:none}

/* Section */
.content{padding:0 20px}

/* Vertical (Heading) */
.content .vertical,.page .hero .vertical,.page .hero .vertical .Landscape{font-size:1.6rem}

/* Guide */
.guide-list{gap:10px}
.guide-card{padding:10px}

/* Widescreen / Main Image */
.widescreen,#contact .widescreen img{width:calc(100% + 40px);margin-left:-20px;margin-right:-20px}
.widescreen .SP,#contact .widescreen .SP,.content .main_image .SP{display:block}
.widescreen .PC,#contact .widescreen .PC,.content .main_image .PC{display:none}

/* Section */
.catch{font-size:1.65rem}

/* Contact */
#contact ul{grid-template-columns:1fr;gap:20px}
#contact li.full{grid-column:auto}

/* Scroll Button */
#return{display:none}

/* Scroll Button */
#BottomNavi{display:flex}

/* Footer */
#footer{padding-bottom:90px}

/* Flow (Headline) */
.flow{font-size:1.2rem;padding-left:40px}
.flow::before{left:0;top:18px;width:32px;height:32px}

/* Flow (Content h3) */
.lead .flow{font-size:1.4rem}

/* Common */
.heading .SP,#pankuzu .SP{display:none}

/* Breadcrumb */
#pankuzu .PC .portrait{display:inline}

/* Check / Checklist */
.checklist li,.check{padding:32px 0 24px 48px}
.checklist li::before,.check::before{width:40px;height:40px;top:28px}
.checklist p{margin-left:-48px}

/* Product Services */
#ProductServices .product_grid{gap:20px}
#ProductServices .product_card{padding:15px 20px 5px}

/* Online Services / Continuous Button */
#OnlineServices .button,.narrow{margin-top:22px}

/* Explanatory Table (Purified Water) */
#automatic-cleaning .br{display:block}
#automatic-cleaning tbody th{width:25%}

/* Table */
.table-2col,.table-2col tbody,.table-2col tr,.table-2col th,.table-2col td{width:100%;display:block}
.table-2col tr{border:1px solid #ccc;border-bottom:0}
.table-2col tr:last-child{border-bottom:1px solid #ccc}
.table-2col th,.table-2col td{border:0}
.table-2col th{background:#f5f5f5;padding:12px 15px}
.table-2col td{padding:15px}

/* Two Items (Images) */
.parallel{gap:20px}

/* Columns 03 Rows 02 / Columns 04 Rows 02 */
.columns03-rows01,.columns03-rows02,.columns04-rows02{gap:0;margin:60px 0}

}

/*     Smartphone 440px
----------------------------------------*/
@media screen and (max-width:440px){

/* Heading */
.heading{font-size:.9rem}

/* Hero Title */
.page .hero .vertical{padding:20px 6px 20px 8px}

/* Vertical (Heading) */
.content .vertical,.page .hero .vertical{font-size:1.45rem}
.page .hero .vertical .Landscape{font-size:1.4rem}

/* Guide */
.guide-list{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Flow (Headline) */
.flow{font-size:1.05rem}
.flow::before{top:15px}

/* Flow (Content h3) */
.lead .flow{font-size:1.25rem}

/* Calendar */
#calendar ul{grid-template-columns:1fr}

/* NAP */
#salon .second{display:block}

/* Check / Checklist */
.checklist li,.check{padding:32px 0 16px 40px}
.checklist li::before,.check::before{width:32px;height:32px;top:30px}
.checklist h4,.check{font-size:1rem}
.checklist p{margin-left:-40px}

/* Key Points */
.key-points{padding:5px 15px 0}

/* Information Box */
.info_box{padding:0 5px}
.box_title{font-size:1.1rem}

/* Online Services / Fee (Products) */
#OnlineServices .refer .SP,#fee .refer .SP{display:none}

}

/*     Smartphone 390px
----------------------------------------*/
@media screen and (max-width:390px){

/* Product Services */
#ProductServices h4{font-size:1.2rem}

}

/*     Smartphone 375px
----------------------------------------*/
@media screen and (max-width:375px){

/* Vertical (Heading) */
.content .vertical,.page .hero .vertical,.page .hero .vertical .Landscape{font-size:1.4rem}

/* Flow (Content h3) */
.lead .flow{font-size:1.2rem}

/* NAP */
#salon .third{display:block}

/* Check / Checklist */
.checklist li,.check{padding:32px 0 16px 32px}
.checklist li::before,.check::before{width:24px;height:24px;top:33px}
.checklist p{margin-left:-32px}

/* Product Services */
#ProductServices h4{font-size:1.1rem}

/* Online Services */
#OnlineServices .button a{text-align:left;padding-left:20px}

/* Information Box */
.box_title{font-size:1.05rem}
.info_icon{width:24px}

/* Numbered List */
.numbered-list li:before{top:7px}

/* Two Items (Images) */
.parallel{gap:15px}

}

/*     Smartphone 360px
----------------------------------------*/
@media screen and (max-width:360px){

body{font-size:.9rem}

/* Guide Navi (Hamburger) */
#navi ul li,#navi .accordion,#navi .submenu li a{font-size:.9rem}

/* Section */
.catch{font-size:1.45rem}

/* Guide */
.guide-text{font-size:.9rem}

/* Flow (Headline) */
.flow{padding-left:36px}
.flow::before{top:17px;width:28px;height:28px}

/* Flow (Content h3) */
.lead .flow{font-size:1.1rem}

/* NAP */
.nap li{padding-left:28px;background-size:20px}

/* Product Services */
#ProductServices h4{font-size:1rem}

/* Information Box */
.box_title{font-size:1rem}

/* Numbered List */
.numbered-list li:before{top:6px}

}

/*     Smartphone 320px
----------------------------------------*/
@media screen and (max-width:320px){

body,.flow,.two-items p{font-size:.85rem}

/* Heading */
.heading{font-size:.75rem}

/* Guide Navi (Hamburger) */
#navi ul li,#navi .accordion,#navi .submenu li a{font-size:.85rem}

/* Breadcrumb */
#pankuzu{font-size:.75rem}

/* Guide */
.guide-text{font-size:.85rem}

/* Flow (Headline) */
.flow::before{top:15px}

/* Flow (Content h3) */
.lead .flow{font-size:1rem}

/* Online Services */
#OnlineServices .button a{font-size:.85rem}

/* Check / Checklist */
.checklist li::before,.check::before{top:31px}
.checklist h4,.check{font-size:.85rem}

/* Numbered List */
.numbered-list li:before{top:4px}

/* Key Points */
.key-points{padding:5px 10px 0}

/* Information Box */
.box_title{font-size:.95rem}

}

/*     Landscape
----------------------------------------*/
@media screen and (orientation:landscape) and (max-height:445px){

/* Hamburger */
#hamburger span:nth-child(3):after{left:-1px}
#hamburger.active span:nth-child(3):after{left:3px}

/* Top Link */
#TopLink a{width:100px;height:100px;background-size:100px}

/* Breadcrumb */
#pankuzu{padding-top:48px}

/* Hero Title */
.page .hero .vertical{font-size:1rem}
.page .hero .vertical .sub,.page .hero .vertical .Landscape{display:none}

/* NAP */
.nap li{padding-top:2px}

/* Numbered List */
.numbered-list li:before{line-height:1.5;top:5.25px}

}

/*     Portrait
----------------------------------------*/
@media screen and (orientation:portrait) and (max-device-width:480px){

/* Hamburger */
#hamburger span:nth-child(3)::after{left:-1px}
#hamburger.active span:nth-child(3)::after{left:3px}

/* Top Link */
#TopLink a{width:125px;height:125px;background-size:125px}

/* Breadcrumb */
#pankuzu{padding-top:48px}

/* Hero Title */
.page .hero .vertical{font-size:1.2rem}

/* NAP */
.nap li{padding-top:2px}

/* Numbered List */
.numbered-list li:before{top:5.25px;line-height:1.5}

}