@charset "UTF-8";


/*PICK UP*/

.slider-image{
  width: 80%;
}

.pickup-slider {
  position: relative;
  max-width: 300px;
  margin: 0 auto;
}

.slide-items2 {
  width: 100%;
  height: 100%;
  padding-left: 0;
  margin-top: 20px;
}

.slide-items2 img {
  height: auto;
  margin: 0px auto -15px auto;
}



.slider-contents {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
    list-style: none;
}




.pick_button {
    background-color: var(--white);
    margin: 0px auto 0px auto;
    border: 1px solid var(--black);
    color: var(--black);
    font-size: 13px;
    display: flex;
    position: relative;
    width: 150px;
    height: 45px;
    align-items: center;
    justify-content: center;
    transition: .5s;
}
.pick_button:hover {
  background-color: var(--themevintage);
  color: var(--themewhite);
}

.slider-inner {
  display: flex;
  flex-direction: column; /* スマホ用：縦並び（画像→テキスト） */
  gap: 16px;
  align-items: center;
}

.slick-dots {
  bottom: -35px !important;
}

.slick-dots li button:before {
  font-size:8px!important;
}

.booth-pickup-slider, .field-pickup-slider, .indoor-pickup-slider, .sympo-pickup-slider, .stage-pickup-slider, .deco-pickup-slider {
    margin-bottom: 50px;
}

/* --- 1つ目のインジケーターをひし形にするカスタマイズ --- */

/* 1つ目のドット（li:first-child）の擬似要素を上書き */
/*.slick-dots li:first-child button:before {
  content: ""; /* デフォルトの黒丸(•)の文字を消す */
/*  width: 10px; /* ひし形の幅 */
/*  height: 10px; /* ひし形の高さ */
/*  background-color: black; /* ひし形の色（デフォルトのドットに合わせる） */
/*  border-radius: 0; /* 丸みを完全に消す */
/* transform: rotate(45deg); /* 四角形を45度傾けてひし形にする */
  
  /* ボタン（20px四方）の中央に配置するための調整 */
/*  position: absolute;
  top: 5px;
  left: 5px;
  
  opacity: 0.25; /* 非アクティブ時の透明度（slickのデフォルト値） */
/*}
*/
/* 1つ目のドットが選択されている（アクティブな）時のスタイル */
.slick-dots li.slick-active:first-child button:before {
  opacity: 0.75; /* アクティブ時の透明度（slickのデフォルト値） */
  /* もし選択時に色を変えたい場合は、ここで background-color: var(--themevintage); などを指定します */
}

.SPpage{
  display:flex;
  justify-content: center;
}

