@charset "utf-8";


/* トップ */
#top{
width: 100%;
max-width: 2560px;
/*min-height: 80vh;*/
background: #000;
overflow: hidden;
position: relative;
margin: 0 auto;
}
#top .bg{
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}


/* トップ パーティクル */
#particle-container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
mix-blend-mode: color-dodge;
}
.particle {
opacity: 0;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
bottom: 0;
animation-name: riseAndRotateAndFade;
animation-timing-function: linear;
will-change: transform, opacity;
}
@keyframes riseAndRotateAndFade {
  0% {
    transform: translateY(0vh);
    opacity: 0;
  }
  20%,80% {
    opacity: 1.0;
  }
  100% {
    transform: translateY(-110vh);
    opacity: 0;
  }
}


#top .bg .bg01{
width: 100%;
height: 100%;
opacity: 0;
background: url(../img/top/bg01.jpg) no-repeat top center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
animation: anime_top04 3.0s forwards ease;
-webkit-animation: anime_top04 3.0s forwards ease;
animation-delay: 1.0s;
}
@keyframes anime_top04{
	0% { opacity: 0; transform: scale(1.05); }
	100% { opacity: 1; transform: scale(1.0); }
}
@-webkit-keyframes anime_top04{
	0% { opacity: 0; transform: scale(1.05); }
	100% { opacity: 1; transform: scale(1.0); }
}
#top .bg .bg02{
width: 100%;
height: 100%;
background: url(../img/top/bg02.webp) no-repeat top center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
animation: anime_top03 5.0s forwards ease;
-webkit-animation: anime_top03 5.0s forwards ease;
}
@keyframes anime_top03{
	0% { transform: scale(1.2); }
	100% { transform: scale(1.0); }
}
@-webkit-keyframes anime_top03{
	0% { transform: scale(1.2); }
	100% { transform: scale(1.0); }
}
#top .bg_img{
width: 100%;
max-width: 1792px;
position: relative;
margin: 0 auto;
}
#top .bg_img .img01{
width: 100%;
position: relative;
}
#top .bg_img .img02{
width: 100%;
position: absolute;
top: 0;
left: 0;
mix-blend-mode: soft-light;
/*mix-blend-mode: overlay;*/
}
#top .bg_img .img03{
width: 100%;
position: absolute;
top: 3.5%;
left: 0;
mix-blend-mode: overlay;
animation: anime_top01 8.0s infinite ease;
-webkit-animation: anime_top01 8.0s infinite ease;
}
@keyframes anime_top01{
	0% { left: 0; }
	50% { left: 20px; }
	100% { left: 0; }
}
@-webkit-keyframes anime_top01{
	0% { left: 0; }
	50% { left: 20px; }
	100% { left: 0; }
}
#top .bg_img .img04{
width: 100%;
position: absolute;
bottom: 3.5%;
right: 0;
mix-blend-mode: overlay;
animation: anime_top02 8.0s infinite ease;
-webkit-animation: anime_top02 8.0s infinite ease;
animation-delay: 1.0s;
}
@keyframes anime_top02{
	0% { right: 0; }
	50% { right: 20px; }
	100% { right: 0; }
}
@-webkit-keyframes anime_top02{
	0% { right: 0; }
	50% { right: 20px; }
	100% { right: 0; }
}
#top .item{
width: 100%;
position: absolute;
padding: 0 5% 50px;
bottom: 0;
left: 0;
}
#top .item > div{
width: 50%;
max-width: 800px;
position: relative;
margin: 0 auto;
}
#top .item h1{
width: 100%;
position: relative;
margin: 0 0 -2%;
}
#top .item p{
width: 100%;
position: relative;
}
#top .item h1 img,
#top .item p img{ width: 100%; }
/* ヘッダー ブランドロゴ */
#top .brand-logo{
width: 100px;
z-index: 10;
position: absolute;
top: 20px;
left: 20px;
}
#top .brand-logo a{
width: 100%;
display: block;
position: relative;
margin: 0 0 10px;
}
#top .brand-logo a img{ width: 100%; }


