/* Corrections for layout bugs on the live site. Desktop (1440) keeps the theme sizes. */

img, video, table, pre { max-width: 100%; }
img, video { height: auto; }

.news_txt_box,
.case_contents_txt,
.policy_inner,
.greeting_txt_box,
.emdash-html-block,
.profile_txt,
.advantage_text,
.service_box_txt,
.answer_txt {
  overflow-wrap: anywhere;
}
pre, pre.moz-quote-pre { white-space: pre-wrap; overflow-wrap: anywhere; }

.news_txt_box img,
.case_contents_txt img,
.emdash-html-block img,
.policy_inner img,
.greeting_txt_box img {
  max-width: 100%;
  height: auto;
}

.news_txt_box table,
.case_contents_txt table,
.emdash-html-block table,
.policy_inner table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

/* YouTube: bare iframes in imported HTML, and the template wrapper. */
.youtube-frame {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 24px auto;
  aspect-ratio: 16 / 9;
}
.youtube-frame iframe,
.entry iframe[src*="youtube"],
.entry iframe[src*="youtu.be"],
.news_txt_box iframe[src*="youtube"],
.news_txt_box iframe[src*="youtu.be"],
.case_contents_txt iframe[src*="youtube"],
.case_contents_txt iframe[src*="youtu.be"],
.emdash-html-block iframe[src*="youtube"],
.emdash-html-block iframe[src*="youtu.be"],
.case_contents_movie iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 24px auto;
  border: 0;
  position: static;
  left: auto;
  right: auto;
  top: auto;
  box-sizing: border-box;
}
.youtube-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
}

/* Recruit photo row is 1432px with a negative margin, so it sticks out at 1440 and below. */
.recruit_page { overflow-x: clip; }
@media (min-width: 1024px) {
  .recruit_img_box { max-width: calc(100% - 32px); box-sizing: border-box; }
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.ham_nav_wrapper { right: 0; transform: translateX(110%); }
.ham_nav_wrapper.panelactive { right: 0; transform: translateX(0); }

/* Fixed widths that are wider than a 1024px window (scrollbar makes the layout ~1009px).
   Below 1024 the theme's own tablet and SP rules already fit, as on the live site. */
@media (min-width: 1024px) and (max-width: 1200px) {
  .section_header_inner,
  .section_contents_inner,
  .advantage_box,
  .resources_required_box,
  .recruit_eyechach,
  .company_profile_block,
  .history_block,
  .greeting_txt_wrapper,
  .tab_area {
    width: 100%;
    max-width: calc(100% - 32px);
    box-sizing: border-box;
  }
  .advantage_box { flex-wrap: wrap; justify-content: center; gap: 16px; padding: 24px; }
  .advantage_img, .advantage_img img { width: min(568px, 100%); height: auto; }
}

/* Arrows sit outside the 1000px frame. 1280px itself keeps that frame (the theme's PC width). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .single_case_slider .slick-prev,
  .works_slider .slick-prev { left: 8px; }
  .single_case_slider .slick-next,
  .works_slider .slick-next { right: 8px; }
}

/* Tablet (601-1023): the theme keeps two 1000px-wide blocks, so the live site scrolls sideways
   on case and news pages. Only those two are narrowed; everything else is the theme's tablet layout. */
@media (min-width: 601px) and (max-width: 1023px) {
  .single_case_contents {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    padding-inline: 16px;
    box-sizing: border-box;
  }
  .case_header, .case_contents_box, .case_flex_txt { width: auto; max-width: 100%; min-width: 0; }
  .case_navi_box, .case_navi_box .ac-parent { width: 100%; max-width: 100%; }
  .single_case_slider .slick-prev,
  .works_slider .slick-prev { left: 8px; }
  .single_case_slider .slick-next,
  .works_slider .slick-next { right: 8px; }
  .single_contents { width: min(1000px, 100%); padding: 40px 16px; margin-inline: auto; box-sizing: border-box; }
  .singlepage_pagenation { width: 100%; max-width: 100%; box-sizing: border-box; padding-inline: 16px; }
  .single_prev, .single_next { width: calc(50% - 8px); max-width: 100%; height: auto; }
  .news_img, .news_img img { width: 100%; height: auto; }
}

/* Keep the case nav at 300px from 1280 up. Below that, stack it so the labels do not collapse. */
@media (min-width: 1280px) and (max-width: 1399px) {
  .works_inner {
    width: 100%;
    padding-inline: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
  }
  .works_navi { flex: 0 0 300px; width: 300px; max-width: 300px; }
  .works_contents { flex: 1 1 auto; width: auto; min-width: 0; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .works_inner { width: 100%; flex-direction: column; align-items: stretch; padding-inline: 16px; box-sizing: border-box; }
  .works_navi, .works_contents, .case_navi_box, .case_contents_box, .case_navi_box .ac-parent { width: 100%; max-width: 100%; flex: none; }
  .single_case_contents {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
  .case_header, .case_contents_box, .case_flex_txt { width: auto; max-width: 100%; min-width: 0; }
  .post_archive_box { width: calc(50% - 12px); max-width: 100%; }
  /* The theme crops cards to 487x326 / 573x383 (3:2). Keep that crop while the width flexes. */
  .post_img, .post_img img { width: 100%; max-width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
}
/* ヒーローはテーマの高さ 669px 固定のまま（旧サイトと同じ。高さが先に決まるので CLS も出ない）。
   slick 初期化前の2枚目以降は畳む。 */
.eyechach_slider:not(.slick-initialized) .slider_img:not(:first-child) {
  display: none;
}

/* 採用ヒーローは CSS 背景ではなく先に読める img。 */
.recruit_title_block {
  background-image: none;
}
.recruit_title_block > picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}
.recruit_title_photo,
.recruit_title_block > picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}
@media screen and (max-width: 1023px) {
  .recruit_title_block > picture { overflow: hidden; }
  .recruit_title_photo,
  .recruit_title_block > picture img {
    width: 450%;
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: fill;
    object-position: left top;
  }
}
.recruit_title_inner,
.recruit_stitle_bottom {
  position: relative;
  z-index: 1;
}
.title_right_img { z-index: 1; }

.yt-facade,
.yt-facade-frame,
.youtube-frame iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 24px auto;
  border: 0;
}
.youtube-frame .yt-facade,
.youtube-frame .yt-facade-frame,
.youtube-frame iframe {
  margin: 0;
}
.yt-facade {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}
.yt-facade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.yt-facade-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 48px;
  margin: -24px 0 0 -34px;
  border-radius: 12px;
  background: #ff0000;
  transition: transform 0.15s ease, background 0.15s ease;
}
.yt-facade:hover .yt-facade-play,
.yt-facade:focus-visible .yt-facade-play {
  background: #cc0000;
  transform: scale(1.08);
}
.yt-facade-play::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 16px auto 0;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #fff;
}
.yt-facade:focus-visible {
  outline: 3px solid #0057b8;
  outline-offset: 2px;
}
.youtube-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube-frame .yt-facade,
.youtube-frame .yt-facade-frame,
.youtube-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pager-icon { display: block; }

