/* ==========================================================================
   NINJA WiFi - ギガ追加 LP (gigacampaign)  —  PC_4 design (pixel match)
   ========================================================================== */

*,
body, html,
h1, h2, h3, h4, h5, h6,
p, span, a, li, div,
button, input, select, textarea {
    font-family: 'Montserrat', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif !important;
    box-sizing: border-box;
}
body { margin: 0; background: #fff; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img { max-width: 100%; }

/* scroll offset for fixed header */
#campaign, #about, #reason, #plans, #flow, #faq { scroll-margin-top: 110px; }

/* ---- theme tokens ----スマホ1台で
USE CASE
   blue       #2E5BE0   deep #1E3FA8
   navy text  #1B2A4E
   yellow     #FFD633
   red/pink   #DB3B66
   light bg   #F4F6FB
*/

.sp { display: none; }

.wrap {
    width: 1160px;
    max-width: 92%;
    margin: 0 auto;
}

/* shared section heading */
.sec-label {
    text-align: center;
    color: #2E5BE0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.sec-title {
    text-align: center;
    color: #1B2A4E;
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.4;
    margin: 0 0 44px;
}

/* shared yellow CTA */
.btn-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 300px;
    background: #FFD633;
    color: #1B2A4E;
    font-size: 19px;
    font-weight: 800;
    padding: 18px 48px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 8px 16px rgba(20, 40, 90, 0.18);
    transition: all 0.25s ease;
}
.btn-cta::after {
    content: '›';
    position: absolute;
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
}
.btn-cta:hover { background: #ffe04d; transform: translateY(-2px); box-shadow: 0 12px 22px rgba(20, 40, 90, 0.28); color: #1B2A4E; }

/* lightning chip icon */
.li-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.li-chip::before {
    content: '';
    width: 17px; height: 17px;
    flex-shrink: 0;
    background: url("/common/lp_pages/gigacampaign/contents.png") center/contain no-repeat;
}

/* ==========================================================================
   INFO BAR + HEADER
   ========================================================================== */
.info-bar {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 1001;
    background: linear-gradient(90deg, #FF5B95 0%, #FF87B0 100%);
    color: #fff; text-align: center;
    font-size: 14px; font-weight: 700; letter-spacing: 1px;
    height: 38px; line-height: 38px; padding: 0 15px;
    white-space: nowrap; overflow: hidden;
}
.topMenu {
    position: fixed; top: 38px; left: 0; width: 100%; height: 66px; z-index: 1000;
    display: flex; align-items: center; justify-content: space-between;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 0 40px;
}
.topMenu-logo img { height: 34px; width: auto; display: block; }
/* nav absolutely centered in the header regardless of logo/button widths */
.topMenu-nav {
    position: absolute; left: 50%; top: 0; height: 100%;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 26px;
}
.topMenu-nav a {
    color: #1B2A4E; font-size: 14px; font-weight: 500;
    text-decoration: none; white-space: nowrap; transition: color 0.2s ease;
}
.topMenu-nav a:hover { color: #2E5BE0; }
.topMenu-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #FFD633; color: #1B2A4E;
    font-size: 14px; font-weight: 700;
    padding: 11px 44px; border-radius: 30px;
    text-decoration: none; white-space: nowrap; transition: all 0.25s ease;
}
.topMenu-btn:hover { background: #ffe04d; transform: translateY(-1px); }
.topMenu-btn-sp { display: none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
    position: relative; overflow: hidden;
    margin-top: 104px;
    width: 100%;
    /* height tracks the artwork ratio (589/1440 = 40.9%) up to 1440px, then
       freezes at 589px. Width always stays full, so on screens wider than
       1440 the background simply zooms (cover) instead of getting cut off. */
    height: min(40.9vw, 589px);
    min-height: 440px;
    background: #1560DE url(../lp_pages/gigacampaign/background_hero.png) center center / cover no-repeat;
    display: flex; align-items: center;
}
/* hero text scales with the image (vw-based, clamped) and is positioned
   proportionally so it always tracks the artwork at any width */
.hero .wrap {
    position: relative; z-index: 2;
    width: 100%; max-width: none; margin: 0; padding: 0;
    box-sizing: border-box;
}
.hero-copy { margin-left: 9.7%; width: 46%; }
.hero-h1 {
    position: relative;
    display: inline-block;
    margin: 0;
    font-size: clamp(30px, 4.03vw, 58px); font-weight: 800; line-height: 1.15; color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.hero-h1 .hl { color: #FFDF15; }
.hero-h1::before {
    content: '\201C';
    position: absolute; left: -0.3em; top: -0.25em;
    font-size: 3.5em; line-height: 1; color: rgba(255, 255, 255, 0.28);
    font-family: Georgia, serif !important;
}
.hero-h1::after {
    content: '\201D';
    position: absolute; right: -0.3em; bottom: -0.72em;
    font-size: 3.5em; line-height: 1; color: rgba(255, 255, 255, 0.28);
    font-family: Georgia, serif !important;
}
.hero-lead { margin: min(0.3vw, 5px) 0 0; font-size: clamp(22px, 2.29vw, 33px); font-weight: 800; color: #fff; }
.hero-text { margin: min(0.2vw, 3px) 0 0; font-size: clamp(15px, 1.39vw, 20px); font-weight: 700; color: #eaf1ff; line-height: 1.6; }
/* チップは1行1つ・左揃えで縦に積む（3行） */
.hero-chips { display: flex; flex-direction: column; align-items: flex-start; gap: min(0.83vw, 12px); margin: min(1.4vw, 20px) 0 0; }
.hero-chips.hero-chips-2 { margin-top: min(0.83vw, 12px); }
.hero-chip {
    background: #fff; color: #1B2A4E;
    font-size: clamp(12px, 0.97vw, 14px); font-weight: 700;
    padding: min(0.63vw, 9px) min(1.25vw, 18px); border-radius: 8px;
    /* 3つのチップの幅を揃える。em指定なのでフォントの可変に追従する */
    min-width: 15.5em; justify-content: center;
}
.hero-price { margin: min(1.5vw, 22px) 0 0; color: #FFDF15; font-weight: 800; line-height: 1; display: flex; align-items: baseline; }
.hero-price .u-gb { font-size: clamp(24px, 2.78vw, 40px); font-weight: 800; color: #fff; }
.hero-price .u-num { font-size: clamp(46px, 5.28vw, 76px); font-weight: 800; letter-spacing: -1px; margin-left: clamp(8px, 1vw, 14px); }
.hero-price .u-yen { font-size: clamp(22px, 2.64vw, 38px); font-weight: 800; }
.hero-price .u-tax { font-size: clamp(12px, 1.11vw, 16px); font-weight: 700; color: #fff; margin-left: 6px; align-self: flex-end; padding-bottom: min(0.4vw, 6px); }
.hero .btn-cta { margin-top: min(1.8vw, 26px); font-size: clamp(16px, 1.32vw, 19px); }
.hero-device.sp { display: none; }

/* ==========================================================================
   HERO SNS
   ========================================================================== */
.hero-sns { background: #F4F6FB; padding: 18px 0; }
.hero-sns .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 40px; }
.hero-sns-label { margin: 0; font-size: 15px; font-weight: 700; color: #1B2A4E; line-height: 1.5; text-align: right; }
/* PCではグループを透過させ、アイコンとFOLLOW USを .wrap の直接のフレックス
   アイテムとして扱う。ラベル＋アイコンが1行目、FOLLOW USだけ独立行で中央 */
.hero-sns-group { display: contents; }
.hero-sns-icons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px; }
/* 「FOLLOW US」。左右のスラッシュは擬似要素を傾けて表現 */
.hero-sns-follow {
    flex: 0 0 100%;
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin: 0; color: #2E5BE0;
    font-size: 14px; font-weight: 700; letter-spacing: 3px;
}
.hero-sns-follow::before,
.hero-sns-follow::after {
    content: ''; width: 2px; height: 17px;
    background: currentColor; border-radius: 1px;
}
.hero-sns-follow::before { transform: rotate(20deg); }
.hero-sns-follow::after { transform: rotate(-20deg); }
.hero-sns-icons a { display: inline-flex; flex-shrink: 0; }
.hero-sns-icons img { width: 42px; height: 42px; display: block; transition: transform 0.2s ease; }
.hero-sns-icons a:hover img { transform: translateY(-3px); }
/* LINE 友だち button (image) */
.hero-sns-line { display: inline-flex; flex-shrink: 0; text-decoration: none; transition: transform 0.2s ease; }
.hero-sns-line img { height: 42px; width: auto; display: block; }
.hero-sns-line:hover { transform: translateY(-3px); }

/* ==========================================================================
   CAMPAIGN
   ========================================================================== */
.campaign { background: #fff; padding: 74px 0 48px; }
.campaign-banners { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; }
.campaign-banner {
    flex: 0 0 calc(50% - 15px); max-width: 540px;
    border-radius: 16px; overflow: hidden; display: block;
    box-shadow: 0 8px 22px rgba(30, 63, 168, 0.12);
}
.campaign-banner picture { display: block; }
.campaign-banner img { width: 100%; display: block; }
.campaign-banner-wide { flex: 0 0 100%; max-width: 100%; }

/* ==========================================================================
   USE CASE  (light section, notch bottom)
   ========================================================================== */
.usecase { background: #fff; padding: 56px 0 90px; position: relative; }
.usecase-cards { display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; }
.usecase-card {
    position: relative; overflow: hidden;
    flex: 1 1 0; min-width: 230px; max-width: 280px;
    background: #F4F6FB; border-radius: 18px;
    padding: 34px 18px 30px; text-align: center;
    transition: all 0.25s ease;
}
.usecase-card::before {
    content: ''; position: absolute; top: -8px; left: -8px;
    width: 46%; aspect-ratio: 1 / 1; z-index: 0;
    background: url(../lp_pages/gigacampaign/usecase_background.png) center/contain no-repeat;
    opacity: 0.7;
}
.usecase-card:hover { box-shadow: 0 10px 26px rgba(30, 63, 168, 0.1); }
.usecase-img { height: 150px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; position: relative; z-index: 1; }
.usecase-img img { max-height: 150px; width: auto; }
.usecase-title { color: #1B2A4E; font-size: 20px; font-weight: 800; margin: 0 0 14px; position: relative; z-index: 1; padding-bottom: 12px; }
.usecase-title::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 26px; height: 3px; border-radius: 2px; background: #2E5BE0; }
/* 2行固定：、で改行後の最長行19文字が4カラム時のカード内幅に収まるサイズ */
.usecase-desc { color: #5b6b8a; font-size: 12px; line-height: 1.7; margin: 0; position: relative; z-index: 1; }

/* ==========================================================================
   ABOUT  (そんなあなたに)
   ========================================================================== */
.about { background: #F4F6FB; padding: 70px 0 84px; text-align: center; position: relative; }
/* white V-notch cut from the section above (usecase = #fff) */
.about::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 42px solid transparent;
    border-right: 42px solid transparent;
    border-top: 30px solid #fff;
}
.about-lead {
    display: inline-flex; align-items: center; gap: 16px;
    color: #1B2A4E; font-size: 16px; font-weight: 700; margin: 0 0 18px;
}
.about-lead::before, .about-lead::after {
    content: ''; width: 2px; height: 26px; background: #2E5BE0; display: inline-block;
}
.about-lead::before { transform: rotate(-20deg); }
.about-lead::after { transform: rotate(20deg); }
.about-brand { display: inline-flex; align-items: center; }
.about-brand img { height: 28px; width: auto; display: block; }
.about-title { color: #1B2A4E; font-size: 32px; font-weight: 800; line-height: 1.45; margin: 0 0 24px; }
.about-title .b1 { color: #2E5BE0; }
.about-chips { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 40px; }
.chip-break { display: none; }
.br-sp { display: none; }
.period-sp { display: none; }
.about-chip {
    background: #fff; color: #1B2A4E; font-size: 15px; font-weight: 700;
    padding: 10px 22px; border-radius: 8px; box-shadow: 0 2px 8px rgba(30, 63, 168, 0.06);
}
.about-diagram { display: flex; align-items: stretch; justify-content: center; gap: 0; }
.about-box {
    flex: 1; background: #fff; border: 2px solid #223a6b; border-radius: 16px;
    padding: 26px 22px 22px; display: flex; flex-direction: column;
}
.about-box.hl { background: #EAF1FF; border-color: #2E5BE0; }
.about-box-h { font-size: 20px; font-weight: 800; color: #001E80; margin: 0 0 18px; line-height: 1.4; }
/* 括弧書きは途中で折り返させない（狭いSPカラム対策） */
.about-box-h small { font-size: 13px; font-weight: 700; display: inline-block; white-space: nowrap; }
.about-box.hl .about-box-h { color: #0E5DD3; }
.about-box.hl .about-box-h .r { color: #E9336A; }
.about-vis { flex: 1; display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; }
.about-vis img { width: auto; max-width: 100%; max-height: 160px; height: auto; object-fit: contain; }
.about-note { font-size: 13.5px; color: #1C3454; margin: 0; text-align: center; }
.about-op { display: flex; align-items: center; justify-content: center; padding: 0 14px; color: #2E5BE0; font-size: 30px; font-weight: 800; }
.about-footer-line { margin: 34px 0 0; font-size: 20px; font-weight: 800; color: #1B2A4E; }
.about-footer-line .hl { color: #2E5BE0; }

/* small illustration sub-box (今お使いのSIM / データ通信専用) */
.about-subbox {
    background: #EAF1FF; border-radius: 12px; padding: 12px 14px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.about-subbox .t { font-size: 14px; font-weight: 800; color: #1B2A4E; line-height: 1.3; }
.about-subbox .s { font-size: 10.5px; font-weight: 700; color: #1B2A4E; line-height: 1.4; }
.about-phone { width: 66px; height: auto; }
.about-esim { width: 74px; height: auto; }
.about-arrow-s { color: #2E5BE0; font-size: 20px; font-weight: 800; }
.about-ninja { height: 116px; width: auto; }

/* ==========================================================================
   WHY (選ばれる3つの理由)
   ========================================================================== */
.reason { background: #fff; padding: 74px 0 84px; }
.reason-cards { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; }
.reason-card {
    position: relative; flex: 1 1 0; min-width: 280px; max-width: 360px;
    background: #F4F6FB; border-radius: 18px; padding: 34px 30px 30px; text-align: center;
}
.reason-num {
    position: absolute; top: 22px; left: 26px;
    font-size: 46px; font-weight: 700; font-style: italic;
    color: #0E5DD3; line-height: 1;
}
.reason-img { height: 150px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.reason-img img { max-height: 140px; width: auto; }
.reason-title { color: #1C3454; font-size: 21px; font-weight: 800; margin: 0 0 16px; position: relative; padding-bottom: 14px; }
.reason-title::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 34px; height: 3px; border-radius: 2px; background: #2E5BE0; }
.reason-desc { color: #5b6b8a; font-size: 14.5px; line-height: 1.7; margin: 0; }

/* ==========================================================================
   PLANS
   ========================================================================== */
.plans {
    position: relative; overflow: hidden;
    background: #2E5BE0; padding: 74px 0 84px; text-align: center;
}
.plans::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: url(../lp_pages/gigacampaign/background_ninja.png) center center / cover no-repeat;
    mix-blend-mode: multiply;
    opacity: 0.4;
}
.plans .wrap { position: relative; z-index: 2; }
.plans .sec-label { color: #FFD633; }
.plans .sec-title { color: #fff; margin-bottom: 14px; }
.plans-lead { color: #dbe6ff; font-size: 15px; font-weight: 500; line-height: 1.8; margin: 0 0 42px; }
.plan-cards { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; }
.plan-card {
    position: relative; flex: 1 1 0; min-width: 280px; max-width: 340px;
    background: #fff; border-radius: 16px; padding: 40px 24px 30px; margin-top: 16px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}
.plan-badge {
    position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
    background: #FA306D; color: #fff; font-size: 14px; font-weight: 700;
    padding: 8px 22px; border-radius: 8px; white-space: nowrap;
}
.plan-line { display: flex; align-items: baseline; justify-content: center; gap: 2px; color: #1B2A4E; }
.plan-line .p-gb-num { font-size: 40px; font-weight: 800; }
.plan-line .p-gb-u { font-size: 20px; font-weight: 800; margin-right: 10px; }
.plan-line .p-price { font-size: 40px; font-weight: 800; color: #E9336A; }
.plan-line .p-yen { font-size: 20px; font-weight: 800; color: #E9336A; }
.plans-note { display: block; color: #dbe6ff; font-size: 12px; margin: 26px 0 26px; }

/* ==========================================================================
   FLOW  (circles connected by line)
   ========================================================================== */
.flow { background: #F4F6FB; padding: 74px 0 84px; }
.flow-steps { display: flex; justify-content: center; max-width: 980px; margin: 0 auto; }
.flow-step { flex: 1; text-align: center; position: relative; }
.flow-step::after {
    content: ''; position: absolute; top: 73px; left: 50%; width: 100%; height: 4px;
    background: #fff; z-index: 0;
}
.flow-step:last-child::after { display: none; }
.flow-circle {
    position: relative; z-index: 1;
    width: 150px; height: 150px; border-radius: 50%; background: #fff;
    margin: 0 auto 20px; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(30, 63, 168, 0.08);
}
.flow-circle img { max-width: 84px; max-height: 76px; width: auto; }
.flow-num { color: #2E5BE0; font-size: 14px; font-weight: 800; letter-spacing: 1px; margin: 0 0 6px; }
.flow-name { color: #1B2A4E; font-size: 19px; font-weight: 800; margin: 0; }

/* ==========================================================================
   FAQ  (2-column: left heading, right accordion)
   ========================================================================== */
.faq { background: #fff; padding: 74px 0 84px; }
.faq .wrap { display: flex; align-items: flex-start; gap: 70px; }
.faq-head { flex: 0 0 220px; padding-top: 6px; }
.faq-head .sec-label { text-align: left; margin-bottom: 8px; }
.faq-head .sec-title { text-align: left; margin: 0; font-size: 30px; }
.faq-list { flex: 1; }
.faq-item { border-bottom: 1px solid #E5E9F2; }
.faq-item:first-child { border-top: 1px solid #E5E9F2; }
.faq-q {
    display: flex; align-items: center; gap: 16px;
    padding: 22px 4px; cursor: pointer; list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-badge {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 800; color: #fff;
}
.faq-badge.q { background: #2E5BE0; }
.faq-badge.a { background: #1B2A4E; }
.faq-qtext { flex: 1; color: #1B2A4E; font-size: 16px; font-weight: 700; line-height: 1.5; }
.faq-chev {
    flex-shrink: 0; width: 14px; height: 14px; border-right: 2px solid #2E5BE0; border-bottom: 2px solid #2E5BE0;
    transform: rotate(45deg); transition: transform 0.25s ease; margin-right: 6px; margin-bottom: 4px;
}
.faq-item[open] .faq-chev { transform: rotate(-135deg); margin-bottom: -4px; }
.faq-a { display: flex; gap: 16px; padding: 0 4px 24px; }
.faq-atext { flex: 1; color: #5b6b8a; font-size: 15px; line-height: 1.8; margin: 3px 0 0; }

/* ==========================================================================
   CONNECT  (rounded blue card + ninja)
   ========================================================================== */
.connect { background: #fff; padding: 40px 0 64px; }
.connect .wrap { position: relative; max-width: 1040px; }
.connect-card {
    position: relative; overflow: hidden;
    background: linear-gradient(120deg, #2E5BE0 0%, #2951D0 100%);
    border-radius: 24px; padding: clamp(16px, 1.8vw, 22px) clamp(28px, 5vw, 60px);
    min-height: clamp(150px, 15vw, 190px);
    display: flex; flex-direction: column; justify-content: center;
}
.connect-card::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: url(../lp_pages/gigacampaign/background_wave.png) right bottom / cover no-repeat;
    opacity: 0.5;
}
.connect-body { position: relative; z-index: 2; max-width: 620px; }
.connect-title { color: #fff; font-size: clamp(24px, 3.8vw, 40px); font-weight: 800; margin: 0 0 10px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.connect-text { color: #eaf1ff; font-size: clamp(14px, 1.55vw, 16px); font-weight: 500; line-height: 1.7; margin: 0 0 14px; }
.connect-price { display: flex; align-items: baseline; color: #FFD633; font-weight: 800; line-height: 1; margin: 0 0 16px; }
.connect-price .u-gb { font-size: clamp(24px, 3.85vw, 40px); color: #fff; }
.connect-price .u-num { font-size: clamp(46px, 6.9vw, 72px); margin-left: clamp(8px, 1vw, 14px); letter-spacing: -1px; }
.connect-price .u-yen { font-size: clamp(20px, 3.46vw, 36px); }
.connect-price .u-tax { font-size: clamp(13px, 1.44vw, 15px); font-weight: 700; color: #fff; margin-left: 6px; align-self: flex-end; padding-bottom: 8px; }
.connect-ninja { position: absolute; right: clamp(20px, 8.6vw, 90px); bottom: 0; z-index: 1; height: clamp(200px, 32vw, 340px); width: auto; }
.gotop {
    position: fixed; right: 30px; bottom: 30px; z-index: 900;
    width: 72px; height: 72px; border-radius: 50%; background: #3a4a63;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff; text-decoration: none; font-size: 12px; font-weight: 700; gap: 2px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}
.gotop::before { content: '↑'; font-size: 22px; line-height: 1; }
.gotop:hover { background: #2E5BE0; }

/* ==========================================================================
   CONTACT (navy band)
   ========================================================================== */
.contact { background: #001E80; padding: 44px 0 52px; text-align: center; }
.contact-label { color: #fff; font-size: 16px; font-weight: 700; margin: 0 0 16px; }
.contact-tel {
    display: inline-flex; align-items: center; justify-content: center; gap: 30px;
    background: #fff; color: #000C8D; text-decoration: none;
    min-width: 460px; padding: 16px 30px; border-radius: 50px;
    font-size: 30px; font-weight: 800;
}
.contact-tel::before {
    content: ''; width: 24px; height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000C8D'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.4 21 3 13.6 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .8-.2 1z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.contact-tel::after { content: '›'; font-size: 26px; font-weight: 400; color: #000C8D; }
.contact-hours { color: #fff; font-size: 14px; margin: 14px 0 0; }

/* ==========================================================================
   FOOTER (white)
   ========================================================================== */
.gc-footer { background: #fff; padding: 34px 0 40px; border-top: 1px solid #eef0f5; }
.gc-footer-main {
    display: flex; align-items: center; flex-wrap: wrap; gap: 24px 30px;
    justify-content: center; padding-bottom: 26px;
}
.gc-footer-logo img { width: 150px; height: auto; }
.gc-footer-company { font-size: 11px; color: #55617a; line-height: 1.8; }
.gc-footer-company strong { font-size: inherit; color: inherit; font-weight: 400; }
/* 認証マーク群と適用規格テキストを1グループ化（PCの見た目は従来どおり） */
.gc-footer-cert { display: flex; align-items: center; gap: 30px; }
.gc-footer-marks { display: flex; align-items: center; gap: 14px; }
.gc-footer-marks img { height: 58px; width: auto; }
.gc-footer-spec { font-size: 10px; color: #55617a; line-height: 1.7; }
.gc-footer-credit-wrap { text-align: center; }
.gc-footer-credit-label { font-size: 11px; color: #55617a; margin: 0 0 6px; }
.gc-footer-credit { display: flex; align-items: center; gap: 6px; justify-content: center; }
.gc-footer-credit img { height: 36px; width: auto; }
.gc-footer-menu {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0;
    list-style: none; margin: 22px 0 16px; padding: 22px 0 0; border-top: 1px solid #eef0f5;
}
.gc-footer-menu li { padding: 0 18px; border-right: 1px solid #d7dbe6; line-height: 1; }
.gc-footer-menu li:last-child { border-right: none; }
.gc-footer-menu a { color: #55617a; font-size: 13px; text-decoration: none; }
.gc-footer-menu a:hover { color: #2E5BE0; }
.gc-footer-sns {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 8px 16px; margin: 0 0 20px;
}
.gc-footer-sns-label { font-size: 11px; color: #55617a; margin: 0; }
.gc-footer-sns-icons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.gc-footer-sns-icons a { display: inline-flex; flex-shrink: 0; transition: transform 0.2s ease; }
.gc-footer-sns-icons a:hover { transform: translateY(-2px); }
.gc-footer-sns-icons img { width: 30px; height: 30px; display: block; }
.gc-footer-sns-line img { width: auto; height: 30px; }
.gc-footer-copy { text-align: center; color: #9aa3b7; font-size: 12px; margin: 0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media screen and (max-width: 900px) and (min-width: 768px) {
    .topMenu-nav { gap: 16px; }
    .topMenu-nav a { font-size: 12px; }
}

@media screen and (max-width: 767px) {
    .sp { display: block; }
    .pc { display: none !important; }
    .wrap { max-width: 100%; padding: 0 20px; }

    .sec-label { font-size: 15px; letter-spacing: 3px; }
    .sec-title { font-size: 25px; margin-bottom: 32px; }
    .about-brand img { height: 24px; }
    .br-pc { display: none; }
    /* 改行位置と重なる読点は非表示（改行が読点の役割を果たすため） */
    .comma-pc { display: none; }

    /* header */
    .info-bar { font-size: 12px; padding: 0 10px; height: 35px; line-height: 35px; }
    .topMenu { top: 35px; height: 56px; padding: 0 16px; }
    .topMenu-logo img { height: 28px; }
    .topMenu-nav { display: none; }
    .topMenu-right { gap: 0; }
    .topMenu-btn { padding: 9px 22px; font-size: 12px; }

    /* hero */
    .hero {
        margin-top: 91px; aspect-ratio: auto; height: auto;
        /* 画像は原寸のまま下端に固定し、ヒーローを48px高くして絵柄を下へ逃がす
           （価格テキストとイラストの重なり回避）。空いた上部は画像1行目と
           同じ横グラデーションで埋め、継ぎ目が出ないようにする */
        min-height: calc(100vw * 558 / 390 + 48px);
        padding: 28px 0 0;
        background:
            url(../lp_pages/gigacampaign/background_hero_sp.png) center bottom / 100% auto no-repeat,
            linear-gradient(to right, #082E9A 0%, #0934A7 25%, #0B39B3 50%, #0B3FBB 75%, #093FBF 100%);
        background-color: #1051D9;
        align-items: flex-start;
    }
    .hero .wrap { text-align: center; width: 100%; max-width: 100%; padding: 0 22px; }
    .hero-copy { width: 100%; max-width: 100%; margin-left: 0; }
    .hero-h1 { font-size: 30px; }
    .hero-h1::before { display: none; }
    .hero-h1::after { display: none; }
    .hero-lead { font-size: 23px; margin-top: 12px; }
    .hero-text { font-size: 16px; margin-top: 6px; }
    /* SPは中央寄せのヒーローに合わせ、同じ幅のまま中央に積む。
       3つの間隔を揃えるため .hero-chips-2 の上マージンも gap と同値にする */
    .hero-chips { align-items: center; gap: 10px; margin-top: 16px; }
    .hero-chips.hero-chips-2 { margin-top: 10px; }
    .hero-chip { font-size: 13px; padding: 8px 14px; min-width: 0; width: 100%; max-width: 220px; }
    .hero-price { justify-content: center; margin-top: 16px; }
    .hero-price .u-gb { font-size: 40px; }
    .hero-price .u-num { font-size: 72px; }
    .hero-price .u-yen { font-size: 36px; }
    .hero .btn-cta { display: none; }
    .hero-device.sp { display: none; }
    .btn-cta { min-width: 280px; font-size: 17px; }

    /* campaign */
    .hero-sns { padding: 13px 0; }
    .hero-sns .wrap { gap: 12px 16px; }
    /* SP: ラベルは1行（1列）で表示し、アイコン列は別行に */
    .hero-sns-label { flex: 0 0 100%; font-size: 13px; text-align: center; }
    .hero-sns-label-sub::before { content: '\3000'; }
    /* SPはアイコンとFOLLOW USを1グループとして縦に積む（従来どおり） */
    .hero-sns-group { display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .hero-sns-follow { flex: 0 0 auto; font-size: 12px; letter-spacing: 2px; gap: 11px; }
    .hero-sns-follow::before, .hero-sns-follow::after { height: 15px; }
    .hero-sns-icons { gap: 10px; }
    .hero-sns-icons img { width: 38px; height: 38px; }
    /* SP: LINE友だち は横長のままアイコン列に並べる */
    .hero-sns-line img { width: auto; height: 38px; }

    .campaign { padding: 44px 0 28px; }
    .campaign-banner { flex: 0 0 100%; max-width: 100%; }

    /* usecase */
    .usecase { padding: 32px 0 50px; }
    .usecase-cards { gap: 16px; }
    .usecase-card { flex: 0 0 100%; min-width: auto; max-width: none; padding: 28px 20px 24px; }
    .usecase-card::before { width: 30%; }
    .usecase-img { height: 130px; }
    .usecase-img img { max-height: 130px; }
    .usecase-title { font-size: 20px; }
    /* 2行固定：、で改行後の最長行19文字がカード幅に必ず収まるよう可変（上限16px） */
    .usecase-desc { font-size: clamp(12px, calc((100vw - 88px) / 19), 16px); }

    /* about */
    .about { padding: 44px 0 50px; }
    .about-title { font-size: 24px; }
    .about-chips { gap: 10px; margin-bottom: 26px; }
    /* smaller chips so two fit side by side on narrow screens */
    .about-chip { font-size: 12.5px; padding: 8px 14px; }
    /* force the 3 chips to break 2 + 1 (two on top, one below) */
    .chip-break { display: block; flex-basis: 100%; width: 100%; height: 0; }
    /* Box1 + Box2 share the first row; the "=" operator becomes a full-width
       down arrow, pushing the highlighted Box3 onto its own full-width row. */
    .about-diagram { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
    .about-box { flex: 1 1 0; min-width: 0; padding: 20px 14px 18px; }
    .about-box.hl { flex: 1 1 100%; }
    .about-box-h { font-size: 20px; margin-bottom: 14px; }
    /* 狭い2カラムでも指定位置以外で折り返さないよう余裕を持たせる */
    .about-note { font-size: 12.5px; }
    .about-op { transform: none; align-self: center; padding: 0 6px; font-size: 24px; }
    .about-diagram > .about-op:nth-child(4) { flex: 1 1 100%; font-size: 0; padding: 10px 0; }
    .about-diagram > .about-op:nth-child(4)::before {
        content: '↓'; font-size: 30px; color: #2E5BE0; font-weight: 800;
    }
    .about-footer-line { font-size: 17px; }

    /* reason */
    .reason { padding: 44px 0 50px; }
    .reason-card { flex: 0 0 100%; min-width: auto; max-width: none; }
    .reason-num { font-size: 40px; }

    /* plans */
    .plans { padding: 44px 0 50px; }
    /* 2行固定：最長行23文字が画面幅に必ず収まるようフォントを可変に（上限16px） */
    .plans-lead { font-size: clamp(11px, calc((100vw - 52px) / 23), 16px); }
    .plan-card { flex: 0 0 100%; min-width: auto; max-width: none; }

    /* flow */
    .flow { padding: 44px 0 50px; }
    .flow-steps { flex-wrap: wrap; gap: 30px 0; max-width: 360px; }
    .flow-step { flex: 0 0 50%; }
    .flow-step::after { display: none; }
    .flow-circle { width: 128px; height: 128px; }
    .flow-circle img { max-width: 72px; max-height: 66px; }
    .flow-name { font-size: 16px; }

    /* faq */
    .faq { padding: 44px 0 50px; }
    .faq .wrap { flex-direction: column; gap: 24px; align-items: stretch; }
    .br-sp { display: inline; }
    .period-sp { display: inline; }
    .faq-head { flex: none; }
    .faq-head .sec-label { text-align: center; }
    .faq-head .sec-title { text-align: center; font-size: 25px; }
    .faq-qtext { font-size: 14.5px; }

    /* connect */
    .connect { display: none; }
    .connect-card { padding: 36px 24px 200px; text-align: center; justify-content: flex-start; min-height: auto; }
    .connect-body { max-width: 100%; }
    .connect-title { font-size: 24px; }
    .connect-text { font-size: 14px; }
    .connect-price { justify-content: center; }
    .connect-price .u-num { font-size: 46px; }
    .connect .btn-cta { min-width: 260px; }
    .connect-ninja { height: 190px; right: 50%; transform: translateX(50%); }
    .gotop { display: none; }

    /* contact */
    .contact { padding: 34px 0 40px; }
    .contact-tel { min-width: 0; width: 100%; font-size: 22px; gap: 12px; padding: 14px 18px; }

    /* footer — 2-col grid: logo|company / marks|spec / credit(full width) */
    .gc-footer-main { display: grid; grid-template-columns: 44% 1fr; align-items: start; gap: 24px 16px; text-align: left; padding-bottom: 26px; }
    .gc-footer-logo { align-self: center; }
    .gc-footer-logo img { width: 100%; max-width: 130px; height: auto; }
    .gc-footer-company { min-width: 0; }
    /* 認証ブロックは全幅を使い、マーク3点を必ず1列に並べてテキストをその右へ */
    .gc-footer-cert { grid-column: 1 / -1; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
    .gc-footer-marks { flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 8px; }
    .gc-footer-marks img { height: 36px; width: auto; max-width: none; }
    .gc-footer-spec { flex: 1 1 130px; min-width: 0; }
    .gc-footer-credit-wrap { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; text-align: left; }
    .gc-footer-credit-label { flex: 0 0 auto; margin: 0; }
    .gc-footer-credit { flex: 1 1 0; min-width: 0; justify-content: flex-start; flex-wrap: wrap; gap: 10px 8px; }
    .gc-footer-credit img { height: 40px; }
    .gc-footer-menu li { padding: 0 12px; margin-bottom: 6px; }
    .gc-footer-sns { gap: 6px 12px; margin: 0 0 18px; }
    .gc-footer-sns-icons { gap: 10px; }
    .gc-footer-sns-icons img { width: 28px; height: 28px; }
    .gc-footer-sns-line img { width: auto; height: 28px; }
}