@charset "utf-8";


/* ベース ---------------------------------------------------- */


body{ height: 100%; background: #fff; -webkit-text-size-adjust: 100%; }
*{ margin: 0; padding: 0; border:none; list-style: none; box-sizing: border-box; }
h1 , h2 , h3 , h4 , h5 , h6{ font-weight: normal; }
img{ vertical-align: text-bottom; }


/* フォント */
*{
font-family: "Noto Serif JP", serif;
font-feature-settings: "palt";
font-weight: 500;
font-style: normal;
color: #43221f;
line-height: 1.8em;
}
::selection{ background: rgba(133, 133, 133, 0.5); color: #fff; }
.font-link{
color: #ff5cf1;
font-weight: 700;
transition: all 0.8s ease; animation: all 0.8s ease;
border-bottom: 1px #ff5cf1 solid !important;
}
.font-link:hover{ opacity: 0.5; }


/* ボタンリンク */
.bt-link{ transition: all 0.8s ease; animation: all 0.8s ease; box-shadow: 0px 0px 30px rgba(239, 61, 255, 0.0); }
.bt-link:hover{
-webkit-animation-name: pulse;
animation-name: pulse;
box-shadow: 0px 0px 30px #ff9dbf;
}
.no-link{ opacity: 0.2; cursor: default !important; }


/* ローディング */
#loading{
width: 100%;
height: 100%;
z-index: 9999;
background: #f6f1f4 url(../img/_bg_wt.jpg) center;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
padding: 10% 5%;
}
#loading .item{
width: 100%;
max-width: 300px;
position: relative;
}
#loading .item .logo{
width: 100%;
position: relative;
}
#loading .item .logo img{
width: 100%;
position: relative;
margin: 0 0 0 -7%;
}
#loading .item #loading_text{
width: 100%;
text-align: center;
font-size: 14px;
line-height: 1.0em;
color: #43221f;
position: relative;
margin: 0;
}
.load{
display: none;
position: relative;
}


/* ページトップ */
#side-bt{
width: 80px;
z-index: 998;
position: fixed;
bottom: 20px;
right: -100px;
cursor: pointer;
}
#side-bt a{
width: 100%;
display: block;
position: relative;
}
#side-bt a img{ width: 100%; }


