@charset "UTF-8";

/*///////////////////////////////
	フォント
///////////////////////////////*/
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:ital,wght@1,100;1,200;1,300;1,500;1,600;1,700;1,800;1,900&display=swap');



/*///////////////////////////////
	共通パーツ
///////////////////////////////*/

html{
    scroll-padding-top: 150px;
    overflow: hidden; /* 横スクロールを防止 */
}

body {
	margin:13px;
	color:#000;
    font-family:  "Noto Sans JP",  Meiryo, sans-serif;
    background-color: #fff;
    text-align: left;
    position:relative;
    overflow-x: hidden; /* 横スクロールを隠す */
    font-weight:  normal;
    letter-spacing: 0.15em;
    border: solid 2.7px #E50012;
    max-height: 100vh;
}


.inner { 
    display:block; 
    max-width: 1280px;
    margin: auto;
}
@media (max-width: 1050px) {
    .inner{
        padding:0 30px; 
        max-width: 370px;
    }    
}

img{
    width: 100%;
    pointer-events: none; 
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    touch-callout:none;
    user-select:none;
}

a{
    text-decoration: none;
    color: #000;
}

.a_click{
    display: block;
}


h3,p{
    font-size: 15px; 
    line-height: 40px;
    letter-spacing: 0.12em;
    font-weight:  normal;
    text-align: center;
}
@media (max-width: 1050px) {
    h3,p{
        font-size: 11px; 
        line-height: 22px;
        letter-spacing: 0.12em;
    }    
}


.pc_vis{
    display:block ;
}
@media (max-width: 1050px) {
    .pc_vis{
        display: none;
    } 
    
}

.sp_vis{
    display: none ;
}
@media (max-width: 1050px) {
    .sp_vis{
        display: block;
    } 

}

ul{
    list-style: none;
    padding-inline-start: 0px;
}

h2{
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

.btn {
    display: block;
    width: 212px;                  /* 横幅 */
    padding: 3px 0;               /* 上下の余白 */
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: #000;                   /* 文字色 */
    border: 1.5px solid #DC000C;   /* 赤線 + 太さ1.5px */
    border-radius: 9999px;           /* 角を丸く */
    background-color: #fff;
    text-decoration: none;
    margin: auto;
    letter-spacing: 0.03em;
    transition: background-color 0.3s ease, color 0.3s ease; /* フェード用 */
}

.btn:hover {
	background-color: #DC000C; /* 赤に変化 */
	color: #fff;               /* 文字色も白に変えると見やすい */
}


.position{
    position: relative;
}

.position_in{
    position: absolute;
}


/* 外枠 */
.container {
    height: calc(100vh - 95px); /* 上下13pxを引いた高さ */
    display: flex;
}

.video-container {
	flex: 1;
	position: relative;
	overflow: hidden;
	min-height: 300px; /* 小さくなりすぎないように */
}

/* 動画 */
.video-container video {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 親のサイズに合わせて切り抜き */
}

/* 右半分: スクロールコンテンツ */
.content {
    flex: 1;
    overflow-y: auto; /* この中だけスクロール */
    background: #fff;
    border-left: solid 3.4px #E50012;
}

section {
    
}


/*///////////////////////////////
	動き
///////////////////////////////*/

.fade_move {
    opacity: 0;                     /* 最初は非表示 */
    animation: fadeIn 1s ease forwards, /* フェードイン */
                floatUpDown 2.5s ease 1.5s infinite; /* 上下ループ */
    animation-delay: 1s;   /* 秒後にスタート */
}

.fade_in {
    opacity: 0;                     /* 最初は非表示 */
    animation: fadeIn 2s ease forwards /* フェードイン */
}

.fade_in_second {
    opacity: 0;                     /* 最初は非表示 */
    animation: fadeIn 2s ease forwards ;/* フェードイン */
    animation-delay: 1s;   /* 秒後にスタート */
}

.fade_blur {
    opacity: 0;
    filter: blur(8px); /* 最初ぼやけさせる */
    animation: textFadeIn 1.5s ease forwards;
}

.fade_blur_second {
    opacity: 0;
    filter: blur(8px); /* 最初ぼやけさせる */
    animation: textFadeIn 2s ease forwards;
    animation-delay: 0s;   /* 秒後にスタート */
}

.up_fade {
    opacity: 0;
    transform: translateY(0); /* 下から30px */
    animation: upFadeIn 1.2s ease forwards;
}

.up_fade_second {
    opacity: 0;
    transform: translateY(0); /* 下から30px */
    animation: upFadeIn 1s ease forwards;
    animation-delay: 1.5s;   /* 秒後にスタート */
}

/* 下からうえ */
@keyframes upFadeIn {
    to {
        opacity: 1;
        transform: translateY(-30px);
    }
}

/* フェードイン */
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* 上下にゆらゆら */
@keyframes floatUpDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(13px); /* 下に10px */
    }
}

