/* 記事なしメッセージ */
.p-noPost {
   text-align: center;
   padding: 3em 1em;
   color: #999;
   font-size: 1rem;
   line-height: 1.8;
}

/* ============================================================
   ウェブページ統一テンプレート用スタイル
   ============================================================ */

/* 背景色 */
.c_wrapper.-bg-gray {
   background: linear-gradient(180deg, #f8f8f8, rgb(255, 255, 255));
   padding-bottom: 5em;
}

.c_wrapper.-bg-white {
   background: #fff;
}

/* ============================================================
   記事アーカイブテンプレート用スタイル
   ============================================================ */

/* KV画像付き（大）: 指定なしレイアウトでも大きいKVを使えるようにする */
@media (min-width: 600px) {
   .l-topTitleArea.-kv-large {
      min-height: 720px;
      position: relative;
   }
   .l-topTitleArea.-kv-large .l-topTitleArea__body {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, -50%);
   }
}

/* KV画像の直後のグレー背景は上余白なし */
@media (min-width: 960px) {
   .l-topTitleArea + .c_wrapper.-bg-gray {
      margin-top: 0;
   }
}

/* ============================================================
   記事本文内 ol に is-style-index スタイルを適用
   ============================================================ */
/* .post_content ol {
   --swl-list-padding--left: .25em;
   list-style: none !important;
   counter-reset: toc;
}

.post_content ol ol,
.post_content ol ul {
   --swl-list-padding--left: 0px;
   list-style: none !important;
}

.post_content ol > li {
   margin-left: 2em;
   padding-left: 0;
   position: relative;
   counter-increment: toc;
}

.post_content ol > li:before {
   border-right: 1px solid;
   content: counters(toc, "-");
   display: block;
   font-family: inherit;
   letter-spacing: -.1px;
   line-height: 1.1;
   padding: 0 .5em 0 0;
   position: absolute;
   right: calc(100% + .5em);
   top: .25em;
   -webkit-transform: scale(.95);
   transform: scale(.95);
   white-space: nowrap;
   width: auto;
}

.post_content ol ol {
   counter-reset: toc;
   padding-left: 1em;
}

.post_content ol ol > li:before {
   opacity: .75;
}

.post_content ol ul li {
   counter-increment: none;
   margin-left: 0;
   padding-left: 1.25em;
}

.post_content ol ul li:before {
   background: none;
   border-bottom: 2px solid;
} */

/* ============================================================
   最新記事スライダー: 件数が少ないときの通常リスト表示
   ============================================================ */
.latest_slider .p-postSlider__list .p-postList {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   list-style: none;
   padding: 0;
   margin: 0;
}

.latest_slider .p-postSlider__list .p-postList__item {
   flex: 0 0 calc(33.333% - 14px);
   max-width: calc(33.333% - 14px);
   padding: 0;
}

@media (max-width: 599px) {
   .latest_slider .p-postSlider__list .p-postList__item {
      flex: 0 0 100%;
      max-width: 100%;
   }
}

/* ============================================================
   最新記事スライダー: サムネイル画像の高さ確保
   ============================================================ */
.latest_slider .c-postThumb__figure {
   position: relative;
}

.latest_slider .c-postThumb__figure:before {
   padding-top: 56.25% !important;
}

.latest_slider .c-postThumb__img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* ============================================================
   サイドバー自由レイアウト用
   ============================================================ */

.l-sidebar {
   .sidebar-keywords + * {
      margin-top: 5em;
   }

   * {
      & + .sidebar-related {
         margin-top: 5em;
      }

      & + .sidebar_banner {
         margin-top: 5em;
      }

      & + #resizableIframe {
         margin-top: 5em;
      }

      & + .p-adBox {
         margin-top: 5em;
      }

      & + .sidebar-keywords {
         margin-top: 5em;
      }
   }

   .p-adBox {
      & + .p-adBox {
         margin-top: 2em;
      }
   }

   .sidebar_cta {
      ul {
         li {
            & + li {
               margin-top: 2em;
            }
         }
      }
   }
}

#b_case {
   .p-profileBox {
      &:has( + .p-impleBox) {
         margin-bottom: 3px;
      }
   }
}

.sidebar-keywords {
   margin-top: 0;
}

/* ============================================================
   導入製品・導入企業プロフィール: 全レイアウト共通スタイル
   ============================================================ */
.l-sidebar .p-profileBox,
.l-sidebar .p-impleBox {
   border: 0;
   background: #f8f8f8;
   padding: 30px;
}

.l-sidebar .p-profileBox {
   margin-bottom: 5em;
}

.l-sidebar .p-impleBox {
   margin-bottom: 3px;
   text-align: center;
}

.l-sidebar .p-profileBox .c-secTitle,
.l-sidebar .p-impleBox .c-secTitle {
   text-align: center;
}

.l-sidebar .p-profileBox__name {
   font-size: 14px;
}

.l-sidebar .p-profileBox__name span {
   display: block;
}

.l-sidebar .company_info {
   margin-top: 30px;
   padding-top: 30px;
   border-top: 1px solid #ddd;
}

.l-sidebar .company_info dl {
   display: flex;
   flex-wrap: wrap;
}

.l-sidebar .company_info dt {
   width: 20%;
   padding-bottom: 5px;
}

.l-sidebar .company_info dd {
   width: 80%;
   padding-bottom: 5px;
}

.l-sidebar .p-profileBox:has(+ .p-impleBox) {
   margin-bottom: 3px;
}

@media (max-width: 599px) {
   #b_case .single #top_title_area::after {
      content: none;
   }
}

