@charset "utf-8";
/*--****************************************
site : idolish7
@PC - common.css
Copyright (c) ULM Co.,Ltd. - http://www.ulm-design.com

・和泉一織
rgb(13,50,111)
#0d326f

・二階堂大和
rgb(103,175,40)
#67af28

・和泉三月
rgb(240,131,0)
#f08300

・四葉環
rgb(91,194,217)
#5bc2d9

・逢坂壮五
rgb(133,109,175)
#856daf

・六弥ナギ
rgb(255,235,0)
#ffeb00

・七瀬陸
rgb(230,0,57)
#e60039

・八乙女楽
rgb(77,92,99)
#4d5c63

・九条天
rgb(185,79,132)
#b94f84

・十龍之介
rgb(0,81,109)
#00516d

・百
rgb(43,47,63)
#2b2f3f

rgb(230,46,139)
 #e62e8b

・千
rgb(245,243,242)
#f5f3f2

rgb(196,215,0)
#c4d700

・小鳥遊紡
rgb(239,133,133)
#ef8585

・大神万理
rgb(140,217,217)
#8cd9d9

font-family: "FOT-筑紫明朝 Pr6N R", "TsukuMinPr6N-R";
font-family: "FOT-筑紫明朝 Pr6N D", "TsukuMinPr6N-D";

*****************************************--*/
.i1{ color: #0d326f; }
.i1-bg{ background: #0d326f; }
.i2{ color: #67af28; }
.i2-bg{ background: #67af28; }
.i3{ color: #f08300; }
.i3-bg{ background: #f08300; }
.i4{ color: #5bc2d9; }
.i4-bg{ background: #5bc2d9; }
.i5{ color: #856daf; }
.i5-bg{ background: #856daf; }
.i6{ color: #ffeb00; }
.i6-bg{ background: #ffeb00; }
.i7{ color: #e60039; }
.i7-bg{ background: #e60039; }
.i8{ color: #4d5c63; }
.i8-bg{ background: #4d5c63; }
.i9{ color: #b94f84; }
.i9-bg{ background: #b94f84; }
.i10{ color: #00516d; }
.i10-bg{ background: #00516d; }
.i11{ color: #954142; }
.i11-bg{ background: #954142; }
.i12{ color: #8cd9d9; }
.i12-bg{ background: #8cd9d9; }
.i13{ color: #ef8585; }
.i13-bg{ background: #ef8585; }
.i14{ color: #d7466b; }
.i14-bg{ background: #d7466b; }
.i15{ color: #91949c; }
.i15-bg{ background: #91949c; }
.i16{ color: #e62e8b; }
.i16-bg{ background: #e62e8b; }
.i17{ color: #c4d700; }
.i17-bg{ background: #c4d700; }
.i18{ color: #367bb9; }
.i18-bg{ background: #367bb9; }

.i19{ color: #8eaa9d; }
.i19-bg{ background: #8eaa9d; }
.i20{ color: #832f41; }
.i20-bg{ background: #832f41; }
.i21{ color: #c7b6a0; }
.i21-bg{ background: #c7b6a0; }
.i22{ color: #8e7375; }
.i22-bg{ background: #8e7375; }
.i23{ color: #3a3a53; }
.i23-bg{ background: #3a3a53; }



@media (min-width: 769px) {

  .pc {
    display: block;
  }

  .sp {
    display: none;
  }

  html,body{
    font-size:13px;
    font-family: fot-tsukumin-pr6n, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
    /*font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";*/
    letter-spacing:1px;
    word-break: break-all;
    word-wrap: break-word;

    /*文字のアンチエイリアス設定*/
    /*-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;/*Firefox*/

    /*文字詰め*/
    font-feature-settings: "palt";
    
    color: #000;
    background: #fff;
  }


  img{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
  }


  .gothic{
    font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  }

  .old-gothic{
    font-family: "fot-tsukuaoldmin-pr6n", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
  }

  .easter-egg {
    width: 60px;
    display: block;
    transform-origin: center bottom;
    animation: rotate 2s linear infinite;
  }

  .easter-egg img {
    width: 100%;
  }

  @keyframes rotate {
    0% , 100%{
        transform: rotate(5deg);
    }
    50%{
        transform: rotate(-5deg);
    }
  }

  .relative {
    position: relative;
  }

  .absolute {
    position: absolute;
    z-index: 1000;
  }

  /*-------------------------------

  #header

  -------------------------------*/
  #header{
    background: rgba(255,255,255,0.9);
    width: 100%;
    min-width: 1260px;
    height: 100px;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 100;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  #header:hover{
    background: rgba(255,255,255,0.96) !important;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
  }

  #ttl-logo{
    position: absolute;
    top: 15px;
    left: 20px;
    z-index: 1;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;

    img {
      width: 200px;
      height: 69px;
    }
  }

  #ttl-logo:hover{
    opacity: 0.6;
  }

  .top-ttl-logo{
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }

  #header-line-box{
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1;
  }

  .header-line{
    width: 60px;
    height: 7px;
  }

  .nav-contaner{
    /*padding: 25px 0;*/
    font-size: 14px;
    height: 100px;
    align-items: center;
  }

  .nav-box{
    margin: 0 8px;
  }

  .nav-btn{
    display: block;
    color: #000;
    height: 14px;
    padding: 18px 0;
    position: relative;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }

  .nav-btn:after{
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 10px;
    left: 50%;
    width: 0%;
    height: 2px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }

  .nav-btn0:after{ background: #0d326f; }
  .nav-btn1:after{ background: #67af28; }
  .nav-btn2:after{ background: #f08300; }
  .nav-btn3:after{ background: #5bc2d9; }
  .nav-btn4:after{ background: #856daf; }
  .nav-btn5:after{ background: #ffeb00; }
  .nav-btn6:after{ background: #e60039; }
  .nav-btn7:after{ background: #4d5c63; }
  .nav-btn8:after{ background: #b94f84; }
  .nav-btn9:after{ background: #00516d; }
  .nav-btn10:after{ background: #e62e8b; }

  .nav-btn:not(.coming):hover:after{ width: 100%; left: 0; }
  .nav-btn0:not(.coming):hover{ color: #0d326f; }
  .nav-btn1:not(.coming):hover{ color: #67af28; }
  .nav-btn2:not(.coming):hover{ color: #f08300; }
  .nav-btn3:not(.coming):hover{ color: #5bc2d9; }
  .nav-btn4:not(.coming):hover{ color: #856daf; }
  .nav-btn5:not(.coming):hover{ color: #ffeb00; }
  .nav-btn6:not(.coming):hover{ color: #e60039; }
  .nav-btn7:not(.coming):hover{ color: #4d5c63; }
  .nav-btn8:not(.coming):hover{ color: #b94f84; }
  .nav-btn9:not(.coming):hover{ color: #00516d; }
  .nav-btn10:not(.coming):hover{ color: #e62e8b; }
  .nav-btn11:not(.coming):hover{ background: #000; color: #fff;}

  .coming{
    opacity: 0.5;
    cursor: default;
  }


  .tw-btn{
    width: 40px;
    height: 40px;
    font-size: 22px;
    text-align: center;
    line-height: 35px;
    border-radius: 20px;
    color: #000;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #drawer-btn {
    display: none;
  }

  #drawer-nav-container {
    display: none;
  }
  /*-------------------------------

  #footer

  -------------------------------*/
  #footer{
    width: 100%;
    min-width: 1260px;
    background-color: #000;
    /*background-image: url(../img/common/footer/bg0.png), url(../img/common/footer/bg1.png);
    background-repeat: no-repeat, no-repeat;
    background-position: top left, top right;*/
    position: relative;
    z-index: 2;
  }


  #share-container{
    position: absolute;
    z-index: 10;
    top: -38px;
    right: 5px;
  }


  #share-txt{
    line-height: 34px;
    padding: 0 5px 0 0;
  }


  .share-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    border-radius:17px;
    font-size: 18px;
    text-align: center;
    line-height: 30px;
    overflow: hidden;
    background: #000;
    color: #fff;
    box-sizing: border-box;
    margin: 0 3px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }

  .share-twitter-btn{
    background: #000;
  }


  .share-facebook-btn{
    background: #3b5998;
  }


  .share-line-btn{
    background: #00c300;
  }


  .share-btn:hover{
    opacity: 0.6;
  }


  .icon-line{
    font-size: 20px;
    display: block;
  }


  #page-top-btn{
    width: 70px;
    height: 70px;
    background: #fff;
    border: 2px solid #a0a0a0;
    box-sizing: border-box;
    border-radius: 35px;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    top: -35px;
    left: calc(50% - 35px);
    cursor: pointer;
  }


  #page-top-btn-inner{
    width: 60px;
    height: 60px;
    text-align: center;
    font-size: 30px;
    line-height: 60px;
    color: #a0a0a0;
    border: 1px solid #a0a0a0;
    box-sizing: border-box;
    border-radius: 30px;
    overflow: hidden;
    margin: 3px;
  }

  #page-top-btn,
  #page-top-btn-inner {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }

  #page-top-btn:hover {
    background: #2bd0fe;
    border: 2px solid #fff;
  }

  #page-top-btn:hover #page-top-btn-inner {
    color: #fff;
    border: 1px solid #fff;
  }

  #page-top-btn:hover .page-top-icon {
    -webkit-animation: moveArrowTop 1.5s infinite linear;
    animation: moveArrowTop 1.5s  infinite linear;
  }

  .page-top-icon-box {
    width: 31px;
    height: 47px;
    line-height: 54px;
    overflow: hidden;
    position: relative;
    display: block;
    margin: 0 auto;
  }

  .page-top-icon {
    position: absolute;
    z-index: 1;
    width: 31px;
    height: 47px;
    top: 0px;
    left: 0px;
  }


  @-webkit-keyframes moveArrowTop {
    0% {top: 0px;}
    29%{top:-60px;}
    30%{top:60px; opacity: 0;}
    31%{top: 60px; opacity: 0;}
    32%{top: 60px; opacity: 1;}
    60% {top:0px;}
    100% {top:0px;}
  }


  @keyframes moveArrowTop {
    0% {top: 0px;}
    29%{top:-60px;}
    30%{top:60px; opacity: 0;}
    31%{top: 60px; opacity: 0;}
    32%{top: 60px; opacity: 1;}
    60% {top:0px;}
    100% {top:0px;}
  }


  #footer-inner {
    padding: 74px 0 0 20px;
  }


  #footer-logo {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }


  #footer-logo:hover {
    opacity: 0.6;
  }


  #footer-nav-container {
    width: 350px;
    padding: 0 20px;
  }

  #footer-tw-container {
    width: 250px;
    padding: 0 20px;
  }

  #footer-app-container {
    width: 465px;
    padding: 0 20px;
  }

  #footer-nav-line0 {
    padding: 0 40px 0 0;
  }


  #footer-nav-ttl,
  #footer-tw-ttl,
  #footer-app-ttl {
    color: #fff;
    font-size: 20px;
    letter-spacing: 3px;
    position: relative;
    margin: 0 0 10px 0;
    padding: 0 0 15px 0;
  }

  #footer-app-ttl {
    margin-top: -1.4em;
    line-height: 1.2em;
  }

  #footer-app-spec {
    padding: 10px 0;
  }

  .footer-app-img {
    width: 100%;
    height: auto;
  }

  .footer-app-dl-img {
    height: 40px;
    width: auto;
  }

  #footer-nav-ttl::after,
  #footer-tw-ttl::after,
  #footer-app-ttl::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background:-webkit-linear-gradient(left, #fff, #000);
    background:linear-gradient(to right, #fff, #000);
    position: absolute;
    z-index: 1;
    left: 0px;
    bottom: 0px;
  }


  .footer-nav-btn {
    display: block;
    min-width: 160px;
    letter-spacing: 4px;
    color: #fff;
    height: 14px;
    padding: 10px 0;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }


  .footer-nav-btn0:not(.coming):hover{ color: #0d326f; }
  .footer-nav-btn1:not(.coming):hover{ color: #67af28; }
  .footer-nav-btn2:not(.coming):hover{ color: #f08300; }
  .footer-nav-btn3:not(.coming):hover{ color: #5bc2d9; }
  .footer-nav-btn4:not(.coming):hover{ color: #856daf; }
  .footer-nav-btn5:not(.coming):hover{ color: #ffeb00; }
  .footer-nav-btn6:not(.coming):hover{ color: #e60039; }
  .footer-nav-btn7:not(.coming):hover{ color: #4d5c63; }
  .footer-nav-btn8:not(.coming):hover{ color: #b94f84; }
  .footer-nav-btn9:not(.coming):hover{ color: #00516d; }
  .footer-nav-btn10:not(.coming):hover{ color: #2bd0fe; }



  #footer-bottom{
    width: 100%;
    border-top: 1px solid #1e1e1e;
    margin: 50px 0 0 0;
  }


  #footer-banner-container{
    width: 100%;
    height: 110px;
    border-top: 1px solid #1e1e1e;
    border-bottom: 1px solid #1e1e1e;
    box-sizing: border-box;
  }


  #cc{
    width: 100%;
    height: 38px;
    text-align: center;
    line-height: 38px;
    color: #fff;
    font-size: 12px;
  }

  /*-------------------------------

  #wrapper

  -------------------------------*/
  #wrapper{
    display:block;
    width:100%;
    min-width:1260px;
    position: relative;
  }


  /*-------------------------------

  #main

  -------------------------------*/
  #main{
    width: 100%;
    min-width: 1260px;
    min-height: -webkit-calc(100vh - 485px);
    min-height: calc(100vh - 485px);
  }


  #contents{
  }

  .more-btn{
    width: 260px;
    height: 46px;
    background: #fff;
    border: 2px solid #a0a0a0;
    border-radius: 21px;
    box-sizing: border-box;
    margin: 30px auto 0 auto;
  }


  .more-btn-inner{
    display: block;
    width: 252px;
    height: 38px;
    border: 1px solid #a0a0a0;
    border-radius: 19px;
    margin: 2px;
    color: #a0a0a0;
    text-align: center;
    box-sizing: border-box;
    line-height: 32px;
    position: relative;
    font-size: 17px;
  }


  .more-btn,
  .more-btn-inner{
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }


  .more-btn-icon-box{
    position: absolute;
    z-index: 1;
    right: 10px;
    top: 0px;
    width: 18px;
    height: 32px;
    overflow: hidden;
  }


  .more-btn-icon{
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
  }


  .more-btn:hover{
    background: #2bd0fe;
    border: 2px solid #fff;
  }


  .more-btn:hover .more-btn-inner{
    border: 1px solid #fff;
    color: #fff;
  }


  .more-btn:hover .more-btn-icon{
    -webkit-animation: moveArrow 1.5s infinite linear;
    animation: moveArrow 1.5s  infinite linear;
  }

  @-webkit-keyframes moveArrow {
    0% {left: 0px;}
    29%{left:20px;}
    30%{left:20px; opacity: 0;}
    31%{left: -20px; opacity: 0;}
    32%{left: -20px; opacity: 1;}
    60% {left:0px;}
    100% {left:0px;}
  }


  @keyframes moveArrow {
    0% {left: 0px;}
    29%{left:20px;}
    30%{left:20px; opacity: 0;}
    31%{left: -20px; opacity: 0;}
    32%{left: -20px; opacity: 1;}
    60% {left:0px;}
    100% {left:0px;}
  }



  /*-------------------------------

  ページャー

  -------------------------------*/
  .wp-pagenavi{
    display: table;
    margin: 0 auto;
  }


  .pages,
  .nextpostslink,
  .previouspostslink{
    display: none;
  }


  .page,
  .current{
    width: 42px;
    height: 42px;
    display: inline-block;
    background: #fff;
    border: 2px solid #a0a0a0;
    border-radius: 21px;
    box-sizing: border-box;
    text-align: center;
    line-height: 36px;
    font-size: 17px;
    color: #000;
    margin: 0 5px;
    padding: 0 0 0 2px;
    position: relative;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;

  }


  .page:after,
  .current:after,
  .previouspostslink:after,
  .nextpostslink:after{
    content: "";
    display: block;
    position: absolute;
    width: 36px;
    height: 36px;
    border: 1px solid #a0a0a0;
    border-radius: 20px;
    box-sizing: border-box;
    top: 2px;
    left: 2px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }


  .current,
  .page:hover,
  .previouspostslink:hover,
  .nextpostslink:hover{
    background: #2bd0fe;
    color: #fff;
    border: 1px solid #fff;
  }


  .current:after,
  .page:hover:after,
  .previouspostslink:hover:after,
  .nextpostslink:hover:after{
    border: 1px solid #fff;
  }

  .extend {
    border: none !important;
  }
  /*-------------------------------

  .bg-container

  -------------------------------*/
  .bg-container{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;
  }


  .bg-star{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    right: 0px;
  }


  .star{
    position: absolute;
    z-index: 0;
    top: 0px;
    left: 0px;
  }


  .star0{
    -webkit-animation: 2.5s linear 0s infinite flashing ;
    animation: 2.5s linear 0s infinite flashing ;
  }


  .star1{
    -webkit-animation: flashing 2.3s 1s infinite linear;
    animation: flashing 2.3s 1s infinite linear;
  }


  .star2{
    -webkit-animation: flashing 3s 2s infinite linear;
    animation: flashing 3s 2s infinite linear;
  }

  .star3{
    -webkit-animation: flashing 2s 2.5s infinite linear;
    animation: flashing 2s 2.5s infinite linear;
  }


  @-webkit-keyframes flashing {
    0% {opacity: 1;}
    50% {opacity: 0.2;}
    100% {opacity: 1;}
  }


  @keyframes flashing {
    0% {opacity: 1;}
    50% {opacity: 0.2;}
    100% {opacity: 1;}
  }


  .bg-circle{
    position: absolute;
    z-index: 0;
    width: 1215px;
    height: 1215px;
    top: -178px;
    left: 73px;
  }


  .circle{
    position: absolute;
    top: 0px;
    left: 0px;
  }


  .circle0{
    -webkit-animation: rotation0 160s infinite linear;
    animation: rotation0 160s infinite linear;
  }


  @-webkit-keyframes rotation0 {
    0% {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg)}
  }


  @keyframes rotation0 {
    0% {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
  }


  .circle1{
    -webkit-animation: rotation1 165s infinite linear;
    animation: rotation1 165s infinite linear;
  }


  @-webkit-keyframes rotation1 {
    0% {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(-360deg)}
  }


  @keyframes rotation1 {
    0% {transform: rotate(0deg)}
    100% {transform: rotate(-360deg)}
  }


  .circle2{
    -webkit-animation: rotation2 158s infinite linear;
    animation: rotation2 158s infinite linear;
  }


  @-webkit-keyframes rotation2 {
    0% {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg)}
  }


  @keyframes rotation2 {
    0% {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
  }


  .circle3{
    -webkit-animation: rotation3 162s infinite linear;
    animation: rotation3 162s infinite linear;
  }


  @-webkit-keyframes rotation3 {
    0% {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(-360deg)}
  }


  @keyframes rotation3 {
    0% {transform: rotate(0deg)}
    100% {transform: rotate(-360deg)}
  }


  .sub-bg-container{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 0;
    top: 0px;
    left: 0px;
    background: url(../img/common/bg_pt.png) repeat;
  }


  .sub-bg-circle{
    position: absolute;
    z-index: 0;
    width: 1215px;
    height: 1215px;
    top: -411px;
    left: -228px;
  }


  .sub-bg-star{
    position: absolute;
    z-index: 1;
    width: 1920px;
    height: 100%;
    top: 0px;
    left: calc((100% - 1920px)/2);
  }


  .sub-bg-particle{
    position: absolute;
    z-index: 0;
    width: 1260px;
    top: 0px;
    left: calc((100% - 1260px)/2);
  }

  /*-------------------------------

  #preloader

  -------------------------------*/
  #preloader {
    background: rgba(255,255,255,0.96);
    width:100%;
    height:100%;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index:10000;
  }


  #preloader-inner{
    width:350px;
    height:300px;
    position:absolute;
    top: calc( 50% - 150px );
    left: calc( 50% - 175px );
    z-index:1;
  }


  #preloader-ttl{
    display:block;
    position:absolute;
    top: 0%;
    left: 0%;
    z-index:3;
    width: 350px;
    height: 122px;
  }


  #preloader-anime{
    position:absolute;
    top:115px;
    left:310px;
    z-index:3;
  }

  #preloaderAnime{
    width: 37px;
    height: 37px;
    position: absolute;
    top: calc(50% - 16px);
    left: calc(50% - 16px);
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
  }


  #preloaderAnime div{
    -webkit-animation: inherit;
    animation: inherit;
  }


  #preloaderAnime div:nth-child(1){
    left: 40px;
    top: 20px;
  }


  #preloaderAnime div:nth-child(2){
    left: 32.4698px;
    top: 35.6366px;
  }


  #preloaderAnime div:nth-child(3){
    left: 15.5496px;
    top: 39.4986px;
  }


  #preloaderAnime div:nth-child(4){
    left: 1.98062px;
    top: 28.6777px;
  }


  #preloaderAnime div:nth-child(5){
    left: 1.98062px;
    top: 11.3223px;
  }


  #preloaderAnime div:nth-child(6){
  left: 15.5496px;
  top: 0.501442px;
  }


  #preloaderAnime div:nth-child(7){
    left: 32.4698px;
    top: 4.36337px;
  }





  /*-------------------------------

  @banner

  -------------------------------*/
  #banner-container{
    
  }


  .banner-item{
    margin: 0 10px 0 0;
  }


  .banner-item:hover{
    opacity: 0.6;
  }


  .banner-img{
    width: 180px;
    height: auto;
  }


  /*-------------------------------

  @SNS

  -------------------------------*/
  #social-container{
    
  }


  .sns-btn{
    display:block;
    height:20px;
    padding:0 10px 0 0;
  }


  .sns-btn:nth-last-child(1){
    padding:0;
  }


  #twitter-share{}
  #twitter-follow{}
  #facebook-like{}
  #line-share{}
  #line-like{}
  #eiga-com{}

}

@media (max-width: 768px) {

  .pc {
    display: none;
  }

  .sp {
    display: block;
  }


  html,body{
    font-size:13px;
    font-family: fot-tsukumin-pr6n, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
    /*font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";*/
    letter-spacing:1px;
    word-break: break-all;
    word-wrap: break-word;
  
    /*文字のアンチエイリアス設定*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;/*Firefox*/
  
    /*文字詰め*/
    font-feature-settings: "palt";
    
    color: #000;
    background: #fff;
  }
  
  
  img{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
  }
  
  
  .i1{ color: #0d326f; }
  .i1-bg{ background: #0d326f; }
  .i2{ color: #67af28; }
  .i2-bg{ background: #67af28; }
  .i3{ color: #f08300; }
  .i3-bg{ background: #f08300; }
  .i4{ color: #5bc2d9; }
  .i4-bg{ background: #5bc2d9; }
  .i5{ color: #856daf; }
  .i5-bg{ background: #856daf; }
  .i6{ color: #ffeb00; }
  .i6-bg{ background: #ffeb00; }
  .i7{ color: #e60039; }
  .i7-bg{ background: #e60039; }
  .i8{ color: #4d5c63; }
  .i8-bg{ background: #4d5c63; }
  .i9{ color: #b94f84; }
  .i9-bg{ background: #b94f84; }
  .i10{ color: #00516d; }
  .i10-bg{ background: #00516d; }
  .i11{ color: #954142; }
  .i11-bg{ background: #954142; }
  .i12{ color: #8cd9d9; }
  .i12-bg{ background: #8cd9d9; }
  .i13{ color: #ef8585; }
  .i13-bg{ background: #ef8585; }
  
  .i14{ color: #d7466b; }
  .i14-bg{ background: #d7466b; }
  .i15{ color: #91949c; }
  .i15-bg{ background: #91949c; }
  
  .i16{ color: #e62e8b; }
  .i16-bg{ background: #e62e8b; }
  .i17{ color: #c4d700; }
  .i17-bg{ background: #c4d700; }
  .i18{ color: #367bb9; }
  .i18-bg{ background: #367bb9; }
  
  
  .gothic{
    font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  }
  
  .old-gothic{
    font-family: "fot-tsukuaoldmin-pr6n", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
  }
  
  
  /*-------------------------------
  
  #header
  
  -------------------------------*/
  #header{
    background: rgba(255,255,255,0.7);
    width: 100%;
    height: 60px;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 100;
  }
  
  
  #ttl-logo{
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;

    img {
      width: 130px !important;
      height: 45px !important;
    }
  }
  
  
  #header-line-box{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
    width: 100%;
    height: 4px;
    transform: translateZ(1px);
  }
  
  
  .header-line{
    width: 10%;
    height: 4px;
  }
  
  
  #drawer-btn{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: #285ebb;
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 10px;
  }
  
  .tcon {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    height: 40px;
    transition: 0.3s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 40px;
    background: transparent;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
  }
  .tcon > * {
    display: block;
  }
  .tcon:hover, .tcon:focus {
    outline: none;
  }
  .tcon::-moz-focus-inner {
    border: 0;
  }
  
  .tcon-grid {
    padding: 1rem;
  }
  
  
  .tcon-grid .tcon-grid__item {
    width: 0.5rem;
    height: 0.5rem;
    background: #fff;
    color: #fff;
    transition: 0.3s;
    display: block;
    margin: 0 auto;
  }
  
  
  .tcon-grid.tcon-transform .tcon-grid__item {
    transform: rotate3d(0, 0, 1, -45deg) scale3d(0.8, 0.8, 0.8);
  }
  
  
  .tcon-grid--collapse .tcon-grid__item {
    box-shadow: -0.625rem 0, -0.625rem 0.625rem, 0.625rem 0, 0.625rem -0.625rem, 0 -0.625rem, -0.625rem -0.625rem, 0 0.625rem, 0.625rem 0.625rem;
  }
  
  
  .tcon-grid--collapse.tcon-transform .tcon-grid__item {
    box-shadow: -0.5rem 0, 0 0 transparent, 0.5rem 0, 0 0 transparent, 0 -0.5rem, 0 0 transparent, 0 0.5rem, 0 0 transparent;
  }
  
  
  .tcon-visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px; 
  }
  
  
  .tcon-visuallyhidden:active, 
  .tcon-visuallyhidden:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
  }
  
  
  /*-------------------------------
  
  #drawer-nav-container
  
  -------------------------------*/
  #drawer-nav-container{
    width: 100%;
    height: calc(100% - 60px);
    position: fixed;
    z-index: 100;
    top: 60px;
    left: 0px;
    background: rgba(40,94,187,0.98);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    display: none;
  }
  
  #g-nav {
    display: none;
  }

  .nav-contaner{
    padding: 10% 0;
  }
  
  
  .nav-box{
    width: 30%;
    margin: 1%;
    box-sizing: border-box;
    border: 1px solid #fff;
    border-radius: 10px;
    position: relative;
    background: url(../img/common/nav_btn_bg.png) repeat;
    background-size: 15px 15px;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform: scale(1.1) rotate(5deg);
    transform: scale(1.1) rotate(5deg);
  }
  
  
  .nav-box.show{
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
  }
  
  .nav-box:after{
    content: "";
    display: block;
    padding-top: 100%;
  }
  
  
  .nav-box-inner{
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center; 
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
  }
  
  
  .nav-btn{
    display: block;
    color: #fff;
    font-size: 12px;
    letter-spacing: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: calc(50% - 6px) 0;
    box-sizing: border-box;
  }
  
  
  /*li.nav-box:last-child .nav-btn {
    margin-top: -1.2em;
    line-height: 1.2;
  }*/
  
  
  .coming{
    opacity: 0.5;
    cursor: default;
  }
  
  
  .tw-btn{
    width: 64px;
    height: 64px;
    font-size: 38px;
    text-align: center;
    line-height: 54px;
    border-radius: 32px;
    color: #000;
    background: #fff;
    margin: 0 auto;
    padding: 0px;
  }
  
  
  .tw-btn-txt{
    text-align: center;
    font-size: 11px;
    color: #fff;
    padding: 0 0 10% 0;
  }
  
  
  .tw-btn-sub-txt{
    font-size: 14px;
    display: block;
    padding: 10px 0 5px 0;
  }
  
  
  /*-------------------------------
  
  #footer
  
  -------------------------------*/
  #footer{
    width: 100%;
    min-width: 100%;
    background-color: #000;
    position: relative;
    z-index: 1;
    padding: 50px 0 0;
  }
  
  
  
  #sns-container{
    padding: 20px 0;
    justify-content: center;
    align-items: center;
  }
  
  .share-btn{
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    font-size: 26px;
    /* text-align: center; */
    /* line-height: 44px; */
    /* overflow: hidden; */
    background: #000;
    color: #fff;
    box-sizing: border-box;
    margin: 0 8px;
    /* padding: 0 0 0 3px; */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  
  .share-twitter-btn{
    background: #000;
    border: 1px solid rgba(255, 255, 255, .2);
  }
  
  
  .share-facebook-btn{
    background: #3b5998;
  }
  
  
  .share-line-btn{
    background: #00c300;
  }
  
  
  .icon-line{
    font-size: 30px;
    /* display: block; */
    /* padding: 11px 0 0 0; */
  }
  
  
  #page-top-btn{
    width: 70px;
    height: 70px;
    background: #fff;
    border: 2px solid #a0a0a0;
    box-sizing: border-box;
    border-radius: 35px;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    top: -35px;
    left: calc(50% - 35px);
    cursor: pointer;
  }
  
  .page-top-icon {
    font-weight: 100;
  }
  
  #page-top-btn-inner{
    width: 60px;
    height: 60px;
    text-align: center;
    font-size: 30px;
    line-height: 60px;
    color: #a0a0a0;
    background: #fff;
    border: 1px solid #a0a0a0;
    box-sizing: border-box;
    border-radius: 30px;
    overflow: hidden;
    margin: 3px;
  }
  
  
  #footer-inner{
    /* padding: 50px 0 0 0; */
    flex-wrap: wrap;
  }

  #footer-nav-container {
    display: none;
  }
  
  
  #footer-logo{
  }
  
  #share-container,
  #footer-app-container,
  #footer-tw-container{
    margin: 0 0 30px 0;
    display: block;
    width: 100%;
  }
  #footer-tw-container{
    order: 1;
  }
  #share-container {
    order: 2;
  }
  
  
  #footer-nav-line0{
  }
  
  
  #share-txt,#footer-tw-ttl{
    color: #fff;
    font-size: 14px;
    position: relative;
    padding: 0 0 15px 0;
    text-align: center;
  }
  
  #footer-app-ttl{
    color: #fff;
    font-size: 14px;
    position: relative;
    padding: 0 0 15px 0;
    text-align: center;
  }
  
  
  #share-txt:after, #footer-tw-ttl:after,#footer-app-ttl:after{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background:-webkit-linear-gradient(left, transparent, #fff, transparent);
    background:linear-gradient(to right, transparent, #fff, transparent);
    position: absolute;
    z-index: 1;
    left: 0px;
    bottom: 0px;
  }
  
  #footer-app-spec {
    width: 90%;
    margin: 3% auto;
  }
  
  .footer-app-img {
    width: 100%;
  }
  
  #footer-app-download {
    text-align: center;
  }
  
  .footer-app-dl-img {
    height: 40px;
    width: auto;
  }
  
  .footer-nav-btn{
    display: block;
    color: #fff;
    padding: 20px 0 10px;
    font-size: 18px;
    width: 60%;
    margin: 0 auto;
  }
  
  
  #footer-bottom{
    width: 100%;
    border-top: 1px solid #1e1e1e;
  }
  
  
  #footer-banner-container{
    width: 100%;
    height: 110px;
    border-bottom: 1px solid #1e1e1e;
    box-sizing: border-box;
  }
  
  
  #cc{
    width: 100%;
    height: 38px;
    text-align: center;
    line-height: 38px;
    color: #fff;
    font-size: 12px;
  }
  
  /*-------------------------------
  
  #wrapper
  
  -------------------------------*/
  #wrapper{
    display:block;
    width:100%;
    min-width: 100%;
    position: relative;
    overflow: hidden;
  }
  
  
  /*-------------------------------
  
  #main
  
  -------------------------------*/
  #main{
    width: 100%;
    min-height: -webkit-calc(100vh - 485px);
    min-height: calc(100vh - 485px);
    min-width: 100%;
  }
  
  
  #contents{
  }
  
  
  .more-btn{
    width: 180px;
    height: 46px;
    background: #fff;
    border: 2px solid #a0a0a0;
    border-radius: 21px;
    box-sizing: border-box;
    margin: 30px auto 0 auto;
  }
  
  
  .more-btn-inner{
    display: block;
    width: 172px;
    height: 38px;
    background: #fff;
    border: 1px solid #a0a0a0;
    border-radius: 19px;
    margin: 2px;
    color: #a0a0a0;
    text-align: center;
    box-sizing: border-box;
    line-height: 32px;
    position: relative;
    font-size: 17px;
  }
  
  
  .more-btn-icon{
    position: absolute;
    z-index: 1;
    right: 10px;
    top: 0px;
  }
  
  
  /*-------------------------------
  
  ページャー
  
  -------------------------------*/
  .wp-pagenavi{
    display: table;
    margin: 0 auto;
  }

  .extend {
    border: none !important;
  }
  
  .pages,
  .nextpostslink,
  .previouspostslink{
    display: none;
  }
  
  
  .page,
  .current{
    width: 42px;
    height: 42px;
    display: inline-block;
    background: #fff;
    border: 2px solid #a0a0a0;
    border-radius: 21px;
    box-sizing: border-box;
    text-align: center;
    line-height: 36px;
    font-size: 17px;
    color: #000;
    margin: 0 5px;
    padding: 0 0 0 2px;
    position: relative;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  
  }
  
  
  .page:after,
  .current:after,
  .previouspostslink:after,
  .nextpostslink:after{
    content: "";
    display: block;
    position: absolute;
    width: 36px;
    height: 36px;
    border: 1px solid #a0a0a0;
    border-radius: 20px;
    box-sizing: border-box;
    top: 2px;
    left: 2px;
  }
  
  
  .current {
    background: #2bd0fe;
    color: #fff;
    border: 1px solid #fff;
  }
  
  
  .current:after {
    border: 1px solid #fff;
  }
  
  
  /*-------------------------------
  
  .bg-container
  
  -------------------------------*/
  .bg-container{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;
  }
  
  
  .bg-star{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    right: 0px;
  }
  
  .star{
    position: absolute;
    z-index: 0;
    top: 0px;
    left: 0px;
    width: 100%;
    height: auto;
  }
  
  
  .star0{
    -webkit-animation: 2.5s linear 0s infinite flashing ;
    animation: 2.5s linear 0s infinite flashing ;
  }
  
  
  .star1{
    -webkit-animation: flashing 2.3s 1s infinite linear;
    animation: flashing 2.3s 1s infinite linear;
  }
  
  
  .star2{
    -webkit-animation: flashing 3s 2s infinite linear;
    animation: flashing 3s 2s infinite linear;
  }
  
  .star3{
    -webkit-animation: flashing 2s 2.5s infinite linear;
    animation: flashing 2s 2.5s infinite linear;
  }
  
  
  @-webkit-keyframes flashing {
    0% {opacity: 1;}
    50% {opacity: 0.2;}
    100% {opacity: 1;}
  }
  
  
  @keyframes flashing {
    0% {opacity: 1;}
    50% {opacity: 0.2;}
    100% {opacity: 1;}
  }
  
  
  .sub-bg-container{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 0;
    top: 0px;
    left: 0px;
    background: url(../img/common/bg_pt.png) repeat;
    background-size: 100px 100px;
  }
  
  
  .sub-bg-star{
    position: absolute;
    z-index: 1;
    width: 1920px;
    height: 100%;
    top: 0px;
    left: calc((100% - 1920px)/2);
  }
  
  
  
  /*-------------------------------
  
  #preloader
  
  -------------------------------*/
  #preloader {
    background: rgba(255,255,255,0.96);
    width:100%;
    height:100%;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index:10000;
  }
  
  
  #preloader-inner{
    width: 280px;
    height: 150px;
    position: absolute;
    top: calc( 50% - 75px );
    left: calc( 50% - 140px );
    z-index: 1;
  }
  
  
  #preloader-ttl{
    display:block;
    position:absolute;
    top: 0%;
    left: 0%;
    z-index:3;
    width: 280px;
    height: 97px;
  }
  
  
  #preloaderAnime{
    width: 37px;
    height: 37px;
    position: absolute;
    bottom: 0px;
    left: calc(50% - 16px);
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
  }
  
  
  #preloaderAnime div{
    -webkit-animation: inherit;
    animation: inherit;
  }
  
  
  #preloaderAnime div:nth-child(1){
    left: 40px;
    top: 20px;
  }
  
  
  #preloaderAnime div:nth-child(2){
    left: 32.4698px;
    top: 35.6366px;
  }
  
  
  #preloaderAnime div:nth-child(3){
    left: 15.5496px;
    top: 39.4986px;
  }
  
  
  #preloaderAnime div:nth-child(4){
    left: 1.98062px;
    top: 28.6777px;
  }
  
  
  #preloaderAnime div:nth-child(5){
    left: 1.98062px;
    top: 11.3223px;
  }
  
  
  #preloaderAnime div:nth-child(6){
  left: 15.5496px;
  top: 0.501442px;
  }
  
  
  #preloaderAnime div:nth-child(7){
    left: 32.4698px;
    top: 4.36337px;
  }
  
  
  /*-------------------------------
  
  @banner
  
  -------------------------------*/
  #banner-container{
    
  }
  
  
  .banner-item{
    margin: 0 10px 0 0;
  }
  
  
  .banner-item:hover{
    opacity: 0.6;
  }
  
  
  .banner-img{
    width: 180px;
    height: auto;
  }
  
  
  /*-------------------------------
  
  @SNS
  
  -------------------------------*/
  #social-container{
    
  }
  
  
  .sns-btn{
    display:block;
    height:20px;
    padding:0 10px 0 0;
  }
  
  
  .sns-btn:nth-last-child(1){
    padding:0;
  }
  
  
  #twitter-share{}
  #twitter-follow{}
  #facebook-like{}
  #line-share{}
  #line-like{}
  #eiga-com{}

}

@media (max-width: 768px) {

}

/*--------------------------------------------------
リマケタグの隙間対策 
--------------------------------------------------*/
iframe[name='google_conversion_frame'] { height: 0 !important; width: 0 !important; line-height: 0 !important; font-size: 0 !important; margin-top: -13px;}


/*--------------------------------------------------------------

@modules

--------------------------------------------------------------*/
.en-font{ font-family:Georgia, "Times New Roman", Times, serif,Arial, Helvetica, sans-serif; }
.font10 { font-size:77%; }
.font11 { font-size:85%; }
.font12 { font-size:93%; }
.font13 { font-size:100%; }
.font14 { font-size:108%; }
.font15 { font-size:116%; }
.font16 { font-size:124%; }
.font17 { font-size:131%; }
.font18 { font-size:139%; }
.font19 { font-size:147%; }
.font20 { font-size:154%; }
.font21 { font-size:162%; }
.font22 { font-size:169%; }
.font23 { font-size:177%; }
.font24 { font-size:185%; }
.font25 { font-size:192%; }
.font26 { font-size:200%; }


/*-------------------------------

@flex

-------------------------------*/
.flex{
	display: -webkit-flex; /* Safari */
	display: flex;
}


.flex-wrap{
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap: wrap;
}


.flex-center{
  -webkit-justify-content: center; /* Safari */
  justify-content: center;
}

.flex-left{
  -webkit-justify-content: flex-start; /* Safari */
  justify-content: flex-start;
}

.flex-right{
  -webkit-justify-content: flex-end; /* Safari */
  justify-content: flex-end;
}


/*----------------------------------------------

clearfix

-----------------------------------------------*/
.clearfix {}
.clearfix:after{
	content : '';
	display : block;
	clear : both;
}


/*----------------------------------------------

float

-----------------------------------------------*/
.float-left{ float: left; }
.float-right{ float: right; }
.clear{ clear: both; }


/*----------------------------------------------

align

-----------------------------------------------*/
.align-right{ text-align:right; }
.align-left{ text-align:left; }
.align-center{ text-align:center; }


/*----------------------------------------------

letter-spacing

-----------------------------------------------*/
.space-none{ letter-spacing:0; }
.space-narrow{ letter-spacing:0.1em; }
.space-normal{ letter-spacing:2px; }


/*----------------------------------------------

a

-----------------------------------------------*/
a{text-decoration:none;}
a:link{}
a:visited{}
a:hover{}
a:active{}


/*----------------------------------------------

font-weight

-----------------------------------------------*/
.bold{ font-weight:bold;}


/*----------------------------------------------

display

-----------------------------------------------*/
.none{ display:none;}
.block{display:block;}


/*----------------------------------------------

position

-----------------------------------------------*/
.relative{position:relative;}
.margin-auto{ margin:0 auto;}


/*----------------------------------------------

guard

-----------------------------------------------*/


/*----------------------------------------------

.pr-footer
BNEの共通フッタ

-----------------------------------------------*/
.pr-footer {
    position: relative;
    z-index: 2;
}