@charset "UTF-8";
/*
Theme Name: bososai
*/

:root {
  --en_txt: cinzel, sans-serif;
  --en_txt-lato: "lato", sans-serif;
  --jp_txt: "Noto Serif JP", serif;
  --sp-design-width: 750px;
  --pc-design-width: 1366px;
  --pc-max-width: calc(1366px - 35px*2);
  --blue: #071625;
  --bg-brack: #060f19;
  --txt-black: #000000;
  --txt-white: #eff0f1;
  --btn-white: #ebebeb;
  --txt-size18: clamp(14px, 1.3vw, 18px);
  --txt-size16: clamp(14px, 1.17vw, 16px);
  --txt-size15: clamp(14px, 1vw, 15px);
  --txt-size14: clamp(12px, 1vw, 14px);
  --section-ttl-mgn-b-sp: calc(78 * 100vw / 750);
  --ticket-sp-height: 8.5vh;
}

*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: var(--jp_txt);
  font-weight: 300;
  color: #eff0f1;
  letter-spacing: 0.1em;
}
html,
body {
  overflow-x: hidden;
}
.mtnone {
  margin-top: 0 !important;
}
.ml-none li {
  margin-left: 0 !important;
}
.boder {
  text-decoration: underline;
}
ul {
  list-style: none;
}
html, body {
  background-color: var(--bg-brack);
}
img {
  width: 100%;
  display: block;
  pointer-events: none; /* 画像をDLできないようにしたいと要望あり */
}

.pc-only {
  display: none;
} 
@media screen and (min-width:768px){
  .pc-only {
    display: block;
  }
  .sp-only {
    display: none;
  }
}
/* ------------------------------ */


/* -------- 共通スタイル -------- */
.ttl-en {
  line-height: 1;
}
.ttl-en {
  font-family: var(--en_txt);
  font-style: italic;
  margin-bottom: 2px;
}
.section-wrapper {
  position: relative;
 }
.section-content {
  padding: clamp(20px, 2.5vw, 35px);
}
.section-ttl {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.section-ttl-border{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #FFFFFF;
}
/* SP */
@media screen and (max-width:767px){
  .section-ttl {
    margin-bottom: var(--section-ttl-mgn-b-sp);
  }
  .ttl-en {
    font-size: calc(60 * 100vw / 750);
    margin-bottom: calc(10 * 100vw / 750);
  }
}
/* タブレット・PC */
@media screen and (min-width:768px){
  .ttl-en {
    font-size: min(4.39vw, 60px);
  }
}
@media screen and (min-width:1024px){
  .section-content {
    max-width: var(--pc-max-width);
    margin: auto;
    box-sizing: border-box;
  }
}
/* ------------------------------ */


/* -------- GRADATION-BG -------- */
.bright-bg {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #e1e0dd;
  transition: .6s;
  opacity: 0;
}

.bright {
  opacity: 1;
}
/* ------------------------------ */


/* ------------- FV ------------- */
#fv {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.fv-bg {
  position: absolute;
  top: 0;
  left: 0;
  inset: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-size: cover;
  opacity: 0;
  transform: scale(1.05);
}
.fv-bg-item {
  position: absolute;
  inset: 0;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
}
.fv-bg-item:first-child {
  opacity: 1;
}
.fv-date-img {
  position: absolute;
}
.js-date-fade-up,
.js-fv-fade-in {
  opacity: 0;
}
/* SP */
@media screen and (max-width: 767px) {
  #fv {
    height: calc(100vh - var(--ticket-sp-height)); /* 古いブラウザ用 */
    height: calc(100svh - var(--ticket-sp-height));
  }
  .fv-bg {
    background-position: bottom center;
  }
  .fv-date-img {
    left: 0;
    right: 0;
    bottom: 4svh;
    width: 90%;
    margin: auto;
  }
  .fv-bg-item:first-child {
    background-image: url("shr/img/fv01-sp.jpg");
  }
  .fv-bg-item:nth-child(2) {
    background-image: url("shr/img/fv02-sp.jpg");
  }
  .fv-bg-item:nth-child(3) {
    background-image: url("shr/img/fv03-sp.jpg");
  }
  .fv-bg-item:nth-child(4) {
    background-image: url("shr/img/fv04-sp.jpg");
  }
  .fv-bg-item:nth-child(5) {
    background-image: url("shr/img/fv05-sp.jpg");
  }
}
/* タブレット・PC */
@media screen and (min-width: 768px) {
  #fv {
    height: 100vh; /* 古いブラウザ用 */
    height: 100svh;
  }
  .fv-bg-item:first-child {
    opacity: 1;
    background-image: url("shr/img/fv01.jpg");
  }
  .fv-bg-item:nth-child(2) {
    background-image: url("shr/img/fv02.jpg");
  }
  .fv-bg-item:nth-child(3) {
    background-image: url("shr/img/fv03.jpg");
  }
  .fv-bg-item:nth-child(4) {
    background-image: url("shr/img/fv04.jpg");
  }
  .fv-bg-item:nth-child(5) {
    background-image: url("shr/img/fv05.jpg");
  }
  .fv-date-img {
    width: calc(480 * 100vw / 1366);
    min-width: 340px;
    max-width: 520px;
    right: 50px;
    bottom: 40px;
  }
}
/* タブレット縦向きのみ画像変える */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .fv-bg-item {
    background-position: center;
  }
  .fv-bg-item:first-child {
    background-image: url("shr/img/fv01-tab.jpg");
  }
  .fv-bg-item:nth-child(2) {
    background-image: url("shr/img/fv02-tab.jpg");
  }
  .fv-bg-item:nth-child(3) {
    background-image: url("shr/img/fv03-tab.jpg");
  }
  .fv-bg-item:nth-child(4) {
    background-image: url("shr/img/fv04-tab.jpg");
  }
  .fv-bg-item:nth-child(5) {
    background-image: url("shr/img/fv05-tab.jpg");
  }
  .fv-date-img {
    bottom: 70px;
  }
}
/* ------------------------------ */


