/* ==========================================================
   type/css/sp_style.css
   G-call電話通信ページ（SP用 / max-width: 767px）
   ========================================================== */

/* カラー変数 */
:root {
    --navy-900: #00203f;
    --navy-800: #003366;
    --navy-700: #0d4279;
    --cyan-600: #007cab;
    --cyan-500: var(--color-mygcall);
    --cyan-400: #34b0dd;
    --cyan-200: #a9dcef;
    --font-jp: "Noto Sans JP", system-ui, sans-serif;
    --font-en: "Outfit", var(--font-jp);
    --container: 90%;
}

/* slick
======================================================= */

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus {
    outline: none;
}
.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    overflow: hidden;
}
.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after {
    display: table;
    content: "";
}
.slick-track:after {
    clear: both;
}
.slick-loading .slick-track {
    visibility: hidden;
}
.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir="rtl"] .slick-slide {
    float: right;
}
.slick-slide img {
    display: block;
}
.slick-slide.slick-loading img {
    display: none;
}
.slick-slide.dragging img {
    pointer-events: none;
}
.slick-initialized .slick-slide {
    display: block;
}
.slick-loading .slick-slide {
    visibility: hidden;
}
.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
.slide-arrow {
    position: absolute;
    top: calc(50% - 20px);
    border: none;
    z-index: 1;
    cursor: pointer;
    display: block;
    overflow: hidden;
    width: 40px;
    height: 0;
    padding-top: 40px;
    border-radius: 50%;
    background: rgba(102, 102, 102, 0.8) url(/designChange/type/img/ico_arw_white.svg) no-repeat
        50% 50%;
    background-size: 8px auto;
    text-indent: 100%;
    white-space: nowrap;
    transition: 0.2s;
}
.slide-arrow.slick-disabled {
    display: none !important;
}
.slide-arrow.slick-prev {
    left: calc(50% - 540px);
    transform: rotate(180deg);
}
.slide-arrow.slick-next {
    right: calc(50% - 540px);
}
@media screen and (width <= 768px) {
    .slide-arrow.slick-prev {
        left: 5px;
    }
    .slide-arrow.slick-next {
        right: 5px;
    }
}

.slick-prev:hover,
.slick-next:hover {
    opacity: 0.8;
}
.slick-dots {
    position: absolute;
    bottom: -40px;
    left: 0;
    width: 100%;
    height: 10px;
    line-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
.slick-dots li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background: none;
    border: 2px solid var(--primary);
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
}
.slick-dots li.slick-active,
.slick-dots li:hover {
    background: var(--primary);
}

@media screen and (width <= 768px) {
    .slick-dots {
        bottom: -20px;
    }
}

/* 縦並び防止 */
.slider {
    visibility: hidden;
}

.slider.slick-initialized {
    visibility: visible; /*slick-initializedが付与されたら表示*/
}

/* ----------------------------------------------------------
   header tel独自
   ---------------------------------------------------------- */

.tel_menu {
    display: none;
}

/* ----------------------------------------------------------
   Hero Banner Slider (SP)
   ---------------------------------------------------------- */
.type_hero {
    overflow: hidden;
    background: #003366;
    padding: 24px 0 40px;
}

.hero-slider {
    position: relative;
    visibility: hidden;
}

.hero-slider.slick-initialized {
    visibility: visible;
}

.hero-slider .slick-list {
    overflow: visible;
}

.hero-slide {
    padding: 0 8px;
}

.hero-slide a {
    display: block;
}

.hero-slide img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.hero-slide-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.hero-slide-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.hero-slide-prev {
    left: 12px;
}

.hero-slide-next {
    right: 12px;
}

.hero-slider .slick-dots {
    position: absolute;
    bottom: -24px;
    left: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    line-height: 0;
}

.hero-slider .slick-dots li {
    display: inline-block;
    margin: 0 4px;
    width: 8px;
    height: 8px;
    cursor: pointer;
}

.hero-slider .slick-dots li button {
    display: block;
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #fff;
    opacity: 0.4;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.hero-slider .slick-dots li.slick-active button {
    opacity: 1;
}

/* ----------------------------------------------------------
   News Section (SP)
   ---------------------------------------------------------- */
.type_news {
    background: #fff;
    padding: 32px 20px;
}

.type_news-inner {
    display: block;
}

.type_news-heading {
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.4;
    color: #314158;
    margin-bottom: 16px;
}
.type_news-list {
    flex: 1;
    min-width: 0;
    overflow: auto;
    max-height: 201px;
}
.news-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #e6e9eb;
}

.news-item:first-child {
    border-top: 1px solid #e6e9eb;
}

.news-date {
    font-family: "Outfit", "Noto Sans JP", system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.6;
    color: #003366;
    flex-shrink: 0;
    min-width: 72px;
}

.news-text {
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.6;
    color: #45556c;
    flex: 1;
}

.news-text a {
    color: #45556c;
    text-decoration: underline;
}

.news-text a u {
    text-decoration: none;
}

/* ----------------------------------------------------------
   Services Section (SP)
   ---------------------------------------------------------- */
.type_services {
    background: #eef4f7;
    padding: 48px 20px;
}

.type_services-cat-heading {
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    color: #314158;
    text-align: center;
    margin-bottom: 24px;
}

.type_services-cat-heading--second {
    margin-top: 48px;
}

.type_services-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.service-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

.service-card-img img {
    display: block;
    width: 100%;
    height: auto;
}

.service-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px 20px 20px;
}

.service-card-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.service-card-title-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.service-card-name {
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    color: #314158;
}

.service-card-price {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    background: var(--color-mygcall);
    border-radius: 4px;
    padding: 3px 8px;
    flex-shrink: 0;
}

.price-label {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    padding-bottom: 2px;
}

.price-value {
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    line-height: 1.4;
}

.price-meta {
    font-size: 12px;
    color: #eef4f7;
    line-height: 1.4;
    padding-bottom: 2px;
}

.service-card-catch {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-mygcall);
    line-height: 1.4;
}

.service-card-divider {
    border: none;
    border-top: 1px solid #c2cfd8;
    margin: 0;
}

.service-card-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
    flex: 1;
}

.service-card-desc {
    font-size: 14px;
    line-height: 1.8;
    color: #45556c;
}

.service-card-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.service-card-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #314158;
    line-height: 1.4;
}

.service-card-features li::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='8' fill='%230097CE'/%3E%3Cpath d='M4.5 8.5L6.5 10.5L11.5 5.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        no-repeat center / contain;
}

.service-card-cta {
    display: flex;
    justify-content: center;
}

.service-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #003366;
    color: #fff;
    border-radius: 999px;
    padding: 12px 16px 13px 24px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}

.service-card-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.type_services-terminated {
    margin-top: 48px;
}

.type_services-terminated-heading {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #314158;
    margin-bottom: 12px;
}

.type_services-terminated-sep {
    height: 2px;
    background: linear-gradient(
        to right,
        var(--color-mygcall) 40px,
        #c2cfd8 40px
    );
    margin-bottom: 16px;
}

.type_services-terminated-desc {
    font-size: 13px;
    line-height: 1.8;
    color: #45556c;
    margin-bottom: 16px;
}

.type_services-terminated-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.service-sub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #c2cfd8;
    border-radius: 999px;
    padding: 8px 12px 9px 20px;
    font-size: 13px;
    font-weight: 700;
    color: #314158;
    text-decoration: none;
    background: #fff;
}

