@charset "UTF-8";
/*----------------------------------------------------
基本設定
----------------------------------------------------*/
/* ホバー変更はやさ*/
/* ボーダーボックスの変更*/
/* ボーダーボックスの変更*/
/*----------------------------------------------------
フォント
----------------------------------------------------*/
/* Light/Medium */
/* Regular/Medium */
/* Light/Medium */
/* 游明朝体 Regular/Medium */
/* 游明朝体 Demibold */
/*----------------------------------------------------
フォント設定
----------------------------------------------------*/
/*----------------------------------------------------
中央寄せ
----------------------------------------------------*/
/* 上下左右中央寄せ */
/* 上下中央寄せ */
/* 左右中央寄せ */
/*----------------------------------------------------
背景
----------------------------------------------------*/
/*----------------------------------------------------
擬似要素
----------------------------------------------------*/
/*----------------------------------------------------
ボタン

基本のhtml
<a href="" class="btn">
  <span>私たちについて</span>
</a>
----------------------------------------------------*/
/* 初期：bg塗りあり、枠線塗りあり ⇨ hoverで反転 */
/* 初期：bg塗りなし、枠線塗りあり ⇨ hoverで反転 */
/* ボタン矢印あり 「 ---\ 」*/
/*----------------------------------------------------
基本設定
----------------------------------------------------*/
/* ホバー変更はやさ*/
/* ボーダーボックスの変更*/
/* ボーダーボックスの変更*/
/*----------------------------------------------------
フォント
----------------------------------------------------*/
/* Light/Medium */
/* Regular/Medium */
/* Light/Medium */
/* 游明朝体 Regular/Medium */
/* 游明朝体 Demibold */
/*----------------------------------------------------
フォント設定
----------------------------------------------------*/
/*----------------------------------------------------
中央寄せ
----------------------------------------------------*/
/* 上下左右中央寄せ */
/* 上下中央寄せ */
/* 左右中央寄せ */
/*----------------------------------------------------
背景
----------------------------------------------------*/
/*----------------------------------------------------
擬似要素
----------------------------------------------------*/
/*----------------------------------------------------
ボタン

基本のhtml
<a href="" class="btn">
  <span>私たちについて</span>
</a>
----------------------------------------------------*/
/* 初期：bg塗りあり、枠線塗りあり ⇨ hoverで反転 */
/* 初期：bg塗りなし、枠線塗りあり ⇨ hoverで反転 */
/* ボタン矢印あり 「 ---\ 」*/
/* 下からフワッと出てくる */
/* 上にスッと消える*/
/* 下にスッと消える*/
/* 左からスッと出てくる*/
/*----------------------------------------------------
ページ共通
----------------------------------------------------*/
.sec_title {
  text-align: center;
  margin: 0 0 70px;
}

.sec_title img {
  width: 16px;
}

