html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: rgb(229,0,18);
font-size: 2.2vh;
color: rgb(7,12,71);
font-family: "Helvetica Neue",
  Arial,
  "Hiragino Kaku Gothic ProN",
  "Hiragino Sans",
  Meiryo,

  'Sawarabi Gothic',
  'Noto Sans JP',
  'Roboto', 
  sans-serif;
}

/* @group basic */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, img, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td, header, article, aside, figcaption, figure, footer, menu, nav, section {
margin: 0;
padding: 0;
border: 0;
}
dl, ul {
list-style-type: none;
}
img {
vertical-align: bottom;
}
.individual {
display: none;
overflow: hidden;
}
.pc {
  visibility: visible;
  display: block;
}
.sp {
visibility: hidden;
display: none;
overflow: hidden;
}
/* @end */

/* @group a */
a {
text-decoration: none;
background-color: transparent;
}
a:link {
color: rgb(7,12,71);
}
a:visited {
color: rgb(7,12,71);
}
a:active {
color: rgb(7,12,71);
outline: 0;
}
a:hover {
color: rgb(7,12,71);
outline: 0;
}
.anchor{
  padding-top: 100px !important;
  margin-top: -100px !important;
}
/* @end */

#container {
  margin: 2vh;
  z-index: 0;
}

/* @group page_top */
#page-top {
width: 100%;
height: 8vh;
display: none;
position: fixed;
right: 0;
bottom: 0;
z-index: 800;
}
#page-top p {
text-align: center;
background: rgb(229,0,18);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#page-top p:hover {
background: rgb(229,0,18);
}
#move-page-top {
color: rgb(255,255,255);
font-size: 7vh;
line-height: 8vh;
text-decoration: none;
display: block;
cursor: pointer;
}
/* @end */

/* @group header */
header {
  width: 100%;
  height: 10vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  overflow: hidden;
}
header h1 {
  width: 50%;
  padding: 0 1vh;
}
#header_logo {
  width: 25%;
  max-width: 640px;
  padding: 0 1vh 0 0;
}
#header_logo img {
  width: 100%;
  max-height: 8vh;
}

#linkout {
  width: 20%;
  height: 8vh;
  margin: 0 0 0 5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
	overflow: hidden;
}
#linkout dd {
	width: calc(100% / 3);
  max-width: 5.5vh;
  font-size: 4vh;
	overflow: hidden;
}
/* @end */

nav ul{  
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}
nav li {
  width: calc(100% /4);
}
nav li figure, nav li figure img {
  width: 100%;
}

.contents_block {
  width: 92%;
  margin: 0vh auto 2vh;
  position: relative;
}

/* @group table */
.contents_block table, .contents_blocks table {
    width: 100%;
    margin: 0 auto 0;
    overflow: hidden;
    position: relative;
}
.contents_block tr, .contents_blocks tr {
overflow: hidden;
}
.contents_block th, .contents_blocks th {
vertical-align: middle;
}
.contents_block td, .contents_blocks td {
vertical-align: middle;
}

#goodslist {
  width: 90%;
  margin: 0 auto 2vh;
  overflow: hidden;
  position: relative;
}
#goodslist li {
  font-size: 2.2vh;
  line-height: 1.8em;
  text-align: justify;
  text-justify: inter-ideograph;

  width: 100%;
  padding: 2%;
  border-bottom: 1px solid rgb(7,12,71);
}

/* video */
.youtube {
  position: relative;
  width: 100%;
  margin: 20px;
  max-width: 480px;
  float: left;
  display: inline;
}
.youtube:before {
  content: "";
  display: block;
  padding-top: 56.25%;
  }
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* @group footer */
footer {
  width: 100%;
  padding: 4vh 0 4vh;
  overflow: hidden;
}
.footer_contents {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}
.footer_box {
  width: auto;
  position: relative;
}
#logo_parade {
  padding: 0 0 2vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
}
#logo_parade dd {
  width: calc(90% /4);
}
#logo_parade figure, #logo_parade img {
  width: 100%;
  overflow: hidden;
}
/* @end */

/* grid part */
#contents {
  width: 100%;
  max-width: 1040px; /* 260px x4 */
  margin: 0 auto;
  overflow: hidden;

  display: grid;
  grid-auto-columns: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: min-content;
  gap: 100px 0px;
  grid-auto-flow: row;
  grid-template-areas:
  "cover-contents cover-contents cover-contents cover-contents"
  "content01 content02 content03 content04"
  "sub-contents sub-contents sub-contents sub-contents"
  "schedule schedule form form"
  "contents-title contents-title contents-title contents-title"
  "goodies goodies list list";
}
.cover-contents {
  grid-area: cover-contents; }
.sub-contents {
    grid-area: sub-contents; }
.schedule {
  grid-area: schedule;
}
.form {
  grid-area: form;
}
.contents-title {
  grid-area: contents-title;
}
.content01, .content02, .content03, .content04 {
  grid-area: content01 content02 content03 content04;
}
.goodies { grid-area: goodies; }
.list { grid-area: list; }

