@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700;900&display=swap');


/*ルミナス調整用*/

.lum-lightbox{
  z-index: 999;
}

@media (max-width: 460px) {

  .lum-lightbox-inner img {
    max-width: 150vw;  /* 好きなサイズ感で */
    max-height: 88vh;  /* 90vhだと数pxだけ上下にスクロールできてしまうためこのサイズ */
   /* display: block;  を追加すると max-height: 92vh くらいでも大丈夫 */
  }

　 /* 矢印ナビが大きすぎると感じたら */
  .lum-gallery-button:after {
    width: 6vw;
    height: 6vw;
  }
}


.lum-lightbox {
  z-index:999;}

.lum-lightbox-position-helper
  img {
    width:100%;
    height:100%;
    object-fit:contain;
}
/* 全体・枠作り */

html,body {
  height:100%;
}

html {
	font-size:62.5%;
}


body {
	width:100%;
	min-height: 100vh;
	font-family: Verdana, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	font-size:62.5%;
	text-align:center;
	background:url("../img/grand_bg.png") center top repeat;
}

#PageWrapper {
	width:100%;
	min-height: 100vh;
	height: auto !important;
	height: 100%;
	position: relative;
}

h1,h2 {
	display: none;
}

header {
}

.mn {display: none;}

.menu-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    background-color: #a99fcd;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}

#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}

#menu-btn-check {
    display: none;
}

.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 800;
    background-color: #a99fcd;
}
.menu-content ul {
    padding: 70px 10px 0;
}
.menu-content ul li {
    border-bottom: solid 1px #ffffff;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    color:#ffffff;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	font-size: 1.8rem;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}

.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 700;
    background-color: #a99fcd;
    transition: all 0.5s;/*アニメーション設定*/
}

#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}

.language {
	position: fixed;
	left:10px;
	top:10px;
	overflow: hidden;
	z-index:100;
}

.language ul {
	display: flex;
	gap:5px;
}

.language ul li {
	width:40px;
	background-color:#040000;
	box-sizing: border-box;
	border:1px solid #434343;
	position: relative;
}

.language ul li.on {
	width:40px;
	background-color:#040000;
	box-sizing: border-box;
	border:1px solid #5e6db2;
}

.language ul li a, .language ul li span {
	text-decoration: none;
	padding:0 0;
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	font-size: 1.5rem;
	color:#434343;
	display: block;
	width:100%;
}

.language ul li.on a {
	color:#5e6db2;
}

#Mainvisual {
	background:url("../img/mainvisual_mobile.jpg") center center no-repeat;
	width:100%;
	padding-top:135%;
	position: relative;
	background-size: cover;
}

.catchphrase {
	display: none;
}

.logo_main {
	display: none;
}

h3 {
	width:100%;
	padding-top:24.61%;
	margin:0 auto 32px;
	position: relative;
	z-index:20;
}

#Head_Product_info {background: url("../img/head_product_info.png") center top no-repeat; background-size: contain;}
#Head_Twitter {background: url("../img/head_twitter.png") center top no-repeat; background-size: contain;}
#Head_Overview {background: url("../img/head_overview.png") center top no-repeat; background-size: contain;}
#Head_Story {background: url("../img/head_story.png") center top no-repeat; background-size: contain;}
#Head_Character {background: url("../img/head_character.png") center top no-repeat; background-size: contain;}
#Head_Graphic {background: url("../img/head_graphic.png") center top no-repeat; background-size: contain;}
#Head_Video {background: url("../img/head_video.png") center top no-repeat; background-size: contain;}
#Head_Outline {background: url("../img/head_outline.png") center top no-repeat; background-size: contain;}
#Head_Spec_info {background: url("../img/head_spec_info.png") center top no-repeat; background-size: contain;}

#Index_Product_info {
	padding:60px 0 120px;
	position: relative;
}

.index_product_wrap {
	width:90%;
	margin:0 auto;
}

.index_product_wrap dl {
	width:100%;
	display: flex;
	justify-content: space-between;
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	font-size: 1.8rem;
	color:#fff;
}

.index_product_wrap dl:nth-child(2n+1) {
	background-color:#2c2837;
}

.index_product_wrap dl dt {
	width:30%;
	transform: rotate(0.03deg);
	display: flex;
	align-items: center;
	justify-content: center;
	padding:8px 0;
}

