@charset "utf-8";
/* ========================================================
	top.css => トップページ用CSS
======================================================== */
.slider_01 {
      position: relative;
}
/*テキストデザイン共通*/
.slide_text {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-weight: 400;
      color: #fff;
}
.slide_text .en {
      font-family: var(--font_mon);
      font-weight: bold;
}
.slide_text .ja {
      letter-spacing: 2px;
      line-height: 1.4;
      text-shadow: -1px 0px 6px rgba(0, 159, 102, 0.95);
}
.slide_text .ja span {
      font-size: 0.7em;
}
/*テキストデザインPC*/
@media screen and (min-width: 2001px), print {
      .slide {
            max-width: 2000px;
            margin: auto;
      }
      .slide_text {
            width: 950px;
      }
      .slide_text .en {
            font-size: 4.5rem;
      }
      .slide_text .ja {
            font-size: 7.3rem;
      }
}
/*テキストデザインSP*/
@media screen and (max-width: 2000px) {
      .slide_text {
            width: 50%;
            font-size: 0.8vw;
      }
      .slide_text .en {
            font-size: 2.8em;
      }
      .slide_text .ja {
            font-size: 4.5em;
      }
}
/*sp　すべて*/
@media screen and (max-width: 680px) {
      .slide_text {
            position: static;
            top: auto;
            left: auto;
            transform: none;
            font-size: 2.4vw;
      }
      .slider_01 {
            padding-top: 11em;
      }
      .slider_01:before {
            border-radius: var(--rudius_sp);
            content: "";
            background: var(--main_gra);
            height: calc(100% - 3em);
            width: calc(100% - 2.5em);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
      }
      .slide_text > * {
            position: absolute;
      }
      .slide_text .en {
            font-size: 2.0em;
            left: 3em;
            bottom: 4.5em;
            line-height: 1.4;
      }
      .slide_text .ja {
            width: 100%;
            top: 0.9em;
            left: 50%;
            transform: translate(-50%, -0%);
            text-align: center;
      }
}
/*top_bg
--------------------------------------------------------------------------------------------------*/
.top_bg {
      position: relative;
}
.top_bg:before {
      content: "";
      height: 100%;
      width: 100%;
      position: absolute;
      top: -14em;
      left: 0;
      background: url("../images/top/top_bg.svg") no-repeat;
      background-size: cover;
      background-position: left top;
      z-index: -1;
}
/*re_top_news_area
--------------------------------------------------------------------------------------------------*/
.re_top_news_area {
      padding: 5em 0 1em 0;
}
.re_top_news {
      background: #fff;
      box-sizing: border-box;
      border: solid 3px var(--col_main);
      padding: 1.5em 2.5em;
}
@media screen and (max-width: 680px) {
      .re_top_news_area {
            padding: 5em 0 3em 0;
      }
      .re_top_news {
            padding: 1em 1.5em;
      }
}
/*re_top_voice_area
--------------------------------------------------------------------------------------------------*/
.re_top_voice_area {
      padding: 10em 0;
}
.re_top_voice_flex {
      display: flex;
      justify-content: space-between;
}
.re_top_voice_flex .title_box {
      width: 20%;
}
.re_top_voice_flex .list_box {
      width: 80%;
      position: relative;
      padding-bottom: 14em;
}
.re_top_voice_flex .list_box:before {
      content: "";
      background: var(--main_gra);
      height: calc(100% + 6em);
      width: 300%;
      border-radius: var(--rudius_pc);
      position: absolute;
      top: -4em;
      left: 8em;
      z-index: -1;
}
@media screen and (max-width: 680px) {
      .re_top_voice_area {
            padding: 4em 0;
      }
      .re_top_voice_flex {
            display: block;
      }
      .re_top_voice_flex .title_box {
            margin-bottom: 2em;
            width: auto;
      }
      .re_top_voice_flex .list_box {
            width: auto;
            padding-bottom: 0;
      }
      .re_top_voice_flex .list_box:before {
            content: none;
      }
      .re_top_voce_btn {
            margin-top: 2em;
      }
}
/*re_blog_list*/
.re_top_voice_area .re_blog_list {
      align-items: flex-start;
}
.re_top_voice_area .re_blog_list > li:nth-child(1) {
      transform: translateY(12em);
}
.re_top_voice_area .re_blog_list > li:nth-child(2) {
      transform: translateY(6em);
}
@media screen and (max-width: 680px) {
      .re_top_voice_area .re_blog_list > li:nth-child(1) {
            transform: translateY(0em);
      }
      .re_top_voice_area .re_blog_list > li:nth-child(2) {
            transform: translateY(0em);
      }
}
/*re_top_movie_area
--------------------------------------------------------------------------------------------------*/
.re_top_movie_area {
      padding: 10em 0;
}
.re_top_movie_flex {
      display: flex;
      justify-content: space-between;
      flex-direction: row-reverse;
      align-items: center;
      gap: 0 7%;
}
.re_top_movie_flex .text_box {
      width: 38%;
}
.re_top_movie_flex .img {
      position: relative;
      width: 62%;
}
.re_top_movie_lead {
      margin-top: 3em;
}
@media screen and (max-width: 680px) {
      .re_top_movie_area {
            /*     padding: 10em 0 3em 0;*/
            padding: 5em 0 3em 0;
      }
      .re_top_movie_flex {
            display: block;
      }
      .re_top_movie_flex .text_box {
            width: auto;
      }
      .re_top_movie_flex .img {
            width: auto;
      }
      .re_top_movie_lead {
            margin-top: 2em;
      }
}
.re_top_movie_flex .movie_box {
      width: calc(100% - 6em);
      margin: auto 0 auto auto;
      aspect-ratio: 789/408;
      position: relative;
}