/* main */
main{
width: 100%;
max-width: 2560px;
min-width: 1000px;
display: flex;
flex-direction: row-reverse;
position: relative;
margin: 0 auto;
}
main > .bg{
width: 100%;
height: 100vh;
background: #f6f1f4 url(../img/_bg_wt.jpg) center;
position: fixed;
top: 0;
left: 0;
}
.wp{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
main header{
width: 150px;
flex-shrink: 1;
position: relative;
}
main header > div{
width: 100%;
height: 100vh;
background: linear-gradient(-180deg, #814a7b, #c56285);
display: flex;
flex-shrink: 1;
flex-direction: column;
justify-content: space-between;
position: sticky;
top: 0;
padding: 20px;
}
main header > div .bg{
width: 100%;
height: 100%;
background: url(../img/_bg_wt.jpg) center;
position: absolute;
top: 0;
left: 0;
mix-blend-mode: color-burn;
}
main header > div .line{
width: calc(100% - 10%);
height: 100%;
position: absolute;
top: 0;
left: 5%;
border-left: #fff 1px solid;
border-right: #fff 1px solid;
mix-blend-mode: overlay;
}
main header nav{
width: 100%;
position: relative;
}
main header nav ul{
width: 100%;
position: relative;
}
main header nav ul li{
width: 100%;
display: flex;
justify-content: center;
position: relative;
}
main header nav ul li a{
width: auto;
font-size: 20px;
color: #fff;
text-decoration: none;
writing-mode: vertical-rl;
text-orientation: upright;
position: relative;
transition: all 0.8s ease; animation: all 0.8s ease;
}
  main header nav ul li a.icon{
  width: 50px;
  writing-mode: none;
  text-orientation: none;
  text-align: center;
  }
  main header nav ul li a.icon img{ width: 100%; }
  main header nav ul li a.icon:hover{ opacity: 0.6; }
main header nav ul li a:hover{
color: #ffc7ec;
text-shadow: 0px 0px 30px #ff9dbf;
}
main header nav ul span::after{
content: "・";
width: 100%;
display: block;
font-size: 16px;
text-align: center;
color: #fff;
position: relative;
margin: 5px auto;
mix-blend-mode: overlay;
}
.bt-bay{
width: 100%;
display: flex;
justify-content: center;
flex-shrink:  1;
position: relative;
}
.bt-bay a{
width: auto;
background: url(../img/_bg_wt.jpg);
display: block;
text-decoration: none;
position: relative;
padding: 10px;
}
.bt-bay a p{
width: auto;
font-size: 26px;
font-weight: 700;
writing-mode: vertical-rl;
text-orientation: upright;
background: linear-gradient(90deg, #814a7b, #c56285);
background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
padding: 20px 10px;
border: 1px #c56285 solid;
}
.bt-bay.sp{
width: 90px;
z-index: 999;
display: none;
position: fixed;
bottom: 20px;
right: 20px
}
.bt-bay.sp a{ background: linear-gradient(-180deg, #814a7b, #c56285); }
.bt-bay.sp a p{
background: none;
background-clip: border-box;
-webkit-text-fill-color: #fff;
border: 1px #fff solid;
}

main .main-box{
width: calc(100% - 150px);
position: relative;
}


/* フッター */
footer{
width: 100%;
max-width: 2560px;
min-width: 1000px;
background: #212121 url(../img/_bg_bk.jpg) center fixed;
position: relative;
margin: 0 auto;
padding: 65px 5%;
}
footer .bt-top{
width: 96px;
display: block;
position: relative;
margin: 0 auto 30px;
cursor: pointer;
transition: all 0.8s ease; animation: all 0.8s ease;
}
footer .bt-top:hover{
-webkit-animation-name: pulse;
animation-name: pulse;
}
footer .bt-top img{ width: 100%; }
footer ul{
width: 100%;
max-width: 1600px;
display: flex;
justify-content: center;
position: relative;
margin: 0 auto 30px;
}
footer ul li{
width: 80px;
position: relative;
margin: 0 10px;
}
footer ul li a{
width: 100%;
overflow: hidden;
display: block;
position: relative;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
footer ul li a img{
width: 100%;
display: block;
position: relative;
}
footer p{
width: 100%;
font-size: 16px;
line-height: 1.0em;
font-weight: 600;
color: #92517e;
font-style: normal;
text-align: center;
position: relative;
margin: 0 auto;
}


/* ボタンベース */
.bt-base{
width: 100%;
display: flex;
justify-content: center;
position: relative;
}
.bt-base a{
width: auto;
background: #242424 url(../img/_bg_img01.jpg) center;
display: inline-block;
font-size: 20px;
color: #fff !important;
text-decoration: none;
position: relative;
margin: 0 10px;
padding: 10px 25px;
/*border: #ff5ade 2px solid;*/
text-shadow: none !important;
border-radius: 50px;
}


/* 桃の花びらパーティクル用 */
.particle{
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
.sakura-leaf {
position: absolute;
background-size: contain;
background-repeat: no-repeat;
will-change: transform, opacity;
animation: sakura-fall linear forwards;
}
@keyframes sakura-fall {
	0% {
		transform: translate(0, 0) rotate(0deg);
		opacity: 0;
	}
	10% {
		opacity: 1.0;
	}
	25% { transform: translate(-25vw, 25vh) rotate(180deg) translateX(20px); }
	50% { transform: translate(-50vw, 50vh) rotate(360deg) translateX(-20px); }
	75% { transform: translate(-75vw, 75vh) rotate(540deg) translateX(20px); }
	90% {
		opacity: 1.0;
	}
	100% {
		transform: translate(-100vw, 110vh) rotate(720deg);
		opacity: 0;
	}
}


/* HOME ---------------------------------------------------- */


/* top */
#home #top{
width: 100%;
position: relative;
}
/* top 背景 */
#home #top .bg{
width: 100%;
overflow: hidden;
display: flex;
align-items: flex-start;
justify-content: center;
position: relative;
}
#home #top .bg img{
width: 100%;
min-width: 1600px;
display: block;
position: relative;
}
/* top コンテンツ */
#home #top .item{
width: 100%;
height: 100%;
z-index: 5;
position: absolute;
top: 0;
left: 0;
}
#home #top .item > div{
width: 100%;
height: 100vh;
position: sticky;
top: 0;
}
#home #top .item h1{
width: 25%;
max-width: 400px;
position: absolute;
top: 3%;
right: 1%;
}
#home #top .item .day{
width: 8%;
max-width: 150px;
position: absolute;
bottom: 3%;
left: 1%;
}
#home #top .item .brand{
width: 8%;
max-width: 120px;
position: absolute;
top: 3%;
left: 1%;
}
#home #top .item h1 img,
#home #top .item .day img,
#home #top .item .brand img{
width: 100%;
display: block;
position: relative;
}


