@charset "UTF-8";

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html,
body {
height: 100%;
font-family: sans-serif;
}

/* 背景画像 */
.bg {
position: fixed;
inset: 0;
background: url("/lp25/direct05/img3/pc_bg.jpg") no-repeat center center;
background-size: cover;
z-index: -1;
}

/* ラッパー（左右カラム構成） */
.wrapper {
display: flex;
justify-content: center;
align-items: stretch;
width: 100%;
height: 100vh;
}

/* 左側：ロゴとCTA */
.left {
flex: 1;
display: flex;
justify-content: end;
align-items: center;
padding-right: 5%;
}
.left-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.logo {
width: 100%;
max-width: 600px;
margin-bottom: 40px;
}

.cta-buttons a {
}

.cta-buttons__container {
width: 360px;
display: grid;
gap: 8px;
}

.cta-buttons__container a {
display: block;
height: fit-content;
}

.cta-buttons__items {
display: flex;
gap: 8px;
}

.cta-buttons img {
width: 100%;
max-width: 360px;
height: auto;
}

/* 右側：スマホビュー（固定幅） */
.right {
width: 45%;
height: 100vh;
overflow-y: auto;
background-color: transparent;
-webkit-overflow-scrolling: touch;
padding-left: 5%;
}

/* container中身 */
.container {
width: 100%;
max-width: 393px;
}




.cta-section__container {
}

.cta-section__items {
display: flex;
justify-content: center;
gap: 8px;
}

.cta-section a {
display: block;
margin: 16px 0 8px 0;
}

.cta-section img {
width: 100%;
height: auto;
display: block;
}

.cta-section .cta-section__items a {
display: block;
margin: 0;
}


.cta-section2 {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
background-size: contain;
background-color: #ffffff;
padding: 0px 16px 40px;
text-align: center;
}

.cta-section__container {
}

.cta-section__items {
display: flex;
justify-content: center;
gap: 8px;
}

.cta-section2 a {
display: block;
margin: 16px 0 8px 0;
}

.cta-section2 img {
width: 100%;
height: auto;
display: block;
}

.cta-section2 .cta-section__items a {
display: block;
margin: 0;
}



.sec01 {
width: 100%;
aspect-ratio: 393 / 502;
background: url("/lp25/direct05/img3/sec01.png") no-repeat center top;
background-size: cover;
background-color: #ffffff;
}

.sec02 {
width: 100%;
aspect-ratio: 393 / 202;
background: url("/lp25/direct05/img3/sec02.png") no-repeat center top;
background-size: cover;
background-color: #ffffff;
}

.sec03 {
width: 100%;
aspect-ratio: 393 / 1246;
background: url("/lp25/direct05/img3/sec03.png") no-repeat center top;
background-size: cover;
background-color: #ffffff;
}

.sec03_bottom {
width: 100%;
aspect-ratio: 393 / 1331;
background: url("/lp25/direct05/img3/sec03_bottom.png") no-repeat center top;
background-size: cover;
}

.sec04 {
width: 100%;
aspect-ratio: 393 / 997;
background: url("/lp25/direct05/img3/sec04.png") no-repeat center top;
background-size: cover;
padding: 250px 0 0 30px;
position: relative;
}

.table-container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.scroll-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
max-width: 100%;
scrollbar-width: none; /* Firefox対応 */
}

.scroll-wrapper::-webkit-scrollbar {
display: none; /* Chrome, Safari対応 */
}

.scroll-inner {
display: flex; /* ←横並びスライド対応 */
width: max-content;
/* padding-left: 16px; */
}

.scroll-inner img {
display: block;
width: 50%;
height: auto;
}

.sec05 {
width: 100%;
aspect-ratio: 390 / 1683;
background: url("/lp25/direct05/img3/sec05.png") no-repeat center top;
background-size: cover;
background-color: #ffffff;
}



/*.footer {
width: 100%;
aspect-ratio: 393 / 134;
background: url("/lp25/direct05/img3/footer.png") no-repeat center top;
background-size: cover;
background-color: #ffffff;
}*/

.logo-link-container {
position: relative;
display: inline-block; 
width: 100%;
max-width: 640px;
}


.logo-link-container img {
width: 100%;
height: auto;
display: block;
}


