/* ==================================================
    導入の流れページ
================================================== */
.introduction-flow-container {
    border-color: #4F4171 !important;
    width: 80% !important;
    margin: 0 auto;
}
.introduction-flow-container h2 {
    font-size: 1.8rem;
    margin-bottom: 10px !important;
}
.introduction-flow-container h2 span {
    font-size: 1.2rem;
    margin-right: 0.5rem;
}
.introduction-flow-container h3 {
    font-size: 1.4rem;
    margin-bottom: 10px !important;
}
.introduction-flow-container p {
    margin-bottom: 10px !important;
}
.button-introduction-flow a {
    border-color: #999 !important;
    width: 200px !important;
}
.introduction-flow-arrow-container {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 15px;
}
/* ★ 末尾に , #question を追加し、!important で位置調整を確実に有効化しました */
#step1, #step2, #step3, #step4, #merit, #comparison, #question {
    scroll-margin-top: 160px !important; 
}
.fa-chevron-down {
    color: #4F4171;
    font-size: 1.5rem;
}

/* ==================================================
    製品ページ
================================================== */
.p-gray-area {
  background-color: #f2f2f2;
  padding: 60px 20px;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.l-content {
  max-width: 1000px;
  margin: 0 auto;
}
.m-mh {
  text-align: center;
  font-size: 22px;
  color: #333;
  margin-bottom: 40px;
  position: relative;
}
.m-mh::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background-color: #e5007f;
  margin: 10px auto 0;
}
.p-gateway {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.p-gateway-box {
  background-color: #ffffff;
  border: 1px solid #ccc;
  width: calc(50% - 12px);
  box-sizing: border-box;
  padding: 40px 30px 20px 30px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.p-gateway-box h3 {
  font-size: 24px;
  color: #333;
  margin: 0 0 20px 0;
  text-align: center;
  font-weight: bold;
}
.p-gateway-img {
  width: 100%;
  max-width: 280px;
  height: auto;
  margin-bottom: 30px;
  text-align: center;
}
.p-gateway-img img {
  width: 100%;
  height: auto;
}

.p-gateway-txt {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.p-gateway-txt dl {
  margin: 0 0 20px 0;
  font-size: 13px;
  line-height: 1.6;
  display: flex;
  border-top: 1px solid #e0e0e0;
}
.p-gateway-txt dt {
  width: 90px;
  font-weight: bold;
  color: #333;
  padding: 12px 0;
  flex-shrink: 0;
  text-align: left;
}
.p-gateway-txt dd {
  margin-left: 0;
  flex-grow: 1;
  color: #666;
  padding: 12px 0;
  text-align: left;
}

.extended-text {
  color: #f39800;
  font-weight: bold;
  display: inline-block;
  margin: 8px 0;
}

.p-gateway-link {
  margin: auto 0 0 0;
  text-align: right;
  font-size: 12px;
  border-top: 1px solid #e0e0e0;
  padding-top: 15px;
  width: 100%;
}
.p-gateway-link a {
  color: #333;
  text-decoration: none;
}
.p-gateway-link a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .p-gateway-box {
    width: 100%;
  }
}

#subscription {
    scroll-margin-top: 100px !important;
}
#lg-popchat-x {
    scroll-margin-top: 170px !important;
}

