/* top
=============================================== */

body#top { background-image:url(../img/top/bg/line.png), linear-gradient(13deg, #F5F5F5 6%, #E2E2E2 38%, #F1F1F1 61%, #E2E2E2 100%); background-position:center -64%; background-size:190% auto, 100% 100%; }
#top #con-body { position:relative; overflow-x:hidden; }


/* tv
------------------------------------ */

#tv:before,
#tv:after { display:block; content:""; position:absolute; z-index:-1; background-position:center center; background-repeat:no-repeat; background-size:cover; }
#tv:before { top:-10px; left:-200px; width:60%; aspect-ratio:700 / 403; background-image:url(../img/top/bg/circle2.png); }
#tv:after { top:60.0vw; right:-30.0vw; width:60%; aspect-ratio:804 / 311; background-image:url(../img/top/bg/circle1.png); }
#tv-area { position:relative; z-index:0; width:1186px; aspect-ratio:1186 / 973; margin:110px auto 10.0vw auto; border-radius:10px; background:url(../img/top/tv/tv.jpg) center center no-repeat; background-size:cover; /* fade in */ opacity:0; animation:fade 2s 0.5s forwards; }
#catchcopy,
#tv-item span { position:absolute; z-index:1; background-position:center center; background-repeat:no-repeat; background-size:cover; }
#catchcopy { top:26.8242548818088%; left:31.787521079258%; width:36.8465430016863%; aspect-ratio:437 / 400; background-image:url(../img/top/tv/tokimeku.png); text-indent:-9999px; opacity:0; transition: opacity 0.5s ease-out; }

#catchcopy.is-active { opacity: 1; }
#tv-item span:nth-child(1) { top:-6.16649537512847%; left:34.991568296796%; width:4.80607082630691%; aspect-ratio:57 / 107; background-image:url(../img/top/tv/kirakira.png); }
#tv-item span:nth-child(2) { top:34%; right:13%; width:4.72175379426644%; aspect-ratio:56 / 57; background-image:url(../img/top/tv/uni.png); }
#tv-item span:nth-child(3) { top:10.3802672147996%; left:24.9578414839798%; width:8.26306913996627%; aspect-ratio:98 / 80; background-image:url(../img/top/tv/wakty.png); }
#tv-item span:nth-child(4) { top:16.5467625899281%; left:50.3372681281619%; width:7.41989881956155%; aspect-ratio:88 / 71; background-image:url(../img/top/tv/chikyu.png); }
#tv-item span:nth-child(5) { top:18.191161356629%; left:79.4266441821248%; width:4.80607082630691%; aspect-ratio:57 / 107; background-image:url(../img/top/tv/kirakira.png); }
#tv-item span:nth-child(6) { top:32.065775950668%; left:19.8988195615514%; width:5.22765598650928%; aspect-ratio:62 / 58; background-image:url(../img/top/tv/hon.png); }
#tv-item span:nth-child(7) { top:26.8242548818088%; left:66.9477234401349%; width:4.38448566610455%; aspect-ratio:52 / 70; background-image:url(../img/top/tv/denkyu.png); }
#tv-item span:nth-child(8) { top:50.7708119218911%; left:15.2613827993255%; width:6.070826306914%; aspect-ratio:72 / 72; background-image:url(../img/top/tv/spark.png); }
#tv-item span:nth-child(9) { top:55.4984583761562%; left:28.4991568296796%; width:4.80607082630691%; aspect-ratio:57 / 107; background-image:url(../img/top/tv/kirakira.png); }
#tv-item span:nth-child(10) { top:73%; left:82%; width:7.75716694772344%; aspect-ratio:92 / 68; background-image:url(../img/top/tv/cho.png); }
#tv-item span:nth-child(11) { top:70.4008221993834%; left:15.2613827993255%; width:6.40809443507589%; aspect-ratio:76 / 72; background-image:url(../img/top/tv/tori.png); }
#tv-item span:nth-child(12) { top:82%; left:20%; width:6.91399662731872%; aspect-ratio:82 / 66; background-image:url(../img/top/tv/no.png); }
#tv-item span:nth-child(13) { top:101.830421377184%; left:17.8752107925801%; width:6.15514333895447%; aspect-ratio:73 / 22; background-image:url(../img/top/tv/check.png); }
#tv-item span:nth-child(14) { top:95.9917780061665%; left:75.6323777403035%; width:6.91399662731872%; aspect-ratio:82 / 62; background-image:url(../img/top/tv/unique.png); }

