@charset "utf-8";
/*************************************************
ユーザー画面 個別css 230901
  max-width: 414px
  max-width: 768px
  max-width: 1024px
  max-width: 1366px
**************************************************/

/*************************************************
  共通
**************************************************/
.list-block{padding: 3%;overflow: auto;height: 97%;}
.h2{font-size: 2rem/*32px*/;font-weight: 400;}

@media screen and (max-width: 1024px) {
  .h2{font-size: initial;}
}

/*************************************************
  select-login / ログイン会員登録選択
**************************************************/

.section-select-login .service-title{width: 44%;margin:0 auto;margin-bottom: 5%;}

@media screen and (max-width: 1024px) {
  .section-select-login .service-title{width: 30%;}
}

/*************************************************
  login //ログイン・再発行
**************************************************/
.login-block{padding: 1.5em 5.4% 14px;height: 100%;}

.login-block .item-block{height: 100%;overflow: auto;}

.login-block .item-block .login-id-block,
.login-block .item-block .login-pass-block{
  width: 100%;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;
  padding: 6px;/*focus時のボーダーがはみ出るのを防ぐ*/
}

.login-block .item-block .item label{
  width: 10em;
  font-weight: bold;color: #fff;font-size: 2.00rem;
  display: flex;align-items: center;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, .3);
}
.login-block .item-block .item > *:not(.form-label){width: calc(100% - 15em);}
.login-block .item-block .item input{padding: 0.65em;height: 2.5em;}
.login-block .login-btn-block{margin: 1em auto 0;}
.login-para-block{text-align: center;}

.terms{margin: 1em 0;text-align: center;}
.terms a{text-decoration: underline;}

@media screen and (max-width: 1366px) {
  .login-block .item-block .item label{font-size: 1.375rem;/*22px*/margin-bottom: 0.5em;}
  .login-block .item-block .login-id-block,
  .login-block .item-block .login-pass-block{max-width: 600px;margin: 0 auto;}
  .login-block .item-block .item > *:not(.form-label){width: 100%;}
}

@media screen and (max-width: 768px) {
  .login-block .item-block{max-width: 600px;margin: 0 auto;}
  .login-block .item-block .login-id-block,
  .login-block .item-block .login-pass-block{flex-direction: column;align-items: flex-start;}
}


/*************************************************
  home
**************************************************/
#home .container{
  display: flex;align-items: center;
  justify-content: center;
  overflow: hidden;
}
#home .header{height: auto;padding: 2%;}

#home .header-bottom-box{
  position: absolute;right: 2%;bottom: -140px;
  display: flex;flex-direction: column;
  max-width: 280px;width: 30%;min-width: 12em;
}
#home .btn-line-friend{margin-top: 10px;}
#home .btn-line-friend::after{top: auto;bottom: 0.8em;width: 0.8em;}

@media screen and (max-width: 1366px) {
  #home .header-bottom-box{bottom: -130px;}
}
@media screen and (max-width: 768px) {
  #home .header-bottom-box{bottom: -120px;}
}

#home .home-main{
  /*display: grid;grid-template-rows: calc((647 / 938) * 100%) calc((291 / 938) * 100%);*/
  height: 100%;
  display: flex; align-items: center;
  flex-direction: column;
  position: relative;
}
#home .home-main::before{
  content:"";
  display: inline-block;
  width: 100vw;
  height: 100%;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: absolute;
  left: 0;bottom: -5%;
  background: url(../../common/img/bg_cloud-b.png) center bottom no-repeat;
  background-size: 120%;
}

#home .h1-block{height: auto;text-align: center;position: absolute;top: 49%;left: 0; right: 0;margin: 0 auto; width: calc((300 / 1200) * 100%);}
#home .home-btn-block{position: absolute;top: 70%;left: 0; right: 0;}
#home .copyright{font-size: 1.125rem;/*18px*/position: absolute;bottom: 10px;}