/* インフォ */
#info{
width: 100%;
max-width: 2560px;
overflow: hidden;
position: relative;
margin: 0 auto;
padding: 100px 0 0;
}
#info > section{
width: 100%;
position: relative;
margin: 0;
}
#info > section > div{
width: 100%;
max-width: 1920px;
display: flex;
align-items: flex-start;
position: relative;
margin: 0 auto;
}
#info .title{
width: 300px;
flex-shrink: 0;
position: relative;
padding: 0 30px 0 0;
}
#info .title h2{
text-align: left;
margin: 0 0 15px;
}
#info .title a{
width: auto;
display: flex;
font-size: 16px;
line-height: 1.5em;
position: relative;
cursor: pointer;
}
#info .title a img{
display: block;
line-height: 1.5em;
margin: 0 5px 0 0;
}
#info .title > p{
width: 100%;
font-size: 16px;
line-height: 1.5em;
position: relative;
}
#info .item{
width: calc(100% - 300px);
position: relative;
}
/* インフォ お知らせ */
#info #news{
margin: 0 0 30px;
padding: 0 5%;
}
#info #news .item > div{
width: 100%;
overflow: hidden;
position: relative;
}
#info #news .item > div::-webkit-scrollbar{ width: 8px; }
#info #news .item > div::-webkit-scrollbar-track{
background: rgba(255,255,255,0.1);
border-radius: 5px;
}
#info #news .item > div::-webkit-scrollbar-thumb{
background: #f48a00;
border-radius: 5px;
}
#info #news .item > hr,
#info #news .item > div > hr{
width: 100%;
height: 1px;
display: none;
position: relative;
mix-blend-mode: soft-light;
border-bottom: 1px #fff solid;
margin: 0;
}
	#info #news .item > hr{ display: block; }
#info #news .item dl{
width: 100%;
display: flex;
position: relative;
}
	#info #news .item dl:nth-child(n+2){ display: none; }
#info #news .item dl dt{
width: 150px;
display: flex;
align-items: center;
font-size: 22px;
line-height: 1.5em;
font-weight: bold;
position: relative;
padding: 30px 0;
}
#info #news .item dl dd{
width: calc(100% - 150px);
position: relative;
}
#info #news .item dl dd a{
width: 100%;
display: block;
text-decoration: none;
font-size: 20px;
line-height: 1.5em;
position: relative;
padding: 30px 0;
}
	#info #news .item dl dd a.bt-link:hover{
	-webkit-animation-name: none;
	animation-name: none;
	}
