/**********************************
吹き出し↓
**********************************/
.balloon1-right {
	position: relative;
	width: 300px;
	padding: 11px;
	margin-right: 130px;
	margin-left: auto;
	color: #555;
	font-size: 1em;
	background: #fff;
	border: 4px solid #e0edff;
	border-radius: 6px 6px 8px 8px;
	box-shadow: -1px 2px 2.5px rgba(0, 0, 0, 0.08);
	z-index: 50;
	transform-origin: right;
	transition: transform 0.5s ease;
	/* box-sizing: content-box; */
}

/*下にスクロールしたときに、吹き出しを消す*/
.balloon1-right.hide {
	transform: translate(30px, 20px) scale(0);
	transform-origin: right;
	transition: transform 0.5s ease 0.5s;
}

/*下にスクロールしたときに、吹き出しが消えてほしくないとき*/
/*no_hideを記述してください*/
.balloon1-right.no_hide,
.balloon1-right.no_hide.hide {
	transform: none;
}

/*メニューがアクティブの時、吹き出しを消すのを無効に*/
.balloon1-right.active {
	transform: none;
	transition: transform 0.5s ease;
}

.balloon1-right::before {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(100% - 13px);
	margin-top: -15px;
	width: 24px;
	height: 24px;
	background: #e0edff;
	border-radius: 3px;
	transform: rotate(5deg) skewX(40deg);
	z-index: -1;
	/* 親要素にtransformがあると、z-indexが機能しないらしい */
}

.balloon1-right::after {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(100% - 24px);
	margin-top: -18px;
	width: 24px;
	height: 30px;
	background: #fff;
	border-radius: 3px;
	z-index: -1;
	/* 親要素にtransformがあると、z-indexが機能しないらしい */
}

.balloon1-right p {
	position: relative;
	margin: 0;
	padding: 0;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-weight: bold;
	z-index: 51;
}

.balloon-text2 {
	text-align: center;
}

/*吹き出し内のテキストに改行してほしくないときのクラス*/
.white_space {
	white-space: nowrap;
}

/*SAWADA:吹き出し内のテキストを消すだけのクラス*/
.balloon-text-off {
	display: none;
}

/**********************************
レスポンシブの記述↓
**********************************/
@media screen and (max-width:599px) {
	.balloon1-right {
		width: calc(100% - 100px);
		margin-left: 0%;
		font-size: 0.9em;
		padding: 8px 11px;
		border-radius: 0 8px 8px 0px;
	}
}

/**********************************
レスポンシブの記述↑
**********************************/

/**********************************
吹き出し↑
**********************************/


/*　ハンバーガーボタン　*/
.hamburger {
	position: absolute;
	top: 0;
	right: 0px;
	z-index: 10000;
	cursor: pointer;
	-webkit-touch-callout: none;
	/* リンク長押しのポップアップを無効化 */
	-moz-user-select: none;
	/* Firefox */
	-webkit-user-select: none;
	/* Safari、Chromeなど */
	-ms-user-select: none;
	/* IE10かららしい */
	user-select: none;
	/* テキスト長押しの選択ボックスを無効化 */
}

.hamburger .character_img {
	position: absolute;
	right: 0;
	width: 100px;
	height: 100px;
	background-image: url("../image/menu_chan_button.gif");
	background-size: 95px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: bottom center;
	border: 3px solid #70d954;
	/* border-image: repeating-linear-gradient(45deg, #c21500, #c21500 5px, #ffc500 5px,#ffc500 10px); */
	border-image-slice: 1;
	border-radius: 20%;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
	transition: box-shadow 0.2s,
		background-image 0s,
		background-size 0.1s ease;
}

/*ボーダーを動かそうとした残骸*/
/* .hamburger .character_img::after{
	content: "";
	display: inline-block;
	position: absolute;
	right: calc(0px - 3px);
	top: calc(0px - 3px);
	width: 100px;
	height: 100px;
	border-radius: 20%;
	background: #000;
	opacity: 0.5;
} */

