/*
Theme Name: 群馬芸術文化バックアップセンター　トップページ
*/

/* CSS Document */


/* --- トップページ ------------------------------------------------------------------------------------- */
/* メインイメージの全画面化 */
.top-img {
  width: 100% ;
  height: 100vh ;
  background: url("../images/topimg.gif") no-repeat center center / cover;
  background-attachment: fixed ;
  background-position: 50% 70px;
  padding-top:180px;
  position: relative;
}
.twitter-window-pc {
  position:absolute; 
  top: 170px; 
  right: 20px;
  width: 250px;
  height: 250px;
}
.twitter-window-sp {
  display: none;
}
.artist-tourokubtn {
  position:absolute; 
  top: 530px; 
  right: 40px;
}
.artist-tourokubtn img {
  width: 120px;
  height: 120px;
}
@media screen and (max-width:1000px) {
  .top-img {
    background-size: 140%;
    height: 70vh ;
  }
  .twitter-window-pc {
    top: 120px; 
    right: 20px;;
  }
  .artist-tourokubtn {
    top: 460px; 
    right: 40px;
  }
}
@media screen and (max-width:520px) {
  .top-img {
    height: 40vh ;
  }
  .twitter-window-pc {
    display: none;
  }
  .twitter-window-sp {
    display: block;
    width: 80%;
    height: 250px;
    margin: 30px auto;
  }
  .artist-tourokubtn {
    top: 160px; 
    right: 20px;
  }
  .artist-tourokubtn img {
    width: 100px;
    height: 100px;
  }
}


/* リード文エリア */
.lead {
  width: 1000px;
  background: #fff;
  text-align: center;
  padding: 100px 20px 30px 20px;
  margin: 0 auto;
  color: #332301;
}
@media screen and (max-width:1000px) {
  .lead {
    width: 100%;
    padding: 60px 20px 30px 20px;
  }
}
.lead h2 {
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  font-size: 2.0em;
  line-height: 1.4em;
}
.lead img{
  margin: 20px;
  max-width: 90%;
}
.lead p{
  margin: 30px 15px;
}

/* btn_yellow */
.btn_yellow a {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  max-width: 320px;
  padding: 10px 25px;
  color: #332301;
  transition: 0.3s ease-in-out;
  font-weight: bold;
  background: #f2ec00;
  border-radius: 50px;
  /*border: 0.2rem solid #543618;*/
  box-shadow: 0.2rem 0.2rem 0px 0.1rem #ccc;
  text-decoration: none;
  font-size: 1.2em;
}
.btn_yellow a:hover {
transform: translate3d(0.2rem, 0.2rem, 0);
box-shadow: none;
opacity: 1;
transition: all 0.2s;
}


/* お知らせエリア */
.wrap {
  position: relative;
}
.wrap-news {
  background-color: #5483d6;
  color: #fff;
}
.wrap-inner {
  width: 1000px;
  text-align: center;
  margin: 0 auto;
  padding: 20px auto;
}
@media screen and (max-width:1000px) {
  .wrap-inner {
    width: 90%;
    margin: 0 auto;
  }
}
.wrap-news .titleimg {
  margin: 50px auto;
}
.wrap-news .news_list {
	display: flex;
	flex-wrap: wrap;
	width:800px;
	margin: 0 auto;
  line-height: 1.2em;
}
.wrap-news .news_list dt {
	flex-basis: 120px;
  text-align: left;
  margin-bottom: 15px;
}
.wrap-news .news_list dd {
	flex-basis: 680px;
  text-align: left;
  margin-bottom: 15px;
}
.wrap-news .news_list dd a {
  color:#FFF;
}
@media screen and (max-width:800px) {
  .wrap-news .news_list {
    width:100%;
    margin: 0 auto;
  }
  .wrap-news .news_list dt {
    flex-basis:100%;
    margin-bottom: 0px;
  }
  .wrap-news .news_list dd {
    flex-basis: 100%;
    margin-bottom: 20px;
  }
}

