@charset "utf8";

/* コラム用 */
body {
  background-image: url(../images/column/pc/column-back.png);
  background-repeat: repeat-y;
  background-size: 100%;
}
@media screen and (max-width: 767px) {
  body {
    background-image: url(../images/column/sp/column-back.png);
  }
}

ul {
  padding-left: 0;
}

li {
  list-style: none;
}

a:hover {
  opacity: 0.8;
}
/* 一覧ページ */
._column {
  width: calc(1200vw / 19.2);
  margin: auto;
  text-align: center;
}
@media screen and (max-width: 767px) {
  ._column {
    width: calc(340vw / 3.6);
  }  
}
.column-head {
  width: calc(800vw / 19.2);
  margin: calc(240vw / 19.2) auto calc(50vw / 19.2);
}
@media screen and (max-width: 767px) {
  .column-head {
    width: calc(320vw / 3.6);
    margin: calc(50vw / 3.6) auto calc(12vw / 3.6);
  }  
}

.column-list {
  width: 100%;
  margin: 0 auto calc(80vw / 19.2);
}
@media screen and (max-width: 767px) {
  .column-list {
    margin: 0 auto calc(20vw / 3.6);
  }
}
.article-column {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0 calc(40vw / 19.2);
  width: 100%;
  padding: 0 calc(40vw / 19.2);
  margin: 0 auto calc(60vw / 19.2);
  border-radius: calc(20vw / 19.2);
  text-align: left;
  background: linear-gradient(-225deg, #28A4D1, #4DB59F);
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .article-column {
    gap: 0 calc(20vw / 3.6);
    width: calc(340vw / 3.6);
    padding: 0 calc(12vw / 3.6);
    margin: 0 auto calc(20vw / 3.6);
    border-radius: calc(8vw / 3.6);
  }  
}
.article-column-left {
  width: calc(600vw / 19.2);
}
@media screen and (max-width: 767px) {
  .article-column-left {
    width: calc(150vw / 3.6);
  }
}
.article-column-right {
  width: calc(560vw / 19.2);
}
@media screen and (max-width: 767px) {
  .article-column-right {
    width: calc(150vw / 3.6);
  }
}
.column-no {
  position: absolute;
  top: calc(40vw / 19.2);
  left: calc(40vw / 19.2);
  display: inline-block;
  font-size: calc(40vw / 19.2);
  line-height: calc(40vw / 19.2);
  font-weight: 600;
  padding: calc(20vw / 19.2) calc(20vw / 19.2) calc(20vw / 19.2);
  margin: 0;
  border-radius: calc(100vw / 19.2);
  color: #2DA6CA;
  background-color: #FFFFFF;
}
@media screen and (max-width: 767px) {
  .column-no {
    top: calc(13vw / 3.6);
    left: calc(12vw / 3.6);
    font-size: calc(18vw / 3.6);
    line-height: calc(18vw / 3.6);
    padding: calc(8vw / 3.6) calc(12vw / 3.6) calc(8vw / 3.6);
    border-radius: calc(50vw / 3.6);
  }
}
.column-no span {
  font-size: calc(50vw / 19.2);
  line-height: 0;
}
@media screen and (max-width: 767px) {
  .column-no span {
    font-size: calc(24vw / 3.6);
  }
}
.column-thumb {
  width: 100%;
  border-radius: calc(20vw / 19.2);
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .column-thumb {
    border-radius: calc(8vw / 3.6);
  }
}
.column-date {
  display: block;
  padding: calc(140vw / 19.2) 0 calc(20vw / 19.2) calc(20vw / 19.2);
  border-bottom: 1px solid #FFF;
  font-size: calc(32vw / 19.2);
  color: #FFF;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .column-date {
    padding: calc(56vw / 3.6) 0 calc(6vw / 3.6) calc(10vw / 3.6);
    font-size: calc(16vw / 3.6);
  }
}
.column-title {
  padding: calc(20vw / 19.2) 0 calc(40vw / 19.2) calc(20vw / 19.2);
  font-size: calc(44vw / 19.2);
  font-weight: 500;
  color: #FFF;
}
@media screen and (max-width: 767px) {
  .column-title {
    padding: calc(10vw / 3.6) 0 calc(20vw / 3.6) calc(10vw / 3.6);
    font-size: calc(14vw / 3.6);
  }
}
.reservation_title {
  width: calc(500vw / 19.2);
  margin: calc(200vw / 19.2) auto calc(100vw / 19.2);
}
@media screen and (max-width: 767px) {
  .reservation_title {
    width: calc(200vw / 3.6);
    margin: calc(60vw / 3.6) auto calc(30vw / 3.6);
  }
}
.reservation_text {
  display: block;
  font-size: calc(28vw / 19.2);
  font-weight: 500;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .reservation_text {
    font-size: calc(15vw / 3.6);
  }
}
.reservation_btn {
  display: block;
  width: calc(610vw / 19.2);
  margin: calc(50vw / 19.2) auto calc(90vw / 19.2);
}
@media screen and (max-width: 767px) {
  .reservation_btn {
    width: calc(320vw / 3.6);
    margin: calc(25vw / 3.6) auto calc(40vw / 3.6);
  }
}
/* 一覧ページ ページネーション */
.page-numbers.current {
  color: #ffffff;
  background-color: #2BC4D2;
}
.page-numbers {
  display: inline-block;
  font-size: calc(40vw / 19.2);
  line-height: calc(60vw / 19.2);
  width: calc(60vw / 19.2);
  font-weight: 500;
  margin: 0 calc(12vw / 19.2);
  border-radius: 50px;
  color: #2BC4D2;
  background-color: #E1FFF9;
}
@media screen and (max-width: 767px) {
  .page-numbers {
    font-size: calc(18vw / 3.6);
    line-height: calc(26vw / 3.6);
    width: calc(26vw / 3.6);
    margin: 0 calc(6vw / 3.6);
  }
}
.page-numbers.prev {
  width: unset;
  border-radius: unset;
  background-color: unset;
}
.page-numbers.next {
  width: unset;
  border-radius: unset;
  background-color: unset;
}


