@charset "utf-8";html{height:100%}body{
	color: #2f87ff;
	text-align: left;
	font-size: 13px;
	padding: 0;
	margin: 0;
	font-family: ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,ＭＳ\ Ｐゴシック,MS PGothic,sans-serif;
	word-break: break-all;
	min-height: 100%;
	width: 100%;
	position: relative;
	background-image: url("index_BG.png");
	background-position: center center;
	background-repeat: repeat;
	-moz-background-size: cover;
	background-size: contain;
	background-color: #FFFFFF;
	background-attachment: fixed
}div,form,table,textarea{margin:0 auto;padding:0;font-size:13px;float:none}img{vertical-align:bottom}a img{border:0 0}a img:hover{filter:alpha(opacity=70);opacity:.7;-moz-opacity:.7}td{vertical-align:top;margin:0 auto;padding:0;font-size:13px}table{border-collapse:collapse}textarea{resize:none;vertical-align:bottom}div.float_end{clear:both}div.wordBreak{word-break:break-all}a,a:link{color:#eef}a:visited{color:#dcf}a:active,a:hover{color:#eef}div#head{
    width: 100%;
    min-width: 50pc;
    padding: 3px 0;
    position: absolute;
    color: #FFFFFF;
    background-color: #5b31a1;
    background-color: rgba(163,2,2,1.00);
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
}div#body{
	padding-top: 10px;
	padding-bottom: 190px
}div#foot{
    width: 100%;
    min-width: 50pc;
    height: 190px;
    position: absolute;
    color: #FFFFFF;
    bottom: 0;
    /* [disabled]background-color: #5b31a1; */
    /* [disabled]background-color: rgba(163,2,2,1.00); */
    /* [disabled]font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace; */
    font-weight: bold;
    background-image: url(../header/BG_footer.png);
}div#foot td#logo{text-align:center;padding-right:10px}div#foot td#logo a{color:#ccc}div#foot table{
	margin: 15px auto;
	height: 10pc;
	color: rgba(255,255,255,1.00);
}div#foot table td{
	vertical-align: middle;
	color: rgba(255,255,255,1.00);
	text-align: center;
}

div.view{
    margin: 0 auto;
    width: 75pc;
    height: auto;
    text-align: left;
    color: #fef4bd;
}

div.character_view{
	margin: 0 auto;
	width: 75pc;
	height: 1000px;
	text-align: left;
	color: rgba(154,73,74,1.00);
}


div.basicframe{
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-opera-border-radius: 6px;
	box-shadow: 0 0 0px 0px rgba(142,0,0,0.73);
	-webkit-box-shadow: 0 0 0px 0px rgba(142,0,0,0.73);
	-moz-box-shadow: 0 0 5px 2px #771010;
	background-color: rgba(255,160,118,0.28);
}div.vspacer5{height:5px;overflow:hidden}

div.vspacer10
{
    height:10px;
    overflow:hidden
}

div.vspacer80
{
	height: 60px;
	overflow: hidden
}

div.vspacer50
{
	height: 80px;
	overflow: hidden
}

div.vspacer100
{
    height:100px;
    overflow:hidden
}


div.vspacer20{height:20px;overflow:hidden}div.padding5{padding:5px}

div.basic_padding
{
    padding:10px
}

div.basic_padding_news
{
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-left: 12px;
	margin-top: 50px;
}

div.TOPICS_padding
{
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-bottom: 5px;
}


div.basic_padding_Twitter
{
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-left: 13px;
	margin-top: 55px;
}

div.basic_padding_up
{
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-left: -6px;
	margin-top: 80px;
}

div.basic_padding_what
{
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-left: -6px;
	margin-top: 50px;
	background-image: url(../img/what_bg.png);
	width: 1180px;
	height: 900px;
}


div.basic_padding_sp_CONTENTS
{
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-left: -6px;
	margin-top: 50px;
	background-image: url(../img/dlc_sp.png);
	width: 1180px;
	height: 834px;
}





div#chara_area_top_834
{
}

div#chara_area_top_834 div.charapanel_top_834
{
	width: 1180px;
	height: 834px;
	position: relative;
	background-image: url(../img/cmk_sp.png);
}

div#chara_area_top_1500
{
}

div#chara_area_top_1500 div.charapanel_top_1500
{
	width: 1180px;
	height: 1570px;
	position: relative;
	background-image: url(../img/shop_bg.png);
}

div#chara_area_top_3180
{
}

div#chara_area_top_3180 div.charapanel_top_3180
{
	width: 1180px;
	height: 3180px;
	position: relative;
	background-image: url(../img/shop_bg.png);
}



div#chara_area_top_2400
{
}

div#chara_area_top_2400 div.charapanel_top_2400
{
	width: 1180px;
	height: 4060px;
	position: relative;
	background-image: url(../img/shop_bg.png);
}

div#chara_area_top_1600
{
}

div#chara_area_top_1600 div.charapanel_top_1600
{
    width: 1180px;
    height: 1540px;
    position: relative;
    background-image: url(../img/shop_bg.png);
}



div#chara_area_CHARACTER01
{
}

div#chara_area_CHARACTER01 div.charapanel_CHARACTER01
{
	width: 1180px;
	height: 1500px;
	position: relative;
	background-image: url(../img/vo_ch01.png);
}

div#chara_area_CHARACTER02
{
}

div#chara_area_CHARACTER02 div.charapanel_CHARACTER02
{
	width: 1180px;
	height: 1500px;
	position: relative;
	background-image: url(../img/vo_ch02.png);
}


div#chara_area_CHARACTER03
{
}

div#chara_area_CHARACTER03 div.charapanel_CHARACTER03
{
	width: 1180px;
	height: 1500px;
	position: relative;
	background-image: url(../img/vo_ch03.png);
}











div.basic_padding_gallery
{
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-left: 0px;
	background-image: url(../img/gallery/gallery_bg.png);
	width: 1180px;
	height: 965px;
}

div.basic_padding_form
{
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-left: 0px;
	background-image: url(../img/mail_bg.png);
	width: 1180px;
	height: 670px;
}

div#basic_padding_story
{
}

div.basic_padding_story
{
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-left: -6px;
	margin-top: 50px;
	background-image: url(../img/story_bg.png);
	width: 1180px;
	height: 900px;
	position: relative;
}


div.basic_padding_special
{
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-left: -6px;
	margin-top: 50px;
	width: 1180px;
	height: 3000px;
}

