@charset "UTF-8";
/* CSS Document */


#cosplay{
	width:100%;
	background-image: url(./img/bg-pattern.svg);
	background-repeat: repeat;
	margin:0 auto;}
	
  
#cosplay div#cosplayCont{
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
}

#cosplay div#cosplayCont fwbd {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
}


#cosplay div#cosplayCont{
	width:1024px;
 	margin:0 auto;
  background-color: rgba(255, 255, 255, 0.8);
 }
 

/* PCでの横並びレイアウト（最大幅1024px） */
.flex-container {
    display: flex; /* Flexboxを有効にする */
    justify-content: space-between; /* 要素間にスペースを配置 */
    align-items: center; /* 垂直方向の中央に揃える */
    max-width: 960px; /* 親要素の最大幅を設定 */
    margin: 0 auto; /* 中央に配置 */
    /*gap: 20px;  要素間の隙間を空ける */
}



/* e-Ticketバナーの幅を設定 */
.e-ticket-bnr {
    flex-basis: 379px; /* バナーの幅を優先的に300pxに */
    flex-shrink: 0; /* 縮小しないようにする */
}

@media screen and (max-width: 1024px) {
    .flex-container {
        flex-direction: column; /* 縦方向に並び替える */
        gap: 0; /* 縦並びの時は隙間をなくす */
        width: 100%; /* 画面幅いっぱいに広げる */
        padding: 0 ; /* 左右に余白を設定 */
        box-sizing: border-box;
    }

    /* バナーを幅100%にする */
    .e-ticket-bnr {
        width: 100%; /* 親要素の幅いっぱいにする */
        padding: 0 ; /* 左右に余白を設定 */
        margin-top: 20px; /* 縦並びになったときに下部にスペースを空ける */
    }
}

#cosplay div#cosplayCont div.gaiyo{
padding: 20px 40px;
position: relative;

}
@media screen and (max-width: 768px) {
#cosplay div#cosplayCont div.gaiyo{
padding: 10px 5%;
position: relative;
}}

#cosplay div#cosplayCont div.gaiyo p{
	font-size: 1.4em;
	line-height: 2.4em;
	font-weight: 700;
	z-index: 8;
}
#cosplay div#cosplayCont div.gaiyo img#spot{
position: absolute;
top:10px ;
right:40px;
z-index: 2;
}
@media screen and (max-width: 768px) {
  /* gaiyo自体の高さを確保するため、画像の設定を変更 */
  #cosplay div#cosplayCont div.gaiyo img#spot {
    position: relative; /* absolute（絶対配置）から relative（相対配置）に変更 */
    top: 0;          /* 文字との間の隙間を調整 */
    right: auto;        /* 右固定を解除 */
    left: auto;         /* 左固定を解除 */
    margin: 0 auto;     /* 中央寄せ */
    display: block;     /* 中央寄せするためにブロック要素化 */
    width: 90%;         /* サイズを調整（お好みで） */
    padding-bottom: 0;  /* 余計なパディングをリセット */
  }

  /* 下のバナーとの間にしっかり隙間を作る */
  .flex-container {
    margin-top: 20px !important; /* 画像の下に余白を作る */
    clear: both;                 /* 念のため回り込みを解除 */
  }
}



#cosplay div#cosplayCont div.gaiyo div.date img{
	position: absolute;
	top:-58px;
	left:-45px;
	z-index: 5;
}
@media screen and (max-width: 768px) {
#cosplay div#cosplayCont div.gaiyo div.date img{
	position: absolute;
	top:-48px;
	left:-35px;
  width: 70px;
}}
#cosplay div#cosplayCont div.gaiyo div.date ul li{
	font-size: 1.3em;
	font-weight: 700;
  line-height: 1.4;
  padding: 0 0 7px;
}
@media screen and (max-width: 768px) {
#cosplay div#cosplayCont div.gaiyo div.date ul li{
  text-align: center;;
}}

.tkt-button {
  display: inline-block; /* ブロック要素のように振る舞いつつ、行内にも配置可能にする */
  background-color: #000000; /* 黒い背景色 */
  color: #ffffff; /* 白い文字色 (白抜き文字) */
  padding: 12px 24px; /* 上下のパディング 12px、左右のパディング 24px */
  border-radius: 25px; /* 両端の丸みを指定。値が大きいほど丸くなる */
  text-decoration: none; /* 下線を除去 */
  font-weight: bold; /* 文字を太字にする */
  font-size: 16px; /* 文字サイズ (必要に応じて調整) */
  text-align: center; /* テキストを中央揃え */
  transition: background-color 0.3s ease; /* ホバー時の色の変化を滑らかにする */
  cursor: pointer; /* マウスカーソルをポインターにする */
  margin-bottom: 40px;
}

/* マウスカーソルを乗せたときのホバー効果 */
.tkt-button:hover {
  background-color: #333333; /* 少し明るい黒にして、視覚的なフィードバックを与える */
    color: #ffffff !important; /* 白い文字色 (白抜き文字) */
}

