/*
Theme Name: test
Theme URI:
Author: Caminova/Basara
Author URI: http://www.basara-web.com
Description: 帯屋町筋商店街「おびぶら」公式サイト用テーマ。SHOP LIST（カスタム投稿タイプ）、BLOG（おびログ）、店舗検索・モーダル表示に対応。
Version: 11.1
License: GNU General Public License
Text Domain: obibura
-------------------------------------------------------------- */
/* ★改修のたびに、この Version と functions.php 内 obibura_enqueue_assets() の
   wp_enqueue_style / wp_enqueue_script のバージョン番号を必ず同じ値に更新してください。
   （ブラウザキャッシュ対策のため。両者がズレていると修正が反映されない原因になります） */

/* ==================================================
   0. Reset / Base
================================================== */
:root{
  --color-main:#3f9bd0;
  --color-main-dark:#1c6ea4;
  --color-bg:#eaf6fb;
  --color-water:#0d3d63;
  --color-text:#333;
  --color-accent-pink:#e85f9d;
  --color-accent-green:#58b331;
  --color-accent-blue:#5092ce;
  --color-accent-yellow:#fdd300;
  /* ジャンル色分け（添付の色見本に準拠） */
  --color-genre-food:#f5a623;      /* グルメ：オレンジ */
  --color-genre-fashion:#b39ddb;   /* ファッション：パープル */
  --color-genre-beauty:#ff8a80;    /* ビューティー・コスメ：ピンク */
  --color-genre-zakka:#66bb6a;     /* 雑貨・家具・生活：グリーン */
  --color-genre-conv:#4dd0e1;      /* コンビニ・薬局：ティール */
  --color-genre-glasses:#2f8fe0;   /* メガネ・貴金属・時計：ブルー */
  --color-genre-ent:#ffca28;       /* エンタメ・その他：イエロー */
  --radius:10px;
}
*{ box-sizing:border-box; }
html {scroll-padding-top:150px;}
body {
	position: relative;
	margin: 0;
	padding: 0;
	font-family: "Zen Maru Gothic", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-size:16px;
	font-weight: 500;
	line-height:180%;
	color: #3A4D55;
    overflow-x: hidden;
    background: #E2E09A url("image/bg1.webp") repeat center top;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
    list-style:none;
	vertical-align: baseline;
    -webkit-appearance: none;
}
iframe { border: none;}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    backface-visibility: hidden;
}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd { box-sizing:border-box;}
img { border: none; vertical-align:bottom;}

a {
	overflow-wrap: break-word;
	word-break: break-word;
}
a:link {
	color: #E86689;
	outline: underline;
}
a:visited {color:#06F;}
a:hover {color: #3A4D55;}

i.material-icons { vertical-align: middle;}
.pc {display:block;}
.pctb {display:block;}
.tb {display:none;}
.tbsp {display:none;}
.sp {display:none;}
.inner { margin: auto; width: 90%; max-width:920px;}
@media only screen and (min-width:834px){
    a:hover img { opacity: 0.7; filter: alpha(opacity=70);}
}
@media only screen and (max-width:835px){
	body { min-width:100%; background-size: 200% auto;}
    .pc {display:none !important;}
    .pctb {display:block !important;}
    .tb {display:block !important;}
    .tbsp {display:block !important;}
    .sp {display:none !important;}
}
@media only screen and (max-width:468px){
	body { min-width: 375px; background-size: 200% auto;}
    .pc {display:none !important;}
    .pctb {display:none !important;}
    .tb {display:none !important;}
    .tbsp {display:block !important;}
    .sp {display:block !important;}
}


#wrapper {
	position:relative; z-index: 9;
	overflow: hidden;
}
#container { overflow: hidden;}
article {}
section {}
.inner {
    position:relative;
    margin: 0 auto;
    width: 96%;
    max-width: 1200px;
    box-sizing:border-box;
}
@media only screen and (max-width:1280px){
	.inner {max-width:1088px;}
}


/* BACKGROUND */
body::before,
body::after {
	position: absolute;
	display: block; clear: both; content:"";
	margin: auto;
}
body::before {
	top: 110px; left: 0; right: 0;
	width: 745px; height:390px;
    background:url("image/bg2_1.webp") no-repeat center top;
}
body::after {
	top: 500px; left: 0; right: 0;
	width: 745px; height:calc(100% - 500px);
    background:url("image/bg2_2.webp") repeat-y center top;
}
.bg_kumo { background:url("image/bg_kumo.webp") no-repeat center 40px;}
.bg_kira { background:url("image/bg_kira.webp") no-repeat center 105px;}
.bg_garland { background:url("image/bg_garland2.webp") repeat-y center top;}
@media only screen and (max-width:835px){
	body::before,
	body::after {
		position: absolute;
		display: block; clear: both; content:"";
		margin: auto;
	}
	body::before {
		top: 85px; left: 0; right: 0;
		width: 272px; height:150px;
		background:url("image/bg2_1_sp.webp") no-repeat center top;
		background-size: 100% auto;
	}
	body::after {
		top: 230px; left: 0; right: 0;
		width: 272px; height:calc(100% - 500px);
		background:url("image/bg2_2_sp.webp") repeat-y center top;
		background-size: 100% auto;
	}
	.bg_kumo { background-size: 1000px auto;}
	.bg_kira { background-size: 1000px auto;}
	.bg_garland { background:none;}	
}
@media only screen and (max-width:468px){
	.bg_kumo { background-size: 600px auto;}
	.bg_kira { background-size: 600px auto;}
}


/*=============================================
  HEADER
=============================================*/
#site-header {
	position:sticky; top:0; left:0; z-index:1000;
	width:100%;
	height: 0;
}

/* LOGO */
#site-header .logo {
	padding: 18px 35px;
	width:100%; height: auto; max-width: 312px;
	aspect-ratio: 312 / 246;
	background: #E2E09A;
	border-bottom-right-radius: 90px;
}
#site-header .logo img {
	width:100%; height: auto; max-width: 244px;
	aspect-ratio: 489 / 410;
}

/* NAVI */
#site-header .gnav-pill{
	display: flex; flex-wrap: wrap; justify-content: center; align-content: center;
	position: absolute; top: 40px; right: 210px;
	width: 670px; height: 90px;
	background:#fff; 
	border-radius:60px;
}
#site-header .gnav-pill a { 
	padding: 0 25px;
	text-decoration: none;
}
#site-header .gnav-pill a + a {
	background: url("image/line_nav.webp") no-repeat left center;
}
#site-header .gnav-pill a span { display:block; text-align: center;}
#site-header .gnav-pill a .en {
	font-family: "Dokdo", system-ui;
	font-weight: 400;
	font-size: 212.5%;
	color: #005591;
	line-height: 100%;
}
#site-header .gnav-pill a .ja {
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 900;
	font-size: 75%;
	color: #E86689;
	line-height: 100%;
	letter-spacing: 1px;
}
#site-header a.jyunbicyu { position: relative;}
#site-header a.jyunbicyu:hover .en::before {
	position: absolute; top: 0; left: 0; right: 0; bottom: 0;
	margin: auto;
	display: block; clear:both; content:"準備中";
	width: 80px; height: 20px; line-height: 20px;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 600;
	font-size: 12px;
	color: #555;
	text-align: center;
	background: rgba(221,221,221,0.80);
}

/* HAMBURGER MENU */
.menu-btn {
	cursor: pointer;
	position: fixed; top: 40px; right: 50px; z-index: 999;
	display: block;
	width: 123px;
	height: 89px;
	background: #008796;
	border: 3px solid #F1EFCD;
	border-radius: 90px;
}
.menu-btn span {
	display: block;
	position: absolute; left:0; right: 0;
	margin:auto;
	width: 42px; height: 10px;
	background: url("image/menu_btn.webp") no-repeat center center;
	background-size: 100% auto;
	transition: all .3s;
}
.menu-btn span:nth-of-type(1) { top:27px;}
.menu-btn span:nth-of-type(2) { top:40px;}
.menu-btn span:nth-of-type(3) { top:52px;}
.menu-btn.active { background: #F1EFCD;}
.menu-btn.active span { background-image: url("image/menu_btn_on.webp");}
.menu-btn.active span:nth-of-type(1) { top:40px; transform:rotate(-45deg);}
.menu-btn.active span:nth-of-type(2) { opacity: 0;}
.menu-btn.active span:nth-of-type(3) { top:40px; transform:rotate(45deg);}
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 997;
  background-color: rgba(255, 255, 255, 0);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  visibility: hidden;
}
.menu-overlay.active {
  visibility: visible;
}
#menu-cont {
  display: block;
  visibility: hidden;
  position: fixed; top: 0; left: 0; z-index: 998;
  width: 100vw;
  height: 100%;
  overflow-y: scroll !important;
}
#menu-cont.active {
  visibility: visible;
}
#menu-cont .inner {
	position: relative;
	display: flex; justify-content: flex-end;
	margin: 0; padding: 0;
	width: 100%; min-height: 100%;
	max-width: none;
}
#menu-cont .nav {
	padding: 0 0 0 60px;
	width: 100%; max-width: 750px; 
	background:url("image/bg_menu1.webp") no-repeat right top;
	background-attachment: fixed;
}
#menu-cont .bg {
	margin: auto;
	padding: 60px 0 40px;
	width: 100%; max-width: 430px; height: 100%;
	background:url("image/bg_menu2.webp") no-repeat center 40px;
}
#menu-cont .nav .logo2 {
	position: relative;
	margin: 0 auto 30px;
	max-width:172px;
}
#menu-cont .nav .logo2 img {
	width:100%; height: auto;
	aspect-ratio: 172 / 144;
}
#menu-cont .nav .logo2::before {
	display: block; clear: both; content:"";
	position: absolute;  top:-20px; left:-120px;
	width:163px; height:auto; aspect-ratio: 163 / 135;
	background: url("image/illust/illust_garland.webp") no-repeat;
	background-size: 100% auto;
	transform: rotate(-55deg);
}
#menu-cont .nav .mainnav,
#menu-cont .nav .subnav { margin: auto; width: 100%; max-width: 430px;}
#menu-cont .nav .mainnav {
	display: flex; flex-wrap: wrap; gap:10px;
	margin: 0 auto 40px;
}
#menu-cont .nav .mainnav a { 
	display: flex; flex-direction: column; justify-content: center;
	padding: 0 25px;
	width: calc(50% - 5px);
	height: 160px;
	text-decoration: none;
	background: #007480;
	border-radius: 30px;
}
#menu-cont .nav .mainnav a span { display:block; text-align: center;}
#menu-cont .nav .mainnav a .en {
	font-family: "Dokdo", system-ui;
	font-weight: 400;
	font-size: 268.8%;
	color: #F1EFCD;
	line-height: 100%;
}
#menu-cont .nav .mainnav a .ja {
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 900;
	font-size: 87.5%;
	color: #9FDFD3;
	line-height: 100%;
	letter-spacing: 1px;
}
#menu-cont .nav .subnav {
	position: relative;
	display: flex; align-items: flex-end; gap: 0 25px;
	padding: 40px 0 0;
	background: url("image/line_nav2.webp") no-repeat;
	background-size: auto 6px;
}
#menu-cont .nav .subnav::before {
	display: block; clear: both; content:"";
	position: absolute;  top:-110px; right:-40px;
	width:206px; height:auto; aspect-ratio: 1 / 1;
	background: url("image/illust/illust_hairmayabashi.webp") no-repeat;
	background-size: 100% auto;
}
#menu-cont .nav .subnav .cont {
	display: flex; flex-direction: column; gap:15px;
}
#menu-cont .nav .subnav a {
	position: relative;
	padding-left: 25px;
	font-size: 93.8%;
	color: #fff;
	letter-spacing: 10%;
	text-decoration: none;
}
#menu-cont .nav .subnav a::before {
	position: absolute; top: 3px; left: 0;
	display:block; clear: both; content:"";
	width:18px; height:18px;
	background: #FEFA7B url("image/arrow_g.webp") no-repeat center center;
	background-size: 6px auto;
	border-radius: 18px;
}

	/* animation */
	#menu-cont {
	  overflow-x: hidden;                          /* スライド中の横スクロールを防ぐ */
	  transition: visibility 0s linear .35s;       /* 閉じるとき：スライドが終わってから非表示 */
	}
	#menu-cont.active {
	  transition-delay: 0s;                        /* 開くとき：すぐ表示 */
	}
	#menu-cont .nav {
	  transform: translateX(100%);
	  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
	}
	#menu-cont.active .nav {
	  transform: translateX(0);
	}
	/* 背景も、閉じるときはドロワーが出ていくまで残す */
	.menu-overlay {
	  transition: visibility 0s linear .35s;
	}
	.menu-overlay.active {
	  transition-delay: 0s;
	}
