@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-news
------------------------------------------------------------------- */
.main-news{
  display: flex;
  align-items:stretch;
  justify-content: space-between;
  margin: 0 auto;
  max-width:1410px;
}
.main-visual {
  width:50%;
}
.news-list {
  width: 50%;
}

/* main-visual
------------------------------------------------------------------- */
.main-visual img{ 
　display:block;
  width:100%;
  height:auto;
}


/* home-h2
------------------------------------------------------------------- */

h2.home-h2{
  position:relative;}

h2.home-h2 > span{
	display:inline-block;
	font-size:2.6em;
	font-weight:bold;
	letter-spacing:0.6em;
	color:#333333;
	position:relative;
}
h2.home-h2 > span:before{
	position:absolute;
	content:'';
	bottom:0;
	left:0;
	width:calc(100% - 0.4em);
	border-bottom: 3px solid;
    border-image: linear-gradient(90deg,rgba(253, 208, 0, 1) 0%, rgba(239, 88, 42, 1) 75%);
    border-image-slice: 1;
}

h2.home-h2 span::first-letter,
h2.home-h2 span.orange{
	color:#ef582a;
}

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

.news-list {
  padding:0px 20px 20px 30px;
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
}

.news-list h2{
margin-bottom:20px;
text-align:center;}

.news-list h2::after{
	position:absolute;
	content:'けんぽからのお知らせ';
	bottom:-25px;
	font-size:1.1em;
	font-weight:bold;
	left:-0.8em;
	right:0;
	margin: auto;
	letter-spacing:0.1em;
	text-indent: 0.1em;
}

.news-list--link{
  position:absolute;
  display:inline-block;
  right:0px;
  top:20px;
  background:#ef582a;
  color:#fff;
  text-decoration:none;
  font-size:1.5em;
  padding:0px 20px;
}

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


.news-list__inner{
  flex:1;
  min-height:0;
}

.news-list li {
  display:block;
  font-size: 1.6em;
  line-height: 1.6;
  color:#3a3a3a;
  position:relative;
  margin:10px 0;
	padding-top:10px;
}

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

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

.news-list__scroll-bar{
  height: min(27.9vw, 21rem);
  overflow-y: auto;
}

/* like-links
------------------------------------------------------------------- */
.likerecommend-links{
  display: flex;
  justify-content: space-between;
  margin: 10px auto 0;
  padding:0 20px 50px;
  max-width:1370px;
}

.likerecommend{
	width:77%;
}

.links{
	width:19.55%;
}


/* Links */
.link-list li+ li {
  margin-top: 10px;
}
.link-list a {
  display: block;
  display: flex;
  transition: 0.1s;
}
.link-list a:hover {
	opacity:.7;
}
.link-list a> img {
  width: 100%;
  height: auto;
}

/* Like This（at a time like this）
------------------------------------------------------------------- */
.like-this__inner{
	text-align:center;
}

.like-this__inner h2{
margin-bottom:20px;}

.like-this__filter{
}
.like-this__filter dl {
  display: flex;
  margin:0 auto;
	max-width:1000px;
}
.like-this__filter dd {
	margin:0 auto;
  width:calc( (100% - 4% ) / 4 );
  padding:6px 5px;
  background:#fff;
  font-size: 1.6em;
  text-align: center;
  cursor: pointer;
  color: #ef582a;
  font-weight:bold;
  border-radius:50vw;
  border:1px solid #ef582a;
  /*transition: 0.3s;*/
}

.like-this__filter dd:hover,
.like-this__filter dd.active{
	background:#ef582a;
	color:#fff;
}

.like-this__btn {
  clear: both;
  display: flex;
  justify-content:center;
  flex-flow: row wrap;
  align-items: stretch;
  max-width: 1380px;
  margin:0 auto;
  padding:15px 0px 50px 20px;
}
.like-this__btn li {
  width: -webkit-calc(24.02% - 46px);
  width: calc(21.96% - 40px);
}


.like-this li:first-child,
.like-this li + li {
  margin:0px 20px 20px 0;
}

.like-this li a {
	border:none;
}
.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 h2{
margin-bottom:50px;
text-align:center;}

#home .recommend ul {
	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: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: auto;
	position:relative;
}

#home .recommend li {
	width: 32.0%;
}
#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 li:nth-child(n + 3) {
	margin-bottom: 0;
}
#home .recommend a {
	display: table-cell;
	padding: 0 30px 0 90px;
	height: 105px;
	width: 32.0%;
	border-radius: 50vw;
	font-size: 1.5em;
	font-weight: bold;
	color: #000000;
	text-decoration: none; 
	line-height: 1.3;
	vertical-align: middle;
	background-color:#fff;
	background-repeat:no-repeat;
	background-position:left 20px center;
	background-size:74px;
  -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);
  transition: 0.3s;
  border:2px solid #fff;
}


#home .recommend a:hover {
  -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);
  border:2px solid #fd9c50;
	color:#ef582a;
}

.recommend a span:not(.recommend-text) {
	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);
}

