@charset "UTF-8";
/* CSS Document */
/*
	Reset CSS
-----------------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
header, footer, section, aside, nav, article, main {
  display: block;
}
html {
  margin: 0;
  padding: 0;
  font-size: 62.5%;
}
*, *::before, *::after {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  vertical-align: top;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
/* button初期化 */
button {
  display: none;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  font-family: inherit;
  background: none;
  border: none;
  outline: none;
}
button:hover {
  cursor: pointer;
}
ul li, ol li {
  list-style: none;
}
@media print, screen and (min-width:813px) {
  /* iPad背景切れ対策 */
  body {
    min-width: 1200px;
  }
}
/* - - - - - - - - - - - layout  - - - - - - - - - - - */
#main img, #main video, #main object, .fancybox-container img, .fancybox-container video, .fancybox-container object {
  max-width: 100%;
  height: auto;
}
#topicpathArea {
  width: auto !important;
  max-width: 1012px;
  margin: 0 auto;
  font-size: 93.75%;
}
/* - - - - - - - - - - - common  - - - - - - - - - - - */
#main {
  position: relative;
  width: 100%;
  padding: 0 0 1px;
  font-family: 'Noto Sans JP', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  margin: 0;
  border: none;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  letter-spacing: .08em;
  font-feature-settings: "palt"1;
  font-size: 15px;
  text-align: center;
}
.fancybox-container {
  letter-spacing: .08em;
  font-feature-settings: "palt"1;
  font-size: 15px;
}
#main *, .fancybox-container * {
  font-family: 'Noto Sans JP', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
#main a:link, .fancybox-container a:link {
  text-decoration: none;
  -webkit-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  -webkit-tap-highlight-color: #000;
  -webkit-tap-highlight-color: #000;
}
#main a:visited, .fancybox-container a:visited {
  text-decoration: none;
}
#main a:hover, #main a:active, .fancybox-container a:hover, .fancybox-container a:active {
  text-decoration: none;
}
#topicpathArea {
  width: 1012px;
  margin: 0 auto;
}
/*
	common
-----------------------------------------------------------------------------------------------*/
/* 表示切替 */
.switch {
  visibility: hidden;
}
.sp {
  display: none;
}
:root {
  /* color */
  --clrBlack: #000000;
  ;
  --clrBlue: #0050ff;
  --clrYellow: #fff046;
  --clrGlay: #e1ebf6;
  /* font */
  --fEn: 'Poppins', 'Oswald', 'Noto Sans JP', 'Yu Gothic', YuGothic, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
.clrBlue {
  color: var(--clrBlue);
}
/*
	wrapper
-----------------------------------------------------------------------------------------------*/
#wrapper {
  position: relative;
  overflow: hidden;
}
#ctsWrapper {
  position: relative;
}
/* ctsArea */
.ctsArea {
  width: 1200px;
  margin: 0 auto;
  padding: 60px 30px;
}
/*
	kvWrapper
-----------------------------------------------------------------------------------------------*/
#kvWrapper {
  position: relative;
  width: 100%;
}
#kvWrapper::before {
  position: absolute;
  content: "";
  display: block;
  background: url(../img/bg_kv_kumo_L_01.png) no-repeat center center / cover;
  width: 370px;
  height: 400px;
  top: 620px;
  left: 0;
  z-index: 1
}
#kvWrapper::after {
  position: absolute;
  content: "";
  display: block;
  background: url(../img/bg_kv_kumo_L_02.png) no-repeat center center / cover;
  width: 370px;
  height: 400px;
  top: 620px;
  right: 0;
}
/* タイトル */
#kvWrapper .titArea {
  position: relative;
  width: 960px;
  margin: 85px auto;
}
/* タイトル周り＿白グラデ */
#kvWrapper .titArea::before, #kvWrapper .titArea::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  right: 0;
  bottom: 0;
}
#kvWrapper .titArea::before {
  height: 110px;
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 90%);
}
#kvWrapper .titArea::after {
  height: 100%;
  background: rgb(255, 255, 255);
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 85%, rgba(255, 255, 255, 1) 100%);
}
/* 日付ボックス */
#kvWrapper .dataArea {
  width: 400px;
  margin: -200px calc(55% - 600px) 0 auto;
}
/* 応募はこちらボタン */
#reserve_btn {
  position: fixed;
  bottom: 40px;
  right: 15px;
  z-index: 5000;
}
#reserve_btn .btn {
  position: relative;
  display: block;
  width: 290px;
  height: 238px;
}
/*---------- アーカイブはこちら ----------*/
#kvWrapper .archiveArea {
  margin: 0px 0 40px;
}
/* タイトル */
#kvWrapper .archiveArea .tit {
  position: relative;
  width: fit-content;
  background: #000;
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--clrBlue);
  line-height: 100%;
  margin: 0 auto 25px auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 吹き出し */
