@charset "UTF-8";
/* CSS Document */
/* CSS Document */
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+SC|Noto+Serif+SC&display=swap");
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC|Noto+Serif+TC&display=swap");
@import url("https://fonts.googleapis.com/css?family=Nanum+Myeongjo|Noto+Sans+KR&display=swap");
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, caption, tbody, tfoot, thead, 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: inherit;
  font-size: 100%;
  vertical-align: baseline;
  box-sizing: border-box; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

caption, td {
  text-align: left;
  vertical-align: middle; }

th {
  text-align: center;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }

q:before, q:after {
  content: "";
  content: none; }

blockquote:before, blockquote:after {
  content: "";
  content: none; }

a {
  text-decoration: none; }

a img {
  border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

/* =======================================================

	変数定義
　　
========================================================== */
/* エリア名 */
/* エリア別カラー 
$areaColors:#769763,#2b8ca9,#8175aa,#99794e;
*/
/* =======================================================

	汎用
　　
========================================================== */
/*  メディアクエリ
------------------------------------------------*/
/* スマホ */
/* タブレット */
/* PC（小さい画面） */
/* PC（大きい画面） */
/*  フレックスボックス
------------------------------------------------*/
/*  角丸
------------------------------------------------*/
/*  グラデ
------------------------------------------------*/
/*  非リンク
------------------------------------------------*/
/* =======================================================

	ウポポイ
　　
========================================================== */
/*  エリア別色分け
------------------------------------------------*/
/*  タイトル・店名
------------------------------------------------*/
/*  トップへ戻る
------------------------------------------------*/
.back {
  float: right;
  margin: 2rem 1rem 1.5rem 0;
  background: #E6E6E6;
  position: relative; }
  .back img {
    position: absolute;
    right: -0.5rem;
    top: -0.4rem; }
  .back a {
    display: block;
    padding: 0 .5rem 0.5rem;
    line-height: 1.2rem;
    font-size: .8rem;
    color: #2E3192;
    text-decoration: none !important; }
    .back a:hover {
      opacity: 1; }
    .back a:hover > img {
      left: -1rem; }

/*  画像関連
------------------------------------------------*/
body {
  max-width: 100%;
  margin: 0 auto;
  background-color: #fff;
  color: #000000;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN','Helvetica Neue', 'Segoe UI',  'Yu Gothic', sans-serif;
  font-size: 15px;
  /* 基準のフォントサイズを15pxとする */
  -webkit-text-size-adjust: 100%;
  /* ブラウザ側での文字サイズ自動調整オフ（noneは指定しない。ユーザーが拡大できなくなる） */
  line-height: 1.6rem;
  text-align: center;
  /* IEのみ（テキストずれ防止） */ }
  @media all and (-ms-high-contrast: none) {
    body {
      font-family: "メイリオ", Meiryo, sans-serif !important; } }

main {
  max-width: 945px;
  margin: 0 auto;
  padding: 0 .7rem; }

/*  サイズ確認用（後で削除）s------------------------------------------------*/
/* 
body {
  @include mq_tab {
    background-color:lightcoral;
  }
	@include mq_pc_s {
    background-color: tan;
  }
  @include mq_pc {
    background-color: yellow;
  }
}
 */
/*  画像関連
------------------------------------------------*/
img {
  max-width: 100%;
  /* 画像は画面サイズに対して100%で表示 */
  height: auto;
  /* 縦のサイズは横幅に合わせて自動調整 */
  width: auto;
  /*IE8のみ適用*/ }

/*  リンク関連
------------------------------------------------*/
a {
  text-decoration: none;
  /* マウスオーバーで透過70％ */ }
  a:hover {
    opacity: 0.7; }

/*  フォント
------------------------------------------------*/
/* 明朝 */
.font_mincho {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }

/* SCSS Document */
/* ヘッダー */
/* =======================================================

	ヘッダー
　　
========================================================== */
/*---------------------------------
	全体
---------------------------------*/
header {
  width: 100%;
  min-height: 100px;
  background: url(../img/gourmet-hd.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  position: relative; }
  @media screen and (min-width: 600px) {
    header {
      min-height: 13rem; } }
  @media screen and (min-width: 960px) {
    header {
      min-height: 15rem; } }
  header h1 {
    width: 100%;
    font-size: 1.4rem;
    letter-spacing: .1rem;
    color: #fff;
    position: absolute;
    top: 50%;
    margin-top: -.5em;
    /*「アイコンフォント一文字の半分」のネガティブマージン*/ }
    @media screen and (min-width: 600px) {
      header h1 {
        font-size: 2.5rem; } }

/* CSS Document */
/* =======================================================

	グルメトップ
　　
========================================================== */
/*  言語選択
------------------------------------------------*/
.select_language_wrap2 {
  width: 100%;
  margin-top: 1rem; }
  .select_language_wrap2 ul {
    text-align: right; }
    .select_language_wrap2 ul li {
      text-align: center;
      display: inline-block;
      margin-left: .7rem;
      font-size: 1rem;
      vertical-align: middle; }
      .select_language_wrap2 ul li:first-child {
        margin-left: 0; }
      .select_language_wrap2 ul li a {
        text-decoration: underline;
        color: #2145A7; }
      @media screen and (min-width: 600px) {
        .select_language_wrap2 ul li {
          width: 5.5rem;
          font-size: .9rem;
          background: #fff;
          margin-left: .5rem; }
          .select_language_wrap2 ul li a {
            border: 1px solid #2145A7;
            display: block;
            padding: .3rem 0;
            text-decoration: none; } }
      .select_language_wrap2 ul li.no_link a {
        pointer-events: none;
        color: #C4C4C4;
        text-decoration: none; }
        @media screen and (min-width: 600px) {
          .select_language_wrap2 ul li.no_link a {
            border: 1px solid #C4C4C4; } }

/*  テキスト
------------------------------------------------*/
.gourmet_txt_wrap {
  width: 100%;
  margin: 4rem 0;
  word-wrap: break-word;
  /* リード文*/
  /* テキスト */ }
  @media screen and (min-width: 600px) {
    .gourmet_txt_wrap {
      margin: 4rem 0 6rem; } }
  @media screen and (min-width: 1280px) {
    .gourmet_txt_wrap {
      margin: 5rem 0 7rem; } }
  .gourmet_txt_wrap h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem; }
  .gourmet_txt_wrap .gourmet_txt p {
    text-align: left;
    line-height: 1.4rem;
    text-indent: 1rem;
    font-size: .9rem;
    text-align: justify;
    word-wrap: break-word; }
	/* ※掲載情報は2019年12月時点のものです。 */
	.gourmet_txt_wrap .attention{
    font-size: .9rem;
		text-align: left;
		margin-top: 1rem;	}

/* エリアを選択してください */
.please_select_area {
  max-width: 867px;
  font-size: .9rem;
  text-align: right;
  margin: 3rem auto .5rem; }
  @media screen and (min-width: 600px) {
    .please_select_area {
      font-size: 1rem; } }

/*  エリア選択マップ
------------------------------------------------*/
.gourmet_areamap {
  max-width: 898px;
  max-height: 914px;
  background: url(../img/gourmet-area.png) no-repeat;
  background-size: contain; }

/*  全体詳細マップ
------------------------------------------------*/
.detail_map {
  margin: 3rem 0; }

/* CSS Document */
/* =======================================================

	共通
　　
========================================================== */
.all_area {
  width: 100%;
  padding-top: 1rem; }

/* =======================================================

	タブエリア
　　
========================================================== */
.tab_area {
  width: 100%;
  display: table;
  margin: 0; }

/*  タブの装飾
------------------------------------------------*/
.tab_area li {
  /* 共通 */
  width: 23%;
  height: 3.5rem;
  padding: .2rem;
  text-align: center;
  border: 1px solid #fff;
  border-bottom: none;
  cursor: pointer;
  transition: ease 0s opacity;
  vertical-align: middle;
  display: table-cell;
  font-size: 1.1rem;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  /* エリア別 */ }
  .tab_area li:nth-of-type(1) {
    background-color: #e1e9dd;
    color: #769763; }
  .tab_area li:nth-of-type(2) {
    background-color: #b4dfec;
    color: #2b8ca9; }
  .tab_area li:nth-of-type(3) {
    background-color: #f4f3f8;
    color: #8175aa; }
  .tab_area li:nth-of-type(4) {
    background-color: #e6dbcd;
    color: #99794e; }

/*  タブの装飾（アクティブ時）
------------------------------------------------*/
.tab_area li {
  /* エリア別 */ }
  .tab_area li.select {
    color: #fff; }
  .tab_area li#tab1.select {
    background: #769763; }
  .tab_area li#tab2.select {
    background: #2b8ca9; }
  .tab_area li#tab3.select {
    background: #8175aa; }
  .tab_area li#tab4.select {
    background: #99794e; }

/* =======================================================

	タブの内容を表示するエリア
　　
========================================================== */
/*  共通
------------------------------------------------*/
.content_area {
  padding: 3rem 0; }
  .content_area .content {
    padding: 2rem 0;
    background: #fff;
    /* エリアタイトル */
    /* エリア詳細マップ */
    /* お店一覧 */ }
    @media screen and (min-width: 960px) {
      .content_area .content {
        padding: 0;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flexbox;
        display: -moz-flexbox;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        /* 
        box-pack:justify;
        -ms-box-pack:justify;
        -moz-box-pack:justify;
        -webkit-box-pack:justify;
         */
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch; } }
    .content_area .content h2 {
      padding: 1.2rem 2rem;
      text-align: left;
      margin-right: 2rem;
      font-size: 2.3rem;
      letter-spacing: .2rem;
      color: #fff;
      /* フェードアニメーション（横スライド） */ }
      .content_area .content h2 p {
        animation-name: fadein;
        animation-duration: 1.5s; }
@keyframes fadein {
  from {
    opacity: 0;
    transform: translateX(50px);
    -moz-transform: translateX(50px);
    -webkit-transform: translateX(50px);
    -ms-transform: translateX(50px); }
  to {
    opacity: 1;
    transform: translateX(0);
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0); } }
      @media screen and (min-width: 960px) {
        .content_area .content h2 {
          margin: 0 3rem 0 3rem;
          padding: 2rem;
          writing-mode: vertical-rl;
          -ms-writing-mode: tb-rl;
          -webkit-writing-mode: vertical-rl;
          text-orientation: upright;
          -webkit-text-orientation: upright;
          display: inline-block;
          vertical-align: top;
          /* フェードアニメーション（縦スライド） */ }
        @keyframes fadein {
          from {
            opacity: 0;
            transform: translateY(50px);
            -webkit-transform: translateY(50px);
            -moz-transform: translateY(50px);
            -ms-transform: translateY(50px); }
          to {
            opacity: 1;
            transform: translateY(0);
            -webkit-transform: translateY(0);
            -webkit-transform: translateY(0);
            -moz-transform: translateY(0);
            -ms-transform: translateY(0); } } }
    .content_area .content .detail_map_area {
      max-width: 40%;
      margin: 2rem auto 0; }
    .content_area .content ul {
      text-align: left;
      font-size: 1.2rem;
      padding: 2rem 0 1rem 2rem;
      /* ご当地メニューバナー */ }
      @media screen and (min-width: 960px) {
        .content_area .content ul {
          width: 70%;
          display: inline-block; } }
      .content_area .content ul .localmenu_banner {
        background: red;
        width: 17rem;
        text-align: left;
        margin: 2rem 0;
        margin-left: -1rem;
        color: red;
        background: url(../img/localmenu-banner.png) no-repeat;
        background-position: center;
        background-size: cover;
        position: relative; }
        .content_area .content ul .localmenu_banner::before {
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          display: inline-block;
          width: 12rem;
          height: 1px;
          -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
          background-color: black; }
        .content_area .content ul .localmenu_banner a {
          text-align: center;
          display: block;
          padding: .5rem;
          color: #2E2E2E; }
      .content_area .content ul li {
        margin-bottom: 1.2rem;
        position: relative;
        padding-left: 20px; }
        .content_area .content ul li a {
          color: #363636;
          text-decoration: none;
          border-bottom: 1px solid #363636; }
        .content_area .content ul li span {
          font-size: .8rem; }

/*  エリア別
------------------------------------------------*/
.all_area .content_area {
  /* タイトル帯、背景画像（フクロウ）、リストアイコン */
  /* 全エリア共通 */
  /* PC小以上でタイトル帯を縦に */ }
  .all_area .content_area.shiraoi_area {
    background-color: #769763; }
    .all_area .content_area.shiraoi_area .content h2 {
      background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/shiraoi-area-obi.png);
      background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/shiraoi-area-obi.png);
      background: linear-gradient(to right, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/shiraoi-area-obi.png); }
    .all_area .content_area.shiraoi_area .content ul {
      background: url(../img/shiraoi-area-bg.png); }
    .all_area .content_area.shiraoi_area .content li::before {
      content: '';
      width: .3rem;
      height: .3rem;
      border: 0px;
      border-top: solid 2px #fff;
      border-right: solid 2px #fff;
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      position: absolute;
      top: .8rem;
      left: -3.5px;
      margin-top: -4px;
      z-index: 999;
      vertical-align: top; }
    .all_area .content_area.shiraoi_area .content li::after {
      content: '';
      width: 1.1rem;
      height: 1.1rem;
      border-radius: 10px;
      position: absolute;
      top: 3.8px;
      left: -7.7px;
      background: #769763; }
  .all_area .content_area.chitose_area {
    background-color: #2b8ca9; }
    .all_area .content_area.chitose_area .content h2 {
      background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/chitose-area-obi.png);
      background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/chitose-area-obi.png);
      background: linear-gradient(to right, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/chitose-area-obi.png); }
    .all_area .content_area.chitose_area .content ul {
      background: url(../img/chitose-area-bg.png); }
    .all_area .content_area.chitose_area .content li::before {
      content: '';
      width: .3rem;
      height: .3rem;
      border: 0px;
      border-top: solid 2px #fff;
      border-right: solid 2px #fff;
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      position: absolute;
      top: .8rem;
      left: -3.5px;
      margin-top: -4px;
      z-index: 999;
      vertical-align: top; }
    .all_area .content_area.chitose_area .content li::after {
      content: '';
      width: 1.1rem;
      height: 1.1rem;
      border-radius: 10px;
      position: absolute;
      top: 3.8px;
      left: -7.7px;
      background: #2b8ca9; }
  .all_area .content_area.tomakomai_area {
    background-color: #8175aa; }
    .all_area .content_area.tomakomai_area .content h2 {
      background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/tomakomai-area-obi.png);
      background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/tomakomai-area-obi.png);
      background: linear-gradient(to right, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/tomakomai-area-obi.png); }
    .all_area .content_area.tomakomai_area .content ul {
      background: url(../img/tomakomai-area-bg.png); }
    .all_area .content_area.tomakomai_area .content li::before {
      content: '';
      width: .3rem;
      height: .3rem;
      border: 0px;
      border-top: solid 2px #fff;
      border-right: solid 2px #fff;
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      position: absolute;
      top: .8rem;
      left: -3.5px;
      margin-top: -4px;
      z-index: 999;
      vertical-align: top; }
    .all_area .content_area.tomakomai_area .content li::after {
      content: '';
      width: 1.1rem;
      height: 1.1rem;
      border-radius: 10px;
      position: absolute;
      top: 3.8px;
      left: -7.7px;
      background: #8175aa; }
  .all_area .content_area.noboribetu_area {
    background-color: #99794e; }
    .all_area .content_area.noboribetu_area .content h2 {
      background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/noboribetu-area-obi.png);
      background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/noboribetu-area-obi.png);
      background: linear-gradient(to right, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/noboribetu-area-obi.png); }
    .all_area .content_area.noboribetu_area .content ul {
      background: url(../img/noboribetu-area-bg.png); }
    .all_area .content_area.noboribetu_area .content li::before {
      content: '';
      width: .3rem;
      height: .3rem;
      border: 0px;
      border-top: solid 2px #fff;
      border-right: solid 2px #fff;
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      position: absolute;
      top: .8rem;
      left: -3.5px;
      margin-top: -4px;
      z-index: 999;
      vertical-align: top; }
    .all_area .content_area.noboribetu_area .content li::after {
      content: '';
      width: 1.1rem;
      height: 1.1rem;
      border-radius: 10px;
      position: absolute;
      top: 3.8px;
      left: -7.7px;
      background: #99794e; }
  .all_area .content_area.shiraoi_area .content ul, .all_area .content_area.noboribetu_area .content ul, .all_area .content_area.tomakomai_area .content ul, .all_area .content_area.chitose_area .content ul {
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center; }
    @media screen and (min-width: 600px) {
      .all_area .content_area.shiraoi_area .content ul, .all_area .content_area.noboribetu_area .content ul, .all_area .content_area.tomakomai_area .content ul, .all_area .content_area.chitose_area .content ul {
        background-size: 80%; } }
  @media screen and (min-width: 960px) {
    .all_area .content_area.shiraoi_area .content h2 {
      background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/shiraoi-area-obi.png);
      background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/shiraoi-area-obi.png);
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/shiraoi-area-obi.png); }
    .all_area .content_area.chitose_area .content h2 {
      background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/chitose-area-obi.png);
      background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/chitose-area-obi.png);
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/chitose-area-obi.png); }
    .all_area .content_area.tomakomai_area .content h2 {
      background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/tomakomai-area-obi.png);
      background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/tomakomai-area-obi.png);
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/tomakomai-area-obi.png); }
    .all_area .content_area.noboribetu_area .content h2 {
      background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/noboribetu-area-obi.png);
      background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/noboribetu-area-obi.png);
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), url(../img/noboribetu-area-obi.png); } }