.hamburger .character_img:hover {
	box-shadow: 0 0 10px 0px rgba(50, 50, 50, 0.3);
	transition: box-shadow 0.2s ease;
}

.hamburger .character_img:active,
.hamburger.active .character_img:active {
	background-size: 92px;
	transition: box-shadow 0.2s,
		background-image 0s,
		background-size 0.1s ease;
}

/*スクロールした時の画像変更*/
.hamburger.hide .character_img {
	background-image: url("../image/menu_chan_button_hide.gif");
	transition: background-image 0s ease 0.5s;
}

/*下にスクロールしたときに、画像が変更してほしくないとき*/
/*no_hideを記述してください*/
.hamburger.no_hide.hide .character_img {
	background-image: url("../image/menu_chan_button.gif");
	transition: background-image 0s ease 0.5s;
}

.hamburger.active .character_img {
	position: absolute;
	right: 0;
	width: 100px;
	height: 100px;
	background-image: url("../image/menu_chan_button_open.jpg");
	transition: background-image 0s ease;
}

.menu_bg {
	position: fixed;
	top: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	cursor: pointer;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}

.menu_bg.active {
	visibility: visible;
	opacity: 1;
}

nav.globalMenuSp {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	color: #333;
	background: rgba(255, 255, 255, 0.95);
	text-align: center;
	transform: translateY(-100%);
	transition: transform 0.5s ease-out;
	width: 100%;
}

nav.globalMenuSp ul {
	margin: 0 auto;
	padding: 0;
	width: 100%;
}

nav.globalMenuSp ul li {
	list-style-type: none;
	padding: 0;
	width: 100%;
	border-top: 2px solid rgba(0, 25, 25, 0.4);
	font-family: 'Nunito', sans-serif;
	font-size: 1.3em;
}

nav.globalMenuSp ul li:first-child {
	padding-top: 3em;
	border-top: none;
}


nav.globalMenuSp ul li a {
	display: block;
	color: #444;
	font-weight: bold;
	padding: 1.5em 0;
	text-decoration: none;
}

nav.globalMenuSp ul li a:hover {
	background: #70d954;
	color: #eee;
	/* transform: scale(1.); */
	transition: background 0.1s ease, color 0.1s ease;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
	transform: translateY(0%);
	/* box-shadow: 0 150px 5000px rgba(0, 0, 0, 0.5); */
}


/**********************************
レスポンシブの記述↓
**********************************/
@media screen and (max-width:599px) {

	.hamburger {
		width: 80px;
	}

	.hamburger .character_img {
		width: 80px;
		height: 80px;
		background-size: 73px;
	}

	.hamburger.active .character_img {
		width: 80px;
		height: 80px;
		background-size: 73px;
	}

	.hamburger .character_img:active,
	.hamburger.active .character_img:active {
		background-size: 70px;
	}
}

/**********************************
レスポンシブの記述↑
**********************************/

/**********************************
↓↓↓↓キャラクター画像変更用の記述↓↓↓↓
**********************************/
/*ハンバーガーボタンの”.character_img”に、クラスを付けて画像を変更します。*/

/*メニュー展開時の顔1_2*/
/*face1_2*/
.hamburger.active .character_img.face1_2 {
	background-image: url("../image/menu_chan_button_open1_2.jpg");
}

/*メニュー展開時の顔2*/
/*face2*/
.hamburger.active .character_img.face2 {
	background-image: url("../image/menu_chan_button_open2.jpg");
}

/*メニュー展開時の顔2_2*/
/*face2_2*/
.hamburger.active .character_img.face2_2 {
	background-image: url("../image/menu_chan_button_open2_2.jpg");
}

/*水着メニューちゃん*/
/*swim*/
.hamburger .character_img.swim {
	background-image: url("../image/menu_chan_button_swim.gif");
}

