.elementor-6382 .elementor-element.elementor-element-c103c64{--display:flex;}/* Start custom CSS for html, class: .elementor-element-9eb8be8 *//* =========================*/
/*   全体画像*/
/*========================= */

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;
}






/* =========================
   スマホ
========================= */

@media(max-width:768px){

  .fortune-final-section{
    padding:40px 12px;
  }

  .fortune-final-inner{
    width:100%;
    max-width:100%;
    margin:0 auto !important;
    padding:24px 14px 30px;
    border-radius:18px;
  }

  .fortune-intro p,
  .middle-text p{
    font-size:13px;
    line-height:1.8;
  }

  .brush-label{
    padding:4px 16px;
    min-width:60px;
  }

  .brush-line{
    display:inline-block;
    margin-top:3px;
  }

  .result-frame{
    margin:24px auto;
    padding:28px 16px;
    min-height:auto;
  }

  .result-frame h3{
    font-size:16px;
  }

  .result-frame p{
    font-size:11px;
  }

  .brush-box{
    min-width:180px;
    max-width:92%;
    padding:10px 18px;
    font-size:13px;
  }

  .year-frame{
    min-height:500px;
  }

  .graph-area{
    max-width:100%;
  }

  .line-graph{
    height:120px;
  }

  .line-graph polyline{
    stroke-width:3;
  }

  .line-graph circle{
    r:6;
  }

  .month-panels{
    gap:3px;
    padding-top:92px;
  }

  .month-panels div{
    min-height:118px;
    border-radius:12px;
    padding:4px 2px;
  }

  .month-panels div:hover,
  .month-panels div:active,
  .month-panels div:focus{
    transform:scale(1.25);
    z-index:20;
  }

  .month-panels span{
    width:17px;
    height:17px;
    line-height:17px;
    font-size:9px;
    margin-bottom:4px;
  }

  .month-panels p{
    font-size:7.5px;
    line-height:1.3;
  }

  .result-button-area{
    flex-direction:column;
    align-items:center;
    gap:14px;
  }

  .result-btn{
    width:88%;
  }

  .result-btn strong{
    font-size:16px;
  }

  .result-btn span{
    font-size:10px;
  }

}






/* =========================
   全体
========================= */

.fortune-final-section{
  width:100%;
  padding:70px 20px;
  box-sizing:border-box;
  background:none !important;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.fortune-final-inner{
  width:100%;
  max-width:860px;
  margin:0 auto !important;
  text-align:center;
  box-sizing:border-box;
  padding:34px 38px 46px;
  background:linear-gradient(
    135deg,
    rgba(255,255,255,0.94),
    rgba(245,248,252,0.90),
    rgba(255,255,255,0.94)
  );
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.95);
  border-radius:22px;
  box-shadow:
    0 18px 42px rgba(0,0,0,0.16),
    inset 0 0 30px rgba(255,255,255,0.65);
}

/* =========================
   テキスト
========================= */

.fortune-intro,
.middle-text{
  text-align:center;
}

.fortune-intro p,
.middle-text p{
  margin:0 0 14px;
  font-size:17px;
  line-height:1.85;
  font-weight:600;
  color:#111;
  text-shadow:none;
}

/* =========================
   強調文字
========================= */

.hl{
  font-weight:800;
  font-size:1.1em;
}

