/*e-amusementサイトテンプレート*/
header,footer,header#id_nav_menu_1{position:relative !important;}
header#id_nav_menu_1{background-color:#fff;}
#wrapper{position:relative !important;}
#container{background:#000;}

/*z-index*/
#main,#main::before,#main::after {z-index:1;}
#main > #main-inner              {z-index:2;}
footer                           {z-index:2 !important;}
#page-top,#page-top a            {z-index:10 !important;}

/*
================================================================================================================
COMMON
================================================================================================================
*/
*{padding:0; margin:0; border:0;}
*, *:before, *:after{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;}

html{width:100%; height:100%; overflow-wrap:break-word}
body{
min-width:320px !important;
background:#000 !important;
margin:0 auto;
font-family:"メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
overflow-x:hidden;}
h1,h2,h3,h4,h5,h6{display:none;}
a{outline:none;}
a:link,a:visited,a:hover,a:active{text-decoration:none;}
a img{transition:opacity .3s ease-in-out;}
img{padding:0; margin:0; border:0; vertical-align:bottom;}
ul{margin:0; padding:0; border:0;}
li{list-style:none;}
strong,em,b{font-weight:600; font-style:normal;}
table{width:100%; color:#000; border-collapse:collapse; border-spacing:0; margin:0 auto;}

.no-show{display:none !important;}/*タブ切替*/

/*
================================================================================================================
メイン
================================================================================================================
*/
#main{
position:relative;
width:100%;
max-width:2560px;
background-color:#000;
background-image:url(../img/common/bg/top.webp) , url(../img/common/bg/pat.png) , url(../img/common/bg/grd.webp);
background-size:200% auto , auto , 100% auto;
background-position:top center , top , bottom center;
background-repeat:no-repeat , repeat , no-repeat;
margin:0 auto;}
@media screen and (max-width:1920px){#main{background-size:200% auto , 7% auto , 100% auto;}}
@media screen and (max-width:640px){#main{background-size:300% auto , 50px auto , 100% auto;}}

#main::before{
display:block;
content:"";
position:fixed;
top:0;
width:100%;
max-width:2560px;
height:100vh;
background-image:url(../img/common/bg/right.webp) , url(../img/common/bg/left.webp);
background-size:100% auto , 100% auto;
background-position:bottom right , bottom left;
background-repeat:no-repeat , no-repeat;}
#main.btm::before{position:absolute; height:100%;}
@media screen and (min-width:2561px){#main::before{left:calc(50% - 1280px);}}
@media screen and (max-width:640px){#main::before{background-size:110% auto , 110% auto;}} 

#main.dark::after{
display:block;
content:"";
position:absolute;
top:0;
width:100%;
height:100%;
background:linear-gradient(to right, rgba(0,0,0,.2) 0%,rgba(0,0,0,.8) 20%,rgba(0,0,0,.8) 80%,rgba(0,0,0,.2) 100%);}
#main img{width:100%;}

#main-inner{position:relative; width:calc(100% - 40px); max-width:1500px; padding:150px 0 40px; margin:0 auto;}
@media screen and (max-width:1300px){#main-inner{padding:10% 0 40px;}}
@media screen and (max-width:980px){#main-inner{padding:150px 0 40px;}}
@media screen and (max-width:640px){#main-inner{width:calc(100% - 20px); padding:110px 0 40px;}}

@media screen and (min-width:981px){#main-inner{min-height:calc(100vh - 201px);}}
@media screen and (max-width:980px){#main-inner{min-height:calc(100vh - 249px);}}

/*
================================================================================================================
共通
================================================================================================================
*/
#main h2,
#main h3,
#main h4{display:block; position:relative; font-family:"Yuji Syuku", serif; text-align:center;}

#main h2,#main h3{font-size:40px;}
@media screen and (max-width:800px){#main h2,#main h3{font-size:32px !important;}}
@media screen and (max-width:640px){#main h2,#main h3{font-size:28px !important;}}
@media screen and (max-width:480px){#main h2,#main h3{font-size:24px !important;}}
@media screen and (max-width:420px){#main h2,#main h3{font-size:20px !important;}}

/*
=========================
見出し-大
=========================
*/
#main h2{
width:100%;
max-width:800px;
height:110px;
margin:0 auto;
filter:drop-shadow(0 0 4px #d6981d) drop-shadow(0 0 4px #000);
transform:translateZ(0);}

#main h2 p{
display:flex;
position:relative;
width:calc(100% - 720px);
height:100%;
color:#fff;
background-image:url(../img/common/bar/01_bg.png);
background-size:auto 100%;
text-shadow:0 0 4px #000 , 0 0 4px #000 , 0 0 4px #000;
justify-content:center;
align-items:center;
margin:0 auto;
z-index:3;}
#main h2 p::before,
#main h2 p::after{display:block; content:""; position:absolute; top:0; width:360px; height:100%; background-size:auto 100%; z-index:2;}
#main h2 p::before{left:-360px; background-image:url(../img/common/bar/01_left.png);}
#main h2 p::after{right:-360px; background-image:url(../img/common/bar/01_right.png); background-position:right;}
#main h2 p span{display:block; width:100vw; position:absolute; z-index:4;}

@media screen and (max-width:800px){
#main h2{height:70px;}
#main h2 p{width:calc(100% - 460px);}
#main h2 p::before,#main h2 p::after{width:230px;}
#main h2 p::before{left:-230px;}
#main h2 p::after{right:-230px;}}
@media screen and (max-width:640px){
#main h2{height:60px;}
#main h2 p{width:calc(100% - 394px);}
#main h2 p::before,#main h2 p::after{width:197px;}
#main h2 p::before{left:-197px;}
#main h2 p::after{right:-197px;}}
@media screen and (max-width:420px){
#main h2{height:45px;}
#main h2 p{width:calc(100% - 296px);}
#main h2 p::before,#main h2 p::after{width:148px;}
#main h2 p::before{left:-148px;}
#main h2 p::after{right:-148px;}}

/*
=========================
見出し-中/区切り線
=========================
*/
#main h3{width:calc(100% - 100px); min-height:36px; background-image:url(../img/common/bar/02_bg.png); background-position:center; background-repeat:repeat-x; margin:0 auto;}
#main h3::before,
#main h3::after{display:block; content:""; position:absolute; top:calc(50% - 18px); width:152px; height:36px; background-size:100% auto; z-index:2;}
#main h3::before{left:-50px; background-image:url(../img/common/bar/02_left.png);}
#main h3::after{right:-50px; background-image:url(../img/common/bar/02_right.png);}
@media screen and (max-width:980px){#main h3::before,#main h3::after{top:calc(50% - 11px); width:100px; height:22px;}}
@media screen and (max-width:420px){#main h3::before,#main h3::after{top:calc(50% - 9px); width:80px; height:18px;}}

#main h3 p{
display:flex;
position:relative;
width:calc(100% - 300px);
max-width:400px;
height:96px;/*
max-width:384px;
min-width:200px;
aspect-ratio:384 / 96;*/
background-image:url(../img/common/bar/02_frame_pat.png);
background-size:auto 100%;
justify-content:center;
align-items:center;
margin:0 auto;
z-index:3;}
#main h3 p::before,
#main h3 p::after{
display:block;
content:"";
position:absolute;
width:55px;
height:96px;
background-size:auto 100%;
background-repeat:no-repeat;}
#main h3 p::before{background-image:url(../img/common/bar/02_frame_left.png); left:-55px;}
#main h3 p::after{background-image:url(../img/common/bar/02_frame_right.png); right:-55px;}
@media screen and (max-width:980px){
#main h3 p{width:calc(100% - 100px); height:70px;}
#main h3 p::before,#main h3 p::after{width:39px; height:70px;}
#main h3 p::before{left:-39px;}
#main h3 p::after{right:-39px;}}
@media screen and (max-width:640px){
#main h3 p{height:50px;}
#main h3 p::before,#main h3 p::after{width:29px; height:50px;}
#main h3 p::before{left:-29px;}
#main h3 p::after{right:-29px;}}
@media screen and (max-width:420px){
#main h3 p{width:90%; height:40px;}
#main h3 p::before,#main h3 p::after{width:23px; height:40px;}
#main h3 p::before{left:-23px;}
#main h3 p::after{right:-23px;}}

#main h3 p span{
display:block;
background:linear-gradient(to right, #f3ec7e 0%,#f6cd16 50%,#ff9600 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) drop-shadow(0 0 2px #2d1a00);
transform:translateZ(0);
line-height:100%;}

/*フレームシンプル版*/
#main h3.plain p{
display:inline-block;
width:unset;
height:unset;
max-width:unset;
background:linear-gradient(to bottom, #ffe38d 0%, #d0ae45 13%, #ffe38d 30%, #af8400 49%, #d0ae45 70%, #d0ae45 76%, #ffe38d 88%, #d0ae45 96%);
letter-spacing:-5px;
border-radius:50px;
padding:3px;
filter:drop-shadow(0 0 5px #000);
transform:translateZ(0);}
#main h3.plain p::before,#main h3.plain p::after{display:none;}
#main h3.plain p span{
-webkit-background-clip:unset;
-webkit-text-fill-color:unset;
color:#fff;
background:#010000 !important;
border-radius:50px;
box-shadow:inset 0 0 25px #873c18;
filter:unset;
padding:10px 40px;}

/*
=========================
見出し-小/区切り線
=========================
*/
#main h4{font-size:26px; text-shadow:0 0 4px #000 , 0 0 4px #000 , 0 0 4px #000; margin:0 auto 20px;}
@media screen and (max-width:640px){#main h4{font-size:20px;}}

/*
=========================
リスト
=========================
*/
#main .small{font-size:12px;}
@media screen and (max-width:640px){#main .small{font-size:11px;}}
@media screen and (max-width:480px){#main .small{font-size:10px;}}

/*リスト関連*/
ul.list{width:100%; text-align:left; margin:0 auto;}
ul.list > li{display:block; position:relative; padding-left:18px; line-height:150%;}
ul.list > li + li{margin-top:5px;}
ul.list > li::before{display:block; position:absolute; top:0; left:0;}
ul.list > li > a{color:#ff6a7a; text-decoration:underline;}
ul.list > li > a:hover{text-decoration:none;}

ul.list.ast{font-family:'Noto Sans JP', sans-serif;}

ul.list.dot > li::before{content:""; top:10px; left:4px; width:5px; height:5px; background:#fff; border-radius:50%;}
ul.list.ast > li::before{content:"※";}
ul.list.sq > li::before{content:"■";}

ul.list.num > li:first-child::before{content:"1.";}
ul.list.num > li:nth-child(2)::before{content:"2.";}
ul.list.num > li:nth-child(3)::before{content:"3.";}
ul.list.num > li:nth-child(4)::before{content:"4.";}
ul.list.num > li:nth-child(5)::before{content:"5.";}
ul.list.num > li:nth-child(6)::before{content:"6.";}

ul.list.ast.small > li{padding-left:14px; font-weight:500;}

ul.list.dot > li > a{color:#e26086; transition:all .2s ease-in-out;}
ul.list.dot > li > a:hover{color:#df0031; text-decoration:underline;}
/*ul.list.box{background:#181818; padding:20px; margin:20px auto;}*/

/*
========================
動画
========================
*/
#movie,
.movie{
position:relative;
width:100%;
margin:0 auto;}
#movie{max-width:1200px;}
.movie-inner{
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;}
.movie-inner iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
margin:0 auto;
z-index:2;}

/*
================================================================================================================
ボタン
================================================================================================================
*/
.btn-link , .btn-submit , .btn-normal{font-family:"Yuji Syuku", serif;}

.btn-link{
display:flex;
position:relative;
width:50%;
max-width:280px;
min-width:190px;
aspect-ratio:220/50;
background-image:url(../img/menu/btn.png);
background-size:100% 100%;
background-position:center;
background-repeat:no-repeat;
font-size:26px;
justify-content:center;
align-items:center;
margin:0 auto;
filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));
transform:translateZ(0);}
.btn-link:hover{background-image:url(../img/menu/btn_on.png);}
@media screen and (max-width:800px){.btn-link{font-size:22px;}}
@media screen and (max-width:480px){.btn-link{font-size:18px;}}

/*オンマウス*/
.btn-link::after{
display:block;
content:"";
position:absolute;
top:5%;
left:10%;
width:80%;
height:90%;
background-image:url(../img/menu/eff.png);
background-size:100% 120px;
background-repeat:repeat-y;
mix-blend-mode:screen;
transition:.3s ease-in-out;
pointer-events:none;
opacity:0;}
.btn-link:hover::after{animation:particle 12s linear infinite; opacity:1;}

.btn-link p{
position:relative;
background:linear-gradient(to right, #f3ec7e 0%,#f6cd16 50%,#ff9600 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
line-height:100%;
filter:drop-shadow(1px 1px 0 #3d3100) drop-shadow(-1px -1px 0 #3d3100) drop-shadow(-1px 1px 0 #3d3100) drop-shadow(1px -1px 0 #3d3100);
transform:translateZ(0);}

/*
=========================
決定するボタン
=========================
*/
.btn-submit{
display:flex;
position:relative;
width:65%;
max-width:384px;
min-width:200px;
aspect-ratio:384 / 96;
background-image:url(../img/common/bar/02_title.png);
background-size:100% auto;
font-size:clamp(1.25rem, 0.5rem + 3.75vw, 2.375rem);
letter-spacing:-1px;
justify-content:center;
align-items:center;
margin:0 auto;
transition:.2s ease-in-out;
cursor:pointer;
z-index:3;}
.btn-submit p{
display:block;
background:linear-gradient(to right, #f3ec7e 0%,#f6cd16 50%,#ff9600 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) drop-shadow(0 0 2px #2d1a00);
transform:translateZ(0);
line-height:100%;}
.btn-submit:hover{filter:drop-shadow(0 0 5px #d59d1a) drop-shadow(0 0 5px #d59d1a) drop-shadow(0 0 15px #d59d1a); transform:translateZ(0);}

/*
=========================
シンプルボタン
=========================
*/
.btn-normal{
display:block;
color:#d59d1a;
background:rgba(0,0,0,.7);
font-size:clamp(0.938rem, 0.824rem + 0.57vw, 1.25rem);
text-align:center;
border-radius:30px;
border:1px solid #d59d1a;
padding:10px;
transition:.2s ease-in-out;
cursor:pointer;}
.btn-normal:hover{color:#000; background:#d59d1a;}

#main .none{filter:grayscale(90%) brightness(50%); opacity:.7; pointer-events:none;}

/*
================================================================================================================
汎用フレーム
================================================================================================================
*/
.frame,
.frame > *,
.frame > * > *{position:relative; width:100%; height:100%;}

.frame{
display:block;
color:#fff;
background-color:#242424;
background-image: url(../img/common/frame/bg02.png) , url(../img/common/frame/bg01.png);
background-size:auto 120% , auto;
background-position:top , bottom;
background-repeat:repeat-x , repeat;
border-radius:50px;
font-family:'Noto Sans JP', sans-serif;
margin:0 auto;
filter:drop-shadow(0 0 4px #000);
transform:translateZ(0);}
@media screen and (max-width:640px){.frame{border-radius:30px;}}
@media screen and (max-width:480px){.frame{background-size:auto 120% , 50px auto;}}

.frame > .frame-border > .inner{line-height:1.5rem; padding:50px; z-index:5;}
@media screen and (max-width:800px){.frame > .frame-border > .inner{font-size:14px; padding:30px;}}
@media screen and (max-width:480px){.frame > .frame-border > .inner{padding:30px 20px;}}
@media screen and (max-width:420px){.frame > .frame-border > .inner{font-size:13px;}}

.frame > .frame-border > .inner strong{display:block; color:#d59d1a; font-size:26px; font-weight:700; line-height:150%; margin:0 auto 20px;}
@media screen and (max-width:480px){.frame > .frame-border > .inner strong{font-size:18px;}}
@media screen and (max-width:370px){.frame > .frame-border > .inner strong{font-size:16px;}}

/*調整*/
.frame.width980{max-width:980px;}
.frame .btn-link:last-child{margin:50px auto 0;}
@media screen and (max-width:480px){.frame .btn-link:last-child{margin:30px auto 0;}}

/*
=========================
装飾
=========================
*/
.frame::before,
.frame > *::before,
.frame > *::after,
.frame > * > *::before,
.frame > * > *::after{display:block; content:""; position:absolute; pointer-events:none;}

/*上下ボーダー*/
.frame::before{
top:0;
left:30px;
width:calc(100% - 60px);
height:100%;
background-image:url(../img/common/frame/border/01.png) , url(../img/common/frame/border/03.png);
background-position:top , bottom;
background-repeat:repeat-x , repeat-x;}

/*左右ボーダー グラデ*/
.frame > .frame-border::before,
.frame > .frame-border::after{top:30px; height:calc(100% - 60px); background:linear-gradient(to bottom, #bfb56a 0%,#885b35 50%,#9b8637 100%); z-index:2;}
.frame > .frame-border::before{left:0; width:10px;}
.frame > .frame-border::after{right:0; width:9px;}

/*左右ボーダー 黒*/
.frame > .frame-border > .inner::before{
top:30px;
left:0;
width:100%;
height:calc(100% - 60px);
background-image:url(../img/common/frame/border/02.png) , url(../img/common/frame/border/04.png);
background-position:right , left;
background-repeat:repeat-y , repeat-y;
z-index:3;}

/*角丸*/
.frame > .frame-border > .inner::after{
top:0;
left:0;
width:100%;
height:100%;
background-image:url(../img/common/frame/radius/01.png) , url(../img/common/frame/radius/02.png) , url(../img/common/frame/radius/03.png) , url(../img/common/frame/radius/04.png);
background-position:top left , top right , bottom right , bottom left;
background-repeat:no-repeat , no-repeat , no-repeat , no-repeat;
z-index:4;}

@media screen and (max-width:640px){
.frame::before{left:20px; width:calc(100% - 40px); background-size:auto 20px , auto 20px;}
.frame > .frame-border::before,
.frame > .frame-border::after{top:20px; height:calc(100% - 40px);}
.frame > .frame-border::before{width:7px;}
.frame > .frame-border::after{width:6px;}
.frame > .frame-border > .inner::before{top:20px; height:calc(100% - 40px); background-size:6px auto , 7px auto;}
.frame > .frame-border > .inner::after{background-size:20px auto , 20px auto;}}

/*
================================================================================================================
フィルター機能
================================================================================================================
*/
#filter{
  width:100%; margin:40px auto;

  /*フォーム装飾*/
  .box{
    display:flex; position:relative; height:40px; color:#fff; justify-content:space-between; align-items:center;
    > p{
      display:flex;
      width:calc(45% - 30px);
      height:100%;
      background:#d59d1a;
      font-size:clamp(0.688rem, 0.396rem + 1.46vw, 1.125rem);
      text-align:center;
      text-shadow:0 0 4px #000 , 0 0 4px #000 , 0 0 4px #000;
      justify-content:center;
      align-items:center;
      margin-left:30px;
      &::before{
        display:block;
        content:"";
        position:absolute;
        top:0;
        left:0;
        width:30px;
        height:100%;
        background-image:url(../img/common/form/brush.png);
        background-size:100% 100%;
      }
    }
    > div{
      position:relative; width:55%; height:100%; padding:2px;
      &::before,&::after{display:block; content:""; position:absolute; top:0; left:0; width:100%; height:100%;}
      &::before{background:#d59d1a; border-radius:0 30px 30px 0;}
      &::after{background:linear-gradient(to right, #cc9752 0%,#f6e06f 11%,#f6e06f 11%,#af8145 29%,#f6e06f 48%,#af8145 72%,#f6e06f 85%,#af8145 100%); border-radius:30px;}
      > *{position:relative; width:100%; height:100%; color:#fff; background:#000; padding:0 20px; border-radius:30px;  z-index:2; cursor:pointer;}
      select{
        -webkit-appearance:none !important;
        -moz-appearance:none !important;
        appearance:none !important;
        background-image:url(../img/common/form/icn_select.png);
        background-size:20px auto;
        background-position:right 5px center;
        background-repeat:no-repeat;
        &:focus{outline:none;}
      }
    }
  }

  /*フリーワードエリア*/
  #search{
    display:flex; width:100%; max-width:800px; justify-content:center; align-items:center; margin:0 auto 20px;
    .box{
      width:calc(100% - 200px); margin-right:20px;
      > p{width:calc(30% - 30px);}
      > div{
        width:70%;
        input[type="text"]{
          background-image:url(../img/common/form/icn_search.png);
          background-size:30px auto;
          background-position:left 5px center;
          background-repeat:no-repeat;
          cursor:default;
          padding:0 150px 0 40px;
        }
        input[type="text"]:focus{outline:none;}
      }
    }
    .btn-submit{
      font-size:26px; width:180px; min-width:unset; margin:0;
      &:hover{filter:drop-shadow(0 0 6px #d59d1a);}
    }
  }
  
  /*セレクトフォーム用入れ子*/
  > .inner{
    display:flex; width:100%; flex-wrap:wrap; justify-content:space-between; margin:0 auto;
    
    /*2つ並び*/
    &.cell2{
      max-width:640px;
      .box{width:calc(50% - 5px);}
    }

    /*4つ並び*/
    &.cell4 .box{width:calc(25% - 5px);}
  }
}

/*共通*/
@media screen and (max-width:800px){#filter{margin:20px auto;}}
@media screen and (max-width:690px){
#filter{margin:10px auto 20px;}
#filter .box{height:unset; background:#d59d1a; border-radius:5px 5px 30px 30px; flex-wrap:wrap; margin:0 !important;}
#filter .box > *{width:100% !important; height:unset !important;}
#filter .box > p{background:transparent; justify-content:flex-start; padding:0 10px; margin:0;}
#filter .box > p::before{display:none;}
#filter .box > div::before{display:none;}
#filter .box > div select{min-height:40px;}}

/*フリーワードエリア*/
@media screen and (max-width:800px){
#filter #search{max-width:640px;}
#filter #search .box{width:calc(100% - 160px); margin-right:10px;}
#filter #search .btn-submit{font-size:20px; width:150px;}}
@media screen and (max-width:690px){
#filter #search{flex-wrap:wrap; margin:0 auto 10px;}
#filter #search .box{width:100%; margin:0 0 10px !important;}
#filter #search input[type="text"]{min-height:40px; padding:0 120px 0 40px !important;}}

/*4つ並び*/
@media screen and (max-width:1400px){
#filter > .inner.cell4{max-width:640px;}
#filter > .inner.cell4 .box{width:calc(50% - 5px); margin:10px 0;}}
@media screen and (max-width:690px){
#filter > .inner.cell4 .box:nth-child(3),
#filter > .inner.cell4 .box:nth-child(4){margin-top:10px !important;}}

/*
=========================
カード名のみ用チェックボックス
=========================
*/
#filter{
  #check{
    display:flex;
    position:absolute;
    top:5px;
    right:5px;
    width:unset;
    height:30px;
    border:1px solid #806333;
    padding:0 10px 0 30px;
    align-items:center;
    input[type="checkbox"]{display:none !important; border:0 !important; margin:0 !important;}
    input[type="checkbox"]:checked + label:before{background-image:url(../img/common/form/icn_check_on.png);}
    label{
      cursor:pointer;
      &:before{
        position:absolute;
        content:"";
        top:5px;
        left:5px;
        width:20px;
        height:20px;
        background-image:url(../img/common/form/icn_check.png);
        background-size:100% auto;
        transition:all .2s ease-in;
      }
    }
  }
}

@media screen and (max-width:690px){#filter #check{font-size:12px;}}

/*
================================================================================================================
ページャー
================================================================================================================
*/
.pager{
display:flex;
position:relative;
width:100%;
max-width:929px;
aspect-ratio:929 / 59;
background-image:url(../img/common/pager/pc.png);
background-size:100% 100%;
background-position:center;
justify-content:space-between;
align-items:center;
padding:0 7%;
margin:20px auto 0;}
.pager ul{display:flex; align-items:center;}
.pager ul li{position:relative;}
.pager ul li + li{margin-left:5px;}
.pager ul li p{
color:#f9c000;
font-size:28px;
filter:drop-shadow(1px 1px 0 #3d3100) drop-shadow(-1px -1px 0 #3d3100) drop-shadow(-1px 1px 0 #3d3100) drop-shadow(1px -1px 0 #3d3100);
transform:translateZ(0);
padding:5px;
transition:.2s ease-in-out;}

.pager ul li.current p,
.pager ul li:hover p{color:#fff; filter:drop-shadow(0 0 2px #f9c000) drop-shadow(0 0 2px #f9c000); cursor:pointer;}

/*ページ件数多いとき*/
.pager ul.num li{padding-left:0;}
.pager ul.num li:not(.max)::before{display:none;}
.pager ul.num li.max + li{margin-left:0;}
.pager ul.num li.max::before{position:absolute; content:"･･･" !important; color:#3d3100 !important; font-family:'Noto Sans JP', sans-serif; font-weight:900; top:7px;}
.pager ul.num li.max:first-child{margin-right:25px;}
.pager ul.num li.max:first-child::before{right:-25px; left:unset;}
.pager ul.num li.max:last-child{margin-left:25px;}
.pager ul.num li.max:last-child::before{left:-25px;}

.pager ul.num li.none{width:0;}
.pager ul.num li.none.max:first-child{margin-right:0;}
.pager ul.num li.none.max:last-child{margin-left:0;}
.pager ul.num li.none + li.none,
.pager ul.num li.none + li:not(.none),
.pager ul.num li:not(.none) + li.none{margin-left:0;}

/*ページ送り*/
.pager ul li.none{opacity:0; pointer-events:none;}
.pager ul.back p::before{content:"前へ";}
.pager ul.next p::before{content:"次へ";}

@media screen and (max-width:1200px){.pager{padding:0 10%;}}
@media screen and (max-width:640px){
.pager{background-image:url(../img/common/pager/sp.jpg); padding:5px 20px; border-radius:20px; border:2px solid #3d3100;}
.pager ul li p{font-size:18px;}}
@media screen and (max-width:640px){.pager{padding:5px; border-radius:5px;}}
@media screen and (max-width:420px){
.pager ul li p{padding:3px;}
.pager ul.num li.max::before{top:4px;}
.pager ul.back p::before{content:"前";}
.pager ul.next p::before{content:"次";}}

/*
================================================================================================================
権利表記
================================================================================================================
*/
#copyright{
position:relative;
color:#fff;
font-family:'Noto Sans JP', sans-serif;
font-size:clamp(0.813rem, 0.767rem + 0.23vw, 0.938rem);
text-align:center;
padding:20px 0;
text-shadow:0 0 2px #000 , 0 0 4px #000 , 0 0 4px #000;
z-index:10;}

/*
================================================================================================================
TOPに戻る
================================================================================================================
*/
#page-top{
position:fixed;
bottom:10px;
right:10px;
width:110px;
height:106px;
background-image:url(../img/common/btn/pagetop/btn.png);
background-size:100% auto;
transition:all .3s ease-in-out;
opacity:0;}
#page-top::before,
#page-top::after{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-size:100% auto;
transition:all .3s ease-in-out;}
#page-top::before{width:161px; left:calc(50% - 80.5px); background-image:url(../img/common/btn/pagetop/on.png); opacity:0;}
#page-top::after{background-image:url(../img/common/btn/pagetop/text.png);}

#page-top:hover{filter:brightness(150%);}
#page-top:hover::before{opacity:1;}

#page-top.scroll{opacity:1;}

@media screen and (max-width:800px){
#page-top{width:80px; height:77px;}
#page-top::before{width:117px; left:calc(50% - 58.5px);}}

/*
================================================================================================================
ページ遷移アニメ
================================================================================================================
*/
.fade{
animation-name:fadeIn;
animation-duration:1s;
animation-timing-function:ease-in-out;
animation-fill-mode:both;
animation-delay:1s;}
.fade > .fade{animation-delay:2s;}

#fade{
animation-name:fadeIn;
animation-duration:.7s;
animation-timing-function:ease-in-out;
animation-fill-mode:both;
animation-delay:.5s;}

@keyframes fadeIn{
0%{opacity:0;}
100%{opacity:1;}}