div.basic_padding_about
{
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-left: -6px;
	margin-top: 50px;
	background-image: url(../img/about_bg.png);
	width: 1180px;
	height: 900px;
}

table.basic{border-spacing:1px;border-collapse:separate;background-color:#fff}table.basic td{
    background-color: #711;
    background-color: rgba(190,44,44,0.32);
    padding: 2px 10px;
    text-align: left;
    color: #8E0000;
    font-variant: normal;
    font-weight: bold;
}table.basic td.head{
    color: #fff;
    background-color: #72c5ff;
    background-color: rgba(163,2,2,1.00);
    font-weight: 700
}

/* ヘッダー */
#headerarea {
    width: 100%;
    min-width: 1180px;
	object-fit: cover;
    height: 133px;
    background-image: url(../header/BG_header.png);
/*    background-position: top center;
    background-repeat: repeat-x;
    background-size: auto auto;*/
}





#headerbox {
	position:relative;
	width:1180px;
	height:133px;
	left:0;
	right:0;
	margin:auto;
}

/* ブランドロゴ */
#headerbox #brand {
    position: absolute;
    width: 80px;
    height: 80px;
    left: 66px;
    top: 43px;
}

div#menu_area{
	width: 1009px;
	height: 80px;
	float: right;
	margin-top: 41px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	padding: 0;
	list-style: none;
	overflow: hidden;
}

div#characterselect_area{
	width: 944px;
	height: 80px;
	float: right;
	margin-top: 41px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	padding: 0;
	list-style: none;
	overflow: hidden;
}

div#menu_area div#menu{
	height: 80px;
}

div.menuslotbg
{float:left;position:relative;height:5pc;width:119px;background-repeat:no-repeat;background-position:0 0
}

div#menu_area div#menu div.menuslot,div#menu_area div#menu div.menuslot_light
{
    position:absolute;
    height:5pc;
    width:119px;
    background-repeat:no-repeat;
    background-position:0 0
}

div#menu_area div#menu div.menuslot a
{
    display:block;
    height:5pc
}

img.tag
{
    padding-bottom:0
}

div#top_visual
{
    padding:0 0 5px
}

div#top_visual2
{
    padding-right:0;
    padding-left:0;
    padding-bottom:10px
}

div#top_middle
{
    height: 660px
}

div#top_left_twitter{
    float: left;
    height: 660px;
    width: 300px;
    padding-right: -500px;
    padding-left: 0
}

div#top_left{
	width: 295px;

margin-left:5px                    opacity:1;
	pointer-events: auto; /* ←追加 */
	height: 655px;
	background-image: url(../header/Twitter_base.png);
}

div#top_left,div#top_left2
{
    float:left;padding-right:-500px;    height: 655px;
}

div#top_left2
{
	width: 575px;
	padding-left: 0;
	margin-left: 15px;
	height: 655px;
	background-image: url(../header/Twitter_base3.png);
}

div#top_left,div#top_left3
{
    float: left;
    padding-right: -500px;
    height: 655px
}

div#top_left3{
	width: 300px;
	padding-left: 0;
	margin-left: 15px;
	height: 655px;
	background-image: url(../header/Twitter_base2.png);
	
	}

div#top_left,div#top_left4
{float:left;padding-right:-500px;	height: 655px;
}

div#top_left4
{
	width: 895px;
	padding-left: 0;
	margin-left: 10px;
	height: 655px;
		
	}div#top_left,div#top_left5
{
    float: left;
    padding-right: -500px;
	height: 655px;
}

div#top_left5
{
    width: 895px;
    padding-left: 0;
    margin-left: 10px;
	height: 655px;
	
}
div#top_right
{
    float:right;width:780px
}
div#middle
{
	float: right;
	width: 75pc;
	margin-top: 10px;
}div#information{
    height: 635px
}div#information2{
	height: 646px
}div.inline{
	height: 550px;
	width: 275px;
	margin-top: 45px;
}div#information div.day{font-weight:700}div#information div.line{border-bottom:solid 1px #42690e;margin:3px 0}div#information_log_btn{text-align:center}div#publish div.day{font-weight:700}div#publish div.line{border-bottom:solid 1px #f8e0e0;margin:3px 0}div#topics,div#topics img{margin-bottom:5px}

}div#information2 div.day{font-weight:700}div#information2 div.line{border-bottom:solid 1px #42690e;margin:3px 0}div#information_log_btn{text-align:center}div#publish div.day{font-weight:700}div#publish div.line{border-bottom:solid 1px #f8e0e0;margin:3px 0}div#topics,div#topics img{margin-bottom:5px}

}div#information3{
	height: 650px

}div#information3 div.day{font-weight:700}div#information3 div.line{border-bottom:solid 1px #42690e;margin:3px 0}div#information_log_btn{text-align:center}div#publish div.day{font-weight:700}div#publish div.line{border-bottom:solid 1px #f8e0e0;margin:3px 0}div#topics,div#topics img{margin-bottom:5px}

.read{
	color: rgba(61,61,61,1.00);
	font-weight: bolder;
	font-size: 1.6em;
	margin-top: 10px;
	margin-left: 10px;
}

.read2{
	color: rgba(61,61,61,1.00);
	font-weight: bolder;
	font-size: 1em;
	margin-left: 15px;
}

.read3{
	color: rgba(61,61,61,1.00);
	font-weight: bold;
	font-size: 1em;
	margin-left: 15px;
	margin-top: 5px;
}

.read4{
	color: rgba(61,61,61,1.00);
	font-weight: bold;
	font-size: 1em;
	margin-left: 90px;
	margin-top: 3px;
}

.read5{
	color: rgba(61,61,61,1.00);
	font-weight: bold;
	font-size: 1em;
	margin-left: 15px;
	margin-top: 3px;
}

div#top_middle2
	{
	height: 655px
	}

.title_tag
{
	margin-top: 10px;
	margin-right: 10px;
}

.table_title01
{
	text-align: right;
	padding-right: 10px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-variant: normal;
	font-weight: bolder;
	
}

.table_title02
{
	padding-left: 10px;
	color: rgba(17,0,167,1.00);
	font-weight: bold;
	
}

.table_title03
{
	padding-left: 30px;
	color: rgba(63,63,63,1.00);
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
}

