@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;700;800&family=Zen+Old+Mincho:wght@400;500;700;900&display=swap');





/*----------------------------------------------------
	☆PC
----------------------------------------------------*/
.pc-none {
    display: none;
}

.sp-none {
    display: block;
}

#hamburg-fair {
	width: 100%;
	overflow: hidden;
	position: relative;
	color: #37332F;
	font-family: 'Shippori Mincho', serif;
	letter-spacing: 0;
	font-kerning: normal;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* 共通img */
#hamburg-fair img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*--- mv ---*/

#hamburg-fair .mv {
	position: relative;
	max-width: 1500px;
	margin: 0 auto;
}

/* ===== ここが超重要修正 ===== */

#hamburg-fair .mv .image {
	position: relative;
	width: 100%;
	aspect-ratio: 1500 / 735;   /* ← padding-top削除 */
	overflow: hidden;
}

/* pictureを完全に重ねる */
#hamburg-fair .mv .image picture {
	position: absolute;
	inset: 0;
}

/* レイヤー画像共通 */
#hamburg-fair .mv .image img.layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain; /* PNG重ねならcontainが安全 */
}

/* 背景 */
#hamburg-fair .mv .image img.bg {
	z-index: 0;
}

/* タイトルなど */
#hamburg-fair .mv .mvTitle {
	position: absolute;
    top: 16.8%;
    left: 20.8%;
    width: 61%;
    max-width: 906px;
	z-index: 10;
}

#hamburg-fair .mv .mvCopy {
	position: absolute;
	top: 4.4%;
	left: 62.5%;
	width: min(4.5%, 60px);
	z-index: 10;
}

#hamburg-fair .mv .mvStart {
	position: absolute;
	top: 17%;
	left: 24.5%;
	width: 11.5%;
	z-index: 10;
}

/* タイトル下飛行機 */

#hamburg-fair .mv .mvPlaneWrap {
    position: absolute;
	max-width: 190px;
	width: 13%;
    left: 51.5%;
    top: 66%;
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
    z-index: 10;

    animation:
        mvPlaneIn 1s ease forwards 2s,
        mvPlaneFloat 4s ease-in-out 4s infinite;
}

@keyframes mvPlaneIn {
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes mvPlaneFloat {
    0%   { transform: translateX(-50%) translateY(0); }
    50%  { transform: translateX(-50%) translateY(-12px); }
    100% { transform: translateX(-50%) translateY(0); }
}

/*--- message ---*/

#hamburg-fair #message {
    /*height: 370px;*/
    position: relative;
    background: url(../images/menu/hamburg-fair/message_bg.jpg) center center / 100% 100% no-repeat;
    padding: 80px 0 100px;
}


#hamburg-fair #message > p {
    font-family: 'Zen Old Mincho', sans-serif;
	color: #37612F;
    font-weight: 700;
    font-style: normal;
    position: relative;
	text-align: center;
    width: 90%;
    margin: 0 auto;
    line-height: 2;
    margin-bottom: 80px;
    font-size: 22px;
    letter-spacing: 0.03em;
    z-index: 1;
}

#hamburg-fair #message > p span {
	font-family: 'Zen Old Mincho', serif;
    font-style: normal;
}

#campaignArea .campaignBox .campaignTitle .exMark {
	font-family: 'Zen Old Mincho', serif;
    font-style: normal;
	font-size: 1.1em;
}

/* -----------------------------
   タブ切替
----------------------------- */
.tabsInner {
    max-width: 904px;
    width: 90%;
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

/* タブ切り替え全体のスタイル */
.tabs {
    width: 100%;
    margin: 0 auto;
    background: transparent;
}

/* タブの共通スタイル */
.tab_item {
    width: 49%;
    max-width: 500px;
    height: 94px;
    transition: all 0.2s ease;
    cursor: default;
    position: relative;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 10px 0 0;
}

.tab_item a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	cursor: pointer;
	text-decoration: none;
}

/* :before アイコン */
.tab_item.tab1:before {
    position: absolute;
    content: "";
    width: 100px;
    height: 70px;
    top: -37px;
    left: 0;
    right: 0;
    margin: auto;
    background: url("../images/menu/hamburg-fair/tab_menu.png") center center / 100% 100% no-repeat;
}

.tab_item.tab2:before {
    position: absolute;
    content: "";
    width: 100px;
    height: 70px;
    top: -37px;
    left: 0;
    right: 0;
    margin: auto;
    background: url("../images/menu/hamburg-fair/tab_campaign.png") center center / 100% 100% no-repeat;
}

/* タイトルボックス */
.tab_item span.titBox {
    position: absolute;
    display: block;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    letter-spacing: 0;
    text-align: center;
}

.tab_item .tit {
    font-weight: 500;
    font-size: clamp(18px, 3vw, 28px);
    line-height: 1;
    text-align: center;
    letter-spacing: .13em;
    display: block;
    transition: .3s;
}

/* -----------------------------
   初期状態の色
----------------------------- */
.tab_item.tab1.current {
    background: #37612F;
}
.tab1 .tit {
    color: #fff;
}

.tab_item.tab1 {
    background: #FFFCE4;
}

.tab_item.tab1 .tit {
    color: #000;
}

.tab_item.tab2.current {
    background: #37612F;
}
.tab_item.tab2.current .tit {
    color: #fff;
}

.tab_item.tab2 {
    background: #FFFCE4;
}

.tab_item.tab2 .tit {
    color: #000;
}


/* -----------------------------
   hover状態
----------------------------- */
.tab_item:not(.current):hover {
    background: #37612F;
}
.tab_item:not(.current):hover .tit {
    color: #fff;
}

/* -----------------------------
   current状態（選択中）
----------------------------- */
.tab_item.current {
    background: #37482F; /* tab1と同じ背景 */
}
.tab_item.current .tit {
    color: #fff; /* tab1と同じ文字色 */
}

