@charset "UTF-8";

:root {
--font-base-color:#002b6d;
--font-family-en:"Barlow",sans-serif;
--font-family-jp:"Zen Kaku Gothic New",sans-serif;
}

body {
	background-color: #e9f2f6;
	font-family:var(--font-family-jp) ;
	color: var(--font-base-color);
}

a { 
    color: var(--font-base-color);
	text-decoration: none;
	transition: 0.3s ease;
	&:hover {
		opacity: 0.8;
	}
}

.main {
	padding-top: 20px;
}
.main-inner {
	padding: 0 12px;
	max-width: 2000px;
    margin: 0 auto;
}



/* =========================
  masonry レイアウト調整
========================= */

.masonry .box-sizer,/* box-sizer → masonry.js 分割する幅幅を指定*/
.masonry .box {
	width:14.285714%; /* 7等分 */
	@media screen and (max-width:1600px) {width: 16.666667%;} /* 6等分 */
	@media screen and (max-width:1300px) {width: 20%;} /* 5等分 */
	@media screen and (max-width:1110px) {width: 25%;} /* 4等分 */
	@media screen and (max-width:860px) {width: 33.333334%;} /* 3等分 */
	@media screen and (max-width:680px) {width: 50%;} /* 2等分 */
	&[data-size="s"]  {
		aspect-ratio: 1/1;
		@media screen and (max-width:1600px) {width: 16.666667%;} 
		@media screen and (max-width:1300px) {width: 20%;} 
		@media screen and (max-width:1110px) {width: 25%;} 
		@media screen and (max-width:860px) {width: 33.333334%;} 
		@media screen and (max-width:680px) {width: 50%;} 
	}
	&[data-size="m-type01"]  {
		aspect-ratio: 1/2;
		width:14.285714%; 
		@media screen and (max-width:1600px) {width:16.666667% ;}
		@media screen and (max-width:1300px) {width:calc(20% * 2);}
		@media screen and (max-width:1110px) {width:calc(25%);}
		@media screen and (max-width:860px) {width: 33.333334%;} 
		@media screen and (max-width:680px) {width:calc(50% * 2);}
	}
	&[data-size="m-type02"]  {
		aspect-ratio: 2/1;
		width:calc(14.285714% * 2);
		.aspect2-1 {aspect-ratio: 2/1;}
		@media screen and (max-width:1600px) {width:calc(16.666667% * 2);}
		@media screen and (max-width:1300px) {width:calc(20% * 2);}
		@media screen and (max-width:1110px) {width:calc(25% * 2);}
		@media screen and (max-width:860px) {width:calc(33.3333334% * 2);}
		@media screen and (max-width:680px) {
			width: 100%;
			.con {
				aspect-ratio: 2/1;
			}
		} 
	}
	&[data-size="l"]  {
		aspect-ratio: 1/1;
		width:calc(14.285714% * 2);
		.aspect1-1 {aspect-ratio: 1/1;}
		@media screen and (max-width:1600px) {width:calc(16.666667% * 2);}
		@media screen and (max-width:1300px) {width:calc(20% * 2);}
		@media screen and (max-width:1110px) {width:calc(25% * 2);}
		@media screen and (max-width:860px) {width:calc(33.3333334% * 2);}
		@media screen and (max-width:680px) {width:calc(50% * 2);}
	}
	&[data-size="xl"]  {
		aspect-ratio: 4/2.66;
		width: calc(14.285714% * 3);
		@media screen and (max-width:1600px) {width: calc(16.666667% * 3);}
		@media screen and (max-width:1300px) {width:calc(20% * 3);}
		@media screen and (max-width:1110px) {width:calc(25% * 3);}
		@media screen and (max-width:860px) {width:calc(50% * 2);}
		@media screen and (max-width:680px) {
			/* aspect-ratio: 1.535/1; */
			aspect-ratio: 1/1;
			.con {
				/* aspect-ratio: 1.535/1; */
				aspect-ratio: 1/1;
			}
		}
	}
}


