@charset "utf-8";

/* 解除 */
.titleArea, #mainWave, #headerWave{display: none;}
.pageInner {width: 100%;padding:0;}


/* clearfix */
.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}

.delighter{
  opacity: 0;
  transform: translatey(10%);
  transition: all 1s ease-out;
}
.delighter.started {
  opacity: 1;
  transform: none;
}

i.kome{
  font-style: normal;
  font-family: YakuHanJP, "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", Arial, "メイリオ", sans-serif;
}
.wrap{
  height: 100%;
  padding: 0 0 50px;
  color: #222;
  font-family: "Rounded Mplus 1c", Helvetica, MS Sans Serif,"游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
  font-size: 14px;
  line-height: 1.8em;
}

img{width:100%;}

  #bg {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: url("/static/stu48/official/feature/afterSchool/bg.png") no-repeat scroll center center/ cover;
    z-index: 0;
  }

h1{line-height: 0; padding:0 0 75px;}
.ph{line-height: 0;}

section h2{
  font-family: 'Quicksand', sans-serif;
  text-align: center;
  font-size: 60px;
  line-height: 1.3;
  color: #004ea2;
  padding: 0 0 45px;
}

section{box-sizing: border-box;}

.pageInner .wrap section{
  padding:65px 75px 75px;
  background:#fff;
}

#kv{
  background: #fff;
  padding:75px;
  box-sizing: border-box;
}
#leadTop{
    background: #ebf8ff;
    padding: 30px;
    margin: 0 0 75px;
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 1px;
}
#leadTop p{
  padding:0 0 10px;
}
#menu ul{text-align:center;}
#menu ul li{
    display: inline-block;
    padding: 0 25px;
    font-size: 25px;
    font-family: 'Quicksand', sans-serif;
}
#menu ul li a, section#timeTable h2{
  color: #ff5f83;
}
#menu ul li:nth-child(2) a, section#event h2{
  color: #23c9b1;
}
#menu ul li:nth-child(3) a, section#special h2{
  color: #b569ce;
}
#menu ul li:nth-child(4) a, section#specialEvent h2{
  color: #2eaef2;
}

section#specialEvent h2{
  font-family:"Rounded Mplus 1c", Helvetica, MS Sans Serif,"游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
  font-size: 50px;
}
section h3 {
    position: relative;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    padding: 0 0 40px;
    letter-spacing: 1px;
}
section h3::after {
    content: "";
    display: block;
    position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  width: 15%;
  height: 2px;
  margin: 0 auto;
  background: #23c9b1;
}
section#specialEvent h3::after {
  background: #2eaef2;
}

#timeTable .ph{
  padding:0 0 10px;
}

.logoParco{
  width: 280px;
  line-height: 0;
  margin: 0 auto 40px;
}
#event > ul li{
  padding: 30px;
  border: 2px solid #23c9b1;
  margin: 0 0 40px;
}
.lead{  padding:0 0 20px;}
.lead p, .text, .text p{
  padding:0 0 10px;
}
.lead{
  font-size:18px;
}
.red{color: #ee4757;}
.sml{font-size: 12px;}
.indent{
  display: inherit;
  text-indent: -1em;
  padding: 0 0 0 1em;
}
.attend li{
  text-indent: -1em;
  padding: 0 0 0 1em;
  line-height: 1.3;
}
table.date{
  font-size: 16px;
  letter-spacing: 2px;
  border: 1px solid;
  padding: 10px;
  width: 100%;
  margin: 0 0 40px;
}
table.date tr{
  margin: 15px;
  display: block;
}
table.date tr th{
  padding: 0 30px 0 10px;
  border-right: 1px solid;
}
table.date tr td{
  padding: 0 0 0 30px;
}
#sweetsList li .ph{
  padding: 0 0 5px;
}
#sweetsList li .price span{
  font-size: 0.8em;
}