/* ------- WHAT IS BOSOSAI ------ */
#about {
  background: url("shr/img/about-bk.jpg") no-repeat;
  background-size: 100% auto;
  width: 100%;
}
.about-content {
  margin: auto;
  padding-top: calc(250 * 100vw / 1366);
}
.about-ttl {
  text-align: center;
}
.about-ttl-jp {
  line-height: 1;
}
.about-section-ttl-border {
  position: static;
}
.about-txt {
  font-size: var(--txt-size18);
  line-height: 2.6;
}
.about-txt p {
  line-height: 2;
  margin-bottom: 30px;
}
.about-video{
  max-width: 1025px;
  width: 90%;
  margin: 0 auto;
  margin-top: calc(140 * 100vw / 1366);
  aspect-ratio: 16/9;
}
.about-video iframe {
  width: 100%;
  height: 100%;
}
/* SP */
@media screen and (max-width: 767px) {
  .about-ttl {
    margin-bottom: var(--section-ttl-mgn-b-sp);
  }
  .about-ttl-en {
    font-size: calc(38 * 100vw / 750);
    margin-bottom: calc(10 * 100vw / 750);
    text-indent: -0.25em;
  }
  .about-ttl-jp {
    font-size: calc(50 * 100vw / 750);
    margin-bottom: calc(10 * 100vw / 750);
  }
  .about-section-ttl-border {
    margin: calc(40 * 100vw / 750) 0;
  }
}
/* タブレット・PC */
@media screen and (min-width: 768px) { 
  .about-content {
    display: flex;
    margin: auto;
    padding-right: min(14200vw / 1366, 142px);
    padding-left: min(12500vw / 1366, 125px);
  }
  .about-ttl {
    flex-shrink: 0;
    letter-spacing: 0;
    line-height: 1.3;
    padding-right: min(12300vw / 1366, 123px);
  }
  .about-ttl-en {
    font-size: min(2700vw / 1366, 27px);
    text-indent: -0.45em;
  }
  .about-ttl-jp {
    font-size: min(3700vw / 1366, 37px);
    margin-bottom: 10px;
  }
  .about-section-ttl-border{
    width: 100%;
    margin: auto;
    margin-top: calc(15 * 100vw / 1366);
    margin-bottom: calc(30 * 100vw / 1366);
  }
}
/* ------------------------------ */


/* ----------- EVENTS ----------- */
#event {
  padding-top: calc(200 * 100vw / 1366);
}
.event-img {
  margin-bottom: clamp(20px, 2.5vw, 35px);
}
.event-txt {
  font-size: var(--txt-size15);
  line-height: 1.73;
}
.event-txt-ttl {
  display: block;
  font-size: 1.2em;
  margin-bottom: 0.4em;
}
/* SP */
@media screen and (max-width: 767px) { 
  .event-txt {
    margin-bottom: 50px;
  }
}
/* タブレット・PC */
@media screen and (min-width: 768px) { 
  .events {
    display: flex;
    gap: 5.7vw;
    padding: 80px 0 0 0;
  }
  .event {
    flex: 1;
    min-width: 0;
  }

  .event-img {
    width: 100%;
    height: auto;
  }
}
/* ------------------------------ */