/* info */
#home #info{
width: 100%;
position: relative;
padding: 130px 0;
}
/* info 更新情報 */
#home #info #news{
width: 100%;
position: relative;
margin: 0 0 30px;
padding: 0 5%;
}
#home #info #news > div{
width: 100%;
max-width: 1600px;
position: relative;
margin: 0 auto;
}
#home #info #news .top-line{
width: 100%;
position: relative;
}
#home #info #news .top-line .old-bt{
width: 100%;
display: flex;
justify-content: flex-end;
position: relative;
}
#home #info #news .top-line .old-bt > div{
width: auto;
display: inline-block;
position: relative;
cursor: pointer;
}
#home #info #news .line{
width: 100%;
height: 1px;
opacity: 0.5;
background: linear-gradient(-180deg, #814a7b, #c56285);
position: relative;
}
#home #info #news .item{
width: 100%;
position: relative;
margin: 30px 0 0;
padding-right: 15px; /* スクロールバーとコンテンツの重なりを防ぐ余白 */
/* Firefox 用のスクロールバースタイル */
scrollbar-width: thin;
scrollbar-color: #c56285 #f6f1f4; /* つまみの色 / レールの色 */
}
/* Webkit系 (Chrome, Safari, Edge) 用のカスタムスクロールバー */
#home #info #news .item::-webkit-scrollbar {
width: 8px; /* スクロールバーの横幅 */
}
#home #info #news .item::-webkit-scrollbar-track {
background: #f6f1f4; /* スクロールバーの背景（レール）部分 */
border-radius: 10px;
}
#home #info #news .item::-webkit-scrollbar-thumb {
background: #c56285; /* スクロールバーの動く部分（つまみ） */
border-radius: 10px;
}
#home #info #news .item::-webkit-scrollbar-thumb:hover {
background: #814a7b; /* ホバー時のつまみの色 */
}
#home #info #news .item dl{
width: 100%;
display: flex;
align-items: flex-start;
position: relative;
}
  #home #info #news .item dl:nth-child(n+2){ display: none; }
#home #info #news .item dl dt{
width: 130px;
font-size: 20px;
position: relative;
}
#home #info #news .item dl dd{
width: calc(100% - 130px);
font-size: 20px;
position: relative;
}
#home #info #news .item dl dd a{ text-decoration: none; }
#home #info #news .item > .line{
width: 100%;
display: none;
position: relative;
margin: 30px 0;
}
/* info トピック */
#home #info #topic{
width: 100%;
position: relative;
padding: 0 calc(5% - 15px);
}
#home #info #topic ul{
width: 100%;
max-width: 1630px;
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
margin: 0 auto;
}
#home #info #topic ul li{
/*width: calc(33.33% - 30px);*/
width: calc(50% - 30px);
position: relative;
margin: 0 15px 30px;
}
#home #info #topic ul li a{
width: 100%;
display: block;
position: relative;
}
#home #info #topic ul li a img{
width: 100%;
display: block;
position: relative;
}


#home #mov{
width: 100%;
position: relative;
margin: 0 auto;
/*padding: 0 5%;*/
}
#home #mov > div{
width: 100%;
/*max-width: 1600px;*/
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 16 / 9;
position: relative;
margin: 0 auto;
/*border-radius: 20px;*/
}
#home #mov video{
width: 100%;
position: relative;
}


