.elementor-51304 .elementor-element.elementor-element-1bdf362{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family );font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-51304 .elementor-element.elementor-element-18e6a88{text-align:center;}.elementor-51304 .elementor-element.elementor-element-18e6a88 .elementor-heading-title{color:var( --e-global-color-text );}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family );font-weight:var( --e-global-typography-text-font-weight );}.elementor-51304 .elementor-element.elementor-element-0c1f9bb.elementor-element{--align-self:center;}.elementor-51304 .elementor-element.elementor-element-aa6156a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}/* Start custom CSS */<style>
/* =========================================================
   とわこみゅ アプリ風利用案内ページ 専用CSS
   親コンテナなし版
   Elementor 各ウィジェットにCSSクラスを直接指定
   ========================================================= */

/* ---------------------------------------------------------
   0. 共通変数
   --------------------------------------------------------- */

.twk-app-html-area {
  --twk-app-text: #172a22;
  --twk-app-muted: #5c6b7f;
  --twk-app-main: #23aeca;
  --twk-app-main-2: #4fc3d7;
  --twk-app-yellow: #ffe24a;
  --twk-app-yellow-2: #fff3a3;
  --twk-app-green: #63b96c;
  --twk-app-bg: #f7fcff;
  --twk-app-bg-yellow: #fff9d8;
  --twk-app-gradient: linear-gradient(90deg, #ffe24a 0%, #4fc3d7 100%);
  --twk-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Yu Gothic UI", Meiryo, sans-serif;

  color: var(--twk-app-text);
  font-family: var(--twk-font-sans);
  font-size: 16.5px;
  line-height: 1.95;
  overflow-wrap: anywhere;
  word-break: normal;
  box-sizing: border-box;
}

.twk-app-html-area *,
.twk-app-html-area *::before,
.twk-app-html-area *::after {
  box-sizing: border-box;
}

/* ---------------------------------------------------------
   1. パンくず
   ElementorウィジェットCSSクラス：twk-app-breadcrumb
   --------------------------------------------------------- */

.twk-app-breadcrumb {
  margin: 0 0 18px !important;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.twk-app-breadcrumb,
.twk-app-breadcrumb p,
.twk-app-breadcrumb span,
.twk-app-breadcrumb a,
.twk-app-breadcrumb .rank-math-breadcrumb,
.twk-app-breadcrumb .rank-math-breadcrumb p,
.twk-app-breadcrumb .rank-math-breadcrumb span,
.twk-app-breadcrumb .rank-math-breadcrumb a {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #0f7f95 !important;
}

.twk-app-breadcrumb p {
  margin: 0 !important;
}

.twk-app-breadcrumb a,
.twk-app-breadcrumb .rank-math-breadcrumb a {
  text-decoration: none !important;
}

.twk-app-breadcrumb a:hover,
.twk-app-breadcrumb .rank-math-breadcrumb a:hover {
  text-decoration: underline !important;
}

/* ---------------------------------------------------------
   2. タイトル
   Elementor見出しウィジェットCSSクラス：twk-app-title-widget
   --------------------------------------------------------- */

.twk-app-title-widget .elementor-heading-title {
  position: relative;
  color: #172a22 !important;
  font-size: clamp(1.72rem, 4vw, 2.35rem) !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.01em;
  margin: 0 0 1.5rem !important;
  padding: 0 0 0.7rem !important;
  border-bottom: 4px solid rgba(35, 174, 202, 0.22);
  overflow-wrap: anywhere;
}

.twk-app-title-widget .elementor-heading-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 180px;
  max-width: 48%;
  height: 4px;
  background: linear-gradient(90deg, #ffe24a 0%, #4fc3d7 100%);
  border-radius: 999px;
}

/* ---------------------------------------------------------
   3. アイキャッチ画像
   Elementor画像ウィジェットCSSクラス：twk-app-eyecatch
   --------------------------------------------------------- */

.twk-app-eyecatch {
  margin: 0 0 30px !important;
}

.twk-app-eyecatch img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(35, 174, 202, 0.14);
}

/* ---------------------------------------------------------
   4. HTML本文エリア
   Elementor HTMLウィジェットCSSクラス：twk-app-html-area
   --------------------------------------------------------- */

.twk-app-html-area {
  max-width: 100%;
}

.twk-app-html-area p {
  margin: 0 0 1.45em !important;
  color: #24332b;
  line-height: 1.95 !important;
}

.twk-app-html-area p:last-child {
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   5. 導入文
   HTML内クラス：twk-app-lead
   --------------------------------------------------------- */

.twk-app-html-area .twk-app-lead {
  background: linear-gradient(135deg, #f7fcff 0%, #fff9d8 100%);
  padding: 20px 22px;
  border-left: 6px solid #23aeca;
  border-radius: 0 16px 16px 0;
  margin: 0 0 30px;
  box-shadow: 0 8px 22px rgba(35, 174, 202, 0.08);
}

.twk-app-html-area .twk-app-lead p {
  margin: 0 0 1.45em !important;
  color: #24332b;
  line-height: 1.95 !important;
}

.twk-app-html-area .twk-app-lead p:last-child {
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   6. ショートコード部分
   HTML内クラス：twk-app-shortcode
   --------------------------------------------------------- */

.twk-app-html-area .twk-app-shortcode {
  margin: 30px 0 42px;
}

/* ---------------------------------------------------------
   7. 本文セクション
   HTML内クラス：twk-app-section
   --------------------------------------------------------- */

.twk-app-html-area .twk-app-section {
  margin: 0 0 2.8rem;
}

.twk-app-html-area .twk-app-section p {
  margin: 0 0 1.45em !important;
  color: #24332b;
  line-height: 1.95 !important;
}

.twk-app-html-area .twk-app-section p:last-child {
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   8. H2見出し
   twk-app-html-area内のtwk-app-section h2だけに適用
   --------------------------------------------------------- */

.twk-app-html-area .twk-app-section h2 {
  position: relative;
  background: linear-gradient(135deg, #fff9d8 0%, #f7fcff 100%);
  color: #172a22 !important;
  padding: 1.05rem 1.25rem 1.05rem 1.35rem;
  border-left: 7px solid #23aeca;
  border-bottom: 2px solid rgba(35, 174, 202, 0.35);
  font-size: clamp(1.32rem, 2.4vw, 1.62rem) !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.01em;
  margin: 3.2rem 0 1.55rem !important;
  border-radius: 0 14px 14px 0;
  box-shadow: 0 8px 22px rgba(23, 42, 34, 0.07);
  clear: both;
  overflow-wrap: anywhere;
}

.twk-app-html-area .twk-app-section h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 42%;
  height: 2px;
  background: linear-gradient(90deg, #ffe24a 0%, #4fc3d7 100%);
  border-radius: 999px;
}

/* ---------------------------------------------------------
   9. リンク
   --------------------------------------------------------- */

.twk-app-html-area a {
  color: #0f7f95;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.twk-app-html-area a:hover {
  color: #0a6576;
}

/* ---------------------------------------------------------
   10. 画像・iframe保険
   --------------------------------------------------------- */

.twk-app-html-area img,
.twk-app-html-area video,
.twk-app-html-area iframe,
.twk-app-html-area embed,
.twk-app-html-area object {
  max-width: 100% !important;
}

.twk-app-html-area img {
  height: auto !important;
  display: block;
  border-radius: 14px;
}

.twk-app-html-area iframe {
  width: 100% !important;
  border: 0;
  border-radius: 14px;
}

/* ---------------------------------------------------------
   11. スマホ調整
   --------------------------------------------------------- */

@media (max-width: 767px) {
  .twk-app-breadcrumb,
  .twk-app-breadcrumb p,
  .twk-app-breadcrumb span,
  .twk-app-breadcrumb a,
  .twk-app-breadcrumb .rank-math-breadcrumb,
  .twk-app-breadcrumb .rank-math-breadcrumb p,
  .twk-app-breadcrumb .rank-math-breadcrumb span,
  .twk-app-breadcrumb .rank-math-breadcrumb a {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  .twk-app-title-widget .elementor-heading-title {
    font-size: 1.55rem !important;
    line-height: 1.42 !important;
    margin-bottom: 1.25rem !important;
    padding-bottom: 0.65rem !important;
  }

  .twk-app-eyecatch {
    margin-bottom: 24px !important;
  }

  .twk-app-eyecatch img {
    border-radius: 14px !important;
  }

  .twk-app-html-area {
    font-size: 15.5px;
    line-height: 1.85;
  }

  .twk-app-html-area .twk-app-lead {
    padding: 16px;
    border-left-width: 5px;
    border-radius: 0 14px 14px 0;
    margin-bottom: 26px;
  }

  .twk-app-html-area p,
  .twk-app-html-area .twk-app-lead p,
  .twk-app-html-area .twk-app-section p {
    line-height: 1.85 !important;
    margin-bottom: 1.45em !important;
  }

  .twk-app-html-area .twk-app-section h2 {
    font-size: 1.28rem !important;
    padding: 0.9rem 1rem;
    margin: 2.6rem 0 1.25rem !important;
    border-left-width: 6px;
  }

  .twk-app-html-area .twk-app-shortcode {
    margin: 24px 0 34px;
  }

  .twk-app-html-area .twk-app-section {
    margin-bottom: 2.4rem;
  }
}

/* ---------------------------------------------------------
   12. PC表示
   --------------------------------------------------------- */

@media (min-width: 1024px) {
  .twk-app-html-area {
    font-size: 16.5px;
  }

  .twk-app-html-area p,
  .twk-app-html-area .twk-app-lead p,
  .twk-app-html-area .twk-app-section p {
    line-height: 1.95 !important;
  }
}
</style>/* End custom CSS */