.service-sub-btn svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

/* ================================================
   Card Brand Links
   ================================================ */
.cardbrand {
    background: #eef4f7;
    padding: 40px 0;
    font-family: var(--font-jp);
}

.cardbrand-inner {
    width: var(--container);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.cardbrand-hd {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    background: var(--navy-800);
    border-radius: 16px 16px 0 0;
    padding: 20px;
}

.cardbrand-hd h2 {
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1.4;
    color: #fff;
    margin: 0;
}

.cardbrand-hd p {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.4;
    color: #e6e9eb;
    margin: 0;
}

.cardbrand-logos {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: #fff;
    border-radius: 0 0 16px 16px;
    padding: 20px;
}

/* ----------------------------------------------------------
   CTA SECTION (新)
   ---------------------------------------------------------- */
.sec_cta {
    background: var(--color-primary) url("/designChange/tel/img/cta_bg.png") center / cover
        no-repeat;
    padding: 60px 20px;
    margin: 0;
}
.sec_cta_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
.cta_heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: center;
}
.cta_sublabel {
    font-size: 1.6rem;
    font-weight: 400;
    color: #1ab4ec;
    line-height: 1.4;
    margin: 0;
    letter-spacing: 0.04em;
}
.cta_title {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.4;
    margin: 0;
}
.cta_actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}
.cta_row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
}
.cta_btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}
.cta_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: var(--color-white);
    color: var(--color-primary);
    font-size: 1.8rem;
    font-weight: 700;
    padding: 20px 32px;
    border-radius: 200px;
    text-decoration: none;
    line-height: 1.4;
    transition: opacity 0.2s;
    box-shadow: 8px 16px 40px rgba(0, 151, 206, 0.5);
    width: 100%;
    max-width: 360px;
}
.cta_btn:hover {
    opacity: 0.85;
    text-decoration: none;
    color: var(--color-primary);
}
.cta_btn_icon {
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: auto;
}
.cta_phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.cta_phone_row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cta_phone_icon {
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}
.cta_phone_num {
    font-family: "Outfit", sans-serif;
    font-size: 3.6rem;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.4;
    text-decoration: none;
    letter-spacing: 0.02em;
}
.cta_phone_num:hover {
    opacity: 0.85;
    text-decoration: none;
    color: var(--color-white);
}
.cta_phone_hours {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--color-white);
    line-height: 1.4;
    margin: 0;
    text-align: center;
}
.cta_note {
    font-size: 1.1rem;
    font-weight: 400;
    color: #90a1b9;
    line-height: 1.6;
    margin: 0;
    text-align: center;
}

/* ----------------------------------------------------------
   SERVICES SECTION (新)
   ---------------------------------------------------------- */
.sec_services {
    background-color: #f8fafc;
    padding: 60px 0;
}
.sec_services_inner {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* サービス紹介ブロック */
.services_intro {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.services_intro_heading {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--color-text-bold);
    line-height: 1.4;
    margin: 0;
    text-align: center;
}
.services_intro_accent {
    display: block;
    color: var(--color-mygcall);
}
.services_intro_cards {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
/* .service_card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0;
} */
.service_card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 0px 15px rgba(0, 51, 102, 0.1);
}
.service_card_content {
    display: flex;
    flex-direction: column;
}
.service_card_heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.service_card_icon {
    display: block;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}
.service_card_title {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-text-bold);
    line-height: 1.4;
    margin: 0;
}
.service_card_desc {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.8;
    margin: 0 0 20px;
}
.service_card_btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 1.6rem;
    font-weight: 700;
    padding: 14px 20px 15px 32px;
    border-radius: 200px;
    text-decoration: none;
    line-height: 1.4;
    transition: opacity 0.2s;
    align-self: flex-start;
}
.service_card_btn:hover {
    opacity: 0.8;
    text-decoration: none;
    color: var(--color-white);
}
.service_card_btn_arrow {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    mask: url("/designChange/common/img/ico_arw.svg") no-repeat center / contain;
    -webkit-mask: url("/designChange/common/img/ico_arw.svg") no-repeat center / contain;
    background-color: var(--color-white);
}
.service_card_imgs {
    display: flex;
}
.service_card_img {
    flex: 1;
    height: 100px;
    object-fit: cover;
    display: block;
}

/* 便利機能ブロック */
.services_features {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.services_features_head {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.services_features_sublabel {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-mygcall);
    line-height: 1.4;
    margin: 0;
}
.services_features_title {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-text-bold);
    line-height: 1.4;
    margin: 8px 0 0;
}
.services_features_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
}
.services_feature_item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.services_feature_item img {
    width: 56px;
    margin: 0 auto;
    border-radius: 50%;
    box-shadow: 5px 5px 30px rgba(0, 151, 206, 0.3);
}
.services_feature_icon {
    display: block;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
}
.services_feature_title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text-bold);
    line-height: 1.4;
    margin: 0;
    text-align: center;
}
.services_feature_desc {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.8;
    margin: 0;
}

/* ----------------------------------------------------------
   Manager Section (SP)
   ---------------------------------------------------------- */
.type_manager {
    background: #fff;
    padding: 40px 20px;
}
.type_manager-inner {
    margin: 0 auto;
    background: var(--color-mygcall);
    border-radius: 12px;
    padding: 30px 20px;
}
.type_manager-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.type_manager-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 10px;
}

.type_manager-top {
    display: flex;
    align-items: center;
    gap: 16px;
}

.type_manager-free-badge {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.type_manager-free-badge p {
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-mygcall);
    line-height: 1.3;
    margin: 0;
}

.type_manager-header {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.type_manager-title {
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
}

.type_manager-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.type_manager-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: #fff;
    padding: 6px 16px 7px 14px;
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #003366;
}

.type_manager-tag img {
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.type_manager-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.type_manager-desc {
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
    color: #fff;
}

.type_manager-inner .tac {
    margin: 10px 0 0;
}
.type_manager-inner .tac .type_manager-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #003366;
    color: #fff;
    border-radius: 999px;
    padding: 12px 16px 13px 24px;
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}

.type_manager-btn:hover {
    background: #0d4279;
    text-decoration: none;
}

.type_manager-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.type_manager-illust {
    width: 100%;
    overflow: hidden;
    text-align: center;
}

.type_manager-illust img {
    display: block;
    width: 60%;
    height: auto;
    margin: 0 auto;
    object-fit: cover;
    object-position: left top;
}

/* ----------------------------------------------------------
   下層HERO SECTION (新)
   ---------------------------------------------------------- */
.sec_un_hero {
    margin: 0 0 40px;
    background: url(/designChange/type/img/bg_un_hero.jpg) no-repeat center center;
    background-size: cover;
}
.sec_un_hero .sec_un_hero_inner {
    padding: 24px 20px;
}
.un_hero_heading {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1.4;
    color: var(--color-primary);
}

/* ----------------------------------------------------------
   下層CONTENS SECTION (新)
   ---------------------------------------------------------- */
