@charset "UTF-8";
@keyframes loop {
0% {
      transform: translateX(100%);
}
to {
      transform: translateX(-100%);
}
}

@keyframes loop2 {
0% {
      transform: translateX(0);
}
to {
      transform: translateX(-200%);
}
}

/* ========================================
   @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {  
/* common -------------------------------------*/
.btn {
   width: min(95%, 320px);
}
.btn a {
   text-decoration: none;
   position: relative;
   font-size: clamp(0.75rem, 0.583rem + 0.35vw, 1rem);
   line-height: 2.125;
   letter-spacing: 0.05em;
   display: block;
   border-bottom: 1px solid #1A1A1A;
   padding: 0 0 18px 15px;
}
.btn a::after {
   content: "→";
   position: absolute;
   top: 41%;
   right: 12px;
   transform: translateY(-50%);
   font-size: clamp(0.875rem, 0.625rem + 0.52vw, 1.25rem);
   line-height: 1.45;
   font-family: "Castoro", serif;
   transition: 0.3s;
}
.btn a:hover::after {
   right: 8px;
}

/* mv -------------------------------------*/
#mv {
   display: grid;
   grid-template-columns: 72.39% 25%;
   gap: 50px;
   position: relative;
   overflow: hidden;
   margin-top: 10px;
}
#mv .mv-slide{
   position: relative;
}
#mv .slick-list {
   padding: 0;
   margin: 0;
}
.slick-slider .slick-track, .slick-slider .slick-list {
   margin: 0!important;
}
#mv .slick-slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}
#mv h1{
   position: absolute;
   top: 58px;
   left: 80px;
   z-index: 10;
   font-size: 32px;
   line-height: 1.6;
   letter-spacing: 0.16em;
   color: #FFFFFF;
}
#mv .mv-right {
   position: absolute;
   right: 0;
   width: 25%;
   top: 0;
   height: 100%;
   overflow: hidden;
}
#mv .mv-right .mv-right-inner {
   display: flex;
   flex-direction: column;
   animation: SlideLoop 90s linear infinite; 
}
#mv .mv-right .mv-right-inner img {
   width: 100%;
   display: block;
}
@keyframes SlideLoop {
0% {
   transform: translateY(0);
}
100% {
   transform: translateY(-50%);
}
}

/* event -------------------------------------*/
#event {
   background: #F2F2F2;
   padding-block: 200px 120px;
   margin-top: -81px;
}
#event .inner {
   background: #FFFFFF;
   width: min(95%, 1600px);
   margin-inline: auto;
   padding-block: 98px 120px;
}
#event .top-frame {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   width: min(95%, 1320px);
   margin-inline: auto;
   margin-bottom: 38px;
}
#event .top-frame .enttl {
   font-size: 10px;
   letter-spacing: 0.03em;
   line-height: 1.4;
   margin-bottom: 11px;
}
#event .top-frame h2 {
   font-weight: 500;
   font-size: 24px;
   letter-spacing: 0.05em;
}
#event .btn {
   width: min(95%, 100px);
   position: relative;
   top: -3px;
}
#event .btn a{
   font-size: 14px;
   line-height: 2.4285714286;
   letter-spacing: 0.05em;
   position: relative;
   padding: 0 0 3px 10px;
   text-decoration: none;
   display: block;
   border-bottom: 1px solid #1A1A1A;
}
#event .btn a::after {
   content: '→';
   position: absolute;
   right: 9px;
   top: 55%;
   transform: translateY(-50%);
   font-size: 16px;
}
#event .btn a:hover::after {
   right: 5px;
}
#event .system-list {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0 60px;
   width: min(95%, 1320px);
   margin-inline: auto;
}
#event .system-list li {
   display: contents;
}
#event .system-list li a {
   display: block grid;
   grid-template-rows: subgrid;
   grid-row: span 4;
}
#event .system-list li a:hover{ text-decoration: none; }
#event .icon{
   font-size: 12px;
   text-align: center;
   padding-block: 4px;
   display: grid;
   place-items: center;
   color: #fff;
   width: 60px;
   margin-block: 0 11px;
}
#event .icon01 {
   background: #C34848;
}
#event .icon02 {
   background: #374A94;
}
#event .icon03 {
   background: #1A1A1A;
}
#event .system-pic{width: 100%;height: 260px;text-align: center;margin-bottom: 16px;}
#event .system-pic img{width: 100%;height: 100%;}
#event .system-ttl-01{
   font-size: 18px;
   font-weight: 500;
   line-height: 1.6666;
   letter-spacing: 0.05em;
   margin-bottom: 23px;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: normal;
   border-bottom: 1px solid #DEDAD1;
   padding-bottom: 13px;
}
#event .system-list li .txt-box {
   display: grid;
   gap: 9px;
}
#event .system-list li .date-ttl{
   width: 40px;
   background: #d16b35;
   display: grid;
   place-content: center;
   font-size: 12px;
   text-align: center;
   color: #fff;
   letter-spacing: 0;
}
#event .system-list li .system-date{
   font-size: 12px;
   letter-spacing: 0em;
   color: #666666;
   display: grid;
   align-items: center;
   gap: 0px 9px;
   grid-template-columns: 40px 1fr;
}

