/*パターンAまとめ*/
/*基本*/
/********背景白余白あり*******/
#sk_new_all01{
width:480px;
background:#fff;
margin:0px auto;
padding:0;
padding:0;
}

/*--------------------------------
▲ ウィンドウ幅が800px以上の場合 ▲
--------------------------------*/
/*--------------------------------
▼ ウィンドウ幅が799px以下の場合 ▼
--------------------------------*/
@media screen and (max-width:799px){
#sk_new_all01{
width:100%;
background:#FFF;
margin:0 auto;
padding:0px 0px;
}
}

.sk_new_floatcl{
clear:both;　/*floatの解除、ここがポイント*/
}




/*BOX系*/
.sk_new_box_221115_01{
padding:2px 0px;
background: #EEEEEE;
}

.sk_new_box_221115_02{
width:98%;
marigin:0px atuo;
padding:4px;
font-size:18px;
font-weight:bold;
line-height:1.2em;
color:#333;
background:#FFF;/*#0085B2*/
}

.sk_new_box_221115_03{
padding:4px;
width:15%;
background:#FFF;/*#0085B2*/
float:left;
}

.sk_new_box_221115_04{
padding:4px;
width:80%;
font-size:18px;
font-weight:bold;
line-height:1.2em;
/*background:#FA5A9A;#0085B2*/
float:left;
line-height:1.5em;
}

.sk_new_box_221115_05{
margin:4px auto 0px auto;
text-align:right;
}

/*カテゴリ*/
.sk_new_box_221115_06{
margin:4px 4px;
padding:4px;
background: #4A8AF3;/*ボタン色*/
float:left;
font-weight:bold;
color:#FFF;
}

.sk_new_box_221115_07{
margin:4px 4px;
padding:4px;
background: #EA4897;/*ボタン色*/
float:left;
font-weight:bold;
color:#FFF;
}

.sk_new_box_221115_08{
width:7%;
padding:0px;
float:left;
}

.sk_new_box_221115_09{
width:18%;
padding:4px;
float:left;
}

.sk_new_box_221115_10{
width:68%;
padding:4px;
float:left;
}

.sk_new_box_221115_11{
width:100%;
padding:4px;
border-bottom:1px solid #999;
}

.sk_new_box_221115_12{
margin:0px auto 4px auto;
width:96%;
padding:8px 4px;
background: #FFF;/*ボタン色*/
border-radius: 0px 0px 6px 6px;
box-shadow: 1px 1px 3px #333;    
}

.sk_new_box_221115_13{
width:35%;
padding:4px;
float:left;
}

.sk_new_box_221115_14{
width:60%;
padding:4px;
float:left;
}

.sk_new_box_221115_15{
width:100%;
padding:4px;
line-height:1.0em;
}

.sk_new_box_221115_16{
padding:2px 4px;
line-height:1.4em;
}

.sk_new_box_221115_17{
background:#FFF;/*#0085B2*/
border-left: 6px solid #22B84E;
padding:6px 4px;
}

.sk_new_box_221115_18{
padding:2px 4px;
line-height:1.4em;
}

.sk_new_box_221115_19{
padding:2px 0px 0px 0px;
width:15%;
float: left;    
}
.sk_new_box_221115_20{
width:80%;
float: left;    
}


.sk_new_box_221115_21 {
margin:4px auto;
  position: relative;
  padding: 8px 4px;
  background: #fff100;
font-weight: bold;
color:#555;/*#009577*/
font-size:20px;
line-height: 1.3em;
letter-spacing: 0.5px;
}

.sk_new_box_221115_21:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 2px solid #555;
}


.sk_new_box_221115_22{
font-size:14px;
color:#555;
line-height: 1.4em;
}

/*画像系*/
/*バナートリミング*/    
img.sk_new_img_221115_01{
width: 100%;
height: 180px;
object-fit: cover;
object-position: 50% 0%;
border: solid 2px #5EB494;/*#0099D9*/
border-radius: 14px;
}

img.sk_new_img_221115_02{
filter: drop-shadow(5px 5px 5px #555);
}

/*span系*/

/*日付*/
span.sk_new_text_221115_01{
font-size:10px;
/*text-shadow: 1px 1px 1px #CCC;*/
color:#000;/*#EA0000赤*/
font-weight:bold;
}

span.sk_new_text_221115_02{
padding:20px 0px;
color:#555;
font-size:20px;
font-weight:bold;
}

/*ハイライト*/
span.sk_new_text_221115_03{
margin:4px auto;
font-weight: bold;
color:#555;/*#009577*/
font-size:20px;
line-height: 1.2em;
border:
}

span.sk_new_text_221115_04{
font-size:14px;
color:#555;
}

/*ランキング前文言*/
span.sk_new_text_221115_05{
font-size:16px;
font-weight:bold;
/*text-shadow: 1px 1px 1px #CCC;*/
color:#EA0000;/*#EA0000赤*/
}

/*h系*/
h2#sk_new_h2_01{
font-weight:bold;
font-size:22px;
line-height: 1.2em;
letter-spacing: 2px;
color:#22B84E;
}

