/* page - - - - - - - - - - - - - - - - - - - - - - - - - */

#page{
  background:
  url("../img/index/news/shark.png") no-repeat calc(50% + -700px) 160px / auto,
  url("../img/index/news/heaven.png") no-repeat calc(50% + 700px) 130px / auto,
  url("../img/index/news/float_island.png") no-repeat calc(50% + -600px) 860px / auto,
  url("../img/index/news/observatory.png") no-repeat calc(50% + 600px) 800px / auto,
  #41c2e5;
}

#page .content-head{
  color:#fff;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

#page .content-head h1{
  font-family: dot;
  font-size: 120px;
}

#page .content .wrapper{
  max-width:1000px;
  overflow: hidden;
}

#page .page_wh{
  padding:4rem 5rem;
  background: #fff;
  box-shadow:
  4px 0 #999,
  -4px 0 #999,
  0 4px #999,
  0 -4px #999;
  transform: scale(0.99);
}

#page .page_wh .page_wh_head{
  text-align: center;
  margin-bottom:2em;
  color:#ffc93b;
}

#page .page_wh .page_wh_head h1{
  font-family: 'dot';
  font-size: 80px;
  display: block;
  margin: 0;
  line-height: 0.8em;
  letter-spacing: 0.05em;
  filter: drop-shadow(3px 3px 0px #ffbc4d44);
}

#page .page_wh .page_wh_head span{
  display: block;
  font-family: 'M PLUS 1p', sans-serif;
  font-size:;
  margin-top:2px;
}

#page .page_wh .page_wh_body{

}
@media screen and (max-width: 959px) {
  /* 画面幅が 959px 以下の場合に適用されるスタイル */
}
@media screen and (max-width: 480px) {
  /* 480px以下に適用されるCSS（スマホ用） */
  #page .content-head h1{
    font-size: 80px;
  }
  #page .page_wh .page_wh_head h1{
    font-size: 50px;
  }
}
/* contact - - - - - - - - - - - - - - - - - - - - - - - - - */

.contact #page {
  background: 
    url("../img/index/news/shark.png") no-repeat calc(50% + -700px) 160px / auto,
    url("../img/index/news/heaven.png") no-repeat calc(50% + 700px) 130px / auto,
    url("../img/index/news/float_island.png") no-repeat calc(50% + -600px) 600px / auto,
    url("../img/index/news/observatory.png") no-repeat calc(50% + 600px) 520px / auto,
    #41c2e5;
}


#contact .head{
  text-align: center;
  font-family: 'M PLUS 1p', sans-serif;
}

#contact .head h2{
  letter-spacing: ;
  font-weight: bold;
}

#contact .head p{
  font-size:14px;
}

#contact select{
  cursor: pointer;
}

#contact input,#contact textarea{
  cursor: text!important;
}

#contact .form-check{
  justify-content: center;
}

#contact .form-group{
  margin-bottom:1em;
}

#contact .form-group label{
  font-size: 14px;
  letter-spacing: 0.1em;
  align-items: center;
/*  color: #545454;*/
  color: #fff;
  font-weight: bold;
  justify-content: flex-end;
}

#contact .form-check-input[type=checkbox]{
  width: 0px;
  height: 0px;
  padding: 10px;
  border: 0;
  cursor: pointer!important;
  border-radius: 2px;
  box-shadow: none;
}

.form-check-input[type=checkbox]:checked{
  border: 0;
  background-color:#ffc404;
}

#contact .form-control{
  border-radius:0!important;
  box-shadow:
    2px 0 #555,
    -2px 0 #555,
    0 2px #555,
    0 -2px #555;
  border:none;
  font-size:14px;
 }

#contact .form-control:focus{
  box-shadow:
    2px 0 #555,
    -2px 0 #555,
    0 2px #555,
    0 -2px #555;  
}

#contact input{
  -webkit-appearance: none;
  font-size: 16px;
  padding: 12px 15px;
  border-radius: 10px;
  border: 3px solid #fff;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s;
  color: #222222;
  cursor: pointer;
}

