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

/* ============================================================
    全局变量 & 基础重置
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html{overflow-x: hidden; /* 兜底做法 */scroll-behavior: smooth;}    

/* ===== Design tokens（集中管理间距与颜色） ===== */
:root{
  /* 容器最大宽度：对齐 8px 网格 */
  --container-sm: 384px;   /* 24rem, 常见手机内容宽 */
  --container-md: 752px;   /* 48rem, 平板/窄桌面 */   
  --container-lg: 1120px;  /* 70rem, 常见内容宽 */

  --neutral-color-01: #1b1b1b;
  --neutral-color-02: #333;
  --neutral-color-03: #919191;
  --neutral-color-04: #b8b8b8;
  --neutral-color-05: #eee;
  --neutral-color-06: #f5f5f5;
}

body{
    min-width: 320px;
    margin: 0 auto;
    background-color: var(--neutral-color-01);
    color: var(--neutral-color-06);
    /* font-family:"Noto Sans JP Local","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif; */
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1.6;
    overflow-x: clip; /* 现代浏览器 */
    /* 隐藏默认鼠标：我们会自己画一个 */
    cursor: none;
}
/*
.outfit-<uniquifier> {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/

a{
  border: none;
  outline: none;
  box-shadow: none;
  text-decoration: none; /* 去除下划线 */
  color: inherit;        /* 继承父元素的字体颜色 */
  background: none;      /* 去除背景 */
}
a:hover,
a:focus{
  color: inherit;         /* 鼠标悬停或聚焦时也继承父元素的字体颜色 */
  text-decoration: none;  /* 鼠标悬停或聚焦时去除下划线 */
}

picture{width: 100%;display: block;}
img{width:100%;max-width:100%;height:auto;display:block;}

.section{
  width: 100%;
  padding: 64px 0;
  display: grid;
  gap: 64px;
}

.container{
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  gap: 32px;
}
.container--small{max-width: var(--container-sm);}
.container--middle{max-width: var(--container-md);}
.container--large{max-width: var(--container-lg);}

/* .section{background-color: rgba(255, 0, 0, .3);}
.container{background-color: rgba(0, 0, 255, .3);}
.wrapper{background-color: rgba(255, 255, 0, .3);width: 100%;}
.content{background-color: rgba(255, 0, 255, .3);width: 100%;min-height: 200px;} */

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

/* ===== Block: grid ===== */
.grid{display: grid;gap: 32px;}
.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);}
.grid--5{grid-template-columns: repeat(5, 1fr);}

@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{padding: 0 16px;}
  .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;} /* 单数 */
  .grid--5{grid-template-columns: repeat(2, 1fr);}
}
@media only screen and (max-width: 576px) {
  .container--small{max-width: 100%;}
  .grid--3:has(> :last-child:nth-child(even)) {grid-template-columns:1fr;} /* 双数 */
}
@media only screen and (max-width: 425px) {
  .grid--5{grid-template-columns: 1fr;}
}

/* ===== btn ===== */
.button-wrapper{display: flex;align-items: center;justify-content: flex-start;gap: 24px;}
.button {
    display: inline-flex; /* 关键修改：从 flex 改为 inline-flex */
    align-items: center;
    justify-content: center;
    /* justify-content: space-between; */
    padding: 8px 40px;
    border-radius: 999px;
    background: linear-gradient(135deg, #F64275 0%, #FBBF3E 100%);
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
    will-change: transform;
    /* cursor: pointer; */
    color: #fff !important;
}
.button:hover {
    /* background-color: #ac0000; */
    transform: translateY(-2px);
    /* filter:brightness(1.05); */
}
.button:active {
    /* background-color: #003580; */
    transform:translateY(-2px);
}
.button:focus-visible{
    outline:2px solid var(--neutral-color-01);
    outline-offset:2px;
    border-radius:4px;
    box-shadow:var(--theme-shadow);
}
/* 动画减少：尊重系统设置 */
@media (prefers-reduced-motion: reduce){
    .button{transition:none; transform:none !important;}
}