/*
Theme Name: Nuibeya Theme
Author: TOMOKA
Version: 1.0
*/

body {
  margin: 0;
  background: #fffafc;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  color: #444;
  text-align: center;
}

.container{
--pad: 20px;
max-width: 680px;
margin: auto;
padding: 40px var(--pad);
}

.home-link{
  text-decoration: none;
  color: inherit;
}  

.logo{
  font-size: 30px;
  margin: 6px 0 26px;
  letter-spacing: 0.06em;
  line-height: 1.2;
  font-weight: 700;
  color: #ff8fb1;
  text-shadow:
    0 2px 0 #ffffff,
    0 4px 12px rgba(255, 143, 177, 0.45);
}

.logo .sub{
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #ffa7c4;
  margin-bottom: 6px;
}

.logo .tag{
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #ffbcd3;
  margin-top: 8px;
}   

.hero {
  width: 90%;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.lead {
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 40px;
}

.insta {
  display: inline-block;
  padding: 14px 28px;
  background: #ffd9e6;
  color: #444;
  border-radius: 999px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.2s;
  box-shadow: 0 5px 12px rgba(255, 143, 177, 0.30);
}

.insta:hover {
  background: #ffc3d8;
}

.about-title{
  font-size: 22px;
  margin: 40px 0 20px;
  color: #ff8fb1;
}

.about-text{
  line-height: 2;
  font-size: 15px;
}

.signature{
  margin-top: 40px;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: #999;
}

.page-title{
  font-size: 22px;
  /*margin: 40px 0 18px;*/
  color: #ff8fb1;
}

.chara-photo{
  width: 100%;
  border-radius: 20px;
  margin-bottom: 18px;
}

.card{
  background: #ffffff;
  border-radius: 20px;
  padding: 18px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.chara-lead{
  margin: 0 0 14px;
  line-height: 1.9;
  font-size: 15px;
}

.profile{
  margin: 0;
}

.profile div{
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px dashed #ffd0df;
}

.profile div:first-child{
  border-top: none;
}

.profile dt{
  font-weight: 700;
  color: #ff8fb1;
}

.profile dd{
  margin: 0;
  color: #444;
}

.chara-quote{
  margin: 16px 0 0;
  padding: 12px 14px;
  background: #fff3f7;
  border-radius: 16px;
  line-height: 1.9;
}

.nav-buttons{
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-content: center;
}

/* ボタン自体の見た目を統一 */
.link-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  min-height: 44px;
  border-radius: 999px;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  max-width: 9.5em;
}

.link-btn:hover{
  background: #ffe4ee;
}

.nav-buttons .link-btn{
min-width: 140px;     /* 横幅を揃える */
min-height: 48px;     /* 高さ固定 */
padding: 12px 16px;
max-width: none;      /* 変な折返し抑える */
}

.credit{
  margin-top: 10px;
  font-size: 12px;
  color: #aaa;
  line-height: 1.6;
}

.page-lead{
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.8;
  color: #666;
}

/* ギャラリー */
.gallery{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.g-item{
  display: block;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #ffd0df;
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}

.g-item:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.10);
}  

.g-item img{
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}

/* PCで3列 */
@media (min-width: 720px){
  .gallery{
    grid-template-columns: repeat(3, 1fr);
  }
  .g-item img{
    height: 190px;
  }
}

/* 戻るリンク */
.backline{
  margin-top: 28px;
}

.text-link{
  color: #ff6fa5;
  text-decoration: none;
  font-weight: 700;
}
.text-link:hover{
  text-decoration: underline;
}

/* Lightbox */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}

.lightbox.is-open{
  display: flex;
}

.lb-img{
  max-width: min(92vw, 980px);
  max-height: 86vh;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  background: #fff;
}

.lb-close{
  position: fixed;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  color: #333;
  font-size: 28px;
  line-height: 44px;
  cursor: pointer;
}

.catch{
  margin: 8px 0 18px;
  font-size: 14px;
  color: #ff6fa5;
  letter-spacing: 0.06em;
}

