@charset "UTF-8";
/* ========================================
common.css
全ページ共通の上書きスタイル（ヘッダー・フッター・スマホ表示の調整）
各ページの style.css / destyle.css の後に読み込む
======================================== */

/* ========================================
ヘッダー
======================================== */
.hamburger {
  background: none;
  border: none;
}

.nav-menu {
  gap: 2.4rem;
}

.nav-menu-link {
  white-space: nowrap;
}

/* メニュー6項目が収まらない幅からハンバーガーに切り替え */
@media (max-width: 1100px) {
  .hamburger {
    display: flex;
  }

  .nav-container-menu,
  .header-cta-container {
    display: none;
  }
}

/* ========================================
モバイルメニュー
======================================== */
.mobile-menu {
  width: 100%;
  max-width: 360px;
  height: calc(100vh - 70px);
  height: calc(100dvh - 70px);
  padding: 32px 24px 48px;
  overflow-y: auto;
  visibility: hidden;
  transition: right 0.3s, visibility 0.3s;
}

.mobile-menu.active {
  visibility: visible;
}

.mobile-nav-menu {
  gap: 0;
}

.mobile-nav-menu li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.mobile-nav-menu a {
  display: block;
  padding: 16px 0;
  font-size: 16px;
}

.mobile-nav-menu a::after {
  display: none;
}

.mobile-sns-menu {
  list-style: none;
  margin: 40px 0 0;
  padding: 32px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
}

.mobile-sns-menu li {
  margin: 0;
}

.mobile-sns-menu a {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.mobile-sns-menu a:hover,
.mobile-sns-menu a:focus {
  opacity: 0.7;
}

.mobile-sns-menu img {
  display: block;
  width: 44px;
  height: 44px;
}

/* スマホだけで改行する */
.sp-br {
  display: none;
}

/* 住所などを意味のまとまりで改行させる */
.addr-unit {
  display: inline-block;
}

/* ========================================
フッター
======================================== */
.footer-nav ul {
  flex-wrap: wrap;
  gap: 12px 32px;
}

.footer-bottom {
  justify-content: center;
}

@media (max-width: 768px) {
  .site-footer {
    padding: 40px 0 24px;
  }

  .footer-nav ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    text-align: center;
    margin-bottom: 24px;
  }

  .footer-nav li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .footer-nav li:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
  }

  .footer-nav a {
    display: block;
    padding: 14px 4px;
    font-size: 13px;
    letter-spacing: 0.08em;
  }

  .footer-bottom {
    border-top: none;
    padding-top: 0;
  }

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

/* ========================================
スマホ共通（文字が小さくなりすぎないように）
======================================== */
@media (max-width: 768px) {
  .btn-ver2 {
    font-size: 1.4rem;
    padding: 12px 20px;
  }

  .contact-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-buttons .btn-ver2 {
    width: 100%;
  }
}