.sec_contents {
    margin: 0 0 40px;
    line-height: 1.8;
}
.sec_contents .sec_contents_inner {
    padding: 0 20px;
}
.sec_contents .sec_contents_inner .sec_contents_block {
    margin: 0 0 40px;
}
.un_contents_heading {
    margin: 0 0 24px;
    padding: 14px 0 0;
    border-top: 2px solid var(--color-bg);
    font-size: 2rem;
    font-weight: bold;
    color: var(--color-text-bold);
    line-height: 1.4;
    position: relative;
    z-index: 0;
}
.un_contents_heading::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--color-mygcall);
}
.un_contents_sub_heading {
    margin: 0 0 24px;
    padding: 6px 16px 6px 12px;
    border-left: 4px solid var(--color-mygcall);
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--color-text-bold);
    line-height: 1.4;
    background: var(--color-bg-light);
}
.un_contents_local_heading {
    margin: 0 0 20px;
    padding: 0 0 0 25px;
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--color-text-bold);
    line-height: 1.4;
    position: relative;
}
.un_contents_local_heading::before {
    content: "";
    width: 16px;
    height: 3px;
    background: var(--color-mygcall);
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
}

/* ----------------------------------------------------------
   Tab Navigation (117-2582)
   ---------------------------------------------------------- */
.recruit-tabs {
    display: flex;
    align-items: stretch;
    margin-top: 20px;
    gap: 4px;
    padding: 0 4px;
    border-bottom: 1px solid #45556c;
}
.recruit-tab {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 8px 9px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #314158;
    line-height: 1.2;
    border: 1px solid #45556c;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: #ffffff;
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
    bottom: -1px;
    transition: 0.2s;
}
.recruit-tab:hover {
    background: #003366;
    color: #ffffff;
}
.recruit-tab--active {
    background: #003366;
    color: #ffffff;
    border-bottom: 1px solid #003366;
    z-index: 1;
}

/* sp_scroll: タブを横スクロール化 */
.recruit-tabs.sp_scroll {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
}
.recruit-tabs.sp_scroll .recruit-tab {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ----------------------------------------------------------
   Under Page Blocks (117-2582)
   ---------------------------------------------------------- */

/* ポイント還元バナー */
.un-point-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 0 8px 12px;
    height: auto;
    min-height: 72px;
    background: var(--color-mygcall);
    margin: 0;
}
.un-point-banner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    border-radius: 40px;
    white-space: nowrap;
    flex-shrink: 0;
}
.un-point-banner-body {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.un-point-banner-sub {
    font-size: 1.5rem;
    font-weight: 500;
    color: #fff;
}
.un-point-banner-main {
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
}
.un-point-banner-link {
    font-size: 1.5rem;
    font-weight: 500;
    color: #fff;
}

/* ポイント還元バナー コイン */
.un-point-banner-coins {
    display: none;
    /* margin-left: auto;
    flex-shrink: 0;
    width: 110px;
    height: 72px;
    position: relative;
    overflow: hidden; */
}
.un-point-banner-coins img {
    position: absolute;
    right: 0;
    top: 0;
    width: 150px;
    height: auto;
}

/* G-Call050 ヒーロー（絶対配置） */
.un050-hero {
    position: relative;
    width: 100%;
    height: 340px;
    overflow: hidden;
    background: #a8d4f0;
}
.un050-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* スマートフォン画像 */
.un050-hero-phone {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 160px;
}
.un050-phone-frame {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 160px;
    height: auto;
}
.un050-phone-screen {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
}

/* ブランドエリア */
.un050-brand {
    position: absolute;
    left: 16px;
    top: 20px;
    width: 80%;
}
.un050-brand-tag {
    display: inline-block;
    padding: 1px 8px;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.6;
    text-align: center;
    border-radius: 20px;
}
.un050-brand-num {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 0;
    line-height: 1;
    color: var(--color-primary);
}
.un050-brand-gcall {
    font-size: 2.6rem;
    font-weight: 800;
    font-style: italic;
}
.un050-brand-050 {
    font-size: 3.6rem;
    font-weight: 800;
}

/* アプリ情報ボックス（SP非表示） */
.un050-app-box {
    display: none;
}
.un050-app-stores {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}
.un050-app-stores img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 8px;
}
.un050-app-text {
    flex: 1;
    min-width: 0;
}
.un050-app-sub {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 2px;
    line-height: 1.3;
}
.un050-app-main {
    font-size: 1rem;
    color: #fff;
    margin: 0;
    line-height: 1.4;
}

/* キャッチコピー */
.un050-catch-area {
    position: absolute;
    left: 16px;
    top: 148px;
    width: calc(100% - 175px);
}
.un050-hero-catch {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--color-primary);
    line-height: 1.8;
    margin: 0 0 2px;
}
.un050-catch-hl {
    display: inline-block;
    background: #fff;
    color: var(--color-mygcall);
    padding: 1px 6px;
    border-radius: 2px;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1.2;
    vertical-align: baseline;
}
.un050-hero-lead {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
    margin: 0;
}

/* 注記（SP非表示） */
.un050-note {
    display: none;
}

/* ニュースリスト */
.un050_topics {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #eef4f7;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 8px;
}
.un050_topics h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #314158;
    flex-shrink: 0;
    width: auto;
    line-height: 1.4;
    margin: 0;
}
.un050_topics .news-item {
    flex: 1;
    padding: 12px 0;
    border-top: none;
    border-bottom: none;
}
.un050_topics .news-item:first-child {
    border-top: none;
}
.un050_topics .news-date {
    font-size: 1.5rem;
    font-weight: 700;
    color: #003366;
    flex-shrink: 0;
    min-width: 80px;
    font-family: inherit;
}
.un050_topics .news-text {
    font-size: 1.5rem;
    font-weight: 400;
    color: #45556c;
    flex: 1;
}
.un050_topics .news-text a {
    color: #45556c;
    text-decoration: underline;
}
.un050_topics .news-text a:hover {
    color: var(--color-primary);
}

/* タブパネル共通 */
.un-tab-body {
    padding: 20px 0;
}
.un-tab-body--center {
    text-align: center;
    padding: 32px 0;
}
.un-tab-note {
    font-size: 1.4rem;
    color: #c0392b;
    margin: 0 0 20px;
    padding: 12px 16px;
    background: #fef5f3;
    border-left: 3px solid #c0392b;
}
.un-tab-notice {
    font-size: 1.3rem;
    color: #888;
    margin: 16px 0 0;
}

/* 料金比較 */
.un-price-compare {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    padding: 16px;
    background: var(--color-bg-light);
    border-radius: 8px;
}
.un-price-item {
    flex: 1;
    text-align: center;
}
.un-price-badge {
    display: inline-block;
    padding: 2px 10px;
    background: var(--color-mygcall);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 2px;
    margin: 0 0 6px;
}
.un-price-label {
    font-size: 1.3rem;
    color: var(--color-text);
    margin: 0 0 8px;
}
.un-price-num {
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--color-text-bold);
    line-height: 1;
}
.un-price-unit {
    font-size: 1.2rem;
    font-weight: 400;
}
.un-price-arrow {
    font-size: 2rem;
    color: #aaa;
    flex-shrink: 0;
}
.un-price-item--new .un-price-num {
    color: #c0392b;
}

/* 汎用ボタン */
.un-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 36px;
    background: #fff;
    border: 2px solid var(--color-mygcall);
    color: var(--color-mygcall);
    border-radius: 4px;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    transition: 0.2s;
}
.un-btn:hover {
    background: var(--color-mygcall);
    color: #fff;
}
.un-btn--primary {
    background: var(--color-mygcall);
    color: #fff;
    padding: 16px 56px;
    font-size: 1.8rem;
    margin-top: 24px;
    border-radius: 6px;
}
.un-btn--primary:hover {
    background: #007aad;
    border-color: #007aad;
    color: #fff;
}

