@charset "UTF-8";

/*--------------------------------------------------------------------------
   reset
---------------------------------------------------------------------------*/
* {font-size: 100%;box-sizing: border-box;}
body,h1,h2,h3,h4,h5,h6,div,p,ul,ol,li,dl,dt,dd,pre,form,blockquote,fieldset,input,address {margin: 0;padding: 0;}
h1,h2,h3,h4,h5,h6,caption,address,em {font-style: normal;font-weight: normal;}
ul,ol,li,dl,dt,dd {list-style-type: none;list-style-position: outside;}
table {border-spacing: 0;border-collapse: collapse;}
fieldset {border: none;}
img {border: 0;vertical-align: top;}
br {letter-spacing: 0;}
button,fieldset,form,input,label,legend,select,textarea {font-family: inherit;font-style: inherit;font-weight: inherit;font-size: 100%;margin: 0;padding: 0;vertical-align: baseline;outline: none;}
input:focus,textarea:focus,select:focus {outline: none;}

/*--------------------------------------------------------------------------
  html body
---------------------------------------------------------------------------*/
:root {
  --text-black: #333333;
  --text-white: #ffffff;
  --color-orange: #fa6a0a;
  --color-blue: #1e88e5;
  --color-green: #00b0a5;
  --color-purple: #C100C1;
  --color-pink: #FF1493;
  --color-yellow: #f3de31;
  --link-blue: #00c1ff;
  --badge-default: #2b6cb0;/*内政*/
  --badge-personnel: #2b6cb0;/*人事*/
  --badge-succession: #ca8e27;/*王位*/
  --badge-attack: #e53e3e;/*攻撃*/
  --badge-build: #319795;/*築城*/
  --badge-develop: #528a2c;/*開拓・築城*/
  --badge-declare-war: #FA7B0A;/*開戦*/
  --badge-war-received: #FA7B0A;/*被開戦*/
  --badge-ceasefire: #9e9e9e;/*停戦*/
  --badge-damage: #9b3437;/*被害*/
  --badge-victory: #FA7B0A;/*戦勝*/
}

html {
  width: 100%;
  height: 100%;
  font-size: 62.5%;
}
body {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(/assets/images/common/wooden-floor-background.jpg) center center / cover no-repeat;
  background-attachment: fixed;
  color: var(--text-white);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif,
    "メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "游ゴシック", YuGothic,
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
  font-size: 14px;
  font-size: 88%\9;
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media screen and (max-width: 376px) {
  html,body{
    overflow-x: hidden;
  }
  body {
    background: none;
  }
}
/*--------------------------------------------------------------------------
   base link
---------------------------------------------------------------------------*/
a {
  color: var(--link-blue);
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:link,
a:visited {
}
a:hover {
  text-decoration: none;
}

/*--------------------------------------------------------------------------
   skip-link
---------------------------------------------------------------------------*/
.skip-link {
    position: absolute;
    top: -999px;
    left: 0;
    background: #111;
    color: #fff;
    padding: 7px 15px;
    z-index: 9999;
    border: 1px solid #c9a063;
    text-decoration: none;
}
.skip-link:focus {
    top: 0;
}
/*--------------------------------------------------------------------------
   header
---------------------------------------------------------------------------*/
#header-common[data-layout="simple"] {
  position: fixed;
  top: 20px;
  left: 20px;
}
@media screen and (max-width: 910px) {
  #header-common[data-layout="simple"] {
    display: none;
  }
}
#header-common[data-layout="header-default"] .logo {
  position: fixed;
  top: 20px;
  left: 20px;
}
#header-common[data-layout="header-default"] nav {
  position: fixed;
  top: 20px;
  left: 50%;
  height: calc(100% - 20px);
  padding-bottom: 20px;
  margin-left: 210px;
  overflow-y: auto;
}
#navToggle {
  display: none;
}