#bosoty-win { position:absolute; top:calc(50% - (17.0em / 2)); left:calc(50% - (22.0em / 2)); z-index:10; width:22.0em; font-family:"dotgothic16", sans-serif; }
#bst-ttl { display:inline-block; padding:0.7em 1.0em; background:var(--cl-tbsblue); color:#fff; border:#000 2px solid; border-bottom:none; font-size:90%; }
#bst-close { position:absolute; top:calc(-1.4em - 2px); right:-0.15em; }
#bst-close span { display:block; padding:0em 0.5em 0.3em 0.5em; line-height:100%; background:#FCFCFC; border:#000 2px solid; cursor:pointer; }
#bst-win { position:relative; padding:0.7em 0.7em 0.7em 1.0em; background:linear-gradient(#FCFCFC, #E5E5E5); border:#000 2px solid; box-shadow:2px 2px 4px rgba(0,0,0,0.4); height:15.0em; }
#bst-more .kwsk, #bst-more .honne { position:absolute; display:inline-block; line-height:100%; }
#bst-more .kwsk { bottom:2.0em; right:0.2em; z-index:2; margin-top:1.0em; padding:0.3em 1.0em; border-radius:1000px; background:#000; color:#fff; font-size:75%; }
#bst-more .honne { bottom:-0.8em; right:-0.5em; z-index:1; padding:1.0em 0.5em 1.0em 1.0em; border-radius:2.0em 0 0 2.0em; border:#000 2px solid; background:#99F5FF; font-size:80%; }
#bst-more a .honne { text-decoration:none; color:#000; }
@media (hover:hover) { #bst-more a:hover .honne { background:#fff; } }
#bst-txt { padding-bottom:1.0em; line-height:150%; }
#bst-btn { display:flex; justify-content:center; flex-wrap:wrap; }
#bst-btn .btn { margin:0 0.3em 0.5em 0.3em; padding:0.3em 0.4em; border:#000 2px solid; cursor:pointer; text-align:center; box-shadow:2px 2px 4px rgba(0,0,0,0.4); white-space:nowrap; font-size:90%; line-height:120%; /* hover */ transition:opacity 0.2s ease-out; }
@media (hover:hover) { #bst-btn .btn:hover { opacity:0.5; } }
#bst-btn .btn.is-2col { width:40%; padding:0.8em 0.4em; }
#bst-btn .btn.is-full { width:100%; }
#bst-chara span { position:absolute; content:""; display:block; z-index:11; bottom:-40px; right:-50px; width:70px; aspect-ratio:222 / 243; background:url(../img/top/tv/bosoty.gif) center center no-repeat; background-size:cover; }
#bst-chara span.more { bottom:60px; right:10px; }

#bst-intro { position:absolute; z-index:10; bottom:270px; right:180px; width:130px; aspect-ratio:130 / 200; cursor:pointer; text-align:center; /* hover */ opacity:0; visibility:hidden; transition:transform 0.2s, opacity 0.5s ease-out, visibility 0s linear 0.5s; }
#bst-intro.is-visible { opacity:1; visibility:visible; transition-delay:0s; }
@media (hover:hover) { #bst-intro:hover { transform:translateX(4px); } }
#bst-intro::before,
#bst-intro::after { display:block; content:""; background-position:center center; background-repeat:no-repeat; background-size:cover; }
#bst-intro::before { width:100%; aspect-ratio:260 / 204; background-image:url(../img/top/tv/bosoty_serif.png); }
#bst-intro::after { width:53%; margin:10px auto 0 auto; aspect-ratio:222 / 243; background-image:url(../img/top/tv/bosoty.gif); }

#tv-btn-graduate { position:absolute; z-index:10; top:71%; width:100%; text-align:center; font-size:190%; }
#tv-btn-graduate a { display:inline-block; margin:auto; padding:0.8em 3.0em; border-radius:2.0em; background:url(../img/common/bg_spectre.jpg) center center no-repeat; background-size:100% 100%; border:#000 1px solid; font-family:'dotgothic16', sans-serif; color:#000; text-decoration:none; box-shadow:2px 3px 0px rgba(0,0,0,1); /* hover */ transition:transform 0.2s, opacity 0.2s ease-out; }
@media (hover:hover) { #tv-btn-graduate a:hover { transform:translateX(4px); opacity:0.7; } }
#tv-btn-graduate a::before { display:inline-block; vertical-align:text-bottom; margin-right:0.5em; content:""; width:1.0em; aspect-ratio:52 / 70; background:url(../img/top/tv/denkyu.png) center center no-repeat; background-size:cover; }

/* bosoty fadein */

@keyframes bosoty-fade-in {
  from {
    opacity:0;
    transform:translateY(30px);
    visibility:hidden;
  }
  to {
    opacity:1;
    transform:translateY(0);
    visibility:visible;
  }
}

#bosoty-win {
  opacity:0;
  visibility:hidden;
}

#bosoty-win.is-visible {
  animation: bosoty-fade-in 2s ease-out 0s forwards;
}

/* -- Media Queries -- */

@media all and (max-width:1279px) {

#tv-area { width:94%; margin:80px 3% 14.0vw 3%; }

}

@media all and (max-width:800px) {

#tv-area { width:100%; margin:80px 0 18.0vw 0; aspect-ratio:375 / 474; border-radius:0; }
#tv:before { left:-20%; width:100%; }
#tv:after { display:none; }

#catchcopy { top:26.7932489451477%; left:21.6%; width:56.5333333333333%; }
#tv-item span:nth-child(1) { top:-2.74261603375527%; left:30.9333333333333%; width:7.2%; }
#tv-item span:nth-child(2) { top:-8.22784810126582%; left:73.0666666666667%; width:8%; }
#tv-item span:nth-child(3) { top:9.91561181434599%; left:16.2666666666667%; width:13.3333333333333%; }
#tv-item span:nth-child(4) { top:16.6666666666667%; left:50.4%; width:11.4666666666667%; }
#tv-item span:nth-child(5) { top:16.6666666666667%; left:86.1333333333333%; width:7.2%; }
#tv-item span:nth-child(6) { top:29.1139240506329%; left:2.66666666666667%; width:8%; }
#tv-item span:nth-child(7) { top:26.7932489451477%; left:76%; width:7.2%; }
#tv-item span:nth-child(8) { top:46.2025316455696%; left:0%; width:8%; }
#tv-item span:nth-child(9) { top:52.1097046413502%; left:14.6%; width:7.2%; }
#tv-item span:nth-child(10) { top:70.4641350210971%; left:86%; width:9.86666666666667%; }
#tv-item span:nth-child(11) { top:69.4092827004219%; left:8.2%; width:7.46666666666667%; }
#tv-item span:nth-child(12) { top:80.379746835443%; left:5%; width:10.1333333333333%; }
#tv-item span:nth-child(13) { top:103.164556962025%; left:13.0666666666667%; width:9.6%; }
#tv-item span:nth-child(14) { top:95%; left:90%; width:14.4%; }

#bosoty-win { font-size:3.5vw; }
#bst-chara span { bottom:-6.0vw; right:-6.0vw; width:14.0vw; }
#bst-btn .btn { border-width:1px; }

#tv-btn-graduate { top:70%; font-size:4.0vw; }
#tv-btn-graduate a { padding:0.8em 1.5em; }

#bst-intro { bottom:15%; right:2%; width:25%; }

}

/* ----- tv item animation ----- */

#tv-item span,
#catchcopy {
  opacity:0;
}

#tv-item span.is-visible {
  opacity:1;
}

