@charset "UTF-8";

html {
	height: 100%;
	width: 100%;
	font-size: 41.6875%;
}

body {
	position: relative;
	width: 100%;
	color: #ffffff;
	font-size: 3.6rem;
	line-height: 1.2;
	word-wrap: break-word;
	overflow-wrap: break-word;
	font-family: "メイリオ", "ＭＳ Ｐゴシック", Helvetica, sans-serif;
	/*background-image: url(../image/topbg.png);
	background-repeat : no-repeat;
	background-size : 100% auto;*/
	background-color : #000000;
	height: 100%;
}

#bg0, #bg1, #bg2, #bg3, #bg4, #ov-bg {
	z-index : -1;
	background-repeat : no-repeat;
	background-size : 100% auto;
	position : fixed;
	top : 0;
	left : 0;
	right : 0;
	bottom : 0;
}

#bg0 { /*background-image: url(../image/topbg.png);*/ }

#bg1 { background-image: url(../image/gaiyoubg.jpg); }

#bg2, #ov-bg { background-image: url(../image/systembg.jpg); }

#bg3 { background-image: url(../image/devilbg.jpg); }

#bg4 { background-image: url(../image/charabg.jpg); }

#wrap-ot-bgbox {
	background-image: url(../image/ot-bg.png);
	background-repeat : no-repeat;
	background-size : 100% auto;
	background-position: top center;
}

#news #ov-bg { background-image: url(../image/news/newsbg.jpg); }

#news #wrap-ot-bgbox {
	background-image: url(../image/news/otnews-bg.png);
	background-repeat : repeat-y;
	background-size : 640px auto;
    height:auto;
}

@media screen and (min-width:640px) {

#wrap-ot-bgbox {
	background-repeat : no-repeat;
	background-size : 706px auto;
}

#system #wrap-ot-bgbox { background-image: url(../image/system/otsystem-bg2.png); }

#chara #wrap-ot-bgbox { background-image: url(../image/chara/otchara-bg2.png); }

#chara.chara-oth #wrap-ot-bgbox { background-image: url(../image/chara/otchara-oth-bg2.png); }

#chara.chara-ac #wrap-ot-bgbox { background-image: url(../image/chara/otchara-ac-bg2.png); }

#devil #wrap-ot-bgbox { background-image: url(../image/devil/otdevil-bg2.png); }
}

@media screen and (max-width:640px) {

#news #wrap-ot-bgbox { background-size : 99% auto; }
}

/**/
img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
	border-style: none;
}

li { list-style: none; }

a { text-decoration: none; }

a:link, a:hover, a:active { color: #ffffff; }

a:visited { color: #ffffff; }

a:focus { outline: none; }

/*clearfix*/
.cf:before, .cf:after {
	content: "";
	display: table;
}

.cf:after, .clear { clear: both; }

cf::after {
	content: " ";
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	line-height: 0;
}

.tc { text-align: center !important; }

.tr { text-align: right !important; }

.tl { text-align: left !important; }

.pos-rel { position: relative; }

.pos-abs { position: absolute; }

.pos-fix { position: fixed; }

.pos-inhe { position: inherit; }

* {
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, ul, li {
	padding: 0;
	margin: 0;
}

a { display: inline-block; }

#page-topbt {
	position: fixed;
	width: 16%;
	bottom: 20%;
	right: 0;
	z-index: 200;
	text-align: right;
}

@media screen and (min-width:641px) {

#page-topbt {
	width: 100px;
	height: auto;
}
}

#wrap {
	width: 100%;
	min-width: 320px;
	margin: 0 auto;
}

/*==================================
ALL
===================================*/
header#header > .inner-box, footer#footer #fot-main > .inner-box, #main > .inner-box, #top-maintxt > .inner-box {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
}

#hed-main.inner-box2, #top-hed.inner-box2 {
	max-width: 600px;
	margin: 0 auto;
}

@media screen and (max-width:320px) {

header#header > .inner-box, footer#footer > .inner-box, #main > .inner-box, #top-maintxt > .inner-box {
	width: 100%;
	min-width: 320px;
	margin: 0 auto;
}

#hed-main.inner-box2, #top-hed.inner-box2 {
	min-width: 300px;
	margin: 0 auto;
}
}

/*==================================
header
===================================*/
header#header {
	position: relative;
	width: 100%;
	text-align: left;
	background: #000000;
	z-index: 100;
}

