/*
#####################################
reset
#####################################
*/
*{margin:0;padding:0;}
html{overflow-y: scroll;font-size:16px; background: #54d5de}
body{background: #54d5de;}
body,html,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
/*table{border-collapse:collapse;border-spacing:0;}*/
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
hr,legend{display:none;border:none;}
abbr,acronym,fieldset{border:0;}
tr,th,td,caption{vertical-align:top;font-style:normal;font-weight:normal;text-align:left;}
ol,ul{list-style:none;}
h1,h2,h3,h4,h5,h6{font-style:normal;font-weight:normal;font-size: 100%;}
h1,h2,h3,h4,h5,h6,li,th,td,dt,dd{line-height: 1.5em;}
img{border:0;font-size:0;line-height:0;vertical-align:bottom;}
main,article,section,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,ul,li,ol,table,th,td,img,p,header,figure,figcaption,aside,a,span{box-sizing: border-box;}
p{padding: 0 0.5em 1em;}
/*
#####################################
*/
body{font-family:Arial,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif;line-height:1.2em;background: #fff url(/img/main_visual_back_img.png) repeat-x top center;}

.fading {border: none;text-decoration: none;}
.fading:hover {opacity: 0.7;filter: alpha(opacity=70);}
.notesText{font-size: 0.8rem;}

header{position: relative; width: 100%;}
.snsWrap{position: absolute; top:2%;left:2%;}
.snsWrap ul li {
    	display: inline-block;
	margin: 0 2px;
}

.twitterWrap{ }
.fbWrap{}

.mainVisualWrap{width:100%;max-width: 1285px; margin: 0 auto;}
.mainVisual{position:relative;width: 100%; height: 100%; padding-top: 56.108949416%; }
.mainTheSacredTree{position: absolute; top:0; left: 0;width: 100%; }
.mainBackCharacter{position: absolute;bottom: 0;left: 0; width: 99.5%;}
.mainCharacter{position: absolute;bottom: -1.5%;left: 21.5%; width: 57%;z-index: 1;}
.mainTagline{position: absolute;bottom: -14%; left: 26%; width: 46%;z-index: 2;}
.mainLogo{position: absolute; bottom: -10%;right: 6%; width: 17%;z-index: 1;}
.mainTheSacredTree img,.mainBackCharacter img,.mainCharacter img,.mainTagline img,.mainLogo img{width: 100%;}
.mainPublicityArea{position: absolute;top:0; right: 6%; width:29%;z-index: 1;text-align: center;}
.mainYoutubeBox{width: 100%; max-width: 310px;margin: 0 auto;padding-top: 0em;}
.mainYoutubeBox img {width: 100%;}
.mainLinkArea{display: flex;width: 100%;flex-wrap: wrap;justify-content: center;}
.mainLinkArea li{width:calc(50% - 1em);margin:0.25em;}
.mainLinkArea li img{width: 100%;}
.mainBatchPc{position: absolute;top:35%;left:5%;width: 17%;max-width: 228px;}
.mainBatchPc img{width: 100%;}


.separatorLine{width: 100%;height: 10px; background: url(/img/hr_img.png) repeat-x top left;}

.movieWrap{width: 100%; background:url(/img/movie_back_img_sp.jpg)repeat top left;border-top: 1px solid #999;border-bottom: 1px solid #999;}

.adventureStage {width: 100%;height: 100%;background: url(/img/adventure_stage_img.png) no-repeat;background-position: 50%;padding-top: 652px; }
.collectYoukai {width: 100%;height: 100%;background: url(/img/collect_youkai_img.png) no-repeat;background-position: 50%;padding-top: 651px; }
.battle {width: 100%;height: 100%;background: url(/img/battle_img.png) no-repeat;background-position: 50%;padding-top: 650px; }

.mainVisualSp {position: relative;width: 100%; background: url(/img/main_visual_back_img_sp.png)no-repeat top center; background-size: contain;}
.mainBatchSp{position: absolute;width: 100%;top:0.5%;left:0;text-align: center;margin: 0 auto;}
.mainBatchSp img{width: 80%;max-width: 400px;}
.mainLogoSp {position: absolute;width: 100%; top:7%;left:0;text-align: center;margin: 0 auto;}
.mainLogoSp img{width: 46%;}
.mainVisualBtnSpWrap{position: absolute;top:71%;left: 0;width: 100%;padding: 8px 0;}
.mainGetApp{width: 100%;text-align: center;margin: 0 auto 5px;}
.mainGetApp img{width:68%;max-width: 400px;}
.mainLinkAreaSp{width: 100%;text-align: center;}
.mainLinkAreaSp img{width: 68%; max-width: 400px;}
.snsWrapSp {
	width: 100%;
	height: 50px;
	background-color: #064c94;
	background-image: url(/img/sns_back_side_left_img_sp.png),url(/img/sns_back_side_right_img_sp.png);
	background-repeat:no-repeat;
	background-position:center left,center right;
	padding-top: 5px;
	padding-left: 20px;
	margin: 0 auto 10px;
	text-align: center;
}

.snsWrapSp ul li {
	display: inline-block;
	margin: 0 2px;
}

/*FBのずれ対応*/
.fb_iframe_widget > span {
  vertical-align: baseline !important;
}
@media screen and (max-width:450px) {
    .mainGetApp img,.mainLinkAreaSp img{width: 68%; max-width: 200px;}
    .snsWrapSp{height: 30px;}
}
@media screen and (max-width:350px) {
    .mainGetApp img,.mainLinkAreaSp img{width: 68%; max-width: 150px;}
}


@media screen and (max-width:1199px) {
    .adventureStage {background: url(/img/adventure_stage_img_1200.png) top center;background-size: contain;}
    .collectYoukai {background: url(/img/collect_youkai_img_1200.png) top center;background-size: contain;}
    .battle {background: url(/img/battle_img_1200.png) top center;background-size: contain;}
}
.introductionSp{width: 100%;margin: 0 auto;}
.introductionSp img{width: 100%;}

@media screen and (orientation:landscape){
.adventureStageSpP {display: none;}
.collectYoukaiSpP {display: none;}
.battleSpP {display: none;}
.landNone {display: none;}
}
@media screen and (orientation:portrait){
.adventureStageSpL {display: none;}
.collectYoukaiSpL {display: none;}
.battleSpL {display: none;}
.portNone{display: none;}
}

.latestinformationBack{width: 100%;background: url(/img/latestinformation_back_img.png) repeat top left;padding-bottom: 2em;}
.latestinformationWrap{width: 100%;max-width:1140px;  margin: 0 auto;}
.latestinformationImg{position:relative;width: 100%;height: 100%; padding: 20.438596491% 0 0;}
.latestinformation{position: absolute;top:0;left:0;width: 100%; height: 100%; background: url(/img/latestinformation_img.png) no-repeat top left;background-size: contain; }
.btnWrap{width:40%;margin-top:13.5%;margin-left:55%;display: flex; justify-content: flex-end;}
.btnWrap li{max-width: calc(99% / 2);margin: 0 4px;}
.btnWrap li img{width: 100%;}

.latestinformationContentsBack{width: 100%;margin: 0 auto; max-width:1140px;background-image: url(/img/latestinformation_contents_bottom.png),url(/img/latestinformation_contents_back.png);background-repeat: no-repeat,repeat-y;background-position:center bottom,  center top;background-size: contain;padding-bottom: 3em;}

@media screen and (orientation:portrait){
.latestinformationImg{padding: 26% 0 0;}
.latestinformation{background: url(/img/latestinformation_img_sp.png) no-repeat top left;background-size: contain;}
.latestinformationContentsBack{margin-top: -2px; background-image: url(/img/latestinformation_contents_bottom_sp.png),url(/img/latestinformation_contents_back_sp.png);}
/*.btnWrap{width:30%;margin-top:13.5%;margin-left:65%;}
.btnWrap li{width: calc(100% - 8px);margin: 0 4px;}*/
}




.tw {width: 80%;padding: 2em 0;margin: 0 auto;}
.tw-item {width: 100%;margin: 0 auto 0.5em;background:url(/img/tw_back_img.png)repeat top left;border-radius: 5px;}
.twitter .twitter-timeline {width: 100% !important;max-width: 100% !important;}
.follow-btn {width: 100%; text-align: right;}
.youtubeTittle{width: 100%;padding-right: 1px; text-align: right;}
.youtubeTittle img{width: 50%; max-width: 560px;}
.youtubeWrap{display: flex;}
.playerBack{position: relative;width: 45%;margin-left: 5%; vertical-align: top;text-align: left;}
.playerBack:before{content:"";display: block;padding-top:57%;}
.youtubeWrapper {position:absolute; top:0; left: 0; width: 100%;padding:56.25% 0% 0;}
.playerBox {position: absolute; top:10%; left: 0%; width: 90%;height: 92%; }
.playlistBox {width: 45%; max-width: 600px;display: flex;margin-top: 2.5%;flex-wrap: wrap;justify-content: space-around;align-items:flex-start;align-content:flex-start ;}
.playlistBox > li{width:calc(95% / 3);margin: 0.25em; padding: 0.5em;border: solid 1px #6a6a6a;border-radius: 15px;background:linear-gradient(to right, rgba(251, 231, 99,0.1) 80%, #fbe763),linear-gradient(to left, rgba(251, 231, 99,0.1) 80%, #fbe763),url(/member/common/img/contents_tittle_back_image.png) repeat;box-shadow: inset 0px 4px 18px 0px rgba(255, 230, 46, 0.9);text-align: center; font-weight: bold;}
.playlistBox a {cursor: pointer; display: block;}
.playlistBox img {width: 100%; }
.linkArea{width: 100%;background: url(/img/linkarea_back.png) repeat top left;padding:1.5em 0 2em;}
.linkAreaBtn{width: 100%;max-width: 900px;margin: 0 auto; display: flex;flex-wrap: wrap;justify-content: space-around;align-items:flex-start;align-content:flex-start ;}
.linkAreaBtn li{width: 45%;margin: 0.5em; background: linear-gradient(#35a0eb, #2f8fd2);padding: 0.5em;border-radius: 30px;text-align: center; font-weight: bold;color: #fff;font-size: 1.2rem;border: 1px solid #007bd1;text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.26);}
.linkAreaBtn a:not(:hover) {color: #fff;text-decoration:none;}
.linkAreaBtn a:hover{color: #b00;}
.linkAreaBtn a{cursor: pointer; display: block;}
@media screen and (orientation:portrait){
    .linkAreaBtn{display: block;}
    .linkAreaBtn li{width: 90%; font-size:1rem;margin:1em auto;}  
    
}


.bnrArea{width: 100%;background: url(/img/bnr_back_img.png) repeat top left;padding: 2em 0;}
.bnrAreaWrap{width: 100%; max-width: 1200px;margin: 0 auto; display: flex;flex-wrap: wrap;justify-content:center;align-items:flex-start;align-content:flex-start ;}
.bnrAreaWrap li{width:100%; max-width: 512px;}
.bnrAreaWrap li img{width: 100%;}

@media screen and (orientation:portrait){
.bnrAreaWrap{display: block;}
.bnrAreaWrap li{width:90%;margin: 0 auto;}
}

.l5BnrArea{width: 100%; background: #064c94;padding: 2em 0;}
.l5BnrAreaWrap{width: 100%; max-width: 1200px; margin: 0 auto;display: flex;flex-wrap: wrap;justify-content:space-between;align-items:flex-start;align-content:flex-start ;}
.l5BnrAreaWrap li:first-child{max-width: 600px; margin: 0 auto;border: 1px solid #000;}
.l5BnrAreaWrap li img {max-width: 100%;}
.l5BnrAreaText{width: 100%;max-width: 600px;margin: 0 auto; text-align: right; color: #fff;}

@media screen and (max-width: 767px) and (min-width: 1px) {
    .twitter-timeline {
        width: 766px !important;
    }

    .tw-item {
        width: 100%;
    }
}

/* footer */
footer{width:100%;}
.specWrap{width: 100%; height: 457px; position: relative;padding:0 1em;	background-image: url(/member/img/footer_grd_top.png), url(/member/img/footer_grd_btm.png), url(/member/img/footer_spec_wrap_back_img.png);background-position: left top, left bottom, center center;	background-repeat: no-repeat, no-repeat,repeat-x;	background-size: contain,contain,auto;text-align: center;}
.specWrap::before{position: absolute;content: "";top: 0;left: 0;width: 100%;height: 9px;background:url(/member/img/footer_top_border_img.png) top left repeat-x;background-size: 17px 9px;}
.specWrap::after{position: absolute;content: "";bottom: 0;left: 0;width: 100%;height: 9px;background:url(/member/img/footer_bottom_border_img.png) top left repeat-x;background-size: 17px 9px;}
.specWrapBack{width: 100%; max-width: 660px; height: 457px;margin: 0 auto; background:url(/member/img/circle.png) center center no-repeat;padding: 2em 0;}
.compatibleModels{width: 100%; display: flex;}
.iconWrap{width: 35%; max-width: 221px;}
.iconWrap img{width: 100%;}
.compatibleModels dl{width: 65%; margin-top: 1em; text-align: left;color: #fff;text-shadow:2px 2px 1px #062d74;}
.compatibleModels dt{display: inline-block;width: 6em;}
.compatibleModels dd:before{content: "：";padding-right: 0.5em;}
.compatibleModels dd:last-child:before{content: "";padding-right: 0em;}
.compatibleModels dd{ display: inline-block;vertical-align: top; width: calc(100% - 6em);}
.compatibleModels dd:last-child{width: 100%;}
.compatibleModels dd a:not(:hover){color: #fff;}
.compatibleModels dd a:hover{color: #b00;text-decoration:none;}
.getApp{display: flex;justify-content: center;}
.getAppNoteice{width: 100%;color: #fff;text-shadow:2px 2px 1px #062d74; font-size: 0.8rem;text-align: center;}
.footerNavWrap{background: #208ac8;}
.footerNav{padding: 1.5em 0; text-align: center;}
.footerNav li{margin: 0 1em;; display: inline-block;}
.footerNav a:not(:hover) {color: #fff;}
.footerNav a:hover{color: #b00;text-decoration:none;}

@media screen and (orientation:portrait){
    .specWrap{padding: 0 3px;}
  .specWrapBack{width: 100%; max-width: 660px; margin: 0 auto; background:url(/member/img/circle.png) center center no-repeat;background-size: contain; padding: 1.5em 0;}  
    .compatibleModels dl{width: 69%; margin:0 0 0 -10px; text-align: left;color: #fff;text-shadow:2px 2px 1px #062d74;font-size: 0.8rem;vertical-align: top;}
    .compatibleModels dt{display: inline-block;width: 4.5em;text-align: right;vertical-align: top;}
    .compatibleModels dd:before{content: "：";padding-right: 0;}
    .compatibleModels dd:last-child:before{content: "";padding-right: 0em;}
    .compatibleModels dd{ display: inline-block;vertical-align: middle; width: calc(100% - 4.5em);}
    .compatibleModels dd:last-child{width: 100%;}
    .compatibleModels dd a:not(:hover){color: #fff;}
    .compatibleModels dd a:hover{color: #b00;text-decoration:none;}
    .iconWrap{width: 30%; max-width: 221px;}
}

.hf {width: 100%;padding: 1em 0; background: #208ac8;}
.linkTtl {width: 90%;max-width: 500px;background-color: #064c94; border-radius: 25px;color: #fff;font-weight: bold;padding: 1em 1em;text-align: center;margin: 0 auto 1em;}
.linkTtl a:not(:hover) {color: #fff;font-weight: bold;text-decoration:none;}
.linkTtl a:hover{color: #b00;font-weight: bold;}
.iconArea ul {text-align: center; margin: 0 auto;display: flex;justify-content: center;}
.iconArea li { width: 10%;max-width: 90px;margin: 0.5em; vertical-align: top; font-size: 0.8rem;}
.iconArea figure img,.iconArea figure figcaption { display: block; width: 100%;}
.iconArea figure figcaption { line-height: 1.1em;}
.iconArea a:not(:hover) {color: #fff;}
.iconArea a:hover{color: #b00;text-decoration:none;}
.otherLink{width: 100%;}
.otherLinkWrap{width: 100%; max-width: 900px; margin: 0 auto;display: flex;flex-wrap: wrap;justify-content:center;align-items:flex-start;align-content:flex-start ;}
.otherLinkWrap li{width: calc(95% / 3); margin: 0.25em;text-align: center;}

.copyright{text-align: center; font-size: 0.8rem;padding:0 0 1em 0;color: #fff;}
.copyright:last-child{border-top:dashed 1px #fff;padding-top: 1em; }

#toPageTop {position: fixed;bottom: 10px;right: 10px;}
#toPageTop a {text-decoration: none;width: 100px;padding: 5px;text-align: center;display: block;}
#toPageTop img {width: 100%;}


.pcShow,.spShow{display: none;}