#info #news .item dl dd a span{
font-size: 20px;
line-height: 1.5em;
color: #f48a00;
text-decoration: underline;
}
#info #news .item dl dd hr{
width: 100%;
height: 1px;
position: relative;
margin: 0;
mix-blend-mode: soft-light;
border-bottom: 1px #fff solid;
}
#info #news .item .sp_more{
width: 100%;
display: none;
justify-content: center;
position: relative;
margin: 15px 0 0 0;
}
#info #news .item .sp_more a{
width: auto;
display: flex;
font-size: 16px;
line-height: 1.5em;
position: relative;
cursor: pointer;
}
#info #news .item .sp_more a img{
display: block;
line-height: 1.5em;
margin: 0 5px 0 0;
transform: rotate(90deg);
}
/* インフォ トピック */
#info #topic{
margin: 0 0 100px;
padding: 0 5%;
}
#info #topic .item{ overflow: visible !important; }
#info #topic .item ul{
width: 100%;
position: relative;
}
#info #topic .item ul li a{
width: 100%;
display: block;
text-decoration: none;
position: relative;
}
#info #topic .item ul li a .img{
width: 100%;
position: relative;
margin: 0 0 10px;
box-shadow: 0 0 10px rgba(244, 138, 0, 0.3);
}
#info #topic .item ul li a p{
width: 100%;
font-size: 20px;
line-height: 1.5em;
position: relative;
}
#info #topic .item .swiper-button-prev{ top: 37%; left: -2.5%; }
#info #topic .item .swiper-button-next{ top: 37%; right: -2.5%; }
#info #topic .item .swiper-button-prev,
#info #topic .item .swiper-button-next{
width: 80px !important;
height: 80px !important;
}
#info #topic .item .swiper-button-prev::after,
#info #topic .item .swiper-button-next::after{
width: 80px;
height: 80px;
content: "";
}
#info #topic .item .swiper-button-prev::after{ background: url(../img/_/bt_left.png) no-repeat center; }
#info #topic .item .swiper-button-next::after{ background: url(../img/_/bt_right.png) no-repeat center; }
#info #topic .item .swiper-scrollbar{ background: rgba(255,255,255,0.1); }
#info #topic .item .swiper-scrollbar-drag {
background: rgba(255, 255, 255, 0.3);
opacity: 1;
}
/* インフォ 動画 */
#info #mov{
max-width: 100%;
background: #000;
padding: 100px 5%;
}
#info #mov .bg{
width: 100%;
height: 100%;
max-width: 100%;
background: url(../img/top/bg01.jpg) no-repeat top center fixed;
background-size: cover;
opacity: 0.7;
position: absolute;
top: 0;
left: 0;
}
#info #mov .item{ overflow: visible !important; }
#info #mov .item ul{
width: 100%;
position: relative;
}
#info #mov .item ul li a{
width: 100%;
display: block;
overflow: hidden;
position: relative;
box-shadow: 0 0 10px rgba(244, 138, 0, 0.3);
}
#info #mov .item ul li a img{
width: 100%;
transition:all .4s ease;
animation:all .4s ease
}
#info #mov .item ul li a .icon{
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5) url(../img/_/icon_yt.svg) no-repeat center;
background-size: 13%;
position: absolute;
top: 0;
left: 0;
}
#info #mov .item ul li a .text{
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
text-align: center;
font-size: 22px;
line-height: 1.3em;
color: #eee;
position: absolute;
top: 0;
left: 0;
padding: 20px;
transition:all .4s ease;
animation:all .4s ease
}
#info #mov .item ul li a:hover .text{ opacity: 1; }
#info #mov .item ul li a:hover img{
transform: scale(1.2);
-webkit-transform: scale(1.2);
filter: blur(10px);
}
#info #mov .item .swiper-button-prev{ top: 44%; left: -2.5%; }
#info #mov .item .swiper-button-next{ top: 44%; right: -2.5%; }
#info #mov .item .swiper-button-prev,
#info #mov .item .swiper-button-next{
width: 80px !important;
height: 80px !important;
}
#info #mov .item .swiper-button-prev::after,
#info #mov .item .swiper-button-next::after{
width: 80px;
height: 80px;
content: "";
}
#info #mov .item .swiper-button-prev::after{ background: url(../img/_/bt_left.png) no-repeat center; }
#info #mov .item .swiper-button-next::after{ background: url(../img/_/bt_right.png) no-repeat center; }


/* あらすじ＆概要 */
#story-about{
width: 100%;
background: #000;
position: relative;
}
#story-about > .bg{
width: 100%;
height: 100vh;
overflow: hidden;
background: #000;
position: sticky;
top: 0;
}
#story-about > .bg .bg_1{
width: 50%;
height: 100%;
background: url(../img/story/bg_01_img01.jpg) no-repeat left center;
position: absolute;
top: 0;
left: 0;
clip-path: polygon(0 0, 100% 0, 100% 50%, 0% 100%);
}
#story-about > .bg .bg_1 img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: left top;
position: relative;
}
#story-about > .bg .bg_2{
width: 50%;
height: 100%;
background: url(../img/story/bg_02_img01.jpg) no-repeat right center;
position: absolute;
top: 0;
right: 0;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%);
}
#story-about > .bg .bg_2 img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: right top;
position: relative;
}
#story-about > .bg .bg_3{
width: 100%;
height: 50%;
background: url(../img/story/bg_03_img01.jpg) no-repeat center top;
background-size: cover;
position: absolute;
bottom: 0;
left: 0;
}
#story-about .bg_glad{
width: 100%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
background: linear-gradient(left, rgba(223,87,2,0.1) 0%, rgba(223,87,2,0) 30%, rgba(223,87,2,0) 70%, rgba(223,87,2,0.1) 100%);
position: absolute;
top: 0;
left: 0;
}


