/* CSS Document */
html, body { height: 100%;}
p{font-size:14px;line-height: 28px;}
.pcOnly{display:block!important;}
.spOnly{display:none!important;}
.right{float:right;}
.left{float:left;}
.wrap11{width:1100px;margin:0 auto;}
.flexWrap{display:flex;justify-content: space-between;}
.wbg{background-color:rgba(240,240,240,0.6);}
.yeBg{background-color:rgba(245,228,47,0.6);}
/*=====タイトル・フォント=====*/
.secTtl{line-height:50px;letter-spacing:2px;}
.mp1{font-family:"M+ Type-1 (general-j) Heavy",
	"M+ Type-1 (general-j) Light", sans-serif;font-weight:bold;}
.tetsu{font-family:tetsu;}
@font-face {
  font-family: tetsu;
  src: url("../font/tetsu.woff") format("woff"),/*For Modern browser*/
  url("../font/tetsu.otf") format("opentype");/*For iOS Android*/
}
.otsu{font-family:otsu;}
@font-face {
  font-family: otsu;
  src: url("../font/otsu.woff") format("woff"),/*For Modern browser*/
  url("../font/otsu.eot") format("embedded-opentype");/*For iOS Android*/
}
.mp1Ttl{line-height:50px;}
.mp1Ttl img{height:50px;width:auto;}
/*=====ボタン=====*/
.moreBtn{margin-top:20px;}
.moreBtn a{display:block;width:150px;margin-left:auto;}
.moreBtn a:hover{animation: shake 0.2s linear infinite;-webkit-animation: shake 0.2s linear infinite;}
.moreBtn a:hover img{opacity:inherit;}
/*=====コンテナ=====*/
.outer{display:flex;padding-top:50px;}
.mainInner{width:850px;}
.subInner{width:250px;position:relative;z-index: 15;}
.wrapPad{width:95%;margin:0 auto;padding:30px 0;}
/*=====サブ=====*/
.subInner li{text-align:center;transition: 0.1s;background-color:#a81e37;}
.subInner li:nth-of-type(even){background-color:#000;}
.subInner li > a{display:block;padding:15px 0;}
.subInner li > a:hover{box-shadow: 0px 0px 20px black;position:relative;z-index:20;}
.subInner li > a:hover img{opacity:inherit;animation: puyo 0.4s linear;}
.subInner li h3{color:#f5e42f;font-size:36px;line-height:36px;font-family:"vdl-logog",sans-serif;letter-spacing:5px;}
.subInner li p{color:#fff;font-size:12px;line-height:24px;letter-spacing:2px;}
.subInner li p.kag{font-family:"kegger-collegiate",sans-serif;font-size:28px;line-height:28px;}
.subInner .snsLi{padding:15px;}
.subInner .snsLi div{display:flex;justify-content: space-around;margin-top:14px;}
.subInner .snsLi div p{width:50px;}
.subInner .snsLi div p a{color:#fff;font-size:30px;display:block;padding:10px 5px;background-color:#a81e37;border-radius:10px;}
.subInner .snsLi div p a:hover{background-color:#f5e42f;color:#a81e37;animation: shake 0.2s linear infinite;-webkit-animation: shake 0.2s linear infinite;}

/*=====フッター=====*/
.footWrap{background-color:#000;text-align:center;padding:40px 0;margin-top:50px;}
.footWrap .wrap11{width:800px;}
.footWrap a,.footWrap h2,.footWrap p{color:#fff;}
.footWrap h2{font-family: tetsu; font-size:40px;border-bottom:3px solid #fff;letter-spacing:8px;padding-bottom:10px;}
.footWrap ul li{display:inline-block;margin-top:20px;padding:0 10px;}
.footWrap ul li a{font-size:16px;transition:0.4s;letter-spacing:1px;}
.footWrap ul li a:hover{color:#f5e42f;}
.footWrap .flexWrap{justify-content:center;margin-top:80px;}
.footWrap .flexWrap div{width:170px;margin-right:30px;}
.footWrap .flexWrap p{text-align:left;}
.copy{font-size:10px;margin-top:50px;}

/*=====ぷよん=====*/

#page001{animation: puyon 5.0s;animation-iteration-count:infinite;}
#page001:hover {animation: shake 0.2s linear infinite;-webkit-animation: shake 0.2s linear infinite;}
#page001:hover img{opacity:inherit;}
@keyframes puyon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  65%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  70%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  75%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
  80%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  85%  { transform: scale(0.95, 1.05) translate(0%, -3%); }
  90%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
  95%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
/*=====はねますっ=====*/
.tbBox img:hover {-webkit-animation: bounce 1s ease-in-out;animation: bounce 1s ease-in-out;opacity:inherit;}
@-webkit-keyframes bounce {
  5%  { -webkit-transform: scale(1.1, .8); }
  10% { -webkit-transform: scale(.8, 1.1) translateY(-5px); }
  15% { -webkit-transform: scale(1, 1); }
}
@keyframes bounce {
  5%  { transform: scale(1.1, .8); }
  10% { transform: scale(.8, 1.1) translateY(-5px); }
  15% { transform: scale(1, 1); }
}
/*=====繰り返すっ=====*/
.bgWrap{position:fixed;z-index: -9999;width: 100%;height: 100%;background: url(../img/bg2.jpg) repeat-x;background-size:cover;-webkit-animation: bgroop 90s linear infinite;animation: bgroop 90s linear infinite;background-repeat: repeat-x;}
@-webkit-keyframes bgroop {
from {background-position: 0  0;}
to {background-position: -4300px 0;}
}
@keyframes bgroop {
from {background-position: 0 0;}
to {background-position: -4300px 0;}
}

/*=====ぷよんっ=====*/
.puyo {
  animation: puyo 1.0s linear 0s 1;
}
@keyframes puyo {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  40%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
  50%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  60%  { transform: scale(0.95, 1.05) translate(0%, -3%); }
  70%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
  80%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

/*=====震えるっ=====*/
.shake-anime{animation: shake 0.2s linear infinite;-webkit-animation: shake 0.2s linear infinite;}
@keyframes shake {
	0% { transform: translate(3px, 2px) rotate(0deg); }
	10% { transform: translate(-2px, -3px) rotate(-1deg); }
	20% { transform: translate(-4px, 0px) rotate(1deg); }
	30% { transform: translate(0px, 3px) rotate(0deg); }
	40% { transform: translate(2px, -2px) rotate(1deg); }
	50% { transform: translate(-2px, 3px) rotate(-1deg); }
	60% { transform: translate(-4px, 2px) rotate(0deg); }
	70% { transform: translate(3px, 2px) rotate(-1deg); }
	80% { transform: translate(-2px, -2px) rotate(1deg); }
	90% { transform: translate(2px, 4px) rotate(0deg); }
	100% { transform: translate(2px, -3px) rotate(-1deg); }
}
/*=====回転っ=====*/
.rotate-anime {animation: rotate-anime 3s linear infinite;}
@keyframes rotate-anime {
	0%  {transform: rotate(0);}
	100%  {transform: rotate(360deg);}
}


@media screen and (max-width: 768px) {
.pcOnly{display:none!important;}
.spOnly{display:block!important;}
.wrap10{width:90%;margin:0 auto;}

.outer{display:block;width:90%;margin:0 auto;margin-top:40px;}
.mainInner{width:100%;}
/*=====ヘッダー=====*/
header{position:fixed;top:0;width:100%;z-index: 1000;}
header .headSpWrap{height:80px;width: 100%;background-color:rgba(255,255,255,0.8);padding:10px;}
header h1{width:110px;margin:0 auto;}

.zdo_drawer_menu a:visited{color:#fff;}
.zdo_drawer_nav_wrapper .flexWrap{position:fixed;top:10px;left:24px;}
.zdo_drawer_nav_wrapper .flexWrap ul li{display:inline-block;font-size:20px;}
.zdo_drawer_menu .zdo_drawer_nav{padding:70px 24px;}
/*=====フッター=====*/
.spFooterWrap .wrap11{width:90%;text-align:center;margin-top:30px;}
.spFooterWrap .wrap11 div{width:50%;margin:0 auto;margin-bottom:20px;}
.spFooterWrap .wrap11 .copy{margin-top:20px;}
/*=====タイトル=====*/
.mp1Ttl img{width:100%;height:auto;}



}