@charset "utf-8";
/* CSS Document */
/* mainArea
--------------------------------------------------------------------*/

#mainArea {
  width:100%;
  height:auto;
  position:absolute;
  top:0;
  z-index:500;
}
#visualBlock {
  width:100%;
  height:75%;
  background-image:url(../images/slide/01.jpg);
  background-size:cover;
  background-position:center;
}

#recommendBlock {
  width:100%;
  height:25%;
  position: relative;
}
#recommendBlock ul {
  display: flex;
  display:-webkit-box;/*--- Androidブラウザ用 ---*/
  display:-ms-flexbox;/*--- IE10 ---*/
  display: -webkit-flex;/*--- safari（PC）用 ---*/
}
#recommendBlock li {
  width:25%;
  height:100%;
  overflow: hidden;
  position:relative;
}
.imgBox {
  z-index:50;
  width:100%;
  background-size:cover;
  background-position:center center;
  -moz-transition: -moz-transform 2s linear;
  -webkit-transition: -webkit-transform 2s linear;
  -o-transition: -o-transform 2s linear;
  -ms-transition: -ms-transform 2s linear;
  transition: transform 2s linear;
}
.imgBox:hover {
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -o-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}
#recommendBlock li a {
  color:#FFF;
}
#recommendBlock li h2 {
  position:absolute;
  padding:12px 16px 16px 16px;
  z-index:60;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 700;
  font-size:154%;
  line-height:1.1em;
  text-shadow:2px 2px 1px #000;
}
#recommendBlock li h2 span {
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 300;
  font-size:14px;
}
.bgrec_child {
  background-image:url(../images/thumb01.jpg);
}
.bgrec_coach {
  background-image:url(../images/thumb02.jpg);
}
.bgrec_sjy {
  background-image:url("../../school/images/sjy.jpg");
}
.bgrec_game {
  background-image:url(../images/thumb03.jpg);
}
.bgrec_supporter {
  background-image:url(../images/thumb04.jpg);
}
.bgrec_jy {
  background-image:url(../images/jy.jpg);
}
.bgrec_ginga {
  background-image:url(../images/thumb05.jpg);
}
.arrow_u {
  position:absolute;
  bottom:16px;
  right:20px;
  z-index:70;
}

.renrakuBox {
  position:relative;
  width:1000px;
  height:100%;
  padding:120px 0 0;
  margin:0 auto 0; 
}
.renrakuRegion {
  position:absolute;
  right:0px;
}
.renrakuCell {
  color:#FFF;
  background:rgba(0,0,0,0.60);
  padding:12px;
  border-radius: 8px;
}
.renrakuCell h2 {
  border-bottom:#CCC dotted 1px;
  padding:0 0 3px;
  margin:0 0 4px;
}
.renrakuCell a {
  color:#FFF;
}
.renrakuCell li {
  line-height:1.4em;
  padding:4px 0 0;
}

.scrollBtn {
  position:absolute;
  text-align:center;
  width:100%;
  bottom:160px;
}

.spesial_block {
  width: 1000px;
  height: auto;
  margin: 0 auto;
}
.bn_special {
	background-color:rgba(255,102,0,0.7);
  width: 350px;
  border-radius: 10px;
  position: absolute;
  top:-170px;
}
.bn_special h2 {
  font-family: "Rounded Mplus 1c";
  font-weight: 800;
  font-size: 28px;
  line-height: 1.1em;
  text-align: center;
  padding: 10px 0 0;
  color: #FFF;
}
.bn_special p {
  font-family: "Rounded Mplus 1c";
  margin: 8px;
  padding: 10px;
  font-size: 14px;
  text-align: justify;
  line-height: 1.3em;
  background-color: rgba(255,203,128,1.00);
  border-radius: 5px;
  font-weight: 600;
}

/* newsArea
--------------------------------------------------------------------*/

