@charset "utf-8";

/* *********************************************************
Happy Dungeons Support
Author    : Toylogic Web Support Team
File name : hpd_support_sp.css
Modified  : 2016-08-03
********************************************************* */


/* ========================================================
normalize
=========================================================== */
/*! sanitize.css v3.3.0 | CC0 1.0 Public Domain | github.com/10up/sanitize.css Latest tested: Android 6, Chrome 48, Edge 13, Firefox 44, Internet Explorer 11, iOS 9, Opera 35, Safari 9, Windows Phone 8.1 */

abbr[title]{text-decoration:underline;text-decoration:underline dotted}audio:not([controls]){display:none}b,strong{font-weight:bolder}button{-webkit-appearance:button;overflow:visible}button,input{}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:1px dotted ButtonText}button,select{text-transform:none}details{display:block}html{-ms-overflow-style:-ms-autohiding-scrollbar;overflow-y:scroll;-webkit-text-size-adjust:100%}hr{overflow:visible}input{-webkit-border-radius:0}input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button}input[type="number"]{width:auto}input[type="search"]{-webkit-appearance:textfield}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}main{display:block}pre{overflow:auto}progress{display:inline-block}summary{display:block}svg:not(:root){overflow:hidden}template{display:none}textarea{overflow:auto}[hidden]{display:none}*,:before,:after{box-sizing:inherit}*{font-size:inherit;line-height:inherit}:before,:after{text-decoration:inherit;vertical-align:inherit}button,input,select,textarea{font-family:inherit;font-style:inherit;font-weight:inherit}*{margin:0;padding:0}*,:before,:after{border-style:solid;border-width:0}a,area,button,input,label,select,textarea,[tabindex]{-ms-touch-action:manipulation;touch-action:manipulation}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}svg{fill:currentColor}[aria-busy="true"]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}[hidden][aria-hidden="false"]{clip:rect(0 0 0 0);display:inherit;position:absolute}[hidden][aria-hidden="false"]:focus{clip:auto}*{background-repeat:no-repeat}:root{background-color:#ffffff;box-sizing:border-box;color:#000000;cursor:default;font:100%/1.5 sans-serif}a{text-decoration:none}audio,canvas,iframe,img,svg,video{vertical-align:middle}button,input,select,textarea{background-color:transparent;color:inherit;}button,[type="button"],[type="date"],[type="datetime"],[type="datetime-local"],[type="email"],[type="month"],[type="number"],[type="password"],[type="reset"],[type="search"],[type="submit"],[type="tel"],[type="text"],[type="time"],[type="url"],[type="week"],select,textarea{min-height:1.5em}code,kbd,pre,samp{font-family:monospace,monospace}nav ol,nav ul{list-style:none}small{font-size:75%}table{border-collapse:collapse;border-spacing:0}textarea{resize:vertical}::-moz-selection{background-color:#b3d4fc;color:#ffffff;text-shadow:none}::selection{background-color:#b3d4fc;color:#ffffff;text-shadow:none}



/* ========================================================
base
=========================================================== */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,800,700);

body ,html{
  color: #fff;
  background:#000;
	font-family:'Open Sans', Helvetica,Verdana,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ", Arial, sans-serif;/* Besides Japan*/
  font-size: 1.0rem;
  line-height: 1.5;
  margin: 0;
  min-height:100%;
  position:relative;
}

body::before {
    background: #000 url("https://www.happydungeons.net/common/img/support/hpd_bg_support.jpg") no-repeat top center;
    background-position: bottom;
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 108px;
    content: "";
    z-index: 0;
}

header,footer,main{
	position:relative;
}

footer,main{
	overflow: hidden;
}


.header-inner{
	background:#000;
	/* height: 40px; */
}
.header-inner .logo {
	/* text-align:center; */
	/* position:absolute; */
	/* top: 230px; */
	z-index: 1;
	width: 100%;
	font-weight: bold;
	padding: 2%;
	/* color: #eebb08; */
	font-size: 14px;
	padding: 10px 2% 0;
	display: block;
	height: 40px;
}
.header-inner .logo a{
	color: #fff;
}


.logo{
  font-size:18px;
  font-family:'Open Sans';
  font-weight:700;
   text-decoration: none;
}
.logo a{
    font-family: 'Open Sans';
}
a .logo1{
  color:#eebb08;
    transition:.3s;
}
a .logo2{
  color:#d02613;
    transition:.3s;
}
a .logo3{
  color:#ec6b0c;
    transition:.3s;
}
.user-nav{
	background: #111;
	padding:3%;
}
.user-nav:after{
	display:table;
	clear:both;
	content:'';
}