.sitemap_h1
{
	color: rgba(22,54,239,1.00);
	font-style: normal;
	font-weight: bolder;
	font-size: 1.8em;
	text-align: left;
	text-decoration: none;
	border-bottom: 2px dotted rgba(57,57,57,1.00);
	margin-top: 10px;
	margin-left: 30px;
	margin-right: 30px;
	
}
.sitemap_line
{
	border-bottom: 2px dotted rgba(57,57,57,1.00);
	margin-left: 30px;
	margin-right: 30px;
}

.sitemap_read
{
	margin-left: 60px;
	margin-right: 60px;
	margin-top: 20px;
	margin-bottom: 10px;
	color: rgba(61,61,61,1.00);
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.sitemap_btn_margin
{
	margin-right: 50px;
	
}

.square_btn{
	position: relative;
	display: inline-block;
	font-weight: bold;
	padding: 0.25em 0;
	text-decoration: none;
	color: #67c5ff;
	margin-right: 40px;
}

.square_btn:before{
   position: absolute;
   content: '';
   width: 100%;
   height: 4px;
   top:100%;
   left: 0;
   border-radius: 3px;
   background:#67c5ff;
   transition: .2s;
}

.square_btn:hover:before {
    top: -webkit-calc(100% - 3px);
    top: calc(100% - 3px);
}

.td_Word
{
	color: rgba(55,55,55,1.00);	
}



.sounds ,
.stop-button
{
	display: block;
	width: 100%;
	max-width: 120px;
	margin: 0px;
	padding: 0px 0;
	border-radius: 0px;
	color: #fff;
	font-weight: 0;
	background: #D36015;
	text-align: center;
	text-decoration: none;
	border: 0px;
	width: 120px;
	height: 30px;
	background: url("../img/common/vo_samp.png") left top no-repeat;
}

.stop-button
{
	background: #777 ;
}

a:hover img.hoverImg{
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: “alpha( opacity=80 )”;
}

div#chara_area
{
}

div#chara_area div.charapanel
{
    width: 1180px;
    height: 300px;
    position: relative;
}

div#chara_area_tr
{
}

div#chara_area_tr div.charapanel_tr
{
    width: 1180px;
    height: 300px;
    position: relative;
}




div#chara_area_top
{
}

div#chara_area_top div.charapanel_top
{
	width: 1180px;
	height: 400px;
	position: relative;
}

div#chara_area_top_400
{
}

div#chara_area_top_400 div.charapanel_top_400
{
	width: 1180px;
	height: 400px;
	position: relative;
}


div#chara_area_top_550
{
}

div#chara_area_top_550 div.charapanel_top_550
{
	width: 1180px;
	height: 550px;
	position: relative;
}

div#chara_area_top_1130
{
}

div#chara_area_top_1130 div.charapanel_top_1130
{
	width: 1180px;
	height: 1130px;
	position: relative;
}


div#chara_area_top_900
{
}

div#chara_area_top_900 div.charapanel_top_900
{
	width: 1180px;
	height: 834px;
	position: relative;
}

div#chara_area_top_1750
{
}

div#chara_area_top_1750 div.charapanel_top_1750
{
	width: 1180px;
	height: 1px;
	position: relative;
	bottom: -1px;
}

div#chara_area_top2
{
}

div#chara_area_top2 div.charapanel_top2
{
	width: 1180px;
	height: 1675px;
	position: relative;
}

div#chara_area_top3
{
}

div#chara_area_top3 div.charapanel_top3
{
    width: 1180px;
    height: 500px;
    position: relative;
}



 /*　プレイヤー　*/

.audiojs audio {
}
 /*　プレイヤー（再生バー）　*/
.audiojs {
  width: 120px;
  height: 120px;
  background: none;
  overflow: hidden;
  font-family: monospace;
  font-size: 12px;  
  -webkit-box-shadow: none;
  -moz-box-shadow: none;  
  -o-box-shadow: none;
  box-shadow: none;
}
/*　再生・停止ボタン　*/
.audiojs .play-pause {
	width: 50px;
	height: 50px;
	padding: 0;
	margin: 0;
	float: left;
	overflow: hidden;
	border: 6px solid #3A3A3A;
	border-radius: 6px;
}
/*　再生・停止ボタンなどの p 要素　*/
.audiojs p {
  display: none;
  width: 50px;
  height: 50px;
  margin: 0px;
  cursor: pointer;
}
.audiojs .play {
  display: block;
}
/*　進行状態・ロードの状態を表示する部分(グレー)　*/
.audiojs .scrubber {
  position: relative;
  float: left;
  width: 0px;
  background: #5a5a5a;
  height: 8px;
  margin: 12px 0 0 0px;
  border-top: 0;
  border-left: 0px;
  border-bottom: 0px;
  overflow: hidden;
}
/*　進行状態を表示するバーの部分(薄いグレー)　*/
.audiojs .progress {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 8px;
  width: 0px;
  background: #3A3A3A;
  z-index: 1;  
/* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc),
  color-stop(0.5, #ddd), color-stop(0.51, #ccc), color-stop(1, #ccc));  
  background-image: -moz-linear-gradient(center top, #ccc 0%, #ddd 50%, #ccc 51%, #ccc 
  100%); */
}
/* ロード状態を表示するバーの部分（黒） */
.audiojs .loaded {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 8px;
  width: 0px;
  background: #DDDDDD;  
/* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222),
  color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222));
  background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222
  100%); */
}
/*　現在の再生時間/総再生時間　フォント　*/
.audiojs .time {
  float: left;
  height: 40px;
  line-height: 40px;
  margin: 0px 0px 0px 8px;
  padding: 0px 0px 0px 0px;
  border-left: none;
  color: #666;
  text-shadow: none;
  display: none;
}
/*　現在の再生時間　フォント　*/
.audiojs .time em {
  padding: 0px 2px 0px 0px;
  color: #666;
  font-style: normal;
  display: none;
}
/*　時間　/の部分　*/
.audiojs .time strong {
  padding: 0px 0px 0px 2px;
  font-weight: normal;
  display: none;
}
.audiojs .error-message {
  float: left;
  display: none;
  margin: 0px 10px;
  height: 26px;
  width: 0px;
  overflow: hidden;
  line-height: 26px;
  white-space: nowrap;
  color: #fff;  
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -icab-text-overflow: ellipsis;
  -khtml-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
}
.audiojs .error-message a {
  color: #eee;
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 1px solid #999;
  white-space: wrap;
}
/*　再生ボタン　*/
.audiojs .play {
  background: url(../system/audiojs/play.png) center center no-repeat;　←playボタン
  margin-left: 1.45px;
}
/*　読み込み中ボタン　*/
.audiojs .loading {
  /*background: url("$1") center center no-repeat;*/
  display: none;
}
/*　エラーボタン　*/
.audiojs .error {
  /*background: url("$1") center center no-repeat;*/
  display: none;
}
/*　停止ボタン　*/
.audiojs .pause {
  background: url(../system/audiojs/pause.png) center center no-repeat;　←pauseボタン
}
.playing .play, .playing .loading, .playing .error {
  display: none;
}
.playing .pause {
  display: block;
}
.loading .play, .loading .pause, .loading .error {
  display: none;
}
.loading .loading {
  display: block;
}
.error .time, .error .play, .error .pause, .error .scrubber, .error .loading {
  display: none;
}
.error .error {
  display: block;
}
.error .play-pause p {
	cursor: auto;
	background-color: rgba(255,93,95,1.00);
}
.error .error-message {
  display: block;
}
/*　再生している曲の情報　*/
.track-details {
  clear: both;
  height: 26px;
  width: 0px;
  padding: 0px 6px;
  background: #FFF;
  color: #3A3A3A;
  font-size: 10px;
  line-height: 26px;
}
.track-details:before {
  content: '♬ Now Playing: ';
}


a.bt-samp2,
a.bt-samp2:hover,
a.bt-samp2:visited{
  display: block;
  height: 30px;
  width: 350px;
  padding-left:1px;
  text-decoration: none;
  line-height: 30px;
  text-align: center;
  color: #7d8383;
  text-shadow: 0px 1px 0px #fafafa;
  background: #fbfaf4;
  background: -webkit-gradient(linear, left top, left bottom, from(#fbfaf4), to(#ece8e6));
  background: -moz-linear-gradient(top,  #fbfaf4,  #ece8e6);
  background: -o-linear-gradient(top,  #fbfaf4,  #ece8e6);
  background: -ms-linear-gradient(top,  #fbfaf4,  #ece8e6);
  background: linear-gradient(top,  #fbfaf4,  #ece8e6);
  border: 1px solid #dcd9d8;
  border-bottom: 1px solid #c1c1bd;
  -webkit-box-shadow:  0 0 1px #c7c5c1;
  -moz-box-shadow:  0 0 1px #c7c5c1;
  box-shadow:  0 0 1px #c7c5c1;
  -webkit-border-radius: 15px; 
  -moz-border-radius: 15px;
  border-radius: 15px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
a.bt-samp2:hover { /*マウスホバー時*/
  color:#9a9f9f;
  background: #fbfbf9;
}
a.bt-samp2:active{  /* ボタンを押したとき */
  background:#ece8e4;
  border: none;
  box-shadow:  0 1px 1px #cccbc9, inset 0 0 1px rgba(0, 0, 0, 0.3);
}


a.bt-samp3,
a.bt-samp3:hover,
a.bt-samp3:visited{
    display: block;
    height: 90px;
    width: 1000px;
    padding-left: 1px;
    text-decoration: none;
    line-height: 30px;
    text-align: center;
    color: #7d8383;
    text-shadow: 0px 1px 0px #fafafa;
    background: #fbfaf4;
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfaf4), to(#ece8e6));
    background: -moz-linear-gradient(top,  #fbfaf4,  #ece8e6);
    background: -o-linear-gradient(top,  #fbfaf4,  #ece8e6);
    background: -ms-linear-gradient(top,  #fbfaf4,  #ece8e6);
    background: linear-gradient(top,  #fbfaf4,  #ece8e6);
    border: 1px solid #dcd9d8;
    border-bottom: 1px solid #c1c1bd;
    -webkit-box-shadow: 0 0 1px #c7c5c1;
    -moz-box-shadow: 0 0 1px #c7c5c1;
    box-shadow: 0 0 1px #c7c5c1;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
    font-size: 1.5em;
}
a.bt-samp3:hover { /*マウスホバー時*/
  color:#9a9f9f;
  background: #fbfbf9;
}
a.bt-samp3:active{  /* ボタンを押したとき */
    background: #ece8e4;
    border: none;
    box-shadow: 0 1px 1px #cccbc9, inset 0 0 1px rgba(0, 0, 0, 0.3);
    font-size: 1.5em;
}

.charapanel_top2 div .bt-samp3 {
}


a.bt-samp4,
a.bt-samp4:hover,
a.bt-samp4:visited{
    display: block;
    height: 30px;
    width: 1000px;
    padding-left: 1px;
    text-decoration: none;
    line-height: 30px;
    text-align: center;
    color: #7d8383;
    text-shadow: 0px 1px 0px #fafafa;
    background: #fbfaf4;
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfaf4), to(#ece8e6));
    background: -moz-linear-gradient(top,  #fbfaf4,  #ece8e6);
    background: -o-linear-gradient(top,  #fbfaf4,  #ece8e6);
    background: -ms-linear-gradient(top,  #fbfaf4,  #ece8e6);
    background: linear-gradient(top,  #fbfaf4,  #ece8e6);
    border: 1px solid #dcd9d8;
    border-bottom: 1px solid #c1c1bd;
    -webkit-box-shadow: 0 0 1px #c7c5c1;
    -moz-box-shadow: 0 0 1px #c7c5c1;
    box-shadow: 0 0 1px #c7c5c1;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
    font-size: 0em;
}
a.bt-samp4:hover { /*マウスホバー時*/
  color:#9a9f9f;
  background: #fbfbf9;
}
a.bt-samp4:active{  /* ボタンを押したとき */
  background:#ece8e4;
  border: none;
  box-shadow:  0 1px 1px #cccbc9, inset 0 0 1px rgba(0, 0, 0, 0.3);
}

a.bt-samp5,
a.bt-samp5:hover,
a.bt-samp5:visited{
    display: block;
    height: 80px;
    width: 300px;
    padding-left: 1px;
    text-decoration: none;
    line-height: 20px;
    text-align: center;
    color: #7d8383;
    text-shadow: 0px 1px 0px #fafafa;
    background: #fbfaf4;
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfaf4), to(#ece8e6));
    background: -moz-linear-gradient(top,  #fbfaf4,  #ece8e6);
    background: -o-linear-gradient(top,  #fbfaf4,  #ece8e6);
    background: -ms-linear-gradient(top,  #fbfaf4,  #ece8e6);
    background: linear-gradient(top,  #fbfaf4,  #ece8e6);
    border: 1px solid #dcd9d8;
    border-bottom: 1px solid #c1c1bd;
    -webkit-box-shadow: 0 0 1px #c7c5c1;
    -moz-box-shadow: 0 0 1px #c7c5c1;
    box-shadow: 0 0 1px #c7c5c1;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 41px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
    font-size: 1.3em;
    font-weight: bold;
    padding-top: 20px;
}
a.bt-samp5:hover { /*マウスホバー時*/
  color:#9a9f9f;
  background: #fbfbf9;
}
a.bt-samp5:active{  /* ボタンを押したとき */
  background:#ece8e4;
  border: none;
  box-shadow:  0 1px 1px #cccbc9, inset 0 0 1px rgba(0, 0, 0, 0.3);
}



div#chara_area_top2
{
}

div#chara_area_top2 div.charapanel_top2
{
	width: 1180px;
	height: 1675px;
	position: relative;
}


div#chara_area_tr
{
}

div#chara_area_tr div.charapanel_tr
{
	width: 1180px;
	height: 450px;
	position: relative;
}





div.h5
{
    color: #454545;
    margin-top: 5px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: bold;
}

div#chara_area3
{
}

div#chara_area3 div.charapanel3
{
    width: 1180px;
    position: relative;
    height: 664px;
}

div#chara_area4
{
}

div#chara_area4 div.charapanel4
{
    width: 1180px;
    position: relative;
    height: 834px;
}

div#chara_area6
{
}

div#chara_area6 div.charapanel6
{
    width: 1180px;
    position: relative;
    height: 1134px;
}


div#patch_area
{
}

div#patch_area div.patch_area2
{
    width: 1180px;
    position: relative;
    height: 675px;
}

div#chara_area5
{
}

div#chara_area5 div.charapanel5
{
    width: 1180px;
    position: relative;
    height: 300px;
}


div#cd_vo_area
{
}

div#cd_vo_area div.cd_vo_area
{
    width: 1180px;
    position: relative;
    height: 600px;
}


product_h1
{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.8em;
	color: #920001;
	padding-left: 15px;
}

tr td product_h1 {
	padding-top: 30px;
}

product_h2
{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.4em;
	padding-left: 15px;
	color: #920001;
}

tr td product_h2 {
}


product_h3
{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.2em;
	padding-left: 15px;
	color: #353535;
	padding-top: 10px;
	margin-left: 10px;
}

tr td product_h3 {
}

div#tr_base
{
}

div#tr_base div.tr_base
{
    width: 1180px;
    position: relative;
    height: 400px;
}

div#pc_base
{
}

div#pc_base div.pc_base
{
    width: 1180px;
    position: relative;
    height: 200px;
}

.modal { position:fixed; display:none; z-index:999; top:33%; left:50%; width:600px; height:300px; margin:-120px 0 0 -220px; padding:20px; text-align:center; color:white;}
.modal p { margin-bottom:10px; }
.modal a { cursor:pointer; }

text_fade {
 display:none
}

text_fade2 {
 display:none
}

text_fade3 {
 display:none
}

#headerbox2 {
    position: relative;
    width: 1180px;
    height: 90px;
    left: 0;
    right: 0;
    margin: auto;
    padding-left: 120px;
}

div#menu_area2{
    width: 1180px;
    height: 80px;
    float: right;
    margin-top: 00px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

div#menu_area2 div#menu{
	height: 80px;
}

div.menuslotbg
{
	float:left;
	position:relative;
	height:5pc;
	width:119px;
	background-repeat:no-repeat;
	background-position:0 0
}

/*キャラMENU位置変更用*/
div#menu_area2 div#menu div.menuslot,div#menu_area2 div#menu div.menuslot_light
{
    position: absolute;
    height: 5pc;
    width: 119px;
    background-repeat: no-repeat;
    background-position: 0 0;
    left: 0px;
    top: 0px;
}

div#menu_area2 div#menu div.menuslot a
{
    display:block;
    height:5pc
}

#top_visual_theme {
	width: 1180px;
	min-width: 1180px;
	height: 450px;
	background-image: url(../img/theme_bg.png);
	background-position: top center;
	padding-top: 0px;
}

div.theme
{
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-left: 0px;
	margin-top: 35px;
}

div.theme_lyric
{
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-left: 0px;
	margin-top: 10px;
}


div.basic_padding_sp_teaser
{
	margin-left: 10px;
	margin-top: 0px;
	background-image: url(../img/teaser_bg.png);
	width: 1180px;
	height: 680px;
}

div.teaser
{
	padding-top: 50px;
	margin-left: 0px;
	margin-top: 0px;
	padding-left: 10px;
}

/* =====================================================================
   Responsive cleanup bundle (generated)
   - PC: keep max width 1180px, no horizontal scroll
   - <=1180px: fixed 1180px blocks become fluid
   - <=900px: brand centered, menu wraps and buttons shrink (hover kept)
   ===================================================================== */

:root{
  --site-max: 1180px;
  --gutter: 12px;
}

/* base */
*, *::before, *::after{ box-sizing: border-box; }
img{ max-width: 100%; height: auto; vertical-align: bottom; }

/* header/footer should follow browser width */
#head, #foot, #headerarea{
  width: 100% !important;
  min-width: 0 !important;
}

/* inner containers: fluid with max width */
div.view,
div.character_view,
#headerbox,
#headerbox2{
  width: 100% !important;
  max-width: var(--site-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* background headers */
#headerarea{
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
#foot{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* kill remaining min-width that forces horizontal scrolling */
#top_visual_theme{ min-width: 0 !important; }

/* =====================================================================
   1180px fixed background blocks -> fluid
   ===================================================================== */
@media (max-width: 1180px){

  /* common fixed-width panels */
  .basic_padding_what,
  .basic_padding_sp_CONTENTS,
  .basic_padding_gallery,
  .basic_padding_form,
  .basic_padding_story,
  .basic_padding_about,
  .basic_padding_sp_teaser,
  .basic_padding_special,
  #top_visual_theme,

  /* many chara panels */
  div#chara_area div.charapanel,
  div#chara_area_tr div.charapanel_tr,
  div#chara_area_top div.charapanel_top,
  div#chara_area_top_400 div.charapanel_top_400,
  div#chara_area_top_550 div.charapanel_top_550,
  div#chara_area_top_900 div.charapanel_top_900,
  div#chara_area_top_1130 div.charapanel_top_1130,
  div#chara_area_top_1500 div.charapanel_top_1500,
  div#chara_area_top_1600 div.charapanel_top_1600,
  div#chara_area_top_2400 div.charapanel_top_2400,
  div#chara_area_top_3180 div.charapanel_top_3180,
  div#chara_area_top_mv div.charapanel_top_mv,
  div#chara_area_top_834 div.charapanel_top_834,
  div#chara_area_top2 div.charapanel_top2,
  div#chara_area_top3 div.charapanel_top3,
  div#chara_area3 div.charapanel3,
  div#chara_area4 div.charapanel4,
  div#chara_area5 div.charapanel5,
  div#chara_area6 div.charapanel6,
  div#patch_area div.patch_area2,
  div#tr_base div.tr_base,
  div#pc_base div.pc_base,
  div#cd_vo_area div.cd_vo_area{
    width: 100% !important;
    max-width: var(--site-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* background images: keep whole image visible */
  .basic_padding_what,
  .basic_padding_sp_CONTENTS,
  .basic_padding_gallery,
  .basic_padding_form,
  .basic_padding_story,
  .basic_padding_about,
  .basic_padding_sp_teaser,
  .basic_padding_special,
  #top_visual_theme,
  div[id^="chara_area_"] div[class^="charapanel"],
  div[id^="chara_area_"] div[class*=" charapanel"],
  div#patch_area div.patch_area2,
  div#tr_base div.tr_base,
  div#pc_base div.pc_base{
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain; /* no cropping */
  }

  /* optional: background-only panels shrink in height too (ratio based) */
  .basic_padding_what{ height: auto !important; aspect-ratio: 1180 / 900; }
  .basic_padding_sp_CONTENTS{ height: auto !important; aspect-ratio: 1180 / 834; }
  #top_visual_theme{ height: auto !important; aspect-ratio: 1180 / 450; }
  .basic_padding_sp_teaser{ height: auto !important; aspect-ratio: 1180 / 680; }
}

/* =====================================================================
   Menu: keep PC original; shrink + wrap under 900px
   (works with your HTML structure: .menuslotbg > a > .menuslot/.menuslot_light)
   ===================================================================== */
@media (max-width: 900px){

  /* brand centered */
  #headerbox{
    height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  #headerbox #brand{
    position: static !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 0 10px 0 !important;
    z-index: 10;
  }
  #headerbox #brand img{
    width: 72px;
    height: auto;
    max-width: 100%;
  }

  /* menu area becomes fluid */
  #menu_area,
  #menu_area2,
  #characterselect_area{
    float: none !important;
    width: 100% !important;
    overflow: visible !important;
    height: auto !important;
    margin-top: 0 !important;
  }

  #menu_area #menu,
  #menu_area2 #menu{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px;
    height: auto !important;
  }

  /* button wrapper shrinks */
  #menu_area .menuslotbg,
  #menu_area2 .menuslotbg{
    float: none !important;
    position: relative !important;
    width: clamp(78px, 18vw, 119px) !important;
    aspect-ratio: 119 / 80; /* original 119px x 5pc (80px) */
    height: auto !important;
  }

  /* make anchor full clickable area */
  #menu_area .menuslotbg > a,
  #menu_area2 .menuslotbg > a{
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
  }

  /* normal/hover images fit the box */
  #menu_area .menuslot,
  #menu_area .menuslot_light,
  #menu_area2 .menuslot,
  #menu_area2 .menuslot_light{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* hover swap (only under 900px to avoid interfering with existing PC behavior) */
  #menu_area .menuslot_light,
  #menu_area2 .menuslot_light{ opacity: 0; }
  #menu_area .menuslotbg:hover .menuslot_light,
  #menu_area2 .menuslotbg:hover .menuslot_light{ opacity: 1; }
  #menu_area .menuslotbg:hover .menuslot,
  #menu_area2 .menuslotbg:hover .menuslot{ opacity: 0; }
}

/* even narrower: make buttons a bit larger for tap */
@media (max-width: 600px){
  #menu_area .menuslotbg,
  #menu_area2 .menuslotbg{
    width: clamp(120px, 45vw, 160px) !important;
  }
}

/* ======================================
   Narrow footer: push text slightly down
   ====================================== */
@media (min-width: 950px) and (max-width: 1050px){

  #foot table{
    margin-top: 50px !important;   /* ← 下げる量（調整OK） */
  }
}


@media (max-width: 950px){
  /* フッター内のテーブルを少し下げる */
  #foot table{
    margin-top: 35px !important;  /* ←ここで下がる量を調整（例: 20〜40px） */
    margin-bottom: 0 !important;
  }
}

/* さらに狭い場合はもう少し下げる */
@media (max-width: 600px){
  #foot table{
    margin-top: 60px !important;
  }
}

/* ======================================
   Footer font size adjust under 600px
   ====================================== */

@media (max-width: 600px){

  #foot{
    font-size: 8px;   /* 全体を小さく */
  }

  #foot td{
    font-size: 8px;   /* table使用時の保険 */
    line-height: 1.5;
  }

  /* もしコピーライトが別IDなら */
  #foot small{
    font-size: 11px;
  }
}


/* ======================================
   Narrow screen: push body downward
   ====================================== */

@media (max-width: 900px){
  #body{
    padding-top: 140px !important;   /* ←下げる量（調整OK） */
  }
}

@media (max-width: 600px){
  #body{
    padding-top: 300px !important;   /* さらに狭い時は多めに */
  }
}

/* ======================================
   Modal fix: responsive + stable centering
   ====================================== */

.modal{
  position: fixed !important;
  display: none;               /* 既存挙動維持 */
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: min(400px, 92vw) !important;  /* 画面に収める */
  height: auto !important;             /* 固定高さをやめる */
  max-height: 80vh !important;         /* 画面からはみ出さない */
  overflow: auto !important;           /* 中身が長い時スクロール */

  margin: 0 !important;                /* 負のmargin無効化 */
  padding: 20px !important;
  box-sizing: border-box !important;

  z-index: 9999 !important;            /* 前面に */
  text-align: center;
}

/* さらに狭い時は余白を少しだけ減らす */
@media (max-width: 600px){
  .modal{ padding: 14px !important; }
}

/* ======================================
   Modal: responsive + correct centering
   ====================================== */
.modal{
  position: fixed !important;
  display: none; /* 既存挙動維持 */
  z-index: 9999 !important;

  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: min(600px, 92vw) !important;  /* 600px上限、狭い時は縮む */
  height: auto !important;             /* 固定高さをやめる */
  max-height: 80vh !important;         /* 画面からはみ出さない */
  overflow: auto !important;           /* 長文は中でスクロール */

  margin: 0 !important;                /* 負のmarginを無効化 */
  padding: 20px !important;
  box-sizing: border-box !important;

  text-align: center;
  color: white;
}

@media (max-width: 600px){
  .modal{ padding: 14px !important; }
}
/* ======================================
   CLEAN TOP MV (stable version)
   ====================================== */

/* 元キャンバス */
#chara_area_top_mv .charapanel_top_mv{
  width: 1180px;
  height: 1655px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

/* 縮小対象 */
#chara_area_top_mv .mv_scale{
  width: 1180px;
  height: 1655px;
  position: relative;
  transform-origin: top left;
}

/* 独自タグをブロック化（幅固定しない） */
#chara_area_top_mv text_fade,
#chara_area_top_mv text_fade2{
  display: block;
}

