@charset "utf-8";
/* ========== 基本初期化 ========== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section {
  display: block;
}

/* 文字関連 */
body {
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;  /* iOS拡大防止 */
  font-family: "Noto Sans JP", "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
  color: #333;
  background: #fff;
}

/* 見出しリセット */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.4;
}

/* リンクのリセット */
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a:hover, a:focus {
  opacity: 0.85;
}

/* リストのリセット */
ul, ol {
  list-style: none;
}

/* 画像のリセット */
img {
  max-width: 100%;
  height: auto;
  display: block;
  border: none;
  vertical-align: middle;
}

/* テーブルのリセット */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ボタン・フォーム要素 */
button, input, select, textarea {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  outline: none;
}
button {
  cursor: pointer;
}

/* strong, emなどの装飾強調 */
strong { font-weight: bold; }
em { font-style: italic; }

/* hr線を消す（明示的にCSSで作る） */
hr {
  border: 0;
  height: 0;
  margin: 0;
}

/*  box-sizing指定  */
*, *::before, *::after {
  box-sizing: border-box;
}

/*  スクロールバーやフォーカスの初期化  */
:focus {
  outline: none;
}

/*  iframeや動画などのレスポンシブ対応  */
iframe, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/*  imgのドラッグを防止  */
img {
  -webkit-user-drag: none;
  user-select: none;
}
/* 全体背景 */body {
  background-color: #FAF7E8;
  color: #565353;
}


/* PC最大幅：1440px（中央寄せ） */
.kv-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  width: 100%;                
  max-width: 1440px;          
  margin-inline: auto;        
}

.kv {
  position: relative;
  display: flex;              
  flex-direction: column;
}

/* 写真本体（角丸＋影） */
.kv-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  background: #eee;           /* ローディング中の下地 */
}

/* ロゴ（中央重ね） */
.kv-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;             
  align-items: center;
  justify-content: center;
  width: clamp(120px, 28vw, 240px);  
  height: auto;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.25));
  pointer-events: none;       
  user-select: none;
}

@media (min-width: 1024px) {
  .kv-wrap { padding-top: 16px; gap: 10px; }
}

/* カード本体 */
.card {
  background-color: #FDFCF9;          
  border-radius: 16px;
  border: 1px solid #E1DED6;          
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);  
  padding: clamp(28px, 5vw, 48px);
  margin: clamp(24px, 6vw, 64px) auto;
  width: min(960px, 90%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.9;
  letter-spacing: 0.03em;
  font-size: clamp(15px, 2.5vw, 17px);
  color: #565353;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* タイトル（英字） */
.card-title {
  font-family: "Playfair Display", "Noto Serif JP", serif;
  font-size: clamp(24px, 5vw, 32px);
  color: #333;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.8em;
}

/* 小見出し */
.card-subtitle {
  font-weight: 500;
  font-size: clamp(16px, 4vw, 20px);
  color: #6a665f;
  border-bottom: 1px solid #DAD4C9;
  padding-bottom: 0.4em;
  margin-bottom: 0.8em;
}

/* テキスト */
.card p {
  max-width: 720px;
  margin: 0 auto;
  color: #565353;
}

/* 画像 */
.card figure {
  width: 100%;
  margin: 0 0 1.5em;
  border-radius: 12px;
  overflow: hidden;
}
.card figure img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s ease;
}
.card figure:hover img {
  transform: scale(1.03);
}

.btn {
  display: inline-block;
  margin-top: 1.8em;
  padding: 12px 36px;
  border: 1px solid #CFAC02;       
  color: #565353;
  border-radius: 999px;
  font-size: 0.95em;
  text-decoration: none;
  background-color: #fff;
  letter-spacing: 0.08em;
  transition: all 0.35s ease;
}

.btn:hover {
  background-color: #CFAC02;
  color: #fff;
  box-shadow: 0 4px 12px rgba(207, 172, 2, 0.3);
}

.card-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  margin-top: 40px;
}

.card-list .card {
  flex: 1 1 calc(50% - 32px);
  background-color: #FFFFFF;
  border: 1px solid #EAE6DB;
}

@media (max-width: 768px) {
  .card-list .card {
    flex: 1 1 100%;
  }
}

