@charset "UTF-8";


/*---------------------------------------------------------
共通
---------------------------------------------------------*/
small{
	display: block;
	font-size: 100%;
}
.check_icon.--lblue{
	width:1.3em;
	height:1.3em;
	--icon-bg:#3ebcf7;
	--icon-check:#fff;
}


/*---------------------------------------------------------
椎間板ヘルニアとは_about
---------------------------------------------------------*/

#about .med_lead_box .com_flt .img_l{
	width: 42%;
}
#about .med_lead_box .com_flt .img_l img{
	border-radius:unset;
}
#about .med_lead_box .com_flt .txt_r small{
    margin-top: 1em;
}

/*グレード分け*/
#about .grade .med_bbl {
    font-size: 168%;
	max-width: 880px;
    width: 80%;
	margin: 0 auto;
    padding: .6em 2em;
}
#about .grade .intro_txt{
	text-align: center;
	font-weight: bold;
	font-size: 125%;
	margin-top: 2em;
}
#about .grade .list_wrap{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin-top: 2em;
	gap: 2.5em;
}
#about .grade .list_item{
	position: relative;
}
#about .grade .list_item::after{
	content:"▶︎";
	display: inline-block;
	font-size: 100%;
	color: #0606cd;
	position: absolute;
	top:50%;
    transform:translateY(-50%);
	right: -1.9em;
}
#about .grade .list_item:last-of-type::after{
	display: none;
}
#about .grade .list_item .numbering{
	padding: 1.8em 1.5em;
}
#about .grade .list_item .numbering span{
	color:#3ebcf7;
	font-size: 125%;
	font-weight: bold;
	text-align: center;
	background-color: #fff;
	border-radius: 50px;
	display: block;
}
#about .grade .list_item:first-of-type .numbering{
	background-color: #e2f5fe;
}
#about .grade .list_item:nth-of-type(2) .numbering{
	background-color: #c5ebfd;
}
#about .grade .list_item:nth-of-type(3) .numbering{
	background-color: #a8e1fb;
}
#about .grade .list_item:nth-of-type(4) .numbering{
	background-color: #8bd7fa;
}
#about .grade .list_item:nth-of-type(5) .numbering{
	background-color: #6ecdf9;
}
#about .grade .list_item .txt{
	background-color: #f5f5f4;
	padding: 2em 1.5em;
}
#about .grade .list_item:nth-of-type(5) .txt{
	place-content: center;
    display: grid;
}
#about .grade .outro_note{
	text-align: center;
	margin-top: 2em;
}

/*発症しやすい犬種*/
#about .kensyu{
	border:1px solid #0606cd;
	display: flex;
	justify-content: space-between;
	gap:2em;
	border-radius: 20px;
	padding: 6%;
}
#about .kensyu .txt_wrap{
	width: 50%;
	flex-grow: 1;
}
#about .kensyu .img_wrap{
	width: 50%;
    max-width: 450px;
}
#about .kensyu .ttl{
	font-size: 187%;
	font-weight: bold;
	display: flex;
    align-items: center;
    gap: .5em;
}
#about .kensyu .ttl .icon-dog{
	font-size: 115%;
}
#about .kensyu .txt{
	margin-top: .8em;
}


/* PC調整
------------------------------------------*/
@media only screen and (min-width: 960px) and (max-width:1200px) {
	#about .grade .list_wrap{
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
	/*グレード分け*/
	#about .grade .list_wrap{
		grid-template-columns: repeat(3, 1fr);
	}
	/*発症しやすい犬種*/
	#about .kensyu .ttl{
		font-size: 140%;
	}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
	#about .med_lead_box .com_flt .img_l{
		width: 70%;
	}
	/*グレード分け*/
	#about .grade .med_bbl {
		font-size: 110%;
		width: 100%;
		padding: .6em 1em;
	}
	#about .grade .intro_txt{
		font-size: 110%;
		margin-top: 1em;
	}
	#about .grade .list_wrap{
		grid-template-columns: repeat(2, 1fr);
		margin-top: 2em;
		gap: 1.5em;
		width: 98%;
	}
	#about .grade .list_item::after{
		font-size: 90%;
		right: -1.5em;
	}
	#about .grade .list_item .numbering{
		padding: 1.2em 1em;
	}
	#about .grade .list_item .numbering span{
		font-size: 100%;
	}
	#about .grade .list_item .txt{
		padding: 1.3em;
	}
	#about .grade .outro_note{
		text-align: left;
	}
	/*発症しやすい犬種*/
	#about .kensyu{
		flex-direction: column;
		align-items: center;
		gap:1em;
		padding: 8% 6%;
	}
	#about .kensyu .txt_wrap{
		width: 100%;
	}
	#about .kensyu .img_wrap{
		width: 80%;
	}
	#about .kensyu .ttl{
		font-size: 120%;
		justify-content: center;
        gap: .2em;
	}
}


/*---------------------------------------------------------
診断・検査について_diagnosis
---------------------------------------------------------*/
#diagnosis .intro{
	padding:80px 0;
	text-align: center;
	position: relative;
}
#diagnosis .intro::after{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -1.5em;
	border: 1.5em solid transparent;
	border-top: 1.5em solid #e8faff;
}
#diagnosis .intro .check_box{
	background-color: #d8f2fd;
	margin-top: 2em;
	padding: 4% 2%;
	max-width: 1000px;
    margin-inline: auto;
}
#diagnosis .intro .check_box .ttl{
	font-size: 125%;
	font-weight: bold;
	color:#35a1d2;
}
#diagnosis .intro .check_wrap{
	display: flex;
	justify-content: center;
	gap: 1em;
	max-width: 80%;
    margin-inline:auto;
	margin-top: 1.5em;
}
#diagnosis .intro .check_item{
	font-size: 125%;
	font-weight: bold;
	background-color: #fff;
	border-radius: 10px;
	width: 50%;
	padding: .8em;
	display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
}
#diagnosis .intro .bottom_txt{
	font-size: 125%;
	font-weight: bold;
	margin-top: 2em;
}

/*CTとMRIの比較*/
#diagnosis .hikaku{
	padding:80px 0 120px 0;
}
#diagnosis .hikaku .intro_txt{
	font-size: 125%;
	font-weight: bold;
	color:#fff;
	text-align: center;
}
#diagnosis .hikaku .hikaku_box_wrap{
	margin-top: 2em;
	display: flex;
	gap:1em;
}
#diagnosis .hikaku .hikaku_box_item{
	width: calc(100% / 2);
	background-color: #fff;
	border-radius: 20px;
	padding:4%;
}
#diagnosis .hikaku .hikaku_box_item .ttl{
	color:#fff;
	font-weight: bold;
	font-size: 156%;
	text-align: center;
	padding: 0.2em;
	border-radius: 50px;
}
#diagnosis .hikaku .hikaku_box_item.--mri .ttl{
	background-color: #35a1d2;
}
#diagnosis .hikaku .hikaku_box_item.--ct .ttl{
	background-color: #0606cd;
}
#diagnosis .hikaku .hikaku_box_item .img_wrap{
	margin-top: 1.7em;
}
#diagnosis .hikaku .merideri_item{
	margin-top: 2em;
}
#diagnosis .hikaku .merideri_item .merideri_ttl{
	font-size: 125%;
	font-weight: bold;
	border-bottom: 1px solid #e6e6e6;
	padding-left: 4%;
}
#diagnosis .hikaku .merideri_item.--merit .merideri_ttl{
	color:#0606cd;
}
#diagnosis .hikaku .merideri_item.--demerit .merideri_ttl{
	color:#8c918c;
}
#diagnosis .hikaku .merideri_list_wrap{
	margin-top: 1em;
	padding-left: 4%;
}
#diagnosis .hikaku .merideri_list_item{
	font-weight: bold;
	padding-left: 1.5em;
	position: relative;
}
#diagnosis .hikaku .merideri_item .merideri_list_item::before{
	content:"";
	display: block;
	width: 1em;
	height: 1em;
	position: absolute;
	left:0;
	top: .6em;
}
#diagnosis .hikaku .merideri_item.--merit .merideri_list_item::before{
	background-image: url(../../tsurugamine/images/hernia/i_merit.svg);
}
#diagnosis .hikaku .merideri_item.--demerit .merideri_list_item::before{
	background-image: url(../../tsurugamine/images/hernia/i_demerit.svg);
}


