.elementor-6682 .elementor-element.elementor-element-f0e0f88{--display:flex;}/* Start custom CSS for html, class: .elementor-element-b3c286e *//* =========================*/
/*   全体画像*/
/*========================= */

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;

  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "Noto Serif JP",
    serif;

  color: #f7e9ef;

  background:
    linear-gradient(
      180deg,
      rgba(18, 10, 20, 0.55),
      rgba(28, 12, 26, 0.62)
    ),
    url("https://tm-meguri.com/wp-content/uploads/2026/05/ChatGPT-Image-2026%E5%B9%B45%E6%9C%8819%E6%97%A5-13_34_31.png")
    center center / cover no-repeat fixed;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}




/* =========================*/
/*   全体本文【交際中】*/
/*========================= */


/* =========================
   全体本文【交際中】
========================= */

.love-status-section{
  width:100%;
  padding:40px 18px 60px;
  background:transparent;
  display:flex;
  justify-content:center;
  box-sizing:border-box;
  color:#fff;
}

.love-status-inner{
  width:100%;
  max-width:760px;
  margin:0 auto;
  text-align:center;
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  color:#fff;
}

/* 背景を2分割する共通背景 */
.love-bg-block{
  width:100%;
  box-sizing:border-box;

  background:linear-gradient(
    135deg,
    rgba(25,35,58,0.64),
    rgba(45,58,82,0.48),
    rgba(20,28,50,0.58)
  );

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  border:1px solid rgba(255,255,255,0.36);
  border-radius:18px;

  box-shadow:
    0 18px 50px rgba(0,0,0,0.28),
    inset 0 0 40px rgba(255,255,255,0.08);
}

/* 上の背景 */
.top-bg{
  padding:30px 24px 40px;
  margin-bottom:100px;
}

/* 下の背景 */
.bottom-bg{
  padding:30px 24px 40px;
}

.love-lead p{
  margin:0 0 28px;
  font-size:16px;
  line-height:1.85;
  font-weight:700;
  color:#fff;
  text-shadow:0 0 10px rgba(0,0,0,0.35);
}

.pink{ color:#ff3f79; }
.blue{ color:#00a9ce; }

.status-title{
  font-size:16px;
  font-weight:800;
  margin:26px 0 8px;
  position:relative;
  display:inline-block;
  z-index:1;
  color:#fff;
  text-shadow:0 0 10px rgba(0,0,0,0.35);
}

.status-title::after{
  content:"";
  position:absolute;
  left:-8px;
  right:-8px;
  bottom:-5px;
  height:12px;
  background:#9eb6d8;
  opacity:.85;
  border-radius:45% 55% 48% 52% / 60% 35% 65% 40%;
  z-index:-1;
}

.status-sub{
  font-size:15px;
  font-weight:800;
  margin:18px 0 10px;
  color:#fff;
  text-shadow:0 0 10px rgba(0,0,0,0.35);
}

.status-line{
  display:none;
}

.status-buttons{
  width:180px;
  margin:16px auto 0;
  display:grid;
  gap:8px;
}

.status-buttons a{
  display:block;
  padding:9px 12px;
  border-radius:9px;
  background:linear-gradient(135deg,#BDB2FF 0%,#FFAFBD 100%) !important;
  color:#fff !important;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.55);
  text-shadow:0 0 8px rgba(0,0,0,0.35);
  box-shadow:
    0 4px 12px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.55);
}

.ornament-line{
  width:330px;
  max-width:80%;
  height:22px;
  margin:0 auto 34px;
  position:relative;
  border-top:1px solid rgba(255,255,255,.55);
}

.ornament-line::after{
  content:"◇";
  position:absolute;
  top:-11px;
  left:50%;
  transform:translateX(-50%);
  font-size:17px;
  color:#fff;
}

.glass-frame{
  width:100%;
  margin:28px auto;
  padding:46px 30px;
  position:relative;

  background:linear-gradient(
    135deg,
    rgba(18,30,55,0.42),
    rgba(44,58,84,0.30),
    rgba(15,24,45,0.44)
  );

  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);

  border:1px solid rgba(255,255,255,0.52);
  border-radius:18px;

  box-shadow:
    inset 0 0 30px rgba(255,255,255,0.08),
    0 10px 28px rgba(0,0,0,0.18);

  box-sizing:border-box;
}

.glass-frame::before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(255,255,255,0.42);
  border-radius:14px;
  pointer-events:none;
}

