.p-topics-article .p-topics-text a {
  text-decoration: none !important;
  color: #000 !important;
}
.p-topics-article .p-topics-text{
    color: #000;
}
.p-topics-image-main,
h1.p-topics-heading2 {
  display: none;
}
.c-header.shrink{
    display: none;
}
.c-topics-detail {
    display: none;
}
@media screen and (min-width: 30.01rem) {  
.o-container {
    max-width: 100%;
    width: 100%;
  }}
@media screen and (min-width: 30.01rem) {  
.c-breadcrumbs {
    margin-left: 450px;
}}
.c-breadcrumbs+.o-content {
    background: ;
  }
@media screen and (max-width: 30rem) {  
.p-topics-article {
    background: ;
 }} 
@media screen and (max-width: 30rem) {  
 .o-container{
    margin: 0 0vw;
     }}
@media screen and (max-width: 30rem) {  
.c-header .o-columns {
    margin: 0 4vw;
}}
@media screen and (max-width: 30rem) { 
.p-topics-checked_items{
  margin: 7rem 5vw 5.5rem;
}}
.p-topics-image-sub{
  display: none;
}

body {
  -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
  animation: fadeIn 1.5s ease 0s 1 normal;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* フェードインアニメーション用のスタイル */
.fade-in-element {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-element.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.kanban-container {
  width: 100%;
  margin: 0 auto 5%;
}
.kanban-pc {
  width: 100%;
  margin: 0 auto;
  display: block;
  text-align: center;
}
.kanban-pc img {
  width: 100%;
}
.kanban-sp {
  display: none;
}
@media screen and (max-width: 30rem) {
    .kanban-container{
      margin: 0 auto 15%;
    }  
    .kanban-sp {
      display: block;
      text-align: left;
      padding: 0 0 0 0; }
    .kanban-sp img {
      max-width: 100%; }
    .kanban-pc {
      display: none; }
  }

  .hajime{
    text-align: center;
    font-weight: 400;
    font-size: 1.2rem;
    font-family: Avenir,Helvetica Neue,Verdana,-apple-system,BlinkMacSystemFont,Segoe UI,Hiragino Kaku Gothic ProN,YuGothic,sans-serif;
    margin: 0 auto 120px;
  }
  @media screen and (max-width: 30rem) {
    .hajime{
        padding: 0px 20px;
        margin: 0 auto 60px;
    }
  }
     .comment {
            max-width: 900px;
            text-align: center;
            font-size: 1.7rem;
            font-weight: 600;
            letter-spacing: 0.2rem;
            line-height: 3rem;
            margin: 80px auto 120px;
            font-family: "Hannari";
            background: #f9f9f9;
            border: 3px solid #db5435;
            padding: 60px 40px;
            position: relative;
            box-shadow: 0 4px 20px rgba(219, 84, 53, 0.15);
        }
        /* 四隅の装飾 */
        .comment::before,
        .comment::after {
            content: '';
            position: absolute;
            width: 50px;
            height: 50px;
            border: 2px solid #db5435;
        }
        .comment::before {
            top: 15px;
            left: 15px;
            border-right: none;
            border-bottom: none;
        }
        .comment::after {
            bottom: 15px;
            right: 15px;
            border-left: none;
            border-top: none;
        }
        /* 追加の角装飾（疑似要素で表現） */
        .comment-inner {
            position: relative;
        }
        .comment-inner::before,
        .comment-inner::after {
            content: '';
            position: absolute;
            width: 50px;
            height: 50px;
            border: 2px solid #db5435;
        }
        .comment-inner::before {
            top: -45px;
            right: 0px;
            border-left: none;
            border-bottom: none;
        }
        .comment-inner::after {
            bottom: -45px;
            left: 0px;
            border-right: none;
            border-top: none;
        }
        /* タイトル装飾 */
        .comment-title {
            font-size: 2rem;
            color: #db5435;
            margin-bottom: 40px;
            position: relative;
            display: inline-block;
            padding: 0 30px;
            font-family: "ta-candy", sans-serif;
        }
        .comment-title::before,
        .comment-title::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 80px;
            height: 1px;
            background: #db5435;
        }
        .comment-title::before {
            right: 100%;
            margin-right: 15px;
        }
        .comment-title::after {
            left: 100%;
            margin-left: 15px;
        }
        .comment p {
            margin: 0;
            color: #333;
            font-size: 1.2rem;
            line-height: 2rem;
        }

        /* レスポンシブ対応 */
        @media screen and (max-width: 30rem) {
            .comment {
                font-size: 1.25rem;
                line-height: 2.2rem;
                margin: 0 10px 90px;
                padding: 35px 10px;
            }
            .comment::before,
            .comment::after {
                width: 35px;
                height: 35px;
            }
            .comment::before {
                top: 10px;
                left: 10px;
            }
            .comment::after {
                bottom: 10px;
                right: 10px;
            }
            .comment-inner::before,
            .comment-inner::after {
                width: 35px;
                height: 35px;
            }
            .comment-inner::before {
                top: -25px;
            }
            .comment-inner::after {
                bottom: -25px;
            }
            .comment-title {
                font-size: 1.1rem;
                margin-bottom: 15px;
            }
            .comment-title::before,
            .comment-title::after {
                width: 20px;
                margin-right: -25px;
                margin-left: -25px;
            }
            .comment-title {
                font-size: 1.35rem;
            }
            .comment p {
              font-size: 1.1rem;
              line-height: 1.5rem;
            }
        }
.br-sp{
    display: none;
}
@media screen and (max-width: 30rem) {
    .br-sp{
        display: block;
    }
}

    .member {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      max-width: 1400px;
      margin: 0 auto;
    }
    .member__item {
      perspective: 1000px;
      height: 400px;
    }
    .member__link {
      display: block;
      width: 100%;
      height: 100%;
      text-decoration: none;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.6s;
      transform-origin: center center;
    }
    .member__item:hover .member__link {
      transform: rotateY(180deg);
    }
    .member__container {
      position: absolute;
      top: 0;      /* 追加 */
      left: 0;     /* 追加 */
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 12px;
      overflow: hidden;
    }
    .member__container--front {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      flex-wrap: wrap;
      flex-direction: column;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    .member__container--middle {
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.95);
      transform: rotateY(90deg);
      z-index: 1;
    }
    .member__container--back {
      background: #fff;
      transform: rotateY(180deg) !important;
      backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
    }
@media (max-width: 768px) {
  .member {
    grid-template-columns: repeat(2, 1fr);
    gap: 0px;
  }
  .member__item {
    height: 280px; /* 高さを少し調整 */
  }
  .member__name {
    font-size: 16px; /* 文字サイズを調整 */
  }
  .member__role {
    font-size: 12px;
  }
  .member__container--front {
    padding: 7px 3px;
  }
}

    /* 背景パターン */
    .bg-pattern {
      position: relative;
    }

    .bg-pattern::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0.1;
    }
    .bg-pattern--sky-blue {
    }
    .bg-pattern--pink {
      background: linear-gradient(135deg, #F48FB1, #F06292);
      color: #fff;
    }
    .bg-pattern--emerald {
      background: linear-gradient(135deg, #4DB6AC, #26A69A);
      color: #fff;
    }
    .bg-pattern--brown {
      background: linear-gradient(135deg, #A1887F, #8D6E63);
      color: #fff;
    }
    .bg-pattern--yellow {
      background: linear-gradient(135deg, #FFD54F, #FFCA28);
      color: #fff;
    }
    .bg-pattern--purple {
      background: linear-gradient(135deg, #BA68C8, #AB47BC);
      color: #fff;
    }
    .member__photo {
      filter: drop-shadow(0 10px 3px rgba(0, 0, 0, 0.04));
      width: 90%;
      margin: 0 auto;
      position: relative;
    }
    .member__photo img {
      width: 100%;
      height: auto;
      display: block;
    }

/* member__metaを画像の上に重ねる */
.member__photo .member__meta {
  position: absolute; /* 追加 */
  top: 30%; /* 追加：上下中央 */
  left: 50%; /* 追加:左右中央 */
  transform: translate(-50%, -50%); /* 追加:完全に中央配置 */
  z-index: 10; /* 追加:画像より前面に */
  width: 100%; /* 追加 */
  text-align: center;
  padding: 20px;
  margin: 0; /* 追加:デフォルトのmarginをリセット */
  font-family: "Hannari", sans-serif;
}
/* 文字を見やすくする場合（オプション） */
.member__photo .member__meta .member__role,
.member__photo .member__meta .member__name {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 文字に影をつける */
  color: #000000; /* 必要に応じて色を調整 */
}    

    .member__meta {
      text-align: center;
      padding: 20px;
    }
    .member__role {
      font-size: 14px;
      letter-spacing: 2px;
      color: #999;
      margin-bottom: 10px;
      font-weight: normal;
    }
    .member__name {
      font-size: 24px;
      letter-spacing: 3px;
      color: #333;
      font-weight: bold;
    }
    .member-collection {
      width: 100%;
      height: 100%;
      position: relative;
      padding: 20px;
      outline: 1px double #db5435; /* 二重線の外枠 */
    }
    .member-collection img {
      width: 100%;
      height: 95%;
      object-fit: cover;
      border-radius: 8px;
    }
    .member-collection__border {
      position: absolute;
      background: linear-gradient(1deg, #db5435);
      outline: 6px double #db5435;
    }
    .member-collection__border--top,
    .member-collection__border--bottom {
      height: 2px;
      left: 20px;
      right: 20px;
    }
    .member-collection__border--top {
      top: 20px;
    }
    .member-collection__border--bottom {
      bottom: 20px;
    }
    .member-collection__border--left,
    .member-collection__border--right {
      width: 2px;
      top: 20px;
      bottom: 20px;
    }
    .member-collection__border--left {
      left: 20px;
    }
    .member-collection__border--right {
      right: 20px;
    }
   @media (max-width: 768px) {
        .member-collection {
            padding: 0px;
        }
    .member-collection__border--top,
    .member-collection__border--bottom {
      height: 2px;
      left: 13px;
      right: 13px;
    }
    .member-collection__border--top {
      top: 35px;
    }
    .member-collection__border--bottom {
      bottom: 25px;
    }
    .member-collection__border--left,
    .member-collection__border--right {
      width: 2px;
      top: 35px;
      bottom: 25px;
    }
    .member-collection__border--left {
      left: 13px;
    }
    .member-collection__border--right {
      right: 13px;
    }
  }
    /* 裏面プレビュー全体のレイアウト */
.member__back-contents-wrapper {
  padding: 15px; /* 余白を調整 */
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
    .member__back-contents-wrapper p{
      text-align: center;
      font-size: 0.8rem;
      font-weight: 400;
      color: #000;
      font-family: 'M PLUS Rounded 1c', sans-serif;
    }
    .member__back-contents-wrapper p span{
      text-align: center;
      font-size: 1.8rem;
      font-weight: 400;
      color: #db5435;
      font-family: "ta-candy", sans-serif;      
    }
@media (max-width: 768px) {
    .member__back-contents-wrapper {
      padding: 25px 15px 15px;
    }
    .member__back-contents-wrapper p{
        font-size: 0.75rem;
    }
}


/* プレビュー内のタイトル・キーワード */
.preview-header {
  margin-top: 25px;
}
@media (max-width: 768px) {
    .preview-header {
      margin-top: 20px; 
    }
}

.preview-keyword {
  display: block;
  font-size: 1.8rem;
  color: #db5435;
  font-family: "ta-candy", sans-serif;
  margin: 5px auto 0;
}
/* 運勢の要約テキスト */
.preview-summary {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #666;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 3行超えたら「...」にする */
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 10px 25px 10px;
}
/* 開運アイテムの簡易表示（小さい丸） */
.preview-items {
  width: 47%;
  margin-bottom: 5px;
}
.preview-item-thumb {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #db5435;
  object-fit: cover;
}
@media (max-width: 768px) {
    .preview-keyword {
      font-size: 1.3rem;  
      margin: 0px auto 0;
    }
    .preview-summary {
      padding: 2px 9px 18px;  
    }
    .preview-items {
      width: 40%;  
      margin-bottom: 1px; 
    }
}


.member__card {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
  transform-origin: center center;
}
.member__item:hover .member__card {
  transform: rotateY(180deg);
}
/* preview-more をリンクとして機能させる */
.preview-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background-color: #db5435;
  color: #fff;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 10px rgba(219, 84, 53, 0.3);
  position: relative;
  overflow: visible;
  transition: transform 0.3s ease;
  animation: pulseButton 2s infinite;
  text-decoration: none; /* 追加 */
  cursor: pointer; /* 追加 */
}
@media (max-width: 768px) {
    .preview-more {
      padding: 5px 10px;  
    }
}


.preview-more:hover {
  transform: scale(1.05); /* ホバー効果を追加 */
}
/* 指のアイコン（擬似要素で作ります） */
.preview-more::before {
  content: ''; /* 空にする */
  display: inline-block;
  width: 18px;  /* アイコンの幅 */
  height: 18px; /* アイコンの高さ */
  /* タップしている指のSVGアイコン */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 11.24V7.5a2.5 2.5 0 0 1 5 0v3.74c1.21-.81 2-2.18 2-3.74C16 5.01 13.99 3 11.5 3S7 5.01 7 7.5c0 1.56.79 2.93 2 3.74zm9.84 4.63l-4.54-2.26c-.17-.07-.35-.11-.54-.11H13v-6a1 1 0 0 0-2 0v10.53l-3.33-1.91c-.32-.18-.69-.19-1.02-.03-.33.17-.57.48-.65.84l-.44 1.9c-.11.47.09.96.48 1.25l5 3.75c.31.23.69.35 1.08.35h6.42c.73 0 1.35-.52 1.47-1.24l.67-4.04a1.517 1.517 0 0 0-1.84-1.78z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 4px;
}
/* 日本語のラベルを追加 */
.preview-more::after {
  content: '詳しく見る';
  margin-left: 2px;
}
/* ボタンがふわふわ揺れるアニメーション */
@keyframes pulseButton {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
/* 波紋が広がるような装飾（オプション） */
.preview-more-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border: 1px solid #db5435;
  border-radius: 20px;
  transform: translate(-50%, -50%);
  animation: rippleEffect 2s infinite;
  pointer-events: none;
}
@keyframes rippleEffect {
  0% { width: 100%; height: 100%; opacity: 0.5; }
  100% { width: 130%; height: 180%; opacity: 0; }
}

.fortune-card-newyear {
  max-width: 500px;
  margin: 20px auto;
  background-color: #fffaf5; /* わずかに和紙っぽい温かみのある白 */
  border: 6px solid #db5435; /* おみくじの赤 */
  outline: 7px double #db5435; /* 二重線の外枠 */
  outline-offset: -12px;
  border-radius: 4px;
  padding: 25px 25px;
  position: relative;
  text-align: center;
  color: #333;
}
@media (max-width: 768px) {
    .fortune-card-newyear {
        padding: 20px 15px 25px;
    }
}

/* 飾り罫線 */
.divider {
  color: #db5435;
  font-size: 0.7rem;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.divider::before,.divider::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: #db5435;
  margin: 0 10px;
}
/* 星座アイコン */
.zodiac-icon {
  width: 90px;
  background: #fff;
  margin-bottom: 2px;
}
/* キーワード（大きく・可愛く・赤く） */
.sub-title {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 0.9rem;
  color: #db5435;
  margin-bottom: 5px;
}
.main-keyword {
  font-size: 3.3rem;
  color: #db5435;
  margin: 0 0 15px 0;
  font-weight: 500;
  font-family: "ta-candy", sans-serif;
}
@media (max-width: 768px) {
    .main-keyword {
        font-size: 2.5rem;
    }
}

/* 運勢本文 */
.fortune-content p {
  font-size: 0.95rem;
  line-height: 1.8;
  margin: 15px 0;
  text-align: left;
}

/* スライダー */
.item-slider-container {
  margin: 30px 0;
  background: rgba(230, 0, 18, 0.03);
  padding: 15px 10px;
  border-radius: 8px;
}
.slider-label {
  font-weight: bold;
  color: #db5435;
  font-size: 0.85rem;
  margin-bottom: 15px;
}
.item-slider {
  display: flex;
  overflow-x: auto;      /* 横スクロールを許可 */
  overflow-y: hidden;
  scroll-snap-type: x mandatory; /* ピタッと止まる設定 */
  gap: 30px;
  padding: 10px 20px;
  -webkit-overflow-scrolling: touch; /* スマホで滑らかに */
  /* 子要素が折り返さないように強制 */
  flex-wrap: nowrap; 
  min-height: 150px; /* ←画像が読み込めなくても高さを確保 */
}

/* 各スライド（画像1枚分） */
.item-slide {
  flex: 0 0 100%; /* 縮まないように 0 0 を指定、幅は85% */
  scroll-snap-align: center; /* 中央で止まるように */
}

/* 画像がスライドからはみ出さないように */
.item-slide img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none; /* スワイプ操作を邪魔しないように */
}
.item-slider::-webkit-scrollbar { display: none; }

/* ドット */
.slider-dots {
  margin-top: 10px;
  display: flex;         /* ←中央寄せを確実に */
  justify-content: center;
  gap: 5px;
  position: relative;    /* ←隠れないように */
  z-index: 10;
}
/* ドットのスタイル修正 */
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #C99C33; /* 元の色 */
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}
/* 当たり判定を大きくする（スマホ・PC共通） */
.dot::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
}
.dot.active {
  background-color: #db5435 !important;
  transform: scale(1.2);
}

/* スタッフ理由 */
.staff-reason {
  border: 1px dashed #db5435;
  padding: 15px;
  margin-top: 20px;
  text-align: left;
  background: #fff;
}
.staff-reason h3 {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 0.9rem;
  color: #db5435;
  margin: 0 0 10px 0;
  display: inline-block;
  border-bottom: 2px solid #db5435;
}
.staff-reason p {
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0;
}



/* スライダーを囲むラッパー */
.slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
/* 矢印ボタンの基本スタイル */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: rgba(219, 84, 53, 0.8); /* メインカラー */
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  transition: background 0.3s;
}
.slider-arrow:hover {
  background: rgba(219, 84, 53, 1);
}
.slider-arrow.prev { left: -10px; } /* 少し外側に出す */
.slider-arrow.next { right: -10px; }

/* スマホでは矢印を少し小さく、より内側に */
@media (max-width: 480px) {
  .slider-arrow {
    width: 30px;
    height: 30px;
    background: rgba(219, 84, 53, 0.6);
  }
  .slider-arrow.prev { left: 2px; }
  .slider-arrow.next { right: 2px; }
}


/* カードのフリップアニメーション - 追加 */
.fortune-card-newyear {
    /* 既存のスタイルはそのまま残して、以下を追加 */
    opacity: 0;
    transform: perspective(1000px) rotateY(-90deg);
    transform-style: preserve-3d;
    transition: none;
    display: none; /* 初期状態は非表示 */
}
.fortune-card-newyear::-webkit-scrollbar { display: none; }

/* カードが表示される時のアニメーション - 追加 */
.fortune-card-newyear.show {
    display: block;
    animation: cardFlip 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes cardFlip {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotateY(-90deg) scale(0.8);
    }
    50% {
        opacity: 1;
        transform: perspective(1000px) rotateY(0deg) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) rotateY(0deg) scale(1);
    }
}

/* 星座リンクにホバーエフェクト - 追加（オプション） */
.lineup_list a {
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lineup_list a:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(219, 84, 53, 0.3);
}


/* 1. モーダル用の中身（実体）は、最初はページに表示しない */
body > .fortune-card-newyear {
  display: none;
}

/* 2. モーダルの中にコピーされた時のカードの見た目 */
#modal-body .fortune-card-newyear {
  display: block !important; /* 強制的に表示 */
  background-color: #fff;    /* 白背景にする */
  border-radius: 15px;
  color: #333;               /* 文字を濃いグレーに */
  text-align: center;
  max-height: 80vh;          /* 画面からはみ出さない高さ */
  overflow-y: auto;          /* 中身が長い場合はカード内スクロール */
}


