@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 {  
/* mv
-------------------------------------*/
#mv {
   width: 100%;
   height: 100%;
   padding-top: 15px;
}
#mv .main-ttl {
   text-align: center;
   margin-bottom: 24px;
   width: min(95%, 808px);
   margin-inline: auto;
}
#mv .main-ttl img {
   width: 100%;
   height: auto;
}
#mv .subt {
   text-align: center;
   font-size: 24px;
   letter-spacing: 0.15em;
   margin-bottom: 80px;
}
#mv .sliderArea {
   position: relative;
   width: 100%;
   height: 41.667vw;
   z-index: 20;
   max-width: 1920px;
   max-height: 800px;
   margin-inline: auto;
}
#mv .imgArea {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
   z-index: 10;
}
#mv .imgArea li {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center center;
   opacity: 0;
   animation: main 24s linear 0s infinite;
}

@keyframes main {
   0% {
      transform: scale(1);
      opacity: 0;
   }
   4% {
      opacity: 1;
   }
   33% {
      transform: scale(1.1);
      opacity: 1;
   }
   37% {
      opacity: 0;
   }
   100% {
      transform: scale(1.1);
      opacity: 0;
   }
}

#mv .imgArea li:nth-child(1) {
   background-image: url(../images/index/main-bg01.jpg);
   animation-delay: 0s;
}
#mv .imgArea li:nth-child(2) {
   background-image: url(../images/index/main-bg02.jpg);
   animation-delay: 8s;
}
#mv .imgArea li:nth-child(3) {
   background-image: url(../images/index/main-bg03.jpg);
   animation-delay: 16s;
}

/* news
-------------------------------------*/
#news .inner {
   width: min(95%, 1100px);
   margin-inline: auto;
   display: grid;
   grid-template-columns: 1fr 72.72%;
   padding-block: 157px 160px;
}
#news .ttl {
   font-size: 24px;
   font-weight: 500;
   line-height: 1.5;
   letter-spacing: 0.1em;
   margin-bottom: 80px;
}
#news .btn {
   width: min(95%, 160px);
}
#news .btn a {
   font-size: 14px;
   display: block;
   padding-bottom: 14px;
   border-bottom: 1px solid #1a1a1a;
   position: relative;
}
#news .btn a::after {
   content: "→";
   position: absolute;
   right: 0;
   top: 30%;
   transform: translateY(-50%);
   transition: all 0.3s ease;
}
#news .btn a:hover::after {
   right: -5px;
}
#news .system-list {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 40px;
}
#news .system-list li a {
   display: grid;
   grid-template-columns: 25% 1fr;
   gap: 40px;
}
#news .system-list li .system-pic {
   margin: 0;
}
#news .system-list li .system-pic img {
   height: 150px;
}
#news .system-list li .system-date {
   color: #939393;
   font-size: 14px;
   letter-spacing: 0;
   margin-bottom: 1px;
}
#news .system-list li .system-ttl {
   font-size: 20px;
   font-weight: 500;
   margin-bottom: 16px;
   letter-spacing: 0;
}
#news .system-list li .system-text {
   font-size: 14px;
   line-height: 2; 
   letter-spacing: 0.05em;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2; 
   overflow: hidden;
}

/* intro
-------------------------------------*/
#intro {
   background: url(../images/index/intro-bg.jpg)no-repeat;
   background-size: cover;
   padding-block: 162px 129px;
   margin-bottom: 350px;
}
#intro .ttl-frame {
   background: url(../images/index/intro-ttl-bg.png)no-repeat center;
   background-size: contain;
   margin-bottom: -210px;
   display: flex;
   justify-content: center;
   padding: 0 0 290px;
}
#intro .ttl {
   font-size: 32px;
   font-weight: 500;
   line-height: 1.75;
   letter-spacing: 0.06em;
   writing-mode: vertical-rl;
   text-orientation: upright;
}
#intro .photo {
   width: min(95%, 1760px);
   margin-inline: auto;
   margin-bottom: 140px;
}
#intro .photo img {
   width: 100%;
   height: auto;
}
#intro .subt {
   text-align: center;
   font-size: 32px;
   line-height: 1.75; 
   letter-spacing: 0.1em;
   margin-bottom: 64px;
}
#intro .txt {
   text-align: center;
   font-size: 20px;
   line-height: 2.3;
   letter-spacing: 0.05em;
   position: relative;
   padding-block:0 140px;
   width: min(95%, 1440px);
   margin-inline: auto;
}
#intro .txt::before {
   position: absolute;
   content: "";
   background: url(../images/index/intro-illust.png)no-repeat;
   background-size: contain;
   width: 557px;
   height: 521px;
   right: 0;
   bottom: -26px;
}
#intro .bg-slide {
   position: absolute;
   max-width: 1920px;
}
#intro .bg-slide .loop {
   overflow: hidden;
}
#intro .bg-slide .loop .loop__box {
   display: flex;
   width: 100vw;
}
#intro .bg-slide .loop .loop__box img {
   height: 12.5vw;
}
#intro .bg-slide .loop .loop__box img:first-child {
   -webkit-animation: loop 50s -25s linear infinite;
   animation: loop 50s -25s linear infinite;
}
#intro .bg-slide .loop .loop__box img:last-child {
   -webkit-animation: loop2 50s linear infinite;
   animation: loop2 50s linear infinite;
}

/* product
-------------------------------------*/
#product {
   background: #F3F4F5;
   padding-block: 140px 166px;
}
#product .enttl {
   text-align: center;
   font-size: 14px;
   margin-bottom: 2px;
}
#product .ttl {
   text-align: center;
   font-size: 24px;
   letter-spacing: 0.1em;
   margin-bottom: 78px;
}

