*, *:before, *:after{
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  color: #222;
}
a,a:link,a:visited{text-decoration: none;color: #eee;}

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
body {
  font-family: "Yu Gothic", YuGothic;
  font-size: 15px;
}

html , body{
  margin: 0;
  padding: 0;
  background-color: #1f254f;
  height: 100vh;
  overflow-x: hidden;
}

section {
  width: 90%;
  height: 100vh;
  text-align: center;
  position: absolute;
  opacity: 0;
  top: 0;
  margin-left: 50px;
}
.after_load{
  opacity: 0;
}
.after_load svg{
  opacity: 0;
}

#block1 {
  background-color: #eee;
  z-index: 40;
  width: 5px;
  height: 0%;
  opacity: 1;
}
#block2 {
  background-color: #eee;
  z-index: 30;
}
#block3 {
  background-color: #eee;
  z-index: 20;
}
#block4 {
  background-color: #1f254f;
  z-index: 10;
}
#block5 {
  z-index: 5;
}

.wrapper{
  display: block;
  position: relative;
  left: 0px;
  width: calc(100vw - 50px);
  height: 100vh;
  background-color: #eee;
  background-image: url(../images/fun/kirakira.png);
  background-repeat: repeat;
  background-size: contain;
  background-blend-mode:screen;
  overflow: hidden;
  z-index: 200;
  margin-left: 0px;
  -webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2);
}
_:-ms-lang(x),.wrapper{
  background-image: url();
}

/*#block1
---------*/
#block1 img{
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#shape{
  position: absolute;
  z-index: -1;
  opacity: .1;
  top: -510px;
  left: -510px;
  width: 1000px;
  -webkit-animation: spin 100s linear infinite;
  -moz-animation: spin 100s linear infinite;
  -ms-animation: spin 100s linear infinite;
  -o-animation: spin 100s linear infinite;
  animation: spin 100s linear infinite;
}
path.st0 {
  fill-opacity: 0;
  transition: fill-opacity 1s;
  fill:none;
  stroke:#1f254f;
  stroke-width:2;
  stroke-miterlimit:10;
}
.fill .st0{
  fill: #1f254f;
  stroke: #1f254f;
  fill-opacity: 1;
}
#shape2{
  position: absolute;
  z-index: -1;
  opacity: .1;
  right: -510px;
  bottom: -510px;
  width: 1000px;
  -webkit-animation: spin 100s linear infinite;
  -moz-animation: spin 100s linear infinite;
  -ms-animation: spin 100s linear infinite;
  -o-animation: spin 100s linear infinite;
  animation: spin 100s linear infinite;
}
path.st1 {
  fill-opacity: 0;
  transition: fill-opacity 1s;
  fill:none;
  stroke:#1E254F;
  stroke-width:2;
  stroke-miterlimit:10;
}
.fill .st1{
  fill: none;
  stroke: #1f254f;
  fill-opacity: 1;
}
_:-ms-lang(x),#shape{
  display: none;
}
_:-ms-lang(x),#shape2{
  display: none;
}

@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
  0% {-moz-transform: rotate(0deg);}
  100% {-moz-transform: rotate(360deg);}
}
@-o-keyframes spin {
  0% {-o-transform: rotate(0deg);}
  100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}


.jyo {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  height: 30px;
  border-bottom: 1px solid #1f254f
}
.jyo:before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  background-color: #1f254f;
  position: absolute;
  bottom: -2.5px;
  left: -1px;
}
.jyo div {
  display: block;
  position: relative;
  float: left;
  height: 100%;
  font-size: 13px;
  line-height: 30px;
  margin: 0 20px;
}
.jyo div a {
  color: #1f254f;
}
.jyo div a:hover {
  color: #1f254f;
}

.jyo div:not(.sns) a{
  margin-left: -0.85em;
}
.jyo div:not(.sns) a::before,
.jyo div:not(.sns) a::after {
  display: inline-block;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
  -moz-transition: -moz-transform 0.3s, opacity 0.2s;
  transition: transform 0.3s, opacity 0.2s;
}
.jyo div:not(.sns) a::before {
  margin-right: 5px;
  content: '[';
  -webkit-transform: translate(20px, 0px);
  -moz-transform: translate(20px, 0px);
  transform: translate(20px, 0px);
}
.jyo div:not(.sns) a::after {
  margin-left: 5px;
  content: ']';
  -webkit-transform: translate(-20px, 0px);
  -moz-transform: translate(-20px, 0px);
  transform: translate(-20px, 0px);
}