/* サービス共通レイアウト（SPは1カラム） */
.un-service-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
    margin: 0 0 24px;
}
.un-service-layout-img img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* プランカード */
.un-plan-cards {
    display: flex;
    gap: 16px;
    margin: 0 0 20px;
}
.un-plan-card {
    flex: 1;
    padding: 16px;
    background: #f4f8fc;
    border: 1px solid #c2d8f0;
    border-radius: 8px;
    text-align: center;
}
.un-plan-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 8px;
}
.un-plan-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin: 0 0 4px;
}
.un-plan-price--single {
    justify-content: flex-start;
    margin: 0 0 8px;
}
.un-plan-monthly {
    font-size: 1.3rem;
    color: var(--color-text);
}
.un-plan-num {
    font-size: 2.8rem;
    font-weight: 900;
    color: #c0392b;
}
.un-plan-num--lg {
    font-size: 3.6rem;
}
.un-plan-unit {
    font-size: 1.3rem;
    color: var(--color-text);
}
.un-plan-note {
    font-size: 1.2rem;
    color: #888;
    margin: 4px 0 0;
}
.un-plan-sub {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 12px;
}
.un-plan-feature-note {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-mygcall);
    margin: 0 0 12px;
}

/* サービスキャッチコピー */
.un-service-catch {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text-bold);
    margin: 0 0 16px;
}

/* 特徴リスト */
.un-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.un-feature-list li {
    padding: 8px 0 8px 22px;
    position: relative;
    font-size: 1.4rem;
    color: var(--color-text);
    border-bottom: 1px dotted var(--color-bg);
}
.un-feature-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-mygcall);
    font-weight: 700;
}

/* 使用量ボックス */
.un-usage-box {
    margin: 20px 0 0;
    padding: 20px;
    background: var(--color-bg-light);
    border-radius: 8px;
    text-align: center;
}
.un-usage-label {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--color-text-bold);
}
.un-usage-note {
    font-size: 1.2rem;
    color: #888;
    margin: 0 0 12px;
}
.un-usage-nums {
    display: flex;
    justify-content: center;
    gap: 32px;
}
.un-usage-num-item {
    text-align: center;
}
.un-usage-num {
    font-size: 2.6rem;
    font-weight: 900;
    color: var(--color-primary);
}
.un-usage-unit {
    font-size: 1.3rem;
    color: var(--color-text);
    margin-left: 4px;
}
.un-usage-day {
    display: block;
    font-size: 1.2rem;
    color: #888;
    margin-bottom: 4px;
}

/* 法人管理ソフト アイコン */
.un-kanri-icons {
    display: flex;
    gap: 24px;
    margin: 0 0 24px;
}
.un-kanri-icon-item {
    flex: 1;
    text-align: center;
}
.un-kanri-icon-item img {
    display: block;
    margin: 0 auto 8px;
}
.un-kanri-icon-item p {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

/* G-Callでんわ 料金 */
.un-tel-price {
    display: flex;
    gap: 16px;
    margin: 0 0 0;
}
.un-tel-price-item {
    flex: 1;
    padding: 20px 16px;
    background: var(--color-primary);
    border-radius: 8px;
    text-align: center;
}
.un-tel-label {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 8px;
}
.un-tel-num {
    font-size: 3.6rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}
.un-tel-num--free {
    font-size: 2.8rem;
}
.un-tel-unit {
    font-size: 1.2rem;
    font-weight: 400;
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.85);
}

/* ===== タブ050 TOP ===== */
.un050-top-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    margin: 0 0 24px;
}
.un050-top-content {
    flex: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.un050-top-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.un050-top-lead {
    font-size: 1.8rem;
    font-weight: 700;
    color: #314158;
    line-height: 1.8;
    margin: 0;
}
.un050-hl {
    color: var(--color-mygcall);
}
.un050-top-note {
    font-size: 1.2rem;
    color: #45556c;
    line-height: 1.6;
    margin: 0;
}
.un050-top-image {
    flex: 1;
}
.un050-top-image img {
    width: 100%;
    height: auto;
    display: block;
}
.un-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 9px 24px;
    border: 1.5px solid #45556c;
    border-radius: 9999px;
    color: #314158;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    background: transparent;
    width: 100%;
    box-sizing: border-box;
}
.un-btn-outline:hover {
    text-decoration: none;
}
ul.disc_list {
    margin: 0 0 0 20px;
}
ul.disc_list li {
    list-style-type: disc;
}

/* ===== 料金タブ ===== */

.un-fee-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    background: #eef4f7;
    gap: 12px;
}
.un-fee-date {
    font-size: 1.6rem;
    font-weight: 700;
    color: #314158;
    margin: 0;
}
.un-fee-formula {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.un-fee-item {
    background: #fff;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.un-fee-tag {
    background: var(--color-mygcall);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.un-fee-num {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--color-mygcall);
    line-height: 1;
}
.un-fee-yen {
    font-size: 1.8rem;
    font-weight: 700;
    color: #314158;
    line-height: 1;
}
.un-fee-unit {
    font-size: 1.1rem;
    color: #314158;
    line-height: 1.6;
    align-self: center;
    text-align: center;
}
.un-fee-op {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-mygcall);
    line-height: 1;
}
.un-fee-total {
    display: flex;
    align-items: center;
    gap: 4px;
}
.un-fee-total-num {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--color-mygcall);
    line-height: 1;
}
.un-fee-total-yen {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-mygcall);
    line-height: 1;
}
.un-fee-total-unit {
    font-size: 1.1rem;
    color: #45556c;
    line-height: 1.4;
}
.un-fee-note {
    font-size: 1.2rem;
    color: #45556c;
    margin: 0;
}

/* ===== 利用方法タブ ===== */

