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

/*初期設定*/

*,
*::before,
*::after
{
margin: 0;
padding: 0;
box-sizing: border-box;
}

img{
max-width: 100%;
height: auto;
vertical-align:top;
}

.concept {
  position: relative;
  z-index: 10;
}

.cp_container img {
  position: relative;
  z-index: 2;
}

.cp0 {
  pointer-events: none; /* 階段画像クリック無効 */
}


body{
background-image:url("../images/logo/background.png");
min-width: 1280px;/*100px + 1080px + 100px*/
color: #333;
font-family: 'Noto Sans JP', '小塚ゴシック Pr6N', sans-serif;
}
body::before {
  content: "";
  position: fixed; /* ←ここがポイント！スクロールしても背景と一緒に動かない */
  inset: 0;
  background-color: rgba(255, 255, 255, 0.6); /* 白の透過60% */
  z-index: -1;
  pointer-events: none; /* クリックなどの操作に影響しない */
}

html {
  scroll-behavior: smooth;
}
section {
  scroll-margin-top: 100px; /* 固定ヘッダーの高さ分 */
}

h2{
font-family:serif;
font-size: 36px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);   /* 右下にぼかしシャドウ */
}

h3{
font-family:serif;
}

/*サイト幅*/
.container{
width: 1080px;
margin: 0 auto;
}

/*レスポンシブ対応*/

/*ヘッダー部分*/
/* 背景を全幅にする部分 */
.header-innner{
display: flex;/*横並び*/
justify-content: space-between;/*ロゴは左、ナビは右*/
align-items: flex-end;/*ヘッダーの下部に揃える*/
height: 100px;/*設計図の指定*/
padding: 0 15px;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #e84592;
  height: 100px;
}

body {
  padding-top: 100px;
}

h1 img {
display: block;
width: 100px;
height: auto;
padding: 0  0 0 15px;
}

/*ヘッダーこれから*/
/*グローバルナビゲーション*/
.global-nav ul{
list-style: none;
display: flex;
margin: 0;
padding: 0;
}

/* 画像に影をつける */
.global-nav li img {
width: auto;
padding-right: 10px;
vertical-align: middle;
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.8)); /* ←画像用シャドウ */
}

/* 文字に影をつける */
.global-nav a {
color: #333;
text-decoration: none;
display: flex; /* 画像と文字を横並びにする */
align-items: center; /* 高さを揃える */
padding: 0 20px;
margin: 15px 0;
border-left: #333 solid 0.5px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* ←文字用シャドウ */
}

.global-nav a img {
width: 28px;/* アイコンの大きさを調整 */
height: auto;/* テキストとの間隔 */
display: inline-block;/* ベースライン制御のため */
box-shadow: #fff 50%;
}

.global-nav a:hover{
background-color: #8e295e;
}
/*ヘッダーここまで*/


/* ファーストビュー全体 */
.first-view {
  position: relative;
  overflow: hidden;
}

.fvimg{
padding: 50px;
}
/* --- 動画 --- */
.video-bg {
  position: relative;
}
.video-bg video {
  width: 100%;
  height: auto;
  display: block;
  animation: videoFade 3s ease-in-out forwards;
  animation-delay: 7s; /* ←7秒再生後にフェードアウト開始 */
}

/* --- 背景画像 --- */
.fvimg-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  animation: bgFade 3s ease-in-out forwards;
  animation-delay: 9s; /* ←動画フェード後に浮かび上がる */
}

/* --- ロゴ --- */
.fv-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  z-index: 2;
  opacity: 0;
  animation: logoPop 3s ease-out forwards;
  animation-delay: 8s; /* ←背景画像の後に登場！ */
}

.fv-logo img {
  width: 200px;
}

/* --- 動画がフェードアウト --- */
@keyframes videoFade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* --- 背景画像が浮かび上がり、50％で止まる --- */
@keyframes bgFade {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

/* --- ロゴがフェードインしながら200%に拡大 --- */
@keyframes logoPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.5);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(2);
  }
}


/* form 全体を右下固定 */
.form {
  position: fixed;
  right: 50px;   /* 右からの距離 */
  top: 700px;    /* 元の top は保持 */
  z-index: 100;  /* 前面に表示 */
}

/* fma 画像 */
.form .fma {
  position: relative; 
  display: inline-block; 
  width: 100%;
  height: auto;
}

