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

/* ========================================
   @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {  

.btn {
   font-size: clamp(0.75rem, 0.417rem + 0.69vw, 1.25rem);
   line-height: 1.2;
   letter-spacing: 0em;
   font-weight: 400;
   border-bottom: 1px solid #1A1A1A;
   width: 360px;
   position: relative;
}
.btn a {
   display: block;
   text-decoration: none;
}
.btn::after {
   content: ">";
   position: absolute;
   top: 31%;
   right: 9%;
   transform: translateY(-50%);
   font-size: clamp(0.75rem, 0.417rem + 0.69vw, 1.25rem);
}

.inner {
   max-width: 1920px;
   margin-inline: auto;
   width: 100%;
}

/* mv
  -------------------------------------*/
.mv .mv-inner {
   display: grid;
   grid-template-columns: 1fr 76.59%;
   padding-left: 40px;
}
.mv .mv-left {
   position: relative;
   padding: 275px 0 0;
}
.mv .mv-enttl {
   position: absolute;
   top: -65px;
   z-index: 2;
}
.mv .h-logo {
   margin-bottom: 18px;
}
.mv .h-txt {
   font-weight: 500;
   font-size: 14px;
   line-height: 1.7142857;
   letter-spacing: 0;
}
.mv .mv-deco {
   position: absolute;
   bottom: -22px;
   left: 141px;
   z-index: 3;
}
.mv .mv-deco::after {
   width: 500px;
   height: 500px;
   background: #fff;
   content: "";
   position: absolute;
   bottom: -394px;
   left: -22px;
   border-radius: 50%;
   z-index: 1;
}

  
/* 3枚表示のbxslider
  -------------------------------------*/

.full-screen{ position: relative; }
.full-screen .slick-slide img {  width: 100%;  height: auto;}
.full-screen .slick-slide {transition: all ease-in-out .3s;opacity: .2;}
.full-screen .slick-active { opacity: 1;}
.full-screen .slick-current { opacity: 1;}
.full-screen .slick-list { overflow: hidden; }

.slide-dots {
   margin: 0;
   padding: 0;
   text-align: center;
   display: flex;
   flex-direction: column;
   position: absolute;
   bottom: 68px;
   left: -440px;
   z-index: 9999;
 }
 .slide-dots li {
   display: inline-block;
   margin: 0 10px;
 }
 .slide-dots li button {
   position: relative;
   text-indent: -9999px;
 }
 .slide-dots li button::before {
   background-image: url(../images/index/slide-dots.svg);
   background-repeat: no-repeat;
   background-size: contain;
   content: "";
   cursor: pointer;
   height: 10px;
   left: 0;
   margin: auto;
   position: absolute;
   right: 0;
   top: 24px;
   width: 10px;
 }
 .slide-dots li.slick-active button::before {
   background-image: url(../images/index/slide-dots-active.svg);
 }

/* 外枠の設定 */
.slide-dots li.slick-active button::after {
   content: "";
   position: absolute;
   top: 38%;
   left: -0.65rem;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   box-sizing: border-box;
   border: 1px solid transparent;
   border-top-color: #1A1A1A;
   animation: draw-circle-clockwise 3s linear forwards;
   transform: rotate(0deg); /* 12時から開始 */
   transform-origin: center;
}

/* アニメーション */
@keyframes draw-circle-clockwise {
   0% {
       border-color: transparent;
   }
   10% {
       border-top-color: #1A1A1A;
   }
   25% {
       border-top-color: #1A1A1A;
       border-right-color: #1A1A1A;
   }
   50% {
       border-top-color: #1A1A1A;
       border-right-color: #1A1A1A;
       border-bottom-color: #1A1A1A;
   }
   75% {
       border-top-color: #1A1A1A;
       border-right-color: #1A1A1A;
       border-bottom-color: #1A1A1A;
       border-left-color: #1A1A1A;
   }
   100% {
       border-color: #1A1A1A;
   }
}


 button {
   background: none;
   border: none;
   outline: none;
   padding: 10px 0;
 }


/* topics -------------------------------------*/
#topics {
   position: relative;
   z-index: 3;
}
#topics .inner-Box{
   width: min(95%, 1560px);
   margin-left: auto;
   padding: 10px 0 0;
}
#topics h2 {
   font-weight: 500;
   font-size: 40px;
   line-height: 1.2;
   text-align: left;
   letter-spacing: 0;
   margin: 0;
}
#topics .system-list li {
   /* width: 600px; */
   margin: 0 10px;
   position: relative;
 }
 #topics .system-list .system-pic {
   height: 240px;
   margin: 0;
 }
 #topics .system-list .system-pic img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
#topics .next-arrow,
#topics .prev-arrow {
   position: absolute;
   top: -60px;
   width: 40px;
   height: auto;
   z-index: 15;
   cursor: pointer;
}
#topics .next-arrow {
   left: 216px; 
}
#topics .prev-arrow {
   left: 155px; 
}
#topics .slider-wrap {
   margin: -100px 0 0;
   position: relative;
   overflow: hidden;
   width: 100%;
   padding: 0;
}
#topics .slider-box {padding: 0 100px;margin: 120px auto 0;position: relative;max-width: 100%;padding: 0; }
#topics .slick-list {
   overflow: hidden !important;
   padding: 0;
   margin: 0;
}

/* concept -------------------------------------*/
#concept {
   margin-top: -150px;
   position: relative;
   max-width: 1920px;
   width: 100%;
   margin-inline: auto;
}
#concept::after {
   content: "";
   position: absolute;
   bottom: 228px;
   right: 0;
   width: 1020px;
   height: 1270px;
   background: url(../images/index/concept-bg-deco.png) no-repeat;
   background-size: contain;
}
#concept .inner-Box {
   width: 95.8333333%;
   margin-right: auto;
   background: transparent linear-gradient(180deg, rgba(244, 241, 233, 0.4) 0%, #EBE5D5 100%) 0% 0% no-repeat padding-box;
   padding: 519px 238px 1205px 320px;
   position: relative;
}
#concept .inner-Box h2 {
   position: absolute;
   top: 271px;
   right: 186px;
   width: 911px;
}
#concept .inner-Box h2 img {
   width: 100%;
   height: auto;
}
#concept .inner-Box .content-box {
   display: grid;
   grid-template-columns: 70.7% 1fr;
   position: relative;
   z-index: 7;
}
#concept .left-box h3 {
   margin-bottom: 40px;
   position: relative;
}
#concept .left-box h3::before {
   content: "";
   position: absolute;
   top: -113px;
   left: -93px;
   width: 152px;
   height: 126px;
   background: url(../images/index/concept-subt-deco.png) no-repeat;
   background-size: contain;
}
#concept .left-box .lead {
   font-size: 28px;
   line-height: 1.5;
   letter-spacing: 0em;
   font-weight: 700;
   margin: 0 0 65px 20px;
}
#concept .left-box .txt {
   font-size: clamp(0.875rem, 0.792rem + 0.17vw, 1rem);
   line-height: 2.625;
   letter-spacing: 0em;
   font-weight: 700;
   margin: 0 0 42px 40px;
}
#concept .right-box {
   margin: 185px 0 0;
   position: relative;
}
#concept .right-box .en-lead {
   font-size: 18px;
   line-height: 1.4444444444;
   letter-spacing: 0.12em;
   font-weight: 500;
   text-align: right;
   margin-bottom: 18px;
}
#concept .right-box .en-txt {
   font-size: 14px;
   line-height: 1.4285714286;
   letter-spacing: 0.12em;
   font-weight: 300;
   text-align: right;
}
#concept .btn {
   position: absolute;
   bottom: 56px;
   width: 360px;
   right: 0;
   z-index: 2;
}
#concept .btn a {
   padding: 0 0 21px 18px;
}
#concept .btn::after {
   font-size: 20px;
}
#concept .bg-slide {
   max-width: 1920px;
   z-index: 6;
   position: absolute;
   bottom: 355px;
}
 #concept .bg-slide .loop {
   padding-top: 80px;
   padding-bottom: 80px;
   overflow: hidden;
 }
 #concept .bg-slide .loop .loop__box {
   display: flex;
   width: 100vw;
 }
 #concept .bg-slide .loop .loop__box img {
   min-width: 187.5vw;
 }
 #concept .bg-slide .loop .loop__box img:first-child {
   -webkit-animation: loop 50s -25s linear infinite;
   animation: loop 50s -25s linear infinite;
 }
 #concept .bg-slide .loop .loop__box img:last-child {
   -webkit-animation: loop2 50s linear infinite;
   animation: loop2 50s linear infinite;
 }

/* event -------------------------------------*/
#event {
   position: relative;
   margin-top: -180px;
}
#event .bg {
   position: absolute;
   top: -117px;
   right: 0;
   width: 91.6666%;
   height: 912px;
   background: #FFFFFF;
   z-index: 1;
}
#event .inner-Box{
   width: min(95%, 1280px);
   margin-inline: auto;
   position: relative;
   z-index: 5;
}
#event .top-box{
   display: flex;
   justify-content: space-between;
   align-items: center;
}
#event h2 {
   font-weight: bold;
   font-size: 20px;
   line-height: 1.7;
   letter-spacing: 0;
}
#event .enttl {
   font-weight: 600;
   font-size: 80px;
   line-height: 1.2;
   letter-spacing: 0;
   margin-bottom: 38px;
}
#event .btn {
   width: 240px;
   margin: 12px 0 0;
}
#event .btn a {
   padding: 0 0 1.35rem 0;
}
#event .btn::after {
   right: 0;
}
#event .system-list {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 40px;
}
#event .system-list li {
   position: relative;
}
#event .system-list li a:hover{ text-decoration: none; }

