/* もっと見る系アイテム */
.moreItems{
  margin-top: 80px;
}
.moreItems__item + .moreItems__item{
  margin-top: 80px;
}
@media screen and (max-width: 1250px){
  .moreItems{
    margin-bottom: 64px;
  }
}
/* 機能ページ用グリッド */
.funcGrid{
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: -10px;
}
.funcGrid__item{
  display: flex;
  padding: 10px;
}
.funcGrid__item--col3{
  width: 25%;
}
.funcGrid__item--col4{
  width: 33.333%;
}
.funcGrid__item--col6{
  width: 50%;
}
.funcGrid__inner{
  display: block;
  width: 100%;
}
@media screen and (max-width: 1250px){
  .funcGrid__item--resLgCol6{
    width: 50%;
  }
}
@media screen and (max-width: 768px){
  .funcGrid__item--resMdCol6{
    width: 50%;
  }
}
@media screen and (max-width: 599px){
  .funcGrid__item--resSmCol12{
    width: 100%;
  }
}

/* この機能をみています */
#leaf_bg .moreFunc{
  display: block;
  color: inherit;
  padding: 20px;
  background: #fff;
  box-shadow: 2px 2px 6px #aaa;
  outline: 4px solid rgba(26, 129, 146, 0);
  transition: .7s outline;
}
#leaf_bg .moreFunc:hover{
  outline: 4px solid rgba(26, 129, 146, 1);
}
#leaf_bg .moreItems--option .moreFunc{
  outline: 4px solid rgba(8, 138, 75, 0);
}
#leaf_bg .moreItems--option .moreFunc:hover{
  outline: 4px solid rgba(8, 138, 75, 1);
}
.moreFunc__ico{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  line-height: 0;
}
.moreFunc__ico img{
  max-width: 100%;
  height: auto;
}
.moreFunc__ico + .moreFunc__lead{
  margin-top: 16px;
}
#leaf_bg .moreFunc__lead{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(2em * 1.6);
  text-align: center;
  font-weight: 500;
  font-size: 15px;
}
.moreFunc__lead + .moreFunc__ttl{
  margin-top: 12px;
}
.moreFunc__ttl{
  text-align: center;
  font-size: 15px;
}
@media screen and (max-width: 768px){
  .moreFunc__lead br{
    display: none;
  }
}
/* こんな記事も読んでいます */
#leaf_bg .moreEntry{
  display: flex;
  align-items: center;
  color: inherit;
  padding: 16px;
  background: #fff;
  box-shadow: 2px 2px 6px #aaa;
  transition: .7s background;
}
#leaf_bg .moreEntry:hover{
  background: rgba(26, 129, 146, .2);
}
#leaf_bg .moreItems--option .moreEntry:hover{
  background: rgba(8, 138, 75, .2);
}
.moreEntry__ttl{
  position: relative;
  padding-left: 56px;
  font-size: 15px;
  transition: .7s color;
}
.moreEntry:hover .moreEntry__ttl{
  color: #1a8192;
}
.moreItems--option .moreEntry:hover .moreEntry__ttl{
  color: #088a4b;
}
.moreEntry__ttl::before{
  content: "\f02d";
  position: absolute;
  top: 50%;
  left: 0;
  font-size: 40px;
  line-height: 1;
  color: #1a8192;
  font-family: FontAwesome;  
  transform: translateY(-50%);
}
.moreItems--option .moreEntry__ttl::before{
  color: #088a4b;
}
.moreEntry__ttl-func::before{
  content: "\f02d";
  position: absolute;
  top: 50%;
  left: 0;
  font-size: 40px;
  line-height: 1;
  color: #1A8192;
  font-family: FontAwesome;  
  transform: translateY(-50%);
}
.moreItems--option .moreEntry__ttl-func::before{
  color: #088a4b;
}
@media screen and (max-width: 768px){
  .moreEntry__ttl br{
    display: none;
  }
  .moreEntry__ttl-func br{
    display: none;
  }
}


/* こんなオプションもありますラッパー */
.moreOptionWrap{}
.moreOptionWrap__body{}
.moreOptionWrap__footer{
  margin-top: 36px;
}
.moreOptionWrap__btns{
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  margin: -16px;
}
.moreOptionWrap__btn{
  width: 50%;
  padding: 16px;
}
@media screen and (max-width:768px){
  .moreOptionWrap__btns{
    margin: -8px;
  }
  .moreOptionWrap__btn{
    width: 100%;
    padding: 8px;
  }
}
/* こんなオプションもあります */
#leaf_bg .moreOption{
  padding: 12px 12px 16px;
  background: #fff;
  box-shadow: 2px 2px 6px #aaa;
}
.moreOption__ttl{
  margin-bottom: 12px;
  padding: 4px 0;
  text-align: center;
  line-height: 1;
  font-size: 18px;
  color: #fff;
  background: #1a8192;
}
.moreItems--option .moreOption__ttl{
  background: #088a4b;
}
.moreOption__list{}
.moreOption__item + .moreOption__item{
  margin-top: 12px;
}
#leaf_bg .moreOption__link{
  position: relative;
  display: block;
  padding-left: 20px;
  color: inherit;
  line-height: 1.4;
  font-size: 14px;
  transition: .4s transform, .4s opacity;
}
.moreOption__link:hover{
  opacity: .6;
  transform: translateX(10px);
}
.moreOption__link--noLink:hover{
  opacity: 1;
  transform: none;
}
.moreOption__link::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 8px;
  height: 8px;
  margin: auto 0;
  border: 1px solid;
  border-style: solid solid none none;
  transform: rotate(45deg);
}
.moreOption__link--noLink::before{
  left: 2px;
  border-style: solid;
  background: #333;
  transform: none;
}
.moreOption__sub{
  font-size: 12px;
}

/* こんなオプションもありますボタン */
.moreOptionBtn{
  display: flex;
  align-items: stretch;
  font-size: 16px;
  transition: .3s opacity;
}
.moreOptionBtn:hover{
  opacity: .6;
}
.moreOptionBtn::before{
  content: "";
  width: 0;
  height: 3.5em;
}
.moreOptionBtn__target{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 2px solid;
  border-radius: 12px;
}
.moreOptionBtn__inner{
  position: relative;
  padding-right: 48px;
}
.moreOptionBtn__inner::before{
  content: "\f061";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: auto 0;
  border: 2px solid;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  font-weight: normal;
  font-family: FontAwesome;
}
#leaf_bg .moreOptionBtn--main .moreOptionBtn__target{
  border-color: #1a8192;
  color: #fff;
  background: #1a8192;
}
#leaf_bg .moreItems--option .moreOptionBtn--main .moreOptionBtn__target{
  border-color: #088a4b;
  background: #088a4b;
}
#leaf_bg .moreOptionBtn--sub .moreOptionBtn__target{
  color: #1a8192;
  background: #fff;
}
#leaf_bg .moreItems--option .moreOptionBtn--sub .moreOptionBtn__target{
  color: #088a4b;
}
.moreOptionBtn--main .moreOptionBtn__inner::before{
  color: #1a8192;
  background: #fff;
  border-color: #fff;
}
.moreItems--option .moreOptionBtn--main .moreOptionBtn__inner::before{
  color: #088a4b;
}
@media screen and (max-width: 1250px){
  .moreOptionBtn{
    font-size: 14px;
  }
}
@media screen and (max-width: 599px){
  .moreOptionBtn__inner{
    padding-right: 32px;
  }
}