/* archive */
.column-title-inner { background: #1FA3AD; }
.column-title-inner h2 { color: #fff; font-size: 36px; font-weight: 900; text-align: center; padding: 20px 0; margin-bottom: 48px; }
.article { background: #fff; border:2px solid #3EA9B3; border-top: 8px solid #3EA9B3; display: flex; padding: 32px 32px; margin-bottom: 30px; }
.article .article-img {width:40%;}
.article figure {margin: 0 8% 0 0;}
/* .article img { width: 320px; } */
.article-info { width: 64%; display: flex; flex-direction: column; }
.article-ttl { font-size: 24px; font-weight: bold; line-height: 1.5; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 2px dotted #EBA224;}
.articleBtn { color: #fff; width: 240px; height: 62px; background: url(../img/column/btn_bg.png) no-repeat center / contain, url(../img/column/btn_bg_hover.png) no-repeat center / 0;  text-align: center; display: inline-block;padding: 17px 0; box-sizing: border-box; margin-left: auto;}
.articleBtn:hover {background-size: 0, contain;}
@media only screen and (max-width: 768px) {
  .column-title-inner h2 { font-size: 28px; margin-bottom: 24px;}
  .column-container .inner { width: 90%; }
  .article {padding: 3%;}
  .article-ttl { font-size: 20px; }
}
@media only screen and (max-width: 568px) {
  .column-title-inner h2 { font-size: 20px; padding: 10px 0; margin-bottom: 20px;}
  .article {flex-direction: column; padding: 5%;}
  .article .article-img {width: 100%; margin-bottom: 0;}
  .article figure {margin: 0 0 3% 0;}
  .article-info {width: 100%;}
  .article-info p {margin-bottom: 2%;}
  .articleBtn { font-size: 16px; width: 300px; height: 70px; background-size: cover; padding: 21px 0; margin:0 auto;}
}


/* single-page タイトル部分 */
#second-visualcontents.column_title h1 {width: 100%; max-width: 100%;}
#second-visualcontents.column_title h1::before {background: none;}
#second-visualcontents.column_title h1 span { display: block; }
#second-visualcontents.column_title h1 span.bg_band {width:375px; margin-bottom: 32px;}
#second-visualcontents.column_title h1 span.bg_band::before {content: ""; position: absolute; left: 0; top: -15px; transform: skew(-25deg,0deg); width: 375px; height: 64px; border: none; background: #3ea9b3bd; z-index: -1;}
#second-visualcontents.column_title h1 span.under_title {font-size: 18px; color: #333; text-align: left;}
#second-visualcontents::before{background: url('../img/column/header-image.png') center center no-repeat;background-size: contain;}
@media only screen and (max-width: 568px) {
  #second-visualcontents.column_title h1 {max-width: 235px; top:55%;}
  #second-visualcontents.column_title h1 span.bg_band {width:80%; margin-bottom: 16px;}
  #second-visualcontents.column_title h1 span.bg_band::before {width: 80%; height: 38px;top: -8px;}
  #second-visualcontents.column_title h1 span.under_title {font-size: 14px; line-height: 1.3;}
}
@media only screen and (max-width: 400px) {
  #second-visualcontents.column_title h1 {max-width: 200px;}
}

/* コラム本文 */
.column_content_box { background: #fff; box-shadow: 0px 3px 6px rgba(167, 168, 168, 0.3); padding: 26px 34px 45px; border-top: 10px solid #3EA9B3; margin-bottom: 20px;}
.column_content_box .article-date { margin-bottom: 0;}
.article-date::before {content: ''; background: url(../img/column/icon-pen.svg) center no-repeat; background-size: contain; display: inline-block; width: 15px; height: 15px; padding-right: 10px;}
.column_content_box h2 { font-weight: bold; font-size: 26px; border-bottom: 2px dotted #EBA224; padding: 12px 0;margin-bottom: 24px;}
.column_content_box h3 { font-weight: bold; font-size: 22px; background-image: url(../img/dot_05.png); padding: 12px; margin: 30px 0 34px; border-top: 8px solid #3EA9B3;}
.column_content_box h3::before {padding-top: 70px; margin-top: -70px;}
.column_content_box h4 {font-weight: bold; font-size: 18px; color: #1FA3AD; background-image: url(../img/dot_02.png); padding: 10px ; margin-bottom: 16px;}
.column_content_box img {max-width: 560px; display: block; margin: 0 auto 30px; }
.column_content_box p {margin-bottom: 20px; line-height: 1.8;}
.column_content_box strong {font-weight: bold;}
@media only screen and (max-width: 568px) {
  .column_content_box {padding: 17px 14px;}
  .column_content_box h2 {font-size: 20px; padding: 4px 0 8px; margin-bottom: 16px;}
  .column_content_box h3 {font-size: 18px; margin:20px 0 20px;}
  .column_content_box h4 {font-size: 16px;}
  .column_content_box img { width: 85%; margin-bottom: 14px;}
  .column_content_box p {margin-bottom: 10px;}
}

/* 目次 */
.toc-wrapper {border:2px solid #3E95CC; background: url(../img/bg-note.png);}
.toc-title {background: #3E95CC; text-align: center; color: #fff; padding: 7px 0;}
.toc-title span {font-size: 20px; font-weight: bold;}
.toc-wrapper ol { display: flex; flex-wrap: wrap; padding: 16px 20px; counter-reset: number;}
.toc-wrapper ol li { width: 50%; font-size: 18px; position: relative; margin-bottom: 12px; padding: 8px 10px 8px 44px; box-sizing: border-box; }
.toc-wrapper ol li::before {display: inline-block;position: absolute;content: counter(number);counter-increment: number;left: 0; top: 50%; transform: translateY(-50%);  width: 35px;height: 35px;background: #3E95CC;color: #fff;font-size: 18px;font-weight: bold;text-align: center;line-height: 35px;
}
.toc-wrapper ol li a {text-decoration: underline;}
@media only screen and (max-width: 568px) {
  .toc-wrapper ol {flex-direction: column; padding: 14px;}
  .toc-wrapper ol li { width:100%; font-size: 14px; margin-bottom: 8px; padding: 6px 0 8px 40px; }
  .toc-wrapper ol li::before { font-size: 16px; width: 28px; height: 28px; line-height: 28px; }
}

/* ページネーション */
.post_under_nav {color: #fff; background: #3EA9B3; margin: 0 0 30px;}
.post_under_nav ul { display: flex; }
.post_under_nav ul li { flex: 1; text-align: center; }
.post_under_nav ul li:nth-child(2) { border-left: 1px solid #fff; border-right: 1px solid #fff; }
.post_under_nav ul li a { color: #fff; display: block; padding: 10px 0; transition: all 0.2s;}
.post_under_nav ul li a:hover { background: #3C9BA4; }

.column-table,
.column-table td,
.column-table th {border-collapse: collapse;border:1px solid #333;background: #fff;text-align: center;}
.column-table {margin: 20px 0;width: 100%;table-layout: fixed;word-break: break-all;word-wrap: break-all;}
.column-table tr:first-child td {background: #e6855e;color: #fff;font-weight: bold;}
.column-table td,
.column-table th {padding: 15px 10px;}
@media (max-width: 568px) {
  .column-table td,
  .column-table th {padding: 5px;font-size: 14px;}
  .column-table td {letter-spacing: 0;}
}