/* 751- */
@media all and (min-width: 751px) {
  .sec_title img {
    width: 22px;
  }
}
/* CT⇨センターの意味*/
@media all and (min-width: 1001px) {
  .sec_title img {
    width: 25px;
  }
}
/*----------------------------------------------------
メインビジュアル
----------------------------------------------------*/
#mv {
  width: 100vw;
  height: 100vh;
  /* -750 */
  /* 751- */
  /* CT⇨センターの意味*/
}
@media all and (max-width: 751px) {
  #mv .mv_inner {
    position: relative;
    top: 20%;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    max-width: 500px;
  }
}
#mv .mv_main {
  /* -750 */
}
@media all and (max-width: 751px) {
  #mv .mv_main {
    padding: 0 13px;
  }
}
#mv .mv_title {
  position: absolute;
  top: 10%;
  left: 13px;
}
#mv .mv_title img {
  width: 85px;
}
#mv .mv_concept {
  position: absolute;
  top: 3%;
  right: 5%;
}
#mv .mv_concept img {
  width: 49px;
}
@media all and (min-width: 421px) {
  #mv {
    min-height: 800px;
  }
  #mv .mv_main {
    top: 15%;
  }
  #mv .mv_title {
    top: 30%;
  }
  #mv .mv_title img {
    width: 85px;
  }
}
@media all and (max-width: 420px) {
  #mv {
    max-height: 660px;
  }
  #mv .mv_main {
    top: 15%;
  }
  #mv .mv_title {
    top: 28%;
  }
  #mv .mv_title img {
    width: 80px;
  }
  #mv .mv_concept {
    position: absolute;
    top: -10%;
    right: 5%;
  }
  #mv .mv_concept img {
    width: 49px;
  }
}
@media all and (max-width: 374px) {
  #mv .mv_title {
    top: 20%;
  }
  #mv .mv_title img {
    width: 70px;
  }
}
@media all and (min-width: 751px) {
  #mv {
    min-height: 900px;
  }
}
@media screen and (min-width: 751px) and (max-width: 1000px) {
  #mv .mv_inner {
    position: relative;
    top: 15%;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    max-width: 50%;
  }
  #mv .mv_title {
    top: 10%;
  }
  #mv .mv_title img {
    width: 85px;
  }
}
@media all and (min-width: 1001px) {
  #mv {
    padding-top: 80px;
    max-height: 860px;
  }
  #mv .mv_main {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  #mv .mv_main img {
    width: 602px;
  }
  #mv .mv_inner {
    position: relative;
    margin: 0 auto;
    width: 1000px;
  }
  #mv .mv_concept {
    top: 0px;
    right: 5%;
  }
  #mv .mv_concept img {
    width: 96px;
  }
  #mv .mv_title {
    position: absolute;
    top: 60px;
  }
  #mv .mv_title img {
    width: 150px;
  }
}

#mv {
  position: relative;
  width: 100%;
  background: url("../images/home/mv_bg_woman_sp.png"), url("../images/home/mv_bg_kaburagi_sp.png");
  background-repeat: no-repeat, no-repeat;
  background-size: contain, contain;
  background-position: left 0 top 50px, left 0px bottom;
  /* 751- */
  /* CT⇨センターの意味*/
}
@media all and (min-width: 751px) {
  #mv {
    background: url("../images/home/mv_bg_woman_sp.png"), url("../images/home/mv_bg_kaburagi_pc.png");
    background-repeat: no-repeat, no-repeat;
    background-size: contain, contain;
    background-position: right 0 top 0px, left 0px bottom;
  }
}
@media all and (min-width: 1001px) {
  #mv {
    background: url("../images/home/mv_bg_woman_pc.jpg"), url("../images/home/mv_bg_kaburagi_pc.png");
    background-repeat: no-repeat, no-repeat;
    background-size: contain, 960px 715px;
    background-position: right center, left 0px bottom;
  }
}

/*----------------------------------------------------
メインビジュアル
----------------------------------------------------*/
#mv_test {
  position: relative;
  height: 100vh;
  width: 100%;
}

#mv_title,
#mv_detail {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 10%;
}

#mv_main {
  width: 100%;
}

.ani {
  opacity: 0;
  -webkit-transition: all 1s;
  transition: all 1s;
}

.show {
  opacity: 1;
}

/*----------------------------------------------------
メインバナー
----------------------------------------------------*/
.bannr {
  background-color: #000000;
  padding: 24px 0;
  text-align: center;
  /* 751- */
  /* CT⇨センターの意味*/
}
.bannr .date {
  margin: 0 0 25px;
}
.bannr .date2 {
  margin: 25px 0 0 0;
}
.bannr .date img {
  width: 65.2%;
}
.bannr .date2 img {
  width: 65.2%;
}
.bannr .museum img {
  width: 56.2%;
}
.bannr .museum2 img {
  width: 56.2%;
}
@media all and (min-width: 751px) {
  .bannr {
    padding: 32px 0;
  }
  .bannr .date img {
    width: 489px;
  }
  .bannr .date2 img {
    width: 489px;
  }
  .bannr .museum img {
    width: 297px;
  }
  .bannr .museum2 img {
    width: 297px;
  }
}
@media all and (min-width: 1001px) {
  .bannr .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .bannr .date {
    margin: 0 0 0px;
  }
}

