@charset "utf-8";
/* CSS Document */

@font-face{
  font-family: "07LogoTypeGothic7";
  src:
    url("/_staging/renewal/fonts/07LogoTypeGothic7.woff2") format("woff2"),
    url("/_staging/renewal/fonts/07LogoTypeGothic7.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}



body {
  display: flex;
  flex-direction: column;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background: #ffffff;
  display: flex;
  justify-content: center; /* ロゴを中央基準に配置 */
  align-items: center;     /* 縦中央揃え */
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* ロゴ中央 */
.head-logo {
  margin: 0;
}

.head-logo img {
  display: block;
  height: 55px;
  width: auto;
}

/* ハンバーガーメニュー右上 */
.menu-btn {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.menu-btn span {
  display: block;
  height: 3px;
  background: #C62E5B;
  border-radius: 2px;
  transition: 0.3s;
}

/* メニュー開閉アニメーション */
.menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translateY(13px);
}
.menu-btn.active span:nth-child(2) {
  opacity: 0;
}
.menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translateY(-13px);
}

.nav{
  position: absolute;
  top: 100%;      /* ヘッダー直下 */
  left: 0;
  width: 100%;
  background: #ffffff;
  z-index: 999;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);

  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;

  /* ▼ 閉じるとき（ふわ〜っと戻る） */
  transition:
    max-height 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav.active{
  max-height: 100vh;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;

  /* ▼ 開くとき（少しキレよく） */
  transition:
    max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.35s ease,
    transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav ul{
  list-style: none;
  margin: 0;
  padding: 10px 0;
  text-align: center; /* 文字中央 */
}

.nav li a{
  display: block;
  padding: 14px 16px;
  color: #C62E5B;
  text-decoration: none;
  font-weight: 500;
  font-family: 'LogoTypeGothic7', sans-serif;
  letter-spacing: 0.12em;
}

.nav li a:hover{
  background: rgba(200,10,30,1);
  color: #ffffff;
}

/* navのulにクラス付けた前提 */
.nav-list{
  list-style: none;
  margin: 0;
  padding: 10px 0;
  text-align: center;
   height: calc(80vh - 70px); /* 70pxはヘッダーの高さに合わせて */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 区切り線 */
.nav-divider{
  height: 1px;
  margin: 8px 120px;
  background: rgba(200,10,10,1);
}

/* アコーディオンボタン */
.nav-acc-btn{
  width: 100%;
  background: transparent;
  border: none;
  color: #C62E5B;
  padding: 14px 16px;
  font-weight: 500;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: '07LogoTypeGothic7', sans-serif; /* もし適用したいなら */
  letter-spacing: 0.12em;
}

/* + アイコン */
.nav-acc-icon{
  display: inline-block;
  transition: transform 0.3s ease;
}

/* 小カテゴリ（閉じた状態） */
.nav-sub{
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.35s ease;
}

/* 開いた状態 */
.nav-acc.is-open .nav-sub{
  max-height: 620px; /* 項目数多いから少し大きめ */
  opacity: 1;
  transform: translateY(0);
}

.nav-acc.is-open .nav-acc-icon{
  transform: rotate(45deg); /* + を ×っぽく */
}

/* セクション見出し（非クリック） */
.nav-section-title{
  padding: 18px 16px 6px;
  text-align: center;
  font-family: '0LogoTypeGothic7', sans-serif;
  font-size: 18px;
  letter-spacing: 0.18em;
  color: rgba(200,10,10,1);

  cursor: default;          /* 反応しない */
  user-select: none;        /* 選択もできない */
  pointer-events: none;     /* クリック完全無効 */
}

/* ブランドリスト全体 */
.brand-list li {
  list-style: none;
}

/* aタグをホバー対象に */
.brand-item a {
  position: relative;
  display: block;
  padding: 14px 0;
  text-align: center;
  transition: background 0.3s ease;
}

/* 画像共通 */
.brand-img {
  /* ブランドロゴなので高さ基準がおすすめ */
  width: auto;
  display: block;
  margin: 0 auto;
  transition: opacity 0.3s ease;
}

/* ホバー用画像は重ねて隠す */
.brand-img.hover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

/* ホバー時切替 */
.brand-item a:hover .brand-img.normal {
  opacity: 0;
}

.brand-item a:hover .brand-img.hover {
  opacity: 1;
}

/* 通常時 */


/* 共通ホバー時 */
.brand-item a:hover {
  background: #C40018;
}

.nav-sns {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 20px 0 24px;
}

.nav-sns img {
  width: 24px;
  height: 24px;
  display: block;
}

.nav-shop {
	margin-top: 10px;
	
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer {
	color: #C62E5B;
	font-family: '07LogoTypeGothic7', sans-serif;  
	padding-top: 40px;
	padding-bottom: 50px;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.20);
	background-color: #FFFFFF;

}

.site-footer a {
  text-decoration: none !important;
  color: #C33C3E;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.footer-copy {
  margin-top: 20px;
  text-align: center;
  font-size: 12px;
　margin-bottom: 10px;
}



/* ★横並びの本体（これが無いと縦になる） */
.slides{
  display: flex;
  transition: transform 1s ease;
  will-change: transform;
}

/* pictureを1枚=100%にする */
.slides picture{
  flex: 0 0 100%;
  width: 100%;
  display: block;
}

.slides picture img{
  width: 100%;
  display: block;
}


html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }

.new-product-iframe{
  width: 100%;
  border: none;
  display: block;
}

/* PC */
@media (min-width: 768px){
  .new-product-iframe{
    height: 420px; /* あとで微調整 */
  }
}

/* SP */
@media (max-width: 767px){
  .new-product-iframe{
    height: 1200px;
  }
	
.np-title {
	width: 200px;
	color:fff;
}

}

.np-section{
  padding-inline: 16px;   /* SPの安全枠は残す */
  box-sizing: border-box;
  text-align: left;
  margin: 0;
  padding-block: 0;
}

/* 左端ピタ見え + 右がちょい伸び */
.np-title{
  display: inline-block;
  background-color: #940000;
  color: #fff;

  padding: 10px 28px 10px 18px; /* 右多め */
  letter-spacing: .05em;
  white-space: nowrap;

  box-sizing: border-box;
  font-size: 14px;

  margin-left: -16px; /* ← 見た目だけ左の隙間0にする */
  width: 200px;
 
}

.np-title{
  display: inline-block;
  background-color: #940000;
  color: #fff;

  padding: 10px 28px 10px 18px;
  letter-spacing: .05em;
  white-space: nowrap;

  box-sizing: border-box;
  font-size: 14px;

  margin-left: -16px;
  margin-top: 30px;

  /* ふわっと */
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity 1.2s ease,
    transform 1.2s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}

.np-title.is-show{
  opacity: 1;
  transform: translateX(0);
}



.item{
  margin: 20px;
  padding-bottom: 10px;
  margin-bottom: 16px;
  color:#6E3E3F;
  font-size: 16px;
  letter-spacing: .04em;
  font-family:
    -apple-system, BlinkMacSystemFont,  /* iPhone/Macの標準ゴシック */
    "Segoe UI",                         /* Windows */
    "Helvetica Neue", Arial,
    "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo",
    sans-serif;

  position: relative; /* ← ★これ追加 */
}

/* 横幅固定の下線 */
.item::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;        /* 固定幅 */
  height: 1px;
  background: rgba(200,10,10,1);
}

@media (min-width: 782px){
	.item::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;        /* 固定幅 */
  height: 1px;
  background: rgba(200,10,10,1);
	}
}

.allitem{
	padding-top: 30px;
	padding-bottom: 10px;
	margin-left: 30px;
	margin-right: 30px;
	text-align: center;
}

li{
  list-style: none;
}

a{
	color:#6E3E3F;
	 text-decoration: none;
}

a:hover {
	color:#C40018;
}

.company_all {
	margin: 100px auto;
}

.company {
  max-width: 350px;          /* 横幅を抑えて上品に */
  margin: 0 auto;            /* 画面中央 */
  padding: 30px 20px;        /* 上下ゆったり */
  text-align: center;        /* 文字中央揃え */
  background: #faf7f4;
  border-radius: 12px;
  margin-top: 100px;
  
}

@media (min-width: 782px){
	.company{
		max-width:800px;
	}
}

.hello {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  font-size: 28px;
  letter-spacing: 0.15em;
  margin-bottom: 32px;
  color: #333;
  position: relative;
}

.hello::after {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  background: #d8cfc4; /* ベージュ寄りで上品 */
  margin: 16px auto 0;
}

.detail {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  font-size: 15px;
  line-height: 2.2;          /* ゆったり */
  letter-spacing: 0.08em;
  color: #555;
  text-shadow: 0 1px 1px rgba(0,0,0,0.03);
}

.hello2{
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  font-size: 18px;
  letter-spacing: 0.15em;
  margin-bottom: 32px;
  color: #FF4B88;
  position: relative;
}

@media (min-width: 782px){
  .hello2{
    font-size: 22px;        /* ←PCだけ別調整したいならここ */
  }
}

.news_event {
  width: 100%;
  max-width: none;
  padding: 0 16px;
  margin: 0;
}

.news-event-iframe {
  width: 100%;
  max-width: 100%;
  height: 100vh; /* とりあえずこれでOK */
  border: none;
  display: block;
}

.privacy{
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
	width: 300px;
	margin: 0 auto; 
	margin-top: 100px;
}


@media (min-width: 782px){
	.privacy{width: 782px;
	}
}

.deta img{
	margin-top: 30px;
    width: 250px;
}


.allbrand {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 900px;
  
}

.allbrand .deta:hover img {
  transform: scale(1.08);                 /* 少し拡大 */
  filter: brightness(1.12);               /* 明るく */
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18); /* ドロップシャドウ */
}

