<link rel="canonical" href="https://www.infirmiere.co.jp/shop/secure/name.aspx">
<link rel="stylesheet" type="text/css" href="../../css/usr/feature/name/name.css">
<style type="text/css">
@charset "UTF-8";

/* ========================================
   基本設定
======================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: linear-gradient(135deg, #f5f5dc, #fff8dc);
    min-height: 100vh;
    padding: 20px;
    color: #000;
}

h2 {
    font-weight: bold;
}

.form{
    color: #2e73ba!important;
}

/* ========================================
   共通ユーティリティクラス
======================================== */
.text-center {
    text-align: center;
}

.mb-20 {
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: bold;
    display: flex;
}

.flex-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    line-height: 1.6;
}

.flex-box-start {
    justify-content: flex-start;
}

/* カラークラス */
.blue_color {
    color: #0f51b8;
}

.pink_color {
    color: #D83293;
}

.red_color {
    color: #FF0000;
}

/* ========================================
   ガイドショップメニュー
======================================== */
.guide-shop-menu {
    border-top: 2px solid #DFDFDF;
    border-bottom: 2px solid #DFDFDF;
    padding-top: 10px;
    margin-bottom: 20px;
}

.guide-shop-menu li {
    margin-right: 20px;
    margin-bottom: 10px;
}

.guide-shop-menu .icon-link:before {
    color: #2973BA;
    font-size: 20px;
    vertical-align: middle;
    margin-right: 1em;
}

