@charset "UTF-8";


:root {
  --themevintage: #324e5a;
  --themeocean: #0c5f81;
  --thememix: #8cbbb8;
  --themeskyblue: #cbe8ec;
  --themecream: #f6e3a2;
  --themewhite: #f4f5f5;

  --navy: #3b454b;
  --lightcream: #fbf7eb;
  --white: #ffffff;
  --black: #3e3a39;
  --gray: #c4c4c4;

  --booth: #f4ca00;
  --field: #e08e36;
  --indoor: #415c70;
  --stage: #72bfc4;
  --sympo: #3f9970;
  --decoration: #cf4f4f;
}

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

body {
  font-family: "Zen Kaku Gothic New";
  font-weight: 400;
  font-style: normal;
  background-color: var(--themewhite);
}


main {
  font-size: 12px;
  color: var(--black);
  margin-top: 110px;
  /*スマホ版headerの高さ+グロナビ35px＋余白20px*/
}

/*確認*/
main a {
  text-decoration: none;
  color: var(--black);
}

p {
  color: var(--black);
  line-height: 1.5;
}

/*確認*/
.midashifont {
  font-family: "Kiwi Maru", sans;
  font-weight: 500;
  font-style: normal;
}

.date {
  font-size: 14px;
  color: var(--black);
  font-weight: 500;
}


/*main_left*/
.main_left {
  display: none;
}

/*main_right*/
.main_right {
  margin: 0px 20px 60px 20px;
  padding: 17.5px;
  background-color: var(--white);
}

.in-trouble {
  text-align: inherit;
  text-align: center;
}

.link {
  text-align: center;
  margin-top: 2%;
}

.maillink {
  text-decoration: underline var(--themeocean);
  color: var(--themeocean);
}

.maillink:hover {
  color: var(--themeocean);
}

.pagelink a,
a.pagelink {
  text-decoration: underline;
  text-decoration-color: var(--themeocean);
  color: var(--themeocean);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 400;
}

.maillink a,
a.maillink {
  text-decoration: underline;
  text-decoration-color: var(--themeocean);
  color: var(--themeocean);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 400;
}

.pagelink:hover,
.maillink:hover {
  opacity: 0.7;
  transform: translateY(-5px);
}

.pagetitle {
  position: relative;
  /*相対配置*/
  text-align: center;
}

