@charset "UTF-8";
body {
  display: block;
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP";
  color: #333333;
  line-height: 1.6; /* 読みやすさのため行間を調整 */
  text-align: center;
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  letter-spacing: 1.5px;
  background: #F7F3FF; /* [class$="backs"] の背景色をこちらに移動 */
}

a {
  text-decoration: none;
}

.pc {
  display: block !important;
}

.sp {
  display: none !important;
}

.campaign-container {
  font-family: "Noto Sans JP", sans-serif;
  border-collapse: collapse;
}

/* テーブル共通のスタイル */
.table-cell {
  /* 常に16pxのフォントサイズを基準にする */
  font-size: 16px;
  line-height: 1.5;
  vertical-align: top;
  padding: 16px 12px; /* SP/PC共通で広めのパディング */
}

/* タイトル行のセルスタイル (グレー背景: #B3B3B3) */
.title-row-cell {
  background-color: #EFEFEF; /* 指定されたグレー背景 */
  font-weight: 500;
  text-align: left;
  padding: 8px 12px; /* 上下少し狭く */
  /* SP: 14px, PC: 16px */
  font-size: 14px;
}

.button-group-sp {
  display: flex;
  align-items: center;
  gap: 16px;
}

.highlight-sp {
  font-size: 16px;
  font-weight: bold;
}

.button {
  display: block;
  padding: 16px 24px;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  transition: 0.3s;
}

/* PCでのタイトル行のフォントサイズ調整 */
@media (min-width: 768px) {
  .title-row-cell {
    font-size: 16px;
    padding: 10px 12px;
  }
}
/* 内容行のセルスタイル (白背景) */
.content-row-cell {
  background-color: #fff;
  border-bottom: 1px solid #ccc; /* 行間の区切り線 */
}

/* 箇条書きリストのスタイル（インラインではない要素） */
.custom-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 8px; /* 画像のレイアウトに合わせて、リスト上部に少し間隔を空ける */
}

.custom-list li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 25px; /* 番号アイコン用のスペース */
  /* Flexboxを導入し、銘柄とコードの横並びを制御 */
  display: flex;
  justify-content: space-between; /* 銘柄とコードを両端に寄せる */
}

/* 銘柄名のコンテナ */
.item-name-container {
  /* Flexアイテムとして銘柄名が左側に来るようにする */
  flex-grow: 1;
  /* SPでの折り返しを考慮し、左側のスペースを調整 */
  padding-left: 0;
}

/* PCでのレイアウト調整 */
@media (min-width: 768px) {
  .item-name-container {
    /* PCでは、銘柄名がコードの幅を考慮した残りのスペースを占める */
    flex-basis: auto; /* 自動幅 */
  }
  .code-box-container {
    /* PCではコード部分を固定幅にして縦を揃える */
    flex-shrink: 0;
    width: 150px; /* コードボックスとマージンを考慮した固定幅 */
    text-align: right;
  }
  .custom-list li {
    /* PCでは折り返しを不要とする */
    flex-wrap: nowrap;
  }
}
/* 番号付きリストのアイコン */
.custom-list .step-number {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  background-color: #42deb1; /* メインカラー（仮） */
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 2px;
  /* Flexbox内の配置では、番号を絶対配置で対応する */
}

/* コード部分のスタイル */
.code-box {
  display: inline-block;
  border: 1px solid #42deb1; /* メインカラー（仮） */
  color: #227B61;
  width: 104px;
  font-size: 14px;
  white-space: nowrap; /* コードボックス内は折り返さない */
  margin-top: 2px; /* 銘柄名と縦位置を合わせるための微調整 */
  text-align: center;
}

/* 黒丸の装飾 */
.black-circle::before {
  content: "●";
  color: #000;
  font-size: 12px;
  margin-right: 4px;
}

/* コードボックスの親コンテナ（Flex用） */
.code-box-container {
  /* SPでは自動幅、PCでは固定幅 */
  text-align: right;
}

/* SPでコードが折り返した際、左側のマージンを調整 */
@media (max-width: 767px) {
  .code-box-container {
    width: 100%;
    margin-top: 4px;
  }
  .code-box {
    margin-left: 0;
  }
}
.common_fix .fix_banner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
}

.common_fix {
  position: fixed;
  bottom: 0.5%;
  top: auto;
  width: 100%;
  z-index: 6;
}

