/* ===============================
Hydrogen Inhaler Guide - PC
Suifeel lower page system
=============================== */

.GuideArea {
    background:#fff;
    color:#555;
    overflow:hidden
}

.GuideContainer {
    width:min(1180px,calc(100% - 96px));
    margin:0 auto;
    box-sizing:border-box
}

.GuideBreadcrumb {
    width:min(1180px,calc(100% - 96px));
    margin:24px auto 0;
    display:flex;
    gap:10px;
    align-items:center;
    font-size:12px;
    letter-spacing:.04em;
    color:rgba(13,11,43,.55)
}

.GuideBreadcrumb a {
    color:#2f7897;
    text-decoration:none
}

.GuideHero .LowerHero_bg {
    background:linear-gradient(135deg,rgba(238,248,252,.98),rgba(255,255,255,.98) 56%,rgba(233,242,249,.96))
}

.GuideIntro,.GuidePrinciple,.GuideCriteria,.GuideUsage,.GuideChecklist,.GuideSuifeel,.GuideDecision {
    padding:104px 0
}

.GuideIntro {
    padding-top:86px
}

.GuidePrinciple,.GuideUsage,.GuideSuifeel {
    background:#f8fbfd
}

.GuideEyebrow {
    margin:0 0 16px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.18em;
    color:#6ba6c2
}

.GuideTitle {
    margin: 0;
    font-size: clamp(30px, 2.8vw, 38px);
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: .045em;
    color: #555;
}

.GuideLead {
    max-width:800px;
    margin:26px 0 0;
    font-size:15px;
    line-height:2;
    color:rgba(2, 2, 2, 0.72)
}

.GuideIntroGrid {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:88px;
    align-items:start
}

.GuideIntroText p {
    margin:0 0 22px;
    font-size:15px;
    line-height:2.05;
    color:rgba(13,11,43,.76)
}

.GuideSectionHead {
    margin-bottom:54px
}

.GuideSectionHeadCenter {
    text-align:center
}

.GuideSectionHeadCenter .GuideLead {
    margin-left:auto;
    margin-right:auto
}

.GuideFormulaCards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}

.GuideMetricCard,.GuideCriteriaCard,.GuideUsageCard {
    background:#fff;
    border:1px solid rgba(13,11,43,.08);
    border-radius:24px;
    padding:34px 32px;
    box-shadow:0 18px 42px rgba(23,58,77,.055)
}

.GuideMetricCard span,.GuideUsageTag {
    display:block;
    margin-bottom:14px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.16em;
    color:#7BAFCB
}

.GuideMetricCard h3,.GuideCriteriaCard h3,.GuideUsageCard h3 {
    margin:0 0 14px;
    font-size:20px;
    line-height:1.45;
    font-weight:550;
    color:#555;
}

.GuideMetricCard p,.GuideCriteriaCard p,.GuideUsageCard p {
    margin:0;
    font-size:14px;
    line-height:1.95;
    color:#6ba6c2
}

.GuideNote {
    margin-top:24px;
    padding:24px 28px;
    border-left:3px solid #7BAFCB;
    background:rgba(123,175,203,.08);
    border-radius:0 16px 16px 0
}

.GuideNoteLabel {
    margin:0 0 6px!important;
    font-size:10px!important;
    font-weight:700;
    letter-spacing:.16em;
    color:#5e98b5!important
}

.GuideNote p {
    margin:0;
    font-size:14px;
    line-height:1.9;
    color:rgba(13,11,43,.76)
}

.GuideCriteriaGrid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px
}

.GuideCriteriaCard {
    position:relative;
    padding-left:88px;
    min-height:132px
}

.GuideCriteriaNo {
    position:absolute;
    left:30px;
    top:32px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;
    color:#7BAFCB
}

.GuideUsageGrid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:26px
}

.GuideUsageCard ul {
    margin:24px 0 26px;
    padding:0;
    list-style:none;
    display:grid;
    gap:10px
}

.GuideUsageCard li {
    position:relative;
    padding-left:18px;
    font-size:14px;
    line-height:1.65;
    color:rgba(13,11,43,.75)
}

.GuideUsageCard li:before {
    content:'•';
    position:absolute;
    left:0;
    color:#7BAFCB
}

.GuideUsageCard a {
    display:inline-flex;
    align-items:center;
    min-height:44px;
    color:#2f7897;
    font-weight:600;
    text-decoration:none
}

.GuideUsageCard.isBusiness {
    background:#0D0B2B;
    color:#fff
}

.GuideUsageCard.isBusiness h3,.GuideUsageCard.isBusiness li {
    color:#fff
}

.GuideUsageCard.isBusiness li {
    color:rgba(255,255,255,.82)
}

.GuideUsageCard.isBusiness a {
    color:#a8d5e8
}

.GuideChecklistBox {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:0 34px;
    padding:26px 40px;
    background:#fff;
    border:1px solid rgba(13,11,43,.08);
    border-radius:26px;
    box-shadow:0 22px 48px rgba(23,58,77,.055)
}

.GuideCheckItem {
    display:flex;
    gap:14px;
    align-items:center;
    padding:18px 0;
    border-bottom:1px solid rgba(13,11,43,.08)
}

.GuideCheckItem span {
    width:26px;
    height:26px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#eaf5fa;
    color:#2f7897;
    font-size:13px;
    font-weight:700;
    flex:none
}

.GuideCheckItem p {
    margin:0;
    font-size:14px;
    line-height:1.6
}

.GuideSpecWrap {
    background:#fff;
    border:1px solid rgba(13,11,43,.08);
    border-radius:24px;
    padding:16px 34px 24px
}