#kvWrapper .archiveArea .tit::before, #kvWrapper .archiveArea .tit::after {
  position: absolute;
  content: "";
  width: 2px;
  height: 35px;
  background-color: #0000ff;
}
#kvWrapper .archiveArea .tit::before {
  left: -20px;
  transform: rotate(-25deg);
}
#kvWrapper .archiveArea .tit::after {
  right: -20px;
  transform: rotate(25deg);
}
/* 画像エリア */
#kvWrapper .archiveArea .movieArea {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(50deg, #005fb2 0%, #297aeb 25%, #68caec 60%, #3c9fff 80%);
  width: 600px;
  height: 355px;
  margin: 0 auto;
}
#kvWrapper .archiveArea .movieArea .youtube {
  width: 560px;
}
/* 注釈 */
#kvWrapper .archiveArea .note {
  font-size: 1.3rem;
  margin-top: 30px;
}
/* ワクティ01_02共通 */
#reserve_btn .btn::after, .companyList::after {
  position: absolute;
  content: "";
  display: block;
  width: 160px;
  height: 180px;
}
/* ワクティ01 */
#reserve_btn .btn::after {
  background: url(../img/il_wakty01.png) no-repeat center center / cover;
  top: -100px;
  right: 0;
}
#reserve_btn .btn img {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.3s;
}
@media screen and (min-width:813px) {
  #reserve_btn .btn:hover img:nth-of-type(1) {
    opacity: 0;
    top: 6px;
  }
  #reserve_btn .btn:hover img:nth-of-type(2) {
    top: 6px;
  }
}
/* kvアニメーション
==================================== */
/* 日付 */
#kvWrapper .dataArea {
  opacity: 0;
  animation: anmDon 0.6s 1 normal 2.0s ease-out forwards;
}
/* アーカイブ動画 */
#kvWrapper .archiveArea {
  opacity: 0;
  animation: anmDon 0.6s 1 normal 2.4s ease-out forwards;
}
/* 応募はこちら！ボタン */
#reserve_btn {
  opacity: 0;
  animation:
    anmFadeIn 1.0s ease 1.2s forwards, anmUpDownLoop 4.4s infinite normal 1.4s ease forwards;
}
/* 雲 左側 */
#kvWrapper::before, #kvWrapper::after {
  opacity: 0;
  animation:
    anmFadeIn 1.0s ease 1.4s forwards, anmUpDownLoop 6.4s infinite normal 1.4s ease forwards;
  z-index: -1
}
/*
	共通パーツ
-----------------------------------------------------------------------------------------------*/
/* タイトル */
#main .titBase {
  position: relative;
  width: fit-content;
  margin: -20px auto 140px;
}
@media screen and (max-width:812px) {
  #main .titBasee_campaign {
    position: relative;
    width: fit-content;
    margin: 20px auto 140px;
  }
}
#main .titBase::after, #main .titBase::before {
  position: absolute;
  content: "";
  display: block;
}
#main .titBase .tit {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#main .titBase .tit img {
  width: 480px;
}
#main .titBase .tit span {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 100%;
  margin-top: -20px;
}
/* タイトル下説明 */
.txtBaseSub {
  font-size: 2.2rem;
  font-weight: 600;
}
#main .titBase .tit + .txtBaseSub {
  margin-top: 20px;
}
/* 雲ベース */
#main .kumoBase {
  position: relative;
  background: url(../img/bg_base.png) no-repeat center top 100px / cover;
  width: 100%;
  /*	height: 100%;*/
  z-index: 0;
}
/* 雲上下部 */
#main .kumoBase::before, #main .kumoBase::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  padding-top: 36%;
  z-index: -1;
}
/* 雲上部 */
#main .kumoBase::before {
  background: url(../img/bg_kumo_base01.png) no-repeat center top 40px / cover;
  top: 40px;
}
/* 雲下部 */
#main .kumoBase::after {
  background: url(../img/bg_kumo_base02.png) no-repeat center bottom -0px / cover;
  bottom: -80px;
}
/* 雲左右部 */
#main .kumoBase .ctsArea::before, #main .kumoBase .ctsArea::after {
  position: absolute;
  content: "";
  display: block;
  padding-top: 33.333%;
  z-index: -2;
}
/* 雲左部 */
#main .kumoBase .campaignArea::before {
  background: url(../img/bg_kumo_L_02.png) no-repeat center center / cover;
  width: 450px;
  height: 450px;
  top: 38%;
  left: -130px;
}
/* 雲左部 */
#main .kumoBase .topicsArea::before {
  background: url(../img/bg_kumo_L_01.png) no-repeat center center / cover;
  width: 450px;
  height: 450px;
  top: 25%;
  left: -110px;
}
/* 雲左部 */
#main .kumoBase .companyArea::before {
  background: unset
}
/* 雲左部 */
#main .kumoBase .eventArea::before {
  background: unset
}
#main .kumoBase .eventArea::after {
  background: unset
}
/* 雲右部 */
#main .kumoBase .topicsArea::after {
  background: url(../img/bg_kumo_R_01.png) no-repeat center center / cover;
  width: 450px;
  height: 450px;
  bottom: 53%;
  right: -40px;
}
/* 雲右部 */
#main .kumoBase .campaignArea::after {
  background: url(../img/bg_kumo_R_02.png) no-repeat center center / cover;
  width: 450px;
  height: 450px;
  bottom: 30%;
  right: -100px;
}
#main .kumoBase .campaignDecoration::after {
  background: url(../img/bg_circle_04.png) no-repeat center center / cover;
  width: 100px;
  height: 100px;
  bottom: -220%;
  left: -360px;
}
#main .kumoBase .campaignDecoration::before {
  background: url(../img/bg_circle_05.png) no-repeat center center / cover;
  width: 90px;
  height: 90px;
  bottom: -115%;
  right: -320px;
}
/* coming soon */
#main .comingSoon .titBase {
  margin-bottom: -90px;
}
#main .comingSoon .ctsArea .comingSoonBox {
  width: 1000px;
  height: 630px;
  margin: 0 auto;
}
/* 黄色マーカーライン */
.line {
  background: linear-gradient(transparent 70%, #ffff00 0%);
  display: inline;
}
/* アニメーション */
/* 雲左部 */
#main .kumoBase .ctsArea::before {
  animation: anmUpDownLoop 5.4s infinite normal 1.0s ease forwards;
}
#main .kumoBase .campaignDecoration::before {
  animation: anmUpDownLoop 7.4s infinite normal 1.0s ease forwards;
}
/* 雲右部 */
#main .kumoBase .ctsArea::after, #main .kumoBase .topicsDecoration::after, #main .kumoBase .campaignDecoration::after {
  animation: anmUpDownLoop 6.4s infinite normal 1.0s ease forwards;
}
.decoration_01::after {
  position: absolute;
  content: "";
  display: block;
  padding-top: 33.333%;
  z-index: 1;
  background: url(../img/bg_kumo_R_02.png) no-repeat center center / cover;
  width: 450px;
  height: 450px;
  bottom: 65%;
  right: -100px;
  animation: anmUpDownLoop 6.4s infinite normal 1.0s ease forwards;
}
.decoration_01::before {
  position: absolute;
  content: "";
  display: block;
  background: url(../img/bg_circle_05.png) no-repeat center center / cover;
  width: 90px;
  height: 90px;
  bottom: 51%;
  right: -10px;
  animation: anmUpDownLoop 7.4s infinite normal 1.0s ease forwards;
}
.decoration_02::after {
  position: absolute;
  content: "";
  display: block;
  background: url(../img/bg_circle_04.png) no-repeat center center / cover;
  width: 100px;
  height: 100px;
  bottom: 16%;
  left: 20px;
  animation: anmUpDownLoop 6.4s infinite normal 1.0s ease forwards;
}
@media screen and (min-width:1921px) {
  /* 雲左部 */
  #main .kumoBase .campaignArea::before {
    background: unset
  }
  /* 雲左部 */
  #main .kumoBase .topicsArea::before {
    background: unset
  }
  /* 雲左部 */
  #main .kumoBase .companyArea::before {
    background: unset
  }
  /* 雲左部 */
  #main .kumoBase .eventArea::before {
    background: unset
  }
  #main .kumoBase .eventArea::after {
    background: unset
  }
  /* 雲右部 */
  #main .kumoBase .topicsArea::after {
    background: unset
  }
  /* 雲右部 */
  #main .kumoBase .campaignArea::after {
    background: unset
  }
  #main .kumoBase .campaignDecoration::after {
    background: unset
  }
  #main .kumoBase .campaignDecoration::before {
    background: unset
  }
  .decoration_01::after {
    background: unset
  }
  .decoration_01::before {
    background: unset
  }
  .decoration_02::after {
    background: unset
  }
}
/*
	message
-----------------------------------------------------------------------------------------------*/
#messageWrapper {
  position: relative;
  margin-top: -20px;
}
/* 背景抜き雲右左 */
#messageWrapper::before, #messageWrapper::after {
  position: absolute;
  content: "";
  display: block;
  z-index: -50;
}
#messageWrapper::before {
  background: url(../img/bg_message_kumo_L.png) no-repeat center center / cover;
  width: 360px;
  height: 1200px;
  top: 4%;
  left: 0;
}
#messageWrapper::after {
  background: url(../img/bg_message_kumo_R.png) no-repeat center center / cover;
  width: 360px;
  height: 1200px;
  top: 4%;
  right: 0;
}
#messageWrapper .ctsArea {
  position: relative;
  z-index: 1;
}
#messageWrapper .ctsArea::after {
  position: absolute;
  content: "";
  display: block;
  z-index: -50;
}
/* キャッチメイン */
#messageWrapper .catch .main {
  width: fit-content;
  font-weight: 700;
  font-size: 4.0rem;
  line-height: 140%;
  color: #0000ff;
  margin: 0 auto;
}
#messageWrapper .catch .main .underLine {
  display: inline-block;
}
#messageWrapper .catch .main .underLine::after {
  position: relative;
  content: "";
  display: block;
  width: 100%;
  height: 13px;
  background-color: #ffff00;
  bottom: 17px;
  left: 0;
  z-index: -1;
}
/* firefox専用 */
.js_isFirefox #messageWrapper .catch .main .underLine {
  position: relative;
}
.js_isFirefox #messageWrapper .catch .main .underLine::after {
  position: absolute;
  bottom: 0;
}
/* キャッチサブ */
#messageWrapper .catch .sub {
  position: relative;
  font-weight: 600;
  margin-top: 30px;
}
#messageWrapper .catch .sub .txt {
  font-size: 2.2rem;
}
#messageWrapper .catch .sub .nameBox {
  display: block;
  /*	background: linear-gradient(50deg, #005fb2 0%, #297aeb 25%, #68caec 60%, #3c9fff 80%);*/
  background: #0000ff;
  color: #ffffff;
  font-size: 4.2rem;
  line-height: 125%;
  width: 480px;
  height: 60px;
  margin: 10px auto 0;
}
#messageWrapper .catch .sub .name {
  color: #ffff00;
  font-size: 4.0rem;
}
#messageWrapper .catch .sub .ugagin {
  font-size: 2.2rem;
}
/* リード文 */
#messageWrapper .lead {
  margin-top: 25px;
}
#messageWrapper .lead .txt {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 200%;
}
/* テキストボックス */
#messageWrapper .lead .txtBox {
  position: relative;
  width: fit-content;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 160%;
  padding: 15px 35px;
  margin: 20px auto 0;
  color: #0000ff;
  border-top: 2px solid #0000ff;
  border-bottom: 2px solid #0000ff
}
#messageWrapper .lead .txtBox::before, #messageWrapper .lead .txtBox::after {
  position: absolute;
  content: "";
  display: block;
  background-color: #0000ff;
  width: 2px;
  height: calc(100% - 10px);
}
#messageWrapper .lead .txtBox::before {
  bottom: 0;
  left: 0;
}
#messageWrapper .lead .txtBox::after {
  top: 0;
  right: 0;
}
/* TBS田村真子アナウンサー！ */
#messageWrapper .phBox {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
#messageWrapper .phBox img {
  position: absolute;
}
#messageWrapper .phBox img:nth-of-type(1) {
  top: -60%;
  right: 7%;
  width: 300px;
}
#messageWrapper .phBox img:nth-of-type(2) {
  top: 240%;
  right: 2%;
}
/* ポイントリスト */
#messageWrapper .pointlist {
  display: flex;
  justify-content: space-between;
  width: 900px;
  margin: 50px auto 0;
  gap: 30px;
}
#messageWrapper .pointlist li {
  position: relative;
  background-color: var(--clrGlay);
  width: 280px;
  height: 280px;
  border-radius: 50%;
  padding-top: 50px;
}
#messageWrapper .pointlist li::before {
  position: absolute;
  content: "";
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--clrGlay);
  width: 45px;
  height: 45px;
  font-family: var(--fEn);
  font-size: 2.3rem;
  color: #ffffff;
  top: 15px;
  left: 20px;
  border-radius: 50%;
}
#messageWrapper .pointlist li:nth-of-type(1)::before {
  content: "1";
}
#messageWrapper .pointlist li:nth-of-type(2)::before {
  content: "2";
}
#messageWrapper .pointlist li:nth-of-type(3)::before {
  content: "3";
}
#messageWrapper .pointlist .ico img {
  width: 120px
}
#messageWrapper .pointlist .txt {
  font-size: 1.6rem;
  /*	margin-top: 20px;*/
}
#messageWrapper .pointlist .txt span {
  font-size: 1.8rem;
  font-weight: 600;
  color: #0000ff;
}
/* 〇〇はこちら！ボタン 共通 */
.btnBox {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 700px;
  height: 100px;
  margin: 50px auto 50px;
  cursor: pointer;
  color: #fff;
  font-size: 54px;
  font-weight: bold;
  border-radius: 12px;
  background: linear-gradient(50deg, #3278ff 0%, #78b4ff 50%, #3278ff 80%);
  transition: opacity 0.8s;
}
.btnBox:hover {
  opacity: 0.7;
}
.btnBox img {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.3s;
}
@media screen and (min-width:813px) {
  .btnBox:hover img:nth-of-type(1) {
    opacity: 0;
    top: 6px;
  }
  .btnBox:hover img:nth-of-type(2) {
    top: 6px;
  }
}
/* アニメーション */
@media screen and (min-width:813px) {
  #messageWrapper .pointlist li.jsAnmStart:nth-of-type(2) {
    animation: anmDon 0.6s 1 normal 1.0s ease-out forwards;
  }
  #messageWrapper .pointlist li.jsAnmStart:nth-of-type(3) {
    animation: anmDon 0.6s 1 normal 1.2s ease-out forwards;
  }
}
/*----- ここからモーダル用 -----*/
/* オーバーレイ背景 */
.overlay {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: linear-gradient(357deg, rgba(60, 110, 230, 1) 0%, rgba(0, 170, 235, 1) 70%);
  top: 0;
  left: 0;
  opacity: 0.95;
  z-index: 36;
}
/* 表示領域外へはスクロールさせない */
.no_scroll {
  overflow: hidden;
}
/* モーダルウィンドウ */
.modal-window {
  position: fixed;
  display: none;
  width: 800px;
  background-color: #ffffff;
  top: 50%;
  left: 50%;
  padding: 50px 60px 30px;
  border-radius: 30px;
  transform: translate(-50%, -50%);
  z-index: 999;
}
/* テキスト */
.modal-window .txt {
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 180%;
}
/* 閉じるボタン */
#main .button-close {
  width: fit-content;
  color: #cccccc;
  font-family: var(--fEn);
  font-weight: 500;
  margin: 40px auto 0;
  cursor: pointer;
}
/*---------	スマホ ---------*/
@media screen and (max-width:812px) {
  /* 表示領域外へはスクロールさせない */
  /* モーダルウィンドウ */
  .modal-window {
    width: 90%;
    padding: 30px 15px 20px;
    border-radius: 20px;
  }
  /* テキスト */
  .modal-window .txt {
    font-size: 1.6rem;
    line-height: 160%;
  }
  /* 閉じるボタン */
  #main .button-close {
    margin-top: 30px;
  }
}
/*
	TOPICS
-----------------------------------------------------------------------------------------------*/
#main #topicsWrapper.kumoBase {
  background: url(../img/bg_base_02.png) no-repeat center top 100px / cover;
  margin-top: -10px;
}
/* リスト */
#topicsWrapper .topicsList {
  position: relative;
  width: 1140px;
  height: 1340px;
  margin-top: 200px;
}
#main #topicsWrapper .titBase {
  margin-bottom: -140px;
}
#topicsWrapper .topicsList li {
  position: absolute;
  margin: auto;
  width: 680px
}
@media screen and (min-width:813px) {
  /* 01_TBSグループ8社“社員たち”のメッセージ */
  #topicsWrapper .topicsList li:nth-of-type(1) {
    left: 50px;
    top: -90px;
  }
  /* “02_映画『ラストマイル』ヒットメーカー 塚原あゆ子監督スペシャルインタビュー */
  #topicsWrapper .topicsList li:nth-of-type(2) {
    right: -30px;
    top: -110px;
  }
  /* 03_生放送直前！『オールスター感謝祭』の裏側見せちゃいます！ */
  #topicsWrapper .topicsList li:nth-of-type(3) {
    right: -40px;
    top: 220px;
    z-index: 3;
  }
  /* 04_採用スケジュール */
  #topicsWrapper .topicsList li:nth-of-type(4) {
    right: -80px;
    top: 550px;
  }
  /* 05_BS-TBS あなたの「好き」を実現できる放送局 */
  #topicsWrapper .topicsList li:nth-of-type(5) {
    left: -130px;
    top: 580px;
    z-index: 4;
  }
  /* 06_海外支局と中継ニュース最前線で戦う記者の醍醐味 */
  #topicsWrapper .topicsList li:nth-of-type(6) {
    left: 90px;
    top: 500px;
    z-index: 3;
  }
  /* 07_キー局唯一「ラジオ&テレビ兼営局」の魅力とは？ */
  #topicsWrapper .topicsList li:nth-of-type(7) {
    left: -3%;
    top: 210px;
    z-index: 4;
  }
  /* 08_質問コーナー */
  #topicsWrapper .topicsList li:nth-of-type(8) {
    right: -110px;
    top: 910px;
    z-index: 3;
    width: 480px;
  }
  /* 09_TBS『ラヴィット！』×サボリーノ　商品開発秘話 */
  #topicsWrapper .topicsList li:nth-of-type(9) {
    left: -135px;
    top: 790px;
    z-index: 2;
  }
  /* 10_やる気スイッチグループ“学習塾を超えてさらなる飛躍へ */
  #topicsWrapper .topicsList li:nth-of-type(10) {
    right: 180px;
    top: 820px;
    z-index: 2;
  }
}
/* アニメーション */
@media screen and (min-width:813px) {
  #topicsWrapper .topicsList li.jsAnmStart:nth-of-type(3), #topicsWrapper .topicsList li.jsAnmStart:nth-of-type(5) {
    animation: anmDon 0.6s 1 normal 1.0s ease-out forwards;
  }
  #topicsWrapper .topicsList li.jsAnmStart:nth-of-type(2) {
    animation: anmDon 0.6s 1 normal 1.2s ease-out forwards;
  }
}
/* 各社人事への質問はこちら！ボタン */
#topicsWrapper .btnBox {
  margin-top: -100px;
  margin-bottom: 80px;
}
/*
	プレゼントキャンペーン
-----------------------------------------------------------------------------------------------*/
/* 雲調整 */
#main #campaignWrapper.kumoBase::before {
  top: 50px;
}
/* カミングスーンのみ適用 */
#campaignWrapper.comingSoon {
  margin-top: -30px;
}
#main #campaignWrapper.kumoBase {
  background: url(../img/bg_base_03.png) no-repeat center top 100px / cover;
  margin-top: -10px;
}
/* リスト */
#campaignWrapper .campaignList {
  position: relative;
  width: 1140px;
  height: 1600px;
  margin-top: 230px;
}
#main #campaignWrapper.kumoBase .titBase {
  margin-bottom: -140px;
}
#campaignWrapper .campaignList li {
  position: absolute;
  margin: auto;
  width: 630px
}
#campaignWrapper .campaignList li:nth-of-type(1) {
  right: 50px;
  top: -120px;
  z-index: 0;
}
#campaignWrapper .campaignList li:nth-of-type(2) {
  left: 0px;
  top: -110px;
}
#campaignWrapper .campaignList li:nth-of-type(3) {
  right: 210px;
  top: 200px;
  z-index: -1;
}
#campaignWrapper .campaignList li:nth-of-type(4) {
  left: -100px;
  top: 200px;
  z-index: 1;
}
#campaignWrapper .campaignList li:nth-of-type(5) {
  left: -110px;
  top: 850px;
  z-index: 0;
  width: 600px;
}
#campaignWrapper .campaignList li:nth-of-type(6) {
  left: 660px;
  top: 140px;
  z-index: -2;
}
#campaignWrapper .campaignList li:nth-of-type(7) {
  left: 230px;
  top: 820px;
  z-index: -2;
  width: 700px;
}
#campaignWrapper .campaignList li:nth-of-type(8) {
  right: -130px;
  top: 830px;
  z-index: -2;
  width: 600px;
}
#campaignWrapper .campaignList li:nth-of-type(9) {
  left: -0px;
  top: 1110px;
  z-index: -3;
}
#campaignWrapper .campaignList li:nth-of-type(10) {
  left: 450px;
  top: 1070px;
  z-index: -3;
  width: 700px;
}
#campaignWrapper .campaignList li:nth-of-type(11) {
  left: -10px;
  top: 500px;
  z-index: -2;
  width: 650px;
}
#campaignWrapper .campaignList li:nth-of-type(12) {
  left: 470px;
  top: 490px;
  z-index: -2;
  width: 680px;
}
/* 各社人事への質問はこちら！ボタン */
#campaignWrapper .btnBox {
  margin-top: -100px;
  margin-bottom: 120px;
}
/*
	出展企業情報
-----------------------------------------------------------------------------------------------*/
#companyWrapper.comingsoon {
  margin-top: -80px;
}
#companyWrapper .ctsArea {
  width: 1060px;
  padding-bottom: 180px;
}
/* 出展企業リスト */
.companyList {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
/* ワクティ02 */
/*
.companyList::after {
  background: url(../img/il_wakty02.png) no-repeat center center / cover;
  bottom: 270px;
  right: -135px;
  animation: anmUpDownLoop 5.4s infinite normal 1.0s ease forwards;
}
*/
.companyList li {
  position: relative;
  background-color: #ffffff;
  width: calc((100% - 28px)/3);
  padding: 30px;
  border-radius: 15px;
  box-shadow: 6px 6px 10px rgb(0 0 153 / 40%);
}
/* ロゴ */
.companyList li .logo {
  width: 264px;
  margin: 0 auto;
}
.companyList li .txt {
  font-size: 1.5rem;
  line-height: 170%;
  text-align: justify;
  border-top: 1px solid #f2f2f2;
  padding-top: 25px;
}
/*
	昨年のイベントの様子
-----------------------------------------------------------------------------------------------*/
#main #eventWrapper.kumoBase {
  position: relative;
  background: url(../img/bg_base_04.png) no-repeat center top 100px / cover;
  width: 100%;
  z-index: 0;
}
#eventWrapper .ctsArea {
  width: 1060px;
  padding-bottom: 180px;
}
.youtube-vertical {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding-top: 177.78%;
}
.youtube-vertical iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#eventWrapper .youtube {
  width: 100%;
  max-width: 1080px;
  margin: 3em 0 3em 1.3em;
  background-image: url("../img/youtube.png");
  aspect-ratio: 11/2;
}
#eventWrapper .youtube {
  display: block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
