@charset "UTF-8";

*,*::before,*::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
img{
max-width: 100%;
height: auto;
vertical-align: middle;
}
/* スムーズスクロールを有効にする */
html {
    scroll-behavior: smooth;
}
/* 到着位置がヘッダー（80px）と重ならないように調整 */
section[id] {
    scroll-margin-top: 80px;
}
header{
width: 100%;
background-color: #603813;
height: 80px;
padding: 10px 20px;
}
h1{
width:auto;
height:auto;
margin-top: 30px;
margin-right: 50px;
}
.container{
height: 100%;
}
header h1 img{
display: block;
height: 50px;
width: auto;
}
header .wrapper{
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: 1200px;
margin: 0 auto;
}
h1.logo{
margin: 0;
flex-shrink: 0;
}
nav{
display: flex;
justify-content: flex-end;
}
.grobal-nav{
margin-left: auto;
}
.grobal-nav ul{
gap:10px;
}
.grobal-nav a{
display: inline-block;
cursor: pointer;
}
.grobal-nav a:hover{
animation: nav-purun 1s ease-in-out;
cursor: url("../images/icon_b120.png") 16 16, pointer;
}
@keyframes nav-purun{
0%{transform: scale(1);}
30%{transform: scale(1.18, 0.95);}
60%{transform: scale(0.96, 10.5);}
100%{transform: scale(1);}
}
nav ul{
list-style-type: none;
display: flex;
}
nav a{
display: block;
text-decoration: none;
padding: 20px;
color: #fff;
}
.potta-one-regular {
  font-family: "Potta One", system-ui;
  font-weight: 400;
  font-style: normal;
}


/*ファーストビューh2*/
.hero{
position: relative;
max-width: 2000px;
margin: 0;
}
.h2-text,
.h2-nikudango,
.midashi img,
.sanjou img{
opacity: 0;
transform: scale(1);
position: relative;
top:auto;
left: auto;
right: auto;
dottom: auto;
/*transform: none;*/
}
.is-show .h2-text{
animation: h2-pop 1.8s ease-out forwards;
}
.is-show .midashi img{
animation: midashi-pop 2.2s ease-out forwards;
animation-delay: 1.8s;
}
.is-show .sanjou img{
animation: sanjou-pop 1.2s ease-out forwards;
animation-delay: 3.6s;
}
.is-show .h2-nikudango{
animation: dango-in 1.8s ease-out forwards;
animation-delay: 4.5s;
}
h2{
font-size: 40px;
font-family:aclonica;
}
.h2-text{
position: absolute;
left: 5%;
transform: translateX(50%);
top: 3%;
display: inline-block;
/*transform: scale(1.4);*/
opacity: 1;
animation-delay: 0s;
text-align: center;
width: 100%;
}
@keyframes h2-pop{
0%{transform: scale(2.4);
opacity: 0;}
70%{transform: scale(10.5);
opacity: 1;}
100%{transform: scale(1);}
}


