* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}



body {
    font-size: 13px;
    line-heihgt: 1.5;
    font-family: Helvetica, HiraKakuProN-W3, meiryo, メイリオ, sans-serif;
    background: #ffffff;
}

video {
    width: 100%;
    position: relative;
}

.video_title img {
    position: absolute;
}


.step_flow {
    background: #222222;
    color: #FFF;
    font-size: 19px;
    text-align: center;
    border-radius: 10px;
    margin: 15px 10px 0px 10px;
    padding: 10px 5px;
}

.flow_list {
    position: relative;
    margin: 20px 10px 0px 10px;
    padding: 10px;
    background: #f1f1f1;
    border-radius: 10px;
    font-size: 15px;
    color: #000;
    line-height: 1.6em;
    letter-spacing: 0px;
}

.flow_list :before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #f1f1f1;
}

.flow_list3 {
    position: relative;
    margin: 20px 10px 0px 10px;
    padding: 10px;
    background: #f1f1f1;
    border-radius: 10px;
    font-size: 15px;
    color: #000;
    line-height: 1.6em;
    letter-spacing: 0px;
}

.step_list {
    margin-bottom: 10px;
    padding: 7px 5px;
    background: #6385ff;
    border-radius: 5px;
    display: flex;
    font-size: 16px;
}

.step_list .head {
    padding-right: 5px;
    margin-top: 5px;
    width: 100%;
    font-weight: bold;
    text-align: center;
    color: white;
}

.step_list .text {
    width: 160%;
    color: #000;
    padding: 5px 5px;
    background: #FFF;
    font-weight: bold;
    border-radius: 5px;
    text-align: center;
}

.step_list3 {
    margin-bottom: 10px;
    padding: 7px 5px;
    background: #ff6372;
    border-radius: 5px;
    display: flex;
    font-size: 16px;
}

.step_list3 .head {
    font-size: 18px;
    padding: 10px 5px;
    width: 100%;
    font-weight: bold;
    text-align: center;
    color: white;
}

.step_list3 .text {
    font-size: 20px;
    width: 160%;
    color: #000;
    background: #FFF;
    font-weight: bold;
    padding: 10px 5px;
    border-radius: 5px;
    text-align: center;
}

.app_midasi {
    text-align: center;
    border: solid 2px #000;
    background: #ff5c86;
    border-radius: 13px;
    padding: 7px 5px 7px 17px;
    margin: 15px 10px 5px 10px;
}

.kiji02_image {
    text-align: center;
    margin: 0px;
    position: relative;
    margin: 10px 10px 0px 10px;
}

.kiji02_image img {
    width: 100%;
}

.kiji04_image {
    text-align: center;
    margin: 5px 0px 10px;
}

.kiji04_image img {
    width: 100%;
}

.app_midasi_text {
    font-size: 22px;
    font-weight: bold;
    color: #FFF;
}

#contents_mds {
    background: #ffffff;
    padding: 0 15px 0px;
    word-break: break-all;
}

.article_content img {
    max-width: 100%;
    margin: 5px 13% 0px 13%;
}

.midashi0000 {
    font-size: 25px;
    font-weight: bold;
    margin: 15px 0 20px 0;
    line-height: 1.4em;
    color: #ff2658;
}

.midashi0001 {
    font-size: 25px;
    font-weight: bold;
    margin: 15px 0 20px 0;
    line-height: 1.4em;
    color: #ff26b2;
}

.header_obi {
    color: #4d4d4d;
    align-items: center;
    justify-content: flex-end;
    padding: 4px 10px 0px;
    font-size: 14px;
}


.kiji_image {
    margin: 0px 0px;
    background: #ffffff;
    line-height: 9px;
    padding: 0px 0px 0px 0px;
}


.kiji_image img {
    width: 100%;
}

.kiji_image_gif {
    margin-bottom: 5px;
    background: #ffffff;
}


.kiji_image_gif img {
    width: 100%;
    top: 41px;
}





/*-------------------- app revueSlider JS css --------------------*/


.swiper-container {
    width: 100%;
    display: flex;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}

.swiper-wrapper {
    display: flex;
    transition-duration: 0ms;
    transform: translate3d(0px, 0px, 0px);
}

.swiper-slide {
    height: auto;
    font-size: 18px;
    padding: 0px 0px 5px 0px;
    margin: 0px 0px 0px 0px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
}

/*-------------------- app revueSlider JS css --------------------*/
/*-------------------- app revueSlider --------------------*/
.revueSlider_main {
    padding: 10px 15px 20px 15px;
    position: relative;
}

.revueBox {
    border-radius: 5px;
    border: 2px solid #3a3a3a;
    box-sizing: border-box;
    background-color: #f5f5f5;
}

