@charset "UTF-8";


@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700&display=swap');

/* common
-------------------------------------------------*/
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, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display: block;
}
ul {
    list-style: none;
}
img {
	width: 100%;
	border: none;
	vertical-align: bottom;
}
@media only screen and (max-width:750px){
#sqexFooter dd img { width:25px !important; }
}


#sqexlogo img{ width: auto; }

blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
address, em, code, cite, dfn, var, optgroup {
  font-style: normal;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
input, select {
    vertical-align: middle;
}
input[type="button"],input[type="text"],input[type="submit"],input[type="reset"],textarea {
	-webkit-appearance: none;
	border-radius: 0;
	font-family: 'Noto Sans JP', "游ゴシック" , "Yu Gothic" , "游 ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐ ゴシック" , "MS PGothic" , sans-serif;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
.clear {
	font-size: 1px;
	height: 1px;
	clear: both;
}

/* module
------------------------------------------------- */
.floatL {
	float: left;
	display: inline;
}
.floatR {
	float: right;
	display: inline;
}
.alignCenter {text-align: center;}
.alignLeft {text-align: left;}
.alignRight {text-align: right;}
.valignTop {vertical-align: top;}
.valignMiddle {vertical-align: middle;}
.valignBottom {vertical-align: bottom;}

.light { font-weight: 300; }
.medium { font-weight: 500; }
.bold { font-weight: 700; }

.corTxt01 {
	color: #ffd940;
}

.none { display: none; }
.pcon { display: block; }
.spon { display: none; }

@media only screen and (max-width:750px){
.pcon { display: none; }
.spon { display: block; }
}


/* a
------------------------------------------------- */
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
	text-decoration: none;
	outline: none;
	color: #222;
}
@media only screen and (min-width:751px){
a:hover {
	text-decoration: underline;
}
a.al:hover {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
	transition: 0.3s;
	text-decoration: none;
}
}


/* font
------------------------------------------------- */
@media only screen and (min-width:751px){
.fo10 { font-size: 10px; }
.fo11 { font-size: 11px; }
.fo12 { font-size: 12px; }
.fo13 { font-size: 13px; }
.fo14 { font-size: 14px; }
.fo15 { font-size: 15px; }
.fo16 { font-size: 16px; }
.fo17 { font-size: 17px; }
.fo18 { font-size: 18px; }
.fo19 { font-size: 19px; }
.fo20 { font-size: 20px; }
.fo21 { font-size: 21px; }
.fo22 { font-size: 22px; }
.fo24 { font-size: 24px; }
.fo25 { font-size: 25px; }
.fo27 { font-size: 27px; }
.fo28 { font-size: 28px; }
.fo29 { font-size: 29px; }
.fo30 { font-size: 30px; }
.fo33 { font-size: 33px; }
.fo35 { font-size: 35px; }
}
@media only screen and (min-width:751px) and (max-width:1024px){
.fo10 { font-size: 0.9765624vw; }
.fo11 { font-size: 1.0742186vw; }
.fo12 { font-size: 1.171875vw; }
.fo13 { font-size: 1.2695312vw; }
.fo14 { font-size: 1.3671875vw; }
.fo15 { font-size: 1.4648437vw; }
.fo16 { font-size: 1.5625vw; }
.fo17 { font-size: 1.6601562vw; }
.fo18 { font-size: 1.7578125vw; }
.fo19 { font-size: 1.8554687vw; }
.fo20 { font-size: 1.953125vw; }
.fo21 { font-size: 2.0507812vw; }
.fo22 { font-size: 2.1484374vw; }
.fo24 { font-size: 2.34375vw; }
.fo25 { font-size: 2.4414061vw; }
.fo27 { font-size: 2.6554687vw; }
.fo28 { font-size: 2.734375vw; }
.fo29 { font-size: 2.8320311vw; }
.fo30 { font-size: 2.9296875vw; }
.fo33 { font-size: 3.2226561vw; }
.fo35 { font-size: 3.4179687vw; }
}


/* html
-------------------------------------------------*/
html {
	overflow-y: scroll;
	height: 100%;
}

/* body
------------------------------------------------- */
body {
	font-family: 'Noto Sans JP', "游ゴシック" , "Yu Gothic" , "游 ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐ ゴシック" , "MS PGothic" , sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #222;
    font-weight: 400;
	-webkit-text-size-adjust: 100%;
	height: 100%;
}
@media only screen and (min-width:751px) and (max-width:1024px){
body {
	font-size: 1.3671875vw;
}
}
@media only screen and (max-width:750px){
body {
	font-size: 3.725vw;
}
}


/* wrapper
------------------------------------------------- */
#wrapper {
	width: 100%;
	margin: 0 auto;
	clear: both;
	min-height: 100%;
	position: relative;
}


