@charset "utf-8";

/* =========================================================
   index.css (Home)  - cleaned
   目的：
   - 1セレクタ1定義（上書き合戦を止める）
   - Heroは「背景フル幅 / 中身はコンテナ」
   - 右画像は“伸びる”＝右が切れない
========================================================= */


/* =========================================================
   Section (Home)
========================================================= */
.p-section{
  padding: 40px 0;
  border-top: 1px solid rgba(0,0,0,.06);
}

.p-section__head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.p-section__title{
  margin: 0;
  font-size: 22px;
}

.p-section__link{
  font-size: 14px;
  opacity: .85;
}


/* =========================================================
   Featured grid
   ※HTMLが #featuredGrid / .featured-grid どちらでも動くように両対応
========================================================= */
:is(#featuredGrid, .featured-grid){
  width: min(1100px, 92vw);
  margin: 24px auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* カード内の画像が暴れない保険 */
:is(#featuredGrid, .featured-grid) img{
  width: 100%;
  height: auto;
  display: block;
}

/* Featuredカードの“面” */
:is(#featuredGrid, .featured-grid) > *{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .2s ease;
}

@media (hover:hover){
  :is(#featuredGrid, .featured-grid) > *:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0,0,0,.10);
  }
}


/* =========================================================
   Browse
========================================================= */
.p-browse{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.p-browseCard{
  display: block;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 16px;
  text-decoration: none;
  background: #fff;
}

.p-browseCard__title{ margin: 0 0 6px; }
.p-browseCard__text{ margin: 0; opacity: .8; }


/* =========================================================
   Hero (Home)
   - 背景：フル幅
   - 中身：コンテナ
   - 右画像：伸びる（max-width で殺さない）
========================================================= */

/* 背景フル幅（full-bleed） */
.p-hero{
  /* 余白 */
  padding: 28px 0 18px;

  /* 装飾の土台 */
  position: relative;
  isolation: isolate;
  background: #fff;

  /* full-bleed */
  width: 100%;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0;
  padding-right: 0;
}

/* 中身はコンテナ */
.p-hero__inner{
  display: grid;
  grid-template-columns: minmax(0, 520px) 1fr;
  gap: 28px;
  align-items: center;

  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 56px);

  min-height: min(62vh, 660px);
  position: relative;
  z-index: 1;
}

/* Copy */
.p-hero__kicker{
  margin: 0 0 10px;
  opacity: .75;
  font-size: 14px;
  letter-spacing: .06em;
}

.p-hero__title{
  margin: 0 0 10px;
  font-size: clamp(36px, 5vw, 58px);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.p-hero__lead{
  margin: 0 0 18px;
  max-width: 48ch;
  opacity: .85;
  line-height: 1.7;
}

.p-hero__cta{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

.p-hero__note{
  margin: 0;
  font-size: 12px;
  opacity: .65;
}

/* Media（右）: 伸びる。右が切れない */
.hero-media{
  justify-self: stretch;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
}

.hero-media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 画像に艶（overlay） */
.p-hero__visual.hero-media{
  position: relative;
    overflow: hidden;
}

.p-hero__visual.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg, rgba(255,255,255,.10), transparent 45%),
    radial-gradient(600px 360px at 20% 15%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(700px 420px at 85% 85%, rgba(0,0,0,.12), transparent 55%);
  opacity: .95;
}

/* =========================================
   Hero: media bleed to the right (PC only)
========================================= */
@media (min-width: 901px){
  .p-hero__visual.hero-media{
    /* コンテナの右余白ぶんだけ外へ出す */
    margin-right: calc(50% - 50vw);

    /* 右端まで伸ばす */
    width: calc(100% + (50vw - 50%));

    /* 右だけ角丸を消すと“端まで張ってる感”が出る（好み） */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

/* 背景グラデ */
.p-hero::before{
  content:"";
  position:absolute;
  inset:-25%;
  z-index:0;
  pointer-events:none;

  background:
    radial-gradient(900px 560px at 18% 24%, rgba(255, 244, 228, .70), transparent 62%),
    radial-gradient(860px 560px at 84% 22%, rgba(240, 246, 255, .55), transparent 60%),
    radial-gradient(900px 640px at 60% 92%, rgba(255, 236, 222, .45), transparent 62%);

  opacity: .45; /* ここが肝：薄く */
}

/* 粒子ノイズ */
.p-hero::after{
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: .08;
  mix-blend-mode: multiply;
}


/* =========================================================
   Value strip
========================================================= */
.p-strip{
  padding: 18px 0 8px;
}

.p-strip__list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
}

.p-strip__item{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: #fff;
  padding: 14px;
}

.p-strip__icon{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0,0,0,.04);
  flex: 0 0 34px;
}

.p-strip__title{
  font-weight: 800;
  margin: 0 0 2px;
}

.p-strip__text{
  margin: 0;
  font-size: 13px;
  opacity: .8;
}


/* =========================================================
   Responsive
========================================================= */
@media (max-width: 900px){
  :is(#featuredGrid, .featured-grid){
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-browse{
    grid-template-columns: 1fr;
  }

  .p-strip__list{
    grid-template-columns: 1fr;
  }

  .p-hero__inner{
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .p-hero::after{ opacity: .06; }

  :is(#featuredGrid, .featured-grid) > *:active{
    transform: translateY(-1px);
  }
}

@media (max-width: 560px){
  :is(#featuredGrid, .featured-grid){
    grid-template-columns: 1fr;
  }
}