.un-how-section {
    padding: 0 0 32px;
}
.un-feature-check {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.un-feature-check li {
    font-size: 1.6rem;
    font-weight: 500;
    color: #314158;
    line-height: 1.6;
    position: relative;
    padding: 0 0 0 30px;
}
.un-feature-check li::before {
    content: "";
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-image: url("/designChange/type/img/ico_check_c.svg");
    background-size: 20px;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: absolute;
    top: 2px;
    left: 0;
}
.un-how-footnote {
    font-size: 1.2rem;
    color: #45556c;
    line-height: 1.9;
    margin: 0;
}
.un-how-note {
    font-size: 1.4rem;
    color: #45556c;
    margin: 0 0 16px;
}
.un-step {
    padding: 20px 0 0;
    margin-top: 16px;
}
.un-step:first-of-type {
    border-top: none;
    margin-top: 8px;
}
.un-step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.un-step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-mygcall);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.un-step-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #314158;
}
.un-step-body {
    padding-left: 42px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.un-sub-step {
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.un-sub-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.un-sub-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--color-mygcall);
    color: var(--color-mygcall);
    font-size: 1.3rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.un-sub-title {
    width: 89%;
    font-size: 1.6rem;
    font-weight: 700;
    color: #314158;
}
.un-btn-outline--sm {
    width: auto;
    white-space: nowrap;
    font-size: 1.4rem;
    padding: 5px 12px 6px 16px;
    flex-shrink: 0;
}
.un-sub-body {
    font-size: 1.6rem;
    color: #314158;
    margin: 0;
    line-height: 1.7;
}
.un-store-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 24px;
    border: 1px solid #d0dce6;
    border-radius: 6px;
    width: fit-content;
    flex-wrap: wrap;
}
.un-store-label {
    font-size: 1.6rem;
    font-weight: 700;
    color: #314158;
}
.un-setup-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}
.un-setup-img {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===== FAQ Q&Aアコーディオン ===== */

.un-faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.un-faq-item {
    overflow: hidden;
    background: #fff;
}
.un-faq-q {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 12px;
    padding: 0 16px 0 0;
    border: none;
    background: #fff;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.un-faq-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Outfit", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}
.un-faq-badge--q {
    background: #003366;
    color: #fff;
}
.un-faq-badge--a {
    background: #fff;
    color: #003366;
    flex-shrink: 0;
}
.un-faq-q-text {
    flex: 1;
    font-size: 1.6rem;
    font-weight: 700;
    color: #314158;
    line-height: 1.4;
}

.un-faq-a {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.55s ease;
}
.un-faq-a-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    background: #eef4f7;
    margin-top: 8px;
}
.un-faq-a-text {
    flex: 1;
    font-size: 1.6rem;
    color: #45556c;
    line-height: 1.8;
    margin: 0;
}

/* ===== 使い放題WiFiバナー ===== */

.wf-banner {
    background: linear-gradient(to right, #003b75 0%, #00a0da 60%);
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px 16px;
    gap: 20px;
}
.wf-banner-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 auto;
    max-width: 100%;
}
.wf-banner-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}
.wf-logo {
    width: 75px;
    height: 18px;
    filter: brightness(0) invert(1);
    display: block;
    margin: 0 auto;
}
.wf-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wf-service-title {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}
.wf-wifi-icon {
    flex-shrink: 0;
    width: 68px;
    height: 50px;
}
.wf-pricing-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-wrap: wrap;
}
.wf-pricing-card {
    width: 100%;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid var(--color-mygcall);
    border-radius: 8px;
    overflow: hidden;
}
.wf-pricing-hdr {
    background: var(--color-mygcall);
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    gap: 2px;
}
.wf-pricing-gb {
    font-family: "Outfit", sans-serif;
    font-size: 2rem;
    font-weight: 700;
}
.wf-pricing-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 16px 10px;
}
.wf-price-row {
    display: flex;
    align-items: baseline;
    gap: 2px;
    color: var(--color-mygcall);
}
.wf-price-monthly {
    font-size: 1.6rem;
    font-weight: 700;
    padding-bottom: 4px;
}
.wf-price-num {
    font-family: "Outfit", sans-serif;
    font-size: 3.8rem;
    font-weight: 700;
    color: var(--color-mygcall);
    letter-spacing: 0.02em;
    line-height: 1;
}
.wf-price-unit {
    font-size: 1.8rem;
    font-weight: 700;
    padding-bottom: 4px;
}
.wf-price-note {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
}
.wf-footer-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wf-footer-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin: 0;
}
.wf-footer-plan {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    white-space: normal;
}
.wf-sup {
    font-size: 1.2rem;
}
.wf-footer-lead {
    font-size: 1.4rem;
    color: #fff;
}
.wf-footer-note {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

.wf-banner-right {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    height: 150px;
    left: 20%;
}
.wf-global-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #003366;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    gap: 6px;
    box-shadow: 4px 4px 12px rgba(0, 150, 206, 0.25);
    z-index: 1;
}

.wf-router-img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 240px;
    height: auto;
    display: block;
}

/* ===== 使い放題WiFi（100GB）バナー ===== */

.wf100-banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    padding: 24px 16px;
    background: linear-gradient(to right, #003b74 0%, #00a0da 60%);
    overflow: hidden;
    min-height: auto;
}

.wf100-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

.wf100-logo-row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wf100-logo {
    filter: brightness(0) invert(1);
    display: block;
}

.wf100-title-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.wf100-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffff00;
    color: #003366;
    font-size: 1.8rem;
    font-weight: 700;
    padding: 0 16px;
    border-radius: 9999px;
    height: 40px;
    white-space: nowrap;
    flex-shrink: 0;
}

.wf100-title {
    font-size: 4.8rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 0;
    text-align: center;
}

.wf100-wifi {
    flex-shrink: 0;
}

.wf100-plate {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    padding-top: 12px;
}

.wf100-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    padding: 0 16px 8px;
}

.wf100-price-monthly {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-mygcall);
}

.wf100-price-num {
    font-size: 4rem;
    font-weight: 900;
    color: var(--color-mygcall);
    line-height: 1;
}

.wf100-price-unit {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-mygcall);
}

.wf100-price-note {
    font-size: 1.4rem;
    color: #314158;
    margin: 0 0 0 12px;
    white-space: nowrap;
    align-self: flex-end;
}

.wf100-stats {
    background: #eef4f7;
    border-radius: 0 0 8px 8px;
    padding: 8px 20px 16px;
}

.wf100-stats-copy {
    font-size: 2rem;
    font-weight: 900;
    color: #003366;
    text-align: center;
    margin: 0 0 8px;
}

.wf100-stats-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.wf100-stats-label {
    font-size: 1.4rem;
    font-weight: 400;
    color: #003366;
    margin: 0;
    line-height: 1.5;
}

.wf100-stats-label small {
    font-size: 1.2rem;
}

.wf100-time-boxes {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.wf100-time-box {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    background: #fff;
    border: 1px solid #37caff;
    border-radius: 4px;
    padding: 4px 10px;
}

.wf100-per-day {
    font-size: 1.2rem;
    font-weight: 400;
    color: #003366;
}

.wf100-approx {
    font-size: 1.4rem;
    font-weight: 700;
    color: #003366;
}

.wf100-time-num {
    font-size: 2rem;
    font-weight: 800;
    color: #003366;
    line-height: 1;
}

.wf100-time-unit {
    font-size: 1.4rem;
    font-weight: 700;
    color: #003366;
}

.wf100-right {
    flex-shrink: 0;
    text-align: center;
    margin: 0 auto;
}

.wf100-router-img {
    display: block;
    width: 240px;
    margin: 0 auto;
    height: auto;
}

/* ===== データSIM（100GB）バナー ===== */

.sim100-banner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: linear-gradient(to right, #003b74 0%, #00a0da 70%);
    overflow: hidden;
    min-height: auto;
}

.sim100-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 16px;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.sim100-header-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sim100-logo {
    filter: brightness(0) invert(1);
    display: block;
    width: 140px;
    height: auto;
    flex-shrink: 0;
}

.sim100-stats {
    background: #eef4f7;
    border-radius: 8px;
    padding: 16px;
}

.sim100-feature-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.sim100-feature-label {
    font-size: 1.4rem;
    font-weight: 700;
    color: #003366;
    margin: 0;
    line-height: 1.5;
    flex: none;
}

.sim100-feature-boxes {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    width: 100%;
}

.sim100-feature-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #fff;
    border: 1px solid #37caff;
    border-radius: 4px;
    padding: 0 12px;
    height: 44px;
    flex: 1;
    white-space: nowrap;
}

.sim100-box-en {
    font-size: 2.2rem;
    font-weight: 800;
    color: #003366;
    line-height: 1;
}

.sim100-box-sub {
    font-size: 1.2rem;
    font-weight: 700;
    color: #003366;
}

.sim100-box-text {
    font-size: 1.6rem;
    font-weight: 700;
    color: #003366;
}