/* header
------------------------------------------------- */
#header {
	width: 100%;
	clear: both;
	position: relative;
	z-index: 100;
	background: url(/gfantasy/common/images/bg_wrap.jpg) repeat center top;
}
#header .hlogo {
	background: #fff;
	border-bottom: #838383 1px solid;
}
#header .hlogo a {
	display: block;
	width: 9.5em;
	max-width: 130px;
	padding: 0.785em 0.357em;
	line-height: 0;
}
#header .tg {
	font-weight: 700;
	float: right;
	padding: 1em 0 0.75em;
	line-height: 1.2;
	margin-right: -0.5em;
}
#header .hSns {
	float: right;
	clear: right;
	margin-right: -0.5em;
}
#header .hSns li {
	width: 2.64286em;
	max-width: 37px;
	display: inline-block;
	vertical-align: top;
	padding: 0 0 0 0.5em;
}
#header .hinner {
	max-width: 960px;
	margin: 0 auto;
	position: relative;
}
#header .logo {
	width: 24.45%;
	float: left;
	padding: 0.7143em 0 0.5em;
} 
@media only screen and (min-width:751px) and (max-width:980px){
/* header
------------------------------------------------- */
#header .hinner {
	padding: 0 1%;
}
#header .tg,
#header .hSns {
	margin-right: 0;
}
}
@media only screen and (max-width:750px){
#header .hinner {
	background: url(/gfantasy/common/images/sp_bg_wrap.jpg) repeat center top;
	background-size: cover;
	/*background: #fff;*/
	position: static;
}
#header .hlogo {
	border-bottom: none;
}
#header .hlogo a {
	width: 37.8667%;
	margin: 0 auto;
	max-width: 284px;
	padding: 1.6vw 0 2.4vw;
}
#header .tg,
#header .hSns {
	margin-right: 0;
}
#header .tg {
	width: 100%;
	float: none;
	text-align: center;
	background: #eaedf1;
	font-size: 2.66vw;
	font-weight: 500;
	padding: 0.3em 0;
}
#header .hSns {
	padding: 2.1286vw 16.5333% 0 0;
}
#header .hSns li {
	width: 10.3768vw;
	max-width: 78px;
}
#header .logo {
	width: 40%;
	padding: 1.33vw 2.66vw;
}
}


/* navi
------------------------------------------------- */
#navi {
	background: #222;
	box-shadow: 0 0.3571428em 0 #bcc2cb;
}
#navi ul li a.current {
	color: #E4EA8C;
}
@media only screen and (min-width:751px){
#navi ul {
	max-width: 922px;
	display: flex;
    justify-content: space-between;
	margin: 0 auto;
	text-align: center;
}
#navi ul li {
	padding: 0.55em 0;
}
#navi ul li a {
	color: #fff;
	font-weight: 700;
	display: block;
	padding: 0.5em;
}
#navi ul li a:hover{
	text-decoration: none;
	color: #E4EA8C;
	transition: 0.6s;
}
}
@media only screen and (min-width:751px) and (max-width:980px){
#navi ul {
	padding: 0 1%;
}
}
@media only screen and (max-width:750px){
#navi {
	box-shadow: 0 0.6652vw 0 #bcc2cb;
}
#navi ul {
	display: flex;
	flex-wrap: wrap;
	padding: 1px 0;
}
#navi ul li {
	width: 25%;
	font-size: 2.93vw;
	border-bottom: #535353 1px solid;
	border-left: #535353 1px solid;
	box-sizing: border-box;
	display: table;
}

#navi ul li.pcon{
	display: none;
}

#navi ul li:nth-last-of-type(-n + 4){
	border-bottom: none;
}

#navi ul li:nth-of-type(2){
	border-left: none;
}
#navi ul li:nth-of-type(6){
	border-left: none;
}

#navi ul li a {
	color: #fff;
	font-weight: 700;
	display: table-cell;
	vertical-align: middle;
	height: 3.65em;
	text-align: center;
}

/* btnMenu
------------------------------------------------- */
.btnMenu {
	width: 11.308vw;
	position: absolute;
	top: 6vw;
	right: 2.13%;
}
.btnMenu.open {
	background: url(/gfantasy/common/images/btn_colse.png) no-repeat center center;
	background-size: 100% 100%;
}
.btnMenu.open img {
	opacity: 0;
}


	/* fixNav
------------------------------------------------- */
	.fixNav.spNav {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9000;
		border-bottom: #c2c3c5 1PX solid;
	}

	.fixNav .tg {
		display: none;
	}

	.fixNav .btnMenu {
		top: 1vw;
	}
}



