@charset "utf-8";
/* ===========================================================
   styles.css
   全ページ共通の小規模CSSを1本に統合したファイル。
   統合元（元ファイルは削除済み）:
     _cssskin/*.css, _csslinkbtn/{azuki,coffee,coffee2,maccha,maccha3,oimo}.css,
     _webfonts.css, _userdata/chimoto.css, _add/wdrink.css
   加えて、各ページ別CSS（about.css, coffee.css, index.css, menu.css,
   policy.css, softcream.css, thanks.css, warabidrink.css, warabimochi.css）
   に全ページ共通で重複していた「page setting」ブロックと共通ロゴ画像幅指定も統合。
   ページ固有CSS（#bkXXXXの背景画像/配色など）はこれまで通り個別に読み込む。
=========================================================== */

/* ---- 各ページ別CSS冒頭に重複していた共通「page setting」ブロック
   （about.css, coffee.css, index.css, menu.css, policy.css, softcream.css,
   thanks.css, warabidrink.cssから統合。実質的に見た目へ影響しない
   空セレクタ／リセットのみのため統合） ---- */
/* page setting
--------------------------------------------------------- */
#a-header,#a-ghost_header,#a-billboard,#a-site_contents,#a-footer { max-width:100%; }
#a-site_contents { max-width:100%; }
@media (max-width: 641px) {

}


#page .bg-document {
}
#page {
}

#a-header {
}
#a-ghost_header {
}
#a-billboard {
}
#a-main {
}
#a-side-a {
}
#a-side-b {
}
#a-footer {
}
#a-site_contents {
}

@media (max-width: 641px) {
#page .bg-document {
  }
#page {
  }
	#a-header {padding:0px 0px 0px 0px;	}
	#a-ghost_header {padding:0px 0px 0px 0px;	}
	#a-billboard {padding:0px 0px 0px 0px;	}
	#a-main {padding:0px 0px 0px 0px;	}
	#a-side-a {padding:0px 0px 0px 0px;	}
	#a-side-b {padding:0px 0px 0px 0px;	}
	#a-footer {padding:0px 0px 0px 0px;	}
	}

/* ---- 各ページ別CSSに重複していた共通ロゴ画像幅指定
   （about.css, coffee.css, index.css, menu.css, softcream.css,
   thanks.css, warabidrink.css, warabimochi.cssから統合） ---- */
#imgsrc16833_2{width:180px;}
#imgsrc16831_1{width:180px;}

/* ---- _cssskin/_block_header_navi.css ---- */
.cssskin-_block_header_navi .column.-column1 {
  width: 17%;
}

.cssskin-_block_header_navi .column.-column2 {
  width: 68%;
  padding-top: 30px;
}

.cssskin-_block_header_navi .column.-column3 {
  width: 15%;
  padding-top: 43px;
}

@media (max-width: 641px) {
.cssskin-_block_header_navi .column.-column1 {
  width: 25% !important;
  float: left;
}

.cssskin-_block_header_navi .column.-column2 {
  padding-top: 0px;
  width: 25% !important;
  float: right;
}

.cssskin-_block_header_navi .column.-column3 {
  width: 50% !important;
  float: left;
  padding-top: 15px;
}

}

/* ---- _cssskin/side_h1.css ---- */
.cssskin-side_h1 .c-page_title {
  font-size: 14px;
  color: #6b1b00;
  text-shadow: #fff 0 1px 0;
}

/* ---- _cssskin/textaline_center.css ---- */
.cssskin-textaline_center .c-body {
  text-align: center;
}

@media (max-width: 641px) {
.cssskin-textaline_center .c-body {
  text-align: left;
}

}

/* ---- _cssskin/textaline_center2.css ---- */
.cssskin-textaline_center2 .c-body {
  text-align: center;
}

@media (max-width: 641px) {
.cssskin-textaline_center2 .c-body {
  text-align: center;
}

}

/* ---- _cssskin/textaline_left.css ---- */
.cssskin-textaline_left .c-body {
  text-align: left;
}

.cssskin-textaline_left .c-small_headline {
  text-align: left;
}

