/*! Writen  by SCSS */
.wrap {
  overflow: hidden; }

@media screen and (max-width: 480px) {
  .img_cap.left .cap {
    left: auto;
    right: 0; } }

.sec01 {
  position: relative;
  padding: clamp(50px, 8.334vw, 100px) 0 0; }
  @media screen and (max-width: 820px) {
    .sec01 {
      padding: 60px 0 0px; } }
  .sec01 .midashi_group {
    margin-bottom: clamp(40px, 5.834vw, 70px); }
    .sec01 .midashi_group .sec_head {
      font-size: clamp(24px, 3.667vw, 44px);
      font-feature-settings: "palt"; }

.sec02 {
  position: relative;
  margin-bottom: clamp(80px, 10vw, 120px);
  /*.sec02_wrap01 {
  	align-items: flex-end;
  	flex-wrap: wrap;
  	row-gap: clamp_gm(25,1200,70);
  	.ttl01 {
  		@include mq($br_sp){
  			width: 100%;
  		}
  	}
  	.img02 {
  		width: cal_per(1200,690);
  		@include mq($br_sp){
  			width: 100%;
  		}
  	}
  	.in_box {
  		width: cal_per(1200,440);
  		@include mq($br_sp){
  			width: 100%;
  			text-align: center;
  		}	
  		.img {
  			width: 100%;
  		}
  	}
  }*/ }
  .sec02 .bg {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    clip-path: inset(0 0 0 0);
    z-index: -1; }
    .sec02 .bg::before {
      content: '';
      background: center center / cover no-repeat;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    .sec02 .bg.bg01 {
      height: calc(44% - 130px);
      top: 130px; }
      .sec02 .bg.bg01::before {
        background-image: url("../images/conceptroom/bg01.jpg"); }
    .sec02 .bg.bg02 {
      height: 28%;
      bottom: 28%; }
      .sec02 .bg.bg02::before {
        background-image: url("../images/conceptroom/bg02.jpg"); }
    .sec02 .bg.bg03 {
      height: 28%;
      bottom: 0; }
      .sec02 .bg.bg03::before {
        background-image: url("../images/conceptroom/bg03.jpg"); }
  .sec02 .ttl01 {
    font-size: clamp(16px, 2.334vw, 28px); }
    .sec02 .ttl01.mt {
      margin-top: 1em; }
      @media screen and (max-width: 480px) {
        .sec02 .ttl01.mt {
          margin-top: 25px; } }
    .sec02 .ttl01.mb {
      margin-bottom: 1em; }
      @media screen and (max-width: 480px) {
        .sec02 .ttl01.mb {
          margin-bottom: 25px; } }
    .sec02 .ttl01.w {
      color: #fff; }
  .sec02 .img_anime {
    overflow: hidden; }
    .sec02 .img_anime img {
      transition: 2s;
      opacity: 0;
      transform: scale(1.1, 1.1); }
    .sec02 .img_anime.p-view img {
      opacity: 1;
      transform: scale(1, 1);
      transition: 1s;
      transition: 3s; }
    @media screen and (min-width: 960px) {
      .sec02 .img_anime.img_anime02 {
        transition: all 3s 0s cubic-bezier(0.22, 0.61, 0.36, 1); }
        .sec02 .img_anime.img_anime02.left_type {
          transform: translateX(-60px); }
        .sec02 .img_anime.img_anime02.right_type {
          transform: translateX(60px); }
        .sec02 .img_anime.img_anime02.p-view {
          transform: translateX(0px); } }
  .sec02 .sec02_wrap {
    padding-bottom: clamp(60px, 10vw, 120px); }
  .sec02 .sec02_wrap01 {
    flex-wrap: wrap;
    display: grid;
    grid-template-columns: 57.5% 36.67%;
    align-items: flex-start;
    align-content: start;
    grid-auto-flow: dense;
    align-items: flex-end; }
    @media screen and (max-width: 480px) {
      .sec02 .sec02_wrap01 {
        grid-template-columns: 1fr;
        row-gap: 25px; } }
    .sec02 .sec02_wrap01 .img01 {
      grid-column: span 2;
      margin-bottom: clamp(25px, 5.834vw, 70px); }
      @media screen and (max-width: 480px) {
        .sec02 .sec02_wrap01 .img01 {
          grid-column: span 1;
          margin-bottom: 0; } }
    .sec02 .sec02_wrap01 .img02 {
      width: 57.5%;
      width: 100%;
      grid-row: 2/4; }
      @media screen and (max-width: 480px) {
        .sec02 .sec02_wrap01 .img02 {
          width: 100%;
          grid-row: span 1; } }
    @media screen and (max-width: 480px) {
      .sec02 .sec02_wrap01 .ttl01 {
        width: 100%;
        text-align: center;
        grid-row: 2/3; } }
  .sec02 .sec02_wrap02 {
    flex-wrap: wrap; }
    @media screen and (max-width: 480px) {
      .sec02 .sec02_wrap02 .in_box .ttl01 {
        text-align: center; } }
    .sec02 .sec02_wrap02 .img_wrap {
      width: 68.34%;
      align-items: flex-end;
      margin-left: auto;
      margin-top: clamp(-190px, -15.83%, -10px); }
      @media screen and (max-width: 480px) {
        .sec02 .sec02_wrap02 .img_wrap {
          margin-top: 25px;
          width: 100%;
          display: grid;
          grid-template-columns: 24.5% 70%;
          align-items: flex-start;
          align-content: start;
          grid-auto-flow: dense;
          justify-content: space-between;
          row-gap: 6px; } }
      @media screen and (max-width: 480px) {
        .sec02 .sec02_wrap02 .img_wrap .img {
          width: 100% !important; } }
      .sec02 .sec02_wrap02 .img_wrap .img01 {
        width: 19.03%; }
      .sec02 .sec02_wrap02 .img_wrap .img02 {
        width: 19.03%; }
      .sec02 .sec02_wrap02 .img_wrap .img03 {
        width: 53.66%; }
        @media screen and (max-width: 480px) {
          .sec02 .sec02_wrap02 .img_wrap .img03 {
            grid-row: 1/3;
            grid-column: 2/3; } }
  .sec02 .sec02_wrap03 .grid_wrap {
    display: grid;
    grid-template-columns: 26.17% 68.01%;
    align-items: flex-start;
    align-content: start;
    grid-auto-flow: dense;
    justify-content: space-between;
    row-gap: clamp(30px, 5.584vw, 67px); }
    @media screen and (max-width: 480px) {
      .sec02 .sec02_wrap03 .grid_wrap {
        grid-template-columns: 1fr; } }
    .sec02 .sec02_wrap03 .grid_wrap .img01 {
      grid-column: 2/3; }
      @media screen and (max-width: 480px) {
        .sec02 .sec02_wrap03 .grid_wrap .img01 {
          grid-column: span 1; } }
    .sec02 .sec02_wrap03 .grid_wrap .img_wrap {
      grid-row: span 2; }
      @media screen and (max-width: 480px) {
        .sec02 .sec02_wrap03 .grid_wrap .img_wrap {
          display: flex;
          justify-content: space-between;
          grid-row: span 1; } }
      @media screen and (max-width: 480px) {
        .sec02 .sec02_wrap03 .grid_wrap .img_wrap .img {
          width: 48%; } }
    .sec02 .sec02_wrap03 .grid_wrap .in_box {
      grid-column: 2/3;
      justify-content: flex-start;
      align-items: center;
      column-gap: 4.91%; }
      @media screen and (max-width: 480px) {
        .sec02 .sec02_wrap03 .grid_wrap .in_box {
          grid-column: span 1;
          column-gap: 0;
          column-gap: 15px;
          justify-content: center;
          grid-row: 2/3; } }
      .sec02 .sec02_wrap03 .grid_wrap .in_box .img04 {
        width: 37.63%; }
      @media screen and (max-width: 480px) {
        .sec02 .sec02_wrap03 .grid_wrap .in_box .ttl01 {
          text-align: center; } }
  .sec02 .sec02_wrap03 .cap_l {
    color: #fff; }

.sec03 .text_in .en_ttl {
  font-size: clamp(30px, 4.5vw, 54px);
  line-height: 1;
  margin-bottom: 0.5em; }
.sec03 .text_in .ttl01 {
  font-size: clamp(20px, 3.334vw, 40px);
  line-height: 1.4;
  letter-spacing: 0.05em;
  margin-inline: auto;
  margin-bottom: 1em; }
.sec03 .sec03_wrap {
  /*
  .swiper-button-prev:after,
  .swiper-container-rtl .swiper-button-next:after,
  .swiper-button-next:after,
  .swiper-container-rtl .swiper-button-prev:after{
  	content:none!important;
  }
  */ }
  .sec03 .sec03_wrap .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #FFF; }
  .sec03 .sec03_wrap .type_list_wrap .version_txt {
    text-align: center;
    font-size: clamp(20px, 2.5vw, 30px);
    color: #900;
    line-height: 1;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center; }
    .sec03 .sec03_wrap .type_list_wrap .version_txt .big {
      margin: 0 20px;
      padding: 5px;
      font-size: 150%;
      background: #900;
      color: #FFF;
      line-height: 0.95; }
  .sec03 .sec03_wrap .type_list_wrap .old_version_txt {
    text-align: center;
    margin-bottom: 30px; }
    .sec03 .sec03_wrap .type_list_wrap .old_version_txt a {
      display: inline-block;
      font-size: clamp(14px, 2.344vw, 18px);
      color: #900;
      text-decoration: underline; }
      body:not(.mobile) .sec03 .sec03_wrap .type_list_wrap .old_version_txt a:hover {
        text-decoration: none; }
  .sec03 .sec03_wrap .type_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 40px;
    gap: 1.33% 0; }
    @media screen and (max-width: 480px) {
      .sec03 .sec03_wrap .type_list {
        flex-wrap: wrap;
        gap: 10px 0; } }
    .sec03 .sec03_wrap .type_list li {
      width: 24%;
      border: 1px solid #900;
      display: flex; }
      @media screen and (max-width: 768px) {
        .sec03 .sec03_wrap .type_list li {
          width: 48%; } }
      .sec03 .sec03_wrap .type_list li a {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        line-height: 1.2;
        padding: 10px 5px;
        font-size: 18px;
        color: #900;
        text-align: center;
        transition: 0.3s all ease-in-out 0s; }
        @media screen and (max-width: 1200px) {
          .sec03 .sec03_wrap .type_list li a {
            font-size: 1.4vw; } }
        @media screen and (max-width: 768px) {
          .sec03 .sec03_wrap .type_list li a {
            font-size: 1.6vw; } }
        @media screen and (max-width: 480px) {
          .sec03 .sec03_wrap .type_list li a {
            font-size: 3vw; } }
        .sec03 .sec03_wrap .type_list li a.cr, body:not(.mobile) .sec03 .sec03_wrap .type_list li a:hover {
          color: #FFF;
          background: #900; }
        .sec03 .sec03_wrap .type_list li a .sub {
          display: block;
          font-size: 80%; }
  .sec03 .sec03_wrap .slide_thumb {
    margin-top: 30px;
    overflow: hidden; }
    @media screen and (max-width: 480px) {
      .sec03 .sec03_wrap .slide_thumb {
        margin-top: 20px; } }
    .sec03 .sec03_wrap .slide_thumb .swiper-wrapper {
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px 0; }
      .sec03 .sec03_wrap .slide_thumb .swiper-wrapper .swiper-slide {
        width: 15.84% !important;
        cursor: pointer;
        transition: 0.3s opacity ease-in-out 0s; }
        @media screen and (max-width: 480px) {
          .sec03 .sec03_wrap .slide_thumb .swiper-wrapper .swiper-slide {
            width: 32% !important; } }
        .sec03 .sec03_wrap .slide_thumb .swiper-wrapper .swiper-slide.swiper-slide-thumb-active {
          opacity: 0.5; }
      .sec03 .sec03_wrap .slide_thumb .swiper-wrapper.full {
        gap: 0;
        flex-wrap: nowrap; }
  .sec03 .sec03_wrap .swiper-button-next, .sec03 .sec03_wrap .swiper-button-prev {
    width: 80px;
    filter: drop-shadow(0px 0px 2px #000);
    color: #fff; }
    @media screen and (max-width: 480px) {
      .sec03 .sec03_wrap .swiper-button-next, .sec03 .sec03_wrap .swiper-button-prev {
        width: fit-content;
        transform: scale(0.7); } }
  .sec03 .sec03_wrap .main_slider .swiper-slide {
    padding: 0 3vw; }
    @media screen and (max-width: 1500px) {
      .sec03 .sec03_wrap .main_slider .swiper-slide {
        padding: 0 1.5vw; } }
    @media screen and (max-width: 1280px) {
      .sec03 .sec03_wrap .main_slider .swiper-slide {
        padding: 0 1vw; } }
    @media screen and (max-width: 960px) {
      .sec03 .sec03_wrap .main_slider .swiper-slide {
        padding: 0; } }
    .sec03 .sec03_wrap .main_slider .swiper-slide.swiper-slide-active .slide_image p {
      opacity: 1; }
    .sec03 .sec03_wrap .main_slider .swiper-slide .slide_image {
      position: relative;
      background: #000; }
      .sec03 .sec03_wrap .main_slider .swiper-slide .slide_image p {
        transition: 0.5s opacity ease-in-out 0s;
        opacity: 0.4; }
        .sec03 .sec03_wrap .main_slider .swiper-slide .slide_image p:after {
          content: "";
          display: block;
          padding-bottom: 58.768%; }
          @media screen and (max-width: 480px) {
            .sec03 .sec03_wrap .main_slider .swiper-slide .slide_image p:after {
              padding-bottom: 108.834%; } }
        .sec03 .sec03_wrap .main_slider .swiper-slide .slide_image p:before {
          content: "";
          display: block;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat; }
      .sec03 .sec03_wrap .main_slider .swiper-slide .slide_image.main01 p:before {
        background-image: url("../images/swiper/big_main01.jpg"); }
        @media screen and (max-width: 480px) {
          .sec03 .sec03_wrap .main_slider .swiper-slide .slide_image.main01 p:before {
            background-image: url("../images/swiper/big_main01_sp.jpg"); } }
      .sec03 .sec03_wrap .main_slider .swiper-slide .slide_image.main02 p:before {
        background-image: url("../images/swiper/big_main02.jpg"); }
        @media screen and (max-width: 480px) {
          .sec03 .sec03_wrap .main_slider .swiper-slide .slide_image.main02 p:before {
            background-image: url("../images/swiper/big_main01_sp.jpg"); } }
      .sec03 .sec03_wrap .main_slider .swiper-slide .slide_image.main03 p:before {
        background-image: url("../images/swiper/big_main03.jpg"); }
        @media screen and (max-width: 480px) {
          .sec03 .sec03_wrap .main_slider .swiper-slide .slide_image.main03 p:before {
            background-image: url("../images/swiper/big_main03_sp.jpg"); } }
      .sec03 .sec03_wrap .main_slider .swiper-slide .slide_image.main04 p:before {
        background-image: url("../images/swiper/big_main04.jpg"); }
        @media screen and (max-width: 480px) {
          .sec03 .sec03_wrap .main_slider .swiper-slide .slide_image.main04 p:before {
            background-image: url("../images/swiper/big_main04_sp.jpg"); } }

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