@charset "UTF-8";

html{
  scroll-behavior: smooth;
}

:root {
  font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  color: #16160e;
  --frame-red: #c4171e;
  --frame-black: #000000;
  --main-black: #16160e;
  --main-navy: #00075c;
  --dark-navy: #292C34;
  --neon-blue: #73ffec;
  --neon-pink: #FFA2FB;
  --neon-yellow: #CCFF73;
  --my-violet: #8BA6FF;
  --my-gray: #afafb0;
  --dark-gray: #898989;
  --my-roman: 'Square Peg', cursive;
  --my-time: 'Roboto Mono', monospace;
}
.pc { display: block; }
.sp { display: none; }

section, main {
  text-align: center;
}
.container {
  max-width: 1080px;
  margin: 0 auto;
}
.marker-red {
  background: linear-gradient(to bottom, transparent 0%, transparent 60%, var(--my-red) 100%);
}
/*------------------------------------------------------
  背景動画
------------------------------------------------------*/
#video-area{
  position: fixed;
  z-index: -1;
  top: 0;
  right:0;
  left:0;
  bottom:0;
  overflow: hidden;
  background: url();/*動画が表示されない場合の画像を設定!!!!!*/
  background-repeat: no-repeat;
  background-size: cover;
}
#video {
  /*天地中央配置*/
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*縦横幅指定*/
  width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
}
/*------------------------------------------------------
  ページトップボタン
------------------------------------------------------*/
.back-to-top {
  display: none;
  position: fixed;
  right: 2%;
  bottom: 2%;
  color: rgba(255, 255, 255, .8);
  padding: 2rem;
  display: inline-block;
  text-decoration: none;
  border-radius: 50%;
  font-size: .9rem;
  line-height: 1em
}
.back-to-top::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  width: 70px;
  height: 70px;
  background-color: rgba(255, 255, 255, .4);
  border-radius: 50%;
  z-index: -1;
}
/*------------------------------------------------------
  ヘッダー
------------------------------------------------------*/
.header_inner {
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  z-index: 2;
  font-size: .9rem;
}
.header_inner .logo {
  height: 100%;
}
.header_inner a {
  display: block;
  height: 100%;
  display: flex;
  align-items: center;
}
.header_inner ul {
  display: flex;
  width: 100%;
  justify-content: space-around;
  color: #fff;
  height: 100%;
  padding: 0 1rem;
}
.header_inner ul li {
  height: 100%;
  padding: 0 1rem;
}
.header_inner ul li a:hover {
  color: var(--neon-blue);
  transition: .5s;
}
.header_inner button {
  display: flex;
  justify-content: center;
  width: 10rem;
  height: 70%;
  background: #73ffec;
  padding: 0 2rem;
  transition: all .5s;
  margin-right: 1rem;
}
.header_inner button:hover {
  background-color: #fad0c4;
  background-image: linear-gradient(315deg, #fad0c4 0%, #f1a7f1 74%);
  transition: all .5s;
}
/*スクロール時*/
.headerColor-default {
  background: rgba(44, 41, 52, .8);
  transition: .5s;
}
/*------------------------------------------------------
  キービジュアル
------------------------------------------------------*/
#kv {
  width: 100%;
  padding: 150px 0 30px;
  background: linear-gradient(-45deg, rgba(35, 24, 21, .5) 0%, #292C34 60%, rgba(35, 24, 21, 1) 100%);
}
#kv .container {
  width: 100%;
}
#kv h1 {
  width: 80%;
  margin: 0 auto;
}
#kv h1 img {
  width: 100%;
}
#kv .eventtitle {
  width: 90%;
  margin: 0 auto;
  padding: 1rem 0;
}
#kv .eventtitle img {
  width: 100%;
}
#kv .lineup ul li {
  width: 100%;
  background: linear-gradient(to top, rgba(255, 255, 255, .7) 54%, rgba(255, 255, 255, 0) 54%, rgba(255, 255, 255, 0) 100%);
}
#kv ul {
  width: 100%;
}
#kv ul li img {
  width: 70%;
}
#kv ul li:nth-child(2) {
  position: relative;
  top: -2rem;
}
#kv ul li:nth-child(2) img {
  position: relative;
  right: -1rem;
}
#kv .date {
  width: 100%;
}
#kv .date img {
  width: 50%;
}
/*------------------------------------------------------
  共通
------------------------------------------------------*/
/*セクションタイトル*/
.section_title li:nth-child(1) {
  font-size: 3rem;
  color: var(--main-navy);
  font-family: var(--my-roman);
}
.section_title li:nth-child(2) {
  font-size: .9rem;
  font-weight: bold;
  color: var(--neon-blue);
  line-height: 2em;
  padding-bottom: 2rem;
}
#concept .section_title li:nth-child(1),
#outline .section_title li:nth-child(1) {
  color: var(--my-gray);
}
#guest .section_title li:nth-child(2),
#timeline .section_title li:nth-child(2),
#satori_area .section_title li:nth-child(2) {
  color: var(--my-violet);
}
#outline .section_title li:nth-child(2) {
  color: var(--my-gray);
}
/*時間フォント*/
.time {
  font-family: var(--my-time);
}
/*申込ボタン*/
.btn_wrap {
  padding: 2rem 0 1rem;
}
.btn {
  position: relative;
  display: inline-block;
  padding: .9em 4em;
  background: var(--neon-blue);
  border: 2px solid var(--neon-blue);
  color: var(--dark-navy);
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .3s;
}
.btn::before,
.btn::after {
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  z-index: 2;
  content: '';
  transition: all .3s;
}
.btn::before {
  border-top: 2px solid var(--neon-pink);
  border-bottom: 2px solid var(--neon-pink);
  transform: scale(0, 1);
}
.btn::after {
  border-right: 2px solid var(--neon-pink);
  border-left: 2px solid var(--neon-pink);
  transform: scale(1, 0);
}
.btn:hover {
  background-color: #fad0c4;
  background-image: linear-gradient(315deg, #fad0c4 0%, #f1a7f1 74%);
}
.btn:hover::after,
.btn:hover::before {
  transform: scale(1);
}
/*------------------------------------------------------
  ゲスト
------------------------------------------------------*/
#guest {
  background: rgba(255, 255, 255, .7);
  padding: 4rem 1rem 2rem;
}
#guest .container {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.guest-wrap {
  width: 45%;
  display: flex;
  align-items: top;
  font-size: .7rem;
  text-align: left;
  line-height: 1.5em;
  margin-bottom: 2rem;
}
.guest-wrap .photo {
  width: 29%;
  padding-right: 1rem;
}
.guest-wrap ul {
  width: 71%;
}
.guest-wrap ul li:nth-child(2) {
  font-size: 1.1rem;
  padding:.3em 0 .5em;
}
.guest-wrap .photo img {
  width: 100%;
}
.guest-wrap .logo {
  width: 300px;
  padding-bottom: .4em;
}
/*個別ロゴ調整*/
.miyata .logo {
  height: 2rem;
}
.yazaki .logo img {
  width: 48%;
  position: relative;
  left: -4px;
}
.ueda .logo img {
  width: 48%;
}
.sakamoto .logo img {
  width: 52%;
  position: relative;
  left: -7px;
}
.takahashi .logo img {
  width: 60%;
  position: relative;
  left: -3px;
}
.JAL .logo img {
  width: 87%;
  position: relative;
  left: -3px;
}
.nishiguchi .logo img {
  width: 65%;
  padding-bottom: .5rem;
}
#guest .commingsoon {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, .2);
}
#guest .commingsoon ul {
  width: 100%;
  text-align: center;
}
#guest .commingsoon ul li:nth-child(1) {
  font-size: 1rem;
  padding-bottom: 5px;
  color: var(--dark-gray);
}
#guest .commingsoon ul li:nth-child(2) {
  color: var(--my-gray);
  font-size: .8rem;
  padding: 0;
  letter-spacing: .07em;
}
/*------------------------------------------------------
  コンセプト
------------------------------------------------------*/
#concept {
  padding: 4rem 1rem 2rem;
}
#concept .container {
  max-width: 980px;
}
#concept .message {
  background: linear-gradient(-45deg, #231815 0%, #292C34 50%, #231815 100%);
  color: #fff;
  text-align: justify;
  line-height: 2.3rem;
  padding: 6rem 6rem;
}
#concept .points {
  background: var(--my-gray);
  line-height: 2rem;
  padding: 4rem 6rem;
  text-align: center;
}
#concept .points p {
  color: var(--neon-blue);
  padding-bottom: 2rem;
}
#concept .points ul {
  display: inline-block;
  text-align: left;
  font-size: 1.1rem;
  font-weight: bold;
}
#concept .points li {
  padding: .3em 2em;
  margin: .5em 0;
  background: rgba(255, 255, 255, .5);
}
#concept .points .material-icons {
  display: inline-flex;
  vertical-align: middle;
  padding-right: 5px;
  position: relative;
  top: -2px;
}
/*------------------------------------------------------
  タイムライン
------------------------------------------------------*/
#timeline .section_title li:nth-child(2) {
  padding-bottom: 0;
}
#timeline .container {
  max-width: 980px;
  background: rgba(255, 255, 255, .8);
  padding: 4rem 3rem 2rem;
  margin: 3rem auto 2rem auto;
}
#timeline .part {
  background: #292C34;
  margin:2rem 0 1rem 0;
}
#timeline .part ul {
  display: flex;
  justify-content: space-between;
  padding: .7em 2em;
  color: #fff;
  font-size: 1.3rem;
}
#timeline .part ul li:nth-child(2) {
  letter-spacing: .05em;
  font-family: var(--my-time);
}
.part-wrap {
  padding: 2rem;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, .7);
}
#timeline .part-wrap .comming li:nth-child(2) {
  color: var(--dark-gray);
  font-weight: normal;
  font-size: 1rem;
  padding-bottom: 0;
}
#timeline .contents {
  text-align: left;
  color: #292C34;
  padding: .5rem 0 .5rem 1.5rem;
  border-left: 4px solid var(--neon-blue);
}
#timeline .contents li:nth-child(1) {
  font-weight: bold;
}
#timeline .contents li:nth-child(2) {
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.5em;
  padding: 1em 0;
}
#timeline .contents li:nth-child(3) {
  font-size: .98rem;
  text-align: justify;
  line-height: 1.8em;
}
#timeline .speaker {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-top: 1rem;
  align-items: center;
}
#timeline .speaker .name {
  width: 30%;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#timeline .speaker .name ul {
  width: 54%;
}
#timeline .speaker .name ul li:nth-child(1) {
  font-size: .9rem;
  color: var(--my-violet);
  padding-bottom: 1em;
}
#timeline .speaker .name .photo {
  width: 46%;
}
#timeline .speaker .name .photo img {
  width: 100%;
}
#timeline .speaker .company {
  width: 70%;
  font-size: .9rem;
  line-height: 1.5em;
  text-align: left;
  padding-left: 1rem;
  display: flex;
  flex-direction: column;
}
#timeline .speaker .company .logo {
  width: 100%;
  text-align: right;
}
/*宮田先生プロフィール*/
#timeline .profile {
  font-size: .9rem;
  line-height: 1.5em;
  width: 100%;
  text-align: justify;
}
#timeline .profile li {
  padding-top: .8rem;
}
/*タイムラインロゴ個別調整*/
#timeline .eneos .company .logo img {
  width: 27%;
  padding-bottom: 1em;
}
#timeline .kansaidenryoku .company .logo img {
  width: 28%;
}
#timeline .nttdata .company .logo img {
  width: 28%;
  padding-bottom: .5rem;
}
#timeline .tokyomarine .company .logo img {
  width: 35%;
}
#timeline .JAL .company .logo img {
  width: 50%;
}
#timeline .lib .company .logo img {
  width: 30%;
}
/*------------------------------------------------------
  開催概要
------------------------------------------------------*/
#outline {
  background: linear-gradient(-45deg, #231815 0%, #292C34 50%, #231815 100%);
  color: #fff;
  padding: 3rem 1rem 4rem 1rem;
  margin-top: 3rem;
}
#outline .section_title {
  border-bottom: 1px solid var(--my-gray);
  margin-bottom: 2rem;
}
#outline .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}
/*イベント名*/
#outline .event p img {
  width: 190px;
  padding-bottom: 5px;
}
#outline .event small {
  font-size: .7rem;
  font-weight: normal;
}
#outline .event ul li:nth-child(1) {
  color: var(--neon-blue);
  font-size: 1.3rem;
  border-top: 1px solid var(--neon-blue);
  border-bottom: 1px solid var(--neon-blue);
  padding: .8em .3em;
  margin: 1em 0 1em 0;
}
#outline .event ul li:nth-child(2) {
  font-size: 1.3rem;
  line-height: 1.5em;
}
#outline .event ul li:nth-child(3) {
  font-size: .95rem;
  line-height: 1.5em;
  padding-top: .8em;
}
/*詳細リスト*/
#outline table {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  font-size: 1.05rem;
  line-height: 2em;
}
#outline th {
  font-weight: normal;
  text-align: right;
  color: var(--neon-blue);
  padding: .5em 1em .5em 0;
}
#outline td {
  text-align: left;
  padding: .5em 0;
}
#outline .detail .on-off {
  font-size: 1em;
  background: #595857;
  border-radius: 100px;
  padding: 0 1em;
  margin-bottom: .8em;
  display: flex;
  align-items: center;
}
#outline .detail .on-off small {
  font-size: .7rem;
}
#outline .material-icons {
  color: var(--dark-gray);
  position: relative;
  top: 5px;
  padding-right: 3px;
}
#outline .offline li:nth-child(2) {
  font-size: .8rem;
  line-height: 1.5em;
  padding: .5em 0 2rem;
}
#outline a {
  transition: .5s;
}
#outline a:hover {
  opacity: .5;
}
/*------------------------------------------------------
  タイムテーブル
------------------------------------------------------*/
#timetable {
  max-width: 980px;
  padding: 1rem;
  border: 2rem solid var(--dark-gray);
}
#timetable thead,
#timetable tbody {
  width: 100%;
}
#timetable th {
  text-align: center;
  padding: .5em 0;
}
#timetable td {
  display: flex;
  align-self: stretch;
  align-items: center;
}
#timetable tr {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  line-height: 1.5em;
}
#timetable tbody tr {
  padding: .5em 0;
  border-top: 1px dotted var(--dark-gray);
}
#timetable .time {
  width: 15%;
  text-align: center;
  justify-content: center;
}
#timetable .program {
  width: 40%;
  padding-left: 1rem;
  border-left: 1px solid var(--neon-blue);
}
#timetable .program ul li:nth-child(1) {
  font-size: .8rem;
  line-height: 3em;
}
#timetable .program ul li:nth-child(2) {
  font-size: 1rem;
}
#timetable .speakers {
  width: 45%;
}
#timetable .speakers ul li:nth-child(1),
#timetable .speakers ul li:nth-child(3) {
   font-size: .95rem;
}
#timetable .speakers ul li:nth-child(3) {
   padding-top: .5em;
}
#timetable .speakers ul li:nth-child(2),
#timetable .speakers ul li:nth-child(4) {
  font-size: .8rem;
  line-height: 1.5em;
}
#timetable .break {
  font-size: .8rem;
  line-height: 1em;
  padding: 0;
}
#timetable .closing {
  border-bottom: 1px dotted var(--dark-gray);
}
#timetable thead .program,
#timetable thead .speakers {
  background: transparent;
  color: var(--neon-blue);
  border-left: none;
}
#timetable .sub-title {
  font-size: .8rem;
}
/*------------------------------------------------------
  form
------------------------------------------------------*/
#satori_area {
  max-width: 980px;
  padding: 3rem 0;
  margin: 3rem auto 0 auto;
  background: rgba(255, 255, 255, .8);
}
#satori__creative_container {
  margin: 0 3rem;
}
.satori__custom_form {
  padding: 3rem;
}
.satori__input_group {
  text-align: left;
}
.satori__input_group .satori__notes {
  margin: 1em 0;
}
#satori_area input,
#satori_area .satori__notes,
#satori__custom_field_ef745fc157d7e8de8 {
  text-align: justify;
}
#satori_area #satori__submit_confirm {
  text-align: center;
}
#satori_area .satori__notes {
  font-size: .85rem;
  border: none;
  background: #eee;
}
#satori__privacy_policy_agreement_wrapper .satori__input_group {
  text-align: center;
}
/*------------------------------------------------------
  フッター
------------------------------------------------------*/
footer {
  color: #fff;
  padding: 1rem;
  font-size: .8rem;
}