@charset "UTF-8";

/* =====================================================
  ABOUT FINAL（single MV 完全版）
===================================================== */

:root{
  --cs-left:var(--cs-header-pad-x);

  --s:8px;
  --m:13px;
  --l:21px;
  --xl:34px;
  --xxl:55px;
  --xxxl:89px;
}

.cs-about{
  padding-top:var(--cs-header-h);
  background:#fff;
  color:#333;
}

/* =====================================================
  MV
===================================================== */

.cs-about__mv{
  width:100%;
  margin:0 0 30px 0;
  background:#fff;
}

.cs-about__mv-single{
  position:relative;
  width:100%;
  padding-left:var(--cs-left);
  padding-right:var(--cs-left);
  box-sizing:border-box;
}

.cs-about__mv-single::after{
  content:"";
  position:absolute;
  top:0;
  left:var(--cs-left);
  right:var(--cs-left);
  bottom:0;
  background:rgba(255,255,255,.04);
  pointer-events:none;
}

.cs-about__mv-single img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;

  filter:
    grayscale(1)
    contrast(1.06)
    brightness(.95);
}

/* =====================================================
  INNER
===================================================== */

.cs-about__inner{
  padding:0 0 var(--xxxl);
}

.cs-about__hero,
.cs-about__definition,
.cs-about__statement{
  margin-left:var(--cs-left);
  max-width:620px;
}

/* =====================================================
  HERO
===================================================== */

.cs-about__hero{
  margin-bottom:40px;
}

.cs-about__eyebrow{
  margin:0 0 var(--m);
  font-family:"Cinzel", serif;
  font-size:11px;
  letter-spacing:.22em;
}

.cs-about__title{
  margin:0 0 12px;
  font-family:"Cormorant Garamond", serif;
  font-weight:400;
  font-size:clamp(22px, 2.4vw, 28px);
  line-height:1.22;
}

.cs-about__lead{
  font-family:"Cormorant Garamond", serif;
  font-size:15px;
  line-height:1.58;
}

/* =====================================================
  DEFINITION
===================================================== */

.cs-about__definition{
  margin-bottom:38px;
}

.cs-about__item{
  margin-bottom:26px;
}

.cs-about__word{
  margin:0 0 8px;
  font-family:"Cormorant Garamond", serif;
  font-size:13px;
  letter-spacing:.12em;
}

.cs-about__desc-en{
  margin:0 0 8px;
  font-family:"Cormorant Garamond", serif;
  font-size:13px;
}

.cs-about__desc{
  font-family:"Noto Serif JP","Yu Mincho",serif;
  font-size:13px;
  line-height:1.82;
}

/* =====================================================
  STATEMENT
===================================================== */

.cs-about__statement{
  margin-bottom:52px;
}

.cs-about__ja{
  font-family:"Noto Serif JP","Yu Mincho",serif;
  font-size:14px;
  line-height:1.92;
  margin-bottom:16px;
}

.cs-about__sign{
  margin-top:30px;
  font-family:"Cormorant Garamond", serif;
  font-size:15px;
}

/* =====================================================
  FOOTER
===================================================== */

.cs-about__footer{
  padding:34px 0;
  border-top:1px solid rgba(0,0,0,.06);
}

.cs-about__footer-inner{
  width:100%;
  padding-left:var(--cs-left);
  padding-right:var(--cs-left);

  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}

.cs-about__footer-logo img{
  width:var(--cs-header-logo-w);
  display:block;
}

.cs-about__footer-links{
  margin-left:auto;
}

.cs-about__footer-menu{
  display:flex;
  gap:30px;
  list-style:none;
  margin:0;
  padding:0;
}

.cs-about__footer-menu a{
  font-family:"Cinzel", serif;
  font-size:11px;
  letter-spacing:.18em;
  text-decoration:none;
  text-align:right;
  color:#333;
}

/* =====================================================
  SP
===================================================== */

@media (max-width:767px){

  :root{
    --cs-left:var(--cs-base-left);
  }

  .cs-about__inner{
    padding:0 0 var(--xxl);
  }

  .cs-about__mv{
    margin:0 0 26px 0;
  }

  .cs-about__hero{
    margin-bottom:34px;
  }

  .cs-about__title{
    font-size:clamp(22px, 6.8vw, 28px);
  }

  .cs-about__lead{
    font-size:14px;
    line-height:1.72;
  }

  .cs-about__definition{
    margin-bottom:34px;
  }

  .cs-about__item{
    margin-bottom:24px;
  }

  .cs-about__statement{
    margin-bottom:46px;
  }

  .cs-about__footer{
    padding:28px 0 30px;
  }

  .cs-about__footer-links{
    margin-left:0;
  }

  .cs-about__footer-menu{
    gap:18px;
    flex-wrap:wrap;
    justify-content:flex-start;
  }
}