/* リセットCSSファイルのリンクを忘れないでください */
@import url("reset.css");

/* ページ全体の背景画像 */
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: url("../img/bg_about.png") no-repeat center center fixed;
  background-size: cover;
  overflow-x: hidden; /* 水平方向のスクロールを防止 */
}

/* accessセクションの背景設定 */
#access {
  background: url("../img/bgaccess.png") center / cover no-repeat;
  padding: 300px 0 135px;
  width: 100vw; /* ビューポートの幅を設定 */
  margin-left: calc(-50vw + 50%); /* 中央揃え */
  color: white;
}

/* セクションの共通スタイル */
section {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0; /* セクション間の余白を確保 */
  z-index: 1;
}

/* 追加の画像スタイル */
header img,
.access img,
.plan img,
.optionplan img,
.footer img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 20px; /* 画像の下に隙間を追加 */
}

/* 全体の文字スタイル */
body,
p,
a,
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.6; /* 行間を調整 */
}

/* ナビゲーションバーを前面にしてスクロール固定にする */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

/* ナビゲーションバーのスタイル調整 */
.navbar .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ヘッダーの上部に隙間を追加して、固定ナビゲーションバーのスペースを確保 */
.header {
  margin-top: 70px; /* ナビゲーションバーの高さに合わせて調整 */
}

/* ヘッダースタイル */
.header {
  text-align: center;
  background-color: #343a40;
  color: white;
  padding: 20px 0; /* 適度に修正 */
}

.header .navbar-brand {
  color: white;
  font-size: 24px;
  font-weight: bold;
}

.header h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px; /* 適度に修正 */
  position: relative;
  background: url("../img/katana_head.png") no-repeat center;
  background-size: contain;
  padding-bottom: 50px; /* 画像の高さに応じて調整 */
}

.header h1,
.header p {
  margin-top: 10px; /* 適度に修正 */
}

/* セクションタイトルスタイル */
h2.text-center {
  font-size: 32px;
  font-weight: bold;
  color: black;
}

.box {
  text-align: center;
  margin-bottom: 20px;
}

p {
  font-size: 18px;
}

.box-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #763b00;
  z-index: 1;
  font-size: 13px;
}

.box img {
  display: block;
  width: 100%;
  height: auto;
  z-index: 0;
}

.access img,
.access .map iframe {
  width: 100%;
  height: auto;
  margin-bottom: 20px; /* 画像とマップの下に隙間を追加 */
}

.access .map {
  margin-top: 20px;
}

.contact-buttons {
  display: flex;
  gap: 20px; /* ボタン間の隙間を広げる */
  justify-content: center; /* 必要に応じて変更 */
  margin-top: 20px; /* 必要に応じて変更 */
  font-weight: 600;
  font-size: 18px;
}

.contact-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 45px;
  color: white; /* テキストの色を設定 */
  text-decoration: none; /* テキストの下線を削除 */
  border-radius: 5px; /* ボタンの角を丸く */
}

.contact-button-line {
  background-color: #00c854; /* LINEボタンの背景色を設定 */
}

.contact-button-line:hover {
  background-color: #5cbe85; /* ホバー時の背景色を設定 */
}

.contact-button-phone {
  background-color: transparent; /* 電話ボタンの背景色をなしに設定 */
  color: black; /* 電話ボタンの文字色を黒に設定 */
}

.contact-button .icon {
  width: 30px; /* アイコンサイズを調整 */
  height: 30px; /* アイコンサイズを調整 */
  margin-right: 8px; /* アイコンとテキストの間に余白を追加 */
  margin-bottom: 0px;
}

.font-weight-bold {
  font-size: 28px; /* フォントサイズを28pxに設定 */
  margin-bottom: 20px; /* 見出しの下に隙間を追加 */
}

.col-md-6 {
  color: rgb(255, 254, 254); /* フォントカラーを白に設定 */
  margin-bottom: 20px; /* セクション内の要素間に隙間を追加 */
}

