@charset "UTF-8";
@import url("https://use.typekit.net/epd4lzl.css");
@import url("https://use.typekit.net/bcc0jbs.css");
/* ============================== */
@font-face {
  font-family: 'TBSGothic';
  src: url('https://www.tbs.co.jp/um/tpfonts/2e0869c1-da33-42ae-9828-55499bd42a69.woff') format("woff");
  font-weight:normal;
  font-style:normal;
}
@font-face {
  font-family: 'TBSGothic';
  src: url('https://www.tbs.co.jp/um/tpfonts/044de588-d2c9-4010-86b0-1c026db099a2.woff') format("woff");
  font-weight:bold;
  font-style:normal;
}
body, h1, h2, h3, h4, h5, div, p, dl, dt, dd, ol, ul, li, form, table, caption, tbody, tfoot, thead, tr, th, td, article,figure { margin:0; padding:0; font-weight: normal; font-size:100%; box-sizing: border-box;}
/*img cover*/
.cover {width:100%; height:100%;}
/*link*/
a{text-decoration:none; color:#0050FF;}
a:hover{ text-decoration:none; color:#0050FF;}
@media all and (min-width:768px) {
.br-smp{display: none;}
}
@media all and (max-width:767px) {
.br-pc{display: none;}
}

.alt{
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}
.nscj {
font-family: "noto-sans-cjk-jp", sans-serif;
font-weight: 400;
font-style: normal;
}
.dela {
font-family: "dela-gothic-one", sans-serif;
font-weight: 400;
font-style: normal;
}
.avenirnw {
font-family: "avenir-next-world", sans-serif;
font-weight: 700;
font-style: normal;
}
.termina {
font-family: "termina", sans-serif;
font-weight: 800;
font-style: normal;
}

/*///////////////// style ////////////////*/
/* PCはFigma(幅1440)基準：1vw = 14.4px */
body{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; min-height: 100vh;}
html, body, div#con-body {background-color:#EDEDF1; color:#171C26;}
#con-body {background-color:transparent;}
.container{
position: relative;
overflow-x: clip;
font-feature-settings : "palt";
line-height: 1.6;
  font-family: 'TBSGothic', sans-serif;
  font-size: 1.4vw;
  font-weight: normal;
  color: #171C26;
}

/* header */
.headerArea h1 figure img {
  width:100%;
  height:auto;
  display:block;
}
.headerArea h1{
  width:100%;
  background-color:#0050ff;
  background-color:#fff;
  display:block;
}

@media all and (min-width: 768px) {
/*.headerArea h1{
  padding:2em 0;
}*/
.headerArea h1 figure.kv_sp {
  display:none;
}
.headerArea h1 figure.kv_pc {
  width: min(96%, 1200px);
  width:100%;
  aspect-ratio: 1800 / 1013;
  margin:0 auto;
  /*border-radius:30px;
  overflow:hidden;
  border:2px solid #fff;*/
}
}
@media all and (max-width: 767px) {
.headerArea h1 figure.kv_pc {
  display:none;
}
.headerArea h1 figure.kv_sp {
  width:100% !important;
  aspect-ratio: 400 / 711;
}
}

/* h1 loading */
.headerArea{
  position: relative;
}
.loading{
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: opacity .5s ease, visibility .5s ease;
}
.loading.is-hide{
  opacity: 0;
  visibility: hidden;
}
.spinner{
  width: 4vw;
  aspect-ratio: 1 / 1;
  border: .4vw solid #EDEDF1;
  border-top-color: #0050FF;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loading-text{
  margin-top: 1vw;
  font-family: "avenir-next-world", sans-serif;
  font-weight: 700;
  font-size: 1.1vw;
  color: #0050FF;
}
@media all and (max-width: 767px) {
.spinner{width: 11vw; border-width: 1.1vw;}
.loading-text{margin-top: 3vw; font-size: 3.4vw;}
}

/* menu（992px未満はハンバーガー） */
@media all and (min-width: 992px) {
#menu{
  position: fixed;
  top:1.6vw;
  right:1.6vw;
  z-index:100;
  border-radius:100vh;
  background-color:#0050FF;
  padding:0 2.2vw;
}
#menu ul {display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;}
#menu li {
  display: flex;
  align-items: center;
  font-size:1.4vw;
  font-weight: 700;
  list-style: none;
}
#menu li + li::before{
  content:"";
  display: block;
  width: .6em;
  height: 1em;
  margin:0 .5em;
  background: url(../img/slash.svg) no-repeat center / contain;
}
#menu li a{
  color:#fff;
  display: block;
  padding:.65em 0;
  line-height: 1.2;
  transition: opacity .3s;
}
#menu li a:hover{opacity: .7;}
#sp_icon{
  display: none;
}
}
@media all and (max-width: 991px) {
#sp_icon{
  position: fixed;
  top:3vw;
  right:3vw;
  z-index:101;
  cursor: pointer;
  width:12vw;
  aspect-ratio: 1 / 1;
  border-radius:50%;
  background-color:#0050FF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.2vw;
}
#sp_icon span {
  display: block;
  height: .6vw;
  width: 50%;
  background-color: #fff;
}
#menu {
  position: fixed;
  top: 18vw;
  left: 5%;
  width: 90%;
  height: auto;
  box-sizing: border-box;
  background-color: #0050FF;
  border-radius: 6vw;
  box-shadow: 0 2vw 6vw rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3vw);
  padding:2vw 8vw;
  z-index: 100;
}
#menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#menu.is-anim {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
#sp_icon.is-anim span {
  transition: 0.4s;
}
#menu li:last-child {
  border-bottom: none;
}
#menu li {
  list-style: none;
  border-bottom: 1px solid rgba(255,255,255,.5);
}
#menu li a {
  display: block;
  color: #fff;
  font-family: "dela-gothic-one", sans-serif;
  font-size: 6vw;
  padding: 4vw 0;
}
#sp_icon.active span:nth-child(1) {
  transform: translateY(1.8vw) rotate(45deg);
}
#sp_icon.active span:nth-child(2) {
  opacity: 0;
}
#sp_icon.active span:nth-child(3) {
  transform: translateY(-1.8vw) rotate(-45deg);
}
}
/* タブレット幅（768〜991px）はメニューのサイズを縮小 */
@media all and (min-width: 768px) and (max-width: 991px) {
#sp_icon{
  top:2vw;
  right:2vw;
  width:6.5vw;
  gap:.65vw;
}
#sp_icon span{height:.33vw;}
#sp_icon.active span:nth-child(1){transform: translateY(.98vw) rotate(45deg);}
#sp_icon.active span:nth-child(3){transform: translateY(-.98vw) rotate(-45deg);}
#menu{
  top:10vw;
  left:auto;
  right:2vw;
  width:45%;
  border-radius:3.5vw;
  padding:1vw 4vw;
}
#menu li a{
  font-size:2.8vw;
  padding:2vw 0;
}
}