/*toggleNav*/


@media only screen and (min-width:750.1px) {
	#toggleNavi{
		display: none !important;
	}
}
@media only screen and (max-width:750px) {
	#toggleNavi{
		background: #222;
		display: none;
		position: absolute;
		width: 100%;
		z-index: 100;
	}

	#toggleNavi ul {
		display: flex;
		flex-wrap: wrap;
		padding: 1px 0;
	}
	
	#toggleNavi ul li:first-of-type{
		display: none;
	}
	
	#toggleNavi ul li {
        width: 50%;
        font-size: 3.2vw;
        border-bottom: #535353 1px solid;
        border-left: #535353 1px solid;
        box-sizing: border-box;
        display: table;
        padding: 7px 0;
        }

	#toggleNavi a{
		color: #fff;
		font-weight: 700;
		display: table-cell;
		vertical-align: middle;
		height: 3.65em;
		text-align: center;
	}
	#toggleNavi ul li.noborder {
		border-bottom: none;
	}

}


/* contents
------------------------------------------------- */
#contents {
	width: 100%;
	clear: both;
    padding-bottom: 2em;
    background-color: transparent;
}
@media only screen and (max-width:750px){
#contents {
    background-color: transparent;
}
}


/* section
------------------------------------------------- */
section {
	width: 100%;
}
section .inner {
	max-width: 960px;
	margin: 0 auto;
	clear: both;
	position: relative;
}
@media only screen and (min-width:751px) and (max-width:980px){
section .inner {
	padding: 0 1%;
}
}
@media only screen and (max-width:750px){
section .inner {
	width: 95.2%;
}
}


/* waku01
------------------------------------------------- */
.waku01 {
	padding-bottom: 2.8571428em;
}
.waku01 .inner {
	background: #eaedf1;
	padding: 1.2857em 1.05%;
	box-sizing: border-box;
}
@media only screen and (min-width:751px) and (max-width:980px){
.waku01 .inner {
	margin: 0 1%;
	padding: 1.2857em 1.05%;
}
}
@media only screen and (max-width:750px){
.waku01 {
	padding-bottom: 5.5vw;
}
.waku01 .inner {
	width: 94%;
	padding: 3.8vw 2.5% 3.2vw;
}
}


/* waku02
------------------------------------------------- */
.waku02 .inner {
	padding: 0 1.05%;
	box-sizing: border-box;
}
@media only screen and (max-width:750px){
.waku02 .inner {
	width: 95%;
	padding: 3.8vw 0 3vw;
}
}


/* headTitle01
------------------------------------------------- */
.headTitle01 {
	max-width: 960px;
	margin: 0 auto;
	background: url(/gfantasy/common/images/bg_title01.png) no-repeat center top;
	background-size: 100% 100%;
	box-shadow: 0 0.3571428em 0 #bcc2cb;
	margin-bottom: 0.3571428em;
	position: relative;
	padding: 1.1em 4.4em;
	box-sizing: border-box;
	position: relative;
	z-index: 10;
}
.headTitle01 .ja {
	font-weight: 700;
	letter-spacing: 0.1em;
	text-shadow: 2px 2px 2px #fff;
}
.headTitle01 .eng {
	font-weight: normal;
	position: absolute;
	bottom: 0.5em;
	right: 2.5%;
}
.headTitle02 {
	background: url(/gfantasy/common/images/bg_title02.png) no-repeat center center;
	background-size: 100% 100%;
	color: #fff;
	box-shadow: 0 0.3125em 0 #bcc2cb;
	margin-bottom: 0.3125em;
	padding: 0.4em 2.25em;
	letter-spacing: 0.15em;
}
.headTitle03 {
	max-width: 960px;
	margin: 0 auto;
	box-shadow: 0 0.3571428em 0 #bcc2cb;
	margin-bottom: 0.3571428em;
}
.headTitle03 .bgTit {
	background: url(/gfantasy/common/images/bg_title03.jpg) no-repeat right top #eaedf1;
	background-size: 25.53191% auto;
	display: block;
	margin-left: 2.083%;
	padding: 0.65em 0.667em;
}
.headTitle04 {
	font-weight: bold;
	color: #fff;
	background: #9da4b1;
	box-shadow: 0 0.3125em 0 #e9eaee;
	padding: 0.4em 1em;
	letter-spacing: 0.1em;
}
@media only screen and (min-width:751px) and (max-width:980px){
.headTitle01,
.headTitle03 {
	margin-left: 1%;
	margin-right: 1%;
}
}
@media only screen and (max-width:750px){
.headTitle01 {
	background: url(/gfantasy/common/images/sp_bg_title01.png) no-repeat center top;
	background-size: 100% 100%;
	padding: 0.5em 2.5em;
	box-shadow: 0 0.8vw 0 #bcc2cb;
	margin-bottom: 0.8vw;
}
.headTitle01 .ja {
	font-size: 4.26vw;
}
.headTitle01 .eng {
	font-size: 2.4vw;
}
.headTitle02 {
	background: url(/gfantasy/common/images/sp_bg_title02.png) no-repeat center center;
	background-size: 100% 100%;
	box-shadow: 0 0.8vw 0 #bcc2cb;
	margin-bottom: 0.8vw;
	padding: 0.3em 1.78em;
}
.headTitle03 {
	box-shadow: 0 0.8vw 0 #bcc2cb;
	margin-bottom: 0.8vw;
}
.headTitle03 .bgTit {
	background: url(/gfantasy/common/images/sp_bg_title03.jpg) no-repeat right top #eaedf1;
	background-size: 32.967% auto;
	margin-left: 2.667%;
	font-size: 4.26vw;
	padding: 0.45em 1.875em;
}
.headTitle04 {
	box-shadow: 0 0.8vw 0 #e9eaee;
	padding: 0.3em 1em;
}
}