#event .system-pic{width: 100%;height: 280px;overflow: hidden;text-align: center;margin-bottom: 23px;}
#event .system-pic img{width: auto;height: 100%;}
#event .system-list li .system-date{
   display: grid;
   gap: 0 6px;
   margin-bottom: 8px;
   grid-template-columns: 18% 1fr;
}
#event .system-list li .system-date .date-ttl{
   /* width: 68px; */
   /* height: 20px; */
   background: #666464;
   font-weight: 500;
   font-size: clamp(0.625rem, 0.542rem + 0.17vw, 0.75rem);
   letter-spacing: 0.05em;
   line-height: 1.8333;
   text-align: center;
   color: #fff;
}
#event .system-list li .system-date .start_text{
   font-weight: 500;
   font-size: clamp(0.75rem, 0.667rem + 0.17vw, 0.875rem);
   letter-spacing: 0.05em;
   line-height: 1.571428;
}
#event .system-ttl-01{
   font-weight: bold;
   font-size: 20px;
   letter-spacing: 0.05em;
   line-height: 1.6;
   border-bottom: 1px solid #1A1A1A;
   padding: 0 0 18px;
   margin-bottom: 19px;
}
#event .icon{width: 80px;height: 80px;border-radius: 40px;text-align: center;padding-top: 26px;display: block;color: #fff;position: absolute;top: -40px;right: 20px;z-index: 2;}
#event .icon01 {
   background: #FABE00;
   color: #1A1A1A;
}
#event .icon02 {
   background: #263868;
}
#event .icon03 {
   background: #1A1A1A;
}

/* youtube -------------------------------------*/
#youtube {
   margin-top: 265px;
}
#youtube .inner-Box {
   width: min(95%, 1500px);
   margin-inline: auto;
   padding: 0 0 232px;
}
#youtube .top-box {
   display: grid;
   grid-template-columns: 56.66% 1fr;
   gap: 75px;
   border-bottom: 1px solid #A1A1A1;
 }
 #youtube .left-box {
   margin: 15px 0 0;
 }
 #youtube .left-box .inner {
   display: grid;
   grid-template-columns: 58.11% 1fr;
   gap: 33px;
   align-items: center;
 }
 #youtube .left-box .ttl-box {
   display: flex;
   gap: 40px;
 }
 #youtube .left-box .ttl-box .enttl {
   font-size: 80px;
   line-height: 1.2;
   letter-spacing: 0em;
   font-weight: 600;
 }
 #youtube .left-box .ttl-box h2 {
   font-size: 24px;
   line-height: 1.7916666667;
   letter-spacing: 0em;
   font-weight: 700;
   margin: 11px 0 0;
 }
 #youtube .left-box .ttl-box h2 span {
   font-size: 18px;
   line-height: 1.7777777778;
   letter-spacing: 0em;
   font-weight: 700;
   display: block;
 }
 #youtube .left-box .txt {
   font-size: 14px;
   line-height: 1.8571428571;
   letter-spacing: 0.05em;
   font-weight: 500;
   margin: 14px 0 0;
 }
 #youtube .left-box .list {
   display: flex;
   gap: 21px;
   margin: -3px 0 0 16px;
 }
 #youtube .left-box .list li {
   font-size: 14px;
   line-height: 1.8571428571;
   letter-spacing: 0.05em;
   font-weight: 500;
   position: relative;
 }
 #youtube .left-box .list li::before {
   content: "#";
   position: absolute;
   top: 50%;
   left: -13px;
   font-size: 14px;
   transform: translateY(-50%);
   color: #A78F43;
 }
 #youtube .right-box {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 #youtube .next-arrow,
 #youtube .prev-arrow {
   position: absolute;
   top: -109px;
   width: 40px;
   height: auto;
   z-index: 15;
   cursor: pointer;
}
#youtube .next-arrow {
   right: 280px;
}
#youtube .prev-arrow {
   right: 341px;
}
#youtube .slider-wrap {position: relative;}
#youtube .slider-box {margin: 40px auto 0;position: relative;}
 #youtube .slick-list {
   overflow: hidden !important; 
   padding: 0;
   margin: 0;
}

 #youtube .btn {
   width: 240px;
   margin: 38px 0 0;
 }
 #youtube .btn a {
   padding: 0 0 20px;
 }
 #youtube .btn::after {
   right: 0;
 }
 #youtube .system-list {

 }
 #youtube .system-list li {
   width: 284px;
   margin: 0 10px;
 }
 #youtube .system-ttl {
   font-size: 14px;
   font-weight: 500;
   line-height: 1.85714;
   letter-spacing: 0.05em;
 }
 #youtube .system-list li img {
   /* height: 10rem; */
   aspect-ratio: 16 / 9;
   height: auto;
 }

/* showroom -------------------------------------*/
#showroom {
   width: 100%;
   max-width: 1920px;
   margin: 0 auto;
   background: url(../images/index/showroom-bg.jpg) no-repeat center top;
   background-size: 100% auto;
   background-attachment: fixed !important;
   text-align: center;
 }
 #showroom .inner-Box {
   position: relative;
   padding: 198px 0 18px;
   width: min(95%, 1200px);
   margin-inline: auto;
 }
 #showroom .inner-Box h2 {
   position: absolute;
   top: -193px;
   left: 46.6%;
   transform: translateX(-50%);
 }
 #showroom .label {
   position: absolute;
   top: -91px;
   right: 0;
 }
 #showroom .list {
   margin: 0 0 9px 2px;
 }
 #showroom .list li {
   font-size: 26px;
   line-height: 1.5769230769;
   letter-spacing: 0em;
   font-weight: 500;
   color: #FFFFFF;
   border-bottom: 1px solid #FFFFFF;
   position: relative;
   display: inline-block;
   padding: 0 0 7px 34px;
   margin: 0 0 19px;
 }
 #showroom .list li::before {
   content: "✓";
   position: absolute;
   top: 47%;
   left: 0px;
   font-size: 26px;
   transform: translateY(-50%);
   color: #FABE00;
 }
 #showroom .entxt {
   font-size: 144px;
   line-height: 0.9722222222;
   letter-spacing: 0em;
   font-weight: 600;
   color: #FFFFFF;
   margin-bottom: 33px;
   opacity: 0.5;
 }
 #showroom .txt01 {
   font-size: 24px;
   line-height: 1.8333333333;
   letter-spacing: 0em;
   font-weight: 700;
   color: #FFFFFF;
   margin-bottom: 10px;
 }
 #showroom .txt02 {
   font-size: 30px;
   line-height: 1.4666666667;
   letter-spacing: 0em;
   font-weight: 700;
   color: #FFFFFF;
 }
 #showroom .btn {
   width: 880px;
   margin-inline: auto;
   background: #A78F43;
   position: relative;
   top: 58px;
   border: none;
 }
 #showroom .btn a {
   color: #fff;
   padding: 28px 0;
 }
 #showroom .btn::after {
   color: #fff;
   right: 60px;
   top: 50%;
 }


/* about -------------------------------------*/ 
#about {
   background: #E9E9E9;
 }
 #about .inner-Box {
   width: min(95%, 1360px);
   margin-inline: auto;
   padding: 155px 0 140px;
 }
 #about .ttl-box {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 57px;
 }
 #about .left-box {
   margin: 22px 0 0;
 }
 #about .left-box .enlead {
   font-size: 20px;
   line-height: 1.2;
   letter-spacing: 0.05em;
   font-weight: 400;
   margin-bottom: 12px;
   color: #A1A1A1;
 }
 #about .left-box .entxt {
   font-size: 14px;
   line-height: 1.2142857143;
   letter-spacing: 0.05em;
   font-weight: 400;
   color: #A1A1A1;
 }
 #about h2 {
   font-size: 100px;
   line-height: 1.2;
   letter-spacing: 0em;
   font-weight: 600;
   margin: 0 41px 0 0;
   text-align: right;
 }
 #about h2 span {
   font-size: 24px;
   line-height: 1.7916666667;
   letter-spacing: 0em;
   font-weight: 700;
   display: block;
 }
 #about .list {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 80px;
 }
 #about .list li {
   position: relative;
   padding: 0 0 20px;
 }
 #about .list li .num {
   width: 80px;
   height: 80px;
   border-radius: 40px;
   text-align: center;
   padding-top: 19px;
   display: block;
   position: absolute;
   top: -57px;
   left: 0px;
   border: 1px solid #707070;
   font-size: 24px;
   font-weight: 500;
   letter-spacing: 0;
   z-index: 2;
 }
 #about .list li h3 {
   position: absolute;
   top: -24px;
   right: -20px;
   z-index: 2;
 }
 #about .list li h3 img {
   width: 100%;
   height: auto;
 }
 #about .list li .photo {
   margin-bottom: 21px;
 }
 #about .list li .photo img {
   width: 100%;
 }
 #about .list li .txt {
   font-size: 14px;
   line-height: 1.8571428571;
   letter-spacing: 0.05em;
   font-weight: 500;
   margin-bottom: 36px;
 }
 #about .list li .btn {
   width: 99px;
   font-size: 12px;
   line-height: 1.1666666667;
   letter-spacing: 0em;
   font-weight: 400;
   position: absolute;
   bottom: 0;
 }
 #about .list li .btn a {
   padding: 0 0 9px;
 }
 #about .btn::after {
   font-size: 14px;
   right: 0;
 }

/* area -------------------------------------*/
#area .inner-Box {
   width: min(95%, 1200px);
   margin-inline: auto;
   padding: 123px 0 0;
}
#area h2 {
   text-align: center;
}
#area .banner {
   margin: -5px 0 0;
}
#area .banner img {
   width: 100%;
   height: auto;
}

