/* User-approved lower-page mobile layout. Original PC, TOP and diagnostic assets are unchanged. */
@media screen and (max-width: 640px) {
  body[data-chio-static-sp] #wrap { overflow: visible; width: 100%; }
  body[data-chio-static-sp] h1.page_ttl { margin: 24px 16px; padding-left: 40px; font-size: 27px; height: auto; min-height: 40px; }
  body[data-chio-static-sp] #main { width: 100%; max-width: 100%; min-height: 0; margin-left: 0; padding: 0 16px; box-sizing: border-box; overflow-wrap: anywhere; }
  body[data-chio-static-sp] #main img { max-width: 100%; height: auto; }
  body[data-chio-static-sp] #main iframe[src*="youtube.com/embed/"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  body[data-chio-static-sp] #main audio { max-width: 100%; }
  body[data-chio-static-sp] .cts_box_bg { padding: 16px; box-sizing: border-box; }
  body[data-chio-static-sp] #header { position: relative; width: 100%; height: 78px; padding: 0; }
  body[data-chio-static-sp] #header #logo { top: 8px; left: 10px; width: 243px; height: 58px; }
  body[data-chio-static-sp] #header #logo a { width: 243px; height: 58px; background-image: url(../img/top/sp/logo.png); background-size: contain; }
  body[data-chio-static-sp] #header .nav-toggle { display: block; position: absolute; top: 22px; right: 16px; width: 30px; height: 25px; cursor: pointer; }
  body[data-chio-static-sp] #header nav { display: none; position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; padding: 64px 16px 24px; box-sizing: border-box; overflow-y: auto; z-index: 2000; }
  body[data-chio-static-sp] #header nav.chio-sp-open { display: block; }
  body[data-chio-static-sp] #header nav .nav-toggle { position: absolute; top: 22px; }
  body[data-chio-static-sp] #header nav ul li { height: auto; }
  body[data-chio-static-sp] #header nav ul li a { min-height: 44px; height: auto; }
  body[data-chio-static-sp] .news_detail h1.news_ttl { font-size: 20px; }
  body[data-chio-static-sp] .subnav { gap: 8px; }
  body[data-chio-static-sp] .subnav li { max-width: 100%; margin: 4px 0; }
  body[data-chio-static-sp] table { max-width: 100%; table-layout: auto; }
  body[data-chio-static-sp] table th, body[data-chio-static-sp] table td { padding: 6px; overflow-wrap: anywhere; }
  body[data-chio-static-sp] .book_list li { width: calc(50% - 16px); margin: 16px 8px; }
  body[data-chio-static-sp] .book_list .btn_buy { max-width: 100%; box-sizing: border-box; }
  body[data-chio-static-sp] .bd_img_area, body[data-chio-static-sp] .bd_txt_area { float: none; width: 100%; }
  body[data-chio-static-sp] .interview_box .fukidashi { width: 100%; box-sizing: border-box; float: none; }
  body[data-chio-static-sp] .interview_box .icon_area { float: none; margin: 12px 0; }
  body[data-chio-static-sp] .interview_box .fukidashi::before, body[data-chio-static-sp] .interview_box .fukidashi::after { content: none; }
  body[data-chio-static-sp] footer { padding: 24px 16px; box-sizing: border-box; }
  body[data-chio-static-sp] #copyright { overflow-wrap: anywhere; }
  body[data-chio-static-sp] #gotop { width: 44px; height: 44px; right: 12px; bottom: 12px; }
  body[data-chio-static-sp]#character #bx-pager { position: static; width: 100%; gap: 4px; margin-bottom: 16px; }
  body[data-chio-static-sp]#character #bx-pager a { width: 52px; margin: 2px; }
  body[data-chio-static-sp]#character #bx-pager a:hover img { border: 0; width: 100%; height: auto; }
  body[data-chio-static-sp]#character .main_chara { padding-top: 0; }
  body[data-chio-static-sp]#character .bx-wrapper { width: 100%; max-width: 100%; margin-bottom: 24px; }
  body[data-chio-static-sp]#character .bx-viewport { height: auto !important; aspect-ratio: 800 / 817; }
  body[data-chio-static-sp] .bx-wrapper .bx-prev { left: 0; }
  body[data-chio-static-sp] .bx-wrapper .bx-next { right: 0; }
  body[data-chio-static-sp] #cboxPrevious { left: 0; }
  body[data-chio-static-sp] #cboxNext { right: 0; }
  body[data-chio-static-sp]#story .bx-wrapper { width: 100%; max-width: 100%; height: auto; }
  body[data-chio-static-sp]#story .bx-wrapper .bx-viewport { height: auto !important; aspect-ratio: 700 / 400; }
  body[data-chio-static-sp]#story .bx-pager { width: 100%; gap: 6px; flex-wrap: wrap; }
  body[data-chio-static-sp]#story .bx-pager a { width: calc((100% - 24px) / 5); }
  body[data-chio-static-sp]#story .bx-pager img { width: 100%; }
  body[data-chio-static-sp]#story .txt_area .story_txt_box { float: none; width: 100%; margin-right: 0; }
  body[data-chio-static-sp]#story .cts_box_bg { margin-bottom: 48px; }
  body[data-chio-static-sp]#movie .movie_box { width: 100%; box-sizing: border-box; }
  body[data-chio-static-sp]#movie .movie_box iframe { width: 100%; height: auto; aspect-ratio: 640 / 390; }
  body[data-chio-static-sp]#onair .cts_box_bg .tbl_onair .repeat { padding-left: 6px; }
  body[data-chio-static-sp]#onair .cts_box_bg .base_tbl th { width: 30%; }
  body[data-chio-static-sp]#onair h2.page_ttl { font-size: 22px; height: auto; }
  body[data-chio-static-sp]#special .btn_link { max-width: 100%; height: auto; min-height: 44px; line-height: 1.5; padding: 10px; box-sizing: border-box; }
  body[data-chio-static-sp]#special #main table.txt-center > tbody > tr > td { display: block; width: 100% !important; padding: 16px 0; }
  body[data-chio-static-sp] #special_list img { margin-right: 0; }
}