@charset "utf-8";

/*------------------------------------------------------------
  base
------------------------------------------------------------*/
:root {
  --color-bold-text: #3e494f;
  --color-theme-base: #263238;
  --color-theme-primary: #008b8b;
  --color-theme-secondary-text: #ee7b30;
  --color-theme-secondary-border: #ffa000;
  --color-link: #08ada6;
  --color-link-hover: #a2d7d5;
  --transition: .2s ease-out;
}
body {
  font-size: inherit;
}
.container {
  max-width: calc(1200px + 30px + 30px);
  margin: 0 auto;
  padding: 30px 15px 80px;
  line-height: 1.6;
}
.container--single {}
.container--archive {}

.container a,
.container a img {
  transition: var(--transition);
}
.column-content {
  margin: 15px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
.column-content img {
  pointer-events: none; /*保存メニューを非表示*/
}
.column-content a:has(.sidebar-banner__img) {
  display: inline-block;
}
.column-content a:has(.sidebar-banner__img):hover {
  opacity: .8;
}
.column-content__main,
.column-content_aside {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .container {
    padding: 30px 30px 80px;
  }
}
@media screen and (min-width: 992px) {
  .column-content__main {
    width: calc(100% - 28% - 20px);
  }
}
@media screen and (min-width: 1200px) {
  .column-content__main {
    width: calc(100% - 25% - 30px);
  }
}

/*------------------------------------------------------------
  c-grid
------------------------------------------------------------*/
.c-grid {
  display: grid;
}
.c-grid.-gap-xs-10 { gap: 10px; }
.c-grid.-gap-xs-20 { gap: 20px; }
.c-grid.-gap-xs-30 { gap: 30px; }
.c-grid.-gap-xs-40 { gap: 40px; }

.c-grid.-col-gap-xs-30 { column-gap: 30px; }

.c-grid.-row-gap-xs-30 {row-gap: 30px; }
.c-grid.-row-gap-xs-40 {row-gap: 40px; }
.c-grid.-row-gap-xs-50 {row-gap: 50px; }

.c-grid.-col-xs-1  { grid-template-columns: repeat(1, 1fr); }
.c-grid.-col-xs-2  { grid-template-columns: repeat(2, 1fr); }
.c-grid.-col-xs-3  { grid-template-columns: repeat(3, 1fr); }
.c-grid.-col-xs-4  { grid-template-columns: repeat(4, 1fr); }
.c-grid.-col-xs-5  { grid-template-columns: repeat(5, 1fr); }
.c-grid.-col-xs-8  { grid-template-columns: repeat(8, 1fr); }
.c-grid.-col-xs-10 { grid-template-columns: repeat(10, 1fr); }
.c-grid.-col-xs-12 { grid-template-columns: repeat(12, 1fr); }

@media screen and (min-width: 576px) {
  .c-grid.-gap-sm-10 { gap: 10px; }
  .c-grid.-gap-sm-20 { gap: 20px; }
  .c-grid.-gap-sm-30 { gap: 30px; }
  .c-grid.-gap-sm-40 { gap: 40px; }

  .c-grid.-col-gap-sm-40 { column-gap: 40px; }

  .c-grid.-row-gap-sm-50 {row-gap: 50px; }
  .c-grid.-row-gap-sm-60 {row-gap: 60px; }

  .c-grid.-col-sm-1  { grid-template-columns: repeat(1, 1fr); }
  .c-grid.-col-sm-2  { grid-template-columns: repeat(2, 1fr); }
  .c-grid.-col-sm-3  { grid-template-columns: repeat(3, 1fr); }
  .c-grid.-col-sm-4  { grid-template-columns: repeat(4, 1fr); }
  .c-grid.-col-sm-5  { grid-template-columns: repeat(5, 1fr); }
  .c-grid.-col-sm-6  { grid-template-columns: repeat(6, 1fr); }
  .c-grid.-col-sm-8  { grid-template-columns: repeat(8, 1fr); }
  .c-grid.-col-sm-10 { grid-template-columns: repeat(10, 1fr); }
  .c-grid.-col-sm-12 { grid-template-columns: repeat(12, 1fr); }

  .c-grid > .-span-sm-2  { grid-column: span 2; }
  .c-grid > .-span-sm-3  { grid-column: span 3; }
  .c-grid > .-span-sm-4  { grid-column: span 4; }
  .c-grid > .-span-sm-5  { grid-column: span 5; }
  .c-grid > .-span-sm-6  { grid-column: span 6; }
  .c-grid > .-span-sm-12 { grid-column: span 12; }
}
@media screen and (min-width: 768px) {
  .c-grid.-gap-md-10 { gap: 10px; }
  .c-grid.-gap-md-20 { gap: 20px; }
  .c-grid.-gap-md-30 { gap: 30px; }
  .c-grid.-gap-md-40 { gap: 40px; }

  .c-grid.-row-gap-md-50 {row-gap: 50px; }

  .c-grid.-col-md-1  { grid-template-columns: repeat(1, 1fr); }
  .c-grid.-col-md-2  { grid-template-columns: repeat(2, 1fr); }
  .c-grid.-col-md-3  { grid-template-columns: repeat(3, 1fr); }
  .c-grid.-col-md-4  { grid-template-columns: repeat(4, 1fr); }
  .c-grid.-col-md-5  { grid-template-columns: repeat(5, 1fr); }
  .c-grid.-col-md-6  { grid-template-columns: repeat(6, 1fr); }
  .c-grid.-col-md-8  { grid-template-columns: repeat(8, 1fr); }
  .c-grid.-col-md-10 { grid-template-columns: repeat(10, 1fr); }
  .c-grid.-col-md-12 { grid-template-columns: repeat(12, 1fr); }

  .c-grid > .-span-md-2  { grid-column: span 2; }
  .c-grid > .-span-md-3  { grid-column: span 3; }
  .c-grid > .-span-md-4  { grid-column: span 4; }
  .c-grid > .-span-md-5  { grid-column: span 5; }
  .c-grid > .-span-md-6  { grid-column: span 6; }
  .c-grid > .-span-md-12 { grid-column: span 12; }
}
@media screen and (min-width: 992px) {
  .c-grid.-gap-lg-10 { gap: 10px; }
  .c-grid.-gap-lg-20 { gap: 20px; }
  .c-grid.-gap-lg-30 { gap: 30px; }
  .c-grid.-gap-lg-40 { gap: 40px; }
  .c-grid.-gap-lg-60 { gap: 60px; }
  .c-grid.-gap-lg-80 { gap: 80px; }

  .c-grid.-col-lg-1  { grid-template-columns: repeat(1, 1fr); }
  .c-grid.-col-lg-2  { grid-template-columns: repeat(2, 1fr); }
  .c-grid.-col-lg-3  { grid-template-columns: repeat(3, 1fr); }
  .c-grid.-col-lg-4  { grid-template-columns: repeat(4, 1fr); }
  .c-grid.-col-lg-5  { grid-template-columns: repeat(5, 1fr); }
  .c-grid.-col-lg-6  { grid-template-columns: repeat(6, 1fr); }
  .c-grid.-col-lg-8  { grid-template-columns: repeat(8, 1fr); }
  .c-grid.-col-lg-10 { grid-template-columns: repeat(10, 1fr); }
  .c-grid.-col-lg-12 { grid-template-columns: repeat(12, 1fr); }

  .c-grid > .-span-lg-2  { grid-column: span 2; }
  .c-grid > .-span-lg-3  { grid-column: span 3; }
  .c-grid > .-span-lg-4  { grid-column: span 4; }
  .c-grid > .-span-lg-5  { grid-column: span 5; }
  .c-grid > .-span-lg-6  { grid-column: span 6; }
  .c-grid > .-span-lg-12 { grid-column: span 12; }
}
@media screen and (min-width: 1200px) {
  .c-grid.-gap-xl-10 { gap: 10px; }
  .c-grid.-gap-xl-20 { gap: 20px; }
  .c-grid.-gap-xl-30 { gap: 30px; }
  .c-grid.-gap-xl-40 { gap: 40px; }
  .c-grid.-gap-xl-60 { gap: 60px; }
  .c-grid.-gap-xl-80 { gap: 80px; }

  .c-grid.-col-xl-1  { grid-template-columns: repeat(1, 1fr); }
  .c-grid.-col-xl-2  { grid-template-columns: repeat(2, 1fr); }
  .c-grid.-col-xl-3  { grid-template-columns: repeat(3, 1fr); }
  .c-grid.-col-xl-4  { grid-template-columns: repeat(4, 1fr); }
  .c-grid.-col-xl-5  { grid-template-columns: repeat(5, 1fr); }
  .c-grid.-col-xl-6  { grid-template-columns: repeat(6, 1fr); }
  .c-grid.-col-xl-8  { grid-template-columns: repeat(8, 1fr); }
  .c-grid.-col-xl-12 { grid-template-columns: repeat(12, 1fr); }

  .c-grid > .-span-xl-2  { grid-column: span 2; }
  .c-grid > .-span-xl-3  { grid-column: span 3; }
  .c-grid > .-span-xl-4  { grid-column: span 4; }
  .c-grid > .-span-xl-5  { grid-column: span 5; }
  .c-grid > .-span-xl-6  { grid-column: span 6; }
  .c-grid > .-span-xl-12 { grid-column: span 12; }
}
@media screen and (min-width: 1400px) {
  .c-grid.-gap-xxl-10 { gap: 10px; }
  .c-grid.-gap-xxl-20 { gap: 20px; }
  .c-grid.-gap-xxl-30 { gap: 30px; }
  .c-grid.-gap-xxl-40 { gap: 40px; }
  .c-grid.-gap-xxl-60 { gap: 60px; }
  .c-grid.-gap-xxl-80 { gap: 80px; }

  .c-grid.-col-xxl-1  { grid-template-columns: repeat(1, 1fr); }
  .c-grid.-col-xxl-2  { grid-template-columns: repeat(2, 1fr); }
  .c-grid.-col-xxl-3  { grid-template-columns: repeat(3, 1fr); }
  .c-grid.-col-xxl-4  { grid-template-columns: repeat(4, 1fr); }
  .c-grid.-col-xxl-5  { grid-template-columns: repeat(5, 1fr); }
  .c-grid.-col-xxl-6  { grid-template-columns: repeat(6, 1fr); }
  .c-grid.-col-xxl-8  { grid-template-columns: repeat(8, 1fr); }
  .c-grid.-col-xxl-10 { grid-template-columns: repeat(10, 1fr); }
  .c-grid.-col-xxl-12 { grid-template-columns: repeat(12, 1fr); }

  .c-grid > .-span-xxl-2  { grid-column: span 2; }
  .c-grid > .-span-xxl-3  { grid-column: span 3; }
  .c-grid > .-span-xxl-4  { grid-column: span 4; }
  .c-grid > .-span-xxl-5  { grid-column: span 5; }
  .c-grid > .-span-xxl-6  { grid-column: span 6; }
  .c-grid > .-span-xxl-12 { grid-column: span 12; }
}

/*------------------------------------------------------------
  c-button-primary
------------------------------------------------------------*/
.c-button-primary-container {
  padding: 0 20px;
  text-align: center;
}
.c-button-primary {
  position: relative;
  display: inline-block;
  max-width: 320px;
  width: 100%;
  padding: 15px;
  background: var(--color-theme-base);
  border-radius: 100vh;
  color: #fff;
  font-weight: 500;
  text-align: center;
  transition: var(--transition);
}
.c-button-primary__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.c-button-primary:hover {
  box-shadow: 0 0 10px rgb(0 0 0 / .3);
  color: #fff;
}
@media screen and (min-width: 992px) {
  .c-button-primary {
    font-size: 16px;
  }
}

/*------------------------------------------------------------
  c-scroll-content
------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .c-scroll-content-xs {
    overflow-x: auto;
  }
}

/*------------------------------------------------------------
  u-margin-top
------------------------------------------------------------*/
.u-mt-05-xs { margin-top:  5px; }
.u-mt-10-xs { margin-top: 10px; }
.u-mt-15-xs { margin-top: 15px; }
.u-mt-20-xs { margin-top: 20px; }
.u-mt-25-xs { margin-top: 25px; }
.u-mt-30-xs { margin-top: 30px; }
.u-mt-40-xs { margin-top: 40px; }
.u-mt-50-xs { margin-top: 50px; }
.u-mt-60-xs { margin-top: 60px; }

@media screen and (min-width: 576px) {
  .u-mt-05-sm { margin-top:  5px; }
  .u-mt-10-sm { margin-top: 10px; }
  .u-mt-15-sm { margin-top: 15px; }
  .u-mt-20-sm { margin-top: 20px; }
  .u-mt-25-sm { margin-top: 25px; }
  .u-mt-30-sm { margin-top: 30px; }
  .u-mt-40-sm { margin-top: 40px; }
}
@media screen and (min-width: 768px) {
  .u-mt-10-md { margin-top: 10px; }
  .u-mt-15-md { margin-top: 15px; }
  .u-mt-20-md { margin-top: 20px; }
  .u-mt-25-md { margin-top: 25px; }
  .u-mt-30-md { margin-top: 30px; }
  .u-mt-35-md { margin-top: 35px; }
  .u-mt-40-md { margin-top: 40px; }
  .u-mt-45-md { margin-top: 45px; }
  .u-mt-50-md { margin-top: 50px; }
}
@media screen and (min-width: 992px) {
  .u-mt-10-lg { margin-top: 10px; }
  .u-mt-15-lg { margin-top: 15px; }
  .u-mt-20-lg { margin-top: 20px; }
  .u-mt-25-lg { margin-top: 25px; }
  .u-mt-30-lg { margin-top: 30px; }
  .u-mt-35-lg { margin-top: 35px; }
  .u-mt-40-lg { margin-top: 40px; }
  .u-mt-45-lg { margin-top: 45px; }
  .u-mt-50-lg { margin-top: 50px; }
  .u-mt-60-lg { margin-top: 60px; }
  .u-mt-70-lg { margin-top: 70px; }
  .u-mt-80-lg { margin-top: 80px; }
}
@media screen and (min-width: 1200px) {
  .u-mt-10-xl { margin-top: 10px; }
  .u-mt-15-xl { margin-top: 15px; }
  .u-mt-20-xl { margin-top: 20px; }
  .u-mt-25-xl { margin-top: 25px; }
  .u-mt-30-xl { margin-top: 30px; }
  .u-mt-35-xl { margin-top: 35px; }
  .u-mt-40-xl { margin-top: 40px; }
  .u-mt-45-xl { margin-top: 45px; }
  .u-mt-50-xl { margin-top: 50px; }
  .u-mt-60-xl { margin-top: 60px; }
  .u-mt-70-xl { margin-top: 70px; }
  .u-mt-80-xl { margin-top: 80px; }
}
@media screen and (min-width: 1400px) {
  .u-mt-10-xxl { margin-top: 10px; }
  .u-mt-15-xxl { margin-top: 15px; }
  .u-mt-20-xxl { margin-top: 20px; }
  .u-mt-30-xxl { margin-top: 30px; }
  .u-mt-40-xxl { margin-top: 40px; }
  .u-mt-50-xxl { margin-top: 50px; }
  .u-mt-60-xxl { margin-top: 60px; }
  .u-mt-70-xxl { margin-top: 70px; }
  .u-mt-80-xxl { margin-top: 80px; }
}

/*------------------------------------------------------------
  u-hide
------------------------------------------------------------*/
.u-hide-xs,
.u-hide-sm,
.u-hide-md,
.u-hide-lg,
.u-hide-xl {
  display: block;
}
@media screen and (min-width: 576px) {
  .u-hide-sm {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .u-hide-md {
    display: none;
  }
}
@media screen and (min-width: 992px) {
  .u-hide-lg {
    display: none;
  }
}
@media screen and (min-width: 1200px) {
  .u-hide-xl {
    display: none;
  }
}
@media screen and (min-width: 1400px) {
  .u-hide-xxl {
    display: none;
  }
}

/*------------------------------------------------------------
  u-show
------------------------------------------------------------*/
.u-show-sm,
.u-show-md,
.u-show-lg,
.u-show-xl,
.u-show-xxl {
  display: none;
}
@media screen and (min-width: 576px) {
  .u-show-sm {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .u-show-md {
    display: block;
  }
}
@media screen and (min-width: 992px) {
  .u-show-lg {
    display: block;
  }
}
@media screen and (min-width: 1200px) {
  .u-show-xl {
    display: block;
  }
}
@media screen and (min-width: 1400px) {
  .u-show-xxl {
    display: block;
  }
}

/*------------------------------------------------------------
  u-text-weight
------------------------------------------------------------*/
.u-text-weight-medium { font-weight: 500; }

/*------------------------------------------------------------
  kiji
------------------------------------------------------------*/
.kiji-container {
  padding: 30px 20px;
  background: #fff;
}
.kiji {
  line-height: 1.8;
  font-size: 15px;
  text-align: justify;
}
.kiji img {
  width: 100%;
  height: auto;
  margin: 0 0 1.25em;
  vertical-align: top;
}
.kiji-header {
  display: grid;
  gap: 1.0em;
}
.kiji-img {
  margin: 1.5em 0 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.kiji-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  vertical-align: top;
}
:is(.kiji h2, .kiji h3) {
  line-height: 1.3;
}
.kiji h1 {
  color: var(--color-theme-primary);  
  font-weight: bold;
  font-size: 20px;
  line-height: 1.2em;
}
.kiji h2 {
  margin-top: 3em;
  margin-bottom: 1.5em;
  border-left: 10px solid var(--color-theme-secondary-border);
  position: relative;
  padding: 1rem .5rem;
  background: #ffdda2;
  font-size: 18px;
}
.kiji h3 {
  margin-top: 2.5em;
  margin-bottom: 1.5em;
  padding: .5em;
  border-left: solid 10px var(--color-theme-secondary-border);
  border-bottom: 2px solid var(--color-theme-secondary-border);
  background: transparent;
  color: var(--color-theme-secondary-text);
  font-size: 18px;
}
.kiji h3.hnone {
  background:linear-gradient(transparent 75%, #fece78 75%);
  display: inline-block;
  font-size: initial;
  font-weight: bold;
  margin-top: initial;
  margin-bottom:0px;
  padding: initial;
  border-left: initial;
  border-bottom: initial;
  color: initial;
}
.kiji h4 {
  position: relative;
  line-height: 1.5;
  margin: 2em 0 .75em;
  padding: 0 0 0 .75em;
  font-size: 16px;
  font-weight: 500;
}
.kiji h4::before {
  content: "";
  position: absolute;
  top: .1em;
  left: 0;
  width: 3px;
  height: 1.5em;
  background: var(--color-theme-secondary-border);
}
.kiji img.sm_img {
  width: 60%;
  max-width: 175px;
  margin-top: 20px;
}
.kiji img.ss_img{
  width: 100px;
  margin: 0 auto;
  text-align: center;
}
.catch {
  padding: 1.5em 0 0;
}
.catch .intro {}
.catch .intro_text {
  padding: 1em 0 0;
}
@media screen and (min-width: 768px) {
  .kiji-container {
    padding: 40px;
  }
  .kiji img {
    max-width: 100%;
  }
  .kiji img:not(.kiji-img img):not(img.sm_img):not(img.ss_img):not(.kiji-img-float-none) {
    width: 45%;
    float: left;
    margin: 0 1.25em 1.25em 0;
  }
  .kiji img.sm_img {
    float: left;
    margin: 1.25em 1.25em 1.25em 0;
  }
  .kiji img.ss_img {
    float: none;
  }
  .kiji img.kiji-img2{
    width: 80%;
    margin: 0 0 30px;
  }
  .kiji .kiji-img-float-none {
    width: auto;
    max-width: 100%;
  }
}
@media screen and (min-width: 992px) {
  .kiji {
    font-size: 16px;
  }
  .kiji h1 {
    font-size: 32px;
  }
  .kiji h2 {
    font-size: 24px;
  }
  .kiji h3 {
    font-size: 22px;
  }
  .kiji h4 {
    font-size: 20px;
  }
  .kiji-header {
    gap: 1.25em;
  }
}
@media screen and (min-width: 1200px) {
}

/*------------------------------------------------------------
  日付
------------------------------------------------------------*/
.kiji-date {
  display: flex;
  gap: 1.0em;
  font-size: 13px;
  color: #a1a1a1;
}
.c-card-primary .kiji-date,
.c-card-secondary .kiji-date {
  font-size: 12px;
}
.kiji-date__col .material-icons {
  padding: 0 5px 0 0;
  font-size: 16px;
}
.kiji-date__item {
  display: flex;
  align-items: center;
}

/*------------------------------------------------------------
  Easy Table of Contents（目次）
------------------------------------------------------------*/
#ez-toc-container {
  margin: 1.5em 0 0;
  padding: 30px;
  background: #fdf9f2;
}
#ez-toc-container .ez-toc-title {
  display: block;
  color: var(--color-theme-secondary-text);
  line-height: 1.6;
  font-weight: 500;
  font-size: 16px;
}
#ez-toc-container .ez-toc-title::after {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  margin: 5px 0 0;
  background: var(--color-theme-secondary-border);
}
#ez-toc-container .ez-toc-list {
  margin: 1em 0 0;
}
#ez-toc-container .ez-toc-list li {
  line-height: 1.6;
  padding: 0 0 0 1.0em;
  text-indent: -1.1em;
}
#ez-toc-container .ez-toc-list li + li {
  margin-top: .5em;
}
#ez-toc-container .ez-toc-list a {
  display: inline;
  color: #263238;
  border-bottom: solid 1px transparent;
}
#ez-toc-container .ez-toc-list a:hover {
  color: var(--color-link-hover);
  border-bottom-color: currentColor;
  text-decoration: none;
}
@media screen and (min-width: 576px) {
  #ez-toc-container {
    padding: 30px 60px;
  }
  #ez-toc-container .ez-toc-title {
    display: flex;
    align-items: center;
    gap: .5em;
    font-size: 18px;
  }
  #ez-toc-container .ez-toc-title::after {
    flex: 1;
  }
}