/* breadCrumbs
------------------------------------------------- */
.breadCrumbs {
	padding: 1.7em 0 1.65em;
	position: relative;
	z-index: 10;
}
.breadCrumbs ul {
	max-width: 960px;
	margin: 0 auto;
}
.breadCrumbs ul li {
	display: inline;
	padding-right: 0.2em;
}
.breadCrumbs ul li a {
	margin-right: 0.4em;
}
@media only screen and (min-width:751px) and (max-width:980px){
.breadCrumbs ul {
	padding: 0 1%;
}
}
@media only screen and (max-width:750px){
.breadCrumbs {
	padding: 1em 0;
}
.breadCrumbs ul {
	padding: 0 2%;
	font-size: 3.2vw;
}
.breadCrumbs ul li a {
	text-decoration: underline;
}
}


/* btnDetail
------------------------------------------------- */
.btnDetail {
	text-align: right;
}
.btnDetail a {
	width: 16em;
	display: inline-block;
	background: url(/gfantasy/common/images/ico01.png) no-repeat 98.08% 86.667% #222;
	background-size: 0.714286em auto;
	color: #fff;
	font-weight: 700;
	text-align: left;
	box-sizing: border-box;
	box-shadow: 0.2143em 0.2143em 0 #bcc2cb;
	margin: 0 0.2143em 0.2143em 0;
	border-radius: 5px;
	padding: 0.86em 1.286em;
}
.btnDetail.wid a {
	width: 18.571428em;
}
.btnDetail.tc,
.btnDetail.tc a {
	text-align: center;
}
@media only screen and (min-width:751px){
.btnDetail.wid {
	padding-right: 3.2%;
}
}
@media only screen and (max-width:750px){
.btnDetail {
	text-align: center;
}
.btnDetail a,
.btnDetail.wid a {
	width: 62vw;
	text-align: center;
	padding: 0.65em 0;
	border-radius: 3px;
	box-shadow: 0.533vw 0.533vw 0 #bcc2cb;
	margin: 0 0.533vw 0.533vw 0;
}
.comicSet .btnDetail a {
	background: url(/gfantasy/common/images/ico01.png) no-repeat 97.08% 86.667% #222;
	background-size: 0.514286em auto;
}
.btnDetail.tc a {
	width: 80vw;
	font-size: 5.32vw;
}
}


/* btnRead
------------------------------------------------- */
.btnRead {
	text-align: center;
}
.btnRead a {
	display: inline-block;
	width: 21.214285em;
	color: #fff;
	background: #00dfc2;
	font-weight: 700;
	text-align: center;
	box-shadow: 0.2143em 0.2143em 0 #bcc2cb;
	margin: 0 0.2143em 0.2143em 0;
	border-radius: 5px;
}
.btnRead a span {
	display: inline-block;
	padding: 0.6em 0 0.6em 1.86364em;
	background: url(/gfantasy/common/images/ico_read.png) no-repeat left center;
	background-size: 1.41em auto;
}
@media only screen and (max-width:750px){
.btnRead a {
	width: 62vw;
	font-size: 5.32vw;
	box-shadow: 0.533vw 0.533vw 0 #bcc2cb;
	margin: 0 0.533vw 0.533vw 0;
}
.btnRead a span {
	padding-top: 0.8em;
	padding-bottom: 0.8em;
}
}