.contents{
  background: url(../img/object1.svg) no-repeat right top;
  background-size:17.6vw;
}
.topcontent{
  padding:3.4vw 0 6.9vw;
  position: relative;
}

#location{
  width:65%;
  border-radius:0 3vw 3vw 0;
  background-color:#fff;
  padding:2.2vw 0 2.2vw 5vw;
}
#location p{
  line-height:1.6;
  font-size:2.1vw;
}
#location p span{
  display: inline-block;
  color:#fff;
  background-color:#0050FF;
  border-radius:.2em;
  padding:0 .2em;
  margin:0 .4em 0 0;
  line-height: 1.3;
  /* 一番長い見出し（4文字）に幅を揃えて中央揃え */
  box-sizing: border-box;
  width: 4.6em;
  text-align: center;
}

#snslink{
  display: flex;
  align-items: center;
  gap: 1.1vw;
  color:#fff;
  width:fit-content;
  height:9.2vw;
  border-radius:100vh;
  background-color:#0050FF;
  padding:0 3.8vw 0 3.7vw;
}
#snslink span{
  font-size:2.4vw;
  margin-right: 2.4vw;
  white-space: nowrap;
}
#snslink a{
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border:max(1px, .1vw) solid #fff;
  width:6.2vw;
  transition: opacity .3s;
}
#snslink a:hover{opacity: .7;}
#snslink a img{
  width:40%;
}
#snslink a:last-child img{
  width:48%;
}
@media all and (min-width: 768px) {
#snslink{
  position: absolute;
  top:15.6vw;
  right: 5vw;
  z-index: 1;
}
}

#message{
  margin:8vw 0 0;
}
#message .inner{
  padding:0 6vw;
}
#message h2{
  display: inline-block;
  color:#0050FF;
  font-size:4.6vw;
  line-height: 1.3;
  transform: rotate(-4deg) skewX(-15deg);
  transform-origin: left bottom;
}
#message p{
  font-size:2vw;
  line-height:1.6;
  margin:1.2vw 0 0 6vw;
  font-weight: 600;
}


