@import url('https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap');

.wafu-hyoshi {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* 背景の設定 */
    background-image: url('https://dl.dropboxusercontent.com/scl/fi/hn0t6ibehigz71wclc9wr/10-31-23.jpg?rlkey=8ij7fn7kven0v7nwvt8c59atg&raw=1') !important;
    
    /* 【重要】全体を表示する設定 */
    background-size: contain !important; 
    background-repeat: no-repeat !important;
    background-position: center !important;
    
    /* 表示サイズの調整 */
    width: 95% !important;
    max-width: 350px !important;
    /* 画像の比率に合わせて高さを自動調整 */
    aspect-ratio: 1 / 1 !important; 
    
    margin: 20px auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.wafu-title {
    font-family: 'Zen Kurenaido', sans-serif !important;
    font-size: 20px !important;
    letter-spacing: 0.3em !important;
    color: #333333 !important;
    text-align: center !important;
    /* 文字が重なるため、白く縁取りして読みやすく */
    text-shadow: 
        2px 2px 5px rgba(255,255,255,1),
        -2px -2px 5px rgba(255,255,255,1),
        0 0 10px rgba(255,255,255,0.8) !important;
}

.wafu-sub {
    margin-top: 15px !important;
}

.wafu-sub a {
    font-family: 'Zen Kurenaido', sans-serif !important;
    color: #4a4a4a !important;
    text-decoration: none !important;
    font-size: 14px !important;
    background: rgba(255,255,255,0.6) !important;
    padding: 4px 15px !important;
    border-radius: 10px !important;
}



/* --- 共通の基本デザイン --- */
.wafu-box {
    position: relative !important;
    margin: 30px auto !important;
    padding: 35px 25px !important;
    width: 88% !important;
    max-width: 450px !important;
    background: #fffcfc !important;
    border-radius: 20px !important;
    color: #444444 !important;
    font-family: 'Zen Kurenaido', sans-serif !important;
    line-height: 1.8 !important;
    box-sizing: border-box !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
}

.wafu-box::before, .wafu-box::after {
    content: "✿" !important;
    position: absolute !important;
    font-size: 14px !important;
    z-index: 2;
}
.wafu-box::before { top: 12px; left: 12px; }
.wafu-box::after { bottom: 12px; right: 12px; }

/* --- 紅赤（#B43246）バージョンの装飾 --- */
.wafu-box.aka {
    border: 2px solid #B43246 !important;
    outline: 1px dashed #B43246 !important;
    outline-offset: -8px;
}
.wafu-box.aka::before, .wafu-box.aka::after { color: #B43246 !important; }
.wafu-box.aka .wafu-box-title { 
    color: #B43246 !important; 
    border-bottom: 2px dotted #B43246 !important;
}

/* --- あやめ色（#625DA1）バージョンの装飾 --- */
.wafu-box.murasaki {
    border: 2px solid #625DA1 !important;
    outline: 1px dashed #625DA1 !important;
    outline-offset: -8px;
}
.wafu-box.murasaki::before, .wafu-box.murasaki::after { color: #625DA1 !important; }
.wafu-box.murasaki .wafu-box-title { 
    color: #625DA1 !important; 
    border-bottom: 2px dotted #625DA1 !important;
}

/* タイトルの共通設定 */
.wafu-box-title {
    display: block !important;
    font-size: 1.1em !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    letter-spacing: 0.2em !important;
}



/* --- 注意書き用：墨色（すみいろ）のデザイン --- */
.wafu-box.chui {
    border: 1px solid #333333 !important; /* 墨色の細い線 */
    background: #fdfdfd !important;
    border-radius: 5px !important; /* 角は丸めすぎず、少しカチッと */
    outline: none !important;
    box-shadow: none !important;
}

/* 注意書き用のアイコン（！マークなど） */
.wafu-box.chui::before {
    content: "◆" !important; /* お花の代わりに菱形 */
    position: absolute !important;
    top: 10px;
    left: 10px;
    color: #333333 !important;
    font-size: 10px !important;
}

.wafu-box.chui::after {
    content: "◆" !important;
    position: absolute !important;
    bottom: 10px;
    right: 10px;
    color: #333333 !important;
    font-size: 10px !important;
}

/* 注意書きのタイトル（少し強調） */
.wafu-box.chui .wafu-box-title {
    color: #333333 !important;
    border-bottom: 1px solid #333333 !important;
    font-weight: bold !important;
    letter-spacing: 0.1em !important;
}

/* 本文を少し読みやすくする設定 */
.wafu-box.chui p {
    font-size: 14px !important;
    margin: 0 !important;
    color: #444444 !important;
}



/* --- Twitter風：最新アイコン(🐾版) --- */
.tw-box { display: flex; padding: 12px; border-bottom: 1px solid #eff3f4; background: #fff; font-family: 'Zen Kurenaido', sans-serif; text-align: left; box-sizing: border-box; }

/* アイコン：余白を出さず中央で丸く切り抜く */
.tw-img { 
    width: 48px !important; 
    height: 48px !important; 
    border-radius: 50% !important; 
    margin-right: 12px !important; 
    flex-shrink: 0 !important; 
    overflow: hidden !important; 
    background-size: cover !important; 
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.tw-main { flex: 1; min-width: 0; }
.tw-user { font-size: 14px; font-weight: bold; color: #0f1419; margin-bottom: 2px; display: block; }
.tw-id { font-weight: normal; color: #536471; margin-left: 4px; font-size: 13px; }
.tw-body { font-size: 15px; color: #0f1419; line-height: 1.4; white-space: pre-wrap; }

/* 下のボタンエリア */
.tw-foot { display: flex; gap: 20px; margin-top: 10px; font-size: 13px; color: #536471; align-items: center; }
.paw-icon { color: #99aab5; font-size: 14px; margin-right: 4px; }
.heart-icon { color: #f91880; margin-right: 4px; }

/* --- アイコンURL --- */
/* 弦月 */
.a { background-image: url('https://www.dropbox.com/scl/fi/mn5qlc9nxrusq0uw0nkec/2026-01-31-18-55-32.png?rlkey=cf2b234y0n7vflevtnt5lxm59&raw=1') !important; }

/* 長尾 */
.b { background-image: url('https://www.dropbox.com/scl/fi/v9zf4voxxiusjr5sbtvqv/2026-01-31-18-56-02.png?rlkey=tfv4stcevy6hkvoosydid6uxz&raw=1') !important; }