@charset "utf-8";

/*android用font-family: 'Noto Serif JP', serif;*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;700&display=swap');

:root{
	--blue:#2750c7;
	--pink:#e81f6c;
	--purple:#4e2b53;
	--mizuiro:#c5cbea;
	--gold:#a39272;
	--daishiW:#f0f3fa;
	--daishiP:#eed5d8;
}

body {
	/*ゴシックfont-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;*/
	/*明朝*/font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", 'Noto Serif JP', serif;
	color: #333;
	font-size: 16px;
	font-weight: normal;
	line-height: 1.5;
	background-color: var(--daishiW);
	background-image: url("../img/bg.jpg"); 
	background-position: center top;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
hr {
	border-color: #ccc;
}
h2 {
	text-align: center;
}
h2.top {
}
h2.second {
	padding: 5% 0 3% 0;
}
h2 img {
	display: block;
	width: 100%;
	margin: auto;
}
h2.top img {
	max-width: 500px;
}
h2.second img {
	max-width: 1000px;
}
h3 {
	text-align: center;
}
h3 img {
	display: block;
	width: 100%;
	max-width: 900px;
	margin: auto;
}
.view-pc {
	display: block;
}
.view-sp {
	display: none;
}
.paddBoxA {
	padding: 0 3% 3% 3%;
}
.paddBoxB {
	padding: 3%;
}



/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	width: 60px;
	height: 60px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	transition:all 0.3s;
}

#page-top a:hover{
	opacity: 0.7;
}
#page-top a img {
	display: block;
	width: 100%;
}
/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 999;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}




/* hearder
---------------------------------------------*/
header {
	box-sizing: border-box;
	z-index: 9999;
	display: block;
	/*position: fixed;*/
	font-size: 16px;
	color: #000;
	font-weight: bold;
	background-color: var(--daishiW);
	background-image: url("../img/line.jpg");
	background-repeat: repeat-x;
	background-position: center bottom;
	width: 100%;
	padding-bottom: 16px;
	border-top: solid 5px var(--blue);
}
.navnon {
	text-decoration: line-through;
	opacity: 0.3;
	cursor: normal;
}
#g-nav {
	box-sizing: border-box;
	display: block;
	position: relative;
	width: 100%;
	padding: 5px;
}

/*ナビゲーションの縦スクロール*/
#g-nav-list {
	/*ナビの数が増えた場合縦スクロール*/
	position: relative;
}

/*ナビゲーション*/
#g-nav ul {
	display: block;
	position: relative;
	text-align: center;
}

#g-nav li {
	display: inline-block;
	position: relative;
	text-indent: 0;
	padding-left: 0;
}

#g-nav li a {
	color: var(--blue);
	line-height: 1;
	text-decoration: none;
	padding: 15px 10px;
	border: none;
	display: block;
}

/*========= ボタンのためのCSS ===============*/
.openbtn {
	display: none;
}

#g-nav li a small {
	display: block;
	font-size: 10px;
}
#g-nav li a span {
	position: absolute;
	right: 10px;
	line-height: 1;
	top: 0;
	left: 10px;
	color: #fff;
	font-size: 10px;
	text-align: center;
	background: #c00;
	padding: 2px;
	border-radius: 3px;
}
#g-nav li a:not(.navnon):hover {
	color: var(--pink);
}
#g-nav .select {
	color: var(--blue);
	text-shadow: 0 0 5px var(--blue);
}



/* footer
---------------------------------------------*/
footer {
	font-size: 12px;
	font-weight: normal;
	text-align: center;
	background-color: var(--daishiW);
	background-image: url("../img/line.jpg");
	background-repeat: repeat-x;
	background-position: center top;
	padding: 40px 3% 3% 3%;
}
footer a {
	text-decoration: none;
	border: none;
}
footer #snsBox,
footer #companyBox {
	padding: 10px 0;
}
footer #snsBox a {
	display: inline-block;
	vertical-align: bottom;
	width: 40px;
	margin: 5px;
}
footer #snsBox a img,
footer #companyBox a img {
	display: block;
	width: 100%;
}
footer #companyBox a {
	box-sizing: border-box;
	display: inline-block;
	color: #fff;
	width: 30%;
	max-width: 175px;
	padding: 0;
	margin: 3px;
	border: solid 1px #fff;
}
.hardlogo {
	display: inline-block;
	height: 60px;
	margin: 5px;
}
.notice {
	display: block;
	width: 100%;
	margin: auto;
}



