#main-inner{font-family:"Yuji Syuku", serif;}
@media screen and (min-width:1301px){#main-inner{padding-top:180px !important;}}
@media screen and (min-width:981px) and (max-width:1300px){#main-inner{padding-top:15% !important;}}
#main-inner .btn-submit{max-width:330px;}

/*
================================================================================================================
汎用
================================================================================================================
*/
#user{
display:flex;
position:relative;
width:100%;
max-width:588px;
aspect-ratio:588/90;
color:#110e06;
background-image:url(../img/mypage/bg_user.png);
background-size:100% auto;
background-position:center;
background-repeat:no-repeat;
letter-spacing:-2px;
font-size:22px;
justify-content:center;
align-items:center;
margin:0 0 20px auto;}
#user ul li:nth-child(1)::before{content:"KONAMI ID：";}
#user ul li:nth-child(2)::before{content:"メモリーカード：";}
#user ul li + li{margin-top:5px;}
#user ul li.usercode.nodata span{font-size:clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);}
@media screen and (max-width:800px){#user{font-size:16px; margin:0 auto 20px;}}
@media screen and (max-width:640px){#user{background-size:150% auto; padding:10px 0;}}
@media screen and (max-width:480px){#user{font-size:14px;}}

/*
=========================
サブメニュー
=========================
*/
#menu-profile{display:flex; position:relative; filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); transform:translateZ(0); margin:20px auto; z-index:3;}
#menu-profile > *{
display:flex;
position:relative;
width:20%;
color:#fff;
font-size:22px;
text-align:center;
text-shadow:0 0 4px #000 , 0 0 4px #000 , 0 0 4px #000;
justify-content:center;
align-items:center;
transition:.2s ease-in-out;
cursor:pointer;}
#menu-profile > *:not(.selected){filter:brightness(50%);}
#menu-profile > *:hover{filter:brightness(100%);}

@media screen and (max-width:1100px){#menu-profile > *{font-size:18px;}}
@media screen and (max-width:980px){#menu-profile > *{font-size:16px;}}
@media screen and (min-width:801px){
#menu-profile > *{
width:21%;
aspect-ratio:265/95;
background-image:url(../img/mypage/bg_menu.png);
background-size:100% auto;
background-position:center;
background-repeat:no-repeat;}
#menu-profile > * + *{margin-left:-1%;}}
@media screen and (max-width:800px){#menu-profile > *{background:linear-gradient(135deg, #ffca43 0%,#e2a919 100%); padding:10px 0;}}
@media screen and (max-width:640px){#menu-profile{width:calc(100% + 20px); margin:10px auto 10px -10px;}}
@media screen and (max-width:600px){
#menu-profile{flex-wrap:wrap;}
#menu-profile > *{width:calc((100% / 3) - 5px); min-height:50px; padding:0; margin:2.5px;}}
@media screen and (max-width:420px){#menu-profile > *{width:calc(50% - 5px);}}

/*
================================================================================================================
プレー情報・プロフィール編集
================================================================================================================
*/
#profile{width:100%; max-width:1200px; margin:0 auto;}
#profile #status{position:relative; pointer-events:none;}
@media screen and (min-width:981px){#profile #status{display:flex; justify-content:center; align-items:center;}}

/*見出し*/
#profile #status > p{position:relative; display:flex; color:#ffce00; font-size:24px; justify-content:center; align-items:center; z-index:3;}
@media screen and (min-width:981px){#profile #status > p{width:16%; max-width:130px; aspect-ratio:133/336; background-image:url(../img/mypage/profile/bg/title.png); background-size:100% auto; writing-mode:vertical-rl;}}
@media screen and (max-width:980px){#profile #status > p{width:100%; max-width:810px; background-image:url(../img/mypage/profile/bg/title_sp.png); background-size:100% auto; padding:10px; margin:10px auto 0;}}
@media screen and (max-width:480px){#profile #status > p{font-size:18px; padding:5px;}}

/*
=========================
プロフィールカード
=========================
*/
#profile #status > .inner{
  position:relative; width:84%; max-width:810px; aspect-ratio:81/50; color:#fff; font-family:taw-takedajyoato, "Yuji Syuku", sans-serif;
  &::before{
    display:block;
    content:"";
    position:absolute;
    top:-5%;
    left:-5%;
    width:110%;
    height:110%;
    background-image:url(../img/mypage/profile/bg/eff.webp);
    background-size:100% auto;
    background-position:center;
    background-repeat:no-repeat;
    z-index:1;
  }
  > *{position:absolute; width:100%; z-index:3;}
  #frame{position:relative !important; max-width:810px; }/*フレーム*/
  #chara{top:2%; left:4%;}/*お気に入りバトルカード*/
  #title{top:21%; right:10%; width:43%;}/*称号*/
  #name{
    top:42%; right:8%; width:45%; font-size:clamp(1.875rem, 0.542rem + 6.67vw, 3.875rem); text-align:center; line-height:100%; letter-spacing:-10px;
    p{transform:skew(-20deg) scaleX(.9); filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 4px #000) drop-shadow(0 0 4px #000) drop-shadow(0 0 10px #000);}
  }
  /*親愛度*/
  #heart-icn{bottom:12%; left:5.5%; width:13%; aspect-ratio:11/12; background-image:url(../img/mypage/profile/icn/heart.png); background-size:100% auto;}
  #heart-num{
    bottom:9%; left:1.5%; width:20%; font-size:clamp(1rem, 0.167rem + 4.17vw, 2.25rem); text-align:center; letter-spacing:-2px; z-index:4;
    p{transform:skew(-20deg); filter:drop-shadow(0 0 1px #000)  drop-shadow(1px 1px 1px #000) drop-shadow(-1px -1px 1px #000) drop-shadow(1px -1px 1px #000) drop-shadow(-1px 1px 1px #000);}
  }
  #heart-num[data-num="100"]{
    bottom: 8%;
    p{
    background: linear-gradient(90deg, #ffe958, #ff8a18);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 1px 0 #2d1a00) drop-shadow(-1px -1px 0 #2d1a00) drop-shadow(-1px 1px 0 #2d1a00) drop-shadow(1px -1px 0 #2d1a00) drop-shadow(0 0 2px #2d1a00) drop-shadow(0 0 2px #2d1a00);
    line-height: 100%;
    }
  }

  /*バッジ・勲章*/
  .badge{
    bottom:6%; width:21.5%; transition:.2s ease-in-out;
    &.slot01{right:37%; z-index:6;}
    &.slot02{right:20%; z-index:5;}
    &.slot03{right:3%; z-index:4;}
    &::before{display:block; content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-size:100% auto;}
    &.battle01::before{background-image:url(../img/mypage/badge/battle01.webp);}
    &.battle02::before{background-image:url(../img/mypage/badge/battle02.webp);}
    &.support01::before{background-image:url(../img/mypage/badge/support01.webp);}
    &.support02::before{background-image:url(../img/mypage/badge/support02.webp);}
  }
}
@media screen and (max-width:980px){#profile #status > .inner{width:100%; margin:0 auto;}}
@media screen and (max-width:800px){#profile #status > .inner{width:calc(100% + 60px); margin-left:-30px;}}
@media screen and (max-width:600px){#profile #status > .inner #name{letter-spacing:-6px;}}
@media screen and (max-width:480px){#profile #status > .inner #heart-num{bottom:7.5%;}}

/*
=========================
所持アイテム
=========================
*/
#profile #item{
  position:relative; display:flex; color:#fff; max-width:800px; justify-content:space-between; align-items:center; margin:0 auto; z-index:3;
  li{
    position:relative; width:calc(50% - 10px); background-image:url(../img/mypage/profile/bg/item.png); background-size:100% 100%; padding:20px 40px 20px 110px;
    &::before{
      display:block;
      content:"";
      position:absolute;
      top:calc(50% - 40px);
      left:20px;
      width:80px;
      height:80px;
      background-image:url(../img/mypage/profile/icn/coin.png);
      background-size:100% auto;
      background-position:center;
      background-repeat:no-repeat;
    }
    &:nth-child(2)::before{background-image:url(../img/mypage/profile/icn/ball.png);}
    p{
      position:relative;
      font-size:22px;
      letter-spacing:-1px;
      text-align:right;
      padding-left:100px;
      filter:drop-shadow(0 0 2px #2a1200) drop-shadow(0 0 2px #2a1200) drop-shadow(0 0 10px #2a1200);
      transform:translateZ(0);
      &::before{position:absolute; top:0; left:0; letter-spacing:1px;}
    }
    &:nth-child(1) p::before{content:"所持隊貨";}
    &:nth-child(2) p::before{content:"所持虹玉";}
  }
}
@media screen and (max-width:800px){
#profile #item{
  li{width:50%; padding:10px 30px 10px 110px;}
  li p{padding:25px 0 0;}
  li p::before{font-size:15px;}
}}
@media screen and (max-width:640px){
#profile{
  #item{
    li{
      padding:5px 20px 10px 65px;
      &::before{
        top:calc(50% - 25px);
        left:10px;
        width:50px;
        height:50px;
      }
      p{padding:20px 0 0;}
    }
  }
}}
@media screen and (max-width:420px){
#profile{
  #item{
    flex-wrap:wrap;
    li{
      width:100%; padding:15px 30px 15px 70px;
      &::before{top:calc(50% - 20px); left:20px; width:40px; height:40px; }
    }
    li + li{margin-top:10px;}
    p{padding:0;}
  }
}}

/*
================================================================================================================
プロフィール編集
================================================================================================================
*/
/*プロフィールカード バッジ・勲章セレクト*/
#profile .badge{
  &:has(.btn:hover){filter:brightness(120%);}
  .btn{position:absolute; top:15%; left:15%; width:70%; height:70%; cursor:pointer; pointer-events:auto;}
  .btn.select::before{
    display:block;
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:url(../img/mypage/profile/select/01.png) , url(../img/mypage/profile/select/02.png) , url(../img/mypage/profile/select/03.png) , url(../img/mypage/profile/select/04.png);
    background-size:70% auto , 70% auto , 70% auto , 70% auto;
    background-position:top left , top right , bottom right , bottom left;
    background-repeat:no-repeat , no-repeat , no-repeat , no-repeat;
    filter:hue-rotate(145deg) drop-shadow(0 0 2px #007160) drop-shadow(0 0 2px #007160) drop-shadow(0 0 3px #007160) drop-shadow(0 0 3px #007160);
    transform:translateZ(0);
  }
}

/*
=========================
アイテム選択(記憶の結晶併用)
=========================
*/
#edit{
  > .inner{
    display:flex; flex-wrap:wrap; margin:40px auto;
    div{display:flex; position:relative; color:#fff; justify-content:center; align-items:center;}
    > div{
      width:calc(100% / 4);
      aspect-ratio:333 / 190;
      background-image:url(../img/mypage/profile/bg/edit.png);
      background-size:100% 100%;
      background-position:center;
      background-repeat:no-repeat;
      cursor:pointer;
      transition:.2s ease-in-out;
      img{width:80%;}
      &::before,&::after{display:block; content:""; position:absolute; pointer-events:none;}
      &::before{top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; z-index:3;}
      &::after{
        top:5%;
        left:5%;
        width:90%;
        height:90%;
        background-image:url(../img/mypage/profile/select/01.png) , url(../img/mypage/profile/select/02.png) , url(../img/mypage/profile/select/03.png) , url(../img/mypage/profile/select/04.png);
        background-size:25% auto , 25% auto , 25% auto , 25% auto;
        background-position:top left , top right , bottom right , bottom left;
        background-repeat:no-repeat , no-repeat , no-repeat , no-repeat;
        transform-origin:center;
        transform:scale(.9);
        transition:.2s ease-in-out;
        opacity:0;
      }
      &:hover{background-image:url(../img/mypage/profile/bg/edit_on.png); background-size:85% 85%;}
      &:hover::after{transform:scale(1); opacity:1;}
      &.new::before{
        background-image:url(../img/news/common/new.png);
        background-size:40px auto;
        background-position:top 10px left 10px;
      }
      &.setting{
        background-image:url(../img/mypage/profile/bg/edit_setting.png); pointer-events:none;
        &::before{
          height:103% !important;
          background-image:url(../img/mypage/profile/icn/setting.png);
          background-size:40% auto;
          background-position:bottom center;
        }
      }
      &.setting.done{pointer-events:auto;}
      &.setting.new::before{
        background-image:url(../img/mypage/profile/icn/setting.png) , url(../img/news/common/new.png);
        background-size:70% auto , 40px auto;
        background-position:bottom center , top 10px left 10px;
      }
    }
    &.frame-bg > div img{width:75%;}
    &.badge > div{
      > div{
        width:100%; height:100%;
        img{width:100%;}
        &::before{
          display:block;
          content:"";
          position:absolute;
          top:0;
          left:0;
          width:100%;
          height:100%;
          background-size:100% auto;
          background-position:center;
        }
        &.battle01::before{background-image:url(../img/mypage/badge/battle01.webp);}
        &.battle02::before{background-image:url(../img/mypage/badge/battle02.webp);}
        &.support01::before{background-image:url(../img/mypage/badge/support01.webp);}
        &.support02::before{background-image:url(../img/mypage/badge/support02.webp);}
      }
    }
    &.card > div img{width:50%;}
    &.voice{
      justify-content:center;
      > div{
        width:calc(100% - 10px);
        aspect-ratio:unset;
        background-image:none;
        background:rgba(204,173,130,.7);
        font-size:clamp(1rem, 0.5rem + 2.5vw, 1.75rem);
        line-height:1.5rem;
        letter-spacing:-2px;
        text-shadow:0 0 4px #000, 0 0 4px #000, 0 0 4px #000;
        text-align:left;
        justify-content:flex-start;
        padding:20px 40px;
        &::after{top:-5px; left:-5px; width:calc(100% + 10px); height:calc(100% + 10px); background-size:40px auto , 40px auto , 40px auto , 40px auto;}
        &:hover{background:#fac236;}
        &.setting{background:#3cd2bb;}
        &.new::before{background-position:top left;}
        &.setting::before{height:122% !important; background-size:120px auto; background-position:bottom right;}
        &.setting.new::before{background-size:120px auto , 40px auto; background-position:bottom right , top left;}
        & + div{margin-top:20px;}
      }
    }
    /*バッジ・勲章 / お気に入りバトルカード*/
    &.cell7 > div{
      width:calc(100% / 7); aspect-ratio:1 / 1;
      &::after{background-size:40% auto , 40% auto , 40% auto , 40% auto;}
      &.setting::before{background-size:70% auto;}
      &.setting.new::before{background-size:70% auto , 40px auto;}
    }
  }
}
#edit .mes{color:#fff;}

@media screen and (max-width:980px){#edit .inner > div{width:calc(100% / 3);}}
@media screen and (max-width:640px){
#edit .inner{width:calc(100% + 20px); margin:0 auto 0 -10px;}
#edit .inner > div{width:50%;}}
@media screen and (max-width:420px){
#edit .inner > div.new::before{background-size:30px auto; background-position:top left;}
#edit .inner > div.setting::before{background-size:60% auto;}
#edit .inner > div.setting.new::before{background-size:60% auto , 30px auto; background-position:bottom center , top left;}}

/*ゲーム開始ボイス*/
@media screen and (max-width:420px){
#edit .inner.voice > div.setting::before{background-size:100px auto;}
#edit .inner.voice > div.setting.new::before{background-size:100px auto , 30px auto;}}

/*バッジ・勲章 / お気に入りバトルカード*/
@media screen and (max-width:1100px){#edit .inner.cell7 > div{width:calc(100% / 5);}}
@media screen and (max-width:800px){#edit .inner.cell7 > div{width:calc(100% / 4);}}
@media screen and (max-width:640px){
#edit .inner.cell7 > div{width:calc(100% / 3);}
#edit .inner.cell7 > div.setting::before{background-size:60% auto;}
#edit .inner.cell7 > div.setting.new::before{background-size:60% auto , 40px auto;}}
@media screen and (max-width:420px){
/*#edit .inner.cell7 > div{width:50%;}*/
#edit .inner.cell7 > div.setting::before{background-size:100px auto}
#edit .inner.cell7 > div.setting.new::before{background-size:100px auto , 30px auto;}}

/*ページャー*/
@media screen and (max-width:640px){#edit .pager{width:calc(100% + 10px); margin:10px auto 0 -5px;}}

/*
================================================================================================================
記憶の結晶セット
================================================================================================================
*/
#kioku{
  ul.slot{
    display:flex; position:relative; color:#fff; flex-direction:column; flex-grow:1;
    > li{width:100%; position:relative;}
    > li:nth-child(2){
      /*font-size:clamp(0.938rem, 0.897rem + 0.2vw, 1.063rem);*/
      font-size:clamp(0.938rem, 0.917rem + 0.1vw, 1rem);
      text-align:center;
      background-image:url(../img/mypage/kioku/bar.png);
      background-size:100% 100%;
      padding:5px;
      margin:0 auto 10px;
      &.none{visibility:hidden;}
    }
    > li:nth-child(3){
      position:relative;
      min-height:50px;
      font-size:16px;
      flex-grow:1;
      p{position:relative; font-size:clamp(0.813rem, 0.751rem + 0.31vw, 1rem); z-index:3;}
    }
  }
}

/*上部スロットエリア*/
#kioku #slot{
  display:flex; max-width:1100px; margin:40px auto;
  > div{
    position:relative; width:calc((100% / 3) - 50px); margin:0 25px;
    &.select::before{
      display:block;
      content:"";
      position:absolute;
      top:-25px;
      left:-25px;
      width:calc(100% + 50px);
      height:calc(100% + 50px);
      background-image:url(../img/mypage/kioku/select/01.png) , url(../img/mypage/kioku/select/02.png) , url(../img/mypage/kioku/select/03.png) , url(../img/mypage/kioku/select/04.png);
      background-position:top left , top right , bottom right , bottom left;
      background-repeat:no-repeat , no-repeat , no-repeat , no-repeat;
      pointer-events:none;
      z-index:3;
    }
    ul.slot{
      aspect-ratio:330 / 440;
      background-color:#000;
      background-image:url(../img/mypage/kioku/frame_bg.png);
      background-size:100% auto;
      background-position:bottom;
      background-repeat:no-repeat;
      padding:0 10px 10px;
      cursor:pointer;
      transition:.2s ease-in-out;
      &:hover{filter:brightness(150%);}
      &::before,&::after{display:block; content:""; position:absolute; pointer-events:none;}
      &::before{
        top:-10px;
        left:-10px;
        width:calc(100% + 20px);
        height:calc(100% + 20px);
        background-image:url(../img/mypage/kioku/frame.png);
        background-size:100% 100%;
      }
      &::after{
        top:-20px;
        left:-20px;
        width:60px;
        height:58px;
        background-image:url(../img/mypage/kioku/slot01.png);
        background-size:100% auto;
        background-repeat:no-repeat;
      }
      li:nth-child(1){
      aspect-ratio:430 / 316;
      background-image:url(../img/mypage/kioku/frame_slot.png);
      background-size:100% auto;
      background-position:center;
      background-repeat:no-repeat;}
      p{text-shadow:0 0 6px #000 , 0 0 6px #000 , 0 0 10px #000 , 0 0 10px #000; padding:0 10px;}
    }
    &:nth-child(2) ul.slot::after{background-image:url(../img/mypage/kioku/slot02.png);}
    &:nth-child(3) ul.slot::after{background-image:url(../img/mypage/kioku/slot03.png);}
  }
}

/*下部アイテム選択エリア*/
#kioku #edit{
  margin:20px auto;
  > .inner.kioku{
    > div{
      width:calc((100% / 5) - 20px);
      aspect-ratio:270 / 340;
      background-image:url(../img/mypage/kioku/bg.png);
      align-items:flex-start;
      padding:0 20px 20px;
      margin:10px;
      img{width:100%;}
      &:hover{background-image:url(../img/mypage/kioku/bg_on.png); background-size:98% 98%;}
      &::before{background-size:80% auto;}
      &::after{top:-5px; left:-5px; width:calc(100% + 10px); height:calc(100% + 10px);}
      &.setting{
        background-image:url(../img/mypage/kioku/bg_set.png);
        ul.slot > li:nth-child(2){background-image:url(../img/mypage/kioku/bar_set.png);}
        &.slot01::before{background-image:url(../img/mypage/kioku/setting/slot01.png);}
        &.slot02::before{background-image:url(../img/mypage/kioku/setting/slot02.png);}
        &.slot03::before{background-image:url(../img/mypage/kioku/setting/slot03.png);}
        &.slot01.slot02::before{background-image:url(../img/mypage/kioku/setting/slot01_02.png);}
        &.slot01.slot03::before{background-image:url(../img/mypage/kioku/setting/slot01_03.png);}
        &.slot02.slot03::before{background-image:url(../img/mypage/kioku/setting/slot02_03.png);}
        &.slot01.slot02.slot03::before{background-image:url(../img/mypage/kioku/setting/slot01_02_03.png);}
      }
      &.setting.new::before{background-size:80% auto , 40px auto;}
      &.setting.new.slot01::before{background-image:url(../img/mypage/kioku/setting/slot01.png) , url(../img/news/common/new.png);}
      &.setting.new.slot02::before{background-image:url(../img/mypage/kioku/setting/slot02.png) , url(../img/news/common/new.png);}
      &.setting.new.slot03::before{background-image:url(../img/mypage/kioku/setting/slot03.png) , url(../img/news/common/new.png);}
      &.setting.new.slot01.slot02::before{background-image:url(../img/mypage/kioku/setting/slot01_02.png) , url(../img/news/common/new.png);}
      &.setting.new.slot01.slot03::before{background-image:url(../img/mypage/kioku/setting/slot01_03.png) , url(../img/news/common/new.png);}
      &.setting.new.slot02.slot03::before{background-image:url(../img/mypage/kioku/setting/slot02_03.png) , url(../img/news/common/new.png);}
      &.setting.new.slot01.slot02.slot03::before{background-image:url(../img/mypage/kioku/setting/slot01_02_03.png) , url(../img/news/common/new.png);}
      ul.slot{
        aspect-ratio:276 / 357;
        > li:nth-child(1){
          p{
            position:absolute;
            top:20px;
            right:-10px;
            width:100%;
            font-size:50px;
            text-align:right;
            letter-spacing:-5px;
            filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 3px #000) drop-shadow(0 0 3px #000);
            transform:translateZ(0);
            z-index:5;
            pointer-events;none;
            &::before{display:inline-block; content:"×"; font-size:40px; margin-right:5px;}
          }
        }
        > li:nth-child(3){
          padding:10px 15px;
          &::before{
            display:block;
            content:"";
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:rgba(0,0,0,.5);
            filter:blur(5px);
            z-index:2;
          }
        }
      }
    }
  }
}

/*スロットエリア*/
@media screen and (max-width:800px){
  #kioku #slot{
    width:calc(100% + 40px); margin:20px auto 20px -20px;
    > div{
      width:calc((100% / 3) - 10px); margin:0 5px;
      &.select ul.slot{box-shadow:0 0 5px #c08700 , 0 0 20px #28f4ce , inset 0 0 5px #c08700 , inset 0 0 20px #28f4ce;}
      &.select::before{display:none;}
      ul.slot{
        border:2px solid #c38b22;
        &::before{display:none;}
        &::after{top:5px; left:5px; width:30px; height:30px;}
      }
    }
  }
}
@media screen and (max-width:640px){
  #scroll{
    overflow:scroll hidden; margin:0 auto 20px;
    &::-webkit-scrollbar{height:8px;}
    &::-webkit-scrollbar-thumb{background:#e2a920;}
    &::-webkit-scrollbar-track{background:#888;}
  }
  #kioku #slot{width:700px; margin:20px auto;}
}

/*選択エリア*/
@media screen and (max-width:1400px){#kioku #edit .inner.kioku > div{width:calc((100% / 4) - 20px);}}
@media screen and (max-width:1100px){
#kioku #edit .inner.kioku > div{width:calc((100% / 3) - 20px); padding: 0 10px 20px;}
#kioku #edit .inner.kioku > div ul.slot li:nth-child(1) p{top:10px; right:5px; font-size:40px;}
#kioku #edit .inner.kioku > div ul.slot li:nth-child(1) p::before{font-size:20px;}
#kioku #edit .inner.kioku > div ul.slot li:nth-child(3){width:calc(100% - 40px); margin:0 auto;}}
@media screen and (max-width:800px){
#kioku #edit .inner.kioku > div{width:calc((100% / 2) - 20px); padding: 0 5px 20px;}
#kioku #edit .inner.kioku > div ul.slot li:nth-child(1) p{font-size:30px;}
#kioku #edit .inner.kioku > div ul.slot li:nth-child(3){width:calc(100% - 20px); padding:10px;}
#kioku #edit .inner.kioku > div.new::before{background-size:40px auto; background-position:top 5px left 5px;}
#kioku #edit .inner.kioku > div.setting::before{height:104% !important;background-size:80% auto;}
#kioku #edit .inner.kioku > div.setting.new::before{background-size:80% auto , 40px auto; background-position:bottom center , top 5px left 5px;}}
@media screen and (max-width:420px){
#kioku #edit{max-width:270px;}
#kioku #edit .inner.kioku > div{width:calc(100% - 20px);}}

.dfont{font-family: "Hina Mincho", sans-serif;font-weight:400;font-size:clamp(0.92rem, 0.834rem + 0.2vw, 1rem);}

/*
================================================================================================================
設定
================================================================================================================
*/
.setup{
  display:flex;
  width:100%;
  max-width:1500px;
  aspect-ratio:3 / 1;
  background-image:url(../img/mypage/memorycard/bg.webp);
  background-size:100% 100%;
  justify-content:center;
  align-items:center;
  padding:30px;
  margin:0 auto;
  .inner{
    width:100%;
    > p{color:#fff9a1; font-size:clamp(1.125rem, 0.852rem + 1.36vw, 1.875rem);/*30-18*/ line-height:120%; text-align:center; text-shadow:0 0 5px #302218 , 0 0 5px #302218 , 0 0 5px #302218 , 0 0 5px #302218;}
    .radio{width:100%; max-width:210px; margin:50px auto;}
  }
}
@media screen and (max-width:480px){
  .setup{
    padding:30px 10px;
    .inner{.radio{margin:30px auto;}}
  }
}

.radio > div{
  display:flex;
  position:relative;
  width:100%;
  color:#fff;
  font-size:clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);/*30-20*/
  text-shadow:0 0 5px #302218 , 0 0 5px #302218 , 0 0 5px #302218 , 0 0 5px #302218;
  padding:15px 0;
  margin:15px auto;
  justify-content:space-between;
  align-items:center;
  &::before{
    display:block;
    content:"";
    position:absolute;
    top:-10%;
    left:-10%;
    width:120%;
    height:120%;
    background-image:url(../img/common/bg/line.png);
    background-size:100% auto;
    background-position:center;
    background-repeat:no-repeat;
    opacity:0;
    transform:scaleX(0);
    transform-origin:left;
    transition:all .1s ease;
  }
  > *{display:block; cursor:pointer;}
  input[type=radio]{display:none;}
  label{
    position:relative; /*width:100%;*/ padding-left:50px;
    &::before,&::after{display:block; content:""; position:absolute; border-radius:50%;}
    &::before{top:calc(50% - 17.5px); left:0; width:35px; height:35px; background:#fff; border:2px solid #000;}
    &::after{top:calc(50% - 10px); left:7px; width:20px; height:20px; background:#ff7e00; opacity:0; transition:opacity .2s ease;}
  }
  input:checked + label::after{opacity:1;}
  &:has(:checked)::before{transform:scaleX(1); opacity:1;}
}

/*
================================================================================================================
エラー
================================================================================================================
*/
#error.frame{text-align:center; max-width:800px;}
.mes{width:100% !important; background:rgba(0,0,0,.6); font-size:clamp(1rem, 0.818rem + 0.91vw, 1.5rem); text-align:center; padding:40px 10px; margin:20px auto;}