/* ギャラリーカードの見た目（余白・影） */
.gallery-card{
  background: #fff;
  border: 1px solid #e5e1d9; 
  box-shadow: 0 10px 30px rgba(0,0,0,.07);
  margin: 40px auto;
  padding: 24px 18px;
  max-width: 960px;
}

/* 見出し */
.gallery-head{
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  letter-spacing: .12em;
  text-align: center;
  color: #333;
  margin-bottom: 18px;
}

/* ----------
   ギャラリー
-------------- */

.gallery-row{
  display: flex;           
  gap: 12px;                
  margin-bottom: 12px;
}

.gallery-row.two .gallery-item{
  flex: 1 1 calc(50% - 6px); 
}

.gallery-row.one .gallery-item{
  flex: 1 1 100%;
}

.gallery-row.two .gallery-item{
  aspect-ratio: 4 / 3;      
}
.gallery-row.one .gallery-item{
  aspect-ratio: 16 / 9;    
}

/* a要素を比率ボックス化 */
.gallery-item{
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #ddd;         
}

.gallery-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;        
  object-position: center;
  display: block;
  transition: transform .3s ease;
}

@media (hover:hover){
  .gallery-item:hover img{ transform: scale(1.03); }
}



/* =================
   AMARU. 共通フッター
==================== */
.footer{
  background: #C8C8CA;             
  border-top: 1px solid #BEBEBE;
  color: #333;                      
}
.footer-inner{
  width: min(960px, 92%);
  margin: 0 auto;
  padding: clamp(28px, 6vw, 56px) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(16px, 3vw, 28px);
}

/* ロゴ（トップへ） */
.footer-logo{ 
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
}
.footer-brand img{
  width: clamp(120px, 24vw, 180px);
  height: auto;
  display: block;
}

/* 見出し */
.footer-heading{
  font-size: clamp(14px, 2.6vw, 16px);
  letter-spacing: .28em;
  color: #3c3c3c;
  margin: .5em 0 1em;
}

/* 住所ブロックと「ご予約は」の間に余白 */
.footer-info{
  display:flex; 
  flex-direction:column; 
  align-items:center;
  gap: 14px;
}
.footer-address{ 
  margin-bottom: 16px; 
}
.footer-address p{
 margin: .2em 0; 
}

/* ご予約は */
.footer-howto{ margin-top: 8px; 
}
.footer-howto > p{
  font-size: clamp(16px, 3.6vw, 18px);
  font-weight: 600;
  letter-spacing: .12em;
  margin: .2em 0 .5em;
  color: #2f2f2f;
}
.footer-list{
  list-style: none;
  padding-left: 0;
  margin: .4em 0 0;
}
.footer-list li{
 margin: .25em 0; 
}

/* TEL 行 */
.footer-tel{
  display:flex; 
  align-items:center; 
  justify-content:center;
  gap:16px; margin-top:.8em; 
  letter-spacing:.2em;
}
.footer-tel-label{ 
  font-size: clamp(16px, 3vw, 20px); 
}
.footer-tel-link{ font-size: clamp(22px, 6vw, 28px); 
  color:#111; text-decoration:none; 
}

/* 予約バナー */
.footer-actions{ 
  display:flex; 
  flex-direction:column; 
  align-items:center; gap:18px; 
}
.footer-hpb img{ 
  width: clamp(160px, 40vw, 220px); 
  height:auto; display:block; 
}

/* SNS  */
.footer-sns{ 
  display:flex; 
  gap:22px; 
  align-items:center; 
  justify-content:center; 
}

