:root { --rakuten-red: #bf0000; --text-color: #333; --bg-color: #fcfcfc; }
body { font-family: 'Noto Sans JP', sans-serif; margin: 0; padding: 0; background-color: var(--bg-color); color: var(--text-color); }
header { background: #fff; border-bottom: 2px solid var(--rakuten-red); padding: 15px 0; margin-bottom: 30px; }
.header-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.logo { font-size: 24px; font-weight: bold; color: var(--rakuten-red); text-decoration: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; flex-wrap: wrap; gap: 40px; }
.left-col { flex: 1; min-width: 400px; }
.canvas-wrapper { border: 1px solid #ddd; background-color: #fff; padding: 10px; text-align: center; }
.canvas-bg { display: inline-block; background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%); background-size: 20px 20px; background-position: 0 0, 10px 10px; }
.right-col { flex: 1; min-width: 350px; }
h1.product-title { font-size: 22px; margin-top: 0; border-bottom: 1px solid #ddd; padding-bottom: 15px; }
.price-area { margin: 20px 0; background: #f8f8f8; padding: 15px; border-radius: 4px; }
.price-value { font-size: 28px; font-weight: bold; color: var(--rakuten-red); }
.form-section { margin-bottom: 25px; }
.form-label { display: block; font-weight: bold; margin-bottom: 8px; font-size: 14px; }
select, input[type="text"], textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; margin-bottom: 10px; box-sizing: border-box; }

.tabs { display: flex; gap: 5px; margin-bottom: 10px; }
.tab-btn { flex: 1; padding: 10px; border: 1px solid #ccc; background: #f0f0f0; cursor: pointer; font-weight: bold; }
.tab-btn.active { background: var(--rakuten-red); color: white; border-color: var(--rakuten-red); }
.panel { display: none; padding: 15px; border: 1px solid #ddd; border-radius: 0 0 4px 4px; background: white; }
.panel.active { display: block; }

.file-upload-btn { display: inline-block; width: 100%; padding: 15px; background: #f0f0f0; border: 2px dashed #999; text-align: center; cursor: pointer; border-radius: 4px; box-sizing: border-box; }
input[type="file"] { display: none; }
.card-element-container { padding: 12px; border: 1px solid #ccc; border-radius: 4px; background: white; margin-bottom: 15px; }
.buy-btn { width: 100%; padding: 18px; background-color: var(--rakuten-red); color: white; font-size: 20px; font-weight: bold; border: none; border-radius: 4px; cursor: pointer; transition: 0.2s; }
.buy-btn:hover { background-color: #a00000; }

.preview-btn { width: 100%; padding: 12px; background-color: #333; color: white; border: none; font-weight: bold; margin-top: 10px; cursor: pointer; }
.preview-btn:hover { background-color: #555; }

.result-box { margin-top: 30px; border: 1px solid var(--rakuten-red); padding: 10px; display: none; }
.result-box img { max-width: 100%; border: 1px solid #eee; }

.modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); }
.modal-content { background-color: #fefefe; margin: 5% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 600px; text-align: center; border-radius: 8px; }
.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }