@charset "utf-8";

/* ==========================================================
   farfalle × anana コラボページ専用CSS
========================================================== */

/* 💡 FutureShopのメインエリア制限を解除（全幅対応） */
#fs_CustomPage #mainarea {
  width: 100%;
  max-width: unset;
  padding: 0;
}

/* 💡 カラー・フォントの変数定義 */
:root {
  --ffana-color-main: #4a4a4a; 
  --ffana-color-accent: #8e947c; 
  --ffana-color-bg: #faf9f7; 
  --ffana-color-border: #e6e6e6;
  --ffana-font-jp: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --ffana-font-en: 'Montserrat', sans-serif;
}

/* 💡 ベース設定 */
.ffana-wrapper {
  font-family: var(--ffana-font-jp);
  color: var(--ffana-color-main);
  background-color: var(--ffana-color-bg);
  line-height: 1.8;
  font-size: 14px;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}
.ffana-wrapper img { max-width: 100%; height: auto; vertical-align: bottom; }
.ffana-wrapper a { color: var(--ffana-color-main); text-decoration: none; transition: opacity 0.3s ease; }
.ffana-wrapper a:hover { opacity: 0.7; }


/* --- 文節をまとめる（スマホでの不自然な改行防止） --- */
.ffana-lead .text-chunk {display: inline-block;}

/* --- PCとスマホでの改行（br）の出し分け --- */
/* 基本（スマホ）は非表示にする */
.pc-only {display: none;}


/* 💡 トップメインビジュアル */
.ffana-top-kv { margin: 0; padding: 0; line-height: 0; }
.ffana-top-kv img { width: 100%; display: block; height: auto; }

/* 💡 イントロダクション */
.ffana-intro { text-align: center; padding: 60px 20px; }
.ffana-intro-txt { font-size: 16px; font-weight: bold; margin-bottom: 30px; letter-spacing: 0.15em; }
.ffana-intro-logo img {
  width: 100%;          /* 親要素に対して100%の幅にする（スマホで縮小させるため） */
  max-width: 500px;     /* ただし、最大幅は500pxでストップさせる（PCで巨大化させないため） */
  height: auto;         /* 縦横比を崩さずに可変させる */
  margin-bottom: 30px;
}
/* 補足：ロゴエリア全体の中央揃え（もし必要であれば） */
.ffana-intro-logo-area {
  text-align: center; 
}
.ffana-intro h1, .ffana-lead { font-size: 12px; font-weight: normal; margin: 0; line-height: 2.2; letter-spacing: 0.05em; }

/* about anana */
.ffana-about { padding: 30px 20px; background-color: var(--ffana-color-bg); }
.ffana-inner { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; }
.ffana-img { width: 100%; }
.ffana-img img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.ffana-txt-box { width: 100%; padding: 10px 0; text-align: left; }
/* About anana ヘッダー周り（ベースはスマホ向け）*/
.ffana-about-header {
  display: flex;
  justify-content: flex-start; /* ※現在の設定（flex-start や space-between）のままでOKです */
  
  /* ▼ ここが最重要：縦の中央揃え(center)から、上揃え(flex-start)に変更 ▼ */
  align-items: flex-start; 
  
  flex-wrap: nowrap;
  gap: 24px; /* 見出しとアイコンの距離 */
  margin-bottom: 25px;
}
/* h2自体の余白を調整（元のデザインによって微調整してください） */
.ffana-ttl {
  margin: 0;
  flex-shrink: 0; /* 見出しが潰れるのを防ぐ */
}
.ffana-ttl { margin-bottom: 30px; }
.ffana-ttl .en { display: block; font-family: var(--ffana-font-en); font-size: 22px; font-weight: bold; letter-spacing: 0.1em; color: var(--ffana-color-main); }
.ffana-ttl .jp { display: block; font-size: 11px; color: #888; margin-top: 4px; letter-spacing: 0.05em; }
.ffana-catch { font-size: 18px; font-weight: normal; letter-spacing: 0.1em; margin-bottom: 20px; color: var(--ffana-color-main); }
.ffana-txt-box .pc-only { display: none; }

/* SNSアイコンエリア */
.ffana-sns-links {
  display: flex;
  gap: 2px; /* スマホ時のアイコン同士の隙間 */
  flex-shrink: 0;
}
.ffana-sns-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4a4a4a;
  text-decoration: none;
  transition: opacity 0.3s ease;
  /* スマホでのタップ領域を広げるための透明な余白（UX対策） */
  padding: 4px;
}
/* ホバー時の半透明エフェクト（CSSで制御） */
.ffana-sns-item:hover {
  opacity: 0.7;
}
/* スマホ用のアイコンサイズ（少し控えめに設定） */
.ffana-sns-item svg {
  width: 40px; /* 文字がない分、少しだけ存在感を出す */
  height: 40px;
  flex-shrink: 0;
}
/* アイコン下のテキスト */
.ffana-sns-txt {
  font-family: "Montserrat", sans-serif;
  font-size: 9px;
  letter-spacing: 0;
  font-weight: bold;
}