@media screen and (min-width: 782px) {
  .allbrand {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* ← 3列 */
    gap: 24px 16px; /* 縦 横 */
    justify-items: center;
    align-items: center;
  }


  .deta img {
    max-width: 80%;
    height: auto;
	 box-shadow: 0 10px 24px rgba(0, 0, 0, .18); /* ドロップシャドウ */
	 
  }
}

/* ===== News List ===== */
.news{
  padding: 0px 16px;
}

.news-inner{
  max-width: 1200px;
  margin: 0 auto;
}


.news-title img{
	width: 300px;
	margin: 0 auto;
	display: block;
	margin-top: 0px
	
}

/* Grid：画面幅に応じて自動で列数が増える */
.news-grid{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr; /* SPは1列 */
}

/* カード全体クリック */
.news-card{
  display: block;
  color: inherit;
  text-decoration: none;
}

/* 300x300の正方形（中の画像はトリミングされてOK） */
.news-thumb{
  width: 100%;
  max-width: 300px;    /* 画像最大300 */
  aspect-ratio: 1 / 1; /* 正方形 */
  overflow: hidden;
  border-radius: 12px; /* 角丸いらなければ消してOK */
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  background: #f3f3f3;
}

.news-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;<li class="brand">
    <a class="brand_link" href="brand_romanticdorops.html">
      <span class="brand_name">Mystic Angel</span>
      <img src="img/ma_bottle.png" class="bottle" alt="All of me">
    </a>
  </li>
  display: block;
}