/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#diagnosis .intro .check_wrap{
		max-width: 95%;
	}
	/*CTとMRIの比較*/
	#diagnosis .hikaku{
		padding:12% 0;
	}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
	#diagnosis .intro{
		padding:12% 0;
	}
	#diagnosis .intro .top_txt{
		text-align: left;
	}
	#diagnosis .intro .check_box{
		margin-top: 1.5em;
		padding: 6% 2%;
	}
	#diagnosis .intro .check_box .ttl{
		font-size: 110%;
	}
	#diagnosis .intro .check_wrap{
		flex-direction: column;
		gap: .5em;
		max-width: 95%;
		margin-top: 1em;
	}
	#diagnosis .intro .check_item{
		font-size: 100%;
		justify-content: flex-start;
		width: 100%;
		padding: .6em 1em;
		box-sizing: border-box;
	}
	#diagnosis .intro .bottom_txt{
		font-size: 105%;
		margin-top: 1.5em;
		text-align: left;
	}
	/*CTとMRIの比較*/
	#diagnosis .hikaku{
		padding:12% 0;
	}
	#diagnosis .hikaku .intro_txt{
		font-size: 105%;
		text-align: left;
	}
	#diagnosis .hikaku .hikaku_box_wrap{
		margin-top: 1.5em;
		flex-direction: column;
	}
	#diagnosis .hikaku .hikaku_box_item{
		width: 100%;
		padding:6% 6% 12% 6%;
		box-sizing: border-box;
	}
	#diagnosis .hikaku .hikaku_box_item .ttl{
		font-size: 120%;
	}
	#diagnosis .hikaku .hikaku_box_item .img_wrap{
		margin-top: 1.3em;
	}
	#diagnosis .hikaku .merideri_item{
		margin-top: 1.5em;
	}
	#diagnosis .hikaku .merideri_item .merideri_ttl{
		font-size: 105%;
		padding-left: 2%;
	}
	#diagnosis .hikaku .merideri_list_wrap{
		margin-top: 1em;
		padding-left: 2%;
	}
	#diagnosis .hikaku .merideri_item .merideri_list_item::before{
		left:0;
		top: .4em;
	}
}


/*---------------------------------------------------------
治療について_treatment
---------------------------------------------------------*/
#treatment{
	padding:120px 0;
}
#treatment .treatment_item{
	background-color: #fff;
	border:3px solid #d1d3d1;
	padding:4% 10%;
}
#treatment .treatment_item .ttl{
	font-size: 125%;
	font-weight: bold;
	margin-bottom: 0.5em;
	padding-left: 1.7em;
	position: relative;
}
#treatment .treatment_item .ttl::before{
	content:"";
	display: block;
	width: 1em;
	height: 1em;
	position: absolute;
	left:0;
	top: .6em;
	background-image: url(../../tsurugamine/images/hernia/i_treatment2.svg);
}
#treatment .treatment_item.--recommend .ttl::before{
	background-image: url(../../tsurugamine/images/hernia/i_treatment1.svg);
}
#treatment .treatment_item .suisyou{
	font-size: 75%;
	font-weight: bold;
	color:#0606cd;
	border:1px solid #0606cd;
	border-radius: 50px;
	padding: .1em 2em;
	margin-left: 1em;
}
#treatment .treatment_item.--recommend{
	border:3px solid #0606cd;
}
#treatment .treatment_item:first-of-type{
    margin-top: 4em;
}
#treatment .treatment_item:last-of-type{
	margin-top: .7em;
}
#treatment .outro_l_txt{
	font-size: 125%;
	font-weight: bold;
	margin-top:3em;
}
#treatment .outro_s_txt{
	margin-top:1em;
}