.h2_booth::after{
  content: "";
  display: block;
  line-height: 0;
  overflow: hidden;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -2px;
  border-bottom: 3px solid var(--themeocean); 
  border-image: linear-gradient(to right bottom, var(--booth), var(--booth), #deb80980, transparent) 1;
}

.emphasis_booth{
  color: var(--booth);
}

a.pagelink:hover, .pagelink a:hover {
  opacity: 0.7;
}

.h2_stage::after{
  content: "";
  display: block;
  line-height: 0;
  overflow: hidden;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -2px;
  border-bottom: 3px solid var(--themeocean); 
  border-image: linear-gradient(to right bottom, var(--stage), var(--stage), #72bfc480, transparent) 1;
}

.emphasis_stage{
  color: var(--stage);
}
.field_h3{
  border-color: var(--field) !important;
}

/* --- 親枠の調整 --- */
.SPpage_booth,.SPpage_sympo,.SPpage_deco {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  align-items: center; /* 念のため縦の中央揃えも追加 */
  position: relative;
}

/* pタグが持っている見えない上下の余白をリセットしてズレを防ぐ */
.SPpage_booth p,.SPpage_sympo p,.SPpage_deco p {
  text-decoration: none;
  margin: 0;
  border-left: solid 1.5px;
  border-bottom: solid 1.5px;
  font-family: "Zen Kaku Gothic New";
  color: #5c4b18;
  /* border: 2px solid; */
  border-color: #deb809;
  outline-offset: -6px;
  padding: 0px 20px 0px 15px;
  /* border: 1.5px solid #eebe31; */
  background: #efc34100;
  box-shadow: 2px 2px 0px #ffffff00;
  position: relative;
  transition: all 0.3s ease 0s;
}
.SPpage_sympo p {
  border-color: var(--sympo);
}
.SPpage_deco p {
  border-color: var(--decoration);
}

.SPpage_booth p::after, .SPpage_sympo p::after, .SPpage_deco p::after {
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 1px;
  left: 91.3%;
  bottom: 6px;
  transform: rotate(45deg);
  background-color: #deb809;
}
.SPpage_sympo p::after {
  background-color: var(--sympo);
}
.SPpage_deco p::after {
  background-color: var(--decoration);
}

.SPpage_booth a,.SPpage_sympo a,.SPpage_deco a {
  text-decoration: none !important;
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2.5px;
}

.gotoSP:hover {
  transform: translateX(4px);
}

.h2_indoor::after {
  border-image: linear-gradient(to right bottom, var(--indoor), var(--indoor), #415c7080, transparent) 1;
}
.emphasis_indoor{
  color: var(--indoor);
}

.h2_field::after {
  border-image: linear-gradient(to right bottom, var(--field), var(--field), #e08e3680, transparent) 1;
}
.emphasis_field{
  color: var(--field);
}

.h2_sympo::after {
  border-image: linear-gradient(to right bottom, var(--sympo), var(--sympo), #3f997080, transparent) 1;
}
.emphasis_sympo{
  color: var(--sympo);
}
.gotoSP_sympo{
  border-color: var(--sympo);
}

.h2_decoration::after {
  border-image: linear-gradient(to right bottom, var(--decoration), var(--decoration), #cf4f4f80, transparent) 1;
}
.emphasis_decoration{
  color: var(--decoration);
}

.slider-pv video {
  width: 100%;
  aspect-ratio: 3 / 2; /* 動画の基本比率 */
}/* スライダー1枚目の動画のサイズを調節 */




@media screen and (min-width:1024px) {


.slider-image{
  width: 80%;
}

.slide-items img {
  height:calc(80svh - 105px);
}


#pickup {
  font-size: 35px;
}

#pickup .yokobou_left {
  width: 130px;
  margin: 0px 35px 0px 0px;
}

#pickup .yokobou_right {
  width: 130px;
  margin: 0px 0px 0px 35px;
}
.slider-inner {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
}




.booth-pickup-slider, .field-pickup-slider, .indoor-pickup-slider, .sympo-pickup-slider, .stage-pickup-slider, .deco-pickup-slider {
     margin-bottom: 80px;
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}

.slider-contents p {
  text-align: justify;
  margin: auto 0px auto 20px;
  width: 370px;
}

.pick_button {
  font-size: 14px;
  margin-top: 25px;
}


#committee {
  position: relative;
  display: flex;
  font-size: 30px;
  margin: 100px 0 20px 0;
  align-items: center;
  justify-content: center;
}

#committee .yokobou_left {
  width: 60px;
  margin: 0px 31px 0px 0px;
}

#committee .yokobou_right {
  width: 60px;
  margin: 0px 0px 0px 31px;
}

.slick-dots {
  bottom: -45px !important;
}

.slick-dots li button:before {
  font-size: 12px !important;
  line-height: 24px  !important;
}

.booth-pickup-slider, .field-pickup-slider, .indoor-pickup-slider, .sympo-pickup-slider, .stage-pickup-slider, .deco-pickup-slider {
    margin-bottom: 80px;
}

.SPpage_booth p,.SPpage_sympo p,.SPpage_deco p {
  font-size: 16px;
  padding: 0px 25px 0px 25px;
}
.SPpage_booth p::after, .SPpage_sympo p::after, .SPpage_deco p::after{
  left: 93.6%;
}
}

/* --- インジケーター全体の配置を調整 --- */
.slick-dots {
  display: flex !important;
  align-items: center!important;      /* ここで「すべてのドット」の上下中央揃えを強制します */
  justify-content: center!important;  /* 横幅の中央揃え */
}

.slick-dots li button:before {
    font-family: 'slick';
    font-size: 10px;
}
/* --- 1つ目のインジケーターをひし形にするカスタマイズ --- */
/*
.slick-dots li:first-child button:before {
  content: ""; 
  width: 10px; */ /* ひし形の幅 */
/*  height: 10px; */ /* ひし形の高さ */
/*  background-color: black; 
  border-radius: 0; 
*/  
  /* ボタン（枠）のど真ん中に配置する確実な方法 */
/*  position: absolute;
  top: 50%;
  left: 50%;
*/
  /* ↓ これを追加して、回転の軸を「ど真ん中」に固定します */
/*  transform-origin: center center;
  transform: translate(-50%, -50%) rotate(45deg); *//* 真ん中にずらしてから45度回転 */
 /* 
  opacity: 0.25; 
}
*/

/* 1つ目のドットが選択されている（アクティブな）時のスタイル */
.slick-dots li.slick-active:first-child button:before {
  opacity: 0.75; 
}