/* 画像下の1行テキスト（はみ出したら…） */
.news-text{
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px; /* 画像と同じ幅にそろえる */
  text-align: center;
}

/* 1枚ずつ中央揃えにしたい場合 */
.news-item{
  display: grid;
  justify-items: center;
}

/* PC：最小240pxを基準に、画面に入るだけ列が増える（3〜5列になりやすい） */
@media (min-width: 768px){
  .news{
    padding: 56px 20px;
  }

  .news-grid{
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
  }

  /* PCでは「中央寄せ固定」より、グリッド幅いっぱい使う方が綺麗ならこれを消す */
  .news-item{
    justify-items: stretch;
  }

  .news-thumb,
  .news-text{
    max-width: 300px;
  }
}

/* hover（任意） */
@media (hover:hover){
  .news-card:hover .news-thumb{
    transform: translateY(-2px);
    transition: transform .18s ease;
  }
}

.back img {
	margin: 0 auto;
	display: block;
	width: 100px;
   transform: scale(1);
   transition:
    transform 0.35s ease-out,
    filter 0.35s ease-out;
}

.back:hover {
  transform: scale(1.06);
  filter: brightness(1.12);
}

.brand_comment {
  background-image: url("../img/brand_bg.png"); /* 背景画像 */
  background-size: contain;       /* 全体にフィット */
  background-position: center;  /* 中央寄せ */
  background-repeat: no-repeat;

  padding: 40px 24px;           /* 余白（超重要） */
  font-family: '07LogoTypeGothic7', sans-serif;
}

.brand_message {
	color: #3F2E2F;
	max-width: 680px;
    margin: 0 auto 32px;
    line-height: 2;
	text-shadow:
    0 0 4px rgba(255,255,255,0.9),
    0 0 8px rgba(255,255,255,0.6);
}

.red_message {
	color: #E16769;
}

.by_message{
	text-align: right;
	max-width: 680px;
	margin: 0 auto 32px;
	font-size: 20px;
	color: #D85773;
	text-shadow:
    0 0 4px rgba(255,255,255,0.9),
    0 0 8px rgba(255,255,255,0.6);
}

.message_title{
	text-align: left;
	max-width: 680px;
	margin: 0 auto 32px;
	font-size: 30px;
	text-shadow:
    0 0 4px rgba(255,255,255,0.9),
    0 0 8px rgba(255,255,255,0.6);
	color: #D85773;
}

.brand_all{
	margin-top: 100px;
	width: 400px;   /* ← これが超重要 */
    margin: 0 auto 32px;
}
.brand_list{
  list-style: none;
  margin: 0 auto;        /* ← 塊は中央 */
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: 28px;
}

@media (min-width: 768px){
  .brand_list{
    flex-direction: row;     /* 横並び */
    justify-content: center; /* 中央寄せ */
    max-width: 900px;        /* ← PC時の最大幅 */
    gap: 32px;               /* PCは少し広めでも上品 */
  }
.brand_list > li > a{
  display: flex;
  align-items: center;
  justify-content: center; /* ← 中身を中央へ */
  gap: 14px;               /* 文字と画像の間 */
}

/* もし画像が右に逃げる設定が入ってたら無効化 */
.brand_list > li > a img{
  margin-left: 0 !important;
  display: block;
}
}

.brand_link{
  display: flex;
  align-items: center;   /* 縦中央 */
  justify-content: flex-end; /* 中身だけ右寄せ */
  gap: 18px;
  text-decoration: none;
  width: 320px;          /* ← 塊の横幅を固定（超大事） */
}

.brand_name{
  text-align: right;     /* 文字右揃え */
  font-size: 22px;
   font-family:
    -apple-system, BlinkMacSystemFont,  /* iPhone/Macの標準ゴシック */
    "Segoe UI",                         /* Windows */
    "Helvetica Neue", Arial,
    "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo",
    sans-serif;
}

