@charset "utf-8";
/* CSS Document */

section{
	padding-top:0;
}

/*===================================================
				タブ
===================================================*/
/*===== ボタンデザイン =====*/
.tab-select{
	margin:30px auto;
	padding:0 10px;
	max-width:960px;
}

/* 通常時 */
.category-btn {
	font-family: var(--font-en);
	padding:2px 0;
	border-bottom: none;
	background-color: #fff;
	color:#444;
	border: 1px solid #ccc;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	flex: 1;
    transition: all 0.3s ease;
}

/* 選択中表示 */
.category-tab .selected{
	background-color: var(--accent1);
	color:#fff;
}

/* ホバー */
.category-btn:not(.selected):hover{
	border: 1px solid var(--accent1);
	color: var(--accent1);
	transform: translateY(1px);
}

/*===== タグと注意書きの枠 =====*/
.include-tax, .category-tab{
	max-width: 960px;
    width: 100%;
	margin: 0 auto;
}

/*===== タブ切り替え =====*/
.tab-container .tab-content {
    display: none;
}

.tab-container .tab-content.selected {
    display: block;
}
/*===================================================
				メニュー共通コンポーネント
===================================================*/
/*===== 見出し =====*/
.category{
	text-align: center;
}

h2{
	padding-bottom: 0;
}

.small{
	font-size: .6em;
}

/*===== フォントサイズ(ここでまとめて指定)=====*/
.category-btn{
	font-size:14px;
}

h2{
	font-size:20px;
}

.btn-auto,.menu-list, .dotted-box, .list-column{
	font-size: 12px;
}

.daily-list{
	font-size: 10px;
}

@media (min-width:760px){
	.category-btn{
	font-size:24px;
	}
	
	h2{
		font-size:32px;
	}
	
	.btn-auto, .menu-list, .dotted-box, .list-column{
		font-size:16px;
	}
	
	.daily-list{
	font-size: 14px;
	}
}

@media (min-width:429px) and (max-width:759px){
	.category-btn{
	font-size:16px;
	}
	
	h2{
		font-size:28px;
	}
	.btn-auto, .menu-list, .dotted-box, .list-column{
		font-size:14px;
	}
	
	.daily-list{
	font-size: 12px;
	}
}

/*===== テキストメニュー（Drink・For Dog）=====*/
/* 商品名は太字 */
dt{
	font-weight: bold;
}

/* 商品名と値段の間の線 */
.price-line{
	flex: 1; /* 残りの幅を線にする */
    height: 1px;
    background-color: #8C8C8C;
}


.txt-menu-list{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap:20px;
}

.list-column{
	max-width:520px;
	width:100%;
	padding: 10px;
	border-radius: 10px;
	background-color: rgba(255, 255, 255, .3);
}


/*===== 画像付きメニュー(Regular・Dessert)=====*/
/* 整列表示 */
.menu-list{
	width: 97%;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	justify-content: space-around;
	gap:10px 20px;
}

@media (min-width:760px){
	.menu-list{
		width: 90%;
		grid-template-columns: repeat(3,1fr);
	}
}

/* 個別メニュー */
.menu-item{
	padding:10px;
    display: inline-grid;
    justify-items: center; 
    text-align: center;
    background-color: rgba(255, 255, 255, .3);
	border-radius: 10px;
}