@media (min-width:834px){
	#site-header .gnav-pill a:hover { opacity: 0.7;}
	#menu-cont .nav .mainnav a:hover { opacity: 0.7;}
	#menu-cont .nav .subnav a:hover { text-decoration: underline;}
}
@media (max-width:1200px){
	#site-header .gnav-pill{ display:none; }
}
@media (max-width:835px){
	#site-header {
		height: 114px;
	}
	#site-header .logo {
		padding: 30px 15px 0;
		max-width: 130px;
		aspect-ratio: 152 / 150;
		border-bottom-right-radius: 52px;
	}
	#site-header .logo img { max-width: 103px;}
	.menu-btn {
		display: block !important;
		top: 33px; right: 50px;
		width: 80px;
		height: 60px;
	}
	.menu-btn span { width: 26px; height: 3px;}
	.menu-btn span:nth-of-type(1) { top:19px;}
	.menu-btn span:nth-of-type(2) { top:28px;}
	.menu-btn span:nth-of-type(3) { top:37px;}
	.menu-btn.active span:nth-of-type(1) { top:28px;}
	.menu-btn.active span:nth-of-type(3) { top:28px;}
	#menu-cont .inner { position: relative; height: 100%;}
}
@media (max-width:468px){
	.menu-btn { top: 13px; right: 20px;}
	#menu-cont { height:100vh;}
	#menu-cont .inner {height:auto;}
	#menu-cont .nav {
		padding: 0 30px;
		background:#008796;
	}
	#menu-cont .bg {
		background-size: 250px auto;
	}
	#menu-cont .nav .logo2 {
		position: relative;
		margin: 0 auto 30px;
		max-width:172px;
	}
	#menu-cont .nav .logo2 img {
		width:100%; height: auto;
		aspect-ratio: 172 / 144;
	}
	#menu-cont .nav .logo2::before {
		left:-80px;
		width:100px;
	}
	#menu-cont .nav .mainnav a { 
		display: flex; flex-direction: column; justify-content: center;
		padding: 0 25px;
		width: calc(50% - 5px);
		height: 160px;
		text-decoration: none;
		background: #007480;
		border-radius: 30px;
	}
	#menu-cont .nav .mainnav a .en {
		font-size: 200%;
		line-height: 80%;
	}
	#menu-cont .nav .mainnav a .ja {
		font-size:10px;
	}
	#menu-cont .nav .subnav {
		flex-direction: column;
		align-items: flex-start;
		row-gap:15px;
		background-size: auto 4px;
	}
	#menu-cont .nav .subnav::before {
		top:-80px; right:0;
		width:130px;
	}
	#menu-cont .nav .subnav .cont {
		display: flex; flex-direction: column; gap:15px;
	}
}



/*=============================================
  FOOTER
=============================================*/
#site-footer {
	margin-top: 80px;
	position: relative; z-index: 9;
	background:url("image/bg_footer.webp") no-repeat center top;
}
#site-footer .inner {
	position: relative;
	display: flex; flex-wrap: wrap; justify-content:space-between; align-items: flex-end;
	padding: 160px 0 80px;
	max-width: 1190px;
}
#site-footer .inner::before,
#site-footer .inner::after {
	display: block; clear: both; content:"";
}	
#site-footer .inner::before {
	position: absolute; top:-55px; left:-20px;
	width:217px; height:auto; aspect-ratio: 600 / 500;
	background:url("image/illust/illust_garland.webp") no-repeat;
	background-size: 100% auto;
	transform: rotate(-35deg);
}
#site-footer .inner::after {
	position: absolute;  top:-65px; right:-135px;
	width: 627px; height:auto; aspect-ratio: 627 / 348;
	background: url("image/illust/illust_kouen.webp") no-repeat;
	background-size: 100% auto;
}
#site-footer h3 {
	margin-bottom: 35px;
	padding-bottom: 26px;
	font-size: 225%;
	color: #fff;
	line-height: 130%;
	letter-spacing: 3%;
	background: url("image/line_footer.webp") no-repeat left bottom;
	background-size: auto 6.6px;
}
#site-footer address {
	margin-bottom: 30px;
	font-style: normal;
	color: #fff;
	line-height: 180%;
	letter-spacing: 3%;
}
#site-footer address a {color: #fff;}
#site-footer .sns a {
	display: flex; justify-content: center; align-items: center;
	width: 257px; height: 58px;
	color: #008796;
	text-align: center;
	text-decoration: none;
	background: #fff;
	border-radius: 58px;
}
#site-footer .sns span {
	position: relative;
	padding-left: 35px;
	font-family: "Dokdo", system-ui;
	font-size: 168.8%;
	font-weight: 400;
	letter-spacing: 1%;
	line-height: 26px;
}
#site-footer .sns span::before {
	position: absolute; top:0; left: 0;
	display:block; clear: both; content:"";
	width:26px; height:26px;
	background: url("image/sns_insta.webp") no-repeat;
	background-size: 100% auto;
}
#site-footer .foot-links {
	display: flex; align-items: flex-end; gap: 0 25px;
}
#site-footer .foot-links .cont {
	display: flex; flex-direction: column; gap:18px;
}
#site-footer .foot-links a {
	position: relative;
	padding-left: 25px;
	color: #fff;
	letter-spacing: 10%;
	text-decoration: none;
}
#site-footer .foot-links a::before {
	position: absolute; top: 3px; left: 0;
	display:block; clear: both; content:"";
	width:18px; height:18px;
	background: #FEFA7B url("image/arrow_g.webp") no-repeat center center;
	background-size: 6px auto;
	border-radius: 18px;
}
#site-footer .copyright {
	font-size: 75%;
	color: #fff;
	letter-spacing:3%;
}
@media (min-width:834px){
	#site-footer .sns a:hover { opacity: 0.7;}
	#site-footer .foot-links a:hover { text-decoration: underline;}
}
@media (max-width:1280px){
	#site-footer .inner::before {
		top:-70px; left:-30px;
	}
	#site-footer .inner::after {
		top:-100px; right:-50px;
		width: 627px;
	}
	#site-footer .inner {
		justify-content: flex-start; gap: 50px;
	}
	#site-footer .copyright {
		width: 100%;
		text-align: center;
	}
}
@media (max-width:867px){
	#site-footer .inner::after {
		top:-50px; right:-50px;
		width:500px;
	}
}
@media (max-width:835px){
	#site-footer {
		background:url("image/bg_footer_sp.webp") no-repeat center top;
		background-size: 100% auto;
	}
	#site-footer .inner {
		display:flex; flex-direction: column; justify-content: center; align-items: center; gap:0;
		padding: 80px 0 25px;
	}
	#site-footer .inner::before {
		display: none;
	}
	#site-footer .inner::after {
		top:-100px; right:50px;
		width:300px;
	}
	#site-footer h3 {
		margin-bottom: 10px;
		padding-bottom: 26px;
		font-size: 162.55%;
		text-align: center;
		background-position: center bottom;
		background-size: auto 4.8px;
	}
	#site-footer address {
		margin-bottom: 15px;
		font-size: 87.5%;
		text-align: center;
	}
	#site-footer .sns a {
		margin: auto;
		display: flex; justify-content: center; align-items: center;
		width: 257px; height: 58px;
		color: #008796;
		text-align: center;
		text-decoration: none;
		background: #fff;
		border-radius: 58px;
	}
	#site-footer .foot-links {
		display: block;
		margin-top: 30px;
	}
	#site-footer .foot-links a {
		font-size: 93.8%;
	}
	#site-footer .foot-links .cont { gap:8px;}
	#site-footer .foot-links .cont + .cont { margin-top: 8px !important;}
	#site-footer .copyright {
		padding-top: 20px;
		width: 100%;
		text-align: center;
	}
}
@media (max-width:468px){
	#site-footer .inner::after {
		top:-50px; right:10px;
		width:200px;
	}
}



/*=============================================
  PAGETOP
=============================================*/
#page-top{ position:fixed; right:20px; bottom:20px; z-index:500; }
#page-top a{
  display:flex; align-items:center; justify-content:center; width:48px; height:48px;
  border-radius:50%; background:#008796; color:#fff; text-decoration:none;
}



/*=============================================
  SB TITLE
=============================================*/
.sb_title { 
	position: relative;
	margin: 230px auto 60px;
	max-width: 381px;
}
.sb_title::before {
	display: block; clear: both; content:"";
	position: absolute; top:-50px; left:-70px;
	width:180px; height:auto; aspect-ratio: 600 / 500;
	background:url("image/illust/illust_garland.webp") no-repeat;
	background-size: 100% auto;
	transform: rotate(-51deg);
}
.sb_title h2 {
	position: relative;
	margin: auto;
	width: 381px; height: auto; aspect-ratio: 381 / 250;
	text-indent: -9999px;
	background-size: 100% auto !important;
}
.sb_title h2::before,
.sb_title h2::after {
	display: block; clear: both; content:"";
	position: absolute;
	background-size: 100% auto !important;
}
.sb_title h2::before {
	top: 50px; left: -473px;
	width: 497px; height: auto; aspect-ratio: 497 / 236;
	background: url("image/illust/tit_left.webp") no-repeat;
}
.sb_title h2::after {
	top: 10px; right: -495px;
	width: 555px; height: auto; aspect-ratio: 555 / 289;
	background: url("image/illust/tit_right.webp") no-repeat;
}

.sb_title h2.tit_about {
	background: url("image/sb_title/tit_about.webp") no-repeat;
}
.sb_title h2.tit_map {
	background: url("image/sb_title/tit_map.webp") no-repeat;
}
.sb_title h2.tit_shop {
	background: url("image/sb_title/tit_shop.webp") no-repeat;
}
.sb_title h2.tit_faq {
	background: url("image/sb_title/tit_faq.webp") no-repeat;
}
.sb_title h2.tit_access {
	background: url("image/sb_title/tit_access.webp") no-repeat;
}
.sb_title h2.tit_contact {
	background: url("image/sb_title/tit_contact.webp") no-repeat;
}
.sb_title h2.tit_parking {
	background: url("image/sb_title/tit_parking.webp") no-repeat;
}
.sb_title h2.tit_privacy {
	background: url("image/sb_title/tit_privacy.webp") no-repeat;
}
.sb_title h2.tit_recruit {
	background: url("image/sb_title/tit_recruit.webp") no-repeat;
}
.sb_title h2.tit_news {
	background: url("image/sb_title/tit_news.webp") no-repeat;
}
.sb_title h2.tit_event {
	background: url("image/sb_title/tit_event.webp") no-repeat;
}
.sb_title h2.tit_yosakoi {
	background: url("image/sb_title/tit_yosakoi.webp") no-repeat;
}
.sb_title h2.tit_adswanted {
	aspect-ratio: 381 / 310;
	background: url("image/sb_title/tit_adswanted.webp") no-repeat;
}
.sb_title h2.tit_members {
	aspect-ratio: 381 / 310;
	background: url("image/sb_title/tit_members.webp") no-repeat;
}
@media (max-width:835px){
	.sb_title {
		max-width: none;
		margin: 90px auto 15px;
	}
	.sb_title::before {
		display: block; clear: both; content:"";
		position: absolute; top:-102px; left:0; right: 0;
		margin: auto;
		width:100%; height:100%; aspect-ratio: 925 / 180;
		background:url("image/illust/tit_center.webp") no-repeat center center;
		background-size:auto 90px;
		transform: rotate(0deg);
	}
	.sb_title h2 {
		position: relative;
		margin: auto;
		width: 238px; aspect-ratio: 476 / 280;
	}
	.sb_title h2::before {
		top: 37px; left: -85px;
		width: 120px; height: auto; aspect-ratio: 490 / 428;
		background: url("image/illust/illust_family.webp") no-repeat;
	}
	.sb_title h2::after {
		top: 45px; right: -75px;
		width: 106px; height: auto; aspect-ratio: 442 / 442;
		background: url("image/illust/illust_food.webp") no-repeat;
	}
	
	.sb_title h2.tit_about {
		background: url("image/sb_title/tit_about_sp.webp") no-repeat;
	}
	.sb_title h2.tit_map {
		background: url("image/sb_title/tit_map_sp.webp") no-repeat;
	}
	.sb_title h2.tit_shop {
		background: url("image/sb_title/tit_shop_sp.webp") no-repeat;
	}
	.sb_title h2.tit_faq {
		background: url("image/sb_title/tit_faq_sp.webp") no-repeat;
	}
	.sb_title h2.tit_access {
		background: url("image/sb_title/tit_access_sp.webp") no-repeat;
	}
	.sb_title h2.tit_contact {
		background: url("image/sb_title/tit_contact_sp.webp") no-repeat;
	}
	.sb_title h2.tit_parking {
		background: url("image/sb_title/tit_parking_sp.webp") no-repeat;
	}
	.sb_title h2.tit_privacy {
		background: url("image/sb_title/tit_privacy_sp.webp") no-repeat;
	}
	.sb_title h2.tit_recruit {
		background: url("image/sb_title/tit_recruit_sp.webp") no-repeat;
	}
	.sb_title h2.tit_event {
		aspect-ratio: 476 / 315;
		background: url("image/sb_title/tit_event_sp.webp") no-repeat center 10px;
		background-size: 230px auto !important;
	}
	.sb_title h2.tit_news {
		aspect-ratio: 476 / 315;
		background: url("image/sb_title/tit_news_sp.webp") no-repeat center 10px;
		background-size: 230px auto !important;
	}
	.sb_title h2.tit_yosakoi {
		aspect-ratio: 476 / 315;
		background: url("image/sb_title/tit_yosakoi_sp.webp") no-repeat center 10px;
		background-size: 230px auto !important;
	}
	.sb_title:has(h2.tit_event),
	.sb_title:has(h2.tit_news),
	.sb_title:has(h2.tit_yosakoi) { margin-bottom: 10px;}
	.sb_title h2.tit_adswanted {
		background: url("image/sb_title/tit_adswanted_sp.webp") no-repeat;
	}
	.sb_title h2.tit_members {
		background: url("image/sb_title/tit_members_sp.webp") no-repeat;
	}	
}




