/* Imported from seo/drafts/ourtime/ai-movie-how-to @ d7d48f3 by scripts/import-draft-post.mjs. Re-import instead of editing. */ .ot { --ink: #0B0817; --ink-2: #120D24; --ink-3: #140F2A; --ink-4: #1A1433; --paper: #F4F2FA; --violet: #7B5CFF; --violet-ui: #6A4CF5; --violet-deep: #5B3EE6; --violet-soft: #9C86FF; --violet-tint: #ECE7FF; --lilac: #C9C0F2; --pink: #FF4F9A; --pink-soft: #FF8FC0; --pink-pale: #FFB3D4; --magenta: #C2368A; --plum: #3B2F7A; --indigo: #3B1F9E; --f-display: "Archivo", "Zen Kaku Gothic New", system-ui, sans-serif; --f-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ease: cubic-bezier(.2, .7, .2, 1); --hdr: 68px; --sheet: clamp(24px, 4vw, 48px); --gut: 24px; --r: 24px; --r-l: 32px; font-family: var(--f-body); font-weight: 500; font-size: 16px; line-height: 1.85; letter-spacing: .02em; overflow-x: clip; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .ot *, .ot *::before, .ot *::after { box-sizing: border-box; } .ot :is(h1, h2, h3, p, ul, ol, li, dl, dt, dd, figure, blockquote, pre) { margin: 0; padding: 0; } .ot :is(h1, h2, h3, p, li, dd, td, th) { word-break: auto-phrase; } .ot :is(h1, h2, h3) { text-wrap: balance; } .ot p { text-wrap: pretty; } .ot img { max-width: 100%; height: auto; display: block; } .ot a { color: inherit; text-underline-offset: 3px; } .ot :focus-visible { outline: 3px solid var(--pink-pale); outline-offset: 3px; } .ot .ot-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ot .ot-skip { position: fixed; left: 12px; top: 12px; z-index: 300; padding: 12px 18px; border-radius: 999px; background: #fff; color: #15102A; font-weight: 700; text-decoration: none; transform: translateY(-160%); } .ot .ot-skip:focus { transform: none; } .ot .ot-wrap { max-width: 1280px; margin-inline: auto; padding-inline: var(--gut); } .ot .ot-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-family: var(--f-mono); font-size: 12px; font-weight: 700; line-height: 1.6; letter-spacing: .22em; text-transform: uppercase; color: var(--pink); } .ot .ot-eyebrow span { font-family: var(--f-body); letter-spacing: .1em; text-transform: none; color: #A9A1CC; } /* sample bar (preview only) */ .ot .ar-sample { background: var(--pink); color: #15102A; font-size: 13px; font-weight: 700; line-height: 1.6; text-align: center; padding: 6px 16px; } /* buttons (same as the top page) */ .ot .ot-btn { --h: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--h); padding: 0 28px; border: 0; border-radius: 999px; font: 900 15px/1.2 var(--f-body); letter-spacing: .04em; text-decoration: none; white-space: nowrap; transition: transform .3s var(--ease), background-color .3s, box-shadow .3s; } .ot .ot-btn:hover { transform: translateY(-2px); } .ot .ot-btn--violet { background: var(--violet-ui); color: #fff; box-shadow: 0 14px 34px -14px rgba(123, 92, 255, .95); } .ot .ot-btn--white { background: #fff; color: #15102A; } .ot .ot-btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); } .ot .ot-btn--sm { --h: 44px; padding: 0 18px; font-size: 13px; } .ot .ot-btn--lg { --h: 60px; padding: 0 30px; font-size: 16px; } /* header (same as the top page, without the mobile menu) */ .ot .ot-hdr { position: sticky; top: 0; z-index: 50; background: rgba(11, 8, 23, .96); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid rgba(201, 192, 242, .12); } .ot .ot-hdr__in { height: var(--hdr); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .ot .ot-hdr__logo { display: flex; align-items: center; min-height: 44px; flex: none; } .ot .ot-hdr__logo img { height: 32px; width: auto; margin-left: calc(32px * -24 / 148); } .ot .ot-hdr__nav { display: flex; gap: 22px; font-size: 14px; font-weight: 700; } .ot .ot-hdr__nav a { position: relative; min-width: 44px; padding: 12px 4px; text-align: center; text-decoration: none; color: var(--lilac); } .ot .ot-hdr__nav a[aria-current] { color: #fff; } .ot .ot-hdr__nav a[aria-current]::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--pink); } @media (max-width: 899px) { .ot .ot-hdr__nav { display: none; } } @media (max-width: 360px) { .ot .ot-hdr__logo img { height: 26px; } .ot .ot-hdr .ot-btn--sm { padding: 0 12px; font-size: 12px; } } /* hero */ .ot .ar-hero { position: relative; padding: clamp(40px, 7vw, 88px) 0 calc(var(--sheet) + clamp(40px, 6vw, 72px)); background: radial-gradient(ellipse 60% 70% at 90% 0%, rgba(123, 92, 255, .38), transparent 70%), radial-gradient(ellipse 50% 60% at 0% 100%, rgba(255, 79, 154, .22), transparent 70%), var(--ink); overflow: hidden; overflow: clip; } .ot .ar-hero__in { max-width: 880px; margin-inline: auto; padding-inline: var(--gut); } .ot .ar-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; list-style: none; font-size: 13px; color: #A9A1CC; } .ot .ar-crumb li { display: flex; align-items: center; min-height: 44px; } .ot .ar-crumb li + li::before { content: "›"; margin-right: 10px; color: #8A84A3; } .ot .ar-crumb a { color: var(--lilac); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } .ot .ar-media { margin-top: 20px; } .ot .ar-hero h1 { margin-top: 18px; font-size: clamp(28px, 5vw, 52px); line-height: 1.35; font-weight: 900; letter-spacing: .01em; } .ot .ar-hero h1 .ar-grad { background: linear-gradient(90deg, var(--violet-soft), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; } .ot .ar-h1sub { display: block; margin-top: 12px; font-size: clamp(17px, 2.4vw, 22px); font-weight: 700; color: var(--lilac); line-height: 1.6; } .ot .ar-hero__sub { margin-top: 10px; font-size: clamp(16px, 2.2vw, 20px); font-weight: 700; color: var(--lilac); line-height: 1.6; } .ot .ar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 24px; font-size: 14px; color: #C9C0F2; } .ot .ar-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255, 79, 154, .16); color: var(--pink-pale); font-weight: 700; font-size: 13px; } .ot .ar-ad { display: inline-flex; margin-top: 20px; padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(201, 192, 242, .3); font-size: 14px; font-weight: 700; color: #F4F2FA; } /* article sheet */ .ot .ar-sheet { position: relative; z-index: 1; margin-top: calc(var(--sheet) * -1); border-radius: var(--sheet) var(--sheet) 0 0; background: var(--paper); color: #15102A; padding: clamp(40px, 6vw, 72px) 0 clamp(72px, 9vw, 120px); } .ot .ar-body { max-width: 760px; margin-inline: auto; padding-inline: var(--gut); font-size: 17px; line-height: 1.95; } .ot .ar-body > * + *, .ot .ar-sec > * + * { margin-top: 1.25em; } .ot .ar-body p { color: #2A2440; } .ot .ar-body strong { font-weight: 900; color: #15102A; background: linear-gradient(transparent 62%, rgba(255, 179, 212, .75) 62%); } .ot .ar-body a { color: var(--violet-deep); font-weight: 700; text-decoration-thickness: 1.5px; } .ot .ar-body code { font-family: var(--f-mono); font-size: .9em; } .ot .ar-sec { margin-top: clamp(64px, 8vw, 96px); scroll-margin-top: calc(var(--hdr) + 16px); } .ot .ar-num { font-family: var(--f-mono); font-size: 13px; font-weight: 700; letter-spacing: .22em; color: var(--violet-deep); } .ot .ar-num + h2 { margin-top: 6px; } .ot .ar-sec h2 { position: relative; padding-bottom: 14px; font-size: clamp(24px, 3.6vw, 32px); line-height: 1.45; font-weight: 900; color: #15102A; border-bottom: 2px solid #15102A; } .ot .ar-sec h2::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 96px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--violet), var(--pink)); } .ot .ar-sec h3 { margin-top: 2.2em; padding-left: 18px; position: relative; font-size: clamp(19px, 2.6vw, 22px); line-height: 1.55; font-weight: 900; color: #15102A; } .ot .ar-sec h3::before { content: ""; position: absolute; left: 0; top: .32em; width: 6px; height: 1.05em; border-radius: 3px; background: linear-gradient(180deg, var(--violet), var(--pink)); } /* lists */ .ot .ar-list { list-style: none; display: grid; gap: .7em; } .ot ul.ar-list > li { position: relative; padding-left: 1.4em; } .ot ul.ar-list > li::before { content: ""; position: absolute; left: .25em; top: .78em; width: 8px; height: 8px; border-radius: 50%; background: var(--violet); } .ot ol.ar-list { counter-reset: n; } .ot ol.ar-list > li { position: relative; padding-left: 2.6em; counter-increment: n; min-height: 2em; } .ot ol.ar-list > li::before { content: counter(n); position: absolute; left: 0; top: .1em; display: grid; place-items: center; width: 1.85em; height: 1.85em; border-radius: 50%; background: linear-gradient(135deg, var(--violet-ui), var(--magenta)); color: #fff; font-family: var(--f-display); font-size: .9em; font-weight: 900; line-height: 1; } .ot .ar-list li > * + * { margin-top: .8em; } /* tables */ .ot .ar-tbl { overflow-x: auto; border: 1px solid #E2DDF0; border-radius: 18px; background: #fff; } .ot .ar-tbl:focus-visible { outline: 3px solid var(--violet-deep); } .ot .ar-tbl table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.75; } .ot .ar-tbl th, .ot .ar-tbl td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid #ECE8F6; } .ot .ar-tbl tr:last-child > * { border-bottom: 0; } .ot .ar-tbl thead th { background: var(--violet-tint); color: #2A1F66; font-weight: 900; font-size: 14px; } .ot .ar-tbl tbody th { font-weight: 900; color: #15102A; min-width: 7.5em; } .ot .ar-tbl--wide td { text-align: center; } .ot .ar-tbl--wide td:nth-child(2) { text-align: left; min-width: 9em; } .ot .ar-tbl--wide thead th:nth-child(n+3) { text-align: center; } .ot .ar-tbl td { color: #2A2440; } @media (max-width: 600px) { .ot .ar-tbl table { font-size: 14px; } .ot .ar-tbl th, .ot .ar-tbl td { padding: 10px 12px; } } .ot .ar-tbl--wide table { min-width: 600px; } .ot .ar-body .ar-tbl__hint { display: none; margin-top: 8px; font-size: 13px; color: #5C5677; text-align: center; } @media (max-width: 660px) { .ot .ar-body .ar-tbl__hint { display: block; } } /* figures */ .ot .ar-fig { margin-top: 2em; } .ot .ar-fig img { width: 100%; border-radius: 24px; box-shadow: 0 24px 48px -28px rgba(59, 31, 158, .55); } .ot .ar-fig--tall img { max-width: 560px; margin-inline: auto; } @media (max-width: 600px) { .ot .ar-fig { margin-inline: -16px; } .ot .ar-fig img { border-radius: 20px; } } .ot .ar-fig figcaption { margin-top: 12px; font-size: 13px; line-height: 1.7; color: #5C5677; text-align: center; } /* code / prompts */ .ot .ar-code { padding: 18px 20px; border-radius: 16px; background: var(--ink-2); color: #F4F2FA; font-family: var(--f-mono), var(--f-body); font-size: 16px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; border-left: 4px solid var(--pink); } .ot .ar-code code { font-family: var(--f-body); font-weight: 700; font-size: 1em; } /* toc */ .ot .ar-toc { margin-top: 2.4em; padding: 24px 24px 20px; border-radius: 20px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-toc__h { font-weight: 900; font-size: 16px; color: #15102A; } .ot .ar-toc ol { margin-top: 10px; list-style: none; counter-reset: t; display: grid; gap: 2px; } .ot .ar-toc li { counter-increment: t; display: flex; gap: 10px; font-size: 15px; line-height: 1.6; } .ot .ar-toc li::before { content: counter(t, decimal-leading-zero); flex: none; padding-top: 11px; font-family: var(--f-mono); font-size: 12px; font-weight: 700; color: var(--violet-deep); } .ot .ar-toc a { display: block; padding: 8px 0; color: #2A2440; font-weight: 700; text-decoration: none; } .ot .ar-toc a:hover { color: var(--violet-deep); text-decoration: underline; } /* supervisor box */ .ot .ar-sup { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: 20px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-sup__mark { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--violet-ui), var(--magenta)); color: #fff; font-size: 14px; font-weight: 900; letter-spacing: .06em; } .ot .ar-sup__dl { display: grid; gap: 4px; min-width: 0; } .ot .ar-sup__row { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: 8px; font-size: 15px; line-height: 1.7; } .ot .ar-sup__row dt { font-weight: 900; color: var(--violet-deep); } .ot .ar-sup__row dd { color: #2A2440; } @media (max-width: 420px) { .ot .ar-sup { flex-direction: column; } .ot .ar-sup__row { grid-template-columns: minmax(0, 1fr); gap: 0; } .ot .ar-sup__row + .ar-sup__row { margin-top: 6px; } } /* PR box */ .ot .ar-pr { padding: 20px 22px; border-radius: 20px; background: #FFF1F7; border: 1.5px solid #F6B9D3; } .ot .ar-pr .ar-pr__label { color: #fff; } .ot .ar-pr__label { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #C2368A; color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .08em; } .ot .ar-pr p + p { margin-top: 8px; } .ot .ar-pr p { font-size: 15px; color: #2A2440; } .ot .ar-pr a { color: #A3206E; } /* LINE slot */ .ot .ar-line { margin-top: 32px; padding: 22px; border-radius: 20px; border: 2px dashed #B3A8DE; background: rgba(236, 231, 255, .5); text-align: center; } .ot .ar-line__label { font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: .22em; color: var(--violet-deep); } .ot .ar-line p + p { margin-top: 4px; font-weight: 700; color: #3E3858; } /* sources */ .ot .ar-sec--src .ar-list { font-size: 15px; line-height: 1.8; } /* CTA (same as the top page) */ .ot .ar-sec--cta { max-width: none; } .ot .ot-cta { position: relative; isolation: isolate; overflow: hidden; overflow: clip; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 40px; padding: clamp(32px, 5vw, 56px); border-radius: var(--r-l); background: linear-gradient(120deg, var(--indigo) 0%, var(--violet) 55%, var(--magenta) 100%); color: #fff; } .ot .ot-cta__txt { flex: 1 1 420px; min-width: 0; } .ot .ot-cta .ot-eyebrow { color: #FFD3E6; } .ot .ot-cta .ot-eyebrow span { color: rgba(255, 255, 255, .88); } .ot .ot-cta__h { margin-top: 14px; font-size: clamp(22px, 3.6vw, 32px); line-height: 1.4; font-weight: 900; color: #fff; border: 0; padding: 0; } .ot .ot-cta__p { margin-top: 14px; color: #fff !important; font-size: 16px; line-height: 1.9; } .ot .ot-cta__btns { display: flex; flex-direction: column; gap: 12px; } .ot .ot-cta__clock { position: absolute; z-index: -1; right: -120px; top: 50%; width: 420px; height: 420px; margin-top: -210px; overflow: hidden; border-radius: 50%; background: rgba(11, 8, 23, .18); } .ot .ot-cta__clock i { position: absolute; left: 50%; bottom: 50%; width: 9%; height: 58%; margin-left: -4.5%; background: rgba(255, 255, 255, .25); transform-origin: 50% 100%; rotate: 45deg; } @media (max-width: 600px) { .ot .ot-cta { padding: 32px 22px; } .ot .ot-cta__btns { width: 100%; } .ot .ot-cta .ot-btn { width: 100%; white-space: normal; text-align: center; } .ot .ot-cta__clock { width: 240px; height: 240px; right: -96px; top: 0; margin-top: -60px; } } .ot .ar-sec .ot-cta__h { color: #fff; border: 0; padding: 0; } .ot .ar-sec .ot-cta__h::after { content: none; } .ot .ar-body .ot-btn { font-weight: 900; text-decoration: none; } .ot .ar-body .ot-btn--white { color: #15102A; } .ot .ar-body .ot-btn--ghost { color: #fff; } /* ---------- infographics written as HTML (class="ig ...") ---------- */ .ot .ar-body .ig { margin-top: 2em; } .ot .ar-body .ig ul, .ot .ar-body .ig ol, .ot .ar-body .ig dl { list-style: none; margin: 0; padding: 0; } .ot .ar-body .ig-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 14px; font-weight: 900; letter-spacing: .06em; color: var(--violet-deep); line-height: 1.5; } .ot .ar-body .ig-h::before { content: ""; flex: none; width: 22px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--violet), var(--pink)); } .ot .ar-body .ig-t { font-size: 17px; font-weight: 900; line-height: 1.55; color: #15102A; } .ot .ar-body .ig-d { margin-top: 6px; font-size: 14px; line-height: 1.75; color: #5C5677; } .ot .ar-body .ig-nw { white-space: nowrap; } .ot .ar-body .ig-k { font-size: 13px; font-weight: 900; letter-spacing: .08em; line-height: 1.5; } /* 3 cards (side by side at every width) */ .ot .ar-body .ig-cards3 ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .ot .ar-body .ig-card { padding: 20px; border-radius: 20px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-card .ig-t { margin-top: 8px; } .ot .ar-body .ig-card .ig-k::before { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; font-size: 13px; vertical-align: -3px; } .ot .ar-body .ig-card--ok { border-top: 5px solid var(--violet); } .ot .ar-body .ig-card--ok .ig-k { color: var(--violet-deep); } .ot .ar-body .ig-card--ok .ig-k::before { content: "✓"; background: var(--violet-ui); color: #fff; } .ot .ar-body .ig-card--no { background: #EEEBF5; border-color: #E2DDF0; } .ot .ar-body .ig-card--no .ig-k { color: #4A4466; } .ot .ar-body .ig-card--no .ig-k::before { content: "×"; background: #6E6889; color: #fff; } .ot .ar-body .ig-card--key { background: linear-gradient(135deg, #3B1F9E 0%, #5B3EE6 55%, #A3206E 100%); border: 0; } .ot .ar-body .ig-card--key .ig-k, .ot .ar-body .ig-card--key .ig-t { color: #fff; } .ot .ar-body .ig-card--key .ig-d { color: rgba(255, 255, 255, .92); } .ot .ar-body .ig-card--key .ig-k::before { content: "★"; background: #fff; color: #A3206E; } @media (max-width: 599px) { .ot .ar-body .ig-cards3 ul { gap: 8px; } .ot .ar-body .ig-card { padding: 14px 10px; border-radius: 16px; } .ot .ar-body .ig-card .ig-k::before { display: grid; margin: 0 0 6px; width: 26px; height: 26px; font-size: 14px; } .ot .ar-body .ig-card .ig-t { font-size: 15px; margin-top: 4px; } .ot .ar-body .ig-card .ig-d { font-size: 13px; } } /* tiles */ .ot .ar-body .ig-tiles ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (min-width: 720px) { .ot .ar-body .ig-tiles ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .ot .ar-body .ig-tiles li { padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-tiles li p:not(.ig-tag) { margin-top: 10px; font-size: 15px; font-weight: 700; line-height: 1.65; color: #15102A; } .ot .ar-body .ig-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #ECE7FF; color: #3F27B8; font-size: 13px; font-weight: 900; letter-spacing: .04em; line-height: 1.7; } .ot .ar-body .ig-tiles li.is-ours { background: linear-gradient(135deg, #FFF1F7, #fff 70%); border-color: #F6B9D3; } .ot .ar-body .ig-tiles li.is-ours .ig-tag { background: #A3206E; color: #fff; } /* figures that scroll sideways inside themselves on small screens (the page never does) */ .ot .ar-body .ig-x { position: relative; display: grid; grid-template-columns: minmax(var(--track, 0px), 1fr); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; } .ot .ar-body .ig-x:focus-visible { outline: 3px solid var(--violet-deep); outline-offset: 2px; border-radius: 14px; } .ot .ar-body .ig:has(> .ig-x)::after { content: "← 横に動かせます →"; display: none; margin-top: 8px; font-size: 13px; font-weight: 700; line-height: 1.6; text-align: center; color: #4A4466; } .ot .ar-body .ig-hiw:has(> .ig-x)::after { color: #C9C0F2; } @media (max-width: 659px) { .ot:not(.has-js) .ar-body .ig:has(> .ig-x)::after { display: block; } .ot .ar-body .ig-hiw { --track: 600px; } .ot .ar-body .ig-hiw--who { --track: 640px; } .ot .ar-body .ig-steps { --track: 480px; } .ot .ar-body .ig-flow { --track: 540px; } .ot .ar-body .ig-pipe { --track: 520px; } .ot .ar-body .ig-plans { --track: 640px; } } .ot.has-js .ar-body .ig:has(> .ig-x.is-over)::after { display: block; } /* steps side by side (1 → 2 → 3 …) */ .ot .ar-body .ig-steps ol, .ot .ar-body .ig-flow ol { --g: 26px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--g); padding: 4px 2px 6px; counter-reset: s; } .ot .ar-body .ig-steps li, .ot .ar-body .ig-flow li { position: relative; counter-increment: s; display: flex; flex-direction: column; align-items: center; padding: 14px 8px 16px; border-radius: 18px; background: #fff; border: 1px solid #E2DDF0; text-align: center; } .ot .ar-body .ig-steps li::before, .ot .ar-body .ig-flow li::before { content: counter(s); display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--violet-ui), var(--magenta)); color: #fff; font-family: var(--f-display); font-size: 17px; font-weight: 900; line-height: 1; } .ot .ar-body .ig-steps li:not(:last-child)::after, .ot .ar-body .ig-flow li:not(:last-child)::after { content: ""; position: absolute; top: 25px; right: calc(var(--g) / -2 - 6px); border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid var(--violet-ui); } .ot .ar-body .ig-steps .ig-t, .ot .ar-body .ig-flow .ig-t { font-size: 17px; line-height: 1.5; } .ot .ar-body .ig-steps .ig-d { margin-top: 2px; font-size: 15px; font-weight: 700; color: #3F27B8; } .ot .ar-body .ig-flow li.is-human { background: #FFF1F7; border-color: #F6B9D3; } .ot .ar-body .ig-flow li.is-human::before { background: #C2368A; } .ot .ar-body .ig-flow li.is-out { background: linear-gradient(135deg, #3B1F9E, #5B3EE6 60%, #A3206E); border: 0; } .ot .ar-body .ig-flow li.is-out::before { background: #fff; color: #A3206E; } .ot .ar-body .ig-flow li.is-out .ig-t { color: #fff; } .ot .ar-body .ig-who { display: inline-block; margin-bottom: 4px; padding: 1px 10px; border-radius: 999px; background: #FFE0EE; color: #8C1A5C; font-size: 13px; font-weight: 900; line-height: 1.7; } .ot .ar-body .ig-who--ai { background: #ECE7FF; color: #3F27B8; } .ot .ar-body .ig-foot { margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: #ECE7FF; font-size: 14px; font-weight: 700; line-height: 1.7; color: #2A1F66; } /* the 3 ways to make it */ .ot .ar-body .ig-routes ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .ot .ar-body .ig-routes li { padding: 18px 12px 16px; border-radius: 20px; background: #fff; border: 1px solid #E2DDF0; text-align: center; } .ot .ar-body .ig-routes .ig-k { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 8px; border-radius: 50%; background: var(--ink-2); color: #fff; font-family: var(--f-display); font-size: 20px; letter-spacing: 0; } .ot .ar-body .ig-routes li:nth-child(2) .ig-k { background: var(--violet-ui); } .ot .ar-body .ig-routes li:nth-child(3) .ig-k { background: #C2368A; } .ot .ar-body .ig-routes .ig-t { font-size: 18px; line-height: 1.4; } .ot .ar-body .ig-routes .ig-d { margin-top: 6px; font-size: 15px; font-weight: 700; color: #4A4466; } @media (max-width: 599px) { .ot .ar-body .ig-routes ul { gap: 8px; } .ot .ar-body .ig-routes li { padding: 14px 6px; } .ot .ar-body .ig-routes .ig-t { font-size: 16px; } .ot .ar-body .ig-routes .ig-d { font-size: 14px; } } /* where people get stuck */ .ot .ar-body .ig-trouble ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .ot .ar-body .ig-trouble li { position: relative; padding: 46px 6px 16px; border-radius: 18px; background: #fff; border: 1px solid #E2DDF0; text-align: center; } .ot .ar-body .ig-trouble li::before { content: "?"; position: absolute; left: 50%; top: 12px; display: grid; place-items: center; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: #C2368A; color: #fff; font-family: var(--f-display); font-size: 15px; font-weight: 900; } .ot .ar-body .ig-trouble .ig-t { font-size: 17px; } @media (max-width: 599px) { .ot .ar-body .ig-trouble ul { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .ot .ar-body .ig-trouble li { grid-column: span 2; padding: 42px 4px 12px; } .ot .ar-body .ig-trouble li:nth-child(n+4) { grid-column: span 3; } .ot .ar-body .ig-trouble .ig-t { font-size: 15px; } } /* plans side by side (a real table) */ .ot .ar-body .ig-plans .ig-x { border-radius: 20px; background: #fff; border: 1px solid #E2DDF0; } @media (min-width: 600px) and (max-width: 899px) { .ot .ar-body .ig-plans thead th { font-size: 17px; padding-inline: 4px; } } .ot .ar-body .ig-plans table { width: 100%; border-collapse: collapse; table-layout: fixed; } .ot .ar-body .ig-plans th, .ot .ar-body .ig-plans td { padding: 14px 6px; text-align: center; vertical-align: middle; border-bottom: 1px solid #ECE8F6; } .ot .ar-body .ig-plans tbody tr:last-child > * { border-bottom: 0; } .ot .ar-body .ig-plans thead th { vertical-align: top; background: var(--violet-tint); font-family: var(--f-display); font-size: 19px; font-weight: 900; line-height: 1.25; letter-spacing: 0; color: #15102A; } .ot .ar-body .ig-plans thead th:first-child { width: 21%; position: sticky; left: 0; z-index: 2; } .ot .ar-body .ig-plans thead th > span:not(.ot-sr) { display: block; margin-top: 6px; font-family: var(--f-body); font-size: 17px; font-weight: 700; line-height: 1.45; color: #3F27B8; } .ot .ar-body .ig-plans tbody th { position: sticky; left: 0; z-index: 1; padding-left: 14px; text-align: left; background: #fff; font-size: 18px; font-weight: 900; line-height: 1.35; color: #15102A; } .ot .ar-body .ig-plans tbody th > span { display: block; font-size: 16px; font-weight: 700; color: #4A4466; } .ot .ar-body .ig-plans td { font-size: 30px; font-weight: 900; line-height: 1; } .ot .ar-body .ig-plans td.is-yes { color: var(--violet-deep); } .ot .ar-body .ig-plans td.is-no { color: #6E6889; } .ot .ar-body .ig-plans thead th:nth-child(n+5) { background: #E2D9FF; } .ot .ar-body .ig-plans .ig-foot { text-align: right; background: transparent; padding: 4px 4px 0; font-weight: 700; color: #4A4466; } @media (max-width: 599px) { .ot .ar-body .ig-plans thead th { font-size: 17px; } .ot .ar-body .ig-plans thead th > span:not(.ot-sr) { font-size: 15px; } .ot .ar-body .ig-plans tbody th { font-size: 16px; padding-left: 10px; } .ot .ar-body .ig-plans tbody th > span { font-size: 14px; } } /* numbers */ .ot .ar-body .ig-stats ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (min-width: 720px) { .ot .ar-body .ig-stats ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ot .ar-body .ig-stats li { padding: 18px 16px; border-radius: 20px; background: radial-gradient(ellipse 90% 80% at 100% 0%, rgba(123, 92, 255, .45), transparent 70%), var(--ink-2); } .ot .ar-body .ig-num { font-family: var(--f-display); font-size: 38px; font-weight: 900; line-height: 1.1; letter-spacing: -.01em; background: linear-gradient(90deg, #B9A9FF, #FF8FC0); -webkit-background-clip: text; background-clip: text; color: transparent; } .ot .ar-body .ig-num span { font-family: var(--f-body); font-size: 15px; letter-spacing: .02em; margin-left: 2px; } .ot .ar-body .ig-lab { margin-top: 8px; font-size: 14px; font-weight: 700; line-height: 1.5; color: #E4DEFF; } .ot .ar-body .ig-note { margin-top: 4px; font-size: 13px; line-height: 1.5; color: #C9C0F2; } /* two columns (side by side at every width) */ .ot .ar-body .ig-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ot .ar-body .ig-vs > .ig-h { grid-column: 1 / -1; margin-bottom: 0; } .ot .ar-body .ig-col { padding: 20px; border-radius: 20px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-col__h { font-size: 18px; font-weight: 900; line-height: 1.5; color: #15102A; } .ot .ar-body .ig-col ul { margin-top: 10px; display: grid; gap: 8px; } .ot .ar-body .ig-col li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.7; color: #2A2440; } .ot .ar-body .ig-col li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--violet); } .ot .ar-body .ig-col--a { background: radial-gradient(ellipse 80% 70% at 100% 0%, rgba(123, 92, 255, .5), transparent 70%), var(--ink-2); border: 0; } .ot .ar-body .ig-col--a .ig-col__h { color: #fff; } .ot .ar-body .ig-col--a li { color: #E4DEFF; } .ot .ar-body .ig-col--a li::before { background: var(--pink-soft); } .ot .ar-body .ig-col--b { border: 1.5px solid #F6B9D3; background: #FFF6FA; } .ot .ar-body .ig-col--b li::before { background: var(--magenta); } .ot .ar-body .ig-col--dim { background: #EEEBF5; } .ot .ar-body .ig-col--dim .ig-col__h { color: #4A4466; } .ot .ar-body .ig-col--dim li { color: #4A4466; } .ot .ar-body .ig-col--dim li::before { background: #8A84A3; } @media (max-width: 599px) { .ot .ar-body .ig-vs { gap: 8px; } .ot .ar-body .ig-col { padding: 14px 12px; border-radius: 16px; } .ot .ar-body .ig-col__h { font-size: 16px; } .ot .ar-body .ig-col li { padding-left: 16px; font-size: 15px; } .ot .ar-body .ig-col li::before { left: 2px; width: 7px; height: 7px; } } /* chips */ .ot .ar-body .ig-chips ul { display: flex; flex-wrap: wrap; gap: 8px; } .ot .ar-body .ig-chips li { padding: 6px 14px; border-radius: 999px; background: #fff; border: 1.5px solid #B3A8DE; color: #2A1F66; font-size: 14px; font-weight: 700; line-height: 1.6; } .ot .ar-body .ig-chips li.is-soon { border-style: dashed; color: #4A4466; background: transparent; } /* checklists */ .ot .ar-body .ig-checks li { position: relative; padding: 14px 16px 14px 54px; border-radius: 16px; background: #fff; border: 1px solid #E2DDF0; font-size: 15px; line-height: 1.75; color: #2A2440; } .ot .ar-body .ig-checks li + li { margin-top: 8px; } .ot .ar-body .ig-checks li::before { content: "✓"; position: absolute; left: 16px; top: 14px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--violet-ui); color: #fff; font-size: 15px; font-weight: 900; line-height: 1; } .ot .ar-body .ig-checks--pink li::before { background: #C2368A; } .ot .ar-body .ig-checks strong { margin-right: 4px; } /* Q&A summary */ .ot .ar-body .ig-qa dl { display: grid; gap: 8px; } .ot .ar-body .ig-qa dl > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px solid #E2DDF0; } @media (min-width: 640px) { .ot .ar-body .ig-qa dl > div { grid-template-columns: 15em minmax(0, 1fr); gap: 12px; align-items: baseline; } } .ot .ar-body .ig-qa dt, .ot .ar-body .ig-qa dd { position: relative; padding-left: 32px; font-size: 15px; line-height: 1.7; } .ot .ar-body .ig-qa dt { font-weight: 900; color: #15102A; } .ot .ar-body .ig-qa dd { color: #2A2440; } .ot .ar-body .ig-qa dt::before, .ot .ar-body .ig-qa dd::before { position: absolute; left: 0; top: .15em; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-family: var(--f-display); font-size: 12px; font-weight: 900; } .ot .ar-body .ig-qa dt::before { content: "Q"; background: var(--violet-ui); } .ot .ar-body .ig-qa dd::before { content: "A"; background: #C2368A; } /* summary points */ .ot .ar-body .ig-points ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: p; } @media (max-width: 719px) { .ot .ar-body .ig-points ol { grid-template-columns: minmax(0, 1fr); gap: 8px; } .ot .ar-body .ig-points li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 14px 16px; } .ot .ar-body .ig-points li::before { grid-row: span 2; } .ot .ar-body .ig-points .ig-t { margin-top: 0; } } .ot .ar-body .ig-points li { counter-increment: p; padding: 20px; border-radius: 20px; background: linear-gradient(135deg, #3B1F9E 0%, #5B3EE6 60%, #A3206E 100%); } .ot .ar-body .ig-points li::before { content: counter(p, decimal-leading-zero); display: block; font-family: var(--f-display); font-size: 30px; font-weight: 900; line-height: 1; color: rgba(255, 255, 255, .55); } .ot .ar-body .ig-points .ig-t { margin-top: 10px; color: #fff; } .ot .ar-body .ig-points .ig-d { color: rgba(255, 255, 255, .92); } /* YouTube card (the source video) */ .ot .ar-body .ig-yt a { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: 22px; background: var(--ink-2); color: #fff; text-decoration: none; box-shadow: 0 24px 48px -28px rgba(59, 31, 158, .7); } @media (min-width: 640px) { .ot .ar-body .ig-yt a { grid-template-columns: 320px minmax(0, 1fr); align-items: center; } } @media (max-width: 639px) { .ot .ar-body .ig-yt a { grid-template-columns: 136px minmax(0, 1fr); align-items: center; } .ot .ar-body .ig-yt__img { height: 100%; aspect-ratio: auto; min-height: 96px; } .ot .ar-body .ig-yt__img::after { width: 40px; height: 40px; margin: -20px 0 0 -20px; font-size: 15px; box-shadow: 0 0 0 4px rgba(255, 79, 154, .3); } .ot .ar-body .ig-yt__body { padding: 12px 14px; } .ot .ar-body .ig-yt__t { font-size: 15px; line-height: 1.5; } .ot .ar-body .ig-yt__d { font-size: 13px; } } .ot .ar-body .ig-yt__img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; } .ot .ar-body .ig-yt__img img { width: 100%; height: 100%; object-fit: cover; } .ot .ar-body .ig-yt__img::after { content: "▶"; position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding-left: 4px; border-radius: 50%; background: var(--pink); color: #fff; font-size: 22px; box-shadow: 0 0 0 6px rgba(255, 79, 154, .3); transition: transform .3s var(--ease); } .ot .ar-body .ig-yt a:hover .ig-yt__img::after { transform: scale(1.08); } .ot .ar-body .ig-yt__body { display: block; padding: 16px 20px 18px; } .ot .ar-body .ig-yt__k { display: block; font-family: var(--f-mono); font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--pink-pale); } .ot .ar-body .ig-yt__t { display: block; margin-top: 6px; font-size: 17px; font-weight: 900; line-height: 1.55; color: #fff; } .ot .ar-body .ig-yt__d { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: #C9C0F2; } /* Claude's own demos, running in the page */ .ot .ar-body .ig-demo ol { display: grid; gap: 14px; } .ot .ar-body .ig-demo li { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "k" "ask"; gap: 8px 18px; align-items: center; padding: 12px; border-radius: 22px; background: #fff; border: 1px solid #E2DDF0; } @media (min-width: 720px) { .ot .ar-body .ig-demo li { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-areas: "stage k" "stage ask"; align-content: center; } .ot .ar-body .ig-demo .ig-demo__k { align-self: end; } .ot .ar-body .ig-demo .ig-demo__ask { align-self: start; } } .ot .ar-body .ig-demo__stage { grid-area: stage; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #0c0a1c; } .ot .ar-body .ig-demo__canvas { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; font-size: 16px; font-weight: 400; line-height: normal; letter-spacing: normal; text-align: left; word-break: normal; } .ot .ar-body .ig-demo__alt { padding: 16px; font-size: 14px; line-height: 1.7; color: #C9C0F2; } .ot .ar-body .ig-demo__k { grid-area: k; justify-self: start; padding: 2px 14px; border-radius: 999px; background: var(--ink-2); color: #fff; font-size: 13px; font-weight: 900; letter-spacing: .06em; } .ot .ar-body .ig-demo li:nth-child(2) .ig-demo__k { background: var(--violet-ui); } .ot .ar-body .ig-demo li:nth-child(3) .ig-demo__k { background: #C2368A; } .ot .ar-body .ig-demo__ask { grid-area: ask; font-size: 17px; font-weight: 900; line-height: 1.6; color: #15102A; } .ot .ar-body .ig-demo__ask::before { content: "頼んだ言葉"; display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--violet-deep); } /* "How it works" (dark, like the top page): steps side by side, a curved arrow back, lit by the scroll */ .ot .ar-body .ig-hiw { position: relative; padding: 26px 22px 18px; border-radius: 28px; background: radial-gradient(ellipse 70% 50% at 100% 0%, rgba(123, 92, 255, .45), transparent 70%), radial-gradient(ellipse 60% 40% at 0% 100%, rgba(255, 79, 154, .22), transparent 70%), #120D24; } .ot .ar-body .ig-eyebrow { font-family: var(--f-mono); font-size: 13px; font-weight: 700; letter-spacing: .22em; color: var(--pink-soft); } .ot .ar-body .ig-title { margin-top: 4px; font-size: clamp(20px, 3vw, 26px); font-weight: 900; line-height: 1.4; color: #fff; } .ot .ar-body .ig-hiw .ig-x { margin: 14px -10px 0; padding: 12px 10px 6px; } .ot .ar-body .ig-hiw { --g: 26px; } @media (max-width: 659px) { .ot .ar-body .ig-hiw { --g: 20px; } } .ot .ar-body .ig-hiw ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--g); counter-reset: h; } .ot .ar-body .ig-hiw li { position: relative; counter-increment: h; display: flex; flex-direction: column; align-items: center; padding: 18px 6px 16px; border-radius: 20px; background: #1A1433; border: 1.5px solid rgba(201, 192, 242, .22); text-align: center; } .ot .ar-body .ig-hiw .ig-icon { width: 52px; height: 52px; flex: none; } .ot .ar-body .ig-hiw li::before { content: counter(h); position: absolute; z-index: 1; left: 8px; top: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #7B5CFF, #FF4F9A); color: #fff; font-family: var(--f-display); font-size: 13px; font-weight: 900; } .ot .ar-body .ig-hiw li:not(:last-child)::after { content: ""; position: absolute; top: 38px; right: calc(var(--g) / -2 - 6px); border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid #9C86FF; } .ot .ar-body .ig-hiw li.is-human { background: #2A1640; border-color: rgba(255, 79, 154, .7); } .ot .ar-body .ig-hiw li.is-human::before { background: #FF4F9A; color: #15102A; } .ot .ar-body .ig-hiw .ig-t { margin-top: 8px; color: #fff; font-size: 17px; line-height: 1.5; } .ot .ar-body .ig-hiw .ig-who { margin: 10px 0 0; background: rgba(156, 134, 255, .22); color: #E4DEFF; } .ot .ar-body .ig-hiw .ig-who + .ig-t { margin-top: 4px; } .ot .ar-body .ig-hiw li.is-human .ig-who { background: rgba(255, 79, 154, .25); color: #FFD3E6; } /* the way back: from 5 to 2 (How it works) or to 1 (HOW WE MAKE IT) */ .ot .ar-body .ig-loop { --from: calc(30% - .2 * var(--g)); --to: calc(10% - .4 * var(--g)); position: relative; margin-top: 12px; padding: 30px var(--to) 0 var(--from); text-align: center; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--pink-pale); } .ot .ar-body .ig-hiw--who .ig-loop { --from: calc(10% - .4 * var(--g)); } .ot .ar-body .ig-loop::before { content: ""; position: absolute; top: 0; left: var(--from); right: var(--to); height: 22px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 22px 22px; } .ot .ar-body .ig-loop::after { content: ""; position: absolute; top: -10px; left: calc(var(--from) - 7px); border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid currentColor; } /* a light that runs over the steps once when the figure comes in (only opacity moves) */ .ot .ar-body .ig-glow { position: absolute; inset: -2px; border-radius: 22px; box-shadow: 0 0 0 3px rgba(156, 134, 255, .95), 0 0 30px rgba(123, 92, 255, .6); opacity: 0; transition: opacity .3s ease; pointer-events: none; } .ot .ar-body .ig-hiw li.is-human .ig-glow { box-shadow: 0 0 0 3px rgba(255, 79, 154, .9), 0 0 30px rgba(255, 79, 154, .5); } .ot .ar-body .ig-hiw li.is-on .ig-glow { opacity: .4; } .ot .ar-body .ig-hiw li.is-now .ig-glow { opacity: 1; } .ot .ar-body .ig-loop .ig-glow { inset: auto; top: 0; left: var(--from); right: var(--to); height: 22px; border-radius: 0 0 22px 22px; box-shadow: 0 6px 16px rgba(255, 79, 154, .8), inset 0 -2px 0 #fff; } .ot .ar-body .ig-loop.is-on .ig-glow { opacity: 1; } /* HTML -> MP4 pipeline (side by side) */ .ot .ar-body .ig-pipe ol { --g: 30px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); padding: 2px; } .ot .ar-body .ig-pipe li { position: relative; padding: 16px 8px; border-radius: 18px; background: var(--ink-2); text-align: center; } .ot .ar-body .ig-pipe li.is-out { background: linear-gradient(135deg, #5B3EE6, #A3206E); } .ot .ar-body .ig-pipe .ig-icon { display: block; width: 44px; height: 44px; margin: 0 auto 8px; } .ot .ar-body .ig-pipe .ig-t { color: #fff; font-size: 17px; } .ot .ar-body .ig-pipe .ig-d { margin-top: 2px; color: #C9C0F2; font-size: 15px; font-weight: 700; } .ot .ar-body .ig-pipe li.is-out .ig-d { color: #FFE3EF; } .ot .ar-body .ig-pipe li:not(:last-child)::after { content: ""; position: absolute; top: 34px; right: calc(var(--g) / -2 - 6px); border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid var(--violet-ui); } /* things you need */ .ot .ar-body .ig-need ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (min-width: 640px) { .ot .ar-body .ig-need ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ot .ar-body .ig-need li { padding: 14px; border-radius: 16px; background: #fff; border: 1px solid #E2DDF0; border-top: 4px solid var(--violet); } .ot .ar-body .ig-need .ig-t { font-size: 17px; } .ot .ar-body .ig-need .ig-d { margin-top: 2px; font-size: 15px; font-weight: 700; color: #4A4466; } /* in-article call to action (own service) */ .ot .ar-body .ig-cta { padding: 24px 22px; border-radius: 24px; background: linear-gradient(120deg, #3B1F9E 0%, #5B3EE6 55%, #A3206E 100%); } .ot .ar-body .ig-cta__k { font-family: var(--f-mono); font-size: 13px; font-weight: 700; letter-spacing: .14em; color: #FFD3E6; } .ot .ar-body .ig-cta__t { margin-top: 6px; font-size: clamp(20px, 3vw, 26px); font-weight: 900; line-height: 1.45; color: #fff; } .ot .ar-body .ig-cta .ig-cta__d { margin-top: 8px; font-size: 15px; line-height: 1.8; color: rgba(255, 255, 255, .94); } .ot .ar-body .ig-cta__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .ot .ar-body .ig-cta__links a { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border-radius: 999px; font-weight: 900; text-decoration: none; background: #fff; color: #15102A; } .ot .ar-body .ig-cta__links a + a { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .75); } .ot .ar-body .ig-cta__links a::after { content: "→"; margin-left: 8px; } @media (max-width: 480px) { .ot .ar-body .ig-cta__links a { flex: 1 1 100%; } } /* placeholder for real screens still to come */ .ot .ar-body .ig-slot { padding: 14px 16px; border: 1.5px dashed #C9C0F2; border-radius: 16px; text-align: center; } .ot .ar-body .ig-slot p { font-size: 13px; color: #5C5677; } /* the prompts we actually sent */ .ot .ar-body .ig-prompts ol { display: grid; gap: 10px; counter-reset: q; } .ot .ar-body .ig-prompts li { padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-prompts .ig-k { color: var(--violet-deep); } .ot .ar-body .ig-q { display: inline-block; margin-top: 8px; padding: 10px 16px; border-radius: 16px 16px 16px 4px; background: var(--ink-2); color: #fff; font-size: 16px; font-weight: 700; line-height: 1.7; } .ot .ar-body .ig-prompts .ig-note { margin-top: 6px; font-size: 13px; color: #5C5677; } /* chat (LINE-like): right = the person who asks, left = Claude */ .ot .ar-body .ig-chat { padding: 18px 16px 16px; border-radius: 24px; background: #E9E4FA; } .ot .ar-body .ig-chat ol { display: grid; gap: 14px; } .ot .ar-body .ig-chat > ol > li { display: grid; column-gap: 8px; align-items: start; min-width: 0; } .ot .ar-body .ig-chat > ol > li[hidden] { display: none; } .ot .ar-body .ig-chat__ai { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "ava name" "ava bubble"; justify-items: start; } .ot .ar-body .ig-chat__me { grid-template-columns: minmax(0, 1fr) 40px; grid-template-areas: "name ava" "bubble ava"; justify-items: end; } .ot .ar-body .ig-chat .ig-ava { grid-area: ava; display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .ot .ar-body .ig-ava--claude { border-radius: 0 !important; } .ot .ar-body .ig-chat__name { grid-area: name; font-size: 13px; font-weight: 700; color: #4A4466; margin: 2px 6px 4px; } .ot .ar-body .ig-chat__bubble { grid-area: bubble; max-width: min(100%, 520px); padding: 12px 16px; border-radius: 20px; font-size: 16px; font-weight: 700; line-height: 1.7; } .ot .ar-body .ig-chat__me .ig-chat__bubble { background: #6A4CF5; color: #fff; border-bottom-right-radius: 6px; } .ot .ar-body .ig-chat__ai .ig-chat__bubble { background: #fff; color: #15102A; font-weight: 500; border-bottom-left-radius: 6px; box-shadow: 0 6px 18px -12px rgba(59, 31, 158, .5); } .ot .ar-body .ig-chat__ai .ig-chat__bubble.is-media { width: min(100%, 520px); padding: 10px; } .ot .ar-body .ig-chat__bubble.is-media .ig-chat__text, .ot .ar-body .ig-chat__bubble.is-media > .ig-chat__more { padding: 2px 6px 8px; } .ot .ar-body .ig-chat__card { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: #F4F2FA; border: 1px solid #E2DDF0; } .ot .ar-body .ig-chat__card-h { font-size: 13px; font-weight: 900; color: var(--violet-deep); } .ot .ar-body .ig-chat__q { margin-top: 10px; font-size: 15px; font-weight: 900; } .ot .ar-body .ig-chat__opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .ot .ar-body .ig-chat__opts li { padding: 2px 8px; border-radius: 4px; background: #E4DEFA; color: #2A1F66; font-size: 13px; font-weight: 500; line-height: 1.6; } .ot .ar-body .ig-chat__opts li + li::before { content: none; } .ot .ar-body .ig-chat__small { margin-top: 6px; font-size: 13px; color: #5C5677; } .ot .ar-body .ig-chat__more { margin-top: 8px; font-size: 14px; line-height: 1.75; } .ot .ar-body .ig-chat__more summary { display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; font-weight: 700; color: var(--violet-deep); cursor: pointer; } .ot .ar-body .ig-chat__more ul { display: grid; gap: 4px; margin-top: 4px; font-size: 13px; color: #2A2440; } .ot .ar-body .ig-chat__more p { margin-top: 4px; } .ot .ar-body .ig-chat__mark { margin-left: 6px; font-size: 13px; } .ot .ar-body .ig-chat__bubble.is-media .ig-chat__tag { margin-top: 4px; } .ot .ar-body .ig-chat__tag { display: inline-block; margin: 0 0 8px 4px; padding: 1px 10px; border-radius: 999px; background: var(--ink-2); color: #fff; font-size: 13px; font-weight: 900; } .ot .ar-body .ig-chat li:nth-child(4) .ig-chat__tag, .ot .ar-body .ig-chat li:nth-child(6) .ig-chat__tag { background: var(--violet-ui); } .ot .ar-body .ig-chat li:last-child .ig-chat__tag { background: #C2368A; } .ot .ar-body .ig-chat .ig-demo__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #0c0a1c; } .ot .ar-body .ig-chat__note { align-items: center; } .ot .ar-body .ig-chat__note p { padding: 4px 14px; border-radius: 999px; background: rgba(255, 255, 255, .7); font-size: 13px; color: #4A4466; text-align: center; } .ot .ar-body .ig-chat .ig-foot { margin-top: 12px; background: transparent; padding: 0 4px; font-size: 13px; font-weight: 500; color: #4A4466; } .ot.has-js .ar-body .ig-chat ol > li > * { transition: opacity .4s ease, transform .45s ease; } .ot.has-js .ar-body .ig-chat ol > li.is-wait > * { opacity: 0; transform: translateY(12px); } /* the long chat: a frame half as tall, one bubble per press (set up by the script) */ .ot .ar-body .ig-step__frame { position: relative; height: 600px; overflow-y: auto; padding: 4px 4px 12px; border-radius: 18px; background: rgba(255, 255, 255, .45); cursor: pointer; scrollbar-width: thin; } @media (max-width: 719px) { .ot .ar-body .ig-step__frame { height: 56vh; } } @media (max-width: 359px) { .ot .ar-body .ig-step__frame { height: 50vh; } } .ot .ar-body .ig-step__frame { overscroll-behavior: auto; } .ot .ar-body .ig-step__frame:focus-visible { outline: 3px solid var(--violet-deep); outline-offset: 2px; } .ot .ar-body .ig-step__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; } .ot .ar-body .ig-step__btn { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; color: #2A1F66; font: 700 15px/1.2 var(--f-body); box-shadow: inset 0 0 0 1.5px #B3A8DE; cursor: pointer; } .ot .ar-body .ig-step__btn:disabled { color: #6E6889; box-shadow: inset 0 0 0 1.5px #D5CFEA; cursor: default; } .ot .ar-body .ig-step__btn--next { margin-left: auto; background: var(--violet-ui); color: #fff; box-shadow: none; padding: 0 22px; } .ot .ar-body .ig-step__btn:focus-visible { outline: 3px solid #C2368A; outline-offset: 2px; } .ot .ar-body .ig-step__count { font-size: 15px; font-weight: 700; color: #2A1F66; } .ot .ar-body .ig-chat__all { margin-top: 12px; } .ot .ar-body .ig-chat__all > summary { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--violet-deep); cursor: pointer; } .ot .ar-body .ig-chat--all { padding: 8px 0 0; background: none; border-radius: 0; } @media (max-width: 479px) { .ot .ar-body .ig-step__btn { padding: 0 12px; font-size: 14px; } .ot .ar-body .ig-step__btn--next { padding: 0 16px; } } /* 02: the drawing changing, side by side (1 → 2 → 3) */ .ot .ar-body .ig-evolve { padding: 18px 16px 14px; border-radius: 24px; background: #E9E4FA; } .ot .ar-body .ig-evolve .ig-h { flex-wrap: wrap; } .ot .ar-body .ig-evolve__x { display: block; padding: 4px 2px 8px; scroll-snap-type: x mandatory; } .ot .ar-body .ig-evolve ol { --g: 34px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--g); } .ot .ar-body .ig-evolve li { display: grid; grid-template-rows: 1fr auto; gap: 10px; min-width: 0; scroll-snap-align: start; } .ot .ar-body .ig-evolve__ask { align-self: end; display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px; } .ot .ar-body .ig-evolve__bubble { padding: 10px 14px; border-radius: 18px 18px 6px 18px; background: #6A4CF5; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.6; } .ot .ar-body .ig-evolve__ans { position: relative; display: flex; align-items: flex-start; gap: 8px; } .ot .ar-body .ig-evolve__card { flex: 1 1 auto; min-width: 0; padding: 8px; border-radius: 16px 16px 16px 6px; background: #fff; box-shadow: 0 6px 18px -12px rgba(59, 31, 158, .5); } .ot .ar-body .ig-evolve .ig-ava { flex: none; display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .ot .ar-body .ig-evolve .ig-chat__tag { margin: 2px 0 8px 2px; } .ot .ar-body .ig-evolve li:nth-child(2) .ig-chat__tag { background: var(--violet-ui); } .ot .ar-body .ig-evolve li:nth-child(3) .ig-chat__tag { background: #C2368A; } .ot .ar-body .ig-evolve .ig-demo__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #0c0a1c; } .ot .ar-body .ig-evolve li:not(:last-child) .ig-evolve__ans::after { content: ""; position: absolute; top: 55%; right: calc(var(--g) / -2 - 6px); margin-top: -7px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid var(--violet-ui); } .ot .ar-body .ig-evolve .ig-foot { margin-top: 6px; background: transparent; padding: 0 4px; font-size: 13px; font-weight: 500; color: #4A4466; } .ot .ar-body .ig-evolve:has(> .ig-x)::after { content: none; display: none; } @media (max-width: 719px) { .ot .ar-body .ig-evolve ol { --g: 26px; grid-auto-columns: 84%; } .ot .ar-body .ig-evolve .ig-h::after { content: "→ すべらせる"; margin-left: auto; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #4A4466; } .ot .ar-body .ig-evolve__bubble { font-size: 15px; } } .ot .ar-body .ig-demo__stage[role="button"] { cursor: pointer; } .ot .ar-body .ig-demo__stage[role="button"]:focus-visible { outline: 3px solid #C2368A; outline-offset: 3px; } /* market: a wide card, heading on the left, three bars on the right (proportional from zero) */ .ot .ar-body .ig-market .ig-x { border-radius: 28px; background: radial-gradient(ellipse 60% 70% at 100% 0%, rgba(123, 92, 255, .45), transparent 70%), radial-gradient(ellipse 50% 60% at 0% 100%, rgba(255, 79, 154, .22), transparent 70%), #120D24; } @media (max-width: 659px) { .ot .ar-body .ig-market { --track: 600px; } .ot .ar-body .ig-market .ig-market__in { grid-template-columns: minmax(0, .78fr) minmax(0, 1.45fr); gap: 16px; padding: 22px 18px 18px; } .ot .ar-body .ig-market .ig-market__head .ig-title { font-size: 18px; } .ot .ar-body .ig-market .ig-market__big { font-size: 24px; } .ot .ar-body .ig-market .ig-market__big small { font-size: 15px; } } @media (max-width: 359px) { .ot .ar-body .ig-market { --track: 540px; } .ot .ar-body .ig-market .ig-market__in { grid-template-columns: minmax(0, .7fr) minmax(0, 1.45fr); gap: 14px; } .ot .ar-body .ig-market .ig-market__head .ig-title { font-size: 16px; } .ot .ar-body .ig-market .ig-market__big { font-size: 21px; } .ot .ar-body .ig-market .ig-market__bars { gap: 12px; } .ot .ar-body .ig-market .ig-market__v { font-size: 14px; } .ot .ar-body .ig-market .ig-market__v span, .ot .ar-body .ig-market .ig-market__y span { font-size: 13px; } .ot .ar-body .ig-market .ig-market__y { font-size: 14px; } } .ot .ar-body .ig-market__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.45fr); gap: 24px; align-items: end; padding: 26px 26px 22px; } .ot .ar-body .ig-market__head { align-self: center; } .ot .ar-body .ig-market__big { margin-top: 12px; font-size: clamp(26px, 3.6vw, 36px); font-weight: 900; line-height: 1.3; color: #fff; } .ot .ar-body .ig-market .ig-title { font-size: 22px; } .ot .ar-body .ig-market__big small { display: block; font-size: 18px; color: #C9C0F2; } .ot .ar-body .ig-market__src { margin-top: 16px; font-size: 13px; line-height: 1.6; color: #A9A1CC; } .ot .ar-body .ig-market__bars { --plot: 190px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: end; } .ot .ar-body .ig-market__bars li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; } .ot .ar-body .ig-market__v { font-size: 17px; font-weight: 900; line-height: 1.35; color: #F4F2FA; white-space: nowrap; } .ot .ar-body .ig-market__v span { display: block; font-size: 14px; font-weight: 700; color: #FFB3D4; } .ot .ar-body .ig-market__bar { display: block; width: 62%; margin-top: 8px; border-radius: 6px 6px 0 0; background: #866CFF; } .ot .ar-body .ig-market .is-2025 .ig-market__bar { height: calc(var(--plot) * .542); } .ot .ar-body .ig-market .is-2026 .ig-market__bar { height: calc(var(--plot) * .639); } .ot .ar-body .ig-market .is-2029 .ig-market__bar { height: var(--plot); } .ot .ar-body .ig-market .is-plan .ig-market__bar { background: rgba(134, 108, 255, .28); border: 2.5px dashed #866CFF; border-bottom: 0; } .ot .ar-body .ig-market__y { align-self: stretch; padding-top: 8px; border-top: 2px solid rgba(201, 192, 242, .5); font-size: 16px; font-weight: 900; line-height: 1.35; color: #F4F2FA; } .ot .ar-body .ig-market__y span { display: block; font-size: 14px; font-weight: 700; color: #C9C0F2; } .ot .ar-body .ig-market .is-2025 .ig-market__y span { color: #FFB3D4; } .ot .ar-body .ig-market:has(> .ig-x)::after { color: #4A4466; } /* CM article figures (cm-production-how-to) */ .ot .ar-body .ig-cmtypes td { font-size: 17px; font-weight: 700; line-height: 1.5; color: #15102A; } .ot .ar-body .ig-cmtypes thead th:nth-child(n+5) { background: var(--violet-tint); } @media (max-width: 659px) { .ot .ar-body .ig-cmtypes { --track: 520px; } } .ot .ar-body .ig-hiw--6 ol { grid-template-columns: repeat(6, minmax(0, 1fr)); } .ot .ar-body .ig-hiw--6 { --g: 20px; } @media (max-width: 659px) { .ot .ar-body .ig-hiw--6 { --track: 720px; --g: 18px; } } .ot .ar-body .ig-factors ul, .ot .ar-body .ig-samples ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .ot .ar-body .ig-samples ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ot .ar-body .ig-factors li, .ot .ar-body .ig-samples li { padding: 16px 12px; border-radius: 18px; background: #fff; border: 1px solid #E2DDF0; text-align: center; } .ot .ar-body .ig-factors .ig-k { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 8px; border-radius: 50%; background: linear-gradient(135deg, var(--violet-ui), var(--magenta)); color: #fff; font-family: var(--f-display); font-size: 16px; } .ot .ar-body .ig-factors .ig-t, .ot .ar-body .ig-samples .ig-t { font-size: 17px; } .ot .ar-body .ig-factors .ig-d, .ot .ar-body .ig-samples .ig-d { margin-top: 4px; font-size: 14px; font-weight: 700; color: #4A4466; } .ot .ar-body .ig-samples .ig-t { margin-top: 8px; } @media (max-width: 599px) { .ot .ar-body .ig-factors ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ot .ar-body .ig-samples ul { gap: 8px; } .ot .ar-body .ig-samples li { padding: 12px 6px; } .ot .ar-body .ig-samples .ig-t { font-size: 15px; } .ot .ar-body .ig-samples .ig-d { font-size: 13px; } } .ot .ar-body .ig-checkgrid ul, .ot .ar-body .ig-checkgrid ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: c; } .ot .ar-body .ig-checkgrid li { position: relative; display: flex; align-items: center; min-height: 56px; padding: 10px 12px 10px 48px; border-radius: 14px; background: #fff; border: 1px solid #E2DDF0; font-size: 17px; font-weight: 900; line-height: 1.4; color: #15102A; counter-increment: c; } .ot .ar-body .ig-checkgrid li::before { content: "✓"; position: absolute; left: 12px; top: 50%; display: grid; place-items: center; width: 26px; height: 26px; margin-top: -13px; border-radius: 8px; background: var(--violet-ui); color: #fff; font-size: 15px; font-weight: 900; } .ot .ar-body .ig-checkgrid--num li::before { content: counter(c); border-radius: 50%; background: linear-gradient(135deg, var(--violet-ui), var(--magenta)); font-family: var(--f-display); } @media (max-width: 599px) { .ot .ar-body .ig-checkgrid ul, .ot .ar-body .ig-checkgrid ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ot .ar-body .ig-checkgrid li { font-size: 16px; padding-left: 44px; } } /* cards to a scene of the published YouTube video */ .ot .ar-body .ig-ytc { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; overflow: hidden; border-radius: 14px; background: var(--ink-2); color: #fff; text-decoration: none; } .ot .ar-body .ig-ytc__img { position: relative; display: block; height: 100%; min-height: 84px; overflow: hidden; } .ot .ar-body .ig-ytc__img img { width: 100%; height: 100%; object-fit: cover; } .ot .ar-body .ig-ytc__img::after { content: "▶"; position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 36px; height: 36px; margin: -18px 0 0 -18px; padding-left: 3px; border-radius: 50%; background: var(--pink); color: #fff; font-size: 14px; } .ot .ar-body .ig-ytc__body { display: block; padding: 10px 12px; min-width: 0; } .ot .ar-body .ig-ytc__k { display: block; font-family: var(--f-mono); font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--pink-pale); } .ot .ar-body .ig-ytc__t { display: block; margin-top: 4px; font-size: 14px; font-weight: 700; line-height: 1.5; color: #fff; } .ot .ar-body .ig-ytc__d { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; color: #C9C0F2; } .ot .ar-body .ig-ytc:hover .ig-ytc__t { text-decoration: underline; } .ot .ar-body .ig-ytc:focus-visible { outline: 3px solid #C2368A; outline-offset: 3px; } .ot .ar-body .ig-chat__bubble .ig-ytc { margin-top: 2px; } .ot .ar-body .ig-recs li { padding: 8px; } @media (max-width: 639px) { .ot .ar-body .ig.ig-recs > ul { grid-template-columns: minmax(0, 1fr); gap: 8px; } } @media (max-width: 359px) { .ot .ar-body .ig-ytc { grid-template-columns: 104px minmax(0, 1fr); } } /* video frames (filled when the files arrive) */ .ot .ar-body .ig-video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #120D24; } .ot .ar-body .ig-recs ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .ot .ar-body .ig-recs ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ot .ar-body .ig-recs li { padding: 10px; border-radius: 18px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-recs li p { margin-top: 8px; font-size: 14px; font-weight: 700; text-align: center; color: #15102A; } /* FAQ as Q/A cards (the questions stay h3) */ .ot .ar-body .ig-faq { display: grid; gap: 10px; } .ot .ar-body .ig-faq > div { position: relative; padding: 16px 18px 16px 58px; border-radius: 18px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-faq > div::before { content: "Q"; position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--violet-ui); color: #fff; font-family: var(--f-display); font-size: 14px; font-weight: 900; } .ot .ar-sec .ig-faq h3 { margin: 0; padding: 0; font-size: 17px; line-height: 1.6; } .ot .ar-sec .ig-faq h3::before { content: none; } .ot .ar-body .ig-faq p { margin-top: 6px; font-size: 15px; line-height: 1.8; color: #2A2440; } /* photo figures (ChatGPT illustrations) */ .ot .ar-fig--photo img { aspect-ratio: auto; } /* footer (same as the top page, trimmed) */ .ot .ot-foot { position: relative; z-index: 2; margin-top: calc(var(--sheet) * -1); border-radius: var(--sheet) var(--sheet) 0 0; background: var(--ink); padding-block: 72px 40px; box-shadow: 0 -1px 0 rgba(201, 192, 242, .16); } .ot .ot-foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; } .ot .ot-foot__brand { flex: 1 1 280px; } .ot .ot-foot__brand img { height: 56px; width: auto; margin-left: calc(56px * -24 / 148); } .ot .ot-foot__brand p { margin-top: 16px; font-family: var(--f-display); font-weight: 800; color: var(--lilac); } .ot .ot-foot__cols { flex: 2 1 480px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 24px; font-size: 14px; } .ot .ot-foot__col { display: flex; flex-direction: column; } .ot .ot-foot__col p { margin-bottom: 4px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; color: #8A84A3; } .ot .ot-foot__col a { display: inline-flex; align-items: center; min-height: 44px; color: var(--lilac); text-decoration: none; } .ot .ot-foot__bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 20px; border-top: 1px solid rgba(201, 192, 242, .15); font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; color: #8A84A3; } /* ---------- rw01: figures for the company-guide rewrite ---------- */ /* the 7 points (side by side; 4 + 3 on phones) */ .ot .ar-body .ig-seven ol { --g: 12px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--g); counter-reset: s7; } .ot .ar-body .ig-seven li { counter-increment: s7; display: flex; flex-direction: column; align-items: center; padding: 14px 4px 14px; border-radius: 18px; background: #fff; border: 1px solid #E2DDF0; text-align: center; } .ot .ar-body .ig-seven li::before { content: counter(s7); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--violet-ui), var(--magenta)); color: #fff; font-family: var(--f-display); font-size: 16px; font-weight: 900; line-height: 1; } .ot .ar-body .ig-seven .ig-t { font-size: 19px; line-height: 1.35; } .ot .ar-body .ig-seven .ig-d { margin-top: 4px; font-size: 13px; font-weight: 700; line-height: 1.45; color: #4A4466; } .ot .ar-body .ig-seven li:last-child { background: linear-gradient(135deg, #3B1F9E 0%, #5B3EE6 55%, #A3206E 100%); border: 0; } .ot .ar-body .ig-seven li:last-child::before { background: #fff; color: #A3206E; } .ot .ar-body .ig-seven li:last-child .ig-t { color: #fff; } .ot .ar-body .ig-seven li:last-child .ig-d { color: rgba(255, 255, 255, .92); } @media (max-width: 659px) { .ot .ar-body .ig-seven ol { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; } .ot .ar-body .ig-seven li { grid-column: span 3; padding: 12px 2px; border-radius: 16px; } .ot .ar-body .ig-seven li:nth-child(n+5) { grid-column: span 4; } .ot .ar-body .ig-seven .ig-t { font-size: 17px; } .ot .ar-body .ig-seven li::before { width: 30px; height: 30px; font-size: 15px; } } /* the samples (real videos, played only when pressed) */ .ot .ar-body .ig-gal ul { display: grid; gap: 12px; } .ot .ar-body .ig-gal ul + .ig-h { margin-top: 22px; } .ot .ar-body .ig-gal__wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ot .ar-body .ig-gal__tall { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ot .ar-body .ig-gal li { min-width: 0; padding: 8px 8px 12px; border-radius: 18px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-gal__v { display: block; width: 100%; border-radius: 12px; background: #120D24; object-fit: cover; } .ot .ar-body .ig-gal__wide .ig-gal__v { aspect-ratio: 16 / 9; } .ot .ar-body .ig-gal__tall .ig-gal__v { aspect-ratio: 9 / 16; } .ot .ar-body .ig-gal__t { margin: 10px 4px 0; font-size: 16px; font-weight: 900; line-height: 1.45; color: #15102A; } .ot .ar-body .ig-gal__m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 2px 4px 0; font-size: 13px; font-weight: 700; line-height: 1.6; color: #4A4466; } .ot .ar-body .ig-gal__own { display: inline-block; padding: 0 8px; border-radius: 999px; background: #FFE0EE; color: #8C1A5C; font-size: 12px; font-weight: 900; line-height: 1.7; } @media (max-width: 659px) { .ot .ar-body .ig-gal ul { gap: 8px; } .ot .ar-body .ig-gal__wide, .ot .ar-body .ig-gal__tall { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ot .ar-body .ig-gal li { padding: 6px 6px 10px; border-radius: 16px; } .ot .ar-body .ig-gal__t { font-size: 15px; } } /* the 4 kinds of company (side by side; 2 + 2 on phones) */ .ot .ar-body .ig-types ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .ot .ar-body .ig-types li { padding: 18px 10px 16px; border-radius: 20px; background: #fff; border: 1px solid #E2DDF0; text-align: center; } .ot .ar-body .ig-types .ig-k { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 8px; border-radius: 50%; background: var(--ink-2); color: #fff; font-family: var(--f-display); font-size: 20px; letter-spacing: 0; } .ot .ar-body .ig-types li:nth-child(2) .ig-k { background: var(--violet-ui); } .ot .ar-body .ig-types li:nth-child(3) .ig-k { background: #3F27B8; } .ot .ar-body .ig-types li:nth-child(4) .ig-k { background: #C2368A; } .ot .ar-body .ig-types .ig-t { font-size: 17px; line-height: 1.45; } .ot .ar-body .ig-types .ig-d { margin-top: 6px; font-size: 15px; font-weight: 700; color: #4A4466; } @media (max-width: 599px) { .ot .ar-body .ig-types ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ot .ar-body .ig-types li { padding: 14px 6px; } .ot .ar-body .ig-types .ig-t { font-size: 16px; } .ot .ar-body .ig-types .ig-d { font-size: 14px; } } /* the 7 points as a real table: points side by side, the first column stays */ .ot .ar-body .ig-cmp .ig-x { border-radius: 20px; background: #fff; border: 1px solid #E2DDF0; } @media (max-width: 659px) { .ot .ar-body .ig-cmp { --track: 780px; } } .ot .ar-body .ig-cmp table { width: 100%; border-collapse: collapse; table-layout: fixed; } .ot .ar-body .ig-cmp th, .ot .ar-body .ig-cmp td { padding: 14px 6px; text-align: center; vertical-align: middle; border-bottom: 1px solid #ECE8F6; } .ot .ar-body .ig-cmp tbody tr:last-child > * { border-bottom: 0; } .ot .ar-body .ig-cmp thead th { vertical-align: top; background: var(--violet-tint); font-size: 18px; font-weight: 900; line-height: 1.3; color: #15102A; } .ot .ar-body .ig-cmp thead th:first-child { width: 14%; position: sticky; left: 0; z-index: 2; } .ot .ar-body .ig-cmp__n { display: grid; place-items: center; width: 26px; height: 26px; margin: 0 auto 6px; border-radius: 50%; background: linear-gradient(135deg, var(--violet-ui), var(--magenta)); color: #fff; font-family: var(--f-display); font-size: 13px; font-weight: 900; line-height: 1; } .ot .ar-body .ig-cmp tbody th { position: sticky; left: 0; z-index: 1; padding-left: 14px; text-align: left; background: #fff; font-size: 16px; font-weight: 900; line-height: 1.35; color: #15102A; } .ot .ar-body .ig-cmp tbody th > span { display: block; font-size: 13px; font-weight: 700; color: #4A4466; } .ot .ar-body .ig-cmp td { font-size: 16px; font-weight: 700; line-height: 1.5; color: #2A2440; } .ot .ar-body .ig-cmp tr.is-ask td { color: #15102A; font-weight: 900; } .ot .ar-body .ig-cmp tr.is-ours > * { background: #F4F0FF; } .ot .ar-body .ig-cmp tr.is-ours td { color: #3F27B8; font-weight: 900; } .ot .ar-body .ig-cmp tr.is-ours th { color: var(--violet-deep); } .ot .ar-body .ig-cmp .ig-foot { background: transparent; padding: 6px 4px 0; text-align: right; color: #4A4466; } @media (max-width: 599px) { .ot .ar-body .ig-cmp thead th { font-size: 16px; } .ot .ar-body .ig-cmp td { font-size: 15px; } .ot .ar-body .ig-cmp tbody th { font-size: 15px; padding-left: 10px; } .ot .ar-body .ig-cmp .ig-foot { text-align: left; } } /* price ranges (one series: a bar from the low to the high end, on one axis from zero) */ .ot .ar-body .ig-range__box { --name: 11em; --val: 7.5em; padding: 18px 20px 16px; border-radius: 20px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-range__axis { display: grid; grid-template-columns: var(--name) minmax(0, 1fr) var(--val); column-gap: 14px; margin-bottom: 4px; } .ot .ar-body .ig-range__ticks { grid-column: 2; position: relative; height: 22px; } .ot .ar-body .ig-range__ticks i { position: absolute; top: 0; font-style: normal; font-size: 13px; font-weight: 700; line-height: 1.6; color: #4A4466; white-space: nowrap; transform: translateX(-50%); } .ot .ar-body .ig-range__ticks i:nth-child(1) { left: 0; transform: none; } .ot .ar-body .ig-range__ticks i:nth-child(2) { left: 33.333%; } .ot .ar-body .ig-range__ticks i:nth-child(3) { left: 66.667%; } .ot .ar-body .ig-range__ticks i:nth-child(4) { left: 100%; transform: translateX(-100%); } .ot .ar-body .ig-range ol { display: grid; gap: 0; } .ot .ar-body .ig-range li { display: grid; grid-template-columns: var(--name) minmax(0, 1fr) var(--val); column-gap: 14px; align-items: center; padding: 8px 0; border-top: 1px solid #F0EDF7; } .ot .ar-body .ig-range__name { font-size: 15px; font-weight: 900; line-height: 1.4; color: #15102A; } .ot .ar-body .ig-range__name span { display: block; font-size: 13px; font-weight: 700; color: #4A4466; } .ot .ar-body .ig-range__track { position: relative; display: block; height: 14px; background: linear-gradient(90deg, transparent calc(33.333% - 1px), #E2DDF0 calc(33.333% - 1px), #E2DDF0 33.333%, transparent 33.333%, transparent calc(66.667% - 1px), #E2DDF0 calc(66.667% - 1px), #E2DDF0 66.667%, transparent 66.667%); } .ot .ar-body .ig-range__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #ECE8F6; } .ot .ar-body .ig-range__bar { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--violet-ui); } .ot .ar-body .ig-range .is-3-5 .ig-range__bar { left: 20%; width: 13.333%; } .ot .ar-body .ig-range .is-5-7 .ig-range__bar { left: 33.333%; width: 13.333%; } .ot .ar-body .ig-range .is-5-10 .ig-range__bar { left: 33.333%; width: 33.333%; } .ot .ar-body .ig-range .is-7-10 .ig-range__bar { left: 46.667%; width: 20%; } .ot .ar-body .ig-range .is-10-15 .ig-range__bar { left: 66.667%; width: 33.333%; } .ot .ar-body .ig-range__v { font-size: 16px; font-weight: 900; line-height: 1.4; color: #15102A; text-align: right; white-space: nowrap; } .ot .ar-body .ig-range .ig-foot { background: transparent; padding: 6px 4px 0; text-align: right; color: #4A4466; } @media (max-width: 599px) { .ot .ar-body .ig-range__box { padding: 12px 14px 10px; } .ot .ar-body .ig-range__axis { grid-template-columns: minmax(0, 1fr); } .ot .ar-body .ig-range__ticks { grid-column: 1; } .ot .ar-body .ig-range li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name v" "track track"; row-gap: 6px; padding: 8px 0 10px; } .ot .ar-body .ig-range__name { grid-area: name; } .ot .ar-body .ig-range__name span { display: inline; margin-left: 6px; } .ot .ar-body .ig-range__track { grid-area: track; } .ot .ar-body .ig-range__v { grid-area: v; font-size: 15px; } .ot .ar-body .ig-range .ig-foot { text-align: left; } } /* six steps side by side (inside the figure only, on phones it slides) */ @media (max-width: 659px) { .ot .ar-body .ig-flow--6 { --track: 720px; } .ot .ar-body .ig-steps--3 { --track: 0px; } } .ot .ar-body .ig-flow--6 ol { --g: 24px; } .ot .ar-body .ig-flow--6 .ig-who { margin-bottom: 6px; } .ot .ar-body .ig-flow li.is-out .ig-who { background: rgba(255, 255, 255, .92); color: #8C1A5C; } .ot .ar-body .ig-steps--3 .ig-d { color: #3F27B8; } @media (max-width: 420px) { .ot .ar-body .ig-steps--3 ol { --g: 18px; } .ot .ar-body .ig-steps--3 .ig-t { font-size: 16px; } .ot .ar-body .ig-steps--3 .ig-d { font-size: 14px; } } /* checklists in two columns on wider screens */ @media (min-width: 640px) { .ot .ar-body .ig-checks--2col ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ot .ar-body .ig-checks--2col li + li { margin-top: 0; } } .ot .ar-body .ig-checks li { font-size: 16px; } /* a note inside the chat (not a bubble) */ .ot .ar-body .ig-chat .ig-chat__note { justify-items: center; } .ot .ar-body .ig-chat .ig-chat__note p { max-width: 100%; padding: 8px 16px; border-radius: 16px; background: rgba(255, 255, 255, .8); font-size: 14px; font-weight: 700; line-height: 1.7; color: #2A1F66; } .ot .ar-body .ig-chat .ig-chat__note a { color: var(--violet-deep); } /* the 3 plans side by side (same table look as the 7 points) */ .ot .ar-body .ig-cmp--plans thead th:first-child { width: 15%; } .ot .ar-body .ig-cmp--plans thead th > span:not(.ot-sr) { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; line-height: 1.5; color: #3F27B8; } .ot .ar-body .ig-cmp--plans td > span { display: block; font-size: 13px; font-weight: 700; color: #4A4466; } .ot .ar-body .ig-cmp--plans tr.is-small td { font-size: 15px; font-weight: 700; line-height: 1.6; text-align: left; padding-inline: 12px; } @media (min-width: 900px) { .ot .ar-body .ig-cmp--plans { margin-inline: 0; } } @media (max-width: 659px) { .ot .ar-body .ig-cmp--plans { --track: 560px; } } /* tablets: the 7 points table keeps its column widths and slides inside the figure */ @media (min-width: 660px) and (max-width: 899px) { .ot .ar-body .ig-cmp:not(.ig-cmp--plans) { --track: 800px; } } /* ---------- rw02 (video-production-outsourcing-process) ---------- */ /* seven steps side by side with a way back from 6 to 5 */ @media (max-width: 899px) { .ot .ar-body .ig-flow--7 { --track: 820px; } } .ot .ar-body .ig-flow--7 ol { --g: 22px; } .ot .ar-body .ig-flow--7 .ig-who, .ot .ar-body .ig-flow--6 .ig-who { margin-bottom: 6px; } .ot .ar-body .ig-flow--7 .ig-t { font-size: 16px; } .ot .ar-body .ig-flow .ig-loop { --from: 64.3%; --to: 21.4%; color: var(--violet-deep); font-size: 15px; } /* six things to decide (side by side; 3 + 3 on phones) */ .ot .ar-body .ig-six ol { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; counter-reset: s6; } .ot .ar-body .ig-six li { counter-increment: s6; display: flex; flex-direction: column; align-items: center; padding: 14px 4px; border-radius: 18px; background: #fff; border: 1px solid #E2DDF0; text-align: center; } .ot .ar-body .ig-six li::before { content: counter(s6); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--violet-ui), var(--magenta)); color: #fff; font-family: var(--f-display); font-size: 16px; font-weight: 900; line-height: 1; } .ot .ar-body .ig-six li:first-child { background: linear-gradient(135deg, #3B1F9E 0%, #5B3EE6 55%, #A3206E 100%); border: 0; } .ot .ar-body .ig-six li:first-child::before { background: #fff; color: #A3206E; } .ot .ar-body .ig-six li:first-child .ig-t { color: #fff; } .ot .ar-body .ig-six li:first-child .ig-d { color: rgba(255, 255, 255, .92); } .ot .ar-body .ig-six .ig-t { font-size: 18px; line-height: 1.35; } .ot .ar-body .ig-six .ig-d { margin-top: 4px; font-size: 13px; font-weight: 700; color: #4A4466; } @media (max-width: 659px) { .ot .ar-body .ig-six ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .ot .ar-body .ig-six .ig-t { font-size: 17px; } } /* conditions to match (a wide grid of chips) */ .ot .ar-body .ig-conds ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .ot .ar-body .ig-conds li { display: grid; place-items: center; min-height: 56px; padding: 8px 6px; border-radius: 14px; background: #fff; border: 1.5px solid #B3A8DE; color: #15102A; font-size: 17px; font-weight: 900; line-height: 1.35; text-align: center; } @media (max-width: 659px) { .ot .ar-body .ig-conds ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .ot .ar-body .ig-conds li { font-size: 15px; min-height: 50px; } } /* tables with fewer columns */ @media (max-width: 659px) { .ot .ar-body .ig-cmp--who { --track: 600px; } .ot .ar-body .ig-cmp--cost { --track: 680px; } } @media (min-width: 660px) and (max-width: 899px) { .ot .ar-body .ig-cmp--who, .ot .ar-body .ig-cmp--cost { --track: 0px; } } .ot .ar-body .ig-cmp--who td, .ot .ar-body .ig-cmp--cost td { font-size: 15px; line-height: 1.55; } .ot .ar-body .ig-cmp--steps td { font-size: 15px; } /* ---------- wide figures stay inside the text column; rows of cards slide (2026-10-27) ---------- The site's article column clips anything wider than itself, so no figure sticks out of the column (no negative margin-inline). On PC the columns shrink to fit (minmax(0, 1fr), smaller gaps, clamp() type); only on narrow screens does a figure slide inside itself (.ig-x). Rows of cards (.ig-gal) are carousels: swipe / drag / shift + wheel / ← → / the ‹ › buttons, snapping one card at a time, with a counter. */ @media (min-width: 720px) { .ot .ar-body .ig-evolve { padding-inline: 12px; } .ot .ar-body .ig-evolve ol { --g: 24px; } .ot .ar-body .ig-evolve .ig-ava { width: 32px; height: 32px; } .ot .ar-body .ig-evolve__ask, .ot .ar-body .ig-evolve__ans { gap: 6px; } .ot .ar-body .ig-evolve__bubble { padding: 8px 12px; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.55; } .ot .ar-body .ig-evolve__card { padding: 6px; } .ot .ar-body .ig-evolve li:not(:last-child) .ig-evolve__ans::after { right: calc(var(--g) / -2 - 5px); border-top-width: 6px; border-bottom-width: 6px; border-left-width: 9px; margin-top: -6px; } } @media (min-width: 900px) { .ot .ar-body .ig-plans thead th { font-size: 17px; padding-inline: 4px; } .ot .ar-body .ig-seven ol { --g: 8px; } .ot .ar-body .ig-seven .ig-t { font-size: clamp(16px, 1.35vw, 19px); } .ot .ar-body .ig-cmp th, .ot .ar-body .ig-cmp td { padding-inline: 4px; } .ot .ar-body .ig-cmp thead th { font-size: clamp(15px, 1.25vw, 18px); } .ot .ar-body .ig-cmp td { font-size: clamp(14px, 1.1vw, 16px); } .ot .ar-body .ig-cmp tbody th { padding-left: 10px; font-size: clamp(14px, 1.1vw, 16px); } .ot .ar-body .ig-range__box { --name: 10em; --val: 7em; padding-inline: 16px; } .ot .ar-body .ig-flow--6 ol { --g: 16px; } .ot .ar-body .ig-flow--7 ol { --g: 12px; } .ot .ar-body .ig-flow--7 .ig-t { font-size: clamp(14px, 1.1vw, 16px); } } /* the sample videos: two carousels (16:9 and 9:16) */ .ot .ar-body .ig-gal ul { --gap: 12px; display: flex; gap: var(--gap); margin: -4px 0; padding: 4px 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0 48px; scrollbar-width: none; } .ot .ar-body .ig-gal ul::-webkit-scrollbar { display: none; } .ot .ar-body .ig-gal li { flex: none; scroll-snap-align: start; } .ot .ar-body .ig-gal__wide > li { width: calc((100% - var(--gap) * 2) / 2.6); } .ot .ar-body .ig-gal__tall > li { width: calc((100% - var(--gap) * 3) / 4); } .ot .ar-body .ig-gal .hs-bar + .ig-h { margin-top: 18px; } @media (max-width: 659px) { .ot .ar-body .ig-gal ul { --gap: 10px; } .ot .ar-body .ig-gal__wide > li { width: 82%; } .ot .ar-body .ig-gal__tall > li { width: 46%; } } /* slider parts (made by the script): edge fade, ‹ › buttons, "1–2 / 6" */ .ot .ar-body .hs-cards.is-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), rgba(0, 0, 0, .2)); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), rgba(0, 0, 0, .2)); } .ot .ar-body .hs-cards.is-l { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .2), #000 44px); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .2), #000 44px); } .ot .ar-body .hs-cards.is-l.is-r { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .2), #000 44px, #000 calc(100% - 44px), rgba(0, 0, 0, .2)); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .2), #000 44px, #000 calc(100% - 44px), rgba(0, 0, 0, .2)); } .ot .ar-body .hs-cards:focus-visible { outline: 3px solid var(--violet-deep); outline-offset: -3px; } @media (hover: hover) and (pointer: fine) { .ot .ar-body .hs-on { cursor: grab; } .ot .ar-body .hs-on.is-drag { cursor: grabbing; scroll-snap-type: none; -webkit-user-select: none; user-select: none; } } .ot .ar-body .hs-bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; } .ot .ar-body .hs-bar[hidden] { display: none; } .ot .ar-body .hs-count { margin-right: auto; font-family: var(--f-mono); font-size: 14px; font-weight: 700; letter-spacing: .04em; line-height: 1.5; color: #4A4466; } .ot .ar-body .hs-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid #B3A8DE; border-radius: 50%; background: #fff; color: var(--violet-deep); font: 900 22px/1 var(--f-body); cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .ot .ar-body .hs-btn:hover:not(:disabled) { background: var(--violet-ui); border-color: var(--violet-ui); color: #fff; } .ot .ar-body .hs-btn:focus-visible { outline: 3px solid #C2368A; outline-offset: 2px; } .ot .ar-body .hs-btn:disabled { opacity: .45; cursor: default; } /* a figure that slides inside itself (tables and steps on narrow screens): buttons only for a mouse */ .ot .ar-body .ig-x + .hs-bar { margin-top: 8px; } @media (hover: none), (pointer: coarse) { .ot .ar-body .ig-x + .hs-bar { display: none; } } .ot .ar-body .ig-hiw .ig-x + .hs-bar .hs-btn { border-color: rgba(201, 192, 242, .5); background: transparent; color: #fff; } .ot .ar-body .ig-hiw .ig-x + .hs-bar .hs-count { color: #C9C0F2; } /* the YouTube card on phones: the picture stays in its own column (the text is not pushed out of the card) */ @media (max-width: 639px) { .ot .ar-body .ig-yt .ig-yt__img { aspect-ratio: auto; min-width: 0; } } /* ---------- rw03 (書き直し 3〜5本目、2026-10-28): 追加の図。どれも記事の列の中に収め、PC では縮めて全部見せ、659px 以下だけ図の中で横に動く ---------- */ /* アイキャッチ（サイトでは本文の上に出る。プレビューでも同じ所に出す。本文 .ar-body の外なので取り込みでは写らない） */ .ot .ar-thumb { max-width: 760px; margin: 0 auto 8px; padding-inline: var(--gut); } .ot .ar-thumb img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 18px 40px -24px rgba(21, 16, 42, .45); } /* 実物の動画のコマを、時間の順に横に並べる */ .ot .ar-body .ig-strip ol { --g: 8px; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: var(--g); margin: 0; padding: 2px; list-style: none; } .ot .ar-body .ig-strip li { position: relative; min-width: 0; padding: 6px 6px 10px; border-radius: 16px; background: #fff; border: 1px solid #E2DDF0; text-align: center; } .ot .ar-body .ig-strip li img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; background: #0c0a1c; } .ot .ar-body .ig-strip .ig-k { margin-top: 8px; font-family: var(--f-mono); font-size: 13px; font-weight: 700; letter-spacing: .02em; line-height: 1.4; color: #4A4466; } .ot .ar-body .ig-strip .ig-t { margin-top: 2px; font-size: clamp(14px, 1.25vw, 17px); font-weight: 900; line-height: 1.45; color: #15102A; } .ot .ar-body .ig-strip li.is-key { border-color: #F6B9D3; background: linear-gradient(180deg, #FFF1F7, #fff 60%); } .ot .ar-body .ig-strip li.is-key .ig-t { color: #A3206E; } .ot .ar-body .ig-strip li:not(:last-child)::after { content: ""; position: absolute; top: 38%; right: calc(var(--g) / -2 - 5px); z-index: 1; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid var(--violet-ui); } .ot .ar-body .ig-strip--4 ol { --n: 4; --g: 14px; } .ot .ar-body .ig-strip--5 ol { --n: 5; --g: 10px; } @media (max-width: 659px) { .ot .ar-body .ig-strip { --track: 600px; } .ot .ar-body .ig-strip--4 { --track: 460px; } .ot .ar-body .ig-strip--5 { --track: 540px; } } /* 2枚の写真を左右で見比べる（前と後） */ .ot .ar-body .ig-ba > .ig-x > ul, .ot .ar-body .ig-ba > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 2px; list-style: none; } .ot .ar-body .ig-ba li { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 10px 10px 14px; border-radius: 18px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-ba li.is-ng { border-color: #F6B9D3; } .ot .ar-body .ig-ba li.is-ok { border-color: #9EE7D2; box-shadow: 0 0 0 2px rgba(61, 219, 176, .25); } .ot .ar-body .ig-ba .ig-ba__img { display: grid; place-items: center; flex: 1; min-height: 0; border-radius: 12px; background: #F3F1FA; overflow: hidden; } .ot .ar-body .ig-ba .ig-ba__img img { display: block; width: 100%; height: auto; } .ot .ar-body .ig-ba .ig-k { display: inline-block; align-self: flex-start; margin-bottom: 8px; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 900; line-height: 1.6; color: #fff; background: #C2368A; } .ot .ar-body .ig-ba li.is-ok .ig-k { background: #0A6E51; } .ot .ar-body .ig-ba .ig-t { margin-top: 10px; font-size: clamp(15px, 1.4vw, 18px); font-weight: 900; line-height: 1.5; color: #15102A; } .ot .ar-body .ig-ba .ig-d { margin-top: 2px; font-size: 14px; font-weight: 700; line-height: 1.6; color: #4A4466; } @media (max-width: 659px) { .ot .ar-body .ig-ba { --track: 520px; } } /* 実際の画面のスクリーンショット（自分で撮った物） */ .ot .ar-body .ig-shot figure { margin: 0; } .ot .ar-body .ig-shot img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid #E2DDF0; box-shadow: 0 16px 36px -24px rgba(21, 16, 42, .5); } .ot .ar-body .ig-shot figcaption { margin-top: 10px; font-size: 14px; font-weight: 700; line-height: 1.7; color: #4A4466; } /* 横に動かすのは 659px 以下だけ（タブレット 660〜899px でも本文の幅に縮めて全部見せる） */ @media (min-width: 660px) { .ot .ar-body .ig.ig-cmp, .ot .ar-body .ig.ig-flow--7 { --track: 0px; } } /* 4枚の札（PC は横に4つ、スマホは2×2） */ .ot .ar-body .ig-cards3.ig-cards4 ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 599px) { .ot .ar-body .ig-cards3.ig-cards4 ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 3段の見比べ（文章だけ → シート → 動画 など）。写真の枠は同じ 3:4、矢印でつなぐ */ .ot .ar-body .ig-ba.ig-ba--3 > .ig-x > ul { --g: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); } .ot .ar-body .ig-ba--3 .ig-ba__img { flex: none; aspect-ratio: 3 / 4; background: #0c0a1c; } .ot .ar-body .ig-ba--3 .ig-ba__img img { width: 100%; height: 100%; object-fit: contain; } .ot .ar-body .ig-ba--3 li:not(:last-child)::after { content: ""; position: absolute; top: 42%; right: calc(var(--g) / -2 - 6px); z-index: 1; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid var(--violet-ui); } @media (max-width: 659px) { .ot .ar-body .ig-ba.ig-ba--3 { --track: 600px; } .ot .ar-body .ig-ba.ig-ba--3 > .ig-x > ul { --g: 16px; } } /* サンプルの並び：PC・タブレットでは横の動画も本文の幅に収める（2列。横に動くのは 659px 以下だけ） */ @media (min-width: 660px) { .ot .ar-body .ig-gal--fit ul.ig-gal__wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; } .ot .ar-body .ig-gal--fit ul.ig-gal__wide > li { width: auto; } } /* 5段の見比べ（1回目・2回目・3回目 → シート → 動画） */ .ot .ar-body .ig-ba.ig-ba--5 > .ig-x > ul { --g: 16px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--g); } .ot .ar-body .ig-ba--5 li { padding: 8px 8px 12px; } .ot .ar-body .ig-ba--5 .ig-ba__img { flex: none; aspect-ratio: 3 / 4; background: #0c0a1c; } .ot .ar-body .ig-ba--5 .ig-ba__img img { width: 100%; height: 100%; object-fit: contain; } .ot .ar-body .ig-ba--5 .ig-k { font-size: 12px; padding: 1px 8px; } .ot .ar-body .ig-ba--5 .ig-t { font-size: clamp(14px, 1.2vw, 16px); } .ot .ar-body .ig-ba--5 li:nth-child(3)::after { content: ""; position: absolute; top: 46%; right: calc(var(--g) / -2 - 6px); z-index: 1; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid var(--violet-ui); } .ot .ar-body .ig-ba--5 li:nth-child(4)::after { content: ""; position: absolute; top: 46%; right: calc(var(--g) / -2 - 6px); z-index: 1; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid var(--violet-ui); } @media (max-width: 659px) { .ot .ar-body .ig-ba.ig-ba--5 { --track: 640px; } .ot .ar-body .ig-ba.ig-ba--5 > .ig-x > ul { --g: 12px; } } /* 「1回目 → 仕上げ」の2枚：スマホでも縦に積まず、横に並べて指ですべらせる */ @media (max-width: 659px) { .ot .ar-body .ig-recs { --track: 560px; } } .ot .ar-body .ig-recs > .ig-x > ul { padding: 2px; } /* 秒の配分（15秒・30秒）。行ごとに長さの比で区切る */ .ot .ar-body .ig-tl__in { display: grid; gap: 14px; padding: 14px; border-radius: 20px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-tl__row { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); align-items: center; gap: 10px; } .ot .ar-body .ig-tl__k { font-family: var(--f-display); font-size: 18px; font-weight: 900; line-height: 1.2; color: #15102A; } .ot .ar-body .ig-tl__bar { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .ot .ar-body .ig-tl__bar--15 { grid-template-columns: minmax(84px, 2fr) minmax(0, 8fr) minmax(0, 5fr); } .ot .ar-body .ig-tl__bar--30 { grid-template-columns: minmax(84px, 3fr) minmax(0, 15fr) minmax(0, 7fr) minmax(0, 5fr); } .ot .ar-body .ig-tl__bar li { min-width: 0; padding: 10px 8px; border-radius: 12px; background: #ECE7FF; text-align: center; } .ot .ar-body .ig-tl__bar li:first-child { background: #FFE3EF; } .ot .ar-body .ig-tl__bar li:last-child { background: linear-gradient(135deg, #3B1F9E, #5B3EE6 60%, #A3206E); } .ot .ar-body .ig-tl__bar li:last-child .ig-t, .ot .ar-body .ig-tl__bar li:last-child .ig-k { color: #fff; } .ot .ar-body .ig-tl__bar .ig-k { display: block; font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: 0; line-height: 1.4; color: #4A4466; } .ot .ar-body .ig-tl__bar .ig-t { margin-top: 2px; font-size: clamp(14px, 1.2vw, 16px); font-weight: 900; line-height: 1.4; color: #15102A; } @media (max-width: 659px) { .ot .ar-body .ig-tl { --track: 600px; } } /* 2026-10-28 朝：画像を足す（伊藤さん「記事は画像挿入とかしてほしいよね」） */ .ot .ar-body .ig-strip--3 ol { --n: 3; --g: 16px; } .ot .ar-body .ig-strip--3 { max-width: 560px; margin-inline: auto; } @media (max-width: 659px) { .ot .ar-body .ig-strip.ig-strip--3 { --track: 0px; } .ot .ar-body .ig-strip--3 ol { --g: 10px; } } /* 横の動画のコマを2×2で */ .ot .ar-body .ig-grid2 ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .ot .ar-body .ig-grid2 li { min-width: 0; padding: 8px 8px 12px; border-radius: 16px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-grid2 img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: #0c0a1c; } .ot .ar-body .ig-grid2 .ig-k { margin-top: 8px; font-size: 13px; font-weight: 900; color: #A3206E; } .ot .ar-body .ig-grid2 .ig-t { margin-top: 2px; font-size: clamp(14px, 1.3vw, 16px); font-weight: 900; line-height: 1.45; color: #15102A; } @media (max-width: 599px) { .ot .ar-body .ig-grid2 ul { gap: 8px; } .ot .ar-body .ig-grid2 li { padding: 6px 6px 10px; } .ot .ar-body .ig-grid2 .ig-t { font-size: 14px; } } /* 横と縦の2枚（横 3：縦 1 の幅で、高さをそろえる） */ .ot .ar-body .ig-pair ul { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 12px; align-items: end; margin: 0; padding: 0; list-style: none; } .ot .ar-body .ig-pair.ig-pair--tw ul { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } .ot .ar-body .ig-pair li { min-width: 0; } .ot .ar-body .ig-pair img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid #E2DDF0; background: #0c0a1c; } .ot .ar-body .ig-pair .ig-k { margin-top: 6px; font-size: 13px; font-weight: 900; color: #4A4466; text-align: center; } /* 実際の画面のスクショを2枚並べる（同じ形の物） */ .ot .ar-body .ig-ba.ig-ba--shots .ig-ba__img { flex: none; background: transparent; } .ot .ar-body .ig-ba.ig-ba--shots .ig-ba__img img { border-radius: 10px; border: 1px solid #E2DDF0; } .ot .ar-body .ig-ba--shots li { padding: 8px 8px 12px; } /* 縦長の道具の画面（スマホの幅の画面）を、文と横に並べる */ .ot .ar-body .ig-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; } .ot .ar-body .ig-side figure { margin: 0; } .ot .ar-body .ig-side img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid #E2DDF0; background: #0c0a1c; } .ot .ar-body .ig-side figcaption { margin-top: 6px; font-size: 13px; font-weight: 700; line-height: 1.6; color: #4A4466; } .ot .ar-body .ig-strip--3 li::after, .ot .ar-body .ig-strip--2 li::after { content: none; } .ot .ar-body .ig-strip--2 ol { --n: 2; --g: 16px; } .ot .ar-body .ig-strip--2 { max-width: 400px; margin-inline: auto; } @media (max-width: 659px) { .ot .ar-body .ig-strip.ig-strip--2 { --track: 0px; } } .ot .ar-body .ig-shot--narrow figure { max-width: 520px; margin-inline: auto; } /* 道具の画面など、縦長の画面を横に並べる（スマホは図の中で横に動く） */ .ot .ar-body .ig-row > .ig-x > ul { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 14px; align-items: start; margin: 0; padding: 2px; list-style: none; } .ot .ar-body .ig-row li { min-width: 0; padding: 8px 8px 12px; border-radius: 16px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-row img { display: block; width: 100%; height: auto; border-radius: 10px; background: #0c0a1c; } .ot .ar-body .ig-row .ig-k { margin-top: 8px; font-size: 13px; font-weight: 900; color: #A3206E; } .ot .ar-body .ig-row .ig-t { margin-top: 2px; font-size: clamp(14px, 1.25vw, 16px); font-weight: 900; line-height: 1.45; color: #15102A; } @media (max-width: 659px) { .ot .ar-body .ig-row { --track: 560px; } } .ot .ar-body .ig-strip--3 li:not(:last-child)::after, .ot .ar-body .ig-strip--2 li:not(:last-child)::after { content: none; } .ot .ar-body .ig.ig-strip--3, .ot .ar-body .ig.ig-strip--2 { margin-left: auto; margin-right: auto; } /* 2026-10-29：LP の画面はスマホの幅（390・2倍）で撮った物にした（960 の幅の画面はスマホで字が 4〜6px になっていた）。 PC では 380px までに収める（字は LP のスマホと同じくらい）。スマホでは本文の幅いっぱい（14px の字が 13px くらい） */ .ot .ar-body .ig-shot--phone figure { max-width: 380px; margin-inline: auto; } /* LP の画面を2枚並べる図：スマホでは1枚ずつ本文の幅で見せ、横にすべらせて次の1枚（枠を外して画面を大きく） */ @media (max-width: 659px) { .ot .ar-body .ig-ba.ig-ba--shots { --track: calc(200% + 12px); } .ot .ar-body .ig-ba.ig-ba--shots > .ig-x { scroll-snap-type: x mandatory; } .ot .ar-body .ig-ba.ig-ba--shots > .ig-x > ul { gap: 12px; padding: 0; } .ot .ar-body .ig-ba.ig-ba--shots li { padding: 0; border: 0; background: transparent; scroll-snap-align: start; } } /* ---------- aiv（AI動画の作り方・2026-10-29）：10/29 の下書き（rw07・rw08）で足した図と、この記事で足した図。どれも記事の列の中に収め、PC は縮めて全部見せ、659px 以下だけ図の中で横に動く ---------- */ /* スマホの幅（390・2倍）で撮った画面：PC でも 390px より大きくしない（字が元の大きさで読める） */ .ot .ar-body .ig-shot.ig-shot--sp img { max-width: 390px; margin-inline: auto; } .ot .ar-body .ig-shot.ig-shot--sp figcaption { max-width: 560px; margin-inline: auto; text-align: center; } /* 2〜4列の比べの表（rw07・rw08） */ .ot .ar-body .ig-cmp td small { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: #4A4466; } @media (max-width: 659px) { .ot .ar-body .ig-cmp.ig-cmp--3 { --track: 560px; } .ot .ar-body .ig-cmp.ig-cmp--4 { --track: 700px; } } @media (max-width: 659px) { .ot .ar-body .ig-cmp.ig-cmp--fit { --track: 0px; } .ot .ar-body .ig-cmp--fit thead th:first-child { width: 26%; } .ot .ar-body .ig-cmp--fit tbody th { padding-left: 8px; font-size: 14px; } .ot .ar-body .ig-cmp--fit th, .ot .ar-body .ig-cmp--fit td { padding: 12px 4px; } .ot .ar-body .ig-cmp--fit td { font-size: 14px; line-height: 1.5; } .ot .ar-body .ig-cmp--fit thead th { font-size: 15px; } } /* 出典の表など：スマホで列からはみ出さないよう、字の途中でも折り返す（rw07） */ .ot .ar-tbl td { overflow-wrap: anywhere; } @media (max-width: 659px) { .ot .ar-body .ar-tbl:not(.ar-tbl--wide) table { table-layout: fixed; } .ot .ar-body .ar-tbl:not(.ar-tbl--wide) thead th:first-child { width: 32%; } .ot .ar-body .ar-tbl:not(.ar-tbl--wide) th, .ot .ar-body .ar-tbl:not(.ar-tbl--wide) td { padding: 10px 10px; } } /* PC・タブレット（660px〜）：横の動画は縮めて 3列で全部見せる。スマホはカルーセル（rw08） */ @media (min-width: 660px) { .ot .ar-body .ig-gal.ig-gal--grid .ig-gal__wide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; } .ot .ar-body .ig-gal.ig-gal--grid .ig-gal__wide > li { width: auto; } } /* 7つの手順（How it works を7列に）。スマホは図の中で横に動く */ .ot .ar-body .ig-hiw--7 ol { grid-template-columns: repeat(7, minmax(0, 1fr)); } .ot .ar-body .ig-hiw--7 { --g: 14px; } .ot .ar-body .ig-hiw--7 li { padding: 18px 2px 14px; } .ot .ar-body .ig-hiw--7 .ig-icon { width: 44px; height: 44px; } .ot .ar-body .ig-hiw--7 li:not(:last-child)::after { top: 34px; } .ot .ar-body .ig-hiw--7 .ig-t { font-size: 16px; } .ot .ar-body .ig-hiw--7 .ig-tool { margin-top: 4px; font-size: 12px; font-weight: 700; line-height: 1.45; color: #C9C0F2; } .ot .ar-body .ig-hiw--7 .ig-loop { --from: calc(7.1% - .43 * var(--g)); --to: calc(7.1% - .43 * var(--g)); } @media (max-width: 659px) { .ot .ar-body .ig-hiw--7 { --track: 760px; --g: 16px; } } /* 自社の YouTube（横の本編）：押すまで YouTube を読まない。押すとその場で再生。JavaScript が無いときは YouTube を開く */ .ot .ar-body .ig-ytp ul { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; margin: 0; padding: 2px; list-style: none; } .ot .ar-body .ig-ytp--1 ul { --n: 1; max-width: 560px; margin-inline: auto; } .ot .ar-body .ig-ytp li { min-width: 0; padding: 8px 8px 12px; border-radius: 18px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-ytp__a, .ot .ar-body .ig-ytp__f { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 0; border-radius: 12px; background: #120D24; } .ot .ar-body .ig-ytp__a img { display: block; width: 100%; height: 100%; object-fit: cover; } .ot .ar-body .ig-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 6px rgba(255, 79, 154, .3); transition: transform .3s var(--ease); } .ot .ar-body .ig-play::after { content: ""; margin-left: 5px; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; } .ot .ar-body .ig-ytp__a:hover .ig-play, .ot .ar-body .ig-shorts__a:hover .ig-play { transform: scale(1.08); } .ot .ar-body .ig-ytp__a:focus-visible, .ot .ar-body .ig-shorts__a:focus-visible { outline: 3px solid var(--violet-deep); outline-offset: 3px; } .ot .ar-body .ig-ytp .ig-k, .ot .ar-body .ig-shorts .ig-k { margin: 10px 4px 0; font-size: 13px; font-weight: 900; line-height: 1.5; color: #A3206E; } .ot .ar-body .ig-ytp .ig-t, .ot .ar-body .ig-shorts .ig-t { margin: 2px 4px 0; font-size: 15px; font-weight: 900; line-height: 1.5; color: #15102A; } .ot .ar-body .ig-ytp .ig-d, .ot .ar-body .ig-shorts .ig-d { margin: 4px 4px 0; font-size: 14px; font-weight: 700; line-height: 1.6; color: #4A4466; } @media (max-width: 659px) { .ot .ar-body .ig-ytp:not(.ig-ytp--1) { --track: 720px; } .ot .ar-body .ig-ytp .ig-t { font-size: 14px; } .ot .ar-body .ig-ytp .ig-d { font-size: 13px; } } /* 自社の YouTube ショート（縦）。PC は4本を横に、スマホは2×2 */ .ot .ar-body .ig-shorts ul { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; margin: 0 auto; padding: 0; list-style: none; } .ot .ar-body .ig-shorts--2 ul { --n: 2; max-width: 480px; } .ot .ar-body .ig-shorts li { min-width: 0; padding: 8px 8px 12px; border-radius: 18px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-shorts__a, .ot .ar-body .ig-shorts__f { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border: 0; border-radius: 12px; background: #120D24; } .ot .ar-body .ig-shorts__a img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 659px) { .ot .ar-body .ig-shorts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ot .ar-body .ig-shorts li { padding: 6px 6px 10px; } .ot .ar-body .ig-shorts .ig-t { font-size: 14px; } .ot .ar-body .ig-shorts .ig-d { font-size: 13px; } .ot .ar-body .ig-play { width: 46px; height: 46px; margin: -23px 0 0 -23px; } .ot .ar-body .ig-play::after { border-left-width: 15px; border-top-width: 9px; border-bottom-width: 9px; margin-left: 4px; } } /* 3種類の AI 動画（写真の枠は同じ 4:3）。スマホは図の中で横に動く */ .ot .ar-body .ig-kinds ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 2px; list-style: none; } .ot .ar-body .ig-kinds li { display: flex; flex-direction: column; min-width: 0; padding: 8px 8px 14px; border-radius: 18px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-kinds__img { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: #120D24; } .ot .ar-body .ig-kinds__img img { display: block; width: 100%; height: 100%; object-fit: cover; } .ot .ar-body .ig-kinds__img img.is-tall { width: auto; height: 100%; object-fit: contain; } .ot .ar-body .ig-kinds .ig-k { margin: 10px 4px 0; color: var(--violet-deep); } .ot .ar-body .ig-kinds .ig-t { margin: 2px 4px 0; font-size: 18px; } .ot .ar-body .ig-kinds .ig-d { margin: 2px 4px 0; font-size: 14px; font-weight: 700; color: #4A4466; line-height: 1.6; } @media (max-width: 659px) { .ot .ar-body .ig-kinds { --track: 600px; } .ot .ar-body .ig-kinds .ig-t { font-size: 16px; } } /* 2枚・3枚の実物を横に並べて見比べる（ig-ba の写真を 16:9 で）*/ .ot .ar-body .ig-ba--wide .ig-ba__img { flex: none; aspect-ratio: 16 / 9; background: #0c0a1c; } .ot .ar-body .ig-ba--wide .ig-ba__img img { width: 100%; height: 100%; object-fit: cover; } .ot .ar-body .ig-ba--wide li:not(:last-child)::after { content: ""; position: absolute; top: 36%; right: -13px; z-index: 1; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid var(--violet-ui); } .ot .ar-body .ig-ba .ig-k.is-plain { background: #5B3EE6; } /* 音なしの短いくり返し（D16）：画面に入ったら再生、出たら止める。ボタンで止める・動かす */ .ot .ar-body .ig-lvw { position: relative; } .ot .ar-body .ig-lvw video { display: block; } .ot .ar-body .ig-lv__btn { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(18, 13, 36, .72); color: #fff; cursor: pointer; } .ot .ar-body .ig-lv__btn[hidden] { display: none; } .ot .ar-body .ig-lv__btn::before { content: ""; margin-left: 4px; border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; } .ot .ar-body .ig-lv__btn.is-on::before { margin: 0; width: 14px; height: 16px; border: 0; border-left: 4px solid #fff; border-right: 4px solid #fff; box-sizing: border-box; } .ot .ar-body .ig-lv__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } /* シルビオの作り方：3回とも別人 → シート → 動画（3段）。写真の枠は同じ 3:4 */ .ot .ar-body .ig-sil > .ig-x > ol { --g: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); margin: 0; padding: 2px; list-style: none; } .ot .ar-body .ig-sil li { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 8px 8px 12px; border-radius: 18px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-sil li.is-ng { border-color: #F6B9D3; } .ot .ar-body .ig-sil li.is-ok { border-color: #9EE7D2; box-shadow: 0 0 0 2px rgba(61, 219, 176, .25); } .ot .ar-body .ig-sil__img { display: grid; place-items: center; gap: 3px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px; background: #F3F1FA; } .ot .ar-body .ig-sil__img img, .ot .ar-body .ig-sil__img video { display: block; width: 100%; height: 100%; object-fit: contain; } .ot .ar-body .ig-sil__img.is-three { grid-template-rows: repeat(3, minmax(0, 1fr)); place-items: stretch; padding: 3px; } .ot .ar-body .ig-sil__img.is-three img { object-fit: cover; border-radius: 8px; } .ot .ar-body .ig-sil__img.is-dark { background: #0c0a1c; } .ot .ar-body .ig-sil .ig-k { display: inline-block; align-self: flex-start; margin: 10px 2px 0; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 900; line-height: 1.6; color: #fff; background: #C2368A; } .ot .ar-body .ig-sil li.is-ok .ig-k { background: #0A6E51; } .ot .ar-body .ig-sil .ig-t { margin: 6px 4px 0; font-size: clamp(15px, 1.4vw, 17px); } .ot .ar-body .ig-sil .ig-d { margin: 2px 4px 0; font-size: 13px; font-weight: 700; color: #4A4466; line-height: 1.6; } .ot .ar-body .ig-sil li:not(:last-child)::after { content: ""; position: absolute; top: 42%; right: calc(var(--g) / -2 - 6px); z-index: 1; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid var(--violet-ui); } @media (max-width: 659px) { .ot .ar-body .ig-sil { --track: 600px; } .ot .ar-body .ig-sil > .ig-x > ol { --g: 16px; } } /* 書き出す前に見ること：札を横に並べる（スマホは2列） */ .ot .ar-body .ig-tags ul { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } .ot .ar-body .ig-tags--5 ul { --n: 5; } .ot .ar-body .ig-tags li { display: grid; place-items: center; min-height: 64px; padding: 10px 6px; border-radius: 14px; background: #fff; border: 1.5px solid #B3A8DE; font-size: 17px; font-weight: 900; line-height: 1.35; text-align: center; color: #15102A; } .ot .ar-body .ig-tags li.is-key { border-color: #F6B9D3; background: linear-gradient(180deg, #FFF1F7, #fff 70%); color: #A3206E; } .ot .ar-body .ig-tags li span { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; color: #4A4466; } @media (max-width: 659px) { .ot .ar-body .ig-tags ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ot .ar-body .ig-tags li { font-size: 16px; min-height: 58px; } .ot .ar-body .ig-tags--5 li:last-child { grid-column: 1 / -1; } } /* 無料と有料の表：道具の名前の下に使う手順 */ .ot .ar-body .ig-cmp--free thead th:first-child { width: 20%; } .ot .ar-body .ig-cmp--free td { font-size: 15px; text-align: left; padding-inline: 12px; line-height: 1.55; } .ot .ar-body .ig-cmp--free td.is-none { text-align: center; color: #5C5677; } @media (max-width: 659px) { .ot .ar-body .ig-cmp--free { --track: 0px; } .ot .ar-body .ig-cmp--free thead th:first-child { width: 27%; } .ot .ar-body .ig-cmp--free thead th { font-size: 14px; } .ot .ar-body .ig-cmp--free th, .ot .ar-body .ig-cmp--free td { padding: 11px 5px; } .ot .ar-body .ig-cmp--free tbody th { padding-left: 8px; font-size: 14px; } .ot .ar-body .ig-cmp--free td { font-size: 13px; line-height: 1.5; } } /* 2026-10-30 点検 NG1：スマホでも横に動かさず、列の中で折り返す（横に動かすと、左に留まる1列目が3列目の頭を隠した） */ /* スマホで始める流れ（6つ）。PC は横に全部、スマホは図の中で横に動く */ .ot .ar-body .ig-flow--phone ol { --g: 20px; } .ot .ar-body .ig-flow--phone .ig-t { font-size: 16px; } .ot .ar-body .ig-flow--phone .ig-d { margin-top: 4px; font-size: 13px; font-weight: 700; line-height: 1.5; color: #4A4466; } @media (max-width: 659px) { .ot .ar-body .ig-flow--phone { --track: 700px; } } @media (min-width: 660px) { .ot .ar-body .ig.ig-flow--phone, .ot .ar-body .ig.ig-flow--6 { --track: 0px; } } /* 3つだけの流れ：スマホでも横に動かさない（rw08） */ .ot .ar-body .ig-flow--3 { max-width: 600px; margin-inline: auto; } @media (max-width: 659px) { .ot .ar-body .ig-flow.ig-flow--3 { --track: 0px; } .ot .ar-body .ig-flow--3 ol { --g: 18px; } .ot .ar-body .ig-flow--3 li { padding-inline: 4px; } .ot .ar-body .ig-flow--3 .ig-t { font-size: 15px; } } /* 音なしのくり返しの動画（縦）：大きくしすぎない */ .ot .ar-body .ig-shot--loop figure { max-width: 300px; margin-inline: auto; } .ot .ar-body .ig-shot--loop video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 14px; background: #120D24; } .ot .ar-body .ig-shot--loop figcaption { text-align: center; } @media (max-width: 659px) { .ot .ar-body .ig-shot--loop figure { max-width: 240px; } } /* 流れの最後（濃い地）の小さな説明の字 */ .ot .ar-body .ig-flow li.is-out .ig-d { color: rgba(255, 255, 255, .92); } /* 縦の画像（SHIZUKU のコマ）は切らずに全部 */ .ot .ar-body .ig-kinds__img img.is-tall { width: 100%; height: 100%; object-fit: contain; } /* 縦の動画が1本だけのとき：真ん中に、横の動画と同じくらいの幅で */ .ot .ar-body .ig-gal--one-tall ul.ig-gal__tall { grid-template-columns: minmax(0, 240px); justify-content: center; } @media (max-width: 659px) { .ot .ar-body .ig-gal--one-tall ul.ig-gal__tall { grid-template-columns: minmax(0, 200px); } } /* ---------- aimovie（AI映画の作り方・2026-10-31）：この記事で足した図。どれも記事の列の中に収め、PC は縮めて全部見せ、659px 以下だけ図の中で横に動く ---------- */ /* 自社のショート（まだサムネが無いので HTML の表紙）と、公式の投稿で分かること */ .ot .ar-body .ig-post { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; align-items: start; } .ot .ar-body .ig-post__short { min-width: 0; padding: 8px 8px 12px; border-radius: 18px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-post__poster { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 22px 12px 18px; text-align: center; color: #fff; background: radial-gradient(ellipse 100% 60% at 100% 0%, rgba(123, 92, 255, .65), transparent 70%), radial-gradient(ellipse 90% 50% at 0% 100%, rgba(255, 79, 154, .5), transparent 70%), #120D24; } .ot .ar-body .ig-post__tag { font-family: var(--f-mono); font-size: 13px; font-weight: 700; letter-spacing: .14em; color: #C9C0F2; } .ot .ar-body .ig-post__big { margin-top: 16%; font-size: clamp(26px, 2.6vw, 32px); font-weight: 900; line-height: 1.25; letter-spacing: .02em; } .ot .ar-body .ig-post__sub { margin-top: auto; font-size: 14px; font-weight: 900; line-height: 1.5; color: #FFD6E8; } .ot .ar-body .ig-post__a .ig-play { top: 64%; } .ot .ar-body .ig-post__facts { min-width: 0; } .ot .ar-body .ig-post__facts ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } .ot .ar-body .ig-post__facts li { min-width: 0; padding: 16px 14px; border-radius: 16px; background: #fff; border: 1.5px solid #B3A8DE; } .ot .ar-body .ig-post__n { font-size: clamp(20px, 2vw, 24px); font-weight: 900; line-height: 1.3; color: #15102A; overflow-wrap: anywhere; } .ot .ar-body .ig-post__l { margin-top: 4px; font-size: 14px; font-weight: 700; line-height: 1.5; color: #4A4466; } @media (max-width: 659px) { .ot .ar-body .ig-post { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 10px; } .ot .ar-body .ig-post__short { padding: 6px 6px 10px; } .ot .ar-body .ig-post .ig-k { font-size: 12px; } .ot .ar-body .ig-post .ig-t { font-size: 14px; } .ot .ar-body .ig-post__big { font-size: 22px; } .ot .ar-body .ig-post__sub { font-size: 12px; } .ot .ar-body .ig-post__tag { font-size: 12px; } .ot .ar-body .ig-post__facts ul { grid-template-columns: minmax(0, 1fr); gap: 6px; } .ot .ar-body .ig-post__facts li { padding: 10px 10px; border-radius: 12px; } .ot .ar-body .ig-post__n { font-size: 17px; } .ot .ar-body .ig-post__l { margin-top: 0; font-size: 13px; } .ot .ar-body .ig-post__facts .ig-h { margin-bottom: 8px; font-size: 13px; } .ot .ar-body .ig-post__facts .ig-foot { padding: 8px 10px; font-size: 12px; } } /* 公式の資料の画面（スマホの幅で撮った物）：記事の列の真ん中に、読める大きさで */ .ot .ar-body .ig-shot--doc figure { max-width: 460px; margin-inline: auto; } .ot .ar-body .ig-shot--doc figcaption { text-align: center; } /* 7分12秒を15秒ずつに分けた帯 */ .ot .ar-body .ig-tl15 { padding: 22px 22px 18px; border-radius: 24px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-tl15__bar { display: grid; grid-template-columns: repeat(28, minmax(0, 1fr)) minmax(0, .8fr); gap: 3px; height: 46px; } .ot .ar-body .ig-tl15__bar i { display: block; border-radius: 4px; background: #7B5CFF; } .ot .ar-body .ig-tl15__bar i:nth-child(even) { background: #FF4F9A; } .ot .ar-body .ig-tl15__scale { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--f-mono); font-size: 13px; font-weight: 700; color: #4A4466; } .ot .ar-body .ig-tl15__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; } .ot .ar-body .ig-tl15__nums li { min-width: 0; padding: 14px 8px; border-radius: 16px; background: #F5F2FF; text-align: center; } .ot .ar-body .ig-tl15__nums li.is-key { background: linear-gradient(180deg, #FFF1F7, #fff); box-shadow: inset 0 0 0 1.5px #F6B9D3; } .ot .ar-body .ig-tl15__n { font-family: var(--f-display); font-size: clamp(28px, 3.4vw, 38px); font-weight: 900; line-height: 1.1; color: #15102A; } .ot .ar-body .ig-tl15__n span { margin-left: 2px; font-family: var(--f-body); font-size: 15px; letter-spacing: .02em; } .ot .ar-body .ig-tl15__nums li.is-key .ig-tl15__n { color: #A3206E; } .ot .ar-body .ig-tl15__l { margin-top: 6px; font-size: 14px; font-weight: 700; line-height: 1.5; color: #4A4466; } @media (max-width: 659px) { .ot .ar-body .ig-tl15 { padding: 16px 12px 14px; border-radius: 20px; } .ot .ar-body .ig-tl15__bar { gap: 2px; height: 34px; } .ot .ar-body .ig-tl15__bar i { border-radius: 2px; } .ot .ar-body .ig-tl15__nums { gap: 6px; } .ot .ar-body .ig-tl15__nums li { padding: 10px 4px; border-radius: 12px; } .ot .ar-body .ig-tl15__n { font-size: 26px; } .ot .ar-body .ig-tl15__n span { font-size: 13px; } .ot .ar-body .ig-tl15__l { font-size: 12px; } } /* 500kg の11のカット（時間の順） */ .ot .ar-body .ig-cuts ol { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 2px; list-style: none; } .ot .ar-body .ig-cuts li { min-width: 0; text-align: center; } .ot .ar-body .ig-cuts img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; background: #0c0a1c; } .ot .ar-body .ig-cuts li.is-key img { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #FF4F9A; } .ot .ar-body .ig-cuts .ig-k { margin-top: 6px; font-family: var(--f-mono); font-size: 13px; font-weight: 700; line-height: 1.4; color: #4A4466; } @media (max-width: 659px) { .ot .ar-body .ig-cuts { --track: 800px; } } /* 絵コンテの4つのマス */ .ot .ar-body .ig-board ol { --g: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); margin: 0; padding: 2px; list-style: none; } .ot .ar-body .ig-board li { position: relative; min-width: 0; padding: 14px 12px 14px; border-radius: 16px; background: #fff; border: 1.5px solid #B3A8DE; } .ot .ar-body .ig-board li.is-key { border-color: #F6B9D3; background: linear-gradient(180deg, #FFF1F7, #fff 60%); } .ot .ar-body .ig-board li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: calc(var(--g) / -2 - 5px); z-index: 1; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid var(--violet-ui); } .ot .ar-body .ig-board__k { font-size: 16px; font-weight: 900; line-height: 1.35; color: var(--violet-deep); } .ot .ar-body .ig-board__k span { display: block; font-family: var(--f-mono); font-size: 13px; font-weight: 700; color: #4A4466; } .ot .ar-body .ig-board__t { display: grid; place-items: center; min-height: 72px; margin-top: 10px; padding: 8px 6px; border-radius: 10px; background: #120D24; color: #fff; font-size: clamp(14px, 1.3vw, 16px); font-weight: 900; line-height: 1.4; text-align: center; } .ot .ar-body .ig-board__d, .ot .ar-body .ig-board__s { margin-top: 8px; font-size: clamp(14px, 1.25vw, 15px); font-weight: 700; line-height: 1.5; color: #15102A; } .ot .ar-body .ig-board__s { margin-top: 4px; color: #4A4466; } .ot .ar-body .ig-board__d::before { content: "動き "; color: var(--violet-deep); font-weight: 900; } .ot .ar-body .ig-board__s::before { content: "音 "; color: #A3206E; font-weight: 900; } @media (max-width: 659px) { .ot .ar-body .ig-board { --track: 620px; } .ot .ar-body .ig-board ol { --g: 12px; } } /* 自社の台本の表（3行） */ .ot .ar-body .ig-script table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; border: 1px solid #E2DDF0; border-radius: 16px; overflow: hidden; background: #fff; } .ot .ar-body .ig-script th { padding: 10px 14px; background: #ECE7FF; color: #2A1F66; font-size: 14px; font-weight: 900; line-height: 1.5; text-align: left; border: 0; } .ot .ar-body .ig-script td { padding: 12px 14px; border: 0; border-top: 1px solid #E2DDF0; font-size: 15px; line-height: 1.65; vertical-align: top; overflow-wrap: anywhere; } .ot .ar-body .ig-script td:first-child { width: 42%; font-weight: 900; color: #15102A; } .ot .ar-body .ig-script td:last-child { font-weight: 700; color: #4A4466; } @media (max-width: 659px) { .ot .ar-body .ig-script th { padding: 8px 10px; font-size: 13px; } .ot .ar-body .ig-script td { padding: 10px; font-size: 14px; } } /* ハクとミケの6つの章 */ .ot .ar-body .ig-chap ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .ot .ar-body .ig-chap li { min-width: 0; padding: 6px 6px 10px; border-radius: 16px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-chap img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px; } .ot .ar-body .ig-chap .ig-k { margin: 8px 4px 0; font-family: var(--f-mono); font-size: 13px; font-weight: 700; line-height: 1.4; color: #A3206E; } .ot .ar-body .ig-chap .ig-t { margin: 2px 4px 0; font-size: 15px; font-weight: 900; line-height: 1.45; color: #15102A; } @media (max-width: 659px) { .ot .ar-body .ig-chap ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ot .ar-body .ig-chap .ig-t { font-size: 14px; } } /* 5つの手順（HOW IT WORKS）：道具の札を暗い地でも読める色に */ .ot .ar-body .ig-hiw:not(.ig-hiw--7) .ig-tool { margin-top: 6px; font-size: 13px; font-weight: 700; line-height: 1.45; color: #C9C0F2; } /* 値段の数字（$0.03/秒）：スマホでは1行に収まる大きさに */ .ot .ar-body .ig-stats--usd .ig-num { white-space: nowrap; } @media (max-width: 659px) { .ot .ar-body .ig-stats--usd .ig-num { font-size: 28px; } .ot .ar-body .ig-stats--usd .ig-num span { font-size: 13px; } .ot .ar-body .ig-stats--usd li { padding: 16px 12px; } } /* ショート1本だけのカード */ .ot .ar-body .ig-shorts--1 ul { --n: 1; max-width: 240px; } @media (max-width: 659px) { .ot .ar-body .ig-shorts.ig-shorts--1 ul { grid-template-columns: minmax(0, 1fr); max-width: 200px; } } /* 作例2本（横1本・縦1本）をこの場で再生 */ .ot .ar-body .ig-gal2 ul { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; padding: 0; list-style: none; } .ot .ar-body .ig-gal2 li { min-width: 0; padding: 8px 8px 12px; border-radius: 18px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-gal2__v { display: block; width: 100%; height: auto; border-radius: 12px; background: #120D24; object-fit: cover; } .ot .ar-body .ig-gal2__wide .ig-gal2__v { aspect-ratio: 16 / 9; } .ot .ar-body .ig-gal2__tall .ig-gal2__v { aspect-ratio: 9 / 16; } .ot .ar-body .ig-gal2__t { margin: 10px 4px 0; font-size: 16px; font-weight: 900; line-height: 1.45; color: #15102A; } .ot .ar-body .ig-gal2__m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 2px 4px 0; font-size: 13px; font-weight: 700; line-height: 1.6; color: #4A4466; } .ot .ar-body .ig-gal2__own { display: inline-block; padding: 0 8px; border-radius: 999px; background: #FFE0EE; color: #8C1A5C; font-size: 12px; font-weight: 900; line-height: 1.7; } @media (max-width: 659px) { .ot .ar-body .ig-gal2 ul { grid-template-columns: minmax(0, 1fr); gap: 10px; } .ot .ar-body .ig-gal2__tall { justify-self: center; width: 54%; } } @media (prefers-reduced-motion: reduce) { .ot *, .ot *::before, .ot *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* import-draft-post: the site's article column gives the side gutter. */ .ot > .ar-body { padding-inline: 0; }