@charset "UTF-8";

/* ========================================
   Next Works 全体レスポンシブ補正
   既存のPCデザインを維持し、各ページCSSの後から適用する。
======================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 0;
  overflow-x: clip;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

body.menu-open,
body.works-modal-open {
  overflow: hidden;
}

/* slide.css 側で画像自体が fixed 指定されているため、リンクではなく画像を補正する */
.logo-overlay {
  left: 28px !important;
}

/* タッチ端末では標準カーソルを使う */
@media (hover: none), (pointer: coarse) {
  html,
  body,
  a,
  button,
  input,
  select,
  textarea,
  a img {
    cursor: auto !important;
  }

  #cursorImg,
  #circle1,
  #circle2,
  #circle3,
  .stalker {
    display: none !important;
  }
}

/* ========================================
   タブレット以下
======================================== */
@media (max-width: 1024px) {
  .wrapper {
    min-width: 0 !important;
  }

  .logo-overlay-link {
    top: 20px;
    left: 22px;
  }

  .logo-overlay {
    width: 150px;
    top: 20px !important;
    left: 18px !important;
  }

  .side-menu {
    width: min(440px, 88vw);
    right: min(-470px, -92vw);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nw-page-hero {
    padding: 72px 0 34px;
  }

  .nw-page-logo {
    width: min(380px, 72vw);
  }

  .slideshow::before {
    width: 220px;
  }

  .slideshow .vertical-scroll-wrapper {
    right: 22px;
  }

  .footer-nav-list {
    gap: 24px 34px;
    flex-wrap: wrap;
  }

  /* 事業内容：タブを画面内で横スクロール可能にする */
  .jigyou-tabs-wrap {
    width: calc(100% - 32px);
  }

  .jigyou-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .jigyou-tab-btn {
    scroll-snap-align: start;
  }

  /* トップ事業内容：01〜03を文章の上に置き、重なりを解消 */
  .section.business .business-intro,
  .section.business .business-problems,
  .section.business .business-tools {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .section.business .strong-point,
  .section.business .sp01,
  .section.business .sp02,
  .section.business .sp03 {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: min(210px, 48vw);
    margin: 0 auto 24px;
    padding: 0 !important;
    transform: none !important;
    background: transparent !important;
  }

  .section.business .strong-point img {
    display: block;
    width: 100%;
    height: auto;
  }

  .section.business .section-heading-image {
    margin-top: 0;
  }
}

/* ========================================
   スマホ
======================================== */
@media (max-width: 767px) {
  .logo-overlay-link {
    top: 14px;
    left: 14px;
  }

  .logo-overlay {
    width: 108px !important;
    top: 14px !important;
    left: 8px !important;
  }

  .hamburger {
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
  }

  .side-menu {
    right: -100vw;
    width: min(360px, 92vw);
    height: 100dvh;
    padding: 28px 22px 34px;
  }

  .side-menu.open {
    right: 0;
  }

  .menu-logo {
    margin-bottom: 22px;
  }

  .menu-logo img {
    max-width: 62%;
  }

  .nw-menu-item {
    margin: 16px 0;
  }

  .nw-menu-link {
    grid-template-columns: 34px auto;
    column-gap: 10px;
  }

  .nw-menu-icon {
    width: 34px;
  }

  .nw-menu-jp {
    font-size: 16px;
  }

  .menu-contact {
    margin-top: 22px;
  }

  /* 共通ページタイトル。固定ロゴとの重なりを防ぐ */
  .nw-page-hero {
    padding: 66px 0 18px;
  }

  .nw-page-hero-inner {
    width: calc(100% - 32px);
  }

  .nw-page-logo {
    width: min(250px, 68vw) !important;
    max-width: 68vw !important;
  }

  .nw-bg-dot {
    opacity: .18;
  }

  /* トップ：右の緑帯と英語スクロール列を非表示 */
  .slideshow::before,
  .slideshow .vertical-scroll-wrapper {
    display: none !important;
  }

  .slideshow {
    height: min(100svh, 760px);
    min-height: 560px;
  }

  .slide {
    background-position: center center;
  }

  .title-group {
    left: 20px;
    right: 20px;
    bottom: 18px;
  }

  .title {
    max-width: min(76vw, 360px);
    height: auto;
  }

  .title1 { bottom: 92px; }
  .title2 { bottom: 28px; }
  .title3 { bottom: 74px; }
  .title4 { bottom: 28px; }

  .section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .section.business,
  .section.planning,
  .section.notice {
    padding-left: 16px;
    padding-right: 16px;
  }

  .business-title,
  .planning-title,
  .event-title {
    width: min(250px, 74vw);
    height: auto;
  }

  /* トップページ：STRONG POINT 01〜03の文章画像を画面内へ収める */
  .section.business .container,
  .section.business .business-intro,
  .section.business .business-problems,
  .section.business .business-tools {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .section.business .section-heading-image {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
    margin: 0 auto 40px !important;
    object-fit: contain;
    transform: none !important;
  }

  /*
   * 画像名を直接指定して、旧CSSの固定幅・絶対配置も確実に解除する。
   * title1_t1-1 はSVGへ差し替えた場合も同じ指定が効く。
   */
  .section.business img[src*="title1_t1-1"],
  .section.business img[src*="title1_t2-1"],
  .section.business img[src*="title1_t3-"] {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
    margin-right: auto !important;
    margin-left: auto !important;
    transform: none !important;
  }

  /* STRONG POINT 01 下の円形画像 */
  .section.business .business-circle {
    width: min(300px, 82vw) !important;
    height: auto !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .section.business .business-graphic {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* STRONG POINT 02 下：3項目を1列にして中央へ */
  .section.business .problem-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 24px !important;
    margin: 0 auto 52px !important;
    padding: 0 !important;
  }

  .section.business .problem-list li {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .section.business .problem-img {
    position: static !important;
    display: block !important;
    width: min(274px, 78vw) !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  /* STRONG POINT 03 下：2列＋最終項目を中央に配置 */
  .section.business .business-tools .tool-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: center !important;
    justify-items: center !important;
    align-items: start !important;
    width: min(100%, 340px) !important;
    gap: 24px 12px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .section.business .business-tools .tool-list li {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .section.business .business-tools .tool-list li:last-child {
    grid-column: 1 / -1;
    width: 50% !important;
  }

  .section.business .business-tools .tool-list li img {
    position: static !important;
    display: block !important;
    width: min(132px, 100%) !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  .event-tent-grid,
  .planning-grid {
    gap: 18px;
  }

  /* トップのイベントツール：縮小後も説明文と写真を所定位置へ */
  .section.event-tool .event-tent-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 32px !important;
    margin: 0 auto !important;
  }

  .event-tent-item {
    width: min(260px, 76vw) !important;
    max-width: 260px !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .section.event-tool .event-tent-bg {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .section.event-tool .event-tent-desc {
    top: 59.5% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: 74% !important;
    margin: 0 !important;
    font-size: clamp(10px, 3vw, 12px) !important;
    line-height: 1.5 !important;
    transform: translateX(-50%) !important;
  }

  .section.event-tool .event-tent-slider {
    right: auto !important;
    bottom: 8.3% !important;
    left: 50% !important;
    width: 65.4% !important;
    height: auto !important;
    aspect-ratio: 170 / 105;
    border-width: 5px !important;
    transform: translateX(-50%) !important;
  }

  /* 企業理念 */
  .p-rinen .l-inner {
    width: calc(100% - 32px) !important;
  }

  .p-rinen-concept-card,
  .p-rinen-greeting__profile,
  .p-rinen-feature-block__content {
    grid-template-columns: 1fr !important;
  }

  .p-rinen-concept-card__title {
    font-size: clamp(27px, 8vw, 36px) !important;
    text-align: center;
  }

  .p-rinen-greeting__image,
  .p-rinen-feature-block__image {
    width: min(220px, 70vw) !important;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* 事業内容 */
  .jigyou-page {
    padding: 18px 0 70px !important;
    background-image: none !important;
  }

  .jigyou-tabs-wrap {
    width: calc(100% - 24px);
  }

  .jigyou-tabs {
    padding: 8px 2px 0;
    margin-bottom: -2px;
  }

  .jigyou-tab-btn,
  .jigyou-tab-btn:nth-child(2),
  .jigyou-tab-btn:nth-child(3) {
    min-width: 142px !important;
    width: 142px !important;
    flex: 0 0 142px !important;
    height: 76px !important;
    margin-left: -5px;
    padding: 10px 9px;
    gap: 7px;
    border-radius: 18px 18px 0 0;
    font-size: 14px;
  }

  .jigyou-tab-btn:first-child {
    margin-left: 0;
  }

  .jigyou-tab-icon,
  .jigyou-tab-icon img {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .jigyou-panel-inner {
    border-width: 6px;
    border-radius: 0 16px 16px 16px;
    padding: 18px 14px 24px;
  }

  .jigyou-card,
  .jigyou-grid {
    min-width: 0;
  }

  .jigyou-card-thumb {
    width: 100%;
    max-width: none;
  }

  .jigyou-card-title {
    font-size: clamp(24px, 7vw, 30px);
  }

  /* 実績紹介 */
  .works-page {
    overflow: visible;
  }

  .works-hero-inner {
    height: 0;
  }

  .works-blue-line {
    margin-top: 0;
  }

  .works-breadcrumb {
    width: calc(100% - 28px);
    margin-top: 18px;
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  .works-category-area {
    padding: 34px 14px 24px;
    overflow: visible;
  }

  .works-category-area::after {
    display: none;
  }

  .works-category-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 10px;
  }

  .works-category-btn {
    width: 100%;
    min-width: 0;
    height: 76px;
    padding: 0 6px 10px;
  }

  .works-category-icon {
    top: -18px;
    width: 50px;
    height: 50px;
  }

  .works-category-icon img {
    width: 52px;
    height: 52px;
  }

  .works-category-name {
    font-size: 14px;
  }

  .works-list-section {
    padding: 20px 0 62px;
  }

  .works-inner,
  .works-detail-box {
    width: calc(100% - 24px);
  }

  .works-card-link {
    padding: 14px 14px 24px;
  }

  .works-card h2 {
    font-size: 20px;
  }

  .works-note-box {
    text-align: left;
  }

  .works-detail-section {
    display: block !important;
    padding: 28px 0 70px;
  }

  .works-detail-box {
    display: block !important;
    padding: 28px 14px 28px;
    border-width: 2px;
  }

  .works-detail-head {
    display: block !important;
    margin-bottom: 28px;
  }

  .works-detail-label {
    padding: 9px 18px;
    margin-bottom: 18px;
    font-size: 13px;
  }

  .works-detail-sub-label {
    margin: -8px 0 12px;
  }

  .works-detail-head h2 {
    display: block !important;
    font-size: clamp(23px, 7vw, 29px);
    overflow-wrap: anywhere;
  }

  .works-detail-head p {
    font-size: 15px;
  }

  .works-detail-gallery,
  .works-detail-sub {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .works-detail-main {
    min-height: 0;
  }

  .works-detail-main img,
  .works-detail-sub img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
  }

  .works-detail-comment {
    margin-top: 24px;
    font-size: 15px;
  }

  .works-detail-back {
    margin-top: 30px;
  }

  body > .works-photo-modal .works-photo-modal-img {
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 94px);
  }

  body > .works-photo-modal .works-photo-close {
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
  }

  body > .works-photo-modal .works-photo-arrow {
    top: auto;
    bottom: 14px;
    transform: none;
  }

  body > .works-photo-modal .works-photo-prev { left: 20px; }
  body > .works-photo-modal .works-photo-next { right: 20px; }

  /* イベントツール */
  .event-tool-inner {
    width: calc(100% - 24px);
  }

  .event-tool-hero {
    padding: 32px 0 28px;
  }

  .event-tool-lead h2 {
    margin-top: 22px;
    font-size: 20px;
  }

  .event-tool-lead p {
    font-size: 14px;
  }

  .event-tool-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .event-tool-side,
  .event-tool-main,
  .event-tool-grid,
  .event-tool-card,
  .event-tool-detail {
    min-width: 0;
  }

  .event-tool-category-title {
    font-size: 20px;
  }

  .event-tool-detail-box {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 12px 24px;
    border-width: 4px;
  }

  .event-tool-detail-info {
    left: 0;
    min-width: 0;
  }

  .event-tool-detail-info h3 {
    font-size: clamp(23px, 7vw, 30px);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .event-tool-sub-images {
    width: 100%;
  }

  .spec-pdf-btn,
  .event-tool-back,
  .event-tool-back-genre {
    max-width: 100%;
  }

  .pdf-modal-box {
    width: calc(100vw - 20px) !important;
    height: calc(100dvh - 32px) !important;
  }

  /* 会社概要 */
  .company-main {
    padding: 46px 0 0;
  }

  .company-inner {
    width: calc(100% - 28px);
  }

  .company-profile-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .company-profile-label {
    width: auto !important;
    display: block !important;
    justify-content: flex-start !important;
    letter-spacing: .08em;
    white-space: normal;
  }

  .company-profile-label span {
    display: inline !important;
  }

  .company-profile-value,
  .company-circle-list li,
  .company-access-address {
    overflow-wrap: anywhere;
  }

  .company-map iframe {
    width: 100%;
    height: 280px;
  }

  /* 採用情報 */
  .recruit-inner {
    width: calc(100% - 28px);
  }

  .recruit-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .recruit-row dt {
    width: 126px;
  }

  .recruit-photo-block,
  .recruit-card:nth-of-type(even) .recruit-photo-block {
    height: auto;
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .recruit-card:nth-of-type(even) .recruit-photo-block {
    grid-template-columns: minmax(0, 1fr) 42px;
  }

  /* お問い合わせ */
  .contact-main {
    padding: 44px 0 64px;
  }

  .contact-inner {
    width: calc(100% - 24px);
  }

  .contact-form-area {
    padding: 24px 14px;
  }

  .contact-form-area input,
  .contact-form-area select,
  .contact-form-area textarea {
    max-width: 100%;
    font-size: 16px !important;
  }

  /* フッター */
  .site-footer {
    min-height: 560px;
    padding-top: 32px;
  }

  .footer-nav {
    margin-bottom: 34px;
  }

  .footer-nav-list {
    gap: 12px 20px;
  }

  .footer-logo {
    width: min(240px, 72vw);
    margin-bottom: 28px;
  }

  .footer-contact {
    gap: 14px;
    margin-bottom: 24px;
  }

  .footer-contact-item {
    gap: 10px;
    font-size: clamp(22px, 7vw, 28px);
  }

  .footer-contact-item img {
    width: 36px;
    height: 36px;
  }

  .footer-office {
    font-size: 12px;
    line-height: 1.7;
  }
}

/* ========================================
   小さいスマホ
======================================== */
@media (max-width: 390px) {
  .logo-overlay {
    width: 96px !important;
    left: 6px !important;
  }

  .nw-page-logo {
    width: min(220px, 64vw) !important;
  }

  .works-category-list {
    gap: 28px 8px;
  }

  .works-category-name {
    font-size: 13px;
  }

  .jigyou-tab-btn,
  .jigyou-tab-btn:nth-child(2),
  .jigyou-tab-btn:nth-child(3) {
    min-width: 132px !important;
    width: 132px !important;
    flex-basis: 132px !important;
  }

  .footer-office {
    font-size: 11px;
  }
}

/* ========================================
   トップページ 事業内容の文章
   旧画像3点をレスポンシブ対応テキストへ置換
======================================== */
.section.business .business-copy {
  position: static;
  display: block;
  width: calc(100% - 32px);
  margin: 0 auto 40px;
  text-align: left;
  transform: none;
}

.section.business .business-copy--01 {
  max-width: 938px;
}

.section.business .business-copy--02 {
  max-width: 745px;
}

.section.business .business-copy--03 {
  max-width: 881px;
}

.section.business .business-copy-title {
  margin: 0 0 10px;
  color: #016bd7;
  font-family: inherit;
  font-size: clamp(30px, 3.45vw, 44px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
}

.section.business .business-copy-text {
  position: static !important;
  display: block;
  margin: 0;
  color: #3d3d3d;
  font-family: inherit;
  font-size: clamp(17px, 1.72vw, 22px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0;
}

@media (max-width: 767px) {
  .section.business .business-copy {
    width: calc(100% - 32px);
    max-width: 560px;
    margin: 0 auto 34px;
  }

  .section.business .business-copy-title {
    margin-bottom: 12px;
    font-size: clamp(24px, 7.1vw, 30px);
    line-height: 1.22;
  }

  .section.business .business-copy-text {
    font-size: clamp(15px, 4.25vw, 17px);
    font-weight: 700;
    line-height: 1.75;
  }

  .section.business .business-copy-title br,
  .section.business .business-copy-text br {
    display: none;
  }
}

@media (max-width: 390px) {
  .section.business .business-copy {
    width: calc(100% - 28px);
  }

  .section.business .business-copy-title {
    font-size: clamp(22px, 6.8vw, 26px);
  }

  .section.business .business-copy-text {
    font-size: 15px;
  }
}