#contact small{
  font-size: 12px;
  margin-left: 2px;
  color:#ffc404;
/*  color: #fff;*/
/*  background: #ffc404;*/
  border-radius: 5px;
}

#contact label i.icon{
  font-size:12px;
  margin-right:2px;
}

#contact form{
  max-width: 600px;
  width:98%;
  margin:0 auto;
/*  font-weight: bold;*/
  font-family: 'M PLUS 1p', sans-serif;
  font-family: 'Poppins', sans-serif;
  text-align: left;
}
#contact form label span{
  color:#222;
  padding: 6px 0;
  display: block;
}
#contact form button{
  max-width:300px;
  width:98%;
  margin:0 auto;
  display: block;
  border: 0;
}

#contact .form-check{
  display: flex;
  align-items: center;
  justify-content: center;
}

#contact .form-check p{
  margin-bottom:0;
  margin-left:10px;
  letter-spacing: 0.1em;
  font-size: 14px;
}

#contact .form-check p a{
  color:#fff;
}

@media screen and (max-width: 959px) {
  /* 959px以下に適用されるCSS（タブレット用） */
  #page .page_wh {
    padding: 2.5rem 2rem;
  }
  .contact #page {
    background:
      url(../img/index/news/shark.png) no-repeat calc(50% + -410px) 110px / 320px, url(../img/index/news/heaven.png) no-repeat calc(50% + 370px) 130px / 280px,
      url(../img/index/news/float_island.png) no-repeat calc(50% + -350px) 720px / 210px,
      url(../img/index/news/observatory.png) no-repeat calc(50% + 310px) 700px / 190px,
      #41c2e5;
  }
}
@media screen and (max-width: 480px) {
  /* 480px以下に適用されるCSS（スマホ用） */
  #page .page_wh{
    padding: 2.5rem 1.5rem;    
  }

}
/* news - - - - - - - - - - - - - - - - - - - - - - - - - */
#news_list ul li:hover{
/*  animation: rumble .1s linear infinite;*/
}
#news_list ul li a{
  text-decoration:none;
  color:#222;
}

#news_list ul li a img{
  transform: translate(-3px, -3px);
  filter:drop-shadow(3px 3px 0px #ffc93b99);
  transition:0.2s;
}

#news_list ul li a img:hover{
  transform: translate(0px, 0px);  
  filter:drop-shadow(0px 0px 0px #64b59e82);
}

#news_list ul li a p{
  margin-bottom:0;
  font-size:14px;
}

#news_list ul li a span{
  font-size:12px;
  color:#999;
  text-align: right;
  display: block;
}

#news_list .wrap{

}

#news_list .pagination{
  justify-content: center;
}

#news_list .pagination li.page-item{

}

#news_list .pagination .page-item.active .page-link{
  background-color:#4b4e52;
  border: 0;
/*  box-shadow:
    4px 0 #4b4e52,
    -4px 0 #4b4e52,
    0 4px #4b4e52,
    0 -4px #4b4e52;*/
}

#news_list .pagination .page-item.disabled{
  display: none;
}

/* news_page - - - - - - - - - - - - - - - - - - - - - - - - - */


#news_page h2{
  font-weight: bold;
  color:#222;
  font-size:2em;
  margin-bottom:0;
}

#news_page .category{

}

#news_page span.date{
  font-size:16px;
  color:#999;
}

#news_page span.date i{
  font-size:14px;
  color:#999;
  padding-right:6px;
}

#news_page .news_page_area .card-body{
  padding: 4rem 5rem;
}

#news_page .pager{
  display: flex;
  justify-content: space-between;
}

#news_page .pager a{
  color:#222;
  text-decoration:none;
}

#news_page .pager a {
    background: #fff;
    padding: 10px 10px;
    border-radius: 45px;
    font-size: 14px;
    display: flex;
    align-items: center;
}

#news_page .text p{
  margin-bottom:0;
}

