@charset "UTF-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

html {
    -webkit-text-size-adjust: 100%;
    overflow-y: scroll;
}

ul, ul, dl {
    list-style-type: none;
}

body {
    line-height: 1;
    font-size: 14px;
    font-family: HiraKakuProN-W3,"ヒラギノ角ゴ ProN W3",Helvetica,sans-serif;
    color: #3a3a3a;
    width: 100%;
    min-width: 320px;
    background: #fff;
}



/*
 * iPhone Safari にてフォームサイズが16px以下だとズームされてしまうためデフォルト16pxを指定
 */
button,
input,
textarea,
select {
    font-size: 16px;
}


/*
 * Google Chrome にてフォーカスがあたると黒枠が表示されてしまうため、フォーム部分についてはBootstrap風の青枠に変更
 */
button:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}



/* ----------------------------------------------------------------
COMMON
---------------------------------------------------------------- */
.cf:before,
.cf:after {
    content: "";position:relative;
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

/* ----------------------------------------------------------------
  like bootstrap utility
---------------------------------------------------------------- */

.m-0 {
    margin: 0;
}

.m-1 {
    margin: .5rem;
}

.m-2 {
    margin: 1rem;
}

.m-3 {
    margin: 1.5rem;
}

.m-4 {
    margin: 2rem;
}

.m-5 {
    margin: 2.5rem;
}

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: .5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.mt-4 {
    margin-top: 2rem;
}

.mt-5 {
    margin-top: 2.5rem;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: .5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

.mb-4 {
    margin-bottom: 2rem;
}

.mb-5 {
    margin-bottom: 2.5rem;
}

.mr-0 {
    margin-right: 0;
}

.mr-1 {
    margin-right: .5rem;
}

.mr-2 {
    margin-right: 1rem;
}

.mr-3 {
    margin-right: 1.5rem;
}

.mr-4 {
    margin-right: 2rem;
}

.mr-5 {
    margin-right: 2.5rem;
}

.ml-0 {
    margin-left: 0;
}

.ml-1 {
    margin-left: .5rem;
}

.ml-2 {
    margin-left: 1rem;
}

.ml-3 {
    margin-left: 1.5rem;
}

.ml-4 {
    margin-left: 2rem;
}

.ml-5 {
    margin-left: 2.5rem;
}

.p-0 {
    padding: 0;
}

.p-1 {
    padding: .5rem;
}

.p-2 {
    padding: 1rem;
}

.p-3 {
    padding: 1.5rem;
}

.p-4 {
    padding: 2rem;
}

.p-5 {
    padding: 2.5rem;
}

.pt-0 {
    padding-top: 0;
}

.pt-1 {
    padding-top: .5rem;
}

.pt-2 {
    padding-top: 1rem;
}

.pt-3 {
    padding-top: 1.5rem;
}

.pt-4 {
    padding-top: 2rem;
}

.pt-5 {
    padding-top: 2.5rem;
}

.pb-0 {
    padding-bottom: 0;
}

.pb-1 {
    padding-bottom: .5rem;
}

.pb-2 {
    padding-bottom: 1rem;
}

.pb-3 {
    padding-bottom: 1.5rem;
}

.pb-4 {
    padding-bottom: 2rem;
}

.pb-5 {
    padding-bottom: 2.5rem;
}

.pr-0 {
    padding-right: 0;
}

.pr-1 {
    padding-right: .5rem;
}

.pr-2 {
    padding-right: 1rem;
}

.pr-3 {
    padding-right: 1.5rem;
}

.pr-4 {
    padding-right: 2rem;
}

.pr-5 {
    padding-right: 2.5rem;
}

.pl-0 {
    padding-left: 0;
}

.pl-1 {
    padding-left: .5rem;
}

.pl-2 {
    padding-left: 1rem;
}

.pl-3 {
    padding-left: 1.5rem;
}

.pl-4 {
    padding-left: 2rem;
}

.pl-5 {
    padding-left: 2.5rem;
}


#page-top {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-end;
  position: fixed;
  right: 10px;
  bottom: 40px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding-bottom: 9px;
  background-color: rgba(0, 0, 0, 0.6);
  text-align: center;
  font-size: 10px;
  color: #fff;
  opacity: 0;
  border-radius: 5px;
  transition: all 0.3s;
  z-index: 10000;
}

#page-top:before {
  content: "";
  display: block;
  position: absolute;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  background-position: 50% 12px;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNS8xMy8yMFEGLBsAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAADHUlEQVR4nO3cPWsUURSA4XejCBYaUFRQENRKCClFEEEC2qhNhKjYiGAj+Av8D6KVQRArCxUUQkBs0qiojUHBD9BURgIKQrRQ/BqLm6tLyGbm3nPv3LPhvOXunJnJk0l2dvajU1UVVnwDpXeg3zNAYQYozACFGaAwAxRmgMIMUJgBCjNAYauF8+uBA8AG+a4U6wPwAPgeMywBHAOuAoOCdWhpFjgJPAwd7EReTNgLPGJl/QuYB3YDcyFDsQBnBbNaGwROhA7FImyMnNPe9tCBWMCVehHxZ+hALODLyDntPQ8diH0Q2QRMA9tihpX2BNgP/AoZij0CP+EeiW8Tef6kqHlgHDhEIB7EH4HWQivtVKT1DFCYAQozQGEGKKwfAPfgzjtVph1wFHiMe+ajElEz4CjuRH0Ah6cSUStgN55PJaJGwKXwfOoQtT2VOwxMUP+L/QgM4Z6TF03TEThC7yNvcZuBKRQciVoAR4BJYG3AzBAKEDUAxuD5iiOWBpTg+YoilgRMgecrhlgKMCWerwhiCcAceL7WEdsGzInnaxWxTcCmeD8SbKs1xLYAm+J9Ay41WN94g2VaQWwDMATvCPC6wTrPoQQxN2Ao3lTD9VYoQcwJmAvPpwIxF2BuPF9xxByAR4F75MfzhSI+BbYIt/mv1IBjwF1gTc1yqfB8IYg7gGfAzhQbTgk4DNwAVtUslxrPF4K4FfeLFv/8KQHPUP+m9Vx4vhDEYWCfdIMpAeveHpsbzxd6JIpKCfhmmft+0w6ezyNeq1nurXRDKQGv4N6suLg/wHnaw/NVuE8TTPS4/z7uwURUSsD3wEHgVddtc8AxHG6JqoXtX+T/RYoKuAUcT7GBXC9r7sI9oLzD/fmGdBq4XrNMJ2Kf1uFOYWaBzxHzSyb9rFyvZjKtV9JX4EXqlZZ+UanvM0BhBijMAIUZoDADFGaAwgxQmAEKM0BhBijMAIUZoDADFGaAwjQCBn9vQck0AtZ9pYqqi7UaAaeBO8vcf6GtHWmSRkCAU8Bl4EvXbTO477a6WWSPeqTts3J9l9YjsG8yQGEGKMwAhf0FbdelnoheePsAAAAASUVORK5CYII=);
  background-size: 30px 30px;
}

#page-top.active {
  right: 10px;
  opacity: 1;
}



nav ul {
    list-style:none;
}



/* slidemenu */

.slidemenu {
    background-color: #333;
}

.slidemenu-content {
}

.slide_menu_header {
    padding: 10px;
}

.slide_menu_close_btn {
    color: #eee;
}

.slide_menu_close_btn {
  display: block;
  position: absolute;
  right: 12px;
  top: 6px;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  border-radius: 50%;

}

.slide_menu_close_btn::before,
.slide_menu_close_btn::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 70%;
  background-color: #888;
}

.slide_menu_close_btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.slide_menu_close_btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}



.slidemenu-content > .slide_menu {
  padding: 30px;
}

.slidemenu-content > div > nav > ul > li {
    padding: 15px 0;
}

.slidemenu-content > div > nav > ul > li a {
  display: flex;
  flex-flow: row;
  align-items: center;
  align-content: center;
  width: 100%;
  margin: 0 auto;
  padding: 2px 0;
  text-align: center;
  font-size: 18px;
  font-weight: 300;
  color: #eee;
  text-decoration: none;
}
.slidemenu-content > div > nav > ul > li a::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  margin-right: 15px;
}
.slidemenu-content > div > nav > ul > li a::before {
  background-repeat: no-repeat;
  background-position: center center;
}
.slidemenu-content > div > nav > ul > li.area a::before {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve"><rect fill="%23EEEEEE" x="32" y="0" width="16" height="14"/><rect fill="%23EEEEEE" x="15" y="40" width="13" height="8"/><polygon fill="%23EEEEEE" points="0,27 0,41 5,41 5,48 12,48 12,27 "/><polygon fill="%23EEEEEE" points="32,17 32,27 15,27 15,37 31,37 31,48 38,48 38,44 42,44 42,48 48,48 48,17 "/></svg>');
}
.slidemenu-content > div > nav > ul > li.new a::before {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve"><path fill="%23EEEEEE" d="M44,24l3.4-5.34l-5.38-3.34l0.74-6.29l-6.29-0.67l-2.06-5.99L28.45,4.5L24,0l-4.45,4.5l-5.96-2.12l-2.06,5.99L5.24,9.04 l0.74,6.29L0.6,18.66L4,24l-3.4,5.34l5.38,3.34l-0.74,6.29l6.29,0.67l2.06,5.99l5.96-2.12L24,48l4.45-4.5l5.96,2.12l2.06-5.99 l6.29-0.67l-0.74-6.29l5.38-3.34L44,24z M16.47,29.82h-2.89l-4.94-7.98v7.98H5.89V18.18h3.59l4.24,6.66v-6.66h2.75V29.82z M39.94,29.82h-3.33l-2.08-7.58l-2.03,7.58h-3.32L26.1,18.35v2.08h-5.43v2.01h5.04v2.25h-5.04v2.88h5.43v2.25h-8.41V18.18h8.37h0.04 h3.09l1.79,8.01l2.15-8.01h2.99l2.04,8.01l1.87-8.01h3.06L39.94,29.82z"/></svg>');
}
.slidemenu-content > div > nav > ul > li.review a::before {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 49 48" style="enable-background:new 0 0 49 48;" xml:space="preserve"><path fill="%23EEEEEE" d="M24.48,3C9.4,2.83-0.22,10.18,0,21.7C-0.22,33.1,9.22,40.42,24.06,40.39L22.56,46c10.66,0,20.92-6.8,24.77-16.45 c1.12-2.32,1.69-4.95,1.63-7.85C49.19,10.18,39.56,2.83,24.48,3z M26.41,27.56H10.05v-2.89h16.36V27.56z M36.99,18.9H10.05v-2.89 h26.94V18.9z"/></svg>');
}
.slidemenu-content > div > nav > ul > li.topics a::before {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 40 48" style="enable-background:new 0 0 40 48;" xml:space="preserve"><polygon fill="%23EEEEEE" points="40.49,21.6 29.68,21.6 37.58,2.2 15.27,2.2 7.51,28.4 19.87,28.4 19.15,47.79 "/></svg>');
}
.slidemenu-content > div > nav > ul > li.keep a::before {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 48" style="enable-background:new 0 0 40 48;" xml:space="preserve"><path fill="%23EEEEEE" d="M9.3-.1V47.4l14.8-11,14.8,11V-.1ZM32,33l-7.9-4.4L16.3,33l1.8-8.8-6.7-6.1,9-1.1,3.7-8.2L27.9,17l8.9,1.1-6.6,6.1Z" transform="translate(-9.3 0.1)"/></svg>');
}