.hide {
  display: none; }

/* CSS Document */
/* =======================================================

	全体の共通設定
　　
========================================================== */
/*  キャプション
------------------------------------------------*/
/* メイン */
.cap {
  text-align: center;
  font-size: .9rem;
  line-height: 1.2rem; }

/* サブ */
.sub_img_wrap .cap {
  text-align: left; }

/*  区切り ◇ ◇ ◇
------------------------------------------------*/
.separator {
  width: 100%;
  letter-spacing: 3rem;
  text-indent: 3rem;
  margin: 2.5rem auto 1rem;
  overflow: hidden; }
  #shiraoi .separator {
    color: #769763; }
  #chitose .separator {
    color: #2b8ca9; }
  #tomakomai .separator {
    color: #8175aa; }
  #noboribetu .separator {
    color: #99794e; }

/* =======================================================

	メイン（上部）
　　
========================================================== */
/*  全体の設定
------------------------------------------------*/
.main_top {
  width: 100%;
  margin: 2rem auto;
  /* 店名（共通） */ }
  @media screen and (min-width: 600px) {
    .main_top {
      width: 100%; } }
  .main_top .title_wrap {
    margin: 1rem auto;
    line-height: 1.4rem; }
    .main_top .title_wrap h2 {
      font-weight: bold;
      font-size: 1.3rem;
      vertical-align: middle;
      display: inline-block;
      letter-spacing: .1rem; }
      .main_top .title_wrap h2 span {
        font-size: .8rem;
        margin-right: .5rem; }
    .main_top .title_wrap img {
      width: 100%; }
    .main_top .title_wrap .kana {
      font-size: .8em;
      margin-top: -0.3rem; }

