/* リセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.6;
  color: #333;
}

/* 共通・小タイトル用 */
.midashi {
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
}
/* 共通・文章内右揃え用 */
.migiyose {
  text-align: right;
}
/* 共通・罫線 */
.line {
  border-top: 1px solid lightgray;
  width: 95%;
  margin: 60px auto;
}

/* ヘッダ */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background: #f8f8f8;
  border-bottom: 1px solid #ddd;
}
.site-header .logo img {
  height: 50px;
  margin-right: 15px;
}
.nav-links a {
  margin-left: 15px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
}
.nav-links a:hover {
  color: #0078d7;
}

/* メインビジュアル */
.main-visual {
  position: relative;
  text-align: left;
}
.main-visual img {
  width: 100%;
  height: auto;
  display: block;
}
.intro-text {
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 20px 20px;
  border-radius: 8px;
  font-size: 1em;
}
.sp-img {
  display: none; /* スマホ用画像をPCでは非表示にする */
}

/* トップページ・ページ紹介カード */
.page-intro {
    max-width: 900px;
    margin: 60px auto;
}
.intro-card {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 30px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  margin-bottom: 40px;
}
.intro-card reverse {
  flex-direction: row-reverse;
}
.intro-img {
  width: 280px;
  height: 450px;
  object-fit: cover;
  flex-shrink: 0;
}
.intro-content {
  flex: 1;
  padding: 30px;
}
.intro-content h2 {
  margin-bottom: 10px;
}
.more-link {
  display: inline-block;
  margin-top: 20px;
  padding: 8px 16px;
  background: #007acc;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
}
.more-link:hover {
  text-decoration: underline;
  background: #005f99;
}
.btn-img {
  width: 220px;
  height: 50px;
  margin-top: 15px;
}

/* ページ共通・メインコンテンツ */

main {
  text-align:center;
  padding:60px 20px;
}

/* 画像の右側に文字を回りこませる */
.mawarikomi {
  float: right;
  margin: 0px 20px 20px 20px;
}

/* 会社概要の表 */
.table-wrap {
 background:#fff;
 padding:16px;
 max-width:900px;
 margin:0 auto;
}

table {
 width:100%;
 border-collapse:collapse;
 table-layout:fixed;
}

thead th {
 text-align:left;
 padding:10px 12px;
 font-size:0.95rem;
 color:var(--muted);
 border-bottom:2px solid #eee;
}

tbody td {
 padding:12px;
 border-bottom:1px solid #f0f0f0;
 vertical-align:middle;
 word-wrap:break-word;
}

tbody tr:nth-child(odd){ background: #ffffff; }
tbody tr:nth-child(even){ background: #fbfdff; }

/* 2列の幅調整 */
th:first-child, td:first-child{ width:40%; }
th:last-child, td:last-child{ width:60%; }


/* フッタ */
.site-footer {
  background: #f8f8f8;
  padding: 20px;
  text-align: center;
  border-top: 1px solid #ddd;
}
.footer-logo img {
  height: 75px;
  margin-bottom: 10px;
}
.footer-links a {
  margin: 0 10px;
  text-decoration: none;
  color: #333;
}
.footer-links a:hover {
  color: #0078d7;
}

.site-footer p {
  margin-top: 10px;
  font-size: 0.8em;
  color: #333;
}


/* 私たちについてページのGoogle map用 */

:root {
 /* サイトに合わせて最大幅だけお好みで */
 --map-max-width: 900px;
 --map-radius: 14px;
 }

.map-wrap {
 width: 100%;
 max-width: var(--map-max-width);
 aspect-ratio: 16 / 9; /* 横長（PC想定） */
 border-radius: var(--map-radius);
 overflow: hidden;
 box-shadow: 0 10px 24px rgba(0,0,0,.12);
 background: #f3f4f6;
 }

.map-frame {
 width: 100%;
 height: 100%;
 border: 0;
 }

/* ====== スマホ縦向きでは縦長(9:16)に ====== */
@media (max-width: 768px) and (orientation: portrait) {
 .map-wrap { aspect-ratio: 9 / 16; }
}

/* ====== aspect-ratio未対応ブラウザ用フォールバック ====== */
.map-wrap.fallback { position: relative; }

.map-wrap.fallback::before {
 content: "";
 display: block;
 padding-top: calc(100% * 9 / 16); /* 16:9 */
 }

.map-wrap.fallback > .map-frame {
 position: absolute; inset: 0; height: 100%; width: 100%;
 }

@media (max-width: 768px) and (orientation: portrait) {
 .map-wrap.fallback::before { padding-top: calc(100% * 16 / 9); /* 9:16 */ }
}

/* ====== オプション: 横向きスマホは横長に保つ ====== */
@media (max-width: 768px) and (orientation: landscape) {
 .map-wrap { aspect-ratio: 16 / 9; }
}



/* サイト全体のスマホ対応：768px以下 */

@media (max-width: 768px) {
  /* メインビジュアル画像非表示 */
  .main-visual img {
    display: none;
  }
  /* ページ紹介カードのPC用画像を非表示 */
  .left {
    display: none;
  }
  .right {
    display: none;
  }
  /* メインビジュアルテキスト */
  .intro-text {
    position: static;  /* 絶対配置を解除 */
    transform: none;
    background: none;  /* 背景を外す */
    color: #333;
    margin: 20px 0;
    text-align: left;
  }

  /* ページ紹介カードを縦並びにする */
  .intro-card {
    flex-direction: column !important;  /* 左右反転も縦に */
    align-items: flex-start;
  }

  .intro-card.reverse {
    flex-direction: column !important;
  }

  /* スマホでも余白を確保 */
  .intro-content {
    padding: 0px 10px 10px 10px;
  }

  /* スマホ用画像を表示 */
  .sp-img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 15px;
  }
  
  /* テキスト回り込みを解除 */
 .mawarikomi {
    float: none;      /* 回り込み解除 */
    display: block;   /* ブロック要素として表示 */
    margin: 10px auto;   /* 中央寄せしたい場合 */
  }
}
  /* 私たちについてページの会社概要の表を、スマホでは縦並びに表示 */

@media (max-width: 768px) {

  .table-wrap table,
  .table-wrap tbody,
  .table-wrap tr,
  .table-wrap td {
    display: block;
    width: 100%;
  }

  .table-wrap tr {
    margin-bottom: 16px; /* 各項目ごとの間隔 */
  }

  .table-wrap td {
    padding: 8px;
    border: none;        /* 線を削除 */
  }

  /* 項目（1列目） */
  .table-wrap td:first-child {
    font-weight: bold;
    margin-bottom: 4px;  /* 内容との間に少し余白 */
  }

  /* 内容（2列目） */
  .table-wrap td:last-child {
    margin-bottom: 8px;  /* 項目ブロックごとに余白 */
  }
}