.slidemenu-content > div > ul.support_menu {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #444;
}

.slidemenu-content > div > ul.support_menu > li {
    padding: 15px 0;
}

.slidemenu-content > div > ul.support_menu > li a {
  display: flex;
  flex-flow: row;
  align-items: center;
  align-content: center;
  width: 100%;
  margin: 0 auto;
  padding: 2px 0;
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  color: #eee;
  text-decoration: none;
}




/*footer*/
#footer {
    padding: 20px;
    background: #f1f1f1;
    border-top: 1px solid #ddd;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    line-height: 1.75;
}

#copyright {
    text-align: center;
    padding-top: 12px;
}


/*main*/
#main {
    background: #FFFFFF;
}
#contents {
}
#contents h1 {
}

.pageTitleH1 {
    padding: 5px;
    background: #f7eee6;
    color: #683C12;
    font-weight: 700;
}

/*plugin*/
#main {
  z-index: 1;
}
.slidemenu {
  top: 0;
  width: 75%;
  position: fixed;
  visibility: hidden;
  z-index: -1;
}
.slidemenu .slidemenu-header {
  position: relative;
}
.slidemenu .slidemenu-body {
  height: 100%;
  overflow: hidden;
  position: relative;
}
.slidemenu .slidemenu-body .slidemenu-content {
  position: relative;
}
.slidemenu-left {
    left: 0;
}
.slidemenu-right {
    right: 0;
}

/* ----------------------------------------------------------------
HEADER
---------------------------------------------------------------- */
#header {
    background: #FAF8F3;
    background: #fff;
    border-top: 3px solid #F93;
    border-bottom: 1px solid #eee;
    height: 50px;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

#header:last-child {
}


#hmenu {
    margin-left: auto;
    width: 120px;
    display: block;
}

#hmenu li {
    margin-top: 3px;
    padding: 4px;
    display: block;
    float: right;
    width: 50px;
    font-size: 9px;
    text-align: center;
    border-left: 1px solid #eee;
}

#hmenu li div {
    margin-top: 2px;
}

#hmenu li a,
#hmenu li a:link,
#hmenu li a:visited,
#hmenu li a:hover {
    text-decoration: none;
    color: #3A3A3A;
}


@media screen and (max-width: 360px) {
  #hmenu {
    width: 80px;
  }
  #hmenu li {
    padding: 4px 2px;
    width: 35px;
  }
}



#header h1 {
    float: left;
    display: block;
}


.areaChange_box {
    float: left;
    width: 60px;
}

areaChange_box_inner {
    text-align: center;
}


.areaChange_currentArea {
    background: #fff;
    padding: 3px;
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
    font-weight: bold;
}

.areaChange_currentArea a {
    text-decoration: none;
    display: block;
    color: #c60;
}

.areaChange_currentArea details {
    position: relative;
    transition: .5s;
}

.areaChange_currentArea summary {

    list-style: none;
    
    border: 1px solid #F93;
    border: 1px solid #ddd;
    color: #666;
    background: #fff;
    padding: 3px;
    border-radius: 4px;
    font-size: 11px;
    text-align: center;
    font-weight: bold;
    line-height: 1.2;
    cursor: pointer;
}

.areaChange_currentArea summary::-webkit-details-marker { display: none; }


.position-relative {
    position: relative!important;
}

.dropdown-caret {
    color: #888;
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    content: "";
    border-top-style: solid;
    border-top-width: 4px;
    border-right: 4px solid transparent;
    border-bottom: 0 solid transparent;
    border-left: 4px solid transparent;
    margin-left: 2px;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    width: 160px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: 2px;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(27,31,35,.15);
    border-radius: 4px;
    box-shadow: 0 1px 15px rgba(27,31,35,.15);
}

.dropdown-menu-list {
}

.dropdown-menu-list li {
}

.dropdown-menu-list li a {
    padding: 10px;
    color: #444;
}

.dropdown-menu-list-item {
    position: relative;

}

.dropdown-menu-list-item:after {
/*
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    width: 10px;
    height: 15px;
    margin-top: -6px;
    background-image: url(../img/arrow_icon@2x.png?v=20141126-2);
    background-repeat: no-repeat;
    background-size: 100px 100px;
    background-position: -55px -20px;
    content: "";
*/
}

.dropdown-menu-list-item_active {
    /* background: #ffd333; */
    background: #eee;
}

.dropdown-menu-list-item_active:after {
    display: block;
    position: absolute;
    top: 50%;
    right: 8px;
    width: 15px;
    height: 15px;
    margin-top: -6px;
    background-image: url(../img/arrow_icon@2x.png?v=20141126-2);
    background-repeat: no-repeat;
    background-size: 100px 100px;
    background-position: -55px -70px;
    content: "";
}

.file-navigation .get-repo-modal {
    top: 6px;
    width: 352px;
}
.dropdown-menu-sw {
    right: -50px;
    left: auto;
}

details[open] > summary:before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  background: transparent;
}






.areaChange_btn {
    background: #eee;
    font-size: 9px;
}



/* slide menu add */

#smenu li {
    margin: 3px 0 0 0;
    padding: 4px;
    display: block;
    float: left;
    width: 65px;
    font-size: 9px;
    text-align: center;
    line-height: 1.0;
    border: none;
    border-right: 1px solid #444;
}

#smenu li div {
    margin-top: 2px;
}

#smenu li a,
#smenu li a:link,
#smenu li a:visited,
#smenu li a:hover {
    padding: 0;
    margin: 0;
    display: inline;
    text-decoration: none;
    color: #ccc;
}



/* ----------------------------------------------------------------
* TOP PAGE
---------------------------------------------------------------- */

#special {
    margin: 0 0 25px;
}

.special_backnumber {
    margin-top: 15px;
}

.special_top {
    margin-top: 0;
}

#special h3 {
    clear: both;
    margin: 0;
    padding: 5px;
    background: #f7eee6;
    color: #683C12;
    font-weight: normal;
}

.spbox {
    border-bottom: 1px solid #eee;
}

.spbox a {
    display: block;
    position: relative;
    padding: 3px 20px 3px 3px;
    color: #333;
    text-decoration: none;
    word-break: break-all;
}
.spbox a:after {
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    width: 10px;
    height: 15px;
    margin-top: -6px;
    background-image: url(../img/arrow_icon@2x.png?v=20141126-2);
    background-repeat: no-repeat;
    background-size: 100px 100px;
    background-position: -55px -20px;
    content: "";
}


#special_news {

}

#special_news h3 {
    clear: both;
    margin: 0;
    padding: 5px;
    background: #f7eee6;
    color: #683C12;
    font-weight: normal;
}

.news_box {
    border-bottom: 1px solid #eee;
}

.news_box a {
    display: block;
    position: relative;
    padding: 3px 20px 3px 3px;
    color: #333;
    text-decoration: none;
    word-break: break-all;
}
.news_box a:after {
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    width: 15px;
    height: 15px;
    margin-top: -6px;
    background-image: url(../img/arrow_icon@2x.png?v=20141126-2);
    background-repeat: no-repeat;
    background-size: 100px 100px;
    background-position: -35px -5px;
    content: "";
}

.news_thumb {
    padding: 3px;
    float: left;
}

.news_headline {
    padding: 5px;
    padding-top: 3px;
    padding-bottom: 0px;
}



.news_headline_infobox {
    margin-top: 5px;
}

.news_headline_infobox-icons {
    float:  left;
    padding-top: 6px;
}

.news_headline_infobox-course {
    float:  right;
}


.coco_event_type_headline {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.1;
    font-size: .75rem
}

.coco_event_type_icon {
    font-size: .7rem;
}

.coco_event_type_icon--famous_store {
    border-color: #F10849;
    color: #F10849;
}

.coco_event_type_icon--topic_store {
    border-color: #0D5BB0;
    color: #0D5BB0;
}

.coco_event_type_icon--new_store {
    border-color: #04A45E;
    color: #04A45E;
}


.coco_event_shop h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

.coco_event_shop_name {
    padding-left: 3px;
    font-size: .9rem;
    color: #555;
    line-height: 1.5;
}

.coco_event_shop_area {
    font-size: .6rem;
    color: #666;
}

.coco_event_shop_area__delimiter {
    color: #aaa;
}

.coco_event_course {
    text-align: right;
    padding: 0 5px 0 0;
}

.coco_event_only_price_display {
    font-size: .6rem;
    color: #fff;
    padding: 2px 4px;
    background: #fcaa5d;
    border-radius: 10px;
    vertical-align: 2px;
}

.coco_event_only_price_display--reservation {
    font-size: .6rem;
    color: #6e6bbf;
    padding: 2px 4px;
    background: #efefff;
    border-radius: 10px;
    vertical-align: 2px;
}

.coco_event_time {
    font-weight: 600;
    color: #e88b2e;
}

.coco_event_price_default {
    font-size: .7rem;
    color: #3a3a3a;
}

