/*-------------------------------

common

---------------------------------*/
.topics-wrap{
	padding-top: 4.25rem;
}
.topics-circle{
	display: block;
	width: 100%;
	border-radius: 50% / 100% 100% 0 0;
	aspect-ratio: 1600 / 333;
	text-align: center;
	position: relative;
}
.topics-body{
	position: relative;
	top: -1px;
	padding-bottom: 4.25rem;
}
.topics-circle .page-title{
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	font-size: 1.25em;
	color: rgba(255,255,255,.5);
	position: absolute;
	bottom: 25%;
	left: 50%;
	transform: translate(-50%,-50%);
}
#bg-lightblue .topics-circle,
#bg-lightblue .topics-body{
	background: #6cbfd1;
}
#bg-orange .topics-circle,
#bg-orange .topics-body{
	background: #f0a041;
}
#bg-lightgreen .topics-circle,
#bg-lightgreen .topics-body{
	background: #84c35a;
}
#bg-purple .topics-circle,
#bg-purple .topics-body{
	background: #ab90c5;
}
#bg-red .topics-circle,
#bg-red .topics-body{
	background: #ee7e72;
}
#bg-yellow .topics-circle,
#bg-yellow .topics-body{
	background: #f6c600;
}

	@media screen and (max-width:560px) {
		.topics-wrap{
			padding-top: 5.126rem;
		}
		.topics-body{
			padding-top: 2.25rem;
		}
	}

/* お問い合わせ 
------------------------------*/
.topics-otoiawase{
	background: #eee;
	padding: 2.125rem;
	margin-top: 3.375rem;
	border-radius: 1em;
}
	@media screen and (max-width:800px) {
		.topics-otoiawase{
			padding-right: 1rem;
			padding-left: 1rem;
		}
	}
	@media screen and (max-width:560px) {
		.topics-otoiawase{
			margin-top: 2.125rem;
		}
	}


/* 枠 
------------------------------*/
.sect-topics{
	max-width: 1160px;
	width: 86%;
	margin: 0 auto;
	background: #fff;
	border-radius: 2em;
	padding: 4.25rem 0 8.5rem;
}
.sect-topics .inner{
	max-width: 800px;
	margin: 0 auto;
}
.body-details{
	padding: 0 1rem;
}

	@media screen and (max-width:1200px) {
		.sect-topics .inner{
			max-width: 680px;
		}
	}
	@media screen and (max-width:800px) {
		.sect-topics{
			padding:2.25rem;
		}
	}
	@media screen and (max-width:700px) {
		.sect-topics{
			width: 89%;
		}
	}
	@media screen and (max-width:560px) {
		.sect-topics{
			width: calc(100% - 1rem);
			padding:1rem 1rem 2.25rem 1rem;
		}
		.body-details{
			padding: 0 .5rem;
		}
	}

