/* ============================================================
   column.css
   WIDES 特許分析コラム
   ------------------------------------------------------------
   PC / SP 共通
   ------------------------------------------------------------
   ・横ナビゲーションは固定しない
   ・ハンバーガーCSSは menu.css に分離
   ・ハンバーガーJSは hamburger.js のみ使用
============================================================ */


/* ============================================================
   基本
============================================================ */

html {
  scroll-padding-top: 160px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;

  font-family:
    "Hiragino Sans",
    "Noto Sans JP",
    sans-serif;

  line-height: 1.85;

  color: #2b2b2b;

  background: #ffffff;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: #1f4e79;
  text-decoration: none;
}

a:hover {
  opacity: 0.85;
}


/* ============================================================
   メインコンテナ
============================================================ */

.container {
  display: flex;

  gap: 28px;

  max-width: 1220px;

  margin: 40px auto;

  padding: 0 18px 0 28px;

  box-sizing: border-box;
}

.left-pane {
  flex: 2.6;

  min-width: 0;
}

.right-pane {
  flex: 1.6;

  min-width: 0;

  margin-left: 26px;

  padding-left: 12px;

  box-sizing: border-box;
}

.right-pane .profile-box,
.right-pane .card {
  width: 100%;

  box-sizing: border-box;
}

.right-pane .card-inner {
  padding: 16px 18px;
}


/* ============================================================
   メタタイトル
============================================================ */

.meta-title {
  margin-top: 22px;
  margin-bottom: 8px;

  font-size: 14px;
  font-weight: 600;

  color: #444;
}


/* ============================================================
   カード
============================================================ */

.card {
  display: block;

  margin-bottom: 12px;

  background: #f4f6f8;

  border: 1px solid #e6e8ec;

  border-radius: 10px;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-1px);

  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.06);
}

.card-inner {
  padding: 14px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;

  line-height: 1.5;

  color: #1f2d3d;
}

.card-meta {
  margin-top: 6px;

  font-size: 13px;

  color: #777;
}


/* ============================================================
   カテゴリ・タグ
============================================================ */

.category-cards {
  margin-bottom: 14px;
}

.tag,
.category-card {
  display: inline-block;

  margin: 4px;

  padding: 6px 10px;

  background: #eef2f6;

  border: 1px solid #dde3ea;

  border-radius: 6px;

  font-size: 13px;

  color: #333;
}

.tag:hover,
.category-card:hover {
  background: #e6edf5;
}


/* ============================================================
   記事本文
============================================================ */

article {
  min-width: 0;
}

article h2 {
  margin-top: 46px;

  padding-bottom: 6px;

  border-bottom: 2px solid #1f4e79;

  font-size: 22px;

  line-height: 1.5;
}

article h3 {
  margin-top: 30px;

  padding-left: 10px;

  border-left: 4px solid #1f4e79;

  line-height: 1.5;
}

article h4 {
  margin-top: 20px;

  line-height: 1.5;
}

article img {
  max-width: 100%;
  height: auto;
}

article img.half-img {
  display: block;

  width: 80%;

  height: auto;
}


/* ============================================================
   目次
============================================================ */

.toc {
  margin: 20px 0;

  padding: 16px;

  background: #f4f6f8;

  border: 1px solid #e6e8ec;

  border-radius: 10px;
}

.toc h3 {
  margin: 0 0 10px;

  padding: 0;

  border: 0;

  font-size: 18px;
}

.toc ul {
  margin: 0;

  padding-left: 20px;
}

.toc li {
  margin: 6px 0;

  line-height: 1.6;
}

.toc-indent-1 {
  margin-left: 18px;
}

.toc-indent-2 {
  margin-left: 36px;
}


/* ============================================================
   サイトヘッダー
============================================================ */

.site-header {
  position: relative;

  width: 100%;

  background: #ffffff;

  border-bottom: 1px solid #e6e8ec;

  z-index: 10000;
}


/* ============================================================
   ヘッダー内部
============================================================ */

.column-header-inner {
  width: 100%;

  margin: 0 auto;

  padding: 12px 20px 0;

  box-sizing: border-box;
}

.column-header-main {
  width: 100%;
}


/* ============================================================
   ロゴ行
============================================================ */

.column-header-row {
  display: flex;

  align-items: center;

  width: 100%;

  gap: 16px;
}

.column-header-left {
  display: flex;

  align-items: center;

  gap: 14px;

  flex: 1 1 auto;

  min-width: 0;
}


