/* --- 視覚的に隠すが支援技術・キーボードには残す（A-13 キーボード操作） --- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* --- fieldset の既定枠・余白を消して従来レイアウトを維持（A-11 グループ化） --- */
.a11y-group {
  border: 0; margin: 0; padding: 0; min-width: 0;
}

/* --- ラジオ本体: display:none をやめ、視覚的に隠しつつフォーカス可能に --- */
/*     （application.css:498 の input[type=radio]{display:none} を打ち消す） */
#main #contents_sex input[type='radio'],
#main #contents_age input[type='radio'] {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
  display: inline !important;
}

/* --- 既定(未選択): チェック印は全て隠す（旧CSSは奇数を既定表示にしていたのを統一） --- */
#main #contents_sex label [class*='check_button_'],
#main #contents_age label [class*='check_button_'] {
  display: none;
}

/* --- 選択時(:checked): on画像・on文字・チェック印を表示、off を隠す --- */
#main #contents_sex input[type='radio']:checked + label .button_on,
#main #contents_age input[type='radio']:checked + label .button_on {
  display: inline;
  float: left;
}
#main #contents_sex input[type='radio']:checked + label .button_off,
#main #contents_age input[type='radio']:checked + label .button_off {
  display: none;
}
#main #contents_sex input[type='radio']:checked + label span[class*='btn_txt'][class*='_on'],
#main #contents_age input[type='radio']:checked + label span[class*='btn_txt'][class*='_on'] {
  display: inline;
}
#main #contents_sex input[type='radio']:checked + label span[class*='btn_txt'][class*='_off'],
#main #contents_age input[type='radio']:checked + label span[class*='btn_txt'][class*='_off'] {
  display: none;
}
#main #contents_sex input[type='radio']:checked + label [class*='check_button_'],
#main #contents_age input[type='radio']:checked + label [class*='check_button_'] {
  display: inline;
}

#main #contents input[type='checkbox'] {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
  display: inline !important;
}
#main #contents label [class*='check_button_'] {
  display: none;
}
#main #contents input[type='checkbox']:checked + label .button_on { display: inline; float: left; }
#main #contents input[type='checkbox']:checked + label .button_off { display: none; }
#main #contents input[type='checkbox']:checked + label span[class*='btn_txt'][class*='_on'] { display: inline; }
#main #contents input[type='checkbox']:checked + label span[class*='btn_txt'][class*='_off'] { display: none; }
#main #contents input[type='checkbox']:checked + label [class*='check_button_'] { display: inline; }
#main #contents input[type='checkbox']:focus-visible + label .button_on,
#main #contents input[type='checkbox']:focus-visible + label .button_off,
#main #contents input[type='checkbox']:focus + label .button_on,
#main #contents input[type='checkbox']:focus + label .button_off {
  outline: 3px solid #005fcc; outline-offset: 2px;
}

/* --- キーボードフォーカスの可視化（A-13 の実効性担保） --- */
#main #contents_sex input[type='radio']:focus-visible + label .button_on,
#main #contents_sex input[type='radio']:focus-visible + label .button_off,
#main #contents_age input[type='radio']:focus-visible + label .button_on,
#main #contents_age input[type='radio']:focus-visible + label .button_off {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}
/* 一部ブラウザの :focus-visible 非対応・プログラム的フォーカス向けフォールバック */
#main #contents_sex input[type='radio']:focus + label .button_on,
#main #contents_sex input[type='radio']:focus + label .button_off,
#main #contents_age input[type='radio']:focus + label .button_on,
#main #contents_age input[type='radio']:focus + label .button_off {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

/* --- A-05: ul直下の <div class="clear"> を撤去したことによる行折り返しの代替 --- */
/*     年齢は2列で3行(1-2/3-4/5)。奇数番目の li で左クリアして行頭に戻す。 */
#main #contents_age ul > li:nth-of-type(odd) {
  clear: left;
}

/* --- A-04: 進捗マーカーを ul/li 化したことによる既定の余白・マーカーを除去。
             バー画像は position:absolute なので、この ul は在るだけ（配置に影響しない）。 --- */
#main #progress #progress_bar ul.progress-markers {
  list-style: none;
  margin: 0; padding: 0;
}
#main #progress #progress_bar ul.progress-markers li {
  display: inline; margin: 0; padding: 0;
}

/* --- A-03: サイト名見出しの h1 化で入る既定マージン/拡大/ブロック化を打ち消し、
             従来の見た目(インライン・#header_inner から継承する太字)を維持 --- */
#header_inner h1.site-title {
  margin: 0; padding: 0;
  font-size: inherit; font-weight: inherit;
  display: inline;
}

#main #contents input[type='checkbox']:checked + label .button_on,
#main #contents_sex input[type='radio']:checked + label .button_on,
#main #contents_age input[type='radio']:checked + label .button_on {
  float: none;
}

/* ※ top は !important 必須: 幅帯別の既存ルール（例 #main #contents .question_1
 *   .check_button_1）が詳細度 (2,2,0) で本ルール (2,1,1) に勝つため、通常宣言では
 *   帯別の手打ち top が生き残る（transform だけ適用され上に突き抜ける事故を確認済み）。 */
#main #contents label [class*='check_button_'],
#main #contents_sex label [class*='check_button_'],
#main #contents_age label [class*='check_button_'] {
  top: 50% !important;
  transform: translateY(-50%);
}

#main #progress #progress_bar .progress-position {
  width: 300px;
  margin: 6px 0 0;
  text-align: center;
  font-size: 90%;
}
@media all and (max-width: 768px) {
  /* 481〜768px帯: application.css 側 .meter は 90%（08-31 改修） */
  #main #progress #progress_bar .progress-position {
    width: 90%;
    margin: 4px 0 0 10px;
    padding: 0 5px;
  }
}
@media all and (max-width: 480px) {
  /* ≦480px帯: smart.css 側 .meter は 80% のまま（90%だとバーからはみ出すため）。
     現在地表記もそれに追従 */
  #main #progress #progress_bar .progress-position {
    width: 80%;
  }
}

@media all and (min-width: 769px) {
  html:lang(en) #header #header_inner {
    font-size: 100%;
  }
  #main_advice_shou #result_shou #result_title {
    margin: 20px 20px 35px;
  }
}
@media all and (max-width: 768px) {
  html:lang(en) #header #header_inner {
    font-size: 75%;
  }
}

.lang_current {
  color: green;
}

@media all and (min-width: 769px) {
  html:lang(en) #header #header_inner #title_illust {
    right: -10px;
  }
  html:lang(en) #header #header_inner h1.site-title {
    font-size:90%;
  }
  html:lang(en) #main #title {
    font-size:170%;
  }
  html:lang(en) #main_advice_shou #result_shou #result_title {
    font-size:145%;
  }
}
html:lang(en) #main_result #result_shou #result_text {
  font-size: 150%;
}