#main-inner{font-family:"Yuji Syuku", serif; padding-bottom:200px !important;}
@media screen and (max-width:480px){#main-inner{padding-bottom:80px !important;}}

/*見出し*/
#main h3.plain{margin:200px auto 40px;}
#main .catch + h3.plain{margin:100px auto 40px;}
@media screen and (max-width:800px){
#main h3.plain{margin:100px auto 20px;}
#main .catch + h3.plain{margin:50px auto 20px;}}
@media screen and (max-width:480px){
#main h3.plain{margin:60px auto 20px;}
#main .catch + h3.plain{margin:40px auto 20px;}}

/*リンクボタン*/
#main-inner > .btn-link:last-child{margin-top:100px;}
@media screen and (max-width:480px){#main-inner > .btn-link:last-child{margin-top:50px;}}

/*
================================================================================================================
遊び方-キャッチ
================================================================================================================
*/
.catch{font-size:clamp(1.25rem, 0.795rem + 2.27vw, 2.5rem); line-height:3rem; text-align:center; margin:30px auto 0;}
.catch span{
display:block;
background:linear-gradient(to right, #f3ec7e 0%,#ff9600 20%,#ff9600 40%,#f6cd16 100%);
-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);
transform:translateZ(0);}
@media screen and (max-width:980px){
.catch{margin:20px auto 0;}
.catch br{display:none;}}
@media screen and (max-width:800px){.catch{line-height:2.5rem;}}
@media screen and (max-width:640px){.catch{line-height:2rem;}}
@media screen and (max-width:480px){.catch{line-height:1.5rem;}}

/*
================================================================================================================
遊び方
================================================================================================================
*/
.box{
  display:block; width:100%; color:#fff; text-align:center; margin:0 auto;
  .pic{
    width:100%; max-width:800px; margin:0 auto;
    &.vertical{width:50%; max-width:425px;}
    img{border-radius:20px; box-shadow:0 0 5px #a19160 , 0 0 5px #a19160 , 0 0 10px #a19160 , 5px 10px 1px rgba(61,35,1,.5);}
  }
  > p{
    font-size:clamp(0.938rem, 0.688rem + 1.25vw, 1.625rem);/*30-15*/ line-height:2.5rem; text-shadow:0 0 5px #000 , 0 0 10px #000 , 0 0 10px #000; margin:20px auto 0;
    em{color:#fac51b; font-weight:normal;}
    & + .pic{margin-top:30px;}
  }
  .btn-normal{max-width:600px; font-size:clamp(1.125rem, 0.943rem + 0.91vw, 1.625rem);/*26-18*/ margin:20px auto 0;}
}
a.box{
  max-width:800px;
  .pic,> p{transition:.3s ease-in-out;}
  p{font-size:clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);/*30-20*/}
  &:hover .pic{filter:brightness(120%);}
  &:hover > p{text-shadow:0 0 3px #fff , 0 0 10px #fff;}
}
@media screen and (max-width:640px){
  .box{
    .pic{
      width:90%;
      img{border-radius:10px; box-shadow:0 0 5px #a19160 , 0 0 10px #a19160 , 5px 5px 1px rgba(61,35,1,.5);}
    }
    > p{line-height:1.5rem; margin:10px auto 0;}
  }
}
@media screen and (max-width:420px){.box .pic{width:100%;}}

/*2列時*/
.flex{
  display:flex; justify-content:space-between; flex-wrap:wrap;
  .box{width:45%; margin:0;}
}
@media screen and (max-width:1400px){.flex .box{width:48%;}}
@media screen and (min-width:1201px){
  .flex{
    .box{margin:60px 0 0;}
    .box:nth-child(1),.box:nth-child(2){margin:0 !important;}
  }
}
@media screen and (max-width:1200px){
  .flex{
    justify-content:center;
    .box{width:100%; margin:0;}
    .box + .box{margin-top:40px;}
  }
}

/*
=========================
テキスト調整
=========================
*/
@media screen and (max-width:480px){
.left{text-align:left;}
br.br-pc{display:none;}}

/*
=========================
初めての方
=========================
*/
.step{
  .box:not(:last-child)::after{
    display:block;
    content:"";
    width:100%;
    height:200px;
    background-image:url(../img/howto/arrow.png);
    background-size:auto 70%;
    background-position:center;
    background-repeat:no-repeat;
  }
}
@media screen and (max-width:800px){.step .box:not(:last-child)::after{height:0; padding-top:30%; background-size:auto 70%;}}

.pic#sword{position:relative;}
.pic#sword::after{
display:block;
content:"";
position:absolute;
bottom:-3%;
left:-3%;
width:100%;
height:100%;
background-image:url(../img/howto/start/step05_sword.png);
background-size:23% auto;
background-position:left bottom;
background-repeat:no-repeat;
filter:drop-shadow(0 0 4px #fbc621) drop-shadow(0 0 10px #fbc621);
transform:translateZ(0);}

/*
=========================
イベントモード
=========================
*/
#sns{display:flex; position:relative; width:100%; justify-content:center; align-items:center; margin:30px auto 0;}
#sns a{display:block;}
#sns a img{transition:all .2s ease-in-out;}
#sns a:hover img{filter:brightness(150%);}

@media screen and (min-width:641px){#sns a:nth-child(2){max-width:286px; margin-left:20px;}}
@media screen and (max-width:640px){
#sns{flex-wrap:wrap;}
#sns a{width:100% !important; max-width:300px;}
#sns a:nth-child(1){order:2; margin-top:20px;}
#sns a:nth-child(2){order:1;}}

/*
=========================
バトル
=========================
*/
/*.pic.type{max-width:980px;}*/
.pic.no-shadow img{box-shadow:none !important;}

/*
=========================
ゲームカード
=========================
*/
/*バトルカード*/
#about-battle{
  display:flex; width:60%; justify-content:center; align-items:center; margin:0 auto;
  > *{position:relative;}
  > p{z-index:2;}
  .pic{width:unset; max-width:unset; margin:0 0 0 -5% !important; z-index:1;}
}
@media screen and (max-width:900px){#about-battle{width:80%;}}
@media screen and (max-width:420px){#about-battle{width:90%;}}

/*説明画像*/
.exp-battle{
  display:flex; max-width:1510px; justify-content:center; margin:0 auto;
  li:nth-child(2){margin-left:-19%;}
}
.exp-support{max-width:990px; margin:0 auto;}
@media screen and (min-width:981px){
.exp-battle{width:80%;}
.exp-support{width:50%;}}
@media screen and (max-width:980px){.exp-support{width:60%;}}
@media screen and (max-width:480px){
  .exp-battle{
    width:90%; flex-wrap:wrap;
    li:nth-child(2){margin:15px 0 0 0;}
  }
  .exp-support{width:90%;}
}
@media screen and (max-width:370px){.exp-battle,.exp-support{width:100%;}}

/*説明テキスト*/
.exp{
  max-width:1200px; color:#fac51b; background:rgba(0,0,0,.7); font-size:clamp(1.125rem, 0.943rem + 0.91vw, 1.625rem);/*26-18*/ border-radius:20px; padding:20px; margin:20px auto 0;
  li{
    padding:20px 10px;
    p{color:#fff; font-size:clamp(0.938rem, 0.824rem + 0.57vw, 1.25rem);/*20-15*/ line-height:1.5rem; margin:10px auto 0;}
  }
  li + li{border-top:1px solid #fac51b;}
  li:first-child{padding:10px 10px 20px;}
  li:last-child{padding:20px 10px 10px;}
}
@media screen and (max-width:480px){.exp{border-radius:10px; padding:10px;}}