#header h1 {
	font-size: 2.2rem;
	font-weight: normal;
}

.langLinkbox {
	top: 0.5%;
	left: 1%;
	z-index: 149;
	color: #000000;
	font-size: 2.2rem;
}

#fot-main .langLinkbox {
	top: 0;
	left: auto;
	right: 0;
	z-index: 149;
	color: #cfcfcf;
	padding-top: 5%;
}

.langLinkbox { width: 15em; }

.langLink {
	padding: 3% 0;
	border: 1px solid #000000;
	text-align: center;
}

body:not(#index) .langLink {
	color: #cfcfcf;
	border: 1px solid #cfcfcf;
}

#fot-main .langLink { border: 1px solid #cfcfcf; }

.langLink a {
	color: #000000;
	text-decoration: underline;
	display: inline;
}

body:not(#index) .langLink a, #fot-main .langLink a { color: #cfcfcf; }

#hed-main { }

#hed-main h1 { padding: 1% 2%; }

.logoimg {
top: 8.2%;
    left: 38%;
    width: 21.7%;
    z-index: 5;
}

.side-cont { z-index: 10; }

.top-bunlist { z-index: 10; }

#topmenubox {
	position: fixed;
	top: 0;
	z-index: 150;
}

#topmenu-innner {
	position: relative;
	margin: 0 auto;
}

#topmenu {
	position: relative;
	width: 160px;
	text-align: center;
	background: url(../image/menuli-bg.png) bottom center no-repeat;
	background-size: 100% auto;
}

#topmenu-li { }

#topmenu-li ul {
	height: 230px;
	margin-top: -14%;
}

#topmenu-li li {
	text-indent: -999999px;
	margin-bottom: 10px;
	-webkit-transform: rotate(-25deg);
	-moz-transform : rotate(-25deg);
	-ms-transform : rotate(-25deg);
	-o-transform : rotate(-25deg);
	transform : rotate(-25deg);
}

#topmenu-li li:nth-child(3) { min-height: 1.6em; }

#topmenu-li li a { display: block; }

#topmenu-li .close {
	position: absolute;
	top: 14px;
	right: 31px;
	text-indent: -9999px;
	display: inline-block;
	width: 26px;
	height: 26px;
}

@media screen and (max-width:560px) {

#topmenu { width: 160px; }

#topmenu-li ul {
	height: 227px;
	margin-top: -12%;
}
}

@media screen and (max-width:480px) {

#topmenu { width: 120px; }

#topmenu-li ul {
	height: 170px;
	margin-top: -16%;
}
}

@media screen and (max-width:320px) {

#topmenu { width: 80px; }

#topmenu-li ul {
	height: 116px;
	margin-top: -12%;
}
}

#store-bt {
	position: relative;
	display: block;
    width: 47%;
    min-width: 205px;
	max-width: 285px;
    padding-left: 8px;
}

@media screen and (min-width:640px) {
	#store-bt {
		padding-left: 15px;
	}
}


  .fixed {
    position: fixed !important;
    top: 5px;
  }


/*==================================
main
===================================*/
#main-cont {
	width: 100%;
	max-width: 640px;
	min-width: 320px;
	margin: 0 auto;
}

/*tophed*/
#top-hed {
	width: 100%;
	max-width: 640px;
	min-width: 320px;
	margin: 0 auto;
	background: url(../image/main-kvbgm.png) top center no-repeat;
	background-size: 100% auto;
	padding-top: 128%;
}

@media screen and (min-width:640px) {

#top-hed {
	background: url(../image/main-kvbgm.png) top center no-repeat;
	background-size: 100% auto;
	padding-top: 800px;
}
}

.top-bun, .top-movie, .plmdl-app, .top-prmAppdl, .top-bunlist, .top-mainbun {
	width: 96%;
	margin: 0 auto;
}

.top-bunlist ul { padding: 0 16px; }

.top-bunlist li {
	display: inline-block;
	width: 48%;
	margin-top: 5px;
	margin-right: 5px;
	box-sizing: border-box;
}

.top-bunlist li:nth-child(4n) { margin-right: 0px; }

/* slider */
.top-bun {
    text-align: center;
	width: 84%;
	margin:0 auto;
	padding-bottom: 5%;
}
.top-bun .bx-wrapper{
	position: relative;
}
.top-bun .bx-viewport {

	z-index: 50;
}