.logo-clickable-area {
position: absolute;
top: 0; 
left: 0; 
width: 70%; 
height: 10%;
}

.footer {
width: 100%;
aspect-ratio: 393 / 134;
/*background: url("img/footer.png") no-repeat center top;*/
background-size: cover;
background-color: #e7ecf0;
text-align:center;
padding:20px 0px 20px 0px;
font-size:65%;color:#333;
}
.container .footer img{
width:60%;
display: initial;
}
.container .footer a{
color:#333;
text-decoration:none;
}

/* アニメーションボタン */
.cta_anim {
position: relative;
border-radius: 100vmax;
overflow: hidden;
animation: scaleLoop 2s ease-in-out infinite;
transition: all 0.4s;
&::after {
content: "";
position: absolute;
inset: 0;
width: 100px;
height: 100%;
background-image: url(/lp25/direct05/img3/gra_bg.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: translateX(-100%);
animation: moveGradient 2s ease-in-out infinite;
animation-play-state: running;
}

&:hover {
scale: 1.05;
filter: drop-shadow(0 0 10px rgba(228, 100, 56, 0.7));
animation: none;

&.cta_blue {
filter: drop-shadow(0 0 10px rgba(45, 113, 185, 0.7));
}
&.cta_green {
filter: drop-shadow(0 0 10px rgba(90, 195, 99, 0.7));
}

&::after {
animation: moveGradientHover 0.5s ease-in-out forwards;
}
}
}

@keyframes moveGradient {
0% {
transform: translateX(-100%);
}
33% {
transform: translateX(400%);
}
100% {
transform: translateX(400%);
}
}

@keyframes moveGradientHover {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(400%);
}
}

@keyframes scaleLoop {
0% {
transform: scale(1);
}
33% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
67% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}

@media screen and (max-width: 1280px) {
.logo {
max-width: 480px;
}

/* .cta-buttons img {
max-width: 300px;
} */
}

@media screen and (max-width: 1024px) {
.wrapper {
display: block;
}

.left {
display: none;
}

.right {
width: 100%;
height: auto;
padding: 0;
margin: 0 auto;
}

.container {
max-width: 100%;
}


.logo {
max-width: 360px;
}

.cta-buttons img {
max-width: 260px;
}


.cta-section__container {
width: 360px;
}

.sec03_bottom {
width: calc(480 / 1024 * 100%);
margin-inline: auto;
}

.sec01 {
width: 100%;
aspect-ratio: 1668 / 971;
background: url("/lp25/direct05/img3/tab/sec01.png") no-repeat center top;
background-size: contain;
background-color: #ffffff;
}

.sec02 {
width: 100%;
aspect-ratio: 1668 / 410;
background: url("/lp25/direct05/img3/tab/sec02.png") no-repeat center top;
background-size: contain;
background-color: #ffffff;
}

.sec03 {
width: 100%;
aspect-ratio: 1661 / 2531;
background: url("/lp25/direct05/img3/tab/sec03.png") no-repeat center top;
background-size: contain;
background-color: #ffffff;
}
.sec04 {
width: 100%;
aspect-ratio: 1661 / 1765;
background: url("/lp25/direct05/img3/tab/sec04.png") no-repeat center top;
background-size: cover;
padding: 330px 0 0 0;
position: relative;
}

.table-container {
width: 100%;
display: flex;
justify-content: center;
align-items: start;
}

.scroll-wrapper {
overflow-x: initial;
-webkit-overflow-scrolling: touch;
width: 100%;
max-width: 100%;
scrollbar-width: none; /* Firefox対応 */
}

.scroll-wrapper::-webkit-scrollbar {
display: none; /* Chrome, Safari対応 */
}

.scroll-inner {
display: flex; /* ←横並びスライド対応 */
justify-content: center;
align-items: center;
width: auto;
padding-left: 0;
}

.scroll-inner img {
display: block;
width: 70%;
height: auto;
}

.sec05 {
width: 100%;
aspect-ratio: 832 / 1683;
background: url("/lp25/direct05/img3/tab/sec05.png") no-repeat center top;
background-size: cover;
background-color: #ffffff;
}

.sec06 {
width: 100%;
aspect-ratio: 1664 / 2252;
background: url("/lp25/direct05/img3/tab/sec06.png") no-repeat center top;
background-size: cover;
background-color: #ffffff;
}

/*.footer {
width: 100%;
aspect-ratio: 1664 / 268;
background: url("/lp25/direct05/img3/tab/footer.png") no-repeat center top;
background-size: cover;
background-color: #ffffff;
}*/

.logo-link-container {
position: relative;
display: block;          /* inline-block から block に変更 */
width: 100%;
max-width: 640px;
margin: 0 auto;          /* 中央寄せを追加 */

}


.logo-link-container img {
width: 100%;
height: auto;
display: block;
}


.logo-clickable-area {
position: absolute;
top: 0; 
left: 0; 
width: 70%; 
height: 10%;
}

.footer {
width: 100%;
aspect-ratio: 393 / 134;
/*background: url("img/footer.png") no-repeat center top;*/
background-size: cover;
background-color: #e7ecf0;
text-align:center;
padding:20px 0px 20px 0px;
font-size:65%;color:#333;
}
.container .footer img{
width:60%;
display: initial;
}
.container .footer a{
color:#333;
text-decoration:none;
}



}