/* news */
#news{
  background-color:#0050FF;
  position: relative;
  padding:3vw 0;
  margin:5vw auto 0;
}
/*#news::before{
  content:"";
  position: absolute;
  top: -2.6vw;
  left: 0;
  right: 0;
  z-index: 1;
  width: 99%;
  aspect-ratio: 1427 / 79;
  margin:auto;
  background: url(../img/title.svg) no-repeat center top;
  background-size:contain;
}*/
#news .inner{
  width: 90%;
  border-radius: 3vw;
  background-color:#fff;
  margin:0 auto;
  padding:2.4vw 3.8vw 2.6vw 4.3vw;
}
#news h3{
  margin:0;
  width:26.5%;
  color: #0050ff;
  font-family: "termina", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size:4vw;
  line-height: 1;
}
#news ul {
  width:73.5%;
  margin:0;
}
#news ul li{
  list-style: none;
  font-size:max(1.4vw, .875rem);
}
/* 記事が2つ以上の時だけ間に下線（最後の記事には付けない） */
#news ul li:not(:last-child){
  border-bottom:max(1px, .1vw) solid #0050ff;
}
#news ul li a{
  display: flex;
  /* 本文が複数行でも日付は1行目に揃える */
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 1.4vw;
  padding:1.1vw 0;
  color:#171C26;
  transition: opacity .3s;
}
#news ul li a:hover{opacity: .7;}
#news ul li span.ymd{
  flex: 0 0 auto;
  color:#fff;
  font-family: "avenir-next-world", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 80%;
  line-height: 1.4;
  border-radius:100vh;
  background-color:#0050FF;
  padding:0 .8em;
}
#news ul li p{
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  line-height:1.4;
}
@media all and (min-width: 768px) {
#news .inner{
  display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;
}
}

/* program */
/* --u は「1vw」の代わり。白枠(94vw)が 1200px に達した画面幅以降はサイズを固定 */
#program{
  --u: min(1vw, 1200px / 94);
  padding:7vw 0 3vw;
  background-image:url("../img/object2.svg"),url("../img/object3.svg"),url("../img/object3.svg");
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-size:16vw,8vw,8vw;
  background-position:left top,right top 25vw,left bottom 0;
}
#program h2{
  position: relative;
  z-index: 1;
  color:#0050FF;
  font-size:7.4vw;
  line-height: 1;
  text-align: right;
  padding:0 7.7vw 0 0;
  margin:0 0 -3.5vw;
  font-family: "termina", sans-serif;
  font-weight: 800;
  font-style: normal;
}
#program .sacas,
#program .hstudio{
  position: relative;
}
#program .sacas{
  margin:5vw 0 0;
}
/* 会場ごとの白枠 */
#program > div > .inner{
  width:94%;
  margin:0 auto;
  border-radius: 3.5vw;
  background-color:#fff;
}
/* 会場名：白枠の上に付くタブ */
#program > div > h3{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  color:#fff;
  background-color:#0050FF;
  line-height: 1.1;
  font-family: "dela-gothic-one", sans-serif;
  font-weight: 400;
  font-style: normal;
}
/* and more...（斜めにしない） */
#program p.coming{
  font-family: "termina", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: calc(var(--u) * 3);
  line-height: 1.1;
  color:#0050FF;
  text-align:center;
  padding: 0 0 calc(var(--u) * 5);
}