/* あらすじ */
#story{
width: 100%;
/*background: #000;*/
overflow: hidden;
position: relative;
margin: -100vh 0 0 0;
padding: 100px 0 0;
}
#story .item{
width: 100%;
position: relative;
margin: 0 auto;
padding: 0 5% 100px;
}
#story .item > div{
width: 100%;
max-width: 1920px;
z-index: 3;
position: relative;
margin: 0 auto;
}
#story .item p{
width: 100%;
text-align: center;
font-size: 28px;
line-height: 2.0em;
text-shadow: 0px 0px 10px rgb(0,0,0);
position: relative;
margin: 0 0 50px;
}
#story .item p.big span{
background: #fff url(../img/_/bg_tex_20.png) center;
font-size: 50px;
font-weight: bold;
line-height: 1.8em;
color: #121212;
text-shadow: none;
padding: 0px 10px 10px 20px;
}
#story .item p span{
font-weight: 700;
text-shadow: none;
padding: 4px;
}
	#story .item p span.p1{
	color: #121212;
	background: #f48a00;
	}
	#story .item p span.p2{
	color: #121212;
	background: #ffebbb;
	}
	#story .item p span.p3{
	color: #fff;
	background: #7a0014;
	}
#story .item .text_img{
width: 100%;
max-width: 1187px;
position: relative;
margin: 0 auto;
}
#story .item .text_img img{ width: 100%; }


/* BRAVEとは？ */
#about{
width: 100%;
/*background: rgba(0, 0, 0, 0.5);*/
position: relative;
padding: 0 5% 100px;
}
#about .item{
width: 100%;
max-width: 1200px;
background: #121212 url(../img/_/bg_tex_100.png) top center;
position: relative;
margin: 0 auto;
padding: 50px 0;
box-shadow: 0 0 10px rgba(244, 138, 0, 0.3);
}
#about .item h2{ z-index: 1; }
#about .item h2 ruby{
font-size: 63px;
font-weight: 700;
line-height: 1.3em;
font-weight: bold;
color: #f48a00;
padding: 0 10px;
}
#about .item h2 ruby rt{
font-size: 16px;
font-weight: 700;
font-weight: bold;
line-height: 1.2em;
transform: translateY(.6em);
color: #f48a00;
}
#about .item .box{
width: 100%;
z-index: 1;
position: relative;
margin: 0 0 -10px;
padding: 0 50px;
}
#about .item .box p{
width: 100%;
text-align: center;
font-size: 23px;
line-height: 2.0em;
position: relative;
margin: 0 0 30px;
}
#about .item .box p span{
font-size: 23px;
line-height: 1.3em;
}
#about .item .box p.big span{
background: #fff url(../img/_/bg_tex_20.png) center;
font-size: 34px;
font-weight: 700;
line-height: 1.5em;
color: #121212;
text-shadow: none;
padding: 0px 10px 10px 20px;
}
#about .item img{
width: 100%;
opacity: 0.5;
position: absolute;
bottom: 0;
left: 0;
}


