/*======================================
  レスポンシブ調整用スタイル (responsibe.css)
========================================*/

/*-----------------------------------
  グローバル共通調整 (1200px以下)
-------------------------------------*/
@media (max-width: 1200px) {
  /* コンテンツ幅の調整 */
  .inner {
    width: 90%;
    padding: 0;
  }
}

/*-----------------------------------
  タブレット・PC (1024px以下)
-------------------------------------*/
@media (max-width: 1024px) {
  /* セクションのパディング調整 (やや広めに維持) */
  section {
    padding: 5rem 0;
  }

  /* index.html: Recruitセクションの調整 (1024pxで縦積み化) */
  .recruit-inner {
    width: 90%;
  }
  .recruit-top {
    flex-direction: column;
  }
  .recruit-fixed {
    position: static;
    top: auto;
    width: 100%;
    text-align: center;
  }
  .recruit-title {
    margin: 0 auto;
  }
  .recruit-sidewrap {
    width: 100%;
    padding: 2rem 0 4rem;
  }
  .recruit-side h3 {
    font-size: 1.5rem;
    line-height: 1.5;
  }
  .recruit-side-text p {
    font-size: 1rem;
  }
  .recruit-sidebg {
    display: none;
  }
  .recruit-fixed .morebtn-wh {
    margin: 2rem auto 0;
  }
  .recruit-slider {
    margin: 4rem calc(50% - 50vw) 0;
  }

  /* Work Detail Page (実績詳細) */
  .wdetail-box {
    grid-template-columns: 1fr;
  }
  .wdetail-info {
    padding: 2rem 0;
    order: 2;
  }
  .wdetail-info-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .wdetail-main {
    order: 1;
  }
  .pc-none {
    display: block;
    margin-top: 2rem;
  }
  .sp-none {
    display: none;
  }
}