/*----------------------------------------------------
お知らせ
----------------------------------------------------*/
#top_info {
  /* -750 */
}
#top_info .col .box {
  padding: 22px 3.3333%;
}
#top_info .col:first-child .box {
  /* -750 */
}
@media all and (max-width: 751px) {
  #top_info .col:first-child .box {
    margin: 0 0 55px;
  }
}
#top_info .titleInfo {
  text-align: center;
}
@media all and (max-width: 751px) {
  #top_info {
    padding: 0 0 139px;
    margin-top: 0;
    font-size: 15px;
    letter-spacing: 0em;
    line-height: 1.7;
  }
}

#news .n_date {
  margin-bottom: 0px;
  font-size: 14px;
  letter-spacing: 0em;
  line-height: 1.714;
}
#news .n_text {
  word-break: break-all;
  font-size: 14px;
  letter-spacing: 0em;
  line-height: 1.714;
}
#news .n_text.red {
  color: #E83828;
}
#news li {
  padding: 5px 0 2px;
  border-top: 1px solid #000;
}
#news li:first-child {
  padding-top: 0;
  border-top: none;
}

.scrollWrap,
.twitter_timeline {
  height: 180px;
}

.twitter_timeline {
  overflow-y: hidden;
}

/* 751- */
@media all and (min-width: 751px) {
  #top_info .box {
    padding: 10px 20px 38px 20px;
  }
  #top_info .cols {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  #top_info .cols .col {
    width: 46%;
    margin-top: 0;
  }
  #top_info .scrollWrap,
#top_info .twitter_timeline {
    height: 296px;
  }

  #news .n_date {
    font-size: 16px;
    letter-spacing: 0em;
    line-height: 1.714;
    margin-bottom: -15px;
  }
  #news .n_text {
    font-size: 16px;
    letter-spacing: 0em;
    line-height: 1.714;
  }
}
#top_info.sec_bg {
  background: -webkit-gradient(linear, left top, right top, from(#afdcde), to(rgba(175, 220, 222, 0.8))), url("../images/home/info_bg_sp.png");
  background: linear-gradient(to right, #afdcde, rgba(175, 220, 222, 0.8)), url("../images/home/info_bg_sp.png");
  background-repeat: no-repeat, no-repeat;
  background-size: 90% 835px, 90% 805px;
  background-position: left 0 top 50px, right -37px top 140px;
  /* 751- */
}
@media all and (min-width: 751px) {
  #top_info.sec_bg {
    background: -webkit-gradient(linear, left top, right top, from(rgba(175, 220, 222, 0.9)), to(rgba(175, 220, 222, 0.6))), url("../images/home/info_bg_pc.png");
    background: linear-gradient(to right, rgba(175, 220, 222, 0.9), rgba(175, 220, 222, 0.6)), url("../images/home/info_bg_pc.png");
    background-repeat: no-repeat, no-repeat;
    background-size: 78.125% 500px, 1500px 500px;
    background-position: left 0% top 85px, right 0% top 160px;
  }
}

/*----------------------------------------------------
お知らせ scroll bar
----------------------------------------------------*/
.scroll_y {
  overflow-y: scroll;
}

.scrollWrap {
  overflow-y: scroll;
}

.mCSB_inside > .mCSB_container {
  margin-right: 20px;
}

.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000000;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000000;
  width: 8px;
  border-radius: 0;
}

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000000;
}

.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000000;
}