/* フォームボタン fmb */
.form .fmb {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: auto;
  transition: transform 0.5s ease;
  transform-origin: center center;
  z-index: 10;
}

.form .fmb.active {
  transform: scale(100);
}

/* fmc 回転画像 */
.form .fmc {
  position: absolute;
  top: 29%;
  left: 48%;
  width: 80%;
  height: auto;
  transform: translate(-50%, -50%);
  animation: rotate 10s linear infinite;
  transform-origin: center;
	  z-index: 9;
}

/* ホバーで fma 半透明 */
.form:hover .fma {
  opacity: 0.5;
}

/* 回転アニメーション */
@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/*pot button*/
/* コンテナ：画面の左上あたりに固定 */
.pod {
  position: fixed;
  left: 100px;
  top: 150px;
  width: 120px; /* アイコンサイズ確保 */
  height: 120px;
}

/* --- ポット画像（固定で傾いて消える） --- */
.poda {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transform: rotate(0deg);
  opacity: 1;
  z-index: 2;

  animation: potTilt linear both;
  animation-timeline: scroll();
  animation-range: 0% 50%;
}

/* --- カップ画像（下方向に追従） --- */
/* コンテナ：画面の左上あたりに固定 */
.pod {
  position: fixed;
  left: 100px;
  top: 150px;
  width: 140px; /* ポット拡大に合わせて全体を少し広げる */
  height: 140px;
}

/* --- ポット画像（固定で傾いて消える） --- */
.poda {
  position: absolute;
  top: 0;
  left: 0;
  width: 150%; /* ← ポットを120％サイズアップ！ */
  height: auto;
  transform: rotate(0deg);
  opacity: 1;
  z-index: 3; /* ← 液体より上にしておくと重なりが自然 */

  animation: potTilt ease-out both;
  animation-timeline: scroll();
  animation-range: 0%,10%; /* ← フェードアウトを早めに完結させる */
}

/* --- ポットが傾いてフェードアウト --- */


/* --- カップ画像（下方向に追従） --- */
.podb {
  position: absolute;
  top: 140%; /* ポットのすぐ下からスタート */
  left: 10%;
  transform: translateX(-50%) translateY(0);
  width: 80%;
  height: auto;
  z-index: 1;

  animation: cupMove ease-out both;
  animation-timeline: scroll();
  animation-range: 0% 100%;
}
.s {
  position: absolute;
  top: 80%; /* ポットの注ぎ口の位置に合わせる */
  left: 28%;
  width: auto;
  height: 40%;
  object-fit: cover;
  transform-origin: top center;
  opacity: 1;
  z-index: 1;

  animation: pourStretchFollow ease-in-out both;
  animation-timeline: scroll();
  animation-range: 0% 95%; /* 全体で完結（中で区切る） */
}

/* --- 液体が伸びて→フェードアウト --- */
@keyframes pourStretchFollow {
  0% {
    height: 40%;
    transform: translateY(0);
    opacity: 1;
  }
  /* スクロール68%時点で最長・追従 */
 95% {
    height: 100%;
    transform: translateY(230px); /* カップ追従位置 */
    opacity: 1;
  }
  /* 70%以降で徐々にフェードアウト */
 50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* --- ポットが傾いてフェードアウト --- */
@keyframes potTilt {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg);
    opacity: 0;
  }
}

/* --- カップが下方向に追従 --- */
@keyframes cupMove {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  100% {
    transform: translateX(-50%) translateY(260px); /* ← 約1.3倍の距離に調整 */
  }
}


@keyframes pourImg {
  0% {
    height: 0%;
    opacity: 0;
  }
  15% {
    height: 10%;
    opacity: 0.2; /* うっすら見え始める */
  }
  50% {
    height: 100px;
    opacity: 1;
  }
  100% {
    height: 120px;
    opacity: 1;
  }
}



/*ファーストビューここまで*/
.video-bg video {
  width: 100%;
  height: 100vh; /* 画面の高さいっぱい */
}


/*フッターここから*/
.footer-innner {
  display: flex; /* 中の要素を縦中央にしたい場合 */
  flex-direction: column; /* 縦並び */
  justify-content: center; /* 縦中央寄せ */
  align-items: center; /* 横中央寄せ */
}

footer{
background-color: #e84592;/*ヘッダー帯*/
}

footer p{
text-align: center;
padding-bottom: 20px;
}


.footer-innner small {
  color: #333;
  display: block;
  text-align: center;
}


