@charset "utf-8";
@import url("//share.cr-cms.net/hp_agency/hpagency.css");
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap');
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
  
:root {
	--first-color: #e6a096;
	--sub-color01: #a4cfe0;
	--sub-color02: #d5ebe1;
	--sub-color03: #f7f8d0;
	--sub-color04: #fce3cd;
	--sub-color05: #f8f3e5;
	--accent-color01: #603812;
	--accent-color02: #e52c8a;
	--text-color: #333;
	--border-color: #ccc;
}

html {
	scroll-behavior: smooth;
    transition: 0.5s all;
}

body{
  font-size:17px;
  line-height:1.8;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.5px;
  color:#232323;
}

#mainArticles a:hover img,
#sideBanners  a:hover img,
div.freeHtml a:hover img,
div.image img.gallery:hover{
  filter: alpha(opacity=80);
  -moz-opacity:0.8;
  opacity:0.8;
  transition: 0.3s;
}

a{
  transition: 0.3s all;
}

a.btn {
	display: inline-block;
	background: var(--first-color);
	color: #FFF;
	text-decoration: none;
	padding: 4px 2em 4px 1em;
	border-radius: 99px;
	position:relative;
	 border:1px solid var(--first-color);
}

a.btn::after{
   font-family: 'Material Icons';
   content: '\e5c8';
	margin-left:1em;
	position:absolute;
	right:0.5em;
	top:50%;
	transform:translateY(-50%)
}

a.btn:hover{
	background:#FFF;
	color:var(--first-color);
}

.article p{
  margin-bottom:1em;
}
/*---------------------
Layout
-----------------------*/
#wrap {
	min-width: 1200px;
  	overflow:hidden;
}

#wrap_body {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	padding-top: 0;
  	/*transform: rotateZ(0.03deg);FontMPlus1対策*/
}

#mainContents_body {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

#mainArticles_body {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#mainArticles h2, #mainServices h2, #mainTopics h2, #listTopics h2 {
	width: 100%;
  	font-size: 2.2em;
	padding: 24px 0;
	border-bottom: none;
}

.mainArticles .article {
	border-bottom: none;
	padding-bottom: 40px;
	margin-bottom: 40px;
}

.mainArticles .article.zero_margin {
	padding-bottom: 0;
	margin-bottom: 0;
}

#title_outer, #mainContents {
	width: 1200px;
}

#mainArticles {
	width: 100%;
}

.mainArticles .article, .mainArticles div.gallery, #mainTopics, #listTopics {
	width: 100%;
}

#title {
	order: 1;
}
#topMenu {
	order: 2;
	position: static;
}

#mainImage {
	order: 3;
}

#contents {
	order: 4;
}

#footer {
	order: 5;
}

/*----------------
Article
----------------*/
.mainArticles .article.col2 {
	width: 49%;
}

.mainArticles .article.col3 {
	width: 32%;
}
.mainArticles .article.col4 {
	width: 24%;
}

.mainArticles .article.col5 {
	width: 19%;
}
.article.zero_margin, .gallery.zero_margin {
	margin-bottom: 0;
	padding-bottom: 0;
}

.comment {
	text-align: center;
	line-height: 1.4;
}

/*----------------------
Img
---------------------*/
.mainImage #slider li {
        height: auto !important;
}

.mainArticles .article img,
.gallery_grid li.galleryGrid .image img{
	border-radius: 16px;
	width: 100%
}

.mainArticles .article .image {
	max-width: 100%;
}

.mainArticles .article.col2 img,
.mainArticles .article.col3 img,
.mainArticles .article.col4 img
.mainArticles .article.col5 img{
	max-width: 100%;
	margin-bottom: 16px;
}

.gallery.flex ul.galleryGrids {
	display: flex;
	justify-content: center;
	position: static !important;
	height: auto !important;
	flex-wrap: wrap;
}

.flex .gallery_grid3 li.galleryGrid {
	position: static !important;
	left: unset;
	top: unset;
	margin-bottom: 1em;
}


/*-------------------------------------------
Title & Menu
-------------------------------------------*/
#topMenu, #title, #mainImage {
	background: unset;
}