.revueBoxTitle {
    padding: 3px 10px;
    color: #FFF;
    background-color: #3a3a3a;
    border-radius: 0;
    font-weight: bold;
    font-size: 15px;
}

.revueContentsBox {
    font-size: 14px;
    background-color: #f5f5f5;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.revueContentsHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
}

.revue_t {
    font-weight: bold;
    font-size: 14px;
}

.revueContentsHeaderRight {
    font-size: 14px;
    width: 25%;
}

.revue_comment {
    font-size: 14px;
}

/*-------------------- app revueSlider --------------------*/




/*-------------------------
  右から左に流れるテキスト
-------------------------*/
.text-ani_sample {
    margin-top: -3px;
    background: #000000;
    overflow: hidden;
    padding: 5px;
}

.text-ani_sample p {
    margin: 0;
    font-size: 19px;
    /*文字サイズ*/
    color: #fff;
    /*文字の色*/
    animation: flowing 6s linear infinite;
    /*アニメーション*/
    transform: translateX(100%);
    /*最初の位置*/
}

@keyframes flowing {
    100% {
        transform: translateX(-100%);
        /*終了の位置*/
    }

}


/*-------------------------
  複数行テキストを流す
-------------------------*/
.text-ani_ribbon {
    margin-top: -3px;
    background: #000000;
    overflow: hidden;
    padding: 3px;

}

.text-ani_ribbon ul {
    margin: 0;
    padding-left: 100%;
    display: inline-block;
    white-space: nowrap;
    animation: flowing05 10s linear infinite;
    transform: translateX(0);
}

.text-ani_ribbon ul li {
    display: inline;
    margin: 0 100px 0 0;
    color: #fff700;
    font-size: 18px;
}

@keyframes flowing05 {
    100% {
        transform: translateX(-100%)
    }
}


.kiji_image_top {
    margin: 0px 0px;
    background: #1cb900;
    line-height: 9px;
    padding: 9px 0px 11px 0px;
}


.kiji_image_top img {
    width: 100%;
}


.kiji_image_asobi {
    margin: 0px 0px;
    background: #0F9E00;
    line-height: 9px;
    padding: 10px 0px 0px 0px;
}


.kiji_image_asobi img {
    width: 100%;
}

.body_image_gif {
    margin: 0px 0px;
    background: #FFF;
    line-height: 0px;
    padding: 10px 0px 5px 0px;
}


.body_image_gif img {
    width: 100%;
}


.body_image {
    margin: 0px 0px;
    line-height: 0px;
    padding: 5px 0px 10px 0px;
}

.body_image img {
    width: 100%;
}


.wrapper {
    overflow: hidden;
}

.wrapper_i {
    overflow: hidden;
    background-image: url(https://img-storage.com/lp/2021/o_u/offpako_gal/item/back.jpg);
    background-size: auto;
}


#contents {
    background: #ffffff;
    padding: 0 20px 20px;
    word-break: break-all;
}

#header {
    text-align: center;
    height: auto;
    margin-bottom: -4px;
    vertical-align: bottom;
    position: relative;
}

#header img {
    width: 100%;
}


#header .head_text {
    top: 30%;
    position: absolute;
}

#header .head_text img {
    width: 100%;
}

#header .ol_logo {
    top: 4%;
    position: absolute;
    left: 0%;
    width: 55%;
    animation: anime1 0.7s ease 0s infinite alternate;
    transform-origin: center;
}

#header .ol_title {
    top: 4%;
    position: absolute;
    right: 6%;
    width: 85%;
}

#header .ol_title img {
    width: 90%;
}


#header .head_image {
    position: relative;
    margin: 0px 0px;
    line-height: 0px;
    padding: 0px;
}



.kiji {
    font-size: 16px;
    color: #333;
    line-height: 1.6em;
    letter-spacing: 0px;
    font-weight: bold;
}

.yellow_center {
    text-align: center;
}

.rank img {
    width: 100%;
}

z
/********** アプリボックス**********/

.app_box3 {
    max-width: 80%;
    border: 1px solid #cdcdcd;
    border-radius: 8px;
    margin: 15px auto 25px;
    padding: 10px;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    align-items: center;

}

.app_box_icon3 img {
    border-radius: 20px;
    width: 90px;
}

.rank_comment_o .app_box_inner {
    display: flex;
    justify-content: flex-start;
    padding: 20px 0px 15px 25px;
}

.rank_comment_o .rank_midasi h3 {
    position: relative;
    padding: 15px 10px 10px 10px;
    color: #000000;
    border-radius: 10px 10px 10px 10px;
    background: #FFF;
    font-size: 16px;
}


