@charset "UTF-8";
html {
  font-size: 62.5%; }

.footer__sesa {
  max-width: 100vw; }

#view_cafe {
  background: white;
  position: relative;
  width: 1024px;
  margin: auto;
  font-size: 1.4rem;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Noto Serif JP", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 500; }
  #view_cafe *,
  #view_cafe *::before,
  #view_cafe *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    word-break: normal;
    word-wrap: break-word;
    -webkit-text-size-adjust: 100%; }
  #view_cafe h1, #view_cafe h2, #view_cafe h3, #view_cafe h4 {
    font-weight: bold;
    margin-top: 1.33rem;
    margin-bottom: 1.33rem; }
  #view_cafe a {
    text-decoration: none;
    color: #333;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease; }
    #view_cafe a:hover {
      opacity: 0.7;
      text-shadow: none;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all  0.3s ease; }
      #view_cafe a:hover img {
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all  0.3s ease;
        opacity: .7; }
  #view_cafe .pc {
    display: block !important; }
  #view_cafe .sp {
    display: none; }
  #view_cafe video,
  #view_cafe img {
    max-width: 100%;
    height: auto; }
  #view_cafe .banner {
    margin: 50px 0 20px;
    padding: 10px;
    display: flex;
    flex-wrap: wrap; }
    #view_cafe .banner img {
      background: #FFF;
      width: 100%; }
    #view_cafe .banner a {
      font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
      background: #C30D23;
      width: 100%;
      position: relative;
      text-align: center;
      text-decoration: none;
      font-weight: bold;
      font-size: 2.0rem;
      border-radius: 50px;
      padding: 20px;
      margin: 20px 0;
      color: #FFF; }
      #view_cafe .banner a:before {
        content: '';
        border-radius: 50px;
        position: absolute;
        width: calc(100% - 7px);
        height: calc(100% - 7px);
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        border: 2px solid #FFF; }
  #view_cafe .article_section__images__slides .slick-list {
    width: 100%;
    border: 2px solid white; }
    #view_cafe .article_section__images__slides .slick-list li img {
      width: 100%; }
  #view_cafe .article_section__images__slides .slide-arrow.slick-arrow {
    display: inline;
    position: absolute;
    top: 47%;
    z-index: 2; }
    #view_cafe .article_section__images__slides .slide-arrow.slick-arrow.prev-arrow {
      left: 5%; }
    #view_cafe .article_section__images__slides .slide-arrow.slick-arrow.next-arrow {
      right: 5%; }
  #view_cafe .article_section__images__slides-nav {
    display: block;
    flex-wrap: wrap;
    margin: 3px 0;
    text-align: center; }
    #view_cafe .article_section__images__slides-nav li {
      display: inline-block;
      vertical-align: middle;
      width: calc(33% - 3px);
      margin: 0;
      line-height: 0;
      position: relative;
      cursor: pointer;
      background: #000;
      border: 2px solid #FFF;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease; }
      #view_cafe .article_section__images__slides-nav li.current {
        border-color: #fba5b3; }
  #view_cafe .mv {
    position: relative; }
    #view_cafe .mv h2, #view_cafe .mv h3, #view_cafe .mv h4, #view_cafe .mv ul.sns {
      position: absolute;
      z-index: 9; }
    #view_cafe .mv h2 {
      top: 10%;
      left: 10%;
      font-size: 7.5rem;
      line-height: 110%;
      color: white;
      letter-spacing: .2rem;
      font-weight: normal; }
    #view_cafe .mv img.main_image {
      width: 100%; }
    #view_cafe .mv ul.sns {
      width: 200px;
      top: 20px;
      right: 20px;
      text-align: right; }
      #view_cafe .mv ul.sns li {
        width: 30px;
        margin: 1%;
        display: inline-block; }
    #view_cafe .mv .mvlogo {
      width: 50%;
      height: auto;
      position: absolute;
      top: 5%;
      left: 5%; }
      #view_cafe .mv .mvlogo.left {
        right: auto;
        left: 5%; }
      #view_cafe .mv .mvlogo.right {
        right: 5%;
        left: auto;
        text-align: right; }
      #view_cafe .mv .mvlogo.bottom {
        top: auto;
        bottom: 5%; }
  #view_cafe #container {
    width: 1024px;
    padding: 5% 0 1%;
    margin: 0 auto;
    max-width: 100%; }
    #view_cafe #container > h3 {
      line-height: 2.0;
      text-align: center;
      font-weight: normal;
      margin-left: auto;
      margin-right: auto;
      width: calc(90% - 10px);
      font-size: 1.55rem; }
    #view_cafe #container > h4 {
      border-left: currentColor 5px solid;
      padding-left: 10px;
      font-size: 2.4rem;
      color: #20b2aa;
      font-weight: 400;
      letter-spacing: .1em;
      max-width: calc(100% - 20px);
      margin-left: auto;
      margin-right: auto; }
      #view_cafe #container > h4.retro,
      #view_cafe #container > h4.retro + p {
        color: #FE7D14; }
    #view_cafe #container > p {
      color: #20b2aa;
      font-size: 1.5rem;
      max-width: calc(100% - 20px);
      margin: 15px auto; }
    #view_cafe #container h3 + h4 {
      margin-top: 70px; }
    #view_cafe #container .island_info {
      display: flex;
      align-items: center;
      margin: 40px 0 70px; }
      #view_cafe #container .island_info > img {
        margin: 0 7.5%;
        width: 25%; }
      #view_cafe #container .island_info p {
        font-size: 1.6rem;
        line-height: 1.5;
        width: 50%;
        font-weight: normal; }
    #view_cafe #container section {
      background: #FFF;
      padding: 20px;
      margin-bottom: 70px; }
      #view_cafe #container section > p {
        letter-spacing: .05em;
        line-height: 2.0;
        margin: 10px 10px 30px; }
      #view_cafe #container section .gallery {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap; }
        #view_cafe #container section .gallery .image {
          width: 470px;
          height: 280px;
          max-width: calc(50% - 20px);
          margin-bottom: 20px;
          background-size: cover;
          background-position: center; }
          #view_cafe #container section .gallery .image:nth-child(2n) {
            margin-left: 20px; }
          #view_cafe #container section .gallery .image .caption {
            width: 100%;
            text-align: left;
            margin: 5px 10px 30px; }
      #view_cafe #container section .info {
        font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        margin: 25px 0 25px;
        padding: 15px;
        border: 1px dashed #20b2aa;
        position: relative; }
        #view_cafe #container section .info.retro {
          border-color: #fea760; }
        #view_cafe #container section .info h4, #view_cafe #container section .info p {
          margin: 0;
          font-weight: bold;
          line-height: 1.8;
          font-size: 1.6rem;
          width: calc(100% - 220px); }
        #view_cafe #container section .info h4 {
          border-left: 8px solid #20b2aa;
          padding-left: 10px;
          line-height: 1.4;
          margin: 5px 0 8px; }
          #view_cafe #container section .info h4.retro {
            border-left-color: #FE7D14; }
        #view_cafe #container section .info p span {
          display: inline-block; }
          #view_cafe #container section .info p span:first-child {
            margin-right: 3em; }
        #view_cafe #container section .info a.detail {
          background: #20b2aa;
          position: absolute;
          top: 0;
          right: 30px;
          bottom: 0;
          margin: auto;
          width: 180px;
          height: 50px;
          color: #FFF;
          font-weight: bold;
          text-decoration: none;
          border-radius: 40px;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          letter-spacing: .05em; }
          #view_cafe #container section .info a.detail.retro {
            background-color: #FE7D14; }
          #view_cafe #container section .info a.detail:before {
            content: '詳細を見る '; }
          #view_cafe #container section .info a.detail:after {
            font-size: 1.0rem;
            content: '';
            margin-left: .4em; }
      #view_cafe #container section .check {
        border: 2px solid #20b2aa;
        padding: 0 20px 30px;
        margin-top: 40px;
        font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        display: flex;
        flex-wrap: wrap; }
        #view_cafe #container section .check h3 {
          margin-top: 0;
          margin-bottom: 25px;
          border-bottom: 1px solid #20b2aa;
          display: inline-flex;
          position: relative;
          left: -20px;
          min-height: 40px;
          align-items: center;
          color: #20b2aa; }
          #view_cafe #container section .check h3 span {
            padding-top: 5px; }
          #view_cafe #container section .check h3:before {
            content: '';
            height: 100%;
            display: inline-block;
            background: #20b2aa url(../../static/day0_2018/common/check.png) no-repeat center/85% auto;
            color: #FFF;
            padding: 5px 10px;
            width: 100px;
            margin-right: .5em; }
        #view_cafe #container section .check .profile {
          width: calc(100% - 330px);
          flex-shrink: 0;
          position: relative; }
          #view_cafe #container section .check .profile ul {
            margin: 0;
            padding-left: 0; }
            #view_cafe #container section .check .profile ul li {
              list-style: none;
              margin: 0 0 10px;
              display: flex;
              font-weight: bold; }
              #view_cafe #container section .check .profile ul li:before {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                background: #EFEFEF;
                width: 100px;
                text-align: center;
                padding: 10px 0; }
              #view_cafe #container section .check .profile ul li span {
                display: inline-block;
                background: #EFEFEF;
                padding: 10px 20px;
                width: 100%;
                margin-left: 10px; }
              #view_cafe #container section .check .profile ul li.name::before {
                content: '店舗名'; }
              #view_cafe #container section .check .profile ul li.address::before {
                content: '住所'; }
              #view_cafe #container section .check .profile ul li.tel::before {
                content: 'TEL'; }
          #view_cafe #container section .check .profile > img {
            margin-top: 5px;
            width: 40%; }
            #view_cafe #container section .check .profile > img.icon {
              width: auto;
              height: 65px;
              margin-left: auto;
              position: absolute;
              right: 0;
              bottom: 0; }
        #view_cafe #container section .check .image {
          width: 300px;
          height: 220px;
          background-size: cover;
          background-position: center;
          margin-left: auto;
          margin-bottom: 0; }
  #view_cafe .main {
    height: 500px;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding-bottom: 30px;
    margin: 20px; }
    #view_cafe .main p {
      background: #FFF;
      margin: 0;
      padding: 5px 15px;
      max-width: 85%; }
    #view_cafe .main h4 {
      background: #ffffff;
      margin: 0;
      padding: 4px 12px;
      border-left: 7px solid #20b2aa;
      font-size: 2.8rem;
      max-width: 95%; }
      #view_cafe .main h4.retro {
        border-left-color: #FE7D14; }
  #view_cafe .main_text {
    text-align: center;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    position: relative; }
    #view_cafe .main_text h2 {
      padding: 3% 0 0;
      font-size: 4rem;
      color: #00008b;
      letter-spacing: 1vw;
      font-weight: normal; }
      #view_cafe .main_text h2 strong {
        display: block;
        font-weight: normal;
        font-size: 1.8rem; }
    #view_cafe .main_text > p {
      letter-spacing: .05em;
      line-height: 2.0;
      margin: 2% 5% 5%; }
  #view_cafe nav {
    display: table;
    width: 60%;
    margin: auto;
    height: auto; }
    #view_cafe nav a {
      width: 50%;
      display: table-cell;
      text-align: center;
      background: #20b2aa;
      border: 1px solid white;
      vertical-align: middle;
      padding: 2% 0;
      color: white;
      font-size: 130%; }
  #view_cafe .btns a {
    border: 1px solid #20b2aa;
    background: #20b2aa;
    background-image: url("/src/contents/view_cafe/img/all/btn.png");
    background-repeat: no-repeat;
    background-position: 96% 50%;
    color: white;
    display: inline-block;
    padding: 4px 40px;
    text-decoration: none !important;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease; }
    #view_cafe .btns a:hover {
      color: #20b2aa;
      border: 1px solid #20b2aa;
      background-color: rgba(32, 178, 170, 0.2); }
    #view_cafe .btns a.back {
      background-image: url("/src/contents/view_cafe/img/all/btn_back.png");
      background-repeat: no-repeat;
      background-position: 4% 50%; }
  #view_cafe .btns.blue a {
    border: 1px solid #76c7f0;
    background-color: #76c7f0; }
    #view_cafe .btns.blue a:hover {
      color: #76c7f0;
      background-color: rgba(118, 199, 240, 0.2); }
  #view_cafe .btns.brown a {
    color: white;
    border: 1px solid #a86f4c;
    background-color: #a86f4c; }
    #view_cafe .btns.brown a:hover {
      color: #a86f4c;
      background-color: rgba(168, 111, 76, 0.2); }
  #view_cafe .btns.green a {
    color: white;
    border: 1px solid #008b8b;
    background-color: #008b8b; }
    #view_cafe .btns.green a:hover {
      color: #008b8b;
      background-color: rgba(0, 139, 139, 0.2);
      border-color: #008b8b; }
  #view_cafe .btns.gray a {
    border: 1px solid #a9a9a9;
    background-color: #a9a9a9; }
    #view_cafe .btns.gray a:hover {
      color: #a9a9a9;
      background-color: rgba(169, 169, 169, 0.2); }
  #view_cafe .btns.big a {
    padding: 2% 5%;
    font-size: 150%;
    letter-spacing: .2vw;
    background-position: 95% 50%;
    background-image: url("/src/contents/view_cafe/img/all/btn_big.png"); }
    #view_cafe .btns.big a.back {
      background-position: 5% 50%;
      background-image: url("/src/contents/view_cafe/img/all/btn_big_back.png"); }
  #view_cafe .links {
    text-align: center;
    width: 80%;
    margin: auto;
    padding: 5% 0 5%; }
    #view_cafe .links h3 {
      padding: 2% 0;
      font-size: 120%;
      letter-spacing: .5vw; }
    #view_cafe .links .link2.btns a {
      margin: 0 2% 2%;
      padding: 8px 40px;
      width: calc(50% - 90px); }
    #view_cafe .links .link2.btns.brown a {
      background-color: #a86f4c;
      border-color: #a86f4c; }
      #view_cafe .links .link2.btns.brown a:hover {
        background: rgba(168, 111, 76, 0.2);
        color: #a86f4c; }
    #view_cafe .links .link2.btns.green a {
      background-color: #00008b;
      border-color: #00008b; }
      #view_cafe .links .link2.btns.green a:hover {
        background: rgba(0, 139, 139, 0.2);
        color: #008b8b;
        border-color: #008b8b; }
    #view_cafe .links .link2.btns.gray a {
      border: 1px solid #a9a9a9;
      background-color: #a9a9a9; }
      #view_cafe .links .link2.btns.gray a:hover {
        color: #a9a9a9;
        background-color: rgba(169, 169, 169, 0.2); }
  #view_cafe.index .mv .mvlogo {
    top: 12%;
    left: 2%; }

