@charset "utf-8";
/* CSS Document */
/****#e51373****ピンク*/
/****#00ffff****水色*/
/****#a32884***紫*/
/****#3aa1dc***青*/
/****#ffff00***黄色*/
br.sp {
  display: none;
}
br.pc {
  display: block;
}
html {
height: 100%;
margin: 0;
padding: 0;	
width: 100%;	
}
body {
  font-family: 'Rounded Mplus 1c', sans-serif;
  color: #202020;
  overflow-x: hidden !important; /* 水平方向のオーバーフローを非表示にする */
  position: relative; /* 親要素が基準になるように */
  padding: 0; /* 不要なパディングを取り除く */
margin: 0;	
height: 100%;	
}
.bg_img img {
  top: 0;
  left: 0;
  z-index: -40;
  position: fixed; /* 背景を固定 */
  width: 100%;
  height: 100vh;
  overflow: auto; /* コンテンツ部分のみスクロール可能に */
 margin: 0;	
}
.news, .map-map {}
/*スライド*/
.appear {
  opacity: 0;
}
a:hover {}
ul {
  padding: 0;
}
li {
  list-style: none;
}
.pc {
  display: block;
}
.sp {
  display: none;
}
br.sp {
  display: none;
}
/*PC用メニュー*/
/*ハンバーガーボタン*/
.aicon_menu {
  display: block;
  position: fixed;
  z-index: 42;
  right: 0;
  top: 0;
  flex-direction: column;
  width: 10%;
}
.nav_bb {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8rem;
}
.sns_icon img {
  width: 20%; /* アイコンのサイズを調整 */
  height: auto;
}
/*メニューリスト*/
.pc_hd_menu {
  position: fixed;
  top: 0%;
  right: 0%;
  width: 40%;
  height: 0;
  background-color: rgba(43, 43, 43, 0.98);
  z-index: 44;
  overflow: hidden;
  text-align: center;
}
ul.pc_hd_menu_nav {
  font-weight: bold;
}
li.nav-item {
  font-family: "m-plus-rounded-1c", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #00FFFF;
  border: 4px #00FFFF solid;
  padding: 0.5rem;
  margin: 1rem;
}
ul.pc_hd_menu_nav a:hover {
  opacity: 0.7;
}
/*余白ダミー　上から下*/
.pc_hd_dummy {
  width: 100%;
  height: auto;
}
.pc_close {
  position: absolute;
  top: 0%;
  right: 0%;
  z-index: 48;
  width: 10%;
}
/*メニューリスト*/
/*PC用メニュー*/
/* スマホ・PC隠しメニューのスタイル */
.hidden-menu li a {
  padding: 0.5rem;
  color: #000;
  text-decoration: none;
}
.hidden-menu li a:hover {
  opacity: 0.7;
}
/* 矢印のスタイル */
.menu_arrow {
  margin-left: 5px;
  font-size: 12px;
  transition: transform 0.2s;
  color: #5A5858;
}
/* 隠しメニューが表示されるときの矢印の回転 */
.menu-item a.active .menu_arrow {
  transform: rotate(180deg);
  display: inline-block; /*回転するために*/
}
/* スマホ・PC隠しメニューのスタイル */
/*******header********/
li.sns_icon a {
  color: #00ffff;
  display: flex;
  font-size: 3rem;
  margin: 0.7rem 0.3rem;
  z-index: 50;
  background-color: #2a2a2a;
  padding: 0.7rem;
  border-radius: 20%;
}
.sns_icon a:hover {
  opacity: 0.7;
}
.pc_hd {}
.pc_hd_navlist {
  display: flex;
  padding: 0.5rem;
}
/*ナビゲーションのスタイル*/
.pc_hd_navlist li a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*ホバーエフェクト*/
.pc_hd_navlist li a::after {
  /*マークのスタイル*/
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: #747474;
  border-radius: 50%;
  bottom: -15px;
  left: calc(50% - 5px);
  /*不透明度0で非表示*/
  opacity: 0;
  /*下方向へ50%移動*/
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
  /*アニメーションの速度設定*/
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
ul.pc_hd_menu_nav a:hover::after {
  /*不透明度1で表示*/
  opacity: 1;
  /*0位置に移動*/
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
/*******header********/
/*******TOP********/
/****見出し*******/
.title_img_new {
  padding-top: 2rem;
  text-align: left;
  display: block;
  animation: poyoyon3 2.5s infinite;
  opacity: 1;
}
.title_img_map {
  padding-top: 4rem;
  text-align: right;
  display: block;
  animation: poyoyon3 2.5s infinite;
  opacity: 1;
}
.title_img_sc {
  padding-top: 4rem;
  text-align: center;
  display: block;
}
.title_img_gue {
  padding-top: 4rem;
  text-align: center;
  display: block;
  animation: poyoyon3 2.5s infinite;
  opacity: 1;
}
.title_img_mess {
  padding-top: 4rem;
  text-align: center;
  display: block;
  animation: poyoyon3 2.5s infinite;
  opacity: 1;
}
.map-image {
  width: 100%;
  height: auto;
  display: block;
}
.anim-box.poyoyon3.is-animated {
  animation: poyoyon3 2.5s infinite;
  opacity: 1;
}
@keyframes poyoyon3 {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 5deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}
/****見出し*******/
.sec_top {
  position: relative;
  width: 100%;
  height: 100%; /* ビューポートの高さに設定 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -75px;
  padding-bottom: 3rem;
}
.sec_top_img {
  position: relative;
  width: 100%;
  max-width: 1300px;
  padding: 0 1rem;
}
.sec_top_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20%;
}
.sec_top_img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20%;
  /*background-color: rgba(255, 255, 255, 0.5); /* 水色のフィルター (半透明) 
            mix-blend-mode: overlay; /* フィルターをオーバーレイモードで適用 */
}
.sec_top_logo {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 55%;
  height: auto;
}
.time00 {
  position: absolute;
  top: 80%;
  left: 72%;
  transform: translate(-50%, -50%);
}
.time00 img {
  width: 100%; /* ロゴの幅を調整 */
  height: auto;
}
.sec_top_catch {
  position: absolute;
  top: 80%;
  left: 30%;
  transform: translate(-50%, -50%);
}
.sec_top_catch img {
  width: 100%; /* ロゴの幅を調整 */
  height: auto;
}
/*******TOP********/
/*******NEWS********/
.coming {
  text-align: center;
}
.news_box {
  margin: 3rem 0;
}
.news_aa {
  background-color: #2a2a2a;
  border-radius: 20px;
  margin: 0 auto;
  padding: 3rem;
  border-bottom: #00ffff 3px solid;
}
p.index_h202 {
  font-weight: bold;
  font-size: 1.2rem;
  color: #00ffff;
  border-bottom: 1px #00ffff solid;
}
.index_h202 span {
  color: #fff;
}
/* ボタンの共通CSS */
.news_link {
  margin: 2rem;
  text-align: center;
  float: right;
  font-weight: bold;
}
.news_link a {
  /*
	background-image: radial-gradient(#fff 28%, transparent 35%), radial-gradient(#fff 28%, transparent 35%);
	background-size: 8px 8px;
    background-position: 0 0, 4px 4px;*/
  border: 2px solid #000;
  color: #000;
  display: inline-block;
  padding: 10px;
  position: relative;
  width: 200px;
  border-radius: 20px;
  background-color: #00ffff;
}
/* 通常の矢印 */
.news_link a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-right: 3px solid #000;
  border-top: 3px solid #000;
  transform: rotate(45deg);
  transition: .2s;
  box-sizing: border-box;
}
/* ホバー時のスタイル */
.news_link a:hover::after {
  right: 20px;
}
/*******NEWS********/
/*******ゲスト******/
.guest {
  margin-bottom: 3rem;
  display: inline-block;
}
.gue21aa {}
.gue-bg {
  display: flex;
  justify-content: center;
  align-items: center;
}
.gue_day1 {
  margin: 1rem;
}
.gue_day2 {
  margin: 1rem;
  text-align: right;
  display: inline-block;
}
/*画像*/
.gue21aa {
  padding: 1rem;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden !important;
}
.gue21aa img {
  width: 100%;
  height: auto; /* 固定高さを設定 */
  object-fit: cover;
  border: 0px solid #ffff00;
  box-shadow: 9px 9px #ffff00;
}
/*画像*/
/*画像*/
.gue22aa {
  padding: 1rem;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden !important;
}
.gue22aa img {
  width: 100%;
  height: auto; /* 固定高さを設定 */
  object-fit: cover;
  border: 0px solid #00ffff;
  box-shadow: 9px 9px #00ffff;
}
/*画像*/
p.gue21p {
  margin-top: 1rem;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  border-bottom: 3px #fff solid;
}
p.gue21p span {
  color: #ffff00;
}
p.gue21pp {
  text-align: center;
  color: #fff;
}
.gue-link {
  text-align: center;
  background-color: #2a2a2a;
  padding: 0.5rem;
  font-weight: bold;
  color: #00ffff;
  border-radius: 10px;
  margin: 0.5rem auto 0;
  width: 100px;
  border: 1px solid #2a2a2a;
}
.gue-link:hover {
  opacity: 0.8;
}
/*******ゲスト******/
/*******map********/
.map {}
.map_box {
  margin-bottom: 3rem;
  background-color: #2a2a2a;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  padding: 0.5rem;
}
.map_img {
  width: 100%;
  height: auto;
  position: relative;
}
.map_icon_1 {
  width: 30%;
  position: absolute !important;
  left: -2%; /* 必要に応じて調整 */
  top: 30%;
}
.map_icon_2 {
  width: 30%;
  position: absolute !important;
  left: 48%; /* 必要に応じて調整 */
  top: 18%;
}
.map_icon_3 {
  width: 30%;
  position: absolute !important;
  right: -5%; /* 必要に応じて調整 */
  top: 28%;
}
.map_icon_4 {
  width: 22%;
  position: absolute !important;
  right: 0%; /* 必要に応じて調整 */
  bottom: 25%;
}
.map_icon_5 {
  width: 30%;
  position: absolute !important;
  right: 30%; /* 必要に応じて調整 */
  bottom: 0%;
}
/****マウスホバーテキスト****
.map_icon_p1 {
 position: absolute !important;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.3s;
  white-space: nowrap;
  pointer-events: none;
}
/****マウスホバーテキスト****/
/* mapアイコンアニメーションの定義 */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0); /* 初期位置と最終位置 */
  }
  50% {
    transform: translateY(-10px); /* 中間の高さ */
  }
}
/* アニメーションを適用するクラス */
.map_icon_1, .map_icon_2, .map_icon_3, .map_icon_4, .map_icon_5 img {
  animation: bounce 2s infinite; /* bounceアニメーションを1秒ごとに無限に繰り返す */
}
/*******map********/
/*******schedule********/
/* 要素にアニメーションを適用 */
/*バウンド*/
@keyframes poyoyon2 {
  0% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {
    transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}
/* 要素にアニメーションを適用 */
.time-img-a, .time-img-b {
  animation: poyoyon2 1s ease-in-out forwards;
  float: left;
  width: auto;
  height: auto;
}
.time-img-a.is-animated img, .time-img-b.is-animated img {
  animation: poyoyon2 1s ease-in-out infinite; /* 無限ループ設定 */
}
.schedule {
  background-color: #fff;
  padding-bottom: 3rem;
  margin-top: 3rem;
}
.schedule_inner {
  margin: 1rem;
}
.time-img-b {
  float: right;
}
.highlight {
  background-color: #2b2b2b;
  border-bottom: none;
  text-align: center;
  color: #fff;
}
p.vertical {
  writing-mode: vertical-rl; /* 縦書き */
  margin: 0 auto;
}
.plan {
  color: #e51373;
  text-align: center;
  line-height: 1;
}
.plan span {
  font-size: 0.7rem;
}
.sk_text {
  color: #fff;
  font-weight: bold;
  text-align: end;
  padding: 0.5rem 1rem;
  text-shadow: 0 0 3px #000;
}
/*******schedule********/
/*******スポンサー*******
.sponsor{
	
	
}
.supporting_company{
	display: flex;
	justify-content: center;
	align-items: center;
	
}
.supporting_company img{
	object-fit: cover;
	width: 100%;
	height: auto;
	padding-left: 0.5rem;
}

/*******スポンサー*******/
/*******ビデオ*******/
.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 アスペクト比 (高さ / 幅 = 9 / 16 = 0.5625) */
  height: 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0.5rem;
}
.video-wrapper iframe {
  filter: brightness(1.2); /* 明るさを20%増加 */
}
.message {
  margin: 1rem 0;
}
.massage-a {
  padding: 0.5rem;
}
.massage-a video {
  width: 100%;
}
/*******ビデオ*******/
.naga_banner {
  margin: 5rem 0 0rem;
  text-align: center;
}
.naga_banner img {
  width: 65%;
}
.naga_banner:hover {
  opacity: 0.85;
}
/*
.naga_banner img:hover{
	
	opacity: 0.9;
            
}
/*******フッター********/
.footer {
	
  padding: 2rem 0 1rem;
  margin-top: 1rem;
}
.footer_inner {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pc_footer_inner {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: #fff;
}
/***追従するトップへ戻るボタン***/
#page_top {
  position: fixed;
  right: 0;
  bottom: 0;
}
#page_top a {}
#page_top a::before {}
/***トップへ戻るボタンここまで***/
/****メイン画像****/
.estate_mainimage {
  padding: 0rem;
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow: hidden !important;
  margin: 1rem;
  white-space: nowrap;
}
.estate_mainimage::before {
  content: "";
  display: block;
  padding-top: 60%;
}
.estate_mainimage img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  object-fit: cover;
}
/****メイン画像****/
/***その他ページ****/
.event {
  margin-top: 3rem;
}
.page_logo {
  width: 600px;
  height: auto;
  margin: -100px -100px -100px 0px;
}
.page_logo_re {
  width: 500px;
  height: auto;
  margin: -100px -100px -100px 0px;
position: relative;	
}
.page_title {
  text-align: center;
  background-color: #2a2a2a;
  border: 3px #00ffff solid;
  width: 50%;
  margin: 0 auto;
}
/*****文字下線短く*****/
.page_title-h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden !important;
  margin: 1.5rem 0;
}