.menu-item img{
  width: clamp(120px, 25vw, 200px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
}

/* 値段は細字 */
figure span{
	font-weight: normal;
}

/*===== 点線枠 =====*/
.dotted-box{
	width:100%;
	border:1px dotted #444;
	padding:10px;
	background-color: rgba(255, 255, 255, .3);
}

.dotted-box dl {
    width: 85%;
    position: relative;
}


/*===================================================
				Daily
===================================================*/
/*===== メニュー表 =====*/
/* 色指定 */
:root{
	--sat:#EDFBFE;
	--sun:#FFEDED;
	--border:#ccc;
	--close:#f1f1f1;
}

/* 文字関連 */
.daily-list th{
	font-size:1.2em
}

.daily-list th:nth-child(2),
.daily-list th:nth-child(3){
	background-color: var(--main);
	color: #fff;
	font-weight:lighter;		/*thの効果で太すぎるのを修正*/
}

.daily-list td:nth-child(3),
.daily-list td:nth-child(4){
	font-weight: 600;		/*メニュー名は太字*/
}

.daily-list .closed td:nth-child(3){
	font-weight: normal;		/*定休日は細字*/
}

/* デフォルト：縦ならび（スマホ） */
.daily-list td.Alunch span,
.daily-list td.Blunch span{
  display: block;          /* 1行ずつに分ける */
}

/* 760px以上：横ならび（PC） */
@media (min-width:760px){
  .daily-list td.Alunch,
  .daily-list td.Blunch{
    white-space: nowrap;   /* 途中で折り返さない */
    word-break: keep-all;  /* 和文の“変な所”改行を防ぐ */
  }
  .daily-list td.Alunch span,
  .daily-list td.Blunch span{
    display: inline;       /* 横並びに戻す */
    margin-left: .4em;     /* 1つ目の文字列との間隔 */
  }
}

/* 枠の基本設定 */
.daily-list th, .daily-list td {
	border: 1px solid var(--border);
	background-color: #fff;
	padding:2px 10px;
	text-align: center;
}

.daily-list th:nth-child(3),
.daily-list td:nth-child(3),
.daily-list th:nth-child(4),
.daily-list td:nth-child(4){
	width: 46%;        /* 3列目・4列目を同じ比率に */
}	

.daily-list th:nth-child(1),
.daily-list td:nth-child(1),
.daily-list th:nth-child(2),
.daily-list td:nth-child(2){ 
	padding: 0.3em
 }

/* 背景色変更 */
.daily-list th:nth-child(2),
.daily-list th:nth-child(3){
	background-color: var(--main);
}

.daily-list .sat td:nth-child(1),
.daily-list .sat td:nth-child(2){
	background-color: var(--sat);
}

.daily-list .sun td:nth-child(1),
.daily-list .sun td:nth-child(2){
	background-color: var(--sun) ;
}

.daily-list .closed td{
	background-color: var(--close);
}

/*===== 点線枠 =====*/
#daily .dotted-box{
	max-width: 400px;
}
/*===================================================
				Regular
===================================================*/
/*===== 点線枠 =====*/
#regular .dotted-box{
	max-width: 300px;
}


/*===================================================
				Drink
===================================================*/
/*===== ドリンクカテゴリ =====*/
.drink-category{
	font-weight: bold;
	font-size: 1.05em;
	padding-bottom:5px;
	border-bottom:2px dashed var(--accent1);
	margin-bottom:5px;
	text-align: left;
	color:#444;
}

#drink dt{
	font-weight: normal;
}

#drink dl{
	padding-left: 10px;
}

@media (min-width:760px){
	#drink .txt-menu-list{
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	#drink .list-column{
		max-width:45%;
		width:100%;
	}
}


/*===== アイコン =====*/
.list-column:nth-of-type(1) .drink-category::after {
  content: "";
  display: inline-block;
  width: 2em;
  height: 1.5em;
  margin-left: 0.5em;
  background: url("../image/common/icon/cofee.svg") no-repeat center / contain;
	 vertical-align: text-bottom;
}

.list-column:nth-of-type(2) .drink-category::after {
  content: "";
  display: inline-block;
  width: 2em;
  height: 1.9em;
  margin-left: 0.5em;
  background: url("../image/common/icon/pot.svg") no-repeat center / contain;
   vertical-align: text-bottom;
}

.list-column:nth-of-type(3) .drink-category::after {
  content: "";
  display: inline-block;
  width: 2em;
  height: 2em;
  margin-left: 0.5em;
  background: url("../image/common/icon/soft-drink.svg") no-repeat center / contain;
   vertical-align: text-bottom;
}

.list-column:nth-of-type(4) .drink-category::after {
  content: "";
  display: inline-block;
  width: 2em;
  height: 2em;
  margin-left: 0.5em;
  background: url("../image/common/icon/alc.svg") no-repeat center / contain;
   vertical-align: text-bottom;
}

/*===================================================
				Dessert
===================================================*/
#dessert .dotted-box{
	max-width:300px;
}