/* ============================================================
   目次（INDEX）: -index-on 時は -index-off による非表示を無効化
   main.min.js が後から -index-off を追加しても表示を維持する
   ただし、目次リストが生成されていない（見出し数不足）場合は非表示のままにする
   ============================================================ */
.-index-on.-index-off .p-toc:has(.p-toc__list) {
   display: block !important;
}

blockquote {
   font-size: .8em;
}

.webinar_date {
   font-weight: 700;
}

.webinar_date .swl-inline-icon {
   display: inline-block;
   width: 1em;
   height: 1em;
   margin-right: .5em;
   vertical-align: middle;
   position: relative;
}

.webinar_date .swl-inline-icon::after {
   content: "";
   display: block;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background: currentcolor;
   -webkit-mask-image: var(--the-icon-svg);
   mask-image: var(--the-icon-svg);
   -webkit-mask-size: contain;
   mask-size: contain;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: center;
   mask-position: center;
}

#b_webinar .p-articleFoot,
#b_webinar .c-shareBtns,
#b_webinar .p-articleMetas.-top {
   display: none;
}


/* ============================================================
   ブログパーツ調整
   ============================================================ */

.swell-block-postLink.is-style-external-link {
   &:has(+.swell-block-postLink.is-style-external-link) {
      margin-bottom: 0;
   }

   & +.swell-block-postLink.is-style-external-link {
      margin-top: 1em;
   }
}


.post_content .mini {
   font-size: .8em;
   opacity: .8;
}

/* ============================================================
   ライトボックス: 虫眼鏡アイコン + オーバーレイ
   ============================================================ */
.u-lb-on {
   position: relative;
}

/* MT出力: p.u-lb-on の場合、画像に合わせてサイズを縮める */
p.u-lb-on {
   display: flex;
}

/* MT画像の配置クラスに対応 */
p.u-lb-on:has(.mt-image-center) {
   justify-content: center;
}

p.u-lb-on:has(.mt-image-left),
p.u-lb-on:has(img:not(.mt-image-center):not(.mt-image-right)) {
   justify-content: flex-start;
}

p.u-lb-on:has(.mt-image-right) {
   justify-content: flex-end;
}

/* SWELL出力: figure.u-lb-on */
figure.u-lb-on {
   display: block;
}

/* 虫眼鏡アイコン用ラッパー（JSで追加） */
.u-lb-on .lb-img-wrap {
   position: relative;
   display: inline-block;
   line-height: 0;
}

.u-lb-on .lb-img-wrap::after {
   content: "";
   position: absolute;
   top: 8px;
   right: 8px;
   width: 28px;
   height: 28px;
   background: rgba(0,0,0,0.5);
   border-radius: 50%;
   pointer-events: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 16px;
}

/* オーバーレイ */
.custom-lb-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 100000;
   background: rgba(0,0,0,0.85);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.2s ease;
}

.custom-lb-overlay.-active {
   opacity: 1;
}

.custom-lb-overlay.-closing {
   opacity: 0;
}

.custom-lb-wrap {
   position: relative;
   max-width: 90vw;
   max-height: 90vh;
}

.custom-lb-img {
   max-width: 85vw;
   max-height: 85vh;
   object-fit: contain;
   display: block;
}

.custom-lb-close {
   position: absolute;
   top: -36px;
   right: 0;
   background: none;
   border: none;
   color: #fff;
   font-size: 32px;
   cursor: pointer;
   line-height: 1;
   padding: 0 4px;
}


.is-layout-constrained {
   .wp-block-image {

      figure {
         margin-left: auto;
         margin-right: auto;
      }

      img {
         width: 100%;
         height: 100%;
         max-width: 250px;
         max-height: 40px;
         object-fit: contain;
      }
   }
}

@media (max-width: 599px) {
   .parent-pageid-4203 #top_title_area::after {
      display: none;
   }
}


/* ============================================================
   CTAバナー: タイトル末尾の<br>で1行分の余白を確保
   h2内の最後の<br>がブラウザに無視されないようにする
   ============================================================ */
.swell-block-fullWide h2.is-style-section_ttl {
   min-height: fit-content;
   margin-bottom: 0;
}

.swell-block-fullWide h2.is-style-section_ttl::after {
   content: "\200b";
   display: inline;
}

/* youtube比率 */
iframe[src*="youtube.com"],iframe[src*="vimeo.com"] {
   width: 100%;
   aspect-ratio: 16 / 9;
   height: auto;
}



/* ============================================================
   カラム設定（MT出力: .mt-be-columns）
   2〜4カラム対応。PCでは等幅、SPでは1カラムに折り返し。
   ============================================================ */

.mt-be-columns {
   display: flex;
   justify-content: center;
   gap: 2em;
}

.mt-be-columns > .mt-be-column {
   flex: 1 1 0%;
   min-width: 0;

   * + * {
      margin-top: 1em;
   }
}

.mt-be-columns > .mt-be-column img {
   max-width: 100%;
   height: auto;
}

@media (max-width: 599px) {
   .mt-be-columns {
      flex-wrap: wrap;
   }

   .mt-be-columns > .mt-be-column {
      flex: 0 0 100%;
   }
}

figcaption {
   color: inherit;
   display: block !important;
   font-size: .8em;
   line-height: 1.4;
   margin-bottom: 0;
   margin-top: .75em;
   opacity: .8;
   text-align: center;
}

.mt-figure-center {
   margin-left: auto;
   margin-right: auto;
}

.post_content > .mt-be-column {
   & > * {
      clear: both;
      margin-bottom: var(--swl-block-margin, 2em);
   }
}

.wp-block-image figcaption {
   margin-top: 0 !important;
}