/* モバイル対応 */
@media screen and (max-width: 767px) {
.wrapper {
display: block;
}

.left {
display: none;
}

.right {
width: 100%;
max-width: 393px;
height: auto;
padding: 0;
margin: 0 auto;
}

/* 各セクション */
.fv {
width: 100%;
aspect-ratio: 393 / 900;
background: url("/lp25/direct05/img3/fv.jpg?date=260413") no-repeat center top;
background-size: cover;
background-color: #ffffff;
}

.cta-section {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
background: url("/lp25/direct05/img3/CTA.png") no-repeat center -10%;
background-size: contain;
background-color: #ffffff;
padding: 72px 16px 40px;
text-align: center;
}

.cta-section__container {
}

.cta-section__items {
display: flex;
justify-content: center;
gap: 8px;
}

.cta-section a {
display: block;
margin: 16px 0 8px 0;
}

.cta-section img {
width: 100%;
height: auto;
display: block;
}

.cta-section .cta-section__items a {
display: block;
margin: 0;
}



/*.footer {
width: 100%;
aspect-ratio: 393 / 134;
background: url("/lp25/direct05/img3/footer.png") no-repeat center top;
background-size: cover;
background-color: #ffffff;
}*/

.logo-link-container {
position: relative;
display: inline-block; 
width: 100%;
max-width: 640px;
}


.logo-link-container img {
width: 100%;
height: auto;
display: block;
}


.logo-clickable-area {
position: absolute;
top: 0; 
left: 0; 
width: 70%; 
height: 10%;
}

.footer {
width: 100%;
aspect-ratio: 393 / 134;
/*background: url("img/footer.png") no-repeat center top;*/
background-size: cover;
background-color: #e7ecf0;
text-align:center;
padding:20px 0px 20px 0px;
font-size:65%;color:#333;
}
.container .footer img{
width:60%;
display: initial;
}
.container .footer a{
color:#333;
text-decoration:none;
}


}

