@charset "UTF-8";

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

p {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
}

nav{
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
}


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

body{
    min-width: 1280px;/*100px + 1080px + 100px*/
    color: #351823;
    font-family: sans-serif;
     /*背景グラデーション*/
background: #e6dacc;
background: linear-gradient(180deg, rgba(230, 218, 204, 1) 0%, rgba(219, 171, 171, 1) 70%, rgba(219, 171, 171, 1) 85%, rgba(255, 235, 235, 1) 100%);
    /*background: #e6dacc;
background: linear-gradient(180deg, rgba(230, 218, 204, 1) 0%, rgba(219, 171, 171, 1) 100%);*/
}


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




/*新作スイーツ、人気のラインナップ*/

/*新作スイーツ内商品名*/
h5{
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
    color: #b82443;
   font-size: 20px;
   margin: 20px 0 10px;
   text-align: center;
    
}

/*＝＝＝＝＝ヘッダー＝＝＝＝＝*/
header{
    background-color:#E6DACC;
    height: 80px;
}

.header-inner{
    display: flex;/*横並び*/
    justify-content: space-between;/*両端揃え　ロゴとnav要素*/
    height: 80px; /*設計図の指定による*/
    align-items: center;/*上下の中央揃え*/
        
}

.header-inner h1 img{
    width: 250px;
    line-height: 1; /*ロゴ画像の上下の隙間をなくす。*/
    /*ラインハイトが効いてしまい、綺麗にセンターに並ばない。
    １は「１文字分」という意味*/
    position: relative;
    left: 100px;
}


/*グローバルナビゲーション*/
.global-nav ul{
    list-style: none;
    display:flex; 
}

.global-nav a{
    position: relative;
    right: 100px;    
    color: #b82443;
    text-decoration: none;
    display: block; /*ボタン化*/
    padding: 25px;
    font-weight:bold;
    height: 80px;

}

.global-nav a:hover{
    color: #e6dacc;
    font-weight:bold;
    background-color: #b82443;
}


/*＝＝＝＝＝ファーストビュー＝＝＝＝＝*/
.fast-view{
    width: 100%;/*100vw　ブラウザの画面サイズ基準*/
    height: 720px;/*100vh*/
    /*vwはスクロールバー（15pxぶん）を含んだものを100と考え、
    ％はスクロールバーの手前までで100と考えるので、vwはあまり使われない。*/
    /*背景画像*/
    background-image: url("../images/main-visual.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /*なるべく画像をきちんと表示するように調整してくれる
    デバイスの見え方の違いを少なくするイメージ*/

    
    
    /*.fv-contentsの配置*/
    /*親要素に指示する*/
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.fv-contents{
    text-align: center;
    box-sizing: 80px;
}

.fv-contents img{
    width: 50%;
    height: 0 auto;
}


.fv-contents a{
    display: block;
    width: 9em; /*7文字なので、左右に１文字ずついれとくか〜*/
    padding: 1em 0;
    margin: 0 auto;
    background-color: #DEEFEE;
    color: #333;
    text-decoration: none;
    /*角を丸くする長方形*/
    border-radius: 999px; /*完璧に丸くしたかったら、適当に大きい数字いれておけばOK*/
    /*img要素にもきく！！！*/
}


/*＝＝＝＝＝バナー＝＝＝＝＝*/

.Banner{
    display: flex;
    justify-content:space-between;
    padding:80px 0 80px;
}

.Banner img{
    border-radius: 10px;
        width: 100%;
    vertical-align: middle;
}

.Banner a{
    display: block;
    transition: all .2s ease-in-out;
}

.Banner a:hover{
    transform: scale(1.1);
}


/*＝＝＝＝＝ユーチューブ＝＝＝＝＝*/
.Youtube{
    display: flex;
    padding-top: 120px;
    padding-bottom: 120px;
    justify-content: space-between;
}

.youtube__img{
    width: 640px;  
}

.youtube__txt{
   width: 400px; 
    height: 360px;
   background-color: rgba(255,255,255,0.65);
  padding: 35px;
  box-sizing: border-box;
  border-radius: 30px;
}

.youtube__txt img {
  display: block; 
padding-bottom: 40px;

}

.youtube__txt p {
  padding-bottom: 50px;
}

.onpu::after{
    content: "♪";
}

.Youtube a img{
    width: 200px;
    margin: 0 auto;
}

.Youtube a img:hover{
transform: scale(1.05);
  opacity: 0.8;/*透明度*/
}



/*＝＝＝＝＝新作スイーツ＝＝＝＝＝*/

.NewProducts-container{
  padding:120px 0 120px 0 ;
  background-color: rgba(255,255,255,0.65);
  z-index: 0;
    }

/*新作スイーツ情報のタイトルにあたる*/
    .NewProducts-container h3 img{
  display: block;
  max-width: 450px;    /* 最大サイズを固定 */
  width: 100%;         /* それ以下のサイズでは自動縮小 */
  height: auto;
  margin: 0 auto;
  padding-bottom:  80px;
}


.NewProducts {
  display: flex;
  justify-content: center;
  gap: 90px; /* 商品の間隔。お好みで調整 */
}

.Products {
  width: 300px;
}

.image-wrapper {
  position: relative; /* ← バッジを重ねるための基準 */
  width: 100%;
}

.image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

.image-wrapper .badge {
  position: absolute;
  top: 0px;     /* 画像の上端からの距離 */
  left: -5px;    /* 画像の左端からの距離 */
  width: 75px;   /* NEWバッジのサイズ（必要に応じて変更） */
  height: auto;
  pointer-events: none; /* クリックを邪魔しない */
}


/*＝＝＝＝＝人気ラインナップ＝＝＝＝＝*/
/*人気のラインナップのタイトルにあたる*/
.SlideProducts{
    padding: 120px 0;
}


.SlideProducts h3 img{
  display: block;
  max-width: 450px;    /* 最大サイズを固定 */
  width: 100%;         /* それ以下のサイズでは自動縮小 */
  height: auto;
  margin: 0 auto;
  padding-bottom: 80px;
}

.slider img{
    width: 560px;
    height: auto;
    border-radius: 30px;
    display: block;
    margin: 0 auto;
}

/*＝＝＝＝＝フッター＝＝＝＝＝*/

footer{
    text-align: center;
}

.footer-container{
   padding: 60px 0; 
}

.footer-img{
    width: 20%;
    margin: 30px auto;
    border-radius: 20px;
}


/*フッターナビゲーション*/
.footer-nav {
  text-align: center; /* 中央寄せ */
  padding: 20px 0;
}

.footer-nav ul {
  list-style: none;
  margin: 0;
  display: inline-flex; /* 横並びにして中央寄せを保つ */
  gap: 0.5em; /* ｜との間隔を整える */
}

.footer-nav li {
  position: relative;
}

.footer-nav li:not(:last-child)::after {
  content: "｜"; /* 区切り線 */
  margin: 0 0.5em;
  color: #b82443; /* 区切り線の色 */
}

.footer-nav a {
  text-decoration: none;
  color: #b82443; /* リンク文字色 */
  font-size: 17px;
  transition: color 0.1s;
}

.footer-nav a:hover {
  color: #FFEBEB; /* ホバー時の色 */
}

.footer-nav p{
    color: #333;
}