/* footer
------------------------------------------------- */
#footer {
	width: 100%;
	clear: both;
	text-align: center;
	background: #fff;
	font-weight: 300;
	position: absolute;
	bottom: 0;
}
#footer .finner {
	border-top: #222 1px solid;
}
#footer .fsns {
	font-size: 0;
	line-height: 0;
}
#footer .fsns dt,
#footer .fsns dd {
	display: inline-block;
	vertical-align: top;
	padding: 1.75em 0.8% 1.75em 0.7%;
	font-size: 12px;
}
#footer .fsns dt {
	width: 6.1%;
}
#footer .fsns dd {
	width: 2.5%;
}
#footer .fbnr {
	border-top: #222 1px solid;
}
#footer .fbnr li {
	width: 16%;
	max-width: 160px;
	display: inline-block;
	vertical-align: top;
	padding: 0.85em 0.5em;
}
#footer .fbnr a {
	display: block;
	color: #fff;
	background: #222;
	padding: 0.9em 0;
}
#footer .flinks {
	padding: 0.6em 0;
}
#footer .flinks li {
	display: inline-block;
	vertical-align: top;
}
#footer .flinks li a {
	display: block;
	background: url(/gfantasy/common/images/foot_line.png) no-repeat right center;
	padding: 0 0.9em 0 0.6em;
}
#footer .copyright {
	line-height: 1.6;
	padding: 1.4em 0;
}
#footer .flogo {
	max-width: 960px;
	margin: 0 auto;
	padding: 0.5em 0 0;
}
#footer .flogo img {
	width: 10.521%;
	max-width: 101px;
	display: block;
	margin: 0 auto;
}
#footer .abjTxt {
	padding-bottom: 0.4em;
	line-height: 1.6;
}
#footer .finner ul,
#footer .finner dl,
#footer .finner p {
	max-width: 1000px;
	margin: 0 auto;
}
@media only screen and (min-width:751px){
#footer .flinks li:last-child a {
	background: none;
}
}
@media only screen and (min-width:751px) and (max-width:1024px){
#footer .fsns dt,
#footer .fsns dd {
	font-size: 1.171875vw;
}
}
@media only screen and (max-width:750px){
#footer .finner {
	padding: 0 2.4%;
}
#footer .fsns dt,
#footer .fsns dd {
	padding: 2.5vw 0.4em;
}
#footer .fsns dt {
	display: none;
}
#footer .fsns dd {
	width: 6vw;
}
#footer .fbnr {
	display: none;
}
#footer .flinks {
	display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
	padding: 0.25em 0;
}
#footer .flinks li {
	width: 50%;
	padding: 0.25em 0;
	font-size: 2.66vw;
}
#footer .flinks li a {
	background-repeat: repeat-y;
	background-position: right top;
	padding: 0;
}
#footer .flinks li:nth-child(2n) a {
	background: none;
}
#footer .copyright {
	padding: 1em 0;
	font-size: 2.66vw;
	letter-spacing: -0.02em;
}
#footer .copyright span {
	display: none;
}
}


/* background-color
------------------------------------------------- */
.bgColor {
	background-color: #B79CC8!important;
}

/*totop*/
#totop {
	width: auto;
	display: inline-block;
	position: fixed;
	bottom: 30px;
	right: 1em;
	display: none;
	z-index: 99999;
}

#totop a {
	display: block;
	width: 30px;
	height: 30px;
	padding: 15px;
	background-color: #222222;
	border-radius: 30px;
}

#totop .arrow {
	text-align: center;
	margin: 10px auto 0 auto;
	width: 18px;
	height: 18px;
	border: 3px solid;
	border-color: transparent transparent #FFFFFF #FFFFFF;
	transform: rotate(135deg);
}



/**/
.none {
	display: none;
}

.pcon {
	display: block;
}

.spon {
	display: none;
}

@media only screen and (max-width:750px) {
	.pcon {
		display: none;
	}

	.spon {
		display: block;
	}
}

/*-------------------------------------------------
	ABJマーク
-------------------------------------------------*/
#abj_box{
	width:100%;
	margin:0 auto;
	text-align: center;
	border-top: 1px solid #333333;
	padding: 0.5% 0 2% 0;
	color: #333333;
	background-color: #fff;
}
#abj_box img{
	width:101px;
}
#abj_box .abj_txt p{
	margin-bottom:0;
	color: #333333;
	font-size: 11px;
}
@media only screen and (max-width:750px){
	#abj_box img {
		width:30%;
	}
	#abj_box .abj_txt p{
		padding: 0 6%;
	}
}