/* ---- _cssskin/_area_billboard.css, _area_footer.css, _area_ghost_header.css,
   _area_header.css, _area_main.css, _block_billboard.css, _block_footer.css,
   _block_ghost_header.css, _block_header.css, _block_main.css ----
   (元は @charset 宣言のみで実質空。統合により役目を終えたためルールなし) */

/* ---- _csslinkbtn/azuki.css ---- */
a.azuki {
  display: inline-block;
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 0;
  min-width: 4em;
  max-width: 100%;
  font-size: 100%;
  line-height: 1.8;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  padding: 0.5em 3em 0.5em 3em;
  transition: all 0.2s;
}
a.azuki:visited {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  text-decoration: none;
}
a.azuki:active {
  background: #ffffff;
  color: #4a0e31;
  border: 1px solid #ffffff;
  text-decoration: none;
}
a.azuki:hover {
  background: #ffffff;
  color: #4a0e31;
  border: 1px solid #ffffff;
  text-decoration: none;
  opacity: 1;
}

/* ---- _csslinkbtn/coffee.css ---- */
a.coffee {
  display: inline-block;
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 0;
  min-width: 4em;
  max-width: 100%;
  font-size: 100%;
  line-height: 1.8;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  padding: 0.5em 3em 0.5em 3em;
  transition: all 0.2s;
}
a.coffee:visited {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  text-decoration: none;
}
a.coffee:active {
  background: #ffffff;
  color: #764103;
  border: 1px solid #ffffff;
  text-decoration: none;
}
a.coffee:hover {
  background: #ffffff;
  color: #764103;
  border: 1px solid #ffffff;
  text-decoration: none;
  opacity: 1;
}

/* ---- _csslinkbtn/coffee2.css ---- */
a.coffee2 {
  display: inline-block;
  background: #764103;
  color: #ffffff;
  border: 1px solid #764103;
  border-radius: 0;
  min-width: 4em;
  max-width: 100%;
  font-size: 100%;
  line-height: 1.8;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  padding: 0.5em 3em 0.5em 3em;
  transition: all 0.2s;
}
a.coffee2:visited {
  background: #764103;
  color: #ffffff;
  border: 1px solid #764103;
  text-decoration: none;
}
a.coffee2:active {
  background: #a55900;
  color: #ffffff;
  border: 1px solid #764103;
  text-decoration: none;
}
a.coffee2:hover {
  background: #a55900;
  color: #ffffff;
  border: 1px solid #764103;
  text-decoration: none;
  opacity: 1;
}

/* ---- _csslinkbtn/maccha.css ---- */
a.maccha {
  display: inline-block;
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 0;
  min-width: 4em;
  max-width: 100%;
  font-size: 100%;
  line-height: 1.8;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  padding: 0.5em 3em 0.5em 3em;
  transition: all 0.2s;
}
a.maccha:visited {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  text-decoration: none;
}
a.maccha:active {
  background: #ffffff;
  color: #4a7119;
  border: 1px solid #ffffff;
  text-decoration: none;
}
a.maccha:hover {
  background: #ffffff;
  color: #4a7119;
  border: 1px solid #ffffff;
  text-decoration: none;
  opacity: 1;
}

/* ---- _csslinkbtn/maccha3.css ---- */
a.maccha3 {
  display: inline-block;
  background: #f3f5f0;
  color: #4a7119;
  border: 1px solid #f3f5f0;
  border-radius: 0;
  min-width: 4em;
  max-width: 100%;
  font-size: 100%;
  line-height: 1.8;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  padding: 0.5em 3em 0.5em 3em;
  transition: all 0.2s;
}
a.maccha3:visited {
  background: #f3f5f0;
  color: #4a7119;
  border: 1px solid #f3f5f0;
  text-decoration: none;
}
a.maccha3:active {
  background: #4a7119;
  color: #ffffff;
  border: 1px solid #4a7119;
  text-decoration: none;
}
a.maccha3:hover {
  background: #4a7119;
  color: #ffffff;
  border: 1px solid #4a7119;
  text-decoration: none;
  opacity: 1;
}

