@font-face {
font-family: AmazonEmberDisplay_Bd;
src: url(/extra/saponaws_202008/font/AmazonEmberDisplay_Bd.ttf);
}

/*body{
font-family: 'AmazonEmberDisplay_Bd','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro';
}*/






/* フレーム設定-------------------------------------------------------------------------------- */

#adspecial_saponaws_202008{
padding: 0;

}

#adspecial_saponaws_202008.adspecial_type1{
max-width:none !important;
width:100% !important;
background-color:#1e2838;
position:relative;
}

footer{
margin-top:0;
}


.block_sponsored {
padding: 3% 0;
text-align: center;
background-color:#222;
color:#fff;
}

.block_sponsored a{
color:#ec912d;
}







/* headline-------------------------------------------------------------------------------- */


@keyframes fade-in{
  0% {
    opacity: 0;}

  100% {
    opacity: 1;}
}



@keyframes flash {
  0%,15%,85%,100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}




@keyframes line {
  0% {width:0;}
  100% {width:100%;}
}


.hero-area{
margin:0 auto;
padding:0 0 3% 0;
height:100%;
border-radius:10px;
position:relative;
z-index:100;
background:url(/extra/saponaws_202008/media/bg-hero.png) center 0 no-repeat;

}

.hero-area .navigation_block{
margin:0 0 20px 0;
background-color:#35455e;
padding:5px 0;
box-shadow:0 0 15px #0c141c;
width:100%;
}

.hero-area .navigation_block ul{
display:flex;
justify-content:center;
}

.hero-area .navigation_block ul li{
padding:0 3%;
text-align:center;
font-size:100%;
font-family: 'AmazonEmberDisplay_Bd','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro';
}


.hero-area .navigation_block ul li a{
color:#fff !important;
font-weight:bold;
}


.hero-area .navigation_block ul li a:hover{
color:#ec912d !important;
}


a.anchor{/*ページ内リンクのズレ*/
    display: block;
    padding-top: 50px;
    margin-top: -50px;
}



.hero-area .header_block{
padding:2% 12%;
}



.hero-area h1{
font-size:180%;
text-align:center;
line-height:1.4;
color:#fff;
/*font-family: 'Century Gothic','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro';*/
font-family: 'AmazonEmberDisplay_Bd','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro';
animation: fade-in 0.5s linear 0.5s forwards;
opacity:0;
line-height:1.4;
}

.hero-area h1 span{
font-size:80%;
display:block;
margin-top:15px;
}


.hero-area .count_block{
margin:0 auto;
padding:15px 12%;
text-align:center;
/*background-color:rgba(0,0,0,0.4);*/
opacity:0;
animation: fade-in 0.5s linear 1.0s forwards;
}


.hero-area .count_block span{
color:#ec912d;
font-size:180%;
font-weight:bold;
border-bottom:1px dotted #ec912d;
padding-bottom:10px;
/*font-family: 'Century Gothic','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro';*/
font-family: 'AmazonEmberDisplay_Bd','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro';
animation: flash 1.5s linear infinite;
}


.hero-area .count_block .count{
font-size:280px;
color:#fff;
line-height:1.2;
font-weight:bold;

/*font-family: 'Century Gothic','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro';*/
font-family: 'AmazonEmberDisplay_Bd','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro';
}




.lead_block{
margin:0 2% 2%;
padding:0;
border-radius:10px;
position:relative;
/*font-family: 'Century Gothic','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro';*/
font-family: 'AmazonEmberDisplay_Bd','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro';
opacity:0;
animation: fade-in 0.5s linear 1.0s forwards;
}


.lead_block:before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

.lead_block p{
color:#fff;
padding:20px 0;
font-size:100%;
line-height:1.5;
}



/*続きを読む*/

.hide-text {
    display: none;
}


button.readmore {
    position: relative;
    height: 90px;
    width: 90px;
    margin: 0 auto;
    display: block;
    background-color: transparent;
    color: #fff;
    padding-bottom: 40px;
    border: none;
    outline: 0;
    transition: .5s;
font-size:18px;
cursor: pointer;
}
 
button.readmore:after {
    content: " ";
    position: absolute;
    width: 30px;
    height: 30px;
    border-top: solid 3px #fff;
    border-right: solid 3px #fff;
    transform: rotate(135deg);
    right: 30px;
    top: 28px;
    transition: .3s;
}

button.readmore:hover{
color:#ec912d;
}
 
button.readmore:hover:after {
    top: 40px;
    border-top: solid 3px #ec912d;
    border-right: solid 3px #ec912d;
}
 
.on-click {
    color: transparent!important;
}
 








/* contents-------------------------------------------------------------------------------- */


.slide{
    transform:translateY(150px);
    opacity: 0;
    transition:1s;
}

.slidein {
    transform:translateY(0);
    opacity: 1;
}





.parts-left{
position:absolute;
left:3%;
bottom:-50px;
z-index:1;
}

.parts-right{
position:absolute;
right:3%;
bottom:-50px;
z-index:1;
}



.parts-left-top{
position:absolute;
left:3%;
top:45px;
z-index:1;
}

.parts-right-top{
position:absolute;
right:3%;
top:45px;
z-index:1;
}





.category-area{
padding:3% 10%;
position:relative;
overflow:hidden;
}


.category-area-movie{
padding:0 25% 3% !important;
position:relative;
overflow:hidden;
}



.category-a{
background-color:#1e2838;
}