.newsArea {
  width:100%;
  background-color:#ededed;
  padding:30px 20px;
  box-sizing: border-box;
}
.newsArea h2 {
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 900;
  font-size:182%;
  text-align:center;
  padding:0 0 20px;
}
.newsColimn {
  width: 100%;
  max-width: 1032px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.newsBlock {
  width:30%;
  padding: 0 0 0 20px;
  box-sizing: border-box;
}
.newsBlock div {
  width: 100%;
  padding:8px 0;
  box-sizing: border-box;
}
.newsBlock dl {
  background-color:#FFF;
}
.newsBlock dt {
  padding:8px;
  line-height:1.4em;
}
.newsBlock dt a {
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 700;
  font-size:116%;
}
.newsBlock dt span {
  font-size:10px;
}
.newsBlock dd {
  padding:0 8px 8px;
}
.newsBlock dd img {
  width:100%;
  height:auto;
  margin-bottom:4px;
}
.newsBlock dd p {
  line-height:1.4em;
  padding:0 0 8px;
}
.newsBlock dd p a {
  display:block;
  text-align:right;
}
.snsBlock {
  width: 70%;
}
.box_youtube {
  width: 100%;
  margin-top: 8px;
  aspect-ratio: 16 / 9;
}
.box_youtube iframe {
  width: 100%;
  height: 100%;
}
.box_twitter {
  width: 100%;
  height: 800px;
  border: #CCC solid 1px;
  -webkit-border-radius:4px;
  -khtml-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  box-sizing: border-box;
  overflow: scroll;
  margin-top: 12px;
}
.box_twitter iframe {
  width: 100%;
  height: auto;
}


/* infoArea
--------------------------------------------------------------------*/

.infoArea {
  width:100%;
  padding:30px 0;
}
.infoArea h2 {
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 900;
  font-size:182%;
  text-align:center;
  padding:0 0 10px;
}
.infoBlock ul {
  width:100%;
  max-width:1032px;
  margin:0 auto;
  display: flex;
  justify-content: center;
  flex-wrap:wrap;
}
.infoBlock li {
  width:226px;
  background-color:#ededed;
  margin:16px;
}
.infoBlock dl {
}
.infoBlock dt {
  padding:8px 8px 2px;
  line-height:1.4em;
}
.infoBlock dt img {
  width:100%;
  height:auto;
}
.infoBlock dt a {
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 700;
  font-size:116%;
}
.infoBlock dt span {
  font-size:10px;
}
.infoBlock dd {
  padding:0 8px 8px;
}
.infoBlock dd p {
  line-height:1.4em;
  padding:0 0 8px;
}
.infoBlock dd h3 {
  line-height:1.4em;
  padding:0 0 4px;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 900;
  text-align:center;
}
.infoBlock a:hover {
  text-decoration:none;
}


/* SmartPhone用設定
------------------------------------------------------------------- */
@media screen and (min-width: 320px) and (max-width: 767px) {



.renrakuBox {
  width:100%;
}
.renrakuRegion {
  position:absolute;
  bottom:120px;
  width:100%;
  height:auto;
  overflow:auto;
}
.renrakuCell {
  color:#FFF;
  background:rgba(0,0,0,0.60);
  padding:12px;
  border-radius: 0px;
}
.renrakuCell h2 {
  border-bottom:#CCC dotted 1px;
  padding:0 0 3px;
  margin:0 0 4px;
}
.renrakuCell a {
  color:#FFF;
}
.renrakuCell li {
  line-height:1.4em;
  padding:4px 0 0;
}



#recommendBlock {
  width:100%;
  height:auto;
}
#recommendBlock ul {
  display: flex;
  display:-webkit-box;/*--- Androidブラウザ用 ---*/
  display:-ms-flexbox;/*--- IE10 ---*/
  display: -webkit-flex;/*--- safari（PC）用 ---*/
  flex-wrap:wrap;
  height:auto;
}
#recommendBlock li {
  width:50%;
  height:160px;
  overflow: hidden;
  position:relative;
  margin: 0px;
  padding: 0px;
}
#recommendBlock li .imgBox {
  height: 160px;
  display: block;
  margin: 0px;
  padding: 0px;
}
#recommendBlock li a {
  height: 160px;
  display: block;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.newsColimn {
  display:block;
}

.newsBlock {
  width:100%;
  padding: 12px 0 0 0px;
}

.snsBlock {
  width: 100%;
  height: auto;
  
}

.infoBlock {
  width:auto;
  margin:0 10px 0;
}
.infoBlock li {
  width:49%;
  margin:0px;
  border:#FFF solid 1px;
}
  
#mainArea {
  position:relative;
}

#visualBlock {
  width:100%;
  height:330px;
  background-image:url(../images/slide/01.jpg);
  background-size:cover;
  background-position:center;
}
  


.spesial_block {
  width: 100%;
}
.bn_special {
	background-color:rgba(255,102,0,1);
  width: 100%;
  border-radius: 0px;
  position: relative;
  top:0px;
  padding-bottom: 8px;
}
.bn_special h2 {
  font-family: "Rounded Mplus 1c";
  font-weight: 800;
  font-size: 20px;
  line-height: 1.1em;
  text-align: center;
  padding: 10px 0 0;
  color: #FFF;
}
.bn_special p {
  font-family: "Rounded Mplus 1c";
  margin: 8px 8px 0px;
  padding: 10px;
  font-size: 13px;
  text-align: justify;
  line-height: 1.3em;
  background-color: rgba(255,203,128,1.00);
  border-radius: 5px;
  font-weight: 600;
}  

}