html {
  scroll-behavior: smooth;
}

.content h1{
   font-size: 32px;
   letter-spacing: 0;
   line-height: 50px;
   font-weight: 550;
}

.content h2{
   font-size: 26px;
   letter-spacing: 6;
   line-height: 26px;
   text-align: center;
   font-weight: 550;
}

.content{
    padding-top: 7vh;
}

/* 共通スタイル */
.button {
 display: flex;
 flex-direction: column; 
 justify-content: center;
 align-items: center;
 text-align: center;
 width: 300px;
 height: 50px;
 margin: 0 auto;
 padding: .9em 2em;
 background-color: #fffcfc;
 color: #1C1B1B;
 font-size: 20px;
 letter-spacing: 6%;
 line-height: 33px;
 border: 3px solid;
 transition: all 0.3s ease;
}


/* 色バリエーション */
.button.red {
 border-color: #A93B3E;
}


.button.green {
 border-color: #a3ce6b;
}


.button.purple {
 border-color: #be86b9;
}


/* hover共通 */
.button:hover {
 color: #fffcfc;
 font-weight: 500;
}


/* hover色 */
.button.red:hover {
 background-color: #A93B3E;
}


.button.green:hover {
 background-color: #a3ce6b;
}


.button.purple:hover {
 background-color: #be86b9;
}


/* グリッド本体 */
.buttons {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 30px;
 justify-items: center;              /* 各ボタンをセル内で中央寄せ */
 justify-content: center; 
 max-width: 900px;
 margin: 60px auto;
 cursor: pointer;
}


/* 左列（2つ） */
.buttons .button:nth-child(1) {
 grid-column: 1;
 grid-row: 2;
}
.buttons .button:nth-child(2) {
 grid-column: 1;
 grid-row: 3;
}


/* 左列（2つ）を上にずらす */
.buttons .button:nth-child(1),
.buttons .button:nth-child(2) {
 transform: translateY(-60px);
}


/* 中央（3つ） */
.buttons .button:nth-child(3) {
 grid-column: 2;
 grid-row: 1;
}
.buttons .button:nth-child(4) {
 grid-column: 2;
 grid-row: 2;
}
.buttons .button:nth-child(5) {
 grid-column: 2;
 grid-row: 3;
}


/* 右列（2つ） */
.buttons .button:nth-child(6) {
 grid-column: 3;
 grid-row: 2;
}
.buttons .button:nth-child(7) {
 grid-column: 3;
 grid-row: 3;
}


/* 右列（2つ）を上にずらす */
.buttons .button:nth-child(6),
.buttons .button:nth-child(7) {
 transform: translateY(-60px);
}






/* カード */
/* ベースの共通スタイル */
.event-detail {
 position: relative;
 max-width: 65vw;
 margin: 100px auto;
 padding: 50px;
 background: #fffcfc;


 /* デフォルト色（赤） */
 --border-color: #A93B3E;
 scroll-margin-top: 40px;
}


.event-detail::before {
 content: "";
 position: absolute;
 inset: 0;
 border: 3px solid var(--border-color);
 clip-path: polygon(
   60px 0,                    /* 左上 */
   calc(100% - 120px) 0,       /* 右上 */
   100% 80px,
   100% calc(100% - 60px),    /* 右下 */
   calc(100% - 60px) 100%,
   150px 100%,                 /* 左下 */
   0 calc(100% - 100px),
   0 60px
 );
 pointer-events: none;
}


.event-detail::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;


 background:
   linear-gradient(
     135deg,
     transparent 40px,
     var(--border-color) 40px,
     var(--border-color) 43px,
     transparent 43px
   ) no-repeat,


   linear-gradient(
     135deg,
     transparent calc(100% - 43px),
     var(--border-color) calc(100% - 43px),
     var(--border-color) calc(100% - 40px),
     transparent calc(100% - 40px)
   ) no-repeat;


 background-size: 100% 100%;
}