/* 観覧募集リスト（白枠内） */
#program .list_blitz{
  padding: calc(var(--u) * 5) calc(var(--u) * 5) calc(var(--u) * 6.6);
}
/* 各イベント：日時・タイトルは全幅、下段は画像（左）＋説明・ボタン（右） */
#program .list_blitz li{
  list-style: none;
  display: grid;
  /* 画像：文字 ≒ 4：6 */
  grid-template-columns: 38% 1fr;
  grid-template-rows: auto auto auto auto auto auto 1fr;
  grid-template-areas:
    "entry entry"
    "date  date"
    "title title"
    "fig   text"
    "fig   btn"
    "fig   period"
    "fig   .";
  column-gap: 4%;
}
#program .list_blitz li + li{
  margin-top: calc(var(--u) * 5);
}
/* 一番下以外は点線で区切る */
#program .list_blitz li:not(:last-child){
  position: relative;
  padding-bottom: calc(var(--u) * 5);
}
#program .list_blitz li:not(:last-child)::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 1%;
  right: 1%;
  border-bottom: 2px dotted #0050FF;
}
/* 参加＆観覧募集（アイコン付きタグ） */
#program .list_blitz .entry{
  grid-area: entry;
  position: relative;
  justify-self: start;
  margin: 0 0 calc(var(--u) * .8);
  /* 左に稲妻アイコンが重なるので左余白を広めに */
  padding: .15em .5em .2em .85em;
  color:#fff;
  background-color:#0050FF;
  border-radius:0 10px 0 10px;
  font-size: calc(var(--u) * 1.85);
  line-height: 1.3;
  font-weight:800;
}
#program .list_blitz .entry span{
  font-size: 75%;
}
/* 稲妻アイコン（タグ左端のやや上に重ねる） */
#program .list_blitz .entry::after{
  content: "";
  position: absolute;
  left: -.35em;
  top: -.25em;
  height: 1.65em;
  aspect-ratio: 453.9 / 787.41;
  background: url(../img/lightning.svg) no-repeat center / contain;
}
#program .list_blitz li > span{
  grid-area: date;
  color:#0050FF;
  font-size: calc(var(--u) * 1.5);
  line-height: 1.4;
}
#program .list_blitz h4,
#program .list_blitz + .inner h4{
  grid-area: title;
  font-size: calc(var(--u) * 2.1);
  font-weight: 700;
  line-height: 1.4;
}
/* 優先観覧席 */
#program .list_blitz h4 span{
  display: inline-block;
  vertical-align: .1em;
  margin: 0 0 0 .5em;
  padding: 0 .4em;
  color:#fff;
  background-color:#0050FF;
  border-radius: .15em;
  font-size: 80%;
}
#program .list_blitz figure{
  grid-area: fig;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: calc(var(--u) * 2.4) 0 0;
  border-radius: calc(var(--u) * 1.1);
  background-color:#fff;
  overflow: hidden;
  box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
}
#program .list_blitz figure img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
#program .list_blitz li > p,
#program .list_blitz + .inner p{
  grid-area: text;
  margin: calc(var(--u) * 3) 0 0;
  font-size: calc(var(--u) * 1.6);
  line-height: 1.55;
  font-weight: 500;
}
/* 詳細・応募はこちら／詳しく見る */
#program .list_blitz a,
#program .list_blitz + .inner a{
  grid-area: btn;
  justify-self: start;
  display: flex;
  align-items: center;
  column-gap: .4em;
  width: fit-content;
  margin: calc(var(--u) * 2) 0 0;
  padding: calc(var(--u) * 1) calc(var(--u) * 2.2);
  color:#0050FF;
  background-color:#fff;
  border: max(1px, calc(var(--u) * 0.15)) solid #0050FF;
  border-radius: 100vh;
  font-size: calc(var(--u) * 1.65);
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
  transition: background-color .3s, color .3s;
}
#program .list_blitz a::after,
#program .list_blitz + .inner a::after{
  content: "";
  display: inline-block;
  width: .75em;
  aspect-ratio: 1 / 1;
  background: url(../img/arw.svg) no-repeat center / contain;
}
#program .list_blitz a:hover,
#program .list_blitz + .inner a:hover{
  color:#fff;
  background-color:#0050FF;
}
#program .list_blitz a:hover::after,
#program .list_blitz + .inner a:hover::after{
  background-image: url(../img/arw_w.svg);
}
/* 応募期間（ボタンの下） */
#program .list_blitz li > a + p{
  grid-area: period;
  margin: calc(var(--u) * 1.8) 0 0;
  /* ボタンの文字（1.65）よりやや小さく */
  font-size: calc(var(--u) * 1.45);
  font-weight: 700;
  line-height: 1.5;
}
#program .list_blitz li > a + p span{
  display: inline-block;
  margin: 0 .5em 0 0;
  padding: 0 .3em;
  color:#fff;
  background-color:#0050FF;
  border-radius: .2em;
}
/* 注釈：リストと and more... の間。li と同じ幅（左右はリストの余白に揃える） */
#program .note{
  margin: calc(var(--u) * 3) calc(var(--u) * 5) 0;
  padding: 0 0 calc(var(--u) * 4);
  font-size: calc(var(--u) * 1.3);
  font-weight: normal;
  line-height: 1.6;
}
/* .sacas はリストの下に注釈が続くので下余白をなくす */
#program .sacas .list_blitz{
  padding-bottom: 0;
}

