/* 「ARスタンプラリー ダイナソー」特設ページ専用スタイル
 *
 * 寸法はデザイン（site-image.pdf、幅1920）の数値に単位 --u を掛けて指定する。
 * --u は画面幅1920pxのとき1px、それより狭いと比例して小さくなる（スマホでは760px幅を基準にする）。
 * 画像に文字を重ねる部分（.arsd-scene）は、画像の幅を基準にした単位 --s を使う。
 * スマホでは、ヒーロー・アプリ紹介・機材不要・ノベルティの画像と文字を
 * スマホ用デザイン（arsd-smartphone-image-fix.pdf、幅980）に合わせて差し替える。
 */

.arsd-page {
    --blue-dark: #1e64aa;
    --blue: #4792df;
    --teal: #99ddd8;
    --cta: #00ffcc;
    --marker: #ffff00;
    --pink: #ff6699;
    --gray-heading: #606060;
    --gray: #595757;
    --gray-text: #4d4d4d;
    --black: #231815;
    --gradient: linear-gradient(to top right, var(--blue-dark) 45%, var(--blue));
    --u: min(calc(100cqw / 1920), 1px);
    --radius: calc(30 * var(--u));
    container-type: inline-size;
    overflow-x: hidden;
    color: var(--gray-text);
    font-family: "Noto Sans JP", sans-serif;
    /* デザインと同じく、約物（・！、など）を詰めて組む */
    font-feature-settings: "palt";
    line-height: 1.6;
}

/* 詳細度を下げ、各要素側の margin 指定がそのまま効くようにする */
:where(.arsd-page) :is(p, h1, h2, h3, h4, dl, dd, ol, figure) {
    margin: 0;
}

.arsd-page img {
    display: block;
    max-width: 100%;
}

.arsd-container {
    width: calc(1600 * var(--u));
    margin: 0 auto;
}

.arsd-section {
    padding: calc(100 * var(--u)) 0;
}

/* 一部セクションは本文幅を最大1200pxに抑え、文字や余白も同じ比率で縮める */
@media (min-width: 768px) {
    .arsd-container-narrow {
        --u: min(calc(100cqw / 1920), 0.75px);
        --radius: calc(30 * var(--u));
    }
}

.arsd-text-white {
    color: #ffffff !important;
}

.arsd-bg-gradient {
    background: var(--gradient);
}

/* 見出し */
.arsd-heading {
    color: var(--blue-dark);
    font-size: calc(72 * var(--u));
    font-weight: 900;
    line-height: 1.3;
}

.arsd-heading-gray {
    color: var(--gray-heading);
    font-size: calc(60 * var(--u));
}

.arsd-heading-sub {
    color: var(--blue);
    font-size: calc(46 * var(--u));
    font-weight: 300;
    line-height: 1.4;
}

/* CTA */
.arsd-cta {
    display: flex;
    justify-content: center;
    margin-top: calc(90 * var(--u));
}

.arsd-btn {
    display: block;
    width: calc(700 * var(--u));
    padding: calc(22 * var(--u)) 0;
    border-radius: 999px;
    background: var(--cta);
    color: var(--black);
    font-size: calc(42 * var(--u));
    line-height: calc(56 * var(--u));
    text-align: center;
    text-decoration: none;
    transition: opacity 0.2s;
}

.arsd-btn:hover {
    opacity: 0.8;
    color: var(--black);
    text-decoration: none;
}

/* 画像に文字を重ねるブロック（--sw は画像のデザイン上の幅） */
.arsd-scene {
    --sw: 1920;
    --s: calc(100cqw / var(--sw));
    position: relative;
    container-type: inline-size;
}

.arsd-scene > picture,
.arsd-band-image > picture {
    display: block;
}

.arsd-scene > picture > img {
    width: 100%;
}

/* ヒーロー */
.arsd-hero-copy {
    position: absolute;
    top: calc(54 * var(--s));
    left: calc(160 * var(--s));
    color: #ffffff;
    font-weight: 900;
    line-height: 1;
}

.arsd-hero-lead {
    font-size: calc(82 * var(--s));
    margin-bottom: calc(26 * var(--s)) !important;
}

.arsd-hero-title {
    font-size: calc(120 * var(--s));
    font-weight: 900;
    line-height: calc(135 / 120);
}

.arsd-hero-note {
    position: absolute;
    top: calc(1210 * var(--s));
    left: calc(170 * var(--s));
    color: #ffffff;
    font-size: max(10px, calc(22 * var(--s)));
    line-height: 1;
}