.rank_comment_o .app_box_icon3 img {
    border-radius: 20px;
    width: 75px;
}

.app_comment {
    margin-left: 15px;
}


.app_box_inner {
    display: flex;
    justify-content: flex-start;
    padding: 20px 0px 15px 10px;
}

.app_box_info3 {
    margin-top: 0%;
    padding-left: 15px;
    display: flex;
    align-content: center;
    flex-direction: column;

}

.app_box_namme {
    margin: 0px 0px 7px 0px;
}

.app_box_namme_app {
    display: flex;
}

.app_box_namme_app_inner {
    font-weight: bold;
    font-size: 19px;
}

.app_box_namme_app_tag {
    border: 1px solid #ff2266;
    color: #ff2266 !important;
    font-size: 10px !important;
    padding: 0 3px;
    margin-left: 10px;
    display: flex;
    align-items: center;
}

.app_box_namme_app_tag02 {
    border: 3px solid #ff2266;
    color: #ff2266 !important;
    font-size: 10px !important;
    padding: 0 3px;
    margin-left: 10px;
    display: flex;
    align-items: center;
}

.app_box_namme_grey {
    font-size: 13px;
    color: #848484;
}

.install_btn {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}


.app_box4 {
    max-width: 100%;
    border-radius: 10px;
    margin: 0px auto 15px;
    padding: 0px 0px 10px 0px;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    align-items: center;
    background: #FFF;
}

.app_box_icon4 img {
    border-radius: 20px;
    width: 70px;
}


.app_box_o {
    max-width: 95%;
    border-radius: 10px;
    margin: 15px auto 15px;
    padding: 0px 0px 10px 0px;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    align-items: center;
    background: #FFF;
}

.app_box_icon_o img {
    border-radius: 20px;
    width: 70px;
}


.apptag01 {
    font-size: 12px;
    background: #ff2680;
    margin-right: 5px;
    color: #FFF;
    padding: 5px 10px;
    border-radius: 10px;
}

.apptag02 {
    font-size: 12px;
    background: #2691ff;
    margin-right: 5px;
    color: #FFF;
    padding: 5px 10px;
    border-radius: 10px;
}


.apptag03 {
    font-size: 12px;
    background: #ff8a26;
    margin-right: 5px;
    color: #FFF;
    padding: 5px 10px;
    border-radius: 10px;
}

.apptag02_o {
    font-size: 12px;
    background: #2691ff;
    margin-right: 5px;
    color: #FFF;
    padding: 5px 10px;
    border-radius: 10px;
}


.apptag03_o {
    font-size: 12px;
    background: #ff8a26;
    margin-right: 5px;
    color: #FFF;
    padding: 5px 10px;
    border-radius: 10px;
}



.star-rating {
    position: relative;
    display: inline-block;
    font-size: 20px;
    word-break: normal !important;
}

.star-rating .star-rating-item {
    position: absolute;
    overflow: hidden;
}

.star-rating:after {
    content: "★★★★★";
    color: #ccc;
}

.star-rating .star-rating-item:before {
    content: "★★★★★";
    color: #ffcc33;
}


.user_app {
    margin: 0px 5px;
}

.middle_center {
    text-align: center;
}



.rank_comment {
    margin: 10px 0px;
}



.rank_comment_catch img {
    width: 100%;
}


.rank_comment h2 {
    background: #FFF;
    font-size: 18px;
    font-weight: bold;
    margin: 10px -10px 10px -10px;
    padding: 10px 5px 11px 25px;
    line-height: 1.2;
    text-align: left;
    border-bottom: solid 2px #2693ff;
}

.rank_comment p {
    font-size: 15px;
}

.rank_comment_o h2 {
    background: #FFF;
    font-size: 18px;
    font-weight: bold;
    margin: 15px 0px 10px 0px;
    padding: 10px 5px 11px 25px;
    line-height: 1.2;
    text-align: left;
    border-bottom: solid 2px #2693ff;
}

.rank_comment_o p {
    font-size: 15px;
}

.rank_comment .rank_midasi {
    margin: 0px 15px 10px 15px;
    line-height: 26px;
}

.rank_comment_o .rank_midasi {
    margin: 0px 15px 10px 15px;
    line-height: 26px;
}


.rank_comment_o .rank_midasi h3 {
    position: relative;
    padding: 15px 10px;
    color: #000000;
    border-radius: 10px 10px 10px 10px;
    background: #FFF;
    font-size: 16px;

}


.rank_comment .rank_midasi h3 {
    position: relative;
    padding: 15px 10px;
    color: #000000;
    border-radius: 10px 10px 10px 10px;
    background: #FFF;
    font-size: 16px;

}