.sns-link{
  display:inline-block;
  line-height: 1;
  text-decoration: none;
  background: none;               
  border: none;
  transform: translateZ(0);       
}
.sns-link i{
  font-size: 32px;                
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ブランド色（Instagram / LINE） */
.sns-instagram i{ 
  color: #E4405F; 
}
.sns-line i{ 
  color: #06C755; 
}

@media (hover:hover){
  .sns-link:hover{ transform: translateY(-1px); opacity: .9; }
}

/* コピーライト */
.footer-copy{
  color:#3f3f3f;
  letter-spacing:.12em;
}

/* PCで余白少し広げる */
@media (min-width:768px){
  .footer-inner{ gap:28px; }
}
/* ====
  カード
====== */
.card{ 
  margin-top: clamp(20px, 4vw, 36px); /*clamp柔軟に*/
}

/* =====
  料金表
======== */

.price-card{
  background: #FDFCF9;                   
  border: 1px solid #E1DED6;             /* 薄い枠線 */
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  width: min(880px, 92%);
  margin: clamp(24px, 5vw, 48px) auto;
  padding: clamp(24px, 5vw, 40px);
  color: #565353;
}

/* タイトル */
.price-title{
  text-align: center;
  letter-spacing: .25em;
  color: #565353;
  font-size: clamp(16px, 3vw, 18px);
  margin-bottom: 1.2em;
}

/* 注意書き */
.price-note{
  font-size: clamp(12px, 2.8vw, 13px);
  color: #7a766e;
  line-height: 1.8;
  margin: .25em 0;
}

/* セクション小見出し */
.price-section-sub{
  margin: 1.4em 0 .8em;
  color: #6a665f;
  font-size: clamp(14px, 3.2vw, 15px);
  font-weight: 600;
}

/* テーブル全体 */
.price-table{
  display: flex;             
  flex-direction: column;
  gap: 0;
  margin-top: 10px;
}

/* 行の共通スタイル */
.price-row{
  display: flex;              /* 左右2カラム */
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  border-bottom: 1px dotted #C7C1B8;   /* 各行の下に点線 */
}

/* 見出し行 */
.price-head{
  border-bottom: 1px solid #C7C1B8;    /* 見出しだけ実線 */
  font-weight: 600;
  color: #6a665f;
  letter-spacing: .06em;
  padding-top: 8px;
  padding-bottom: 10px;
}

/* 左カラム：時間帯 */
.price-col.time{
  flex: 1 1 auto;                       
  text-align: left;
  font-size: clamp(14px, 3.4vw, 15px);
  color: #565353;
  white-space: nowrap;
}

/* 右カラム：料金 */
.price-col.fee{
  flex: 0 0 auto;                       
  text-align: right;
  min-width: 6em;                       
  font-size: clamp(14px, 3.4vw, 15px);
  letter-spacing: .05em;
  color: #333;
  white-space: nowrap;
}

.price-row:last-child{
  border-bottom: 1px dotted #C7C1B8;
}

@media (max-width: 480px){
  .price-card{ padding: 20px; }
  .price-row{ padding: 12px 0; }
}



/* ===============================
   ギャラリー（HAIR/KIMONO/NEIRU 共通）
================================== */

.gallery-block{
  width: min(820px, 90%);                 
  margin: clamp(20px, 5vw, 36px) auto;
  background: #FDFCF9;
  border: 1px solid #E1DED6;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.05);
  padding: clamp(16px, 4vw, 20px);
}

.gallery-head{
  text-align: left;
  letter-spacing: .18em;
  color:#6a665f;
  font-size: clamp(14px, 3.6vw, 16px);
  margin: 2px 0 12px;
}

.gallery-grid{
  display: flex;                
  flex-wrap: wrap;
  gap: 14px;
}

.gallery-item{
  flex: 1 1 calc((100% - 14px * 2) / 3);  
  aspect-ratio: 3 / 4;                    
  border-radius: 10px;
  overflow: hidden;
  background: #ddd;
}

.gallery-item img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .3s ease;
}

@media (hover:hover){
  .gallery-item:hover img{ transform: scale(1.03); }
}

/* --- スマホは2列に --- */
@media (max-width: 599px){
  .gallery-item{
    flex: 1 1 calc((100% - 14px) / 2);    /* 2列 */
    aspect-ratio: 4 / 5;                  
  }
}
/* Hot Pepper Beauty バナー */
.footer-links {
  text-align: center;
  margin-top: 12px;
}