#title_outer {
	background: url(/materials/175118788364401.png) right center no-repeat;
}

#title h1 {
	background: url(/materials/175118295456801.png) no-repeat left;
	background-size: 380px auto;
	margin: 0;
	padding: 0;
	text-align: left;
	height: 124px;
}

#title h1 a {
	display: inline-block;
	height: 110px;
	overflow: hidden;
	text-indent: 110%;
	white-space: nowrap;
	width: 380px;
}

div#title {
	padding: 24px 0;
}

#title .description {
	display: none;
}

#topMenu {
	height: auto;
}

#topMenu_outer {
	background: unset;
	width: 1200px;
	margin: 0 auto;
}

#topMenu .topMenu {
	max-width: unset;
	display: flex;
	justify-content: space-around;
	width: 100%;
}

#topMenu .topMenu li {
	float: none;
	flex: 1 0 auto;
	width: auto;
	border-left: 2px dotted #cbcbcb;
}

#topMenu .topMenu li:last-child {
	border-right: 2px dotted #cbcbcb;
}

#topMenu .topMenu li a {
	width: 100%;
	font-size: 16px;
	background: unset;
	color: #696969;
	font-weight: 700;
	transition:0.3s all;
	letter-spacing: 0em;
	padding: 6px 0;
}

#topMenu .topMenu li a:hover {
	background: var(--sub-color01);
  	color: #FAFAFA;
}

/*----------------------
見出し
-----------------------*/
.mainContents .article h3, #mainTopics h2, #listTopics h2, .mainContents div.gallery h3 {
	text-align: center;
	font-size: 1.8em;
	margin-bottom: 60px;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:8px;
	gap:1em;
}

.mainContents .article h3::before,
#mainTopics h2::before,
#listTopics h2::before,
.mainContents div.gallery h3::before,
.mainContents .article h3::after,
#mainTopics h2::after,
#listTopics h2::after,
.mainContents div.gallery h3::after{
	content:"";
	height:30px;
	width:143px;
	background:url(/materials/175119618909401.png) center no-repeat;
	background-size:contain;
}

.mainContents .article h3::after,
#mainTopics h2::after,
#listTopics h2::after,
.mainContents div.gallery h3::after{
	transform:rotate(180deg);
}

.mainContents .article h3 a {
	color: #333;
	text-decoration: none;
}

.article h4 {
	font-size: 1.5em;
	font-weight: normal;
	color: var(--accent-color02);
	margin-top: 0.8em;
	margin-bottom: 0.8em;
}

.article.treatment h4, .article.feature h4 {
	color: #666;
}

.article h6 {
	font-size: 1em;
	color: var(--accent-color01);
}

.article h5 {
	font-size: 1.1em;
}

/*-------------------------------------------
table
-------------------------------------------*/
.article table p {
    margin: 0;
}
.article table:not(.contactTable) {
    border-collapse: collapse;
    border-left: 1px solid #ccc;
    border-spacing: 0;
    border-top: 1px solid #ccc;
    margin: 10px auto;
}
.article table:not(.contactTable) td,
.article table:not(.contactTable) th {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    height: auto;
    padding: 10px;
    box-sizing: border-box;
}
.article table:not(.contactTable) th {
    background-color: #f7f7f7;
    text-align: center;
}
.article table.normalTbl{
  margin-bottom:1em;
}
.article table.normalTbl,
.article table.normalTbl th,
.article table.normalTbl td{
	border:none;
}

.article table.normalTbl th{
	background:var(--sub-color05);
	text-align:left;
	width:18%;
	border-bottom:1px solid #FFF;
}

.article table.normalTbl td{
	border-bottom:1px dashed #CCC;
}

.article table.flow{
	border:none;
}

 .article table.flow td {
	text-align:center;
	 font-size:1.1em;
	 background:var(--sub-color02);
    border: none;
    border-radius: 16px;
    display: block;
    height: auto;
    margin-bottom: 56px;
    padding: 4%;
    position: relative;
}

 .article table.flow td::after {
	 content:"\e5db";
	font-family: 'Material Icons';
	font-size:180%;
	position:absolute;
	top: 100%;
	left:50%;
	/* transform:translateY(-50%); */
	color: var(--accent-color01);
	display:block;
	 transform:translateX(-50%);
 }

 .article table.flow tr:last-child td::after {
	 content:none;
 }

