@charset "UTF-8";
@font-face {
  font-family: 'NotoSansCJKjp Medium';
  font-style: normal;
  font-weight: 500;
  src: url(/common/font/NotoSansCJKjp-Medium.woff2) format("woff2"),url(/common/font/NotoSansCJKjp-Medium.woff) format("woff");
  font-display: swap
}
@font-face {
  font-family: 'NotoSansCJKjp Bold';
  font-style: normal;
  font-weight: 700;
  src: url(/common/font/NotoSansCJKjp-Bold.woff2) format("woff2"),url(/common/font/NotoSansCJKjp-Bold.woff) format("woff");
  font-display: swap
  }
*,
*::before,
*::after {
  box-sizing: border-box;
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

button,
img {
  padding: 0;
  border: 0;
}

img {
  max-width: 100%;
  height: auto;
  margin: 0;
  font: inherit;
  vertical-align: bottom;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body,
html {
  height: 100%;
}

body {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  color: #333;
  font-size: 1.35rem;
  line-height: 1.5;
  font-family: "NotoSansCJKjp Medium", sans-serif;
}

ol,
ul {list-style: none;}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  background-color: transparent;
  cursor: pointer;
}

html {font-size: 62.5%;}

a {
  color: inherit;
  text-decoration: underline;
}
a:hover{text-decoration: none;}

/* ====================================
   header
==================================== */
.header {
  width: 100%;
  min-width: 100%;
  z-index: 100;
}
.header-inner {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.header-logo {
  display: inline-block;
  width: 26%;
}
.header-top{
  padding: 10px 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}
.header-button { width: 21%;}
.header-button img { transition: filter 0.3s ease-in-out;}
.header-button:hover img { filter: brightness(1.2);}
.header-nav{
  background-color: #ffffff;
  padding: 4px 0;
  max-width: 1200px;
  margin: 0 auto;
}
.header-nav__list{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  margin: 0 auto;
}
.header-nav__item{ width: 25%;}
.header-nav__link img { transition: filter 0.3s ease-in-out;}
.header-nav__link:hover img {filter: brightness(1.2);}

@media (max-width: 768px) {
  .header-top{ padding: 5px 30px;}
  .header-logo {width: 80%; margin: 0 auto;}
  .header-nav__list{
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px;
  }
  .header-nav__item{ width: 49.4%;}
  .header-nav__item:last-child{
    width: 100%;
  }

}


/* ====================================
   footer
==================================== */

/* フッターナビゲーション */
.footer-nav {
    background: #ffffff;
    padding: 20px;
    position: relative;
    z-index: 99;
}

.footer-nav-list {
  max-width: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin: 0 auto;
}

.footer-nav-list li a {
    color: #333;
    font-size: clamp(12px, 0.9259vw + 4.889px, 16px);
    transition: color 0.3s ease;
    text-decoration: none;
}

.footer-nav-list li a:hover {
    color: #FFDD00;
}

.main-footer {
    background-color: #000;
    color: #fff;
    padding: 60px 50px 30px;
    text-align: center;
    position: relative;
    min-height: 350px;
}
.main-footer::after,.main-footer::before{
  position: absolute;
  content: "";
}
.main-footer::after{
  background: url("/kentei/rider/assets/images/bg_footer_01.png") no-repeat;
  background-size: contain;
  left: 0;
  bottom: 0;
  width: 280px;
  height: 349px;
}
.main-footer::before{
  background: url("/kentei/rider/assets/images/bg_footer_02.png") no-repeat;
  background-size: contain;
  top: 0;
  right: 0;
  width: 290px;
  height: 348px;
}
/* フッターコンテンツ（ロゴと組織情報） */
.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto 40px auto;
}
.footer-main-logo {
    width: 80%;
    object-fit: contain;
    position: relative;
    z-index: 99;
}

.footer-org-info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 100px;
  font-size: clamp(16px, 0.9259vw + 8.889px, 20px);
  line-height: 1;
}

.footer-org-info p {
    white-space: nowrap;
}

