/* @docs
label: Core Remedies
version: 0.1.0-beta.2

note: |
  These remedies are recommended
  as a starter for any project.

category: file
*/


/* @docs
label: Box Sizing

note: |
  Use border-box by default, globally.

category: global
*/
*, ::before, ::after { box-sizing: border-box; }


/* @docs
label: Line Sizing

note: |
  Consistent line-spacing,
  even when inline elements have different line-heights.

links:
  - https://drafts.csswg.org/css-inline-3/#line-sizing-property

category: global
*/
html { line-sizing: normal; }


/* @docs
label: Body Margins

note: |
  Remove the tiny space around the edge of the page.

category: global
*/
body { margin: 0; }


/* @docs
label: Hidden Attribute

note: |
  Maintain `hidden` behaviour when overriding `display` values.

  category: global
*/
[hidden] { display: none; }


/* @docs
label: Heading Sizes

note: |
  Switch to rem units for headings

category: typography
*/
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.17rem; }
h4 { font-size: 1.00rem; }
h5 { font-size: 0.83rem; }
h6 { font-size: 0.67rem; }


/* @docs
label: H1 Margins

note: |
  Keep h1 margins consistent, even when nested.

category: typography
*/
h1 { margin: 0.67em 0; }


/* @docs
label: Pre Wrapping

note: |
  Overflow by default is bad...

category: typography
*/
pre { white-space: pre-wrap; }


/* @docs
label: Horizontal Rule

note: |
  1. Solid, thin horizontal rules
  2. Remove Firefox `color: gray`
  3. Remove default `1px` height, and common `overflow: hidden`

category: typography
*/
hr {
  border-style: solid;
  border-width: 1px 0 0;
  color: inherit;
  height: 0;
  overflow: visible;
}


/* @docs
label: Responsive Embeds

note: |
  1. Block display is usually what we want
  2. The `vertical-align` removes strange space-below in case authors overwrite the display value
  3. Responsive by default
  4. Audio without `[controls]` remains hidden by default

category: embedded elements
*/
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
  max-width: 100%;
}
audio:not([controls]) { display:none; }


/* @docs
label: Responsive Images

note: |
  These new elements display inline by default,
  but that's not the expected behavior for either one.
  This can interfere with proper layout and aspect-ratio handling.

  1. Remove the unnecessary wrapping `picture`, while maintaining contents
  2. Source elements have nothing to display, so we hide them entirely

category: embedded elements
*/
picture { display: contents; }
source { display: none; }


/* @docs
label: Aspect Ratios

note: |
  Maintain intrinsic aspect ratios when `max-width` is applied.
  `iframe`, `embed`, and `object` are also embedded,
  but have no intrinsic ratio,
  so their `height` needs to be set explicitly.

category: embedded elements
*/
img, svg, video, canvas {
  height: auto;
}


/* @docs
label: Audio Width

note: |
  There is no good reason elements default to 300px,
  and audio files are unlikely to come with a width attribute.

category: embedded elements
*/
audio { width: 100%; }

/* @docs
label: Image Borders

note: |
  Remove the border on images inside links in IE 10 and earlier.

category: legacy browsers
*/
img { border-style: none; }


/* @docs
label: SVG Overflow

note: |
  Hide the overflow in IE 10 and earlier.

category: legacy browsers
*/
svg { overflow: hidden; }


/* @docs
label: HTML5 Elements

note: |
  Default block display on HTML5 elements.
  For oldIE to apply this styling one needs to add some JS as well (i.e. `document.createElement("main")`)

links:
  - https://www.sitepoint.com/html5-older-browsers-and-the-shiv/

category: legacy browsers
*/
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}


/* @docs
label: Checkbox & Radio Inputs

note: |
  1. Add the correct box sizing in IE 10
  2. Remove the padding in IE 10

category: legacy browsers
*/
[type='checkbox'],
[type='radio'] {
  box-sizing: border-box;
  padding: 0;
}