.top-bun .bx-controls{
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	z-index: 49;
}
.top-bun .bx-controls .bx-controls-direction,
.top-bun .bx-controls .bx-pager{
	position: absolute;
	width: 100%;
	height: 100%;
}
.top-bun .bx-controls .bx-controls-direction a {
	position: absolute;
	top:10px;
	width: 5%;
	height: 18%;
}
.top-bun .bx-controls .bx-controls-direction a.bx-prev {
	top: 40%;
    left: -6%;
}
.top-bun .bx-controls .bx-controls-direction a.bx-next {
	top: 40%;
	right: -6%;
}
.top-bun .bx-controls .bx-pager {
	height: auto;
	bottom: -16%;
	text-align: center;
}
.top-bun .bx-pager-item {
	display: inline-block;
	margin-right: 2%;
        width: 6%;
        height: auto;
}
.top-bun .bx-pager-item:last-child {
	margin-right: 0;
}
.top-bun .bx-pager-item a {
        position: relative;
        display:inline-block;
	width: 100%;
	height: 100%;
}
a.bx-pager-link.active:before {
        content: "";
        background-image: url(../image/slider-pager-on.png);
        background-size: 100%;
        position: absolute;
        z-index: 10;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
}




.top-movie a { display: block; }

.top-prmAppdl { text-align: center; }

.top-prmAppdl ul.top-prmAppdlul {
	margin: 0 auto;
	top: 0;
	right: 0;
	left: 0;
	z-index: 55;
}

.top-prmAppdl img.prmapp-infonbg { z-index: 50; }

@media screen and (min-width:765px) {

.top-prmAppdl ul.top-prmAppdlul li img {
	width: 245px;
	height: auto;
}
}

.top-prmAppdl li {
	display: inline-block;
	width: 40%;
}

.top-prmAppdl li.app { width: 33%; }

.top-prmAppdl li img, .top-prmAppdl li img[src$=".svg"] { width: 100%; }

.top-prmAppdl ul { padding: 17% 0 3.5%; }

.top-newslist {
	width: 92%;
	margin: 0 auto;
	padding: 0 0 5% 0;
	/*background: url(../image/topnews-bg.png) top center no-repeat;
        background-size: 100% auto;*/
	font-size: 2.8rem;
}

.top-newslist .top-newslist-inner {
	top: 0;
	right: 0;
	left: 0;
	z-index: 50;
}

.top-newslist .topnews-bg {
	top: 0;
	right: 0;
	left: 0;
	z-index: 10;
}

.top-newslist p.m-topnews { padding: 6% 5% 1%; }

.top-newslist ul { padding: 2% 3% 3.5%; }

.top-newslist li {
	margin-bottom: 3.0%;
	padding-bottom: 1.0%;
	font-size: 3.6rem;
	line-height: 1.2;
	border-bottom: 1px solid #ffffff;
}

.topnews-daybox {
position:relative;}


.top-newslist li:last-child { margin-bottom: 0; }

.top-newslist .newslist-txt a {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}

.top-newslist li span.topnews-day {
	float: right;
	margin-bottom: 1%;
	padding-top: 4.5%;
	text-align: right;
	color: #8a448a;
	font-weight: bold;
	line-height: 1;
	font-size: 3.0rem;
}

.top-newslist .icon-new {
	top: 0;
	right: 0;
}


.top-newslist .topmews-btlist { padding: 1% 0 1%; }

.top-snsbtlist { text-align: center; }

.ft-snsbtlist {
	margin-top: 2%;
	text-align: center;
}

.top-snsbtlist li, .ft-snsbtlist li {
	width: 14%;
	display: inline-block;
	margin-left: 5%;
}

.top-snsbtlist li:first-child, .ft-snsbtlist li:first-child { margin: 0; }

.side-cont-mgbt { 
	margin-bottom: 3%;
	text-align: center;
}

.top-bun li {
        margin-bottom:3%;
}
.top-bun li:last-child {
        margin-bottom:0%;
}

/**/
.section-inner {
	position: relative;
	max-width: 640px;
	min-width: 320px;
	margin: 0 auto;
	box-sizing: inherit;
}

#top-system span.bt-detaillink {
	bottom: -10%;
	display: inline-block;
}

#top-devil span.bt-detaillink {
	bottom: 6%;
	display: inline-block;
}

#top-charastory span.bt-detaillink {
	bottom: 24%;
	display: inline-block;
}

span.bt-detaillink a { display: inline-block; }