.article table.flex{
	border-color:var(--accent-color01);
	border-top:none;
	border-left:none;
	border-right:none;
	border-bottom:none;
}

.article table.flex th,
.article table.flex td{
	text-align:center;
	border-color:var(--accent-color01);
	border-style:dashed;
	border-width:1px;
	border-top:none;
	border-left: none;
	border-right: none;
}

.article table.flex thead {
	border-bottom:1px solid var(--accent-color01);
}

.article table.flex thead th:first-child{
	width:50%;
	background:var(--sub-color05);
	color:var(--accent-color01);
	border-radius:16px 0 0 0;
}

.article table.flex thead th{
	border-left:none !important;
	border-right:none;
}


.article table.flex thead th:first-child{
	color:#FFF;
	background:var(--accent-color01);
	border-right: 1px solid #FFF;
}

.article table.flex tbody th{
	border-left:none;
	border-right: 1px solid #FFF;
	color:var(--accent-color01);
	background: var(--sub-color05);
}

.article table.flex tbody td:nth-child(2){
	background: #e4f2eb;
}

.article table.flex tbody td:nth-child(3){
	background: #fdefe3;
}


.article table.flex tbody td{
	background: #FBFBFB;
}

.article table.flex tbody td:last-child{
	border-right:none;
}

.article table.flex tbody tr:last-child td:last-child{
	border-radius:0 0 16px 0;
}

.article table.flex th:nth-child(2){
	background:var(--sub-color02);
	border:none;
}

.article table.flex th:nth-child(3){
	background:var(--sub-color04);
	border:none;
	border-radius:0 16px 0 0;
}

.article table.flex tbody tr:last-child th,
.article table.flex tbody tr:last-child td{
	border-bottom:none;
}

.article table.flex tbody tr:last-child th{
	border-radius:0 0 0 16px;
}

.article table.baseTbl {
	border-top: none;
	border-left: none;
	width: 100%;
}
.article table.baseTbl th{
	background: var(--sub-color04);
	color: #767371;
	border: none;
	border-bottom: solid 1px #FFF;
}
.article table.baseTbl tr:last-of-type th{
	border-bottom: 1px solid #eee;
}
.article table.baseTbl td {
	border-right: none;
}




.article table.schedule {
	width: 100%;
	max-width: 600px;
	border-collapse: separate;
	background: #f8f3e6;
	margin-bottom:0.5em;
	border: none;
}

.article table.schedule thead,
.article table.schedule thead th{
	background: var(--first-color);
	color: #FFF;
	padding: 8px;
	border: none;
}
.article table.schedule thead, .article table.schedule tbody th,
.article table.schedule thead, .article table.schedule tbody td{
	border-bottom: 1px solid var(--first-color);
	border-right: none;
	padding:8px;
	text-align:center;
	background:#FFF;
}
.article table.schedule tbody th{
	border-left: 1px solid var(--first-color);
}
.article table.schedule tbody td:last-child{
	border-right: 1px solid var(--first-color);
}

.article table.schedule tbody tr:last-child th,
.article table.schedule tbody tr:last-child td{
	border-bottom: 1px solid var(--first-color);
}

.article table.schedule thead th:first-child{
	border-radius:8px 0 0 0;
}

.article table.schedule thead th:last-child{
	border-radius:0 8px 0 0;
}

.article table.schedule tbody tr:last-child td:last-child{
	border-radius:0 0 8px 0;
}

.article table.schedule tbody tr:last-child th{
	border-radius:0 0 0 8px;
}

.article table.underlineTbl {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	max-width: 500px;
	margin: 0.5em;
	border: none;
	background: none;
}
.article table.underlineTbl th,
.article table.underlineTbl td{
	background: none;
	border: none;
	border-bottom: solid 1px var(--border-color);
}
.article table.underlineTbl th{
	font-weight: bold;
}
/*-------------------------------------------
List
-------------------------------------------*/
/******noticelist******/
ol.pp {
	margin-top: 1.5em;
	padding-left: 2em;
}