.jyo div:not(.sns) a:hover::before,
.jyo div:not(.sns) a:hover::after,
.jyo div:not(.sns) a:focus::before,
.jyo div:not(.sns) a:focus::after {
  opacity: 1;
  color: #1f254f;
  -webkit-transform: translate(0px, 0px);
  -moz-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
}
.jyo div:not(.sns) a:hover,
.jyo div:not(.sns) a:focus{
  color: #1f254f;
}

/*#block2
---------*/
#block2 img{
  max-height: 90%;
  max-width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#block2 img:hover {
  box-shadow: 5px 5px 10px rgba(74, 75, 157, 0.5);
}
/*#block3
---------*/
#block3 .youtube{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#block3 .youtube iframe {
  width:50vw;
  height:28.25vw;
  background-color: #1f254f;
  border:2px solid #1f254f;
  box-sizing: border-box;
  border-radius: 1px;
}
@media screen and (max-width:530px){
  #block3 .youtube iframe{
    width: calc(100vw - 4em);
    height: 49.9vw;
  }
}
/*#block4
---------*/
#map{
  position: absolute;
  width: 100%;
  height: 100%;
}
.gm-style-mtc,
.gm-svpc,
.gm-bundled-control,
.gm-fullscreen-control{
  display: none;
}
/*上から「地図/航空写真」「人を投げる」「拡大/縮小」のボタン*/

