@charset "utf-8";
/* takano-hw.com 介護ショップ（/heartworks/shop/）スマートフォン対応 2026-10
   shop.css（幅1080px固定・@media なし）の上に重ねる。PC（幅1080px以上）の見た目は変えない。
   例外＝不具合の修正として全幅に効かせるもの（下の「不具合修正」）。
   正本: ヘルスケア部門_スマートフォン対応/shop_sp/src/heartworks_shop_sp.css */

/* ---- 不具合修正（全幅）: 「介護保険ご利用の流れ」の ▼（.nagare_sankaku）が transform: scale(2.4) で
   本文の外まで広がり、PC でも横スクロールが出ていた（scrollWidth 1871px @1280px）。
   要素を中身の幅に縮めて中央寄せにし、本文は横方向のはみ出しを描画しない */
.nagare_sankaku { display: table; width: auto; margin-left: auto; margin-right: auto; padding-left: 1em; padding-right: 1em; }
.contens { overflow-x: clip; }
/* ハンバーガー（JS が .primary_header に足す）は PC では出さない */
.hwshop-menu-li { display: none; }

/* ---- SEO（全幅）: ヘッダーの説明文は下層ページでは <p class="hw-lead">（旧 h1）、本文の題名は <h1 class="hw-ttl">（旧 h2）。見た目は元の h1 / .contens h2 と同じ ---- */
.primary_header .hw-lead { margin: 0; font-weight: 500; font-style: normal; color: #333333; font-size: 90%; text-align: left; float: left; padding: 2rem 1.5rem; line-height: 1.8; }
.contens h1.hw-ttl { float: none; margin: 0; padding: 0.2rem 0.5rem; color: #333333; font-size: 140%; font-weight: 600; font-style: normal; text-align: left; line-height: 1.8; border-bottom: dotted 3px #f46708; }

@media (max-width: 1079px) {
  html { overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }
  .container { width: 100%; }
  img { max-width: 100%; height: auto; }
  /* 元 CSS は display:table-cell でリストの「・」を消していた。ブロックに戻す箇所で出ないようにする */
  .primary_header li, .menu li, .main_img_area li, .btn_area li, .info_area li, .shop_area li, .inquiry_area li, .foot_navi li, .footer li, .contens_gly li { list-style: none; }

  /* ---- ヘッダー: 固定をやめ、ロゴ＋お問い合わせ＋メニューボタンの1行に。説明文（h1）はその下 ---- */
  .header_kotei { position: static; width: 100%; }
  .main_img_area, .pankuzu { margin-top: 0; }
  .primary_header { display: flex; flex-wrap: wrap; align-items: center; padding: 6px 10px 4px; box-sizing: border-box; gap: 0 8px; }
  .primary_header > li { display: block; list-style: none; }
  .primary_header #logo { order: 0; padding: 0; flex: 0 0 auto; }
  .primary_header #logo img { height: 44px; width: auto; }
  .primary_header #toi { order: 1; margin-left: auto; text-align: right; }
  .primary_header #toi img { height: 48px; width: auto; }
  .hwshop-menu-li { display: block; order: 2; }
  .primary_header #txt { order: 3; flex: 0 0 100%; }
  h1, .primary_header .hw-lead { float: none; padding: 6px 4px 4px; font-size: 70%; line-height: 1.5; text-align: center; }
  h1 br, .primary_header .hw-lead br { display: none; }
  .contens h1.hw-ttl { padding: 0.2rem 0.5rem; font-size: 125%; text-align: left; line-height: 1.8; }

  /* ---- グローバルメニュー: ハンバーガーで開閉する縦並び。JS が無いときは常に表示 ---- */
  .global_menu { display: none; }
  html:not(.hwshop-js) .global_menu, html.hwshop-open .global_menu { display: block; }
  .menu { height: auto; max-width: none; }
  .menu > li { float: none; width: 100% !important; text-align: left; line-height: 1.4; font-size: 100%; letter-spacing: 0.5px; border-top: 1px solid rgba(255, 255, 255, .45); }
  .menu > li[style*="width: 1px"] { display: none; }
  .menu > li a { padding: 12px 16px; }
  .menu > li a img { vertical-align: middle; padding-bottom: 0 !important; }
  .menu > li.menu__single { position: static; }
  /* 元 CSS の li.menu__single ul.menu__second-level{position:absolute}（詳細度 0,2,2）に勝つよう .menu を付ける */
  .menu li.menu__single ul.menu__second-level, .menu li.menu__single:hover ul.menu__second-level { visibility: visible; opacity: 1; position: static; top: auto; width: auto; background: #fff; line-height: 1.4; font-size: 95%; transition: none; }
  .menu__second-level li { border-top: 1px solid #f3d9c3; }
  .menu__second-level li a { padding: 10px 16px 10px 32px; color: #e3770f; }
  .hwshop-menu-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 54px; height: 48px; padding: 0; border: 0; border-radius: 6px; background: #f46708; color: #fff; font: 700 10px/1 'Noto Sans JP', sans-serif; cursor: pointer; }
  .hwshop-menu-btn .bars { display: block; width: 22px; height: 2px; margin: 7px 0 10px; background: #fff; box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff; }
  html.hwshop-open .hwshop-menu-btn { background: #333; }

  /* ---- トップ: メインイメージ ---- */
  .main_img_area ul, .main_img_area ul li { display: block; width: 100%; }
  .main_backimg { width: 100%; height: auto; background-size: cover; }
  .bg_slide { padding-top: 0; height: 220px; background-size: auto 220px; animation: hwshop_slide 30s linear infinite; }
  @keyframes hwshop_slide { 0% { background-position: 0 0; } 100% { background-position: -1884px 0; } }
  .h2_txt { padding: 1.2rem 1.2rem 0.4rem; font-size: 170%; line-height: 1.3; }
  .h3_txt { padding: 0 1.2rem 1.4rem; font-size: 100%; line-height: 1.7; }

  /* ---- トップ: 3つのボタン ---- */
  .btn_area { display: block; width: 90%; margin: -3rem auto 1rem; }
  .btn_area li { display: block; padding: 0 0 1.6rem; }
  .btn_area li:last-child { padding-bottom: 0.6rem; }
  .btn { line-height: 1.5; }

  /* ---- トップ: お知らせ・バナー ---- */
  .info_area { padding: 2rem 0; }
  .info_area ul.info_sotowaku { display: block; width: 92%; }
  .info_area ul.info_sotowaku > li { display: block; width: 100% !important; }
  .info_area ul.info_sotowaku > li[style*="10%"] { display: none; }
  .item > div { flex-wrap: wrap; box-sizing: border-box; }
  .item > div > div[style*="380px"] { width: 100% !important; flex: 0 0 100%; margin-top: 4px; }
  .info_banner { text-align: center; margin-top: 1.5rem; }
  .info_banner img { max-width: 260px; }

  /* ---- トップ: 店舗情報 ---- */
  .shop_area { padding: 2rem 0; }
  .shop_dot { width: 92%; }
  .shop_sotowaku { display: block; width: 92%; margin-top: 1rem; }
  .shop_sotowaku > li { display: block; width: 100% !important; padding: 15px 0 5px; }
  .shop_sotowaku > li[style*="4%"] { display: none; }
  .shop_sirowaku ul, .shop_sirowaku ul li { display: block; width: 100% !important; }
  .shop_sirowaku ul li { padding: 8px 4px; line-height: 1.6; }
  .shop_sirowaku ul li:first-child { text-align: center; }
  .shop_sirowaku ul li:first-child img { max-width: 300px; }
  .shop_orgwaku, .shop_sirowaku .shop_orgwaku[style*="60%"] { width: auto !important; font-size: 95%; line-height: 1.4; padding: 6px; }
  .shop_sirowaku { box-sizing: border-box; }
  .shop_yokohama { width: 92%; margin-top: 1.2rem; }
  .shop_yokohama li { width: 100% !important; padding-left: 4px; }

  /* ---- お問い合わせ（全ページ共通のフッター部品） ---- */
  .inquiry_area { padding: 1.5rem 0; }
  .inquiry_white { width: 94%; box-sizing: border-box; padding: 1rem 0.6rem; }
  .inquiry_mail { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; padding: 0.5rem 0.4rem; }
  .inquiry_mail li, .inquiry_mail li:last-child { display: block; width: auto !important; text-align: left; }
  .inquiry_mail li:first-child img { height: 36px; width: auto; padding: 0 0.6rem !important; }
  .inquiry_mail h3 { font-size: 100%; line-height: 1.3; }
  .inquiry_shop_area { display: block; width: 100%; margin-top: 1.2rem; }
  .inquiry_shop_area > li { display: block; width: 100% !important; margin-bottom: 1.4rem; }
  .inquiry_shop_area > li.inquiry_shop_cnt { display: none; }
  .inquiry_shop_area h3 { font-size: 90%; padding: 0.2rem 0.4rem; line-height: 1.4; }
  .inquiry_tel { margin-left: 0.5rem; }
  .inquiry_tel li[style*="55px"] { width: 44px !important; }
  .inquiry_tel li img { height: 24px; width: auto; }
  .inquiry_tel li[style*="font-size: 150%"] { font-size: 135% !important; }
  .inquiry_tel li[style*="font-size: 140%"] { font-size: 125% !important; }
  .inquiry_tel li[style*="font-size: 120%"] { font-size: 110% !important; }
  .inquiry_area a.hwshop-tel { color: #333; }
  .inquiry_white .mgl20 { margin-left: 0.5rem !important; }

  /* ---- フッターナビ・フッター ---- */
  .foot_navi { padding: 0.8rem 0; }
  .foot_navi ul { display: flex; flex-wrap: wrap; justify-content: center; }
  .foot_navi ul li { display: block; padding: 6px 10px; font-size: 90%; }
  .footer ul { display: block; }
  .footer ul > li { display: block; text-align: center; padding: 0 !important; }
  .footer ul > li[style*="padding: 0 20px"] { display: none; }
  .footer > ul > li:first-child img { max-width: 200px; }
  #footer_menu ul, .footer_menu ul { display: flex; justify-content: center; align-items: center; margin-top: 6px; }
  #footer_menu ul li, .footer_menu ul li { display: block; padding: 0 2px; }

  /* ---- 下層ページ: パンくず・本文 ---- */
  .pankuzu { width: 92%; padding: 0.8rem 0 0; font-size: 75%; }
  .contens { width: 92%; padding: 0.5rem 0 1rem; }
  .contens h2 { font-size: 125%; }
  .contens h3 { font-size: 110%; padding: 0.4rem 0.7rem; margin-top: 1.5rem; }
  .contens h4 { font-size: 100%; margin-top: 1.5rem; margin-left: 0; }
  .contens p { padding: 1rem 0.3rem; }
  .contens_gly { padding: 1.5rem 0.8rem; }
  .contens_gly2 { padding: 1rem; }
  .contens_gly ul, .contens_gly ul:first-child { display: flex; flex-wrap: wrap; gap: 1.4rem 4%; margin-top: 1.4rem; }
  .shadow_4box { display: block; width: 48%; box-sizing: border-box; }
  .shadow_4box_space { display: none; }
  .shadow_4box_txt { line-height: 1.5; }
  .list_contens-wrap { margin-top: 0; margin-left: 0.5rem; }
  .flexbox, .flexbox2, .shop-box { flex-direction: column; }
  .flexbox { margin-top: 0; }
  .shop-box { padding: 1rem 0; }
  .shop-box .flex-item { padding: 0; }
  .shop-box-txt { padding: 1rem 0 0; }
  .shop-box-txt h4 { margin-left: 0; }
  #content { max-width: 420px; }
  .nagare-box { flex-direction: column; margin-top: 0; padding: 0.5rem 0.2rem; }
  .nagare01, .nagare02, .nagare03, .nagare04, .nagare_plan { width: auto; margin: 0 0 6px; box-sizing: border-box; padding: 10px 14px; }
  .nagare_right { width: auto; box-sizing: border-box; padding: 12px; }
  .nagare_sankaku { margin-top: -8px; margin-bottom: 4px; transform: scale(1.8, 0.6); }
  .nagare_table, .gaiyou_table { width: 100%; margin: 20px 0 10px; font-size: 88%; }
  .nagare_table th, .nagare_table td, .gaiyou_table th, .gaiyou_table td { padding: 6px 4px; }
  .nagare_table th:first-child, .nagare_table td:first-child, .nagare_table td.txcent { white-space: nowrap; }
  .gaiyou_table th { width: 28%; }
  table.fsa_dl { width: 100%; }
  table.fsa_dl th, table.fsa_dl td { display: block; width: auto !important; box-sizing: border-box; }
  table.fsa_dl td input.wide, table.fsa_dl td input.small, table.fsa_dl td textarea.normal { width: 100%; box-sizing: border-box; }
  .contens iframe { max-width: 100%; }
  .hwshop-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0; }
  .hwshop-scroll > table { width: auto !important; min-width: 100%; margin: 0 !important; }
  .topics_body { padding: 10px 6px; }
  .dotlines { margin: 15px 4px; }
  .dotlines li { line-height: 1.6; }
  span.topicsdate { margin-right: 1em; }
  input, select, textarea { font-size: 16px; }
}

/* タブレット・幅の狭い PC ウィンドウ（768〜1079px）: ロゴと説明文を少し大きく */
@media (min-width: 768px) and (max-width: 1079px) {
  .primary_header { padding: 10px 16px 6px; }
  .primary_header #logo img { height: 60px; }
  .primary_header #toi img { height: 56px; }
  .hwshop-menu-btn { width: 60px; height: 56px; }
  h1 { font-size: 85%; }
}

@media (max-width: 480px) {
  .shadow_4box_head { font-size: 90%; letter-spacing: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .bg_slide { animation: none; }
}