.user-nav > div{
	/* float:left; */
}

.user-nav > a{
	/* float:right; */
	color:#fff;
	display: block;
}
.user-nav > a:after{
content:'\2709';
font-size:20px;
padding-top:5px;
padding-left:5px;
}

.dropdown-menu {
    background: #333 !important;
    border: none !important;
    border-radius: 3px;
    box-shadow: 0 1px 5px rgba(0,0,0,.1);
    display: none;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    left: 0;
    margin-top: 1px;
    min-width: 170px;
    padding: 10px !important;
     position:relative !important;
    text-align: left;
    z-index: 1000;
    color: #fff !important;
}

.dropdown-menu [role=menuitem] {
    color: #fff !important;
    cursor: pointer;
    display: block;
    padding: 0;
    white-space: nowrap !important;
}

.breadcrumbs{
	padding: 1% 3%;
	font-size:13px;
	text-shadow:0px 0px 10px #000;
	background: #222;
	margin-bottom: 16px;
}
.breadcrumbs li{
	display:inline-block;
}

.breadcrumbs li a{
	color:#fff;
	text-decoration:underline;
}

.breadcrumbs li:nth-of-type(n+2):before{
	content:' > ';
}

.secLogo{
	text-align:center;
}

.secLogo img{
	max-width:80%;
	max-height:80%;
}

.secWrap{
	clear:both;

	background:rgba(0,0,0,.75);

	padding:3%;

}

header:before{
	content: '';
	background: #e15e07 url(https://www.happydungeons.net/common/img/support/hpd_bg_sec.gif) no-repeat center;
	width: 100%;
	height: 5px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

.articleWrap header:before{
	display:none;
	height:0;
}


.secWrap .trendingList > li{
	list-style:none;
}

.articleWrap{
	clear:both;
	margin:3%;
	background:rgba(0,0,0,.75);
	border-radius:6px;
	padding: 5% 5%;
}

.secunderWrap .articleWrap{
	clear:both;
	margin:30px 0 0;
	background:rgba(0,0,0,.75);
	border-radius:0;
	padding: 5% 5%;
}
.secunderWrap .followtxtArea {
    padding: 5% 5% 0;
    background: rgba(0,0,0,.75);
    margin-top: 16px;
}
.articleWrap a{
	color:#fff;
	text-decoration:underline;
}
.articleWrap .catTtl a{
	text-decoration:none;
}

.articleWrap .catTtl{
	margin-top:1.5rem;
}

.article-list li, .community li {
	list-style:none;
	padding-bottom:5px;
}

.article-list li:before, .community li:before {
    content: '\E75A';
    font-family: "entypo";
    padding-right: 3px;
    padding-top:5px;
    font-size: 14px;
    display: inline-block;
    vertical-align: top;
}

.article-promoted span {
    color: #eebb08;
}
.articleWrap h1{
    font-size: 20px;
	padding:0;
	color:#f2c11b;
}
.articleWrap ul,.articleWrap ol {
    list-style-position: inside;
}

.footer{
	padding:5%;
	text-align:center;
	background: #000;
}

.footer .share{
	font-size: 0;
	margin-bottom: 1.5rem;
}

.footer .share a::before {
border-radius: 0;font-size: 2.0rem;
}

.share li {
    list-style: none;
	display: inline-block;
	width: 48%;
}


.share .share-linkedin:before {
    content: "\F318";
    background: #0077b5;
}

.share .share-googleplus:before {
    content: "\F30F";
    background: #d34836;
}

.share li:nth-of-type(1){
	margin-right: 1.5%;
}
.share li:nth-of-type(2){
	margin-left: 1.5%;
}

.share a::before {
	border-radius: 50%;
	color: #fff;
	display: inline-block;font-family: "entypo";
	text-align: center;
	width: 100%;
}

.share .share-facebook::before {
content: "\F30C";
background: #3b5998;
}
.share .share-twitter::before {
    content: "\F309";
    background: #55acee;
}

.articleWrap .share {
	margin:16px;
}
.articleWrap .share li {
    list-style: none;
	display: inline-block;
	width: 30px;
	margin-right: 1%;
	margin-left:0;
}
.articleWrap .share a {
    height: 32px;
    line-height: 31px;



    overflow: hidden;
    vertical-align: middle;
    width: 30px;
    text-decoration:none;
    display:inline-block;
    transition: .3s;
}

.footer small{
	padding-top: 1.5rem;
	line-height: 1.5;
	display: inline-block;
}

.search-box, .sub-nav .search, .sideArea .search {
    position: relative;
}

.search-box input, .sub-nav .search input, .sideArea input {
    line-height: 1.2em;
    font-weight: lighter;
    padding: .3em 2.7em;
    width: 100%;
    -webkit-appearance: none;
    border-radius: 4px;
    transition: .3s;
    box-sizing: border-box;
}

.search-box .search:before, .sub-nav .search .search:before, .sideArea input:before {
    content: "\1F50D";
    font-family: "entypo";
    font-size: 1.25em;
    line-height: 0;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 2.5em;
    z-index: 1;
    color: #aaa;
}

.search-box input#query, .sideArea input{
    background:#fff;
    min-height: 2.5rem;
	color:#000;
}
.search-box input[type="submit"], .sub-nav .search input[type="submit"], .sideArea .search input[type="submit"] {
    display: none;
}