/* point */
#home #point{
width: 100%;
position: relative;
}
#home #point > .bg{
width: 100%;
height: 100vh;
background: url(../img/point_bg.jpg) no-repeat;
background-size: cover;
position: sticky;
top: 0;
}
#home #point h2{
width: 100%;
display: flex;
justify-content: center;
margin: calc(-100vh + 130px) 0 100px;
padding: 0 5%;
}
#home #point h2 img{ position: relative; }
#home #point .item{
width: 100%;
overflow: hidden;
position: relative;
padding: 0 5% 130px;
}
#home #point .item ul{
width: 100%;
max-width: 1600px;
position: relative;
margin: 0 auto;
}
#home #point ul li{
width: 100%;
position: relative;
margin: 0 0 100px;
}
#home #point ul li h3{
width: 100%;
display: flex;
align-items: center;
position: relative;
margin: 0 0 50px;
}
#home #point ul li h3 img{
width: 70px;
display: block;
flex-shrink: 1;
position: relative;
}
#home #point ul li h3 p{
width: 100%;
font-size: 48px;
color: #fff;
position: relative;
text-shadow: 0 0 15px #ffb5e5 , 0 0 5px #ffb5e5;
}
#home #point ul li .info{
width: 100%;
font-size: 26px;
color: #fff;
position: relative;
margin: 0 0 50px;
padding: 0 0 0 5%;
text-shadow: 0 0 15px #ffb5e5 , 0 0 5px #ffb5e5;
}
#home #point ul li .ef-flower{
width: 100%;
position: relative;
margin: 0 0 -25px;
}
/*
#home #point ul li .ef-flower .img01{
width: 100px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: -50px;
}
#home #point ul li .ef-flower .img02{
width: 100px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: -50px;
}
#home #point ul li .ef-flower .img01 img,
#home #point ul li .ef-flower .img02 img{
display: block;
position: relative;
}
*/
/*
.generated-flower {
position: absolute;
width: 100px;
height: auto;
pointer-events: none;
opacity: 0;
z-index: 0;
transition: opacity 1.5s ease, transform 1.5s ease;
}
*/
#home #point ul li#point01 .img{
width: 100%;
height: 260px;
z-index: 1;
overflow: hidden;
display: flex;
align-items: center;
position: relative;
margin: 0 0 25px;
/*box-shadow: 0 0 15px #ffb5e5;*/
}
#home #point ul li#point01 .img > img{
width: 100%;
display: block;
position: relative;
}
#home #point ul li#point01 .img .wp{
display: flex;
align-items: center;
}
#home #point ul li#point01 .img .wp::after{
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%);
pointer-events: none;
z-index: 1;
}
#home #point ul li#point01 .img:nth-of-type(3) .wp::after{ background: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%); }
#home #point ul li#point01 .img:nth-of-type(4) .wp::after{ background: linear-gradient(to right, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%); }
#home #point ul li#point01 .img .wp img{
width: 33.33%;
max-width: 480px;
z-index: 2;
position: relative;
}
#home #point ul li#point02{ margin: 0; }
#home #point ul li#point02 .img{
width: 100%;
max-width: 1157px;
position: relative;
margin: 0 auto;
}
#home #point ul li#point02 .img .screen{
width: 100%;
position: relative;
}
#home #point ul li#point02 .img .wp .text01{
width: 6%;
max-width: 70px;
position: absolute;
top: 1%;
left: -2%;
}
#home #point ul li#point02 .img .wp .text02{
width: 6%;
max-width: 70px;
position: absolute;
bottom: 1%;
right: -2%;
}
#home #point ul li#point02 .img .wp .text01 img,
#home #point ul li#point02 .img .wp .text02 img{
width: 100%;
display: block;
position: relative;
}