/* ---- _csslinkbtn/oimo.css ---- */
a.oimo {
  display: inline-block;
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 0;
  min-width: 4em;
  max-width: 100%;
  font-size: 100%;
  line-height: 1.8;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  padding: 0.5em 3em 0.5em 3em;
  transition: all 0.2s;
}
a.oimo:visited {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  text-decoration: none;
}
a.oimo:active {
  background: #ffffff;
  color: #c9b026;
  border: 1px solid #ffffff;
  text-decoration: none;
}
a.oimo:hover {
  background: #ffffff;
  color: #c9b026;
  border: 1px solid #ffffff;
  text-decoration: none;
  opacity: 1;
}

/* ---- _add/wdrink.css ---- */
a.wdrink {
  display: inline-block;
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 0;
  min-width: 4em;
  max-width: 100%;
  font-size: 100%;
  line-height: 1.8;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  padding: 0.5em 3em 0.5em 3em;
  transition: all 0.2s;
}
a.wdrink:visited {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  text-decoration: none;
}
a.wdrink:active {
  background: #ffffff;
  color: #d66a35;
  border: 1px solid #ffffff;
  text-decoration: none;
}
a.wdrink:hover {
  background: #ffffff;
  color: #d66a35;
  border: 1px solid #ffffff;
  text-decoration: none;
  opacity: 1;
}

/* ---- _webfonts.css ---- */
.c-body,li,dt,dd,th,td { font-family: 'SourceHanSans-Normal'; }
.c-title { font-family: 'SourceHanSans-Normal'; }
.c-large_headline { font-family: 'SourceHanSans-Normal'; }
.c-small_headline { font-family: 'SourceHanSans-Normal'; }
.c-lead { font-family: 'f910-shin-comic-2_01'; }
.c-blockquote { font-family: 'f910-shin-comic-2_01'; }
.c-enclosure { font-family: 'f910-shin-comic-2_01'; }
.c-note { font-family: 'f910-shin-comic-2_01'; }
.c-credit { font-family: 'SourceHanSans-Normal'; }
.c-page_title { font-family: 'SourceHanSans-Normal'; }
.webfont1 { font-family: 'SourceHanSans-Medium'; }
.webfont2 { font-family: 'SourceHanSansHW-Bold'; }

/* ---- _userdata/chimoto.css（サイト共通カスタムCSS） ---- */

/*フルードイメージ*/
@media print, screen and (min-width: 640px){
	nav img {
width:100%;
max-width: 100%;
height: auto;
}
}

/*お知らせ5件目以降非表示*/
#news > div > span > div > table > tbody > tr:nth-child(n+6){
	display: none;
}


/*メールフォームCSS*/
.nRed{
    background-color: #E29CBA;
    margin: 0 5px;
    padding: 3px;
    border-radius: 3px;
    color: #fff;
}

.textbox1{
	position: relative;
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 3px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
    transition: none;
    vertical-align: middle;
    margin-bottom: 5px;
    width: 39%;
    height: 42px;
    padding: 7px 10px;
    font-size: 14px;
    line-height: 1.9;
	font-family:Arial, sans-serif;
}

.fm_kakunin1{
	position: relative;
    display:inline-block;
    border-bottom: 2px solid #dedede;
    transition: none;
    vertical-align: middle;
    margin-bottom: 5px;
    width: 39%;
    height: 42px;
    padding: 7px 10px 7px 20px;
    font-size: 16px;
    line-height: 1.9;
	font-family:Arial, sans-serif;
	color: #3c6929;
}

.textbox2,.fm_kakunin2{
	width: 88%;
	margin-left: 50px;
}

.textbox3,.fm_kakunin3{
	width: 88%;
	height: 180px;
	margin-left: 47px;
}

.textbox4,.fm_kakunin4{
	margin-left: 50px;
}

.gLeft,.gRight{
	display:block;
	margin-bottom:10px;
	font-weight: bold;
}

.kanji{
	margin-right: 10px;
}

.kanji2{
	margin: 0 10px 0 15px;
}

.kanji3{
	margin: 0 27px 0 15px;
}

.form_info{
	font-size: 12px;
}

.form_ol{
	list-style-type: decimal;
	margin-left: 25px;
	line-height: 1.8;
}

.form_ol li{
	display: inline-block;
	margin-right: 8px;
}

.group{
	margin: 20px 0;
}

.rBtn{
	width: 50%;
	margin: 10px auto;
	display: block;
	color: #fff;
    background-color: #819D65;
    border-radius: 3px;
    padding: 18px 27px;
    transition: all  0.4s ease;
    font-size: 18px;
}

