@charset "UTF-8";
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  margin: 0;
  padding: 0;
  font-size: 15px;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  padding: 0;
  line-height: 1.7;
  background-color: #3A3A3A;
  background-image: linear-gradient(to bottom, #ffffff, #fdfbe8);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
}
p {
  margin: 0;
  padding: 20px 0 60px 0
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
strong {
  color: #711925;
  margin-top: 10px;
  display: block
}
@media (max-width: 768px) {
  p {
    margin: 0;
    padding: 20px 0 40px 0
  }
}
/* =============================
   迷惑メール対策、電話
============================= */
.contact_box {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: center;
  gap: 20px;
  margin-bottom: 50px;
  margin-top: 10px
}
.tel-link {
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  /* Gridの子要素になるので display: inline-block はなくても大丈夫です */
  color: #711925;
  white-space: nowrap; /* 電話番号が途中で改行されないように */
}
.email-link {
  font-size: 14px;
  padding: 6px 38px;
  background-color: #701925;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  white-space: nowrap; /* ボタン内のテキストも一行で */
}
@media (max-width: 768px) {
  .contact_box {
    grid-template-columns: auto;
    gap: 10px;
    margin-bottom: 30px;
  }
}
/* =============================
   共通レイアウト
============================= */
.section {
  padding: 30px 20px 100px 20px;
}
/* 通常コンテナ */
.container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}
@media (max-width: 768px) {
  .section {
    padding: 0px 0px 70px 0px;
  }
}
/* =============================
カラム
============================= */
.grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 80px;
  /* position: relative はそのままでOK */
  position: relative;
}
.grid_right {
  /* ここを修正：relativeb を sticky に変更 */
  position: sticky;
  /* 画面の上からどの位置で止まるかを指定（例：20px） */
  top: 30px;
  /* 重要：sticky要素を上端に揃える */
  align-self: start;
  width: 100%;
}
/* スマホ時は固定を解除する場合（お好みで） */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .grid_right {
    display: none
  }
}
/* =============================
ページ
============================= */
.tokei_shindan {
  background-color: #711925
}
.tokei_shindan p {
  color: #FFFFFF;
  padding: 20px 30px 20px 30px
}
.tokei_shindan p span {
  display: block;
  margin-top: 10px;
  font-size: 0.6em
}
.tokei_shindan img:first-child {
  padding: 30px
}
.watokei {
  display: none
}
@media (max-width: 768px) {
  .watokei {
    display: block;
    padding: 30px 50px 0 50px
  }
}
/* =============================
   ヘッダー
============================= */
/* ロゴ */
.logo {
  margin: 0 0 30px 0;
}
@media (max-width: 768px) {
  .logo {
    margin: 0 0 15px 0;
  }
}
/* =============================
   フッター
============================= */
.footer {
  background-color: #3A3A3A;
  color: #fff;
  padding: 40px 0 20px;
  margin: 0px
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}
/* コピーライト */
.copyright {
  text-align: center;
  font-size: 12px;
  opacity: 0.6;
}