.col-md-6 a {
  color: rgb(255, 255, 255); /* リンクの色を白に設定 */
  margin-bottom: 20px; /* リンクの下に隙間を追加 */
}

/* 全幅を持つコンテナに追加のスタイルを設定 */
.container-fluid {
  padding-left: 0;
  padding-right: 0;
}

/* サムライ画像の配置 */
.samurai-left,
.samurai-right {
  width: 40%;
  position: absolute;
  bottom: 0;
  z-index: -1; /* 画像をコンテンツの下に配置 */
}

.samurai-left {
  left: -25%;
}

.samurai-right {
  right: -25%;
}

/* Contセクションのスタイル */
.cont img {
  margin-bottom: 10px;
}

.cont p {
  text-align: center;
  color: black; /* テキストカラーを黒に設定 */
}

/* Reactionsセクションのスタイル */
.reactions img {
  width: 100%;
  height: auto;
}

.reactions p {
  color: black; /* テキストカラーを黒に設定 */
}

/* h2のスタイル */
h2 {
  background: url("../img/katana.png") no-repeat center center;
  background-size: contain;
  text-align: center;
  padding: 20px;
  color: white;
}

/* bgflame.png をスクロール固定で画面最前面に設置 */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/bgflame.png") no-repeat center center;
  background-size: cover;
  z-index: 1001; /* ナビゲーションバーより前面に配置 */
  pointer-events: none; /* 背景がインタラクティブ要素をブロックしないように */
}

/* フッタースタイル */
footer {
  background-color: #343a40;
  color: white;
  padding: 20px 0;
  text-align: center;
}

footer img {
  width: 20%;
  height: auto;
}

footer p {
  color: white;
  margin: 0;
  padding: 10px 0;
}

/* Reactionsセクションのスタイル */
.reactions p {
  text-align: left;
}

/* SP版のスタイル */
@media (max-width: 768px) {
  /* ナビゲーションバーのスタイル調整 */
  .navbar .container {
    flex-direction: row; /* ナビゲーションバーを水平に並べる */
    justify-content: space-between; /* スペースを均等に配置 */
  }

  .navbar-brand {
    margin-bottom: 0; /* マージンをリセット */
  }

  .header {
    margin-top: 60px; /* ヘッダーの上部に余白を追加 */
  }

  .navbar-collapse {
    background-color: #343a40; /* ナビゲーションメニューの背景色を設定 */
  }

  .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.1); /* トグルボタンの境界色を設定 */
  }

  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); /* トグルアイコンの色を設定 */
  }

  .nav-link {
    color: white; /* ナビゲーションリンクの色を白に設定 */
  }

  /* コンテンツのパディング調整 */
  main.container {
    padding: 0 15px;
  }

  /* セクションのスタイル調整 */
  section {
    padding: 30px 0; /* セクション間の余白を減らす */
  }

  /* ボックスメニューのスタイル調整 */
  .boxmenu .col-md-3 {
    width: 100%;
    margin-bottom: 20px; /* 各ボックスの下に余白を追加 */
  }

  /* アクセスセクションのスタイル調整 */
  .access .col-md-6 {
    width: 100%;
    margin-bottom: 20px; /* 各カラムの下に余白を追加 */
  }

  .access .contact-buttons {
    flex-direction: column;
    gap: 10px; /* ボタン間の余白を調整 */
  }

  .contact-button {
    width: 100%;
    text-align: center; /* テキストを中央揃え */
  }

  /* フッターのスタイル調整 */
  footer img {
    width: 50%; /* 画像のサイズを調整 */
  }

  footer p {
    padding: 5px 0; /* パディングを減らす */
  }

  /* 画像サイズの調整 */
  img.img-fluid {
    width: 100%;
    height: auto;
  }

  .header img,
  .access img,
  .plan img,
  .optionplan img,
  .footer img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 768px) {
  .samurai-right {
    right: -10%;
  }
}