/* -----------------------------
   タブ切り替え中身
----------------------------- */
.tab_content {
    clear: both;
    overflow: hidden;
    border-top: 4px solid #37612F;
    position: relative;
}

.tab_item.current a {
    cursor: default;
}

/* -----------------------------
   tabBox 背景
----------------------------- */
#tabBox {
    padding-top: 153px;
    margin-top: -250px;
}

#hamburg-fair #tabBox {
    background: url("../images/menu/hamburg-fair/bg.jpg") top center / 100% repeat-y;
}

#hamburg-fair .tabsInner {
    max-width: 904px;
    width: 90%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

/* -----------------------------
   下部タブ反転（tabEnd）
----------------------------- */
#hamburg-fair .tabEnd {
    position: relative;
    transform: scaleY(-1);
    margin-top: 120px;
    padding-top: 90px;
    border-bottom: 4px solid #37612F;
    background: url(../images/menu/collaboration14/message_bg.jpg) center center / 100% 100% no-repeat;
}

/* タブ内テキストは元に戻す */
#hamburg-fair .tabEnd .tab_item .titBox {
    transform: scaleY(-1) translateY(5px);
}

/* :before のアイコンは下部タブでは非表示 */
#hamburg-fair .tabEnd .tab_item:before {
    display: none;
}

/* hover時の背景色（下部タブ）*/
#hamburg-fair .tabEnd .tab_item.tab1:hover {
    background: #37612F;
}

#hamburg-fair .tabEnd .tab_item.tab2:hover {
    background: #37612F;
}

/* current状態のタブ（下部タブ） */
#hamburg-fair .tabEnd .tab_item.current a {
    cursor: default;
}


/*--- menuArea ---*/

/* 横並びのメニュー */
#hamburg-fair #menuArea .menuInner {
	display: flex;
	align-items: center;
	gap: 15px; /* 画像とテキストの間隔 */
	max-width: 1200px;
	margin: 0 auto;      /* 左右中央寄せ */
	padding: 0 16px;     /* 端がくっつかない保険 */
}

#hamburg-fair #menuArea .imgBox {
	max-width: 790px;
	width: 80%;
}

#hamburg-fair #menuArea .txtBox {
    width: 46%;
	max-width: 420px;
	padding-right: 2%;
}

#hamburg-fair #menuArea .txtBox {
	padding-right: 0;
	padding-left: 2%;
}

#hamburg-fair #menuArea .menuBox .txtBox h3 {
    font-weight: 500;
    font-size: clamp(18px, 2.3vw, 29px);
    line-height: 1.5;
    margin: 0;
    letter-spacing: 0.02em; /* 必要に応じて字送りも調整 */
}

#hamburg-fair #menuArea .menuBox .txtBox h3 .subTitle {
	font-size: 0.7em;
	line-height: 1.2;
}

#hamburg-fair #menuArea .menuBox .txtBox .price {
    font-size: clamp(18px, 2vw, 25px); /* 最小18px、最大25px、画面幅に応じて変化 */
    color: #37612F;
    font-weight: 300;
    line-height: 1.2;
    margin: clamp(10px, 2vw, 20px) auto clamp(20px, 2vw, 30px); 
	letter-spacing: 0.05em;
}

#hamburg-fair #menuArea .menuBox .txtBox .price span {
    font-size: 0.8em; /* 親の文字サイズの80% */
}

#hamburg-fair #menuArea .menuBox .txtBox .read {
    font-size: clamp(14px, 1.5vw, 16px);   /* 最小12px、最大16px、画面幅に応じて滑らかに変化 */
    font-weight: 500;
    line-height: clamp(24px, 2.5vw, 30px); /* 最小20px、最大30px、画面幅に応じて滑らかに変化 */
    margin: 20px auto 30px;
    letter-spacing: 0.05em;
}


#hamburg-fair #menuArea .menuBox {
    margin: 120px auto 100px; /* 上下40px、左右0 */
}

#hamburg-fair #menuArea .menuBox.right .menuInner {
    flex-direction: row-reverse;
}

#hamburg-fair #menuArea .menuInner.right {
    text-align: right; /* 右寄せ */
}

#hamburg-fair #menuArea .menuBox .menuInner.right .txtBox .read {
    text-align: left; /* 右寄せ */
}

/* デコの位置・サイズ */
#hamburg-fair #menuArea .decoLeft {
	left: 0;
}

#hamburg-fair #menuArea .menuBox .menuInner.right .txtBox .read span {
    font-family: 'Zen Old Mincho', serif;
}

#hamburg-fair #menuArea .menuBox .menuInner .txtBox .read span {
    font-family: 'Zen Old Mincho', serif;
}


/* 国名デコ */
#hamburg-fair #menuArea .imgBoxInner {
    position: relative; /* デコの絶対配置の基準 */
}

#hamburg-fair #menuArea .menuBox_deco {
	position: absolute;
	top: 0;
	right: 0;
	width: 39%;
	max-width: 262px;
	z-index: 2;
}

#hamburg-fair #menuArea .menuBox_deco img {
	width: 100%;
	height: auto;
	display: block;
}

/* 追加デコ */

#hamburg-fair #menuArea .deco1 {
	position: absolute;
	left: 0;        /* 左下に固定 */
	bottom: 0;
	max-width: 190px; /* 最大幅だけ指定 */
	width: 26%;       /* 横幅は自動で元画像に合わせる */
	height: auto;      /* 高さは元画像の比率に合わせる */
	opacity: 0;        /* 初期非表示 */
	pointer-events: none;
	z-index: 3;
}

#hamburg-fair #menuArea .deco2 {
	position: absolute;
	right: -3%;
	bottom: -3%;
	max-width: 190px; /* 最大幅だけ指定 */
	width: 26%;       /* 横幅は自動で元画像に合わせる */
	height: auto;      /* 高さは元画像の比率に合わせる */
	opacity: 0;        /* 初期非表示 */
	pointer-events: none;
	z-index: 3;
}