.coco_event_price {
    font-weight: 600;
    color: #e8534c;
    font-size: .98rem;

}

.coco_event_unit {
    font-size: .7rem;
    color: #3a3a3a;
}


.coco_event_calendar {
    margin-bottom: 1em;
    font-size: 12px;
}

.coco_event_calendar .link_btn {
    margin: .5em auto;
    padding: 7px;
    width: 90%;
    display: block;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #dabca0;
    border-radius: 3px;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
}

.coco_event_calendar a:link,
.coco_event_calendar a:visited {
    color: #947558;
}


.news_info {
    font-size: .6rem;
}

.icon_new {
    font-size: 9px;
    background: #eeac10;
    padding: 1px 5px;
    color: #fff;
    border-radius: 10px;
}

.news_datetime {
    color: #bbb;
}



.spThumbs {
    padding: 3px;
    float: left;
}

.spThumbs img {
    border-radius: 3px;
}

.spInfo {
    padding: 3px;
    line-height: 1.1;
}

.spInfo h4 {
    font-size: 16px;
}

.updateDate {
    text-align: right;
    font-size: 9px;
    color: #ccc;
}

#topBanner h3{
    margin: 0;
    padding: 5px;
    background: #f7eee6;
    color: #683C12;
    font-weight: normal;
}

.topBnBox {
    width: 50%;
    float: left;
}

.topBnBoxCf {
    clear: left;
}

.topBnBox a {
    color: #333;
    text-decoration: none;
    word-break: break-all;
    font-size: 12px;
}

.topBnBox h4 {
    font-size: 14px;
}

.topSpecialJapan {
}

.topSpecialJapan h3 {
    clear: both;
    margin: 0;
    padding: 5px;
    background: #f7eee6;
    color: #683C12;
    font-weight: normal;
}

.topSpecialJapan__thumbs {
    padding: 3px;
    width: 50%;
    max-width: 320px;
    float: left;
}

.topSpecialJapan__thumbs img {
    width: 100%;
    float: left;
    border-radius: 3px;
}

.topSpecialJapan__info {
    padding-right: 30px;
}

.topSpecialJapan__info h4 {
    padding: 7px 0 5px 0;
    margin-bottom: 5px;
    color: #333;
    font-size: 16px;
    border-bottom: 1px solid #eee;
}

.topSpecialJapan__info p {
    color: #666;
    font-size: 12px;
}

.topSpecialJapan a {
    text-decoration: none;
    display: block;
    position: relative;
}

.topSpecialJapan a :after {
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    width: 15px;
    height: 15px;
    margin-top: -6px;
    background-image: url(../img/arrow_icon@2x.png?v=20141126-2);
    background-repeat: no-repeat;
    background-size: 100px 100px;
    background-position: -35px -5px;
    content: "";
}

.topSpecialBanner {
    margin: 20px 5px 0px;
    text-align: center;
    font-size: 11px;
}

.aboutInfo{
    padding: 5px 10px 20px;
    line-height: 1.3;
}



.topSpSogoLink {
    margin: 10px auto 0px;
    padding: 5px 0;
    /* border-top: solid 1px #eee; */
}

.topSpSogoLink h3 {
    clear: both;
    margin: 0;
    padding: 5px;
    background: #f7eee6;
    color: #683C12;
    font-weight: normal;
}

.topSpSogoLink__thumbs {
    padding: 5px;
    width: 50%;
    max-width: 120px;
    float: left;
}

.topSpSogoLink__thumbs img {
    width: 100%;
    float: left;
    border-radius: 3px;
}

.topSpSogoLink__info {
    padding-right: 30px;
}

.topSpSogoLink__info h4 {
    padding: 12px 0 3px 0;
    color: #333;
    font-size: 14px;
}

.topSpSogoLink__info p {
    color: #666;
    font-size: 12px;
}

.topSpSogoLink a {
    text-decoration: none;
    display: block;
    position: relative;
}

.topSpSogoLink a :after {
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    width: 15px;
    height: 15px;
    margin-top: -6px;
    background-image: url(../img/arrow_icon@2x.png?v=20141126-2);
    background-repeat: no-repeat;
    background-size: 100px 100px;
    background-position: -35px -5px;
    content: "";
}


.area_tips {
    overflow: hidden;
    height: 50px;
    width: 100%;
    margin: 0 0 .1em;
    font-size: .8rem;
}

.area_tips_mask {
    height: 4em;
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding: 0 .7em;
}

.area_tips_box {
    display: inline-table;
    max-width: 100%;
}

.area_tips_box_2 {
    display: table-cell;
    width: 100px;
}

.area_tips_box_2 a {
    text-decoration: none;
    color: #444;
}


.area_tips_box_3 {
    border: 1px solid #eee;
    border-radius: 5px;
    margin-right: 5px;
    width: 80px;
    box-shadow: 1px 1px 5px rgba(0,0,0,.05);
}

.area_tips--thumbs {
    float: left;
    width: 35px;
}

.area_tips--thumbs img {
    width: 100%;
    height: 100%;
}

.area_tips--area_name {
    font-size: .75rem;
    vertical-align: baseline;
}


.top_title_type1 {
    clear: both;
    margin: 0;
    padding: 5px;
    background: #f7eee6;
    color: #683C12;
    font-weight: 400;
}

.top_more_btn {
    margin: 10px 20px 30px;
    position: relative;
}

.top_more_btn a {
    display: block;
    /* border: 2px solid #eee; */
    text-align: center;
    padding: 15px;
    border-radius: 25px;
    font-weight: 900;
    text-decoration: none;
    background: #f7f3ef;
    color: #79716a;
}

.top_more_btn a::before{
  content: '';
  width: 8px;
  height: 8px;
  border: 0px;
  border-top: solid 3px #d4cbc2;
  border-right: solid 3px #d4cbc2;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -5px;
}


.thaiPickupTop {
    margin: -5px 5px 10px;
    text-align: center;
}

.thaiPickupTop_thumbs img {
    max-width: 100%;
}

#latest-features2 {
	margin:10px 5px
}
#latest-features2 > ul {
	display: -webkit-flex;
	display: flex;
	-weblit-flex-flow: column nowrap;
	flex-flow: column nowrap;
	gap: 5px;
	max-width: 600px;
	margin: 0 auto
}
#latest-features2 > ul > li img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 1;
	margin: 0 auto
}

/* ----------------------------------------------------------------
 * Global Menu (TOP Page)
---------------------------------------------------------------- */

#contents > nav > ul {
  display: flex;
  -weblit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  width: 100%;
}
#contents > nav > ul > li {
  flex-grow: 1;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2px 0;
  border-bottom: solid 1px #eee;
}
#contents > nav > ul > li:not(:first-child) {
  border-left: solid 1px #eee;
}
#contents > nav > ul > li a {
  display: flex;
  -weblit-flex-flow: column nowrap;
  flex-flow: column nowrap;
  align-items: center;
  align-content: center;
  width: 90px;
  margin: 0 auto;
  padding: 2px 0;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  color: #666;
  text-decoration: none;
}
@media screen and (max-width: 359px) {
  #contents > nav > ul > li a {
    width: 77px;
    font-size: 10px;
  }
}
#contents > nav > ul > li a svg {
  width: 50px;
  height: 24px;
  margin-bottom: 3px;
  fill: #f90;
}
#contents > nav > ul > li a::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: 3px;
}
#contents > nav > ul > li.area a::before {
  background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve"><rect fill="%23ff9900" x="32" y="0" width="16" height="14"/><rect fill="%23ff9900" x="15" y="40" width="13" height="8"/><polygon fill="%23ff9900" points="0,27 0,41 5,41 5,48 12,48 12,27 "/><polygon fill="%23ff9900" points="32,17 32,27 15,27 15,37 31,37 31,48 38,48 38,44 42,44 42,48 48,48 48,17 "/></svg>');
}
#contents > nav > ul > li.new a::before {
  background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve"><path fill="%23ff9900" d="M44,24l3.4-5.34l-5.38-3.34l0.74-6.29l-6.29-0.67l-2.06-5.99L28.45,4.5L24,0l-4.45,4.5l-5.96-2.12l-2.06,5.99L5.24,9.04 l0.74,6.29L0.6,18.66L4,24l-3.4,5.34l5.38,3.34l-0.74,6.29l6.29,0.67l2.06,5.99l5.96-2.12L24,48l4.45-4.5l5.96,2.12l2.06-5.99 l6.29-0.67l-0.74-6.29l5.38-3.34L44,24z M16.47,29.82h-2.89l-4.94-7.98v7.98H5.89V18.18h3.59l4.24,6.66v-6.66h2.75V29.82z M39.94,29.82h-3.33l-2.08-7.58l-2.03,7.58h-3.32L26.1,18.35v2.08h-5.43v2.01h5.04v2.25h-5.04v2.88h5.43v2.25h-8.41V18.18h8.37h0.04 h3.09l1.79,8.01l2.15-8.01h2.99l2.04,8.01l1.87-8.01h3.06L39.94,29.82z"/></svg>');
}
#contents > nav > ul > li.review a::before {
  background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 49 48" style="enable-background:new 0 0 49 48;" xml:space="preserve"><path fill="%23ff9900" d="M24.48,3C9.4,2.83-0.22,10.18,0,21.7C-0.22,33.1,9.22,40.42,24.06,40.39L22.56,46c10.66,0,20.92-6.8,24.77-16.45 c1.12-2.32,1.69-4.95,1.63-7.85C49.19,10.18,39.56,2.83,24.48,3z M26.41,27.56H10.05v-2.89h16.36V27.56z M36.99,18.9H10.05v-2.89 h26.94V18.9z"/></svg>');
}
#contents > nav > ul > li.topics a::before {
  background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 40 48" style="enable-background:new 0 0 40 48;" xml:space="preserve"><polygon fill="%23ff9900" points="40.49,21.6 29.68,21.6 37.58,2.2 15.27,2.2 7.51,28.4 19.87,28.4 19.15,47.79 "/></svg>');
}


/* ----------------------------------------------------------------
* MAP (FLIPSNAP)
---------------------------------------------------------------- */

#areaFlip {
    margin: 0 0 15px;
    padding-top: 5px;
    /* background: #fcfcfc; */
    background: #fff;
    position: relative;
}