/* .hstudio：リストと Digicon6 をそれぞれ角丸の白枠にしてくっつけ、間を点線で区切る */
#program .hstudio > .inner{
  background-color: transparent;
}
#program .hstudio .list_blitz,
#program .list_blitz + .inner{
  background-color:#fff;
  border-radius: 3.5vw;
}
/* タブ（左上）が付く角は四角 */
#program .hstudio .list_blitz{
  border-top-left-radius: 0;
}
#program .list_blitz + .inner{
  position: relative;
  padding: 0 calc(var(--u) * 5) calc(var(--u) * 6.6);
}
#program .list_blitz + .inner::before{
  content: "";
  position: absolute;
  top: 0;
  /* 白枠同士の接着面だけ（左右は角丸の半径ぶん空ける） */
  left: 3.5vw;
  right: 3.5vw;
  border-top: 2px dotted #0050FF;
}
/* Digicon6 見出し：点線の上端に付くタブ */
#program .list_blitz + .inner h3{
  position: relative;
  z-index: 1;
  /* TBS赤坂BLITZスタジオ（会場タブ）より小さく */
  width: calc(var(--u) * 30);
  max-width: 100%;
  margin: 0 auto calc(var(--u) * 4);
  padding: calc(var(--u) * 1) 0;
  color:#fff;
  background-color:#0050FF;
  border-radius: 0 0 calc(var(--u) * 1.5) calc(var(--u) * 1.5);
  text-align: center;
  font-family: "dela-gothic-one", sans-serif;
  font-size: calc(var(--u) * 2.4);
  line-height: 1.1;
}
#program .list_blitz + .inner p{
  margin-top: calc(var(--u) * 2);
}
#program .list_blitz + .inner a{
  margin-left: auto;
}
#program .f85{
  display: block;
  margin: .5em 0 0;
  font-size: 85%;
}


/* access */
#access .inner{
  width: 90.1%;
  margin:9.3vw auto 0;
  background-color:#0050FF;
  border-radius:3.5vw;
  position: relative;
  padding:9.7vw 3vw 3vw 3.6vw;
}
#access h2{
  font-family: "termina", sans-serif;
  font-weight: 800;
  font-style: normal;
  color:#fff;
  font-size:4vw;
  line-height: 1;
}
#access .mapemb{
  overflow:hidden;
  border-radius:.8vw;
  aspect-ratio: 765 / 413;
}
#access .mapemb iframe{
  display: block;
  width:100%;
  height:100%;
}
#access a.gmap{
  border-radius:100vh;
  border:max(1px, .1vw) solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .5em;
  color: #fff;
  font-size: 1.6vw;
  font-weight:700;
  line-height: 1;
  width:17vw;
  height:4vw;
  margin:2.2vw 0 0;
  text-decoration: none;
  transition: background-color .3s, color .3s;
}
#access a.gmap::after {
  content: "";
  display: inline-block;
  width: .75em;
  aspect-ratio: 1 / 1;
  background: url(../img/arw_w.svg) no-repeat center / contain;
}
#access a.gmap:hover{
  background-color:rgba(255,255,255,.15);
}
#access p{
  color: #fff;
  font-size:1.4vw;
  line-height: 1.45;
  padding:6.5vw 0 0;
}

@media all and (min-width: 768px) {
#access .mapemb{
  width:58.9%;
  position: absolute;
  top: -3.8vw;
  right: 3.8vw;
  z-index: 1;
}
}

/* notice */
#notice .inner{
  width: 82.5%;
  margin:0 auto;
}
#notice{
  margin:6.1vw 0 0;
}
#notice h2{
  font-size:4.3vw;
  line-height: 1.2;
  color:#171C26;
}
#notice ul.dotlist{
  margin:2vw 0 0;
}

ul.dotlist li{
  list-style-type: none;
  position: relative;
  padding-left:.8em;
  font-size:max(1.55vw, .875rem);
  margin:0 0 1.7vw;
  line-height:1.4;
  font-weight: 700;
}
ul.dotlist li:last-child{margin-bottom:0;}
ul.dotlist li:before {
  border-radius: 50%;
  width: .25em;
  height: .25em;
  display: block;
  position: absolute;
  left: 0;
  top: .6em;
  content: "";
  background: #171C26;
}

.tbsanime{
  margin:10vw auto 0;
  display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;
  column-gap: 2.1vw;
  transition: opacity .3s;
}
.tbsanime:hover{opacity: .8;}
.tbsanime figure{
  aspect-ratio: 4 / 1;
  width:39vw;
  border-radius:1.1vw;
  overflow: hidden;
  /* 青い背景の中央に白ロゴ（tbsanime.svg） */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:#0050FF;
}
.tbsanime figure img{
  display: block;
  width:62%;
  height:auto;
}
.tbsanime span{
  display: flex;
  align-items: center;
  column-gap: .4em;
  font-family: "dela-gothic-one", sans-serif;
  font-weight: 400;
  font-style: normal;
  color:#0050FF;
  font-size:2.8vw;
  line-height: 1;
}
.tbsanime span::after{
  content: "";
  display: inline-block;
  width: .6em;
  aspect-ratio: 1 / 1;
  background: url(../img/arw.svg) no-repeat center / contain;
}