/* 登場人物 */
#chara{
width: 100%;
position: relative;
padding: 100px 0 0;
}
#chara .bg{
width: 100%;
height: 100%;
display: none;
background: url(../img/chara/bg.webp) no-repeat center bottom fixed;
background-size: cover;
position: absolute;
top: 0;
left: 0;
}
/* 登場人物 選択_大 */
#chara #select{
width: 100%;
overflow: hidden;
position: relative;
padding: 0 5% calc(100px + 3%);
}
#chara #select ul{
width: 100%;
max-width: 1600px;
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
margin: 0 auto;
}
#chara #select ul li{
width: calc(16.66% - 20px);
position: relative;
margin: 0 10px -3%;
}
#chara #select ul div{
width: 100%;
position: relative;
}
#chara #select ul li a{
width: 100%;
display: block;
position: relative;
transform: rotate(45deg);
}
#chara #select ul li a img{
width: 100%;
position: absolute;
top: 0;
left: 0;
transform: rotate(-45deg);
transition: all 0.4s ease; animation: all 0.4s ease;
}
#chara #select ul li a img:nth-child(2){
width: 100%;
position: relative;
}
#chara #select ul li a img:nth-child(1){
opacity: 0;
transform:scale(0.5) rotate(-45deg);
}
#chara #select ul li a:hover img:nth-child(3){
top: 3.5%;
left: 3.5%;
}
#chara #select ul li a:hover img:nth-child(1){
opacity: 1;
transform:scale(1.0) rotate(-45deg);
}
/* 登場人物 選択小 */
#chara #min-select{
width: 100%;
z-index: 3;
display: none;
position: sticky;
padding: 0 5%;
top: 0;
}
#chara #min-select ul{
width: 100%;
max-width: 1000px;
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
margin: 0 auto;
padding: 0 0 1.5%;
}
#chara #min-select ul li{
width: calc(8.33% - 10px);
position: relative;
margin: 0 5px -1.5%;
}
#chara #min-select ul li a{
width: 100%;
display: block;
position: relative;
}
#chara #min-select ul li a img{ width: 100%; }
/* 登場人物 紹介 */
#chara .chara_info{
width: 100%;
position: relative;
}
#chara .chara_info > section{
width: 100%;
display: none;
overflow: hidden;
position: relative;
padding: 0 5% 0;
}
#chara .chara_info .box{
width: 100%;
max-width: 1400px;
display: flex;
align-items: flex-start;
margin: 0 auto;
}
@-webkit-keyframes fadeInLeftSmall{
	from{
	opacity:0;
	-webkit-transform:translate3d(-30%,0,0);
	transform:translate3d(-30%,0,0);
	}
	to{
	opacity:1;
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	}
}
@keyframes fadeInLeftSmall{
	from{
	opacity:0;
	-webkit-transform:translate3d(-30%,0,0);
	transform:translate3d(-30%,0,0);
	}
	to{
	opacity:1;
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
}
}
.fadeInLeftSmall{
-webkit-animation-name:fadeInLeftSmall;
animation-name:fadeInLeftSmall
}
/* 登場人物 紹介 テキストベース */
#chara .chara_info .info{
width: 50%;
z-index: 2;
position: relative;
padding: 20% 0 2% 0;
transform: rotate(-2deg);
}
#chara .chara_info .info .name{
width: 100%;
position: relative;
margin: 0 0 20px;
}
#chara .chara_info .info .name .para{
width: 100%;
display: flex;
position: relative;
margin: 0 0 30px;
}
#chara .chara_info .info .name .para p{
width: auto;
display: inline-block;
font-size: 16px;
line-height: 1em;
font-weight: bold;
position: relative;
margin: 0 10px 0 0;
padding: 4px 10px;
}
#chara .chara_info .info .name .para p.p_1{
background: #da3b26 url(../img/_/bg_tex_20.png);
color: #fff;
}
#chara .chara_info .info .name .para p.p_2{
background: #ff87ab url(../img/_/bg_tex_20.png);
color: #fff;
}
#chara .chara_info .info .name .oie{
width: 100%;
display: flex;
font-size: 26px;
line-height: 1em;
font-weight: 700;
margin: 0 0 10px;
}
#chara .chara_info .info .name .oie img{
width: 26px;
position: relative;
margin: 0 5px 0 0;
}
#chara .chara_info .info .name .rubi{
width: 100%;
font-size: 20px;
line-height: 1em;
font-weight: 700;
font-weight: bold;
position: relative;
margin: 0 0 0 10px;
}
#chara .chara_info .info .name .rubi span{ font-weight: 700; margin: 0 5px; }
#chara .chara_info .info .name h3{
width: 100%;
font-size: 70px;
line-height: 1.2em;
font-weight: 700;
position: relative;
}
#chara .chara_info .info .name h3 span{
font-weight: 700;
margin: 0 10px;
}
/*
その他 #b8ab67
織田家 #da3b26
北条家 #77da26
足利家 #d57aff
長尾家 #26bfda
鈴木家 #946aae
伊達家 #2959f8
佐竹家 #e4acfa
朝倉家 #1ebf9b
毛利家 #dbb224
長宗我部家 #268bda
島津家 #f48a00
大友家 #ffebbb
龍造寺 #bd001f
*/
	#chara .chara_info > section.etc .info .name .rubi span,
	#chara .chara_info > section.etc .info .name h3 span{ color: #b8ab67; }
	#chara .chara_info > section.oda .info .name .rubi span,
	#chara .chara_info > section.oda .info .name h3 span{ color: #da3b26; }
	#chara .chara_info > section.houjo .info .name .rubi span,
	#chara .chara_info > section.houjo .info .name h3 span{ color: #77da26; }
	#chara .chara_info > section.ashikaga .info .name .rubi span,
	#chara .chara_info > section.ashikaga .info .name h3 span{ color: #d57aff; }
	#chara .chara_info > section.nagao .info .name .rubi span,
	#chara .chara_info > section.nagao .info .name h3 span{ color: #26bfda; }
	#chara .chara_info > section.suzuki .info .name .rubi span,
	#chara .chara_info > section.suzuki .info .name h3 span{ color: #946aae; }
	#chara .chara_info > section.imagawa .info .name .rubi span,
	#chara .chara_info > section.imagawa .info .name h3 span{ color: #ff95ac; }
	#chara .chara_info > section.date .info .name .rubi span,
	#chara .chara_info > section.date .info .name h3 span{ color: #2959f8; }
	#chara .chara_info > section.satake .info .name .rubi span,
	#chara .chara_info > section.satake .info .name h3 span{ color: #e4acfa; }
	#chara .chara_info > section.asakura .info .name .rubi span,
	#chara .chara_info > section.asakura .info .name h3 span{ color: #1ebf9b; }
	#chara .chara_info > section.mouri .info .name .rubi span,
	#chara .chara_info > section.mouri .info .name h3 span{ color: #dbb224; }
	#chara .chara_info > section.cyousokabe .info .name .rubi span,
	#chara .chara_info > section.cyousokabe .info .name h3 span{ color: #268bda; }
	#chara .chara_info > section.shimadu .info .name .rubi span,
	#chara .chara_info > section.shimadu .info .name h3 span{ color: #f48a00; }
	#chara .chara_info > section.ootomo .info .name .rubi span,
	#chara .chara_info > section.ootomo .info .name h3 span{ color: #ffebbb; }
	#chara .chara_info > section.ryuzou .info .name .rubi span,
	#chara .chara_info > section.ryuzou .info .name h3 span{ color: #bd001f; }