#areaFlip h2 {
    padding: 2px 5px;
    background: #f7eee6;
    color: #683C12;
    font-weight: normal;
}

#areaFlip h3 {
    margin: 0;
    padding: 5px;
    background: #f7eee6;
    color: #683C12;
    font-weight: normal;
}

.viewport {
    width: 320px;
    background: #fff;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* for android bugfix */
}

.flipsnap {
    width: 640px; /* 320px(item width) * 2(item count) */
}

.item {
    float: left;
    width: 320px;
    text-align: center;
    padding: 5px 0;
    cursor: pointer;
}

.item a:hover { /* for iOS tap color */
    -webkit-tap-highlight-color: rgba(0, 0, 255, 0.1);
}

/*
#areaFlip .prev{position:absolute;left:0;top:103px;background:url(../img/flick_btn_back.png) 0 0 no-repeat;width:20px;height:63px; background-size: 20px 63px;}
#areaFlip .prev[disabled="disabled"]{background:url(../img/flick_btn_back_off.png) 0 0 no-repeat; background-size: 20px 63px;}
#areaFlip .next{position:absolute;right:0;top:103px;background:url(../img/flick_btn_next.png) 0 0 no-repeat;width:20px;height:63px; background-size: 20px 63px;}
#areaFlip .next[disabled=disabled]{background:url(../img/flick_btn_next_off.png) 0 0 no-repeat; background-size: 20px 63px;}
*/

#areaFlip .prev,
#areaFlip .next {
    position:absolute;
    top:103px;
    width:20px;
    height:63px;
    border: 1px solid #ccc;
    background: -moz-linear-gradient(top, #fff, #eee); /* Firefox用 */
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee)); /* Safari,Google Chrome用 */
}

#areaFlip .prev { left:0;border-left: none; border-radius: 0 5px 5px 0;}
#areaFlip .next { right:0;border-right: none; border-radius: 5px 0 0 5px;}

/* 
 * Androidの古い機種で、
 * CSS3擬似コンテンツで作る矢印がうまく表示されないのでコメントアウト。
#areaFlip .prev:after,
#areaFlip .next:after {
    display: block;
    margin-top: -4px;
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    border-color: #1075BF;
    border-style: solid;
    border-width: 0px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
}

#areaFlip .prev:after {
    left: 6px;
    border-bottom-width: 4px;
    border-left-width: 4px;
}

#areaFlip .next:after {
    left: 3px;
    border-top-width: 4px;
    border-right-width: 4px;
}
*/

#areaFlip .prev:after,
#areaFlip .next:after {
    display: block;
    position: absolute;
    overflow: hidden;
    top: 25px;
    background-image: url(../img/arrow_icon@2x.png?v=20141126-2);
    background-repeat: no-repeat;
    background-size: 100px 100px;
    width: 10px;
    height: 15px;
    content: "";

}

#areaFlip .prev:after {
    left: 4px;
    background-position: -70px -5px;
}

#areaFlip .next:after {
    right: 4px;
    background-position: -85px -5px;
}


#areaFlip .prev[disabled="disabled"],
#areaFlip .next[disabled="disabled"] {background:#ddd;}

#areaFlip .prev[disabled="disabled"]:after {
    background-position: -70px -20px;
}

#areaFlip .next[disabled="disabled"]:after {
    background-position: -85px -20px;
}

/* css3 矢印ver
#areaFlip .prev[disabled="disabled"]:after,
#areaFlip .next[disabled="disabled"]:after {border-color: #fff;}
*/


.pointer {
    text-align: center;
}

.pointer span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: #ccc;
    border: 1px solid #fff;
    /* border: 1px solid #ccc; */
}

.pointer span.current {
    background: #F93;
    border: 1px solid #F93;
}


.areaSearchMapTitle {
    margin-top: 20px;
    padding: 5px 15px;
    color: #777;
    font-weight: 700;
    font-size: .8rem;
}


/*
 *  ニュース・エーサイドバレンタイン
 */
.special_news_pr {
margin-top: 5px;
padding-top: 10px;
    margin-bottom: -10px;
}

.special_news_pr_inner {
}

.special_news_pr h3 {
    clear: both;
    margin: 0;
    padding: 5px;
    background: #f7eee6;
    color: #683C12;
    font-weight: normal;
}

.special_news_pr h3 span {
    margin-left: 2px;
    font-size: 80%;
}


.special_news_pr__thumbs {
    padding: 6px;
    width: 50%;
    max-width: 80px;
    float: left;
}

.special_news_pr__thumbs img {
    width: 100%;
    float: left;
}

.special_news_pr__info {
padding: 10px 5px 5px 5px;
}

.special_news_pr__info h4 {
    padding: 0px 30px 0px 0;
    margin-bottom: 2px;
    color: #333;
    font-size: 14px;
    line-height: 1.1;
}

/*
.special_news_pr p {
    color: #999;
    font-size: 10px;
}
*/

.special_news_pr a {
    text-decoration: none;
    display: block;
    position: relative;
}

.special_news_pr a :after {
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    width: 15px;
    height: 15px;
    margin-top: -6px;
    background-image: url(../img/arrow_icon@2x.png?v=20141126-2);
    background-repeat: no-repeat;
    background-size: 100px 100px;
    background-position: -35px -5px;
    content: "";
}

.souceBy {
    margin-top: 7px;
    color: #999;
    font-size: 12px;
}

.souceBy img {
    vertical-align: -1px;
}



/* ----------------------------------------------------------------
* SEARCH AREA NAME
---------------------------------------------------------------- */

.searchAreaName {
    padding: 10px 10px 30px;
    background: #F8F6F2;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.searchAreaName h4 {
    margin-top: 14px;
    padding: 5px;
    text-shadow: 1px 1px rgba(255, 255, 255, 0.8);
    color: #777;
    font-weight: bold;
}

.searchAreaName + .searchAreaName {
    padding-top: 5px;
    border-top: 1px solid #ddd;
}


.menulists {
    border-radius: 7px;
}

