@charset "utf-8";

/* ===============================
COLUMN SINGLE
=============================== */

.column-single{
  padding:120px 0 0;
}

.column-single__body{
  width:100%;
  max-width:840px;
  margin:0 auto;
  padding-top:40px;
}

/* ===============================
サムネイル
=============================== */

.column-single .column-single__thumbnail{
  margin-bottom:32px;
}

.column-single .column-single__thumbnail img{
  width:100%;
  display:block;
  border-radius:52px;
}

/* ===============================
日付
=============================== */

.column-single .column-single__date p{
  font-family:"Noto Sans JP", sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:100%;
  letter-spacing:0;
  color:#484848;
  margin-bottom:20px;
}

/* ===============================
タイトル
=============================== */

.column-single .column-single__title{
  font-family:"Noto Sans JP", sans-serif;
  font-weight:700;
  font-size:36px;
  line-height:150%;
  letter-spacing:0;
  color:#0186ED;
  margin-bottom:40px;
}

/* ===============================
目次
=============================== */

.column-single .column-single__toc{
  margin-bottom:48px;
}

.column-single .column-single__toc-title{
  font-family:"Noto Sans JP", sans-serif;
  font-weight:700;
  font-size:22px;
  line-height:100%;
  letter-spacing:0;
  color:#0186ED;
  padding-bottom:14px;
  border-bottom:2px solid #0186ED;
}

.column-single .column-single__toc-list{
  margin:20px 0 0;
  padding-left:1.4em;
}

.column-single .column-single__toc-item + .column-single__toc-item{
  margin-top:10px;
}

.column-single .column-single__toc-item a{
  font-family:"Noto Sans JP", sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:160%;
  letter-spacing:0;
  color:#0186ED;
  text-decoration:none;
}

.column-single .column-single__toc-item a:hover{
  opacity:0.7;
}

/* ===============================
本文
=============================== */

.column-single .column-single__content{
  color:#484848;
}

.column-single .column-single__content h2{
  width:100%;
  border-left:5px solid #0186ED;
  padding:6px 16px;
  background-color:#EEF8FF;
  font-family:"Noto Sans JP", sans-serif;
  font-weight:700;
  font-size:32px;
  line-height:150%;
  letter-spacing:0;
  color:#484848;
  margin:56px 0 24px;
}

.column-single .column-single__content h3{
  width:100%;
  border-left:5px solid #0186ED;
  padding:0 16px;
  font-family:"Noto Sans JP", sans-serif;
  font-weight:700;
  font-size:24px;
  line-height:150%;
  letter-spacing:0;
  color:#484848;
  margin:40px 0 20px;
}

.column-single .column-single__content p{
  font-family:"Noto Sans JP", sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:160%;
  letter-spacing:0;
  color:#484848;
  margin:16px 0;
}

.column-single .column-single__content ul,
.column-single .column-single__content ol{
  margin:16px 0;
  padding-left:1.4em;
  list-style:disc;
}

.column-single .column-single__content li{
  font-family:"Noto Sans JP", sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:160%;
  letter-spacing:0;
  color:#484848;
  margin:6px 0;
}

.column-single .column-single__content ul li::marker{
  color:#0186ED;
}

/* ===============================
ペジネーション
=============================== */

.column-single .column-single__pagination{
  margin-top:60px;
  display:grid;
  grid-template-columns:120px auto 120px;
  align-items:center;
  justify-content:center;
  column-gap:20px;
}

.column-single .column-single__pagination-side{
  display:flex;
  align-items:center;
  gap:10px;
}

.column-single .column-single__pagination-side--left{
  justify-content:flex-end;
}

.column-single .column-single__pagination-side--right{
  justify-content:flex-start;
}

.column-single .column-single__pagination-center{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.column-single .column-single__pagination .arrow_p,
.column-single .column-single__pagination .arrow_n{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  text-decoration:none;
  font-weight:500;
  font-size:27px;
}

.column-single .column-single__pagination .is-placeholder{
  visibility:hidden;
  pointer-events:none;
}

.column-single .column-single__pagination a,
.column-single .column-single__pagination span{
  color:#0186ED;
  font-family:"Karla";
}

.column-single .column-single__pagination-center a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 46px;
  border-radius:100px;
  background:#0186ED;
  color:#FFFFFF;
  font-family:"Karla";
  font-weight:600;
  font-size:20px;
  line-height:100%;
  letter-spacing:0.1em;
  border:2px solid #0186ED;
  text-decoration:none;
  transition:all 0.3s ease-out;
}

.column-single .column-single__pagination-center a:hover{
  background:#FFFFFF;
  color:#0186ED;
  border:2px solid #0186ED;
}

.column-single .column-single__pagination .prev,
.column-single .column-single__pagination .next{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 5px;
  font-family:"Karla";
  font-weight:500;
  font-size:20px;
  line-height:100%;
  color:#0186ED;
  text-decoration:none;
}

.column-single .column-single__pagination .prev:hover,
.column-single .column-single__pagination .next:hover{
  opacity:0.7;
}

/* ===============================
CONTACT
=============================== */

.contact-banner{
  margin-top:80px;
  background:#10559b;
  transition:all 0.3s ease-out;
}

.contact-banner:hover{
  background:#484848;
}

.contact-banner__inner{
  position:relative;
}

.contact-img-wrap{
  position:relative;
}

.contact-img,
.contact-img--hover{
  width:100%;
  display:block;
}

.contact-img{
  position:relative;
  z-index:1;
  transition:opacity 0.3s ease-out;
}

.contact-img--hover{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:2;
  opacity:0;
  transition:opacity 0.3s ease-out;
}

.contact-banner:hover .contact-img{
  opacity:1;
}

.contact-banner:hover .contact-img--hover{
  opacity:1;
}

/* ===============================
SP
=============================== */

@media(max-width:768px){

  .column-single{
    padding:80px 0 0;
  }

  .column-single__body{
    padding-top:0;
  }

  .column-single .column-single__thumbnail{
    margin-bottom:24px;
  }

  .column-single .column-single__thumbnail img{
    border-radius:32px;
  }

  .column-single .column-single__date{
    font-size:13px;
    margin-bottom:16px;
  }

  .column-single .column-single__title{
    font-size:24px;
    margin-bottom:32px;
  }

  .column-single .column-single__toc{
    margin-bottom:40px;
  }

  .column-single .column-single__toc-title{
    font-size:18px;
  }

  .column-single .column-single__toc-item a{
    font-size:15px;
  }

  .column-single .column-single__content h2{
    font-size:22px;
    margin:40px 0 18px;
  }

  .column-single .column-single__content h3{
    font-size:18px;
    margin:28px 0 16px;
  }

  .column-single .column-single__content p{
    font-size:16px;
  }

  .column-single .column-single__content li{
    font-size:16px;
  }

  .column-single .column-single__pagination{
    grid-template-columns:90px auto 90px;
    column-gap:12px;
  }

  .column-single .column-single__pagination .prev,
  .column-single .column-single__pagination .next{
    font-size:16px;
  }

  .contact-banner__inner{
    padding:0;
  }
    
}