/************おすすめSP枠************/
.sk_new_box_221122_01{
width:98%;
margin:0px auto;
padding:4px 2px;
background:#FFF;/*#0085B2*/
border-bottom: 1px solid #999;
}

.sk_new_box_221122_02{
width:20%;
padding:4px;
float:left;
}

.sk_new_box_221122_03{
width:72%;
padding:4px;
float:left;
border-bottom: 0px solid #999;
line-height: 1.4em;
color:#555;
}

.sk_new_box_221122_04{
width:98%;
margin:0px auto 6px auto;
}

.sk_new_box_221122_05{
margin:6px auto 0px auto;
width:96%;
padding:4px;
line-height: 1.4em;
font-weight:bold;
background:#FFF;/*#0085B2*/
}

.sk_new_btn_221122_01{
margin: 0 0 0 auto;
padding:4px 4px;
width: 40%;
border-radius: 18px;
background:#EEE;/*#0085B2*/
color:#3478F6;
font-weight:bold;
text-align:center;
}

span.sk_new_text_221122_01{
font-size:16px;
font-weight:bold;
color:#EA0000;/*#EA0000赤*/
}

span.sk_new_text_221122_02{
font-size:24px;
font-weight:bold;
color:#EA0000;/*#EA0000赤*/
}


/***********オール枠***********/
.sk_new_box_221123_01{
margin:4px 4px;
padding:4px;
background: #4A8AF3;/*ボタン色*/
float:left;
font-weight:bold;
color:#FFF;
}

.sk_new_box_221123_02{
margin:4px 4px;
padding:4px;
background: #EA4897;/*ボタン色*/
float:left;
font-weight:bold;
color:#FFF;
}

.sk_new_box_221123_03{
margin:4px auto 0px;
padding:26px 2px;
font-weight:bold;
font-size:14px;
text-align:center;
border: 1px solid #22B84E;/*【変更箇所】ボーダーカラー*/
color:#FFF;/*【変更箇所】文字色*/
background: #22B84E;/*#EA4581【変更箇所】ランキング枠色*/
}


/*2桁ランキング10～*/ 
.sk_new_box_221123_04{
margin:4px auto 0px;
padding:26px 2px;
font-weight:bold;
font-size:14px;
text-align:center;
border: 1px solid #22B84E;/*【変更箇所】ボーダーカラー*/
color:#FFF;/*【変更箇所】文字色*/
background: #22B84E;/*#EA4581【変更箇所】ランキング枠色*/
}

.sk_new_box_221123_05{
width:7%;
padding:0px;
float:left;
}

.sk_new_box_221123_06{
width:18%;
padding:4px;
float:left;
}

.sk_new_box_221123_07{
width:68%;
padding:4px;
float:left;
}

.sk_new_box_221123_08{
width:100%;
padding:4px;
border-bottom:1px solid #999;
}

.sk_new_box_221123_09{
margin:0px auto 4px auto;
width:96%;
padding:8px 4px;
background: #FFF;/*ボタン色*/
border-radius: 0px 0px 6px 6px;
box-shadow: 1px 1px 3px #333;    
}

.sk_new_box_221123_10{
width:98%;
padding:4px;
}

.sk_new_box_221123_11{
width:100%;
padding:4px;
line-height:1.0em;
}


/*バナートリミング*/    
img.sk_new_img_221123_01{
width: 100%;
height: 180px;
object-fit: cover;
object-position: 50% 0%;
}


span.sk_new_text_221123_01{
padding:20px 0px;
color:#186CA5;
font-size:20px;
font-weight:bold;
}

/*アプリ公式文章*/
span.sk_new_text_221123_02{
font-size:14px;
color:#555;
}

span.sk_new_text_221123_03{
width:100%;
position: relative;
font-weight: bold;
padding: 16px 0px;
margin: 0px auto;
border-radius: 6px 6px 6px 6px;
font-size: 16px;/*文字サイズ*/
background-color: #FFD24D;/*背景色*/
color: dodgerblue;/*文字色*/
display: inline-block;
text-align:center;
    /*text-shadow: 1px 1px 0px rgb(0, 0, 0, 0.3);*/
    box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
}



h2#sk_new_h2_221123_01{
margin:4px auto;
display: block;
font-size: 20px;
line-height: 1.2em;
font-weight: bold;
letter-spacing: 0.5px;
color:#E93D91;/*#009577*/
/*text-shadow: 1px 1px 1px #CCC;*/
padding:0px 0px 2px 0px;
}



