@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Teko");

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
　追加
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
a.btn--orange {
  color: #fff;
  background-color: #eb6100;
  border-bottom: 5px solid #b84c00;
padding: 10px;
}
a.btn--orange:hover {
  margin-top: 3px;
  color: #fff;
  background: #f56500;
  border-bottom: 2px solid #b84c00;
}
a.btn--shadow {
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}
p.burasage {
margin-left: 1rem;
text-indent: -1.5rem;
}

.game {
  
  /*margin-top:30px;*/
  padding-bottom:30px;
  background: #ffffff;
 /* background:radial-gradient(white, #87cefa); 
*/}

h3 {
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.4em 0.8em;
	width: 80%;
	margin: 0 auto;
	font-size: 30px;

}

.cate {
 height:50px;
 width:50px;
 border-radius:50%;
 line-height:50px;
 text-align:center;
}

h4 {
  position: relative;
  padding: 0.6em;
  background: -webkit-repeating-linear-gradient(-45deg, #d0de27, #d0de27 4px,#d0de27 3px, #d0de27 8px);
  background: repeating-linear-gradient(-45deg, #d0de27, #d0de27 4px,#d0de27 3px, #d0de27 8px);
  border-radius: 7px;
	width: 100px;
	margin: 0 auto;
	margin-bottom: 20px;
	color: aliceblue;
}

h4:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #d0de27;
  width: 0;
  height: 0;
}

h5 {
  position: relative;
  padding: 0.6em;
  background: -webkit-repeating-linear-gradient(-45deg, #FA8072, #FA8072 4px,#FA8072 3px, #FA8072 8px);
  background: repeating-linear-gradient(-45deg, #FA8072, #FA8072 4px,#FA8072 3px, #FA8072 8px);
  border-radius: 7px;
	width: 100px;
	margin: 0 auto;
	margin-bottom: 20px;
	color: aliceblue;
}

h5:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #FA8072;
  width: 0;
  height: 0;
}
.modalBtn{
  border: none;
  outline: none;
  background: transparent;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
　共通
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html {
  font-size: 62.5%;
  overflow: auto;
}
body {
  color: #4e5052;
  background: white;
  font-family: 'ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN','メイリオ', Meiryo,'Meiryo UI',YuGothic,'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
  font-size: 14px;
  font-size: 1.4rem;
  text-align: center;
}
ul {padding-left:0px;}
li {list-style-type: none;}
a {text-decoration: none;transition: all .1s ease-out;}
a:link {color: #444;}
a:visited {color: #444;}
a:hover ,a:hover img {opacity: 0.8;}
br.pc, .s br.sp { display: inline; }
br.sp, .s br.pc { display: none; }
h2 img {height: 101px;margin: 80px auto 40px;}
.txt {color:#333;}
.pc_only {display:block;}
.sp_only {display:none;}
.p100 {width:100%;}
.marg {padding-top: 20px; padding-bottom: 20px;}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
　個別
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wrapper {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
/* header
-----------------------------*/
header {
    position: static;
    display: flex;
    overflow: hidden;
}
header h1 {
  position:absolute;
  top:20px;
  left:20px;
}

/* メニュー
-----------------------------*/
.menu{
    height: 100px;
    position: absolute;
    top: 20px;
    right:20px;
    width: 100px;
    z-index: 99;
}
.top_nav a:hover {
  opacity:1;
  cursor: pointer;
}

.menu__line{
    background: url(../img/icon_menu_open.png)no-repeat ;
    display: block;
    height: 100px;
    position: absolute;
    transition:transform .3s;
    width: 100%;
}
span.active {
  background: url(../img/icon_menu_close.png)no-repeat ;
  position: fixed;
}

/*buttom*/
.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

.btn-wrap {
  margin: 30px 0;
}

a.btn-c {
  font-size: 2.2rem;

  position: relative;

  padding: 0.25rem 2rem 1.5rem 3.5rem;

  color: #fff;
  background: #32b16c;
  -webkit-box-shadow: 0 5px 0 #2c9d60;
  box-shadow: 0 5px 0 #2c9d60;
}

a.btn-c span {
  font-size: 1.5rem;

  position: absolute;
  top: -10px;
  left: calc(50% - 150px);

  display: block;

  width: 300px;
  padding: 0.2rem 0;

  color: #32b16c;
  border: 2px solid #32b16c;
  border-radius: 0.5rem;
  background: #fff;
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}

a.btn-c:hover {
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);

  color: #fff;
  background: #30a967;
  -webkit-box-shadow: 0 2px 0 #2c9d60;
  box-shadow: 0 2px 0 #2c9d60;
}

a.btn-c:hover:before {
  left: 2rem;
}

/*popup*/
.modal {
  visibility: hidden;
  overflow-y: scroll;
  opacity: 0;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  transition: opacity 0.3s, visibility 0s 0.3s;
  background: rgba(0,0,0,0.8);
}
.modal.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s, visibility 0s 0s;
}
.modal_container {
  display: flex;
  min-height: 100%;
  justify-content: center;
  align-items: center;
}
.modal_container _:-ms-lang(x)::-ms-backdrop,
.modal_container {
  min-height: 100vh;
}
.modal_container::after {
  content: '';
  min-height: inherit;
  font-size: 0;
}
.modal_inner {
  margin: 20px auto;
  width: auto;
}
.modal_content {
  display: none;
  border-radius: 2px;
  background: #fff;
  width: auto;
  height: auto;
  padding-bottom: 20px;
  border-radius: 30px 30px 30px 30px;
}
.is-active .modal_content {
  display: block;
}

.modal_content .text_wrapper {
  margin-top: 20px;
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 20px;
  text-align: left;
}

.modal_content .text_wrapper p{
  padding-bottom: 10px;
}

.modalClose {
  margin-top:15px;
  margin-right: 25px;
  margin-left: 25px;
  font-size: 19px;
}


/*iframe*/
.video-warp{
  max-width: 50%;
}
.video{
  position: relative;
  width:100%;
  height:0;
  padding-top: 56.25%;
  overflow: hidden;
}
.video iframe{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}

/*gnav*/
.fixed {
    position: fixed;
    width: 100%;
    height: 100%;
}
.gnav{
    background: #ffcb04;
    display: none;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 98;
}
.gnav__wrap{
    align-items:center;
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    width: 100%;
    background: url(../img/img_teach3.png)no-repeat bottom left;
    background-size: 50vh;
}
.gnav__menu {
  text-align: center;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.gnav__menu__item{
    margin: 0;
}
.gnav__menu__item a{
    color: #fff;
    font-size: 2em;
    font-weight: bold;
    padding: 20px;
    text-decoration: none;
    transition: .5s;
    display: block;
    background: url(../img/border.png)no-repeat bottom;
}
.gnav__menu__item a:hover{
    color: #666;
}

/* mv
------------------------------ */
.mv {
  height: 800px;
  width: 100%;
  background: url("../img/img_mvillustpicture2026.png") center center no-repeat;
  background-size: cover;
}
.mv_illust {
margin:0 auto;
text-align: center;
padding-top:30px;
}
.mv_txt {
  max-width:1000px;
  background:rgba(255,255,255,0.7);
  height:auto;
  border-radius: 12px;
  color: #fff;
  padding:20px 0;
      margin-top: 10px;
  text-shadow:
      black 2px 0px,  black -2px 0px,
      black 0px -2px, black 0px 2px,
      black 2px 2px , black -2px 2px,
      black 2px -2px, black -2px -2px,
      black 1px 2px,  black -1px 2px,
      black 1px -2px, black -1px -2px,
      black 2px 1px,  black -2px 1px,
      black 2px -1px, black -2px -1px;
  font-size:18px;
}
.mv_txt2 {
  max-width:1000px;
  background:rgba(201,152,252,0.7);
  height:auto;
  border-radius: 12px;
  color: #fff;
  padding:20px 0;
      margin-top: 10px;
  text-shadow:
      black 2px 0px,  black -2px 0px,
      black 0px -2px, black 0px 2px,
      black 2px 2px , black -2px 2px,
      black 2px -2px, black -2px -2px,
      black 1px 2px,  black -1px 2px,
      black 1px -2px, black -1px -2px,
      black 2px 1px,  black -2px 1px,
      black 2px -1px, black -2px -1px;
  font-size:18px;
}
.mv_txt3 {
  max-width:1000px;
  background:rgba(111,186,42,0.7);
  height:auto;
  border-radius: 12px;
  color: #fff;
  padding:20px;
      margin-top: 10px;
  text-shadow:
      black 2px 0px,  black -2px 0px,
      black 0px -2px, black 0px 2px,
      black 2px 2px , black -2px 2px,
      black 2px -2px, black -2px -2px,
      black 1px 2px,  black -1px 2px,
      black 1px -2px, black -1px -2px,
      black 2px 1px,  black -2px 1px,
      black 2px -1px, black -2px -1px;
  font-size:18px;
}
.mv_txt4 {
  max-width:1000px;
  background-color:none;
  height:auto;
  border-radius: 12px;
  color: #fff;
  padding:20px 0;
      margin-top: 10px;
  text-shadow:
      black 2px 0px,  black -2px 0px,
      black 0px -2px, black 0px 2px,
      black 2px 2px , black -2px 2px,
      black 2px -2px, black -2px -2px,
      black 1px 2px,  black -1px 2px,
      black 1px -2px, black -1px -2px,
      black 2px 1px,  black -2px 1px,
      black 2px -1px, black -2px -1px;
  font-size:18px;
}
.body {
  width: 1117px;
  margin:0 auto;
  display: flex;
}
.bodyWrap_left .bodyWrap_right {
  display: inline-block;
}
.bodyWrap_left {
  padding-right: 40px;
  width: 100%;
  flex-grow: 1;
  flex-shrink: 1;
}
.bodyWrap_right {
  flex-grow: 0;
flex-shrink: 0;
      width: 322px;
        /* max-width: 100%; */
}
.news {
  border:3px solid #33261a;
  border-radius: 10px;
  margin-top:30px;
}
.news_wrapper {
  padding:13px 30px;
}
.news_line {
  border-bottom: 1px solid #aaaaaa;
  padding-bottom: 7px;
  padding-top: 7px;
}
.last{
    border-bottom:none;
}
.news li {
  display: inline-block;
}
li.icon_news {
  background:#ffcb04;
  padding:8px;
  border-radius: 10px;
  font-weight:bold;
  width: 16%;
  vertical-align: top;
  text-align: center;
}
.txt {
    width: 80%;
    vertical-align: middle;
    padding-left:20px;
    text-align: left;
}
li.news_wrap {
  display: block;
}

.movieArea {
  padding:40px 0 0 0;
}
.spon_movieWrap {
    background: url(../img/bg4.png);
    border-radius: 20px;
    padding:40px 0 0 0;
      margin-top:40px;
      margin-bottom:40px;
}
.note {
  padding-right:1rem;
  text-indent:-1rem;
  font-size: 14px;
  text-align: left;
}
.contest {
  background: url(../img/bg.png);
  border-radius: 20px;
  margin-top:40px;
}
.contest_wrap {
    margin:0 auto;
    text-align: center;
    padding: 30px;
}
.contest_wrap_read  {
  padding:40px 0 20px 0;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}
.contest_wrap_read_left  {
  padding:40px 0 20px 0;
  text-align: left;
  font-weight: 600;
  font-size: 17px;
color: #000;
}
.cation p {
  font-size:12px;
  padding:0 0 60px 0;
}
.contest_wrap ul {
  padding-bottom:20px;
}
.contest_wrap li {
    display: inline-block;
    vertical-align: bottom;
    width: 47%;
}
.contest_wrap li:nth-child(1) {
  padding-right:0px;
}
.btn_more {
  padding:20px 0 80px 0;
}
.btn_more img{
  width:auto;
  padding:auto;
  margin: 0 auto;
  text-align: center;
}
.ttl_join {
  margin:0 auto;
  text-align: center;
  padding-bottom:40px;
}
.tag {
  text-align: center;
}
.tag ul {
  display: flex;
  justify-content: space-between;
}
.hushtag {
  border-radius: 8px;
  border:2px solid #333;
  background: #fff;
  padding:6px;
  text-align: center;
}
.hushtag input {
  width: 100%;
  border:none;
}
.tag p {
  padding-top:20px;
}

.note {
  color:#333;
  font-size:16px;
  padding-bottom:30px;
}
.twitterArea {
  background: url(../img/bg.png);
  border-radius: 20px;
  margin-top:40px;
  position: relative;
  margin:90px 0px;
}
.btn_twitter {
  padding:30px 0 50px 0;
}
.sponsor {
  margin-top: 10px;
}
.sponsor img {
  display: block;
  margin:0 auto;
  text-align: center;
}
.sponsor_ttl {
  padding:20px 0;
}
.sponsor_Area ul {
  text-align: left;
}
.spon_1 img {
  width:100%;
  margin-bottom: 2px;
}
.spon_2,.spon_2 img {
  width: 100%;
  margin-bottom: 2px;
}
.spon_2 li {
  width:50%;
}
.twi_teacher {
  position:absolute;
  top:-50px;
  left:0;
  right:0;
  margin: auto;
}
.twi_ttl {
  padding:40px 0px 0px 0px;
}
.twitterArea p {
  color:#666;
  font-weight:bold;
  padding:20px 0px;
}
.footer_img {
  padding:100px 0 30px 0;
}
.footer_contact {font-size: 20px;color:#333;display:inline-block;padding-right:18px;}
.footer_company {font-size: 16px;color:#999;display:inline-block;padding-bottom:20px;}
.footer_copy{font-size: 16px;color:#999;padding-bottom:40px;}
.sponsor_kkt {
  padding:40px 0 20px 0;
  width:100%;
}
.message {
  padding-top:10px;
}
.message_wrap {
  /*background: url(../img/bg2.png);*/
  border-radius: 20px;
  position:relative;
  margin:10px 0 0 0;
}
.message_wrap img {
  position:absolute;
  top:-50px;
  left:0;
  right:0;
}
.message_wrap p {
  font-weight:bold;
  font-size:16px;
  margin:50px 50px 0 50px;
  padding:100px 0 30px 0;
  text-align: left;
}
.contest_link {
  background: url(../img/bg.png);
  border-radius: 20px;
  margin:40px 0;
  padding-bottom:40px;
}
.twitter_widget {
  padding:0 10px 10px 10px;
}

@media screen and (max-width: 1043px)  {
.mv_txt {
  margin:0 20px;
}
.body {
  max-width:auto;
  width:100%;
  /* margin:20px; */
  display: flex;
  flex-wrap: wrap;
}
.bodyWrap_left {
  /* width:100%; */
  text-align: left;
  padding-right: 0px;
  margin:20px;
}
.contest_wrap ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.contest_wrap li {
  width: 50%;
  margin-right: 0%;
  vertical-align: top;
}
.contest01 img {
  width:38vw;
}
.contest02 img {
  width:42vw;
}
.bodyWrap_right {
  width:100%;
  padding-top: 30px;
  margin:0;
}
.sponsorSpace {
  display:flex;
  justify-content: space-between;
  margin: 3vw;
}
.sponsor {
  width:49%;
  text-align: center;
}
.sponsor_Area {
  text-align: center;
  margin:0;
  width:48%;
  padding:0;
}
.sponsor_kkt {
  width:70%;
}
.twitterArea {
  margin:90px 3vw  30px 3vw ;
}
.footer_img {
  padding: 30px 0 30px 0;
}
.sponsor_last {
  margin:0vw;
}
.tag img {
  width: 40vw;
}
.note {
  color:#333;
  font-size:1.6vw;
  padding-bottom:30px;

}
.btn_twitter {
  padding:10px 0 0 0;
}

.sponsor_ttl {
  padding:20px 0;
}
.sponsor_Area ul {
  text-align: left;
}
.spon_1 img {
  width:100%;
  margin-bottom: 2px;
}
.spon_2,.spon_2 img {
  width: 100%;
  margin-bottom: 2px;
}
.spon_2 li {
  width:50%;
}
/* .spon_1 ,.spon_2 {
  margin:20px;
} */
.twitter_widget {
  padding:0 30px 60px 30px;
}

}

@media screen and (max-width: 750px) {
.body{margin:0;}
.pc_only {display:none;}
.sp_only {display:block;}
.mv_illust {
  padding:100px 0 0 0;
}
.mv{
  height: auto;
  width: 100%;
 background: url(../img/img_mvillustpicture2026.png) center center no-repeat;
  background-size: cover;
  text-align: center;
  padding-bottom:3vh;
}
.mv_txt {
  font-size:3.99vw;
  height:auto;
  padding:5vw;
  margin: 4vw 0 0 0;
}
header {
  position: relative;
  display: block;
  overflow: hidden;
}
.top_header {
  position: absolute;
  width: 60%;
  top: 3.7vh;
}
h1 img {
  width: 100%;
  display: block;
}
.mv {
  padding-left: 5vw;
  padding-right: 5vw;
  margin-left: 0;
  width: 100%;
  padding-top: 20vw;
}
.mv_illust {
  width:100%;
  padding:0;
}
li.icon_news {
  vertical-align: middle;
  width: 28%;
}
.txt {
  vertical-align: middle;
  width: 68%;
  padding-left: 3vw;
}
.bodyWrap_left {
  padding-right: 0px;
  margin: 0 0px;
}
.news {
  border-top: 3px solid #33261a;
  border-bottom: 3px solid #33261a;
  border-left:none;
  border-right:none;
  border-radius: 0px;
  margin-top: 0px;
}
.news_wrapper {
  padding: 3vw 5vw;
}
.contest_wrap {
  margin: 0 auto;
  text-align: center;
  padding: 5vw;
}
.contest_wrap img {
  padding-top:6vw;
}
.txt {
  font-size:3.1vw;
}
.contest {
  border-radius: 0px;
  margin-top: 0px;
  vertical-align: middle;
}
.contest_wrap img {
  width: 100%;
}
.contest_wrap p {
  font-size:3.19vw;
  padding: 6vw 0 0 0;
}
.contest_wrap ul {
  padding-bottom: 0px;
}
.contest_wrap li {
  width: 100%;
  margin-right: 0%;
  vertical-align: top;
  padding-bottom:20px;
}
.btn_more {
  padding: 0 0 60px 0;
}
.twitterArea {
  border-radius: 0px;
  padding: 10px;
  position: relative;
  margin: 90px 0px;
}
.twi_teacher {
  position: absolute;
  top: -80px;
  left: 0;
  right: 0;
  margin: auto;
  width: 50%;
}
.twi_ttl {
  width:80%;
}
.twitterArea {
  border-radius: 0px;
  padding: 5vw;
  position: relative;
  margin: 30vw 0vw 0vw 0vw;
  text-align: center;
}
.twitterArea p {
  font-size:4.26vw;
}
.ttl_join {
  padding: 4vw 0;
}
.ttl_join img {
  width: 46%;
}
.tag{
  margin:0;
}
.tag li {
  margin:0 5vw;
}
.tag img {
  width :100%;
}
.hushtag {margin:0;}
.tag p{
  padding:3vw 0;
  font-size:3.73vw;
}
.note {
  color: #333;
  font-size: 4vw;
  padding-bottom: 5vw;
}
.btn_twitter {
  padding: 0vw;
}
.btn_twitter img {
  width: 100%;
  padding-top: 0vw;
}
.note {
  margin:0 5vw;
  text-align: left;
  padding-left: 1em;
  text-indent: -1em;
}
.btn_more img{
  width:60%;
}
.sponsorSpace {
    margin:5vw;
}
.sponsor p {
  font-size:2.5vw;
}
.sponsor_ttl {
  width:50%;
  padding:1vw;
}
.sponsor_kkt {
  width: 100%;
  padding:10px;
}
.sponsor_Area {
  text-align: center;
  display: block;
  margin:0vw;
}
.sponsor_last {
  margin:0;
}
.movieArea {
  padding: 3vw;
}
.spon_movie {
  padding:3vw;
}
.spon_movieWrap {
  margin-top: 0px;
  margin-bottom: 20px;
}
.footer_contact,.footer_company  {
  display:block;
}
.menu {
  width: 16vw;
  top: 2vh;
  height: 16vw;
  right: 5%;
  cursor: pointer;
  position: absolute;
}
.menu__line {
  background: url(../img/sp_icon_menu_open.png)no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  top: 0;
  width: 16vw;
  height: 16vw;
}
span.active {
  background: url(../img/sp_icon_menu_close.png)no-repeat ;
  position: absolute;
  background-size: contain;
  left: 0;
  top: 0;
  width: 16vw;
  height: 16vw;
}
.gnav__menu  {
  margin:30vw 12vw 0 12vw;
}
.gnav__menu__item a {
  color: #fff;
  font-size: 2em;
  font-weight: bold;
  padding:5vw;
  text-decoration: none;
  transition: .5s;
  display: block;
  background: url(../img/border.png)no-repeat bottom;
}
.gnav__wrap{
  align-items:center;
  display: block;
  height: 100%;
  justify-content: center;
  position: absolute;
  width: 100%;
  background: url(../img/sp_img_teach3.png)no-repeat bottom;
  background-position: center bottom;
  background-size: contain;
}
.gnav__menu img {
  width:100%;
}

.message {
  padding:0;
}
.message_wrap {
  /*background: url(../img/bg2.png);*/
  border-radius: 0px;
  position:relative;
  margin: 0 auto;
  text-align: center;
  padding: 5vw;
}
.message_wrap img {
  position:static;
  top:0;
  left:0;
  right:0;
  padding:0;
}
.message_wrap p {
  font-weight:bold;
  font-size: 3.19vw;
  padding: 4vw 0 0 0;
  margin:0px;
  text-align: left;
}
.message_ttl img{
  width:90%;
}
.footer_contact {
  padding-right:0;
}
footer {
  margin:5vw;
}
footer p {
  margin:0 3vw;
}
.sponsorSpace_2 {
  margin:3vw;
}
.sponsorSpace_2 img {
  width:100%;
  margin-bottom: 2px;
}
.banner_half li {
  width: 50%;
}
.sponsor_Area3 {
  width: 49%;
}
.sponsor_Area3  img {
  width: 100%;
}
.footer_img img {
  width:70%;
}

.footer_sponsorTtl{
  width:100%;
  padding:1vw;
}

}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

template

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page_header {
  height: 130px;
}
.page_wrapper {
  background: url(../img/bg.png);
  border-radius: 20px;
  margin-top:40px;
}
.page_wrapper ol li {
  padding:20px 0 0 0;
  text-align: left;
  display:inline-block;
}
.contents_wrapper {
  text-align: center;
  padding: 0 40px;
}
.item_ttl img,.how_ttl img,.qa_ttl img  {
  padding-bottom: 20px;
  margin: 0 auto;
  text-align: center;
}
.item_wrapper,.how_wrapper,.qa_wrapper {
  background:#fff;
  border-radius: 20px;
}
.explain {
  padding-bottom:20px;
}
.item,.how,.qa {
  padding:20px 40px;
}
.item  ul,.how ul,.qa ul {
  padding:70px;
  text-align: left;
}
.item li,.how li,.qa li {
  font-size:16px;
  font-weight:bold;
  color:#333;
}
.commentArea {
  padding:40px 0 10px 0;
}
.btnArea {
  padding-bottom:40px;
}
.ttl_contents {
  padding:40px 0;
}
.ttl_experiment_contents {
  padding:40px 0;
}

.qa_wrapper {
  padding:30px 40px;
}
.qa_wrap {
  display: flex;
}
.qa_wrap dt {
  text-align: right;
}
.qa_wrap dd {
  width:100%;
  margin:0;
  padding-left:10px;
  text-align: left;
  font-size:14px;
}
.movie_wrap {
  margin:0 40px;
  width: 670px;
}
.movie {
  width: 100%;
  height: 0;
  position: relative;
  padding-bottom: 56.25%;
  margin:0 auto;
  text-align: center;
}
.movie iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.pankuzu {
  text-align: left;
}

@media screen and (max-width: 1043px)  {
  .movie_wrap {
    margin:0 auto;
    width: 90%;
    text-align: center;

  }
}
@media screen and (max-width: 750px) {
.pankuzu {
  text-align: left;
}
.page_header {
  height: 24vw;
}
.page_wrapper {
  margin:0;
  border-radius:0;
}
.page_wrapper ol {
  padding: 3vw 0 0 3vw;
}
.page_wrapper ol li {
  font-size:3vw;
  padding:0;
}
.contents_wrapper {
  text-align: center;
}
.item_ttl,.how_ttl,.qa_ttl {
  padding: 0 12vw 5vw 12vw;
}
.item_ttl img,.how_ttl img,.qa_ttl img  {
  width:100%;
  margin: 0 auto;
  text-align: center;
  padding:0;
}
.item_wrapper,.how_wrapper,.qa_wrapper {
  background:#fff;
  border-radius: 20px;
}

.item,.how,.qa {
  padding: 5vw;
}
.item  ul,.how ul,.qa ul {
  padding:10vw;
  text-align: left;
}
.item li,.how li,.qa li {
  font-size:3.73vw;
  font-weight:bold;
  color:#333;
}
.commentArea {
  padding:20px 0 30px 0;
}
.btnArea {
  padding-bottom:40px;
}
.btnArea img {
  width:90%;
}
.ttl_contents {
  padding: 40px 40px 0 40px;
}
.ttl_experiment_contents {
  padding: 40px 40px 0 40px;
}
.ttl_contents img {
  width:100%;
}
.ttl_experiment_contents img {
  width:100%;
}
.qa_wrapper {
  padding:6vw;
}
.qa_wrap {
  display: flex;
}
.qa_wrapper dl:nth-child(2n) {
  padding-bottom:6vw;
}
.qa_wrapper dl:last-child {
  padding-bottom:0vw;
}
.qa_wrap dt {
  text-align: right;
}
.qa_wrap dd {
  width:100%;
  margin:0;
  padding-left:10px;
  text-align: left;
  font-size:3.73vw;
  font-weight:bold;
}
.temp_nav h1 {
  position:absolute;
  top:2vw;
  left:2vw;
  width: 40%;
}
.movie_wrap {
  margin:5%;
}
.movie {
  width: 100%;
  height: 0;
  position: relative;
  padding-bottom: 56.25%;
  margin:0 auto;
  text-align: center;
}
.movie iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

List

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.list_wrap {
  text-align: center;
  margin:0 auto;
}
.list  {
  display:flex;
  flex-wrap: wrap;
  margin:10px 0 10px 13px;
  flex-basis:30%;
}
.list li {
  width:33%;
  padding: 0 7px 20px 0;
}
.list img {width: 100%;}
.serchBox {
  width:90%;
  margin:1em auto;
  position:relative;
}
select{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  padding:1em 1em;
  box-sizing:border-box;
  font-size:1em;
  border:#ccc 1px solid;
  border-radius:0;
  background:#fff;
}
.color.serchBox select{
  width:300px;
  background:#fff;
  color:#000;
  border:3px solid #000;
  border-radius:20px;
  background-image: url(../img/tri.svg);
  background-repeat: no-repeat;
  background-size: 40px 11px;
  background-position: right 10px center;
}
select:focus { outline: none;}
.pankuzu {
  text-align: left;
}

@media screen and (max-width: 750px) {
.experiment_ttl {
  width:100%;
  margin:0 auto;
  text-align: center;
  padding:20px 0;
}
.experiment_ttl img {
  width:80%;
}
.sponsor2_list  {
  text-align: center;
  margin:0 auto;
}
.sponsor2_list li {
  padding-bottom:36px;
}
.sponsor_kkt {
  width:80% !important;
  padding-bottom:60px;
}
.sponsor2_list li:nth-child(2n) {
  padding-bottom:20px;
  width:90%;
  text-align: center;
  margin: 0 auto;
  font-size: 4vw;
}
.sponsor2_list li p {}
.sponsor_ttl2 {
  width:40% !important;
}
.list  {
  display:flex;
  flex-wrap: wrap;
  margin:10px 0 10px 13px;
  flex-basis:50%;
}
.list li {
  width:49%;
  padding: 0 7px 20px 0;
}
.list img {width: 100%;}
.list_nav h1 {
  position:absolute;
  top:2vw;
  left:2vw;
  width: 40%;
}
.color.serchBox select {
  width: 80%;
}
.list_wrap {
  padding-bottom:1vw;
}
.serchBox {
  width:90%;
  margin:3vw 5vw 0 5vw;
  position:relative;
}
.list {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0 10px 13px;
  padding-bottom:8vw;
  flex-basis: 50%;
}
.pankuzu {
  text-align: left;
}
}

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  index-before

  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.teaser {
  background: url(../img/bg3.png);
}
.mv_wrap {
  max-width:800px;
  margin:0 auto;
}
.mv_wrap img {
    padding:60px 0 80px 0;
}
.before_mv_illust {
  margin: 0 auto;
  text-align: center;
  padding-top: 30px;
}
.before_mv {
  margin: 0 auto;
}
@media screen and (max-width: 750px) {
.before_top_header {
  position: absolute;
  width: 50%;
  top: 3.7vh;
}
.mv_wrap {
  max-width:800px;
  margin:0 auto;
}
.mv_wrap img {
  padding-top:80px;
  width:80%;
}
.before_mv_illust {
  margin: 0 auto;
  text-align: center;
  padding-top: 30px;
}
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

sicence

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.experiment_item {
  /* background: #fff; */
  background: transparent;
  border-radius: 12px;
  padding: 10px;
  margin: 0 auto 40px;
  margin-bottom: 40px;
  max-width: 800px;
}

.experiment_wrapper {
  width: 100%;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}

.experiment_wrapper2 {
  width: 100%;
  max-width: 650px;           /* 既存と合わせる（調整可） */
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  margin: 0 auto 20px auto;   /* 中央寄せ + 下マージン */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

.experiment_item:last-of-type .experiment_wrapper {
  margin-bottom: 30px;
}

.experiment_section {
  display: block;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.experiment_section2 {
  width: auto;
}


.experiment_block {
  margin-bottom: 5px;
  padding-left: 20px;
}

.experiment_block2 {
  margin-bottom: 5px;
  padding-left: 20px;
}

.experiment_title {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 8px 0; /* ← 左余白は親から受ける */
  padding-top: 10px;
  text-align: left;
}

.experiment_content {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 16px;
  padding-left: 20px;
}

.experiment_image_box {
  position: relative;
  width: 250px;
  margin-left: -20px;
}

.experiment_image_box2 {
  position: relative;
  width: 250px;
  margin-left: 190px;
  margin-right: 0;
}

@media (max-width: 768px) {
  .experiment_image_box2 {
    margin-left: 30px;   /* 左マージンを自動にして中央 or 右寄せ */
    margin-right: auto;  /* 両方autoで中央寄せになる */
    display: block;      /* 念のためブロック要素で */
	width: 100%;
	max-width: 200px; /* スマホ時に表示する画像の最大サイズ */
  }
	
  .experiment_image_box2 img {
    width: 100%;
    height: auto;
    display: block;
  }
}

.experiment_image_box img {
  width: 100%;
  border-radius: 5px;
  max-width: 200px;
}

.experiment_text {
  flex: 1;
  font-size: 8px;
  line-height: 1.8;
  padding-right: 20px;
  padding-top: 10px;
  text-align: left;
}

.experiment_text2 {
  color: red;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;         /* ← 中央寄せ */
  font-weight: bold;          /* ← 太字に */
}

.experiment_text3 {
  /*color: black;*/
  font-size: 16px;
  line-height: 1.6;
  text-align: center;        /* ← 中央寄せ */
  font-weight: bold;          /* ← 太字に */
}

.schedule_list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.schedule_list li {
  text-align: left;
  padding-left: 1em;
  line-height: 1.8;
}

.schedule_list li.date {
  font-weight: bold;
  margin-top: 1em;
}

.experiment_item .experiment_text p {
  font-size: 15px;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .experiment_content {
    flex-direction: column;
    align-items: center; /* 中央寄せ（任意） */
    text-align: center;  /* 任意で中央揃えにしたい場合 */
  }

  .experiment_text {
    padding-right: 0;
    padding-top: 10px;
  }
}

@media (max-width: 768px) {
	.contents_wrapper {
    /* padding-left: 30px;
    padding-right: 30px; */
	padding-left: 5vw;
    padding-right: 5vw;
    }
  }
	
    .experiment_wrapper2 {
     margin-top: 24px;     /* 白枠上に余白 */
	 max-width: 310px;
   }
	
　  .ttl_experiment_contents {
    width: 90%;           /* デフォルトより広げる */
    max-width: 100%;      /* 必要なら制限を緩める */
    margin: 0 auto;       /* 中央に配置 */
    box-sizing: border-box;
    padding: 12px 16px;    /* 青枠内の余白も適度に調整 */
  }
	
  .ttl_experiment_contents h3 {
    font-size: 17px;       /* スマホではやや小さめに */
	line-height: 1.5;
	max-width: 90%;          /* 横幅を広くして改行されにくく */
	display: inline-block;   /* 横に広がりやすく */
  }
}

@media (max-width: 768px) {
  .experiment_content {
    flex-direction: column;        /* スマホ時は縦並びに */
    align-items: flex-start;       /* 左寄せに変更 */
    padding-left: 10px;            /* 必要に応じて調整 */
    padding-right: 10px;
  }
	

  .experiment_image_box {
    margin: 0 auto 10px 0;         /* 左寄せ＋下に少し余白 */
    width: 100%;                   /* または max-width: 250px; */
  }

  .experiment_text {
    padding: 0;
    text-align: left;
    width: 100%;
  }
}

.blue_spacer {
  height: 40px; /* ← 青をどれだけ見せたいかで調整 */
  background: transparent; /* 背景色はbodyに任せるので透明 */
}
/* #contest {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
} */

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

h3{
    width:95%;
    font-size:24px;
  }
}
@media screen and (max-width: 768px) {
  .ttl_contents {
    padding-left: 5px;
    padding-right: 5px;
  }
}