@media screen and (max-width: 767px) {
/* main-news
------------------------------------------------------------------- */
.main-news{
  display: block;
  max-width:auto;
  width:100%;
}

  .main-visual {
    width: 100%;
    height: 180px;
    overflow: hidden;
  }

  .main-visual__top {
    width: 100%;
    height: 180px;
  }

  .main-visual__top .slick-list {
    height: 180px !important;
  }

  .main-visual__top .slick-track {
    height: 180px;
  }

  .main-visual__top .slick-slide {
    height: 180px;
    overflow: hidden;
  }

  .main-visual__top .slick-slide a {
    display: block;
    width: 100%;
    height: 180px;
    overflow: hidden;
  }

  .main-visual__top .slick-slide img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: center;
  }
	
 /*search
------------------------------------------------------------------- */
#home .header__search{
	display:block!important;

	margin:0 auto 0;
	padding:0;
	background:#f8f8f8;
	padding:10px 5px 10px;
}
#home .header__search .search__inner {
	margin: 0 auto;
    width: auto;
    text-align: center;
  }
#home .header__search form {
	display:block!important;
	width:auto;
	height:auto;
}

	
 #home .header__search input[type="text"] {

    display:inline-block;
    font-size: 1.5em;
	 margin-right:5px;
	border:1px solid #dfdfdf;





	 border-radius:100vw;
	 padding:10px;
	 width:60%;
	 height:25px;
	 
  }

#home .header__search input[type="submit"] {
  display:inline-block;
	margin-top:0;
  top:0;
  right:0;
	height:25px;
  width:90px;
  aspect-ratio:inherit;
  background-image:none;
  background: #ef582a;
  -webkit-border-radius: 100vh;
  border-radius: 100vh;
  border: none;
  font-size: 1.4em;
  font-family: 'Trebuchet MS', "ヒラギノ丸ゴ ProN W4","ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic ProN","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO", Meiryo, Arial, sans-serif;
  font-weight: bold;
  color: #fff;
  text-indent:0!important;
  position:relative;
  padding: 2px 2px;
}
/* home-h2
------------------------------------------------------------------- */


h2.home-h2 > span{
	font-size:2.3em;
	letter-spacing:0.3em;
	padding-left:0.15em;
}
h2.home-h2 > span:before{
	width:calc(100% - 0.15em);
}

	

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

.news-links{
	display:block;
	margin:0px;
	padding:0;
}
	
  .news-links__inner {
	width:100%;
    display: block;
    justify-content: flex-start;
    margin: 0;
    padding:0px 0 0 0;
    max-width: none;
  }

	
  /* News */
  .news-list {
    width: 100%;
	  background:#fff;
	  padding:0px;
  }
  .news-list__header {
    padding:0px;
	margin:0;
  }

.news-list h2{
margin-left:10px;
margin-bottom:30px;}


.news-list h2 > span{
	font-size:1.8em;
}
h2.home-h2 > span:before{
	width:calc(100% - 0.15em);
}
	
.news-list h2::after{
	left:-0.15em;
}


.news-list--link{
  font-size:1.2em;
  padding:0px 20px;
  top:15px;}

.news-list__inner {
  padding:0;
  margin:0;
  border-top:1px solid #d5d5d5;
}
	
  .news-list li {
	 margin:0;
    display: block;
    /*font-size: 1.4em;*/
    font-size: 1.2em;
    padding:0px 10px 5px 10px;
  }

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

  .news-list li:nth-child(1){
	  padding-top:0.5em;
	  border-top:0;
  }
	
  .news-list li + li {
	  padding-top:0.5em ;
	  border-top:1px solid #d5d5d5;
  }
  .news-list li:nth-child(odd){
	  background:#f8f8f8;
  }
.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: 24em;*/
  height: 18.5em;
}

/* like-links
------------------------------------------------------------------- */
.likerecommend-links{
  display: flex;
  flex-wrap:wrap;
  margin: 20px auto 0;
  padding:0;
  max-width:auto;
}

.likerecommend{
	width:100%;
	/*order:1;*/
}

.links{
	width:100%;
	/*order:0;*/
}
	

  /* links */
  .links {
	  padding:0 15px;
    width: auto;
	  max-width:100%;
	  background:#fff;
  }
.link-list{
	margin-top:0!important;
	display:flex;
	justify-content:start;
	flex-wrap:wrap;
	align-items:stretch;
	padding-bottom:30px;
}
	
.link-list li{
	border:1px solid #e0e0e0;
	width:49%;
}
	.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:0;
  background:#f5f5f5;
}
	
.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;
    text-align: center;
	padding:5px 10px 20px;
  }
.like-this__filter dl{
	width:90%;
}
.like-this__filter dd{
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:1.0em;
	line-height:1.2;
	width: auto;
	width:calc(94% /4);
	padding:5px 10px;
}


#home .recommend h2{
margin:20px 0 0;}
	
#home .recommend ul {
	padding:20px 10px 0 10px;
	justify-content:stretch;
}
	
#home .recommend ul li{
}
#home .recommend ul li:first-child{
	margin-top:10px!important;
}

#home .recommend ul li + li{
	margin-top:10px;
}
	
#home .recommend a {
    display: flex;
    align-items: center;
    padding: 0 30px 0 5px;
    width: 100%;
	height:100px;
    background-position: right 2px center;
    background-size: 30px;
    font-size: 1.1em;
    border-radius:15px;
}

#home .recommend a .recommend-text {
    display: block;
    font-size: 1.1em;
}

#home .recommend a .recommend-text > span {
    display: block;
}
	
}