@charset "UTF-8";

/* header
---------------------------------------- */
header {
  width: 100%;
  background: no-repeat;
  background-color: #3694ef;
  background-image: url("../image/kv-bg.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
header .kv {
  width: min(100%,1536px);
  aspect-ratio: 100 / 114;
	margin-inline: auto;
  background-image: url("../image/kv-taizo.webp");
  background-repeat: no-repeat;
  background-position: right 35% bottom -30%;
  background-size: 80% auto;
}
header h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  width: 96%;
  height: 100%;
	margin-inline: auto;
}
header h1 img {
  margin-top: 2.5%;
}
@media print, screen and (min-width: 600px) {
  header .kv {
    aspect-ratio: 100 / 55;
    background-position: right 120% bottom; background-size: 56% auto;
  }
  header h1 { align-items: center; justify-content: flex-end; width: 90%; }
  header h1 img { width: 73%; margin-top: -7%; }
}
@media print, screen and (min-width: 960px) {
  header .kv {
    aspect-ratio: 100 / 47.5;
    background-position: right 112.5% bottom; background-size: 48% auto;
  }
}
@media print, screen and (min-width: 1536px) {
  header .kv {
    aspect-ratio: initial; height: 650px;
    background-position: right 865px bottom; background-size: 660px auto;
  }
  header h1 { width: 1230px; }
  header h1 img { width: 910px; }
}


/* main : common
---------------------------------------- */
/* text decoration */
.text-small {
  font-size: 0.85em;
}
.text-smallest {
  font-size: 0.7em;
}
.text-large {
  font-size: 1.25em;
  line-height: 1.6;
}
.text-bold {
  font-weight: bold;
}
.text-red {
  color: #C80028;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-marker {
  display: inline;
  background: linear-gradient(transparent 10%, #ffff3b 10%, #ffff3b 95%, transparent 95%);
}

/* button */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(95%,300px);
  height: 65px;
  margin: 0.5em auto;
  padding-inline: 1.0em;
  border-width: 1px;
  border-style: solid;
  border-color: #181818;
  border-radius: 100vh;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-size: 1.1em;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}
@media print, screen and (min-width: 1366px) {
  .btn { width: min(90%,320px); height: 70px; }
}
.btn + .btn {
  margin-top: 1.0em;
}
a.btn {
  background: linear-gradient(165deg, #ffff3b, #FFD600);
  color: #181818;
  box-shadow: 4px 4px 0 #181818;
  transition: .2s;
}
a.btn:hover,
a.btn:active {
  background-color: #181818;
  box-shadow: none;
  transform: translate(4px, 4px);
}
.btn.disabled {
  border-color: #757575;
  background-color: #BDBDBD;
  color: #181818;
}

/* layout */
.area {
  width: 100%;
  padding-block: 10%;
}
.area .contents {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  column-gap: 5%;
  width: min(90%,1230px);
  margin-inline: auto;
}
.area .contents h2 {
}
.area .contents .col {
}
.area:not(.outro) .contents .col > * {
  margin-top: 10vw;
}
.area:not(.outro) .contents .col:first-of-type > *:first-child {
  margin-top: initial;
}
.area.outro .contents .col > * {
  margin-top: 5vw;
}
.area.outro .contents .col:first-of-type > *:first-child {
  margin-top: initial;
}
@media print, screen and (min-width: 600px) {
  .area { padding-block: min(7%,100px); }
  .area .contents { grid-template-columns: repeat(2, 1fr); }
  .area .contents h2 { grid-column: 1 / 3; }
  .area:not(.outro) .contents .col > * { margin-top: min(7vw,80px); }
  .area.outro .contents .col > * { margin-top: min(2vw,25px); }
  .area .contents .col > *:first-child { margin-top: initial; }
}

/* h2 - h4 */
h2,
h3,
h4 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}
h2 {
  line-height: 1.2;
}
h3,
h4 {
  line-height: 1.5;
}
.contents h2 {
  margin-bottom: 5%;
  font-size: 2.25em;
  text-align: center;
}
@media print, screen and (min-width: 600px) {
  .contents h2 { font-size: 3.4em; }
}
@media print, screen and (min-width: 960px) {
  .contents h2 { font-size: 4.3em; }
}
@media print, screen and (min-width: 1366px) {
  .contents h2 { font-size: 4.6em; }
}


/* main : outline
---------------------------------------- */
.outline {
  background-color: #ffffff;
}

/* intro */
.outline .intro {
  font-size: 1.1em;
}
.outline .intro .catch {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-size: 1.5em;
  line-height: 1.5;
  text-shadow: 0.07em 0.07em 0px #ffff3b;
}
.outline .intro p + p {
  margin-top: 0.6em;
}
.outline .intro .audience {
  margin-top: 7%;
}
.outline .intro .audience .balloon {
 	position: relative;
	display: inline-block;
	margin-bottom: 15px;
	padding: 0.25em 0.7em;
 	border-radius: 10px;
	background-color: #005bbb;
  color: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-size: 1.05em;
}
.outline .intro .audience .balloon::before {
	content: "";
	position: absolute;
	left: 20px;
	bottom: -12px;
	display: block;
	width: 0;
	height: 0;
  border-top: 12px solid #005bbb;
	border-right: 12px solid transparent;
}
.outline .intro .audience ul {
  margin: 0 0 0 1.5em;
  padding: 0;
}
.outline .intro .audience li {
  line-height: 1.6;
}
.outline .intro .audience li + li {
  margin-top: 0.4em;
}
@media print, screen and (min-width: 960px) {
  .outline .intro .catch { font-size: 2.0em; }
}

/* info */
.outline .info {
  margin-top: 8%;
  padding: 5%;
  border-radius: 10px;
  background-color: #f2f2f2/*#e0f4ff*/;
}
.outline .info h3 {
  position: relative;
  padding-left: calc(7px + 0.25em);
  color: #005bbb;
  font-size: 1.6em;
}
.outline .info h3:not(:first-child) {
  margin-top: min(5%,20px);
}
.outline .info h3::before {
  content: "";
  position: absolute;
  top: 0.35em;
  left: 0;
  display: block;
  width: 7px;
  height: 1.0em;
  border-radius: 1px;
  background-color: #005bbb;
}
.outline .info .emphasis {
  margin-block: 0.3em;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.32em;
  font-weight: 900;
  line-height: 1.2;
}
.outline .info .plan + .plan {
  margin-top: 3%/*5%*/;
}
@media print, screen and (min-width: 960px) {
  .outline .info h3 { font-size: 1.8em; }
  .outline .info .emphasis { font-size: 1.5em; }
}


/* main : program
---------------------------------------- */
.program {
  background-color: #e1f3ff;
}
.program .contents h3 {
  margin-bottom: 4%;
  padding: 0.15em 0.5em;
  border-radius: 8px;
  background: linear-gradient(45deg, #005bbb 80%, #1978DD 80%, #005bbb 100%);
  color: #ffffff;
  font-size: 1.5em;
}
@media print, screen and (min-width: 960px) {
  .program .contents h3 { font-size: 1.7em; }
}
@media print, screen and (min-width: 1366px) {
  .program .contents h3 { font-size: 1.8em; }
}

/* program detail */
.program .part + .part {
  margin-top: 5%;
}
.program .part h4 {
  display: inline-block;
  padding: 0.15em 0.6em;
  border: 2px solid #005bbb;
  background-color: #ffffff;
  color: #005bbb;
  font-size: 0.95em;
  font-weight: bold;
}
.program .part .theme {
  margin-block: 0.2em;
  color: #181818;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-size: 1.4em;
  line-height: 1.5;
}
.program .part p {
  font-size: 0.95em;
}
@media print, screen and (min-width: 960px) {
  .program .part h4 { font-size: 1.0em; }
  .program .part .theme { font-size: 1.5em; }
}
@media print, screen and (min-width: 1366px) {
  .program .part .theme { font-size: 1.6em; }
  .program .part p { font-size: 0.925em; }
}

/* speaker */
.program figure.speaker img {
  width: min(90%,500px);
  margin-inline: auto;
}
.program figure.speaker figcaption {
  margin-top: 0.2em;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-size: 1.5em;
  line-height: 1.4;
  text-align: center;
}
.program .comment {
  margin-top: 2.5%;
}
.program .profile {
  margin-top: 4%;
  padding: calc(5% - 0.4em) 5%;
  border: 1px solid #181818;
  background-color: #ffffff;
  font-size: 0.95em;
}
.program .profile h4 {
  margin-bottom: 0.3em;
  font-size: 1.15em;
}
@media print, screen and (min-width: 960px) {
  .program figure.speaker figcaption { font-size: 1.6em; }
}
@media print, screen and (min-width: 1366px) {
  .program figure.speaker figcaption { font-size: 1.7em; }
  .program .profile { font-size: 0.925em; }
}


/* main : ticket
---------------------------------------- */
.ticket {
  background-color: #ffffff;
}
.ticket section.plan {
  padding: 5%;
  border: 1px solid #005bbb;
  border-radius: 10px;
}
.ticket section.plan h3 {
  padding: 0.3em 0.6em;
  border-radius: 2px;
  background: linear-gradient(315deg, #005bbb 90%, #1978DD 90%, #005bbb 100%);
  color: #ffffff;
  font-size: 1.6em;
  text-align: center;
}
.ticket section.plan h4 {
  position: relative;
  margin-top: 5%;
  margin-bottom: 0.1em;
  padding-left: calc(7px + 0.25em);
  color: #005bbb;
  font-size: 1.4em;
}
.ticket section.plan h4::before {
  content: "";
  position: absolute;
  top: 0.35em;
  left: 0;
  display: block;
  width: 7px;
  height: 1.0em;
  border-radius: 1px;
  background-color: #005bbb;
}
.ticket section.plan .emphasis {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.32em;
  font-weight: 700;
  line-height: 1.5;
}
.ticket section.plan ul.notice {
  margin: 5% 0 0 1.5em;
  padding: 0;
  font-size: 0.85em;
}
.ticket section.plan ul.notice li {
  line-height: 1.6;
}
.ticket section.plan ul.notice li + li {
  margin-top: 0.4em;
}
@media print, screen and (min-width: 600px) {
  .ticket section.plan { height: 100%; }
}
@media print, screen and (min-width: 960px) {
  .ticket section.plan h3 { font-size: 1.85em; }
}
@media print, screen and (min-width: 1366px) {
  .ticket section.plan h3 { font-size: 2.0em; }
}


/* area : outro
---------------------------------------- */
.outro {
  background-color: #e1f3ff;
}
.outro section:not(.notice) h3 {
  position: relative;
  padding-left: calc(6px + 0.25em);
  color: #005bbb;
  font-size: 1.15em;
}
.outro section:not(.notice) h3::before {
  content: "";
  position: absolute;
  top: 0.35em;
  left: 0;
  display: block;
  width: 6px;
  height: 1.0em;
  border-radius: 1px;
  background-color: #005bbb;
}
.outro .notice {
  width: min(90%,1230px);
  margin-top: 10vw;
  margin-inline: auto;
  padding: 5%;
  border: 1px solid #181818;
}
.outro section.notice h3 {
  margin-bottom: 0.4em;
}
@media print, screen and (min-width: 600px) {
  .outro .notice { margin-top: min(7vw,80px); padding: 2.5%; }
}