#cosplay div#cosplayCont div.acdMenu{
	width: 95%;
	margin: 40px auto;
  padding-bottom: 20px;
}

.accordion-container {
    max-width: 970px; /* 必要に応じて幅を調整 */
    margin: 20px auto;
    
}

.accordion-item {
    border: 3px solid #000;
    margin-bottom: 10px;
    
}

.accordion-header {
    background-color: #f7f7f7;
    padding: 30px 170px 30px;
    cursor: pointer;
    position: relative;
    font-weight: bold;
    display: block;
    height:100px;
    font-size: 28px;
}

.accordion-header:hover {
    background-color: #eee;
}

.icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    font-size: 1.5em;
}

.accordion-item.active .icon {
    transform: translateY(-50%) rotate(45deg); /* +を回転させて×（-）にする */
}

.accordion-content {
    background-color: #fff;
    padding: 0 15px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.accordion-item.active .accordion-content {
    max-height: 10000px; /* コンテンツの最大高さに合わせて調整 */
}
.accordion-item.active .accordion-content .accordion-inner{
    padding: 20px 30px 50px ;
}

/* 画面幅が768px以下のときに適用 */
@media screen and (max-width: 768px) {
.accordion-item.active .accordion-content {
    max-height: 25340px; /* コンテンツの最大高さに合わせて調整 */

}
.accordion-item.active .accordion-content .accordion-inner{
    padding: 20px 3% 50px ;
    }
}

.accordion-item.active .accordion-content h4{
  line-height: 1.6;
  font-size: 1rem;
}
.accordion-item.active .accordion-content p{
  line-height: 1.6;
  font-size: 0.95rem;
}
.accordion-item.active .accordion-content h4{
  padding-top: 25px;
}


/* PC用: 各項目に背景画像を設定 */
.item-ticket .accordion-header {
    background-image: url("/event/cosplayfesta/img/ticket-bg-pc.png");
    background-color: #a267d4; /* 背景画像がない場合の代替色 */
    background-size: cover;
    background-position: center;
    color: #333; /* 文字色 */
}

.item-rule .accordion-header {
    background-image: url("/event/cosplayfesta/img/rule-bg-pc.png");
    background-color: #33acff;
    background-size: cover;
    background-position: center;
    color: #333;
}

.item-danpa .accordion-header {
    background-image: url("/event/cosplayfesta/img/danpa-bg-pc.png");
    background-color: #64ff10;
    background-size: cover;
    background-position: center;
    color: #333;
}

.item-map .accordion-header {
    background-image: url("/event/cosplayfesta/img/map-bg-pc.png");
    background-color: #efea3a;
    background-size: cover;
    background-position: center;
    color: #333;
}

.item-sponsorship .accordion-header {
    background-image: url("/event/cosplayfesta/img/sponsorship-bg-pc.png");
    background-color: #a2b0b8;
    background-size: cover;
    background-position: center;
    color: #333;
}



/* 画面幅が768px以下のときに適用 */
@media screen and (max-width: 768px) {
  .accordion-header {
    width: 100%;
    font-size: 1em; /* フォントサイズを小さく */
    padding: 12px; /* パディングを調整 */
    height: 75px;
  }

  .accordion-content {
    font-size: 0.8em; /* コンテンツのフォントサイズも調整 */
    width:100%;
  }
}

/* 画面幅が480px以下のときに適用 */
@media screen and (max-width: 480px) {
  .accordion-header {
     width: 100%;
    font-size: 0.9em;
    padding: 10px;
  }

  .accordion-content {
    font-size: 0.8em;
  }
}


@media screen and (max-width: 768px) {
    /* スマホ用: 各項目に別の背景画像を設定 */
    .item-ticket .accordion-header {
        background-image: url("/event/cosplayfesta/img/ticket-bg-sp.png");
        background-size: cover;
    }

    .item-rule .accordion-header {
        background-image: url("/event/cosplayfesta/img/rule-bg-sp.png");
        background-size: cover;
    }

    .item-danpa .accordion-header {
        background-image: url("/event/cosplayfesta/img/danpa-bg-sp.png");
        background-size: cover;
    }

    .item-map .accordion-header {
        background-image: url("/event/cosplayfesta/img/map-bg-sp.png");
        background-size: cover;
    }

    .item-sponsorship .accordion-header {
        background-image: url("/event/cosplayfesta/img/sponsorship-bg-sp.png");
        background-size: cover;
    }
    
    
    /* スマホ用にフォントサイズなどを調整 */
    .accordion-header {
        font-size: 1.4em;
        padding: 26px 105px;
    }
}

.btn_cover a {
  /* ボタンの基本的なスタイル */
  display: block;
  width:  970px; /* 例として幅を設定 */
  height: 100px; /* 例として高さを設定 */
  text-align: center;
  line-height: 50px;
  color: #333;
  text-decoration: none;

  /* 画像を背景として設定 */
  background-image: url("/event/cosplayfesta/img/ticket_bg_pc.png");
  background-size: cover; /* 画像をボタン全体に広げる */
  background-position: center; /* 画像を中央に配置 */
  background-repeat: no-repeat; /* 画像の繰り返しをなくす */
}
  	 
  	 
	 

@media screen and (min-width:0) and (max-width:1023px) {
#cosplay div#cosplayCont{
	width:100%;
 	margin:0 auto;
 }
}