.rBtn:hover {
	background-color: #456e1c;
    border-color: #304c15;
	color: #fff;
}

/* 「内容記入へ戻る」ボタン。「予約申し込み送信」(.rBtn)より意図的に
   控えめ・小さめにして、誤って押してしまうリスクを下げる。 */
.rBtn2{
	width: 40%;
	margin: 10px auto 30px;
	background-color: rgba(153, 153, 153, 0.15);
	border: 1px solid #999999;
	color: #777777;
	font-size: 14px;
	padding: 10px 18px;
}

.rBtn2:hover {
	background-color: #f0f0f0;
	border-color: #777777;
	color: #555555;
}

.help{
	color: #ff0000;
	display: inline;
	font-weight: bold;
}

.help2{
	display:block;
}

.hidden{
	display: none;
}


@media (max-width: 641px) {
	.textbox1,.fm_kakunin1,.kanji,.kanji2{
		display: block;
		width: 100%;
		margin-left: 0px;
	}

	#wrapper > form > div:nth-child(1) > div > span.kanji{
			margin-left: -15px;
	}

}

/*リンク画像hoverエフェクト*/
/*おすすめメニュー*/#osusume > div > div,
/*ギャラリー*/#gallery > div > div,
/*限定商品メニュー*/#limited_img > div > div,
/*お飲物メニュー*/#drink_img > div > div,
/*甘味メニュー*/#sweets_img > div > div
{
	overflow: hidden;
}

/*ズームアウト＋白枠（白枠パーツ）*/
/*おすすめメニュー*/#osusume > div > div,
/*限定商品メニュー*/#limited_img > div > div.c-photo,
/*お飲物メニュー*/#drink_img > div > div.c-photo,
/*甘味メニュー*/#sweets_img > div > div.c-photo
{
	background: #fff;
	border: #ddd 1px solid;
}

/*ズームアウト＋白枠（ズームアウトパーツ）*/
/*おすすめメニュー*/#osusume > div > div > div > div > a >img,
/*限定商品メニュー*/#limited_img > div > div > div > a > img,
/*お飲物メニュー*/#drink_img > div > div > div > a > img,
/*甘味メニュー*/#sweets_img > div > div > div > a > img
{
  transform: scale(1);
  transition: .3s ease-in-out;
}

/*ズームアウト＋白枠（ズームアウトパーツhoverアクション）*/
/*おすすめメニュー*/#osusume > div > div > div > div > a:hover img,
/*限定商品メニュー*/#limited_img > div > div > div > a:hover img,
/*お飲物メニュー*/#drink_img > div > div > div > a:hover img,
/*甘味メニュー*/#sweets_img > div > div > div > a:hover img
{
  transform: scale(0.95);
}

/*ギャラリーズーム(クリックでの拡大表示は廃止、マウスオーバーの拡大のみ残す) */
#gallery > div > div > div > img{
  transform: scale(1);
  transition: .3s ease-in-out;
}
#gallery > div > div > div:hover img {
  transform: scale(1.2);
}

/*店舗紹介ポイント丸*/
#circle > div > p
{
	text-align: center;
}
/*店舗紹介・コーヒー紹介ポイント丸*/
#circle > div > div
{
	overflow: hidden;
	border-radius: 50%;
}

/*メニュー黒帯高さ調整*/
#menu_gide > nav > div > ul{
	padding: 0px;
}

/*ハンバーガーメニュー背景透過*/
.c-sp_navigation_btn {
    opacity: 0.8;
}

/*topスマホ版メニュー*/
@media (max-width: 641px) {
	.-dress_po012b #js-globalNavigation .c-menu li a
	{
	font-size: 13px;
    line-height: 40px;
    border-bottom: 1px solid #57758f;
}
}

/*topスマホ版レイアウト*/
@media (max-width: 641px) {
	#imgsrc15682_1,.-dress_po012b .b-headlines .c-body,
	.-dress_po012b .b-headlines .c-large_headline,
	#imgsrc15690_1,
	#imgsrc15686_1
	{
	color:#ffffff;
	padding-top:20px;
	padding-right:0px;
	padding-left:0px;

}
}

