/* css/mobileLayout.css */

/* Header & Logo (Mobile) */
#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 9999;
  border-bottom: 1px solid #eee;
}

/* ヘッダー全体にカスタムカーソルを適用 */
#header,
#header a {
  cursor: url('../images/pointer.png'), auto !important;
}

.logo img {
  height: 50px;
  display: block;
}

/* Hamburger Menu (Mobile) */
/* ハンバーガーボタン自体の設定 */
.hamburger {
  display: flex; /* <-- responsive.cssで display: none; になっているので、ここでは不要かもしれませんが、念のため。 */
  flex-direction: column;
  justify-content: space-between; 
  width: 50px; /* responsive.cssは30px */
  height: 40px; /* responsive.cssは22px */
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 8px;
  cursor: pointer;
  box-sizing: border-box; 
  /* ここから下の絶対配置を削除・コメントアウト */
  /* position: absolute !important; 
  top: 15px !important; 
  right: 20px !important; */ 
}
  

/* ==========================================================================
   ▼▼▼ モバイル表示のレイアウト調整 (可読性向上) ▼▼▼
   ========================================================================== */
@media screen and (max-width: 768px) {

    /* 画像のセクションのテキストコンテナの調整 */
    /* (クラス名は既存のCSSから推測しています) */
    .hero-title-container {
        /* コンテナ内の要素（見出しや文章ブロック）を左端に配置します */
        align-items: center;
        /* テキストを左揃えにします */
        text-align: left;
        /* 左右の余白を少し調整 */
        padding-left: 15px;
        padding-right: 15px;
    }

    /* "Innovate for the Future." のような見出しの調整 */
    .hero-subtitle {
        font-size: 1.8rem; /* モバイル向けにフォントサイズを少し調整 */
        margin-bottom: 1.5rem; /* 下の文章との余白を確保 */
    }

    /* 説明文の調整 */
    .section-summary p {
        font-size: 1rem; /* モバイル向けにフォントサイズを調整 */
        line-height: 1.8; /* 行間を広げて読みやすくします */
    }

    /* もし、"Innovate for the Future." のような見出しだけは
      中央揃えを維持したい場合は、以下のコメントを外して適用してください。
    */
    /*
    .hero-subtitle {
        width: 100%;
        text-align: center;
    }
    */
}


/* Navigation Panel (Mobile) */
.main-nav > ul {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 320px;
  height: 100%;
  background-color: #fff;
  box-shadow: -5px 0 15px rgba(0,0,0,0.1);
  list-style: none;
  margin: 0;
  padding: 80px 0 20px 0;
  transform: translateX(100%);
  transition: transform 0.4s ease;
  overflow-y: auto;
  z-index: 9999;
}
.main-nav.is-active > ul {
  display: block;
  transform: translateX(0);
}

/* Accordion Menu (Mobile) */
.main-nav.is-active > ul > li > a {
  display: block;
  padding: 15px 25px;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #eee;
}
.main-nav.is-active li.has-child > a {
  position: relative;
}
.main-nav.is-active li.has-child > a::after {
  content: '›';
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  color: #aaa;
  transition: transform 0.3s;
}
.main-nav.is-active li.is-open > a::after {
  transform: translateY(-50%) rotate(90deg);
}
.main-nav.is-active .dropdown {
  display: none;
  position: static;
  background-color: #f7f7f7;
  padding-left: 0;
}
.main-nav.is-active li.is-open > .dropdown {
  display: block;
}
.main-nav.is-active .dropdown a {
  padding: 12px 25px 12px 45px;
  font-size: 0.9em;
  border-top: 1px solid #eee;
}
.main-nav {
    margin-left: auto; /* ★ これを記述することで、ロゴの右隣に寄せられます */
  }

/* =============================================
   ▼▼▼ Aboutページ モバイル用スタイル ▼▼▼
   ============================================= */

/* --- 全体の見出しと余白を調整 --- */
.about-section {
  margin-bottom: 80px; /* セクション下の余白を調整 */
}

.about-section h2 {
  font-size: 1.5rem; /* 見出しの文字サイズを調整 */
  margin-bottom: 20px;
  padding-bottom: 10px;
  padding-left: 20px; /* 左側にパディングを追加して右に寄せる */
}

/* --- ページ内ナビゲーションの調整 --- */
.page-submenu ul {
  flex-direction: column; /* 横並びを縦積みに変更 */
  width: 90%;
  padding: 10px;
  gap: 5px;
}

.page-submenu a {
  text-align: center; /* テキストを中央揃えに */
}


/* --- 会社概要テーブルの調整 --- */
.profile-row {
  display: block; /* 横並びを解除 */
  padding: 20px 10px;
}

/* 会社名、設立、とかのところ */
.company-profile dt {
  width: auto; /* 横幅の固定を解除 */
  margin-bottom: 10px; /* 項目の下に余白を追加 */
  font-size: 1rem;
  border-bottom: 1px dashed #ccc; /* 項目と内容の間に点線を追加 */
  padding-bottom: 8px;
}