#cosplay div.accordion-content{
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
}
#cosplay div.accordion-content table{
  width: 100%;
  margin: 10px auto;
  font-size: 1.1em;
  font-weight: 600;
}
#cosplay div.accordion-content table th{
  padding: 8px;
  color:#fff;
  background-color:#000;

}
#cosplay div.accordion-content table td{
  padding: 8px;
  color:#000;
}
#cosplay div.accordion-content table tr.secondary{
  background-color:#eee;
}
#cosplay div.accordion-content table td p{
  font-size: 1.0em;
  font-weight: 600;line-height: 1.2em;}

#cosplay div.accordion-content table td p span {
font-weight: normal;
font-size: 70%;
line-height: 1.1em;
}


@media screen and (max-width: 768px) {
#cosplay div.accordion-content table{
  width:100%;
  font-size: 0.7rem;
  font-weight: normal;
 }

#cosplay div.accordion-content table th{
  padding: 6px 3px;
  color:#fff;
  background-color:#000;

}
#cosplay div.accordion-content table td{
  padding: 6px 3px;
  color:#000;
}}


/* 1. 外枠：画面いっぱいに広げる、またはサイト幅に合わせる */
.slider-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  /* background: #fff; 不要なら削除してOK */
  padding: 20px 0; /* 上下の余白 */
}


.mySlides {
  /* 80%に設定すると、中央に1枚 ＋ 左右に10%ずつ隣が見えるようになります */
  /* PCの1024px幅の中でも綺麗に収まります */
  width: 80vw; 
  max-width: 800px; /* PCで大きくなりすぎないように制限 */
  flex-shrink: 0;
  padding: 0 10px;
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
  .mySlides {
    width: 85vw; /* スマホではもう少し大きく表示 */
    padding: 0 5px;
  }
}

.mySlides img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px; /* 少し角を丸くすると今っぽくなります */
  box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* 軽い影をつけると立体感が出ます */
}

/* 4. ★無限ループの仕組み★ */

#sliderTrack {
  display: flex !important;
  width: max-content;
  align-items: center; 
  /* 45秒だと1枚あたりの静止・移動がスムーズです */
  animation: infinite-scroll 50s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  
  /* 初期位置のズレをリセット */
  margin-left: 0; 
  transform: translateX(0);
}

/* 18枚(6枚×3)を「半分(9枚分)」動かしてループさせる計算 */
@keyframes infinite-scroll {
  /* 1枚目 */
  0%, 4% { transform: translateX(calc(50vw - 40vw - 10px - (800px * 0))); }

  /* 2枚目 (100 / 18 = 5.555% ずつずらす) */
  10%, 14% { transform: translateX(calc(50vw - 40vw - 10px - (800px * 1))); }

  /* 3枚目 */
  20%, 24% { transform: translateX(calc(50vw - 40vw - 10px - (800px * 2))); }

  /* 4枚目 */
  30%, 34% { transform: translateX(calc(50vw - 40vw - 10px - (800px * 3))); }

  /* 5枚目 */
  40%, 44% { transform: translateX(calc(50vw - 40vw - 10px - (800px * 4))); }

  /* 6枚目 */
  50%, 54% { transform: translateX(calc(50vw - 40vw - 10px - (800px * 5))); }

  /* ★ここを修正：54%で止まった後、すぐ次（60%）で7枚目へ移動させる */
  57% { transform: translateX(calc(50vw - 40vw - 10px - (800px * 6))); }
  
  /* ★重要：移動した瞬間に0%と同じ位置に戻すため、100%までずっとその位置をキープ */
  100% { transform: translateX(calc(50vw - 40vw - 10px  - (800px * 6))); }
}

/* スマホ用の位置微調整（メディアクエリ） */
@media screen and (max-width: 1024px) {
  @keyframes infinite-scroll {
    0%, 4% { transform: translateX(calc(50vw - 42.5vw - 5px - (85vw * 0))); }
    10%, 14% { transform: translateX(calc(50vw - 42.5vw - 5px - (85vw * 1))); }
    20%, 24% { transform: translateX(calc(50vw - 42.5vw - 5px - (85vw * 2))); }
    30%, 34% { transform: translateX(calc(50vw - 42.5vw - 5px - (85vw * 3))); }
    40%, 44% { transform: translateX(calc(50vw - 42.5vw - 5px - (85vw * 4))); }
    50%, 54% { transform: translateX(calc(50vw - 42.5vw - 5px - (85vw * 5))); }
    57%, 100% { transform: translateX(calc(50vw - 42.5vw - 5px - (85vw * 6))); }
  }
}