@charset "UTF-8";
/* ==========================================================================
   llmo.css  ―  /tokyo/llmo/ ページ専用スタイル
   既存フレームワーク（bootstrap / style / bamboo.css）に追記する形で読み込みます。
   すべて .llmo- プレフィックスでスコープし、既存スタイルと衝突しません。
   ========================================================================== */

.llmo-accent{color:#f08300;}

/* ---- badge / keyword chips ---- */
.llmo-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.12em;
  color:#006a6c;background:rgba(254,72,59,.08);
  border:1px solid rgba(254,72,59,.35);border-radius:999px;
  padding:6px 16px;
}
.llmo-badge i{width:7px;height:7px;border-radius:50%;background:#006a6c;display:inline-block;}
.llmo-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.llmo-chip{
  font-weight:700;font-size:13px;padding:7px 14px;border-radius:8px;
  background:#f08300;color:#fff;
}
.llmo-chip.is-key{background:#006a6c;}

/* ---- number band ---- */
.llmo-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  background:#fff;border:1px solid #e7e9ec;border-radius:16px;
  padding:28px 18px;box-shadow:0 12px 34px rgba(13,34,70,.10);
}
.llmo-stat{text-align:center;position:relative;}
.llmo-stat:not(:last-child)::after{content:"";position:absolute;right:-7px;top:16%;height:68%;width:1px;background:#e7e9ec;}
.llmo-stat .n{font-family:"Oswald",sans-serif;font-size:clamp(30px,4.5vw,46px);font-weight:700;line-height:1;color:#f08300;}
.llmo-stat .n em{color:#006a6c;font-style:normal;font-size:.5em;vertical-align:super;}
.llmo-stat .t{font-size:12px;color:#4a525c;margin-top:8px;line-height:1.5;}

/* ---- trend cards ---- */
.llmo-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.llmo-card{
  background:#fff;border:1px solid #e7e9ec;border-radius:16px;padding:24px;
  position:relative;transition:.25s;
}
/* overflow:hidden は付けない（fds_tooltip の吹き出しが切れるため）。
   上部アクセントバーは ::before 側を上だけ角丸にして角を揃える。 */
.llmo-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:#006a6c;border-radius:16px 16px 0 0;transform:scaleX(0);transform-origin:left;transition:.3s;}
.llmo-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(13,34,70,.12);z-index:5;}
.llmo-card:hover::before{transform:scaleX(1);}
.llmo-card .no{font-family:"Oswald",sans-serif;font-size:13px;font-weight:600;color:#006a6c;letter-spacing:.1em;}
.llmo-card .ic{font-size:30px;line-height:1;margin:6px 0 8px;}
.llmo-card h3{font-size:17px;font-weight:900;color:#0d2746;margin-bottom:8px;}
.llmo-card p{font-size:13px;color:#4a525c;line-height:1.75;margin:0;text-align:justify;}

/* ---- 4-layer stack diagram ---- */
.llmo-stack{
  background:linear-gradient(160deg,#0d2746,#11365f);border-radius:18px;padding:30px;color:#fff;
}
.llmo-stack-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.llmo-layer{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:12px;padding:18px 14px;text-align:center;position:relative;
}
.llmo-layer .lc{font-family:"Oswald",sans-serif;font-size:12px;letter-spacing:.08em;color:#fe9a91;}
.llmo-layer .lt{font-weight:900;font-size:14px;margin:6px 0 4px;}
.llmo-layer .ld{font-size:11.5px;color:rgba(255,255,255,.78);line-height:1.6;}
.llmo-layer .num-b{position:absolute;top:-10px;left:14px;width:24px;height:24px;border-radius:50%;background:#f08300;font-family:"Oswald";font-weight:700;font-size:13px;display:grid;place-items:center;}

/* ---- self-check ---- */
.llmo-check{list-style:none;margin:0;padding:0;}
.llmo-check li{
  background:#fff;border:1px solid #e7e9ec;border-radius:12px;
  padding:16px 18px 16px 50px;margin-bottom:10px;position:relative;
  font-size:14px;color:#161a1f;font-weight:700;
}
.llmo-check li::before{
  content:"✓";position:absolute;left:16px;top:14px;
  width:22px;height:22px;border-radius:6px;background:rgba(254,72,59,.12);color:#006a6c;
  display:grid;place-items:center;font-size:13px;font-weight:900;
}
.llmo-check li span{display:block;font-weight:400;font-size:12.5px;color:#4a525c;margin-top:4px;}

/* ---- pillar links to existing pages ---- */
.llmo-route{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.llmo-route a{
  display:block;text-decoration:none;border-radius:16px;padding:26px;
  border:1px solid #e7e9ec;background:#fff;transition:.25s;color:#161a1f;
}
.llmo-route a:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(13,34,70,.12);border-color:#006a6c;}
.llmo-route .rk{font-family:"Oswald",sans-serif;font-size:12px;letter-spacing:.12em;color:#006a6c;font-weight:600;}
.llmo-route .rt{font-size:18px;font-weight:900;color:#0d2746;margin:6px 0;}
.llmo-route .rd{font-size:13px;color:#4a525c;line-height:1.7;}
.llmo-route .rgo{display:inline-block;margin-top:12px;color:#006a6c;font-weight:700;font-size:13px;}

/* ---- responsive ---- */
@media(max-width:767px){
  .llmo-stats{grid-template-columns:repeat(2,1fr);gap:22px 12px;}
  .llmo-stat:not(:last-child)::after{display:none;}
  .llmo-cards{grid-template-columns:1fr;}
  .llmo-stack-row{grid-template-columns:1fr 1fr;gap:18px 12px;}
  .llmo-route{grid-template-columns:1fr;}
}
/* 4層スタックは 575.98px 以下で 1カラムに */
@media(max-width:575.98px){
  .llmo-stack-row{grid-template-columns:1fr;}
}



.llmo_img_01 { width: 120px; margin-top: 12px; margin-bottom: 12px; }
.llmo_tac_01 {  }
@media (max-width: 991.98px) {
.llmo_img_01 { width: 120px; margin-top: 12px; margin-bottom: 12px; }
.llmo_tac_01 { text-align: center }
}


.security-web_01 { width: 240px; margin-top: 12px; margin-bottom: 12px; }
@media (max-width: 1599.98px) {
.security-web_01 { width: 180px; margin-top: 12px; margin-bottom: 12px; }
}
@media (max-width: 991.98px) {
.security-web_01 { width: 120px; margin-top: 12px; margin-bottom: 12px; }
}


.renewal_fc_01 { color: #f08300!important; }
.renewal_fc_02 { color: #ededed!important; }
.renewal_fc_03 { color: #006a6c!important; }

.renewal-img_01 { display: block; width: 72%; margin-top: 12px; margin-bottom: 24px; margin-left: auto; margin-right: auto; }
.renewal-img_02 { display: block; width: 100%; margin-top: 12px; margin-bottom: 24px; margin-left: auto; margin-right: auto; }
.renewal-img_03 { display: block; width: 72%; margin-top: 12px; margin-bottom: 24px; margin-left: auto; margin-right: auto; }
@media (max-width: 991.98px) {
  .renewal-img_01 { width: 84%; }
}
@media (max-width: 767px) {
  .renewal-img_01 { width: 72%; }
  .renewal-img_02 { width: 72%; }
  .renewal-img_03 { width: 100%; }
}



/* 画像付きルートカード */
.llmo-route a.rgo-has-img{
  display: flex;
  align-items: center;   /* 画像とテキストを上下中央で揃える。上揃えにしたい場合は flex-start */
  gap: 16px;
}
.llmo-route a.rgo-has-img .rgo-thumb{
  flex: 0 0 120px;       /* 120pxで固定（縮まない） */
  width: 120px;
  height: 120px;
  object-fit: cover;     /* 比率を保ったまま枠いっぱいに */
  border-radius: 8px;    /* 角丸が不要なら削除 */
}
.llmo-route a.rgo-has-img .rgo-body{
  flex: 1 1 auto;
  min-width: 0;          /* テキストの折り返し崩れ防止 */
  display: block;
}
.llmo-route a.rgo-has-img .rk,
.llmo-route a.rgo-has-img .rt,
.llmo-route a.rgo-has-img .rd,
.llmo-route a.rgo-has-img .rgo{
  display: block;
}

/* スマホで縦並びにしたい場合（任意） */
@media (max-width: 575px){
  .llmo-route a.rgo-has-img{
    flex-direction: column;
    align-items: flex-start;
  }
}



/* ---- 機会損失カード：3カラム版（llmo-cardsの2カラムに対する追加パターン） ---- */
.arw-cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.arw-cards3 .llmo-card{margin:0;}
@media(max-width:767px){.arw-cards3{grid-template-columns:1fr;}}

/* ---- お問い合わせ後の流れ：3ステップ・矢印つなぎ ---- */
.arw-flow{background:linear-gradient(160deg,#0d2746,#11365f);border-radius:18px;padding:34px 30px;color:#fff;}
.arw-flow-row{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:10px;}
.arw-step{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:22px 18px;text-align:center;position:relative;}
.arw-step .num{width:30px;height:30px;border-radius:50%;background:#f08300;font-family:"Oswald",sans-serif;font-weight:700;font-size:14px;display:grid;place-items:center;margin:0 auto 10px;}
.arw-step .st{font-weight:900;font-size:15px;margin-bottom:6px;}
.arw-step .sd{font-size:12.5px;color:rgba(255,255,255,.82);line-height:1.7;}
.arw-arrow{font-size:22px;color:#f08300;text-align:center;}
@media(max-width:767px){
  .arw-flow-row{grid-template-columns:1fr;}
  .arw-arrow{transform:rotate(90deg);}
}

/* ---- 定義ボックス（AI対応型ホームページとは？セクション） ---- */
.arw-define{background:#fff;border:1px solid #e7e9ec;border-radius:16px;padding:28px 26px;box-shadow:0 12px 34px rgba(13,34,70,.08);}
.arw-define .lead{font-size:15px;font-weight:900;color:#0d2746;line-height:1.8;margin-bottom:10px;}
.arw-define p{font-size:14px;color:#4a525c;line-height:1.9;margin:0;text-align:justify;}
.arw-analogy{display:flex;gap:14px;align-items:flex-start;background:rgba(0,123,187,.06);border:1px solid rgba(0,123,187,.25);border-radius:12px;padding:16px 18px;margin-top:16px;}
.arw-analogy .ic{font-size:26px;line-height:1;}
.arw-analogy p{font-size:13.5px;color:#0d2746;line-height:1.8;margin:0;}




/* hayato 追加 */
.arw_ff_01 { font-family: "Noto Sans JP", sans-serif!important; }
.arw_fs_01 { font-size:93%; }
.arw_m_01 { font-family: "Noto Sans JP", sans-serif!important; font-size: 16px!important; font-weight: 600; line-height: 1.6; letter-spacing: 0.1em; }
.arw_p_01 { font-family: "Noto Sans JP", sans-serif!important; font-size: 16px!important; font-weight: 500; line-height: 1.6; letter-spacing: 0.1em; }
.arw_p_02 { font-family: "Noto Sans JP", sans-serif!important; font-size: 13px!important; font-weight: 400; line-height: 1.6; letter-spacing: 0.1em; }
.arw_bg_01 { background-image: url(/ai-ready-website/w_img/background_pc.webp); background-size: cover; background-position: center center; background-attachment: fixed; }
.arw_ds_01 { display: none; }
@media (max-width: 1799.98px) {
.arw_fs_01 { font-size:66%; }
.arw_m_01 { font-size: 15.7px!important; }
.arw_p_01 { font-size: 15.7px!important; }
}
@media (max-width: 1599.98px) {
.arw_m_01 { font-size: 15.4px!important; }
.arw_p_01 { font-size: 15.4px!important; }
}
@media (max-width: 1399.98px) {
.arw_m_01 { font-size: 15.1px!important; }
.arw_p_01 { font-size: 15.1px!important; }
}
@media (max-width: 1199.98px) {
.arw_m_01 { font-size: 14.8px!important; }
.arw_p_01 { font-size: 14.8px!important; }
}

@media (max-width: 991.98px) {
.arw_fs_01 { font-size:48%; }
.arw_m_01 { font-size: 14.5px!important; }
.arw_p_01 { font-size: 14.5px!important; }
.arw_ds_01 { display: inherit; }
}
@media (max-width: 767px) {
.arw_fs_01 { font-size:93%; }
.arw_m_01 { font-size: 14px!important; }
.arw_p_01 { font-size: 14px!important; }
.arw_ds_01 { display: none; }
}
@media (max-width: 575px) {
.arw_m_01 { font-size: 13.5px!important; }
.arw_p_01 { font-size: 13.5px!important; }
.arw_bg_01 { background-image: url(/ai-ready-website/w_img/background_pc_sp.webp); background-size: cover; background-position: center center; background-attachment: fixed; }
.arw_ds_01 { display: inherit; }
}
@media (max-width: 479.98px) {
.arw_m_01 { font-size: 13px!important; }
.arw_p_01 { font-size: 13px!important; }
.arw_fs_01 { font-size:78%; }
}