@charset "utf-8";
/* CSS Document */

*{margin: 0;padding: 0;box-sizing: border-box;}
html{overflow-x: hidden; /* 兜底做法 */}    

body{
  min-width: 320px;
  margin: 0 auto;
  font-family:"Noto Sans JP Local","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip; /* 现代浏览器 */
  /* background-color: var(--neutral-color-4); */
  /* box-shadow: var(--theme-shadow); */
}
.serif{
  font-family:"Noto Serif JP Local","Hiragino Mincho ProN","Yu Mincho","MS Mincho",serif;
}

/* ===== Design tokens（集中管理间距与颜色） ===== */
:root{
  /*         
  主色（Primary Color）: 是品牌或设计的核心颜色，用于最重要的元素。例如：Logo、按钮、标题。
  副色（Secondary Color）: 辅助主色，通常用于强调或对比。例如：边框、标签、次级按钮。
  辅助色（Accent Color）: 用于吸引注意力或提供互动提示。例如：警告、成功提示或错误信息。
  */
  /* 主色 */
  --primary-color-01: #134b0d;
  --primary-color-02: #4daf34;
  --primary-color-03: #cff3c9;
  /* 次色 */
  --secondary-color-01: #f79525;
  --secondary-color-02: #ffff9f;
  --secondary-color-03: #f7f4d8;
  /* 强调色 */
  --accent-color-01: #835d4e;
  --accent-color-02: #;
  --accent-color-03: #;
  --accent-color-04: #;
  /* 其他配色 */
  --neutral-color-1: #1b1b1b;
  --neutral-color-2: #333;
  --neutral-color-3: #919191;
  --neutral-color-4: #e6e6e6;
  --neutral-color-5: #eee;
  /* --neutral-color-6: #f3f3f3; */
  --neutral-color-6: #fff;

  --background-color: #ecf0f1; /* 背景色 */
  --text-color: #2c3e50; /* 文字色 */
  --main-color: #3498db; /* 主色 */
  --hover-color: #2980b9; /* 悬停色 */

  --btn-mail:#3483f8; --btn-mail-hover:#2363c2;
  --btn-tel:#f89034;  --btn-tel-hover:#c7752d;
  --btn-line:#00c300; --btn-line-hover:#009000;

  --theme-shadow:0 8px 32px rgba(0,0,0,.15);
  --theme-drop-shadow: drop-shadow(0px 8px 32px rgba(0,0,0,.15)); /* 根据图形的形状来添加阴影 */
  --theme-border:1px solid #e6e6e6;
  --theme-border-radius: 16px;

  /* 容器最大宽度：对齐 8px 网格 */
  --container-sm: 384px;   /* 24rem, 常见手机内容宽 */
  --container-md: 752px;   /* 48rem, 平板/窄桌面 */   
  --container-lg: 1120px;  /* 70rem, 常见内容宽 */

  --size-48: 48px;
  --size-40: 40px;
  --size-36: 36px;
  --size-32: 32px;
  --size-28: 28px;
  --size-24: 24px;
  --size-22: 22px;
  --size-20: 20px;
  --size-16: 16px;
  --size-14: 14px;

  --spacing-80: 80px;
  --spacing-64: 64px;
  --spacing-48: 48px;
  --spacing-40: 40px;
  --spacing-32: 32px;
  --spacing-24: 24px;
  --spacing-20: 20px;
  --spacing-16: 16px;
  --spacing-12: 12px;
  --spacing-8: 8px;

  /* linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)) */
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
  :root {
    /* Mobile scaling only: 320–768 (750 → 375 design consistency) */
    /* calc(minV + (maxV - minV) * ((100vw - minW) / (maxW - minW))) */
    /* calc(12px + (20 - 12) * ((100vw - 320px) / (768 - 320))); */
    --size-48: calc(48px + 8 * ((100vw - 320px) / 448)); /* 320px时 48px; 768px时 56px */
    --size-40: calc(40px + 8 * ((100vw - 320px) / 448)); /* 320px时 40px; 768px时 48px */
    --size-36: calc(36px + 8 * ((100vw - 320px) / 448)); /* 320px时 36px; 768px时 44px */
    --size-32: calc(32px + 8 * ((100vw - 320px) / 448)); /* 320px时 32px; 768px时 40px */
    --size-28: calc(28px + 8 * ((100vw - 320px) / 448)); /* 320px时 28px; 768px时 36px */
    --size-24: calc(24px + 8 * ((100vw - 320px) / 448)); /* 320px时 24px; 768px时 32px */
    --size-22: calc(22px + 8 * ((100vw - 320px) / 448)); /* 320px时 22px; 768px时 28px */
    --size-20: calc(20px + 8 * ((100vw - 320px) / 448)); /* 320px时 20px; 768px时 28px */
    --size-16: calc(16px + 8 * ((100vw - 320px) / 448)); /* 320px时 16px; 768px时 24px */
    --size-14: calc(14px + 6 * ((100vw - 320px) / 448)); /* 320px时 14px; 768px时 20px */

    --spacing-80: calc(80px + 80 * ((100vw - 320px) / 448)); /* 320px时 80px; 768px时 128px */
    --spacing-64: calc(64px + 64 * ((100vw - 320px) / 448)); /* 320px时 64px; 768px时 128px */
    --spacing-48: calc(48px + 48 * ((100vw - 320px) / 448)); /* 320px时 48px; 768px时 96px */
    --spacing-40: calc(40px + 40 * ((100vw - 320px) / 448)); /* 320px时 40px; 768px时 80px */
    --spacing-32: calc(32px + 32 * ((100vw - 320px) / 448)); /* 320px时 32px; 768px时 64px */
    --spacing-24: calc(24px + 24 * ((100vw - 320px) / 448)); /* 320px时 24px; 768px时 48px */
    --spacing-20: calc(20px + 20 * ((100vw - 320px) / 448)); /* 320px时 20px; 768px时 50px */
    --spacing-16: calc(16px + 16 * ((100vw - 320px) / 448)); /* 320px时 16px; 768px时 32px */
    --spacing-12: calc(12px + 12 * ((100vw - 320px) / 448)); /* 320px时 12px; 768px时 24px */
    --spacing-8: calc(8px + 8 * ((100vw - 320px) / 448)); /* 320px时 8px; 768px时 16px */
  }
}

