@charset "UTF-8";
/*=============================
 common style setting
===============================*/
/*=============================
 custom　style
===============================*/
html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  -webkit-text-size-adjust: 100%; }
  @media screen and (max-width: 768px) {
    html,
    body {
      font-size: 100%;
      font-size: 4vw; } }

body {
  background: url(/shironekoproject/lp/evil_eyes/assets/img/bg_pc_mono.jpg) no-repeat;
  background-position: center top;
  background-size: cover;
  overflow-y: scroll;
  font-family: FOT-筑紫Aオールド明朝 Pr6 M; }
  @media screen and (max-width: 768px) {
    body {
      background: url(/shironekoproject/lp/evil_eyes/assets/img/bg_sp_mono.jpg) no-repeat; } }

.pcOnly {
  display: block; }
  @media screen and (max-width: 768px) {
    .pcOnly {
      display: none; } }

.spOnly {
  display: none; }
  @media screen and (max-width: 768px) {
    .spOnly {
      display: block; } }

.fade {
  cursor: pointer;
  opacity: 1;
  transition: all 300ms ease; }
  .fade:hover {
    cursor: pointer;
    opacity: 0.5; }
    @media screen and (max-width: 768px) {
      .fade:hover {
        cursor: pointer;
        opacity: 1; } }

img {
  max-width: 100%;
  height: auto; }

.coverArea {
  position: fixed;
  z-index: 999;
  display: block;
  width: 100%;
  height: 100%;
  background: #fff; }
  .coverArea .cover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 170px;
    height: 170px;
    margin: auto;
    color: #bbb;
    font-family: "Bellefair", serif;
    font-size: 12px;
    text-align: center; }
    .coverArea .cover img {
      width: 100%; }
  .coverArea .shiroLogo {
    width: 30%;
    max-width: 160px;
    margin: 3% auto 0; }
    .coverArea .shiroLogo img {
      width: 100%;
      height: auto; }

.motion {
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s; }

.fadeInUp {
  opacity: 1;
  transform: translateY(0); }

header {
  position: relative;
  z-index: 100;
  width: 100%;
  height: 1vh;
  text-align: center; }

.mode01 .bgImg {
  position: fixed;
  width: 100%;
  height: 100%;
  background: none;
  background: url(/shironekoproject/lp/evil_eyes/assets/img/bg_pc_mono.jpg) no-repeat;
  background-position: center top;
  background-size: cover; }
  @media screen and (max-width: 768px) {
    .mode01 .bgImg {
      height: 110vh; } }
.mode01 .bgImg::before {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100vh;
  background: url(/shironekoproject/lp/evil_eyes/assets/img/bg_pc.png) no-repeat;
  background-position: center top;
  background-size: cover;
  content: "";
  transform: translate3d(0, 0, -1px); }
  @media screen and (max-width: 1024px) {
    .mode01 .bgImg::before {
      background: url(/shironekoproject/lp/evil_eyes/assets/img/bg_sp.png) no-repeat;
      background-position: center top;
      background-size: cover; } }

.bgImg {
  overflow: hidden;
  filter: brightness(5);
  transform: scale(1.3); }
  @media screen and (max-width: 768px) {
    .bgImg {
      width: 100%;
      height: 100%;
      background: none; } }
  .bgImg.on {
    filter: brightness(1);
    transform: scale(1);
    transition: transform 3s cubic-bezier(0, 1, 0, 1) 0s, filter 3s cubic-bezier(0, 1, 0, 1) 0s; }

.bgImgMono {
  position: fixed;
  z-index: 12;
  width: 100%;
  height: 100%;
  background: none;
  opacity: 0; }
  @media screen and (max-width: 768px) {
    .bgImgMono {
      height: 100vh; } }
  .bgImgMono::before {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100vh;
    background: url(/shironekoproject/lp/evil_eyes/assets/img/bg_pc_mono.jpg) no-repeat;
    background-position: center top;
    background-size: cover;
    content: ""; }
    @media screen and (max-width: 768px) {
      .bgImgMono::before {
        background-size: auto 100%;
        background-position: center top; } }