.main-frame{
  min-height:470px;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
}

.glass-frame h3{
  position:relative;
  z-index:1;
  margin:0;
  font-size:15px;
  font-weight:800;
  line-height:1.6;
  color:#fff;
  text-shadow:0 0 10px rgba(0,0,0,0.35);
}

.brush-under{
  position:relative;
  display:inline-block;
  padding:0 8px 7px;
  color:#fff !important;
  z-index:1;
  text-shadow:0 0 10px rgba(0,0,0,0.35);
}

.brush-under::after{
  content:"";
  position:absolute;
  left:-8px;
  right:-8px;
  bottom:2px;
  height:9px;
  z-index:-1;
  border-radius:45% 55% 48% 52% / 60% 35% 65% 40%;
  filter:blur(.2px);
}

.brush-pink::after{ background:#d98bb3 !important; }
.brush-yellow::after{ background:#efd47a !important; }
.brush-mint::after{ background:#8edfcf !important; }
.brush-orange::after{ background:#f7b18d !important; }
.brush-red::after{ background:#e8b0b0 !important; }
.brush-green::after{ background:#85e39a; }
.brush-gold::after{ background:#b7a33d; }
.brush-blue::after{ background:#8ec9df; }

.year-frame{
  min-height:610px;
  padding:24px 16px 26px;
  overflow:hidden;
}

.year-title{
  font-size:15px;
  font-weight:800;
  margin:0 0 12px !important;
  line-height:1.45 !important;
  color:#fff;
  text-shadow:0 0 10px rgba(0,0,0,0.35);
}

.year-title span{
  color:#fff !important;
}

.theme-blob-text,
.small-blob-text{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:800;
  line-height:1.35;
  text-align:center;
  position:relative;
  z-index:1;
  max-width:86%;
  min-width:120px;
  width:fit-content;
  white-space:normal;
  text-shadow:0 0 8px rgba(0,0,0,0.28);
}

.theme-blob-text{
  margin:8px auto 48px;
  padding:11px 28px;
  min-height:38px;
  font-size:13px;
  background:#f6a6b4;
  border-radius:48% 52% 45% 55% / 60% 38% 62% 40%;
}

.good-day{
  color:#fff !important;
  font-size:15px !important;
  margin-bottom:8px !important;
  text-shadow:0 0 10px rgba(0,0,0,0.35);
}

.small-blob-text{
  margin:0 auto 52px;
  padding:8px 22px;
  min-height:30px;
  font-size:12px;
  background:#d5a4d8;
  border-radius:50% 48% 52% 50% / 55% 45% 58% 42%;
}

.graph-area{
  position:relative;
  z-index:1;
  width:100%;
  margin:0 auto;
}

.line-graph{
  position:absolute;
  top:-4px;
  left:0;
  width:100%;
  height:155px;
  z-index:3;
  overflow:visible;
}

.line-graph polyline{
  fill:none;
  stroke:#b98cff;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.line-graph circle{
  fill:#b98cff;
}

.month-panels{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:5px;
  padding-top:110px;
}

.month-panels div{
  min-height:165px;
  padding:6px 2px;
  border-radius:10px;
  background:#efb5dc;
  transition:.25s ease;
  cursor:pointer;
  overflow:hidden;
}

.month-panels div:nth-child(even){
  background:#d8b9eb;
}

.month-panels span{
  display:flex;
  justify-content:center;
  align-items:center;
  width:26px;
  height:26px;
  margin:0 auto 8px;
  border-radius:50%;
  background:#fff;
  border:1px solid #8bb5e8;
  color:#4f6ca5;
  font-size:12px;
  font-weight:800;
  text-shadow:none;
}

.month-panels p{
  writing-mode:vertical-rl;
  margin:0 auto;
  font-size:10px;
  line-height:1.35;
  font-weight:700;
  color:#222;
  text-shadow:none;
}

.month-panels div:hover,
.month-panels div:focus,
.month-panels div:active{
  transform:scale(1.14);
  z-index:10;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.bottom-text p{
  margin-bottom:24px;
  color:#fff;
  text-shadow:0 0 10px rgba(0,0,0,0.35);
}

.mini-buttons{
  width:100%;
  max-width:460px;
  margin:20px auto 24px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:9px;
}

.mini-buttons a{
  display:block;
  padding:9px 10px;
  border-radius:8px;
  background:linear-gradient(135deg,#a8edea 0%,#f5f7fa 100%) !important;
  color:#111 !important;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  border:1px solid rgba(255,255,255,.55);
  text-shadow:none;
  box-shadow:
    0 4px 12px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.7);
}

.bottom-image-buttons{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin:26px auto 18px;
}

.image-button{
  position:relative;
  display:block;
  width:230px;
  max-width:48%;
  overflow:hidden;
  text-decoration:none;
}

.image-button img{
  width:100%;
  display:block;
}

.button-caption{
  position:absolute;
  top:10%;
  left:50%;
  transform:translateX(-50%);
  width:78%;
  height:78%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#000;
  overflow:hidden;
}

.button-title{
  font-size:13px;
  font-weight:800;
  line-height:1.3;
  color:#000;
}

.button-desc{
  font-size:7px;
  line-height:1.35;
  color:#000;
}

.ornament-line.bottom{
  margin-top:18px;
  margin-bottom:0;
}

/* 選択ボタンのフレーム */
.status-choice-frame{
  width:100%;
  max-width:420px;
  margin:28px auto 0;
  padding:24px 22px 26px;
  position:relative;
  box-sizing:border-box;

  background:linear-gradient(
    135deg,
    rgba(18,30,55,0.42),
    rgba(44,58,84,0.30),
    rgba(15,24,45,0.44)
  );

  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);

  border:1px solid rgba(255,255,255,0.52);
  border-radius:18px;

  box-shadow:
    inset 0 0 30px rgba(255,255,255,0.08),
    0 10px 28px rgba(0,0,0,0.18);
}

.status-choice-frame::before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(255,255,255,0.42);
  border-radius:14px;
  pointer-events:none;
}

.status-choice-frame .status-title,
.status-choice-frame .status-sub,
.status-choice-frame .status-buttons{
  position:relative;
  z-index:1;
}

/* =========================
   全体画像【告白したい】
========================= */

.confession-result-section{
  width:100%;
  padding:48px 18px 70px;
  background:transparent;
  display:flex;
  justify-content:center;
  box-sizing:border-box;
  color:#fff;
}

.confession-result-inner{
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:34px 26px 46px;
  text-align:center;
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  color:#fff;

  background:linear-gradient(
    135deg,
    rgba(25,35,58,0.64),
    rgba(45,58,82,0.48),
    rgba(20,28,50,0.58)
  );

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  border:1px solid rgba(255,255,255,0.36);
  border-radius:18px;

  box-shadow:
    0 18px 50px rgba(0,0,0,0.28),
    inset 0 0 40px rgba(255,255,255,0.08);
}

.confession-lead p{
  margin:0 0 34px;
  font-size:16px;
  line-height:1.85;
  font-weight:700;
  color:#fff;
  text-shadow:0 0 10px rgba(0,0,0,0.35);
}

.confession-frame{
  width:100%;
  margin:34px auto;
  padding:48px 34px;
  position:relative;

  background:linear-gradient(
    135deg,
    rgba(18,30,55,0.42),
    rgba(44,58,84,0.30),
    rgba(15,24,45,0.44)
  );

  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);

  border:1px solid rgba(255,255,255,0.52);
  border-radius:18px;

  box-shadow:
    inset 0 0 30px rgba(255,255,255,0.08),
    0 10px 28px rgba(0,0,0,0.18);

  box-sizing:border-box;
}

.confession-frame::before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(255,255,255,0.42);
  border-radius:14px;
  pointer-events:none;
}

.first-frame{
  min-height:560px;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
}

.confession-frame h3,
.confession-frame p,
.confession-frame div{
  position:relative;
  z-index:1;
  color:#fff;
  text-shadow:0 0 10px rgba(0,0,0,0.35);
}

.confession-frame h3{
  margin:0;
  font-size:16px;
  line-height:1.6;
  font-weight:800;
}

.chart-frame{
  padding:42px 34px 36px;
}

.section-title{
  margin-bottom:26px !important;
}

.confession-bar-chart{
  width:100%;
  max-width:560px;
  margin:26px auto 34px;
}

.bar-row{
  display:grid;
  grid-template-columns:110px 1fr 48px;
  align-items:center;
  gap:12px;
  margin-bottom:13px;
}

.bar-label{
  text-align:right;
  font-size:14px;
  font-weight:800;
  color:#fff;
  text-shadow:0 0 10px rgba(0,0,0,0.35);
}

.bar-track{
  height:22px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  box-shadow:inset 0 0 8px rgba(0,0,0,.06);
  overflow:hidden;
}

.bar-fill{
  height:100%;
  border-radius:999px;
}

.love{ background:#e9b2ca; }
.trust{ background:#b9dcb6; }
.timing{ background:#edd6a6; }
.success{ background:#f1b7aa; }
.progress{ background:#cdb8e8; }

.bar-percent{
  font-size:13px;
  font-weight:800;
  color:#fff;
  text-shadow:0 0 10px rgba(0,0,0,0.35);
}

.bar-axis{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  margin-left:122px;
  font-size:11px;
  font-weight:700;
  color:#fff;
  text-shadow:0 0 10px rgba(0,0,0,0.35);
}

.judge-box{
  display:inline-block;
  padding:9px 26px;
  border-radius:12px;
  background:linear-gradient(135deg,#FFAFBD,#CAF0F8);
  font-size:17px;
  font-weight:900;
  color:#000;
  text-shadow:none;
}

.timing-title{
  margin:22px 0 10px !important;
}

.timing-blob{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:86%;
  width:fit-content;
  min-width:190px;
  min-height:42px;
  padding:10px 26px;
  margin:0 auto 34px;
  background:linear-gradient(135deg,#f6d365,#e0c3fc);
  border-radius:45% 55% 48% 52% / 60% 35% 65% 40%;
  font-size:13px;
  font-weight:800;
  line-height:1.45;
  color:#fff;
  text-shadow:0 0 8px rgba(0,0,0,0.28);
}

.flow-title{
  margin:22px 0 10px !important;
}

.half-year-graph-area,
.half-graph-area{
  position:relative;
  z-index:1;
  width:100%;
  max-width:620px;
  margin:12px auto 0;
  overflow:visible;
}

.half-line-graph{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:150px;
  z-index:3;
  overflow:visible;
}

.half-line-graph polyline{
  fill:none;
  stroke:#b98cff;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.half-line-graph circle{
  fill:#b98cff;
}

.half-month-panels{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:6px;
  padding-top:110px;
}

.half-month-panels div{
  min-height:170px;
  padding:9px 5px;
  border-radius:12px;
  background:#efb5dc;
  box-sizing:border-box;
  transition:.25s ease;
  cursor:pointer;
  overflow:hidden;
}

.half-month-panels div:nth-child(even){
  background:#d8b9eb;
}

.half-month-panels span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  min-height:28px;
  padding:3px 5px;
  margin:0 auto 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid #8bb5e8;
  color:#4f6ca5;
  font-size:11px;
  font-weight:900;
  text-shadow:none;
}

.half-month-panels p{
  writing-mode:vertical-rl;
  margin:0 auto;
  font-size:11px;
  line-height:1.4;
  font-weight:700;
  color:#222;
  text-shadow:none;
}

.half-month-panels div:hover,
.half-month-panels div:focus,
.half-month-panels div:active{
  transform:scale(1.12);
  z-index:10;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.bottom-message p{
  margin-bottom:28px;
  color:#fff;
  text-shadow:0 0 10px rgba(0,0,0,0.35);
}

/* =========================
   全体画像【告白された】
========================= */

.answer-love-section{
  width:100%;
  padding:44px 18px 70px;
  background:transparent;
  display:flex;
  justify-content:center;
  box-sizing:border-box;
  color:#fff;
}

.answer-love-inner{
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:34px 26px 46px;
  text-align:center;
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  color:#fff;

  background:linear-gradient(
    135deg,
    rgba(25,35,58,0.64),
    rgba(45,58,82,0.48),
    rgba(20,28,50,0.58)
  );

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  border:1px solid rgba(255,255,255,0.36);
  border-radius:18px;

  box-shadow:
    0 18px 50px rgba(0,0,0,0.28),
    inset 0 0 40px rgba(255,255,255,0.08);
}

.answer-lead p{
  margin:0 0 34px;
  font-size:16px;
  line-height:1.85;
  font-weight:700;
  color:#fff;
  text-shadow:0 0 10px rgba(0,0,0,0.35);
}

.answer-frame{
  width:100%;
  margin:34px auto;
  padding:48px 34px;
  position:relative;

  background:linear-gradient(
    135deg,
    rgba(18,30,55,0.42),
    rgba(44,58,84,0.30),
    rgba(15,24,45,0.44)
  );

  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);

  border:1px solid rgba(255,255,255,0.52);
  border-radius:18px;

  box-shadow:
    inset 0 0 30px rgba(255,255,255,0.08),
    0 10px 28px rgba(0,0,0,0.18);

  box-sizing:border-box;
}

.answer-frame::before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(255,255,255,0.42);
  border-radius:14px;
  pointer-events:none;
}

.answer-frame h3,
.answer-frame p,
.answer-frame div{
  position:relative;
  z-index:1;
  color:#fff;
  text-shadow:0 0 10px rgba(0,0,0,0.35);
}

.answer-frame h3{
  margin:0;
  font-size:16px;
  line-height:1.6;
  font-weight:800;
}

.second-frame{
  padding:42px 34px 38px;
}

.bar-chart{
  width:100%;
  max-width:560px;
  margin:26px auto 42px;
}

.affection{ background:#a9d8e8; }
.line{ background:#b9dcb6; }
.long{ background:#edd6a6; }
.money{ background:#f1b7aa; }
.destiny{ background:#cdb8e8; }

.question-title,
.timing-title,
.flow-title{
  margin:30px 0 14px;
  font-size:16px;
  font-weight:900;
  color:#fff;
  text-shadow:0 0 10px rgba(0,0,0,0.35);
}

.judge-area{
  margin:18px auto 28px;
}

.judge-area p{
  margin:0 0 8px;
  font-size:16px;
  font-weight:900;
  color:#fff;
  text-shadow:0 0 10px rgba(0,0,0,0.35);
}

.decision-blob{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:86%;
  width:fit-content;
  min-width:190px;
  min-height:42px;
  padding:10px 26px;
  margin:0 auto 34px;
  background:linear-gradient(135deg,#f6d365,#e0c3fc);
  border-radius:45% 55% 48% 52% / 60% 35% 65% 40%;
  font-size:13px;
  font-weight:800;
  line-height:1.45;
  color:#fff;
  text-shadow:0 0 8px rgba(0,0,0,0.28);
}

/* =========================
   PC画像を広げるコード
========================= */

@media(min-width:769px){
  .love-status-section .love-status-inner{
    max-width:760px !important;
  }
}

/* =========================
   スマホ
========================= */

@media(max-width:768px){

  .love-status-section{
    padding:30px 10px 46px;
  }

  .love-status-inner{
    max-width:430px;
  }

  .top-bg,
  .bottom-bg{
    padding:24px 14px 32px;
    border-radius:18px;
  }

  .top-bg{
    margin-bottom:80px !important;
  }

  .love-lead p{
    font-size:13px;
    line-height:1.75;
  }

  .status-title,
  .status-sub{
    font-size:14px;
  }

  .status-buttons{
    width:150px;
    margin:14px auto 0;
  }

  .status-buttons a{
    font-size:13px;
    padding:8px 10px;
  }

  .glass-frame{
    padding:34px 16px;
  }

  .main-frame{
    min-height:440px;
  }

  .glass-frame h3{
    font-size:13px;
  }

  .year-frame{
    min-height:560px;
    padding:20px 10px;
  }

  .theme-blob-text{
    padding:9px 20px;
    min-height:34px;
    font-size:11px;
    margin-bottom:42px;
    max-width:90%;
  }

  .small-blob-text{
    padding:7px 18px;
    min-height:28px;
    font-size:10px;
    margin-bottom:48px;
    max-width:80%;
  }

  .line-graph{
    height:130px;
  }

  .month-panels{
    gap:3px;
    padding-top:92px;
  }

  .month-panels div{
    min-height:138px;
    border-radius:8px;
    padding:5px 1px;
  }

  .month-panels span{
    width:21px;
    height:21px;
    font-size:10px;
    margin-bottom:6px;
  }

  .month-panels p{
    font-size:8px;
    line-height:1.3;
  }

  .mini-buttons{
    max-width:340px;
    gap:7px;
  }

  .mini-buttons a{
    font-size:12px;
    padding:7px 8px;
  }

  .bottom-image-buttons{
    flex-direction:column;
    align-items:center;
    gap:12px;
    margin-top:28px;
  }

  .image-button{
    width:260px;
    max-width:90%;
  }

  .button-title{
    font-size:10.5px;
  }

  .status-choice-frame{
    max-width:320px;
    margin:24px auto 0;
    padding:22px 16px 24px;
    border-radius:16px;
  }

  .status-choice-frame::before{
    inset:6px;
    border-radius:12px;
  }

  .confession-result-section,
  .answer-love-section{
    padding:34px 10px 52px;
  }

  .confession-result-inner,
  .answer-love-inner{
    max-width:100%;
    padding:28px 12px 38px;
  }

  .confession-lead p,
  .answer-lead p{
    font-size:13px;
    line-height:1.75;
    margin-bottom:28px;
  }

  .confession-frame,
  .answer-frame{
    padding:34px 14px;
    margin:28px auto;
  }

  .first-frame{
    min-height:500px;
  }

  .answer-love-section .first-frame{
    min-height:560px;
  }

  .confession-frame h3,
  .answer-frame h3{
    font-size:13px;
  }

  .brush-under{
    padding:0 6px 6px;
  }

  .brush-under::after{
    left:-6px;
    right:-6px;
    height:8px;
  }

  .chart-frame,
  .second-frame{
    padding:34px 12px 30px;
  }

  .confession-bar-chart{
    margin-top:22px;
  }

  .bar-row{
    grid-template-columns:72px 1fr 36px;
    gap:6px;
    margin-bottom:11px;
  }

  .answer-love-section .bar-row{
    grid-template-columns:78px 1fr 36px;
  }

  .bar-label{
    font-size:10px;
  }

  .bar-track{
    height:18px;
  }

  .bar-percent{
    font-size:10px;
  }

  .bar-axis{
    margin-left:78px;
    font-size:8.5px;
  }

  .answer-love-section .bar-axis{
    margin-left:84px;
  }

  .judge-box{
    font-size:14px;
    padding:8px 20px;
  }

  .timing-blob,
  .decision-blob{
    min-width:150px;
    max-width:90%;
    padding:9px 18px;
    font-size:11px;
    margin-bottom:30px;
  }

  .half-line-graph{
    height:125px;
  }

  .half-month-panels{
    gap:4px;
    padding-top:92px;
  }

  .half-month-panels div{
    min-height:138px;
    border-radius:9px;
    padding:6px 2px;
  }

  .half-month-panels span{
    width:34px;
    min-height:22px;
    font-size:8px;
    padding:2px 3px;
    margin-bottom:7px;
  }

  .half-month-panels p{
    font-size:8px;
    line-height:1.3;
  }

  .button-desc{
    font-size:6.3px;
  }

}/* End custom CSS */