@charset "utf-8";
/* 文字化け防止 */
/* CSS Document */

@charset "utf-8";
/* =========================================
   HydrogenInhalation TB Override
   - PC CSS を読み込んだ上で “上書き” する前提
   - 対象：Tablet / Small Desktop（?1280px）
========================================= */

@media (max-width: 1280px){

  /* ---- Layout ---- */
  .HydrogenInner{
    width: 980px;
    max-width: calc(100% - 40px);
  }

  .HydrogenSection{
    padding: 60px 0;
  }

  /* ---- Hero ---- */
  .HydrogenInhalationTitleBack{
    height: 420px;
    padding-top: 175px;
    margin-top: 56px;
  }
  .HydrogenInhalationPageTitle_jp_main{
    font-size: 36px;
    letter-spacing: 0.07em;
  }
  .HydrogenInhalationPageTitle_jp_sub{
    font-size: 24px;
    margin-top: 14px;
  }
  .HydrogenInhalationPageTitle_en{
    font-size: 14px;
    margin-top: 16px;
    letter-spacing: 0.16em;
  }

  /* ---- Typography ---- */
  .HydrogenLead{
    font-size: 16.5px;
    line-height: 2.05;
  }
  .HydrogenP{
	font-size: 14.5px;
	line-height: 2.0;
	margin: 5% auto 2%;
  }
  .HydrogenH2{
    font-size: 26px;
    margin-bottom: 20px;
  }
  .HydrogenH3{
    font-size: 18px;
    margin: 16px 0 12px;
  }

  /* ---- Cards / Grids ---- */
  .HydrogenKeyGrid{
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 16px 0 22px;
  }
  .HydrogenKeyCard{
    padding: 18px;
	width:100%;
  }
  .HydrogenCard{
    padding: 18px;
  }

  .HydrogenChecklist{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .HydrogenChecklistItem{
    padding: 15px;
	width:100%;
  }

  /* ---- Figure ---- */
  .HydrogenFigureImgWrap{
    padding: 16px;
  }
  .HydrogenFigureImg{
    width: 92%;
  }

  /* ---- Table ---- */
  .HydrogenTable{
    font-size: 13.5px;
  }
  .HydrogenTable thead th{
    font-size: 14.5px;
    padding: 11px 11px;
  }
  .HydrogenTable td{
    font-size: 13.5px;
    padding: 11px 11px;
  }
  .HydrogenTable td:first-child{
    width: 28%;
  }

  /* ---- TOC ---- */
  .HydrogenTocBox{
    padding: 16px 0;
  }
  .HydrogenTocList a{
    padding: 9px 0;
  }

  /* ---- CTA ---- */
  .HydrogenCTA{
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 18px;
  }
  .HydrogenCTAButtons{
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .HydrogenBtn{
    height: 44px;
    padding: 0 16px;
    border-radius: 14px;
  }

  /* ---- PageTop ---- */
  .PageTopArea{
    right: 16px !important;
    bottom: 16px !important;
  }
  .PageTopArea > *{
    width: 50px !important;
    height: 50px !important;
  }
}

/* もう少しタブレット寄り（?1024px） */
@media (max-width: 1024px){

  .HydrogenInner{
    max-width: calc(100% - 32px);
  }

  .HydrogenInhalationTitleBack{
    height: 390px;
    padding-top: 160px;
  }
  .HydrogenInhalationPageTitle_jp_main{
    font-size: 32px;
  }
  .HydrogenInhalationPageTitle_jp_sub{
    font-size: 22px;
  }

  .HydrogenKeyGrid{
    grid-template-columns: 1fr;
  }

  .HydrogenFigureImg{
    width: 100%;
  }

  .HydrogenSection{
    padding: 56px 0;
  }
}

.HydrogenRelatedMini{
	width:90%;
}

.HydrogenKeyLabel{
	font-size:14px;
}