/* CSS Document */

h1,h2{
display:none;
}
.banner_all .contents_box ul{
  display:flex;
  flex-wrap:wrap;
  align-items:start;
  justify-content:center;
}
.banner_all .contents_box ul > li{
  width:calc(100% / 5);
  padding:5px;
}
.banner_all .contents_box ul > li img{
  width:100%;
}
@media screen and (min-width:980px){
  .contents_area{
    display:flex;
    flex-wrap:wrap;
    align-items:start;
    justify-content:center;
  }
}

@media screen and (max-width:979px){
.banner_all .contents_box ul{
  justify-content:space-between;
}
.banner_all .contents_box ul > li{
  width:calc(100% / 3);
  padding:5px;
}
}
@media screen and (max-width:529px){
.banner_all .contents_box ul > li{
  width:calc(100% / 2);
  padding:5px;
}
}


/*
================================================================================================================
 背景
================================================================================================================
*/
.top_bg01 {
  background-image:url(../images/bg/top_bg01.jpg);
  background-position:center top;
  background-repeat: no-repeat;
  /*background-attachment: fixed;*/
  background-size:cover;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-color:rgba(12,13,45,0.00)!important;
}

} @media screen and (max-width:579px) {
.top_bg01 {
  width:100%!important;
  top:0%!important;
  left:0%!important;
  background-image:url(../images/bg/stars02.png);
  background-position:center top;
  background-repeat:repeat;
  /*background-attachment: fixed;*/
  background-size:100%;
  -webkit-background-size:100%;
  -moz-background-size:100%;
  -o-background-size:100%;
  background-color:rgba(12,13,45,0.00)!important;
}
}

/*
================================================================================================================
 コンテンツエリア（縦位置・サイズ指定）
================================================================================================================
*/

@media screen and (min-width:800px) {
#container_bottom {
  margin-top:0%;
  width:100%;
  margin:0 auto;
  padding:20px 0 20px 0;
}
}
@media screen and (max-width:979px) {
#container_bottom {
  margin-top:0%;
  width:100%;
  min-width:320px;
  padding:20px 0 20px 0;
  position:relative;
}
}

/*
================================================================================================================
 メイン画像バナーエリア（画像指定）
================================================================================================================
*/

.knst_icon{
background:url(../images/top/knst_icon.png) no-repeat;
width:20.4%;height:0px;padding-top:18%;
background-size:100% auto;
bottom:20%;left:10px;position:absolute;
}
.knst_icon:hover{
opacity:0.7;
}

.top_main_01 {
background:url(../images/bg/ef_chara.webp) no-repeat;
background-position:center top +60px;
background-size:100%;
}

@media screen and (min-width:800px) {
.knst_icon{
width:202px;padding-top:184px;
}
}

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

#main_banner_bg_chara {
  width:100%;
  height:100%;
  top:0px;
  bottom:0;
  max-width:1662px;
  margin:0 auto;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
#main_banner_bg_logo {
  width:60%;
  height: auto;
  margin:0 auto;
  max-width:820px;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
#main_banner_bg_chara .top_main_01, #main_banner_bg_chara .top_main_01::before,
#main_banner_bg_chara .deco_01, #main_banner_bg_chara .deco_01::before{
  display:block;
  width:100%;
  height:calc(100% + 70px);
  min-width:980px;
  padding: 0;
  margin:0px auto 70px auto;
  z-index:1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 1;
  position: fixed;
  content: "";
  z-index: -1;
}

#main_banner_bg_chara .top_main_01, #main_banner_bg_chara .top_main_01::before{
  max-width: 1662px;
}
#main_banner_bg_chara .deco_01, #main_banner_bg_chara .deco_01::before {
  max-width: 1400px;
}
#main_banner_bg_logo img {
  width:100%;
  height: auto;
  margin:40% auto 0% auto;
  position: relative;
}
}