/*  メイン写真
------------------------------------------------*/
.main_img_wrap {
  width: 100%;
  text-align: center; }
  .main_img_wrap .mainimg_wrap {
    margin: 0 auto; }

/*  メインテキスト
------------------------------------------------*/
.main_txt_wrap {
  padding-top: 4rem;
  /* エリア別背景 */
  /* 背景共通 */
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 12rem;
  /* 見出し */
  /* メインテキスト */ }
  #shiraoi .main_txt_wrap {
    background-image: url(../img/shiraoi-shop-bg.png); }
  #chitose .main_txt_wrap {
    background-image: url(../img/chitose-shop-bg.png); }
  #tomakomai .main_txt_wrap {
    background-image: url(../img/tomakomai-shop-bg.png); }
  #noboribetu .main_txt_wrap {
    background-image: url(../img/noboribetu-shop-bg.png); }
  .main_txt_wrap h3 {
    font-size: 1.1rem;
    line-height: 1.6em;
    margin-bottom: 2rem;
    font-weight: bold; }
    @media screen and (min-width: 960px) {
      .main_txt_wrap h3 {
        font-size: 1.3rem;
        letter-spacing: .2rem; } }
  .main_txt_wrap .main_txt p {
    text-indent: 1rem;
    font-size: .9rem;
    text-align: justify;
    word-wrap: break-word; }
    @media screen and (min-width: 960px) {
      .main_txt_wrap .main_txt p {
        font-size: 1rem; } }
  .main_txt_wrap .main_txt a {
    color: #000;
    text-decoration: underline; }