/*ここから*/
html{
	font-size: 4vw;
}
a {
	color: #B59BFF;
	text-decoration: none;
}
body{
	color:#FFF;
	background:#003956;
  	font-family: "M PLUS 1p", sans-serif;
  	font-weight: 400;
  	font-style: normal;
}
#container{
	margin: 0;
	width: 96%;
	margin: 0 auto;
	padding-bottom: 5vh;
}
.help_body{
	position:relative;
	background: url(../images/bg_container_center.png) no-repeat bottom;
	-moz-background-size:100% 100%;
	background-size:100% 100%;
	padding: 8vw 3vw 2vw 3vw;
}
.help_body:before{
	position: absolute;
	background: url(../images/bg_container_top.png) no-repeat top;
	-moz-background-size:100% 100%;
	background-size:100% 100%;
	content: "";
	top:0;
	left:0;
	height: 5vw;
	width: 100%;
}
.help_body:after{
	position: absolute;
	background: url(../images/bg_container_bottom.png) no-repeat top;
	-moz-background-size:100% 100%;
	background-size:100% 100%;
	left:0;
	bottom:0;
	content: "";
	height: 3vw;
	width: 100%;
}
h1.help_title{
	width:100%;
	margin: 0 auto 0 auto;
}
.help_body h2{
	margin: 0 0 4vw 0;
}
h1 img, h2 img{
	width:100%;
	display: block;
}
.help_body h3{
	position:relative;
	width: 100%;
	text-align: center;
	font-size: 5vw;
	font-weight: bold;
	margin: 0 auto 1vw auto;
}
.help_body h3 img{
	display: block;
	width:100%;
}
.help_body h3 span{
	color: #006656;
	position: absolute;
	display: block;
	width:100%;
	top:8%;
}

.help_top_link{
	width: 96%;
	padding: 0;
	margin: 0 auto 0vw auto;
	font-size:0;
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 800;
	font-style: normal;
}
.help_top_link li{
	position: relative;
	list-style:none;
	font-weight: bold;
	margin: 0 0.1% 0 0.1%;
	width: 49.6%;
	display: inline-block;
	text-align: center;
	font-size: 5vw;
}
.help_top_link li img{
	display: block;	
	width:100%;
}
.help_top_link li:nth-child(even) img{
  transform: scale(-1, 1);
}
.help_top_link li span{
	position: absolute;	
	display: block;
	width:100%;
	top:8%;
}

.help_top_link li a{
	display: block;	
	width:100%;	
	color: #FFF;
	text-shadow: 0 0.3vw 0 rgba(0, 0, 0, 0.37);
}
.top_navi_text{
	text-align: center;
	margin-top: 0;
	color: #72b6d9;
	font-size: 4vw;
}
.help_top_btn{
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 0;
}
.help_top_btn li{
	margin: 0;
	padding: 0;
	display: inline-block;
}
.help_top_btn li img{
	display: block;
	width: 100%;
}
.help_top_btn li a{
	display: block;
	margin: 0;
}
.help_body p, .skill_icon_list{
	display: block;
	width: 100%;
	margin: 0 auto 4vw auto;
}
.help_body strong{
	font-weight: bold;
	color: #FC0;
}

/*アコーディオンメニュー*/
.accordion-txt {
    max-width: 100%;
    border: 0.5vw solid #00d2fc;
    border-radius: 1vw;
	background: #a5e3ec;
	margin: 0.5vw 0;
}
.accordion-txt summary {
    display: flex;
    justify-content: start;
    align-items: start;
    position: relative;
    padding: 0.7vw 0.2vw;
	color: #003956;
    cursor: pointer;
	line-height:4.5vw;
}

.accordion-txt summary::-webkit-details-marker {
    display: none;
}

.accordion-txt summary::before {
    transform: rotate(-45deg);
    width: 2vw;
    height: 2vw;
    margin: 0.5vw;
    border-bottom: 1vw solid #F90;
    border-right: 1vw solid #F90;
    content: '';
    transition: transform .3s;
	margin-top: 1vw;
}

.accordion-txt[open] summary::before {
    transform: rotate(45deg);
}

.accordion-txt div {
    transform: translateY(-1vw);
    opacity: 0;
    margin: 0;
    padding: 1vw;
    color: #FFF;
    transition: transform .5s, opacity .5s;
	background: #003956;
}
.accordion-txt[open] div {
    transform: none;
    opacity: 1;
}
.accordion-img{
	margin-bottom: 1vw;
}

 img{
	display: block;
	width: 100%;
}
.accordion-img > summary {
    position: relative;
    cursor: pointer;
	list-style: none;
	display: block;
}

.accordion-img > summary::-webkit-details-marker {
    display: none;
}

.accordion-img > summary::before {
    content: '';
    transition: transform .3s;
}