.pink{ color:#e91e83; }
.blue{ color:#008fda; }
.green{ color:#2fa144; }
.gold{ color:#c48b00; }
.orange{ color:#e86f00; }
.red{ color:#e93645; }
.purple{ color:#9858e8; }

/* =========================
   いびつな色付きラベル
========================= */

.brush-label,
.brush-box{
  display:inline-block;
  position:relative;
  color:#111;
  font-weight:800;
  text-align:center;
  box-sizing:border-box;
  border-radius:
    42% 58% 46% 54% /
    58% 38% 62% 42%;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid rgba(255,255,255,0.65);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.10),
    inset 0 0 14px rgba(255,255,255,0.35);
}

.brush-label{
  min-width:80px;
  padding:5px 22px;
  margin:0 6px;
}

.brush-box{
  display:block;
  width:fit-content;
  max-width:88%;
  min-width:300px;
  margin:0 auto 22px;
  padding:13px 36px;
  line-height:1.5;
}

.pink-brush{
  background:linear-gradient(135deg, #ff8fc4, #ffd0e5);
}

.blue-brush{
  background:linear-gradient(135deg, #7ed7ff, #d4f3ff);
}

.yellow-brush{
  background:linear-gradient(135deg, #ffd35d, #fff0aa);
}

.green-brush{
  background:linear-gradient(135deg, #8bd79a, #d5f0d8);
}

.gold-brush{
  background:linear-gradient(135deg, #d6a62b, #f1d98f);
}

.orange-brush{
  background:linear-gradient(135deg, #ffa64d, #ffd8ab);
}

.red-brush{
  background:linear-gradient(135deg, #ff6f7e, #ffc0c7);
}

/* =========================
   歪なアンダーライン
========================= */

.brush-line{
  position:relative;
  display:inline-block;
  padding:0 8px 4px;
  color:#111;
  font-weight:800;
  z-index:1;
}

.brush-line::after{
  content:"";
  position:absolute;
  left:-8px;
  right:-8px;
  bottom:2px;
  height:14px;
  z-index:-1;
  border-radius:
    45% 55% 48% 52% /
    60% 35% 65% 40%;
  filter:blur(0.4px);
}

.blue-line::after{
  background:linear-gradient(
    90deg,
    rgba(90,190,255,0.65),
    rgba(180,235,255,0.95),
    rgba(90,190,255,0.65)
  );
}

.moss-line::after{
  background:linear-gradient(
    90deg,
    rgba(120,165,105,0.65),
    rgba(175,210,150,0.95),
    rgba(120,165,105,0.65)
  );
}

/* =========================
   白ガラスフレーム
========================= */

.result-frame{
  position:relative;
  width:100%;
  margin:30px auto;
  padding:34px 44px;
  min-height:220px;
  text-align:center;
  box-sizing:border-box;
  background:linear-gradient(
    135deg,
    rgba(255,255,255,0.96),
    rgba(245,248,252,0.92),
    rgba(255,255,255,0.96)
  );
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.95);
  border-radius:18px;
  box-shadow:
    0 12px 30px rgba(0,0,0,0.13),
    inset 0 0 25px rgba(255,255,255,0.65);
}

.result-frame::before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(120,120,120,0.28);
  border-radius:14px;
  pointer-events:none;
}

.result-frame h3{
  position:relative;
  z-index:1;
  margin:0 0 14px;
  font-size:18px;
  line-height:1.;
  color:#111;
  text-shadow:none;
}

.result-frame p{
  position:relative;
  z-index:1;
  margin:14px 0 0;
  font-size:14px;
  line-height:1.75;
  font-weight:600;
  color:#222;
  text-shadow:none;
}

.year-frame{
  min-height:auto;
  overflow:hidden;
}

/* =========================
   年表グラフ
========================= */

.graph-area{
  position:relative;
  z-index:1;
  max-width:680px;
  margin:20px auto 0;
  overflow:visible;
}

.line-graph{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:150px;
  z-index:4;
  overflow:visible;
}

.line-graph polyline{
  fill:none;
  stroke:#9b6ee8;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.line-graph circle{
  fill:#9b6ee8;
}

.month-panels{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:6px;
  padding-top:115px;
}

.month-panels div{
  min-height:180px;
  height:auto;
  padding:8px 4px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.90);
  box-shadow:
    inset 0 0 16px rgba(255,255,255,0.36),
    0 4px 12px rgba(0,0,0,0.08);
  box-sizing:border-box;
  cursor:pointer;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
  transform-origin:center bottom;
  -webkit-tap-highlight-color:transparent;
}

.month-panels div:nth-child(odd){
  background:#cfe2ff;
}

.month-panels div:nth-child(even){
  background:#e8d4ff;
}

.month-panels div:hover,
.month-panels div:active,
.month-panels div:focus{
  transform:scale(1.16);
  z-index:10;
  box-shadow:
    0 8px 22px rgba(0,0,0,0.20),
    inset 0 0 18px rgba(255,255,255,0.50);
}

.month-panels span{
  display:block;
  width:24px;
  height:24px;
  margin:0 auto 8px;
  border-radius:50%;
  background:rgba(255,255,255,0.96);
  color:#385caa;
  font-size:13px;
  line-height:24px;
  font-weight:800;
}

.month-panels p{
  writing-mode:vertical-rl;
  margin:0 auto;
  font-size:12px;
  line-height:1.45;
  color:#1f2b4a;
  font-weight:700;
  text-shadow:none;
  height:auto;
  overflow:visible;
}

/* =========================
   ボタン
========================= */

.bottom-image-buttons{
    display:flex;
    justify-content:center;
    gap:18px;
    margin-top:40px;
}



.image-button{
    position:relative;
    overflow:hidden; /* ←はみ出し防止 */
}

.button-caption{

    position:absolute;

    top:12%;
    left:50%;

    transform:translateX(-50%);

    width:70%;

    height:72%;   
    /* ←ここ重要 */

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    text-align:center;

    color:#000;

    overflow:hidden; 
    /* ←はみ出し防止 */
}

.button-title{

    font-size:13px;

    font-weight:700;

    line-height:1.3;

    margin-bottom:4px;

    color:#000;
}

.button-desc{

    font-size:8px;

    line-height:1.4;

    color:#000;

    overflow:hidden;
}


.image-button:hover{
    transform:translateY(-4px);
}








/* =========================
   全体の文字サイズを統一
========================= */

.fortune-final-section{
  font-size:16px;
}

.fortune-final-inner{
  font-size:16px;
  line-height:1.85;
}

.fortune-final-inner p,
.fortune-final-inner span,
.fortune-final-inner a,
.fortune-final-inner div{
  font-size:inherit;
}

/* 基本文 */
.fortune-intro p,
.middle-text p,
.result-frame p{
  font-size:16px;
  line-height:1.85;
}

/* 見出し */
.result-frame h3{
  font-size:21px;
  line-height:1.5;
}

/* 年表の文字は小さめ固定 */
.month-panels p{
  font-size:12px;
}

.month-panels span{
  font-size:13px;
}


/* =========================
   スマホ専用
========================= */

@media(max-width:768px){

  .fortune-final-section{
    padding:30px 10px;
  }

  .fortune-final-inner{
    width:100%;
    max-width:100%;
    margin:0 auto;
    padding:20px 12px 28px;
  }

  /* フレーム */

  .result-frame{
    padding:22px 12px;
  }

  .result-frame h3{
    font-size:17px;
    line-height:1.6;
  }

  .result-frame p{
    font-size:12px;
    line-height:1.8;
  }

  /* =========================
     年表
  ========================= */

  .year-frame{
    overflow:hidden;
  }

  .graph-area{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  /* グラフ */

  .line-graph{
    width:100%;
    height:95px;
  }

  .line-graph polyline{
    stroke-width:3;
  }

  /* 年表パネル */

  .month-panels{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:6px;

    min-width:0;

    padding-top:80px;
  }

  .month-panels div{

    min-height:130px;

    height:auto;

    padding:6px 4px;

    border-radius:10px;

    transition:all .25s ease;

    overflow:hidden;
  }

  /* タップで拡大 */

  .month-panels div:active{

    transform:scale(1.15);

    z-index:50;

    box-shadow:
      0 10px 24px rgba(0,0,0,0.25);
  }

  .month-panels span{

    width:20px;
    height:20px;

    line-height:20px;

    font-size:10px;

    margin-bottom:4px;
  }

  .month-panels p{

    writing-mode:horizontal-tb;

    font-size:9px;

    line-height:1.35;

    text-align:center;

    height:auto;
  }

  /* ボタン */

 .bottom-image-buttons{
    gap:10px;
}

.image-button{
    width:calc(50% - 5px);
}

/*.button-caption{*/
/*    width:84%;*/
/*    top:15%;*/
/*}*/

/*.button-title{*/
/*    font-size:13px;*/
/*    margin-bottom:6px;*/
/*}*/

/*.button-desc{*/
/*    font-size:10px;*/
/*    line-height:1.5;*/
/*}*/

  .button-caption{
      width:76%;
      top:13%;
  }

  .button-title{
      font-size:11px;
      line-height:1.3;
      margin-bottom:4px;
  }

  .button-desc{
      font-size:7px;
      line-height:1.35;
  }
}/* End custom CSS */