@charset "utf-8";
/* CSS Document */
:root{
/*高校入試ページ主要なカラー　ネイビー、ライトブルー*/
    /* --main:hsla(230, 70%, 31%, 1); */
    --main:#148cd1; /* 2025.06 */
    /* --sub:#b6daf2; */ 
    --sub:#95d0e8; /* 2025.06 */
    --subLight:#b6daf290;
/*高校入試ページ用その他のカラー*/
    /* --yellow:#F5F0C2; */
    --yellow:#ffde59;
    --pink:hsla(0, 86%, 72%, 1);
    --pinkMedium:hsla(0, 86%, 90%, 1);
    --pinkLight:hsla(0, 86%, 95%, 1);
    /* 2025秋 */
    --orange:#F0AA39;
    --salmon:#E28147;
    --red:#D85B2C;
    --brown:#837A69;
/*各コースのカラー*/
    --value:hsla(45, 100%, 45%, 1);/*黄みオレンジ、山吹色?*/
    --valueLight:hsla(45, 100%, 95%, 1);
    --premium:hsla(225, 100%, 25%, 1);/*ネイビー*/
    --premiumLight:hsla(225, 100%, 95%, 1);
    --aidoku:green;
    --aidokuLight:green;
    --free:gray;
    --freeLight:gray; 
}

.contents__area .tb_display,.contents__area .tb-and-pc_display,
.contents__area .pc_display {
	display: none;
}

@media (min-width: 768px) {
	.contents__area .tb_display {
		display: block;
	}
	.contents__area .tb-and-pc_display {
		display: block;
	}
	.contents__area .sp_display {
		display: none;
	}
	.slider a {
		flex-direction: row;
		column-gap: 20px;
	}
}
@media (min-width: 1281px) {
	.column-wrap .main {
		width: 1280px;
	}
	.contents__area .pc_display {
		display: block;
	}
    .contents__area .tb_display {
        display: none;
    }
    .contents__area .sp-and-tb_display{
        display: none;
    }
}

/*　横幅、横方向の余白設定　*/
     .l-inner-md{
         padding: 0 16px;
     }
     @media screen and (min-width:768px){
         .l-inner-md{
             width: 100%;/*width: 90%;*/
             max-width: 1120px;/*960px*/
             margin: 0 auto;
         }
     }
     
     .l-inner-ex{
         padding: 0 16px;
     }
     @media screen and (min-width:768px){
         .l-inner-ex{
             width: 90%;
             max-width: 840px;
             margin: 0 auto;
         }
     }

/*　h3見出し下の余白　*/
.campaign-heading{
    margin-bottom: clamp(32px,3.76vw,80px);/*clamp(32px,10.68cqw,80px);*/
}

/*　各セクションの間の、縦方向余白設定　*/
.campaign-padding{
    padding: 80px 0;
}
     @media screen and (min-width:768px){
        .campaign-padding{
            padding: 100px 0;
        }
     }


/*　　コンテナクエリ設定　　*/
.contents__area {
    position: relative;
  container: layout inline-size;
}

/*　　文字設定　　*/
.contents__area *{
    line-height: 1.7;
    letter-spacing: .5px;
	font-family: Noto Sans JP,Hiragino Kaku Gothic ProN,Hiragino Kaku Gothic Pro,Meiryo,sans-serif;
}
     @media screen and (min-width:768px){
        .campaign-padding{
            padding: 100px 0;
        }
     }


.contents__area h2,.contents__area h3,.contents__area h4{
    font-weight:bold;
}

.contents__area img {
	width: 100%;
    max-width: 100%;	
    height: auto;
}

.contentsTop__ttl{
    font-size: 42px; 
}


/*　-------------------
 横長ボタンの共通スタイル　
---------------------*/
.contents__area .btn__flat{
    display: block;
    width: min(80vw,296px);
    margin: 0 auto;/*0 auto 64px*/
    padding: clamp(8px,1.19vw,12px) 0;    
    background: var(--orange);/*main*/
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
/*
    border: 3px solid var(--main);
*/
    /*transform: skewX(-10deg);*/
    border-radius: 999px;
}


/*　メインビジュアル下のボタン　*/
.contents__area .parts__apply.btn__flat,.contents__area .parts__member.btn__flat{
    line-height: 1.2;
    width: min(80vw,320px);
    padding: clamp(8px,1.19vw,12px) 0;
    letter-spacing: 0.1em;
    position: relative;
}
.contents__area .parts__apply.btn__flat{
    font-size: clamp(20px,2.63vw,22px);
}
.contents__area .parts__member.btn__flat{
    font-size: clamp(20px,2.63vw,22px);
    /* line-height: 1.7; */
    background: var(--red);
    color:#fff;
}




/*　メインビジュアル下のボタンのアニメーション　*/
.btn_animation{
    position: relative;
    animation: dokundokun 2200ms ease infinite;
}
@keyframes dokundokun {
  0%  { transform: scale(1); }
  15% { transform: scale(1.05); }
  30% { transform: scale(1); }
  45% { transform: scale(1.05); }
  70% { transform: scale(1); }
}