.bottle{
  width: 70px;
  height: auto;
  display: block;
}


.brand {
  position: relative;
  padding: 16px 0;
}

.brand::before,
.brand::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  height: 1px;
  background: #ccc;
}

.brand::before {
  top: 0;
}

.brand::after {
  bottom: 0;
}


.brand_title {
	text-align: center;
	font-family:
    -apple-system, BlinkMacSystemFont,  /* iPhone/Macの標準ゴシック */
    "Segoe UI",                         /* Windows */
    "Helvetica Neue", Arial,
    "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo",
    sans-serif;
	font-size: 20px;
	color: #D85773;
	
}

.company-profile{
  padding: clamp(24px, 4vw, 48px) 16px;
　margin-top: 150px;
}

.company-profile__inner{
  max-width: 980px;
  margin: 0 auto;
  margin-top: 100px;
}

.company-profile__title{
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: .06em;
  margin: 0 0 18px 0;
  padding-left: 12px;
  border-left: 4px solid #C62E5B; /* ブランド色に合わせて調整OK */
}

.company-profile__dl{
  margin: 0;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  overflow: hidden;
  font-size: 16px;
  letter-spacing: .04em;
  color: #555;
  font-family:
    -apple-system, BlinkMacSystemFont,  /* iPhone/Macの標準ゴシック */
    "Segoe UI",                         /* Windows */
    "Helvetica Neue", Arial,
    "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo",
    sans-serif;
}

.company-profile__row{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 16px 18px;
  border-top: 1px solid rgba(0,0,0,.06);
}

.company-profile__row:first-child{
  border-top: none;
}

.company-profile__row dt{
  margin: 0;
  font-weight: 700;
  color: rgba(0,0,0,.75);
  line-height: 1.6;
}

.company-profile__row dd{
  margin: 0;
  color: rgba(0,0,0,.9);
  line-height: 1.8;
}

.company-profile__tel,
.company-profile__fax{
  display: inline-block;
  margin-right: 14px;
  white-space: nowrap;
}

.company-profile__bank{
  list-style: none;
  padding: 0;
  margin: 0;
}

.company-profile__bank li{
  padding-left: 1em;
  position: relative;
  line-height: 1.8;
}

.company-profile__bank li::before{
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(0,0,0,.55);
}

/* ===== SP（スマホ） ===== */
@media (max-width: 640px){
  .company-profile__row{
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .company-profile__row dt{
    font-size: 13px;
    opacity: .8;
  }
  .company-profile__tel,
  .company-profile__fax{
    display: block;
    margin-right: 0;
  }
}

@media screen and (max-width: 767px){
  .footer-links{
    flex-direction: column;
    align-items: center; /* 中央寄せ（左寄せにしたければ消す） */
    gap: 12px;
　　font-size: 12px;
  }
}

.product-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 100px;
	
}

.product img{
  width: 100%;
  border-radius: 8px;
}

.tag-buttons{
  margin-bottom: 20px;
}
.tag-buttons button{
  margin-right: 8px;
}

main{
  padding-top: 90px;
}

/* =========================
   all_explain（完成・整理版）
   ========================= */
.all_explain{
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 30px;
  line-height: 1.85;
  letter-spacing: .03em;
  text-align: left;
  background-color: rgba(255,255,255,1.00);
  border: 1px solid rgba(255,255,255,1.00);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  box-sizing: border-box;
  font-family: 'LogoTypeGothic7', sans-serif;
 
}

@media screen and (max-width: 767px){
	.all_explain{
		margin-left: 20px;
		margin-right: 20px;
	}
}

/* ロゴ/ボトル/CP/三角形など：中央に置きたい画像 */
 .brand-img{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 14px auto;
}

/* 見出し */
.fragrance_title_red{
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  margin: 19px 0 8px;
  text-align: center;
  color:#B82D2F;
}

.fragrance_title_blue{
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  margin: 19px 0 8px;
  text-align: center;
  color:#0059C7;
}

.fragrance_title_y{
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  margin: 19px 0 8px;
  text-align: center;
  color:#E0C44D;
}

.fragrance_title_aomidori{
	font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  margin: 19px 0 8px;
  text-align: center;
  color:#9BCCCC;
}

.fragrance_title_pink{
	font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  margin: 19px 0 8px;
  text-align: center;
  color:#FF42AB;
}

.fragrance_title_orange{
	font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  margin: 19px 0 8px;
  text-align: center;
  color:#EF7545;
}

.fragrance_title_midori{
	font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  margin: 19px 0 8px;
  text-align: center;
  color:#15C1BF;
}

.fragrance_title_murasaki{
	font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  margin: 19px 0 8px;
  text-align: center;
  color:#D2A0E5;
}



.fragrance_title_vr{
	font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  margin: 19px 0 8px;
  text-align: center;
  color:#FF99D8;
}

/* リード文 */
 .fragrance_explain{
  max-width: 46ch;
  margin: 0 auto 18px;
  font-size: 15px;
  opacity: .92;
  text-align: center;
}

/* =========================
   “本文の左端基準”を作る
   p と explain を同じ箱幅にして中央配置
   ========================= */