/* ========================================
   メインコンテナ
======================================== */
.name_container {
    max-width: 964px;
    margin: 40px auto;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.name_container h2 {
    margin-bottom: 7px;
}

.name_container header {
    background-color: transparent;
    text-align: center;
}

.name_container .mb-20 {
    display: block;
}

/* ========================================
   サービス紹介セクション
======================================== */
.service-intro {
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.service-intro p {
    margin-top: 16px;
    font-size: 18px;
}

.service-title {
    color: #1976d2;
    font-size: 48px;
    font-weight: bold;
}

.service-subtitle {
    background: linear-gradient(135deg, #00bcd4, #4fc3f7);
    color: white;
    padding: 0px 20px;
    border-radius: 20px;
    display: inline-block;
    font-weight: bold;
    font-size: 48px;
    text-align: center;
}

.mv-image {
    width: 100%;
    border-radius: 12px;
}

/* ========================================
   刺繍タイプカード
======================================== */
.embroidery-types {
    display: flex;
    gap: 20px;
    margin: 50px 0;
}

.type-card {
    flex: 1;
    font-size: 20px;
    padding: 15px;
    border-radius: 15px;
    text-align: center;
    font-weight: bold;
    color: white;
    letter-spacing: 0.05em;
}

.type-a {
    background-color: #EC6182;
}

.type-b {
    background-color: #1884CE;
}

.type-c {
    background-color: #2FB066;
}

.type-card img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* ========================================
   申し込みプロセスステップ
======================================== */
.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 30px;
}

.process-step {
    text-align: center;
    padding: 20px 10px;
    border-radius: 15px;
    color: white;
    font-weight: bold;
    font-size: 18px;
}

.process-steps a {
    text-decoration: none;
    color: #fff;
}

.step-1 {
    background: linear-gradient(135deg, #4fc3f7, #29b6f6);
}

.step-2 {
    background: linear-gradient(135deg, #ffb74d, #ff9800);
}

.step-3 {
    background: linear-gradient(135deg, #81c784, #66bb6a);
}

.step-4 {
    background: linear-gradient(135deg, #f06292, #ec407a);
}

/* ========================================
   ステップコンテナ背景
======================================== */
.step-1-container {
    background: #b4dcf5;
}

.step-2-container {
    background: #fde8c9;
}

.step-3-container {
    background: #d9ebd1;
}

.step-4-container {
    background: #fce4ec;
}

/* ========================================
   ステップヘッダー
======================================== */
.step-header {
    background: linear-gradient(135deg, #ffb74d, #ff9800);
    color: white;
    padding: 15px 30px;
    border-radius: 20px;
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(244, 196, 48, 0.3);
}

.step-header-1 {
    background: linear-gradient(135deg, #4fc3f7, #29b6f6);
}

.step-header-2 {
    background: linear-gradient(135deg, #ffb74d, #ff9800);
}

.step-header-3 {
    background: linear-gradient(135deg, #81c784, #66bb6a);
}

.step-header-4 {
    background: linear-gradient(135deg, #f06292, #ec407a);
}

/* ========================================
   衣類オプション（ステップ1）
======================================== */
.clothing-options {
    background: #b4dcf5;
    border-radius: 20px;
}

.clothing-grid-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.clothing-item {
    text-align: center;
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: space-between;
}

.clothing-icon {
    width: 90%;
    margin: 0 auto 10px;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clothing-icon img {
    width: 80%;
    object-fit: cover;
}

.clothing-item h4 {
    margin-bottom: 5px;
    font-size: 24px;
    font-weight: bold;
}

.clothing-item small {
    margin-top: auto;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
}

/* ========================================
   パターングリッド（ステップ2）
======================================== */
.pattern-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.pattern-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    border: 3px solid #f8bbd9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pattern-title {
    font-weight: bold;
    font-size: 24px;
}

.pattern-card img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ========================================
   マーク選択
======================================== */
.mark-selection {
    background: #ffffff;
    border: 3px solid #ff9800;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
}

.mark-selection h3 {
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 20px;
    color: #ff9800;
}

.mark-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.mark-item {
    text-align: center;
    cursor: pointer;
}

.mark-icon {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.mark-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mark-label {
    font-size: 12px;
    color: #666;
}

/* ========================================
   色選択オプション（ステップ3）
======================================== */
.color-options {
    background: #f0fdf4;
    border-radius: 20px;
    padding: 30px;
}

.color-options .mb-20 {
    display: block;
}

.color-options .pink_color {
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: 20px;
}

.color-options_text {
    text-align: left;
    font-size: 18px;
    line-height: 1.3;
    display: block;
    margin-bottom: 20px;
}

/* 色ジャンプボタン */
.color-jump-buttons {
    background: #fff;
    border: 2px solid #333;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 30px;
}

.color-jump-header {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 8px 15px;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 15px;
}

.color-jump-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.color-jump-btn {
    padding: 10px 5px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    border-radius: 4px;
    transition: opacity 0.2s;
}

.color-jump-btn:hover {
    opacity: 0.8;
}

/* 各色のボタン */
.color-btn-crimson {
    background-color: #dc143c;
    color: #fff!important;
}

.color-btn-beige {
    background-color: #f5f5dc;
    color: #000!important;
}

.color-btn-green {
    background-color: #2fb066;
    color: #000!important;
}

.color-btn-white {
    background-color: #ffffff;
    color: #000!important;
    border: 1px solid #ddd;
}

.color-btn-pink {
    background-color: #ffb6c1;
    color: #000!important;
}

.color-btn-sax {
    background-color: #b3e5fc;
    color: #000!important;
}

.color-btn-yellow {
    background-color: #ffeb3b;
    color: #000!important;
}

.color-btn-gray {
    background-color: #9e9e9e;
    color: #000!important;
}

.color-btn-champagne {
    background-color: #f7e7b9;
    color: #000!important;
}

.color-btn-navy {
    background-color: #1a237e;
    color: #fff!important;
}

.color-btn-light-pink {
    background-color: #ffc1e3;
    color: #000!important;
}

.color-btn-deep-pink {
    background-color: #e91e63;
    color: #fff!important;
}

/* 色プレビューコンテナ */
.color-preview-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.color-group {
    display: grid;
    grid-template-columns: 20% 40% 40%;
    align-items: center;
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 15px 0;
}

.color-group-header-row {
    border: 1px solid #000;
    background: transparent;
}

.color-group-header {
    font-weight: bold;
    text-align: center;
    padding: 5px;
}

.white-bg {
    background: #fff;
    border-radius: 5px;
    color: #000;
    width: 97%;
}

.navy-bg {
    background: #1a237e;
    border-radius: 5px;
    color: #fff;
    width: 97%;
}

/* 各色グループの背景色 */
.color-group-crimson {
    background-color: #dc143c;
}

.color-group-beige {
    background-color: #f5f5dc;
}

.color-group-green {
    background-color: #2fb066;
}

.color-group-white {
    background-color: #ffffff;
}

.color-group-pink {
    background-color: #ffb6c1;
}

.color-group-sax {
    background-color: #b3e5fc;
}

.color-group-yellow {
    background-color: #ffeb3b;
}

.color-group-gray {
    background-color: #9e9e9e;
}

.color-group-champagne {
    background-color: #f7e7b9;
}

.color-group-navy {
    background-color: #1a237e;
}

.color-group-light-pink {
    background-color: #ffc1e3;
}

.color-group-deep-pink {
    background-color: #e91e63;
}

/* 色ヘッダーのテキストカラー */
.color-header-white {
    color: #fff;
}

.color-header-dark {
    color: #333;
}

.embroidery-image-item {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.embroidery-image-item img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* ========================================
   書体選択オプション（ステップ4）
======================================== */
.font-options {
    background: #fce4ec;
    border-radius: 20px;
    padding: 0;
    margin-top: 20px;
}

.font-group {
    margin-bottom: 30px;
    padding: 20px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.font-group-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.font-group-grid-2col {
    grid-template-columns: 1fr 1fr;
}

.font-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.font-group-single {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.font-sample {
    background: #fff3e0;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    border: 2px solid #e91e63;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.font-sample img {
    max-width: 100%;
    height: auto;
}

.font-sample div {
    font-weight: bold;
    font-size: 24px;
    letter-spacing: 0.01em;
}

.font-warning {
    color: #e91e63;
    font-weight: bold;
    margin-top: 10px;
    font-size: 16px !important;
    line-height: 1.2;
}

.manabe-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.manabe-row img {
    max-width: 200px;
    height: auto;
    border-radius: 6px;
}

.manabe-row .manabe-row-block {
    font-size: 16px;
}

.manabe-note {
    margin-bottom: 10px;
}

/* ========================================
   関連セクショングリッド
======================================== */
.related-sections-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 30px;
}

.shoes-sandals-section,
.stamp-section,
.additional-section {
    border-radius: 20px;
    padding: 30px;
    background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
}

/* ========================================
   シューズ・サンダルセクション
======================================== */
.shoes-header {
    background: linear-gradient(135deg, #00bcd4, #4fc3f7);
    color: white;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 30px;
}

.shoes-price-badge {
    background: linear-gradient(135deg, #ff6b9d, #ffa8cc);
    color: white;
    padding: 10px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1.3;
}

.shoes-price-badge span {
    font-size: 10px;
}

.shoes-content {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.shoes-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: center;
}

.shoes-note {
    font-size: 14px;
    text-align-last: left;
}

.circle-background {
    background: #e91e63;
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 18px;
    margin-bottom: 10px;
}

/* ========================================
   印鑑セクション
======================================== */
.stamp-header {
    background: linear-gradient(135deg, #00bcd4, #4fc3f7);
    color: white;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 30px;
}

.stamp-header img {
    max-width: 120px;
    height: auto;
    border-radius: 6px;
    flex-shrink: 0;
}

.stamp-content {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stamp-size-img {
    max-width: 80%;
    border-radius: 8px;
    margin: 0 auto;
}

.stamp-info {
    margin-bottom: 20px;
}

.stamp-indent {
    margin-left: 1em;
}

.stamp-emphasis {
    font-weight: bold;
}

.stamp-additional-info {
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.stamp-additional-info img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* ========================================
   追加セクション（ネームタグ）
======================================== */
.additional-section-img {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.additional-section-img img {
    width: 48%;
    max-width: none;
}

.additional-header {
    background: linear-gradient(135deg, #00bcd4, #4fc3f7);
    color: white;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 30px;
}

.additional-header h2 {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 7px;
}

.additional-price-badge {
    background: linear-gradient(135deg, #ff6b9d, #ffa8cc);
    color: white;
    padding: 12px 14px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    text-align: center;
    flex-shrink: 0;
}

/* ========================================
   ボタン
======================================== */
.btn {
    display: inline-block;
    padding: 12px 40px 12px 24px;
    background: linear-gradient(180deg, #4a7ab8 0%, #2d5a8f 100%);
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    width: 100%;
    margin: 30px auto 0;
}

.btn:hover {
    background: linear-gradient(180deg, #5a8ac8 0%, #3d6a9f 100%);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.btn a {
    color: #fff;
}

/* ========================================
   注意事項セクション
======================================== */
.notes-section {
    background: #e8f5e8;
    border-radius: 20px;
    padding: 30px;
    margin-top: 40px;
}

.notes-section h3 {
    font-size: 24px;
    background: #d32f2f;
    color: white;
    padding: 5px 50px;
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 20px;
}

.notes-item {
    margin-bottom: 20px;
}

.notes-item h4 {
    color: #d32f2f;
    font-size: 1.1em;
    margin-bottom: 5px;
    border-bottom: 2px dotted #d32f2f;
    padding-bottom: 5px;
}

.notes-item ul li {
    list-style: none;
    position: relative;
    padding-left: 1.2em;
}

.notes-item ul li::before {
    content: '・';
    position: absolute;
    left: 0;
}

/* ========================================
   注意ボックス
======================================== */
.notice-box {
    background: #fff3e0;
    padding: 15px;
    border-radius: 10px;
    margin-top: 20px;
}

.notice-box h4 {
    font-size: 20px;
}

.notice-box small {
    font-size: 18px;
}


/* ========================================
   スマホ対応（768px以下）
======================================== */
@media screen and (max-width: 768px) {

    /* ①.embroidery-types を1列に */
    .embroidery-types {
        flex-direction: column;
        gap: 12px;
        margin: 24px 0;
    }

    .type-card {
        flex: none;
        width: 100%;
    }

    /* ②.process-steps を2列に */
    .process-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 20px;
    }

    /* ③.clothing-grid-group を1列に */
    .clothing-grid-group {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 12px;
    }

    /* ④.pattern-grid を1列に */
    .pattern-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 24px;
    }

    /* ⑤.mark-grid を4列に */
    .mark-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-bottom: 12px;
    }

    .mark-icon {
        width: 56px;
        height: 56px;
    }

    .mark-label {
        font-size: 10px;
    }

    /* ⑥.color-jump-grid を3列に */
    .color-jump-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .color-jump-btn {
        font-size: 12px;
        padding: 8px 4px;
    }

    /* ⑦.color-group-header-row を1列に */
    .color-group-header-row {
        grid-template-columns: 1fr;
        padding: 10px 0;
    }

    .color-group-header-row .color-group-header {
        text-align: left;
        padding: 6px 12px;
        border-bottom: 1px solid #ccc;
    }

    .color-group-header-row .color-group-header:last-child {
        border-bottom: none;
    }

    .color-group-header-row .white-bg,
    .color-group-header-row .navy-bg {
        width: 100%;
        border-radius: 0;
    }

    /* ⑧.color-group を1列に */
    .color-group {
        grid-template-columns: 1fr;
        padding: 10px 12px;
        gap: 8px;
        border-radius: 10px;
    }

    .color-group .color-group-header {
        text-align: left;
        padding: 4px 0;
    }

    .color-group .embroidery-image-item img {
        max-width: 80%;
    }

    .white-bg,
    .navy-bg {
        width: 100%;
        padding: 6px 0;
        border-radius: 4px;
    }

    /* ⑨.font-group-grid を1列に */
    .font-group-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* .font-group-grid-2col も1列に統一 */
    .font-group-grid-2col {
        grid-template-columns: 1fr;
    }

    /* ⑩.font-group-single を1列に */
    .font-group-single {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* ⑪.related-sections-grid を1列に */
    .related-sections-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 20px;
    }

    /* ⑫余白・各要素のサイズ調整 */

    /* コンテナ */
    .name_container {
        padding: 16px;
        margin: 16px auto;
        border-radius: 12px;
    }

    /* サービスタイトル */
    .service-title {
        font-size: 28px;
        text-align: center;
    }

    .service-subtitle {
        font-size: 22px;
        padding: 4px 16px;
    }

    .service-intro {
        padding: 16px;
        margin-bottom: 20px;
    }

    .service-intro p {
        font-size: 15px;
        margin-top: 12px;
    }

    /* ステップヘッダー */
    .step-header {
        font-size: 20px;
        padding: 12px 16px;
        margin-bottom: 16px;
        border-radius: 12px;
    }

    /* プロセスステップ */
    .process-step {
        font-size: 13px;
        padding: 12px 6px;
        border-radius: 10px;
    }

    /* 衣類 */
    .clothing-options {
        border-radius: 12px;
        padding: 14px;
    }

    .clothing-item {
        padding: 14px;
        border-radius: 10px;
    }

    .clothing-item h4 {
        font-size: 18px;
    }

    .clothing-item small {
        font-size: 14px;
    }

    /* パターン */
    .pattern-card {
        padding: 14px;
        border-radius: 10px;
    }

    .pattern-title {
        font-size: 18px;
        margin-bottom: 8px;
    }

    /* マーク */
    .mark-selection {
        padding: 14px;
        border-radius: 10px;
    }

    .mark-selection h3 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    /* カラーオプション */
    .color-options {
        padding: 16px;
        border-radius: 12px;
    }

    .color-options .pink_color {
        font-size: 15px;
    }

    .color-options_text {
        font-size: 14px;
    }

    .color-jump-buttons {
        padding: 10px;
        margin-bottom: 16px;
    }

    .color-preview-container {
        gap: 10px;
    }

    /* 書体 */
    .font-group {
        padding: 14px;
        border-radius: 10px;
        margin-bottom: 16px;
    }

    .font-sample {
        min-height: 120px;
        padding: 14px;
        gap: 8px;
    }

    .font-sample div {
        font-size: 16px;
    }

    .manabe-row {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .manabe-row img {
        max-width: 100%;
    }

    /* 関連セクション */
    .shoes-sandals-section,
    .stamp-section,
    .additional-section {
        padding: 16px;
        border-radius: 12px;
    }

    .shoes-header,
    .stamp-header,
    .additional-header {
        padding: 14px;
        border-radius: 12px;
        margin-bottom: 16px;
    }

    .shoes-content,
    .stamp-content {
        padding: 16px;
        border-radius: 12px;
    }

    .circle-background {
        width: 65%;
        font-size: 14px;
        padding: 16px 8px;
    }

    .stamp-size-img {
        max-width: 100%;
    }

    /* 注意事項 */
    .notes-section {
        padding: 16px;
        border-radius: 12px;
        margin-top: 24px;
    }

    .notes-section h3 {
        font-size: 16px;
        padding: 5px 16px;
        display: block;
        text-align: center;
    }

    /* ボタン */
    .btn {
        font-size: 16px;
        padding: 12px 20px;
        margin-top: 16px;
    }

    /* 注意ボックス */
    .notice-box {
        padding: 12px;
    }

    .notice-box h4 {
        font-size: 16px;
    }

    .notice-box small {
        font-size: 14px;
    }

}

</style>