.sk_new_box_230216_01 {
margin:4px auto;
padding: 8px 4px;
font-weight: bold;
color:#EA4897;/*#009577*/
font-size:20px;
line-height: 1.3em;
letter-spacing: 0.5px;
}



/*ファーストビュー画像＆文字*/
.fv_relative01 {
  position: relative;
}

.fv_absolute01 {
width:94%;
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
}

.fv_box_right_01{
width:84%;
float:left;
}

.fv_box_right_02{
width:98%;
padding:6px;
margin:0px auto;
background: linear-gradient(to left,rgba(204,28,250,0.5),rgba(204,28,250,1));/*紫204,28,250 ミント48,205,188*/

border:0px solid #000;
border-left:1px solid #000;
border-bottom:1px solid #000;
border-radius: 10px;
}



.fv_box_left_01{
width:12%;
float:left;
}
.fv_box_left_02{
width:60%;
margin:0px auto;
padding:6px;
background:#FFFF00;
border:1px solid #000;

}


.fv_absolute02 {
position: absolute;
top: 4px;
left: 2px;

}

.fv_box_03{
text-align:right;
padding:4px;
background: rgba(255,255,255,0.9);/*紫204,28,250 ミント48,205,188*/
}

.fv_box_01{
width:94%;
text-align:right;
margin:6px auto;
padding:6px;
background:#FFF;
border-left:0px solid #000;
border-bottom:0px solid #000;
}


/*日付*/
span.fv_text_230215_01{
font-size:12px;
/*text-shadow: 1px 1px 1px #CCC;*/
color:#ED7B84;/*#EA0000赤*/
font-weight:bold;
}

/*ファーストビュー画像＆文字*/



/*バウンドアニメーション*/
@keyframes bound-anim{
  0%{transform: translateY(0);}
  100%{transform: translateY(10px);}
}

/*** 全文字にアニメーションを適用 ***/
span.bound span{
  display: inline-block; /*横並びにしつつアニメーションを適用*/
  animation: .5s bound-anim ease-in infinite alternate;
  font-size: 12px;
  font-weight: bold;
color:#FF0000;
}

/*** 各文字のスタート時間をずらす ***/
/* 1文字目 */
.bound span:nth-child(1){
  animation-delay: 0;
}
/* 2文字目 */
.bound span:nth-child(2){
  animation-delay: 0.2s;
}
/* 3文字目 */
.bound span:nth-child(3){
  animation-delay: 0.4s;
}
/* 4文字目 */
.bound span:nth-child(4){
  animation-delay: 0.6s;
}
.bound span:nth-child(5){
  animation-delay: 0.8s;
}
/*** 装飾用 ***/
p{
  font-size: 12px;
  font-weight: bold;
color:#FF0000;
}





.sk_box_230412_01 {
line-height: 1.3em;
}

.sk_btn_230412_01{
text-align:center;
}

/*アプリ公式文章*/
span.sk_text_230412_01{
font-size:14px;
color:#555;
}



.sk_btn_230412_02 {
width:100%;
position: relative;
font-weight: bold;
padding: 16px 0px;
margin: 0px auto;
border-radius: 6px 6px 6px 6px;
border: 2px solid #555;
font-size: 18px;/*文字サイズ*/
background-color: #FFF100;/*背景色*/
color: dodgerblue;/*文字色*/
display: inline-block;
text-align:center;
    /*text-shadow: 1px 1px 0px rgb(0, 0, 0, 0.3);*/
    box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
}
.sk_btn_230412_02:before {
    font-family: FontAwesome;
    content: '';/*好きなアイコン*/
    color: #eeee22;/*アイコンの色*/
    margin-right: 3px;
}
a:hover .sk_btn_230412_02 {
    background-color: #FFFA91;/*触れたときの背景色*/
    color: #FF0000;/*触れたときの文字色*/
    box-shadow: 0 0px 0 rgb(0, 0, 0, 0.3);
    animation-play-state: paused;
    top: 3px;
}







img.fv_img_230412_01{
width: 100%;
height: 80px;
object-fit: cover;
object-position: 50% 10%;
}




.pekopeko {
    animation: pekopeko 2s infinite;
    box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
}
@keyframes pekopeko {
    0% {
        box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
        top: 0px;
    }
    10% {
        box-shadow: 0 0 0 rgb(0, 0, 0, 0.3);
        top: 3px;
    }
    20% {
        box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
        top: 0px;
    }
    30% {
        box-shadow: 0 0 0 rgb(0, 0, 0, 0.3);
        top: 3px;
    }
    40% {
        box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
        top: 0px;
    }
}