.divider { margin: 15px 0; color: #C99C33; }
.item-slide img { width: 100%; border-radius: 8px; margin-bottom: 10px; }


/* モーダルの背景（暗くなる部分） */
.modal-overlay {
  display: none; /* 初期状態は非表示 */
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* 背景を暗く */
  backdrop-filter: blur(5px); /* 背景をぼかすとおしゃれです */
  overflow-y: auto; /* 中身が長い場合にスクロール可能に */
}
/* モーダルの白い箱 */
.modal-content {
  position: relative;
  background-color: transparent; /* カード自体の背景を使うので透明 */
  margin: 5% auto;
  padding: 0;
  width: 90%;
  max-width: 500px;
  animation: modalFadeIn 0.4s ease-out;
}
/* 閉じるボタン */
.modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
/* モーダル表示中はカードを表示する */
.modal-content .fortune-card-newyear {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  margin: 0;
}


.share-content{
  margin: 70px auto 100px;
  text-align: center;
}


/* シェアボタンのスタイル */
        .share-btn {
            background: linear-gradient(135deg, #db5435 0%, #ff6b4a 100%);
            color: white;
            border: none;
            padding: 15px 40px;
            border-radius: 30px;
            font-weight: bold;
            font-size: 1.2rem;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(219, 84, 53, 0.4);
            transition: all 0.3s ease;
            margin-top: 20px;
        }
        .share-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(219, 84, 53, 0.6);
        }
        .share-btn:active {
            transform: translateY(0);
        }
        .share-btn span{
          font-weight: bold;
          font-size: 1.3rem;
        }
        /* シェアメニュー */
        .share-menu {
            display: none;
            margin-top: 15px;
            padding: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .share-menu.active {
            display: block;
            animation: slideDown 0.3s ease;
        }
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .share-options {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }
        .share-option-btn {
            flex: 1;
            min-width: 120px;
            padding: 17px 10px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .share-option-btn:hover {
            transform: scale(1.05);
        }

        .btn-download {
            background: #4CAF50;
            color: white;
        }
        .btn-twitter {
            background: #000000;
            color: white;
        }
        .btn-line {
            background: #00B900;
            color: white;
        }
        .btn-facebook {
            background: #1877F2;
            color: white;
        }
        .btn-copy {
            background: #666;
            color: white;
        }
        .status-message {
            margin-top: 10px;
            padding: 10px;
            border-radius: 5px;
            font-size: 0.9rem;
            display: none;
        }
        .status-message.success {
            background: #d4edda;
            color: #155724;
            display: block;
        }
        .status-message.error {
            background: #f8d7da;
            color: #721c24;
            display: block;
        }
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&family=Noto+Serif+JP:wght@600;900&display=swap');