/* concept -------------------------------------*/
#concept .inner {
   padding-block: 240px;
   display: grid;
   grid-template-columns: 51.6129% 47.8709%;
   justify-content: space-between;
   padding-right: 40px;
}
#concept .photo-box {display: grid;gap: 140px;}
#concept .photo02 {text-align: right;position: relative;right: -650px; width: 400px; height: auto;}
#concept .txt-box {
   justify-content: flex-end;
   display: flex;
   gap: 82px;
   padding-block: 19px;
}
#concept .txt-box .wrap {
   padding-block: 57px 0;
}
#concept .txt-box .txt {
   font-size: 18px;
   letter-spacing: 0.05em;
   line-height: 2.1111;
   margin-bottom: 54px;
}
#concept .txt-box .txt:nth-of-type(3) {margin-bottom: 110px;}
#concept .txt-box .lead {
   font-weight: 500;
   font-size: 24px;
   letter-spacing: 0.05em;
   line-height: 1.791666;
   margin-bottom: 54px;
}

/* menu -------------------------------------*/
#menu {
   background: #F2F2F2;
}
#menu .main-photo img  {
   /* width: 100%; */
   height: auto;
   width: 100vw;
   max-width: 1920px;
}
#menu .inner {
   padding-block: 141px;
   width: min(95%, 1600px);
   margin-inline: auto;
}
#menu h2 {
   font-weight: 500;
   font-size: 40px;
   letter-spacing: 0.05em;
   text-align: center;
   margin-bottom: 78px;
}
#menu h2 span {
   font-weight: 500;
   font-size: 24px;
   letter-spacing: 0.05em;
   text-align: center;
   display: block;
}
#menu .list {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0 calc(80 / 1920 * 100vw);
}
#menu .list li {
   display: contents;
}
#menu .list li a {
   background: #fff;
   padding-block: 61px 63px;
   padding-inline: 40px;
   display: block grid;
   grid-template-rows: subgrid;
   grid-row: span 5;
}
#menu .list li .enttl {
   font-size: 14px;
   letter-spacing: 0.03em;
   line-height: 1.42857;
   text-align: center;
   margin-bottom: 5px;
}
#menu .list li h3 {
   font-weight: 500;
   font-size: 30px;
   letter-spacing: 0.2em;
   text-align: center;
   margin-bottom: 30px;
}
#menu .list li .photo {
   margin-bottom: 20px;
}
#menu .list li .photo img {
   width: 100%;
   height: auto;
}
#menu .list li .txt {
   font-size: 14px;
   letter-spacing: 0.05em;
   line-height: 2;
   margin-bottom: 37px;
}
#menu .btn {
   width: min(95%, 320px);
   margin-inline: auto;
   position: relative;
   font-size: 16px;
   line-height: 2.125;
   letter-spacing: 0.05em;
   display: block;
   border-bottom: 1px solid #1A1A1A;
   padding: 0 0 18px 15px;
}
#menu .btn::after {
   content: "→";
   position: absolute;
   top: 41%;
   right: 12px;
   transform: translateY(-50%);
   font-size: 20px;
   line-height: 1.45;
   font-family: "Castoro", serif;
   transition: 0.3s;
}
#menu li:hover .btn::after {
   right: 7px;
}

/* works -------------------------------------*/
#works .inner {
   padding-block: 158px 157px;
   width: min(95%, 1600px);
   margin-inline: auto;
}
#works .top-frame {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-bottom: 62px;
}
#works .top-frame .enttl {
   font-size: 14px;
   letter-spacing: 0.03em;
}
#works .top-frame h2 {
   font-weight: 500;
   font-size: 32px;
   letter-spacing: 0.05em;
}
#works .system-list {
   gap: 100px 20px;
}
#works .system-list > li {
   display: contents;
}
#works .system-list li .system-pic {margin-bottom: 20px;}
#works .system-list li .system-pic img {height: 316px;}
#works .system-list li .system-area {
   font-size: 14px;
   letter-spacing: 0.05em;
   margin-bottom: 5px;
   color: inherit;
}
#works .system-list li .system-ttl-01 {
   font-weight: 500;
   font-size: 16px;
   letter-spacing: 0.05em;
   line-height: 1.75;
   margin-bottom: 22px;
}
#works .system-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 26px;
   padding-left: 12px;
}
#works .system-tags li {
   font-size: 12px;
   color: #8d8d8d;
   position: relative;
   letter-spacing: 0;
}
#works .system-tags li::before {
   position: absolute;
   content: "#";
   left: -12px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 12px;
}