/* =======================================================

	サブ
　　
========================================================== */
/*  サブ写真
------------------------------------------------*/
.sub_img_wrap {
  width: 80%;
  margin: 0 auto; }
  .sub_img_wrap img {
    margin-top: 3rem; }
  @media screen and (min-width: 600px) {
    .sub_img_wrap {
      width: 70%; } }
  @media screen and (min-width: 960px) {
    .sub_img_wrap {
      width: 100%;
      display: -webkit-box;
      display: -moz-box;
      display: -webkit-flexbox;
      display: -moz-flexbox;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      /* 
      box-pack:justify;
      -ms-box-pack:justify;
      -moz-box-pack:justify;
      -webkit-box-pack:justify;
       */
      justify-content: space-between;
      flex-wrap: wrap;
      /* 画像が横の場合（基本） */ }
      .sub_img_wrap > div {
        width: 47%; } }

/* =======================================================

	シェフ紹介＆お店情報
　　
========================================================== */
/*  シェフ紹介
------------------------------------------------*/
/* シェフ-テキスト関連 */
.chef_txt_wrap {
  text-align: left;
  background: #EFEFEF;
  margin: 5rem 0;
  padding: 1.5rem;
  width: 100%;
  text-align: left; }
  @media screen and (min-width: 600px) {
    .chef_txt_wrap {
      width: 80%;
      padding: 2rem; } }
  .chef_txt_wrap .chef_name {
    display: inline-block;
    font-size: .7rem;
    line-height: 1.3;
    margin-bottom: 1.2rem;
    padding-right: 1rem;
    border-right: 4px solid #A98F3E; }
    @media screen and (min-width: 600px) {
      .chef_txt_wrap .chef_name {
        font-size: .9rem; } }
    .chef_txt_wrap .chef_name span {
      font-size: 1.1rem;
      font-weight: bold; }
      @media screen and (min-width: 600px) {
        .chef_txt_wrap .chef_name span {
          font-size: 1.4rem; } }
  .chef_txt_wrap .chef_txt {
    text-align: justify;
    text-justify: inter-ideograph;
    line-height: 1.2;
    letter-spacing: 0.01rem; }
    @media screen and (min-width: 600px) {
      .chef_txt_wrap .chef_txt {
        font-size: 1rem;
        line-height: 1.5; } }
    @media screen and (min-width: 960px) {
      .chef_txt_wrap .chef_txt {
        font-size: 1.1rem;
        line-height: 1.7; } }

/*  お店詳細
------------------------------------------------*/
.shop_detail_wrap {
  margin: 4rem auto 1rem;
  font-size: .75rem;
  line-height: 1.3;
  /* お店情報表 */
  /* L、D、LOなどを枠で囲む */
  /* 記号の説明 */
  /* 地図 */ }
  @media screen and (min-width: 600px) {
    .shop_detail_wrap {
      font-size: .9rem; } }
  .shop_detail_wrap .title_wrap {
    margin: 1rem auto;
    line-height: 1.4rem;
    text-align: left;
    border-bottom: 1px solid #000;
    padding: .5rem 0;
    /* 店名 */ }
    .shop_detail_wrap .title_wrap h2 {
      font-weight: bold;
      font-size: 1.3rem;
      vertical-align: middle;
      display: inline-block;
      letter-spacing: .1rem; }
      .shop_detail_wrap .title_wrap h2 span {
        font-size: .8rem;
        margin-right: .5rem; }
    .shop_detail_wrap .title_wrap h2 {
      padding-right: .5rem;
      margin-right: .5rem;
      border-right: 1px solid #000; }
    .shop_detail_wrap .title_wrap .kana {
      font-size: .8em;
      display: inline-block;
      padding-top: .3rem; }
  .shop_detail_wrap table {
    border-collapse: collapse;
    border-spacing: 0; }
    .shop_detail_wrap table th {
      width: 7rem;
      background-color: #DDDDDD;
      text-align: center;
      border: 1px solid #fff;
      font-weight: normal;
      padding: .5rem .1rem; }
    .shop_detail_wrap table td {
      text-align: left;
      padding: .4rem 0 .4rem .3rem;
      line-height: 1.1rem; }
      @media screen and (min-width: 600px) {
        .shop_detail_wrap table td {
          padding-left: 1rem;
          line-height: 1.2rem; } }
  .shop_detail_wrap .mark, .shop_detail_wrap .mark_description .mark {
    border: 1px solid #000;
    font-size: 85%;
    padding: 0 .1rem;
    margin-right: .1rem; }
  .shop_detail_wrap .mark_description {
    text-align: left;
    margin-top: 1rem; }
    .shop_detail_wrap .mark_description .mark {
      margin: 0 .1rem; }
  .shop_detail_wrap .map {
    position: relative;
    width: 100%;
    margin-top: 2rem; }
    .shop_detail_wrap .map:before {
      content: "";
      display: block;
      padding-top: 62.5%; }
    .shop_detail_wrap .map .i_map {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }

/* CSS Document */
/* =======================================================

	言語選択ページ
　　
========================================================== */
#language {
  padding: 1rem;
  /* 言語を選択してください */
  /* Please select a language */
  /*  言語選択
  ------------------------------------------------*/
  /* 店名 */
  /* 店名（英語） */ }
  #language h1 {
    font-size: 1.4rem;
    margin: 2rem 0 .6rem; }
  #language .title_sub {
    font-size: .9rem; }
  #language .select_language_wrap {
    width: 100%;
    margin-top: 2rem;
    padding: 1rem;
    background: #EBEBEB; }
    @media screen and (min-width: 600px) {
      #language .select_language_wrap {
        padding: 2rem; } }
  #language .shop_name {
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    border-bottom: 1px solid #000; }
    #language .shop_name span {
      font-size: .8rem; }
  #language .shop_name_en {
    padding-top: .3rem;
    text-align: left;
    line-height: 1.1rem;
    font-size: .8rem; }
  #language .select_language {
    margin: 1.5rem 0 .5rem;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    /* 
    box-pack:justify;
    -ms-box-pack:justify;
    -moz-box-pack:justify;
    -webkit-box-pack:justify;
     */
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    flex-wrap: wrap; }
    @media screen and (min-width: 600px) {
      #language .select_language {
        flex-wrap: nowrap; } }
    #language .select_language li {
      width: 45%;
      margin-bottom: 1rem;
      display: inline-block; }
      @media screen and (min-width: 600px) {
        #language .select_language li {
          margin-right: 1rem; }
          #language .select_language li:last-child {
            margin-right: 0; } }
      @media screen and (min-width: 960px) {
        #language .select_language li {
          margin-right: 3rem; } }
      #language .select_language li a {
        color: #000; }