/*フッタースマホ版設定*/
@media (max-width: 641px) {
	.-dress_po012b .a-footer .c-menu.-menu_a li a
	{
    padding: 5px;
    text-align: center;
}
	.-dress_po012b .a-footer .c-menu.-menu_a li .c-unlink{
		padding-right: 1.5em;
	}
}

/* フッターのページトップボタン（ロゴ画像）をInstagramアイコンに合わせて角丸に */
.-dress_po012b .c-link_top {
	border-radius: 14px;
	overflow: hidden;
}

/* base.cssのモバイル用ルール(.-dress_po012b .c-body{text-align:left})が
   .c-centerより詳細度で勝ってしまい、"c-body c-center"を両方持つ要素の
   中央揃えがモバイルで崩れるための修正 */
.-dress_po012b .c-body.c-center {
	text-align: center;
}

/* トップページ「お知らせ」跡地のInstagram誘導ブロック */
.instagram-follow {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.instagram-follow img {
	margin: 0 0 12px;
	border-radius: 10px;
}
.instagram-follow p {
	margin: 0 0 16px;
}
a.btn-instagram {
	display: inline-block;
	background: #6f4e37;
	color: #ffffff;
	border: none;
	border-radius: 6px;
	min-width: 4em;
	max-width: 100%;
	font-size: 100%;
	line-height: 1.8;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	padding: 0.5em 2em;
	transition: all 0.2s;
}
a.btn-instagram:visited {
	color: #ffffff;
}
a.btn-instagram:hover {
	background: #563d2b;
}

/* ページ最上部のカラーバー（chimoto-coffee.co.jpの上部帯を参考に追加）
   各ページのメイン画像下線(#tenpo_img等)と同じ色に統一 */
.top-color-bar {
	display: block;
	width: 100%;
	height: 20px;
}
.top-color-bar--purple { background-color: #4C1130; } /* about（店舗紹介） */
.top-color-bar--brown  { background-color: #783F04; } /* coffee（自家焙煎コーヒー） */
.top-color-bar--yellow { background-color: #C9B026; } /* softcream（ソフトクリーム） */
.top-color-bar--orange { background-color: #d66a35; } /* warabidrink（わらび餅ドリンク） */
.top-color-bar--green  { background-color: #456E1C; } /* warabimochi, thanks, policy（本わらび餅） */
.top-color-bar--grey   { background-color: #333333; } /* index, menu */
.top-color-bar--teal    { background-color: #2B5F63; } /* takeout（テイクアウトメニュー） */

/* ヘッダー右側（ナビ＋電話番号）
   ナビをタイトル下で中央寄せすると右端が空くため、電話番号を追加して
   バランスを取る。トップページの「詳しくはこちら」ボタンと同じ
   四角い枠+hoverで色が変わるスタイル。レイアウト変更はPC幅のみに
	限定し、モバイルの折りたたみメニューの挙動には影響しない。 */
@media (min-width: 642px) {
	.header-right-area {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		height: auto;
	}
	/* 電話番号はロゴと同じ列（1行目）の右端に、ナビはロゴ画像の下に
	   常に折り返して表示する（DOM上はnavが先だがorderで視覚順を入替） */
	.header-right-area .header-tel {
		order: 1;
		margin-left: auto;
	}
	.header-right-area nav {
		order: 2;
		flex: 0 0 100%;
		width: 100%;
		margin-top: 12px;
	}
}
.header-tel {
	display: inline-block;
	white-space: nowrap;
	color: #434343;
	font-family: Futura, "Century Gothic", Avenir, sans-serif;
	font-weight: bold;
	letter-spacing: 0.03em;
	margin-right: 30px;
	padding: 6px 18px;
	border: 1px solid #434343;
	border-radius: 0;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.header-tel__num {
	font-size: 1.15em;
}
.header-tel__sep {
	font-size: 0.7em;
	margin: 0 1px;
}
.header-tel:hover {
	background-color: #4a7119;
	border-color: #4a7119;
	color: #ffffff;
	text-decoration: none;
}
@media (max-width: 641px) {
	.header-tel {
		display: none;
	}
}

/* ヘッダーナビの文字を少し太く、はっきりと（主張しすぎない程度に） */
#js-globalNavigation .c-menu.-menu_a > li > a {
	font-weight: 600;
	letter-spacing: 0.02em;
}
#js-globalNavigation .c-menu.-menu_a > li > a:hover {
	opacity: 0.4;
	color: #4a7119;
}

/* フッターの黒帯: サイト内ナビを追加し、Instagramは削除。
   ナビ／ページトップ画像／プライバシーポリシー／コピーライトを
   1行ずつ中央揃えで並べる（chimoto-coffee.co.jpのフッター構成を参考）。
   既存の黒帯(.b-plainのbackground:#333333/color:#fffの中)に
   そのまま追加しているので、新たに背景色を用意する必要はない。 */
.footer-nav-full__row {
	margin: 12px 0 0;
}
.footer-nav-full__row a {
	color: #ffffff;
}
.footer-nav-full .c-link_top {
	display: inline-block;
}

/* フッター直前の店舗情報: PCでは非表示(ただし空白ブロックとして
   スペースは残す。about.htmlと重複するためvisibility:hiddenを使用し
   display:noneにはしない)。モバイルでは表示したままにする。 */
@media (min-width: 642px) {
	.footer-store-info {
		visibility: hidden;
	}
}

/* フッターのナビゲーション行: モバイルでは非表示(ヘッダーの
   ハンバーガーメニューと重複するため)。ページトップ画像/
   プライバシーポリシー/コピーライトはモバイルでも表示する。 */
@media (max-width: 641px) {
	.footer-nav-full > div > .c-menu.-menu_a {
		display: none;
	}
}

/* フッターナビのhoverをプライバシーポリシーと同じ薄い色(フェード)に。
   base.css側の .c-menu li a:hover{opacity:1;color:#3c5f18} を
   上書きする */
.footer-nav-full .c-menu.-menu_a li a:hover {
	opacity: 0.4;
	color: #ffffff;
}

/* モバイルのハンバーガーメニューを全画面表示に変更(chimoto-coffee.co.jp
   のnav.globalMenuSpを参考)。base.css側の
   .-dress_po012b #js-globalNavigation{width:50%;margin-left:50%}
   (右半分だけのドロワー)を上書きし、幅100%・全画面の高さ・
   半透明の薄いグレー背景にする。開閉のスライド処理自体はbind.jsが
   ウィンドウ幅を見て計算しているため、幅を変えても壊れない。 */
@media (max-width: 641px) {
	.-dress_po012b #js-globalNavigation {
		width: 100%;
		margin-left: 0;
		min-height: 100vh;
		background-color: rgba(51, 51, 51, 0.95);
	}
	.-dress_po012b #js-globalNavigation .-menu_center {
		width: 100%;
		padding-top: 50px;
	}
	.-dress_po012b #js-globalNavigation .c-menu.-menu_a li {
		display: block;
	}
	.-dress_po012b #js-globalNavigation .c-menu.-menu_a li a,
	.-dress_po012b #js-globalNavigation .m-motion li a {
		display: block;
		color: #ffffff;
		font-size: 16px;
		text-align: center;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}
	.-dress_po012b #js-globalNavigation .c-menu li.c-sp-closer,
	.-dress_po012b #js-globalNavigation .m-motion li.c-sp-closer {
		color: #ffffff;
		text-align: right;
	}
	.-dress_po012b #js-globalNavigation .c-menu li.c-sp-closer a,
	.-dress_po012b #js-globalNavigation .m-motion li.c-sp-closer a {
		display: block;
		text-align: right;
		border-bottom: none;
	}
	.-dress_po012b #js-globalNavigation .c-menu li.c-sp-closer .icon-close,
	.-dress_po012b #js-globalNavigation .m-motion li.c-sp-closer .icon-close {
		display: inline-block;
		font-size: 32px;
		margin: 10px 20px 10px 10px;
	}
}