.footer-booking-text {
  font-size: clamp(14px, 3vw, 16px);
  color: #565353;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}

.footer-booking-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-booking-list a {
  color: #A89056; 
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-booking-list a:hover {
  color: #CFAC02; 
}

.footer-map figure {
  width: min(960px, 96%);
  margin: clamp(12px, 3vw, 22px) auto 0;
  border-radius: 12px;
  overflow: hidden;
  background: #f2f2f2;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.08);
}
.footer-map iframe {
  display: block;
  width: 100%;
  height: clamp(300px, 45vw, 420px);
  border: 0;
}

/* ===== 共通：注意カード ===== */
.notes-card {
  background: #fffdfa;                 
  border: 1px solid #e4e0d7;           
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,.05);
  padding: clamp(24px, 5vw, 40px);
  width: min(960px, 94%);
  margin: clamp(28px, 6vw, 48px) auto;
  color: #565353;
  line-height: 1.9;
  letter-spacing: .03em;
}

.notes-card .notes-title {
  display: flex;                       
  justify-content: center;
  align-items: center;
  gap: .6em;
  font-size: clamp(16px, 3.4vw, 18px);
  font-weight: 600;
  color: #3b3b3b;
  letter-spacing: .05em;
  margin: 0 0 clamp(16px, 3vw, 22px);
  text-align: center;
}

.notes-card .notes-title i {           /* Font Awesome の ! アイコン */
  color: #bda87f;                      /* 金ベージュ */
  font-size: 1.2em;
}

.notes-card .notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notes-card .notes-list li {
  position: relative;
  padding-left: 1.2em;
  font-size: clamp(14px, 3vw, 15.5px);
  color: #555;
  margin: .45em 0;
}
.notes-card .notes-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  color: #b89d68;
  font-weight: 700;
}

/* ふわっと出現 */
.fx-initial { 
  opacity: 0; 
  transform: translateY(16px); 
  transition: opacity .8s ease, transform .8s ease; 
}
.fx-initial.is-in { 
  opacity: 1; 
  transform: none; 
}
@media (prefers-reduced-motion: reduce) {
  .fx-initial { opacity: 1 !important; transform: none !important; transition: none !important; 
  }
}

/* ==========
   フッターロゴ
============ */
.footer-logo img {
  display: block;
  width: clamp(100px, 14vw, 140px); 
  height: auto;
  margin: 0 auto 1.5em; 
  transition: transform 0.3s ease;
}

.footer-logo img:hover {
  transform: scale(1.03); /* ほんのり拡大アニメ */
}

/* =======================
   CTAセクション（中央ボタン用）
========================== */
.cta-section {
  text-align: center;
  margin: clamp(28px, 6vw, 60px) auto;
}

.cta-center {
  display: flex;
  justify-content: center;
}

/* ==============================
   KIMONO：着物レンタル案内（料金の下）
============================= */
.kimono-rental {
  background: #FDFCF9;
  border: 1px solid #E1DED6;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  width: min(960px, 92%);
  margin: clamp(24px, 6vw, 56px) auto;
  padding: clamp(22px, 5vw, 38px);
  text-align: left;
  color: #565353;
  line-height: 1.9;
  letter-spacing: .03em;
}

/* タイトル */
.kimono-rental-title{
  text-align: center;
  font-family: "Playfair Display","Noto Serif JP",serif;
  font-size: clamp(18px, 4.6vw, 20px);
  letter-spacing: .28em;
  color: #6a665f;
  margin: 0 0 1em;
}

.kimono-rental-lead{
  display: flex;               
  justify-content: center;
  margin-bottom: clamp(14px, 4vw, 20px);
}
.kimono-rental-lead p{
  max-width: 38em;
  margin: 0;
  text-align: center;
}
/* 着物レンタル注意文（インスタ行との間に余白） */
.kimono-rental .price-note {
  margin-bottom: clamp(16px, 3vw, 28px);
}


/* Instagram誘導行 */
.kimono-rental-instagram{
  display: flex;               
  align-items: center;
  justify-content: center;
  gap: .6em;
  margin: clamp(10px, 3vw, 16px) 0 clamp(14px, 4vw, 22px);
  letter-spacing: .12em;
}
.kimono-rental-instagram .insta-ic{ 
  font-size: 1.05em; 
}
.kimono-rental-instagram .insta-link{
  color: #A89056;               
  text-decoration: none;
  border-bottom: 1px dotted #C7C1B8;
  transition: color .25s ease, border-color .25s ease;
}
.kimono-rental-instagram .insta-link:hover{
  color: #CFAC02;               
  border-color: #CFAC02;
}