/*#####################################################################
 *
 * tab base in
 *
 #####################################################################*/
@media all and (max-width: 1024px) {
  #view_cafe {
    width: 100%;
    left: 0; }
    #view_cafe .links {
      width: 100%; }
  .contents_inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none; }
  .contents_inner .breadcrumb {
    padding-left: 2%;
    padding-right: 2%; } }

/*#####################################################################
*
 * sp 767px in
 *
#####################################################################*/
@media all and (max-width: 767px) {
  .sp {
    display: inline-block !important; }
  .pc {
    display: none !important; }
  .sptcenter {
    text-align: center; }
  #view_cafe {
    font-size: 1.5rem; }
    #view_cafe .article_section__images__slides-nav li {
      width: calc(33% - 1vmin); }
    #view_cafe .mv ul.sns {
      width: 40%;
      top: 1vw;
      right: 1vw; }
      #view_cafe .mv ul.sns li {
        width: 15%; }
    #view_cafe nav {
      width: 100%; }
      #view_cafe nav a {
        font-size: 3.5vw; }
    #view_cafe .main_text h2 {
      font-size: 6vw; }
      #view_cafe .main_text h2 strong {
        font-size: 1.8rem; }
    #view_cafe .main_text p {
      text-align: left; }
    #view_cafe .main_text br {
      display: none; }
    #view_cafe #container {
      width: 100%; }
      #view_cafe #container > h3 {
        font-size: 1.4rem;
        margin-bottom: calc(1em + 20px);
        width: calc(100% - 20px); }
      #view_cafe #container .island_info {
        flex-direction: column;
        padding: 20px 10px;
        margin: 30px 0; }
        #view_cafe #container .island_info > img {
          width: 60%;
          margin-bottom: 15px; }
        #view_cafe #container .island_info p {
          width: 90%; }
      #view_cafe #container .main {
        height: 80vw;
        padding-bottom: 15px; }
        #view_cafe #container .main.text {
          display: block;
          background: #FFF;
          height: auto;
          padding-top: 5px;
          padding-bottom: 0; }
          #view_cafe #container .main.text p {
            max-width: 95%; }
        #view_cafe #container .main.picture > p,
        #view_cafe #container .main.picture > h4 {
          display: none; }
        #view_cafe #container .main p {
          font-size: 1.3rem; }
        #view_cafe #container .main h4 {
          font-size: 2rem; }
      #view_cafe #container section {
        margin-bottom: 25px; }
        #view_cafe #container section > p {
          margin: 15px 0; }
        #view_cafe #container section .gallery .image {
          width: 100%;
          height: 55vw;
          max-width: none;
          margin: 0 0 20px !important; }
        #view_cafe #container section .info h4, #view_cafe #container section .info p {
          width: 100%; }
        #view_cafe #container section .info p {
          font-size: 1.4rem;
          margin-bottom: 15px; }
        #view_cafe #container section .info a.detail {
          position: relative;
          left: 0;
          right: 0; }
        #view_cafe #container section .check {
          padding: 0 10px 5px; }
          #view_cafe #container section .check h3 {
            left: -11px;
            margin-bottom: 15px;
            height: auto; }
            #view_cafe #container section .check h3 span {
              padding: 8px 0 4px; }
          #view_cafe #container section .check .profile {
            width: 100%; }
            #view_cafe #container section .check .profile ul li {
              margin-bottom: 5px; }
              #view_cafe #container section .check .profile ul li span {
                margin-left: 5px; }
            #view_cafe #container section .check .profile > img {
              width: 75%; }
              #view_cafe #container section .check .profile > img.icon {
                position: relative; }
          #view_cafe #container section .check .image {
            margin-top: 15px;
            margin-left: 0;
            width: 100%; }
    #view_cafe .textbox_under p {
      font-size: 1.3rem; }
    #view_cafe #container section.links {
      padding: 0; }
    #view_cafe .links {
      width: 100%;
      margin: 0; }
      #view_cafe .links .link2.btns {
        text-align: center; }
        #view_cafe .links .link2.btns a {
          width: calc(50% - 3vw);
          padding: 4px 0;
          margin: 1vw;
          font-size: 3vw;
          line-height: 6vw;
          text-align: center;
          background-position: 99% 50%; }
          #view_cafe .links .link2.btns a.back {
            background-position: 1% 50%; }
          #view_cafe .links .link2.btns a.w100 {
            width: 90%; }
        #view_cafe .links .link2.btns.brown a, #view_cafe .links .link2.btns.gray a, #view_cafe .links .link2.btns.green a {
          color: white;
          font-size: 3vw; }
  #container .banner {
    margin-top: 20px; }
    #container .banner a {
      font-size: 1.7rem; } }

/***********************************************************/
.float_l {
  float: left; }

.float_r {
  float: right; }

.end {
  clear: both;
  font-size: 1px;
  height: 1px;
  padding: 0px;
  margin: 0px;
  display: block; }

.relative {
  position: relative; }

.absolute {
  position: absolute; }

.fixed {
  position: fixed; }

.clear {
  display: block;
  clear: both;
  height: 2px; }

.cleared {
  display: block;
  clear: both; }

.align_l, .t_left {
  text-align: left !important; }

.align_r, .t_right {
  text-align: right !important; }

.align_c, .t_center {
  text-align: center !important; }

.va_top {
  vartical-align: top; }

.va_bottom {
  vartical-align: bottom; }

.va_middle {
  vartical-align: middle; }

.allura {
  font-family: 'Allura'; }

.mincho {
  font-family: 'Sawarabi Mincho',"游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; }

.nato_serif, #view_cafe {
  font-family: "Noto Serif JP"; }

/* display */
.none {
  display: none; }

.block {
  display: block; }

.inline {
  display: inline; }

.inlineblock {
  display: inline-block; }

/* clearfix */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden; }

.clearfix {
  display: block; }

html > body .clearfix {
  display: block\9; }