/* フェードインアニメーション */
.contents__area .campaignFade {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1.5s, transform 1s;
}
.contents__area .campaignFade.active {
	opacity: 1;
	transform: translateY(0px);
}

/*20241007 */
.contents__area .linkarea__wrap{
    margin: clamp(32px, 6.7vw, 80px) auto;
            }

.contents__area .lead + .linkarea__wrap{/*　marginを個別に調整、「リード文に隣接する」linkarea__wrap　*/
    margin: 0 auto 80px;
}       
            
            
/*=== 矢印 ==*/
.contents__area .linkarea__wrap .scrolldown{
    position: relative;
    height: 36px;
    width: 100%;
}          
.contents__area .scrolldown span{
    position:absolute;
    display: block;
	width: 8px;
	height: 8px;
    border-right:2px solid var(--brown); 
    border-bottom:2px solid var(--brown);
    /*矢印の動き1秒かけて無限ループ*/
  /*animation: arrowmove 1s ease-in-out infinite;*/
}
.contents__area .scrolldown span:first-child{
    top: 40%;
    left: 50%;
    transform: rotate(45deg) translate(-50%,-50%);    
}
.contents__area .scrolldown span:last-child{
    top: 60%;
    left: 50%;
    transform: rotate(45deg) translate(-50%,-50%);    
}
@media screen and (min-width:768px){
    .contents__area .linkarea__wrap .scrolldown{
        height: 64px;
    }          
    .contents__area .scrolldown span{
        width: 12px;
        height: 12px;
        border-right:3px solid var(--brown); 
        border-bottom:3px solid var(--brown);
    }
}
            
            
/*下からの距離が変化して全体が下→上→下に動く*/
/*
@keyframes arrowmove{
      0%{top:35%;}
      50%{top:50%;}
     100%{top:35%;}
 }
*/

/*
.scrolldown span:nth-child(2){
  bottom:clamp(24px,5.14vw,62px);
                }               
*/



/*　-------------------
 受付終了メッセージ
---------------------*/

.message-apply-end{
    margin-bottom: 30px;
    font-size: clamp(20px,2.63vw,24px);
    width: 100%;
    padding: clamp(8px,1.19vw,12px) 8px;
    color: red;
    font-weight: 800;
    text-align: left;
    border: 4px solid red;
}
   #about .message-apply-end{
    font-size: clamp(14px,1.8vw,19px);/*～2024.8.16 clamp(20px,2.63vw,24px);*/
    padding: clamp(8px,1.19vw,10px) 6px;
}
    @media screen and (min-width:480px){
       .message-apply-end{
            text-align: center;
        }
       #about .message-apply-end{
            margin: 0 auto 30px;
            width: min(100%,480px);
        }
        
    }
    @media screen and (min-width:768px){
       #about .message-apply-end{
            width: 100%;
        }
        
    }



/*　固定ボタン　*/
/*tb-pc　右側に固定するボタン*/
#fixed-btn{
    position: fixed;
    z-index: 999;
    opacity: 0;/*最初は非表示*/

    /*右端*/
    top: 3rem;
    right: 0;
}
#fixed-btn a{
    display: none;
    place-items: center;

    /*縦長、右端付け　左を角丸*/
    writing-mode:vertical-rl;
    text-orientation: upright;
    width: 3rem;
    height: 10rem;
    border-radius: 8px 0 0 8px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    background: var(--orange);
    color: #fff;
    text-align: center;
    font-family: 'Noto Sans JP',sans-serif;
    font-weight: bold;
    font-size: 0.875rem;
    letter-spacing: 0.04rem;
    line-height: 1.4;
}


#fixed-btn a.parts__member{
    background: var(--red);
    color: #fff;
}
/*sp　下側に固定するボタン　*/
#fixed-btnWrap-sp{
    width: 100%;
    height: 4rem;
    background: rgba(250, 250, 250, .4);
    -webkit-backdrop-filter: blur(13px);
    backdrop-filter: blur(13px);
    position: fixed;/*stickyも試す*/
    z-index: 999;
    left: 0;
    bottom: 0;
}
#fixed-btnWrap-sp .btn_flex{
    display: flex;
    width: 100%;
    height: 4rem;
    justify-content: center;
    align-items: center;
    column-gap: 1rem;
}


@media screen and (min-width:768px){
    #fixed-btnWrap-sp.sp_display,#fixed-btnWrap-sp.sp_display.DownMove,#fixed-btnWrap-sp.sp_display.UpMove{
                display: none;
    }
    #fixed-btn a{
                display: grid;
    }
}

    .fixed-btn-sp{
        width: min(80vw,320px);
        height: 3rem;
    }
    .fixed-btn-sp a{
            display: grid;
            place-items: center;
            /*横長、下付け*/
            width: min(80vw,320px);
            height: 100%;
            background: var(--orange);
            border-radius: 999px;
            color: #fff;
            text-align: center;
            font-family: 'Noto Sans JP',sans-serif;
            font-weight: bold;
            font-size: 0.875rem;
            letter-spacing: 0.04rem;
            line-height: 1.4;
    }

        .fixed-btn-sp a.parts__member{
            /* background: var(--sub); *//* 2025.06 */
            background: var(--red);
            color: #fff;
        }