h1,h2,h3,h4,h5{font-weight: 800;line-height: 1.4;}
h1{font-size: var(--size-40);}
h2{font-size: var(--size-36);}
h3{font-size: var(--size-32);}
h4{font-size: var(--size-28);}
h5{font-size: var(--size-24);}
h6{font-size: var(--size-20);}
p{font-size: var(--size-16);}
.note{font-size: var(--size-14);margin-top: var(--spacing-8);}

ul{list-style:none;}
a{
  border: none;
  outline: none;
  box-shadow: none;
  text-decoration: none; /* 去除下划线 */
  color: inherit;        /* 继承父元素的字体颜色 */
  background: none;      /* 去除背景 */
}
a:hover,
a:focus{
  color: inherit;         /* 鼠标悬停或聚焦时也继承父元素的字体颜色 */
  text-decoration: none;  /* 鼠标悬停或聚焦时去除下划线 */
}
/* 完全去掉 <button> 元素的默认样式 */
button{
  background: none;   /* 去除背景 */
  border: none;       /* 去除边框 */
  padding: 0;         /* 去除内边距 */
  margin: 0;
  font: inherit;      /* 继承字体样式 */
  color: inherit;     /* 继承字体颜色 */
  cursor: pointer;    /* 添加鼠标指针样式 */
  outline: inherit;   /* 继承轮廓样式 */
}


picture{width: 100%;display: block;}
img{width:100%;max-width:100%;height:auto;display:block;}
.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
}


table {width: 100%;border-collapse: collapse;}
th, td {
  padding: var(--spacing-12) var(--spacing-8);
  vertical-align: middle;
  border: var(--border-md)
}


.u-font-size--small{font-size: 70%;}
.u-font-size--middle{font-size: 110%;}
/* .u-font-size--middle{font-size: 120%;} */
.u-font-size--large{font-size: 140%;}