/* 著作権表示 */
.footer-copyright {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  font-size: clamp(11px, 0.9259vw + 4.889px, 16px);
  color: #ffffff;
  line-height: 1.5;
}

@media (max-width: 768px) {

    .footer-nav{
      padding: 0;
    }
    .footer-nav-list {
      flex-wrap: wrap;
      gap: 0;
    }
    .footer-nav-list li{
      width: 50%;
    }
    .footer-nav-list li a {
      padding: 10px;
      border-top: 1px solid #000;
      border-right: 1px solid #000;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .footer-nav-list li:nth-child(even) a{
      border-right: none;
    }
    .main-footer {
      padding: 25px 20px 15px;
      min-height: auto;
    }

    .main-footer::after,.main-footer::before{
      position: absolute;
      content: "";
    }
    .main-footer::after{
      width: 181px;
      height: 218px;
    }
    .main-footer::before{
      width: 175px;
      height: 218px;
    }
    .footer-content {
        gap: 30px;
        margin: 0 auto 30px auto;
    }
    .footer-copyright {
      gap: 10px;
    }
}

.container {
  margin-bottom: -2rem;
  line-height: 1.6;
  background: url("/kentei/rider/assets/images/bg_container.png") repeat center center;
}
@media (max-width: 768px) {
  .container {
    background-size: 24px 24px;
  }
}

html {
  font-size: 62.5%;
}
body{
  font-size: 1.6rem;
}
main{overflow: hidden;}
.mv{
  max-width: 1200px;
  margin: 0 auto;
}
.mv img{
  width: 100%;
  position: relative;
  z-index: 99;
}
@media (max-width: 768px) {
  .mv-button{
    background-color: rgba(255, 255, 255, 0.7);
    padding: 8px 0;
  }
  .mv-button .header-button{
    width: 60%;
    display: block;
    margin: 0 auto;
  }
}
.cl-yellow{
  color: #fff600;
}
.contents-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 65px 30px 0;
  position: relative;
}
@media (max-width: 768px) {
  .contents-inner{
    padding: 50px 15px 0;
  }
}
@media screen and (min-width: 1547px) {
  .contents-inner{
    padding-top: 120px;
  }
}
.contents-heading{
  text-align: center;
  margin-bottom: 10px;
  position: relative;
  z-index: 101;
}

.contents-txt{
  font-size: clamp(16px, 0.9259vw + 8.889px, 20px);
  text-align: center;
  color: #ffffff;
  line-height: 2;
  position: relative;
  z-index: 100;
}

@media (max-width: 768px) {
  .contents-txt{
    text-align: left;
    line-height: 1.6;
  }
  .contents-heading{
    margin-bottom: 10px;
  }
}
#what .contents-inner::before,#what .contents-inner::after{
  content: "";
  position: absolute;
}
#what .contents-inner::before{
  top: -32%;
  left: -11%;
  background: url("/kentei/rider/assets/images/bg_beam_01.png") no-repeat center center;
  background-size: contain;
  width: 398px;
  height: 549px;
}
#what .contents-inner::after{
  top: -44%;
  right: -11%;
  background: url("/kentei/rider/assets/images/bg_beam_03.png") no-repeat center center;
  background-size: contain;
  width: 428px;
  height: 498px;
}
@media (max-width: 768px) {
#what .contents-inner::before{
    top: 50%;
    left: -9%;
    width: 249px;
    height: 343px;
  }
  #what .contents-inner::after{
    top: -25%;
    right: -32%;
    width: 268px;
    height: 311px;
  }
}

/* ====================================
   出題範囲のグリッド
   ==================================== */