/*ムービー*/
#treatment .movie_box{
	background-color: #fff;
	border-radius: 20px;
	max-width: 1000px;
	margin-inline: auto;
	padding: 4% 6%;
	margin-top: 4em;
	box-sizing: border-box;
}
#treatment .movie_box .ttl{
	text-align: center;
	font-size: 143%;
	font-weight: bold;
	color:#0606cd;
	border:1px solid #0606cd;
	border-radius: 50px;
	width: 80%;
	max-width: 750px;
	margin-inline: auto;
	padding:.3em;
	box-sizing: border-box;
}
#treatment .movie_item_wrap{
	display: flex;
	justify-content: center;
	margin-top: 2em;
	gap:2em;
}
#treatment .movie_item{
	cursor:pointer;
	transition: 0.3s;
}
#treatment .movie_item .txt{
	text-align: center;
	font-size: 125%;
	font-weight: bold;
}
#treatment .movie_item:hover{
	opacity:.7;
}

/*モーダル本体の指定 + モーダル外側の背景の指定*/
#treatment .modal-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,50%);
	padding: 4%;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
	box-sizing: border-box;
	z-index: 999;
}
/*モーダル本体の擬似要素の指定*/
#treatment .modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
#treatment .modal-container.active{
	opacity: 1;
	visibility: visible;
}
/*白枠*/
#treatment .modal-body{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 1000px;
	width: 90%;
}
/*モーダルを閉じるボタンの指定*/
#treatment .modal-close{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: -1.5em;
    right: 0;
    width: 40px;
    height: 40px;
    font-size: 250%;
	color: #fff;
	cursor: pointer;
}
/*モーダル内のコンテンツの指定*/
#treatment .modal-content{
	background: #fff;
	border-radius: 20px;
	text-align: center;
    padding: 8% 8%;
}
#treatment .modal-content video{
    width: 100%;
	max-height: 60vh;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#treatment{
		padding:12% 0;
	}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
	#treatment{
		padding:12% 0;
	}
	#treatment .treatment_item{
		padding:8%;
	}
	#treatment .treatment_item .ttl{
		font-size: 105%;
		margin-bottom: 0.5em;
		padding-left: 1.4em;
	}
	#treatment .treatment_item .ttl::before{
		top: .4em;
	}
	#treatment .treatment_item .suisyou{
		padding: .1em 1em;
		margin-left: .5em;
	}
	#treatment .treatment_item:first-of-type{
		margin-top: 2em;
	}
	#treatment .outro_l_txt{
		font-size: 105%;
		margin-top:1.5em;
	}
	/*ムービー*/
	#treatment .movie_box{
		padding:8%;
		margin-top: 2em;
	}
	#treatment .movie_box .ttl{
		font-size: 105%;
		width: 100%;
	}
	#treatment .movie_item_wrap{
		margin-top: 1.5em;
		gap:1em;
	}
	#treatment .movie_item .txt{
		font-size: 90%;
	}

	/*白枠*/
	#treatment .modal-body{
		width: 95%;
	}
	/*モーダルを閉じるボタンの指定*/
	#treatment .modal-close{
		top: -1em;
	}
}

/*---------------------------------------------------------
早めに相談_soudan
---------------------------------------------------------*/
#soudan .soudan_list{
	display: flex;
	justify-content: center;
	gap:1em;
	max-width: 1000px;
	margin-inline: auto;
}
#soudan .soudan_item{
	font-size: 143%;
	font-weight: bold;
    line-height: 1.5;
	text-align: center;
	width: calc(100% / 3);
	background-color: #e8faff;
	border-radius: 10px;
	padding: 1.5em 0;
	position: relative;
	display: grid;
	place-content: center;
}
#soudan .soudan_item .check_icon{
	position: absolute;
	width: 1.5em;
	height: 1.5em;
	left:50%;
    transform:translateX(-50%);
	top: -0.4em;
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px){
	#soudan .soudan_list{
		flex-wrap: wrap;
	}
	#soudan .soudan_item{
		font-size: 105%;
		width: 47%;
		padding: 1.5em 0;
	}
	#soudan .soudan_item .check_icon{
		width: 1.3em;
		height: 1.3em;
	}
}