/* subnav
---------------------------------------------*/
#subnav {
	text-align: center;
	background: rgba(255,255,255,0.5);
	padding: 10px;
}
#subnav a {
	display: inline-block;
	color: #fff;
	line-height: 1;
	background: #666;
	padding: 5px 10px;
	margin: 2px;
	border: double 3px #fff;
	border-radius: 5px;
}
#subnav a:hover {
	background: var(--blue);
}
#subnav a.select {
	background: var(--pink);
}
#subnav a span {
	display: inline-block;
	vertical-align: middle;
	font-size: 10px;
	background: #c00;
	padding: 1px 5px;
	margin-right: 5px;
}




/* top
---------------------------------------------*/
#visual {
	display: block;
	position: relative;
	background-image: url("../img/line.jpg");
	background-repeat: repeat-x;
	background-position: center bottom;
	padding-bottom: 16px;
}
#visual #dendo {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 33%;
	max-width: 400px;
}
#visual #dendo img {
	display: block;
	width: 100%;
}
.bannerArea {
	text-align: center;
	padding: 3%;
}
.bannerArea a {
	box-sizing: border-box;
	display: inline-block;
	width: 30%;
	max-width: 500px;
	margin: 0.5%;
	border: solid 1px var(--blue);
}
.bannerArea a.voteBanner {
	display: block;
	width: 100%;
	max-width: 890px;
	margin: auto;
}
.bannerArea img {
	display: block;
	width: 100%;
}
#widgetSet h2,
.specBox h2 {
	position: relative;
	color: var(--blue);
	font-size: 36px;
	line-height: 1;
	font-weight: bold;
	text-align: center;
	margin-bottom: 1em;
	border-bottom: double 3px var(--mizuiro);
}
#widgetSet {
	box-sizing: border-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	width: 100%;
	max-width: 1200px;
	padding: 3%;
	margin: auto;
}
.widget {
	box-sizing: border-box;
	background-color: var(--daishiW);
	background-image: url("../img/icon_lt.png"), url("../img/icon_rt.png"), url("../img/icon_lb.png"), url("../img/icon_rb.png");
	background-repeat: no-repeat;
	background-position: left top, right top, left bottom, right bottom;
	background-size: 100px auto;
	width: 44%;
	padding: 3%;
	margin: 3%;
	border: double 3px var(--mizuiro);
	box-shadow: 0 0 5px #666;
}
#newsbox {
	line-height: 1.5;
	max-height: 300px;
	overflow: auto;
}
#newsbox dt {
	color: var(--pink);
}
#newsbox dd {
	padding-bottom: 10px;
	margin: 5px 0 10px 0;
	border-bottom: dotted 1px var(--mizuiro);
}
#newsbox .newsnon,
#newsbox a {
	display: block;
	color: #333;
	text-decoration: none;
	text-indent: -1em;
	padding-left: 1em;
	border: none;
}
#newsbox a::before {
	content: "◆";
	color: var(--mizuiro);
}
#newsbox a:not(.newsnon):hover {
	color: var(--blue);
}
#newsbox .newsnon {
	text-decoration: none;
	cursor: nomal;
}
.specBox {
	box-sizing: border-box;
	background-color: rgba(255,255,255,0.5);
	width: 100%;
	padding: 3%;
}
.specBoxIn {
	box-sizing: border-box;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	width: 100%;
	max-width: 1200px;
	padding: 3%;
	margin: auto;
}
.specBoxIn div {
	box-sizing: border-box;
	width: 50%;
	padding: 15px;
}
.specBoxIn table {
	width: 100%;
}
.specBoxIn th,
.specBoxIn td {
	padding: 5px 10px;
	border-bottom: solid 1px #fff;
}
.specBoxIn th {
	text-align: center;
	background: var(--mizuiro);
	width: 33%;
}
.specBoxIn tr {
}
.specBoxIn .package {
	display: block;
	width: 100%;
	max-width: 500px;
	margin: auto;
}