/* ハンバーガー三本線ボタンが上部カラーバー(高さ20px)に重ならないよう
   位置を下げる。base.css側の#spNavigationTrigger{margin-top:-20px}を
   打ち消す */
@media (max-width: 641px) {
	#spNavigationTrigger {
		margin-top: 18px;
	}
}

/* 各ページのヒーロー画像に重なる見出し(例: about.htmlの「店舗紹介」)は
   白文字だけだと写真によって読みにくいため、base.cssのシャドウを
   少し強化する(縁取りは使わず、白さを保ったまま)。.-bg-stretchは
   写真ヒーロー見出しの共通の親クラスで、ヘッダー内のタグライン
   (.cssskin-side_h1 .c-page_title、別途独自の配色済み)には
   影響しない。 */
.-bg-stretch .c-page_title {
	text-shadow:
		0 2px 4px rgba(0, 0, 0, 0.7),
		0 4px 14px rgba(0, 0, 0, 0.5);
}

/* menu.html テイクアウトの見出し直下に置く1枚画像(縦長)。
   フルカラム幅に伸びると大きすぎるため幅を制限して中央寄せする。 */
.takeout-menu-photo {
	max-width: 640px;
	margin: 0 auto;
}
@media (max-width: 641px) {
	.takeout-menu-photo {
		max-width: 80%;
	}
}

