@charset "utf-8";

/*================================================
Firstview
================================================*/

.Firstview {
  padding: 50px 0px;
  background-color: #000000;
  background-position: center center;
  background-image: url(../img/firstview_title.jpg);
}
.FirstviewTitle {
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  line-height: 1.25;
  color: #FFFFFF;
  font-size: 48px;
  font-weight: 900;
}

@media (max-width: 1365px) {

  .Firstview {
    padding: 50px 0px;
  }
  .FirstviewTitle {
    font-size: 36px;
  }
}

@media (max-width: 1023px) {

  .Firstview {
    padding: 25px 0px;
  }
  .FirstviewTitle {
    font-size: 24px;
  }
}

/*================================================
Event
================================================*/

.Event {
  padding: 100px 0px;
  background-color: #EEEEEE;
}
.EventInner {
  max-width: 1280px;
  margin: 0px auto 50px auto;
}

@media (max-width: 1365px) {

  .Event {
    padding: 75px 0px;
  }
}

@media (max-width: 1023px) {

  .Event {
    padding: 25px 0px 50px 0px;
  }
  .EventInner {
    margin: 0px auto 0px auto;
  }
}

/*================================================
EventOne
================================================*/

.EventOne {
  clear: both;
  width: 100%;
  margin: 0px auto 50px auto;
  padding: 50px;
  background-color: #FFFFFF;
  box-sizing: border-box;
}
.EventOne.Error .EventOneAboutName {
  color: #BF0000;
}
.EventOneImage {
  display: block;
  float: left;
  width: 48%;
  margin-right: 2%;
  box-sizing: border-box;
}
.EventOneImage img {
  width: 100%;
  height: auto;
}
.EventOneAbout {
  display: block;
  float: left;
  width: 50%;
  box-sizing: border-box;
}
.EventOneAboutName {
  margin-top: 5px;
  margin-bottom: 15px;
  text-align: justify;
  text-justify: inter-ideograph;
  line-height: 1.25;
  font-size: 20px;
  font-weight: 900;
}
.EventOneAbout dl {
  clear: both;
  width: 100%;
  margin-bottom: 10px;
}
.EventOneAbout dt {
  display: block;
  float: left;
  width: 18%;
  margin-right: 2%;
  padding: 6px 0px 5px 5px;
  text-align: center;
  line-height: 1.25;
  letter-spacing: 5px;
  background-color: #000000;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  box-sizing: border-box;
}
.EventOneAbout dd {
  display: block;
  float: left;
  width: 80%;
  padding: 6px 0px 5px 0px;
  text-align: justify;
  text-justify: inter-ideograph;
  line-height: 1.25;
  background-color: #FFFFFF;
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  box-sizing: border-box;
}
.EventOneAboutButton {
  margin-top: 20px;
  margin-bottom: 0px;
}
.EventOneAboutButton a {
  display: block;
  padding: 20px 10px;
  border-radius: 50px;
  text-align: center;
  text-decoration: none;
  line-height: 1.00;
  background-color: #FF6600;
  color: #FFFFFF;
  font-size: 24px;
  font-weight: 900;
  box-shadow: 0px 2px 12px -5px #333333;
}
.EventOneAboutButton a:hover {
  transition: all 0.3s ease;
  box-shadow: 0px 2px 20px -8px #333333;
}

@media (max-width: 1365px) {

  .EventOneAboutName {
    font-size: 18px;
  }
  .EventOneAbout dt {
    font-size: 15px;
  }
  .EventOneAbout dd {
    font-size: 15px;
  }
  .EventOneAboutButton a {
    padding: 20px 10px;
    font-size: 20px;
  }
}