/*------------------------------------------------------------
  著者情報
------------------------------------------------------------*/
.author-container {
  margin: 30px 0 0;
  padding: 30px 10px;
  border-top: solid 1px #dfdfdf;
  border-bottom: solid 1px #dfdfdf;
}
.author-box {
  display: block;
}
.author-box__avatar {
  text-align: center;
}
.author-box__avatar img {
  width: 40px;
  max-width: 100%;
  height: auto;
}
.author-box__body {
  display: grid;
  gap: 15px;
  padding: 20px 0 0;
}
.author-box__body-title {
  font-weight: 500;
}
.author-box__body-name {
  font-size: 18px;
  font-weight: 700;
}
.author-box__body-name span {
  display: block;
  font-size: .8em;
  font-weight: 400;
}
.author-box__body-profile {
  font-size: 14px;
}
@media screen and (min-width: 576px) {
  .author-box {
    display: grid;
    grid-template-columns: 12% auto;
    align-items: center;
  }
  .author-container {}
  .author-box__body {
    padding: 0 0 0 30px;
  }
  .author-box__body-name span {
    display: inline-block;
    padding: 0 0 0 1.5em;
  }
}
@media screen and (min-width: 992px) {
  .author-container {
    padding: 40px 20px;
  }
  .author-box__avatar img {
    width: 50px;
  }
  .author-box__body {
    padding: 0 0 0 40px;
  }
}
@media screen and (min-width: 1200px) {
  .author-container {
    margin: 50px 0 0;
    padding: 40px 60px;
  }
}

