@charset "utf-8";

/* home.css
 * おまかせプラン ver.7 - v1.0.0
 * 2022-09-01
 * **************************************************
 * Search
 * News Links
 * like This（at a time like this）
 * Recommend
 * Loop img
 * **************************************************
 */


.main-visual{
	max-width:1340px;
	margin:40px auto;
	padding:0 40px;
}

.main-visual img{
	max-width:100%;
}


/* News Banner
------------------------------------------------------------------- */
.news-banner__inner {
  display: flex;
  justify-content: space-between;
  margin:50px auto;
  padding: 0px 20px;
  max-width:1290px;
}
.news-list__header h2 {
}

.news-list__header h2 img{
  position:relative;
  top:0;
  left:0;
  max-width:170px;
}
.news-list__header{
  position:relative;
}

.news-list__header a.news-list--link{
  position:absolute;
  bottom:5px;
  right:5px;
  color:#fff;
  background:#87002c;
	padding:0.1em 1em;
	border-radius:100vw;
}

.news-list__header a.news-list--link:hover{
	opacity:.7;
}

/* News */
.news-list {
  width:73%;
}
.news-list__header {
}
.news-list--link {
  z-index: 1;
  position: relative;
  font-size: 1.6em;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.news-list__inner {
  z-index: 1;
  position: relative;
  padding:20px 0;
}
.news-list__scroll-bar {
  height: 33em;
  overflow-y: scroll;
}
.news-list li {
  display: flex;
  font-size: 1.6em;
  line-height: 1.6;
  border-top:1px solid #e1e3e1;
  margin-right:10px;
}

.news-list li a{
	color:#333333;
	text-decoration:none;
}

.news-list li a:hover{
	opacity:.8;
}

.news-list li:nth-child(1){
	padding:17px 0;
}

.news-list li + li {
	padding:18px 0;
}
.news-list li:last-child{
	border-bottom:1px solid #e1e3e1;
}

/* Banner */
.banner {
  width: 24.003%;
}

.banner_list li{
	margin-bottom:10px;
}

.banner_list li img{
	max-width:100%;
}


/* Like This（at a time like this）
------------------------------------------------------------------- */
.like-this {
  margin:50px auto;
  font-weight: bold;
}
.like-this__inner {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding:0;
  max-width: 1300px;
}
.like-this__btn {
  min-height: 13.5em;
}
@media screen and (max-width: 1280px) {
  .like-this__inner {
      margin: 0 20px;
  }
}
.like-this h2 {
  float: left;
  margin-bottom: 20px;
  font-size: 3.2em;
  color: #000;
  line-height: 1.2;
}
.like-this__filter dl {
  display: flex;
  align-items:center;
  justify-content:center;
  margin: 5px 0 0 0px;
}
.like-this__filter dd {
  width: 215px;
  padding:20px 10px;
  font-size: 1.6em;
  text-align: center;
  cursor: pointer;
  background-color: #f3f3f3;
  color: #fff;
  border-bottom:none;
  border-radius:10px 10px 0 0 ;
  transition: 0.3s;
	position:relative;
}

.like-this__filter dd#all,
.like-this__filter dd#all:hover,
.like-this__filter dd#all.active {
  background-color: #f3f3f3;
  color: #333;
}
.like-this__filter dd#card,
.like-this__filter dd#card:hover,
.like-this__filter dd#card.active {
  background-color: #82c4a3;
}

.like-this__filter dd#medical,
.like-this__filter dd#medical:hover,
.like-this__filter dd#medical.active {
  background-color: #658caa;
}
.like-this__filter dd#lifescene,
.like-this__filter dd#lifescene:hover,
.like-this__filter dd#lifescene.active {
  background-color: #fc9770;
}

#like-this__btn__all{
	border-radius:10px;
}

