@charset "utf-8";

/*
Theme Name:rashinbanban
*/

/* ====================
動画で見る12の物語ページ - 一覧ページ
==================== */

/* .top_topics_title::before {
    background: url(../images/top/more_link.png) no-repeat;
    content: '';
    display: inline-block;
    margin-right: 5px;
    width: 15px;
    height: 15px;
    background-size: contain;
} */

.movie_all_title_enter {
  position: relative;
}

.movie_all_title_enter::before {
  background: url(../images/movie/jonathan_movie.png) no-repeat;
  content: '';
  display: inline-block;
  position: absolute;
  left: 15px;
  top: -180px;
  width: 170px;
  height: 170px;
  background-size: contain;
}
@media screen and (min-width: 550px){	
  .movie_all_title_enter::before {
    top: -70px;
    left: 5%;
  }
}
@media screen and (min-width: 650px){	
  .movie_all_title_enter::before {
    top: -70px;
    left: 50px;
  }
}
@media screen and (min-width: 668px){	
  .movie_all_title_enter::before {
    top: -90px;
    left: 30px;
  }
}
@media screen and (min-width: 1020px){	
  .movie_all_title_enter::before {
    left: 100px;
  }
}
@media screen and (min-width: 1150px){	
  .movie_all_title_enter::before {
    left: 200px;
  }
}
@media screen and (min-width: 1280px){	
  .movie_all_title_enter::before {
    left: 280px;
  }
}
@media screen and (min-width: 1550px){	
  .movie_all_title_enter::before {
    left: 380px;
  }
}
@media screen and (min-width: 1650px){	
  .movie_all_title_enter::before {
    left: 480px;
  }
}
@media screen and (min-width: 1750px){	
  .movie_all_title_enter::before {
    left: 580px;
  }
}
@media screen and (min-width: 1850px){	
  .movie_all_title_enter::before {
    left: 600px;
  }
}
@media screen and (min-width: 1950px){	
  .movie_all_title_enter::before {
    left: 700px;
  }
}
@media screen and (min-width: 2050px){	
  .movie_all_title_enter::before {
    left: 800px;
  }
}

.movie_all_content {
  margin: 50px auto;
}
@media screen and (min-width: 768px){	
  .movie_all_content {
    margin: 50px auto;
  }
}

.movie_all_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.movie_all_item {
    width: calc(100%);
}
@media(min-width: 768px){
  .movie_all_item {
      width: calc(48%);
  }
}
@media(min-width: 1280px){
  .movie_all_item {
      width: calc(32%);
  }
}

.movie_all_item_movie_link {
  text-decoration: none;
}

.movie_all_item_title {
  color: #0067bc;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}
@media(min-width: 1280px){
  .movie_all_item_title {
    min-height: 107px;
  }
}

.movie_all_item_title_icon_wrap {
  width: 23%;
  margin-right: 2%;
}

.movie_all_item_title_text {
  width: 75%;
}

.movie_all_item_title_text_title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.movie_all_item_movie_button {
  background: #1c56a7;
  color: #fff;
  font-size: 0.8rem;
  margin-top: 20px;
  margin-right: 0;
  margin-left: auto;
  padding: 10px;
  text-align: center;
  width: 135px;
  border-radius: 50px;
}

/* ====================
動画で見る12の物語ページ - 個別ページ
==================== */

.movie_one_title_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}

.movie_one_title_icon_wrap {
  width: 25%;
  max-width: 150px;
  margin-right: 2%;
}