#scope .contents-inner::before,#scope .contents-inner::after{
  content: "";
  position: absolute;
}
#scope .contents-inner::before{
  top: 13%;
  left: -15%;
  background: url("/kentei/rider/assets/images/bg_light_01.png") no-repeat center center;
  background-size: contain;
  width: 415px;
  height: 300px;
}
#scope .contents-inner::after{
  top: -7%;
  right: -13%;
  background: url("/kentei/rider/assets/images/bg_beam_02.png") no-repeat center center;
  background-size: contain;
  width: 572px;
  height: 363px;
}
@media (max-width: 768px) {
  #scope .contents-inner{
    padding: 100px 15px 0;
  }
  #scope .contents-inner::before{
    display: none;
  }
  #scope .contents-inner::after{
    top: -3%;
    right: -9%;
    width: 357px;
    height:227px;
  }
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin: 60px auto 0;
    position: relative;
    z-index: 100;
  }
#scope .card-grid::before,#scope .card-grid::after{
  content: "";
  position: absolute;
}
#scope .card-grid::before{
  bottom: -4%;
  left: -26%;
  background: url("/kentei/rider/assets/images/bg_light_01.png") no-repeat center center;
  background-size: contain;
  width: 415px;
  height: 300px;
}
#scope .card-grid::after{
  top: 49%;
  right: -30%;
  background: url("/kentei/rider/assets/images/bg_light_02.png") no-repeat center center;
  background-size: contain;
  width: 602px;
  height: 441px;
  transform: translateY(-50%);
}
@media (max-width: 768px) {

  #scope .card-grid::before{
    bottom: -10%;
    left: -35%;
    width: 259px;
    height: 190px;
  }
  #scope .card-grid::after{
    top: 101%;
    right: -27%;
    width: 229px;
    height: 206px;
  }
}

.card-item {
  position: relative;
    background-color: #fff;
    padding-left: clamp(15px, 3.415vw - 11.2272px, 40px);
    padding-right: clamp(15px, 3.415vw - 11.2272px, 40px);
    padding-top: clamp(15px, 2.049vw - 0.75px, 30px);
    padding-bottom: clamp(15px, 2.049vw - 0.75px, 30px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 99;
}
.card-header {
    padding: 0;
    text-align: center;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 28px;
}
.card-title-image img {
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 40px;
}

.card-description {
  font-size: clamp(16px, 0.2732vw + 13.901px, 18px);
  line-height: 1.6;
  text-align: center;
}

.card-content-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 25px;
}

.card-list-heading {
  font-size: clamp(16px, 0.2732vw + 13.901px, 18px);
  margin-bottom: 5px;
  color: #333;
}
.card-list-section{
  flex-shrink: 0;
}
.card-list-section li {
  font-size: clamp(14px, 0.2732vw + 11.901px, 16px);
  margin-bottom: 3px;
  line-height: 1.5;
  letter-spacing: -1px;
}
.card-button-image {
    display: block;
    width: 100%;
    padding: 0;
    text-align: center;
    line-height: 0;
}
.card-button-image img {
    transition: filter 0.3s ease-in-out;
}
.card-button-image:hover img {
    filter: brightness(1.1);
}
@media (max-width: 1280px) {
  .card-description{
      text-align: left;
      line-height: 1.6;
    }
  .card-description br{display: none;}
  .card-content-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
  .card-list-section ul{
    display: flex;
    flex-wrap: wrap;
    gap: 5px 30px;
  }
}
@media (max-width: 768px) {
    .card-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 30px auto 0;
    }

    .card-header {
        margin-bottom: 12px;
    }
    .card-item--showa .card-title-image{
      width: 80%;
    }
    .card-body {
        gap: 15px;
        margin-bottom: 15px;
    }
    .card-list-section li {
      margin-bottom: 0px;
    }
}


/* ====================================
   お申込みはこちら
   ==================================== */
.cta-section {
    padding: 20px 0;
    text-align: center;
    overflow: hidden;
}
.cta-wrapper {
  max-width: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0px;
  flex-wrap: nowrap;
  margin: 0 auto;
  position: relative;
  z-index: 100;
}
.cta-item--center {
    display: block;
}
.cta-item--center img {
    transition: filter 0.3s ease-in-out;
}
.cta-item--center:hover img {
    filter: brightness(1.2);
}

