@charset "UTF-8";
.dropdown-wrapper {
  position: relative;
}
@media screen and (max-width: 767px) {
  .dropdown-wrapper .dropdown-root {
    display: none !important;
  }
}
.dropdown-wrapper .dropdown-list {
  position: absolute;
  top: 21px;
  display: none !important;
  padding: 33px 0 0;
  opacity: 0;
  background-color: #fff;
  transition: ease all 0.6s;
}
@media screen and (max-width: 1199px) {
  .dropdown-wrapper .dropdown-list {
    background-color: unset;
  }
}
@media screen and (max-width: 767px) {
  .dropdown-wrapper .dropdown-list {
    position: relative;
    top: unset;
    display: block !important;
    padding: 0 !important;
    opacity: 1;
  }
}
.dropdown-wrapper .dropdown-list .dropdown-item a {
  display: block;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
@media screen and (max-width: 1199px) {
  .dropdown-wrapper .dropdown-list .dropdown-item a {
    font-size: 12px;
  }
}
.dropdown-wrapper:hover .dropdown-list {
  display: block !important;
  opacity: 1;
}
.dropdown-wrapper:afetr {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
}
.dropdown-wrapper.blue .dropdown-list {
  padding: 10px 0 0;
  background-color: var(--color-base-background);
}

.plus {
  margin: auto;
  background: white;
  border-radius: 8px;
  width: calc(100% - 240px);
}
@media screen and (max-width: 767px) {
  .plus {
    width: calc(100% - 32px);
    flex-direction: column;
    gap: 24px 0;
    margin-bottom: 20px;
  }
}

.s-mainvisual-1__copyTitle {
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
  opacity: 1;
  font-size: 32px !important;
  margin-bottom: 1em;
}

.s-mainvisual-1__copyText {
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
  opacity: 1;
  font-size: 24px !important;
}

.cogentlabs-smartread-s-mainvisual .s-mainvisual-1__copyButton {
  max-width: 280px;
}
.cogentlabs-smartread-s-mainvisual > .cogentlabs-smartread-c-inner {
  padding: 128px 28px 80px 80px;
  max-width: initial;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .cogentlabs-smartread-s-mainvisual > .cogentlabs-smartread-c-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
    padding: 0 0 24px;
  }
}

@media screen and (max-width: 767px) {
  section.cogentlabs-smartread-s-mainvisual .image {
    display: none;
  }
}

.cogentlabs-smartread-c-sidebar .category_list a:before {
  content: " ・" !important;
}