.tapHighlight {
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

.menulists li.touchOn {
    background-color: #E1E1DE;
}

.menulists li:first-child {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.menulists li:last-child {
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    border-bottom: solid 1px #CCC;
}

.menulists li {
    background-color: white;
    font-weight: bold;
    border: solid 1px #CCC;
    border-bottom: none;
}

.menulists li a {
    text-decoration: none;
    color: #1075BF;
    display: block;
    padding: 15px 20px 15px 10px;
    position: relative;
}

.menulists li a.colorGray {
    color: #aaa;
}


.menulists li a:after {
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    width: 10px;
    height: 15px;
    margin-top: -6px;
    background-image: url(../img/arrow_icon@2x.png?v=20141126-2);
    background-repeat: no-repeat;
    background-size: 100px 100px;
    background-position: -55px -20px;
    content: "";
}

.menulists li.areaSelect {
    position: relative;
    text-decoration: none;
    color: #999;
    display: block;
    padding: 15px 20px 15px 10px;
}

.menulists li.areaSelect {
}

.menulists li.areaSelect:after {
    display: block;
    position: absolute;
    top: 50%;
    right: 8px;
    width: 15px;
    height: 15px;
    margin-top: -6px;
    background-image: url(../img/arrow_icon@2x.png?v=20141126-2);
    background-repeat: no-repeat;
    background-size: 100px 100px;
    background-position: -55px -70px;
    content: "";
}


.menulists .list_foot_jobFilter {
    font-size: 11px;
}



.harfmenu {
    border-radius: 7px;
    width: 50%;
}

.harfmenu li.touchOn {
    background-color: #E1E1DE;
}

.harfmenu li:first-child {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.harfmenu li:last-child {
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    border-bottom: solid 1px #CCC;
}

.harfmenu li {
    background-color: white;
    font-weight: bold;
    border: solid 1px #ccc;
    border-bottom: none;
}

.harfmenu li a {
    text-decoration: none;
    color: #1075BF;
    display: block;
    padding: 15px 20px 15px 30px;
    position: relative;
}

.harfmenu li a::before{
  content: '';
  width: 8px;
  height: 8px;
  border: 0px;
  border-top: solid 3px #CCC;
  border-right: solid 3px #CCC;
  -ms-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -5px;
}

.tagmenu {
    display: flex;
    flex-wrap: wrap;
}

.tagmenu li {
    background-color: white;
    font-weight: bold;
    border: solid 1px #eee;
    border-radius: 6px;
    margin: 0 5px 10px 0;
}

.tagmenu li a {
    text-decoration: none;
    color: #1075BF;
    display: inline-block;
    padding: 10px;
    position: relative;
}


.areaSearchChangeAreaState {x
    line-height: 1.3;
}

.areaSearchChangeAreaStateBtnArea ul {
    display: flex;
    flex-wrap: wrap;

}

.areaSearchChangeAreaStateBtnArea ul li {
    width: 25%;
    box-sizing: border-box;
    margin: 3px 0;
}

.areaSearchChangeAreaStateBtnArea ul li:nth-child(5) {
    margin-left: calc((100% - 75%)/2);
}

.areaSearchChangeAreaStateBtnArea ul li a {
    display: block;
    padding: 10px 10px;
    margin: 0 2px;
    text-decoration: none;
    background: #fff;
    border: solid 1px #ccc;
    border-radius: 5px;
    text-align: center;
    box-sizing: border-box;
    color: #1075BF;
    font-weight: bold;
}

.areaSearchChangeAreaStateBtnArea ul li span.active {
    display: block;
    padding: 10px 10px;
    margin: 0 2px;
    text-decoration: none;
    background: #eee;
    border: solid 1px #ccc;
    border-radius: 5px;
    text-align: center;
    box-sizing: border-box;
    color: #999;
    font-weight: bold;
}





/* ----------------------------------------------------------------
エリアページ上部での絞込み（横スクロール）
---------------------------------------------------------------- */
.nav-horizontal {
    overflow: hidden;
    height: 2.8em; /* 可視領域の高さ */
    width: 100%;
    
    margin: 1.2em 0 .1em 0;
    font-size: .8rem;
}
.nav-horizontal .mask {
    height: 4.5em; /* 横スクロールする理屈上の高さ */
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;  /* 慣性スクロール */
    
    box-sizing: border-box;
    padding: 0 .7em;
}
.nav-horizontal .list {
    display: inline-table;
    max-width: 100%;
    margin: 0 auto;
}
.nav-horizontal .list li {
    display: table-cell;
    
    white-space: nowrap;
}

.nav-horizontal .list li a {
    display: block;
    padding: 0 .6em;
    text-decoration: none;
    color: #888;
    border: 1px solid #eee;
    
    margin: 0 .5em 0 0;
    border-radius: 1em;
    
    height: 2em;
    line-height: 2;
}

.nav-horizontal .list li.areaSelect {
    display: block;
    padding: 0 .9em;
    text-decoration: none;
    color: #fff;
    
    margin: 0 .5em 0 0;
    border-radius: 1em;
    background: #EFAC4D;
    border: 1px solid #EFAC4D;
    
    height: 2em;
    line-height: 2;
    
    font-weight: 400;
}

nav.nav-horizontal div.mask {
    /* display: none; */
}






.nav-horizontal2 {
    width: 100%;
    
    margin: 1.2em 0 .1em 0;
    font-size: .8rem;
}
.nav-horizontal2 .mask {
    width: 100%;
    -webkit-overflow-scrolling: touch;  /* 慣性スクロール */
    
    box-sizing: border-box;
    padding: 0 .7em;
}
.nav-horizontal2 .list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 0px;
    max-width: 100%;
    margin: 0 auto 10px;
}
.nav-horizontal2 .list li {
    display: block;
    
    white-space: nowrap;
}

.nav-horizontal2 .list li a {
    display: block;
    padding: 0 .6em;
    text-decoration: none;
    color: #888;
    border: 1px solid #eee;
    
    margin: 0 .5em 0 0;
    border-radius: 1em;
    
    height: 2em;
    line-height: 2;
}

.nav-horizontal2 .list li.areaSelect {
    display: block;
    padding: 0 .9em;
    text-decoration: none;
    color: #fff;
    
    margin: 0 .5em 0 0;
    border-radius: 1em;
    background: #EFAC4D;
    border: 1px solid #EFAC4D;
    
    height: 2em;
    line-height: 2;
    
    font-weight: 400;
}

nav.nav-horizontal2 div.mask {
    /* display: none; */
}





/* 新着ページ上部エリア絞込 */
.new_area_filter {
    margin-top: 6px;
    margin-bottom: 12px;
}

.new_area_filter .list li a {
    color: #666;
    padding: .2em .8em;
    background: #f7f5f4;
}

.new_area_filter .list li.areaSelect {
    padding: .2em .8em;
    font-weight: 600;
}



/* ----------------------------------------------------------------
エリアページ上部での業種絞込み（タブメニュー）
---------------------------------------------------------------- */

.searchFilter {
    padding: 0 5px;
    border-bottom: 2px solid #aaa;
    border-bottom: 2px solid #a79d91;
    
    margin-bottom: .5em;
}

.searchFilter.i-japan {
    border-color: #c0392b;
}

.searchFilter.f-japan {
    border-color: #c0392b;
}

.searchFilter.i-asian {
    border-color: #1E45AE;
}

.searchFilter.f-asian {
    border-color: #1E45AE;
}



.searchFilter ul {
    display: flex;
    
}

.searchFilter ul li {
    flex-direction: row;
    align-items: center;
    align-content: center;
    width: 20%;
    text-align: center;
    padding: 0.1rem 0 .2rem;
    line-height: 1.1;
    font-size: .7rem;
    border: solid 2px #ccc;
    border-bottom: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    
}

.searchFilter ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-weight: 600;
    display: block;
    width: 100%;
    height: 1.4rem;
}



.staff_type_text {
}

.staff_type_text--japanese {
    font-size: .6rem;
    font-weight: 600;

}

.job_type_text {
}

.job_type_text--asian {
    font-size: .6rem;
    font-weight: 600;

}

.s_esthe {
    font-size: .65rem;
    font-weight: 600;
    transform: scale(.8, 1);
    display: inline-block;
    padding: 0;
    margin: 0 0 0 -.3em;
}


.job_type_all {
    position: relative;
    top: 27%;
}


.searchFilter ul li.job_all {
    background-color: #eee;
    border-color: #eee;
}

.searchFilter ul li.job_all a {
    color: #888;
}

.searchFilter ul li.job_asian {
    background-color: #dfe3ef;
    border-color: #dfe3ef;
}

.searchFilter ul li.job_asian a {
    color: #1E45AE;
}


.searchFilter ul li.job_japan {
    background-color: #efdbd9;
    border-color: #efdbd9;
}

.searchFilter ul li.job_japan a {
    color: #c0392b;
}

.searchFilter ul li.searchFilter_is_active {
    background: #eee;
    border: solid 2px #eee;
    border-bottom: none;
    margin-bottom: -2px;
}

.searchFilter ul li.job_all.searchFilter_is_active {
    border-color: #a79d91;
    background: #fff;
}

.searchFilter ul li.job_all.searchFilter_is_active a {
    color: #888;
}

.searchFilter ul li.job_japan.searchFilter_is_active {
    border-color: #c0392b;
    background-color: #fff;
}

.searchFilter ul li.job_japan.searchFilter_is_active a {
    color: #c0392b;
}

.searchFilter ul li.job_asian.searchFilter_is_active {
    border-color: #1E45AE;
    background-color: #fff;
}

.searchFilter ul li.job_asian.searchFilter_is_active a {
    color: #1E45AE;
}


.no_shop_message {
    margin: 30px 30px 30px;
    padding: 15px;
}




/* ----------------------------------------------------------------
AreaList PAGE
---------------------------------------------------------------- */

#areaHead h1 {
    padding: 5px;
    background: #f7eee6;
    color: #683C12;
    font-weight: normal;
}

#areaHead h1 strong {
    font-weight: bold;
}

.pageHeader {
    padding: 5px;
    color: #683C12;
}

.pageHeader__area {
    background: #fff;
}

.pageHeader__area + .searchFilter {
    /* margin-top: .3em; */
}

.pageHeader__area h1 {
    padding: 7px 3px 5px;
    font-weight: 600;
    font-size: 16px;
    color: #444;
    line-height: 1.1;
}

.pageHeader__area h1 span {
    font-weight: 600;
    font-size: .8rem;
}


.shopBox {
    border-bottom: 1px solid #f1f1f1;
    margin-bottom: 18px;
    padding-bottom: 6px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
}

.shopBox h3 {
    margin-bottom: 3px;
    font-size: 18px;
    line-height: 20px;
    word-break: break-all;
    color: #333;
}

.shopBox h3 span.job_name {
    font-size: 15px;
}




/*
.shopBox h3 a {
    text-decoration: none;
}

.shopBox h3 a:link {
    color: #0000EE;
}

.shopBox h3 a:link span {
    color: #B2B2FA;
}

.shopBox h3 a:visited {
    color: #551A8B;
}

.shopBox h3 a:visited span {
    color: #CCBADC;
}




.shopBox p.comment {
    line-height: 1.2;
    word-break: break-all;
}
*/

.sub-text {
    font-size: 11px;
    color: #888;
}

.thumbsBnr {
    float: left;
    width: 60px;
    padding-top: 2px;
    padding-left: 2px;
}

.thumbsBnr a {
}

.thumbsBnr img {
    border-radius: 3px;
}

.thumbsTxt {
    margin-left: 65px;
}

.iconBtn {
    display: inline-block;
    min-width: 35px;
    padding: 2px 2px .04em;
    border-radius: 2px;
    margin-right: 1px;
    font-size: 10px;
    text-align: center;
    border: 1px solid #ccc;
    vertical-align: middle;
}