@media (max-width: 768px) {
    .cta-wrapper {
        flex-wrap: wrap;
        align-items: center;
        gap: 15px 0;
        padding: 0 15px;
    }
    .cta-item {
        width: 100%;
    }
    .cta-item--left {
        order: 1;
    }
    .-cta01 .cta-item--left {
      width: 38%;
    }
    .-cta02 .cta-item--left {
      width: 28%;
    }
    .cta-item--center {
        order: 3;
    }
    .cta-item--right {
       order: 2;
    }
    .-cta01 .cta-item--right {
      width: 29%;
    }
    .-cta02 .cta-item--right {
       width: 36%;
    }
}

/* ====================================
   メリット①
==================================== */
.merit01{ background-color: rgba(58, 79, 188, 0.7);}
.merit02{ background-color: rgba(12, 148, 24, 0.7);}
.merit03{ background-color: rgba(205, 10, 25, 0.7);}
.merit01 .contents-inner,.merit02 .contents-inner,.merit03 .contents-inner{
  padding: 100px 30px;
}
.card-title-text{
  font-size: clamp(22px, 0.9259vw + 14.889px, 26px);
  font-family: "NotoSansCJKjp bold", sans-serif;
}
.merit01 .card-title-text{color: #3a4fbc;}
.merit02 .card-title-text{color: #0c9418;}
.merit03 .card-title-text{color: #cd0a19;}

.merit01 .contents-txt::before,.merit01 .contents-txt::after{
    content: "";
  position: absolute;
  z-index: -1;
}
.merit01 .contents-txt::before{
  top: -48%;
  left: -17%;
  background: url("/kentei/rider/assets/images/bg_light_01.png") no-repeat center center;
  background-size: contain;
  width: 415px;
  height: 300px;
}
.merit01 .contents-txt::after{
  top: -69%;
  right: -21%;
  background: url("/kentei/rider/assets/images/bg_light_03.png") no-repeat center center;
  background-size: contain;
  width: 566px;
  height: 455px;
}
@media (max-width: 768px) {

  .merit01 .contents-txt::before{
    top: -67%;
    left: -21%;
    width: 207px;
    height: 150px;
  }
  .merit01 .contents-txt::after{
    top: -81%;
    right: -33%;
    width: 283px;
    height: 227px;
  }

}
@media (max-width: 370px) {
  .card-title-text{
  letter-spacing: -1px;
}
}

.merit01 .contents-inner::before,.merit01 .contents-inner::after,.merit01 .card-grid::after{
    content: "";
  position: absolute;
}
.merit01 .contents-inner::before{
  bottom: 7%;
  left: -22%;
  background: url("/kentei/rider/assets/images/bg_light_01.png") no-repeat center center;
  background-size: contain;
  width: 415px;
  height: 300px;
}
.merit01 .contents-inner::after{
  top: 26%;
  right: -21%;
  background: url("/kentei/rider/assets/images/bg_light_01.png") no-repeat center center;
  background-size: contain;
  width: 415px;
  height: 300px;
}
.merit01 .card-grid::after{
  bottom: 7%;
  right: -33%;
  background: url("/kentei/rider/assets/images/bg_light_02.png") no-repeat center center;
  background-size: contain;
  width: 602px;
  height: 441px;
}

@media (max-width: 768px) {

  .merit01 .contents-inner::before{
    bottom: -1%;
    left: -27%;
    width: 207px;
    height: 150px;
  }
  .merit01 .contents-inner::after{
    top: 11%;
    right: -23%;
    width: 207px;
    height: 150px;
  }
  .merit01 .card-grid::after{
    display: none;
  }

}

.merit02 .contents-inner::before,.merit02 .contents-inner::after,.merit02 .card-grid::after,
.merit03 .contents-inner::before,.merit03 .contents-inner::after,.merit03 .card-grid::after{
    content: "";
  position: absolute;
}
.merit02 .contents-inner::after,.merit03 .contents-inner::after{
  top: 8%;
  right: -15%;
  background: url("/kentei/rider/assets/images/bg_light_01.png") no-repeat center center;
  background-size: contain;
  width: 415px;
  height: 300px;
}
.merit02 .contents-inner::before,.merit03 .contents-inner::before{
  top: 39%;
  left: -24%;
  background: url("/kentei/rider/assets/images/bg_light_04.png") no-repeat center center;
  background-size: contain;
  width: 631px;
  height: 539px;
}
.merit03 .contents-inner::before{
  top: 57%;
}

.merit02 .card-grid::after,.merit03 .card-grid::after{
  bottom: -19%;
  right: -23%;
  background: url("/kentei/rider/assets/images/bg_light_01.png") no-repeat center center;
  background-size: contain;
   width: 415px;
  height: 300px;
}

@media (max-width: 768px) {

  .merit02 .contents-inner::after,.merit03 .contents-inner::after{
    top: 5%;
    right: -18%;
    width: 207px;
    height: 150px;
  }
  .merit02 .contents-inner::before,.merit03 .contents-inner::before{

    top: 1%;
    left: -21%;
    width: 315px;
    height: 269px;
  }
  .merit02 .card-grid::after,.merit03 .card-grid::after{
    top: -7%;
    right: -31%;
    width: 207px;
    height: 150px;
  }
}

/* 外枠のスタイリング */
.card-item--proof,.card-item--sticker,.card-item--clear-file {
  position: relative;
  box-sizing: border-box; /* paddingを含めてサイズ計算 */
  /* 1. ボーダーの太さとしてpaddingを設定 */
  padding: 15px;
  /* 2. 金属的なグラデーション背景を設定 */
  background: linear-gradient(160deg, #f12b43, #f22b43, #b3060b);
  overflow: visible;
}
.card-item--proof::before,.card-item--sticker::before,.card-item--clear-file::before{
  content: "";
  width: 105px;
  height: 107px;
  background: url("/kentei/rider/assets/images/ribbon01.png") no-repeat center center;
  position: absolute;
  left: -6px;
  top: -6px;
}
.card-item--proof::after,.card-item--sticker::after,.card-item--clear-file::after{
  content: "";
  width: 105px;
  height: 107px;
  background: url("/kentei/rider/assets/images/ribbon02.png") no-repeat center center;
  position: absolute;
  right: -6px;
  bottom: -6px;
}

/* 内側のコンテンツエリアのスタイリング */
.card-item__inner {
  background-color: #ffffff; /* 内側の背景色 */
  padding: 20px;
  height: 100%;
  text-align: center;
  line-height: 1.6;
}
.card-item--goods .card-list-section{
  flex-shrink: 1;
}
.card-item--goods .card-list-section li{
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 8px;
}
.card-item--goods .card-list-section li::before{
  content: '●';
  color: #333;
  position: absolute;
  left: 0;
  top: 0;
}
.card-image-wrapper img + img{
  margin-top: 10px;
}
#merits .card-body{
  margin-bottom: 15px;
}
#merits .card-content-wrapper{
  justify-content: center;
}
.contents-txt.-note{
  font-size: clamp(16px, 0.9259vw + 8.889px, 20px);
  font-weight: normal;
  margin-top: 50px;
}
#merits .contents-heading img{
  width: 80%;
}

@media (max-width: 768px) {
  .merit01 .contents-inner,.merit02 .contents-inner,.merit03 .contents-inner{
    padding: 50px 15px;
  }
  .contents-txt.-note{
    margin-top: 30px;
   }

}

/* ====================================
   受験案内
   ==================================== */
#guidance .contents-inner::before,#guidance .contents-inner::after{
    content: "";
  position: absolute;

}
#guidance .contents-inner::after{
  top: -2%;
  left: -12%;
  background: url("/kentei/rider/assets/images/bg_light_01.png") no-repeat center center;
  background-size: contain;
  width: 415px;
  height: 300px;
}
#guidance .contents-inner::before{
  top: -3%;
  right: -22%;
  background: url("/kentei/rider/assets/images/bg_light_03.png") no-repeat center center;
  background-size: contain;
  width: 566px;
  height: 455px;
}
@media (max-width: 768px) {

  #guidance .contents-inner::after{
    top: 3%;
  left: -19%;
    width: 207px;
    height: 150px;
  }
 #guidance .contents-inner::before{
    top: 0%;
  right: -30%;
    width: 283px;
    height:227px;
  }
}
.guidance-wrapper {
  max-width: 1000px;
  margin: 0 auto;
}
.guidance-table {
  position: relative;
  z-index: 99;
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(18px, 1.366vw + 7.50912px, 28px);
  line-height: 1.7;
  background-color: #fff;
  color: #333;
}
.guidance-table::before,.guidance-table::after{
    content: "";
  position: absolute;
  z-index: -1;
}
.guidance-table::after{
  bottom: 7%;
  right: -42%;
  background: url("/kentei/rider/assets/images/bg_light_02.png") no-repeat center center;
  background-size: contain;
  width: 602px;
  height: 441px;
}
.guidance-table::before{
  bottom: 25%;
  left: -26%;
  background: url("/kentei/rider/assets/images/bg_light_01.png") no-repeat center center;
  background-size: contain;
  width: 415px;
  height: 300px;
}
@media (max-width: 768px) {
  .guidance-table::after{
    bottom: -10%;
    right: -36%;
     width: 301px;
    height: 220px;
  }
 .guidance-table::before{
    bottom: -13%;
    left: -22%;
   width: 207px;
    height: 150px;
  }
}

