@charset "UTF-8";
/*
*This CSS File is written by Sass.
*Don't edit directly.
*/
/* reset */
/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  display: block; }

nav, ul, ol, li {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted black;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

body {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  color: white;
  background-color: #f4e8d4;
  background-repeat: no-repeat;
  -webkit-background-size: 100% auto;
  font-family: 'Hiragino Kaku Gothic Pro',sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none; }

.baseNoBg {
  position: absolute;
  color: white;
  background-color: black;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0; }

.base {
  position: absolute;
  color: white;
  background-color: black;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 1; }

.commonBg {
  /*background-image: url(/img/common/bg.jpg);*/
  background-position: 0% 0%;
  background-repeat: no-repeat;
  -webkit-background-size: 100% auto; }

ol.table, ul.table {
  display: table; }

ol.table > li, ul.table > li {
  display: table-cell;
  vertical-align: middle;
  padding: 0 1px; }

strong {
  color: red;
  font-weight: bold; }

.clearBoth {
  clear: both; }

.vbox {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  height: 100%; }

.hbox {
  display: -webkit-box;
  width: 100%; }

.boxFlex {
  position: relative;
  -webkit-box-flex: 1; }

.wrapper {
  position: relative;
  width: 100%;
  overflow: auto; }

#mainScroll {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

.scroller {
  position: absolute;
  /*	-webkit-touch-callout:none;*/
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  width: 100%;
  height: 100%;
  padding: 0; }

.snapWrapper {
  position: relative;
  /* On older OS versions "position" and "z-index" must be defined, */
  z-index: 1;
  /* it seems that recent webkit is less picky and works anyway. */
  overflow: hidden; }

.popup {
  position: absolute;
  top: 0;
  display: none;
  z-index: 300; }

.popupBg {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 290;
  background-color: black;
  opacity: 0.85; }

#corePopup {
  display: none;
  position: absolute;
  top: 50%;
  left: 0.35rem;
  padding: 0.6rem 0%;
  width: 5.7rem;
  min-height: 1.1rem;
  /*border-image: url(/img/common/popupFrame.png) 35%/0.2rem stretch;*/
  /*-webkit-border-image: url(/img/common/popupFrame.png) 35%/0.2rem stretch;*/
  border-radius: 0.21rem;
  -webkit-background-size: 16% auto;
  background-size: 16% auto;
  /*background-image: url(/img/common/win_bg002.png);*/
  background-repeat: repeat;
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 800;
  color: black;
  -webkit-transform: translate(0, -50%); }

/*#corePopup:after {*/
/*content: '';*/
/*position: absolute;*/
/*top: -6px;*/
/*left: -6px;*/
/*display: block;*/
/*padding: 6px;*/
/*width: 100%;*/
/*height: 100%;*/
/*border-radius: 6px;*/
/*z-index: -1; }*/
#corePopupBg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: none;
  z-index: 790;
  background-color: rgba(0, 0, 0, 0.5); }

.corePopupBtns {
  display: inline-block;
  position: relative;
  width: 100%;
  text-align: center; }

#corePopupBtnPosi, #corePopupBtnNega {
  display: none;
  position: relative;
  margin: 0.6rem 0 0;
  width: 1.6rem;
  height: 0.6rem;
  color: black;
  vertical-align: middle;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.4);
  font-family: "simcarry_min_ipa_p";
  white-space: nowrap;
  line-height: .6rem;
  /*background-image: url(/img/common/btns.png);*/
  -webkit-background-size: 415% auto;
  background-size: 415% auto;
  background-position: 0% 37.8947%;
  background-repeat: no-repeat; }

#corePopupBtnPosi > div, #corePopupBtnNega > div {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  width: 100%;
  height: 0.35rem;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: auto 100%;
  background-size: auto 100%; }

#corePopupBtnPosi.btnWordYes:after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.66rem;
  height: 0.31rem;
  -webkit-transform: translate(-50%, -50%);
  /*background-image: url(/img/common/btns.png);*/
  background-repeat: no-repeat;
  -webkit-background-size: 1006.0606% auto;
  background-position: 0.3344% 93.1507%; }