/* pickup
-------------------------------------*/
#product .pickup {
   width: min(95%, 1600px);
   margin-inline: auto;
   background: #FFF;
   padding-block: 80px;
   padding-inline: 80px;
   display: grid;
   grid-template-columns: 61.1111% 30.5555%;
   gap: 64px;
   position: relative;
   align-items: flex-end;
   margin-bottom: 120px;
}

/* メイン画像 */
#product .main-photo {
   width: 100%;
   overflow: hidden;
   margin-bottom: 24px;
}
#product .main-photo img {
   width: 100%;
   height: 100%;
   transition: opacity 0.3s ease;
}
#product .main-photo img.is-changing {
   opacity: 0;
}

/* サムネイル */
#product .thumb-list {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 20px;
}
#product .thumb-item {
   overflow: hidden;
   cursor: pointer;
   transition: border 0.2s ease;
}
#product .thumb-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}
 
/* 商品情報 */
#product .badge {
   position: absolute;
   top: -40px;
   right: 80px;
   width: 240px;
   height: 240px;
   background: #071C3B;
   border-radius: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   color: #FFF;
   text-align: center;
   font-size: 26.4px;
   font-weight: 500;
   line-height: 1.36364;
}
#product .badge .small {
   color: #FFF;
   text-align: center;
   font-size: 19.2px;
   font-weight: 500;
   line-height: 1.82292;
   position: relative;
   top: -9px;
   margin-bottom: -5px;
}
#product .badge .num {
   color: #FFF;
   text-align: center;
   font-size: 50.2px;
   font-weight: 500;
   margin: 5px 0 0 0;
   line-height: 0.8333; 
}
#product .badge .year {
   color: #FFF;
   font-size: 33.6px;
   font-style: normal;
   font-weight: 500;
   line-height: 1.0714;
}
#product .category {
   font-size: 16px;
   letter-spacing: 0.05em;
   margin-bottom: 13px;
}
#product .product-name {
   font-size: 32px;
   letter-spacing: 0.05em;
   margin-bottom: 0px;
   display: flex;
   align-items: center;
   gap: 2px;
}
#product .product-name .kana {
   font-size: 16px;
   letter-spacing: 0.05em;
}
#product .volume {
   font-size: 16px;
   letter-spacing: 0.05em;
   margin-bottom: 36px;
}
#product .price {
   font-size: 16px;
   font-weight: 500;
   margin-bottom: 63px;
   display: flex;
   gap: 6px;
   align-items: flex-end;
   line-height: 1;
}
#product .price .num {
   font-size: 30px;
   font-weight: 500;
}
#product .price .postage {
   font-size: 14px;
   letter-spacing: 0.05em;
   position: relative;
   top: -3px;
   left: -2px;
}
#product .feature {
   font-size: 18px;
   line-height: 2;
   letter-spacing: 0.05em;
   margin-bottom: 40px;
}

#product .subtxt{
   font-size: 13px; line-height: 1.6; letter-spacing: 1px; 
   margin-bottom: 40px;
}

#product .buy-btn {
   display: block;
   background: #1A1A1A;
   color: #FFF;
   text-align: center;
   font-size: 20px;
   letter-spacing: 0.05em;
   transition: opacity 0.3s ease;
   padding-block: 25px;
   position: relative;
}
#product .buy-btn::after {
   position: absolute;
   content: "→";
   right: 30px;
   top: 50%;
   transform: translateY(-50%);
   transition: all 0.3s ease;
}
#product .buy-btn:hover::after {
   right: 25px;
}


/* situation
-------------------------------------*/
#product .situation .ttl {
   text-align: center;
   font-size: 20px;
   font-weight: 500;
   line-height: 1.8; 
   letter-spacing: 0.1em;
   margin-bottom: 80px;
}
#product .situation .list {
   width: min(95%, 1760px);
   margin-inline: auto;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 80px 40px;
}
#product .situation .list li {
   background: #FFF;
   padding: 40px 40px 100px 40px;
   position: relative;
}
#product .situation .list li .item-link {
   position: absolute;
   inset: 0;
}
#product .situation .list li .badge {
   position: absolute;
   top: -40px;
   right: 20px;
   width: 160px;
   height: 160px;
   background: #071C3B;
   border-radius: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: #FFF;
   text-align: center;
   font-size: 15px;
   font-weight: 500;
   line-height: 1.5;
   padding: 0 0 4px 0;
   z-index: 5;
}
#product .situation .list li .badge .small {
   display: block;
   color: #FFF;
   text-align: center;
   font-size: 16px;
   font-weight: 500;
   line-height: 1.5;
   margin-bottom: 6px;
   position: relative;
   top: 0;
}
#product .situation .list li .photo {
   margin-bottom: 32px;
   position: relative;
   cursor: pointer;
}
#product .situation .list li .photo img {
   width: 100%;
   height: auto;
}
#product .situation .list li .photo .hover-img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0;
   transition: opacity 0.4s ease;
}
#product .situation .list li .photo .hover-img.is-visible {
   opacity: 1;
}
#product .situation .list li .product-name {
   text-align: center;
   font-size: 20px;
   line-height: 1.9;
   letter-spacing: 0.05em;
   justify-content: center;
   margin-bottom: 3px;
}
#product .situation .list li .price {
   display: flex;
   gap: 10px;
   font-size: 14px;
   font-weight: 500;
   margin-bottom: 28px;
   justify-content: center;
}
#product .situation .list li .volume {
   font-size: 14px;
   margin: 0;
}
#product .situation .list li .num {
   font-size: 20px;
   font-weight: 500;
   position: relative;
   left: 5px;
}
#product .situation .list li .txt {
   font-size: 14px;
   line-height: 2;
   letter-spacing: 0.05em;
   margin-bottom: 41px;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2; 
   overflow: hidden;
}

