@charset "UTF-8";
/* CSS Document */

/* 全体背景 */
body {
  margin: 0;
  background: #f9f9f9;
  font-family: sans-serif;
  padding-top: 100px; /* ←ヘッダー高さ分あける */
}

/* 共通コンテナ（ヘッダー・フッター・中身統一） */
.inner,
.container {
  max-width: 900px;
  margin: 0 auto;
}

/* ヘッダー */
.site_header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  z-index: 1000;

  padding: 20px 0; /* ←上下余白これ */
  border-bottom: 1px solid #eee;
}

/* ヘッダー内レイアウト */
.site_header .inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}

/* ロゴ画像 */
.logo img {
  height: 30px;
  width: auto;
  display: block;
}

/* 右側ヘッダー */
.header_right {
  font-size: 14px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-align: right;
}

/* 電話番号を太く */
.header_right .tel {
  font-size: 14px;
  font-weight: 600;
}

/* JPリンク */
.header_right .jp {
  color: #c1272d;
  text-decoration: none;
  font-weight: 600;
}

/* ホバー */
.header_right .jp:hover {
  opacity: 0.7;
}

/* JP/EN */
.lang {
  margin-left: 10px;
  font-size: 13px;
}

.header_right .en {
  color: #9fa0a0;
  font-size: 13px;
}

/* JPだけ赤 */
.lang .jp {
  color: #c1272d;
  font-weight: bold;
}

/* メイン */
.site_main {
  padding: 0.1vw 0;
}

/* フッター */
.site_footer {
  background: #333;
  padding: 40px 0;
  margin-top: 60px;
  height: 80px;
}

/* フッター内レイアウト */
.site_footer .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* フッターロゴ（白反転想定） */
.site_footer .logo img {
  height: 30px;
  filter: brightness(0) invert(1);
}

/* フッター右テキスト */
.footer_right small {
  font-size: 11px;
  color: #cccccc;
  letter-spacing: 0.05em;
}


/*ここから本文*/
.book_box {
  max-width: 800px;
  margin: 5vw auto;   /* ←これが重要（中央寄せ） */
  font-size: clamp(12px, 1vw, 22.5px);
  letter-spacing: 0.15em;
  color: #333;
  text-align: left;
}

.info_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info_list li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 1.2em;
  line-height: 1.6;
}

/* □マーク */
.info_list li::before {
  content: "□";
  position: absolute;
  left: 0;
  top: 0;
  color: #333;
}

.book_box .title {
  position: relative;
  font-size: clamp(14.5px, 1.45vw, 26px);
  text-align: left;
  font-weight: 500;
  margin-bottom: 30px;
  line-height: 1.4;
  padding-left: 1.3em;
}

.book_box .title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 1em;
  background-color: #E94C2D;
}

/* 追加 */
.info_list {
  text-align: left;
}

.info_list > div {
  margin-bottom: 1.2em;
}

.info_list dt {
  font-weight: 600;
  margin-bottom: 0.2em;
}

.info_list dd {
  margin: 0;
  line-height: 1.6;
}

.book_box a {
  color: #333;
  text-decoration: underline;
}

/* =========================
   レスポンシブ対応
========================= */

@media screen and (max-width: 768px) {

  body {
    padding-top: 80px;
  }

    .site_header .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px; /* ←これが重要（左右の余白復活） */
  }

  .header_right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;

    font-size: 13px;

    white-space: normal; /* ←重要：nowrap解除 */
    min-width: 0;
  }

  .header_right .tel {
    display: none; /* ←スマホだけ消す */
  }

  .lang {
    display: inline-flex;
    gap: 2px;
    font-size: 13px;
  }

  .lang .jp,
  .lang .en {
    font-size: 13px; /* ←完全統一 */
    line-height: 1;
  }

  .logo img {
    height: 25px;
  }

  .header_right {
    font-size: 13px;
  }

  /* コンテンツ余白調整 */
  .book_box {
    margin: 40px 20px;
  }

  /* フッターも縦並び */
  .site_footer .inner {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .footer_right small {
    display: block;
    text-align: center;
  }
	
}	
	
	@media screen and (min-width: 769px) {
  .inner,
  .container {
    max-width: 1200px;
  }

  .book_box {
    max-width: 1100px;
  }
}