/* -------------------------------------------------- */
/* headimage */

.column-headimage {
  background-blend-mode: normal;
  background-color: transparent;
  background-image: url(../images/column/column-headimage.webp);
  height: 450px;
}
.column-headimage .wrapper {
  justify-content: center;
}
.column-headimage h1.global {
  color: #fff;
  font-size: 8rem;
  font-weight: 700;
  line-height: 1;
  position: relative;
  text-shadow: 0 10px 20px rgba(0,0,0,.32);
  top: -20px;
}
.column-headimage h1.global span {
  font-size: 3.6rem;
  font-style: normal;
  display: block;
  margin-bottom: 5px;
  text-align: center;
  text-shadow: 5px 5px 10px rgba(0,0,0,1);
}
.detail-headimage {
  background-image: url(../images/column/detail-headimage.webp);
}
.detail-headimage div.global {
  color: var(--main-color2);
  font-size: 3.6rem;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(255,255,255,1);
}

/* -------------------------------------------------- */
/* feature */

.feature {
  padding-bottom: 0;
}
.feature-body {
  position: relative;
}
.feature-image {
  background: var(--hover-color);
  height: 198px;
  margin-bottom: 10px;
}
.feature-image img {
  height: 100%;
  object-fit: cover;
  transition: opacity .2s;
  width: 100%;
}
.feature-title {
  color: var(--text-color1);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 10px;
  transition: color .2s;
}
.feature-date {
  background: url(../images/column/posts-date.webp) no-repeat center left / 16px 16px;
  color: var(--text-color1);
  font-size: 1.4rem;
  line-height: 16px;
  min-height: 16px;
  padding-left: 26px;
}
.feature-slide a:hover .feature-image img {
  opacity: .5;
}
.feature-slide a:hover .feature-title {
  color: var(--main-color2);
}
.feature .swiper-button-prev,
.feature .swiper-button-next {
  background: var(--text-color2) url(../images/arrow-right-white.webp) no-repeat center center / 13px 19px;
  border-radius: 10px;
  height: 50px;
  width: 50px;
}
.feature .swiper-button-prev {
  left: -65px;
  transform: rotate(180deg);
}
.feature .swiper-button-next {
  right: -65px;
}
.feature .swiper-button-prev::after,
.feature .swiper-button-next::after {
  display: none;
}

/* -------------------------------------------------- */
/* posts */

.posts-search {
  margin-bottom: 40px;
}
.posts-search input[type="text"] {
  background: var(--bg-color2) url(../images/column/posts-search.webp) no-repeat center right 15px / 16px 16px;
  border: 1px solid #cdd6dd;
  font-size: 1.6rem;
  padding: 1em 32px 1em 1.5em;
  width: 100%;
}
.posts-label {
  border-bottom: 2px solid var(--main-color1);
  border-image: linear-gradient(90deg, var(--gradient1), var(--gradient2)) 1;
  color: var(--main-color2);
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 45px;
  padding: .33em 0;
}
.posts-list {
  margin-bottom: 60px;
}
.posts-item {
  border: 1px solid #ccc;
  margin-bottom: 30px;
  position: relative;
}
.posts-item::after {
  clear: both;
  content: '';
  display: block;
}
.posts-item a {
  display: block;
}
.posts-cat {
  left: 0;
  position: absolute;
  top: 0;
  z-index: 1;
}
.posts-cat a {
  background: linear-gradient(180deg, var(--gradient1), var(--gradient2));
  color: #fff;
  display: block;
  font-size: 1.2rem;
  padding: .65em 1em;
}
.posts-cat a:hover {
  background: var(--text-color1);
}
.posts-image {
  background: var(--hover-color);
  float: left;
  height: 269px;
  margin-right: 30px;
  min-width: 289px;
  width: 289px;
}
.posts-image img {
  height: 100%;
  object-fit: cover;
  transition: opacity .2s;
  width: 100%;
}
.posts-item a:hover .posts-image img {
  opacity: .5;
}
.posts-head {
  padding: 30px 30px 0 0;
}
.posts-date {
  color: var(--text-color1);
  font-size: 1.4rem;
  line-height: 16px;
  margin-bottom: 10px;
  min-height: 16px;
}
.posts-date img {
  margin-right: 10px;
  width: 16px;
}
.posts-title {
  color: var(--main-color2);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 10px;
}
.posts-text {
  padding: 0 30px;
}
.posts-text p {
  color: var(--text-color1);
  line-height: 1.8;
  transition: color .2s;
}
.posts-item a:hover .posts-text p {
  color: var(--main-color2);
}

/* side */