/* portfolio -------------------------------------*/
#portfolio {
   margin-top: 98px;
}
#portfolio .inner-Box{ 
   width: min(95%, 1660px);
   margin-inline: auto;
}
#portfolio h2 {
   font-weight: bold;
   font-size: 20px;
   line-height: 1.7;
   text-align: center;
}
#portfolio .enttl {
   font-weight: 600;
   font-size: 80px;
   line-height: 1.1;
   letter-spacing: 0;
   margin-bottom: 46px;
   text-align: center;
}
#portfolio .system-list{
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 60px 20px;
   margin-bottom: 60px;
}
#portfolio .system-list li{ 

}
#portfolio .system-list li a:hover{ text-decoration: none; }
#portfolio .btn{ 
   width: 720px;
   margin-inline: auto;
   background: #1A1A1A;
   border: none;
   text-align: center;
}
#portfolio .btn a {
   color: #fff;
   padding: 28px 0;
}
#portfolio .btn a::after {
   content: none;
} 
#portfolio .system-pic{width: 100%;height: 17.5rem;overflow: hidden;text-align: center;margin-bottom: 21px;}
#portfolio .system-pic img{width: 100%;height: 100%;object-fit: cover;}
#portfolio .system-area{ 
   font-weight: 500;
   font-size: 14px;
   letter-spacing: 0.05em;
   line-height: 1.85714;
   text-align: left;
   color: #a1a1a1;
   margin-bottom: 5px;
}
#portfolio .system-ttl-01{
   font-weight: bold;
   font-size: 16px;
   letter-spacing: 0.05em;
   line-height: 1.625;
   color: #1a1a1a;
}


/* link-box -------------------------------------*/
#link-box {
   position: relative;
   margin-top: 119px;
   max-width: 1920px;
   width: 100%;
   margin-inline: auto;
}
#link-box::after {
   content: "";
   position: absolute;
   bottom: -37px;
   left: 0;
   width: 680px;
   height: 775px;
   background: url(../images/index/linkBox-bg-deco.png) no-repeat;
   background-size: contain;
   z-index: 1;
}
#link-box .bg {
   position: absolute;
   top: -21px;
   left: 50%;
   transform: translateX(-50%);
   width: 91.6666%;
   height: 100%;
   background-color: #EBE5D5;
   clip-path: polygon(0 0, 100% 31.6%, 100% 100%, 0% 100%);
}
#link-box .inner-Box {
   width: min(95%, 1280px);
   margin-inline: auto;
   position: relative;
   z-index: 2;
   padding: 0 0 178px;
}
#link-box .item {display: grid;gap: 57px;}
#link-box .item li {
   width: 920px;
}
#link-box .item li:first-child {
   margin-right: auto;
}
#link-box .item li:last-child {
   margin-left: auto;
}
#link-box .item li .banner {
   margin-bottom: 17px;
}
#link-box .item li .txt {
   font-weight: 500;
   font-size: 14px;
   letter-spacing: 0.05em;
   line-height: 1.8571428;
   text-align: left;
}

/* voice -------------------------------------*/
#voice {padding: 0 0 76px;}
#voice .inner-Box{
   width: min(95%, 1200px);
   margin-inline: auto;
   position: relative;
}
#voice .top-box {
   display: flex;
   justify-content: space-between;
   padding: 40px 0 0;
   margin: 0 0 0 309px;
}
#voice h2 {
   font-weight: bold;
   font-size: 24px;
   line-height: 1.7916666;
   letter-spacing: 0;
   margin: -5px 0 0;
}
#voice .enttl {
   position: absolute;
   top: -71px;
   left: 6px;
   z-index: 2;
}
#voice .btn {
   width: 240px;
}
#voice .btn a {
   padding: 0 0 18px;
}
#voice .btn::after {
   right: 0;
}

#voice .system-list{
   overflow: hidden;
   padding: 57px 0 0;
}
#voice .system-list li{ 
   position: relative;
   width: 300px;
   margin: 0 20px;
}
#voice .system-list li:nth-child(odd) {
   margin-top: 42px;
}
#voice .system-list li a:hover{ text-decoration: none; }
#voice .system-list li .label {
   position: absolute;
   top: -20px;
   right: -20px;
   z-index: 2;
   width: 55px;
   height: 82px;
   color: #fff;
   font-size: 16px;
   font-weight: 600;
   line-height: 1.1875;
   letter-spacing: 0;
   text-align: center;
   padding: 1.2rem 0 0;
}
#voice .system-list li .label .tit {
   display: inline-block;
   border-bottom: 1px solid #FFFFFF;
   margin-bottom: 0.25rem;
}
#voice .bg-red {
   background-color: #9F434A;
 }
 #voice .bg-green {
   background-color: #5E8958;
 }
 #voice .bg-gold {
   background-color: #A78F43;
 }
 #voice .bg-blue {
   background-color: #436788;
 }
#voice .pic-frame {
   position: relative;
}
#voice .system-pic{width: 100%;height: 13.125rem;overflow: hidden;text-align: center;margin-bottom: 15px;}
#voice .system-pic img{width: 100%;height: 100%;object-fit: cover;}
#voice .system-area{
   font-weight: 500;
   font-size: 14px;
   letter-spacing: 0.05em;
   line-height: 1.8571428;
   text-align: center;
   color: #a78f43;
   background: #F8F8F8;
   position: absolute;
   bottom: 0;
   left: 0;
   padding: 3px 38px;
}
#voice .system-ttl-01{font-size: 1em;margin-bottom: 10px;line-height: 1.625;font-weight: 700;letter-spacing: 0.05em;}
#voice .slick-list {
   overflow: visible;
}

/* staff -------------------------------------*/
#staff {
   background: url(../images/index/staff-photo.jpg) top center / contain no-repeat, #EBE5D5;
   position: relative;
}
#staff .bg {
   background: transparent linear-gradient(180deg, #EBE5D5 0%, #F6F5F1 100%) 0% 0% no-repeat padding-box;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 49.1725%;
}
#staff .inner-Box {
   width: min(95%, 1540px);
   margin-inline: auto;
   overflow: hidden;
   position: relative;
   padding-top: 34.9%;
   padding-bottom: 118px;
}
#staff .content-box {
   width: min(95%, 1440px);
   margin-inline: auto;
   background: #FFFFFF;
   padding: 72px 80px 507px;
   position: relative;
   overflow: visible;
   margin-bottom: 85px;
}
#staff .content-box .top-box {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
#staff .content-box .top-box h2 {
   font-weight: bold;
   font-size: 20px;
   line-height: 2.15;
   letter-spacing: 0;
   margin-bottom: 14px;
}
#staff .content-box .top-box .txt {
   font-weight: 500;
   font-size: 14px;
   letter-spacing: 0.05em;
   line-height: 1.8571428;
}
#staff .btn {
   width: 240px;
   margin: 58px 0 0;
}
#staff .btn a {
   padding: 0 0 20px;
}
#staff .btn::after {
   right: 0;
}

#staff .system-list{
   overflow: visible;
   position: absolute;
   top: 53.6%;
   width: 100%;
   left: 0;
}
#staff .system-list li{
   width: 260px;
   margin: 0 30px;
}
#staff .system-list li a:hover{ text-decoration: none; }

#staff .system-pic{ width: 100%; height: 16.25rem; margin-bottom: 15px; overflow: hidden; text-align: center; display: block;border-radius: 50%;}
#staff .system-pic img{ width: 100%; height: 100%; object-fit: cover; }
#staff .system-ttl{
   font-weight: bold;
   font-size: 16px;
   letter-spacing: 0.05em;
   line-height: 1.625;
   text-align: center;
   margin-bottom: 0.2rem;
}
#staff .system-en{
   font-weight: normal;
   font-size: 10px;
   letter-spacing: 0.05em;
   line-height: 2.3;
   text-align: center;
   color: #a1a1a1;
}
#staff .system-job{
   font-weight: 500;
   font-size: 14px;
   letter-spacing: 0.05em;
   line-height: 1.85714;
   text-align: center;
   color: #a78f43;
}


#staff .next-arrow,
#staff .prev-arrow {
  position: absolute;
  top: -27%;
  width: 40px;
  height: auto;
  z-index: 15;
   cursor: pointer;
}
#staff .next-arrow {
  right: 46.77%;
}
#staff .prev-arrow {
  left: 46.7%;
}
#staff .slider-wrap {position: relative;}
#staff .slider-box {margin: 40px auto 0;position: relative;}
#staff .slick-list {
   overflow: visible !important; 
}

#staff .bottom-box {
   display: flex;
   justify-content: space-between;
   width: min(95%, 1440px);
   margin-inline: auto;
   align-items: flex-end;
}
#staff .bottom-box .en {
   font-weight: 500;
   font-size: 16px;
   line-height: 1.1875;
   letter-spacing: 0;
   margin-bottom: 20px;
}
#staff .bottom-box .ttl {
   font-weight: bold;
   font-size: 24px;
   line-height: 1.66666;
   letter-spacing: 0;
}
#staff .bottom-box .btn-box {
   display: flex;
   gap: 59px;
   margin: 0 0 3px;
   align-items: flex-end;
}
#staff .bottom-box .btn {
   width: 340px;
   font-weight: 500;
   font-size: 20px;
   line-height: 2.15;
   letter-spacing: 0;
}
#staff .bottom-box .btn a {
   padding: 0 0 12px 18px;
}
#staff .bottom-box .btn span {
   font-weight: 500;
   font-size: 12px;
   line-height: 1.1666;
   display: block;
   margin-bottom: 0;
}
#staff .bottom-box .btn::after {
   right: 6%;
   top: 53%;
}
#staff .bottom-box .sns-list {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 20px;
}

}

/* ========================================
@media screen and (min-width:1801px) and (max-width:1910px)
======================================== */
@media screen and (min-width:1801px) and (max-width:1910px) {
.mv .mv-enttl {
        position: absolute;
        top: -3.4vw;
        z-index: 2;
        width: 44.556vw;
}
.mv .mv-enttl img {
   width: 100%;
   height: auto;
}
}