.fix_banner .ttl_fix {
  position: relative;
  z-index: 0;
  display: table;
  margin: 0 auto 4px;
  padding: 0 12px 0 18px;
  font-size: 24px;
  font-weight: 700;
}

.fix_banner .ttl_fix::before, .fix_banner .ttl_fix::after {
  content: "";
  position: absolute;
  z-index: -1;
  height: 26px;
  width: 2px;
  background: #000;
  bottom: 20%;
}

.fix_banner .ttl_fix::before {
  left: 0;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.fix_banner .ttl_fix::after {
  right: 0;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.fix_banner .btn_fix {
  margin-bottom: 11px;
}

.fix_banner .btn_fix a {
  display: block;
  margin: 0 auto;
  padding: 8px 20px 12px;
  width: 300px;
  background: #757575;
  color: #fff;
  text-decoration: none;
  font-size: 22px;
  border-radius: 10px;
  box-shadow: 1px 1px 20px 0px rgba(0, 0, 0, 0.3);
}

.fix_banner .btn_fix a:hover {
  opacity: 1;
  box-shadow: none;
}

.btn-style {
  display: block;
  padding: 16px 24px;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  transition: 0.3s;
}

.fix_banner .txt_fix {
  font-size: 16px;
  font-family: "Noto Sans JP";
  font-weight: bold;
}

.fix_banner .fix_img {
  display: none;
  margin: 0 auto 3px;
}

.fix_banner .fix_img.img2 {
  max-width: 198px;
}

img {
  /* 画像の選択を禁止 */
  -webkit-user-drag: none; /* Safari, Chrome */
  -moz-user-drag: none; /* Firefox */
  /* iOSでの長押し時のメニューを禁止 */
  -webkit-touch-callout: none;
}

a {
  display: block;
  text-align: center;
  margin: 0 auto;
  transition: 0.5s;
}

a:hover {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

img.image-circle1 {
  object-position: 85% 20%;
  border-radius: 15px;
}

.box1 {
  width: 270px;
  padding: 0.5em 1em;
  margin: 12px auto;
  color: #FFF;
  background: #149c91;
  border: solid 2px;
  border-radius: 10px;
}

.header-container {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: fixed;
  align-items: center;
  padding: 16px 20px;
  box-sizing: border-box;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.content-image {
  max-width: 100%;
  height: auto;
  display: block;
}

.header-logo {
  display: block;
  height: 60px;
  width: 240px;
}

.anchor {
  display: flex;
  justify-content: center;
  align-items: stretch;
  text-align: center;
  gap: 16px;
  margin-bottom: 64px;
}

.anchor_btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #42DEB1;
  background: #fff;
  border: solid 2px #42DEB1;
  font-weight: bold;
  border-radius: 8px;
  width: 40%;
  padding: 16px;
  cursor: pointer;
  text-decoration: none;
  font-size: 15px;
  gap: 8px;
  line-height: normal;
}

.notice {
  list-style: none; /* リストのデフォルトの「・」を消す */
  padding-left: 0; /* 左側の余白（ポインタがあった場所）を詰める */
  color: #7A7A7A;
  font-size: 13px;
}

ul.notice li:before {
  content: "※";
  margin-right: 4px; /* ※ の後ろに少し隙間を作る */
}

footer {
  margin-top: 64px;
}

.ft_ttl {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 21px;
}

.txt {
  margin-bottom: 30px;
  line-height: 1.6;
  font-size: 16px;
  text-align: left;
}

footer .ft_btn a {
  text-decoration: none;
  color: #00A1E0;
}

footer .ft_info {
  font-size: 16px;
  text-align: center;
  margin-bottom: 70px;
}

footer address {
  text-align: center;
  font-size: 16px;
  font-style: normal;
  margin-top: 28px;
}

@media screen and (min-width: 769px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
}
/* デフォルト（SP向け）スタイル */
.accordion-container {
  margin: 20px auto;
  font-family: "Noto Sans JP", sans-serif;
  border: 1px solid #ccc; /* 枠線 */
  /* 角丸は0 */
  border-radius: 0;
  overflow: hidden;
}

/* PC向けスタイル */
@media (min-width: 768px) {
  /* PCヘッダーフォントサイズ */
  .accordion-header-text {
    font-size: 16px;
  }
}/*# sourceMappingURL=detail-cp202602-01.css.map */