@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
 * **************************************************
 */



.wrap-in{
	background:#efefef;
	border-radius:1vw;
	margin:0 40px 30px 0;
	box-shadow: 0px 0px 15px -5px #6a6a6a;

}

/* main-visual
------------------------------------------------------------------- */
.main-visual img{
	width:100%;
	vertical-align:middle;
	border-radius:1vw 1vw 0 0 ;
}


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

.news-list{
	margin:50px auto;
  width:95%;
  background:#fff;
  border-radius:1vw;
  padding:10px 0px 20px 50px;
  position:relative;
}

.news-list__header {
  margin:10px 0 0 0px;
  font-family: 'Trebuchet MS', "ヒラギノ丸ゴ ProN W4","ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic ProN","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO", Meiryo, Arial, sans-serif;
  font-weight:bold;
}
.news-list h2 {
	position:relative;}

.news-list h2 .news-t{
  display:block;
  font-size:4em;
  letter-spacing:.3em;
  color:#000000;
  font-weight:bold;
}

.news-list h2 .news-t::first-letter {
	color:#4bbdb4;
}

.news-list h2 .news-m{
  position:absolute;
  height:auto;
  bottom:-10px;
  font-size:1.3em;
  color:#000000;
  font-weight:bold;
	
}

.news-list--link{
  position:absolute;
  display:inline-block;
  right:25px;
  top:30px;
  background:#fe5f55;
  color:#fff;
  text-decoration:none;
  font-size:1.4em;
  padding:10px 20px 10px 30px;
  border-radius:100vw;
  font-family: 'Trebuchet MS', "ヒラギノ丸ゴ ProN W4","ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic ProN","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO", Meiryo, Arial, sans-serif;
  font-weight:bold;
}

.news-list--link:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 0;
  left: 15px;
  bottom: 0;
  margin: auto;
}

.news-list--link:hover{
  opacity:.8;
}


.news-list__inner {
  z-index: 1;
  position: relative;
  padding: 20px 0px 20px 15%;
  margin:0 0 0 0;
}
.news-list li {
  display:block;
  font-size: 1.6em;
  line-height: 1.6;
  color:#3a3a3a;
  position:relative;
  padding:15px;
}

.news-list li dl{
  position:relative;
}
.news-list li a:hover:after{
  opacity:.8;
}
.news-list li:first-child,
.news-list li + li {
	border-bottom:1px solid #cccccc;
}

.news-list--date::after{
   content:'\A';
   white-space: pre;}

.news-list__scroll-bar {
  height: 28.5em;
  overflow-y: scroll;
}

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

.like-this h2 {
  display: block;
  margin:0 auto 30px;
  font-size: 3.2em;
  color: #000;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  font-weight:bold;
  letter-spacing: 0.4em;
  text-indent: 0.4em;}

.like-this h2 span{
	color:#4bbdb4;
}

.like-this__filter{
  font-family: 'Trebuchet MS', "ヒラギノ丸ゴ ProN W4","ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic ProN","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO", Meiryo, Arial, sans-serif;
  font-weight:bold;
}
.like-this__filter dl {
  display: flex;
  margin:0 auto;
  padding:0 150px;
}
.like-this__filter dd {
	display:flex;
	justify-content:center;
	align-items:center;
	margin:0 auto;
  width:calc( (100% - 10% ) / 4 );
	height:56.8px;
  background:#777da7;
  font-size: 1.6em;
  text-align: center;
  cursor: pointer;
  color: #fff;
	font-weight:bold;
	border-radius:0.5vw 0.5vw 0 0;
	position:relative;
}

.like-this__filter dd:before{
	position:absolute;
	content:'';
	left:-35px;
	bottom:0px;
	width:45.44px;
	height:56.8px;
	background:url(../images/home/tab.svg)no-repeat left bottom/contain;
}

.like-this__filter dd:after{
	position:absolute;
	content:'';
	right:-35px;
	bottom:0px;
	width:45.44px;
	height:56.8px;
	background:url(../images/home/tab.svg)no-repeat left bottom/contain;
	transform: scaleX(-1);
}

.like-this__filter dd:hover,
.like-this__filter dd.active {
  background-color: #ffffff;
	z-index:100;
	color:#000;
}

.like-this__filter dd.active:before,
.like-this__filter dd:hover:before{
	background:url(../images/home/tab-active.svg)no-repeat left bottom/contain;
}

.like-this__filter dd.active:after,
.like-this__filter dd:hover:after{
	background:url(../images/home/tab-active.svg)no-repeat left bottom/contain;
	z-index:100;
}