/* ぼやっと出てくる */
@keyframes textFadeIn {
    to {
        opacity: 1;
        filter: blur(0);
    }
}

.scale_move {
  opacity: 0;
  transform: scale(0.5) rotate(-30deg); /* 小さくて少し回転 */
  transition: all 0.5s ease-out; /* アニメーションの速さ */
}

/* スクロールで見えたときに付与するクラス */
.scale_move.visible {
    opacity: 1;
    transform: scale(1) rotate(0deg); /* 元の大きさ＋回転なし */
}

.scale_move_nomal {
  opacity: 0;
  transform: scale(0.5); /* 小さくて少し回転 */
  transition: all 0.5s ease-out; /* アニメーションの速さ */
}

/* スクロールで見えたときに付与するクラス */
.scale_move_nomal.visible {
    opacity: 1;
    transform: scale(1); /* 元の大きさ＋回転なし */
}


.slide_up {
	opacity: 0;
	transform: translateY(50px);
	transition: all 0.6s ease-out;
    transition-delay: 0s; /* 初期は遅延なし */
}

.slide_up.visible {
	opacity: 1;
	transform: translateY(0);
    transition-delay: 0.3s; /* 0.3秒遅れてアニメーション開始 */
}


.slide_up_zero {
	opacity: 0;
	transform: translateY(50px);
	transition: all 0.6s ease-out;
}

.slide_up_zero.visible {
	opacity: 1;
	transform: translateY(0);
}

/* 初期状態：透明 */
.fade_in_scroll {
	opacity: 0;
	transition: opacity 1s ease-out; /* ゆったりフェード */
}

/* スクロールで見えたら */
.fade_in_scroll.visible {
	opacity: 1;
}


.scale_move_second {
    opacity: 0;
    transform: scale(0.5); /* 小さくて少し回転 */
    transition: all 0.5s ease-out; /* アニメーションの速さ */
    transition-delay: 0s; /* 初期は遅延なし */
}

/* スクロールで見えたときに付与するクラス */
.scale_move_second.visible {
    opacity: 1;
    transform: scale(1); /* 元の大きさ＋回転なし */
    transition-delay: 0.3s; /* 初期は遅延なし */
    animation: swing 2s ease-in-out infinite; /* ループで左右回転 */
}

/* 左右に揺れるアニメーション */
@keyframes swing {
	0% { transform: scale(1) rotate(-5deg); }
	50% { transform: scale(1) rotate(5deg); }
	100% { transform: scale(1) rotate(-5deg); }
}

/* 初期状態：透明でぼんやり */
.fade_scroll_blur {
	opacity: 0;
	filter: blur(4px); /* ぼんやり感 */
	transition: all 0.8s ease-out; /* ゆったりフェード */
    transition-delay: 0s; /* 初期は遅延なし */
}

/* スクロールで見えたら */
.fade_scroll_blur.visible {
	opacity: 1;
	filter: blur(0); /* くっきり */
    transition-delay: 0.2s; /* 初期は遅延なし */
}



/*///////////////////////////////
	header
///////////////////////////////*/

header{
    height: 64px;
    border-bottom: solid 2.7px #E50012;
}

/*** nav ***/
nav{
    padding: 0;
    font-family: 'Poppins',"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 800;
    font-size: 20px;
     margin:0; 
}

.header_logo{
    width:103px;
    position: absolute;
    top: 12px;
    left: 14px;
}

.header_insta{
    width: 29.5px;
    position: absolute;
    top: 18px;
    right: 22px;
}

.header_sns{
    width: 35.5px;
    position: absolute;
    top: 18.5px;
    right: 65px;
}


.navPc{
    position: fixed;
    width: calc(100% - 29px); /* 左右 margin(13px*2) 分を引く */
    z-index: 9999;
}

.nav_nav{
    display: flex;
    width: 100%;
    justify-content: center;
    position: absolute;
    align-items: center;
}

.nav_nav div{
    padding: 15px 15px; 
}

.navFlex{
    display: none;
}

.nav_nav div:hover{
    opacity: 0.5;
}

.drawer__button,
.drawer__nav{
    display: none;
}

    

    


/*///////////////////////////////
	main
///////////////////////////////*/

/* first */
.first {
    display: flex;
    flex-direction: column;   /* 縦並び */
    justify-content: center;  /* 縦中央揃え */
    align-items: center;      /* 横中央揃え */
    min-height: calc(100vh - 26px); /* 画面中央に見せたい場合 */
    text-align: center;
}

