/* DESIGNALIKIE top page: responsive presentation only.
   Existing desktop and mobile item groups are retained so their links remain unchanged. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; width: 100%; max-width: 100%; overflow-x: clip; }
body { margin: 0; width: 100%; max-width: 100%; overflow-x: clip; }
#container { max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; }
#contents { min-width: 0; width: 100%; max-width: 1140px; margin-left: auto; margin-right: auto; padding: 20px 24px 48px; float: none; }
#contents > h1, .top-intro-desktop, .top-intro-mobile { max-width: 900px; }
.top-intro-mobile { display: none; }
.top-intro-desktop { display: block; }
#contents > h1 { line-height: 1.45; }
.top-intro-desktop p, .top-intro-mobile p { line-height: 1.9; }
.mobile-icon-list { display: none; }
.desktop-content-list { display: block; }
.desktop-content-list #mainArea { width: 100%; float: none; margin: 0; padding: 0; }
.desktop-content-list .four_block { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; padding: 0; margin: 18px 0 38px; list-style: none; }
.desktop-content-list .four_block::before, .desktop-content-list .four_block::after { content: none; }
.desktop-content-list .four_block > li { width: auto; min-width: 0; float: none; margin: 0; padding: 0; list-style: none; }
.desktop-content-list .four_block > li img { max-width: 100%; height: auto; }
.desktop-content-list .four_block > li h4, .desktop-content-list .four_block > li p { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  #contents { padding: 18px 20px 40px; }
  .desktop-content-list .four_block { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
}
@media (max-width: 640px) {
  #container, #contents, #leftArea, #mainArea { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  /* Legacy shared sections may have fixed desktop width; keep the viewport stable. */
  #container > *, #contents > *, .mobile-icon-list, .mobile-icon-list * { max-width: 100%; }
  .top-intro-desktop { display: none !important; }
  .top-intro-mobile { display: block !important; }
  img, iframe { max-width: 100%; }
  /* The actual header logo selector needs confirmation from header_dak.php. */
  #contents { margin: 0 !important; padding: 20px 15px 40px !important; }
  #contents > h1 { font-size: clamp(23px, 6vw, 30px); margin: 0 0 18px; }
  .top-intro-mobile p { font-size: 14px; line-height: 1.85; margin: 0 0 12px; overflow-wrap: anywhere; }
  .desktop-content-list { display: none !important; }
  .mobile-icon-list { display: block !important; }
  .mobile-icon-list #leftArea { float: none !important; margin: 20px 0 0 !important; padding: 0 !important; }
  .mobile-icon-list .top_menu_block { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px 10px; margin: 0 !important; padding: 0 !important; list-style: none; }
  .mobile-icon-list .top_menu_block::before, .mobile-icon-list .top_menu_block::after { content: none; }
  .mobile-icon-list .top_menu_block > li { display: block; float: none !important; width: auto !important; min-width: 0; margin: 0 !important; padding: 0 !important; text-align: center; list-style: none; }
  .mobile-icon-list .top_menu_block > li > a { display: block; width: 100%; }
  .mobile-icon-list .top_menu_block > li > a img { display: block; width: 100%; max-width: 150px; height: auto; margin: 0 auto; }
  .mobile-icon-list .top_menu_block > li h4 { display: block !important; margin: 6px 0 0 !important; padding: 0 !important; font-size: 12px; line-height: 1.45; font-weight: 500; overflow-wrap: anywhere; }
  .mobile-icon-list .top_menu_block > li h4 a { display: block; text-decoration: none; color: inherit; }
}
@media (max-width: 340px) {
  .mobile-icon-list .top_menu_block { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Top-page header: logo only, centrally aligned */
#headerArea { width: 100%; max-width: 960px; min-width: 0; margin: 0 auto 10px; padding: 9px 12px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; overflow: visible; }
#headerArea #logoBlock { width: auto; max-width: 100%; margin: 0; padding: 0; float: none; text-align: center; }
#headerArea #logoBlock a { display: inline-block; }
#headerArea #logoBlock img { display: block; max-width: 100%; height: auto; }
#footerAreaBack { width: 100%; max-width: 100%; }
#footerArea { width: 100%; max-width: 960px; box-sizing: border-box; padding: 14px 16px; }
#footerArea ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0; }
#footerArea ul li, #footerArea ul li.last { float: none; width: auto; padding: 0 12px; border-right: 1px solid #555; }
#footerArea ul li:last-child { border-right: none; }
#footerArea ul li a { width: auto; white-space: nowrap; }
#copyrightBlock { text-align: center; margin: 10px 0 0; padding: 10px 0; }
@media (max-width: 640px) {
  .mobile-service-group { margin: 24px 0 30px; }
  .mobile-service-group > h2 { color: #999; font-size: 12px; font-weight: 500; letter-spacing: .08em; line-height: 1.5; margin: 0 0 14px; padding: 0 0 8px; border-bottom: 1px solid #eee; }
  .mobile-icon-list .mobile-service-group .top_menu_block { margin: 0 !important; }
  #headerArea { width: 100%; border-radius: 0; }
  #footerArea { padding: 18px 12px; }
  #footerArea ul li, #footerArea ul li.last { padding: 0 8px; }
  #footerArea ul li a { font-size: 12px; }
}