/* アプリ紹介 */
.arsd-app-copy {
    position: absolute;
    top: calc(114 * var(--s));
    left: calc(344 * var(--s));
    font-size: calc(72 * var(--s));
    font-weight: 900;
    line-height: 1;
}

.arsd-app-badge span {
    display: inline-block;
    padding: 0 calc(14 * var(--s)) calc(10 * var(--s));
    background: linear-gradient(transparent 61%, var(--marker) 61%);
    color: var(--blue-dark);
}

.arsd-app-text {
    margin: calc(38 * var(--s)) 0 0 calc(14 * var(--s)) !important;
    color: var(--gray);
    line-height: calc(85 / 72);
}

.arsd-app-name {
    margin: calc(17 * var(--s)) 0 0 calc(14 * var(--s));
    color: var(--blue-dark);
    font-size: inherit;
    font-weight: 900;
    line-height: calc(85 / 72);
}

.arsd-app-video {
    position: absolute;
    top: 14%;
    left: 59.53%;
    width: 14.84%;
    height: 73%;
    object-fit: cover;
    background: #000000;
}

/* 導入文・特長 */
.arsd-intro-sub {
    color: var(--gray);
    font-size: calc(60 * var(--u));
    font-weight: 900;
    line-height: 1.3;
}

.arsd-intro-title {
    color: var(--blue);
    font-size: calc(72 * var(--u));
    font-weight: 900;
    line-height: calc(100 / 72);
}

.arsd-features {
    display: grid;
    gap: calc(28 * var(--u));
    margin-top: calc(28 * var(--u));
}

.arsd-features-3 {
    grid-template-columns: repeat(3, 1fr);
    margin-top: calc(80 * var(--u));
}

.arsd-features-2 {
    grid-template-columns: repeat(2, 1fr);
}

.arsd-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(20 * var(--u)) calc(30 * var(--u)) calc(36 * var(--u));
    border-radius: var(--radius);
    background: var(--blue);
    color: #ffffff;
}

.arsd-feature-num {
    color: var(--teal);
    font-size: calc(120 * var(--u));
    font-weight: 100;
    line-height: 1;
}

.arsd-feature-title {
    display: flex;
    align-items: center;
    min-height: calc(165 * var(--u));
    margin: calc(6 * var(--u)) 0 calc(10 * var(--u));
    font-size: calc(43 * var(--u));
    font-weight: 900;
    line-height: calc(55 / 43);
}

.arsd-features-2 .arsd-feature-title {
    min-height: 0;
}

.arsd-feature-photo {
    width: 100%;
    aspect-ratio: 452 / 320;
    object-fit: cover;
}

.arsd-feature-body {
    margin-top: calc(18 * var(--u)) !important;
    font-size: max(13px, calc(26 * var(--u)));
    line-height: calc(42 / 26);
}

.arsd-feature-note {
    font-size: max(11px, calc(22 * var(--u)));
}

/* 特別な機材不要 */
.arsd-equipment-copy {
    position: absolute;
    top: calc(272 * var(--s));
    left: calc(1021 * var(--s));
    color: #ffffff;
    font-size: calc(72 * var(--s));
    font-weight: 900;
    line-height: calc(95 / 72);
}

/* イベントの流れ */
.arsd-steps {
    padding: calc(100 * var(--u)) 0;
}

.arsd-step-list {
    margin: calc(40 * var(--u)) 0 calc(100 * var(--u)) !important;
    padding: 0;
    list-style: none;
}

.arsd-step {
    display: flex;
}

.arsd-step > * {
    width: 50%;
}

.arsd-step-reverse {
    flex-direction: row-reverse;
}

.arsd-step-panel {
    --sw: 956;
    aspect-ratio: 956 / 594;
    background: url("images/wall.jpg") center / cover;
}

/* 壁の背景の上に重ねるスマホ等の画像。左端と上端は全パネル共通、幅（--dw）だけ画像ごとに指定 */
.arsd-step-panel > .arsd-step-device {
    position: absolute;
    top: calc(70 * var(--s));
    left: calc(560 * var(--s));
    width: calc(var(--dw) * var(--s));
}

.arsd-step-photo {
    object-fit: cover;
}

.arsd-step-text {
    position: absolute;
    /* 全パネル共通：中心 x=284（左余白44＋最長の説明480の半分）、STEPの上端 y=160 */
    top: calc(160 * var(--s));
    left: calc(284 * var(--s));
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}