/* ========================================
@media screen and (min-width:1591px) and (max-width:1800px)
======================================== */
@media screen and (min-width:1711px) and (max-width:1800px) {
.mv .mv-enttl {top: -4vw;width: 42.556vw;}
.mv .mv-enttl img {
   width: 100%;
   height: auto;
}
}

/* ========================================
@media screen and (min-width:1581px) and (max-width:1710px) {
======================================== */
@media screen and (min-width:1581px) and (max-width:1710px) {
.mv .mv-enttl {
top: -4vw;
width: 38.556vw;
}
.mv .mv-enttl img {
   width: 100%;
   height: auto;
}
}

/* ========================================
@media screen and (min-width:1511px) and (max-width:1580px) {
======================================== */
@media screen and (min-width:1511px) and (max-width:1580px) {
.mv .mv-enttl {        top: -4vw;
        width: 36.556vw;}
.mv .mv-enttl img {
   width: 100%;
   height: auto;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1510px) {
======================================== */
@media screen and (min-width:768px) and (max-width:1510px) {
.mv .mv-enttl {        top: -5.5vw;
        width: 44.556vw;}
.mv .mv-enttl img {
   width: 100%;
   height: auto;
}
}


/* ========================================
@media screen and (min-width:768px) and (max-width:1800px)
======================================== */
@media screen and (min-width:768px) and (max-width:1800px) {
/* mv
  -------------------------------------*/
.mv .mv-inner {
   display: grid;
   grid-template-columns: 1fr 76.59%;
   padding-left: 2.222vw;
}
.mv .mv-left {
   position: relative;
   padding: 13.222vw 0 0;
}


.mv .mv-enttl img {
   width: 100%;
   height: auto;
}

.mv .h-logo {
   margin-bottom: 1vw;
   width: 11.167vw;
}
.mv .h-logo img {
   width: 100%;
   height: auto;
}
.mv .h-txt {
   font-weight: 500;
   font-size: clamp(0.5rem, 0.221rem + 0.58vw, 0.875rem);
   line-height: 1.7142857;
   letter-spacing: 0;
}
.mv .mv-deco {
   position: absolute;
   bottom: -2.389vw;
   left: 2.833vw;
   z-index: 2;
   width: 15.778vw;
}
.mv .mv-deco img {
   width: 100%;
   height: auto;
}
.mv .mv-deco::after {
   width: 27.778vw;
   height: 27.778vw;
   background: #fff;
   content: "";
   position: absolute;
   bottom: -21.5vw;
   left: -1.222vw;
   border-radius: 50%;
   z-index: 1;
}

.slide-dots {
   bottom: 0.778vw;
   left: -23.444vw;
}
}



@media screen and (min-width:768px) and (max-width:1540px) {
#event .bg {
position: absolute;
top: -7.5974vw;
right: 0;
width: 91.6666vw;
height: 59.2207vw;
background: #FFFFFF;
z-index: 1;
}

}



@media screen and (min-width:768px) and (max-width:1280px) {
   .slide-dots {
      bottom: 0.313vw;
      left: -23.375vw;
   }
   .slide-dots li button::before {
      height: 0.781vw;
      width: 0.781vw;
      top: 94%;
    }
    .slide-dots li.slick-active button::after {
      top: 57%;
      left: -0.8vw;
      width: 2.344vw;
      height: 2.344vw;
   }
   button {
      padding: 0.391vw 0;
   }
   
}
@media screen and (min-width:768px) and (max-width:1150px) {
}


/* ========================================
@media screen and (min-width:768px) and (max-width:1600px)
======================================== */
@media screen and (min-width:768px) and (max-width:1600px) {
/* topics -------------------------------------*/
#topics .inner-Box{
   width: 97.5vw;
   margin-left: auto;
   padding: 0.625vw 0 0;
}
#topics h2 {
   font-size: 2.5vw;
}
#topics .system-list li {
   /* width: 37.5vw; */
   margin: 0 0.625vw;
 }
 #topics .system-list .system-pic {
   height: 15vw;
   margin: 0;
 }
#topics .next-arrow,
#topics .prev-arrow {
   top: -3.75vw;
   width: 2.5vw;
}
#topics .next-arrow {
   left: 13.5vw; 
}
#topics .prev-arrow {
   left: 9.688vw; 
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1800px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1800px) {
/* concept -------------------------------------*/
#concept {
   margin-top: -8.333vw;
   position: relative;
}
#concept::after {
   content: "";
   position: absolute;
   bottom: 12.667vw;
   right: 0;
   width: 56.667vw;
   height: 70.556vw;
   background: url(../images/index/concept-bg-deco.png) no-repeat;
   background-size: contain;
}
#concept .inner-Box {
   width: 95.783vw;
   margin-right: auto;
   background: transparent linear-gradient(180deg, rgba(244, 241, 233, 0.4) 0%, #EBE5D5 100%) 0% 0% no-repeat padding-box;
   padding: 28.833vw 13.222vw 66.944vw 17.778vw;
   position: relative;
}
#concept .inner-Box h2 {
   position: absolute;
   top: 15.056vw;
   right: 10.333vw;
   width: 50.611vw;
}
#concept .inner-Box h2 img {
   width: 100%;
   height: auto;
}
#concept .inner-Box .content-box {
   display: grid;
   grid-template-columns: 55.625% 1fr;
   gap: 6.667vw;
}
#concept .left-box h3 {
   margin-bottom: 2.222vw;
   position: relative;
   width: 33vw;
}
#concept .left-box h3 img {
   width: 100%;
   height: auto;
}
#concept .left-box h3::before {
   content: "";
   position: absolute;
   top: -6.278vw;
   left: -5.167vw;
   width: 8.444vw;
   height: 7vw;
   background: url(../images/index/concept-subt-deco.png) no-repeat;
   background-size: contain;
}
#concept .left-box .lead {
   font-size: clamp(0.75rem, 0.006rem + 1.55vw, 1.75rem);
   line-height: 1.5;
   letter-spacing: 0em;
   font-weight: 700;
   margin: 0 0 3.611vw 1.111vw;
}
#concept .left-box .txt {
   font-size: clamp(0.625rem, 0.346rem + 0.58vw, 1rem);
   line-height: 2.625;
   letter-spacing: 0em;
   font-weight: 700;
   margin: 0 0 2.333vw 2.222vw;
}
#concept .right-box {
   margin: 10.278vw 0 0;
   position: relative;
}
#concept .right-box .en-lead {
   font-size: clamp(0.75rem, 0.471rem + 0.58vw, 1.125rem);
   line-height: 1.4444444444;
   letter-spacing: 0.12em;
   font-weight: 500;
   text-align: right;
   margin-bottom: 1vw;
}
#concept .right-box .en-txt {
   font-size: clamp(0.5rem, 0.221rem + 0.58vw, 0.875rem);
   line-height: 1.4285714286;
   letter-spacing: 0.12em;
   font-weight: 300;
   text-align: right;
}
#concept .btn {
   position: absolute;
   bottom: 3.111vw;
   width: 20vw;
   right: 0;
   z-index: 2;
}
#concept .btn a {
   padding: 0 0 1.167vw 1vw;
}
#concept .bg-slide {
   max-width: 106.667vw;
   z-index: 6;
   position: absolute;
   bottom: 19.722vw;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1540px)
======================================== */
@media screen and (min-width:768px) and (max-width:1540px) {
/* youtube -------------------------------------*/
#youtube {
   margin-top: 12.662vw;
}
#youtube .inner-Box {
   width: 97.403vw;
   margin-inline: auto;
   padding: 0 0 15.065vw;
}
#youtube .top-box {
   display: grid;
   grid-template-columns: 56.66% 1fr;
   gap: 4.87vw;
   border-bottom: 1px solid #A1A1A1;
 }
 #youtube .left-box {
   margin: 0.974vw 0 0;
 }
 #youtube .left-box .inner {
   display: grid;
   grid-template-columns: 58.11% 1fr;
   gap: 2.143vw;
   align-items: center;
 }
 #youtube .left-box .ttl-box {
   display: flex;
   gap: 2.597vw;
 }
 #youtube .left-box .ttl-box .enttl {
   font-size: 5.195vw;
   line-height: 1.2;
   letter-spacing: 0em;
   font-weight: 600;
 }
 #youtube .left-box .ttl-box h2 {
   font-size: 1.558vw;
   line-height: 1.7916666667;
   letter-spacing: 0em;
   font-weight: 700;
   margin: 0.714vw 0 0;
 }
 #youtube .left-box .ttl-box h2 span {
   font-size: 1.169vw;
   line-height: 1.7777777778;
   letter-spacing: 0em;
   font-weight: 700;
   display: block;
 }
 #youtube .left-box .txt {
   font-size: 0.909vw;
   line-height: 1.8571428571;
   letter-spacing: 0.05em;
   font-weight: 500;
   margin: 0.909vw 0 0;
 }
 #youtube .left-box .list {
   display: flex;
   gap: 1.364vw;
   margin: -0.195vw 0 0 1.039vw;
 }
 #youtube .left-box .list li {
   font-size: 0.909vw;
   line-height: 1.8571428571;
   letter-spacing: 0.05em;
   font-weight: 500;
   position: relative;
 }
 #youtube .left-box .list li::before {
   content: "#";
   position: absolute;
   top: 50%;
   left: -0.844vw;
   font-size: 0.909vw;
   transform: translateY(-50%);
   color: #A78F43;
 }
 #youtube .right-box img {
   width: 8.442vw;
 }
 #youtube .next-arrow,
 #youtube .prev-arrow {
   top: -7.078vw;
   width: 2.597vw;
}
#youtube .next-arrow {
   right: 18.182vw;
}
#youtube .prev-arrow {
   right: 22.143vw;
}
#youtube .slider-box {margin: 2.597vw auto 0;position: relative;}
#youtube .btn {
width: 15.584vw;
margin: 2.468vw 0 0;
}
#youtube .btn a {
padding: 0 0 1.299vw;
}
#youtube .system-list li {
width: 18.442vw;
margin: 0 0.649vw;
}
#youtube .system-ttl {font-size: clamp(0.75rem, 0.626rem + 0.26vw, 0.875rem);font-weight: 500;line-height: 1.85714;letter-spacing: 0.05em;}

}