.masonry {
	.box {	
		.con {
			position: absolute;
			top: 8px;
			left: 8px;
			right: 8px;
			bottom: 8px;
			line-height: 1.5;
			overflow: hidden;
			border-radius: 18px;
			display: block;
			z-index: 1;
			background-color: #fff;
		}
	}
	.box.transparent {
		@media screen and (max-width:1600px) {
			display: none;
		}
		.con{
			background-color: transparent;
		}
	}
	.kv {
		&.box {
			.pos {
				position: relative;
				height: 100%;
			}
			.kv-swiper {
				width: 100%;
				height: 100%;
			}
			.swiper-slide {
				width: 100%;
				height: 100%;
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					aspect-ratio: 4/3;
					@media screen and (max-width:680px) {
						aspect-ratio: 1/1;
					}
				}
			}
			.txt_area {
				position: absolute;
				left: 6.5%;
				bottom: 8.5%;
				z-index: 10;
				@media screen and (max-width:680px) {
					bottom: 8%;	
				}
				.ttl {
					display: none;
					&:first-child {
						display: block;
					}
					span {
						position: relative;
						color: #fff;
						font-weight: 500;
					}
					.en {
						position: relative;
						padding-left: 1.8em;
						font-size: 20px;
						display: block;
						letter-spacing: 0.04em;
						font-family: var(--font-family-en);
						@media screen and (max-width:680px) {
							font-size: clamp(12px,3.2vw,20px);
							margin-bottom: 4px;
						}
						&::before {
							content: "";
							position: absolute;
							width: 1.6em;
							height: 1px;
							top: calc(50% - 0.5px);
							left: 0;
							background-color: #fff;
						}
					}
					.jp {
						font-size: 34px;
						display: block;
						@media screen and (max-width:680px) {
							font-size: clamp(20px,5.33vw,34px);
						}
					}
					.line {
						background-color: #0091db;
						padding: 0.08em 0.1em 0.16em 0.4em;
						&:last-child {
							top: -0.2em;
							@media screen and (max-width:680px) {
								top: -0.1em;
							}
						}
					}
				}
			}
		}
	}
}



.header_area {
	.logo_box {
		margin-top: -28px;
		padding-top: 33px;
		aspect-ratio: 1/1.11;
		position: relative;
		.con {
			border-radius: 0 0 24px 24px;
			background-color: #fff;
		}
	}
	.menu {
		margin-top: 12px;
		display: flex;
		flex-wrap: wrap;
		gap: 12px 12px;
		width: calc(100% - 12px);
        margin-left: 12px;
		@media screen and (max-width:1300px) {
			margin-top: 9px;
		}
		.item {
			width: calc(50% - 12px);
			background-color: #fff;
			aspect-ratio: 1/1;
			border-radius: 18px;
		}
	}
}


/* =========================
  masonry 各コンテンツ デザイン
========================= */