/* スタイリング */
.ffana-styling {
  padding: 60px 20px;
  background-color: var(--ffana-color-bg); /* 上品なグレー背景 */
  text-align: center;
}
.ffana-styling-inner {
  margin: 0 auto;
  max-width: 1000px; /* PCで画像が際限なく巨大化するのを防ぐ */
}
/* 画像のレスポンシブ設定 */
.ffana-styling-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 💡 プロダクト一覧（スマホ1カラム） */
.ffana-product { padding: 40px 20px 60px; max-width: 1000px; margin: 0 auto; }
.ffana-product h2 { text-align: center; font-family: var(--ffana-font-en); font-size: 24px; margin-bottom: 20px; letter-spacing: 0.1em; }

/* 導入テキストのスタイル */
.ffana-product-intro {
  text-align: center; /* 中央揃え */
  margin: 0 0 30px 0; /* h2と商品リストの間の余白を調整 */
  line-height: 1.6; /* 読みやすい行間 */
  font-size: 12px; /* スマホで主張しすぎない上品なサイズ */
  color: #666; /* 上品なグレー */
  letter-spacing: 0.05em; /* 少し字間を空けることで抜け感を出し、大人っぽく */
}
.ffana-product-list { display: grid; grid-template-columns: 1fr; gap: 40px; list-style: none; padding: 0; margin-bottom: 0; }
.ffana-product-item { background: #fff; padding-bottom: 20px; text-align: center; }
.ffana-product-item img { margin-bottom: 15px; width: 100%; height: auto; }
.ffana-product-name { font-weight: bold; margin-bottom: 5px; font-size: 16px; }
.ffana-product-txt { font-size: 13px; color: #888; margin-bottom: 8px; }

/* 価格のスタイル */
.ffana-product-price { 
  font-family: var(--ffana-font-en); 
  font-size: 15px; 
  font-weight: bold; 
  color: var(--ffana-color-main); 
  margin-bottom: 20px; 
  letter-spacing: 0.05em; 
}
.ffana-product-price span { 
  font-family: var(--ffana-font-jp); 
  font-size: 11px; 
  font-weight: normal; 
  color: #888; 
  margin-left: 4px; 
}
.ffana-more-btn a { display: inline-block; background-color: var(--ffana-color-main); color: #fff; padding: 12px 20px; font-size: 13px; border-radius: 4px; width: 80%; max-width: 280px; }

/*------test------*/
.ffana-page-haed{
  background: #53565a;
  color: #fff;
  text-align: center;
  letter-spacing: 1px;
  padding: 4px 0;
}
.ffana-page-haed a{
  text-align: center;
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ffana-page-haed a:after{
  content: '>';
  display: inline-block;
  margin-left: 3px;
  font-size: 1.4em;
}
.ffana-page-haed a span{
  background-image: url(./images/logo.svg);
  background-repeat: no-repeat;
  background-size: 1em;
  background-position: left center;
  padding-left: 1.2em;
}
.ffana-page-haed.fixed{
  position: fixed;/*fixedを設定して固定*/
  z-index: 90;/*最前面へ*/
  top:0;/*位置指定*/
  left:0;/*位置指定*/
  width:100%;
}
/*------test------*/

/* =========================================
   ページ最下部 ボトムCTAエリア
========================================= */
.ffana-bottom-cta {
  padding: 30px 20px; /* 上下にゆったりとした余白を取り、フッターと区切る */
  background-color: #f9f9f9; /* ページ全体の背景色に合わせて調整してください */
  text-align: center;
}

.ffana-bottom-cta-inner {
  max-width: 400px; /* PC画面でボタンが横に長くなりすぎるのを防ぐ */
  margin: 0 auto;
}

/* =========================================
   メインボタンのスタイリング（上品で押しやすいデザイン）
========================================= */
.ffana-btn-primary {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 18px 24px;
  background-color: #735c5c !important; /* ★変更: 強制的に黒にする */
  color: #ffffff !important;            /* ★変更: 強制的に白にする */
  border-radius: 50px;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-decoration: none !important;  /* ★変更 */
  transition: all 0.3s ease;
}

/* ホバー時のアクション（PC向け） */
.ffana-btn-primary:hover {
  background-color: #555 !important; /* ★変更 */
  color: #fff !important;            /* ★変更 */
}

/* 矢印アイコンの微調整 */
.ffana-btn-primary svg {
  transition: transform 0.3s ease;
}

/* ホバー時に矢印が少し右に動く（クリックを促すマイクロインタラクション） */
.ffana-btn-primary:hover svg {
  transform: translateX(5px);
}

/* =========================================
   PC・タブレット向けの調整 (画面幅768px以上)
========================================= */
@media screen and (min-width: 768px) {
  .ffana-bottom-cta {
    padding: 80px 20px; /* PCは余白をさらに広くして特別感を出す */
  }
  
  .ffana-btn-primary {
    font-size: 15px; /* PCでは文字を少し大きく */
    padding: 20px 30px;
  }
}







/* PC向けレスポンシブ（768px以上） */
@media screen and (min-width: 768px) {
  
  .pc-only {display: inline;}
  
  /* プロダクト一覧 PC3カラム */
  .ffana-product-list { grid-template-columns: repeat(3, 1fr); gap: 30px; }
  .ffana-product-name { font-size: 14px; }
  .ffana-product-intro {
    font-size: 14px;       /* PCでは少しだけサイズアップ */
    margin-bottom: 40px;   /* PCは余白を少し広めにとる */}
  
  /* イントロダクション */
  .ffana-intro h1 { font-size: 16px; }
  
  /* スタイリング */
  .ffana-styling {
    padding: 80px 20px; /* PCは画面が大きいので上下の余白を少し広めにとる */
  }


  /* コラボ紹介セクション PCレイアウト */
  .ffana-about { padding: 80px 20px; }
  .ffana-inner { flex-direction: row; align-items: center; gap: 60px; }
  .ffana-img { width: 50%; }
  .ffana-txt-box { width: 50%; padding: 0; }
  .ffana-ttl .en { font-size: 26px; }
  .ffana-catch { font-size: 22px; }
  .ffana-txt-box .pc-only { display: inline; }
  
  .ffana-about-header {
    justify-content: flex-start; /* ★両端に引き離すのをやめ、左詰めに変更 */
    gap: 16px; /* PC画面では少し距離を離して、ゆとり（抜け感）を持たせる */
  }
  
  .ffana-sns-links {
    gap: 10px; /* PCは画面が広いので隙間をゆったりと */}
  
  .ffana-sns-item {
    gap: 8px; /* アイコンと文字の隙間を広げる */}

  .ffana-sns-item svg {
    width: 36px; /* PCでは特大サイズで視認性を上げる */  height: 36px;}
  
  .ffana-sns-txt {
    font-size: 11px;  letter-spacing: 0.1em;}

}