#hamburg-fair #menuArea .deco3 {
	position: absolute;
	right: -3%;
	bottom: -3%;
	max-width: 180px; /* 最大幅だけ指定 */
	width: 26%;       /* 横幅は自動で元画像に合わせる */
	height: auto;      /* 高さは元画像の比率に合わせる */
	opacity: 0;        /* 初期非表示 */
	pointer-events: none;
	z-index: 3;
}

#hamburg-fair #menuArea .deco4 {
	position: absolute;
	right: -3%;
	bottom: -3%;
	max-width: 190px; /* 最大幅だけ指定 */
	width: 26%;       /* 横幅は自動で元画像に合わせる */
	height: auto;      /* 高さは元画像の比率に合わせる */
	opacity: 0;        /* 初期非表示 */
	pointer-events: none;
	z-index: 3;
}

#hamburg-fair #menuArea .deco5 {
	position: absolute;
	right: 3%;
	bottom: -3%;
	max-width: 140px; /* 最大幅だけ指定 */
	width: 20%;       /* 横幅は自動で元画像に合わせる */
	height: auto;      /* 高さは元画像の比率に合わせる */
	opacity: 0;        /* 初期非表示 */
	pointer-events: none;
	z-index: 3;
}

#hamburg-fair #menuArea .deco6 {
	position: absolute;
	right: 2%;
	bottom: -3%;
	max-width: 154px; /* 最大幅だけ指定 */
	width: 22%;       /* 横幅は自動で元画像に合わせる */
	height: auto;      /* 高さは元画像の比率に合わせる */
	opacity: 0;        /* 初期非表示 */
	pointer-events: none;
	z-index: 3;
}

/* 飛行機デコ */

/* 位置の基準 */
#hamburg-fair #menuArea .menuBox.no1 .imgBoxInner {
    position: relative;
}

#hamburg-fair #menuArea .menuBox.no1 .planeWrap {
	position: absolute;
	right: clamp(-3px, -3vw, -15px);
	bottom: clamp(-140px, -7vw, -80px);
	max-width: 197px;
	width: 28%;
	opacity: 0;
	transform: translateY(20px);
	animation: planeIn 0.8s ease forwards 3s;
}

#hamburg-fair #menuArea .menuBox.no1 .plane {
	width: 100%;
	height: auto;
	animation: planeFloat 3s ease-in-out 2.8s infinite;
}

/* 飛行機デコ2 */
#setArea .setInnerBox {
    position: relative;
}

/* 出現＋位置 */
#setArea .setPlaneWrap {
    position: absolute;
    right: clamp(-30px, -3vw, -10px);
    top: clamp(130px, -3vw, -10px);
    max-width: 173px;
	width: 18%;
    opacity: 0;
    transform: translateY(20px);
    animation: planeIn 0.8s ease forwards 2s;
}

/* ふわふわ */
#setArea .setPlane {
    width: 100%;
    height: auto;
    animation: planeFloat 3s ease-in-out 2.8s infinite;
}

/* -----------------------------
   setArea 背景＋中央配置
----------------------------- */
#setArea .setBg {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center; /* 横中央 */
    align-items: center;     /* 縦中央 */
}

/* 白枠内部（縦並び） */
#setArea .setInnerBox {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    padding: 50px 50px 80px;
    width: 90%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* 金額画像の上に文字 */
#setArea .moneyBox {
    position: relative;
    width: 100%;
}

#setArea .moneyBox .moneyText {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(16px, 1rem, 19px);
    text-align: center;
    white-space: nowrap;
}

/* 各画像 */
/* -----------------------------
   セットタイトル画像
----------------------------- */
#setArea .setInnerBox > .imgBox:first-child img.fit {
    width: 100%;
    max-width: 1115px;   /* タイトル画像の最大幅 */
    height: auto;
    display: block;
    margin: 0 auto 50px;
}

/* セットタイトル画像 */
#hamburg-fair #setArea .imgBox:first-child .imgBoxInner {
    overflow: hidden;
    aspect-ratio: 1115 / 176;
}

/*#setArea .setInnerBox > .imgBox:first-child {
    margin-bottom: 50px;
}*/

/* -----------------------------
   金額画像
----------------------------- */
#setArea .moneyBox img.fit {
    width: 90%;
    max-width: 380px;    /* 金額画像の最大幅 */
    height: auto;
    display: block;
    margin: 0 auto 10px;      /* 中央揃え */
}

/* -----------------------------
   セット内容画像
----------------------------- */
#setArea .setInnerBox > .imgBox:last-child img.fit {
    width: 90%;
    max-width: 1060px;   /* セット内容画像の最大幅 */
    height: auto;
    display: block;
    margin: 0 auto;      /* 中央揃え */
}

/* =============================
   1000px以下で左右トリミング開始
============================= */
@media screen and (max-width: 1000px) {

  #hamburg-fair #setArea .imgBox:first-child .imgBoxInner {
      overflow: hidden;
      aspect-ratio: 1115 / 176;
  }

  #hamburg-fair #setArea .imgBox:first-child .fit {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
  }

}

/* -----------------------------
   白枠
----------------------------- */
#campaignArea .campaignFrame {
    position: relative;
    background: #fff;
    border-radius: 50px;
    padding: 50px;
    text-align: center;
    max-width: 1200px;
	width: 90%;
    margin: 130px auto 40px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* タイトル */
#campaignArea .campaignTitle {
    position: relative;
    background: #E6620E; /* オレンジベタ */
    color: #fff;
    display: inline-block;
    padding: 40px;
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 600;
    border-radius: 30px;
    margin-bottom: 20px;
	max-width: 1100px;
    width: 100%;       /* 横幅100%まで伸ばす */
    text-align: center;
}

#campaignArea .campaignTitle h3 {
    margin: 0;                     /* 上下の余白をリセット */
    line-height: 1.2;              /* 行間を少し狭めに調整 */
    font-size: clamp(18px, 2vw, 28px); /* レスポンシブ文字サイズ */
}

