@import url("/um/v7/css/reset.css");
@import url("set.css");

html {
  scroll-behavior: smooth !important;
}

body {
  overflow: hidden;
}

div.tbs-gheader {}

.cmn_banner {
  margin: 3em auto;
  text-align: center;
}


/* =================================
	Web Fonts
================================= */
/* Regular */
@font-face {
  font-family: 'TBSGothic';
  src: url('https://www.tbs.co.jp/um/tpfonts/2e0869c1-da33-42ae-9828-55499bd42a69.woff') format("woff");
  font-weight: 400;
  font-style: normal;
}

/* Bold */
@font-face {
  font-family: 'TBSGothic';
  src: url('https://www.tbs.co.jp/um/tpfonts/044de588-d2c9-4010-86b0-1c026db099a2.woff') format("woff");
  font-weight: 700;
  font-style: normal;
}

/*	#page-top
============================== */
#page-top {
  background: #0050FF;
  font-family: 'TBSGothic', "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  position: relative;
  /* overflow: hidden; */
}

@media screen and (max-width: 767px) {
  #page-top {
    font-size: 3vw;
    /* overflow: hidden; */
  }
}

/*	wrap
============================== */
@media all and (min-width: 768px) {
  .wrap {
    width: 1080px;
    margin: 0 auto !important;
    padding: 1em;
  }

  #results .txt {
    width: 700px;
    margin: 0 auto !important;
    padding: 0 2em;
  }
}

@media screen and (max-width: 767px) {
  .wrap {
    width: 90%;
    margin: 0 auto !important;
    position: relative;
    z-index: 2;
    padding: 3em 0 0;
    /* overflow: hidden; */
  }
}

/*	print
============================== */
@media print {
  .noprint {
    display: none;
  }
}

/*	header
============================== */
#page-top header {
  color: #fff;
}

@media screen and (max-width: 767px) {
  #page-top header {
    position: relative;
    height: auto;
    /* z-index: 2!important; */
    background-color: #0050FF;
  }
}

/*	border flex smp
============================== */
@media screen and (max-width: 767px) {
  #page-top header .flex {
    flex-wrap: wrap;
    margin-bottom: 0 !important;
  }
}

/*	video smp
============================== */
@media screen and (max-width: 767px) {
  video {
    width: 158%;
    /* position: absolute; */
    left: 50%;
    top: -210px;
    margin-left: -31%;
  }
}