/* ==========================================
   TV放映セクション
   ========================================== */


    /* 共通マーカー・装飾 */
    .line-marker {
      background: linear-gradient(transparent 70%, #FDD842 70%);
      font-weight: bold;
    }
	img{
	display: block;
	width:100%;
	}
    .sec-tv {
      background: linear-gradient(to bottom, #e1f3ff 0%, #ffffff 60%);
      text-align: center;
      padding-bottom:50px;
    }
    .sec-tv h2{
    margin:0;padding:0;margin-block-start: 0;
    margin-block-end: 0;
    }
    .sec-tv img{
    width:100%;
    margin:0;padding:0;
    
    }
    .tv-icon-badge {
      display: inline-block;
      border: 2px solid #005bac;
      color: #005bac;
      padding: 2px 10px;
      font-size: 11px;
      font-weight: bold;
      border-radius: 4px;
      margin-bottom: 8px;
    }
    .tv-main-title {
      color: #1785D4;
      font-size: 33px;
      font-weight: 900;
      letter-spacing: -0.5px;
      margin-bottom: 4px;
      background: linear-gradient(transparent 75%, #FDD842 75%);
      display: inline-block;
    }
    .tv-stations {
      color: #1785D4;
      font-size: 15px;
      font-weight: bold;
      margin-bottom: 25px;
    }
    .tv-gallery {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
      margin-bottom: 30px;
    }
    .tv-gallery-blank {
      background-color: #ccc;
      aspect-ratio: 4 / 3;
    }
    .ict-pioneer {
      background-color: #1785D4;
      color: #ffffff;
      font-size: 26px;
      font-weight: bold;
      padding: 4px 20px;
      display: inline-block;
      margin-bottom: 15px;
      letter-spacing: 1px;
      margin-top:30px;
    }
    .ict-sub {
      color: #1785D4;
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 15px;
    }
    .ict-devices {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 15px;
    }
    .fontcolorblue{
    	color: #1785D4;
    }
    .ict-desc {
      font-size: 18px;
      color: #1785D4;
      padding: 0 10px;
      margin-bottom: 25px;
      font-weight: bold;
    }
    .ict-reason-box {
      margin-bottom: 30px;
    }
    .ict-reason-box .lead {
      font-size: 18px;
      font-weight: bold;
      margin-bottom:15px;
    }
    .ict-reason-box .large-alert {
      font-size: 25px;
      color: #1785D4;
    }
    .ict-reason-box .sub-alert {
      font-size: 18px;
      font-weight: bold;
      margin-top: 5px;
    }
    .ict-big-blue-text {
      color: #1785D4;
      font-size: 24px;
      font-weight: 900;
      line-height: 1.5;
    }

    /* 大手企業連携エリア */
    .collabo-container {
      background: linear-gradient(135deg, #0052a3 0%, #1e70c5 100%);
      padding: 25px 15px;
      color: #ffffff;
      text-align: center;
      margin-top: 30px;
    }
    .collabo-tag {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 5px;
    }
    .collabo-tag span {
      background-color: #ffffff;
      color: #0052a3;
      padding: 2px 8px;
      font-size: 14px;
    }
    .collabo-title {
      font-size: 21px;
      font-weight: bold;
      margin-bottom: 15px;
    }
    .collabo-group-name {
      font-size: 20px;
      font-weight: bold;
      border: 2px solid #ffffff;
      padding: 8px;
      display: inline-block;
      width: 90%;
      margin-bottom: 15px;
    }
    .collabo-cross {
      font-size: 24px;
      margin-bottom: 15px;
    }
    .collabo-grid {
      background-color: #ffffff;
      color: #1a4a80;
      padding: 15px 10px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px 10px;
      font-weight: bold;
      font-size: 13px;
      align-items: center;
    }
    .collabo-note {
      font-size: 9px;
      color: #ffffff;
      text-align: left;
      margin-top: 8px;
      opacity: 0.9;
    }

/* ==========================================
   ルネ高が選ばれる3つの理由
   ========================================== */
    .sec-reasons {
      padding: 40px 10px;
      background:#C0E5F4;
    }
    .reasons-main-title {
      text-align: center;
      color: #1a6cb3;
      font-size: 40px;
      font-weight: bold;
      line-height: 1.3;
      margin-bottom: 30px;
    }
    .reasons-main-title span {
      font-size: 80px;
      color: #1677ca;
      font-weight: 900;
      margin: 0 4px;
    }
    
    /* 理由カード共通 */
    .card-reason {
      background-color: #ffffff;
      border-radius: 16px;
      box-shadow: 0 6px 12px rgba(0,0,0,0.06);
      margin-bottom: 35px;
      overflow: hidden;
      overflow: visible !important;
      position: relative;
    }
    .card-reason-thumb {
      position: relative;
      background-color: #4a5568;
      height: 140px;
    }
    .card-reason-num {
      position: absolute;
      top: -15px;
      left: 15px;
      background-color: #2460b6;
      color: #ffffff;
      font-size: 24px;
      font-weight: bold;
      width: 55px;
      height: 55px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 3px solid #ffffff;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .card-reason-body {
      padding: 25px 20px;
      text-align: center;
      position: relative;
      background: #fff;
	overflow: visible !important;
    }

.card-arrow {
  display: block;
  width: 0px;
  height: 0px;
  margin: 0;
  position: absolute;  /* relative → absolute */
  bottom: -15px;       /* ボックス底辺から外に30px飛び出す */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 20px solid white;  /* 白色に変更 */
}
    .card-reason-title {
      color: #116cb7;
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 12px;
    }
    .card-reason-desc {
      font-size: 15px;
      color: #333;
      line-height: 1.6;
      text-align: center;
    }

/* ==========================================
   コース一覧
   ========================================== */
    .sec-courses {
      background-color: #0076de;
      color: #ffffff;
      padding: 0px 0px 35px 0px;
    }
    .courses-header-sub {
      text-align: center;
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 2px;
          color: #1785D4;
    }
    .courses-header-main {
      text-align: center;
      font-size: 37px;
      font-weight: bold;
      margin-bottom: 25px;
      color: #1785D4;
    }
    .courses-header-main span {
      padding: 0 4px;
    }
    .bgwhite{
    background:#fff;
    
    }
    
    
    
    .courses-header-title{
    padding:30px 0 15px 0;
    background:#fff;
    position: relative;
    }

    
.courses-header-title::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 15px solid #ffffff;
  z-index: 1;
}
    
    .courses-list-title {
      text-align: center;
      font-size: 25px;
      font-weight: bold;
      padding: 25px 0 6px 0;
      margin-bottom: 10px;
      letter-spacing: 2px;
    }
    .courses-panel-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-bottom: 25px;
      padding:15px;
    }
    .panel-item {
      background-color: #ffffff;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.2);
    }
    .panel-img {
      background-color: #718096;
      height: 95px;
    }
    .panel-name {
      color: #0060be;
      font-size: 12px;
      font-weight: bold;
      text-align: center;
      padding: 6px 2px;
    }
    .courses-text-list {
      list-style: none;
      font-size: 17px;
      font-weight: bold;
      padding-left: 15px;
      margin-bottom:25px;
    }
    .courses-text-list li {
      padding: 7px 0;
      
    }
    .courses-text-list li::before {
      content: "・";
    }
    .courses-footer-gallery {
      margin-top: 25px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
    }
    .courses-footer-thumb {
      background-color: #a0aec0;
      aspect-ratio: 4/3;
    }

/* ==========================================
   さまざまな分野で輝いています
   ========================================== */
    .sec-results {
      background-color: #EEF9FE;
      padding:20px 15px;
    }
    .results_area{
      padding: 40px 16px;
      background-color: #fff;
    
    }
    .results-main-lead {
      text-align: center;
      font-size: 22px;
      font-weight: bold;
      color: #333333;
      line-height: 1.4;
      margin-bottom: 25px;
      padding: 0 10px;
    }
    .results-main-lead span {
      display: block;
      font-size: 36px;
      color: #0072db;
      font-weight: bold;
      margin-top: 5px;
    }
    .res-group {
      margin-bottom: 22px;
    }
    .res-badge {
      color: #ffffff;
      text-align: center;
      font-weight: bold;
      font-size: 14px;
      padding: 5px 0;
      border-radius: 20px;
      margin-bottom: 8px;
    }
    .res-badge.blue { background-color: #3274B5; }
    .res-badge.cyan { background-color: #269ED5; }
    .res-badge.green { background-color: #8BC6DD; }

    .res-content-box {
      border: 1.5px solid #2f77d4;
      border-radius: 4px;
      padding: 5px;
      text-align: center;
    }
    .res-content-box.cyan { border-color: #00a4ca; }
    .res-content-box.green { border-color: #7ba29e; text-align: left; }

    .res-content-box span {
      display: inline-block;
      color: #1a519e;
      font-size: 12px;
      margin: 0px 3px;
      white-space: nowrap;
    }
    .res-content-box.cyan span {
      color: #006f8a;
    }
    
    /* 就職実績用スタイル */
    .job-title {
      color: #3274B5;
      font-weight: bold;
      font-size: 14px;
      text-align: center;
      margin-top: 5px;
      margin-bottom: 2px;
    }
    .job-text {
      font-size: 12.5px;
      color: #3274B5;
      text-align: center;
      margin-bottom: 12px;
      line-height: 1.5;
      font-weight: 500;
    }
    .job-hosoku{
    font-size:10px;
    text-align: center;
    color:#888;
    }




/* ==========================================
   卒業生の声
   ========================================== */

.graduate-voices-section {
  width: 100%;
  margin: 0 auto;
  padding: 40px 20px;
  box-sizing: border-box;
  background:#1173EC;
}

.graduate-voices-back{
background:#fff;
padding:10px;
}


/* 他の要素との競合を防ぐ設定 */
.graduate-voices-section *,
.graduate-voices-section *::before,
.graduate-voices-section *::after {
  box-sizing: border-box;
}

/* 各カードの背景と余白 */
.voice-card {
  background-color: #f2fdff; /* 画像のような淡い青みの背景色 */
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 20px;
}

.voice-card:last-child {
  margin-bottom: 0;
}

/* ヘッダーレイアウト（横並び） */
.voice-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

/* 丸型アバター設定 */
.voice-avatar {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f2fdff; /* 画像読み込み前、または画像がない場合のプレースホルダー色 */
  margin-right: 14px;
}

.voice-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* タイトルとプロフィール */
.voice-meta {
  flex: 1;
}

.voice-title {
  font-size: 16px;
  line-height: 1.4;
  color: #006ec1; /* 画像に合わせた青色 */
  font-weight: bold;
  margin: 0 0 6px 0;
}

.voice-profile {
  font-size: 13px;
  color: #333;
  margin: 0;
}

/* 本文テキスト */
.voice-body {
  font-size: 14px;
  line-height: 1.5;
  color: #282828;
  text-align: justify;
}

.voice-body p {
  margin: 0;
}


/* ==========================================
   通信制高校とは
   ========================================== */

.table-scroll-section {
  width: 100%;
  margin: 0px auto;
  padding:40px 0 30px 20px;
  background:#3982B4;
  background: url("/lp25/direct05/imgs/hikaku_bg.jpg") no-repeat center top;
	background-size: cover;
}
.table-scroll-section *,
.table-scroll-section *::before,
.table-scroll-section *::after {
  box-sizing: border-box;
}
.table-scroll-section h2{
text-align:center;
}
.table-scroll-section .imgsize{
width:95%;
}

.table-scroll-section h3{
text-align:center;
color:#fff;
font-size:30px;
margin-bottom:20px;
}

/* --- アナウンス（横スクロールヒント）のスタイル --- */
.scroll-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}
.scroll-hint-icon {
  font-size: 16px;
  margin-right: 5px;
  display: inline-block;
  animation: scroll-swipe-ani 1.8s ease-in-out infinite; /* 指が左右に動くアニメーション */
}
@keyframes scroll-swipe-ani {
  0% { transform: translateX(5px); }
  50% { transform: translateX(-5px); }
  100% { transform: translateX(5px); }
}

/* --- 横スクロールを発生させるラッパー --- */
.table-responsive-container {
  width: 100%;
  overflow-x: auto; /* 横スクロールを有効化 */
  -webkit-overflow-scrolling: touch; /* iOSのスクロールを滑らかにする */
  padding-right:30px;
  padding-bottom: 8px;
}

/* スクロールバーのデザイン（不要なら削除してください） */
.table-responsive-container::-webkit-scrollbar {
  height: 10px;
}
.table-responsive-container::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 3px;
  
}

/* スクロールバーの背景（レール部分） */
.table-responsive-container::-webkit-scrollbar-track {
  background: #f1f1f1; /* 薄いグレーの背景を敷いて、バーの存在をアピールします */
  border-radius: 5px;
}

/* スクロールバーのつまみ（動く部分） */
.table-responsive-container::-webkit-scrollbar-thumb {
  background: #adadad; /* つまみの色を少し濃いめのグレーにして目立たせます */
  border-radius: 5px;
  border: 1px solid #f1f1f1; /* レールとの間に少しだけ隙間（境界線）を入れて綺麗に見せます */
}

/* マウスを乗せた（ホバーした）ときの色変更 */
.table-responsive-container::-webkit-scrollbar-thumb:hover {
  background: #888888; /* マウスが乗ったらさらに濃くして、動かせることを強調します */
}

/* --- テーブル本体のスタイル --- */
.comparison-table {
  width: 100%;
  min-width: 760px; /* スマホ画面でも縮まず、横スクロールさせるための最小幅 */
  border-collapse: collapse;
  table-layout: fixed; /* 列幅を固定して均等にする */
}

/* 列幅の割り当て */
.comparison-table th, .comparison-table td {
  text-align: center;
  vertical-align: middle;
  padding: 12px 6px;
  font-size: 12px;
  line-height: 1.4;
  color: #333333;
}

.comparison-table .bgfff {
background:#fff;
}

.comparison-table th.row-label { width: 14%; }
.comparison-table th:not(.row-label),
.comparison-table td:not(.row-label) { width: 21.5%; }

/* --- ヘッダー（最上段）の装飾 --- */
.comparison-table thead th {
  font-weight: bold;
  font-size: 15px;
  color: #ffffff;
  padding: 14px 4px;
}
.th-fixed {
  background: transparent;
}
.th-primary {
  background-color: #ff5e5e; /* ルネサンス高校の赤 */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.th-dark {
  background-color: #666666;
  border-right: 2px solid #ffffff;
}
.th-dark:last-child {
  border-right: none;
}

/* --- 行ラベル（左側青カラム）の装飾 --- */
.comparison-table tbody th.row-label {
  background-color: #005bac; /* 左側の深い青 */
  color: #ffffff;
  font-weight: bold;
  border-bottom: 2px solid #ffffff;
}
.comparison-table tbody tr:last-child th.row-label {
  border-bottom: none;
}

/* --- データセルの装飾 --- */
.comparison-table tbody td {
  border-bottom: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
}
.comparison-table tbody td:last-child {
  border-right: none;
}
.comparison-table tbody tr:last-child td {
  border-bottom: none;
}

/* 自校（ルネサンス高校）の列を目立たせる */
.comparison-table td.td-primary {
  background-color: #fff0f0; /* 薄い赤/ピンク背景 */
  border-right: 2px solid #ff5e5e;
  border-left: 2px solid #ff5e5e;
}
.comparison-table tr:last-child td.td-primary {
  border-bottom: 2px solid #ff5e5e;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* --- 記号（◎、◯、△）のスタイリング --- */
.symbol {
  display: block;
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 6px;
}
.double-circle { color: #ff5e5e; } /* ◎ */
.single-circle { color: #666666; } /* ◯ (他校) */
.red-circle { color: #ff5e5e; }    /* ◯ (ルネ高のサポート・費用) */
.triangle { color: #005bac; }      /* △ */

/* 蛍光ペン風の下線（マーカー） */
.underline-marker {
  background: linear-gradient(transparent 60%, #fff200 60%);
  font-weight: bold;
  color:#ff5e5e;
}



/* ==========================================
   CTAテキスト専用スタイリング
   ========================================== */
/* CTAテキスト専用スタイリング */
.cta-text-wrapper {
  display: block;
  text-align: center;
  width: 100%;
  padding: 40px 10px 15px 10px;
  box-sizing: border-box;
  background:#fff;
}

/* 競合防止 */
.cta-text-wrapper *,
.cta-text-wrapper *::before,
.cta-text-wrapper *::after {
  box-sizing: border-box;
}

/* メインの文章 */
.cta-main-text {
  font-size: 27px; /* LPのバランスに合わせて自由にサイズ変更可能です */
  font-weight: 500;
  color: #2c2c2c; /* 画像に合わせた濃いグレー */
  letter-spacing: 0.05em;
  display: inline-block;
  vertical-align: middle;
  margin: 0 4px;
}

/* 左右のはさみ線（＼ ／） */
.cta-slash {
  font-size: 27px;
  font-weight: 500;
  color: #2c2c2c;
  display: inline-block;
  vertical-align: middle;
}

.sticky-cta-section {
display:none;
}


@media screen and (max-width: 767px) {
.sticky-cta-section {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 393px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-size: 200px;
    background-color: #ffffff;
    padding: 10px 16px 0px;
    text-align: center;
    z-index: 1000;
}

.sticky-cta-section__container {
}

.sticky-cta-section .cta-main-text {
font-size: 15px;
}

/* 左右のはさみ線（＼ ／） */
.sticky-cta-section .cta-slash {
font-size: 15px;
}


.sticky-cta-section__items {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.sticky-cta-section a {
    display: block;
    margin: 5px 0 8px 0;
}

.sticky-cta-section img {
    width: 100%;
    height: auto;
    display: block;
}

.sticky-cta-section .sticky-cta-section__items a {
    display: block;
    margin: 0;
}
}


.sec-manabi{
margin-top:30px;
}