#eventWrapper .youtube:hover {
  opacity: .7;
}
/* 出展企業リスト */
.eventList {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.eventList li {
  position: relative;
  width: calc((100% - 28px)/3);
  padding: 30px;
}
/* ロゴ */
.eventList li .logo {
  width: 264px;
  margin: 0 auto;
}
.eventList li .txt {
  font-size: 1.5rem;
  line-height: 170%;
  text-align: justify;
  border-top: 1px solid #f2f2f2;
  padding-top: 25px;
}
.event_tit::before {
  content: "";
  display: inline-block;
  background: url(../img/il_wakty03.png) no-repeat center center / cover;
  animation: anmUpDownLoop 5.4s infinite normal 1.0s ease forwards;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  width: 153px;
  height: 134px;
  top: -100px;
  left: -120px;
}
.link::after {
  background: url(../img/il_wakty02.png) no-repeat center center / cover;
  bottom: 50px;
  right: -135px;
  animation: anmUpDownLoop 5.4s infinite normal 1.0s ease forwards;
}
/* ワクティ02 */
.link::after {
  right: 45%;
}
.link::after {
  position: absolute;
  content: "";
  display: block;
  width: 160px;
  height: 180px;
}
#eventWrapper .btnBox {
  text-align: center;
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  margin: 0;
  z-index: 9999;
}
/*
	フッター
-----------------------------------------------------------------------------------------------*/
#main footer .copy {
  position: relative;
  font-family: var(--fEn);
  font-size: 1.2rem;
  padding-bottom: 40px;
  letter-spacing: 0.06em;
}
footer {
  background: #3faaec;
}
/*
	ここからスマホ
-----------------------------------------------------------------------------------------------*/
@media screen and (max-width:812px) {
  /* - - - - - - - - - - - common  - - - - - - - - - - - */
  body {
    min-width: auto;
  }
  #main {
    position: relative;
    width: 100%;
    padding: 0 0 1px;
    font-size: 1.4rem;
  }
  #topicpathArea {
    display: none;
  }
  /* - - - - - - - - - - - common  - - - - - - - - - - - */
  img {
    width: 100%;
  }
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  br.sp {
    display: inline-block;
  }
  /*
		kvWrapper
	-----------------------------------------------------------------------------------------------*/
  #kvWrapper::before {
    width: 200px;
    height: 200px;
    top: 300px;
	z-index: -1
  }
  #kvWrapper::after {
    width: 120px;
    height: 120px;
    top: 370px;
	z-index: -1
  }
  /* タイトル */
  #kvWrapper .titArea {
    width: 100%;
    margin: 50px auto;
  } /* タイトル周り＿白グラデ */
  #kvWrapper .titArea::before {
    height: 40%;
  }
  /* 日付ボックス */
  #kvWrapper .dataArea {
    width: 55%;
    margin: -27% calc(48% - 50%) 0 auto;
  }
  /* 応募はこちらボタン */
  #reserve_btn {
    bottom: 35px;
    right: 10px;
  }
  #reserve_btn .btn {
    width: 140px;
    height: 115px;
  }
  /*---------- アーカイブはこちら ----------*/
  #kvWrapper .archiveArea {
    margin: 30px 40px 25px;
  }
  /* タイトル */
  #kvWrapper .archiveArea .tit {
    font-size: 2.0rem;
    margin-bottom: 20px;
  }
  /* 吹き出し */
  #kvWrapper .archiveArea .tit::before, #kvWrapper .archiveArea .tit::after {
    width: 2px;
    height: 22px;
  }
  #kvWrapper .archiveArea .tit::before {
    left: -15px;
  }
  #kvWrapper .archiveArea .tit::after {
    right: -15px;
  }
  /* 画像エリア */
  #kvWrapper .archiveArea .movieArea {
    width: 100%;
    max-width: 590px;
    height: 100%;
    padding: 15px;
  }
  #kvWrapper .archiveArea .movieArea .youtube {
    width: 100%;
    height: 100%;
  }
  /* ワクティ01_02共通 */
  #reserve_btn .btn::after, .companyList::after {
    width: 80px;
    height: 90px;
  }
  /* ワクティ01 */
  #reserve_btn .btn::after {
    top: -56px;
  }
  /*
		共通パーツ
	-----------------------------------------------------------------------------------------------*/
  #ctsWrapper {
    overflow: hidden;
  }
  /* ctsArea */
  .ctsArea {
    width: 100%;
    max-width: 500px;
    padding: 30px 15px;
  }
  /* タイトル */
  #main .titBase {
    margin-bottom: 70px;
  }
  #main .titBase .tit img {
    width: 80%;
    height: auto;
  }
  #main .titBase .tit span {
    font-size: 1.4rem;
    margin-top: -10px;
  }
  /* タイトル下説明 */
  .txtBaseSub {
    font-size: 1.6rem;
  }
  #main .titBase .tit + .txtBaseSub {
    margin-top: 15px;
  }
  /* 雲上下部 */
  #main .kumoBase::before, #main .kumoBase::after {
    padding-top: 28%;
  }
  /* 雲上部 */
  #main .kumoBase_topicsSp::before {
    background: url(../img/bg_kumo_base03_sp.png) no-repeat center top / cover;
    top: 50px;
  }
  /* 雲下部 */
  #main .kumoBase_topicsSp::after {
    background: url(../img/bg_kumo_base02_sp.png) no-repeat center bottom / cover;
    bottom: -40px;
  }
  /* 雲上部 */
  #main .kumoBase_topicsSp_up::before {
    background: url(../img/bg_kumo_base03_sp.png) no-repeat center top / cover;
    top: 50px;
  }
  /* 雲下部 */
  #main .kumoBase_topicsSp_up::after {
    background: unset
  }
  /* 雲上部 */
  #main .kumoBase_campaignSp::before {
    background: url(../img/bg_kumo_base01_sp.png) no-repeat center top / cover;
    top: 50px;
  }
  /* 雲下部 */
  #main .kumoBase_campaignSp::after {
    background: url(../img/bg_kumo_base02_sp.png) no-repeat center bottom / cover;
    bottom: -40px;
  }
  /* 雲上部 */
  #main .kumoBase_companySp::before {
    background: url(../img/bg_kumo_base01_sp.png) no-repeat center top / cover;
    top: 40px;
  }
  /* 雲下部 */
  #main .kumoBase_companySp::after {
    background: url(../img/bg_kumo_base02_sp.png) no-repeat center bottom / cover;
    bottom: -40px;
  }
  /* 雲上部 */
  #main .kumoBase_eventSp::before {
    background: url(../img/bg_kumo_base01_sp.png) no-repeat center top / cover;
    top: 40px;
  }
  /* 雲下部 */
  #main .kumoBase_eventSp::after {
    background: url(../img/bg_kumo_base02_sp.png) no-repeat center bottom / cover;
    bottom: -40px;
  }
  /* 雲左右部 */
  /* 雲左部 */
  #main .kumoBase_topicsSp .ctsArea::before {
    width: 280px;
    height: 220px;
    top: 64%;
    left: -70px;
  }
  #main .kumoBase_campaignSp .ctsArea::before {
    width: 260px;
    height: 220px;
    top: 40%;
    left: -69px;
  }
  /* 雲右部 */
  #main .kumoBase .ctsArea::after {
    display: none;
    width: 120px;
    height: 170px;
    bottom: 12%;
  }
  #main .kumoBase .topicsDecoration::after {
    background: url(../img/bg_circle_01.png) no-repeat center center / cover;
    width: 60px;
    height: 50px;
    bottom: -310%;
    left: -30px;
  }
  #main .kumoBase .campaignDecoration::before {
    background: url(../img/bg_circle_03.png) no-repeat center center / cover;
    width: 70px;
    height: 70px;
    bottom: -900%;
    right: -40px;
  }
  #main .kumoBase .campaignDecoration::after {
    background: url(../img/bg_circle_02.png) no-repeat center center / cover;
    width: 60px;
    height: 50px;
    bottom: -480%;
    left: -40px;
  }
  /* coming soon */
  #main .comingSoon .ctsArea .comingSoonBox {
    width: 100%;
    height: 100%;
    margin: 40px auto;
  }
  #main #topicsWrapper.kumoBase {
    background: url(../img/bg_base_02_sp.png) no-repeat center top 100px / cover;
    margin-top: -10px;
  }
  #main #campaignWrapper.kumoBase {
    background: url(../img/bg_base_03_sp.png) no-repeat center top 100px / cover;
    margin-top: -10px;
  }
  #main #eventWrapper.kumoBase {
    background: url(../img/bg_base_04_sp.png) no-repeat center top 100px / cover;
    margin-top: -10px;
  }
  #main .kumoBase {
    position: relative;
    background: url(../img/bg_base_02_sp.png) no-repeat center top 100px / cover;
    width: 100%;
    z-index: 0;
  }
  .decoration_01::after {
    position: absolute;
    content: "";
    display: block;
    padding-top: 33.333%;
    z-index: -1;
    background: url(../img/bg_kumo_R_02.png) no-repeat center center / cover;
    width: 250px;
    height: 250px;
    bottom: 82.5%;
    right: -60px;
    animation: anmUpDownLoop 6.4s infinite normal 1.0s ease forwards;
  }
  .decoration_01::before {
    position: absolute;
    content: "";
    display: block;
    background: url(../img/bg_circle_05.png) no-repeat center center / cover;
    width: 60px;
    height: 60px;
    bottom: 74%;
    right: -20px;
    animation: anmUpDownLoop 7.4s infinite normal 1.0s ease forwards;
  }
  .decoration_02::after {
    position: absolute;
    content: "";
    display: block;
    background: url(../img/bg_circle_04.png) no-repeat center center / cover;
    width: 100px;
    height: 100px;
    bottom: 21%;
    left: -35px;
    animation: anmUpDownLoop 6.4s infinite normal 1.0s ease forwards;
  }
  .decoration_03::after {
    position: absolute;
    content: "";
    display: block;
    padding-top: 33.333%;
    z-index: 1;
    background: url(../img/bg_kumo_R_02.png) no-repeat center center / cover;
    width: 250px;
    height: 250px;
    bottom: 55%;
    right: -40px;
    animation: anmUpDownLoop 6.4s infinite normal 1.0s ease forwards;
  }
  .decoration_03::before {
    position: absolute;
    content: "";
    display: block;
    padding-top: 33.333%;
    z-index: 1;
    background: url(../img/bg_kumo_R_02.png) no-repeat center center / cover;
    width: 250px;
    height: 250px;
    bottom: 10%;
    right: -40px;
    animation: anmUpDownLoop 6.4s infinite normal 1.0s ease forwards;
  }
  #main .kumoBase .eventArea::before {
    position: absolute;
    content: "";
    display: block;
    background: url(../img/bg_kumo_L_02.png) no-repeat center center / cover;
    width: 260px;
    height: 220px;
    top: 30%;
    left: -55px;
  }
  #main .kumoBase .eventArea::after {
    position: absolute;
    content: "";
    display: block;
    padding-top: 33.333%;
    z-index: 1;
    background: url(../img/bg_kumo_R_02.png) no-repeat center center / cover;
    width: 200px;
    height: 200px;
    bottom: 38%;
    right: -30px;
    animation: anmUpDownLoop 6.4s infinite normal 1.0s ease forwards;
  }
  /*
		message
	-----------------------------------------------------------------------------------------------*/
  #messageWrapper {
    margin-top: -10px;
  }
  /* 背景抜き雲右左 */
  #messageWrapper::before {
    width: 150px;
    height: 360px;
    top: 0;
  }
  #messageWrapper::before {
    background: url(../img/bg_message_kumo_L_sp.png) no-repeat center center / cover;
    top: 6%;
    left: 0;
  }
  #messageWrapper::after {
    background: url(../img/bg_message_kumo_R_sp_02.png) no-repeat center center / cover;
    width: 360px;
    height: 1200px;
    top: -6%;
    right: 0;
  }
  #messageWrapper::after {
    width: 150px;
    height: 256px;
    top: 55%;
  }
  #messageWrapper .ctsArea::after {
    background: url(../img/bg_message_kumo_R_sp_01.png) no-repeat center center / cover;
    top: 28%;
    width: 140px;
    height: 256px;
    right: 0;
  }
  /* キャッチメイン */
  #messageWrapper .catch .main {
    font-size: 2.2rem;
    line-height: 120%;
  }
  #messageWrapper .catch .main .underLine::after {
    height: 7px;
    bottom: 10px;
  }
  /* キャッチサブ */
  #messageWrapper .catch .sub {
    width: fit-content;
    margin: 30px auto 0 calc(50% - 160px);
  }
  #messageWrapper .catch .sub .txt {
    font-size: 1.6rem;
    line-height: 140%;
  }
  #messageWrapper .catch .sub .nameBox {
    font-size: 2.6rem;
    line-height: 110%;
    width: fit-content;
    height: auto;
    padding: 10px 20px;
  }
  #messageWrapper .catch .sub .name {
    font-size: 2.4rem;
  }
  #messageWrapper .catch .sub .ugagin {
    font-size: 1.6rem;
    vertical-align: 0.2em;
  }
  /* リード文 */
  #messageWrapper .lead .txt {
    font-size: 1.5rem;
    line-height: 180%;
  }
  /* テキストボックス */
  #messageWrapper .lead .txtBox {
    font-size: 1.5rem;
    line-height: 150%;
    padding: 15px 30px
  }
  /* TBS田村真子アナウンサー！ */
  #messageWrapper .phBox img:nth-of-type(1) {
    width: 80%;
    top: -40%;
    right: -70%;
  }
  #messageWrapper .phBox img:nth-of-type(2) {
    width: 80%;
    top: 82%;
    right: -85%;
  }
  /* ポイントリスト */
  #messageWrapper .pointlist {
    flex-direction: column;
    width: 345px;
    margin: 30px auto 0;
    gap: initial;
  }
  #messageWrapper .pointlist li {
    width: 240px;
    height: 240px;
    padding-top: 45px;
    margin-top: -70px;
  }
  #messageWrapper .pointlist01 {
    z-index: 3;
  }
  #messageWrapper .pointlist02 {
    z-index: 2;
  }
  #messageWrapper .pointlist03 {
    z-index: 1;
  }
  #messageWrapper .pointlist li:nth-of-type(1) {
    margin-top: initial;
  }
  #messageWrapper .pointlist li:nth-of-type(2) {
    margin-left: auto;
  }
  #messageWrapper .pointlist li .ico {
    width: 90px;
    height: auto;
    margin: 0 auto;
  }
  #messageWrapper .pointlist li::before {
    width: 40px;
    height: 40px;
    font-size: 1.8rem;
    top: 15px;
    left: 20px;
  }
  #messageWrapper .pointlist li:nth-of-type(2)::before {
    left: initial;
    right: 20px;
  }
  #messageWrapper .pointlist .txt {
    font-size: 1.5rem;
  }
  #messageWrapper .pointlist .txt span {
    font-size: 1.6rem;
  }
  /* 〇〇はこちら！ボタン 共通 */
  .btnBox {
    max-width: 300px;
    height: 60px;
    margin: 0px auto 30px;
  }
  .btnBox span {
    font-size: 24px
  }
  /*
		TOPICS
	-----------------------------------------------------------------------------------------------*/
  /* リスト */
  #topicsWrapper .topicsList {
    width: 100%;
    height: 890px;
    margin-top: 100px;
  }
  #main #topicsWrapper .titBase {
    margin-bottom: -60px;
  }
  #topicsWrapper .topicsList li {
    width: 320px;
    height: auto;
    left: 50%;
  }
  #topicsWrapper .topicsList li:nth-of-type(1) {
    margin-left: -65px;
    top: 30px;
    z-index: 2;
  }
  #topicsWrapper .topicsList li:nth-of-type(2) {
    margin-left: -220px;
    top: 14%;
    z-index: 2;
    width: 300px;
  }
  #topicsWrapper .topicsList li:nth-of-type(3) {
    margin-left: -70px;
    top: 220px;
    z-index: 2;
  }
  #topicsWrapper .topicsList li:nth-of-type(4) {
    margin-left: -68px;
    top: 590px;
    z-index: 4;
  }
  #topicsWrapper .topicsList li:nth-of-type(5) {
    margin-left: -200px;
    top: 490px;
    z-index: 3;
  }
  #topicsWrapper .topicsList li:nth-of-type(6) {
    margin-left: -250px;
    top: 300px;
    z-index: 2;
  }
  #topicsWrapper .topicsList li:nth-of-type(7) {
    margin-left: -225px;
    top: -45px;
    z-index: 1;
  }
  #topicsWrapper .topicsList li:nth-of-type(8) {
    margin-left: -210px;
    top: 680px;
    z-index: 4;
    width: 250px;
  }
  #topicsWrapper .topicsList li:nth-of-type(9) {
    margin-left: -70px;
    top: 385px;
    z-index: 2;
  }
  #topicsWrapper .topicsList li:nth-of-type(10) {
    margin-left: -220px;
    top: 480px;
    z-index: 3;
  }
  /* 各社人事への質問はこちら！ボタン */
  #topicsWrapper .btnBox {
    margin-top: -20px;
    margin-bottom: 30px;
  }
  /*
		プレゼントキャンペーン
	-----------------------------------------------------------------------------------------------*/
  /* 雲調整 */
  #main #topicsWrapper.kumoBase { /* 雲同士の空き */
    /*		margin-bottom: 60px;*/
  }
  #main #campaignWrapper.kumoBase::before {
    top: 50px;
  }
  /* カミングスーンのみ適用 */
  #campaignWrapper.comingSoon {
    margin-top: initial;
  }
  /* リスト */
  #campaignWrapper .campaignList {
    width: 100%;
    height: 1850px;
    margin-top: 30px;
  }
  #main #campaignWrapper.kumoBase .titBase {
    margin-bottom: -60px;
    transform: translateY(-60px);
  }
  #campaignWrapper .campaignList li {
    height: auto;
    width: 350px;
    left: 50%;
  }
  #campaignWrapper .campaignList li:nth-of-type(1) {
    top: -40px;
    right: 0px;
    margin-left: -250px;
  }
  #campaignWrapper .campaignList li:nth-of-type(2) {
    top: 6.5%;
    left: 50%;
    margin-left: -120px;
    z-index: -1;
  }
  #campaignWrapper .campaignList li:nth-of-type(3) {
    left: 50%;
    right: 0px;
    top: 20.7%;
    margin-left: -130px;
    z-index: 3;
  }
  #campaignWrapper .campaignList li:nth-of-type(4) {
    left: 50%;
    right: 0;
    top: 13.6%;
    margin-left: -240px;
    z-index: 2;
  }
  #campaignWrapper .campaignList li:nth-of-type(5) {
    left: 50%;
    top: 54.5%;
    width: 350px;
    margin-left: -125px;
    z-index: -2;
  }
  #campaignWrapper .campaignList li:nth-of-type(6) {
    left: 50%;
    top: 28.2%;
    margin-left: -240px;
    z-index: 3;
  }
  #campaignWrapper .campaignList li:nth-of-type(7) {
    left: 50%;
    top: 59.9%;
    width: 370px;
    margin-left: -240px;
    z-index: -3;
  }
  #campaignWrapper .campaignList li:nth-of-type(8) {
    right: 0px;
    left: 50%;
    top: 68.8%;
    margin-left: -150px;
    z-index: 2;
    width: 370px;
  }
  #campaignWrapper .campaignList li:nth-of-type(9) {
    left: 50%;
    right: 10px;
    top: 77.9%;
    margin-left: -220px;
    z-index: 2;
  }
  #campaignWrapper .campaignList li:nth-of-type(10) {
    left: 50%;
    top: 85.8%;
    width: 370px;
    margin-left: -150px;
    z-index: 2;
  }
  #campaignWrapper .campaignList li:nth-of-type(11) {
    left: 50%;
    top: 36.9%;
    width: 370px;
    margin-left: -170px;
    z-index: 3;
  }
  #campaignWrapper .campaignList li:nth-of-type(12) {
    left: 50%;
    top: 46%;
    margin-left: -215px;
    width: 370px;
  }
  /* 各社人事への質問はこちら！ボタン */
  #campaignWrapper .btnBox {
    margin-top: -20px;
    margin-bottom: 30px;
  }
  /*
		出展企業情報
	-----------------------------------------------------------------------------------------------*/
  #companyWrapper .ctsArea {
    width: 100%;
    padding: 25px;
    padding-bottom: 140px;
  }
  /* 出展企業リスト */
  .companyList {
    gap: 10px;
  }
  /* ワクティ02 */
  .companyList::after {
    bottom: -100px;
    right: 40%;
  }
  .companyList li {
    width: 100%;
    padding: 10px 20px 25px;
  }
  /* ロゴ */
  .companyList li .logo {
    width: 180px;
    min-width: initial;
    margin: 0 auto;
  }
  .companyList li .txt {
    font-size: 1.3rem;
    line-height: 150%;
    padding-top: 15px;
  }
  /*
			昨年のイベントの様子
	-----------------------------------------------------------------------------------------------*/
  #eventWrapper .ctsArea {
    width: 100%;
    padding: 25px;
    padding-bottom: 140px;
  }
  #eventWrapper .youtube {
    width: 100%;
    margin: auto;
    background-image: url("../img/youtube_sp.png");
    aspect-ratio: 60/25;
  }
  .eventList {
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .eventList li {
    flex: 0 0 48%;
    box-sizing: border-box;
    text-align: center;
    padding: 10px;
  }
  .list li:last-child {
    flex: 0 0 100%;
    max-width: 200px;
  }
  /* ロゴ */
  .eventList li .logo {
    width: 180px;
    min-width: initial;
    margin: 0 auto;
  }
  .eventList li .txt {
    font-size: 1.3rem;
    line-height: 150%;
    padding-top: 15px;
  }
  .event_tit::before {
    content: "";
    display: inline-block;
    background: url(../img/il_wakty03.png) no-repeat center center / cover;
    animation: anmUpDownLoop 5.4s infinite normal 1.0s ease forwards;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    width: 93px;
    height: 81px;
    top: -100px;
    left: -5px;
  }
  .link::after {
    width: 80px;
    height: 90px;
    bottom: 30px;
    right: 40%;
  }
  #eventWrapper .btnBox {
    bottom: 26%;
  }
  /*
		フッター
	-----------------------------------------------------------------------------------------------*/
  #main footer .copy {
    padding-bottom: 20px;
  }
}
/*
		表示切り替え
	-----------------------------------------------------------------------------------------------*/
