@media all and (max-width: 480px) {
  #header {
    padding: 0 0 0 10px;
  }
  #header #header_inner {
    width: 100%;
    padding: 3px 0 0 0;
  }
  #header #header_inner img {
    width: 50%;
  }
  #container {
    width: 100%;
  }
  #main_top #kanshuu {
    padding-top: 0;
  }
  #main_top #kanshuu img {
    width: 63%;
  }
  #main_top #research_note {
    font-size: 11px;
  }
  #main_top #title {
    padding: 10px 0 10px 0;
  }
  #main_top #title img {
    width: 90%;
  }
  #main_top #logo img {
    width: 40%;
  }
  #main_top #subtitle {
    padding-top: 10px;
  }
  #main_top #subtitle img {
    width: 70%;
  }
  #main_top #kintarou img {
    width: 15%;
  }
  #main_top #start_button img {
    width: 90%;
  }
  #main_tutorial #title {
    padding: 20px 0 10px 0;
  }
  #main_tutorial #title img {
    width: 50%;
  }
  #main_tutorial #contents {
    padding-bottom: 10px;
  }
  #main_tutorial #contents img {
    width: 100%;
  }
  #main_tutorial #start_button img {
    width: 90%;
  }
  #main_tutorial #start_button .btn_txt_off,
  #main_tutorial #start_button .btn_txt_on {
    left: 25.3%;
  }
  #main #title_sex {
    margin: 10px 0 0 10px;
  }
  #main #title_sex img {
    width: 70%;
  }
  #main #contents_sex {
    width: 100%;
  }
  #main #contents_sex img.button_on, #main #contents_sex img.button_off {
    width: 45%;
    margin: 0 0 10px 10px;
  }
  #main #contents_sex img.check_button_1, #main #contents_sex img.check_button_2 {
    width: 30px;
  }
  #main #contents_sex .question_1 .check_button_1 {
    top: 10px;
    left: -135px;
  }
  #main #contents_sex .question_2 .check_button_2 {
    top: 10px;
    left: -135px;
  }
  #main #title_age {
    margin: 10px 0 10px 10px;
  }
  #main #title_age img {
    width: 80%;
  }
  #main #contents_age {
    width: 100%;
    margin-bottom: 0;
  }
  #main #contents_age img.button_on, #main #contents_age img.button_off {
    width: 45%;
    margin: 0 0 10px 10px;
  }
  #main #contents_age img.check_button_3, #main #contents_age img.check_button_4, #main #contents_age img.check_button_5, #main #contents_age img.check_button_6, #main #contents_age img.check_button_7 {
    width: 30px;
  }
  #main #contents_age .question_3 .check_button_3 {
    top: 10px;
    left: -135px;
  }
  #main #contents_age .question_4 .check_button_4 {
    top: 10px;
    left: -135px;
  }
  #main #contents_age .question_5 .check_button_5 {
    top: 10px;
    left: -135px;
  }
  #main #contents_age .question_6 .check_button_6 {
    top: 10px;
    left: -135px;
  }
  #main #contents_age .question_7 .check_button_7 {
    top: 10px;
    left: -135px;
  }
  #main #title {
    margin: 10px 0 10px 10px;
  }
  #main #title img {
    width: 60%;
  }
  #main #title_illust {
    top: -30px;
    left: 210px;
  }
  #main #title_illust img {
    width: 100px;
  }
  #main #contents {
    height: 200px;
    margin: 0 0 0 10px;
  }
  #main #contents img.button_on, #main #contents img.button_off {
    width: 95%;
  }
  #main #contents .question_1 .check_button_1 {
    width: 30px;
    top: -20px;
    left: 10px;
  }
  #main #contents .question_2 .check_button_2 {
    width: 30px;
    top: -20px;
    left: 10px;
  }
  #main #contents .question_3 .check_button_3 {
    width: 30px;
    top: -20px;
    left: 10px;
  }
  #main #contents .question_4 .check_button_4 {
    width: 30px;
    top: -20px;
    left: 10px;
  }
  #main #progress {
    width: 100%;
    margin: 10px 0 0 10px;
  }
  #main #progress #prev_button {
    width: 25%;
  }
  #main #progress #prev_button img {
    width: 100%;
  }
  #main #progress #progress_bar {
    width: 45%;
    margin: 0;
  }
  #main #progress #progress_bar img.bar_25_gray, #main #progress #progress_bar img.bar_25_color {
    width: 20px;
    top: -15px;
    left: 30px;
  }
  #main #progress #progress_bar img.bar_50_gray, #main #progress #progress_bar img.bar_50_color {
    width: 20px;
    top: -15px;
    left: 60px;
  }
  #main #progress #progress_bar img.bar_75_gray, #main #progress #progress_bar img.bar_75_color {
    width: 20px;
    top: -15px;
    left: 90px;
  }
  #main #progress #progress_bar img.bar_100_gray, #main #progress #progress_bar img.bar_100_color {
    width: 20px;
    top: -15px;
    left: 120px;
  }
  #main #progress #progress_bar .meter {
    height: 10px;
    width: 80%;
    margin: 17px 0 0 10px;
    padding: 5px;
  }
  #main #progress #progress_bar .background {
    top: 5px;
    width: 92%;
    height: 10px;
  }
  #main #progress #next_button {
    width: 25%;
  }
  #main #progress #next_button input, #main #progress #next_button img {
    width: 100%;
  }
  #main #progress #next_button img.fukidashi {
    width: 250px;
    top: 230px;
    left: 65px;
  }
  #main_result #title {
    margin-left: 10px;
  }
  #main_result #title img {
    width: 30%;
  }
  #main_result #result_shou {
    width: 95%;
    margin-left: 10px;
  }
  #main_result #result_shou img {
    width: 80%;
  }
  #main_result #result_shou #result_illust {
    top: -50px;
    left: 200px;
  }
  #main_result #result_shou #result_illust img {
    width: 100px;
  }
  #main_result #result_chart {
    width: 95%;
    margin: 10px 0 0 10px;
  }
  #main_result #result_chart #radar_chart {
    width: 100%;
    margin-top: 20px;
  }
  #main_result #result_chart #radar_chart #chart_title img {
    width: 50%;
  }
  #main_result #result_chart #radar_chart #canvasChart {
    margin: 10px 0 0 30px;
  }
  #main_result #result_chart #other_shous {
    width: 100%;
    margin: 30px 0 10px 0;
  }
  #main_result #result_chart #other_shous #title_other_shous {
    text-align: center;
  }
  #main_result #result_chart #other_shous #title_other_shous img {
    width: 70%;
  }
  #main_result #result_chart #other_shous #btn_other_shous {
    text-align: center;
    margin-left: 0;
  }
  #main_result #result_chart #other_shous #btn_other_shous img {
    width: 30%;
  }
  #main_result #advice img {
    width: 80%;
    margin-top: 10px;
  }
  #main_advice_shou #title {
    margin: 10px 0 0 10px;
  }
  #main_advice_shou #title img {
    width: 16%;
  }
  #main_advice_shou #result_shou {
    width: 95%;
    margin-left: 10px;
    padding-top: 10px;
  }
  #main_advice_shou #result_shou #result_title img {
    width: 70%;
  }
  #main_advice_shou #result_shou #result_illust {
    top: -50px;
    left: 200px;
  }
  #main_advice_shou #result_shou #result_illust img {
    width: 100px;
  }
  #main_advice_shou #result_shou #result_text {
    width: 100%;
    margin-top: -10px;
  }
  #main_advice_shou #result_shou #result_text img {
    width: 100%;
  }
  #main_advice_shou #shokuzai_contents {
    width: 95%;
    margin: 10px 0 0 10px;
    padding: 10px 0 10px 0;
  }
  #main_advice_shou #shokuzai_contents #title_shokuzai img {
    width: 50%;
  }
  #main_advice_shou #shokuzai_contents #row_shokuzai {
    width: 100%;
  }
  #main_advice_shou #shokuzai_contents #row_shokuzai .shokuzai {
    width: 20%;
    font-size: 12px;
  }
  #main_advice_shou #shokuzai_contents #row_shokuzai .shokuzai img {
    width: 90%;
  }
  #main_advice_shou #advice {
    margin-top: 10px;
    padding-bottom: 300px;
  }
  #main_advice_shou #advice img.btn_to_result_off, #main_advice_shou #advice img.btn_to_result_on {
    width: 36%;
    margin-right: 0;
  }
  #main_advice_shou #advice img.btn_to_other_off, #main_advice_shou #advice img.btn_to_other_on {
    width: 53%;
    margin-left: 0;
  }
}

