@charset "UTF-8";

/*--------------------------------------------
CSS設定
--------------------------------------------*/

:root {
  --root-font-size: 16;
}

@font-face {
  font-family: 'GothicMB101_Medium';
  src: url('../fonts/GothicMB101_Medium.woff') format('woff');
}

@font-face {
  font-family: 'GothicMB101_Bold';
  src: url('../fonts/GothicMB101_Bold.woff') format('woff');
}

html,
body {
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: YakuHanJP_Narrow, 'tt-commons-pro', 'GothicMB101_Medium', 'YuGothic', '游ゴシック', 'Yu Gothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-size: calc(14 / var(--root-font-size) * 1rem);
  font-weight: 400;
  font-style: normal;
  line-height: 2.0em;
  color: #ffffff;
  letter-spacing: 0.5px;
  word-wrap: break-word;
  margin: auto;
}

h2,
h3,
h4,
h5,
h6 {
  font-family: YakuHanJP_Narrow, 'tt-commons-pro', 'GothicMB101_Bold', 'YuGothic', '游ゴシック', 'Yu Gothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-weight: 600;
}

p {
  text-align: justify;
}

p.wh {
  color: #ffffff;
}

a {
  transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  text-decoration: none;
  color: inherit;
}

*:hover,
*.active:hover {
  transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
}

a:visited {
  color: inherit;
  text-decoration: none;
}

a:hover {
  opacity: .6;
}

a.txt_link {
  padding-bottom: 3px;
  border-bottom: solid 1px #222222;
}

a.txt_link:hover,
a.txt_link:active {
  opacity: .8;
  transition: 0.2s ease-in-out;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
}

::selection {
  background-color: rgba(230, 230, 230, 0.5);
  color: inherit;
}

::-moz-selection {
  background-color: rgba(230, 230, 230, 0.5);
  color: inherit;
}


/*--------------------------------------------
page_wrapper
--------------------------------------------*/

.bg_pc {
  position: fixed;
  background: url(../images/hero_bg_pc.jpg) no-repeat center center;
  background-size: cover;
  width: 100%;
  height: 100vh;
}

@media screen and (min-width: 768px) {
  #page_wrapper {
    position: relative;
    max-width: 1366px;
    margin: 0 auto;
  }
}


/*--------------------------------------------
nav
--------------------------------------------*/

#page_nav {
  position: fixed;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  left: 5%;
  max-width: 400px;
  width: 100%;
}

.page_nav_title {
  position: relative;
  margin-bottom: 30px;
}

.page_nav_title img {
  display: block;
  max-width: 400px;
  width: 100%;
  height: auto;
}

ul.page_nav_list li {
  position: relative;
  font-family: YakuHanJP_Narrow, 'tt-commons-pro', 'GothicMB101_Bold', 'YuGothic', '游ゴシック', 'Yu Gothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-weight: 600;
  font-size: calc(18 / var(--root-font-size) * 1rem);
  font-style: normal;
  line-height: 2.0em;
  letter-spacing: 2px;
  color: #ffffff;
  list-style: none;
  padding-left: 1em;
  margin-bottom: 10px;
}

ul.page_nav_list li::before {
  content: "";
  width: 5px;
  height: 5px;
  background-color: #fb4604;
  position: absolute;
  top: 0.8em;
  left: 0;
}

.nav_cta {
  margin-top: 50px;
}


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

  #page_nav {
    display: none;
  }

}


/*--------------------------------------------
main_wrapper
--------------------------------------------*/

#main_wrapper {
  z-index: 20;
  margin: 0 auto 0 auto;
}

@media screen and (min-width: 768px) {
  #main_wrapper {
    position: relative;
    background: #222222;
    max-width: 550px;
    width: 100%;
    margin: 35px 15% 35px auto;
  }
}


/*--------------------------------------------
header
--------------------------------------------*/


#header {
  position: relative;
  background: #ffffff;
  width: 100%;
  height: 60px;
}

.header_logo {
  position: relative;
  left: 20px;
  top: 15px;
  width: auto;
  height: 30px;
}

.header_logo img {
  display: block;
  width: auto;
  height: 30px;
}


.header_cta_button {
  position: fixed;
  top: 0;
  right: 0;
  width: auto;
  height: 60px;
  z-index: 99999;
}

.header_cta_button img {
  display: block;
  width: auto;
  height: 60px;
}


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

  .header_cta_button {
    display: none;
  }

}


/*--------------------------------------------
hero
--------------------------------------------*/

#hero {
  position: relative;
  background: url(../images/hero_bg.jpg) no-repeat center center;
  background-size: cover;
  min-height: 660px;
  height: 100svh;
}

.hero_content {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.hero_title {
  position: relative;
  padding-top: 40px;
}

.hero_title img {
  display: block;
  max-width: 550px;
  width: 100vw;
  height: auto;
}

.hero_info {
  position: relative;
  padding-bottom: 100px;
}

.hero_speaker {
  position: relative;
  margin: 0 0 20px 6%;
  width: 135px;
  height: auto;
}

.hero_speaker img {
  width: 100%;
}

.hero_info_text {
  position: relative;
}

.hero_info_text img {
  display: block;
  max-width: 550px;
  width: 100vw;
  height: auto;
}

.hero_badge {
  position: absolute;
  bottom: 90px;
  right: 20px;
}

.hero_badge img {
  display: block;
  max-width: 115px;
  width: 20vw;
  height: auto;
}


@media screen and (min-width: 768px) {
  #hero {
    height: calc(100vh - 30px);
  }

  .hero_speaker {
    width: 150px;
    height: auto;
  }
}


@media screen and (max-width: 375px) {
  .hero_speaker {
    width: 120px;
  }
}