#like-this__btn__all.all{
	background:#f3f3f3;
}
#like-this__btn__all.card {
	background:#82c4a3;
}
#like-this__btn__all.medical {
	background:#658caa;
}
#like-this__btn__all.lifescene {
	background:#fc9770;
}


.like-this__filter dd + dd {
  margin-left:15px;
}

/* Recommend
------------------------------------------------------------------- */
.recommend {
  padding:50px 20px 240px;
  font-weight: bold;
  background:#f5f4e7;
}
.recommend h2 {
  font-family: 'Zen Maru Gothic', sans-serif;
  display: block;
  margin: 0 auto;
  width: 8.0em;
  font-size: 2.8em;
  font-weight: bold;
  color: #87002c;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}

.recommend  ul {
	padding:40px 40px 0;
	max-width: 1270px;
	width:100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: auto;
	position:relative;
}

.recommend li {
	width: 32.0%;
}
.recommend li + li {
	margin-right: 2.0%;
	margin-bottom: 1.5%;
}
.recommend li:first-child {
	margin-right: 2.0%;
	margin-bottom: 1.5%;
}
.recommend li:nth-child(3n) {
	margin-right: 0;
}
.recommend li:nth-child(n + 3) {
	margin-bottom: 0;
}
.recommend a {
	display: table-cell;
	padding: 0 20px 0 100px;
	height: 72px;
	width: 32.0%;
	border-radius: 50px;
	font-size: 1.5em;
	font-weight: bold;
	color: #000;
	text-decoration: none; 
	line-height: 1.3;
	vertical-align: middle;
	border:1px solid #87002c;
	background:#ffffff no-repeat center left 23px/54px;
	position:relative;
  transition: 0.3s;
  -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.2);
          box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.2);
}
.recommend a:hover {
	border:1px solid #87002c;
  background-color: #fff;
	color:#87002c;
  -webkit-box-shadow: 0 0 5px rgb(195 195 195 / 60%);
  box-shadow: 0 0 5px rgb(195 195 195 / 60%);
  transform: scale(1.05);
}
.recommend span {
	display: block;
	font-size: 78%;
}
/*  Illust（Mini Content） */
/* 接骨院にかかるとき */
.recommend li.osteopathic a {
	background-image:url(../images/home/recommend-osteopathic.svg);
}
/* ジェネリック医療の活用 */
.recommend li.generic a {
	background-image:url(../images/home/recommend-generic.svg);
}
/* 自動車事故にあったとき */
.recommend li.accident a {
	background-image:url(../images/home/recommend-accident.svg);
}
/* 時間外受診編 */
.recommend li.off-hours a {
	background-image:url(../images/home/recommend-off-hours.svg);
}
/* はしご受診編 */
.recommend li.ladder a {
	background-image:url(../images/home/recommend-ladder.svg);
}
/* かかりつけ受診編 */
.recommend li.doctor a {
	background-image:url(../images/home/recommend-doctor.svg);
}

@media screen and (max-width: 767px) {


.main-visual{
	margin:0px auto;
	padding:0px;
}
	
	
 /*search
------------------------------------------------------------------- */
#home .header__search{
	display:block!important;
	margin:-1px auto 0;
	background:#f3f3f3;
	padding:25px 10px 25px;
}
#home .header__search .search__inner {
	margin: 0 auto;
    width: auto;
    text-align: center;
  }
#home .header__search form {
	justify-content:center;
	width:auto;
	height:auto;
}

	
 #home .header__search input[type="text"] {
    display:inline-block;
    font-size: 1.5em;
	 margin-right:5px;
	 padding:10px;
	 width:70%;
	 height:30px;
	 background:#fff;
  }
	

  /* News links
  ------------------------------------------------------------------- */