.first div{
    margin:0 auto;
}

.first h3{
    margin-bottom: 100px;
    text-align: center;
}


.first .first_01{
    width: 320px;
    margin-bottom: 52px;
}

.first .first_02{
    width: 450px;
    margin-bottom: 38px;
}

.first .first_03{
    width: 85px;
}


/* customization */
.customization{
    background: #F2F2F2;
    padding: 110px 0 60px;
    margin-bottom: 186px;
}

.customization_dish{
    width: 327px;
    margin: 115px auto;
}

.customization_name{
    width: 187px;
    top: -36px;
    left: -58px;
}

.customization_face{
    width: 95px;
    top: 52px;
    left: -82px;
}

.customization_right .customization_name{ 
    left: auto;
    right: -62px;
}

.customization_right .customization_face{
    left: auto;
    right: -90px;
}


/* season */
.season{
    margin-bottom: 166px;
}

.season h2{
    margin-bottom: 50px;
}

.season span{
    color: #DC000C;
}


/* with */
.with{
    padding-bottom: 109px;
}

.with_top p{
    margin-bottom: 96px;
    font-size: 12px;
    line-height: 2.3em;
}

.with_top .with_top_top{
    font-size: 15px;
    margin-bottom: 24px;
}

.with_title{
    width: 317px;
    margin:0 auto 37px;
}

.with_coffee{
    background: #000;
    padding: 87px 0 ;
    margin-bottom: 140px;
}

.with_coffee_title{
    width: 180px;
    margin:0 auto 50px;
}

.with_coffee_img{
    width: 500px;
    margin:0 auto 60px;
}

.with_coffee_in{
    width: 550px;
    margin: auto;
}

.with_drink .btn,
.with_sweets .btn{
    margin-top: 56px;
}

.with_drink_title{
    width: 260px;
    margin:0 auto 60px;
}

.with_drink_in{
    margin-bottom: 34px;
    text-align: center;
}

.with_drink_in p,
.with_sweets_in p{
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1.3em;
    margin: 0;
}

.with_drink_img,
.with_sweets_img{
    width: 361px;
    margin:0 auto 5px;
}

.with_sweets{
    margin-bottom:120px;
}

.with_sweets_title{
    width: 308px;
    margin:120px auto 15px;
}

.with_sweets_in{
    margin-bottom: 39px;
    text-align: center;
}

.takeout_img{
    width: 276px;
    margin: 0 auto 25px;
}

.takeout{
    margin-bottom:73px;
}


/* location */
.location{
    padding: 106px 0 0;
    background: #BDC3C4;
    
}

.location h2{
    text-align: left;
    font-size: 40px;
    font-weight: 500;
    font-family: 'Poppins', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    margin: 0 auto 60px;
    max-width: 500px;
}

.location span{
    font-weight: 300;
}

.location_in{
    display: block;
    max-width: 1000px;
    margin:20px auto;
}

.location_title{
    font-size: 26px;
    padding-bottom: 5px;
    font-family: 'Poppins',"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    max-width: 500px;
    margin: auto;
}

.location_name{
    font-size: 14px;
    margin: 0 auto 23px;
    max-width: 500px;
}

.location_access{
    font-size: 10px;
    margin: 0 auto 25px;
    text-align: left;
    max-width: 500px;
}

.location_first{
    
    padding-bottom: 106px;
}

.location_img{
    width: 500px;
    margin: 0 auto 13px;
}

.location_second{
    background: #000;
    padding: 76px 0 57px;
}

.location_second .location_title{
    color: #fff;
}

.location_second .location_name{
    color: #fff;
}

/* footer */
.footer p{
    margin: 0;
}



/*///////////////////////////////
	delivery
///////////////////////////////*/


body.no-scroll {
  margin: 0;
  padding: 0;
    background: #000;
    border: none;
}

.no-scroll header {
    height: 64px;
    border-bottom: solid 2.7px #E50012;
    margin: 0 11px;
}

.no-scroll .mv{

}

.no-scroll .navPc {
    position:inherit;
    width: calc(100% - 29px);
    z-index: 9999;
}

.no-scroll a {
    text-decoration: none;
    color: #fff;
}

.no-scroll footer{
    background: #fff;
}

.no-scroll .write{
    width: 495px;
    top: 132px;
    left: 110px;
}

.no-scroll .app{
    width: 364px;
    bottom: 58px;
    left: 110px;
}

.no-scroll .dish{
    width: 213px;
    bottom: 23px;
    left: 50%;            /* 親の左から50%の位置に置く */
    transform: translateX(-50%); /* 自身の幅の半分ずらして中央に */
}