.page_title-sav {
  border-bottom: 8px #00ffff dotted;
  color: #fff;
  font-weight: bold;
}
/*****文字下線短く*****/
.company, .company_met, .company_bee, .company_hug, .company_qq,.company_sr {
  display: flex;
}
p.company_p {
  font-weight: bold;
  color: #ffff00;
  margin: 1.5rem 0 0 0.5rem;
  font-size: 1.5rem;
}
.hall_previous {
  margin-top: 3rem;
}
.hall_one {
  margin: 0px 1rem 0;
}
.hall {
  margin: 3rem 1rem 0;
}
.hall_re {
  margin-bottom:2rem;
}
.hall_img-a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hall_img-a img {
  box-shadow: #00ffff 5px 5px 5px;
  border: 1px #00ffff solid;
  object-fit: cover;
}
/***大ホール***/
.company_wan {
  margin-top: 4rem;
  margin-bottom: -0.5rem;
}
.wan_logo {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.wan_logo_p {
  padding: 0 0.5rem;
  font-size: 1.3rem;
  font-weight: bold;
  color: #ffff00;
}
.wanpp_text {
  color: #ffff00;
  margin: 0 auto;
  width: 37%;
}
.wanpp_text_drone {
  color: #ffff00;
  margin: 0 auto;
  width: 50%;
}
.company_wanpp {
  padding-top: 0.5rem;
  font-size: 1.2rem;
  font-weight: bold;
  border-bottom: 6px #ffff00 ridge;
  text-align: center;
}
.company_wanppp {
  padding-top: 0.5rem;
  font-size: 1.2rem;
  font-weight: bold;
  border-bottom: 6px #ffff00 ridge;
  text-align: center;
}
/***大ホール***/
.hall_p01, .hall_p02 {
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
}
.hall_p01 {
  border-bottom: 6px #ffff00 ridge;
  color: #ffff00;
  padding: 0.5rem;
  line-height: 1.2;
  width: 85%;
  margin: 0 auto;
}
.hall_p02 {
  padding-top: 0.5rem;
}
.hall-pp {
  color: #fff;
  margin: 0 1rem;
  padding-top: 1rem;
}
.hall_p03 {
  padding: 1rem;
  text-align: center;
}
.hall_p03_sr {
  padding: 1rem;
  text-align: center;
}
/*画像*
.hall_img-a{
  padding: 0rem;
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow: hidden !important;
  margin-bottom: 0.5rem;
}
.hall_img-a::before {
  content: "";
  display: block;
  padding-top: 66%;
}
.hall_img-a img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  object-fit: cover;
object-position: center center;	
}
/*画像*/
/*画像*
.hall_img-a {
  padding: 1rem;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden !important;
  position: relative;
}
.hall_img-a img {
  width: 100%;
  height: 480px; /* 固定高さを設定 
  object-fit: contain; /* 中身を切らないように表示 
  border: 1px solid #ffff00;
  box-shadow: 4px 4px #ffff00;
}
/*画像*/
/***県民ホール****/
/***前庭****/
.live {
  margin: 5rem 6rem 2rem;
}
.morinaga {
  text-align: center;
  padding-top: 2rem;
}
.live-pp {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden !important;
}
.live_p01, .live_p02 {
  text-align: center;
  font-size: 1.3rem;
  font-weight: bold;
}
.live_p01 {
  border-bottom: 6px #ffff00 ridge;
  color: #ffff00;
  padding: 0.5rem;
  line-height: 1.2;
  margin: 0 auto;
  font-size: 1.5rem;
}
.live_p02 {
  padding-top: 2rem;
  border-bottom: 8px #00ffff dotted;
  margin: 0 auto;
  text-align: center;
}
.live-pp {
  color: #fff;
  margin: 0 1rem;
  padding: 1rem 0px;
}
.live_p03 {
  padding: 1rem;
  text-align: center;
}
.gue21aa {}
.gue-bg {
  display: flex;
  justify-content: center;
  align-items: center;
}
.gue_day1 {
  margin: 1rem;
}
.gue_day2 {
  margin: 1rem;
  text-align: right;
  display: inline-block;
}
/*画像*/
.liv21aa {
  padding: 0.5rem;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden !important;
}
.liv21aa img {
  width: 100%;
  height: auto; /* 固定高さを設定 */
  object-fit: cover;
  border: 0px solid #ffff00;
  box-shadow: 9px 9px #ffff00;
}
/*画像*/
/*画像*/
.liv22aa {
  padding: 0.5rem;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden !important;
}
.liv22aa img {
  width: 100%;
  height: auto; /* 固定高さを設定 */
  object-fit: cover;
  border: 0px solid #00ffff;
  box-shadow: 9px 9px #00ffff;
}
/*画像*/
p.liv21p {
  margin-top: 1rem;
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  border-bottom: 3px #fff solid;
}
p.liv21p span {
  color: #ffff00;
}
p.liv21pp {
  text-align: center;
  color: #fff;
}
.gue21 {
  display: flex;
  justify-content: center;
  align-items: center;
}
/***前庭****/
/***中ホール****/
/***ボタン****/
.btn-form {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}
.btn, a.btn, button.btn {
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}
a.btn-custom01 {
  margin-bottom: 0.5rem;
  padding: 0;
  border-radius: 0.75rem;
}
a.btn-custom01:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform: translate3d(0, 0.65rem, -1rem);
  transform: translate3d(0, 0.65rem, -1rem);
  border: 2px solid #000;
  border-radius: inherit;
  background: #ccc100;
  -webkit-box-shadow: 0 0.5rem 0 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.5rem 0 0 rgba(0, 0, 0, 0.2);
}
a.btn-custom01:after {
  font-family: "Font Awesome 5 Free";
  font-size: 2rem;
  font-weight: 900; /* Solidスタイルのためにfont-weight: 900に変更 */
  line-height: 1;
  position: absolute;
  top: calc(50% - 1rem);
  left: 1.5rem;
  margin: 0;
  padding: 0;
  content: "\f0e0";
}
.btn-custom01-front {
  position: relative;
  display: block;
  padding: 1rem 3rem 1rem 4rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border: 2px solid #000;
  border-radius: inherit;
  background: #ffff00;
}
.fa-position-left {
  position: absolute;
  top: calc(50% - 0.5em);
  left: 1rem;
}
.fa-position-right {
  position: absolute;
  top: calc(50% - 0.5em);
  right: 1rem;
}
a.btn-custom01:hover {
  -webkit-transform: translate(0, 0.25rem);
  transform: translate(0, 0.25rem);
  background: #fff100;
}
a.btn-custom01:hover:before {
  -webkit-transform: translate3d(0, 0.5rem, -1rem);
  transform: translate3d(0, 0.5rem, -1rem);
  -webkit-box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
}
a.btn-custom01:hover:after {
  content: "\f2b6";
}
a.btn-custom01:active {
  -webkit-transform: translate(0rem, 0.75rem);
  transform: translate(0rem, 0.75rem);
}
a.btn-custom01:active:before {
  -webkit-transform: translate3d(0, 0, -1rem);
  transform: translate3d(0, 0, -1rem);
  -webkit-box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
}
a.btn-custom01:active:after {
  content: "\f2b6";
}
/***ボタン****/
/***ボタン****/
.btn-form {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}
.btn, a.btn, button.btn {
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}
a.btn-02 {
  margin-bottom: 0.5rem;
  padding: 0;
  border-radius: 0.75rem;
}
a.btn-02:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform: translate3d(0, 0.65rem, -1rem);
  transform: translate3d(0, 0.65rem, -1rem);
  border: 2px solid #000;
  border-radius: inherit;
  background: #ccc100;
  -webkit-box-shadow: 0 0.5rem 0 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.5rem 0 0 rgba(0, 0, 0, 0.2);
}
a.btn-02:after {
  font-family: "Font Awesome 5 Free";
  font-size: 2rem;
  font-weight: 900; /* Solidスタイルのためにfont-weight: 900に変更 */
  line-height: 1;
  position: absolute;
  top: calc(50% - 1rem);
  left: 1.5rem;
  margin: 0;
  padding: 0;
  content: "\f3cd"; /* スマホのアイコン */
}
.btn-02-front {
  position: relative;
  display: block;
  padding: 1rem 3rem 1rem 4rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border: 2px solid #000;
  border-radius: inherit;
  background: #ffff00;
}
.fa-position-left {
  position: absolute;
  top: calc(50% - 0.5em);
  left: 1rem;
}
.fa-position-right {
  position: absolute;
  top: calc(50% - 0.5em);
  right: 1rem;
}
a.btn-02:hover {
  -webkit-transform: translate(0, 0.25rem);
  transform: translate(0, 0.25rem);
  background: #fff100;
}
a.btn-02:hover:before {
  -webkit-transform: translate3d(0, 0.5rem, -1rem);
  transform: translate3d(0, 0.5rem, -1rem);
  -webkit-box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
}
a.btn-02:hover:after {
  content: "\f3cd"; /* スマホのアイコン */
}
a.btn-02:active {
  -webkit-transform: translate(0rem, 0.75rem);
  transform: translate(0rem, 0.75rem);
}
a.btn-02:active:before {
  -webkit-transform: translate3d(0, 0, -1rem);
  transform: translate3d(0, 0, -1rem);
  -webkit-box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
}
a.btn-02:active:after {
  content: "\f3cd"; /* スマホのアイコン */
}
/***ボタン****/
.quiz_box {
  margin: 2rem 0;
}
.quiz_img {
  padding: 1rem;
}
.quiz_img img {
  box-shadow: 5px 5px 5px #000;
  border: #000 1px solid;
}
.quiz_p {
  color: #ffff00;
  font-weight: bold;
  text-align: center;
  font-size: 1.1rem;
  margin: 1rem;
}
/***中ホール****/
/***大ホール****/
.toraneko {
  text-align: center;
  margin-top: 0.5rem;
}
.poyo {
  position: relative;
  width: 100%; /* コンテナの幅を指定 */
  height: 100vh; /* コンテナの高さを指定 */
  overflow: hidden; /* 画像がはみ出さないようにする */
  display: contents;
}
.poyo .img-fluid {
  position: absolute;
  width: 130px; /* 画像の幅 */
  height: auto;
  animation: flyDiagonal 10s linear infinite;
}
@keyframes flyDiagonal {
  0% {
    transform: translate(-100px, 100vh) rotate(0deg); /* 左下から開始 */
  }
  100% {
    transform: translate(100vw, -100px) rotate(720deg); /* 右上へ移動 */
  }
}
/***レシピ****/
.page_title_re img{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	width: 300px;
}
.page_title-ree {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden !important;
  margin: 1.5rem 0 0;
}
.sapporo{
	padding: 2rem;
	text-align: center;
}
.sapporo img{
	width: 27%;
}
.sapporo img:hover{
opacity: 0.9;
}
.sapporo_p{
	font-size: 1.2rem;
	font-weight: bold;
	color: #fff;
}