.work-card{
background: rgba(255,255,255,0.65);
border: 1px solid #ffd0df;
border-radius: 22px;
padding: 18px;
box-shadow: 0 14px 34px rgba(0,0,0,0.08);
}

.work-hero img{
width: 100%;
max-height: 380px;
object-fit: cover;
border-radius: 18px;
display: block;
}

.work-text{
margin-top: 14px;
font-size: 14px;
line-height: 1.9;
color: #444;
}

.work-meta{
margin: 14px 0 6px;
padding: 0;
list-style: none;
display: grid;
gap: 8px;
}

.work-meta li{
background: #fff;
border: 1px solid #ffd0df;
border-radius: 16px;
padding: 10px 12px;
}

.work-meta li span{
display: inline-block;
min-width: 90px;
color: #ff6fa5;
font-weight: 800;
}

.mini-title{
margin: 26px 0 12px;
font-size: 16px;
color: #ff6fa5;
letter-spacing: 0.04em;
}

.note{
margin-top: 10px;
font-size: 12px;
color: #777;
}

/* 縦写真向け：masonry風 */
.masonry{
column-count: 2;
column-gap: 12px;
margin-top: 12px;
}

.m-item{
display: inline-block;
width: 100%;
margin: 0 0 12px;
border-radius: 18px;
overflow: hidden;
border: 1px solid #ffd0df;
background: #fff;
box-shadow: 0 10px 26px rgba(0,0,0,0.06);
transition: transform .18s ease, box-shadow .18s ease;
}

.m-item:hover{
transform: translateY(-6px);
box-shadow: 0 18px 38px rgba(0,0,0,0.10);
}

.m-item img{
width: 100%;
height: auto;
display: block;
}

/* PCは3列 */
@media (min-width: 720px){
.masonry{
  column-count: 3;
}
}

.welcome-box{
margin-top: 16px;
padding: 18px;
border-radius: 20px;
background: rgba(255,255,255,0.6);
border: 1px solid #ffd0df;
}

.small-note{
font-size: 12px;
color: #777;
margin-top: 10px;
line-height: 1.7;
}

.coming-btn{
display: inline-block;
padding: 10px 16px;
background: #ff8fb2;
color: white;
border-radius: 999px;
text-decoration: none;
font-size: 13px;
transition: .2s;
}

@media (max-width: 520px){
.nav-buttons{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: min(360px, 92%);
  margin: 18px auto 0;
}

.nav-buttons .link-btn{
  /*width: 100%;*/
  border-radius: 18px;
  min-height: 46px;
  padding: 12px 10px;
  font-size: 14px;
}
}

.credit, .note {
  font-size: 10px;
}


.coming-btn:hover{
background: #ff6fa5;
}

.spec-box{
margin-top: 28px;
padding: 18px;
border-radius: 16px;
background: #fff;
border: 1px dashed #ffd3e2;
max-width: 520px;
margin-left: auto;
margin-right: auto;
}

.spec-box h3{
text-align: center;
font-size: 16px;
margin-bottom: 10px;
color: #ff8fb3;
}

.spec-box ul{
font-size: 13px;
line-height: 1.8;
color: #666;
list-style-type: none;
padding-left: 0;
text-align: center;
}

.spec-box li {
margin-bottom: 6px;
color: #666;
font-size: 14px;
}

@media (max-width: 520px){

.welcome-box{
  padding: 18px 16px;
}

.welcome-box p{
  font-size: 14px;
  line-height: 1.9;
  max-width: 26em;   /* ←ここ超重要 */
  margin: 0 auto 12px;
}

.welcome-box .note{
  font-size: 12px;
  line-height: 1.7;
}

.welcome-box .btn{
  margin-top: 14px;
}
}

/* PCでは改行を消す */
.sp{
display:none;
}

/* スマホだけ改行を出す */
@media (max-width:520px){
.sp{
  display:block;
}
}