#chara .chara_info .info .pers{
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
}
#chara .chara_info .info .pers dl{
width: 50%;
display: flex;
align-items: center;
position: relative;
margin: 0;
}
#chara .chara_info .info .pers dl dt{
width: 100px;
background: #fff url(../img/_/bg_tex_20.png) center;
flex-shrink: 0;
font-size: 18px;
line-height: 1em;
color: #121212;
text-align: center;
text-shadow: none;
position: relative;
margin: 0 10px 0 0 ;
padding: 5px 0 7px;
}
#chara .chara_info .info .pers dl dd{
width: calc(100% - 110px);
font-size: 24px;
position: relative;
padding: 0 20px 0 0;
}
#chara .chara_info .info .pers dl dd span{ font-size: 16px; margin: 0 0 0 10px; }
#chara .chara_info .info .pers .voice{
width: 100%;
display: flex;
/*opacity: 0.15;*/
position: relative;
margin: 10px 0 0;
}
#chara .chara_info .info .pers .voice a{
width: 70px;
display: block;
position: relative;
margin: 0 10px 0 0;
cursor: pointer;
}
#chara .chara_info .info .pers .voice a img{ width: 100%; }
#chara .chara_info .info .lines{
width: 100%;
position: relative;
margin: 50px 0;
}
#chara .chara_info .info .lines span{
background: #fff url(../img/_/bg_tex_20.png) center;
font-size: 30px;
line-height: 1.4em;
font-weight: 700;
color: #121212;
text-shadow: none;
}
#chara .chara_info .info .text{
width: 100%;
font-size: 20px;
line-height: 1.5em;
position: relative;
margin: 0 0 50px;
}
/* 登場人物 紹介 立ち絵 */
#chara .chara_info .image{
width: 50%;
min-height: 1400px;
display: flex;
align-items: flex-start;
justify-content: center;
position: relative;
right: 0;
}
#chara .chara_info .image > img{
width: 180%;
display: none;
position: relative;
/*left: -2%;*/
}
	#chara .chara_info .image > img:nth-child(1){ display: block; }
