@charset "utf-8";
/* ==========================================================================
   TOPY AGENCY — small-screen stylesheet
   Written from scratch by IKDO (2026-09).
   Loaded last (after site.css) so it can reflow page-specific blocks too.
   Selectors mirror the ones in style.css so these rules win by order.
   ========================================================================== */

@media (max-width: 768px) {

  :root { --gutter: 3%; }

  #global_nav .show_sp { display: block !important; }

  /* ---------- header: fixed bar with logo + menu button ------------------ */
  #header {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 999;
    width: 100%;
    padding: 4vw;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
  }
  #header h1 { width: 64vw; height: 4.4vw; margin: 0; background-size: contain; }
  #header .header_list,
  #googlecustomserch,
  #wrapper .maincopy { display: none; }

  #header .menu_icon {
    display: flex;
    place-items: center;
    place-content: center;
    width: 7.6vw;
    height: 6.7vw;
    cursor: pointer;
  }
  #header .menu_icon_in,
  #header .menu-trigger {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }
  #header .menu_icon_in i {
    position: absolute;
    inset: 2.3vw auto auto 0;
    width: 100%;
    color: var(--c-accent);
    text-align: center;
    font-size: 2.1vw;
    font-style: normal;
    line-height: 1;
    transition: opacity .3s;
  }
  #header .menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: .4vw;
    background: var(--c-accent);
    transition: transform .4s, opacity .4s;
  }
  #header .menu-trigger span:first-child { top: 0; }
  #header .menu-trigger span:nth-child(2) { top: 1.1vw; opacity: 0; }
  #header .menu-trigger span:last-child { bottom: 0; }
  #header .menu_icon.active :is(i) { opacity: 0; }
  #header .menu_icon.active .menu-trigger span:first-child { transform: translateY(3.2vw) rotate(-45deg); }
  #header .menu_icon.active .menu-trigger span:last-child  { transform: translateY(-3.2vw) rotate(45deg); }

  /* ---------- global nav: text drawer (height is driven by mobile.js) ----- */
  #global_nav {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 998;
    display: block;
    width: 100%;
    height: 0;
    overflow: hidden;
    background: #fff;
    transition: top .3s ease, height .3s ease;
  }
  #global_nav li { padding-block: 1.5vw; }
  #global_nav li a {
    display: block;
    width: 100%;
    height: auto;
    padding-block: 1.5vw;
    color: #000;
    text-align: center;
    text-indent: 0;
    white-space: normal;
    font-size: 4vw;
    line-height: 1.5;
    background: none;
  }

  /* ---------- frame ------------------------------------------------------ */
  #tpath { width: 100%; padding-inline: 1.5vw; box-sizing: border-box; }
  #wrapper,
  :is(.index_top, .hoken_top) #wrapper { width: 100% !important; }
  #wrapper img { max-width: 100%; height: auto; width: auto; }
  #wrapper .keyvisual { position: relative; z-index: 1; }

  .theme_insurance { background-position: center 25vw; }

  #maincontents,
  #lcontents,
  :is(.blog, .blog_list) #maincontents,
  .mono_page #maincontents.notmenuwide {
    float: none;
    box-sizing: border-box;
    width: calc(100% - var(--gutter) * 2);
    margin: 3.2vw var(--gutter) .8em;
  }
  .theme_hoken :is(#maincontents, #lcontents) { top: 0; margin-bottom: 0; }

  .mono_page #maincontents > h1 { font-size: 4.55vw; }
  .mono_page #maincontents .section h2 { margin: 0 0 .9em; font-size: 3.9625vw; }
  .mono_page #maincontents .section :is(.copyonly, .news_only) { margin-inline: 15px; }
  .mono_page #maincontents .section table { margin-top: 15px; width: 100% !important; }
  #lcontents .subnav :is(.individual_plan, .business_plan) { background-position: 3% center; }

  /* ---------- top page / insurance top ---------------------------------- */
  .index_top #img_box { width: 100%; height: 49.2vw; }
  .index_top #img_box img { width: 100%; }

  .titlewrap { flex-direction: column; align-items: center; }
  :is(.index_top, .hoken_top) .titlewrap { --lift: 0; }
  .hoken_top .titlewrap { --lift: 2.4vw; }

  .info,
  .info > ul { float: none; width: 100%; }
  .info > ul li span { width: 100%; display: block; }
  .info > ul li p { margin-left: 0; }

  .banner_area {
    float: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    margin-left: 0;
    padding-inline: 3.2vw;
  }
  .banner_area .banner { width: 100%; margin: 1.5vw 0 0; text-align: center; }
  .banner_area .banner a { display: inline-block; }

  /* ---------- footer ---------------------------------------------------- */
  #footer .wrap { flex-wrap: wrap; align-items: stretch; box-sizing: border-box; width: 100%; }
  #footer .wrap .section { box-sizing: border-box; width: 50%; }
  #footer .wrap dt { font-size: 3.2vw; }
  #footer .wrap dd li { font-size: 2.6vw; }
  #to_top,
  .footerboxwrap { width: auto; }
  .footerboxwrap p a { line-height: 2; white-space: nowrap; }

  /* ---------- redirect page ---------------------------------------------- */
  .jump #maincontents {
    top: 0;
    width: calc(100% - var(--gutter) * 2) !important;
    margin: 9.6vw var(--gutter) 6.4vw;
    padding: 20px;
  }
  .jump #maincontents .section { margin-left: 0; }
  .jump #maincontents ul { padding-left: 0; justify-content: center; }

  /* ---------- forms ------------------------------------------------------ */
  .form #maincontents.contact { margin-top: 405px; }
  .form #wrapper { margin-bottom: 70px; }
  .form form { width: 100%; }
  .form #maincontents fieldset { box-sizing: border-box; padding: 3vw; }
  .form form label > span { float: none; display: block; width: 100%; text-align: left; }
  .form :is(.inputtext, .inputtextarea, .inputselect, .inputtexttel, .inputradio, .inputcheck) label,
  .form .inputtextmail { float: none; width: 100%; }
  .form :is(.inputradio, .inputcheck, .inputtexttel) label + span { width: 100%; }
  .form .inputradio label + span label { display: block; }
  .form .inputtextzip label { clear: both; }
  .form :is(input[type="text"], input[type="email"], textarea) { width: 100%; }
  .form .inputtextzip .form_zip_0 { width: 25% !important; }
  .form .inputtextzip .form_zip_1 { width: 50% !important; }
  .form form :is(input, textarea) + .error,
  .form #mailError { margin-left: 0; width: auto; }
  .form .common_btn li em { padding-inline: 2.4vw; display: block; }
  .form .common_btn :is(button, #submitBtn) { display: block; margin: 20px auto 0; }

  /* ---------- news list --------------------------------------------------- */
  .blog_list #maincontents .section ul { margin: 0 1em; }
  .blog_list #maincontents .section ul li { width: auto; }

  /* ---------- page-specific blocks from site.css ------------------------- */
  #wrapper :is(p.faq_q, p.faq_a) img { max-width: 33px; }

  div:is(.designBox, .designLeft, .designRight, .packageBox, .packageLeft, .packageRight,
         .meritsArea, .insuranceCompanyName, .safetyColumn03RightInner, .safetyColumn04LeftInner),
  div.safetyColumn02 div.safetyRight,
  div.safetyColumn03 div.safetyColumn03Right,
  div.safetyColumn04 div.safetyColumn04Left { width: 100%; }

  div:is(.designRight, .packageRight) { margin-top: 1.5vw; }
  div.packageLeft { text-align: center; }
  div:is(.designLeft, .designRight) img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    margin: auto;
  }

  div:is(.companyTopInner, .groupTopInner) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    margin-left: 0;
  }
  div.companyTopInner { padding: 3.2vw; }
  div.groupTopInner { padding-block: 3vw; padding-inline: 0; }
  div:is(.companyTopPanel, .groupTopPanel) { text-align: center; }
  div:is(.companyTopPanel, .groupTopPanel, .jclickAreaLeft) { max-width: 100%; }

  div.meritsAreaRight { width: calc(100% - 100px); }

  div:is(.groupContactBanner, .groupContactBanner2) {
    width: 100%;
    padding: 200px 0 30px;
    background-size: 145% auto;
    background-position: left top;
  }
  div.contactBannerInfo,
  div.groupContactBanner2 p.contact_sub {
    inset-block-start: 0;
    inset-inline-start: 0;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 30px;
    padding-inline: 3vw;
  }
  div.contactBannerInfo p { margin-block-end: 30px; }

  div.insuranceCompanyLink { display: flex; flex-wrap: wrap; }
  div.insuranceCompanyLink :is(div.setsumei, div.omitsumori) { position: relative; inset-block-start: 0; inset-inline-end: 0; }
  div.insuranceCompanyLink div.omitsumori { margin-inline-start: 10px; }

  div.jclickAreaLeft p { margin-inline: 10px; }

  .mono_page #maincontents .section #monopage_2 strong {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .mono_page #maincontents .section #monopage_2 strong br { display: none; }
  .mono_page #maincontents .section #monopage_2 strong a { display: inline-block; margin-top: 10px; }
}