@charset "UTF-8";

/* base
================================================= */
body {
  background: linear-gradient(#000000, #222222 30%, #222222);
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}


/* header
================================================= */
header {
  width: min(100%,1230px);
  margin-inline: auto;
  padding: 4% 0 8%;
  background-image: url("../image/kv-local.webp");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 103% auto;
  border: 0px solid #ffffff;
}
header h1 {
  width: 44%;
	margin-inline: auto;	
}
@media print, screen and (min-width: 600px) {
  header { padding: 3.5% 0 7%; background-size: 98% auto; }
  header h1 { width: min(39%,470px); }
}
@media print, screen and (min-width: 960px) {
  header { padding: 45px 0 90px; }
}


/* main
================================================= */
main {
  margin-bottom: 13%;
}
@media print, screen and (min-width: 600px) {
  main { margin-bottom: 9%; }
}
@media print, screen and (min-width: 960px) {
  main { margin-bottom: 100px; }
}


/* main : content
================================================= */
main > section.content {
  width: 90%;
  max-width: 1014px;
  margin: 0 auto;
  padding: 5%;
  border-radius: 8px;
  background: #ffffff;
}
@media print, screen and (min-width: 960px) {
  main > section.content { padding: 60px; }
}


/* main : content : head
================================================= */
.content > .head {
  margin-bottom: 10%;
}
.content > .head h2 {
  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;
}
.content > .head .day {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2%;
}
.content > .head .day img {
  width: 47px;
}
.content > .head .day img + img {
  margin-left: 3.5%;
}
@media print, screen and (min-width: 600px) {
  .content > .head { margin-bottom: 8%; }
  .content > .head h2 { font-size: 3.7rem; }
  .content > .head .day { margin-top: 2%; }
  .content > .head .day img { width: 70px; }
  .content > .head .day img + img { margin-left: 2.5%; }
}
@media print, screen and (min-width: 960px) {
  .content > .head h2 { font-size: 4.3rem; }
  .content > .head .day img { width: 80px; }
}
@media print, screen and (min-width: 1366px) {
  .content > .head h2 { font-size: 4.8rem; }
  .content > .head .day img { width: 85px; }
}


/* main : content : main-text
================================================= */
/* common : layout : flex */
.main-text .flex {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  margin-bottom: -4%;
}
.main-text .flex.col1 {
  justify-content: center;
}
.main-text .flex.col2,
.main-text .flex.col3 {
  justify-content: space-between;
}
.main-text .flex > * {
  margin-bottom: 4%;
}
.main-text .flex.col3 > * {
  width: 47.5%;
}
.main-text .flex > * img {
  margin: 0.4em 0;
}
@media print, screen and (min-width: 600px) {
  .main-text .flex { margin-bottom: -3%; }
  .main-text .flex > * { margin-bottom: 3%; }
  .main-text .flex.col2 > * { width: 47.5%; }
  .main-text .flex.col3 > * { width: 47.5%; }
}
@media print, screen and (min-width: 960px) {
  .main-text .flex.col3 > * { width: 31%; }
  .main-text .flex.col3 > *:nth-child(3n+2):last-child { margin-left: auto; margin-right: 34.5%; }
}

/* common : elements : figure */
figcaption {
  line-height: 1.5;
}
figcaption .name {
  display: block;
  margin-top: 5px;
  text-align: center;
}
figcaption .position {
  display: block;
  margin-top: 4px;
  font-size: 0.9em;
  text-align: center;
}
figure + p.profile {
  margin-top: 6px;
}

/* layout (area) */
.content > .main-text > .outline {
  margin-bottom: 8.5%;
}
.content > .main-text > .detail {
}
@media print, screen and (min-width: 600px) {
  .content > .main-text > .outline { margin-bottom: 5%; }
}

/* outline */
.main-text > .outline > *:first-child {
  margin-top: 0;
}
.main-text > .outline p {
  margin-top: 1.2em;
}
.main-text > .outline img {
  margin-top: 1.6em;
}

/* detail */
.main-text > .detail > *:first-child {
  margin-top: 0;
}
.main-text > .detail h3 {
  display: flex;
  align-items: center;
  margin-top: 1.5em;
  margin-bottom: 0.1em;
  font-size: 1.15em;
  line-height: 1.6;
}
.main-text > .detail h3::before {
  content: '';
  display: block;
  width: 6px;
  height: 1.0em;
  margin-right: 0.3em;
  border-radius: 2px;
  background-color: #00a0b8;
}
.main-text > .detail h4 {
  margin-top: 0.4em;
  margin-bottom: 0.1em;
  font-size: 1.05em;
  line-height: 1.6;
}
.main-text > .detail h3 + h4 {
  margin-top: 0;
}
@media print, screen and (min-width: 960px) {
  .main-text > .detail h3 { font-size: 1.2em; }
  .main-text > .detail h4 { font-size: 1.1em; }
}


/* main : site-flow
================================================= */
main > .site-flow {
  margin-top: 10%;
}
main > .site-flow a.btn {
  width: 80%;
  max-width: 270px;
  margin-left: auto;
  margin-right: auto;
}
@media print, screen and (min-width: 600px) {
  main > .site-flow { margin-top: 6%; }
}
@media print, screen and (min-width: 960px) {
  main > .site-flow a.btn { max-width: 280px; }
}
@media print, screen and (min-width: 1366px) {
  main > .site-flow { margin-top: 70px; }
}


/* specific : lesson
================================================= */
.main-text > .detail img.logo {
  width: min(60%,260px);
  margin-block: 0.4em;
}


/* specific : manarutai
================================================= */
.main-text > .detail ul.timetable {
  list-style: none;
  padding-left: 0;
}
.main-text > .detail ul.timetable li .ttl {
  font-size: 1.025em;
  font-weight: bold;
}
.main-text > .detail ul.timetable li + li {
  margin-top: 0.8em;
}
.main-text > .detail ul.timetable li p + p {
  margin-top: 0.4em;
}
.main-text > .detail ul.timetable li .note-box {
  margin-top: 0.6em;
  padding: min(4%,15px) min(5%,20px);
  border-radius: 5px;
  background: #f1f1f1;
}

/* specific : talkshow
================================================= */
.main-text > .detail ul.guest,
.main-text > .detail ul.host {
  list-style: none;
  padding-left: 0;
}


/* specific : freefoot
================================================= */
.main-text > .outline img.park {
  width: min(100%,600px);
  margin-inline: auto;
  border: 1px solid #000000;
}


/* specific : testride
================================================= */
.main-text > .detail ul.flex.brands {
  flex-direction: column;
  list-style: none;
  padding-left: 0;
}
.main-text > .detail ul.flex.brands li.flux {
  width: 95px;
  margin: 10px 0 5px 3px;
}
.main-text > .detail ul.flex.brands li.nagare-stix {
  width: 200px;
  margin: 10px 0 10px 3px;
}
.main-text > .detail ul.flex.brands li.revolt {
  width: 180px;
  margin: 10px 0 10px 3px;
}
.main-text > .detail ul.flex.brands li.arbor {
  width: 130px;
  margin: 10px 0 10px 3px;
}
.main-text > .detail ul.flex.brands li.union {
  width: 143px;
  margin: 10px 0 12px 3px;
}
.main-text > .detail ul.flex.brands li.deeluxe {
  width: 150px;
  margin: 10px 0 12px 3px;
}
.main-text > .detail ul.flex.brands li.capita {
  width: 140px;
  margin: 10px 0 0 3px;
}
.main-text > .detail ul.flex.brands li.forum {
  width: 145px;
  margin: 10px 0 10px 3px;
}
.main-text > .detail ul.flex.brands li.yonex {
  width: 125px;
  margin: 10px 0 10px 3px;
}
.main-text > .detail ul.flex.brands + p {
  margin-top: 1.0em;
}

@media print, screen and (min-width: 600px) {
  .main-text > .detail ul.flex.brands { flex-direction: row; align-items: center; }
  .main-text > .detail ul.flex.brands li.flux { margin: 5px 35px 15px 0; }
  .main-text > .detail ul.flex.brands li.nagare-stix { margin: 5px 35px 15px 0; }
  .main-text > .detail ul.flex.brands li.revolt { margin: 5px 35px 15px 0; }
  .main-text > .detail ul.flex.brands li.arbor { margin: 5px 35px 15px 0; }
  .main-text > .detail ul.flex.brands li.union { margin: 5px 35px 15px 0; }
  .main-text > .detail ul.flex.brands li.deeluxe { margin: 5px 35px 15px 0; }
  .main-text > .detail ul.flex.brands li.capita { margin: 5px 35px 10px 0; }
  .main-text > .detail ul.flex.brands li.forum { margin: 5px 35px 15px 0; }
  .main-text > .detail ul.flex.brands li.yonex { margin: 5px 0 15px; }
}
@media print, screen and (min-width: 960px) {
  .main-text > .detail ul.flex.brands li.flux { width: 130px; margin: 10px 45px 25px 0; }
  .main-text > .detail ul.flex.brands li.nagare-stix { width: 285px; margin: 10px 48px 25px 0; }
  .main-text > .detail ul.flex.brands li.revolt { width: 260px; margin: 10px 45px 25px 0; }
  .main-text > .detail ul.flex.brands li.arbor { width: 180px; margin: 10px 45px 25px 0; }
  .main-text > .detail ul.flex.brands li.union { width: 185px; margin: 10px 45px 25px 0; }
  .main-text > .detail ul.flex.brands li.deeluxe { width: 195px; margin: 10px 45px 25px 0; }
  .main-text > .detail ul.flex.brands li.capita { width: 200px; margin: 10px 45px 15px 0; }
  .main-text > .detail ul.flex.brands li.forum { width: 205px; margin: 10px 45px 25px 0; }
  .main-text > .detail ul.flex.brands li.yonex { width: 180px; margin: 10px 0 25px; }
}