/*-----------------------------------
  モバイル共通調整 (768px以下)
-------------------------------------*/
@media (max-width: 768px) {
  /* --- グローバル/共通要素の調整 --- */
  body {
    font-size: 15px; /* 基本フォントサイズを縮小 */
  }
  section {
    padding: 3rem 0; /* セクションパディングをさらに縮小 */
  }

  /* 固定ロゴの調整 */
  .u-header-logo {
    width: 100px;
    height: 100px;
  }
  .u-header-logo img {
    width: 60px;
  }

  /* ページタイトル（FV）の積極的な縮小 */
  .u-fv-title {
    width: 90%;
  }
  .u-fv-title h1 span {
    font-size: 2.5rem;
  }
  .u-fv-title h1 img {
    width: 30px;
  }
  .u-fv-title p {
    font-size: 1.25rem;
  }

  /* index.html のセクションタイトルの調整 */
  .section-title {
    font-size: 1.2rem;
  }
  .section-title span {
    font-size: 3rem;
  } /* ここからさらに480px以下で縮小 */
  .section-title span img {
    width: 30px;
    margin-right: 0.5rem;
  }

  /* Moreボタンの調整 */
  .morebtn a {
    width: 200px;
    height: 60px;
    font-size: 1rem;
    padding: 0 1.5rem;
  }
  .morebtn img {
    width: 20px;
  }

  /* --- ハンバーガーメニューの表示とスタイリング --- */

  /* 【★重要修正】デフォルトのPCナビゲーションを非表示にし、競合を解消 */
  .header-nav {
    display: none;
    /* 非アクティブ時は非表示 */
  }

  /* PCナビゲーションの調整（非アクティブ時）は、display: none;のため削除 */

  /* ハンバーガーアイコンの表示とスタイリング */
  .hamburger-menu {
    display: block;
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 99;
    background-color: #000;
    border-radius: 5px;
  }
  .hamburger-menu span {
    display: block;
    position: absolute;
    width: 70%;
    height: 2px;
    background-color: #fff;
    left: 50%;
    transform: translateX(-50%);
    transition: 0.3s ease-in-out;
  }
  .hamburger-menu span:nth-child(1) {
    top: 10px;
  }
  .hamburger-menu span:nth-child(2) {
    top: 19px;
  }
  .hamburger-menu span:nth-child(3) {
    top: 28px;
  }

  /* X印へのアニメーション */
  .hamburger-menu.active span:nth-child(1) {
    top: 19px;
    transform: translateX(-50%) rotate(135deg);
  }
  .hamburger-menu.active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger-menu.active span:nth-child(3) {
    top: 19px;
    transform: translateX(-50%) rotate(-135deg);
  }

  /* メニュー展開時のスタイル (モバイルメニュー) */
  .header-nav.active {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(51, 45, 43, 0.95);
    z-index: 98;
    margin: 0;
    padding-top: 100px;
    animation: fadein 0.3s forwards;
  }
  .header-nav.active ul {
    flex-direction: column;
    background-color: transparent;
    font-size: 1.25rem;
    padding: 0;
    width: 90%;
    margin: 0 auto;
    font-weight: bold;
    color: #fff;
    line-height: 1.5;
  }
  .header-nav.active ul li {
    margin: 1rem 0;
    width: fit-content;
  }
  .no-scroll {
    overflow: hidden;
  } /* メニュー展開時の背景固定 */
  @keyframes fadein {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  /* --- index.html固有の調整 --- */
  .fv-textwrap {
    top: 30%;
  }
  .fv-title-en {
    font-size: 4rem;
  }
  .fv-title-ja {
    font-size: 1.1rem;
  }

  /* Philosophy */
  .philoN__inner {
    grid-template-columns: 1fr;
  }
  .philoN__visual {
    margin-top: 1.5rem;
  }
  .philoN__catch {
    font-size: 1.25rem;
  }
  .philoN__lead p {
    font-size: 0.95rem;
  }
  .philoN__pill li {
    font-size: 0.85rem;
  }

  /* Business Slider */
  .bizsl__viewport {
    padding: 0.2rem 0 1.5rem;
  }
  .bizsl__slider .slick-list {
    padding: 0 5% !important;
  }
  .bizsl__arrow {
    width: 30px;
    height: 30px;
  }
  .bizsl__prev {
    left: 2px;
  }
  .bizsl__next {
    right: 2px;
  }

  /* Contact Section (index.html内) */
  .contact {
    background-attachment: scroll;
  }
  .contact-top {
    font-size: 1.2rem;
  }
  .contact-morebtn {
    margin-top: 2rem;
  }

  /* --- 各ページ固有の調整 --- */

  /* Philo Page (企業理念) */
  .philo-block {
    display: block;
    padding-left: 0;
  }
  .philo-block > * {
    width: 100%;
    max-width: none;
    margin-top: 2rem;
  }
  .philo-card {
    padding: 1.5rem;
  }
  .philo-card h3 {
    font-size: 1.4rem;
  } /* タイトル系を少し縮小 */

  /* Works Page (実績一覧) */
  .u-works-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Company Page (会社概要テーブル) */
  .u-company-table {
    overflow-x: scroll;
    width: 100%;
  }
  .u-company-table table {
    width: 650px;
    max-width: none;
  }
  .u-company-table th,
  .u-company-table td {
    font-size: 0.9rem;
    padding: 0.75rem;
  }
  .u-company-table th {
    width: 120px;
  }

  /* Recruit Page (採用情報) */
  .rblock-item {
    padding: 1.5rem;
  }
  .rblock-title {
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
  } /* タイトル系を少し縮小 */
  .rblock-list dl {
    display: block;
  }
  .rblock-list dt {
    width: 100%;
    padding: 0.5rem 0;
    border-bottom: 1px dashed #ccc;
    font-weight: bold;
    font-size: 0.95rem;
  }
  .rblock-list dd {
    width: 100%;
    padding: 0.5rem 0 1rem;
    margin-left: 0;
    font-size: 0.9rem;
  }

  /* Contact Page (お問い合わせフォーム) */
  .c-form {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 4rem;
    padding: 0 5%;
  }
  .c-form-item {
    display: block;
    padding: 1rem 0;
    border-bottom: 1px solid #ccc;
  }
  .c-form-item label {
    width: 100%;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
  }
  .c-form-item .f-input {
    width: 100%;
  }
  .c-actions {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  .cta {
    width: 100%;
    max-width: 300px;
    height: 50px;
    padding: 0 2rem;
    font-size: 1rem;
  }

  /* --- Footerの調整 --- */
  .footer-nav > ul {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-nav ul > li {
    margin-top: 1rem;
    margin-left: 0 !important;
  }
  .footer-sns {
    margin: 2rem auto 0;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  .footer-bottom a {
    margin-top: 0.5rem;
  }
  /* Splash Logo */
  #splash_logo {
    width: 200px;
  }
  .section-title p {
    margin-left: 40px;
  }
  .u-fv {
    height: 250px;
  }
  .timeline li{
    margin-bottom: 1.5rem;
  }
}

/*-----------------------------------
  最小幅対応の調整 (480px以下)
-------------------------------------*/
@media (max-width: 480px) {
  /* 基本フォントのさらなる縮小 */
  body {
    font-size: 14px;
  }

  /* 【★ご要望の反映】セクションタイトルをさらに縮小 */
  .section-title span {
    font-size: 2rem;
  }

  /* ページタイトル（FV）のさらなる積極的な縮小 */
  .u-fv-title h1 span {
    font-size: 2rem;
  }
  .u-fv-title p {
    font-size: 1rem;
    gap: 0.5rem;
  }

  /* index.html固有の調整 */
  .fv-title-en {
    font-size: 3rem;
  }
  .fv-title-ja {
    font-size: 1rem;
  }
  .bcard {
    padding: 0.75rem;
  }
  .bcard__title {
    font-size: 0.95rem;
  }
  .bcard__txt,
  .bcard__list li {
    font-size: 0.9rem;
    line-height: 1.7;
  }
  .recruit-wrap {
    border-radius: 5rem 0 0 0;
    padding: 2rem 0 4rem;
  }

  /* Splash */
  #splash.fixed #splash_logo {
    width: 70px;
  }
  #splash.fixed {
    width: 100px;
    height: 100px;
  }

  /* Works Page (実績一覧) */
  .u-works-list {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .wcard h3 {
    font-size: 1.1rem;
  }

  /* Work Detail Page (実績詳細) */
  .wdetail-info-list {
    grid-template-columns: 1fr;
  }
  .wdetail-info-list dt,
  .wdetail-info-list dd,
  .wdetail-main p {
    font-size: 0.95rem;
  }
  .bizsl__tab {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
  }
  .morebtn a {
    width: 200px;
    height: 50px;
  }
  .recruit-side h3 {
    font-size: 1.3rem;
  }
  .contact-top {
    font-size: 1.1rem;
  }
  .u-philo__title{
    font-size: 1.3rem;
  }
  .u-philo__text p{
    font-size: 1rem;
  }
  .footer-nav > ul{
    font-size: 1rem;
  }
}