/* CSS Document */
/* =======================================================

	ご当地メニュー
　　
========================================================== */
.localmenu {
  margin: 2rem auto;
  /*  タイトル
  ------------------------------------------------*/
  /* 白老町ご当地メニュー */
  /* 白老バーガー＆ベーグル */ }
  .localmenu h1 {
    font-size: 1.2rem;
    margin: 1rem 0; }
    .localmenu h1::before, .localmenu h1::after {
      content: "";
      display: inline-block;
      vertical-align: top;
      background: url(../img/deco01.png) no-repeat;
      background-size: contain;
      width: 1.5rem;
      height: 1.5rem; }
    .localmenu h1::after {
      transform: scale(-1, 1); }
  .localmenu h2 {
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: .2rem;
    margin: 2rem 0; }

/*  テキスト
------------------------------------------------*/
.lacalmenu_txt_wrap {
  width: 100%;
  margin: 1rem auto 2rem; }
  @media screen and (min-width: 600px) {
    .lacalmenu_txt_wrap {
      width: 80%; } }
  @media screen and (min-width: 960px) {
    .lacalmenu_txt_wrap {
      width: 70%; } }
  .lacalmenu_txt_wrap p {
    text-align: left; }

/*  データ欄
------------------------------------------------*/
/* 共通 */
dl {
  width: 100%;
  margin: 0;
  padding: .5rem;
  text-align: left; }
  @media screen and (min-width: 600px) {
    dl {
      width: 80%; } }
  @media screen and (min-width: 960px) {
    dl {
      width: 70%; } }