.secTtl {
    font-size: 20px;
    font-weight: 600;
    position: relative;
    text-align: center;
    margin-bottom: 28px;
    margin-top:28px;
    display: block;
    clear: both;
}

.trendingArea .secTtl {
    margin-bottom: 10px;
}


.secTtl:before{
  content:'';
  border-top:1px solid #fff;
  position:absolute;
  bottom:-5px;
  left:0;
  width:100%;
}
.secTtl:after{
  content:'';
  border-bottom:2px solid #fff;
  position:absolute;
  bottom:-8px;
  left:0;
  width:100%;
}

.secCatch{
  font-weight:800;
  font-size:1.2rem;
  text-align:center;
  margin-bottom:10px;
}


.secCatch:before{
  content:'Welcome to "Happy Dungeons" Support Site!  How can we help? ';
}

.lan_jp .secCatch:before{
  content:'『ハッピーダンジョン』のサポートページへようこそ';
  display:block;
  line-height:1.2;
  margin-bottom:5px;
}
.lan_jp .secCatch:after{
  content:'ゲームに関する質問を下記トピックからお探しください';
  font-size:14px;
  display:block;
  line-height:1.2;
}


body.community-enabled .knowledge-base, body.community-enabled .community {
  display: inline-block;
  vertical-align: top;
  width:100%;
}


body .secTtl span:before{
  content:'Browse Topics to Find Your Answer';
  color:#fff;
}
body .lan_jp .knowledge-base .secTtl span:before{
  content:'トピックから情報を探す';
  color:#fff;
}





.category h2 a, .section h3 a {
  color: inherit;
}

.category h2 a:hover, .section h3 a:hover{
  color:#f1ae11;
}

.category{
  border:none;
  margin:0;
  display:block;
  box-sizing::border-box;
  border:1px solid #fff;
  width:49%;
  height:100px;
  margin-bottom:10px;
  transition:.3s;
  z-index: 9;
  position: relative;
  overflow: hidden;
}

.category:hover{
  border-color:#f1ae11;
  transition:.3s;
}
.category .categoryNav{
  border:none;
  margin:0;
  height: 100%;
  display: table;
  width: 100%;
}
.category .categoryNav a{
  /* min-width: 100%; */
  /* min-height: 100%; */
  display: table-cell;
  /* vertical-align: middle; */
  font-size:14px;
  color: #fff;
  background: rgba(0,0,0,.75);
  /* padding-right: 30%; */
  box-sizing: border-box;
}
.category .categoryNav a:hover,.category-tree .categorySubmit:hover span{
  text-decoration:none;
  color:#f1ae11;
  transition:.3s;
}
.category .categoryNav a span{
  /* background:rgba(0,0,0,.75); */
  display:block;
  /* text-align:center; */
  padding:10px;
  font-weight:600;
}

.category-tree .categorySubmit a:before{
  background:rgba(0,0,0,.75);
  display:block;
  text-align:center;
  padding:10px;
  position:relative;
}

.category .categoryNav a span:before {
    content: '\E75A';
    font-family: "entypo";
    padding-right: 5px;
    font-size: 14px;
    display: inline;
    padding-top: 16px;
}



.category-tree .category:nth-of-type(odd){
  float:left;
}

.category-tree .category:nth-of-type(even){
  float:right;
}

.category-tree .category:nth-of-type(1){
 background: #000 url(https://www.happydungeons.net/common/img/support/hpd_support_main1.jpg) no-repeat center right;
 background-size: cover;
}
.category-tree .category:nth-of-type(2){
 background:#000 url(https://www.happydungeons.net/common/img/support/hpd_support_main2.jpg) no-repeat  center right;
 background-size: cover;
}
.category-tree .category:nth-of-type(3){
 background:#000 url(https://www.happydungeons.net/common/img/support/hpd_support_main3.jpg) no-repeat  center right;
 background-size: cover;
}