/*=============================================
  SHOP FILTER
=============================================*/
.custom-select {
	position: relative;
}
.shop-filter {
	margin-bottom: 50px;
	padding: 30px;
	background: #fff;
	border-radius: 30px;
}
.shop-filter .shop-filter-box {
	display: flex; flex-wrap: wrap; justify-content: center; gap:10px 30px;
	margin:  0 auto 30px;
	width: 100%;
	max-width: 990px;
}
.shop-filter .filter-set {
	display: flex; flex-wrap: wrap; gap:10px 0;
	padding-right: 30px;
	width: calc(100% - 270px - 30px);
	background: url("image/line_dot.webp") no-repeat right center;
	background-size: 7px auto;
}
.shop-filter .filter-set .set { display: flex;}
.shop-filter .filter-set .set:nth-child(1){ width: 51%;}
.shop-filter .filter-set .set:nth-child(2){ width: 49%;}
.shop-filter .filter-set .set:nth-child(3){ width: 100%;}
.shop-filter .filter-set .set dl { display: flex;}
.shop-filter .filter-set .set dt {
	padding-right: 10px;
	width: 110px;
	font-size: 93.8%;
	text-align: right;
	line-height: 45px;
}
.shop-filter .filter-set .set dd { 
	position: relative;
	width: calc(100% - 110px);
}
.shop-filter .filter-set .set:nth-child(2) dt { width: 80px;}
.shop-filter .filter-set .set:nth-child(2) dd { width: calc(100% - 80px);}
.shop-filter .filter-set .set input[type=text] {
	cursor: pointer;
	display: block;
	width: 100%;
	height: 45px;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	color:#008796;
	line-height: 45px;
	text-indent: 20px;
	background: #D8ECF2;
	border-radius:45px;
	box-sizing: border-box;
	border: none;
 	-webkit-appearance: none;
	appearance: none
}
.shop-filter .b_search {
	display: block;
	width: 270px; height: 95px; line-height: 95px;
	text-align: center;
	background: #008796;
	border-radius:100px;
	border: none;
}
.shop-filter .b_search span {
	padding-left: 35px;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-size: 150%;
	color: #fff;
	line-height: 24px;
	letter-spacing: 10%;
	background: url("image/b_search.webp") no-repeat center left;
	background-size: 24px auto;
}
.shop-filter .icon_memo {
	margin: auto;
	padding-top: 20px;
	width: 100%; max-width: 1077px;
	font-size: 93.8%;
	line-height: 28px;
	border-top: 1px solid #D8ECF2;
}
.shop-filter-tit {
	display: none;

}
@media (max-width:1030px){
	.shop-filter { padding:15px 20px; border-radius: 20px;}
	.shop-filter .shop-filter-box {
		flex-direction: column;
		margin:  0 auto 30px;
		max-width:inherit;
	}
	.shop-filter .filter-set {
		flex-direction: column; gap:0;
		padding-right:0;
		width:100%;
		background:none;
	}
	.shop-filter .filter-set .set { flex-direction: column; width: 100% !important;}
	.shop-filter .filter-set .set dl { flex-direction: column;}
	.shop-filter .filter-set .set dt {
		padding-right: 0;
		width:100% !important;
		font-size: 87.5%;
		text-align: left;
		line-height: 35px;
	}
	.shop-filter .filter-set .set dd { 
		width: 100% !important;
	}
	.shop-filter .b_search {
		margin-top: 10px;
		width: 100%; height: 60px; line-height: 60px;
	}
	.shop-filter .b_search span {
		padding-left: 25px;
		font-size: 125%;
		line-height: 19px;
		background-size: 19px auto;
	}
	.shop-filter .icon_memo {
		font-size: 81.2%;
		line-height: 24px;
	}
}
@media (max-width:835px){
	.shop-filter-tit {
		display: flex; justify-content: space-between; align-items: center;
	}
	.shop-filter-tit + #shop-filter-form .shop-filter-box {
		margin-top: 20px;
		padding-top: 20px;
		border-top: 1px solid #D8ECF2;
	}
	.shop-filter-tit span {
		padding-left: 20px;
		color: #008796;
		font-size: 14px;
		background: url("image/b_search_e.webp") no-repeat left center;
		background-size: 15px auto;
	}
	.shop-filter-tit .close {
		width: 65px; height: 21px;
		text-indent: -9999px;
		background: url("image/open.webp") no-repeat;
		background-size: auto 100% !important;
	}
	.shop-filter-tit .close.is_close {
		background: url("image/close.webp") no-repeat;
	}
	#shop-filter-form { overflow: inherit;}
	.shop-filter { padding:0px; border-radius:0; background: none;}
	.shop-filter-pull {
		position: relative;
		margin-bottom: 20px;
		padding: 20px;
		background: #fff;
		border-radius: 20px;
	}
	.shop-filter .filter-set { flex-direction: row; gap: 0 10px;}
	.shop-filter .filter-set .set{ width: calc(50% - 5px) !important;}
	.shop-filter .icon_memo {
		margin-bottom: 50px;
		padding: 20px;
		background: #fff;
		border-radius: 20px;
	}
	.shop-filter .shop-filter-box { position: relative; margin-bottom: 0;}
}
@media (max-width:468px){
	.shop-filter {
		margin: auto;
		width: 96%;
	}
	.shop-filter .filter-set .set dt {
		line-height: 20px;
	}
	.shop-filter .b_search {
		position: absolute; right:0; bottom:16px;
		margin-top: 0 !important;
		width: calc(50% - 5px) !important; height: 45px; line-height: 45px;
	}
	.shop-filter .b_search span {
		padding-left: 25px;
		font-size: 13px;
		line-height: 24px;
		background-size: 15px auto;
	}

}