.install_bar {
    background: #ff6a00;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin: 10px 15px 20px;
    padding: 10px 10px;
    border-radius: 20px;
    font-size: 16px;
}

.user_app {
    margin: 0px;
}

.install_bar_text {
    margin-left: 3px;
}

.bar_icon {
    display: flex;
    align-items: center;
    justify-content: center;
}



.number {
    margin-top: 25px;
    margin-bottom: 10px;
}

.number img {
    width: 100%;
}

.rank_box {
    border: 2px solid #FE2E64;
    padding: 20px 3px;
    margin: 40px 8px 50px 8px;
    background-color: #FFF;
}


.middle {
    font-weight: bold;
}


.appstar {
    font-size: 15px;
    margin-bottom: 5px;
}

.starScore {
    font-size: 15px;
}

.tag img {
    width: 27%;
}

.rank_image {
    margin-top: 20px;
    margin-bottom: 20px;
}

.rank_image img {
    width: 100%;
}

.rank_comment {
    margin: 10px 0px;
}

.ad1_ico .ad2_ico .ad3_ico img {
    width: 90%;
}

.rank_comment p {
    font-size: 15px;
}




.q_text {
    font-size: 16px;
    font-weight: bold;
    color: #FFF;
}

.a_text {
    font-size: 16px;
}


.appIconBoxRight {
    margin-left: 20px;
    display: flex;
    flex-direction: column;
}

a,
a:hover,
a:visited {
    text-decoration: none;
    color: #ffffff;
}

.appIconBox {
    display: flex;
    align-items: center;
    color: #333;
    font-size: 18px;
}




.user_app .ad_link1 img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    align-items: center;
}


.user_app .ad_link2 img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    align-items: center;
}


.user_app .ad_link3 img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    align-items: center;
}

.user_app_c {
    margin-top: 10px;
    text-align: center;
}

.user_app_c .ad_link1 img {
    width: 60%;
    height: auto;
    vertical-align: bottom;
    align-items: center;
}


.user_app_c .ad_link2 img {
    width: 60%;
    height: auto;
    vertical-align: bottom;
    align-items: center;
}


.user_app_c .ad_link3 img {
    width: 60%;
    height: auto;
    vertical-align: bottom;
    align-items: center;
}



.appbox {
    border-radius: 8px;
    box-sizing: border-box;
    padding: 10px;
}

.rank_dl {
    margin: 0 15px;
}


.rank_dl img {
    width: 100%;
    align-items: center;
}



#footer {
    padding: 3px;
    color: #fff;
    background: #484848;
    font-size: 10px;
    text-align: center;
}


.mailTo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.mailTo a {
    color: #FFF;
    font-size: 14px;
    text-decoration: none;
}

#footer a:visited,
#footer a:hover,
#footer a {
    color: #ffffff;
}



a,
a:hover,
a:visited {
    text-decoration: none;
    color: #ffffff;
}

.user_app {
    margin: 0px 5px;
}

.user_app_o {
    margin: 5px 5px 15px 5px;
}

/*-------------------- star-rating --------------------*/

.star-rating {
    position: relative;
    display: inline-block;
    font-size: 20px;
    word-break: normal !important;
}

.star-rating .star-rating-item {
    position: absolute;
    overflow: hidden;
}

.star-rating .star-rating-item:before {
    content: "★★★★★";
    color: #ffcc33;
}

.star-rating:after {
    content: "★★★★★";
    color: #ccc;
}



@keyframes anime1 {
    from {
        transform: scale(0.9, 0.9);
    }

    to {
        transform: scale(1, 1);
    }
}

.cv_btn {
    margin: 0 auto;
}

.cv_btn img {
    animation: anime1 0.5s ease 0s infinite alternate;
    transform-origin: center;
}

.redmiddle {
    color: #ff2662;
    font-weight: bold;
}

.bluemiddle {
    color: #2687ff;
    font-weight: bold;
}

.pinkmiddle {
    color: #ff2694;
    font-weight: bold;
}



.purplemiddle {
    color: #a226ff;
    font-weight: bold;
}

.small_bold {
    font-size: 15px;
    font-weight: bold;
}

#contents_nock {
    color: #ffffff;
    font-weight: bold;
    margin-top: 10px;
    background: #db0000;
    padding: 5px 10px;
    text-align: center;
    font-size: 16px;
    word-break: break-all;
}

/*　中高生NG文言　*/
.nock {
    border-top: solid 1px #efefef;
    border-bottom: solid 1px #efefef;
    margin-top: 15px;
    padding: 5px 0px 5px 0px;
    color: #ff0000;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}