@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Funnel+Sans:ital,wght@0,300..800;1,300..800&family=Special+Gothic+Condensed+One&family=Zen+Kaku+Gothic+Antique&family=Zen+Old+Mincho&display=swap');
/* CSS Document */

/* ==================================================
 common
================================================== */
body {
    color: #fff;
    background-color:#000;
    text-align: center;
    font-family:YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: 400;
    font-style: normal;
    font-size: 13.5px;
    line-height: 2;
}
h1, h2, h4, h5, .sub-title, .member-name {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
}
h3, h6, .credit-list,.staff-credit {
    font-family: "Special Gothic Condensed One", sans-serif;
    font-optical-sizing: auto;
    font-style: italic;
    font-weight: 400;
}
.store-list {
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight:900;
    font-style: normal;
}
a { color:#fff;}
a:link    {}
a:visited {}
a:hover   {}
a:active  {}
@media (min-width:1024px) {
    body {
        font-size: 100%;
    }
}
@media (min-width:1500px) {
    body {
        font-size: 110%;
    }
}    
/* 全体に設定 */
::-moz-selection {
  background-color:transparent;
}
::selection {
    background-color: rgba(78,49,104,0.00);
    color: rgba(150,108,185,1.00);
}
a::selection,a span::selection {
    color: rgba(78,49,104,1.00)
}

.common-w {
    margin: 0 auto;
    width: 92%;
    max-width: 768px
}
@media (min-width: 768px) {
    .common-w {
    }
}
@media (min-width:1024px) {
    .common-w {
        width:90%;
        max-width: 1650px;
    }
}

/* ==================================================
 PC/SP 表示切り替え
================================================== */
.sp_only { }
.pc_only {display:none;}
@media (min-width:1024px) {
    .sp_only { display:none; }
    .pc_only { display:block; }
}

/* ==================================================
 Loading
================================================== */
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	background:#000;
	text-align:center;
	color:#fff;
    display: none;
}
#splash_logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#splash_logo svg {
	width:300px;
}
#splash_logo mask .st0 {
    fill:none;
    stroke:#fff;
    stroke-width:300;
    stroke-miterlimit:10;
    stroke-dasharray: 1500;
    stroke-dashoffset:1500;
}
/* container */
#container {
	opacity: 0;
    position: relative;
    min-height: 100vh;
}
body.appear #container {
	animation-name:PageAnimeAppear;
	animation-duration:2.0s;
	animation-delay: .5s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes PageAnimeAppear{
	0%    {opacity:0;}
    30%    {opacity:0;}
	100%  {opacity:1;}
}
body.appear2 #container {
	animation-name:PageAnimeAppear2;
	animation-duration:1.0s;
	animation-delay: 0s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes PageAnimeAppear2{
	0%    {opacity:0;}
	100%  {opacity:1;}
}