.delivery-links {
  text-align: center;
  background: #000;
  color: #fff;
  padding: 40px 0;
}

.app_write {
  font-size: 14px;
  margin-bottom: 20px;
    color: #fff;
    text-align: left;
    font-weight: bold;
    line-height: 0px;
}

.delivery-icons {
  display: flex;
  justify-content: center;
  gap: 15px; /* ← 約1タブ分（16px） */
  flex-wrap: wrap;
}

.delivery-icons a img {
  width: 60px;
  height: auto;
  transition: transform 0.2s ease;
}

.delivery-icons a:hover img {
  transform: scale(1.05);
}

.note {
  font-size: 9px;
  margin-top: 14px;
    text-align: left;
    color: #fff;
    line-height: 0px;
}


@media (max-width: 1050px) {

    .no-scroll header {
        height: auto;
        border-bottom: none;
        margin: 0 ;
    }
    
    .no-scroll a {
        text-decoration: none;
        color: #000;
    }
    
    .no-scroll .write{
        width: 307px;
        top:inherit;
        bottom: 227px;
        left: 50%;            /* 親の左から50%の位置に置く */
        transform: translateX(-50%); /* 自身の幅の半分ずらして中央に */
    }

    .no-scroll .app{
        width: 330px;
        bottom: 79px;
        left: 50%;            /* 親の左から50%の位置に置く */
        transform: translateX(-50%); /* 自身の幅の半分ずらして中央に */
    }

    .no-scroll .dish{
        width: 148px;
        bottom: 25px;
        left: 50%;            /* 親の左から50%の位置に置く */
        transform: translateX(-50%); /* 自身の幅の半分ずらして中央に */
    }
    
    .delivery-icons a img {
      width: 53px;
        justify-content: space-between;
      height: auto;
      transition: transform 0.2s ease;
    }


}