/* ========================================
ホーム
======================================== */
@media (max-width: 768px) {
  /* メインビジュアル：スマホ用画像に差し替え（横幅いっぱいで看板全体を見せ、下は壁と同じ色でつなぐ） */
  .hero-image {
    background-image: url('../img/hero-main-sp.png');
    background-size: 100% auto;
    background-position: center top;
    background-color: #e4e4e3;
  }

  /* 看板の下（画面幅の約96%の位置まで）に文字を置き、文字が収まる高さを確保 */
  .hero-inner,
  .hero-image {
    height: max(100vh, calc(102vw + 300px));
  }

  .hero-image::before {
    display: none;
  }

  /* コピーは横書き・濃い色にして白い壁の上でも読みやすく */
  .hero-copy {
    top: 102vw;
    bottom: auto;
    width: 90%;
    margin-top: 0;
    gap: 16px;
    color: var(--primary-color);
    text-shadow: none;
  }

  .hero-catch {
    margin-top: 0;
    font-size: 2.6rem;
    line-height: 1.6;
    letter-spacing: 0.12em;
    writing-mode: horizontal-tb;
    text-align: center;
  }

  .hero-space {
    margin-top: 0;
  }

  .hero-text {
    color: var(--text-color);
    line-height: 1.8;
  }

  .hero-scroll {
    color: var(--tertiary-color);
  }

  .hero-scroll::after {
    border-color: var(--tertiary-color);
  }

  /* コンセプト：画像の上に重ねず、円を画像の右下に少しだけかける */
  /* 回転する円の文字が画面右にはみ出して横スクロール（右の白い余白）が出ないように */
  .concept {
    overflow: hidden;
  }

  .concept-inner {
    padding-top: 0;
    margin-bottom: 0;
  }

  .concept-image img {
    aspect-ratio: 4 / 3;
  }

  .concept-badge {
    position: static;
    top: auto;
    transform: none;
    justify-content: flex-end;
    box-sizing: border-box;
    margin-top: -88px;
    padding: 0 5% 10%;
    overflow: visible;
  }

  .concept-badge-circle {
    width: 200px;
    height: 200px;
  }

  .concept-badge-text {
    font-size: 15px;
  }

  .concept-badge-top {
    font-size: 1.3rem;
    margin-bottom: 4px;
  }

  .concept-badge-name {
    font-size: 2.6rem;
  }

  .about-lead,
  .work-desc,
  .contact-address,
  .contact-text {
    font-size: 1.4rem;
    line-height: 1.8;
  }

  .work-tags li {
    font-size: 1.2rem;
  }

  .about-text-box {
    width: 92%;
    padding: 48px 24px;
  }
}

@media (max-width: 480px) {
  .about-lead,
  .work-desc,
  .contact-address,
  .contact-text {
    font-size: 1.3rem;
  }

  .about-lead br {
    display: none;
  }
}