/* member_list_page - - - - - - - - - - - - - - - - - - - - - - - - - */
.member_list .content-page{
  min-height: calc(100vh - 18px);
}

.member_list h1{
  font-family: 'BIZ UDMincho', serif;
  font-family: 'Shippori Mincho', serif;
  font-weight: bold;
  font-size: 80px;
  text-align: center;
  color:#484848;
/*  background: url(../img/world/world_h1_bg.png) no-repeat center / auto 72%;*/
  margin-bottom:0.6em;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.4);
}

.member_list h1 span{
  font-size: 0.4em;
  display: block;
}

.member_list .member_list_bg{
  height:100vh;
  width: 100vw;
  background: url(../img/member/member_list_bg.png) no-repeat center / cover;
  position: fixed;
  z-index: -1;
  top:0;
  right: 0;
  bottom:0;
  left:0;
  margin:auto;
  filter: blur(2px);
}

#member_list #member_area li{
/*  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
*/}

#member_list #member_area li a{
/*  display: flex;
  flex-direction: column;
  align-items: center;
*/  text-decoration:none;
/*  color:#222;*/
}

#member_list #member_area li figure{
  background: #fff;
  overflow: hidden;
}

#member_list #member_area li figure img{
  height: 100%;
  transition:0.4s;
}

#member_list #member_area li:hover figure img{
  transform:scale(1.1);
}

#member_list #member_area li span{
  font-family: 'BIZ UDMincho', serif;
  font-family: 'Shippori Mincho', serif;
  font-size: 20px;
  font-weight: bold;
  color:#702c04;
  filter: drop-shadow(1px 1px #fff);
  text-align: center;
  display: block;
}

/* member_page - - - - - - - - - - - - - - - - - - - - - - - - - */
#member{
  position: relative;
}
#member .first_image{
  position: relative;
}

/* member_page yunagi - - - */
#member_bg{
  filter: blur(2px);
  z-index: -1;
  position: fixed;
/*  height: 100vh;*/
/*  width: 100vw;*/
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;  
}