/* footer */
footer {
padding:9.7vw 0 6vw !important;
}
footer .copy{
text-align:center;
font-size:1.1vw;
color:#171C26;
}

/* ========== SP ========== */
@media all and (max-width: 767px) {
.container{font-size:3.6vw;}
.contents{background-size:24vw;}
.topcontent{
  padding:6vw 0 0;
}
#location{width:88%; padding:3vw 2vw 3vw 3vw; border-radius:0 5vw 5vw 0;}
#location p{
  font-size:4vw;
  /* 見出し(span)と本文を2列にして、折り返し時の行頭を揃える */
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:start;
  row-gap:.3em;
  line-height:1.4;
}
#location p br{display:none;}
#snslink{width:fit-content; height:auto; margin:4vw 2vw 0 auto; padding:2vw 4vw 2vw 4vw; gap:2vw;}
#snslink span{font-size:4.4vw; margin-right:1vw;}
#snslink a{width:11vw;}

#message{margin:8vw 0 0;}
#message .inner{padding:0 6vw;}
#message h2{display:block; font-size:8.4vw; line-height:1.1; transform-origin:center;}
#message h2 span{display:block; text-align:right; white-space:nowrap;}
#message p{font-size:3.8vw; margin:6vw 0 0;}

#news{margin:8vw auto 0; padding:3vw 0;}
#news::before{top:-2.6vw;}
#news .inner{width:94%; padding:4vw; border-radius:5vw;}
#news h3{width:100%; font-size:7vw;}
#news ul{width:100%; margin:0 0 1vw;}
#news ul li{font-size:max(3.3vw, .8125rem);}
#news ul li a{gap:3vw; padding:3vw 0;}
#news ul li:first-child a{padding-top:1vw;}
#news ul li:last-child a{padding-bottom:0;}

#program{
  padding:8vw 0 12vw;
  background-size:24vw,12vw,12vw;
  background-position:left top,right top 50vw,left bottom 0;
  margin:0 auto;
}
#program h2{font-size:8.5vw; text-align:right; padding:0 4vw 0 0; margin:0 0 5vw;}
#program > div > .inner{width:94%; border-radius:6vw;}
#program > div > h3{font-size:5.9vw; padding:2vw 6vw;}
/* ラベルと白枠をくっつける（タブ状） */
#program .sacas > h3{margin:0 3% 0 auto; border-radius:4vw 4vw 0 0;}
#program .sacas > .inner{border-top-right-radius:0;}
#program .hstudio > h3{margin:0 auto 0 3%; border-radius:4vw 4vw 0 0;
  /* 白枠(.inner：94%)の90%程度に収め、改行しないよう文字を小さく */
  box-sizing:border-box; max-width:90%; padding:2vw 4vw; font-size:5.7vw; white-space:nowrap;}
#program .hstudio > .inner{border-top-left-radius:0;}
#program p.coming{font-size:5vw; padding:0 0 8vw;}

#program .list_blitz{padding:7vw 5vw 8vw;}
#program .sacas .list_blitz{padding-bottom:0;}
#program .list_blitz li{
  grid-template-columns:1fr;
  grid-template-rows:auto;
  grid-template-areas:"entry" "date" "title" "fig" "text" "btn" "period";
}
/* ボタンと応募期間は中央寄せ */
#program .list_blitz li > a{justify-self:center;}
#program .list_blitz li > a + p{margin-top:3vw; font-size:3.2vw; text-align:center;}
#program .list_blitz li + li{margin-top:5vw;}
/* 一番下以外は中央寄せの点線で区切る */
#program .list_blitz li:not(:last-child){padding-bottom:8vw;}
#program .list_blitz li > span{font-size:3.3vw;}
#program .list_blitz .entry{font-size:3.6vw; margin-bottom:2vw;}
#program .list_blitz h4,
#program .list_blitz + .inner h4{font-size:4.1vw;}
#program .list_blitz figure{width:90%; justify-self:center; margin-top:3vw; border-radius:2vw;}
#program .list_blitz li > p,
#program .list_blitz + .inner p{margin-top:3vw; font-size:3.4vw;}
#program .list_blitz a,
#program .list_blitz + .inner a{margin-top:4vw; padding:2.5vw 5vw; font-size:3.6vw;}
#program .note{margin:5vw 5vw 0; padding:0 0 6vw; font-size:2.6vw;}
#program .list_blitz + .inner{padding:0 5vw 8vw;}
#program .hstudio .list_blitz,
#program .list_blitz + .inner{border-radius:6vw;}
#program .hstudio .list_blitz{border-top-left-radius:0;}
#program .list_blitz + .inner::before{left:6vw; right:6vw;}
#program .list_blitz + .inner h3{width:55%; padding:1.8vw 0; margin-bottom:6vw; font-size:4.4vw; border-radius:0 0 3vw 3vw;}