.arsd-step-label {
    display: inline-block;
    padding: 0 calc(21 * var(--s));
    background: linear-gradient(transparent 47%, var(--marker) 47%, var(--marker) 98%, transparent 98%);
    color: var(--blue);
    font-size: calc(62 * var(--s));
    font-weight: 900;
    line-height: 1;
}

.arsd-step-body {
    margin-top: calc(4 * var(--s)) !important;
    color: var(--gray);
    font-size: calc(42 * var(--s));
    line-height: calc(60 / 42);
}

/* 準備物 */
.arsd-prep-heading {
    margin-bottom: calc(10 * var(--u)) !important;
}

.arsd-prep-body {
    color: #7d7d7d;
    font-size: calc(42 * var(--u));
    line-height: calc(60 / 42);
}

.arsd-prep-note {
    margin-top: calc(14 * var(--u)) !important;
    font-size: max(11px, calc(22 * var(--u)));
}

/* 画像だけの帯 */
.arsd-band-image > picture > img {
    width: 100%;
}

/* 導入事例 */
.arsd-case-title {
    margin-top: calc(10 * var(--u));
    color: var(--blue);
    font-size: calc(48 * var(--u));
    font-weight: 900;
    line-height: 1.4;
}

.arsd-case-body {
    display: grid;
    grid-template-columns: 1fr calc(854 * var(--u));
    gap: calc(60 * var(--u));
    margin-top: calc(40 * var(--u));
    padding-left: calc(12 * var(--u));
}

.arsd-case-text,
.arsd-case-stats {
    font-size: calc(37 * var(--u));
    line-height: calc(55 / 37);
}

.arsd-case-text {
    color: #575452;
}

.arsd-case-stats {
    margin-top: calc(18 * var(--u)) !important;
    color: var(--blue-dark);
    font-weight: 900;
}

.arsd-case-stats div {
    display: flex;
}

.arsd-case-stats dt {
    font-weight: inherit;
}

.arsd-case-stats dt::after {
    content: "：";
}

.arsd-case-photo {
    position: relative;
}

.arsd-case-photo img {
    width: 100%;
    border-radius: var(--radius);
}

.arsd-case-photo figcaption {
    position: absolute;
    right: calc(10 * var(--u));
    bottom: calc(14 * var(--u));
    color: #ffffff;
    font-size: max(10px, calc(22 * var(--u)));
}

/* 導入シーン */
.arsd-usecases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(29 * var(--u));
    margin-top: calc(40 * var(--u));
}

.arsd-usecase {
    padding: calc(40 * var(--u)) calc(27 * var(--u));
    border-radius: var(--radius);
    background: #ffffff;
}

.arsd-usecase-title {
    color: #575452;
    font-size: calc(43 * var(--u));
    line-height: calc(55 / 43);
}

.arsd-usecase img {
    width: 100%;
    margin-top: calc(50 * var(--u));
    aspect-ratio: 460 / 350;
    object-fit: cover;
    border-radius: calc(20 * var(--u));
}

.arsd-usecase-caption {
    margin-top: calc(20 * var(--u)) !important;
    color: var(--gray-text);
    font-size: max(12px, calc(26 * var(--u)));
    font-weight: 700;
    line-height: calc(42 / 26);
}

/* お悩み */
.arsd-worries-heading {
    margin-top: calc(110 * var(--u)) !important;
}

.arsd-worries {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(40 * var(--u));
    margin-top: calc(30 * var(--u));
}

.arsd-bubble {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(360 * var(--u));
    aspect-ratio: 1;
    margin: 0 auto !important;
    border-radius: 50%;
    background: #ffffff;
    color: #575452;
    font-size: calc(37 * var(--u));
    line-height: calc(55 / 37);
}

.arsd-bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(-36 * var(--u));
    transform: translateX(-50%);
    border-style: solid;
    border-width: calc(40 * var(--u)) calc(13 * var(--u)) 0;
    border-color: #ffffff transparent transparent;
}

.arsd-avatar {
    width: calc(143 * var(--u));
    margin: calc(56 * var(--u)) auto 0;
}

/* 料金プラン */
.arsd-price-table {
    width: 100%;
    margin-top: calc(50 * var(--u));
    border-collapse: separate;
    border-spacing: calc(4 * var(--u));
    color: var(--gray-heading);
    font-size: max(12px, calc(32 * var(--u)));
    line-height: calc(44 / 32);
}

.arsd-price-table th,
.arsd-price-table td {
    padding: calc(26 * var(--u)) calc(10 * var(--u));
    text-align: center;
    vertical-align: middle;
    font-weight: 400;
}