.category-b{
background-color:#0c141c;
}

.category-c{
background-color:#35455e;
}


.category-d{
background-color:#4f5f79;
}

.category-e{
background-color:#dd9d05;
}


.category-area .label{
background-color:#dd9d05;
color:#fff;
margin:0 auto 15px;
padding:5px;
text-align:center;
/*font-family: 'Century Gothic','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro';*/
font-family: 'AmazonEmberDisplay_Bd','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro';
font-size:100%;
font-weight:bold;
width:120px;
}

.category-area .new{
color:#ec912d;
text-align:left;
font-weight:bold;
font-size:70%;
margin-right:5px;
display:inline;
}


.category-area h2{
margin:0;
padding:3% 0 25px;
text-align:center;
/*font-family: 'Century Gothic','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro';*/
font-family: 'AmazonEmberDisplay_Bd','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro';
font-size:140%;
color:#fff;
line-height:1.3;
transition: 0.5s ease 1.0s;
line-height:1.6;
}

.category-area h2 span{
font-size:80%;
display:block;
}


.category-area a:hover img{
transform:scale(1.02, 1.02);
transition:0.3s ease;
box-shadow:0 0 20px #fff;
}

.category-area .category-ttl{
margin-bottom:15px;
text-align:center;
font-size:160%;
font-weight:bold;
color:#ec912d;
}




/*slide setting*/
.category-area .slide-area{
width:100%;
margin:-20px auto 0;
}

.category-area .slide-area li a{
text-align:center;
display:block;
}

.category-area .slide-area li a img{
max-width:20%;
text-align:center;
margin:0 auto;
}

/*slide setting end*/



.item_block{
margin:0 auto;
padding:4% 0 2%;
text-align:center;
color:#fff;
position:relative;
z-index:100;
}

.item_content{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}

.item_content .item{
margin:0 0 45px;
width:45%;
}




.item_block img{
max-width:100%;
display:block;
margin:0 auto 10px;
}

.item_block img.wp{
max-width:50%;
}



.movie_block{
width:100%;
margin:3% 0 0;
padding-top:56.25%;
position:relative;
z-index:100;
}


.movie_block iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}




/*pagetop*/

.page-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}


.page-top a{
display: block;
padding: 8px 0 0 8px;
border-radius: 30px;
width: 40px;
height: 40px;
background-color: #fff;
color: #35455e;
text-align: center;
position:relative;
}


.page-top a:hover{
background-color: #dd9d05;
transition:0.5s ease;
}


.page-top a:after{
    position: absolute;
    top: 50%;
    left: 50%;
    content: '';
    width: 12px;
    height: 12px;
    margin: -3px 0 0 -6px;
    border-left: 2px solid #35455e;
    border-bottom: 2px solid #35455e;
    transform: rotate(135deg);
    box-sizing: border-box;
}






/* responsive -------------------------------------------------------------------------------- */




@media screen and (max-width:800px){




.hero-area{
padding:0 0 3% 0;
height:100%;
position:relative;
z-index:100;
background:url(/extra/saponaws_202008/media/bg-hero_s.png) center top no-repeat;
background-size:contain;
}



.hero-area .count_block .count{
font-size:180px;
}

.hero-area .count_block span{
font-size:130%;
}




.parts-left,
.parts-right,
.parts-left-top,
.parts-right-top{
max-width:40%;
}

.parts-left,
.parts-right{
bottom:-20px;
}




.item_block{

}

.item_block h2{
font-size:130%;
}


.item_block h2 span:before{
top:-50px;
}


.item_block img{
max-width:80%;
}



}




@media screen and (max-width:640px){



.hero-area{
background:url(/extra/saponaws_202008/media/bg-hero_s.png) center top no-repeat;
background-size:contain;
background-position:center bottom;
height:auto;
}

.hero-area .header_block{
padding:2% 5%;
}


.hero-area h1{
font-size:130%;
}


.hero-area .title{
font-size:150%;
width:100%;
}



.hero-area .navigation_block ul{
display:flex;
justify-content:center;
flex-wrap:wrap;
}

.hero-area .navigation_block ul li{
width:48%;
font-size:90%;
margin:10px 0;
}


.hero-area .count_block .count{
font-size:120px;
}

.hero-area .count_block span{
font-size:120%;
border-bottom:none;
}


.lead_block{
margin:0 4%;
padding:6% 0 0;
font-size:90%;
}


.item_block{
padding:8% 0;
background-position:top center;
}




.category-area h2{
font-size:110%;
margin:15px auto;
}


.category-area .label{
width:50%;
}


.category-area-movie{
padding:0 20% 5% !important;
}


.item_content{
display:block;
}

.item_content .item{
margin:0 0 25px;
width:100%;
}



.category-area .slide-area li a img{
max-width:60%;
}

.category-area .category-ttl{
font-size:130%;
}




}




@media screen and (max-width:480px){

.hero-area .count_block .count{
font-size:90px;
}

}




/* slider ---------------------------------------------------------------------------------------------*/


/* slick.css */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}




/* slick-theme.css */


.slick-loading .slick-list
{
    background: #fff url('./ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('./fonts/slick.eot');
    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 30px;
    line-height: 30px;

    position: absolute;
    top: 15px;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .75;
    color: #050505;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: 1;
    color: #ec912d;
}


@media screen and (max-width:640px){


.slick-dots li button:before
{
    position: absolute;
    top: 0;
    left: 0;
}


}