.table-row {
  border-bottom: 2px solid #8c8c8c;
}
.table-row:last-child {
  border-bottom: none;
}
.table-header {
  background-color: #f1f1f1;
  padding: 15px 20px;
  text-align: center;
  vertical-align: middle;
  width: 24%;
  font-weight: bold;
  font-size: clamp(16px, 0.9259vw + 8.889px, 20px);
  line-height: 1.5;
  white-space: nowrap;
  border-right: 2px solid #333;
}
.table-data {
  font-size: clamp(14px, 0.9259vw + 6.889px, 18px);
  line-height: 1.7;
  font-weight: bold;
  padding: 15px 20px;
  text-align: left;
  vertical-align: top;
  background-color: #fff;
}
.table-data p {
  font-size: clamp(14px, 0.9259vw + 6.889px, 18px);
    margin-bottom: 10px;
    font-weight: normal;
}
.table-data p:last-child {
    margin-bottom: 0;
}
.table-data .note li {
    list-style: none;
    position: relative;
    padding-left: 1.2em;
    font-size: clamp(14px, 0.9259vw + 6.889px, 18px);
    line-height: 1.7;
    font-weight: normal;
}
.table-data .note li:before {
    content: "※";
    position: absolute;
    left: 0;
    top: 0;
    color: #333;
}
.table-data .note li a{
  transition: color 0.3s ease;
}
.table-data .note li a:hover {
    color: #FFDD00;
}
.bold{
  font-weight: bold !important;
}
.table-data .sub-heading {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: clamp(14px, 0.9259vw + 6.889px, 18px);
}

