@charset "UTF-8";
/* reset css  */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
html,body,header,h1,h2,h3,div,ul,li,p{margin:0;padding:0;}
ul,li{list-style:none;}
a{text-decoration:none;color:#fff}

/* font */
html,body,header,h1,h2,h3,div,ul,li,p{font-size:20px;}
body{font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;}
.small{font-size:0.8em;}

@media (max-width: 798px){
html,body,header,h1,h2,h3,div,ul,li,p{font-size:18px;}
}

@media (max-width: 538px){
html,body,header,h1,h2,h3,div,ul,li,p{font-size:14px;}
}

/* PC,SP display controll */
.for_pc{display:block;}
.for_sp{display:none;}

@media (max-width: 538px){
.for_pc{display:none;}
.for_sp{display:block;}
}

/* img control */
img{vertical-align:bottom;max-width:100%;}
.img_center{display:block;margin:auto;}

@media (max-width: 798px){
.img_center{width:98%;}
}

/* margin padding */
.sp_t24{padding:24px 0 0;}
.wp{overflow:hidden;max-width:1420px;margin:auto;box-shadow:0px 0px 16px 14px #f7f7f7;background:rgba(0,113,188,0.3);}

/*header*/
.wp header{padding:1% 2%;}
.wp header ul{display:flex;align-items:center;justify-content:space-between;}
.wp header ul li.he_fl{display:flex;margin:10px 0;justify-content:space-around;}
.wp header ul li.he_fl a{width:98%;margin:0 0.5%;}
.wp header ul li.he_fl a:hover{opacity:0.7;}

@media (max-width:538px){
.wp header{display:block;font-size:14px;padding:1% 2%;}
.wp header ul{display:block;}
}

@media (max-width: 798px){
.wp header ul li.he_fl a{width:48%;}
}

/* body */
h1,h2,.inner{margin:1% auto;}
h1{margin:0 auto 2%;text-align:center;max-width:1100px;}
h2{font-size:50px;text-align:center;text-decoration:underline;}
.inner{max-width:87.60%;text-align:center;}
.inner02 img{width:100%;}
 /* event image */
.event_image{display:flex;flex-flow:row wrap;justify-content:space-around;}
.event_image dl{width:33%;max-width:365px;margin:10px auto;padding:0;background:rgba(82,195,241,1);}
.event_image dt{color:#e50010;fontt-weight:bold;padding:5px 10px;}
.event_image dd{margin:0;padding:5px 10px;}
.event_image dd span.date{font-weight:bold;}
p{text-align:center;margin:0 auto 20px;}
.download{background:rgba(82,195,241,1);display:flex;justify-content:space-around;padding:2% 0;}
.download .item{width:23%;}
.download img{width:100%;display:block;}
.download .button_image{margin:3% 0 1%;text-align:center;background:#00135d;color:#fff;font-weight:bold;border:2px solid #fff;border-radius:20px;box-shadow:0 0 0 2px #00135d;cursor:pointer;}
.inner.twitter{display:flex;justify-content:center;}
.select_02{background:rgba(82,195,241,1);padding:40px;display:flex;justify-content:space-around;margin:40px 5.5% 0;max-width:1100px;}
.attendance{position:relative;}
.attendance p{position:absolute;color:#fff;font-weight:bold;text-decoration:underline;font-size:3.6rem;left:25%;bottom:2%;}

@media screen and (max-width: 538px){
h2{font-size:3rem;}
.event_image dl{width:100%;}
.download{flex-flow:row wrap;padding:0 2% 2%;}
.download .item{width:100%;margin:2% 0;}
.select_02{display:block;}
}

/* YouTubeサムネ */
.thumbnail{display:flex;background:rgba(24,195,241,1);justify-content:space-around;padding:2% 0;}
.youtube{width:200px;}
.youtube iframe{width:100%;height:100%;}
footer{background:url("../image/footer_bg.png") no-repeat top center;}
footer p{text-align:center;padding:50px 0;color:#fff;}

@media screen and (max-width: 538px){
.thumbnail{flex-flow:row wrap;}
.youtube{width:100%;height:100%;margin:1% 0;aspect-ratio:9 / 16;}
}
/*header

article {
  font-size: 12px;
}
@media (max-width: 538px) {
article {
  font-size: 10px;
} 
}
.app{margin: 0 auto 4%;}
.app a:hover{opacity: 0.7;}
*/

/*ボタン
.wp .btn,.wp .btn02 {
  text-align: center;
  margin: 2% 0 4%;
  transition: all 0.2s;
}
.wp .btn03 {
  text-align: center;
  margin: 2% 0 4%;
  transition: all 0.2s;
}
@media (max-width: 1420px) {
  .wp .btn {
  }
}
.wp .btn:hover {
  transform: scale(1.1, 1.1);
}
.wp .btn02:hover,.wp .btn03:hover{opacity: 0.7;}
.wp .btn a {
  margin: auto;
  font-size: 50px;
  display: block;
}




@media (max-width: 798px) {
  footer p {
    padding: 20px 0;
    font-size: 14px;
  }
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
    margin: 4% 0;
}
.douga_p{font-size: 2.0rem;font-weight: bold;text-align: center;color: red;margin: 4% 0 0;}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}*/