@charset "UTF-8";
/* 基本スタイル */
html,
body {
  overscroll-behavior-x: none; /* 横方向のオーバースクロールを無効化 */
  overflow-x: hidden; /* 横方向のスクロールバーを非表示 */
}

img {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

a:focus,
a:active,
img:focus {
  outline: none;
  box-shadow: none;
}

.header {
  height: 50px;
  width: 100%;
  background-color: #333;
  color: white;
  text-align: center;
  line-height: 50px;
}

.container {
  display: flex;
  flex-direction: row; /* デフォルトは横並び */
  height: calc(100vh - 50px); /* ヘッダーを除いた全高 */
}
@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
    height: auto; /* 高さを自動調整 */
  }
}

.only-sp {
  display: none;
}
@media screen and (max-width: 1180px) {
  .only-sp {
    display: inline;
  }
}

.left-section {
  width: 660px;
  display: flex;
  flex-direction: column;
  background-color: #ebeae7;
  position: relative;
}
@media screen and (max-width: 768px) {
  .left-section {
    width: 100%;
    height: 100px;
    background-color: #e2e1dd;
  }
}
@media screen and (max-width: 1180px) and (min-width: 780px) {
  .left-section {
    width: 586px;
  }
}

.left-top-section {
  width: 660px;
  height: calc(100% - 380px);
  overflow-y: auto;
}
@media screen and (max-width: 768px) {
  .left-top-section {
    margin-bottom: 15px;
    width: 100%;
  }
}

.left-bottom-section {
  height: 335px;
  width: 100%;
  position: absolute;
  bottom: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .left-bottom-section {
    display: none;
  }
}

/*

PC

*/
.a-box {
  width: 570px;
  height: 335px;
  overflow-y: hidden;
}