/* coffee.html「焙煎豆価格表」の見出し直下に置く1枚画像。
   .takeout-menu-photoと同じ考え方でフルカラム幅に伸びすぎないよう
   幅を制限して中央寄せする(クリックでjs-zoomImageにより拡大表示)。 */
.coffeebeans-price-photo {
	max-width: 560px;
	margin: 0 auto;
}
@media (max-width: 641px) {
	.coffeebeans-price-photo {
		max-width: 100%;
	}
}

/* menu.html「ドリンクセット」案内。限定商品・甘味・パスタの3セクションで
   内容が重複していたため、この暖色ボックス1つに集約し、各セクション側は
   .drink-set-reminderの一言でここへ誘導する。既存の.top-color-bar--orange
   (#d66a35)と同系色でブランドトーンに合わせ、本文の強調文字は視認性確保の
   ためやや濃いオレンジブラウン(#a8461f)を使う。 */
.drink-set-notice {
	max-width: 640px;
	margin: 0 auto;
	background-color: #fdf1e6;
	border: 1px solid #f0cba3;
	border-left: 6px solid #d66a35;
	padding: 24px 28px;
}
.drink-set-notice__title {
	font-size: 18px;
	font-weight: bold;
	color: #a8461f;
	margin-bottom: 8px;
}
.drink-set-notice__text {
	font-size: 14px;
	color: #434343;
	margin-bottom: 16px;
}
.drink-set-notice__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.drink-set-notice__list li {
	padding: 12px 0;
	border-top: 1px dashed #f0cba3;
}
.drink-set-notice__list li:first-child {
	padding-top: 0;
	border-top: none;
}
.drink-set-notice__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px 12px;
}
.drink-set-notice__name {
	font-weight: bold;
	color: #434343;
}
.drink-set-notice__price {
	font-weight: bold;
	color: #a8461f;
	white-space: nowrap;
}
.drink-set-notice__desc {
	font-size: 13px;
	color: #777777;
	margin: 4px 0 0;
}

.drink-set-reminder {
	max-width: 640px;
	margin: 0 auto 20px;
	background-color: #fdf1e6;
	border-left: 4px solid #d66a35;
	padding: 10px 16px;
	font-size: 14px;
	color: #434343;
}
.drink-set-reminder a {
	color: #a8461f;
	font-weight: bold;
	text-decoration: underline;
}
.drink-set-reminder a:hover {
	color: #d66a35;
}

/* 「本日のケーキセット」セクションの写真。g-columnで案内ボックスと
   横並びにすると縦横に間延びして見えるため、テイクアウトの案内画像
   (.takeout-menu-photo)と同じ幅で写真→ボックスの2段(縦積み)にして
   中央寄せする。案内ボックス側も同じ幅に揃えて縦の見切れをなくす。 */
.cake-set-photo {
	max-width: 640px;
	margin: 0 auto 16px;
}

/* 「本日のケーキセット」セクションの案内ボックス。ドリンクセット案内(上記)と
   同じ暖色系だと「ドリンク追加(+280円/+330円)できます」という文言と
   矛盾して見えるため(ケーキセットは既にドリンク込み)、単独の枠に分けて
   「ドリンク付き」であることを明示する。 */