#prize{
  margin: 0 0 40px;
  padding: 30px 20px;
  border: 2px solid #2eaef2;
}
#prize dl{
  text-align:center;
  line-height: 1.4;
}
#prize dl dt, #prize dl dd{
  display:inline-block;
  width:50%;
  padding:0 20px;
  vertical-align:top;
  box-sizing: border-box;
}
#prize .ph{
  padding: 5px 0;
}
#prize dl .tit{
  font-size: 16px;
  color: #d0944c;
  font-weight: bold;
}
#prize dl dd .tit{
  color: #999;
}
#prize dl img{
  border: 1px solid #f9f0e1;
}
#prize dl dd img{
  border: 1px solid #eee;
}
#specialEvent table.date{
  margin: 0 0 5px;
  width: 100%;
}
#specialEvent table.date tr.day{
  padding: 0 0 15px;
  border-bottom:1px solid;
}
#specialEvent table.date tr th {
  padding: 0 0 0 10px;
  border-right: 1px solid;
  width: 120px;
}
#specialEvent table.date tr td{
  padding: 10px 0 10px 30px;
}
#specialEvent .btn a {
  margin: 30px auto 0;
}

.btn a {
    display: block;
  width:400px;
    line-height: 1em;
    padding: 20px 0 24px;
    color: #fff;
    text-align: center;
    letter-spacing: 1px;
    font-size: 16px;
    border-radius: 30px;
  margin: 0 auto;;
  background:#004ea2;
  border:1px solid #004ea2;
}
#event .btn a {
  background:#23c9b1;
  border:1px solid #23c9b1;
}
#special .btn a {
  background:#b569ce;
  border:1px solid #b569ce;
}

.iconList{
    width: 800px;
    margin: 0 auto 40px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.iconList li{
    width: 260px;
    padding:0 20px 40px;
    box-sizing: border-box;
}
.iconList li a{
    display:block;
    position:relative;
}
.iconList li a .icon{
    position:absolute;
    top: 0;
    left:0;
    
}
.iconList li a .icon0{
    transform: scale(0.8,0.8);
    transition:0.3s;
    -webkit-transition:0.3s;
    
}
.iconList li a:hover .icon0{
    transform: scale(1,1);
    
}
.iconList li a .icon2{
    animation: icon2 5s ease infinite;
    -webkit-animation: icon2 5s ease infinite;
    
}
@keyframes icon2{
	0%{transform: rotate(0deg);}
	20%{transform: rotate(360deg);}
	100%{transform: rotate(360deg);}
}

@webkit-keyframes icon2{
	0%{transform: rotate(0deg);}
	20%{transform: rotate(360deg);}
	100%{transform: rotate(360deg);}
}


.iconList li a .icon3{
    animation: icon3 5s ease infinite;
    -webkit-animation: icon3 5s ease infinite;
    
}
@keyframes icon3{
	0%{transform: scale(1,1);}
	50%{transform: scale(1.2,1.2);}
	100%{transform: scale(1,1);}
}

@webkit-keyframes icon3{
	0%{transform: scale(1,1);}
	50%{transform: scale(1.2,1.2);}
	100%{transform: scale(1,1);}
}

@media screen and (min-width: 960px){

  #menu ul li a{ position: relative;}
#menu ul li a:after{
  opacity: 0;
  display: block;
  position: absolute;
  bottom: -10px;
  left: 0;
  content:'';
  width: 100%;
  height: 2px;
  background: #ff5f83;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
#menu ul li:nth-child(2) a:after{
  background: #23c9b1;
}
#menu ul li:nth-child(3) a:after{
  background: #b569ce;
}
#menu ul li:nth-child(4) a:after{
  background: #2eaef2;
}
#menu ul li a:hover::after{ opacity: 1; bottom: -5px;}

  .btn a:hover{
    color:#004ea2;
    background:#fff;
  }
  #event .btn a:hover{
    color:#23c9b1;
    background:#fff;
  }
  #special .btn a:hover{
    color:#b569ce;
    background:#fff;
  }

  #kv{
    width:950px;
      margin: 70px auto 100px;
  }
  .pageInner .wrap section{
    width:950px;
    margin:150px auto;
  }
  
  #sweetsList{
    margin: 0 -10px 22px;
    text-align:center;
  }
  #sweetsList li {
    display: inline-block;
    width: 254px;
    vertical-align: top;
    padding: 11px;
    border: 1px solid #ccc;
    margin: 0 9px 18px;
    text-align: left;
    box-sizing: border-box;
  }

}