#corePopupBtnNega {
  margin: 0.6rem 0 0 0.6rem; }

#corePopupBtnPosi > div#corePopupBtnPosiYes, #corePopupBtnNega > div#corePopupBtnPosiNo {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  /*background-image: url(/img/common/btns.png);*/
  background-repeat: no-repeat; }

#corePopupBtnPosi > div#corePopupBtnPosiYes {
  width: 0.66rem;
  height: 0.31rem;
  -webkit-background-size: 1006.0606% auto;
  background-position: 0.3344% 93.1507%; }

#corePopupBtnNega > div#corePopupBtnPosiNo {
  width: 0.9rem;
  height: 0.32rem;
  -webkit-background-size: 737.7778% auto;
  background-position: 12.5436% 93.578%; }

#corePopupBtnPosi.hover, #corePopupBtnNega.hover {
  background-position: 32.1429% 37.8947%; }

.beforeIconCheck:before {
  content: '\002713';
  /*チェックマークを出す*/ }

/*#corePopupBtnNega:before,*/
.beforeIconCross:before {
  content: '\002715';
  /*バツを出す*/ }

#corePopupBtnClose {
  display: none;
  position: absolute;
  margin: 0;
  padding: 0;
  left: 2.58rem;
  bottom: -1.8rem;
  /*background-image: url(/img/common/button/btnClose.png);*/
  width: 0.56rem;
  height: 0.56rem;
  -webkit-background-size: 100% auto;
  background-position: 0% 0%; }

#corePopupBtnClose.hover {
  -webkit-transform-origin: 50% 50%;
  -webkit-transform: scale(1.08); }

.corePopupGoldCost {
  position: relative;
  margin: 0.44rem auto 0;
  width: 4.01rem;
  height: 1.45rem;
  color: #fff; }

.corePopupGoldCost:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1.3rem;
  height: 1.5rem;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  background-position: center center;
  background-repeat: no-repeat; }

.corePopupGoldCost.gold:after {
  /*background-image: url(/img/common/db.png); }*/

.corePopupGoldCost.mate:after {
  /*background-image: url(/img/common/meiyu.png); }*/

.corePopupGoldCost > div {
  position: absolute;
  right: 0rem;
  padding: 0 0.24rem 0 0;
  width: 3.2rem;
  height: 0.6rem;
  text-align: right;
  line-height: 0.58rem;
  /*background-image: url(/img/common/rw.png);*/
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  background-repeat: no-repeat; }

.corePopupGoldCost > div#have {
  top: 0.26rem; }

.corePopupGoldCost > div#cost {
  top: 0.76rem; }

.corePopupGoldCost > div:before {
  display: inline-block;
  position: absolute;
  top: 0rem;
  left: 1rem; }

.corePopupGoldCost.gold > div#have:before {
  content: '所持龍玉数'; }

.corePopupGoldCost.gold > div#cost:before {
  content: '消費龍玉数'; }

.corePopupGoldCost.mate > div#have:before {
  content: '所持盟友pt'; }

.corePopupGoldCost.mate > div#cost:before {
  content: '消費盟友pt'; }

.blink {
  -webkit-animation-name: blink;
  -webkit-animation-duration: 2.0s;
  -webkit-animation-iteration-count: infinite; }

@-webkit-keyframes blink {
  0% {
    opacity: 0; }

  50% {
    opacity: 1; }

  100% {
    opacity: 0; } }

.blink2 {
  -webkit-animation-name: blink2;
  -webkit-animation-duration: 2.0s;
  -webkit-animation-iteration-count: infinite; }

@-webkit-keyframes blink2 {
  0% {
    opacity: 0; }

  50% {
    opacity: .5; }

  100% {
    opacity: 0; } }

.fsXSmall {
  font-size: 77%; }

.fsSmall {
  font-size: 83%; }

.fsLarge {
  font-size: 116%; }

.fsXLarge {
  font-size: 150%; }

.fsBold {
  font-weight: bold; }

.touchstartScale {
  -webkit-transform: scale(1.4); }