@media screen and (min-width: 813px) {
  .sp_only {
    display: none;
  }
}
@media screen and (max-width: 812px) {
  .pc_only {
    display: none;
  }
}
@media screen and (min-width: 500px) {
  #messageWrapper .ctsArea::after {
    display: contents;
  }
}
/* SPサイズ（768px以下）で画像を差し替え */
@media screen and (max-width: 768px) {
  .switchImg_topics01 {
    content: url("../img/ph_topics_kumo_01_sp.png");
  }
  .switchImg_topics02 {
    content: url("../img/ph_topics_kumo_02_sp.png");
  }
  .switchImg_topics03 {
    content: url("../img/ph_topics_kumo_03_sp.png");
  }
  .switchImg_topics04 {
    content: url("../img/ph_topics_kumo_04_sp.png");
  }
  .switchImg_topics05 {
    content: url("../img/ph_topics_kumo_05_sp.png");
  }
  .switchImg_topics06 {
    content: url("../img/ph_topics_kumo_06_sp.png");
  }
  .switchImg_topics07 {
    content: url("../img/ph_topics_kumo_07_sp.png");
  }
  .switchImg_topics08 {
    content: url("../img/ph_topics_kumo_08_sp.png");
  }
  .switchImg_topics09 {
    content: url("../img/ph_topics_kumo_09_sp.png");
  }
  .switchImg_topics10 {
    content: url("../img/ph_topics_kumo_10_sp.png");
  }
}
@media screen and (max-width: 768px) {
  .switchImg_campaign01 {
    content: url("../img/ph_campaign_kumo_01_sp.png");
  }
  .switchImg_campaign02 {
    content: url("../img/ph_campaign_kumo_02_sp.png");
  }
  .switchImg_campaign03 {
    content: url("../img/ph_campaign_kumo_03_sp.png");
  }
  .switchImg_campaign04 {
    content: url("../img/ph_campaign_kumo_04_sp.png");
  }
  .switchImg_campaign05 {
    content: url("../img/ph_campaign_kumo_05_sp.png");
  }
  .switchImg_campaign06 {
    content: url("../img/ph_campaign_kumo_06_sp.png");
  }
  .switchImg_campaign07 {
    content: url("../img/ph_campaign_kumo_07_sp.png");
  }
  .switchImg_campaign08 {
    content: url("../img/ph_campaign_kumo_08_sp.png");
  }
  .switchImg_campaign09 {
    content: url("../img/ph_campaign_kumo_09_sp.png");
  }
  .switchImg_campaign10 {
    content: url("../img/ph_campaign_kumo_10_sp.png");
  }
  .switchImg_campaign11 {
    content: url("../img/ph_campaign_kumo_11_sp.png");
  }
  .switchImg_campaign12 {
    content: url("../img/ph_campaign_kumo_12_sp.png");
  }
}
/*
		header
	-----------------------------------------------------------------------------------------------*/
