@charset "utf-8";
/* CSS Document */
.post-9036 p, .post-9036 li {
    font-size: clamp(1rem, 3vw, 1.25rem);
}
.post-9036 h2 {
    padding: 0;
}
.red {color: red}

.visual-area {
    background-color: #EFEFEF;
    padding: 2rem 0;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
}
.visual-area figure img {
    display: block;
    margin: 0 auto;
    max-width: 1230px;
    /*background-color: #fff;*/
}
@media only screen and (max-width: 1230px) {
    .visual-area {
        margin: 0;
        padding: 1.5rem;
        width: 100%;
    }
    .visual-area figure img {
        width: 100%;
    }
}
.v-sub-area {
    background-color: #BCEEFF;
    background-image: url(../../../uploads/okinawa-dx/sub-backimg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2rem 0;
    margin: 0 calc(50% - 50vw);
    margin-bottom: 5rem;
}
@media only screen and (max-width: 1230px) {
    .v-sub-area {
        margin: 0 0 3rem 0;
        padding: 1.5rem;
        width: 100%;
    }
}
@media only screen and (max-width: 485px) {
    .v-sub-area {
        padding: 1.25rem;
    }
}
.v-sub-area h2 {
    color: #005bac;
    text-align: center;
    font-size: clamp(1.45rem, 3.25vw, 2.75rem) !important;
    border: none !important;
    padding: 0 !important;
}
.v-sub-area > p {
    display: block;
    max-width: 1000px;
    margin: 10px auto;
    text-align: center;
}
.v-sub-area ul {
    max-width: 1000px;
    margin: 3rem auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap; /* アイテムを折り返し可能に */
    justify-content: center;
    gap: 3rem; /* アイテム間の余白を設定 */
}
.v-sub-area ul li {
    display: block;
    width: 30%; /* 3列になるように調整（1段目） */
    min-width: 160px;
    background-color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
}
@media only screen and (max-width: 1230px) {
    .v-sub-area ul {
        gap: 1.75rem;
        padding: 0;
        margin: 0;
    }
    .v-sub-area ul li {
        width: 45%; /* 2列になるように調整（1段目） */
    }
}
@media only screen and (max-width: 407px) {
    .v-sub-area ul {
        gap: 1rem;
        padding: 0;
        margin: 0;
    }
    .v-sub-area ul li {
        min-width: 140px;
        width: 40%; /* 2列になるように調整（1段目） */
    }
}
.v-sub-area ul li img {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.v-sub-area ul li h3 {
    font-size: clamp(1.25rem, 3.5vw, 1.75rem);
    display: block;
    text-align: center;
    border: none !important;
    margin: 0.2rem 0;
}
@media only screen and (max-width: 550px) {
    .v-sub-area ul li h3 {
        font-size: clamp(1rem, 3.5vw, 1.15rem);
    }
}
.v-sub-area ul li .t-area {
    padding: 0 1rem 1rem 1rem;
}
.v-sub-area ul li .t-area p {
    margin: 0;
}
/* ================================
  まずは無料相談から
================================ */
.soudan-area {
    border: #ccc solid 1px;
    padding: 2rem;
    margin-bottom: 5rem;
}
@media only screen and (max-width: 1000px) {
    .soudan-area {
        padding: 1rem;
        margin: 0 1rem 5rem;
    }
}
.soudan-area > .wp-block-columns {
    margin-bottom: 0em;
}
.soudan-area h1 {
    background-color: #009145;
    margin: 0 0 1rem 0;
    padding: 1rem 0;
    text-align: center;
    color: yellow;
}
.soudan-area h2 {
    border: none !important;
    font-size: clamp(1.00rem, 3.5vw, 1.65rem);
    color: red;
    text-align: center !important;
    padding: 0 !important;
}
.soudan-area h3 {
    font-weight: bold;
    padding: 5px 10px;
    background-color: #FFFBBB;
    border: none !important;
    color: red;
    -webkit-clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
    width: 140px;
    font-size: 140%;
}
.soudan-area figure {
    text-align: center;
}
.soudan-area p {
    font-size: 1rem
}
.soudan-area .contact {
    margin: 0;
    padding: 0;
    list-style: none;
}
.soudan-area .contact li {
    margin-bottom: 1rem
}
.soudan-area .contact li a {
    display: none;
    text-indent: -9999px;
    overflow: hidden;
}
.soudan-area .contact li:first-child a, .soudan-area .contact li:last-child a {
    display: block;
    max-width: 415px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../../../uploads/okinawa-dx/renraku-tel.png);
}
.soudan-area .contact li:last-child a {
    background-image: url(../../../uploads/okinawa-dx/renraku-mail.png);
}
/* ================================
  経営課題を“DX伴走”で共に解決しましょう
================================ */
.kaiketu-area {
    background-color: #fffcdb;
    padding: 2rem 0;
    margin: 0 calc(50% - 50vw);
    margin-bottom: 5rem;
}
.kaiketu-area .w1000 {
    max-width: 1000px;
    margin: 0 auto 4rem;
}
@media only screen and (max-width: 1000px) {
    .kaiketu-area {
        margin: 0;
        padding: 1.5rem;
        width: 100%;
    }
    .kaiketu-area .w1000 {
        width: 100%;
    }
}
/* タイトル */
.kaiketu-area h1 {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 120%;
    color: #005bac;
    margin-bottom: 2rem;
    padding: 1rem;
    font-weight: bold;
    border: 2px solid #005bac;
}
.kaiketu-area h2 {
    text-align: center;
    font-size: clamp(1.5rem, 3.75vw, 3rem) !important;
    color: #333;
    margin-bottom: 2rem;
    font-weight: bold;
    border-bottom: 3px solid #f1c40f;
}
/* 縦書きプレート：中央配置＆高さをカラムいっぱいに */
.dx-frow-title {
    /* 既存 */
    writing-mode: vertical-rl;
    text-orientation: upright;
    background: #ea5514;
    color: #fff !important;
    border-radius: 5px;
    padding: 1rem !important;
    position: relative;
    margin: 0; /* H2の余白をリセット */
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
    white-space: nowrap;
}
/* プレートの矢印（右向き） */
.dx-frow-title::after {
    content: "";
    position: absolute;
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 50px solid #ea5514;
    border-top: 45px solid transparent;
    border-bottom: 45px solid transparent;
}
@media only screen and (max-width: 1230px) {
    .dx-frow-title::after {
        right: -30px;
        transform: translateY(-120%);
        border-left: 30px solid #ea5514;
        border-top: 45px solid transparent;
        border-bottom: 45px solid transparent;
    }
}
@media only screen and (max-width: 781px) {
    .dx-frow-title {
        writing-mode: horizontal-tb;
        text-orientation: initial;
        text-align: center;
        padding: 1rem;
        display: block;
        margin: 0rem auto;
    }
    .dx-frow-title::after {
        display: none;
    }
}
/* DXフロー全体 */
.dx-frow {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    list-style: none;
    counter-reset: dx-counter;
    padding: 0;
    margin: 0;
    max-width: 700px;
    margin: 0 auto;
}
/* 各ステップボックス */
.dx-frow > li {
    background-color: #fff;
    border: 8px solid #f1c40f;
    border-radius: 10px;
    padding: 1.5rem 1.5rem 1.5rem 4rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    counter-increment: dx-counter;
    width: 100%;
}
/* 番号の丸バッジ */
.dx-frow > li::before {
    content: counter(dx-counter);
    position: absolute;
    top: -15px;
    left: -15px;
    background-color: #005bac;
    color: #fff;
    font-weight: bold;
    font-size: 2.55rem;
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
@media only screen and (max-width: 781px) {
    .dx-frow {
        gap: 2rem;
    }
    .dx-frow > li {
        padding: 1.5rem 1.5rem 1.5rem 3rem;
    }
    .dx-frow > li::before {
        top: -10px;
        left: -10px;
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
}
/* サブタイトル */
.dx-frow h3 {
    color: #005bac;
    font-size: clamp(2.25rem, 3vw, 2.5rem);
    margin-bottom: 0.5rem;
}
.dx-frow h3 span {
    color: #333;
    font-weight: normal;
    margin: 0 0 0 1rem;
    font-size: clamp(1.25rem, 3vw, 1.5rem);
}
@media only screen and (max-width: 781px) {
    .dx-frow h3 span {
        display: block;
        margin: 0;
    }
}
.dx-frow h4 {
    font-weight: normal;
    margin: 0 !important;
    color: red;
}
/* 説明文 */
.dx-frow p {
    margin: 0.5rem 0 1rem;
    line-height: 1.5;
}
/* 既存：基本は黒丸 */
.dx-frow li > ul > li {
    list-style: circle;
}
/* 丸数字（①〜⑳）定義：未定義なら追加 */
@counter-style circled-decimal {
    system: fixed;
    symbols: '①''②''③''④''⑤''⑥''⑦''⑧''⑨''⑩'
        '⑪''⑫''⑬''⑭''⑮''⑯''⑰''⑱''⑲''⑳';
    suffix: " ";
}
/* ▼ 2番目以降の UL を丸数字に（1番目は影響なし） */
.dx-frow > li:nth-child(n+2) > ul {
    counter-reset: circ; /* 各ULで番号をリセット */
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.dx-frow > li:nth-child(n+2) > ul > li {
    counter-increment: circ;
    list-style: none;
    position: relative;
    padding-left: 23px;
    color: #005bac;
}
.dx-frow > li:nth-child(n+2) > ul > li::before {
    content: counter(circ, circled-decimal);
    position: absolute;
    left: 0;
    top: 9px;
    line-height: 1;
    color: #005bac;
    font-weight: 700;
}
/* ▼ 各カード下にオレンジの下向き矢印（三角形） */
.dx-frow > li {
    position: relative; /* 既に指定済みでもOK */
}
/* 1〜4番目の項目だけ矢印を表示 */
.dx-frow > li:nth-child(-n+4)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -28px; /* 矢印の高さぶん下に配置 */
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 24px solid #ff8c00; /* 矢印色（オレンジ） */
}
/* ================================
さらに、DX認定も取得できます［オプション］
================================ */
.dx-nintei {
    margin-bottom: 4rem
}
.dx-nintei h1 {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    background: #ea5514;
    color: #fff !important;
    border-radius: 5px;
    padding: 1rem !important;
    line-height: 120%;
}
/* コンテナ：最大幅850pxで中央寄せ */
.dx-logo {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1rem; /* 端の余白（任意） */
    gap: 1.25rem; /* カラム間の余白 */
    align-items: center; /* 2カラムを縦中央揃え */
}
/* WordPressのflex指定を活かしつつ、比率をCSS側で制御 */
.dx-logo > .wp-block-column:first-child {
    flex: 0 0 20%;
}
.dx-logo > .wp-block-column:last-child {
    flex: 1 1 80%;
}
/* 画像：比率維持で横幅にフィット、角丸＆薄い影（任意） */
.dx-logo img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
}
/* 見出し＆本文の整え */
.dx-logo h2 {
    margin: 0;
    font-size: clamp(1.25rem, 2.8vw, 1.6rem);
    line-height: 1.35;
    color: #005bac;
    padding: 0 !important;
    border: none !important;
}
.dx-logo p {
    margin: 0;
    font-size: clamp(0.95rem, 2.4vw, 1rem);
    line-height: 1.8;
    color: #333;
}
.dx-nintei .merit {
    display: block;
    margin: 0 auto;
    max-width: 650px;
}
.dx-nintei .merit h2 {
    text-align: center;
    color: red;
    font-size: clamp(1.25rem, 2.8vw, 1.6rem);
    padding: 0 !important;
    border: none !important;
}
/* ================================
沖縄県DX推進支援コンソーシアム
================================ */
.consortium {
    max-width: 560px;
    margin: 0 auto;
    border: 3px solid #ccc;
    padding: 1rem;
}
.consortium h2, .consortium p {
    padding: 0 !important;
    border: none !important;
}
.consortium h2 {
    text-align: center;
}