/* world
---------------------------------------------*/
#storyTxt {
	font-size: 20px;
	text-align: center;
	background-image: url("../world/img/storybg.png");
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center top;
	padding: 0 5% 5% 5%;
	text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
}
#storyTxt strong {
	color: var(--pink);
	font-weight: bold;
}
.wMap {
	box-sizing: border-box;
	background-color: rgba(255,255,255,0.5);
	/*background-image: url(../world/img/world_map_bottom.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% auto;*/
	width: 100%;
	max-width: 1000px;
	padding: 3%;
	margin: auto auto 1em auto;
	border-radius: 10px;
	box-shadow: 0px 0px 5px #666;
}
.wMap img {
	display: block;
	width: 100%;
	margin: auto;
}
.wMap p {
	box-sizing: border-box;
	text-align: center;
	padding-top: 3%;
}
.wTBox {
	box-sizing: border-box;
	background-image: url(../img/bg_pp.jpg);
	width: 100%;
	max-width: 1000px;
	margin: auto;
	position: relative;
	box-shadow: 0px 0px 5px #666;
}
.world2col {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}
.world2col .worldImg,
.world2col .worldTxt {
	box-sizing: border-box;
	width: 50%;
}
.world2col .worldImg {
	padding: 3%;
}
.world2col .worldTxt {
	padding: 3% 3% 3% 0;
}
.world2col img {
	display: block;
	width: 100%;
	max-width: 500px;
	margin: auto;
}
.world1col {
}
.world1col div {
	box-sizing: border-box;
	padding: 3%;
}
.world1col div img {
	display: block;
	width: 100%;
	margin: auto;
}



/* character
---------------------------------------------*/
#charaJun {
  display: flex;
  flex-direction: column;
}
#charanav {
	text-align: center;
	background: rgba(255,255,255,0.5);
	padding: 10px;
}
#charanav a {
	position: relative;
	display: inline-block;
	background-image: url("../chara/img/navi/cnavi.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center bottom;
	opacity: 0.7;
}
#charanav a:hover {
	opacity: 1;
}
#charanav a.select {
	background-position: center top;
	opacity: 1;
}
#charanav a span {
	position: absolute;
	left: 0;
	top: 0;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	background: #c00;
	padding: 1px 3px;
	border-radius: 3px;
}
.charaAll {
	position: relative;
}
.charaBox {
	position: relative;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% auto;
	width: 100%;
	max-width: 1000px;
	margin: auto;
	z-index: 5;
}
.charaImg {
	position: relative;
}
.charaImg .cPic {
	display: block;
	position: relative;
	width: 100%;
}
.charaImg .cPic img {
	display: block;
	width: 100%;
}
.charaImg .cPic img.cPic1 {
	opacity: 1;
}
.charaImg .cPic img.cPic2 {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.charaImg .cTI {
	position: absolute;
	top: 15px;
	right: 15px;
	display: block;
	width: 15%;
	max-width: 150px;
}
.cTxtBox {
	position: absolute;
	top: 21%;
	left: 0;
	box-sizing: border-box;
	width: 40%;
	padding: 5% 3%;
	margin-left: 10%;
}
.charaBg {
	position: absolute;
	top: 20.7%;
	left: 0;
	right: 0;
	background-color: rgba(255,255,255,0.7);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: auto 100%;
	height: 60%;
	border-top: double 5px var(--gold);
	border-bottom: double 5px var(--gold);
	z-index: 1;
}
.sabun {
	box-sizing: border-box;
	display: block;
	color: #fff;
	font-size: 20px;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	width: 250px;
	height: 50px;
	padding: 10px 30px;
	margin-top: 1em;
	cursor: pointer;
}

#voice {
	text-align: center;
	width: 100%;
	margin-top: 1em;
	border-top: double 1px var(--gold);
	border-bottom: double 1px var(--gold);
}
#voice a {
	position: relative;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: bottom;
	text-decoration: none;
	background-image: url(../chara/img/sv/svbg_off.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 30%;
	max-width: 83px;
	margin: 2px;
	cursor: pointer;
}
#voice a:hover {
	background-image: url(../chara/img/sv/svbg_on.png);
}
#voice .play-bt {
	background-image: url(../chara/img/sv/svbg_off.png);
}
#voice .stop-bt {
	background-image: url(../chara/img/sv/svbg_on.png);
}
#voice a img {
	display: block;
	width: 100%;
}





