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

.hero .SP{display:none}
#overlay{background:rgba(66,33,25,.20)}
#product-nav .button{margin-top:0}

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

#product-nav{margin:75px 0 0}
#product-nav ul{margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
#product-nav li{min-width:0}
#product-nav a{min-height:70px;padding:15px;text-decoration:none;display:flex;color:#333;background:#f8f5f1;border:1px solid #ddd;border-radius:12px;justify-content:center;align-items:center;transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s,border-color .6s}
#product-nav a:hover{color:#333;border-color:#bbb;transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.07)}
.product-list{margin:75px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.product-list li{min-width:0;display:flex}
.product-item{width:100%;min-width:0;display:flex;overflow:hidden;text-decoration:none;color:#333;background:#fff;border:1px solid #ddd;border-radius:18px;flex-direction:column;transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s cubic-bezier(.22,1,.36,1),border-color .6s}
.product-item-image{overflow:hidden;background:#f8f5f1;aspect-ratio:1}
.product-item-image img{width:100%;height:100%;display:block;object-fit:contain;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.product-item-body{display:flex;padding:15px 25px 10px;flex-direction:column;flex:1}
.product-item-body small{margin-left:-4px}
.product-item-category{font-family:Marcellus,serif;font-size:.75rem;letter-spacing:.2em;margin-bottom:8px;color:#999}
.product-item h4{font-size:1.4rem;font-weight:500;line-height:1.6;border:0;margin:0 0 15px;padding:0}
.product-item-description{line-height:1.8;margin:0}
.product-item-more{font-size:.9rem;font-weight:500;margin-top:auto;padding-top:20px;display:flex;justify-content:flex-end;align-items:center;gap:10px}
.product-item-more .arrow{font-size:2rem;display:inline-block;transition:transform .35s}
.product-item:hover .product-item-more .arrow{transform:translateX(8px)}
.product-item:hover{color:#333;border-color:#bbb;transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.product-item:hover .product-item-image img{transform:scale(1.04)}
.product-item[data-animate]{transition:opacity 1s,transform 1s}

/* Price Area (Common) */
#fee .refer{margin-bottom:70px}
#fee .info_box .refer{margin-bottom:0}

/* Product Specifications (Common) */
#ProductSpecifications .table-explanatory{table-layout:fixed}
#ProductSpecifications .table-explanatory tbody th{width:105px;padding-right:0}
#ProductSpecifications .table-explanatory tbody .center{text-align:center;padding-left:0;padding-right:0}
#ProductSpecifications .table-explanatory tbody td{font-weight:400}
#ProductSpecifications .table-explanatory thead th:first-child{width:160px}
#ProductSpecifications .specification{margin-top:0}
#ProductSpecifications .specification .refer{padding-top:2px}
#ProductSpecifications .specification .red{margin-left:0;display:inline;text-decoration:none}
#ProductSpecifications .red{margin-left:-16px}
#ProductSpecifications .red .refer{margin-left:0;padding-top:2px;text-decoration:none}
#ProductSpecifications .product-name .red{margin-left:0}

/* Lita Air (Common) */
#e-Collect .support,#AfterSupport .info_box,#E-commerce .caution{margin-bottom:70px}

/* Lita Air (Purchase Benefits) */
#PurchaseBenefits .full-width{margin-bottom:75px}
#PurchaseBenefits .full-width .box_title{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;width:fit-content;font-size:2.4rem;font-weight:700;margin:0 auto 55px;display:flex;justify-content:center;align-items:center}
#PurchaseBenefits .full-width .box_title .info_icon{width:48px}
#PurchaseBenefits .full-width .arrow{font-family:"Noto Sans JP","Yu Gothic","Meiryo",sans-serif;font-size:2rem;padding:0 0 6px;display:inline-block;transform-origin:0;transition:transform .35s}
#PurchaseBenefits .full-width:hover .arrow{transform:translate(8px)}

/* Horizontal Scroll */
.benefit-slider{width:100%;padding:10px 0 30px;display:flex;overflow-x:auto;box-sizing:border-box;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(139,107,70,.35) rgba(139,107,70,.08);align-items:flex-start;gap:24px}

/* Scroll Guide */
.BenefitGuide{font-size:.9rem;text-align:center;margin:0;line-height:1.8;color:#8b6b00}

/* Card */
.benefit-card{min-width:0;overflow:hidden;scroll-snap-align:start;transition:transform .6s var(--ease-main), box-shadow .6s var(--ease-main), border-color .6s var(--ease-main);background:#fff;border:1px solid #e6e0d8;border-radius:12px;flex:0 0 340px}

/* Image */
.benefit-card-image{padding:40px;display:flex;overflow:hidden;aspect-ratio:1;background:#fff;justify-content:center;align-items:center}
.benefit-card-image img{width:100%;height:100%;display:block;object-fit:contain;transition:transform .6s var(--ease-main)}

/* Text */
.benefit-card-body{padding:24px;border-top:1px solid #e6e0d8}
.benefit-card-body h4{font-size:1.15rem;font-weight:500;line-height:1.6;margin:0 0 10px}
.benefit-card-body p{font-size:.95rem;line-height:1.8;margin:0}

/* Hover */
@media (hover:hover) and (pointer:fine){

.benefit-card:hover{border-color:#cfc6bb;transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.benefit-card:hover .benefit-card-image img{transform:scale(1.04)}

}

/* Scrollbar */
.benefit-slider{scrollbar-width:thin;scrollbar-color:rgba(139,107,70,.35) rgba(139,107,70,.08)}
.benefit-slider::-webkit-scrollbar{height:8px}
.benefit-slider::-webkit-scrollbar-track{background:rgba(139,107,70,.08);border-radius:999px}
.benefit-slider::-webkit-scrollbar-thumb{background:rgba(139,107,70,.35);border-radius:999px}

/* Lita Air(Product Specifications) */
#ProductSpecifications .product-name{margin-top:0}

/* Lita Life (Thermography) */
.thermo-table{width:100%;margin-top:65px;border-collapse:collapse}
.thermo-table th{font-weight:500;padding-bottom:15px}
.thermo-table td{padding:0;vertical-align:top}
.thermo-table img{width:100%;height:auto;display:block}
.thermo-table td:nth-child(1){width:40%}
.thermo-table td:nth-child(2){display:none}
.thermo-table td:nth-child(3){width:42%;padding:0 0 0 2%}
.thermo-table td:nth-child(4){width:16%}
.thermo-table img{border-radius:8px}
.thermo-table .SP{display:none}
.overshadow img{transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s ease}
.overshadow:hover img{transform:translateY(-4px) scale(1.04);box-shadow:0 8px 20px rgba(0,0,0,.12);box-shadow:0 0 8px gray}
#Thermography .refer{margin-bottom:70px}

/* Research */
.vertical .research-label{font-size:1em;margin-top:0;display:inline-block;color:#333;opacity:1}
.compression .research-label{font-size:.785em;margin-top:-8px;margin-bottom:-8px}

/* Hydrogen Inhaler (for Research) */
#CompareSpecifications .table-explanatory tbody th{width:110px;padding-right:0}
#CompareSpecifications .table-explanatory thead th:first-child{width:175px}
#PEM .widescreen{margin-bottom:25px}
#PEM .refer{margin-bottom:70px}

/* Medical */
#ProductSpecifications .medical-table thead th:first-child{width:175px}

/* Hydrogen Inhaler (for Medical) */
#ProductSpecifications .for-medical .red{margin-left:8px;padding-top:2px}

/* Hydrogen Bath (for Medical) */
#HydrogenGeneration .hover_zoom{margin:70px auto 60px;padding:10px}

#Safety .parallel{margin-top:55px}
#Safety .parallel p{margin:0}
#Safety .parallel img{padding:20px;border:none;box-shadow:none}

/* LITA BEAUTY Product Specifications */
#ProductSpecifications .related-products thead th:first-child{width:95px}

/* Hydrogen Supplement */
#Kefir .note-point{margin-bottom:0}

/* Natto Supplements */
#ProductSpecifications .supplement-chart .medium{margin:0 0 15px}
#ProductSpecifications .supplement-chart .refer{margin:25px 0 0 -4px;padding-top:0}

.full-width .widescreen .widescreen{margin-top:0;border:none}
#DrMiyakawa .promotion-foundation{margin-bottom:75px}

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

/* Lita Air (Purchase Benefits) */
#PurchaseBenefits .full-width .box_title{font-size:1.8rem}

}

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

/* Product List */
.product-list{grid-template-columns:1fr}

/* Lita Air (Purchase Benefits) */
#PurchaseBenefits .full-width .box_title{font-size:1.6rem}

/* Product Specifications (Common) */
#ProductSpecifications .specification .first{display:block;margin-left:-16px}

/* LITA BEAUTY */
#lita-skin .heading .PC{display:none}
#lita-skin #pankuzu .PC{display:none}
#ProductSpecifications .related-products .first{display:inline;margin-left:0}
#ProductSpecifications .related-products .second{display:block;margin-left:-16px}

/* Hydrogen Supplement */
#ProductSpecifications .supplement-chart .first{display:inline;margin-left:0}

/* Ceebo Gold Premium */
#ProductSpecifications .ceebo .fourth{display:block;margin-left:-16px}

}

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

/* Pankuzu (for Foundation) */
#pankuzu .PC{display:none}

/* Product List */
#product-nav ul{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Product Specifications (Common) */
#ProductSpecifications .table-explanatory thead th:first-child{width:110px}
#ProductSpecifications .specification .second{display:block;margin-left:-8px}
#ProductSpecifications .specification .third{display:block}
#ProductSpecifications .product-name .second{display:none}

/* Warranty Certificate */
#WarrantyCertificate .PC{display:none}

/* Lita Air (Purchase Benefits) */
#PurchaseBenefits .full-width .box_title{font-size:1.4rem}
#PurchaseBenefits .full-width .box_title .info_icon{width:36px}
.benefit-card{flex-basis:300px}

/* Hydrogen Inhaler (for Research) */
#CompareSpecifications .table-explanatory thead th:first-child{width:110px}
#CompareSpecifications .comparison .third{display:block}
.former{display:none}

/* LITA BEAUTY */
#ProductSpecifications .related-products thead th:first-child{width:95px}
#ProductSpecifications .related-products .second{margin-left:-16px}
#ProductSpecifications .related-products .third{display:inline}

/* Hydrogen Supplement */
#ProductSpecifications .supplement-chart .first{display:block}

/* Ceebo Gold Premium */
#ProductSpecifications .ceebo .first{display:block;margin-left:-8px}
#ProductSpecifications .ceebo .fourth{margin-left:-16px}
#ProductSpecifications .ceebo .fifth{display:inline;margin-left:0}

}

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

/* Hero */
.hero .hero-bg{width:100%;height:100%;position:absolute;z-index:1;object-fit:cover;object-position:center;inset:0}
.hero .hero-products{display:block;position:absolute;z-index:3;background:url(../images/product_transparent.webp) 50%/contain no-repeat;inset:0}
.hero .SP{display:inline}
.hero .PC{display:none}
.hero .hero-Landscape{display:none}

/* Pankuzu (for Foundation) */
#pankuzu .PC{display:inline}
#pankuzu .shorten{display:inline-block}

/* Product List */
#product-nav ul{grid-template-columns:repeat(4,minmax(0,1fr))}
.product-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.product-item-body{padding:15px 24px 10px}

/* Product Specifications (Common) */
#ProductSpecifications .table-explanatory thead th:first-child{width:160px}
#ProductSpecifications .specification .first,#ProductSpecifications .specification .second,#ProductSpecifications .specification .third{display:inline;margin-left:0}
#ProductSpecifications .product-name .second{display:inline}

/* Warranty Certificate */
#WarrantyCertificate .PC{display:inline}

/* Lita Air (Purchase Benefits) */
#PurchaseBenefits .full-width .box_title{font-size:1.8rem}
#PurchaseBenefits .full-width .box_title .info_icon{width:48px}
#PurchaseBenefits .full-width .widescreen{padding:70px 25px}
.benefit-card{flex-basis:320px}

/* Hydrogen Inhaler (for Research) */
#CompareSpecifications .table-explanatory thead th:first-child{width:175px}
#CompareSpecifications .comparison .third{display:inline;margin-left:0}

/* Medical */
#ProductSpecifications .medical-table  thead th:first-child{width:175px}
.former{display:inline}

/* LITA BEAUTY */
#ProductSpecifications .related-products thead th:first-child{width:95px}
#lita-skin .heading .PC{display:inline-block}
#lita-skin #pankuzu .PC{display:inline-block}

/* Ceebo Gold Premium */
#ProductSpecifications .ceebo .first{display:inline;margin-left:0}

}

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

/* Product List */
#product-nav ul{grid-template-columns:repeat(2,minmax(0,1fr))}
.product-list{grid-template-columns:1fr;gap:20px}

/* Lita Air (Purchase Benefits) */
.benefit-slider{gap:20px}
.benefit-card{flex-basis:290px}

/* LITA BEAUTY */
#ProductSpecifications .related-products .second{display:block;margin-left:-16px}

/* Ceebo Gold Premium */
#ProductSpecifications .ceebo .fourth{display:block;margin-left:-16px}

/* Set Purchase */
#set-purchase .heading .PC{display:inline}

}

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

/* Pankuzu (for Foundation) */
#pankuzu .PC{display:none}

/* Lita Air (Purchase Benefits) */
#PurchaseBenefits .full-width .box_title{font-size:1.4rem}
#PurchaseBenefits .full-width .box_title .info_icon{width:36px}
.benefit-card{flex-basis:260px}

/* Product Specifications (Common) */
#ProductSpecifications .table-explanatory thead th:first-child{width:105px}
#ProductSpecifications .specification .first{display:block;margin-left:-16px}
#ProductSpecifications .specification .third{display:block}

/* LITA BEAUTY */
#lita-skin .heading .SP{display:none}
#lita-skin #pankuzu .PC{display:none}
#ProductSpecifications .related-products thead th:first-child{width:95px}
#ProductSpecifications .related-products .third{display:inline}

/* Hydrogen Supplement */
#ProductSpecifications .supplement-chart .first{margin-left:0}

/* Natto Supplements */
#ProductSpecifications .natto-chart .fourth{display:block;margin-left:-12px}

/* Ceebo Gold Premium */
#ProductSpecifications .ceebo .fifth{display:inline;margin-left:0}

/* Set Purchase */
#set-purchase .heading .PC{display:none}

}

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

/* Common */
#lita-life .heading .PC,#lita-aqua .heading .PC{display:inline}

/* Product List */
.product-item-body{padding:15px 20px 5px}

/* Product Specifications (Common) */
#ProductSpecifications .specification .second{display:block;margin-left:-8px}
#ProductSpecifications .product-name .second{display:none}

/* Warranty Certificate */
#WarrantyCertificate .PC,#WarrantyCertificate .portrait{display:none}

/* Lita Air (Purchase Benefits) */
#PurchaseBenefits .full-width .widescreen{padding:70px 20px}
.benefit-slider{padding:8px 0 24px;scroll-padding-inline:0;gap:20px}
.benefit-card{max-width:360px;scroll-snap-stop:always;flex:0 0 78vw}
.benefit-card-body{padding:20px}
.benefit-card-body h4{font-size:1.1rem}
.benefit-card-body p{font-size:.95rem}
.BenefitGuide{font-size:.9rem}

/* Lita Life (Thermography) */
.thermo-table .SP{display:block;font-weight:500;text-align:center;padding-bottom:15px}
.thermo-table,.thermo-table tbody,.thermo-table tr{display:block}
.thermo-table tr{display:flex;flex-wrap:wrap}
.thermo-table td{display:block}
.thermo-table td:nth-child(1){width:72%}
.thermo-table td:nth-child(2){width:28%;display:block}
.thermo-table td:nth-child(3){width:72%;margin-top:50px}
.thermo-table td:nth-child(4){width:28%;margin-top:48px}
.thermo-table th{display:none}

/* Research */
.former{display:none}

/* LITA BEAUTY */
#ProductSpecifications .related-products thead th:first-child{width:90px}
#ProductSpecifications .related-products .first{margin-left:-12px}
#ProductSpecifications .related-products .second{margin-left:-16px}

/* Natto Supplements */
#natto-supplements .heading .shorten{display:none}

/* Ceebo Gold Premium */
#ProductSpecifications .ceebo .first{display:block;margin-left:-8px}
#ProductSpecifications .ceebo .fourth{margin-left:-16px}
#ProductSpecifications .ceebo .fifth{display:block;margin-left:16px}
#ProductSpecifications .ceebo .sixth{display:block}

}

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

/* Product List */
#product-nav ul{grid-template-columns:repeat(1,minmax(0,1fr))}

/* Lita Air (Purchase Benefits) */
#PurchaseBenefits .full-width .box_title{font-size:1.25rem}
#PurchaseBenefits .full-width .box_title .info_icon{width:28px}
#PurchaseBenefits .full-width .arrow{font-size:1.5rem;padding:0 0 4px}
.benefit-card{flex-basis:70vw}
.benefit-card-image{padding:20px}

/* Product Specifications (Common) */
#ProductSpecifications .product-name .red{display:block;margin-left:-8px}
#ProductSpecifications .for-research .red{margin-left:0}
#ProductSpecifications .specification .first{display:inline;margin-left:0}
.specification .refer{display:block;margin-left:0}
#ProductSpecifications .red .SP{display:none}

/* Hydrogen Inhaler (for Research) */
#CompareSpecifications .table-explanatory thead th:first-child{width:105px}
#CompareSpecifications .comparison .third{display:block}
#ProductSpecifications .for-research .third{display:block}

/* Hydrogen Inhaler (for Medical) */
#ProductSpecifications .for-medical .third{display:block}

/* LITA BEAUTY */
#ProductSpecifications .related-products thead th:first-child{width:85px}
#ProductSpecifications .related-products .first{display:block;margin-left:-12px}
#ProductSpecifications .related-products .second{display:block;margin-left:-16px}
#ProductSpecifications .related-products .third{display:block;margin-left:16px}

/* Natto Supplements */
#ProductSpecifications .product-name .first{display:block}
#ProductSpecifications .natto-chart .fifth{display:block;margin-left:-16px}

/* Hydrogen Supplement */
#ProductSpecifications .supplement-chart .first{display:block}
#ProductSpecifications .supplement-chart .fourth{display:block;margin-left:-16px}
#ProductSpecifications .supplement-chart .fifth{display:block;margin-left:-12px}

}

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



}

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

/* Product List */
.product-item h4{font-size:1.3rem}

/* Warranty Certificate */
#WarrantyCertificate .SP{display:none}

/* Lita Air (Purchase Benefits) */
#PurchaseBenefits .full-width .box_title{font-size:1.2rem}
#PurchaseBenefits .full-width .arrow{font-size:1.5rem}
.benefit-card-body h4{font-size:1.05rem}

}

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

/* Product List */
.product-item h4{font-size:1.1rem}

/* Lita Air (Selling Price) */
#SellingPrice .table-price th{width:55px}
#ProductSpecifications .table-explanatory tbody th,#ProductSpecifications .table-explanatory thead th:first-child{width:90px}
#ProductSpecifications .red{margin-left:-14px}

/* Lita Air (Purchase Benefits) */
#PurchaseBenefits .full-width .box_title{font-size:1.05rem}
.benefit-card-body{padding:16px}
.benefit-card-body h4{font-size:1rem}
.benefit-card-body p{font-size:.9rem}
.BenefitGuide{font-size:.85rem}

/* Hydrogen Inhaler (for Research) */
#CompareSpecifications .table-explanatory tbody th,#CompareSpecifications .table-explanatory thead th:first-child{width:90px}

/* LITA BEAUTY */
#ProductSpecifications .related-products thead th:first-child{width:75px}
#ProductSpecifications .related-products .second{margin-left:-12px}
#ProductSpecifications .related-products .third{margin-left:12px}

/* Hydrogen Supplement */
#ProductSpecifications .supplement-chart .fourth{margin-left:-12px}
#ProductSpecifications .supplement-chart .fifth{margin-left:-8px}

/* Natto Supplements */
#ProductSpecifications .natto-chart .fourth{margin-left:-8px}
#ProductSpecifications .natto-chart .fifth{margin-left:-14px}

/* Ceebo Gold Premium */
#ProductSpecifications .ceebo .fourth{margin-left:-14px}
#ProductSpecifications .ceebo .fifth{margin-left:14px}

}

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

/* Lita Air (Selling Price) */
#SellingPrice .table-price th{width:45px}

/* Product Specifications (Common) */
#ProductSpecifications .table-explanatory tbody th,#ProductSpecifications .table-explanatory thead th:first-child{width:80px}
#ProductSpecifications .specification tbody th{padding-left:12px}

/* Lita Air (Purchase Benefits) */
.benefit-slider{padding:15px 0;gap:15px}
.benefit-card-image{padding:15px}
.benefit-card-body{padding:15px}
.benefit-card-body h4{font-size:.95rem}
.benefit-card-body p,.BenefitGuide{font-size:.85rem}

/* Hydrogen Inhaler (for Research) */
#CompareSpecifications .table-explanatory tbody th,#CompareSpecifications .table-explanatory thead th:first-child{width:80px}

/* LITA BEAUTY */
#ProductSpecifications .related-products thead th:first-child{width:65px}

}

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

/* Hero */
.hero .hero-products{display:none}
.hero .hero-Landscape{display:block;position:absolute;z-index:3;background:url(../images/product_Landscape.webp) 50%/contain no-repeat;inset:0}

/* Product Specifications (Common) */
#ProductSpecifications .specification .space_left05{padding-top:4px}
#ProductSpecifications .red .refer{padding-top:4px}

/* Hydrogen Inhaler (for Research) */
.compression .research-label{font-size:.765em;margin-top:-8px;margin-bottom:-8px}

/* Hydrogen Inhaler (for Medical) */
#ProductSpecifications .for-medical .red{padding-top:4px}

}

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

/* Product Specifications (Common) */
#ProductSpecifications .specification .space_left05{padding-top:0}
#ProductSpecifications .red .refer{padding-top:4px}

/* Hydrogen Inhaler (for Research) */
#CompareSpecifications .info_box .SP{display:none}
.compression .research-label{font-size:.8em;margin-top:-8px;margin-bottom:-8px}

/* Hydrogen Inhaler (for Medical) */
#ProductSpecifications .for-medical .red{margin-left:0;padding-top:0}

}