/*------------------------------------------------------------
  aside
------------------------------------------------------------*/
.column-content_aside {
}
.column-content_aside img {
  max-width: 100%;
  height: auto;
}
.column-content_aside h5{
  text-align: center;
  margin-bottom: 20px;
  color: var(--color-theme-primary);
  font-size: 20px;
  font-weight: 500;
}
.sidebar-container {
  display: grid;
  gap: 20px;
  padding-top: 20px;
}
.sidebar-item--secondary {
  padding: 20px;
  background: #fff;
  border-top: 10px #63bcb8 solid;
}
.sidebar-item-box + .sidebar-item-box {
  margin-top: 30px;
}
.sidebar-item-box + .sidebar-item-box h5 {
  padding-top: 25px;
  border-top: 1px var(--color-theme-primary) dashed;
}
.sidebar-banner {
  text-align: center;
}
.sidebar-banner__img {
  width: 100%;
}
@media screen and (min-width: 576px) {
  .sidebar-container {
    grid-template-columns: min(44%, 300px) auto;
  }
}
@media screen and (min-width: 992px) {
  .column-content_aside {
    position: sticky;
    width: 28%;
    top: 90px;
  }
  .sidebar-container {
    padding: 0;
    grid-template-columns: auto;
  }
}
@media screen and (min-width: 1200px) {
  .column-content_aside {
    width: 25%;
  }
}