/* ジャンル・地域のセレクトボックス--------------------------------*/
.custom-select { position: relative; z-index: 20;}
.custom-select.is-open { z-index: 100;}
.custom-select > select {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.custom-select-box {
	position: relative; z-index: 10;
	width: 100%;
	height: 48px;
	box-sizing: border-box;
	border-radius: 25px;
	background: #dceff5;
	color: #007b96;
	cursor: pointer;
}
.custom-select-current {
	display: flex; align-items: center;
	padding: 0 48px 0 22px;
	width: 100%;
	height: 48px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	box-sizing: border-box;
}

/* ARROW*/
.custom-select-arrow {
	position: absolute; top: 50%; right: 20px;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid #00869d;
	transform: translateY(-30%);
	pointer-events: none;
	transition: transform .2s ease;
}
.custom-select.is-open .custom-select-arrow {
	transform: translateY(-70%) rotate(180deg);
}

/* OPEN */
.custom-select.is-open .custom-select-box {
	height: 48px;
	border: 4px solid #fff;
	border-bottom: 0;
	border-radius: 28px 28px 0 0;
	background: #dceff5;
	box-shadow: 0 3px 8px rgba(0, 70, 90, .18);
}
.custom-select.is-open .custom-select-current {
	height: 40px;
	padding: 5px 35px 0 20px;
}

/* OPTIONS*/
.custom-select-options {
	display: none;
	position: absolute;
	top: 44px;
	left: -4px;
	width: calc(100% + 8px);
	box-sizing: border-box;
	padding: 8px 15px 15px;
	background: #dceff5;
	border-left: 4px solid #fff;
	border-right: 4px solid #fff;
	border-bottom: 4px solid #fff;
	border-top: 0;
	border-radius: 0 0 28px 28px;
	box-shadow: 0 5px 8px rgba(0, 70, 90, .18);
}
.custom-select.is-open .custom-select-options {
	display: block;
}

/* OPTION */
.custom-select-option {
	position: relative;
	width: 100%;
	height: 40px;
	margin-top: 7px;
	padding: 0 14px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: #fff;
	color: #006b87;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .2s ease;
}
.custom-select-option:first-child {
	margin-top: 0;
}
.custom-select-option:hover {
	background: #f4fbfd;
}

/* 選択中の項目 */
.custom-select-option.is-selected {
	background: #fff;
}

/* GENRE ICON */
.genre-select .custom-select-option {
	justify-content: flex-start;
	padding-left: 44px;
	background-repeat: no-repeat;
	background-position: 14px center;
}
.genre-select .is-all { justify-content:center; padding-left: 0 !important; text-align: center;}
.genre-select .custom-select-option.genre-gourmet {
	background-image: url('image/icon/genre-food2.webp');
	background-size: 14px auto;
}
.genre-select .custom-select-option.genre-fashion {
	background-image: url('image/icon/genre-fashion2.webp');
	background-size: 19px auto;
}
.genre-select .custom-select-option.genre-beauty {
	background-image: url('image/icon/genre-beauty2.webp');
	background-size: 16px auto;
}
.genre-select .custom-select-option.genre-life {
	background-image: url('image/icon/genre-zakka2.webp');
	background-size: 16px auto;
}
.genre-select .custom-select-option.genre-drugstore {
	background-image: url('image/icon/genre-conv2.webp');
	background-size: 19px auto;
}
.genre-select .custom-select-option.genre-glasses {
	background-image: url('image/icon/genre-glasses2.webp');
	background-size: 20px auto;
}
.genre-select .custom-select-option.genre-entame {
	background-image: url('image/icon/genre-ent2.webp');
	background-size: 15px auto;
}

/* AREA*/
.area-select .custom-select-option {
	justify-content: center;
	padding-left: 14px;
	padding-right: 14px;
}

/* OVERFLOW */
.shop-filter,
.shop-filter-box,
.filter-set,
.filter-set .set,
.filter-set .set dd {
	overflow: visible;
}
@media (max-width: 835px) {
	.filter-set {
		display: block;
	}
	.filter-set .set {
		display: flex;
		width: 100%;
		margin-bottom: 15px;
	}
	.filter-set .set dt {
		font-size: 14px;
	}
	.filter-set .set dd {
		flex: 1;
		min-width: 0;
	}
	.custom-select {
		width: 100%;
	}
	.custom-select-current {
		font-size: 14px;
	}
	.custom-select-option {
		font-size: 14px;
	}
}
@media (max-width: 468px) {
	.filter-set .set {
		gap: 8px;
	}
	.filter-set .set dt {
		font-size: 13px;
	}
	.custom-select-box {
		height: 44px;
		border-radius: 23px;
	}
	.custom-select-current {
		height: 44px;
		padding-left: 18px;
		padding-right: 42px;
		font-size: 13px;
	}
	.custom-select-arrow {
		right: 16px;
	}
	.custom-select.is-open .custom-select-box {
		height: 44px;
		border: 4px solid #fff;
		border-bottom: 0;
		border-radius: 25px 25px 0 0;
	}
	.custom-select.is-open .custom-select-current {
		height: 36px;
		padding-left: 10px;
	}
	.custom-select-options {
		top: 40px;
		padding: 7px 10px 12px;
		border-left: 4px solid #fff;
		border-right: 4px solid #fff;
		border-bottom: 4px solid #fff;
		border-top: 0;
		border-radius: 0 0 23px 23px;
	}
	.custom-select-option {
		height: 38px;
		margin-top: 6px;
		border-radius: 13px;
		font-size: 10px;
	}
	.genre-select .custom-select-option {
		padding-left: 30px;
		background-position: 7px center;
		background-size: 10px auto;
	}
}



/*=============================================
  SHOP LIST
=============================================*/
.shop-list {
	position: relative; z-index: 9;
	display: flex; flex-wrap: wrap; gap:50px 20px;
	margin-bottom: 40px;
}
.shop-list .box {
	position: relative;
	padding: 20px;
	width: calc(50% - 10px);
	background: #fff;
	border-radius:30px;
	box-shadow: 12px 14px 0px 0px #82A1A34D;
}
.shop-list .box a {
	display:flex; justify-content: flex-end; gap:20px;
	color: #3A4D55;
	text-decoration: none;
}
.shop-list .box .cont_l {
	position:absolute; top: -25px; left: 0;
	width: 283px;
}
.shop-list .box .cont_r {
	width:calc(100% - 283px);
}
.shop-list .box .pic {
	padding: 25px 25px 0;
	border-radius:30px;
	overflow: hidden;
	background: #fff;
}
.shop-list .box .pic img {
	width: 100%; height: auto;
	aspect-ratio: 500 / 380;
	object-fit: cover;
	border-radius: 10px;
}
.shop-list .box .genre { 
	display: flex; justify-content: space-between;
	padding: 10px 25px;
}
.shop-list .box .genre img { width:28px; height: auto;}
.shop-list .box .genre span {margin-right: 5px;}
.shop-list .box .genre p:nth-child(2) {
	font-size: 81.2%;
	font-weight: 500;
	color: #878A8B;
	line-height: 28px;
}
.shop-list .box .genre p:nth-child(2) img {
	position: relative; top: -2px;
	margin-left: 5px;
	width:22px; height: auto;
}
.shop-list .box .namae {
	display: flex; flex-direction: column; justify-content: center;
	margin-bottom: 20px;
	min-height: 70px;
	font-size: 175%;
	font-weight:600;
	color: #E86689;
	line-height: 112%;
}
.shop-list .box .come {
	min-height: 100px;
	padding: 10px;
	font-size: 91.3%;
	line-height: 150%;
	background: #FAF6E0;
	border-radius:10px;
}
@media (max-width:960px){
	.shop-list {
		gap:20px 10px;
		margin-bottom: 20px;
	}
	.shop-list .box {
		margin-top: 110px;
		padding:10px;
		width: calc(50% - 5px);
		border-radius:20px;
	}
	.shop-list .box a {
		flex-direction: column; gap:10px;
	}
	.shop-list .box .cont_l {
		position:absolute; top:-50%; left: 0; right: 0;
		margin: auto;
		width: 227px;
	}
	.shop-list .box .cont_r {
		padding-top:85px;
		width: 100%;
	}
	.shop-list .box .pic {
		padding: 10px 10px 0;
		border-radius:20px;
	}
	.shop-list .box .genre { 
		padding: 10px 10px;
	}
	.shop-list .box .genre img { width:20px; height: auto;}
	.shop-list .box .genre span {margin-right: 2px;}
	.shop-list .box .genre p {line-height: 20px;}
	.shop-list .box .genre p:nth-child(2) {
		font-size: 81.2%;
		line-height: 20px;
		letter-spacing: -1px;
	}
	.shop-list .box .genre p:nth-child(2) img {
		position: relative; top:1px;
		width:20px; height: auto;
	}
	.shop-list .box .genre p:nth-child(2) span { 
		margin: 0;
	}
	.shop-list .box .namae {
		margin-bottom: 10px;
		min-height:auto;
		font-size: 93.8%;
		line-height: 132%;
	}
	.shop-list .box .come {
		line-height: 155%;
	}
}
@media (max-width:468px){
	.shop-list { gap:10px 10px;}
	.shop-list .box {
		margin-top: 0;
		padding:10px;
		width: calc(50% - 5px);
		border-radius:20px;
	}
	.shop-list .box .cont_l {
		position:static;
		width:100%;
	}
	.shop-list .box .cont_r {
		padding-top:0;
		width: 100%;
	}
	.shop-list .box .pic {
		padding: 0;
		border-radius:10px;
	}
	.shop-list .box .genre { 
		padding: 10px 0;
	}

}




/*=============================================
  CATEGORY FILTER
=============================================*/
.category-filter {
	display: flex; justify-content: center; gap:10px;
	margin-bottom: 30px;
	padding: 30px;
	background: #fff;
	border-radius: 30px;
}
.category-filter p {
	display: flex; justify-content: center; gap:10px;
	padding: 17px 25px;
	background: #FAF6E0;
	border-radius: 13px;
}
.category-filter p a { text-decoration: none;}
.category-filter p .en {
	margin-right: 5px;
	font-family: "Dokdo", system-ui;
	font-size: 125%;
	font-weight: 400;
	color: #E86689;
	letter-spacing: 1%;
	line-height: 100%;
}
.category-filter p .ja {
	font-size: 125%;
	font-weight: 600;
	color: #035C7F;
	letter-spacing: 3%;
	line-height: 100%;
}
.category-filter p.active { background: #0085B4;}
.category-filter p.active .en { color: #FEFA7B;}
.category-filter p.active .ja { color: #FAF6E0;}
@media (max-width:835px){
	.category-filter { padding: 18px; border-radius: 20px;}
	.category-filter p { padding: 5px 15px;}
	.category-filter p .ja { font-size: 93.8%;}
	.category-filter p .en { display: none;}
	.category-filter p .sp_none { display: none;}
}



/*=============================================
  NEWS LIST
=============================================*/
.news-list {
	position: relative; z-index: 9;
	display: flex; flex-direction: column; gap:10px;
}
.news-list .box { 
	position: relative;
	background: #fff;
	border-radius:100px;
	overflow: hidden;
}
.news-list .box a {
	position: relative;
	display: flex; align-items: center; gap:20px;
	padding: 10px;
	color: #3A4D55;
	text-decoration: none;
}
.news-list .box a::before {
	position: absolute; top:0; bottom: 0; right: 25px;
	display:block; clear: both; content:"";
	margin: auto;
	width:40px; height:40px;
	background: #9FDFD3 url("image/arrow_w.webp") no-repeat center center;
	background-size: 17px auto;
	border-radius: 40px;
}
.news-list .box .pic { width: 80px;}
.news-list .box .pic img {
	width: 100%; height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 80px;
}
.news-list .box .txt {
	width: calc(100% - 160px);
}
.news-list .box .txt .data {
	font-family: "Dokdo", system-ui;
	font-size: 131.2%;
	color: #E86689;
	letter-spacing: 1%;
	line-height: 100%;
}
.news-list .box .txt .come {
	font-size: 112.5%;
	font-weight: 700;
	color: #3A4D55;
	line-height: 170%;
	letter-spacing: 3%;
}
.blog_news {
	padding: 50px 70px;
	background: #fff;
	border-radius:30px;
}
.blog_news .box {
	border-radius:0;
}
.blog_news .box + .box {
	border-top: 1px solid #D8ECF2;
}
@media (max-width:835px){
	.news-list { margin:0 auto 20px; max-width: 575px;}
	.news-list .box a { gap:10px; padding: 15px;}
	.news-list .box a::before {
		right:15px;
		width:25px; height:25px;
		background-size: 12px auto;
		border-radius: 25px;
	}
	.news-list .box .pic { width: 56px;}
	.news-list .box .txt {
		width: calc(100% - 120px);
	}
	.news-list .box .txt .data {
		font-size:125%;
	}
	.news-list .box .txt .come {
		font-size: 87.5%;
		line-height: 160%;
		letter-spacing:0;
	}
	.blog_news {
		padding:10px 10px;
		border-radius:20px;
	}
	.blog_news .news-list .box a {
		padding: 10px 0;
	}
	.blog_news .news-list .box a::before {
		right: 0;
	}
	.blog_news .news-list .box .txt {
		width: calc(100% - 90px);
	  }
}
@media (max-width:468px){
}



/*=============================================
  EVENT LIST
=============================================*/
.event-list { 
	position: relative; z-index: 9;
	display: flex; flex-wrap: wrap; gap:20px;
}
.event-list .box { 
	position: relative;
	width: calc(33.3% - 13.33px);
	background: #fff;
	border-radius:30px;
	overflow: hidden;
}
.event-list .box a { 
	color: #3A4D55;
	text-decoration: none;
}
.event-list .box .pic {}
.event-list .box .pic img {
	width: 100%; height: auto;
	aspect-ratio: 500 / 380;
	object-fit: cover;
}
.event-list .box .txt {
	position: relative;
	padding: 25px 35px 30px;
}
.event-list .box .txt .term {
	position: absolute; top: -25px; left: 0;
	padding: 10px;
	background: #fff;
	border-top-right-radius: 10px;
}
.event-list .box .txt .term span {
	display: block;
	padding:  0 25px;
	font-size: 87.5%;
	font-weight: 700;
	line-height: 34px;
	color: #fff;
	text-align: center;
	background: #5CBE70;
	border-radius: 5px;
}
.event-list .box .txt .data {
	font-weight: 900;
	color: #5CBE70 !important;
	line-height:170%;
	letter-spacing: 3%;
}
.event-list .box .txt .tit {
	margin: 0 0 20px;
	font-size: 175%;
	font-weight: 700;
	color: #035C7F;
	line-height:140%;
	letter-spacing: 3%;
}
.event-list .box .txt .come {
	font-weight: 500;
	line-height: 170%;
	letter-spacing: 3%;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}
.event-list .box .txt .tag {
	display: flex; flex-wrap: wrap; gap:5px;
	margin-top: 15px;
	padding-top: 25px;
	background: url("image/line_event.webp") no-repeat top center;
	background-size: auto 7px;
}
.event-list .box .txt .tag span {
	padding: 0 10px;
	font-size: 81.2%;
	color: #035C7F;
	background: #E5F2F6;
	border-radius: 50px;
}
@media (max-width:1280px){
	.event-list { max-width: 1090px;}
}
@media (max-width:835px){
	.event-list { position: relative;}
	.event-list .box .txt { padding: 30px 20px 30px;}
	.event-list .box .txt .term span {font-size: 81.2%; line-height: 28px;}
	.event-list .box .txt .data {font-size: 81.2%;}
	.event-list .box .txt .tit {font-size: 125%; margin: 5px 0;}
	.event-list .box .txt .come {font-size: 93.8%;}
	#obilog { width: 92%;}
	#obilog .event-list .box {width: calc(50% - 10px);}
}
@media (max-width:468px){
	#obilog .event-list .box {width: 100%;}
}


/*=============================================
  YOSAKOI LIST
=============================================*/
.yosakoi-list { 
	position: relative; z-index: 9;
	display: flex; flex-wrap: wrap; gap:20px;
}
.yosakoi-list .box { 
	position: relative;
	width: calc(33.3% - 13.33px);
	background: #fff;
	border-radius:30px;
	overflow: hidden;
}
.yosakoi-list .box a { 
	color: #3A4D55;
	text-decoration: none;
}
.yosakoi-list .box .pic {}
.yosakoi-list .box .pic img {
	width: 100%; height: auto;
	aspect-ratio: 387 / 276;
	object-fit: cover;
}
.yosakoi-list .box .txt {
	position: relative;
	padding: 20px 35px 30px;
}
.yosakoi-list .box .txt .data {
	font-family: "Dokdo", system-ui;
	font-size: 125%;
	font-weight: 900;
	color: #E86689;
	line-height:170%;
	letter-spacing: 3%;
}
.yosakoi-list .box .txt .tit {
	margin: 0 0 20px;
	font-size: 175%;
	font-weight: 700;
	color: #035C7F;
	line-height:140%;
	letter-spacing: 3%;
}
.yosakoi-list .box .txt .come {
	font-weight: 500;
	line-height: 170%;
	letter-spacing: 3%;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}
@media (max-width:1280px){
	.yosakoi-list { max-width: 1090px;}
}
@media (max-width:835px){
	.yosakoi-list .box { 
		position: relative;
		width: calc(50% - 10px);
		background: #fff;
		border-radius:30px;
		overflow: hidden;
	}
}
@media (max-width:468px){
	.yosakoi-list { position: relative;}
	.yosakoi-list .box { position: static; display: block; margin: 0 7px; width:100%;}
	.yosakoi-list .box .txt { padding: 20px 20px 30px;}
	.yosakoi-list .box .txt .data {font-size: 20px;}
    .yosakoi-list .box .txt .tit {font-size: 125%; margin: 5px 0;}
	.yosakoi-list .box .txt .come {font-size: 93.8%;}
	#obilog .yosakoi-list .box {width: calc(50% - 10px);}
}
@media (max-width:468px){
	#obilog .yosakoi-list .box {width: 100%;}
}



/*=============================================
  MODAL (shop detail)
=============================================*/
.shop-modal-overlay{
	display:none;
	position:fixed; align-items:center; justify-content:center;
	inset:0;
	padding:40px 16px;
	z-index:9999;
	background-color: rgba(128,189,178,0.4);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
    overflow-y:auto;
}
.shop-modal-overlay.is-open { display:flex;}
.shop-modal{
	position:relative;
	margin: auto;
	width:100%; max-width:1200px;
}
@media (max-width:1400px){
	.shop-modal { max-width:calc(100% - 216px);}
}
@media (max-width:835px){
	.shop-modal { max-width:calc(100% - 140px);}
}
@media (max-width:468px){
	.shop-modal-overlay { padding:80px 0 0 35px;}
	.shop-modal { margin: 0; width:100%; max-width:100%;}
}


/* close　button */
.shop-modal .modal-close{
	position:absolute; top:40px; right:-100px; z-index:10;
	width: 108px; height: 124px;
	border:none;
	background: #008796 url("image/b_close2.webp") no-repeat center 37px;
	background-size: 35px auto;
	border-top-right-radius: 40px;
	border-bottom-right-radius: 40px;
}
.shop-modal .modal-close .txt {
	position: relative; top: 30px;
	font-family: "Dokdo", system-ui;
	font-size: 20px;
	font-weight: 400;
	color: #fff;
}
.shop-modal-cont1 {
	position:relative; z-index: 99;
	padding: 40px;
	width:100%;
	height: 90Vh;
	background:#fff;
	box-shadow: 12px 14px 0px 0px #82A1A34D;
	border-radius:40px;
}
.shop-modal-cont2 {
	display:flex; flex-wrap:wrap;
	width:100%;
	height: 100%;
	overflow: auto;
}
@media (max-width:835px){
	.shop-modal .modal-close{
		position:absolute; top:40px; right:-70px; z-index:10;
		width: 70px; height:80px;
		background-position: center 27px;
		background-size: 15px auto;
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;;
	}
	.shop-modal .modal-close .txt {
		top: 15px;
		font-size: 16px;
	}
	.shop-modal-cont1 {
		padding:25px;
		height:calc(100vh - 80px - 40px);
		border-radius:30px;
	}
	.shop-modal-cont2 {
		display: block;
	}
}
@media (max-width:468px){
	.shop-modal .modal-close{
		top:-50px; right:0;
		width: 123px; height:50px;
		background-position: 22px 20px;
		border-radius:0;
		border-top-left-radius:20px;
	}
	.shop-modal .modal-close .txt {
		top: 5px; left: 14px;
		font-size: 20px;
	}
	.shop-modal-cont1 {
		padding:25px;
		border-radius:30px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	.shop-modal-cont2 {
		display: block;
	}
}


/* gallery */
.shop-modal .modal-gallery{ width:51%;}
.shop-modal .modal-gallery .main-img-wrap {
	position:relative;
	overflow:hidden;
	border-radius: 10px;
}
.shop-modal .modal-gallery .main-img-track{
	display:flex; height:100%; transition:transform .35s ease;
  /* width は指定しない（＝親.main-img-wrapの幅で自動計算）。
     指定してしまうと子要素の width:100% がこの拡大された幅を基準に計算され、
     画像が正しいサイズでスライドしないバグの原因になる。 */
}
.shop-modal .modal-gallery .main-img-slide{
	flex:0 0 100%;
	width:100%; height:100%;
	overflow:hidden;
}
.shop-modal .modal-gallery .main-img-slide img {
	width:100%; height:auto; aspect-ratio:500/416;
	object-fit:cover;
	display:block;
}
.shop-modal .modal-gallery .thumbs {
	display:flex; flex-wrap: wrap; justify-content: center; gap:5px; 
	position: relative;
	margin: 30px auto;
	width: 92%;
	max-width:340px;
}
.shop-modal .modal-gallery .thumbs img {
  	width:calc(33.33% - 3.33px); height:auto; max-width: 105px; aspect-ratio:105/77;
  	object-fit:cover; border-radius:4px; cursor:pointer;
  	opacity:.6; transition:.2s;
}
.shop-modal .modal-gallery .thumbs img:hover{ opacity:1;}
.shop-modal .modal-gallery .thumbs img.is-active{ opacity:1; }
.shop-modal .modal-gallery .slide-arrow {
	cursor:pointer;
	position:absolute; top:0; bottom: 0; z-index:5;
	margin: auto;
	width:32px; height:auto; aspect-ratio:64/68;
	text-indent: -9999px;
	border:none;
}
.shop-modal .modal-gallery .slide-arrow:hover{ opacity: 0.7;}
.shop-modal .modal-gallery .slide-prev {
	left:-10px;
	background: url("image/arrow_slide_prev.webp") no-repeat;
	background-size: 100% auto;
}
.shop-modal .modal-gallery .slide-next {
	right:-10px;
	background: url("image/arrow_slide_next.webp") no-repeat;
	background-size: 100% auto;
}
@media (max-width:835px){
	.shop-modal .modal-gallery{
		margin-bottom: 20px;
		padding-bottom: 20px;
		width:100%;
		border-bottom: 1px solid #D8ECF2;
	}
}


/* detail */
.shop-modal .modal-info{ width:49%; padding:0 20px 0 40px; }
.shop-modal .modal-badges{ display:flex; flex-wrap:wrap; justify-content: space-between;  gap:5px; }
.shop-modal .genre{ display:flex; flex-wrap:wrap; gap:5px; }
.shop-modal .modal-badges span {
	padding-right: 15px;
	font-size: 81.2%;
	color: #fff;
	border-radius: 5px;
	line-height: 26px;
}
.shop-modal .modal-badges span img { margin: 0 5px; width:26px; height:auto; opacity: 0.7;}
.shop-modal .modal-badges .genre-food { background: #F28F04;}
.shop-modal .modal-badges .genre-fashion { background: #C17CD0;}
.shop-modal .modal-badges .genre-beauty { background: #E58383;}
.shop-modal .modal-badges .genre-zakka { background: #5CBE70;}
.shop-modal .modal-badges .genre-conv { background: #3FB9B1;}
.shop-modal .modal-badges .genre-glasses { background: #1E7BC2;}
.shop-modal .modal-badges .genre-ent { background: #D3B000;}
.shop-modal .modal-badges .area-badge {
	padding-left: 26px;
	font-size: 81.2%;
	font-weight: 500;
	color: #878A8B;
	background: url("image/icon/pin.webp") no-repeat left center;
	background-size: 26px auto;
}
.shop-modal h2.shop-name{
	padding: 25px 0;
	font-weight: 700;
	font-size: 200%;
	color: #E86689;
	line-height: 142%;
	letter-spacing: 3%;
}
.shop-modal .shop-comment{
	padding: 14px 22px;
	font-size: 106.2%;
	line-height: 200%;
	text-align: justify;
	background: #FAF6E0;
	border-radius: 10px;
}
.shop-modal .shop-detail-table{ margin: 20px 0; width:100%;}
.shop-modal .shop-detail-table th {
	padding: 2px 0;
	width: 90px;
	font-weight: 700;
	text-align: left;
	color: #008796;
	line-height: 100%;
	letter-spacing: 3%;
}
.shop-modal .shop-detail-table td {
	padding: 2px 0;
	line-height: 150%;
	letter-spacing: 3%;
}
.shop-modal .shop-detail-table td a {
	text-decoration: none;
	color: #3A4D55;
}
.shop-modal .shop-detail-table td a.link_blank {
	padding-right: 20px;
	background: url("image/link_blank.webp") no-repeat right 7px;
	background-size: 13px auto;
}

.shop-modal .sns-icons { 
	display:flex; flex-wrap:wrap; align-items: center; gap:20px;
	margin:20px 0;
	padding:20px 0;
	border-top:1px solid #D8ECF2;
	border-bottom:1px solid #D8ECF2;
}
.shop-modal .sns-icons p:first-child {
	font-family: "Dokdo", system-ui;
	font-weight: 400;
	font-size: 168.8%;
	color:#E86689;
}
.shop-modal .sns-icons a.sns-icon-facebook img { width: 39px; height: auto;}
.shop-modal .sns-icons a.sns-icon-instagram img { width: 38px; height: auto;}
.shop-modal .sns-icons a.sns-icon-x img { width: 30px; height: auto;}
.shop-modal .sns-icons a.sns-icon-youtube img { width: 48px; height: auto;}
.shop-modal .sns-icons a.sns-icon-line img { width: 40px; height: auto;}
.shop-modal .sns-icons a.sns-icon-threads img { width: 35px; height: auto;}
.shop-modal .sns-icons a.sns-icon-tiktok img { width: 40px; height: auto;}
.shop-modal .cashless-note { display: flex; flex-wrap: wrap; gap:22px;}
.shop-modal .cashless-note img { width: 100%; height: auto;}
.shop-modal .cashless-note .cashless-taxfree { width: 31.5%;}
.shop-modal .cashless-note .cashless-card {
	padding: 10px;
	width: calc(100% - 31.5% - 22px);
	font-size: 15px;
	line-height: 140%;
	letter-spacing: 3%;
	text-align: center;
	color: #51A7BD;
	border: 4px solid #E5F2F6;
}
.shop-modal .modal-actions { display:flex; flex-direction: column; gap:20px; margin-top:20px; }
.shop-modal .btn-gmap {}
.shop-modal .btn-gmap a {
	position: relative;
	display: block;
	width: 100%;
	height: 70px;
	line-height: 65px;
	font-size: 125%;
	font-weight:600;
	color: #fff !important;
	text-align: center;
	text-decoration: none;
	letter-spacing: 5%;
	background: #008796;
	border-radius: 100px;
}
.shop-modal .btn-gmap a::before {
	position: absolute; top: 0; bottom: 0; right: 25px;
	display:block; clear: both; content:"";
	margin: auto;
	width:19px; height:19px;
	background: url("image/arrow_y.webp") no-repeat center center;
	background-size: 19px auto;
}
.shop-modal .btn-gmap a span {
	padding-left: 30px;
	line-height: 19px;
	background: url("image/googlemap.webp") no-repeat left center;
	background-size: 17px auto;
}
.shop-modal .parking-flag-detail img { width: 100%; height: auto;}
@media (max-width:835px){
	.shop-modal .modal-info{ width:100%; padding:0; }
	.shop-modal .modal-badges{ display: block; overflow: hidden; }
	.shop-modal .modal-badges .genre{ gap:5px; margin-bottom:10px; }
	.shop-modal .modal-badges span { padding-right: 10px; font-size: 75%; line-height: 24px; }
	.shop-modal .modal-badges span img { width:24px;}
	.shop-modal .modal-badges .area-badge {float: right; padding-left: 26px; font-size: 81.2%; background-size: 26px auto; }
	.shop-modal h2.shop-name{ padding: 16px 0; font-size: 125%; }
	.shop-modal .shop-comment{ padding: 12px 18px; font-size: 93.8%; line-height: 190%;}
	.shop-modal .shop-detail-table { margin: 10px 0; display: block;}
	.shop-modal .shop-detail-table tr,
	.shop-modal .shop-detail-table th,
	.shop-modal .shop-detail-table td { display: block;}
	.shop-modal .shop-detail-table tr + tr { padding-top:8px;}
	.shop-modal .shop-detail-table th { padding:0; width: 100%; font-size: 87.5%;}
	.shop-modal .shop-detail-table td { font-size: 87.5%; line-height: 150%;}
	.shop-modal .shop-detail-table td a.link_blank { background-position: right 5px;}
	.shop-modal .sns-icons { margin:10px 0; padding:10px 50px; justify-content: center; gap:5px 10px;}
	.shop-modal .sns-icons p:first-child { width: 100%; text-align: center; font-size: 137.5%;}
	.shop-modal .sns-icons a.sns-icon-facebook img { width: 29px;}
	.shop-modal .sns-icons a.sns-icon-instagram img { width: 29px;}
	.shop-modal .sns-icons a.sns-icon-x img { width: 22px;}
	.shop-modal .sns-icons a.sns-icon-youtube img { width: 35px;}
	.shop-modal .sns-icons a.sns-icon-line img { width: 30px;}
	.shop-modal .sns-icons a.sns-icon-threads img { width: 25px;}
	.shop-modal .sns-icons a.sns-icon-tiktok img { width: 28px;}
	.shop-modal .cashless-note { gap:12px;}
	.shop-modal .cashless-note img { width: 100%; height: auto;}
	.shop-modal .cashless-note p { margin: auto;}
	.shop-modal .cashless-note .cashless-taxfree { width:223px;}
	.shop-modal .cashless-note .cashless-card { width:293px;}
	.shop-modal .modal-actions { display:flex; flex-direction: column; gap:20px; margin-top:20px; }
	.shop-modal .btn-gmap a {height: 60px; line-height: 55px; font-size: 106.2%;}
	.shop-modal .btn-gmap a::before {right: 25px; width:16px; height:16px; background-size: 16px auto;}
	.shop-modal .btn-gmap a span {padding-left: 25px; line-height: 19px; background-size: 17px auto;}
}


/*=============================================
  PAGINATION
=============================================*/
.pagination {
	display: flex; align-items: center; justify-content: center; gap: 15px;
	margin-top: 30px;
	padding: 30px;
	background: #fff;
	border-radius: 100px;
}
.pagination .page-numbers {
	display: block;
	width: 40px;
	height: 40px;
	font-size: 137%;
	font-weight: 600;
	line-height:38px;
	color:#E86689;
	text-align: center;
	border-radius: 40px;
	background: rgba(232,102,137,0.10);
	text-decoration: none;
}
.pagination .page-numbers.current {
	color: #fff;
	background: rgba(232,102,137,1.0);
}
.pagination .page-numbers.dots {
}
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
	text-indent: -9999px;
	background: #fff url("image/arrow_p.webp") no-repeat center center;
	background-size: 14px auto !important;
	border: 3px solid #E86689;
}
.pagination .page-numbers.prev {
	transform: scale(-1, 1);
}
@media (min-width:834px){
	.pagination .page-numbers:not(.current):hover {
		color: #fff;
		background: #E86689;
	}
	.pagination .page-numbers.prev:hover,
	.pagination .page-numbers.next:hover {
		background: #E86689 url("image/arrow_w.webp") no-repeat center center;
	}
}
@media (max-width:468px){
	.pagination { padding: 20px 30px;}
	.pagination .page-numbers {
		width: 35px;
		height: 35px;
		font-size: 118.8%;
		line-height:33px;
	}
	.pagination .page-numbers.prev,
	.pagination .page-numbers.next {
		background-size: 12px auto !important;
		border: 2.5px solid #E86689;
	}
}



/*=============================================
  CONTACT
=============================================*/
#contact {
	margin: auto;
	width: 89%;
	max-width: 796px;
}

/* FLOW */
.contact_flow {
	display: flex; justify-content: center; align-items: center;
	margin-bottom: 20px;
	height: 84px;
	background: #008796;
	border-radius: 100px;
}
.contact_flow p {
	position: relative;
	color: #77B5AC;
}
.contact_flow p:nth-child(2) { margin: 0 25px; padding: 0 45px;}
.contact_flow p:nth-child(2)::before,
.contact_flow p:nth-child(2)::after {
	display: block; clear: both; content:"";
	position: absolute; top: 0; bottom: 0;
	margin: auto;
	width: 19px; height:auto; aspect-ratio: 50 / 42;
	background: url("image/arrow_lg.webp") no-repeat;
	background-size: 100% auto;
}
.contact_flow p:nth-child(2)::before { left: 0;}
.contact_flow p:nth-child(2)::after { right: 0;}
.contact_flow p span:nth-child(1) {
	font-family: "Dokdo", system-ui;
	font-weight: 400;
	color: #77B5AC;
}
.contact_flow p span:nth-child(1) small {
	position: relative; top: -3px;
	font-size: 100%;
}
.contact_flow p span:nth-child(1) b { font-size: 187.5%; margin: 0 10px 0 5px;}
.contact_flow p span:nth-child(2) { font-size: 137.5%;}
.contact_flow p.active span:nth-child(1) { color:#FEFA7B;}
.contact_flow p.active span:nth-child(2) { color:#fff;}

/* FORM */
.contact_box {
	margin-bottom: 100px;
	padding: 6.28% 7.16%;
	background: #fff;
	border-radius: 30px;
}
.contact_error {
	display:none;
	margin-bottom: 30px;
	padding: 15px 30px;
	color: #E86689;
	background: #FDF0F3;
	border: 1px solid #E86689;
	border-radius: 10px;
}
.contact_error h3 {
	margin-bottom: 5px;
	font-size: 106.2%;
	font-weight: 600;
	letter-spacing: 10%;
}
.contact_error p {
	position: relative;
	margin-left: 15px;
	padding-left:15px;
	font-size: 87.5%;
	font-weight: 600;
	letter-spacing: 10%;
	line-height: 160%;
}
.contact_error p::before {
	position: absolute; top: 0; left:0;
	content:"＊";
}
.contact_error.is-show {
  display:block;
}
.wpcf7-not-valid-tip,
.wpcf7-response-output {
    display:none !important;
}

.contact_form { margin-bottom: 24px;}
.contact_form dl {
	display: flex; flex-wrap: wrap;
}
.contact_form dt {
	width: 210px;
	letter-spacing: 6%;
	line-height: 45px;
	color: #3A4D55;
}
.contact_form dd {
	width:calc(100% - 210px);
}
.contact_form dt span {
	margin-left:10px;
	font-size: 81.2%;
	color: #E86689;
	letter-spacing: 10%;
}
.contact_form dl + dl { margin-top: 24px;}
.contact_form .col2 p {
	display: block;
	display: flex; gap:20px;
}
.contact_form .col2 label {
	width: calc(50% - 10px);
}
.contact_confirm dt { line-height: 160%;}

.contact_form input[type="text"],
.contact_form input[type="email"],
.contact_form input[type="tel"],
.contact_form textarea {
	width: 100%;
	padding: 0 20px;
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: 93.8%;
	font-weight: 600;
	line-height: 45px;
	min-height: 45px;
	background:#D8ECF2;
    border: none;
	box-sizing:border-box;
	border-radius:22.5px;
}
.contact_form textarea { padding: 20px; width:100%; height:240px; line-height: 160%;}
.contact_form input[type="text"]::placeholder,
.contact_form input[type="email"]::placeholder,
.contact_form input[type="tel"]::placeholder,
.contact_form textarea::placeholder {
	color: #008796;
}
.contact_form .wpcf7-not-valid {
	color: #E86689;
	background:#FDF0F3 !important; 
}
.contact_form input[type="text"].wpcf7-not-valid::placeholder,
.contact_form input[type="email"].wpcf7-not-valid::placeholder,
.contact_form input[type="tel"].wpcf7-not-valid::placeholder,
.contact_form textarea.wpcf7-not-valid::placeholder {
	color: #E86689;
}
.contact_form input[type="text"].is-filled,
.contact_form input[type="email"].is-filled,
.contact_form input[type="tel"].is-filled,
.contact_form textarea.is-filled {
	background: #FAF6E0 !important;
}
.contact_form input[type="text"]:focus,
.contact_form input[type="email"]:focus,
.contact_form input[type="tel"]:focus,
.contact_form textarea:focus {
	color: #3A4D55;
	box-shadow: inset 2px 3px 0px 0 rgba(91,162,149, 0.25);
	background: #FAF6E0 !important;
	outline: none;
}

.privacy_come {
	padding: 27px 0;
	text-align: center;
	border-top: 1px solid #D8ECF2;
}
.privacy_come h4 {
	margin-bottom: 20px;
	font-size: 150%;
	color: #035C7F;
	letter-spacing: 3%;
}
.privacy_come .come {
	margin-bottom: 20px;
	font-size: 93.8%;
	color: #3A4D55;
	line-height: 160%;
	letter-spacing: 6%;
}
.privacy_come .come a {
	color: #E86689;
	text-decoration: none;
}
.privacy_come label {
	cursor: pointer;
	position: relative;
	font-size: 112.5%;
	color: #E86689;
}
.privacy_come input[type="checkbox"] {
	position: relative; top:7px; 
	cursor: pointer;
	margin: 0 10px 0 0;
	width: 30px;
	height: 30px;
	border: none;
	appearance: none;
	-webkit-appearance: none;
	background: url("image/btn_check.webp") center / contain no-repeat;
	opacity: 0.2;
}
.contact_box input[type="checkbox"]:checked {
	background-image: url("image/btn_check.webp");
	opacity: 1;
}
.btn {
	padding-top: 33px;
	text-align: center;
	background: url("image/line.webp") no-repeat top left;
	background-size: auto 6.5px;
}
.b_next,
.b_back {
	cursor: pointer;
	position: relative;
	display: block;
	margin: auto;
	padding: 0;
	width: 100%; max-width: 490px;
	height: 70px;
	line-height: 70px;
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: 125%;
	font-weight: 600;
	color: #fff !important;
	text-align: center;
	text-decoration: none;
	letter-spacing: 5%;
	border-radius: 100px;
	border: none;
	background-size: 19px auto !important;
}
.b_next {
	background: #008796 url("image/arrow_y.webp") no-repeat 93% center;
}
.b_back {
	background: #008796 url("image/arrow_y_back.webp") no-repeat 7% center;
}
.b_next:disabled {
    opacity: 0.3;
}
.b_correct {
	clear: both;
	cursor: pointer;
	margin: 20px auto 0;
	padding-left: 25px;
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: 93.8%;
	font-weight: 600;
	color: #E86689;
	text-align: center;
	letter-spacing: 6%;
	background: url("image/arrow_correct.webp") no-repeat left center;
	background-size: 17px auto !important;
	border: none;
}
.btn .wpcf7-spinner { display: none !important;}

@media (min-width:834px){
	.privacy_come .come a:hover { text-decoration: underline;}
	.b_next:hover,
	.b_back:hover,
	.b_correct:hover { opacity: 0.7; }
}
@media (max-width:468px){
	/* FLOW */
	.contact_flow { height: 75px; border-radius: 20px;}
	.contact_flow p { text-align: center;}
	.contact_flow p:nth-child(2) { margin: 0 15px; padding: 0 30px;}
	.contact_flow p:nth-child(2)::before,
	.contact_flow p:nth-child(2)::after { width: 15px;}
	.contact_flow p span:nth-child(1) {
		display: block;
		line-height: 100%;
	}
	.contact_flow p span:nth-child(1) small {
		font-size: 100%;
	}
	.contact_flow p span:nth-child(1) b { font-size: 162.5%; margin: 0 0 0 3px;}
	.contact_flow p span:nth-child(2) { font-size: 125%; line-height: 100%;}

	/* FORM */
	.contact_box { border-radius: 20px;}
	.contact_error {
		margin-bottom: 30px;
		padding: 10px 20px;
		color: #E86689;
		background: #FDF0F3;
		border: 1px solid #E86689;
		border-radius: 10px;
	}
	.contact_error h3 { font-size: 100%;}
	.contact_error p { margin-left:0;}
	.contact_form { margin-bottom: 20px;}
	.contact_form dl { flex-direction: column;}
	.contact_form dt {
		margin-bottom: 10px;
		width: 100%;
		font-size: 87.5%;
		line-height: 100%;
	}
	.contact_form dd { width:100%;}
	.contact_form dt span { font-size:12px;}
	.contact_form dl + dl { margin-top: 24px;}
	.contact_form .col2 { gap:10px;}
	.contact_form .col2 label { width: calc(50% - 5px);}
	.contact_form input[type="text"],
	.contact_form input[type="email"],
	.contact_form input[type="tel"],
	.contact_form textarea {
		padding: 0 15px;
		font-size: 87.5%;
		line-height: 40px;
		min-height: 40px;
	}
	.privacy_come { padding: 20px 0;}
	.privacy_come h4 {
		margin-bottom: 24px;
		font-size: 112.5%;
	}
	.privacy_come .come { font-size: 87.5%;}
	.privacy_come label { font-size: 100%;}
	.privacy_come input[type="checkbox"] {
		top:4px; 
		width: 20px; height: 20px;
		background-size: 100% auto !important;
	}
	.btn {
		padding-top: 30px;
		background-size: auto 5px;
	}
	.b_next,
	.b_back {
		height: 60px;
		line-height: 60px;
		font-size: 100%;
		background-size: 16px auto !important;
	}
	.b_correct {
		padding-left: 20px;
		font-size: 81.2%;
		background-size: 14px auto !important;
	}
}



.completion {
	margin-bottom: 100px;
	padding: 6.28% 7.16%;
	background: #fff;
	border-radius: 30px;
}
.completion h3 { 
	color: #008796;
	text-align: center;
}
.completion h3 b,
.completion h3 small {
	display: block;
	letter-spacing: 5%;
	line-height: 140%;
}
.completion h3 b { font-size: 175%;}
.completion h3 small { font-size: 125%;}
.completion .pic { margin: 5px auto; max-width: 356px;}			
.completion .pic img { width: 100%; height: auto;}			
.completion .come {
	margin-bottom: 40px;
	font-size: 93.8%;
	text-align: center;
	line-height: 160%;
	letter-spacing: 6%;
}
@media (max-width:468px){
	.completion { padding: 10% 7.16%; border-radius: 20px;}
	.completion h3 b { font-size:125%; margin-bottom: 10px;}
	.completion h3 small { font-size: 93.8%;}
	.completion .pic { max-width: 274px;}			
	.completion .come {
		margin-bottom: 30px;
		font-size: 87.5%;
		text-align: left;
	}
}



/*=============================================
  FREE PAGE
=============================================*/
.free_page {
	margin-bottom: 100px;
	width: 92%;
	padding: 4.17% 8.33%;
	background: #fff;
	border-radius: 30px;
}
.free_page .cat-badge {
	padding: 0 10px;
	font-size: 100%;
	color: #fff;
	line-height: 25px;
	background: #008796;
	border-radius: 5px;
}
.free_page .head_box { display: flex; gap:20px;}
.free_page .head_box .label-badge {
	padding: 0 10px;
	font-size: 100%;
	color: #fff;
	line-height: 25px;
	background: #5CBE70;
	border-radius: 5px;
}
.free_page .head_box .date {
	font-size: 100%;
	color: #5CBE70;
}
.free_page .thumb { margin-bottom: 40px;}
.free_page .thumb img { max-width: 100%; height: auto;}
.free_page .tags {
	display: flex; flex-wrap: wrap; gap:5px;
	margin-top:40px;
	padding-top: 25px;
	background: url("image/line.webp") no-repeat top center;
	background-size: auto 7px;
}
.free_page .tags a {
	padding: 0 10px;
	font-size: 81.2%;
	color: #035C7F;
	background: #E5F2F6;
	border-radius: 50px;
}


/*=============================================
  ITEM
=============================================*/
h1.wp-block-heading {
	margin: 20px auto;
	font-size: 200%;
	line-height: 140%;
	letter-spacing: 3%;
	color: #E86689;
}
h2.wp-block-heading {
	margin: 20px auto;
	padding-left: 30px;
	color: #008796;
	font-size: 175%;
	line-height: 140%;
	letter-spacing: 3%;
	background: url("image/h2_bg.webp") no-repeat left 5px;
	background-size: 27px auto;
}
h3.wp-block-heading {
	margin: 20px auto;
	color: #3A9988;
	font-size: 162.5%;
	line-height: 140%;
	letter-spacing: 3%;
}
h4.wp-block-heading {
	margin: 20px auto;
	padding-left: 30px;
	font-size: 150%;
	line-height: 140%;
	letter-spacing: 3%;
	background: url("image/h4_bg.webp") no-repeat left 7px;
	background-size: 23px auto;
}
h5.wp-block-heading {
	margin: 20px auto;
	font-size: 137.5%;
	line-height: 140%;
	letter-spacing: 3%;
}
p.wp-block-paragraph {
	margin: 20px auto;
	font-size: 106.2%;
	line-height: 200%;
	letter-spacing: 0;
}
p.wp-block-paragraph.come_y {
	margin: 20px auto;
	padding: 14px 22px;
	background: #FAF6E0;
	border-radius: 10px;
}
.wp-block-button {
	width: 100%;
}
.wp-block-button a.wp-block-button__link {
	position: relative;
	display: block;
	padding: 20px 40px 20px 20px;
	width: 100%; max-width: 350px;
	font-size: 125%;
	font-weight: 600;
	color: #fff !important;
	text-align: center;
	text-decoration: none;
	letter-spacing: 5%;
	background: #008796;
	border-radius: 35px;
}
.wp-block-button a.wp-block-button__link::before {
	position: absolute; top: 0; bottom: 0; right: 30px;
	display:block; clear: both; content:"";
	margin: auto;
	width:26px; height:25px;
	background: url("image/arrow_y.webp") no-repeat center center;
	background-size: 100% auto;
}
hr.wp-block-separator {
	margin: 20px auto;
	width: 100%; height: 6.5px;
	background: url("image/line.webp") no-repeat;
	background-size: 100% auto;
	border: none;
}
hr.wp-block-separator.line2 {
	height: 1px;
	background:#D8ECF2;
}
.wp-block-flexible-table-block-table table,
.wp-block-flexible-table-block-table table th,
.wp-block-flexible-table-block-table table td { background: none !important; border: none !important;}
.wp-block-flexible-table-block-table table {border-spacing: 0 5px !important;}
.wp-block-flexible-table-block-table table thead tr th {
	color: #fff;
	text-align: center !important;
	background: #80BDB2 !important;
}
.wp-block-flexible-table-block-table table thead tr th:first-child {
	border-top-left-radius: 4px !important;
	border-bottom-left-radius: 4px !important;
}
.wp-block-flexible-table-block-table table thead tr th:last-child {
	border-top-right-radius: 4px !important;
	border-bottom-right-radius: 4px !important;
}
.wp-block-flexible-table-block-table table thead tr th + th {
	border-left: 2px dashed #61A89B !important;
}
.wp-block-flexible-table-block-table tbody th {
	color: #008796 !important;
	text-align: center !important;
    background: #D8ECF2 !important;
	border-radius: 4px !important;
}
.wp-block-flexible-table-block-table tbody td + td {
    border-left: 2px dashed #D8ECF2 !important;
}
.wp-block-flexible-table-block-table tbody td {
    vertical-align: middle;
	border-bottom: 1px solid #D8ECF2 !important;
}
ul.wp-block-list {
	margin: 20px auto;
	padding: 30px;
	background: #F8FAFA;
	border-radius: 4px;
}
ul.wp-block-list li {
	position: relative;
	margin: 5px 0;
	padding-left: 20px;
	font-size: 106.2%;
	font-weight: 700;
	color:#005591;
}
ul.wp-block-list li:before {
	position: absolute; left: 0; top: 7px;
	display: block; clear: both; content:"";
	width: 15px; height: 15px;
	background: #9FDFD3;
	border-radius: 30px;
}
ol.wp-block-list {
	margin: 20px auto;
	padding-left:30px;
	list-style: decimal;
}
ol.wp-block-list li {
	list-style: inherit;
}
ol.wp-block-list li::marker {
	font-family: "Dokdo", system-ui;
	font-size: 26px;
	font-weight: 400;
	color: #E86689;
}
ol.wp-block-list.ol_bg {
	padding: 20px 30px;
	background: #F8FAFA;
	border-radius: 4px;
}
ol.wp-block-list.ol_bg li {
	margin-left: 30px;
	color: #008796;
}
ol.wp-block-list.ol_bg li::marker {
	color: #84CEC2;
}
.wp-block-image img {border-radius: 20px;}


/* MY PATTERN */
.set_data1 .data,
.set_data2 .data {
	margin: 0;
	padding: 0;
	font-family: "Dokdo", system-ui;
	font-size: 125%;
	font-weight: 400;
	color: #878A8B;
	line-height:100%;
	letter-spacing: 3%;
}
.set_data1 .data { color: #878A8B;}
.set_data2 .data { color: #80BDB2;}
.set_data1 h1 { margin-top: 0;}
.set_data2 h2 {
	margin-top: 0;
}
.shop-table table { margin: 20px 0; width:100%;}
.shop-table table,
.shop-table table th,
.shop-table table td { border: none !important;}
.shop-table td:nth-child(1) {
	padding: 2px 0;
	width: 90px;
	font-weight: 700;
	text-align: left;
	color: #008796;
	line-height: 100%;
	letter-spacing: 3%;
}
.shop-table td:nth-child(2) {
	padding: 2px 0;
	line-height: 150%;
	letter-spacing: 3%;
}
.shop-table td a {
	text-decoration: none;
	color: #3A4D55;
}
.shop-table td a.link_blank {
	padding-right: 20px;
	background: url("image/link_blank.webp") no-repeat right 7px;
	background-size: 13px auto;
}
.set_tag1 {
	display: inline-block;
	padding: 0 15px;
	font-size: 14px;
	line-height: 34px;
	color: #fff;
	background: #5CBE70;
	border-radius: 5px;
}
.set_tag2 {
	display: inline-block;
	padding: 0 15px;
	font-size: 12px;
	line-height: 29px;
	color: #035C7F;
	background: #E5F2F6;
	border-radius: 100px;

}
.icon_memo { display: flex; flex-wrap: wrap; gap:10px;}
.icon_memo img { margin-right: 5px; width: 28px; height: auto;}
.icon_memo .icon_gourmetd { color: #F28F04;}
.icon_memo .icon_fashion { color: #C17CD0;}
.icon_memo .icon_beauty { color: #E58383;}
.icon_memo .icon_life { color: #5CBE70;}
.icon_memo .icon_convenience { color: #3FB9B1;}
.icon_memo .icon_megane { color: #1E7BC2;}
.icon_memo .icon_entertainment { color: #D3B000;}
.icon_memo .icon_parking { width: 100%; font-size: 75%; font-weight: 500;}
.icon_memo .icon_parking img { width: 22px;}
.icon_memo .icon_parking span { color: #62B1C5; position: relative; top: -2px;}

@media (max-width:1030px){
	.icon_memo img { width: 24px;}
}
@media (min-width:834px){
	.wp-block-button a.wp-block-button__link:hover { opacity: 0.7;}
}
@media (max-width:835px){
	.wp-block-button a.wp-block-button__link {
		position: relative;
		display: block;
		padding: 15px 40px 15px 20px;
		width: 100%;
		border-radius: 30px;
	}
	.wp-block-button a.wp-block-button__link::before {
		right: 15px;
		width:14px; height:14px;
	}
	.shop-table table { margin: 10px 0; display: block;}
	.shop-table tr,
	.shop-table td { display: block;}
	.shop-table tr + tr { padding-top:8px;}
	.shop-table td:nth-child(1) { padding:0; width: 100%; font-size: 75%;}
	.shop-table td:nth-child(2) { font-size: 87.5%; line-height: 150%;}
	.shop-table td a.link_blank { background-position: right 5px;}
}
@media (max-width:468px){
	h1.wp-block-heading {
		font-size: 175%;
	}
	h2.wp-block-heading {
		font-size: 150%;
	}
	p.wp-block-paragraph {
		font-size: 100%;
	}
}







/* ==================================================
   9. Map / links section
================================================== */
.map-embed{ border-radius:var(--radius); overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.08); }

/* ==================================================
   9b. インタラクティブマップ（page-map.php）
================================================== */
.map-note{ font-size:13px; color:#678; margin-bottom:18px; }
.map-wrap{
  background:#fff; border-radius:var(--radius); box-shadow:0 4px 14px rgba(0,0,0,.08);
  padding:20px; overflow-x:auto; margin-bottom:20px;
}
.map-svg-frame{ position:relative; max-width:640px; margin:0 auto; }
.map-svg-frame svg{ width:100%; height:auto; display:block; }
.map-pins{ position:absolute; inset:0; }
.map-pin{
  position:absolute; transform:translate(-50%, -100%);
  background:none; border:none; cursor:pointer; padding:0;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:transform .15s;
}
.map-pin:hover{ transform:translate(-50%, -100%) scale(1.08); }
.map-pin-dot{
  width:22px; height:22px; border-radius:50% 50% 50% 0; transform:rotate(45deg);
  background:var(--color-main-dark); box-shadow:0 2px 6px rgba(0,0,0,.3); border:2px solid #fff;
  display:block;
}
.map-pin-label{
  font-size:10px; font-weight:bold; color:#234; background:#fff; padding:2px 6px; border-radius:4px;
  box-shadow:0 1px 4px rgba(0,0,0,.15); white-space:nowrap; margin-top:2px;
}
.map-pin.is-filtered-out{ display:none; }

/* ==================================================
   9c. MAP/LIST タブ・チップ型フィルター・検索（page-map.php）
================================================== */
.map-tabs{ display:flex; gap:10px; margin-bottom:16px; }
.map-tab-btn{
  flex:1; max-width:180px; padding:12px 20px; border:2px solid var(--color-main-dark); border-radius:30px;
  background:#fff; color:var(--color-main-dark); font-weight:800; font-size:15px; cursor:pointer;
  transition:.15s;
}
.map-tab-btn.is-active{ background:var(--color-main-dark); color:#fff; }

.map-search{ margin-bottom:16px; }
.map-search input{
  width:100%; padding:12px 18px; border:1px solid #ccd; border-radius:24px; font-size:14px;
  box-sizing:border-box;
}

.map-chip-label{ font-size:12px; font-weight:800; color:#678; margin:0 0 6px 4px; }
.map-chip-group{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.map-chip{
  padding:8px 18px; border-radius:20px; border:1px solid #cdd7de; background:#fff; color:#456;
  font-size:13px; font-weight:600; cursor:pointer; transition:.15s;
}
.map-chip:hover{ border-color:var(--color-main); }
.map-chip.is-active{ background:var(--color-main-dark); border-color:var(--color-main-dark); color:#fff; }

.map-view{ margin-top:10px; }
.map-list-item.is-filtered-out{ display:none; }
.map-no-result-js{ text-align:center; color:#789; padding:40px 0; }

/* ==================================================
   9d. 通り沿い表示（page-map.php／street-view）
================================================== */
.street-view{ margin-top:10px; position:relative; }
.street-section{ margin-bottom:36px; }
.street-section-title{
  text-align:center; font-size:20px; font-weight:800; color:var(--color-main-dark);
  background:#eaf6fb; border-radius:30px; padding:10px 20px; margin-bottom:18px;
}

/* 方位磁石 */
/* 帯屋町筋／大橋通りのパネル切り替え。
   画面全体を回転させるのではなく、下の「切り替え中の演出用コンパス」が
   ズームアップ→数回転→ズームダウンする間に、裏でパネルを差し替える方式にしている
   （スマホで画面全体が回転すると分かりづらい、というご意見への対応）。
   パネル自体はシンプルにフェードで切り替わる。 */
.street-view-panel{ transition:opacity .3s ease; opacity:1; }
.street-view-panel.is-switching{ opacity:0; }

/* 切り替え中の演出用コンパス（ズームアップ→回転→ズームダウン） */
.street-compass-transition{
  position:fixed; top:50%; left:50%; z-index:2000;
  transform:translate(-50%, -50%) scale(.2); opacity:0; pointer-events:none;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
  text-align:center;
}
.street-compass-transition.is-active{ transform:translate(-50%, -50%) scale(1); opacity:1; }
.street-compass-transition-spin{ filter:drop-shadow(0 8px 20px rgba(0,0,0,.25)); }
.street-compass-transition-spin.is-spinning{
  animation:obiCompassTransSpin 1.3s cubic-bezier(.5,0,.4,1) forwards;
}
@keyframes obiCompassTransSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(var(--obi-spin-deg, 810deg)); }
}
.street-compass-transition-label{
  margin-top:14px; font-size:13px; font-weight:800; color:#1c6ea4;
  background:#fff; display:inline-block; padding:6px 18px; border-radius:16px;
  box-shadow:0 3px 10px rgba(0,0,0,.15);
}

/* 方位磁石：各パネルごとにあらかじめ正しい向き（文字が読める向き）で描画しているため、
   ここでは追加のtransformは適用しない */
.street-compass{ display:flex; justify-content:center; margin-bottom:18px; }

/* 大橋通りへの切り替えボタン（パネル最上部に配置。連結線は本通りの青ではなく、
   大橋通りのテーマカラーである緑に統一。縦線→横線→ラベルが一直線につながって
   見えるよう、横線とラベルを同じ行に並べる） */
.street-branch-toggle{
  display:block; width:100%; background:none; border:none; padding:0; margin:0 0 20px 0;
  cursor:pointer; text-align:left;
}
.street-branch-toggle-row{
  display:flex; align-items:center; justify-content:flex-end; width:50%; margin:0 0 6px 0;
}
.street-branch-toggle-hline{
  display:block; width:60px; height:6px; flex:none; margin-left:6px;
  background:repeating-linear-gradient(to right, #1c8f74 0, #1c8f74 10px, transparent 10px, transparent 18px);
  border-radius:3px;
}
.street-branch-toggle-label{
  display:inline-flex; align-items:center; gap:8px; background:#e3f8f2; color:#187c62;
  font-weight:800; font-size:16px; padding:9px 22px; border-radius:22px; white-space:nowrap;
  box-shadow:0 2px 8px rgba(24,124,98,.15); transition:background .15s, transform .15s;
}
.street-branch-toggle:hover .street-branch-toggle-label{ background:#c9f0e3; transform:translateY(-1px); }
.street-branch-toggle-icon{ display:inline-block; font-size:12px; }
.street-branch-toggle-vline{
  display:block; width:6px; height:20px; margin-left:50%;
  background:repeating-linear-gradient(to bottom, #1c8f74 0, #1c8f74 10px, transparent 10px, transparent 18px);
  border-radius:3px;
}

/* 大橋通りパネル上部の「帯屋町筋へ戻る」ボタン */
.street-back-to-main{
  display:inline-flex; align-items:center; gap:6px; background:#187c62; color:#fff; border:none;
  font-weight:800; font-size:14px; padding:10px 20px; border-radius:22px; cursor:pointer;
  margin-bottom:20px; box-shadow:0 2px 8px rgba(24,124,98,.25); transition:background .15s, transform .15s;
}
.street-back-to-main:hover{ background:#136350; transform:translateY(-1px); }
.street-back-to-main-icon{ font-size:14px; }

.street-columns{
  display:grid; grid-template-columns:1fr 34px 1fr; gap:0; align-items:stretch;
}
.street-center-line{
  position:relative; background:repeating-linear-gradient(
    to bottom, var(--color-main) 0, var(--color-main) 14px, transparent 14px, transparent 26px
  );
  width:6px; margin:0 auto; border-radius:3px;
}
.street-col{ display:flex; flex-direction:column; gap:12px; }
.street-col-north{ align-items:flex-end; }
.street-col-south{ align-items:flex-start; }
.street-col-label{
  font-size:11px; font-weight:700; color:#9aa; letter-spacing:.1em; margin-bottom:2px;
}
.street-col-north .street-col-label{ align-self:flex-end; }
.street-col-south .street-col-label{ align-self:flex-start; }

.street-card{
  display:flex; align-items:center; gap:12px; width:100%; max-width:360px;
  background:#fff; border:none; border-radius:14px; padding:10px; cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.08); text-align:left; transition:transform .15s;
}
.street-card:hover{ transform:translateY(-2px); opacity:1; }
.street-col-north .street-card{ flex-direction:row-reverse; text-align:right; }

.street-card-thumb{ flex:none; width:56px; height:56px; border-radius:10px; overflow:hidden; background:#eee; }
.street-card-thumb img{ width:100%; height:100%; object-fit:cover; }
.street-card-thumb-empty{ display:block; width:100%; height:100%; }

.street-card-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.street-card-genre-group{ display:flex; flex-wrap:wrap; gap:4px; align-self:flex-start; }
.street-col-north .street-card-genre-group{ align-self:flex-end; justify-content:flex-end; }
.street-card-genre{
  display:inline-block; font-size:10px; font-weight:800; color:#fff;
  padding:2px 8px; border-radius:10px;
}
.street-card-name{ font-size:14px; font-weight:800; color:#234; display:flex; align-items:center; gap:6px; }
.street-col-north .street-card-name{ justify-content:flex-end; }
.street-card-p{
  display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  background:var(--color-main-dark); color:#fff; font-size:10px; font-weight:800; border-radius:3px; flex:none;
}
.street-card-comment{ font-size:11px; color:#789; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.street-card.is-filtered-out{ display:none; }
.street-card-blank{
  width:100%; max-width:360px; height:20px; background:none; box-shadow:none;
  border:none; pointer-events:none;
}

@media (max-width:835px){
  /* 通りの区切り線は縦のまま（PCと同じ）にし、常に縦スクロールの操作感になるようにする。
     画面が狭い分、中央の区切り線の余白を少し詰めてカードの表示幅を確保する。 */
  .street-columns{ grid-template-columns:1fr 22px 1fr; }
  .street-card{ max-width:none; padding:8px; gap:8px; }
  .street-card-thumb{ width:44px; height:44px; }
  .street-card-name{ font-size:13px; }
  .street-card-comment{ font-size:10px; }
  .street-branch-toggle-hline{ width:36px; }
}

/* Leaflet実地図（廃止済み・未使用。念のためスタイルのみ残置） */
.leaflet-map-frame{
  width:100%; height:600px; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.08); background:#eef1f4;
}
@media (max-width:835px){
  .leaflet-map-frame{ height:440px; }
}
.link-buttons{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; }
.link-buttons a{
  display:block; text-align:center; padding:20px; border-radius:var(--radius);
  font-weight:bold; text-decoration:none; color:#234;
}
.link-buttons a.pink{ background:#ffd7e2; }
.link-buttons a.green{ background:#d9f2c9; }
.link-buttons a.yellow{ background:#fbe98a; }

/* ==================================================
   11. Blog (おびログ) archive / single
================================================== */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card{ background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.08); text-decoration:none; color:inherit; display:block; }
.blog-card .thumb{ position:relative; aspect-ratio:4/3; background:#ddd; overflow:hidden; }
.blog-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.blog-card .thumb .label-badge{
  position:absolute; top:0; left:0; z-index:2;
  background:var(--color-genre-ent); color:#5a4a00;
  font-size:12px; font-weight:800; padding:6px 14px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.blog-card .body{ padding:14px 16px; }
.blog-card .date{ font-size:11px; color:#89a; }
.blog-card .title{ font-size:15px; font-weight:bold; margin:6px 0; }
.blog-card .tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.blog-card .tags span{ font-size:10px; background:#eef6fb; color:var(--color-main-dark); padding:2px 8px; border-radius:20px; }
.blog-single .cat-badge{
  display:inline-block; font-size:12px; font-weight:bold; background:var(--color-main-dark); color:#fff;
  padding:5px 14px; border-radius:20px; margin-bottom:10px;
}
.blog-single .thumb{ position:relative; border-radius:var(--radius); overflow:hidden; margin-bottom:24px; }
.blog-single .thumb .label-badge{
  position:absolute; top:0; left:0; z-index:2;
  background:var(--color-genre-ent); color:#5a4a00;
  font-size:13px; font-weight:800; padding:7px 16px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.blog-single .label-badge-inline{
  display:inline-block; background:var(--color-genre-ent); color:#5a4a00;
  font-size:13px; font-weight:800; padding:6px 16px; border-radius:4px;
}
.blog-single .tags{ margin-top:20px; display:flex; gap:8px; flex-wrap:wrap; }
.blog-single .tags a{ font-size:12px; background:#eef6fb; color:var(--color-main-dark); padding:4px 12px; border-radius:20px; text-decoration:none; }

/* ==================================================
   12. Pagination / misc pages
================================================== */


.breadcrumb{ font-size:12px; color:#789; padding:16px 0; }
.breadcrumb a{ color:var(--color-main-dark); text-decoration:none; }