.GuideSpecTable {
    width:100%;
    border-collapse:collapse
}

.GuideSpecTable th,.GuideSpecTable td {
    padding:18px 12px;
    border-bottom:1px solid rgba(13,11,43,.08);
    font-size:14px;
    line-height:1.65;
    text-align:left
}

.GuideSpecTable th {
    width:28%;
    font-weight:600;
    color:#7BAFCB
}

.GuideSpecNote {
    margin:18px 0 0;
    font-size:12px;
    line-height:1.75;
    color:rgba(13,11,43,.58)
}

.GuideLinkGrid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    margin-top:24px
}

.GuideLinkGrid a {
    position:relative;
    display:block;
    padding:22px 58px 22px 24px;
    border:1px solid rgba(13,11,43,.1);
    border-radius:16px;
    background:#fff;
    text-decoration:none;
    color:#555;
    transition:.25s ease
}

.GuideLinkGrid a:hover {
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(13,11,43,.07)
}

.GuideLinkGrid span {
    display:block;
    margin-bottom:6px;
    font-size:9px;
    font-weight:700;
    letter-spacing:.15em;
    color:#7BAFCB
}

.GuideLinkGrid strong {
    font-size:14px;
    font-weight:600
}

.GuideLinkGrid em {
    position:absolute;
    right:24px;
    top:50%;
    transform:translateY(-50%);
    font-style:normal;
    color:#7BAFCB
}

.GuideDecisionGrid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin: 25px auto;
}

.GuideDecisionCard {
    display:block;
    padding:30px;
    border:1px solid rgba(13,11,43,.08);
    border-radius:22px;
    color:#555;
    text-decoration:none;
    background:#fff;
    transition:.25s ease
}

.GuideDecisionCard:hover {
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(23,58,77,.08)
}

.GuideDecisionCard span {
    font-size:11px;
    font-weight:700;
    color:#7BAFCB
}

.GuideDecisionCard h3 {
    margin:12px 0 10px;
    font-size:19px
}

.GuideDecisionCard p {
    margin:0;
    font-size:13px;
    line-height:1.8;
    color:rgba(13,11,43,.68)
}

.GuideFinalCta {
    margin-top:26px;
    padding:28px 32px;
    background:#0D0B2B;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    color:#fff
}

.GuideFinalCta p {
    margin:0 0 7px;
    font-size:15px;
    font-weight:600;
    color:#fff;
}

.GuideFinalCta small {
    font-size:12px;
    color:rgba(255,255,255,.7)
}

.GuideFinalCta a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:210px;
    height:48px;
    padding:0 24px;
    border-radius:999px;
    background:#fff;
    color:#555;
    text-decoration:none;
    font-size:13px;
    font-weight:600
}

/* ===============================
Visual content
=============================== */

.GuideHeroInner {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
    gap: clamp(44px, 6vw, 90px);
    align-items: center;
}

.GuideHeroVisual {
    position: relative;
    margin: 0;
    min-width: 0;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(22, 47, 63, 0.14);
}

.GuideHeroVisual::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
    border-radius: inherit;
}

.GuideHeroVisual img {
    display: block;
    width: 100%;
    height: clamp(360px, 34vw, 540px);
    object-fit: cover;
}

.GuideHeroVisual figcaption {
    position: absolute;
    left: 22px;
    bottom: 20px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #365467;
}

.GuideEditorialVisual {
    position: relative;
    margin: 0 0 30px;
    border-radius: 26px;
    overflow: hidden;
    background: #eef7fb;
}

.GuideEditorialVisual img {
    display: block;
    width: 100%;
    height: clamp(340px, 40vw, 520px);
    object-fit: cover;
}

.GuideEditorialVisual figcaption, .GuideProductVisual figcaption {
    padding: 12px 16px;
    font-size: 11px;
    line-height: 1.6;
    color: rgba(13, 11, 43, 0.58);
    background: rgba(255, 255, 255, 0.92);
}

.GuideUsageVisual {
    position: relative;
    margin: -10px -8px 26px;
    border-radius: 18px;
    overflow: hidden;
    background: #edf5f8;
}

.GuideUsageVisual img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.GuideUsageVisual figcaption {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(13, 11, 43, 0.72);
    color: #fff;
    font-size: 9px;
    letter-spacing: 0.08em;
}

.GuideUsageCard.isBusiness .GuideUsageVisual {
    background: #15183b;
}

.GuideSpecLayout {
    display: grid;
    grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
    gap: 24px;
    align-items: stretch;
}

.GuideProductVisual {
    margin: 0;
    border: 1px solid rgba(13, 11, 43, 0.08);
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(145deg, #f2f8fb, #ffffff);
}

.GuideProductVisual img {
    display: block;
    width: 100%;
    height: calc(100% - 42px);
    min-height: 470px;
    object-fit: cover;
}

/* ========================================
   GUIDE HERO - PC only
   Existing Suifeel LowerHero design system
   TB/SP keep the original card-style hero.
======================================== */
@media screen and (min-width: 1081px) {

    .GuideHero .LowerHero_bg {
        background-image: url("/commonImages/guide/hydrogen-inhaler-guide-hero.webp");
        background-position: center right;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .GuideHeroInner {
        display: block;
    }

    .GuideHeroVisual {
        display: none;
    }

}

/* ===============================
   Floating Index anchor offset
=============================== */
.GuideIntro,
.GuidePrinciple,
.GuideCriteria,
.GuideUsage,
.GuideChecklist,
.GuideSuifeel,
.GuideDecision {
    scroll-margin-top: 120px;
}