.u-marker-light{background: linear-gradient(transparent 60%, #feff93 0%);}
.u-marker-midtone{background: linear-gradient(transparent 60%, #cc7c20 0%);}
.u-marker-dark{background: linear-gradient(transparent 60%, #0c5a8c 0%);}

@media screen and (max-width: 576px) {.u-show--mobile-only {display: none;}}
@media screen and (min-width: 577px) {.u-show--desktop-only {display: none;}}

.section{width: 100%;padding: var(--spacing-40) 0;}

.container{width: 100%;margin: 0 auto;padding: 0 var(--spacing-16);}
.container--small{max-width: var(--container-sm);}
.container--middle{max-width: var(--container-md);}
.container--large{max-width: var(--container-lg);}
.container--full{max-width: var(--container-lg);}

/* ===== Block: reversed ===== */
.reversed{direction: rtl;}
.reversed > *{direction: ltr;} /* 防止文本也变成 RTL */

/* ===== Block: grid ===== */
.grid{display: grid;gap: var(--spacing-16);}
.grid--2{grid-template-columns: repeat(2, 1fr);}
.grid--2-1{grid-template-columns: 2fr 1fr; /* 2/3 : 1/3 */}
.grid--2-2{grid-template-columns: 1fr 1fr;grid-template-rows: 1fr 1fr;}
.grid--2-2__main{grid-row: span 2;}
/* .grid--2-2__secondary{} */
/* .grid--2-2__tertiary{} */
.grid--3{grid-template-columns: repeat(3, 1fr);}

/* ===== Block: flex ===== */
.flex--between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto; /* 让按钮具有弹性空间分布，自动调整宽度。 */
    gap:var(--spacing-16);
}

.flex__align--start {
    display: flex;
    align-items: flex-start;
    gap:var(--spacing-16);
}

.flex__align--center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap:var(--spacing-16);
}

/* ===== Block: outside ===== */
.outside__back{
  padding-top: 0;
  padding-bottom: 24px;
  margin-top: 104px;
}
/* 左列：列表面板 */
.outside__panel--content{
  max-height: 280px;
  overflow: hidden;
}
/* 右列：媒体块 */
.outside__panel--media{
  overflow:visible;            /* 允许蓝块上方露出 */
  flex:0 0 60%;
  inline-size:60%;
  aspect-ratio: 600 / 500;
  transform:translateY(-40px); /* 向上越界的距离 */
  position:relative;
  z-index:1;                   /* 压在红条之上 */
  /* flex-shrink:0;
  display:grid;
  place-items:center; */
}

/* ===== Block: overlap ===== */
/* 左列：列表面板 */
.overlap__panel--content{
  position:relative;
  z-index:1;
  max-height: 280px;
  overflow: hidden;
}
/* 右列：媒体块 */
.overlap__panel--media{
  flex:0 0 60%;
  inline-size:60%;
  aspect-ratio: 260 / 200;
  margin-left:-10%;        /* 负外边距实现叠压 */
  overflow:hidden;
}
.reversed .overlap__panel--media{
  margin-left:0;
  margin-right:-10%;
}

/* ===== Block: stacked ===== */
.stacked{
    align-items: flex-end;
}
/* 左列：列表面板 */
.stacked__panel--content {
    overflow:visible; 
    flex:0 0 60%;
    inline-size:60%;
    margin-left:-70%;
    transform:translateY(40px);
    position: relative;
    z-index: 1;
    /* flex-shrink:0;
    display:grid;
    place-items:center; */
}
.reversed .stacked__panel--content{
    margin-left:0;
    margin-right:-70%;
}
/* 右列：媒体块 */
.stacked__panel--media {
    flex:0 0 90%;
    inline-size:90%;
    aspect-ratio: 260 / 160;
    overflow: hidden;
}
.stacked__text{
    padding: 24px 16px 16px;
}
.stacked__tag {
    width: 96px;
    height: 96px;
    padding: 16px;
    margin-left: auto;
    margin-bottom: -24px;
    position: relative;
    z-index: 1;
}
.reversed .stacked__tag {
    margin-left: 0;
    margin-right: auto;
}

@media only screen and (max-width: 1200px) {
  .container--large{max-width: var(--container-md);}
  .grid--3:has(> :last-child:nth-child(even)) {grid-template-columns:repeat(2,1fr);} /* 双数 */
}
@media only screen and (max-width: 768px) {
  .container--small{max-width: var(--container-md)}
  .grid--2,
  .grid--2-1{grid-template-columns: 1fr;}
  .grid--2-2{grid-template-columns: 1fr;grid-template-rows: repeat(3, 1fr);}
  .grid--2-2__main{grid-row: span 1;}
  .grid--3{grid-template-columns: 1fr;}
  .grid--3:has(> :last-child:nth-child(odd)) {grid-template-columns:1fr;} /* 单数 */

  .outside__back{padding-bottom: 80px;}
  .outside__container{flex-direction:column;gap:var(--spacing-24);}
  .outside__back .outside__container{gap: 0;}

  .outside__panel--content,
  .overlap__panel--content{order:2;}

  .outside__panel--media,
  .overlap__panel--media{order:1;flex: 1;inline-size:100%;}
  
  .overlap__panel--media{ margin:0; }
  .reversed .overlap__panel--media{ margin:0; }
}
@media only screen and (max-width: 576px) {
  .container--small{max-width: 100%}
  .grid--3:has(> :last-child:nth-child(even)) {grid-template-columns:1fr;} /* 双数 */

  .stacked{
      align-items: flex-start;
  }
  .stacked__panel--content {
      flex:0 0 90%;
      inline-size:90%;
      margin-left:-90%;
      transform:translateY(120px);
  }
  .reversed .stacked__panel--content{
      margin-left:0;
      margin-right:-90%;
  }
  .stacked__panel--media {
      overflow: visible;
  }
}



/* 淡入动画样式 */
.fade-in{
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.is-shown{opacity: 1;transform: translateY(0);}
/* 动画延迟类 */
.delay-200{transition-delay: 0.2s;}
.delay-400{transition-delay: 0.4s;}
.delay-600{transition-delay: 0.6s;}
.delay-800{transition-delay: 0.8s;}
.delay-1000{transition-delay: 1s;}
.delay-1200{transition-delay: 1.2s;}


























/* CTA */
/* .approach__cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px;
  background-color:#000;
  text-align:center;
  box-shadow:16px 32px 64px rgba(0,0,0,.5);
  color:#fff;
}
.approach__cta:hover{ filter:brightness(1.05); }
.approach__cta:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
  border-radius:4px;
}
.approach__cta > span{ flex:1 1 auto; display:block; } */


.btn--link {
    width: 100%;
    padding: 16px;
    border-radius: 4px;
    background-color: #007bff;
    transition: transform 0.3s, background-color 0.3s;
    will-change: transform;
}
.btn--link:hover {
    background-color: #0056b3;
    transform:translateY(0);
}
.btn--link:active {
    background-color: #003580;
    transform:translateY(-2px);
}
.btn--link:focus-visible{
    outline:2px solid #0000;
    box-shadow:var(--theme-shadow);
}
/* 动画减少：尊重系统设置 */
@media (prefers-reduced-motion: reduce){
    .btn--link{transition:none; transform:none !important;}
}
.btn--mail{background:var(--btn-mail);}
.btn--tel{ background:var(--btn-tel);}
.btn--line{background:var(--btn-line);}
.btn--mail:hover{background:var(--btn-mail-hover);}
.btn--tel:hover{ background:var(--btn-tel-hover);}
.btn--line:hover{background:var(--btn-line-hover);}

.btn--icon,
.btn--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color:#fff;
}
.btn--icon-svg{
    width:24px; 
    height:24px;
    display:inline-block;
    vertical-align:-.125em;
    fill:currentColor;
}
.btn--text{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex: 1;
    color:#fff;
}
.btn--text-left{
    align-items: flex-start;
}

@media only screen and (max-width: 1024px) {
    .hidden--text,.hidden--arrow{display:none;}
}

/* 光束效果 START */
/* .light-beam-container{
    display: block;
    width: 100%;
} */
/* 伪元素，用于创建光束效果 */
.light-beam{
  /* display: inline-block; */
  cursor: pointer;
	position: relative;
	overflow: hidden; /* 溢出内容隐藏，用于裁剪伪元素 */
}
.light-beam::before{
	content: "";
	position: absolute;
	top: 50%;
	left: -100%;
	/* z-index: 2; */
	display: block;
	transform: translate(-50%, -50%) rotate(45deg); /* 位移和旋转，创建斜角效果 */
	width: 50%; /* 光束宽度 */
	height: 600%; /* 光束高度 */
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%); /* 线性渐变，创建光束效果  */
	opacity: 0; /* 初始不可见 */
	animation: lightBeam 2s ease-out infinite; /* 光束动画，1.5秒，渐出，无限循环 */
}
/* 光束动画关键帧 */
@keyframes lightBeam{
    0%{opacity: 0;left: -50%;}
    50%{opacity: 1;left: 100%;}
    100%{opacity: 0;left: 100%;}
}
/* 光束效果 END */







































.img-container{max-width: 1920px;margin: 0 auto;}
/* PC端样式（宽度大于1200px） */
@media only screen and (min-width: 1201px) {
    .pc_img{width: 100%;height: auto;margin: 0 auto;text-align: center;}
    .pc_fv_medium {display: none;}
    .sp_img {display: none;}
}
/* 平板样式（宽度在769px至1200px之间） */
@media only screen and (max-width: 1200px) and (min-width: 769px) {
    .pc_fv_medium{width: 100%;height: auto;margin: 0 auto;}
    .pc_img {display: none;}
    .sp_img {display: none;}
}
/* 移动端样式（宽度小于等于768px） */
@media only screen and (max-width: 768px) {
    .pc_img {display: none;}
    .pc_fv_medium {display: none;}
    .sp_img {width: 100%;height: auto;margin: 0 auto;}
}