/* ========================================
私たちについて
======================================== */
@media (max-width: 768px) {
  /* メイン画像：スマホ用画像に差し替え、文字は画像下部に白80%の帯で重ねて横書き（私たちについて・会社概要・採用情報 共通） */
  .about-hero-container,
  .company-hero-container,
  .careers-hero-container {
    display: block;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  .about-hero-image,
  .company-hero-image,
  .careers-hero-image {
    height: 100vh;
    height: 100svh;
    background-position: center top;
  }

  .about-hero-image {
    background-image: url('../../about/asset/img/about-hero-img-sp.png');
  }

  .company-hero-image {
    background-image: url('../../company/asset/img/company-hero-img-sp.png');
  }

  .careers-hero-image {
    background-image: url('../../careers/asset/img/careers-hero-img-sp.png');
  }

  .about-hero-copy,
  .company-hero-copy,
  .careers-hero-copy {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    height: auto;
    flex-direction: column;
    gap: 4px;
    padding: 24px 24px 28px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8);
  }

  /* 会社概要・採用情報は文字の帯を画面の縦中央に */
  .company-hero-copy,
  .careers-hero-copy {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .about-hero-catch,
  .company-hero-catch,
  .careers-hero-catch {
    order: -1;
    writing-mode: horizontal-tb;
    font-size: 1.3rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--tertiary-color);
  }

  .about-hero-title,
  .company-hero-title,
  .careers-hero-title {
    writing-mode: horizontal-tb;
    font-size: 2.6rem;
    letter-spacing: 0.16em;
    line-height: 1.6;
    color: var(--primary-color);
  }

  /* コンセプト：上下と行間に余白をとってゆったり見せる */
  .about-concept-container {
    margin: 56px auto 10px;
  }

  .about-concept h2 {
    font-size: 2rem;
    padding: 0 24px;
    line-height: 1.8;
    letter-spacing: 0.08em;
  }

  .about-concept-text {
    font-size: 1.3rem;
    line-height: 2;
    letter-spacing: 0.04em;
    padding: 0 20px;
    margin: 20px auto 40px;
  }

  .sp-br {
    display: inline;
  }

  /* ご挨拶下・TOPお問い合わせのSNSアイコン：タップしやすい大きさに */
  .message .contact-icons,
  .contact .contact-icons {
    gap: 16px;
    margin: 8px 0 24px;
  }

  .message .contact-icons img,
  .contact .contact-icons img {
    width: 44px;
    height: 44px;
  }

  /* 大切にしていること：縦積み */
  .important-content-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 20px;
    margin: 64px auto;
  }

  /* important-ttl は「強み」と同じく中央にタイトルとして表示、装飾の important-des は非表示 */
  .important-content-inner::before {
    position: static;
    justify-self: center;
    width: 60%;
    height: auto;
    aspect-ratio: 393 / 153;
    background-position: center;
    opacity: 1;
    margin-bottom: -16px;
  }

  .important-content-inner::after {
    display: none;
  }

  /* 見出しも「強み」と同じく、タイトルの下・中央に配置 */
  .important-content-text {
    display: contents;
  }

  .important-content-inner::before {
    order: -2;
    transform: rotate(-10deg); /* 斜めの素材を水平に見せる */
  }

  .important-content-text .section-title {
    order: -1;
    justify-self: center;
    margin: 0;
  }

  .important-text {
    font-size: 1.4rem;
    line-height: 1.9;
  }

  .important-text br {
    display: none;
  }

  /* 強み：1列 */
  .strength {
    padding: 48px 0 64px;
  }

  .strength-icon img,
  .history-icon img {
    max-width: 60%;
  }

  .strength-items {
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 0 20px;
  }

  .strength-item {
    padding: 24px 16px;
  }

  .strength-item img {
    width: 64px;
    height: auto;
  }

  .strength-item-title {
    font-size: 1.8rem;
  }

  .strength-item-text {
    font-size: 1.4rem;
    width: 100%;
    line-height: 1.8;
  }

  /* これまでの歩み：縦1列のタイムライン */
  .history {
    padding: 48px 0;
  }

  .history-text {
    font-size: 1.4rem;
    text-align: left;
  }

  .history-text br {
    display: none;
  }

  .timeline {
    margin: 40px auto 0;
    padding: 0 20px 0 44px;
  }

  .timeline::before {
    left: 24px;
    transform: none;
  }

  .timeline-item,
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 48px;
  }

  .timeline-item::before {
    left: -20px;
    top: 12px;
    transform: translate(-50%, 0);
    width: 16px;
    height: 16px;
  }

  .timeline-img,
  .timeline-text,
  .timeline-item:nth-child(odd) .timeline-img,
  .timeline-item:nth-child(even) .timeline-img,
  .timeline-item:nth-child(odd) .timeline-text,
  .timeline-item:nth-child(even) .timeline-text {
    width: 100%;
    padding: 0;
    margin: 0;
    order: initial;
  }

  .timeline-text::after {
    display: none;
  }

  .timeline-item-year {
    font-size: 1.4rem;
    margin-bottom: 4px;
    color: var(--tertiary-color);
  }

  .timeline-item-title {
    font-size: 1.7rem;
    margin-bottom: 8px;
  }

  .timeline-item-text {
    font-size: 1.4rem;
  }

  /* ご挨拶：縦積み */
  .message {
    margin: 0 16px;
  }

  .message-inner {
    padding: 24px 20px;
    margin-bottom: 64px;
  }

  .message-frame {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .message-text p {
    font-size: 1.4rem;
  }

  .message-text p br {
    display: none;
  }
}

/* ホーム：施工事例の画像リンク */
.work-image a {
  display: block;
  height: 100%;
}

/* ========================================
会社概要：スマホで表の文字を少し大きく
======================================== */
@media (max-width: 480px) {
  .company-info-content .section-title {
    font-size: 2.2rem;
  }

  .company-table {
    font-size: 1.4rem;
  }
}