.top-bun.bun-prelink {
        right: 0;
        left: 0;
        bottom:-22%;
}

div#top-hedbox.section { height: 1164px; }

div.section { margin-bottom: 3%; }

div#top-systembox.section { margin-bottom: 5%; }

div#top-hed.section {
	min-height: 1450px;
	max-height: 2570px;
}

div#top-overviewbox.section {
	min-height: 500px;
	max-height: 1000px;
}

div#top-overviewboxbg {
	background: url(../image/topgaiyou-bgm.png) center 5% no-repeat;
	background-size: 100% auto;
}

div#top-systembox.section {
	min-height: 421px;
	max-height: 800px;
}

div#top-systemboxbg {
	background: url(../image/topsystem-bgm.png) center 5% no-repeat;
	background-size: 100% auto;
}

div#top-devilbox.section {
	min-height: 458px;
	max-height: 920px;
}

div#top-devilboxbg {
	background: url(../image/topdevil-bgm.png) center 5% no-repeat;
	background-size: 100% auto;
}

div#top-charastorybox.section {
	min-height: 700px;
	max-height: 1400px;
}

div#top-charastoryboxbg {
	background: url(../image/topchara-bgm.png) center 5% no-repeat;
	background-size: 100% auto;
}

@media screen and (min-width:640px) {

div#top-overviewboxbg {
	background-image: url(../image/topgaiyou-bg.png);
	background-size: 846px auto;
}

div#top-systemboxbg {
	background-image: url(../image/topsystem-bg.png);
	background-size: 846px auto;
}

div#top-devilboxbg {
	background-image: url(../image/topdevil-bg.png);
	background-size: 846px auto;
}

div#top-charastoryboxbg {
	background-image: url(../image/topchara-bg.png);
	background-size: 846px auto;
}

div#top-hed.section, div#top-overviewbox.section, div#top-systembox.section, div#top-devilbox.section, div#top-charastorybox.section {
	min-height: inherit;
	max-height: inherit;
}

div#top-hed.section { height: 2570px; }

div#top-overviewbox.section { height: 1000px; }

div#top-systembox.section { height: 800px; }

div#top-devilbox.section { height: 920px; }

div#top-charastorybox.section { height: 1400px; }

div#top-overviewboxbg, div#top-systemboxbg, div#top-devilboxbg, div#top-charastoryboxbg {
	background-position: center 10px;
	padding-top: 20px;
}
}


.footer-bun li:nth-child(2) { margin-top: 4%; }

.fb-share-button {
	transform: scale(2);
	-webkit-transform: scale(2);
}

.inline-box {
	width: 100%;
	max-width: 620px;
	min-width: 300px;
}

.inline-title {
	font-size: 4.2rem;
	color: #fff;
	text-align: center;
	background: #000;
	padding: 2% 0;
	font-weight: bold;
	margin-bottom: 5%;
}

.inlint-bt {
	width: 80%;
	padding: 5%;
	font-size: 3.8rem;
	margin: 2% auto;
	vertical-align: middle;
	border: soli 1px #cccccc;
	background: #666666; /* Old browsers */
	background: -moz-linear-gradient(top, #666666 8%, #666666 48%, #000000 50%, #333333 93%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #666666 8%, #666666 48%, #000000 50%, #333333 93%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #666666 8%, #666666 48%, #000000 50%, #333333 93%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#333333', GradientType=0 ); /* IE6-9 */
}

.inline-btbox { text-align: center; }

.inline-btbox li {
	margin: 4% auto;
	width: 100%
}

.inline-osname {
	text-align: center;
	font-size: 4.2rem;
	font-weight: bold;
	margin: 4% auto;
	color: #00ccff;
}

.inline-osname.is-and {
	color: #00cc00;
	margin-top: 5%;
}

.top-bunbox li {
	display: inline-block;
	margin: 0 5%;
}

.inlint-bt a {
	display: block;
	width: 100%;
	height: auto
}

.inlint-bt a {
	display: block;
	width: 100%;
	height: auto
}

/*==================================
footer
===================================*/
#footer {
	z-index: 100;
	width: 100%;
	background: url(../image/endbg.png) top center no-repeat;
	background-size: 100% auto;
	margin-top: 12%;
	padding-top: 36%;
}

#index #footer {
	background: url(../image/endbgm.png) top center no-repeat;
	background-size: 100% auto;
	padding-top: 12%;
	margin-top: 1%;
}

#system #footer { margin-top: 0; }