#chara .chara_info .image .bt_image{
width: 100px;
z-index: 1;
position: absolute;
top: 25%;
left: 0;
}
#chara .chara_info .image .bt_image a{
width: 100%;
display: block;
position: relative;
cursor: pointer;
}
	#chara .chara_info .image .bt_image a.bt01{ display: none; }
#chara .chara_info .image .bt_image a img{ width: 100%; }


/* 画廊 */
#cg{
width: 100%;
background: #000;
overflow: hidden;
position: relative;
margin: 0;
padding: 100px 0;
}
#cg .bg{
width: 100%;
height: 100%;
max-width: 100%;
background: url(../img/top/bg01.jpg) no-repeat top center fixed;
background-size: cover;
opacity: 0.7;
position: absolute;
top: 0;
left: 0;
}
#cg .text{
width: 100%;
max-width: 1920px;
font-size: 18px;
text-align: center;
position: relative;
margin: 0 auto 50px;
padding: 0 5%;
}
#cg ul{
width: 100%;
background: #fff;
/*background: #f48a00;*/
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
margin: 0 auto;
}
#cg ul li{
width: 25%;
position: relative;
}
#cg ul li a{
width: 100%;
display: block;
position: relative;
}
#cg ul li a.bt-link{ cursor: pointer; }
#cg ul li:nth-child(2n) a.no-link{
opacity: 0.4;
}
#cg ul li a img{
width: 100%;
}
/* 画廊 ポップ */
.cg-view > div{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.cg-view > div > div{
width: 100%;
max-width: 1400px;
background: #eee url(../img/_/bg_wt.jpg);
overflow: hidden;
position: relative;
border-radius: 10px;
}
.cg-view img{
width: 100%;
position: relative;
}
.cg-view > div > div > div{
width: 100%;
max-height: 300px;
overflow-y: auto;
font-size: 18px;
line-height: 1.5em;
color: #121212;
position: relative;
padding: 20px;
}


/* 商品一覧 */
#product{
width: 100%;
position: relative;
margin: 0;
padding: 100px calc(5% - 15px);
}
#product .bg{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#product ul{
width: 100%;
max-width: 1400px;
display: flex;
flex-wrap: wrap;
position: relative;
margin: 0 auto -50px;
}
#product ul li{
width: calc(50% - 30px);
background: #eee url(../img/_/bg_tex_20.png) top center;
overflow: hidden;
position: relative;
margin: 0 15px 50px;
padding: 30px;
/*border: 1px #757575 solid;*/
box-shadow: 0 0 10px rgba(244, 138, 0, 0.5);
}
#product ul li h3{
width: 100%;
display: flex;
justify-content: center;
font-size: 28px;
font-weight: 700;
color: #121212;
text-shadow: none;
position: relative;
}
#product ul li img{
width: 100%;
position: relative;
margin: 30px 0;
}
#product ul li dl{
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
padding: 50px 0;
}
#product ul li dl dt{
width: 22px;
font-size: 18px;
color: #121212;
position: relative;
margin: 0 10px 0 0;
}
#product ul li dl dd{
width: calc(100% - 32px);
font-size: 18px;
color: #121212;
position: relative;
}
#product ul li .price{
width: 100%;
text-align: center;
font-size: 22px;
line-height: 1.5em;
font-weight: 700;
color: #121212;
position: relative;
margin: 0 0 30px;
}
#product ul li .bt-base{
width: 80%;
margin: 0 auto -10px;
}
#product ul li .bt-base a{
width: calc(100% - 20px);
/*background: #242424;*/
/*color: #fff;*/
margin: 0 10px 10px;
text-shadow: none;
}
#product ul li .bt-base a.min{ width: calc(50% - 20px); }