/* story */
#home #story{
width: 100%;
overflow: hidden;
position: relative;
padding: 130px 5%;
}
#home #story .bg{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#home #story .bg img{
width: 20%;
display: block;
position: relative;
}
#home #story .bg img:nth-child(1){
position: absolute;
top: 2%;
left: 2%;
}
#home #story .bg img:nth-child(2){
position: absolute;
top: 20%;
right: 2%;
}
#home #story .bg img:nth-child(3){
position: absolute;
bottom: 20%;
left: 2%;
}
#home #story .bg img:nth-child(4){
position: absolute;
bottom: 2%;
right: 2%;
}
#home #story h2{
width: 100%;
display: flex;
justify-content: center;
margin: 0 0 100px;
}
#home #story h2 img{ position: relative; }
#home #story .text{
width: 70%;
position: relative;
margin: 0 auto -35px;
}
#home #story .text p{
width: 100%;
font-size: 20px;
line-height: 2.0em;
text-align: center;
position: relative;
margin: 0 0 35px;
}
#home #story .text p span{
font-size: 28px;
font-weight: 600;
background: linear-gradient(90deg, #814a7b, #c56285);
background-clip: text;
-webkit-text-fill-color: transparent;
}
#home #story .text .end{
width: 80%;
font-size: 45px;
line-height: 1.5em;
font-weight: 600;
background: linear-gradient(90deg, #814a7b, #c56285);
background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
margin: 0 auto;
}
#home #story .img{
width: 100%;
height: 500px;
background: url(../img/story_img01_bg.jpg) no-repeat center;
background-size: cover;
overflow: hidden;
display: flex;
align-items: center;
position: relative;
margin: 100px 0;
box-shadow: 0 0 50px rgba(255, 111, 161, 0.5);
}
#home #story .img > img{
width: 100%;
display: block;
position: relative;
}
#home #story .img .smoke{
width: 100%;
height: 100%;
background: url(../img/_smoke01.webp) repeat-x center;
position: absolute;
top: 0;
left: 0;
animation: smoke01 60s linear infinite;
}
@keyframes smoke01{
0%{ background-position: 0 center; }
100%{ background-position: -2402px center; }
}


/* chara */
#home #chara{
width: 100%;
position: relative;
}
#home #chara > .bg{
width: 100%;
height: 100vh;
background: url(../img/chara_bg.jpg) no-repeat;
background-size: cover;
position: sticky;
top: 0;
/*mix-blend-mode: darken;*/
}
#home #chara > .bg .grad{
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%);
position: absolute;
top: 0;
left: 0;
}
#home #chara h2{
width: 100%;
display: flex;
justify-content: center;
margin: calc(-100vh + 130px) 0 100px;
}
#home #chara h2 img{ position: relative; }
#home #chara .item{
width: 100%;
overflow: hidden;
position: relative;
margin: 0 0 -4%;
padding: 0 5%;
}
  #home #chara #c_2{ margin: 0 0 4%; }
  #home #chara #c_3{ margin: 0; padding: 0 0 130px; }
#home #chara .item > div{
width: 100%;
max-width: 1600px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin: 0 auto;
}
  #home #chara .item.re > div{ flex-direction: row-reverse; }
/* chara イメージ */
#home #chara .img{
width: 50%;
position: relative;
}
#home #chara .img .bg{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
}
#home #chara .img .bg img{
width: 100%;
display: block;
position: relative;
}
#home #chara .img .img-box{
width: 130%;
position: relative;
}
#home #chara .img .img-box > div{
width: 100%;
position: relative;
margin: 0 0 0 -10%;
}
  #home #chara .img .img-box > div.img02{ display: none; }
#home #chara .img .img-box img{
width: 100%;
display: none;
position: relative;
}
  #home #chara .img .img-box img:first-child{ display: block; }
#home #chara .item.re .img .img-box{
left: 0;
right: -10%;
}
/* chara 紹介 */
#home #chara .info{
width: 50%;
position: relative;
}
#home #chara .info .name{
width: 100%;
position: relative;
margin: 0 0 40px;
}
#home #chara .info .name h3{
width: 100%;
max-width: 534px;
z-index: 1;
position: relative;
}
#home #chara .info .name h3 img{
width: 100%;
display: block;
position: relative;
}
#home #chara .info .name .line{
width: 100%;
display: flex;
align-items: center;
position: relative;
margin: 20px 0;
}
#home #chara .info .name .line > div{
width: 100%;
height: 2px;
position: relative;
margin: 0 10px 0 0;
}
  #home #chara #c_1 .info .name .line > div{ background: linear-gradient(90deg, #c4306c, #3f1f21); }
  #home #chara #c_2 .info .name .line > div{ background: linear-gradient(90deg, #c16310, #3f1f21); }
  #home #chara #c_3 .info .name .line > div{ background: linear-gradient(90deg, #1f843b, #3f1f21); }