#product .situation .list li .btn {
   width: min(95%, 320px);
   margin-inline: auto;
   position: absolute; bottom:40px; left:0; right: 0;
}
#product .situation .list li .btn a {
   text-align: center;
   font-size: 16px;
   letter-spacing: 0.05em;
   display: block;
   padding-block: 16px;
   position: relative;
   border: 0.5px solid #1a1a1a;
   cursor: pointer;
   z-index: 10;
}
#product .situation .list li .btn a::after {
   position: absolute;
   content: "→";
   right: 28px;
   top: 50%;
   transform: translateY(-50%);
   transition: all 0.3s ease;
}
#product .situation .list li .btn a:hover::after {
   right: 25px;
}

/* about
-------------------------------------*/
#about .bg-slide {
   width: min(95%, 1480px);
   margin-left: auto;
   position: relative;
   padding-block: 240px 0;
   margin-bottom: -160px;
}
#about .bg-slide::before {
   position: absolute;
   content: "";
   background: url(../images/index/about-photo.png)no-repeat;
   background-size: contain;
   width: 436px;
   height: 397px;
   bottom: -148px;
   left: -350px;
   z-index: 2;
}
#about .bg-slide .loop {
   overflow: hidden;
}
#about .bg-slide .loop .loop__box {
   display: flex;
   width: 100vw;
}
#about .bg-slide .loop .loop__box img {
   height: 28.125vw;
}
#about .bg-slide .loop .loop__box img:first-child {
   -webkit-animation: loop 50s -25s linear infinite;
   animation: loop 50s -25s linear infinite;
}
#about .bg-slide .loop .loop__box img:last-child {
   -webkit-animation: loop2 50s linear infinite;
   animation: loop2 50s linear infinite;
}
#about .inner {
   background: #F3F4F5;
   width: min(95%, 1440px);
   margin-right: auto;
   padding-block: 240px 140px;
   padding-inline: 119px;
   display: flex;
   gap: 61px;
   justify-content: flex-end;
}
#about .ttl-box {
   display: flex;
   gap: 9px;
   order: 1;
}
#about .enttl {
   font-size: 14px;
   writing-mode: vertical-rl;
   order: 1;
}
#about .ttl {
   font-size: 32px;
   font-weight: 500;
   line-height: 1.75;
   letter-spacing: 0.065em;
   writing-mode: vertical-rl;
   text-orientation: upright;
   padding: 3px 0 0;
}
#about .content {
   padding-block: 42px 0;
}
#about .subt {
   font-size: 20px;
   font-weight: 500;
   line-height: 1.8; 
   letter-spacing: 0.1em;
   margin-bottom: 40px;
}
#about .txt {
   font-size: 16px;
   font-weight: 400;
   line-height: 2; 
   letter-spacing: 0.05em;
   margin-bottom: 80px;
}
#about .btn {
   width: min(95%, 240px);
}
#about .btn a {
   font-size: 14px;
   display: block;
   padding-bottom: 14px;
   border-bottom: 1px solid #1a1a1a;
   position: relative;
}
#about .btn a::after {
   content: "→";
   position: absolute;
   right: 0;
   top: 30%;
   transform: translateY(-50%);
   transition: all 0.3s ease;
}
#about .btn a:hover::after {
   right: -5px;
}

/* access
-------------------------------------*/
#access {
   width: min(95%, 1600px);
   margin-inline: auto;
   padding-block: 156px 100px;
   position: relative;
}
#access::before {
   position: absolute;
   content: "";
   background: url(../images/index/access-deco.png)no-repeat;
   background-size: contain;
   width: 519px;
   height: 498px;
   top: -221px;
   right: 0;
   z-index: 2;
   opacity: 0.08;
}
#access .enttl {
   text-align: center;
   font-size: 14px;
   margin-bottom: 5px;
}
#access .ttl {
   text-align: center;
   font-size: 24px;
   letter-spacing: 0.1em;
   margin-bottom: 77px;
}
#access .list {
   width: min(95%, 1000px);
   margin-inline: auto;
   display: grid;
   gap: 80px;
   margin-bottom: 140px;
}
#access .list li {
   display: grid;
   grid-template-columns: 54% 40.4%;
   gap: 40px;
}
#access .list li .wrap {
   display: contents;
}
#access .list li .photo img {
   width: 100%;
   height: auto;
}
#access .list li .access-name {
   font-size: 24px;
   font-weight: 500;
   margin-bottom: 37px;
}
#access .list li .address {
   font-size: 18px;
   line-height: 1.55556; 
   margin-bottom: 24px;
}
#access .list li .info-box {
   display: grid;
   gap: 16px;
   margin-bottom: 40px;
}
#access .list li .info-box li {
   display: grid;
   grid-template-columns: 100px 1fr;
   gap: 16px;
   margin-bottom: 16px;
}
#access .list li .info-box h4 {
   font-size: 16px;
   line-height: 1.5;
   letter-spacing: 0.02em;
   border: 0.5px solid #1A1A1A;
   background: #FFF;
   height: 30px;
   text-align: center;
   display: grid;
   place-content: center;
}
#access .list li .info-box p {
   font-size: 16px;
   line-height: 1.75;
}
#access .list li .info-box .small {
   font-size: 13px;
   line-height: 1.84615;
   display: block;
   padding-top: 2px;
}
#access .list li .btn a {
   text-align: center;
   font-size: 16px;
   letter-spacing: 0.05em;
   padding-block: 16px;
   border: 0.5px solid #1A1A1A;
   display: flex;
   justify-content: center;
   gap: 9px;
}
#access .list li .btn a .icon img {
   vertical-align: sub;
}
#access .desc {
   color: #000;
   font-size: 14px;
   line-height: 2; 
   width: min(95%, 1300px);
   margin-inline: auto;
}