@keyframes flicker-in {
  0%, 50% { opacity:0; }
  60% { opacity:1; }
  65% { opacity:0.3; }
  70% { opacity:1; }
  75% { opacity:0; }
  85% { opacity:1; }
  100% { opacity:1; }
}

/* ★★★ アニメーション定義をA, B, C, Dに整理 ★★★ */
@keyframes kaku-kaku-A {
  0% { transform:translate(0, 0); }
  25% { transform:translate(1px, -1px); }
  50% { transform:translate(-1px, 1px); }
  75% { transform:translate(1px, 1px); }
  100% { transform:translate(-1px, -1px); }
}
@keyframes kaku-kaku-B {
  0%, 100% { transform:translate(0, 0); }
  25% { transform:translate(1px, 0); }
  50% { transform:translate(1px, 1px); }
  75% { transform:translate(0, 1px); }
}
@keyframes kaku-kaku-C {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}
@keyframes kaku-kaku-D {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-2px); }
  75% { transform: translateY(2px); }
}

.anim-flicker-in {
  animation:flicker-in 1.5s forwards;
}

.anim-A, .anim-B, .anim-C, .anim-D {
  animation-timing-function:steps(1, end);
  animation-iteration-count:infinite;
}

.anim-A { animation-name:kaku-kaku-A; animation-duration:0.8s; }
.anim-B { animation-name:kaku-kaku-B; animation-duration:0.6s; }
.anim-C { animation-name:kaku-kaku-C; animation-duration:0.5s; }
.anim-D { animation-name:kaku-kaku-D; animation-duration:0.5s; }