/* ページヘッド
------------------------------*/
.thumbnail{
	margin-bottom: 2.25rem;
}
.topics-title{
	text-align: center;
	font-size: 1.375em;
	font-weight: 500;
	padding-bottom: 2.25rem;
	margin-bottom: 3.375rem;
	background-image: radial-gradient(circle, #bbb 1.5px, transparent 1.5px);
	background-position: left bottom;
	background-repeat: repeat-x;
	background-size: 10px 4px;
}
	@media screen and (max-width:560px) {
		.thumbnail{
			margin-bottom: 1.25rem;
		}
		.topics-title{
			font-size: 1.25em;
			padding-bottom: 1.75rem;
			margin-bottom: 2.125rem;
		}
	}

/* フォント / img
------------------------------*/
img.border{
	border: 1px solid #ccc;
}
.tpcs-copy-normal{
	font-size: 1.0625em;
	line-height: 1.6;
}
.tpcs-copy-large{
	font-size: 1.125em;
	line-height: 1.6;
}
.tpcs-copy-xlarge{
	font-size: 1.1875em;
	line-height: 1.6;
}
.tpcs-bg-komidashi-blue{
	background: #0072b0;
	color: #fff;
	padding: .25em .5em;
	border-radius: .25em;
	margin-bottom: 1.75rem;
}
.tpcs-bg-komidashi-green{
	background: #476b3d;
	color: #fff;
	padding: .25em .5em;
	border-radius: .25em;
	margin-bottom: 1.75rem;
}
.tpcs-bg-komidashi-black{
	background: #444;
	color: #fff;
	padding: .25em .5em;
	border-radius: .25em;
	margin-bottom: 1.75rem;
}
.tpcs-txt-c{
	text-align: center;
}
	@media screen and (max-width:700px) {
		.tpcs-txt-c{
			text-align: left;
		}
	}


/* btn
------------------------------*/
a.topics-btn-blue{
	background: #0072b0;
}
a.topics-btn-orange{
	background: #f0a041;
}
a.topics-btn-blue,
a.topics-btn-orange{
	position: relative;
	display: inline-block;
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 500;
	padding: .75em 3.5em .75em 1.25em;
	color: #fff;
	border-radius: 3rem;
	transition: .3s all;
}
a.topics-btn-blue:hover,
a.topics-btn-orange:hover{
	opacity: .8;
}
a.topics-btn-blue:before,
a.topics-btn-orange:before{
	position: absolute;
	top: 50%;
	right: .75rem;
	content: "→";
	transform: translateY(-50%);
	transition: .1s all;
}
a.topics-btn-blue:hover:before,
a.topics-btn-orange:hover:before{
	right: .5rem;
}



/*
------------------------------

FOODの日

------------------------------*/
.flex-food{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.flex-food .item{
	margin-bottom: 1rem;
}
.flex-food .item:nth-child(odd){
	width: calc(97% - 250px);
}
.flex-food .item:nth-child(even){
	width: 250px;
}
	@media screen and (max-width:900px) {
		.flex-food .item:nth-child(odd){
			width: calc(100% - 200px);
		}
		.flex-food .item:nth-child(even){
			width: 200px;
		}
	}
	@media screen and (max-width:700px) {
		.flex-food .item{
			margin-bottom: 0;
		}
		.flex-food .item:nth-child(odd){
			width: 100%;
		}
		.flex-food .item:nth-child(even){
			width: 70%;
			margin: 0 auto 2rem;
		}
		.flex-food .item:last-child{
			margin-bottom: 0;
		}
	}

/*
------------------------------

眼科

------------------------------*/
.eye-cicle{
	margin-bottom: 3.375rem;
}
.eye-cicle span{
	padding: .125rem 1rem;
	color: #fff;
	font-weight: bold;
	background: #444;
	margin-right: .5rem;
	border-radius: 3rem;
}
.flex-eye li{
	margin-right: 1rem;
}
.eye-copy .tpcs-copy-xlarge{
	letter-spacing: 1px;
}

	@media screen and (max-width:560px) {
		.eye-copy .tpcs-copy-xlarge{
			font-size: 1.125em;
		}
	}

/*
------------------------------
トリミング
------------------------------*/
.trim-corse {
	margin-top: 3em;
}
.trim-corse > ul > li{
	width: calc(100% / 3 - .5rem);
	border-style: solid;
	margin-bottom: 1.25em;
	border-radius: .75em;
	overflow: hidden;
}
	@media screen and (max-width:800px) {
		.trim-corse > ul > li{
			width: 100%;
		}
	}

.trim-corse > ul > li .tit{
	font-size: 1.125em;
	font-weight: 500;
	color: #fff;
	font-family: "M PLUS 1p", sans-serif;
	padding: 1em 1em .75em;
	text-align: center;
}
.trim-corse > ul > li .txt{
	padding: .75em 1.5em 1em;
	font-size: .9em;
}
	@media screen and (max-width:800px) {
		.trim-corse > ul > li .txt .list-disc {
			display: flex;
			flex-wrap: wrap;
		}
		.trim-corse > ul > li .txt .list-disc li{
			width: calc(50% - 2rem);
		}
		.trim-corse > ul > li .txt{
			padding: 1em 1.5em 1.5em;
		}
	}
.trim-corse > ul > li:nth-child(1) {
	background: #d9eaf3;
}
.trim-corse > ul > li:nth-child(2) {
	background: #edf6e6;
}
.trim-corse > ul > li:nth-child(3) {
	background: #d6edf2;
}

.trim-corse > ul > li:nth-child(1) .tit{
	background: #0072b0;
}
.trim-corse > ul > li:nth-child(2) .tit{
	background: #84c35a;
}
.trim-corse > ul > li:nth-child(3) .tit{
	background: #6cbfd1;
}
.nene-flex{
	align-items: center;
	background: #f5d439;
	margin-top: 2em;
	border-radius: .375em;
	overflow: hidden;
}
.nene-flex .s-mark{
	width: 42%;
	line-height: 0;
}
.nene-flex .txt{
	width: calc(100% - 42%);
	padding: 1em 2em 1em 0;
}
.nene-copy{
	font-size: 15px;
	font-weight: bold;
}
	@media screen and (max-width:1200px) {
		.nene-copy{
			font-size: 14px;
		}
	}
	@media screen and (max-width:800px) {
		.nene-flex{
			max-width: 370px;
			width: 95%;
			margin: 2em auto 0;
		}
		.nene-flex .s-mark{
			width: 70%;
			margin: 0 auto;
		}
		.nene-flex .txt{
			width: 100%;
			padding: 0em 1.75em 1.75em;
		}
		.nene-copy{
			font-size: 13px;
		}
	}
	@media screen and (max-width:450px) {
		.nene-flex .s-mark{
			width: 90%;
		}
		.nene-copy br{
			display: none;
		}
		.nene-copy span.block{
			display: block;
		}
	}
	@media screen and (max-width:390px) {
		.nene-flex{
			width: 100%;
		}
		.nene-flex .txt{
			padding-left: 1.25em;
			padding-right: 1.25em;
		}
		.nene-copy{
			font-size: 12.5px;
		}
	}


/*
------------------------------
ネコちゃん冬の健診キャンペーン／夏の健診キャンペーン
------------------------------*/
.cat-corse{
	padding-left: 1em;
	padding-top: .5em;
	padding-bottom: .75em;
	border-left: 4px solid;
}
.cat-corse .list-disc{
	margin: .5em 0 .25em;
	font-size: .9375em;
}
.cat-corse .list-disc li{
	margin-right: 1em;
}
.shirasu{
	border-color: #0096d9;
}
.katsuo{
	border-color: #63b32e;
}
.maguro{
	border-color: #f0a041;
}
.cat-corse .corse-name{
	font-weight: bold;
}
.shirasu .corse-name{
	color: #0096d9;
}
.katsuo .corse-name{
	color: #63b32e;
}
.maguro .corse-name{
	color: #f0a041;
}
.cat-midashi{
	font-size: 1.0625em;
	line-height: 1.5;
	background: #0072b0;
	color: #fff;
	font-weight: bold;
	padding: .375em 1em .5em;
	border-radius: .25em;
}
.cat-midashi span.color{
	color: #ffdf00;
}
.icon-heart{
	padding-left: 2.75em;
	background-image: url(../topics/cat-summer-campaign/images/icon-heart.png);
	background-position: .75em center;
	background-size: 1.5em auto;
	background-repeat: no-repeat;
}
.point-heart{
	margin-top: .5em;
}
.point-heart div{
	padding-left: 1.25em;
	margin-right: 1.5em;
	position: relative;
}
.point-heart div:before{
	position: absolute;
	top: .625em;
	left: .25em;
	width: .75em;
	height: .75em;
	background: #ee7e72;
	content: "";
	border-radius: 50%;
}
.heart-price{
	background: #e6f1f7;
	padding: 1em 2em;
	border-radius: 1em;
}
/*
------------------------------
ワンちゃん春の健診キャンペーン
------------------------------*/
.dog-corse{
	margin:3.25em 0 3em;
}
.dog-corse .corse-name{
	border-bottom: 1px solid;
	border-top: 5px solid;
	padding: 1em 0 1em 60px;
	margin-bottom: 1.5em;
	position: relative;
}
.dog-corse .corse-name img{
	position: absolute;
	top: 50%;
	left: .5em;
	width: 35px;
	height: auto;
	margin-top: -32px;
}
	@media screen and (max-width:560px) {
		.dog-corse .corse-name{
			padding-left: 50px;
		}
		.dog-corse .corse-name img{
			width: 25px;
			margin-top: -22px;
		}
	}

.dog-corse .list-disc li{
	margin-right: .75em;
}
.dog-corse .list-disc li.none{
	list-style-type: none;
	margin-left: 0;
}
.tsukushi .corse-name{
	color: #8e5939;
}
.tanpopo .corse-name{
	color: #47ae4b;
}
.sakura .corse-name{
	color: #de7e7a;
}