/* ========================================
@media screen and (min-width:768px) and (max-width:1240px)
======================================== */
@media screen and (min-width:768px) and (max-width:1240px) {
/* showroom -------------------------------------*/
 #showroom .inner-Box {
   padding: 15.968vw 0 1.452vw;
   width: 96.774vw;
 }
 #showroom .inner-Box h2 {
   position: absolute;
   top: -15.565vw;
   left: 46.6%;
   transform: translateX(-50%);
   width: 72.581vw;
 }
 #showroom .inner-Box h2 img {
   width: 100%;
   height: auto;
 }
 #showroom .label {
   position: absolute;
   top: -7.339vw;
   right: 0;
   width: 17.742vw;
 }
 #showroom .label img {
   width: 100%;
   height: auto;
 }
 #showroom .list {
   margin: 0 0 0.726vw 0.161vw;
 }
 #showroom .list li {
   font-size: 2.097vw;
   line-height: 1.5769230769;
   letter-spacing: 0em;
   font-weight: 500;
   color: #FFFFFF;
   border-bottom: 1px solid #FFFFFF;
   position: relative;
   display: inline-block;
   padding: 0 0 0.565vw 2.742vw;
   margin: 0 0 1.532vw;
 }
 #showroom .list li::before {
   content: "✓";
   position: absolute;
   top: 47%;
   left: 0px;
   font-size: 2.097vw;
   transform: translateY(-50%);
   color: #FABE00;
 }
 #showroom .entxt {
   font-size: 11.613vw;
   line-height: 0.9722222222;
   letter-spacing: 0em;
   font-weight: 600;
   color: #FFFFFF;
   margin-bottom: 2.661vw;
   opacity: 0.5;
 }
 #showroom .txt01 {
   font-size: 1.935vw;
   line-height: 1.8333333333;
   letter-spacing: 0em;
   font-weight: 700;
   color: #FFFFFF;
   margin-bottom: 0.806vw;
 }
 #showroom .txt02 {
   font-size: 2.419vw;
   line-height: 1.4666666667;
   letter-spacing: 0em;
   font-weight: 700;
   color: #FFFFFF;
 }
 #showroom .btn {
   width: 70.968vw;
   margin-inline: auto;
   background: #A78F43;
   position: relative;
   top: 4.677vw;
   border: none;
 }
 #showroom .btn a {
   color: #fff;
   padding: 2.258vw 0;
 }
 #showroom .btn::after {
   color: #fff;
   right: 4.839vw;
 }
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1400px)
======================================== */
@media screen and (min-width:768px) and (max-width:1400px) {
/* about -------------------------------------*/ 
 #about .inner-Box {
   width: 97.143vw;
   margin-inline: auto;
   padding: 11.071vw 0 10vw;
 }
 #about .ttl-box {
   margin-bottom: 4.071vw;
 }
 #about .left-box {
   margin: 1.571vw 0 0;
 }
 #about .left-box .enlead {
   font-size: 1.429vw;
   line-height: 1.2;
   letter-spacing: 0.05em;
   font-weight: 400;
   margin-bottom: 0.857vw;
   color: #A1A1A1;
 }
 #about .left-box .entxt {
   font-size: 1vw;
   line-height: 1.2142857143;
   letter-spacing: 0.05em;
   font-weight: 400;
   color: #A1A1A1;
 }
 #about h2 {
   font-size: 7.143vw;
   line-height: 1.2;
   letter-spacing: 0em;
   font-weight: 600;
   margin: 0 2.929vw 0 0;
   text-align: right;
 }
 #about h2 span {
   font-size: 1.714vw;
   line-height: 1.7916666667;
   letter-spacing: 0em;
   font-weight: 700;
   display: block;
 }
 #about .list {
   gap: 5.714vw;
 }
 #about .list li .num {
   width: 5.714vw;
   height: 5.714vw;
   border-radius: 2.857vw;
   text-align: center;
   padding-top: 1.357vw;
   display: block;
   position: absolute;
   top: -4.071vw;
   left: 0px;
   border: 1px solid #707070;
   font-size: 1.714vw;
   font-weight: 500;
   letter-spacing: 0;
   z-index: 2;
 }
 #about .list li h3 {
   position: absolute;
   top: -1.714vw;
   right: -1.429vw;
   width: 7.571vw;
   z-index: 2;
 }
 #about .list li h3 img {
   width: 100%;
   height: auto;
 }
 #about .list li .photo {
   margin-bottom: 1.5vw;
 }
 #about .list li .photo img {
   width: 100%;
 }
 #about .list li .txt {
   font-size: clamp(0.75rem, 0.598rem + 0.32vw, 0.875rem);
   line-height: 1.8571428571;
   letter-spacing: 0.05em;
   font-weight: 500;
   margin-bottom: 2.571vw;
 }
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1240px)
======================================== */
@media screen and (min-width:768px) and (max-width:1240px) {
   #area h2 img {
      width: 46.855vw;
   }
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1320px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1320px) {
/* link-box -------------------------------------*/
#link-box {
   position: relative;
   margin-top: 9.015vw;
}
#link-box::after {
   content: "";
   position: absolute;
   bottom: -2.803vw;
   left: 0;
   width: 51.515vw;
   height: 58.712vw;
   background: url(../images/index/linkBox-bg-deco.png) no-repeat;
   background-size: contain;
   z-index: 1;
}
#link-box .bg {
   position: absolute;
   top: -1.591vw;
   left: 50%;
   transform: translateX(-50%);
   width: 91.6666%;
   height: 100%;
   background-color: #EBE5D5;
   clip-path: polygon(0 0, 100% 31.6%, 100% 100%, 0% 100%);
}
#link-box .inner-Box {
   width: 96.97vw;
   margin-inline: auto;
   position: relative;
   z-index: 2;
   padding: 0 0 13.485vw;
}
#link-box .item {display: grid;gap: 4.318vw;}
#link-box .item li {
   width: 69.697vw;
}
#link-box .item li:first-child {
   margin-right: auto;
}
#link-box .item li:last-child {
   margin-left: auto;
}
#link-box .item li .banner {
   margin-bottom: 1.288vw;
   width: 69.697vw;
}
#link-box .item li .banner img {
   width: 100%;
   height: auto;
}
#link-box .item li .txt {
   font-weight: 500;
   font-size: clamp(0.75rem, 0.576rem + 0.36vw, 0.875rem);
   letter-spacing: 0.05em;
   line-height: 1.8571428;
   text-align: left;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1580px)
======================================== */
@media screen and (min-width:768px) and (max-width:1580px) {
/* staff -------------------------------------*/
#staff .inner-Box {
   width: 97.468vw;
   margin-inline: auto;
   overflow: hidden;
   position: relative;
   padding-top: 34.9%;
   padding-bottom: 7.468vw;
}
#staff .content-box {
   width: min(95%, 1440px);
   margin-inline: auto;
   background: #FFFFFF;
   padding: 4.557vw 5.063vw 34.089vw;
   position: relative;
   overflow: visible;
   margin-bottom: 5.38vw;
}
#staff .content-box .top-box h2 {
   font-weight: bold;
   font-size: clamp(1.125rem, 1.007rem + 0.25vw, 1.25rem);
   line-height: 2.15;
   letter-spacing: 0;
   margin-bottom: 0.886vw;
}
#staff .content-box .top-box .txt {
   font-weight: 500;
   font-size: clamp(0.625rem, 0.389rem + 0.49vw, 0.875rem);
   letter-spacing: 0.05em;
   line-height: 1.8571428;
}
#staff .btn {
   width: 15.19vw;
   margin: 3.671vw 0 0;
}
#staff .btn a {
   padding: 0 0 1.266vw;
}

#staff .system-list li{
   width: 16.456vw;
   margin: 0 1.899vw;
}
#staff .system-pic {
   height: 16.456vw;
}
#staff .system-ttl{
   font-weight: bold;
   font-size: clamp(0.75rem, 0.514rem + 0.49vw, 1rem);
   letter-spacing: 0.05em;
   line-height: 1.625;
   text-align: center;
   margin-bottom: 0.2rem;
}
#staff .system-en{
   font-weight: normal;
   font-size: clamp(0.5rem, 0.382rem + 0.25vw, 0.625rem);
   letter-spacing: 0.05em;
   line-height: 2.3;
   text-align: center;
   color: #a1a1a1;
}
#staff .system-job{
   font-weight: 500;
   font-size: clamp(0.625rem, 0.389rem + 0.49vw, 0.875rem);
   letter-spacing: 0.05em;
   line-height: 1.85714;
   text-align: center;
   color: #a78f43;
}


#staff .next-arrow,
#staff .prev-arrow {
  position: absolute;
  top: -27%;
  width: 2.532vw;
  height: auto;
  z-index: 15;
   cursor: pointer;
}