#access .txt-box .timetxt{
margin:70px 0 0 0;
font-size: 16px; line-height: 1.8; letter-spacing: 1px; 
}
#access .list li .btn02 a {
   text-align: center;
   font-size: 14px;
   letter-spacing: 0.05em;
   padding-block: 16px;
   border-bottom: 0.5px solid #1A1A1A;
   display: flex;
   justify-content: center;
   gap: 9px;
}
#access .list li .btn02 a .icon img {
   vertical-align: sub;
}



/* Upbunner
-------------------------------------*/
.top-Upbunner{ position: fixed; bottom:30px; right:20px; z-index: 30;
   opacity: 0;
   transform: translateY(50px);
   pointer-events: none; 
   transition: transform 0.8s ease, opacity 0.8s ease; 
}
.top-Upbunner.is-show {
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
}
.top-Upbunner .top-Upbunner-frame{position:relative; }
.top-Upbunner .top-Upbunner-frame .up-bunner{position:relative; z-index: 2;}
.top-Upbunner .top-Upbunner-frame .up-bunner img { width: 13.542vw;min-width: 150px;}

}

/* ========================================
   @media screen and (min-width:768px) and (max-width:1280px)
======================================== */
@media screen and (min-width:768px) and (max-width:1280px) {
#intro {
   padding-block: 12.656vw 10.078vw;
   margin-bottom: 27.344vw;
}
   
}

/* ========================================
   @media screen and (min-width:768px) and (max-width:1830px)
======================================== */
@media screen and (min-width:768px) and (max-width:1830px) {
#product {
   padding-block: 7.65vw 9.071vw;
}
#product .enttl {
   font-size: clamp(0.75rem, 0.66rem + 0.19vw, 0.875rem);
   margin-bottom: 0.109vw;
}
#product .ttl {
   font-size: clamp(1.25rem, 1.069rem + 0.38vw, 1.5rem);
   margin-bottom: 4.262vw;
}

/* pickup
-------------------------------------*/
#product .pickup {
   width: 87.432vw;
   padding-block: 4.372vw;
   padding-inline: 4.372vw;
   grid-template-columns: 61.1111% 30.5555%;
   gap: 3.497vw;
   margin-bottom: 6.557vw;
}

/* メイン画像 */
#product .main-photo {
   margin-bottom: 1.311vw;
}

/* サムネイル */
#product .thumb-list {
   gap: 1.093vw;
}
 
/* 商品情報 */
#product .badge {
   top: -2.186vw;
   right: 4.372vw;
   width: 13.115vw;
   height: 13.115vw;
   font-size: 1.443vw;
}
#product .badge .small {
   font-size: 1.049vw;
   top: -0.492vw;
   margin-bottom: -0.273vw;
}
#product .badge .num {
   font-size: 2.361vw;
}
#product .badge .year {
   font-size: 1.836vw;
}
#product .category {
   margin-bottom: 0.71vw;
}
#product .product-name {
   font-size: clamp(0.813rem, -0.046rem + 1.79vw, 2rem);
   gap: 0.109vw;
}
#product .product-name .kana {
   font-size: clamp(0.75rem, 0.569rem + 0.38vw, 1rem);
}
#product .volume {
   margin-bottom: 1.967vw;
}
#product .price {
   margin-bottom: 3.443vw;
   gap: 0.328vw;
   font-size: clamp(0.75rem, 0.569rem + 0.38vw, 1rem);
}
#product .price .num {
   font-size: 1.639vw;
}
#product .price .postage {
   top: -0.164vw;
   left: -0.109vw;
}
#product .feature {
   margin-bottom: 4.372vw;
}
#product .buy-btn {
   padding-block: 1.366vw;
}
#product .buy-btn::after {
   right: 1.639vw;
}
#product .buy-btn:hover::after {
   right: 1.366vw;
}


#product .situation .ttl {
   font-size: clamp(1rem, 0.819rem + 0.38vw, 1.25rem);
   margin-bottom: 4.372vw;
}
#product .situation .list {
   width: 96.175vw;
   gap: 4.372vw 2.186vw;
}
#product .situation .list li {
   padding:2.186vw 2.186vw 8.186vw 2.186vw;
}
#product .situation .list li .badge {
   position: absolute;
   top: -2.186vw;
   right: 1.093vw;
   width: 8.743vw;
   height: 8.743vw;
   font-size: 0.984vw;
}
#product .situation .list li .badge .small {
   font-size: 0.874vw;
   margin-bottom: 0.328vw;
}
#product .situation .list li .photo {
   margin-bottom: 1.749vw;
}
#product .situation .list li .product-name {
   margin-bottom: 0.164vw;
}
#product .situation .list li .price {
   gap: 0.546vw;
   margin-bottom: 1.53vw;
}
#product .situation .list li .num {
   left: 0.273vw;
}
#product .situation .list li .txt {
   margin-bottom: 2.24vw;
}
#product .situation .list li .btn a {
   padding-block: 0.874vw;
}
#product .situation .list li .btn a::after {
   right: 1.53vw;
}
#product .situation .list li .btn a:hover::after {
   right: 1.366vw;
}

}