.ft-btrebox {
	width: 100%;
	min-width: 320px;
	top: 0;/*min-height: 580px;*/
}

.ft-btreinner { margin: 0 auto; }

.ft-btreinner .ft-btreimg {
	top: 0;
	right: 0;
	width: 30%;
	height: auto;
}

@media screen and (min-width:641px) {

.ft-btreinner .ft-btreimg {
	width: 185px;
	height: auto;
}
}

@media screen and (min-width:780px) {

.ft-btrebox { top: 10%; }
}

@media screen and (min-width:1024px) {

.ft-btrebox { top: 20%; }
}

.footer-txtinner { background: #000000; }

.footer-inner {
	width: 100%;
	min-width: 320px;
	margin: 0 auto;
	padding-top: 2%;
}

.plform-txt, .ft-snsbtlist {
	min-width: 320px;
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.ft-snsbtlist { margin-top: 2%; }

.plform-txt img { width: 80%; }

#fot-main {
	padding: 4% 2% 3%;
	width: 100%;
	min-width: 320px;
	text-align: left;
	background: #000000;
	font-size: 2.2rem;
}

#fot-main .fot-main-inner {
	margin: 0 auto;
	min-width: 300px;
	max-width: 600px;
}

#fot-main .logo-copy { margin-bottom: 15px; }

#fot-main .logo-copy img.segalogo {
	display: inline-block;
	margin-right: 3%;
	width: 40%;
}

#fot-main .logo-copy .logo-copy-txt {
	display: inline-block;
	padding-top: 11%;
}

#fot-main .ft-txtlink { margin-top: 2%; }

#fot-main .ft-txtlink li a { text-decoration: underline; }

#fot-main .ft-txtlink li {
	display: inline-block;
	margin-right: 2%;
	margin-bottom: 2%;
}

#fot-main .ft-txtlink li:last-child { margin-right: 0; }

#system #footer { }

/*==================================
system
===================================*/
body#ov-bg { background-image: url(../image/sys-bg.jpg); }

#ot-bg { background-image: url(../image/ot-bg.png); }

#system-inner2, p.endtxt {
	max-width: 600px;
	min-width: 300px;
	padding: 5% 2%;
	margin: 0 auto;
}

#system h2 { margin-bottom: 11%; }

#system h3 { margin-top: 3%; }

.system-02 { margin-top: 9%; }

.system-03 { margin-top: 6%; }

#system .system-01 .popupbt0101 {
	top: 5.0%;
	right: 13.2%;
}

#system .system-01 .popupbt0102 {
	top: 5.0%;
	right: 38.3%;
}

#system .system-01 .popupbt0103 {
	top: 5.0%;
	right: 64.5%;
}

#system .system-02 .popupbt0201 {
	top: 5.0%;
	left: 26.2%;
}

#system .system-02 .popupbt0202 {
	top: 5.0%;
	left: 51.5%;
}

#system .system-03 .popupbt0301 {
	top: 5.0%;
	right: 13.2%;
}

#system .system-03 .popupbt0302 {
	top: 5.0%;
	right: 38.3%;
}

#system .system-03 .popupbt0303 {
	top: 5.0%;
	right: 64.5%;
}

#system .systemimg-box { text-align: center; }

#system .systemimg-box a { display: inline; }

#system .systemimg-box img { width: 26%; }

/*==================================
news
===================================*/
#news-inner2 {
	max-width: 620px;
	min-width: 320px;
	padding: 32px 0 0;
	margin: 0 auto;
}

.news-mainbox {
	padding: 4%;
	font-size: 2.6rem;
}

.news-list li {
	border-bottom: 1px solid #ffffff;
	padding: 2% 0 1%;
}

.news-list li > a { display: block; }

.news-mainbox table {
	border-collapse: inherit;
	border-spacing: inherit;
}

.news-mainbox .news-detailtxt-box em { font-style: oblique; }

.news-mainbox .news-detailtxt-box {
	background-color: rgba(0,0,0,0.3);
	padding: 4%;
}

.newslist-hed, .newsdetail-hed { margin-bottom: 2%; }

.newslist-hed img.cateimg, .newsdetail-hed img.cateimg { float: left; }

.newslist-hed p.news-daytxt, .newsdetail-hed p.news-daytxt {
	/*float:right;*/
	text-align: right;
	line-height: 1;
	padding-top: 2%;
}