/* 製品概要 */
#spec{
width: 100%;
position: relative;
margin: 0;
padding: 0 calc(5% - 15px) 100px;
}
#spec .info{
width: 100%;
max-width: 1400px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
position: relative;
margin: 0 auto;
}
#spec .item{
width: calc(50% - 30px);
display: flex;
flex-wrap: wrap;
position: relative;
margin: 0 15px 50px 15px;
}
	#spec .item.large{ width: calc(100% - 30px); }
#spec .item h3{
width: 100%;
position: relative;
font-size: 26px;
line-height: 1.0em;
margin: 0 0 30px;
padding: 0 0 0 25px;
}
#spec .item h3::after{
height: 100%;
display: flex;
align-items: center;
content: "◆";
font-size: 16px;
line-height: 1.0em;
position: absolute;
top: 0;
left: 0;
transition: all 0.4s ease;
}
#spec .item dl{
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
position: relative;
margin: 0;
}
#spec .item dt{
width: 120px;
background: #fff url(../img/_/bg_tex_20.png) center;
text-align: center;
color: #121212;
font-size: 14px;
line-height: 1.0em;
font-family: 'メイリオ','Meiryo', serif;
font-weight: bold;
position: relative;
margin: 0 20px 0 0;
padding: 8px 10px;
/*border-radius: 50px;*/
border-top: 1px rgba(255, 255, 255, 0.2) solid;
border-bottom: 1px rgba(255, 255, 255, 0.2) solid;
}
#spec .item dd{
width: calc(100% - 140px);
font-size: 16px;
line-height: 1.5em;
font-family: 'メイリオ','Meiryo', serif;
position: relative;
margin: 5px 0 30px;
padding: 0 0 0 20px;
}
	#spec .item.song dd{ padding: 0 0 0 50px; }
#spec .item dd.etc{ font-size: 14px; }
#spec .item.song dd p{
font-size: 22px;
line-height: 1.5em;
margin: 0 0 0 -40px;
}
#spec img{
width: 100%;
max-width: 600px;
display: block;
position: relative;
margin: 0 auto 50px;
box-shadow: 0 0 20px #f48a00;
}


/* レスポンシブ */


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

	/* トップ */
	#top .item{ padding: 0 5% 50px; }

	/* インフォ */
	#info > section > div{ display: block; }
	#info .title{
	width: 100%;
	padding: 0 0 50px;
	}
	#info .title h2{ text-align: center; }
	#info #news .title a{ display: none; }
	#info .title p{ text-align: center; }
	#info .item{ width: 100%; }
	#info #news .item .sp_more{ display: flex; }

	/* あらすじ */
	#story .item p span.p_3{ font-size: 6vw; }
	#story .inc .img > div img{ width: 120%; }

	/* 登場人物 */
	#chara .chara_info > section{ padding: 3% 5% 0; }

	/* 画廊 */
	#cg ul li{ width: 50%; }

	/* 製品概要 */
	/* 作品概要 コンテンツ */
	#spec .flex{ display: block; }
	#spec .flex > div{
	width: 100%;
	padding: 0;
	}
	#spec img{ width: 100%; }

}


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

	/* 商品一覧 */
	/*
	#product ul{ display: block; }
	#product ul li{
	width: 100%;
	margin: 0 0 50px;
	}
	*/

}


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





}


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



}


/* IE対応 */
@media all and (-ms-high-contrast:none){



}



/* end */