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

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

@media (max-width: 768px){

.HydrogenInner{
	width: 90%;
	box-sizing: border-box;
}

  .HydrogenSection{
    padding: 46px 0;
  }

  /* ---- Hero ---- */
  .HydrogenInhalationTitleBack{
    height: 320px;
    padding-top: 138px;
    margin-top: 48px;
  }
  .HydrogenInhalationTitleBack:before{
    background: linear-gradient(90deg, rgba(0,0,0,0.62), rgba(0,0,0,0.22));
  }

  .HydrogenInhalationPageTitle_jp_main{
    font-size: 26px;
    letter-spacing: 0.06em;
    line-height: 2;
  }
  .HydrogenInhalationPageTitle_jp_sub{
    font-size: 16px;
    margin-top: 15px;
    line-height: 1.5;
  }
  .HydrogenInhalationPageTitle_en{
    font-size: 12.5px;
    margin-top: 12px;
    letter-spacing: 0.14em;
  }

  /* ---- Typography ---- */
  .HydrogenLead{
    font-size: 15px;
    line-height: 2.0;
  }
  .HydrogenP{
    font-size: 15px;
    line-height: 1.95;
    margin: 5% auto 2%;
  }
  .HydrogenList{
	font-size: 14px;
	line-height: 1.95;
	padding-left: 0;
  }
  .HydrogenList li{
    font-size: 15px;
	margin:2% auto 0;
  }

  .HydrogenH2{
    font-size: 22px;
    padding-bottom: 12px;
    margin-bottom: 18px;
  }
  .HydrogenH2:after{
    width: 72px;
  }

  .HydrogenH3{
    font-size: 16px;
    margin: 2% auto 5%;
  }

  /* ---- Cards / Radius / Shadow ---- */
  .HydrogenCard,
  .HydrogenKeyCard,
  .HydrogenChecklistItem,
  .HydrogenRelated,
  .HydrogenRelatedMini,
  .HydrogenAuthorBox,
  .HydrogenFigureBox,
  .HydrogenFAQItem,
  .HydrogenCTA{
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(15,23,42,0.06);
  }

  .HydrogenCard{
    padding: 16px;
    margin-top: 12px;
  }

  /* ---- Grids ---- */
  .HydrogenKeyGrid{
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 14px 0 18px;
  }
  .HydrogenKeyCard{
    padding: 16px;
  }

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

  /* ---- Figure ---- */
  .HydrogenFigureHead{
    padding: 14px 14px;
  }
  .HydrogenFigureImgWrap{
    padding: 14px;
  }
  .HydrogenFigureImg{
    width: 100%;
    border-radius: 10px;
  }
  .HydrogenCaption{
    padding: 0 14px 14px;
  }

  /* ---- TOC ---- */
  .HydrogenTocBox{
    padding: 14px 0;
  }
  .HydrogenTocTitle{
    font-size: 13px;
    margin-bottom: 8px;
    letter-spacing: 0.10em;
  }
  .HydrogenTocList{
    font-size: 13.5px;
  }
  .HydrogenTocList a{
    padding: 10px 0;
    padding-left: 10px;
  }

  /* ---- Table (スマホ：横スクロール許可) ---- */
  .HydrogenTableWrap{
    border-radius: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .HydrogenTable{
    min-width: 640px; /* ここが肝：潰れず、横スクで読める */
    font-size: 13px;
  }
  .HydrogenTable thead th{
    font-size: 13.5px;
    padding: 10px 10px;
  }
  .HydrogenTable td{
    font-size: 13px;
    padding: 10px 10px;
    line-height: 1.75;
  }
  .HydrogenTable td:first-child{
    width: 30%;
  }

  /* ---- Notice / Note ---- */
  .HydrogenNotice{
    padding: 14px 14px;
    border-radius: 14px;
  }
  .HydrogenNoteBox{
    padding: 12px 12px;
    border-radius: 14px;
  }

  /* ---- FAQ ---- */
  .HydrogenFAQSummary{
    padding: 14px 14px;
    padding-right: 42px;
  }
  .HydrogenFAQSummary:after{
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 8px;
  }
  .HydrogenFAQBody{
    padding: 14px;
  }

  /* ---- CTA ---- */
  .HydrogenCTA{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px;
  }
  .HydrogenCTATitle{
    font-size: 15px;
  }
  .HydrogenCTAButtons{
    flex-direction: column;
    gap: 10px;
  }
  .HydrogenBtn{
    width: 100%;
    height: 44px;
    border-radius: 14px;
    padding: 0 14px;
  }

  /* ---- PageTop ---- */
  .PageTopArea{
    right: 12px !important;
    bottom: 12px !important;
  }
  .PageTopArea > *{
    width: 44px !important;
    height: 44px !important;
  }
  .PageTopArea > *:before{
    font-size: 15px;
  }
}

/* さらに小さい端末（?360px） */
@media (max-width: 360px){
  .HydrogenInhalationPageTitle_jp_main{ font-size: 24px; }
  .HydrogenInhalationPageTitle_jp_sub{ font-size: 17px; }
  .HydrogenInner{ max-width: calc(100% - 20px); }
}

.HydrogenInhalationDetail strong {
  font-weight: 800;
  font-size: 16px;
}

.HydrogenInhalationDetail{
	width:100%;
}

.HydrogenRelatedMini{
	width:90%;
}

.HydrogenKeyLabel{
	font-size:14px;
}