/* =========================================================
   スマホ版｜ABOUT・OUR VALUES・OKAERI LETTER の再設計（比較用）
   ---------------------------------------------------------
   ・画面幅899px以下だけに効きます。PC表示は変わりません。
   ・HTML・文章・写真・リンク・CMS（データの表示部分）には触れず、
     装飾とレイアウトだけを CSS で変えています。
   ・アイコン・小枝・ミモザ・切手などの飾りは、すべてCSS内の簡単な線画（SVG）です。
     参考画像を背景として貼り付けてはいません。
   ・英字の見出しだけ手書き風の Caveat（Google Fonts）を使います。
   ========================================================= */

@media (max-width: 899px) {

  :root {
    --ms-paper: #fffdf9;
    --ms-shadow: 0 4px 16px rgba(70, 56, 47, 0.07), 0 1px 3px rgba(70, 56, 47, 0.05);
    --ms-hand: 'Caveat', 'Zen Maru Gothic', cursive;

    /* 飾りの線画（SVG） */
    --ms-sprig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 90' fill='none' stroke='%237db37d' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M20 88C18 66 21 40 27 6'/%3E%3Cpath d='M21 70c-6-2-11-7-13-14 6 1 11 6 13 14z' fill='%23d6e8d3'/%3E%3Cpath d='M22 52c6-3 10-9 11-16-6 2-10 8-11 16z' fill='%23d6e8d3'/%3E%3Cpath d='M23 36c-6-2-10-7-11-13 6 1 10 6 11 13z' fill='%23d6e8d3'/%3E%3Cpath d='M26 18c4-3 7-7 7-12-5 2-7 7-7 12z' fill='%23d6e8d3'/%3E%3C/svg%3E");
    --ms-house-coral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4493f' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3.5 11.5 12 4l8.5 7.5'/%3E%3Cpath d='M6 10v10h12V10'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");
    --ms-house-mustard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 11.5 12 4l8.5 7.5V20h-17z' fill='%23f3b23a'/%3E%3Cpath d='M10 20v-5h4v5z' fill='%23fff7e6'/%3E%3C/svg%3E");
    --ms-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4493f' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 22V9'/%3E%3Cpath d='M12 13c-4 0-7-3-7-7 4 0 7 3 7 7z' fill='%23fbd9d4'/%3E%3Cpath d='M12 10c3 0 6-2.5 6-6-3.5 0-6 2.5-6 6z' fill='%23fbd9d4'/%3E%3C/svg%3E");
    --ms-ic-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4493f' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3.5 11.5 12 4l8.5 7.5'/%3E%3Cpath d='M6 10v10h12V10'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");
    --ms-ic-smile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e7f8b' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.6 14.2c1.9 2.3 4.9 2.3 6.8 0'/%3E%3Cpath d='M9 10h.01M15 10h.01' stroke-width='2.4'/%3E%3C/svg%3E");
    --ms-ic-bowl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23946509' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12h17c-.4 4.4-3.9 7.5-8.5 7.5S3.9 16.4 3.5 12z'/%3E%3Cpath d='M9 9c-.8-1.2.8-2.3 0-3.5M12 9c-.8-1.2.8-2.3 0-3.5M15 9c-.8-1.2.8-2.3 0-3.5'/%3E%3C/svg%3E");
    --ms-ic-sprout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f7f4f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5V11'/%3E%3Cpath d='M12 12.5C12 8 9 5.5 4.5 5.5 4.5 10 7.5 12.5 12 12.5z'/%3E%3Cpath d='M12 10.5c0-4 2.6-6.5 7-6.5 0 4-2.6 6.5-7 6.5z'/%3E%3C/svg%3E");
    --ms-mimosa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 150'%3E%3Cg fill='none' stroke='%237db37d' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M40 148C34 110 30 70 34 6'/%3E%3Cpath d='M35 40 20 30M33 70 16 60M34 100 48 88M36 120 22 112M34 54 48 44'/%3E%3C/g%3E%3Cg fill='%23f3c74a'%3E%3Ccircle cx='34' cy='7' r='4'/%3E%3Ccircle cx='28' cy='12' r='3.4'/%3E%3Ccircle cx='39' cy='14' r='3.6'/%3E%3Ccircle cx='31' cy='20' r='3.2'/%3E%3Ccircle cx='20' cy='29' r='3.8'/%3E%3Ccircle cx='14' cy='34' r='3.2'/%3E%3Ccircle cx='22' cy='37' r='3'/%3E%3Ccircle cx='48' cy='43' r='3.6'/%3E%3Ccircle cx='53' cy='48' r='3'/%3E%3Ccircle cx='44' cy='50' r='2.8'/%3E%3Ccircle cx='16' cy='59' r='3.8'/%3E%3Ccircle cx='10' cy='64' r='3.2'/%3E%3Ccircle cx='19' cy='67' r='3'/%3E%3Ccircle cx='48' cy='87' r='3.8'/%3E%3Ccircle cx='54' cy='92' r='3'/%3E%3Ccircle cx='45' cy='95' r='2.8'/%3E%3Ccircle cx='22' cy='111' r='3.6'/%3E%3Ccircle cx='16' cy='116' r='3'/%3E%3C/g%3E%3Cg fill='%23e8a92c'%3E%3Ccircle cx='36' cy='26' r='2.6'/%3E%3Ccircle cx='26' cy='42' r='2.4'/%3E%3Ccircle cx='12' cy='70' r='2.4'/%3E%3Ccircle cx='50' cy='99' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
    --ms-postmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 44' fill='none' stroke='%239a8a7a' stroke-width='1.1' opacity='.7'%3E%3Ccircle cx='22' cy='22' r='17'/%3E%3Ccircle cx='22' cy='22' r='12' stroke-dasharray='2 2.4'/%3E%3Cpath d='M42 14c8-4 14 4 22 0s14 4 24 0M42 22c8-4 14 4 22 0s14 4 24 0M42 30c8-4 14 4 22 0s14 4 24 0'/%3E%3C/svg%3E");
  }

  /* 英字見出しは手書き風に（theme.css の丸ゴシック統一より優先） */
  html body #about .values-en,
  html body #about .values-no,
  html body #letter .section-label {
    font-family: var(--ms-hand) !important;
  }

  /* =========================================================
     ABOUT｜アーチ型の紙に、小枝とおうちの飾り
     ========================================================= */
  #about {
    padding-top: 40px;
    background:
      radial-gradient(120% 340px at 12% 0, #e6f1ea 0, rgba(230, 241, 234, 0) 70%),
      radial-gradient(90% 300px at 100% 40px, #fbe8e1 0, rgba(251, 232, 225, 0) 70%),
      var(--t-ivory, #fbf7f0);
    overflow-x: clip;
  }
  #about .about-grid { gap: 28px; }

  #about .about-text {
    position: relative;
    background: var(--ms-paper);
    border-radius: 50% 50% 22px 22px / 78px 78px 22px 22px;
    padding: 50px 22px 26px;
    box-shadow: var(--ms-shadow);
  }
  /* 左上の小枝 */
  #about .about-text::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -26px;
    width: 34px;
    height: 78px;
    background: var(--ms-sprig) no-repeat center / contain;
    transform: rotate(-14deg);
    pointer-events: none;
  }

  #about .t-head--quiet { text-align: center; margin-bottom: 26px; }
  #about .section-label {
    justify-content: center;
    gap: 10px;
    color: var(--c-coral-ink, #c4493f);
    letter-spacing: 0.22em;
  }
  #about .section-label::before,
  #about .section-label::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 0;
    background: var(--ms-house-coral) no-repeat center / contain;
  }
  #about .section-label::after { background-image: var(--ms-house-mustard); }
  #about .t-head--quiet .t-title {
    font-size: 1.55rem;
    letter-spacing: 0.08em;
    color: var(--text-dark, #43352a);
  }

  #about .statement {
    font-size: 1.22rem;
    line-height: 1.85;
    margin-bottom: 1.2rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px dashed rgba(90, 74, 58, 0.22);
  }
  #about .t-body { font-size: 0.92rem; line-height: 2.05; }

  /* 特徴のタグ：淡いコーラルの囲みに */
  #about .about-tags {
    position: relative;
    margin-top: 1.4rem;
    padding: 12px 14px 12px 40px;
    background: var(--c-coral-pale, #fdecea);
    border-radius: 14px;
    gap: 2px 14px;
  }
  #about .about-tags::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 13px;
    width: 18px;
    height: 18px;
    background: var(--ms-leaf) no-repeat center / contain;
  }
  #about .about-tags li { font-size: 0.82rem; font-weight: 700; color: #7a4a3f; }

  /* イラスト：テープで留めた写真のように */
  #about .about-visual {
    position: relative;
    margin: 6px 10px 0;
    padding: 10px 10px 12px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(70, 56, 47, 0.12);
    rotate: -2deg;
  }
  #about .about-visual img { border-radius: 3px; }
  #about .about-visual::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -12px;
    width: 86px;
    height: 24px;
    margin-left: -43px;
    background: rgba(233, 222, 200, 0.82);
    box-shadow: 0 1px 2px rgba(70, 56, 47, 0.08);
    transform: rotate(3deg);
    z-index: 1;
  }
  #about .about-visual::after {
    content: '';
    position: absolute;
    right: -16px;
    bottom: -18px;
    width: 30px;
    height: 70px;
    background: var(--ms-sprig) no-repeat center / contain;
    transform: rotate(18deg);
    pointer-events: none;
  }

  /* =========================================================
     OUR VALUES｜水彩風のにじみと、アイコン付きのカード
     ========================================================= */
  #about .values { margin-top: 64px; }
  #about .values-title {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: fit-content;
    margin: 0 auto 30px;
    padding: 14px 34px 16px;
    text-align: center;
    font-size: 1.32rem;
    letter-spacing: 0.1em;
    color: var(--text-dark, #43352a);
    isolation: isolate;
  }
  /* 水彩のにじみ（淡いグリーン） */
  #about .values-title::before {
    content: '';
    position: absolute;
    inset: 0 -6px;
    z-index: -1;
    border-radius: 58% 42% 55% 45% / 60% 48% 52% 40%;
    background:
      radial-gradient(ellipse at 30% 40%, rgba(196, 224, 196, 0.9) 0, rgba(196, 224, 196, 0) 62%),
      radial-gradient(ellipse at 72% 62%, rgba(214, 233, 208, 0.95) 0, rgba(214, 233, 208, 0) 64%),
      rgba(226, 239, 222, 0.75);
    transform: rotate(-3deg);
  }
  /* 右下の小さな花 */
  #about .values-title::after {
    content: '';
    position: absolute;
    right: -18px;
    bottom: -20px;
    width: 26px;
    height: 56px;
    background: var(--ms-sprig) no-repeat center / contain;
    transform: rotate(28deg);
  }
  #about .values-en {
    order: -1;
    display: block;
    margin: 0 0 2px;
    font-size: 1.85rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--c-green-ink, #4f7f4f);
    transform: rotate(-4deg);
  }

  #about .values-list { gap: 12px; }
  #about .values-list li {
    display: flex;
    flex-direction: column;
    padding: 14px 12px 18px;
    border: 1px solid rgba(90, 74, 58, 0.06);
    border-radius: 18px;
    background: var(--ms-paper);
    box-shadow: var(--ms-shadow);
  }
  /* アイコン（番号の下・中央） */
  #about .values-list li::before {
    content: '';
    order: 1;
    align-self: center;
    width: 58px;
    height: 58px;
    margin: 2px 0 12px;
    border-radius: 50%;
    background: var(--ms-ic) no-repeat center / 30px 30px, var(--ms-ic-bg);
  }
  #about .values-list li:nth-child(1) { --ms-ic: var(--ms-ic-home);   --ms-ic-bg: #fbe1dc; }
  #about .values-list li:nth-child(2) { --ms-ic: var(--ms-ic-smile);  --ms-ic-bg: #dcf0f2; }
  #about .values-list li:nth-child(3) { --ms-ic: var(--ms-ic-bowl);   --ms-ic-bg: #fbecc6; }
  #about .values-list li:nth-child(4) { --ms-ic: var(--ms-ic-sprout); --ms-ic-bg: #e2efdc; }
  #about .values-no {
    order: 0;
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
  }
  #about .values-name { order: 2; font-size: 0.86rem; letter-spacing: 0; margin-bottom: 0.4rem; }
  #about .values-desc { order: 3; font-size: 0.8rem; line-height: 1.9; }

  /* =========================================================
     OKAERI LETTER｜便せん・切手・ミモザ
     ========================================================= */
  #letter {
    background:
      radial-gradient(90% 320px at 0 0, #f3ece0 0, rgba(243, 236, 224, 0) 70%),
      var(--t-ivory, #fbf7f0);
    overflow-x: clip;
  }
  #letter .t-wrap { position: relative; }

  /* 見出しまわり＝便せん */
  #letter .t-head {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 6px 26px 28px 4px;
    padding: 74px 22px 26px;
    border-radius: 4px;
    background:
      var(--ms-postmark) no-repeat right 66px top 26px / 82px 40px,
      linear-gradient(180deg, #fbf6ec, #f7efe1);
    box-shadow: 0 8px 20px rgba(70, 56, 47, 0.11), 0 1px 2px rgba(70, 56, 47, 0.06);
    rotate: -1.4deg;
  }
  /* 左上のテープ */
  #letter .t-head::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 10px;
    width: 76px;
    height: 22px;
    background: rgba(214, 233, 208, 0.85);
    transform: rotate(-24deg);
  }
  /* 右上の切手（既存のおこめーの画像を使用） */
  #letter .t-head::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 16px;
    width: 46px;
    height: 54px;
    background: url("../../mascot-transparent.png") no-repeat center / 64px 64px, #dceef0;
    outline: 3px dotted #fff;
    outline-offset: -1px;
    box-shadow: 0 0 0 3px #dceef0, 0 2px 4px rgba(70, 56, 47, 0.16);
    rotate: 6deg;
  }
  #letter .section-label {
    order: 0;
    margin: 0 0 2px;
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-dark, #43352a);
  }
  #letter .section-label::before { content: none; }
  #letter .t-head .t-title {
    order: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px 4px;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--text-mid, #6a5848);
  }
  #letter .t-head .t-title::before {
    content: '';
    width: 18px;
    height: 1px;
    background: currentColor;
  }
  #letter .t-lead { order: 2; margin: 0; font-size: 0.9rem; line-height: 2; }

  /* 右側のミモザ */
  #letter .t-wrap::before {
    content: '';
    position: absolute;
    right: -6px;
    top: 58px;
    width: 64px;
    height: 160px;
    background: var(--ms-mimosa) no-repeat center / contain;
    transform: rotate(10deg);
    z-index: 2;
    pointer-events: none;
  }

  /* 最新のおかえりレター＝白いカード */
  #letter .letter-preview {
    gap: 1rem;
    padding: 22px 18px 20px;
    border: 1px solid rgba(90, 74, 58, 0.06);
    border-radius: 18px;
    background: var(--ms-paper);
    box-shadow: var(--ms-shadow);
  }
  #letter .letter-preview .y-sample { right: 16px; top: 16px; }
  #letter .letter-preview-author .y-avatar--lg { width: 56px; height: 56px; }
  #letter .letter-preview-title { font-size: 1.12rem; }
  #letter .letter-preview-summary { font-size: 0.86rem; line-height: 1.95; }
  #letter .letter-preview .y-textlink { color: var(--c-coral-ink, #c4493f); }

  /* 「すべてのおかえりレターを見る」＝枠付きの丸ボタン */
  #letter .letter-more { margin-top: 24px; text-align: center; }
  #letter .letter-more .y-textlink {
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 12px 18px;
    border: 1.5px solid var(--c-coral-ink, #c4493f);
    border-radius: 999px;
    background: var(--ms-paper);
    color: var(--c-coral-ink, #c4493f);
    text-decoration: none;
  }
  #letter .letter-more .y-textlink:hover,
  #letter .letter-more .y-textlink:focus-visible { background: #fdf0ed; opacity: 1; }
}

/* 小さいスマホ（〜380px）：カードの見出しが2行に割れないように */
@media (max-width: 380px) {
  #about .values-list { gap: 10px; }
  #about .values-name { font-size: 0.8rem; }
}