@charset "utf-8";

/* ------------------------------
 メインビジュアル（PC）
------------------------------ */
.mainBlock {
    position: relative;
    z-index: 1;
}
.mainBlock::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 620px;
    background: url(../../img/main_bg.png) no-repeat center / cover;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
}
.mainBlock .mainImg {
    position: relative;
    z-index: 1;
}
.mainBlock .mainImg::before {
    content: "";
    position: absolute;
    width: 427px;
    height: 380px;
    background: url(../../img/ilust_main.png) no-repeat center / cover;
    left: -332px;
    bottom: -120px;
}
.mainBlock .mainImg img {
    border-radius: 40px;
}
.mainBlock .mainImg img,
.guideBlock figure img,
.careBlock figure img,
.otherBlock > figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mainBlock h1 {
    position: absolute;
    font-size: 5.2rem;
    letter-spacing: 0.050em;
    top: calc(85px + 85px);
    left: 80px;
    z-index: 2;
}
.mainBlock h1 .text-marker {
    color: #262626;
    line-height: 1.75;
	background-color: #fff;
	padding: 10px;
    border-radius: 8px;
}
@media print, screen and (min-width: 768px) {
    .mainBlock {
        display: flex;
        justify-content: flex-end;
        flex-direction: row-reverse;
        max-width: 1920px;
        height: 944px;
        margin: 0 auto 115px;
    }
    .mainBlock .mainImg {
        width: 76.563%;
        margin: 85px 3% 0 auto;
    }
    .mainBlock .mainImg img {
        object-position: left;
    }
}
@media print, screen and (min-width: 768px) and (max-width: 1500px) {
    .mainBlock .mainImg::before {
        left: -290px;
    }
    .mainBlock h1 {
        left: 2%;
    }
}
/* ------------------------------
 メインビジュアル（SP）
------------------------------ */
@media screen and (max-width: 767px) {
    .mainBlock {
        padding-top: 60px;
        margin-bottom: 80px;
    }
    .mainBlock::before {
        height: 54%;
        min-height: 300px;
    }
    .mainBlock .mainImg {
        width: 90%;
        margin-left: 10%;
        margin-top: -30px;
    }
    .mainBlock .mainImg::before {
        width: 175px;
        height: 156px;
        left: -10.5%;
        bottom: -60px;
    }
    .mainBlock .mainImg img {
        border-radius: 20px 0 0 20px;
    }
    .mainBlock h1 {
        position: relative;
        font-size: 3.0rem;
        letter-spacing: 0.030em;
        padding: 0 4%;
        top: auto;
        left: auto;
    }
    .mainBlock h1 .text-marker {
        padding: 7px 5px;
        border-radius: 4px;
    }
}
@media screen and (max-width: 374px) {
    .mainBlock h1 {
        font-size: 2.8rem;
    }
}

/* ------------------------------
 見出し・テキスト（PC）
------------------------------ */
/* -- h2 -- */
.contentsHome h2 {
    font-size: 4.6rem;
    letter-spacing: 0.020em;
    margin-bottom: 30px;
}
.contentsHome h2::before {
    content: "";
    display: block;
    width: 78px;
    height: 7px;
    background: url(../img/h_bg.png) no-repeat center / cover;
    border-radius: 3px;
    margin-bottom: 25px;
}
/* -- h3 -- */
.contentsHome h3 {
	font-size: 2.8rem;
	margin-bottom: 25px;
}
.contentsHome h3::before {
	content: "";
	position: absolute;
	display: block;
	width: 80px;
	height: 5px;
	background: rgb(87,227,27);
	background: linear-gradient(90deg, rgba(87,227,27,1) 0%, rgba(0,176,138,1) 100%);
	border-radius: 0 5px 0 0;
	left: 0;
	bottom: 0;
}
.contentsHome h3::after {
	content: "";
	display: block;
	width: 100%;
	height: 0px;
	border-bottom: dotted 1px #A1C3D1;
	margin-top: 15px;
}
.text-lead {
    line-height: 1.75;
}
/* ------------------------------
 見出し・テキスト（SP）
------------------------------ */
@media screen and (max-width: 767px) {
    /* -- h2 -- */
    .contentsHome h2 {
        font-size: 2.8rem;
        margin-bottom: 30px;
    }
    .contentsHome h2::before {
        width: 55px;
        height: 6px;
        margin-bottom: 15px;
    }
	/* -- h3 -- */
	.contentsHome h3 {
		font-size: 2.1rem;
		margin-bottom: 15px;
	}
}

/* ------------------------------
 聖隷ホスピスについて（PC）
------------------------------ */
section {
    position: relative;
    z-index: 1;
}
section .btn {
    margin-top: 30px;
}
.aboutBlock {
    margin-bottom: 105px;
}
.aboutBlock .inBlock {
    position: relative;
}
.contentsHome .aboutBlock h2 {
    text-align: center;
    margin-bottom: 40px;
}
.contentsHome .aboutBlock h2::before {
    margin-left: auto;
    margin-right: auto;
}
.aboutBlock .btn {
    text-align: center;
}
@media print, screen and (min-width: 768px) {
    .aboutBlock p {
        text-align: center;
    }
}
/* ------------------------------
 聖隷ホスピスについて（SP）
------------------------------ */
@media screen and (max-width: 767px) {
    section .btn {
        margin-top: 20px;
    }
    .aboutBlock {
        margin-bottom: 85px;
    }
    .contentsHome .aboutBlock h2 {
        margin-bottom: 30px;
    }
}