#staff .bottom-box {
   display: flex;
   justify-content: space-between;
   width: min(95%, 1440px);
   margin-inline: auto;
   align-items: flex-end;
}
#staff .bottom-box .en {
   font-weight: 500;
   font-size: clamp(0.75rem, 0.514rem + 0.49vw, 1rem);
   line-height: 1.1875;
   letter-spacing: 0;
   margin-bottom: 1.266vw;
}
#staff .bottom-box .ttl {
   font-weight: bold;
   font-size: clamp(1.25rem, 1.014rem + 0.49vw, 1.5rem);
   line-height: 1.66666;
   letter-spacing: 0;
}
#staff .bottom-box .btn-box {
   display: flex;
   gap: 3.734vw;
   margin: 0 0 0.19vw;
   align-items: flex-end;
}
#staff .bottom-box .btn {
   width: 21.519vw;
   font-weight: 500;
   font-size: 1.266vw;
   line-height: 2.15;
   letter-spacing: 0;
}
#staff .bottom-box .btn a {
   padding: 0 0 0.759vw 1.139vw;
}
#staff .bottom-box .btn span {
   font-weight: 500;
   font-size: clamp(0.5rem, 0.264rem + 0.49vw, 0.75rem);
   line-height: 1.1666;
   display: block;
   margin-bottom: 0;
}
#staff .bottom-box .btn::after {
   right: 1.329vw;
   top: 64%;
}
#staff .bottom-box .sns-list {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 1.266vw;
}
#staff .bottom-box .sns-list img {
   width: 5.063vw;
}

}

@media screen and (min-width:1921px)  {
   #concept .bg-slide .loop .loop__box img {
      width: 187.402vw;
      max-width: 3600px;
      height: 680px;
      object-fit: cover;
   }
}

/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
#top-header .sp-header {
   padding:  0;
}
   
.btn {
   font-size:4.831vw;
   line-height: 1.2;
   letter-spacing: 0em;
   font-weight: 400;
   border-bottom: 0.242vw solid #1A1A1A;
   width: 77.295vw;
   margin-inline: auto;
   padding: 0 0 5vw 5vw;
   position: relative;
}
.btn a {
   display: block;
   text-decoration: none;
   position: relative;
}
.btn::after {
   content: ">";
   position: absolute;
   top: 50%;
   right: 8vw;
   transform: translateY(-50%);
   font-size:4.831vw;
}


.mv .mv-inner {
   position: relative;
   padding: 0 0 19vw;
}
.mv .mv-left {
}
.mv .mv-enttl {
   position: absolute;
   top: -17vw;
   z-index: 2;
   width: 68.525vw;
   left: 5vw;
}
.mv .mv-enttl img {
   width: 100%;
   height: auto;
}
.mv .mv-deco {
   position: absolute;
   bottom: 5vw;
   left: 0vw;
   z-index: 2;
   width: 65.96vw;
}
.mv .mv-deco img {
   width: 100%;
   height: auto;
}
.mv .mv-deco::after {
   width: 120.48vw;
   height: 120.48vw;
   background: #fff;
   content: "";
   position: absolute;
   bottom: -109vw;
   left: -28vw;
   border-radius: 50%;
   z-index: 1;
}



#bx-sra {}

.full-screen{position: relative;margin: 25vw 0 0 auto;width: 93.48vw;}
.full-screen .sliderArea { max-width: 100%; margin: 0 auto; padding: 0 25px;}
.full-screen .slick-slide {  }
.full-screen .slick-slide img {  width: 100%;  height: auto;}
.full-screen .next-arrow {z-index: 1;position: absolute;top: 50vw;right: 0;}
.full-screen .prev-arrow { z-index: 1;position: absolute;top: 50vw;left: 0; }
.full-screen .slick-slide {transition: all ease-in-out .3s;opacity: .2;}
.full-screen .slick-active { opacity: 1;}
.full-screen .slick-current { opacity: 1;}
.full-screen .thumb { margin: 3vw 0 0; }
.full-screen .thumb .slick-slide { cursor: pointer;}
.full-screen .thumb .slick-slide:hover { opacity: .7;}

.full-screen .slick-list { overflow: hidden; }

.slide-dots {
   margin: 0;
   padding: 0;
   text-align: center;
   position: absolute;
   bottom: 0;
   right: 3vw;
   z-index: 5;
 }
 .slide-dots li {
   display: inline-block;
   margin: 0 4vw;
 }
 .slide-dots li button {
   position: relative;
   text-indent: -9999px;
 }
 .slide-dots li button::before {
   background-image: url(../images/index/slide-dots.svg);
   background-repeat: no-repeat;
   background-size: contain;
   content: "";
   cursor: pointer;
   height: 2.416vw;
   left: 0;
   margin: auto;
   position: absolute;
   right: 0;
   top: 12.5vw;
   width: 2.416vw;
 }
 .slide-dots li.slick-active button::before {
   background-image: url(../images/index/slide-dots-active.svg);
 }
/* 外枠の設定 */
.slide-dots li.slick-active button::after {
   content: "";
   position: absolute;
   top: 10vw;
   left: -2.5vw;
   width: 7.2vw; 
   height: 7.2vw;
   border-radius: 50%;
   box-sizing: border-box;
   border: 1px solid transparent;
   border-top-color: #1A1A1A;
   animation: draw-circle-clockwise 3s linear forwards;
   transform: rotate(0deg); /* 12時から開始 */
   transform-origin: center;
}

/* アニメーション */
@keyframes draw-circle-clockwise {
   0% {
       border-color: transparent;
   }
   10% {
       border-top-color: #1A1A1A;
   }
   25% {
       border-top-color: #1A1A1A;
       border-right-color: #1A1A1A;
   }
   50% {
       border-top-color: #1A1A1A;
       border-right-color: #1A1A1A;
       border-bottom-color: #1A1A1A;
   }
   75% {
       border-top-color: #1A1A1A;
       border-right-color: #1A1A1A;
       border-bottom-color: #1A1A1A;
       border-left-color: #1A1A1A;
   }
   100% {
       border-color: #1A1A1A;
   }
}


 button {
   background: none;
   border: none;
   outline: none;
   padding: 10px 0;
 }


/* topics -------------------------------------*/
#topics {
   position: relative;
   z-index: 3;
}
#topics .inner-Box{
   width: 89.375vw;
   margin-inline: auto;
}
#topics h2 {
   font-weight: 500;
   font-size:5.797vw;
   line-height: 1.208333;
   text-align: left;
   letter-spacing: 0;
   margin: 0 0 5vw;
}
#topics .system-list {
   display: grid;
   grid-template-columns: 1fr;
   gap: 5vw;
}
#topics .system-list li {
   position: relative;
 }
 #topics .system-list .system-pic {
   height: 43.48vw;
   margin: 0;
 }
 #topics .system-list .system-pic img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

/* concept -------------------------------------*/
#concept {
   margin-top: -21vw;
   position: relative;
   background: transparent linear-gradient(180deg, #F4F1E966 0%, #EBE5D5 100%) 0% 0% no-repeat padding-box;
   padding: 0 0 24vw;
}
#concept::after {
   content: "";
   position: absolute;
   bottom: -15vw;
   right: 0;
   width: 94.687vw;
   height: 175.365vw;
   background: url(../images/index/concept-bg-deco_sp.png) no-repeat;
   background-size: contain;
}
#concept .inner-Box {
   width: 89.375vw;
   margin-inline: auto;
   position: relative;
   padding: 72.4vw 0 0;
   z-index: 2;
}
#concept .inner-Box h2 {
   position: absolute;
   top: 42.2vw;
   right: 0.8vw;
   width: 75.365vw;
}
#concept .inner-Box h2 img {
   width: 100%;
   height: auto;
}
#concept .inner-Box .content-box {
   display: grid;
}
#concept .left-box {
   display: contents;
}
#concept .left-box h3 {
   position: relative;
   margin: 0 0 5.8vw;
   order: 1;
}
#concept .left-box .lead {
   font-size:4.348vw;
   line-height: 1.9;
   letter-spacing: 0em;
   font-weight: 700;
   order: 2;
   margin: 0 0 0 1vw;
}
#concept .left-box .txt {
   font-size:3.865vw;
   line-height: 2.5;
   letter-spacing: 0em;
   font-weight: 700;
   order: 5;
   margin: 0 1vw 10vw;
}
#concept .right-box {
   display: contents;
}
#concept .right-box .en-lead {
   font-size:2.898vw;
   line-height: 1.41666666;
   letter-spacing: 0.12em;
   font-weight: 500;
   text-align: right;
   margin: -1.2vw -0.4vw 2.6vw 0;
   order: 3;
}
#concept .right-box .en-txt {
   font-size: 1.932vw;
   line-height: 1.5;
   letter-spacing: 0.12em;
   font-weight: 300;
   text-align: right;
   order: 4;
   margin: 0 0 7.4vw;
}
#concept .btn {
   order: 6;
   margin: 95vw auto 0;
   padding: 0 0 5vw 5vw;
}
#concept .btn::after {
   right: 7.8vw;
   top: 3.2vw;
}
#concept .bg-slide {
   max-width: 100vw;
   z-index: 6;
   position: absolute;
   bottom: 46vw;
}
 #concept .bg-slide .loop {
   padding-top: 3vw;
   padding-bottom: 3vw;
   overflow: hidden;
 }
 #concept .bg-slide .loop .loop__box {
   display: flex;
   width: 100vw;
 }
 #concept .bg-slide .loop .loop__box img {
   min-width: 394.5vw;
 }
 #concept .bg-slide .loop .loop__box img:first-child {
   -webkit-animation: loop 50s -25s linear infinite;
   animation: loop 50s -25s linear infinite;
 }
 #concept .bg-slide .loop .loop__box img:last-child {
   -webkit-animation: loop2 50s linear infinite;
   animation: loop2 50s linear infinite;
 }