.iconTypeJob01 { background: #c0392b; border-color: #c0392b; color: #fff;}
.iconTypeJob11 { background: #1E45AE; border-color: #1E45AE; color: #fff;}
.iconTypeJob15 { background: #8c009e; border-color: #8c009e; color: #fff;}
.iconTypeJob21 { background: #477A47; border-color: #477A47; color: #fff;}

/*
  韓国アイコン・テスト
*/
.iconTypeJob12_1 { background: #0047a0; border-color: #0047a0; color: #fff;}
.iconTypeJob12_2 { background: #0005a0; border-color: #0005a0; color: #fff;}
.iconTypeJob12_3 { background: #4c00a0; border-color: #4c00a0; color: #fff;} /* 268 */
.iconTypeJob12_4 { background: #8000a0; border-color: #8000a0; color: #fff;} /* 288 */
.iconTypeJob12_5 { background: #006ca0; border-color: #006ca0; color: #fff;}

.iconTypeJob12_6 { background: #57009e; border-color: #57009e; color: #fff;} /* 273 */
.iconTypeJob12_7 { background: #64009e; border-color: #64009e; color: #fff;} /* 278 */
.iconTypeJob12_8 { background: #71009e; border-color: #71009e; color: #fff;} /* 283 */
.iconTypeJob12_9 { background: #8000a0; border-color: #8000a0; color: #fff;} /* 288 */
.iconTypeJob12_10 { background: #8c009e; border-color: #8c009e; color: #fff;} /* 293 */
.iconTypeJob12_11 { background: #99009e; border-color: #99009e; color: #fff;} /* 298 */
.iconTypeJob12_12 { background: #9e0096; border-color: #9e0096; color: #fff;} /* 298 */

.iconTypeShop { background: #FFBC00; border-color: #FFBC00; color: #333;}
.iconTypeNuki { background: #CCFF66; border-color: #CCFF66; color: #030;}

/* 背景色のみ 
.iconTypeSexual01  { background: #CCFF66; border-color: #CCFF66; color: #00661A;}
.iconTypeSexual11 { background: #FFC1E4; border-color: #FFC1E4; color: #660066;}
*/

/* うすい背景、ボーダー
.iconTypeSexual01  { background: #F0FBF0; border-color: #2DAC2D; color: #2DAC2D;}
.iconTypeSexual11 { background: #FFF0F5; border-color: #FF4280; color: #FF4280;}
*/


/* 白背景、ボーダー
.iconTypeSexual01  { background: #fff; border-color: #2DAC2D; color: #2DAC2D;}
.iconTypeSexual11 { background: #fff; border-color: #FF4280; color: #FF4280;}
*/

/* 白背景、ボーダーなし
.iconTypeSexual01  { background: #fff; border-color: #fff; color: #2DAC2D; min-width: 3em;}
.iconTypeSexual11 { background: #fff; border-color: #fff; color: #FF4280; min-width: 3em;}
*/


/* 白背景、ボーダー 横あわせ 
.iconTypeSexual01  { background: #fff; border-color: #2DAC2D; color: #2DAC2D; min-width: 3em;}
.iconTypeSexual11 { background: #fff; border-color: #FF4280; color: #FF4280; min-width: 3em;}
*/

/* うすい背景（さらに薄い）、ボーダー 横あわせ 
.iconTypeSexual01  { background: #F9FDF9; border-color: #2DAC2D; color: #2DAC2D; min-width: 3em;}
.iconTypeSexual11 { background: #FFFBFC; border-color: #FF4280; color: #FF4280; min-width: 3em;}
*/

/* 濃い背景、ボーダーなし 白文字 横あわせ */
.iconTypeSexual01  { background: #2DAC2D; border-color: #2DAC2D; color: #fff;}
.iconTypeSexual11 { background: #FF4280; border-color: #FF4280; color: #fff;}



.iconTypeJob01,
.iconTypeJob11,
.iconTypeJob12_1,
.iconTypeJob12_2,
.iconTypeJob12_3,
.iconTypeJob12_4,
.iconTypeJob12_5,
.iconTypeJob12_6,
.iconTypeJob12_7,
.iconTypeJob12_8,
.iconTypeJob12_9,
.iconTypeJob12_10,
.iconTypeJob12_11,
.iconTypeJob12_12,
.iconTypeJob15,
.iconTypeJob21,
.iconTypeShop,
.iconTypeNuki,
.iconTypeSexual11,
.iconTypeSexual01  { border: none; }

/*
.iconTypeSexual11,
.iconTypeSexual01 { background: #fff;}
*/


.areapoint {
}

.shopText {
    line-height: 1.4;
}

.tel {
    font-weight: bold;
    font-size: 15px;
    color: #666;
}

.tel a {
    color: #1075BF;
}

.opening {
    color: #666;
}


.shopMenu {
    color: #666;
}

.shopMenu a {
    color: #1075BF;
}




#pagerNavi {
    padding: 10px 0 30px;
    font-size: 17px;
    font-weight: bold;
    line-height: 1.8;
    text-align: center;
}

#pagerNavi span.noImg {
    width: 85px;
    display: inline-block;
    color: #ccc;
    background: #f9f9f9;
    border: 3px solid #eee;
    border-radius: 3px;
}

#pagerNavi a {
    padding: 7px 20px;
    background: #417FEC;
    color: white;
    /* border: 1px solid #417FEC; */
    border-radius: 3px;
}


.btn {
    display: block;
    margin: 0 auto;
    text-align: center;
    width: 80%;
    padding: 8px;
    font-weight: bold;
}

.whiteBtn {
    border: 1px solid #CCC;
    color: #555;
    background: linear-gradient(to bottom, #FEFEFE 0%, #E3E3E3 100%);
    text-shadow: 0 2px 0 white;
    border-radius: 5px;
    text-decoration: none;
}

.pageBottom {
    padding: 20px;
}





.shop_now_state {
    text-align: center;
    background: #DA4336;
    border: 1px solid #DA4336;
    border-radius: 3px;
    color: #fff;
    padding: 3px 5px;
    font-size: .92rem;
}




.lineSearchTitle {
    margin: 5px 3px 10px;
    font-size: 18px;
}






/* ----------------------------------------------------------------
NewList PAGE
---------------------------------------------------------------- */

#newlist {
    margin-top: 5px;
    margin-bottom: 20px;
}

#newlist h3 {
    margin-top: 5px;
    padding: 5px 8px;
    text-shadow: 1px 1px rgba(255, 255, 255, 0.8);
    background: #f7f3ef;
    color: #988470;
    font-weight: bold;
    font-size: 12px;
}

.newlist li {
    background-color: white;
    border-top: solid 1px #eee;
}

.newlist li:last-child {
    border-bottom: none;
}

.newlist li:nth-child(even) {
    background-color: #fefefe;
}

.newlist li a {
    text-decoration: none;
    display: block;
    position: relative;
}

.newsBox {
    display: flex;
    max-width: 100%;
    padding: 2px 2px 0 5px;
}

.newsBoxShopInfo {
    flex-grow: 1;
}

.newsBoxShopKeep {
    width: 50px;
    padding-top: 5px;
}

.newsBox .thumbsBnr {
    width: 46px;
}

.newsBox h4 {
    margin-top: 5px;
    margin-bottom: -3px;
    color: #1075BF;
    line-height: 1.1;
}

.newsBox h4 span {
    color: #999;
    font-weight: normal;
    font-size: 12px;
}


.newsBoxText {
    padding: 0 0 3px 0;
    line-height: 1.4;
}


.newsBox .iconBtn { font-size: 9px;}

.newsBox .iconTypeJob01 { background: #F5D6D2; color: #D57777;}
.newsBox .iconTypeJob11 { background: #EEF2FD; color: #9397D8;}
.newsBox .iconTypeJob15 { background: #F2E3F4; color: #A76FAD;}
.newsBox .iconTypeJob21 { background: #DFECDF; color: #739D76;}

.newsBox .iconTypeShop { background: #F9F0D8; color: #C2886F;}
.newsBox .iconTypeNuki { background: #EDF9D5; color: #8CBE8C;}

.newsBox .iconTypeSexual01  { background: #EDF9D5; color: #84b284;} /* 8CBE8C -> 84b284 -> 7ca57c */
.newsBox .iconTypeSexual11 { background: #ffe8ef; color: #D57777;}

/*
.iconTypeSexual01  { background: #2DAC2D; border-color: #2DAC2D; color: #fff; min-width: 3em;}
.iconTypeSexual11 { background: #FF4280; border-color: #FF4280; color: #fff; min-width: 3em;}
*/

.sp__tel__info {
    font-size: 9px;
    color: #8c5015;
    font-weight: 300;
}

.newlist .newsBox .keep span {
  display: flex;
  -weblit-flex-flow: column nowrap;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  font-size: 10px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
.newlist .newsBox .keep span::before {
  font-size: 16px;
}



/* ----------------------------------------------------------------
* MAP PAGE
---------------------------------------------------------------- */




.shopInfo {
    margin: 0 0 10px 0;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 11px;
}

.shopInfo th,
.shopInfo td {
    padding: 10px 5px;
    border: 1px solid #e1e1e1;
    
}

.shopInfo th {
    font-weight: normal;
    text-align: right;
    width: 70px;
    border-left: none;
    background: #fcfcfc;
    color: #888;
}

.shopInfo td {
    text-align: left;
    border-right: none;
}

.shopName a {
    font-weight: bold;
    font-size: 15px;
    color: #1075BF;
}



.shopInfoBox {
    line-height: 1.3;
}

.shopInfoBox h3 {
    margin: 0;
    padding: 5px;
    background: #f7eee6;
    color: #683C12;
    font-weight: normal;
}

.shopNameRow th,
.shopNameRow td {
    vertical-align: middle;
}

.shopInfo .shopName {
    display: flex;
    align-items: center;
}

.shopInfo .shopName .shopNameBox {
    flex: 1;
    line-height: 1.3;
}

.shopInfo .shopName .keep {
    width: 46px;
}

.shopInfo .shopName .keep span {
  display: flex;
  -weblit-flex-flow: column nowrap;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  font-size: 10px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.shopInfo .shopName .keep span::before {
  font-size: 16px;
}

.mapSmall {
    margin: 1px auto 5px;
    width: 100%;
    height: 250px;
}

.mapLarge {
    width: 100%;
}

.mapInfo {
    margin: 0 auto 10px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #bbb;
    width: 90%;
    font-size: 13px;
}

.shopInfoBox_supportForm {
    margin: 3px;
    padding: 3px 10px;
    font-size: 10px;
    color: #666;
    line-height: 1.3;
}

.shopInfoBox_supportForm a {
    color: #1075BF;
    text-decoration: none;
}


.address_box {
    display: flex;
}

.address_info {
    flex: 1;
    padding: 3px 0;
}

.address_icon {
    width: 46px;
}

.address_icon a {
  text-decoration: none;
}

.map_btn {
  color: #1075BF;
  -webkit-tap-highlight-color: transparent;
  
  display: flex;
  -weblit-flex-flow: column nowrap;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  font-size: 10px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  line-height: 1.1;
  border: 1px solid #c6cfd5;
}
.map_btn::before {
  content: "\f5a0";
  display: inline-block;
  margin: 2px 0;
  font-size: 16px;
  font-weight: 600;
  font-family: "Font Awesome 5 Free";
  color: #1075BF;
}




/* ----------------------------------------------------------------
* TOP PAGE
---------------------------------------------------------------- */

.enterLogo {
    text-align: center;
    box-sizing: border-box;
    padding: 0;
    margin: 15px 15px 25px;
}

.enterLogo img {
    width: 100%;
    box-sizing: border-box;
}

.enterBtn a {
    display: block;
    margin: 20px;
    padding: 3px;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;
    color: white;
    border-radius: 5px;
    background: #f90;
    background: #ff8000;
/*
    background-image: linear-gradient(left top, #fa1 0%, #fa1 50%, #f90 50%, #f90 100%);
*/
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.enterBtn span {
    display: block;
    padding: 20px 10px;
    border: 1px solid #fcc;
    border-radius: 5px;
    text-align: center;
    line-height: 1.1;
}

.enterBtn span span {
    display: inline;
    border: none;
    font-size: 13px;
}


.enterArea {
    margin: 5px 20px 25px;
    line-height: 1.3;
}

.enterBtnArea ul {
    display: flex;
    flex-wrap: wrap;

}

.enterBtnArea ul li {
    width: 25%;
    box-sizing: border-box;
    margin: 3px 0;
}

.enterBtnArea ul li:nth-child(5) {
    margin-left: calc((100% - 75%)/2);
}

.enterBtnArea ul li a {
    display: block;
    padding: 10px 10px;
    margin: 0 2px;
    text-decoration: none;
    background: #FFC246;
    background: #f90;
    background: #ff8000;
    border-radius: 15px;
    text-align: center;
    box-sizing: border-box;
    font-size: 15px;
    color: #fff;
    font-weight: bold;
}

/* ----------------------------------------------------------------
* BBS PAGE (POST)
---------------------------------------------------------------- */

#formContainer {
    margin :10px;
}

#formWapper {
    padding: 0 10px 0;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#formTitle {
    text-align: left;
}

.formSec {
    font-size: 14px;
    margin-top: 10px;
}

.formSec > .named {
    font-weight: bold;
}

.formSec > .spacing {
    font-weight: bold;
    letter-spacing: -0.1em;
}

.inputTextCont {
    text-align: right;
}

.input_area {
    width: 100%; /* 96 */
    box-sizing: border-box;
    font-size: 16px;
    padding: 5px 8px;
    border: 1px solid #bbb;
    border-radius: 8px;
    -webkit-appearance: none; 
}

#comment_area {
    width: 100%; /* 98 */
    box-sizing: border-box;
    font-size: 16px;
    padding: 5px 8px;
    border: 1px solid #bbb;
    border-radius: 8px;
    -webkit-appearance: none; 
}

#submit_bbs {
    margin-top: 10px;
    margin-bottom: 15px;
    text-align: center;
}

#buttonSubmit {
    min-width: 70px;
    height: 30px;
}

#buttonSubmit[disabled] {
    pointer-events: none;
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}

.post_complete {
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
}

.post_complete--success {
    background: #d1f3d8;
    color: #3b9011;
}

.post_complete--warning {
    background: #fff3cd;
    color: #856404;
}

.post_notes--warning {
    font-size: 11px;
    margin-top: 5px;
}

.bbsBtn {
    border: 1px solid #E9B423;
    background: #E9B423;
    color: #fff;
    border-radius: 5px;
}




/* ----------------------------------------------------------------
* ACCORDION MENU
---------------------------------------------------------------- */

#arealistZenkoku {
    width: 100%;
    background-color: #fff;
    border: solid 1px #ccc;
    box-sizing: border-box;
    border-radius: 7px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#arealistZenkoku li {
    display: block;
    width: 50%;
    font-weight: bold;
    color: #1075BF;
    position: relative;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    border-right: 1px solid #ccc;
    position: relative;
}

#arealistZenkoku li a {
    padding: 15px 20px 15px 10px;
    display: block;
    width: 100%;
    text-decoration: none;
    color: #1075BF;
    box-sizing: border-box;
}

#arealistZenkoku li:nth-child(even) {
    border-right: none;
}

#arealistZenkoku li:nth-child(1) {
    border-top-left-radius: 7px;
}

#arealistZenkoku li:nth-child(2) {
    border-top-right-radius: 7px;
}

#arealistZenkoku li:nth-last-child(2) {
    border-bottom-left-radius: 7px;
    border-bottom: 0px;
}

#arealistZenkoku li:nth-last-child(1) {
    border-bottom-right-radius: 7px;
    border-bottom: 0px;
}

#arealistZenkoku li a:before {
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    background-image: url(../img/arrow_icon@2x.png?v=20141126-2);
    background-repeat: no-repeat;
    background-size: 100px 100px;
    background-position: -55px -22px;
    content: "";
}


/* ----------------------------------------------------------------
* 404
---------------------------------------------------------------- */

#err h1 {
    padding: 20px 0 0 20px;
    line-height: 1.3;
}

#err p{
    padding: 20px;
    line-height: 1.3;
}


/* ----------------------------------------------------------------
利用規約/プライバシーポリシー
---------------------------------------------------------------- */

.contents p {
    padding: 5px;
    line-height: 1.3;
}

.contents h2 {
    padding: 5px;
    background: #f7eee6;
    color: #683C12;
    font-weight: 700;
}
.contents h3 {
    margin-top: 10px;
    padding: 5px;
    background: #f7eee6;
    color: #683C12;
    font-weight: 700;
}

.contents ul.app_btn {
    margin: 10px auto;
    width: 90%;
    text-align: center;
}

.contents li.app_btn_info {
    margin: 15px auto;
    width: 90%;
    display: block;
    background: -moz-linear-gradient(top,#FFAA44, #FFAA44 50%,#FF9933 50%,#FF9933);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFAA44), color-stop(0.5,#FFAA44), color-stop(0.5,#FF9933), to(#FF9933));
    color: #FFF;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #FC0;
    font-weight: bold;
}

.contents li.app_btn_info a{
    display: block;
    color: #FFF;
    padding: 10px;
}

.guide_list {
    width: 90%;
    margin: 10px auto 20px;
    padding: 10px;
    line-height: 1.8;
    background-color: #F3F3F3;
    border-radius: 3px;
    font-size: 12px;
}

.guide_list dt {
}

.guide_list dd {
    border-bottom: none;
    text-indent: 0em;
    padding-left: 1em;
}


/* ----------------------------------------------------------------
  ページ内テキスト
---------------------------------------------------------------- */

#about {
  padding: 8px 12px 16px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 6px;
  margin-top: 10px;
}

#about.arealist {
  margin: 10px;
  padding: 8px 12px 16px;
  border: solid 1px #ccc;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 6px;
}

#about h4 {
  margin: 5px 0;
  border-bottom: solid 1px #776540;
  font-size: 13px;
  line-height: 1.0;
  letter-spacing: 1px;
  color: #776540;
}

#about h4 strong {
  display: inline-block;
  font-size: 1.2em;
}

#about h4 strong:first-child:first-letter {
  font-size: 1.2em;
}

#about-site {
  margin-top: 20px;
  margin-bottom: 20px;
}

#about-site section {
  padding: 10px;
}

#about-site strong {
  font-weight: bold;
  color: #666;
}

#about-site h3 {
  padding: 5px;
  background: #f7eee6;
  font-weight: 400;
  color: #683C12;
}

#about-site h4 {
  margin-bottom: 5px;
  padding: 0 0 1px 1px;
  border-bottom: solid 1px #555;
  color: #555;
}

#about-site h4::first-letter {
  font-size: 1.3em;
}

#about-site p {
  margin: 0 3px;
  line-height: 1.5;
  color: #555;
}