#campaignArea .campaignTitle h3 span {
    display: inline;               /* span が改行や余計なブロックにならないように */
}

/* -----------------------------
   白枠
----------------------------- */
#campaignArea .campaignFrame {
    position: relative; 
    background: #fff;
    border-radius: 30px;
    padding: 60px;
    text-align: center;
    max-width: 1000px;
    margin: 130px auto 40px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* -----------------------------
   リリース前
----------------------------- */
#campaignArea .campaignFrame.no4 {
	position: relative; 
    background: #37612F;
    border-radius: 30px;
    padding: 200px 0;
    text-align: center;
    max-width: 1000px;
    margin: 80px auto 40px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

#campaignArea .campaignFrame.no4 .releaseDate {
	color: #fff;
	font-weight: 600;
 font-size: clamp(20px, 3vw, 36px);
  letter-spacing: 0.05em;
	
}
/* -----------------------------
   タイトルデコ（左右）
----------------------------- */
#campaignArea .campaignFrame_deco {
    position: absolute;
    top: 5px;          /* 枠上に少し出す */
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    padding: 0 10px;
    box-sizing: border-box;
	z-index: 10;
}

#campaignArea .campaignFrame_deco img {
    max-width: 260px;
    width: 34%;
    height: auto;
}

/* -----------------------------
   タイトル
----------------------------- */
#campaignArea .campaignTitle {
    max-width: 1100px;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    display: block;
	z-index: 1;
}

#campaignArea .campaignTitle h3 {
    color: #fff;
    display: inline-block;
    border-radius: 30px;
    margin: 0;
    font-size: clamp(16px, 4vw, 54px); /* デフォルト54px */
    line-height: 1.3; /* 全体の塊感 */
    text-align: center;
}

/* span だけサイズを下げる */
#campaignArea .campaignTitle h3 span {
    font-size: clamp(16px, 3vw, 32px); /* 最大32px */
    font-weight: 600;
    line-height: 1;  /* span内は1行だけなのでtightに */
    display: inline; /* blockにすると分断されるのでinlineに */
}

/* 3行テキスト */
#campaignArea .campaignText p {
    margin: 5px 0;
    font-size: clamp(14px, 1.2vw, 18px);
}

#campaignArea .campaignText p {
    margin: clamp(40px, 5vw, 70px) 
            clamp(20px, 8vw, 120px);
    font-size: clamp(14px, 1.33vw, 18px);
    line-height: 2.2;
	margin-bottom: 90px;
}
/* 本文左右デコ（白枠上に重ねる） */
#campaignArea .campaignFrame {
    position: relative; /* デコの絶対配置基準 */
}

#campaignArea .bodyDecoLeft,
#campaignArea .bodyDecoRight {
    position: absolute;
    top: 20px;        /* 白枠上端からの位置 */
    pointer-events: none;
    z-index: 5;
}

#campaignArea .bodyDecoLeft {
    left: clamp(-60px, -6vw, -140px);
    width: clamp(180px, 15vw, 420px);
    top: 28%;
}

#campaignArea .bodyDecoRight {
    position: absolute;
    top: 28%; /* 高さ基準なので％でOK */
    right: clamp(-140px, -6vw, -40px);
    width: clamp(180px, 15vw, 420px);
}


/* -----------------------------
   2カラム画像
----------------------------- */
#campaignArea .campaignImages {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

#campaignArea .campaignImages .imageBox {
    flex: 1 1 45%;
    position: relative;
}

#campaignArea .campaignImages .imageBox img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 15px;
}

/* 右側のデコ */
#campaignArea .campaignImages .imageBox .imageDeco {
    position: absolute;
    top: -7%;
    max-width: 76px;
    width: 14%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

/* 左側のデコ */
#campaignArea .campaignImages .imageBox .imageDeco2 {
	position: absolute;
    top: -9%;
    max-width: 413px;
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 10;
}

/* -----------------------------
no2
----------------------------- */
#campaignArea .campaignBox.no2 .campaignTitle {
    background: #1DA0DC; /* 今回の色 */
    margin-bottom: 40px;
}

#campaignArea .campaignBox.no2 .campaignTitle h3 .titleImage {
    display: inline-block;   /* block → inline-block に変更 */
	width: 50%;
    max-width: 400px;
    height: auto;
}

/* -----------------------------
   キャンペーン期間見出し
----------------------------- */
#campaignArea .campaignBox.no2 .campaignPeriod h4 {
    display: inline-block;
    background: #1DA0DC;
    color: #fff;
    padding: 10px 80px;
    border-radius: 26px;
    font-size: clamp(14px, 2vw, 24px);
    margin-bottom: 8px;
}

#campaignArea .campaignBox.no2 .campaignPeriod {
      letter-spacing: 0.14em;
}

#campaignArea .campaignBox.no2 .campaignPeriod p {
    margin: 0 0 20px;
    font-size: clamp(14px, 2.27vw, 34px);
	font-weight: 600;
}

#campaignArea .campaignBox.no2 .campaignPeriod p span {
  font-size: 0.7em;   /* 80%に縮小 */
}

/* -----------------------------
   本文
----------------------------- */
#campaignArea .campaignBox.no2 .campaignText p {
    margin: 0 auto 30px;
    font-size: clamp(16px, 3vw, 20px);
    line-height: 1.8;
    max-width: 800px;
}

#campaignArea .campaignBox.no2 .campaignText p .highlight {
	font-size: clamp(18px, 3vw, 30px); /* 最大30px */
	font-weight:600;
	color: #E6000A;
	background-image: linear-gradient(90deg, #FFE914, #FFE914);
	background-repeat: no-repeat;
	background-position: left 95%;
	background-size: 100% 8px;
}

#campaignArea .campaignBox.no2 .campaignText p .highlight2 {
	background-image: linear-gradient(90deg, #FFE914, #FFE914);
	background-repeat: no-repeat;
	background-position: left 95%;
	background-size: 100% 8px;
}