/* modelhouse -------------------------------------*/
#modelhouse {
   position: relative;
   margin-bottom: 160px;
   overflow: hidden;
}
#modelhouse .loop {overflow: hidden;position: absolute;top: 0;left: 0;}
#modelhouse .loop__box {display: flex;width: 100vw; background-color:#000;}
#modelhouse .loop__box img {min-width: 100vw;}
#modelhouse .loop__box img:first-child {animation: loop 50s -25s linear infinite;}
#modelhouse .loop__box img:last-child {animation: loop2 50s linear infinite;}
#modelhouse .inner {
   width: min(95%, 1600px);
   margin-inline: auto;
   padding-block: 80px 0;
   display: flex;
   justify-content: flex-end;
   gap: 70px;
   min-height: calc(800 / 1920 * 100vw);
}
#modelhouse .enttl {
   order: 3;
   position: relative;
}
#modelhouse h2 {order: 2;position: relative;}
#modelhouse .txt-box {
   order: 1;
   position: relative;
   padding: 75px 17px;
}
#modelhouse .txt {
   font-size: 16px;
   letter-spacing: 0.05em;
   line-height: 2;
   color: #fff;
   margin-bottom: 92px;
}
#modelhouse .btn a {
   color: #fff;
   border-bottom: 1px solid #fff;
}

/* youtube -------------------------------------*/
#youtube {
   position: relative;
   z-index: 2;
   overflow: hidden;
}
#youtube::before {
   position: absolute;
   content: "";
   background: #F2F2F2;
   width: 81.25%;
   height: 100%;
   top: 0;
   left: 0;
}
#youtube .inner {
   width: min(95%, 1680px);
   margin-left: auto;
   display: grid;
   grid-template-columns: 19.0476% 1fr;
   gap: 80px;
   padding-block: 138px 142px;
   position: relative;
}
#youtube .ttl-box {
   display: flex;
   justify-content: space-between;
   flex-direction: column;
}
#youtube h2 {
   font-weight: 500;
   font-size: 24px;
   letter-spacing: 0.05em;
   line-height: 1.3333;
   padding-block: 3px 0;
}
#youtube .btn {width: 100%;}
#youtube .btn a::after {
   position: absolute;
   content: "";
   background: url(../images/common/open-icon.svg)no-repeat;
   background-size: contain;
   width: 12px;
   height: 12px;
   top: 34%;
   right: 19px;
   transform: translateY(-50%);
}
#youtube .slick-slide {
   width: 460px;
   height: 260px;
   margin: 0 30px;
}
#youtube .system-pic {
   margin-bottom: 15px;
   position: relative;
   width: 100%;
   aspect-ratio: 16 / 9;
   overflow: hidden;
}
#youtube .system-pic img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.slide-wrap {/* width: auto; *//* order: 2; *//* margin-bottom: 56px; */}
.slick-slider {
   padding: 0;
}
.slick-nav {
   display: none;
}
.slick-num {
   display: none;
}
.progress-container {
   display: none;
}
.arrow_box {
   display: none;
}


/* interview -------------------------------------*/
#interview {
   position: relative;
   margin-top: -62px;
   overflow: hidden;
}
#interview::before {
   position: absolute;
   content: "";
   background: #E5E5E1;
   width: 81.25%;
   height: 100%;
   top: 0;
   right: 0;
}
#interview .top-frame {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-bottom: 62px;
   width: min(95%, 1600px);
   margin-inline: auto;
   padding-block: 218px 0;
   position: relative;
}
#interview .top-frame .enttl {
   font-size: 14px;
   letter-spacing: 0.03em;
}
#interview .top-frame h2 {
   font-weight: 500;
   font-size: 32px;
   letter-spacing: 0.05em;
}
#interview .slick-list{
   overflow: visible!important;
}
#interview .system-list {
   position: relative;
   display: flex;
   gap: 40px;
   padding-block: 0 160px;
   width: min(95%, 1560px);
   margin-inline: auto;
}
#interview .system-list li{width: 360px;margin: 0 20px;position: relative;background: #FFFFFF;padding: 10px;min-height: calc(378 / 1920 * 100vw);}
#interview .system-list li::after {
  content: '→';
  position: absolute;
  font-size: 15px;
  bottom: 6px;
  right: 10px;
  transition: 0.3s;
  font-family: "Castoro", serif;
}
#interview .system-list li:hover::after {
  right: 5px;
}
#interview .system-list .system-ttl-01 {
   font-weight: 500;
   font-size: 16px;
   letter-spacing: 0.05em;
   line-height: 1.75;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
   width: min(95%, 300px);
   margin-inline: auto;
   margin-bottom: 5px;
}
#interview .system-pic {
  height: 200px;
  text-align: center;
  margin-bottom: 22px;
}
#interview .system-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#interview .system-area {
   font-size: 14px;
   letter-spacing: 0.05em;
   line-height: 2.285714;
   width: min(95%, 300px);
   margin-inline: auto;
}
#interview .next-arrow,
#interview .prev-arrow {
   position: absolute;
   top: -19.8%;
   z-index: 11;
   width: 80px;
   height: auto;
   cursor: pointer;
}
#interview .next-arrow {
  right: calc(50% + 246px);
}
#interview .prev-arrow {
  right: calc(50% + 326px);
}

/* contents -------------------------------------*/
#contents .inner {
   width: min(95%, 1760px);
   margin-inline: auto;
   padding-block: 150px;
}
#contents h2 {
   font-size: 40px;
   letter-spacing: 0.03em;
   margin-bottom: 52px;
}
#contents .list {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 40px;
}

#contents .list li{}
#contents .list li img{width: 100%;}