@media all and (max-width: 480px) {

  /* --- 項番2(1): ヘッダーのアイコンが変倍（img一括50%指定が原因）--- */
  #header #header_inner img.logo {
    width: auto;
    height: 34px;
    vertical-align: middle;
    margin-right: 6px;
  }
  #header #header_inner {
    height: auto;
    padding: 2px 0;
    display: flex;
    align-items: center;
  }

  /* --- 項番2(2)(3): 性別・年齢ページ。2カラムの基準幅を確定 --- */
  #main #contents_sex li,
  #main #contents_age li {
    width: 46%;
    margin: 6px 0 6px 2.6%;
    float: left;
  }
  #main #contents_sex img.button_on, #main #contents_sex img.button_off,
  #main #contents_age img.button_on, #main #contents_age img.button_off {
    width: 100%;
    margin: 0;
    float: none;
  }
  /* チェック印: 旧値 top:10px/left:-135px（固定px設計の名残）を%基準へ */
  #main #contents_sex img.check_button_1, #main #contents_sex img.check_button_2,
  #main #contents_age img.check_button_3, #main #contents_age img.check_button_4,
  #main #contents_age img.check_button_5, #main #contents_age img.check_button_6,
  #main #contents_age img.check_button_7 {
    width: 20%;
  }
  #main #contents_sex .question_1 .check_button_1,
  #main #contents_sex .question_2 .check_button_2,
  #main #contents_age .question_3 .check_button_3,
  #main #contents_age .question_4 .check_button_4,
  #main #contents_age .question_5 .check_button_5,
  #main #contents_age .question_6 .check_button_6,
  #main #contents_age .question_7 .check_button_7 {
    top: 10%;
    left: 5%;
  }

  /* --- 項番3(1)(2): 質問2以降。固定高200pxで4択目が隠れる+チェックずれ --- */
  #main #contents {
    height: auto;
    min-height: 200px;
    padding-bottom: 8px;
    margin: 0 10px;
  }
  #main #contents li {
    width: 97%;
    float: none;
  }
  #main #contents img.button_on, #main #contents img.button_off {
    width: 100%;
  }
  #main #contents .question_1 .check_button_1,
  #main #contents .question_2 .check_button_2,
  #main #contents .question_3 .check_button_3,
  #main #contents .question_4 .check_button_4 {
    width: 9%;
    top: 14%;
    left: 2.5%;
  }

  /* --- 項番2(4): 進捗行が右にあふれ「次へ」が欠ける --- */
  #main #progress {
    width: auto;
    margin: 10px 8px 0;
  }
  #main #progress #progress_bar {
    width: 50%;
  }

  /* --- 項番1: トップの言語選択ボタン内に縮小ボタンが二重表示
         （#kintarou img 15% が背景画像ボタンの上に重なっていた）--- */
  #main_top #kintarou {
    width: 100%;
    height: auto;
    min-height: 80px;
    background-size: 18% auto;
  }
  #main_top #kintarou .btn img, #main_top #kintarou .btn_en img,
  #main_top #kintarou .btn_cn img, #main_top #kintarou .btn_ko img,
  #main_top #kintarou .btn_tw img {
    width: auto;
    height: auto;
    max-width: 96%;
  }

  /* --- 項番4: 結果ページ「解説を読む」の矢印と文字の重なり --- */
  #main_result #btn_commentary .btn_txt_off,
  #main_result #btn_commentary .btn_txt_on {
    left: 28%;
  }

  /* --- 項番6(1): 解説の本文が右境界からあふれる（width:100%+左右margin20pxの合算）--- */
  #main_advice_shou #result_shou #result_text {
    width: auto;
  }
  /* --- 項番6(3): 「判定結果に戻る」ボタンが小さい --- */
  #main_advice_shou #advice img.btn_to_result_off,
  #main_advice_shou #advice img.btn_to_result_on {
    width: 44%;
  }

  /* --- 項番8: ヘッダーイラストが質問文に被って文字が読めない（SP）--- */
  #main #title {
    padding-right: 28%;
  }
  #main #title_illust {
    left: auto;
    right: 2%;
  }
  #main_advice_shou #title {
    padding-right: 25%;
  }

  #main_advice_shou #shokuzai_contents #row_shokuzai .shokuzai {
    width: auto;
    padding: 0 12px;
  }

  #main_advice_shou #advice #btn_back img.btn_to_result_off,
  #main_advice_shou #advice #btn_back img.btn_to_result_on {
    width: 100%;
  }

  #main_top #choose_language {
    left: 0;
    width: 100%;
    border-radius: 0;
  }
  #main_top #choose_language.open + p.btn,
  #main_top #choose_language.open + p[class^='btn_'] {
    margin-top: 85px;
    position: relative;
    z-index: 100000;
  }

  #main_top #choose_language:not(.open) + p.btn,
  #main_top #choose_language:not(.open) + p[class^='btn_'] {
    background-image: none;
  }
}