#campaignArea .campaignBox.no2 .exMark {
  font-family: "Zen Old Mincho", serif;
}

/* -----------------------------
   景品タイトル（画像）
----------------------------- */
#campaignArea .campaignBox.no2 .prizeTitle img {
    max-width: 840px;
    width: 90%;
    height: auto;
    display: block;
    margin: 0 auto 20px;
}

/* -----------------------------
   景品画像3枚横並び
----------------------------- */
#campaignArea .campaignBox.no2 .prizesWrapper {
    display: flex;
    justify-content: space-between; /* 均等に配置 */
    flex-wrap: wrap;                /* 幅が狭くなったら折り返す */
    max-width: 885px;               /* 横幅最大885px */
	width: 90%;
    margin: 0 auto 40px;            /* 中央寄せ＋下マージン */
    gap: 10px;                      /* 画像間の隙間 */
}

#campaignArea .campaignBox.no2 .prizesWrapper .prizeItem {
    flex: 1 1 calc((100% - 20px) / 3); /* 3枚で均等幅、gap考慮 */
    max-width: 285px;                  /* 1枚あたり最大幅（885÷3） */
}

#campaignArea .campaignBox.no2 .prizesWrapper .prizeItem img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;               /* 角丸お好みで */
}

/* -----------------------------
   参加方法画像
----------------------------- */
#campaignArea .campaignBox.no2 .participationImage img {
    width: 100%;
    max-width: 1000px;
    height: auto;
    display: block;
}

/* -----------------------------
   アプリ登録ボタン
----------------------------- */

#campaignArea .appArea {
  text-align: center;
  padding: clamp(20px, 4vw, 40px) 
           clamp(16px, 4vw, 40px) 
           clamp(10px, 2vw, 20px);
}

#campaignArea .appButton {
	display: inline-block;
	width: 100%;
	max-width: 440px; /* PCで大きくなりすぎない */
	padding: 18px 24px;
	background: #dc0000;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: clamp(16px, 4vw, 20px); /* SP寄りに調整 */
	letter-spacing: 0.05em;
	border-radius: 50px;
	text-align: center;
	box-shadow: 0 6px 14px rgba(0,0,0,0.15);

	transition: 
	background 0.25s ease,
	transform 0.1s ease,
	box-shadow 0.1s ease;
}

#campaignArea .appButton:active {
  transform: scale(0.96);          /* 少し縮む */
  box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* 影を弱く */
}

@media (hover: hover) {
  #campaignArea .appButton:hover {
    background: #7a0000;
  }
}

#campaignArea .appButton:active {
  background: #7a0000;
}


/* -----------------------------
   no3 白枠全体
----------------------------- */
#campaignArea .campaignBox.no3 .campaignFrame {
  background: #F9F7F1;
  border-radius: 30px;
  padding: 60px 85px 85px;
  max-width: 1000px;
  margin: 130px auto 0px;
  box-shadow: none;
  position: relative;
}

/* -----------------------------
   タイトル（背景なし）
----------------------------- */
#campaignArea .campaignBox.no3 .campaignTitle {
	position: relative;
	text-align: center;
	margin-bottom: 30px;
	padding: 0;
	background: none;

}

#campaignArea .campaignBox.no3 .campaignTitle h3 {
	font-size: clamp(24px, 2.67vw, 40px);
	margin: 0;
	line-height: 1.2;
	display: inline-block;
	font-weight: 700;
	color: #E6620E;
}

/* span だけサイズを下げる */
#campaignArea .campaignBox.no3 .campaignTitle h3 span {
	font-size: clamp(24px, 2vw, 30px);
    line-height: 1.8;  /* span内は1行だけなのでtightに */
}

/* タイトル右上アイコン */
#campaignArea .campaignBox.no3 .campaignTitle .titleIcon {
    position: absolute;
    top: -140px;
    right: 10px;
    max-width: 230px;
    width: 27%;
}

/* -----------------------------
   メニューリスト（3列×2段）
----------------------------- */
#campaignArea .campaignBox.no3 .menuList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 20px;
}

#campaignArea .campaignBox.no3 .menuRow {
  display: contents; /* 行のラッパーを無効化 */
}

#campaignArea .campaignBox.no3 .menuItem {
  flex: 1 1 calc(33.333% - 13.33px); /* 3列＋gap考慮 */
  max-width: 350px;
  text-align: center;
  margin: 0 auto;
}

#campaignArea .campaignBox.no3 .menuItem img {
  width: 100%;
  height: auto;
  border-radius: 15px;
  margin-bottom: 10px;
}

#campaignArea .campaignBox.no3 .menuItem .menuName {
  font-size: clamp(12px, 1.2vw, 18px);
  font-weight: 600;
  color: #333;
}

#campaignArea .campaignText .highlight {
  background-image: linear-gradient(90deg, #FFE914, #FFE914);
  background-repeat: no-repeat;
  background-position: left 95%;
  background-size: 100% 8px;
}

/* 唐辛子 */
#hamburg-fair .spicy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 3px;
  white-space: nowrap;

  vertical-align: baseline; /* ← 重要 */
}

#hamburg-fair .spicy img {
  height: clamp(16px, 1.8vw, 23px);
  width: auto;
  display: block;
}



/*-------------------------------------------
Animation
-------------------------------------------*/

.out {
    opacity: 0;
    transform: translateY(50px);
}

.in {
    opacity: 1;
    transform: translateY(0);
    transition: all 1.7s ease;
}

#hamburg-fair .clip01 {
    clip-path: inset(0 0 100% 0);
}

#hamburg-fair .mv .clip01, #hamburg-fair .in .clip01 {
    animation: clip01 .8s ease-in-out forwards;
}


#hamburg-fair .mvCopy.clip01 {
    animation-delay: 1.2s;
	animation-duration: 1.4s;
}

#hamburg-fair .copy.clip01 {
    animation-delay: 0.6s;
}