#about-site p:not(:last-child) {
  margin-bottom: 10px;
}

#about-site section > section {
  padding: 5px 5px 10px;
}

#about-site h5 {
  display: flex;
  -weblit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  align-items: center;
  align-content: center;
  margin-bottom: 5px;
}

#about-site h5::before {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-right: 5px;
  border-style: solid;
  border-width: 0 2px 2px 0;
  border-color: transparent #555 #555 transparent;
  transform: rotate(45deg) translate(-12.5%, -25%);
}




/* ----------------------------------------------------------------
  overlay
---------------------------------------------------------------- */

#overlay {
  display: flex;
  -weblit-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 100000;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity linear 0.1s;
}

#overlay.active {
  opacity: 1;
}

#overlay .popup {
  display: flex;
  -weblit-flex-flow: column nowrap;
  flex-flow: column nowrap;
  justify-content: space-around;
  position: relative;
  align-items: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 320px;
  padding: 20px 10px;
  background-color: #fff;
  opacity: 0;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  transition: opacity linear 0.1s;
}

#overlay .popup.active {
  opacity: 1;
}

@media screen and (max-width: 330px) {
  #overlay .popup {
    width: 300px;
  }
}

#overlay .popup > div {
  text-align: center;
  font-size: 14px;
  color: #333;
}

#overlay .popup > div.message {
  line-height: 1.3;
  font-weight: bold;
}

#overlay .popup > div.message small {
  display: block;
  margin-top: 2px;
  text-align: center;
  font-size: 12px;
  font-weight: normal;
}

#overlay .popup > div.buttons {
  display: flex;
  -weblit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  justify-content: center;
  margin-top: 20px;
}

#overlay .popup > div.buttons button {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 40px;
  margin: 0 10px;
  border: none;
  font-size: 14px;
  font-weight: bold;
}

#overlay .popup > div.buttons button.ok {
  background-color: #ff9933;
  color: #fff;
}

#overlay .popup > div.buttons button.cancel {
  background-color: #e3e3e3;
  color: #333;
}

#overlay .popup a.tel {
  display: flex;
  -weblit-flex-flow: column nowrap;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: max-content;
  height: max-content;
  min-width: 120px;
  min-height: 26px;
  margin-top: 15px;
  padding: 7px 10px;
  background-color: #ff9933;
  color: #fff;
  text-decoration: none;
}

#overlay .popup .loader {
  display: flex;
  -weblit-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: -40px;
}

#overlay .popup .loader:after {
  display: block;
  font-size: 26px;
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
}

#overlay .popup .loader.read:after {
  content: "\f252";
  animation: 2s linear infinite spin;
}

#overlay .popup .loader.write:after {
  content: "\f5ad";
}

#overlay .popup.prenote {
  height: max-content;
}

#overlay .popup.prenote > div.message {
  font-size: 14px;
  font-weight: normal;
}

#overlay .popup.prenote > div.message dl {
  max-height: 60vh;
  margin: 10px 0;
  overflow: auto;
  text-align: left;
}

#overlay .popup.prenote > div.message dl dt {
  font-weight: bold;
}

#overlay .popup.prenote > div.message dl dd {
  margin: 2px 5px 10px;
  font-size: 16px;
}

#overlay .popup .close {
  display: block;
  position: absolute;
  right: 3px;
  top: 3px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  border-radius: 50%;

}

#overlay .popup .close::before,
#overlay .popup .close::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 70%;
  background-color: #ccc;
}

#overlay .popup .close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

