@media screen and (max-width:480px) {
h1.onboarding-section-title {
font-size: 28px !important;
line-height: 34px !important;
letter-spacing: 0 !important;
}
p.onboarding-section-body {
font-size: 14px !important;
line-height: 145% !important;
}
td.content-td.onboarding-card-section {
padding-left: 8px !important;
padding-right: 8px !important;
}
td.email-footer-row {
padding-left: 8px !important;
padding-right: 8px !important;
}
td.onboarding-card-padding {
padding: 12px !important;
}
td.onboarding-card-media-cell {
width: 72px !important;
min-width: 72px !important;
}
td.onboarding-card-media-cell-photo {
width: 144px !important;
min-width: 144px !important;
}
td.onboarding-card-media-cell-photo-gap {
width: 145px !important;
min-width: 145px !important;
}
table.onboarding-card-media-frame {
width: 72px !important;
max-width: 72px !important;
}
table.onboarding-card-media-frame-photo {
width: 144px !important;
max-width: 144px !important;
}
table.onboarding-card-media-frame-photo-gap,
table.onboarding-card-photo-split-gap {
width: 145px !important;
max-width: 145px !important;
}
td.onboarding-card-media-fill {
height: 72px !important;
}
td.onboarding-card-media-fill-photo {
height: 72px !important;
}
td.onboarding-card-media-fill-icon {
height: auto !important;
padding: 10px !important;
}
img.onboarding-card-icon-art,
table.onboarding-card-icon-art {
width: 52px !important;
max-width: 52px !important;
height: 52px !important;
}
td.onboarding-card-media-fill-icon-full-frame {
height: 72px !important;
padding: 0 !important;
}
img.onboarding-card-icon-art-full-frame,
table.onboarding-card-icon-art-full-frame {
width: 72px !important;
max-width: 72px !important;
height: 72px !important;
}
img.onboarding-card-photo-art {
width: 72px !important;
height: 72px !important;
max-width: 72px !important;
}
img.onboarding-card-photo-art-wide {
width: 144px !important;
height: 72px !important;
max-width: 144px !important;
}
td.onboarding-card-photo-split-cell-before,
img.onboarding-card-photo-art-half-before,
table.onboarding-card-photo-placeholder-half-before {
width: 72px !important;
max-width: 72px !important;
}
td.onboarding-card-photo-split-cell-after,
img.onboarding-card-photo-art-half-after,
table.onboarding-card-photo-placeholder-half-after {
width: 72px !important;
max-width: 72px !important;
}
td.onboarding-card-photo-split-gap {
width: 1px !important;
min-width: 1px !important;
}
img.onboarding-card-photo-art-half,
table.onboarding-card-photo-placeholder-half,
td.onboarding-card-photo-placeholder-fill {
height: 72px !important;
}
td.onboarding-card-gap {
width: 12px !important;
min-width: 12px !important;
}
p.onboarding-card-copy {
font-size: 13px !important;
line-height: 18px !important;
letter-spacing: -0.24px !important;
}
td.onboarding-card-arrow-cell {
width: 28px !important;
min-width: 28px !important;
padding-left: 6px !important;
}
[dir="rtl"] td.onboarding-card-arrow-cell {
padding-left: 0 !important;
padding-right: 6px !important;
}
img.onboarding-card-arrow-img {
width: 24px !important;
height: 24px !important;
}
}
@media screen and (max-width:360px) {
h1.onboarding-section-title {
font-size: 25px !important;
line-height: 31px !important;
}
p.onboarding-section-body {
font-size: 13px !important;
line-height: 142% !important;
}
td.content-td.onboarding-card-section {
padding-left: 8px !important;
padding-right: 8px !important;
}
td.email-footer-row {
padding-left: 8px !important;
padding-right: 8px !important;
}
td.onboarding-card-padding {
padding: 10px !important;
}
td.onboarding-card-media-cell {
width: 64px !important;
min-width: 64px !important;
}
td.onboarding-card-media-cell-photo {
width: 136px !important;
min-width: 136px !important;
}
td.onboarding-card-media-cell-photo-gap {
width: 137px !important;
min-width: 137px !important;
}
table.onboarding-card-media-frame {
width: 64px !important;
max-width: 64px !important;
}
table.onboarding-card-media-frame-photo {
width: 136px !important;
max-width: 136px !important;
}
table.onboarding-card-media-frame-photo-gap,
table.onboarding-card-photo-split-gap {
width: 137px !important;
max-width: 137px !important;
}
td.onboarding-card-media-fill {
height: 64px !important;
}
td.onboarding-card-media-fill-photo {
height: 68px !important;
}
td.onboarding-card-media-fill-icon {
height: auto !important;
padding: 8px !important;
}
img.onboarding-card-icon-art,
table.onboarding-card-icon-art {
width: 48px !important;
max-width: 48px !important;
height: 48px !important;
}
td.onboarding-card-media-fill-icon-full-frame {
height: 64px !important;
padding: 0 !important;
}
img.onboarding-card-icon-art-full-frame,
table.onboarding-card-icon-art-full-frame {
width: 64px !important;
max-width: 64px !important;
height: 64px !important;
}
img.onboarding-card-photo-art {
width: 64px !important;
height: 64px !important;
max-width: 64px !important;
}
img.onboarding-card-photo-art-wide {
width: 136px !important;
height: 68px !important;
max-width: 136px !important;
}
td.onboarding-card-photo-split-cell-before,
img.onboarding-card-photo-art-half-before,
table.onboarding-card-photo-placeholder-half-before {
width: 68px !important;
max-width: 68px !important;
}
td.onboarding-card-photo-split-cell-after,
img.onboarding-card-photo-art-half-after,
table.onboarding-card-photo-placeholder-half-after {
width: 68px !important;
max-width: 68px !important;
}
td.onboarding-card-photo-split-gap {
width: 1px !important;
min-width: 1px !important;
}
img.onboarding-card-photo-art-half,
table.onboarding-card-photo-placeholder-half,
td.onboarding-card-photo-placeholder-fill {
height: 68px !important;
}
td.onboarding-card-gap {
width: 10px !important;
min-width: 10px !important;
}
p.onboarding-card-copy {
font-size: 12px !important;
line-height: 16px !important;
}
td.onboarding-card-arrow-cell {
width: 24px !important;
min-width: 24px !important;
padding-left: 4px !important;
}
[dir="rtl"] td.onboarding-card-arrow-cell {
padding-left: 0 !important;
padding-right: 4px !important;
}
img.onboarding-card-arrow-img {
width: 20px !important;
height: 20px !important;
}
}
/**
* Google webfonts. Recommended to include the .woff version for cross-client compatibility.
*/
@media screen {
/* OpenAI Sans font family */
@font-face {
font-display: swap;
font-family: "OpenAI Sans";
font-style: normal;
font-weight: 400;
src: url("https://cdn.openai.com/common/fonts/openai-sans/v2/OpenAISans-Regular.woff2") format("woff2");
}
@font-face {
font-display: swap;
font-family: "OpenAI Sans";
font-style: normal;
font-weight: 500;
src: url("https://cdn.openai.com/common/fonts/openai-sans/v2/OpenAISans-Medium.woff2") format("woff2");
}
@font-face {
font-display: swap;
font-family: "OpenAI Sans";
font-style: normal;
font-weight: 600;
src: url("https://cdn.openai.com/common/fonts/openai-sans/v2/OpenAISans-Semibold.woff2") format("woff2");
}
@font-face {
font-display: swap;
font-family: "OpenAI Sans";
font-style: normal;
font-weight: 700;
src: url("https://cdn.openai.com/common/fonts/openai-sans/v2/OpenAISans-Bold.woff2") format("woff2");
}
}
:root {
color-scheme: light dark only;
supported-color-schemes: light dark only;
}
/**
* Avoid browser level font resizing.
* 1. Windows Mobile
* 2. iOS / OSX
*/
body,
table,
td,
a {
-ms-text-size-adjust: 100%; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
font-family: 'OpenAI Sans', Helvetica, Arial, sans-serif;
}
/**
* Remove extra space added to tables and cells in Outlook.
*/
table,
td {
mso-table-rspace: 0pt;
mso-table-lspace: 0pt;
vertical-align: top; /* Align content to the top of table cells */
}
/**
* Better fluid images in Internet Explorer.
*/
img {
-ms-interpolation-mode: bicubic;
}
/**
* Remove blue links for iOS devices.
*/
a[x-apple-data-detectors] {
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
color: inherit !important;
text-decoration: none !important;
}
/**
* Fix centering issues in Android 4.4.
*/
div[style*="margin: 16px 0;"] {
margin: 0 !important;
}
body {
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/**
* Collapse table borders to avoid space between cells.
*/
table {
border-collapse: collapse !important;
}
a {
color: #898A8D;
}
.image-reset-bullets,
.image-reset-bullets .email-bullet-link {
color: #000000;
}
/* Give the ChatGPT logo pill consistent breathing room in light mode. */
.email-logo-pill {
background-color: #ffffff;
border-radius: 12px;
padding: 13px;
display: inline-block;
}
img {
height: auto;
line-height: 100%;
text-decoration: none;
border: 0;
outline: none;
}
/* Composer image sizing (mobile default) */
.composer-img {
width: 83px !important;
height: auto !important;
padding: 16px !important;
}
h1 {
font-size: 34px;
line-height: 41px;
font-weight: 400;
letter-spacing: 0.4px;
margin: 0;
}
h2 {
font-size: 18px;
font-weight: 400;
margin: 0;
line-height: 150%;
letter-spacing: -0.2px;
}
p {
font-size: 16px;
line-height: 130%;
font-weight: 500;
margin: 0;
}
p + p {
margin-top: 16px;
}
/* Intro blocks (H1/H2) sizing */
.intro-block {
width: 345px !important;
max-width: 345px !important;
}
/* Composer card sizing */
.composer-card {
width: 377px !important;
max-width: 377px !important;
}
/* Button styling */
a.button {
background-color: #000000 !important; /* default black */
border-radius: 24px !important; /* make button curvy */
padding: 11.5px 24px 11.5px !important; /* bigger size */
font-size: 16px !important; /* revert text size */
line-height: 24px !important;
}
a.button:active {
background-color: #414141 !important; /* dark gray on click */
border-radius: 36px !important;
}
/* CTA button hover state (supported clients only) */
a.button-invert:hover,
a.button-invert:focus {
background-color: #000000 !important;
background-image: none !important;
color: #FFFFFF !important;
border-color: #FFFFFF !important;
}
a.button-invert:hover span,
a.button-invert:focus span {
color: #FFFFFF !important;
}
@media (prefers-color-scheme: dark) {
a.button-invert {
background-color: #FFFFFF !important;
background-image: linear-gradient(#FFFFFF, #FFFFFF) !important;
color: #000000 !important;
border-color: #FFFFFF !important;
-webkit-text-fill-color: #000000 !important;
}
a.button-invert span {
color: #000000 !important;
-webkit-text-fill-color: #000000 !important;
}
}
[data-ogsc] a.button-invert,
[data-ogsb] a.button-invert {
background-color: #FFFFFF !important;
background-image: linear-gradient(#FFFFFF, #FFFFFF) !important;
color: #000000 !important;
border-color: #FFFFFF !important;
-webkit-text-fill-color: #000000 !important;
}
[data-ogsc] a.button-invert span,
[data-ogsb] a.button-invert span {
color: #000000 !important;
-webkit-text-fill-color: #000000 !important;
}
/* Ensure hover keeps text legible even with dark-mode overrides. */
a.button-invert:hover,
a.button-invert:focus {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
}
a.button-invert:hover span,
a.button-invert:focus span {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
}
/* Badges: use real rows so the stacked layout survives across email clients */
.badges {
width: 100% !important;
max-width: 128px !important;
}
.badges .badge {
width: 100% !important;
vertical-align: bottom !important;
}
.badges .badge img {
width: 120px !important;
max-width: 120px !important;
height: auto !important;
margin: 0 auto !important;
}
/* Desktop: larger typography */
@media screen and (min-width:480px) {
h1 {
font-size: 34px !important;
line-height: 41px !important;
letter-spacing: 0.4px;
font-weight: 400 !important;
}
h2 {
font-size: 18px;
font-weight: 400;
margin: 0;
line-height: 150%;
letter-spacing: -0.2px;
}
/* Header cell: increase side padding on desktop only */
td.header-td {
padding-left: 57px !important;
padding-right: 57px !important;
}
/* Composer image sizing for desktop */
.composer-img {
width: 98px !important;
}
/* Body content cells: increase side padding on desktop */
td.content-td {
padding-left: 60px !important;
padding-right: 60px !important;
}
td.footer-td {
padding-left: 56px !important;
padding-right: 56px !important;
}
p {
font-size: 16px !important;
line-height: 130% !important;
font-weight: 400;
}
td {
font-size: 10px !important;
line-height: 16px !important;
font-weight: 400;
}
a.button {
font-size: 16px !important;
line-height: 24px !important;
}
.footer-row td {
vertical-align: bottom !important;
padding-left: 0 !important;
}
/* Composer card width on desktop */
.composer-card {
width: 400px !important;
max-width: 400px !important;
}
/* Intro blocks width on desktop */
.intro-block {
width: 360px !important;
max-width: 360px !important;
}
}
/* Mobile stacking helper for columns */
@media screen and (max-width:480px) {
/* Ensure footer badges bottom-align with copyright on mobile */
td.header-td {
padding-left: 21px !important;
padding-right: 21px !important;
}
/* Body content cells: smaller side padding on mobile */
td.content-td {
padding-left: 24px !important;
padding-right: 24px !important;
}
td.footer-td {
padding-left: 20px !important;
padding-right: 20px !important;
}
.footer-row td {
vertical-align: bottom !important;
padding-left: 0 !important;
}
}
/* Dark mode: render the email on a true-black canvas with high-contrast cards */
@media (prefers-color-scheme: dark) {
body.generic,
.wrapperMod,
.heroMod03 {
background-color: #000000 !important;
}
body {
background-color: #000000 !important;
color: #ffffff !important;
}
.email-shell {
background-color: #000000 !important;
}
.content-td {
background-color: #000000 !important;
}
h1, h2, p {
color: #ffffff !important;
}
.heroMod03 h1,
.heroMod03 h2,
.heroMod03 p,
.box h1,
.box h2,
.box p,
.box a {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
}
.prompt-card-table {
background: #000000 !important;
box-shadow: none !important;
}
.prompt-card-border {
border-color: #FFFFFF !important;
}
.prompt-card-text,
.prompt-card-text h2 {
color: #FFFFFF !important;
}
.email-header-td {
background-color: #000000 !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.email-header-inner {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
.email-footer-surface {
background-color: #1f1f1f !important;
border-radius: 16px !important;
padding: 24px !important;
}
.email-footer-row {
background-color: #000000 !important;
}
.email-footer-logo-cell {
padding-bottom: 12px !important;
}
.email-logo-pill {
background-color: #ffffff !important;
border-radius: 12px !important;
padding: 4px !important;
display: inline-block !important;
}
.email-header-logo-pill {
border-radius: 16px !important;
padding: 12px !important;
}
.email-logo-pill img {
background-color: transparent !important;
}
.email-footer-logo-img {
width: 90px !important;
height: auto !important;
}
.email-footer-copy {
color: #ffffff !important;
padding-left: 0 !important;
}
.email-footer-copy a {
color: #ffffff !important;
}
.email-footer-copy .email-footer-copyright {
color: #a0a0a0 !important;
}
.image-reset-bullets,
.image-reset-bullets .email-bullet-link,
.image-reset-bullets .email-bullet-link strong {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
}
a.button-invert {
background-color: #FFFFFF !important;
background-image: linear-gradient(#FFFFFF, #FFFFFF) !important;
color: #000000 !important;
border-color: #FFFFFF !important;
-webkit-text-fill-color: #000000 !important;
}
a.button-invert span {
color: #000000 !important;
-webkit-text-fill-color: #000000 !important;
}
a.email-feedback-chip {
background-color: #2F2F2F !important;
color: #ECECEC !important;
border-color: #424242 !important;
-webkit-text-fill-color: #ECECEC !important;
}
}
/* Dark mode fallback for clients that use data-ogsc/data-ogsb */
[data-ogsc] body,
[data-ogsb] body {
background-color: #000000 !important;
color: #ffffff !important;
}
[data-ogsc] body.generic,
[data-ogsb] body.generic,
[data-ogsc] .wrapperMod,
[data-ogsb] .wrapperMod,
[data-ogsc] .heroMod03,
[data-ogsb] .heroMod03 {
background-color: #000000 !important;
}
[data-ogsc] .email-shell,
[data-ogsb] .email-shell {
background-color: #000000 !important;
}
[data-ogsc] .content-td,
[data-ogsb] .content-td {
background-color: #000000 !important;
}
[data-ogsc] h1,
[data-ogsb] h1,
[data-ogsc] h2,
[data-ogsb] h2,
[data-ogsc] p,
[data-ogsb] p {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
}
[data-ogsc] .heroMod03 h1,
[data-ogsb] .heroMod03 h1,
[data-ogsc] .heroMod03 h2,
[data-ogsb] .heroMod03 h2,
[data-ogsc] .heroMod03 p,
[data-ogsb] .heroMod03 p,
[data-ogsc] .box h1,
[data-ogsb] .box h1,
[data-ogsc] .box h2,
[data-ogsb] .box h2,
[data-ogsc] .box p,
[data-ogsb] .box p,
[data-ogsc] .box a,
[data-ogsb] .box a {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
}
[data-ogsc] .prompt-card-table,
[data-ogsb] .prompt-card-table {
background: #000000 !important;
box-shadow: none !important;
}
[data-ogsc] .prompt-card-border,
[data-ogsb] .prompt-card-border {
border-color: #FFFFFF !important;
}
[data-ogsc] .prompt-card-text,
[data-ogsb] .prompt-card-text,
[data-ogsc] .prompt-card-text h2,
[data-ogsb] .prompt-card-text h2 {
color: #FFFFFF !important;
}
[data-ogsc] .email-header-td,
[data-ogsb] .email-header-td {
background-color: #000000 !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
[data-ogsc] .email-footer-surface,
[data-ogsb] .email-footer-surface {
background-color: #1f1f1f !important;
border-radius: 16px !important;
padding: 24px !important;
}
[data-ogsc] .email-footer-row,
[data-ogsb] .email-footer-row {
background-color: #000000 !important;
}
[data-ogsc] .email-header-inner,
[data-ogsb] .email-header-inner {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
[data-ogsc] .email-footer-logo-cell,
[data-ogsb] .email-footer-logo-cell {
padding-bottom: 12px !important;
}
[data-ogsc] .email-logo-pill,
[data-ogsb] .email-logo-pill {
background-color: #ffffff !important;
border-radius: 12px !important;
padding: 4px !important;
display: inline-block !important;
}
[data-ogsc] .email-header-logo-pill,
[data-ogsb] .email-header-logo-pill {
border-radius: 16px !important;
padding: 12px !important;
}
[data-ogsc] .email-logo-pill img,
[data-ogsb] .email-logo-pill img {
background-color: transparent !important;
}
[data-ogsc] .email-footer-logo-img,
[data-ogsb] .email-footer-logo-img {
width: 90px !important;
height: auto !important;
}
[data-ogsc] .email-footer-copy,
[data-ogsb] .email-footer-copy {
color: #ffffff !important;
padding-left: 0 !important;
}
[data-ogsc] .email-footer-copy a,
[data-ogsb] .email-footer-copy a {
color: #ffffff !important;
}
[data-ogsc] .email-footer-copy .email-footer-copyright,
[data-ogsb] .email-footer-copy .email-footer-copyright {
color: #a0a0a0 !important;
}
[data-ogsc] .image-reset-bullets,
[data-ogsb] .image-reset-bullets,
[data-ogsc] .image-reset-bullets .email-bullet-link,
[data-ogsb] .image-reset-bullets .email-bullet-link,
[data-ogsc] .image-reset-bullets .email-bullet-link strong,
[data-ogsb] .image-reset-bullets .email-bullet-link strong {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
}
[data-ogsc] a.button-invert,
[data-ogsb] a.button-invert {
background-color: #FFFFFF !important;
background-image: linear-gradient(#FFFFFF, #FFFFFF) !important;
color: #000000 !important;
border-color: #FFFFFF !important;
-webkit-text-fill-color: #000000 !important;
}
[data-ogsc] a.button-invert span,
[data-ogsb] a.button-invert span {
color: #000000 !important;
-webkit-text-fill-color: #000000 !important;
}
[data-ogsc] a.email-feedback-chip,
[data-ogsb] a.email-feedback-chip {
background-color: #2F2F2F !important;
color: #ECECEC !important;
border-color: #424242 !important;
-webkit-text-fill-color: #ECECEC !important;
}
a.email-feedback-chip:hover,
a.email-feedback-chip:focus {
background-color: #f3f3f3 !important;
background-image: linear-gradient(#f3f3f3, #f3f3f3) !important;
border-color: #b4b4b4 !important;
color: #0d0d0d !important;
-webkit-text-fill-color: #0d0d0d !important;
}
/* RTL mirroring */
[dir="rtl"] body,
[dir="rtl"] table,
[dir="rtl"] td,
[dir="rtl"] a {
direction: rtl !important;
}
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] p {
text-align: right !important;
}
ワンクリックで新しい背景や雰囲気、スタイルを試せます。
ほんの数語で写真が見違えるように
プリセットスタイルの中からヒントを得ることも、ほんの数語でオリジナルのスタイルを作ることもできます。
チャットを開始
チャットを開始
写真からぬいぐるみ風の画像を生成
3Dグラムドールを作成
友だちをグミ風に
部屋の模様替え
画像作成のホーム
ほんの数語で手持ちの写真にスタイルを追加したり、まったく新しい画像を作ったり。ChatGPT Imagesならすべてが可能です。
ChatGPT Imagesを試す
ChatGPT Imagesを試す
このメールは役に立ちましたか？
役に立った
役に立たなかった
OpenAI
1455 3rd StreetSan Francisco, CA 94158
配信停止
プライバシーポリシー · 利用規約
OpenAI © 2015–2026