.yunagi_info #member_bg{
  background:url(../img/member/elena/bg.png) no-repeat center / cover;
}
.yunagi_info .first_image .visual_big{
  filter: drop-shadow(-10px 7px 1px #ffbc4d);
  color: #ffbc4d;
}
.yunagi_info .first_image .text_box .name{
  filter:drop-shadow(4px 4px 0px #ffbc4d82);
}
.yunagi_info .first_image .text_box p{
  filter:drop-shadow(1px 1px 0px #ffbc4d82);  
}

/* member_page lily - - - */
.lily_info #member_bg{
  background:url("../img/member/lily/bg.png") no-repeat center / cover;
}
.lily_info .first_image .visual_big{
  filter: drop-shadow(-10px 7px 1px #6d4e9e);
  color: #6d4e9e;
}
.lily_info .first_image .text_box .name{
  filter:drop-shadow(4px 4px 0px #6d4e9e82);
}
.lily_info .first_image .text_box p{
  filter:drop-shadow(1px 1px 0px #6d4e9e82);  
}

/* member_page memory - - - */
.memory_info #member_bg{
  background:url("../img/member/memory/bg.png") no-repeat center / cover;
}
.memory_info .first_image .visual_big{
  filter: drop-shadow(-10px 7px 1px #64b59e);
  color: #64b59e;
}
.memory_info .first_image .text_box .name{
  filter:drop-shadow(4px 4px 0px #64b59e82);
}
.memory_info .first_image .text_box p{
  filter:drop-shadow(1px 1px 0px #64b59e82);
}


/* member_page bell - - - */
.bell_info #member_bg{
  background:url("../img/member/bell/bg.png") no-repeat center / cover;
}
.bell_info .first_image .visual_big{
  filter: drop-shadow(-10px 7px 1px #fb767d);
  color: #fb767d;
}
.bell_info .first_image .text_box .name{
  filter:drop-shadow(4px 4px 0px #fb767d82);
}
.bell_info .first_image .text_box p{
  filter:drop-shadow(1px 1px 0px #fb767d82);
}

/* member_page anko - - - */
.anko_info #member_bg{
  background:url("../img/member/anko/bg.png") no-repeat center / cover;
}
.anko_info .first_image .visual_big{
  filter: drop-shadow(-10px 7px 1px #5d98f1);
  color: #5d98f1;
}
.anko_info .first_image .text_box .name{
  filter:drop-shadow(4px 4px 0px #5d98f182);
}
.anko_info .first_image .text_box p{
  filter:drop-shadow(1px 1px 0px #5d98f182);
}

/* member_page lock - - - */
.lock_info #member_bg{
  background:url("../img/member/lock/bg.png") no-repeat center / cover;
}
.lock_info .first_image .visual_big{
  filter: drop-shadow(-10px 7px 1px #d52f38);
  color: #d52f38;
}
.lock_info .first_image .text_box .name{
  filter:drop-shadow(4px 4px 0px #d52f3882);
}
.lock_info .first_image .text_box p{
  filter:drop-shadow(1px 1px 0px #d52f3882);
}


#member .first_image {
  width: 100%;
  max-width: ;
  margin: 0 auto;
  position: relative;
}

#member .first_image .wrapper{
  position: relative;
}

#member .first_image .visual_big{
  height: 100vh;
  width: auto;
}

#member .first_image .text_box{
  font-family: 'BIZ UDMincho', serif;
  font-family: 'Shippori Mincho', serif;
  font-weight: bold;
  color: #fff;
/*  writing-mode: vertical-rl;*/
    text-align: right;
  font-size: 20px;
  margin-top: 40px;
}

#member .first_image .text_box .name{
  font-size: 4.5em;
  display: block;
}

#member .first_image .text_box .job{
  font-size: 1.3em;
  letter-spacing: 0.2em;
  display: block;
  margin-bottom: -32px;
}

#member .first_image .text_box p{
  font-size: 1.4em;
}

#member .table {
  margin-left:auto;
  max-width: 300px;
  width: 100%;
  display: flex;
  flex-direction: column;
  color:#fff;
  margin-bottom:12px;
  letter-spacing: 0.2em;
}

#member .box {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

#member .fixed {
  width: 100px; /* ここには決まった幅を指定してください */
  text-align: justify;
  text-align-last: justify;
  padding-right: 5px;
  letter-spacing: 0.2em;
  font-weight: bold;
}

#member .flexible {
    flex-grow: 1;
    border-top: 1px solid #fff;
}

#member .variable {
    /* Bの幅はコンテンツに合わせて変動します */
    padding-left:5px;
}

#member .link{
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  justify-content: flex-end;
}

#member .link a{
  color:#fff;
  border-radius:20px;
  background: ;
  border:1px solid #fff;
  text-decoration: none;
  padding: 6px 20px;
  font-size: 16px;
  display: block;
  margin-left:10px;
  transition:0.5s;
}

#member .link a:hover{
  background: rgba(255,255,255,0.8);
  color:#222;
}

#member h2{
  font-family: 'M PLUS 1p', sans-serif;
  color: #fff;
  font-size: 80px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.1em;
  font-family: 'BIZ UDMincho', serif;
  font-family: 'Shippori Mincho', serif;
  font-weight: bold;
}

#member .video .video_box{
  width: 100%;
  aspect-ratio: 16/9;
}

#member .video .video_box iframe{
  width: 100%;
  height: 100%;
}

#member .data{
  margin-bottom:80px;
}

#member .data .wrapper{
  max-width:800px;
}

#member .data ul{

}

#member .data table{
  width: 100%;
}

#member .data table tr{
  border-bottom:1px solid #fff;
  font-size:16px;
  color:#fff;
}


#member .row{
  justify-content: center;
}

#member .costume{
/*  background-image: url(https://patterns.nanya-kanya.info/img/141206172734.png);*/
/*  background-image: url(https://www.kirby.jp/images/0427/bg-pattern.png);*/
}

#member .costume .wrapper{
  max-width: 1000px;
}