.touchendScale {
  -webkit-transform: scale(1); }

#preload, #resultGetLocation {
  display: none; }

/*tutorialのCSS　sangoku.cssに移すかも？*/
#tutorialLayer {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 500;
  /*pointer-events: auto;*/ }

#tutorialLayer.tapOff {
  pointer-events: none; }

.ttArrow {
  position: absolute;
  display: inline-block;
  width: .42rem;
  height: .42rem;
  -webkit-animation: arrowDown 1s infinite; }

.ttArrow b {
  display: inline-block;
  width: 100%;
  height: 100%;
  /*background-image: url(/img/common/tutorial.png);*/
  -webkit-background-size: 1761.9048% auto;
  background-position: 97.4212% 0%;
  -webkit-transform: rotate(-90deg); }

#tutorialLayerBg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /*background-color: rgba(0, 0, 0, 0.7);*/
  visibility: visible; }

#tutorialLayerBg.tutorialWin {
  background-color: transparent;
  /*background-image: url(/img/common/tutorial_win_x.png);*/
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%; }

.noBg #tutorialLayerBg {
  visibility: hidden; }

#bgWin {
  position: absolute;
  width: 10%;
  height: 10%;
  border: 2px #ff4e00 solid;
  -webkit-transition: -webkit-transform 1s; }

.tutorialPage {
  display: none;
  position: absolute;
  padding: 0.12rem 0;
  top: 26.8em;
  width: 100%;
  height: 1.2rem; }

.tutorialFukidashi {
  position: relative;
  margin: 0 0 0 0.5em;
  padding: 0.9em 2.5em 0.8em 0.9em;
  /*background-image: url(/img/common/tutorial.png);*/
  width: 5.36rem;
  height: 1.28rem;
  -webkit-background-size: 138.0597% auto;
  background-position: 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.tutorialFukidashi:after {
  content: '';
  position: absolute;
  top: -0.8em;
  right: -12%;
  display: inline-block;
  /*background-image: url(/img/common/tutorial.png);*/
  width: 1.36rem;
  height: 1.52rem;
  -webkit-background-size: 544.1176% auto;
  background-position: 89.404% 0%; }

.tutorialText {
  font-size: 0.9em;
  line-height: 1.3em; }

.tutorialText .ttUserName {
  display: inline; }

.tutorialText .stg {
  display: inline;
  font-style: normal;
  font-weight: bold;
  color: #ff4e00; }

.tutorialTouch {
  position: absolute;
  bottom: 0.8em;
  right: 2.9em;
  /*background-image: url(/img/common/tutorial.png);*/
  width: .44rem;
  height: .26rem;
  -webkit-background-size: 1681.8182% auto;
  background-position: 97.7011% 35.3846%;
  -webkit-animation: arrowBlink 2s infinite; }

#tutorialArrow {
  position: absolute;
  display: inline-block;
  width: 2em;
  height: 2em; }

#tutorialArrow > b {
  display: inline-block;
  /*background-image: url(/img/common/tutorial.png);*/
  width: .42rem;
  height: .42rem;
  -webkit-background-size: 1761.9048% auto;
  background-position: 97.4212% 0%; }

#tutorialArrow.arrowTop,
.ttArrow.arrowTop {
  top: -2em;
  -webkit-animation: arrowUp 1s infinite; }

#tutorialArrow.arrowTop > b,
.ttArrow.arrowTop > b {
  -webkit-transform: rotate(-90deg); }

#tutorialArrow.arrowBottom,
.ttArrow.arrowBottom {
  bottom: -2em;
  -webkit-animation: arrowDown 1s infinite; }

#tutorialArrow.arrowBottom > b,
.ttArrow.arrowBottom > b {
  -webkit-transform: rotate(90deg); }

#tutorialArrow.arrowRight,
.ttArrow.arrowRight {
  top: 0em;
  right: -2em;
  -webkit-animation: arrowRight 1s infinite; }

#tutorialArrow.arrowRight > b,
.ttArrow.arrowRight > b {
  -webkit-transform: rotate(0deg); }