.mini_explain .explain{
  max-width: 60ch;        /* ← ここが基準幅（必要なら調整OK） */
  margin-left: auto;
  margin-right: auto;     /* ← 基準箱は中央 */
  margin-top: 0px;
  color: #494949;
}



/* explain画像：完全に同じ見た目サイズ + 左端を本文に合わせる */
 .explain{
  display: block;

  width: 260px;           /* ← 3つの見た目サイズ統一（横） */
  height: 56px;           /* ← 3つの見た目サイズ統一（縦） */

  margin-top: 26px;
  margin-bottom: 10px;

  object-fit: contain;    /* 切らずに枠内へ */
  object-position: left center; /* ← 左端を本文左端に合わせる */
}

/* 最後のpだけ余白なし */
.all_explain p:last-of-type{
  margin-bottom: 0;
}

/* SP微調整 */
@media (max-width: 480px){
  .all_explain{
    padding: 18px 14px 38px;
  }
}

.all_explain{
  display: block;
  margin: 0 auto;   /* ← 中央配置 */
}

.rogo {
  display: block;
  margin: 0 auto;
}

.back-center{
  display: block;
  margin: 0 auto;
  width: 100px;
 
}
	
.back {
   padding-bottom: 100px;
   padding-top: 70px;
	}

.bottle_big{
  display: block;
  margin: 0 auto;
  width: 70%;
}

/* 全体：中央配置だけど中身は左揃え */
.explain-list{
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
　margin-top: 30px;
}

/* 1行ごとのまとまり */
.explain-row{
  display: flex;
  flex-direction: column;  /* ← 画像→文章の縦並び */
  align-items: flex-start; /* 左揃え */
  margin-bottom: 32px;
}

.explain-row img{
  height: 30px;
  width: auto;
  margin: 0 0 2px 0;       /* 画像と文章の間だけ少し空ける */
  flex-shrink: 0;
}

.explain-row p{
  margin: 0;
  line-height: 1.8;
}

/* ミニ説明（サイズ調整したい場合） */
.mini_explain{
  font-size: 14px;
  opacity: 0.9;
}

/* 下の三角形画像 */
.triangle-wrap{
  text-align: center;
}

.triangle{
  display: block;
  margin: 16px auto;
  max-width: 60%;
　height: auto;
　object-fit: contain;
　margin-top: 10px;
  margin-bottom: 40px;
}

/* PCだけ横並び */
@media (min-width: 768px){
  .triangle-wrap{
    display: flex;
    align-items: center; /* 高さ揃え */
    gap: 10px;
  }

  .triangle{
    max-width: 300px;
    height: auto;        /* 比率固定 */
    object-fit: contain;
  }
}

.price{
  display: flex;
  justify-content: center;
  margin: 32px 0 30px;
}

.price-list{
  list-style: none;
  padding: 0;
  margin: 0;
  transform: translateX(-10px); /* 視覚補正 */
}

.price-list li{
  display: grid;
  grid-template-columns: 64px 48px auto;
  column-gap: 10px;
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: .04em;
}

.vol{ text-align: right; }
.label{ text-align: center; }
.yen{ text-align: left; }

.brand-img normal img{
	widows: 100px;
}



.page-pad{
  padding: 30px;
}

@media (max-width: 767px){
  .page-pad{
    padding: 12px;
  }
}

.catch{
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  display: block;
}

@media (min-width: 767px){
  .catch{
    max-width: 400px;
  }
}
.fadein{
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}


.tiktok{
	margin-left: 30px;
	margin-right: 30px;
	margin-top: 100px;
}