/* about -------------------------------------*/
#about .inner {
   width: min(95%, 1620px);
   margin-right: auto;
   display: grid;
   grid-template-columns: 67.9012% 24.6913%;
   justify-content: space-between;
   align-items: flex-end;
   padding-block: 10px 240px;
}
#about h2 {
   font-size: 40px;
   letter-spacing: 0.03em;
   margin-bottom: 95px;
}
#about .list {
   display: grid;
   gap: 48px;
}
#about .list .btn {
   width: 100%;
}
#about .list .btn .en {
   font-size: 14px;
   letter-spacing: 0.03em;
   display: block;
   margin-bottom: 6px;
}
#about .list .btn a {
   font-weight: 500;
   font-size: 24px;
   letter-spacing: 0.05em;
   line-height: 1.3333;
   padding: 0 0 33px 20px;
}
#about .list .btn a::after {
   top: 55%;
   font-size: 14px;
   right: 20px;
}
#about .list .btn a:hover::after {
   right: 15px;
}

}

/* ========================================
@media screen and (min-width:768px) and (max-width:1000px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1000px) {
   #event .system-list {
      gap: 0 6.00vw;
   }
   #event .system-ttl-01 {
      font-size: clamp(0.813rem, -0.222rem + 2.16vw, 1.125rem);
   }
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1919px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1919px) {
#concept .inner {
   padding-block: 12.507vw;
   padding-right: 2.084vw;
}
#concept .photo-box {display: grid;gap: 7.295vw;}
#concept .photo-box img {
   width: 100%;
   height: auto;
}
#concept .photo02 {text-align: right;position: relative;right: -30.65vw;}
#concept .photo02 img {
   width: 20.84vw;
}
#concept .txt-box {
   gap: 2.273vw;
   padding-block: 0.99vw;
}
#concept .txt-box .wrap {
   padding-block: 2.97vw 0;
}
#concept h2 img {
   width: 5.11vw;
}
#concept .txt-box .txt {
   margin-bottom: 2.814vw;
   font-size: 1.038vw;
}
#concept .txt-box .txt:nth-of-type(3) {margin-bottom: 5.732vw;}
#concept .txt-box .lead {
   font-size: 1.251vw;
   margin-bottom: 2.814vw;
}
#concept .btn a {
   font-size: 0.983vw;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1860px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1860px) {
   #concept .inner {
      gap: 6.25vw;
      grid-template-columns: 51.6129% 1fr;
   }
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1280px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1280px) {
#concept .txt-box .txt {
   font-size: clamp(0.75rem, 0.656rem + 0.2vw, 0.813rem);
}
#concept .txt-box .lead {
   font-size: clamp(0.938rem, 0.844rem + 0.2vw, 1rem);
}
#concept .btn a {
   font-size: clamp(0.688rem, 0.594rem + 0.2vw, 0.75rem);
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1100px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1100px) {
/* menu -------------------------------------*/
#menu .inner {
   padding-block: 12.818vw;
}
#menu h2 {
   font-size: 3.636vw;
   margin-bottom: 7.091vw;
}
#menu h2 span {
   font-size: 2.182vw;
}
#menu .list {
}
#menu .list li a {
   padding-block: 5.545vw 5.727vw;
   padding-inline: 3.636vw;
}
#menu .list li .enttl {
   font-size: 1.273vw;
   margin-bottom: 0.455vw;
}
#menu .list li h3 {
   font-size: 2.727vw;
   margin-bottom: 2.727vw;
}
#menu .list li .photo {
   margin-bottom: 1.818vw;
}
#menu .list li .txt {
   font-size: clamp(0.75rem, 0.461rem + 0.6vw, 0.875rem);
   margin-bottom: 3.364vw;
}
#menu .btn {
   font-size: 1.455vw;
   padding: 0 0 1.636vw 1.364vw;
}
#menu .btn::after {
   right: 1.091vw;
   font-size: 1.818vw;
}
#menu .btn a:hover::after {
   right: 0.727vw;
}

}