#member .costume_box{
/*  width: 240px;*/
/*  margin: 0 30px;*/
  padding:0 30px;
}

#member .costume_bg{
  background:
    /* url(../img/partials/top_left_deco.png) no-repeat top left,*/
    url(../img/partials/bottom_right_deco.png) no-repeat bottom right / 26%,
    rgb(255 255 255 / 20%);
  border-radius: 3px;
}

#member .first_area{
  height:100vh;
  background:url("../img/index/first_test_02.png") no-repeat center;
  background-size: cover;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

#member .first_area:before{
  content: '';
  background: inherit;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
}

#member .first_area .row{
  margin-top:100px;
}

#member .first_area .text .box{
  background:rgba(255,255,255,0.8);
  padding:30px 26px;
}

#member #right_arrow{
  position: absolute;
  right:20px;
  top: 40vh;
  z-index: 100;
}

#member #right_arrow a{
  left: 3px;
  width: 30px;
  height: 46px;
/*  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
*/  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);

  display: block;
  background: url(../img/partials/vividnia_arrow.png) no-repeat center / cover;
}

#member #left_arrow{
  position: absolute;
  left:20px;
  top: 40vh;
  z-index: 100;
}

#member #left_arrow a{
  left: 3px;
  width: 30px;
  height: 46px;
/*  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
*/  display: block;
  background: url(../img/partials/vividnia_arrow.png) no-repeat center / cover;
}

@media screen and (max-width: 959px) {
  /* 959px以下に適用されるCSS（タブレット用） */
  #member .first_image .wrapper{
    max-width: 670px;
  }
  #member .first_image .visual_big{
    height: auto;
    width: 100%;
  }
  #member .first_image .text_box .name {
    font-size: 2.6em;
  }
  #member .first_image .text_box .job{
    margin-bottom:-18px;
  }
  #member .first_image .text_box p{
    font-size:0.8em;
  }
  #member h2{
    font-size: 44px;
  }
  #member #right_arrow{
    top: 50%;
    right: 10px;
  }
  #member #left_arrow{
    top: 50%;
    left: 10px;
  }
  #member .costume .wrapper{
    max-width:630px;
  }
}
@media screen and (max-width: 480px) {
  /* 480px以下に適用されるCSS（スマホ用） */
  #member #left_arrow{
    top: 280px;
  }
  #member #right_arrow{
    top: 280px;
  }
  #member .first_image .text_box .name {
    font-size: 2.5em;
    text-align: center;
/*    background: rgba(255,255,255,0.4);*/
  }
  #member .first_image .text_box .job {
      font-size: 1em;
      margin-bottom: -12px;
      text-align: center;
  }
  #member .first_image .text_box{
    text-align: left;
  }
  #member .first_image .text_box p{
    font-size: 1em;
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 0.1em;
  }

  #member .link{
    justify-content: center;
  }
  #member .table{
    margin-right: auto;
  }
  #member .costume_box{
    padding: 0 15px;
  }
  #member h2{
    margin-top: 60px;
    font-size: 44px;
  }

}

/* world - - - - - - - - - - - - - - - - - - - - - - - - - */
.world{
  position: relative;
}
.world #topbar{
  position: fixed!important;
}

.world h1{
  font-family: 'BIZ UDMincho', serif;
  font-family: 'Shippori Mincho', serif;
  font-weight: bold;
  font-size: 80px;
  text-align: center;
  color:#484848;
  background: url(../img/world/world_h1_bg.png) no-repeat center / auto 72%;
  margin-top: 1em;
  margin-bottom:30px;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.4);
}

.world h1 span{
  font-size: 0.4em;
  display: block;
}

.world .main_story{
  overflow: hidden;
  background:
    url("../img/world/paper1.png") repeat-x top / 100%,
    url("../img/world/paper2.png") repeat-y bottom / 101%;
}

.world .main_story .wrapper{
  margin-bottom:10vh;
}

.world .main_story .main_story_image{
  position: relative;
}