/* 赤・緑・紫 用のクラス */
.event-detail.red    { --border-color: #A93B3E; } /* 赤 */
.event-detail.green  { --border-color: #a3ce6b; } /* 緑 */
.event-detail.purple { --border-color: #be86b9; } /* 紫 */




/* 右上菱形 */
.top-right {
 top: -2%;
 right: -8.5%;
}


/* 左下菱形 */
.bottom-left {
 bottom: -2%;
 left: -4.5%;
}




/* 上段 */
.event-top {
 display: flex;
 gap: 3.5vw;
 align-items: center;
}






.event-top img {
 width: 40%;
}


.event-top p{
 font-size: 20px;
 letter-spacing: 6%;
 line-height: 33px;
}




.event-text {
 flex: 1;
}


.mini{
   font-size: 24px;
   letter-spacing: 6%;
   line-height: 33px;
   white-space: nowrap;
   font-weight: 550;
}




/* セクションタイトル */
.section-title {
  display: flex;
 align-items: center;
 gap: 10px;
 margin: 2vh 0;
 font-weight: bold;
}


.section-title svg {
 display: block;
}


.section-title-2 {
  display: flex;
 align-items: center;
 gap: 10px;
 margin-top: 2vh;
 margin-bottom: 3.5vh;
 font-weight: bold;
}


.section-title-2 svg {
 display: block;
}


.section-title-3 {
  display: flex;
 align-items: center;
 gap: 10px;
 margin-top: 3.5vh;
 margin-bottom: 2vh;
 font-weight: bold;
}




.left {
 margin-left: -0.8vw;
}


.section-title-3 svg {
 display: block;
}


/* 下段 */
.event-bottom {
 display: flex;
 justify-content: flex-start; /* 左寄せ */
 gap: 8vw; /* 要素間の固定間隔 */
 margin-top: 3vh;
}


.schedule {
   display: flex;
   flex-direction: column; /* SVGを縦に積む */
   align-items: flex-start; /* 左揃えでずれない */
   gap: 8px; /* SVG間の余白 */
}


.schedule svg {
   display: block;
   transform-origin: top left; /* 左上基準で拡大 */
   /* 例: 1.2倍にしたい場合 */
   /* transform: scale(1.2); */
   width: calc(100% * 1.2); /* 元のサイズの1.2倍 */
   height: auto;
}


.apply svg {
 display: block;
}
.place{
 font-size: 24px;
   letter-spacing: 6%;
   line-height: 33px;
}


.place-1{
 font-size: 24px;
   letter-spacing: 6%;
   line-height: 33px;
 margin: 0;       /* まずリセット */
 margin-top: 5px;
 margin-bottom: 20px;
}

.label-red {
 border: 2px solid #A93B3E;
 width: 60px;
 height: 60px;


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


 text-align: center;
 font-size: 20px;
 letter-spacing: 6%;
 line-height: 25px;
}


.label-green {
 border: 2px solid #a3ce6b;
 width: 60px;
 height: 60px;


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


 text-align: center;
 font-size: 20px;
 letter-spacing: 6%;
 line-height: 25px;
}


.label-purple {
 border: 2px solid #be86b9;
 width: 60px;
 height: 60px;


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


 text-align: center;
 font-size: 20px;
 letter-spacing: 6%;
 line-height: 25px;
}


.apply-inner {
   display: flex;
   align-items: center;
   gap: 16px; /* ボックスとSVGの間の隙間 */
   margin-top: 2vh;
}




.button-1 {
 display: flex;
 flex-direction: column; 
 justify-content: center;
 align-items: center;
 text-align: center;
 width: 26vw;
 height: auto;
 margin: 3vh auto;
 padding: .6em 0;
 background-color: #fffcfc;
 color: #1C1B1B;
 font-size: 32px;
 letter-spacing: 6%;
 line-height: 33px;
 border: 3px solid;
 transition: all 0.3s ease;
}
.button-2 {
 display: flex;
 flex-direction: column; 
 justify-content: center;
 align-items: center;
 text-align: center;
 width: 26vw;
 height: auto;
 margin: 3vh auto;
 padding: .6em 0;
 background-color: #fffcfc;
 color: #1C1B1B;
 font-size: 32px;
 letter-spacing: 6%;
 line-height: 33px;
 border: 3px solid;
 transition: all 0.3s ease;
 visibility: hidden;
}

/* 色バリエーション */
.button-1.red {
 border-color: #A93B3E;
}


.button-1.green {
 border-color: #a3ce6b;
}


.button-1.purple {
 border-color: #be86b9;
}


/* hover共通 */
.button-1:hover {
 color: #fffcfc;
 font-weight: 500;
}


/* hover色 */
.button-1.red:hover {
 background-color: #A93B3E;
}


.button-1.green:hover {
 background-color: #a3ce6b;
}


.button-1.purple:hover {
 background-color: #be86b9;
}


a {
 text-decoration: none;
}




/* section2全体で画像を中央に */
#section2 .image-wrapper {
 display: flex;
 justify-content: center; /* 横中央 */
 /* align-items: center; もし縦中央にしたい場合 */
 margin-top: 20px; /* タイトルとの余白調整 */
}


#section2 .image-wrapper img {
 max-width: 100%;  /* 画面内に収まる */
 height: auto;
}


.place-date svg {
     width: auto;
     height: 40px;
     margin-left: -15px;
   }


.bubble-image {
 display: none;
}


.first-pc {
       display: block;
   }
.first-sp {
       display: none;
   }




.sp-only {
 display: none;
}


.date-line{
 display: none;
}

.image-wrapper2{
  display: flex;
 justify-content: center; /* 横中央 */
  margin-top: 110px; /* タイトルとの余白調整 */
}

#section3 .image-wrapper2 img {
 max-width: 60%;  /* 画面内に収まる */
 height: auto;
}
.chushaku{
  color: #1C1B1B;
  font-size: 20px;
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
   .sp-only {
   display: none;
 }
   .first-pc {
       display: block;
   }
   .first-sp {
       display: none;
   }

   .date-line{
 display: block;
  line-height: 1.2;
}

    .first-pc svg{
        width: 53vw;
        height: auto;
    }


    .content h2 {
       font-size: 24px;
   }
   .content h3 {
       font-size: 20px;
       letter-spacing: 0.05em;
       line-height: 50px;
       text-align: center;
       font-weight: 500;
   } 
  
   .bubble {
       position: relative;
       background: #FDEAE9; /* 薄いピンク */
       padding: 15px 10px;
       border-radius: 40px;
       max-width: 90%;
       margin: 3vh auto;
       }
     .bubble::after {
       content: "";
       position: absolute;
       bottom: -40px;
       right: 20vw;


       width: 80px;
       height: 50px;
       background: #FDEAE9;


       clip-path: polygon(0 0, 100% 0, 100% 100%);
     }



   .bubble h2{
     font-size: 24px;
     letter-spacing: 0.05em;
     line-height: 26px;
     margin: 3vh 0;
   }


   .bubble-image {
   display: block;
   position: relative;
   margin-top: -20vh;
   text-align: right;
  overflow: hidden;
 }


 .bubble-image img {
   width: 40%;
   height: auto;
   transform: scaleX(-1) translateX(-30px);
 }




   .button {
       width: 30vw;
       height: 7vw;
       font-size: 20px;
       letter-spacing: 0.05em;
       line-height: 26px;
       padding: 0.5em 0.8em;
   }




   .buttons {
       grid-template-columns: repeat(2, 1fr);
       gap: 15px;
       max-width: 80%;
       margin: 3vh auto;
   }

   .buttons .button:last-child {
  grid-column: 1 / -1 !important;
  justify-self: center;
}

     .buttons .button {
   transform: none !important;
   grid-column: auto !important;
   grid-row: auto !important;
 }


       /* カード全体 */
   .event-detail {
       max-width: 80%;          /* 幅を狭くして余白を確保 */
       margin: 7vh auto;       /* 上下の余白も少なく */
   }

    /* ① 横並びやめる（縦にする） */
 .event-top {
   flex-direction: column;
   gap: 20px;
 }


 /* ② 画像をカードいっぱいに */
 .event-top img {
   width: 100%;
   height: auto;
 }


 /* ③ 余白リセット（これ重要） */
 .event-detail {
   padding: 40px 40px 40px; /* 必要に応じて調整 */
 }


 /* ④ タイトル非表示 */
 .event-top .section-title {
   display: none;
 }


     /* セクションタイトル */
   .section-title {
       flex-direction: column;
       gap: 5px;
   }


   /* 左の画像 */
   .event-left {
       width: 100%;
   }
   .event-left img {
       width: 100%;
       height: auto;
   }

      .place-date svg {
     width: auto;
     height: 45px;
     margin-left: -10px;
   }


   .mini {
       font-size: 32px;
       letter-spacing: 0.05em;
       line-height: 26x;
       font-weight: 500;
   }




   /* 本文テキスト */
   .event-top p{
       font-size: 24px;
       line-height: 33px;
       letter-spacing: 0.05em;  /* スマホは左寄せが読みやすい */
   }

      .event-detail h1 {
       font-size: 32px;
       line-height: 33px;
       letter-spacing: 0.05em;
       margin-bottom: 3vh;
       font-weight: 500;
   }

      .event-detail::before {
        content: "";
        position: absolute;
        inset: 0;
        border: 3px solid var(--border-color);
        clip-path: polygon(
        60px 0,                    /* 左上 */
        calc(100% - 170px) 0,       /* 右上 */
        100% 50px,
        100% calc(100% - 60px),    /* 右下 */
        calc(100% - 60px) 100%,
        200px 100%,                 /* 左下 */
        0 calc(100% - 100px),
        0 60px
        );
        pointer-events: none;
        
        }

.diamond.top-right {
  position: absolute;
  width: 200px;
  height: auto;
  top: -30px;
  right: -10px; /* ← これも必要な可能性高い */
}

.diamond.bottom-left {
  position: absolute;
  width: 250px;
  height: auto;
  bottom: -30px;
  left: -30px;
}



   .event-bottom {
     display: flex;
     flex-direction: column;
     gap: 20px;
   }


   /* タイトル（SVG＋文字）は横に戻す */
   .event-bottom .section-title {
     display: flex;
     flex-direction: row;   /* ← これが重要 */
     align-items: center;   /* ← 縦位置揃える */
     gap: 8px;              /* ← SVGと文字の間 */
   }


   .label-red {
     border: 2px solid #A93B3E;
     width: 60px;
     height: 60px;
     aspect-ratio: 1 / 1; /* ← これで常に正方形 */
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     font-size: 20px;
     letter-spacing: 3px;
     line-height: 30px;
   }

    .label-green {
     border: 2px solid #a3ce6b;
     width: 60px;
     height: 60px;
     aspect-ratio: 1 / 1; /* ← これで常に正方形 */
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     font-size: 20px;
     letter-spacing: 3px;
     line-height: 30px;
   }

   .label-purple {
     border: 2px solid #be86b9;
     width: 60px;
     height: 60px;
     aspect-ratio: 1 / 1; /* ← これで常に正方形 */
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     font-size: 20px;
     letter-spacing: 3px;
     line-height: 30px;
   }

   .place{
     font-size: 24px;
       letter-spacing: 0.05em;
       line-height: 26px;
   }

   .place-1{
     font-size: 24px;
    letter-spacing: 0.05em;
    line-height: 26px;
    margin: 0;       /* まずリセット */
     margin-top: 5px;
     margin-bottom: 20px;
}

    .date svg {
       width: 50vw;
       height: auto;
       }


    .button-1 {
        width: 80%;          /* ← 画面に対していい感じの幅 */
        max-width: 300px;   /* ← デカくなりすぎ防止 */
        font-size: 24px;     /* ← 小さく */
        line-height: 24px;
        padding: 0.8em 1em;  /* ← 少し余白 */
        margin: 20px auto;   /* ← 上下余白調整 */
        border-width: 2px;   /* ← 細くすると綺麗 */
        white-space: nowrap;
 }
 
    .button-2 {
        width: 80%;          /* ← 画面に対していい感じの幅 */
        max-width: 300px;   /* ← デカくなりすぎ防止 */
        font-size: 24px;     /* ← 小さく */
        line-height: 24px;
        padding: 0.8em 1em;  /* ← 少し余白 */
        margin: 20px auto;   /* ← 上下余白調整 */
        border-width: 2px;   /* ← 細くすると綺麗 */
        white-space: nowrap;
        visibility: hidden;
 }

     .event-detail.purple .bottom-left {
    transform: scale(0.8);
    }
    .event-detail.green .diamond.bottom-left {
    left: -60px;
    bottom: -30px;
    }

    .event-detail.purple .diamond.bottom-left {
    left: -60px;
    bottom: -30px;
    }


    .event-detail.green .bottom-left {
    transform: scale(0.8);
    }





    /* section2全体で画像を中央に */
    #section2 .image-wrapper {
    display: flex;
    justify-content: center; /* 横中央 */
    /* align-items: center; もし縦中央にしたい場合 */
    margin-top: 80px; /* タイトルとの余白調整 */
    }


    #section2 .image-wrapper img {
    max-width: 90%;  /* 画面内に収まる */
    height: auto;
    }
}





