@charset "utf-8";

/* ------------------------------
 メインビジュアル（PC）
------------------------------ */
.mainBlock {
    position: relative;
    z-index: 1;
}
.mainBlock::before {
    content: "";
    position: absolute;
    width: 1500px;
    height: 900px;
    background: url(../../img/main_bg.png) no-repeat center / cover;
    z-index: -1;
}
.mainBlock h1 {
    font-family: "Hina Mincho", serif;
    font-size: 6.0rem;
    letter-spacing: 0.130em;
    line-height: 1.3;
}
.mainBlock .mainImg {
    position: relative;
    z-index: 1;
}
.mainBlock .mainImg img,
.hospitalBlock figure img,
.careBlock figure img,
.otherBlock > figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media print, screen and (min-width: 768px) {
    .mainBlock {
        display: flex;
        justify-content: flex-end;
        flex-direction: row-reverse;
        max-width: 1920px;
        height: 900px;
        margin: 0 auto 140px;
    }
    .mainBlock::before {    
        right: calc(50% - 1140px / 2 + 30px);
        bottom: -408px;
    }
    .mainBlock h1 {
        writing-mode: vertical-rl;
        margin: 115px 5% 0;
    }
    .mainBlock h1 span {
        display: block;
        margin-top: 23px;
    }
}
@media print, screen and (min-width: 1880px) {
    .mainBlock h1 {
        margin: 115px 105px 0 auto;
    }
}
/* ------------------------------
 メインビジュアル（SP）
------------------------------ */
@media screen and (max-width: 767px) {
    .mainBlock::before {
        width: 85.507%;
        height: 490px;
        background-image: url(../../img/main_bg_sp.png);
        left: -7.5%;
        top: 32%;
    }
    .mainBlock .mainImg {
        width: 92%;
        margin-left: 8%;
    }
    .mainBlock h1 {
        font-size: 3.0rem;
        letter-spacing: 0.130em;
        padding: 0;
        margin: 45px 5%;
    }
    .mainBlock h1 span {
        display: block;
    }
}

/* ------------------------------
 見出し・テキスト（PC）
------------------------------ */
/* -- h2 -- */
.contentsHome h2 {
    font-size: 4.6rem;
    letter-spacing: 0.020em;
    margin-bottom: 60px;
}
.contentsHome h2::after {
    content: "";
    display: block;
    width: 74px;
    height: 6px;
    background: #57E31B;
    background: linear-gradient(90deg, rgba(87, 227, 27, 1) 0%, rgba(0, 176, 138, 1) 100%);
    margin-top: 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;
}
.contentsHome .text-lead {
    line-height: 2.5;
}
/* ------------------------------
 見出し・テキスト（SP）
------------------------------ */
@media screen and (max-width: 767px) {
    /* -- h2 -- */
    .contentsHome h2 {
        font-size: 2.8rem;
        margin-bottom: 30px;
    }
    .contentsHome h2::after {
        width: 55px;
        height: 4px;
        margin-top: 20px;
    }
	/* -- h3 -- */
	.contentsHome h3 {
		font-size: 2.1rem;
		margin-bottom: 15px;
	}
    .contentsHome .text-lead {
        line-height: 2;
    }
}