dt {
  padding: 0;
  margin: .5rem 0;
  line-height: 1rem; }

dd {
  margin: -1.5rem 0 0 4.5rem;
  padding-left: 1rem;
  line-height: 1rem; }

/* バーガー＆ベーグル研究会 データ欄 */
.localmenu_data_wrap dl {
  margin: 0 auto 3rem;
  padding: 0.5rem 1rem 0.8rem;
  border: 1px dashed #000; }

/*  画像
------------------------------------------------*/
.localmenu_img_wrap {
  display: block; }
  @media screen and (min-width: 600px) {
    .localmenu_img_wrap {
      display: -webkit-box;
      display: -moz-box;
      display: -webkit-flexbox;
      display: -moz-flexbox;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      /* 
      box-pack:justify;
      -ms-box-pack:justify;
      -moz-box-pack:justify;
      -webkit-box-pack:justify;
       */
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; } }
  .localmenu_img_wrap .localmenu_img {
    position: relative;
    width: 100%;
    margin: 1rem 0; }
    @media screen and (min-width: 600px) {
      .localmenu_img_wrap .localmenu_img {
        width: 47%; } }
    .localmenu_img_wrap .localmenu_img p {
      position: absolute;
      right: 1rem;
      bottom: 1rem;
      color: #fff;
      text-shadow: 1px 2px 3px #000; }

/*  お店一覧
------------------------------------------------*/
.localmenu_shop_wrap {
  margin: 2rem 0; }
  @media screen and (min-width: 600px) {
    .localmenu_shop_wrap {
      display: -webkit-box;
      display: -moz-box;
      display: -webkit-flexbox;
      display: -moz-flexbox;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      /* 
      box-pack:justify;
      -ms-box-pack:justify;
      -moz-box-pack:justify;
      -webkit-box-pack:justify;
       */
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; } }
  .localmenu_shop_wrap a {
    color: #000;
    text-decoration: underline; }
  @media screen and (min-width: 600px) {
    .localmenu_shop_wrap ul {
      width: 48%;
      display: inline-block; } }
  .localmenu_shop_wrap ul:first-child li {
    padding: 1.5rem 1rem; }
  .localmenu_shop_wrap li {
    margin-bottom: .7em;
    padding: 1rem;
    text-align: left;
    background: #eff3ed;
    /* 店名 */
    /* MAPリンク */
    /* お店一覧　データ欄 */ }
    .localmenu_shop_wrap li h3 {
      font-weight: bold;
      display: inline-block; }
    .localmenu_shop_wrap li span {
      margin-left: .3rem;
      font-size: .8rem;
      vertical-align: top;
      border: 1px solid #000;
      padding: 0 .2rem;
      background: #acc0a0; }
      .localmenu_shop_wrap li span a {
        text-decoration: none; }
    .localmenu_shop_wrap li dl {
      font-size: .8rem;
      padding-left: 0;
      width: 100%; }
    .localmenu_shop_wrap li dt {
      margin: .2rem 0; }
    .localmenu_shop_wrap li dd {
      margin: -1.2rem 0 0 4.5rem;
      border-left: 2px solid #769763; }

/* CSS Document */
/* =======================================================

	****　翻訳別　固有css　****
	
	en - 英語
	ko - ハングル（韓国語）
	zh-cn - 簡体字
	zh-tw - 繁体字
　　
========================================================== */
/* =======================================================

	共通
　　
========================================================== */
/*  トップへ戻る
------------------------------------------------*/
.back img {
  top: -0.2rem; }

/*  フォント設定（言語別）
------------------------------------------------*/
/* 簡体字 */
/* 繁体字 */
/* 韓国語 */
#zh-tw {
  font-family: "Noto Sans TC"; }
  #zh-tw .font_mincho {
    font-family: "Noto Serif TC"; }

#zh-cn {
  font-family: "Noto Sans SC"; }
  #zh-cn .font_mincho {
    font-family: "Noto Serif SC"; }