@media screen and (max-width: 910px) {
  #navToggle {
    display: block;
    position: fixed;
    right: 0;
    top: 15px;
    width: 40px;
    height: 40px;
    background: linear-gradient(0deg, rgba(221, 221, 221, 1) 0%, rgba(255, 255, 255, 1) 100%);
    box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.6);
    border-radius: 6px 0 0 6px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    padding-top: 3px;
    cursor: pointer;
    z-index: 8000;
  }
  #navToggle i {
    display: block;
    width: 22px;
    height: 22px;
    background: url(/assets/images/common/icon_nemu_open.gif);
    margin: 0 auto;
    transition: background-image 0.3s ease-in-out;
  }
  #navToggle.openNav i {
    display: block;
    width: 22px;
    height: 22px;
    background: url(/assets/images/common/icon_nemu_close.gif);
    margin: 0 auto;
  }
  #navToggle span {
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1em;
    color: var(--text-black);
    text-align: center;
    margin-top: 1px;
    text-shadow: 0px 1px 0px #fff;
  }
  .sp-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 255px;
    height: 100%;
    background: url(/assets/images/common/chat_bg.gif);
    box-shadow: -6px 0px 15px 0px rgba(0,0,0,0.7);
    z-index: 7000;
    transition: all 0.5s;
    transform: translate(110%, 0);
    padding: 10px 20px 20px 20px;
    overflow-y: scroll;
  }
  .openNav {
    transform: translate(0, 0);
  }
  #header-common[data-layout="header-default"] .logo {
    position: static;
    height: 54px;
    width: auto;
  }
  #header-common[data-layout="header-default"] .logo img {
    height: 54px;
    width: auto;
  }
  #header-common[data-layout="header-default"] nav {
    position: static;
    height: auto;
    margin-left: 0;
  }
}

#header-common .header-default nav li {
  margin-top: 10px
}
#header-common .header-default nav li a {
  position: relative;
  display: block;
  width: 215px;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-black);
  line-height: 1em;
  background: #fff;
  border-radius: 5px;
  padding: 0 10px 0 0;
  box-shadow: 1px 1px 0px 0px #f2be80;
}
#header-common .header-default nav li a:hover {
  text-decoration: none;
}
#header-common .header-default nav li a::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 5px;
  background: #e51c23;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translate(0, -50%);
}
#header-common .header-default nav li a i {
  display: inline-block;
  width: 35px;
  height: 30px;
  vertical-align: middle;
}
#header-common .header-default nav li a i.top {
  background: url(/assets/images/common/icon_top.gif) center center no-repeat;
}
#header-common .header-default nav li a i.officer {
  background: url(/assets/images/common/icon_officer.gif) center center no-repeat;
  background-size: auto 20px;
}
#header-common .header-default nav li a i.gathering {
  background: url(/assets/images/common/icon_ore.gif) center center no-repeat;
}
#header-common .header-default nav li a i.itemshop {
  background: url(/assets/images/common/icon_chest.gif) center center no-repeat;
}
#header-common .header-default nav li a i.profile {
  background: url(/assets/images/common/icon_profile.gif) center center no-repeat;
}
#header-common .header-default nav li a i.interact {
  background: url(/assets/images/common/icon_interact.gif) center center no-repeat;
  background-size: auto 16px;
}
#header-common .header-default nav li a i.temple {
  background: url(/assets/images/common/icon_temple.gif) center center no-repeat;
}
#header-common .header-default nav li a i.mercenary {
  background: url(/assets/images/common/icon_lance.gif) center center no-repeat;
  background-size: auto 16px;
}
#header-common .header-default nav li a i.logout {
  background: url(/assets/images/common/icon_logout.gif) center center no-repeat;
}
#header-common .header-default nav li.under {
  margin-top: 5px;
  padding-left: 27px;
}
#header-common .header-default nav li.under a {
  width: 188px;
  padding: 7px 10px 9px;
}


/*--------------------------------------------------------------------------
   footer
---------------------------------------------------------------------------*/
#footer-common {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%,0);
  width: 376px;
  background: #DDDDDD;
  background: linear-gradient(0deg,rgba(221, 221, 221, 1) 0%, rgba(255, 255, 255, 1) 100%);
  box-shadow: 0px -10px 15px -15px rgba(0, 0, 0, 1);
  border-bottom: 1px solid #fff;
  z-index: 999;
}
#footer-common ul {
  display: flex;
  width: 100%;
}
#footer-common ul li {
  position: relative;
  width: 33.3%;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3em;
  text-align: left;
  border-left: 1px solid #c8c8c8;
  border-right: 1px solid #fff;
}
#footer-common ul li:first-child {
  border-left: none;
}
#footer-common ul li:last-child {
  border-right: none;
}
#footer-common ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 5px 5px;
  color: var(--text-black);
  text-shadow: 0px 1px 0px #fff;
}
#footer-common ul li a:hover {
  text-decoration: none;
}
#footer-common ul li a span {
  display: block;
  padding: 4px 0;
}
#footer-common ul li a span small {
  font-size: 1.0rem;
  margin-left: -0.5em;
}
#footer-common ul li.officer a span {
  padding-left: 35px;
  background: url(/assets/images/common/icon_officer.gif) left center no-repeat;
}
#footer-common ul li.profile a span {
  padding-left: 20px;
  background: url(/assets/images/common/icon_profile.gif) left center no-repeat;
}
#footer-common ul li.interact a span {
  padding-left: 32px;
  background: url(/assets/images/common/icon_interact.gif) left center no-repeat;
}
#footer-common ul li.mercenary a span {
  padding-left: 22px;
  background: url(/assets/images/common/icon_lance.gif) left center no-repeat;
  background-size: 18px auto;
}
#footer-common ul li.officer #global-pending-dot,
#footer-common ul li.profile #global-unread-dot {
  position: absolute;
  top: 4px;
  right: 3px;
  width: 10px;
  height: 10px;
  background: var(--color-orange);
  border-radius: 50%;
  z-index: 10;
}