/* ------------------------------
 聖隷ホスピスについて（PC）
------------------------------ */
section {
    position: relative;
    z-index: 1;
}
section .btn {
    margin-top: 60px;
}
.aboutBlock {
    margin-bottom: 110px;
}
.aboutBlock .inBlock {
    position: relative;
}
.contentsHome .aboutBlock h2 {
    text-align: center;
}
.contentsHome .aboutBlock h2::after {
    margin-left: auto;
    margin-right: auto;
}
.aboutBlock .btn {
    text-align: center;
}
/* ホスピスについて　画像 */
.aboutImgBox .aboutImg01,
.aboutImgBox .aboutImg02,
.aboutImgBox .aboutImg03 {
    position: absolute;
}
.aboutBlock .aboutImg01 {
    width: 200px;
    height: 139px;
    top: 30px;
    right: -45px;
}
.aboutBlock .aboutImg02 {
    width: 210px;
    height: 146px;
    bottom: 90px;
    left: -40px;
}
.aboutBlock .aboutImg03 {
    width: 340px;
    height: 237px;
    bottom: 0;
    right: -145px;
}
@media print, screen and (min-width: 768px) {
    .aboutBlock .inBlock {
        padding-bottom: 90px;
    }
    .aboutBlock p {
        text-align: center;
    }
    .contentsHome .aboutBlock .text-lead {
        line-height: 3;
    }
    /* ホスピスについて　画像 */
    .aboutImgBox {
        position: absolute;
        width: 100%;
        height: 100%;
    }
}
/* ------------------------------
 聖隷ホスピスについて（SP）
------------------------------ */
@media screen and (max-width: 767px) {
    section .btn {
        margin-top: 30px;
    }
    .aboutBlock {
        margin-bottom: 85px;
    }
    /* ホスピスについて　画像 */
    .aboutImgBox {
        position: relative;
        width: 100%;
        height: 286px;
        margin-bottom: 70px;
    }
    .aboutBlock .aboutImg01 {
        width: 140px;
        height: 97px;
        top: 0;
        right: 2%;
    }
    .aboutBlock .aboutImg02 {
        width: 120px;
        height: 83px;
        bottom: 90px;
        left: -5.5%;
    }
    .aboutBlock .aboutImg03 {
        width: 210px;
        height: 146px;
        bottom: 0;
        right: -5.5%;
    }
}

