@charset "UTF-8";


/* SP：ウィンドウ幅が0〜479pxの場合に適用するCSS */
@media screen and ( max-width:680px )
{



.noneSP {display:none !important;}

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




img{
		width:100%;
		height: auto
	}

	


@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
	
	
	
	
	
/* 画面外にいる状態 */
.fadein {
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 500ms;
    }

/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }
	
	
	

  body {
		font-family: 'M PLUS Rounded 1c', sans-serif;
	 

    }
    #bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
		 overflow:hidden;
		
    /*  height: 100%;*/
      /* 背景グラデーションの作成 */
      background: linear-gradient(to bottom,
      hsl(180, 80%, 50%),
      hsl(230, 80%, 60%),
      hsl(180, 80%, 40%));
      background-size: 400% 400%;
      animation: AnimationName 10s ease infinite;
		background-color: #4EC3DB
		
    }
    @keyframes AnimationName {
      0% {
        background-position: 50% 0%
      }
      50% {
        background-position: 50% 100%
      }
      100% {
        background-position: 50% 0%
      }
    }
	
	
	
a{
color:#fff;
}	
	
	
	


/*///////////////////////////////////////////////


タイトル


///////////////////////////////////////////////*/

	
	
/* 「RightToLeft」の動作内容 */
@keyframes RightToLeft {
  0% {
    opacity: 0;/* 透明 */
    transform: translateX(50px);/* X軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateX(0);
  }
}

/* 「RightToLeft」を適用する箇所 */
	
h1 {
  animation-duration: 2s;/* アニメーション時間 */
  animation-name: RightToLeft;/* アニメーション名 */
  animation-iteration-count: 1;/* アニメーションの繰り返し（無限）*/
}

h1.inner{
		color: #fff;
		font-size: 80%;
	padding:20px 2%;
	}
	
	

	
	
/*///////////////////////////////////////////////


メイン画面：バックグラウンド


///////////////////////////////////////////////*/
	
	
	
.box {
  width: 100vw;
  height: auto;
  min-height: 65vh;
	background-size: cover;
  background-position: center;
  background-image: url('../img/logo.svg');
	
	display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  /* 左右中央寄せ */
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;

  /* 上下中央寄せ */
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
	
	animation-duration: 2s;/* アニメーション時間 */
  animation-name: RightToLeft;/* アニメーション名 */
  animation-iteration-count: 1;/* アニメーションの繰り返し（無限）*/
	padding: 50px !important;
  box-sizing: border-box;
}

	
.page {
  /*height: 60vh;*/
  overflow: scroll;
}
	
	
	
	
h2{
		color: aliceblue;
		margin: 0 auto;
		line-height: 300%;
	text-align: center;
	font-size: 250%;
		font-family: 'Amatic SC', cursive;
	font-weight: normal;
		  position: relative;
  display: inline-block;
  padding: 0 85px;
	margin: 30px auto 0 !important;
	text-align: center !important;
	}	
	
	
h2:before, h2:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: #fff;
}

h2:before {
  left:0;
}
h2:after {
  right: 0;
}

span.jp{
		font-size: 30%;
		margin-top: -65px;
		display: block;
	}	
		
	
div.center{
		text-align: center
	}
	
	
p.txt{
		color: aliceblue;
		margin: 0 auto 5%;
		width: 90%;
		line-height: 250%;
		font-size: 88%;
		text-align: left;
		text-align: justify; // Required for IE and Edge 
		text-align-last: right;
	}	
	
	
	
	
	
p.youtubetxt{
		color: aliceblue;
		margin: 5% auto 5%;
		width: 90%;
		line-height: 220%;
		font-size: 88%;
		text-align: left;
		text-align: justify; // Required for IE and Edge 
		text-align: center;
	}	
	
	
		
	


.o-side_txt {
    letter-spacing: 0.5em;
    transform: rotate(90deg);
    transform-origin: bottom left;
    color: #fff;
	position: fixed;
	margin: 230px 0 0 10px;
	font-size: 90%;
}	

	
	
h3{
	font-size: 190%;
	margin: 3% 0 2%;
	color: #fff;
	letter-spacing: 0.1em;
	font-family: 'Amatic SC', cursive;
	font-weight: normal;
	}	
		
	
	

	
/*///////////////////////////////////////////////


SNS：アイコン


///////////////////////////////////////////////*/
	
	
ul.sns{
	text-align: center;
	padding: 0;
	margin: 0;
	animation-duration: 2s;/* アニメーション時間 */
	animation-name: RightToLeft;/* アニメーション名 */
	animation-iteration-count: 1;/* アニメーションの繰り返し（無限）*/
	}
	
	
	
ul.sns li{
	width: 55px;
	display: inline-block;
	margin:0 3%;
	}	
	
	
	
span.snsicon{
	width: 30px;
	display: inline-block;
	vertical-align:middle;
	margin: 0 2%;
	}
	
	
p.snstxt{
		color: #fff;
		margin: 5% auto 5%;
		width: 90%;
		line-height: 200%;
		font-size: 90%;
		letter-spacing: 0.1em;
		text-align: center;
		animation-duration: 2s;/* アニメーション時間 */
		animation-name: RightToLeft;/* アニメーション名 */
		animation-iteration-count: 1;/* アニメーションの繰り返し（無限）*/
	}		
	
	
	
	
	
	
	
/*///////////////////////////////////////////////


ループスライダー


///////////////////////////////////////////////*/
	

#loopslider *{
margin: 0;
padding: 0;
}