/* ========================================
@media screen and (min-width:768px) and (max-width:1280px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1280px) {
/* modelhouse -------------------------------------*/
#modelhouse .inner {
   padding-block: 6.25vw 0;
   gap: 5.469vw;
}
#modelhouse .txt-box {
   padding: 5.859vw 1.328vw;
}
#modelhouse .txt {
   font-size: clamp(0.75rem, 0.375rem + 0.78vw, 1rem);
   margin-bottom: 7.187vw;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1720px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1720px) {
/* youtube -------------------------------------*/
#youtube .inner {
   width: 97.674vw;
   grid-template-columns: 23.0476% 1fr;
   gap: 4.651vw;
   padding-block: 8.023vw 8.256vw;
}
#youtube h2 {
   font-size: clamp(1.25rem, 1.048rem + 0.42vw, 1.5rem);
   padding-block: 0.174vw 0;
}
#youtube .btn a::after {
   width: 0.698vw;
   height: 0.698vw;
   top: 34%;
   right: 1.105vw;
}
#youtube .slick-slide {
   width: 26.744vw;
   height: 15.116vw;
   margin: 0 1.744vw;
}
#youtube .system-pic {
   margin-bottom: 0.872vw;
}
#youtube .btn a {
   font-size: clamp(0.625rem, 0.322rem + 0.63vw, 1rem);
   padding: 0 0 1.05vw 0.87vw;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1800px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1800px) {
/* interview -------------------------------------*/
#interview {
   margin-top: -3.444vw;
}
#interview .top-frame {
   margin-bottom: 3.444vw;
   width: 88.889vw;
   padding-block: 12.111vw 0;
}
#interview .top-frame .enttl {
   font-size: clamp(0.625rem, 0.439rem + 0.39vw, 0.875rem);
}
#interview .top-frame h2 {
   font-size: 1.778vw;
}
#interview .system-list {
   gap: 2.222vw;
   padding-block: 0 8.889vw;
   width: 86.667vw;
}
#interview .system-list li{width: 20vw;margin: 0 1.111vw;position: relative;background: #FFFFFF;padding: 0.556vw;}
#interview .system-list li::after {
  font-size: 0.833vw;
  bottom: 0.333vw;
  right: 0.556vw;
}
#interview .system-list li:hover::after {
  right: 0.278vw;
}
#interview .system-list .system-ttl-01 {
   font-size: clamp(0.75rem, 0.564rem + 0.39vw, 1rem);
   width: 16.667vw;
   margin-bottom: 0.278vw;
}
#interview .system-pic {
  height: 11.111vw;
  margin-bottom: 1.222vw;
}
#interview .system-area {
   font-size: clamp(0.625rem, 0.439rem + 0.39vw, 0.875rem);
   width: 16.667vw;
}
#interview .next-arrow,
#interview .prev-arrow {
   top: -19.8%;
   width: 4.444vw;
}
#interview .next-arrow {
  right: calc(50% + 13.667vw);
}
#interview .prev-arrow {
  right: calc(50% + 18.111vw);
}

}

/* ========================================
@media screen and (min-width:768px) and (max-width:1860px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1860px) {
#contents .list img {
   width: 100%;
   height: auto;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1710px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1710px) {
/* about -------------------------------------*/
#about .inner {
   width: 94.737vw;
   padding-block: 0.585vw 14.035vw;
}
#about .photo img {
   width: 100%;
   height: auto;
}
#about h2 {
   font-size: 2.339vw;
   letter-spacing: 0.03em;
   margin-bottom: 5.556vw;
}
#about .list {
   gap: 2.807vw;
}
#about .list .btn .en {
   font-size: clamp(0.625rem, 0.421rem + 0.42vw, 0.875rem);
   margin-bottom: 0.351vw;
}
#about .list .btn a {
   font-size: clamp(0.75rem, 0.342rem + 0.85vw, 1.25rem);
   padding: 0 0 1.93vw 1.17vw;
}
#about .list .btn a::after {
   font-size: 0.819vw;
   right: 1.17vw;
}
}

/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
/* common -------------------------------------*/
.btn {
   width: 77.29vw;
}
.btn a {
   text-decoration: none;
   position: relative;
   font-size:3.865vw;
   line-height: 2.125;
   letter-spacing: 0.05em;
   display: block;
   border-bottom: 0.2vw solid #1A1A1A;
   padding: 0 0 4.5vw 3.62vw;
}
.btn a::after {
   content: "→";
   position: absolute;
   top: 41%;
   right: 3.2vw;
   transform: translateY(-50%);
   font-size: 3.831vw;
   line-height: 1.45;
   font-family: "Castoro", serif;
   transition: 0.3s;
}
.btn a:hover::after {
   right: 1.99vw;
}

/* mv -------------------------------------*/
#mv {
   position: relative;
   padding-block: 10vw 31vw;
}
#mv .mv-slide{
   position: relative;
   display: flex;
   flex-direction: column;
}
#mv .slick-list {
   height: 100%;
}
.slick-slider .slick-track, .slick-slider .slick-list {
   margin: 0!important;
   height: 100%;
   object-fit: cover;
}
#mv h1{
   position: absolute;
   top: 5.6vw;
   left: 5vw;
   z-index: 10;
   font-size:5.314vw;
   line-height: 1.6;
   letter-spacing: 0.16em;
   color: #FFFFFF;
}
#mv .full-screen {
   order: 1;
   height: 113.6vw;
   margin: 0;
   padding: 0;
}
#mv .slick-slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

#mv .slide-dots {
   margin: -8vw -81vw 0 0;
   padding: 0;
   text-align: center;
}
#mv .slide-dots li {
   display: inline-block;
   margin: 0 0.7vw;
}
#mv .slide-dots li button {
   position: relative;
   text-indent: -9999px;
}
#mv .slide-dots li button::before {
   background: #8D8D8D;
   content: "";
   cursor: pointer;
   height: 0.97vw;
   left: 0;
   margin: auto;
   position: absolute;
   right: 0;
   top: 0;
   width: 0.97vw;
   border-radius: 50%;
}
#mv .slide-dots li.slick-active button::before {
   background: #12294B; 
}
#mv button {
   background: none;
   border: none;
   outline: none;
   padding: 0 1vw;
}
#mv .mv-slide-sp {
   position: absolute;
   top: 115.8vw;
   z-index: 6;
}
#mv .loop {padding-top: 0;padding-bottom: 2vw;overflow: hidden;}
#mv .loop__box {display: flex;width: 100vw;}
#mv .loop__box img {min-width: 261vw;}
#mv .loop__box img:first-child {animation: loop 50s -25s linear infinite;}
#mv .loop__box img:last-child {animation: loop2 50s linear infinite;}