.movie_one_title {
  font-size: 2rem;
  margin-bottom: 10px;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
@media screen and (min-width: 768px){	
  .movie_one_title {
    font-size: 3.25rem;
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 1280px){	
  .movie_one_title {
    width: 30%;
  }
}

@media screen and (min-width: 768px){	
  .movie_one_title_read {
    font-size: 1.3rem;
    line-height: 2rem;
  }
}
@media screen and (min-width: 1280px){	
  .movie_one_title_read {
    width: 70%;
  }
}

.movie_one_text {
  width: 73%;
}
@media screen and (min-width: 1280px){	
  .movie_one_text {
    display: flex;
    gap: 30px;
  }
}

.movie_one_select_wrap {
  padding-bottom: 50px;
}
@media screen and (min-width: 830px){	
  .movie_one_select_wrap {
    padding-bottom: 100px;
  }
}

.kokoronohikari_kirakiraaction {
  width: 100%;
  max-width: 370px;
  margin: 50px auto 0;
}
@media screen and (min-width: 768px){	
  .kokoronohikari_kirakiraaction {
    margin-right: 0;
    margin-left: auto;
  }
}

/* ====================
動画で見る12の物語ページ - 個別ページ(背景)
==================== */

/* 月の心 */
.movie_one_wrap.moon {
  background: url(../images/movie/movie_images/bg_movie_tsuki.jpg);
  background-size: cover;
  margin-top: -10px;
  padding-bottom: 50px;
  background-position: center bottom;
}
@media screen and (min-width: 830px){	
  .movie_one_wrap.moon {
    padding-bottom: 100px;
  }
}

/* 火の心 */
.movie_one_wrap.fire {
  background: url(../images/movie/movie_images/bg_movie_hi.jpg);
  background-size: cover;
  margin-top: -10px;
  padding-bottom: 50px;
  background-position: center bottom;
}
@media screen and (min-width: 830px){	
  .movie_one_wrap.fire {
    padding-bottom: 100px;
  }
}

/* 空の心 */
.movie_one_wrap.sky {
  background: url(../images/movie/movie_images/bg_movie_sora.jpg);
  background-size: cover;
  margin-top: -10px;
  padding-bottom: 50px;
  background-position: center bottom;
}
@media screen and (min-width: 830px){	
  .movie_one_wrap.sky {
    padding-bottom: 100px;
  }
}

/* 山の心 */
.movie_one_wrap.mountain {
  background: url(../images/movie/movie_images/bg_movie_yama.jpg);
  background-size: cover;
  margin-top: -10px;
  padding-bottom: 50px;
  background-position: center bottom;
}
@media screen and (min-width: 830px){	
  .movie_one_wrap.mountain {
    padding-bottom: 100px;
  }
}

/* 稲穂の心 */
.movie_one_wrap.rice {
  background: url(../images/movie/movie_images/bg_movie_inaho.jpg);
  background-size: cover;
  margin-top: -10px;
  padding-bottom: 50px;
  background-position: center bottom;
}
@media screen and (min-width: 830px){	
  .movie_one_wrap.rice {
    padding-bottom: 100px;
  }
}

/* 泉の心 */
.movie_one_wrap.spring {
  background: url(../images/movie/movie_images/bg_movie_izumi.jpg);
  background-size: cover;
  margin-top: -10px;
  padding-bottom: 50px;
  background-position: center bottom;
}
@media screen and (min-width: 830px){	
  .movie_one_wrap.spring {
    padding-bottom: 100px;
  }
}

/* 川の心 */
.movie_one_wrap.river {
  background: url(../images/movie/movie_images/bg_movie_kawa.jpg);
  background-size: cover;
  margin-top: -10px;
  padding-bottom: 50px;
  background-position: center bottom;
}
@media screen and (min-width: 830px){	
  .movie_one_wrap.river {
    padding-bottom: 100px;
  }
}

/* 大地の心 */
.movie_one_wrap.earth {
  background: url(../images/movie/movie_images/bg_movie_daichi.jpg);
  background-size: cover;
  margin-top: -10px;
  padding-bottom: 50px;
  background-position: center bottom;
}
@media screen and (min-width: 830px){	
  .movie_one_wrap.earth {
    padding-bottom: 100px;
  }
}

/* 観音の心 */
.movie_one_wrap.kannon {
  background: url(../images/movie/movie_images/bg_movie_kannon.jpg);
  background-size: cover;
  margin-top: -10px;
  padding-bottom: 50px;
  background-position: center bottom;
}
@media screen and (min-width: 830px){	
  .movie_one_wrap.kannon {
    padding-bottom: 100px;
  }
}

/* 風の心 */
.movie_one_wrap.wind {
  background: url(../images/movie/movie_images/bg_movie_kaze.jpg);
  background-size: cover;
  margin-top: -10px;
  padding-bottom: 50px;
  background-position: center bottom;
}
@media screen and (min-width: 830px){	
  .movie_one_wrap.wind {
    padding-bottom: 100px;
  }
}

/* 海の心 */
.movie_one_wrap.sea {
  background: url(../images/movie/movie_images/bg_movie_umi.jpg);
  background-size: cover;
  margin-top: -10px;
  padding-bottom: 50px;
  background-position: center bottom;
}
@media screen and (min-width: 830px){	
  .movie_one_wrap.sea {
    padding-bottom: 100px;
  }
}

/* 太陽の心 */
.movie_one_wrap.sun {
  background: url(../images/movie/movie_images/bg_movie_taiyo.jpg);
  background-size: cover;
  margin-top: -10px;
  padding-bottom: 50px;
  background-position: center bottom;
}
@media screen and (min-width: 830px){	
  .movie_one_wrap.sun {
    padding-bottom: 100px;
  }
}