.footer{
  position: relative;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 100%;
  height: 50%;
  z-index: 0;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
  padding: 3% 0;
}
.footer a{color: #aaa;}
.footer::before {
  content: '';
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: -5px;
  right: -5px;
  z-index: -1;
  filter: blur(5px);
}
.fo{
  position: relative;
  width: 20%;
  height: 100%;
  float: left;
  padding: 0 2%;
}
.fo div{
  display: block;
  width: 100%;
  height: 40px;
  color: #eee;
  line-height:  40px;
  z-index: 10;
  text-align: left;
}
.fo_1{
  width: 30%;
}
.fo_2{
  margin-left: 15%;
}
.fo_1 span{
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  top: 5px;
}
.fo_1 span img{
  width: 30px;
  margin-left: 5px;
}
.fo_1 i{
  font-style: normal;
/*  margin-left: 50px;*/
  color: #777;
  text-align: justify;
}
div.co-r{
  color: #777;
}
.co-r:before{
  font-family: FontAwesome;
  display: inline-block;
  color: #777;
  content: '\f1f9';
  width: 20px;
}
div.com {
  color: #777;
  line-height: 20px;
}
div.com a{
  color: #777;
  border-bottom: transparent;
  text-decoration: underline;
}
/*
.sns{
  position: absolute;
  bottom: 0;
  margin-left: -2%;
}
.sns a{
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  margin-right: 5px;
  -webkit-transition: -webkit-all 0.3s;
  -moz-transition: -moz-all 0.3s;
  transition: all 0.3s;
}
.sns a:nth-child(1){background-image: url(../images/sns/twitter_color.png)}
.sns a:nth-child(2){background-image: url(../images/sns/facebook_white.png)}
.sns a:nth-child(3){background-image: url(../images/sns/youtube_red_sq.png)}
.sns a:nth-child(4){background-image: url(../images/icon/i_rss.png)}
.sns a:nth-child(5){background-image: url(../images/sns/line_green.png)}

.sns a:nth-child(1):hover{background-image: url(../images/icon/i_twitter_w.png)}
.sns a:nth-child(2):hover{background-image: url(../images/icon/i_facebook_w.png)}
.sns a:nth-child(3):hover{background-image: url(../images/icon/i_youtube_w.png)}
.sns a:nth-child(4):hover{background-image: url(../images/icon/i_rss_w.png)}
.sns a:nth-child(5):hover{background-image: url(../images/icon/i_line_w.png)}

.sns a:before {
  display: block;
  position: absolute;
  top: 0px;
  width: 100px;
  margin-left: -35px;
  text-align: center;
  opacity: 0;
  z-index: -1;
  transition: all .3s;
}
.sns a:hover:before {
  top: -30px;
  opacity: 1;
}
.sns a:nth-child(1):before {content: 'Twitter'}
.sns a:nth-child(2):before {content: 'Facebook'}
.sns a:nth-child(3):before {content: 'YouTube'}
.sns a:nth-child(4):before {content: 'Ameba'}
.sns a:nth-child(5):before {content: 'LINE@'}
*/

/*hv_bra
--------*/
/*
.hv_bra div:not(.sns) a{
  margin-left: -0.85em;
}
.hv_bra div:not(.sns) a::before,
.hv_bra div:not(.sns) a::after {
  display: inline-block;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
  -moz-transition: -moz-transform 0.3s, opacity 0.2s;
  transition: transform 0.3s, opacity 0.2s;
}
.hv_bra div:not(.sns) a::before {
  margin-right: 5px;
  content: '[';
  -webkit-transform: translate(20px, 0px);
  -moz-transform: translate(20px, 0px);
  transform: translate(20px, 0px);
}
.hv_bra div:not(.sns) a::after {
  margin-left: 5px;
  content: ']';
  -webkit-transform: translate(-20px, 0px);
  -moz-transform: translate(-20px, 0px);
  transform: translate(-20px, 0px);
}

.hv_bra div:not(.sns) a:hover::before,
.hv_bra div:not(.sns) a:hover::after,
.hv_bra div:not(.sns) a:focus::before,
.hv_bra div:not(.sns) a:focus::after {
  opacity: 1;
  color: #eee;
  -webkit-transform: translate(0px, 0px);
  -moz-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
}
.hv_bra div:not(.sns) a:hover,
.hv_bra div:not(.sns) a:focus{
  color: #eee;
}
*/

.hv_bra div a:before {
  font-family: 'FontAwesome';
  content: '';
  display: inline-block;
  opacity: 0;
  margin-right: 5px;
  visibility: hidden;
  width: 7px;
  text-align: center;
}
.hv_bra div a:hover:before {
  content: '\f0da';
  opacity: 1;
  visibility: visible;
  display: inline-block;
  color: #eee;
  -webkit-transform: translate(0px, 0px);
  -moz-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
}
.hv_bra div a:hover{
  color: #eee;
}


/*lower page
------------*/
/*
.header{
  border: 1px solid #500;
  display: block;
  position: fixed;
  font-weight: 800;
  font-size: 15px;
  top: 20px;
  left: 50px;
  width: calc(100vw - 50px);
  height: 50px;
  z-index: 10;
}
.header img{
  display: block;
  position: absolute;
  bottom: 0;
  height: 95%;
}
*/

.content{

  display: block;
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 75vw;
  margin-bottom: 50px;
  min-width: 750px;
}
.content_title-wrapper{
  position: relative;
  display: block;
}
.content_title{
  color: #1f254f;
  font-size: 3.5vw;
  opacity: 0;
}
.content_title_bar1{
  content: ' ';
  display: block;
  position: absolute;
  top: 5.5vw;
  left: 0;
  width: 0vw;
  height: 2px;
  background-color: #1f254f;
  font-size: 3.5vw;
}
.content_title_bar2{
  content: ' ';
  display: block;
  position: absolute;
  top: 6vw;
  left: 0;
  width: 0vw;
  height: 2px;
  background-color: #1f254f;
  font-size: 3.5vw;
}

.content_body{
  width: 100%;
  margin-top: 50px;
  overflow: visible;
  min-height: 45vh;
}
.content_body.banner a{
  display: block;
  float: left;
  width: 32%;
  margin-right: 1.3%;
  margin-bottom: 1.3%;
}
.content_body.banner img{
  width: 100%;
}
.content_body.banner img:nth-child(3n) {
  margin-right: 0%;
}
.content_body.banner img:hover {
  box-shadow: 5px 5px 10px rgba(74, 75, 157, 0.5);
}

.subtitle{
  font-size: 120%;
  margin-bottom: 10px;
  position: relative;
  margin-top: 50px;
}

.kyosan {
  width: calc(100vw - 50px);
  height: 100px;
  position: absolute;
  bottom: -150px;
  left: 50%;
  transform: translate(-50%, 0);
  min-width: 750px;
  border-top: 2px solid #1f254f;
}
.kyosan div {
  width: 75vw;
  min-width: 750px;
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}
.kyosan div a {
  margin-right: 1%;
}
.kyosan div img {
  width: 20.5%;
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
}
.kyosan div img:last-child {
  margin-right: 0%;
}



a.link {
  color: #222;
  text-decoration: none;
  position: relative;
  padding: 0em;
  padding-bottom: .1em;
  border-bottom: 1px solid #222;
}
a.link i {
  display: inline-block;
  width: 1.5em;
  text-align: center;
}
a.link:hover {
  color: #4a4b9d
}

a.mlink {
  color: #222;
  text-decoration: none;
  position: relative;
  padding: 0em;
  padding-bottom: .1em;
  border-bottom: 1px solid #222;
}
a.mlink i {
  display: inline-block;
  width: 1.5em;
  text-align: center;
}
a.mlink:hover {
  color: #4a4b9d
}

a.slink {
  color: #222;
  text-decoration: none;
  position: relative;
  padding: 0em;
  padding-bottom: .1em;
  border-bottom: 1px solid #222;
}
a.slink i {
  display: inline-block;
  width: 1.5em;
  text-align: center;
}
a.slink:hover{
  color: #4a4b9d
}

table {
  font-size: 90%;
  padding: .1em 0em;
}

table.exel {
  margin-top: 1em;
  text-align: left;
  border-collapse: separate;
  border-spacing: 0 5px;
}
table.exel tr {
  margin-bottom: 10em;
}
table.exel thead th {
  vertical-align: top;
  color: #1f254f;
  font-weight: 400;
  border: none;
  text-align: left;
}
table.exel tbody th {
  width: 6em;
  font-weight: 400;
  text-align: center;
  margin-right: 1em;
}
table.exel td {
  width: 27em;
  padding-left: 1em;
  vertical-align: top;
}
table.exel tr:nth-child(1) th,
table.exel tr:nth-child(3) th,
table.exel tr:nth-child(4) th,
table.exel tr:nth-child(5) th {
  border-left: 1px solid #1f254f;
  border-right: 1px solid #1f254f;
}
table.exel thead tr:nth-child(1) th {
  border: none;
}
table.exel a.link {
  border: none;
}

.animate {
  opacity: 1;
  display: inline-block;
  position: relative;
  background-color: #1f254f;
}
.animate div {
  width: 100%;
  height: 100%;
  background-color: #1f254f;
}
.move{
  display: inline-block;
  width: 100%;
}

/*about
-------*/
.kakurai {
  width: 100%;
}


/*entry*/
.entry_table{
  border-style: solid;
  border-color: #1f254f;
  border-width: 1px;
  width: 650px;
}
.entry_table tr{
  height: 2em;
}
.entry_table td{
  padding: .5em;
  border: 1px solid  #1f254f;
}
.entry_table br{
  display: inline-block;
}
.entry_table a {
  color: #444;
  border-bottom: 1px solid #444;
}
.entry_table a:hover {
  color: #4a4b9d;
  border-bottom: 1px solid #4a4b9d;
}
.entry_table tr td {
  width: 13em;
}
.entry_table tr td:nth-child(1) {
  width: 10em;
}
.headline {
  color: #fff;
  position: relative;
  padding: .5em 2em .5em 0px;
  background: #4A4B9D;
  display: block;
  width: 650px;
  margin-left: 0px;
}
.headline:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
}

