@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital@0;1&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@600;700&display=swap");

:root{
  --bg: #f6f1e8;
  --bg-soft: #fbf8f3;
  --surface: rgba(255,255,255,.76);
  --surface-strong: #ffffff;
  --text: #2f2a26;
  --muted: #6f665d;
  --line: rgba(47,42,38,.12);
  --gold: #b79a5f;
  --gold-deep: #8d7441;
  --shadow: 0 18px 50px rgba(58, 45, 28, .10);
  --radius: 22px;
  --max: 1180px;
  --serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:
   #FBFBFB;
}

a{
  color:inherit;
  text-decoration:none;
}

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

.main-area.lp{
  color:var(--text);
}

.inner{
  width:min(100% - 32px, var(--max));
  margin-inline:auto;
}

.fv-wrap{
  position:relative;

  
  overflow:hidden;
}

.fv-area{
  background: linear-gradient(135deg, rgba(255,255,255,.74), rgba(255,255,255,.48));
  /*  
  border: 1px solid rgba(183,154,95,.18);
  box-shadow: var(--shadow);
*/
  backdrop-filter: blur(10px);
  position:relative;
}

.oshi-fv{
  padding: 34px 0;
}

.fv-text{
  max-width: 72ch;
}

.fv-copy{
  margin:0 0 14px;
  font-family:var(--serif);
  font-size: clamp(2rem, 5vw, 4.2rem);
  line-height:1.15;
  letter-spacing:.04em;
  color:var(--text);
}

.fv-lead{
  margin:0;
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.9;
}

.bg-light{
  position:relative;
  padding: 18px 0 0;
}

.bgplate,
.bgplate_sp{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.bgplate{
  background:
    radial-gradient(circle at 18% 12%, rgba(183,154,95,.10), transparent 28%),
    radial-gradient(circle at 82% 0%, rgba(47,42,38,.08), transparent 24%);
  opacity:1;
}

.bgplate_sp{
  display:none;
}

.top-area{
  position:relative;
  z-index:1;
}

.concept-area{
  padding: 26px 0 0px;
}

.concept-area .inner{
  width:100%;
  margin-inline:auto;
}

.text-area{

  padding: 20px;
  backdrop-filter: blur(10px);
}

.concept-copy{
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
  font-size: clamp(1.3rem, 2vw, 2rem);
}



.concept-copy .ta1{
  display:inline-block;
  margin-bottom: 4px;
  font-family:var(--serif);
  font-size:1.25rem;
  color:var(--text);
}

.oshi-content{
  padding-top: 20px;
}

.oshi-section{
  padding: 30px 0 68px;
}

.oshi-title{
  margin:40px 0 16px;
  font-family:var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height:1.2;
  letter-spacing:.04em;
  color:var(--text);
  text-align: center;
}

.oshi-anchor-list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 24px 0 0;
  list-style: none;
}

.oshi-anchor-list a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(47,42,38,.10);
  background: rgba(255,255,255,.82);
  font-size:1rem;
  font-weight:600;
  letter-spacing:.04em;
  transition:.25s ease;
}

.oshi-anchor-list a:hover{
  transform: translateY(-1px);
  border-color: rgba(183,154,95,.45);
  color:var(--gold-deep);
}

.oshi-anchor-list--sub{
  margin-top: 0;
}

.oshi-category{
  margin-top: 18px;
  padding: 24px;
  border-radius: var(--radius);
  border:1px solid rgba(47,42,38,.08);
  background: rgba(255,255,255,.56);
  box-shadow: 0 12px 30px rgba(0,0,0,.04);
  backdrop-filter: blur(10px);
  position:relative;
  overflow:hidden;
}

.oshi-category




.oshi-category::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:220px;
  height:220px;
  border-radius:0 0 220px 0;
  pointer-events:none;
  background: var(--accent-soft, rgba(183,154,95,.12));
}




.oshi-category h2{
  position:relative;
  z-index:1;
  margin:0;
  font-family:var(--serif);
  font-size: clamp(1.3rem, 2vw, 2rem);
  letter-spacing:.08em;
}

.oshi-viewmore{
  position:relative;
  z-index:1;
  margin: 16px 0 0;
  text-align:right;
  font-family:var(--serif);
  font-size:1rem;
  color:var(--gold-deep);
}

.oshi-product-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
  margin-top:18px;
}

.oshi-product-card{
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(47,42,38,.08);
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
  min-height:100%;
}

.oshi-product-image{
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.72), transparent 18%),
    linear-gradient(145deg, #d7c7a2, #b79a5f);
}

