@charset "utf-8";

/* ==========================================================================
   DoppeLib™ LP 専用スタイルシート（doppelib_lp.css）
   ========================================================================== */

/* iframe内のメインコンテナ設定（共通ヘッダーなどには一切影響を及ぼさない） */
body #doppelib-lp {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #ffffff !important;
  box-sizing: border-box !important;
}

/* LP内の要素のみボックスモデルを初期化 */
#doppelib-lp *, 
#doppelib-lp *::before, 
#doppelib-lp *::after {
  box-sizing: border-box !important;
}

/* LP内部の要素のみ、既存CSS（under.css等のpタグ・hタグの強力なインデントや装飾）の干渉を打ち消す */
#doppelib-lp p {
  text-align: left !important;
  line-height: 1.75 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
}

#doppelib-lp ul, 
#doppelib-lp li {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: none !important;
}

#doppelib-lp h1, 
#doppelib-lp h2, 
#doppelib-lp h3 {
  width: auto !important;
  height: auto !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  font-weight: bold !important;
}

/* 言語表示切り替え制御 */
.break-words {
  overflow-wrap: break-word;
}

html[lang="ja"] .lang-en { display: none !important; }
html[lang="ja"] .lang-ja { display: block !important; }
html[lang="en"] .lang-ja { display: none !important; }
html[lang="en"] .lang-en { display: block !important; }

/* --------------------------------------------------------------------------
   ホバープレビュー機能用スタイル（位置・アニメーション）
   -------------------------------------------------------------------------- */
.complexity-hover-wrap { position: relative; display: inline-block; }
.complexity-hover-target { cursor: default; }
.complexity-hover-preview {
  position: absolute; left: 0; opacity: 0; visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 30; pointer-events: none; top: -140px; width: min(600px, 68vw); transform: none;
}
.complexity-hover-wrap:hover .complexity-hover-preview,
.complexity-hover-wrap:focus-within .complexity-hover-preview { opacity: 1; visibility: visible; }
.complexity-hover-preview img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: none; }
/* スマホ向け調整 */
/*@media (max-width: 768px) { .complexity-hover-preview { top: calc(100% + 12px); width: min(96vw, 760px); } }*/
@media (max-width: 768px) { .complexity-hover-preview { left: 50% !important; top: 50% !important; transform: translate(-35%, -50%) !important; width: min(81vw, 360px) !important; } }

.dual-hover-wrap { position: relative; display: inline-block; cursor: default; }
.dual-hover-preview {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 40; pointer-events: none; width: min(360px, 42vw);
}
.dual-hover-wrap:hover .dual-hover-preview, .dual-hover-wrap:focus-within .dual-hover-preview { opacity: 1; visibility: visible; }
.dual-hover-preview img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: none; }
/* スマホ向け調整 */
@media (max-width: 768px) { .dual-hover-preview { left: 50% !important; top: 50% !important; transform: translate(-20%, -50%) !important; width: min(45vw, 150px) !important; } }

.formats-hover-wrap { position: relative; display: inline-block; cursor: default; }
.formats-hover-preview {
  position: absolute; opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 40; pointer-events: none; left: 0; top: 50%; transform: translate(0, -50%); width: min(360px, 42vw);
}
.formats-hover-wrap:hover .formats-hover-preview, .formats-hover-wrap:focus-within .formats-hover-preview { opacity: 1; visibility: visible; }
.formats-hover-preview img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: none; }

.scalable-hover-wrap { position: relative; display: inline-block; cursor: default; }
.scalable-hover-preview {
  position: absolute; top: 50%; opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 40; pointer-events: none; left: -300px; width: min(600px, 68vw); transform: translate(0, -50%);
}
.scalable-hover-wrap:hover .scalable-hover-preview, .scalable-hover-wrap:focus-within .scalable-hover-preview { opacity: 1; visibility: visible; }
.scalable-hover-preview img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: none; }
/* スマホ向け調整 */
@media (max-width: 768px) { .scalable-hover-preview { left: 50% !important; transform: translate(-20%, -50%) !important; width: min(90vw, 400px) !important; } }

.comb-hover-wrap { position: relative; display: inline-block; cursor: default; }
.comb-hover-preview {
  position: absolute; opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 40; pointer-events: none; left: 0; top: 50%; width: min(360px, 42vw); transform: translate(0, -50%);
}
.comb-hover-wrap:hover .comb-hover-preview, .comb-hover-wrap:focus-within .comb-hover-preview { opacity: 1; visibility: visible; }
.comb-hover-preview img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: none; }

.title-hover-wrap { position: relative; display: inline-block; cursor: default; }
.title-hover-preview {
  position: absolute; left: 0; top: 50%; opacity: 0; visibility: hidden; transform: translate(0, -50%);
  transition: opacity 0.15s ease, visibility 0.15s ease; z-index: 45; pointer-events: none; width: min(500px, 58vw);
}
.title-hover-wrap:hover .title-hover-preview, .title-hover-wrap:focus-within .title-hover-preview { opacity: 1; visibility: visible; }
.title-hover-preview img { display: block; width: 100%; height: auto; border-radius: 28px; box-shadow: none; }
@media (max-width: 768px) { .title-hover-preview { width: min(92vw, 680px); } }
.hero-title .title-hover-preview { top: 0; transform: translateY(0); }
.cta-title .title-hover-preview { top: 40%; transform: translateY(-50%); }

/* ヒーローセクションのタイトルと説明文の間のスペースを広げる */
#doppelib-lp header h1 {
  margin-bottom: 2rem !important;
}

/* 「複雑性のジレンマ」セクションのタイトルと説明文の間のスペース調整 */
#doppelib-lp section h2 {
  margin-bottom: 2rem !important;
}

#doppelib-lp section h3 {
  margin-bottom: 1rem !important;
}

#doppelib-lp section a {
  margin-top: 1rem !important;
}

/* 既存のスタイル */
#cta-container h2.cta-title-fix {
  float: none !important;
  clear: both !important;
  display: block !important;
  width: 100% !important;
  margin-bottom: 8px !important;
}

/* ボタンの幅を強制的に指定 */
#cta-container .cta-btn-fix {
  display: block !important; /* ブロック化 */
  width: 100% !important;    /* 横幅いっぱい */
  box-sizing: border-box !important;
}

/* PCサイズ（画面が広い時）は元の幅に戻す */
@media (min-width: 640px) {
  #cta-container .cta-btn-fix {
    display: inline-block !important;
    width: auto !important;
  }
}