/*ファーストビュー肉巻きだんご文字*/
.midashi img{
width:100%;
max-width: 1200px;
display: block;
margin: 0 auto;
}
@keyframes midashi-pop{
0%{transform: scale(2.8);
opacity: 0;}
70%{transform: scale(10.5);
opacity: 1;}
100%{transform: scale(1);
opacity: 1;}
}
.midashi{
position:relative;
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.shop-bg{
background-image: url("../images/shop.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size:contain;
height: auto;
width: 100%;
overflow: hidden;
}
.sanjou{
position:absolute;
right: 0;
bottom:-120px;
}
.sanjou img{
width: 350px;
margin-top: 8px; 
}
@keyframes sanjou-pop{
0%{opacity: 0;
transform: scale(.08);}
60%{opacity: 1;
transform: scale(5.2);}
100%{opacity: 1;
transform: scale(1);}
}


/*ファーストビュー*/
.fv{
position: relative;
min-height: 850px;
display:flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 120px; 
}

@media (max-width: 768px){
.sanjou{
position: static;
margin-top:10px;
text-align: center;
}
}

/*ドでかだんご*/
.h2-nikudango{
transform: translateY(-80%);
width: 100%;
bottom: 10%;
max-width: 1100px;
position:relative;
right: 180px;
top: 280px;
display: block; /* 文字の幅に合わせる */
    z-index: 10;
    font-size: clamp(2rem, 8vw, 5rem); /* 画面幅に合わせて文字サイズも自動調整 */
    text-align: center;
    margin: 0 auto;
}
/* 2. だんご画像（img）を文字に追従させる */
.dodeka-img {
    position: absolute;
    /* 文字の中央を基準にする */
    top: 90%;
    left: 80%;
    transform: translate(-50%, -50%) !important;
    /* 文字より一回り大きいサイズに設定（お好みで調整） */
    width: 120%; 
    height: auto;
    max-width: none; /* 親の幅に縛られないように */
    z-index: -1; /* 文字の背面に配置 */
    pointer-events: none; /* 文字の選択を邪魔しない */
}
@media (max-width: 768px){
.h2-nikudango{
width:90%;
reight:-40px;
top:-80px;
}
}
@keyframes dango-in{
0%{
transform: translate(0px, -50%)scale(1.5);
opacity: 0;
}
70%{
transform: translate(-300px, -150%)scale(3.1);
opacity: 1;
}
100%{
transform: translate(0, -50%)scale(1);
opacity: 1;
}
}


/* --- ファーストビューのレスポンシブ修正 --- */
@media (max-width: 768px) {
  
  /* 1. ファーストビューの調整 */
  .fv {
    min-height: auto; /* 高さを固定しない */
    padding-top: 60px;
    padding-bottom: 40px;
  }
  .h2-text {
    position: static; /* 絶対配置を解除 */
    transform: none;
    font-size: 20px; /* 文字を小さく */
    margin-bottom: 20px;
    opacity: 1; /* アニメーションさせない場合は1、させる場合はJS連動 */
  }
  .midashi {
    width: 95%;
  }
  .sanjou {
    position: static;
    margin-top: 20px;
  }
  .sanjou img {
    width: 200px; /* 「参上」を小さく */
  }
  .h2-nikudango {
    position: relative; /* 流れの中に組み込む */
    top: 0;
    right: 0;
    width: 80%;
    margin: 30px auto 0;
    transform: none;
  }
  /* 2. メニュー（だんご）の重なり調整 */
  .item-inner {
    width: 90%; /* 横幅を広く使う */
  }
  .dango {
    width: 60%; /* 少し小さく */
    top: -40%; /* 帯の上に少し乗るくらいに調整 */
  }
  .item.right .dango {
    right: -10%;
  }
  .item.left .dango {
    left: -10%;
  }
  .caption {
    font-size: 24px; /* スマホで見やすいサイズに */
    left: 20px;
    bottom: 15%;
  }
  /* 3. 店舗紹介の調整 */
  .shop-inner {
    width: 90%; /* 40%から拡大 */
    gap: 20px;
  }
  .shop-inner img {
    margin-bottom: 10px;
  }
  address, .shop p {
    padding: 0 20px;
    word-break: break-all;
  }
}






/*ギルティ*/
.guilty h3{
color: #603813;
font-size: 50px;
padding: 10px 0;
text-shadow: 20px 20px 0 rgba(246,146,30,1),20px -20px 0 rgba(246,146,30,.5)
,-15px -15px 0 rgba(246,146,30,.7),-30px -30px 0 rgba(246,146,30,1),-35px 35px 0 rgba(246,146,30,.7);
}
.guilty{
font-size: 60px;
color: #603813;
text-align: center;
}
.guilty p{
overflow: hidden;
}
.guilty .line{
/*padding-top: 80px;*/
display: inline-block;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.guilty.show .line{
opacity: 1;
transform: translateY(0);
}
.guilty.show .line-1{opacity: 1; transform: translateY(0); transition-delay: 0.2s;}
.guilty.show .line-2{opacity: 1; transform: translateY(0); transition-delay: 1.0s;}
.guilty.show .line-3{opacity: 1; transform: translateY(0); transition-delay: 2.5s;}
.guilty.show .purun{
	display: inline-block;
	animation: purun-text 1.2s ease-out 1.5s forwards;
	}
@keyframes purun-text{
0%{transform: scale(1);}
30%{transform: scale(1.3,0.8,);}
50%{transform: scale(0.9,1.1);}
70%{transform: scale(1.05,0.95);}
100%{transform: scale(1);}
}
.guilty.show .unyon{
display: inline-block;
animation: unyon-text 2s ease-in-out 1.2s forwards;
}
@keyframes unyon-text{
0%,100%{transform: scale(1) rotate(0deg);}
25%{transform: scale(1.05,0.8) rotate(-3deg);}
50%{transform: scale(0.95,1.1) rotate(3deg);}
75%{transform: scale(1.02,0.95) rotate(-1deg);}
}
.line{
font-size: 40px;
font-weight: bold;
}



/*めにゅー*/
.menu{
text-align: center;
color: #603813;
font-size: 50px;
margin-bottom: 0;
padding-bottom: 0;
position: relative;
z-index: 1;
}
/*溶ける*/
.melt span{
position: relative;
display: inline-block;
opacity: 1;
clip-path: inset(0 0 0 0);
filter: blur(0);
transition: 
clip-path 1s ease,
filter 1s ease,
opacity 1s ease;
/*animation: melt-loop 5.2s ease-in-out 1;*//*溶ける速さ*/
animation-fill-mode: forwards;
}
.melt.is-melt span {
  animation: melt-loop 5.2s ease-in-out 1;
}

/*ドミノ消え方*/
.melt span:nth-child(1){
animation-delay: 0s; 
}
.melt span:nth-child(2){
animation-delay: 0.25s; 
}
.melt span:nth-child(3){
animation-delay: 0.5s; 
}
.melt span:nth-child(4){
animation-delay: 0.75s; 
}
.melt span:nth-child(5){
animation-delay: 1.0s; 
}
.melt span:nth-child(6){
animation-delay: 1.25s; 
}
.melt span:nth-child(7){
animation-delay: 1.5s; 
}
.melt{
position: relative;
white-space: nowrap;
overflow: hidden;
}
@keyframes drip{
0%{transform: translateY(0); opacity: 0;}
100%{transform: translateY(30px);opacity: 0.6;}
}
/*溶けて戻る*/
@keyframes melt-loop{
0%{
clip-path: inset(0 0 0 0);
filter: blur(0);
opacity: 1;
}
45%{
clip-path: inset(100% 0 0 0);
filter: blur(8px);
opacity: 0;
}
60%{
clip-path: inset(100% 0 0 0);
opacity: 0;
}
100%{
clip-path: inset(0 0 0 0);
filter: blur(0);
opacity: 1;
}
}
@media (max-width: 768px){
.melt{
font-size: 10vw;
}
}



 body{
    background:#faf7f3;
    font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
	background-image:url("../images/obi_03.png");
	background-size:contain;
	background-position: center;
	background-repeat: no-repeat;
	margin: 0 auto;
	min-height: 100px;
	flex-direction: column;
	min-width: 100%;
  }
  main{
  flex: 1;
  }
  section{
  padding: 60px 0;
  }
  .lp{
    width:100%;
    /*max-width:430px;*/
  }
  /* 画面が小さい時（スマホ時）はさらに余白を詰める */
@media (max-width: 768px) {
  section {
    padding: 40px 0;
  }
}
  
  /*ひょっこりだんごろう*/
  #character{
  width: 240px;
  }
.character-wrap{
position: fixed;
bottom: -500px;
right: 40px;
transition: all 0.6s ease;
z-index: 9999;
opacity: 0;
pointer-events: none;
}
.character-wrap.pos-right-bottom {
  bottom: -300px;
  right: 40px;
}
.character-wrap.pos-right-bottom.is-show {
  bottom: 34px;
  opacity: 1;
}
/* パターンB：右上から（追加） */
.character-wrap.pos-right-top {
  top: -300px;
  right: 40px;
}
.character-wrap.pos-right-top.is-show {
  top: 100px; /* ヘッダーを避けるくらいの位置 */
  opacity: 1;
}
/* パターンC：真下から（追加） */
.character-wrap.pos-bottom-center {
  bottom: -300px;
  left: 35%;
  transform: translateX(-50%);
}
.character-wrap.pos-bottom-center.is-show {
  bottom: 0;
  opacity: 1;
}


/* ひょっこり動くアニメーションは共通で利用 */
.character-wrap.is-show img{
bottom: 30px;
animation: hyoko 0.5s ease-out,
pyoko-purun 2.5s ease-in-out 1.2s infinite;
}
@keyframes hyoko{
0%{transform: translateY(0);}
60%{transform: translateY(-40px);}
100%{transform: translateY(0);}
}
@keyframes pyoko-purun{
0%{transform: translateY(0) scale(1);}
30%{transform: translateY(-25px)scale(1.05);}
50%{transform: translateY(0)scale(0.95);}
70%{transform: scale(1.03);}
100%{transform: scale(1);}
}
  /* 各アイテム */
  .item{
    position:relative;
    margin:10px 0 10px;
  }
  
  /*ひょっこりだんごを消す*/
@media screen and (max-width: 768px) {
  /* スマホではキャラクターのラップ要素を完全に消す */
  .character-wrap {
    display: none !important;
  }
}

  /* 黒文字＋オレンジ帯（1枚画像） */
  .title-img{
    width:100%;
    max-width:700px;
    display:block;
    transform:translateX(-120%);
    opacity:0;
    transition:transform .7s cubic-bezier(.22,.9,.22,1), opacity .7s;
	margin: 0 auto -80px;
	position: relative;
height: auto;
  }
  

  /* 団子画像（サイズバラバラ対応） */
  .dango{
    position:absolute;
    right:0;
    top:20%;
    width:50%;
    max-width:650px;
    transform:translateY(40px) scale(0.65);
    opacity:0;
    transition:transform .55s cubic-bezier(.22,.9,.22,1), opacity .55s;
    pointer-events:none;
  }
  /*だんごまとめ*/
  .item-inner{
  position: relative;
  width: 80%;
  max-width: 700px;
  margin: 0 auto;
  }
  /*右だんご*/
.item.right .title-img{
transform: translateX(-120%);
}
.item.right.show .title-img{
transform: translateX(0);
opacity: 1;
}
.item.right .dango{
right: -5%;
top: -25%;
}
.item.right.show .dango{
transition-delay: .2s;
transform: translateY(0) scale(1);
opacity: 1;
}

/*左だんご*/
.item.left .title-img{
transform: translateX(120%);
}
.item.left.show .title-img{
transform: translateX(0);
opacity: 1;
}
.item.left .dango{
left: -5%;
top: -25%;
}
.item.left.show .dango{
transition-delay: .2s;
transform: translateY(0) scale(1);
opacity: 1;
}

  /* だんご名白文字（テキスト） */
  .caption{
    white-space: nowrap;
	margin-top: 5px;
    display:inline-block;
    color:#fff;
    font-size: clamp(20px,5vw,50px);
	font-weight: bold;
    padding:0 10px 20px 40px;
    border-radius:6px;
    transition:transform .45s ease, opacity .45s;
    max-width:95%;
    line-height:1.5;
	position: absolute;
	bottom: 10%;
	left: 5vh;
	width: 100%;
  }
.title-wrap{
position: relative;
width: 90%;
max-width: 700px;
margin: 0 auto;
}
  /* 発火後（順番に出る） */
  .item.show .title-img{
    transform:translateX(0);
    opacity:1;
  } 
  .item.show .caption{
    transition-delay:.45s;
    transform:translateY(0);
    opacity:1;
  }
  .item.show .dango{
  transition-delay:.5s;
    transform:translateY(0) scale(1);
    opacity:1;
  animation:  purun 1.2s ease-out 0.3s forwards;
  }
  @keyframes purun{
  0%{
  transform: scale(1);
  }
  60%{
  transform: scale(1.12);
  }
  100%{
  transform: scale(1);
  }
  }
  
  /* --- だんごメニュー切り替え設定 --- */
.sp-only { display: none; }

@media screen and (max-width: 768px) {
  .pc-only { display: none !important; }
  .sp-only { display: block; }
  /* 画面いっぱいに広げるための設定 */
  .lp.char-2 {
    width: 100%;
    overflow-x: hidden; /* スライドのアニメーションではみ出すのを防ぐ */
  }
  .item-inner {
    width: 100% !important; /* 横幅を100%に強制 */
    max-width: none !important;
    padding: 0;
  }
  /* スマホ用画像の初期状態（スライド前） */
  .item.right .sp-only {
    transform: translateX(-100%); /* 左からスライドしてくる準備 */
    opacity: 0;
    transition: transform 0.8s ease, opacity 0.8s;
  }
  .item.left .sp-only {
    transform: translateX(100%); /* 右からスライドしてくる準備 */
    opacity: 0;
    transition: transform 0.8s ease, opacity 0.8s;
  }
  /* JavaScriptで .show クラスがついた時（スライド後） */
  .item.show .sp-only {
    transform: translateX(0);
    opacity: 1;
  }
  .sp-item-img {
    width: 100%; /* 画像を横幅いっぱいに */
    height: auto;
    display: block;
  }
 /* ギルティセクション全体の調整 */
  .guilty h3 {
    font-size: 0; /* span間の隙間を消すため */
    line-height: 1.2;
    text-shadow: 10px 10px 0 rgba(246,146,30,1)20px -20px 0 rgba(246,146,30,.5)
,-15px -15px 0 rgba(246,146,30,.7),-30px -30px 0 rgba(246,146,30,1),-35px 35px 0 rgba(246,146,30,.7);; /* スマホ用に影を少し小さく調整 */
    margin-bottom: 20px;
  }
  /* 「ここは」の部分 */
  .guilty h3 .small-text {
    font-size: 45px; /* 文字を小さく */
    display: block;
    margin-bottom: 5px;
  }
  /* 「ギルティパラダイス」の部分 */
  .guilty h3 .main-title {
    font-size: 55px; /* 一行に収まる限界の大きさに調整 */
    display: block;
    white-space: nowrap; /* 強制的に一行にする */
  } 
  }
  
  /*こだわり*/
 /* こだわりセクション（佐嘉平川屋風レイアウト） */
.kodawari-premium {
  padding: 100px 0;
}
.kodawari-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}
.kodawari-header {
  text-align: center;
  margin-bottom: 80px;
}
.kodawari-header h2 {
  font-size: clamp(55px, 5vw, 42px);
  color: #603813;
  line-height: 1.4;
  position: relative;
  display: inline-block;
  margin-top: 70px;
    margin-bottom: 20px;
}
.kodawari-header p{
font-weight: bold;
font-size: 25px;
}
/* 交互のレイアウト */
.kodawari-item {
  display: flex;
  align-items: center;
  margin-bottom: 120px;
  gap: 40px;
}
.kodawari-item.reverse {
  flex-direction: row-reverse;
}

/* 画像部分 */
.kodawari-img-wrap {
  flex: 1;
  overflow: hidden;
  box-shadow: 20px 20px 0 #f6921e; /* だんごろうカラーのアクセント */
}
.kodawari-img-wrap img {
  width: 100%;
  height: 300px;
  display: block;
  transition: transform 0.5s ease;
}
.kodawari-item:hover .kodawari-img-wrap img {
  transform: scale(1.05);
}
/* テキスト部分 */
.kodawari-text {
  flex: 1;
  height: 250px;
}
.kodawari-text h3 {
  font-family: "Potta One", system-ui;
  font-size: 28px;
  color: #603813;
  margin-bottom: 15px;
  border-bottom: 2px solid #603813;
  display: inline-block;
}
.kodawari-text p {
  line-height: 1.8;
  font-weight: bold;
  color: #333;
}


/* スマホ対応 */
@media (max-width: 768px) {
  .kodawari-item, .kodawari-item.reverse {
    flex-direction: column;
    margin-bottom: 60px;
  }
  .kodawari-img-wrap {
    width: 100%;
    box-shadow: 10px 10px 0 #f6921e;
  }
  .kodawari-header h2 {
        font-size: 10vw; /* 画面幅に合わせてサイズが変化します */
        white-space: nowrap; /* ★これを入れると絶対に改行されません */
        letter-spacing: 1px; /* 文字間隔を少し詰めると収まりやすくなります */
    }
}


 /*なにものなのか？*/
 .naniyatu{
 text-align: center;
 color: #603813;
 font-size: 50px;
 }
 .naniyatu a{
 display: inline-block;
 }
  .shine-wrap{
  position: relative;
  display: inline-block;
  overflow:visible;
  }
  
  /* 初期状態（画面外・見えない） */
.naniyatu-img{
  width: 100%;
  max-width: 500px;
  height: auto;
  margin: 0 auto;
  display: block;
  opacity: 0;
  transform: scale(0.85); /* ← ここから「ぶぃ〜ん」 */
  filter: blur(8px);
  transition:
    opacity 0.6s ease,
    transform 1.8s cubic-bezier(.22,.9,.22,1);
	position: relative;
	overflow: hidden;
}

/* セクションが来たら */
.js-naniyatu.is-show .naniyatu-img{
  opacity: 1;
  transform: scale(1); /* ← 定位置に来て止まる */
  filter: blur(0);
  transition: 
  	opacity 1.8s ease,
	transform 3.0s cubic-bezier(.16,1,.3,1),
	filter 1.8s ease;
}
/*ホバーもっちん*/
.js-naniyatu.is-show a:hover .naniyatu-img{
animation: mochimunyonPurun 3.4s
cubic-bezier(.22,1,.36,1)forwards;
}
@keyframes mochimunyonPurun{
0%{
transform: scale(1) translateY(0);
}
30%{
transform: scale(1.08,0.88)translateY(15px);
}
55%{
transform: scale(0.95,1.2)translateY(4px);
}
75%{
transform: scale(1.03,0.97)translateY(10px);
}
/*ぷるんタイム*/
85%{
transform: scale(0.95,1.05)translateY(2px);
}
95%{
transform: scale(1.08,0.85)translateY(1px);
}
100%{
transform: scale(1)translateY(0);
}
}
  @media(max-width:768px){
  .naniyatu-img{
  width: 70%;
  max-width: 300px;
  }
  }
  
  /* クラスが指定されている場合は、他の h2 指定よりも優先させる */
.potta-one-regular {
  font-family: "Potta One", system-ui !important;
}
  /*店舗紹介*/
  .shop{
 text-align: center;
 padding: 10px 0;
  }
  .shop h2{
  margin-bottom: 40px;
  font-size: 40px;
  color: #603813;
  }
  .shop-inner{
  width: 40%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  justify-content:space-between;
  margin: 40px auto 0;
  gap: 50px;
  }
  /*店舗と地図画像*/
  .shop-inner img{
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  justify-content:space-between;
  }
  .shop p{
  font-weight: bold;
  }
  
  /* ハンバーガー */
.menu-btn {
    display: none; /* PCでは隠す */
}
/* --- レスポンシブ対応 (768px以下) --- */
@media screen and (max-width: 768px) {
    /* ボタンの見た目 */
    .menu-btn {
        display: block;
        width: 40px;
        height: 40px;
        position: relative;
        z-index: 100;
        cursor: pointer;
    }
    .menu-btn span {
        display: block;
        height: 2px;
        width: 30px;
        background-color: #fff;
        position: absolute;
        left: 5px;
        transition: 0.3s;
    }
    .menu-btn span:nth-child(1) { top: 10px; }
    .menu-btn span:nth-child(2) { top: 20px; }
    .menu-btn span:nth-child(3) { top: 30px; }

    /* メニューを隠しておく */
    .grobal-nav {
        position: fixed;
        top: 0;
        right: -100%; /* 右側に隠す */
        width: 100%;
        height: 100vh;
		display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(240, 90, 36, 0.55);
        transition: 0.4s;
        z-index: 90;
    }
.grobal-nav ul {
        display: flex;
        flex-direction: column; /* 縦並び */
        align-items: center;    /* 左右の中央 */
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
	.grobal-nav a {
        font-size: 24px; /* スマホで見やすいよう文字を大きく */
        font-weight: bold;
        padding: 10px 20px;
    }
	.grobal-nav li {
        margin: 15px 0; /* メニュー項目ごとの上下の隙間 */
    }
    /* メニューが開いた時の動き（JSでactiveクラスを付与） */
    .grobal-nav.active {
        right: 0;
    }
    
    /* ボタンがバツ印になるアニメーション */
    .menu-btn.active span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
    .menu-btn.active span:nth-child(2) { opacity: 0; }
    .menu-btn.active span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
}

  
  
  /*カーソル*/
  body{
cursor: url("../images/icon-32.png")16 16, auto;
}


footer{
background-color: #603813;
padding: 40px 0 20px;
    display: flex;
    flex-direction: column; /* ★縦並びにする */
    align-items: center;    /* ★中央寄せ */
    text-align: center;
color: #fff;
}
footer img{
width: 120px;
height: auto;
display: block;
margin: 0 auto;
}
/* フッターロゴの設定 */
.footer-logo img {
    width: 150px;     /* ロゴのサイズ（お好みで調整） */
    margin-bottom: 20px; /* ★ロゴとナビの間の余白 */
}
/* ナビゲーション画像の設定 */
.footer-nav {
    display: flex;
    justify-content: center;
    gap: 15px;        /* 画像同士の間隔 */
    margin-bottom: 20px;
}
.footer-nav img {
    width: 40px;      /* ★画像の大きさを小さく調整 */
    height: auto;
    transition: 0.3s;
}
.footer-nav img:hover {
    opacity: 0.7;
}
.footer-nav ul li a{
border: none;
margin-left: 0;
}
footer ul {
display: flex;
list-style-type: none;
justify-content: center;
}
footer li a{
color: #fff;
text-decoration: none;
padding: 0 20px;
border-left:1px solid #fff;
border-right: 1px solid #fff;
margin-left: -1px;
}
footer a:hover{
text-decoration: underline;
}
footer p{
text-align: center;
margin:10px 0;
color: #fff;
}


/* トップへ戻るボタンの基本スタイル */
.page-top {
    position: fixed;
    right: 20px;
    bottom: 5px;
    width: 130px;
    height: 50px;
    background-image: url("../images/botan.png");
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent; /* オレンジ色を透明にする */
    z-index: 10000; /* キャラクター(9999)より上に設定 */
    opacity: 0; /* 最初は隠す */
    visibility: hidden;
    transition: 
        opacity 0.3s ease, 
        visibility 0.3s ease, 
        transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    /* ボタンの形を整える（必要に応じて） */
    border: none;
    outline: none;
	animation: dango-purun 5s infinite;
	
}
/* ★追加：ぷるん！という動きの定義 */
@keyframes dango-purun {
    0%, 80%, 100% { transform: scale(1.0); } /* 80%までは動かない（待ち時間） */
    85% { transform: scale(1.1, 0.9); }      /* ちょっと横に潰れる */
    90% { transform: scale(0.9, 1.1) translateY(-10px); } /* 上に伸びて跳ねる */
    95% { transform: scale(1.05, 0.95); }    /* 着地して少し弾む */
}

/* ホバーした時はアニメーションを止めて、少し大きくする */
.page-top:hover {
    animation-play-state: paused !important;
	background-color: transparent !important;
    transform: scale(1.2, 0.9) translateY(10px) !important; /* 横に広がって少し潰れる（もにゅん） */
    cursor: pointer;
}
/* スクロールして表示された時のクラス */
.page-top.is-show {
    opacity: 1;
    visibility: visible;
}
/* スマホ表示（768px以下）でのサイズ固定 */
@media screen and (max-width: 768px) {
  footer img {
    width: 120px; /* スマホでちょうど良い固定幅 */
  }
}
.footer-logo a {
  display: inline-block;
}

/*動き止める*/
/**{
animation: none !important;
transition: none !important;
opacity: 1 !important;
}*/