#ko {
  font-family: 'Noto Sans KR', sans-serif; }
  #ko .font_mincho {
    font-family: 'Nanum Myeongjo', serif; }

/* =======================================================

	グルメトップ
　　
========================================================== */
/* en */
#en .gourmet_txt_wrap .gourmet_txt p {
  text-indent: 0; }

/* zh-cn　zh-tw */
#zh-cn .gourmet_txt_wrap .gourmet_txt p, #zh-tw .gourmet_txt_wrap .gourmet_txt p {
  text-indent: 2rem; }

/* =======================================================

	ご当地メニュー（ベーグル）
　　
========================================================== */
#en .localmenu_shop_wrap dd {
  margin: -1.2rem 0 0 6.5rem; }

/* =======================================================

	shop（各お店詳細ページ）
　　
========================================================== */
/*  メインテキスト
------------------------------------------------*/
/* en */
#en .main_txt_wrap {
  /* 見出し文字間 */
  /* インデント設定 */ }
  #en .main_txt_wrap h3 {
    letter-spacing: 0.07rem; }
  #en .main_txt_wrap .main_txt p {
    text-indent: 0; }

/* zh-cn　zh-tw */
#zh-cn .main_txt_wrap .main_txt p, #zh-tw .main_txt_wrap .main_txt p {
  text-indent: 2rem; }

/* =======================================================

	shop-list（お店一覧）
　　
========================================================== */
/*  エリアタイトル（帯）
------------------------------------------------*/
/* en */
@media screen and (min-width: 960px) {
  #en .content_area .content h2 {
    writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    text-orientation: sideways;
    -webkit-text-orientation: sideways; } }