#loopslider {
	margin: 0% auto 7%;
	width: 100%;
	height: 210px;
	text-align: left;
	position: relative;
	overflow: hidden;
}

#loopslider ul {
/*	width: 100%;*/
	
	float: left;
	display: inline;
	overflow: hidden;
}
#loopslider ul li {
	width: 330px;
	float: left;
	display: inline;
	overflow: hidden;

}
	


/* =======================================
	ClearFixElements
======================================= */
#loopslider ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

#loopslider ul {
	display: inline-block;
	overflow: hidden;
	
}

	
	
.colorfilter-base {
    background-color:aliceblue;  /* カラーフィルタ効果の色を指定 */
    display: inline-block;      /* (任意：インラインブロック化したい場合) */
}
.colorfilter-image {
    opacity: 0.9;    /* カラーフィルタ効果の度合いを指定 */
    display: block;
}
	
	
	
	
	
	
/*///////////////////////////////////////////////


次回のセッション


///////////////////////////////////////////////*/
	
	
	
	p.Sessionimg{
		text-align:center;
		margin: 0 5%;
		border-radius: 10px;
	}
	
	p.Sessionimg img{
		border-radius: 10px !important;
	}
	
	
	dl.Sessioninfo,dt,dd{
		padding: 2% 5%;
		margin: 0;
		line-height: 200%;
		text-align: left;
	}
	
	dl.Sessioninfo{
		text-align: center;
		padding: 0 0 8% 0;
		margin:3% 0;
		color: #fff;
		margin: 0 auto;	
	}

	
	dl.Sessioninfo dt.name{
		font-size: 120%;
		font-weight: bold;
	}
	
	dl.Sessioninfo dd{
		
		font-size: 83%;
	}
	
	
	
	
/*///////////////////////////////////////////////


copyright


///////////////////////////////////////////////*/
	
	
	p.copy{
		text-align: center;
		color: #fff;
		padding: 6%;
		font-size: 90%;
	}
	
	
	
	
	

	
	
	
/*///////////////////////////////////////////////


スマホ用ナビヘッダ


///////////////////////////////////////////////*/	




/* Toggle Button */
#nav-toggle {
	display: none;
	position: absolute;
	right: 12px;
	top: 23px;
	width: 34px;
	height: 36px;
	cursor: pointer;
}

#nav-toggle div {
	position: relative;
}
#nav-toggle span {
	display: block;
	position: absolute;
	height: 2px;
	width: 100%;
	background: #fff;
	left: 0;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
	top: 0;
}
#nav-toggle span:nth-child(2) {
	top: 11px;
}
#nav-toggle span:nth-child(3) {
	top: 22px;
}


  #top-head,
    .inner {
        width: 100%;
        padding: 0;
		z-index:1000;
    }
    #top-head {
        top: 0;
        position: fixed;
        margin-top: 0;
		background-color:#FFF;

    }
    /* Fixed reset */
    #top-head.fixed {
        padding-top: 0;
        background: transparent;
    }
    #mobile-head {
        width: 100%;
        z-index: 999;
        position: relative;
	
		border-bottom:1px solid #ddd;
		
    }
    #top-head.fixed .logo,
    #top-head .logo {
       
        

    }
    #global-nav {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -560px;
        background: #1082d7;
		
        width: 100%;
        text-align:center;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }
    #global-nav ul {
        list-style: none;
        position: static;
		margin:3% 0% 0% -2%;
		padding:0;
        font-size: 14px;
    }
    #global-nav ul li {
        float: none;
        position: static;
	border-bottom: 1px #5AA5DD dotted;
		letter-spacing:0.2em;
		opacity: 0.9

    }
	
	
	
	#global-nav ul li:last-child
	{
		border-bottom:none;
		}
	
	
    #top-head #global-nav ul li a,
    #top-head.fixed #global-nav ul li a {
        width: 100%;
        display: block;
        color: #fff;
        padding: 13px 0;
		text-decoration:none;
    }
    #nav-toggle {
        display: block;
    }
    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /* #global-nav スライドアニメーション */
    .open #global-nav {
        /* #global-nav top + #mobile-head height */
        -moz-transform: translateY(556px);
        -webkit-transform: translateY(556px);
        transform: translateY(556px);
    }
	
	
	
	
	
	
	
	
