@charset "utf-8";

/*
============================ 1ANNIVERSARY CSS ============================
*/

@media (max-width: 768px) {
  #wrap {
    overflow: hidden;
  }
  #logo {
    width: 70%;
    top: calc(45% - 50px/2);
    left: calc(50% - 70%/2);
  }
  svg {
    height: 120px;
  }
  .cenLeft {
    text-align: left;
  }
  
  .tama {
    background: url("../img/ball_bk.png") 20px 0 repeat;
    background-size: 130% auto;
  }
  .posiRelative {
    width: 100%;
  }

  #kv {
    background: #B292C3 url("../img/wave01.png") 0 bottom repeat-x;
    padding: 100px 0 0;
  }
  #kv > img {
    width: 100%;
  }

  svg {
    display: block;
    height: 170px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
  }

  #kvTit01 {
    width: 88%;
    top: 180px;
  }
  #kvTit02 {
    width: 60%;
    top: 283px;
  }
  #kvTit03 {
    width: 54%;
    top: 325px;
  }
  .read {
    font-size: 1.5rem;
    margin: 0 auto 80px;
    padding: 20px 10px 0;
    width: 100%;
  }
  .bg01 {
    padding: 0 0 140px;
  }
  .bg02 {
    padding: 100px 0 100px;
  }
  .bg03 {
    padding: 100px 0 100px;
  }
  .bg04 {
    padding: 50px 0 140px;
    margin: 0 auto 30px;
  }
  .bg05 {
    padding: 20px 0 0;
    margin: 0 0 30px;
  }
  .bg06 {
    padding: 10px;
    margin: 0 auto 30px;
    width: 90%;
  }
  .bg07 {
    padding: 10px;
    margin: 0 auto 30px;
    width: 90%;
  }
  #gift03 {
    z-index: 5;
  }
  .bg08 {
    padding: 10px 20px;
    width: 90%;
  }
  .boxTop {
    width: 90%;
  }
  .boxBottom {
    width: 90%;
    margin: 0 auto 30px;
  }
  .boxBottom img {
    vertical-align: top;
  }
  .bgW {
    padding: 20px 13px;
  }
  .tit01 {
    width: 96%;
    margin: 80px auto 15px;
  }
  .tit02 {
    width: 86%;
    margin: 0 auto 15px;
  }
  .tit03 {
    width: 75%;
    margin: 0 auto 15px;
  }
  .tit04 {
    width: 94%;
    margin: 0 auto 15px;
  }
  .tit05 {
    width: 100%;
    margin: 0 auto 15px;
  }
  .tit06 {
    width: 70%;
    margin: 0 auto 15px;
  }
  .tit07 {
    width: 90%;
    margin: 0 auto 15px;
  }
  .tit08 {
    width: 90%;
    margin: 0 auto 15px;
  }
  .tit09 {
    width: 100%;
    margin: 0 auto 15px;
  }
  .tit10 {
    width: 80%;
    margin: 0 auto 15px;
  }
  .tit11 {
    width: 90%;
    margin: 0 auto 15px;
  }
  .tit12 {
    width: 100%;
    margin: 0 auto 15px;
  }
  .tit13 {
    width: 90%;
    margin: 0 auto 15px;
  }
  .tit14 {
    width: 90%;
    margin: 0 auto 15px;
  }
  .tit15 {
    width: 90%;
    margin: 0 auto 15px;
  }
  .tit16 {
    width: 100%;
    margin: 0 auto 15px;
  }
  .tit17 {
    width: 70%;
    margin: 0 auto 15px;
  }
  .tit18 {
    width: 100%;
    margin: 0 auto 15px;
  }
  .tit19 {
    width: 80%;
    margin: 0 auto 15px;
  }
  .read02 {
    font-size: 1.5rem;
    margin: 0 auto 20px;
  }
  .ribon {
    margin: 0 auto 15px;
  }
  #anchor01 dl.ribon {
    width: 70%;
  }
  #anchor01 .ribon tbody,
  #anchor01 .ribon tbody tr {
    display: inherit;
    justify-content: inherit;
    align-items: inherit;
  }
  #anchor01 .ribon tr:first-child td {
    padding-right: inherit;
  }
  
  .ribon dt,
  .ribon th {
    margin: 5px 10px 5px 0;
    font-size: 1.4rem;
    padding: 7px;
    white-space: nowrap;
  }
  .ribon dd,
  .ribon td {
    font-size: 1.6rem;
    padding: 8px 6px 6px;
    white-space: normal;
  }
  
  #home01 .ribon.blue,
  #anchor03 .ribon.blue {
    margin: 0 auto 10px;
  }
  #home02 .ribon.blue {
    margin: 0 auto 10px;
  }
  #gift04 .ribon {
    margin: 0 0 10px;
  }
  #gift05 .ribon {
    margin: 0 0 10px;
  }
  #anchor04 .ribon {
    margin: 0 auto 10px;
  }
  #home03 .ribon.blue {
    margin: 0 auto 10px;
  }
  #home03 .ribon.blue dd:nth-of-type(1),
  #home03 .ribon.blue td:nth-of-type(1) {
    margin-right: 10px;
  }
  .ribon.blue dt,
  .ribon.blue th {
    height: 30px;
  }
  .ribon dt.short,
  .ribon th.short {
    padding: 7px 0 7px 7px;
  }
  #anchor04 .ribon dd,
  #anchor04 .ribon td {
    width: auto;
  }
  #event04 .ribon {
    margin: 0 auto 10px;
  }
  #gift04 .ribon dd,
  #gift04 .ribon td {
    width: inherit;
  }
  #gift05 .ribon dd,
  #gift05 .ribon td {
    width: 70%;
  }
  .img01 {
    width: 90%;
    margin: 0 auto 50px;
  }
  .profileBox {
    background: url("../img/sp/profile_bg.png") 0 0 repeat-y;
    background-size: 100% auto;
    margin: 0 auto;
    padding: 10px 25px 0;
    width: 90%;
    align-items: center; /* 垂直方向の揃え */
    position: relative;
  }
  .profileTop,
  .profileBottom {
    width: 90%;
  }
  .profileBox div {
    width: inherit;
  }
  .profileBox div.profileImg {
    width: 28%;
    margin: 0 0 10px;
  }
  .profileBox div.profileName {
    width: 67%;
    margin: 0 0 10px;
  }
  .profileName img {
    width: 80%;
    margin: 5px 0 0;
  }
  .leftCen {
    text-align: center;
    font-size: 1.6rem;
    margin: 0;
  }
  .taishoBox {
    margin: 0 auto 10px;
    width: 100%;
  }
  .taishoBox .th {
    padding: 7px;
    font-size: 1.6rem;
  }
  .taishoBox .td {
    padding: 10px 10px;
  }
  .taishoBox .sTh {
    padding: 3px 10px;
    margin: 0 5px 5px 0;
    width: 100%;
    font-size: 1.6rem;
  }
  .taishoBox .sTd {
    padding: 5px;
    margin: 0 0 5px;
    width: 100%;
    font-size: 1.6rem;
  }
  .btnSoon {
    width: 80%;
    padding: 8px 10px;
    font-size: 1.6rem;
  }

  .coution {
    font-size: 1.3rem;
    white-space: nowrap;
  }

  #pop02 {
    top: -200px;
    width: 80%;
  }
  #pop03 {
    top: -240px;
    width: 100%;
  }
  #pop04 {
    top: -120px;
    width: 100%;
  }
  #pop05 {
    bottom: -40px;
    width: 100%;
  }

  #pop07 {
    display: block;
    position: absolute;
    top: -160px;
    left: 0;
    right: 0px;
    margin: 0 auto;
    width: 85%;
    z-index: 4;
  }
  #pop08 {
    display: none;
  }
  #pop09 {
    display: none;
  }
  #pop10 {
    bottom: 510px;
    right: 0;
    width: 120px;
  }
  #pop11 {
    top: -50px;
    right: -20px;
    width: 70px;
  }
  #pop12 {
    top: 60px;
    left: -30px;
    width: 100px;
  }
  
  #pop13 {
    top: 300px;
    left: -40px;
    width: 100px;
  }
  #pop14 {
    top: 180px;
    right: -40px;
    width: 80px;
  }
  
  #pop15 {
    top: 120px;
    left: inherit;
    right: -30px;
    width: 80px;
  }
  #pop16 {
    top: 140px;
    right: inherit;
    left: 0px;
    width: 70px;
  }
  
  #pop17 {
    top: 140px;
    left: -50px;
    width: 110px;
  }
  #pop18 {
    top: 480px;
    right: -50px;
    width: 100px;
  }
  
  #pop19 {
    top: 100px;
    left: -20px;
    width: 90px;
  }
  #pop20 {
    top: 160px;
    right: -40px;
    width: 100px;
  }
  
  #pop21 {
    top: 320px;
    right: inherit;
    left: -20px;
    width: 90px;
  }
  #pop22 {
    top: 540px;
    left: inherit;
    right: -30px;
    width: 90px;
  }
  
  #pop23 {
    top: 380px;
    left: -20px;
    width: 84px;
  }
  #pop24 {
    top: 190px;
    right: -40px;
    width: 100px;
  }
  
  #pop25 {
    top: 260px;
    left: 0px;
    width: 80px;
  }
  #pop26 {
    top: 400px;
    right: -20px;
    width: 80px;
  }
  
  #pop27 {
    display: none;
  }
  #pop28 {
    top: 80px;
    right: -40px;
    width: 120px;
  }
  
  #pop29 {
    top: -50px;
    left: -40px;
    width: 120px;
  }
  #pop30 {
    top: 600px;
    right: -40px;
    width: 100px;
  }
  #pop31 {
    display: block;
    position: absolute;
    z-index: 4;
    top: -20px;
    right: 10px;
    width: 80px;
  }
  #pop32 {
    display: block;
    position: absolute;
    z-index: 4;
    top: -50px;
    right: -30px;;
    width: 80px;
  }
}