.moreButton {
  font-family: "Zen Kaku Gothic New";
  color: #5c4b18;
  padding: 10px 15px;
  border: 2px solid;
  border-radius: 23px;
  background-color: var(--booth);
  border-color: linear-gradient(90deg, var(--booth), #ede6d3);
  outline-offset: -6px;
  box-shadow: 2px 2px 0px;
  position: relative;
  transition: all 0.3s ease 0s;
  padding: 5px 10px;
  border-radius: 23px;
  border: 2px solid transparent;
  background: linear-gradient(to right, var(--booth), #efe7ce) padding-box, linear-gradient(to right, var(--booth), var(--themecream)) border-box;
  box-shadow: 2px 2px 0px #eebe31;
  position: relative;
  color: linear;
  transition: all 0.3s ease 0s;
}

.kochira {
  color: var(--booth);
  font-size: 23px;
  font-weight: 800;
  z-index: 2;
}


/*.kochira::before{
  content: "";
  position: absolute;
  right: 3px;
  top: 54%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: #ffffff;
  border-radius: 50%;
  z-index: -1;
}*/

.kochira {
  width: 5px;
  height: 10px;
  font-size: 12px;
  font-weight: 800;
  z-index: 2;
}



.kochira {
  margin-left: 7px;
  width: 5px;
  height: 5px;
  position: relative;
}

.kochira.kochira::before,
.kochira.kochira::after {
  content: "";
  display: block;
  width: 7px;
  height: 1px;
  background-color: var(--themeocean);
  position: absolute;
  left: 0px;
}

.kochira::before {
  transform: rotate(45deg);
  top: 6px;
}

.kochira::after {
  transform: rotate(-45deg);
  bottom: 6px;
}

.kochira.kochira:hover::before,
.kochira.kochira:hover::after,
.detail1Button:hover .kochira::before,
.detail1Button:hover .kochira::after {
  background-color: var(--white);
}



.pagetitle img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  display: block;
}

.pagetitle h1,
.pageTitle h1 {
  font-family: "Kiwi Maru", sans;
  position: absolute;
  display: inline-block;
  z-index: 20;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 10px;
  background-color: rgba(140, 187, 184, 0.9);
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

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

  .pagetitle h1,
  .pageTitle h1 {
    font-size: 22px;
  }
}

h2 {
  font-family: "Kiwi Maru";
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
  position: relative;
  border-bottom: 1px solid;
  border-image: linear-gradient(transparent) 1;
  margin: 20px 0 10px 0;
  letter-spacing: 1.5px;
  line-height: 1.8em;
}

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

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


h3 {
  font-family: "Kiwi Maru", sans;
  font-weight: 500;
  font-style: normal;
  color: var(--black);
  font-size: 14px;
  border-left: 5px solid var(--themeocean);
  margin: 20px 0 10px 0;
  padding: 2px 0 2px 5px;
}

/*Button*/
.detail1Button {
  width: 100%;
  padding: 5px 0;
  margin: auto;
  box-sizing: border-box;
  position: relative;
  border: solid 2px var(--themeocean);
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail1Button p {
  text-align: center;
  font-family: "Kiwi Maru", sans;
}

.detail1Button a {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.detail1Button:hover {
  background: var(--themeocean);
}

.detail1Button:hover>p {
  color: var(--themewhite);
}


.detailButton:hover .kochira::before,
.detailButton:hover .kochira::after {
  background-color: var(--themewhite);
}

.event-confirmed-PV {
  width: 100%;
  aspect-ratio: 16/9;
}

iframe.youtube-embed {
  width: 100%;
  height: 100%;
}

.about_picture {
  display: flex;
  flex-direction: column;
  align-items: end;
  text-align: center;
}

/*slick共通*/
.slick-prev,.slick-next {
  z-index: 1;
  width: 30px!important;
  height: 30px!important;
  top: 50% !important;
  border-radius: 50%;
  background: transparent !important;
  border: solid 1px var(--themeocean) !important;
}
.slick-next{
  right: -5px!important;
}
.slick-prev{
  left: -5px!important;
}
.slick-prev:before,
.slick-next:before{
  content:''!important;
  position:absolute;
  width:12px;
  height:12px;
  top:50%;
  left:50%;
  border:2px solid var(--themevintage);
  border-left:0;
  border-bottom:0;
  box-sizing:border-box;
}

.slick-next:before{
  transform:translate(-8.5px,-50%) rotate(45deg);
}

.slick-prev:before{
  transform:translate(-3.5px,-50%) rotate(-135deg);
}

.booth-pickup-slider .slick-next,
.booth-pickup-slider .slick-prev {
  border: solid 1px var(--booth) !important;
}
.booth-pickup-slider .slick-prev::before,
.booth-pickup-slider .slick-next::before {
  border-color: var(--booth);
}
.field-pickup-slider .slick-next,
.field-pickup-slider .slick-prev {
  border: solid 1px var(--field) !important;
}
.field-pickup-slider .slick-prev::before,
.field-pickup-slider .slick-next::before {
  border-color: var(--field);
}
.indoor-pickup-slider .slick-next,
.indoor-pickup-slider .slick-prev {
  border: solid 1px var(--indoor) !important;
}
.indoor-pickup-slider .slick-prev::before,
.indoor-pickup-slider .slick-next::before {
  border-color: var(--indoor);
}
.sympo-pickup-slider .slick-next,
.sympo-pickup-slider .slick-prev {
  border: solid 1px var(--sympo) !important;
}
.sympo-pickup-slider .slick-prev::before,
.sympo-pickup-slider .slick-next::before {
  border-color: var(--sympo);
}
.stage-pickup-slider .slick-next,
.stage-pickup-slider .slick-prev {
  border: solid 1px var(--stage) !important;
}
.stage-pickup-slider .slick-prev::before,
.stage-pickup-slider .slick-next::before {
  border-color: var(--stage);
}
.deco-pickup-slider .slick-next,
.deco-pickup-slider .slick-prev {
  border: solid 1px var(--decoration) !important;
}
.deco-pickup-slider .slick-prev::before,
.deco-pickup-slider .slick-next::before {
  border-color: var(--decoration);
}
/*アコーディオンメニューfin*/


/*mailtoui*/
#mailtoui-modal .mailtoui-brand {
  display: none;
}

.mailtoui-modal-close{
  top: 0px;
  background-color: transparent;
  border: none;
}

.mailtoui-modal-close:focus{
  color: #aaa;
}

.mailtoui-modal-close:hover{
  color: var(--black);
}

img {
  -webkit-user-drag: none; /* Safari, Chrome用 */
}



/*
css概説（復習用　要らなければ消してください）

vol.1 用語の解説

セレクタ…装飾をつけたい対象の要素のこと
属性…セレクタに施したい装飾の種類
値…セレクタに施したい装飾の具体的内容

例：h1{color:--themeocean;}
h1がセレクタ　colorが属性　--themeoceanが値

vol.2 セレクタの指定
①要素名で指定
h1{color:--themeocean;}

②class名で指定
.class{color:--themeocean;}

③id名で指定
#id{color:--themeocean;}

④要素名プラスclass名で指定
div.class{color:--themeocean;}

⑤要素名プラスid名で指定
div#id{color:--themeocean;}

⑥要素の位置から指定
header div{color:--themeocean;}   
↑スペースを入れる（ここではheader内のdiv要素を指定）

vol.3 属性・値の指定

①{属性:値;}の形で記述
{color:--themeocean;}

②１つのセレクタに対する指定はまとめて記述できる
h1{
   color:--themeocean;
   width:90%;
}

③指定が重複したら後の行にあるものが優先
h1{
   color:--themeocean;
   width:90%;
   color:blue;
}
↑ここではh1はblueになる

④指定が重複したらより特定が強いものが優先
h1{
   color:--themeocean;
   width:90%;
}
header h1{
   color:blue;
}
↑ここではheader内のh1はcolorがblue、widthが90%になる
*/







@media screen and (min-width:1024px) {
  /*レスポンシブ用*/

  main {
    width: 1024px;
    margin: 130px auto 0 auto;
    /*topはPC版headerの高さ+グロナビ35px+余白20px*/
    font-size: 14px;
    height: auto;
    display: block;
  }

  .main_left {
    width: 310px;
    display: inline-block;
    vertical-align: top;
    padding: 20px;
    margin: 0px -1px 30px 10px;
    /*確認*/
    background-color: var(--white);
  }

  .banner_contents:hover {
    opacity: .5;
  }

  .banner_contents img {
    width: 100%;
  }

  .banner_contents {
    width: 100%;
    height: 100%;
    display: inline-block;
    margin: 5px 0;
  }

  .main_right {
    display: inline-block;
    width: 580px;
    vertical-align: top;
    height: auto !important;
    /* margin-top: 30px; */
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 17px;
  }

  /*.event-confirmed-PV {
    width: 241px;
  }*/

  /*slick共通*/
.slick-prev,.slick-next{
  height: 50px;
  width: 50px;
}
.slick-prev {
  z-index: 1;
  left: 10px !important;
  top: 50% !important;
}
.slick-next {
  z-index: 1;
  right: 10px !important;
  top: 50% !important;
}

  /*詳細2*/
  .pagetitle img {
    height: 180px;
    display: block;
  }

  .date {
    font-size: 16px;
  }
}

@media screen and (min-width: 768px) {
  /*.event-confirmed-PV {
    width: 307px;
  }*/
}