/* ==================================================
 header
================================================== */
header .title-wrap {
    height: 100vh;
    max-height: 932px;
    box-sizing: content-box;
    
    display: flex;
    flex-direction: column;
}
header .title-wrap .title-member {
    padding:1.5em 2em 1.5em;
    box-sizing: content-box;
}
header .title-wrap .title-member {
}
header .title-wrap .title-member .member-name {
    text-align: left;
    font-size: 1.4em;
    line-height: 1.25;
    font-style: italic;
}
header .title-wrap .title-img {
    height:50%;
    width: 100%;
}
header .title-wrap .title-img ul {
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
header .title-wrap .title-img ul li {
    width: 20%;
    height:100%;
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
header .title-wrap .title-img ul li#no_01 { background-image:url("/bunker/remix/109/img/takahashi.jpg");}
header .title-wrap .title-img ul li#no_02 { background-image:url("/bunker/remix/109/img/hidaka.jpg");}
header .title-wrap .title-img ul li#no_03 { background-image:url("/bunker/remix/109/img/suda.jpg");}
header .title-wrap .title-img ul li#no_04 { background-image:url("/bunker/remix/109/img/okuno.jpg");}
header .title-wrap .title-img ul li#no_05 { background-image:url("/bunker/remix/109/img/yu-ya.jpg");}

header .title-wrap .title {
    position: relative;
    width: 100%;
    height:calc(50% - 4em);
}
header .title-wrap .title>div {
    position: absolute;
    width: 100%;
	top: 0;
	left: 50%;
    transform: translate(-50%, -20%);
}
header .title-wrap .title h1 img {
    width:80%;
    max-width: 520px;    
    margin-bottom: .25em;
} 
header .title-wrap .title div.sub-title {
    font-size: 1.85em;
    font-style: italic;
    margin-right: 0.25em;
}
header .title-wrap .title div.sub-title span {
    font-family: "Special Gothic Condensed One", sans-serif;
    font-optical-sizing: auto;
    font-style: italic;
    font-weight: 400;
    font-size:0.95em;
    display: inline-block;
    margin-right:0.25em;
    margin-left: 0.18em;
}
@media (min-width: 768px) {
    header .title-wrap {
        max-height: 1368px;
    }
    header .title-wrap .title-img {
        height:57%;
    }
    header .title-wrap .title {
        height:calc(43% - 5em);
    }
    header .title-wrap .title-member {
        padding:2em 2em 1.9em;
    }
    header .title-wrap .title-member .member-name {
        font-size: 1.65em;
    }
    header .title-wrap .title-member .member-name br.sp_only {
        display: none;
    }
    
    header .title-wrap .title h1 img {
        width: 70%;
        max-width: 680px;
    }
    header .title-wrap .title div.sub-title {
        font-size: 2.5em;
    }
}
@media (min-width:1024px) {
   header .title-wrap {
        max-height: none; 
        margin-bottom: 15em;
    }
    header .title-wrap .title-member .member-name {
        font-size: 1.25em;
    }
    header .title-wrap .title>div {
        top:inherit;
        bottom:0;
    }
}


/* ==================================================
   Section / Staff Credit
================================================== */
.staff-credit .common-w {
    margin-bottom: 6em;
}
.staff-credit li {
    font-size: 1.25em;
}
@media (min-width:1024px) {
     .staff-credit .common-w {
        margin-bottom: 12em;
    }
}


/* ==================================================
   Section / share-button
================================================== */
.share-button .common-w {
    margin-bottom: 5em;
}
.share-button ul {
    justify-content:center;
}
.share-button ul li a {
    margin: 0 0.25em;
    display: flex;
    align-items:center;
    justify-content: center;
    border-radius: 50%;
    border: rgba(150,108,185,1.00) 1px solid;
    line-height:1;
    width: 2.25em;
    height: 2.25em;
    background-color: transparent!important;
}
.share-button ul, .share-button ul li, .share-button ul li i {
    color:rgba(150,108,185,1.00);
}
.share-button .fab,
.share-button .fa {
    text-align: center;
    font-size: 1.1em;
}
@media (min-width:1024px) {
    
}


/* ==================================================
   Footer / store
================================================== */ 
footer .store .common-w {
    border-top: solid rgba(255,255,255,0.3) 1px; 
    padding-top: 2.75em;
    padding-bottom:2.5em;
    line-height: 1.6;
}
footer .store .store-info  {
    margin-bottom: 2.5em;
    font-size: .85em;
}
footer .store .store-info h4 {
    font-size: 2em;
}
footer .store .store-list li {
    font-size: 115%;
    margin-bottom: 1.5em;
}
footer .store .store-list li h5 {
    font-size: 1.25em;
    margin-bottom: 0;
    line-height: 1.5;
}
footer .store .store-list li a {
    display: block;
}
@media (min-width:1024px) {
    footer .store .store-list {
        font-size: 90%;
     }
    footer .store .store-list li a {
        display: inline-block;
    }
    footer .store .store-list li a:before {
        display: inline-block;
        content:" | ";
        padding:0 0.55em 0 0.3em;
        color: rgba(255,255,255,0.2);
        vertical-align:baseline;
    }
}
    
    
/* ==================================================
   Footer / copyright・scroll
================================================== */ 
footer .footer-wrap .common-w {
    border-top: solid rgba(255,255,255,0.3) 1px; 
    padding-top:1.5em;
    padding-bottom: 2em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* copyright */
footer .footer-wrap .copyright {
    display: flex;
    line-height: 1;
    align-items: center;
    justify-content: flex-start;
    font-style: normal;
    font-size: 1.15em;
}
footer .footer-wrap .copyright div:first-child {
    padding-top: 0.1em;
    margin-right: 0.25em;
}
footer .footer-wrap .copyright div:last-child {
    font-size: 1em;
    letter-spacing: 0.051em;
}
/* scroll */
footer .footer-wrap .scroll-up {
    width: 3.5em;
    height: 3.5em;
    border: 1px solid rgba(255,255,255,0.0);
    border-radius: 50%;
}
footer .footer-wrap .scroll-up a {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1.0;
}
footer .footer-wrap .scroll-up a:hover {
    opacity: 0.3;
}
footer .footer-wrap .scroll-up a div {
    transform: rotate(45deg);
    width: 1.5em;
    height: 1.5em;
    margin-top: 1.35em;
    border-top: 1px solid rgba(255,255,255,1.00);
    border-left: 1px solid rgba(255,255,255,1.00);
}
@media (min-width:1024px) {
    footer .footer-wrap .common-w {
        justify-content: center;
        padding:5em 0;
        position: relative
        }
    footer .footer-wrap .scroll-up {
        position: absolute;
        right:0.5em;
        top:3.75em;
        width: 3.5em;
        height: 3.5em;
        border: 1px solid rgba(255,255,255,0.5);
    }
}



/* ==================================================
   Section / main-conten
================================================== */
.main-content {
    max-width: 680px;
    margin: 0 auto 10em;
}
.main-content .shiden {
    margin: 0 auto 10em;
    box-sizing: border-box;
    }
.main-content .credit-list,
.main-content .flex-wrap_01 .flex-left,
.main-content .flex-wrap_01 .flex-right,
.main-content .shiden-05 .flex-wrap_02 .flex-left img {
    margin-bottom: 4em;
    }
/*common title*/     
.main-content .main-name h2 {
    font-size: 3em;
    line-height: 1.25;
    font-style: italic;
} 
.main-content .main-name h2 span {
    display: inline-block;
    padding-bottom: 0;
    margin-bottom: .15em;
    border-bottom: 1px solid rgba(255,255,255,0.5);
}
.main-content .main-name .sub-title {
    font-size: 1.75em;
    line-height: 1.5;
    margin-right: 0.3em;
    font-style: italic;
}
/*common item-credit*/ 
.main-content .credit-list {
    margin-top: 1.25em;
}
.main-content .credit-list li {
    font-style: italic;
    padding-bottom: .5em;
    line-height: 1;
    font-size: 1em;
    display: inline-block;
}
.main-content .credit-list li a {
    display: inline-block;
    border-bottom: 1px solid rgba(150,108,185,0.5)
}
.main-content .credit-list li:after {
    display: inline-block;
    content:" / ";
    padding:0 0.5em 0 0.65em;
    color: rgba(255,255,255,0.50);
    vertical-align:baseline;
}
.main-content .credit-list li:last-child:after {
    display: none;
}
.main-content .credit-list li span {
    margin-right:.5em;
    display: inline-block;
}
/*common item-profile*/
.main-content .profile .profile-img img {
    width: 58%; 
    margin:0 auto 1.25em;
}
.main-content .profile .profile-text {
    text-align:left;
}
.main-content .profile .profile-text h3 {
    font-size: 1.35em;
    line-height: 1.5;
    text-align: center;
    margin-right: 0.25em;
    margin-bottom: .25em;
    font-style: italic;
}
.main-content .profile .profile-text p a {
    color: #fff;
}
.main-content .profile .profile-text p a:hover {
    color:rgba(150,108,185,1.00);
}
/* flex-wrap_01 */
.main-content .flex-wrap_01 {}
.main-content .flex-wrap_01 .flex-left {
    position: relative;
}
.main-content .flex-wrap_01 .flex-left .main-name {
    position: absolute;
    font-size: 100%;
    bottom:2em;
    width: 100%;
}
.main-content .flex-wrap_01 .flex-right img {
    width: 72%;
}
/* flex-wrap_02 */
.main-content .flex-wrap_02,
.main-content .flex-wrap_03 {
    width: 90%;
    margin: 0 auto;
}
.main-content .shiden-05 .flex-wrap_02 .flex-left img {
    width: 50%;
}
@media (min-width: 768px) {
    .main-content {
        width: 94%;
        margin-bottom:10em;
    }
    .main-content .shiden {
        margin-bottom:12em;
    }
    .main-content .credit-list,
    .main-content .flex-wrap_01 .flex-left,
    .main-content .flex-wrap_01 .flex-right,
    .main-content .shiden-05 .flex-wrap_02 .flex-left img {
        margin-bottom: 7em;
    }
    .main-content .credit-list {
        margin-top: 1.5em;
    }
    .main-content .profile .profile-img img {
        width: 58%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1.5em;
    }
    .main-content .profile .profile-text {
        width: 58%;
        margin-left: auto;
        margin-right: auto;
    }
    .main-content .flex-wrap_01 .flex-left .main-name {
        bottom:3.5em;
    }
    .main-content .credit-list li {
        font-size: 1.25em;
    }
}
@media (min-width:1024px) {
    .main-content {
        width: 100%;
        margin-bottom:20em;
        max-width: 1670px;
    }
    .main-content .shiden {
        margin-bottom:20em;
    }
    .main-content .credit-list,
    .main-content .flex-wrap_01 .flex-left,
    .main-content .flex-wrap_01 .flex-right,
    .main-content .flex-wrap_02 .flex-left,
    .main-content .flex-wrap_02 .flex-right{
        margin-bottom: 0em;
    }
    .main-content .shiden-05 .flex-wrap_02 .flex-left img {
        margin-bottom: 0em;
    }
    .main-content .flex-wrap_01,
    .main-content .flex-wrap_02,
    .main-content .flex-wrap_03 {
        width: 94%;
        margin: 0 auto 5em;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
    }
    /* flex-wrap_01 */
    .main-content .flex-wrap_01 .flex-left {
        position:inherit;
        width:47%;
    }
    .main-content .flex-wrap_01 .flex-left img {
        width: 75%;
        margin-bottom: 1.5em;
    }
    .main-content .flex-wrap_01 .flex-left .main-name {
        width: 100%;
        position:inherit;
        margin: 0 auto;
    }
    .main-content .flex-wrap_01 .flex-right {
        width:50%;
    }
    .main-content .flex-wrap_01 .flex-right img {
        width: 100%;
    } 
    /* flex-wrap_03*/
     .main-content .flex-wrap_03 div {
        width:60%;
        padding-top:5em;
        margin-left: auto;
        margin-right: auto; 
    }
    /* flex-wrap_02 */
    .main-content .flex-wrap_02 .flex-left {
        width:50%;
    }
    .main-content .flex-wrap_02 .flex-left img {
        width:100%;
    }
    .main-content .flex-wrap_02 .flex-right {
        width:45%;
        box-sizing: content-box;
        padding-right: 1%;
        display:flex;
        flex-direction: column;
    }
    .main-content .flex-wrap_02 .flex-right .profile-img,
    .main-content .flex-wrap_02 .flex-right .credit-list,
    .main-content .flex-wrap_02 .flex-right .profile .profile-text {
        width:100%;
    }
    .main-content .flex-wrap_02 .flex-right .profile-img {
        order: 1
    }
    .main-content .flex-wrap_02 .flex-right .credit-list {
        order: 3
    }
    .main-content .flex-wrap_02 .flex-right .profile {
        order: 2
    }
    .main-content .shiden-05 .flex-wrap_02 .flex-left img {
        width: 100%;
    }
    .main-content .profile-img img {
        width: 58%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1.5em;
    }
    .main-content .credit-list {
        text-align: left;
    }  
    .main-content .credit-list li {
        font-size: 1.1em;
        padding-bottom: 0.1em;
    }
    .main-content .credit-list li:after {
        padding: 0 0.2em 0 0.35em;
    }
    .main-content .profile .profile-text p {
        font-size: 0.9em;
        font-weight: 500;
        text-align: left;
    }
    .main-content .profile .profile-text p span.pc_only {
        display: inline;
    }
}