ol.pp li {
	list-style-type: decimal;
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 12px;
}
ul.notes {
	list-style-type: none;
	margin-left:1em;
}
ul.notes li {
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 12px;
}
ul.notes li::before {
	content: "◆";
	margin-left: -1em;
}
ul.ps {
	font-size: 16px;
	list-style-type: none;
	margin-left:1em;
	margin-bottom: 20px;
}
ul.ps li::before {
	content: "※";
	margin-left: -1em;
}
ul.maru {
	font-size: 16px;
	list-style-type: none;
	margin-left:1em;
}
ul.maru li::before {
	content: "●";
	margin-left: -1em;
}

ul.list li {
	padding: 16px 8px 16px 36px;
	border-bottom: 1px dashed #CCC;
	font-weight: bold;
	line-height: 1.5;
	position:relative;
	color:#555;
}

ul.list li::before {
	content:"\e5df";
	font-family: 'Material Icons';
	font-size:180%;
	position:absolute;
	top: 8px;
	left:0;
	/* transform:translateY(-50%); */
	color: var(--accent-color01);
}

ul.linklist {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	box-sizing: border-box;
}

ul.linklist.col2 li {
	width: 30%;
	margin:8px;
}

ul.linklist.col2 {
	justify-content: center;
}

ul.linklist li {
	width: 50%;
	box-sizing: border-box;
	padding: 4px;
}

ul.linklist li a.btn {
	color: var(--accent-color01);
	font-weight: bold;
	background: var(--sub-color05);
	border-radius: 8px;
  	border:none;
  	padding-top: 8px;
	padding-bottom: 8px;
  	
}

ul.linklist li a {
	display: block;
	text-align: center;
}

ul.linklist li a.btn:hover {
	opacity: 0.8;
}

/*-------------------
特長
---------------------*/
.mainArticles .article.feature {
	position: relative;
	overflow: visible;
	margin-top: 50px;
}
.article.feature:before{
	content: "";
	display:block;
	width:93px;
	height:97px;
	background:url(/materials/175119205202201.png) center no-repeat;
	position: absolute;
	top: -54px;
	left: 50%;
	transform: translateX(-50%);
}
.article.feature.no2:before{
	background:url(/materials/175119310540501.png) center no-repeat;
}
.article.feature.no3:before{
	background:url(/materials/175119310540502.png) center no-repeat;
}
/* .article.feature h4 {
	text-align: center;
	position: relative;
}

.article.feature h4::before {
	content:"";
	display:block;
	width:93px;
	height:97px;
	background:url(/materials/175119205202201.png) center no-repeat;
	margin-left:auto;
	margin-right:auto;
}

#mainArticles .article.feature.no2 h4::before {
	background:url(/materials/175119310540501.png) center no-repeat;
}

#mainArticles .article.feature.no3 h4::before {
	background:url(/materials/175119310540502.png) center no-repeat;
} */

/*------------------
診療内容
--------------------*/
.article.treatment{
	text-align: center;
	
	box-sizing:content-box;
}
.article.treatment:nth-of-type(3n+3){
	border-left:2px dotted #CCC;
	border-right:2px dotted #CCC;
}
.article.treatment.last{
	/*border-right:6px dotted #CCC;*/
}

.mainArticles .article.treatment.col3 {
	/*width: auto;*/
	/*flex:1 1 auto;*/
	position:relative;
}

/*---------------------
etc
-----------------------*/
.article.bg{
	background:var(--sub-color03);
	border-radius:16px;
	padding:40px;
	overflow:visible;
}
.article.bg02{
	background:var(--sub-color05);
	border-radius:16px;
	padding:40px;
	overflow:visible;
}
.ul>*{
	margin-left: 1.5em;
	list-style: disc;
}
.ol>*{
	margin-left: 1.5em;
	list-style: decimal;
}

.article.img_radius .image {
    border-radius: 42% 58% 32% 68% / 29% 49% 51% 71%;
	overflow: hidden;
}