@keyframes clip01 {
	0% { clip-path: inset(0 0 100% 0); }
	100% { clip-path: inset(0 0 0 0); }
}

/* 順番にふわっと表示 */
#hamburg-fair .mv .image img.layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	animation: fadeOnly 1s ease forwards;
}

#hamburg-fair .mv .image img.layer1 { animation-delay: 0.3s; z-index: 2; }
#hamburg-fair .mv .image img.layer2 { animation-delay: 0.5s; z-index: 3; }
#hamburg-fair .mv .image img.layer3 { animation-delay: 0.7s; z-index: 4; }
#hamburg-fair .mv .image img.layer4 { animation-delay: 0.9s; z-index: 5; }
#hamburg-fair .mv .image img.layer5 { animation-delay: 0.1s; z-index: 6; }
#hamburg-fair .mv .image img.layer6 { animation-delay: 0.12s; z-index: 7; }


@keyframes fadeOnly {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/*じわっ*/
#hamburg-fair .mv .mvTitle,
#hamburg-fair .mv .mvStart{
    opacity: 0;
}

#hamburg-fair .mv .blur,
#hamburg-fair .menuBox .blur,
#hamburg-fair .snsList.blur{
    animation: blurAnime 1.2s ease forwards;
}

#hamburg-fair .mv .mvTitle {
	animation-delay: 1s;
}

#hamburg-fair .mv .mvStart.blur{
    animation-delay: 1.6s;
}

#hamburg-fair .bnrArea .out .in .blur {
    animation: blur .8s ease-in-out forwards;
}

.bnrArea.in .blur {
    animation: blurAnime 0.8s ease-in-out forwards;
}

@keyframes blurAnime{
    from {
    filter: blur(15px);
    transform: scale(1.3);
    opacity: 0;
    }

    to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
    }
}

#hamburg-fair .clip03 {
    clip-path: inset(150% 100% 0 0);
}

#hamburg-fair .in .en.clip03 {
	animation: clip03 .8s ease forwards;
}

@keyframes clip03 {
	0% { clip-path: inset(150% 100% 0 0); }
	100% { clip-path: inset(0 0 0 0); }
}

@keyframes decoFloat {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/*メニューの各国モチーフ*/
#hamburg-fair #menuArea .menuInner.in .decoBounce {
	animation:  decoFloat 0.8s ease forwards,     /* フェードイン＋上昇 */
			    decoBigBounce 1s ease-out 0.8s forwards; /* 1回だけ大きくジャンプ */
	animation-delay: 1.3s;
}

@keyframes decoBigBounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); } /* 1回だけ上に大きく跳ねる */
  100% { transform: translateY(0); }     /* 元の位置に戻る */
}

/*飛行機アニメーション*/
@keyframes planeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes planeFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/*--- delay ---*/
#hamburg-fair .delay02{ animation-delay: 0.2s !important;}
#hamburg-fair .delay04{ animation-delay: 0.4s !important;}
#hamburg-fair .delay06{ animation-delay: 0.6s !important;}
#hamburg-fair .delay08{ animation-delay: 0.8s !important;}
#hamburg-fair .delay10{ animation-delay: 1.0s !important;}
#hamburg-fair .delay11{ animation-delay: 1.1s !important;}
#hamburg-fair .delay12{ animation-delay: 1.2s !important;}
#hamburg-fair .delay14{ animation-delay: 1.4s !important;}
#hamburg-fair .delay16{ animation-delay: 1.6s !important;}
#hamburg-fair .delay18{ animation-delay: 1.8s !important;}


/*----------------------------------------------------
	☆TABLET UNDER 1080
----------------------------------------------------*/

@media screen and (max-width:1080px) {

    /*--- mv ---*/

    /*--- メニュー ---*/

    /*--- sample02 ---*/
    
}




/*----------------------------------------------------
	☆TABLET UNDER 800
----------------------------------------------------*/

@media screen and (max-width:800px) {
	
		.pc-none2 {
		display: block;
	}

	.sp-none2 {
		display: none;
	}

    /*--- mv ---*/

    /*--- menu ---*/
	#hamburg-fair .tab_item {
        height: 80px;         /* いい感じの高さに変更 */
    }
	
	#tabBox {
    padding-top: 166px;
	}
	
	#hamburg-fair #message {
		height: 340px;
	}
	
	#hamburg-fair #menuArea .menuInner {
		flex-direction: column;
	}
	
	#hamburg-fair #menuArea .menuBox .txtBox h3 {
		font-size: clamp(18px, 4.3vw, 29px);
		text-align: center;
	}
	
	#hamburg-fair #menuArea .menuBox .txtBox .price {
		text-align: center;
	}
	
	#hamburg-fair #menuArea .menuBox.right .menuInner {
		flex-direction: column;
	}
	
	#hamburg-fair #menuArea .menuInner.right {
    text-align: left;
}
	
	#hamburg-fair #menuArea .txtBox {
    padding-right: 0;
	}
	
	#hamburg-fair #menuArea .txtBox {
    width: 59%;
	}
	
	#hamburg-fair #menuArea .menuBox.no1 {
		margin-top: 60px;
	}

	/* まず全menuBoxの上マージンをリセット */
	#hamburg-fair #menuArea .menuBox {
		margin-top: 0;
	}

	/* 最初だけ60px */
	#hamburg-fair #menuArea .menuBox:first-child {
		margin-top: 60px;
	}

	#hamburg-fair #menuArea .menuBox {
		margin: 0 auto 60px;
	}
	
	#hamburg-fair #menuArea .deco3 {
		right: 75%;
	}
	
	#hamburg-fair #menuArea .deco5 {
		right: 81%;
	}
	
	#hamburg-fair #menuArea .menuBox.no1 .planeWrap {
    width: 20%;
	bottom: -8%;
	right: 8%;
	}
	
	#setArea .setPlaneWrap {
		width: 16%;
		right: -3%;
		top: 32%;
	}
	
    /*--- キャンペーン ---*/
	
	#campaignArea .appArea {
    padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 40px) clamp(10px, 4vw, 30px);
}
	
	#campaignArea .campaignBox.no3 .campaignTitle .titleIcon {
    position: absolute;
    top: -100px;
    right: 0px;
	}
	
	#campaignArea .campaignBox.no3 .menuList {
    grid-template-columns: repeat(2, 1fr);
  }
	
	#campaignArea .campaignBox.no2 .campaignFrame {
	padding: 30px 15px;
	margin: 80px auto 30px;
    }

    #campaignArea .campaignBox.no2 .campaignTitle {
        padding: 15px 20px;
    }

    #campaignArea .campaignBox.no2 .campaignTitle h3 {
        font-size: clamp(16px, 5vw, 48px);
    }

    #campaignArea .campaignBox.no2 .campaignTitle h3 span .sub {
        font-size: clamp(14px, 4vw, 26px);
    }

    #campaignArea .campaignBox.no2 .campaignFrame_deco img {
        width: 25%;
        max-width: 200px;
    }

    #campaignArea .campaignBox.no2 .campaignPeriod h4 {
        font-size: clamp(12px, 3vw, 20px);
        padding: 6px 15px;
    }

    #campaignArea .campaignBox.no2 .campaignText p {
        font-size: clamp(14px, 3vw, 20px);
        line-height: 2;
    }

    #campaignArea .campaignBox.no2 .prizeImages .imageBox {
        flex: 1 1 100%;
        max-width: none;
    }

    #campaignArea .campaignBox.no2 .participationImage img {
        max-width: 100%;
    }
	
	#campaignArea .campaignBox.no3 .menuItem {
    flex: 1 1 calc(50% - 10px); /* 2列 */
	}
	
	#hamburg-fair .spicy img {
		height: clamp(20px, 1.8vw, 23px);
		width: auto;
		display: block;
	}
    
}

