/* =============================================================================
   ZH Insights — index & detail page styles
============================================================================= */

/* Suppress horizontal overflow caused by rem-scale conflict between event/app.css and jp/common.css */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* column/app.css sets word-break:break-all on body, which breaks "Language" in the header */
.header .header-item.item10 .link10 {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Mobile header: re-anchor all rem-based values to vw so the menu renders
   correctly when both event/app.css (sets html font-size: 62.5%) and
   jp/common.css (sets html font-size: 13.333vw in mobile MQ) are loaded.
   insights.css loads last so these always win.
-------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .header .header-wrap {
    height: 14.667vw;
    padding: 3.333vw 0;
  }

  .header .header-inner {
    width: 92vw;
    margin: 0 auto;
  }

  .header .header-logo {
    width: 18.933vw;
  }

  .header .header-menu {
    width: 6.667vw;
    height: 5.333vw;
    right: 4vw;
  }

  .header .header-menu span {
    width: 6.667vw;
    height: 0.8vw;
  }

  .header .header-menu span:nth-child(2) {
    top: 2.267vw;
  }

  .header .header-menu span:nth-child(3) {
    top: 4.533vw;
  }

  .header .header-menu.active span:nth-child(1) {
    transform: translateY(2.267vw) rotate(135deg);
  }

  .header .header-menu.active span:nth-child(3) {
    transform: translateY(-2.267vw) rotate(-135deg);
  }

  .header .header-menu-contents {
    padding: 24vw 0 9.333vw;
  }

  .header .header-menu-list {
    width: 73.333vw;
  }

  .header .header-menu-item {
    margin: 8vw 0 0;
  }

  .header .header-menu-item .ttl {
    font-size: 3.733vw;
  }

  .header .header-menu-item .link {
    margin: 6.667vw 0 0;
    padding: 0 0 0 5.333vw;
    font-size: 3.2vw;
  }

  .header .header-menu-item .link::after {
    right: 4vw;
    font-size: 3.333vw;
  }

  .header .header-menu-item .link.link06,
  .header .header-menu-item .link.link07,
  .header .header-menu-item .link.link08,
  .header .header-menu-item .link.link09 {
    font-size: 3.733vw;
  }

  .header .header-menu-item .btn {
    width: 73.333vw;
    height: 13.333vw;
    margin: 4vw auto 0;
    border-radius: 1.333vw;
    font-size: 2.667vw;
  }

  .header .header-menu-item .btn .size01 {
    font-size: 3.733vw;
  }

  .header .header-menu-box01 {
    width: 73.333vw;
  }

  #container {
    margin-top: 14.667vw;
  }
}

/* --------------------------------------------------------------------------
   Mobile footer: re-anchor rem-based values to vw for the same reason.
   jp/common.css wins cascade with rem values, but rem scale is unreliable
   when event/app.css is also loaded. insights.css loads last → always wins.
   Also fixes broken selector ".footer .footer-top-item .lin k" in event/app.css.
-------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .footer .footer-top {
    padding: 12vw 0 7.867vw;
  }

  .footer .footer-top-inner {
    width: 80vw;
    margin: 0 auto;
  }

  .footer .footer-top-list.list01 {
    width: 43.333vw;
  }

  .footer .footer-top-list.list02 {
    width: 32vw;
  }

  .footer .footer-top-item {
    margin: 0 0 5.467vw;
  }

  /* Fix broken selector in event/app.css: ".footer .footer-top-item .lin k" */
  .footer .footer-top-item .link {
    font-size: 2.933vw;
    line-height: 1.86;
    letter-spacing: 0.06em;
  }

  .footer .footer-top-block.block02 {
    margin: 6vw 0 0;
  }

  .footer .footer-top-block.block02 .txt {
    font-size: 2.8vw;
  }

  .footer .footer-top-block.block02 .tel {
    margin: 0.933vw 0 0;
    font-size: 4vw;
  }

  .footer .footer-bottom {
    padding: 9.733vw 0 6.667vw;
  }

  .footer .footer-bottom-inner {
    width: 92vw;
    margin: 0 auto;
  }

  .footer .footer-bottom-logo {
    width: 40.8vw;
    margin: 0 auto;
  }

  .footer .footer-bottom-list {
    margin: 8.267vw 0 0;
  }

  .footer .footer-bottom-item {
    padding: 0 1.333vw;
    font-size: 9px !important;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .footer .footer-bottom-item.item01 {
    padding: 0 1.333vw 0 0;
  }

  .footer .footer-bottom-item.item03 {
    padding: 0 0 0 1.333vw;
    border: none;
  }

  .footer .footer-bottom-copy {
    margin: 5.067vw 0 0;
    font-size: 9px !important;
  }
}