#overlay .popup .close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@keyframes spin {
  0% {
    transform: rotateX(0) rotateY(0);
  }
  24% {
    transform: rotateX(180deg) rotateY(0);
  }
  25% {
    transform: rotateX(180deg) rotateY(0);
  }
  49% {
    transform: rotateX(180deg) rotateY(180deg);
  }
  50% {
    transform: rotateX(180deg) rotateY(180deg);
  }
  74% {
    transform: rotateX(360deg) rotateY(180deg);
  }
  75% {
    transform: rotateX(360deg) rotateY(180deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}




/* ----------------------------------------------------------------
  overlay tel
---------------------------------------------------------------- */
#overlay.tel-modal .popup {
  padding: 20px 10px 22px;
}
#overlay.tel-modal .popup .message {
  position: relative;
  margin-bottom: 20px;
  font-size: 13px;
  color: #333;
}
#overlay.tel-modal .popup .message strong {
  display: flex;
  -weblit-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: max-content;
  height: max-content;
  margin: 5px 0;
  padding: 2px 0 2px 5px;
  background-image: linear-gradient(to bottom, transparent 0 60%, rgba(255, 153, 0, 0.5) 50% 100%);
  font-size: 18px;
  line-height: 1.0;
  color: #ff4433;
  text-shadow: 1px 1px rgba(255, 255, 255, 0.5), 1px -1px rgba(255, 255, 255, 0.5), -1px 1px rgba(255, 255, 255, 0.5), -1px -1px rgba(255, 255, 255, 0.5);
}
#overlay.tel-modal .popup .message span {
  margin-right: 5px;
  margin-top: 2px;
  font-size: 14px;
  color: #333;
}
#overlay.tel-modal .popup > .telto {
  display: flex;
  -weblit-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: center;
  position: relative;
  margin-bottom: 5px;
  line-height: 1.2;
  font-weight: bold;
  color: #663d00;
}
#overlay.tel-modal .popup > .telto strong::before {
  content: "「";
}
#overlay.tel-modal .popup > .telto strong::after {
  content: "」";
}
#overlay.tel-modal .popup a.tel {
  margin: 0 auto;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}
#overlay.tel-modal .popup a.tel > span {
  display: flex;
  -weblit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#overlay.tel-modal .popup a.tel > span.tel-number {
  font-size: 16px;
}
#overlay.tel-modal .popup a.tel > span.tel-number::before {
  content: "\f879";
  margin-right: 3px;
  font-family: "Font Awesome 5 Free";
}
#overlay.tel-modal .popup a.tel > span.tel-number::before {
  font-size: 15px;
}





/* ----------------------------------------------------------------
  List
---------------------------------------------------------------- */

.shopLists {
  padding: 10px 0;
}

.areaList {
  padding: 0 15px 0 10px;
}
@media screen and (max-width: 360px) {
  .areaList {
    padding: 0 7px;
  }
}
.areaList .shopBox2 {
  display: flex;
  -weblit-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: space-between;
  position: relative;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: solid 1px #ddd;
}
.areaList .shopBox2.new h3::before {
  content: "新着";
  display: inline-flex;
  align-items: center;
  width: max-content;
  vertical-align: top;
  background-color: rgb(255, 0, 0);
  font-size: 11px;
  font-weight: bold;
  color: rgb(255, 255, 255);
  padding: 3px;
  border-radius: 3px;
  position: relative;
  top: -2px;
}
.areaList .shopBox2 h3 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding-right: 45px;
  margin-bottom: 7px;
  font-size: 17px;
  line-height: 1.1;
}
.areaList .shopBox2 h3 .job_name {
  margin-left: 3px;
  font-size: 14px;
}
.areaList .shopBox2 .keep {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
}
.areaList .shopBox2 .keep span {
  display: flex;
  -weblit-flex-flow: column nowrap;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  font-size: 10px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
.areaList .shopBox2 .keep span::before {
  font-size: 16px;
}
.areaList .shopBox2 .thumbs {
  width: 55px;
}
.areaList .shopBox2 .thumbs a {
  display: block;
}
.areaList .shopBox2 .thumbs a img {
  display: block;
  width: 55px;
  height: 66px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.areaList .shopBox2 .data {
  display: flex;
  -weblit-flex-flow: row wrap;
  flex-flow: row wrap;
  align-items: center;
  width: -webkit-calc(100% -  55px  - 5px);
  width: calc(100% -  55px  - 5px);
}
.areaList .shopBox2 .data .jobIcon {
  display: flex;
  -weblit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  width: 100%;
  margin-bottom: 7px;
}
.areaList .shopBox2 .data .jobIcon > span {
  display: flex;
  -weblit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  height: 15px;
  padding: 1px 2px;
  margin-right: 1px;
  font-size: 10px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
.areaList .shopBox2 .data .areapoint,
.areaList .shopBox2 .data .opening {
  margin-bottom: 7px;
  white-space: nowrap;
}
.areaList .shopBox2 .data .areapoint::before,
.areaList .shopBox2 .data .opening::before {
  display: inline-block;
  margin-right: 2px;
  font-size: 0.85em;
  font-family: "Font Awesome 5 Free";
}
.areaList .shopBox2 .data .areapoint {
  min-width: max-content;
  margin-right: 10px;
  padding-right: 10px;
  border-right: solid 1px #eee;
}
.areaList .shopBox2 .data .areapoint::before {
  content: "\f238";
  font-weight: 900;
  color: #3e90b9;
  position: relative;
  top: -1px;
}
.areaList .shopBox2 .data .opening::before {
  content: "\f017";
  font-weight: 400;
  color: #3e90b9;
  position: relative;
  top: -1px;
}
.areaList .shopBox2 .data .comment {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 7px;
  padding: 5px 10px;
  background-color: #F8F6F2;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.4;
}
.areaList .shopBox2 .data .shopMenu {
  display: flex;
  -weblit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  align-items: center;
  width: 100%;
}
.areaList .shopBox2 .data .shopMenu > li {
  align-self: stretch;
  display: flex;
  -weblit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  align-items: center;
  margin-right: 4px;
}
.areaList .shopBox2 .data .shopMenu > li:not(:first-child)::before {
  content: "-";
}
.areaList .shopBox2 .data .shopMenu > li:not(:first-child) a {
  margin-left: 5px;
}
.areaList .shopBox2 .data .shopMenu > li a {
  display: flex;
  -weblit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: max-content;
  height: 100%;
  height: 22px;
  font-size: 13px;
  white-space: nowrap;
  -webkit-border-radius: 13px;
  border-radius: 13px;
  -webkit-tap-highlight-color: transparent;
}
.areaList .shopBox2 .data .shopMenu > li a.tel {
  padding: 0 8px;
  background-color: #fff;
  border: solid 1px #c6cfd5;
  font-size: 14px;
  text-decoration: none;
  opacity: 0.2;
}
.areaList .shopBox2 .data .shopMenu > li a.tel::before {
  content: "\f879";
  display: inline-block;
  margin-right: 2px;
  margin-top: 1px;
  font-size: 0.8em;
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
}
@media screen and (max-width: 360px) {
  .areaList .shopBox2 .data .shopMenu > li {
    margin-right: 2px;
  }
  .areaList .shopBox2 .data .shopMenu > li:not(:first-child) a {
    margin-left: 2px;
  }
  .areaList .shopBox2 .data .shopMenu > li a {
    font-size: 12px;
  }
  .areaList .shopBox2 .data .shopMenu > li a.tel {
    font-size: 12px;
  }
  .areaList .shopBox2 .data .shopMenu > li a.tel::before {
    margin-right: 2px;
  }
}
.areaList .shopBox2 .data .demand {
  margin-left: 4px;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.1;
}
.areaList .shopBox2.free .data {
  width: 100%;
}
.user_keep {
  background-color: #fff;
  color: #bbb;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.1;
}
.user_keep::before {
  content: "\f005";
  display: inline-block;
  margin: 2px 0;
  font-size: 13px;
  font-family: "Font Awesome 5 Free";
}
.user_keep.has_keep {
  color: #f60;
}
.user_keep.has_keep::before {
  font-weight: 900;
}
.user_keep.not_keep::before {
  font-weight: 400;
}
.user_keep.action {
  animation: action 0.2s;
}
@keyframes action {
  0% {
    transform: scale(1.1);
  }
  33% {
    transform: scale(0.9);
  }
  66% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.shop_coco {
    box-sizing: border-box;
    margin: 10px 0 0;
    width: 100%;
    background: #fff;
    border: 2px solid #01B3BF; 
    border-radius: 3px;
}

.shop_coco h4 {
    background: #01B3BF;
    color: #fff;
    padding: 3px;
}

.shop_coco h4 span {
    font-size: 10px;
}


/* ----------------------------------------------------------------
  Keep-List
---------------------------------------------------------------- */

.keep_list_header_title {
    clear: both;
    margin: 0;
    padding: 5px;
    background: #f7eee6;
    color: #683C12;
    font-weight: normal;
}

.keep_list_header_title span {
    margin-left: 2px;
    font-size: 80%;
}

.keep_note {
    margin: 10px;
    padding: 10px;
    color: #666;
    border-radius: 6px;
    background: #f9f9f9;
    font-size: 11px;
    line-height: 1.3;
}



/* ----------------------------------------------------------------
  パンくずリスト
---------------------------------------------------------------- */

.breadcrumbs {
  z-index: 1;
  width: calc(100vw - calc(100vw - 100%));
  margin-top: 10px;
  overflow-x: auto;
  border-top: solid 1px #eee;
}
.breadcrumbs::-webkit-scrollbar {
  display: none;
  -webkit-appearance: none;
}
.breadcrumbs.bottom {
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
}
.breadcrumbs ol {
  display: -webkit-flex;
  display: flex;
  -weblit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  position: relative;
  list-style: none;
}
.breadcrumbs ol li {
  color: #666;
}
.breadcrumbs ol li:nth-of-type(1) {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  top: 0;
  z-index: 10;
}
.breadcrumbs ol li:nth-of-type(1) a {
  background-color: #fff;
}
.breadcrumbs ol li:nth-of-type(1) a::after {
  background-color: #fff;
}
.breadcrumbs ol li > a,
.breadcrumbs ol li > span {
  display: -webkit-flex;
  display: flex;
  -weblit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  position: relative;
  width: max-content;
  height: 24px;
  padding: 0 5px 0 15px;
  font-size: 11px;
  white-space: nowrap;
  color: #777;
  text-decoration: none;
}
.breadcrumbs ol li:last-child {
  padding-right: 10px;
}
.breadcrumbs ol li:not(:last-child) > a::after {
  content: "";
  position: absolute;
  right: -9px;
  top: 4.5px;
  width: 14px;
  height: 14px;
  border-right: solid 1px #ddd;
  border-top: solid 1px #ddd;
  transform: rotate(45deg) skew(10deg, 10deg);
}