/*----------------------------------------------------
	☆UNDER 735
----------------------------------------------------*/

@media (max-width: 735px) {
  #campaignArea .bodyDecoLeft,
  #campaignArea .bodyDecoRight {
    display: none;
  }
	
#campaignArea .campaignText p {
  margin: clamp(40px, 5vw, 70px) 0;
}


/*----------------------------------------------------
	☆UNDER 600
----------------------------------------------------*/

@media screen and (max-width:600px) {
	
	.pc-none {
		display: block;
	}

	.sp-none {
		display: none;
	}
	
    /*--- mv ---*/
	
    #hamburg-fair .mv .mvTitle {
        position: absolute;
        top: 26%;
        left: 5%;
        width: min(544px, 90%);
    }

	#hamburg-fair .mv .mvCopy {
        position: absolute;
        top: 7.5%;
        left: 81%;
        width: 11%;
	}

	#hamburg-fair .mv .mvStart {
        position: absolute;
        top: 4%;
        left: 5%;
        width: min(144px, 24%);
	}
	
	#hamburg-fair .mv .image {
        padding-top: calc(560 / 400 * 100%);
	}
	
	#hamburg-fair #message {
	height: auto;
	padding: 40px 0 100px;
	}
	
	#hamburg-fair .mv .mvPlaneWrap {
    width: 26%;
    left: 49.5%;
	top: 54%;
	}
	
	#hamburg-fair #message > p {
    margin-bottom: 30px;
	}

	#hamburg-fair .tab_item {
	height: 60px;
	}

	#tabBox {
	padding-top: 186px;
	}
	
	.tab_item.tab1:before,
	.tab_item.tab2:before{
    top: -20px;
	width: 60px;
	height: 40px;
	}
	
	.tab_item .tit {
    font-size: clamp(17px, 2.5vw, 28px);
	}
	
	#campaignArea .campaignFrame.no4 {
    margin: 60px auto 40px;
	}
	
.tab_item a {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  border: none;
  background-clip: padding-box;
}