.flow__list-container {
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    container-type: inline-size;
    container-name: flowList;
}
.flow__list-contents {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.flow__list-image {
    aspect-ratio: 405.33 / 277.89;
}
.flow__list-text {
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
    margin-top: 24px;
    align-content: center;
    flex-grow: 1;
}
.flow__list-image{
  width: 100%;
  aspect-ratio: 405.33 / 277.89;
  overflow: hidden;
}

.flow__list-image img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
@media (max-width: 767px) {
    .flow__list-container {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}
/* ====== ベース ====== */
.compare{
  --blue:#19b6c7;     /* 左ヘッダー */
  --gray:#8a8f95;     /* 右ヘッダー */
  --navy:#0b3d54;     /* 行見出し */
  --line:#d9dee3;
  --bg:#ffffff;
  --ok:#20c997;
  --mid:#f0b429;
  --ng:#e55353;

  max-width: 980px;
  margin: 0 auto;
}

/* ====== PC: table ====== */
.compare__tableWrap{ 
    display:block;
    margin-bottom: 5em; 
    --compare-line: #8f9aa3; /* 好みで調整OK（濃いほど締まる） */
}
.compare__table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:var(--bg);
  border:2px solid var(--compare-line);
  overflow:hidden;
}

.compare__th{
  padding:16px 12px;
  color:#fff;
  font-weight:700;
  text-align:center;
  border-right:2px solid var(--compare-line);
}
.compare__th--blank{ background:transparent; border-right:1px solid var(--line); }
.compare__th--hitl{ background:#00cdea; }
.compare__th--ai{ background:var(--gray); border-right:none; }

.compare__rowHead{
  width: 28%;
  background:var(--navy);
  color:#fff;
  font-weight:700;
  padding:18px 14px;
  text-align:center;
  vertical-align:middle;
  border-top:2px solid var(--compare-line);
}
@media (max-width: 767px) {
    .compare__rowHead {
        padding:12px 5px;
    }
}

.compare__cell{
  padding:18px 14px;
  text-align:center;
  vertical-align:middle;

  /* 罫線を濃く */
  border-left:2px solid var(--compare-line);
  border-top:2px solid var(--compare-line);
}
/* ▼ 指示の「罫線削除（又は白）」：空セルは罫線を消す */
.compare__blankCell{
  background:#fff !important;
  border:none !important;        /* 罫線削除 */
  padding:0 !important;          /* 余白不要なら */
}

@media (max-width: 767px) {
    .compare__cell {
        padding:12px 5px;
    }
}

.compare__mark{
  font-size:28px;
  font-weight:800;
  line-height:1;
  margin-bottom:8px;
}

.compare__text{
  font-weight:700;
  color:#2a2f33;
  line-height:1.6;
}
@media (max-width: 767px) {
    .compare__text {
        font-size: 14px;
    }
}

.compare__foot{
  padding:14px 16px;
  font-weight:700;
  text-align:center;
  border-top:1px solid var(--line);
  background:#f6f8fa;
  color:#2a2f33;
}
.compare__table tbody tr:last-child > th {
  border: none !important;
  background: transparent;
  padding: 0; /* 余白も不要なら */
}

/* もし上に線（border-top）が出て見える場合の保険 */
.compare__table tbody tr:last-child > th {
  border-top: none !important;
}
/* SmartRead PLUS+ 表 */
.sr-plus-wrap { 
  margin: 0 auto 32px; 
  max-width:650px; 
  text-align:center; 
}
.sr-plus-table-wrap{
  border-radius: 6px;
  overflow-x: auto; 
  overflow-y: hidden;     
  -webkit-overflow-scrolling: touch;
  width:100%;
}
.sr-plus-table{
  width:650px;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 auto;
}
/* 枠線 */
.sr-plus-table th,
.sr-plus-table td{
  border:5px solid #fff;
  padding: 14px 16px;
  text-align:center;
}
/* 左側（見出し部） */
.sr-plus-table th{
  background:#003d56; 
  color:#fff; 
  font-weight:700; 
  font-size:16px;
  text-align:center;
  vertical-align:middle;
  white-space:nowrap;
}
/* データ部（右側） */
.sr-plus-table td{
  background:#cfcfcf; 
  color:#222; 
  font-size:16px; 
  vertical-align:middle;
  white-space:nowrap;
}
.sr-plus-table .td-large{ font-size:18px; font-weight:700; }

/* 注記 */
.sr-plus-note{ font-size:13px; margin-top:8px; text-align:left; }

@media (max-width:768px){
  .sr-plus-table{ width:650px; } 
  .sr-plus-table th,.sr-plus-table td{ padding:12px; font-size:15px; }
  .sr-plus-table .td-large{ font-size:16px; }
}
/* ====== compare：スマホ時は横スクロール ====== */
@media (max-width: 767px) {
  .compare__tableWrap{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  .compare__table{
    width: max-content;
    min-width: unset;
    font-size: 14px
  }

  /* iOSで「スクロールできるのに縮む」系の保険 */
  .compare__th,
  .compare__rowHead,
  .compare__cell{
    white-space: nowrap;     /* 改行させたくないなら。不要なら消してOK */
  }
}
@media (max-width: 767px) {
    .s-cta-2__title span img {
        width: 8em;
    }
}
/* ===== 3つの特長：PCだけ交互レイアウト（このページだけ） ===== */
@media (min-width: 768px) {
  .is-smartread-plus-only .box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }

  .is-smartread-plus-only .box .text{
    flex: 1 1 auto;
  }

  .is-smartread-plus-only .box .img{
    flex: 0 0 240px; /* アイコン側の幅：お好みで調整 */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .is-smartread-plus-only .box .img img{
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* 偶数(2つ目)だけ左右反転：reasons02が左へ */
  .is-smartread-plus-only .box:nth-of-type(even){
    flex-direction: row-reverse;
  }
}
/* ボタン内（テキスト＋矢印）を中央寄せ */
.fee-sim-cta .btn{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;            /* 文字と矢印の間隔 */
}

/* テキスト自体も中央揃え（2行の中央揃え） */
.fee-sim-cta .btn .c-button__jaTitle{
  text-align: center;
}
/* ボタンを中央配置（.exist 内だけ） */
.fee-sim-cta{
  text-align: center;
  margin-bottom: 3em;
}
.fee-sim-cta .btn{
  display: inline-flex;   /* 既存がflexでも崩れにくい */
  margin: 0 auto;
}
.is-smartread-plus-only2{
    background: #eef1f3;
}
@media (max-width: 767px) {
  .is-smartread-plus-only .box:nth-of-type(3){
    margin-bottom: 10em;
  }
}
@media screen and (max-width: 767px) {
    .cogentlabs-smartread-s-companies .s-introducedCompany-2__item {
        width: calc(100% / 3.2);
    }
}
/* 料金シミュレーション：ボタン（このブロック内だけ） */
.fee-sim-cta .btn.-white.-medium{
  display: inline-flex;
  justify-content: center;
  align-items: center;

  background: #2fc45a;
  color: #fff;
  text-decoration: none;

  padding: 16px 24px;
  border-radius: 22px;
  border: none !important;

  min-width: min(520px, 92vw);
  box-sizing: border-box;
}

/* ボタン文言（2行を中央） */
.fee-sim-cta .btn.-white.-medium .c-button__jaTitle{
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: clamp(18px, 3.4vw, 20px);
  line-height: 1.2;
  letter-spacing: .02em;
}

/* hover（任意） */
.fee-sim-cta .btn.-white.-medium:hover{
  filter: brightness(0.95);
}

/* スマホ時：ボタン自体を中央配置（このブロック内だけ） */
@media (max-width: 767px){
  .fee-sim-cta .btn.-white.-medium{
    margin-left: -0.5em;
  }
}
.is-smartread-plus-only3 {
    margin-bottom: 4em;
}
.about_table h2 {
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 30px;
}
/* ===== 罫線色（画像に寄せて濃く） ===== */
.compare__tableWrap{
  --compare-line:#8f9aa3;
}

/* ===== table ===== */
.compare__table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:2px solid var(--compare-line);
  background:#fff;
}

.compare__th{
  padding:16px 12px;
  color:#fff;
  font-weight:700;
  text-align:center;
  border-right:2px solid var(--compare-line);
}

.compare__th--blank{
  background:#fff;               /* 左上は白 */
  border-right:none !important;  /* 左上の縦線を消す */
}

.compare__th--hitl{ background:#00cdea; }
.compare__th--ai{ background:var(--gray); border-right:none; }

.compare__rowHead{
  width:28%;
  background:var(--navy);
  color:#fff;
  font-weight:700;
  padding:18px 14px;
  text-align:center;
  vertical-align:middle;
  border-top:2px solid var(--compare-line);
}

.compare__cell{
  padding:18px 14px;
  text-align:center;
  vertical-align:middle;
  border-left:2px solid var(--compare-line);
  border-top:2px solid var(--compare-line);
}

/* ===== 表の下（画像の“罫線なし2行”） ===== */
.compare__below{
  display:grid;
  grid-template-columns:28% 1fr 1fr; /* 左列=行見出し幅に合わせる */
  gap:0;
  margin-top:16px;                /* 表と文章の間隔（画像に近づける） */
  align-items:start;
}

.compare__belowBlank{ /* 左下の空白 */
  /* 何もしない（罫線も背景も無し） */
}

.compare__belowCol{
  text-align:center;
  font-weight:700;
  color:#2a2f33;
  line-height:1.6;
}

/* ===== SP 横スクロール時も下の文章がズレないように ===== */
@media (max-width: 767px){
  .compare__tableWrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .compare__table{
    width:max-content;
  }

  .compare__below{
    width:max-content;            /* テーブルと同じスクロール幅にする */
    grid-template-columns:28% 1fr 1fr;
  }
}
/* ===== 左上の枠を完全に消す（最終上書き） ===== */
.compare__table thead th.compare__th--blank{
  background:#fff !important;
  border-right:none !important;
}
/* ===== compare：左上の外枠を欠けさせる最終版（CSSの一番最後に置く） ===== */
.compare__table{
  border: none !important;          /* ←外枠をやめる（ここが肝） */
  border-collapse: separate;
  border-spacing: 0;
  background:#fff;
}

/* まず全セルのborderをリセット */
.compare__table th,
.compare__table td{
  border: none !important;
}

/* 罫線色・太さ */
.compare__tableWrap{
  --compare-line:#8f9aa3;
  --compare-w:2px;
}

/* ── 縦線（列の区切り） ── */
/* 2列目以降（見出し/本文）の左に線を引く */
.compare__table thead th:not(.compare__th--blank),
.compare__table tbody td{
  border-left: var(--compare-w) solid var(--compare-line) !important;
}

/* 右端の外枠 */
.compare__table thead th:last-child,
.compare__table tbody td:last-child{
  border-right: var(--compare-w) solid var(--compare-line) !important;
}

/* ── 横線 ── */
/* ヘッダー下の線（テーブル全幅） */
.compare__table tbody tr:first-child > th,
.compare__table tbody tr:first-child > td{
  border-top: var(--compare-w) solid var(--compare-line) !important;
}

/* 各行の区切り線 */
.compare__table tbody tr + tr > th,
.compare__table tbody tr + tr > td{
  border-top: var(--compare-w) solid var(--compare-line) !important;
}

/* 下端の外枠 */
.compare__table tbody tr:last-child > th,
.compare__table tbody tr:last-child > td{
  border-bottom: var(--compare-w) solid var(--compare-line) !important;
}

/* ── 左端の外枠（ただし左上は欠けさせる） ── */
/* 左端は「tbodyの行見出し(th)」だけに引く＝左上には出ない */
.compare__table tbody th.compare__rowHead{
  border-left: var(--compare-w) solid var(--compare-line) !important;
}

/* 上端の外枠は「左上以外のヘッダー(th)」だけに引く */
.compare__table thead th:not(.compare__th--blank){
  border-top: var(--compare-w) solid var(--compare-line) !important;
}

/* 左上の空セルは完全に何も描かない */
.compare__table thead th.compare__th--blank{
  background:#fff !important;
  border: none !important;
}
/* ===== 手離れ（行見出し）を強制表示 ===== */
.compare__table tbody th.compare__rowHead{
  background: #0b3d54 !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-align: center !important;
  vertical-align: middle !important;

  /* 文字が消される系の上書き対策 */
  opacity: 1 !important;
  visibility: visible !important;
  display: table-cell !important;
  -webkit-text-fill-color: #fff !important; /* Safariでcolorが負ける時の保険 */
}
/* ===== 上の線（ヘッダー上端）を戻す：左上以外 ===== */
.compare__table thead th.compare__th--hitl,
.compare__table thead th.compare__th--ai{
  border-top: var(--compare-w) solid var(--compare-line) !important;
}
/* =========================================================
   compare：ヘッダー上線を確実に出す（削除不要の最終上書き）
   ※CSSのいちばん最後に置く
========================================================= */

/* まず上端線を“全部消してから”必要な所だけ付け直す */
.compare__table thead th{
  border-top: none !important;
}

/* ヘッダー(青/グレー)だけ上線を付ける */
.compare__table thead th.compare__th--hitl,
.compare__table thead th.compare__th--ai{
  border-top: 2px solid #8f9aa3 !important;
}

/* ついでに：ヘッダー2セルの左にも縦線を確実に（上端が欠けて見える保険） */
.compare__table thead th.compare__th--hitl,
.compare__table thead th.compare__th--ai{
  border-left: 2px solid #8f9aa3 !important;
}

/* 右端の外枠も念のため */
.compare__table thead th.compare__th--ai{
  border-right: 2px solid #8f9aa3 !important;
}
/* ===== 「コスト」と「手離れ」の間にだけ左列の横線を入れる ===== */
.compare__table tbody tr:nth-child(2) th.compare__rowHead{
  position: relative;
}

.compare__table tbody tr:nth-child(2) th.compare__rowHead::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;              /* セルの下端 */
  height: 2px;            /* 線の太さ */
  background: #8f9aa3;    /* 罫線色（他と同じ） */
}
/* ===== SP時：表と下の説明を“完全に同じ列幅”にする ===== */
@media (max-width: 767px) {

  /* 表の列幅を固定 */
  .compare__table{
    table-layout: fixed;
  }

  .compare__table thead th:nth-child(1),
  .compare__table tbody th.compare__rowHead{
    width: 140px; /* ←左列（項目） */
  }

  .compare__table thead th:nth-child(2),
  .compare__table thead th:nth-child(3),
  .compare__table tbody td{
    width: 220px; /* ←右2列 */
  }

  /* 下の説明も同じ幅にする */
  .compare__below{
    grid-template-columns: 140px 220px 220px;
  }
}
/* =========================
   FV専用バナー（完全分離）
========================= */
.s-mainvisual-1__bannerBox.is-fv-banner{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
}

/* PC：大きめ表示（縮まらない） */
.s-mainvisual-1__bannerBox.is-fv-banner .s-mainvisual-1__bannerImg{
  max-height: 150px;
  width: auto;
  height: auto;
  display: block;
}

/* スマホ：1列・中央配置 */
@media screen and (max-width: 767px){
  .s-mainvisual-1__bannerBox.is-fv-banner{
    display: flex;
    flex-direction: column;
    align-items: center;      /* 中央配置 */
    gap: 20px;
  }

  .s-mainvisual-1__bannerBox.is-fv-banner a{
    display: flex;
    justify-content: center;  /* 画像も中央へ */
    width: 100%;
  }

  .s-mainvisual-1__bannerBox.is-fv-banner .s-mainvisual-1__bannerImg{
    max-height: 100px;
    width: auto;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
    .cogentlabs-smartread-s-mainvisual .s-mainvisual-1__image {
        background-position: right;
    }
}

/* 追加CSS smartread-plus導入事例  */

.cogentlabs-smartread-s-case {
  padding: 100px 0 0 0;
}

@media screen and (max-width: 767px) {
  .cogentlabs-smartread-s-case {
    padding: 60px 0 0 0;
  }
}

.cogentlabs-smartread-s-case h2 {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  color: var(--color-base-background);
}

@media screen and (max-width: 767px) {
  .cogentlabs-smartread-s-case h2 {
    font-size: 24px;
  }
}

.cogentlabs-smartread-s-case .case__inner {
  margin-top: 56px;
  max-width: 1296px;
  margin-inline: auto;
  padding: 56px calc(100% * 64 / 1296);
  background-color: #f3f4f7;
  border-radius: 12px;
}

@media screen and (max-width: 767px) {
  .cogentlabs-smartread-s-case .case__inner {
    margin-top: 26px;
  }
}

.cogentlabs-smartread-s-case .case__contents {
  display: grid;
  grid-template-columns: calc(100% * 540 / 1168) 1fr;
  gap: calc(100% * 64 / 1168);
  align-items: flex-start;
  @media (max-width: 1280px) {
    grid-template-areas:
      "g-1 g-2"
      "g-3 g-3";
    gap: 16px calc(100% * 64 / 1168);
    align-items: center;
  }
  @media (max-width: 820px) {
    grid-template-areas:
      "g-2 g-2"
      "g-1 g-1"
      "g-3 g-3";
  }
}

.cogentlabs-smartread-s-case .case__image {
  aspect-ratio: 540 / 344;
  border-radius: 12px;
  overflow: hidden;
  @media (max-width: 1280px) {
    grid-area: g-1;
  }
}
.cogentlabs-smartread-s-case .case__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
@media (max-width: 1280px) {
  .cogentlabs-smartread-s-case .case__textBox {
    display: contents;
  }
}

.cogentlabs-smartread-s-case .case__contents-ttl {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--color-base-background);
  @media (max-width: 1280px) {
    grid-area: g-2;
    font-size: max((100vw * 28 / 1280), 20px);
  }
}

.cogentlabs-smartread-s-case .case__contents-textarea {
  margin-top: 24px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  @media (max-width: 1280px) {
    grid-area: g-3;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  @media (max-width: 820px) {
    grid-template-columns: 1fr;
    margin-top: 8px;
  }
  @media (max-width: 500px) {
    padding: 12px;
  }
}

.cogentlabs-smartread-s-case .case__textarea-top .case__textarea-ttl {
  background-color: #253d53;
  color: #fff;
}

.cogentlabs-smartread-s-case .case__textarea-ttl {
  color: #fff;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  width: -moz-fit-content;
  width: fit-content;
  @media (max-width: 1280px) {
    font-size: 16px;
    padding: 8px 18px;
  }
}

.cogentlabs-smartread-s-case .case__textarea-text {
  /* font-weight: 500; */
  font-size: 18px;
  margin-top: 16px;
  line-height: 1.6;
  color: #1b1b1b;
  @media (max-width: 1280px) {
    font-size: 16px;
    margin-top: 14px;
  }
}

.cogentlabs-smartread-s-case .case__textarea-bottom .case__textarea-ttl {
  background-color: #43db90;
}

.cogentlabs-smartread-s-case .case__link {
  margin-top: 32px;
  text-align: center;
  @media (max-width: 1280px) {
    margin-top: 44px;
  }
  @media (max-width: 767px) {
    margin-top: 28px;
  }
}
.cogentlabs-smartread-s-case .case__link a {
  font-size: 24px;
  font-weight: 700;
  color: #00a0e8;
  text-decoration: underline;
  @media (max-width: 767px) {
    font-size: 20px;
    line-height: 1.6;
  }
}

/* 追加CSS smartread-plus導入事例end  */