ul.check {
    padding-left: 3px;
	background:#FFF;
	padding:1em 1.5em;;
	border-radius:16px;
	margin:1em 0;
}
ul.check li {
    list-style-type: none;
    padding: 8px;
	font-size:1.1em;
	border-bottom:1px dashed #CCC;
	font-weight:bold;
}
ul.check li::before {
    content: "\e5ca";
	font-family: 'Material Icons';
	color:var(--accent-color01);
	font-weight:bold;
	border:2px solid var(--accent-color01);
	padding:4px;
	border-radius:50%;
	font-size: 100%;
    margin-right: 8px;
}

.article.bg h5 {
	background: var(--accent-color01);
	display:block;
	width:fit-content;
	color: #FFF;
	font-size:1.1em;
	padding:4px 32px;
	border-radius:40px;
	margin:-60px auto 0px;
	z-index:999;
}

.article.bg a.btn {
	font-size: 1.1em;
	border-radius: 0;
	padding: 16px 64px;
	font-weight: bold;
}
/*-----------------------
最新情報
----------------------*/
.mainTopics .topics {
	width: 1024px;
	margin: 0 auto;
	border-bottom: none;
}

#mainTopics h2 {
	color: var(--first-color);
	padding: 24px 0;
	border-bottom: 0;
	margin-bottom: 0;
}

#mainTopics .topics li .date {
	font-size: 14px;
}

#mainTopics .topics li h3 {
	font-size: 18px;
}

#mainTopics .topics .description{
	font-size:14px
}

#mainTopics .topics li .more a {
	font-size: 14px;
	border: 1px solid var(--sub-color01);
	background: var(--sub-color01);
	color: #FFF;
	padding: 4px 16px;
	transition:0.3s all;
}

#mainTopics .topics li .more a:hover {
	background: #FFF;
	color: var(--text-color);
}

#mainTopics .listview {
	width: fit-content;
	font-size: 16px;
	padding: 16px 0;
}

#mainTopics {
	padding-bottom: 0;
	border: none;
	margin-bottom: 40px;
}

/*-------------------
Footer
-----------------------*/
#sideContents {
	background: url(/materials/171143727928203.png) top center repeat-x;
	padding-top:40px;
}

#sideContents_outer{
	background: #f8f3e6;
	width:100%;
} 

#sideContents_body {
	width: 1200px;
	margin: 0 auto;
}

.freeHtml_outer {
	padding: 32px;
	background: unset;
}

.side_info {
	display: flex;
	justify-content: space-between;
	gap: 2em;
}

.side_info div {
	flex: 1 0 auto;
}

.side_info .left p {
	font-size: 18px;
}

.side_info .left h2 img {
	width: 300px;
	margin-bottom: 1em;
}

.side_info .right {
	font-size: 16px;
}

.side_info .right table {
	width: 100%;
	border-collapse: collapse;
	background: #f8f3e6;
	margin-bottom:0.5em
}

.right table thead, .side_info .right table thead th{
	background: var(--first-color);
	color: #FFF;
	padding:8px;
}
.right table thead, .side_info tbody th,
.right table thead, .side_info td{
	border-bottom: 1px solid var(--first-color);
	padding:8px;
	text-align:center;
	background:#FFF;
}

.side_info .right table tbody tr:last-child th,
.side_info .right table tbody tr:last-child td{
	border-bottom:none;
}

.side_info .right table thead th:first-child{
	border-radius:8px 0 0 0;
}

.side_info .right table thead th:last-child{
	border-radius:0 8px 0 0;
}

.side_info .right table tbody tr:last-child td:last-child{
	border-radius:0 0 8px 0;
}

.side_info .right table tbody tr:last-child th{
	border-radius:0 0 0 8px;
}

.side_info ul.ps {
	margin-bottom: 0;
}

.sideServices ul li a, .sideBlogCategories a, .sideBlogDates a, .footer * {
	font-size: 14px;
}

.sideServices h2,
.sideMobile h2,
.sideBlogCategories h2, .sideBlogDates h2,
.sideMobile h2{
	content: none;
	font-size: 17px;
	background: unset;
	padding: 24px 0;
	display: flex;
}