/* --------------------------------------------------------------------------
   Page wrapper
-------------------------------------------------------------------------- */
.p-insights-wrap {
  background: #fff;
  padding-bottom: 80px;
}

/* --------------------------------------------------------------------------
   Page heading
-------------------------------------------------------------------------- */
.p-insights__heading {
  padding: 60px 0 40px;
  background: #f5f5f5;
}

.p-insights__heading-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.p-insights__title {
  font-size: 36px;
  font-weight: 700;
  color: #282828;
  margin: 0 0 8px;
  border-left: 4px solid #be2b4b;
  padding-left: 16px;
}

.p-insights__subtitle {
  font-size: 14px;
  color: #666;
  margin: 0;
  padding-left: 20px;
}

/* --------------------------------------------------------------------------
   Category tabs — p-columnTagList (used in archive & taxonomy templates)
-------------------------------------------------------------------------- */
.p-columnTagList {
  border-bottom: 1px solid #ddd;
  margin-bottom: 40px;
}

.p-columnTagList__inner {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-columnTagList__item {
  margin: 0;
}

.p-columnTagList__link {
  display: block;
  padding: 16px 20px;
  font-size: 14px;
  color: #555;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}

.p-columnTagList__link:hover {
  color: #be2b4b;
  opacity: 1;
}

.p-columnTagList__link.is-active {
  color: #be2b4b;
  border-bottom-color: #be2b4b;
  font-weight: 700;
}

/* Section head (category title + "view all" link row) */
.p-columnTagList__sectionHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}

.p-columnTagList__sectionTitle {
  font-size: 20px;
  font-weight: 700;
  color: #282828;
  margin: 0;
}

.p-columnTagList__viewAll {
  font-size: 13px;
  color: #be2b4b;
  text-decoration: none;
}

.p-columnTagList__viewAll:hover {
  opacity: 0.7;
}

@media (max-width: 768px) {
  .p-columnTagList__inner {
    padding: 0 16px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .p-columnTagList__link {
    padding: 12px 14px;
    font-size: 13px;
  }
}

/* --------------------------------------------------------------------------
   Category tabs (legacy alias — kept for reference)
-------------------------------------------------------------------------- */
.c-tabs-insights {
  border-bottom: 1px solid #ddd;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.c-tabs-insights__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.c-tabs-insights__tab {
  display: inline-block;
  padding: 16px 20px;
  font-size: 14px;
  color: #666;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.c-tabs-insights__tab:hover {
  color: #be2b4b;
  opacity: 1;
}

.c-tabs-insights__tab.is-active {
  color: #be2b4b;
  border-bottom-color: #be2b4b;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Content area
-------------------------------------------------------------------------- */
.p-insights__content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px 0;
}

/* --------------------------------------------------------------------------
   Section (per-category group in "All" view)
-------------------------------------------------------------------------- */
.p-insights__section {
  margin-bottom: 64px;
}

.p-insights__section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}

.p-insights__section-title {
  font-size: 20px;
  font-weight: 700;
  color: #282828;
  margin: 0;
}

.p-insights__view-all {
  font-size: 13px;
  color: #be2b4b;
  text-decoration: none;
}

.p-insights__view-all:hover {
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   3-column post grid
-------------------------------------------------------------------------- */
.c-insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 1024px) {
  .c-insights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .c-insights-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Post card
-------------------------------------------------------------------------- */
.c-insight-card a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.c-insight-card a:hover {
  opacity: 0.8;
}

.c-insight-card__thumbnail {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #eee;
  margin-bottom: 12px;
}

.c-insight-card__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.c-insight-card__no-thumb {
  width: 100%;
  height: 100%;
  background: linear-gradient(-50deg, #902e2b 0%, #b02c3c 64%, #be2b4b 100%);
}

.c-insight-card__body {
  padding: 0 4px;
}

.c-insight-card__date {
  font-size: 12px;
  color: #888;
  margin: 0 0 6px;
}

.c-insight-card__title {
  font-size: 15px;
  font-weight: 700;
  color: #282828;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   No posts message
-------------------------------------------------------------------------- */
.p-insights__no-posts {
  text-align: center;
  color: #888;
  padding: 60px 0;
}

/* --------------------------------------------------------------------------
   Pagination (reuse existing .p-pagerWrap styles from common.css)
-------------------------------------------------------------------------- */
.p-pagerWrap {
  margin-top: 48px;
}

/* =============================================================================
   Detail page
============================================================================= */

.p-insight-detail-wrap {
  background: #fff;
  padding-bottom: 80px;
}

.blog-detail-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px 0;
}

/* --------------------------------------------------------------------------
   Two-column flex layout
-------------------------------------------------------------------------- */
.bd-inner.l-flex {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

.bd-left {
  flex: 3;
  min-width: 0;
}

.bd-right {
  flex: 1;
  min-width: 280px;
  max-width: 320px;
}

@media (max-width: 900px) {
  .bd-inner.l-flex {
    flex-direction: column;
  }

  .bd-right {
    max-width: 100%;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Breadcrumb
-------------------------------------------------------------------------- */
.bd-breadcrumb {
  font-size: 13px;
  color: #888;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.bd-breadcrumb a {
  display: inline;
  color: #888;
  text-decoration: none;
}

.bd-breadcrumb a:hover {
  color: #be2b4b;
  opacity: 1;
}

.bd-breadcrumb__sep {
  margin: 0 8px;
}

/* --------------------------------------------------------------------------
   Title block
-------------------------------------------------------------------------- */
.bd-title {
  margin-bottom: 32px;
}

.bd-title__cat {
  display: inline-block;
  font-size: 12px;
  color: #be2b4b;
  background: rgba(190, 43, 75, 0.08);
  padding: 4px 10px;
  border-radius: 2px;
  margin: 0 0 12px;
}

.bd-title__main {
  font-size: 28px;
  font-weight: 700;
  color: #282828;
  line-height: 1.4;
  margin: 0 0 12px;
}

.bd-title__date {
  font-size: 13px;
  color: #888;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Featured image
-------------------------------------------------------------------------- */
.bd-img-container {
  margin-bottom: 32px;
}

.bd-img-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   Post content
-------------------------------------------------------------------------- */
.bd-content-container {
  font-size: 15px;
  line-height: 1.8;
  color: #282828;
  margin-bottom: 48px;
}

.bd-content-container h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 40px 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #be2b4b;
}

.bd-content-container h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 32px 0 12px;
}

.bd-content-container p {
  margin: 0 0 20px;
}

.bd-content-container img {
  max-width: 100%;
  height: auto;
  margin: 16px 0;
}

/* --------------------------------------------------------------------------
   Download form (below content)
-------------------------------------------------------------------------- */
.bd-download-form {
  margin-top: 48px;
  padding: 32px;
  background: #f5f5f5;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Sticky sidebar
-------------------------------------------------------------------------- */
.bd-sidebar.fixed-right {
  position: sticky;
  top: 80px;
}

#solutions-form-container {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 24px;
}

/* --------------------------------------------------------------------------
   Sidebar: latest posts fallback
-------------------------------------------------------------------------- */
.bd-sidebar__latest-title {
  font-size: 16px;
  font-weight: 700;
  color: #282828;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #be2b4b;
}

.bd-sidebar__latest-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: inherit;
}

.bd-sidebar__latest-item:hover {
  opacity: 0.7;
}

.bd-sidebar__latest-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 48px;
  overflow: hidden;
  background: #eee;
}

.bd-sidebar__latest-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bd-sidebar__latest-date {
  font-size: 11px;
  color: #888;
  margin: 0 0 4px;
}

.bd-sidebar__latest-title-txt {
  font-size: 13px;
  color: #282828;
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =============================================================================
   Single post — classes used in single-cncolumn.php
============================================================================= */

/* Breadcrumb */
.p-cncolumn-breadcrumb {
  font-size: 13px;
  color: #888;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
  line-height: 1.6;
}
.p-cncolumn-breadcrumb a,
.p-cncolumn-breadcrumb span {
  display: inline !important;
}
.p-cncolumn-breadcrumb a {
  color: #888;
  text-decoration: none;
}
.p-cncolumn-breadcrumb a:hover {
  color: #be2b4b;
}
.p-cncolumn-breadcrumb span {
  margin: 0 6px;
}

/* Category badge */
.p-cncolumn-cat {
  display: inline-block;
  font-size: 12px;
  color: #be2b4b;
  background: rgba(190, 43, 75, 0.08);
  padding: 4px 10px;
  border-radius: 2px;
  margin-bottom: 12px;
}

/* Sidebar form wrapper — match event page padding from css/event/app.css */
.form-container {
  background: #fff;
  box-shadow: 0 3px 13px 0 rgba(0, 0, 0, .05);
  padding: 24px 20px 40px;
}

@media (min-width: 1024px) {
  .form-container {
    padding: 32px 24px 40px;
  }
}

.form-container__head {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.25;
  color: #282828;
  margin-top: 40px;
  margin-bottom: 12px;
  text-align: center;
}

/* Sidebar latest posts list */
.p-cncolumn-latest {
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-cncolumn-latest__item {
  border-bottom: 1px solid #eee;
}
.p-cncolumn-latest__item a {
  display: block;
  padding: 12px 0;
  text-decoration: none;
  color: inherit;
}
.p-cncolumn-latest__item a:hover {
  opacity: 0.7;
}
.p-cncolumn-latest__date {
  display: block;
  font-size: 11px;
  color: #888;
  margin-bottom: 4px;
}
.p-cncolumn-latest__title {
  font-size: 13px;
  color: #282828;
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "p-columnTagList__sectionHead" label used in archive/taxonomy */
.p-columnTagList__sectionHead--label {
  font-size: 15px;
  color: #555;
  margin: 0 0 24px;
  padding: 0 20px;
}

img._form-image {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Archive/taxonomy: 2-line title clamp on event cards
-------------------------------------------------------------------------- */
.p-eventCard__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Archive/taxonomy: mobile responsive list
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Prevent horizontal overflow */
  .l-main,
  .p-eventSect,
  .p-eventSect__inner,
  .p-eventSect__title {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Reduce oversized section margin from event/app.css; add 62px gap below fixed header */
  .p-eventSect {
    margin-top: calc(14.667vw + 62px);
    margin-bottom: 60px;
  }

  .p-eventSect__inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .p-eventList {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* event/app.css uses rem; jp/common.css mobile scale makes 1rem=50px, so override to px */
  .l-main {
    padding-top: 0;
  }

  .c-sectTitle__enTxt {
    font-size: 28px;
  }

  .c-sectTitle__jpTxt {
    font-size: 13px;
    margin-left: 0;
  }

  .p-eventSect__title {
    margin-bottom: 24px;
  }

  .p-eventList__inner {
    display: block;
    margin-left: 0;
    margin-right: 0;
  }

  .p-eventList__item {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .p-eventCard__cont {
    padding-left: 0;
    padding-right: 0;
  }

  /* Prevent content on detail page from overflowing */
  body.single-cncolumn .p-eventDtlMain__body img,
  body.single-cncolumn .p-eventDtlMain__body table {
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Pagination: larger tap targets on mobile
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .p-pager {
    font-size: 14px;
    padding: 0 60px;
  }

  .p-pager .page-numbers {
    width: 36px;
    height: 36px;
    justify-content: center;
  }

  .p-pager .next,
  .p-pager .prev {
    font-size: 14px;
    width: auto;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   Mobile sticky CTA button (detail page, shown below 1024px)
-------------------------------------------------------------------------- */
.cncolumn-sticky-btn-wrap {
  display: none;
}

@media (max-width: 1023px) {
  .cncolumn-sticky-btn-wrap {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: #fff;
    padding: 12px 20px;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
  }
}

.cncolumn-sticky-btn {
  display: block;
  background: #be2b4b;
  color: #fff;
  text-align: center;
  padding: 14px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  max-width: 360px;
  margin: 0 auto;
}

body.single-cncolumn .column_single_content {
  font-size: 15px;
}

body.single-cncolumn .column_single_content h2 {
  font-size: 18px;
}

body.single-cncolumn .p-eventDtlMain__headTitle {
  font-size: 20px;
}

.p-eventDtlMain__thm img {
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Detail page — constrain width and add responsive side padding
   Scoped to body.single-cncolumn so it doesn't affect archive/taxonomy pages
-------------------------------------------------------------------------- */
body.single-cncolumn .p-eventDtlCont {
  max-width: 1200px;
  padding-left: 0;
  padding-right: 0;
}

@media screen and (max-width: 1023px) {
  body.single-cncolumn .p-eventDtlCont {
    padding-left: 20px;
    padding-right: 20px;
  }

  body.single-cncolumn .p-eventDtlCont__form {
    padding-top: 40px;
  }
}

@media screen and (min-width: 1024px) {
  body.single-cncolumn .p-eventDtlCont__main {
    max-width: 900px;
    flex: 1;
  }

  body.single-cncolumn .p-eventDtlCont__form {
    position: fixed;
    right: 0;
    top: 80px;
    width: 370px;
    padding-top: 0;
    z-index: 1;
    overflow-y: auto;
    max-height: calc(100vh - 80px);
  }

  body.single-cncolumn .p-eventDtlCont__form .form-container {
    min-height: 95vh;
  }

  body.single-cncolumn .footer .footer-top-inner {
    justify-content: unset;
  }

  body.single-cncolumn .column_single_content h2 {
    font-size: 28px;
  }

  body.single-cncolumn .p-eventDtlMain__headTitle {
    font-size: 32px;
  }
}

@media screen and (min-width: 1920px) {
  body.single-cncolumn .p-eventDtlCont__form {
    width: 480px;
  }
}