@media (max-width:520px){

h1{
  font-size:20px;
}

p{
  font-size:14px;
}

}

.btn{
transition:0.2s;
}

.btn:hover{
transform:translateY(-3px);
box-shadow:0 6px 12px rgba(0,0,0,0.1);
}

.sales-box{
margin-top: 28px;
padding: 18px;
border-radius: 20px;
background: rgba(255,255,255,0.6);
border: 1px solid #ffd0df;
}

.sales-box h2{
font-size: 16px;
margin-bottom: 12px;
color: #ff6fa5;
text-align: center;
}

.flow{
list-style: none;
padding: 0;
margin: 0 0 12px;
}

.flow li{
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
font-size: 14px;
color: #555;
}

.flow span{
width: 26px;
height: 26px;
border-radius: 50%;
background: #ff8fb2;
color: #fff;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
}

.care-box{
margin-top: 26px;
padding: 18px;
border-radius: 20px;
background: rgba(255,255,255,0.6);
border: 1px solid #ffd0df;
}

.care-box h2{
font-size: 15px;
color: #ff6fa5;
margin-bottom: 8px;
text-align: center;
}

.care-box p{
font-size: 14px;
line-height: 1.9;
color: #555;
text-align: center;
}

/* navボタンは「リンク」じゃなく「ボタン」見た目に固定 */
.nav-buttons .link-btn{
color: #ff6fa5;                 /* 文字色 */
text-decoration: none;          /* 下線消す */
background: rgba(255,255,255,0.6);
border: 1px solid #ffd0df;
box-shadow: 0 10px 24px rgba(255, 120, 170, 0.18);
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

/* ふわっと浮く */
.nav-buttons .link-btn:hover{
transform: translateY(-2px);
background: rgba(255,255,255,0.85);
box-shadow: 0 14px 28px rgba(255, 120, 170, 0.22);
}

/* =========================
 Pre-release page styles
 ========================= */

/* ページ全体 */
.pre-release{
max-width: 980px;
margin: 0 auto;
padding-top: 56px;
padding-left: 18px;
padding-right: 18px;
}

/* 見出し */
.pre-head{
text-align: center;
margin: 0 auto 28px;
}

.pre-title{
font-size: 28px;
letter-spacing: .08em;
margin: 0 0 10px;
}

.pre-lead{
margin: 0;
line-height: 1.9;
color: #666;
font-size: 14px;
}

/* リスト全体 */
.pre-list{
display: grid;
gap: 18px;
margin-top: 22px;
}

/* 各ぬいカード */
.doll-card{
background: rgba(255,255,255,0.65);
border: 1px solid rgba(255,170,200,0.55);
border-radius: 28px;
padding: 22px 18px;
box-shadow: 0 14px 30px rgba(0,0,0,.05);
}

/* カード上部（No. / サブ） */
.doll-top{
text-align: center;
margin-bottom: 14px;
}

.doll-no{
margin: 0;
font-size: 20px;
letter-spacing: .06em;
}

.doll-sub{
margin: 6px 0 0;
font-size: 12px;
color: #777;
}

/* 画像の暴走防止（最重要） */
.pre-release img{
max-width: 100%;
height: auto;
display: block;
}

/* 画像グリッド：縦長写真をきれいに揃える */
.photo-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 14px auto 6px;
max-width: 760px;
}

/* 画像の枠 */
.photo-grid a{
display: block;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(255,170,200,0.45);
background: #fff;
box-shadow: 0 10px 22px rgba(0,0,0,.06);
transition: transform .12s ease, box-shadow .12s ease;
}

.photo-grid a:hover{
transform: translateY(-1px);
box-shadow: 0 14px 28px rgba(0,0,0,.08);
}

/* 縦長で統一して見せる（トリミング） */
.photo-grid img{
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
}

/* No.002/003がまだ写真なしでも間延びしない */
.doll-media:empty{
display: none;
}

/* 仕様文 */
.doll-info{
margin-top: 12px;
text-align: center;
}