.sideServices h2::before {
	font-family: 'Material Icons';
	content: "\e5d2";
	font-size:1.2em;
	margin-right:0.5em;
}
.sideMobile h2::before {
	font-family: 'Material Icons';
	content: "\e0d4";
	font-size:1.2em;
	margin-right:0.5em;
}
.sideBlogCategories h2:after, .sideBlogDates h2:after,
.sideMobile h2:after{
	content: none;
}

.sideBlogCategories h2:before{
	position:static;
	content:"\e892";
	font-family: 'Material Icons';
	background: none;
	font-size:1.2em;
	margin-right:0.5em;
	display:inline;
  width:auto;
  height:auto;
  margin-top:unset;
}
.sideBlogDates h2:before {
	position:static;
	content:"\ebcc";
	font-family: 'Material Icons';
	background: none;
		font-size:1.2em;
	margin-right:0.5em;
	display:inline;
  width:auto;
  height:auto;
  margin-top:unset;
}

.footer li a{
	font-size:16px;
	text-align: center;
	color: #333;
}

.footer .topMenu {
	width: 1200px;
	display: flex;
	justify-content: center;
	margin: 0 auto;
}

.footer .copyright {
	padding: 48px 0;
	text-align: center;
	width: 1200px;
	margin: 0 auto;
}

#footer {
	padding: 40px 0 0;
	background: var(--sub-color04);
}

#footer_outer {
	width: 100%;
}

.footer li {
	text-align: center;
	flex: 1 0 auto;
}

.footer * {
	color: #333;
}

#mainTopics .listview a {
	background: var(--sub-color05);
	padding: 8px 40px 8px 32px;
	position: relative;
	border-radius: 8px;
}

#mainTopics .listview a::after {
	font-family: 'Material Icons';
	content: '\e5c8';
	margin-left:1em;
	position:absolute;
	right:0.5em;
	top:50%;
	transform:translateY(-50%);
}

#mainTopics .listview a:hover {
	opacity: 0.8;
	text-decoration: none;
}

#mainContents {
    padding: 105px 0 40px 0;
	padding-top: 50px;
}

.gallery_grid li.galleryGrid .galleryGrid_outer {
    width: auto;
    padding: 0 20px 10px;
}
/*3つボタン*/
.freeHtml #contact-box{
position:fixed;
top:290px;
right:0px;
z-index:100;
/*width:80px;*/
}
.freeHtml #contact-box2{
position:fixed;
top:445px;
right:0px;
z-index:100;
/*width:80px;*/
}
.freeHtml #contact-box3{
position:fixed;
top:600px;
right:0px;
z-index:100;
/*width:80px;*/
}

.sideBlogCategories a, .sideBlogDates a {
    display: inline-block;
    padding: 3px 50px;
}

.sideBlogDates dd {
    margin-left: 0px;
}

.sideServices ul li a {
   padding: 5px 15px 5px 27px;
}

#mainImage {
    width: 100%;
}

.mainImage #slider li img {
    max-width: 100%;
}








/*--------------------------
* 専門治療
--------------------------*/
.article.card{
	padding: 20px;
	background-color: var(--sub-color05);
	box-sizing: border-box;
}
.article.card .article_outer{
	height: 100%;
}
.article.card .article_body{
	display: flex;
	flex-direction: column;
	height: 100%;
}

/*--------------------------
* 特長
--------------------------*/
.gallery.details{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.gallery.details li.galleryGrid {
	position: relative !important;
	left: unset !important;
	top: unset !important;
}
.gallery.details li.galleryGrid .details_title {
	font-weight: bold;;
}

.mainArticles .article_right img, .mainArticles .article_left img {
    max-width: 500px;
}
/*新着一覧レイアウト調整*/
.mainTopics .topics li .date {
    font-size: 15px;
}
.mainTopics .topics li h3 {
    font-size: 18px;
}
.mainTopics .topics li {
    font-size: 14px;
      color: #999;
}
.mainTopics .topics li .more a{
    font-size: 14px;
    border: 1px solid var(--sub-color01);
    background: var(--sub-color01);
    color: #FFF;
    padding: 4px 16px;
    transition: 0.3s all;
}
.mainTopics .topics li .more a:hover {
    background: #FFF;
    color: var(--text-color);
      border: 1px solid var(--sub-color01);
}