html {
/* ルートのフォントサイズを10pxに設定しておく */
font-size: 62.5%;
/*
font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
*/
font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
body{
font-size:1.6em;
max-width: 100vw;
}
p {
padding: 0;
margin: 0;
}
div{
font-size: 2rem;
}
.waku_Oya {
display: grid;
grid-template-rows: 1rem;
grid-template-columns: 30rem 1fr ;
max-width: 100vw;
}
header{
background-image: url("img/etc_icon/coc_mini.png");
background-position:right top;
background-repeat: no-repeat;
}
header h1 a{
color: gold;/*文字は白に*/
/*
text-shadow: -1px -1px 1px #ffffff, 0.1rem 0.1rem #000000;
text-shadow: -1px -1px 1px #000000, 1px 1px #ffffff;
*/
text-shadow: 5px 5px 0px rgba(0, 0, 0, .3),
10px 10px 0px rgba(0, 0, 0, .1),
-1px -1px 1px #ffffff, 0.1rem 0.1rem #000000;
;
font-weight: bold;
text-decoration: none;
}
.msg{
color:steelblue;
}
#h_msg{
text-align: right;
font-size:small;
color: darkslategrey;
}
nav, .footer, .waku_Unit ,#unit_LV_ul_W{
grid-column: 1 / 4;
}
.is-fixed {
position: fixed;
top: 0;
left: 0;
z-index: 200;
width: 100%;
}
.is-fixed-U{
position: fixed;
top: 20rem;
width : 30rem;
left: 0;
}
.smaller{
font-size: smaller;
font-weight: normal;
}
/*ヘッダー群*/
nav {
background-color: #FFB421;
z-index : 200;
border-radius: 1.1rem;
border :outset;
}
/* Th選択 */
.TH_AW{
margin: 0.2rem;
margin-right:0;
display: grid;
grid-template-columns: 4rem 4rem 4rem 4rem 4rem 4rem 4rem 4rem 4rem 4rem 4rem 4rem 4rem ;
grid-template-rows: 4rem ;
grid-column-gap: 0.8rem;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
background: rgba(255, 255, 200, 0.6);
box-shadow: 0.2px 0rem 0.2rem 0px rgba(0,0,0,0.2) inset;
border-radius: 1rem;
}
.TH_H{
padding-top: 1rem;
}
.TH_T{
font-weight: bolder;
}
.TH_A, .TH_AA{
display: inline-block;
background: rgba(230, 230, 230, 0.6);
border-radius: 0.3rem;
cursor:pointer;
background-size: cover;
color: #F55;/*文字は白に*/
-webkit-text-stroke: 0.08rem #FFF;
text-stroke: 0.08rem #FFF;
font-weight: bold;
text-align: center;
padding-top: 1rem;
}
.TH_AA{
background: rgba(255, 0, 0, 0.6);
background-size: cover;
}
#th1{background-image: url(http://pokonori.benzo.jp/img/th/th1.png);}
#th2{background-image: url(http://pokonori.benzo.jp/img/th/th2.png);}
#th3{background-image: url(http://pokonori.benzo.jp/img/th/th3.png);}
#th4{background-image: url(http://pokonori.benzo.jp/img/th/th4.png);}
#th5{background-image: url(http://pokonori.benzo.jp/img/th/th5.png);}
#th6{background-image: url(http://pokonori.benzo.jp/img/th/th6.png);}
#th7{background-image: url(http://pokonori.benzo.jp/img/th/th7.png);}
#th8{background-image: url(http://pokonori.benzo.jp/img/th/th8.png);}
#th9{background-image: url(http://pokonori.benzo.jp/img/th/th9.png);}
#th10{background-image: url(http://pokonori.benzo.jp/img/th/th10.png);}
#th11{background-image: url(http://pokonori.benzo.jp/img/th/th11.png);}
#th12{background-image: url(http://pokonori.benzo.jp/img/th/th12.png);}
#th13{background-image: url(http://pokonori.benzo.jp/img/th/th13.png);}
/* ユニットアイコン群 ********************/
.upd{
float: right;
font-size:1.6rem;
font-style:italic;
color:darkslategray;
margin-right: 1rem;
}
#unit_LV_ul_W{
width: 20rem;
}
#Unit_L_WW{
height : 12rem;
overflow: auto;
border-radius: 1rem;
margin:0.3rem;
margin-bottom: 0;
margin-right:0;
background: rgba(255, 255, 200, 0.6);
box-shadow: 0.2px 0rem 0.2rem 0px rgba(0,0,0,0.2) inset;
}
#Unit_L_W{
margin:0;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
width : calc(6.15rem*13);
overflow-x: auto;
white-space: nowrap;
margin: auto;
}
#Unit_L_WW ul li {
width :4.5rem;
height :4.5rem;
padding: 0.2rem;
margin :0.2rem;
display: block;
float: left;
list-style-type: none;
text-align: center;
}
.Unit_icon , .Unit_iconA{
display: inline-block;
background: rgba(101, 176, 221, 0.8);
box-shadow: 0.0rem 0.2rem 0.1rem 0rem rgba(53,97,133,0.9) , 0.1px 0.1rem 0rem 0px rgba(255,255,255,0.8) inset;
border-radius: 0.4rem;
cursor:pointer;
}
.Unit_iconA{
background: rgba(255, 0, 0, 0.6);
background-size: cover;
}
.Unit_icon_img{
height: auto;
width: auto;
max-width: 100%;
max-height: 100%;
margin: auto;
}
.waku_Unit {
}
.waku_Unit2{
}
#unit_Name{
font-size:1.8rem;
font-weight: bold;
}
#unit_img{
display: inline-block;
box-shadow: 0.0rem 0.2rem 0.1rem 0rem rgba(53,97,133,0.9) , 0.1px 0.1rem 0rem 0px rgba(255,255,255,0.8) inset;
border-radius: 0.3rem;
}
/* **** ユニット詳細 ********************/
#waku_Unit_LV {
}
#unit_LV_ul{
margin: 1px;
padding-left: 3rem;
width : 20rem;
}
.Unit_lv_img{
}
#unit_LV_Spell{
padding-top :0.5rem;
padding-left :1rem;
}
div#unit_LV_Spell p {
display: table-cell;
vertical-align: middle;
margin: 0;
}
/* switch */
.switch input {
display: none;
}
.switch label {
padding-left: 0.2rem;
font-size: 2rem;
font-weight: bold;
cursor: pointer;
}
.switch label:before {
border-radius: 2rem 0rem 0rem 2rem ;
/*
content: 'O N';
background: linear-gradient(to bottom, #F0F0F0 0%, #DDD 100%);
*/
color: #FFF;
white-space: pre;
content: ' \AOFF';
display: inline-block;/*忘れずに！*/
width: 4.0rem;/*画像の幅*/
height: 4.0rem;/*画像の高さ*/
padding: 0.2rem;
background-size: contain;
filter : grayscale(70%);
border : 2px solid #ccc; /* 枠線(一旦四方向) */
box-shadow : 0.3rem 0.3rem 0.6rem #111; /* 影付け */
}
.switch input + label:hover:before {
opacity: 0.5;
}
.switch input:checked + label:before {
content: ' \A_ON';
background: #C000FF;
color: #FFF;
opacity: 1;
display: inline-block;/*忘れずに！*/
width: 4.4rem;/*画像の幅*/
height: 4.4rem;/*画像の高さ*/
padding: 0.0rem;
background-size: contain;
filter : grayscale(0%);
box-shadow : none;
}
#switch_W_R input:checked + label:before {
background-image: url("img/spell/Rage_icon.png");
}
#switch_W_R label:before {
background-image: url("img/spell/Rage_icon.png");
}
#switch_W_H input:checked + label:before {
background-image: url("img/spell/Haste_icon.png");
}
#switch_W_H label:before {
background-image: url("img/spell/Haste_icon.png");
}
.switch input:checked + label:after {
}
.switch input:checked + label:hover:after {
opacity: 0.5;
}
/*
.switch label:after {
content: 'レイジ OFF';
}
.switch input:checked + label:after {
content: 'レイジ ON';
}
*/
/* switch */
/* スペルレベル */
.spell_lv {
overflow: hidden;
width: 9rem;
padding-left: 1rem;
}
.spell_NM{
display:block;
font-size: 1.3rem;
height :1.5rem;
padding: 0;
margin:0;
}
.spell_lv select {
width: 100%;
height:2.5rem;
font-size:1.8rem;
cursor: pointer;
text-indent: 0.01px;
text-overflow: ellipsis;
border: none;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
}
.spell_lv select::-ms-expand {
display: none;
}
.spell_lv {
position: relative;
border : 2px solid #ccc; /* 枠線(一旦四方向) */
border-radius: 0rem 2rem 2rem 0rem ;
background: #ffffff;
}
.spell_lv::before {
position: absolute;
top: 1.5em;
right: 0.6em;
width: 0;
height: 0;
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #da3c41;
pointer-events: none;
}
.spell_lv select {
color: #da3c41;
}
/* スペルレベル */
.spell_icon{
width:3rem;
}
.Unit_lv_li,.Unit_lv_liA{
display: block;
width:6rem;
height:5rem;
background: rgba(137, 183, 221, 0.4);
box-shadow: 0.0rem 0.2rem 0.1rem 0rem rgba(53,97,133,0.9) , 0.1px 0.1rem 0rem 0px rgba(255,255,255,0.8) inset;
border-radius: 0.6rem;
margin:0;
margin-bottom: 0.3rem;
cursor:pointer;
}
.Unit_lv_liA{ /* 現lv */
background: rgba(255, 255, 255, 1);
box-shadow: 0.0rem 0.2rem 0.1rem 0rem rgba(255,255,255,1) , 0.1px 0.1rem 0rem 0px rgba(255,255,255,1) inset;
border-radius: -0rem;
}
.Unit_lv_th,.Unit_lv_th1,.Unit_lv_th2,.Unit_lv_th3,.Unit_lv_th4,.Unit_lv_th5,.Unit_lv_th6,.Unit_lv_th7,.Unit_lv_th8,.Unit_lv_th9,.Unit_lv_th10,.Unit_lv_th11,.Unit_lv_th12,.Unit_lv_th13 {
width:2rem;
padding-top:0.8rem;
height:4rem;
float:left;
}
.Unit_lv_thT{height:2rem; font-weight: bold; font-size:1.3rem;}
.Unit_lv_th1{background-color: aquamarine}
.Unit_lv_th2{background-color: darkkhaki}
.Unit_lv_th3{background-color: darkkhaki}
.Unit_lv_th4{background-color: darkkhaki}
.Unit_lv_th5{background-color: moccasin}
.Unit_lv_th6{background-color: peru}
.Unit_lv_th7{background-color: palegoldenrod}
.Unit_lv_th8{background-color: darkkhaki}
.Unit_lv_th9{background-color: dimgrey}
.Unit_lv_th10{background-color: blanchedalmond}
.Unit_lv_th11{background-color: crimson}
.Unit_lv_th12{background-color: royalblue}
.Unit_lv_th13{background-color: darkslateblue}
.Unit_lv_img{
position: relative;
height: auto;
width: 4rem;
max-width: 100%;
max-height: 100%;
margin: 0;
}
.U_lv{
display:block;
position: relative;/*絶対配置*/
color: #F55;/*文字は白に*/
-webkit-text-stroke: 0.08rem #FFF;
text-stroke: 0.08rem #FFF;
font-weight: bold;
text-align: right;
top: -0rem;
margin-right: 0;
margin-left:auto;
margin-top: -3rem;
}
/*** ユニットｌｖ詳細 ***/
#Unit_LV_w2 {
padding :0.8rem;
}
#SWP_U_C{
padding-left: 2rem;
}
.unit_info_img{
width:11rem;
float :left;
}
.U_Val {
width : 5rem;
}
.ULvImgBGR{
background-image: url("img/spell/fire.png");
background-size: cover;
}
.ULvImgBGH{
background-image: url("img/spell/Hast.png");
background-size: cover;
}
.ULvImgBGRH{
background :url("img/spell/Hast.png") right top no-repeat,
url("img/spell/fire.png") center center no-repeat;
background-size: cover;
}
.unit_info_lv_img{
height:7rem;
margin-right: 0.5rem;
float : left;
}
.unit_s_img{
width: 2.5rem;
}
.B_Graph {
box-sizing: border-box;
background-color: #76A3E8;
padding: 0.1rem;
}
/* 項目のキャプションが折り返してしまわないように設定 */
.B_Graph_label {
white-space: nowrap;
}
.f_clear{
clear: both;
}
.td_center{
text-align: center;
}
#Unit_M_TimeT {
clear:both;
}
#Unit_M_Time td{
border-left: 1px solid #646464;
text-align: center;
}
/* 施設 *************************/
.waku_Sisetu {
background-color: #FFF;
z-index: 100;
}
.waku_Sisetu .swiper-container{
padding-bottom: 2.5rem;
padding-left : 3rem;
}
#buildings {
width: calc(100vw - 35rem);
}
.building img{
width:7rem;
height:auto;
}
.swiper-button-prev, .Uswiper-button-prev {
background: url(http://pokonori.benzo.jp/img/etc_icon/L.png) no-repeat center center / contain;
}
.swiper-button-next,.Uswiper-button-next {
background: url(http://pokonori.benzo.jp/img/etc_icon/R.png) no-repeat center center / contain;
}
.buildingST{
font-size: 1.8rem;
background-color: navajowhite;
color :darkslategrey;
}
/* ツールチップ */
#hinto{
border: 1px solid #bbb;
background: #ffffff;
color:crimson;
position: absolute;
width: 40rem;
padding: 7px 12px;
top: -17px;
left: 60px;
font-size: 16px;
text-align: left;
border-radius:3rem;
z-index: 400;
display :none;
}
.hinto1{
display: inline-block;
text-align: center;
cursor: pointer;
width: 2rem;/*幅*/
height: 2rem;/*高さ*/
border-radius: 50%;/*角丸*/
font-size:1.5rem;
color:#FFF;
background-color: darkred;
}
/* スワイパーの追加CSS */
.swiper-pagination-bullet {
text-align: center;
width: 1.7rem;
height: 1.7rem;
line-height: 1.7rem;
font-size: 1rem;
color:#000;
opacity: 1;
background: rgba(0,0,0,0.2);
}
.swiper-pagination-bullet-active {
color:#fff;
background: #007aff;
}
.swiper-button-prev,
.swiper-button-next {
width: 20px; /* ボタンの幅 */
height: 35px; /* ボタンの高さ */
background-size: 20px 35px; /* 背景画像としてのサイズ（＝表示したい画像サイズ） */
}
.swiper-button-prev{
margin-left: -8px;
}
img.unit_lv_img_ss{
width:2.5rem;
height:auto;
}