/* ------------------------------
 入院について／緩和ケアの基準（PC）
------------------------------ */
.hospitalBlock {
    margin-bottom: 220px;
}
.careBlock {
    margin-bottom: 500px;
}
.hospitalBlock .inBox,
.careBlock .inBox {
    position: relative;
    width: 400px;
}
.hospitalBlock .inBox::before,
.careBlock .inBox::before {
    content: "";
    position: absolute;
    width: 680px;
    height: 560px;
    background: url(../../img/content_bg.png) no-repeat center / cover;
    top: 40px;
    z-index: -1;
}
@media print, screen and (min-width: 768px) {
    .hospitalBlock,
    .careBlock {
        height: 560px;
    }
    .hospitalBlock figure,
    .careBlock figure {
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .hospitalBlock figure {
        right: calc(50% - 90px);
    }
    .careBlock figure {
        left: calc(50% - 90px);
    }
    .hospitalBlock .inBlock,
    .careBlock .inBlock {
        display: flex;
        align-items: center;
        height: 100%;
    }
    .hospitalBlock .inBlock {
        justify-content: flex-end;
    }
    .hospitalBlock .inBox::before {
        left: -180px;
    }
    .careBlock .inBlock {
        justify-content: flex-start;
    }
    .careBlock .inBox::before {
        right: -180px;
    }
}
/* ------------------------------
 入院について／緩和ケアの基準（SP）
------------------------------ */
@media screen and (max-width: 767px) {
    .hospitalBlock,
    .careBlock {
        margin-bottom: 80px;
    }
    .hospitalBlock .inBlock,
    .careBlock .inBlock {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .hospitalBlock figure,
    .careBlock figure,
    .otherBlock > figure {
        width: 95%;
        margin-bottom: 40px;
    }
    .hospitalBlock figure,
    .otherBlock > figure {
        margin-right: 5%;
    }
    .careBlock figure {
        margin-left: 5%;
    }
    .hospitalBlock .inBox,
    .careBlock .inBox {
        width: 100%;
        padding: 0 5%;
    }
    .hospitalBlock .inBox::before,
    .careBlock .inBox::before {
        width: 85.334%;
        height: 434px;
        bottom: 35px;
        top: auto;
    }
    .hospitalBlock .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）
------------------------------ */
.otherBlock {
    position: relative;
    z-index: 1;
}
.otherBlock::before {
    content: "";
    position: absolute;
    width: 1800px;
    height: 824px;
    background: url(../../img/contact_bg.png) no-repeat center / cover;
    bottom: 0;
    left: calc(50% - 1140px / 2 - 270px);
    z-index: -1;
}
.otherBlock .otherLink li a {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #fff;
}
.otherBlock .otherLink li a figure img {
    width: 112px;
    height: 112px;
}
.otherBlock .otherLink li a figcaption {
    font-family: "Hina Mincho", serif;
    font-size: 2.2rem;
    letter-spacing: 0.020em;
    line-height: 1.5;
    text-align: center;
}
.otherBlock .otherLink li.icon_blank a figcaption span::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(../img/icon_blank.svg) no-repeat center / cover;
    vertical-align: middle;
    margin: 0 0 5px 5px;
}
/* -- お問合せ -- */
.otherBlock .contactBox ul li {
    position: relative;
    font-family: "Hina Mincho", serif;
    font-size: 2.5rem;
    letter-spacing: 0.030em;
    padding-left: 25px;
}
.otherBlock .contactBox ul li::before {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    background: rgb(87,227,27);
    background: linear-gradient(90deg, rgba(87,227,27,1) 0%, rgba(0,176,138,1) 100%);
    border-radius: 50%;
    top: 0.65em;
    left: 0;
}
.otherBlock .contactBox .tel a {
    font-family: "Hina Mincho", serif;
    font-size: 4.0rem;
}
.otherBlock .contactBox .tel a span:not(.ls) {
    font-size: 2.2rem;
    letter-spacing: -0.05em;
}
@media print, screen and (min-width: 768px) {
    .otherBlock {
        height: 824px;
        padding-top: 230px;
    }
    .otherBlock > figure {
        position: absolute;
        height: 587px;
        right: calc(50% - 1140px / 2 + 80px);
        top: -228px;
        z-index: -1;
    }
    .otherBlock .otherLink {
        display: flex;
        align-items: stretch;
        flex-flow: row wrap;
        gap: 10px 3.158%;
    }
    .otherBlock .otherLink li {
        flex-grow: 1;
        width: 22.632%;
        aspect-ratio: 1 / 1;
    }
    .otherBlock .otherLink li a {
        flex-grow: 1;
    }
    .otherBlock .otherLink li a figure {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
        width: 100%;
        height: 100%;
        padding: 30px 0;
    }
    .otherBlock .otherLink li a figcaption {
        flex-grow: 1;
        margin-top: 10px;
    }
    .otherBlock .otherLink li a figcaption span {
        display: block;
    }
    /* -- お問合せ -- */
    .otherBlock .contactBox {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0 40px;
        padding: 110px 0 100px;
    }
}
/* ------------------------------
 その他リンク（SP）
------------------------------ */
@media screen and (max-width: 767px) {
    .otherBlock {
        padding-bottom: 70px;
    }
    .otherBlock::before {
        width: 100%;
        height: 148px;
        background-image: url(../../img/contact_bg_sp.png);
        left: 0;
        right: 0;
        margin: auto;
    }
    .otherBlock .inBlock {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .otherBlock .otherLink {
        position: relative;
        padding: 0 5% 40px 10%;
        margin-bottom: 60px;
    }
    .otherBlock .otherLink::before {
        content: "";
        position: absolute;
        width: 95%;
        height: 705px;
        background: url(../../img/other_bg_sp.png) no-repeat center / cover;
        right: 0;
        bottom: 0;
        z-index: -1;
    }
    .otherBlock .otherLink li {
        width: 95%;
    }
    .otherBlock .otherLink li:not(:last-child) {
        margin-bottom: 10px;
    }
    .otherBlock .otherLink li a {
        display: flex;
        align-items: center;
        height: 120px;
        padding: 20px 40px 20px 20px;
    }
    .otherBlock .otherLink li a figure {
        display: flex;
        align-items: center;
        gap: 0 15px;
    }
    .otherBlock .otherLink li a figure img {
        width: 60px;
        height: 60px;
    }
    .otherBlock .otherLink li a figcaption {
        font-size: 1.8rem;
        text-align: left;
    }
    .otherBlock .otherLink li a figcaption span {
        display: inline-block;
    }
    /* -- お問合せ -- */
    .otherBlock .contactBox {
        position: relative;
        padding: 0 5%;
    }
    .otherBlock .contactBox ul li {
        font-size: 1.6rem;
        padding-left: 15px;
    }
    .otherBlock .contactBox ul li::before {
        width: 8px;
        height: 8px;
    }
    .otherBlock .contactBox .tel a {
        font-size: 3.3rem;
        letter-spacing: -0.01em;
    }
    .otherBlock .contactBox .tel a span.ls {
        letter-spacing: -0.2em;
    }
    .otherBlock .contactBox .tel a span:not(.ls) {
        font-size: 1.8rem;
    }
}