header #menu {
  height: 85px
}
@media (max-width: 812px) {
  header #menu {
    height: 50px;
    align-items: normal
  }
  header h1 {
    height: 0px;
  }
}
@media (max-width: 767px) {
  #g-nav li:nth-child(1) a, #g-nav li:nth-child(2) a, #g-nav li:nth-child(3) a, #g-nav li:nth-child(4) a {
    text-transform: uppercase;
    font-size: 140%;
  }
}
/*
		event_btn_ore_career
	-----------------------------------------------------------------------------------------------*/
@media all and (min-width: 813px) {
  .event_btn_ore_career {
    width: 100%;
    max-width: 1080px;
    margin: 6em auto 6em;
    background-image: url("../img/oreno_career_pc.jpg");
    aspect-ratio: 11/2;
  }
}
@media all and (max-width: 812px) {
  .event_btn_ore_career {
    width: 100%;
    margin: auto;
    background-image: url("../img/oreno_career_sp.jpg");
    aspect-ratio: 60/25;
  }
}
.event_btn_ore_career {
  display: block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.event_btn_ore_career:hover {
  opacity: .7;
}
/*
		jobseminar
	-----------------------------------------------------------------------------------------------*/
@media all and (min-width: 813px) {
  .jobseminar {
    width: 60%;
    max-width: 1080px;
    margin: 6em auto 6em;
    background-image: url("../img/btn_jobseminar_02.png");
    aspect-ratio: 11/2;
  }
}
@media all and (max-width: 812px) {
  .jobseminar {
    width: 100%;
    margin: auto;
    background-image: url("../img/btn_jobseminar_02.png");
    aspect-ratio: 60/25;
  }
}
.jobseminar {
  display: block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
/*
.jobseminar:hover {
  opacity: .7;
}
*/
.jobseminar span {
	display: block;
    text-indent: 110%;
    white-space: nowrap;
    overflow: hidden;
}

/*
		jobseminar
	-----------------------------------------------------------------------------------------------*/
@media screen and (min-width: 540px) and (max-width: 811px) {
#kvWrapper::before {
  position: absolute;
  content: "";
  display: block;
  background: url(../img/bg_kv_kumo_L_01.png) no-repeat center center / cover;
  width: 370px;
  height: 400px;
  top: 620px;
  left: 0;
  z-index: -1
}
#kvWrapper::after {
  position: absolute;
  content: "";
  display: block;
  background: url(../img/bg_kv_kumo_L_02.png) no-repeat center center / cover;
  width: 370px;
  height: 400px;
  top: 620px;
  right: 0;
  z-index: -1
}
#kvWrapper .archiveArea .movieArea {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(50deg, #005fb2 0%, #297aeb 25%, #68caec 60%, #3c9fff 80%);
  max-width: 600px;
  height: 355px;
  margin: 0 auto;
}
#kvWrapper .archiveArea .movieArea .youtube {
  width: 560px;
}
#kvWrapper .dataArea {
    width: 55%;
    margin: -18% calc(50% - 50%) 0 auto;
}
}