@keyframes fuwa-fuwa {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.anim-float {
  animation-name: fuwa-fuwa;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


/* message
------------------------------------ */

#message { position:relative; width:1027px; margin:0 auto 6.0vw auto; aspect-ratio:1027 / 773; }
#message:after { position:absolute; display:block; content:""; top:50.5674653215637%; left:79.6160877513711%; z-index:-1; width:60%; aspect-ratio:1216 / 1112; background:url(../img/top/message/bg_circle.png) center center no-repeat; background-size:cover; }
#message p { position:absolute; background-position:center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }
#message p:nth-child(1) { top:1.9404915912031%; left:0%; width:49.7781721384206%; aspect-ratio:1122 / 556; background-image:url(../img/top/message/t_pc1.png); }
#message p:nth-child(2) { top:0%; left:56.3442768411713%; width:43.6557231588288%; aspect-ratio:986 / 718; background-image:url(../img/top/message/t_pc2.png); }
#message p:nth-child(3) { top:62.48382923674%; left:43.6557231588288%; width:50.2218278615794%; aspect-ratio:1134 / 396; background-image:url(../img/top/message/t_pc3.png); }
#message p:nth-child(4) { top:69.5989650711514%; left:0%; width:44.0106477373558%; aspect-ratio:987 / 464; background-image:url(../img/top/message/t_pc4.png); }

/* -- Media Queries -- */

@media all and (max-width:1127px) {

#message { width:100%; margin:0 auto 12.0vw auto; aspect-ratio:375 / 882; }
#message:after { top:55%; left:45%; width:70.9333333333333%; }
#message p:nth-child(1) { top:0%; left:9.33333333333333%; width:80.5333333333333%; aspect-ratio:1210 / 600; background-image:url(../img/top/message/t_smp1.png); }
#message p:nth-child(2) { top:21.9954648526077%; left:14.6666666666667%; width:80.5333333333333%; aspect-ratio:1210 / 1182; background-image:url(../img/top/message/t_smp2.png); }
#message p:nth-child(3) { top:63.4920634920635%; left:9.33333333333333%; width:72.5333333333333%; aspect-ratio:1080 / 376; background-image:url(../img/top/message/t_smp3.png); }
#message p:nth-child(4) { top:78.9115646258503%; left:8.26666666666667%; width:70.6666666666667%; aspect-ratio:1052 / 734; background-image:url(../img/top/message/t_smp4.png); }
}


/* news
------------------------------------ */

#news { width:906px; margin:0 auto 6.0vw auto; padding-top:1px; aspect-ratio:1812 / 1028; background:url(../img/top/news/news_frame.png) center center no-repeat; background-size:cover;}
#news .ttl { display:none; }
#news-list { margin:15% auto auto 13.3%; width:78%; height:56.64%; overflow-y:auto; overflow-x:hidden; }
#news-list li { padding-bottom:0.5em; line-height:140%;}
#news-list li.news-new { font-weight:700;}
#news-list li dl dt { color:var(--cl-tbsblue); }
#news-list li dl dt .new { display:inline-block; padding:0.1em 0.5em; margin-left:0.5em; background:var(--cl-lightgreen); font-size:80%; font-family:"dotgothic16", sans-serif; line-height:100%; }
#news-list li dl dd a { color:#000; }
@media (hover:hover) { #news-list li dl dd a:hover { text-decoration:none; } }

/* -- Media Queries -- */

@media all and (max-width:1279px) {

#news { width:90%; margin:0 5% 6.0vw 5%; }

}

@media all and (max-width:640px) {

#news { width:100%; margin:0 0 6.0vw 0; aspect-ratio:375 / 420; }
#news-list { margin:30.0vw 5% auto 5%; width:90%; height:68.0vw; }

}


/* know
------------------------------------ */

#know { width:900px; margin:0 auto 10.0vw auto; }
#know ul { display:flex; flex-wrap:wrap; width:100%; }
#know ul li { width:48%; margin:0 1% 2% 1%; aspect-ratio:428 / 266; }
#know ul li a { position:relative; display:block; position:relative; width:100%; height:100%; box-sizing:border-box; border-radius:6px 15px 6px 15px; border-width:5px; border-style:solid; border-color:var(--cl-lightblue); background-position:center center; background-repeat:no-repeat; background-size:101%; color:#000; /* hover */ transition:transform 0.2s, opacity 0.2s ease-out; }
@media (hover:hover) { #know ul li a:hover { transform:translateX(4px); opacity:0.7; } }
#know ul li a .name { position:absolute; top:0; left:0; z-index:1; display:inline-block; padding:0.5em 1.0em 0.75em 0.75em; background-color:var(--cl-lightblue); border-radius:0 0 15px 0; font-weight:700; }
#know ul li a:after { position:absolute; bottom:0; right:0; z-index:1; display:inline-block; content:""; padding:1.0em; background-image:url(../img/top/know/arrow.png); background-position:60% 60%; background-repeat:no-repeat; background-size:50% auto; background-color:var(--cl-lightblue); border-radius:15px 0 0 0; font-weight:700; }

#know ul li:nth-child(1) a { border-color:var(--cl-lightblue); background-image:url(../img/top/know/item_bg1.jpg); }
#know ul li:nth-child(1) a .name, #know ul li:nth-child(1) a:after { background-color:var(--cl-lightblue); }
#know ul li:nth-child(2) a { border-color:var(--cl-lightpurple); background-image:url(../img/top/know/item_bg2.jpg); }
#know ul li:nth-child(2) a .name, #know ul li:nth-child(2) a:after { background-color:var(--cl-lightpurple); }
#know ul li:nth-child(3) a { border-color:var(--cl-lightorange); background-image:url(../img/top/know/item_bg3.jpg); }
#know ul li:nth-child(3) a .name, #know ul li:nth-child(3) a:after { background-color:var(--cl-lightorange); }
#know ul li:nth-child(4) a { border-color:var(--cl-lightgreen); background-image:url(../img/top/know/item_bg4.jpg); }
#know ul li:nth-child(4) a .name, #know ul li:nth-child(4) a:after { background-color:var(--cl-lightgreen) }

/* -- Media Queries -- */

@media all and (max-width:1279px) {

#know { width:90%; margin:0 auto 6.0vw auto; }

}

@media all and (max-width:640px) {

#know { width:100%; margin:0 0 10.0vw 0; }
#know ul li:nth-child(odd) { width:90%; margin:0 10% 6% 0; }
#know ul li:nth-child(even) { width:90%; margin:0 0 6% 10%  }
#know ul li a { font-size:120%; }

}


/* culture
------------------------------------ */

#culture { position:relative; width:544px; margin:0 auto 11.0vw auto; }
#culture:before { position:absolute; display:block; content:""; top:-27.735368956743%; left:-6.15808823529412%; z-index:-1; width:611px; aspect-ratio:1 / 1; background:url(../img/top/culture/txt_circle.png) center center no-repeat; background-size:cover; animation:20s linear infinite rotation; }
@keyframes rotation {
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
#culture p { position:relative; aspect-ratio:816 / 589; }
#culture p::before,
#culture p::after { position:absolute; z-index:10; display:block; content:""; aspect-ratio:532 / 338; background:url(../img/top/culture/cloud.png) center center no-repeat; background-size:cover; animation:floating 1.8s ease-in-out infinite; }
#culture p::before { top:-20%; left:-50%; width:266px; animation-direction:alternate; }
#culture p::after { bottom:-20%; right:-40%; width:223px; animation-direction:alternate-reverse; }
@keyframes floating {
  0% {
    transform:translateY(-10%);
  }
  100% {
    transform:translateY(10%);
  }
}
#culture p a { display:block; position:absolute; top:0; left:0; z-index:0; width:100%; height:100%; background:url(../img/top/culture/monitor.png) center center no-repeat; background-size:cover; text-indent:-9999px; /* hover */ transition:transform 0.2s ease-out; }
@media (hover:hover) { #culture p a:hover { transform:scale(1.02); } }

/* -- Media Queries -- */

@media all and (max-width:800px) {

#culture { width:86%; margin:0 7% 34.0vw 7%; padding-top:10.0vw; }
#culture:before { top:-7.735368956743%; width:112.316176470588%; }
#culture p::before { top:-45%; left:-15%; width:40vw; }
#culture p::after { bottom:-30%; right:-10%; width:30vw; }

}



/* intv
------------------------------------ */

#intv { margin-bottom:4.0vw; }
#intv .ttl { width:245px; margin:0 auto 40px auto; aspect-ratio:490 / 54; background:url(../img/top/intv/ttl.png) center center no-repeat; background-size:cover; text-indent:-9999px; }
#intv-list { display:flex; flex-wrap:wrap; justify-content: center; margin-bottom:30px; }
#intv-list .slick-list li { width:260px; margin:0 5px 40px 5px; /* hover */ transition:transform 0.2s, opacity 0.2s ease-out; }
@media (hover:hover) { #intv-list .slick-list li:hover { transform:translateY(4px); opacity:0.7; } }
#intv-list .slick-list li a { display:block; text-decoration:none; }
#intv-list .slick-list li a dl { display:flex; flex-direction:row-reverse; }
#intv-list .slick-list li a dl dt { position:relative; }
#intv-list .slick-list li a dl dt span { position:absolute; top:0; left:0; transform-origin:top left; transform:rotate(90deg); z-index:-1; white-space:nowrap; padding:0.5em; box-sizing:border-box; border:1px solid #000; border-bottom:none; border-radius:0.5em 0.5em 0 0; font-family:'dotgothic16', sans-serif; font-size:80%; letter-spacing:0.1em; }
#intv-list .slick-list li a dl dd { flex:1; margin-right:1.6em; background-color:#fff; border:#000 1px solid; border-radius:0 0 0.5em 0.5em; }
#intv-list .slick-list li a dl dd .img { display:block; aspect-ratio:16 / 9; }
#intv-list .slick-list li a dl dd .txt { display:block; position: relative; padding:1.0em 1.0em 2.0em 1.0em; font-size:90%; line-height:150%; color:#000; }
#intv-list .slick-list li a dl dd .txt::after { position:absolute; bottom:0.75em; right:0.75em; content:"→"; }
#intv-list .slick-list li.color-1 a dl dt span { background-color:var(--cl-orange); color:#000; }
#intv-list .slick-list li.color-2 a dl dt span { background-color:var(--cl-purple); color:#000; }
#intv-list .slick-list li.color-3 a dl dt span { background-color:var(--cl-tbsblue); color:#fff; }
#intv-list .slick-list li a dl dd .img img { display:block; width:100%; height:100%; object-fit:cover; }
.slick-dots { display:flex; align-items: stretch; transform: skewX(-45deg); }
.slick-dots > li { width:2em; height:0.75em; }
.slick-dots > li button { display: block; margin:0; padding:0; width:100%; height:100%; background-color:#B9CFFF; border-top:#000 1px solid; border-bottom:#000 1px solid; border-left:0; border-right:#000 1px solid; outline:none; appearance: none; text-indent:-9999px; cursor:pointer; }
@media (hover:hover) { .slick-dots > li button:hover { background-color:#fff; } }
.slick-dots > li:first-child button { border-left:#000 1px solid; border-radius:4px 0 0 4px; }
.slick-dots > li:last-child button { border-radius:0 4px 4px 0; }
.slick-dots > li.slick-active { width:4em; }
.slick-dots > li.slick-active button { background-color:#fff; }

#intv-btn { text-align:center; }
#intv-btn a { display:inline-block; margin:auto; padding:1.0em; border-radius:2.0em; background:url(../img/common/bg_spectre.jpg) center center no-repeat; background-size:100% 100%; border:#000 1px solid; font-family:'dotgothic16', sans-serif; color:#000; text-decoration:none; box-shadow:2px 3px 0px rgba(0,0,0,1); /* hover */ transition:transform 0.2s, opacity 0.2s ease-out; }
@media (hover:hover) { #intv-btn a:hover { transform:translateX(4px); opacity:0.7; } }

/* -- Media Queries -- */

@media all and (max-width:800px) {

#intv { margin-bottom:12.0vw; }
#intv-list .slick-list li { width:210px; }

}



/* top banner
------------------------------------ */

#top-banner1 li a,
#top-banner2 li a { display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; /* hover */ transition:transform 0.2s, opacity 0.2s ease-out; }
@media (hover:hover) {
#top-banner1 li a:hover,
#top-banner2 li a:hover { transform:translateX(4px); opacity:0.7; }
}

#top-banner1 { width:800px; margin:0 auto 6.0vw auto; }
#top-banner1 li { width:800px; aspect-ratio:800 / 225; }
#bn-entry a { background-image:url(../img/top/banner/bn_entry.png); }
#bn-job-fes2027 a { background-image:url(../img/top/banner/bn_job-fes2027.jpg); }
#bn-graduate-design a { background-image:url(../img/top/banner/bn_graduate_design.jpg); }

#top-banner2 { display:flex; flex-wrap:wrap; width:910px; margin:0 auto 4.0vw auto; }
#top-banner2 li { width:49%; aspect-ratio:890 / 200; }
#bn-group-rec { margin:0 2% 0 0; }
#bn-group-rec a { background-image:url(../img/top/banner/bn_group_rec.png); }
#bn-oreno a { background-image:url(../img/top/banner/bn_oreno.jpg); }

/* -- Media Queries -- */

@media all and (max-width:979px) {

#top-banner1 { width:90%; margin:0 5% 6.0vw 5%; }
#top-banner1 li { width:100%; }
#top-banner2 { width:90%; margin:0 5% 6.0vw 5%; }

}

@media all and (max-width:640px) {

#top-banner2 li { width:100%; }
#bn-group-rec { margin:0 0 3.0vw 0; }

}