@charset "utf-8";

body{
  font-family: 'Noto Sans JP',Hiragino Sans,'ヒラギノ角ゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo', 'メイリオ', Verdana,'ＭＳ Ｐゴシック',sans-serif;
}
#wrapper{
  margin:auto;
  color:#333;
}

.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 30px;
  box-sizing:border-box;
  width:1200px;
  margin:auto;
}

.tko__logosocial{
 width:120px;
 height:38px;
}

.header__logo{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.skh__logo{
 width:118px;
 height:50px;
}

.header__ad{
  font-size:20px;
  margin-left:30px;
}

.top-slider__heading{
  background:#EA433C;
  color:#fff;
  text-align:center;
  font-size:40px;
  padding:10px 0;
}
.top-slider__heading h1{
  font-size:40px;
}
.top-slider__icon{
  width:640px;
  height:360px;
  overflow:hidden;
}
.top-slider__title{
  color:#fff;
  text-align:center;
  text-decoration:none;
  font-size:20px;
  font-weight:bold;
  padding:10px 0;
}
.top-slider__link:hover{
  text-decoration:none;
}
.top-slider__title.red{
  background:#EA433C;
}
.top-slider__title.orange{
  background:#EFA823;
}
.top-slider__title.green{
  background:#44A06B;
}
.top-slider__title.blue{
  background:#4183D3;
}

.top-slider__item .top-slider__icon{
  opacity:0.5;
}
.top-slider__item.slick-current .top-slider__icon{
  opacity:1;
}

.top-slider .slick-arrow{
  -webkit-appearance: none;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 38%;
    z-index: 600;
    text-indent: 150%;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0;
    display: block;
    cursor: pointer;
    outline: none;
    border-style: none;
    background:transparent;
}
.top-slider .slick-next::after {
    content: "";
    display: block;
    border-style:solid;
    border-color:transparent transparent transparent #fff;
    border-width:24px;
    position: absolute;
    top:0;
    left:0;
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.5));
}
.top-slider .slick-prev::after {
    content: "";
    display: block;
    border-style:solid;
    border-color:transparent #fff transparent transparent;
    border-width:24px;
    position: absolute;
    top:0;
    left:0;
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.5));
}
.top-slider .slick-next {
    right: calc(100% / 2 - 420px);
}
.top-slider .slick-prev {
    left: calc(100% / 2 - 420px);
}

.latest{
  width:1100px;
  margin:auto;
}

.latest__summary{
  width:630px;
  margin:60px auto;
}
.latest__summary p{
  font-size:15px;
  line-height:27px;
}

.latest__summary.--block {
  width: 100%;
  text-align: left;
  font-weight: bold;
  font-size: 22px;
  margin: 60px 0 20px;
}

.latest__list{
  display:flex;
  flex-wrap:wrap;
}

.latest__article{
  width:320px;
  margin:0 60px 60px 0;
  box-sizing:border-box;
}
.latest__article:nth-child(3n){
  margin-right:0;
}

.latest__link{
  padding:10px;
  display:block;
  position:relative;
  z-index:1;
}
.latest__link::after{
  content:"";
  display:block;
  border-style:solid;
  border-color:transparent #000 transparent transparent;
  border-width:100px;
  position:absolute;
  top: -100px;
  left: -100px;
  transform: rotate(45deg);
}
.green .latest__link::after{
  border-color:transparent #44A06B transparent transparent;
}
.red .latest__link::after{
  border-color:transparent #EA433C transparent transparent;
}
.orange .latest__link::after{
  border-color:transparent #EFA823 transparent transparent;
}
.blue .latest__link::after{
  border-color:transparent #4183D3 transparent transparent;
}
.latest__thumb{
  width:300px;
  overflow:hidden;
  padding-top:66%;
  position:relative;
  z-index:2;
}
.latest__thumb img{
  width:100%;
  position:absolute;
  top:0;
  left:0;
}
.latest__title{
 width:300px;
 font-weight:bold;
 font-size:18px;
 z-index:2;
}

.contents-wrapper,
.contents-wrapper.red{
  background:#EA433C;
}
.contents-wrapper.green{
  background:#44A06B;
}
.contents-wrapper.blue{
  background:#4183D3;
}
.contents-wrapper.orange{
  background:#EFA823;
}

.contents{
 width:1100px;
 margin:auto;
 border-right:solid 20px #44A06B;
 position:relative;
}
.contents::before{
  content:"";
  display:block;
  width:20px;
  height:100%;
  background:#4183D3;
  position:absolute;
  top:0;
  right:-40px;
}
.contents::after{
  content:"";
  display:block;
  width:20px;
  height:100%;
  background:#EFA823;
  position:absolute;
  top:0;
  right:-60px;
}