/* サムネの横並び */
.kimono-rental-thumbs{
  display: flex;                
  gap: clamp(10px, 3vw, 16px);
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;              
  margin-top: clamp(10px, 3vw, 18px);
}

.kimono-rental-thumbs .thumb{
  flex: 1 1 180px;              
  max-width: 280px;             
  border-radius: 12px;
  overflow: hidden;
  background: #eee;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
}

.kimono-rental-thumbs .thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;            
  display: block;
  transition: transform .35s ease;
}

@media (hover:hover){
  .kimono-rental-thumbs .thumb:hover img{
    transform: scale(1.03);     
  }
}

@media (max-width: 600px){
  .kimono-rental-thumbs{ gap: 12px; }
}
/* ==============
   Instagramリンク
================= */
.kimono-rental-instagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  margin: clamp(10px, 3vw, 16px) 0 clamp(14px, 4vw, 22px);
  letter-spacing: .12em;
}

/* インスタアイコン */
.kimono-rental-instagram .insta-ic {
  font-size: 1.2em;
  color: #A89056;                
  transition: color .3s ease, transform .3s ease;
}

/* リンク本体 */
.kimono-rental-instagram .insta-link {
  color: #A89056;
  text-decoration: none;
  border-bottom: 1px dotted #C7C1B8;
  transition: color .3s ease, border-color .3s ease;
}

/* ホバー時 */
.kimono-rental-instagram:hover .insta-ic {
  color: #CFAC02;                
  transform: scale(1.1);
}
.kimono-rental-instagram:hover .insta-link {
  color: #CFAC02;
  border-color: #CFAC02;
}

/* ==============
   Hot Pepper誘導
================= */
.hp-guide{
  background:#FDFCF9;
  border:1px solid #E1DED6;
  border-radius:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
  width:min(960px,92%);
  margin:clamp(24px,6vw,56px) auto;
  padding:clamp(22px,5vw,38px);
  color:#565353; line-height:1.9; letter-spacing:.02em;
}
.hp-title{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  font-family:"Playfair Display","Noto Serif JP",serif;
  font-size:clamp(18px,4.6vw,20px);
  letter-spacing:.28em; color:#6a665f; margin:0 0 .8em;
}
.hp-title i{ 
  color:#A89056; 
}

.hp-lead{ 
  text-align:center; 
  margin:0 auto clamp(14px,4vw,20px); 
  max-width:40em; 
}
.hp-lead strong{ 
  color:#333; 
}

.hp-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: clamp(10px, 3vw, 16px) 0 clamp(12px, 3.6vw, 18px);
}
.hp-btn{
  display:inline-flex; 
  align-items:center; 
  gap:.6em;
  padding:12px 18px; 
  border-radius:999px; 
  text-decoration:none;
  transition:transform .12s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  line-height:1.5;  
  letter-spacing:.06em; 
  white-space:normal;             
  word-break:keep-all;            
}
.hp-btn i{
 font-size:1.05em; 
}
.hp-btn--main{
  background:#F1E9D6; 
  color:#473F2A; 
  border:1px solid #D9CFBA;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.hp-btn--main:hover{
  transform:translateY(-1px);
  background:#EADFC8; 
  border-color:#CFAC02; 
  color:#3d3520;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}


.hp-btn--ghost:hover{ 
  transform:translateY(-1px); 
  border-color:#CFAC02; color:#CFAC02; 
}

.hp-note{ 
  text-align:center; 
  color:#7b7973; 
  font-size:.95rem; 
  margin:0; 
}

@media (max-width: 600px) {
  .hp-btn.hp-btn--main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    
    border-radius: 12px;      
    width: 100%;              
    max-width: 320px;         
    margin-inline: auto;      
    background: #F1E9D6;
    border: 1px solid #D9CFBA;
    padding: 16px 18px;
    line-height: 1.6;
    white-space: normal;
    word-break: keep-all;
  }

  .hp-btn.hp-btn--main i {
    font-size: 1em;
    margin-bottom: 4px;
  }
}