.logo {
  position: fixed;
  z-index: 100;
  bottom: 0vh;
  right: 0;
  margin: 0 auto;
  width: 39%;
  max-width: 716px;
  height: auto;
  opacity: 0; }
  @media screen and (max-width: 1024px) {
    .logo {
      width: 100%;
      bottom: 10vh;
      max-width: inherit; } }
  @media screen and (max-width: 834px) {
    .logo {
      width: 100%;
      bottom: 10vh;
      max-width: inherit; } }
  @media screen and (max-width: 768px) {
    .logo {
      width: 100%;
      bottom: 10vh;
      left: 0; } }
  .logo.on {
    opacity: 1;
    transition: all 1000ms; }
  .logo img {
    width: 100%;
    height: auto; }

.wrapper {
  position: fixed;
  z-index: 100;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  letter-spacing: 1px; }
  .wrapper.on {
    position: relative; }

.wrap {
  margin-left: auto;
  margin-right: auto; }
  @media screen and (max-width: 768px) {
    .wrap {
      width: 100%; } }

.imgFull {
  width: 100%; }
  .imgFull img {
    width: 100%;
    height: auto; }

.on {
  display: block;
  opacity: 1; }

.off {
  display: none;
  opacity: 0; }

.font-loading {
  display: none; }

/*=============================
 h_tag
===============================*/
h2 {
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3%;
  position: relative; }

h3 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  font-size: 50px;
  text-align: center;
  font-size: min(3vw, 30px); }
  @media screen and (max-width: 768px) {
    h3 {
      font-size: 5vw; } }
  h3 p {
    font-size: min(4vw, 40px); }
    @media screen and (max-width: 768px) {
      h3 p {
        font-size: 6vw; } }

/*=============================
 storyArea
===============================*/
.storyArea {
  position: relative;
  z-index: 1;
  margin-top: 100vh;
  margin-bottom: 20%; }
  @media screen and (max-width: 768px) {
    .storyArea {
      margin-bottom: 50%; } }
  @media screen and (max-width: 768px) {
    .storyArea h2 img {
      width: 60%; } }
  .storyArea p {
    color: #3033a3;
    font-size: min(4vw, 24px);
    text-align: center;
    line-height: 2.8;
    letter-spacing: 1px;
    padding: 0 2%;
    text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
    font-style: oblique; }
    @media screen and (max-width: 768px) {
      .storyArea p {
        font-size: 4.6vw; } }
    .storyArea p span.story_line {
      letter-spacing: 0; }

/*=============================
 movieArea
===============================*/
.movieArea {
  margin-bottom: 0%; }
  @media screen and (max-width: 768px) {
    .movieArea h2 img {
      width: 60%; } }
  @media screen and (max-width: 768px) {
    .movieArea {
      margin-bottom: 50%; } }
  .movieArea .wrap {
    max-width: 960px; }
  .movieArea .iframebox {
    position: relative;
    width: 92.5%;
    padding-top: 52.25%;
    margin-left: auto;
    margin-right: auto; }
    .movieArea .iframebox iframe,
    .movieArea .iframebox a {
      position: absolute;
      top: 0;
      left: 0;
      width: 100% !important;
      height: 100% !important; }

