MediaWiki:Mobile.css

/* ここに記述した全てのCSSはモバイル版サイトの利用者に影響します */

/*スマートフォン背景*/
.pre-content.heading-holder {
    background-image: radial-gradient(circle, #ffffff9c 0% 40%, #ffffff 90% 100%), url(https://emagg.jp/palworld/images/a/a2/Bgimg.webp);
    background-size: cover;
    background-color: linear-gradient(to right, #594b14 0, #591532 100%);
    background-blend-mode: screen;
}
/*footer*/
.minerva-footer {
    padding-bottom: 150px!important;
}
main#content, .mw-body {
    overflow: auto!important;
}

/*youtube*/
.youtube_wrap iframe {
    width: 100%;
    height: 100%;
}
.youtube_wrap {
    width: 100%;
}
/*IMG*/
img:not(.pi-image-thumbnail){
width:100%;
height:100%;
}

.content a > img, .content noscript > img {
    padding: 2px;
}
#mobileMenuBar {
    display: none;
    background: #c0c0c0;
    padding: 13px;
    width: 96%;
}
ul.gNav-menu {
    display: flex;
    justify-content: space-between;
}
.gNav .gNav-menu li {
    margin: 0 auto;
}
ul.gNav-menu li {
    list-style: none;
    list-style-type: none;
    font-size: 0.8em;
    padding: 0 20px;
}
/* その場でアニメーション */
.fadeIn{
  animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
 
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
 

#mobileMenuBar.fixed {
    position: fixed; /* 固定位置 */
    top: 0; /* 画面の上部に固定 */
    left: 0;
    z-index: 3; /* 他の要素より上に表示 */
}
 

/* Extension:ヤフーショッピング */
DIV.yjshopping {
width:90%;
clear: both;
min-height: 180px;
margin: 0 auto;
padding: 0.5em;
border: 2px solid #e7e7ea;
background:#f9fafe;
border-radius: 5px;
overflow: hidden;
}
DIV.yjshopping IMG.yjshoppingimg {
float: left;
margin: 0.1em 1em 0.1em 0.1em;
}
DIV.yjshopping P.yjshoppingname {
margin: 0;
font-size: 90%;
text-indent: 0;
}
DIV.yjshopping P.yjshoppingstore::before {
background-color: #bbb;
border-radius: 10%;
color: #fff;
font-size: smaller;
padding: 0 0.5em 0 0.5em;
margin-right: 0.5em;
content: "Ad";
}
DIV.yjshopping P.yjshoppingstore {
margin: 0;
font-size: 80%;
text-indent: 0;
}
DIV.yjshopping UL {
margin-top: 10px;
padding-left: 10em;
}
DIV.yjshopping UL LI {
display: inline-block;
text-align: center;
list-style: none;
font-size: 85%;
width: 9em;
margin: 0.2em;
padding: 0.2em 0.5em 0.2em 0.5em;
border-radius: 0.5em;
white-space: nowrap;
}
DIV.yjshopping UL LI A {
color: #fff;
}
DIV.yjshopping UL LI.shoplinkyahoo {
background-color: #f55;
}
DIV.yjshopping UL LI.shoplinkamazon {
background-color: #f90;
}
DIV.yjshopping UL LI.shoplinkrakuten {
background-color: #c00;
}
DIV.yjshopping UL LI.shoplinksofmap {
background-color: #16f;
}
DIV.yjshopping UL LI.shoplinksofmapused {
background-color: #3ba;
}
DIV.yjshopping UL LI.shoplinknaturum {
background-color: #084;
}
DIV.yjshopping UL LI.shoplinkhonto {
background-color: #4af;
}
DIV.yjshopping UL LI.shoplink7net {
background-color: #153;
}
DIV.yjshopping UL LI.shoplinkwowma {
background-color: #f71;
}
DIV.yjshopping UL LI.shoplinknttxstore {
background-color: #06a;
}
DIV.yjshopping UL LI.shoplinkqoo10 {
background-color: #5af;
}
DIV.yjshopping UL LI.shoplinkanker {
background-color: #2ae;
}
DIV.yjshopping UL LI.shoplinkmercari {
background-color: #f00;
}
DIV.yjshopping UL LI.shoplinkkakakucom {
background-color: #02d;
}
img.image-lazy-loaded {
    padding: 2px;
}

element.style {
}