/*themesong
-----------*/
.accbox {
  margin: 1em 0em;
  padding: 0;
  width: 560px;
}
.accbox label {
  display: block;
  padding: .5em;
  color: #222;
  cursor : pointer;
  transition: all .5s;
  border: 2px solid  #1f254f;
}
.accbox label:before {
  content: '\f0da';
  font-family: 'FontAwesome';
  display: inline-block;
  width: 20px;
  text-align: center;
}
.accbox label:hover {
  background-color: #1f254f;
  transition: all 0.5s;
  color: #eee;
}
.accbox input {
  display: none;
}
.accbox .accshow {
  height: 0;
  padding: 1em 0 0 1em;
  overflow: hidden;
  opacity: 0;
  transition: all 0.5s;
}
.cssacc:checked + label + .accshow {
  height: auto;
  background: rgba(0,0,0,.05);
  border: 1px solid  #1f254f;
  opacity: 1;
  transition: all 0.5s;
}
.cssacc:checked + label {
  background-color: #1f254f;
  color: #eee;
  transition: all 0.5s;
}
.cssacc:checked + label:before {
  transform: rotateZ(90deg);
  color: #eee;
  transition: all 0.5s;
}

/*pcnone
--------*/
.pcnone {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: rgba(0,0,0,.5);
  line-height: 100vh;
  text-align: center;
  font-size: 5vw;
  color: #eee;
  border: 10px solid  #222;
  box-sizing: border-box;
}
.pcnone a,
.pcnone a:link,
.pcnone a:visited {
  color: #eee;
  width: 100vw;
  height: 100vh;
  display: block;
}
@media screen and (min-width: 800px) {
  .pcnone {
    display: none;
  }
}