/*  CONTACT：連絡ボタン（LINE / Instagram DM）  */
.contact-actions{
  width: min(960px, 94%);
  margin: clamp(16px, 4vw, 28px) auto 0;
  text-align: center;
}
.contact-buttons{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.contact-card-icon{
 color: #E4405F; 
}

.contact-btn{
  margin: 20px;
}
.contact-btn{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  line-height: 1;
  letter-spacing: .04em;
  border: 1px solid #C7C1B8;          
  background: #fff;
  color: #2b2b2b;
  transition: transform .12s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.contact-btn i{ 
  font-size: 1.05em; 
}

/* LINE（ブランドカラー） */
.contact-btn--line{
  background: #06C755; 
  border-color: #06C755; 
  color: #fff;
}
.contact-btn--line:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(6,199,85,.28);
}

/* Instagram */
.contact-btn--ig{
  background: #fff; color: #A64B6B;           
  border-color: #E1DED6;
}
.contact-btn--ig:hover{
  transform: translateY(-1px);
  background: #FFF7F9;                       
  border-color: #CFAC02;                      /* ゴールドに寄せる */
  color: #8F3F5C;
  box-shadow: 0 8px 22px rgba(207,172,2,.16);
}

.contact-hint{
  margin-top: 8px;
  font-size: .92rem;
  color: #7b7973;
}

.contact-buttons { 
  align-items: stretch; 
}
.contact-btn { 
  min-width: 220px;      
  justify-content: center;
  white-space: nowrap;   
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
#modal[aria-hidden="true"] { display: none; }
#modal.is-open {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  z-index: 9999;
  background: rgba(0,0,0,0.6); /* 背景暗く */
}
#modal .modal-close {
  position: absolute; 
  top: 8px; right: 8px;
  border: 0; 
  background: none; 
  font-size: 28px; 
  cursor: pointer;
}
#modal img.modal-photo { 
  max-width: 90vw; 
  max-height: 90vh; 
  display: block; 
}

/* モーダルの画像に額縁風スタイル */
#modal > img {
  /* マット（台紙） */
  background: #fff;
  padding: 16px;

  /* 額縁 */
  border: 10px solid #b48a3a;        
  border-radius: 6px;

  /* 影 */
  box-shadow: 0 18px 40px rgba(0,0,0,.35);

  /* 余白とサイズ */
  display: block;
  max-width: min(90vw, 1000px);
  max-height: 80vh;          
  height: auto;
}
.pair-heading {
  position: absolute;
  left: -9999px; /* 画面外へ。スクリーンリーダーは読める */
}
.fx-initial { opacity: 0; transform: translateY(20px); transition: 1s ease; }
.fx-initial.is-in { opacity: 1; transform: translateY(0); }




/* --- Tabs --- */
.tabs {
  display: inline-flex;
  gap: 8px;
  margin: 12px 0 20px;
}
.tab {
  appearance: none;
  border: 1px solid #ddd;
  background: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  letter-spacing: .04em;
}
.tab.is-active {
  border-color: #c8b7a6;        /* サイトのベージュ系に合わせてOK */
  background: #f7f3ef;
  font-weight: 600;
}
.tab-panel[hidden] { 
  display: none; 
}
.tab-panel.is-active {
 animation: fade .25s ease; 
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

.notes-card {
  background: #FDFCF9;
  border: 1px solid #E1DED6;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  padding: clamp(22px, 5vw, 38px);
  width: min(960px, 92%);
  margin: clamp(24px,6vw,56px) auto;
}

.notes-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: "Playfair Display","Noto Serif JP",serif;
  font-size: clamp(18px, 4vw, 22px);
  color: #5A5245;
  text-align: center;
  margin-bottom: 0.8em;
}

.notes-lead {
  text-align: center;
  color: #555;
  margin-bottom: 1.2em;
  line-height: 1.8;
  margin: 12px;
}

.notes-list {
  list-style: disc;
  padding-left: 1.5em;
  color: #444;
  line-height: 1.8;
}

/* ==================
   ロゴをもうひとまわり大きく
===================== */
.top-page .brand img,
.brand img {
  height: clamp(110px, 18vw, 180px) !important; /*  !importantで完全上書き */
  width: auto;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.35));
  transition: transform 0.4s ease, filter 0.4s ease;
}

@media (max-width: 599px) {
  .top-page .brand img,
  .brand img {
    height: clamp(130px, 22vw, 190px) !important;
  }
}