/* コラム詳細ページ */
.column-detail {
  width: calc(1200vw / 19.2);
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .column-detail {
    width: calc(340vw / 3.6);
  }  
}
.column-head-detail {
  width: calc(800vw / 19.2);
  margin: calc(240vw / 19.2) auto calc(50vw / 19.2);
}
@media screen and (max-width: 767px) {
  .column-head-detail {
    width: calc(320vw / 3.6);
    margin: calc(50vw / 3.6) auto calc(12vw / 3.6);
  }
}
.column-date-detail {
  display: inline-block;
  padding: calc(10vw / 19.2) calc(20vw / 19.2);
  margin: calc(40vw / 19.2) 0 calc(20vw / 19.2) 0;
  border-radius: calc(30vw / 19.2);
  font-size: calc(28vw / 19.2);
  font-weight: 600;
  color: #FFF;
  background: linear-gradient(-225deg, #28A4D1, #4DB59F);
}
@media screen and (max-width: 767px) {
  .column-date-detail {
    padding: calc(4vw / 3.6) calc(16vw / 3.6) calc(6vw / 3.6);
    margin: calc(20vw / 3.6) 0 calc(10vw / 3.6) 0;
    border-radius: calc(30vw / 3.6);
    font-size: calc(14vw / 3.6);
  }
}
.column-title-detail {
  font-size: calc(60vw / 19.2);
  color: #2DA6CA;
}
@media screen and (max-width: 767px) {
  .column-title-detail {
    font-size: calc(18vw / 3.6);
  }
}
.column-content-text {
  margin: calc(32vw / 19.2) auto calc(120vw / 19.2);
  font-size: calc(28vw / 19.2);
  line-height: calc(40vw / 19.2);
}
@media screen and (max-width: 767px) {
  .column-content-text {
    margin: calc(16vw / 3.6) auto calc(60vw / 3.6);
    font-size: calc(14vw / 3.6);
    line-height: calc(28vw / 3.6);
  }
}