#tutorialArrow.arrowLeft,
.ttArrow.arrowLeft {
  top: 0em;
  left: -2em;
  -webkit-animation: arrowLeft 1s infinite; }

#tutorialArrow.arrowRight > b,
.ttArrow.arrowRight > b {
  -webkit-transform: rotate(0deg); }

@-webkit-keyframes arrowBlink {
  0%,30% {
    opacity: 0; }

  40% {
    opacity: 1; }

  50%,60% {
    opacity: 0; }

  70% {
    opacity: 1; }

  80%,100% {
    opacity: 0; } }

@-webkit-keyframes arrowDown {
  0% {
    -webkit-transform: translateY(0em); }

  50% {
    -webkit-transform: translateY(1em); }

  100% {
    -webkit-transform: translateY(0em); } }

@-webkit-keyframes arrowUp {
  0% {
    -webkit-transform: translateY(0em); }

  50% {
    -webkit-transform: translateY(-1em); }

  100% {
    -webkit-transform: translateY(0em); } }

@-webkit-keyframes arrowRight {
  0% {
    -webkit-transform: translateX(0em); }

  50% {
    -webkit-transform: translateX(1em); }

  100% {
    -webkit-transform: translateX(0em); } }

@-webkit-keyframes arrowLeft {
  0% {
    -webkit-transform: translateX(0em); }

  50% {
    -webkit-transform: translateX(-1em); }

  100% {
    -webkit-transform: translateX(0em); } }

.btnS, .btnM, .btnL, .btnXL, .btnClose {
  display: inline-block;
  color: black;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.4);
  /*background-image: url(/img/common/btns.png);*/
  font-family: "simcarry_min_ipa_p";
  font-weight: bold; }

.btnS {
  line-height: .64rem;
  width: 1.16rem;
  height: .64rem;
  /*background-image: url(/img/common/button/btnS.png);*/
  -webkit-background-size: 100% 100%; }

.btnS.hover {
 /* background-image: url(/img/common/button/btnSA.png);*/
}

.btnM {
  line-height: .64rem;
  width: 1.6rem;
  height: .6rem;
  /*background-image: url(/img/common/button/btnM.png);*/
  -webkit-background-size: 100% 100%; }

.btnM.hover {
 /* background-image: url(/img/common/button/btnMA.png);*/
}

.btnL {
  line-height: .66rem;
  width: 2.34rem;
  height: 0.64rem;
  /*background-image: url(/img/common/button/btnL.png);*/
  -webkit-background-size: 100% 100%; }

.btnL.hover {
  background-position: 0% 0%;
  -webkit-background-size: 100% 100%;
  /*background-image: url(/img/common/button/btnLA.png);*/
}

.btnXL {
  font-size: 116%;
  line-height: .68rem;
  width: 3.18rem;
  height: .68rem;
  /*background-image: url(/img/common/button/btnXL.png);*/
  -webkit-background-size: 100% 100%; }

.btnXL.hover {
  background-position: 0% 0%;
  -webkit-background-size: 100% 100%;
  /*background-image: url(/img/common/button/btnXLA.png);*/ }

.btnClose {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1.02rem;
  height: 1.02rem;
  -webkit-background-size: 650.9804% auto;
  background-position: 99.6441% 54%; }

.btnBack {
  z-index: 100;
  border: none;
  background-color: transparent;
  position: relative;
  display: block;
  width: 1.42rem;
  height: 0.78rem;
  background-size: 100% 100%;
  background-image: url(/img/common/btnBack.png); }

/* commonButton */

.commonButton {
	position: relative;
	display: -webkit-box;
	-webkit-box-align: center;
	-webkit-box-pack: center;
	width: 2rem;
	height: 0.96rem;
	border-style: none;
	/*background-image: url(/img/common/ButtonLGreen.png);*/
	background-repeat: no-repeat;
	-webkit-background-size: 100% 100%;
	background-position: top left;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}
.commonButton > div {
	-webkit-box-flex: 1;
	color: white;
	font-size: 0.26rem;
	font-weight: bold;
}