@font-face {
  font-family: "myFont";
  src: url("HiraKakuPro-W3.woff2") format('woff2'),
       url("HiraKakuPro-W3.woff")  format('woff');
}


html {
  scroll-behavior: smooth;
}




*{margin:0; padding:0; box-sizing: border-box; 
}


body {background:#f6f6f6;
color:#000;

line-height: 2;
font-family: "Noto Sans JP", sans-serif;

}

img {max-width:100%; 

 display: block;
  margin: 0 auto;
}

a {text-decoration: none; color:#fff;}







.sp {display:none;}

.top { text-align: center; }
.top img {width:100%;}

.content  {
width:70%;
background:#f9adcd;
color:#c1272d;
font-size:1.2vw;
margin:0 auto;
text-align: center;
font-feature-settings: "palt";
letter-spacing: 0.2em;
padding-bottom:50px;
}

h1,h2,h3 {margin:0; line-height:1.5; }

h1 {font-size:3.5vw; }
h1 span{color:#a92125;}

h2 {font-size:3vw;}
h3 {font-size:2vw;}
h4 {font-size:2.5vw;  margin:20px auto;}

ul {display:table; text-align: left; padding-left:1em; letter-spacing: 0;}
li {text-indent: -1em; list-style: none;}





.heading {
    text-align: center;
    position: relative;
    margin-top:60px;
    margin-bottom:60px;
}
.heading span {
    display: inline-block;
    padding: 0 20px; /* 見出しの左右の余白 */
    background-color: #f9adcd;
    position: relative;
    z-index: 1;
}
/* :after または :before */
.heading:after {
    content: "";
    width: 60%; /* 横幅いっぱい */
    height: 4px; /* 線の高さ */
    display: block;
    background-color: #c1272d;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%); 
    transform: translateX(-50%); 
}/* 文字との余白 */

.event-banner-wrapper {
            position: relative; /* 白いバッジ(absolute)の基準点にする */
            width:80%;
            padding-top: 4vw; 
            margin:50px auto;
            
        }

        /* * 上部の白いバッジ「入場特典付き！」
         */
        .perk-badge {
            position: absolute; /* 親要素(.event-banner-wrapper)を基準に浮かせる */
            top: 10px;             /* 親要素の最上部（padding-topの開始位置）に配置 */
            left: 50%;          /* 親要素の左右中央を基準に */
            transform: translateX(-50%); /* 自身の幅の半分だけ左に戻して、完全に中央揃え */
            width:45%;
            background-color: #FFFFFF; /* 背景色：白 */
            color: #c1272d;         /* 文字色：赤 */
            font-weight: bold;     /* 太字 */
            font-size: 3vw;     /* 文字サイズ (remはルート要素基準の相対サイズ) */
            padding: 10px ;    /* 内側の余白 (上下10px, 左右25px) */
            white-space: nowrap;   /* テキストが改行しないように */
            line-height: 1;
        }

        /* * 下部の赤いメインバナー「スーパー愛し隊！...」
         */
        .main-info {
            background-color: #c1272d; /* 背景色：赤 */
            color: #FFFFFF;         /* 文字色：白 */
            font-weight: bold;     /* 太字 */
            font-size: 3vw;     /* 白バッジより少し大きく */
            text-align: center;    /* テキストを中央揃え */
            padding:30px 20px ;    /* 内側の余白 */
            border-radius: 30px;   /* 角を丸くしてカプセル型（ピル）に */
            width: 100%;           /* 親要素の幅いっぱいに広げる */
            line-height: 1;

        }

        .main-info span {font-size: 2vw;}

.sotomaru {border:4px solid #c1272d; 
font-weight: bold;
display: inline-block;
line-height: 1;
font-size:2.5vw;
border-radius: 20px;
    padding: 20px ;
margin-right:20px;
}

.kakaku {display: inline-block;}
.kakaku span {font-size:2vw;}

.maru {width:150px;}
.chuui li { font-size:1vw;}

.link {
display:table;

background-color: #c1272d;
  color: #fff;
  font-weight: bold;
  font-size: 3vw;
  text-align: center;
  padding: 30px;
  border-radius: 30px;
  width: 80%;
  margin: 50px auto;
  line-height: 1;

}

.accordion {
  margin-bottom: 20px;
}

/* タイトル部分 */
.accordion-title {
  background-color: #c1272d;
  color: #fff;
  font-weight: bold;
  font-size: 3vw;
  line-height: 1;
  text-align: center;
  padding: 30px ;
  border-radius: 30px;
  width: 80%;
  margin: 0 auto;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s;
  margin:50px auto;
}

.accordion-title:hover {
  background-color: #a61f28;
}

/* 上向きシェブロンアイコン */
.accordion-icon {
  position: absolute;
  right: 25px;
  top: 50%;
  width: 20px;
  height: 20px;
  border-right: 4px solid #fff;
  border-bottom: 4px solid #fff;
  transform: translateY(-50%) rotate(-135deg); /* 初期は上向き */
  transform-origin: center;
  transition: transform 0.3s ease;
}

/* 開いたときは下向き */
.accordion.active .accordion-icon {
  transform: translateY(-50%) rotate(45deg);
}

/* コンテンツ部分 */
.accordion-content {
width:80%;
margin:0 auto;
color:#000;
  overflow: hidden;
  margin-top: 15px;
  background-color: #fff;
 
  padding: 0 15px;
  height: 0;
  transition: height 0.8s ease;
}

.accordion-in {padding:50px;}

.accordion-content p {
  margin: 15px 0;
}

.info {margin-top:50px; margin-left:50px; text-align: left; font-weight: bold; color:#fff;}
.info a {color:#fff;}





.fade-in {
  opacity: 0; /* 初期状態では透明 */
  transform: translateY(20px); /* 少し下に配置 */
  transition: opacity 1s ease, transform 1s ease; /* スムーズなアニメーション */
}

.fade-in.visible {
  opacity: 1; /* フェードインして見えるように */
  transform: translateY(0); /* 元の位置に移動 */
}



.up {transition: transform 0.3s ease; }
.up:hover {
  transform: translateY(-10px); /* 上に10px移動 */
}




@media only screen and (max-width:599px){

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

h1 {font-size:6vw;}
h2 {font-size:6vw;}
h4 {font-size:5vw;}

h2.heading  {font-size:8vw;}

.heading:after {
  
    width: 80%; /* 横幅いっぱい */

}
.sotomaru {
font-size:4vw;
border-radius: 20px;
}
.kakaku {font-size:6vw;}
.kakaku span {font-size:4vw;}


.event-banner-wrapper {
            width:90%;}
.perk-badge {font-size:6vw; top:-10px; width:55%;}
.main-info {font-size:6vw; border-radius: 20px;}
.main-info span {font-size: 4vw;}
.content {width:100%;
font-size:3vw;
letter-spacing: 0;
line-height: 1.5;

}


.accordion-title {
    width:90%;
  font-size: 5vw;
  margin-top:50px;
margin-bottom:0;
border-radius: 20px;
}

.accordion-icon {
  width: 10px;
  height: 10px;
}

.accordion-content {width:95%;}
.accordion-in {padding:20px 10px;}
.link {font-size: 5vw; width:90%; border-radius: 20px;}
}