@charset "utf-8";
/*各ページ共通
------------------------------------------------------------*/
/*メイン画像エリア*/
#main_area{position: relative;top: 0; width:100%;z-index: 1;overflow: hidden;border-bottom:17px solid #ff8ea4;}
#main_area {
  position: relative;
  width: 100%;
  height: 420px;
  background-image: url('../images/careerpath/main.webp'); /*ページごとに変更*/
  background-size: cover;     
  background-position: center; /* ページによって変更OK */
  background-repeat: no-repeat;
}
#main_area p{
    position:absolute;
    left:5%;
    bottom:10%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background:#FFF;
    width:clamp(150px,calc(250/1280*100vw),250px);
    height: clamp(100px,calc(250/1280*100vw),250px);
    font-size:clamp(16px,calc(30/1280*100vw),30px);
    text-align: center;
    font-weight: 500;
    opacity: 0.8;
}
#main_area p:before{
    content:"Career Path";
    color:#ff8ea4;
    font-size:clamp(12px,calc(25/1280*100vw),25px);
    font-family: "Sniglet", system-ui;
    font-weight: 400;
}
@media only screen and (max-width:768px){
    #main_area {
      background-image: url('../images/careerpath/mainTAB.webp'); /*ページごとに変更*/
    }
}
@media only screen and (max-width:450px){
    #main_area {
      background-image: url('../images/careerpath/mainSP.webp'); /*ページごとに変更*/
      height: 250px;
    }
    #main_area p{
        left:5%;
        bottom:5%;
    }
    #main_area p br{display:none;}
}
/*入職祝い金*/
.gift img{
    position:absolute;
    right:clamp(0rem, -4.688rem + 9.77vw, 3.125rem);
    bottom:clamp(0.625rem, -1.25rem + 3.91vw, 1.875rem);
    z-index: 3;
    width:clamp(110px,calc(260/1500*100vw),260px);
    height: auto;
    transition: transform 0.3s ease;
}
.gift:hover{opacity: 1.0;}
.gift:hover img{transform: scale(1.05);opacity: 0.9;}
/*このページ単体のCSS------------------------------------------------------------*/
/*看護部教育理念*/
#philosophy .tih2{margin-bottom: 20px;}
#philosophy .tih2::before{content:"Educational policy";}
.pd30{padding:clamp(20px,calc(30/1280*100vw),30px);}
/*目的・目標*/
.purpose{position:relative;display:flex;flex-direction: column; row-gap:clamp(20px,calc(40/1280*100vw),40px); width:100%; max-width:500px;margin:auto;}
.purpose::before{position:absolute;content:""; background: url("../images/careerpath/img_l.webp") no-repeat center / contain;width:clamp(30%,calc(210/1500*100vw),210px);height:clamp(30%,calc(413/1500*100vw),413px); left:clamp(-230px, calc(-200/1000*100vw), 0px);bottom: 0;}
.purpose::after{position:absolute; content:""; background: url("../images/careerpath/img_r.webp")  no-repeat center / contain; width:clamp(30%,calc(200/1500*100vw),200px);height:clamp(30%,calc(490/1500*100vw),490px); right:clamp(-230px, calc(-200/1000*100vw), 0px);bottom: 0;}
/*教育方法の三本柱*/
.method h3{display:flex;justify-content: center;align-items: center;margin-bottom: clamp(15px,calc(30/1000*100vw),30px);font-size:clamp(22px,calc(33/1280*100vw),33px);}
.method h3::before{
	display:block;
	content:'';
	background-image:url("../images/h3bg.webp");
	background-size:contain;
	background-repeat: no-repeat;
	width:clamp(20px,calc(34/1000*100vw),34px);
	height:clamp(18px,calc(31/1000*100vw),31px);
	margin-right:clamp(15px,calc(30/1000*100vw),30px);
}
.method h3::after{
	display:block;
	content:'';
	background-image:url(../images/h3bg.webp);
	background-size:contain;
	background-repeat: no-repeat;
	width:clamp(20px,calc(34/1000*100vw),34px);
	height:clamp(18px,calc(31/1000*100vw),31px);
	margin-left:clamp(15px,calc(30/1000*100vw),30px);
	transform: scale(-1, 1);
}
.mb40{margin-bottom:clamp(20px,calc(40/1280*100vw),40px) !important;}
.fs20{font-size:clamp(16px,calc(20/1280*100vw),20px);}
.method ul{counter-reset: item;}
.method ul li{
    counter-increment: item;
    position: relative;
    padding-top:30px;
}
.method ul li::before {
    content: counter(item, decimal-leading-zero) ;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top:clamp(-40px,calc(-30/1280*100vw),-30px);
    color: #ff8ea4;
    font-size:clamp(35px,calc(42/1280*100vw),42px);
}
.linedot::after{display: block;content:"";width:100%;height:18px; background:url("../images/linedot.webp") repeat-x;margin-bottom: clamp(40px,calc(90/1920*100vw), 90px);}