/*program_sd
------------*/
h4{
  font-weight: 700;
  display: inline-block;
  padding: .4em .8em;
  background: #1f254f;
  border-radius: 5%;
  font-size: 16px;
  color: #eee;
}
.blank{
  display: inline-block;
  width:100px;
}
label{
  font-weight: 300;
}
button{
  display: inline-block;
  padding: .4em .8em;
  background-color: transparent;
  border: 2px solid  #4a4b9d;
  box-sizing: border-box;
  margin: 0 .2em;
  color: #4a4b9d;
  font-size: 16px;
  font-weight: 300;
  border-radius: 5%;
  cursor: pointer;
}
.button{
  display: inline-block;
  padding: .4em .8em;
  background-color: transparent;
  border: 2px solid  #4a4b9d;
  box-sizing: border-box;
  margin: 0 .2em;
  color: #4a4b9d;
  font-size: 16px;
  font-weight: 300;
  border-radius: 5%;
  cursor: pointer;
}
button.active{
  background: #4a4b9d;
  color: #eee;
  border: 2px solid  #4a4b9d;
}
button:first-of-type{
  margin-left: 0;
}
button:last-of-type{
  margin-right: 0;
}
button:focus{
  outline: 0 none;
}
/*
.controls{
background: #333;
padding: 2%;
}
*/
fieldset{
  border-color: transparent;
  margin:-30px -10px -45px -10px;
}
fieldset:last-child{
  margin-bottom: 20px;
}
.controls {
  min-width: 850px;
} 

.mixitup{
  /*
  padding: 2%;
  background: #68b8c4;
  */
  text-align: justify;
  width: 1030px;
}
.mixitup .mix,
.mixitup .gap{
  width: 100px;
  display: inline-block;
  margin-right: 1%;
}
.mixitup .mix{
  width: 32%;
  height: 285px;
  display: none;
}
.mogiten li{
  margin-bottom: 2px;
}
.kyoshitsu li{
  margin-bottom: 2px;
}
.okugai li{
  margin-bottom: 2px;
}

.mixitup table{
  padding: 0;
  box-sizing: border-box;
  border: 2px solid #4a4b9d;
}
.mixitup .kikaku{
  margin: 0;
  padding: .5em;
  border: 2px solid  #4a4b9d;
  box-sizing: border-box;
  color: #4a4b9d;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  height: 40px;
}
.mixitup tr{
  margin: 0;
  padding: 0;
}
.mixitup td{
  margin: 0;
  padding: 0 .5em;
  color: #000;
  font-size: 15px;
  border: 1px solid  #777;
  box-sizing: border-box;
}
.mixitup table .prohead{
  width: 23%;
  height: 25px !important;
  margin: 0;
  padding: 0 .2em;
  text-align: center;
  color: #1f254f;
  font-size: 15px;
}
.mixitup .kyatti{
  display: block;
  border: 0 solid transparent;
  height:130px;
  padding: .5em;
  vertical-align: top;
  font-size: 14px;
  text-align: justify;
}
.mixitup .kyatti span{
  display:block;
  font-size: 13px;
  height: 25px;
  line-height: 25px;
  font-weight: 600;
  margin-bottom:10px;
  border-bottom:2px solid #1f254f;
}


/*kikaku*/
.kikaku{
  width:600px;
  text-align: center;
}
.kikaku tr{
  height:40px;
}
.kikaku .whiteash{
  text-align: left;
  padding-left: 1em;
}
.map_okugai{
  background-color: #0C344C;
}


/*okugai*/
.okugai_1{
  text-align: center;
  background-color: #233D4C;
}
.okugai_1 tr{
  height:40px;
  padding:10px;
}
.okugai_2{
  background-color: #233D4C;
}
.okugai_2 td{
  padding:10px;
}