/* ========================================
   @media screen and (min-width:768px) and (max-width:1280px)
======================================== */
@media screen and (min-width:768px) and (max-width:1280px) {
#product .badge {
   top: -6.186vw;
}
#product .category {
   font-size: clamp(0.75rem, 0.375rem + 0.78vw, 1rem);
}
#product .volume {
   font-size: clamp(0.75rem, 0.375rem + 0.78vw, 1rem);
}
#product .price {
   font-size: clamp(0.625rem, 0.25rem + 0.78vw, 0.875rem);
}
#product .price .postage {
   font-size: clamp(0.625rem, 0.25rem + 0.78vw, 0.875rem);
}
#product .feature {
   font-size: clamp(0.75rem, 0.188rem + 1.17vw, 1.125rem);
}
#product .buy-btn {
   font-size: clamp(0.875rem, 0.313rem + 1.17vw, 1.25rem);
}

#product .situation .list li .product-name {
   font-size: clamp(1rem, 0.625rem + 0.78vw, 1.25rem);
}

}


/* ========================================
   @media screen and (min-width:768px) and (max-width:1919px)
======================================== */
@media screen and (min-width:768px) and (max-width:1919px) {
#about .bg-slide {
   width: 77.124vw;
   padding-block: 12.507vw 0;
   margin-bottom: -8.338vw;
}
#about .bg-slide::before {
   width: 22.72vw;
   height: 20.688vw;
   bottom: -7.712vw;
   left: -18.239vw;
}
}

/* ========================================
   @media screen and (min-width:768px) and (max-width:1280px)
======================================== */
@media screen and (min-width:768px) and (max-width:1280px) {
#about .inner {
   padding-block: 18.75vw 10.938vw;
   padding-inline: 9.297vw;
   gap: 4.766vw;
}
#about .ttl-box {
   gap: 0.703vw;
}
#about .enttl {
   font-size: 1.094vw;
}
#about .ttl {
   font-size: 2.5vw;
   padding: 0.234vw 0 0;
}
#about .content {
   padding-block: 3.281vw 0;
}
#about .subt {
   font-size: clamp(1rem, 0.625rem + 0.78vw, 1.25rem);
   margin-bottom: 3.125vw;
}
#about .txt {
   font-size: clamp(0.75rem, 0.375rem + 0.78vw, 1rem);
   margin-bottom: 6.25vw;
}

}

/* ========================================
   @media screen and (min-width:768px) and (max-width:1280px)
======================================== */
@media screen and (min-width:768px) and (max-width:1280px) {
#access::before {
   width: 40.547vw;
   height: 38.906vw;
   top: -17.266vw;
}
}


/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
/* mv
-------------------------------------*/
#mv {
   width: 100%;
   height: 100%;
   padding-top: 23.2vw;
}
#mv .main-ttl {
   text-align: center;
   margin-bottom: 6.5vw;
   width: min(95%, 68.60vw);
   margin-inline: auto;
   position: relative;
   left: -1.7vw;
}
#mv .main-ttl img {
   width: 100%;
   height: auto;
}
#mv .subt {
   text-align: center;
   font-size:3.865vw;
   letter-spacing: 0.15em;
   margin-bottom: 33.82vw;
}
#mv .sliderArea {
   position: relative;
   width: 100%;
   height: 101.45vw;
   z-index: 20;
}
#mv .imgArea {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
   z-index: 10;
}
#mv .imgArea li {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center center;
   opacity: 0;
   animation: main 24s linear 0s infinite;
}

@keyframes main {
   0% {
      transform: scale(1);
      opacity: 0;
   }
   4% {
      opacity: 1;
   }
   33% {
      transform: scale(1.1);
      opacity: 1;
   }
   37% {
      opacity: 0;
   }
   100% {
      transform: scale(1.1);
      opacity: 0;
   }
}

#mv .imgArea li:nth-child(1) {
   background-image: url(../images/index/main-bg01_sp.jpg);
   animation-delay: 0s;
}
#mv .imgArea li:nth-child(2) {
   background-image: url(../images/index/main-bg02_sp.jpg);
   animation-delay: 8s;
}
#mv .imgArea li:nth-child(3) {
   background-image: url(../images/index/main-bg03_sp.jpg);
   animation-delay: 16s;
}

/* news
-------------------------------------*/
#news .inner {
   width: min(95%, 89.37vw);
   margin-inline: auto;
   display: grid;
   padding-block: 15.46vw 24.15vw;
}
#news .ttl-box {
   display: contents;
}
#news .ttl {
   font-size:4.831vw;
   font-weight: 500;
   line-height: 1.4;
   letter-spacing: 0.1em;
   margin-bottom: 9.66vw;
   order: 1;
   text-align: center;
}
#news .btn {
   width: 57.97vw;
   margin-inline: auto;
   order: 3;
}
#news .btn a {
   font-size:3.382vw;
   display: block;
   padding-bottom: 3.0vw;
   border-bottom: 0.2vw solid #1a1a1a;
   position: relative;
   text-align: center;
   padding-right: 6vw;
}
#news .btn a::after {
   content: "→";
   position: absolute;
   right: 15.70vw;
   top: 30%;
   transform: translateY(-50%);
   transition: all 0.3s ease;
}
#news .btn a:hover::after {
   right: 14.49vw;
}
#news .system-list {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 5.80vw;
   order: 2;
   margin-bottom: 9.66vw;
}
#news .system-list li a {
   display: grid;
   grid-template-columns: 37.027% 1fr;
   gap: 3.86vw;
}
#news .system-list li .system-pic {
   margin: 0;
}
#news .system-list li .system-pic img {
   height: 24.88vw;
}
#news .system-list li .system-date {
   color: #939393;
   font-size:2.898vw;
   letter-spacing: 0;
   margin-bottom: 0.5vw;
}
#news .system-list li .system-ttl {
   font-size:3.865vw;
   font-weight: 500;
   margin-bottom: 1.5vw;
   letter-spacing: 0;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1; 
   overflow: hidden;
}
#news .system-list li .system-text {
   font-size:2.898vw;
   line-height: 2; 
   letter-spacing: 0.05em;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2; 
   overflow: hidden;
}

