@charset "utf-8";

/* CSS Document */
:root {
	--primary: #FF7D7D;
	--light: #F4CFCF;
	--light-gray: #F3F4F5;
	--dark: #333333;
}
.dialysis {
	font-family: "Nunito Sans", "Zen Kaku Gothic New", sans-serif;
	box-sizing: border-box;
}
.dialysis *,
.dialysis *::before,
.dialysis *::after {
		box-sizing: border-box;
}

body:has(.dialysis) {
	min-width: 320px;
	letter-spacing: 0.025em;
	line-height: 1.75;
	font-size: 16px;
	font-feature-settings: "palt";
	font-weight: 500;
	color: var(--dark);
}

.container,
.container-fluid {
	--gutter-x: 3rem;
	width: 100%;
	padding-right: calc(var(--gutter-x) * 0.5);
	padding-left: calc(var(--gutter-x) * 0.5);
	margin-right: auto;
	margin-left: auto;
}

.container {
	max-width: 1000px;
}

/*外接リサイズ*/
.of>img,
.of picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.of-t>img{
		object-position: 50% 30%;
}


/*全面背景用*/
.img-fit {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.img-fit+div {
	position: relative;
	z-index: 2;
}


/*画像固定比率*/
[class*=pict] {
	position: relative;
	width: 100%;
	overflow: hidden;
}

[class*=pict] img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.pict-1-1 {
	padding-bottom: 100%;
}

.pict-3-2 {
	padding-bottom: 66.6666666667%;
}

.pict-16-9 {
	padding-bottom: 56.25%;
}

@media print,
screen and (min-width: 768px) {
	.pict-md-1-1 {
		padding-bottom: 100%;
	}

}


/*Position(ポジション)*/

.position-relative {
	position: relative !important;
}

@media print,
screen and (min-width: 768px) {
	.d-md-none {
		display: none !important;
	}

	.d-md-inline {
		display: inline !important;
	}

	.d-md-inline-block {
		display: inline-block !important;
	}

	.d-md-block {
		display: block !important;
	}

	.d-md-flex {
		display: -webkit-flex !important;
		display: flex !important;
	}

	.d-md-inline-flex {
		display: -webkit-inline-flex !important;
		display: inline-flex !important;
	}
}

/*Spacing(スペーシング)*/
.my-2 {
	margin-top: 0.5rem !important;
	margin-bottom: 0.5rem !important;
}

.p-3 {
	padding: 1rem;
}

.p-4 {
	padding: 1.5rem;
}

.py-2 {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}

.py-6 {
	padding-top: 3rem !important;
	padding-bottom: 3rem !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}
.mx-auto {
	margin-left: auto !important;
	margin-right: auto !important;
}

.ms-auto {
	margin-left: auto !important;
}

.me-auto {
	margin-right: auto !important;
}

.w-100 {
	width: 100% !important;
}


/*背景色・カラー設定*/
.bg-primary {
	background-color: var(--primary);
}

.text-primary {
	color: var(--primary);
}

.bg-light {
	background-color: var(--light);
}

.bg-dark {
	background-color: var(--dark);
}

.text-dark {
	color: var(--dark);
}

.bg-white {
	background-color: #ffffff !important;
}

.text-white {
	color: #ffffff !important;
}

.bg-lgray {
	background-color: var(--light-gray);
}

.bg-gray {
	background-color: #DCDCDC !important;
}

.text-gray {
	color: #DCDCDC !important;
}

.text-left {
	text-align: left;
}

.dialysis .h5,
.dialysis h4,
.dialysis .h4,
.dialysis h3,
.dialysis .h3,
.dialysis h2,
.dialysis .h2,
.dialysis h1,
.dialysis .h1,
.dialysis .display-1 {
	margin-top: 0;
	line-height: 1.5;
	margin-bottom: 1rem;
}

.dialysis h1,
.dialysis .h1 {
	font-size: clamp(25 / 16 * 1rem, calc(calc((32 - 25) / (1200 - 375)) * 100vw + calc(25 - calc((32 - 25) / (1200 - 375)) * 375) / 16 * 1rem), 32 / 16 * 1rem);
}

.dialysis h2,
.dialysis .h2 {
	font-size: clamp(23 / 16 * 1rem, calc(calc((28 - 23) / (1200 - 375)) * 100vw + calc(23 - calc((28 - 23) / (1200 - 375)) * 375) / 16 * 1rem), 28 / 16 * 1rem);
}

.dialysis h3,
.dialysis .h3 {
	font-size: clamp(20 / 16 * 1rem, calc(calc((24 - 20) / (1200 - 375)) * 100vw + calc(20 - calc((24 - 20) / (1200 - 375)) * 375) / 16 * 1rem), 24 / 16 * 1rem);
}

.dialysis h4,
.dialysis .h4 {
	font-size: clamp(19 / 16 * 1rem, calc(calc((22 - 19) / (1200 - 375)) * 100vw + calc(19 - calc((22 - 19) / (1200 - 375)) * 375) / 16 * 1rem), 22 / 16 * 1rem);
}

.dialysis h5,
.dialysis .h5 {
	font-size: clamp(18 / 16 * 1rem, calc(calc((20 - 18) / (1200 - 375)) * 100vw + calc(18 - calc((20 - 18) / (1200 - 375)) * 375) / 16 * 1rem), 20 / 16 * 1rem);
}



.row {
	--bs-gutter-x: 1rem;
	--bs-gutter-y: 0;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-top: calc(-1 * var(--bs-gutter-y));
	margin-right: calc(-0.5 * var(--bs-gutter-x));
	margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row>* {
	width: 100%;
	max-width: 100%;
	padding-right: calc(var(--bs-gutter-x) * 0.5);
	padding-left: calc(var(--bs-gutter-x) * 0.5);
	margin-top: var(--bs-gutter-y);
}

.row-cols-1>.col {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	width: calc(100% / 1);
}

.col-2 {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	width: calc(8.3333333333% * 2);
}

.col-3 {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	width: calc(8.3333333333% * 3);
}

.col-4 {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	width: calc(8.3333333333% * 4);
}

.col-5 {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	width: calc(8.3333333333% * 5);
}

.col-6 {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	width: calc(8.3333333333% * 6);
}

.col-7 {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	width: calc(8.3333333333% * 7);
}

.col-8 {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	width: calc(8.3333333333% * 8);
}

.col-9 {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	width: calc(8.3333333333% * 9);
}

.col-10 {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	width: calc(8.3333333333% * 10);
}

.col-11 {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	width: calc(8.3333333333% * 11);
}

.col-12 {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	width: calc(8.3333333333% * 12);
}

.g-0,
.gx-0 {
	--bs-gutter-x: 0;
}

.g-0,
.gy-0 {
	--bs-gutter-y: 0;
}

.g-3,
.gx-3 {
	--bs-gutter-x: 1rem;
}

.g-3,
.gy-3 {
	--bs-gutter-y: 1rem;
}

.g-4,
.gx-4 {
	--bs-gutter-x: 1.5rem;
}

.g-4,
.gy-4 {
	--bs-gutter-y: 1.5rem;
}

.g-5,
.gx-5 {
	--bs-gutter-x: 2rem;
}

.g-5,
.gy-5 {
	--bs-gutter-y: 2rem;
}

.g-6,
.gx-6 {
	--bs-gutter-x: 3rem;
}

.g-6,
.gy-6 {
	--bs-gutter-y: 3rem;
}

.g-auto,
.gx-auto {
	--bs-gutter-x: auto;
}

.g-auto,
.gy-auto {
	--bs-gutter-y: auto;
}

.col {
	-webkit-flex: 1 0 0%;
	flex: 1 0 0%;
}

.col-auto {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	width: auto;
}

@media print,
screen and (min-width: 768px) {
	.row-cols-md-1>.col {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(100% / 1);
	}

	.row-cols-md-2>.col {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(100% / 2);
	}

	.row-cols-md-3>.col {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(100% / 3);
	}

	.row-cols-md-4>.col {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(100% / 4);
	}

	.row-cols-md-5>.col {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(100% / 5);
	}

	.row-cols-md-6>.col {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(100% / 6);
	}

	.row-cols-md-7>.col {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(100% / 7);
	}

	.row-cols-md-8>.col {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(100% / 8);
	}

	.row-cols-md-9>.col {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(100% / 9);
	}

	.row-cols-md-10>.col {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(100% / 10);
	}

	.row-cols-md-11>.col {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(100% / 11);
	}

	.row-cols-md-12>.col {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(100% / 12);
	}

	.col-md {
		-webkit-flex: 1 0 0%;
		flex: 1 0 0%;
	}

	.col-md-auto {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: auto;
	}

	.col-md-1 {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(8.3333333333% * 1);
	}

	.col-md-2 {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(8.3333333333% * 2);
	}

	.col-md-3 {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(8.3333333333% * 3);
	}

	.col-md-4 {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(8.3333333333% * 4);
	}

	.col-md-5 {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(8.3333333333% * 5);
	}

	.col-md-6 {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(8.3333333333% * 6);
	}

	.col-md-7 {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(8.3333333333% * 7);
	}

	.col-md-8 {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(8.3333333333% * 8);
	}

	.col-md-9 {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(8.3333333333% * 9);
	}

	.col-md-10 {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(8.3333333333% * 10);
	}

	.col-md-11 {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(8.3333333333% * 11);
	}

	.col-md-12 {
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		width: calc(8.3333333333% * 12);
	}

	.g-md-0,
	.gx-md-0 {
		--bs-gutter-x: 0;
	}

	.g-md-0,
	.gy-md-0 {
		--bs-gutter-y: 0;
	}

	.g-md-1,
	.gx-md-1 {
		--bs-gutter-x: 0.25rem;
	}

	.g-md-1,
	.gy-md-1 {
		--bs-gutter-y: 0.25rem;
	}

	.g-md-2,
	.gx-md-2 {
		--bs-gutter-x: 0.5rem;
	}

	.g-md-2,
	.gy-md-2 {
		--bs-gutter-y: 0.5rem;
	}

	.g-md-3,
	.gx-md-3 {
		--bs-gutter-x: 1rem;
	}

	.g-md-3,
	.gy-md-3 {
		--bs-gutter-y: 1rem;
	}

	.g-md-4,
	.gx-md-4 {
		--bs-gutter-x: 1.5rem;
	}

	.g-md-4,
	.gy-md-4 {
		--bs-gutter-y: 1.5rem;
	}

	.g-md-5,
	.gx-md-5 {
		--bs-gutter-x: 2rem;
	}

	.g-md-5,
	.gy-md-5 {
		--bs-gutter-y: 2rem;
	}

	.g-md-6,
	.gx-md-6 {
		--bs-gutter-x: 3rem;
	}

	.g-md-6,
	.gy-md-6 {
		--bs-gutter-y: 3rem;
	}

	.g-md-auto,
	.gx-md-auto {
		--bs-gutter-x: auto;
	}

	.g-md-auto,
	.gy-md-auto {
		--bs-gutter-y: auto;
	}

	.row-cols-md-1>* {
		width: calc(100% - 1);
	}

	.row-cols-md-2>* {
		width: calc(100% - 2);
	}

	.row-cols-md-3>* {
		width: calc(100% - 3);
	}

	.row-cols-md-4>* {
		width: calc(100% - 4);
	}

	.row-cols-md-5>* {
		width: calc(100% - 5);
	}

}

@media print,
screen and (min-width: 768px) {
	.order-md-first {
		-webkit-order: -1 !important;
		order: -1 !important;
	}

	.order-md-last {
		-webkit-order: 6 !important;
		order: 6 !important;
	}
}

h2 {
	color: var(--dark);
	padding: 0 0 0 0;
	line-height: 1.5;
	margin-bottom: 1rem;
	font-family: "Nunito Sans", "Zen Kaku Gothic New", sans-serif;
	background-image: none;
}

h3 {
	color: var(--dark);
	border-bottom: 0;
	padding: 0 0 0 0;
	margin-bottom: 1rem;
	font-family: "Nunito Sans", "Zen Kaku Gothic New", sans-serif;
	background-image: none;
}

h4 {
	color: var(--dark);
	border-bottom: 0;
	padding: 0 0 0 0;
	margin-bottom: 1rem;
	font-family: "Nunito Sans", "Zen Kaku Gothic New", sans-serif;
}

.point {
	position: relative;

	span::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 65px;
		height: 65px;
		background-color: #F7D1D2;
		z-index: -1;
		border-radius: 50%;
		transform: translate(-35%, -50%);
	}
}

.midashi-balloon {
	border-bottom: var(--primary) solid 3px;
	position: relative;
}

.midashi-balloon.navy {
	border-bottom: #293358 solid 3px;
}

.midashi-balloon::before {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	left: 50%;
	bottom: -3px;
	background-color: var(--light-gray);
}

.midashi-balloon::after {
	content: "";
	position: absolute;
	left: calc(50% - 5px);
	bottom: -3px;
	width: 15px;
	border-bottom: var(--primary) solid 3px;
	transform-origin: top right;
	transform: rotate(-45deg);
}

.midashi-balloon.navy::after {
	border-bottom: #293358 solid 3px;
}

.marker {
	background: linear-gradient(180deg, transparent 70%, #F5BCBB 70%);
}

.max250 {
	max-width: 250px;
}

.max450 {
	max-width: 450px;
}

.max500 {
	max-width: 500px;
}

@media print,
screen and (min-width: 768px) {
	.max-md-none {
		max-width: none;
	}
}

.text-shadow {
	text-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}


@media print,
screen and (min-width: 576px) {
	.d-sm-none {
		display: none !important;
	}
}


.flex-column {
	-webkit-flex-flow: column !important;
	flex-flow: column !important;
}

.align-items-center {
	-webkit-align-items: center !important;
	align-items: center !important;
}

.justify-content-center {
	-webkit-justify-content: center !important;
	justify-content: center !important;
}

.justify-content-start {
	-webkit-justify-content: flex-start !important;
	justify-content: flex-start !important;
}

@media print,
screen and (min-width: 768px) {
	.justify-content-md-center {
		-webkit-justify-content: center !important;
		justify-content: center !important;
	}
}

.midashi-border {
	border-left: solid 5px var(--primary);
	padding-left: 1rem;
	line-height: 1.25;
}

.basic-table {
	width: 100%;

	th {
		display: block;
		background-color: var(--light);
		padding: 0.5rem 1rem;
		text-align: left;
	}

	td {
				display: block;
		background-color: var(--light-gray);
		padding: 0.5rem 1rem;
	}
}

@media print,
screen and (min-width: 768px) {
	.basic-table {
		width: 100%;
	}

	.basic-table th,
	.basic-table td {
		display: table-cell;
		padding: 0.5rem 1rem;
	}
}

.outline-pict {
	max-width: 250px;
	margin-left: auto;
	margin-right: auto;
}

.rounded-circle {
	border-radius: 50%;
}

.dayflow-text {
	font-size: 18px;
}

.dayflow {
	counter-reset: counter;
}

.dayflow .col {
	max-width: 450px;
}

.dayflow .col .row {
	position: relative;
}

.dayflow .col .row::before {
	counter-increment: counter;
	content: "0" counter(counter);
	position: absolute;
	font-size: 35px;
	font-weight: bold;
	color: var(--primary);
	top: -10px;
	left: 0;
	line-height: 1;
	z-index: 2;
}

.dayflow .col:not(:first-child) .row::after {
	content: "";
	position: absolute;
	width: 25px;
	height: 20px;
	background-color: #dadcdd;
	clip-path: polygon(50% 20px, 0% 0%, 25px 0%);
	top: -30px;
	left: 50%;
	z-index: 1;
}

@media print,
screen and (min-width: 768px) {
	.outline-pict {
		max-width: 100%;
	}

	.dayflow .rounded-circle {
		border-radius: 0;
	}

	.dayflow .col .row::before {
		top: -18px;
		left: -8px;
	}

	.dayflow .col:not(:first-child) .row::after {
		content: "";
		position: absolute;
		width: 20px;
		height: 25px;
		background-color: #dadcdd;
		clip-path: polygon(0 0, 0 100%, 100% 50%);
		top: 4.5rem;
		left: -22px;
		z-index: 1;
	}

	.dayflow-text {
		font-size: 15px;
	}
}

.btn {
	padding: .75rem .75rem;
	color: white;
	font-weight: bold;
	text-decoration: none;
	text-align: left;
	background-color:var(--primary);
	display: block;
	transition: opacity .4s;
	position: relative;
	border-radius: 2px;
}

.btn:hover{
	opacity: 0.8;
}

.btn::after{
	position: absolute;
	content: "";
	width:8px;
	height: 12px;
	background-color: white;
	clip-path: polygon(0 0, 0 100%, 100% 50%);
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}

.lh-sm{
	line-height: 1.25;
}

.clippath01 {
	clip-path : polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
}

.clippath02 {
	clip-path : polygon(32% 0, 72% 1%, 98% 24%, 100% 62%, 84% 91%, 50% 100%, 17% 91%, 0 60%, 4% 25%);
}