@charset "UTF-8";
/* ******************************
* 基本設定
****************************** */
html{
  scroll-behavior: smooth;
}
html::-webkit-scrollbar {
      display: none;
      -webkit-appearance: none;
}
body{
  color:#666666;
  font-size: 0.9rem;
  font-family: 'IBM Plex Sans',"Noto Sans JP", sans-serif;
  background-color: ;
}

p,ul,ol,dl,div,figure{
  margin-bottom: 1rem;
}
ul{
  list-style: none;
}
img,iframe{
  max-width: 100%;
}
figure,iframe{
  text-align: center;
}
a {
  color:#86c459;
  text-decoration: none;
}
a:visited {
  color: ;
}

a:hover{
  color:;
}

/* レイアウト */
.main_grid{
  display: grid;
  grid-template-columns: 15vw 62.5vw 22.5vw;
  grid-template-rows: repeat(5,auto);
  /*grid-column-gap: 2vw;*/
  grid-row-gap: 2.5rem;
  margin-bottom:0;}
header{
  grid-column:1;
  grid-row:1/6;
  padding-left: 2vw;
  padding-right: 3vw;
  min-height:100vh;
}
footer{
  grid-column:1/4;
  grid-row:5;
}
aside{
  grid-column:2;
  grid-row:4;
  padding-left: 2vw;
  padding-right: 2vw;
  max-width: 100%;
  overflow: hidden;
  text-align:center;
}
  /* トップページ */
.sec_main_vis{
  grid-column:2;
  grid-row:1;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-top:2rem;
}
.sec_introduction{
  grid-column:2;
  grid-row:2;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-bottom: 1rem;
  display: grid;
}
.sec_webcast{
  grid-column:2;
  grid-row:3;
  padding-left: 2vw;
  padding-right: 2vw;
}
.sec_infolist{
  grid-column:3;
  grid-row:1/5;
  height:100vh;
  padding:2vh 3vw 2vh 2vw;
  position: sticky;
  top:0;
  display: grid;
  grid-template-rows:1fr 1fr;
  grid-row-gap:1rem;
  place-items:center;
}
.sec_mailform,.sec_archive,.sec_information,.secd_event{
  grid-column:2;
  grid-row:1/4;
  margin-top: 1rem;
}

.sec_mount{
  background-color: rgba(255,255,255,.8);
  padding-bottom: 1rem;
}

.grid_lo{display: grid;}
.col2{grid-template-columns: 1fr 1fr;}
.col3{grid-template-columns: 1fr 1fr 1fr;}
.grid_dl{grid-template-columns: auto 1fr; grid-column-gap: 1rem;}
.grid_dl dt{grid-column:1/2;}
.grid_dl dd{grid-column:2/3;}
.rep_grid{grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));grid-gap:1.5rem;}

