@charset "UTF-8";
/* CSS Document */


/* PC：ウィンドウ幅が769px以上の場合に適用するCSS */
@media screen and (min-width: 680px){
	

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

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

	
	
	

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


ベース・共通項目


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


	
@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%;
		
    /*  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;	
    }
    @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.inner {
  animation-duration: 2s;/* アニメーション時間 */
  animation-name: RightToLeft;/* アニメーション名 */
  animation-iteration-count: 1;/* アニメーションの繰り返し（無限）*/
}

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

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


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


///////////////////////////////////////////////*/
	
	
	
.box {
  width: 100vw;
  height: auto;
  min-height: 80vh;
  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;/* アニメーションの繰り返し（無限）*/
}
	
	
	
	
	
/*///////////////////////////////////////////////


下へ誘導する矢印 


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

a span {
  position: absolute;
  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;
  }
}
	

	
	
	
	
h2{
	color: aliceblue;
	line-height: 200%;
	font-size: 350%;
	font-family: 'Amatic SC', cursive;
	font-weight: normal;
	position: relative;
	display: inline-block;
	padding: 0 85px;
	margin: 30px auto 0px !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: -50px;
  display: block;
	}		
	
div.center{
  text-align: center
	}	


	
p.txt{
	color: aliceblue;
	margin: 0 auto 3%;
	width: 700px;
	line-height: 300%;
	text-align: center !important;
	text-align: justify; // Required for IE and Edge 
	}	

	
p.youtubetxt{
	color: aliceblue;
	margin: 0 auto 6%;
	padding-bottom: 4%;
	width: 700px;
	line-height: 250%;
	text-align: center !important;
	text-align: justify; // Required for IE and Edge;
	letter-spacing: 0.2em;
	}	
	
	
	
	
h3{
	font-size: 200%;

	margin: 3% 0 2%;
	color: #fff;
	letter-spacing: 0.1em;
	font-family: 'Amatic SC', cursive;
	}	
	
	
	
	
	
	
	
	
	
/*///////////////////////////////////////////////


PC専用：横縦組文字


///////////////////////////////////////////////*/	
	
	
	
.o-side_txt {
    letter-spacing: 0.5em;
    transform: rotate(90deg);
    transform-origin: bottom left;
    color: #fff;
	position: fixed;
	margin: 270px 0 0 10px;
	font-size: 90%;
	z-index: 10000;
}	
	
	
.o-side_txt2 {
   
    color: #fff;
	position: fixed;
float: right !important;
	right: 1%;
	top:35%;
	font-size: 90%;
	z-index: 10000;
}	



	
ul.snso-side li{
    width: 40px;
	padding: 35% 0;
    margin:6%;
	}
	
	
	
	
	
	
	
	
	
	
	


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


SNSアイコン


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

	
	
ul.sns{
    text-align: center;
    padding: 0;
    margin: 0;
    animation-duration: 2s;/* アニメーション時間 */
    animation-name: RightToLeft;/* アニメーション名 */
    animation-iteration-count: 1;/* アニメーションの繰り返し（無限）*/
	}
	
	
ul.sns li{
    width: 50px;
    display: inline-block;
    margin:0 2%;
	}	
	
	
	
span.snsicon{
	width: 35px;
	display: inline-block;
	vertical-align:top;
	margin: 0 2%;
	}
	

p.snstxt{
	color: #fff;
	margin: 3% auto 5%;
	width: 90%;
	line-height: 250%;
	font-size: 95%;
	text-align: center;
	letter-spacing: 0.1em;
	animation-duration: 2s;/* アニメーション時間 */
	animation-name: RightToLeft;/* アニメーション名 */
	animation-iteration-count: 1;/* アニメーションの繰り返し（無限）*/
	}	
	
	
	
	
	
	
	
	
	
	
	
