html {
  font-size:1.3vw;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
}

.clr_blue{
  color:#036EB5;
}
.clr_org{
  color:#E55513;
}

.dnone {
  display : none;
}

.addcontents {
  background-image:url('./../img/addcontents.png');
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity : 0;
  transform-style: preserve-3d;
  perspective: 10px;
  transform: scale3d(-1, 1, 1);
  transition : all 1s;
}

.addcontents.active{
  opacity : 1;
  transform : translate(0, 0);
}

.subtitle {
  font-size:2em;
  font-weight: bold;
}

.subtitle2 {
  font-size:1.5em;
  font-weight: bold;
}

.subcontext {
  font-size:0.8em;
  line-height:2.2em;
}

.subcontext2 {
  font-size:0.8em;
  line-height:2em;
}

#imgtotop{
  width:6vw;
}

#imgdwld {
  width:10vw;
}

#imgdwld_sm {
  width:100%;
}

.page_top_btn {
  position: fixed;
  bottom: 20px;
  right: 5px;
  z-index: 999;
}

.page_top_btn_hidden{
  display:none;
}

.download_btn {
  position: fixed;
  top:20px;
  right: 0px;
  z-index: 999;
}

.download_btn_sm {
  position: fixed;
  width:80%;
  left: 50%;
  top: 8%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 999;
}

.download_btn_hidden{
  display: none;
}

.sm_view {
  display:none;
}

.pc_view {
  display:block;
}

.relative {
  position: relative;
}

.s_explain {
  line-height:2em;
}

#accessmap {
  width:80%;
}

#access {
  width:80%;
}

.logo {
  width:15%;
}

#chara_cycle{
  position: absolute;
  top: 60%;
  right: -200%;
  width:150%;
}

.waveft {
  position: absolute;
  top: -10%;
}

#chara_ship {
  position: absolute;
  top: 60%;
  left: -200%;
  width:150%;
}

#shima_exp{
  padding-top: 20%;
  position: relative;
}

#shiraseai_smtb {
  position: absolute;
  width:50%;
  top:35%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.settei {
  background-color: #F3F0EC;
  padding-top: 4em;
  padding-bottom:4em;
}

#settei1 {
  width: 15%;
  padding-bottom: 2%;
}

#settei2 {
  width: 12%;
}

.dwn_btn {
  width:30%;
}

#detail {
  padding-top: 4em;
  padding-bottom:4em;
}

.infoimg {
  width:85%;
}

.intro{
  background-color: #B9E2F3;
  font-family: 'Zen Antique', serif;
}


#aplkaiteki {
  width: 35%;
}


.fadein_settei {
  opacity : 0;
  transform : translate(0, 100px);
  transition : all 1s;
}

.fadein_settei.active{
  opacity : 1;
  transform : translate(0, 0);
}

.fadein_detail {
  opacity : 0;
  transform : translate(0, 200px);
  transition : all 1s;
}

.fadein_detail.active{
  opacity : 1;
  transform : translate(0, 0);
}

span.smoothText {
  overflow: hidden;
  display: block;
}

span.smoothTextTrigger{
  transition: .40s ease-in-out;
  transform: translate3d(0,100%,0) skewY(12deg);
  transform-origin: left;
  display: block;
}
span.smoothTextTrigger.smoothTextAppear{
    transform: translate3d(0,0,0) skewY(0);
}

.zoomup {
  opacity : 0;
  transform: perspective(100px) translateZ(-100px);
  transition : all 1s;
}

.zoomup.active{
  opacity : 1;
  transform : translate(0, 0);
}

.mouseover1 {
  transition: 1s all;
}

.mouseover1.active{
  transform: perspective(500px) translateZ(50px);
}

.width100 {
  width:100%;
}

.width75 {
  width:60%;  
}

#chara_kamome {
  position:absolute;
  top:70%;
  right:20%;
  width:10%;
}

.download_area{
  background-color: #036EB3;
}


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

  html {
    font-size:1.8vw;
  }

  .sm_view {
    display:block;
  }
  
  .pc_view {
    display:none;
  }

  #shima_exp{
    padding-top: 40%;
    position: relative;
  }

  #shiraseai_smtb {
    position: absolute;
    width:100%;
    top:35%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }

  .s_explain {
    font-size:1.5em;
  }

  .subtitle {
    font-size:3em;
    font-weight: bold;
  }

  .subcontext {
    font-size:1.5em;
    line-height:2em;
  }

  .subcontext2 {
    font-size:1.5em;
    /*padding-top:1em;*/
  }

  .subcontext3 {
    font-size:1.2em;
    line-height:2em;
  }

  .subcontext4 {
    font-size:2.5em;
  }

  .subcontext5 {
    font-weight: bold;
    font-size:3em;
  }

  .subcontext6 {
    font-size:2em;
  }

  #settei1 {
    padding-top:3.5em;
    width: 20%;
    padding-bottom: 2%;
  }

  .subtitle2 {
    padding-top:1.5em;
    font-size:2.3em;
    font-weight: bold;
  }
  
  .dwn_btn {
    width:55%;
    padding-bottom:1.5em;
  }

  #settei2 {
    padding-top:1em;
    width: 90%;
  }

  #settei3 {
    width: 20%;
  }

  .settei_sub {
    font-size:2.3em;
    font-weight: bold;
  }
  
  #chara_cycle{
    display:none;
  }
  
  #chara_ship {
    display:none;
  }

  #imgtotop{
    width:12vw;
  }

  .addcontents {
    background-image:url('./../img/addcontents_sm.png');
    background-size:100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    font-size:0.5em;
  }

  .page_top_btn {
    position: fixed;
    bottom: 20px;
    right: 15px;
    z-index: 999;
  }

  #accessmap {
    width:100%;
  }
  
  #access {
    width:100%;
  }

  .logo {
    width:25%;
  }

  #chara_kamome {
    position:absolute;
    top:95%;
    right:20%;
    width:10%;
  }

}