.arsd-price-table thead th {
    padding: calc(30 * var(--u)) calc(10 * var(--u));
    color: #ffffff;
    font-size: calc(48 * var(--u));
    font-weight: 900;
    line-height: 1.3;
}

.arsd-price-table thead th span {
    display: block;
    font-size: calc(32 * var(--u));
    font-weight: 700;
}

.arsd-th-blank {
    width: calc(300 * var(--u));
    background: transparent;
}

.arsd-th-standard {
    background: #99ddd8;
}

.arsd-th-complete {
    background: #f19ca2;
}

.arsd-price-table tbody th {
    background: #efefef;
    color: var(--gray-text);
    white-space: nowrap;
}

.arsd-price-table tbody td:nth-child(2) {
    background: #e6f7f5;
}

.arsd-price-table tbody td:nth-child(3) {
    background: #fbe7e9;
}

/* スマホでは2プランを並べず、タブで切り替えて1プランずつ表示する（JSを使わず、ラジオボタンの :checked で切り替える） */
.arsd-price-tab-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .arsd-price-tab-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        margin-top: calc(50 * var(--u));
    }

    .arsd-price-tab {
        margin: 0;
        padding: 10px 6px;
        border-radius: 12px 12px 0 0;
        color: var(--gray-text);
        font-size: 15px;
        font-weight: 900;
        line-height: 1.3;
        cursor: pointer;
    }

    .arsd-price-tab span {
        display: block;
        margin-bottom: 2px;
        font-size: 11px;
        font-weight: 700;
    }

    .arsd-price-tab-standard {
        background: #e6f7f5;
    }

    .arsd-price-tab-complete {
        background: #fbe7e9;
    }

    #arsd-price-plan-standard:checked ~ .arsd-price-tab-list .arsd-price-tab-standard {
        background: #99ddd8;
        color: #ffffff;
    }

    #arsd-price-plan-complete:checked ~ .arsd-price-tab-list .arsd-price-tab-complete {
        background: #f19ca2;
        color: #ffffff;
    }

    #arsd-price-plan-standard:focus-visible ~ .arsd-price-tab-list .arsd-price-tab-standard,
    #arsd-price-plan-complete:focus-visible ~ .arsd-price-tab-list .arsd-price-tab-complete {
        outline: 2px solid var(--blue-dark);
        outline-offset: 2px;
    }

    /* 表の上辺を選択中のタブと同じ色にして、タブと表をつなげる */
    .arsd-price-table {
        min-width: 0;
        margin-top: 0;
        border-top: 4px solid #99ddd8;
    }

    #arsd-price-plan-complete:checked ~ .table-responsive .arsd-price-table {
        border-top-color: #f19ca2;
    }

    .arsd-price-table thead {
        display: none;
    }

    #arsd-price-plan-standard:checked ~ .table-responsive .arsd-price-table :is(th, td):nth-child(3),
    #arsd-price-plan-complete:checked ~ .table-responsive .arsd-price-table :is(th, td):nth-child(2) {
        display: none;
    }
}

/* カスタマイズ */
.arsd-custom-heading {
    margin-top: calc(140 * var(--u)) !important;
}

.arsd-customs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(44 * var(--u));
    margin-top: calc(40 * var(--u));
}

.arsd-custom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(260 * var(--u));
    padding: calc(30 * var(--u));
    border-radius: var(--radius);
    background: var(--blue);
    color: #ffffff;
}

.arsd-custom-title {
    font-size: calc(43 * var(--u));
    line-height: 1.4;
}

.arsd-custom-sub {
    margin-top: calc(10 * var(--u)) !important;
    font-size: max(12px, calc(26 * var(--u)));
    font-weight: 700;
}

.arsd-custom-note {
    margin-top: calc(24 * var(--u)) !important;
    font-size: max(11px, calc(26 * var(--u)));
}

/* ノベルティ */
.arsd-novelty-copy {
    position: absolute;
    top: calc(160 * var(--s));
    left: calc(183 * var(--s));
    color: #ffffff;
    font-size: calc(72 * var(--s));
    font-weight: 300;
    line-height: calc(95 / 72);
}

.arsd-novelty-copy strong {
    font-weight: 900;
}

/* よくあるご質問 */
.arsd-faq-list {
    width: calc(1310 * var(--u));
    margin: calc(30 * var(--u)) auto 0 !important;
}

