@charset "utf-8";

/*メイン画像エリア*/
#main_area{position: relative;top: 0; width:100%;z-index: 1;}
.slider {width: 100%;overflow: hidden;}
.slider li {position: absolute;	top: 0;left: 0;	width: 100%;height: 100%;opacity: 0;transition: opacity 2.5s ease-in-out;}
.slider li.active {opacity: 1;z-index: 1;}
.slider img{width: 100%;height: auto;display: block;}
#main_area p {
	position: absolute;
	bottom: clamp(20px,calc(100/1920*100vw), 40px); /* 好きな位置に調整 */
	left: 50%;
    transform:translateX(-50%);
    white-space: nowrap;
    font-size:clamp(18px,calc(38/1920*100vw), 38px);
    text-shadow:
        2px 2px 1px rgba(255,255,255,0.6),
        -2px 2px 1px rgba(255,255,255,0.6),
        2px -2px 1px rgba(255,255,255,0.6),
        -2px -2px 1px rgba(255,255,255,0.6);
    letter-spacing:0.2em;
    text-align: center;
    z-index: 2;
}
#main_area p  span{font-size:clamp(24px,calc(70/1920*100vw), 70px);color:#004c84;font-weight: 700;}
.gift img{
    position:absolute;
    right:2.5rem;
    bottom:clamp(20px,calc(100/1920*100vw), 40px);
    width:clamp(110px,calc(260/1500*100vw),260px);
    height: auto;
    transition: transform 0.3s ease;
    z-index: 3;
}
.gift:hover{opacity: 1.0;}
.gift:hover img{transform: scale(1.05);opacity: 0.9;}
/*求人情報*/
.recruit{display: flex;flex-wrap: wrap;}
.recruit h2{
    width:clamp(200px,calc(520/1920*100vw),520px);
    background:#ff8ea4;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color:#FFF;
    font-size: clamp(24px,calc(34/1920*100vw),34px);
    padding:15px 0;
}
.recruit h2 span{
    color:#4d4d4d;
    font-size: clamp(16px,calc(34/1920*100vw),20px);
}
.entrylist{
    width:calc( 100% - clamp(200px,calc(520/1920*100vw),520px));
    padding:30px;
}
.entrylist a{align-items: center;padding:5px 0;display: flex; gap:clamp(10px,calc(20/1920*100vw),1.5em);color:#000; text-decoration: underline;}
.entrylist a:hover{color:#ff8ea4;text-decoration: none;}
.entrylist a::before{content:"";display:inline-block;background:url("../images/home/arrow.svg") no-repeat center/cover; width:16px; height: 16px}
/*にじいろナース集まれ*/
.rainbownurse{position:relative;}
.rainbownurse ul{position:absolute;left:40%;bottom:20px;font-size:clamp(16px,calc(50/1920*100vw),50px);line-height: 1.4;list-style-type: "★ ";}
.rainbownurse li::first-letter{font-size:clamp(20px,calc(58/1920*100vw),58px);}

.rainbownurse li:first-child{color:#ff6171;margin-left:3em;}
.rainbownurse li:first-child::first-letter{color:#ff394d;}
.rainbownurse li:nth-child(2){color:#f9a94b;margin-left:2em;}
.rainbownurse li:nth-child(2)::first-letter{color:#f7931e;}
.rainbownurse li:nth-child(3){color:#ffd219;margin-left:1em;}
.rainbownurse li:nth-child(3)::first-letter{color:#ffc019;}
.rainbownurse li:nth-child(4){color:#33a86a;}
.rainbownurse li:nth-child(4)::first-letter{color:#009245;}
.rainbownurse li:nth-child(5){color:#338dc9;margin-left:1em;}
.rainbownurse li:nth-child(5)::first-letter{color:#0071bc;}
.rainbownurse li:nth-child(6){color:#585aa8;margin-left:2em;}
.rainbownurse li:nth-child(6)::first-letter{color:#2e3192;}
.rainbownurse li:nth-child(7){color:#93278f;margin-left:3em;}
.rainbownurse li:nth-child(7)::first-letter{color:#93278f;}

/*長崎病院の特徴*/
#feature h2::before{content:"Feature";}
ul.feature{padding-top:clamp(30px,calc(50/1500*100vw),50px); }
.box{position: relative;background:#FFF;padding:clamp(15px,calc(20/1500*100vw),20px);display:flex; flex-direction: column; }
.box img{position:absolute; top:-40px;left:50%;transform: translateX(-50%);}
.box h3{margin-top:35px;text-align: center;color:#fc8caa;font-size:clamp(18px,calc(22/1500*100vw),22px);min-height: 3.8em;font-weight: 500;}
.box h3 span{font-size:clamp(22px,calc(30/1500*100vw),30px); line-height: 1.0;}
.btnwrap{margin: clamp(30px,calc(60/1500*100vw),60px) auto 0;display: flex;gap:30px;justify-content: center;flex-wrap: wrap;}

/*数字で見る長崎病院*/
#number h2::before{content:"For Reference";}
table.mb60{width:100%; border-collapse: collapse;background:#FFF;}
table.mb60 td{border-right:1px solid #ccc;border-bottom:1px solid #ccc;text-align: center;padding:20px 0;font-size: clamp(14px,calc(30/1280*100vw),30px);}
table.mb60 tr td:last-child{border-right:0;}
.LL{font-size:clamp(26px,calc(74/1280*100vw),74px) !important;color:#ff8ea4;font-weight:500;}
.L{font-size:clamp(22px,calc(58/1280*100vw),58px)!important;color:#ff8ea4;font-weight:500;}
.lmhi{display:flex; align-items: flex-end;justify-content: center;gap:clamp(10px,calc(50/1280*100vw),50px);}
.lmhi table{background:#FFF;margin-bottom: 20px;}
.lmhi th{font-size: clamp(20px,calc(30/1500*100vw),30px); padding:0 10px;}
.lmhi td{font-size: clamp(16px,calc(26/1500*100vw),26px);text-align: center;padding:0 10px;}
.pt30{padding-top:30px;}
.pd30{padding:clamp(15px,calc(30/1280*100vw),30px);}
.lmhi img{width:40%;max-width:258px;height: auto;}
.flexbox.c3 div{padding: clamp(10px,calc(20/1280*100vw),20px);} 
.flexbox.c3 span{font-size:  clamp(26px,calc(65/1280*100vw),65px); color:#ff8ea4; font-weight: 500;}
.flexbox.c3 p{line-height:1.2;}
.traffic{display:flex;flex-wrap:wrap; justify-content: center;align-items: flex-end; gap:5%;}
.traffic img{width:60%;max-width: 719px; height: auto;}
.traffic picture{display:block;width:30%;}
.traffic picture img{width:100%;max-width: 360px; height: auto;}
.mb40{margin-bottom:clamp(15px,calc(40/1280*100vw),40px);}

/*フッター*/
.cta{background:url("../images/bg_cta.webp") no-repeat center center/cover;}
/* レスポンシブ
------------------------------------------------------------*/
/* 1200px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1200px){
    .feature li{width:48.5%;}
}
/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
	header{position: relative;background: rgba(255, 255, 255, 1.0); }
	.slider p {
		top:15%; /* 好きな位置に調整 */
		left: 6%;
		font-size: clamp(1.125rem, 0.929rem + 0.7vw, 1.375rem);
		padding: 10px 20px;
		line-height: 1.6;
		letter-spacing: 0;
	}
}
/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
    #main_area p {bottom:4%;letter-spacing:0.1em;}
    .gift img{right:1rem; bottom:4%;}
    /*求人情報*/
    .recruit h2,.entrylist{width:100%;}
    .entrylist{padding:15px;}
    .entrylist a{padding:10px;background:#f4f4f4;text-decoration: none;}
    .entrylist li{border:1px solid #ccc;margin-bottom: 5px;}
    
    /*長崎病院の特徴*/
    .box img{width:70px !important;}
    .box p{line-height: 2.0;}
    .feature{row-gap:70px !important;}
    .feature li{width:100%;}
    .lmhi{flex-wrap: wrap;}
    .lmhi table{width:80%; order:1;}
    /*数字で見る長崎病院*/
    .lmhi img{width:45%;}
    /*数字で見る長崎病院*/
    .traffic > img{width:100%;max-width: 680px;}
    .traffic img:last-child{width:40%;max-width: 236px;}
    .traffic{position:relative;padding-bottom: 90px;}
    .traffic img:last-child{position:absolute;left:0;bottom: 0;}
    /*フッター*/
    .cta{ background:url("../images/bg_ctaTAB.webp") no-repeat center center/cover;}
}
/* 600px以下から
------------------------------------------------------------*/
@media only screen and (max-width:600px){
    .rainbownurse ul{position:absolute;left:43%;bottom:50px;font-size:clamp(16px,calc(25/600*100vw),25px);line-height: 1.6;}
    .rainbownurse li::first-letter{font-size:clamp(20px,calc(27/600*100vw),27px);}
    .rainbownurse li:first-child,.rainbownurse li:nth-child(7){margin-left:1em;}
    .rainbownurse li:nth-child(2),.rainbownurse li:nth-child(6){margin-left:0.75em;}
    .rainbownurse li:nth-child(3),.rainbownurse li:nth-child(5){margin-left:0.5em;}
    .sp_non2{display:none;}
}
/* 450px以下から
------------------------------------------------------------*/
@media only screen and (max-width:450px){
    /*メイン画像*/
    .slider{aspect-ratio:450 / 350;}
    #main_area p {bottom:4%;left:2%;transform:none;	letter-spacing:0;}
    .gift img{width:140px; height: auto; right:5px; bottom:0.5%;}
    /*にじいろナース*/
    .rainbownurse{display: none;}
    /*長崎病院の特徴*/
    .box h3{margin-top:15px;}
    /*フッター*/
    .cta{background:url("../images/bg_ctaSP.webp") no-repeat center center/cover;} 
}