/*--------------------------------------------------------------------------
   contents
---------------------------------------------------------------------------*/
.contents{
  position: relative;
  width: 376px;
  min-height: 100%;
  max-width: 376px;
  background: url(/assets/images/common/bg_tile.gif);
  margin: 0 auto;
  padding: 20px 15px 100px;
  box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.5);
}
.contents h1{
  width: 100%;
  min-height: 48px;
  font-size: 1.6rem;
  font-weight: 600;
  color: #ffd541;
  line-height: 44px;
  text-align: center;
  background: url(/assets/images/common/h1_ttl.gif) center center no-repeat;
  text-shadow: 0px -2px 0px rgba(6, 0, 1, 1);
  margin-bottom: 15px;
  padding: 0 20px;
}

/*--------------------------------------------------------------------------
   btn
---------------------------------------------------------------------------*/
.orange_btn {
display: block;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1em;
  color: var(--text-white);
  text-align: center;
  border: 3px solid transparent;
  border-radius: 1000px;
  background-image: 
    linear-gradient(0deg, rgba(250, 106, 10, 1) 50%, rgba(250, 123, 10, 1) 50%),
    linear-gradient(to bottom, #f53a08, #ff954d);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  text-shadow: 0px -2px 0px rgba(245, 58, 8, 1);
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.5);
  padding: 8px 10px 10px;
  cursor: pointer;
}
.blue_btn {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1em;
  color: var(--text-white);
  text-align: center;
  border: 3px solid transparent; 
  border-radius: 1000px;
    background-image: 
    linear-gradient(0deg, rgba(24, 26, 72, 1) 50%, rgba(52, 55, 108, 1) 50%),
    linear-gradient(to bottom, #171a3e, #3a3e71);
    background-origin: border-box;
  background-clip: padding-box, border-box;
    text-shadow: 0px -2px 0px rgba(24, 27, 55, 1);
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.5);
  padding: 8px 10px 10px;
  cursor: pointer;
}
.gray_btn {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1em;
  color: var(--text-white);
  text-align: center;
  border: 3px solid transparent;
  border-radius: 1000px;
  background-image: 
    linear-gradient(0deg, rgba(125, 125, 125, 1) 50%, rgba(135, 135, 135, 1) 50%),
    linear-gradient(to bottom, #525252, #a9a9aa);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  text-shadow: 0px -2px 0px rgba(82, 82, 82, 1);
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.5);
  padding: 8px 10px 10px;
  cursor: pointer;
}
.orange_btn:hover,
.blue_btn:hover,
.gray_btn:hover {
  text-decoration: none;
}

/*--------------------------------------------------------------------------
   stamina
---------------------------------------------------------------------------*/
.stamina-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.stamina-container #stamina-icons {
  display: flex;
  align-items: center;
  gap: 2px;
}
.stamina-container #stamina-icons .stamina-dot {
  display: block;
  width: 32px;
  height: 32px;
  background: url(/assets/images/common/stamina-dot_inactive.gif) center center / cover no-repeat;
  text-indent: -9999px;
}
.stamina-container #stamina-icons .stamina-dot.is-active {
  background: url(/assets/images/common/stamina-dot_active.gif) center center / cover no-repeat;
}
.stamina-container .stamina-timer-wrapper {
  font-size: 1.2rem;
  line-height: 1em;
  color: var(--text-white);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 1000px;
  padding: 9px 15px 11px;
  margin-left: 10px;
}