@charset "UTF-8";

/* header
================================================= */
header {
  position: relative;
  width: 100%;
  padding: 4vw 0 41vw;
  background-image: url("../image/kv-smp.webp");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
header::before,
header::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}
header::before {
  top: 0;
  background: linear-gradient(#000000, #090909 70%, #111111 85%, #222222);
  z-index: -2;
}
header::after {
  top: 1px;
  background-image: url("../image/bg_area-curve-b.svg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
  z-index: -1;
}
header h1 {
  width: 65%;
	margin-inline: auto;	
}
@media print, screen and (min-width: 600px) {
  header { padding: 4vw 0 12vw; background-image: url("../image/kv-tab.webp"); }
  header h1 { width: 50%; }
}
@media print, screen and (min-width: 1280px) {
  header { padding: 26px 0 128px; background-image: url("../image/kv-pc.webp"); background-size: 110% auto; }
  header h1 { width: min(45%,720px); }
}
@media print, screen and (min-width: 1700px) {
  header { background-size: 105% auto; }
}
@media print, screen and (min-width: 1920px) {
  header { background-size: 1920px auto; }
}


/* main
================================================= */
/* layout : area & section */
.area.intro {
  padding: 9% 0 13%;
}
.area.event {
  padding: 13% 0 9%;
}
.area.info {
  padding: 0 0 13%;
}
.area.tournament {
  padding: 9% 0;
}
.area > section {
  width: min(90%, 1230px);
  margin-inline: auto;
}
@media print, screen and (min-width: 600px) {
  .area.intro { padding: 6% 0 9%; }
  .area.event { padding: 9% 0 6%; }
  .area.info { padding: 0 0 9%; }
  .area.tournament { padding: 6% 0; }
}
@media print, screen and (min-width: 1366px) {
  .area.intro { padding: 82px 0 123px; }
  .area.event { padding: 123px 0 82px; }
  .area.info { padding: 0 0 123px; }
  .area.tournament { padding: 82px 0; }
}

/* intro */
.intro {
  background: #000000;
  font-size: 1.8rem;
}
.intro .flex {
  align-items: flex-start;
  align-content: flex-start;
}
.intro .preface {
  color: #ffffff;
}
.intro .preface p.catch {
  color: #ff230c;
  font-size: 1.4em;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  line-height: 1.5;
}
.intro .preface p + p {
  margin-top: 0.8em;
}
.intro .outline {
  padding: 5%;
  border-radius: 5px;
  background: #00a6bf;
  color: #ffffff;
  font-weight: bold;
}
.intro .outline dt {
  display: inline-block;
  padding: 0 0.5em;
  border-radius: 1px;
  background: #ffffff;
  color: #00a6bf;
  font-size: clamp(1.8rem, 5.0vw, 2.2rem);
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  line-height: 1.4;
}
.intro .outline dd {
  margin-bottom: 5%;
}
.intro .outline dd p {
  margin-bottom: 0.2em;
}
.intro .outline dd p.date {
  width: min(100%,400px);
}
.intro .outline dd p.time,
.intro .outline dd p.place,
.intro .outline dd p.location,
.intro .outline p.fee {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  line-height: 1.3;
}
.intro .outline dd p.time {
  font-size: clamp(2.2rem, 6.8vw, 3.0rem);
}
.intro .outline dd p.place {
  font-size: clamp(1.8rem, 6.5vw, 3.4rem);
}
.intro .outline dd p.location {
  margin-bottom: 0.4em;
  font-size: clamp(1.7rem, 4.5vw, 2.2rem);
}
.intro .outline p.fee {
  display: inline-block;
  padding: 0.2em 0.8em;
  border-radius: 10px;
  background: #FFD627;
  color: #111111;
  font-size: clamp(1.9rem, 6.0vw, 3.4rem);
}
@media print, screen and (min-width: 600px) {
  .intro { font-size: clamp(1.6rem, 2.1vw, 1.8rem); }
  .intro .outline { padding: calc(3% - 0.2em) 3%; }
  .intro .outline dt { font-size: clamp(1.8rem, 3.0vw, 2.2rem); }
  .intro .outline dd { margin-bottom: 7%; }
  .intro .outline dd p.time { font-size: clamp(2.1rem, 3.4vw, 3.6rem); }
  .intro .outline dd p.place { font-size: clamp(2.3rem, 3.7vw, 3.4rem); }
  .intro .outline dd p.location { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
  .intro .outline p.fee { font-size: clamp(2.2rem, 3.8vw, 3.5rem); }
}
@media print, screen and (min-width: 960px) {
  .intro { font-size: 1.85rem; }
  .intro .preface p.catch { font-size: 1.5em; }
  .intro .outline dd { margin-bottom: 5%; }
}
@media print, screen and (min-width: 1366px) {
  .intro { font-size: 2.0rem; }
}

/* event */
.event {
  background: #222222;
}
.event h2 {
  width: 50%;
  margin: 0 auto 7%;
}
.event .event-list section {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  padding: 5%;
  border-radius: 12px;
  background: #fff;
}
.event .event-list section > * {
  width: 100%;
}
.event .event-list section .day {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2%;
}
.event .event-list section .day img {
  width: 50px;
}
.event .event-list section .day img + img {
  margin-left: 3.5%;
}
.event .event-list section h3 {
  margin-bottom: 5%;
  color: #00a0b8;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-size: 2.5rem;
  line-height: 1.4;
}
.event .event-list section p + p {
  margin-top: 0.8em;
}
.event .event-list section img.featured-image {
  margin: 0.4em 0;
}
.event .event-list section .site-flow {
  margin-top: auto;
  padding-top: 5%;
}
.event .event-list section .site-flow .btn {
  margin-left: auto;
}
@media print, screen and (min-width: 600px) {
  .event h2 { width: 32%; max-width: 350px; margin-bottom: 5%; }
  .event .event-list section { padding: 3.5%; }
}
@media print, screen and (min-width: 960px) {
  .event .event-list section .day img { width: 70px; }
  .event .event-list section h3 { margin-bottom: 5%; font-size: 3.4rem; }
}
@media print, screen and (min-width: 1366px) {
  .event .event-list section .day img { width: 80px; }
  .event .event-list section h3 { margin-bottom: 5%; font-size: 3.8rem; }
}

/* info */
.info {
  /*background: #d4efff;*/
  background: #222222;
}
.info section {
  width: 90%;
  max-width: 1230px;
  padding: 5%;
  border-radius: 5px;
  background: #000000;
  color: #ffffff;
}
.info section .col {
  margin-top: -5vw;
}
.info section h2 {
  display: inline-block;
  margin-top: 5vw;
  margin-bottom: 0.3em;
  padding: 0 0.6em;
  border-radius: 1px;
  background: #ffffff;
  color: #000000;
  font-size: 1.1em;
  line-height: 1.6;
}
@media print, screen and (min-width: 600px) {
  .info section { padding: 3.5%; }
  .info section .col { margin-top: -30px; }
  .info section h2 { margin-top: 30px; }
}
@media print, screen and (min-width: 960px) {
  .info section { padding: 3%; }
}
@media print, screen and (min-width: 1366px) {
  .info section { padding: 40px; }
}

/* tournament */
.tournament {
  background: #f15e1d;
}
.tournament section {
  width: 90%;
  max-width: 1093px;
  color: #ffffff;
}
.tournament section hgroup {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 8%;
}
.tournament section hgroup div.fee {
  width: 5.2em;
  margin-bottom: 10px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 2px 0;
  font-size: 2.0rem;
  font-weight: bold;
  line-height: 1.6;
  text-align: center;
}
.tournament section hgroup h2 {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 2.6rem;
  line-height: 1.4;
}
.tournament section .schedule {
  font-size: 1.7rem;
}
.tournament section .schedule h3 {
  position: relative;
  margin-bottom: 0.2em;
  padding-left: 0.75em;
  font-size: 2.0rem;
  line-height: 1.4;
}
.tournament section .schedule h3::before {
  content: '';
  position: absolute;
  top: 0.1em;
  left: 0;
  display: block;
  width: 6px;
  height: calc(100% - 0.2em);
  border-radius: 2px;
  background-color: #ffffff;
}
.tournament section .join {
  margin-top: 8%;
  margin-bottom: 1px;
  background: #ffffff;
  border-radius: 12px;
  font-size: 1.5rem;
  color: #181818;
}
.tournament section .join .card {
  width: 100%;
  margin: 0;
  padding: 5%;
  border-color: #cccccc;
  border-style: dashed;
  border-width: 2px 0 0;
}
.tournament section .join .card:first-child {
  border-width: 0;
}
.tournament section .join .card h3 {
  margin-bottom: 0.3em;
  color: #004592;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 2.0rem;
  line-height: 1.5;
}
.tournament section .join .card .detail img.pic {
  width: 80%;
  max-width: 230px;
  margin: 0.8em auto 0;
}
.tournament section .join .card .detail p + p {
  margin-top: 0.75em;
}
@media print, screen and (min-width: 600px) {
  .tournament section hgroup { align-items: center; justify-content: center; margin-bottom: 6%; }
  .tournament section hgroup div.fee { font-size: 2.2rem; }
  .tournament section hgroup h2 { font-size: 3.0rem; text-align: center; }
  .tournament section .schedule h3 { font-size: 2.15rem; }
  .tournament section .join { margin-top: 5%; }
  .tournament section .join .card { width: 50%; padding: 20px 25px; border-width: 0 0 0 2px; }
}
@media print, screen and (min-width: 960px) {
  .tournament section hgroup div.fee { margin-bottom: 0; margin-right: 0.5em; font-size: 2.5rem; }
  .tournament section hgroup h2 { width: inherit; font-size: 3.6rem; }
  .tournament section .schedule h3 { font-size: 2.3rem; }
  .tournament section .join .card { font-size: 1.6rem; }
  .tournament section .join .card h3 { font-size: 2.2rem; }
  .tournament section .join .card .detail img.pic { width: 60%; max-width: 260px; }

}
@media print, screen and (min-width: 1366px) {
  .tournament section hgroup div.fee { font-size: 2.7rem; }
  .tournament section hgroup h2 { font-size: 3.8rem; }
  .tournament section .schedule h3 { font-size: 2.6rem; }
  .tournament section .join .card { padding: 25px 30px;  font-size: 1.7rem; }
  .tournament section .join .card h3 { font-size: 2.5rem; }
}