.contents.red{border-right:solid 20px #44A06B;}
.contents.red::before{background:#4183D3;}
.contents.red::after{background:#EFA823;}

.contents.green{border-right:solid 20px #4183D3;}
.contents.green::before{background:#EFA823;}
.contents.green::after{background:#EA433C;}

.contents.blue{border-right:solid 20px #EFA823;}
.contents.blue::before{background:#EA433C;}
.contents.blue::after{background:#44A06B;}

.contents.orange{border-right:solid 20px #EA433C;}
.contents.orange::before{background:#44A06B;}
.contents.orange::after{background:#4183D3;}

.signage{
  padding:37px 40px 140px;
  color:#fff;
}
.signage h1{
  font-size:36px;
  margin-bottom:28px;
}

#article-body{
  border-style:none;
}
#article-body-inner{
  background:#fff;
  padding:100px;
  box-sizing:border-box;
  margin:auto;
  position:relative;
}

#article-body .article-body-head{
  position: absolute;
  top: -140px;
  left: 37px;
  width:1020px;
  box-sizing:border-box;
  display:flex;
  justify-content:space-between;
  max-height: 480px;
  overflow: hidden;
}
#article-body-inner .article-body-head__title{
  width:375px;
}
#article-body-inner .article-body-head__summary{
 margin-top:60px;
}
#article-body-inner .article-body-head__summary p{
  font-size:16px;
  font-weight:bold;
  color:#333;
}
#article-body-inner .article-body-head__date{
  color:#333;
  font-size:14px;
}
#article-body-inner .article-body-head__sponsored{
  font-size:16px;
  font-weight:bold;
  color:#fff;
  margin-top:20px
}
#article-body-inner .article-body-head__author{
  color:#333;
  font-size:12px;
  margin-top:10px;
}
#article-body-inner .article-body-head__heading{
 border-style:none;
 font-size:24px;
 color:#fff;
 margin:0;
 padding:0;
 min-height:70px;
}
#article-body-inner .article-body-head__image{
 width:600px;
}
#article-body-inner .article-body-head__image img{
 width:100%;
}
#article-body-inner .article-body-head__caption{
  font-size: 13px;
  color: #676b6c;
  margin-top:15px;
  word-wrap: break-word;
}

#article-body .article-body-bottom{
 margin-top:200px;
}

#article-body .article-body-bottom h2{
  font-size:28px;
  border-top:none;
  border-left:solid 6px #44A06B;
  position:relative;
  padding:0 0 0 40px;
  margin:60px auto;
  width:700px;
}
#article-body .article-body-bottom h2::before{
  content:"";
  display:block;
  width:6px;
  height:100%;
  background:#4183D3;
  position:absolute;
  top:0;
  left:6px;
}
#article-body .article-body-bottom h2::after{
  content:"";
  display:block;
  width:6px;
  height:100%;
  background:#EFA823;
  position:absolute;
  top:0;
  left:18px;
}

#article-body.red .article-body-bottom h2{border-left:solid 6px #44A06B;}
#article-body.red .article-body-bottom h2::before{background:#4183D3;}
#article-body.red .article-body-bottom h2::after{background:#EFA823;}

#article-body.green .article-body-bottom h2{border-left:solid 6px #4183D3;}
#article-body.green .article-body-bottom h2::before{background:#EFA823;}
#article-body.green .article-body-bottom h2::after{background:#EA433C;}

#article-body.blue .article-body-bottom h2{border-left:solid 6px #EFA823;}
#article-body.blue .article-body-bottom h2::before{background:#EA433C;}
#article-body.blue .article-body-bottom h2::after{background:#44A06B;}

#article-body.orange .article-body-bottom h2{border-left:solid 6px #EA433C;}
#article-body.orange .article-body-bottom h2::before{background:#44A06B;}
#article-body.orange .article-body-bottom h2::after{background:#4183D3;}

#article-body .article-body-bottom p{
  width:672px;
  margin:0 auto 30px;
  line-height:29px;
}

#article-body .article-body-bottom .caption{
 font-size:13px;
 margin-top:15px;
}
#article-body .article-body-bottom .figure-center .caption{
 text-align:center;
}

#article-body .article-body-bottom .figure-center,
#article-body .article-body-bottom .figure-right,
#article-body .article-body-bottom .figure-left{
margin-bottom:60px;
}


#footer{
 margin-top:0;
}