.world .main_story .main_story_image .right_text{
  background:
    url("../img/world/accent/top_right.png") no-repeat top right / 25%,
    url("../img/world/accent/top_left.png") no-repeat top left / 25%,
    url("../img/world/accent/bottom_right.png") no-repeat bottom right / 25%,
    url("../img/world/accent/bottom_left.png") no-repeat bottom left / 25%,
    #fff;

  letter-spacing: 0.1em;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.4);
  font-family: 'BIZ UDMincho', serif;
  font-family: 'Shippori Mincho', serif;
  font-weight: 900;
  color:#484848;
  line-height: 2em;
  font-size: 22px;
  position: absolute;
  top: -30px;
  right:60px;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  display: block;
  width: 60px;
  padding: 12px 8px;
  filter: drop-shadow(4px 4px 0px #66666666);
}

.world .main_story .main_story_image .right_text span{
}

.world .main_story .main_story_image .left_text{
background:
    url("../img/world/accent/top_right.png") no-repeat top right / 25%,
    url("../img/world/accent/top_left.png") no-repeat top left / 25%,
    url("../img/world/accent/bottom_right.png") no-repeat bottom right / 25%,
    url("../img/world/accent/bottom_left.png") no-repeat bottom left / 25%,
    #fff;
  letter-spacing: 0.1em;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.4);
  font-family: 'BIZ UDMincho', serif;
  font-family: 'Shippori Mincho', serif;
  font-weight: 900;
  color:#484848;
  line-height: 2em;
  font-size: 22px;
  position: absolute;
  bottom: 0;
  left:60px;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  display: block;
  width: 60px;
  padding: 12px 8px;
  filter: drop-shadow(4px 4px 0px #66666666);
}


.world .main_story p{
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.4);
  text-align: center;
  font-family: 'BIZ UDMincho', serif;
  font-family: 'Shippori Mincho', serif;
  font-weight: 900;
  color:#484848;
  line-height: 2em;
  font-size: 22px;
}

.world .main_story p span{
  font-size: 1.3em;
}

.world .dragon_section .story_h{
  width: 20%;
  max-width: 150px;
}

.world .dragon_section{
  width: 100%;
  text-align: center;
  font-family: 'BIZ UDMincho', serif;
  font-family: 'Shippori Mincho', serif;
  color:#fff;
  position: relative;
}

.world .dragon_section{
  overflow: hidden;
  background: url(../img/world/border_pattern.png) repeat-x top / 30px;
}


.world #background{
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  transition: filter 0.3s ease-in-out;
  z-index: -1;
  filter: blur(1px);
}

.world #background::before,
.world #background::after {
  content: "";
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  transition: filter 0.3s ease-in-out;
  z-index: -1;
  filter: blur(1px);
}

.world #background::before {
  background: linear-gradient(rgba(115,78,48,0.5),rgba(115,78,48,0.8)),
              url(../img/world/world_section_bg.png) no-repeat center / cover;
  opacity: 1;
}

.world #background::after {
  background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.8)),
              url(../img/world/world_section_bg.png) no-repeat center / cover;
  opacity: 0;
}

.world #background.blur {
  filter: blur(4px);
}

.world #targetElement{
  margin-top:15vh;
}

.world .dragon_section .ruled_line{
  max-width: 300px;
  width: 80%;
  margin:12vh auto;
}

.world .dragon_section h2{
  font-size:3.8em;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.4);
  letter-spacing: 0.2em;
}

.world .dragon_section h2 small{
  font-size: 0.3em;
}

.world .dragon_section h3{
  font-size:3.8em;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.4);
  letter-spacing: 0.2em;
}

.world .wrapper .dragon_section img{
  border:5px solid #fff;
  filter: drop-shadow(5px 5px #fff);
  margin-bottom:100vh;
}

.world .dragon_section p{
  text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.4);
  font-size: 22px;
  font-weight: bold;
  width: 100%;
  line-height: 2em;
  letter-spacing: 0.2em;
  margin-left: auto;
  margin-right: auto;
}