/* intro
-------------------------------------*/
#intro {
   background: url(../images/index/intro-bg_sp.jpg)no-repeat;
   background-size: cover;
   padding-block: 19.8vw 19.32vw;
   margin-bottom: 53.14vw;
}
#intro .ttl-frame {
   background: url(../images/index/intro-ttl-bg_sp.png)no-repeat center;
   background-size: contain;
   margin-bottom: -22.2vw;
   display: flex;
   justify-content: center;
   padding: 0 0 27.61vw;
}
#intro .ttl {
   font-size:5.797vw;
   font-weight: 500;
   line-height: 1.75;
   letter-spacing: 0.07em;
   writing-mode: vertical-rl;
   text-orientation: upright;
}
#intro .photo {
   width: min(95%, 89.37vw);
   margin-inline: auto;
   margin-bottom: 15.46vw;
}
#intro .photo img {
   width: 100%;
   height: auto;
}
#intro .subt {
   text-align: center;
   font-size:4.831vw;
   line-height: 1.7; 
   letter-spacing: 0.1em;
   margin-bottom: 9.66vw;
}
#intro .txt {
   text-align: center;
   font-size:3.382vw;
   line-height: 2.14286;
   letter-spacing: 0.05em;
   position: relative;
   padding-block:0 19.32vw;
   width: min(95%, 89.37vw);
   margin-inline: auto;
}
#intro .bg-slide {
   position: absolute;
}
#intro .bg-slide .loop {
   overflow: hidden;
}
#intro .bg-slide .loop .loop__box {
   display: flex;
   width: 100vw;
}
#intro .bg-slide .loop .loop__box img {
   min-width: 367.15vw;
}
#intro .bg-slide .loop .loop__box img:first-child {
   -webkit-animation: loop 50s -25s linear infinite;
   animation: loop 50s -25s linear infinite;
}
#intro .bg-slide .loop .loop__box img:last-child {
   -webkit-animation: loop2 50s linear infinite;
   animation: loop2 50s linear infinite;
}

/* product
-------------------------------------*/
#product {
   background: #F3F4F5;
   padding-block: 20.2vw 18.32vw;
}
#product .enttl {
   text-align: center;
   font-size:3.382vw;
   margin-bottom: 1.2vw;
}
#product .ttl {
   text-align: center;
   font-size:5.797vw;
   letter-spacing: 0.1em;
   margin-bottom: 8.9vw;
}

/* pickup
-------------------------------------*/
#product .pickup {
   width: min(95%, 89.37vw);
   margin-inline: auto;
   background: #FFF;
   padding-block: 4.83vw;
   padding-inline: 3.62vw;
   display: grid;
   position: relative;
   margin-bottom: 15.46vw;
}

/* メイン画像 */
#product .main-photo {
   width: 100%;
   overflow: hidden;
   margin-bottom: 1.21vw;
}
#product .main-photo img {
   width: 100%;
   height: 100%;
   transition: opacity 0.3s ease;
}
#product .main-photo img.is-changing {
   opacity: 0;
}

/* サムネイル */
#product .thumb-list {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 1.21vw;
   margin-bottom: 5.8vw;
}
#product .thumb-item {
   overflow: hidden;
   cursor: pointer;
   transition: border 0.2s ease;
}
#product .thumb-item img {
   width: 100%;
   height: auto;
   display: block;
}
 
/* 商品情報 */
#product .badge {
   position: absolute;
   top: -2.2vw;
   right: -1.68vw;
   width: 26.57vw;
   height: 26.57vw;
   background: #071C3B;
   border-radius: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: #FFF;
   text-align: center;
   font-size: 2.898vw;
   font-weight: 500;
   line-height: 1.4;
   gap: 1.21vw;
}
#product .badge .small {
   color: #FFF;
   text-align: center;
   font-size: 2.42vw;
   font-weight: 500;
   position: relative;
}
#product .badge .num {
   color: #FFF;
   text-align: center;
   font-size:4.831vw;
   font-weight: 500;
   line-height: 0.825; 
}
#product .badge .year {
   color: #FFF;
   font-size:3.382vw;
   font-weight: 500;
   line-height: 1.17857;
}
#product .category {
   font-size:3.382vw;
   letter-spacing: 0.05em;
   margin-bottom: 1.2vw;
}
#product .product-name {
   font-size:5.797vw;
   letter-spacing: 0.05em;
   margin-bottom: 1.5vw;
   display: flex;
   align-items: baseline;
   gap: 0.48vw;
}
#product .product-name .kana {
   font-size:3.382vw;
   letter-spacing: 0.05em;
}
#product .volume {
   font-size:3.382vw;
   letter-spacing: 0;
   margin-bottom: 6.8vw;
}
#product .price {
   font-size:3.382vw;
   font-weight: 500;
   margin-bottom: 1.97vw;
   display: flex;
   gap: 0.9vw;
   align-items: flex-end;
   line-height: 1;
}
#product .price .num {
   font-size:5.797vw;
   font-weight: 500;
}
#product .postage {
   font-size:2.898vw;
   letter-spacing: 0;
   position: relative;
   margin-bottom: 5.5vw;
}
#product .feature {
   font-size:3.382vw;
   line-height: 1.71429;
   letter-spacing: 0.05em;
   margin-bottom: 5.80vw;
}