/* ============================================================
   ロゴ
============================================================ */

.column-header-left .logo-block {
  min-width: 0;
}

.column-header-left .logo-block a {
  display: flex;

  align-items: center;

  gap: 8px;

  min-width: 0;

  text-decoration: none;
}

.column-header-left .logo-block img {
  display: block;

  width: auto;

  height: 42px;

  flex-shrink: 0;
}

.column-header-left .logo-block .title {
  font-size: 28px;

  line-height: 1.2;

  color: #1f2740;

  white-space: nowrap;
}


/* ============================================================
   右カラムメニュー
============================================================ */

.right-menu {
  margin-top: 30px;
}

.right-menu .menu-block {
  margin-bottom: 12px;

  background: #f4f6f8;

  border:
    1px solid #e6e8ec;

  border-radius: 10px;

  overflow: hidden;
}

.right-menu .menu-title {
  position: relative;

  padding:
    13px 42px 13px 16px;

  box-sizing: border-box;

  color: #0f2742;

  font-size: 15px;

  font-weight: 700;

  line-height: 1.5;

  cursor: pointer;

  user-select: none;

  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.right-menu .menu-title::after {
  content: "+";

  position: absolute;

  top: 50%;

  right: 16px;

  transform:
    translateY(-50%);

  color: #64748b;

  font-size: 19px;

  font-weight: 400;

  line-height: 1;
}

.right-menu .menu-title:hover {
  background:
    rgba(37, 99, 235, 0.06);
}

.right-menu .menu-title.open {
  background:
    rgba(37, 99, 235, 0.06);

  color: #2563eb;
}

.right-menu .menu-title.open::after {
  content: "−";
}

/* ============================================================
   右メニュー アコーディオン
============================================================ */

/* 閉じている状態 */

.right-menu .accordion-content {
  display: none;
}


/* 開いている状態 */

.right-menu .menu-block.is-open > .accordion-content {
  display: block;
}


/* ヘッダー */

.right-menu .right_accordion-header {
  cursor: pointer;
  position: relative;
}


/* 矢印 */

.right-menu .right_accordion-header::after {
  content: "›";

  position: absolute;

  right: 16px;
  top: 50%;

  transform:
    translateY(-50%)
    rotate(0deg);

  transition:
    transform 0.25s ease;
}


/* 開いた状態 */

.right-menu .menu-block.is-open
.right_accordion-header::after {

  transform:
    translateY(-50%)
    rotate(90deg);

}


/* ============================================================
   年アコーディオン
============================================================ */

/* 閉じている */

.menu-month-list {
  display: none;
}


/* 開いている */

.menu-year-block.is-open
> .menu-month-list {

  display: block;

}


/* 年 */

.menu-year {
  cursor: pointer;
}


/* ============================================================
   月アコーディオン
============================================================ */

/* 閉じている */

.menu-post-list {
  display: none;
}


/* 開いている */

.menu-month-block.is-open
> .menu-post-list {

  display: block;

}


/* 月 */

.menu-month {
  cursor: pointer;
}

/* ============================================================
   画像モーダル
============================================================ */

.img-modal {
  display: none;

  position: fixed;

  inset: 0;

  z-index: 999999;

  justify-content: center;

  align-items: center;

  padding: 20px;

  box-sizing: border-box;

  background:
    rgba(0, 0, 0, 0.85);
}

.img-modal.active {
  display: flex;
}

.img-modal img {
  display: block;

  max-width: 90vw;

  max-height: 90vh;

  width: auto;

  height: auto;

  object-fit: contain;

  margin: auto;

  border-radius: 6px;

  box-shadow:
    0 0 20px rgba(0, 0, 0, 0.5);
}


/* ============================================================
   プロフィール
============================================================ */

.profile-box {
  margin: 30px 0;

  padding: 18px;

  background: #f4f6f8;

  border:
    1px solid #e6e8ec;

  border-radius: 10px;
}


/* ============================================================
   パンくず
============================================================ */

.breadcrumbs {
  max-width: 1100px;

  margin: 30px auto 0;

  padding:
    10px 20px 0;

  box-sizing: border-box;

  font-size: 13px;

  line-height: 1.6;

  color: #666;
}


/* ============================================================
   前後記事
============================================================ */

.prev-next {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  margin: 40px 0;

  padding: 16px 0;

  border-top:
    1px solid #e6e8ec;

  border-bottom:
    1px solid #e6e8ec;
}

.prev,
.next {
  flex: 1;

  min-width: 0;
}

.next {
  text-align: right;
}

.prev-next a {
  display: inline-block;

  color: #1f4e79;

  font-size: 14px;

  line-height: 1.6;
}


/* ============================================================
   関連記事
============================================================ */

.related-articles {
  margin-top: 40px;
}

.related-articles h2 {
  margin:
    0 0 18px;

  padding-bottom: 8px;

  border-bottom:
    2px solid #1f4e79;

  font-size: 22px;
}

/* ============================================================
   スマートフォン
============================================================ */

@media (max-width: 768px) {

  html {
    scroll-padding-top: 100px;
  }

  body {
    font-size: 18px;

    line-height: 1.9;

    letter-spacing: 0.01em;
  }


  /* ==========================================================
     メインコンテナ
  ========================================================== */

  .container,
  .mobile-container {
    display: block;

    width: 100%;

    max-width: 100%;

    margin:
      18px auto;

    padding:
      0 14px;

    box-sizing: border-box;
  }

  .left-pane,
  .right-pane {
    width: 100%;

    flex: none;

    margin-left: 0;

    padding-left: 0;
  }

  .right-pane {
    margin-top: 28px;
  }


  /* ==========================================================
     ヘッダー
  ========================================================== */

  .column-header-inner {
    padding:
      8px 12px 0;
  }

  .column-header-main .setsumei {
    display: none;
  }

  .column-header-row {
    gap: 8px;
  }

  .column-header-left {
    gap: 8px;
  }

  .column-header-left .logo-block img {
    height: 34px;
  }

  .column-header-left .logo-block .title {
    font-size: 18px;
  }

  .column-header-row .search-form,
  .column-header-row .jpdslink {
    display: none;
  }


  /* ==========================================================
     SP 横ナビ非表示
  ========================================================== */

  .top-nav {
    display: none;
  }


  /* ==========================================================
     本文
  ========================================================== */

  article {
    font-size:
      1.12rem;

    line-height:
      1.95;

    word-break:
      break-word;

    overflow-wrap:
      break-word;
  }

  article p {
    margin:
      0 0 1.2em;
  }

  article li {
    font-size:
      1.08rem;

    line-height:
      1.9;

    margin-bottom:
      0.4em;
  }


  /* ==========================================================
     タイトル
  ========================================================== */

  h1,
  .page-title {
    font-size:
      1.8rem;

    line-height:
      1.4;

    margin-bottom:
      0.6em;
  }


  /* ==========================================================
     見出し
  ========================================================== */

  article h2 {
    margin-top:
      2em;

    padding-bottom:
      0.28em;

    font-size:
      1.45rem;

    line-height:
      1.45;
  }

  article h3 {
    margin-top:
      1.7em;

    font-size:
      1.2rem;

    line-height:
      1.5;
  }

  article h4 {
    font-size:
      1.1rem;

    line-height:
      1.55;
  }


  /* ==========================================================
     目次
  ========================================================== */

  .toc {
    display:
      block;

    width:
      100%;

    margin:
      24px 0;

    padding:
      18px 20px;

    box-sizing:
      border-box;

    background:
      #f4f6f8;

    border:
      1px solid #e6e8ec;

    border-radius:
      10px;
  }

  .toc h3 {
    margin:
      0 0 12px;

    padding:
      0;

    border:
      0;

    color:
      #0f2742;

    font-size:
      18px;

    font-weight:
      700;

    line-height:
      1.5;
  }

  .toc ul {
    margin:
      0;

    padding-left:
      20px;
  }

  .toc li {
    margin:
      6px 0;

    line-height:
      1.6;
  }

  .toc li a {
    color:
      #334155;

    text-decoration:
      none;
  }

  .toc li a:hover {
    color:
      #2563eb;

    text-decoration:
      underline;
  }

  .toc-indent-1 {
    margin-left:
      20px;
  }

  .toc-indent-2 {
    margin-left:
      40px;
  }


  /* ==========================================================
     カード
  ========================================================== */

  .card {
    margin-bottom:
      12px;
  }

  .card-inner {
    padding:
      14px;
  }

  .card-title {
    font-size:
      1rem;

    line-height:
      1.55;
  }

  .card-meta,
  .date,
  .breadcrumbs {
    font-size:
      0.9rem;

    line-height:
      1.6;
  }


  /* ==========================================================
     タグ
  ========================================================== */

  .tag,
  .category-card {
    padding:
      7px 10px;

    font-size:
      0.9rem;
  }


  /* ==========================================================
     パンくず
  ========================================================== */

  .breadcrumbs {
    margin-top:
      12px;

    padding:
      8px 14px 0;
  }


  /* ==========================================================
     前後記事
  ========================================================== */

  .prev-next {
    flex-direction:
      column;

    gap:
      10px;

    margin:
      30px 0;
  }

  .next {
    text-align:
      left;
  }

  .prev-next a {
    font-size:
      13px;
  }


  /* ==========================================================
     プロフィール
  ========================================================== */

  .profile-box {
    margin:
      24px 0;

    padding:
      16px;
  }

}

/* ============================================================
   シリーズ一覧
============================================================ */

.column-series-list {
  padding: 0;
}


/* シリーズ1件 */

.menu-series-block {
  border-top: 1px solid #e1e5ea;
}


/* 最初のシリーズ */

.menu-series-block:first-child {
  border-top: 0;
}


/* シリーズタイトル */

.menu-series-title {
  position: relative;

  padding:
    11px 38px 11px 18px;

  box-sizing: border-box;

  color: #334155;

  font-size: 14px;

  font-weight: 600;

  line-height: 1.5;

  cursor: pointer;

  user-select: none;

  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}


/* シリーズタイトル ホバー */

.menu-series-title:hover {
  background:
    rgba(37, 99, 235, 0.05);
}


/* シリーズ開閉矢印 */

.menu-series-title::after {

  content: "›";

  position: absolute;

  right: 16px;

  top: 50%;

  transform:
    translateY(-50%)
    rotate(0deg);

  color: #64748b;

  font-size: 18px;

  transition:
    transform 0.25s ease;

}


/* 開いた状態 */

.menu-series-title.open {

  background:
    rgba(37, 99, 235, 0.06);

  color: #2563eb;

}


/* 開いた状態の矢印 */

.menu-series-title.open::after {

  transform:
    translateY(-50%)
    rotate(90deg);

}


/* シリーズ内記事 */

.menu-series-content {
  display: none;
}


/* 開いた状態 */

.menu-series-block.is-open
> .menu-series-content {

  display: block;

}


/* 記事リスト */

.menu-series-content .menu-post-list {

  margin: 0;

  padding:
    4px 14px 10px 30px;

  list-style: none;

}


/* 記事 */

.menu-series-content .menu-post-list li {

  margin:
    5px 0;

  line-height: 1.55;

}


/* 記事リンク */

.menu-series-content .menu-post-list a {

  display: block;

  color: #475569;

  font-size: 13px;

}


/* 記事リンク ホバー */

.menu-series-content .menu-post-list a:hover {

  color: #2563eb;

}

/* ============================================================
シリーズ内の記事一覧
----------

月アーカイブ用の .menu-post-list は display:none だが、
シリーズ内の記事一覧は常時表示する
============================================================ */

.menu-series-content .menu-post-list {
display: block;
margin: 0;
padding: 4px 14px 10px 30px;
list-style: none;
}

/* シリーズ内の記事 */

.menu-series-content .menu-post-list li {
margin: 5px 0;
line-height: 1.55;
}

/* シリーズ内の記事リンク */

.menu-series-content .menu-post-list a {
display: block;
color: #475569;
font-size: 13px;
text-decoration: none;
}

/* ホバー */

.menu-series-content .menu-post-list a:hover {
color: #2563eb;
}

/* ============================================================
   コラム一覧
   年・月アコーディオン
   ------------------------------------------------------------
   企業向け・シンプルデザイン
============================================================ */


/* ============================================================
   年ブロック
============================================================ */

.column-year-list {

  margin: 0;

  padding: 6px 0;

}


.menu-year-block {

  margin: 0;

  padding: 0;

  border-top:
    1px solid #e6e8ec;

}


.menu-year-block:first-child {

  border-top: 0;

}


/* ============================================================
   年タイトル
============================================================ */

.menu-year {

  position: relative;

  display: flex;

  align-items: center;

  width: 100%;

  min-height: 48px;

  margin: 0;

  padding:
    12px
    42px
    12px
    18px;

  box-sizing: border-box;

  color:
    #0f2742;

  background:
    #ffffff;

  font-size:
    15px;

  font-weight:
    700;

  line-height:
    1.5;

  cursor: pointer;

  user-select: none;

  transition:
    background-color 0.2s ease,
    color 0.2s ease;

}


/* 年 hover */

.menu-year:hover {

  background:
    #f8fafc;

  color:
    #2563eb;

}


/* 年 矢印 */

.menu-year::after {

  content:
    "›";

  position: absolute;

  top: 50%;

  right: 18px;

  transform:
    translateY(-50%)
    rotate(0deg);

  color:
    #64748b;

  font-size:
    19px;

  line-height:
    1;

  transition:
    transform 0.25s ease,
    color 0.2s ease;

}


/* 年 OPEN */

.menu-year-block.is-open
> .menu-year {

  color:
    #2563eb;

  background:
    #f8fafc;

}


.menu-year-block.is-open
> .menu-year::after {

  transform:
    translateY(-50%)
    rotate(90deg);

  color:
    #2563eb;

}


/* ============================================================
   月一覧
============================================================ */

.menu-month-list {

  display: none;

  margin: 0;

  padding:
    4px
    12px
    12px;

  background:
    #f8fafc;

}


.menu-year-block.is-open
> .menu-month-list {

  display: block;

}


/* ============================================================
   月ブロック
============================================================ */

.menu-month-block {

  margin:
    6px
    0;

  padding: 0;

  overflow: hidden;

  background:
    #ffffff;

  border:
    1px solid #e2e8f0;

  border-radius:
    8px;

  box-shadow:
    0 2px 6px
    rgba(15, 39, 66, 0.035);

}


/* ============================================================
   月タイトル
============================================================ */

.menu-month {

  position: relative;

  display: flex;

  align-items: center;

  width: 100%;

  min-height: 42px;

  margin: 0;

  padding:
    9px
    38px
    9px
    14px;

  box-sizing: border-box;

  color:
    #475569;

  background:
    #ffffff;

  font-size:
    14px;

  font-weight:
    600;

  line-height:
    1.5;

  cursor: pointer;

  user-select: none;

  transition:
    color 0.2s ease,
    background-color 0.2s ease;

}


/* 月 hover */

.menu-month:hover {

  color:
    #2563eb;

  background:
    #f8fafc;

}


/* 月 矢印 */

.menu-month::after {

  content:
    "›";

  position: absolute;

  top: 50%;

  right: 14px;

  transform:
    translateY(-50%)
    rotate(0deg);

  color:
    #94a3b8;

  font-size:
    17px;

  line-height:
    1;

  transition:
    transform 0.25s ease,
    color 0.2s ease;

}


/* 月 OPEN */

.menu-month-block.is-open
> .menu-month {

  color:
    #2563eb;

  background:
    #f1f5f9;

}


.menu-month-block.is-open
> .menu-month::after {

  transform:
    translateY(-50%)
    rotate(90deg);

  color:
    #2563eb;

}


/* ============================================================
   月の記事一覧
============================================================ */

.menu-post-list {

  display: none;

  margin: 0;

  padding:
    5px
    10px
    10px;

  list-style: none;

  background:
    #ffffff;

}


.menu-month-block.is-open
> .menu-post-list {

  display: block;

}


.menu-post-list li {

  margin: 0;

  padding: 0;

  border-top:
    1px solid #f1f5f9;

}


.menu-post-list li:first-child {

  border-top: 0;

}


.menu-post-list a {

  position: relative;

  display: block;

  padding:
    9px
    10px
    9px
    20px;

  color:
    #475569;

  font-size:
    13px;

  line-height:
    1.65;

  text-decoration: none;

  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    padding-left 0.2s ease;

}


/* 小さなアクセント */

.menu-post-list a::before {

  content:
    "";

  position: absolute;

  top:
    17px;

  left:
    8px;

  width:
    4px;

  height:
    4px;

  border-radius:
    50%;

  background:
    #94a3b8;

  transition:
    background-color 0.2s ease;

}


.menu-post-list a:hover {

  color:
    #2563eb;

  background:
    #f8fafc;

  padding-left:
    23px;

}


.menu-post-list a:hover::before {

  background:
    #2563eb;

}


/* ============================================================
   シリーズ内記事は常時表示
   ------------------------------------------------------------
   月アーカイブ用 .menu-post-list と共通なので
   シリーズ側だけ上書き
============================================================ */

.menu-series-content
.menu-post-list {

  display:
    block;

  padding:
    5px
    12px
    10px;

}