@charset "utf-8";

/*General style */

#accordion {
  padding: 30px 150px;
}
.panel-title a {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
  padding-right: 20px;
}
.panel-default > .panel-heading {
  text-align: left;
}
.panel-heading {
  padding: 15px 15px;
}

/* Code for animation -- to change direction of chevron just change -40px to 40px and vice versa */
.glyphicon-chevron-down-custom span,
.glyphicon-chevron-up-custom span {
  width: 10px;
  height: 5px;
  background-color: rgb(99, 99, 99);
  display: inline-block;
  transition: all 0.1s linear;
}
.glyphicon-chevron-down-custom .sp-1,
.glyphicon-chevron-up-custom .sp-2 {
  transform: skewY(-40deg);
}
.glyphicon-chevron-up-custom .sp-1,
.glyphicon-chevron-down-custom .sp-2 {
  transform: skewY(40deg);
}
.glyphicon {
  top: -2px;
}

/* 全体レイアウトを整える */
#accordion {
  max-width: 720px;
  margin: 24px auto;
  padding: 0 16px;
}

/* 見出しの余白・見た目 */
.panel {
  border: none;
  box-shadow: none;
}
.panel + .panel {
  margin-top: 10px;
}

.panel-heading {
  background: #f5f5f5;
  border-radius: 6px;
  padding: 14px 16px;
  position: relative;
  border: 1px solid #e3e3e3;
}

/* 見出しテキスト */
.panel-title {
  margin: 0;
}
.panel-title .accordion-toggle,
.panel-title > a {
  /* ボタン/リンクの“ボタンぽさ”を消しつつ、全幅クリックに */
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-transform: uppercase;
  font-weight: 700;
  width: 100%;
  text-align: left;
  display: block;
  cursor: pointer;
  outline: none;
}

/* フォーカス見やすく（キーボード操作用） */
.panel-title .accordion-toggle:focus,
.panel-title > a:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) inset;
  border-radius: 4px;
}

/* 右端の矢印アイコン位置を固定 */
.panel-heading .indicator {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}

/* 矢印（カスタム） */
.glyphicon-chevron-down-custom span,
.glyphicon-chevron-up-custom span {
  width: 12px;
  height: 6px;
  background-color: #6b6b6b;
  display: inline-block;
  transition: transform 0.18s ease;
}
.glyphicon-chevron-down-custom .sp-1,
.glyphicon-chevron-up-custom .sp-2 {
  transform: skewY(-40deg);
}
.glyphicon-chevron-up-custom .sp-1,
.glyphicon-chevron-down-custom .sp-2 {
  transform: skewY(40deg);
}
.glyphicon {
  top: 0;
}

/* 開いている見出しのスタイル（色を少し濃く） */
.panel-heading.is-open {
  background: #eee;
  border-color: #dcdcdc;
}

/* 本文まわり */
.panel-collapse .panel-body {
  padding: 14px 16px;
  border: 1px solid #e3e3e3;
  border-top: none;
  border-radius: 0 0 6px 6px;
}

.panel-title .accordion-toggle {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  width: 100%;
  text-align: left;
  display: block;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 700;
}

.panel-title .accordion-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) inset;
  border-radius: 4px;
}

.btn1 a {
  display: inline-block;
  width: 100%; /* 横いっぱいに広げる */
  max-width: 320px; /* PCで広すぎないように制限 */
  padding: 16px 20px; /* 大きめの余白 */
  font-size: 1.1rem; /* 少し文字も大きく */
  font-weight: 600;
  text-align: center;
  color: #fff;
  background-color: #f9b233; /* 明るいオレンジ系 */
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.1s ease;
  margin: 12px auto; /* 上下に余白をつけて中央寄せ */
}

/* hover時 */
.btn1 a:hover {
  background-color: #e79a00; /* 少し濃く */
  transform: translateY(-1px);
}

/* active時 */
.btn1 a:active {
  background-color: #cc8400;
  transform: translateY(1px);
}