/* gallery
---------------------------------------------*/
#cgNavi {
	text-align: center;
	background: rgba(255,255,255,0.5);
	padding: 10px;
}
#cgNavi .select {
	border: solid 3px var(--pink);
}
#cgNavi a {
	position: relative;
	box-sizing: border-box;
	display: inline-block;
	cursor: pointer;
	width: 22%;
	max-width: 80px;
	margin: 2px;
	border: solid 3px #666;
	vertical-align: bottom;
}
#cgNavi a:hover {
	border: solid 3px var(--blue);
}
#cgNavi a img {
	display: block;
	width: 100%;
}
#cgNavi a span {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	color: #fff;
	font-size: 8px;
	text-align: center;
	background: #c00;
}
.txtC0 {
	color: #ff5064;
}
.txtC1 {
	color: #666666;
}
.txtC2 {
	color: #8a8000;
}
.txtC3 {
	color: #eb6100;
}
.txtC4 {
	color: #00479d;
}
.txtC5 {
	color: #29b06e;
}
.txtC6 {
	color: #a40000;
}
.txtC10 {
	color: #6a3906;
}
.cgBox {
	box-sizing: border-box;
	background-image: url(../img/bg_pp.jpg);
	width: 100%;
	max-width: 1000px;
	padding: 3%;
	margin: auto;
}
.cgBox img {
	display: block;
	width: 100%;
	max-width: 720px;
	margin: auto auto 3% auto;
}
.cgBox p {
}



/* system
---------------------------------------------*/
.sysTitle {
	color: #1E45D1;
	font-size: 22px;
	line-height: 1.3;
	font-weight: bold;
	text-align: center;
	padding: 3% 0 0 0;
	margin: 0 15px;
	border-bottom: dotted 1px #1E45D1;
}
.sysTitle::before,
.sysTitle::after {
	content: "◆";
}
.psVita {
	text-align: center;
	margin-top: 1em;
}
.slick {
	color: #fff;
	width: 100%;
	max-width: 500px;
	margin: auto;
}
.slick small {
	display: block;
	font-size: 14px;
	color: #fff;
	text-align: center;
	background: var(--blue);
}




/* sound
---------------------------------------------*/
.bgmBox {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}
.bgmBox div {
	box-sizing: border-box;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	background: var(--blue);
	width: 48%;
	padding: 3%;
	margin: 1%;
	border: double 3px #fff;
	border-radius: 10px;
}
.bgmBox div p {
	margin-bottom: 10px;
}
.songBox {
	width: 100%;
	max-width: 1000px;
	margin: auto;
}
#opedBox {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: stretch;
	align-items: stretch;
}
#opedBox div {
	box-sizing: border-box;
	text-align: center;
	background: rgba(255,255,255,0.7);
	width: 48%;
	padding: 3%;
	margin: 1%;
}
#opedBox div strong {
	display: block;
	font-size: 30px;
	font-weight: bold;
}
#opedSeisaku {
	box-sizing: border-box;
	text-align: center;
	background: rgba(255,255,255,0.3);
	width: 98%;
	padding: 3%;
	margin: 1% auto auto auto;
	border: dotted 2px #fff;
}
.comeBox {
	font-size: 14px;
	line-height: 1.5;
	background: rgba(255,255,255,0.5);
	padding: 5%;
	margin-top: 5%;
}
.comeBox strong {
	display: block;
	padding: 5px;
	margin-bottom: 5px;
	border-top: dotted 1px #666;
	border-bottom: dotted 1px #666;
}
.songPhoto img {
	width: 100%;
	max-width: 380px;
	margin: 10px auto 1em auto;
}
.song2col {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}
.song2col div {
	box-sizing: border-box;
}
.song2col div.songPhoto {
	width: 40%;
}
.song2col div.songTxt {
	width: 60%;
	padding-left: 15px;
}
.song2col div img {
	display: block;
	width: 100%;
	max-width: 380px;
	margin: auto;
}
.songTxt span , .songTxtOnly span {
	font-weight: bold;
}
#cdTokuten {
	padding: 15px;
	background-color: rgba(255,255,255,0.5);
}
.cdBox {
	box-sizing: border-box;
	width: 100%;
	padding: 15px;
	background-color: rgba(255,255,255,0.5);
	margin: auto;
}
.cdTitle {
	color: #1E45D1;
	font-size: 22px;
	line-height: 1.3;
	font-weight: bold;
	text-align: center;
	margin-bottom: 15px;
	border-bottom: dotted 1px #1E45D1;
}
.songTxt .dan {
	padding-left: 1em;
	text-indent: -1em;
}



