@charset "UTF-8";

/*画面表示時のアニメーション*/
body {
    animation: fadeIn 2s linear 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/*タイトルロゴ表示時のアニメーション*/
.anime-up{
  animation-name:fade-in3;
  animation-duration:1.5s; /*//アニメーション時間*/
  animation-timing-function: ease-out; /*//アニメーションさせるイージング*/
  animation-delay:1s; /*//アニメーション開始させる時間*/
  animation-iteration-count:1; /*//繰り返し回数*/
  animation-direction:normal; /*往復処理をするかどうか*/
  animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
  opacity: 0;
}

@keyframes fade-in3 {
  0% {opacity: 0; transform: translate3d(0,20px,0);}
  100% {opacity: 1; transform: translate3d(0,0,0);}
}

/*中身*/

body {
    margin: 0;
    background-color: black;
    color: white;
}

a:hover{
    opacity: 0.6;
}

header ul {
    list-style-type: none;
    display: flex;
    margin: 0;
    padding: 10px;
    font-family: impact,serif;
    font-size: 1.5rem;
    letter-spacing: 0.2rem;    
}

header li {
    padding: 0 15px;
}

header nav {
    position: fixed;
    background-color: rgba(255,0,0,0.95);
    width: 100%;
	z-index: 1;
	transition: .3s;
}

header {
	background-image: url("../img/img_ysw/back_yokohama.jpg");
	background-size: auto;
    background-repeat: no-repeat;
	background-color: black;
}

header a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

header img {
    width: auto;
}

/*標語*/
h2 {
    font-family: serif;
    font-size: 1.5rem;
	color: white;
    letter-spacing: 0.5rem;
    width: auto;
    margin: 5rem auto;
    padding: 0; 
    text-shadow:  0 0 7px rgba(0,0,0,0.9), 0 0 5px rgba(0,0,0,0.9);  
}

.contentWrapper_Title {
    width: 70%;
    margin: 0 auto;
    text-align: center;
    padding: 10rem 0;
}

.contentWrapper {
    width: 75%;
    margin: 0 auto;
    text-align: left;
    padding: 2rem;
}

/*INTRO*/
#intro {
    font-family: serif;
    text-align: center;
    font-size: 1.2rem;
    background-color: black;
}
#intro p {
    color: white;
    line-height: 3rem;
    margin: 0 auto;
    padding: 100px;
}

/*NEWS*/
#news {
    margin: 0 auto;
}

#news dl {
    width: 90%;
    margin: 0 auto;
	padding: 50px 0 100px;
}

#news dt,#news dd {
    float: left;
    text-align: left;
    padding: 10px 0;
    line-height: 160%;
}

#news dt {
    width: 10%;
}
#news dd {
    width: 80%;
}

/* STORY*/
#story p{
    width: 90%;
    margin: 0 auto;
    padding: 0 ;  
	line-height: 2rem;
}　



 全体設定 
* {
  box-sizing: border-box;
  }

section {
	padding: 0 0 100px 0;
}

/*CAST*/

#cast img {
    width: 200px;
    margin: 0 auto;
    padding: 0 15px 0 0;
}

/*
#cast　p {
    margin: 0 auto;
    padding: 10;
}
*/
h3{
	padding: 20px;
}

h5 {
    color: gray;
}


/*フッター*/
        
#upperFooter {
    background-color: red; 
    
}

#upperFooter {
    flex-grow: 1;
    flex-basis: auto;
}

footer nav {
    width : 70%;
    flex-basis: 0 auto;
}

footer p,footer h2 {
    margin: 0;
}

footer ul {
    list-style-type: none;
    display: flex;
    margin: 0;
    padding: 10px;
    font-family: impact,serif;
    font-size: 1.5rem;
    letter-spacing: 0.2rem;    
}

footer li {
    padding: 0 15px;
}

footer a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}


#bottomFooter {
    background-color: black;
    color: white;
    text-align: center;
    
    
}


/*☆☆タイトルロゴ縮小☆☆*/

@media screen and (max-width: 800px) {
    
    img {
        border: 0;
        max-width: 100%;
        height: auto;
    }
}