/*グローバルナビゲーション*/

.footer-innner .global-nav2 ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 30px; /* 各リンクの間隔 */
}

.footer-innner .global-nav2 ul li a {
  text-decoration: none;
  color: #333;
}

.global-nav2 ul{
list-style: none;
display: flex;/*横並べ*/
justify-content: center;/*中央揃え*/
padding:20px;
}

.global-nav2 a{
color: #333;
text-decoration: none;
display: block;/*ボタン化*/
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* ←文字用シャドウ */
}

.global-nav2 img{
padding: 20px;
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3)); /* ←画像用シャドウ */
}



.global-nav2 a:hover{
background-color:#8e295e;

}

.global-nav2 img:hover{
background-color:#D8D8D8;	
}
/*フッターここまで*/

/*sec1 商品紹介*/
.product{
height: 1000px;
}

.video-bg {
  position: relative; /* これで絶対配置の基準になる */
  width: 100%;
  height: 100%;
  overflow: hidden;
padding-top: 150px;

}


.text-box {
  position: absolute;
  top: 60%; /* 親の中央 */
  left: 70px; /* 左端から70px */
  transform: translateY(-50%) translateX(-100px); /* 左からスライドイン */
  background-color: rgba(255, 255, 255, 0.5);
  padding: 30px 40px;
  z-index: 2;
  opacity: 0;
  text-align: left;
  max-width: 600px;
  animation: fadeInLeft 5s ease forwards;
}

.video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 2s ease; /* フェード用 */
  opacity: 1; /* 初期はフル表示 */
}

.video-bg video.ended {
  opacity: 0.5; /* 終了後に半透明に */
}