/*	read
============================== */
/* div.read {
  transform: scale(1, 0.85);
  letter-spacing: 0.07em;
  line-height: 2;
  font-size: 140%;
}

div.read>span {
  background-color: #0050FF;
  padding: 0.1em;
}

@media all and (min-width: 768px) {
  div.read {
    margin: -200px 0 0 0;
  }
}

@media screen and (max-width: 767px) {
  div.read {
    margin: -8em 0 0;
  }
} */
@media all and (min-width: 768px) {
  div.read {
    background-image: url(../img/read_pc.png);
    width: 1080px;
    height: 266px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 767px) {
  .read_outer {
    width: 90%;
    margin: 0 auto;
  }

  .read {
    position: relative;
    width: 100%;
    height: 0;
    background-image: url(../img/read_smp.png);
    padding-top: calc(518 / 703 * 100%);
    margin: -8em auto 0em;
    background-position: center;
  }

  .read span {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

/*	accordion
============================== */
.toggle {
  display: none;
}

.Label {
  padding: 1.5em 4em 1.3em 1.5em;
  display: block;
  color: #022BB4;
  background: #fff;
  font-weight: bold;
  font-size: 110%;
}

.Label::before {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 3px solid #022BB4;
  border-right: 3px solid #022BB4;
  -webkit-transform: rotate(45deg);
  position: absolute;
  top: calc(50% - 4.5px);
  right: 30px;
  transform: rotate(135deg);
}

@media screen and (max-width: 767px) {
  .Label::before {
    content: "";
    width: 0.6em;
    height: 0.6em;
    border-top: 0.2em solid #022BB4;
    border-right: 0.2em solid #022BB4;
    -webkit-transform: rotate(45deg);
    position: absolute;
    top: calc(50% - 4.5px);
    right: 1.5em;
    transform: rotate(135deg);
  }
}

.Label,
.content {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all .6s;
}

.content {
  height: 0;
  margin-bottom: 10px;
  padding: 0 20px;
  overflow: hidden;
  border: solid 0.1em #fff;
  box-sizing: border-box;
  margin-top: -0.1em;
}

.toggle:checked+.Label+.content {
  height: auto;
  padding: 20px;
  transition: all .6s;
}

.toggle:checked+.Label::before {
  transform: rotate(-45deg) !important;
}

/*	responsive_table
============================== */
table {
  margin: 30px auto;
}

.re_table tr {
  border-top: solid 1px #022BB4;
  padding: 2em;
}

.re_table tr:last-child {
  border-bottom: solid 1px #022BB4;
}

.re_table td {
  padding: 30px 0;
}

.re_table td>span {
  display: block;
}

.re_table th {
  line-height: 1.5;
}

@media all and (min-width: 768px) {
  .re_table th {
    width: 20%;
  }

  .re_table td>span {
    border-left: 1px solid #022BB4;
    padding: 10px 30px;
  }
}

@media screen and (max-width: 767px) {
  .re_table th {
    text-align: left;
    font-size: 140%;
    margin: 1em 0 -0.5em;
  }

  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }

  .re_table {
    /* width: 80%; */
    margin: 2em auto 0;
  }

  .re_table th,
  .re_table td {
    border-bottom: none;
    display: block;
    width: 100%;
    padding: 0 4vw 4vw;
    box-sizing: border-box;
  }
}

/*	border
============================== */
.border {
  /* border-top: 1px solid #fff; */
  /* border-bottom: 1px solid #fff; */
  font-size: 120%;
  letter-spacing: 0.05em;
}

@media all and (min-width: 768px) {
  .border {
    padding: 3em 0;
    width: 930px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 767px) {
  .border {
    padding: 0;
  }
}

/*	border project pc
============================== */
.project {
  background-image: url(../img/project.png);
}

.person {
  background-image: url(../img/person.png);
}

@media all and (min-width: 768px) {

  .project,
  .person {
    background-size: contain;
    background-repeat: no-repeat;
  }

  .project span,
  .person span {
    width: 410px;
    height: 168px;
    background-size: contain;
    background-repeat: no-repeat;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    line-height: 1.5;
  }

  .border .dotlist {
    width: 680px;
  }
}

@media screen and (max-width: 767px) {

  .project,
  .person {
    background-size: cover;
    background-repeat: no-repeat;
    width: 80%;
    margin: 0 auto;
    padding-top: calc(457 / 809 * 80%);
    position: relative;
  }

  .project span,
  .person span {
    /* width: 220px; */
    /* height: 143px; */
    /* background-size: contain; */
    /* background-repeat: no-repeat; */
    /* display: block; */
    /* vertical-align: middle; */
    /* text-align: center; */
    /* line-height: 1.5; */
    /* margin: 0 auto; */
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
  }

  .border .dotlist {
    width: 680px;
  }
}

/*	slant-bg
============================== */
.slant-bg {
  width: 100%;
  margin: 0px 0 200px;
  padding: 60px 0px 110px;
  position: relative;
  top: 100px;
  color: #022BB5;
}

.slant-bg::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #CCD5EB;
  transform: skewY(-6.4deg);
}

@media screen and (max-width: 767px) {
  .slant-bg {
    padding: 2em 0 2em;
    top: 4em;
    margin: 0 0 8em;
  }
}

/*	article h2
============================== */
article h2 {
  text-align: center;
  font-size: 32px;
  position: relative;
  width: max-content;
  margin: 90px auto 90px;
  letter-spacing: 0.03em;
}

@media screen and (max-width: 767px) {
  article h2 {
    font-size: 23px;
    margin: 20px auto 30px;
  }
}

/*	article h2 before after pc
============================== */
@media all and (min-width: 768px) {

  article h2::before,
  article h2::after {
    content: "";
    display: block;
    position: absolute;
    background-size: cover;
  }

  article h2::before {
    background-image: url(../img/arrow_y_before.png);
    width: 218px;
    height: 92px;
    left: -225px;
    bottom: -60px;
  }

  article h2::after {
    background-image: url(../img/arrow_y_after.png);
    width: 94px;
    height: 106px;
    right: -100px;
    top: -60px;
  }

  .slant-bg article h2::before {
    background-image: url(../img/arrow_b_before.png);
    width: 141px;
    height: 77px;
    left: -160px;
    bottom: -45px;
  }

  .slant-bg article h2::after {
    background-image: url(../img/arrow_b_after.png);
    width: 109px;
    height: 77px;
    right: -111px;
    top: -48px;
  }
}

/*	article h2 before after smp
============================== */
@media screen and (max-width: 767px) {

  article h2::before,
  article h2::after {
    content: "";
    display: block;
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
  }

  article h2::before {
    background-image: url(../img/arrow_y_before.png);
    width: 4em;
    height: 2em;
    left: -4em;
    bottom: -1.6em;
  }

  article h2::after {
    background-image: url(../img/arrow_y_after.png);
    width: 1.8em;
    height: 2em;
    right: -2em;
    top: -1em;
  }

  .slant-bg article h2::before {
    background-image: url(../img/arrow_b_before.png);
    width: 3em;
    height: 2em;
    left: -3.2em;
    bottom: -1.5em;
  }

  .slant-bg article h2::after {
    background-image: url(../img/arrow_b_after.png);
    width: 2.5em;
    height: 2em;
    right: -2.5em;
    top: -1.2em;
  }
}

/*	article notes
============================== */
.notes {
  color: #fff;
  padding-bottom: 5em;
  /* overflow-y: hidden; */
  /* overflow-x: hidden; */
  /* overflow: hidden; */
}

/*	section
============================== */
section.dl {
  margin: 4em 0;
}

/*	apply
============================== */
.apply {
  position: relative;
  z-index: 3;
}

@media all and (min-width: 768px) {
  .apply {
    background-image: url(../img/apply.png?20240328);
    background-size: cover;
    width: 260px;
    height: 260px;
  }

  .fixed_btn {
    position: fixed;
    bottom: 60px;
    left: 60px;
  }
}

@media screen and (max-width: 767px) {
  a.apply {
    margin: 0 auto 3em;
    display: block;
  }

  a.apply img {
    width: 100%;
  }

  #fix {
    z-index: 3;
  }

  .m_fixed {
    left: 0;
    position: fixed;
    top: 0;
  }
}

/*	d_arrow pc
============================== */
@media all and (min-width: 768px) {

  #page-top header,
  article.jd,
  article.notes {
    position: relative;
  }

  #page-top header::before,
  #page-top header::after,
  article.jd::before,
  article.jd::after,
  article.notes::before,
  article.notes::after {
    content: "";
    display: block;
    position: absolute;
    background-size: cover;
    mix-blend-mode: multiply;
    z-index: 1;
  }

  #page-top header::before {
    background-image: url(../img/d_arrow_1.png);
    width: 456px;
    height: 403px;
    left: 50%;
    bottom: 300px;
    margin-left: -1080px;
  }

  #page-top header::after {
    background-image: url(../img/d_arrow_2.png);
    width: 472px;
    height: 1022px;
    left: 50%;
    bottom: -600px;
    margin-left: 550px;
  }

  article.jd::before {
    background-image: url(../img/d_arrow_1.png);
    width: 456px;
    height: 403px;
    left: 50%;
    top: 360px;
    margin-left: -1080px;
  }

  article.jd::after {
    background-image: url(../img/d_arrow_3.png);
    width: 679px;
    height: 289px;
    left: 50%;
    bottom: -184px;
    margin-left: 480px;
  }

  article.notes::before {
    background-image: url(../img/d_arrow_4.png);
    width: 432px;
    height: 177px;
    left: 50%;
    top: 270px;
    margin-left: -1070px;
  }

  article.notes::after {
    background-image: url(../img/d_arrow_5.png);
    width: 548px;
    height: 764px;
    left: 50%;
    bottom: -140px;
    margin-left: 630px;
  }
}

