@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

body{
	width:100%;
    font-family: 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color:#000;
	position:relative;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
img{
	width:100%;
	display:block;
	 border:0;
	 object-fit: cover;
}
a{
	text-decoration: none;
}
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}
a.sc:hover img {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "alpha(opacity=100)";
}

.container{
	width:90%;
	max-width:1100px;
	margin:auto;
	padding:5% 0;
}

.main-content{
	margin-top:80px;
}
div.cnt_st,div.cnt{
	width:100%;
	background:white;
	position: relative;
	z-index: 25;
}
div.cnt_st{
	margin:0 auto 0;	
}
div.cnt{
	margin:50% auto 0;
}

h4,h3,h2,h1{
	text-align:center;
	line-height:1.8em;
}
h1{
	font-size:330%;
	/*font-family:serif;*/
}
h2{
	font-size:300%;
}
h3{
	font-size:150%;
}
h4{
	font-size:100%;
}
.bold{
	font-weight:bold;
}
p.text{
	width:75%;	
	margin:2% auto;
	line-height:1.8em;
	text-align:justify;
}

.button_a {
    width:100%;
	max-width:300px;
    font-size:20px;
	margin:auto;
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:8px 0 10px;
    color:#fff;
    background-color:#49a9d4;
    border-radius:25px;
}
.button_a:hover{
   box-shadow:2px 2px #1a6ea0;
   opacity:0.8;
	
}


.scale {
  overflow: hidden;
}
.scale img {
  transition: 0.5s;
}
.scale img:hover {
  -moz-transform: scale(1.1,1.1);
  -webkit-transform: scale(1.1,1.1);
  -o-transform: scale(1.1,1.1);
  -ms-transform: scale(1.1,1.1);
}



/* =============================== */
header{
	width:100%;
	height:80px;
	padding:10px;
    position: fixed; 
    top: 0px;
    left: 0px;
	background:white;	
}
header .logo{
	float:left;
}
.main-nav{
	float:right;
}
.top_logo{
	margin:45% auto 15px;
	width:100%;
	position: relative;
	z-index: 25;
}
.logo{
	height:100%;
}

nav#global-nav a{
	font-size:16px;
	color:#000;
	position: relative;
	display: inline-block;
	transition: .3s;
}
nav#global-nav a::after {
	position: absolute;
	bottom: 1em;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background-color: #333;
	opacity: 0;
	transition: .3s;
}
nav#global-nav a:hover::after {
	bottom: -5px;
	opacity: 1;
}

/* 画面外にいる状態 */
.fadein {
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 500ms;
    }
 
/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }

/* =============================== */

video {
	position: fixed;
	    right: 0;
	    bottom: 0;
	    min-width: 100%;
	    min-height: 100%;
	    height: auto;
	    width: auto;
	    z-index: 1;
		padding:1%;
		margin:auto;
}



.background {
	position: fixed;
	    right: 0;
	    bottom: 0;
  background: url(https://www.non-standardworld.co.jp/wp-content/themes/nswinc/img/visual_header.jpg) no-repeat center center;
  background-size: cover;
  position: relative;
  z-index: -2;
  width:100%;
  height: 100vh;
  margin: 0 auto;
}
.background-wrap {
	position: fixed;
	    right: 0;
	    bottom: 0;
  z-index: -1;
  min-width: 100%;
  min-height: 100%;
  overflow: hidden; 
}
.background-movie {
	position: fixed;
	    right: 0;
	    bottom: 0;

  justify-content: center;
}
#background-movie-player {
  width: calc(100vh * 1.78);
  height: 100vh;
  flex: none;
}


.yakuin {
	width:100%;
	margin:auto;
}
.yakuin img{
	float:left;
	width:32%;
	padding:2%;
}

.feed{
	margin-top:2%;
}
.blogfeed{
	width:25%;
	padding:1%;
	float:left;
}
.blogfeed .thumbnail{
	width:100%;
	height:200px;
	margin-bottom:15px;
	background:#000;
}
.blogfeed .blogtext{
	width:100%;
	height:200px;
	text-align:justify;
}

.eventbox {
    padding: 2em 2em;
    margin: 2%;
    border: solid 2px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.eventbox .eventimg{
	width:30%;
	float:left;
}
.eventbox .eventtext {
	width:70%;
	padding-left:2%;
   float:left;
}
.eventtext h2{
	 color: #000;
	 font-size:200%;
	 line-height:2em;
	 background: linear-gradient(transparent 70%, #a7d6ff 70%);
}


.feed2{
	max-width:600px;
	width:100%;
	margin:5% auto 0;
}



#panel {
  width: 100%;
}
 
#panel > dt {
  border-bottom: solid 1px white;
  
  cursor: pointer;
  padding: 10px;

}
 
#panel > dd {
  padding: 5% 0;
}
.member img{
	float:left;
	width:60%;
	padding-right:5%;
}
.member table{
	float:left;
	width:40%;
}
.member table tr td{
	width:33%;
	line-height:2em;
	font-size:90%;
}
.box4{
    padding: 2%;
    margin: 2em 0;
	line-height:2.5em;
    color: #2c2c2f;
    border-top: solid 5px #5989cf;
    border-bottom: solid 5px #5989cf;
}
.box4 p {
    margin: 0; 
    padding: 0;
}


#form,#gmap{
	margin:5% auto;
}

.canvas {
    width: 100%;
    position: relative;
}
 
#illust,#line {
    position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	width:50%;
	margin:auto;
	 z-index: 5;
}
 
#illust {
    display: none;
}

/* =============================== */
footer{
	background:#333;
	padding:30px 0;
	text-align:center;
	 z-index: 2;
	 position: relative;
}
footer,footer a,.sitemap{
	color:#FFF;
}
.footer-logo{
	max-width:400px;
	margin:auto;
}
.footer-text{
	margin:20px;
}
.sitemap {
	margin:10px;
}
.sitemap li {
	display:inline;
	list-style-type:none;
	margin-right:6px;
	padding-left:10px;
}
.sitemap li+li {
	border-left:1px solid #999;
}
/* =============================== */
.copy{
	text-align:center;
	font-size:12px;
	padding:1% 0;
	line-height:2em;
}
/* totop============================== */

#page-top {
	z-index:50;
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 60%;
}
#page-top a {
	z-index:50;
	display: inline-block;
	  text-decoration: none;
	  width: 50px;
	  height: 50px;
	  line-height: 60px;
	  border-radius: 50%;
	  border: solid 1px #666;
	  text-align: center;
	  vertical-align: middle;
	  overflow: hidden;
	  font-weight: bold;
	  transition: .4s;
}
#page-top a i.fas{
	z-index:50;
	  color: #666!important;
}
#page-top a:hover {
	z-index:50;
    text-decoration: none;
    background: #333;
}

#officer,#news,#event{
	width:70%;
	margin:auto;
}