/* ===== フォーム全体 ===== */
.form-wrap{
  max-width: 800px;         /* PCは最大800px */
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* ===== テーブル（点線区切り） ===== */
table.line{
  width: 100%;
  table-layout: fixed;      /* 中身で横に伸びるのを防ぐ */
  border-collapse: collapse;
  font-size: 14px;
}

table.line tr{
  border-top: 1px dotted #bfbfbf;
}

table.line tr:last-child{
  border-bottom: 1px dotted #bfbfbf;
}

table.line th,
table.line td{
  padding: 12px 10px;
  vertical-align: top;
}

/* 左ラベル列 */
table.line th{
  width: 220px;
  font-weight: 700;
  color: #222;
  text-align: left;
  white-space: nowrap;
}

/* 右入力列 */
table.line td{
  width: auto;
}

/* 必須 */
.must{
  color: #d60000;
  font-weight: 700;
  margin-left: 6px;
}

/* 注意文（赤） */
.attention{
  color: #000000;
  font-size: 13px;
}

/* ===== ラジオ（横並び） ===== */
table.line td label{
  margin-right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ===== 名前の2カラム（姓/名） ===== */
.name-group{
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: nowrap;        /* PCは横並びキープ */
}

.blockHalf{
  flex: 1 1 0;
  min-width: 0;             /* 伸び防止 */
}

.mini-label{
  display: inline-block;
  width: 2em;               /* 「姓」「名」を揃える */
  font-size: 13px;
  color: #333;
  margin-right: 6px;
}

/* ===== 入力欄（スクショっぽい細め枠） ===== */
table.line input,
table.line textarea,
table.line select{
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;             /* flex内で伸びるのを防ぐ */
  border: 1px solid #bfbfbf;
  background: #fff;
  border-radius: 2px;
  font-size: 14px;
}

.inputText{
  width: 420px;             /* スクショっぽい長さ */
  max-width: 100%;
  padding: 6px 8px;
  height: 28px;
}

.inputTextHalf{
  width: 180px;             /* 姓/名の入力幅 */
  max-width: 100%;
  padding: 6px 8px;
  height: 28px;
}

textarea.inputText{
  width: 520px;
  max-width: 100%;
  height: 140px;
  padding: 8px;
  resize: vertical;
}

/* フォーカス（控えめに） */
table.line input:focus,
table.line textarea:focus,
table.line select:focus{
  outline: none;
  border-color: #888;
}

/* 例文（小さめ・薄め） */
.example{
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #666;
  line-height: 1.4;
}

/* エラー表示（もし使うなら） */
.error{
  margin-top: 6px;
  color: #d60000;
  font-size: 12px;
}

/* ===== ボタン（中央） ===== */
.inputBtn{
  display: inline-block;
  padding: 7px 18px;
  border: 1px solid #666;
  background: #FFF6F6;
  color: #222;
  border-radius: 2px;
  cursor: pointer;
}

table.line tr:last-child td{
  padding-top: 18px;
}



/* ===== SP：最大350pxで縦積み ===== */
@media (max-width: 767px){
  .form-wrap{
    max-width: 350px;       /* SPは最大350px */
  }

  table.line th,
  table.line td{
    display: block;
    width: 100%;
  }

  table.line th{
    white-space: normal;
    padding-bottom: 6px;
  }

  .name-group{
    flex-direction: column; /* SPは縦に */
    gap: 10px;
  }

  .inputText,
  .inputTextHalf,
  textarea.inputText{
    width: 100%;            /* SPは全幅 */
  }
	
	/* 送信ボタン行を中央に */
table.line tr:last-child td{
  text-align: center;
}
}


.main-form {
	max-width: 800px;
	margin: 0 auto;
	margin-top: 90px;
	margin-bottom: 30px;
	
}

/* ===== Thanks Page Elegant Style ===== */

.thanks {
  padding: clamp(56px, 8vw, 96px) 16px;
  background: linear-gradient(
    to bottom,
    #fff 0%,
  );
margin-top: 60px;
margin-bottom: 150px;
}

.thanks-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 48px);
  background: #ffffff;
  border-radius: 20px;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.04),
    0 2px 6px rgba(0,0,0,0.03);
  text-align: center;
}

.thanks-title {
  font-size: clamp(20px, 2.6vw, 26px);
  letter-spacing: 0.04em;
  margin-bottom: 20px;
  font-weight: 500;
  color: #5c3a3a; /* やさしいローズブラウン */
}

.thanks-text {
  font-size: 14px;
  line-height: 1.9;
  color: #6f5a5a;
  margin-bottom: 36px;
}

.thanks-btn {
  display: inline-block;
  padding: 12px 36px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #c83c4c,
    #a52a3a
  );
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.06em;
  transition: transform .25s ease, box-shadow .25s ease;
}

.thanks-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(200,60,76,0.25);
}

/* Access page */
.access-wrap{
  width: min(800px, calc(100% - 20px)); /* SP左右10px */
  margin: 28px auto 56px;
}

.access-head{
  text-align: center;
  margin-bottom: 18px;
}

.access-title{
  font-size: clamp(20px, 3vw, 28px);
  margin-bottom: 8px;
  font-family:
    "Century Gothic",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    "Noto Sans JP",
    sans-serif;
  color: #C62E5B;
}

.access-sub{
  margin: 6px 0 0;
  font-size: 16px;
  letter-spacing: .04em;
  color: #444;
  font-family:
    -apple-system, BlinkMacSystemFont,  /* iPhone/Macの標準ゴシック */
    "Segoe UI",                         /* Windows */
    "Helvetica Neue", Arial,
    "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo",
    sans-serif;
}

.access-card{
  padding: 18px;
  gap: 16px;
}

.access-name{
  margin: 0 0 10px;
  font-size: 16px;
  letter-spacing: .04em;
  color: #444;
  font-family:
    -apple-system, BlinkMacSystemFont,  /* iPhone/Macの標準ゴシック */
    "Segoe UI",                         /* Windows */
    "Helvetica Neue", Arial,
    "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo",
    sans-serif;
}

.access-addr{
  margin: 0 0 14px;
  line-height: 1.9;
  opacity: .92;
}

.access-dl{
  margin: 0 0 14px;
  display: grid;
  gap: 10px;
}

.access-row{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.access-row dt{
  font-size: 12px;
  letter-spacing: .12em;
  opacity: .75;
}

.access-row dd{
  margin: 0;
}

.access-route{
  margin-top: 14px;
}

.access-route-ttl{
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: .08em;
  opacity: .9;
}

.access-list{
  margin: 0;
  padding-left: 1.1em;
  line-height: 1.9;
  opacity: .92;
}

.access-link{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.35);
  padding-bottom: 1px;
}
.access-link:hover{
  border-bottom-color: rgba(255,255,255,.75);
}