#notice .inner{width:88%;}

#access .inner{width:92%; margin:0 auto 0; padding:6vw; border-radius:5vw;}
#access h2{font-size:9vw;}
#access .mapemb{margin:5vw 0 0; border-radius:2vw;}
#access a.gmap{font-size:3.5vw; width:45%; height:10vw; margin:4vw 0 0;}
#access p{font-size:3.2vw; padding:5vw 0 0;}

#notice{margin:8vw 0 0;}
#notice h2{font-size:8vw;}
#notice ul.dotlist{margin:4vw 0 0;}
ul.dotlist li{font-size:max(3.4vw, .8125rem); margin:0 0 3.7vw; line-height:1.25;}
ul.dotlist li:before{top:.5em;}

.tbsanime{margin:12vw auto 0; flex-direction:column; row-gap:3vw;}
.tbsanime figure{width:70vw; border-radius:2vw;}
.tbsanime span{font-size:5vw;}

footer{padding:12vw 3vw 18vw; !important}
footer .copy{font-size:2.6vw;}
}


/* ========== PC：大画面で大きくなりすぎないよう上限を設定 ========== */
/* --u は「1vw」の代わり。上限幅に達した画面幅以降はサイズが固定される */
@media all and (min-width: 768px) {
/* #message：コンテンツ幅 max 1200px（88vw = 1200px で固定） */
#message .inner{
  --u: min(1vw, 1200px / 88);
  width: calc(var(--u) * 88);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}
#message h2{font-size: calc(var(--u) * 4.6);}
#message p{
  font-size: calc(var(--u) * 2);
  margin: calc(var(--u) * 1.2) 0 0 calc(var(--u) * 6);
}

/* #news：タイトル画像を白枠(.inner)と同じ幅に（90vw・max 1200px）。青帯の背景は全幅のまま */
#news{
  --u: min(1vw, 1200px / 90);
  padding: calc(var(--u) * 3.8) 0 calc(var(--u) * 3.8);
}
#news::before{
  /* 白枠(.inner：90u・max 1200px)の90% */
  width: calc(var(--u) * 81);
  max-width: 1080px;
  /* 画像の高さの半分だけ上にずらして青帯の上端にまたがらせる */
  top: calc(var(--u) * -2.25);
}
/* 白枠 max 1200px（90vw = 1200px で固定） */
#news .inner{
  --u: min(1vw, 1200px / 90);
  width: calc(var(--u) * 90);
  max-width: 1200px;
  border-radius: calc(var(--u) * 3);
  padding: calc(var(--u) * 2.4) calc(var(--u) * 3.8) calc(var(--u) * 2.6) calc(var(--u) * 4.3);
}
#news h3{font-size: calc(var(--u) * 4);}
#news ul li{font-size: max(calc(var(--u) * 1.4), .875rem);}
#news ul li a{
  gap: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 1.1) 0;
}

/* #program：白枠 max 1200px（94vw = 1200px で固定）
   .sacas は画面左端、.hstudio は画面右端に寄せる */
#program h2{
  /* 最初の .hstudio（右寄せ）の白枠の右端に合わせる */
  font-size: calc(var(--u) * 6.2);
  padding: 0 calc(var(--u) * 3) 0 0;
  margin: 0 0 calc(var(--u) * 2);
}
#program > div > .inner{
  width: calc(var(--u) * 94);
  border-radius: calc(var(--u) * 3.5);
}
/* 白枠＋外側余白(3u)の幅の箱にして、タブを白枠の端に揃えやすくする */
#program .hstudio{
  width: calc(var(--u) * 97);
  margin: 0 0 0 auto;
}
#program .sacas{
  width: calc(var(--u) * 97);
  margin: calc(var(--u) * 5) 0 0;
}
#program .sacas > .inner{
  margin: 0 auto 0 calc(var(--u) * 3);
  border-top-right-radius: 0;
}
#program .hstudio > .inner{
  margin: 0 calc(var(--u) * 3) 0 auto;
  border-top-left-radius: 0;
}
#program .hstudio .list_blitz,
#program .list_blitz + .inner{
  border-radius: calc(var(--u) * 3.5);
}
#program .hstudio .list_blitz{
  border-top-left-radius: 0;
}
#program .list_blitz + .inner::before{
  left: calc(var(--u) * 3.5);
  right: calc(var(--u) * 3.5);
}
#program > div > h3{
  font-size: calc(var(--u) * 3.6);
  padding: calc(var(--u) * 1.2) calc(var(--u) * 3.5);
}
/* .hstudio のタブは白枠の左端、.sacas のタブは白枠の右端 */
#program .hstudio > h3{
  margin: 0 auto 0 0;
  border-radius: calc(var(--u) * 2) calc(var(--u) * 2) 0 0;
}
#program .sacas > h3{
  margin: 0 0 0 auto;
  border-radius: calc(var(--u) * 2) calc(var(--u) * 2) 0 0;
}

