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


#cosplay{
	width:100%;
	background-image: url(./img/cosplay_bg.jpg);
	background-repeat: repeat-y;
	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;
 }
 

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

/* スライドショーの幅を設定 */
.slideshow-wrapper {
    flex-basis: 645px; /* スライドショーの幅を優先的に640pxに */
    flex-shrink: 0; /* 縮小しないようにする */
}

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

#cosplay div#cosplayCont div.gaiyo{
padding: 40px;
position: relative;
}
@media screen and (max-width: 768px) {
#cosplay div#cosplayCont div.gaiyo{
padding: 30px 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) {
#cosplay div#cosplayCont div.gaiyo img#spot{
top:210px ;
right:3%;
width: 80%;
}}

#cosplay div#cosplayCont div.gaiyo div.date{
	padding:25px 40px ;
	margin: 200px auto 5px;
	width:90%;
	background-color: #fff;
	border: #000 solid 3px;
	border-top-right-radius: 40px;
	border-bottom-left-radius: 40px;
	position: relative;
	box-shadow: 10px 10px 0px rgba(0, 0, 0, 1); /* 右に10px、下に10px、ぼかしなし、黒100% */
}
@media screen and (max-width: 768px) {
#cosplay div#cosplayCont div.gaiyo div.date{
	padding:25px 5% ;
	margin: 200px auto 30px;
	width:95%;
	background-color: #fff;
	border: #000 solid 3px;
	border-top-right-radius: 40px;
	border-bottom-left-radius: 40px;
	position: relative;
	box-shadow: 10px 10px 0px rgba(0, 0, 0, 1); /* 右に10px、下に10px、ぼかしなし、黒100% */
}
}

#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: 0px auto;
  padding-bottom: 60px;
}

.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;
}}
/* PCではヒントを非表示にするための設定 
.table-scroll-wrapper {
  position: relative;
}

.table-scroll-wrapper::after {
  content: none;
}
.hint{
  font-size: 0.7rem;
  padding-top: 1rem;;
}
/* -------------------------------------------------- */

/* スマホでのみスクロールヒントを表示 
@media screen and (max-width: 768px) {
  .table-scroll-wrapper {
    /* * ヒント（::after）を配置するために必要です。
     * 既に relative が設定されていれば不要です。
     
    position: relative;
  }
  
  /* スクロールヒントのスタイル 
  .table-scroll-wrapper::after {
    content: ''; /* 疑似要素を表示 
    position: absolute;
    top: 0;
    right: 0;
    width: 50px; /* グラデーションの幅 
    height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* 右端から左へ向かうグラデーション 
    pointer-events: none; /* ヒントの下にある要素をクリック可能にする 
  }
  #cosplayTable {
  user-select: auto; /* auto または text に変更 */


/* スライドバナー部分 */
.slideshow-container {
  max-width: 640px;
  height: 175px;
  position: relative;
  margin: auto;
  overflow: hidden; /* コンテナからはみ出る部分を非表示に */
}

/* スライド画像 */
.mySlides {
  display: none;
  width: 100%;
}

/* 新しいスタイルを以下に追加 */

/* スライドインアニメーション */
.slide-in {
  animation-name: slideIn;
  animation-duration: 1.5s;
}

@keyframes slideIn {
  from {transform: translateX(100%);} /* 右端から開始 */
  to {transform: translateX(0);} /* 中央に移動 */
}

/* ドットのデザイン */


/* slideshow-container に position: relative; が設定されていることを確認してください */
.slideshow-container {
  position: relative; /* 子要素（ドット）を絶対配置するために必要 */
  max-width: 640px;
  height: 175px;
  margin: auto;
  overflow: hidden;
}

/* ドットのコンテナの位置調整 */
.dot-navigation-wrapper {
  position: absolute; /* 親要素 .slideshow-container に対して絶対位置 */
  bottom: 5px; /* 下からの距離 */
  left: 10px; /* 左からの距離 */
  /* text-align: left; /* ドットを左寄せにする場合はこれも */
  z-index: 5; /* スライド画像より前面に表示 */
}

/* 既存のドットのスタイルはそのまま */
.dot {
  cursor: pointer;
  height: 8px;
  width: 8px;
  margin: 0 3px; /* ドット間の間隔を調整 */
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/*
  基本のスタイル（PC向け）
  既存のCSSにこれらが含まれていることを確認
*/
.slideshow-container {
  max-width: 640px;
  height: 175px;
  /* その他のスタイル */
}

/* 画面幅が768px以下のときに適用 */
@media screen and (max-width: 768px) {
  .slideshow-container {
    max-width: 100%; /* 親要素の幅いっぱいに広げる */
    height: auto; /* 高さを自動調整 */
  }

  .slideshow-container img {
    height: auto;
  }
}

/* 画面幅が480px以下のときに適用 */
@media screen and (max-width: 480px) {
  .slideshow-container {
    /* さらに細かい調整が必要な場合 */
  }
}