/*--------- INFORMATION ----------*/
#information {
  width: 100%;
  padding-top: calc(140 * 100vw / 1366);
  padding-bottom: calc(108 * 100vw / 1366);
}
.information-ttl-en, .informations-list-ttl,
.informations-list-txt, .informations-list-mail, .informations-caution, .informations-links-ttl {
  color: var(--txt-black);
}
.information-section-ttl-border {
  background-color: var(--txt-black);
}
.informations-list,
.informations-links {
  padding: 1.8vw 0.7vw;
}
.informations-list {
  box-sizing: border-box;
  border-bottom: 1px solid #bbbbbb;
  font-size: var(--txt-size18);
  line-height: 1.87;
}
.informations-list-txt {
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.7;
}
.informations-list-txt .note {
  color: var(--txt-black);
  font-size: 12px;
  margin-top: 1.5em;
}
.informations-email {
  color: var(--txt-black);
  font-size: 15px;
  display: block;
  margin-top: 1.5em;
}
.informations-email a {
  color: var(--txt-black);
}
.informations-ttl-s {
  display: block;
  font-size: 0.9em;
  color: var(--txt-black);
}
.informations-ttl-s:nth-child(2) {
  margin-top: 1em;
}
.informations-list-btn {
  display: block;
  width: 260px;
  text-align: center;
  background: var(--btn-white);
  color: var(--txt-black);
  font-size: var(--txt-size14);
  margin-top: 20px;
  line-height: 40px;
}
.informations-list-maplink {
  display: block;
  margin-top: max(1.2vw, 15px);
}
.informations-google-map-btn{
  width: 154px;
}
.informations-caution {
  display: block;
  line-height: 1.7;
  font-size: var(--txt-size14);
  letter-spacing: 0;
}
/* SP */
@media screen and (max-width: 767px) {
  .informations-map {
    width: 70%;
    margin: 0 auto 2vw;
    padding-top: 3vw;
  }
  .informations-list {
    padding: 7vw 0.7vw;
  }
  .informations-list:last-child {
    border-bottom: none;
  }
  .information-ttl-en {
    font-size: calc(58 * 100vw / 750);
    letter-spacing: 0;
  }
  .informations-list-ttl {
    font-size: 18px;
    margin-bottom: calc(20 * 100vw / 750);
  }
  .informations-caution {
    margin-top: calc(56 * 100vw / 1366);
  }
}
/* タブレット・PC */
@media screen and (min-width: 768px) {
  .informations {
    display: flex;
    margin-top: 78px;
  }
  .informations-map-wrap {
    box-sizing: border-box;
    max-width: 660px;
    padding-right: min(7.3vw, 100px);
    padding-left: min(5.8vw, 80px);
  }
  .informations-map {
    width: clamp(290px, 35.5vw, 485px);
    object-fit: contain;
  }
  .informations-list {
    display: flex;
  }
  .information-lists-wrap {
    flex-grow: 1;
   }
  .informations-list:first-child {
    padding-top: 0;
   }
  .informations-list-ttl {
    width: clamp(80px, 12.1vw, 170px);
    flex-shrink: 0;
  }
 .informations-caution {
    margin-top: calc(20 * 100vw / 1366);
  }
}
/* タブレット調整 */
@media screen and (min-width: 768px) and (max-width: 980px) {
  .informations-map-wrap {
    padding-right: min(4.85vw, 137px);
    padding-left: min(2vw, 145px);
  }
}
/* ------------------------------ */


/*--------- BUY TICKET ----------*/
.buy-ticket {
  display: block;
  position: fixed;
  font-family: var(--en_txt);
  text-align: center;
  letter-spacing: 0.2em;
  background: var(--blue);
  color: var(--txt-white);
  box-sizing: border-box;
  border: 1px solid #FFFFFF;
  z-index: 10;
}
/* SP */
@media screen and (max-width: 767px) {
  .buy-ticket {
    bottom: 0;
    width: 100%;
    height: var(--ticket-sp-height);
    font-size: 1.2em;
    line-height: var(--ticket-sp-height);
  }
}
/* タブレット・PC */
@media screen and (min-width: 768px) {
  .buy-ticket {
    box-sizing: border-box;
    top: 65%;
    right: -1px;
    transform: translateY(100%) rotate(90deg);
    transform-origin: right top;
    width: 200px;
    height: 48px;
    line-height: 48px;
  }
}

.faq-btn-area {
  padding: 0 20px;
  margin: 24px 0 48px;
}
.faq-btn-area a {
  max-width: 400px;
  border: solid 1px #fff;
  padding: 24px;
  margin: 0 auto;
  display: block;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .faq-btn-area {
    margin: 80px 0;
  }
}

/*-------------------------------------------
404
-------------------------------------------*/
#not-found {
  padding: 100px 0;
  text-align: center;
}
#not-found .title {
  font-size: 32px;
  margin: 80px 0 40px;
}
#not-found .btn a {
  max-width: 200px;
}

@media screen and (max-width: 767px) {
  /*-------------------------------------------
  404
  -------------------------------------------*/
  #not-found {
    padding: 40px 0 80px;
  }
  #not-found .title {
    font-size: 18px;
    margin: 80px 0 40px;
  }
}