.arsd-faq-list dt {
    color: var(--pink);
    font-size: calc(32 * var(--u));
    font-weight: 400;
    line-height: 1.6;
}

.arsd-faq-list dd {
    margin: calc(4 * var(--u)) 0 calc(60 * var(--u));
    padding-left: 1.2em;
    text-indent: -1.2em;
    font-size: max(13px, calc(26 * var(--u)));
    line-height: 1.6;
}

/* スマホ（デザインが届くまでの暫定。760px幅を基準に縮小し、横並びを縦に積む） */
@media (max-width: 767.98px) {
    .arsd-page {
        --u: calc(100cqw / 760);
        --radius: 14px;
    }

    .arsd-container {
        width: calc(100% - 32px);
    }

    .arsd-section,
    .arsd-steps {
        padding: 48px 0;
    }

    .arsd-intro-title br,
    .arsd-worries-heading br {
        display: none;
    }

    /* 画像に文字を重ねるブロック（スマホ用デザインの値。--s は幅980を基準にする） */
    .arsd-hero,
    .arsd-app,
    .arsd-equipment,
    .arsd-novelty {
        --sw: 980;
    }

    /* スマホ用デザインは文字間が少し広い */
    .arsd-app-copy,
    .arsd-equipment-copy,
    .arsd-novelty-copy {
        letter-spacing: 0.04em;
    }

    .arsd-hero-copy {
        top: calc(14 * var(--s));
        left: calc(36 * var(--s));
    }

    .arsd-hero-lead {
        margin: 0 0 calc(689 * var(--s)) calc(5 * var(--s)) !important;
        font-size: calc(102 * var(--s));
        line-height: calc(120 * var(--s));
        letter-spacing: 0.06em;
    }

    .arsd-hero-title {
        line-height: calc(136 * var(--s));
        letter-spacing: 0.03em;
    }

    .arsd-hero-de {
        font-size: calc(100 * var(--s));
        line-height: 0;
    }

    .arsd-hero-title-large {
        display: block;
        margin-top: calc(7 * var(--s));
        font-size: calc(155.3 * var(--s));
        line-height: calc(174 * var(--s));
        letter-spacing: -0.01em;
    }

    .arsd-hero-ar {
        font-size: calc(181.2 * var(--s));
        line-height: 0;
        vertical-align: calc(-10 * var(--s));
    }

    .arsd-hero-note {
        top: calc(1592 * var(--s));
        left: calc(39 * var(--s));
    }

    .arsd-app-copy {
        top: calc(63 * var(--s));
        left: 0;
        right: 0;
        text-align: center;
    }

    .arsd-app-text {
        margin: calc(22 * var(--s)) 0 0 !important;
        line-height: calc(88 / 72);
    }

    .arsd-app-name {
        margin: calc(14 * var(--s)) 0 0;
        line-height: calc(88 / 72);
    }

    .arsd-app-video {
        top: 38.59%;
        left: 23.14%;
        width: 52.99%;
        height: 51.26%;
    }

    .arsd-equipment-copy,
    .arsd-novelty-copy {
        left: 0;
        right: 0;
        text-align: center;
    }

    .arsd-equipment-copy {
        top: calc(52 * var(--s));
        line-height: calc(92 / 72);
    }

    .arsd-novelty-copy {
        top: calc(54 * var(--s));
    }

    .arsd-intro-sub {
        font-size: 24px;
    }

    .arsd-intro-title,
    .arsd-heading:not(.arsd-heading-gray) {
        font-size: 30px;
    }

    .arsd-feature-body,
    .arsd-prep-body,
    .arsd-case-text,
    .arsd-bubble,
    .arsd-custom-sub,
    .arsd-faq-list dt,
    .arsd-faq-list dd {
        font-size: 16px;
    }

    .arsd-features-3,
    .arsd-features-2,
    .arsd-usecases,
    .arsd-customs {
        grid-template-columns: 1fr;
    }

    .arsd-feature-title {
        min-height: 0;
    }

    .arsd-btn {
        width: calc(100% - 32px);
    }

    .arsd-step,
    .arsd-step-reverse {
        flex-direction: column;
    }

    .arsd-step > * {
        width: 100%;
    }

    .arsd-step-photo {
        aspect-ratio: 956 / 594;
    }

    .arsd-case-body {
        grid-template-columns: 1fr;
        padding-left: 0;
    }

    .arsd-worries {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 32px;
    }

    .arsd-bubble {
        width: 100%;
    }

    .arsd-faq-list {
        width: auto;
    }
}