.sim100-right {
    flex-shrink: 0;
    width: 100%;
    height: 200px;
    align-self: stretch;
    overflow: hidden;
    position: relative;
}

.sim100-person-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* ===== 法人管理ソフトバナー ===== */

.mgmt-banner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: linear-gradient(to right, #003b74 0%, #00a0da 44%);
    overflow: hidden;
    min-height: auto;
}

.mgmt-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 16px;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.mgmt-header-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.mgmt-tabs {
    display: flex;
    gap: 2px;
    width: 100%;
}

.mgmt-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #eef4f7;
    color: #003366;
    font-size: 1.4rem;
    font-weight: 700;
    padding: 8px 8px 9px;
    flex: 1;
}
.mgmt-tab img {
    width: 18px;
    height: auto;
}
.mgmt-tab--first {
    border-radius: 8px 0 0 8px;
}

.mgmt-tab--last {
    border-radius: 0 8px 8px 0;
}

.mgmt-tab-icon {
    flex-shrink: 0;
}

.mgmt-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mgmt-feature-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.6;
}

.mgmt-feature-list li::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-image: url("/designChange/type/img/ico_check.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.mgmt-right {
    flex-shrink: 0;
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.mgmt-office-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ===== Block 7-2: 法人管理ソフト 補足 ===== */
.mgmt-explain {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 48px;
}
.mgmt-explain-heading,
.mgmt-steps-heading {
    background: #eef4f7;
    border-left: 4px solid var(--color-mygcall);
    padding: 12px 24px;
    font-size: 2rem;
    font-weight: 700;
    color: #314158;
    line-height: 1.4;
}
.mgmt-explain-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.mgmt-explain-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.mgmt-explain-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-mygcall);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    padding: 2px 16px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 68px;
}
.mgmt-explain-row p {
    font-size: 1.6rem;
    color: #314158;
    line-height: 1.8;
    margin: 0;
}
.mgmt-steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.mgmt-steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.mgmt-step {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mgmt-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-mygcall);
    color: #fff;
    font-family: "Outfit", var(--font-jp);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}
.mgmt-step-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mgmt-step-text {
    font-size: 1.6rem;
    font-weight: 700;
    color: #314158;
    line-height: 1.4;
    margin: 0;
}
.mgmt-step-sub {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-mygcall);
    margin: 0;
    line-height: 1.4;
}

/* ===== Block 8: G-Callでんわ ===== */
.den-banner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: auto;
    overflow: hidden;
    background: var(--color-bg-light);
    border-radius: 16px;
    padding: 16px;
}
.den-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0 16px 0;
    width: 100%;
    flex-shrink: 0;
}
.den-caption {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-mygcall);
    line-height: 1.4;
    margin: 0;
}
.den-heading-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.den-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #003366;
    box-shadow: 4px 8px 16px rgba(0, 151, 206, 0.4);
    flex-shrink: 0;
}
.den-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: #314158;
    margin: 0;
    line-height: 1.4;
}
.den-price-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.den-catch {
    font-size: 1.8rem;
    font-weight: 700;
    color: #003366;
    margin: 0;
    line-height: 1.4;
}
.den-price-boxes {
    display: flex;
    gap: 4px;
}
.den-price-box {
    display: flex;
    flex-direction: column;
    flex: 1;
    border: 2px solid #fff;
    overflow: hidden;
    border-radius: 8px;
}

.den-price-box-header {
    background: var(--color-mygcall);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    padding: 2px 8px;
}
.den-price-box-body {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    padding: 12px 8px;
    background: #fff;
    flex: 1;
}
.den-price-main {
    display: flex;
    align-items: flex-end;
    gap: 2px;
}
.den-price-num {
    font-family: "Outfit", var(--font-jp);
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--color-mygcall);
    line-height: 1;
}
.den-price-unit {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-mygcall);
    line-height: 1;
    padding-bottom: 2px;
}
.den-price-note {
    font-size: 1.1rem;
    color: var(--color-mygcall);
    text-align: center;
    line-height: 1.4;
    margin: 0;
}
.den-price-box-body--free {
    justify-content: center;
    align-items: center;
}
.den-price-free {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--color-mygcall);
    line-height: 1;
}
.den-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #314158;
    color: #314158;
    font-size: 1.4rem;
    font-weight: 700;
    padding: 8px 12px 9px 24px;
    border-radius: 9999px;
    text-decoration: none;
    line-height: 1.4;
    align-self: stretch;
    transition: opacity 0.2s;
}
.den-btn:hover {
    opacity: 0.7;
    text-decoration: none;
    color: #314158;
}
.den-right {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 200px;
}
.den-person-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* ===== アンカーリンクボタン（.alink） ===== */

.alink {
    display: flex;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}
.alink li {
    list-style: none;
}
.alink li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #003366;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    padding: 8px 12px 9px 24px;
    border-radius: 9999px;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
    transition: opacity 0.2s;
}
.alink li a:hover {
    opacity: 0.8;
    text-decoration: none;
    color: #fff;
}
.alink li a::after {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    background-image: url("/designChange/type/img/ico_arw_down.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.un_cta {
    margin: 32px 0 0;
    text-align: center;
}

.un_cta_btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background-color: var(--color-mygcall);
    color: var(--color-white);
    font-size: 1.8rem;
    font-weight: 700;
    padding: 14px 40px;
    border-radius: 200px;
    text-decoration: none;
    line-height: 1.4;
    transition: opacity 0.2s;
    align-self: flex-start;
}

.un_cta_btn::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    mask: url("/designChange/type/img/ico_request.svg") no-repeat center / contain;
    -webkit-mask: url("/designChange/type/img/ico_request.svg") no-repeat center / contain;
    background-color: var(--color-white);
}

.sec_legal {
    width: 90%;
    margin: 0 auto;
    background-color: var(--color-white);
    padding-bottom: 80px;
}
.sec_legal_inner {
    max-width: 980px;
    margin: 0 auto;
}
.legal_box {
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-footer-sub);
    border-radius: 16px;
    overflow: hidden;
}
.legal_box_heading {
    background-color: var(--color-text-bold);
    border-radius: 16px 16px 0 0;
    padding: 16px 40px;
}
.legal_box_title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.4;
    margin: 0;
    text-align: center;
}
.legal_box_body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 30px 32px;
    gap: 16px;
}
.legal_box_text {
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.8;
    margin: 0;
    text-align: center;
}
.legal_box_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--color-text);
    border-radius: 200px;
    padding: 8px 12px 9px 24px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text-bold);
    line-height: 1.4;
    text-decoration: none;
    transition: opacity 0.2s;
}
.legal_box_btn:hover {
    opacity: 0.7;
    text-decoration: none;
    color: var(--color-text-bold);
}
.legal_box_btn_arrow {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    mask: url("/designChange/common/img/ico_arw.svg") no-repeat center / contain;
    -webkit-mask: url("/designChange/common/img/ico_arw.svg") no-repeat center / contain;
    background-color: var(--color-text-bold);
}

/* ----------------------------------------------------------
   サポートTOP、下層
   ---------------------------------------------------------- */
.company_smenu {
    background: #142637;
    padding: 0 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    list-style-type: none;
    margin: 0;
    display: flex;
    gap: 20px;
    white-space: nowrap;
    font-size: 1.3rem;
}
.company_smenu li a {
    color: #c2cfd8;
    text-decoration: none;
    display: block;
    padding: 6px 0;
}
.company_smenu li a:hover {
    color: var(--color-white);
}

