@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Pacifico);

/* font */
@font-face {
	font-family: "Kiyomoto Logo";
	src: url("../images/kiyomoto_logo.woff") format("woff");
}

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}
body{
	font:14px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
	font-weight:300;-webkit-text-size-adjust:100%;overflow-x:hidden;color:#000;background:#fff;overscroll-behavior-y: none;
}
a{color:#0066ff;text-decoration:none;}
a:hover, .active{ text-decoration:underline;}
a:active, a:focus,input:active, input:focus{outline:0;}

/* ヘッダー
------------------------------------------------------------*/
#header{text-align:center;}
#mainnav a{color:#000;}
#header{position:fixed;width:100%;z-index:500;}
#headerWrap{position:relative;	width:100%;height:70px;}
a#menu{display:inline-block;position:relative;width:40px;height:40px;margin:10px;}
#menuBtn{display:block;position:absolute;top:60%;left:50%;width:18px;height:2px;margin:-1px 0 0 -7px;background:#000;transition:.2s;}
#menuBtn:before, #menuBtn:after{display:block;content:"";position:absolute;top:50%;left:0;width:18px;height:2px;background:#000;transition:.3s;}
#menuBtn:before{margin-top:-7px;}
#menuBtn:after{margin-top:5px;}
a#menu .close{background:transparent;}
a#menu .close:before, a#menu .close:after{margin-top:0;}
a#menu .close:before{transform:rotate(-45deg);-webkit-transform:rotate(-45deg);}
a#menu .close:after{transform:rotate(-135deg);-webkit-transform:rotate(-135deg);}
.panel{width:100%;display:none;overflow:hidden;position:relative;left:0;top:0;z-index:100;}
#mainnav{position:absolute;top:0;width:100%;text-align:right;z-index:500;}
#mainnav ul{border-bottom:1px solid #ccc;background:#fff;text-align:left;}
#mainnav li a{position:relative;display:block;padding:15px 25px;border-bottom:1px solid #ccc;color:#000;font-weight:400;}
#mainnav li a:before{display:block;content:"";position:absolute;top:50%;left:5px;width:6px;height:6px;margin:-4px 0 0 0;border-top:solid 2px #000;
	border-right:solid 2px #000;-webkit-transform:rotate(45deg);transform:rotate(45deg);}

/* フッター
------------------------------------------------------------*/
#footer{clear:both;padding:50px 0;text-align:center;font-size:12px;}

/* 共通
------------------------------------------------------------*/
img{max-width:100%;height:auto;}
section{clear:both;padding-top:70px;}
section h2{
	font-family:'Pacifico', cursive;width:60%;margin:0 auto 40px;font-size:22px;font-weight:normal;text-align:center;
	background:url(../images/borderBlack.png) repeat-x 0 50%;background-size:1px 1px;
}
section h2 span {background:#fff;padding:0 80px;}
.inner{width:94%;margin:0 auto;padding-bottom:50px;}
.innerS{width:60%;margin:0 auto;padding-bottom:80px;}

/* SEC00 catch
------------------------------------------------------------*/
#sec00{padding:0;}
#catchWrap{display:flex;justify-content:center;align-items:center;text-align:center;margin:0 auto;}
#omniaCanvas{position:relative;}
#catchimg{position:absolute;}
h1{ font-size:1200%;position:absolute;

}
h1 span{display:block;
	background-image:-o-linear-gradient( 60deg, #ED213A, #e94057, #f27121, #FFC600, #f27121, #e94057, #ED213A);
	background-image:linear-gradient( 300deg, #ED213A, #e94057, #f27121, #FFC600, #f27121, #e94057, #ED213A);
	-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
	background-size:400% auto;animation:bggradient 9s ease infinite;
}
#kiyomoto{font-family:'Kiyomoto Logo';font-weight:normal;}
#pockets{
	font-size:80%;font-weight:900;margin-top:-0.9em;
	font-family:'Noto Sans JP';
}
@keyframes bggradient{
	0% {background-position:0% 50%;}
	50% {background-position:100% 50%;}
	100% {background-position:0% 50%;}
}

/* SEC01 清元pocketsとは
------------------------------------------------------------*/
#sec01{clear:both;}
#sec01 img{display:block;width:20%;margin:0 auto 30px;}

/* SEC03 清元
------------------------------------------------------------*/
#sec03 img{display:block;width:20%;margin:0 auto 30px;}

/* SEC04 Member
------------------------------------------------------------*/
.col3 img{display:block;margin:0 auto 5px;}
.col3 li{line-height:2.0;}
.col3 .img{margin-bottom:40px;line-height:0 !important;background:#f6f6f6;}
#sec04_02{
	background:url(../images/bgSec04.jpg) no-repeat 0% 0% / cover fixed;background-size:cover;-webkit-background-size:cover;
	text-align:center;
	padding:220px 20px;}
#sec04_02 img{width:auto;}

/* SEC05 YouTube
------------------------------------------------------------*/
#sec05 p{margin-bottom:5px;}
.col2 li{display:inline-block;width:100%;margin:20px 0;}
#sns{padding-bottom:10px;width:100%;}/*display:flex;justify-content:center;*/
#sns img{padding-right:10px;}
#sns a:hover img{opacity:.8;}
.lastimg{padding-right:0!important;}
#youtube{position:relative;width:60%;height:0;padding-top:33.75%;margin:0 auto;}
#youtube iframe{position:absolute;top:0;left:0;width:100%;height:100%;}

/* RESPONSIVE 設定
------------------------------------------------------------*/

@media only screen and (min-width:1200px){
	.inner{width:1024px;}
}

@media only screen and (min-width:800px){
	body{font-size:14px;}
	.col3{text-align:center;}
	.col3 li{display:inline-block;width:28%;padding:0 2.5% 50px;margin-bottom:0;vertical-align:top;text-align:left;}
	#mainnav ul,#sec00,#sec01,#sec03,#sec04,#sec05,#footer{background-color:#fff;}
	#footer{padding:30px 10px 70px 0;}
}

@media only screen and (min-width:641px){
	.col2 li{width:60%;vertical-align:top;}
	.col2 li:first-child{width:35%;padding-right:4%;}
}

@media only screen and (max-width:640px){
	.innerS{width:94%;padding-bottom:70px;}
	.col3 li{line-height:1.7;}
	.col3 img{margin:0 auto;}
	.col3 .img{padding:30px;margin-bottom:20px;}
	#map iframe{width:96% !important;left:2%;}
	#sec04_02{padding:90px 20px;}
}

@media only screen and (max-width:799px){
	#sec00,#sec01,#sec03,#sec04,#sec05,#footer{background-color:#fff;}
	h1{font-size:500%;font-weight:normal;line-height:1.0em;background-size:400% 800%;}
	#pockets{margin-top:0em;}
	.col3 li{margin:50px auto 0 auto;display:block;}
	section{padding-top:50px;}
	section h2{margin:0 auto 20px;}
	section h2 span {padding:0 30px;}
	#sec01 img{width:40%;}
	#sec03 img{width:40%;}
	#sec04_02{background-image:none;background-color:rgba(255, 255, 255, 0);padding:200px 0;}
	#youtube{width:100%;padding-top:56.75%;margin:0;}
}

@media only screen and (max-width:800px){
	#contentWrap::before{background:url(../images/bgSec04_w799.jpg) no-repeat 50% 0% / cover;content:"";position:fixed;top:0;left:0;z-index:-10;width:100%;height:100vh;}
	#killBounce{background-color:#fff;width:100%;height:100vh;position:fixed;top:0;left:0;z-index:-5;}
	#sec04_02{background-image:none;background-color:rgba(255, 255, 255, 0);padding:200px 0;}
}