/*------------------------------------------------------------
  最新記事
------------------------------------------------------------*/
.latest-list {
  display: grid;
  gap: 20px;
}
.latest-list__link {
  display: grid;
  grid-template-columns: 70px auto;
}
.latest-list__link:hover {
  color: var(--color-link-hover);
}
.latest-list__thum-image {
  width: 70px;
  height: 60px;
  object-fit: cover;
  transition: var(--transition);
}
.latest-list__body {
  line-height: 1.5;
  padding: 0 0 0 1em;
}
.latest-list__body-title {
  font-size: 13px;
  font-weight: 500;
}
.latest-list__body-date {
  padding: 3px 0 0;
  color: #a1a1a1;
  font-size: 12px;
}
@media (hover: hover) {
  .latest-list__link:hover .latest-list__thum-image {
    opacity: .8;
  }
}
@media (hover: none) {
  .latest-list__link:hover {
    color: var(--color-base);
  }
}

/*------------------------------------------------------------
  記事（各テキスト）
------------------------------------------------------------*/
.bd{
  font-weight: bold;
}
.red{
  color: crimson;
}
.ore{
  color: #ff7d31;
}
.blue{
  color:#214794 ;
}
.line{
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sm {
  font-size: 0.8em;
}
.ct {
  text-align: center;
}
.markerb{
  background:linear-gradient(transparent 75%, #9eceff 75%);
  font-weight:500; 
}
.marker{
  background:linear-gradient(transparent 75%, #ff9393 75%);
  font-weight:500;
}
.markero{
  background:linear-gradient(transparent 75%, #fece78 75%);
  font-weight:500;
}
/*リンク色*/
.linkcolor {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.linkcolor:hover {
  color: var(--color-link-hover);
  text-decoration-color: transparent;
}

/*------------------------------------------------------------
  テーブル
------------------------------------------------------------*/
.clm_table,
.clm_table_w {
	width: 100%;
  margin: 20px auto;
  font-size: 0.95em;
  line-height: 1.2em;
}
.clm_table thead th {
	padding: 10px;
  border: 1px solid #b3bec9;
  background: #deebea;
  font-weight: 500;
}
.clm_table tbody th {
	padding: 8px 10px;
	vertical-align: top;
  border: 1px solid #b3bec9;
	background: #deebea;
  font-weight: 500;
  text-align: left;
}
.clm_table tbody td {
	padding: 8px 10px;
	vertical-align: top;
  border: 1px solid #b3bec9;
	background: #ffffff;
}
.clm_table caption,
.clm_table_w caption{
  color: var(--color-theme-base);
  font-size: 1.2em;
  font-weight: bold;
  text-align: left;
  margin-bottom: 10px;
}
.clm_table_w th {
  width: 13%;
  padding: 10px 15px;
  border: 1px solid #b3bec9;
  background: #deebea;
  font-weight: 500;
}
.clm_table_w td {
	text-align: left;
	vertical-align: top;
  padding: 8px 10px;
  border: 1px solid #b3bec9;
	background: #ffffff;
}
.clm_table_w td:first-child {
	text-align: left;
	vertical-align: middle;
}
.c-table-caption {
  margin: 0 0 -15px;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  /*横スクロール*/
  .wscroll {
    overflow-x: auto;
  }
  .wscroll .clm_table {
    max-width: 800px;
    width: 680px;
  }
  .clm_table.wscroll,
  .clm_table_w.wscroll {
    display: block;
  }
  table td p {
    line-height: 1.5em;
  }
  .wscroll--sticky-left .clm_table th:first-child {
    position: sticky;
    left: 0;
  }
}

/*------------------------------------------------------------
  引用
------------------------------------------------------------*/
.quote-box {
  margin: 0 0 1em;
	padding: 1.25em 1.5em;
  border: 4px solid #edf3f3;
  text-align: left;
}
.quote-box__authority {
  display: block;
  border-top: dashed 1px #deebea;
  margin: 1em 0 0;
  padding: 1em 0 0;
  line-height: 1.6;
  overflow-wrap: break-word;
}

/*------------------------------------------------------------
  よくある質問
------------------------------------------------------------*/
.faq-box dt,
.faq-box dd,
.kiji .faq-box__head,
.faq-box__body {
  position: relative;
}
.faq-box dt,
.kiji .faq-box__head {
  margin: 0;
  padding: 0 0 0 35px;
  line-height: 1.8;
  border: none;
  color: var(--color-theme-base);
  font-weight: 700;
  font-size: 1.2em;
}
.faq-box dd,
.faq-box__body {
  padding: .5em 0 0 35px;
}
.faq-box dd + dt {
  margin-top: 1.25em;
}
.faq-box dt::before,
.faq-box dd::before,
.faq-box__head::before,
.faq-box__body::before {
  position: absolute;
  left: 0;
  width: 25px;
  height: 25px;
  border: solid 1px var(--color-theme-primary);
  font-size: 16px;
  font-weight: 400;
  text-align: center;
}
.faq-box dt::before,
.faq-box__head::before {
  content: "Q";
  top: 4px;
  line-height: 22px;
  background: var(--color-theme-primary);
  color: #fff;
}
.faq-box dd::before,
.faq-box__body::before {
  content: "A";
  top: 10px;
  line-height: 25px;
  background: #fff;
  color: var(--color-theme-primary);
  font-weight: 500;
}
.faq-box__item + .faq-box__item {
  margin-top: 2.0em;
}

/*------------------------------------------------------------
  list-primary
------------------------------------------------------------*/
.list-primary > li {
  position: relative;
  padding: 0 0 0 1.0em;
}
.list-primary > li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background: currentColor;
}
@media screen and (min-width: 576px) {
  .list-primary > li::before {
    top: 12px;
  }
}

/*------------------------------------------------------------
  list-secondary
------------------------------------------------------------*/
.list-secondary > li {
  padding-left: 1em;
  text-indent: -1em;
}

/*------------------------------------------------------------
  c-box
------------------------------------------------------------*/
.c-box-primary {
  padding: 1.0em 1.5em;
  border: solid 1px #b3bec9;
}

/*------------------------------------------------------------
  記事一覧
------------------------------------------------------------*/
.archive-head {
  font-size: 14px;
}
.archive-head__title {
  line-height: 1.4;
  font-weight: 500;
  font-size: 18px;
}
.archive-head__title span {
  font-size: .8em;
  font-weight: 400;
}
.archive-grid {
  display: grid;
  gap: 30px;
  padding: 30px 0 0;
}
@media screen and (min-width: 576px) {
  .archive-head {
    text-align: center;
  }
  .archive-grid {
    grid-template-columns: repeat(2,1fr);
  }
}
@media screen and (min-width: 768px) {
  .archive-head {
  }
  .archive-grid {
    column-gap: 30px;
    row-gap: 50px;
  }
}
@media screen and (min-width: 992px) {
  .archive-head {
    padding: 20px 0;
    font-size: 16px;
  }
  .archive-head__title {
    font-size: 26px;
  }
  .archive-grid {
    grid-template-columns: repeat(3,1fr);
  }
}
@media screen and (min-width: 1200px) {
  .archive-grid {
    column-gap: 40px;
    row-gap: 60px;
  }
}

/*------------------------------------------------------------
  ページネーション
------------------------------------------------------------*/
.pagination {
  margin: 40px 0 30px;
  text-align: center;
}
.pagination ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination li {
  display: inline-block;
  width: auto;
}
.pagination li a,
.pagination li > span {
  font-size: .9em;
  display: block;
  width: 30px;
  margin: 0 1px;
  padding: 5px 0;
  text-decoration: none;
  color: #000;
  border: solid 1px #ccc;
  border-radius: 3px;
}
.pagination li > span {
  color: #fff;
  background-color: #464646;
}
.pagination li a:hover {
  color: #fff;
  background-color: #464646;
}
.pagination li .dots {
  width: 15px;
  padding: 0;
  color: #000;
  border-color: transparent;
  background-color: transparent;
}

/*------------------------------------------------------------
  c-card-primary
------------------------------------------------------------*/
.c-card-primary {
}
.c-card-primary__link {
  position: relative;
  display: block;
  height: 100%;
  background: #fff;
  box-shadow: 0 0 10px rgb(0 0 0 / .2);
  overflow: hidden;
}
.c-card-primary__inner {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
}
.c-card-primary__thumbnail {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.c-card-primary__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: top;
}
.c-card-primary__body {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 15px;
  padding: 15px;
}
.c-card-primary__body-title {
  color: var(--color-theme-primary);
  font-weight: 700;
}
.c-card-primary__link:hover {
  box-shadow: none;
}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 992px) {
  .c-card-primary__body-title {
    font-size: 18px;
  }
}
@media screen and (min-width: 1200px) {
  .c-card-primary__body {
    padding: 20px 25px;
  }
  .c-card-primary__body-title {
    font-size: 20px;
  }
}

/*------------------------------------------------------------
  c-card-secondary
------------------------------------------------------------*/
.c-card-secondary {
  position: relative;
  overflow: hidden;
}
.c-card-secondary__inner {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
}
.c-card-secondary__thumbnail img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  vertical-align: top;
}
[class*=c-card-secondary__link] {
  display: block;
}
.c-card-secondary__body {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 10px;
  padding: 0 5px;
}
.c-card-secondary__body-title {
  font-weight: 700;
  transition: var(--transition);
}
.c-card-secondary__link--title {
  padding: 15px 0 0;
}
.c-card-secondary__link:hover,
.c-card-secondary:has(.c-card-secondary__link--title:hover) .c-card-secondary__link--thum img,
.c-card-secondary:has(.c-card-secondary__link--thum:hover) .c-card-secondary__link--title {
  opacity: .8;
  color: var(--color-link-hover);
}
@media screen and (min-width: 768px) {
  .c-card-secondary__thumbnail img {
    height: 160px;
  }
}
@media screen and (min-width: 992px) {
  .c-card-secondary__body-title {
    font-size: 18px;
  }
}
@media screen and (min-width: 1200px) {
  .c-card-secondary__body-title {
    font-size: 20px;
  }
}

/*------------------------------------------------------------
  c-new-label
------------------------------------------------------------*/
.c-new-label {
  position: absolute;
  top: 8px;
  left: -30px;
  z-index: 1;
  width: 100px;
  padding: 2px 16px;
  background: var(--color-theme-base);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  transform: rotate(-45deg);
}

/*------------------------------------------------------------
  前へ／次へ
------------------------------------------------------------*/
.prev-next-link-container {
  padding: 40px 0 0;
}
.prev-next-link {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}
.prev-next-link__item {
  width: 100%;
}
.prev-next-link__item--prev {
  order: 1;
}
.prev-next-link__item--next {
  order: 2;
}
.prev-next-link__item--top {
  order: 3;
}
.prev-next-link__item a {
  position: relative;
  display: flex;
  align-items: center;
  line-height: 1.4;
  height: 100%;
  min-height: 84px;
  padding: 10px 20px;
  border: solid 1px currentColor;
  color: var(--color-link);
  font-size: 14px;
  font-weight: 500;
}
.prev-next-link__item a::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-color: currentColor;
  border-style: solid;
  transform: translateY(-50%) rotate(45deg);
}
.prev-next-link__item--top a {
  min-height: calc(84px / 2);
  justify-content: center;
  text-align: center;
}
.prev-next-link__item--top a::before {
  content: none;
}
.prev-next-link__item--prev a {
  padding-left: 35px;
}
.prev-next-link__item--prev a::before {
  left: 15px;
  border-width: 0 0 1px 1px;
}
.prev-next-link__item--next a {
  padding-right: 35px;
}
.prev-next-link__item--next a::before {
  right: 15px;
  border-width: 1px 1px 0 0;
}
@media screen and (min-width: 576px) {
  .prev-next-link {
    gap: 0;
  }
  .prev-next-link__item--prev,
  .prev-next-link__item--next {
    order: 0;
    width: calc((100% - 88px) / 2);
  }
  .prev-next-link__item--top {
    order: 0;
    width: 88px;
  }
  .prev-next-link__item--top a {
    margin: 0 -1px;
  }
}
@media screen and (min-width: 768px) {
  .prev-next-link-container {
    padding: 50px 0 0;
  }
}
@media (hover: hover) {
  .prev-next-link__item a:hover {
    box-shadow: 0 0 8px rgb(0 0 0 / .1);
  }
}

/*------------------------------------------------------------
  関連記事
------------------------------------------------------------*/
.related-posts-container {
  padding: 60px 0 0;
}
.related-posts__title {
  color: var(--color-theme-primary);
  font-weight: 500;
  font-size: 20px;
}
@media screen and (min-width: 768px) {
  .related-posts-container {
    padding: 80px 0 0;
  }
}

/*------------------------------------------------------------
  c-post-tag
------------------------------------------------------------*/
.c-post-tag-container {
  margin: 40px 0 0;
}
.c-post-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.c-post-tag__link,
.c-post-tag__item--nolink {
  display: inline-block;
  line-height: 1.2;
  background: #e4e8e9;
  border-radius: 100vh;
  color: #687981;
  text-decoration: none;
  white-space: nowrap;
}
.c-post-tag__link {
  padding: 5px 18px;
  font-size: 14px;
}
.c-post-tag__link--small {
  padding: 4px 10px;
  font-size: 12px;
}
.c-post-tag__link:hover {
  color: #fff;
  background: #687981;
}
.c-post-tag__item--nolink {
  padding: 4px 10px;
  font-size: 12px;
}

/*------------------------------------------------------------
  c-archive-tag
------------------------------------------------------------*/
.c-archive-tag {
  display: flex;
  flex-wrap: wrap;
  column-gap: .5em;
}
.c-archive-tag__item {
  line-height: 1.2;
}
.c-archive-tag__text {
  color: #687981;
  font-size: 12px;
}


/*------------------------------------------------------------
  パンくずリスト
------------------------------------------------------------*/
.breadcrumbs {
}
.breadcrumbs-list {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* text-overflow: ellipsis; */
  max-height: calc(1.4em * 2);
  line-height: 1.4;
}
.breadcrumbs-list__item {
  position: relative;
  display: inline;
}
.breadcrumbs-list__item:not(:first-child)::before {
  content: "/";
  margin: 0 .5em;
  color: #bebebe;
  font-size: 12px;
}
.breadcrumbs-list__name {
  color: #888;
  font-size: 12px;
  text-decoration: none;
  transition: var(--transition);
}
.breadcrumbs-list__link:hover .breadcrumbs-list__name {
  color: #c5c5c5;
}
.breadcrumbs li:last-child::after {
  content: none;
}

/*------------------------------------------------------------
  CTA
------------------------------------------------------------*/
.cta-link {
  padding: 30px 0;
  text-align: center;
}
.cta-link a {
  font-size: 18px;
  font-weight: 700;
}
@media screen and (min-width: 992px) {
  .cta-link {
    padding: 60px 0 30px;
  }
}

/*------------------------------------------------------------
  cta-banner
------------------------------------------------------------*/
.cta-banner {
}
.cta-banner-heading a {
  display: block;
}
.cta-banner-heading a:hover img {
  opacity: .8;
}
.kiji .cta-banner-heading__img {
  float: none;
  margin: 0;
}
.cta-banner-body__catch {
  line-height: 1.4;
  font-weight: 700;
  font-size: 14px;
}
.cta-banner-body {
  padding: 5px 0 0;
}
.cta-banner-body__sentence {
  line-height: 1.6;
  font-size: 13px;
}
.cta-banner-body__link {
  line-height: 1.4;
  text-align: right;
}
.cta-banner-body__link a {
  display: inline-block;
  line-height: 1.6;
  font-size: 12px;
}
.cta-banner-body__link .material-icons {
  position: relative;
  top: 5px;
  font-size: 1.4em;
}
@media screen and (min-width:576px) {
  .cta-banner {
    display: grid;
    align-items: center;
    grid-template-columns: min(40%,220px) auto;
  }
  .cta-banner-body {
    padding: 0 0 0 15px;
  }
  .cta-banner-body__catch {
    font-size: 15px;
  }
  .cta-banner-body__sentence {
    padding: 5px 0 0;
  }
}
@media screen and (min-width: 768px) {
  .cta-banner-heading__img {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }
  .cta-banner-body__catch {
    font-size: 18px;
  }
  .cta-banner-body {
    padding: 0 0 0 20px;
  }
  .cta-banner-body__sentence {
    font-size: 14px;
  }
  .cta-banner-body__link {
    padding: 5px 0 0;
  }
  .cta-banner-body__link a {
    font-size: 15px;
  }
}