.category-tree .categorySubmit{
 background:#000 url(https://www.happydungeons.net/common/img/support/hpd_support_main4.jpg) no-repeat  center right;
 background-size: cover;
 font-weight:700;
 text-align:center;
 position:relative;
 height: 100%;
 width: 100%;
 /* display: table-cell; */
}

.category-tree .categorySubmit a{
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  position:absolute;
  /* top:0; */
  z-index: 100;
  display: block;
  height: 100%;
  background: none;
  width: 100%;
}

.category-tree .categorySubmit span{

display: table-cell;

text-align: left;

padding:10px;

font-weight:600;

font-size:14px;

position: absolute;

width: 100%;

height: 100%;

z-index: 99;

/* text-indent: 0 !important; */

/* left: 100px; */

/* vertical-align: middle; */

/* top: 50%; */

/* padding: 50% 0 0 10px; */

/* margin-top: -14px; */

background: rgba(0,0,0,.75);
}
.category-tree .categorySubmit span:before {
    content: '\E75A';
    font-family: "entypo";
    padding-right: 5px;
    font-size: 16px;
    display: inline;
    padding-top: 16px;
}
.category-tree .categorySubmit span:after{
     content: 'Contact Us';
}
.lan_jp .category-tree .categorySubmit span:after{
     content: '意見・要望はこちら';
}


.trendingArea{
	clear:both;
	display:table;
	width:100%;
}

.trendingList li {
    border-bottom: 1px solid #a0a0a0;
    padding-left: 10px;
}

.trendingList li::before {
    content: '\E75A';
    font-family: "entypo";
    padding-right: 10px;
    font-size: 14px;
    display: inline-block;
    vertical-align: top;
    padding-top: 13px;
}

.trendingList a {
    font-size: 13px;
    display: inline-block;
    padding: 13px 0;
    color:#fff;
}


.article-footer {
    background: #1c1c1c;
    margin-top: 15px;
    padding: 20px 10px;
    border-radius: 4px;
}

.article-footer .article-request a{
	color:#f1ae11;
}


.sideArea {
    width: 100%;
    box-sizing: border-box;
    padding: 5%;
    background: #000;
    display: block;
    border-top: 1px solid #aaa;
}

.sideArticle{
	margin-bottom:20px;
}

.sideArea h3{
  margin:0;
  font-size:18px;
}
.sideArea h3:first-letter{
  color:#eebb08;
}

.sideArticle .recent-articles a,.sideArea .related-articles a{
  padding:12px 0;
  display: block;
  font-size:14px;
  color:#fff;
}

.sideArticle .recent-articles li,.sideArea .related-articles li{
   position:relative;
   list-style:none;
}

.sideArticle .recent-articles li:before,.sideArea .related-articles li:before{
  content:'';
  position:absolute;
  bottom:0;
  width:100%;
  height:1px;
  border-bottom:1px solid #0c0c0c;
}
.sideArticle .recent-articles li:after,.sideArea .related-articles li:after{
  content:'';
  position:absolute;
  bottom:-1px;
  width:100%;
  height:1px;
  border-bottom:1px solid #484848;
}


.article-body table{
	width:100%;
	/* margin: 10px; */
	display: block;
	margin-top: 10px;
	background: #333;
	padding: 16px 3%;
	border-radius: 4px;
}

.article-body table tr > td:first-child{
	display:block;
	width:100%;
	background:#333;
	text-align:left;
	font-weight:bold;
	padding: 0 0 5px 0;
	margin-bottom: 0;
}

.article-body table tr > td{
	display:block;
	width:100%;
	background: #222;
	padding: 2%;
	border-radius: 4px;
	margin-bottom: 16px;
}

.article-body .w100{
	width:100%;
	height:auto;
}

.article-body th{
	display:none;
}

.page-header{
	font-size:20px;
	padding:0;
	margin:0;
	text-align: center;
	text-shadow: 0 0 16px #000;
}
.secunderWrap .submitArea {
    clear: both;
    margin: 0 0 0;
    background: rgba(0,0,0,.75);
    border-radius: 0;
    padding: 5% 5% 40px 5%;
}

.secunderWrap .submitArea .form-field{
	margin-bottom:16px;
}

.form-field.required > label:after {
    content: "*";
    color: #f00;
    margin-left: 2px;
}

.secunderWrap .submitArea input{
	background:#fff;
	display:block;
	width:100%;
	border-radius:4px;
    min-height: 2.5rem;
    padding: .3em .5rem;
    box-sizing: border-box;
	color:#000;
}






