/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 10 2024 | 02:20:13 */
/* ここにCSSコードを追加

例:
.example {
    color: red;
}

CSS の知識に磨きをかけるためにご覧ください。
http://www.w3schools.com/css/css_syntax.asp

コメント終わり */ 

.top-treatment-list {
}
.top-treatment-list__inner {
	max-width: 1180px;
	margin-inline: auto;
}
.cb_free_space.num5 .top-treatment-list__title {
	margin-bottom: 80px;
}

.cb_free_space.num5 .post_content::before {
	position: absolute;
	content: "";
	top: 0;
	right: 10vw;
	width: 100%;
	height: 100%;
	opacity: 0.3;
	background: url(http://kosugihifuka.web-craft-studio-test.site/wp-content/uploads/2024/06/bg-frower04.png) no-repeat center center / cover; 
	z-index: -1;
}

.top-treatment-list__content-title {
	padding-left: 90px !important;
}

.top-treatment-list__box {
	margin-top: 40px;
	display: flex;
	gap: 2%;
}
.top-treatment-list__list {
	list-style: none !important;
}
.top-treatment-list-box--flex {
	display: flex;
	flex-direction: column;
	width: 32%;
}
.top-treatment-list__item {
	position: relative;
	padding-left: 24px;
	
	&::before {
		position: absolute;
		content: "";
		top: 12px;
		left: 0;
		display: inline-block;
		vertical-align: middle;
		color: #12B6CA;
		line-height: 1;
		width: 0;
		height: 0;
		border-style: solid;
		border-color: transparent;
		border-width: 0.375em 0.64952em;
		border-left-color: currentColor;
		border-right: 0;
	}
}
.top-treatment-list__link {
	color: #12B6CA !important;
	border-bottom: 1px solid #12B6CA !important;
	transition: all 0.5s ease 0s;
	font-weight: bold;
}

.top-treatment-list__link:hover {
	border-bottom: none !important;
	text-decoration: none !important;
	color: #C0AB9A !important;
}

.top-treatment-list__content-wrapper {
    display: flex;
	margin-top: 64px;
	gap: 2%;
}

.dermatology-allergology__title {
    position: relative;
	padding-left: 89px;

    &::before {
        position: absolute;
        content: "";
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 60px;
        height: 60px;
        background: url(http://kosugihifuka.web-craft-studio-test.site/wp-content/uploads/2024/06/icon-img05.png) no-repeat center center / contain;
    }
}
.pediatric-dermatology__title {
    position: relative;
	padding-left: 89px;

    &::before {
        position: absolute;
        content: "";
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 60px;
        height: 60px;
        background: url(http://kosugihifuka.web-craft-studio-test.site/wp-content/uploads/2024/06/icon-img07.png) no-repeat center center / contain;
    }
}
.dermatology-surger__title {
    position: relative;
	padding-left: 89px;

    &::before {
        position: absolute;
        content: "";
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 60px;
        height: 60px;
        background: url(http://kosugihifuka.web-craft-studio-test.site/wp-content/uploads/2024/06/icon-img08.png) no-repeat center center / contain;
    }
}
.cosmetic-dermatology__title {
    position: relative;
	padding-left: 89px;
	
	&::before {
	    position: absolute;
        content: "";
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 60px;
        height: 60px;
        background: url(http://kosugihifuka.web-craft-studio-test.site/wp-content/uploads/2024/06/icon_img04.png) no-repeat center center / contain;
}
}

.top-treatment-list__title {
    position: relative;
}

.columns-3 {
	width: 32%;
}

.top-treatment-list__list {
	margin-left: 0 !important;
}

/* ボタン */
.top-treatment-list__buttons {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px 20px;
	max-width: 1000px;
	margin-inline: auto;
	margin-block: 32px;
}

.top-treatment-list__buttons a {
	transition: all .5s ease 0s;
}

.top-treatment-list__button {
	background: #fff;
	display: block;
    padding: 15px;
    text-align: center;
    border: 2px solid #4dc9d8;
    border-radius: 10px;
    line-height: 1;
	/* width: calc(25% - 20px); */
	color: #000 !important;
}

.top-treatment-list__button:hover {
	text-decoration: none !important;
	opacity: .5;
}

.top-treatment-list__item span {
	font-size: 10px;
	color: #000 !important;
	display: inline-block;
}

.top-treatment-list__list--second {
	margin:0 2%;
}

/* レスポンシブ */
@media screen and (max-width: 767.9px) {
	.top-treatment-list-box--flex {
		display: block;
		width: 100%;
	}
	
	.top-treatment-list__box {
		display: block;
		width: 100%;
	}
	
	.colmun-3 {
		display: none;
	}
	
	.top-treatment-list__content-wrapper {
		flex-direction: column;
		gap: 80px;
	}
	
	.columns-3 {
		width: 100%;
	}
	.cb_free_space.num5 .post_content::before {
		display: none;
}
	.top-treatment-list__buttons {
	grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 500px) { 
	.top-treatment-list__buttons {
	display: flex;
	gap: 12px;
	flex-direction: column;
	}
}