#home #chara .info .name .line p{
width: auto;
flex-shrink: 0;
color: #3f1f21;
font-size: 26px;
line-height: 1.1em;
font-weight: 700;
position: relative;
}
#home #chara .info .serifu{
width: 100%;
position: relative;
margin: 0 0 20px;
}
#home #chara .info .serifu p{
width: auto;
display: inline-block;
font-size: 24px;
font-weight: 600;
color: #fff;
position: relative;
}
  #home #chara #c_1 .info .serifu p{ background: linear-gradient(90deg, #c4306c, #3f1f21); background-clip: text; -webkit-text-fill-color: transparent; }
  #home #chara #c_2 .info .serifu p{ background: linear-gradient(90deg, #c16310, #3f1f21); background-clip: text; -webkit-text-fill-color: transparent; }
  #home #chara #c_3 .info .serifu p{ background: linear-gradient(90deg, #1f843b, #3f1f21); background-clip: text; -webkit-text-fill-color: transparent; }
#home #chara .info .intro{
width: 100%;
font-size: 18px;
position: relative;
margin: 0 0 40px;
}
#home #chara .info dl{
width: 100%;
display: flex;
align-items: center;
position: relative;
margin: 0 0 20px;
}
#home #chara .info dl dt{
width: 80px;
flex-shrink: 0;
font-size: 18px;
line-height: 1.0em;
color: #43221f;
position: relative;
}
#home #chara .info dl dd{
width: calc(100% - 90px);
display: flex;
position: relative;
}
#home #chara .info dl dd a{
width: 70px;
height: 70px;
background: rgba(33, 33, 33, 0.3);
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
line-height: 1.0em;
font-weight: 600;
color: #fff;
writing-mode: vertical-rl;
text-orientation: upright;
position: relative;
margin: 0 10px 0 0;
padding: 6px 10px 8px;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
cursor: pointer;
}
#home #chara .item .info dl dd a.active { background: #814a7b url(../img/chara_bt_on.jpg) no-repeat center; }
  #home #chara .item .info dl.voice dd a{ background: #814a7b url(../img/chara_bt_on.jpg) no-repeat center; }


/* 画廊 */
#home #cg{
width: 100%;
overflow: hidden;
position: relative;
margin: 0;
padding: 130px 0;
}
#home #cg h2{
width: 100%;
display: flex;
justify-content: center;
margin: 0 0 100px;
padding: 0 5%;
}
#home #cg h2 img{ position: relative; }
#home #cg .text{
width: 100%;
font-size: 18px;
text-align: center;
position: relative;
margin: 0 auto 50px;
padding: 0 5%;
}
#home #cg ul{
width: 100%;
background: #fff;
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
margin: 0 auto;
}
#home #cg ul li{
width: 33.33%;
position: relative;
}
#home #cg ul li a{
width: 100%;
display: block;
position: relative;
}
#home #cg ul li a:hover{ z-index: 1; }
#home #cg ul li a.bt-link{ cursor: pointer; }
#home #cg ul li:nth-child(2n) a.no-link{ opacity: 0.4; }
#home #cg ul li a img{
width: 100%;
display: block;
position: relative;
}
/* 画廊 ポップ */
.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: #fff 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;
}


/* 製品概要 */
#home #spec{
width: 100%;
position: relative;
margin: 0;
padding: 0 calc(5% - 15px) 100px;
}
#home #spec h2{
width: 100%;
display: flex;
justify-content: center;
margin: 0 0 100px;
padding: 0 15px;
}
#home #spec h2 img{ position: relative; }
#home #spec .info{
width: 100%;
max-width: 1600px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
position: relative;
margin: 0 auto;
}
#home #spec .item{
width: calc(50% - 30px);
display: flex;
flex-wrap: wrap;
position: relative;
margin: 0 15px 50px 15px;
}
	#home #spec .item.large{ width: calc(100% - 30px); }