/* ==================================================
    機能ページ：ページ内リンク位置調整（JS強制スクロール対策版）
================================================== */
.jump-anchor {
    display: block !important;
    position: relative !important;
    visibility: hidden !important; /* 透明で見えなくする */
    
    /* ★ ここの数値を大きくすると、ジャンプした時により「下」で止まります */
    height: 230px !important;      /* 基準となる高さを確保 */
    margin-top: -230px !important;  /* デザインを崩さないように同じ分だけマイナスで相殺 */
}
.table-function {
    border: none;
    border-spacing: 0;
    border-collapse: inherit;
    margin-bottom: 50px;
}
.table-function:last-child {
    margin-bottom: 0;
}
.table-function th {
    border: 1px solid #ccc;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.table-function td {
    vertical-align: top;
}
.table-function td.first-td, .table-function td.bottom-first {
    text-align: center;
    width: 20%;
}
.table-function td.mid-td, .table-function td.bottom-second {
    text-align: center;
    width: 25%;
}
.table-function td.first-td, .table-function td.mid-td {
    border-left: 1px solid #ccc;
    border-top: none;
    border-right: solid 1px #ccc;
    border-bottom: 1px solid #ccc;
}
.table-function td.last-td {
    border-left: 1px solid #ccc;
    border-top: none;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.table-function td.bottom-first, .table-function td.bottom-second {
    border-left: 1px solid #ccc;
    border-top: none;
    border-right: solid 1px #ccc;
    border-bottom: 1px solid #ccc;
    border-bottom-left-radius: 10px;
}
.table-function td.bottom-third {
    border-left: 1px solid #ccc;
    border-top: none;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-bottom-right-radius: 10px;
}
.function-heading-pink, .function-heading-navy, .function-heading-orange {
    align-items: center;
    display: flex;
}
.function-heading-pink::before, .function-heading-pink::after {
    background-color: #DD007F;
    content: "";
    flex-grow: 1;
    height: 5px;
}
.function-heading-navy::before, .function-heading-navy::after {
    background-color: #545F89;
    content: "";
    flex-grow: 1;
    height: 5px;
}
.function-heading-orange::before, .function-heading-orange::after {
    background-color: #F4CDAC;
    content: "";
    flex-grow: 1;
    height: 5px;
}
.function-heading::before, .function-heading::after {
    background-color: #94618c;
    border-radius: 5px;
    content: "";
    flex-grow: 1;
    height: 5px;
}
.function-wrap-pink {
    border: 1px solid #DD007F;
    padding: 0;
    margin-bottom: 50px;
    border-radius: 10px;
}
.function-wrap-pink h1 {
    background: #DD007F;
    font-size: 1.75rem;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    margin: 0 auto 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.function-wrap-navy {
    border: 1px solid #545F89;
    padding: 0;
    margin-bottom: 50px;
    border-radius: 10px;
}
.function-wrap-navy h1 {
    background: #545F89;
    font-size: 1.75rem;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    margin: 0 auto 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.function-wrap-navy h3, .function-wrap-orange h3 {
    font-size: 1.1rem;
    margin: 0 auto 10px;
}
.function-wrap-navy h4 {
    font-size: 1rem;
    margin: 0 auto 10px;
}
.function-wrap-orange {
    border: 1px solid #F4CDAC;
    padding: 0;
    margin-bottom: 50px;
    border-radius: 10px;
}
.function-wrap-orange h1 {
    background: #F4CDAC;
    font-size: 1.75rem;
    color: #555 !important;
    text-align: center;
    padding: 5px 0;
    margin: 0 auto 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.function_activate, .function_redundancy, .function_cloud, .function_independent_defense, .function_twofactor_authentication, .function_single-signon, .function_communication_control, .function_vlan, .function_ipv4, .function_standalone, .function_iot, .function_hub, .function_ble {
    position: relative;
    padding: 30px 50px;
    min-height: 400px;
    overflow: hidden;
    clear: both;
}
.function_twofactor_authentication-sub, .function_communication_control-sub {
    padding: 30px 50px;
    overflow: hidden;
    clear: both;
}
.function_twofactor_authentication-certification {
    padding: 10px 50px;
    overflow: hidden;
    clear: both;
}
.function_activate::before, .function_redundancy::before, .function_cloud::before, .function_independent_defense::before, .function_twofactor_authentication::before, .function_single-signon::before, .function_communication_control::before, .function_vlan::before, .function_ipv4::before, .function_standalone::before, .function_iot::before, .function_hub::before, .function_ble::before {
    content: "";
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.5;
    z-index: 0;
}
.function_activate > *, .function_redundancy > *, .function_cloud > *, .function_independent_defense > *, .function_twofactor_authentication > *, .function_single-signon > *, .function_communication_control > *, .function_vlan > *, .function_ipv4 > *, .function_standalone > *, .function_iot > *, .function_hub > *, .function_ble > * {
    position: relative;
    z-index: 1;
}
.function_activate::before { background-image: url("../images/function/bg_function_activate.png"); background-size: 240px; }
.function_redundancy::before { background-image: url("../images/function/bg_function_redundancy.png"); background-size: 300px; }
.function_cloud::before { background-image: url("../images/function/bg_function_cloud.png"); background-size: 180px; }
.function_independent_defense::before { background-image: url("../images/function/bg_function_independent_defense.png"); background-size: 180px; }
.function_twofactor_authentication::before { background-image: url("../images/function/bg_function_twofactor_authentication.png"); background-size: 180px; }
.function_single-signon::before { background-image: url("../images/function/bg_function_single_signon.png"); background-size: 180px; }
.function_communication_control::before { background-image: url("../images/function/bg_function_communication_control.png"); background-size: 180px; }
.function_vlan::before { background-image: url("../images/function/bg_function_vlan.png"); background-size: 180px; }
.function_ipv4::before { background-image: url("../images/function/bg_function_ipv4.png"); background-size: 150px; }
.function_standalone::before { background-image: url("../images/function/bg_function_standalone.png"); background-size: 180px; }
.function_iot::before { background-image: url("../images/function/bg_function_iot.png"); background-size: 180px; }
.function_hub::before { background-image: url("../images/function/bg_function_hub.png"); background-size: 180px; }
.function_ble::before { background-image: url("../images/function/bg_function_ble.png"); background-size: 180px; }

.function-img {
    float: right;
    margin-left: 15px;
    width: 250px;
    padding: 0;
    position: relative;
    top: -20px;
}
.function-p {
    clear: both;
    overflow: hidden;
}
.bg-pink { background-color: #DD007F; color: #fff; font-weight: bold; }
.bg-navy { background-color: #545F89; color: #fff; font-weight: bold; }
.bg-yellow { background-color: #a6965b; color: #fff; font-weight: bold; }
.function-note { font-size: 0.9rem; text-align: right; }
.function_twofactor_authentication-sub h5 {
    font-size: 1.2rem;
    padding: 5px;
    border-bottom: 3px solid #545F89 !important;
    text-align: left;
}

@media screen and (max-width: 767px) {
    .function_activate, .function_redundancy, .function_cloud, .function_independent_defense, .function_twofactor_authentication, .function_communication_control, .function_vlan, .function_ipv4, .function_standalone, .function_iot, .function_hub, .function_ble { padding: 30px 20px; }
    .function_twofactor_authentication-sub, .function_twofactor_authentication-certification, .function_communication_control-sub { padding: 30px 20px; }
    .function-img { float: none; margin-left: inherit; width: 100%; margin: 0 auto; }
    .table-function td.first-td, .table-function td.mid-td, .table-function td.bottom-first, .table-function td.bottom-second, .table-function td.bottom-third { width: 100%; }
    .table-function td.first-td, .table-function td.mid-td, .table-function td.last-td, .table-function td.bottom-first, .table-function td.bottom-second, .table-function td.bottom-third { display: block; }
    .table-function td.first-td { border-left: 1px solid #ccc; border-top: none; border-right: solid 1px #ccc; border-bottom: 1px solid #ccc; }
    .table-function td.mid-td { border-left: 1px solid #ccc; border-top: none; border-right: solid 1px #ccc; border-bottom: 1px solid #ccc; }
    .table-function td.last-td { border-left: 1px solid #ccc; border-top: none; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; }
    .table-function td.bottom-first { border-left: 1px solid #ccc; border-top: none; border-right: solid 1px #ccc; border-bottom: 1px solid #ccc; border-bottom-left-radius: 0px; }
    .table-function td.bottom-second { border-left: 1px solid #ccc; border-top: none; border-right: solid 1px #ccc; border-bottom: 1px solid #ccc; border-bottom-left-radius: 0px; }
    .table-function td.bottom-third { border-left: 1px solid #ccc; border-top: none; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-bottom-right-radius: 10px; border-bottom-right-radius: 10px; }
    .function_twofactor_authentication-sub h5 { font-size: 1.2rem; padding: 5px; border-bottom: 3px solid #545F89 !important; width: 100%; }
    .function-note { font-size: 0.9rem; text-align: right; }
    ul.p-products-auth-sns { display: flex !important; flex-wrap: wrap !important; list-style: none !important; padding: 0 !important; margin: 20px 0 !important; max-width: 600px !important; }
    ul.p-products-auth-sns li { width: 31% !important; margin: 1% !important; box-sizing: border-box !important; list-style-type: none !important; }
    ul.p-products-auth-sns li img { width: 100% !important; height: auto !important; display: block !important; }
}

/* ==================================================
    ライセンスページ
================================================== */
#certification-license, #plan-fee { scroll-margin-top: 130px; }
.plan-menu, .plan-free, .plan-standard, .plan-premium { padding: 12px; }
.plan-business { border: 3px solid #94618c; border-radius: 5px; position: relative; z-index: 2; background: rgba(243, 227, 170, 0.37); }
.plan-business .plan { font-size: 18px; font-weight: 700; }
.plan-business::before { content: "おすすめ"; position: absolute; top: -19px; left: 50%; transform: translateX(-50%); background: #94618c; color: #fff; font-size: 16px; padding: 4px 20px; border-radius: 20px; }
.plan, .fee, .guideline, .monthly-fee, .maximum-id, .benefits, .authentication-method, .password-authentication, .otm-mail, .otm-sns, .passkey-fingerprint, .passkey-ping, .external-collaboration, .cloud-radius, .alignment, .vpn-connection, .attendance-management-system, .management-support, .number-of-devices, .operational-support { padding: 3px 0; }

.plan-fee { border: none; border-collapse: separate; }
.height_adjustment_plan-fee { height: 60px; }
.plan-fee td.no-bg { background-color: inherit; border: none; }
.plan-fee td.recommend { border: none !important; text-align: center; color: #94618c; font-weight: bold; font-size: 1.2rem; }
.plan-fee th { padding: 0.3rem 0.5rem; border-top: 1px solid #333; border-left: 1px solid #333; border-right: 1px solid #333; font-weight: normal; text-align: center; }
.plan-fee td { padding: 0.3rem 0.5rem; border-top: 1px solid #333; border-right: 1px solid #333; text-align: center; }
.plan-fee-width10 { width: 10%; }
.plan-fee-width17 { width: 17%; }
.plan-fee-width22 { width: 22%; }
.plan-fee th.th-plan-title { background-color: #a8a9ac; }
.plan-fee td.td-plan-title-first { background-color: #dcddde; border-top: 1px solid #333; border-left: 1px solid #333; border-right: 1px solid #333; }
.plan-fee td.td-plan-title { background-color: #dcddde; }
.plan-fee td.td-plan-title-standard { background-color: #dcddde; border-right: none; }
.plan-fee td.td-plan-title-business { background-color: #94618c; border-top: 1px solid #94618c; border-right: none; border-bottom: 1px solid #94618c; color: #fff; font-weight: bold; }
.plan-fee td.td-plan-title-last { background-color: #dcddde; border-left: none; }
.item-title { background-color: #dcddde; border-top: none; border-left: 1px solid #333; border-right: none !important; border-bottom: none !important; }
.item-title-last { background-color: #dcddde; border-top: 1px solid #333; border-left: 1px solid #333; border-right: none !important; border-bottom: 1px solid #333 !important; }
.plan-fee net.th-last, .plan-fee td.last { border-bottom: 1px solid #333; }
.plan-fee td.standard { border-top: 1px solid #333; text-align: center; }
.plan-fee td.last-standard { border-bottom: 1px solid #333; border-right: none; }
.plan-fee td.business-head { border-top: none; border-left: 3px solid #94618c; border-right: 3px solid #94618c; background-color: #a9a9ac; }
.plan-fee td.business-first { border-top: 1px solid #94618c; border-left: 3px solid #94618c; border-right: 3px solid #94618c; background-color: rgba(243, 227, 170, 0.37); }
.plan-fee td.business { border-left: 3px solid #94618c; border-right: 3px solid #94618c; background-color: rgba(243, 227, 170, 0.37); }
.plan-fee td.last-business { border-left: 3px solid #94618c; border-right: 3px solid #94618c; border-bottom: 3px solid #94618c; background-color: rgba(243, 227, 170, 0.37); }
.plan-fee th.plan-title { background-color: #fff !important; border-top: 1px solid #333; text-align: center; }
.fa-circle-check { font-size: 2rem; margin-right: inherit !important; }
h3.license-subtilte { margin: 0; text-align: center; font-weight: normal; font-size: 1rem; padding: 0.3rem 0.5rem; }
.plan-fee .note { font-size: 0.7rem; }


/* ==================================================
    完全共通版：カテゴリグリッド設定（★既存通常カード復元＆横並び統合）
================================================== */
html { scroll-behavior: smooth; }
.category-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }
.cat-btn { display: inline-block; padding: 10px 20px; background-color: #f0f4f8; color: #333; text-decoration: none; border-radius: 20px; font-size: 14px; font-weight: bold; transition: all 0.3s ease; }
.cat-btn:hover { background-color: #DD007F; color: #fff; }

/* 既存サイト内のすべての通常カード・グリッド（香川県済生会など）を復元 */
[class$="-grid"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 340px)) !important;
    justify-content: start !important;
    gap: 24px !important;
    margin: 20px 0 !important;
    max-width: 1100px !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
[class$="-card"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e0e4ec !important;
    border-radius: 16px !important;
    border-top: 6px solid #d81b60 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
    width: 100% !important;
    min-height: 140px !important;
    margin: 0 !important;
    padding: 24px 20px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}
[class$="-info"] {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 0 12px 0 !important;
}
[class$="-meta"] { display: block !important; width: 100% !important; font-size: 11px !important; color: #777777 !important; margin: 0 auto 2px auto !important; line-height: 1.3 !important; text-align: center !important; }
[class$="-name"] { display: block !important; width: 100% !important; margin: 0 auto 2px auto !important; padding: 0 !important; font-size: 16px !important; font-weight: bold !important; line-height: 1.4 !important; color: #333333 !important; text-align: center !important; }
[class$="-address"] { display: block !important; width: 100% !important; margin: 0 auto !important; font-size: 12px !important; color: #666666 !important; text-align: center !important; }
[class$="-card"] a { color: #666666; text-decoration: none; }


/* 【横並び専用】新しいHTMLクラスを指定した部分だけに横並びが効きます */
.inline-btn-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 340px)) !important;
    justify-content: start !important;
    gap: 24px !important;
    margin: 20px 0 !important;
    max-width: 1100px !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
a.inline-btn-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e0e4ec !important;
    border-radius: 16px !important;
    border-top: 6px solid #d81b60 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
    width: 100% !important;
    min-height: 140px !important;
    margin: 0 !important;
    padding: 20px 16px !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
a.inline-btn-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.inline-card-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-right: 8px !important;
    width: auto !important;
    margin: 0 !important;
}
.inline-card-meta {
    display: block !important;
    width: 100% !important;
    font-size: 11px !important;
    color: #777777 !important;
    margin: 0 auto 4px auto !important;
    line-height: 1.3 !important;
    text-align: center !important;
}
.inline-card-name {
    display: block !important;
    width: 100% !important;
    font-size: 15px !important;
    font-weight: bold !important;
    line-height: 1.4 !important;
    color: #333333 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
}
.inline-card-address {
    display: block !important;
    width: 100% !important;
    font-size: 12px !important;
    color: #666666 !important;
    margin: 4px auto 0 auto !important;
    text-align: center !important;
}

.inline-card-btn {
    flex-shrink: 0 !important;
    display: inline-block !important;
    white-space: nowrap !important;
    width: 100px !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
    font-weight: bold !important;
    color: #d81b60 !important;
    border: 1.5px solid #d81b60 !important;
    border-radius: 20px !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 6px 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    margin: 0 !important;
}
a.inline-btn-card:hover .inline-card-btn {
    background: #d81b60 !important;
    background-color: #d81b60 !important;
    color: #ffffff !important;
}

/* スマホ対応 */
@media (max-width: 768px) {
    [class$="-grid"], .inline-btn-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        margin: 15px 0 !important;
    }
}


/* ==================================================
    推奨構成（★最下部に移動し、詳細度を最強化して完全保護）
================================================== */
.step-flow {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    max-width: 1100px !important;
    margin: 30px auto !important;
    flex-wrap: wrap !important;
}
.step-flow .step-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1.5px solid #bbb !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1) !important;
    padding: 30px 24px !important;
    box-sizing: border-box !important;
    flex: none !important; 
    width: 260px !important; 
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    border-top: 6px solid #d81b60 !important;
    text-align: center !important;
    min-height: auto !important; /* 横並びカードの高さ上書きを完全解除 */
}
.step-flow .step-card.card-control {
    flex: 1.8 !important;
    width: auto !important;
    max-width: 500px !important;
}
.step-flow .card-label {
    font-size: 1.1rem !important;
    font-weight: bold !important;
    color: #333 !important;
    margin: 0 0 15px 0 !important;
    text-align: center !important;
}
.step-flow .main-text {
    font-size: 0.95rem !important;
    font-weight: bold !important;
    color: #333 !important;
    text-align: center !important;
    margin: auto 0 !important;
    line-height: 1.5 !important;
}
.step-flow .sub-text {
    font-size: 0.85rem !important;
    color: #666 !important;
    margin-top: 8px !important;
    text-align: center !important;
    line-height: 1.4 !important;
}
.step-flow .flow-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.8rem !important;
    color: #d81b60 !important;
    font-weight: bold !important;
    user-select: none !important;
    padding: 0 5px !important;
}
.step-flow .control-group {
    width: 100% !important;
    background: #fff5f8 !important;
    border: 1px solid #f0b0c0 !important; 
    border-radius: 10px !important;
    padding: 14px 18px !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
}
.step-flow .control-group:last-child { margin-bottom: 0 !important; }
.step-flow .group-title { font-size: 0.85rem !important; font-weight: bold !important; color: #d81b60 !important; margin: 0 0 8px 0 !important; display: flex !important; align-items: center !important; }
.step-flow .control-item { font-size: 0.85rem !important; line-height: 1.5 !important; color: #333 !important; margin: 5px 0 !important; padding-left: 12px !important; position: relative !important; text-align: left !important; }
.step-flow .control-item::before { content: "•" !important; position: absolute !important; left: 0 !important; color: #333 !important; }

@media screen and (max-width: 768px) {
    .step-flow { flex-direction: column !important; align-items: center !important; gap: 15px !important; }
    .step-flow .step-card, .step-flow .step-card.card-control { width: 100% !important; max-width: 340px !important; }
    .step-flow .flow-arrow { transform: rotate(90deg); padding: 5px 0 !important; }
}

.card-control .control-group ~ div, .card-control div[class*="wp-"], .card-control .related-posts, .card-control embed-page, .card-control iframe { display: none !important; }
.step-flow .control-item a { color: #d81b60 !important; text-decoration: underline !important; font-weight: bold !important; transition: opacity 0.2s !important; }
.step-flow .control-item a:hover { opacity: 0.7 !important; }
/* ==================================================
    MW WP Form お問い合わせフォーム：完全復元（空白・縦線解消版）
================================================== */
/* 1. テーブル全体の枠線をしっかりと復活 */
table.contact_form {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 1px solid #888888 !important; /* 境界線 */
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    display: table !important; /* カード化を強制解除 */
    box-shadow: none !important;
}

/* 2. 行（tr）ごとの下線を引く */
table.contact_form tr {
    border-bottom: 1px solid #888888 !important;
    display: table-row !important;
    height: auto !important;
}

/* 3. 各セルの余白・デザイン崩れを完全リセット */
table.contact_form th,
table.contact_form td {
    padding: 22px 15px !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    display: table-cell !important; /* テーブル構造を強制維持 */
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    height: auto !important;
    min-height: auto !important;
}

/* 4. 左側の項目（th）のスタイル設定（不要な flex を排除） */
table.contact_form th {
    width: 250px !important;
    font-weight: bold !important;
    font-size: 16px !important;
    border-right: 1px solid #888888 !important; /* 右側の縦線のみ残す */
    text-align: left !important;
    position: relative !important; /* バッジを右端に固定するための基準点 */
    padding-right: 75px !important; /* バッジが文字と被らないように右側に余白を確保 */
}

/* 左側項目（th）の交互の背景色設定 */
table.contact_form tr:nth-child(odd) th {
    background-color: #f9f9f9 !important;
}
table.contact_form tr:nth-child(even) th {
    background-color: #ffffff !important;
}

/* 右側入力欄（td）はすべて背景を白に統一 */
table.contact_form tr th ~ td,
table.contact_form td {
    background-color: #ffffff !important;
    text-align: left !important;
}

/* 5. 「必須」「任意」バッジの縦位置を中央・横位置を右端に完全に揃える */
table.contact_form th span.icom_required,
table.contact_form th span.icom_any {
    display: inline-block !important;
    position: absolute !important;
    top: 50% !important; /* 上から50%の位置へ */
    right: 15px !important; /* 右端から15pxに固定 */
    transform: translateY(-50%) !important; /* 自身の高さの半分だけ引き上げて完全中央化 */
    padding: 3px 12px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    text-align: center !important;
    line-height: 1.4 !important;
    width: auto !important;
    min-height: auto !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
}

/* 必須：赤色バッジ */
table.contact_form th span.icom_required {
    background-color: #c83c23 !important;
    background: #c83c23 !important;
}

/* 任意：青色バッジ */
table.contact_form th span.icom_any {
    background-color: #4a6491 !important;
    background: #4a6491 !important;
}

/* 6. ”入力内容を確認する” ボタンエリアを画面中央へ配置 */
.btn_area {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
    margin: 40px auto 0 auto !important;
    float: none !important;
}

.btn_area input,
.btn_area button,
.btn_area .contact_bt {
    display: inline-block !important;
    margin: 0 !important;
    float: none !important;
}

/* スマホ閲覧時用のレスポンス対応 */
@media screen and (max-width: 768px) {
    table.contact_form,
    table.contact_form tbody,
    table.contact_form tr,
    table.contact_form th,
    table.contact_form td {
        display: block !important;
        width: 100% !important;
    }
    table.contact_form th {
        border-right: none !important;
        padding: 15px 75px 15px 15px !important; /* スマホでもバッジ用の右余白を維持 */
    }
    table.contact_form td {
        padding: 10px 15px 15px 15px !important;
    }
    .btn_area {
        flex-direction: column !important;
        gap: 10px !important;
    }
}
/* ==================================================
    お知らせページ：タブメニュー配色＆形状の完全修正
================================================== */

/* 1. 通常時（カーズルを合わせていない時）の文字色を「黒」にする */
.p-control-main-list li a {
    color: #333333 !important;
}

/* 2. 【ホバー時 ＆ 選択中】文字色を「ピンク」にする */
.p-control-main-list li a:hover,
.p-control-main-list li a.is-current {
    color: #DD007F !important;
}

/* 3. 【通常時】土台となっている横一本の長い線を「黒（濃いグレー）」にする */
.p-control-main-list {
    border-bottom: 2px solid #555555 !important;
}

/* 4. 先ほど四角（■）になってしまった原因（背景色）を完全に透明化してリセット */
.p-control-main-list li a::after,
.p-control-main-list li a::before,
.p-control-main-list li a.is-current::after,
.p-control-main-list li a.is-current::before {
    background-color: transparent !important;
    background: transparent !important;
}

/* 5. 【重要】動く三角（▼）パーツの「枠線の色（緑）」だけをピンクに塗り替える */
/* これにより、形状は元のシャープな三角（▼）のまま、色がピンクに変わります */
.p-control-main-list .is-current::after,
.p-control-main-list a:hover::after,
.p-control-main-list .is-current::before,
.p-control-main-list a:hover::before {
    border-color: transparent !important;
    border-top-color: #DD007F !important; /* 三角の上辺をピンクにすることで▼になります */
}

/* 6. 前に出てきてしまった別の場所の太線バグを元のグレーに戻す */
.p-status {
   border-top: none !important;
}
/* ==================================================
    推奨構成ページ：右下固定バナーのスマホ個別調整
================================================== */
@media screen and (max-width: 768px) {
    .step-flow ~ a[href*="選定療養"], 
    .step-flow ~ div a img[alt*="選定療養"],
    div[class*="floating"] a img[alt*="選定療養"] {
        transform: scale(0.75) !important;
        transform-origin: right bottom !important;
    }

    .sentei-banner {
        transform: scale(0.75) !important;
        transform-origin: right bottom !important;
    }
}