.news-banner__inner {
	display:block;
	margin:0px;
	padding:0;
}
	
  /* News */

  .news-list h2 {
    padding: 10px 0 !important;
    margin: 0 10px;
  }

  .news-list__header h2 img {
    max-width: 120px;
  }

  .news-list__header a.news-list--link {
    right: 15px;
    bottom: 15px;
    font-size: 1.4em;
  }

  .news-list {
    width: 100%;
    padding: 0;
  }

  .news-list__header {
    padding: 10px 10px 0;
    margin: 0;
    border-bottom: none;
  }

  .news-list__inner {
    padding: 0;
    margin: 0;
  }

  .news-list li {
    display: flex;
    flex-wrap: wrap;
    margin:10px;
    padding: 10px 40px 10px 10px !important;
    border: 1px solid #dbdbdb;
    border-radius: 15px;
    position: relative;
    width: auto;
    box-shadow: 2px 2px 8px 0 rgb(210 210 210 / 45%);
	cursor: pointer;
  }

  .news-list li a {
    display: block;
    width: 100%;
  }

  .news-list li::after {
    position: absolute;
    right: 15px;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
    display: block;
    height: 8px;
    width: 8px;
    border-top: 2px solid #87002c;
    border-right: 2px solid #87002c;
    transform: rotate(45deg);
  }

  .news-list li:nth-child(1) {
    padding: 0;
  }

  .news-list li + li {
    padding: 10px 0 0;
  }

  .news-list__inner dl {
    display: block;
  }

  .news-list li a:after {
    display: none;
  }

  .news-list__inner dl dd {
    margin-top: 5px;
    padding: 0;
  }

  .news-list--cat > span {
    margin-right: 12px;
    padding: 2px 6px;
  }

  .news-list--date {
    margin-right: 0;
  }

  /* 日付の後ろの改行文字は不要 */
  .news-list--date::after {
    content: none;
  }

  .news-list--link {
    padding: 20px;
    text-align: center;
  }

  .news-list--link a {
    min-width: 150px;
    margin: 0 auto;
    height: auto;
    display: block;
    position: relative;
    right: auto;
    bottom: auto;
    color: #fff;
    font-size: 1.4em;
    transition: 0.1s;
  }
/* Banner */
.banner {
 width: 100%;
}


.banner_list{
	display:flex;
	justify-content:space-between;
	margin:20px 10px;
}

.banner_list li{
	width:49%;
	margin-bottom:0;
}

.banner_list li img{
	max-width:100%;
	width:100%;
}
	

  /* like This（at a time like this）
  ------------------------------------------------------------------- */

.like-this {
  padding:20px 0 0;
  margin:0;
  background:#fff;
}
	
.like-this__title{
  border-radius:30px 30px 0 0;
  background:url(../images/common/blue-plaid.svg)no-repeat center top/cover;
}
  .like-this__inner {
    margin: 0 0;
    max-width: none;
  }
.like-this__filter dl{
	display:flex;
	justify-content:center;
	align-items:stretch;
	width:97%;
	margin:0 auto;
}
.like-this__filter dd{
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:1.3em;
	line-height:1.2;
	width:calc(85% / 4);
	padding:5px 10px;
}
.like-this__filter dd + dd{
	margin-left:1%;
}

#like-this__btn__all{
	border-radius:0px;
}


.recommend {
  margin-top:30px;
  padding:30px 15px 200px;
}
#home .recommend h2{
margin:0 auto 20px;
	font-size:2.2em;
text-align:center;}
	
#home .recommend ul {
	justify-content:space-between;
	padding:0;
}
	
#home .recommend ul li{
	width:48%;
	display:flex;
	justify-content:center:
}
#home .recommend ul li:first-child{
	margin-top:10px!important;
	margin-right:0!important;
}

#home .recommend ul li + li{
	margin-right:0!important;
	margin-top:10px;
}
.recommend li:nth-child(n + 3) {
	margin-bottom:5px;
}

#home .recommend a {
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	text-align:left;
	padding:10px 20px 10px 50px;
	height:auto;
	width:100%;
	background-position:center left 10px;
	background-size:30px;
	border-radius:50vw;
}
}