/* ---- スマホ用 ---- */
@media (max-width: 1050px) {
    /*///////////////////////////////
        共通部分
    ///////////////////////////////*/
    html{
        scroll-padding-top: 0;
        overflow: visible;
    }

    body{
        border: none;
        margin: 0;
    }    

    
    .container {
        height: auto;
        display: block;
    }

    .video-container {
        overflow: auto; /* または scroll */
    }

    .content {
        height: auto;
        overflow-y: visible;
        border-left: none;
    }
    

    h2 {
        font-size: 20px;
    }
    
    .btn {
        padding: 0px 0;
        font-size: 17px;
    }

    .with {
        padding-bottom: 68px;
    }
    
    
    /* 左半分: 動画（スクロール操作は右へ転送） */
    .video-container {
        flex: 1;
        position: relative;
        overflow: hidden; 
    }

    /* 動画 */
    .video-container video {
        margin-top: 82px;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /*///////////////////////////////
        header
    ///////////////////////////////*/
    header {
        height: auto;
        border-bottom: none;
        
    }
    
    .header_logo {
        position: static;
        padding-top: 6px;
    }

    /* ハンバーガーボタン */
    
    .navFlex {
        display: flex;
        justify-content: space-between; /* 子要素間の配置はspace-between */
        position: fixed;            /* 上からの位置 */
        left: 50%;              /* 横中央基準 */
        transform: translateX(-50%); /* 自分の幅の半分戻す */
        z-index: 99999;
        width: 100%;
        padding: 27px 15px;
        box-sizing: border-box; /* padding分で幅がはみ出ないように */
    }
    
    /* ハンバーガーボタンのデザイン */
    .drawer__button,
    .drawer__nav{
        display:block;
    }


    /* ハンバーガーボタン */
    .drawer__button {
      position: relative;
      width: 3rem;
      height: 3rem;
      background: transparent;
      border: none;
      cursor: pointer;
      z-index: 10001; /* メニューより前面 */
    }
    
    .drawer__button > span {
      display: block;
      position: absolute;
      left: 50%;
      width: 1.5rem;
      height: 2px;
      background-color: #E50012;
      transform: translateX(-50%);
      transition: all 0.3s ease;
    }
    
    .drawer__button > span:first-child {
      top: 35%;
    }
    
    .drawer__button > span:nth-child(2) {
      top: 50%;
    }
    
    .drawer__button > span:last-child {
      top: 65%;
    }
    

    /* 開いた時のアニメーション */
    .drawer__button.active > span:first-child {
      top: 50%;
      transform: translateX(-50%) rotate(-45deg);
    }
    
    .drawer__button.active > span:nth-child(2) {
      opacity: 0;
    }
    
    .drawer__button.active > span:last-child {
      top: 50%;
      transform: translateX(-50%) rotate(45deg);
    }

    /* ===== サイドメニュー ===== */
    .drawer__nav {
      position: fixed;
      top: 0;
      right: 0;
      width: 100%;       /* メニュー幅（調整可） */
      height: 100vh;
      background: #fff;
      transform: translateX(100%); /* 初期は右に隠す */
      transition: transform 0.4s ease;
      z-index: 10000;
    }

    /* 開いたとき */
    .drawer__nav.active {
      transform: translateX(0);
    }

    /* メニューリスト */
    .drawer__nav__inner {
      padding: 2rem 1.5rem;
    }
    
    .drawer__nav__menu {
      list-style: none;
      margin-top: 90px;
      padding: 0;
    }
    
    .drawer__nav__item {
      margin-bottom: 1rem;
    }
    
    .drawer__nav__link {
      display: block;
      font-size: 1.2rem;
      text-decoration: none;
      color: #000;
      font-weight: 500;
      transition: color 0.2s;
    }
    
    .drawer__nav__link:hover {
      color: #E50012;
    }

    .drawer__nav  .header_logo{
        margin: auto
    }

    .nav_sns{
        margin-top: 78px;
        display: flex;
    }
    
    .nav_sns_first{
        width:29px;
        margin-right: 10px;
    }
    
    .nav_sns_second{
        width:35px;
        margin-top: 1.5px;
    }

    
    /*///////////////////////////////
        main
    ///////////////////////////////*/

    /* first */
    .first {
        min-height: auto;
        padding: 0 20px;
    }

    .first div{
    }

    .first h3{
        margin-bottom: 70px;
        margin-top: 0;
        text-align: center;
    }


    .first .first_01{
        width: 206px;
        margin-bottom: 26px;
    }

    .first .first_02{
        max-width: 366px;
        width: 100%;
        margin-bottom: 38px;
    }

    .first .first_03{
        display: none;
    }


    /* customization */
    .customization{
        padding: 100px 20px 56px;
        margin-bottom: 105px;
    }

    .customization_dish{
        width: 226px;
        margin:0 auto 50px;
    }

    .customization_name{
        width: 130px;
        top: -19px;
        left: -46px;
    }

    .customization_face{
        width: 63px;
        top: 37px;
        left: -61px;
    }

    .customization_right .customization_name{ 
        right: -48px;
    }

    .customization_right .customization_face{
        left: auto;
        right: -65px;
    }   
    

    /* season */
    .season{
        margin-bottom: 100px;
        padding: 0 20px;
    }

    .season h2{
        margin-bottom: 30px;
    }


    /* with */
    .with_top p{
        margin-bottom: 99px;
        font-size: 11px;
        line-height: 22px;
        letter-spacing: 0.12em;
    }
    
    .with_top .with_top_top{
        font-size: 13px;
        margin-bottom: 20px;
    }

    .with_title{
        max-width: 194px;
        margin:0 auto 38px;
    }

    .with_coffee{
        background: #000;
        padding: 72px 20px ;
        margin-bottom: 56px;
    }

    .with_coffee_title{
        max-width: 142px;
        margin: 0 auto 38px;
    }

    .with_coffee_img{
        max-width: 100%;
        margin: 0 auto 53px
    }

    .with_coffee_in {
        max-width: 100%;
        margin: auto;
    }
    
    .with_drink_title {
        width: 200px;
        margin: 0 auto 45px;
    }
    
    .with_drink_img, .with_sweets_img {
        width: 250px;
        margin: 0 auto 8px;
    }
    
    .with_drink_in p, .with_sweets_in p {
        font-size: 14px;
        line-height: 1.5em;
    }

    .with_drink .btn, .with_sweets .btn {
        margin-top: 37px;
    }
    
    .with_sweets_title {
        width: 238px;
        margin: 145px auto 45px;
    }

    
    
    /* location */
    
    .location {
        padding: 82px 0 0;
    }
    
    .location h2 {
        font-size: 35px;
        margin: 0 auto 60px;
        max-width: 342px;
    }
    
    .location_title {
        font-size: 26px;
        padding-bottom: 5px;
        max-width: 342px;
    }
    
    .location_first {
        padding-bottom: 73px;
    }
    
    .location_name {
        font-size: 14px;
        margin: 0 auto 13px;
        max-width: 342px;
    }
    
    .location_access {
        font-size: 12px;
        margin: 0 auto 17px;
        max-width: 342px;
    }
    
    .location_img {
        max-width: 342px;
        margin: 0 auto 9px;
    }
    
    .location_second {
        padding: 52px 0 34px;
    }


}