#product .subtxt{
   font-size: 2.8vw; line-height: 1.6; letter-spacing: 0; 
   margin-bottom: 4vw;
}

#product .buy-btn {
   display: block;
   background: #1A1A1A;
   color: #FFF;
   text-align: center;
   font-size:3.865vw;
   letter-spacing: 0;
   transition: opacity 0.3s ease;
   padding-block: 4.16vw;
   position: relative;
   padding-right: 2vw;
}
#product .buy-btn::after {
   position: absolute;
   content: "→";
   right: 7.5vw;
   top: 50%;
   transform: translateY(-50%);
   transition: all 0.3s ease;
}
#product .buy-btn:hover::after {
   right: 6.19vw;
}


/* situation
-------------------------------------*/
#product .situation .ttl {
   text-align: center;
   font-size:4.348vw;
   font-weight: 500;
   line-height: 1.77778; 
   letter-spacing: 0.1em;
   margin-bottom: 16.49vw;
}
#product .situation .list {
   width: min(95%, 94.20vw);
   margin-inline: auto;
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 20.36vw 2.42vw;
}
#product .situation .list li {
   position: relative;
      width: 72vw;
      margin: 0 auto;
   padding: 0vw 0vw 0vw 0vw;
}
#product .situation .list li .item-link {
   position: absolute;
   inset: 0;
}
#product .situation .list li .badge {
        position: absolute;
        top: -11.66vw;
        right: -11vw;
        width: 28.32vw;
        height: 28.32vw;
        background: #071C3B;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #FFF;
        text-align: center;
        font-size: 2.898vw;
        font-weight: 500;
        line-height: 1.4;
        z-index: 5;
}
#product .situation .list li .badge .small {
   display: block;
   color: #FFF;
   text-align: center;
   font-size: 2.42vw;
   font-weight: 500;
   line-height: 1.5;
   margin-bottom: -1.5vw;
   position: relative;
   top: -0.5vw;
}
#product .situation .list li .photo {
   margin:0 auto 2.90vw;
   position: relative;
   cursor: pointer;
}
#product .situation .list li .photo img {
   width: 100%;
   height:62.65vw;
   object-fit: cover;
}
#product .situation .list li .photo .hover-img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0;
   transition: opacity 0.4s ease;
}
#product .situation .list li .photo .hover-img.is-visible {
   opacity: 1;
}
#product .situation .list li .product-name {
   text-align: center;
   font-size:3.865vw;
   line-height: 1.625;
   letter-spacing: 0;
   justify-content: center;
   margin-bottom: 2.45vw;
}
#product .situation .list li .price {
   display: block;
   gap: 0.97vw;
   font-size:2.898vw;
   font-weight: 500;
   margin-bottom: 4.35vw;
   text-align: center;
   justify-content: center;
}

#product .situation .list li .price span.volume{
   display: block;margin: 0 0 2vw 0;
}

#product .situation .list li .volume {
   font-size:2.898vw;
   margin: 0;
}
#product .situation .list li .num {
   font-size:3.865vw;
   font-weight: 500;
   position: relative;
}
#product .situation .list li .txt {
   font-size:2.898vw;
   line-height: 1.8333;
   letter-spacing: 0.05em;
   margin-bottom: 3.86vw;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3; 
   overflow: hidden;
}
#product .situation .list li .btn {
   width: 100%;
   margin-inline: auto;
}

#product .situation .list li .btn a {
   text-align: center;
   font-size:2.898vw;
   line-height: 1.3333;
   letter-spacing: 0;
   display: block;
   padding-block: 2.90vw;
   position: relative;
   border: 0.12vw solid #1a1a1a;
   padding-right: 1vw;
}
#product .situation .list li .btn a::after {
   position: absolute;
   content: "→";
   right: 2.90vw;
   top: 50%;
   transform: translateY(-50%);
   transition: all 0.3s ease;
}
#product .situation .list li .btn a:hover::after {
   right: 1.69vw;
}