/* 内容部分 */
.company-profile dd {
  margin-left: 0; /* 左の余白をリセット */
  font-size: 1rem;
  padding-left: 15px; /* 左側の内側余白 */
  padding-right: 15px; /* 右側の内側余白 */
}


/* --- 数字で見るセクションの調整 --- */
.stats-grid {
  grid-template-columns: repeat(2, 1fr); /* スマホでは2列に */
  gap: 15px;
  padding: 20px 0;
}

.stat-value {
  font-size: 2.2rem;
}
.stat-label {
    font-size: 1rem;
}


/* --- 代表メッセージの調整 --- */
.message-content {
    font-size: 1rem;
    line-height: 2;
    padding-left: 15px; /* 左側の内側余白 */
    padding-right: 15px; /* 右側の内側余白 */
}

.message-signature {
    margin-top: 40px;
    padding-right: 15px;
    font-family: 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    font-weight: bold;
    font-size: 1.3rem;
}

/* =============================================
   ▼▼▼ Cultureセクション モバイル用スタイル（修正版）▼▼▼
   ============================================= */

/* --- 全体のレイアウトを縦積みに --- */
.culture-item,
.culture-item:nth-child(even) {
  flex-direction: column; /* 縦積みに変更 */
}

/* --- テキスト部分の余白を調整 --- */
.culture-text {
  padding: 40px 25px 30px; /* 下の余白を少し調整 */
}

/* --- 画像の親ボックスの高さ制限を解除 --- */
.culture-image {
  max-height: none; /* ★高さの最大値制限をなくす */
  padding: 0 25px 25px; /* 画像の周りに余白を追加 */
}

/* --- 画像自体のサイズを直接コントロール --- */
.culture-image img {
  width: 100%;
  height: auto; /* ★高さを自動にリセット */
  max-height: 200px; /* ★画像自体の高さを最大200pxに制限 */
  object-fit: contain;/* ★全体が表示されるようにする */
}

/* --- 装飾用の数字とタイトルのサイズ調整 --- */
.culture-number {
  font-size: 6rem;
  top: 0;
  left: 5px;
}
.culture-title {
  font-size: 2rem;
}

/* ==========================================================================
   Service Page (Mobile Layout)
   ========================================================================== */

/* --- ヒーローエリアの調整 --- */

.service-hero h1 {
  font-size: 2.5rem; /* タイトル文字を小さく */
}

/* --- サブメニューの調整 --- */
.service-submenu {
  padding: 20px 15px; /* 余白を調整 */
}
.service-submenu > ul > li {
  display: block; /* 横並びを解除 */
}
.submenu-title {
  margin-right: 0;
  margin-bottom: 15px; /* 下に余白を設ける */
  padding-right: 0;
  border-right: none; /* 右の線を消す */
  border-bottom: 2px solid #ccc; /* 代わりに下線を引く */
  padding-bottom: 10px;
}
.service-submenu ul ul {
  gap: 10px; /* ボタン間の余白を調整 */
}
.service-submenu a {
  padding: 6px 15px; /* ボタンを少し小さく */
}


/* --- サービスリストの調整 --- */
.service-list {
  padding: 40px 15px; /* 上下の余白を調整 */
}
/* --- ヒーローエリアの調整 --- */
.service-hero {
  height: 25vh; /* 高さを少し確保 */
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 60px !important;
}


/* 横並びレイアウトを縦積みに変更 */
.service-item,
.service-item.reverse {
  flex-direction: column; /* 縦積みに */
  gap: 30px; /* 画像とテキストの間の余白 */
  margin-bottom: 60px;
}

.service-text h2 {
  font-size: 1.5rem; /* 見出しを少し小さく */
}

/* ==========================================================================
   MVV Page (Mobile Layout)
   ========================================================================== */

/* --- 全体・ヒーローエリアの調整 --- */
.page-hero {
  padding: 60px 20px 40px; /* 余白を縮小 */
  margin-top: 60px; /* ヘッダーとのマージンを調整 */
}
.page-hero h1 {
  font-size: 2.2rem; /* タイトル文字を小さく */
}
.page-container {
  padding: 40px 20px; /* 余白を縮小 */
}

/* --- MVVセクションの調整 --- */
.mvv-section {
  padding: 60px 0; /* 上下の余白を縮小 */
}
.kanji-image {
  max-width: 250px; /* 漢字画像を少し小さく */
}
.mvv-title {
  font-size: 2rem; /* MISSIONなどのタイトルを小さく */
}
.mvv-statement {
  font-size: 1.8rem; /* 「テクノロジーで...」の文字を小さく */
}
.mvv-description {
  font-size: 1rem; /* 説明文を小さく */
}

/* 画像付きセクションを縦積みに変更 */
.mvv-section.has-image {
  flex-direction: column;
  gap: 30px;
}
.mvv-image {
    order: -1; /* 画像をテキストの上に表示 */
}

