@charset "utf-8";

html {
  font-family: "Noto Serif JP","Hiragino Kaku Gothic Pro","Yu Gothic","Meiryo",sans-serif;
  line-height: 1.3;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 18px;
  font-weight: 600;
}
html, body{
  height: 100%;
}
body {
  margin: 0;
  padding-top: 68px;
}
article{
   flex-grow: 1;
}
article,
aside,
footer,
header,
nav,
section {
  display: block;
}
.red{
  color:red;
}
.yellow{
  color:rgb(223, 223, 32);
}
h1 {
  font-size: 1.5em;
  margin: 0.67em 0;
}
figcaption,
figure,
main {
  display: block;
}
figure {
  margin: 1em 40px;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}
a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  color: #000;
}
a:active,
a:hover {
  outline-width: 0;
  color: #a1a1a1;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: inherit;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
dfn {
  font-style: italic;
}
mark {
  background-color: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}
audio, video {
  display: inline-block;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
img {
  border-style: none;
  max-width: 100%;
  vertical-align: bottom;
}
svg:not(:root) {
  overflow: hidden;
}
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  display: inline-block;
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
details,
menu {
  display: block;
}
summary {
  display: list-item;
}
canvas {
  display: inline-block;
}
template {
  display: none;
}
[hidden] {
  display: none;
}
/* end normalize*/
a{ text-decoration: none;}
a:hover{ color: #03c4eb; }
.cb{ clear: both; }

.sp{ display: block; }
.pc, .mainright{ display: none; }
.center{ text-align: center; }
.mt1{ margin-top: 1em; }

ul{ margin:0; list-style: none; }
/* スマホ版背景色 body background color 白背景 alpha */
.container{
  background: rgba(255, 0, 255, 0.0);
}
.spohalf{
  width:50%;
}
.spohalf .spo{
  width:50%;
}

.spoOne{
  width:70%;
}
.spoQuo{
  width:25%;
}
.spoTri{
  width: 30%;
}

/*menu*/
.drawer-navbar-header{
  display: flex;
  align-items: center;
}
.drawer-navbar-header a{
  font-size: 0.8em;
}
.sp ul.drawer-menu.drawer-menu--right a {
  color: #fff;
}
.sp .first{
 border-top: 1px solid #CCC;
 margin-top: 5px;
}
.sp .first a{
  font-size: 0.8em;
}
.sp .second{
  padding: 0 0 0 1.5em;
}
.sp .second a{
  font-size: 0.4em;
}
.sp ul{
  margin-bottom: 1em;
  padding: 1em;
  line-height: 1;
}
.under{
  border-bottom: 2px solid #F00;
} 
.shadow{
  text-shadow: 1px 1px 0 rgba(0,0,0,.8);
}
.color-tec{
  color:#7760ec;
}

/*switch*/
.swich {
  position: relative;
  top: 16%;
  margin-left: 1em;
  display: flex;
  font-weight: 500;
}
.on {
  background: #fff;
  color: #000;
  padding: 1em 0.5em;
}
.off{
  background: #666;
  color: #fff;
  padding: 1em 0.5em;
}
/*main*/
.top_block{
  display: flex;
  flex-direction: column;
  margin: 1em;
}
.spo, .spo2{
  display: inline-block;
  margin: 1em auto 0;
  max-width: 50%;
}
.spoO{
  width:100%;
}
.spoT{
  width: 90%;
}
.spoQ{
  width:80%;
}

.schedule {
  display: block;
  margin: 1em;
  border: 2px solid #03c4eb;
  background: rgba(255, 255, 255, 0.7);
}
.timetable{
  margin: 0 0 0.5em;
  text-align: center;
  background-color: #03c4eb;
  color: #fff;
  padding: 0.3em;
}
.schedule ul {
  margin: 0;
  padding: 0.3em 1em 1em;
}
.schedule li {
  display: flex;
  font-size: 0.4em;
  margin-bottom: 5px;
}
.days{
  margin-right: 0.5em;
}
.timemain{ margin-left: 1em; }
.block{ margin: 5em 1em 0 1em; }
.toptitle{
  margin: 3em 0 0;
}
.bgtitle, .bgtitle2{
  display: block;
  background-color: #002238;
  margin: 0;
  padding: 0.5em;
  color: #fff;
  text-align: center;
}
.news {
  border: solid 1px #000;
  margin-bottom: 1em;
}
.newsblock {
  display: block;
  margin: 1em 0.5em;
  text-align: center;
}
.newsblock a{
  display: flex;
  align-items: center;
}
.newsblock a img{
  max-width: 100px;
}

.newsblock .inf{
  display: flex;
  align-items: center;
}
.newsblock .inf img{
  max-width: 100px;
}

.newssvg{
  width: 100%;
}
.right_item{
  margin: 1em;
  text-align: left;
}
.newstitle, .newsmore{
  padding: 1em 0.5em;
  font-size: 0.6em;
}
.newstitle{
  font-weight: bold;
}
.newsmain{
  line-height: 0;
}
.youtubeframe, .fbframe, .twitterframe, .instaframe, .channel{
  padding-top: 2em;
  text-align: center;
}
.youtube{
  margin: 1em 0 0;
}
.youtubeframe {
  position: relative;
  width: 70%;
  padding-top: 56.25%;
  margin: 0 auto;
}
.youtubeframe iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 60% !important;
}
.channel{
  padding: 5em 0 0;
}
.headimg{
  width: 100%;
  height:auto;
}
.movieblock{
	width:100%;
}

/* otherpage */
.main{
  margin: 1em auto 3em auto;
  text-align: center;
}
.info h2{
  margin: 0;
}
.top_block{
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.info{
  width: 100%;
}
.spo, .spo2{
  margin: 1em;
  width: 100%;
}
.submenu{
  margin: 0 0.5em;
}

.formlink{
  width:60%;
  font-size: 125%;
  background: #FFF;
  color: #000;
  font-weight: 600;
  border-style:outset;
  border-width: 5px;
  border-color: #F00;
  margin: 1em auto;
  padding: 7px;
}

.formlink a{
  text-decoration: none;
}


/* footer */
footer{
  color: #fff;
  background: #000;
  text-align: center;
  width: 100%;
}
.cominfo{
  padding: 2em;
  border-bottom: 1px solid #333;
}
.cominfo img{
  max-width: 200px;
  margin-bottom: 1em;
}
.cominfo p{
  margin-bottom: 1em;
}
.sns i{
  color: #fff;
  margin: 5px;
  font-size: 1.5em;
}
.sns .Xtwitter:before{
	content: "𝕏";
	font-style: initial;
}

.copy{
  padding: 2em 0;
}
i.far.fa-copyright{
  margin-right: 7px;
}
.ggmap {
  position: relative;
  padding-bottom: 35%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.ggmap iframe, .ggmap object, .ggmap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.post_content{
  margin-bottom: 2em;
}
.about{
  margin: 1.5em;
}
/* Topに戻る */
.page-top{
  margin: 0 ;
  padding: 0 ;
}
.page-top p{
  margin: 0 ;
  padding: 0 ;
  position: fixed ;
  right: 16px ;
  bottom: 16px ;
}
.move-page-top{
  display: block ;
  background: #03c4eb;
  width: 50px ;
  height: 50px ;
  color: #fff ;
  line-height: 50px ;
  text-decoration: none ;
  text-align: center ;
  -webkit-transition:all 0.3s ;
  -moz-transition:all 0.3s ;
  transition:all 0.3s ;
}
.move-page-top:hover{
  opacity: 0.85 ;
}
.column2 img{
  margin: 0.5em 0;
}

.column3 img{
  margin: 0.5em 0;
}

.R{
  font-size: 60%;  
}
@media only screen and (min-width: 768px) {
  
  .wrap{
    max-width: 600px;
    margin: 0 auto;
  }
  .snsframe{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #000;
    padding-bottom: 1.5em;
  }
  .instaframe, .twitterframe, .fbframe{
    margin: 0 1em;
  }
  .instaframe iframe{ height: 500px!important; }
  .column2{
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
   .column2 img{
    width: 50%;
   }
  .column2 div a{
    margin: 1em;
  }
  .cl{
    width: 30%;
  }
  .column2 img{
    flex : 1 1 auto;
    padding: 0.5em;
  }
    .column3{
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
   .column3 img{
    width: 33%;
   }
  .column3 div a{
    margin: 1em;
  }

  .column3 img{
    flex : 1 1 auto;
    padding: 0.5em;
  }
}

@media only screen and (min-width: 1024px) {
  .sp{ display: none; }
  .pc, .mainright, .instaframe, .fbframe, .channel{ display: block; }
  .wrap{
    max-width: 900px;
  }
/* ブラウザPCサイズ版背景色 body background color alpha */
  .container{
  background: rgba(255, 255, 0, 0.0);
  padding-top: 68px;
  }
  /*menu*/
  .pc ul.drawer-menu.drawer-menu--right{
    display: flex;
    margin-top: 1em;
  }
  .pc ul.drawer-menu.drawer-menu--right a {
    color: #fff;
    font-size: 0.8em;
  }
  .pc ul.drawer-menu.drawer-menu--right a:hover{
    color: #03c4eb;
  }
  .drawer-container{
    display: flex;
  }
  .drawer-navbar .drawer-navbar-header{
/*    display: inline-block;*/
    float: none;
  }
  .drawer-nav{
    margin-left: auto;
  }
  .menu .first{
   padding: 0 0.5em;
   border-bottom: none;
  }
  .menu2{
    font-size: 0.6em;
    font-weight: 600;
  }
  .menu2 .second{
    padding: 0.5em 0 0.5em 1.5em;
  }
  .timemain:hover{
    color: #03c4eb;
  }
  .pcmenu a{
    margin: 0.5em;
  }
  .mainflex{
    display: flex;
    justify-content: center;
  }
  .mainleft{
    width: 80%;
  }
  .mainright{
    width: 20%;
    margin-right: 1em;
  }
  .menu2, .mainright .sns{
    background: rgba(255, 255, 255, 0.7);
    margin-top: 7.5em;
    margin-bottom: 1em;
    border: 1px solid #000;
  }
  .menu2 ul{
    margin: 0;
    padding: 1em;
  }
  .menu2 .first{
    margin-top: 2em;
  }
  .mainright .sns{
    padding: 1em;
  }
  .mainright .sns a{
    display: block;
    margin: 0.5em 0;
    display: flex;
    align-items: center;
  }
  .mainright .sns img{
    width: 35px;
  }
  .snsname{
    margin-left: 5px;
  }
  .info{
    padding-bottom: 5em;
  }
  .schedule li{
    display: block;
    font-size: 0.8em;
  }
  .block{
    margin: 0;
  }
  .spo, .spo2{
    width: 50%;
  }
  .news{
    background-color: rgba(255, 255, 255, 0.7); 
    margin: 0 1.5em 1em;
    padding-bottom: 2em;
  }
  .newsblock a{
    align-items: flex-start;
  }
  .newsblock a img{
    max-width: 250px;
  }
  .newsblock .inf{
    align-items: flex-start;
  }
  .newsblock .inf img{
    max-width: 250px;
  }
  .newstitle{
    font-size: 1em;
  }
  .right_item{
    margin: 1em 0.5em;
  }
  .right_item p{
    font-size: 0.8em;
    margin-left: 2em;
  }
  .bgtitle{
    margin: 0 1em;
  }
  .main{
    margin: 0 auto;
    max-width: 900px;
  }
  .schedule{
    margin: 15em 1em 1em;
  }
}

@media only screen and (min-width: 1280px) {
  .wrap{
    max-width: 1000px;
  }
}