.index_product_wrap dl dd {
	width:70%;
	transform: rotate(0.03deg);
	text-align: left;
	box-sizing: border-box;
	padding:8px 0 8px 0;
	display: flex;
	align-items: center;
}

#Overview {
	padding:60px 0 120px;
	position: relative;
	background:url("../img/ov_bg.jpg") center top no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

.ov_img {
	width:90%;
	position: relative;
	margin:0 auto 36px;
}

.ov_img ul {
	display: flex;
	flex-wrap: wrap;
	gap:20px;
}

.ov_img ul li {
	width:100%;
	position: relative;
	box-sizing: border-box;
	border:1px solid #a99fcd;
	background-color:#fff;
	box-shadow: 0 0 15px rgba(146,123,227,0.30);
}

.ov_img ul li img {
	width:100%;
	display: block;
}

.ov_txt {
	width:90%;
	margin:0 auto;
	font-family: 'Noto Serif JP', serif;
	text-align: center;
	font-size:2rem;
	font-weight: 700;
	color:#c7c2d7;
	margin-bottom:40px;
	transform: rotate(0.03deg);
}

.ov_txt strong {
	display: block;
	font-size:5rem;
	font-weight: 700;
	margin-bottom:36px;
	line-height: 1.2;
}

.ov_txt p {
	text-align: justify;
	line-height: 2.2;
}

#Twitter {
	padding:60px 0 120px;
	position: relative;
	background:url("../img/_bg_noise.png") left top repeat;
}

.twitter_widget {
	width:90%;
	height:500px;
	margin:0 auto;
	position: relative;
}

footer {
	padding:60px 0;
	position: relative;
	background:url("../img/footer_bg.jpg") center center no-repeat;
	background-size: cover;
}

.logo_foot {
	background:url("../img/logo_foot.png") center top no-repeat;
	width:100%;
	padding-top:25.13%;
	margin:0 auto 32px;
	background-size: cover;
}

.copyright {
	color:#fff;
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	font-size: 1.8rem;
	transform: rotate(0.03deg);
	margin-bottom:32px;
}

.primula {
	background:url("../img/primula.png") center top no-repeat;
	width:320px;
	height:80px;
	margin:0 auto 32px;
}

.primula a {
	width:320px;
	height:80px;
	display: block;
	background-color:#fff;
	opacity: 0;
	transition: all 0.3s;
}

.primula a:hover {
	opacity: 0.3;
}

#Story {
	padding:120px 0 120px;
	position: relative;
}

.story_body {
	width:90%;
	margin:0 auto;
}

p.story_main {
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	font-size: 1.8rem;
	transform: rotate(0.03deg);
	line-height: 1.6;
	color:#c7c2d7;
	margin-bottom:32px;
	text-align: justify;
}

p.story_phrase {
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	font-size: 3rem;
	transform: rotate(0.03deg);
	color:#c7c2d7;
}

#Product {
	padding:120px 0 120px;
	position: relative;
}

.product_wrap {
	width:90%;
	margin:0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap:80px 0;
	position: relative;
}

.probox {
	width:100%;
}

.probox span {
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	font-size: 2.5rem;
	transform: rotate(0.03deg);
	color:#a99fcd;
	margin-bottom:36px;
}

.probox p {
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	font-size: 3.6rem;
	transform: rotate(0.03deg);
	color:#c7c2d7;
}

#Video{
	padding:120px 0 120px;
	position: relative;
}

.video_wrap {
	width:90%;
	margin:0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap:40px 0;
	position: relative;
}

.videobox {
	width:100%;
	position: relative;
	overflow: hidden;
}

.video_single {
	width:100%;
	aspect-ratio: 16 / 9;
}

.video_single iframe {
  width: 100%;
  height: 100%;
}

.videobox p {
	width:100%;
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	font-size: 1.7rem;
	transform: rotate(0.03deg);
	background-color:#c7c2d7;
}

#Graphic {
	padding:120px 0 120px;
	position: relative;
}

#Character {
	padding:120px 0 120px;
	position: relative;
}

.charawrap {
	width:100%;
	position: relative;
}