/* event -------------------------------------*/
#event {
   background: #F2F2F2;
   padding-block: 19.32vw;
}
#event .inner {
   width: 86.96vw;
   margin-inline: auto;
}
#event .top-frame {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-bottom: 9vw;
}
#event .top-frame .enttl {
   font-size: 2.42vw;
   letter-spacing: 0.025em;
   line-height: 1.4;
   margin-bottom: 1vw;
}
#event .top-frame h2 {
   font-weight: 500;
   font-size:4.831vw;
   letter-spacing: 0.05em;
}
#event .btn {
   width: 24.15vw;
   position: relative;
   top: -0.5vw;
}
#event .btn a{
   font-size:3.382vw;
   line-height: 2.4285714286;
   letter-spacing: 0.05em;
   position: relative;
   padding: 0 0 0.72vw 2.38vw;
   text-decoration: none;
   display: block;
   border-bottom: 0.2vw solid #1A1A1A;
}
#event .btn a::after {
   content: '→';
   position: absolute;
   right: 2.55vw;
   top: 55%;
   transform: translateY(-50%);
   font-size: 2.865vw;
}
#event .btn a:hover::after {
   right: 1.19vw;
}
#event .system-list {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 9.66vw 0;
}
#event .system-list li a:hover{ text-decoration: none; }
#event .icon{
   font-size:2.898vw;
   text-align: center;
   padding-block: 0.97vw;
   display: grid;
   place-items: center;
   color: #fff;
   width: 14.49vw;
   margin-block: 0 2.90vw;
}
#event .icon01 {
   background: #C34848;
}
#event .icon02 {
   background: #374A94;
}
#event .icon03 {
   background: #1A1A1A;
}
#event .system-pic{width: 100%;height: 56.52vw;text-align: center;margin-bottom: 3.86vw;}
#event .system-pic img{width: 100%;height: 100%;}
#event .system-ttl-01{
   font-size:3.865vw;
   font-weight: 500;
   line-height: 1.75;
   letter-spacing: 0.05em;
   margin-bottom: 5.80vw;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: normal;
   border-bottom: 0.2vw solid #DEDAD1;
   padding-bottom: 3.06vw;
}
#event .system-list li .txt-box {
   display: grid;
   gap: 2.22vw;
}
#event .system-list li .date-ttl{
   width: 9.66vw;
   background: #d16b35;
   display: grid;
   place-content: center;
   font-size:2.898vw;
   text-align: center;
   color: #fff;
   letter-spacing: 0;
}
#event .system-list li .system-date{
   font-size:2.898vw;
   letter-spacing: 0em;
   color: #666666;
   display: grid;
   align-items: center;
   gap: 0px 2.17vw;
   grid-template-columns: 9.66vw 1fr;
}

/* concept -------------------------------------*/
#concept .inner {
   padding-block: 24.15vw 66vw;
   display: grid;
}
#concept .photo-box {display: contents;}
#concept .photo01 {
   order: 1;
   margin-bottom: 17.2vw;
   width: 94.20vw;
   margin-inline: auto;
}
#concept .photo02 {text-align: right;position: relative;order: 4;}
#concept .photo02 img {
   width: 70.05vw;
}
#concept .txt-box {display: contents;}
#concept .txt-box h2 {
   order: 2;
   text-align: center;
   width: 15vw;
   margin:0 auto 14.59vw;
}
#concept .txt-box .wrap {
   order: 3;
   width: 86.96vw;
   margin-inline: auto;
   position: relative;
}
#concept .txt-box .txt {
   font-size:3.865vw;
   letter-spacing: 0.05em;
   line-height: 2;
   margin-bottom: 12.59vw;
}
#concept .txt-box .txt:nth-of-type(3) {margin-bottom: 13.49vw;}
#concept .txt-box .lead {
   font-weight: 500;
   font-size:4.831vw;
   letter-spacing: 0.05em;
   line-height: 1.9;
   margin-bottom: 12.49vw;
}
#concept .btn {
   position: absolute;
   bottom: -70vw;
   left: 50%;
   transform: translateX(-50%);
}