/* 画像は原寸（拡大させない） */
#chara_area_top_mv text_fade img,
#chara_area_top_mv text_fade2 img{
  display: block;
  width: auto;
  max-width: none;
  height: auto;
}

/* 1180px以下で縮小 */
@media (max-width: 1180px){

  #chara_area_top_mv .charapanel_top_mv{
    width: 100%;
    max-width: 1180px;
    height: auto;
    aspect-ratio: 1180 / 1655;
  }

}


/* ======================================
   td.head font size under 600px
   ====================================== */

@media (max-width: 600px){

  td.head{
    font-size: 8px !important;   /* 好きなサイズに調整 */
    line-height: 1.4;
  }
	
  td.base{
    font-size: 8px !important;   /* 好きなサイズに調整 */
    line-height: 1.4;
  }

}

/* ======================================
   >=901px: logo left fixed + menu centered to header (screen center)
   ====================================== */
@media (min-width: 900px){

  /* ヘッダーを基準にする */
  #headerbox{
    position: relative !important;
  }

  /* ロゴ：左固定（absoluteのままでもOK。念のため前面） */
  #headerbox #brand{
    position: absolute !important;
    left: 66px !important;
    top: 43px !important;
    z-index: 30 !important;
  }

  /* メニュー領域：ヘッダーの中央に固定 */
  #menu_area{
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;

    float: none !important;
    width: auto !important;
    overflow: visible !important;
    z-index: 20 !important;
  }

  /* メニュー本体は中央寄せ＋横並び */
  #menu_area #menu{
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    height: auto !important;
  }

  /* ボタン枠のfloat解除 */
  .menuslotbg{
    float: none !important;
  }
}