@media screen and (max-width:979px) {
.top_main_01 {
background-size:120%;background-position:center top +60px;
}
#main_banner_bg_chara {
  width:100%;
  height: auto;
  margin:0 auto;
}
#main_banner_bg_logo {
  width:70%;
  height: auto;
  margin:0px auto;
}
#main_banner_bg_chara .top_main_01, #main_banner_bg_chara .top_main_01::before,
#main_banner_bg_chara .deco_01, #main_banner_bg_chara .deco_01::before {
  display:block;
  width:100%;
  height:calc(100% + 70px);
  min-width:320px;
  padding: 0;
  margin:0px auto 70px auto;
  top:0px;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 1;
  position: fixed;
  content: "";
  z-index: -1;
}
.deco_01 {
/*  background-image:url(../images/bg/bg00_deco.png);*/
  background-size:100%;
  background-position:top -10px center;
  background-repeat:no-repeat;
}

#main_banner_bg_logo img {
  width:100%;
  height: auto;
  margin:28% auto 0% auto;
  position: relative;
}

}

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

#main_banner_bg_chara {
  width:100%;
  height: auto;
  margin:0 auto;
}
#main_banner_bg_logo {
  width:80%;
  height: auto;
  margin:0 auto;
}

#main_banner_bg_chara .top_main_01, #main_banner_bg_chara .top_main_01::before,
#main_banner_bg_chara .deco_01, #main_banner_bg_chara .deco_01::before{
  display:block;
  width:100%;
  height:calc(100% + 70px);
  min-width:320px;
  padding: 0;
  margin:0px auto 70px auto;
  top:0px;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 1;
  position: fixed;
  content: "";
  z-index: -1;
}
.top_main_01 {
background-position: center top +60px;
}
.deco_01 {
/*  background-image:url(../images/bg/bg00_deco.png);*/
  background-size:100%;
  background-position:top -10px center;
  background-repeat:no-repeat;
}
#main_banner_bg_logo img {
  width:100%;
  height: auto;
  margin:28% auto 0% auto;
  position: relative;
}

}

/*
================================================================================================================
 コンテンツエリア（スクロールバー非表示）
================================================================================================================
*/
.box{width:100%; height:100%;}
.contents_01::-webkit-scrollbar, iframe::-webkit-scrollbar {
  display: none;
}
.contents_01, iframe{
  overflow-y:auto;
  -ms-overflow-style:none;
}
/*/////// FireFoxのみに対応 ///////*/
@-moz-document url-prefix() {
.box{
  overflow:hidden;
}
.contents_01{
  width:calc(100% + 17px);
  margin: 0;
  padding: 0;
  overflow-y:scroll;
  overflow-x:hidden;
}
iframe{
  width:calc(100% + 17px);
  margin: 0;
  padding: 0;
  overflow-y:scroll;
  overflow-x:hidden;
}
}
/*
================================================================================================================
 コンテンツエリア（枠内縦幅・背景色）
================================================================================================================
*/
.timeline01{background-color: rgba(255,255,255,1.0); height:200px;}
.timeline02{background-color: rgba(255,255,255,1.0); height:400px;overflow:auto;}

@media screen and (max-width:979px) {
.timeline01{background-color: rgba(255,255,255,1.0); height:300px;}
.timeline02{background-color: rgba(255,255,255,1.0); height:300px;overflow:auto;}
}

div.main_box img{
max-width:100%;
}

div#apply{
overflow:auto;
}
.btn > a{
display:block;width:100%;background:#fff;color:#2e3033;padding:6px 4px 4px;margin:0px auto;font-size:18px;font-weight:bold;
border-radius:5px;position:relative;transition:0.5s;
}
.btn > a::after{
content:'';width:10px;height:10px;margin-right:10px;border-top:2px solid #000;
border-right: 2px solid #000;transform: rotate(45deg);display: block;position: absolute;
top:calc((100% - 10px) / 2);right:0px;
}
.btn > a:hover{
background:#f6c6c8;
}