#Chara01 .chara_body {background:url("../img/chara/chara01.png") center top no-repeat;background-size: 120%;}
#Chara02 .chara_body {background:url("../img/chara/chara02.png") center top no-repeat;background-size: 100%;}
#Chara03 .chara_body {background:url("../img/chara/chara03.png") center top no-repeat;background-size: 100%;}
#Chara04 .chara_body {background:url("../img/chara/chara04.png") center top no-repeat;background-size: 100%;}
#Chara05 .chara_body {background:url("../img/chara/chara05.png") center top no-repeat;background-size: 100%;}
#Chara06 .chara_body {background:url("../img/chara/chara06.png") center top no-repeat;background-size: 100%;}
#Chara07 .chara_body {background:url("../img/chara/chara07.png") center top no-repeat;background-size: 100%;}

.chara_body {
	width:100%;
	margin:0 auto;
	position: relative;
	display: block;
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	transform: rotate(0.03deg);
	text-align: left;
	padding-top:80%;
}

.c_catch {
	position: absolute;
	right:5%;
	top:0;
	font-size: 4rem;
	color:#4a4558;
	writing-mode: vertical-rl;
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	transform: rotate(0.03deg);
}

.c_name {
	text-align: center;
	font-size: 5rem;
	color:#a99fcd;
	margin-bottom:40px;
	background:rgba(0,0,0,0.5);
	padding:12px 0;
}

.c_name rt {
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	font-size:2rem;
	ruby-align:center;
}

.c_phrase {
	width:100%;
	box-sizing: border-box;
	padding:5%;
	background:rgba(44,40,55,0.8);
	text-align: left;
	font-size:2.5rem;
	color:#c7c2d7;

	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom:40px;
}

.c_phrase br {
	display: none;
}

.c_txt {
	width:90%;
	margin:0 auto 40px;
	text-align: left;
	font-size:1.7rem;
	color:#c7c2d7;
	line-height: 1.8;
}

.c_txt br {
	display: none;
}

.c_cv {
	text-align: center;
	font-size:4.5rem;
	color:#c7c2d7;
	width:90%;
	margin:0 auto 40px;
}

.c_costume {
	display: flex;
	justify-content:center;
	gap:10px;
	margin:0 auto 40px;
}

.c_costume a {
	display: block;
	color:#a99fcd;
	border:1px solid #a99fcd;
	background-color:#2c2837;
	text-decoration: none;
	text-align: center;
	width:20%;
	padding:4px 0;
	font-size: 1.6rem;
	transition: all 0.3s;
}

.c_costume a:hover {
	background-color:#534B67;
}

.c_select {
	width:100%;
	background-color:rgba(0,0,0,0.89);
	padding:20px;
	box-sizing: border-box;
}

.c_select ul {
	display: flex;
	justify-content: center;
	gap:10px;
	flex-wrap: wrap;
}

.c_select ul li {
	width:23%;
	position: relative;
	background-color: #fff;
}

.c_select ul li a {
	width:100%;
	padding-top:100%;
	display: block;
	border:1px solid #a99fcd;
	transition: all 0.3s;
}

.c_select ul li a:hover {
	opacity: 0.7;
}

.cmenu01 a {background:url("../img/chara/select01.jpg") center top no-repeat; background-size:cover;}
.cmenu02 a {background:url("../img/chara/select02.jpg") center top no-repeat; background-size:cover;}
.cmenu03 a {background:url("../img/chara/select03.jpg") center top no-repeat; background-size:cover;}
.cmenu04 a {background:url("../img/chara/select04.jpg") center top no-repeat; background-size:cover;}
.cmenu05 a {background:url("../img/chara/select05.jpg") center top no-repeat; background-size:cover;}
.cmenu06 a {background:url("../img/chara/select06.jpg") center top no-repeat; background-size:cover;}
.cmenu07 a {background:url("../img/chara/select07.jpg") center top no-repeat; background-size:cover;}

/*ギャラリー*/

.graphic_list {
	width:90%;
	margin: 0 auto 120px;
	position: relative;
}

.graphic_list ul {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap:32px 0;
}

.graphic_list ul li {
	width: 100%;
	position: relative;
	box-sizing: border-box;
	border:1px solid #a99fcd;
	background-color:#fff;
	box-shadow: 0 0 15px rgba(146,123,227,0.30);
}

.graphic_list ul li img {
	width:100%;
	display: block;
}

.graphic_list ul li a img {
	opacity: 1;
	transition: all 0.3s;
}

.graphic_list ul li a:hover img {
	opacity: 0.6;
}