/* special
---------------------------------------------*/
.movieCate {
	color: var(--blue);
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	padding: 0.5em;
	width: 100%;
	max-width: 1000px;
	margin: auto;
	border-top: double 3px var(--blue);
	border-bottom: double 3px var(--blue);
}
.movieBox {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: stretch;
	align-items: stretch;
	-webkit-align-content: stretch;
	align-content: stretch;
	max-width: 1000px;
	margin: auto;
}
.movieBox li {
	box-sizing: border-box;
	color: #fff;
	text-align: center;
	background: var(--blue);
	width: 48%;
	margin: 1%;
	border: solid 1px var(--blue);
}
.movieBox li span {
	display: inline-block;
	vertical-align: middle;
	font-size: 10px;
	background: #c00;
	padding: 1px 5px;
	margin-right: 5px;
}
.movieBox img {
	display: block;
	width: 100%;
}
#twiThum,
#tiwThumSwitch {
	box-sizing: border-box;
	text-align: center;
	width: 100%;
	max-width: 1000px;
	margin: auto;
}
#tiwThumSwitch {
	padding-bottom: 15px;
	margin-bottom: 2em;
	border: solid 1px #c00;
}
#tiwThumSwitch span {
	display: block;
	color: #fff;
	background: #c00;
	padding: 5px 10px;
	margin-bottom: 15px;
}
#twiThum img,
#tiwThumSwitch img {
	box-sizing: border-box;
	border: solid 1px #fff;
	width: 110px;
	padding: 1px;
	margin: 2px;
}
#banaTxt {
	width: 100%;
	max-width: 1000px;
	padding-bottom: 5%;
	margin: auto;
}
#banaTxt p {
	background-color: #fff;
	border-radius: 5px;
	padding: 10px;
}
#banner200,
#banner180,
#banner160 {
	text-align: center;
	width: 100%;
	max-width: 1000px;
	margin: auto;
}
#banner200 img,
#banner180 img,
#banner160 img {
	display: inline-block;
	box-sizing: border-box;
	border: solid 1px #fff;
	padding: 1px;
	margin: 3px;
}
#banner200 img {
	width: 200px;
}
#banner180 img {
	width: 180px;
}
#banner160 img {
	width: 160px;
}
#illustVita {
	display: block;
	width: 100%;
	max-width: 1000px;
	margin: auto;
}
.countBN {
	text-align: center;
	width: 100%;
	max-width: 1000px;
	margin: auto;
}
.countBN a {
	box-sizing: border-box;
	display: inline-block;
	color: #fff;
	background: var(--blue);
	width: 30%;
	margin: 0.5%;
	border: solid 1px var(--blue);
}
.countBN img {
	display: block;
	width: 100%;
}



/* info
---------------------------------------------*/
.infoBox {
	width: 100%;
	max-width: 1000px;
	margin: auto;
}
.genyoBox {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}
.genyoBox div {
	box-sizing: border-box;
	width: 50%;
	padding: 3%;
}
.genyoBox img {
	display: block;
	width: 100%;
	max-width: 500px;
	margin: auto;
}
.tokuTitle {
	color: var(--blue);
	font-weight: bold;
	font-size: 20px;
	line-height: 1.3em;
	border-bottom: dotted 2px var(--blue);
	padding-bottom: 5px;
	margin-bottom: 5px;
}
.tenpoAll {
	box-sizing: border-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1000px;
	margin: auto;
}
.tenpoAll .tenpoBox {
	box-sizing: border-box;
	background: #fff;
	width: 49%;
	padding: 15px;
	margin: 0.5%;
	border: solid 2px var(--blue);
	border-radius: 10px;
}
.tenpoTitle {
	color: var(--blue);
	font-weight: bold;
	font-size: 20px;
	line-height: 1.3em;
	border-bottom: dotted 2px var(--blue);
	padding-bottom: 5px;
	margin-bottom: 5px;
}
.tenpoAll .tenpoBox img {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 700px;
	margin: 10px auto;
	border: solid 1px var(--blue);
}
.tenpoAll .tenpoBox strong {
	display: block;
	color: #fff;
	background: var(--blue);
	text-indent: -1em;
	padding: 5px 5px 5px 1.5em;
	margin-top: 0.7em;
	border-radius: 5px;
}
.tenpoAll .tenpoBox dl {
}
.tenpoAll .tenpoBox dt {
	color: var(--blue);
	text-indent: -1em;
	padding-left: 1em;
	margin-top: 5px;
}
.tenpoAll .tenpoBox dt::before {
	content: "・";
}
.tenpoAll .tenpoBox dd {
	font-size: 14px;
	padding-left: 1em;
}
.tenpoAll .tenpoBox a {
	box-sizing: border-box;
	display: block;
	color: var(--blue);
	font-weight: bold;
	text-align: center;
	background: #e0edff;
	padding: 5px;
	margin-bottom: 5px;
	border: double 3px var(--blue);
	border-radius: 5px;
}
.tenpoAll .tenpoBox a:not(.shLnon):hover {
	color: var(--pink);
	background: #f3cedc;
	border: double 3px var(--pink);
}
.tenpoAll .tenpoBox a:nth-of-type(1) {
	margin-top: 1em;
}
.tenpoAll .tenpoBox a.shLnon {
	opacity: 0.5;
}
.tenpoAtt {
	display: block;
	font-size: 12px;
	text-indent: -1em;
	padding-left: 1em;
	margin-top: 5px;
}





