@charset "UTF-8";

/* =====================================================
  COMPANY PAGE – MYTHOS
===================================================== */

.page-company{
  background:#fff;
  color:#111;

  /* ★VIPと同じ“質感”へ統一（全ページMV共通ルール） */
  --mv-filter: brightness(1) contrast(1.02) saturate(1.02);

  /* ★限りなく透明に近いハイライト幕（濁り防止） */
  --mv-highlight: rgba(255,255,255,.06);
}

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

.company-mv{
  position:relative;
  overflow:hidden;
  background:#000;
}

.company-mv__media{
  width:100%;
  height:clamp(420px,60vh,680px);
}

@supports (height:1svh){
  .company-mv__media{ height:clamp(420px,60svh,680px); }
}
@supports (height:1dvh){
  .company-mv__media{ height:clamp(420px,60dvh,680px); }
}

.company-mv__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;

  /* ★VIPと同じ質感へ（暗くしない／元画像を活かす） */
  filter: var(--mv-filter);

  transform:translateZ(0) scale(1.01);
  will-change: transform, filter;
}

/* ★“ほぼ透明”のハイライト幕でリッチ感だけ足す */
.company-mv__overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    var(--mv-highlight),
    rgba(255,255,255,0)
  );
  mix-blend-mode: screen;
  opacity: .9;
  pointer-events:none;
}

.company-mv__inner{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
}

.company-mv__title{
  margin:0;
  font-family:var(--font-en,"Cinzel",serif);
  font-size:clamp(28px,3.2vw,42px);
  letter-spacing:.22em;
  font-weight:400;
  color:rgba(255,255,255,.94);
  text-shadow:0 18px 45px rgba(0,0,0,.55);
}

/* =====================================================
  BODY
===================================================== */

.company-message{
  background:#fff;
  padding:120px 0 150px;
}

.company-message__inner{
  max-width:1320px;
  margin:0 auto;
  padding:0 40px;
  display:grid;
  grid-template-columns:minmax(260px,460px) 1fr;
  gap:90px;
  align-items:center;
}

.company-message__brand{
  display:flex;
  justify-content:flex-start;
  align-items:center;
}

/* =====================================================
  LOGO REVEAL
===================================================== */

.company-message__logo{
  width:100%;
  max-width:420px;
  height:auto;
  display:block;

  opacity:0;
  transform:translate3d(0,24px,0);
  filter:blur(6px);

  transition:
    opacity var(--dur-3,1600ms) var(--ease-out,cubic-bezier(.16,1,.30,1)),
    transform var(--dur-3,1600ms) var(--ease-out,cubic-bezier(.16,1,.30,1)),
    filter var(--dur-3,1600ms) var(--ease-out,cubic-bezier(.16,1,.30,1));
}

.js-reveal.is-inview .company-message__logo{
  opacity:1;
  transform:none;
  filter:none;
}

/* =====================================================
  TEXT REVEAL
===================================================== */

.company-message__text .reveal-item{
  opacity:0;
  transform:translate3d(0,28px,0);
  filter:blur(6px);

  transition:
    opacity var(--dur-3,1600ms) var(--ease-out,cubic-bezier(.16,1,.30,1)),
    transform var(--dur-3,1600ms) var(--ease-out,cubic-bezier(.16,1,.30,1)),
    filter var(--dur-3,1600ms) var(--ease-out,cubic-bezier(.16,1,.30,1));
}

.company-message__text.js-reveal.is-inview .reveal-item{
  opacity:1;
  transform:none;
  filter:none;
}

/* =====================================================
  TEXT STYLE
===================================================== */

.company-message__text{
  position:relative;

  /* ★フォント統一（base.css の var(--font-jp) に合わせる） */
  font-family: var(--font-jp);

  font-size:15px;
  line-height:2.5;
  letter-spacing:.08em;
  color:rgba(0,0,0,.82);
  white-space:normal;
  word-break:normal;
  overflow-wrap:break-word;
}

.company-message__text p{
  margin:0 0 30px;
}

.company-message__text p:last-child{
  margin-bottom:0;
}

.company-message__text::after{
  content:"MYTHOS";
  position:absolute;
  right:-20px;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--font-en,"Cinzel",serif);
  font-size:clamp(80px,10vw,160px);
  letter-spacing:.04em;
  color:rgba(0,0,0,.028);
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}

/* =====================================================
  Responsive
===================================================== */

@media (max-width:860px){

  .company-message{
    padding:90px 0 120px;
  }

  .company-message__inner{
    grid-template-columns:1fr;
    gap:40px;
    padding:0 18px;
    text-align:center;
    align-items:start;
  }

  .company-message__brand{
    justify-content:center;
  }

  .company-message__logo{
    max-width:360px;
  }

  .company-message__text{
    width:100%;
    max-width:720px;
    margin:0 auto;
    text-align:left;
  }

  .company-message__text::after{
    display:none;
  }
}

@media (max-width:480px){
  .company-message__text{
    font-size:14px;
    line-height:2.3;
  }
}

/* =====================================================
  Reduced Motion
===================================================== */

@media (prefers-reduced-motion:reduce){
  .company-message__logo,
  .company-message__text .reveal-item{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
}