/* スマホでの横ゆれを防止 */
body, html {
  overflow-x: hidden;
}

.container {
  max-width: 100%;
}

.icon-link > .bi {
  width: .75em;
  height: .75em;
}

/* タイトル囲みボックス */
.box26 {
  position: relative;
  margin: 3em;
  padding: 0.5em 1em;
  border: solid 3px #95ccff;
  border-radius: 8px;
}
/* スマホ */
@media screen and (max-width:768px) {
  .box26{
    margin: 0.5em;
  }
}

.box26 .box-title {
  position: absolute;
  display: inline-block;
  top: -13px;
  left: 10px;
  padding: 0 9px;
  line-height: 1;
  font-size: 19px;
  background: #FFF;
  color: #95ccff;
  font-weight: bold;
}
.box26 p {
  margin: 0; 
  padding: 0;
}

/*
 * リード文
 */

.lead-product {
  font-size: 20px; 
  padding: 2% 5%; 
  text-align: left; 
}

/*
 * ボタン
 */

a.btn--orange {
  color: #fff;
  background-color: #eb6100;
  border-bottom: 5px solid #b84c00;
}
a.btn--orange:hover {
  margin-top: 3px;
  color: #fff;
  background: #f56500;
  border-bottom: 2px solid #b84c00;
}
a.btn--shadow {
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}


/*
 * マーカー
 */