/*--------------------------------------------
コンテンツ共通
--------------------------------------------*/

.lead {
  margin: 0 auto 0 auto;
  padding: 30px 6% 0 6%;
}


.caption {
  font-size: calc(12 / var(--root-font-size) * 1rem);
  margin: 0 auto 0 auto;
  padding: 20px 6% 0 6%;
}


/*--------------------------------------------
problem
--------------------------------------------*/

#problem {
  position: relative;
  background: #222222;
  padding: 50px 0 0 0;
}

.problem_title {
  position: relative;
}

.problem_title img {
  display: block;
  max-width: 550px;
  width: 100vw;
  height: auto;
}

.stats_grid {
  margin: 40px auto 0 auto;
}

.stats_grid .stats_card {
  width: 72%;
  left: 6%;
}

.stats_grid .stats_card img {
  display: block;
  width: 100%;
  height: auto;
}

#ribbon {
  background: #fb4604;
  margin-top: 50px;
  padding: 40px 0 40px 0;
}

.ribbon_title {
  position: relative;
}

.ribbon_title img {
  display: block;
  max-width: 550px;
  width: 100vw;
  height: auto;
}

.ribbon_text {
  position: relative;
  padding: 20px 0 0 0;
}

.ribbon_text img {
  display: block;
  max-width: 550px;
  width: 100vw;
  height: auto;
}


/*--------------------------------------------
checklist
--------------------------------------------*/

#checklist {
  position: relative;
  background: #222222;
  padding: 50px 0 50px 0;
}

.checklist_title {
  position: relative;
}

.checklist_title img {
  display: block;
  max-width: 550px;
  width: 100vw;
  height: auto;
}

.checklist_card {
  margin: 30px auto 0 auto;
  padding: 0 6% 0 6%;
}

.checklist_card img {
  width: 100%;
  height: auto;
}

/*--------------------------------------------
program
--------------------------------------------*/

#program {
  position: relative;
  background: #f5f5f5;
  padding: 50px 0 50px 0;
}

.program_title {
  position: relative;
}

.program_title img {
  display: block;
  max-width: 550px;
  width: 100vw;
  height: auto;
}

.program_block {
  position: relative;
  padding: 40px 0 0 0;
}

.program_block_title {
  position: relative;
}

.program_block_title img {
  display: block;
  max-width: 550px;
  width: 100vw;
  height: auto;
}

ul.program_list {
  margin: 0 auto 0 auto;
  padding: 20px 6% 0 6%;
}

ul.program_list li {
  position: relative;
  color: #222222;
  list-style: none;
  padding-left: 1em;
}

ul.program_list li::before {
  content: "";
  width: 5px;
  height: 5px;
  background-color: #222222;
  position: absolute;
  top: 0.8em;
  left: 0;
}

.hr {
  background-color: #c7c7c7;
  width: 88%;
  height: 1px;
  margin: 30px auto 0 auto;
}


/*--------------------------------------------
organize
--------------------------------------------*/

#organize {
  position: relative;
  background: #222222;
  padding: 50px 0 50px 0;
}

.organize_content {
  display: grid;
  gap: 30px;
}

.organize_card {
  position: relative;
  background: #333333;
  width: 88%;
  margin: 0 auto 0 auto;
  padding: 30px 0 30px 0;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.organize_card_title {
  position: relative;
}

.organize_card_title img {
  display: block;
  max-width: 490px;
  width: 100%;
  height: auto;
}

.org_info {
  margin: 0 auto 0 auto;
  padding: 20px 6% 0 6%;
}

.org_media {
  width: 50%;
  height: auto;
}

.org_media img {
  width: 100%;
}

.profile_body {
  margin-top: 20px;
  display: grid;
  gap: 10px;
}

h3.profile_name {
  font-size: calc(18 / var(--root-font-size) * 1rem);
  line-height: 1.2em;
}


/*--------------------------------------------
outline
--------------------------------------------*/

#outline {
  position: relative;
  background: #f5f5f5;
  padding: 50px 0 50px 0;
}

.outline_table {
  color: #222222;
  width: 88%;
  margin: 50px auto 0 auto;
}

.outline_table tr {
  display: flex;
  border-top: solid 1px #c7c7c7;
}

.outline_table tr:first-of-type {
  border-top: none;
}

.outline_table th {
  font-family: YakuHanJP_Narrow, 'tt-commons-pro', 'GothicMB101_Bold', 'YuGothic', '游ゴシック', 'Yu Gothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-weight: 600;
  width: 25%;
  padding: 27px 0 27px 0;
}

.outline_table td {
  width: 75%;
  padding: 27px 0 27px 0;
}

.outline_table tr:first-child th,
.outline_table tr:first-child td {
  padding-top: 0;
}

.outline_table tr:last-child th,
.outline_table tr:last-child td {
  padding-bottom: 0;
}

ul.outline_list {
  margin: 0 auto 0 auto;
}

ul.outline_list li {
  position: relative;
  color: #222222;
  list-style: none;
  padding-left: 1em;
}

ul.outline_list li::before {
  content: "";
  width: 5px;
  height: 5px;
  background-color: #fb4604;
  position: absolute;
  top: 0.8em;
  left: 0;
}


/*--------------------------------------------
registration
--------------------------------------------*/

#registration {
  position: relative;
  background: #222222;
  padding: 50px 0 10px 0;
}

.registration_title {
  position: relative;
}

.registration_title img {
  display: block;
  max-width: 550px;
  width: 100vw;
  height: auto;
}

.registration_content iframe {
  display: block;
  max-width: 550px;
  width: 100%;
  height: 100vh;
  min-height: 1200px;
  margin: 0 auto 0 auto;
  padding: 50px 6% 0 6%;
  border: none;
}