/*未契約時*/
#home .foot-text{position: absolute;top: 83%;left: 0;right: 0;text-align: center;margin-top: 0;}
#home .foot-text a.note-text{color: #f00;text-decoration: underline;}

/*charactor*/
#home .anim-image{position: absolute;}
#home .anim-image1{/*ドーナツ君*/
  left: calc((163 / 1200) * 100%);
  top: 5vw;
  width: calc((179 / 1200) * 100%);
}
#home .anim-image2{/*ミカン君*/
  left: calc((777 / 1200) * 100%);
  top: 2vw;
  width: calc((206 / 1200) * 100%);
}
#home .anim-image3{/*ファイア君*/
  left: calc((499 / 1200) * 100%);
  top: 2vw;
  width: calc((156 / 1200) * 100%);
}
#home .anim-image4{/*ラッパ君*/
  left: calc((130 / 1200) * 100%);
  bottom: 2vw;
  width: calc((200 / 1200) * 100%);
}
#home .anim-image5{/*シンバル君*/
  left: calc((0 / 1200) * 100%);
  bottom: 35%;
  width: calc((200 / 1200) * 100%);
}
#home .anim-image6{/*気球*/
  left: calc((861 / 1200) * 100%);
  top: 30%;
  width: calc((393 / 1200) * 100%);
}


/*************************************************
  account / せってい
**************************************************/
#account .section-account{height: 100%;}
#account .list-block .detail-block{border-bottom: 1px solid var(--or-base-text-color);}
#account .list-block .detail-block:not(:last-child){margin-bottom: 1em;}
#account .h2-block{display: flex;}
#account .h2-block .h2{padding-right: 2em;}
#account .item-block{padding: 1em 0 1em 1em;display: flex;flex-wrap: wrap;gap: 0.5em;}
#account .item-block > *{margin-bottom: 0.5em;}
#account .item-block dt{width: 7em;}
#account .item-block dd{width: calc(((100% - 7em) / 2) - 1em);}
#account .account-block .item-block dt{width: 8em}
#account .account-block .item-block dd{width: 35%;}
#account .account-block .item-block dd:nth-child(3n){width: calc(100% - 35% - 8em - 1em);}
#account .h2-block .btn-block{width: auto;}
#account .delete-block.item-block{justify-content: flex-end;font-size: 75%;text-decoration:underline;}

#account .modal-content .new .table-block{height: 65%;margin-bottom: 1em;}

#account .accont-foot-text{flex-direction: column;width: 20.5em;margin-left: auto;text-align: right;}
#account .accont-foot-text > *{margin: 0;}

@media screen and (max-width: 1366px) {
  #account .h2{font-size: inherit;}
}
@media screen and (max-width: 768px) {
  #account .account-block .item-block{flex-wrap: wrap;}
  #account .account-block .item-block dd{width: 30%;}
  #account .account-block .item-block dd:nth-child(3n){width: calc(100% - 30% - 8em - 1em);}
}
@media screen and (max-width: 414px) {
  #account .item-block{flex-direction: column;gap: 0;}
  #account .item-block > * {width: 100% !important;}
  #account .item-block > *:not(:nth-child(3n)){margin: 0;}
  #account .item-block dd:nth-child(3n){margin: 0.5em 0 1.5em 0;}

  #account .h2-block{flex-direction: column;gap: 1em;}
}


/*************************************************
  account-delete / アカウント削除
**************************************************/
#account-delete .list-block{text-align: center;}
#account-delete .h2{margin-bottom: 1em;}
#account-delete .attention-list{margin-left: 15%;margin-right: 15%;}

#account-delete .modal-container{width: 65%;}
#account-delete .modaldetail{padding: 3em 2em;}

@media screen and (max-width: 768px) {
  #account-delete .attention-list{margin-left: 5%;margin-right: 5%;}
}