.submitArea.form footer input[type=submit] {
    text-align: center;
    font-weight: 700;
    font-size: 1.2rem;
    transition: .3s;
    padding: 1rem;
    width:250px;
    border-radius:4px;
    margin: 16px auto 32px;
    display:block;
    background: #00aaff;
    box-shadow: 0 4px 0 #0088cc;
    color: #fff;
}

.submitArea.form footer input[type=submit][disabled] {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    background: #525252;
    color: #6b6b6b;
    box-shadow: 0 4px 0 #353535;
    cursor: initial;
}

.searchbox-suggestions {
  background-color: transparent;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 10px 20px;
}

.searchbox-suggestions li a {
    color: #ffcc00;
    text-decoration: underline;
}
.searchbox-suggestions li {
    list-style: none;
    margin-bottom: .8rem;
}

#request_description{
	display:block;
	background:#fff;
	width:100%;
	border-radius:4px;
	min-height:12rem;
	padding:.5rem;
	color:#000;
}

#request_description + p{
	font-size:13px;
	margin-top:.25rem;
	color:#ccc;
}


.ac-content input {
    display: none;
}
.ac-content label{
	border-radius:4px;
	position:absolute;
	top:0px;
	right:2%;
	font-size: 30px;
	padding:0 4px;
}
.ac-content label:before{
	content:'\E005';
   font-family: "entypo";
}


.ac-content input + .user-nav{
	height:0;
	padding:0;
	transition:.3s;
	overflow:hidden;
	position:absolute;
	width:100%;
	z-index:99;
}
.ac-content input:checked + .user-nav {
    height: auto;
    padding: 10px;
    transition:.3s;
}


.search-result{
    background: #252525;
    border-radius: 4px;
    padding: 20px;
}
.search-results-list li{
	list-style:none;
}
.search-results-list li a{
	color:#f1ae11;
}

.search-results-list li::before {content: '\E75A';font-family: "entypo";padding-right: 3px;font-size: 14px;display: inline-block;vertical-align: top;padding-top: 3px;}

/* Pagination */
.pagination {
  margin: 20px 0;
  text-align: center;
}

.pagination * {
  display: inline-block;
}

.pagination li {
  border: 1px solid #eee;
  float: left;
  margin-left: -1px;
}

[dir=rtl] .pagination li {
  float: right;
}

.pagination a, .pagination span {
  color: inherit;
  font-size: 14px;
  padding: 10px 14px;
}

.pagination-current {
  background-color: #f9f9f9;
  color: #000;
}

.pagination-first {
  border-radius: 3px 0 0 3px;
}

[dir=rtl] .pagination-first {
  border-radius: 0 3px 3px 0;
}

.pagination-last {
  border-radius: 0 3px 3px 0;
}

[dir=rtl] .pagination-last {
  border-radius: 3px 0 0 3px;
}

.article-body li{
	margin-bottom:.5rem;
	text-indent:-1rem;
	padding-left:1rem;
}

.lan_en .followttlen,.lan_en .followtxten,.lan_jp .followttljp,.lan_jp .followtxtjp,.lan_en .followNoteen ,.lan_jp .followNotejp{
  display:block;
}
.followttlen, .followtxten,.followttljp,.followtxtjp,.followNoteen ,.followNotejp {
  display:none;
 }

.followNotejp li,.followNoteen li{
	list-style: none;
}

.followNotejp li:nth-of-type(n+2),.followNoteen li:nth-of-type(n+2){
font-size: 13px;
color: #ccc;
}

.followNotejp li b,.followNoteen li b{
color:#fc0;
font-weight:normal;
}



/*==============================
error
===============================*/
.error-page{
    background: rgba(0,0,0,.75);
    text-align: center;
    padding: 5%;
}

.error-page p {
    padding-bottom: 1.6rem;
}

.error-page p+a{
    color: #fff;
    border: 1px solid #fff;
    padding: .5rem 1rem;
    border-radius: 5px;
}

.error-page p+a:hover{
    background: #fff;
    color:#000;
}

.error-page p+a::before {
    content: '\E75A';
    font-family: "entypo";
    padding-right: 5px;
    font-size: 14px;
    display: inline;
    padding-top: 16px;
}


/*==============================
mail 送信後強制調整
===============================*/


.notification-notice {
    background: #56e209 !important;
    border-color: #56e209 !important;
    position: relative;
}

.notification-text {
    color: #fff !important;
    font-weight: bold !important;
}

.notification-dismiss::before, .notification-icon::before {
    color: #fff !important;
}


/*==============================
ReCAPTHA
===============================*/
.g-recaptcha[ui="invisible"] {
    margin-top: 50px;
    text-align: center;
}