/* ======================================
   900〜1050px: add 50px space to menu side
   ====================================== */
@media (min-width: 900px) and (max-width: 1050px){

  #menu_area{
    left: calc(50% + 50px) !important;  /* ←中央から右へ50px */
  }

}
/* ======================================
   Remove horizontal gaps between menu buttons
   ====================================== */
#menu_area #menu{
  gap: 0 !important;              /* flexの隙間をゼロ */
}

#menu_area #menu .menuslotbg{
  margin: 0 !important;           /* 外側の余白ゼロ */
  padding: 0 !important;
}



/* ======================================
   menu_area2: do NOT shrink under 900px
   ====================================== */
@media (max-width: 900px){

  /* もしflex化しているなら解除して元の並びに戻す */
  #menu_area2 #menu{
    display: block !important;      /* 元がfloat前提ならこれ */
    gap: 0 !important;
    height: auto !important;
  }

  /* 枠を元サイズに固定（元の 119px/5pc 想定） */
  #menu_area2 .menuslotbg{
    width: 119px !important;
    height: 5pc !important;
    float: left !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
  }

  /* ボタン本体も元サイズに固定（縮小用の 100% 指定を殺す） */
  #menu_area2 .menuslot,
  #menu_area2 .menuslot_light{
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 119px !important;
    height: 5pc !important;

    background-size: auto auto !important;   /* ←縮小しない */
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
  }

  /* クリック領域 */
  #menu_area2 .menuslotbg > a{
    display: block !important;
    width: 119px !important;
    height: 5pc !important;
  }
}