.like-this__btn {
  clear: both;
  display: flex;
  justify-content:center;
  flex-flow: row wrap;
  align-items: stretch;
  margin:0 40px;
  padding:30px 0px 50px 20px;
  background:#fff;
  border-radius:1vw;
}
.like-this__btn li {
  width: -webkit-calc(20% - 20px);
  width: calc(20% - 60px);
}

.like-this li:first-child,
.like-this li + li {
  margin: 30px 20px 0 0;
}
.like-this__btn > li.animate {
  animation: like-this-btn 0.6s;
}
/*@keyframes like-this-btn {
  0% {
   transform: scale(0.1);
  }
  100% {

   transform: none;
  }
}*/



/*  Recommend
------------------------------------------------------------------- */
#home .recommend {
}
#home .recommend ul {
	padding:80px 40px 0;
	max-width: 1020px;
	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: start;
  margin: auto;
	position:relative;
}

#home .recommend li {
	width: 31.916%;
}
#home .recommend li + li {
	margin-right: 2.0%;
	margin-bottom: 1.5%;
}
#home .recommend li:first-child {
	margin-right: 2.0%;
	margin-bottom: 1.5%;
}
#home .recommend li:nth-child(3n) {
	margin-right: 0;
}
#home .recommend a {
	display: table-cell;
	height: 100px;
	width: 31.916%;
  transition: 0.3s;
}
#home .recommend a img{
	max-width:100%;
	border-radius:10px;
}

#home .recommend a:hover {
  transform: scale(1.05);
}
#home .recommend span {
	display: block;
	font-size: 78%;
}
/*  Illust（Mini Content） */

.recommend .osteopathic a{
  background-image: url(../images/home/recommend-osteopathic.svg);
}
.recommend .generic a{
  background-image: url(../images/home/recommend-generic.svg);
}
.recommend .accident a{
  background-image:url(../images/home/recommend-accident.svg);
}
.recommend .off-hours a{
  background-image:url(../images/home/recommend-off-hours.svg);
}
.recommend .ladder a{
  background-image:url(../images/home/recommend-ladder.svg);
}
.recommend .doctor a{
  background-image:url(../images/home/recommend-doctor.svg);
}

/* mini
------------------------------------------------------------------- */
.mini {
  margin-top: 80px;
  font-family: 'Trebuchet MS', "ヒラギノ丸ゴ ProN W4","ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic ProN","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO", Meiryo, Arial, sans-serif;

}
.mini h2 {
  display: block;
  margin: 0 auto;
  font-size: 3.2em;
  color: #000;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  font-weight:bold;
  letter-spacing: 0.4em;
  text-indent: 0.4em;}

.mini h2 span{
	color:#4bbdb4;
}

.mini ul {
  display: flex;
  flex-flow: row wrap;
  margin:0 auto;
	padding:40px 40px 0;
	max-width: 1020px;
}
.mini li {
  padding: 0 10px;
  width: -webkit-calc(100% / 4);
  width: calc(100% / 4);
  text-align: center;
}
.mini li:first-child,
.mini li + li {
  border-left: 1px solid #d2d2d2;
}
.mini li:last-child {
  border-right: 1px solid #d2d2d2;
}
.mini .generic {
  background: url(../images/home/mini-generic.webp) no-repeat center bottom 5px;
  -webkit-background-size: 82px auto;
  background-size: 82px auto;
}
.mini .off-hours {
  background: url(../images/home/mini-off-hours.webp) no-repeat center bottom 5px;
  -webkit-background-size: 82px auto;
  background-size: 82px auto;
}
.mini .ladder {
  background: url(../images/home/mini-ladder.webp) no-repeat center bottom 5px;
  -webkit-background-size: 82px auto;
  background-size: 82px auto;
}
.mini .doctor {
  background: url(../images/home/mini-doctor.webp) no-repeat center bottom 10px;
  -webkit-background-size: 82px auto;
  background-size: 82px auto;
}



.mini li a {
  display: block;
  height: 150px;
  font-size: 1.6em;
  color: #000;
  font-weight:bold;
  text-decoration: none;
  line-height: 1.4;
  letter-spacing: 0.03em;
  padding:10px;
}
.mini li span {
  display: block;
  font-size: 75%;
  letter-spacing: 0.01em;
}
.mini li {
  transition: 0.3s;
}
.mini li:hover {
  transform: translateY(-0.5em);
  -webkit-box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
  box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
}
.mini li:first-child:hover,
.mini li:hover + li,
.mini li + li:hover {
  border-left: 1px solid #fafafa;
}

