@charset "UTF-8";
/* 共通設定 */
@charset "utf-8";
.clearfix:after { content: ""; clear: both; display: block; }
.inviewfadeInUp { opacity: 0; transform: translate(0, 60px); -webkit-transform: translate(0, 60px); transition: 1s; }
.fadeInUp { opacity: 1.0; transform: translate(0, 0); -webkit-transform: translate(0, 0); }
a { outline: none; opacity: 1; color: #222; }
a:hover { opacity: 0.5; }
*:hover { transition: all .3s; }
* { outline: none; }
body { width: 100%; height: auto; margin: 0; padding: 0; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 200; font-style: normal; -webkit-text-size-adjust: 100%; font-size: 14px; color: #222; }
body.fixed { overflow: hidden; }
.inner { width: 1050px; margin: 0 auto; }
.br-pc { display: block; }
.br-sp { display: none; }
figure { margin: 0; }
figure img { width: 100%; }
#wrapper { padding-left: 0px; overflow: hidden; }
#vegas { z-index: -1; }
html { font-size: 14px; letter-spacing: 1px; font-style: normal; }
body { width: 100%; height: auto; margin: 0; padding: 0; box-sizing: border-box; overflow-x: hidden; }
p, figure, img, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, blockquote, pre, form, fieldset, legend, table, th, td { font-family: noto-sans-cjk-jp, sans-serif; font-weight: 200; font-style: normal; margin: 0; padding: 0; list-style: none; }
p { font-size: 14px; letter-spacing: 1px; }
section { margin: 0; padding: 0px 0; }
.inner { width: 100%; max-width: 1050px; margin: 0 auto; }
figure { margin: 0; padding: 0; }
figure img { width: 100%; vertical-align: bottom; }
a { text-decoration: none; }
a:hover { opacity: 0.7; }
*:hover { transition: all .5s; }
.jp-title { font-family: noto-sans-cjk-jp, sans-serif; font-weight: 200; font-size: 37px; line-height: 70px; color: #222; letter-spacing: 3px; }
.jp-title2 { font-family: noto-sans-cjk-jp, sans-serif; font-weight: 200; font-size: 12px; line-height: 70px; color: #222; letter-spacing: 3px; }
.en-title { font-family: helvetica-neue-lt-pro, sans-serif; font-size: 45px; line-height: 70px; font-weight: 200; color: #222; letter-spacing: 3px; }
.btn { font-family: helvetica-neue-lt-pro, noto-sans-cjk-jp, sans-serif; text-align: center; position: relative; z-index: 10; }
.btn a { display: inline-block; padding: 15px 40px; background: transparent; color: #222; text-decoration: none; border-radius: 50px; font-size: 14px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
/* ローディングLottieアニメーション */
.loading-lottie {  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #f9f4f2; display: flex; justify-content: center; align-items: center; z-index: 999999; transition: opacity 0.3s ease-out; }
.loading-lottie-content { width: 20vw; height: 20vw; max-width: 200px; max-height: 200px; min-width: 150px; min-height: 150px; transition: all 0.3s ease;}
.loading-lottie.fade-out { opacity: 0; pointer-events: none; }
.loading-lottie.hidden { display: none; }
/* カーテン効果のスタイル */
.curtain { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999998; pointer-events: none; overflow: hidden; }
.curtain-left, .curtain-right { position: absolute; top: 0; width: 50%; height: 100%; background: #f9f4f2; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.curtain-left { left: 0; transform: translateX(0); }
.curtain-right { right: 0; transform: translateX(0); }
/* カーテンが開く状態 */
.curtain.open .curtain-left { transform: translateX(-100%); }
.curtain.open .curtain-right { transform: translateX(100%); }
/* 固定背景色 */
.fixed-background-color { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #fcf9f7; z-index: -2; overflow: hidden; }
/* 各文字行の遅延時間を設定 */
.text-reveal-animation.animate .text-line:nth-child(1) { transition-delay: 0.1s; }
.text-reveal-animation.animate .text-line:nth-child(2) { transition-delay: 0.2s; }
.text-reveal-animation.animate .text-line:nth-child(3) { transition-delay: 0.3s; }
.text-reveal-animation.animate .text-line:nth-child(4) { transition-delay: 0.4s; }
.text-reveal-animation.animate .text-line:nth-child(5) { transition-delay: 0.5s; }
.text-reveal-animation.animate .text-line:nth-child(6) { transition-delay: 0.6s; }
.text-reveal-animation.animate .text-line:nth-child(7) { transition-delay: 0.7s; }
.text-reveal-animation.animate .text-line:nth-child(8) { transition-delay: 0.8s; }
/* マスク効果のバリエーション */
.text-reveal-mask { position: relative; overflow: hidden; }
.text-reveal-mask::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, #fff 50%, transparent 100%); transform: translateX(-100%); transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.text-reveal-mask.animate::before {transform: translateX(100%);}
/* より洗練されたマスク効果 */
.text-reveal-smooth { position: relative; overflow: hidden;}
.text-reveal-smooth .text-line {display: block;transform: translateY(100%) scale(0.8); opacity: 0; filter: blur(10px); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.text-reveal-smooth.animate .text-line {transform: translateY(0) scale(1); opacity: 1; filter: blur(0);}
/* 各文字行の遅延時間 */
.text-reveal-smooth.animate .text-line:nth-child(1) { transition-delay: 0.1s; }
.text-reveal-smooth.animate .text-line:nth-child(2) { transition-delay: 0.2s; }
.text-reveal-smooth.animate .text-line:nth-child(3) { transition-delay: 0.3s; }
.text-reveal-animation.animate .text-line:nth-child(4) { transition-delay: 0.4s; }
.text-reveal-animation.animate .text-line:nth-child(5) { transition-delay: 0.5s; }
.text-reveal-animation.animate .text-line:nth-child(6) { transition-delay: 0.6s; }
.text-reveal-animation.animate .text-line:nth-child(7) { transition-delay: 0.7s; }
.text-reveal-animation.animate .text-line:nth-child(8) { transition-delay: 0.8s; }
/*================================================================*/
#top { height: 100vh; position: relative; }
#top .top-bg-lottie { position: absolute; top: 0; right: -10%; width: 150%; height: 100%; z-index: -1; pointer-events: none; opacity: 0.1; }
#top .scrolling-text-container { position: relative; top: 50px; left: 0; width: 100%; height: 100vh; overflow: hidden; z-index: 999; background: transparent; }
#top .scrolling-text { white-space: nowrap; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: clamp(40px, 15vw, 150px); font-weight: 100; color: #891333; opacity: 0.1; letter-spacing: 2px; animation: slideTextLeft 50s linear infinite; transform: translateX(20%);}
@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
#top .main-title { position: absolute; left: 10%; top: 50%; transform: translateY(-50%); z-index: 1000; }
#top .main-title h1 { margin: 0 0 20px 0; line-height: 60px; letter-spacing: 3px; }
#top .main-title h2 { font-family: noto-sans-cjk-jp, sans-serif; font-weight: 200; font-style: normal; font-size: 14px; color: #222; margin: 0; line-height: 1.4; letter-spacing: 1.5px }
#top .top-menu { position: absolute; right: 100px; bottom: 10%; z-index: 1000; }
#top .top-menu ul { list-style: none; margin: 0; padding: 0; text-align: right; }
#top .top-menu li { margin: 13px 0; }
#top .top-menu a { font-family: helvetica-neue-lt-pro, sans-serif; font-weight: 300; font-style: normal; font-size: 14px; color: #222; text-decoration: none; transition: color 0.3s ease; }
#top .top-menu a:hover { color: #891333; }
#top .top-menu::after { content: ''; position: absolute; right: -20px; top: 0; width: 0.5px; height: 100%; background-color: #222; }
#top .news { font-family: noto-sans-cjk-jp, sans-serif; font-weight: 100; font-style: normal; position: absolute; bottom: 10%; left: 5%; width: 70%; background-color: #fff; border: 0.5px solid #222; border-radius: 50px; overflow: visible; z-index: 1000; cursor: pointer; }
#top .news-container { width: 100%; height: 50px; display: flex; align-items: center; }
#top .news-item { display: flex; align-items: center; width: 100%; height: 100%; white-space: nowrap; }
#top .news-item-date { font-family: noto-sans-cjk-jp, sans-serif; font-weight: 100; font-style: normal; width: 150px; padding: 0 20px; font-size: 14px; font-weight: 300; text-align: center; flex-shrink: 0; color: #222; display: flex; align-items: center; justify-content: center; position: relative; }
#top .news-item-date::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 0.5px; height: 60%; background-color: #222; }
#top .news-icon { width: 50px; height: 50px; margin-right: 10px; transition: transform 0.3s ease; transform-origin: right center; }
#top .tooltip { position: absolute; left: 20px; top: -150px; opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 10000; pointer-events: auto; }
#top .tooltip-image { width: auto; height: 150px; display: block; animation: tooltip-fuwa 2.5s ease-in-out infinite; }
@keyframes tooltip-fuwa { 0% { transform: translateY(0); } 50% { transform: translateY(-18px); } 100% { transform: translateY(0); } }
#top .news:hover .tooltip { opacity: 1; visibility: visible; transform: translateY(-5px); }
#top .news:hover .news-icon { transform: scale(1.5) rotate(-5deg); }
#top .news-item-content { width: 100%; height: 100%; overflow: hidden; position: relative; }
#top .news-text { display: inline-block; white-space: nowrap; animation: news-scroll 30s linear infinite; font-size: 14px; font-weight: 300; line-height: 50px; padding-right: 50px; color: #222; }
@keyframes news-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
.slide-item.slide-in { animation: slideDown 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.slide-item.slide-out { animation: slideUp 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes slideDown { 0% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(100%); } }
/*================================================================*/
#about_index {text-align: center; margin: 0px 0 0 0; padding: 350px 0 150px 0; position: relative; z-index: 1; color: #222; }
#about_index .title-lines { position: relative; z-index: 1; margin-bottom: 40px; }
#about_index .title-lines h2 { margin-bottom: 0; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
#about_index.animate-text .title-lines h2 { animation: fadeInUp 0.8s ease forwards; }
#about_index .text-lines { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; }
#about_index .text-lines .line { font-size: 14px; line-height: 26px; color: #222; opacity: 0; transform: translateY(20px); margin-bottom: 10px; transition: opacity 0.8s ease, transform 0.8s ease; }
#about_index.animate-text .text-lines .line { animation: fadeInUp 0.8s ease forwards; }
#about_index.animate-text .text-lines .line:nth-child(1) { animation-delay: 1.2s; }
#about_index.animate-text .text-lines .line:nth-child(2) { animation-delay: 1.4s; }
#about_index.animate-text .text-lines .line:nth-child(3) { animation-delay: 1.6s; }
#about_index.animate-text .text-lines .line:nth-child(4) { animation-delay: 1.8s; }
#about_index.animate-text .text-lines .line:nth-child(5) { animation-delay: 2.0s; }
#about_index.animate-text .text-lines .line:nth-child(6) { animation-delay: 2.2s; }
#about_index.animate-text .text-lines .line:nth-child(7) { animation-delay: 2.4s; }
#about_index.animate-text .text-lines .line:nth-child(8) { animation-delay: 2.6s; }
#about_index.animate-text .text-lines .line:nth-child(9) { animation-delay: 2.8s; }
#about_index.animate-text .text-lines .line:nth-child(10) { animation-delay: 3.0s; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
/*================================================================*/
#works_index { margin: 0; padding: 150px 0 150px; letter-spacing: 1px; position: relative; }
/* WORKSセクションの上下ライン */
.works-section-line { width: 100%; height: 1px; background-color: #891333; opacity: 0.1; margin: 0; position: relative; overflow: hidden; }
.works-section-line::before { content: ''; position: absolute; top: 0; height: 100%; background-color: #891333; opacity: 0.3; transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
#works_index h2 { text-align: center; margin-top: 50px; line-height: 0px; }
#works_index h3 { text-align: center; font-size: 12px; }
#works_index .slider .slide { margin: 10px 15px; text-align: center; display: block; position: relative; background-color: #fff; padding: 25px 20px 20px 20px; border-radius: 0px 30px 0 0; }
#works_index .slider .slide a { color: #666; text-decoration: none; font-size: 13px; line-height: 20px; }
#works_index .slider .slide img { width: 100%; height: auto; }
#works_index .slider .slide i { margin-right: 5px; }
#works_index .slider .slide .company-name { font-size: 13px; font-weight: 500; margin: 10px 0 5px 0; color: #333; }
#works_index .slider .slide .site-type { font-size: 11px; color: #666; margin: 0; }
#works_index .slider .slick-prev, #works_index .slider .slick-next { display: none !important; }
#works_index .btn { margin: 10px auto 0; text-align: center; }
#works_index .btn a { padding: 18px 80px; background: #891333; color: #fff; text-align: center; border-radius: 50px; text-decoration: none; letter-spacing: 2px; }
#works_index .fluid { z-index: -1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); width: 900px; height: 700px; background: #f8eee9; animation: fluidrotate 20s ease 0s infinite; }
@keyframes fluidrotate { 0%, 100% { border-radius: 63% 37% 54% 46%/55% 48% 52% 45%; } 14% { border-radius: 40% 60% 54% 46%/49% 60% 40% 51%; } 28% { border-radius: 54% 46% 38% 62%/49% 70% 30% 51%; } 42% { border-radius: 61% 39% 55% 45%/61% 38% 62% 39%; } 56% { border-radius: 61% 39% 67% 33%/70% 50% 50% 30%; } 70% { border-radius: 50% 50% 34% 66%/56% 68% 32% 44%; } 84% { border-radius: 46% 54% 50% 50%/35% 61% 39% 65%; } }
/*=================================================================*/
#service_index { margin: 0; padding: 150px 0; position: relative; }
#service_index .container { max-width: 1400px; margin: 0 auto; }
#service_index .container .text-area { grid-column: 1; grid-row: 1; padding: 60px 0px 60px 120px; display: flex; flex-direction: column; justify-content: center; }
#service_index .container .text-area h3 { line-height: 0; margin: 5px 0 50px 0; }
#service_index .container .text-area p { font-size: 14px; line-height: 35px; margin: 0 0 15px 0; width: 100%; margin-left: 0;}
#service_index .service-content-wrapper { display: flex; align-items: center; gap: 80px; }
#service_index .text-area { width: 55%; max-width: none;}
#service_index .image-slider-area { width: 45%; max-width: none; height: 300px; position: relative; overflow: hidden; }
#service_index .image-slider { position: relative; width: 100%; height: 100%; }
#service_index .slide-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transform: translateY(100%); transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1); }
#service_index .slide-item.active { opacity: 1; transform: translateY(0); }
#service_index .slide-item img { width: 100%; height: 100%; object-fit: cover; }
#service_index .images-container { display: flex; gap: 10px; position: relative; border-radius: 0px; width: 100%; max-width: 1200px; height: 500px; padding: 20px 20px 50px 20px; box-sizing: border-box; margin: 0 auto; transform: translateZ(0); }
#service_index .panel-bg { position: relative; height: 100%; border-radius: 20px; overflow: hidden; min-width: 50px; }
#service_index .panel-bg-1 { width: 35%; }
#service_index .panel-bg-2 { width: 30%; }
#service_index .panel-bg-3 { width: 35%; }
#service_index .panel-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; border-radius: 20px; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
#service_index .panel-image.current { transform: translateX(0); }
#service_index .panel-image.next { transform: translateX(100%); }
#service_index .panel-bg-1 .panel-image { background-position: left center; }
#service_index .panel-bg-2 .panel-image { background-position: center; }
#service_index .panel-bg-3 .panel-image { background-position: right center; }
#service_index .service-menu { max-width: 1400px; margin: 0px auto; display: flex; gap: 0; justify-content: center; align-items: flex-start; position: relative; }
#service_index .service-bg-lottie { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 110vw; height: 100%; z-index: -1; pointer-events: none; opacity: 0.1 !important; }
#service_index .service-menu::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 0.5px; background: #222; }
#service_index .service-menu-divider { border-left: 0.5px solid #222; height: 300px; margin: 65px 0; align-self: center; display: block; width: 0; background: none; }
#service_index .service-menu-item { flex: 1 1 0; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; box-shadow: none; border-radius: 0; border: none; }
#service_index .service-menu-item h4 { margin-top: 40px; font-family: helvetica-neue-lt-pro, sans-serif; font-size: 26px; font-weight: 300; margin-bottom: 18px; color: #222; letter-spacing: 1px; text-align: center; }
#service_index .service-menu-item ul { padding-left: 0; margin: 0; text-align: center; }
#service_index .service-menu-item li { font-size: 14px; padding: 2px 0; line-height: 2; color: #222; list-style: none; text-align: center; }
#service_index .btn { text-align: center; margin-top: 30px; position: relative; z-index: 10; }
#service_index .btn a { display: inline-block; padding: 15px 40px; background: transparent; background: #891333; color: #fff; text-decoration: none; border-radius: 50px; font-size: 14px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
/*=================================================================*/
#diamond .grid-wrap { display: contents;}
#diamond .grid,.grid01,.grid02,.grid03,.grid04 { display: contents; }
#diamond .grid01 img { width: 50%; display: block; margin: 38% auto 0;}
#diamond .diamond01 { position: relative; }
#diamond .diamond-link { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; }
#diamond .diamond-link:hover { opacity: 1 !important; }
/* Lottieアニメーション：後ろ側から顔を出す効果 */
.lottie-peek-container { position: absolute; top: 0%; left: 0px; z-index: 5; transform: scale(0.8) translateY(-50%); animation: peekFromBehind 3s ease-in-out infinite; }
#diamond .grid-container { width: 80%; max-width: 1600px; margin: 0 auto; padding-bottom: 200px; display: flex; margin-top: 50px; position: relative; }
#diamond .diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
#diamond .diamond-s { background-color: #891333; width: 17.139%; height: 17.139%; aspect-ratio: 1 / 1; }
#diamond .diamond-m { background-color: #891333; width: 24.426%; height: 24.426%; aspect-ratio: 1 / 1; }
#diamond .diamond-l { width: 30.499%; height: 30.499%; aspect-ratio: 1 / 1; position: relative; overflow: hidden; }
#diamond .diamond02 { margin-top: 9.041%; margin-left: -14.844%; }
#diamond .diamond03 { margin-top: -1.349%; margin-left: -9.581%; }
#diamond .diamond04 { margin-top: 14.439%; margin-left: -14.844%; }
#diamond .diamond05 { margin-top: -4.993%; margin-left: -21.592%; }
#diamond .diamond06 { margin-top: 4.588%; margin-left: -11.74%; }
#diamond .diamond07 { margin-top: 2.294%; margin-left: -8.097%; display: flex; justify-content: center; align-items: center; position: relative; }
#diamond .slideimg { width: 100%; height: 100%; background-position: center; position: absolute; inset: 0; opacity: 0; background-size: cover; top: 0; left: 0; animation: slideAnime 18s infinite; }
@keyframes slideAnime { 0% { opacity: 0; } 20% { opacity: 1; } 33% { opacity: 1; } 45% { opacity: 0; } 100% { opacity: 0; }}
#diamond .slideimg:nth-of-type(1) { background-image: url('../img/dia01.jpg'); animation-delay: 0s; }
#diamond .slideimg:nth-of-type(2) { background-image: url('../img/dia02.jpg'); animation-delay: 6s; }
#diamond .slideimg:nth-of-type(3) { background-image: url('../img/dia03.jpg'); animation-delay: 12s; }
#diamond .sliding-text-container { position: absolute; top: 35%; left: -50%; right: -50%; transform: translateY(-50%); z-index: 10; overflow: hidden; height: auto; display: flex; align-items: center; justify-content: center;}
#diamond .sliding-text { white-space: nowrap; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: clamp(40px, 15vw, 160px); font-weight: 100; color: #222; animation: slideTextLeft 50s linear infinite; transform: translateX(100%);}
@keyframes slideTextLeft {  0% { transform: translateX(20%);  }  100% {  transform: translateX(-100vw); }}

/* ==================================================================================================================================================================================================================================================================================
   レスポンシブ対応（メディアクエリ）
   ================================================================================================================================================================================================================================================================================== */

/* 1050px以下：パネルの順序変更と中央配置 */
@media (max-width: 1050px) {
  .jp-title {  font-size: 30px; line-height: 60px; letter-spacing: 3px; }
  .jp-title2{  font-size: 12px; line-height: 70px; letter-spacing: 3px; }
  .en-title {  font-size: 35px; line-height: 60px; letter-spacing: 3px; }
  #top .top-bg-lottie {right: -10%; width: 200%; height: 100%; z-index: -1; pointer-events: none;}
  #top .main-title h1 { line-height: 50px; }
  #top .main-title h2 {  font-size: 12px;} 
  #top .news { font-family: noto-sans-cjk-jp, sans-serif; font-weight: 100; font-style: normal; position: absolute; bottom: 10%; left: 5%; width: 80%; background-color: #fff; border: 0.5px solid #222; border-radius: 50px; overflow: visible; z-index: 1000; cursor: pointer; }
  #top .news-container { width: 100%; height: 50px; display: flex; align-items: center; }
  #top .news-item { display: flex; align-items: center; width: 100%; height: 100%; white-space: nowrap; }
  #top .news-item-date { font-family: noto-sans-cjk-jp, sans-serif; font-weight: 100; font-style: normal; width: 100px; padding: 0 20px; font-size: 11px; font-weight: 300; text-align: center; flex-shrink: 0; color: #222; display: flex; align-items: center; justify-content: center; position: relative; }
  #top .news-item-date::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 0.5px; height: 60%; background-color: #222; }
  #top .news-icon { width: 50px; height: 50px; margin-right: 10px; transition: transform 0.3s ease; transform-origin: right center; }
  #top .tooltip { position: absolute; left: 20px; top: -150px; opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 10000; pointer-events: auto; }
  #top .tooltip-image { width: auto; height: 150px; display: block; animation: tooltip-fuwa 2.5s ease-in-out infinite; }
  @keyframes tooltip-fuwa { 0% { transform: translateY(0); } 50% { transform: translateY(-18px); } 100% { transform: translateY(0); } }
  #top .news:hover .tooltip { opacity: 1; visibility: visible; transform: translateY(-5px); }
  #top .news:hover .news-icon { transform: scale(1.5) rotate(-5deg); }
  /* スマホ用タッチ対応 */
  @media (max-width: 768px) {
    #top .news:active .tooltip { opacity: 1; visibility: visible; transform: translateY(-5px); }
    #top .news:active .news-icon { transform: scale(1.5) rotate(-5deg); }
  }
  #top .news-item-content { width: 100%; height: 100%; overflow: hidden; position: relative; }
  #top .news-text { display: inline-block; white-space: nowrap; animation: news-scroll 30s linear infinite; font-size: 12px; font-weight: 300; line-height: 50px; padding-right: 50px; color: #222; }
  @keyframes news-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
  .slide-item.slide-in { animation: slideDown 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
  .slide-item.slide-out { animation: slideUp 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
  @keyframes slideDown { 0% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: translateY(0); } }
  @keyframes slideUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(100%); } }
  #about_index .title-lines h2 {font-size: 26px;line-height: 55px; padding-left: 15px; }
#about_index .text-lines .line { font-size: 13px; line-height: 30px; width: 95%; margin: 0 auto;}
  #service_index .images-container {max-width: 700px; height: 400px; padding: 0px 0px 0px 0px; box-sizing: border-box; margin: 0 auto; transform: translateZ(0); }
  #service_index .container .text-area { padding: 0px 0px 30px 0px; }
  #service_index .container .text-area p{ font-size: 13px; }
  
  .service-content-wrapper { flex-direction: column; gap: 0px;align-items: center; }
  #service_index .service-content-wrapper { gap: 40px; }
  #service_index .service-menu-item { flex: 1 1 0; padding: 20px 0px; }
  .images-container { order: -1; margin-bottom: 20px;}
  .text-area {order: 1; text-align: center; width: 100%; max-width: 600px;}
  #service_index .service-menu-divider { height: 300px; margin: 1px 0; }
  /* スライディングテキストの文字サイズ調整 */
  #diamond .sliding-text-container { top: 25%;}
  #diamond .grid-container { width: 95%; }
  #diamond .sliding-text {font-size: clamp(45px, 14vw, 80px); }
}
/* ==================================================================================================================================================================================================================================================================================
   レスポンシブ対応（メディアクエリ）
   ================================================================================================================================================================================================================================================================================== */

/* 768px以下：モバイル対応と中央配置 */
@media (max-width: 768px) {
  .br-pc { display: none; }
  .br-sp { display: block; }
  #top { height: 90vh; position: relative; }
  #top .main-title {left: 5%; top: 30%; }
  #top .main-title h1 { font-size: 20px; margin: 0 0 18px 0; line-height: 35px; letter-spacing: 1.2px;}
  #top .main-title h2 { font-size: 10px; color: #222; margin: 0; line-height: 0; letter-spacing: 1px }
  #top .tooltip { position: absolute; left: 20px; top: -100px; opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 10000; pointer-events: auto; }
  #top .tooltip-image { width: auto; height: 100px; display: block; animation: tooltip-fuwa 2.5s ease-in-out infinite; }
  #top .news {width: 85%; bottom: 10%; left: 5%; }
  #top .news-container { height: 40px; }
  #top .news-item-date {font-size: 10px; padding: 0 10px 0 0px; }
  #top .news-item-date::after {height: 50%; }
  #top .news-icon {width: 35px; height: 35px; margin-right: 5px; }
  #top .news-text { font-size: 12px; line-height: 40px; }
  #about_index {padding: 100px 0; margin: 30px 0 0 0; position: relative; z-index: 1; color: #222; }
#about_index .title-lines h2 {font-size: 25px;line-height: 45px; padding: 0 0 0 30px;}
#about_index .text-lines .line { font-size: 13px; line-height: 26px; width: 95%; margin: 0 auto;}
#about_index .title-lines {margin-bottom: 20px;}
  #works_index {padding: 100px 0 100px;}
    #service_index { margin: 0; padding: 100px 0 50px; position: relative;}
#service_index .service-menu-divider { display: none; }
#service_index .service-bg-lottie { position: absolute; top: -300px; left: 50%; transform: translateX(-50%); width: 200vw; height: 100%; z-index: -1; pointer-events: none; opacity: 0.1 !important; }
#service_index .images-container {max-width: 95%; height: 200px; padding: 0px 0px 0px 0px; box-sizing: border-box; margin: 0 auto; transform: translateZ(0); }
#service_index .text-area { width: 95%;}
#service_index .service-menu {padding: 30px 0;}
#service_index .service-menu-item { padding: 0px 0 0 0px;}
#service_index .service-menu-item h4 { margin-top: 40px; font-size: 22px; margin-bottom: 10px;}
#service_index .service-menu-item li { font-size: 13px; padding: 0px 0; line-height: 26px;}
#service_index .container .text-area { padding: 0px 0px 0px 0px;}
#service_index .container .text-area p { font-size: 13px;line-height: 28px;}
#service_index .service-menu-item li {font-size: 12px;}
#service_index .service-menu-divider { height: 20px; margin: 20px 0 0px; }
#service_index .service-menu::before {width: 80%; left: 50%; transform: translateX(-50%); margin: 0 auto;  height: 1px; background-color: #891333; opacity: 0.1;}
#service_index .container .text-area h3 {line-height: 0;margin: 5px 0 30px 0;}
  .loading-lottie { height: 100vh; height: 100dvh; min-height: -webkit-fill-available; align-items: center; }
  .loading-lottie-content { width: 30vw; height: 30vw; max-width: 200px; max-height: 200px; }
  #diamond .sliding-text { font-size: clamp(35px, 13vw, 100px); }
  #diamond .sliding-text-container { top: 35%;}
  #diamond .grid-container {width: 99%; margin: 0 auto; padding: 150px 0 100px;}
/*=================================================================*/
#diamond .diamond-s { width: 22.388%; height: 22.388%; }
#diamond .diamond-m { width: 27.014%; height: 27.014%; }
#diamond .diamond-l { width: 33.731%; height: 33.731%; }
#diamond .diamond02 { display: none; }
#diamond .diamond03 { margin-top: -17.313%; margin-left: -10.746%; }
#diamond .diamond04 { margin-top: 0.149%; margin-left: -16.417%; }
#diamond .diamond05 { margin-top: -19.402%; margin-left: -21.94%; }
#diamond .diamond06 { margin-top: -8.805%; margin-left: -12.985%; }
#diamond .diamond07 { margin-top: -14.925%; margin-left: -10.895%; }

#diamond .diamond-link { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; }
  /* サービスメニューの縦並び */
  .service-menu {flex-direction: column; gap: 24px;  }
  .service-menu-item {  width: 100%;  }
  /* サービスコンテンツの調整 */
  .service-content-wrapper { gap: 30px; margin-bottom: 40px; }
  .text-area { max-width: 100%; text-align: center; }
  .lottie-peek-container {
    /* サイズ設定 */
    width: 20%;
    height: 20%;
    aspect-ratio: 1 / 1;
    
    /* 位置設定 */
    position: absolute;
    top: 56%;        /* 上からの距離（px, %, vh等で指定可能） */
    left: 2%;         /* 左からの距離（px, %, vw等で指定可能） */
    right: auto;       /* 右からの距離（使用する場合はleftをautoに） */
    bottom: auto;      /* 下からの距離（使用する場合はtopをautoに） */
    transform: scale(0.7) translateY(-40%);  /* スケールと移動 */
    opacity: 1;
    z-index: 5;
}

}

/*2025秋用デコレーション*/
#top .autumn-top {width: 40%;position: absolute;bottom: 20%;left: 42%;right: 0;z-index: 0;opacity: 0.8;max-width: 550px;}
#top .autumn-top img {width: 100%;height: auto;}
@media screen and (min-width:768px) and ( max-width:1050px) {#top .autumn-top { width: 54%;bottom: 20%;left: 24%;}}
@media screen and (min-width:451px) and (max-width:768px) {#top .autumn-top { width: 60%;bottom: 32%;left: 4%;}}
@media screen and (max-width: 450px) {#top .autumn-top { width: 64%;bottom: 24%;left: 2%;}}
#about_index .autumn-about {width: 22%;position: absolute;bottom: 3.5%;left: 15%;right: 0;z-index: 0;opacity: 0.8;max-width: 275px;}
#about_index .autumn-about img {width: 100%;height: auto;}
@media screen and (min-width:768px) and ( max-width:1050px) {#about_index .autumn-about { width: 22%;bottom: 3.5%;left: 10%;}}
@media screen and (min-width:451px) and (max-width:768px) {#about_index .autumn-about { width: 28%;bottom: 3.5%;left: 2%;}}
@media screen and (max-width: 450px) {#about_index .autumn-about { width: 32%;bottom: 3.5%;left: 0;}}
#service_index .autumn-service {width: 12%;position: absolute;top: 10%;left: 30%;right: 0;z-index: 0;opacity: 0.9;max-width: 175px;}
#service_index .autumn-service img {width: 100%;height: auto;}
@media screen and (min-width:768px) and ( max-width:1050px) {#service_index .autumn-service { width: 14%;top: 38%;left: 64%;}}
@media screen and (min-width:451px) and (max-width:768px) {#service_index .autumn-service { width: 12%;top: 22%;left: 66%;}}
@media screen and (max-width: 450px) {#service_index .autumn-service { width: 16%;top: 22%;left: 72%;}}
#diamond .autumn-bottom {width: 48%;position: absolute;bottom: 0%;left: -12.5%;right: 0;z-index: 0;opacity: 0.9;max-width: 500px;}
#diamond .autumn-bottom img {width: 100%;height: auto;}
@media screen and (min-width:768px) and ( max-width:1050px) {#diamond .autumn-bottom { width: 44%;bottom: 0%;left: -2.5%;}}
@media screen and (min-width:451px) and (max-width:768px) {#diamond .autumn-bottom { width: 42%;bottom: 0%;left: -0.5%;min-width: 225px;}}
@media screen and (max-width: 450px) {#diamond .autumn-bottom { width: 48%;bottom: 0%;left: 0;}}