:root{
      --bg:#f0c48b;
      --panel:#fff;
      --frame:#e7b87f;
      --text:#333;

      --c-think:#b55b72;
      --c-rather:#b9814f;
      --c-notr:#e1c865;
      --c-not:#6aa889;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: "Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--text);
      background:#f9f3e7;
    }

    .graph_one{
      max-width: 900px;
      width: calc(100% - 40px);
      margin: 0 auto;
      margin: 24px auto;
      border-radius: 20px;
      border: 1.5px solid #D6A069;
      background: #f6e6c8;
      overflow:hidden;
    }

    .graph_one .hero{
      background-color: #D6A069;
      padding: 18px 24px;
      text-align: center;
      font-size: 1.4rem;
    }
    .graph_one .hero h1{
      margin:0;
      font-size: clamp(18px, 2.2vw, 24px);
      letter-spacing:.02em;
      font-weight:700;
      font-size: 1.5rem;
    }

    .graph_one .panel{
      background: white;
      padding: 15px;
    }
    @media (min-width: 700px) {
        .graph_one .panel{
      padding: 30px;
    }
    }

    .graph_one .grid{
      display:grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 24px 36px;
      align-items: center;
    }

        .graph_one .chart-area img{
            margin: 0 auto;
        }
    .graph_one .chart-area{
      align-items: center;
      gap: 24px;
    }
    @media (min-width: 700px) {
        .graph_one .chart-area{
      display:flex;
      gap: 34px;
        }
    }

    .graph_one .chart-area img{
      width: 260px;
      max-width: 45vw;
      height:auto;
      display:block;
      border-radius:12px;
    }
    .graph_one .legend{
      list-style:none;
      margin:0;
      padding:0;
      display:flex;
      flex-direction:column;
      gap: 14px;
      font-size: 14px;
    }
    .graph_one .legend li{
      display:flex; align-items:center; gap:10px;
      line-height:1.2;
    }
    .graph_one .dot{
      width:12px; height:12px; border-radius:50%;
      flex:0 0 12px;
    }
    .graph_one .dot.think{ background: var(--c-think); }
    .graph_one .dot.rather{ background: var(--c-rather); }
    .graph_one .dot.notr{ background: var(--c-notr); }
    .graph_one .dot.not{ background: var(--c-not); }

    .graph_one .art{
      display:flex;
      justify-content: space-evenly;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .art_01{
        width: 80px;
        display: block;
        margin: 0 auto;
    }
    .art_02{
        width: 80px;
        display: block;
        margin: 0 auto;
    }
    .art_03{
        width: 110px;
        display: block;
        margin: 0 auto;
    }

    @media (max-width: 820px){
      .graph_one .grid{ grid-template-columns: 1fr; }
      .graph_one .chart-area{ justify-content:center; }
      .graph_one .legend{ font-size: 13px; }
      .graph_one .panel{ padding: 22px; }
    }


    













    :root{
      --bg:#f0c48b;
      --panel:#fff;
      --frame:#e7b87f;
      --text:#333;

      --c-think:#b55b72;
      --c-rather:#b9814f;
      --c-notr:#e1c865;
      --c-not:#6aa889;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: "Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--text);
      background:#f9f3e7;
    }

    .graph_two{
      max-width: 900px;
      margin: 24px auto;
      width: calc(100% - 40px);
      margin: 0 auto;
      border-radius: 20px;
      border: 1.5px solid #D6A069;
      background: #ffffff;
      overflow:hidden;
    }

    .graph_two .hero{
      background: #D6A069;
      padding: 18px 24px;
      text-align: center;
    }
    .graph_two .hero h1{
      margin:0;
      font-size: clamp(18px, 2.2vw, 24px);
      letter-spacing:.02em;
      font-weight:700;
      font-size: 1.5rem;
    }

    .graph_two .panel{
      background: var(--panel);
      border-radius: 14px;
      padding: 15px;
    }

    /* 凡例 */
    .graph_two .legend{
      list-style:none;
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
      gap:20px;
      margin:0 0 30px;
      padding:0;
      font-size:14px;
    }
    .graph_two .legend li{
      display:flex;
      align-items:center;
      gap:8px;
      font-size: 1rem;
    }
    @media (min-width: 700px) {
        .graph_two .legend li{
            font-size: 1.4rem;
        }
    }
    .graph_two .dot{
      width:12px; height:12px; border-radius:50%;
      flex:0 0 12px;
    }
    .graph_two .dot.think{ background: var(--c-think); }
    .graph_two .dot.rather{ background: var(--c-rather); }
    .graph_two .dot.notr{ background: var(--c-notr); }
    .graph_two .dot.not{ background: var(--c-not); }

    /* グリッド配置 */
    .graph_two .grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
    }

    .graph_two .item{
      background:#fff;
      border-radius:12px;
      padding:0 0 15px 0;
      text-align:center;
      padding: 12px 12px 24px;
    }
    .graph_two .item h2{
      background: var(--bg);
      margin:0 0 16px;
      padding:6px;
      font-size: 1.3rem;
      font-weight:700;
    }
    .graph_two .item img{
      width:220px;
      max-width: 70%;
      height:auto;
    }

    @media (max-width: 820px){
      .graph_two .grid{ grid-template-columns: 1fr; }
      .graph_two .item img{ max-width: 60%; }
    }











    :root{
      --bg:#eadfcf;     /* タイトル下の薄い帯色 */
      --panel:#fff;
      --frame:#d8c794;  /* 外枠 */
      --text:#333;

      /* 凡例カラー（前ページとトーン合わせ） */
      --c-think:#b55b72;
      --c-rather:#b9814f;
      --c-notr:#e1c865;
      --c-not:#6aa889;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: "Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--text);
      background:#efe3b8; /* 背景の紙色 */
    }

    .graph_three{
      max-width: 900px;
      width: calc(100% - 40px);
      margin: 0 auto;
      margin: 20px auto;
      border-radius: 20px;
      border: 1.5px solid #F1E8D6;
      background: #fffdf7;
      overflow:hidden;
      position: relative;
    }

    /* タイトル帯 */
    .graph_three .hero{
      background: var(--bg);
      padding: 14px 24px;
      text-align:center;
    }
    .graph_three .hero h1{
      margin:0;
      font-weight:700;
      font-size: clamp(18px,2.2vw,22px);
      letter-spacing:.02em;
    }

    .graph_three .panel{
      background: var(--panel);
      border-radius: 14px;
      padding: 15px 15px 15px;
      position: relative;
    }

    /* 凡例 */
    .graph_three .legend{
      list-style:none;
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
      gap:22px;
      margin: 0 0 26px;
      padding:0;
      font-size:14px;
      font-size: 1rem;
    }
    .graph_three .legend li{
      display:flex; align-items:center; gap:8px;
    }
    @media (min-width: 700px) {
        .graph_three .legend li{
            font-size:14px;
        }
    }
    .graph_three .dot{
      width:12px; height:12px; border-radius:50%;
      flex:0 0 12px;
    }
    .graph_three .dot.think{ background: var(--c-think); }
    .graph_three .dot.rather{ background: var(--c-rather); }
    .graph_three .dot.notr{ background: var(--c-notr); }
    .graph_three .dot.not{ background: var(--c-not); }

    /* グラフグリッド：上2・下1中央 */
    /* .graph_three .grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 34px 34px;
      align-items: start;
    } */
    @media (min-width: 700px) {
    .graph_three .grid_item{
        display:grid;
        grid-template-columns: 1fr 1fr;
    }
}

    .graph_three .item{
      background:#fff;
      border-radius:12px;
      padding:0px 0px 22px;
      text-align:center;
        padding: 12px 12px 24px;
    }
    .graph_three .item h2{
      margin:0 0px 14px;
      padding:8px 10px;
      font-size:15px;
      font-weight:700;
      background: var(--bg);
      font-size: 1.3rem;
    }
    .graph_three .item img{
      width:230px;
      max-width: 70%;
      height:auto;
    }

    /* 下段の中央寄せアイテム */
    .graph_three .item.center{
      grid-column: 1 / -1;          /* 2列をまたぐ */
      max-width: 409px;              /* 中央で少し小さめ */
      margin: 0 auto 10px;
    }

    /* 左右イラスト（任意） */
    .graph_three .arts{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      padding: 6px 18px 18px;
      gap: 12px;
      background-color: white;
    }
     
    @media (max-width: 860px){
      .graph_three .grid{
        grid-template-columns: 1fr;  /* 縦積み */
      }
      .graph_three .item.center{
        grid-column:auto;
        max-width:none;
        margin:0;
      }
      .graph_three .item img{ max-width: 60%; }
      .graph_three .arts{
        justify-content:center;
      }
    }










    :root{
      --bg-top:#eadfcf;    /* タイトル帯 */
      --panel:#ffffff;
      --frame:#d8c794;     /* 外枠 */
      --text:#333;

      /* 凡例カラー */
      --c-think:#b55b72;   /* 思う */
      --c-rather:#b9814f;  /* どちらかというと思う */
      --c-notr:#e1c865;    /* どちらかというと思わない */
      --c-not:#6aa889;     /* 思わない */
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--text);
      background:#efe3b8; /* 背景の紙色 */
    }

    .graph_four{
      max-width:900px;
      width: calc(100% - 40px);
      margin:24px auto 5rem;
      border-radius:20px;
      border:1.5px solid var(--frame);
      background:#ffffff;
      overflow:hidden;
          border: 1.5px solid #eadfcf;
      
    }

    /* タイトル帯 */
    .graph_four .hero{
      background:var(--bg-top);
      padding:14px 24px;
      text-align:center;
    }
    .graph_four .hero h1{
      margin:0;
      font-size:clamp(18px,2.2vw,22px);
      font-weight:700;
      letter-spacing:.02em;
    }

    .graph_four .panel{
      background:var(--panel);
      padding:15px 15px 15px;
      border-radius:14px;
    }

    /* 凡例 */
    .graph_four .legend{
      list-style:none;
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
      gap:26px;
      margin:0 0 26px;
      padding:0;
      font-size:14px;
    }
    .graph_four .legend li{
        display:flex;
        align-items:
        center;gap:8px;
        font-size: 1rem;
    }
    @media (min-width: 700px) {
        .graph_four .legend li{
            font-size: 1.4rem;
        }
    }
    .graph_four .dot{width:12px;height:12px;border-radius:50%}
    .graph_four .dot.think{background:var(--c-think)}
    .graph_four .dot.rather{background:var(--c-rather)}
    .graph_four .dot.notr{background:var(--c-notr)}
    .graph_four .dot.not{background:var(--c-not)}

    .blue{
      background-color: #5591ce;
    }

    /* 2カラムのグラフ */
    .graph_four .grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:34px;
      align-items:start;
    }

    .graph_four .item{
      background:#fff;
      border-radius:12px;
      padding:12px 12px 24px;
      text-align:center;
    }
    .graph_four .item h2{
      margin:0 0 14px;
      padding:10px 8px;
      background:var(--bg-top);
      font-weight:700;
      font-size: 1.4rem;
    }
    .graph_four .item img{
      width:290px;      /* 画像サイズは必要に応じ調整 */
      max-width:78%;
      height:auto;
      display:inline-block;
    }

    @media (max-width:860px){
      .graph_four .grid{grid-template-columns:1fr}
      .graph_four .item img{max-width:65%}
    }



















    /* タイトル */
    .graph_ttl1{
      display:flex;
      justify-content:center;
      margin:50px auto 30px;
    }

    .graph_ttl1 .bubble{
      position:relative;
      background:#221b19;       /* 黒っぽい背景 */
      color:#fff;
      border-radius:50px;
      padding:16px 40px;
      font-size:1.4rem;
      font-weight:700;
      line-height:1.6;
      text-align:center;
      max-width:90%;
    }

    @media (max-width:860px){
      .graph_ttl1 .bubble{
              font-size:1.6rem;
      }
    }
    /* 下の三角部分 */
    .graph_ttl1 .bubble::after{
      content:"";
      position:absolute;
      bottom:-10px;
      left:50%;
      transform:translateX(-50%);
      width:0;
      height:0;
      border-left:10px solid transparent;
      border-right:10px solid transparent;
      border-top:10px solid #221b19;
    }

    .arts_img1{
        width: 90px;
        display: block;
    }
     .arts_img2{
        width: 80px;
        display: block;
    }

    .arts_item{
      position: absolute;
      bottom: 0;
    }
        
        @media (min-width:860px){
           .arts_img1{
        width: 130px;
        display: block;
        position: absolute;
        bottom: 20px;
        left: 50px;
    }
     .arts_img2{
        width: 110px;
        display: block;
        position: absolute;
        right: 50px;
        bottom: 20px;
    }
        }