.re_top_movie_flex .movie_box > div{
	      box-shadow: var(--box_shadow);
	
}
.re_top_movie_flex .movie_box > * :after {
      position: relative;
}
.re_top_movie_flex .movie_box:before, .re_top_movie_flex .movie_box > * :after {
      position: absolute;
      content: "";
}
.re_top_movie_flex .movie_box:before {
      background: var(--main_gra);
      height: 100%;
      width: 100%;
      border-radius: var(--rudius_pc);
      z-index: -1;
      top: 5em;
      left: -6em;
}
.re_top_movie_flex .movie_box > * :after {
      background: url("../images/movie.svg") no-repeat;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      aspect-ratio: 1;
      width: 12rem;
}
.re_top_movie_flex .movie_box img, .re_top_movie_flex .movie_box iframe, .re_top_movie_flex .movie_box video {
      width: 100%;
	height: auto!important;
      object-fit: cover;
      object-position: center;
      aspect-ratio: 16/9;
}
@media screen and (max-width: 680px) {
      .re_top_movie_flex .movie_box {
            width: 100%;
            margin-top: 2em;
      }
      .re_top_movie_flex .movie_box:before {
            top: 1em;
            left: auto;
            right: -0.6em;
            border-radius: var(--rudius_sp);
      }
      .re_top_movie_flex .movie_box > * :after {
            width: 5rem;
      }
}
/*re_top_blog_area
--------------------------------------------------------------------------------------------------*/
.re_top_blog_area {
      padding: 10em 0 13em 0;
}
.re_top_blog_area_inner {
      position: relative;
      min-height: 20em;
}
.re_top_blog_area .title_box {
      width: 20%;
      position: relative;
}
.re_top_blog_area .title_box:before {
      position: absolute;
      content: "";
      background: var(--col_main_ll);
      aspect-ratio: 725/554;
      width: 250%;
      left: -80%;
      top: -8em;
      border-radius: 0 10px 10px 0;
      z-index: -1;
}
.re_top_blog_area .list_box {
      width: 70%;
      position: absolute;
      right: -20px;
      top: -20px;
}
@media screen and (min-width:2001px), print {
      .re_top_blog_area {
            max-width: 1800px;
            margin: auto;
	            padding: 10em 0 16em 0;
      }
}
@media screen and (max-width: 680px) {
      .re_top_blog_area {
            padding: 3em 0 5em 0;
      }
      .re_top_blog_area .title_box {
            width: auto;
            margin-bottom: 1em;
      }
      .re_top_blog_area .list_box {
            width: auto;
            position: static;
            right: auto;
            top: auto;
      }
      .re_top_blog_area .title_box:before {
            content: none;
      }
}
/*re_blog_slider
--------------------------------------------------------------------------------------------------*/
.re-blog-slider li {
      margin: 20px;
}
@media screen and (max-width: 680px) {
      .re-blog-slider li {
            margin: 20px 10px;
      }
}
/*矢印　ドッド
------------------------------------------------------------*/
/*dods*/
.re-blog-slider .slick-dots {
      bottom: -4.5em;
      z-index: 100;
      width: calc(100% - 25em);
      margin-left: 25em;
      text-align: left;
}
.re-blog-slider .slick-dots li {
      margin: auto 5px !important;
      box-shadow: var(--box_shadow_none);
      background: transparent;
      width: 2em;
}
.re-blog-slider .slick-dots li button:before {
      opacity: 1 !important;
      content: "";
      background: var(--bg_gray_ll);
      width: 100%;
      height: 2px;
      top: 50%;
}
.re-blog-slider .slick-dots li.slick-active button:before {
      opacity: 1 !important;
      background: var(--col_main) !important;
}
@media screen and (max-width: 960px) {
      .re-blog-slider .slick-dots {
            width: calc(100% - 12em);
            margin-left: 20px;
      }
}
@media screen and (max-width: 680px) {
      .re-blog-slider .slick-dots {
            bottom: -2.5em;
            width: 60%;
            text-align: center;
            margin-left: 20%;
            margin-right: 20%;
      }
      .re-blog-slider .slick-dots li {
            margin: auto 3px !important;
            width: 1.8em;
      }
}
/*arrow*/
/*矢印リセット*/
.re-blog-slider .slick-prev:before, .re-blog-slider .slick-next:before {
      font-size: inset;
      opacity: 1;
      background: url("../images/slide_arrow.svg") no-repeat;
      background-position: center;
      background-size: contain;
      aspect-ratio: 1;
      width: 100%;
      color: transparent;
      position: absolute;
      top: 0;
      right: 0;
}
.re-blog-slider .slick-next:before {
      transform: rotate(-180deg);
}
.re-blog-slider .slick-prev, .re-blog-slider .slick-next {
      top: calc(100% + 30px);
      margin-top: auto;
      aspect-ratio: 1;
      height: 52px;
      width: auto;
      z-index: 101;
}
.re-blog-slider .slick-prev {
      left: auto;
}
@media screen and (min-width:2001px), print {
      .re-blog-slider .slick-prev {
            right: calc(20px + 52px);
      }
      .re-blog-slider .slick-next {
            right: 0;
      }
}
@media screen and (max-width: 2000px) {
      .re-blog-slider .slick-prev {
            right: calc(30% + 52px);
      }
      .re-blog-slider .slick-next {
            right: 28%;
      }
}
@media screen and (max-width: 1500px) {
      .re-blog-slider .slick-prev {
            right: calc(15% + 52px);
      }
      .re-blog-slider .slick-next {
            right: 12%;
      }
}
@media screen and (max-width: 680px) {
      .re-blog-slider .slick-prev, .re-blog-slider .slick-next {
            top: 100%;
      }
      .re-blog-slider .slick-prev {
            right: auto;
            left: 10px;
      }
      .re-blog-slider .slick-next {
            right: 10px;
      }
}
/*re_blog_btn*/
.re_blog_btn {
      position: relative;
      padding-left: 20px;
      padding-top: 0em;
}
@media screen and (max-width: 960px) {
      .re_blog_btn {
            padding-top: 5em;
      }
}
@media screen and (max-width: 680px) {
      .re_blog_btn {
            padding-top: 5em;
            padding-left: 0;
            margin: auto;
            text-align: center;
      }
}
/*futre_area
--------------------------------------------------------------------------------------------------*/
.futre_area {
      width: 1900px;
      margin: auto;
      padding: 10em 0;
}
@media screen and (max-width: 1900px) {
      .futre_area {
            width: auto;
      }
}
@media screen and (max-width: 680px) {
      .futre_area {
            padding: 5em 0;
      }
}
/*re_title_deco*/
.re_title_deco {
      text-align: center;
}
.re_title_deco > span {
      display: inline-block;
      position: relative;
      background: #fff;
      width: 100%;
      line-height: 1;
}
.re_title_deco > span:before, .re_title_deco > span:after {
      aspect-ratio: 614/71;
      width: 60rem;
      height: auto;
      content: "";
      position: absolute;
      transform: translate(-0%, -50%);
      background: url("../images/re_midashi_bg.svg") no-repeat;
      background-size: contain;
      background-position: center;
}
.re_title_deco > span:before {
      left: 0;
      top: 0.3em;
}
.re_title_deco > span:after {
      right: 0;
      top: 0em;
}
@media screen and (max-width: 1900px) {
      .re_title_deco > span:before, .re_title_deco > span:after {
            width: 25%;
            top: 50% !important;
            transform: translate(-0%, -50%);
      }
}
@media screen and (max-width: 680px) {
      .re_title_deco > span:before {
            content: none;
      }
      .re_title_deco > span:after {
            right: 0;
            top: -1.5em !important;
            width: 100%;
            transform: translate(-0%, -0%);
      }
}
/*re_futre_flex*/
.re_futre_flex {
      gap: 0 5%;
}
@media screen and (max-width: 680px) {
      .re_futre_flex {
            width: 80%;
            margin: auto;
            text-align: center;
      }
      .re_futre_btn {
            margin-top: 1em;
      }
}