.posts-side .posts-label {
  border: 0;
  color: var(--text-color1);
  margin-bottom: 20px;
  padding: 0;
}
.posts-side .posts-search,
.posts-side-cat,
.posts-side-recom {
  margin-bottom: 60px;
}
.posts-side-cat ul,
.posts-side-archive ul {
  line-height: 2;
}
.posts-side-cat ul li,
.posts-side-archive ul li {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 5px 0;
}
.posts-side-cat ul li a,
.posts-side-archive ul li a {
  color: var(--text-color1);
  transition: color .2s;
}
.posts-side-cat ul li a:hover,
.posts-side-archive ul li a:hover {
  color: var(--main-color2);
}
.posts-side-cat ul li span,
.posts-side-cat ul ul li::before,
.posts-side-archive ul li::before {
  background: url(../images/arrow-right-gray.webp) no-repeat center center / 6.5px 9.5px;
  content: '';
  cursor: pointer;
  display: inline-block;
  height: 30px;
  width: 30px;
}
.posts-side-cat ul li span.show {
  rotate: 90deg;
}
.posts-side-cat ul ul {
  display: none;
  padding-left: 20px;
  width: 100%;
}
.posts-side-cat ul ul li::before,
.posts-side-archive ul li::before {
  cursor: auto;
}
.posts-side-item {
  margin-bottom: 20px;
}
.posts-side-item a {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}
.posts-side-image {
  background: var(--hover-color);
  height: 80px;
  min-width: 80px;
  width: 80px;
}
.posts-side-image img {
  height: 100%;
  object-fit: cover;
  transition: opacity .2s;
  width: 100%;
}
.posts-side-item a:hover .posts-side-image img {
  opacity: .5;
}
.posts-side-title {
  color: var(--text-color1);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
  transition: color .2s;
  width: calc(100% - 95px);
}
.posts-side-item a:hover .posts-side-title {
  color: var(--main-color2);
}

/* -------------------------------------------------- */
/* post */

.post-head {
  margin-bottom: 60px;
}
.post-head-image {
  height: 493px;
  margin-bottom: 48px;
}
.post-head-image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.post-head-meta {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
}
.post-head-meta .posts-cat {
  margin-right: 18px;
  position: static;
}
.post-head-meta .posts-date {
  margin: 0;
}
.post-head .posts-title {
  border-bottom: 1px solid #ccc;
  margin-bottom: 30px;
  padding: .33em 0;
}
.post-lead p {
  line-height: 1.8;
}
.post-body {
  border-bottom: 1px solid #999;
  margin-bottom: 40px;
  padding: 0 30px;
}
.post-body #toc_container {
  background: var(--bg-color1);
  border: 1px solid var(--main-color2);
  font-size: 100%;
  line-height: 1.8;
  margin-bottom: 60px;
  padding: 30px;
}
.post-body #toc_container p.toc_title {
  color: var(--main-color2);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 10px;
  text-align: left;
}
.post-body .toc_list {
  counter-reset: counter 0;
  display: table;
  padding-left: 2em;
}
.post-body #toc_container p.toc_title+ul.toc_list {
  margin-top: 0;
}
.post-body .toc_list > li {
  display: table-row;
}
.post-body .toc_list ol > li::before {
  content: counters(counter, '.') '';
  counter-increment: counter 1;
  display: table-cell;
  font-family: 'Noto Sans JP', sans-serif;
  padding-right: 0.4em;
  text-align: right;
  white-space: nowrap;
}
.post-body .toc_list ol ol {
  padding-left: 0;
}
.post-body .toc_list a {
  text-decoration: none;
}
.post-body section {
  margin-bottom: 60px;
  padding: 0;
}
.post-body h1,
.post-body h2,
.post-body h3,
.post-body h4,
.post-body h5,
.post-body h6 {
  color: var(--main-color2);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
}
.post-body h1 {
  font-size: 3rem;
}
.post-body h2 {
  font-size: 2.4rem;
}
.post-body h3 {
  font-size: 2rem;
}
.post-body h4,
.post-body h5,
.post-body h6 {
  font-size: 1.8rem;
}
.post-body p {
  line-height: 1.8;
  margin-bottom: 30px;
  padding: 0 20px;
}
.post-body a {
  color: var(--text-color1);
  text-decoration: underline;
  transition: color .2s;
}
.post-body a:hover {
  color: var(--main-color2);
}
.post-body em {
  color: var(--main-color2);
}
.post-body img {
  margin: 0 20px 30px;
}
.post-foot {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}
.post-foot a {
  color: var(--text-color1);
  text-decoration: underline;
  transition: color .2s;
}
.post-foot a:hover {
  color: var(--main-color2);
}