.sp{display:none;}


@media screen and (max-width: 960px){

  .sp{display:inline-block;}

  #scrollHeader .bgWave{display: none;}
  
  .wrap{padding: 20px 20px 50px;font-size: 13px;}
  
  #kv{
    padding:35px 20px 20px;
  }
  h1 {
    padding: 0 0 35px;
  }
  section h2{
    padding: 0 0 20px;
    font-size: 30px;
  }
  section#specialEvent h2{
    font-size: 25px;
  }
  section h3 {
    font-size: 18px;
    padding: 0 0 25px;
  }
  section h3::after{bottom: 10px;}
  
  #leadTop {
    padding: 15px;
    margin: 0 0 25px;
    font-size: 15px;
  }
  .lead, .text{
    line-height: 1.5;
  }
  .lead {
    font-size: 15px;
  }
  
  .btn a{
    width: 100%;
    padding: 15px 0 18px;
    font-size: 14px;
  }
  table.date {
    margin: 0 0 30px;
    width: 100%;
    font-size: 14px;
  }
  table.date tr {
    margin: 8px 12px;
  }
  table.date tr th{
    display: block;
    border:none;
    border-bottom: 1px solid;
    padding: 0 0 6px;
    text-align: center;
  }
  table.date tr td {
    padding: 6px 0 0;
  }
  
  #menu ul li {
    padding: 0 10px 10px 0;
    font-size: 18px;
    width: 50%;
    box-sizing: border-box;
    vertical-align: middle;
  }
  #menu ul li:nth-child(2n){
    padding: 0 0 5px 10px;
  }
  
  .pageInner .wrap section {
    margin: 50px 0;
    padding: 25px 20px 30px;
  }
  #event > ul{
    padding: 0 0 5px;
  }
  #event > ul li {
    margin: 0 0 20px;
    padding: 15px;
  }
  .logoParco{
    width: 50%;
    margin: 0 auto 30px;
  }
  #sweetsList{
    padding:0 0 25px;
    border-top: 1px solid #ccc;
  }
   #sweetsList li{
    border-bottom: 1px solid #ccc;
    padding:18px 0 12px;
  }
  
  #prize {
    margin: 0px 0 25px;
    padding: 15px;
  }
  #prize dl dt, #prize dl dd{
    width: 100%;
    padding: 0;
    text-align: left;
  }
  #prize dl .tit{
    text-align: center;
  }
  #prize dl dt{
    padding: 0 0 20px;
    margin: 0 0 20px;
    border-bottom: 1px solid #2eaef2;
  }
  #prize .ph {
    padding: 5px 0;
    width: 90%;
    margin: 0 auto;
  }
  
  #specialEvent table.date tr th {
    padding: 0;
    border: 0;
    width: 100%;
    display: block;
    font-weight: bold;
  }
  #specialEvent table.date tr td {
    padding: 2px 0 0;
    line-height: 1.3;
  }
  #specialEvent table.date tr.day {
    padding: 0 0 12px;
    border-bottom: 1px solid;
    margin-bottom: 10px;
  }
  #specialEvent table.date tr td span.indent{
    padding: 5px 0 3px 1em;
  }
  #specialEvent .btn a {
    margin: 20px auto 5px;
  }
  .iconList {
    width: 100%;
    margin: 0 auto 20px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
  }
  .iconList li {
    width: 32%;
    padding: 5px;
    box-sizing: border-box;
  }
  
}