.tab_item a:focus,
.tab_item a:active,
.tab_item a:focus-visible {
  outline: none;
  box-shadow: none;
}
	
    /*--- メニュー ---*/
	
	#hamburg-fair #menuArea .imgBox {
        max-width: 450px;
        width: 100%;
}
	
	#hamburg-fair #menuArea .txtBox {
	width: 90%;
	}
	
	#hamburg-fair #menuArea .menuBox .txtBox h3 {
        font-size: clamp(18px, 7vw, 29px);
    }
	
	    #hamburg-fair #menuArea .menuBox {
        margin: 0 auto 40px;
    }
	
	#hamburg-fair #menuArea .menuBox_deco {
    right: -13px;
    width: 50%;
	}
	
	#hamburg-fair #menuArea .deco1 {
    left: -11px;
    bottom: 3px;
	width: 33%;
	}
	
	#hamburg-fair #menuArea .menuBox.no1 .planeWrap {
	width: 30%;
	bottom: -8%;
	right: -1%;
	}
	
	#hamburg-fair #menuArea .deco2 {
	width: 33%;
	}
	
	#hamburg-fair #menuArea .deco3 {
	right: 69%;
	width: 36%;
	}
	
	#hamburg-fair #menuArea .deco4 {
	right: -5%;
	width: 33%;
	}
	
	#hamburg-fair #menuArea .deco5 {
		right: 73%;
		bottom: -4%;
		width: 26%;
	}
	
	#hamburg-fair #menuArea .deco6 {
    right: -2%;
	bottom: 0%;
	width: 27%;
	}
	
	#hamburg-fair #setArea .imgBox:first-child .imgBoxInner {
	overflow: hidden;
	aspect-ratio: 320 / 143;
	}

	#setArea .setInnerBox {
    border-radius: 40px;
    padding: clamp(15px, 5vw, 30px) clamp(15px, 5vw, 40px) clamp(20px, 5vw, 40px);
	}
	
	#setArea .setInnerBox > .imgBox:last-child img.fit {
    width: 90%;          /* 画面幅に応じて自動で縮小 */
    max-width: 420px;   /* 最大幅を指定 */
    height: auto;        /* 縦横比を維持 */
    display: block;
    margin: 0 auto;      /* 中央揃え */
	}

	#setArea .setPlaneWrap {
	width: 20%;
	right: -3%;
	top: 2%;
	}

	#setArea .moneyBox img.fit {
	margin: 10px auto 0px;
	}
	
	/*--- キャンペーン ---*/
	
	#hamburg-fair #message > p {
    font-size: clamp(15px, 1.47vw, 22px);
	}
	
	#campaignArea .campaignFrame {
    margin: 70px auto 40px;
	}
	
    #campaignArea .campaignImages .imageBox { flex: 1 1 100%; }
    #campaignArea .campaignTitle h3 { font-size: clamp(16px, 4vw, 22px); }
	
    #campaignArea .campaignText p { 
		font-size: clamp(14px, 2vw, 20px);
			letter-spacing: -0.05em; 
		            font-weight: 600;
	}

	#campaignArea .campaignBox.no3 .menuItem {
	flex: 1 1 100%; /* 1列 */
	}
	
	#campaignArea .campaignTitle {
    padding: 30px;
		padding-bottom: 25px;
	}
	
	#campaignArea .campaignFrame {
	padding: 15px;
	}
	
  #campaignArea .campaignImages {
    flex-direction: column;
  }

  /* reverseクラスが付いている場合だけ順番を逆に */
  #campaignArea .campaignImages.reverse {
    flex-direction: column-reverse;
  }
	
    #campaignArea .campaignText p {
		margin-top: 30px;
        margin-bottom: 30px;
    }
	
	#campaignArea .campaignImages {
            gap: 100px;
	}
	
	
	#campaignArea .campaignFrame_deco img,
	#campaignArea .campaignBox.no2 .campaignFrame_deco img { 
		width: clamp(60px, 60vw, 80px); 
	}

	
	#campaignArea .campaignBox.no2 .campaignFrame {
	padding: 15px;
	margin: 80px auto 30px;
	}
	
	
	#campaignArea .campaignBox.no2 .campaignTitle h3 span .sub {
	font-size: clamp(12px, 3vw, 28px);
	letter-spacing: -0.05em;
	}
	
	    #campaignArea .campaignBox.no2 .campaignTitle {
        padding: 20px;
    }
	
	    #campaignArea .campaignBox.no2 .campaignPeriod h4 {
        padding: 6px 35px;
    }
	
	#campaignArea .campaignBox.no2 .campaignPeriod p {
	font-size: clamp(20px, 2.27vw, 34px);
	}
	#campaignArea .campaignBox.no2 .campaignText p .highlight {
	font-size: clamp(16px, 4vw, 30px);
	line-height: 1.8;
	}

	#campaignArea .campaignBox.no2 .campaignTitle h3 .titleImage {
	display: inline-block;
	width: 70%;
	}
	
	#campaignArea .campaignBox.no2 .campaignText p {
	line-height: 2.2;
	}
	
	#campaignArea .campaignBox.no3 .campaignFrame {
    padding: 30px;
	margin: 80px auto 0px;
	}
	
	#campaignArea .campaignBox.no3 .campaignTitle h3 {
    font-size: clamp(21px, 2.67vw, 40px);
}
	#campaignArea .campaignBox.no3 .campaignTitle h3 span {
    font-size: clamp(14px, 2vw, 30px);
	}
	
	#campaignArea .campaignTitle h3 {
		    line-height: 1.4;
	}

	
	#campaignArea .campaignBox.no3 h3 {
    font-size: clamp(18px, 4.5vw, 26px);
  }

  #campaignArea .campaignBox.no3 .titleIcon {
    width: 60px;
  }
	
    #campaignArea .campaignBox.no3 .campaignTitle .titleIcon {
	position: absolute;
	top: -60px;
	right: -20px;
	width: 31%;
	max-width: 145px;
	}
	
	#hamburg-fair .tabEnd {
    margin-top: 80px;
	}
	
	#campaignArea .campaignBox.no2 .prizesWrapper {
    width: 100%;
	}
	
	#campaignArea .campaignImages .imageBox .imageDeco {
    top: -4%;
	}
	
	#campaignArea .campaignImages .imageBox .imageDeco2 {
	top: -7.5%;
	width: 100%;
	}
	
	#campaignArea .appArea {
	padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 40px) clamp(10px, 7vw, 40px);
	}
	
/*----------------------------------------------------
	☆UNDER 400
----------------------------------------------------*/
	
    @media screen and (max-width: 400px) {
        #campaignArea .campaignImages {
		gap: 80px;
        }
		#campaignArea .campaignImages .imageBox .imageDeco2 {
            top: -10%;
        }
}
	
/*-------------------------------------------
Animation
-------------------------------------------*/
	
	#hamburg-fair .mv .mvTitle {
		animation-delay: 0.3s;
	}

	#hamburg-fair .mvCopy.clip01 {
		animation-delay: 0.5s;
	}

	#hamburg-fair .mv .mvStart.blur {
		animation-delay: 0.5s;
	}

	#hamburg-fair .mv .image img.layer1 { animation-delay: 0s; z-index: 5; }
	#hamburg-fair .mv .image img.layer2 { animation-delay: 0s; z-index: 4; }
	#hamburg-fair .mv .image img.layer3 { animation-delay: 0s; z-index: 3; }
	#hamburg-fair .mv .image img.layer4 { animation-delay: 0s; z-index: 2; }

}


.bnrLink {
	max-width: 384px;
	width: 90%;
	margin: 60px auto;
}

.bnrLink a {
	display: block;
    overflow: hidden;
    border-radius: 12px;
}

.bnrLink a img {
	transition: .3s;
}

.bnrLink a:hover img {
    transform: scale(1.05);
}
	
}