/*========= topへ戻るボタンのCSS ===============*/
/*リンクの形状*/
/*
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
    background: rgba(250, 250, 250, .8);
    -webkit-backdrop-filter: blur(13px);
    backdrop-filter: blur(13px);
	width: 36px;
	height: 36px;
    border:2px solid var(--main); 
    border-radius: 50%;
	font-size:0.6rem;
	transition:all 0.3s;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
*/
/*
#page-top a::before{
    display: block;
    content: '';
	width: 8px;
	height: 8px;
    transform: rotate(45deg) translate(2px,2px);
    border-top:2px solid var(--main); 
    border-left:2px solid var(--main);
	align-items:center;
}
*/
#page-top a{
	font-size:12px;
    color: #333;
    font-weight: 600;
	transition:all 0.3s;
}
#page-top .page-top__inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:4px;
}
#page-top .juken__icon__wrap{
    transition:all 0.5s;
}

#page-top .juken__icon{
    width: 40px;
    /* height: 40px; */
}

/*--リンクのhover設定が、モバイル端末にかからないように--*/

#page-top a:hover{
	opacity: 1;
}
#fixed-btn a:hover{
	opacity: 1;
}
#fixed-btnWrap-sp a:hover{
	opacity: 1;
}
.contents__area a.btn__flat:hover{
    opacity: 1;
  }


/*--リンクのhover設定--*/
@media (min-width: 768px) {
/*
    #page-top a:hover{
        opacity: .7;
    }
*/
    #page-top a:hover .juken__icon__wrap{
        transform: translateY(-5px);
    }
    #fixed-btn a:hover{
        opacity: .7;
    }
    #fixed-btnWrap-sp a:hover{
        opacity: .7;
    }
    .contents__area a.btn__flat:hover{
        opacity: .7;
      }
}


/*ページトップ*/
#page-top {
	position: fixed;
	right: clamp(8px, calc(2vw + 8px), 64px);
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove,#fixed-btnWrap-sp.UpMove{
	animation: UpAnime 0.5s forwards;
}
#fixed-btn.UpMove{
	animation: UpAnime 0.5s forwards;
}
       
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(120px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}
        
/* 右から左へ */

#fixed-btn.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}
/*　下に下がる動き　*/

#page-top.DownMove,#fixed-btnWrap-sp.DownMove{
	animation: DownAnime 0.5s forwards;
}
        
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(140px);
  }
}
/* 左から右へ戻る */

#fixed-btn.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}
        
@keyframes fadeLeftAnime{
  from {
    opacity: 1;
	transform: translateX(0);
  }

  to {
    opacity: 0;
	transform: translateX(100px);
  }
}        


/* attention */
    .attention .attention__inner{/*wrap*/
        width: min(100%,708px);
        position: relative;
    }
    .attention .attention__icon{
        vertical-align: middle;
        width: 1.5rem;
        height: 1.5rem;
    }
    .attention .attention__text{
        padding: 0.5rem;
        font-size: 14px;
        border: 3px solid #eee;
        position: relative;
    }
    .attention .attention__text strong span{
        font-weight: bold;
    }
@media screen and (min-width:768px){
    .attention .attention__text{
        padding: 1rem;
        font-size: 16px;
    }
}

/* attention02 */
    .contents__area .attention02{
        margin-top: 2rem; font-size: 0.875em;
    }
@media screen and (min-width:768px){
    .contents__area .attention02{
        justify-content: center;
    }
}



/* lead */
    .lead .lead__text{
        line-height: 1.6;
        padding: 1rem 2px;
        text-align: justify;
        font-size: clamp(14px,2.27vw,20px);
    }
    .lead .lead__text strong span{
        font-weight: bold;
    }
@media screen and (min-width:768px){
    .lead .lead__text{
        line-height: 1.7;
        padding: 2.5rem 1rem;
        text-align:center;
        max-width: 840px;
        margin: 0 auto;
    }
}

/*　ログイン・ログアウト時のCTAボタン表示切り替え用　※制御はJS側で　*/
.contents__area .PartsHidden,
#fixed-btn .PartsHidden,
#fixed-btnWrap-sp .PartsHidden
{
    display: none;
}

/*表示確認用*/
/*非会員・未ログイン*/

/* .contents__area .parts__member.PartsHidden,
#fixed-btn .parts__member.PartsHidden,
#fixed-btnWrap-sp .parts__member.PartsHidden
{
    display: none;
} */


/*ログイン状態*/

/* .contents__area .parts__apply.PartsHidden,
#fixed-btn .parts__apply.PartsHidden,
#fixed-btnWrap-sp .parts__apply.PartsHidden
{
    display: none;
} */