﻿@media (min-width: 768px)
{
	.wrapper
	{
		clear: both;
		max-width: 980px ;
		margin: 0 auto ;	/* 左右に[auto]を指定することで、真ん中に寄る */
		padding: 5px ;		/* 上下左右の余白を0にしておく */
		background: #f7f5ff;
	}

	h1
	{
		font-size: 24px;
		margin: 20px;
		padding-left: 20px;
	}

	.item-area ul#area-menu
	{
		list-style: none;
		padding: 0;
		margin: 0 auto;
		display: flex;
		justify-content: center;   /* 中央寄せ */
		gap: 0;                 /* 項目同士の間隔 */
		flex-wrap: wrap;           /* 画面が狭い時は折り返す */
	}

	.item-area ul#area-menu li
	{
		display: flex;
		align-items: center;
	}

	.item-area ul#area-menu li + li::before
	{
		content: "｜";
		margin: 0 2px;
		color: #666;
	}

	.item-area ul#area-menu a
	{
		text-decoration: none;
		font-weight: bold;
		font-size: 14px;
		white-space: nowrap;
		color: #0360ed;
	}

	.item-area ul#area-menu a:hover
	{
  		color: #f35;
	}

	.container
	{
		width: 980px ;
	}

	.venue-title
	{
		font-size: 18px;
		margin: 20px 0;   /* 左右の余白を消す */
		padding: 3px 0;
		display: inline-block;
		border-top: solid 2px #e3cdff;
		border-bottom: solid 2px #e3cdff;
	}

	h2
	{
		max-width: 880px;
		display: block;
	}

	.venue-table
	{
		margin: 30px auto;
		max-width: 880px;
		border-collapse: collapse;
	}
/*
	h2
	{
		max-width: 880px;
		font-size: 18px;
		display: inline-block;
		padding: 5px 0;
		border-top: solid 2px #e3cdff;
		border-bottom: solid 2px #e3cdff;
	}
*/
	.venue-table table
	{
		width: 100%;
		table-layout: fixed;
		border-collapse: collapse;
		font-size: 14px;
		border: 2px solid #9394de;
	}

	.venue-table th,
	.venue-table td
	{
		word-break: break-word;
		box-sizing: border-box;	
		border: 1px solid #999;
		padding: 10px;
		text-align: left;
		vertical-align: top;
	}

	.venue-table th
	{
		background: #e7c9e6;
	}
	
	.venue-table td
	{
		word-break: break-word;
		overflow-wrap: anywhere;
	}

	.contact-sp
	{
		display: none;
	}

	.indent
	{
		padding-left: 1em;
	}
/*
	.venue-table th:nth-child(1),
	.venue-table td:nth-child(1)
	{
		width: 50%;
	}
	.venue-table th:nth-child(2),
	.venue-table td:nth-child(2)
	{
		width: 50%;
	}
*/
	.area
	{
		display: none;
	}

	img.sample
	{
/*		text-align: right;*/
		float: right;
	}
	.place-nm
	{
		text-decoration: none;
		font-weight: bold;
		font-size: 16px;
	}
	a.place
	{
		text-decoration: none;
		font-weight: bold;
		font-size: 16px;
		color: #0360ed;
	}
	a.place:hover
	{
		text-decoration: underline;
		color: #f06;
	}
}




