@charset "UTF-8";
/*! Writen  by SCSS */
.mainvisual {
  overflow: hidden;
  position: relative;
  /*
  .main_button_group{
  	position: absolute;
  	right:40px;
  	bottom:60px;
  	display: flex;
  	justify-content: flex-end;
  	align-items:center;
  	column-gap:15px;
  	z-index: 5;
  	@include mq($br_sp){
  		right: 20px;
  		bottom: 30px;
  	}
  	&.start{
  		button{
  			&.main_start{
  				background:#F8DA05;
  			}
  		}
  	}
  	&.pause{
  		button{
  			&.main_pause{
  				background:#F8DA05;
  			}
  		}
  	}
  	button{
  		background-color: transparent;
  		border: none;
  		cursor: pointer;
  		padding: 0;
  		appearance: none;
  		width:24px;
  		aspect-ratio:1;
  		background:#FFF;
  		display: flex;
  		justify-content: center;
  		align-items:center;
  		border-radius: 50%;
  		transition:0.3s all ease-in-out 0s;
  		body:not(.mobile) &:hover,
  		&.active{
  			background:#F8DA05;
  		}
  		img{
  			display: block;
  		}
  		&.main_start{
  			img{
  				transform:translate(1px,0);
  			}
  		}
  		&.main_pause{
  			img{
  				transform:translate(0,0);
  			}
  		}
  	}
  	.main_pagination{
  		position: static;
  		display: flex;
  		justify-content:center;
  		width: auto;
  		column-gap:10px;
  		.swiper-pagination-bullet{
  			opacity: 0.5;
  			margin:0;
  			width:10px;
  			height:10px;
  			aspect-ratio:1;
  			background:#FFF;
  			transition:0.3s all ease-in-out 0s;
  			body:not(.mobile) &:hover{
  				opacity: 1;
  			}
  			&.swiper-pagination-bullet-active{
  				opacity: 1;
  				background:#F8DA05;
  			}
  		}
  	}
  }
  */ }
  .mainvisual .mainvisual_in {
    aspect-ratio: 1600/720;
    position: relative; }
    @media screen and (max-width: 768px) {
      .mainvisual .mainvisual_in {
        /*	テキスト量が多いので調整かけます	*/
        aspect-ratio: 1600/800; } }
    @media screen and (max-width: 480px) {
      .mainvisual .mainvisual_in {
        aspect-ratio: 8/10; } }
    .mainvisual .mainvisual_in .main_swiper {
      position: absolute;
      inset: 0;
      z-index: 0; }
      .mainvisual .mainvisual_in .main_swiper .swiper-wrapper .swiper-slide {
        position: relative; }
        .mainvisual .mainvisual_in .main_swiper .swiper-wrapper .swiper-slide.swiper-slide-active .main_image, .mainvisual .mainvisual_in .main_swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .main_image, .mainvisual .mainvisual_in .main_swiper .swiper-wrapper .swiper-slide.swiper-slide-prev .main_image {
          transform: translateX(0) scale(1);
          animation: zoom_in 10s linear 0s normal both; }
          @media screen and (max-width: 480px) {
            .mainvisual .mainvisual_in .main_swiper .swiper-wrapper .swiper-slide.swiper-slide-active .main_image, .mainvisual .mainvisual_in .main_swiper .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active .main_image, .mainvisual .mainvisual_in .main_swiper .swiper-wrapper .swiper-slide.swiper-slide-prev .main_image {
              animation: zoom_in 10s linear 0s normal both;
              /*	横スライドにさせる場合は下記を使用	*/ } }
        .mainvisual .mainvisual_in .main_swiper .swiper-wrapper .swiper-slide .main_image {
          position: absolute;
          inset: 0;
          width: 100%;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: cover;
          will-change: transform; }
          @media screen and (max-width: 480px) {
            .mainvisual .mainvisual_in .main_swiper .swiper-wrapper .swiper-slide .main_image {
              /*	横スライドにさせる場合は下記を使用	*/ } }
          .mainvisual .mainvisual_in .main_swiper .swiper-wrapper .swiper-slide .main_image.main01 {
            background-image: url("../images/top/main/main01.jpg"); }
            @media screen and (max-width: 480px) {
              .mainvisual .mainvisual_in .main_swiper .swiper-wrapper .swiper-slide .main_image.main01 {
                background-image: url("../images/top/main/main01_sp.jpg"); } }
          .mainvisual .mainvisual_in .main_swiper .swiper-wrapper .swiper-slide .main_image.main02 {
            background-image: url("../images/top/main/main02.jpg"); }
            @media screen and (max-width: 480px) {
              .mainvisual .mainvisual_in .main_swiper .swiper-wrapper .swiper-slide .main_image.main02 {
                background-image: url("../images/top/main/main02_sp.jpg"); } }
          .mainvisual .mainvisual_in .main_swiper .swiper-wrapper .swiper-slide .main_image.main03 {
            background-image: url("../images/top/main/main03.jpg"); }
            @media screen and (max-width: 480px) {
              .mainvisual .mainvisual_in .main_swiper .swiper-wrapper .swiper-slide .main_image.main03 {
                background-image: url("../images/top/main/main03_sp.jpg"); } }
          .mainvisual .mainvisual_in .main_swiper .swiper-wrapper .swiper-slide .main_image.main04 {
            background-image: url("../images/top/main/main04.jpg"); }
            @media screen and (max-width: 480px) {
              .mainvisual .mainvisual_in .main_swiper .swiper-wrapper .swiper-slide .main_image.main04 {
                background-image: url("../images/top/main/main04_sp.jpg"); } }
        .mainvisual .mainvisual_in .main_swiper .swiper-wrapper .swiper-slide .main_cap {
          position: absolute;
          right: 10px;
          bottom: 10px;
          font-size: 14px;
          color: #FFF; }
          @media screen and (max-width: 480px) {
            .mainvisual .mainvisual_in .main_swiper .swiper-wrapper .swiper-slide .main_cap {
              right: auto;
              left: 20px;
              bottom: 30px;
              font-size: 12px; } }
@keyframes zoom_in {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.3); } }
@keyframes slide_in {
  0% {
    transform: translateX(0%); }
  100% {
    transform: translateX(-20%);
    transform: translateX(-30%); } }
    .mainvisual .mainvisual_in .main_copy_bg {
      position: absolute;
      inset: 0;
      right: auto;
      width: 62.5%;
      background: linear-gradient(to right, #442913 0%, #FFF 100%);
      opacity: 0.8;
      mix-blend-mode: multiply; }
      @media screen and (max-width: 480px) {
        .mainvisual .mainvisual_in .main_copy_bg {
          top: auto;
          right: 0;
          width: 100%;
          height: 72%;
          background: linear-gradient(to top, #442913 0%, #FFF 100%); } }
    .mainvisual .mainvisual_in .main_copy_group {
      position: absolute;
      inset: 0;
      top: 10%;
      left: 5%;
      bottom: auto;
      display: flex; }
      @media screen and (max-width: 480px) {
        .mainvisual .mainvisual_in .main_copy_group {
          left: 0;
          right: 0;
          bottom: 5%; } }
      .mainvisual .mainvisual_in .main_copy_group .main_copy_group_in {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        row-gap: clamp(30px, 3.125vw, 50px); }
        @media screen and (max-width: 1200px) {
          .mainvisual .mainvisual_in .main_copy_group .main_copy_group_in {
            row-gap: 20px; } }
        @media screen and (max-width: 480px) {
          .mainvisual .mainvisual_in .main_copy_group .main_copy_group_in {
            width: 100%;
            justify-content: space-between;
            align-items: center;
            text-align: center; } }
        .mainvisual .mainvisual_in .main_copy_group .main_copy_group_in .main_copy1 {
          color: #fff;
          font-size: clamp(16px, 1.62vw, 26px);
          line-height: 1.6;
          letter-spacing: 0.1em; }
          @media screen and (max-width: 768px) {
            .mainvisual .mainvisual_in .main_copy_group .main_copy_group_in .main_copy1 {
              text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.8), 0px 0px 1px rgba(0, 0, 0, 0.8), 0px 0px 2px rgba(0, 0, 0, 0.8), 0px 0px 3px rgba(0, 0, 0, 0.8), 0px 0px 4px rgba(0, 0, 0, 0.8), 0px 0px 5px rgba(0, 0, 0, 0.8); } }
          @media screen and (max-width: 480px) {
            .mainvisual .mainvisual_in .main_copy_group .main_copy_group_in .main_copy1 {
              text-align: center;
              font-size: 4vw; } }
        .mainvisual .mainvisual_in .main_copy_group .main_copy_group_in .main_copy2_group {
          width: fit-content;
          display: flex;
          flex-direction: column;
          row-gap: clamp(20px, 2.858vw, 40px); }
          @media screen and (max-width: 1200px) {
            .mainvisual .mainvisual_in .main_copy_group .main_copy_group_in .main_copy2_group {
              row-gap: 20px; } }
          .mainvisual .mainvisual_in .main_copy_group .main_copy_group_in .main_copy2_group .main_copy2 {
            color: #fff;
            font-size: clamp(38px, 5vw, 80px);
            line-height: 1.2;
            letter-spacing: 0.05em; }
            @media screen and (max-width: 768px) {
              .mainvisual .mainvisual_in .main_copy_group .main_copy_group_in .main_copy2_group .main_copy2 {
                text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.8), 0px 0px 1px rgba(0, 0, 0, 0.8), 0px 0px 2px rgba(0, 0, 0, 0.8), 0px 0px 3px rgba(0, 0, 0, 0.8), 0px 0px 4px rgba(0, 0, 0, 0.8), 0px 0px 5px rgba(0, 0, 0, 0.8); } }
            @media screen and (max-width: 480px) {
              .mainvisual .mainvisual_in .main_copy_group .main_copy_group_in .main_copy2_group .main_copy2 {
                font-size: 11vw; } }
        .mainvisual .mainvisual_in .main_copy_group .main_copy_group_in .main_btn {
          display: block;
          text-align: center;
          color: #fff;
          font-size: clamp(16px, 2.143vw, 30px);
          line-height: 1;
          letter-spacing: 0.2em;
          background: rgba(217, 7, 20, 0.8);
          width: 100%;
          padding: 0.4em 5px;
          border-radius: 50vw;
          box-shadow: 0 0 10px 0 white;
          transition: background 0.3s ease-in-out 0s; }
          .mainvisual .mainvisual_in .main_copy_group .main_copy_group_in .main_btn:hover {
            background: rgba(217, 7, 20, 0.4); }
          @media screen and (max-width: 768px) {
            .mainvisual .mainvisual_in .main_copy_group .main_copy_group_in .main_btn {
              margin-bottom: 0; } }
          @media screen and (max-width: 480px) {
            .mainvisual .mainvisual_in .main_copy_group .main_copy_group_in .main_btn {
              padding: 10px 5px; } }
  .mainvisual .main_news_wrap {
    position: absolute;
    inset: 0;
    left: 5%;
    top: auto;
    bottom: 40px;
    padding-left: 5%;
    width: fit-content;
    max-width: 515px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: none;
    border-bottom: solid 1px #fff;
    border-top: solid 1px #fff;
    padding: 10px 20px; }
    @media screen and (max-width: 960px) {
      .mainvisual .main_news_wrap {
        bottom: 20px; } }
    @media screen and (max-width: 768px) {
      .mainvisual .main_news_wrap {
        padding-left: 40px;
        margin-top: 0;
        max-width: 100%;
        width: fit-content;
        margin: 0;
        padding: 10px; } }
    @media screen and (max-width: 480px) {
      .mainvisual .main_news_wrap {
        position: relative;
        inset: auto;
        width: 100%;
        flex-direction: column;
        row-gap: 5px;
        padding: 15px 20px;
        background: #00366b;
        border: none; } }
    .mainvisual .main_news_wrap .news_head {
      flex-shrink: 0;
      font-size: clamp(14px, 3.57vw, 20px);
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 1em;
      color: #fff;
      background: none;
      padding-right: 2em;
      letter-spacing: 0.1em; }
      @media screen and (max-width: 960px) {
        .mainvisual .main_news_wrap .news_head {
          padding-right: 15px;
          column-gap: 10px; } }
      @media screen and (max-width: 768px) {
        .mainvisual .main_news_wrap .news_head {
          font-size: 2vw; } }
      @media screen and (max-width: 480px) {
        .mainvisual .main_news_wrap .news_head {
          font-size: 4vw;
          flex-shrink: unset;
          width: 100%;
          padding: 0;
          justify-content: center; } }
      .mainvisual .main_news_wrap .news_head::before {
        content: "";
        display: block;
        width: 1em;
        height: 1em;
        border-radius: 0.5em;
        border: solid 0.3em #fff; }
    .mainvisual .main_news_wrap .news_text {
      flex-grow: 1;
      font-size: clamp(12px, 2.85vw, 16px);
      padding: 0; }
      @media screen and (max-width: 768px) {
        .mainvisual .main_news_wrap .news_text {
          font-size: 13px; } }
      @media screen and (max-width: 480px) {
        .mainvisual .main_news_wrap .news_text {
          width: 100%;
          font-size: 4vw; } }
      .mainvisual .main_news_wrap .news_text .item {
        display: flex;
        align-items: baseline;
        gap: 0.4em 1em;
        color: #fff; }
        @media screen and (max-width: 768px) {
          .mainvisual .main_news_wrap .news_text .item {
            justify-content: center; } }

/*# sourceMappingURL=mainvisual.css.map */