/* ===== サポートTOP ヒーローバナー ===== */
.help-hero {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: linear-gradient(
        to right,
        #dae9f4 0%,
        #ebf5fa 50%,
        #f5fafe 100%
    );
}
.help-hero-photo {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: url("/designChange/type/img/hero_help_bg.png") right 50% no-repeat;
    background-size: cover;
}
.help-hero-inner {
    position: relative;
    z-index: 1;
    padding: 24px 20px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
}
.help-hero-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 55%;
}
.help-hero-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.help-hero-label {
    font-family: "Outfit", sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-mygcall);
    letter-spacing: 0.08em;
    margin: 0;
    line-height: 1.4;
}
.help-hero-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: #003366;
    margin: 0;
    line-height: 1.4;
}
.help-hero-desc {
    font-size: 1.1rem;
    color: #003366;
    margin: 0;
    line-height: 1.7;
}

/* ===== サポートTOP CTA ===== */
.helptop-cta {
    padding: 32px 16px 40px;
    background: #fff;
}
.helptop-cta-box {
    position: relative;
    overflow: hidden;
    background: #003366;
    border-radius: 12px;
    padding: 32px 20px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.helptop-cta-box::before {
    content: "";
    position: absolute;
    top: -40%;
    left: -20%;
    width: 70%;
    height: 220%;
    background: radial-gradient(
        ellipse,
        rgba(0, 151, 206, 0.65) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 0;
}
.helptop-cta-box::after {
    content: "";
    position: absolute;
    top: -60%;
    right: -15%;
    width: 65%;
    height: 240%;
    background: radial-gradient(
        ellipse,
        rgba(0, 151, 206, 0.32) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 0;
}
.helptop-cta-heading {
    position: relative;
    z-index: 1;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin: 0;
    line-height: 1.6;
}
.helptop-cta-card {
    position: relative;
    z-index: 1;
    width: 100%;
    background: #eef4f7;
    border: 2px solid var(--color-mygcall);
    border-radius: 8px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
}
.helptop-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--color-mygcall);
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    padding: 16px 24px;
    border-radius: 200px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    transition: opacity 0.2s;
    line-height: 1.4;
    width: 100%;
    box-sizing: border-box;
}
.helptop-cta-btn:hover {
    opacity: 0.85;
    text-decoration: none;
    color: #fff;
}
.helptop-cta-btn-icon {
    flex-shrink: 0;
    width: 26px;
    height: 22px;
}
.helptop-cta-tel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.helptop-cta-tel-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.helptop-cta-tel-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}
.helptop-cta-tel-num {
    font-family: "Outfit", sans-serif;
    font-size: 3.4rem;
    font-weight: 700;
    color: #003366;
    line-height: 1.4;
    letter-spacing: 0.02em;
}
.helptop-cta-tel-note {
    font-size: 1.4rem;
    color: #45556c;
    margin: 0;
    line-height: 1.5;
    text-align: center;
}

/* ===== サポートTOP リンクカード ===== */
.helptop-links {
    padding: 0 16px 40px;
    background: #fff;
}
.helptop-links-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.helptop-links-card {
    background: #eef4f7;
    border-radius: 12px;
    padding: 20px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-decoration: none;
    transition: opacity 0.2s;
}
.helptop-links-card:hover {
    opacity: 0.85;
    text-decoration: none;
}
.helptop-links-head {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 4px;
}
.helptop-links-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.helptop-links-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #003366;
    box-shadow: 4px 8px 16px rgba(0, 151, 206, 0.4);
    flex-shrink: 0;
}
.helptop-links-icon svg {
    width: 20px;
    height: 20px;
}
.helptop-links-title {
    flex: 1;
    font-size: 2.2rem;
    font-weight: 700;
    color: #314158;
    line-height: 1.4;
}
.helptop-links-arrow {
    flex-shrink: 0;
    display: block;
    width: 16px;
    height: 16px;
    position: relative;
}
.helptop-links-arrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 11px;
    height: 2px;
    background: #314158;
    transform: translateY(-50%);
}
.helptop-links-arrow::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid #314158;
    border-right: 2px solid #314158;
    transform: translateY(-50%) rotate(45deg);
}
.helptop-links-desc {
    font-size: 1.5rem;
    color: #45556c;
    margin: 0;
    line-height: 1.8;
}
.helptop-links-img {
    border-radius: 12px;
    overflow: hidden;
    height: 160px;
    flex-shrink: 0;
}
.helptop-links-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===== サポートTOP ポイントサービスのご案内 ===== */
.helptop-info {
    padding: 40px 20px 48px;
    background: #fff;
}
.helptop-info-inner {
    display: flex;
    flex-direction: column;
}
.helptop-info-inner .un_contents_heading {
    margin: 0 0 24px;
    padding: 14px 0 0;
    border-top: 2px solid #eef4f7;
    font-size: 2rem;
    font-weight: 700;
    color: #314158;
    line-height: 1.4;
    position: relative;
}
.helptop-info-inner .un_contents_heading::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--color-mygcall);
}
.helptop-info-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.helptop-info-block {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.helptop-info-img {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
}
.helptop-info-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.helptop-info-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.helptop-info-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #314158;
    line-height: 1.4;
    margin: 0;
}
.helptop-info-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}
.helptop-info-desc {
    width: 100%;
    font-size: 1.4rem;
    font-weight: 400;
    color: #45556c;
    line-height: 1.8;
    margin: 0;
}
.helptop-info-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px 8px 20px;
    border: 1px solid #45556c;
    border-radius: 999px;
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 700;
    color: #314158;
    line-height: 1.4;
    white-space: nowrap;
}
.helptop-info-btn:active {
    opacity: 0.75;
}
.helptop-info-btn-arrow {
    display: block;
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    position: relative;
}
.helptop-info-btn-arrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 10px;
    height: 2px;
    background: #314158;
    transform: translateY(-50%);
}
.helptop-info-btn-arrow::after {
    content: "";
    position: absolute;
    right: 0px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid #314158;
    border-right: 2px solid #314158;
    transform: translateY(-50%) rotate(45deg);
}

/* ----------------------------------------------------------
   下層HERO SECTION (新)
   ---------------------------------------------------------- */

.help_un_hero {
    margin: 0 0 40px;
    background: url(/designChange/type/img/hero_help_bg.png) no-repeat center center;
    background-size: cover;
}
.help_un_hero .help_un_hero_inner {
    padding: 24px 20px;
}
.help_un_hero_heading {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1.4;
    color: var(--color-primary);
}

/* ===== サポート下層 Block 1: タブ内タブ ===== */
.sub_tabs {
    background: var(--color-primary);
    padding: 16px 20px;
    border-radius: 0 0 5px 5px;
    display: flex;
    gap: 10px;
}
.sub_tabs button {
    border: none;
    background: #e6e9eb;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 5px 7px;
}
.sub_tabs button.sub_tab--active {
    border: 1px solid #e6e9eb;
    background: var(--color-primary);
    color: #fff;
}

/* ===== サポート下層 Block 2: G-Callポイントについて バナー ===== */
.helpun-point-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    background: linear-gradient(
        to right,
        var(--color-mygcall) 0%,
        #0557a9 100%
    );
    overflow: hidden;
}
.helpun-point-banner-coins {
    width: 23%;
}
.helpun-point-banner-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.helpun-point-banner-catch {
    font-size: 2.4rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    margin: 0;
}
.helpun-point-banner-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    margin: 0;
}

