div.spHeader > h1 { background-image:url(../image/mainView.jpg) }
main {
  position:relative;
  font-family: "ryo-gothic-plusn", sans-serif;
  font-weight: 500;
  font-style: normal;
  color:#001E3C;
  font-size:16px;
  padding-bottom:0;
  min-height: 100%;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(../image/bg.png);
}
a[name] { display: block; margin-top:-100px; padding-top:100px }
ul,li { margin:0; padding:0 }
li:first-child { border-top:none }
li span {
  font-size: inherit;
  line-height: inherit;
  line-height: inherit;
  display: inherit;
  color: inherit;
}
li a:after { display:none; }

/*CONTENTS*/
article > section { box-sizing:border-box; padding-bottom:80px }
article:nth-of-type(odd) > section { background-color:rgba(0,30,60,0.4); }
.content { width:1100px; max-width:100%; margin-left:auto; margin-right:auto; box-sizing:border-box; padding:50px }
.flexBox.spNoFlex > .w40 { width: 40% }
.f25 { font-size:25px }

/*ボタン*/
.button-blue { border-color:#00728C; border-width: 2px; background-color:#001E3C; color:#FFF }
.button-blue > a { color:#FFF; border-color:#00728C; border-width: 2px; }
.button-blue:hover, .button-blue > a:hover { color:#001E3C; background-color:#FFF000 }
a.btn { display:inline-block; background-color:#005C79; color:#FFF; padding:3px 35px; border:#005C79 2px solid; text-decoration:none; border-radius:30px }
a.btn:hover { background-color:#fff000; color:#001E3C; border-color:#fff000 }

/*CONT*/
article#about > section { background-color:rgba(0,30,60,0.8); }

/*TITLE*/
h2 {
  margin: 0 0 50px;
  border: none;
  padding: 0;
  min-height: initial;
  font-size: 70px;
  font-weight: bold;
  line-height: initial;
  color: #FFF000;
  position: relative;
  background-color: transparent;
  text-align: center;
  font-family: "chaloops", sans-serif; font-weight: 700; font-style: normal
}
h2:before {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 168px;
  line-height: 1;
  color: rgba(0,30,60,0.1);
  z-index: 1;
  font-family: "chaloops", sans-serif; font-weight: 700; font-style: normal
}
h2:after {
  display: block;
  margin-left:auto;
  margin-right:auto;
  width:fit-content;
  line-height: 1;
  color: #FFF;
  font-size:18px;
  font-family: "ryo-gothic-plusn", sans-serif; font-weight: 500; font-style: normal
}
h2 > span {
  display:block;
  z-index:90;
  position:relative;
}
#event h2:before { content:"EVENT" }
#event h2:after { content:"イベント" }
#present h2:before { content:"PRESENT" }
#present h2:after { content:"プレゼント" }
#goods h2:before { content:"GOODS" }
#goods h2:after { content:"グッズ" }
#gourmet h2:before { content:"GOURMET" }
#gourmet h2:after { content:"グルメ" }
h3 {
  margin: 0 0 20px;
  padding: 6px;
  box-sizing: border-box;
  min-height: initial;
  font-size: 38px;
  line-height: 1;
  position: relative;
  border: none;
  color: #FFF;
  background-color: #005C79;
  font-family: "ryo-gothic-plusn", sans-serif; font-weight: 700; font-style: normal
}
#present h3 { display:flex; }
#present h3 > span {
  background-color: #00A8A8;
  box-sizing: border-box;
  font-size: 26px;
  display: flex;
  align-items: center;
  vertical-align: text-top;
  padding: 0 8px;
  margin-right: 10px;
}

/*日程-about*/
#about .aboutDate { width:1000px; max-width:100%; margin-left:auto; margin-right:auto; margin-top:30px }
#about .aboutDate .full-image { box-sizing:border-box; margin:20px 10px }
#about i.fa-ticket { transform: skew(10deg, -10deg); margin-right:10px; font-size:125% }

/*EVENT*/
#event .flexBox > div { width:53% }
#event .flexBox .full-image { width:41% }
#event .flexBox .full-image img { box-shadow: 15px 15px 0px 0 rgb(0,92,121); }
#event .flexBox > div > div.tableWrap { background-color:rgba(0,92,121,0.3); padding: 20px; color:#001E3C; margin-bottom:20px }
#event table,
#event th,
#event td { border-spacing: 0; border: none; padding: 0; border-collapse: collapse; border:#005C79 1px solid; padding:5px }
#event table { width:100% }
#event th { width:25% }
#event td { text-align:left; }
#event td a { color:#001E3C }

/*PRESENT*/
#present .flexBox > div { width:53% }
#present .flexBox .full-image { width:41% }

/*GOURMET*/

/*GOODS*/
#goods { color:#FFF; font-size:min(3vw,18px); }
#goods h3 { font-size:min(5vw,24px); margin-bottom:0; padding-top:10px; padding-bottom:10px; line-height:1.3 }
#goods .flexBox > div { width:32%; margin-bottom:20px }
#goods .flexBox::after{ content:""; display: block; width:32% }


/*NEWS*/
article#news > section { background-color:#001E3C }
article#news h2 { font-size: 30px; color:#fed002; margin-bottom:10px; text-align:left; }
article#news li { border-bottom:#005C79 2px solid; padding:0 }
article#news li a { padding:15px 15px 15px 0; display:flex; align-items: flex-start; justify-content: flex-start; color:#FFF }
article#news li a > span { width:98% }
article#news li a:before { font-family: "Font Awesome 6 Free"; content:"\f0da"; font-weight:900; color:#08C7FE; width:2% }
article#news li a:hover { text-decoration:none; }

/*FONT*/
/*日本語*/
/*りょうゴシック PlusN*/
.font-RyogoM { font-family: "ryo-gothic-plusn", sans-serif; font-weight: 500; font-style: normal }
.font-RyogoB { font-family: "ryo-gothic-plusn", sans-serif; font-weight: 700; font-style: normal }
/*英数字*/
/*Chaloops*/
.font-ChaloopsM { font-family: "chaloops", sans-serif; font-weight: 600; font-style: normal }
.font-ChaloopsB { font-family: "chaloops", sans-serif; font-weight: 700; font-style: normal }

/*
==================================================
～1040
==================================================
*/
@media screen and ( max-width:1040px) {
  a[name] { margin-top:-80px; padding-top:80px }
  article { padding:0 }
  article > section { padding-left:1em; padding-right:1em; padding-bottom:50px }
  .content { padding:20px 0 }
  h2 { margin-bottom:20px }
  h2:before { font-size:120px }
  /*EVENT*/
  #event .flexBox { flex-wrap: wrap }
  #event .flexBox > div { width:100% }
  #event .flexBox .full-image { width:100%; text-align:center }
  #event .flexBox .full-image > img { max-width:90% }
  #event .flexBox .btnWrap { text-align:center; margin-bottom:20px }
  /*PRESENT*/
  #present .flexBox { flex-wrap: wrap }
  #present .flexBox > div { width:100% }
  #present .flexBox .full-image { width:100%; text-align:center }
  #present .flexBox .btnWrap { text-align:center; margin-bottom:20px }
  /*GOODS*/
  #goods .flexBox > div { width:49% }
  #goods .flexBox::after{ display:none }
  /*NEWS*/
  article#news li a > span { width:97% }
  article#news li a:before { width:3% }
/*～1039 END*/
}
/*
==================================================
～670
==================================================
*/
@media screen and ( max-width:670px ){
  div.spHeader > h1 { background-image:url(../image/mainView_sp.jpg) }
  .flexBox.spNoFlex > .w40 { width: 100% }
  .f25 { font-size:18px }
  h2 { font-size:50px }
  h2:before { font-size:70px }
  h3 { font-size:26px; line-height:1.2 }
  #present h3 { display:block }
  #present h3 > span { width:fit-content; margin-bottom:5px }
  /*GOODS*/
  #goods .flexBox {justify-content: center;}
  #goods .flexBox > div { width:80% }
  /*NEWS*/
  article#news li a > span { width:95% }
  article#news li a:before { width:5% }
/*～670 END*/
}