@media screen and (max-width: 768px){
  .table-header {
    padding: 7px 10px;
  }
  .table-data {
    padding: 7px 10px;
  }
}


/* ====================================
   仮面ライダー検定　攻略マル秘情報
==================================== */
#secret {
position: relative;
}
#secret .contents-inner{
  padding: 85px 30px 100px;
  position: relative;
}
#secret::after{
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  background: url("/kentei/rider/assets/images/bg_rainbow.png") no-repeat center bottom;
  background-size: cover;
  width: 100%;
  height: 100%;
}
#secret .contents-inner::after,#secret .contents-inner::before{
    content: "";
  position: absolute;
}
#secret .contents-inner::after{
  top: 7%;
  right: -17%;
  background: url("/kentei/rider/assets/images/bg_light_01.png") no-repeat center center;
  background-size: contain;
  width: 415px;
  height: 300px;
}
#secret .contents-inner::before{
  top: -1%;
  left: -19%;
  background: url("/kentei/rider/assets/images/bg_light_04.png") no-repeat center center;
  background-size: contain;
  width: 631px;
  height: 539px;
}

#secret .card-grid{
  position: relative;
  z-index: 99;
  gap: 80px;
}
#secret .card-item{
  background-color: transparent;
  padding: 0;
  overflow: visible;
}
#secret .card-body{
  gap: 15px;
}
#secret .card-description{
  line-height: 1.6;
}
#secret .card-content-wrapper{
  justify-content: center;
}
#secret .card-image-wrapper a img{
  width: 475px;
}