/* #location（左端寄せ）・#snslink（右端寄せ）：約1277px以降はサイズを固定 */
.topcontent{
  --u: min(1vw, 1200px / 94);
  padding: calc(var(--u) * 3.4) 0 calc(var(--u) * 6.9);
}
#location{
  width: calc(var(--u) * 65);
  border-radius: 0 calc(var(--u) * 3) calc(var(--u) * 3) 0;
  padding: calc(var(--u) * 2.2) 0 calc(var(--u) * 2.2) calc(var(--u) * 5);
}
#location p{font-size: calc(var(--u) * 2.1);}
#snslink{
  gap: calc(var(--u) * 1.1);
  height: calc(var(--u) * 9.2);
  padding: 0 calc(var(--u) * 3.8) 0 calc(var(--u) * 3.7);
  top: calc(var(--u) * 15.6);
  right: calc(var(--u) * 5);
}
#snslink span{
  font-size: calc(var(--u) * 2.4);
  margin-right: calc(var(--u) * 2.4);
}
#snslink a{width: calc(var(--u) * 6.2);}

/* 背景のobject画像：コンテンツと同じ画面幅（約1277px）以降はサイズを固定 */
.contents{
  --o: min(1vw, 1200px / 94);
  background-size: calc(var(--o) * 17.6);
}
#program{
  background-size: calc(var(--u) * 16), calc(var(--u) * 8), calc(var(--u) * 8);
  background-position: left top, right top calc(var(--u) * 25), left bottom 0;
}

/* #access：max 1200px（90.1vw = 1200px で固定） */
#access .inner{
  --u: min(1vw, 1200px / 90.1);
  width: calc(var(--u) * 90.1);
  max-width: 1200px;
  border-radius: calc(var(--u) * 3.5);
  padding: calc(var(--u) * 9.7) calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 3.6);
}
#access h2{font-size: calc(var(--u) * 4);}
#access .mapemb{
  border-radius: calc(var(--u) * .8);
  top: calc(var(--u) * -3.8);
  right: calc(var(--u) * 3.8);
}
#access a.gmap{
  font-size: calc(var(--u) * 1.6);
  width: calc(var(--u) * 17);
  height: calc(var(--u) * 4);
  margin: calc(var(--u) * 2.2) 0 0;
}
#access p{
  font-size: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 6.5) 0 0;
}

/* .tbsanime：max 900px（バナー＋テキストの合計 約60.5vw = 900px で固定） */
.tbsanime{
  --u: min(1vw, 900px / 60.5);
  max-width: 900px;
  column-gap: calc(var(--u) * 2.1);
}
.tbsanime figure{
  width: calc(var(--u) * 39);
  border-radius: calc(var(--u) * 1.1);
}
.tbsanime span{font-size: calc(var(--u) * 2.8); white-space: nowrap;}
}

/* scroll animation（スライドイン） */
.animation{
  opacity: 0;
  transform: translateY(6vw);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.animation.fromLeft{transform: translateX(-10vw);}
.animation.fromRight{transform: translateX(10vw);}
.animation.active{
  opacity: 1;
  transform: none;
}
/* #message：h2を左からマスクで出現 → pを順に表示 */
#message.animation{
  opacity: 1;
  transform: none;
}
#message.animation h2{
  clip-path: inset(-20% 100% -20% -10%);
  transition: clip-path .6s cubic-bezier(.65,0,.35,1);
}
#message.animation p{
  opacity: 0;
  transform: translateY(3vw);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
  transition-delay: .5s;
}
#message.animation.active h2{
  clip-path: inset(-20% -10% -20% -10%);
}
#message.animation.active p{
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce){
  .animation,
  #message.animation p{
    opacity: 1;
    transform: none;
    transition: none;
  }
  #message.animation h2{
    clip-path: none;
    transition: none;
  }
}

/*lazyload*/
.lazyload, .lazyloading { opacity: 0;}
.lazyloaded { opacity: 1; transition: all 1000ms; max-width: 100%;}

.nocontxt,figure { user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-drag:none; -khtml-user-drag: none; -webkit-touch-callout: none; text-align:center;}
.nocontxt img, .nocontxt div, figure img { pointer-events: none;}