@media (max-width: 1023px) {

  .EventOne {
    width: 90%;
    margin: 0px auto 25px auto;
    padding: 10px;
  }
  .EventOneImage {
    float: none;
    width: 100%;
    margin-right: 0%;
    margin-bottom: 10px;
  }
  .EventOneAbout {
    float: none;
    width: 100%;
  }
  .EventOneAboutName {
    width: 96%;
    margin: 0px auto 10px auto;
    font-size: 16px;
  }
  .EventOneAbout dt {
    float: none;
    width: 100%;
    margin-right: 0%;
    padding: 5px 0px 5px 5px;
    line-height: 1.12;
    font-size: 13px;
  }
  .EventOneAbout dd {
    float: none;
    width: 100%;
    padding: 5px 0px 5px 0px;
    text-align: center;
    line-height: 1.00;
    font-size: 13px;
  }
  .EventOneAboutButton a {
    padding: 15px 10px;
    font-size: 20px;
  }
}

/*================================================
About
================================================*/

.About {
  width: 100%;
  margin: 0px auto 50px auto;
  padding: 50px 0px;
  background-color: #FFFFFF;
  box-sizing: border-box;
}
.AboutText {
  margin-bottom: 0px;
  text-align: center;
  line-height: 1.25;
  color: #CCCCCC;
  font-size: 16px;
  font-weight: 700;
}

@media (max-width: 1023px) {

  .About {
    width: 90%;
    padding: 50px 0px;
  }
  .AboutText {
    font-size: 14px;
  }
}

/*================================================
Closing
================================================*/

.Closing {
  clear: both;
  width: 100%;
  text-align: center;
}
.ClosingButton {
  margin-bottom: 0px;
}
.ClosingButton a {
  line-height: 1.25;
  font-size: 18px;
}

@media (max-width: 1365px) {

  .ClosingButton a {
    font-size: 16px;
  }
}

@media (max-width: 1023px) {

  .ClosingButton a {
    font-size: 14px;
  }
}

/*================================================
TextTsume & Ake
================================================*/

.MojiTsume {
  margin-left: -10px;
}
.MojiAke {
  margin-left: 5px;
}

@media (max-width: 1365px) {

  .MojiTsume {
    margin-left: -7px;
  }
}

@media (max-width: 1023px) {

  .MojiAke {
    margin-left: 2px;
  }
  .MojiTsume {
    margin-left: -3px;
  }
}

/*================================================
List Point
================================================*/

.Maru {
  margin-top: 3px;
  margin-bottom: 3px;
  padding-left: 1em;
  text-indent: -1em;
}
.Maru:before {
  content: "\25CF";
  margin: 0px 4px;
}
.Pochi {
  margin-top: 3px;
  margin-bottom: 3px;
  padding-left: 1em;
  text-indent: -1em;
}
.Pochi:before {
  content: "\002A";
  margin: 0px 4px;
}
.Kome {
  margin-top: 3px;
  margin-bottom: 3px;
  padding-left: 1em;
  text-indent: -1em;
}
.Kome:before {
  content: "\203B";
}
.Kacco {
  margin-top: 25px;
  margin-bottom: 5px;
  padding-left: 1.25em;
  text-indent: -1em;
  font-weight: 900;
}
.Kacco:before {
  content: "\3010";
}
.Kacco:after {
  content: "\3011";
}
.Bikkuri {
	margin-right: 5px;
  padding: 3px 8px !important;
  border: 2px #000000 solid;
  border-radius: 30px;
  background-color: #FFCC00;
  color: #000000 !important;
}
.NewWindow {
  line-height: 2.00;
}
.NewWindow img {
  width: 18px !important;
  height: 18px !important;
  margin-right: 5px;
  vertical-align: middle;
}

@media (max-width: 1023px) {
  
  .Pochi {
    font-size: 14px;
  }
  .Kome {
    font-size: 11px;
  }
}

/*================================================
Arrow
================================================*/

.ArrowButton {
  clear: both;
  display: block;
  width: 100%;
  padding: 20px 0px;
  border-bottom: 1px #FFFFFF solid;
  background-color: #000000;
  box-sizing: border-box;
}
.ArrowButton span {
  display: none;
}
.ArrowButton:hover {
  transition: all 0.3s ease;
  background-color: #333333;
}
.ArrowImage {
  position: relative;
  display: block;
  margin-bottom: 0px;
}
.ArrowImage::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: -3px;
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 2px #FFFFFF;
  border-right: solid 2px #FFFFFF;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