.masonry .box{
	&.ico_service_box {
		.img_area {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			img {
				margin-top: 1.5vw;
				width: 26%;
				@media screen and (max-width:860px) {
					width: 22%;
					margin-top: 4vw;
				}
			}
			.caption {
				font-family: var(--font-family-en);
				position: absolute;
				bottom: 40%;
				flex: 0 0 100%;
				text-align: center;
				color: #fff;
				font-size: 0.7vw;
				font-weight: 500;
				@media screen and (max-width:1600px) {font-size: 0.88vw;}
				@media screen and (max-width:1300px) {font-size: 13px;}
				@media screen and (max-width:1100px) {font-size: 1.18vw}
				@media screen and (max-width:860px) {
					bottom: 46%;
					font-size: 1.51vw
				}
				@media screen and (max-width:680px) {
					font-size: clamp(10px,2.67vw,18px);
				}
			}
		}
		.txt_area {
			position: absolute;
			bottom: 1.2vw;
			width: 100%;
			@media screen and (max-width:860px) {bottom: 4vw;}
			.big {font-size: 1.2em;position: relative;top: -0.05em;}
			.ttl {
				font-size: clamp(20px,1.25vw,24px);
				text-align: center;
				color: #fff;
				margin-bottom: 6px;
				line-height: 1.4;
				@media screen and (max-width:1600px) {font-size: 1.5vw;}
				@media screen and (max-width:1300px) {font-size: 1.85vw;}
				@media screen and (max-width:1100px) {font-size: 2.18vw;}
				@media screen and (max-width:860px) {font-size: 3.02vw;}
				@media screen and (max-width:680px) {font-size: clamp(18px,4.8vw,32px)}
			}
			.tel {
				font-family: var(--font-family-en);
				font-size: clamp(26px,1.63vw,31px);
				font-weight: 500;
				text-align: center;
				color: #fff;
				margin-bottom: 6px;
				display: block;
				line-height: 1;
				@media screen and (max-width:1600px) {font-size: 2vw;}
				@media screen and (max-width:1300px) {font-size: 2.46vw;}
				@media screen and (max-width:1100px) {font-size: 2.91vw;}
				@media screen and (max-width:860px) {font-size: 3.72vw;}
				@media screen and (max-width:680px) {font-size: clamp(21px,5.6vw,40px);}
			}
			.sub {
				text-align: center;
				color: #fff;
				margin-bottom: 8px;
				font-weight: 500;
				font-size: clamp(13px,0.81vw,15px);
				@media screen and (max-width:1600px) {font-size: 0.94vw;}
				@media screen and (max-width:1300px) {font-size: 1.15vw;}
				@media screen and (max-width:1100px) {font-size: 1.36vw;}
				@media screen and (max-width:860px) {font-size: 1.86vw;}
				@media screen and (max-width:680px) {font-size: clamp(10px,2.67vw,18px);}
			}
			.main {
				background-color: #fff;
				text-align: center;
				padding: 0 0.6em ;
				height: 34px;
				line-height: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 6px;
				width: 84%;
				box-sizing: border-box;
				margin: 0 auto;
				font-size: clamp(13px,0.81vw,15px);
				font-weight: 500;
				letter-spacing: 0.04em;
				@media screen and (max-width:1600px) {font-size: 0.94vw;}
				@media screen and (max-width:1300px) {font-size: 1.15vw;}
				@media screen and (max-width:1100px) {font-size: 1.36vw;}
				@media screen and (max-width:860px) {font-size: 1.86vw;}
				@media screen and (max-width:680px) {
					height: 26px;
					font-size: clamp(10px,2.67vw,18px)
					;}
			}
		}
		&.-access {
			.con{background-color: #00cfdc;}
			.txt_area .main {color: #00cfdc;}
		}
		&.-phone {
			.con{background-color: #06b4ea;}
			.img_area {
				img {
					margin-top: 1vw;
					width: 24%;
					@media screen and (max-width:860px) {
						width: 20%;
						margin-top: 3vw;
					}
				}
			}
			.txt_area .main {color: #06b4ea;}
		}
		&.-reservation {
			.con{background-color: #0091db;}
			.img_area {
				img {
					width: 35%;
					@media screen and (max-width:860px) {
						width: 30%;
					}
				}
			}
			.txt_area .main {color: #0091db;}
		}
	}

	&.news_box {
		.con {
			/* overflow: hidden; */
			display: flex;
			flex-direction: column;
			@media screen and (max-width:680px) {
				aspect-ratio: 2/1;
			}
		}
		.inner {
			padding: 18px 4.4% 14px;
			display: flex;
			flex-direction: column;
			flex: 1;
			min-height: 0;
			@media screen and (max-width:680px) {
				padding: 12px 4.4% 10px;
			}
		}
		.ttl {
			font-family: var(--font-family-en);
			position: relative;
			font-size: 20px;
			padding-left: 2em;
			margin-bottom: 6px;
			flex-shrink: 0;
			&::before {
				content: "";
				position: absolute;
				top: calc(50% - 0.5px);
				left: 0;
				height: 1px;
				width: 1.8em;
				background-color: var(--font-base-color);
			}
			@media screen and (max-width:680px) {font-size: clamp(18px,4.8vw,20px);margin-bottom: 4px;}
		}
		.smb-taxonomy-posts.wp-block-snow-monkey-blocks-taxonomy-posts {
			overflow-y: auto;
		}
		ul {
			overflow-y: auto;
			flex: 1;
			min-height: 0;
			.c-entries__item {
				border-top: dashed 1px var(--font-base-color);
				padding: 9px 0;
				@media screen and (max-width:680px) {
					padding: 10px 0;
				}
			}
			.c-entries__item>a {
				padding: 0;
			}
			.c-entry-summary__header {
				margin-bottom: 0;
			}
			.c-entry-summary__meta {
				margin-top: 0;
			}
			.c-entry-summary__body {
				display: flex;
				flex-direction: row-reverse;
				flex-wrap: wrap;
				align-items: center;
				gap: 0 8px;
				@media screen and (max-width:680px) {
					gap: 6px;
				}
			}
			.c-entry-summary__meta .c-meta {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				gap: 0 8px;
				font-weight: 500;
				@media screen and (max-width:680px) {
					gap: 0 6px;
				}
			}
			.c-meta__item.c-meta__item--published {
				font-size: 13px;
				font-weight: 700;
				@media screen and (max-width:680px) {
					gap: 0 6px;
					font-size: clamp(10px,2.67vw,12px);
				}
			}
			.c-meta__item:not(:last-child)  {
				margin-right: 0;
			}
			.c-entry-summary__term {
				background-color: #0091db;
				border-radius: 40px;
				color: #fff;
				font-size: 12px;
				padding: 2px 1em;
				line-height: 1.4;
				@media screen and (max-width:680px) {
					font-size: clamp(10px,2.67vw,12px);
				}
			}
			.c-meta__item.c-meta__item--categories {

			}
			.c-entry-summary__header {
				flex: 1;
				min-width: 0;
			}
			.c-entries__item  {
				border-bottom: none;
			}
			.c-entry-summary__title {
				font-size: 14px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				max-width: 100%;
				font-weight: 700;
				@media screen and (max-width:680px) {
					font-size:  clamp(12px,3.2vw,14px);
				}
			}
		}
	}

	&.ico_box {
		.img_area {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			img {
				width: 44%;
				margin-bottom: 2vw;
				@media screen and (max-width:680px) {
					margin-bottom: 7vw;
				}
			}
		}
		.txt_area {
			position: absolute;
			bottom: 1.25vw;
			width: 100%;
			display: flex;
			justify-content: center;
			@media screen and (max-width:680px) {
				bottom: 4vw;
			}
			span {
				display: block;
				text-align: center;
				line-height: 1.35;
			}
			.en {
				font-family: var(--font-family-en);
				font-size: clamp(12px,0.75vw,14px);
				@media screen and (max-width:1600px) {font-size: 0.88vw;}
				@media screen and (max-width:1300px) {font-size: 13px;}
				@media screen and (max-width:1100px) {font-size: 1.18vw}
				@media screen and (max-width:860px) {font-size: 1.51vw}
				@media screen and (max-width:680px) {font-size: clamp(10px,2.67vw,18px);}
			}
			.jp {
				
				font-size: clamp(17px,1.06vw,20px);
				@media screen and (max-width:1600px) {font-size: 1.25vw;}
				@media screen and (max-width:1300px) {font-size: 1.54vw;}
				@media screen and (max-width:1100px) {font-size: 1.82vw}
				@media screen and (max-width:860px) {font-size: 2.56vw}
				@media screen and (max-width:680px) {font-size: clamp(16px,4.27vw,30px);}
			}
		}

		&.-cardiology {}
		&.-dermatology {
			.img_area {
				img {
					width: 32%;
					margin-bottom: 3.1vw;
					@media screen and (max-width:680px) {
						margin-bottom: 10vw;
					}
				}
			}	
		}
		&.-regenerative {
			.img_area {
				img {
					width: 34%;
					margin-bottom: 2.8vw;
					@media screen and (max-width:680px) {
						margin-bottom: 10vw;
					}
				}
			}	
		}
		&.-immunotherapy {}
	}

	&.medical_hours_box {
		.inner {
			padding: 16px 4.4%;
			@media screen and (max-width:680px) {
				padding: 8px 4.4%;
			}
		}
		.ttl {
			margin-bottom: 4px;
			font-size: 1.04vw;
			@media screen and (max-width:1600px) {font-size: 1.25vw;}
			@media screen and (max-width:1300px) {font-size: 1.54vw;}
			@media screen and (max-width:1100px) {font-size: 1.82vw}
			@media screen and (max-width:860px) {font-size: 2.56vw}
			@media screen and (max-width:680px) {font-size: clamp(16px,4.27vw,22px)}
		}
		.list {
			margin-top: 6px;
			li {
				text-indent: -1em;
				padding-left: 1em;
				font-size: clamp(11px,0.69vw,12px);
				line-height: 1.25;
				margin-bottom: 2px;
				@media screen and (max-width:680px) {
					font-size: clamp(7px,1.87vw,11px);
				}
				&:last-child {
					margin-bottom: 0;
				}
				&::before {
					content: "※";
				}
			}
		}
	}

	&.img_box {
		.con {
			&::before {
				content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.70), transparent);
				width: 110%;
				height: 50%;
			}
		}
		.img_area {
			img {
				object-fit: cover;
				height: 100%;
				width: 100%;
			}
		}
		.txt_area {
			position: absolute;
			bottom: 1.25vw;
			width: 100%;
			display: flex;
			justify-content: center;
			@media screen and (max-width:680px) {
				bottom: 4vw;
			}
			span {
				display: block;
				text-align: center;
				line-height: 1.35;
				color: #fff;
			}
			.en {
				font-family: var(--font-family-en);
				font-size: clamp(12px,0.75vw,14px);
				@media screen and (max-width:1600px) {font-size: 0.88vw;}
				@media screen and (max-width:1300px) {font-size: 13px;}
				@media screen and (max-width:1100px) {font-size: 1.18vw}
				@media screen and (max-width:860px) {font-size: 1.51vw}
				@media screen and (max-width:680px) {font-size: clamp(10px,2.67vw,18px)}
			}
			.jp {
				font-size:  clamp(17px,1.06vw,20px);
				@media screen and (max-width:1600px) {font-size: 1.25vw;}
				@media screen and (max-width:1300px) {font-size: 1.54vw;}
				@media screen and (max-width:1100px) {font-size: 1.82vw}
				@media screen and (max-width:860px) {font-size: 2.56vw}
				@media screen and (max-width:680px) {font-size: clamp(16px,4.27vw,30px)}
			}
		}
	}

	&.map_box {
		a {display: block;line-height: 0;}
		img {
			object-fit: cover;
			width: 100%;
			height: 100%;
		}
	}

	&.preventive-m_box {
		@media screen and (max-width:680px) {aspect-ratio: auto;}
		a {
			@media screen and (max-width:680px) {
				display: flex;
				flex-wrap: wrap;
				aspect-ratio: 2/1;
			}
		}
		.txt_area {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			background-color: #00b48c;
			height: calc(50% - 8px);
			@media screen and (max-width:680px) {
				flex: 0 0 50%;
				height: 100%;
			}
			img {
				width: 35%;
				margin-top: -2.4vw;
				@media screen and (max-width:680px) {
					width: 34%;
					margin-top: -10vw;
				}
			}
			.ttl {
				color: #fff;
				position: absolute;
				bottom: 1.25vw;
				text-align: center;
				@media screen and (max-width:680px) {
					bottom: 4vw;
				}
				span {
					display: block;
					line-height: 1.4;
				}
				.en {
					font-family: var(--font-family-en);
					font-size: clamp(12px,0.75vw,14px);
					@media screen and (max-width:1600px) {font-size: 0.88vw;}
					@media screen and (max-width:1300px) {font-size: 13px;}
					@media screen and (max-width:1100px) {font-size: 1.18vw}
					@media screen and (max-width:860px) {font-size: 1.51vw}
					@media screen and (max-width:680px) {font-size: clamp(10px,2.67vw,18px)}
				}
				.jp {
					font-size:  clamp(17px,1.06vw,20px);
					@media screen and (max-width:1600px) {font-size: 1.25vw;}
					@media screen and (max-width:1300px) {font-size: 1.54vw;}
					@media screen and (max-width:1100px) {font-size: 1.82vw}
					@media screen and (max-width:860px) {font-size: 2.56vw}
					@media screen and (max-width:680px) {font-size: clamp(16px,4.27vw,30px)}
				}
			}
		}
		.img_area {
			@media screen and (max-width:680px) {
				flex: 0 0 50%;
				height: 100%;
			}
			img {
				object-fit: cover;
				width: 100%;
				height: 100%;
			}
		}
	}

}


.header_area {
	.logo_box {
		.inner {
			padding: 34px 8% 20%;
		}
		.link_list {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 8px;
			margin-top: 0.85vw;
			.link {
				background-color: #0091db;
				color: #fff;
				border-radius: 6px;
				padding: 8px 0.31vw 9px;
				line-height: 1;
				font-size: clamp(11px,0.69vw,12px);
				text-align: center;
				@media screen and (max-width:1600px) {font-size: 0.81vw;}
				@media screen and (max-width:1300px) {font-size: 1vw;}
				@media screen and (max-width:1100px) {font-size: 1.18vw;}
				@media screen and (max-width:860px) {font-size: 1.63vw;}
			}
			.link:nth-child(2) {background-color: #002b6d;}
		}
	}
	.menu {
		.item {
			position: relative;
			a {
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				height: 100%;
			}
			img {
				width: 43%;
				margin-top: -2vw;
			}
			&.-guide {
				img {
					width: 34%;
				}
			}
			&.-news {
				img {
					margin-top: -1.7vw;
				}
			}
			&.-access {
				img {
					width: 30%;
				}
			}
			.ttl {
				text-align: center;
				width: 100%;
				position: absolute;
				bottom: 0.85vw;
				line-height: 1;
				@media screen and (max-width:860px) {
					bottom: 2.6vw;
				}
				@media screen and (max-width:860px) {
					bottom: 2.2vw;
				}
				span {
					display: block;
				}
				.en {
					font-family: var(--font-family-en);
					font-size: clamp(11px,0.69vw,12px);
					margin-bottom: 2px;
					@media screen and (max-width:1600px) {font-size: 0.0.69vw;}
					@media screen and (max-width:1300px) {font-size: 11px}
					@media screen and (max-width:1100px) {font-size: 1vw}
					@media screen and (max-width:860px) {font-size: 1.4vw}
					@media screen and (max-width:680px) {font-size: clamp(7px,1.87vw,11px);}
				}
				.jp {
					font-size: clamp(12px,0.75vw,14px);
					@media screen and (max-width:1600px) {font-size: 0.88vw;}
					@media screen and (max-width:1300px) {font-size: 13px;}
					@media screen and (max-width:1100px) {font-size: 1.18vw}
					@media screen and (max-width:860px) {font-size: 2.09vw}
					@media screen and (max-width:680px) {font-size: clamp(9px,2.4vw,13px);}
				}
			}
		}
	}
}



.footer {
	margin-top: 8.44vw;
	padding-bottom: 100px;
	@media screen and (max-width:680px) {
		margin-top: 18vw;
	}
	.bnr_area {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 24px 2.4%;
		padding: 0 16px;
		@media screen and (max-width:680px) {
			gap: 24px 4%;
		}
		.item {
			display: block;
			max-width: 330px;
			width: 24%;
			@media screen and (max-width:680px)  {
				width: 48%;
			}
			img {
				filter:drop-shadow(0 0 12px rgba(0, 0, 0, 0.3))
			}
		}
	}
	.caption {
		margin-top: 3.13vw;
		@media screen and (max-width:680px) {
			margin-top: 7vw;
		}
		img {
			width: 90%;
			max-width: 590px;
			display: block;
			margin: 0 auto;
			@media screen and (max-width:680px) {
				width: 68%;
			}
		}
	}
}

/* =========================
  860x以下: header レイアウト調整
========================= */
@media screen and (max-width: 860px)  {
	.main {padding-top: 0;}
	.header_area.box {
		width: 100%;
	}
	.header_area {
		.logo_box {
			margin-top: 0;
			padding-top: 0;
			aspect-ratio: auto;
			.con {
				width: 100%;
				position: static;
			}
			.inner {
				padding: 8px 4.6% 10px;
				display: grid;
				align-items: center;
				grid-template-columns: 7fr 3fr;
				gap: 0 10%;
			}
			.logo {
				margin-top: 8px;
			}
			.link_list {
				grid-template-columns:none;
				grid-template-rows: 1fr 1fr;
				gap: 4px;
				.link {
					font-size: clamp(10px,2.67vw,14px);
					padding: 6px 0.31vw 5px;
				}
			}
		}
		.menu {
			width: 100%;
			gap: 2.5%;
			margin-left: 0;
			.item {
				width:23.1%;
				img {
					margin-top: -5vw;
				}
				&.-news {
					img {
						margin-top: -5vw;
					}
				}
			}
		
		}
		
	}
}

/* =========================
  680px以下: Masonry.js無効化 + Flexboxレイアウト
========================= */
@media screen and (max-width: 680px) {
	.masonry {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		position: relative;
	}
	
	.masonry .box-sizer {
		display: none;
	}
	
	.masonry .box {
		position: relative;
		height: auto;
		flex-shrink: 0;
	}
	
	.masonry .box .con {
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	
	/* 各サイズのFlexbox配置 */
	.masonry .box {
		&[data-size="s"] {
			width: calc(50% - 4px);
			.con {
				aspect-ratio: 1/1;
			}
		}
	}

	/* 掲載順指定 */
	.masonry {
		.box[data-sp_number="header"] {order: 1;}
		.box[data-sp_number="kv"] {order: 2;}
		.box[data-sp_number="ico_service_access"] {order: 3;}
		.box[data-sp_number="ico_service_phone"] {order: 4;}
		.box[data-sp_number="ico_service_reservation"] {order: 6;}
		.box[data-sp_number="medical_hours"] {order:5;}
		.box[data-sp_number="img_schedule"] {order: 7;}
		.box[data-sp_number="img_night_care"] {order: 8;}
		.box[data-sp_number="img_exo"] {order: 9;}
		.box[data-sp_number="img_ct"] {order: 10;}
		.box[data-sp_number="img_electrochemotherapy"] {order: 11;}
		.box[data-sp_number="preventive-m"] {order: 14;}
		.box[data-sp_number="news"] {order: 16;}
		.box[data-sp_number="map"] {order: 17;}
		.box[data-sp_number="ico_cardiology"] {order: 12;}
		.box[data-sp_number="ico_dermatology"] {order: 13;}
		.box[data-sp_number="img_equipment"] {order: 15;}
		.box[data-sp_number="img_recruit"] {order: 18;}
		.box[data-sp_number="img_group"] {order: 19;}
	}
	

}