.oshi-product-price{
  min-height:54px;
  padding: 14px 16px 16px;
  color: var(--muted);
  border-top:1px solid rgba(47,42,38,.08);
}

.oshi-red::before{ background: rgba(166, 61, 61, .12); }
.oshi-blue::before{ background: rgba(72, 121, 170, .12); }
.oshi-pink::before{ background: rgba(197, 116, 145, .14); }
.oshi-yellow::before{ background: rgba(198, 158, 58, .14); }
.oshi-green::before{ background: rgba(92, 144, 103, .14); }
.oshi-initial::before{ background: rgba(183,154,95,.10); }

.oshi-closing{
  padding-bottom: 80px;
}

.oshi-closing .oshi-copy{
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--text);
}

@media (max-width: 960px){
  .oshi-product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.oshi-section{
    padding: 50px 0 54px;
  }

@media (max-width: 640px){
  .inner{
    width:min(100% - 20px, var(--max));
  }

  .oshi-fv{
    padding: 24px 0;
  }

  .text-area{
    padding: 18px;
  }

  .concept-area{
    padding-top: 18px;
  }

  .oshi-section{
    padding: 0px 0 54px;
  }

  .oshi-category{
    padding: 18px;
  }

  .oshi-product-grid{
    grid-template-columns: 1fr;
  }

  .oshi-anchor-list{
    gap:8px;
  }

  .oshi-anchor-list a{
    width:100%;
  }

  .oshi-viewmore{
    text-align:left;
  }

  .bgplate{
    display:none;
  }

  .bgplate_sp{
    display:block;
  }
}




.oshi-initial-section .oshi-product-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

@media (max-width: 640px){
  .oshi-initial-section .oshi-product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}
















/* イニシャル：PC表示で中央寄せ＆横幅を少し狭くする */
.oshi-initial-section .oshi-product-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
  max-width: 620px;   /* ここで全体を小さくする */
  margin-left: auto;
  margin-right: auto;
  padding-inline: 24px; /* 両端の余白 */
  box-sizing: border-box;
}


@media (max-width: 640px){
  .oshi-initial-section .oshi-product-grid{
    max-width: none;
    padding-inline: 0;
    gap: 12px;
  }
}


/* カラー：PC・SPともに2列 */
.oshi-color-section .oshi-product-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
  max-width: 620px;   /* 必要なら中央寄せで少しコンパクトに */
  margin-left: auto;
  margin-right: auto;
  padding-inline: 24px; /* 両端の余白 */
  box-sizing: border-box;
}

/* イニシャル：PC・SPともに2列 */
.oshi-initial-section .oshi-product-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  padding-inline: 24px;
  box-sizing: border-box;
}

@media (max-width: 640px){
  .oshi-color-section .oshi-product-grid,
  .oshi-initial-section .oshi-product-grid{
    gap: 12px;
    max-width: none;
    padding-inline: 0;
  }
}

.concept-copy{
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
  font-size: clamp(1.2rem, 2vw, 2rem);
  font-family:var(--serif);
  text-align: center;
}



.main-area .fv-area {
  background-image: url("../img/PCmain.jpg");
  background-size: contain;
  width: 100%;
  height: 21vw;
  position: relative;
  background-repeat: no-repeat;
}





@media screen and (max-width: 768px) {
  .main-area.lp .fv-area {
    background-image: url("../img/SPmain.jpg");
    height:40vw;
    background-size: cover;
  }
}


.oshi-category::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:220px;
  height:220px;
  border-radius:0 0 220px 0;
  pointer-events:none;
  background: var(--accent-soft, rgba(183,154,95,.12));
}

#oshi-red{
  --accent-soft: rgba(255, 80, 80, 0.808);
}

#oshi-blue{
  --accent-soft: rgba(80, 229, 255, 0.603);
}

#oshi-pink{
  --accent-soft: rgba(255, 80, 168, 0.397);
}


#oshi-yellow{
  --accent-soft: rgba(255, 252, 80, 0.808);
}


#oshi-green{
  --accent-soft: rgba(21, 161, 39, 0.849);
}
#oshi-purple{
  --accent-soft: rgba(161, 48, 156, 0.849);
}

.fv-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.br-sp {
      display: none; /* PCでは非表示 */
    }

    /* スマホの時だけ表示 */
    @media (max-width: 768px) {
      .br-sp {
        display: block;
      }
    }

    .oshi-anchor-list {
  display: flex;
  justify-content: center; /* 左右中央 */
  list-style: none;        /* ・を消す場合 */

}