/*	d_arrow smp
============================== */
@media screen and (max-width: 767px) {

  #page-top header,
  #page-top header,
  #page-top header,
  article.jd,
  article.jd,
  article.notes,
  article.notes {
    position: relative;
  }

  #page-top header::before,
  #page-top header::after,
  article.jd::before,
  article.jd::after,
  article.notes::before,
  article.notes .wrap::before {
    content: "";
    display: block;
    position: absolute;
    mix-blend-mode: multiply;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 50%;
    opacity: 15%;
  }

  #page-top header::after {
    background-image: url(../img/d_arrow_2.png);
    left: 0;
    bottom: -109em;
    margin-left: -120%;
    rotate: 55deg;
    z-index: 1;
  }

  article.jd::before {
    background-image: url(../img/d_arrow_3.png);
    left: 50%;
    bottom: -49em;
    margin-left: -98em;
    rotate: 98deg;
    width: 230%;
  }

  article.notes::before {
    background-image: url(../img/d_arrow_4.png);
    left: 50%;
    top: -23em;
    margin-left: -36%;
    rotate: 202deg;
    width: 140%;
  }

  article.notes .wrap::before {
    background-image: url(../img/d_arrow_5.png);
    left: 50%;
    bottom: -54em;
    margin-left: -118%;
    rotate: 55deg;
    width: 150%;
  }

  #page-top header::before {
    background-image: url(../img/read_bg_smp.png);
    left: 0;
    top: 24.5em;
    margin: 0;
    width: 100%;
    display: block;
    opacity: 1;
    background-size: 90%;
    background-position: center top;
    mix-blend-mode: multiply;
    background-blend-mode: multiply;
  }
}