#movie {
	box-sizing: border-box;
	width: 100%;
	max-width: 1000px;
	margin: auto;
}
.youtube {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.youtube iframe {
	box-sizing: border-box;
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}







/* ウィンドウ幅が0-767pxの場合に適用するCSS */
@media screen and (max-width:767px){

	body {
		font-size: 14px;
		line-height: 1.5;
		background-size: 200% auto;
	}
	



	/* hearder
	---------------------------------------------*/
	#g-nav{
		/*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
		position: fixed;
		z-index: -1;
		opacity: 0;/*はじめは透過0*/
		/*ナビの位置と形状*/
		top: 0;
		width: 100%;
		height: 0;/*ナビの高さ*/
		background: #fff;
		/*動き*/
		transition: all 0.3s;
	}

	/*アクティブクラスがついたら透過なしにして最前面へ*/
	#g-nav.panelactive {
		opacity: 1;
		z-index: 999;
		height: 100vh;/*ナビの高さ*/
	}

	/*ナビゲーションの縦スクロール*/
	#g-nav.panelactive #g-nav-list {
		/*ナビの数が増えた場合縦スクロール*/
		position: fixed;
		z-index: 999; 
		width: 100%;
		height: 100vh;/*表示する高さ*/
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}

	/*ナビゲーション*/
	#g-nav ul {
		display: none;
		/*ナビゲーション天地中央揃え*/
		position: absolute;
		z-index: 999;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		text-align: center; 
	}

	#g-nav.panelactive ul {
		display: block;
	}

	/*リストのレイアウト設定*/

	#g-nav li {
		display: block;
		list-style: none;
		text-align: center; 
	}

	#g-nav li a {
		text-decoration: none;
		padding: 10px;
		display: block;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		font-weight: bold;
	}

	/*========= ボタンのためのCSS ===============*/
	.openbtn {
		display: block;
		position: fixed;
		z-index: 9999;/*ボタンを最前面に*/
		top: 0;
		right: 0;
		background: var(--blue);
		cursor: pointer;
		width: 50px;
		height: 50px;
	}

	/*×に変化*/	
	.openbtn span{
		display: inline-block;
		transition: all .4s;
		position: absolute;
		left: 14px;
		height: 3px;
		border-radius: 2px;
		background: #fff;
		width: 45%;
	  }

	.openbtn span:nth-of-type(1) {
		top: 15px;	
	}

	.openbtn span:nth-of-type(2) {
		top: 23px;
	}

	.openbtn span:nth-of-type(3) {
		top: 31px;
	}

	.openbtn.active span:nth-of-type(1) {
		top: 18px;
		left: 18px;
		transform: translateY(6px) rotate(-45deg);
		width: 30%;
	}

	.openbtn.active span:nth-of-type(2) {
		opacity: 0;
	}

	.openbtn.active span:nth-of-type(3){
		top: 30px;
		left: 18px;
		transform: translateY(-6px) rotate(45deg);
		width: 30%;
	}

	#g-nav li a span {
		top: auto;
		bottom: 0;
	}




	/* top
	---------------------------------------------*/
	#visual #dendo {
		width: 40%;
	}
	.bannerArea a {
		width: 100%;
	}
	#widgetSet h2,
	.specBox h2 {
		font-size: 30px;
	}
	#widgetSet {
		display: block;
	}
	.widget {
		background-size: 50px auto;
		width: 100%;
		margin: 0 0 10px 0;
	}
	#newsbox {
		max-height: 200px;
	}
	.specBoxIn {
		display: block;
		margin: auto;
	}
	.specBoxIn div {
		box-sizing: border-box;
		width: 100%;
		padding: 15px;
	}
	.specBoxIn th,
	.specBoxIn td {
		display: block;
		width: 100%;
	}
	.specBoxIn th {
	}
	.specBoxIn tr {
	}



	/* world
	---------------------------------------------*/
	#storyTxt {
		font-size: 16px;
		background: none;
	}
	.wMap p {
		text-align: left;
	}
	.world2col {
		display: block;
	}
	.world2col .worldImg,
	.world2col .worldTxt {
		width: 100%;
	}
	.world2col .worldImg {
	}
	.world2col .worldTxt {
		padding: 0 3% 3% 3%;
	}



	/* character
	---------------------------------------------*/
	#charaJun {
	  flex-direction: column-reverse;
	}
	#charanav {
		text-align: center;
		background: rgba(255,255,255,0.5);
		padding: 10px;
	}
	#charanav a {
		display: inline-block;
		background-image: url("../chara/img/navi/cnavi.png");
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: center bottom;
		opacity: 0.7;
	}
	#charanav a:hover {
		opacity: 1;
	}
	#charanav a.select {
		background-position: center top;
		opacity: 1;
	}
	.charaAll {
		position: relative;
	}
	.charaBox {
		padding-top: 25%;
	}
	.charaImg {
		position: relative;
	}
	.charaImg .cPic {
		left: -80%;
		width: 180%;
	}
	.charaImg .cTI {
		position: absolute;
		top: 15px;
		right: 15px;
		display: block;
		width: 30%;
	}
	.cTxtBox {
		position: relative;
		top: 0;
		left: 0;
		box-sizing: border-box;
		background: #fff;
		width: 100%;
		padding: 5%;
		margin-left: 0;
		border-top: double 5px var(--gold);
		border-bottom: double 5px var(--gold);
	}
	.charaBg {
		display: none;
	}




	/* sound
	---------------------------------------------*/
	.bgmBox {
		display: block;
	}
	.bgmBox div {
		font-size: 18px;
		width: 100%;
		margin: 0 0 10px 0;
	}
	#opedBox {
		display: block;
	}
	#opedBox div {
		width: 100%;
		margin: auto auto 10px auto;
	}
	#opedBox div strong {
		font-size: 20px;
	}
	#opedSeisaku {
		width: 100%;
		margin: auto auto auto auto;
	}
	.song2col {
		display: block;
	}
	.song2col div.songPhoto {
		width: 100%;
		margin: 10px 0;
	}
	.song2col div.songTxt {
		width: 100%;
		padding-left: 0;
	}
	.cdTitle {
		font-size: 20px;
	}



	/* special
	---------------------------------------------*/
	.movieBox li {
		width: 100%;
		margin: 10px 0 0 0;
	}
	#twiThum img {
		width: 30%;
		max-width: 110px;
	}
	#banner200 img {
		width: 30%;
		max-width: 200px;
	}
	#banner180 img {
		width: 30%;
		max-width: 180px;
	}
	#banner160 img {
		width: 30%;
		max-width: 160px;
	}
	.countBN a {
		pointer-events: none;
		width: 100%;
		margin: 5px 0;
	}



	/* info
	---------------------------------------------*/
	.genyoBox {
		display: block;
	}
	.genyoBox div {
		width: 100%;
	}
	.tokuTitle {
		color: var(--blue);
		font-weight: bold;
		font-size: 20px;
		line-height: 1.3em;
		border-bottom: dotted 2px var(--blue);
		padding-bottom: 5px;
		margin-bottom: 5px;
	}
	.tenpoAll {
		display: block;
	}
	.tenpoAll .tenpoBox {
		width: 100%;
		padding: 10px;
		margin: 0 0 10px 0;
	}
	
	
	
	
}