@media screen and ( max-width:769px )
{
	.wrapper
	{
		padding: 15px;
	}

	h1
	{
		font-size: 18px;
		margin: 20px 0;
		padding-left: 0;
		text-align: left;
	}

  /* エリアメニュー */

	.item-area
	{
		display: block;
		ustify-content: center;

	}

	.item-area ul
	{
		padding: 0;
		margin: 15px auto 30px;
		list-style: none;
	}

	.item-area li
	{
		margin-bottom: 10px;
	}

	.item-area li:last-child
	{
		margin-bottom: 0;
	}

	.item-area li a
	{
		display: block;
		width: 100%;
		max-width: 320px;   /* ← これを追加 */
		margin: 0 auto;     /* ← 中央寄せ */
		text-align: center;
		font-size: 15px;
		font-weight: bold;
		line-height: 1.5;
		padding: 14px 10px; /* タップしやすさ */
		background: #e7c9e6;
		border-radius: 10px;
		text-decoration: none;
		color: #333;
		box-shadow: 0 1px 3px rgba(0,0,0,0.12);
	}

	.item-area li a:active
	{
		background: #d6b6d5;
	}

	.item-area li.has-plus
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
	}

	.item-area li.has-plus a
	{
		width: 100%;
		text-align: center;
		padding: 14px 10px;
		background: #e7c9e6;
		border-radius: 10px;
		text-decoration: none;
		color: #333;
	}

	.item-area li.has-plus .plus
	{
		display: block;      /* ← これを追加 */
		text-align: center;  /* 念のため */
		font-size: 16px;
		font-weight: bold;
		color: #777;
		line-height: 1;
	}

	.container
	{
		margin: 20px auto;
		display: block;
		justify-content: center;
	}

	.venue-table table,
	.venue-table thead,
	.venue-table tbody,
	.venue-table tr,
	.venue-table th,
	.venue-table td 
	{
		display: block;
		width: 100%;
		padding-right: 5px;
	}

	.venue-table
	{
		margin: 24px 12px;
		padding: 16px;
		background: #fafafa;
		border: 2px solid #e3cdff;
		border-radius: 10px;
	}

	.venue-table h2
	{
		font-size: 16px;
	}

	.venue-table thead
	{
		display: none; /* 見出しは非表示 */
	}

	/* スマホ：tr単位で区切り線を入れる */
	.venue-table tbody tr
	{
		position: relative;
		padding-bottom: 15px;   /* 次のtrとの間隔 */
		margin-bottom: 15px;
	}

	/* trの下に左右余白付きの罫線 */
	.venue-table tbody tr::after
	{
		content: "";
		position: absolute;
		bottom: 0;
		left: 5px;     /* ← 左の余白 */
		right: 5px;    /* → 右の余白 */
		height: 2px;
		background-color: #ddd;
	}

	/* 最後のtrだけ罫線を消す */
	.venue-table tbody tr:last-child::after
	{
		content: none;
	}


	.venue-table tbody tr.dashed-divider
	{
		position: relative;
		padding-bottom: 24px;
		margin-bottom: 24px;
	}

	.venue-table tbody tr.dashed-divider::after
	{
		content: "";
		position: absolute;
		bottom: 0;
		left: 15px;      /* ← 左の余白 */
		right: 15px;     /* → 右の余白 */
		height: 1px;
		background: repeating-linear-gradient(to right,	#bbb, #bbb 4px,	transparent 4px, transparent 8px);
	}

	  /* 最後が点線対象なら線を消す */
	.venue-table tbody tr.dashed-divider:last-child::after
	{
		content: none;
	}







	.venue-table td
	{
		border: none;
		padding: 12px 15px;
		font-size: 14px;
	}

	.venue-table td::before
	{
		content: attr(data-label);
		display: block;
		font-weight: bold;
		font-size: 16px;
		color: #000;
		margin-bottom: 6px;
	}

	img.sample
	{
		float: none;
		display: inline-block;
		margin-left: 6px;
		vertical-align: right;
	}


  /* rowspan（PC用）を完全に殺す */
	.venue-table td.contact-pc
	{
		display: none !important;
	}

  /* スマホ用連絡先だけ表示 */
	.venue-table tr.contact-sp
	{
		display: block;
	}

	.indent
	{
		padding-left: 1em;
	}


	img.sample
	{
/*		text-align: right;*/
		float: right;
		padding-right: 20px;
	}

	.place-nm
	{
		text-decoration: none;
		font-weight: bold;
		font-size: 15px;
	}
	a.place
	{
		text-decoration: none;
		font-weight: bold;
		font-size: 15px;
		color: #0360ed;
	}
	a.place:hover
	{
		text-decoration: underline;
		color: #f06;
	}

}