/*************************************************
  account /　メール変更・パスワード変更
**************************************************/
.account-change-block{padding-top: 5%;padding-bottom: 5%;}
.account-change-block .item-block{display: flex;flex-direction: column;align-items: center;width: 80%;margin: 0 auto;}
.account-change-block .item-block label{width: 58%;display: inline-block;}
.account-change-block .item{display: flex;justify-content: center;width: 100%;margin-bottom: 1em;}
.account-change-block .item > div{width: 41%;}

@media screen and (max-width: 1024px) {
  .account-change-block .item-block{max-width: 550px;}
}
@media screen and (max-width: 768px) {
  .account-change-block .item-block{width: 100%;}
  .account-change-block .item{flex-direction: column;}
}


/*************************************************
  アプリ選択画面
**************************************************/
@media screen and (max-width: 1024px) {
  #select-app .select-app-items .item:not(:last-child){margin-bottom: 20px;}

  #select-app .select-app-items .item{position: relative;}
  #select-app .select-app-items .item > a{padding-top: 1em;padding-bottom: 1em;}
  #select-app .select-app-items .app-img{max-width: 160px;width: 100%;position: absolute;left: 1em;top: 1em;}

  #select-app .select-app-items .app-name,
  #select-app .select-app-items .sv-name{margin-left: calc(160px + 1em);text-align: left;}
  #select-app .select-app-items .app-name{font-size: 1.25rem;/*20px*/margin-bottom: 0;}
}

@media screen and (max-width: 768px) {
  .select-app-items{margin-top: 0;}
  #select-app .select-app-items .item{height: auto;}
  #select-app .select-app-items .item .app{display: flex;flex-direction: column;}
  #select-app .select-app-items .app-img{position: static;max-width: initial;margin-bottom: 0.5em;order: 1;}
  #select-app .select-app-items .sv-name{margin-left: 0;order: 2;}
  #select-app .select-app-items .app-name{margin-left: 0;margin-bottom: 0;order: 3;}
}

/*************************************************
  サブスクリプション選択画面
**************************************************/
#subscription .select-app-items{height: auto;}
#subscription .select-app-items .item{width: 32%;position: relative;}
#subscription .select-app-items .item .badge{
  position: absolute;left: -0.5em;top: -0.5em;
  text-align: center;color: #fff;
  background-color: #f00;
  padding: 0 1em;
}
#subscription .select-app-items .item .badge.orange{
  background-color: var(--or-primary-color);
}

@media screen and (max-width: 1366px){
  #subscription .select-app-items .item .badge{font-size: 1.375rem;/*22px*/}
  .select-app-items .sub-kind{font-size: 1.375rem;/*22px*/}
}
@media screen and (max-width: 1024px) {
  #subscription .select-app-items{height: auto;} 
  #subscription .select-app-items .item{width: 100%;}
  .select-app-items .sub-kind{font-size: 1.25rem;/*20px*/}
  .select-app-items .note{font-size: initial;}
}


/*************************************************
  サブスクリプション完了画面
**************************************************/
.subscription-complete .section-subscription > div{padding: 3vw 10vw 10vw;text-align: center;}
.subscription-complete .h1-block{font-weight: bold;margin-bottom: 1em;}
.subscription-complete .btn-block{margin-top: 2em;}
.subscription-complete .img{position: absolute;}
.subscription-complete .img1{right: -2%;top: 0;width: 20%;}

@media screen and (max-width: 768px) {
  .subscription-complete .section-subscription > div{padding: 15vw;}
  .subscription-complete .img1{right: calc(50% - 10%);top: -8vw;width: 20%;}
}


/*************************************************
  あそびかた
**************************************************/

#howtoplay .howtoplay-main{background-color: #fff;font-size: 1.375rem;/*22px*/}
#howtoplay .inner-wrapper{display: flex;height: 100%;}
#howtoplay .left-navi{width: 17em;background-color: #fff;height: 100%;}
#howtoplay .section-howtoplay{flex: 1;}

