/* ========================================
	Founfation (id推奨)
========================================= */

html {
	font-size: 100%;
	scroll-behavior: smooth;
	width: 100%;
}

body {
	font-feature-settings: "palt";
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", YuGothic, "Yu Gothic", sans-serif;
	font-size: 1rem;
	padding-bottom: min(18.5vw, 222px);
	position: relative;
}

picture {
	display: block;
	height: auto;
	width: 100%;
}

img {
	display: block;
	height: auto;
	width: 100%;
	image-rendering: -webkit-optimize-contrast;
}

a,
button {
	cursor: pointer;
	transition: 0.3s;
}

a:hover,
button:hover {
	opacity: 0.7;
}

h3{
	width: 60%;
    margin: auto;

}

p{
	color: #333333;
}

/* ========================================
	Project(コンテンツを構成する具体的な要素)
	命名規則: .p-
========================================= */

/*--------------------------------------- ヘッダーカスタマイズ -------------------------------------------------*/

.l-header {
	height: auto;
	left: 0;
	width: 100%;
	max-width: 1400px;
	z-index: 2;
	margin: auto;
	
}

.p-header-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.p-header_box p{
	font-size: 14px;
	font-weight: 800;
	gap: 4px;
	margin-left: 2%;
	color: #333333;
}

.p-header_box {
	display: flex;
    flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1% 0 0.5% 2%;
}

.p-header-wrap img{
    display: block;
    width: 100%;
	height: auto;
}

.p-header_logo {
	height: auto;
	width: 180px;
	background: #ffffff;
}

.p-header_text{
	width: 500px;
    max-width: 55%;
	margin-right: 2%;
}


@media screen and (max-width: 768px) {
.p-header-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%; /* ★しっかり端まで広げる */
    padding: 0 2%; /* ★ここで左右2%の余白を強制的に作る */
}

.p-header_box {
    display: flex;
    flex-direction: column;
    align-items: center; /* ロゴと文字自体のセンター揃えは維持 */
    margin-left: 0 !important; /* ★親のpaddingで制御するので0にする */
    width: fit-content; /* ★中身に合わせた幅にする */
	padding: 2% 0 0.5% 0%;
}


.p-header_box p{
	font-size: 12px;
	font-weight: 800;
	gap: 4px;
	margin-left: 2%;
	color: #333333;
}
	
.p-header_logo {
    height: auto;
    width: 90%;
    background: #ffffff;
    margin-left: 2%;
    max-width: 140px;
}

.p-header_text {
        width: 55%; 
    }

}

/*------------------------------------------- FVカスタマイズ -----------------------------------------------------*/


.fv-wrap{
	width: 100%;
	height: auto;
	max-width: 1400px;
	margin: auto;
}


@media screen and (max-width:768px) {

.fv-wrap{
	width: 100%;
	height: auto;
	margin: auto;
}

}

/*---------------------------------------------代ゼミの強み---------------------------------------------*/