/*=============================
 characterArea
===============================*/
/*=============================
 charaArea
===============================*/
.charaArea {
  position: relative;
  z-index: 1;
  margin-bottom: 5%;
  text-align: center; }
  @media screen and (max-width: 768px) {
    .charaArea h2 img {
      width: 60%; } }
  @media screen and (max-width: 768px) {
    .charaArea {
      margin-bottom: 50%; } }
  .charaArea .name {
    position: relative;
    font-size: 36px;
    z-index: 1;
    letter-spacing: 0; }
    @media screen and (max-width: 768px) {
      .charaArea .name {
        font-size: 6.8vw; } }
    .charaArea .name::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 40%;
      height: 1px;
      margin: 0 auto;
      text-align: center;
      background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 100%);
      background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 100%);
      background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
      /* IE6-9 */
      background-position: center;
      background-repeat: no-repeat; }
      @media screen and (max-width: 768px) {
        .charaArea .name::before {
          width: 50%; } }
  .charaArea .cv {
    font-size: 24px;
    padding-top: 1%; }
    @media screen and (max-width: 768px) {
      .charaArea .cv {
        font-size: 5.5vw; } }
    .charaArea .cv span {
      font-size: 14px; }
      @media screen and (max-width: 768px) {
        .charaArea .cv span {
          font-size: 3.5vw; } }
  .charaArea .chara {
    position: relative; }
  .charaArea .charaWrap {
    position: relative;
    width: 100%;
    pointer-events: none; }
    @media screen and (max-width: 768px) {
      .charaArea .charaWrap {
        margin-bottom: 10%; } }
    .charaArea .charaWrap .partsBase {
      opacity: 0; }
    .charaArea .charaWrap .parts01,
    .charaArea .charaWrap .parts02,
    .charaArea .charaWrap .parts03,
    .charaArea .charaWrap .parts04,
    .charaArea .charaWrap .parts05 {
      position: absolute;
      opacity: 0; }
    .charaArea .charaWrap .parts01 {
      z-index: 1;
      transform: translateY(10%);
      top: 0;
      left: 0; }
      @media screen and (max-width: 768px) {
        .charaArea .charaWrap .parts01 {
          z-index: 1; } }
    .charaArea .charaWrap .parts02 {
      right: 0;
      z-index: 2;
      filter: brightness(1.2); }
      @media screen and (max-width: 768px) {
        .charaArea .charaWrap .parts02 {
          z-index: 4;
          bottom: 0;
          left: 0; } }
  .charaArea .inView .parts01,
  .charaArea .inView .parts02 {
    filter: brightness(1);
    opacity: 1;
    transform: translateX(0) translateY(0) scaleX(1); }
  .charaArea .inView .parts01 {
    transform: translateY(0%);
    transition: transform 1s cubic-bezier(0, 1, 0, 1) 0s, opacity 0s ease 0s, filter 2s ease 0s; }
  .charaArea .inView .parts02 {
    transition: transform 5s cubic-bezier(0, 1, 0, 1) 0s, opacity 0s cubic-bezier(0.25, 1, 0.25, 1) 0s, filter 1.3s ease 0s; }
  .charaArea .imgFull {
    overflow: visible; }

