@charset "utf-8";
/* CSS Document */
/*--------------------------------
共通
---------------------------------*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: normal;
	width:100%;
	height:100%;
	max-width: 1920px;
	margin: 0 auto;
	color: #333333;
	overflow-x: hidden;
	min-width:320px;
	background-color: #000;
}
.iOS_body{
overflow: hidden;
}


.bg{max-width: 1920px;margin: 0 auto;}
.bg-dark{padding-bottom:10rem;}
.bg-dark-padding{padding-top: 24rem;}
.bg-pink{background: #FF75A6;position: relative;}
.bg-pink::after{position: absolute;content: '';display: inline-block;width: 100%;height: 400px;background-image: url("../img/pink-bottom.png");background-size: contain;vertical-align: middle;bottom: -20rem;background-repeat:no-repeat;z-index: 1;}
.bg-pink::before{position: absolute;content: '';display: inline-block;width: 100%;height: 166px;background-image: url("../img/pink-top.png");background-size: contain;vertical-align: middle;top: -5rem;background-repeat: no-repeat;}
.wrap1000{max-width: 1000px;width: 100%;margin: 0 auto;}
main{padding-top: 108px;/*overflow: hidden;*/ width: 100%; max-width: 1920px; margin: 0 auto;}
a{text-decoration: none;}
a:hover{opacity: 0.8;transition: all 0.15s ease-in-out;}
footer a:hover{filter: brightness(2);transition: all 0.15s ease-in-out;opacity: 1;}
h1 a:hover, .top1 a:hover, .sec-onlineshop a:hover,.square-pink:hover{filter: brightness(1.3);transition: all 0.15s ease-in-out;opacity: 1;}
.itemlist a:hover, .btn a:hover, .category-list a:hover{filter: brightness(1.15);transition: all 0.15s ease-in-out;opacity: 1;}
.on a span{border: 3px solid #333!important;color: #333!important;}
.list1 li.on a{border: 3px solid #333;font-weight: bold;}
.list2 li.on a img{border: 3px solid #333;border-radius: 50%;}

li {list-style: none;}
.bold {font-weight: bold;}
.nav1 a, .nav1 a:visited, .spli2 a, .spli2 a:visited {text-decoration: none;color: #fff;}
img {
	margin: 0;
	padding: 0;
	display: block;
	vertical-align: bottom;
	width: 100%;
}
h1{
	width: 100%;
	max-width: 233px;
	position: absolute;
	z-index: 10;
	right: 70%;
}
h2{color: #fff;text-align: center;font-size: 1.25rem;padding: 5rem 0;font-family: "Zen Maru Gothic", serif;letter-spacing: 2px;}
h2 span{filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));letter-spacing: 2px;font-weight: 700;line-height: 1.7rem;}
h2 img{margin: 0 auto;max-width:420px;}
h2.h2-story img{max-width: 161px;padding-bottom: 1rem;}
h2.h2-goods{color: #333;text-align: center;width: 462px;margin: 0 auto;padding: 3.5rem 0;letter-spacing: 0.45px;line-height: 2.1rem;font-size: 1.125rem;font-weight: bold;}
h2.h2-goods img{max-width: 168px;padding-bottom: 1rem;}

.flx{display: flex;}
footer > div, .global_nav ul {max-width: 1000px; margin: 0 auto;}

.sp-goods-text, .sp-h2-goods-wrap, .sp-arrow-bottom, .br800, .br650, .br500, .br430, .sp750, .footer-icon.sp750{display: none;}
.brnone600{display: block;}
/*--------------------------------
背景動画設定
---------------------------------*/
#video-area, #video-area-game{
    position: fixed;
    z-index: -100;
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}

#video-area-loading, #video-area-loading-sp, #video-area-loading-mid{
	position: fixed;
    z-index: 1000;
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}

#video, #video-loading, #video-loading-sp, #video-loading-mid, #video-game{
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 53%;
    left: 50%;
    transform: translate(-50%, -50%); 
    height: 56.25vw; 
    min-height: 100%;
	max-width: 1920px;
	
}
#video-game{object-fit: cover;}
#top-visual{position: relative;}


/*--------------------------------
キャラ配置関連
---------------------------------*/
.top-chara {position: absolute;}
.top-sheriff-sp{display:none;}

/*--------------------------------
ボタン関連
---------------------------------*/
.btn-area{position: relative;margin: 0 auto;}
.btn, .btn5{width: 180px;}
/*.btn{margin: 0 auto;}*/
.en{font-family: "Bubblegum Sans", sans-serif;}
.ja{font-family: "Zen Kaku Gothic New", sans-serif;font-weight: bold;}
.more-ja{font-size: 1.125rem;}
.more-en img{position: absolute;}
.more-en{position: absolute;color: #fff;font-size: 3rem;text-align: center;line-height: 2rem;}
/*もっと読む！*/
#top-news .btn-area{width: 200px;}
.arrow-left{width: 500px;margin: 0 auto;right: -31rem;}
.arrow-left img{width: 176px;top: -3rem;padding-right: 2.5rem;}
/*ゲームを詳しく知りたい？*/
#top-game .btn-area{max-width: 800px;width: 100%;margin: 0 auto;padding-left: 32rem;}
.arrow-right-game{bottom: 2rem;right: 53%;}
.arrow-right-game img{width: 110px;right: -8rem;}
/*四角ボタン*/
.btn-square{width: 319px;margin: 0 auto 0.2rem;text-align: center;background: #000000;}
.btn-square a{color: #fff;padding: 1.2rem 1rem 0.4rem;display: block;width: 319px;}
.btn-square .en{font-size: 3rem;line-height: 2rem;}
.btn-square .ja{font-size: 1.125rem;letter-spacing: 0.45px;}
.square-blue {box-shadow: 4px 5px 0 #7D86FF;}
.square-pink{box-shadow: 4px 5px 0 #FF7DBE;margin: /*5rem*/0 auto 0.2rem;}
/*もっと情報を見る？*/
.top-popup-btn-area.btn-area{max-width: 530px;}
.arrow-right2 {left: 58%;top: 35%;}
.arrow-right2 img{width: 105px;left: -8rem;top: 33%;}
/*オンラインショップボタン*/
.top1 {position: fixed; bottom: 30%; max-width: 170px;z-index:6;right: calc(50.5% - 900px);}
.top2 {margin-right: auto;margin-left: 0px;display: block;}
.top2 a {float: right;padding: 10px;}
.top2 span {display: block;}
.top2 i {font-size: 1.6rem;}
@media screen and (max-width:1799px) {
	.top1 {right: 3%;}
}
/*トップへ戻るボタン*/
.topbtn{max-width: 180px;margin: 0 auto 10rem;text-align: center;}

@media screen and (max-width:650px) {
	.topbtn{margin-bottom: 7rem;}
}

/*--------------------------------
お知らせ共通
---------------------------------*/
/*wordpress記事内見出し*/
.wp-block-heading{font-family:"Zen Kaku Gothic New", sans-serif;font-weight: bold;}
h1.wp-block-heading{font-size: 2rem;position: static;max-width: 833px;}
h2.wp-block-heading{font-size: 1.75rem;color: #333;text-align: initial;padding: inherit!important;}
h3.wp-block-heading{font-size: 1.5rem;}
h4.wp-block-heading{font-size: 1.25rem;}
h5.wp-block-heading{font-size: 1.125rem;}
h6.wp-block-heading{font-size: 1rem;}

.swiper-container{display: none;}
.news-thumb-wrap{justify-content: space-between;max-width: 1000px;margin: 0 auto;flex-wrap: wrap;color:#333!important;}
.news-thumb{width:320px;height: 437px;border-radius: 24px;display: block;background: #fff;padding: 1.5rem 1.875rem;filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.1));border-style: solid;border-width: 10px;}
.news-thumb p{padding-top: 0.375rem;text-align: left;}
.news-thumb p a{color: #333;}
.news-text{font-weight: 500;line-height: 1.625rem;height: 85px;}
.news-title{font-weight: bold;font-size: 1.125rem;line-height: 1.625rem;height: 63px;}
.news-thumb img{width: 240px;margin: 0 auto;object-fit: cover;height: 144px;}
.news-category{border-radius: 2px;margin-left: 0.375rem;padding: 0 0.375rem;font-size:0.813rem;}
.news-category2{border-radius: 6px;margin: 0.375rem;padding: 0 0.75rem;font-size:1.25rem;background: #fff;}
.category-list{display: flex;justify-content: center;flex-wrap: wrap;margin: 0 auto 1.25rem;max-width: 500px;font-weight: 500;}
.category-list-wrap{max-width: 1000px;margin: 0 auto;}
.category-list-wrap h3{font-family: "Bubblegum Sans", sans-serif;font-size: 1.5rem;text-align: center;margin-bottom: 2rem;color: #fff;}
.news-thumb div{text-align: center;margin-top: 1.6rem;}
.news-thumb .more-read{text-decoration: none;border-radius: 4px;color: #fff;padding: 0.6rem 1rem;}

/*下層ページのnewsエリア*/
.news .news-thumb-wrap, #goods-news .news-thumb-wrap{justify-content: flex-start;}
.news .news-thumb, #goods-news .news-thumb{margin: 1.5rem 0.4rem;}


/*--------------------------------
game
---------------------------------*/
.game-flx li{max-width: 320px;}
.game-flx figure img{margin-bottom: 0.5rem;}
.game-flx figcaption{font-size: 1.25rem;font-weight: bold;height: 50px;line-height: 1.45rem;}
.game-flx p{font-size: 1rem;line-height: 1.75rem;}
.game-flx{justify-content: space-between;color: #fff;padding-bottom: 5rem;}
.responsive {width: 98%;margin: 0 auto;aspect-ratio: 16/9;margin-bottom: 5rem;}
.responsive iframe{border: 17px solid #D0F9ED;width: 100%;height: 100%;height: -webkit-fill-available;width: -webkit-fill-available;}

.game-photo{max-width: 1314px;margin: 0 auto;}

/*--------------------------------
キャラクター共通
---------------------------------*/
.mochi{font-family: "Mochiy Pop One", sans-serif;font-size: 2rem;color: #4F5DD4;font-weight: 400;text-align: center;padding-bottom: 1.75rem;line-height: 2.75rem;}
.chara-wrap{margin: 3rem 0;}
.chara-wrap > div{position:relative;background: #fff;border-radius: 20px;filter:drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3))}
.chara-wrap img{position: absolute;max-width: 400px;top: -3rem;}
.chara-text{margin: 0 5rem 0 auto;max-width: 454px;padding: 5.25rem 0;}
.chara-text .en{font-size: 2.8125rem;text-align: center;padding-bottom: 0.875rem;line-height: 2rem;}
.chara-text .ja{font-size: 1.25rem;font-weight: 900;}
.chara-text .chara-detail{letter-spacing: 0.4px;font-weight: 500;line-height: 1.5rem;}
.mochi-sp{display: none;}
/*--------------------------------
videos
---------------------------------*/
.videos-wrap{position: relative;}
/*video*/
.hidden-view{display: none;}
.button{display: none;}

/*--------------------------------
商品一覧共通
---------------------------------*/
.top-stinnger{max-width: 420px;bottom: -24rem;left: 0;}
.top-slow{max-width: 284px;bottom: -19rem;right: 25rem;}
.top-bitter{max-width: 360px;bottom: -28rem;right: 0;}

.h2-goods::before{position: absolute;content: '';display: inline-block;width: 295px;height: 100%;background-image: url("../img/GOB_characters_captain.png");background-size: contain;vertical-align: middle;top: 4rem;left: -30rem;background-repeat: no-repeat;}
.goods-area{position: relative;}
.h2-goods-wrap{position: absolute;top: -9rem;left: 0;right: 0;}
.h2-goods{position: relative;z-index: 1}
.h2-goods::after{position: absolute;content: "";display: inline-block;background: url("../img/hukidashi.png");width: 720px;height: 290px;background-size: contain;background-repeat: no-repeat;vertical-align: middle;top: 0;left: -29%;right: 0;z-index: -1;}
.item-list-wrap{background: #BEEFFF;border-radius: 24px;max-width: 1230px;margin: 0 auto;padding-bottom: 15.5rem;}
.item-list-inner{max-width: 1032px;margin: 0 auto;padding: 15.5rem 0 0;}
.item-list-inner::after{content: " ";display: block;clear: both;}
.itemlist{float: left;max-width:257px;margin: 0 0 1.5rem;padding: 0 0.35rem;font-weight: bold;line-height: 1.5rem;}
.itemlist img{max-width: 248px;}
.itemlist-price{text-align: right;font-size: 1.35rem;padding-top: 0.75rem;}
.itemlist-price span{font-size: 70%;}
.itemlist-name{font-size: 1rem;height: 70px;padding-top: 0.2rem;}
.itemlist-name a{color: #333;}

/*--------------------------------
pop up store
---------------------------------*/
.top-sheriff{width: 338px;top: 9rem;right: -22rem;}
.line-purple::before{content: "";display: inline-block;background: url("../img/line-purple.png");width: 100%;height: 370px;background-size: cover;vertical-align: middle;background-repeat: no-repeat;}
.x-banner-area{position: relative;padding-top: 5rem;width: 95%;margin: 0 auto;}
.x-banner-area .mochi{position: absolute;left: 46%;color: #fff;transform: rotate(6deg);font-size: 1.5rem;letter-spacing: 1.87px;}
.x-banner-area a {max-width: 480px;margin: 0 auto;display: block;}
.x-banner-area a img{max-width: 480px;margin: 0 auto;}
.pop-up-store h2{padding-top: 0;}
.pop-up-store{margin-bottom: 5rem;}
.pop-up-store .flx{max-width: 904px;margin: 0 auto;width: 95%;}
.pop-up-store .flx img{width: 420px;height: 280px;object-fit: cover;background: #fff;}
.top-store-detail{border: 8px solid #000000;border-radius: 24px;background: #fff;max-width: 700px;margin: 0 auto 3.5rem;padding: 3.8rem 0 3rem;text-align: center;width: 95%;}
.pop-up-store .flx a{padding:0 1rem;}

.top-store-detail .mochi, .top-store-detail p{width: 95%;margin: 0 auto;}
.top-store-detail .mochi{line-height: 2.75rem;}


/*--------------------------------
nav
---------------------------------*/
.global_nav {
	max-width: 1920px;
	width: 100%;
	position: fixed;
	padding: 1.625rem 0 2rem;
	z-index: 101;
	background: #DF2033;
	top:0;

}
.global_nav ul {
	margin: 0 auto;
	padding-left: 16rem;
}
.nav1 {
	padding-top: 1rem; display: flex; justify-content: space-between;align-items: center;}
.nav1 .current a img{filter:brightness(.1);}
.ul1 .current a img{filter:brightness(.5);}
.global_nav li {
	float: left;
	list-style: none;
	font-size: 1.125rem;
}
.global_nav li img{width: 34px;margin: 0 auto;}
.global_nav li.nav-news img{width: 45px;}
.global_nav li.nav-game img{width: 46px;}
.global_nav li.nav-goods img{width: 48.35px;}
.global_nav li.nav-store img{width: 45px;}
.global_nav li.nav-contact img{width: 63px;}
.global_nav li.nav-character img{width: 76.8px;}
.global_nav li.nav-onlineshop img{width: 92.9px;}
.nav2 li{padding-right: 2.6rem;}
/*hamburger*/
.hamburger {
	display : none;
	position: fixed;
	z-index : 11;
	right : 13px;
	top : 12px;
	width : 42px;
	height: 42px;
	cursor: pointer;
	text-align: center;
}
.hamburger span {
	display : block;
	position: absolute;
	width : 30px;
	height : 2px ;
	left : 6px;
	background : #fff;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition : 0.3s ease-in-out;
	transition : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {top: 10px;}
.hamburger span:nth-child(2) {top: 20px;}
.hamburger span:nth-child(3) {top: 30px;}
/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
	top : 16px;
	left: 6px;
	-webkit-transform: rotate(-45deg);
	-moz-transform   : rotate(-45deg);
	transform        : rotate(-45deg);
}
.hamburger.active span:nth-child(2), .hamburger.active span:nth-child(3) {
	top: 16px;
	-webkit-transform: rotate(45deg);
	-moz-transform : rotate(45deg);
	transform : rotate(45deg);
}
nav.globalMenuSp {
	position: fixed;
	z-index : 10;
	top : 0;
	left : 0;
	background: rgba(0, 0, 0, 0.9);
	text-align: center;
	transform: translateY(-100%);
	transition: all 0.3s;
	width: 100%;
	height: 100vh;/*追加*/
}
nav.globalMenuSp ul {
	margin: 0 auto;
	padding: 1.8rem;
	width: 100%;
	max-width: 200px;
}
.spli1 {
	padding-top: 2rem;
}
.spli2:first-child {margin-top: -2rem;}
.spli2 {
	padding-top: 1.5rem !important;
	width: 100% !important;
	text-align: center;
	margin-bottom: -2rem;
}
.spli2 span {
	float: left;
	padding-right: 1rem;
}
.spli2_1{
	margin-top: 1.5rem;
}
.spfb {
	padding-left: 4.2rem;
}
.spli1_1 {
	padding-bottom: 1.8rem !important;
}
.ul1 {
	/*height: 100vh;*/
	padding-bottom: 10em;
}
nav.globalMenuSp ul li {
	list-style-type: none;
	padding: 0;
	width: 100%;
	font-weight: normal;
	border-bottom: #707070 solid 1px;
}
nav.globalMenuSp ul li:last-child {
	padding-bottom: 0;
	border-bottom: none;
}
nav.globalMenuSp ul li a {
	display: block;
	padding: 1.5rem 0 1.2rem;;
	text-decoration :none;
	text-align: center;
}
/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
	transform: translateY(0%);
	max-width: 950px;
}

nav.globalMenuSp ul .sns-li {border-bottom: none;padding: 0 0.5rem;width: auto;}
.global_nav .sns-li img{width: 100%;}
nav.globalMenuSp .flx{max-width: 350px;padding: 0;justify-content: center;}

/*--------------------------------
footer
---------------------------------*/
footer .logo{position: relative;}
.top-opila{width: 207px;top: -16rem;left: -6rem;}
footer {background: #33BC46;color: #fff;padding:0 0 1rem;position: relative;}
footer a{color: #fff;text-decoration: none;}
footer .logo img{max-width: 285px;width: 100%;}
footer .flx{justify-content: space-between;padding: 5rem 0 2rem;}
footer p{text-align: center;}
footer nav ul li{line-height: 1.75rem;font-size: 1rem;}
footer nav > ul > li, footer .logo {padding: 0.4rem 0;}
footer nav ul ul li{padding-left: 1rem;}
.copyright img{max-width: 30px;margin: 0 1rem 0 0;display: inline;}
.footer-icon{display: flex;margin-top: 0.5rem;align-items: center;}
.sns-li img{height: 33px;object-fit: contain;width:auto;}
/*--------------------------------
下層ページ共通
---------------------------------*/
.bg-kasoupage{position: relative;
 }
.bg-kasoupage::before {
  content: '';
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    background: url("../img/bg-kasoupage.webp") center top no-repeat;
    background-size: cover;z-index: -1;max-width: 1920px;
}
.sec-onlineshop{padding-top: 18rem;}
.sec-onlineshop .arrow-online-shop{max-width: 258px;width: 100%;margin: 0 auto 3rem;}
.sec-onlineshop a {max-width: 507px;width: 90%;margin: 0 auto;display: block;}
/*bg-blue*/
.bg-blue{margin-top: 5.5rem;}
.bg-blue-inner{background: #28B6E2;padding: 3rem 0 0;}
.bg-blue::before{position: absolute;content: '';display: inline-block;width: 101%;height: 190px;background-image: url("../img/blue-top.png");background-size: contain;vertical-align: middle;top: 20rem;background-repeat: no-repeat;z-index: -1;}
.bg-blue::after{position: absolute;content: '';display: inline-block;width: 101%;height: 484px;background-image: url("../img/blue-bottom.png");background-size: contain;vertical-align: middle;bottom: -24rem;background-repeat: no-repeat;z-index: -1;}


/*back-button*/
.backbtn{margin: 0 auto;padding-left: 17rem;padding-bottom: 10rem;width: 400px;z-index: 2/*3以上でモーダル上になる*/;}
.arrow-back .arrow{max-width: 105px;}
.back-set{position: absolute;width: 340px;top: 3rem;right: 33%;}

/*loadingとgameの外部リンクアイコン*/
.icon-wrap{display: flex;justify-content: center;margin: 3rem auto 0;align-items: center;}
.icon-wrap li{width: 60px;margin-right: 1.25rem;}
.icon-wrap li:last-child{margin-right: 0;}
.icon-wrap li a{filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.29));transform: translateZ(0);}
.icon-wrap li div{filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.29)) brightness(0.5);will-change: filter;}

/*pagenation*/
.wp-pagenavi{text-align: center;margin: 0 auto;display: flex;align-items: center;justify-content: center;}
.wp-pagenavi .current {color: #ABFEC2;pointer-events: none;text-shadow: 0 0 10px #ABFEC2,0 0 15px #ABFEC2;font-size: 1.85rem;font-weight: bold;width: 45px;margin: 0 0.5rem;}
.wp-pagenavi .page{width: 45px;height: 45px;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;overflow: hidden;font-size: 1.85rem;color: #fff;font-weight: bold;transition: all 0.15s linear;text-shadow: 0 0 10px #fff,0 0 15px #fff;margin: 0 0.5rem;}
.wp-pagenavi .pages{display: none;}
.wp-pagenavi .previouspostslink, .wp-pagenavi .nextpostslink{color: transparent;}
.wp-pagenavi .previouspostslink:before {
  content: '';
  display: inline-block;
  width: 85px;
  height: 73px;
  background-image: url("../img/page-prev-neon.png");
  background-size: contain;
  vertical-align: middle;
}
.wp-pagenavi .nextpostslink:after {
  content: '';
  display: inline-block;
  width: 85px;
  height: 73px;
  background-image: url("../img/page-next-neon.png");
  background-size: contain;
  vertical-align: middle;
}


.Pagination, .nav-links {display: flex;align-items: center;justify-content: center;}
.Pagination-Item-Link ,.page-numbers{
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  font-size: 1.85rem;
  color: #fff;
  font-weight: bold;
  transition: all 0.15s linear;
	text-shadow: 0 0 10px #fff,0 0 15px #fff;
}
.Pagination-Item-Link-Icon {
  width: 20px;
}


.Pagination-Item-Link.isActive, .page-numbers.current {
  color: #ABFEC2;
  pointer-events: none;
	text-shadow: 0 0 10px #ABFEC2,0 0 15px #ABFEC2;
}

.Pagination-Item-Link:not(.isActive):hover, .page-numbers:not(.isActive):hover {
  opacity: .7;
}
.Pagination > * + *,  .nav-links > * + * {
  margin-left: 8px;
}
.arrow-neon, .page-numbers.prev,
.page-numbers.next{width: 85px;height: 73px;}
.extend{color: #fff;}
.last, .first{display: none;}

/*--------------------------------
ゲーム、キャラクター共通モーダル
---------------------------------*/

.modalList-item { width: 300px;margin: 0 0 30px 0; padding: 0 8px;
}
.modalList-item .modal-contents { max-width: 700px;}
.modalList-item a{text-decoration: none; color: inherit;}
.modalList-item a:hover{opacity: 0.8;}
.modalButton-img {  position: relative;
}
.modalButton-img img { width: 100%; max-width: 100%; margin: 0 0 20px;vertical-align: top;}
.modalInner-img { position: relative; margin: 0 0 20px;}
.modalInner-img img {  width: 100%; max-width: 100%; margin: 0 0 20px;  vertical-align: top;
}
.modalInner-img + h3 { display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; padding: 0 10px 20px 0;
}
.modalList-item .modal-contents { max-width: 1000px;border:  8px solid#333333;border-radius: 20px;}
.modal { display: none; z-index: 9999; position: fixed; top: -10px; right: 0; bottom: -10px; left: 0;  overflow: hidden; overflow-y: auto/*visible*/;  backface-visibility: hidden; background-color: rgba(0, 0, 0, 0.45);
}
.modal-container { display: table; width: 100%; height: 100%; padding: 10px 0}
.modal-inner {display: table-cell; padding: 6em 2em; vertical-align: middle;}
.modal-contents { position: relative; max-width: 1300px; margin: 2rem auto 0; padding: 5rem 4.5rem; background-color: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); text-justify: inter-ideograph;/*テストtransform:translateZ(1px);*/
}
.modal-button-wrap {  position: absolute; top: 20px;  right: 20px;}
.modal-button {
  appearance: none;
  display: inline-block;
  position: relative;
  width: 24px;
  height: 24px;
  border: none;
  outline: none;
  background: transparent;
  line-height: 1;
  text-indent: -9999px;
  vertical-align: middle;
  cursor: pointer;
}
.modal-button::before {
  position: absolute;
  top: -12px;
  left: -5px;
  width: 30px;
  height: 30px;
  border: 5px solid #fff;
  border-radius: 50%;
  background-color: #fff;
  background-image: url("../img/character/cha-X.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  cursor: pointer;
}

/*--------------------------------
bg-blue
---------------------------------*/

#news h2{padding: 3rem 0;}
.bg-blue::before{top: 14rem;}
.bg-blue-inner {padding: 0;}
/*--------------------------------
レスポンシブ
---------------------------------*/

@media screen and (max-width: 1500px){
	h1{right: 75%;}
	.h2-goods::before{max-width: 250px;left: -25rem;}
	.item-list-wrap{width: 90%;}
	.icon-wrap li{width: 50px;}
	.icon-wrap{margin-top: 2rem;}
}
@media screen and (max-width: 1350px){
	.h2-goods::before{left: -23rem;}
	.top-sheriff{max-width: 250px;right: -11rem;}
	.bg-pink::after{bottom: -24rem;}
}

@media screen and (max-width: 1250px){
	.h2-goods-wrap{display:none;}
	.sp-h2-goods-wrap{display: block;position: absolute;left: 0;right: 0;top: -4rem;}
	.sp-h2-goods-wrap .h2-goods::before, .sp-h2-goods-wrap .h2-goods::after{display: none;}
	h2.h2-goods{padding: 0;width: 100%;}
	h2.h2-goods img{max-width: 500px;padding-bottom: 0;}
	.sp-goods-text{display: block;padding-top: 9rem;text-align: center;font-weight: bold;font-size: 1.125rem;line-height: 2rem;}
	.item-list-inner{padding: 5rem 0 0;}
	.bg-dark-padding {padding-top: 15rem;}

}
@media screen and (max-width: 1200px){
	h1{right: 77%;}
	.item-list-inner{max-width: 774px;}
	.top-stinnger{max-width: 320px;}
	.top-slow{max-width: 200px;right: 20rem;}
	.top-bitter{max-width: 260px;bottom: -24rem;}
	.top-opila{left: 0;}
	.icon-wrap li{width: 50px;}
	.itemlist{max-width: 193px;}
	.bg-blue::after{bottom: -28rem;}
	
	
}
@media screen and (max-width: 1070px){
	.chara-text {margin: 0 2.5rem 0 auto;max-width: 430px;}
}

@media screen and (max-width: 1050px){
	.inner{width: 95%;}
	h1{max-width: 220px;right: 76%;}
	.game-flx{width: 98%;margin: 0 auto;}
	.game-flx li{max-width: 285px;}
	.top-sheriff{display: none;}
	.top-sheriff-sp{display: block;max-width: 214px;top: 16rem;right: 0;}
	.bg-pink::before{top: -3rem;}
	
	.center-box{position: absolute;width: 320px;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}
	.swiper-container{display: block;color: #333;}
	.news-thumb-wrap{display: none;}
	.news-thumb, .news .news-thumb, #goods-news .news-thumb{margin: 0 auto 1.25rem;}
	.news-thumb {width: 95%;max-width: 390px;height: auto;margin: 0 auto 1.25rem;padding: 1rem 1.25rem;display: flex;border-width: 6px;}
	.news-thumb img {width: 160px;height: 100px;}
	.news-title{height: auto;font-size: 0.875rem;line-height: 1.2rem;}
	.news-left{margin-right: 0.5rem;}
	.news-thumb div{margin-top: 0;}
	.news-thumb p{padding: 0;}
	.news-thumb p:first-child{padding-bottom: 0.375rem;}
	.news-thumb time{font-size: 0.75rem;}
	.news-category{font-size: 0.7rem;}
	.news-category2{font-size: 1.25rem;}
	
	.bg-blue::before {top: 14rem;}
	.bg-blue{margin-top: 4rem;}

	.bg-dark{padding-bottom: 15rem;}
	
}

/*文字サイズ変更１*/
@media screen and (max-width: 950px){
	main{padding-top: 60px;}
	.global_nav li{clear: both;}
	.global_nav {height: 60px;padding: 0.75rem 0 0;}
	.globalMenuSp.active{top: 0;} .nav1{margin-left: 5rem!important;} 	.hamburger{display: block;}.nav1 li, .nav2 {display: none;}
	h1{right: 0;left: 0;padding-left: 0.5rem;max-width: 200px;width: 38%;}
	.arrow-left, .arrow-right-game, .arrow-right2, .arrow-back{display: none;}
	.btn-area{padding-top: 1rem;width: 100%;padding-left: 0 ;padding-right: 0;}
	.back-set{display: none;}
	#top-news .btn-area{width: 180px;}
	.sp-arrow-bottom{display: block;top: 0.5rem;font-size: 2.25rem;left: 0;right: 0;}
	.more-ja{font-size: 1rem;color: #fff;position: relative;text-align: center;}
	.sp-arrow-bottom img{position:absolute;max-width: 28px;top: 0.5rem;left: -8rem;right: 0;margin: 0 auto;width: 100%;}
	.store-btn.sp-arrow-bottom img {left: -11rem;}
	#top-pop-up-store .sp-arrow-bottom img{left: -11rem;}
	#top-game .btn-area{padding-left: 0;}
	#top-game .sp-arrow-bottom img{left: -14rem;}
	.btn{margin: 0 auto;}
	.btn-square, .btn-square a{width: 231px;}
	.btn-square .en{font-size: 2.25rem;}
	.btn-square .ja{font-size: 1rem;}
	.sp-goods-text{font-size: 1rem;line-height: 1.5rem;padding-top: 8rem;}
	.itemlist{max-width: 220px;}
	.item-list-inner {max-width: 660px;padding: 3rem 0 0 ;}
	.itemlist-name{font-size:0.875rem;line-height: 1.3rem;}
	.top-stinnger{max-width: 181px;bottom: -17rem;}
	.top-slow{max-width: 146px;bottom: -15rem;}
	.top-bitter{max-width: 164px;bottom: -16rem;right: -3rem;}
	.item-list-wrap{padding-bottom: 5rem;}
	.square-pink{margin: 1.5rem auto 0.2rem;}
	.line-purple::before{width: 180%;height: 200px;background-size: contain;}
	.mochi{font-size: 1.3rem;}
	.top-store-detail .mochi{line-height: 2rem;}
	.top-opila{max-width: 168px;}
	.footer-allchara::before{top: -12rem;}
	.bg-blue::after {bottom: -30rem;}
	/*chara*/
	.chara-text{margin: 0 auto;max-width: 600px;}
	.chara-wrap img{position: static;margin: 0 auto;}
	.mochi-pc{display:none;}
	.mochi.mochi-sp{display: block;font-size: 1.5rem; }
	.chara-wrap img{max-width: 272px;}
	.chara-text{padding: 1.25rem 0 0;}
	.chara-wrap > div {padding: 3rem 0;}
	.chara-text .chara-detail{max-width: 90%;margin: 0 auto;}
	/*news*/
	.swiper-button-next, .swiper-button-prev{top: /*40%*/60%!important;}
	.swiper-button-prev{left: 12rem!important;}
	.swiper-button-next{right: 12rem!important;}
	
	/*video*/
	.sp-none{display: none!important;}
	.hidden-view.open{display: block;}
	.button{display: block;margin: 0 auto;cursor: pointer;background: #72871D;border-radius: 12px;border: 2px solid #fff;color: #fff;}
	.button::before{content: "Read More!";display: block;padding: 0.75rem 2.125rem 0.3rem 2.125rem;font-size: 1.5rem;font-family: "Bubblegum Sans", sans-serif;}
	.button::after{content: '';display: inline-block;width: 16px;height: 11px;background-image: url(../img/arrow-bottom-img.png);background-size: contain;vertical-align: middle;padding-bottom: 0.75rem;background-repeat: no-repeat;}
	.hidden-view.open + .button::before{content: "Close";}
	.hidden-view.open + .button::after{content: '';display: inline-block;width: 16px;height: 11px;background-image: url(../img/arrow-top-img.png);background-size: contain;vertical-align: middle;padding-bottom: 0.75rem;background-repeat: no-repeat;}
	.button:hover{opacity: .7;}
	
	.top1{max-width: 140px;}
	
	/*外部リンクアイコン*/
	.icon-wrap{flex-wrap: wrap;width: 250px;}
	.icon-wrap li{margin-bottom: 1.125rem;}
	.icon-wrap li:nth-child(3){margin-right: 0;}
	/*itemlist共通*/
	.itemlist{margin: 0 0 0.25rem 0;}

	.pop-up-store .flx{display: block;max-width: 420px;}
	
	.backbtn {padding-bottom: 5rem;}
	
	/*オンラインショップバナー*/
	.arrow-online-shop{display: none;}
	.sp-arrow-online-shop{display: block;position: relative;color: #fff;text-align: center;margin: 0 auto;font-family: "Bubblegum Sans", sans-serif;font-size: 1.75rem;max-width: 200px;padding-bottom: 1rem;}
	.sp-arrow-online-shop::after{position: absolute;content: "";display: inline-block;background: url("../img/goods/underarrow.png");width: 17px;height: 18px;background-size: contain;background-repeat: no-repeat;vertical-align: middle;top: 0.5rem;left: 11rem;right: 0;}
	.sec-onlineshop a{max-width: 300px;width: 100%;}
	
}
@media screen and (max-width: 900px){
	nav.globalMenuSp ul li {display: block;}
	/*game*/
	.responsive{max-width: 90%;margin-bottom: 3.75rem;}
	.game-flx{display: block;padding-bottom: 0;}
	.game-flx li{margin: 0 auto;max-width: 320px;padding-bottom: 3.7rem;}
	.game-flx figcaption{font-size: 1.125rem;height: auto;padding-bottom:0.5rem;}
	.game-flx p{font-size: 0.875rem;line-height: 1.4rem;}
}
@media screen and (max-width:850px) {
	.nav2 li {padding-right: 1rem;}
	footer .logo img {max-width: 170px;margin: 0 auto;}
}
@media screen and (max-width:800px) {
	.br800{display: block;}
	.bg-blue{margin-top: 1rem;}
	.bg-blue::before {top: 13rem;}
	.game-photo{width: 800px;margin-left: calc(50% - 800px/2);}
}
@media screen and (max-width:750px) {
	.item-list-inner {max-width: 440px;}
	.top-slow {right: 8rem;}
	.footer-allchara::before{top: -8rem;}
	.top1{max-width: 110px;}
	.top-sheriff-sp {top: 18rem;}
	.itemlist {max-width: 146px;}
	.itemlist-name{font-size: 0.7rem;line-height: 0.875rem;height: 46px;}
	footer .logo{padding: 0 0 1.375rem;}
	footer .flx{display: block;max-width: 350px;padding: 2.125rem 0 1rem;}
	footer .flx nav{max-width: 170px;margin: 0 auto;}
	footer .flx nav li{font-size: 0.875rem;font-weight: 500;text-align: center;}
	footer nav > ul > li{padding: 0 0 0.3rem 0;}
	.pc750{display: none;}
	.sp750{display: block;}
	li.sp750{padding: 0.75rem 0 0 0;}
	.footer-icon.sp750{display: flex;max-width: 350px;justify-content: center;margin-top: 0;}
	.footer-icon.sp750 li{padding: 0.5rem;}
	

}
@media screen and (max-width:645px) {
	.icon-wrap{margin-top: 1.75rem;}
	.icon-wrap li{margin-bottom: 1rem;}
}
/*文字サイズ変更2*/
@media screen and (max-width: 650px){
	.br650{display: block;}
	h2 span{font-size: 1rem;line-height: 1.2rem;}
	h2.h2-story img {max-width: 100px;}
	h2 img{max-width: 290px;}
	
	h2.h2-goods img {max-width: 350px;}
	.line-purple::before{content: "";display: inline-block;background: url("../img/line-purple-sp.png");width: 140%;height: 180px;background-size: contain;vertical-align: middle;background-repeat: no-repeat;}
	.top-opila{left: -10rem;top: -12rem;}
	.bg-blue::before {top: 9rem;}
	.chara-text .chara-detail{width: 90%;margin: 0 auto;}
	.chara-wrap img{max-width: 181px;}
	.mochi.mochi-sp{font-size: 1.25rem;}
	.responsive iframe{border: 10px solid #D0F9ED;}
	.sp-goods-text {padding-top: 4rem;font-size: 0.875rem;max-width: 322px;margin: 0 auto;}
	.item-list-inner{padding: 2rem 0 0;}
	.btn-square .ja{font-size: 0.875rem;}
	.btn-square, .btn-square a{width: 170px;}
	.btn-square .en{font-size: 1.75rem;line-height: 1.5rem;}
	.btn-square .ja{font-size: 0.75rem;}
	/*news*/
	.swiper-button-prev{left: 2rem!important;}
	.swiper-button-next{right: 2rem!important;}
	
	.itemlist-price{font-size: 1.25rem;}
	
	.wp-pagenavi .current,.wp-pagenavi .page {width: 36px;margin: 0;}
	.wp-pagenavi .previouspostslink:before,.wp-pagenavi .nextpostslink:after {width: 70px;height: 60px;}
	
	.top-store-detail {padding: 2.5rem 0;}
	
	.more-ja{font-size: 0.75rem;}
	.sp-arrow-bottom img{left: -7rem;}
	.store-btn.sp-arrow-bottom img {left: -9rem;}

	#top-news .btn-area{padding-top: 0;}
	.btn, .btn5{width: 155px;}
	#top-pop-up-store .sp-arrow-bottom img{left: -9rem;}
	#top-game .sp-arrow-bottom img{left: -11rem;}
	
	h2{position: relative;}
	h2 span{position: absolute;top: 7rem;left: 0;right: 0;}
	
	.sns-li img{height: 27px;width:auto;}
}

@media screen and (max-width:600px) {
	
	.brnone600{display: none;}
	.bg-pink::before{top: -1.5rem;}
	}

/*スマートフォン向け*/
@media screen and (max-width: 560px){
	body {font-size: 13px;}
	#top {bottom: 10%;}
	.top-stinnger{left: -3rem;}
	.top-opila {max-width: 120px;left: 0;top: -11rem;}
	.top-sheriff-sp{max-width: 190px;}
	.icon-wrap li div img, .icon-wrap li a img{box-shadow: 2px 2px 5px #ccc;border-radius: 15px;}

	}
@media screen and (max-width: 550px){
	.line-purple::before{height: 154px;}
}
@media screen and (max-width: 500px){
	.br500{display: block;}
	.item-list-inner {max-width: 345px;}
	.itemlist{max-width: 115px;padding: 0.25rem;}
	.x-banner-area .mochi{font-size: 1.25rem;left: 33%;}
	.top-sheriff-sp{top: 15rem;}
	.footer-allchara::before{top: -5rem;}
	.Pagination-Item-Link {font-size: 1.5rem;width: 34px;}
	.arrow-neon{width: 60px;}
	/*news*/
	.swiper-button-prev{left: 2%!important;}
	.swiper-button-next{right: 2%!important;}
	
	.pop-up-store .flx {max-width: 300px;}
	.pop-up-store .flx img{width: 300px;height: 150px;}
		
	.sp-arrow-online-shop{font-size: 1.625rem;}
	.sp-arrow-online-shop::after{width: 15px;height: 16px;left: 10.5rem;}
	.sec-onlineshop a{max-width: 260px;}
	
	#news h2 {padding: 1.75rem 0 3rem;}
	.bg-blue::before{top: 8.5rem;}
	
	}

@media screen and (max-width: 450px){
	
	.item-list-wrap{width: 95%;}
	.top-slow {right: 5rem;}
	.mochi{font-size: 1.25rem;padding-bottom: 0.3rem;}
	.mochi.mochi-sp{font-size: 1rem;line-height:1.7rem;}
	.chara-wrap > div {padding: 1.5rem 0;}
	h2.h2-goods{width: 95%;margin: 0 auto;}
	  .top1 {bottom: 9%;right: 0%;max-width: 100px;}
	.top-store-detail .mochi{padding-bottom: 1.75rem;}
	

}
@media screen and (max-width: 430px){
	.br430{display: block;}
	.icon-wrap{margin-top: 1.5rem;}
	
	.line-purple::before {height: 119px;}
	.top-store-detail {margin: 2.5rem auto 0;}
	.pop-up-store{margin-bottom: 2rem;}
	
	.x-banner-area {padding-top: 0.5rem;}
	.game-photo {width: 500px;margin-left: calc(50% - 500px / 2);}
	
}

@media screen and (max-width: 400px){
	.news-thumb {padding:1rem;}
}
@media screen and (max-width: 388px){
	.item-list-inner {max-width: 333px;}
	.itemlist{max-width: 111px;}
	.news-thumb img {width: 144px;height: 90px;}
	.news-title{letter-spacing: -0.1px;}
}