@charset "utf-8";
/* CSS Document */
:root{
/*ログアウト時のメインカラー*/
	/*レッド系統*/
    --main:hsl(359.59deg 90.16% 38.92%);
    --mainMedium:hsl(0deg 87.2% 91.73%);
    --mainLight:hsl(359.66deg 100% 98.32%);  
/*グリーン系統*/
    /*--main:hsla(80, 100%, 30%, 1);
    --mainMedium:hsla(80, 100%, 90%, 1);
    --mainLight:hsla(60, 100%, 97%, 1);   */ 
    
/*オレンジ*/
/*
    --main:hsla(28, 100%, 45%, 1);
    --mainMedium:hsla(25, 100%, 90%, 1);
    --mainLight:hsla(25, 100%, 97%, 1);    
*/
    
/*ログイン時のメインカラー*/
/*ピンク*/
/*
    --main:hsla(0, 86%, 72%, 1);
    --mainMedium:hsla(0, 86%, 90%, 1);
    --mainLight:hsla(0, 86%, 95%, 1);
*/
    --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;
    --blue:#275ba0;
/*先生の異動検索ページのテーマカラーのピンク#f57b7b*/  
    --pink:hsla(0, 86%, 72%, 1);
    --pinkMedium:hsla(0, 86%, 90%, 1);
    --pinkLight:hsla(0, 86%, 95%, 1);
    /*赤みオレンジ h25→28*/
  　--orange:hsla(28, 100%, 45%, 1);
    --orangeMedium:hsla(25, 100%, 90%, 1);
    --orangeLight:hsla(25, 100%, 97%, 1);    
}

.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:750px){
         .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:750px){
         .l-inner-ex{
             width: 90%;
             max-width: 840px;
             margin: 0 auto;
         }
     }

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

/*　各セクションの間の、縦方向余白設定　*/
.campaign-padding{
    padding: 80px 0;
}
     @media screen and (min-width:750px){
        .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;
}
.contents__area a{
    line-height: normal;
}

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

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

/*　メインビジュアル　*/
/*
.mainvisual{
    width: 100%; 
    aspect-ratio:1/1;
    background-image:url(../assets/img/mainvisual_sp.jpg); 
    margin-bottom: 30px; 
    background-repeat: no-repeat;
    background-size: cover;
}
     @media screen and (min-width:750px){
        .mainvisual{
            aspect-ratio:54/19;
            background-image:url(../assets/img/mainvisual_pc.jpg); 
        }
     }
*/


.contentsTop__ttl{
    font-size: 42px; 
}


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

/*　ログイン時はボタン背景色を変更する　*/
.contents__area .btn-login .btn__flat,.contents__area .btn-login.btn__flat{
    background: var(--pink);
    border: 2px solid var(--pink);
}

/*　メインビジュアル下のボタン　*/
.contentsTop .btn-apply .btn__flat{
    margin-bottom: 30px;
    font-size: clamp(20px,2.63vw,24px);
    width: min(80vw,320px);
    padding: clamp(8px,1.19vw,12px) 0;
}
/*　メインビジュアル下のボタンのアニメーション　*/
.btn_animation{
  animation: dokundokun 2200ms ease infinite;/*1300*/
}

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

.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%;
        }
        
    }




@keyframes dokundokun {
  0%  { transform: scale(1); }
  15% { transform: scale(1.05); }
  30% { transform: scale(1); }
  45% { transform: scale(1.05); }
  70% { transform: scale(1); }
}

/*【ログイン状態のページの下部】会員向けサービスへのリンク */
           .link__forMember{
                padding: 40px 1rem;
                text-align: center;
            }
            .link__forMember .btn-apply .btn__flat{
                    font-size: clamp(20px, 2.63vw, 24px);
                    width: min(80vw, 320px);
                    padding: clamp(8px, 1.19vw, 12px) 0;
            }



/*追従するボタン*/
/*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;
            width: 3rem;
            height: 10rem;
            border-radius: 8px 0 0 8px;
            
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
            background: var(--main);
            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.btn-login a{
            background: var(--pink);
        }
/*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.btn_flex{
                display: none;
    }
*/
    #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(--main);
            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;
    }
    .cta_btn a{
            background: var(--main);
            color: #fff;
    }

        .fixed-btn-sp.btn-login a{
            background: var(--pink);
        }
        
/*========= 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;
}
    

/*--リンクのhover設定--*/
@media (min-width: 768px) {
    #page-top a:hover{
        opacity: .7;
    }
    #fixed-btn a:hover{
        opacity: .7;
    }
    #fixed-btnWrap-sp a:hover{
        opacity: .7;
    }
    .contents__area a.btn__flat:hover{
        opacity: .7;
      }
}
/*--リンクの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;
  }

/*ページトップ*/
#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(120px);
  }
}
/* 左から右へ戻る */

#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*/
        position: relative;
    }
    .attention .attention__icon{
        vertical-align: middle;
        width: 1.75rem;
        height: 1.75rem;
    }
    .attention .attention__text{
        padding: 1rem;
        border: 3px solid #eee;
        position: relative;
        /*text-indent: 1rem;*/
    }
    .attention .attention__text strong span{
        font-weight: bold;
    }
     
/* lead */
    .lead .lead__text{
        padding: 1.5rem 1rem;
        text-align: justify;
        font-size: clamp(16px,2.27vw,22px);
    }
    .lead .lead__text strong span{
        font-weight: bold;
    }



/*=== 矢印が動いてスクロールを促すアニメーション ==*/
/*スクロールダウン全体の場所*/
.scrolldown{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:1%;
  right:50%;
    /*矢印の動き1秒かけて永遠にループ*/
  animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }

/*Scrollテキストの描写*/
.scrolldown span{
    /*描画位置*/
  position: absolute;
  bottom:clamp(32px,6.1vw,70px);
    /*矢印の形状*/
	width: 8px;
	height: 8px;
    transform: rotate(45deg) translate(2px,2px);
    border-right:2px solid var(--main); 
    border-bottom:2px solid var(--main);
}
.scrolldown span:nth-child(2){
  bottom:clamp(24px,5.14vw,62px);
                }