/* menu -------------------------------------*/
#menu {
   background: #F2F2F2;
}
#menu .inner {
   padding-block: 23.75vw;
   width: 91.79vw;
   margin-inline: auto;
}
#menu h2 {
   font-weight: 500;
   font-size:6.763vw;
   letter-spacing: 0.05em;
   text-align: center;
   margin-bottom: 8.66vw;
}
#menu h2 span {
   font-weight: 500;
   font-size:4.348vw;
   letter-spacing: 0.05em;
   text-align: center;
   display: block;
   margin-bottom: 1.1vw;
}
#menu .list {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 14.49vw 0;
}
#menu .list li {position: relative;}
#menu .list li a {
   background: #fff;
   padding-block: 8.66vw 9.9vw;
   padding-inline: 4.83vw;
   display: block;
}
#menu .list li .enttl {
   font-size:3.382vw;
   letter-spacing: 0.03em;
   text-align: center;
   margin-bottom: 1vw;
}
#menu .list li h3 {
   font-weight: 500;
   font-size:5.797vw;
   letter-spacing: 0.2em;
   text-align: center;
   margin-bottom: 5.2vw;
}
#menu .list li .photo {
   margin-bottom: 4.8vw;
}
#menu .list li .photo img {
   width: 100%;
   height: auto;
}
#menu .list li .txt {
   font-size:3.382vw;
   letter-spacing: 0.05em;
   line-height: 2;
   margin-bottom: 8.66vw;
}
#menu .btn {
   width: 77.29vw;
   margin-inline: auto;
   position: relative;
   font-size:3.865vw;
   line-height: 2.125;
   letter-spacing: 0.05em;
   display: block;
   border-bottom: 0.2vw solid #1A1A1A;
   padding: 0 0 4.35vw 3.62vw;
}
#menu .btn::after {
   content: "→";
   position: absolute;
   top: 41%;
   right: 3.2vw;
   transform: translateY(-50%);
   font-size: 3.831vw;
   line-height: 1.45;
   font-family: "Castoro", serif;
   transition: 0.3s;
}
#menu li:hover .btn::after {right: 1.99vw;}

/* works -------------------------------------*/
#works .inner {
   padding-block: 19.32vw;
   width: 91.79vw;
   margin-inline: auto;
   display: grid;
}
#works .top-frame {
   display: contents;
}
#works .ttl-box {
   order: 1;
   margin-bottom: 9vw;
}
#works .top-frame .enttl {
   font-size: 2.42vw;
   letter-spacing: 0.025em;
   margin-bottom: 1vw;
}
#works .top-frame h2 {
   font-weight: 500;
   font-size:4.831vw;
   letter-spacing: 0.05em;
}
#works .system-list {
   gap: 7.73vw 2.90vw;
   order: 3;
   margin-bottom: 13.56vw;
}
#works .system-list > li:nth-child(n+7) {
   display: none;
}
#works .system-list li .system-pic {margin-bottom: 2vw;}
#works .system-list li .system-pic img {height: 26.81vw;}
#works .system-list li .system-area {
   font-size:2.898vw;
   letter-spacing: 0.05em;
   margin-bottom: 1.21vw;
   color: inherit;
}
#works .system-list li .system-ttl-01 {
   font-weight: 500;
   font-size:3.382vw;
   letter-spacing: 0.05em;
   line-height: 1.571428;
   margin-bottom: 3.26vw;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
}
#works .system-tags {padding-left: 2.8vw;}
#works .system-tags li {
   font-size:2.898vw;
   color: #8d8d8d;
   position: relative;
   letter-spacing: 0;
}
#works .system-tags li::before {
   position: absolute;
   content: "#";
   left: -2.90vw;
   top: 50%;
   transform: translateY(-50%);
   font-size:2.898vw;
}
#works .btn {
   order: 4;
   margin-inline: auto;
}

/* modelhouse -------------------------------------*/
#modelhouse {
   position: relative;
   margin-bottom: 19.32vw;
}
#modelhouse .loop {overflow: hidden;position: absolute;top: 0;left: 0;}
#modelhouse .loop__box {display: flex;width: 100vw; background-color:#000;}
#modelhouse .loop__box img {min-width: 315vw;}
#modelhouse .loop__box img:first-child {animation: loop 50s -25s linear infinite;}
#modelhouse .loop__box img:last-child {animation: loop2 50s linear infinite;}
#modelhouse .inner {
   width:90.34vw;
   margin-inline: auto;
   padding-block: 9.85vw 0;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
}
#modelhouse .enttl {
   order: 3;
   position: relative;
   padding-right: 2vw;
}
#modelhouse h2 {order: 2;position: relative;left: -4.8vw;}
#modelhouse .txt-box {
   order: 1;
   position: relative;
   padding-block: 23vw;
}
#modelhouse .txt {
   font-size:3.382vw;
   letter-spacing: 0.05em;
   line-height: 2.285714;
   color: #fff;
   margin-bottom: 29.54vw;
}
#modelhouse .btn {
   position: relative;
   left: 6.5vw;
}
#modelhouse .btn a {
   color: #fff;
   border-bottom: 0.2vw solid #fff;
}

/* youtube -------------------------------------*/
#youtube {
   position: relative;
   z-index: 2;
   margin-top: -13vw;
}
#youtube::before {
   position: absolute;
   content: "";
   background: #F2F2F2;
   width: 91.79vw;
   height: 100%;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
}
#youtube .inner {position: relative;padding-block: 14vw 19vw;display: flex;flex-direction: column;}
#youtube .ttl-box {
   display: contents;
}
#youtube h2 {
   font-weight: 500;
   font-size:4.831vw;
   letter-spacing: 0.05em;
   line-height: 1.6;
   order: 1;
   text-align: center;
   position: relative;
   margin-bottom: 9vw;
   z-index: 2;
   width: 100vw;
   margin-inline: auto;
}
#youtube .btn {order: 4;margin-inline: auto;}
#youtube .btn a::after {
   position: absolute;
   content: "";
   background: url(../images/common/open-icon.svg)no-repeat;
   background-size: contain;
   width: 2.90vw;
   height: 2.90vw;
   top: 34%;
   right: 4.59vw;
   transform: translateY(-50%);
}
#youtube .slider-wrap {
   order: 2;
   margin-bottom: 7.5vw;
}
#youtube .slick-slide {
   width: 77.29vw;
   height: 43.48vw;
   margin: 0 2.42vw;
}
#youtube .system-pic {
   position: relative;
   width: 100%;
   aspect-ratio: 16 / 9;
   overflow: hidden;
}
#youtube .system-pic img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}
#youtube .progress-bar {
   width: 77.29vw;
   height: 0.2vw;
   background: #FFFFFF;
   overflow: hidden;
   order: 3;
   margin-inline: auto;
   margin-bottom: 13.8vw;
}
#youtube .progress-bar .progress {
   width: 0%;
   height: 100%;
   background: #8D8D8D;
}