.chara01 .name,
.chara01 .cv {
  text-shadow: 0px 0px 5px #00c9ff, 0px 0px 10px #00c9ff; }
.chara01 .parts02 {
  width: 100%; }
.chara01 .parts04 {
  width: 100%; }
@media screen and (max-width: 768px) {
  .chara01 .parts02,
  .chara01 .parts04 {
    width: 100%; } }

.chara02 .name,
.chara02 .cv {
  text-shadow: 0px 0px 5px rgba(144, 0, 255, 0.8), 0px 0px 10px rgba(144, 0, 255, 0.8); }
.chara02 .parts02 {
  width: 100%;
  right: auto !important;
  left: 0; }
.chara02 .parts04 {
  width: 100%;
  right: 2%;
  left: auto !important; }
  @media screen and (max-width: 768px) {
    .chara02 .parts04 {
      right: 0; } }
@media screen and (max-width: 768px) {
  .chara02 .parts02,
  .chara02 .parts04 {
    width: 100%; } }

.chara03 .name,
.chara03 .cv {
  text-shadow: 0px 0px 5px rgba(255, 6, 164, 0.8), 0px 0px 10px rgba(255, 6, 164, 0.8); }
.chara03 .parts02 {
  width: 100%; }
.chara03 .parts04 {
  width: 100%; }
@media screen and (max-width: 768px) {
  .chara03 .parts02,
  .chara03 .parts04 {
    width: 100%; } }

.voiceArea {
  position: absolute;
  bottom: 37%;
  right: 5%;
  width: 70%;
  max-width: 500px;
  z-index: 9998;
  transform: rotate(-10deg); }
  @media screen and (max-width: 1024px) {
    .voiceArea {
      bottom: 0%;
      right: 5%;
      width: 35%;
      transform: rotate(0deg);
      max-width: 250px; } }
  @media screen and (max-width: 768px) {
    .voiceArea {
      bottom: 10%;
      width: 35%; } }
  .voiceArea .voice {
    display: flex;
    width: min(100%, 600px);
    justify-content: space-around;
    align-items: center;
    margin: 1.5% auto 0; }
    @media screen and (max-width: 1024px) {
      .voiceArea .voice {
        flex-flow: column;
        max-width: 400px; } }
    @media screen and (max-width: 768px) {
      .voiceArea .voice {
        margin-top: 4%; } }
    .voiceArea .voice li {
      width: calc(100% / 3);
      padding: 0%;
      transform: skewX(-25deg);
      margin: 0 10px; }
      @media screen and (max-width: 1024px) {
        .voiceArea .voice li {
          width: 100%;
          transform: skewY(-10deg);
          margin-bottom: 2vh; } }
      .voiceArea .voice li button {
        width: 100%;
        margin: 0 auto;
        cursor: pointer;
        position: relative;
        color: #fff;
        font-family: FOT-筑紫Aオールド明朝 Pr6 M;
        font-size: 2rem;
        background: url(/shironekoproject/lp/evil_eyes/assets/img/voice_btn_dotted_off.png) no-repeat, url(/shironekoproject/lp/evil_eyes/assets/img/voice_btn_dotted_off.png) no-repeat, #646464;
        background-position: -40% -80%,150% 170%,0;
        background-size: 50%;
        position: relative;
        box-shadow: 10px 10px 0px #000; }
        @media screen and (max-width: 768px) {
          .voiceArea .voice li button {
            background-position: -50% -120%,150% 170%,0;
            font-size: 1.6rem; } }
        @media screen and (max-width: 1024px) {
          .voiceArea .voice li button {
            background-position: -30% -10%,140% 110%,0;
            background-size: 50%;
            font-size: 1.6rem; } }
        .voiceArea .voice li button.is-playing:before {
          position: absolute;
          z-index: 10;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          display: flex;
          width: 100%;
          height: 100%;
          align-items: center;
          justify-content: center;
          font-family: FOT-筑紫Aオールド明朝 Pr6 M;
          font-size: 1.4rem;
          color: #fff;
          content: "PLAYING";
          box-shadow: 10px 10px 0px #646464; }
          @media screen and (max-width: 768px) {
            .voiceArea .voice li button.is-playing:before {
              background-position: -50% -120%,150% 170%,0;
              font-size: 1.4rem; } }
          @media screen and (max-width: 1024px) {
            .voiceArea .voice li button.is-playing:before {
              background-position: -30% -10%,140% 110%,0;
              background-size: 50%;
              font-size: 1.4rem; } }

.chara01 .voiceArea .voice li button.is-playing:before {
  position: absolute;
  left: 0;
  background: url(/shironekoproject/lp/evil_eyes/assets/img/voice_btn_dotted_on.png) no-repeat, url(/shironekoproject/lp/evil_eyes/assets/img/voice_btn_dotted_on.png) no-repeat, #3264ff;
  background-position: -40% -80%,150% 170%,0;
  background-size: 50%; }

.chara02 .voiceArea .voice li button.is-playing:before {
  position: absolute;
  left: 0;
  background: url(/shironekoproject/lp/evil_eyes/assets/img/voice_btn_dotted_on.png) no-repeat, url(/shironekoproject/lp/evil_eyes/assets/img/voice_btn_dotted_on.png) no-repeat, #9696ff;
  background-position: -40% -80%,150% 170%,0;
  background-size: 50%; }

.chara03 .voiceArea .voice li button.is-playing:before {
  position: absolute;
  left: 0;
  background: url(/shironekoproject/lp/evil_eyes/assets/img/voice_btn_dotted_on.png) no-repeat, url(/shironekoproject/lp/evil_eyes/assets/img/voice_btn_dotted_on.png) no-repeat, #ff54b9;
  background-position: -40% -80%,150% 170%,0;
  background-size: 50%; }

.font-loading {
  display: none; }

/*=============================
 wpArea
===============================*/
.wpArea {
  text-align: center;
  margin-bottom: 20%; }
  @media screen and (max-width: 768px) {
    .wpArea h2 img {
      width: 60%; } }
  .wpArea .wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto; }
  .wpArea ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 0 40px;
    width: 100%;
    font-size: 0;
    text-align: center; }
    .wpArea ul li {
      width: 24%;
      max-width: 230px;
      padding: 3% 1% 0; }
      @media screen and (max-width: 768px) {
        .wpArea ul li {
          width: 48%;
          padding: 5% 2%; } }
      .wpArea ul li p {
        text-align: center;
        font-size: 12px; }
      .wpArea ul li img {
        width: 100%;
        border: 2px solid #fff;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
        pointer-events: none; }
      .wpArea ul li .link {
        position: relative;
        margin-top: 8px; }
        .wpArea ul li .link.shareCover::after {
          content: "シェアで壁紙ゲット";
          position: absolute;
          top: 0;
          left: -1.5%;
          display: flex;
          flex-direction: column;
          align-content: center;
          justify-content: center;
          align-items: center;
          width: 103%;
          height: 100%;
          background: rgba(0, 0, 0, 0.6);
          border-radius: 3px;
          font-size: 18px;
          color: fff;
          text-shadow: 0 0 5px #000, 0 0 5px #000, 0 0 8px #000, 0 0 8px #000;
          box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); }
          @media screen and (max-width: 768px) {
            .wpArea ul li .link.shareCover::after {
              font-size: 4vw; } }
    .wpArea ul a {
      display: inline-block;
      width: 100%;
      margin: 4px 0;
      background: #646464;
      text-align: center;
      padding: 5%;
      font-size: 13px;
      color: #fff;
      text-decoration: none;
      font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
      @media screen and (max-width: 768px) {
        .wpArea ul a {
          font-size: 2.5vw;
          padding: 7% 5%; } }
  .wpArea .text {
    text-align: center;
    padding: 0 12px 20px;
    color: #3033a3;
    font-size: 18px;
    line-height: 1.5;
    text-shadow: 0 0px 5px #fff, 0 0px 10px #fff, 0 0px 10px #fff; }
    @media screen and (max-width: 768px) {
      .wpArea .text {
        font-size: 4vw; } }
    .wpArea .text br {
      display: none; }
    @media screen and (max-width: 768px) {
      .wpArea .text br {
        display: block; } }
  .wpArea .btnShare {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    max-width: 500px;
    margin: 0 auto 40px;
    padding: 2% 5%;
    background: #00a1ff;
    box-shadow: 0 4px 0 #1680bd;
    border-radius: 50rem;
    text-align: center;
    color: #fff;
    font-size: 34px;
    font-weight: 700;
    cursor: pointer;
    -webkit-transition: 400ms ease;
    -o-transition: 400ms ease;
    transition: 400ms ease; }
    @media screen and (max-width: 1024px) {
      .wpArea .btnShare {
        max-width: 700px; } }
    @media screen and (max-width: 768px) {
      .wpArea .btnShare {
        font-size: 7vw;
        padding: 5%; } }
    .wpArea .btnShare:hover {
      -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
      transform: scale(1.05);
      -webkit-transition: 200ms ease;
      -o-transition: 200ms ease;
      transition: 200ms ease; }
    .wpArea .btnShare img {
      width: 12%;
      height: auto;
      padding-right: 4%; }

/*=============================
 footer
===============================*/
.footerArea {
  padding-top: 30vh;
  background: url("../img/footer_bg_img.png") no-repeat 50%, linear-gradient(to top, white 75%, rgba(255, 255, 255, 0));
  background-size: 70%,100%; }
  @media screen and (max-width: 768px) {
    .footerArea {
      background-position: 100% 5%;
      background-size: 130%,100%; } }

footer {
  position: relative;
  z-index: 999; }
  footer::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 1px;
    margin: 0 auto;
    background-image: linear-gradient(left, rgba(221, 221, 221, 0), rgba(221, 221, 221, 0.3) 30%, rgba(221, 221, 221, 0.3) 70%, rgba(221, 221, 221, 0));
    background-position: center;
    background-repeat: no-repeat;
    content: "";
    text-align: center; }
  footer .wrap {
    max-width: 540px;
    padding: 10% 0; }
    @media screen and (max-width: 768px) {
      footer .wrap {
        max-width: 380px; } }
    @media screen and (max-width: 768px) {
      footer .wrap {
        max-width: 100%;
        padding-bottom: 40%; } }
  footer .redirectArea {
    padding-top: 1vh;
    text-align: center; }
    footer .redirectArea .redirectBtn {
      display: inline-block;
      width: 46%;
      vertical-align: top; }
      footer .redirectArea .redirectBtn a {
        display: inline-block;
        width: 100%;
        padding: 5% 0;
        border: 1px solid #826634;
        background: #2b0802;
        border-radius: 100px;
        box-shadow: 0 6px 10px -6px rgba(0, 0, 0, 0.8);
        color: rgba(255, 255, 255, 0.9);
        font-size: 3vw;
        letter-spacing: -0.05em;
        line-height: 1.5;
        text-align: center;
        text-decoration: none; }
        @media screen and (max-width: 768px) {
          footer .redirectArea .redirectBtn a {
            font-size: 12px; } }
        @media screen and (max-width: 768px) {
          footer .redirectArea .redirectBtn a {
            font-size: 3.3vw; } }
        footer .redirectArea .redirectBtn a:hover {
          background: #826634;
          color: #fff; }
      footer .redirectArea .redirectBtn a span {
        color: rgba(255, 255, 255, 0.9);
        font-size: 4vw;
        font-weight: bold; }
        @media screen and (max-width: 768px) {
          footer .redirectArea .redirectBtn a span {
            font-size: 18px; } }
        @media screen and (max-width: 768px) {
          footer .redirectArea .redirectBtn a span {
            font-size: 4.5vw; } }
        footer .redirectArea .redirectBtn a span:hover {
          color: #fff; }
  footer .snsArea {
    width: 100%;
    padding: 48px 0 24px;
    text-align: center; }
    footer .snsArea li {
      display: inline-block;
      margin: 0 5px;
      vertical-align: middle; }
      footer .snsArea li.btn {
        width: 10%; }
        footer .snsArea li.btn img {
          width: 100%; }
  footer .shiroLogo {
    position: relative;
    width: 100%;
    padding: 10vh 0 1vh;
    margin: 0 auto;
    text-align: center; }
    footer .shiroLogo span {
      width: 100%; }
      @media screen and (max-width: 768px) {
        footer .shiroLogo span::before {
          top: 7vh; } }
      footer .shiroLogo span img {
        margin: 0 auto;
        text-align: center; }
  footer .appNotice {
    width: 100%;
    padding: 2%;
    margin: 0 auto;
    border-radius: 4px;
    letter-spacing: 0.1em;
    color: #646464; }
    footer .appNotice li {
      margin: 0 0 8px 20px;
      color: #646464;
      line-height: 1.5;
      list-style-type: disc;
      font-size: 13px; }
      footer .appNotice li:last-child {
        margin-bottom: 0; }
  footer .appArea ul {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    padding: 3vh 2%; }
    @media screen and (max-width: 768px) {
      footer .appArea ul {
        padding: 3vh 3%; } }
  footer .appArea li {
    margin: 2% 0; }
    footer .appArea li:nth-child(1) {
      width: 25%; }
      @media screen and (max-width: 768px) {
        footer .appArea li:nth-child(1) {
          width: 40%; } }
    footer .appArea li:nth-child(2) {
      width: 31%; }
      @media screen and (max-width: 768px) {
        footer .appArea li:nth-child(2) {
          width: 50%; } }
    footer .appArea li:nth-child(3) {
      width: 32%; }
      @media screen and (max-width: 768px) {
        footer .appArea li:nth-child(3) {
          width: 51%; } }
    footer .appArea li img {
      width: 100%;
      height: auto; }
  footer .link {
    position: relative;
    z-index: 10;
    padding: 3vh 0 40px;
    font-size: 10px;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-align: center;
    text-indent: 0.1em; }
    @media screen and (max-width: 768px) {
      footer .link {
        font-size: 3vw; } }
    footer .link a {
      margin: 0 0.5em;
      color: #646464; }
  footer .copyright {
    position: relative;
    z-index: 10;
    padding: 3vh 0 5vh;
    color: #646464;
    font-size: 10px;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-align: center;
    text-indent: 0.3em; }
  footer .bnrArea {
    position: relative;
    display: block;
    width: 100%;
    max-width: 640px;
    padding: 8vh 0 0;
    margin: 0 auto;
    text-align: center;
    transform: scale(1);
    transition: all 400ms ease; }
    @media screen and (max-width: 768px) {
      footer .bnrArea {
        padding: 8vh 5% 0; } }
    footer .bnrArea a {
      display: block;
      font-size: 0; }
    footer .bnrArea img {
      width: 100%;
      height: auto;
      border-radius: 6px;
      box-shadow: 0 3px 15px rgba(0, 0, 0, 0.6);
      font-size: 0;
      transition: all 400ms ease; }
    footer .bnrArea:hover {
      transform: scale(1.05); }
      footer .bnrArea:hover img {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); }
  footer .officialSite {
    width: 100%;
    margin: 12px auto 24px;
    text-align: center; }
    footer .officialSite a {
      display: inline-block;
      width: 92%;
      padding: 3% 0;
      border: 2px solid #3264ff;
      background: #3264ff;
      border-radius: 100px;
      color: #fff;
      font-size: 14px;
      line-height: 1.5;
      text-align: center;
      text-decoration: none;
      transition: all 200ms ease; }
      @media screen and (max-width: 768px) {
        footer .officialSite a {
          font-size: 12px; } }
      @media screen and (max-width: 768px) {
        footer .officialSite a {
          font-size: 5vw; } }
      footer .officialSite a:hover {
        opacity: 0.8;
        transition: all 200ms ease; }
      footer .officialSite a span {
        position: relative;
        padding-right: 5px;
        margin-right: 15px; }
        footer .officialSite a span::before, footer .officialSite a span::after {
          position: absolute;
          top: 0;
          right: -15px;
          bottom: 0;
          margin: auto;
          content: "";
          vertical-align: middle; }
        footer .officialSite a span::before {
          width: 12px;
          height: 12px;
          background: rgba(255, 255, 255, 0.8);
          border-radius: 50%; }
        footer .officialSite a span::after {
          right: -10px;
          width: 3px;
          height: 3px;
          border-top: 1px solid #826634;
          border-right: 1px solid #826634;
          transform: rotate(45deg); }