@keyframes fadeInLeft {
  0% {
    transform: translateY(-50%) translateX(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
  }
}


.text-box p {
  font-size: 1.2rem;
  color: #333;
  line-height: 1.6;
  margin: 0;
  font-family: serif; /* フォントをセリフに変更 */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* 右下にぼかしシャドウ */
}

/*sec2 Concept*/


.cp_container {
  position: relative;
  width: 100%;
  height: 600px; /* コンテナ高さ */
}

/* すべての画像のベース */
.cp_container img {
  position: absolute;
  width: auto;
  height: auto;
  transform: translate(0, 0); /* 後で個別に調整 */
}
/*concept*/


/* 基準画像 cp0 */
.cp0 {
  top: 200px;    /* 仮位置 */
  left: 430px;   /* 仮位置 */
  z-index: 5;
}

/* 他の画像 cp1～cp3 をcp0基準で微調整 */
.cp1 {
  top: calc(200px + 0px);  /* cp0より上にpx */
  left: calc(430px + 140px); /* cp0より左にpx */
  z-index: 4;
}

.cp2 {
  top: calc(200px + 50px);  /* cp0より下にpx */
  left: calc(430px + 95px); /* cp0より右にpx */
  z-index: 4;
}

.cp3 {
  top: calc(200px + 100px);  /* cp0より上にpx */
  left: calc(430px + 50px); /* cp0より右にpx */
  z-index: 4;
}

/* 珈琲豆 */
.bs1 {
  top: calc(200px + 1px);
  left: calc(430px + 83px);
  z-index: 3;
}

.bs2 {
    top: calc(200px + 48px);
  left: calc(430px + 40px);
  z-index: 3;
}

.bs3 {
  top: calc(200px + 93px);
  left: calc(430px - 6px);
  z-index: 3;
}
.bs0, .bs1, .bs2, .bs3 {
  /* 右下にぼかしシャドウ */
  filter: drop-shadow(5px 5px 8px rgba(0,0,0,0.5));
}
/* ==========================
   共通アニメーション設定
========================== */
/* ぴょこぴょこ跳ねる豆アニメーション */
.bs1, .bs2, .bs3 {
  position: relative;
  display: inline-block;
  transform-origin: center bottom;
  transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease;
}

/* アニメーションパターン */
.bs1 {
  animation: bounce1 3s ease-in-out infinite;
}
.bs2 {
  animation: bounce2 3.2s ease-in-out infinite 0.3s;
}
.bs3 {
  animation: bounce3 3.5s ease-in-out infinite 0.6s;
}

/* 跳ね方（角度つきでランダム） */
@keyframes bounce1 {
  0%, 100% { transform: translate(0,0) rotate(-10deg); }
  25% { transform: translate(4px,-10px) rotate(-15deg); }
  75% { transform: translate(-3px,-6px) rotate(-8deg); }
}

@keyframes bounce2 {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  25% { transform: translate(0,-12px) rotate(-5deg); }
  75% { transform: translate(2px,-8px) rotate(4deg); }
}

@keyframes bounce3 {
  0%, 100% { transform: translate(0,0) rotate(8deg); }
  25% { transform: translate(-3px,-9px) rotate(15deg); }
  75% { transform: translate(3px,-7px) rotate(10deg); }
}


/* ホバー時の効果 */
a img.bs1:hover,
a img.bs2:hover,
a img.bs3:hover {
  transform: scale(1.3) rotate(0deg);
  filter: brightness(1.1);
  box-shadow: 0 12px 25px rgba(0,0,0,0.25);
  animation-play-state: paused;
}


/*sec3 Line up*/
.lineUp{
height: 1200px;
}
.lineUp .lineup_container {
  position: relative; /* 子を絶対配置する基準 */
  display: inline-block; /* 画像サイズに合わせたい場合 */
}

.lineUp .lineup_container img.lineup {
  display: block;
  width: 100%; /* 必要に応じて調整 */
  height: auto;
}

.lineUp h2 {
  position: absolute;
  top:315%;           /* 画像の中央 */
  left: 23%;          /* 横方向中央 */
  transform: translate(-50%, -50%); /* 完全中央に */
  color: #333;        /* 画像上で見える色に */
  text-align: center;
  z-index: 10;        /* 画像より上に表示 */
}


/*sec4 珈琲タイムの作法*/
.leaflet{
height: 1100px;
}
.time {
  display: flex;            /* Flexboxにする */
  justify-content: center;  /* 横方向中央 */
  align-items: center;      /* 縦方向中央 */
  height: 100%;/* 親コンテナに合わせて中央に */
}


/*sec5 Story*/
/* STORY セクション */
.story-images-full {
  display: flex;
  flex-wrap: nowrap;      /* 折り返し禁止 */
  margin: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;       /* ホバー拡大で折り返さない */
}

.story-images-full img {
  width: calc(100% / 3);  /* 3等分 */
  height: auto;
  object-fit: cover;
  display: block;
  box-sizing: border-box;
  transition: transform 0.8s ease, box-shadow 0.8s ease;
  cursor: pointer;
}

.story-images-full img:hover {
  transform: scale(1.1);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  z-index: 2;
}

.story h3{
	text-align: center;
	font-size: 30px;
}

/*sec6 Gift*/
.gift {
  position: relative;
  height: 1000px;
}


.gift_container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 下の画像（カップ部分） */
.gift_container .gt1 {
  position: absolute;
  right: 400px; /* 右から200px */
  bottom: -520px; /* 下から200px */
  width: auto;
  height: auto;
  max-width: 1000px; /* 調整可 */
  z-index: 2;
}

/* 上の画像（フタ部分） */
.gift_container .gt2 {
  position: absolute;
  right: 140px;
  bottom: -800px;
  width: auto;
  height: auto;
  max-width: 1000px; /* 調整可 */
  z-index: 1;

}




/*sec7 Special movie*/
.spmovie{
height: 1000px;
	text-align: center;
padding: 40px 0;
}

.spmovie h2{
text-align: left;
padding-bottom: 100px;
}

.spmovie .movie {
position: relative; /* 子要素を絶対配置するための基準にする */
display: inline-block; /* 画像サイズに合わせる */
}

.spmovie .bg-img {
width: 100%;
height: auto;
display: block;
}

.spmovie .bt-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 完全中央に配置 */
width: 200px; /* 再生ボタンのサイズ（調整可） */
height: auto;
cursor: pointer;
}

.spmovie .movie_txt {
  margin-top: 20px;
}

.spmovie .movie_txt h3 {
  font-size: 1.2rem;
  color: #333;
  text-align: center;
}
.movie:hover .bt-img{
opacity: 0.75;
}

.movie_txt h3{
text-align: center;
}


/*sec8 News/Pop up shop*/
.news_popup{
height: 2000px;
}

.news_popup h2{
padding-bottom: 50px;
}
.news_popup h3{
padding: 0 1em 50px;
}
.cardcontainer{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

.cardcontainer li{
list-style-type: none;
}

.card img{
	width:500px;
	height: auto;
}