/* event -------------------------------------*/
#event {
   background: #FFFFFF;
}
#event .inner-Box{
   width: 86.96vw;
   margin-inline: auto;
   position: relative;
   z-index: 5;
   display: grid;
   padding: 19vw 0 19vw;
}
#event .top-box{
   display: contents;
}
#event .ttl-box {
   display: contents;
}
#event h2 {
   font-weight: bold;
   font-size:3.865vw;
   line-height: 1.6875;
   letter-spacing: 0;
   order: 1;
}
#event .enttl {
   font-weight: 600;
   font-size:12.077vw;
   line-height: 1.2;
   letter-spacing: 0;
   margin-bottom: 3vw;
   order: 2;
}
#event .btn {
   order: 4;
   margin: 12vw auto 0;
}
#event .btn::after {
   right: 7.6vw;
   top: 3.2vw;
}
#event .system-list {
   display: grid;
   grid-template-columns: 1fr;
   gap: 5.2vw;
   order: 3;
}
#event .system-list li {
   position: relative;
}
#event .system-list li a:hover{ text-decoration: none; }
#event .system-pic{width: 100%;height: 60.87vw;overflow: hidden;text-align: center;margin-bottom: 4.6vw;}
#event .system-pic img{width: auto;height: 100%;}
#event .system-list li .system-date{
   display: grid;
   gap: 0 2.2vw;
   margin-bottom: 2vw;
   grid-template-columns: 19% 1fr;
}
#event .system-list li .system-date .date-ttl{
   width: 16.426vw;
   height: 4.834vw;
   background: #666464;
   font-weight: 500;
   font-size:2.898vw;
   letter-spacing: 0.05em;
   line-height: 1.8333;
   text-align: center;
   color: #fff;
}
#event .system-list li .system-date .start_text{
   font-weight: 500;
   font-size:3.382vw;
   letter-spacing: 0.05em;
   line-height: 1.571428;
}
#event .system-ttl-01{
   font-weight: bold;
   font-size:3.865vw;
   letter-spacing: 0.05em;
   line-height: 1.75;
   border-bottom: 0.242vw solid #1A1A1A;
   padding: 0 0 2.8vw;
   margin-bottom: 4.6vw;
}
#event .icon{width: 14.495vw;height: 14.495vw;border-radius: 50%;text-align: center;padding-top: 5vw;display: block;color: #fff;position: absolute;top: -3.2vw;right: 4.8vw;font-size: 2.898vw;z-index: 2;}
#event .icon01 {
   background: #FABE00;
   color: #1A1A1A;
}
#event .icon02 {
   background: #263868;
}
#event .icon03 {
   background: #1A1A1A;
}

/* youtube -------------------------------------*/
#youtube {
   margin-top: 4vw;
}
#youtube .inner-Box {
   width: 89.375vw;
   margin-inline: auto;
   padding: 10.2vw 0 44vw;
   display: grid;
   position: relative;
}
#youtube .top-box {
   display: contents;
}
 #youtube .left-box {
   display: contents;
}
 #youtube .left-box .inner {
   margin: 0 0 3.2vw;
   order: 1;
}
 #youtube .left-box .ttl-box {
   display: flex;
   gap: 5vw;
   align-items: center;
   border-bottom: 0.242vw solid #1A1A1A;
   padding: 0 0 3vw;
   margin: 0 0 4vw;
 }
 #youtube .left-box .ttl-box .enttl {
   font-size:12.077vw;
   line-height: 1.2;
   letter-spacing: 0em;
   font-weight: 600;
 }
 #youtube .left-box .ttl-box h2 {
   font-size:3.865vw;
   line-height: 1.6875;
   letter-spacing: 0em;
   font-weight: 700;
   margin: 2vw 0 0;
 }
 #youtube .left-box .ttl-box h2 span {
   font-size:3.382vw;
   letter-spacing: 0em;
   font-weight: 700;
   display: block;
 }
 #youtube .left-box .txt {
   font-size:3.382vw;
   line-height: 1.8571428571;
   letter-spacing: 0.05em;
   font-weight: 500;
   text-align: center;
 }
 #youtube .left-box .list {
   display: flex;
   gap: 0.4vw 5vw;
   flex-wrap: wrap;
   width: 58.4vw;
   justify-content: center;
   margin: 0 0 6.4vw 17vw;
   order: 2;
 }
 #youtube .left-box .list li {
   font-size:3.382vw;
   line-height: 1.8571428571;
   letter-spacing: 0.05em;
   font-weight: 500;
   position: relative;
 }
 #youtube .left-box .list li::before {
   content: "#";
   position: absolute;
   top: 50%;
   left: -3vw;
   font-size:3.382vw;
   transform: translateY(-50%);
   color: #A78F43;
 }
 #youtube .right-box {
   display: contents;
 }
 #youtube .right-box .img {
   position: absolute;
   top: 10.4vw;
   right: -2vw;
   width: 21vw;
 }
 #youtube .right-box .img img {
   width: 100%;
   height: auto;
 }
 #youtube .btn {
   order: 4;
}
#youtube .btn::after {

top: 3vw;
}
 #youtube .slider-wrap {
   order: 3;
 }
 #youtube .system-list {
   gap: 0.8vw 2.415vw;
   margin-bottom: 3.4vw;
}
 #youtube .system-ttl {
   font-size:3.382vw;
   font-weight: 500;
   line-height: 1.85714;
   letter-spacing: 0.05em;
 }
 #youtube .system-list li img {
   height: 24.156vw;
 }
 #youtube .system-pic {
   margin-bottom: 2.5vw;
 }

/* showroom -------------------------------------*/
#showroom {
   background: url(../images/index/showroom-bg_sp.jpg) no-repeat center top / cover;
 }
 #showroom .inner-Box {
 position: relative;
 padding: 17vw 0 3vw;
 }
 #showroom .inner-Box h2 {
   position: absolute;
   top: -29vw;
   left: 2vw;
   width: 95.9vw;
 }
 #showroom .inner-Box h2 img {
   width: 100%;
   height: auto;
 }
 #showroom .list {
 width: 66.6vw;
 margin-inline: auto;
 display: grid;
 gap: 4.5vw;
 margin-bottom: 10vw;
 }
 #showroom .list li {
   font-size:3.623vw;
   line-height: 1.6;
   letter-spacing: 0em;
   font-weight: 500;
   color: #FFFFFF;
   border-bottom: 0.242vw solid #FFFFFF;
   position: relative;
   display: inline-block;
   text-align: left;
   padding: 0 0 1.6vw 5vw;
 }
 #showroom .list li::before {
   content: "✓";
   position: absolute;
   top: 0;
   left: 0;
   font-size:3.623vw;
   color: #FABE00;
 }
 #showroom .entxt {
   font-size:11.594vw;
   line-height: 0.9375;
   letter-spacing: 0em;
   font-weight: 600;
   color: #FFFFFF;
   margin-bottom: 7vw;
   opacity: 0.5;
   text-align: center;
 }
 #showroom .txt01 {
   font-size:3.382vw;
   line-height: 1.7142857;
   letter-spacing: 0em;
   font-weight: 700;
   color: #FFFFFF;
   margin-bottom: 3vw;
   text-align: center;
 }
 #showroom .txt02 {
   font-size:4.348vw;
   line-height: 1.277777;
   letter-spacing: 0em;
   font-weight: 700;
   color: #FFFFFF;
   text-align: center;
 }
 #showroom .btn {
   margin-inline: auto;
   background: #A78F43;
   padding: 5.22vw 0;
   position: relative;
   top: 10vw;
   border: none;
   width: 82.126vw;
   font-size: 3.382vw;
   text-align: center;
 }
 #showroom .btn a {
   color: #fff;
 }
 #showroom .btn::after {
   color: #fff;
   font-size: 3.382vw;
   right: 5vw;
 }

/* about -------------------------------------*/ 
#about {
   background: #E9E9E9;
 }
 #about .inner-Box {
   width: 89.375vw;
   margin-inline: auto;
   padding: 26vw 0 15vw;
 }
 #about .ttl-box {
   display: grid;
   gap: 2vw;
   margin-bottom: 15.5vw;
}
 #about .left-box {
   order: 2;
}
 #about .left-box .enlead {
   font-size:2.898vw;
   line-height: 1.16666;
   letter-spacing: 0.05em;
   font-weight: 400;
   margin-bottom: 2vw;
   color: #A1A1A1;
 }
 #about .left-box .entxt {
   font-size: 1.932vw;
   line-height: 1.25;
   letter-spacing: 0.05em;
   font-weight: 400;
   color: #A1A1A1;
 }
 #about h2 {
   font-size:12.077vw;
   line-height: 1.2;
   letter-spacing: 0em;
   font-weight: 600;
   order: 1;
 }
 #about h2 span {
   font-size:3.865vw;
   line-height: 1.6875;
   letter-spacing: 0em;
   font-weight: 700;
   display: block;
 }
 #about .list {
   display: grid;
   grid-template-columns: 1fr;
   gap: 14.8vw;
 }
 #about .list li {
   position: relative;
 }
 #about .list li .num {
   width: 14.495vw;
   height: 14.495vw;
   border-radius: 50%;
   text-align: center;
   padding-top: 4vw;
   display: block;
   position: absolute;
   top: -10vw;
   left: 0;
   border: 0.242vw solid #707070;
   font-size:3.865vw;
   font-weight: 500;
   letter-spacing: 0;
   z-index: 2;
 }
 #about .list li h3 {
   position: absolute;
   top: -5vw;
   right: -2.4vw;
   z-index: 2;
 }
 #about .list li .photo {
   margin-bottom: 4vw;
 }
 #about .list li .txt {
   font-size:3.382vw;
   line-height: 1.8571428571;
   letter-spacing: 0.05em;
   font-weight: 500;
   margin-bottom: 3.4vw;
 }
 #about .list li .btn {
   width: 24vw;
   font-size:2.898vw;
   line-height: 1.1666666667;
   letter-spacing: 0em;
   font-weight: 400;
   padding: 0 0 2.4vw;
   margin: 0;
 }
 #about .btn::after {
   font-size:2.898vw;
   right: 0;
   top: 1.2vw;
 }

/* area -------------------------------------*/
#area .inner-Box {
   padding: 15.8vw 0 0;
}
#area h2 {
   text-align: center;
   margin-bottom: 3.4vw;
}
#area .banner {
   width: 92.756vw;
   margin: 0 0 0 2vw;
}