.cake-set-notice {
	max-width: 640px;
	margin: 0 auto;
	background-color: #fdf1e6;
	border: 1px solid #f0cba3;
	padding: 20px 24px;
	text-align: center;
}
.cake-set-notice__badge {
	display: inline-block;
	background-color: #d66a35;
	color: #ffffff;
	font-size: 12px;
	font-weight: bold;
	padding: 3px 10px;
	margin-bottom: 10px;
}
.cake-set-notice__price {
	font-size: 15px;
	font-weight: bold;
	color: #434343;
	margin-bottom: 10px;
}
.cake-set-notice__desc {
	font-size: 13px;
	color: #777777;
}

/* パスタセクションの注意書き(オーダーストップ等)・テイクアウトの
   税込表記など。ドリンクセット/ケーキセットの暖色の誘導ボックスとは違い、
   注意喚起なので目立たせすぎない落ち着いた配色にする。 */
.menu-notice {
	max-width: 640px;
	margin: 0 auto;
	background-color: #f5f2ec;
	border-left: 3px solid #b8a888;
	padding: 10px 14px;
	font-size: 12px;
	color: #777777;
}
.menu-notice p {
	margin: 0;
}
.menu-notice p + p {
	margin-top: 2px;
}

/* 限定商品セクションの写真キャプションに付く「【土・日・祝日 限定】」の
   接頭辞。セクション自体が限定商品なので情報としては重複するが、写真だけを
   見た人にもひと目でわかるよう残しつつ、主役の商品名より目立たない
   よう落ち着いた赤系の色にする。 */
.limited-tag {
	color: #a3413a;
	font-weight: normal;
}

/* menu.html 各セクションの文字価格表(旧c-list-sign)。1列のみで
   店内/テイクアウトのタブ分けは不要なため、.drink-set-noticeと
   同じ640px幅で中央寄せし、フォントサイズも読みやすい大きさにする。 */
.price-list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 640px;
}
.price-list__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 12px;
	padding: 10px 4px;
	border-bottom: 1px dotted #cccccc;
	font-size: 16px;
}
.price-list__item:last-child {
	border-bottom: none;
}
.price-list__name {
	flex: 1 1 auto;
	color: #434343;
}
.price-list__price {
	flex: 0 0 auto;
	margin-left: auto;
	font-weight: bold;
	color: #434343;
	white-space: nowrap;
}
@media (max-width: 641px) {
	.price-list__item {
		font-size: 14px;
	}
}

/* js-zoomImageクリック時のオーバーレイ拡大表示(bind.js組み込みの
   photoAlbumモジュール)。.c-overlay_imageInnerに幅・高さの指定が
   元々なく、中の画像がネイティブのピクセルサイズのまま表示されるため、
   実寸が大きい画像(コーヒー豆価格表など)だと、JS側で計算された
   ウィンドウに収まるはずの外枠からはみ出し、一部しか見えなくなる。
   画像を必ず外枠の中に収まるよう縮小させる。 */
.c-overlay_imageInner {
	width: 100%;
	height: 100%;
}
.c-overlay_imageInner img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
}

/* index.html「お知らせ」ブロック。assets/scripts/news.jsが
   assets/data/news.jsonを読み込んで#news-listに描画する。
   下に続くInstagramブロックと視覚的に区別するため白背景にする。 */
.news-box {
	max-width: 800px;
	margin: 0 auto;
}
.news-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.news-list__item {
	position: relative;
	padding: 16px 0 16px 22px;
	border-bottom: 1px solid #eeeeee;
	font-size: 17px;
	line-height: 1.7;
}
.news-list__item:last-child {
	border-bottom: none;
}
.news-list__item::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 28px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #4a7119;
}
.news-list__date {
	display: inline-block;
	margin-right: 14px;
	padding: 2px 10px;
	border-radius: 999px;
	background-color: #f5f2ec;
	font-size: 13px;
	font-weight: bold;
	color: #777777;
	vertical-align: middle;
}
.news-list__text {
	color: #434343;
}
.news-list__text a {
	color: #4a7119;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.news-list__text a:hover {
	color: #2f4a10;
}
.news-list__loading,
.news-list__empty {
	text-align: center;
	color: #999999;
	padding: 16px 0;
	font-size: 15px;
}
@media (max-width: 641px) {
	.news-list__item {
		font-size: 15px;
	}
}