/* ユーザーエリア */
.user-frex {
  display: flex;
}
.user-bg {
  background-image: url("../images/user-bg.png");
  background-position: left bottom 20px;
  background-repeat: no-repeat; /* 背景画像を繰り返さない */
}
.user-box {
  background: rgba(220,240,240,0.8);
  border-radius: 10px;
  width: 45%;
  margin: 30px 2%;
  padding: 30px;
  color: #313131;
}
.user-box h2 {
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  color: #313131;
  font-size: 2em;
  line-height: 1.2em;
  border-bottom: #313131 1px solid;
  padding-bottom: 13px;
}
.user-box img {
  height: 200px;
  margin: 15px auto;
}
.user-box p {
  font-size: 14px;
  text-align: left;
  line-height: 1.8em;
}
@media screen and (max-width:1000px) {
  .user-bg {
    background-image: none;
  }
}
@media screen and (max-width:520px) {
  .user-frex {
    display: block;
  }
  .user-box {
    width: 95%;
    margin: 50px 3%;
  }
}

/* アーティストエリア */
.wrap-artist {
  background-color: #f0eb32;
  color: #313131;
}
.wrap-artist .titleimg {
  margin: 50px auto;
}

.artist-slider {
  width: 100%;
  margin: 30px 0 20px 0;
}
.artist-slider .as-box {
  width: 300px;
  margin: 10px;
  background-color: #fff;
  text-align: center;
}
/*.artist-slider img {
  backface-visibility: hidden;
  width: 100%;
  height: 300px;
  object-fit: cover;
}*/
.artist-slider img {
  backface-visibility: hidden;/*追加*/
  width: 100%;
  height: 300px;
  object-fit: contain;
}
.artist-slider h3 {
  font-size: 18px;
  line-height: 1.3em;
  margin: 0 10px;
}
.artist-slider h4 {
  font-size: 13px;
  line-height: 1.3em;
  margin: 10px 10px 0 10px;
  font-weight: normal;
}
.artist-slider p {
  font-size: 14px;
  line-height: 1.3em;
  margin: 10px;
}
.artist-slider a {
  text-decoration: none;
  color: #313131;
}


/* ムービーエリア */
.wrap-movie {
  margin-bottom: 50px;
}
.wrap-movie .titleimg {
  margin: 100px auto 30px auto ;
  color: #313131;
}
.wrap-movie .movie-lead{
  margin: 20px;
}
.movie-frex {
  display: flex;
  flex-wrap: wrap;
}
.movie-box {
  width:33%;
  padding: 10px 4px;
}
.movie-box img {
  width: 100%;
}
.movie-box p {
  font-size: 14px;
}
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}
.wrap-movie p {
  font-size: 14px;
}
@media screen and (max-width:1000px) {
  .movie-box {
    width:50%;
  }
}
@media screen and (max-width:667px) {
  .movie-box {
    width:100%;
  }
  .wrap-movie .titleimg {
    margin: 30px auto 10px auto ;
  }
}

/* よくあるご質問・お問い合わせエリア */
.wrap-qa {
  background-color: #dcf0f0;
  color: #504628;
}
.qa-flex {
  display: flex;
}
.qa-box {
  width: 45%;
  margin: 5%;
  color: #313131;
}
.qa-box h2 {
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  font-size: 2em;
  line-height: 1.8em;
  border-top: #313131 1px solid;
  border-bottom: #313131 1px solid;
  padding: 30px auto;
}
.qa-box p {
  font-size: 14px;
  text-align: left;
  line-height: 1.8em;
  margin: 15px auto ;
}
.qa-box p.prof {
  text-align: center;
}
@media screen and (max-width:520px) {
  .qa-flex {
    display: block;
    padding: 10px;
  }
  .qa-box {
    width: 90%;
    margin: 50px 5%;
  }
}

/* バナーエリア */
.wrap-banner {
  background-color: #fff;
  margin: 30px 0;
}
.bn-flex {
  display: flex;
  flex-wrap: wrap;
  align-self: flex-start;
}
.bn-box {
  width: 220px;
  margin: 15px;
}
@media screen and (max-width:520px) {
  .bn-flex {
    display: block;
    padding: 10px;
  }
  .bn-box {
    width: 90%;
    margin: 5%;
    text-align: center;
  }
}

/* 飛び出すイラスト */
.top-pbj01 {
  position: absolute;
  bottom:-70px;
  left:50px;
}
.top-pbj02 {
  position: absolute;
  bottom:-50px;
  right:50px;
}
.top-pbj03 {
  position: absolute;
  top:100px;
  left:50px;
}
.top-pbj04 {
  position: absolute;
  bottom:-100px;
  right:50px;
}
@media screen and (max-width:1000px) {
  .top-pbj01, .top-pbj02, .top-pbj03, .top-pbj04 {
    display: none;
  }
}