/*	news
============================== */
.info {
  -webkit-overflow-scrolling: touch;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  display: -webkit-box;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  max-width: 600px;
  height: max-content;
  margin: 0 auto;
  overflow-y: auto;
}

@media all and (min-width: 768px) {
  .info {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    flex-wrap: wrap
  }
}

.info dd,
.info dt {
  box-sizing: border-box;
  width: 100%;
  padding-bottom: .8em;
  padding-left: .8em;
}

.info dt {
  font-style: normal;
  font-weight: initial
}

@media all and (min-width: 768px) {
  .info dt {
    width: 6.5em;
    margin-bottom: .8em;
    border-bottom: 1px solid hsl(0deg 0% 100% / 40%);
  }
}

.info dt:first-of-type {
  padding-top: .8em;
  border-top: 1px solid hsl(0deg 0% 100% / 40%);
}

.info dt time {
  margin-right: .8em;
}

.info dt span {
  box-sizing: border-box;
  display: inline-block;
  width: 7em;
  margin-right: .8em;
  padding: 0 .8em;
  background-color: #fef100;
  color: #00e;
  font-size: .8em;
  line-height: 1.75;
  text-align: center
}

.info time {
  color: #e0e0e0;
}

.info dd {
  margin-left: 0;
  margin-bottom: .8em;
  border-bottom: 1px solid hsl(0deg 0% 100% / 40%);
}

@media all and (min-width: 768px) {
  .info dd {
    width: calc(100% - 6.5em);
  }

  .info dd:first-of-type {
    padding-top: .8em;
    border-top: 1px solid hsl(0deg 0% 100% / 40%);
  }
}

.info dd:nth-of-type(-n+3) {
  position: relative
}

@media screen and (max-width: 767px) {
  .info {
    padding: 1.5em;
    margin: 2em 2em 3em;
    z-index: 1;
    position: relative;
    /* border: solid 1px #fff; */
  }
}

h3 {
  font-size: 150%;
  text-align: center;
  letter-spacing: 0.1em;
  margin-top: 5em;
}

.results {
  overflow: hidden;
  position: relative;
  z-index: 99;
}

body#results article.notes .wrap::before {
  display: none;
}

/*	results
============================== */
.box {
  background-color: #FFF000;
  width: 300px;
  padding: 30px;
  /* padding: 20px; */
  box-sizing: border-box;
  color: #000;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
  margin: 3em 1em;
}
.box .title {
  font-size: 130%;
  width: max-content;
  margin: 0 auto;
  height: 70px;
  display:table;
  text-align: center!important;
}
.box .name {
  margin-bottom: 1em;
}
.box .title > div{
  display: table-cell;
  vertical-align: middle;
}
.box a {
  color: blue;
}
.results .pic span {
  width: 240px;
  height: 160px;
  background-size: contain;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  .box .title {
    font-size: 180%;
    height: auto;
  }
  .box .name {
    font-size: 160%;
  }
  .results .pic span {
    margin-bottom: 4vw;
  }
  .box {
    padding: 30px;
    margin: 2em auto;
  }
  .box a {
    font-size: 130%;
  }
}