/* ======================================
   >=900px: menu_area2 keep horizontal row
   ====================================== */
@media (min-width: 900px){

  /* キャラメニュー側の #menu だけ横並びに固定 */
  #headerbox2 #menu_area2 > #menu{
    display: flex !important;
    flex-direction: row !important;   /* 念のため */
    flex-wrap: nowrap !important;     /* 1列にしたい場合 */
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;                /* 隙間不要なら0 */
  }

  /* floatが残っていても悪さしないように無効化してflexに任せる */
  #headerbox2 #menu_area2 .menuslotbg{
    float: none !important;
    display: block;
  }
}

/* ======================================
   >=900px: reduce menu button spacing
   ====================================== */
@media (min-width: 900px){

  /* キャラ側メニュー（menu_area2） */
  #headerbox2 #menu_area2 > #menu{
    gap: 4px !important;   /* ← ここを0〜6pxで調整 */
  }

  #headerbox2 #menu_area2 .menuslotbg{
    margin: 0 2px !important;   /* 左右の微調整 */
    padding: 0 !important;
  }

  /* 上部ヘッダーメニューも詰めたい場合 */
  #headerbox #menu_area > #menu{
    gap: 4px !important;
  }

}


/* ======================================
   >=900px: center character menu buttons
   ====================================== */