/*///////////////////////////////////////////////


ループスライダー


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

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

#loopslider {
	margin: 1% auto 5%;
	width: 100% !important;
	height: 450px;
	text-align: left;
	position: relative;
	overflow: hidden;
}

#loopslider ul {
/*	width: 100%;*/
	height: 450px;
	float: left;
	display: inline;
	overflow: hidden;
}
#loopslider ul li {
	width: 700px;
	height: 450px;
	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;
		border-radius: 10px;
	}
	
	
	p.Sessionimg img{
		border-radius: 10px !important;
	}
	
	
	
	dl.Sessioninfo,dt,dd{
		padding: 0;
		margin: 0;
		line-height: 300%;
	}
	
	dl.Sessioninfo{
		padding: 0 0 8% 13%;
		margin:3% 0;
		color: #fff;
		margin: 0 auto;
		width: 550px
	}

	
	dl.Sessioninfo dt.name{
		font-size: 260%;
		font-weight: bold;
		margin-bottom: 2%;
		font-family: 'Amatic SC', cursive;
	}
	
	dl.Sessioninfo dd{
		letter-spacing: 0.1em;
	}
	
	
	
	
	
	
	
	

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


copyright


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

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


スタッフ紹介


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



section.contentsitem{
	padding:3%;
	overflow:hidden;
	width: 700px;
	margin: 0 auto;
	}


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

}



.contentsitem-box{
	margin-bottom: 3rem;
	padding:6% 2% 4%;
	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:50%;
	height:auto;
	border-radius:50%;
	margin: 0 auto;
	display: block
}

	
	
dl.memberinfo dt,dd{
	padding: 0;
	margin: 0;
	}	
	
	
	
dl.memberinfo dt.name{
	text-align: center;
	font-weight: 700;
	margin: 3%;
	}
	
	
dl.memberinfo dd.txt{
	line-height: 200%;
	padding: 2% 2% 0;
	margin: 2% 2% 0;
	font-size: 90%;
	border-top: 1px solid #35CDDE;
	}
	

dl.memberinfo dd.txt a{
	color: skyblue;
	font-size: 90%;
	}	
	
	
	
	

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


ブログ


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

	
	
section.contentsblog{
	padding:2%;
	overflow:hidden;
	width: 1000px;
	margin: 0 auto;
	}


.contentsblog-wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}	
	
	
	
.contentsblog-box{
	margin-bottom: 2rem;
	padding: 1%;
	width: 30%;
	position: relative;
	height: auto;
}	
	
	

dl.blognews,dd.blogday{
	padding: 0;
	margin: 0;
	color: #fff;
	}
	
	
dl.blognews dd.blogtitle a{
	color: #fff;
	margin-top: -10px;
	margin-bottom: 5%;
	display: block;
	line-height: 160%;
	}	
	
	
	
	p.blogbtn{
		
	}
	
	
	p.blogbtn a{
		color: #fff;
		padding: 3%;
		width: 30%;
		display: block;
		margin: 0 auto;
		border: 3px solid #fff;
		margin-bottom: 7%;
		font-size: 120%;
		letter-spacing: 0.21em;
	}
	
	

	
	

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


youtube


///////////////////////////////////////////////*/	
	
	
	
div.youtubebox{
	width: 80%;
	height: auto;
	margin: 0 auto 3%;
	}
	
	
	
	.mt70{
		margin-top: 70px;
	}
	
	

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


メディア情報


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

	
	dl.media{
		color: #fff;
		margin-bottom: 5%;
		
	}
	
	dl.media dd a{
		line-height: 230% !important;
		display: block
	}
	
	
dl.media dt img{
		width: 25%;
		height: auto;
		margin:  0 auto 3%;
		text-align: center;
		display: block;
		border-radius: 10px;
	}
	
	
	
/*///////////////////////////////////////////////


コンタクトボタン


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

.contactbtn{
	background: #39b9da;
	margin: 5% auto 15%;
	width: 400px;
	border-radius: 50px;
	text-align: center;
}


.contactbtn a{
	display:block;
	padding:8% 2%;
	color: #fff;
	font-size: 140%;
	letter-spacing: 0.2em;
	font-weight: 700;
}	
	
	
.btnmail{
	vertical-align: text-bottom;
}	
	
	
	
	
	
	
	
	
/*///////////////////////////////////////////////


インスタグラム  Instagram Graph API


///////////////////////////////////////////////*/
	
	
	
	
.insta__wrap {
       width: 1300px;
        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: 200px;
  height: 200px;
  object-fit: cover; /* この一行を追加するだけ！ */
	}	
		
	
	
	
	
	


}