/* portfolio -------------------------------------*/
#portfolio {
   margin-top: 21.8vw;
}
#portfolio .inner-Box{ 
   width: 89.375vw;
   margin-inline: auto;
}
#portfolio h2 {
   font-weight: bold;
   font-size:3.865vw;
   letter-spacing: 0;
   text-align: center;
}
#portfolio .enttl {
   font-weight: 600;
   font-size:12.077vw;
   line-height: 1.2;
   letter-spacing: 0;
   margin-bottom: 7vw;
   text-align: center;
}
#portfolio .system-list{
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 5vw 2.4vw;
   margin-bottom: 14vw;
}
#portfolio .system-list li{ 

}
#portfolio .system-list li a:hover{ text-decoration: none; }
#portfolio .btn{ 
   width: 82.126vw;
   margin-inline: auto;
   background: #1A1A1A;
   padding: 5.22vw 0;
   border: none;
   text-align: center;
   font-size: 3.382vw;
}
#portfolio .btn a {
   color: #fff;
   font-size: 3.382vw;
}
#portfolio .btn::after {
   color: #fff;
   font-size: 3.382vw;
   right: 5vw;
}
#portfolio .system-pic{width: 100%;height: 30.435vw;overflow: hidden;text-align: center;margin-bottom: 2vw;}
#portfolio .system-pic img{width: 100%;height: 100%;object-fit: cover;}
#portfolio .system-area{
   font-weight: 500;
   font-size:2.898vw;
   letter-spacing: 0.05em;
   line-height: 1.833333;
   text-align: left;
   color: #a1a1a1;
   margin-bottom: 0vw;
}
#portfolio .system-ttl-01{
   font-weight: bold;
   font-size:3.382vw;
   letter-spacing: 0.05em;
   line-height: 1.7142857;
   color: #1a1a1a;
}

/* link-box -------------------------------------*/
#link-box {
   position: relative;
   margin-top: 19vw;
   overflow: hidden;
}
#link-box::after {
   content: "";
   position: absolute;
   bottom: -10vw;
   left: 0;
   width: 94.687vw;
   height: 136.717vw;
   background: url(../images/index/linkBox-bg-deco_sp.png) no-repeat;
   background-size: contain;
   z-index: 1;
}
#link-box .bg {
   position: absolute;
   top: 9.4vw;
   left: 50%;
   transform: translateX(-50%);
   width: 94.3vw;
   height: 100%;
   background-color: #EBE5D5;
   clip-path: polygon(0 0, 100% 9.6%, 100% 100%, 0% 100%);
}
#link-box .inner-Box {
   width: 86.96vw;
   margin-inline: auto;
   position: relative;
   z-index: 2;
   padding: 0 0 23.4vw;
}
#link-box .item {display: grid;gap: 9.4vw;}
#link-box .item li {

}
#link-box .item li .banner {
   margin-bottom: 3vw;
}
#link-box .item li .txt {
   font-weight: 500;
   font-size:3.382vw;
   letter-spacing: 0.05em;
   line-height: 1.8571428;
   text-align: left;
}

/* voice -------------------------------------*/
#voice {padding: 0 0 23.8vw;margin: 9.4vw auto 0;width: 89.375vw;position: relative;display: grid;z-index: 2;}
#voice .inner-Box{
   display: contents;
}
#voice .top-box {
   display: contents;
}
#voice h2 {
   font-weight: bold;
   font-size:3.865vw;
   line-height: 1.6875;
   letter-spacing: 0;
   margin: 0 0 9vw 40vw;
   order: 1;
}
#voice .enttl {
   position: absolute;
   top: -12.8vw;
   left: 1vw;
   z-index: 2;
   width: 35.269vw;
}
#voice .enttl img {
   width: 100%;
   height: auto;
}
#voice .btn {
   order: 3;
   margin-top: 13.2vw;
}
#voice .btn::after {
   top: 3vw;
   right: 7.6vw;
}
#voice .system-list{
   order: 2;
   gap: 7vw 2.415vw;
}
#voice .system-list li{ 
   position: relative;
}
#voice .system-list li a:hover{ text-decoration: none; }
#voice .system-list li .label {
   position: absolute;
   top: -1.8vw;
   right: 1vw;
   z-index: 2;
   width: 7.25vw;
   color: #fff;
   font-size: 1.932vw;
   font-weight: 600;
   line-height: 1.25;
   letter-spacing: 0;
   text-align: center;
   padding: 2.45vw 0;
}
#voice .system-list li .label .tit {
   display: inline-block;
   border-bottom: 0.2vw solid #FFFFFF;
   margin-bottom: 0.5vw;
   padding: 0 0 0.4vw;
}
#voice .bg-red {
   background-color: #9F434A;
 }
 #voice .bg-green {
   background-color: #5E8958;
 }
 #voice .bg-gold {
   background-color: #A78F43;
 }
 #voice .bg-blue {
   background-color: #436788;
 }
#voice .pic-frame {
   position: relative;
}
#voice .system-pic{width: 100%;height: 12.5rem;overflow: hidden;text-align: center;margin-bottom: 1.8vw;}
#voice .system-pic img{width: 100%;height: 100%;object-fit: cover;}
#voice .system-area{
   font-weight: 500;
   font-size:2.898vw;
   letter-spacing: 0.05em;
   line-height: 2.16666;
   text-align: center;
   color: #a78f43;
   background: #F8F8F8;
   position: absolute;
   bottom: 0;
   left: 0;
   padding: 0 3.65vw;
}
#voice .system-ttl-01{font-size: 3.382vw;margin-bottom: 1vw;line-height: 1.7142857;font-weight: 700;letter-spacing: 0.05em;}
#voice .slick-list {
   overflow: visible;
}

/* staff -------------------------------------*/
#staff {
   background: url(../images/index/staff-photo_sp.jpg) top center / contain no-repeat, #EBE5D5;
   position: relative;
   background-size: contain;
   max-height: 336.8vw;
}
#staff .bg {
   background: transparent linear-gradient(180deg, #EBE5D5 0%, #F6F5F1 100%) 0% 0% no-repeat padding-box;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 49.1725%;
}
#staff .inner-Box {
   width: 94.205vw;
   margin-inline: auto;
   /* overflow: hidden; */
   position: relative;
   padding: 49vw 0 0;
}
#staff .content-box {
   background: #FFFFFF;
   padding: 9.4vw 4vw 14vw;
   position: relative;
   overflow: visible;
   margin-bottom: 2vw;
}
#staff .content-box .top-box {
   display: contents;
}
#staff .content-box .top-box h2 {
   font-weight: bold;
   font-size:4.348vw;
   line-height: 1.5;
   letter-spacing: 0;
   margin-bottom: 2.6vw;
   text-align: center;
}
#staff .content-box .top-box .txt {
   font-weight: 500;
   font-size:3.382vw;
   letter-spacing: 0.05em;
   line-height: 1.8571428;
   text-align: center;
}
#staff .btn {
margin-top: 102vw;
}
#staff .btn::after {
   
top: 3vw;
   
right: 7.6vw;
}
#staff .system-list{
position: relative;
top: -122vw;
}
#staff .system-list li{
width: 48.31vw;
margin: 0 2.835vw;
}
#staff .system-list li a:hover{ text-decoration: none; }

#staff .system-pic{width: 48.31vw;height: 48.31vw;margin-bottom: 1.2rem;overflow: hidden;text-align: center;display: block;border-radius: 50%;}
#staff .system-pic img{ width: 100%; height: 100%; object-fit: cover; }
#staff .system-ttl{
   font-weight: bold;
   font-size:3.865vw;
   letter-spacing: 0.05em;
   line-height: 1.625;
   text-align: center;
   margin-bottom: 0.4rem;
}
#staff .system-en{
   font-weight: normal;
   font-size:2.415vw;
   letter-spacing: 0.05em;
   line-height: 2.1;
   text-align: center;
   color: #a1a1a1;
}
#staff .system-job{
   font-weight: 500;
   font-size:3.382vw;
   letter-spacing: 0.05em;
   line-height: 1.85714;
   text-align: center;
   color: #a78f43;
}


#staff .next-arrow,
#staff .prev-arrow {
  position: absolute;
  bottom: -15.8vw;
  width: 9.665vw;
  height: auto;
  z-index: 15;
}
#staff .next-arrow {
  right: 36.8%;
}
#staff .prev-arrow {
  left: 36.8%;
}
#staff .slider-wrap {position: relative;}
#staff .slider-box {margin: 4vw auto 0;position: relative;}
#staff .slick-list {
   overflow: visible !important;
}

#staff .bottom-box {
   display: grid;
   position: relative;
   top: -54.6vw;
   gap: 9vw;
   width: 82.126vw;
   margin-inline: auto;
}
#staff .bottom-box .en {
   font-weight: 500;
   font-size:3.865vw;
   line-height: 1.1875;
   letter-spacing: 0;
   margin-bottom: 4vw;
   text-align: center;
}
#staff .bottom-box .ttl {
   font-weight: bold;
   font-size:5.797vw;
   line-height: 1.66666;
   letter-spacing: 0;
   text-align: center;
}
#staff .bottom-box .btn-box {
   display: grid;
   gap: 9.6vw;
}
#staff .bottom-box .btn {
   font-weight: 500;
   font-size:4.831vw;
   line-height: 2.15;
   letter-spacing: 0;
   margin: 0;
   padding: 0 0 3vw 4.6vw;
   width: 100%;
}
#staff .bottom-box .btn span {
   font-weight: 500;
   font-size:2.898vw;
   line-height: 1.1666;
   display: block;
   margin-bottom: 0;
}
#staff .bottom-box .btn::after {font-size: 4.831vw;right: 5vw;top: 9vw;}
#staff .bottom-box .sns-list {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 3.8vw;
   width: 69.568vw;
   margin-inline: auto;
}

#end-contact {}

}