/*↓テンプレート共通（solwithmenu.css）*/
 * {-webkit-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box; box-sizing: border-box;}
body{ margin: 0; padding: 0; color:#333; line-height: 2em}
h1{color: white; margin: 0;}
h1,h2{ text-align: center}
h2{color: #5265AF}
/*↑テンプレート共通（solwithmenu.css）*/
h3{ color:#FFFFFF; font-size:18px}
a{text-decoration:none; display:inline-block;}
ul,li{ margin:0; padding:0; line-height:2; font-size:20px}
ul li{ list-style-type:none}

img{ margin: 0; margin-left: auto; margin-right: auto; padding: 0; padding-top: 30px; max-width: 100%;}
header{background-color: #5265AF; padding: 60px 0 50px;position: relative; margin-bottom: 100px}
footer{background-color: #5265AF; padding: 60px 0 50px; text-align: center}
footer a{text-decoration: none}
footer a h2:hover{color: #fff46b}
header h2,footer h2,small{ color: white}
header:after{ content: "";
     position: absolute;
  top: 100%;
  left: 0;
  right: 0;
     margin: auto;
  height: 0;
  width: 0;
  border: 300px solid transparent;
  border-top: 40px solid #5265AF;
}
section div, div.wrap div{width: 48%; display: inline-block; vertical-align: middle}
@media only screen and (max-width: 768px) {
section div, div.wrap div{
width:100%; display:block}
header:after{ 
 border: 100px solid transparent;
 border-top: 40px solid #5265AF;
}/*逆三角形はみ出ているのを縮小 22/8/3*/
}
div.wrap div{padding-left: 10px}
div.wrap,section{ width: 960px; max-width: 100%; margin: auto; text-align:center}
div.bg{ padding: 80px 0; background-color: #EFF1F8; position: relative; margin-bottom: 40px}
.imagecenter{text-align: center}
div.bg:after{ content: "";
     position: absolute;
  top: 100%;
  left: 0;
  right: 0;
     margin: auto;
  height: 0;
  width: 0;
  border: 300px solid transparent;
  border-top: 40px solid #EFF1F8;}
.ryousyuuimage{ width: 90%; padding-left: 10%}
section{ border-bottom: 1px solid #DDDDDD; padding: 30px 0 50px}
li span{font-weight: bold}
table{ width: 100%; padding-bottom: 60px; border: 1px solid #FFF; }
table thead{ text-align: center; font-weight: bold}
table th{ border-bottom: 1px solid #DDDDDD;}
table td{ width: 30%; text-align: right; font-size: 14px}
table tr:nth-child(2) td{ padding-top: 10px}
table td:nth-child(2){ width: 18%}
table td:nth-child(3){ width: 27%}

.heading-16 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333333;
}

.heading-16::before,
.heading-16::after {
    width: 3px;
    height: 40px;
    background-color: #5265AF;
    content: '';
}

.heading-16::before {
    transform: rotate(-35deg);
    margin-right: 30px;
}

.heading-16::after {
    transform: rotate(35deg);
    margin-left: 30px;
}
.drawer-hidden {
  display: none;
}

.drawer{position: absolute; top:0; right:0}
nav.drawer-content h2{color:#5265AF}
.drawer-content a{color:#5265AF;padding:0 8px; font-size:18px}
.drawer-content a:hover{ color:#ECDF40}
.drawer-list{ max-width:600px; margin:auto}
.drawer-list li {line-height:1.7}
/* ハンバーガーアイコンの設置スペース */
.drawer-open {
  display: flex;
  height: 60px;
  width: 160px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上に */
  cursor: pointer;
  color:#FFFFFF
}
.drawer-open span{right:24px}
/* ハンバーガーメニューのアイコン */
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #FFF;
  transition: 0.5s;
  position: absolute;
}

/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
  bottom: 8px;
}

/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer-check:checked ~ .drawer-open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
  bottom: 0;
  transform: rotate(45deg);
  background:#5265AF
}

#drawer-check:checked ~ .drawer-open span::after {
  top: 0;
  transform: rotate(-45deg);
   background:#5265AF
}
  
/* メニューのデザイン*/
.drawer-content {
  width: 100%;
  position: fixed;
  top: 0;
  left: 100%;/* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #EFF1F8;
  transition: .5s;
  padding:16px 0 32px 0
}

/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
  left: 0;/* メニューを画面に入れる */
}


.btn-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 440px; /* 視認性の高い大きめサイズ */
  width: 100%;
  margin: 32px auto;
  padding: 18px 24px;
  background-color: #2563eb; /* 鮮やかなロイヤルブルー */
  color: #ffffff !important;
  text-decoration: none !important;
  border: 3px solid #000000; /* くっきりとした太い黒の境界線 */
  border-radius: 12px; /* トレンドの角丸 */
  
  /* ボケ感のない、くっきりとしたソリッドな影（黒） */
  box-shadow: 6px 6px 0px 0px #000000; 
  
  font-family: system-ui, -apple-system, sans-serif;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  position: relative;
}

/* 上部の補足テキスト */
.btn-quote__sub {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  text-transform: uppercase;
  opacity: 0.9;
}

/* メインのテキスト */
.btn-quote__main {
  font-size: 20px;
  font-weight: 800; /* 存在感のある太文字 */
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 右矢印（アイコン） */
.btn-quote__main::after {
  content: "→"; /* トレンドのシンプルなテキスト矢印 */
  font-size: 22px;
  font-weight: bold;
  transition: transform 0.2s ease;
}

/* マウスホバー・タップ時の動き */
@media (hover: hover) {
  .btn-quote:hover {
    /* 影の方向にボタンが押し込まれるクリックエフェクト */
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0px 0px #000000;
    background-color: #3C50A0; /* 濃いブルーへ変化 */
  }
  
  .btn-quote:hover .btn-quote__main::after {
    transform: translateX(4px); /* 矢印が右にスライド */
  }
}

/* スマートフォン表示用の最適化 */
@media (max-width: 480px) {
  .btn-quote {
    padding: 16px 20px;
    box-shadow: 4px 4px 0px 0px #000000; /* スマホでは影を少し浅く */
  }
  .btn-quote:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px 0px #000000;
  }
  .btn-quote__main {
    font-size: 18px;
  }
}

/* はみ出し防止用のレスポンシブコンテナ */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin: 32px 0;
  padding-bottom: 8px;
}

/* ミニマル・クリーン様式の比較表ベース */
.comparison-table {
  width: 100%;
  min-width: 900px; /* 横幅の比率を維持するため最小幅を少し広げて調整 */
  border-collapse: collapse;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #1e293b;
  background-color: #ffffff;
  border-top: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
  box-sizing: border-box;
  table-layout: fixed; /* 列幅の固定・均等割り付けを有効化 */
}
.comparison-table th:nth-child(1) { width: 130px; } /* 項目名列 */
.comparison-table th:nth-child(2) { width: 290px; } /* ★ 自社ツール（幅を最大に拡大） */
.comparison-table th:nth-child(3) { width: 160px; } /* A社（幅をスリムに） */
.comparison-table th:nth-child(4) { width: 160px; } /* B社（幅をスリムに） */
.comparison-table th:nth-child(5) { width: 160px; } /* C社（幅をスリムに） */


/* ヘッダー行スタイル */
.comparison-table th {
  background-color: #f8fafc;
  color: #0f172a;
  font-weight: 700;
  padding: 18px 16px;
  text-align: center;
  border-bottom: 1px solid #e2e8f0;
}

/* 一番左の項目列（縦見出し） */
.comparison-table td.row-title {
  background-color: #ffffff;
  font-weight: 700;
  color: #475569;
  text-align: center;
  width: 130px;
  border-right: 1px solid #e2e8f0;
}

/* 一般のデータセル（薄いグレーの横線のみ） */
.comparison-table td {
  padding: 18px 16px;
  text-align: center;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: top;
}

/* テキストを左寄せにする汎用クラス */
.comparison-table td.text-left {
  text-align: left;
}

/* ★ 自社ツール（一番右の列）を3pxの黒線で囲む特別スタイル */
.comparison-table th.highlight-col {
  background-color: #2563eb;
  color: #ffffff;
  /* 上・左・右を3pxの黒線で囲む */
  border-top: 3px solid #5265AF;
  border-left: 3px solid #5265AF;
  border-right: 3px solid #5265AF;
  border-bottom: 3px solid #5265AF;
}

.comparison-table td.highlight-col {
  background-color: #f0f5ff; /* 淡いブルー */
  font-weight: 500;
  /* 左と右を3pxの黒線で囲む */
  border-left: 3px solid #5265AF;
  border-right: 3px solid #5265AF;
}

/* 一番下の行の自社セルだけ、下側も3pxの黒線にする */
.comparison-table tbody tr:last-child td.highlight-col {
  border-bottom: 3px solid #5265AF;
}

/* テキスト強調用パーツ */
.comparison-table .font-bold {
  font-weight: 700;
}
.comparison-table .price-text {
  font-size: 16px;
  color: #2563eb;
  font-weight: 700;
}
.comparison-table .text-accent {
  color: #e11d48;
  font-weight: 700;
}
.comparison-table .text-sm {
  font-size: 12px;
  font-weight: normal;
  color: #64748b;
}

/* マウスホバー時 */
.comparison-table tbody tr {
  transition: background-color 0.15s ease;
}
.comparison-table tbody tr:hover {
  background-color: #f1f5f9;
}
.comparison-table tbody tr:hover td.highlight-col {
  background-color: #e0eafe;
}