.newslist-hed p.news-daytxt .icon-new, .newsdetail-hed p.news-daytxt .icon-new {
	display: inline-block;
	margin-top: -0.8%;
	margin-right: 2%;
	width: 17%;
}

.news-sharebox .fb-share-button {
	transform: scale(1);
	-webkit-transform: scale(1);
}

@media screen and (min-width:641px) {

.newsdetail-hed p.news-daytxt .icon-new { margin-top: -1.0%; }
}

.news-list-title h3, .news-detail-title h3 {
	font-weight: normal;
	font-size: 3.0rem;
}

.news-detail-title h3 { margin-bottom: 2%; }

.news-detail-title .img_newsgraphbox {
	text-align: center;
	padding: 1% 0 0 0;
}

.news-list-title .img_newslist_graph, .news-detail-title .img_newslist_graph {
	display: inline-block;
	margin-bottom: 2%;
}

.news-sharebox {
	border-top: 1px solid #bbbbbb;
	padding: 2% 0 2.5%;
}

.news-sharebox ul { text-align: right; }

.news-sharebox li { display: inline-block; }

#twitter-widget-0, .news-sharebox .fb-share-button > span, .line-it-button { vertical-align: top !important; }

.bt-renewslist {
	text-align: center;
	padding: 3% 0 0;
}

.news-pagerbox {
	margin-top: 2%;
	text-align: center;
}

.news-pagerbox .count {
	margin: 0 auto;
	font-size: 3.0rem;
}

.news-pagerbox .count span {
	display: inline-block;
	width: 1.5em;
}

.news-pagerbox .count span.no {
	color: #adadad;
	font-weight: bold;
}

.news-pagerbox .count span:last-child { margin-right: 0; }

.news-pagerbox .prev {
	top: 2%;
	left: 26%;
}

.news-pagerbox .next {
	top: 2%;
	right: 26%;
}

.news #footer { margin-top: 0; }

@media screen and (max-width:640px) {

.news-mainbox { padding: 6%; }
}

/*==================================
font
===================================*/
@media screen and (max-width:768px) {

.top-newslist li span.topnews-day { font-size: 3.2rem; }
}

@media screen and (max-width:530px) {

.top-newslist, #fot-main { font-size: 2.1rem; }
}

@media screen and (max-width:375px) {

.top-newslist, #fot-main { font-size: 2.0rem; }
}

/*==================================
respo
===================================*/

@media screen and (max-width:768px) {

.top-newslist { padding-bottom: 10%; }

.top-newslist ul { padding-bottom: 4.5%; }
}

@media screen and (max-width:700px) {

#fot-main .logo-copy .logo-copy-txt { padding-top: 11.6%; }
}

@media screen and (max-width:640px) {

.top-newslist { padding-bottom: 7%; }
}

@media screen and (max-width:600px) {

#fot-main .logo-copy .logo-copy-txt { padding-top: 11.5%; }
}

@media screen and (max-width:500px) {

.top-newslist .icon-new { width: 48%; }

.bt-renewslist img { width: 80%; }

.news-pagerbox .prev img, .news-pagerbox .next img { width: 26%; }

#fot-main .logo-copy .logo-copy-txt { padding-top: 11%; }
}

@media screen and (max-width:450px) {

#fot-main .logo-copy .logo-copy-txt { padding-top: 10%; }
}

@media screen and (max-width:375px) {

.top-newslist .icon-new { width: 40%; }

.news-list-title h3, .news-detail-title h3 { font-size: 3.4rem; }

.news-pagerbox .prev img, .news-pagerbox .next img { width: 24%; }
}

@media screen and (max-width:320px) {

.top-newslist ul { padding-top: 1%; }
}

/*==================================
official-store-banner-modal
===================================*/

.official-store-banner-modal {
	z-index: 9999;
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	transition: .2s;
	}

.official-store-banner-modal.show {
	display: flex;
	align-items: center;
	justify-content: center;
	}

.official-store-banner-modal-content {
	width: min(90vw, 640px);
	text-align: right;
	transition: .2s;
	}

	.official-store-banner-modal-content a {
		display: block;
		background-color: #fff;
	}

	.official-store-banner-modal-content a img:hover {
		opacity: 0.8; 
	}	

.official-store-banner-modal-content .close {
	display: inline-block;
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;

	width: min(8vw, 69px);
    position: relative;
    top: -8px;
	transition: .2s;
    }

	.official-store-banner-modal-content .close:hover {
		opacity: 0.7; 
	}