.accordion-img > div {
    transform: translateY(-10px);
    opacity: 0;
    padding: 0;
    transition: transform .5s, opacity .5s;
}

.accordion-img[open] > div {
    transform: none;
    opacity: 1;
}
.accordion-img[open] > .linebox{
	padding: 2vw;
}
.line_fire{border: 0.5vw #ff9900 solid ;}
.line_water{border: 0.5vw #00bffe solid ;}
.line_wind{border: 0.5vw #00db95 solid ;}
.line_light{border: 0.5vw #fffa7a solid ;}
.line_dark{border: 0.5vw #975ffe solid ;}
.line_none{border: 0.5vw #acacac solid ;}
.line_default{border: 0.5vw #00ffff solid ;}
.line_yellow{border: 0.5vw #ffff00 solid ;}
.hidden_box {
    /*line-height: 0;
    margin: 2em 0;前後の余白*/
    padding: 0;
}

/*画像の隙間*/
.hidden_box img {
    line-height: 0;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 0;
    height: auto;
    opacity: 1;
}
/*アコーディオンメニュー*/

.document{
	background: rgba(255,255,255,0.8);
	color: #000;
	padding: 5vw 3vw;
}
.document strong{
	font-weight: bold;
	color:black;
}
.document h1{
	text-align: center;
	font-size: 6vw;
	margin: 0 auto 1vw auto;
}
.document h2, .document h3{
	font-size: 4vw;
	margin: 5vw 0 0 0;
	text-align: left;
}
.document ol{
	margin: 0 0 0 3vw;
}
.document ul{
	margin: 0;
	padding: 0;
}
.document ol li, .document ul li{
	margin-bottom: 1.5vw;
}
.document > ol.num-style1{
    list-style-position: inside;
	padding-left: 0;
	margin: 0;
}
.document > ol.num-style2{
    list-style-position: outside;
}
.document ol.num-style1 > li{
    list-style-type: decimal;
}
.document ol.num-style2{
  position: relative;
  list-style-type: none;
}
.document ol.num-style2 > li:before{
  position: absolute;
  right: calc(100% - 3vw);  /* 0.5remは連番とテキストとの余白 */
  content: "(" counter(list-item) ")";
}
.document ul.hyphen-style{
	font-size: 3.5vw;
	margin-bottom: 4vw;	
}
.document ul.hyphen-style > li{
	list-style: none;
}
.document ul.hyphen-style > li:before{
	content: "-";
	padding-right: 0.5em;
}
.document ul.dot-style > li{
    list-style-type: disc;
    list-style-position: outside;
	margin: 0;
	padding: 0;
}
.document dl{
}
.document dl dt{
	font-weight: bold;
}
.document dl dd{
	margin-bottom: 1.5vw;
}
.right_link{
	text-align: right;
}
.right_link:before{
	content:"＞";
	color:#F60;
	font-weight:bold;
}
.list_table {
	width: 100%;
	color: #000;
}
.list_table th{
	background: #666;
}
.list_table tr:nth-child(even) td{
	background: #FFF;
	padding: 3%;
}
.list_table tr:nth-child(odd) td{
	background: #EFEFEF;
	padding: 3%;
}

.help_img{
	display: block;
	width: 100%;
	margin: 0 auto;
    border-radius: 2vw;
    border: 0.5vw solid #00d2ff;
}
.help_img_center{
	display: block;
	width: 100%;
	margin: 0 auto;
}
.help_img_accordion{
	display: block;
	width: 100%;
	margin: 0 auto;
    border-radius: 1vw;
}
.rate_list{
	color: #000;
	width: 100%;
	margin: 0 auto;
	font-size: 3.5vw;
	border-spacing: 0.4vw;
}
.rate_list caption, .item_thumblist caption, h4{
	font-size: 4vw;
	position: relative;
	color: #00d2fc;
	font-weight: bold;
	padding: 0.5vw;
	border: solid #0d719e;
	border-width:1vw 0;
	margin-bottom: 1vw;
 	text-shadow: 0 0.2vw 0 rgba(0, 121, 155, 1);
}
.rate_list caption:before, .item_thumblist caption:before, h4:before{
	position: absolute;
	top: 0.5vw;
	left: 0.5vw;
	width: calc(100% - 1vw);
	height: calc(100% - 1vw);
	content: '';
	border: solid #0d719e;
	border-width:0.5vw 0;
}

.rate_list th{
	color: #FFF;	
  	background:
    linear-gradient(135deg, transparent 1vw, #0d719e 1vw);
  	background-position: top left;
  	background-repeat: no-repeat;
}
.rate_list tr:nth-child(even) td{
	background: #FFF;
  	background:
    linear-gradient(315deg, transparent 1vw, #FFF 1vw);
  	background-position: bottom right;
  	background-repeat: no-repeat;
	padding: 1vw;
}
.rate_list tr:nth-child(odd) td{
	background: #EFEFEF;
  	background:
    linear-gradient(315deg, transparent 1vw, #EFEFEF 1vw);
  	background-position: bottom right;
  	background-repeat: no-repeat;
	padding: 1vw;
}
.hero_list tr td:nth-child(1), .hero_list tr td:nth-child(2), .raid_list tr td:nth-child(1), .eq_list tr td:nth-child(1){text-align: center;}
.hero_list tr td:nth-child(4), .eq_list tr td:nth-child(3), .chip_list tr td:nth-child(3), .raid_list tr td:nth-child(3){text-align: right;}

h4{
	text-align: center;
	width: 100%;
	margin: 0 auto;
	margin-bottom: 0.5vw;	
}
.skill_icon_list dt{
	font-weight: bold;
	color:limegreen;
}
.skill_icon_list dd{
	margin: 0 0 2vw 2vw;
}
.item_thumblist{
	width: 100%;
	margin: 0 auto;
}
.item_thumblist td strong{
	text-shadow: 0 0.2vw 0 rgba(0,0,0,0.72);
	color:#00ccff;
	border-spacing: 0.4vw;
}
.item_thumblist td{
	background: #FFFFFF;
	color:#333;
	padding: 1vw;
	vertical-align: top;
  	background:
    linear-gradient(315deg, transparent 1vw, #FFF 1vw);
  	background-position: bottom right;
  	background-repeat: no-repeat;
}
.status_list{
	margin: 0 auto;
}
.status_list th{
	vertical-align: middle;
	width:25%;
}
.status_list td{
	text-shadow: 0 0.2vw 0 rgba(0,0,0,0.72);
	font-weight: bold;
	color:#00ccff;
	text-align: center;
	border-bottom: 0.5vw #1C8297 solid;
	width:25%;
}
.bana_plain{
	width:100%;
	display: block;
	margin: 3vw auto;
}
.btn_pgback{
	display: block;
	width:10%;
	margin: 7vw 0;
}
.skill_detail{
	width:100%;
}
.skill_detail dt:first-child{
	position:relative;
	margin: 0 auto 2vw auto;
}
.skill_detail dt:first-child img{
	display: block;
	width:100%;	
}
.skill_detail dt:first-child span{
	font-weight: bold;
	color: #FFF;
	position: absolute;
	display: block;
	text-align: center;
	width:100%;
	text-box: trim-both cap alphabetic;
	top:7.5vw;
}
.skill_detail dt:nth-child(n+2){
 	display: flex;
	width:100%;
	font-weight: bold;
	margin: 0 auto 2vw auto;
}
.skill_detail dt:nth-child(n+2) strong {
	display: block;
	text-align: center;
	width:30%;
	color: #BBBBBB;
	background: #666;
	background:
    linear-gradient(315deg, transparent 1vw, #666 1vw);
	background-position: bottom right;
	background-repeat: no-repeat;
	text-box: trim-both cap alphabetic;
	font-size: 3.8vw;
	padding: 1vw 0;
}
.skill_detail dt:nth-child(n+2) span {
	width:70%;
	color: #BBBBBB;
	font-size: 4.4vw;
	padding: 0.55vw 0;
	margin-left: 1vw;
	text-box: trim-both cap alphabetic;
}
.skill_detail dd{
	display: block;
	width:100%;
	margin: 0 auto 6vw auto;
}
.news_box{
	width:100%;
	margin: 0 auto 0 auto;
}
.news_box dt{
	position: relative;
	margin-bottom: 1vw;
}
.news_box dt span {
	display: block;
	position: absolute;
	left:50vw;
	top:0;
	line-height: 100%;
	font-weight: bold;

}
.news_box dd{
	display: block;
	text-align: center;
	margin: 0 0 5vw 0;
}
.news_box dd img{
	width:100%;
}
.nomal_bana{
	display: block;
	width:100%;
	margin-bottom: 2vw;
	text-align: center;
}