.access-info.access-sub{
  font-size: 16px;
  letter-spacing: .04em;
  color: #444;
  font-family:
    -apple-system, BlinkMacSystemFont,  /* iPhone/Macの標準ゴシック */
    "Segoe UI",                         /* Windows */
    "Helvetica Neue", Arial,
    "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo",
    sans-serif;
}
/* map */
.access-map{
	margin-top: 20px;
}
.map-embed{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.map-embed iframe{
  display: block;
  width: 100%;
  height: 280px; /* SP */
}

.map-note{
  margin: 10px 0 0;
  font-size: 12px;
  opacity: .85;
}

/* PC: 2カラム */
@media (min-width: 768px){
  .access-card{
    padding: 22px;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: start;
  }
}

  .map-embed iframe{
    height: 320px;
  }

.company-profile__bank{
  margin: 0;
  padding: 0;
}

.company-profile__bank li{
  list-style: none;   /* ← 黒点を消す */
  padding-left: 0;
  margin-left: 0;
}
html, body {
  font-family:
    -apple-system, BlinkMacSystemFont,
    "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    "Yu Gothic", "YuGothic",
    "Meiryo",
    "Helvetica Neue", Arial,
    sans-serif;
}

/* iPhoneで一部だけ別フォントになる事故防止 */
button, input, select, textarea {
  font-family: inherit;
}

/* company-profile__bank の黒点（リストマーカー/擬似要素）を完全に消す */
.company-profile__bank{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.company-profile__bank > li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Safari含む marker を殺す */
.company-profile__bank > li::marker{
  content: "" !important;
}

/* どこかで li:before で黒点を作ってる場合の保険（これが本命なこと多い） */
.company-profile__bank > li::before{
  content: none !important;
  display: none !important;
}

.white{
	background-color: #fff;
	padding-bottom: 50px;
	margin-top: 40px;   /* ← ここを追加 */
	
}

.news-banner{
  display: flex;
  justify-content: center;
  margin: 40px auto 36px; /* ← 上だけ40px */
}
.news-banner img{
  max-width: 420px; /* 横長に */
}
@media (max-width: 767px){
  .news-banner img{
    max-width: 280px;
  }
}

.np-title2{
	text-align: center;
	color: #AC1B1B;
}

.video-box{
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* PC（横長） */
.video-pc{
  display: block;
  width: 100%;
  height: 700px;
  object-fit: cover;
  max-width: 1300px;
  margin: 5px auto 0;
  
}

/* SPは隠す */
.video-sp{
  display: none;
}

/* ===== SP ===== */
@media (max-width: 767px){
  .video-pc{
    display: none;
  }

  .video-sp{
    display: block;
    width: 100%;
    height: 50vh;        /* ← 縦長にする決定打 */
    object-fit: cover;
	object-position: center;
  }
}
.brand-section{
  padding-inline: 16px;
  box-sizing: border-box;
  margin: 48px 0;    
}

/* SP：左右の隙間をなくす */
@media (max-width: 767px){
  .brand-section{
    padding-inline: 0;
  }
}

/* 3枚を900pxに収めて中央、隙間0 */
.brand-grid{
  width: min(900px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;                 /* ← 隙間0 */
}

/* クリック領域を画像ぴったりに */
.brand-item{
  display: block;
  overflow: hidden;       /* ← 拡大してもはみ出さない */
  line-height: 0;         /* ← 下の謎の隙間防止 */
}

/* 画像の基本 */
.brand-item img{
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}

/* PCだけホバーでちょい拡大 */
@media (hover: hover) and (pointer: fine){
  .brand-item:hover img{
    transform: scale(1.3);
  }
}
/* ===== スクロールで下から“ふわっ” ===== */
.reveal-up{
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 1.0s ease,
    transform 1.0s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}

.reveal-up.is-show{
  opacity: 1;
  transform: translateY(0);
}

/* 動きが苦手な人用 */
@media (prefers-reduced-motion: reduce){
  .reveal-up{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
.message-section{
  padding: 36px 16px 44px;
  text-align: center;
  color: #fff;
}

.message-section,
.message-section *{
  font-family: "LogoGothic7",
    -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", Arial,
    "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo",
    sans-serif;
}

.msg-title{
  margin: 0 0 18px;
  font-size: 20px;
  letter-spacing: .06em;
  line-height: 1.35;
}

.msg-title span{
  display: inline-block;
  font-size: 16px;
  letter-spacing: .04em;
  margin-top: 4px;
}

.msg-lead{
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .04em;
}

.msg-body{
  margin: 0;
  font-size: 12px;
  line-height: 2.0;
  letter-spacing: .04em;
  opacity: .95;
}

/* NEW Product セクションの画像エリア */
.np-products{
  padding-inline: 16px;     /* SP安全枠 */
  box-sizing: border-box;
  margin: 28px 0 52px;      /* 上下余白（好みでOK） */
}

/* 3つ並び：少し離れ気味 */
.np-products-grid{
  width: min(900px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;                /* ← 離れ気味の距離 */
}

/* クリック領域＋正方形化 */
.np-prod{
  display: block;
  overflow: hidden;
  border-radius: 0;         /* 角丸したければここ */
  line-height: 0;
  aspect-ratio: 1 / 1;      /* ← 正方形 */
}

/* 1000×1000想定でも、枠に合わせて縮小 */
.np-prod img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}

/* PCだけホバーで少し拡大（任意） */
@media (hover: hover) and (pointer: fine){
  .np-prod:hover img{
    transform: scale(1.04);
  }
}


@media (max-width: 767px){
  .np-products{
    padding-inline: 8px;   /* SPだけ少しタイトに */
  }

  .np-products-grid{
    grid-template-columns: repeat(3, 1fr); /* ← 常に3列 */
    gap: 12px;                              /* SPは少し詰める */
    width: 100%;
  }
}

.bottle-img{
  position: relative;
  width: fit-content;
  margin: 0 auto 10px;
}

.bottle-img img{
  display: block;
  transition: opacity 0.3s ease;
}

/* hover用画像を上に重ねる */
.bottle-img .img-hover{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

/* ホバー時に切り替え */
.bottle-item:hover .img-hover{
  opacity: 1;
}

.bottle-item:hover .img-default{
  opacity: 0;
}

.to-top{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: block;
  width: 56px;   /* 画像サイズに合わせて調整 */
  height: 56px;
}

.to-top img{
  width: 100%;
  height: 100%;
  display: block;
}

.sp-br{
  display: none;
}
/* スマホだけ改行表示 */
@media (max-width: 767px){
  .sp-br{
    display: block;
  }
}

.np-prod{
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.np-prod img{
  display: block;
  width: 100%;
  height: auto;
  transition: filter .4s ease, transform .5s ease;
}

.np-more{
  position: absolute;
  left: 50%;
  bottom: 14px;            /* ← 下からの距離（ここで位置調整） */
  transform: translateX(-50%);
  font-family: '07LogoTypeGothic7', sans-serif;

  font-size: 16px;
  color: #fff;
  
  text-shadow:
  0 1px 2px rgba(0,0,0,0.9),
  0 3px 6px rgba(0,0,0,0.7),
  0 6px 14px rgba(0,0,0,0.4);
  background: linear-gradient(
  to top,
  rgba(0,0,0,0.65),
  rgba(0,0,0,0.1)
);
  white-space: nowrap;
}

@media (hover:hover) and (pointer:fine){
  .np-prod:hover img{
    filter: brightness(1.05);
    transform: scale(1.03);
  }
}

.kv475{
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  margin-top: 90px; 
}

.kv475{
  width: 100%;
}

.kv475 img{
  width: 100%;
  display: block;
}



/* 下帯 */
.kv475__bar{
  left: 0;
  right: 0;
  bottom: 0;

  background: #ff4aa2;
  padding: 18px;
  text-align: center;
}

.kv475__bar p{
  color: white;
  font-weight: bold;
  font-size: 20px;
}

.bg-475{
  background-color: #E9BDEC;
}

/* ===== 全体 ===== */
.product-475{
  display: grid;
  gap: 24px;
}

/* ===== 商品 ===== */
.product-item{
  text-align: center;
}

.product-item img{
  width: 100%;
  max-width: 1000px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.product-name{
  margin-top: 12px;
  font-size: 18px;
  color: #fff;
  font-family:  sans-serif;
  font-weight: 400;
  
}


/* ===== PCだけ横並び ===== */
@media (min-width:768px){

  .product-475{
    grid-template-columns: repeat(2,1fr);
    max-width: 1100px;
    margin: 0 auto;
  }

}

.product-more{
  display: inline-block;
  margin-top: 14px;
  padding: 10px 22px;

  border: 1px solid #ff4aa2;
  color: #ff4aa2;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .08em;
  font-family: '07LogoTypeGothic7', sans-serif;
  transition: all .3s ease;
}

/* ホバー（PCだけ） */
@media (hover:hover){
  .product-more:hover{
    background: #ff4aa2;
    color: #fff;
  }
}

.img-center{
  width: 100%;
  height: auto;
  display: block;
  margin-top: 90px;
}

/* PC */
@media (min-width:768px){
  .img-center{
    max-width: 600px;
    margin: 130px auto 0;
  }
}

.series-catch{
  margin-top: 10px;
  max-width: 600px;
  margin-inline: auto;

  background: #000;
  color: #fff;

  padding: 10px 14px;

  font-family: sans-serif;
  text-align: center;
  font-weight: 600;
}

.product-more2{
  display: inline-block;
  margin-top: 14px;
  padding: 10px 22px;

  border: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .08em;
  font-family: '07LogoTypeGothic7', sans-serif;
  transition: all .3s ease;
}

/* ホバー（PCだけ） */
@media (hover:hover){
  .product-more2:hover{
    background: #333;
    color: #fff;
  }
}