.strength-wrap{
	width: 100%;
	max-width: 1400px;
	background-image: url(../img/strength_bg.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-size: 100% auto;
	height: auto;
}

.p-strength-title{
	width: 34.8%;
	margin: auto;
	padding: 30px 0px;
}

.p-strength-inner{
	width: 69.6%;
	margin: auto;
}

@media screen and (max-width:768px) {

.strength-wrap{
	width: 100%;
	background-image: url(../img/strength_bg_sp.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center top;
	aspect-ratio: 750 / 660;
	padding-bottom: 20vw;
	display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* 古い設定は削除または上書き */
    height: auto;
    min-height: 0;
}

.p-strength-title {
   width: 65.8%;
    margin: 0 auto; 
    padding: 10vw 0 5vw;
}

.p-strength-inner {
   width: 70%; 
    margin: 0 auto;
}

}


/*---------------------------------------------アンカーボタン---------------------------------------------*/
.p-anchorbtn-wrap{
	display: flex;
    width: 90%;
    margin: auto;
    padding: 30px 0px 30px 0px;
    gap: 10px;
}

@media screen and (max-width:768px) {
.p-anchorbtn-wrap{
	display: flex;
    width: 95%;
    margin: auto;
    padding: 15px 0px 15px 0px;
    gap: 5px;
}

}


/*---------------------------------------------高校生カスタマイズ---------------------------------------------*/
.p-hs-wrap{
	width: 95%;
	margin: auto;
	background-image: 
            url(../img/hs_bg.png), 
            linear-gradient(to bottom, transparent 40vw, #DCEFFD 40vw) !important;

	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	height: auto;
	padding-bottom: 40px;
}

.p-hs-title{
	width: 60%;
	margin: auto;
	padding: 10vw 0px 3vw 0px;
}

.p-hs-text {
	width: 55%;
	margin: auto;
	font-size: clamp(1.063rem, 0.682rem + 0.79vw, 1.375rem);
	font-weight: 500;
	color: #333333;
	line-height: 1.7;
	text-align: justify;
	text-justify: inter-character;
}

@media screen and (max-width:768px) {
.p-hs-wrap{
	width: 100%;
	margin: auto;
	background-image: 
            url(../img/hs_bg_sp.png), 
            linear-gradient(to bottom, transparent 40vw, #DCEFFD 40vw) !important;

	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	height: auto;
	padding-bottom: 40px;
}


.p-hs-title{
	width: 70%;
	margin: auto;
	padding:20vw 0px 5vw 0px;
}



.p-hs-text{
	width: 90%;
	margin: auto;
	font-size: clamp(1.063rem, 0.682rem + 0.79vw, 1.375rem);
	font-weight: 500;
	color: #333333;
	line-height: 1.7;
}
}




/* 個別相談会 */
.p-hs-contents-wrap{
    background-color: #ffffff;
	border-radius: 20px;
	width: 80%;
	max-width: 1200px;
	margin: 40px auto 0px;
}

.p-hs-consultation-subtitle{
	width: 30%;
	padding-top: 2.5vw ;
	margin: auto;
}

.p-hs-consultation-title{
	margin: auto;
	padding-top: 2.5vw;
}

.p-hs-consultation-text {
   font-size: clamp(1.25rem, 0.794rem + 0.95vw, 1.625rem);
   text-align: center;
   font-weight: 600;
   padding-top: 3vw;
}

.l-hs .description-text {
    padding: 2vw 0px;
    width: 60%;
    margin: auto;
    text-align: justify;
    text-justify: inter-character;
    line-height: 1.7;
}


.p-hs-consultation-img-wrap{
	width: 80%;
	display: flex;
	margin: auto;
	gap: 10px;
}

.p-hs-contents-wrap .p-hs-consultation-ctabtn{
	width: 75% !important;
}

.p-hs-consultation-ctabtn img{
	padding-bottom: 2.5vw;
	margin-top: 2vw;
}


@media screen and (max-width:768px) {

.p-hs-contents-wrap{
    background-color: #ffffff;
	border-radius: 20px;
	width: 92%;
	max-width: 1200px;
	margin: 20px auto 0px;
}

.p-hs-consultation-subtitle{
	width: 65%;
	padding-top: 5vw ;
	margin: auto;
}

.l-hs .description-text{
	padding: 2vw 0px;
	width: 60%;
	margin: auto;
	text-align: justify;           
    text-justify: inter-character;
	font-size: clamp(0.813rem, 0.768rem + 0.22vw, 0.875rem);;
	line-height: 1.7;
}

.p-hs-consultation-text {
   font-size: clamp(1.5rem, 1.366rem + 0.67vw, 1.688rem);
   text-align: center;
   font-weight: 600;
   padding-top: 3vw;
}

.p-hs-consultation-title{
	margin: auto;
	padding-top: 2.5vw;
	width: 70%;
}

.l-hs .description-text{
	padding: 2vw 0px;
	width: 90%;
	margin: auto;
	text-align: justify;           
    text-justify: inter-character;
	line-height: 1.5;
}

.p-hs-consultation-img-wrap{
	width: 90%;
	display: flex;
	margin: auto;
	gap: 10px;
}

.p-hs-consultation-ctabtn img{
    padding-top: 2.5vw ;
	padding-bottom: 5vw;
}

}


/* 代ゼミが選ばれる理由 */
.p-hs-reason-title{
	width: 50%;
	margin: auto;
    padding-top: 2.5vw;
}

.p-hs-reason-box{
	width: 80%;
	margin: auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 40px;
	padding-bottom: 2.5vw;
}

.p-hs-reason-inner{
	width: 45%; 
    text-align: center;
    list-style: none; 
}

.p-hs-reason-box .description-text{
	width: 100%;
	padding: 1vw 0px;
}

.p-hs-reason-inner .bule{
	font-size: clamp(1.125rem, 1.049rem + 0.16vw, 1.188rem);
	padding-bottom: 0.3vw;
}

@media screen and (max-width:768px) {
	.p-hs-reason-title{
	width: 80%;
	margin: auto;
    padding: 5vw 0;
}


.p-hs-reason-box{
	width: 100%;
	margin: auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px;
	padding-bottom: 5vw;
}


.p-hs-reason-inner .bule{
	font-size: clamp(1rem, 0.924rem + 0.16vw, 1.063rem);
	padding-bottom: 1vw;
}



}










/* 新学期開講プラン */
.p-hs-newsemester-title{
	width: 50%;
    margin: auto;
    padding-top: 2.5vw;
}

.p-hs-newsemester-img-wrap{
	width: 90%;
    margin: auto;
    padding-bottom: 2.5vw;
}

.p-hs-newsemester-img-wrap .p-hs-newsemester-img:first-child{
	width: 100%;
    margin: auto;
}

.p-hs-newsemester-img-wrap .p-hs-newsemester-img:nth-child(2){
	padding: 2.5vw;
	width: 85%;
	margin: auto;
}

.p-hs-newsemester-img-wrap .p-hs-newsemester-img:nth-child(3){
	width: 85%;
	margin: auto;
	transform: translateX(-5%);
}

@media screen and (max-width:768px) {
.p-hs-newsemester-title {
		width: 70%;
		margin: auto;
		padding: 5vw 0;
	}

.p-hs-newsemester-img-wrap{
	width: 92%;
    margin: auto;
    padding-bottom: 0vw;
}



.p-hs-newsemester-img-wrap .p-hs-newsemester-img:nth-child(2){
	padding: 2.5vw;
	width: 85%;
	margin: auto;
	transform: translateX(9%);
}

.p-hs-newsemester-img-wrap .p-hs-newsemester-img:nth-child(3){
	width: 100%;
	margin: auto;
	transform: translateY(-15%);
}



}



/* フリーセレクトプラン */
.p-hs-free-wrap{
	display: flex;
	margin: auto;
	padding: 2.5vw 0px;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

.title-box{
	background-color: #009FFB;
	padding: 10px 30px;
	margin: 5px 0px;
	text-align: center;
	border-radius: 10px;
}


.title-box p{
	color: #ffffff;
	font-weight: 900;
	letter-spacing: 0.1em;
}

.p-hs-free-text {
	width: 60%;
	text-align: justify;
	text-justify: inter-character;
}

@media screen and (max-width:768px) {
.p-hs-free-wrap{
	display: block;
	margin: auto;
	padding: 5vw 0px;
	justify-content: center;
	align-items: center;
	gap: 20px;
}


.p-hs-free-text {
	width: 90%;
	text-align: justify;
	text-justify: inter-character;
	margin: auto;
	text-align-last: left;
	line-height: 1.7;
	letter-spacing: 0.05em;
	font-size: clamp(1.063rem, 0.682rem + 0.79vw, 1.375rem);
}


.title-box{
	background-color: #009FFB;
	padding: 10px 30px;
	text-align: center;
	border-radius: 30px;
	width: 70%;
	margin: 0 auto 10px;
}



}





/* 入学金半額キャンペーン */
.p-hs-contents-campaign-wrap{
	background-color: #9BD0F7;
    border-radius: 20px;
    width: 80%;
    max-width: 1200px;
    margin: 40px auto 0px;
}

.p-hs-campaign-img-wrap{
	width: 85%;
    margin: auto;
    
}

.p-hs-contents-campaign-wrap .p-hs-consultation-ctabtn{
	width: 90% !important;
}

.p-hs-campaign-title{
	width: 80%;
	padding-top: 3.5vw;
	margin: auto;
}

.p-hs-campaign-subtitle{
	width: 50%;
	margin: auto;
	padding-top: 3.5vw;
}

.p-hs-campaign-img{
	padding-top: 1.1vw;
}

@media screen and (max-width:768px) {
.p-hs-contents-campaign-wrap{
	background-color: #9BD0F7;
    border-radius: 20px;
    width: 92%;
    margin: 20px auto 0px;
}


.p-hs-consultation-ctabtn-wrap .cta-btn{
	width: 92% !important;
	transform: translateX(-5px);
}


.p-hs-campaign-title{
	width: 100%;
	padding-top: 5vw;
	margin: auto;
}


.p-hs-campaign-subtitle{
	width: 70%;
	margin: auto;
	padding-top: 3.5vw;
}


.p-hs-contents-campaign-wrap .p-hs-consultation-ctabtn{
	width: 100% !important;
	transform: translateX(-5px);
}


.p-hs-campaign-img-wrap{
	width: 92%;
    margin: auto;
	padding-bottom: 0;
}
}





/* 申込の流れ */
.p-hs-application-box{
	width: 90%;
    margin: auto;
    display: flex;
	align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 2.5vw 0;
	list-style: none; ;
}

.p-hs-application-title{
	width: 35%;
    margin: auto;
    padding-top: 2.5vw;
}

.p-hs-application-inner{
	width: 20%;
    text-align: center;
}

.p-hs-application-inner .description-text{
	padding: 1vw 0px;
    width: 100%;
    margin: auto;
    text-align: justify;
    text-justify: inter-character;
    line-height: 1.5;
}

.p-hs-application-polygon{
	width: 2%;
	align-self: center; 
}

.p-hs-application-polygon img {
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (max-width:768px) {

.p-hs-application-title{
	width: 70%;
    margin: auto;
    padding-top: 5vw;
}

.p-hs-application-box{
	width: 92%;
    margin: auto;
    display: flex;
	flex-direction: column;
	align-items: center;
    justify-content: flex-start;
    padding-bottom: 5vw;
	list-style: none; ;
	padding-top: 5vw;
}

.p-hs-application-inner {
	width: 100% !important;
	display: grid;
	/* flexより配置が強力なgridを使います */
	grid-template-columns: 100px 1fr;
	grid-template-rows: auto auto;
	column-gap: 10px;
	row-gap: 5px;
	align-items: start;
	
}
/* 左側のイラスト（1枚目の画像） */
.p-hs-application-inner img:nth-of-type(1) {
	grid-row: 1 / 3;
	/* 1行目から2行目まで（右側2つ分）ぶち抜きで横に居座る */
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* 右側のsubtitle（2枚目の画像） */
.p-hs-application-inner picture {
	grid-column: 2 / 3;
	/* 右側の列に配置 */
	grid-row: 1 / 2;
	width: auto;
	max-width: 45%;
	height: auto;
	justify-self: start;
	align-self: end;
}

.p-hs-application-inner:nth-of-type(1) picture {
    max-width: 43% !important; /* 現在の40%から60%へ拡大（数値はお好みで！） */
}

.p-hs-application-inner:nth-of-type(3) picture {
    max-width: 59% !important; /* 現在の40%から60%へ拡大（数値はお好みで！） */
}

/* 右側の文章（pタグ） */
.p-hs-application-inner .description-text {
	grid-column: 2 / 3;
	/* これも右側の列に配置 */
	grid-row: 2 / 3;
	width: 100% !important;
	margin: 0 !important;
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
}


.p-hs-application-polygon {
	display: block;
	width: 20px;
	margin: 5px auto !important; 
	transform: rotate(90deg);
	line-height: 0;
	margin-top: -6vw !important;
    margin-bottom: -4vw !important;
}

}





/* 高校生口コミ */
.p-hs-voice-title{
	width: 25%;
    margin: auto;
    padding-top: 2.5vw;
}

.p-hs-contents-wrap .inner {
    width: 95%;     
    margin: 0 auto;  
    overflow: hidden;
    padding: 20px 50px 40px;; 
}

/* Slickの矢印が枠外に消えるのを防ぐ */
.slick-prev { left: -40px !important; z-index: 10; }
.slick-next { right: -40px !important; z-index: 10; }

/* 矢印の色がデフォルトだと白で見えない場合があるため */
.l-hs .slick-prev:before,.l-hs .slick-next:before {
    color: #31B0FA !important;
}


  .member-slider-list {
   list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 100%;
  }

  /* --- 2. カード本体（li） --- */
  .l-hs .member-card {
    flex-shrink: 0;
    width: 300px;/* カードのサイズ（縦長デザイン） */
    background-color: #ffffff;
	border: 1.7px solid #31B0FA;
    padding: 0px 15px 10px 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* ふんわりした影 */
    box-sizing: border-box;
	margin: 0 10px;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
   }

  /* --- 3. 上段エリア（写真 + 名前・肩書） --- */
  .card-header {
	height: 195px !important;
    display: flex !important;      
    flex-direction: column !important; /* 中身（合格実績と名前・写真）を縦に並べる */          
    text-align: center; 
	min-height: 195px !important;      /* 全員のヘッダーの高さを最低280pxに揃える */
    display: flex !important;
    justify-content: flex-start !important; /* 中身を上に詰める */
    align-items: center !important;       
  }

  /* --- 写真 --- */
  .card-img {
    flex-shrink: 0;
    width: 118px; /* 写真の幅 */
    height: 118px; /* 写真の高さ（縦長トリミング） */
    overflow: hidden;
  }

  .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;/* 枠いっぱいにトリミング */
    image-rendering: -webkit-optimize-contrast;/* Chrome, Safari用 */
    backface-visibility: hidden;/* チラつき防止 */
  }

  /* --- 名前・肩書エリア --- */
  .card-info {
    display: flex;
    flex-direction: column;
    align-items: center; /* 子要素を中央へ */
    width: 100%;
  }

  .l-hs .info-job {
    color: #31B0FA;
    font-weight: bold;
    font-size: 1rem;
	min-height: 2em;       /* 2行分くらいの高さを確保 */
    display: flex;
    align-items: center;    /* 文字自体は上下中央 */
    justify-content: center;
	margin-top: 10px;
  }

  .info-name {
    color: #333333;
    font-weight: bold;
    font-size: 0.9rem;
    margin: 5px 0 0 0;
    line-height: 1.3;
  }

  .info-lead {
    color: #333;
    font-size: 1.4rem;
    font-weight: bold;
    margin: 0;
    line-height: 1.4;
  }

  .small-text {
    font-size: 0.85em;
    display: inline-block; 
	font-weight: bold; 
	margin-left: 5px;
}

  /* --- 4. 下段エリア（本文） --- */
  .card-body p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #333333;
    text-align: justify;
  }

  /* 1. スライド全体を包むレールを Flexbox に変える */
  /* これをすると、中身の子要素（スライド）が強制的に一番高いものに合わせられます */
  .slick-track {
    display: flex !important;
  }

  /* 2. スライド自体の高さを自動（親に合わせる）にする */
  .slick-slide {
    height: auto !important;
    float: none !important;/* もともとのfloatを無効化 */
    margin: 0 10px;
  }

  /* 3. 【重要】カード自体を縦いっぱいに引き伸ばす */
  /* ".your-card-class" の部分は、あなたが作っているカードのクラス名に変えてください */
  .slick-slide>div,
  .slick-slide .member-card {
    height: 100%;
  }

  
.member-slider-list .slick-track {
   display: flex !important;
    align-items: stretch !important;
}

.member-slider-list .slick-slide {
    height: auto !important;
    display: flex !important;
    justify-content: center !important; /* ★枠の中でカードを中央寄せ */
    float: none !important;
    outline: none; /* クリック時の枠線を消す */
}

.member-card {
	width: 280px !important;    /* ★枠(33.3%)より少し小さく設定する */
    margin: 10px 15px !important; /* ★左右のマージンがそのまま「隙間」になります */
    flex-shrink: 0;
    min-width: auto !important; /* 以前の固定を解除 */
    height: auto;
}

.card-body p {
    overflow-wrap: break-word; /* 長い英単語などの突き抜け防止 */
    word-break: break-all;      /* 日本語の改行を適切に */
}


/* --- Slickの余計なスタイルを強制リセット --- */

/* !important をつけて、何がなんでもmarginを0にします */
.member-slider-list .slick-slide img {
  margin: 0 !important;
  /* ★ここが一番重要 */
  padding: 0 !important;
  width: 100% !important;
  /* 親要素(.card-img)の幅に強制的に合わせる */
}

/* 念のため、画像の外側の箱にも影響が出ないように */
.member-slider-list .card-img {
  display: block !important;
  margin: 0 !important;
}

  /* ========================================
    Slick Slider Custom (矢印のカスタマイズ)
========================================= */
/* 1. 矢印ボタン自体のサイズと位置を調整 */
.slick-prev, .slick-next {
    width: 60px !important;
    height: 60px !important;
    z-index: 10;
}

/* 2. 丸い背景と枠線を作る */
.l-hs .slick-prev:before,.l-hs .slick-next:before {
    content: "" !important; /* 標準の文字（矢印）を消す */
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    background-color: #ffffff !important; /* 丸の中身を白に */
    border: 2px solid #31B0FA !important;  /* 丸の枠線を青に */
    border-radius: 50% !important;        /* 正円にする */
    opacity: 1 !important;     /* 透けないように固定 */
}

/* 3. 中に青い三角を作る（共通設定） */
.l-hs .slick-prev:after,.l-hs .slick-next:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 15px;
    height: 15px;
    border-top: 2.5px solid #31B0FA;   /* 三角（L字）の線 */
    border-right: 2.5px solid #31B0FA; /* 三角（L字）の線 */
	opacity: 1 !important;     /* 透けないように固定 */
}

/* 左矢印の三角の向きと位置 */
.slick-prev:after {
    left: 55%;
    transform: translate(-50%, -50%) rotate(-135deg);
}

/* 右矢印の三角の向きと位置 */
.slick-next:after {
    left: 45%;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* ホバーした時に少し色を濃くする（お好みで） */
.l-hs .slick-prev:hover:before,.l-hs .slick-next:hover:before {
    border-color: #0088cc;
}

@media screen and (max-width:768px) {

.p-hs-contents-wrap .inner {
    width: 100%;     
    margin: 0 auto;  
    overflow: hidden;
    padding: 20px 0px 20px;; 
}

.p-hs-voice-title{
	width: 53%;
    margin: auto;
    padding-top: 5vw;
}

.l-hs .p-hs-contents-wrap:last-of-type {
        border-radius: 0px;
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }


.member-card {
    height: 100% !important; /* カードを枠いっぱいに広げる */
    min-width: 250px; /* これ以上小さくならない幅 */
    margin: 0 auto; /* カードが左に寄らないように中央配置 */
    box-sizing: border-box;/* ボックスモデルを崩さない設定 */
}

/* 1. 矢印の配置を内側（0px〜10px程度）に移動 */
    .slick-prev {
        left: 10px !important; 
		top: calc(50% - 10px) !important;
        z-index: 20;
    }
    
    .slick-next {
        right: 10px !important;
		top: calc(50% - 10px) !important;
        z-index: 20;
    }

    /* 2. 矢印がカードの下に隠れないように z-index を上げる */
    .slick-prev, .slick-next {
        z-index: 20;
    }


}







/* *------------------------------------- 高卒生カスタマイズ --------------------------------* */
.p-graduate-wrap{
	width: 95%;
	margin: auto;
	background-image: 
            url(../img/graduate_bg.png), 
            linear-gradient(to bottom, transparent 40vw, #FFE5ED 40vw) !important;

	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	height: auto;
	padding-bottom: 40px;
}

.p-graduate-title{
	width: 60%;
	margin: auto;
	padding: 10vw 0px 3vw 0px;
}

.p-graduate-text {
	width: 55%;
	margin: auto;
	font-size: clamp(1.063rem, 0.682rem + 0.79vw, 1.375rem);
	font-weight: 500;
	color: #333333;
	line-height: 1.7;
	text-align: justify;
	text-justify: inter-character;
}

.p-graduate-checkimg{
	width: 45%;
	margin: auto;
	padding-top: 2vw;
	transform: translateX(4%);
}

@media screen and (max-width:768px) {

.p-graduate-title{
	width: 70%;
	margin: auto;
	padding:20vw 0px 5vw 0px;
}


.p-graduate-wrap{
	width: 100%;
	margin: auto;
	background-image: 
            url(../img/graduate_bg_sp.png), 
            linear-gradient(to bottom, transparent 40vw, #FFE5ED 40vw) !important;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	height: auto;
	padding-bottom: 40px;
}


.p-graduate-text{
	width: 90%;
	margin: auto;
	font-size: clamp(1.063rem, 0.682rem + 0.79vw, 1.375rem);
	font-weight: 500;
	color: #333333;
	line-height: 1.7;
}

.p-graduate-checkimg {
    width: 80%;
    margin: auto;
    padding-top: 3vw;
    transform: translateX(4%);
}


}





/* 大学受験科説明会*/
.p-graduate-contents-wrap{
    background-color: #ffffff;
	border-radius: 20px;
	width: 80%;
	max-width: 1200px;
	margin: 40px auto 0px;
	padding-bottom: 2.5vw;
}

.p-graduate-consultation-subtitle{
	width: 30%;
	padding-top: 2.5vw ;
	margin: auto;
}

.p-graduate-consultation-title{
	margin: auto;
	padding-top: 2.5vw;
}

.p-graduate-consultation-text {
   font-size: clamp(1.25rem, 0.794rem + 0.95vw, 1.625rem);
   text-align: center;
   font-weight: 600;
   padding-top: 3vw;
}


.l-graduate .description-text{
	padding: 2vw 0px;
	width: 60%;
	margin: auto;
	text-align: justify;           
    text-justify: inter-character;
	line-height: 1.7;
}

.p-graduate-explanation-box{
	width: 80%;
	margin: auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 40px;
	padding-bottom: 1vw;
}

.p-graduate-explanation-inner{
	width: 45%; 
    text-align: center;
    list-style: none; 
}

.p-graduate-explanation-box .description-text{
	width: 100%;
	padding: 1vw 0px;
}

.p-graduate-explanation-inner .pink{
	font-size: clamp(1.125rem, 1.049rem + 0.16vw, 1.188rem);
	padding-bottom: 1vw;
}

.p-graduate-consultation-img-wrap .p-graduate-consultation-ctabtn{
	width: 80% !important;
}


.p-graduate-campaign-img-wrap .p-graduate-consultation-ctabtn{
width: 90% !important;
padding-top: 2.5vw;
}

.p-graduate-consultation-guide{
	padding-bottom: 2.5vw;
	margin: auto;
	width: 80%;
}

@media screen and (max-width:768px) {
.p-graduate-consultation-subtitle {
		width: 65%;
		padding-top: 5vw;
		margin: auto;
	}

	
.p-graduate-consultation-title{
	margin: auto;
	padding-top: 5vw;
	width: 90%;
}


.p-graduate-consultation-text {
   font-size:clamp(1.5rem, 1.366rem + 0.67vw, 1.688rem);
   text-align: center;
   font-weight: 600;
   padding-top: 3vw;
}


.p-graduate-contents-wrap {
	background-color: #ffffff;
	border-radius: 20px;
	width: 92%;
	max-width: 1200px;
	margin: 20px auto 0px;
	padding-bottom: 0;
}

.p-graduate-explanation-box {
	width: 100%;
	margin: auto;
	display: block;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
}

.p-graduate-consultation-guide {
    margin: auto;
    width: 90%;

}


.l-graduate .description-text{
	padding: 2vw 0px 4vw;
	width: 90%;
	margin: auto;
	text-align: justify;           
    text-justify: inter-character;
	line-height: 1.6;
	font-size: clamp(0.813rem, 0.768rem + 0.22vw, 0.875rem);
}

.p-graduate-explanation-box .description-text{
	width: 90%;
	padding: 2vw 0px 5vw 0;
	font-size: clamp(0.813rem, 0.768rem + 0.22vw, 0.875rem);
}


.p-graduate-explanation-inner{
	width: 100%; 
    text-align: center;
    list-style: none; 
}

.p-graduate-explanation-inner img{
    width: 70%;
    margin: auto;
}


.p-graduate-consultation-img-wrap .p-graduate-consultation-ctabtn{
	width: 90% !important;
	padding: 2.5vw 0 5vw;
}

}




/* 代ゼミが選ばれる理由 */
.p-graduate-reason-title{
	width: 50%;
	margin: auto;
    padding-top: 2.5vw;
}

.p-graduate-reason-box{
	width: 80%;
	margin: auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 40px;
}

.p-graduate-reason-inner{
	width: 45%; 
    text-align: center;
    list-style: none; 
}

.p-graduate-reason-box .description-text{
	width: 100%;
	padding: 1vw 0px;
}

.p-graduate-reason-inner .pink{
	font-size: clamp(1.125rem, 1.049rem + 0.16vw, 1.188rem);
	padding-bottom: 0.3vw;
}


.pink-small{
	font-weight: 800;
}

@media screen and (max-width:768px) {

	.p-graduate-reason-title{
	width: 80%;
	margin: auto;
    padding: 5vw 0;
	
}


.p-graduate-reason-box{
	width: 100%;
	margin: auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px;
	padding-bottom: 5vw;
}


.p-graduate-reason-inner .pink{
	font-size: clamp(1rem, 0.924rem + 0.16vw, 1.063rem);
	padding-bottom: 1vw;
}

.pink-small{
	font-size: clamp(0.875rem, 0.83rem + 0.22vw, 0.938rem);
	font-weight: 800;
}

}





/* コース一覧と年間学費 */
.p-graduate-tuition-title{
	width: 45%;
    margin: auto;
    padding-top: 2.5vw;
}

.p-graduate-tuition-subtitle-inner{
	width:30%;
    margin: auto;
    padding-top: 2.5vw;
}

.p-graduate-tuition-img-wrap{
	width: 65%;
    margin: auto;
}

.p-graduate-tuition-img-wrap .p-graduate-tuition-img{
	width: 100%;
    margin: auto;
}

@media screen and (max-width:768px) {
.p-graduate-tuition-title{
	width: 80%;
    margin: auto;
    padding: 5vw 0;
}

.p-graduate-tuition-subtitle-inner {
    width: 60%;
    margin: auto;
}

.p-graduate-tuition-img-wrap {
    width: 92%;
    margin: auto;
    padding:2vw 0 5vw;

}

}



/* 大学受験科説明会イベントカレンダー */
.p-graduate-calendar-wrap{
	display: block;
	margin: auto;
	padding: 2.5vw 0px 0 0;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

.p-graduate-calendar-title {
	width: 70%;
	margin: auto;
}

.title-box p{
	color: #ffffff;
	font-weight: 900;
	letter-spacing: 0.1em;
}

.p-graduate-calendar-text {
	font-size: clamp(1.125rem, 1.049rem + 0.16vw, 1.188rem);
	width: 70%;
	text-align: center;
	padding-top: 2.5vw;
	margin: auto;
}


.p-graduate-calendar-ctabtn {
	width: 40%;
	margin: auto;
	padding-top: 2.5vw;
}
@media screen and (max-width:768px) {

	.p-graduate-calendar-wrap {
		display: block;
		margin: auto;
		padding: 5vw 0px;
		justify-content: center;
		align-items: center;
		gap: 20px;
	}


	.p-graduate-calendar-text {
		width: 90%;
		text-align: justify;
		text-justify: inter-character;
		margin: auto;
		text-align-last: left;
		line-height: 1.7;
		letter-spacing: 0.05em;
		font-size: clamp(1.063rem, 0.682rem + 0.79vw, 1.375rem);
	}



	.p-graduate-calendar-ctabtn {
		width: 80%;
		margin: auto;
		padding-top: 2.5vw;
	}



}





/* 入学金半額キャンペーン */
.p-graduate-contents-campaign-wrap{
	background-color: #FFB5D5;
    border-radius: 20px;
    width: 80%;
    max-width: 1200px;
    margin: 40px auto 0px;
}

.p-graduate-campaign-img-wrap{
	width: 85%;
    margin: auto;
    padding-bottom: 2.5vw;
}

.p-graduate-campaign-title{
	width: 80%;
	padding-top: 3.5vw;
	margin: auto;
}

.p-graduate-campaign-subtitle{
	width: 50%;
	margin: auto;
	padding-top: 3.5vw;
}

.p-graduate-campaign-img{
	padding-top: 3.5vw;
}



@media screen and (max-width:768px) {
.p-graduate-contents-campaign-wrap{
	background-color:  #FFB5D5;
    border-radius: 20px;
    width: 92%;
    margin: 20px auto 0px;
}


.p-graduate-consultation-ctabtn-wrap .cta-btn{
	width: 92% !important;
	transform: translateX(-5px);
}


.p-graduate-campaign-title{
	width: 100%;
	padding-top: 5vw;
	margin: auto;
}


.p-graduate-campaign-subtitle{
	width: 70%;
	margin: auto;
	padding-top: 3.5vw;
}


.p-graduate-contents-campaign-wrap .p-graduate-consultation-ctabtn{
	width: 100% !important;
	padding: 2vw 0 5vw;
}


.p-graduate-campaign-img-wrap{
	width: 92%;
    margin: auto;
	padding-bottom: 0;
}

}





/* 申込の流れ */
.p-graduate-application-box{
	width: 90%;
    margin: auto;
    display: flex;
	align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 2.5vw 0;
	list-style: none; ;
}

.p-graduate-application-title{
	width: 35%;
    margin: auto;
    padding-top: 2.5vw;
}

.p-graduate-application-inner{
	width: 20%;
    text-align: center;
}

.p-graduate-application-inner .description-text{
	padding: 1vw 0px;
    width: 100%;
    margin: auto;
    text-align: justify;
    text-justify: inter-character;
    line-height: 1.5;
}

.p-graduate-application-polygon{
	width: 2%;
	align-self: center; 
}

.p-graduate-application-polygon img {
    display: block;
    width: 100%;
    height: auto;
}

.p-graduate-application-text{
	font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
	margin: auto;
	text-align: center;
}

@media screen and (max-width:768px) {

	
.p-graduate-application-title{
	width: 70%;
    margin: auto;
    padding-top: 5vw;
}

.p-graduate-application-box{
	width: 92%;
    margin: auto;
    display: flex;
	flex-direction: column;
	align-items: center;
    justify-content: flex-start;
    padding-bottom: 5vw;
	list-style: none; ;
	padding-top: 5vw;
}

.p-graduate-application-inner {
	width: 100% !important;
	display: grid;
	/* flexより配置が強力なgridを使います */
	grid-template-columns: 100px 1fr;
	grid-template-rows: auto auto;
	column-gap: 10px;
	row-gap: 5px;
	align-items: start;
	
}
/* 左側のイラスト（1枚目の画像） */
.p-graduate-application-inner img:nth-of-type(1) {
	grid-row: 1 / 3;
	/* 1行目から2行目まで（右側2つ分）ぶち抜きで横に居座る */
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* 右側のsubtitle（2枚目の画像） */
.p-graduate-application-inner picture {
	grid-column: 2 / 3;
	/* 右側の列に配置 */
	grid-row: 1 / 2;
	width: auto;
	max-width: 89%;
	height: auto;
	justify-self: start;
	align-self: end;
}

.p-graduate-application-inner:nth-of-type(1) picture {
    max-width: 43% !important; 
}


.p-graduate-application-inner:nth-of-type(3) picture {
    max-width: 52% !important; 
}


.p-graduate-application-inner:nth-of-type(7) picture {
    max-width: 60% !important; 
}

/* 右側の文章（pタグ） */
.p-graduate-application-inner .description-text {
	grid-column: 2 / 3;
	/* これも右側の列に配置 */
	grid-row: 2 / 3;
	width: 100% !important;
	margin: 0 !important;
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
}


.p-graduate-application-polygon {
	display: block;
	width: 20px;
	margin: 5px auto !important; 
	transform: rotate(90deg);
	line-height: 0;
	margin-top: -3vw !important;
    margin-bottom: -2vw !important;
}


.p-graduate-application-text{
	width: 90%;
	font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
	margin: auto;
	text-align: center;
	padding-bottom: 5vw;
}

}






/* 高卒生口コミ */
.p-graduate-voice-title{
	width: 25%;
    margin: auto;
    padding-top: 2.5vw;
}

.p-graduate-contents-wrap .inner {
    width: 95%;     
    margin: 0 auto;  
    overflow: hidden;
    padding: 20px 50px 40px;; 
}

.l-graduate .card-header {
	height: 210px !important;
    display: flex !important;      
    flex-direction: column !important; /* 中身（合格実績と名前・写真）を縦に並べる */          
    text-align: center; 
	min-height: 210px !important;      /* 全員のヘッダーの高さを最低280pxに揃える */
    display: flex !important;
    justify-content: flex-start !important; /* 中身を上に詰める */
    align-items: center !important;       
  }

.l-graduate .slick-prev:before, .l-graduate .slick-next:before {
    color: #F52D84 !important;
}

.l-graduate .member-card {
    flex-shrink: 0;
    width: 300px;/* カードのサイズ（縦長デザイン） */
    background-color: #ffffff;
	border: 1.7px solid #F52D84;
    padding: 0px 15px 10px 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* ふんわりした影 */
    box-sizing: border-box;
	margin: 0 10px;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
   }

.l-graduate .info-job {
    color: #F52D84;
    font-weight: bold;
    font-size: 0.95rem;
	min-height: 2em;       /* 2行分くらいの高さを確保 */
    display: flex;
    align-items: center;    /* 文字自体は上下中央 */
    justify-content: center;
	margin-top: 10px;
  }

/* 2. 丸い背景と枠線を作る */
.l-graduate .slick-prev:before,.l-graduate .slick-next:before {
    content: "" !important; /* 標準の文字（矢印）を消す */
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    background-color: #ffffff !important; /* 丸の中身を白に */
    border: 2px solid #F52D84 !important;  /* 丸の枠線を青に */
    border-radius: 50% !important;        /* 正円にする */
    opacity: 1 !important;     /* 透けないように固定 */
}

/* 3. 中に青い三角を作る（共通設定） */
.l-graduate .slick-prev:after,.l-graduate .slick-next:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 15px;
    height: 15px;
    border-top: 2.5px solid #F52D84;   /* 三角（L字）の線 */
    border-right: 2.5px solid #F52D84; /* 三角（L字）の線 */
	opacity: 1 !important;     /* 透けないように固定 */
}

/* ホバーした時に少し色を濃くする（お好みで） */
.l-graduate .slick-prev:hover:before,.l-graduate .slick-next:hover:before {
    border-color: #f70970;
}


@media screen and (max-width:768px) {


.p-graduate-contents-wrap .inner {
    width: 100%;     
    margin: 0 auto;  
    overflow: hidden;
    padding: 20px 0px 20px;; 
}

.p-graduate-voice-title{
	width: 53%;
    margin: auto;
    padding-top: 5vw;
}

.l-graduate .p-graduate-contents-wrap:last-of-type {
        border-radius: 0px;
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

}





/* *------------------------------------- 保護者カスタマイズ --------------------------------* */
.p-guardian-wrap{
	width: 95%;
	margin: auto;
	background-image: 
            url(../img/guardian_bg.png), 
            linear-gradient(to bottom, transparent 40vw, #FFF5CD 40vw) !important;

	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	height: auto;
	padding-bottom: 40px;
}

.p-guardian-title{
	width: 60%;
	margin: auto;
	padding: 10vw 0px 3vw 0px;
}

.p-guardian-text {
	width: 55%;
	margin: auto;
	font-size: clamp(1.063rem, 0.682rem + 0.79vw, 1.375rem);
	font-weight: 500;
	color: #333333;
	line-height: 1.7;
	text-align: justify;
	text-justify: inter-character;
}

.p-guardian-checkimg{
	width: 45%;
	margin: auto;
	padding-top: 2vw;
	transform: translateX(4%);
}

@media screen and (max-width:768px) {
.p-guardian-wrap{
	width: 100%;
	margin: auto;
	background-image: 
            url(../img/guardian_bg_sp.png), 
            linear-gradient(to bottom, transparent 40vw, #FFF5CD 40vw) !important;

	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	height: auto;
	padding-bottom: 40px;
}


.p-guardian-title{
	width: 70%;
	margin: auto;
	padding:20vw 0px 5vw 0px;
}



.p-guardian-text{
	width: 90%;
	margin: auto;
	font-size: clamp(1.063rem, 0.682rem + 0.79vw, 1.375rem);
	font-weight: 500;
	color: #333333;
	line-height: 1.7;
}



}





/* 大学受験科説明会*/
.p-guardian-contents-wrap{
    background-color: #ffffff;
	border-radius: 20px;
	width: 80%;
	max-width: 1200px;
	margin: 40px auto 0px;
}

.p-guardian-consultation-subtitle{
	width: 30%;
	padding-top: 2.5vw ;
	margin: auto;
}


.p-guardian-contents-wrap .line{
	width: 15%;
	margin: auto;
	padding-top: 1vw;
}

.p-guardian-consultation-title{
	margin: auto;
	padding-top: 2.5vw;
	text-align: center;
}

.p-guardian-consultation-text {
   font-size: clamp(1.25rem, 0.794rem + 0.95vw, 1.625rem);
   text-align: center;
   font-weight: 600;
   padding-top: 1vw;
   line-height: 1.7;
}

.p-guardian-consultation-img-wrap{
	padding-top: 2.5vw;
}


.l-guardian .description-text{
	padding: 2vw 0px;
	width: 60%;
	margin: auto;
	text-align: justify;           
    text-justify: inter-character;
	line-height: 1.7;
}

.p-guardian-explanation-box{
	width: 80%;
	margin: auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 40px;
	padding-bottom: 2.5vw;
}

.p-guardian-explanation-inner{
	width: 45%; 
    text-align: center;
    list-style: none; 
}

.p-guardian-explanation-box .description-text{
	width: 100%;
	padding: 1vw 0px;
}

.p-guardian-explanation-inner .pink{
	font-size: clamp(1.125rem, 1.049rem + 0.16vw, 1.188rem);
	padding-bottom: 1vw;
}

.p-guardian-consultation-ctabtn img{
    margin-top: 1vw ;
}

.p-guardian-consultation-ctabtn-wrap{
	width: 100%;
	margin: auto;
	padding-bottom: 2.5vw;
}

@media screen and (max-width:768px) {
.p-guardian-consultation-subtitle {
		width: 65%;
		padding-top: 5vw;
		margin: auto;
	}

	
.p-guardian-consultation-title{
	margin: auto;
	padding-top: 5vw;
	width: 90%;
}


.p-guardian-consultation-text {
   font-size:clamp(1.5rem, 1.366rem + 0.67vw, 1.688rem);
   text-align: center;
   font-weight: 600;
   padding-top: 3vw;
}


.p-guardian-contents-wrap {
	background-color: #ffffff;
	border-radius: 20px;
	width: 92%;
	max-width: 1200px;
	margin: 20px auto 0px;
	padding-bottom: 0;
}

.p-guardian-explanation-box {
	width: 100%;
	margin: auto;
	display: block;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
}

.p-guardian-consultation-guide {
    margin: auto;
    width: 90%;

}


.l-guardian .description-text{
	padding: 2vw 0px 4vw;
	width: 90%;
	margin: auto;
	text-align: justify;           
    text-justify: inter-character;
	line-height: 1.6;
	font-size: clamp(0.813rem, 0.768rem + 0.22vw, 0.875rem);
}

.p-guardian-explanation-box .description-text{
	width: 90%;
	padding: 2vw 0px 5vw 0;
	font-size: clamp(0.813rem, 0.768rem + 0.22vw, 0.875rem);
}


.p-guardian-explanation-inner{
	width: 100%; 
    text-align: center;
    list-style: none; 
}

.p-guardian-explanation-inner img{
    width: 90%;
    margin: auto;
}


.p-guardian-consultation-ctabtn-wrap .p-guardian-consultation-ctabtn{
	width: 90% !important;
	padding-bottom: 2vw;
}


.p-guardian-consultation-ctabtn-wrap{
	width: 100%;
	margin: auto;
	padding-bottom: 5vw;
}

.p-guardian-contents-wrap .line{
	width: 30%;
	margin: auto;
	padding-top: 1vw;
}

}






/* 保護者様に喜ばれる代ゼミのサポート体制とは */
.p-guardian-support-title{
	width: 50%;
	margin: auto;
    padding: 2.5vw 0 2.5vw 0;
}

.p-guardian-support-box{
	width: 80%;
	margin: auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 40px;
	padding-bottom: 2.5vw;
}

.p-guardian-support-inner{
	width: 45%; 
    text-align: center;
    list-style: none; 
}

.p-guardian-support-box .description-text{
	width: 100%;
	padding: 1vw 0px;
}

.p-guardian-support-inner .yellow{
	font-size: clamp(1.125rem, 1.049rem + 0.16vw, 1.188rem);
	padding-bottom: 0.3vw;
}


@media screen and (max-width:768px) {
.p-guardian-support-title{
	width: 90%;
	margin: auto;
    padding: 5vw 0;
}


.p-guardian-support-box{
	width: 100%;
	margin: auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px;
	padding-bottom: 5vw;
}


.p-guardian-support-inner .yellow{
	font-size: clamp(1rem, 0.924rem + 0.16vw, 1.063rem);
	padding-bottom: 1vw;
}


	
}





/* 保護者口コミ */
.p-guardian-voice-title{
	width: 45%;
    margin: auto;
    padding-top: 2.5vw;
}

.p-guardian-contents-wrap .inner {
    width: 95%;     
    margin: 0 auto;  
    overflow: hidden;
    padding: 20px 50px 40px;; 
}

.l-guardian .slick-prev:before, .l-guardian .slick-next:before {
    color: #FFAA00 !important;
}

.l-guardian .member-card {
    flex-shrink: 0;
    width: 300px;/* カードのサイズ（縦長デザイン） */
    background-color: #ffffff;
	border: 1.7px solid #FFAA00;
    padding: 0px 15px 10px 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* ふんわりした影 */
    box-sizing: border-box;
	margin: 0 10px;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
   }

.l-guardian .info-job {
    color: #FFAA00;
    font-weight: bold;
    font-size: 1rem;
	min-height: 3em;       /* 2行分くらいの高さを確保 */
    display: flex;
    align-items: center;    /* 文字自体は上下中央 */
    justify-content: center;
	margin-top: 10px;
  }

 .l-guardian .card-header{
	min-height: 210px !important;
 }

/* 2. 丸い背景と枠線を作る */
.l-guardian .slick-prev:before,.l-guardian .slick-next:before {
    content: "" !important; /* 標準の文字（矢印）を消す */
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    background-color: #ffffff !important; /* 丸の中身を白に */
    border: 2px solid #FFAA00 !important;  /* 丸の枠線を青に */
    border-radius: 50% !important;        /* 正円にする */
    opacity: 1 !important;     /* 透けないように固定 */
}

/* 3. 中に青い三角を作る（共通設定） */
.l-guardian .slick-prev:after,.l-guardian .slick-next:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 15px;
    height: 15px;
    border-top: 2.5px solid #FFAA00;   /* 三角（L字）の線 */
    border-right: 2.5px solid #FFAA00; /* 三角（L字）の線 */
	opacity: 1 !important;     /* 透けないように固定 */
}

/* ホバーした時に少し色を濃くする（お好みで） */
.l-guardian .slick-prev:hover:before,.l-guardian .slick-next:hover:before {
    border-color: #d58f03;
}
  

@media screen and (max-width:768px) {

	
.p-guardian-contents-wrap .inner {
    width: 100%;     
    margin: 0 auto;  
    overflow: hidden;
    padding: 20px 0px 20px;; 
}

.p-guardian-voice-title{
	width: 75%;
    margin: auto;
    padding-top: 5vw;
}

.l-guardian .p-guardian-contents-wrap:last-of-type {
        border-radius: 0px;
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

}



  



/* *------------------------------------- テキスト共通カスタマイズ --------------------------------* */
.bule{
	color: #31B0FA;
	font-weight: 800;
}

.pink{
	color: #F52D84;
	font-weight: 800;
}

.yellow{
	color: #FFAA00;
	font-weight: 800;
}

.noto-font{
	font-family: "Noto Sans JP", sans-serif;
}

.description-text{
	font-size: clamp(1rem, 0.924rem + 0.16vw, 1.063rem);

}

.bule-yellowline{
	color: #31B0FA;
	font-weight: 900;
	background: linear-gradient(transparent 60%, #FFF3C4 60%);
}

.yellowline{
	background: linear-gradient(transparent 60%, #FFF3C4 60%);
}

.bold{
	font-weight: bold;
}

.big{
	font-size: clamp(1.25rem, 0.794rem + 0.95vw, 1.625rem);
}

@media screen and (max-width:768px) {

.description-text{
	font-size: clamp(0.938rem, 0.848rem + 0.45vw, 1.063rem);

}

}





/* *------------------------------------- コンテンツ共通カスタマイズ --------------------------------* */
.cta-btn{
     width: 60%;
	 margin: auto ;
}




.line{
	width: 10%;
	margin: auto;
	padding-top: 3vw;
}

@media screen and (max-width:768px) {


.l-hs .line{
	display: none;
}

.l-graduate .line{
	display: none;
}


}




/*--------------------------------------- こだわりカスタマイズ ------------------------------------*/

.l-commitment {
	margin-top: max(-0.9166666667vw, -11px);
	padding-bottom: min(3.6666666667vw, 44px);
	position: relative;
	z-index: 1;
}


/*------------------------------------------ フッターカスタマイズ ------------------------------------------*/
/* フッター全体の基本設定 */
.l-footer {
    padding-block: 60px 40px;
    background-color: #EFEFEF;
    border-top: 1px solid #eee;

}

/* メインエリア：PCでは横並び */
.p-footer__main {
   display: flex;
   flex-wrap: wrap;
    justify-content: center; /* ★左右中央に配置 */
    align-items: flex-start; /* 上で揃える */
    gap: 50px !important;    /* ★間隔を20pxに固定 */
    max-width: 1000px;       /* 全体の最大幅（お好みで調整） */
    margin: 0 auto 40px;     /* 外側を中央寄せ */
    margin-bottom: 40px;
	width: 90%;
	padding-bottom: 7%;
}

/* 左側の情報グループ */
.p-footer__info-group {
    flex: 0 0 auto;         
    max-width: 350px; width: 100%;
}

/* 見出しのテキスト設定 */
.footer-title {
    display: inline-block;
    position: relative;
    padding-left: 15px; /* 四角形が表示される分の余白 */
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

/* 青い縦長の四角形を作る */
.footer-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* 垂直中央に配置 */
    width: 6px;      /* 四角の横幅 */
    height: 1.2em;   /* 四角の高さ（文字より少し高い程度） */
    background-color: #31B0FA; /* 代ゼミブルー */
}

.p-footer__details {
    font-size: 0.9rem;
    line-height: 1.8;
    color: #333;
}



.p-footer__details p {
    margin-bottom: 15px;
	line-height: 1.7 !important;
}

/* 右側のマップエリア */
.p-footer__map {
    flex: 0 0 auto;         /* ★勝手に伸びないように固定 */
    width: 450px;           /* マップの横幅を指定 */
    height: 300px;
}

.p-footer__map iframe {
    width: 100%;
    height: 100%;
}

/* ナビゲーションリスト */
.p-footer__navlist {
    display: flex;
    justify-content: center;
    gap: 20px;
    border-top: 1px solid #eee;
    padding-top: 30px;
}

.tel-link {
    pointer-events: none !important;
    cursor: default !important;
    text-decoration: none !important;
    color: inherit !important; /* 文字色を変えない */
}


@media screen and (max-width: 768px) {
    .p-footer__main {
        flex-direction: column;
        align-items: center; /* スマホでは中央揃え */
        gap: 30px !important;
		margin-bottom: 20vw;
    }

	.p-footer__info-group,
    .p-footer__map {
        width: 100%;        /* スマホでは横幅いっぱい */
        max-width: 500px;
    }
    
    .p-footer__logo {
        margin-inline: auto; /* ロゴ中央寄せ */
    }

    .p-footer__details {
        text-align: left; /* テキストは左寄せが見やすい */
    }

    .p-footer__map {
        width: 100%;
        height: 250px;
    }
    
    .p-footer__navlist {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

	.tel-link {
        pointer-events: auto !important;
        cursor: pointer !important;
        color: #0066CC !important; /* スマホではリンクっぽく色を変えてもOK */
        text-decoration: underline !important; /* 下線を引くなど */
    }
}

/*-------------------------------------共通CSS（common.css）------------------------------------- */

/* 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,img,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{border:0;font-size:100%;font-style:normal;font-weight:400;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}html{overflow-y:scroll}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}input,textarea{margin:0;padding:0}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th{text-align:left}a:focus{outline:0}button,input,textarea{-webkit-appearance:none;background-color:transparent;border:none;border-radius:0}body{overflow:hidden}*{box-sizing:border-box}.c-container{height:auto;margin:0 auto;max-width:1200px;width:100%}.fv-banner-wrap{height:auto;margin:0 auto;max-width:1200px;width:100%}.c-pc_only{display:block!important}.c-pc_only--flex{display:flex!important}.c-sp_only{display:none!important}.c-flex--center{align-items:center;display:flex;justify-content:center}.c-flex--spacebetween{display:flex;justify-content:space-between}.c-cta{height:auto;position:relative;width:100%;z-index:2}.c-cta.u-fv_next{margin-top:max(-5.4166666667vw,-65px)}.c-cta .c-container{position:relative}.c-cta .c-cta__btn1{bottom:min(9vw,108px);height:auto;left:11.6666666667%;position:absolute;width:34.8333333333%}.c-cta .c-cta__btn2{bottom:min(9vw,108px);height:auto;position:absolute;right:11.6666666667%;width:34.8333333333%}.c-btn__animation{overflow:hidden}.c-btn__animation:after{animation:3s ease 0s infinite normal none running kirakira;background:#fff;box-shadow:rgba(255,255,255,.5) -10px 0 30px;content:"";height:100%;left:-50px;opacity:.8;position:absolute;top:0;transform:skewX(-24deg);width:50px;z-index:2}.c-follow_cta::after{background:#8e6621;bottom:0;content:"";height:min(11.5vw,222px);left:0;mix-blend-mode:multiply;position:fixed;width:100%;z-index:999}
.c-follow_cta .c-container{
    align-items:flex-end;
    bottom:0; */
    /* display:flex; */
    /* height:min(8.5vw,222px);
    justify-content:space-between;
    left:50%;
    padding-bottom:min(2.0833333333vw,25px);
    position:fixed;
    transform:translateX(-50%);
    width:min(26.3333333333%,1000px);
    z-index:1000}
.c-follow_cta .c-follow_cta__btn1{height:auto;position:relative;width:48.6%}.c-follow_cta .c-follow_cta__btn1 .c-follow_cta__btn1__img{border-radius:min(2vw,24px);position:relative;z-index:1}.c-follow_cta .c-follow_cta__btn1__ornament{height:auto;left:31.2839506173%;position:absolute;top:min(2.4166666667vw,27px);transform:translateY(-106%);width:37.1358024691%;z-index:2}.c-follow_cta .c-follow_cta__btn2{border-radius:min(2vw,24px);height:auto;position:relative;width:48.6%}@media screen and (min-width:421px) and (max-width:768px){.c-container{width:100%}}@media screen and (min-width:481px) and (max-width:768px){.c-container{width:100%}}@media screen and (min-width:601px) and (max-width:768px){.c-container{width:100%}}@media screen and (min-width:769px){.c-container{width:100%}}@media screen and (min-width:769px) and (max-width:1400px){.c-container{width:100%}}@media screen and (min-width:769px) and (max-width:1300px){.c-container{width:100%}}@media screen and (min-width:769px) and (max-width:1200px){.c-container{width:100%}}@media screen and (min-width:769px) and (max-width:1100px){.c-container{width:100%}}@media screen and (min-width:769px) and (max-width:1024px){.c-container{width:100%}}@media screen and (min-width:769px) and (max-width:900px){.c-container{width:100%}}@media screen and (min-width:769px) and (max-width:800px){.c-container{width:100%}}@media screen and (max-width:768px){.c-container{width:100%}.c-pc_only{display:none!important}.c-pc_only--flex{display:none!important}.c-sp_only{display:block!important}.c-cta.u-fv_next{margin-top:-21.3333333333vw}.c-cta .c-cta__btn1{bottom:10.6666666667vw;left:4.8%;width:42%}.c-cta .c-cta__btn2{bottom:10.6666666667vw;right:4.8%;width:42%}.c-follow_cta::after{height:38.9333333333vw}.c-follow_cta .c-container{height:25.9333333333vw;padding-bottom:2.9333333333vw;width:63.6666666667%;z-index:1001;}.c-follow_cta .c-follow_cta__btn1{width:49.2957746479%}.c-follow_cta .c-follow_cta__btn1 .c-follow_cta__btn1__img{border-radius:3.2vw}.c-follow_cta .c-follow_cta__btn1__ornament{left:17.8571428571%;top:2.9333333333vw;margin-top: 5px;width:60.5714285714%}.c-follow_cta .c-follow_cta__btn2{border-radius:3.2vw;width:49.2957746479%}}@media screen and (max-width:360px){.c-container{width:100%}}@keyframes kirakira{0%{left:-50px;opacity:0}15%{left:120%;opacity:.8}20%{left:120%;opacity:1}30%{left:120%;opacity:1}100%{left:120%;opacity:0}} */

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,
img,
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 {
	border: 0;
	font-size: 100%;
	font-style: normal;
	font-weight: 400;
	margin: 0;
	padding: 0;
	vertical-align: baseline
}

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

section{max-width: 1400px;
        margin: auto;}

html {
	overflow-y: scroll
}

blockquote,
q {
	quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
	content: "";
	content: none
}

input,
textarea {
	margin: 0;
	padding: 0
}

ol,
ul {
	list-style: none
}

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

caption,
th {
	text-align: left
}

a:focus {
	outline: 0
}

button,
input,
textarea {
	-webkit-appearance: none;
	background-color: transparent;
	border: none;
	border-radius: 0
}

body {
	overflow: hidden
}

* {
	box-sizing: border-box
}

.c-container {
	height: auto;
	margin: 0 auto;
	max-width: 1200px;
	width: 100%
}


.c-pc_only {
	display: block !important
}

.c-pc_only--flex {
	display: flex !important
}

.c-sp_only {
	display: none !important
}

.c-flex--center {
	align-items: center;
	display: flex;
	justify-content: center
}

.c-flex--spacebetween {
	display: flex;
	justify-content: space-between
}

.c-cta {
	height: auto;
	position: relative;
	width: 100%;
	z-index: 2
}

.c-cta.u-fv_next {
	margin-top: max(-0vw, -0px);
	background-image: url("../img/img-fv-bg.webp");
	background-size: cover;
	background-repeat: repeat-y;
	background-size: 100% auto;
	max-width: 1200px;
	margin: auto;
	padding-bottom: 35px;
}

.c-cta .c-container {
	position: relative;
	width: 80%;
}

.c-cta .c-cta__btn1 {
	bottom: min(9vw, 40px);
	height: auto;
	left: 7.666666666%;
	position: absolute;
	width: 34.8333333333%
}

.c-cta .c-cta__btn2 {
	bottom: min(9vw, 40px);
	height: auto;
	position: absolute;
	right: 6.666667%;
	width: 34.8333333333%
}

.c-btn__animation {
	overflow: hidden;
	border-radius: min(2vw, 24px)
}

.c-btn__animation:after {
	animation: 3s ease 0s infinite normal none running kirakira;
	background: #fff;
	box-shadow: rgba(255, 255, 255, .5) -10px 0 30px;
	content: "";
	height: 100%;
	left: -50px;
	opacity: .8;
	position: absolute;
	top: 0;
	transform: skewX(-24deg);
	width: 50px;
	z-index: 2
}

@media screen and (min-width:421px) and (max-width:768px) {
	.c-container {
		width: 100%;
		position: relative;
	}
}

@media screen and (min-width:481px) and (max-width:768px) {
	.c-container {
		width: 100%
	}
}

@media screen and (min-width:601px) and (max-width:768px) {
	.c-container {
		width: 100%
	}
}

@media screen and (min-width:769px) {
	.c-container {
		width: 100%;
	}

}

@media screen and (min-width:769px) and (max-width:1400px) {
	.c-container {
		width: 100%
	}
}

@media screen and (min-width:769px) and (max-width:1300px) {
	.c-container {
		width: 100%
	}
}

@media screen and (min-width:769px) and (max-width:1200px) {
	.c-container {
		width: 100%
	}
}

@media screen and (min-width:769px) and (max-width:1100px) {
	.c-container {
		width: 100%
	}
}

@media screen and (min-width:769px) and (max-width:1024px) {
	.c-container {
		width: 100%
	}
}

@media screen and (min-width:769px) and (max-width:900px) {
	.c-container {
		width: 100%
	}
}

@media screen and (min-width:769px) and (max-width:800px) {
	.c-container {
		width: 100%
	}
}

@media screen and (max-width:768px) {
	.c-container {
		width: 100%
	}

	.c-pc_only {
		display: none !important
	}

	.c-pc_only--flex {
		display: none !important
	}

	.c-sp_only {
		display: block !important
	}
}


@media screen and (max-width:360px) {
	.c-container {
		width: 100%
	}
}


    
/* ////////////////////////////////////////追従ボタン///////////////////////////////////////// */
.floting-btn-wrap{
  width: 100%;
  display: block;
  background-color: #ffffff;
  position: fixed; /* 要素を画面に固定 */
  bottom: 0px;    /* 画面下部から20pxの位置に配置 */
  right: 0px;     /* 画面右部から20pxの位置に配置 */
  z-index: 1000;   /* 他の要素より手前に表示 */
  visibility: hidden; 
  opacity: 0;
  transition: opacity 0.5s ease, visibility 0.5s;
}

/* JavaScriptでクラスを追加し、ボタンを表示する */
.floting-btn-wrap.is-show {
 visibility: visible;
  opacity: 1;
}

.floting-btn-inner {
  display: flex;
  justify-content: center;
  gap: 10px; /* ボタン同士の隙間 */
  margin: 0 auto;
  padding: 1% 0 1% 0;
}

.floting-btn-inner a {
  display: block;
  width: 30%; /* ボタンの幅を調整 */
}

.floting-btn-inner img {
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (max-width:768px) {
	.floting-btn-wrap {
		width: 100%;
		display: block;
		background-color: #ffffff;
		position: fixed;
		bottom: 0px;
		right: 0px;
		z-index: 1000;}
		

	
.floting-btn-inner a {
  display: block;
  width: 40%; /* ボタンの幅を調整 */
}

	.floting-btn-inner {
		margin: 0px auto;
		padding: 2% ;
	}
}