@media (min-width: 900px){

  /* キャラ側メニューだけ中央揃え */
  #headerbox2 #menu_area2 > #menu{
    display: flex !important;
    justify-content: center !important;  /* ← 中央揃え */
    align-items: center;
    flex-wrap: wrap;                     /* 1列に収まらなければ折り返す */
    gap: 0;                              /* 隙間は必要なら調整 */
  }

  /* floatを無効化（横並びをflexに任せる） */
  #headerbox2 #menu_area2 .menuslotbg{
    float: none !important;
    margin: 0 !important;
  }
}


/* ======================================
   >=900px: truly center menu_area2
   ====================================== */
@media (min-width: 900px){

  #headerbox2{
    padding-left: 0 !important;  /* ← 左余白を解除 */
  }

  #headerbox2 #menu_area2{
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
  }

  #headerbox2 #menu_area2 > #menu{
    display: flex !important;
    justify-content: center !important;
  }
}

/* ======================================
   <=900px: add 90px margin above chara_area_top_900
   ====================================== */
@media (max-width: 900px){
  #chara_area_top_900{
    margin-top: 90px !important;
  }
}

/* ======================================
   FIX: chara_area_top_900 scale (keep coords) + prevent disappearing
   base: 1180 x 834
   ====================================== */

/* 念のため overflow も付ける（はみ出し防止） */
#chara_area_top_900 .charapanel_top_900{
  overflow: hidden;
}