.world .dragon_section p span{
  font-size: 1.4em;
}

.world .cloud{
  background: #fff;
  color: #222;
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  padding: 30vh 0;
  font-family: 'BIZ UDMincho', serif;
  font-family: 'Shippori Mincho', serif;
}

.world .cloud_top{
  height: 50vh;
  width: 100%;
  background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1));
}

.world .cloud_bottom{
  height: 50vh;
  width: 100%;
  background: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0));
}

.world #freedom{
  background:#41c2e5;
  padding:0;
  background-image: url(/img/world/world_space_bg.png);
  background-size:cover;
  background-position: bottom;
  position: relative;
}

.world #freedom h2{
  font-family: 'DotGothic16', sans-serif;
  position: absolute;
  top:300px;
  left: 0;
  right: 0;
  text-align: center;
/*  font-weight: bold;*/
  font-size: 3.8em;
  color: #fff;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  filter:drop-shadow(0px 4px 0px #ffbc4d82);
/*  filter:drop-shadow(0px 4px 0px #6c480b82);*/
}

.world #freedom h2:before{
  content:"＼";
  position: absolute;
  left: 0;
  bottom:0;
}

.world #freedom h2:after{
  content:"／";
  position: absolute;
  right: 0;
  bottom:0;
}

.world #freedom #game-container {
  position: relative;
  height: 60vh; /* 枠が正方形になるように高さも同じ値に設定 */
  -webkit-border-image: url('frame.png') 30 round;  /* ベンダープレフィックスを含む */
  -o-border-image: url('frame.png') 30 round;       /* ベンダープレフィックスを含む */
  border-image: url('frame.png') 30 round; /* 枠の画像を設定 */
}

.world #freedom #canvas {
  position: absolute;
  bottom: 0;
  left: 0;
  right:0;
  marghin:auto;
  width: 100%;
  pointer-events: none;

}

@media screen and (max-width: 959px) {
  /* 959px以下に適用されるCSS（タブレット用） */
  .world h1{
    font-size: 60px;
  }
  .world .main_story p{
    font-size: 24px;
    width: 90%;
    margin:0 auto;
    max-width: 600px;
  }
  .world .dragon_section p{
    letter-spacing: 0.1em;
  }
  .world .dragon_section h2{
    font-size: 2.8em;
  }
  .world .dragon_section h3{
    font-size: 2.8em;
  }
}
@media screen and (max-width: 480px) {
  .world .main_story .wrapper{
    width: 100%;
    max-width: auto;
    margin-bottom: 5vh;
  }
  .world .main_story .main_story_image .left_text{
    font-size: 12px;
    width: 30px;
    padding: 6px 4px;
    left:30px;
    bottom:-30px;
    filter: drop-shadow(2px 2px 0px #66666666);
  }
  .world .main_story .main_story_image .right_text{
    font-size: 12px;
    width: 30px;
    top: -30px;
    right: 30px;
    padding: 6px 4px;
    filter: drop-shadow(2px 2px 0px #66666666);
  }

  /* 480px以下に適用されるCSS（スマホ用） */
  .world h1{
    font-size:2.5em;
  }
  .world .dragon_section h2{
    font-size:2.5em;
  }
  .world .dragon_section h3{
    font-size:1.6em;
  }
  .world .dragon_section p{
    line-height: 1.4em;
    font-size:15px;
  }

  .world .main_story p{
    font-size: 14px;
    max-width: 400px;
    line-height: 1.6em;
    width: 100%;
  }
  .world #freedom h2{
    top:180px;
    font-size:1.6em;
    width: 90%;
    margin:auto;
    filter:drop-shadow(0px 2px 0px #ffbc4d82);
  }
}

.about .content_wrap span{
  font-family: 'dot', sans-serif;
  font-weight: 800;
  font-size: 70px;
  /* position: absolute; */
  color: #d65858;
}

.about .about_section{

}

.about .about_section p{
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 800;
  font-size: 1.6em;
  color: #383838;
}