/* KN015: 対象クラスが付いた通常記事と、その記事下部の画像枠を変更する。 */
article.blog_content.kn015-editorial {
  --kn015-ink: #252525;
  --kn015-muted: #626262;
  --kn015-line: #deded9;
  --kn015-meta-size: 18px;
  --kn015-title-size: 30px;
  --kn015-heading-size: 23px;
  --kn015-body-size: 17px;
  --kn015-hero-ratio: 4 / 3;
  --kn015-photo-ratio: auto;
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: none;
  margin: 0 0 64px;
  padding: 58px 0 0;
  color: var(--kn015-ink);
  background: #fff;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  overflow-wrap: anywhere;
}
article.blog_content.kn015-editorial > .single_header,
article.blog_content.kn015-editorial > .main_image,
article.blog_content.kn015-editorial > .main_image_sp,
article.blog_content.kn015-editorial > .content {
  box-sizing: border-box;
  width: calc(100% - 80px);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}
/* HTMLの並びは保ち、見た目をタイトル→メイン写真にする。 */
article.blog_content.kn015-editorial > .single_header { order: -1; margin-top: 0; margin-bottom: 30px; }
article.blog_content.kn015-editorial > .single_header .title { margin: 0; padding: 0; }
article.blog_content.kn015-editorial > .single_header .pagenavi { margin-bottom: 24px; }
article.blog_content.kn015-editorial > .single_header .ttl_en {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px 20px;
  margin: 0 0 24px; padding: 0; border: 0;
  font: var(--kn015-meta-size)/1.7 Georgia, "Yu Gothic", Meiryo, serif;
  letter-spacing: .08em;
}
article.blog_content.kn015-editorial > .single_header .ttl_en span,
article.blog_content.kn015-editorial > .single_header .ttl_en .date {
  position: static; float: none; margin: 0; padding: 0;
  font: inherit; color: var(--kn015-muted);
}
article.blog_content.kn015-editorial > .single_header .ttl_en span { color: #646e60; }
article.blog_content.kn015-editorial > .single_header h1.ttl_ja {
  margin: 0; padding: 0; border: 0; color: var(--kn015-ink);
  font-family: inherit; font-size: var(--kn015-title-size); font-weight: 700;
  line-height: 1.58; letter-spacing: .025em;
}
article.blog_content.kn015-editorial > .main_image,
article.blog_content.kn015-editorial > .main_image_sp { margin-top: 0; margin-bottom: 0; }
article.blog_content.kn015-editorial > .main_image img,
article.blog_content.kn015-editorial > .main_image_sp img {
  display: block; width: 100%; max-width: 100%; height: auto;
  aspect-ratio: var(--kn015-hero-ratio); object-fit: cover; object-position: center;
}
article.blog_content.kn015-editorial .content img.kn015-photo {
  display: block; width: 100%; max-width: 100%; height: auto;
  aspect-ratio: var(--kn015-photo-ratio); object-fit: cover; object-position: center;
}
article.blog_content.kn015-editorial > .content {
  margin-top: 40px; margin-bottom: 0;
  font-size: var(--kn015-body-size); font-weight: 500;
  line-height: 1.95; letter-spacing: .025em;
}
article.blog_content.kn015-editorial > .content p { margin: 0 0 24px; font-size: inherit; line-height: inherit; color: inherit; }
article.blog_content.kn015-editorial > .content h2 {
  margin: 48px 0 30px; padding: 32px 0 0; border: 0; border-top: 1px solid var(--kn015-line);
  color: inherit; background: transparent; font-family: inherit;
  font-size: var(--kn015-heading-size); font-weight: 700; line-height: 1.65; letter-spacing: .025em;
}
article.blog_content.kn015-editorial > .content h3 { font-family: inherit; font-size: var(--kn015-heading-size); line-height: 1.7; }
article.blog_content.kn015-editorial > .content a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
article.blog_content.kn015-editorial .content figure.kn015-single { display: block; float: none; width: 100% !important; max-width: none; margin: 32px 0; }
article.blog_content.kn015-editorial .content .wp-block-gallery.kn015-single { display: block; margin: 32px 0; }
article.blog_content.kn015-editorial .content .wp-block-gallery.kn015-single .blocks-gallery-grid { display: block; margin: 0; padding: 0; list-style: none; }
article.blog_content.kn015-editorial .content .wp-block-gallery.kn015-single .blocks-gallery-item { width: 100% !important; margin: 0; }
article.blog_content.kn015-editorial .content .wp-block-gallery.kn015-single figure,
article.blog_content.kn015-editorial .content .kn015-slide > figure,
article.blog_content.kn015-editorial .content .kn015-slide figure.wp-block-image { float: none; width: 100% !important; max-width: none; margin: 0 !important; flex: none; }
article.blog_content.kn015-editorial .content .kn015-single figcaption,
article.blog_content.kn015-editorial .content .kn015-gallery figcaption {
  box-sizing: border-box; display: block; position: static !important;
  width: 100%; max-height: none; margin: 10px 0 0; padding: 0;
  color: var(--kn015-muted); background: none; font-size: .75em; line-height: 1.85;
}
/* JavaScriptの初期化に成功した写真群にだけ適用する。 */
article.blog_content.kn015-editorial .content .kn015-gallery { display: block !important; width: 100%; margin: 32px 0; font-size: var(--kn015-body-size); }
article.blog_content.kn015-editorial .kn015-slider { width: 100%; }
article.blog_content.kn015-editorial .kn015-viewport { overflow: hidden; cursor: grab; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
article.blog_content.kn015-editorial .kn015-viewport img { width: 100%; max-width: 100%; height: auto; aspect-ratio: var(--kn015-photo-ratio); object-fit: cover; object-position: center; -webkit-user-drag: none; }
article.blog_content.kn015-editorial .kn015-viewport.is-dragging,
article.blog_content.kn015-editorial .kn015-viewport.is-dragging * { cursor: grabbing; }
/* スライド幅・右余白・間隔・アニメーションはSplideが制御する。 */
article.blog_content.kn015-editorial .kn015-track { align-items: flex-start; margin: 0 !important; padding: 0 !important; list-style: none; }
article.blog_content.kn015-editorial .kn015-slide { flex: 0 0 auto !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding: 0; list-style: none; }
article.blog_content.kn015-editorial .kn015-gallery-controls { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; margin-top: 14px; }
article.blog_content.kn015-editorial .kn015-arrows { display: flex; gap: 6px; }
article.blog_content.kn015-editorial .kn015-arrow { width: 42px; height: 42px; padding: 0; border: 1px solid var(--kn015-line); border-radius: 50%; background: #fff; color: inherit; font-size: 23px; cursor: pointer; }
article.blog_content.kn015-editorial .kn015-arrow:disabled { opacity: .3; cursor: default; }
article.blog_content.kn015-editorial .kn015-thumbs { display: flex; justify-content: flex-start; gap: 7px; min-width: 0; overflow-x: auto; }
article.blog_content.kn015-editorial .kn015-thumb { flex: 0 0 53px; width: 53px; height: 53px; margin: 0; padding: 3px; border: 1px solid transparent; background: transparent; cursor: pointer; }
article.blog_content.kn015-editorial .kn015-thumb img { display: block; width: 45px; height: 45px; object-fit: cover; opacity: .5; }
article.blog_content.kn015-editorial .kn015-thumb[aria-pressed="true"] { border-color: var(--kn015-ink); }
article.blog_content.kn015-editorial .kn015-thumb[aria-pressed="true"] img { opacity: 1; }
article.blog_content.kn015-editorial .kn015-counter { color: var(--kn015-muted); font: 13px Georgia,serif; white-space: nowrap; }
article.blog_content.kn015-editorial .kn015-viewport:focus-visible,
article.blog_content.kn015-editorial .kn015-gallery button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* 記事下部だけをトップページと同じ4:3にする。共通CSS・専用デザインは変更しない。 */
article.blog_content.kn015-editorial ~ .common_recommend .box .second figure::before,
article.blog_content.kn015-editorial ~ .common_category .box article figure::before {
  padding-top: 75%;
}
@media (max-width: 780px) {
  article.blog_content.kn015-editorial { --kn015-meta-size: 17px; --kn015-title-size: 28px; --kn015-heading-size: 22px; --kn015-body-size: 16px; padding-top: 32px; }
  article.blog_content.kn015-editorial > .single_header,
  article.blog_content.kn015-editorial > .main_image,
  article.blog_content.kn015-editorial > .main_image_sp,
  article.blog_content.kn015-editorial > .content { width: calc(100% - 40px); }
  article.blog_content.kn015-editorial > .single_header h1.ttl_ja { line-height: 1.65; }
  article.blog_content.kn015-editorial > .content { margin-top: 28px; }
  article.blog_content.kn015-editorial > .content h2 { margin-top: 36px; padding-top: 24px; }
}