@charset "utf-8";

.link--white{
  font-weight: 600;
  font-size: 1.1em;
  color: #fff !important; 
}

.img-100{
  width: 100%;
  max-width: 800px;
  margin: 5vw auto;
}
.small-img{
  width: 80%;
  max-width: 300px;
  margin: 5vw auto;
}
.explanation-box{
  margin: 8vw auto;
  max-width: 950px;
  width: 96%;
}
.explanation-box-top{margin-top: 3vw;}
.explanation-box .mgb-0{
  margin-bottom: 1em !important;
}
.explanation-box ul{
  list-style-type: disc;
  padding-left: 1.5em;
}
.explanation-box ol{
  list-style-type: decimal;
  padding-left: 1.5em;
}
.explanation-box > ul > li, .explanation-box > ol > li{
  margin-bottom: 20px;
}


.eb-scroll{
  background: #F4F0F7;
  height: 400px;
  width: 100%;
  padding: 3em 2em 3em 3em;
  border-radius: 0.2em;
}
.eb-scroll-content{
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.eb-scroll-contentinr{
  width: 95%;
}
.eb-scroll-content::-webkit-scrollbar {
  background: #F4F0F7;
  width: 5px;
  height: 5px;
  border-radius: 5px;
}
.eb-scroll-content::-webkit-scrollbar-thumb {
  background: #B3B3B3;
  border-radius: 5px;
}
.eb-scroll-contentinr li{
  margin-bottom: 15px;
}
.eb-scroll h3{
  font-weight: 600;
  font-size: 1.1em;
  margin-bottom: 15px;
}

.explanation-a{
  text-decoration: underline !important;
}
.btn-purple{
  background-color: #7B4885;
  color: #fff !important;
  font-weight: 600;
  padding: 1em 1em;
  border: 2px solid #7B4885;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none !important;
  line-height: 1.3;
  max-width: 100%;
  border-radius: 2em;
  min-width: 280px;
  font-size: 1.1em;
  margin: 0 auto;
  width: fit-content;
  width: -moz-fit-content;
}
.btn-gray{
  background-color: #666666;
  color: #fff !important;
  font-weight: 600;
  padding: 1em 1em;
  border: 2px solid #666666;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none !important;
  line-height: 1.3;
  max-width: 100%;
  border-radius: 2em;
  min-width: 280px;
  font-size: 1.1em;
  margin: 0 auto;
  width: fit-content;
  width: -moz-fit-content;
}
.btn-purple:hover, .btn-gray:hover{
  opacity: 0.8;
  color: #fff !important;
}
.space_s{
  margin: 5vw auto;
  width: fit-content;
  width: -moz-fit-content;
}
.space_btn{
  margin: 3vw auto;
  width: fit-content;
  width: -moz-fit-content;
}
.note{
  font-size: 14px;
  text-indent: -1em;
  padding-left: 1em;
  width: fit-content;
  width: -moz-fit-content;
  margin-top: 10px;
}
.note2{
  text-indent: -1em;
  padding-left: 1em;
  display: block;
}
.note--wt{
  font-size: 14px;
  text-indent: -1em;
  padding-left: 1em;
  width: fit-content;
  width: -moz-fit-content;
  margin-top: 1em;
}

/* attendant */
.attendant-box{
  max-width: 800px;
  width: 96%;
}
.attendant-title{
  font-weight: 600;
  font-size: 1.1em;
  margin-bottom: 15px;
}
.attendant-title span{
  display: inline-block;
  padding: 3px 15px;
  background: #352438;
  color: #fff;
  font-size: 0.9em;
  border-radius: 15px;
  margin-right: 20px;
}

.square-list{
  list-style: none;
  padding-left: 0 !important;
  border: solid 1px #808080;
  font-size: 14px;
  margin: 5vw auto;
  border-radius: 0.2em;
}
.square-list > li{
  list-style: none;
  display: flex;
  border-bottom: solid 1px #808080;
  margin-bottom: 0 !important;
}
.square-list > li:last-child{
  border-bottom: none;
}
.square-list-l{
  padding: 5px 15px;
  max-width: 250px;
  width: 30%;
  min-width: 80px;
  background: #352438;
  color: #fff;
}
.square-list-r{
  padding: 5px 15px;
  width: auto;
  flex: 1;
}


/* kyotobooth */
.cl-fuji{color: #ac8fad !important; font-weight: 600;}
.kyotobooth .explanation-box{
  margin: 10vw auto;
}
.kyotobooth-bgbk{
  background-color: #000;
  color: #fff;
  box-sizing: border-box;
  border: 1px solid transparent;
}
.kyotobooth-bgbk h2{color: #fff;}
.kyotobooth-bgbk article{padding: 0;}
.kyotobooth-bgbk .note{
  margin-right: 0;
  color: #bbb;
  margin-left: auto;
}

.kyotobooth-bgp{
  background: linear-gradient(180deg, rgba(53,36,56,1) 0%, rgba(53,36,56,0) 100%);
  border: 1px solid transparent;
}

.kyotobooth-top{
  width: 100%;
  height: 80vh;
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1)), url('https://expokyoto.jp/kyotobooth/img/kyotobooth_img01.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.kyotobooth-logo{
  max-width: 600px;
  width: 80%;
}
.kyotobooth-logo p:nth-child(1){
  text-align: center;
  font-weight: 600;
  font-size: 1.2em;
  margin-bottom: 20px;
  display: block;
}

.kyotobooth-lead{
  font-size: 1.2em;
  text-align: center;
  line-height: 2em;
  display: block;
  font-weight: 600;
}
.kyotobooth-lead--inpact{font-size: 1.5em;}
.kyotobooth-lead--gray{
  font-size: 14px;
  line-height:1.75em;
  color: #bbb;
  text-align: left;
  display: block;
  width: fit-content;
  width: -moz-fit-content;
  margin: 0 auto;
}

.kyotobooth-box{
  margin: 10vw auto;
}
.kyotobooth-box h3{
  font-size: 1.5em;
  line-height: 1.6em;
  font-weight: 600;
  margin-bottom: 1vw;
  text-align: center;
}
.kyotobooth-name__gray{
  font-weight: 600;
  color: #bbb;
  text-align: center;
  margin-bottom: 2em;
}

.kyotobooth__flex1{
  display: flex;
  justify-content: space-between;
  border: solid 1px #707070;
  padding: 2em;
  margin: 5vw auto;
}
.kyotobooth__flex1-img{
  display: block;
  width: 120px;
  flex-shrink: 0;
  margin-right: 2em;
}
.kyotobooth__flex1-img p{
  margin-bottom: 1em;
  font-size: 12px;
}
.kyotobooth__flex1-text{
  width: auto;
  font-size: 0.8em;
  line-height: 1.4em;
}

.kyotobooth__flex2{
  display: flex;
  justify-content: space-between;
  margin: 5vw auto;
}
.kyotobooth__flex2-img{
  max-width: 300px;
  width: 80%; 
  margin-right: 3em;
  flex-shrink: 0;
}
.kyotobooth__flex2-img p{
  margin-bottom: 1em;
  font-size: 12px;
}
.kyotobooth__flex2-text h3,
.kyotobooth__flex2-text .kyotobooth-name__gray{
  text-align: left;
}
.kyotobooth__flex2-text p{
  margin-bottom: 2em;
}
.kyotobooth__flex2-text p:nth-last-child(1){
  margin-bottom: 0;
}

.kyotobooth__flex3{
  display: flex;
  justify-content: space-between;
  margin: 5vw auto;
}
.kyotobooth__flex3 > div{
  width: 47%;
}
.kyotobooth__flex3-text h3{
  font-size: 1.2em;
  font-weight: 600;
  margin-bottom: 1em;
}
.kyotobooth__flex3-text ul{
  padding-left: 0;
}
.kyotobooth__flex3-text li{
  list-style-type: none;
  border-bottom: solid 1px #666666;
  margin-bottom: 1em;
  display: flex;
  justify-content: space-between;
  font-size: 0.9em;
  padding-bottom: 1em;
}
.kyotobooth__flex3-text li span:nth-of-type(1){
  width: 40%;
  padding-right: 1em;
  display: block;
}
.kyotobooth__flex3-text li span:nth-of-type(2){
  width: 60%;
  display: block;
}
.kyotobooth__flex3-img{
  margin-bottom: 2em;
}
.kyotobooth__flex3 h4{
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1.4em;
  padding-bottom: 8px;
  border-bottom: solid 1px #666666;
  margin-bottom: 10px;
}

.kyotobooth-bgp{position: relative;}
.kyotobooth-showbg{
  background-image: url(https://expokyoto.jp/kyotobooth/img/kyotobooth_img09.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 20%;
  height: 25%;
  position: absolute;
  right: 0;
  top: 100vh;
  opacity: 0.4;
}
.kyotobooth-showbg2{
  background-image: url(https://expokyoto.jp/kyotobooth/img/kyotobooth_img08.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 20%;
  height: 25%;
  position: absolute;
  left: 0;
  bottom: 70vh;
  opacity: 0.6;
}
.kyotobooth-show-title{
  color: #bbb !important;
}
.kyotobooth-show-title span{
  font-size: 1.5em;
  color: #ac8fad;
  display: inline-block;
  margin-right: 8px;
}

.kyotobooth__img-2{
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin: 3em auto;
}
.kyotobooth__img-2 > div{
  width: 48%;
  font-size: 0.9em;
}
.kyotobooth__img-2 p{
  margin-bottom: 10px;
}

@media screen and (max-width: 768px){
  .br-pc{
    display: none;
  }
  .small-img{
    margin: 10vw auto;
  }
  .explanation-box{
    margin: 15vw auto;
    width: 100%;
  }

  /* attendant */
  .attendant-title{
    text-align: center;

  }
  .attendant-title span{
    display: block;
    width: fit-content;
    margin: 0 auto 15px;
  }



  /* kyotobooth */
  .kyotobooth{padding: 0 15px;}
  .kyotobooth-top{
    height: 50vh;
  }
  .kyotobooth-logo p:nth-child(1){font-size: 1em;}
  
  .kyotobooth-lead{
    font-size: 1em;
    text-align: left;
    line-height: 1.75em;
  }
  .kyotobooth-lead--inpact{font-size: 1.3em;}
  .kyotobooth-lead--gray{
    font-size: 14px;
    line-height:1.5em;
  }
  
  .kyotobooth-box h3{
    font-size: 1.3em;
    line-height: 1.4em;
  }
  
  .kyotobooth__flex1{
    padding: 1.5em;
    display: block;
    margin: 2em auto;
  }
  .kyotobooth__flex1-img{
    margin: 0 auto 1.5em;
    width: 100%;
    max-width: 400px;
  }
  .kyotobooth__flex1-text{
    font-size: 0.9em;
    line-height: 1.4em;
  }
  
  .kyotobooth__flex2{
    display: block;
    margin: 10vw auto;
  }
  .kyotobooth__flex2-img{
    max-width: 100%;
    width: 100%; 
    margin: 0 auto 2em;
  }
  
  .kyotobooth__flex3{
    display: block;
    margin: 5vw auto;
  }
  .kyotobooth__flex3 > div{
    width: 100%;
    margin-bottom: 2em;
  }
  .kyotobooth__flex3-text li span:nth-of-type(1){
    padding-right: 0;
  }
  .kyotobooth__flex3-text h3{
    text-align: center;
  }

  .kyotobooth__flex3-text li{
    flex-wrap: wrap;
    font-size: 1em;
  }
  .kyotobooth__flex3-text li span:nth-of-type(1){
    width: 100%;
  }
  .kyotobooth__flex3-text li span:nth-of-type(2){
    width: 100%;
  }
  
  .kyotobooth-showbg{
    width: 40%;
    height: 25%;
    top: calc(100vh + 200px);
    opacity: 0.2;
  }
  .kyotobooth-showbg2{
    width: 40%;
    height: 25%;
    bottom: 10vh;
  }
  .kyotobooth-show-title span{
    font-size: 1.2em;
  }


}