body {
  background-color: #fbfcfc;
}

/* ナビゲーションバー上のロゴ画像 */
#logo-img {
  width: 252px;
  height: 36px;
}

/* モバイルサイズ（例：画面幅576px以下）のときだけサイズ変更 */
@media (max-width: 576px) {
  #logo-img {
    width: 168px;
    /* お好みで調整 */
    height: 24px;
  }
}

/* LP用見出し */
.tan_heading {
  font-weight: bold;
  padding-bottom: 0.5em;
  text-align: center;
  position: relative;
}

.tan_heading::after {
  content: '';
  background-color: #31a2ac;
  width: 2em;
  height: 5px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

/* 普通の記事用の見出し（左揃え）h2 */
.article_heading {
  padding: .5em .7em;
  border-left: 5px solid #00b396;
  background-color: #e3f7f3;
  color: #333333;
}

/* 普通の記事用の見出し（左揃え）h3 */
.article_heading2 {
  border-bottom: 3px solid #f2f2f2;
}

.article_heading2 span {
  display: inline-block;
  position: relative;
  padding: 0 .4em .2em;
  color: #333333;
}

.article_heading2 span::before {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #00b396;
  content: '';
}

/* 条約の見出し用 */
h1.treaty1 {
  padding: 1rem 2rem;
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
}

h2.treaty2 {
  padding: 1rem 2rem;
  border-bottom: 3px solid #000;
  background: #f4f4f4;
}

h3.treaty3 {
  padding: 1rem 2rem;
  border-bottom: 3px dotted #000;
  background: #f4f4f4;
}

/* choice.phpの正解不正解表示 */
.answer-header-correct {
  background-color: #31a2ac;
  /* primary */
  color: #fff;
}

.answer-body-correct {
  background-color: #cbfbff;
  /* Primaryの薄い色 */
}

.answer-header-incorrect {
  background-color: #af1c1c;
  /* 赤 */
  color: #fff;
}

.answer-body-incorrect {
  background-color: #fcc2c2;
  /* 赤の薄い色 */
}

.answer-header-review {
  background-color: #ffc107;
  /* 黄色 */
  color: #212529;
}

.answer-body-review {
  background-color: #fff3cd;
  /* 黄色の薄い色 */
}

/* 文字修飾用 */
.hilight_yellow {
  background-color: rgb(255, 255, 161);
  color: black;
  font-weight: bold;
  padding: 0 0.2em;
  /* 見やすくするための余白（任意） */
  border-radius: 3px;
  /* 角丸（お好みで） */
}

/* トップスライダー */
.top-carousel-caption-bg {
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(2px);
}

/* 比率固定の枠 */
.top-carousel-media {
  width: 100%;
  aspect-ratio: 192 / 45;
  /* ←PC時の比率（例） */
  position: relative;
  overflow: hidden;
}

/* picture / img を枠いっぱいに */
.top-carousel-media picture,
.top-carousel-media img {
  width: 100%;
  height: 100%;
  display: block;
}

.top-carousel-img {
  object-fit: cover;
  /* 余りはトリミングして枠にフィット */
  object-position: center;
  /* 切り抜き基準（必要なら変える） */
}

/* スマホ時は比率を変える（例） */
@media (max-width: 767px) {
  .top-carousel-media {
    aspect-ratio: 108 / 60;
    /* ←スマホ時の比率（例） */
  }
}

/************************************
** 吹き出し
************************************/
/* 吹き出し 全体*/
.talking {
  margin-bottom: 2em;
  position: relative;
}

.talking:before,
.talking:after {
  clear: both;
  content: "";
  display: block;
}

/*アイコン*/
.talking figure {
  width: 60px;
  /*アイコンの横幅*/
  height: 60px;
  /*アイコンの縦幅*/
}

.talking-left_icon {
  float: left;
  margin-right: 20px;
  /*アイコンの右の余白(左の吹き出し)*/
}

.talking-right_icon {
  float: right;
  margin-left: 20px;
  /*アイコンの左の余白(右の吹き出し)*/
}

.talking figure img {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 2px solid #aaa;
  border-radius: 50%;
  /*アイコンの角丸*/
}

/*アイコンの下の名前*/
.talking-left_icon figcaption,
.talking-right_icon figcaption {
  padding: 2px 0 0;
  font-size: 12px;
  text-align: center;
}

/*吹き出しのセリフ部分*/
.talking-left,
.talking-right {
  position: relative;
  padding: 10px 10px 10px 15px;
  border-style: solid;
  /*枠線の線種*/
  border-radius: 10px;
  /*セリフを入れる部分の角丸*/
  max-width: calc(100% - 80px);
}

.talking p {
  font-size: 1.1em;
  font-weight: bold;
  margin: 0;
}

.talking p :last-child {
  margin: 0;
}

/*---左の吹き出し---*/
.talking-left {
  float: left;
  border-width: 2px;
  /*枠線の太さ*/
  border-color: #f0fffb;
  /*枠線の色*/
  background: #f0fffb;
  /*背景色*/
}

/*左の吹き出し 三角*/
.talking-left:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #f0fffb;
  /*三角の線になる部分*/
  top: 15px;
  left: -22px;
}

.talking-left:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #f0fffb;
  top: 15px;
  left: -19px;
}

/*---右の吹き出し---*/
.talking-right {
  float: right;
  border-width: 2px;
  /*枠線の太さ*/
  border-color: #fcedfa;
  /*枠線の色*/
  background: #fcedfa;
  /*背景色*/
}

/*右の吹き出し 三角*/
.talking-right:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #fcedfa;
  /*三角の線になる部分*/
  top: 15px;
  right: -22px;
}

.talking-right:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #fcedfa;
  top: 15px;
  right: -19px;
}

/* plan.php用 */
.pricing-top {
  min-height: 140px;
  /* ← 両カードで同じ値にする */
}

/* manual.phpの目次用 */
.toc-toggle-btn i {
  transition: transform 0.25s ease;
}

/* 閉じているとき（aria-expanded="false"）は90度回転 */
.toc-toggle-btn[aria-expanded="false"] i {
  transform: rotate(-90deg);
}

/* カルーセルCTAボタン */
.carousel-cta {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  z-index: 10;
}

/* スマホでは少し上に */
@media (max-width: 767px) {
  .carousel-cta {
    bottom: 18%;
  }
}

/* 短これPLUS バナー画像 */
.upgrade-plus-banner {
  max-width: 640px;
  /* 最大横幅 */
  width: 100%;
  /* スマホではカード幅に追従 */
  height: auto;
  /* 縦横比を保持 */
}

/* ナビゲーションバーに設定するh1タグ */
.navbar-h1 {
  margin-bottom: 0;
  padding: 0;
  font-size: 0;
  /* テキストサイズをゼロにしてロゴ画像に合わせる */
  line-height: 0;
  /* 行間によるy軸のズレを解消 */
  display: inline;
  /* ブロック要素化による改行を防ぐ */
}