@charset "UTF-8";
/* CSS Document */
/*----------------------------------------
変数
----------------------------------------*/
/* MV
---------------------------------------------- */
.pageHeader .pageHeaderImage img {
  -o-object-position: 80% 24%;
     object-position: 80% 24%;
}

/* リード文
---------------------------------------------- */
.pageLead .mainText {
  color: var(--colorMain);
  font-weight: 700;
}
@media screen and (max-width: 899px) {
  .pageLead .mainText {
    font-size: var(--size24px);
  }
}
@media screen and (min-width: 900px) {
  .pageLead .mainText {
    font-size: var(--size40px);
  }
}
.pageLead .caption {
  line-height: 2;
  margin-top: 32px;
}

/* コラム一覧
---------------------------------------------- */
@media screen and (max-width: 899px) {
  .columnContainer {
    margin-top: 40px;
  }
}
@media screen and (min-width: 900px) {
  .columnContainer {
    margin-top: 56px;
  }
}
.columnContainer .columnBox a {
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 899px) {
  .columnContainer .columnBox a {
    grid-template-areas: "img" "title" "caption" "arrow";
    row-gap: 16px;
  }
}
@media screen and (min-width: 900px) {
  .columnContainer .columnBox a {
    grid-template-areas: "img title arrow" "img caption arrow";
    grid-template-columns: 34% auto 24px;
    -webkit-column-gap: 40px;
       -moz-column-gap: 40px;
            column-gap: 40px;
    padding: 20px 4% 20px 20px;
  }
}
.columnContainer .columnBox a .image {
  grid-area: img;
  aspect-ratio: 320/200;
}
.columnContainer .columnBox a .image img {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover;
     object-fit: cover;
}
.columnContainer .columnBox a .title {
  grid-area: title;
  font-weight: 700;
}
@media screen and (max-width: 899px) {
  .columnContainer .columnBox a .title {
    font-size: var(--size18px);
  }
}
@media screen and (min-width: 900px) {
  .columnContainer .columnBox a .title {
    font-size: var(--size20px);
  }
}
.columnContainer .columnBox a .caption {
  grid-area: caption;
  line-height: 2;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.columnContainer .columnBox a .listBoxArrow {
  grid-area: arrow;
}
@media screen and (max-width: 899px) {
  .columnContainer .columnBox a .listBoxArrow {
    text-align: right;
  }
}

/* コラム詳細
---------------------------------------------- */
.column_detail p {
  line-height: 1.75;
}
.column_detail .mt8 {
  margin-top: 8px;
}
.column_detail .mt24 {
  margin-top: 24px;
}
.column_detail .mt32 {
  margin-top: 32px;
}
.column_detail .borderBottom {
  border-bottom: 1px solid var(--colorBorder);
}
.column_detail .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (max-width: 899px) {
  .column_detail .flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media screen and (max-width: 899px) {
  .column_detail .flex.gap24 {
    gap: 16px;
  }
}
@media screen and (min-width: 900px) {
  .column_detail .flex.gap24 {
    gap: 24px;
  }
}
@media screen and (max-width: 899px) {
  .column_detail .flex.gap48 {
    gap: 24px;
  }
}
@media screen and (min-width: 900px) {
  .column_detail .flex.gap48 {
    gap: 48px;
  }
}
.column_detail .flex .sizeAuto {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
@media screen and (min-width: 900px) {
  .column_detail .flex .sizeSmall {
    width: 28%;
    max-width: 240px;
  }
}
@media screen and (min-width: 900px) {
  .column_detail .flex .sizeMedium {
    width: 42%;
    max-width: 360px;
  }
}
.column_detail .column_detailTitle {
  color: var(--colorMain);
  font-weight: 500;
  line-height: 1.5;
  padding-left: 0.5em;
  border-left: 8px solid var(--colorMain);
}
@media screen and (max-width: 899px) {
  .column_detail .column_detailTitle {
    font-size: var(--size24px);
  }
}
@media screen and (min-width: 900px) {
  .column_detail .column_detailTitle {
    font-size: var(--size32px);
  }
}
@media screen and (max-width: 899px) {
  .column_detail .column_detailMainImage {
    aspect-ratio: 320/200;
    margin-top: 24px;
  }
}
@media screen and (min-width: 900px) {
  .column_detail .column_detailMainImage {
    margin-top: 24px;
  }
}
.column_detail .column_detailMainImage img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width: 899px) {
  .column_detail .columnSection {
    margin-top: 40px;
  }
}
@media screen and (min-width: 900px) {
  .column_detail .columnSection {
    margin-top: 56px;
  }
}
.column_detail .columnSectionTitle {
  color: var(--colorMain);
  font-weight: 500;
  border: 2px solid var(--colorMain);
  background-color: var(--colorBackGroundSub);
  -webkit-box-shadow: 4px 4px 0px 0px var(--colorMain);
          box-shadow: 4px 4px 0px 0px var(--colorMain);
  margin-bottom: 20px;
}
@media screen and (max-width: 899px) {
  .column_detail .columnSectionTitle {
    font-size: var(--size20px);
    padding: 4px 16px;
  }
}
@media screen and (min-width: 900px) {
  .column_detail .columnSectionTitle {
    font-size: var(--size24px);
    padding: 8px 16px;
  }
}
.column_detail .columnSectionItem {
  padding-top: 16px;
  padding-bottom: 16px;
}
.column_detail .lineTitle {
  font-weight: 500;
  font-size: var(--size18px);
}
.column_detail .lineTitle::before {
  content: "─";
  display: inline-block;
  padding-right: 0.5em;
}
.column_detail .image {
  border-radius: 10px;
  overflow: hidden;
}
.column_detail .returnBtn {
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 899px) {
  .column_detail .returnBtn {
    margin-top: 40px;
  }
}
@media screen and (min-width: 900px) {
  .column_detail .returnBtn {
    margin-top: 80px;
  }
}/*# sourceMappingURL=column.css.map */