/* 縮小ラッパー：高さが0にならないように固定 */
#chara_area_top_900 .mv900_scale{
  width: 1180px;
  height: 834px;
  position: relative;
  transform-origin: top left;
}

/* 900px以下で等比縮小（座標維持） */
@media (max-width: 900px){

  /* 外枠は横幅に合わせる＋見た目の高さを確保 */
  #chara_area_top_900 .charapanel_top_900{
    width: 100% !important;
    max-width: 1180px;
    height: auto !important;
    aspect-ratio: 1180 / 834; /* ←ここが重要 */
    margin-left: auto;
    margin-right: auto;
  }

}
/* ======================================
   chara_area_top_900: keep coords + NO disappearing (safe scaling)
   base: 1180 x 834
   ====================================== */

#chara_area_top_900 .charapanel_top_900{
  overflow: hidden;
}

/* ラッパーは必ず“見える状態”に固定 */
#chara_area_top_900 .mv900_scale{
  display: block !important;
  visibility: visible !important;
  width: 1180px;
  height: 834px;
  position: relative;
  transform-origin: top left;
}

/* 900px以下：まず900基準で縮小（900/1180=0.763） */
@media (max-width: 900px){
  #chara_area_top_900 .charapanel_top_900{
    width: 100% !important;
    max-width: 1180px;
    height: auto !important;
    aspect-ratio: 1180 / 834;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ======================================
   FIX: prevent bottom clipping of top_900 under 900px
   ====================================== */
@media (max-width: 900px){
  #chara_area_top_900 .charapanel_top_900{
    min-height: 637px !important;  /* 834 * (900/1180) ≒ 637 */
    overflow: visible !important;   /* 切れるのを防ぐ（必要なら） */
  }
}

/* ======================================
   Mobile: header/footer right side clipping fix
   ====================================== */
@media (max-width: 900px){

  /* ヘッダー/フッターを画面幅に合わせる（1180前提を解除） */
  #headerarea,
  #head,
  #foot{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* 背景画像が“切れて見える”時の定番対策 */
  #head,
  #foot{
    background-size: cover !important;     /* 画面幅にフィット */
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }

  /* フッター内のtableが幅をはみ出してる場合の保険 */
  #foot table{
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /* 画像もはみ出し防止（ロゴ等） */
  #headerarea img,
  #head img,
  #foot img{
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 900px){
  html, body{ overflow-x: clip; } /* hiddenよりマシ。対応悪ければ下の行だけでもOK */
  /* もしくは bodyだけ hidden を外す */
  body{ overflow-x: visible; }
}
/* ======================================
   chara_area_top_900
   90%縮小 + 正しく中央（箱の幅も縮小後に合わせる）
   base: 1180 x 834
   ====================================== */

#chara_area_top_900{
  display: flex;
  justify-content: center;
}

/* 外枠：縮小後の“実寸”に合わせる */
#chara_area_top_900 .charapanel_top_900{
  width: calc(1180px * var(--mv900-scale, 1));
  height: calc(834px  * var(--mv900-scale, 1));
  position: relative;
  overflow: hidden;
}

/* 中身：左上基準で縮小（座標維持） */
#chara_area_top_900 .mv900_scale{
  width: 1180px;
  height: 834px;
  position: relative;
  transform-origin: top left;
  transform: scale(var(--mv900-scale, 1));
}



/* ======================================
   Mobile fix (<=900px): layout stabilize
   ====================================== */
@media (max-width: 900px){

  /* コンテンツ枠：固定幅/固定高さを解除 */
  div.character_view{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 10px !important;      /* 端の余白 */
    box-sizing: border-box;
  }

  /* キャラメニュー枠：1180固定＆左padding解除 */
  #headerbox2{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding-left: 0 !important;
    margin: 0 auto !important;
  }

  /* キャラメニュー：右float/固定幅/hidden を解除して中央へ */
  #menu_area2{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
    overflow: visible !important;
    margin: 0 auto !important;
  }

  /* #menu はID重複してるので「menu_area2配下だけ」指定 */
  #headerbox2 #menu_area2 > #menu{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    height: auto !important;
    gap: 0 !important;
  }

  #headerbox2 #menu_area2 .menuslotbg{
    float: none !important;
    margin: 0 !important;
  }

  /* charapanel_top_900：中央寄せ（縮小はあなたの scale 方式に任せる） */
  #chara_area_top_900{
    display: flex !important;
    justify-content: center !important;
  }
}

/* ======================================
   MOBILE FIX FINAL (<=900px)
   - menu_area2 を中央＆折返し
   - 固定幅/float系の競合を強制解除
   ====================================== */
@media (max-width: 900px){

  /* コンテンツ枠の固定幅(75pc=1200px)を解除 */
  div.view,
  div.character_view{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  /* キャラメニュー枠：1180固定＆左padding解除 */
  #headerbox2{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding-left: 0 !important;
    position: relative !important;
  }

  /* menu_area2：float/hidden/固定幅を殺す */
  #menu_area2{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
    overflow: visible !important;
    margin: 0 auto !important;
  }

  /* ここが重要：#menu(重複ID)でも menu_area2 配下だけ確実にflex化 */
  #headerbox2 #menu_area2 > #menu{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    height: auto !important;
    gap: 0 !important;
  }

  /* float前提を完全に無効化 */
  #headerbox2 #menu_area2 .menuslotbg{
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    width: 119px !important;     /* まずは元サイズ維持（タップしやすい） */
    height: 5pc !important;
  }

  /* 中身の absolute も “枠いっぱい” に */
  #headerbox2 #menu_area2 .menuslot,
  #headerbox2 #menu_area2 .menuslot_light{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: 100% 100% !important;
  }
}


/* ======================================
   chara_area_top_900: center correctly with scale var
   ====================================== */
#chara_area_top_900{
  display: flex !important;
  justify-content: center !important;
}

#chara_area_top_900 .charapanel_top_900{
  margin-left: auto !important;
  margin-right: auto !important;
}