@media (max-width: 500px) {


   .sp-only {
   display: block;
 }
   .first-pc {
       display: none;
   }
   .first-sp {
       display: block;
       width: 70vw;
       margin-top: 1vh;
   }

   .date-line{
 display: block;
  line-height: 1.2;
}


 .big {
   font-size: 24px;
   letter-spacing: 0.05em;
   line-height: 26px;
   font-weight: 350;
 }


 .small {
   font-size: 14px;
   letter-spacing: 0.05em;
   line-height: 26px;
}


.place-line .big{
 font-size: 20px;
   letter-spacing: 0.05em;
   line-height: 26px;
}


 .first-sp .date-line:nth-child(2) {
 text-align: right;
}
 .first-sp p {
   margin: 0;
 }


 .first-sp .date-line {
 margin-bottom: 1px; /* 好きな値に調整 */
}


    .content h2 {
       font-size: 24px;
   }
   .content h3 {
       font-size: 20px;
       letter-spacing: 0.05em;
       line-height: 50px;
       text-align: center;
       font-weight: 500;
   } 
  
   .bubble {
       position: relative;
       background: #FDEAE9; /* 薄いピンク */
       padding: 15px 20px;
       border-radius: 40px;
       max-width: 90%;
       margin: 10vh auto;
       }
     .bubble::after {
       content: "";
       position: absolute;
       bottom: -40px;
       right: 100px;


       width: 80px;
       height: 50px;
       background: #FDEAE9;


       clip-path: polygon(0 0, 100% 0, 100% 100%);
     }



   .bubble h2{
     font-size: 20px;
     letter-spacing: 0.05em;
     line-height: 26px;
   }


   .bubble-image {
   display: block;
   position: relative;
   margin-top: -10vh;
   text-align: right;
  overflow: hidden;
 }


 .bubble-image img {
   width: 50%;
   height: auto;
   transform: scaleX(-1) translateX(-30px);
 }




   .button {
       width: 60vw;
       height: 10vw;
       font-size: 14px;
       letter-spacing: 0.05em;
       line-height: 26px;
       padding: 0.5em 0.8em;
   }




   /* ボタンのグリッド列を2列に */
   .buttons {
       display: flex;          /* ← gridを上書き */
       flex-direction: column; /* ← 縦並び */
       align-items: center;
       gap: 15px;
       max-width: 90%;
       margin: 20px auto;
   }


     .buttons .button {
   transform: none !important;
   grid-column: auto !important;
   grid-row: auto !important;
 }


       /* カード全体 */
   .event-detail {
       max-width: 90%;          /* 幅を狭くして余白を確保 */
       margin: 10vh auto;       /* 上下の余白も少なく */
       padding: 40px 20px 40px; /* 内側のパディングを小さく */
   }

    /* ① 横並びやめる（縦にする） */
 .event-top {
   flex-direction: column;
   gap: 20px;
 }


 /* ② 画像をカードいっぱいに */
 .event-top img {
   width: 100%;
   height: auto;
 }


 /* ③ 余白リセット（これ重要） */
 .event-detail {
   padding: 40px 20px 40px; /* 必要に応じて調整 */
 }


 /* ④ タイトル非表示 */
 .event-top .section-title {
   display: none;
 }


     /* セクションタイトル */
   .section-title {
       flex-direction: column;
       gap: 5px;
   }


   /* 左の画像 */
   .event-left {
       width: 100%;
   }
   .event-left img {
       width: 100%;
       height: auto;
   }

      .place-date svg {
     width: auto;
     height: 20px;
     margin-left: -10px;
   }


   .mini {
       font-size: 20px;
       letter-spacing: 0.05em;
       line-height: 26x;
       font-weight: 550;
   }




   /* 本文テキスト */
   .event-top p{
       font-size: 14px;
       line-height: 26px;
       letter-spacing: 0.05em;  /* スマホは左寄せが読みやすい */
   }


   .name {
       font-size: 14px;
       line-height: 26px;
       letter-spacing: 0.05em;
       text-align: right;
   }

      .event-detail h1 {
       font-size: 20px;
       line-height: 33px;
       letter-spacing: 0.05em;
       margin-bottom: 3vh;
   }

      .event-detail::before {
        content: "";
        position: absolute;
        inset: 0;
        border: 3px solid var(--border-color);
        clip-path: polygon(
        60px 0,                    /* 左上 */
        calc(100% - 130px) 0,       /* 右上 */
        100% 50px,
        100% calc(100% - 60px),    /* 右下 */
        calc(100% - 60px) 100%,
        120px 100%,                 /* 左下 */
        0 calc(100% - 60px),
        0 60px
        );
        pointer-events: none;
        
        }


.diamond.top-right {
       width: 130px;
       height: auto;
       top: -0.5;
       left: 2;
   }
   .diamond.bottom-left {
       width: 150px;
       height: auto;
       bottom: -1%;
       left: 0;
   }


   .event-bottom {
     display: flex;
     flex-direction: column;
     gap: 20px;
   }


   /* タイトル（SVG＋文字）は横に戻す */
   .event-bottom .section-title {
     display: flex;
     flex-direction: row;   /* ← これが重要 */
     align-items: center;   /* ← 縦位置揃える */
     gap: 8px;              /* ← SVGと文字の間 */
   }


   .label-red {
     border: 2px solid #A93B3E;
     width: 50px;
     height: 50px;


     aspect-ratio: 1 / 1; /* ← これで常に正方形 */


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


     text-align: center;
     font-size: 16px;
     line-height: 20px;
   }

    .label-green {
     border: 2px solid #a3ce6b;
     width: 50px;
     height: 50px;


     aspect-ratio: 1 / 1; /* ← これで常に正方形 */


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


     text-align: center;
     font-size: 16px;
     line-height: 20px;
   }






   .label-purple {
     border: 2px solid #be86b9;
     width: 50px;
     height: 50px;


     aspect-ratio: 1 / 1; /* ← これで常に正方形 */


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


     text-align: center;
     font-size: 16px;
     line-height: 20px;
   }

   .place{
     font-size: 14px;
       letter-spacing: 0.05em;
       line-height: 26px;
   }

   .place-1{
     font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 26px;
    margin: 0;       /* まずリセット */
     margin-top: 5px;
     margin-bottom: 20px;
}

    .date svg {
       width: 78vw;
       width: 74vw;
       height: auto;
       }


    .button-1 {
        width: 80%;          /* ← 画面に対していい感じの幅 */
        max-width: 220px;   /* ← デカくなりすぎ防止 */
        font-size: 16px;     /* ← 小さく */
        line-height: 24px;
        padding: 0.8em 1em;  /* ← 少し余白 */
        margin: 20px auto;   /* ← 上下余白調整 */
        border-width: 2px;   /* ← 細くすると綺麗 */
 }
 .button-2{
         width: 80%;          /* ← 画面に対していい感じの幅 */
        max-width: 220px;   /* ← デカくなりすぎ防止 */
        font-size: 16px;     /* ← 小さく */
        line-height: 24px;
        padding: 0.8em 1em;  /* ← 少し余白 */
        margin: 20px auto;   /* ← 上下余白調整 */
        border-width: 2px;   /* ← 細くすると綺麗 */
        visibility: hidden;
 }

     .event-detail.purple .bottom-left {
    transform: scale(0.8);
    }
    .event-detail.green .diamond.bottom-left {
    left: -10px;
    bottom: -20px;
    }




    .event-detail.purple .diamond.bottom-left {
    left: -15px;
    bottom: -25px;
    }


    .event-detail.green .bottom-left {
    transform: scale(0.8);
    }




    /* section2全体で画像を中央に */
    #section2 .image-wrapper {
    display: flex;
    justify-content: center; /* 横中央 */
    /* align-items: center; もし縦中央にしたい場合 */
    margin-top: 80px; /* タイトルとの余白調整 */
    }


    #section2 .image-wrapper img {
    max-width: 100%;  /* 画面内に収まる */
    height: auto;
    }

    /* section2全体で画像を中央に */
    #section3 .image-wrapper2 {
    display: flex;
    justify-content: center; /* 横中央 */
    /* align-items: center; もし縦中央にしたい場合 */
    margin-top: 80px; /* タイトルとの余白調整 */
    }


    #section3 .image-wrapper2 img {
    max-width: 100%;  /* 画面内に収まる */
    height: auto;
    }

    .chushaku{
      color: #1C1B1B;
      font-size: 14px;
    }
}