.marker-pink {
  background: linear-gradient(transparent 60%,#faa2b1 60%);
}
.marker-blue {
  background: linear-gradient(transparent 60%,#86d3f7 60%);
}
.marker-green {
  background: linear-gradient(transparent 60%, #8cff7d 60%);
}
.marker-yellow {
  background: linear-gradient(transparent 60%, #f9ff52 60%);
  font-weight: bold; /* 太文字を追加 */
}
.marker-orange {
  background: linear-gradient(transparent 60%, #f9b737 60%);
}
.marker-orange {
  background: linear-gradient(transparent 60%, #f9b737 60%);
}

/*
 * Extra utilities
 */

.flex-equal > * {
  flex: 1;
}
@media (min-width: 768px) {
  .flex-md-equal > * {
    flex: 1;
  }
}


/*キャッチコピー トップページ画像下 */
.blue-container {
  background-color: #3788e1;
  text-align: center;
  }

  /*キャッチコピー2 トップページ画像下 */
.white-container {
  text-align: center;
  }

  .catch-copy {
  font-size: 2.6rem;
  color: #FFFFFF;
  }
  
.white {
  color: #FFFFFF;
}

/* キャッチコピー3 黒 */
.catch-copy-black {
  font-size: 3.6rem;
  color: #333333; /* 濃いグレー */
}

/* 価格表示 */
.pricing-container{
  background-color: #eaedf4;
  text-align: center;
  }
  
  .pricing{
  font-size: 3.0rem;
  color: #3788e1;
  }
  
  .price-beforeafter{
    font-size: 1.6rem;
    }
  
  .price-title{
  font-size: 3.0rem;
  }
  
  .price-sentence{
  background: linear-gradient(transparent 60%, #f9ff52 60%);
  font-size: 1.6rem;
  color: #3788e1;
  }


/* 斜め線による強調 */
.attention {
  position: relative;
  display: inline-block;
  padding: 0 30px;
  margin-bottom: 36px;
}
     
.attention:before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 1px;
  height: 100%;
  background: #000;
  border-radius: 3px;
  transform: rotate(-25deg);
}
     
.attention:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: #000;
  border-radius: 3px;
  transform: rotate(25deg);
}

/* 斜め線による強調 白 */
.attention-white {
  position: relative;
  display: inline-block;
  padding: 0 30px;
  margin-bottom: 36px;
}

.attention-white:before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 1px;
  height: 100%;
  background: #fff; /* 白 */
  border-radius: 3px;
  transform: rotate(-25deg);
}

.attention-white:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: #fff; /* 白 */
  border-radius: 3px;
  transform: rotate(25deg);
}


/* シェブロンリストの中央揃え */
.shvron-list-container {
  display: flex; /* フレックスボックスを有効化 */
  justify-content: center; /* 水平方向の中央揃え */
  align-items: center; /* 垂直方向の中央揃え */
  height: 100vh; /* 画面全体の高さを確保 */
}

/* シェブロンによるリスト */
ul.chevron-list {
  padding: 0.5em 1em 0.5em 2.5em; /* 左側の余白を少し増やす */
  position: relative;
}

ul.chevron-list li {
  line-height: 1.8; /* 高さを調整して見やすく */
  padding: 0.5em 0;
  list-style-type: none !important;
  position: relative; /* 必須 */
  padding-left: 6em; /* シェブロンと文字の間隔をさらに広げる */
  font-size: 2em; /* 文字サイズを2emに設定 */
  font-weight: bold; /* 文字を太く設定 */
}

ul.chevron-list li:before {
  font-family: "Font Awesome 5 Free"; /* Font Awesomeのフォントを指定 */
  font-weight: 900; /* アイコンが太字になるように設定 */
  content: "\f138"; /* シェブロンアイコンのコード */
  position: absolute;
  left: 1em; /* シェブロンの位置を調整 */
  color: skyblue; /* アイコン色 */
  font-size: 2.5em; /* アイコンサイズを文字より少し大きく */
  top: 50%; /* 垂直方向の位置を調整 */
  transform: translateY(-50%); /* 垂直中央揃え */
}


/* リボンのボックス */
.ribbon15-wrapper {  
  display: block;
  position: relative;
  margin: 20px auto;
  padding: 1.5px 0px 20px 140px; /* 左側にスペースを確保 上右下左 */
  width: 90%; /* ボックスの幅を90%に変更 */
  background: hsl(0, 0%, 95%);
  box-sizing: border-box;
  border-radius: 15px; /* ボックスの角を丸める */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 軽い影を追加して立体感を演出 */
}

/* リボン青 */
.ribbon15 {  
  display: inline-block;
  position: absolute;
  top: -15px; /* リボンの位置を調整 */
  left: 10px;
  margin: 0;
  padding: 15px 0; /* リボンの高さを調整 */
  z-index: 2;
  width: 110px; /* リボンの幅を広げる */
  text-align: center;
  color: white;
  font-size: 2.2em; /* 文字のフォントサイズをemで指定 */
  font-weight: bold; /* 文字を太字に */
  background: linear-gradient(#3788e1 0%, #1f5ea1 100%); /* 青系のグラデーションに変更 */
  border-radius: 10px; /* リボンの角を丸める */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
}

/* リボン オレンジ */
.ribbon16 {  
  display: inline-block;
  position: absolute;
  top: -15px; /* リボンの位置を調整 */
  left: 10px;
  margin: 0;
  padding: 15px 0; /* リボンの高さを調整 */
  z-index: 2;
  width: 110px; /* リボンの幅を広げる */
  text-align: center;
  color: white;
  font-size: 2.2em; /* 文字のフォントサイズをemで指定 */
  font-weight: bold; /* 文字を太字に */
  background: linear-gradient(#ed7700 0%, #d85a00 100%); /* オレンジ系のグラデーションに変更 */
  border-radius: 10px; /* リボンの角を丸める */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
}

.content-text {
  font-size: 2.2em; /* 文字のフォントサイズをemで指定 */
  font-weight: bold; /* 文字を太字に */
  color: #333; /* 文字色を調整 */
  line-height: 1.5;
  margin-top: 40px; /* 文字とリボンの間にスペースを確保 */
}

.content-text2 {
  font-size: 1.5em; /* 文字のフォントサイズをemで指定 */
  font-weight: bold; /* 文字を太字に */
  color: #333; /* 文字色を調整 */
  line-height: 1.5;
}

/* シンプル 吹き出しここから */
/* シンプル 吹き出しここから */
:root {
  --noborder-chat-item-distance: 8px; /* アイコン画像〜吹き出し間の距離 */
  --noborder-chat-icon-radius: 50%; /* アイコンの形状 */
  --noborder-chat-icon-bgcolor: rgb(240,240,240); /* アイコン背景色 */
  --noborder-chat-icon-bgimage-left: url(img/teacher1.png); /* 左側アイコン画像 */
  --noborder-chat-icon-bgimage-right: url(img/teacher2.png); /* 右側アイコン画像 */
  --noborder-chat-icon-bgimage-third: url(img/teacher3.png); /* ３人目アイコン画像 */
  --noborder-chat-icon-bgimage-fourth: url(img/teacher4.png); /* ４人目アイコン画像 */
  --noborder-chat-text-radius: 6px; /* 吹き出しの角丸 */
  --noborder-chat-text-bgcolor: rgb(240,240,240); /* 吹き出しの背景色 */
  --noborder-chat-text-color: rgb(51,51,51); /* 吹き出しの文字色 */
  --noborder-chat-triangle-size: 10px; /* 吹き出しの三角形の大きさ */
  --noborder-chat-triangle-position-top: 15px; /* 吹き出しの三角形の位置 */
}

.noborder__chat {
  display: flex;
  align-items: flex-start;
  gap: var(--noborder-chat-item-distance);
}

.noborder__chat .chat__icon {
  width: 80px;
  height: 80px;
  border-radius: var(--noborder-chat-icon-radius);
  background-color: var(--noborder-chat-icon-bgcolor);
  background-size: cover;
}

/* 各キャラごとのアイコン画像 */
.noborder__chat.chat__1 .chat__icon {
  background-image: var(--noborder-chat-icon-bgimage-left);
}

.noborder__chat.chat__2 .chat__icon {
  background-image: var(--noborder-chat-icon-bgimage-right);
  order: 2;
}

.noborder__chat.chat__3 .chat__icon {
  background-image: var(--noborder-chat-icon-bgimage-third);
}

.noborder__chat.chat__4 .chat__icon {
  background-image: var(--noborder-chat-icon-bgimage-fourth);
  order: 2;
}

.noborder__chat .chat__text {
  position: relative;
  max-width: 80%; /* 吹き出しの最大幅を広げる */
  padding: 10px;
  border-radius: var(--noborder-chat-text-radius);
  background: var(--noborder-chat-text-bgcolor);
  color: var(--noborder-chat-text-color);
}

/* 右側の吹き出し */
.noborder__chat.chat__r {
  justify-content: flex-end;
}

.noborder__chat.chat__r .chat__icon {
  order: 2;
}

.noborder__chat .chat__text::after {
  content: "";
  display: block;
  position: absolute;
  top: var(--noborder-chat-triangle-position-top);
  left: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: var(--noborder-chat-triangle-size) var(--noborder-chat-triangle-size) var(--noborder-chat-triangle-size) 0;
  border-color: transparent var(--noborder-chat-text-bgcolor) transparent transparent;
}

.noborder__chat.chat__r .chat__text::after {
  left: auto;
  right: -10px;
  border-width: var(--noborder-chat-triangle-size) 0 var(--noborder-chat-triangle-size) var(--noborder-chat-triangle-size);
  border-color: transparent transparent transparent var(--noborder-chat-text-bgcolor);
}

/* シンプル 吹き出しここまで */






/* 見出し ユーザーの声 ここから */
.users-voice {
  position: relative;
  display: inline-block;
  padding: 0 70px; /* 余白を少し広げる */
}

.users-voice:before, .users-voice:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 120px; /* 横線を長くする */
  height: 3px; /* 横線を太くする */
  background-color: black;
}

.users-voice:before {
  left: -130px; /* 左の線を適切な位置に調整 */
}

.users-voice:after {
  right: -130px; /* 右の線を適切な位置に調整 */
}
/* 見出し ユーザーの声 ここまで */








/* GPT OUTPUT 広告リンク */
a.gray:link{ color: #6e757c;}
a.gray:visited{ color:#6e757c;}

/*レスポンシブ対応 */
/*PCでは無効（改行しない）*/
.sma{
  display: none;
}

/*スマートフォンでは有効（改行する）*/
@media screen and (max-width:768px) {
  .sma{
      display: block;
  }
}

/* スマホ非表示 */
@media (max-width: 768px){
  .smanone{ display: none; }
}

/* PC非表示 */
@media (min-width: 768px){
  .pcnone{ display: none; }
}
.pcnone {
  padding: 4%; 
  font-size: 19px;
}

/* モバイル用のレスポンシブ対応 catch-copy-black */
@media (max-width: 768px) {
  .catch-copy-black {
    font-size: 2em; /* モバイルで文字サイズを2emに設定 */
  }
}

/* シェブロンのレスポンシブ対応 */
@media (max-width: 768px) {
  ul.chevron-list {
    padding-left: 1.5em; /* 左側の余白を狭める */
  }

  ul.chevron-list li {
    padding-left: 3em; /* モバイルでさらに間隔を狭める */
    font-size: 1.5em; /* 文字サイズを少し小さく */
  }

  ul.chevron-list li:before {
    font-size: 2em; /* シェブロンのサイズを調整 */
    left: 0.2em; /* シェブロンをさらに左に寄せる */
  }
}

@media (max-width: 480px) {
  ul.chevron-list {
    padding-left: 1em; /* 左側の余白をさらに狭める */
  }

  ul.chevron-list li {
    padding-left: 2em; /* さらに間隔を縮める */
    font-size: 1.2em; /* 文字サイズをさらに小さく */
  }

  ul.chevron-list li:before {
    font-size: 1.5em; /* シェブロンのサイズをさらに調整 */
    left: 0.1em; /* シェブロンをもっと左に寄せる */
  }
}


/* リボン 768px 以下の画面サイズ用 */
@media (max-width: 768px) {
  .ribbon15-wrapper {
    padding: 80px 10px 20px 10px; /* 上部にさらに余裕を確保 */
  }

  .ribbon15 {
    top: -10px; /* リボンの位置を微調整 */
    left: 5px; /* 左位置を微調整 */
    width: 100px; /* リボンの幅を調整 */
    font-size: 1.8em; /* フォントサイズを縮小 */
  }

  .content-text {
    font-size: 1.8em; /* フォントサイズを縮小 */
    margin-top: 50px; /* リボンとの間隔を調整 */
  }

  .content-text2 {
    font-size: 1.2em; /* フォントサイズを縮小 */
  }
}