@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/introduction/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(80px,calc(250/1280*100vw),250px);
    font-size:clamp(16px,calc(30/1280*100vw),30px);
    font-weight: 500;
    opacity: 0.8;
}
#main_area p:before{
    content:"introduction";
    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/introduction/mainTAB.webp'); /*ページごとに変更*/
    }
}
@media only screen and (max-width:450px){
    #main_area {
      background-image: url('../images/introduction/mainSP.webp'); /*ページごとに変更*/
      height: 250px;
    }
    #main_area p{
        left:5%;
        bottom:5%;
    }
}
/*入職祝い金*/
.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------------------------------------------------------------*/
/*看護部長あいさつ*/
#message .tih2{margin-bottom: 20px;}
#message .tih2::before{content:"Message";}
#message p{line-height: 1.8;}
.imgbox{display:flex;gap:clamp(40px,calc(40/1500*100vw),90px);align-items: flex-start;}
.imgbox img{width:clamp(150px,calc(350/1280*100vw),350px);}
.imgbox div{width :clamp(220px,calc(850/1000*100vw),850px);}
.imgbox div p:not(:last-child){margin-bottom: 1em;}

/*理念・方針*/
.philosophy{width:1000px;max-width:95%;margin:auto;display: flex; flex-direction: column;align-items: center;padding: clamp(15px,calc(30/1000*100vw),30px);}
.philosophy h3{display:flex;align-items: center;margin-bottom: clamp(15px,calc(30/1000*100vw),30px);}
.philosophy 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);
}
.philosophy 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);
}

/*部署紹介*/
.linedot::before{display: block;content:"";width:100%;height:18px; background:url("../images/linedot.webp") repeat-x;margin-bottom: clamp(40px,calc(90/1920*100vw), 90px);}
.linedot{padding-bottom:clamp(40px,calc(90/1920*100vw), 90px) 0;background: url("../images/bg_grid.webp") repeat;}
#intro .tih2::before{content:"Introduction";}
.imgL,.imgR{display:flex;align-items: flex-start; background:#f6f3f1;width:95%; max-width:1380px;margin:0 0 clamp(60px,calc(120/1500*100vw), 120px);}
.imgL h3,.imgR h3{font-size:clamp(20px,calc(28/1500*100vw),28px);color:#ff8ea4; font-weight: 500;margin-bottom:1em;}
.imgL img,.imgR img{width:clamp(300px,calc(800/1500*100vw),800px);max-width: inherit;}
.imgL > div, .imgR > div{padding:30px;}
.imgR{margin-left:auto;}
.imgR p{order:2;}
.imgL > p,.imgR > p{position:relative;}
.imgL p::before{position: absolute;top:0; right:0;color:#FFF;display:block;background:#f55d8b;font-size:clamp(18px,calc(30/1500*100vw),30px);padding:clamp(5px,calc(10/1380*100vw), 10px) clamp(10px,calc(20/1380*100vw), 20px);letter-spacing: 0.3em;}
.imgR p::before{position: absolute;top:0; left:0;color:#FFF;display:block;background:#f55d8b;font-size:clamp(18px,calc(30/1500*100vw),30px);padding:clamp(5px,calc(10/1380*100vw), 10px) clamp(10px,calc(20/1380*100vw), 20px);letter-spacing: 0.3em;}
#co1::before{content:"２階 一般病棟";}
#co2::before{content:"3階 地域包括ケア病棟";}
#co3::before{content:"4階 医療療養病棟";}
#co4::before{content:"5階 介護医療院";}
#co5::before{content:"外来/健診センター";}
#co6::before{content:"訪問看護ステーション";}
/*フッター*/
.cta{ background:url("../images/introduction/bg_cta.webp") no-repeat center center/cover;}

/* レスポンシブ-----------------------------------------------------------------------*/
/* 1025px以下から
------------------------------------------------------------*/
@media screen and (max-width: 1025px) {

}

/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
    /*看護部長あいさつ*/
    #message p{line-height: 2.0;}
    .imgbox{display:block;}
    .imgbox img{width:40%;float:left;margin:0 15px 15px 15px;}
    .imgbox div{width :100%;}
    .pd15{padding:0 15px;}
    /*部署紹介*/
    #intro img{width:100% !important;}
    #intro p{line-height: 2.0;}
    .imgL,.imgR{flex-wrap: wrap;margin:0 auto 60px;}
    .imgR p{order:1 !important;}
    .imgR div{order:2;}
    /*フッター*/
    .cta{ background:url("../images/introduction/bg_ctaTAB.webp") no-repeat center center/cover;}
}

/* 450px以下から
------------------------------------------------------------*/
@media only screen and (max-width:450px){
    .philosophy h3{font-size:clamp(20px,calc(24/450*100vw),24px);}
    .philosophy .fs24{font-size:clamp(19px,calc(22/450*100vw),22px);}
    /*フッター*/
    .cta{background:url("../images/introduction/bg_ctaSP.webp") no-repeat center center/cover;} 
}