.card-image-wrapper a img { transition: filter 0.3s ease-in-out;}
.card-image-wrapper a:hover img { filter: brightness(1.2);}
@media screen and (max-width: 768px){
  #secret .contents-inner{
    padding: 50px 15px 65px;
  }
  #secret::after{
    background: url("/kentei/rider/assets/images/bg_rainbow_sp.png") no-repeat center bottom;
    background-size: contain;
    width: 100%;
    height: 254px;
  }
  #secret .contents-inner::after,#secret .contents-inner::before{
    content: none;
  }
  #secret .card-image-wrapper a img{
    width: 100%;
  }
  #secret .card-grid{
    gap: 40px;
  }
}



.is-sp {
  display: none;
}
.is-pc {
  display: block;
}
br.is-sp {
  display: none;
}
br.is-pc {
  display: inline;
}
@media screen and (max-width: 768px){
    .is-sp {
      display: block;
    }
    .is-pc {
      display: none;
    }
    br.is-sp {
      display: block;
    }
    br.is-pc {
      display: none;
    }
}

 body.popup-active {
    overflow: hidden;
}

.image-gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    margin-bottom: 20px;
}

/* --- 変更点: 表示/非表示の管理方法を修正 --- */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    /* display:flexは常に適用し、中央寄せに使う */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;

    /* visibilityとopacityで表示/非表示を制御 */
    visibility: hidden;
    opacity: 0;
    /* opacityの変化を0.3秒かけてアニメーションさせる */
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}

/* ポップアップを表示するためのクラス */
.popup-overlay.is-visible {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}
/* --- 変更ここまで --- */

.popup-content {
    position: relative;
    padding: 0 50px;
}

.popup-content__inner{
    position: relative;
    background-color: #fff;
    padding: 25px 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: 675px;
}
.popup-title{
  font-size: clamp(16px, 1.092vw + 7.61344px, 24px);
  text-align: center;
  margin-bottom: 10px;
  font-weight: bold;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 20px;
    cursor: pointer;
    color: #333;
    z-index: 10;
}

.close-button:hover {
    color: #000;
}

.slider-for{
    width:100%;
    margin: 0 auto;
}
.slider-for img,
.slider-nav img {
    width: 100%;
    height: auto;
    display: block;
}
#popup2 .slider-for img,#popup3 .slider-for img{
  width: 50%!important;
  margin: 0 auto;
}
#popup4 .slider-for img{
  width:80%!important;
  margin: 0 auto;
}

.slider-nav {
    margin-top: 10px;
}

.slider-nav .slick-slide {
    margin: 0 5px;
    cursor: pointer;
    transition: opacity 0.2s;
    opacity: 0.7;
}

.slider-nav .slick-current {
    opacity: 1;
}

.prev-arrow,
.next-arrow {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 30px;
    height: 60px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    z-index: 5;
}

.prev-arrow:hover,
.prev-arrow:focus,
.next-arrow:hover,
.next-arrow:focus {
    color: transparent;
    outline: none;
    background: transparent;
}

.prev-arrow:before,
.next-arrow:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: translate(-50%, -50%);
}

.prev-arrow:before {
    transform: translate(-50%, -50%) rotate(-135deg);
}

.next-arrow:before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.prev-arrow { left: -30px;}
.next-arrow { right: -30px;}
.slick-disabled {
    opacity: 0.5;
    cursor: default;
}

.slider-nav.two-slides .slick-track {
    transform: none !important;
    display: flex;
    justify-content: center;
    width: auto !important;
}
.slider-nav .slick-track {
    transform: none !important;
    display: flex;
    justify-content: center;
    width: auto !important;
}