@media (max-width: 1023px) {

  .ArrowButton {
    margin-top: 0px;
  }
}

/*================================================
PagetopFix & AnchorNav
================================================*/

html {
  scroll-behavior: smooth;
}
.PagetopFix {
  position: fixed;
  z-index: 9999;
  width: 64px;
  height: 64px;
  right: 40px;
  bottom: 80px;
}
.PagetopFix a img {
  width: 64px;
  height: 64px;
}
.PagetopFix a {
  display: block;
  text-decoration: none;
  color: #FFFFFF;
  font-weight: bold;
  transition: all 0.3s ease;
}
.PagetopFix a:hover {
  opacity: 0.5;
  transition: all 0.3s ease;
}

@media (max-width: 767px) {

  .PagetopFix {
    right: 10px;
    bottom: 10px;
    width: 48px;
    height: 48px;
  }
  .PagetopFix a img {
    width: 48px;
    height: 48px;
  }
}

/*================================================
FadeinUp
================================================*/

#main { overflow-x: hidden; }
.HeadlineUp { animation: SlideInUp 1.6s; } @keyframes SlideInUp { 0% { opacity: 0; transform: translateY(64px); } 100% { opacity: 1; transform: translateY(0); } }
.HeadlineDown { animation: SlideInDown 1.2s; } @keyframes SlideInDown { 0% { opacity: 0; transform: translateY(-16px); } 100% { opacity: 1; transform: translateY(0); } }
.HeadlineLeft { animation: SlideInLeft 1.6s; } @keyframes SlideInLeft { 0% { opacity: 0; transform: translateX(-16px); } 100% { opacity: 1; transform: translateX(0); } }
.HeadlineRight { animation: SlideInRight 1.6s; } @keyframes SlideInRight { 0% { opacity: 0; transform: translateX(16px); } 100% { opacity: 1; transform: translateX(0); } }
.HeadlineZoom { animation: SlideInZoom 2.0s; } @keyframes SlideInZoom { 0% { opacity: 0; transform: scale(0.85); } 100% { opacity: 1; transform: scale(1.0); } }
.HeadlineLag { animation: SlideInLag 2.4s; } @keyframes SlideInLag { 0% { opacity: 0; transform: translateX(-16px); } 100% { opacity: 1; transform: translateX(0); } }

.FadeinUp {
  opacity : 0;
  transform : translate(0, 50px);
  transition : all 2000ms;
}
.FadeinDown {
  opacity : 0;
  transform : translate(0, -50px);
  transition : all 2000ms;
}
.FadeinLeft {
  opacity : 0;
  transform : translate(-100px, 0);
  transition : all 1000ms;
}
.FadeinRight {
  opacity : 0;
  transform : translate(100px, 0);
  transition : all 1000ms;
}
.FadeinZoomBig {
  opacity : 0;
  transform: scale(0.85,0.85);
  transition : all 750ms;
}
.FadeinZoomSmall {
  opacity : 0;
  transform: scale(1.15,1.15);
  transition : all 750ms;
}
.FadeinUp.Scrollin,
.FadeinDown.Scrollin,
.FadeinLeft.Scrollin,
.FadeinRight.Scrollin {
  opacity : 1;
  transform: scale(1.0,1.0);
  transform : translate(0, 0);
}
.FadeinZoomBig.Scrollin,
.FadeinZoomSmall.Scrollin {
  opacity : 1;
  transform: scale(1.0,1.0);
}

/*================================================
Parallel
================================================*/

.Parallel {
  width: 100%;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

/*================================================
clearfix
================================================*/

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

/*================================================
display on / off
================================================*/

.pc-br {
  display: block;
}
.sp-br {
  display: none;
}

@media (max-width: 1023px) {

  .pc-br {
    display: none;
  }
  .sp-br {
    display: block;
  }
}