.doll-spec{
list-style: none;
padding: 0;
margin: 0 auto 10px;
display: grid;
gap: 6px;
max-width: 520px;
color: #666;
font-size: 13px;
line-height: 1.7;
}

.doll-note{
margin: 0;
font-size: 12px;
color: #888;
line-height: 1.7;
}

/* アクション（準備中/購入） */
.doll-actions{
margin-top: 16px;
text-align: center;
display: grid;
gap: 10px;
justify-items: center;
}

/* 準備中バッジ */
.sale-badge{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
border-radius: 999px;
background: rgba(255, 210, 225, 0.55);
border: 1px solid rgba(255,170,200,0.55);
color: #ff6aa1;
font-weight: 700;
font-size: 12px;
letter-spacing: .06em;
}

/* 購入ボタン（基本デザイン） */
.buy-btn{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 18px;
border-radius: 999px;
border: 1px solid rgba(255,170,200,0.7);
background: rgba(255,255,255,0.7);
color: #ff6aa1;
font-weight: 800;
font-size: 13px;
text-decoration: none;
min-width: 240px;
box-shadow: 0 12px 24px rgba(255,140,170,.18);
transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.buy-btn:hover{
transform: translateY(-1px);
box-shadow: 0 16px 30px rgba(255,140,170,.22);
}

/* いまは非表示にしたい（販売前）→ is-off を付けたら隠れる */
.buy-btn.is-off{
display: none;
}

/* 逆に販売開始したら is-off を外して、必要なら is-on 付ける */
.buy-btn.is-on{
display: inline-flex;
}

/* （任意）販売開始したらバッジを消したい時用 */
.sale-badge.is-off{
display: inline-flex;
}
.sale-badge.is-on{
display: none;
}

/* フッター */
.pre-foot{
text-align: center;
margin-top: 24px;
}

.pre-footnote{
margin: 0;
color: #777;
font-size: 12px;
line-height: 1.8;
}

/* スマホ調整 */
@media (max-width: 520px){
.pre-release{
  padding: 34px 14px 58px;
}

.pre-title{
  font-size: 24px;
}

.doll-card{
  border-radius: 24px;
  padding: 18px 14px;
}

.photo-grid{
  gap: 10px;
}

.buy-btn{
  min-width: 0;
  width: 100%;
  max-width: 320px;
}
}

/* <br class="sp"> をスマホだけ有効にする（もし未設定なら） */
.sp{ display: none; }
@media (max-width: 520px){
.sp{ display: inline; }
}

/* ====== pre lightbox ====== */
.prelb-overlay{
position: fixed;
inset: 0;
background: rgba(0,0,0,.72);
display: none;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 99999;
}

.prelb-overlay.is-open{ display: flex; }

.prelb-inner{
position: relative;
max-width: min(920px, 92vw);
max-height: 88vh;
}

.prelb-img{
display: block;
width: auto;
height: auto;
max-width: 92vw;
max-height: 88vh;
border-radius: 16px;
box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

.prelb-close{
position: absolute;
top: -14px;
right: -14px;
width: 42px;
height: 42px;
border: 0;
border-radius: 999px;
background: #fff;
color: #333;
font-size: 22px;
cursor: pointer;
box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

body.prelb-open{
overflow: hidden; /* 開いてる間スクロール止める */
}

/* ===== Top nav groups (Plan B) ===== */
.nav-area{
margin-top: 26px;
display: grid;
gap: 18px;
justify-items: center;
width: 100%;
margin-left: 0;
margin-right: 0;
}

.nav-group{
width: 100%;
box-sizing: border-box;
padding: 18px 18px 22px;
border: 1px solid rgba(255, 170, 200, 0.55);
border-radius: 22px;
background: rgba(255,255,255,0.35);
box-shadow: 0 12px 24px rgba(0,0,0,0.04);
margin-left: auto;
margin-right: auto;
}

.nav-group-title{
margin: 4px 0 14px;
font-size: 14px;
letter-spacing: .08em;
color: #ff7aa7;
}

/* 既存の.nav-buttonsを強化 */
.nav-buttons{
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}

/* ボタン共通（既存にあるなら上書きでOK） */
.link-btn{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
min-height: 44px;
border-radius: 999px;
border: 1px solid rgba(255, 170, 200, 0.75);
background: rgba(255,255,255,0.55);
color: #ff6f9f;
text-decoration: none;
line-height: 1.2;
box-shadow: 0 8px 16px rgba(255, 150, 190, 0.14);
transition: transform .12s ease, box-shadow .12s ease;
}
.link-btn:hover{
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(255, 150, 190, 0.18);
}

/* “プレリリース”だけ少し強め */
.link-btn.is-primary{
background: rgba(255, 140, 180, 0.16);
border-color: rgba(255, 120, 170, 0.9);
font-weight: 700;
}

/* ===== Mobile bottom bar ===== */
.mobile-bar {
display: none; /* PCは非表示 */
}

@media (max-width: 640px){
.nav-group {
  display: none;
}

.mobile-bar{
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr 1fr;
  gap: 10px;
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(255, 170, 200, 0.6);
  box-shadow: 0 14px 28px rgba(0,0,0,0.12);
  backdrop-filter: blur(10px);
  z-index: 9999;
}

/* 下バーの分、ページ下余白を確保 */
body{
  padding-bottom: 96px;
}

.mb-btn{
  appearance: none;
  border: 0;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255, 170, 200, 0.7);
  border-radius: 16px;
  padding: 10px 8px;
  text-decoration: none;
  color: #ff6f9f;
  display: grid;
  justify-items: center;
  gap: 4px;
  font: inherit;
  cursor: pointer;
}
.mb-ico{ font-size: 16px; line-height: 1; }
.mb-txt{ font-size: 11px; line-height: 1.1; }

.mb-primary{
  background: rgba(255, 140, 180, 0.18);
  border-color: rgba(255, 120, 170, 0.95);
  font-weight: 700;
}
}

/* ===== Menu sheet ===== */
.menu-sheet{
position: fixed;
inset: 0;
display: none;
z-index: 10000;
}

.menu-sheet.is-open{ display: block; }

.menu-backdrop{
position: absolute;
inset: 0;
background: rgba(0,0,0,0.25);
border: 0;
}

.menu-panel{
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
border-radius: 22px;
background: rgba(255,255,255,0.92);
border: 1px solid rgba(255, 170, 200, 0.6);
box-shadow: 0 18px 38px rgba(0,0,0,0.18);
padding: 14px 14px 18px;
transform: translateY(8px);
}

.menu-head{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}

.menu-title{
margin: 0;
font-weight: 800;
color: #ff6f9f;
}

.menu-close{
width: 36px;
height: 36px;
border-radius: 12px;
border: 1px solid rgba(255,170,200,.6);
background: rgba(255,255,255,0.65);
cursor: pointer;
font-size: 18px;
line-height: 1;
color: #ff6f9f;
}

.menu-group{
margin: 10px 0 8px;
font-size: 12px;
letter-spacing: .08em;
color: #ff7aa7;
}

.menu-links{
display: grid;
gap: 8px;
margin-bottom: 10px;
}
.menu-links a{
padding: 12px 12px;
border-radius: 14px;
border: 1px solid rgba(255,170,200,.6);
background: rgba(255,255,255,0.6);
text-decoration: none;
color: #ff6f9f;
}

.shop-links{
display:flex;
gap:12px;
justify-content:center;
flex-wrap:wrap;
margin: 14px 0 18px;
}

.shop-links a{
display:inline-block;
padding: 10px 16px;
border-radius: 999px;
text-decoration:none;
border: 1px solid rgba(255, 160, 200, .55);
background: rgba(255,255,255,.85);
backdrop-filter: blur(6px);
box-shadow: 0 6px 14px rgba(0,0,0,.08);
transition: transform .18s ease, box-shadow .18s ease;
}

.shop-links a:hover{
transform: translateY(-2px);
box-shadow: 0 10px 18px rgba(0,0,0,.12);
}

/* ショップ商品カード */
.woocommerce ul.products li.product {
background: #fff;
border-radius: 18px;
padding: 16px;
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* 商品名 */
.woocommerce ul.products li.product h2 {
font-size: 16px;
margin-top: 10px;
}

/* 価格 */
.woocommerce ul.products li.product .price {
color: #ff7aa8;
font-weight: bold;
}

/* カートボタン */
.woocommerce a.button {
background: #ffd4e2;
border-radius: 999px;
color: #333;
}

/* =========================
 WooCommerce 見た目調整（ぬい部屋）
 ========================= */

/* 1) ショップ上の「ショップ / カート / マイページ」ボタンの文字色 */
.shop-links a,
.shop-links a:visited{
color: #ff6fa8;            /* 文字色（好きに変えてOK） */
text-decoration: none;
font-weight: 700;
}
.shop-links a:hover{
color: #ff4f93;
}

/* ボタン自体（丸っこく、やわらか） */
.shop-links{
display:flex;
gap:14px;
justify-content:center;
margin: 10px 0 18px;
}
.shop-links a{
display:inline-block;
padding: 10px 16px;
border-radius: 999px;
border: 1.5px solid #ffb3cf;
background: rgba(255,255,255,0.75);
box-shadow: 0 8px 18px rgba(255, 130, 170, 0.18);
}

/* 2) ショップの商品カードを「真ん中寄り」にして、可愛く */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{
max-width: 980px;
margin-left: auto;
margin-right: auto;
}

.woocommerce ul.products{
max-width: 980px;          /* 全体の横幅を抑えて中央に */
margin: 20px auto 0;
padding: 0;
display: grid;             /* グリッドで綺麗に並ぶ */
grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
justify-content: center;   /* ← これで中央寄せ */
gap: 22px;
}

.woocommerce ul.products li.product{
float: none !important;    /* テーマによってはfloatが効くので潰す */
width: auto !important;
margin: 0 !important;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
display:block;
background: rgba(255,255,255,0.70);
border: 1px solid rgba(255, 180, 210, 0.55);
border-radius: 18px;
padding: 14px;
box-shadow: 0 12px 26px rgba(0,0,0,0.08);
}

/* 画像をカード幅に収める */
.woocommerce ul.products li.product img{
width: 100% !important;
height: auto !important;
border-radius: 14px;
margin: 0 0 12px;
}

/* タイトル・価格 */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
font-size: 16px;
color: #444;
margin: 8px 0 6px;
text-align: center;
}
.woocommerce ul.products li.product .price{
color: #ff6fa8;
font-weight: 800;
text-align: center;
margin-bottom: 10px;
}

/* カートに追加ボタン */
.woocommerce ul.products li.product .button{
display: block;
/* width: 100%; */
text-align: center;
border-radius: 999px;
border: 0;
background: #ffd2e3;
color: #5b3a45;
font-weight: 800;
padding: 12px 14px;
}
.woocommerce ul.products li.product .button:hover{
filter: brightness(0.98);
}

/* 3) マイページ（My Account）を可愛く整える */
.woocommerce-account .woocommerce{
max-width: 980px;
margin: 24px auto;
padding: 0 20px;
}

/* 左メニュー + 右コンテンツをカードに */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{
background: rgba(255,255,255,0.70);
border: 1px solid rgba(255, 180, 210, 0.55);
border-radius: 18px;
box-shadow: 0 12px 26px rgba(0,0,0,0.08);
padding: 18px;
}

/* 左メニューの「・」を消して、ボタンっぽく */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
list-style: none;
padding: 0;
margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li{
margin: 10px 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation a{
display: block;
padding: 10px 12px;
border-radius: 12px;
text-decoration: none;
color: #ff6fa8;
font-weight: 800;
background: rgba(255, 210, 227, 0.35);
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover{
background: rgba(255, 210, 227, 0.55);
}
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a{
background: #ffd2e3;
color: #5b3a45;
}

/* 右側本文のリンク色も統一 */
.woocommerce-account .woocommerce-MyAccount-content a{
color: #ff6fa8;
font-weight: 800;
text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-content a:hover{
text-decoration: underline;
}

/* 4) レスポンシブ：スマホは縦並び */
@media (max-width: 780px){
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{
  width: 100%;
  float: none;
  margin-bottom: 16px;
}
}

.woocommerce-account .woocommerce-MyAccount-content {
  float: right !important;
  width: 55% !important;
}

/* -----------------------------------------
 商品詳細（/product/...）を可愛く＆見やすく
----------------------------------------- */
.single-product .product{
max-width: 980px;
margin: 24px auto 0;
background: rgba(255,255,255,0.72);
border: 1px solid rgba(255, 160, 200, 0.55);
border-radius: 22px;
padding: 20px;
box-shadow: 0 10px 26px rgba(255, 140, 190, 0.14);
}

.single-product div.product div.images img{
border-radius: 20px;
}

/* 画像がデカすぎるの抑える（君のスクショ対策） */
.single-product div.product div.images{
max-width: 520px;
margin: 0 auto;
}
@media (min-width: 900px){
.single-product div.product div.images{
  max-width: 560px;
}
}

/* 右側の情報 */
.single-product .summary{
text-align: left;
}

.single-product .product_title{
font-weight: 900;
color: #444;
}

.single-product .price{
color: #ff5fa2;
font-weight: 900;
}

/* ApplePay/GPay/Linkの並びが暴れがちなので余白調整 */
.single-product .wc-stripe-payment-request-wrapper{
margin-top: 12px;
}

/* 下の説明タブ（説明/レビュー） */
.woocommerce div.product .woocommerce-tabs ul.tabs{
padding-left: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
border-radius: 14px 14px 0 0;
}
.woocommerce div.product .woocommerce-tabs .panel{
background: rgba(255,255,255,0.72);
border: 1px solid rgba(255, 160, 200, 0.55);
border-radius: 0 18px 18px 18px;
padding: 18px;
}

/* -----------------------------------------
 レスポンシブ：マイページを縦積みに
----------------------------------------- */
@media (max-width: 900px){
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{
  width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-navigation{
  margin-bottom: 16px;
}
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding-left: 0;
  padding-top: 10px;
}

/* ===== My Account : Mobile layout ===== */
@media (max-width: 640px){

/* 全体の横はみ防止 */
body.woocommerce-account{
  overflow-x: hidden;
}

/* マイページ全体を1カラムに */
body.woocommerce-account .woocommerce{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

/* 左ナビ */
body.woocommerce-account .woocommerce-MyAccount-navigation{
  width: 100%;
  margin: 0;
}

/* 右コンテンツ */
body.woocommerce-account .woocommerce-MyAccount-content{
  width: 100%;
  margin: 0;
}

/* ナビを“かわいいカード”に */
body.woocommerce-account .woocommerce-MyAccount-navigation{
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.55);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  border: 1px solid rgba(255, 160, 195, 0.35);
}

/* ナビのリストを2列グリッド（縦長を解消） */
body.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ナビボタン */
body.woocommerce-account .woocommerce-MyAccount-navigation li{
  margin: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a{
  display: block;
  padding: 12px 10px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 800;
  background: rgba(255, 210, 228, 0.45);
  border: 1px solid rgba(255, 130, 175, 0.35);
  box-shadow: 0 10px 18px rgba(255, 120, 170, 0.12);
  color: #ff5aa0; /* 文字色 */
}

/* 選択中 */
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background: rgba(255, 120, 170, 0.18);
  border-color: rgba(255, 120, 170, 0.55);
  color: #e93d88;
}

/* 右側コンテンツもカード化 */
body.woocommerce-account .woocommerce-MyAccount-content{
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.55);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  border: 1px solid rgba(255, 160, 195, 0.35);
}

/* 見出しちょい可愛く */
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3{
  margin-top: 0;
  letter-spacing: .02em;
}

/* フォーム系の余白 */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form{
  margin-top: 12px;
}
}

@media (max-width: 640px){

/* ① 全体の余白を減らす（テーマの.containerが効いてる対策） */
body.woocommerce-account .container{
  --pad: 12px;              /* 20px→12pxくらいに */
  padding: 20px var(--pad); /* 上下も40→20 */
  /* max-width: 100%; */
}

/* WooCommerce全体の横幅を100%で使う */
body.woocommerce-account .woocommerce{
  /* width: 100%; */
  margin: 0 auto;
}

/* ② ボタンたち（MyAccountナビ）を中央・均等に */
body.woocommerce-account .woocommerce-MyAccount-navigation{
  width: 100%;
  max-width: none;
  padding: 14px; /* カード内の余白も少し減らす */
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul{
  width: 100%;
  margin: 0 auto;
  justify-items: stretch; /* 各ボタンをセルいっぱいに */
  align-items: stretch;
}

/* 2列グリッドの“左右のズレ”を消す（中央寄せ） */
body.woocommerce-account .woocommerce-MyAccount-navigation ul{
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a{
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

/* ③ 下の情報の枠（右カラム部分）を広げる */
body.woocommerce-account .woocommerce-MyAccount-content{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 14px; /* 枠内余白も少し減らす */
}

/* ついでにカード同士の間隔も詰める */
body.woocommerce-account .woocommerce{
  gap: 12px;
}
}

@media (max-width: 640px){
body.woocommerce-account .woocommerce{
  justify-items: center;
}
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content{
  justify-self: center;
}
}

.site-footer{
  margin-top: 60px;
  padding: 30px 20px;
  background: #fff;
  border-top: 1px solid #f3c4d3;
}

.footer-menu{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}

.footer-menu a{
  color: #e88aaa;
  text-decoration: none;
  font-size: 14px;
}

.footer-menu a:hover{
  text-decoration: underline;
}

.copyright{
  font-size: 12px;
  color: #999;
}

.wp-block-heading {
  color: #f78da7;
}

.wpcf7-form {
  max-width: 560px;
  margin: 18px auto 0;
  padding: 22px 22px 24px;
  background: rgba(255,255,255,.50);
  border: 1px solid rgba(255,180,200,.35);
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  backdrop-filter: blur(8px);
}

.wpcf7-form label,
.page .entry-content form label{
  display: block;
  font-weight: 700;
  font-size: 13px;
  margin: 14px 0 8px;
  opacity: .85;
  text-align: left;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea,
.page .entry-content form input[type="text"],
.page .entry-content form input[type="email"],
.page .entry-content form textarea{
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,160,190,.55);
  background: rgba(255,255,255,.80);
  outline: none;
  font-size: 16px;
  transition: .15s ease;
}

.wpcf7-form textarea,
.page .entry-content form textarea{
  min-height: 180px;
  resize: vertical;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.page .entry-content form input:focus,
.page .entry-content form textarea:focus{
  border-color: rgba(255,120,170,.85);
  box-shadow: 0 0 0 4px rgba(255,140,190,.20);
}

.wpcf7-form button,
.wpcf7-form input[type="submit"],
.page .entry-content form button,
.page .entry-content form input[type="submit"]{
  display: block;
  margin: 20px auto 0;   /* ← autoで中央寄せ */
  padding: 12px 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,120,170,.55);
  background: linear-gradient(180deg, rgba(255,210,225,.95), rgba(255,175,205,.95));
  color: rgba(20,20,20,.85);
  font-weight: 800;
  letter-spacing: .03em;
  cursor: pointer;
  transition: .15s ease;
}

.wpcf7-form button:hover,
.wpcf7-form input[type="submit"]:hover,
.page .entry-content form button:hover,
.page .entry-content form input[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(255,130,170,.20);
}