@charset "UTF-8";
/* CSS Document */
/* タブレット（カンプなし。PCのレイアウトを縮め、窮屈になる所だけSPと同じ縦積みにする）。SPの数値は sp.css */
@media (max-width: 959px) {
  .pc-br {
    display: none;
  }
  .hero_catch .pc-br, .hero_license_text .pc-br, .top05_title .pc-br, .contact_lead .pc-br {
    display: inline;
  }
  /*////////////////ヘッダー・ハンバーガーメニュー/////////////*/
  .head_fix {
    display: none;
  }
  /* ロゴの上下の中心を、ヘッダーの高さの真ん中（ハンバーガーボタンの中心と同じ）にそろえる */
  .logo {
    top: calc(max(7.2rem, 10vw) / 2);
    left: 2.5vw;
    z-index: 160;
    gap: 1.4vw;
  }
  .head .logo {
    transform: translateY(-50%);
  }
  .logo_mark {
    width: 5.5vw;
  }
  .header_menu_btn {
    position: fixed;
    /* ヘッダーの高さ（ヒーロー写真の上の余白）の真ん中に、ボタンの中心を置く */
    top: calc(max(7.2rem, 10vw) / 2 - 25px);
    right: 2.5%;
    z-index: 200;
    display: block;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 5px;
    background-color: var(--b1);
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 1.5px;
    cursor: pointer;
    pointer-events: auto;
    transition: background-size 0.3s;
    &::before, &::after {
      content: '';
      position: absolute;
      left: 14px;
      width: 22px;
      height: 1.5px;
      background-color: #fff;
      transition: 0.3s;
    }
    &::before {
      top: 16px;
    }
    &::after {
      top: 32px;
    }
  }
  body.is-menu-open {
    overflow: hidden;
    .header_menu_btn {
      background-size: 0 1.5px;
      &::before {
        top: 24px;
        transform: rotate(45deg);
      }
      &::after {
        top: 24px;
        transform: rotate(-45deg);
      }
    }
    .header_nav {
      visibility: visible;
      transform: translateX(0);
      transition-delay: 0s;
    }
  }
  .header_nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 150;
    display: block;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: 14rem 10% 6rem;
    overflow-y: auto;
    background-color: var(--line);
    font-size: max(1.40rem, 0.79vw + 1.07rem);
    visibility: hidden;
    pointer-events: auto;
    transform: translateX(100%);
    transition: transform 0.4s ease, visibility 0s 0.4s;
  }
  .header_nav_list > li > a {
    display: block;
    padding-bottom: 0.9em;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.5;
    background-image: repeating-linear-gradient(to right, var(--black) 0 2px, transparent 2px 4px);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 1px;
  }
  .header_nav_list > li + li {
    margin-top: 1.4em;
  }
  .header_nav_sub {
    margin: 0.9em 0 0 1.45em;
    border-left: 2px dotted var(--black);
    li a {
      display: block;
      width: fit-content;
      padding: 0.7em 0.9em;
      font-weight: 500;
      letter-spacing: 0.1em;
      line-height: 1.5;
      background-image: repeating-linear-gradient(to right, var(--black) 0 2px, transparent 2px 4px);
      background-repeat: no-repeat;
      background-position: left bottom;
      background-size: 100% 1px;
    }
  }
  .header_nav_info {
    margin-top: 3em;
  }
  .header_nav_tel a {
    font-size: 1.71em;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.5;
  }
  .header_nav_time {
    margin-top: 0.5em;
    line-height: 1.5;
  }
  /*////////////////ヒーロー/////////////*/
  .top_hero {
    width: auto;
    /* 上の余白は、ハンバーガーボタン（下端60px）から10px以上あくように、最小72pxにする */
    margin: max(7.2rem, 10vw) 2.5% 0;
  }
  .hero_slides {
    border-radius: 10px;
  }
  /* 【試験中】フィルターなし。戻す場合は 左下 0.34 → 右上 0.1 の斜めグラデーション */
  .hero_pic::after {
    background: none;
  }
  /* 文字は、下の「昭和58年設立」の少し上から積み上げる（スライドごとに文字の量が違っても、許可番号と重ならない） */
  .hero_textbox {
    top: auto;
    bottom: calc(2.55vw + 8rem);
  }
  .hero_head {
    position: static;
    width: auto;
  }
  .hero_sub {
    max-width: 28em;
    margin-top: 2.45vw;
    white-space: normal;
  }
  /*////////////////共通：見出しを上に、縦線を左に（News〜Contact）/////////////*/
  .com_line, .top02, .top03, .top04, .contact {
    position: relative;
    display: block;
    .com_head {
      display: block;
      width: auto;
      &::after {
        display: none;
      }
    }
    /* 縦線は、スクロールで動く見出しの外（セクション）に置く */
    &::before {
      content: '';
      position: absolute;
      top: calc(1.17 * max(4.40rem, 6.5vw) + 1.8em);
      bottom: 0;
      left: calc(max(1.60rem, 0.21vw + 1.40rem) / 2 - 0.5px);
      border-left: 1px solid var(--black);
    }
  }
  .en_title {
    font-size: max(4.40rem, 6.5vw);
  }
  .top01 {
    margin-top: 6vw;
  }
  .top01_body {
    width: auto;
    margin-left: 7.9%;
  }
  .top01_body > .btn01 {
    margin-top: 2em;
  }
  /* Service */
  .top02_lead {
    width: auto;
    margin: 1.6em 0 0 7.9%;
  }
  .service_track {
    margin: 2em 0 0 7.9%;
  }
  .top02_btn {
    margin: 2.4em 0 0 7.9%;
  }
  .feature_list {
    margin: 3em 0 0 7.9%;
  }
  /* Works */
  .top03_lead {
    width: auto;
    margin: 1.6em 0 0 7.9%;
  }
  .top_works_list {
    width: auto;
    margin: 2.5em 0 0 7.9%;
    gap: 2vw;
  }
  .top03_btn {
    margin: 3em 0 0 7.9%;
  }
  /* About */
  .top04_catch {
    margin: 1.4em 0 0 7.9%;
    font-size: max(2.00rem, 3.6vw);
  }
  .top04_text {
    width: auto;
    max-width: 34em;
    margin: 1.6em 0 0 7.9%;
  }
  .top04_btn {
    margin: 2em 0 0 7.9%;
  }
  .top04_pic {
    display: block;
    width: 52%;
    margin: 3em 0 0 auto;
  }
  /* Recruit */
  .top05 {
    aspect-ratio: auto;
    min-height: max(42rem, 56vw);
  }
  .top05_inner {
    padding: 8vw 8%;
  }
  /* Contact */
  .contact_lead {
    margin: 1.6em 0 0 7.9%;
  }
  .contact_row {
    margin: 2.5em 0 0 7.9%;
    gap: 4vw;
  }
  /*////////////////フッター/////////////*/
  .footer-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 6vw;
    margin: 10vw 5% 0;
  }
  .footer-address {
    margin-top: 2.4em;
  }
  .footer-license {
    margin-top: 2.4em;
  }
  .foot_menu_wrap {
    display: flex;
    flex-flow: row wrap;
    gap: 1.6em 2.4em;
    margin-bottom: 0;
  }
  .foot_menu {
    display: contents;
  }
  .copy {
    margin-top: 14vw;
  }
  /*////////////////下層ページ共通/////////////*/
  .sub_hero {
    padding-top: max(12rem, 15vw);
  }
  .sub_title_ja {
    gap: 0.5em;
    font-size: 1.4rem;
    &::before {
      content: '';
      width: 2em;
    }
  }
  .breadcrumb {
    margin-top: 0.5em;
  }
  .sub_hero_pic {
    width: auto;
    margin: 2vw 2.4% 0;
  }
  .about_sec {
    position: relative;
    display: block;
    margin-bottom: max(12vw, 80px);
    .com_head {
      display: block;
      width: auto;
      &::after {
        display: none;
      }
    }
    &::before {
      content: '';
      position: absolute;
      top: calc(1.17 * max(4.40rem, 6.5vw) + 1.8em);
      bottom: 0;
      left: calc(max(1.60rem, 0.21vw + 1.40rem) / 2 - 0.5px);
      border-left: 1px solid var(--black);
    }
  }
  /* 青い帯（漏水調査のCheck）の中の縦線は白 */
  .leak_band .about_sec::before {
    border-left-color: #fff;
  }
  .news_sec::before, .works_sec::before, .contact_sec::before {
    top: 1.8em;
  }
  .about_sec .about_sec_body {
    margin: 2em 0 0 7.9%;
  }
  .about_company_pic {
    margin: 2em 0 0 7.9%;
  }
  /* 会社案内 */
  .about_lead {
    margin-top: max(6.25vw, 60px);
    margin-bottom: max(12vw, 60px);
  }
  .about_message_inner {
    gap: 3vw;
  }
  .about_license_top {
    gap: 3vw;
  }
  .page_nav {
    margin-bottom: 2em;
    gap: 0.8em 0.5em;
  }
  .page_nav a {
    font-size: 1.2rem;
    padding: 0.3em 0.8em;
  }
  .about_philosophy_words {
    margin-top: 1.4em;
  }
  .about_philosophy_text {
    margin-top: 1em;
  }
  /* 事業内容 */
  .svc_strength_intro {
    margin: 1.6em 0 0 7.9%;
  }
  .svc_flow {
    grid-template-columns: repeat(2, 1fr);
    margin: 2em 0 0 7.9%;
    gap: 3vw;
  }
  .svc_strength_note {
    margin: 2em 0 0 7.9%;
  }
  .svc_flow_item:not(:last-child)::after {
    display: none;
  }
  /* 加工機・漏水調査 */
  .flare_cards_3, .flare_cards_2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  }
  /* 施工実績・お知らせ */
  .works_list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 採用情報のヒーロー：文字は上下の真ん中あたり */
  .recruit_hero_text {
    top: 50%;
    transform: translateY(-50%);
  }

  /* 一覧のページ送り（施工実績・お知らせ）：上の余白を広めに */
  .list_pager {
    margin-top: max(4rem, 10vw);
  }

  /* 採用情報のインタビュー：タブレットもSPと同じ縦並び */
  .recruit_interview_body {
    container-type: inline-size;
    grid-template-columns: 1fr;
    gap: 1em;
    /* 吹き出しが上の見出しに重ならないよう、見出しとの間を空ける（吹き出しの高さ − 写真の真ん中までの高さ ＋ 余裕。箱の幅は画面幅の90%） */
    margin-top: max(5.7vw, calc(26.25rem - 23.5vw + 2rem));
  }
  .recruit_interview_pic {
    position: static;
    width: 35%;
	padding-top: 5vw;
  }
  .recruit_bubble {
    /* 吹き出しの三角（左下の先端）が、写真の上下の真ん中に来る位置（写真の上の余白5vwの半分 ＋ 写真の高さの半分 − 吹き出しの高さ。写真の枠は縦横比固定で、上の余白5vwを含むため） */
    top: calc(2.5vw + 35cqw * 2 / 3 - 0.875 * 20em);
    right: auto;
    bottom: auto;
    left: 36%;
    width: 20em;
    min-width: 0;
    margin: 0 -5vw 1.6em auto;
    padding: 0 2em 0.9em;
    font-size: 1.5rem;
  }

  /*////////////////左右の余白のルール（タブレット・SP共通。ヒーロー写真・全幅の帯は対象外）/////////////*/
  /* ① 大きな英字の見出し（Feature など）があるセクション：左2.5%・右5% */
  .com_line, .top02, .top03, .top04, .contact, .about_sec {
    margin-right: 5%;
    margin-left: 2.5%;
  }
  /* ② それ以外の余白があるブロック：左右5% */
  .sub_title, .breadcrumb, .about_lead, .works_lead, .cpage_lead, .recruit_lead, .recruit_sec, .recruit_entry, .flare_intro, .leak_intro, .leak_cta {
    margin-right: 5%;
    margin-left: 5%;
  }

  /* iPhone・iPadで、入力欄を押したときに画面が拡大されないよう、入力欄の文字は16px以上にする */
  .contact_input_el {
    font-size: max(1.6rem, 1em);
  }

  /* 漏水調査の流れ：タブレットもSPと同じ2列（番号｜題名・説明・写真） */
  .leak_step {
    grid-template-columns: 3.4em 1fr;
    gap: 0.4em 1em;
  }
  .leak_step_text, .leak_step_pic {
    grid-column: 2;
  }
  .leak_step_pic {
    width: min(100%, 22em);
    margin-top: 0.6em;
  }
}