#howtoplay .btn-menu-open{display: none;}
#howtoplay .navi-lists{display: flex;flex-direction: column;padding-bottom: 5em;}
#howtoplay .navi-lists > .item > .navi-title{background-color: #eee;padding: 1em;}
#howtoplay .navi-lists .navi-lists-c1 > .item{padding: 0.5em;border-bottom: 1px dashed #ccc;display: flex;align-items: center;}
#howtoplay .navi-lists .navi-lists-c1 > .item::before{
  content: "";display: inline-block;
  width: 1.2em;height: 1.2em;
  margin-right: 5px;
}
#howtoplay .navi-lists .navi-lists-c1 > .item.is-btn-active::before{
  background: url(../../common/img/ico_star.png) center no-repeat;
  background-size: contain;
}
#howtoplay .section-howtoplay > .inner-wrapper{padding: 2em 2.5em;}
#howtoplay .section-howtoplay .tab-contents{width: 100%;max-width: 960px;margin: 0 auto;overflow-y: scroll;}
#howtoplay .section-content{padding: 1em;}
#howtoplay .section-title{padding: 0.5em;font-weight: bold;font-size: 1.625rem;/*26px*/background-color: var(--or-key-color-pale)}
#howtoplay .section-howtoplay p:not(:last-child){margin-bottom: 1em;}
#howtoplay .section-howtoplay .image-block,
#howtoplay .section-howtoplay .setumei-block{font-size:1.125rem;/*18px*/display: flex;justify-content: space-between;width: 95%;margin: 0 auto;flex-wrap: wrap;}
#howtoplay .section-howtoplay .image-block > *{width: 49%;}
#howtoplay .section-howtoplay .setumei-block > *{width: 48%;}
#howtoplay .section-howtoplay .image-block > *:nth-child(2n):not(:last-child),
#howtoplay .section-howtoplay .setumei-block > *:nth-child(2n):not(:last-child){margin-bottom: 2em;}
#howtoplay .section-howtoplay h3.title{font-weight: bold;margin-bottom: 1em;}


#howtoplay .suisho-block .item-title{width: 12em;}

#howtoplay .section-howtoplay .tab-terms,
#howtoplay .section-howtoplay .tab-stlaw{overflow-y:hidden;}

#howtoplay .table-block-terms,
#howtoplay .table-block-specific{width: 100%;height: calc(100% - 2em);padding: 1em;}

@media screen and (max-width: 1366px) {
  #howtoplay .howtoplay-main{font-size: 1.25rem;/*20px*/}
  #howtoplay .section-howtoplay > .inner-wrapper{padding: 1em;}
  #howtoplay .section-title{font-size: 1.375rem;/*22px*/}
}
@media screen and (max-width: 768px) {
  #howtoplay .navi-lists{overflow-y: scroll;height: 100%;}
  #howtoplay .left-navi{position: fixed;left: -90%;z-index: 1;transition: all 0.2s;width: 90%;}
  #howtoplay .left-navi.open{left: 0;}
  #howtoplay .btn-menu-open{
    display: inline-flex;align-items: center;
    width: 1.5em;height: 2em;
    padding: 0.2em 0.2em 0.2em 0;
    background-color: var(--or-primary-color-pale);
    position: absolute;right: -1.5em;top: 0;
    cursor: pointer;
  }
  #howtoplay .btn-menu-open.left{justify-content: flex-end;}
}
@media screen and (max-width: 414px) {
  #howtoplay .section-howtoplay > .inner-wrapper{padding-top: 3%;}
  #howtoplay .section-content{padding: 3% 0;}
  #howtoplay .section-howtoplay .image-block,
  #howtoplay .section-howtoplay .setumei-block{flex-direction: column;}
  #howtoplay .section-howtoplay .image-block > *,
  #howtoplay .section-howtoplay .setumei-block > *{width: 100%;}
}