.b-box {
  width: 570px;
  height: 24px;
  background-color: #f2f2f2;
  border-radius: 5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.b-box p {
  color: #333;
  font-size: 13px;
  margin: 0;
  font-weight: bold;
}

.c-box {
  width: 570px;
  height: 300px;
  display: flex;
  gap: 15px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .c-box {
    flex-direction: column; /* 内部ボックスを縦並びに変更 */
  }
}

/*

SP

*/
.sp-pdf-section {
  display: none;
}
@media screen and (max-width: 768px) {
  .sp-pdf-section {
    height: 800px;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
}

.sp-a-box {
  width: 339px;
  height: 800px;
  /* overflow-y: hidden; */
}

.sp-b-box {
  width: 339px;
  height: 24px;
  background-color: #f2f2f2;
  border-radius: 5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-b-box p {
  color: #333;
  font-size: 13px;
  margin: 0;
  font-weight: bold;
}

.sp-c-box {
  width: 339px;
  height: 669px;
  display: flex;
  gap: 15px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .sp-c-box {
    flex-direction: column; /* 内部ボックスを縦並びに変更 */
  }
}

.sp-d1-box,
.sp-d2-box,
.sp-d3-box {
  width: 339px;
  height: 213px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sp-d1-box,
  .sp-d2-box,
  .sp-d3-box {
    border-radius: 0;
  }
}

.sp-d1-top,
.sp-d2-top,
.sp-d3-top {
  width: 339px;
  height: 99px;
  border-radius: 8px 8px 0 0;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sp-d1-top,
  .sp-d2-top,
  .sp-d3-top {
    border-radius: 0;
  }
}

.sp-d1-top {
  background-image: url("../img/b1_price_size_base_sp.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #978c73;
}

.sp-d2-top {
  background-image: url("../img/b2_price_size_base_sp.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #c7e2e8;
}

.sp-d3-top {
  background-image: url("../img/b3_price_size_base_sp.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #dcecf0;
}

.sp-d1-bottom,
.sp-d2-bottom,
.sp-d3-bottom {
  width: 339px;
  height: 114px; /* ボタンサイズ分の高さに調整 */
  background-color: #fff;
  border-radius: 0 0 8px 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  grid-template-rows: repeat(2, 1fr); /* 2行 */
  padding: 4px; /* ボタン外側のスペース */
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
  .sp-d1-bottom,
  .sp-d2-bottom,
  .sp-d3-bottom {
    border-radius: 0;
  }
}

/*

PC

*/
.d1-box,
.d2-box,
.d3-box {
  width: 180px;
  height: 300px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  position: relative;
}
@media screen and (max-width: 768px) {
  .d1-box,
  .d2-box,
  .d3-box {
    width: 100%; /* ボックスの幅を100%に */
    max-width: 300px; /* 最大幅を制限 */
    margin: 0 auto 15px; /* 中央揃えと下マージン */
  }
}

.d1-top,
.d2-top,
.d3-top {
  width: 180px;
  height: 102px;
  border-radius: 8px 8px 0 0;
  position: relative;
}
@media screen and (max-width: 768px) {
  .d1-top,
  .d2-top,
  .d3-top {
    width: 100%;
    max-width: 300px; /* スマホでの幅調整 */
    margin: 0 auto;
  }
}

.d1-top {
  background-image: url("../img/b1_price_size_base.png");
  background-size: contain;
  background-position: center;
}

.d2-top {
  background-image: url("../img/b2_price_size_base.png");
  background-size: contain;
  background-position: center;
}

.d3-top {
  background-image: url("../img/b3_price_size_base.png");
  background-size: contain;
  background-position: center;
}

.d1-bottom,
.d2-bottom,
.d3-bottom {
  width: 180px;
  height: 194px;
  background-color: #fff;
  border-radius: 0 0 8px 8px;
  transition: background-color 0.5s ease-in-out, background-image 0.5s ease-in-out;
}
@media screen and (max-width: 768px) {
  .d1-bottom,
  .d2-bottom,
  .d3-bottom {
    width: 100%;
    max-width: 300px; /* スマホでの幅調整 */
    margin: 0 auto;
  }
}

.right-section {
  width: calc(100% - 660px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #e2e1dd;
}
@media screen and (max-width: 768px) {
  .right-section {
    width: 100%;
    margin-bottom: 15px;
    position: relative;
    height: 580px;
  }
}
@media screen and (max-width: 1180px) and (min-width: 780px) {
  .right-section {
    width: calc(100% - 586px);
  }
}

.top-section {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: calc(100% - 260px);
  margin: 15px 15px 0 15px;
  padding-bottom: 15px;
}
@media screen and (max-width: 768px) {
  .top-section {
    height: 300px;
    padding-bottom: 0;
  }
}

.responsive-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.bottom-section {
  height: 260px;
  position: absolute;
  bottom: 0;
  width: calc(100% - 660px);
  overflow: auto;
}
@media screen and (max-width: 768px) {
  .bottom-section {
    top: 320px;
    width: 100%;
    background-color: #e2e1dd;
    position: absolute;
  }
}
@media screen and (max-width: 1180px) and (min-width: 780px) {
  .bottom-section {
    width: calc(100% - 586px);
  }
}

.price-button {
  width: 180px;
  height: 36px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  bottom: 6px;
  left: 0;
  border: none;
  cursor: pointer;
}

/* 各ボタンに個別の背景画像を設定 */
.button-d1 {
  background-image: url("../img/b1_price_size_btn.png");
}
@media screen and (max-width: 768px) {
  .button-d1 {
    background-image: url("../img/b1_price_size_btn_sp.png");
  }
}

.button-d2 {
  background-image: url("../img/b2_price_size_btn.png");
}
@media screen and (max-width: 768px) {
  .button-d2 {
    background-image: url("../img/b2_price_size_btn_sp.png");
  }
}

.button-d3 {
  background-image: url("../img/b3_price_size_btn.png");
}
@media screen and (max-width: 768px) {
  .button-d3 {
    background-image: url("../img/b3_price_size_btn_sp.png");
  }
}

/*
SP
*/
.sp-price-button {
  width: 339px;
  height: 45px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  bottom: 0;
  left: 0;
  border: none;
  cursor: pointer;
}

/* 各ボタンに個別の背景画像を設定 */
.sp-button-d1 {
  background-image: url("../img/b1_price_size_btn_sp.png");
}

.sp-button-d2 {
  background-image: url("../img/b2_price_size_btn_sp.png");
}

.sp-button-d3 {
  background-image: url("../img/b3_price_size_btn_sp.png");
}

.sp-pdf-button {
  width: 164px; /* 幅を半分に変更 */
  height: 54px; /* 高さを半分に変更 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sp-pdf-button.sp-pdf-button-blank {
  cursor: none;
}

/* 配置ルール */
#d1_btn_0,
#d2_btn_0,
#d3_btn_0 {
  grid-column: 1;
  grid-row: 1; /* 左上 */
}

#d1_btn_1,
#d2_btn_1,
#d3_btn_1 {
  grid-column: 2;
  grid-row: 1; /* 右上 */
}

#d1_btn_2,
#d2_btn_2,
#d3_btn_2 {
  grid-column: 1;
  grid-row: 2; /* 左下 */
}

#d1_btn_3,
#d2_btn_3,
#d3_btn_3 {
  grid-column: 2;
  grid-row: 2; /* 右下 */
}/*# sourceMappingURL=base.css.map */