.slide-wrap {width: auto;order: 2;margin-bottom: 13.53vw;}
.slick-slider {
   padding: 0 0 7.73vw;
}
.slick-nav {
   width: auto;
   position: relative;
   right: calc(50% + -50%);
   bottom: 0;
   margin: 0 auto;
}
.slick-num {
   display: none;
}

.progress-container {
   width: calc(100% - 100px);
   height: 0.2vw;
   background-color: #FFFFFF;
   position: relative;
   margin: 0 auto;
}
.progress-bar1-1 {
   width: 0;
   height: 100%;
   background-color: #8D8D8D;
   position: absolute;
   top: 0;
   left: 0;
   transition: width 0.5s ease;
}

/* interview -------------------------------------*/
#interview {
   position: relative;
   margin-top: -9vw;
   background: #E5E5E1;
   display: grid;
   padding-bottom: 19.32vw;
}
#interview .top-frame {
   display: contents;
}
#interview .ttl-box {
   order: 1;
   padding-block: 28vw 9vw;
   text-align: center;
}
#interview .top-frame .enttl {
   font-size: 2.42vw;
   letter-spacing: 0.025em;
   margin-bottom: 1.5vw;
}
#interview .top-frame h2 {
   font-weight: 500;
   font-size:4.831vw;
   letter-spacing: 0.05em;
}
#interview .slick-list{
   overflow: visible!important;
}
#interview .system-list {
   position: relative;
   padding-block: 0 13.56vw;
   width: 82.13vw;
   margin-inline: auto;
   order: 2;
}
#interview .system-list li{width: 82.13vw;margin: 0 1.21vw;position: relative;background: #FFFFFF;padding: 2.42vw;min-height: 83.57vw;}
#interview .system-list li::after {
  content: '→';
  position: absolute;
  font-size: 3.831vw;
  bottom: 2.45vw;
  right: 4.62vw;
  transition: 0.3s;
  font-family: "Castoro", serif;
}
#interview .system-list li:hover::after {
  right: 3.41vw;
}
#interview .system-list .system-ttl-01 {
   font-weight: 500;
   font-size:3.865vw;
   letter-spacing: 0.05em;
   line-height: 1.75;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
   width: 72.46vw;
   margin-inline: auto;
   margin-bottom: 1vw;
}
#interview .system-pic {
  height: 45.41vw;
  text-align: center;
  margin-bottom: 5.4vw;
}
#interview .system-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#interview .system-area {
   font-size:3.382vw;
   letter-spacing: 0.05em;
   line-height: 2.285714;
   width: 72.46vw;
   margin-inline: auto;
}
#interview .next-arrow,
#interview .prev-arrow {
   position: absolute;
   top: 34.5vw;
   z-index: 11;
   width: 9.66vw;
   height: auto;
   cursor: pointer;
}
#interview .next-arrow {
  right: -9.2vw;
}
#interview .prev-arrow {
  left: -8.8vw;
}
#interview .btn {
   order: 3;
   margin-inline: auto;
}

/* contents -------------------------------------*/
#contents .inner {
   padding-block: 22.45vw;
}
#contents h2 {
   font-size:5.797vw;
   letter-spacing: 0.025em;
   text-align: center;
   margin-bottom: 7.86vw;
}
#contents .list {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 0.97vw 0;
}

/* about -------------------------------------*/
#about .inner {
   display: grid;
   padding-bottom: 26.57vw;
}
#about .txt-box {
   display: contents;
}
#about h2 {
   font-size:5.797vw;
   letter-spacing: 0.025em;
   text-align: center;
   margin-bottom: 7.96vw;
   order: 1;
}
#about .list {
   display: grid;
   gap: 8.65vw 0;
   order: 3;
   width: 77.29vw;
   margin-inline: auto;
}
#about .list .btn .en {
   font-size: 2.42vw;
   letter-spacing: 0.025em;
   display: block;
   margin-bottom: 1.93vw;
}
#about .list .btn a {
   font-weight: 500;
   font-size:3.865vw;
   letter-spacing: 0.05em;
   line-height: 1.3333;
   padding: 0 0 4.97vw 3.3vw;
}
#about .list .btn a::after {
   top: 50%;
   font-size: 3.831vw;
   right: 3.2vw;
}
#about .list .btn a:hover::after {
   right: 1.99vw;
}
#about .photo {
   order: 2;
   margin-bottom: 11.06vw;
}


}