@media all and (-ms-high-contrast:none) {
  .contents {
    display: -ms-grid;
    -ms-grid-columns: repeat(4, 1fr);
    -ms-grid-rows: repeat(5, 1fr);
  }
  .cover-contents {
    -ms-grid-rows: 1;
    -ms-grid-row-span: 1;
    -ms-grid-columns: 1;
    -ms-grid-column-span: 4;
  }
  .schedule {
    -ms-grid-rows: 2;
    -ms-grid-row-span: 1;
    -ms-grid-columns: 1;
    -ms-grid-column-span: 2;
  }
  .form {
    -ms-grid-rows: 2;
    -ms-grid-row-span: 1;
    -ms-grid-columns: 3;
    -ms-grid-column-span: 2;
  }
  .content01 {
    -ms-grid-rows: 4;
    -ms-grid-row-span: 1;
    -ms-grid-columns: 1;
    -ms-grid-column-span: 1;
  }
  .content02 {
    -ms-grid-rows: 4;
    -ms-grid-row-span: 1;
    -ms-grid-columns: 2;
    -ms-grid-column-span: 1;
  }
  .content03 {
    -ms-grid-rows: 4;
    -ms-grid-row-span: 1;
    -ms-grid-columns: 3;
    -ms-grid-column-span: 1;
  }
  .content04 {
    -ms-grid-rows: 4;
    -ms-grid-row-span: 1;
    -ms-grid-columns: 4;
    -ms-grid-column-span: 1;
  }
  .goodies {
    -ms-grid-rows: 5;
    -ms-grid-row-span: 1;
    -ms-grid-columns: 1;
    -ms-grid-column-span: 3;
  }
  .list {
    -ms-grid-rows: 5;
    -ms-grid-row-span: 1;
    -ms-grid-columns: 4;
    -ms-grid-column-span: 1;
  }
  .contents-title {
    -ms-grid-rows: 3;
    -ms-grid-row-span: 1;
    -ms-grid-columns: 1;
    -ms-grid-column-span: 4;
  }
}

/* tab contents */
.tab-area {
  width: 100%;
  margin: 0 auto;
}
.tab-btn { display:none; }
.tab-list-wrap {
  display: flex;
  justify-content: flex-start;
}
.tab-list {
  display: block;
  width: 100px;
  padding: 8px 0;
  text-align: center;
  border-radius: 4px 4px 0 0;
  background: rgb(191,156,70);
  cursor: pointer;
}
#tab-btn1:checked ~ .tab-list-wrap #tab-list1,
#tab-btn2:checked ~ .tab-list-wrap #tab-list2,
#tab-btn3:checked ~ .tab-list-wrap #tab-list3,
#tab-btn4:checked ~ .tab-list-wrap #tab-list4 {
  background: rgb(255,255,255); /*対応するボタンにチェックが入ったときに背景を#ffffff（白）に*/
}
.tab-content {
  padding: 0;
  display: none;
}
#tab-btn1:checked ~ .tab-content-wrap #tab-content1,
#tab-btn2:checked ~ .tab-content-wrap #tab-content2,
#tab-btn3:checked ~ .tab-content-wrap #tab-content3,
#tab-btn4:checked ~ .tab-content-wrap #tab-content4 {
  display: block;
  font-weight: bold;
}
.tab-content td:nth-child(1) {width: 18%;}
.tab-content td:nth-child(2) {width: 10%;}
.tab-content td:nth-child(3) {width: 15%;}
.tab-content td:nth-child(4) {width: 15%;}
.tab-content td:nth-child(5) {width: 32%;}
.tab-content td:nth-child(6) {width: 10%;}

.tab-content tr {
	margin: 0;
	overflow: hidden;
}
.tab-content tr:nth-child(even){
    background-image: radial-gradient(rgba(220,220,220,.8) 25%, transparent 0%),
    radial-gradient(rgba(252,190,193,.8) 25%, transparent 0%);
	background-size: .5vh .5vh;
	background-position: 0 0, .25vh .25vh;
}
.tab-content th {
	font-size: 2vh;
	font-weight: bold;
	line-height: 2em;
	text-align: center;
}
.tab-content td {
	font-size: 2.2vh;
	font-weight: normal;
	line-height: 2em;
	text-align: left;
	padding: 1.5vh;
	border-bottom: 1px dotted rgb(7,12,71);
}

#table_map1 tr:nth-child(7), #table_map1 tr:nth-child(14), #table_map1 tr:nth-child(21), #table_map1 tr:nth-child(28), #table_map1 tr:nth-child(22) {
  background-color: lightpink;
}
#table_map2 tr:nth-child(4), #table_map2 tr:nth-child(11), #table_map2 tr:nth-child(18), #table_map2 tr:nth-child(25), #table_map2 tr:nth-child(12) {
  background-color: lightpink;
}
#table_map3 tr:nth-child(8), #table_map3 tr:nth-child(15), #table_map3 tr:nth-child(22), #table_map3 tr:nth-child(29) {
  background-color: lightpink;
}

/* float navigation */
#adbox {
  margin: 0 auto;
}
.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}

/* form invisible */
.panelDraft, #panelBody {
  visibility: hidden;
  display: none;
  overflow: hidden;}

/* @group Clearfix */
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
/* @end */

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

.pc {
visibility: hidden;
display: none;
overflow: hidden;
}
.sp {
  visibility: visible;
  display: block;
}

header { height: 20vh; }
header h1 {
  width: 100%;
  padding: 2vh 0;
  text-align: center;
}
#header_logo {
  width: 100%;
  padding: 0;
}
#header_logo img {
  width: 100%;
  max-height: 8vh;
}
.youtube {
  width: 90%;
  margin: 2vh auto;
  float: none;
  display: block;
}
nav li {
  width: calc(100%/2);
}
#logo_parade dd {
  width: 98%;
  padding: 1.5vh 0;
}

  #contents {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  
    display: grid;
    grid-auto-columns: 100%;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: min-content;
    gap: 0;
    grid-auto-flow: row;
    grid-template-areas:
    "cover-contents"
    "content01"
    "content02"
    "content03"
    "content04"
    "sub-contents"
    "schedule"
    "form"
    "contents-title"
    "goodies"
    "list";
  }

}


/* #contents {border:1px solid red !important;}
header, .cover-contents, .schedule, .form, .contents-title, .goodies, .list {border: 1px solid limegreen !important;}
.content01, .content02, .content03, .content04 {border: 1px solid lightblue !important;} */