/*----------------------------------------------------
見どころ
----------------------------------------------------*/
#highlight {
  padding: 0 0 142px;
  overflow: hidden;
  /* 751- */
  /* CT⇨センターの意味*/
}
#highlight h3 {
  font-size: 21px;
  letter-spacing: 0em;
  line-height: 1.428;
  font-family: "游明朝", "YuMincho", serif;
  font-weight: 600;
  margin-top: 50px;
}
#highlight .text {
  font-size: 15px;
  letter-spacing: 0em;
  line-height: 1.866;
  font-family: "游明朝", "YuMincho", serif;
  font-weight: 600;
}
#highlight .imageArea {
  position: relative;
  left: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#highlight .imageArea img {
  width: 50%;
}
@media all and (min-width: 751px) {
  #highlight h3 {
    font-size: 30px;
    letter-spacing: 0em;
    line-height: 1.533;
    margin: 0 0 35px;
  }
  #highlight .textArea {
    text-align: center;
  }
  #highlight .text {
    font-size: 18px;
    letter-spacing: 0em;
    line-height: 2.222;
  }
  #highlight .imageArea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 0 0 35px;
    left: initial;
  }
  #highlight .imageArea img {
    width: 28.6458%;
  }
  #highlight .imageArea .leftWoman {
    position: relative;
  }
}
@media all and (min-width: 1001px) {
  #highlight .imageArea {
    position: absolute;
    left: initial;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  #highlight .imageArea img {
    width: 23.6458%;
  }
  #highlight .imageArea .leftWoman {
    position: relative;
    top: -200px;
  }
  #highlight .imageArea .rightWoman {
    position: relative;
    bottom: -40px;
  }
}
@media all and (min-width: 1250px) {
  #highlight .imageArea img {
    width: 24.6458%;
  }
  #highlight .imageArea .leftWoman {
    position: relative;
    top: -270px;
  }
  #highlight .imageArea .rightWoman {
    position: relative;
    bottom: -40px;
  }
}
@media all and (min-width: 1700px) {
  #highlight .imageArea {
    width: 100%;
  }
  #highlight .imageArea img {
    width: 28.6458%;
    max-width: 500px;
  }
  #highlight .imageArea .leftWoman {
    position: relative;
    top: -370px;
  }
  #highlight .imageArea .rightWoman {
    position: relative;
    bottom: 120px;
    right: 0px;
  }
}

/* 背景調整 */
#highlight.sec_bg {
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0.8))), url("../images/home/highlight_bg_sp.png");
  background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url("../images/home/highlight_bg_sp.png");
  background-repeat: no-repeat, no-repeat;
  background-size: 90% 83%, 90% 83%;
  background-position: left 0 top 50px, right -37px top 100px;
  /* 751- */
  /* CT⇨センターの意味*/
}
@media all and (min-width: 751px) {
  #highlight.sec_bg {
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0.8))), url("../images/home/highlight_bg_sp.png");
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url("../images/home/highlight_bg_sp.png");
    background-repeat: no-repeat, no-repeat;
    background-size: 92% 1100px, 92% 1100px;
    background-position: left 0 top 50px, right -37px top 140px;
  }
}
@media all and (min-width: 1001px) {
  #highlight.sec_bg {
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0.8))), url("../images/home/highlight_bg_pc.png");
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url("../images/home/highlight_bg_pc.png");
    background-repeat: no-repeat, no-repeat;
    background-size: 78.125% 740px, 78.125% 740px;
    background-position: left 0 top 80px, right -37px top 140px;
  }
}

/*----------------------------------------------------
トピックス
----------------------------------------------------*/
#top_topicks {
  /* -750 */
  /* 751- */
  /* CT⇨センターの意味*/
}
#top_topicks .slide_wrap {
  margin: 60px 0px 0;
}
#top_topicks .movie_wrap {
  width: 175px;
  height: 175px;
}
#top_topicks .movie_wrap a {
  display: block;
  width: 100%;
  height: 100%;
}
@media all and (max-width: 751px) {
  #top_topicks {
    padding: 0 0 194px;
  }
  #top_topicks #topicks li:nth-child(even) {
    margin-top: 25px;
    position: relative;
  }
}
@media all and (min-width: 751px) {
  #top_topicks #topicks li:nth-child(odd) {
    margin-top: 25px;
  }
  #top_topicks .movie_wrap {
    position: relative;
    width: 200px;
    height: 200px;
  }
}
@media all and (min-width: 900px) {
  #top_topicks .movie_wrap {
    position: relative;
    width: 250px;
    height: 250px;
  }
}
@media all and (min-width: 1001px) {
  #top_topicks .movie_wrap {
    position: relative;
    width: 300px;
    height: 300px;
  }
}