/*キャリアアップ*/
#career .tih2::before{content:"Career Path";}
table{border-collapse: collapse;}
th,td{width:20%;padding:20px;}
th{vertical-align: bottom;padding:0;}
tr td:first-child{background:#fff1f6;}
tr td:nth-child(2){background:#fff1d8;}
tr td:nth-child(3){background:#edf3ff;}
tr td:nth-child(4){background:#edf3ed;}
tr td:nth-child(5){background:#f3e5f9;}
table span{display: block;text-align: center;border-radius: 30px; color:#FFF;margin-bottom: 10px;}
tr td:first-child span{background:#f0a3bf;}
tr td:nth-child(2) span{background:#e5b050;}
tr td:nth-child(3) span{background:#638ee5;}
tr td:nth-child(4) span{background:#4ea34e;}
tr td:nth-child(5) span{background:#8a46a8;}
table ul{list-style: disc;margin-left:1em;}
table ul li {margin-bottom:0.5em;}
.scroll-hint {display: none;}

/*年間プログラム*/
.program{position:relative;padding-left: clamp(28px,calc(50/1500*100vw),50px);}
.program::before{
    position: absolute;
    content:"";
    top:6px;
    left:0;
    background:url("../images/careerpath/arrow.webp") no-repeat center/contain;
    width:clamp(22px,calc(40/1500*100vw),40px);
    height: clamp(22px,calc(40/1500*100vw),40px);
}
/*フッター*/
.cta{ background:url("../images/careerpath/bg_cta.webp") no-repeat center center/cover;}

/* レスポンシブ-----------------------------------------------------------------------*/
/* 1025px以下から
------------------------------------------------------------*/
@media screen and (max-width: 1025px) {
	.tablewrap{overflow-x: scroll;position: relative;}
	.tablewrap table,.tablewrap >img{width:1000px !important;}
	.scroll-hint {
		display: block;
		opacity: 0;
		transition: opacity 0.5s ease;
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translateX(-50%);
		background: #004c84;
		color: #fff;
		padding: 15px;
		border-radius: 4px;
		font-size: 12px;
	}
	.scroll-hint.visible {
		opacity: 1;
		animation: fadeOut 5s ease-in forwards;
	}
    .tablewrap::-webkit-scrollbar { height: 10px; }/* 横スクロールなので高さ */
    .tablewrap::-webkit-scrollbar-track {background: #f0f0f0;  }  /* 背景（トラック部分） */
    .tablewrap::-webkit-scrollbar-thumb {background: #fc8caa; /* 好きな色に */ border-radius: 10px;}/* つまみ（サム部分） */
    .tablewrap >img{max-width:inherit;}
	@keyframes fadeOut{
		0%{opacity: 1;}
		30%{opacity: 0.1;}
		60%{opacity: 1;}
		100%{opacity: 0;}
	}
}
/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
    .method p{line-height:2.0;}
    table ul li,table p {line-height: 2.0;}
    /*フッター*/
    .cta{ background:url("../images/careerpath/bg_ctaTAB.webp") no-repeat center center/cover;}
}
/* 730px以下から
------------------------------------------------------------*/
@media only screen and (max-width:730px){
    /*目的・目標*/
    .purpose{max-width:100%;}
    .purpose::before,.purpose::after{display:none;}
}
/* 450px以下から
------------------------------------------------------------*/
@media only screen and (max-width:450px){
    .method li{margin-bottom:10px;}
    /*フッター*/
    .cta{background:url("../images/careerpath/bg_ctaSP.webp") no-repeat center center/cover;} 
}