/* コンテンツ */
.fas{font-size: x-large;}
.article_title{
  font-size: 1.5rem;
  font-weight: bold;
  padding:0.25rem;
  /*margin-bottom: .5rem;*/

}
.sub_title{
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 1rem;
}
._blue{border-bottom: solid 1px #59c2d8;}
._pink{border-bottom: solid 1px #ee92bb;}

.overflowed{overflow:scroll;}

.link_btn{
text-align:center;
}
.link_btn a{
  display: block;
  background-color:#b07bb3 ;
  color:#ffffff;
  border-radius: 3px;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  transition: color 0.4s ease 0.1s;
}
.link_btn a:hover{
  color:#b07bb3;
  background:none;
  border:solid 1px #b07bb3;
}
.attention{
  font-size: 90%;
}
.attention::before{
  content:'※';
  display:inline-block;
}
.mail_form_inline{
  display: flex;
  justify-content:center;
}

@media screen and (max-width: 480px){
  .main_grid{
    grid-template-columns: 100vw;
    grid-template-rows: repeat(7,auto);
    grid-row-gap:0;
  }
  .col2,.col3{grid-template-columns: 1fr;}
  header{
    grid-column:1;
    grid-row:1;
    height:60px;
    width: 100vw;
    background-color: #59c2d8;
    min-height:auto;
    position: fixed;
    top:0;
    z-index: 100;
  }
  .sec_main_vis{
    grid-column:1;
    grid-row:2;
    padding:0;
    margin-top: 60px;
  }
  .sec_introduction{
    grid-column:1;
    grid-row:3;
    padding-left: 4vw;
    padding-right: 4vw;
    margin-top: 2.5rem;
  }
  .sec_webcast{
    grid-column:1;
    grid-row:5;
    padding-left: 4vw;
    padding-right: 4vw;
    margin-top: 5rem;
  }
  aside{
    grid-column:1;
    grid-row:6;
    margin: 2.5rem 1rem 2.5rem 1rem;
    padding: 0;
  }
  .sec_infolist{
    grid-column:1;
    grid-row:4;
    min-height:initial;
    padding-left: 4vw;
    padding-right: 4vw;
    margin-top: 5rem;
    margin-bottom: 5rem;
    position:initial;
  }
  .sec_mailform,.sec_archive,.sec_information{
    grid-column:1;
    grid-row:3;
    padding-left: 4vw;
    padding-right: 4vw;
    height: auto;
    margin-top: 60px;
  }
  footer{
    grid-column:1;
    grid-row:7;
  }
}

/* ******************************
* ヘッダー
****************************** */
.head_mouont{
  height:100vh;
  position: sticky;
  top:0;
  padding-top:2rem;
  padding-bottom:1rem;
}
#nav_input,.nav_triger{
  display:none;
}
.menu_list{
  font-size: 1rem;
}
.menu_list li{
  position: relative;
  margin: 0 ;
  padding: 0 5px;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  background: #86c459;
  border-radius: 50%;
  box-sizing: border-box;
}
.menu_list li:nth-child(odd){
  margin-left: auto;
  margin-right: 0;
}
.menu_list li:nth-child(odd):before{
  content: "";
  position: absolute;
  bottom: -10px;
  right: -10px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #86c459;
  z-index: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.menu_list li:nth-child(even){
  margin-left: 0;
  margin-right: auto;
}
.menu_list li:nth-child(even):before{
  content: "";
  position: absolute;
  bottom: -10px;
  left: -10px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #86c459;
  z-index: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu_list a{
  color: #fff;
  text-align: center;
  display: block;
  height: fit-content;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.menu_list li:hover{
  transform:scale(1.2,1.2);
  transition:0.25s all;
}
.menu_list_top{display: none;}
.mount_triger{
  width: 100vw;
  height: 100vh;
  display: none;
  position: fixed;
  top:60px;left:0;
}
.menu_mount{
  display: grid;
  align-content: space-evenly;
  height: 100%;
}
.menu_mount ul{
  background-color: rgba(255,255,255,.7);
}

@media screen and (max-width: 480px){
  .program_logo{
    max-width: 50px;
    margin-top: auto;
    margin-bottom: auto;
    position: fixed;
    top:5px;
    left: calc(50% - 2rem);
  }
  .head_mouont{
    padding: 0;
    position: relative;
    height: auto;
  }
  .nav_triger{
    display: block;
    position: fixed;
    top:18px;
    left:0.5rem;
    color:#fff;
  }
  .menu_mount{
    margin: 0;
    padding: 0rem 3vw 0 3vw;
    width: 0;
    height:100vh;
    opacity: 0;
    overflow: hidden;
    position: fixed;
    top:60px;
    left:0;
    transition: 0.5s;
    transform: translateX(-100%);
  }
  .menu_list_top{
    display: block;
  }
  #nav_input:checked ~ .menu_mount{background-color: #fff;width:66vw;opacity: 1;}
  #nav_input:checked ~ .menu_mount{transform: translateX(0);}
  #nav_input:checked ~ .mount_triger{display: block;background-color: rgba(0,0,0,.2)}

}
/* ******************************
* メイン
****************************** */
.mainvisu_grid{
  grid-template-columns: 1fr auto;
}
.lead_text{
  margin-bottom:3rem;
  font-size:1rem;
}
.first_letter{
  font-size: 3rem;
  font-weight: bold;
  color:#59c2d8;
  margin-right: 0.1rem;
}
.subtext_s{
  font-size: 66%;
  margin-left: 0.25rem;
  opacity: 0.5;
}
.program_detail{
  font-size:1rem;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}
.program_detail dt{
  color:#ee92bb;
}
.program_corner_list dt{
  color:#ee92bb;
  font-weight: bold;
}
.program_corner_list dd{
  margin-bottom: 1rem;
}
.prof_grid{
  grid-template-columns:1fr 1fr;
}
.profile_name{
  font-size: 1rem;
  text-align: center;
  color:#ee92bb;
}
.profile{
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}
.profile dt{
  color:#ee92bb;
}

.hol_scroll{
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  margin-left: 5vw;
  margin-right: 5vw;
}
.hol_scroll li{
  display: inline-block;
  margin-right: 1rem;
}
.hol_scroll p{ margin-bottom: 0.25rem;}
.platform_name{
  color:#59c2d8;
  font-weight: bold;
  /*text-align: center;*/
  margin-left: 2rem;
  margin-bottom: 0.25rem;
}
.news_title{
  width: 4rem;
  height:4rem;
  margin: 0 auto 0.5rem auto;
  background-color:#ee92bb;
  border-radius: 50%;
  text-align: center;
  position:relative;
  -webkit-transform:rotate(- 15deg);
  transform: rotate(-15deg);
}
.circle_letter{
  color:#fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 1rem;
  font-weight: bolder;
}
.news_list{/*padding-bottom: 1rem;*/}
.update_topics{
  height: 37.5vh;
  overflow-y: scroll;
}
.update_topics dt{
    color:#59c2d8;
    font-weight: bold;
}
.update_topics dd{
    margin-bottom: 0.5rem;
}
.twitter_box{
  margin: 0;
  width: 100%;
  height: 37.5vh;
  /*max-height: 350px;*/
  overflow: scroll;
}
/* タブ切り替え */
.tab_wrap{width: 100%;}
.tab_wrap input[type="radio"]{
  display:none;
}
.tab_area{
 text-align: center;
 display: grid;
 justify-content: center;
}

.tab_area label:hover{
  cursor: pointer;
  transition: scale(1.25,1.25)
}
.panel_area{margin-top: 1rem;}
.tab_panel{display:none;}

#tab1:checked ~ .tab_area .tab1_label{background:#59c2d8; color:#fff; padding: 0 .5rem 0 .5rem; border-radius: 3px;}
#tab1:checked ~ .panel_area #panel1{display:block; animation:tabAnim ease-in 0.5s ; -ms-animation:tabAnim ease-in 0.5s ;}
#tab2:checked ~ .tab_area .tab2_label{background:#59c2d8; color:#fff; padding: .0 .5rem 0 .5rem; border-radius: 3px;}
#tab2:checked ~ .panel_area #panel2{display:block; animation:tabAnim ease-in 0.5s ; -ms-animation:tabAnim ease-in 0.5s ;}
#tab3:checked ~ .tab_area .tab3_label{background:#59c2d8; color:#fff; padding: 0 .5rem 0 .5rem; border-radius: 3px;}
#tab3:checked ~ .panel_area #panel3{display:block; animation:tabAnim ease-in 0.5s ; -ms-animation:tabAnim ease-in 0.5s ;}

.fadeout {
  animation : fadeOut 1.5s;
  animation-fill-mode: both;
}
@keyframes tabAnim{
  0%{opacity:0;}
  100%{opacity:1;}
}
@keyframes fadeOut {
  100% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
/* タブ切り替え */

/********************
* インフォメーション
********************/
.sec_information p{font-size: 1rem;}
.sec_mount > article{margin-bottom: 5rem;}
.arc_title{border-bottom: solid 1px #59c2d8;margin-bottom: 1rem;}
.arc_date{
  display: block;
  background: #59c2d8;
  color: #fff;
  width: fit-content;
  padding: 0 0.5rem 0 0.5rem;
  border-radius: 3px;
}
.arc_hline{
  display: block;

}

/********************
* イベント
********************/


.sec_event section{margin-bottom: 4rem;}
.goods_mount p{margin-bottom: .25rem;}
.goods_mount div,.goods_mount figure{margin-bottom: 0;}
.goods_name{color:#ee92bb;font-weight:bold;font-size:1.1rem;}
.goods_detail{border-bottom: dashed 1px #59c2d8;padding-bottom: .5rem;}

.tab_input,.item_pic{display: none;}
.s_btn{
  display: inline-block;
  border: solid 0.5px #59c2d8;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  margin-top: 0.5rem;
}
#tab1:checked ~ .panel_area_a #pic01{display:block; animation:tabAnim ease-in 0.5s ; -ms-animation:tabAnim ease-in 0.5s ;}
#tab2:checked ~ .panel_area_a #pic02{display:block; animation:tabAnim ease-in 0.5s ; -ms-animation:tabAnim ease-in 0.5s ;}
#tab3:checked ~ .panel_area_a #pic03{display:block; animation:tabAnim ease-in 0.5s ; -ms-animation:tabAnim ease-in 0.5s ;}
#tab4:checked ~ .panel_area_b #pic04{display:block; animation:tabAnim ease-in 0.5s ; -ms-animation:tabAnim ease-in 0.5s ;}
#tab5:checked ~ .panel_area_b #pic05{display:block; animation:tabAnim ease-in 0.5s ; -ms-animation:tabAnim ease-in 0.5s ;}
#tab6:checked ~ .panel_area_b #pic06{display:block; animation:tabAnim ease-in 0.5s ; -ms-animation:tabAnim ease-in 0.5s ;}
#tab7:checked ~ .panel_area_c #pic07{display:block; animation:tabAnim ease-in 0.5s ; -ms-animation:tabAnim ease-in 0.5s ;}
#tab8:checked ~ .panel_area_c #pic08{display:block; animation:tabAnim ease-in 0.5s ; -ms-animation:tabAnim ease-in 0.5s ;}
#tab9:checked ~ .panel_area_c #pic09{display:block; animation:tabAnim ease-in 0.5s ; -ms-animation:tabAnim ease-in 0.5s ;}
#tab10:checked ~ .panel_area_d #pic10{display:block; animation:tabAnim ease-in 0.5s ; -ms-animation:tabAnim ease-in 0.5s ;}

#tab1:checked ~ .item_change_a .tab1_switch{background-color:#59c2d8;}
#tab2:checked ~ .item_change_a .tab2_switch{background-color:#59c2d8;}
#tab3:checked ~ .item_change_a .tab3_switch{background-color:#59c2d8;}
#tab4:checked ~ .item_change_b .tab4_switch{background-color:#59c2d8;}
#tab5:checked ~ .item_change_b .tab5_switch{background-color:#59c2d8;}
#tab6:checked ~ .item_change_b .tab6_switch{background-color:#59c2d8;}
#tab7:checked ~ .item_change_c .tab7_switch{background-color:#59c2d8;}
#tab8:checked ~ .item_change_c .tab8_switch{background-color:#59c2d8;}
#tab9:checked ~ .item_change_c .tab9_switch{background-color:#59c2d8;}
#tab10:checked ~ .item_change_d .tab10_switch{background-color:#59c2d8;}

@keyframes tabAnim{
  0%{opacity:0;}
  100%{opacity:1;}
}

@keyframes fadeOut {
  100% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}

.existing_prd_list{font-size: .75rem;}
.existing_prd_list li{margin-bottom: 0.5rem;}
.num_box{
  display: inline-block;
  color: #fff;
  background-color: #59c2d8;
  margin-right: .5rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

ul.list_lv1{padding-left: 2.5rem;padding-right:1rem;margin-bottom: 1rem;}
ul.list_lv1 li{text-indent: -1rem;margin-bottom: 0.5rem;}
ul.list_lv1 li:before{content:'○';display: inline-block;margin-right: 1rem;}
ul.list_lv2{padding-left:1.5rem;}
ul.list_lv2 li{margin-bottom: 0.5rem;text-indent: -.75rem;}
ul.list_lv2 li:before{content:'・';display: inline-block;margin-right: 0.5rem;}

/********************
* メールフォーム
********************/
.form_area{
  display:grid;
  grid-template-columns: auto 1fr ;
  grid-column-gap: 1rem;
  grid-row-gap:0.5rem;
}

.form_area dt{
  grid-column:1;
  color:#fff;
  background-color: #59c2d8;
  padding: 0.25rem;
  border-radius: 5px;
}

.form_area dd{
  grid-column:2;
  padding: 0.25rem;
  background-color: #ffffff;
  border:solid 1px #59c2d8;
  border-radius: 5px;
}
.form_area select{
  width: 100%;
  border: none;
}
.form_area input.add_text{
  height: 1.2rem;
  width: 66%;
  border: none;
}
.form_area textarea{
  font-size:16px;
  width: 99%;
  height: 20rem;
  border: none;
  resize: vertical;
}
.submit_box{
  text-align: center;
  margin-top: 1rem;
}
.submit_btn{
  color:#fff;
  font-weight: bold;
  padding: 0.25rem;
  background-color:#59c2d8;
  border-radius: 3px;
}
._width_5rem{
  width: 5rem;
}
._width_auto{
  width: fit-content;
}
.submit_btn:hover{
  transform:scale(.9,.9);
  transition:0.25s all;
}
.red{
  color:#ee92bb;
  margin-left: 0.5rem;
  font-weight: bold;
}
@media screen and (max-width: 480px){
  .mount_information{
    position: static;
    top:initial;
    transform: initial;
  }
  .prof_grid,.tab_area{
    grid-template-columns: 1fr;
  }
  .twitter_box{
    padding-left: 3vw;
    padding-right: 3vw;
  }
  .form_area{
    grid-template-columns:1fr ;
  }
  .form_area dd{
    grid-column:1;
  }
  .form_area input.add_text{
    width: 75%;
  }
  .form_area textarea{
    height: 10rem;
  }
}
.gotolink{
  margin:auto auto 1rem auto;text-align:center;
  border:solid 1px #86c459;
  border-radius: 3px;
  padding: 0.25rem;
}
.gotolink:hover{
transform: scale(1.1);
}

/* ******************************
* フッター
****************************** */
.copyright{text-align: center;}

/* ******************************
* バックグラウンド
****************************** */
.bg{
  width:100vw;
  height:100vh;
  background-size: 20px 20px;
  background-image:radial-gradient(#888 5%, transparent 10%);
  opacity: 0.4;
  position: fixed;
  top:0;left:0;
  z-index: -10;
  background-repeat: repeat;
}
.bg2{
  width:100vw;
  height:100vh;
  margin-bottom: 0;
  position: fixed;
  top:0;left:0;
  z-index: -10;
  background: linear-gradient(90deg, transparent 0%,rgba(255,255,255,1)10%,rgba(255,255,255,1)90%,transparent 100%);
  background-color: #fff;
  background-size: 80px 80px;
  background-position: 0 0, 40px 40px;
  background-image:
    radial-gradient(#59c2d8 3%, transparent 15%),
    radial-gradient(#ee92bb 3%, transparent 15%);
    opacity: 0.25;
  background-repeat: repeat;
}