/*---------------------------------------------------------
手術を急ぐタイミング_emergency
---------------------------------------------------------*/
#emergency{
	padding:200px 0 120px 0;
	margin-top: -4em;
}
#emergency .main_ttl{
	text-align: center;
	font-weight: bold;
	line-height: 1.5;
	position: relative;
}
#emergency .main_ttl::before{
	content:"";
	display: block;
	width: 4em;
	height: 4em;
	position: absolute;
	left:50%;
    transform:translateX(-50%);
	top: -4em;
	background-image: url(../../tsurugamine/images/hernia/i_emergency.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
#emergency .main_ttl .en{
	font-size: 375%;
	color:#fdffb0;
	letter-spacing: 0.08em;
}
#emergency .main_ttl .ja{
	font-size: 156%;
	color:#fff;
}
#emergency .emergency_cont{
	display: flex;
	gap:3em;
	margin-top: 3em;
	max-width: 1060px;
	margin-inline: auto;
}
#emergency .emergency_cont .img_wrap{
	color:#fff;
	width: 50%;
	max-width: 450px;
}
#emergency .emergency_cont .txt{
	color:#fff;
	width: 50%;
	flex-grow: 1;
}
#emergency .med_bdrbox{
	margin-top: 95px;
	border: 2px solid #35a1d2;
	max-width: none;
	padding: 0 6% 40px;
	margin-bottom: 0;
}
#emergency .med_bbl{
	width: auto;
    font-size: 125%;
	margin: -1.5em auto 1.5em;
}
#emergency .info_wrap{
	display: flex;
	justify-content: center;
	align-items: center;
	gap:2.5em;
}
#emergency .info_wrap .tel{
	font-size: clamp(1.438rem, 1.065rem + 1.86vw, 2.813rem);
	font-weight: bold;
	padding-left: 1.3em;
	position: relative;
}
#emergency .info_wrap .tel::before{
	content: "";
	display: inline-block;
	width: 1em;
	height: auto;
    aspect-ratio: 27 / 33;
	background-image: url(../../images/clinic/icon_tel.svg);
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top:.5em;
	left:0;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#emergency{
		padding:22% 0 12% 0;
	}
	#emergency .info_wrap .tel::before{
		top:0;
	}
	#emergency .med_bdrbox{
		margin-top: 60px;
	}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px){
	#emergency{
		padding:30% 0 12% 0;
		margin-top: -9%;
	}
	#emergency .main_ttl::before{
		width: 3em;
		height: 3em;
		top: -2.5em;
	}
	#emergency .main_ttl .en{
		font-size: 260%;
	}
	#emergency .main_ttl .ja{
		font-size: 110%;
	}
	#emergency .emergency_cont{
		flex-direction: column;
		align-items: center;
		gap:1.5em;
		margin-top: 2em;
	}
	#emergency .emergency_cont .img_wrap{
		width: 70%;
	}
	#emergency .emergency_cont .txt{
		width: 100%;
	}
	#emergency .med_bdrbox{
		margin-top: 16%;
		padding: 0 7% 10%;
	}
	#emergency .med_bbl{
		font-size: 100%;
	}
	#emergency .info_wrap{
		flex-direction: column;
		gap:1.5em;
	}
	#emergency .info_wrap .tel{
		font-size: 190%;
		padding-left: 1.3em;
	}
	#emergency .info_wrap .tel::before{
		top:0;
	}
}



/*---------------------------------------------------------
リハビリ_rehabili
---------------------------------------------------------*/
#rehabili{
	padding:120px 0;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#rehabili{
		padding:12% 0;
	}
}


/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px){
	#rehabili{
		padding:12% 0;
	}
}


/*---------------------------------------------------------
関連ブログ_topics
---------------------------------------------------------*/
#topics{
	padding:120px 0;
	border-bottom: 1px solid #e6e6e6;
}
#topics .ttl{
	font-size: 156%;
	font-weight: bold;
	text-align: center;
	margin-bottom: 1em;
}
#topics .com_topi_box{
	justify-content: center;
}
#topics .com_topi_box .box_main{
	width: 100%;
}
/*
#topics .com_topi_box .entry_list > li{
	border:none;
}
#topics .com_topi_box .swiper-button-next,
#topics .com_topi_box .swiper-button-prev{
	display: none;
}
#topics .com_topi_box .topi_slider{
	width: 100%;
	left: unset;
	transform: none;
} */

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#topics{
		padding:12% 0;
	}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px){
	#topics{
		padding:12% 4%;
	}
	#topics .ttl{
		font-size: 120%;
	}
}