/* ------------------------------
 入院について／緩和ケアの基準（PC）
------------------------------ */
.bgContainer,
.guideBlock,
.careBlock {
    position: relative;
    z-index: 1;
}
.bgContainer {
    padding: 115px 0;
    height: fit-content;
}
.guideBlock {
    margin-bottom: 110px;
}
.guideBlock::before {
    content: "";
    position: absolute;
    width: 405px;
    height: 315px;
    background: url(../../img/ilust_guide.png) no-repeat center / cover;
    top: -220px;
    right: -50px;
    z-index: -1;
}
.careBlock::before {
    content: "";
    position: absolute;
    width: 332px;
    height: 329px;
    background: url(../img/ilust_care.png) no-repeat center / cover;
    bottom: -160px;
    left: 20px;
}
.guideBlock figure,
.careBlock figure {
    overflow: hidden;
}
.guideBlock figure {
    border-radius: 0 40px 40px 0;
}
.careBlock figure {
    border-radius: 40px 0 0 40px;
}
.guideBlock .inBox,
.careBlock .inBox {
    position: relative;
    width: 450px;
}
@media print, screen and (min-width: 768px) {
    .guideBlock,
    .careBlock {
        height: 560px;
    }
    .guideBlock figure,
    .careBlock figure {
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .guideBlock figure {
        right: calc(50% - 60px);
    }
    .careBlock figure {
        left: calc(50% - 60px);
    }
    .guideBlock .inBlock,
    .careBlock .inBlock {
        display: flex;
        align-items: center;
        height: 100%;
    }
    .guideBlock .inBlock {
        justify-content: flex-end;
    }
    .guideBlock .inBox::before {
        left: -180px;
    }
    .careBlock .inBlock {
        justify-content: flex-start;
    }
    .careBlock .inBox::before {
        right: -180px;
    }
}
@media print, screen and (min-width: 768px) and (max-width: 1750px) {
    .bgContainer {
        margin-bottom: 80px;
    }
    .careBlock::before {
        bottom: -300px;
    }
}
@media print, screen and (min-width: 1921px) {
    .guideBlock::before {
        right: calc(50% - 1140px / 2 - 435px);
    }
    .careBlock::before {
        left: calc(50% - 1140px / 2 - 365px);
    }
    .guideBlock figure,
    .careBlock figure {
        border-radius: 40px;
    }
}
/* ------------------------------
 入院について／緩和ケアの基準（SP）
------------------------------ */
@media screen and (max-width: 767px) {
    .bgContainer {
        padding: 60px 0 75px;
    }
    .guideBlock {
        margin-bottom: 70px;
    }
    .guideBlock::before {
        width: 165px;
        height: 128px;
        top: -125px;
        right: -30px;
    }
    .careBlock::before {
        width: 142px;
        height: 140px;
        bottom: -150px;
        left: 5px;
    }
    .guideBlock .inBlock,
    .careBlock .inBlock {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .guideBlock figure,
    .careBlock figure {
        width: 95%;
        margin-bottom: 40px;
    }
    .guideBlock figure {
        border-radius: 0 20px 20px 0;
        padding-right: 5%;
        margin-right: 5%;
    }
    .guideBlock figure img {
        border-radius: 0 20px 20px 0;
    }
    .careBlock figure {
        border-radius: 20px 0 0 20px;
        padding-left: 5%;
        margin-left: 5%;
    }
    .careBlock figure img {
        border-radius: 20px 0 0 20px;
    }
    .guideBlock .inBox,
    .careBlock .inBox {
        width: 100%;
        padding: 0 10%;
    }
    .guideBlock .inBox::before,
    .careBlock .inBox::before {
        width: 85.334%;
        height: 434px;
        bottom: 35px;
        top: auto;
    }
    .guideBlock .inBox::before {
        background-image: url(../../img/content_bg01_sp.png);
        right: 0;
    }
    .careBlock .inBox::before {
        background-image: url(../../img/content_bg02_sp.png);
        left: 0;
    }
}

/* ------------------------------
 リンク（PC）
------------------------------ */
.linkBlock {
    padding: 120px 0 105px;
}
.linkBlock ul {
    display: flex;
    gap: 0 4.21%;
}
.linkBlock ul li {
    border-radius: 40px;
    overflow: hidden;
}
.linkBlock ul li a {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-grow: 1;
    width: 100%;
    height: 100%;
    background: url(../../img/link_bg.png) no-repeat center / cover;
    padding: 60px;
}
.linkBlock ul li a figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 30px;
}
.linkBlock ul li a figure img {
    width: auto;
    height: 320px;
}
.linkBlock ul li a figcaption {
    font-size: 3.0rem;
    color: #fff;
    line-height: 1.3;
    text-align: center;
}
@media print, screen and (min-width: 768px) {
    .linkBlock ul {
        justify-content: space-between;
        flex-flow: row wrap;
        align-items: stretch;
    }
    .linkBlock ul li {
        display: flex;
        align-items: stretch;
        flex-grow: 1;
        width: 47.895%;
        aspect-ratio: 1 / 1;
    }
    .linkBlock ul li a figcaption {
        display: flex;
        align-items: center;
        flex-grow: 1;
    }
}
/* ------------------------------
 その他リンク（SP）
------------------------------ */
@media screen and (max-width: 767px) {
    .linkBlock {
        padding: 90px 0 70px;
    }
    .linkBlock ul {
        flex-direction: column;
        gap: 20px 0;
    }
    .linkBlock ul li {
        border-radius: 20px;
    }
    .linkBlock ul li a {
        padding: 20px;
    }
    .linkBlock ul li a figure {
        gap: 20px;
    }
    .linkBlock ul li a figure img {
        height: 224px;
    }
    .linkBlock ul li a figcaption {
        font-size: 2.0rem;
    }
}

/* ------------------------------
 お問合せ（PC）
------------------------------ */
.contactBlock {
    position: relative;
    z-index: 2;
    padding: 155px 0 110px;
    margin-bottom: 50px;
}
.bgContainer::before,
.contactBlock::before {
    content: "";
    position: absolute;
    width: 94%;
    height: 100%;
    background-color: #ecf3f6;
    border-radius: 40px;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: -2;
}
.contactBlock::after {
    content: "";
    position: absolute;
    width: 382px;
    height: 254px;
    background: url(../../img/ilust_contact.png) no-repeat center / cover;
    right: -25px;
    bottom: -100px;
    z-index: -1;
}
.contactBlock .inBlock {
    position: relative;
}
.contactBlock .inBlock::before {
    content: "";
    position: absolute;
    width: 78px;
    height: 7px;
    background: url(../img/h_bg.png) no-repeat center / cover;
    border-radius: 3px;
    top: -35px;
}
.contactBlock .inBox p.f24 {
    line-height: 1.5;
    margin-bottom: 5px;
}
.contactBlock .inBox p.f24 span {
    font-size: 1.9rem;
}
.contactBlock .tel .speech {
    position: relative;
    font-size: 2.0rem;
    color: #fff;
    text-align: center;
    background-color: #007a46;
    border-radius: 20px;
    padding: 4px;
    margin-bottom: 10px;
}
.contactBlock .tel .speech::after {
    content: "";
    position: absolute;
    width: 23px;
    height: 15px;
    background-color: #007a46;
    clip-path: polygon(0 0, 100% 100%, 100% 0);
    left: 25px;
    bottom: -8px;
}
.contactBlock .tel a {
    font-size: 5.3rem;
    color: #007a46;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.contactBlock .tel a span.ls {
    letter-spacing: -0.25em;
}
@media print, screen and (min-width: 768px) {
    .contactBlock .inBlock {
        display: flex;
        justify-content: space-between;
        width: 860px;
    }
    .contactBlock .inBox {
        width: 410px;
    }
    .contactBlock .tel {
        position: absolute;
        text-align: center;
        top: 0;
        right: 0;
    }
    .contactBlock .inBox .tel + p {
        font-size: 1.6rem;
    }
}
@media print, screen and (min-width: 768px) and (max-width: 1420px) {
    .contactBlock {
        margin-bottom: 60px;
    }
    .contactBlock::after {
        bottom: -140px;
    }
}
@media print, screen and (min-width: 1921px) {
    .bgContainer::before,
    .contactBlock::before {
        width: 1800px;
    }
    .contactBlock::after {
        right: calc(50% - 1140px / 2 - 410px);
    }
}
/* ------------------------------
 お問合せ（SP）
------------------------------ */
@media screen and (max-width: 767px) {
    .bgContainer::before,
    .contactBlock::before {
        width: 90%;
        border-radius: 20px;
    }
    .contactBlock {
        padding: 85px 0 60px;
        margin-bottom: 40px;
    }
    .contactBlock::after {
        width: 196px;
        height: 131px;
        right: -18px;
        bottom: -70px;
    }
    .contactBlock .inBlock::before {
        width: 55px;
        height: 6px;
        top: -25px;
        left: 5%;
    }
    .contactBlock .inBox {
        font-size: 1.5rem;
        padding: 0 5%;
    }
    .contactBlock .inBox p.f24 {
        margin-bottom: 25px;
    }
    .contactBlock .inBox p.f24 span {
        display: block;
        font-size: 1.6rem;
    }
    .contactBlock .tel {
        margin-bottom: 25px;
    }
    .contactBlock .tel .speech {
        font-size: 1.6rem;
        padding: 5px;
    }
    .contactBlock .tel a {
        font-size: 3.8rem;
    }
}
@media screen and (max-width: 374px) {
    .contactBlock .tel a {
        font-size: 3.7rem;
    }
}