/*///////////////////////////////////////////////


スタッフ紹介


///////////////////////////////////////////////*/



section.contentsitem{
	padding:3%;
	overflow:hidden;

	margin: 0 auto;
	}


.contentsitem-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

}



.contentsitem-box{
	margin-bottom: 3rem;
	padding: 2%;
	width: 45%;
	background-color: #fff;
	border:1px solid #ddd;
	border-radius: 5px;
	position: relative;
	height: auto;
}


.contents-box img {
	display: block;
	margin-bottom: 2rem;
	width: 100%;
	height: auto;
}

.contents-box p.cotentstitle{
	text-align:center;
	font-size:90%;
	font-weight:bold
	}

	
	
	
p.facephoto img{
	width:80%;
	height:auto;
	border-radius:50%;
	margin: 0 auto;
	display: block
}

	
	
dl.memberinfo dt,dd{
	
	}	
	
	
	
dl.memberinfo dt.name{
	text-align: center;
	font-weight: 700;
	margin: 3%;
	}
	
dl.memberinfo dd.txt{
	line-height: 150%;
	padding:5% 2%;
	margin: 2%;
	font-size: 80%;
	border-top: 1px solid #35CDDE;
	}
	
	
dl.memberinfo dd.txt a{
	color: skyblue;
	font-size: 90%;
	margin-top: 3%;
	display: block
	}	
	
	
	
	
	
	
	
	
/*///////////////////////////////////////////////


下へ続く矢印


///////////////////////////////////////////////*/	
	
	
	
a span {
  position: absolute;
  top: 11%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
	
	
	
	

	
	
/*///////////////////////////////////////////////


youtube


///////////////////////////////////////////////*/	
	
	
	.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
	
	
	p.blogbtn{
		
		
	}
	
	
	p.blogbtn a{
		color: #fff;
		padding: 3% 5%;
		width: 50%;
		display: block;
		margin: 0 auto;
		border: 3px solid #fff;
		margin-bottom: 7%;
	}
	
	
	
	
	
	
	
	
	
/*///////////////////////////////////////////////


コンタクトボタン


///////////////////////////////////////////////*/	
	
	
	
.contactbtn{
	background: #39b9da;
	margin: 7% auto 15%;
	width: 300px;
	border-radius: 50px;
	text-align: center;
	font-size: 85%;
}


.contactbtn a{
	display:block;
	padding:6% 2%;
	color: #fff;
	font-size: 130%;
	letter-spacing: 0.2em;
	font-weight: 700;
}


.btnmail{
	vertical-align: text-bottom;
}
	

	
.contactbtn img{
	width: 7%;
}	
	
	
	
	
	
	
	
	
/*///////////////////////////////////////////////


メディア情報


///////////////////////////////////////////////*/		

	
	dl.media dt img{
		width: 80%;
		height: auto;
		margin:  0 auto;
		text-align: center;
		display: block;
		border-radius: 10px;
	}

	
	
	
	
/*///////////////////////////////////////////////


インスタグラム  Instagram Graph API


///////////////////////////////////////////////*/
	

.instaicon img{
		width: 50px !important;
	margin: 0 auto 10%;
	text-align:center;
	display: block;
	}	
	
	
	
	
	
.insta__wrap {
     
        padding: 0;
        margin: 0 auto;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        /* position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0; */
}
.insta__item {
  margin: 1rem;
}
	
	
.insta__wrap li{
		display: inline-block;
	margin: 0px 1px -4px 1px;
	padding: 0;
	}
	
.insta__wrap li img{
	      width: 30vw;
          height: 30vw;
  object-fit: cover; /* この一行を追加するだけ！ */
	}	
		
	
		
	
	
	
	
	
	
	
	
	
	
	
	
	

}