@media screen and (min-width: 1129px) {
  #top_topicks .slide_wrap {
    margin-top: 40px 0 0;
  }
}
#top_topicks.sec_bg {
  background: -webkit-gradient(linear, left top, right top, from(#afdcde), to(rgba(175, 220, 222, 0.8))), url("../images/home/topicks_bg_sp.png");
  background: linear-gradient(to right, #afdcde, rgba(175, 220, 222, 0.8)), url("../images/home/topicks_bg_sp.png");
  background-repeat: no-repeat, no-repeat;
  background-size: 90% 550px, contain;
  background-position: left 0 top 50px, right -37px top 140px;
  /* 751- */
}
@media all and (min-width: 751px) {
  #top_topicks.sec_bg {
    background: -webkit-gradient(linear, left top, right top, from(rgba(175, 220, 222, 0.9)), to(rgba(175, 220, 222, 0.6))), url("../images/home/topicks_bg_pc.png");
    background: linear-gradient(to right, rgba(175, 220, 222, 0.9), rgba(175, 220, 222, 0.6)), url("../images/home/topicks_bg_pc.png");
    background-repeat: no-repeat, no-repeat;
    background-size: 78.125% 500px, 1500px 500px;
    background-position: left 0% top 85px, right 0% top 160px;
  }
}

.inner_topick {
  /* 751- */
  /* CT⇨センターの意味*/
}
@media all and (min-width: 751px) {
  .inner_topick {
    margin: 0 70px;
  }
}
@media all and (min-width: 1001px) {
  .inner_topick {
    margin: 0 auto;
    width: 1000px;
  }
}

/*----------------------------------------------------
ムービー
----------------------------------------------------*/
#top_movie {
  /* -750 */
  /* 751- */
}
#top_movie .slide_wrap {
  margin: 60px 12px 0;
}
@media all and (max-width: 751px) {
  #top_movie {
    padding: 0 0 148px;
  }
  #top_movie .inner {
    padding: 0;
  }
}
@media all and (min-width: 751px) {
  #top_movie .slide_wrap {
    margin-top: 40px 25px 0;
  }
  #top_movie .movie_wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
  }
  #top_movie .movie_wrap iframe, #top_movie .movie_wrap img {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
}

@media screen and (min-width: 1129px) {
  #top_movie .slide_wrap {
    margin-top: 40px 0 0;
  }
}
#top_movie.sec_bg {
  background: -webkit-gradient(linear, left top, right top, from(#afdcde), to(rgba(175, 220, 222, 0.8))), url("../images/home/movie_bg_sp.png");
  background: linear-gradient(to right, #afdcde, rgba(175, 220, 222, 0.8)), url("../images/home/movie_bg_sp.png");
  background-repeat: no-repeat, no-repeat;
  background-size: 90% 450px, contain;
  background-position: left 0 top 50px, right -37px top 100px;
  /* 751- */
}
@media all and (min-width: 751px) {
  #top_movie.sec_bg {
    background: -webkit-gradient(linear, left top, right top, from(rgba(175, 220, 222, 0.9)), to(rgba(175, 220, 222, 0.6))), url("../images/home/movie_bg_pc.png");
    background: linear-gradient(to right, rgba(175, 220, 222, 0.9), rgba(175, 220, 222, 0.6)), url("../images/home/movie_bg_pc.png");
    background-repeat: no-repeat, no-repeat;
    background-size: 78.125% 500px, 1500px 500px;
    background-position: left 0% top 85px, right 0% top 160px;
  }
}
/*# sourceMappingURL=home.css.map */