#popup6 .slider-nav .slick-track{
  flex-wrap: wrap;
  gap: 10px 0px;
}
#popup6 .slider-nav .slick-slide{
  width: 22% !important;
}

.popup-txt{
 font-size: clamp(14px, 0.546vw + 9.80672px, 18px);
  font-weight: bold;
  line-height: 1.7;
  margin-top: 10px;
}
.popup-note{
  margin-top: 10px;
}
.popup-note li{
  font-size: clamp(14px, 0.546vw + 9.80672px, 18px);
  font-weight: normal;
  position: relative;
  padding-left: 1.2em;
}
.popup-note li:before {
    content: "＊";
    position: absolute;
    left: 0;
    top: 0;
    color: #333;
}
.slick-slider{
  touch-action: auto !important;
}

@media screen and (max-width: 768px){
  .popup-content{
    padding: 0 8%;
    max-height: 95%;
    margin-top: 5%;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .popup-content__inner{
    padding: 15px 15px;
    width: 317px;
  }
  .popup-title{
    margin-bottom: 10px;
  }
  .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 15px;
}
  .prev-arrow {
      left: -30px;
  }

  .next-arrow {
      right: -30px;
  }
  #popup2 .slider-for img,#popup3 .slider-for img,#popup4 .slider-for img{
    width: 100%!important;
  }
}
@media screen and (max-width: 360px){
  .popup-content__inner{
    width: 300px;
  }
}


/* ====================================================================
// 追従ボタン
// ==================================================================== */
.follow_button.is-fixed,
.mv-button.is-sp {
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
    opacity: 1;
    visibility: visible;
}
.follow_button {
      display: block;
      width: 52px;
      position: fixed;
      top: 20px;
      right: 0;
      z-index: 102;
      opacity: 0;
  }
.follow_button img { transition: filter 0.3s ease-in-out;}
.follow_button:hover img { filter: brightness(1.2);}

@media screen and (max-width: 768px){
.follow_button {
    /* 初期状態: PCでは非表示 */
    opacity: 0;
    visibility: hidden;
    display: none;
}
}


/* SP版の追従ボタン (初期状態: 非表示) */
.mv-button.is-sp {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 102;
    width: 100%;
}
.mv-button.is-sp.is-hidden {
    opacity: 0;      /* 透明にする */
    visibility: hidden; /* クリックやタブ選択を無効にする */
}

/* SP版の追従ボタン (追従時: 表示) */
.mv-button.is-sp.is-fixed {
   position: fixed;
   bottom: 0;       /* 画面下部からの最終的な表示位置 */
   left: 0;         /* width: 100% と組み合わせるため */
   z-index: 102;   /* 他のコンテンツより手前に表示 */
   width: 100%;     /* ボタンの幅を画面いっぱいに */
}



/* ====================================================================
// 中間ページ（お申し込みコース選択）
// ==================================================================== */
.course-page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.course-page .main {
  flex: 1;
  border-top: 4px solid #fff;
  border-bottom: 1px solid #fff;
}
.course-page .contents-inner {
  padding-bottom: 20px;
}
.course-page .main-footer {
  height: 40px;
  min-height: 40px;
  padding: 0;
  display: grid;
  padding-left: center;
}
.course-page .main-footer::before,
.course-page .main-footer::after {
  background: none;
}

.course-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin: 30px 0;
}
.course-list li {
  background-color: #fff;
  display: flex;
  overflow: hidden;
}
.course-list li img {
    flex: 1;
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease;
}
@media (hover: hover) {
  .course-list li:hover img {
    transform: scale(1.05);
    opacity: 0.9;
  }
}


@media screen and (min-width: 768px){
  .course-page .contents-inner {
    padding-top: 100px;
  }
  .course-page .contents-inner {
    padding-bottom: 45px;
  }
  .course-page .main-footer {
    height: 80px;
    min-height: 80px;
  }
  .course-list {
    max-width: 820px;
    margin: 60px auto;
    gap: 40px;
  }
}