@media screen and (max-width: 767px) {
  /* wrap-in
  ------------------------------------------------------------------- */

.wrap-in{
	background:#efefef;
	border-radius:0;
	margin:0 0px 0px 0;
	box-shadow:none;

}

/* main-visual
------------------------------------------------------------------- */
.main-visual img{
	border-radius:0;
}

	
 /*search
------------------------------------------------------------------- */
#home .header__search{
	max-width:100%;
	display:block!important;
	padding:10px 30px;
	margin:0 auto;
	background:#efefef;
	/* padding:25px 10px 25px; */
}
#home .header__search .search__inner {
	margin:0;
    width: auto;
    text-align: center;
  }
#home .header__search form {
	width:auto;
	height:auto;
}

#home .header__search form {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-gnavis: center;
  outline: 1px solid #fe5f55;
  outline-offset: -1px;
  border-radius:100vw;
}

#home .header__search input[type="text"] {
  padding: 11px 70px 11px 15px;
  width: 100%;
  border: none;
  font-size: 1.4em;
}



	

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

  .news{
	  background:#fff;
	  padding-bottom:20px;}
	
  .news-list {
	  margin:20px auto;
	  width: 100%;
	  padding:0;
	  border-radius:0;
  }
	
  .news-list__header {
    padding:10px;
	margin:0;
  }

.news-list h2{
	position:relative;
}

.news-list h2 .news-t{
  font-size:2.2em;
}
	
.news-list h2 .news-m{
  top:10px;
  left:90px;
  font-size:1.2em;	
}
.news-list--link{
  position:absolute;
  display:inline-block;
  right:5px;
  top:13px;
  background:#fe5f55;
  color:#fff;
  text-decoration:none;
  font-size:1.3em;
  padding:5px 15px 5px 25px;
  border-radius:100vw;
  font-family: 'Trebuchet MS', "ヒラギノ丸ゴ ProN W4","ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic ProN","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO", Meiryo, Arial, sans-serif;
  font-weight:bold;
}

.news-list__inner {
  padding:0;
  margin:0;
}
	
  .news-list li {
	 margin:0;
    display: block;
    font-size: 1.6em;
    padding: 0px 20px 15px 15px;
  }

  .news-list li:nth-child(even){
	  background:#fff;
  }

  .news-list li:nth-child(1){
	  padding-top:1.2em;
	  border-top:1px solid #d5d5d5;
  }
	
  .news-list li + li {
	  padding-top:1.2em ;
	  border-top:1px solid #d5d5d5;
  }


.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: "\A";
    white-space: pre;
  }


.news-list__scroll-bar {
  height: 33em;
}
	

  /* links */
  .links {
	  padding:0 15px;
    width: auto;
	  max-width:100%;
	  background:#fff;
  }
.link-list{
	margin-top:0!important;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	align-items:stretch;
	padding-bottom:30px;
}
	
.link-list li{
	border:1px solid #e0e0e0;
	width:48%;
}
	.link-list li:nth-child(1){

		margin-top:10px;
	}

	.link-list li:nth-child(odd){
		margin-right:2%;}
	
	.link-list li + li{
		margin-top:10px;
	}

	

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

.like-this {
  padding:40px 0 0;
  background:#efefef;
}
	
.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 h2 {
    float: none;
    margin-bottom: 0;
    font-size: 2.6em;
    text-align: center;
	padding:20px;
  }
.like-this__filter dl{
	width:100%;
	padding:0;
}
.like-this__filter dd{
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:1.3em;
	line-height:1.2;
	width: auto;
	width:calc(100% /4);
	padding:15px 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
	
.like-this__filter dd:before{
	display:none;
}


.like-this__filter dd:after{
	display:none;
}
	

#home .recommend ul {
	justify-content:space-between;
	padding:20px 20px 0 20px;
}
	
#home .recommend ul li{
	width:48%;
}
#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;
}

#home .recommend a {
	/* padding: 0 50px 0 10px; */
	height:auto;
	width:100%;
}
#home .recommend .kosmo {
	background:#141e3a;
	border-radius:10px;
	text-align:center;
	vertical-align:middle;
	display:flex;
	justify-content:center;
	align-items:center;
	max-height:56px;
}
#home .recommend .kosmo a img{
	vertical-align:middle;
	border-radius:10px;
}

	/* mini
------------------------------------------------------------------- */
.mini {
  margin-top: 30px;
}
.mini h2 {
  font-size: 2.5em;}


.mini ul {
  justify-content:space-between;
	padding:20px 20px 0;
	max-width:auto;
}
.mini li {
  padding: 0 10px;
  width: -webkit-calc(100% / 2);
  width: calc(95% / 2);
	border:1px solid #d2d2d2;
	margin-bottom:20px;
}
.mini li a {
  display: block;
  min-height: 150px;
  font-size: 1.6em;
  padding:10px 0;
}
.mini li:first-child:hover,
.mini li:hover + li,
.mini li + li:hover {
	border:1px solid #d2d2d2;
}
	
}