/* --- VALUEリストの調整 --- */
.value-heading {
  flex-direction: column; /* 番号とテキストを縦積みに */
  align-items: flex-start; /* 左揃えに */
  gap: 10px;
}
.value-text {
  font-size: 1.5rem; /* テキストを小さく */
}
.value-description {
  padding-left: 0; /* 説明文のインデント（字下げ）をなくす */
  font-size: 1rem;
}


/* =============================================
   ▼▼▼ サブメニューのモバイル調整 ▼▼▼
   ============================================= */
@media screen and (max-width: 768px) {
  .page-submenu ul {
  flex-direction: column; /* 横並びを縦積みに変更 */
  width: 90%; 
  padding: 10px;
  gap: 20px; /* <--- 100px から適切な値（例：20px）に変更 */
}
  .page-submenu a {
  text-align: center; /* テキストを中央揃えに */
}
}

/* ==========================================================================
   News Page (Mobile Layout)
   ========================================================================== */

/* --- 全体・見出しの調整 --- */
#news-page h1 {
  font-size: 2rem; /* 見出しを小さく */
  margin-bottom: 30px;
}

/* --- フィルタリングタブの調整 --- */
.news-tabs {
  gap: 8px 12px; /* タブの間隔を少し詰める */
  margin-bottom: 30px;
}
.news-tab {
  padding: 6px 20px; /* タブを少し小さく */
  font-size: 1rem;
}


/* --- ニュースリストの調整（最重要） --- */
.news-link-item {
  flex-direction: column; /* ★横並びを縦積みに変更 */
  align-items: flex-start; /* 左揃えに */
  padding: 20px 15px;
}

.news-link-meta {
  width: 100%; /* ★横幅の固定を解除 */
  margin-bottom: 15px; /* ★タイトルの間に余白を追加 */
}

.news-date {
  font-size: 0.9rem;
}

.news-title {
  width: 100%;
  font-size: 1rem;
  padding: 0; /* ★余白をリセット */
}


/* ==========================================================================
   Article Modal & Page (Mobile Layout)
   ========================================================================== */

/* --- 記事表示モーダルの調整 --- */
.modal-content {
  width: 95%; /* 横幅を少し広げる */
  height: 85vh; /* 高さを少し広げる */
  padding: 25px 20px; /* 余白を調整 */
}

.modal-close-btn {
  top: 10px;
  right: 10px;
  font-size: 3rem; /* 閉じるボタンを小さく */
}

.modal-article-title {
  font-size: 1.5rem; /* タイトルを小さく */
}

.modal-article-content {
  font-size: 1rem; /* 本文を小さく */
}

.modal-article-content h2 {
  font-size: 1.3rem;
}

/* --- 記事詳細ページの調整 --- */
.article-header {
  margin: 30px 0;
}

.article-featured-image {
  margin-bottom: 30px;
}

/* 本文とサイドバーの横並びを解除 */
.article-body-container {
  display: block;
}

.article-sidebar {
  width: 100%; /* 横幅を100%に */
  position: static; /* sticky配置を解除 */
  margin-top: 50px; /* 本文との間に余白を追加 */
  padding-top: 30px;
  border-top: 1px solid #e0e0e0;
}

/* SNSシェアボタンを横並びに変更 */
.social-share-list {
  display: flex;
  justify-content: center;
  gap: 15px;
}
.social-share-list li {
  margin-bottom: 0;
}

/* =============================================
   Career Page (Mobile Layout)
   ============================================= */

/* --- 全体・見出し類の調整 --- */
main h1 {
  font-size: 2.2rem; /* メインタイトルを縮小 */
}

.career-section h2 {
  font-size: 1.5rem; /* セクション見出しを縮小 */
  margin: 2rem 0 1rem;
}

.career-top-catchcopy h2 {
  font-size: 1.5rem; /* スローガンを縮小 */
}

.interview-qa-item > h4 {
  font-size: 1.2rem; /* インタビュー見出しを縮小 */
  padding-left: 1rem;
}


/* --- 各セクションの余白調整 --- */
.career-info-list {
  padding: 1rem; /* リストの余白を縮小 */
}
.career-info-list dd {
  padding-left: 0.5rem; /* dd要素の左余白を縮小 */
}

.highlight-box, .holiday-catchcopy {
  padding: 1rem;
  margin: 1.5rem 0;
}


/* --- 福利厚生・インタビューなど --- */
.benefit-list {
  justify-content: center; /* 中央揃えにして見た目を整える */
}
.benefit-list li {
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
}

.interview-qa-item p {
  font-size: 0.9rem;
}


/* --- 応募フォームの調整 --- */
.career-form-section {
  padding: 2rem 1.2rem; /* フォーム全体の余白を縮小 */
  margin-top: 2rem;
}
.career-form-section h2 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}


/* --- ボタンの調整 --- */
.back-button-area {
  margin: 40px 0 20px; /* ボタン周りの余白を縮小 */
}