.youtube_wrap{
    padding-top: 56.25%;
    width: 100%;
    position: relative;
    margin:10px 0;
}
.youtube_wrap iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
.twitter-timeline.twitter-timeline-rendered {
    width: 90%!important;
}
div#hf-nsheader- {
    margin-right: -30px;
}
/*TOPへ*/
div#back-to-top {
	font-size: 2em;
    cursor: pointer;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 150px;
    right: 20px;
    width: 60px;
    height: 60px;
    z-index: 9999;
    border-radius: 50%;
    background: #33333352;
    transition: transform 0.5s;
}
.main-background{
  background-image: linear-gradient(90deg, rgba(233, 233, 233, 1), rgba(172, 172, 172, 1));
}
h1#firstHeading {
    text-align: center;
}
span.mw-page-title-main {
    background-image: linear-gradient(to top,#ffffffd6 40%,transparent 40%);
  text-shadow    : 
       2px  2px 3px #ffffff,
      -2px  2px 3px #ffffff,
       2px -2px 3px #ffffff,
      -2px -2px 3px #ffffff,
       2px  0px 3px #ffffff,
       0px  2px 3px #ffffff,
      -2px  0px 3px #ffffff,
       0px -2px 3px #ffffff; 
}
body{
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "BIZ UDPGothic",
    Meiryo,
    sans-serif;
}
.pre-content h1, .content h1, .content h2 {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
}
a.amazon {
        background: #ffcc80;
        color: #fd7e14;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: inline-block;
    }
[data-source="btnlink"] a.amazon {
        background: #ffcc80;
        color: #fd7e14;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: flex;
        justify-content: center;
}
    a.rakuten {
        background: #f48fb1;
        color: #990034;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: inline-block;
    }
[data-source="btnlink"] a.rakuten {
        background: #f48fb1;
        color: #990034;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: flex;
        justify-content: center;
}
    a.yahoo {
        background: #ce93d8;
        color: #070013;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: inline-block;
    }
    [data-source="btnlink"] a.yahoo {
        background: #ce93d8;
        color: #070013;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: flex;
        justify-content: center;
}
    a.dmm {
        background: #80cbc4;
        color: #004d40;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: inline-block;
    }
    [data-source="btnlink"] a.dmm {
        background: #80cbc4;
        color: #004d40;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: flex;
        justify-content: center;
}
    a.estore {
        background: #80deea;
        color: #426064;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: inline-block;
    }
    [data-source="btnlink"] a.estore {
        background: #80deea;
        color: #426064;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: flex;
        justify-content: center;
}
    a.ecapcom {
        background: #c5cae9;
        color: #596397;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: inline-block;
    }
    [data-source="btnlink"] a.ecapcom {
        background: #c5cae9;
        color: #596397;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: flex;
        justify-content: center;
}
    a.premiumbandai {
        background: #ffcd4a;
        color: #b17e34;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: inline-block;
    }
    [data-source="btnlink"] a.premiumbandai {
        background: #ffcd4a;
        color: #b17e34;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: flex;
        justify-content: center;
}
    a.takaratomymole {
        background: #c9e7ca;
        color: #4f7a51;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: inline-block;
    }
    
    [data-source="btnlink"] a.takaratomymole {
        background: #c9e7ca;
        color: #4f7a51;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: flex;
        justify-content: center;
}
    a.ichibankuji {
        background: #b2ebf2;
        color: #6e9298;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: inline-block;
    }
    [data-source="btnlink"] a.ichibankuji {
        background: #b2ebf2;
        color: #6e9298;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: flex;
        justify-content: center;
}
    a.microsoft {
        background: #b2dfdb;
        color: #5e7774;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: inline-block;
    }
    [data-source="btnlink"] a.microsoft {
        background: #b2dfdb;
        color: #5e7774;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: flex;
        justify-content: center;
}
    a.animate {
        background: #9fa8da;
        color: #7810f2;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: inline-block;
    }
    [data-source="btnlink"] a.animate {
        background: #9fa8da;
        color: #7810f2;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: flex;
        justify-content: center;
}
    a.geo {
        background: #c5e1a5;
        color: #827717;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: inline-block;
    }
    [data-source="btnlink"] a.geo {
        background: #c5e1a5;
        color: #827717;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: flex;
        justify-content: center;
}
    a.tsutaya {
        background: #86aef3;
        color: #1626a2;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: inline-block;
    }
    [data-source="btnlink"] a.tsutaya {
        background: #86aef3;
        color: #1626a2;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: flex;
        justify-content: center;
}
    a.yamada {
        background: #5ad1a5;
        color: #1c6449;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: inline-block;
    }
    [data-source="btnlink"] a.yamada {
        background: #5ad1a5;
        color: #1c6449;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: flex;
        justify-content: center;
}
    a.sofmap {
        background: #68c0ed;
        color: #046496;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: inline-block;
    }
    [data-source="btnlink"] a.sofmap {
        background: #68c0ed;
        color: #046496;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: flex;
        justify-content: center;
}
    a.sevennet {
        background: #f5ca8c;
        color: #b37c2e;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: inline-block;
    }
    [data-source="btnlink"] a.sevennet {
        background: #f5ca8c;
        color: #b37c2e;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: flex;
        justify-content: center;
}
    a.netoff {
        background: #e68f8c;
        color: #af3a36;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: inline-block;
    }
    [data-source="btnlink"] a.netoff {
        background: #e68f8c;
        color: #af3a36;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: flex;
        justify-content: center;
}
    a.charaani {
        background: #dcb8dd;
        color: #bd53c1;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: inline-block;
    }
    [data-source="btnlink"] a.charaani {
        background: #dcb8dd;
        color: #bd53c1;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: flex;
        justify-content: center;
}
    a.download {
        background: #cacfd4;
        color: #667789;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: inline-block;
    }
    [data-source="btnlink"] a.download {
        background: #cacfd4;
        color: #667789;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: flex;
        justify-content: center;
}
    a.officialsite {
        background: #4582ec;
        color: #e2edff;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: inline-block;
    }
    [data-source="btnlink"] a.officialsite {
        background: #4582ec;
        color: #e2edff;
        padding: 8px 13px;
        border-radius: 5px;
        margin: 5px;
        display: flex;
        justify-content: center;
}
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
    padding: 0.3em;
}

table.wikitable {
    display: table!important;
}
.portable-infobox .pi-media {
    padding: 0.8em;
}
.portable-infobox .pi-data-value {
    display: flex;
    align-items: center;
}
.pi-item > p {
    border: 0;
    margin: 0;
    font-family: inherit;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.3;
    width: 100%;
}
section.pi-item.pi-group.pi-border-color > p {
    margin: -30px 0 20px 10px;
}
h2.pi-item.pi-header.pi-secondary-font.pi-item-spacing.pi-secondary-background {
    padding: 20px;
}
.graybox{
background:#eaecf0;
padding:20px;
margin:20px;
color:#525b64;
border-radius:5px;
}