#home #spec .item h3{
width: 100%;
position: relative;
font-size: 22px;
font-weight: 600;
margin: 0 0 30px;
padding: 0 0 0 20px;
}
#home #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;
}
#home #spec .item dl{
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
position: relative;
margin: 0;
}
#home #spec .item dt{
width: 120px;
background: linear-gradient(160deg, #814a7b, #c56285);
text-align: center;
color: #fff;
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;
}
#home #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;
}
	#home #spec .item.song dd{ padding: 0 0 0 50px; }
#home #spec .item dd.etc{ font-size: 14px; }
#home #spec .item.song dd p{
font-size: 22px;
line-height: 1.5em;
margin: 0 0 0 -40px;
}



/* レスポンシブ */


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



}


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



}


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

  /* main */
  main header{ width: 100px; }
  main header nav ul li a{ font-size: 16px; }
    main header nav ul li a.icon{ width: 40px; }
  main header nav ul span::after{
  font-size: 14px;
  margin: 3px auto;
  }
  main header .bt-bay a{
  width: auto;
  background: url(../img/_bg_wt.jpg);
  display: block;
  text-decoration: none;
  position: relative;
  padding: 7px;
  }
  main header .bt-bay a p{
  font-size: 18px;
  padding: 15px 7px;
  }
  main .main-box{ width: calc(100% - 100px); }

  /* point */
  #home #point h2 img{ width: 90px; }
  #home #point ul li h3 img{ width: 55px; }
  #home #point ul li h3 p{ font-size: 35px; }
  #home #point ul li .info{ font-size: 22px; }
  #home #point ul li#point01 .img{ height: 180px; }

  /* story */
  #home #story h2 img{ width: 100px; }
  #home #story .bg{ display: none; }
  #home #story .text{ width: 100%; }
  #home #story .text p{
  width: 100%;
  font-size: 20px;
  line-height: 1.7em;
  }
  #home #story .text p span{ font-size: 24px; }
  #home #story .text .end{
  width: 100%;
  font-size: 37px;
  }
  #home #story .img{
  height: 300px;
  margin: 60px 0;
  }

  /* chara */
  #home #chara h2 img{ width: 100px; }
  #home #chara .item{ margin: 0 0 5%; }
    #home #chara #c_2{ margin: 0 0 5%; }
    #home #chara #c_3{ margin: 0; }
  /* chara イメージ */
  #home #chara .img .img-box{
  width: 160%;
  position: relative;
  }
  #home #chara .img .img-box > div{
  width: 100%;
  position: relative;
  margin: 0 0 0 -18%;
  }
  #home #chara .item.re .img .img-box{
  left: 0;
  right: -18%;
  }
  /* chara 紹介 */
  #home #chara .info .name h3{ max-width: 400px; }
  #home #chara .info .name .line p{ font-size: 22px; }
  #home #chara .info .serifu p{ font-size: 22px; }
  #home #chara .info .intro{ font-size: 16px; }
  #home #chara .info dl dt{
  width: 70px;
  font-size: 16px;
  }
  #home #chara .info dl dd{ width: calc(100% - 80px); }
  #home #chara .info dl dd a{ font-size: 14px; }

  /* CG */
  #home #cg h2 img{ width: 100px; }

  /* SPEC */
  #home #spec h2 img{ width: 100px; }


}


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

  /* main */
  main header{ display: none; }
  .bt-bay.sp{ display: block; }
  main .main-box{ width: 100%; }

  /* top */
  #home #top .bg img{ min-width: 1800px; }
  /* top コンテンツ */
  #home #top .item > div{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  }
  #home #top .item h1{ width: 30%; }

  /* point */
  #home #point{ padding: 130px 0; }
  #home #point > .bg{
  width: 100%;
  height: 100%;
  background: url(../img/point_bg.jpg) no-repeat fixed;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  }
  #home #point h2{ margin: 0 0 100px; }

  /* chara */
  #home #chara{ padding: 130px 0 0; }
  #home #chara > .bg{
  height: 100%;
  background: url(../img/chara_bg.jpg) no-repeat fixed;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  }
  #home #chara h2{
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0 0 100px;
  }

  /* CG */
  #home #cg ul li{ width: 50%; }


}


/* end */