/* 変換画像は picture で包む。箱は作らず、img が旧サイトと同じ位置で並ぶ（横並び・はみ出し指定もそのまま効く）。 */
picture { display: contents; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* スマホのヒーローは slides_sp。テーマの SP 幅（600px）に合わせる。管理画面の画像が空なら出さない。 */
.eyechach_slider_sp { display: none; }
@media screen and (max-width: 600px) {
  .eyechach_slider_pc { display: none; }
  .eyechach_slider_sp { display: block; }
}

.service_menu_box { height: auto; min-height: 286px; }
.service_menu_txt { height: auto; min-height: 38px; }
.eyechach_txt_box { height: auto; min-height: 264px; }
.works_slider .slick-slide { height: auto !important; }
/* ポリシーの問い合わせ番号。二重ラップを外したあとも 30px の青を保つ。 */
.policy_contact_no,
.policy_contact_no2,
.policy_contact_no a,
.policy_contact_no2 a,
.tel_fax_txt,
.tel_fax_txt a {
  font-size: 30px;
  color: #0057B8;
}
.f_company_address {
  line-height: 14px;
}

/* ページ送りの矢印は SVG（currentColor）。旧のアイコンフォントと同じ色にする。 */
.pagenation_top a { color: #0057B8; }
.pagenation_last a { color: #fff; }

/* 旧サイトのお知らせの YouTube 埋め込みは 500px 幅（左寄せ）。 */
.news_txt_box .yt-facade,
.news_txt_box .yt-facade-frame {
  max-width: 500px;
  margin-left: 0;
}

/* 送信中のボタン（二度押し防止）。旧サイトには無い。 */
.contact_form input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: wait;
}