/* ===== サポート下層 Block 3: サービス紹介 ===== */
.helpun-services-bg {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #eff8fc 0%, #c3dfee 100%);
    padding: 24px 20px 20px;
}
.helpun-services-bg::after {
    display: none;
}
.helpun-services-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.helpun-services-promo-lead {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.helpun-services-promo-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-mygcall);
    color: #fff;
    border-radius: 20px;
    padding: 4px 0;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.helpun-services-promo-point {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}
.helpun-services-logo {
    width: 72px;
    height: 17px;
    flex-shrink: 0;
    display: block;
    object-fit: contain;
}
.helpun-cp-label {
    font-size: 2rem;
    font-weight: 800;
    color: #003366;
    letter-spacing: -0.08em;
}
.helpun-cp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--color-mygcall);
    border-radius: 5px;
    padding: 5px 12px;
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.1em;
    white-space: nowrap;
}
.helpun-services-promo-catch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    line-height: 1;
}
.helpun-cp-navy {
    font-size: 2rem;
    font-weight: 700;
    color: #003366;
    letter-spacing: 0.06em;
}
.helpun-cp-note {
    font-size: 1.2rem;
    font-weight: 700;
    color: #003366;
    letter-spacing: 0.25em;
}
.helpun-cp-pct {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--color-mygcall);
    letter-spacing: 0.06em;
    font-family: "Outfit", sans-serif;
}
.helpun-cp-cyan {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-mygcall);
    letter-spacing: 0.06em;
}
.helpun-services-cards {
    display: flex;
    gap: 8px 4%;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0 0 8px;
}
.helpun-services-cards li {
    flex-shrink: 0;
    width: 48%;
    display: flex;
    flex-direction: column;
}
.helpun-services-cards li img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    display: block;
}
.helpun-services-cards li span {
    display: block;
    background: #003366;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    padding: 6px 8px;
    letter-spacing: 0.06em;
    line-height: 1.4;
}

.helpun-services-note {
    font-size: 1.1rem;
    color: #45556c;
    line-height: 1.6;
    margin-top: 12px;
}

/* ===== Block 4: .save overrides ===== */
.helpun-services-bg.save {
    background: linear-gradient(135deg, #f4f3fc 0%, #e5dbf3 100%);
}
.helpun-services-bg.save .helpun-services-promo-tag {
    background: #b75ed8;
}
.helpun-services-bg.save .helpun-cp-badge {
    color: #b75ed8;
}
.helpun-services-bg.save .helpun-cp-pct {
    color: #b75ed8;
}

/* ===== Block 5: アンケートバナー ===== */
.helpun-survey-banner {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(81deg, var(--color-mygcall) 0%, #834daf 100%);
}
.helpun-survey-banner::after {
    content: "";
    position: absolute;
    right: 0;
    top: 40%;
    width: 30%;
    height: 100%;
    background: url("/designChange/type/img/helpun_survey_deco.png") right top / contain
        no-repeat;
    pointer-events: none;
    z-index: 2;
}
.helpun-survey-header {
    position: relative;
    z-index: 1;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background: #003366;
    border-radius: 12px 12px 0 0;
}
.helpun-survey-header span {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    background: linear-gradient(90deg, #d4bbe4 0%, #57d2ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.helpun-survey-body {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: center; */
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 16px 16px 20px;
}
.helpun-survey-badge {
    position: static;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4;
    flex-shrink: 0;
}
.helpun-survey-sub {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    margin: 0;
    text-align: center;
}
.helpun-survey-num {
    font-size: 5.6rem;
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 0;
}
.helpun-survey-cta {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.4;
    text-align: center;
    text-shadow: -2px 4px 10px rgba(0, 151, 206, 0.6);
}

.helpun-services-bg.save .helpun-services-promo-catch {
    flex-wrap: wrap;
    line-height: 1.5;
}
.helpun-services-bg.save .helpun-cp-navy-s {
    display: block;
    width: 100%;
    font-size: 2rem;
    font-weight: 700;
    color: #003366;
    text-align: center;
}
.txt_btn_set {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* ===== Block 6: 紹介特典バナー ===== */

.helpun-referral-banner {
    background: url(/designChange/type/img/bg_invitation_sp.jpg) 50% 50% no-repeat;
    border-radius: 16px;
    background-size: 100%;
    padding: 40px 0 30px;
    overflow: hidden;
}
.helpun-referral-cards {
    display: flex;
    flex-direction: column;
    gap: 50px;
    justify-content: center;
}
.helpun-referral-card {
    width: 92%;
    margin: 0 auto;
    position: relative;
    border-radius: 16px;
    background: #fff;
    box-shadow: 4px 8px 16px rgba(0, 151, 206, 0.4);
}
.helpun-referral-person {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: block;
}
.helpun-referral-card-header {
    border-radius: 16px 16px 0 0;
    height: 80px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.08em;
}
.helpun-referral-card--blue .helpun-referral-card-header {
    background: var(--color-mygcall);
}
.helpun-referral-card--purple .helpun-referral-card-header {
    background: #834daf;
}
.helpun-referral-card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 24px;
    min-height: 114px;
}
.helpun-referral-num {
    font-family: "Outfit", sans-serif;
    font-size: 7rem;
    font-weight: 700;
    color: #003366;
    letter-spacing: -0.01em;
    line-height: 1;
    margin: 0;
    flex-shrink: 0;
}
.helpun-referral-label {
    font-size: 2.2rem;
    font-weight: 700;
    color: #003366;
    line-height: 1.4;
    margin: 0;
    white-space: nowrap;
}

/* ----------------------------------------------------------
   入力、確認画面
   ---------------------------------------------------------- */

/* 入力画面 */
table.procedure {
	margin: 0 0 30px;
	font-size: 1.2rem;
	text-align: center;
	width: 100%;
	border-collapse: collapse;
	line-height: 1.4;
	font-size: 1.3rem;
	border-bottom: 1px solid #F5F3EF;
}

table.procedure,
table.procedure thead,
table.procedure tbody,
table.procedure tr,
table.procedure th,
table.procedure td {
	display: block;
	border: none;
}

table.procedure tr {
	display: flex;
	flex-wrap: wrap;
}

table.procedure th,
table.procedure td {
	width: 100%;
	border: none;
	box-sizing: border-box;
}

table.procedure th {
	padding: 5px 15px;
	box-sizing: border-box;
	font-weight: bold;
	color: #fff;
	background: #F5F3EF;
	text-align: center;
}

table.procedure td {
	background: #F5F3EF;
}

table.procedure td[data-label] {
	display: block;
	padding: 0;
}

table.procedure td[data-label] .label_in {
	display: block;
	align-self: center;
	padding: 8px 15px;
}

table.procedure td[data-label]::before {
	content: attr(data-label);
	display: block;
	width: 100%;
	padding: 5px 10px;
	box-sizing: border-box;
	font-weight: bold;
	color: black;
	background: #F5F3EF;
}

table.procedure textarea {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
}

input.name {
	width: 10em;
}

input.address {
	width: 5em;
}

input.middleSize {
	width: 80%;
}

input.upperSize {
	width: 100%;
}

/* td min_height */
table.min_height62 td {
	min-height: 62px;
}