/* about
-------------------------------------*/
#about .bg-slide {
   width: min(95%, 85.99vw);
   margin-left: auto;
   position: relative;
   padding-block: 24.15vw 0;
   margin-bottom: -19vw;
}
#about .bg-slide::before {
   position: absolute;
   content: "";
   background: url(../images/index/about-photo_sp.png)no-repeat;
   background-size: contain;
   width: 36.47vw;
   height: 33.33vw;
   bottom: -25vw;
   right: 4.5vw;
   z-index: 2;
}
#about .bg-slide .loop {
   overflow: hidden;
}
#about .bg-slide .loop .loop__box {
   display: flex;
   width: 100vw;
}
#about .bg-slide .loop .loop__box img {
   min-width: 170.4vw;
}
#about .bg-slide .loop .loop__box img:first-child {
   -webkit-animation: loop 50s -25s linear infinite;
   animation: loop 50s -25s linear infinite;
}
#about .bg-slide .loop .loop__box img:last-child {
   -webkit-animation: loop2 50s linear infinite;
   animation: loop2 50s linear infinite;
}
#about .inner {
   background: #F3F4F5;
   padding-block: 34.9vw 19.32vw;
   padding-inline: 6.52vw;
}
#about .enttl {
   display: none;
}
#about .ttl {
   font-size:4.831vw;
   line-height: 1.7;
   letter-spacing: 0.1em;
   margin-bottom: 9.66vw;
}
#about .subt {
   display: none;
}
#about .txt {
   font-size:3.382vw;
   line-height: 2.14286; 
   letter-spacing: 0.05em;
   margin-bottom: 15.46vw;
}
#about .btn {
   width: 38.65vw;
}
#about .btn a {
   font-size:3.382vw;
   display: block;
   padding-bottom: 2.86vw;
   border-bottom: 0.2vw solid #1a1a1a;
   position: relative;
}
#about .btn a::after {
   content: "→";
   position: absolute;
   right: 8.86vw;
   top: 30%;
   transform: translateY(-50%);
   transition: all 0.3s ease;
}
#about .btn a:hover::after {
   right: 7.65vw;
}


/* access
-------------------------------------*/
#access {
   width: min(95%, 89.37vw);
   margin-inline: auto;
   padding-block: 28.6vw 15.46vw;
   position: relative;
}
#access::before {
   position: absolute;
   content: "";
   background: url(../images/index/access-deco_sp.png)no-repeat;
   background-size: contain;
   width: 44.69vw;
   height: 43.00vw;
   top: -25vw;
   right: 0;
   z-index: 2;
   opacity: 0.08;
}
#access .enttl {
   text-align: center;
   font-size:3.382vw;
   margin-bottom: 1.2vw;
}
#access .ttl {
   text-align: center;
   font-size:5.797vw;
   letter-spacing: 0.1em;
   margin-bottom: 8.66vw;
}
#access .list {
   display: grid;
   gap: 7.66vw;
   margin-bottom: 10.56vw;
}
#access .list li .wrap {
   display: grid;
   grid-template-columns: 41.06vw 1fr;
   gap: 3.86vw;
   margin-bottom: 5.80vw;
}
#access .list li .photo img {
   width: 100%;
   height: auto;
}
#access .list li .access-name {
   font-size:4vw;
   font-weight: 500;
   margin-bottom: 5.80vw;
   line-height: 1.4444;
}
#access .list li .address {
   font-size:3.865vw;
   line-height: 1.75; 
   margin-bottom: 3.86vw;
}
#access .list li .info-box {
   display: flex;
   gap: 1.93vw;
}
#access .list li .info-box li {
   display: grid;
   grid-template-columns: 19.32vw 1fr;
   gap: 3.86vw;
   margin-bottom: 1.93vw;
   align-items: center;
}
#access .list li .info-box h4 {
   font-size:2.898vw;
   line-height: 1.3333;
   letter-spacing: -0.02em;
   border: 0.12vw solid #1A1A1A;
   background: #FFF;
   height: 7.25vw;
   text-align: center;
   display: grid;
   place-content: center;
}
#access .list li .info-box p {
   font-size:3.382vw;
   line-height: 1.71429;
}
#access .list li .info-box .small {
   font-size:2.898vw;
   line-height: 1.6667;
   display: block;
   padding-top: 0.5vw;
}
#access .list li .btn a {
   text-align: center;
   font-size:2.898vw;
   letter-spacing: 0.05em;
   padding-block: 2.8vw 1.9vw;
   border: 0.12vw solid #1A1A1A;
   display: flex;
   justify-content: center;
   gap: 1.45vw;
}
#access .list li .btn a .icon img {
   vertical-align: sub;
}
#access .list li:nth-child(1) .info-box li:nth-child(1) h4 {
   position: relative;
   top: -2vw;
}
#access .list li:nth-child(1) .info-box li:nth-child(2) h4 {
   position: relative;
   top: -2vw;
}

#access .desc {
   font-size:2.898vw;
   line-height: 2; 
}

#access .timetxt{
margin:5vw 0 0 0; text-align: center;
font-size: 3.2vw; line-height: 1.8; letter-spacing: 0; 
}
#access .list li .btn02 a {
   width: 80%; margin: 0 auto;
   text-align: center;
   font-size:3.2vw;
   letter-spacing: 0.05em;
   padding-block: 2.8vw 1.9vw;
   border-bottom: 0.12vw solid #1A1A1A;
   display: flex;
   justify-content: center;
   gap: 1.45vw;
}
#access .list li .btn02 a .icon img {
   vertical-align: sub;
}




/* Upbunner
-------------------------------------*/
.top-Upbunner{ position: fixed; bottom:3vw; right:3vw; z-index: 30;
   opacity: 0;
   transform: translateY(50px);
   pointer-events: none; 
   transition: transform 0.8s ease, opacity 0.8s ease; 
}
.top-Upbunner.is-show {
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
}
.top-Upbunner .top-Upbunner-frame{position:relative; }
.top-Upbunner .top-Upbunner-frame .close-icon{position: absolute; top:-2vw; right:-2vw; z-index: 5;}
.top-Upbunner .top-Upbunner-frame .close-icon img{ width: 6vw;}
.top-Upbunner .top-Upbunner-frame .up-bunner{position:relative; z-index: 2;}
.top-Upbunner .top-Upbunner-frame .up-bunner img{ width: 36.23vw;}

}