/* Imported from seo/drafts/ourtime/cm-production-how-to @ fc87ae6 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; } } @media (max-width: 659px) { .ot .ar-body .ig-cmtypes.ig-vs2 { --track: 0px; } .ot .ar-body .ig-vs2 td { font-size: 15px; padding: 12px 6px; } .ot .ar-body .ig-vs2 thead th:first-child { width: 24%; } .ot .ar-body .ig-vs2 tbody th { font-size: 15px; padding-left: 10px; } } .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; } /* ---------- 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; } } /* ---------- 2026-10-28：本物の画像・ループ・YouTube の再生（AIインフルエンサーの記事から） ---------- どれも本文の列の中に収める（負の margin なし）。PC は minmax(0, 1fr) で縮めて全部見せ、横に動かすのは 659px 以下だけ。 */ /* rows of real pictures and loops (.ig-gal--fit): a grid on PC, a carousel (article-hs.js) on phones */ .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, .ot .ar-body .ig-gal__img { display: block; width: 100%; height: auto; border-radius: 12px; background: #120D24; } .ot .ar-body .ig-gal__v { aspect-ratio: 9 / 16; object-fit: cover; } .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: 13px; font-weight: 900; line-height: 1.7; } .ot .ar-body .ig-gal .ig-foot { margin-top: 12px; } @media (min-width: 660px) { .ot .ar-body .ig-gal--fit ul { display: grid; gap: 12px; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; align-items: start; } .ot .ar-body .ig-gal--fit ul > li { width: auto; } .ot .ar-body .ig-gal--real ul { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); } .ot .ar-body .ig-gal--3 ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ot .ar-body .ig-gal--two ul { max-width: 540px; margin-inline: auto; } } /* two things to compare stay side by side even on phones (they fit) */ .ot .ar-body .ig-gal--pair ul, .ot .ar-body .ig-gal--two ul { display: grid; gap: 10px; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; align-items: center; } .ot .ar-body .ig-gal--pair ul > li, .ot .ar-body .ig-gal--two ul > li { width: auto; } .ot .ar-body .ig-gal--pair ul { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .ot .ar-body .ig-gal--two ul { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } @media (max-width: 659px) { .ot .ar-body .ig-gal--real ul > li:first-child { width: 76%; } .ot .ar-body .ig-gal--real ul > li { width: 58%; } .ot .ar-body .ig-gal--3 ul > li { width: 80%; } } /* the loops: silent, a few seconds, play only on screen; a small button pauses them */ .ot .ar-body .ig-loopw { position: relative; } .ot .ar-body .ig-loopw video { display: block; } .ot .ar-body .ig-loop__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-loop__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-loop__btn.is-on::before { width: 12px; height: 16px; margin-left: 0; border: 0; border-left: 4px solid #fff; border-right: 4px solid #fff; } .ot .ar-body .ig-loop__btn:focus-visible { outline: 3px solid #FF8FC0; outline-offset: 2px; } /* the source video: the picture until pressed, then YouTube's own player in the same place */ .ot .ar-body .ig-ytv { margin-top: 1.6em; } .ot .ar-body .ig-ytv__a, .ot .ar-body .ig-ytv__f { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 0; border-radius: 20px; background: #120D24; box-shadow: 0 24px 48px -28px rgba(59, 31, 158, .7); } .ot .ar-body .ig-ytv__a img { display: block; width: 100%; height: 100%; object-fit: cover; } .ot .ar-body .ig-ytv__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 8px rgba(255, 79, 154, .3); transition: transform .3s var(--ease); } .ot .ar-body .ig-ytv__play::after { content: ""; margin-left: 6px; border-left: 24px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; } .ot .ar-body .ig-ytv__a:hover .ig-ytv__play { transform: scale(1.08); } .ot .ar-body .ig-ytv__a:focus-visible { outline: 3px solid var(--violet-deep); outline-offset: 3px; } .ot .ar-body .ig-ytv__cap { margin-top: 12px; } .ot .ar-body .ig-ytv__k { display: block; font-size: 13px; font-weight: 900; letter-spacing: .06em; color: var(--violet-deep); } .ot .ar-body .ig-ytv__t { display: block; margin-top: 2px; font-size: 18px; font-weight: 900; line-height: 1.5; color: #15102A; } .ot .ar-body .ig-ytv__ch { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .ot .ar-body .ig-ytv__ch a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border-radius: 999px; background: #ECE7FF; color: #2A1F66; font-size: 15px; font-weight: 700; text-decoration: none; } .ot .ar-body .ig-ytv__ch a:hover { background: var(--violet-ui); color: #fff; } .ot .ar-body .ig-ytv__ch b { font-family: var(--f-mono); font-size: 14px; } @media (max-width: 599px) { .ot .ar-body .ig-ytv__a, .ot .ar-body .ig-ytv__f { border-radius: 14px; } .ot .ar-body .ig-ytv__play { width: 60px; height: 60px; margin: -30px 0 0 -30px; } .ot .ar-body .ig-ytv__play::after { border-left-width: 19px; border-top-width: 12px; border-bottom-width: 12px; } .ot .ar-body .ig-ytv__ch a { font-size: 14px; padding: 6px 12px; } } /* chat: Higgsfield's side has no logo, only a plain mark; pictures in the bubbles */ .ot .ar-body .ig-chat .ig-ava--hf { position: relative; border-radius: 50%; background: linear-gradient(135deg, #3B1F9E, #6A4CF5); } .ot .ar-body .ig-chat .ig-ava--hf::before { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 20px; line-height: 1; } .ot .ar-body .ig-chat__pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .ot .ar-body .ig-chat__pics img, .ot .ar-body .ig-chat__pic { display: block; width: 100%; height: auto; border-radius: 10px; background: #120D24; } .ot .ar-body .ig-chat__pic { width: min(100%, 220px); } /* what a character sheet is: the sheet with its parts */ .ot .ar-body .ig-sheet__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; border-radius: 24px; background: #E9E4FA; } .ot .ar-body .ig-sheet__img { position: relative; } .ot .ar-body .ig-sheet__img img { display: block; width: 100%; height: auto; border-radius: 14px; } .ot .ar-body .ig-sheet__tag { position: absolute; left: 8px; padding: 1px 10px; border-radius: 999px; background: var(--ink-2); color: #fff; font-size: 13px; font-weight: 900; line-height: 1.7; } .ot .ar-body .ig-sheet__tag--top { top: 8px; } .ot .ar-body .ig-sheet__tag--bottom { top: calc(50.4% + 8px); background: var(--violet-ui); } .ot .ar-body .ig-sheet__notes { display: grid; gap: 10px; } .ot .ar-body .ig-sheet__notes li { padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-sheet__notes .ig-k { color: var(--violet-deep); } .ot .ar-body .ig-sheet__notes .ig-t { margin-top: 2px; font-size: 19px; } .ot .ar-body .ig-sheet__notes .ig-d { margin-top: 2px; font-size: 15px; font-weight: 700; color: #4A4466; } @media (max-width: 659px) { .ot .ar-body .ig-sheet__in { grid-template-columns: minmax(0, 1fr); padding: 12px; } .ot .ar-body .ig-sheet__img { width: min(100%, 340px); margin-inline: auto; } .ot .ar-body .ig-sheet__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ot .ar-body .ig-sheet__notes li { padding: 10px 12px; } .ot .ar-body .ig-sheet__notes .ig-t { font-size: 16px; } .ot .ar-body .ig-sheet__notes .ig-d { font-size: 13px; } } /* without a sheet / with a sheet */ .ot .ar-body .ig-why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ot .ar-body .ig-why__col { display: flex; flex-direction: column; padding: 14px; border-radius: 22px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-why__col--no { background: #EEEBF5; } .ot .ar-body .ig-why__col--ok { border: 3px solid var(--mint); } .ot .ar-body .ig-why__h { margin-bottom: 10px; font-size: 19px; font-weight: 900; line-height: 1.4; color: #15102A; } .ot .ar-body .ig-why__h span { display: block; font-size: 13px; font-weight: 700; color: #4A4466; } .ot .ar-body .ig-why__tries { display: grid; gap: 6px; } .ot .ar-body .ig-why__tries img, .ot .ar-body .ig-why__sheet { display: block; width: 100%; height: auto; border-radius: 10px; } .ot .ar-body .ig-why__t { margin-top: auto; padding-top: 12px; font-size: 19px; font-weight: 900; line-height: 1.4; text-align: center; color: #A3206E; } .ot .ar-body .ig-why__col--ok .ig-why__t { color: #0B6A50; } .ot .ar-body .ig-why__col--ok .ig-why__sheet { margin-block: auto; } .ot .ar-body .ig-why__col--ok .ig-why__sheet + .ig-why__t { margin-top: 0; } @media (max-width: 599px) { .ot .ar-body .ig-why { gap: 8px; } .ot .ar-body .ig-why__col { padding: 10px; border-radius: 18px; } .ot .ar-body .ig-why__h { font-size: 16px; } .ot .ar-body .ig-why__t { font-size: 16px; } } /* Silvio's three marks */ .ot .ar-body .ig-marks { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border-radius: 24px; background: var(--ink-2); } .ot .ar-body .ig-marks__img img { display: block; width: 100%; height: auto; border-radius: 14px; } .ot .ar-body .ig-marks__list { display: grid; gap: 8px; counter-reset: m; } .ot .ar-body .ig-marks__list li { counter-increment: m; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #1A1433; border: 1.5px solid rgba(201, 192, 242, .25); } .ot .ar-body .ig-marks__list li::before { content: counter(m); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #7B5CFF, #FF4F9A); color: #fff; font-family: var(--f-display); font-size: 15px; font-weight: 900; } .ot .ar-body .ig-marks .ig-t { color: #fff; font-size: 18px; line-height: 1.4; } .ot .ar-body .ig-marks .ig-foot { grid-column: 1 / -1; margin-top: 0; padding: 0 4px; background: transparent; color: #C9C0F2; font-weight: 500; } @media (max-width: 659px) { .ot .ar-body .ig-marks { grid-template-columns: minmax(0, 1fr); } .ot .ar-body .ig-marks__list li { padding: 10px 12px; } .ot .ar-body .ig-marks .ig-t { font-size: 16px; } } /* a screen of the tool, with what to press */ .ot .ar-body .ig-shot { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; border-radius: 24px; background: #E9E4FA; } .ot .ar-body .ig-shot--video { grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, 190px); } .ot .ar-body .ig-shot__img img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 18px 36px -20px rgba(18, 13, 36, .8); } .ot .ar-body .ig-shot__pts { display: grid; gap: 8px; counter-reset: s; } .ot .ar-body .ig-shot__pts li { counter-increment: s; position: relative; padding: 10px 12px 10px 50px; border-radius: 14px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-shot__pts li::before { content: counter(s); position: absolute; left: 12px; top: 50%; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: linear-gradient(135deg, var(--violet-ui), var(--magenta)); color: #fff; font-family: var(--f-display); font-size: 15px; font-weight: 900; } .ot .ar-body .ig-shot__pts .ig-t { font-size: 17px; line-height: 1.4; } .ot .ar-body .ig-shot__pts .ig-d { margin-top: 0; font-size: 14px; font-weight: 700; color: #4A4466; } .ot .ar-body .ig-shot__out video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; background: #120D24; } .ot .ar-body .ig-shot__cap { margin-top: 6px; font-size: 14px; font-weight: 900; text-align: center; color: #15102A; } .ot .ar-body .ig-shot .ig-foot { grid-column: 1 / -1; margin-top: 0; } @media (max-width: 659px) { .ot .ar-body .ig-shot { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 10px; padding: 12px; } .ot .ar-body .ig-shot--video .ig-shot__out { grid-column: 1 / -1; width: min(100%, 220px); justify-self: center; } .ot .ar-body .ig-shot__pts li { padding: 8px 8px 8px 40px; } .ot .ar-body .ig-shot__pts li::before { left: 8px; width: 24px; height: 24px; margin-top: -12px; font-size: 13px; } .ot .ar-body .ig-shot__pts .ig-t { font-size: 15px; } .ot .ar-body .ig-shot__pts .ig-d { font-size: 13px; } } /* a name before and after */ .ot .ar-body .ig-fix { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 18px; border-radius: 22px; background: #E9E4FA; } .ot .ar-body .ig-fix__bad, .ot .ar-body .ig-fix__ok { display: grid; gap: 4px; padding: 12px 18px; border-radius: 16px; background: #fff; border: 1px solid #E2DDF0; text-align: center; } .ot .ar-body .ig-fix__ok { border: 3px solid var(--mint); } .ot .ar-body .ig-fix__k { font-size: 13px; font-weight: 900; color: #4A4466; } .ot .ar-body .ig-fix code { font-size: 19px; font-weight: 700; } .ot .ar-body .ig-fix__bad code { color: #A3206E; text-decoration: line-through; text-decoration-thickness: 2px; } .ot .ar-body .ig-fix__ok code { color: #0B6A50; } .ot .ar-body .ig-fix__arw { font-size: 28px; font-weight: 900; color: var(--violet-ui); } @media (max-width: 599px) { .ot .ar-body .ig-fix { flex-direction: column; gap: 6px; } .ot .ar-body .ig-fix__arw { transform: rotate(90deg); line-height: 1; } } /* more columns for the usual figures */ .ot .ar-body .ig-checkgrid--4 ol { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 719px) { .ot .ar-body .ig-checkgrid--4 ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ot .ar-body .ig-cards3--2 ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ot .ar-body .ig-trouble--7 ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .ot .ar-body .ig-trouble--7 li { flex: 0 0 calc((100% - 30px) / 4); min-width: 0; } @media (max-width: 599px) { .ot .ar-body .ig-trouble--7 ul { gap: 8px; } .ot .ar-body .ig-trouble--7 li, .ot .ar-body .ig-trouble--7 li:nth-child(n+4) { flex-basis: calc((100% - 8px) / 2); grid-column: auto; } } .ot .ar-body .ig-hiw--8 { --g: 22px; } .ot .ar-body .ig-hiw--8 ol { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 22px; } .ot .ar-body .ig-hiw--8 li:nth-child(4)::after { content: none; } @media (max-width: 659px) { .ot .ar-body .ig-hiw--8 { --track: 0px; --g: 18px; } .ot .ar-body .ig-hiw--8 ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; } .ot .ar-body .ig-hiw--8 li:nth-child(2n)::after { content: none; } .ot .ar-body .ig-hiw--8 .ig-t { font-size: 16px; } } @media (min-width: 720px) { .ot .ar-body .ig-points--4 ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .ot .ar-body .ig-points--4 li { padding: 18px 14px; } .ot .ar-body .ig-points--4 .ig-t { font-size: 16px; } } /* credits used: one bar, four parts */ .ot .ar-body .ig-credit { padding: 20px 22px; border-radius: 24px; background: radial-gradient(ellipse 60% 70% at 100% 0%, rgba(123, 92, 255, .45), transparent 70%), var(--ink-2); } .ot .ar-body .ig-credit .ig-h { color: #C9C0F2; } .ot .ar-body .ig-credit__big { display: flex; align-items: baseline; gap: 10px; } .ot .ar-body .ig-credit__n { font-family: var(--f-display); font-size: 60px; font-weight: 900; line-height: 1; letter-spacing: -.01em; background: linear-gradient(90deg, #B9A9FF, #FF8FC0); -webkit-background-clip: text; background-clip: text; color: transparent; } .ot .ar-body .ig-credit__u { font-size: 20px; font-weight: 900; color: #fff; } .ot .ar-body .ig-credit__bar { display: flex; gap: 3px; height: 30px; margin-top: 16px; overflow: hidden; border-radius: 999px; } .ot .ar-body .ig-credit__bar li { flex: var(--v) 1 0; min-width: 8px; } .ot .ar-body .ig-credit .is-face { --c: #FF4F9A; } .ot .ar-body .ig-credit .is-sheet { --c: #3DDBB0; } .ot .ar-body .ig-credit .is-v1 { --c: #7B5CFF; } .ot .ar-body .ig-credit .is-v2 { --c: #B9A9FF; } .ot .ar-body .ig-credit__bar li { background: var(--c); } .ot .ar-body .ig-credit__legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .ot .ar-body .ig-credit__legend li { position: relative; padding-left: 20px; } .ot .ar-body .ig-credit__legend li::before { content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 13px; border-radius: 4px; background: var(--c); } .ot .ar-body .ig-credit__legend .ig-t { color: #fff; font-size: 16px; line-height: 1.5; } .ot .ar-body .ig-credit__legend .ig-d { margin-top: 0; color: #C9C0F2; font-size: 14px; font-weight: 700; } .ot .ar-body .ig-credit .ig-foot { margin-top: 12px; padding: 0; background: transparent; color: #C9C0F2; font-weight: 500; } @media (max-width: 599px) { .ot .ar-body .ig-credit { padding: 16px; } .ot .ar-body .ig-credit__n { font-size: 48px; } .ot .ar-body .ig-credit__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Higgsfield's plans and the two money tests: words in the cells, not marks */ .ot .ar-body .ig-hfplans td, .ot .ar-body .ig-earn td { font-size: 18px; font-weight: 900; line-height: 1.35; color: #15102A; } .ot .ar-body .ig-hfplans td.is-yes, .ot .ar-body .ig-hfplans td.is-no { font-size: 28px; font-weight: 900; } .ot .ar-body .ig-hfplans td.is-yes { color: var(--violet-deep); } .ot .ar-body .ig-hfplans td.is-no { color: #6E6889; } .ot .ar-body .ig-hfplans td > span { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; color: #4A4466; } .ot .ar-body .ig-hfplans thead th:nth-child(n+5) { background: var(--violet-tint); } .ot .ar-body .ig-hfplans thead th:first-child { width: 24%; } .ot .ar-body .ig-earn td { font-size: 16px; font-weight: 700; line-height: 1.55; } @media (max-width: 659px) { .ot .ar-body .ig-hfplans { --track: 520px; } .ot .ar-body .ig-hfplans td { font-size: 16px; } .ot .ar-body .ig-earn td { font-size: 15px; } } /* the tools, by role */ .ot .ar-body .ig-tools ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .ot .ar-body .ig-tools li { padding: 16px 10px; border-radius: 18px; background: #fff; border: 1px solid #E2DDF0; text-align: center; } .ot .ar-body .ig-tools li.is-main { background: linear-gradient(135deg, #3B1F9E 0%, #5B3EE6 60%, #A3206E 100%); border: 0; } .ot .ar-body .ig-tools .ig-k { color: #4A4466; } .ot .ar-body .ig-tools .ig-t { margin-top: 4px; font-family: var(--f-display); font-size: 21px; } .ot .ar-body .ig-tools li.is-main .ig-k, .ot .ar-body .ig-tools li.is-main .ig-t { color: #fff; } @media (max-width: 599px) { .ot .ar-body .ig-tools ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ot .ar-body .ig-tools .ig-t { font-size: 19px; } } /* CM の記事（10/28）：作例3本（縦）・費用を左右する5つ */ @media (min-width: 660px) { .ot .ar-body .ig-gal--3t ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 659px) { .ot .ar-body .ig-gal--3t ul > li { width: 60%; } } .ot .ar-body .ig-factors--5 ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .ot .ar-body .ig-factors--5 li { flex: 0 0 calc((100% - 40px) / 5); min-width: 0; } @media (max-width: 599px) { .ot .ar-body .ig-factors--5 ul { gap: 8px; } .ot .ar-body .ig-factors--5 li { flex-basis: calc((100% - 8px) / 2); } } .ot .ar-body .ig-cmplans td { font-size: 17px; } @media (max-width: 659px) { .ot .ar-body .ig-cmplans { --track: 0px; } .ot .ar-body .ig-cmplans th, .ot .ar-body .ig-cmplans td { padding: 10px 4px; } .ot .ar-body .ig-cmplans td { font-size: 14px; } .ot .ar-body .ig-cmplans thead th { font-size: 15px; } .ot .ar-body .ig-cmplans tbody th { font-size: 15px; padding-left: 8px; } } /* 10/28 早朝：画像をもっと（伊藤さん）。結論のカードに実物の写真・失敗の実物・作例の1本・画面の向き・CM のコマ */ .ot .ar-body .ig-trio ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .ot .ar-body .ig-trio li { overflow: hidden; padding: 0 0 16px; border-radius: 20px; background: #fff; border: 1px solid #E2DDF0; } .ot .ar-body .ig-trio img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #120D24; } .ot .ar-body .ig-trio .ig-k, .ot .ar-body .ig-trio .ig-t, .ot .ar-body .ig-trio .ig-d { padding-inline: 16px; } .ot .ar-body .ig-trio .ig-k { margin-top: 12px; color: var(--violet-deep); } .ot .ar-body .ig-trio .ig-t { margin-top: 2px; font-size: 18px; } .ot .ar-body .ig-trio .ig-d { margin-top: 2px; font-weight: 700; color: #4A4466; } .ot .ar-body .ig-trio li:nth-child(2) { border: 0; background: linear-gradient(135deg, #3B1F9E 0%, #5B3EE6 55%, #A3206E 100%); } .ot .ar-body .ig-trio li:nth-child(2) .ig-k, .ot .ar-body .ig-trio li:nth-child(2) .ig-t, .ot .ar-body .ig-trio li:nth-child(2) .ig-d { color: #fff; } @media (max-width: 599px) { .ot .ar-body .ig-trio ul { grid-template-columns: minmax(0, 1fr); gap: 8px; } .ot .ar-body .ig-trio li { display: grid; grid-template-columns: 124px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 12px; padding: 0; } .ot .ar-body .ig-trio img { grid-row: 1 / 4; height: 100%; aspect-ratio: auto; min-height: 96px; } .ot .ar-body .ig-trio .ig-k, .ot .ar-body .ig-trio .ig-t, .ot .ar-body .ig-trio .ig-d { padding-inline: 0 12px; } .ot .ar-body .ig-trio .ig-k { margin-top: 10px; } .ot .ar-body .ig-trio .ig-t { font-size: 16px; } .ot .ar-body .ig-trio .ig-d { margin-bottom: 10px; font-size: 13px; } } @media (min-width: 660px) { .ot .ar-body .ig-gal--fails ul { grid-template-columns: minmax(0, .62fr) minmax(0, 1fr) minmax(0, 1fr); align-items: end; } } @media (max-width: 659px) { .ot .ar-body .ig-gal--fails ul > li:first-child { width: 52%; } .ot .ar-body .ig-gal--fails ul > li { width: 72%; } } .ot .ar-body .ig-gal--one ul { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; padding: 0; overflow: visible; scroll-snap-type: none; } .ot .ar-body .ig-gal--one ul > li { width: auto; } .ot .ar-body .ig-gal--one .ig-gal__v { aspect-ratio: 16 / 9; } @media (min-width: 660px) { .ot .ar-body .ig-gal--5 ul { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .ot .ar-body .ig-gal--5 li { padding: 6px 6px 8px; border-radius: 14px; } .ot .ar-body .ig-gal--5 .ig-gal__img { border-radius: 9px; } } @media (max-width: 659px) { .ot .ar-body .ig-gal--5 ul > li { width: 40%; } } .ot .ar-body .ig-gal--5 .ig-gal__t { margin-top: 6px; font-family: var(--f-mono); font-size: 14px; text-align: center; } /* the three shapes, with real covers inside */ .ot .ar-body .ig-aspect ul { display: flex; align-items: flex-end; justify-content: center; gap: 14px; padding: 18px 14px 14px; border-radius: 22px; background: #E9E4FA; } .ot .ar-body .ig-aspect li { min-width: 0; text-align: center; } .ot .ar-body .ig-aspect li.is-wide { flex: 0 0 44%; } .ot .ar-body .ig-aspect li.is-tall { flex: 0 0 17%; } .ot .ar-body .ig-aspect li.is-square { flex: 0 0 26%; } .ot .ar-body .ig-aspect__box { overflow: hidden; border-radius: 10px; background: #120D24; box-shadow: 0 10px 24px -14px rgba(18, 13, 36, .8); } .ot .ar-body .ig-aspect li.is-wide .ig-aspect__box { aspect-ratio: 16 / 9; } .ot .ar-body .ig-aspect li.is-tall .ig-aspect__box { aspect-ratio: 9 / 16; } .ot .ar-body .ig-aspect li.is-square .ig-aspect__box { aspect-ratio: 1 / 1; background: #fff; border: 2px dashed #9C86FF; box-shadow: none; } .ot .ar-body .ig-aspect__box img { display: block; width: 100%; height: 100%; object-fit: cover; } .ot .ar-body .ig-aspect .ig-t { margin-top: 8px; font-size: 16px; line-height: 1.35; } .ot .ar-body .ig-aspect .ig-d { margin-top: 0; font-size: 13px; font-weight: 700; color: #4A4466; } @media (max-width: 599px) { .ot .ar-body .ig-aspect ul { gap: 8px; padding: 14px 8px 10px; } .ot .ar-body .ig-aspect .ig-t { font-size: 14px; } .ot .ar-body .ig-aspect .ig-d { font-size: 12px; } } .ot .ar-body .ig-aspect li.is-square .ig-aspect__box { display: grid; place-items: center; } .ot .ar-body .ig-aspect__none { font-size: 14px; font-weight: 700; color: #4A4466; } /* a short flow that fits as it is: on phones it stands in one column (no sliding) */ @media (max-width: 659px) { .ot .ar-body .ig-flow--stack { --track: 0px; } .ot .ar-body .ig-flow--stack ol { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-auto-columns: auto; --g: 22px; } .ot .ar-body .ig-flow--stack li { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 16px; text-align: left; } .ot .ar-body .ig-flow--stack li::before { margin-bottom: 0; } .ot .ar-body .ig-flow--stack li:not(:last-child)::after { top: auto; right: auto; left: 50%; bottom: calc(var(--g) / -2 - 6px); margin-left: -7px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 11px solid var(--violet-ui); border-bottom: 0; } } @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; }