.hamburger.hide .character_img.swim {
	background-image: url("../image/menu_chan_button_swim_hide.gif");
}

.hamburger.active .character_img.swim {
	background-image: url("../image/menu_chan_button_swim_open.jpg");
}

/*クリスマスメニューちゃん*/
/*Xmas*/
.hamburger .character_img.Xmas {
	background-color: transparent;
	background-image: url("../image/menu_chan_button_Xmas.gif");
}

.hamburger.hide .character_img.Xmas {
	background-color: transparent;
	background-image: url("../image/menu_chan_button_Xmas_hide.gif");
}

.hamburger.active .character_img.Xmas {
	background-color: transparent;
	background-image: url("../image/menu_chan_button_Xmas_open.jpg");
}

/*背景のグラデーション*/
.hamburger .character_img.Xmas::after,
.hamburger.hide .character_img.Xmas::after,
.hamburger.active .character_img.Xmas::after {
	content: "";
	display: block;
	width: 100px;
	height: 100px;
	border-radius: 20%;
	position: absolute;
	top: -3px;
	left: -3px;
	z-index: -10;
	background-color: rgb(84, 103, 146);
	background-image: linear-gradient(0deg, rgba(84, 103, 146, 1) 0%, rgba(54, 54, 54, 1) 100%);
}

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

	.hamburger .character_img.Xmas::after,
	.hamburger.hide .character_img.Xmas::after,
	.hamburger.active .character_img.Xmas::after {
		width: 80px;
		height: 80px;
	}
}


/*タイガーメニューちゃん*/
/*NY_tiger*/
.hamburger .character_img.NY_tiger {
	background-image: url("../image/menu_chan_button_NY_tiger.gif");
	background-size: 102px;
}

.hamburger.hide .character_img.NY_tiger {
	background-image: url("../image/menu_chan_button_NY_tiger_hide.gif");
}

.hamburger.active .character_img.NY_tiger {
	background-image: url("../image/menu_chan_button_NY_tiger_open.jpg");
}

.hamburger .character_img.NY_tiger:active,
.hamburger.active .character_img.NY_tiger:active {
	background-size: 99px;
}

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

	.hamburger .character_img.NY_tiger,
	.hamburger.hide .character_img.NY_tiger,
	.hamburger.active .character_img.NY_tiger {
		background-size: 80px;
	}

	.hamburger .character_img.NY_tiger:active,
	.hamburger.active .character_img.NY_tiger:active {
		background-size: 77px;
	}
}


/**********************************
↑↑↑↑キャラクター画像変更用の記述↑↑↑↑
**********************************/

/**********************************
↓↓↓↓クリック回数で変化する特別な記述↓↓↓↓
**********************************/

/*テキストがhideで消えないようにする*/
.balloon1-right.click_special_text {
	transform: none;
}

/*怒る*/
.hamburger.click_special .character_img,
.hamburger.active.click_special .character_img {
	background-image: url("../image/menu_chan_button_special.jpg");
}

/*怒る（口を閉じてる）*/
.hamburger.click_special2 .character_img,
.hamburger.active.click_special2 .character_img {
	background-image: url("../image/menu_chan_button_special2.jpg");
}

/*ぷんぷんアイコン*/
.hamburger.click_special .character_img {
	overflow: visible;
}

.hamburger.click_special .character_img::after,
.hamburger.active.click_special .character_img::after,
.hamburger.click_special2 .character_img::after,
.hamburger.active.click_special2 .character_img::after {
	content: "";
	display: block;
	width: 100px;
	height: 100px;
	background-image: url(../image/okopun.gif);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: -20px;
	left: -45px;
}


/*水着差分の特別な記述。今のところ使わない*/
/* .hamburger.click_special2.hide .character_img.swim,
.hamburger.active.click_special2.hide .character_img.swim */

/**********************************
↑↑↑↑クリック回数で変化する特別な記述↑↑↑↑
**********************************/